/*
  FICHIER SOURCE — les pages HTML chargent style.min.css.
  Après toute modification ici, régénérer la version minifiée :
  npx --yes csso-cli style.css -o style.min.css
  (et penser à incrémenter le ?v= dans les pages HTML si le site est en ligne)
*/

/* ── POLICES AUTO-HÉBERGÉES (RGPD : aucun appel aux serveurs Google) ── */
@font-face {
  font-family: 'Geist';
  font-style: normal;
  font-weight: 300 900;
  font-display: swap;
  src: url('fonts/geist-var-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Geist';
  font-style: normal;
  font-weight: 300 900;
  font-display: swap;
  src: url('fonts/geist-var-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Instrument Serif';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/instrument-serif-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Instrument Serif';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/instrument-serif-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Instrument Serif';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/instrument-serif-italic-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Instrument Serif';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/instrument-serif-italic-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --bg:           #F6F5F2;
  --bg-2:         #EDECEA;
  --surface:      #FFFFFF;
  --border:       rgba(0,0,0,0.07);
  --border-strong:rgba(0,0,0,0.13);
  --text:         #0D0D0D;
  --text-2:       #3C3C3C;
  --text-muted:   #6B6B6B; /* darkened from #909090 to meet WCAG AA 4.5:1 contrast on --bg/--surface */
  --text-dim:     #C8C7C4;
  --accent:       #7B72E9;
  --accent-dark:  #5A52C8;
  --accent-light: #A09AEF;
  --accent-bg:    rgba(123,114,233,0.07);
  --green:        #2A7A4E;
  --r:            12px;
}

html { scroll-behavior: smooth; background: var(--bg); }

/* ── ACCESSIBILITY: skip link ── */
.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 10000;
  background: var(--text);
  color: var(--surface);
  padding: 12px 22px;
  font-size: 13px;
  font-weight: 700;
  text-decoration: none;
  border-radius: 0 0 8px 0;
}
.skip-link:focus {
  left: 0;
}

/* ── ACCESSIBILITY: visible focus fallback for elements without a dedicated focus style ── */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

body {
  background: var(--bg);
  color: var(--text);
  font-family: 'Geist', sans-serif;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  display:flex; flex-direction:column; min-height:100vh;
}
body > main { flex:1 0 auto; }
body > footer { flex-shrink:0; }

/* ── GRAIN ── */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 9996;
  pointer-events: none;
  opacity: 0.028;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.80' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23n)' opacity='1'/%3E%3C/svg%3E");
  background-size: 200px;
}


/* ── SCROLL PROGRESS ── */
#scroll-prog {
  position:fixed; top:0; left:0; height:2px; width:0%;
  background:linear-gradient(90deg,var(--accent),var(--accent-light));
  z-index:9997; pointer-events:none;
}

/* ── INTRO (dark → light reveal) ── */
body.intro-active { overflow:hidden; }
#intro {
  position:fixed; inset:0; z-index:9999;
  display:flex; align-items:center; justify-content:center;
  background:#F6F5F2;
}
.intro-inner {
  display:flex; flex-direction:column; align-items:center; gap:14px;
  animation: iIn .5s cubic-bezier(.22,1,.36,1) forwards;
}
@keyframes iIn { from{opacity:0} to{opacity:1} }
.intro-logo {
  font-size: clamp(64px,12vw,160px);
  font-weight:800; text-transform:uppercase;
  letter-spacing:.22em; color:#0D0D0D;
  white-space:nowrap; will-change:transform;
}

@media(max-width:640px){
  .intro-logo { font-size:54px; }
}
.intro-eye {
  font-size:11px; letter-spacing:.38em; text-transform:uppercase;
  color:#AAAAAA; font-weight:300;
}
.ibar-track { width:100%; height:1px; }
.ibar {
  height:1px; background:linear-gradient(90deg,#7B72E9,#AFA9EC);
  clip-path:inset(0 100% 0 0);
  animation:ibar .8s cubic-bezier(.22,1,.36,1) .4s forwards;
}
@keyframes ibar { to{clip-path:inset(0 0% 0 0)} }
.col { color:#7B72E9; }

/* ══════════════ NAV ══════════════ */
nav {
  position:fixed; top:0; left:0; right:0; z-index:100;
  display:flex; align-items:center; justify-content:space-between;
  padding:0 56px; height:64px;
  background:transparent;
  border-bottom:1px solid transparent;
  transition:background .4s, box-shadow .4s, border-color .4s;
}
nav.scrolled {
  background:rgba(246,245,242,.92);
  backdrop-filter:blur(20px);
  box-shadow:0 1px 28px rgba(0,0,0,.07);
  border-color:var(--border-strong);
}

/* Nav white when over dark hero */
nav:not(.scrolled) .nav-logo { color:#fff; }
nav:not(.scrolled) .nav-links a { color:rgba(255,255,255,.7); }
nav:not(.scrolled) .nav-links a:hover { color:#fff; }
nav:not(.scrolled) .nav-links a::after { background:#fff; }
nav:not(.scrolled) .nav-clock { color:rgba(255,255,255,.5); border-color:rgba(255,255,255,.2); }
nav:not(.scrolled) .nav-cta { background:rgba(255,255,255,.12); color:#fff; border:1px solid rgba(255,255,255,.25); }
nav:not(.scrolled) .nav-burger span { background:#fff; }
nav:not(.scrolled) .col { color:var(--accent-light); }

.nav-logo {
  font-size:13px; font-weight:800; letter-spacing:.22em;
  text-transform:uppercase; color:var(--text); text-decoration:none;
}

.nav-links { display:flex; gap:40px; }
.nav-links a {
  font-size:11px; color:var(--text-muted); text-decoration:none;
  letter-spacing:.08em; text-transform:uppercase;
  transition:color .2s; position:relative;
}
.nav-links a::after {
  content:''; position:absolute; bottom:-3px; left:0;
  width:0; height:1px; background:var(--accent); transition:width .3s;
}
.nav-links a:hover { color:var(--text); }
.nav-links a:hover::after, .nav-links a.active::after { width:100%; }
.nav-links a.active { color:var(--text); }

.nav-right { display:flex; align-items:center; gap:20px; }

.nav-clock {
  font-size:10px; color:var(--text-muted); letter-spacing:.06em;
  font-variant-numeric:tabular-nums; white-space:nowrap;
  border-left:1px solid var(--border-strong); padding-left:20px;
}

.nav-cta {
  background:var(--text); color:var(--bg);
  font-size:10px; font-weight:700; padding:9px 20px;
  border-radius:6px; text-decoration:none; letter-spacing:.08em;
  text-transform:uppercase;
  transition:opacity .2s, transform .2s;
}
.nav-cta:hover { opacity:.85; transform:translateY(-1px); }

/* Burger */
.nav-burger {
  display:none;
  width:44px;
  height:44px;
  align-items:center;
  justify-content:center;
  flex-direction:column;
  gap:5px;
  cursor:pointer;
  background:none;
  border:none;
  padding:0;
  touch-action:manipulation;
}
.nav-burger:focus-visible {
  outline:2px solid var(--accent);
  outline-offset:4px;
}
.nav-burger span {
  display:block; width:22px; height:1.5px; background:var(--text);
  border-radius:2px; transition:transform .3s,opacity .3s;
}
.nav-burger.open span:nth-child(1){ transform:translateY(6.5px) rotate(45deg); }
.nav-burger.open span:nth-child(2){ opacity:0; }
.nav-burger.open span:nth-child(3){ transform:translateY(-6.5px) rotate(-45deg); }

.nav-mobile {
  display:none; position:fixed; inset:0; top:64px;
  background:rgba(246,245,242,.97); backdrop-filter:blur(20px);
  z-index:99; flex-direction:column; align-items:center; justify-content:center;
  gap:36px; opacity:0; pointer-events:none; transition:opacity .3s;
}
.nav-mobile.open { display:flex; opacity:1; pointer-events:all; }
.nav-mobile a {
  font-size:28px; font-weight:800; color:var(--text);
  text-decoration:none; letter-spacing:-.02em; transition:color .2s;
}
.nav-mobile a:hover { color:var(--accent); }

/* ══════════════ HERO ══════════════ */
.hero {
  position:relative;
  min-height:100vh;
  overflow:hidden;
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
  border-bottom:1px solid rgba(255,255,255,.1);
  background:#111;
}

.hero-video-bg {
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover; z-index:0;
}

.hero-overlay {
  position:absolute; inset:0; z-index:1;
  background:linear-gradient(
    to bottom,
    rgba(0,0,0,.35) 0%,
    rgba(0,0,0,.2)  40%,
    rgba(0,0,0,.55) 100%
  );
}

.hero-bottom {
  position:relative; z-index:2;
  display:flex; align-items:flex-end; justify-content:space-between;
  padding:0 56px 52px;
  gap:40px;
}

.hero-brand {
  font-size:clamp(40px,7.3vw,112px);
  font-weight:800; letter-spacing:-.03em; line-height:.9;
  color:#fff; text-transform:uppercase;
  margin:0;
}
.hero-brand-accent { color:var(--accent-light); }

.hero-bottom-right {
  display:flex; flex-direction:column; align-items:flex-end; gap:20px;
  padding-bottom:6px; flex-shrink:0; max-width:340px;
}

.hero-showreel {
  display:inline-flex; align-items:center; gap:10px;
  font-size:11px; font-weight:700; letter-spacing:.1em; text-transform:uppercase;
  color:#fff; text-decoration:none;
  border:1px solid rgba(255,255,255,.35); padding:11px 20px; border-radius:100px;
  transition:background .25s, border-color .25s;
  white-space:nowrap;
}
.hero-showreel:hover { background:rgba(255,255,255,.12); border-color:rgba(255,255,255,.6); }
.hero-showreel svg { flex-shrink:0; }

.hero-cta {
  display:inline-flex; align-items:center; gap:10px;
  font-family:inherit; font-size:13px; font-weight:700; letter-spacing:.06em; text-transform:uppercase;
  color:#fff; text-decoration:none;
  background:var(--accent); border:none; cursor:pointer;
  padding:18px 34px; border-radius:100px;
  box-shadow:0 10px 30px rgba(123,114,233,.45);
  transition:transform .25s, box-shadow .25s, background .25s;
  white-space:nowrap;
}
.hero-cta:hover {
  background:var(--accent-dark);
  transform:translateY(-3px);
  box-shadow:0 18px 44px rgba(123,114,233,.6);
}

.hero-tagline {
  font-size:12px; color:rgba(255,255,255,.55);
  line-height:1.8; text-align:right;
}

/* keep btn-dark / btn-line for other sections */
.btn-dark {
  background:var(--text); color:var(--surface);
  font-size:11px; font-weight:700; padding:14px 28px;
  border-radius:7px; text-decoration:none; letter-spacing:.06em;
  text-transform:uppercase; display:inline-flex; align-items:center; gap:8px;
  transition:transform .25s,box-shadow .25s,opacity .2s;
  white-space:nowrap;
}
.btn-dark:hover{ transform:translateY(-2px); box-shadow:0 8px 24px rgba(0,0,0,.14); }

.btn-line {
  font-size:11px; color:var(--text-muted); text-decoration:none;
  letter-spacing:.06em; text-transform:uppercase;
  display:inline-flex; align-items:center; gap:6px;
  transition:color .2s; white-space:nowrap;
}
.btn-line:hover{ color:var(--text); }

/* ══════════════ ABOUT ══════════════ */
.about {
  padding:100px 72px;
  border-bottom:1px solid var(--border);
  display:grid; grid-template-columns:45fr 55fr; gap:60px; align-items:start;
}
.about-left {}
.about-eyebrow { font-size:10px; color:var(--text-muted); letter-spacing:.16em; text-transform:uppercase; margin-bottom:32px; }
.about-title {
  font-size:clamp(28px,3.2vw,44px); font-weight:800;
  letter-spacing:-.03em; line-height:1.1; color:var(--text); margin-bottom:24px;
}
.about-title .serif {
  font-family:'Instrument Serif',serif; font-style:italic; font-weight:400; color:var(--accent);
}
.about-desc {
  font-size:16px; color:#3A3A3A; line-height:1.8; font-weight:400;
  margin-bottom:32px;
}

.about-values {
  display:flex; flex-direction:column; gap:10px; margin-top:0;
}
.about-value {
  font-size:13px; color:#6B6B6B; font-weight:400;
  display:flex; align-items:center; gap:10px;
}
.about-value-check { color:#6C5CE7; font-style:normal; }

.about-right {}
.about-img {
  width:100%; aspect-ratio:4/3;
  border-radius:12px;
  object-fit:cover; object-position:center;
  display:block;
}
.about-stats {
  display:grid; grid-template-columns:1fr 1fr; gap:2px;
}
.astat {
  padding:24px; background:var(--surface); border:1px solid var(--border);
}
.astat:first-child { border-radius:var(--r) 0 0 0; }
.astat:nth-child(2){ border-radius:0 var(--r) 0 0; }
.astat:nth-child(3){ border-radius:0 0 0 var(--r); }
.astat:last-child  { border-radius:0 0 var(--r) 0; }
.astat-num {
  font-size:36px; font-weight:800; letter-spacing:-.04em; color:var(--text);
  line-height:1; margin-bottom:6px;
}
.astat-num .sfx { font-size:22px; color:var(--accent); }
.astat-label { font-size:10px; color:var(--text-muted); letter-spacing:.06em; text-transform:uppercase; line-height:1.5; }

/* ══════════════ LOGO BAND ══════════════ */
.logo-band {
  padding:48px 56px;
  border-bottom:1px solid var(--border);
  background:var(--surface);
}
.logo-band-top {
  display:flex; align-items:center; justify-content:space-between;
  margin-bottom:36px;
}
.logo-band-label { font-size:10px; color:var(--text-muted); letter-spacing:.16em; text-transform:uppercase; }

.logos-row { display:flex; gap:40px; align-items:center; flex-wrap:wrap; }
.logo-ph {
  height:32px; border-radius:6px;
  background:var(--bg-2); border:1px solid var(--border);
  display:flex; align-items:center; justify-content:center;
  padding:0 24px; font-size:10px; font-weight:700;
  color:var(--text-dim); letter-spacing:.1em; text-transform:uppercase;
  white-space:nowrap; flex-shrink:0;
}

/* ══════════════ PORTFOLIO ══════════════ */
.portfolio {
  background:#f4efe6;
  border-bottom:1px solid var(--border);
  overflow:hidden;
}
.section-top {
  display:flex; align-items:flex-end; justify-content:space-between;
  margin-bottom:60px;
}
.sec-eyebrow { font-size:10px; color:var(--accent-dark); font-weight:800; letter-spacing:.16em; text-transform:uppercase; margin-bottom:12px; }
.sec-title {
  font-size:clamp(28px,3.5vw,48px); font-weight:800;
  letter-spacing:-.03em; line-height:1.1; color:var(--text);
}
.sec-title .serif { font-family:'Instrument Serif',serif; font-style:italic; font-weight:400; color:var(--accent); }
.sec-link {
  font-size:11px; color:var(--text-muted); text-decoration:none;
  letter-spacing:.06em; text-transform:uppercase; display:flex; align-items:center; gap:6px;
  flex-shrink:0; transition:color .2s; padding-bottom:4px;
}
.sec-link:hover { color:var(--text); }

.portfolio-stage {
  position:relative;
  isolation:isolate;
  min-height:820px;
  display:grid;
  grid-template-columns:minmax(320px,.84fr) minmax(460px,1fr);
  align-items:center;
  gap:clamp(44px,7vw,108px);
  padding:clamp(84px,8vw,118px) clamp(34px,6vw,72px) 132px;
  background:
    radial-gradient(circle at 18% 24%, rgba(123,114,233,.22), transparent 28%),
    radial-gradient(circle at 82% 36%, rgba(123,114,233,.16), transparent 26%),
    #f6f5f2;
}

.portfolio-live-bg,
.portfolio-wash {
  position:absolute;
  inset:0;
  pointer-events:none;
}

.portfolio-live-bg {
  z-index:0;
  overflow:hidden;
  background:#dedbd4;
}

.reveal-item {
  position:absolute;
  inset:-7%;
  opacity:0;
  transform:scale(1.04);
  transition:opacity .55s ease, transform 1.1s ease;
  filter:saturate(.98) contrast(.98);
}

.reveal-item.is-active {
  opacity:1;
  transform:scale(1);
}

.reveal-item iframe {
  position:absolute;
  left:50%;
  top:50%;
  width:1440px;
  height:920px;
  max-width:none;
  border:0;
  opacity:.48;
  pointer-events:none;
  transform:translate(-50%,-50%) scale(1.08);
  transform-origin:center;
}

.reveal-fallback {
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center;
  opacity:.92;
  transform:scale(1.06);
}

.portfolio-wash {
  z-index:1;
  background:
    linear-gradient(90deg, rgba(246,245,242,.82) 0%, rgba(246,245,242,.56) 34%, rgba(246,245,242,.02) 60%, rgba(246,245,242,.18) 100%),
    linear-gradient(180deg, rgba(246,245,242,0), rgba(246,245,242,.22));
}

.portfolio-copy,
.portfolio-focus,
.portfolio-rail {
  position:relative;
  z-index:2;
}

.portfolio-copy {
  max-width:530px;
}

.portfolio-copy .sec-eyebrow {
  color:var(--accent);
  font-weight:800;
  font-size:12px;
  letter-spacing:.18em;
  margin-bottom:26px;
}

.services-header .sec-eyebrow {
  color:var(--accent);
  font-size:12px;
  letter-spacing:.18em;
}

.portfolio-copy h2 {
  color:var(--text);
  font-family:'Geist',sans-serif;
  font-size:clamp(44px,5.3vw,72px);
  font-weight:800;
  letter-spacing:-.06em;
  line-height:.92;
  margin-bottom:28px;
}
.portfolio-copy h2 .accent { color:var(--accent); }

.portfolio-copy > p {
  color:var(--text-2);
  font-size:15px;
  line-height:1.7;
  max-width:430px;
}

.portfolio-copy > p.portfolio-disclaimer {
  font-size:12px;
  color:var(--text-muted);
  margin-top:10px;
}

.portfolio-all-button {
  appearance:none;
  background:transparent;
  border:0;
  color:var(--text);
  display:inline-flex;
  align-items:center;
  gap:16px;
  margin-top:36px;
  font-size:13px;
  font-weight:700;
}

.portfolio-all-button span {
  display:grid;
  place-items:center;
  width:42px;
  height:42px;
  border-radius:999px;
  background:var(--accent);
  color:#fff;
  font-size:18px;
}

.portfolio-focus {
  justify-self:end;
  width:min(100%,419px);
  min-height:351px;
  display:grid;
  grid-template-rows:auto auto auto auto 1fr;
  background:rgba(255,255,255,.78);
  border:1px solid rgba(255,255,255,.86);
  border-radius:16px;
  box-shadow:0 23px 68px rgba(35,30,54,.18);
  padding:26px;
  overflow:hidden;
  backdrop-filter:blur(26px);
  transform:translateY(-34px);
}

.portfolio-focus-top {
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:14px;
  color:var(--accent);
  font-size:8px;
  font-weight:800;
  text-transform:uppercase;
}

.portfolio-tags {
  display:flex;
  flex-wrap:wrap;
  justify-content:flex-end;
  gap:5px;
}

.portfolio-focus-meta {
  display:flex;
  align-items:center;
  gap:8px;
}

.portfolio-case-badge {
  color:#fff;
  background:var(--accent);
  border-radius:999px;
  font-size:8px;
  font-weight:800;
  letter-spacing:.04em;
  padding:4px 8px;
  text-transform:uppercase;
}

.portfolio-tags span {
  color:var(--accent);
  background:rgba(123,114,233,.12);
  border-radius:999px;
  font-size:8px;
  font-weight:800;
  letter-spacing:.04em;
  padding:4px 7px;
  text-transform:uppercase;
}

.portfolio-focus h3 {
  color:var(--text);
  font-family:'Instrument Serif',serif;
  font-size:clamp(27px,2.85vw,40px);
  font-weight:400;
  letter-spacing:-.04em;
  line-height:1;
  margin-top:19px;
}

.portfolio-focus > p {
  color:var(--text-2);
  font-size:11px;
  line-height:1.6;
  max-width:324px;
  margin-top:11px;
}

.portfolio-card-link {
  color:var(--accent);
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-size:10px;
  font-weight:700;
  margin:14px 0 21px;
  text-decoration:none;
}

.portfolio-card-link span {
  font-size:13px;
  line-height:1;
}

.portfolio-live-frame {
  position:relative;
  aspect-ratio:16/9;
  border-radius:10px;
  overflow:hidden;
  background:
    radial-gradient(circle at 50% 42%, rgba(123,114,233,.14), transparent 42%),
    #f6f5f2;
  box-shadow:0 13px 34px rgba(34,27,68,.18);
}

.portfolio-clickable {
  cursor:pointer;
}

.portfolio-live-frame img {
  width:100%;
  height:100%;
  display:block;
  object-fit:cover;
  object-position:center;
}

.reveal-num {
  color:var(--accent);
  font-family:'Geist',sans-serif;
  font-size:clamp(51px,5.75vw,76px);
  font-weight:900;
  letter-spacing:-.08em;
  line-height:.82;
  margin-top:19px;
}

.portfolio-rail {
  position:absolute;
  left:50%;
  width:min(1240px, calc(100% - 72px));
  bottom:36px;
  display:grid;
  grid-template-columns:67px minmax(0,1fr) 67px;
  align-items:center;
  justify-content:center;
  gap:34px;
  transform:translateX(-50%);
}

.portfolio-arrow {
  appearance:none;
  width:67px;
  height:67px;
  border-radius:999px;
  border:1.5px solid var(--accent);
  background:rgba(246,245,242,.42);
  color:var(--accent);
  font-size:29px;
  line-height:1;
  display:grid;
  place-items:center;
  backdrop-filter:blur(8px);
}

.portfolio-mini-list {
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:0;
  min-width:0;
  background:rgba(246,245,242,.48);
  border:1px solid rgba(255,255,255,.34);
  border-radius:18px;
  overflow:hidden;
  backdrop-filter:blur(6px);
}

.portfolio-mini {
  appearance:none;
  min-height:91px;
  min-width:0;
  display:grid;
  grid-template-columns:74px 38px minmax(0,1fr);
  grid-template-rows:auto auto;
  column-gap:17px;
  row-gap:4px;
  align-items:center;
  background:transparent;
  border:0;
  border-right:1px solid rgba(13,13,13,.34);
  border-radius:0;
  color:var(--text);
  padding:10px 26px;
  text-align:left;
  transition:opacity .2s ease, transform .2s ease;
}

.portfolio-mini:hover,
.portfolio-mini.is-active {
  transform:translateY(-2px);
  opacity:1;
}

.portfolio-mini:last-child {
  border-right:0;
}

.portfolio-mini img {
  grid-row:1 / span 2;
  width:74px;
  height:74px;
  border-radius:12px;
  object-fit:cover;
  box-shadow:0 8px 24px rgba(13,13,13,.12);
}

.portfolio-mini span {
  align-self:end;
  color:var(--accent);
  font-size:16px;
  font-weight:800;
  line-height:1;
}

.portfolio-mini strong {
  align-self:end;
  overflow:visible;
  color:var(--text);
  font-size:17px;
  font-weight:800;
  line-height:1.1;
  text-overflow:clip;
  white-space:nowrap;
}

.portfolio-mini-name {
  cursor:pointer;
  text-decoration-color:transparent;
  transition:text-decoration-color .2s;
}
.portfolio-mini-name:hover {
  text-decoration:underline;
  text-decoration-color:currentColor;
}

.portfolio-mini small {
  grid-column:3;
  align-self:start;
  overflow:hidden;
  color:var(--text-muted);
  font-size:13px;
  line-height:1.25;
  text-overflow:ellipsis;
  white-space:nowrap;
}

@media(max-width:980px){
  .portfolio-stage {
    min-height:auto;
    grid-template-columns:1fr;
    gap:42px;
    padding:84px 24px 150px;
  }

  .portfolio-wash {
    background:
      linear-gradient(180deg, rgba(246,245,242,.95) 0%, rgba(246,245,242,.88) 40%, rgba(246,245,242,.2) 68%, rgba(246,245,242,.1) 100%);
  }

  .portfolio-focus {
    justify-self:stretch;
    width:100%;
    transform:none;
  }

  .portfolio-rail {
    left:50%;
    width:calc(100% - 48px);
    bottom:34px;
    grid-template-columns:67px minmax(0,1fr) 67px;
    justify-content:stretch;
    transform:translateX(-50%);
  }

  .portfolio-mini-list {
    display:flex;
    gap:0;
    overflow-x:auto;
    scrollbar-width:none;
    scroll-snap-type:x mandatory;
  }

  .portfolio-mini-list::-webkit-scrollbar {
    display:none;
  }

  .portfolio-mini {
    flex:0 0 100%;
    width:100%;
    scroll-snap-align:start;
  }
}

@media(max-width:760px){
  .portfolio-stage {
    padding:64px 18px 132px;
  }

  .portfolio-copy h2 {
    font-size:42px;
  }

  .portfolio-focus {
    min-height:0;
    padding:24px;
  }

  .portfolio-focus-top {
    display:grid;
    gap:14px;
  }

  .portfolio-tags {
    justify-content:flex-start;
  }

  .portfolio-rail {
    left:50%;
    width:calc(100% - 24px);
    bottom:20px;
    grid-template-columns:44px minmax(0,1fr) 44px;
    gap:8px;
    transform:translateX(-50%);
  }

  .portfolio-arrow {
    width:44px;
    height:44px;
    font-size:20px;
  }

  .portfolio-mini {
    min-height:79px;
    grid-template-columns:44px 20px minmax(0,1fr);
    column-gap:10px;
    padding:8px 12px;
  }

  .portfolio-mini img {
    width:44px;
    height:44px;
    border-radius:9px;
  }

  .portfolio-mini strong {
    font-size:15px;
    white-space:normal;
    line-height:1.15;
  }

  .portfolio-mini small {
    font-size:12px;
    white-space:normal;
  }
}

/* ══════════════ SERVICES ══════════════ */
.services {
  position:relative;
  padding:112px 72px 118px;
  border-bottom:1px solid var(--border);
  background:
    radial-gradient(circle at 76% 18%, rgba(123,114,233,.11), transparent 34%),
    radial-gradient(circle at 10% 86%, rgba(123,114,233,.055), transparent 30%),
    linear-gradient(180deg,#FBFAF8 0%, #fff 100%);
  overflow:hidden;
}

.services::before {
  content:'';
  position:absolute;
  right:4%;
  top:24%;
  width:620px;
  height:620px;
  border-radius:999px;
  background:radial-gradient(circle, rgba(123,114,233,.13), rgba(123,114,233,.04) 46%, transparent 72%);
  filter:blur(42px);
  pointer-events:none;
}

.services::after {
  content:'';
  position:absolute;
  inset:10% 0 auto;
  height:360px;
  background-image:
    linear-gradient(rgba(17,17,17,.08) 1px, transparent 1px),
    linear-gradient(90deg, rgba(17,17,17,.06) 1px, transparent 1px);
  background-size:112px 112px;
  opacity:.12;
  mask-image:radial-gradient(circle at 72% 42%, #000 0%, transparent 68%);
  pointer-events:none;
}

.method-scroll + .services {
  position:relative;
  z-index:1;
  margin-top:0;
  padding-top:112px;
}

.services-header {
  position:relative;
  z-index:1;
  max-width:none;
  margin-bottom:70px;
}
.services-title {
  font-size:clamp(36px,4.2vw,58px);
  font-weight:750;
  color:var(--text);
  letter-spacing:-.035em;
  line-height:1.04;
  margin-top:16px;
  white-space:nowrap;
}
.services-title .serif {
  font-family:'Instrument Serif',serif; font-style:italic; font-weight:400;
  color:var(--accent);
}

.services-layout {
  position:relative;
  z-index:1;
  display:grid;
  grid-template-columns:minmax(360px,.92fr) minmax(420px,1fr);
  gap:clamp(52px,7vw,104px);
  align-items:start;
}

/* ── Liste gauche ── */
.svc-list {
  display:flex;
  flex-direction:column;
  gap:10px;
  padding-top:4px;
}

.svc-item {
  appearance:none;
  display:block;
  width:100%;
  padding:0;
  border:1px solid transparent;
  border-bottom-color:rgba(17,17,17,.08);
  border-radius:0;
  background:transparent;
  color:inherit;
  font:inherit;
  text-align:left;
  cursor:pointer;
  transition:
    background .3s ease,
    border-color .3s ease,
    border-radius .3s ease,
    box-shadow .3s ease,
    transform .3s ease;
}
.svc-item:last-child { border-bottom-color:rgba(17,17,17,.08); }

.svc-item {
  display:grid;
  grid-template-columns:44px 60px minmax(0,1fr);
  align-items:center;
  gap:20px;
  padding:26px 28px;
}
.svc-num {
  font-size:28px;
  font-weight:800;
  color:var(--accent);
  letter-spacing:-.02em;
  font-variant-numeric:tabular-nums;
}
.svc-thumb {
  width:60px; height:60px; border-radius:12px;
  object-fit:cover; flex-shrink:0;
}
.svc-text { display:flex; flex-direction:column; gap:4px; overflow:hidden; min-width:0; }
.svc-name {
  overflow:hidden;
  color:rgba(17,17,17,.66);
  font-size:clamp(17px,1.3vw,21px);
  font-weight:500;
  letter-spacing:-.025em;
  text-overflow:ellipsis;
  white-space:nowrap;
  transition:color .3s, font-weight .3s;
}
.svc-desc {
  font-size:13px; color:var(--text-muted);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.svc-bar {
  display:none;
}

/* Active state */
.svc-item.active {
  background:rgba(123,114,233,.065);
  border-color:rgba(123,114,233,.22);
  border-radius:22px;
  box-shadow:0 18px 55px rgba(123,114,233,.08);
}
.svc-item.active .svc-name  { color:var(--text); font-weight:600; }

.svc-item:hover {
  background:rgba(123,114,233,.035);
}
.svc-item:hover .svc-name  { color:var(--text); }
.svc-item:focus-visible {
  outline:2px solid rgba(123,114,233,.38);
  outline-offset:3px;
  border-radius:22px;
}

/* ── Panneau droit ── */
.svc-panels {
  position:sticky;
  top:88px;
}

.svc-panel {
  display:none;
  opacity:0;
  transform:translateY(14px);
  transition:opacity .4s ease, transform .4s ease;
}
.svc-panel.active {
  display:flex;
  flex-direction:column;
  gap:0;
  opacity:1;
  transform:translateY(0);
  animation:svcFadeIn .45s ease both;
}
@keyframes svcFadeIn {
  from { opacity:0; transform:translateY(14px); }
  to   { opacity:1; transform:translateY(0); }
}

.svc-panel-visual {
  position:relative;
  width:100%;
  overflow:hidden;
  margin-bottom:34px;
  background:#f4f3f1;
  border:1px solid rgba(17,17,17,.08);
  border-radius:34px 34px 6px 6px;
  box-shadow:0 30px 90px rgba(17,17,17,.08);
}
.svc-panel-visual::after {
  content:'';
  position:absolute;
  inset:0;
  background:
    linear-gradient(135deg, rgba(123,114,233,.08), transparent 42%),
    linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.18));
  pointer-events:none;
}
.svc-panel-visual img,
.svc-panel-visual video {
  width:100%;
  height:clamp(340px,36vw,520px);
  object-fit:cover;
  object-position:center;
  display:block;
  filter:saturate(.9) contrast(.96) brightness(1.03);
}
.svc-panel-bg-num {
  font-size:clamp(80px,14vw,180px); font-weight:800;
  color:rgba(0,0,0,.04); letter-spacing:-.04em;
  user-select:none; line-height:1;
}

.svc-panel-content {
  max-width:720px;
}
.svc-panel-title {
  margin:0;
  color:var(--text);
  font-size:clamp(28px,2.8vw,44px);
  font-weight:650;
  letter-spacing:-.035em;
  line-height:1.05;
}
.svc-panel-text {
  max-width:640px;
  margin-top:16px;
  color:rgba(17,17,17,.58);
  font-size:15px;
  line-height:1.75;
}
.svc-panel-cta {
  display:none;
}

/* ══════════════ MÉTHODE ══════════════ */
.method {
  padding:80px 32px;
  border-bottom:1px solid var(--border);
  background:var(--bg);
}
.method-header { margin-bottom:60px; }

.method-grid {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:32px;
  max-width:1820px;
  margin:0 auto;
}

.method-card {
  box-sizing:border-box;
  display:grid;
  grid-template-columns:52fr 48fr;
  align-items:stretch;
  background:#F5F5F5;
  border:1px solid rgba(0,0,0,.06);
  border-radius:14px;
  box-shadow:0 2px 16px rgba(0,0,0,.06);
  overflow:hidden;
}

.method-card-text { padding:29px 32px; }

.method-card-num {
  display:block;
  font-size:13px; font-weight:600; color:#6C5CE7;
  letter-spacing:.06em; font-variant-numeric:tabular-nums;
  margin-bottom:12px;
}
.method-card-title {
  font-size:24px; font-weight:700;
  letter-spacing:-.01em; color:#0A0A0A; margin:0 0 12px;
}
.method-card-desc {
  font-size:14px; color:#666; line-height:1.7; margin-bottom:20px;
}
.method-card-list {
  list-style:none; padding:0; margin:0;
  display:flex; flex-direction:column; gap:8px;
}
.method-card-list li {
  font-size:13px; color:#888; line-height:1.5;
  padding-left:16px; position:relative;
}
.method-card-list li::before {
  content:'';
  position:absolute; left:0; top:7px;
  width:5px; height:5px; border-radius:50%;
  background:#6C5CE7;
}

.method-card-visual {
  min-height:336px;
  background:var(--bg-2);
}
.method-card-visual img,
.method-card-visual video {
  width:100%; height:100%; object-fit:cover; display:block;
}
.method-card-placeholder {
  font-family:'Instrument Serif',serif;
  font-size:clamp(60px,8vw,100px);
  color:rgba(0,0,0,.06);
  user-select:none;
}

/* ══════════════ MARQUEE BREAK ══════════════ */
/* Methode Alytera - sticky editorial scroll */
.sr-only {
  position:absolute;
  width:1px;
  height:1px;
  padding:0;
  margin:-1px;
  overflow:hidden;
  clip:rect(0,0,0,0);
  white-space:nowrap;
  border:0;
}

.method-scroll {
  --method-progress:0;
  position:relative;
  height:43.4vh;
  min-height:364px;
  background:#FBFAF8;
  border-top:1px solid rgba(0,0,0,.055);
  border-bottom:1px solid rgba(0,0,0,.055);
  overflow:hidden;
}

.method-bg {
  position:absolute;
  inset:0;
  z-index:0;
  overflow:hidden;
  pointer-events:none;
  background:
    radial-gradient(circle at 28% 34%, rgba(123,114,233,.12), transparent 31%),
    radial-gradient(circle at 72% 68%, rgba(123,114,233,.09), transparent 34%),
    linear-gradient(180deg,#FBFAF8 0%,#F6F5F2 100%);
}

.method-bg::before {
  content:'';
  position:absolute;
  inset:12%;
  opacity:.07;
  background-image:
    linear-gradient(rgba(13,13,13,.7) 1px, transparent 1px),
    linear-gradient(90deg, rgba(13,13,13,.7) 1px, transparent 1px);
  background-size:120px 120px;
  mask-image:radial-gradient(circle at 50% 50%, #000 0%, transparent 68%);
}

.method-halo {
  position:absolute;
  border-radius:999px;
  filter:blur(92px);
  opacity:.42;
  background:radial-gradient(circle, rgba(123,114,233,.24) 0%, rgba(123,114,233,.08) 42%, transparent 72%);
  animation:methodHaloDrift 14s ease-in-out infinite alternate;
}

.method-halo-1 {
  width:680px;
  height:680px;
  left:8%;
  top:12%;
}

.method-halo-2 {
  width:760px;
  height:760px;
  right:4%;
  bottom:4%;
  opacity:.32;
  animation-delay:2s;
}

.method-line {
  position:absolute;
  width:540px;
  height:1px;
  background:linear-gradient(90deg, transparent, rgba(123,114,233,.42), transparent);
  opacity:.42;
  transform:rotate(-12deg);
  animation:methodLineDrift 11s ease-in-out infinite alternate;
}

.method-line-1 { top:30%; left:8%; }
.method-line-2 { right:8%; bottom:32%; animation-delay:2.4s; }
.method-line-3 { width:360px; left:44%; bottom:18%; opacity:.24; animation-delay:4s; }

.method-sticky {
  position:relative;
  z-index:2;
  height:100%;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  padding:0 32px;
  overflow:hidden;
  isolation:isolate;
}

.method-sticky::before {
  content:'';
  position:absolute;
  left:-12%;
  bottom:-36%;
  width:760px;
  height:640px;
  border-radius:999px;
  background:radial-gradient(circle, rgba(123,114,233,.28) 0%, rgba(123,114,233,.13) 38%, rgba(123,114,233,.035) 70%, transparent 100%);
  filter:blur(46px);
  z-index:0;
  pointer-events:none;
}

.ambient-liquid {
  position:absolute;
  inset:0;
  z-index:1;
  overflow:hidden;
  pointer-events:none;
  opacity:1;
}

.ambient-liquid::before,
.ambient-liquid::after {
  content:'';
  position:absolute;
  display:block;
  pointer-events:none;
  will-change:transform, opacity;
}

.ambient-liquid::before {
  left:-14%;
  bottom:-46%;
  width:860px;
  height:620px;
  border-radius:52% 48% 46% 54% / 58% 46% 54% 42%;
  background:
    radial-gradient(circle at 28% 26%, rgba(255,255,255,.82) 0%, rgba(255,255,255,.34) 18%, transparent 42%),
    radial-gradient(circle at 52% 58%, rgba(123,114,233,.42) 0%, rgba(123,114,233,.22) 38%, rgba(123,114,233,.06) 72%, transparent 100%);
  filter:blur(22px);
  opacity:.9;
  animation:liquidVeil 8.5s ease-in-out infinite alternate;
}

.ambient-liquid::after {
  left:2%;
  bottom:2%;
  width:380px;
  height:210px;
  border-radius:50%;
  background:radial-gradient(ellipse at center, rgba(123,114,233,.32) 0%, rgba(123,114,233,.15) 46%, transparent 76%);
  filter:blur(14px);
  opacity:.86;
  animation:liquidGlow 6.8s ease-in-out infinite alternate;
}

.liquid-bubble {
  position:absolute;
  bottom:-48px;
  left:0;
  display:block;
  border-radius:999px;
  opacity:.42;
  will-change:transform, opacity;
  background:
    radial-gradient(circle at 32% 28%,
      rgba(255,255,255,.88) 0%,
      rgba(218,212,255,.54) 34%,
      rgba(123,114,233,.34) 62%,
      rgba(123,114,233,.07) 100%);
  border:1px solid rgba(123,114,233,.32);
  box-shadow:
    inset 0 0 28px rgba(255,255,255,.54),
    0 0 54px rgba(123,114,233,.26);
  filter:blur(.25px);
  animation:liquidRise linear infinite;
}

.bubble-1 {
  width:250px;
  height:190px;
  left:-62px;
  animation-duration:18s;
  animation-delay:-9s;
}

.bubble-2 {
  width:124px;
  height:98px;
  left:9%;
  animation-duration:16s;
  animation-delay:-5s;
  filter:blur(.8px);
}

.bubble-3 {
  width:48px;
  height:48px;
  left:4%;
  animation-duration:13s;
  animation-delay:-7s;
}

.bubble-4 {
  width:78px;
  height:62px;
  left:18%;
  animation-duration:17s;
  animation-delay:-11s;
  filter:blur(1px);
}

.bubble-5 {
  width:34px;
  height:34px;
  left:31%;
  animation-duration:12s;
  animation-delay:-3s;
}

.bubble-6 {
  width:178px;
  height:142px;
  left:13%;
  animation-duration:20s;
  animation-delay:-14s;
  filter:blur(1.4px);
}

.bubble-7 {
  width:30px;
  height:30px;
  left:40%;
  animation-duration:14s;
  animation-delay:-8s;
}

.bubble-8 {
  width:68px;
  height:58px;
  left:26%;
  animation-duration:18s;
  animation-delay:-13s;
  filter:blur(.7px);
}

.method-kicker,
.method-words,
.method-track {
  position:relative;
  z-index:2;
}

.method-kicker {
  margin:0 0 34px;
  font-size:12px;
  font-weight:800;
  color:var(--accent);
  letter-spacing:.18em;
  text-transform:uppercase;
}

.method-words {
  position:relative;
  width:100%;
  height:170px;
  display:flex;
  align-items:center;
  justify-content:center;
}

.method-word {
  position:absolute;
  z-index:2;
  max-width:calc(100vw - 48px);
  opacity:0;
  transform:translateY(70px) scale(.98);
  color:var(--text);
  font-size:140px;
  font-weight:800;
  line-height:.94;
  letter-spacing:0;
  text-align:center;
  text-wrap:balance;
  transition:
    opacity .62s ease,
    transform .82s cubic-bezier(.16,1,.3,1);
  will-change:opacity, transform;
}

.method-word.is-before {
  transform:translateY(-70px) scale(.985);
}

.method-word.is-active {
  opacity:1;
  transform:translateY(0) scale(1);
  text-shadow:0 22px 80px rgba(123,114,233,.22);
}

.method-track {
  width:190px;
  height:2px;
  margin-top:42px;
  background:rgba(13,13,13,.08);
  overflow:hidden;
}

.method-track span {
  display:block;
  width:100%;
  height:100%;
  background:linear-gradient(90deg, transparent 0%, var(--accent) 18%, var(--accent) 82%, transparent 100%);
  transform:scaleX(var(--method-progress));
  transform-origin:left center;
}

@keyframes methodHaloDrift {
  from { transform:translate3d(-18px,-12px,0) scale(1); }
  to   { transform:translate3d(28px,22px,0) scale(1.06); }
}

@keyframes methodLineDrift {
  from { transform:translateX(-36px) rotate(-12deg); }
  to   { transform:translateX(78px) rotate(-12deg); }
}

@keyframes liquidRise {
  0% {
    opacity:0;
    transform:translate3d(0,30px,0) scale(.92);
  }
  12% {
    opacity:.42;
  }
  35% {
    opacity:.64;
    transform:translate3d(22px,-15vh,0) scale(1);
  }
  62% {
    opacity:.38;
    transform:translate3d(-14px,-31vh,0) scale(1.05);
  }
  100% {
    opacity:0;
    transform:translate3d(18px,-48vh,0) scale(1.1);
  }
}

@keyframes liquidVeil {
  from {
    opacity:.76;
    transform:translate3d(-22px, 12px, 0) rotate(-4deg) scale(1);
  }
  to {
    opacity:1;
    transform:translate3d(54px, -42px, 0) rotate(3deg) scale(1.1);
  }
}

@keyframes liquidGlow {
  from {
    opacity:.64;
    transform:translate3d(-8px, 12px, 0) scale(.96);
  }
  to {
    opacity:.96;
    transform:translate3d(32px, -30px, 0) scale(1.1);
  }
}

.marquee-break {
  padding:56px 0; border-bottom:1px solid var(--border);
  background:var(--text); overflow:hidden;
}
.mq-inner {
  display:flex; gap:0; width:max-content;
  animation:mq 22s linear infinite;
}
.mq-inner:hover { animation-play-state:paused; }
@keyframes mq { from{transform:translateX(0)} to{transform:translateX(-50%)} }
.mq-item {
  display:flex; align-items:center; gap:32px;
  padding:0 36px; font-size:clamp(20px,2.4vw,32px);
  font-weight:800; letter-spacing:-.02em; color:rgba(246,245,242,.15);
  white-space:nowrap; text-transform:uppercase;
  transition:color .3s;
}
.mq-item:hover { color:rgba(246,245,242,.4); }
.mq-sep { color:var(--accent); opacity:.6; font-weight:400; font-family:'Instrument Serif',serif; font-style:italic; font-size:.9em; }

/* ══════════════ TESTIMONIALS ══════════════ */
.testimonials {
  padding:100px 56px;
  border-bottom:1px solid var(--border);
}
.testi-grid {
  display:grid; grid-template-columns:repeat(2,1fr);
  gap:2px; margin-top:60px;
}
.testi-card {
  background:var(--surface); padding:40px;
  border:1px solid var(--border); border-radius:0;
  transition:background .2s;
}
.testi-card:nth-child(1){ border-radius:var(--r) 0 0 0; }
.testi-card:nth-child(2){ border-radius:0 var(--r) 0 0; }
.testi-card:nth-child(3){ border-radius:0 0 0 var(--r); }
.testi-card:nth-child(4){ border-radius:0 0 var(--r) 0; }
.testi-card:hover { background:var(--bg-2); }
.testi-stars { display:flex; gap:3px; margin-bottom:20px; }
.testi-stars span { color:var(--accent); font-size:14px; }
.testi-quote {
  font-size:15px; font-weight:500; color:var(--text);
  line-height:1.7; letter-spacing:-.01em; margin-bottom:28px;
  font-family:'Instrument Serif',serif; font-style:italic;
}
.testi-author { display:flex; align-items:center; gap:12px; }
.testi-avatar {
  width:38px; height:38px; border-radius:50%;
  background:var(--bg-2); border:1px solid var(--border);
  display:flex; align-items:center; justify-content:center;
  font-size:11px; font-weight:700; color:var(--text-dim);
  flex-shrink:0;
  font-family:'Geist',sans-serif; font-style:normal;
}
.testi-name { font-size:13px; font-weight:700; color:var(--text); letter-spacing:-.01em; }
.testi-role { font-size:10px; color:var(--text-muted); letter-spacing:.04em; margin-top:1px; }

/* ══════════════ PRICING ══════════════ */
.pricing {
  padding:100px 56px;
  border-bottom:1px solid var(--border);
  background:var(--surface);
}
.pricing-toggle-wrap {
  display:flex; align-items:center; justify-content:center;
  gap:14px; margin-top:48px; margin-bottom:48px;
}
.toggle-label { font-size:12px; color:var(--text-muted); letter-spacing:.04em; }
.toggle-label.active { color:var(--text); font-weight:600; }
.toggle-btn {
  width:44px; height:24px; border-radius:100px;
  background:var(--bg-2); border:1px solid var(--border-strong);
  position:relative; cursor:pointer; transition:background .3s;
}
.toggle-btn.on { background:var(--text); }
.toggle-knob {
  position:absolute; top:3px; left:3px;
  width:16px; height:16px; border-radius:50%;
  background:var(--text-muted); transition:transform .3s, background .3s;
}
.toggle-btn.on .toggle-knob { transform:translateX(20px); background:var(--surface); }
.save-pill {
  font-size:9px; background:rgba(123,114,233,.1);
  color:var(--accent-dark); border:1px solid rgba(123,114,233,.25);
  padding:3px 9px; border-radius:100px; letter-spacing:.06em;
  text-transform:uppercase; font-weight:600;
}

.pricing-grid {
  display:grid; grid-template-columns:repeat(3,1fr); gap:2px;
}
.price-card {
  background:var(--bg); border:1px solid var(--border);
  border-radius:0; padding:40px;
  transition:transform .3s, box-shadow .3s, background .3s;
  position:relative; overflow:hidden;
}
.price-card:first-child { border-radius:var(--r) 0 0 var(--r); }
.price-card:last-child  { border-radius:0 var(--r) var(--r) 0; }
.price-card.popular {
  background:var(--text); z-index:1;
  transform:translateY(-8px);
  box-shadow:0 20px 60px rgba(0,0,0,.15);
}
.popular-badge {
  display:inline-flex; align-items:center; gap:6px;
  font-size:9px; font-weight:700; letter-spacing:.1em; text-transform:uppercase;
  color:var(--accent-dark); background:rgba(123,114,233,.12);
  border:1px solid rgba(123,114,233,.25);
  padding:4px 10px; border-radius:100px; margin-bottom:24px;
}
.price-card.popular .popular-badge {
  color:rgba(246,245,242,.7); background:rgba(255,255,255,.1);
  border-color:rgba(255,255,255,.15);
}
.price-plan { font-size:11px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--text-muted); margin-bottom:12px; }
.price-card.popular .price-plan { color:rgba(246,245,242,.5); }
.price-amount {
  font-size:44px; font-weight:800; letter-spacing:-.04em;
  color:var(--text); line-height:1; margin-bottom:4px;
}
.price-card.popular .price-amount { color:#FAFAFA; }
.price-period { font-size:12px; color:var(--text-muted); margin-bottom:28px; }
.price-card.popular .price-period { color:rgba(246,245,242,.5); }
.price-divider { height:1px; background:var(--border); margin-bottom:28px; }
.price-card.popular .price-divider { background:rgba(255,255,255,.12); }
.price-features { display:flex; flex-direction:column; gap:12px; margin-bottom:32px; }
.price-feat {
  display:flex; align-items:flex-start; gap:10px;
  font-size:12px; color:var(--text-2); line-height:1.5;
}
.price-card.popular .price-feat { color:rgba(246,245,242,.75); }
.feat-check {
  width:16px; height:16px; border-radius:50%;
  background:rgba(123,114,233,.12); border:1px solid rgba(123,114,233,.25);
  display:flex; align-items:center; justify-content:center;
  flex-shrink:0; margin-top:1px;
}
.feat-check svg { color:var(--accent); }
.price-card.popular .feat-check { background:rgba(255,255,255,.1); border-color:rgba(255,255,255,.2); }
.price-card.popular .feat-check svg { color:rgba(246,245,242,.8); }
.price-cta {
  display:block; text-align:center; text-decoration:none;
  font-size:11px; font-weight:700; letter-spacing:.07em; text-transform:uppercase;
  padding:13px 24px; border-radius:7px;
  background:var(--bg-2); color:var(--text);
  border:1px solid var(--border-strong);
  transition:background .2s, transform .2s, box-shadow .2s;
}
.price-card.popular .price-cta { background:#FAFAFA; color:var(--text); }
.price-cta:hover { transform:translateY(-2px); box-shadow:0 6px 20px rgba(0,0,0,.1); }

/* Price values per period */
.price-monthly, .price-yearly { }
.price-yearly { display:none; }
.pricing.yearly-active .price-monthly { display:none; }
.pricing.yearly-active .price-yearly  { display:block; }

/* ══════════════ FAQ ══════════════ */
.faq-section {
  position:relative;
  overflow:hidden;
  padding:clamp(80px,10vw,150px) 24px;
  background:
    radial-gradient(circle at 80% 0%, rgba(123,114,233,.1), transparent 34%),
    radial-gradient(circle at 10% 95%, rgba(123,114,233,.06), transparent 28%),
    linear-gradient(180deg,#fbfaf8 0%, #fff 100%);
  border-bottom:1px solid var(--border);
}

.faq-container {
  width:min(1180px,100%);
  margin:0 auto;
}

.faq-header {
  max-width:760px;
  margin:0 auto clamp(40px,6vw,72px);
  text-align:center;
}

.faq-kicker {
  display:inline-block;
  margin-bottom:14px;
  color:var(--accent-dark);
  font-size:12px;
  font-weight:700;
  letter-spacing:.18em;
  text-transform:uppercase;
}

.faq-header h2 {
  margin:0;
  color:var(--text);
  font-size:clamp(46px,6.8vw,92px);
  line-height:.95;
  letter-spacing:-.06em;
}
.faq-header h2 .accent { color:var(--accent); }

.faq-header p {
  max-width:620px;
  margin:22px auto 0;
  color:rgba(17,17,17,.58);
  font-size:clamp(16px,1.4vw,20px);
  line-height:1.65;
}

.faq-categories {
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:14px;
  margin-bottom:clamp(34px,5vw,56px);
}

.faq-category {
  height:54px;
  padding:0 26px;
  border:1px solid rgba(17,17,17,.1);
  border-radius:999px;
  background:rgba(255,255,255,.72);
  color:rgba(17,17,17,.68);
  font:inherit;
  font-size:15px;
  font-weight:600;
  cursor:pointer;
  transition:
    background .25s ease,
    border-color .25s ease,
    color .25s ease,
    transform .25s ease,
    box-shadow .25s ease;
}

.faq-category:hover {
  transform:translateY(-2px);
  border-color:rgba(123,114,233,.3);
}

.faq-category.is-active {
  color:var(--accent);
  background:rgba(123,114,233,.07);
  border-color:rgba(123,114,233,.24);
  box-shadow:0 16px 44px rgba(123,114,233,.1);
}

.faq-category:focus-visible,
.faq-question:focus-visible,
.faq-cta-button:focus-visible {
  outline:2px solid rgba(123,114,233,.42);
  outline-offset:3px;
}

.faq-layout {
  display:grid;
  grid-template-columns:1fr;
  gap:28px;
  align-items:stretch;
}

.faq-list {
  overflow:hidden;
  border:1px solid rgba(17,17,17,.08);
  border-radius:28px;
  background:rgba(255,255,255,.76);
  box-shadow:0 28px 80px rgba(17,17,17,.055);
  backdrop-filter:blur(18px);
}

.faq-item {
  border-bottom:1px solid rgba(17,17,17,.07);
}

.faq-item:last-child {
  border-bottom:0;
}

.faq-question {
  appearance:none;
  width:100%;
  min-height:86px;
  display:grid;
  grid-template-columns:56px 1fr 28px;
  gap:18px;
  align-items:center;
  padding:24px 28px;
  border:0;
  background:transparent;
  color:inherit;
  font:inherit;
  text-align:left;
  cursor:pointer;
  transition:background .25s ease, color .25s ease;
}

.faq-question:hover {
  background:rgba(123,114,233,.035);
}

.faq-question.is-open {
  background:rgba(123,114,233,.065);
}

.faq-number {
  color:var(--accent);
  font-size:16px;
  font-weight:600;
}

.faq-question-text {
  color:var(--text);
  font-size:clamp(16px,1.25vw,20px);
  font-weight:600;
  line-height:1.25;
}

.faq-chevron {
  justify-self:end;
  color:rgba(17,17,17,.45);
  transition:transform .25s ease, color .25s ease;
}

.faq-question.is-open .faq-chevron {
  color:var(--accent);
  transform:rotate(180deg);
}

.faq-answer-inline {
  position:relative;
  padding:0 28px 28px 102px;
  animation:faqAnswerReveal .3s ease both;
}

.faq-answer-inline[hidden] {
  display:none;
}

.faq-answer-inline p {
  max-width:640px;
  margin:0;
  color:rgba(17,17,17,.62);
  font-size:15px;
  line-height:1.75;
}

@keyframes faqAnswerReveal {
  from {
    opacity:0;
    transform:translateY(14px);
  }
  to {
    opacity:1;
    transform:translateY(0);
  }
}

.faq-cta {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:28px;
  margin-top:28px;
  padding:clamp(26px,4vw,40px);
  border:1px solid rgba(17,17,17,.08);
  border-radius:28px;
  background:linear-gradient(135deg, rgba(123,114,233,.07), rgba(255,255,255,.76));
  box-shadow:0 26px 70px rgba(17,17,17,.045);
}

.faq-cta h3 {
  margin:0;
  color:var(--text);
  font-size:clamp(22px,2vw,30px);
  letter-spacing:-.03em;
}

.faq-cta p {
  margin:8px 0 0;
  color:rgba(17,17,17,.58);
  line-height:1.6;
}

.faq-cta-button {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:12px;
  min-width:210px;
  height:56px;
  padding:0 28px;
  border:0;
  border-radius:14px;
  background:var(--accent);
  color:#fff;
  font:inherit;
  font-weight:700;
  text-decoration:none;
  cursor:pointer;
  box-shadow:0 18px 42px rgba(123,114,233,.26);
  transition:transform .25s ease, box-shadow .25s ease;
}

.faq-cta-button:hover {
  transform:translateY(-2px);
  box-shadow:0 22px 52px rgba(123,114,233,.32);
}

.faq-cta-button span {
  transition:transform .25s ease;
}

.faq-cta-button:hover span {
  transform:translateX(5px);
}

@media(max-width:980px) {
  .faq-cta {
    align-items:flex-start;
    flex-direction:column;
  }
  .faq-cta-button { width:100%; }
}

@media(max-width:640px) {
  .faq-section { padding-inline:18px; }
  .faq-categories {
    flex-wrap:wrap;
    justify-content:center;
    gap:8px;
  }
  .faq-category {
    flex:0 0 auto;
    height:40px;
    padding-inline:14px;
    font-size:12px;
  }
  .faq-question {
    grid-template-columns:42px 1fr 22px;
    padding:20px;
  }
  .faq-answer-inline {
    padding:0 20px 20px 80px;
  }
  .faq-list,
  .faq-cta {
    border-radius:22px;
  }
}

@media(prefers-reduced-motion:reduce) {
  .faq-category,
  .faq-question,
  .faq-chevron,
  .faq-answer-inline,
  .faq-cta-button {
    animation:none;
    transition:none;
  }
}

/* ══════════════ FOOTER CTA ══════════════ */
.footer-cta {
  padding:120px 56px;
  background:var(--text);
  position:relative; overflow:hidden;
  text-align:center;
}
.cta-halo {
  position:absolute; top:50%; left:50%;
  width:700px; height:700px;
  background:radial-gradient(circle,rgba(123,114,233,.18) 0%,transparent 60%);
  transform:translate(-50%,-50%); filter:blur(60px);
  animation:halo 10s ease-in-out infinite; pointer-events:none;
}
@keyframes halo {
  0%,100%{ transform:translate(-50%,-50%) scale(1); opacity:.8; }
  50%     { transform:translate(-50%,-50%) scale(1.2); opacity:1; }
}
.cta-inner { position:relative; max-width:640px; margin:0 auto; }
.cta-eyebrow {
  font-size:12px; font-weight:800; letter-spacing:.18em; text-transform:uppercase;
  color:var(--accent); margin-bottom:24px;
}
.cta-title {
  font-size:clamp(36px,5vw,64px); font-weight:800; letter-spacing:-.04em;
  line-height:1.05; color:#F6F5F2; margin-bottom:40px;
}
.cta-title .serif {
  font-family:'Instrument Serif',serif; font-style:italic; font-weight:400;
  color:var(--accent-light);
}
.cta-desc {
  font-size:16px; line-height:1.7; color:rgba(246,245,242,.55);
  max-width:440px; margin:0 auto 40px;
}
.cta-btn {
  display:inline-flex; align-items:center; gap:8px;
  font-family:inherit;
  font-size:11px; font-weight:700; letter-spacing:.08em; text-transform:uppercase;
  text-decoration:none; color:var(--text); background:#F6F5F2;
  border:none; cursor:pointer;
  padding:16px 34px; border-radius:8px;
  transition:transform .3s, box-shadow .3s;
  margin-bottom:20px;
}
.cta-btn:hover { transform:translateY(-4px); box-shadow:0 16px 44px rgba(123,114,233,.3); }
.cta-note { font-size:10px; color:rgba(246,245,242,.3); letter-spacing:.06em; text-transform:uppercase; }

/* ══════════════ MODALE RÉSERVATION ══════════════ */
.booking-overlay {
  position:fixed; inset:0; z-index:1000;
  background:rgba(8,8,12,.7);
  backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);
  display:flex; align-items:center; justify-content:center;
  padding:16px;
  overflow:auto;
  opacity:0; visibility:hidden;
  transition:opacity .35s ease, visibility .35s ease;
}
.booking-overlay.open { opacity:1; visibility:visible; }

.booking-modal {
  position:relative;
  width:100%; max-width:1160px;
  height:calc(100vh - 32px);
  height:calc(100dvh - 32px);
  max-height:860px;
  min-height:0;
  display:grid; grid-template-columns:0.85fr 1fr;
  background:var(--text);
  border-radius:20px;
  overflow:hidden;
  box-shadow:0 40px 100px rgba(0,0,0,.45);
  transform:scale(.94); opacity:0;
  transition:transform .4s cubic-bezier(.16,1,.3,1), opacity .35s ease;
}
.booking-overlay.open .booking-modal { transform:scale(1); opacity:1; }

.booking-close {
  position:absolute; top:20px; right:20px; z-index:2;
  width:36px; height:36px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.15);
  color:#F6F5F2; cursor:pointer;
  transition:background .2s, transform .2s;
}
.booking-close:hover { background:rgba(255,255,255,.18); transform:rotate(90deg); }

.booking-side {
  padding:56px 48px;
  display:flex; flex-direction:column; justify-content:center;
  min-height:0;
  overflow-y:auto;
}
.booking-eyebrow {
  font-size:10px; font-weight:800; letter-spacing:.2em; text-transform:uppercase;
  color:var(--accent-dark); margin-bottom:20px;
}
.home-booking-eyebrow {
  font-size:12px; letter-spacing:.18em; color:var(--accent);
}
.booking-title {
  font-size:clamp(26px,3vw,34px); font-weight:800; letter-spacing:-.03em;
  line-height:1.15; color:#F6F5F2; margin-bottom:18px;
}
.booking-title .serif {
  font-family:'Instrument Serif',serif; font-style:italic; font-weight:400;
  color:var(--accent-light);
}
.booking-desc {
  font-size:14px; color:rgba(246,245,242,.55); line-height:1.8; margin-bottom:28px;
}
.booking-benefits { list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:12px; }
.booking-benefits li { font-size:13px; color:rgba(246,245,242,.75); display:flex; align-items:center; gap:10px; }
.booking-check {
  flex-shrink:0; width:18px; height:18px; border-radius:50%;
  background:var(--accent-bg); color:var(--accent-light);
  display:flex; align-items:center; justify-content:center;
  font-size:10px; border:1px solid rgba(160,154,239,.3);
}

.booking-flex-note {
  font-size:12px; color:rgba(246,245,242,.45); line-height:1.7; margin-top:24px;
}

.booking-embed { min-height:0; overflow:hidden; background:#fff; }
.booking-embed iframe { width:100%; height:100%; border:none; display:block; }

@media(max-width:760px){
  .booking-modal { grid-template-columns:1fr; height:94vh; overflow-y:auto; }
  .booking-side { padding:48px 28px 32px; }
  .booking-embed { min-height:600px; }
}

/* ══════════════ FOOTER ══════════════ */
footer {
  background:var(--text);
  border-top:1px solid rgba(255,255,255,.08);
  padding:0 56px;
}

.footer-brand {
  display:flex; justify-content:center;
  padding:64px 0 40px;
  border-bottom:1px solid rgba(255,255,255,.08);
}
.footer-brand-logo {
  font-size:clamp(36px,5vw,64px); font-weight:800; letter-spacing:.08em;
  text-transform:uppercase; color:#fff; text-decoration:none;
}
.footer-brand-logo .col { color:var(--accent-light); }

.footer-simple {
  display:flex; align-items:center; justify-content:space-between;
  height:60px; gap:24px;
}

.footer-simple-logo {
  font-size:12px; font-weight:800; letter-spacing:.22em;
  text-transform:uppercase; color:#fff; text-decoration:none;
}
.footer-simple-logo .col { color:var(--accent-light); }

.footer-simple-links {
  display:flex; gap:32px;
}
.footer-simple-links a {
  font-size:10px; color:rgba(255,255,255,.4); text-decoration:none;
  letter-spacing:.1em; text-transform:uppercase; transition:color .2s;
}
.footer-simple-links a:hover { color:rgba(255,255,255,.8); }

.footer-simple-copy {
  font-size:10px; color:rgba(255,255,255,.3); letter-spacing:.04em;
}
.footer-top {
  display:grid; grid-template-columns:2fr 1fr 1fr 1.5fr;
  gap:60px; padding-bottom:56px; border-bottom:1px solid var(--border);
  margin-bottom:32px;
}
.footer-brand {}
.footer-logo { font-size:14px; font-weight:800; letter-spacing:.2em; text-transform:uppercase; color:var(--text); margin-bottom:12px; }
.footer-tagline { font-size:12px; color:var(--text-muted); line-height:1.7; max-width:240px; margin-bottom:24px; }
.footer-social { display:flex; gap:10px; }
.social-btn {
  width:34px; height:34px; border-radius:8px;
  border:1px solid var(--border-strong); background:var(--bg);
  display:flex; align-items:center; justify-content:center;
  text-decoration:none; color:var(--text-muted);
  transition:background .2s, color .2s, border-color .2s;
}
.social-btn:hover { background:var(--text); color:var(--surface); border-color:var(--text); }
.social-btn svg { width:14px; height:14px; }

.footer-col {}
.footer-col-title { font-size:10px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--text); margin-bottom:20px; }
.footer-col ul { list-style:none; display:flex; flex-direction:column; gap:10px; }
.footer-col ul li a {
  font-size:12px; color:var(--text-muted); text-decoration:none;
  letter-spacing:.03em; transition:color .2s;
}
.footer-col ul li a:hover { color:var(--text); }

.footer-contact {}
.contact-item { display:flex; flex-direction:column; gap:2px; margin-bottom:18px; }
.contact-label { font-size:9px; color:var(--text-dim); letter-spacing:.12em; text-transform:uppercase; }
.contact-val { font-size:12px; color:var(--text-muted); text-decoration:none; transition:color .2s; }
.contact-val:hover { color:var(--text); }
.contact-hours {
  display:flex; align-items:center; justify-content:space-between;
  font-size:11px; background:var(--bg); border:1px solid var(--border);
  padding:10px 14px; border-radius:8px; margin-top:8px;
}
.hours-label { color:var(--text-muted); letter-spacing:.04em; }
.hours-val { color:var(--text); font-weight:600; }

.footer-bottom {
  display:flex; align-items:center; justify-content:space-between; gap:24px;
}
.footer-copy { font-size:10px; color:var(--text-dim); letter-spacing:.04em; }
.footer-legal { display:flex; gap:24px; }
.footer-legal a {
  font-size:10px; color:var(--text-dim); text-decoration:none; letter-spacing:.04em;
  transition:color .2s;
}
.footer-legal a:hover { color:var(--text-muted); }
.footer-clock { font-size:10px; color:var(--text-dim); letter-spacing:.04em; font-variant-numeric:tabular-nums; }

/* ══════════════ RESPONSIVE ══════════════ */
@media(max-width:1024px){
  .footer-top { grid-template-columns:1fr 1fr; gap:40px; }
}
@media(max-width:900px){
  nav { padding:0 24px; }
  .nav-links,.nav-clock { display:none; }
  .nav-burger { display:flex; }

  .hero { min-height:50vh; }
  .hero-bottom { padding:0 24px 40px; flex-direction:column; align-items:flex-start; gap:24px; }
  .hero-bottom-right { align-items:flex-start; max-width:100%; }
  .hero-tagline { text-align:left; }

  .about { padding:64px 24px; grid-template-columns:1fr; gap:48px; }
  .about-img { aspect-ratio:16/9; }
  .logo-band { padding:36px 24px; }
  .portfolio { padding:0; }

  .services { padding:76px 24px; }
  .services-header { margin-bottom:44px; }
  .services-title {
    white-space:normal;
  }
  .services-layout { grid-template-columns:1fr; gap:46px; }
  .svc-item-inner {
    grid-template-columns:44px minmax(0,1fr) 18px;
    padding:22px 20px;
  }
  .svc-panel-visual {
    border-radius:26px 26px 6px 6px;
  }
  .svc-panel-visual video {
    height:clamp(280px,58vw,420px);
  }
  .svc-panels { position:relative; top:0; }

  .method { padding:64px 24px; }
  .method-header { margin-bottom:28px; }
  .method-grid { grid-template-columns:1fr; gap:24px; }
  .method-card { grid-template-columns:1fr; }
  .method-card-text { padding:28px 24px; order:2; }
  .method-card-visual { order:1; aspect-ratio:16/9; min-height:0; }

  .testimonials { padding:64px 24px; }
  .testi-grid { grid-template-columns:1fr; }
  .testi-card:nth-child(1){ border-radius:var(--r) var(--r) 0 0; }
  .testi-card:nth-child(2){ border-radius:0; }
  .testi-card:nth-child(3){ border-radius:0; }
  .testi-card:nth-child(4){ border-radius:0 0 var(--r) var(--r); }

  .pricing { padding:64px 24px; }
  .pricing-grid { grid-template-columns:1fr; gap:16px; }
  .price-card { border-radius:var(--r) !important; }
  .price-card.popular { transform:none; }

  .faq-section { padding:76px 24px; }
  .faq-layout { width:100%; }

  .footer-cta { padding:72px 24px; }
  footer { padding:48px 24px 32px; }
  .footer-top { grid-template-columns:1fr 1fr; gap:32px; }
  .footer-bottom { flex-wrap:wrap; gap:16px; }
  .footer-simple { flex-wrap:wrap; height:auto; justify-content:center; text-align:center; gap:16px; }
  .footer-simple-links { flex-wrap:wrap; justify-content:center; gap:16px 24px; }
}
@media(max-width:480px){
  nav { padding:0 20px; }
  .nav-cta { display:none; }
  .hero-bottom { padding:0 20px 32px; }
  .about { padding:48px 20px; }
  .logo-band { padding:28px 20px; }
  .services,.method,.testimonials,.pricing { padding:48px 20px; }
  .faq-section { padding:64px 20px; }
  .services {
    padding:64px 20px;
  }
  .svc-item-inner {
    grid-template-columns:38px minmax(0,1fr) 16px;
    gap:12px;
    padding:20px 16px;
  }
  .svc-name {
    font-size:17px;
  }
  .svc-panel-visual video {
    height:260px;
  }
  .svc-panel-title {
    font-size:28px;
  }
  .footer-cta { padding:56px 20px; }
  footer { padding:40px 20px 28px; }
  .footer-top { grid-template-columns:1fr; }
  .section-top { flex-direction:column; align-items:flex-start; gap:16px; }
}

/* ══════════════ PAGE OFFRES ══════════════ */
.offer-hero {
  position:relative; isolation:isolate;
  width:100%; max-width:none; margin:0 auto; text-align:center;
  padding:180px 24px 110px;
  overflow:hidden;
}
.about-page .offer-liquid { display:none; }
.about-page .offer-hero {
  max-width:none;
  width:100%;
}
.offer-hero-inner {
  max-width:960px;
  margin:0 auto;
}
.about-page .offer-hero::before {
  content:'';
  position:absolute; inset:0; z-index:0; pointer-events:none;
  background:
    radial-gradient(ellipse 140% 100% at 50% 100%, rgba(123,114,233,.24), transparent 88%),
    radial-gradient(ellipse 120% 90% at 50% 0%, rgba(123,114,233,.16), transparent 82%);
}
.offer-hero .sec-eyebrow { justify-content:center; }
.offer-hero-halo {
  position:absolute; z-index:0; pointer-events:none;
  top:75px; left:50%; transform:translateX(-50%);
  width:10000px; height:10000px;
  border-radius:50%;
  border:16px solid var(--accent);
  box-shadow:0 0 70px rgba(124,92,255,.45);
  -webkit-mask-image:linear-gradient(to bottom, black 0%, black 4%, transparent 10%);
  mask-image:linear-gradient(to bottom, black 0%, black 4%, transparent 10%);
}

.offer-liquid {
  position:absolute;
  left:50%;
  top:0;
  width:100vw;
  height:100%;
  overflow:hidden;
  pointer-events:none;
  transform:translateX(-50%);
  z-index:1;
}

.offer-liquid::before,
.offer-liquid::after {
  content:'';
  position:absolute;
  display:block;
  pointer-events:none;
  will-change:transform, opacity;
}

.offer-liquid::before {
  left:-9%;
  bottom:-42%;
  width:820px;
  height:570px;
  border-radius:52% 48% 46% 54% / 58% 46% 54% 42%;
  background:
    radial-gradient(circle at 28% 26%, rgba(255,255,255,.78) 0%, rgba(255,255,255,.32) 18%, transparent 42%),
    radial-gradient(circle at 52% 58%, rgba(123,114,233,.34) 0%, rgba(123,114,233,.18) 38%, rgba(123,114,233,.05) 72%, transparent 100%);
  filter:blur(24px);
  opacity:.82;
  animation:liquidVeil 8.5s ease-in-out infinite alternate;
}

.offer-liquid::after {
  left:4%;
  bottom:9%;
  width:360px;
  height:190px;
  border-radius:50%;
  background:radial-gradient(ellipse at center, rgba(123,114,233,.28) 0%, rgba(123,114,233,.13) 46%, transparent 76%);
  filter:blur(15px);
  opacity:.78;
  animation:liquidGlow 6.8s ease-in-out infinite alternate;
}

.offer-liquid-bubble {
  position:absolute;
  bottom:-56px;
  display:block;
  border-radius:999px;
  opacity:.34;
  will-change:transform, opacity;
  background:
    radial-gradient(circle at 32% 28%,
      rgba(255,255,255,.9) 0%,
      rgba(218,212,255,.5) 34%,
      rgba(123,114,233,.28) 62%,
      rgba(123,114,233,.06) 100%);
  border:1px solid rgba(123,114,233,.28);
  box-shadow:
    inset 0 0 26px rgba(255,255,255,.52),
    0 0 50px rgba(123,114,233,.22);
  filter:blur(.25px);
  animation:offerBubbleRise linear infinite;
}

.offer-bubble-1 { width:230px; height:178px; left:-42px; animation-duration:18s; animation-delay:-9s; }
.offer-bubble-2 { width:118px; height:94px; left:8%; animation-duration:16s; animation-delay:-5s; filter:blur(.6px); }
.offer-bubble-3 { width:46px; height:46px; left:3%; animation-duration:13s; animation-delay:-7s; }
.offer-bubble-4 { width:76px; height:62px; left:17%; animation-duration:17s; animation-delay:-11s; filter:blur(.8px); }
.offer-bubble-5 { width:34px; height:34px; left:30%; animation-duration:12s; animation-delay:-3s; }
.offer-bubble-6 { width:168px; height:134px; left:12%; animation-duration:20s; animation-delay:-14s; filter:blur(1px); }
.offer-bubble-7 { width:30px; height:30px; left:39%; animation-duration:14s; animation-delay:-8s; }
.offer-bubble-8 { width:68px; height:58px; left:24%; animation-duration:18s; animation-delay:-13s; filter:blur(.6px); }

@keyframes offerBubbleRise {
  0% {
    opacity:0;
    transform:translate3d(0,34px,0) scale(.92);
  }
  12% {
    opacity:.34;
  }
  35% {
    opacity:.56;
    transform:translate3d(24px,-120px,0) scale(1);
  }
  62% {
    opacity:.34;
    transform:translate3d(-16px,-250px,0) scale(1.05);
  }
  100% {
    opacity:0;
    transform:translate3d(20px,-430px,0) scale(1.1);
  }
}

/* Traînées lumineuses discrètes (au-dessus de l'arc, derrière le contenu) */
.light-streaks {
  position:absolute; inset:0; z-index:2;
  overflow:hidden; pointer-events:none;
}
.light-streak {
  position:absolute;
  width:220px; height:2px; border-radius:999px;
  opacity:0; transform:rotate(18deg);
  background:linear-gradient(90deg,
    transparent 0%,
    rgba(123,114,233,.04) 18%,
    rgba(123,114,233,.32) 58%,
    rgba(123,114,233,.7) 100%);
  filter:blur(.3px) drop-shadow(0 0 8px rgba(123,114,233,.22));
  animation:lightStreakMove 9s ease-in-out infinite;
}
.light-streak-1 { top:18%; left:14%; width:240px; animation-delay:.8s; animation-duration:9s; }
.light-streak-2 { top:30%; left:62%; width:180px; animation-delay:4.2s; animation-duration:10.5s; }
.light-streak-3 { top:46%; left:38%; width:150px; animation-delay:7s; animation-duration:12s; }

@keyframes lightStreakMove {
  0%   { opacity:0; transform:translate3d(-80px,-36px,0) rotate(18deg) scaleX(.75); }
  8%   { opacity:.45; }
  18%  { opacity:0; transform:translate3d(300px,115px,0) rotate(18deg) scaleX(1); }
  100% { opacity:0; transform:translate3d(300px,115px,0) rotate(18deg) scaleX(1); }
}

@media(max-width:768px){
  .offer-liquid::before {
    left:-28%;
    width:520px;
    height:400px;
  }
  .offer-liquid::after {
    width:240px;
    height:140px;
  }
  .offer-bubble-1,
  .offer-bubble-6 {
    width:128px;
    height:104px;
  }
  .offer-bubble-4,
  .offer-bubble-8 {
    display:none;
  }
  .light-streak { width:150px; height:1.5px; }
  .light-streak-3 { display:none; }
}
@media(prefers-reduced-motion:reduce){
  .offer-liquid::before,
  .offer-liquid::after,
  .offer-liquid-bubble {
    animation:none !important;
  }
  .offer-liquid-bubble {
    opacity:.18;
    transform:translate3d(0,-86px,0);
  }
  .light-streak { animation:none; display:none; }
}

.offer-hero-content {
  position:relative;
  z-index:3;
  max-width:760px;
  margin:0 auto;
}

.offer-hero-title {
  font-size:clamp(34px,4.4vw,52px); font-weight:800; letter-spacing:-.03em;
  line-height:1.15; color:var(--text); margin:18px 0 24px;
}
.offer-hero-title .accent { color:var(--accent); white-space:nowrap; }
.offer-hero-text { font-size:17px; color:var(--text-2); line-height:1.8; max-width:560px; margin:0 auto 40px; }
.offer-hero .offer-btn-dark { position:relative; z-index:1; }

/* ── HERO WORDMARK : effet de masque négatif ── */
.hero-mask-wordmark {
  position:relative; z-index:3;
  display:block;
  width:100%;
  text-align:center;
  overflow:hidden;
  padding:.16em .05em;
  margin:0 auto 6px;
  line-height:1;
  font-family:'Geist',sans-serif;
  font-weight:900;
  letter-spacing:-.04em;
  font-size:clamp(52px,11vw,168px);
  text-transform:uppercase;
  user-select:none;
}
.hmw-base { display:block; color:var(--text); }
.hmw-base .col { color:var(--accent); }
.hmw-invert {
  position:absolute; inset:0;
  padding:.16em .05em;
  background:var(--text);
  color:var(--accent-light);
  clip-path:circle(.01em at -10% 50%);
  animation:hmwSweep 7s ease-in-out infinite;
  will-change:clip-path;
}
.hmw-invert .col { color:#fff; }

@keyframes hmwSweep {
  0%   { clip-path:circle(.01em at -10% 50%); }
  8%   { clip-path:circle(.01em at -4% 50%); }
  32%  { clip-path:circle(.66em at 30% 47%); }
  50%  { clip-path:circle(.7em at 50% 45%); }
  68%  { clip-path:circle(.66em at 70% 47%); }
  92%  { clip-path:circle(.01em at 104% 50%); }
  100% { clip-path:circle(.01em at 110% 50%); }
}

@media(max-width:768px){
  .hero-mask-wordmark { font-size:clamp(40px,16vw,84px); margin-bottom:2px; }
}
@media(prefers-reduced-motion:reduce){
  .hmw-invert { animation:none; clip-path:circle(0% at 50% 50%); }
}

.offer-btn-dark {
  display:inline-flex; align-items:center; gap:8px;
  font-family:inherit; font-size:12px; font-weight:700; letter-spacing:.08em; text-transform:uppercase;
  color:var(--surface); background:var(--text); border:none; cursor:pointer; text-decoration:none;
  padding:20px 40px; border-radius:8px;
  transition:transform .3s, box-shadow .3s;
}
.offer-btn-dark:hover { transform:translateY(-3px); box-shadow:0 16px 40px rgba(123,114,233,.3); }

.offer-section {
  position:relative; padding:120px 72px; border-bottom:1px solid var(--border);
  background:linear-gradient(180deg, var(--bg) 0%, #FBFAF8 50%, var(--bg) 100%);
  overflow:hidden;
}
.offer-section-header { position:relative; z-index:1; max-width:640px; margin:0 auto 72px; text-align:center; }
.offer-section-header .sec-eyebrow { justify-content:center; }
.offer-section-header-halo::before {
  content:'';
  position:absolute; top:-160px; left:50%; transform:translateX(-50%);
  width:780px; height:480px;
  background:radial-gradient(circle, rgba(123,114,233,.14), transparent 70%);
  filter:blur(30px);
  z-index:0;
}
.offer-section-title {
  font-size:clamp(28px,3.2vw,40px); font-weight:800; letter-spacing:-.03em;
  color:var(--text); margin:14px 0 14px;
}
.offer-section-sub { font-size:15px; color:var(--text-muted); line-height:1.7; }
.offer-section-deco {
  position:relative; display:block;
  width:90px; height:1px; margin:22px auto 0;
  background:rgba(124,92,255,.3);
}
.offer-section-deco::before {
  content:''; position:absolute; left:50%; top:50%;
  transform:translate(-50%,-50%);
  width:7px; height:7px; border-radius:50%; background:var(--accent);
}

/* ══════════════ À PROPOS — narration inspirée story page ══════════════ */
.about-story-section {
  background:#fff;
  border-bottom:1px solid var(--border);
}
.about-story-layout {
  position:relative;
  z-index:1;
  display:grid;
  grid-template-columns:minmax(160px, .32fr) minmax(0, 1fr);
  gap:clamp(48px, 7vw, 124px);
  width:min(1180px, 100%);
  margin:0 auto;
  align-items:start;
}
.about-story-kicker {
  position:sticky;
  top:96px;
  color:var(--accent);
  font-size:11px;
  font-weight:800;
  letter-spacing:.14em;
  text-transform:uppercase;
}

.mission-mark {
  display:block;
  width:101px;
  height:101px;
  margin-top:32px;
  overflow:visible;
}
.mission-mark polygon { fill:var(--accent); }
.mission-mark .mm-d { opacity:.94; }
.mission-mark .mm-a { animation:missionMarkA 6s ease-in-out infinite; }
.mission-mark .mm-b { animation:missionMarkB 6s ease-in-out infinite; animation-delay:.12s; }
.mission-mark .mm-c { animation:missionMarkC 6s ease-in-out infinite; animation-delay:.24s; }
.mission-mark .mm-d { animation:missionMarkD 6s ease-in-out infinite; animation-delay:.06s; }

@keyframes missionMarkA { 0%,100% { transform:translate(0,0); } 50% { transform:translate(0,-10px); } }
@keyframes missionMarkB { 0%,100% { transform:translate(0,0); } 50% { transform:translate(8px,5px); } }
@keyframes missionMarkC { 0%,100% { transform:translate(0,0); } 50% { transform:translate(-8px,5px); } }
@keyframes missionMarkD { 0%,100% { transform:translate(0,0); } 50% { transform:translate(0,8px); } }

@media(max-width:768px){
  .mission-mark { width:77px; height:77px; margin-top:22px; }
}
@media(prefers-reduced-motion:reduce){
  .mission-mark polygon { animation:none; }
}

.about-story-main {
  max-width:860px;
}
.about-page .offer-section-title,
.about-page .offer-final-title {
  font-size:clamp(42px, 6.4vw, 92px);
  letter-spacing:-.07em;
  line-height:.94;
}
.offer-section-title .accent { color:var(--accent); }

.about-story-title {
  margin:0;
  color:var(--text);
  font-size:clamp(42px, 6.4vw, 92px);
  font-weight:800;
  line-height:.94;
  letter-spacing:-.07em;
  text-wrap:balance;
}
.about-story-title .accent { color:var(--accent); }
.about-story-lead {
  max-width:690px;
  margin:32px 0 0;
  color:var(--text-2);
  font-size:clamp(18px, 1.75vw, 24px);
  line-height:1.55;
  letter-spacing:-.025em;
}
.about-story-points {
  display:grid;
  grid-template-columns:repeat(3, minmax(0,1fr));
  gap:0;
  margin-top:58px;
  border-top:1px solid rgba(13,13,13,.1);
  border-bottom:1px solid rgba(13,13,13,.1);
}
.about-story-points div {
  padding:28px 26px 30px;
  border-left:1px solid rgba(13,13,13,.1);
}
.about-story-points div:first-child {
  border-left:0;
  padding-left:0;
}
.about-story-points strong {
  display:block;
  color:var(--text);
  font-size:15px;
  font-weight:800;
  letter-spacing:-.02em;
  margin-bottom:10px;
}
.about-story-points span {
  display:block;
  color:var(--text-muted);
  font-size:13px;
  line-height:1.7;
}
.about-story-origin {
  background:
    radial-gradient(circle at 10% 78%, rgba(123,114,233,.08), transparent 30%),
    radial-gradient(circle at 88% 18%, rgba(123,114,233,.08), transparent 28%),
    linear-gradient(180deg, #fff 0%, #FBFAF8 100%);
}
.about-origin-wrap {
  position:relative;
  z-index:1;
  display:grid;
  grid-template-columns:minmax(0, .92fr) minmax(360px, .62fr);
  gap:clamp(44px, 6vw, 96px);
  width:min(1180px, 100%);
  margin:0 auto;
  align-items:center;
}
.about-origin-copy {
  max-width:720px;
}
.about-origin-copy .sec-eyebrow {
  margin-bottom:18px;
}
.about-origin-copy .offer-section-title {
  margin-top:0;
  font-size:clamp(34px, 4.7vw, 66px);
  line-height:1;
  letter-spacing:-.06em;
}
.about-origin-copy p:not(.sec-eyebrow) {
  margin:22px 0 0;
  color:var(--text-muted);
  font-size:16px;
  line-height:1.82;
}
.about-origin-panel {
  position:relative;
  padding:10px 0;
  border-top:1px solid rgba(13,13,13,.1);
  border-bottom:1px solid rgba(13,13,13,.1);
}
.origin-question {
  display:grid;
  grid-template-columns:54px 1fr;
  gap:20px;
  align-items:center;
  min-height:96px;
  border-top:1px solid rgba(13,13,13,.08);
}
.origin-question:first-child {
  border-top:0;
}
.origin-question span {
  color:var(--accent);
  font-size:12px;
  font-weight:800;
  letter-spacing:.12em;
}
.origin-question strong {
  color:var(--text);
  font-size:clamp(22px, 2.5vw, 34px);
  line-height:1.05;
  letter-spacing:-.045em;
}

/* ══════════════ À PROPOS — visibilité locale ══════════════ */
.local-questions {
  position:relative;
  z-index:1;
  display:grid;
  grid-template-columns:repeat(3, minmax(0,1fr));
  gap:0;
  width:min(1180px, 100%);
  margin:0 auto;
  border-top:1px solid rgba(13,13,13,.1);
  border-bottom:1px solid rgba(13,13,13,.1);
}
.local-question {
  min-height:258px;
  padding:36px 34px 38px;
  border-left:1px solid rgba(13,13,13,.1);
  background:rgba(255,255,255,.42);
}
.local-question:first-child {
  border-left:0;
}
.local-question-index {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:36px;
  height:36px;
  margin-bottom:42px;
  border-radius:50%;
  background:rgba(123,114,233,.09);
  color:var(--accent);
  font-size:11px;
  font-weight:900;
  letter-spacing:-.03em;
}
.local-question h3 {
  margin:0;
  color:var(--text);
  font-size:clamp(42px, 5.7vw, 82px);
  line-height:.84;
  letter-spacing:-.078em;
}
.local-question p {
  max-width:320px;
  margin:28px 0 0;
  color:var(--text-muted);
  font-size:14px;
  line-height:1.72;
}

/* ══════════════ À PROPOS — zone d'intervention ══════════════ */
.about-zone-section {
  background:
    radial-gradient(circle at 78% 28%, rgba(123,114,233,.08), transparent 28%),
    linear-gradient(180deg, #fff 0%, #FBFAF8 100%);
}
.area-route {
  position:relative;
  z-index:1;
  display:grid;
  grid-template-columns:1fr 1.18fr 1fr;
  gap:clamp(24px, 4vw, 54px);
  width:min(1120px, 100%);
  margin:0 auto;
  align-items:start;
  padding:42px 0 18px;
}
.area-route-line {
  position:absolute;
  left:8%;
  right:8%;
  top:54px;
  height:2px;
  background:linear-gradient(90deg, transparent, rgba(123,114,233,.42), transparent);
}
.area-stop {
  position:relative;
  text-align:center;
}
.area-dot {
  position:relative;
  z-index:1;
  display:block;
  width:12px;
  height:12px;
  margin:6px auto 28px;
  border-radius:50%;
  background:var(--accent);
  box-shadow:0 0 0 12px rgba(123,114,233,.09);
}
.area-stop strong {
  display:block;
  color:var(--text);
  font-size:clamp(36px, 5.1vw, 76px);
  font-weight:800;
  line-height:.88;
  letter-spacing:-.075em;
  text-wrap:balance;
}
.area-stop p {
  max-width:260px;
  margin:22px auto 0;
  color:var(--text-muted);
  font-size:13px;
  line-height:1.7;
}
.area-cities {
  position:relative;
  z-index:1;
  display:flex;
  justify-content:center;
  flex-wrap:wrap;
  gap:8px;
  margin:34px auto 0;
  width:min(920px, 100%);
}
.area-cities span {
  display:inline-flex;
  align-items:center;
  min-height:26px;
  padding:0 12px;
  border-radius:999px;
  background:rgba(123,114,233,.08);
  color:var(--accent-dark);
  font-size:10px;
  font-weight:800;
  letter-spacing:.055em;
  text-transform:uppercase;
}
@media(max-width:1040px){
  .about-story-layout,
  .about-origin-wrap {
    grid-template-columns:1fr;
    gap:38px;
  }
  .about-story-kicker {
    position:relative;
    top:auto;
  }
  .about-story-points,
  .local-questions,
  .area-route {
    grid-template-columns:1fr;
  }
  .about-story-points div,
  .local-question {
    border-left:0;
    border-top:1px solid rgba(13,13,13,.1);
  }
  .about-story-points div:first-child,
  .local-question:first-child {
    border-top:0;
  }
  .about-story-points div:first-child {
    padding-left:26px;
  }
  .area-route-line {
    display:none;
  }
}
@media(max-width:680px){
  .about-page .offer-section-title,
  .about-page .offer-final-title {
    font-size:clamp(38px, 11vw, 58px);
  }
  .about-story-title {
    font-size:clamp(38px, 11vw, 58px);
  }
  .about-story-lead {
    font-size:17px;
  }
  .about-story-points {
    margin-top:38px;
  }
  .about-story-points div,
  .local-question {
    padding:24px 0;
  }
  .about-story-points div:first-child {
    padding-left:0;
  }
  .about-origin-copy .offer-section-title {
    font-size:clamp(32px, 9vw, 46px);
  }
  .origin-question {
    grid-template-columns:44px 1fr;
    min-height:82px;
  }
  .local-question-index {
    margin-bottom:24px;
  }
  .local-question h3 {
    font-size:clamp(44px, 14vw, 64px);
  }
  .area-route {
    gap:34px;
    padding-top:10px;
  }
  .area-dot {
    margin-bottom:18px;
  }
  .area-stop strong {
    font-size:clamp(42px, 13vw, 64px);
  }
}

/* ── Fond premium section "Création de sites internet" ── */
.offer-section-sites {
  background:
    radial-gradient(circle at 50% 8%, rgba(124,92,255,.13), transparent 32%),
    radial-gradient(circle at 8% 70%, rgba(124,92,255,.07), transparent 28%),
    linear-gradient(180deg, #fbfaf8 0%, #ffffff 100%);
}
.offer-section-sites::after {
  content:'';
  position:absolute; inset:0;
  background-image:radial-gradient(rgba(124,92,255,.12) 1px, transparent 1px);
  background-size:26px 26px;
  opacity:.18;
  mask-image:linear-gradient(to bottom, black, transparent 70%);
  pointer-events:none;
  z-index:0;
}
.offers-glow {
  position:absolute; border-radius:999px;
  filter:blur(80px); pointer-events:none; z-index:0;
  background:rgba(124,92,255,.12);
  animation:glowFloat 12s ease-in-out infinite alternate;
}
.offers-glow-1 { top:-120px; left:-80px; width:420px; height:420px; }
.offers-glow-2 { bottom:-140px; right:-100px; width:480px; height:480px; animation-delay:-4s; }
@keyframes glowFloat {
  from { transform:translate3d(-20px,0,0); }
  to   { transform:translate3d(30px,20px,0); }
}
@media(prefers-reduced-motion:reduce){
  .offers-glow { animation:none; }
}

.offer-grid {
  position:relative; z-index:1;
  display:grid; grid-template-columns:repeat(4,1fr); gap:28px;
  max-width:1320px; margin:0 auto;
  align-items:stretch;
}
.offer-grid.offer-grid-2 { grid-template-columns:repeat(2,1fr); max-width:880px; }

.offer-card {
  position:relative;
  display:flex; flex-direction:column;
  background:rgba(255,255,255,.78);
  border:1px solid rgba(124,92,255,.35);
  border-radius:26px; padding:32px 28px;
  box-shadow:0 18px 44px rgba(124,92,255,.1);
  backdrop-filter:blur(18px); -webkit-backdrop-filter:blur(18px);
  transition:transform .4s cubic-bezier(.16,1,.3,1), box-shadow .4s ease, border-color .4s ease;
}
.offer-card::after {
  content:'';
  position:absolute; inset:0;
  border-radius:26px;
  background:radial-gradient(circle at 50% 0%, rgba(124,92,255,.16), transparent 60%);
  opacity:0;
  transition:opacity .45s ease;
  pointer-events:none;
}
.offer-card:hover {
  transform:translateY(-10px) scale(1.015);
  border-color:rgba(124,92,255,.55);
  box-shadow:0 30px 70px rgba(124,92,255,.2);
}
.offer-card:hover::after { opacity:1; }
.offer-card.is-featured {
  border:2px solid rgba(124,92,255,.85);
  background:
    radial-gradient(circle at 50% 0%, rgba(124,92,255,.3), transparent 55%),
    linear-gradient(165deg, rgba(124,92,255,.16), rgba(124,92,255,.05));
  box-shadow:0 34px 100px rgba(124,92,255,.28);
}
.offer-card.is-featured::after {
  background:radial-gradient(circle at 50% 0%, rgba(124,92,255,.32), transparent 60%);
}
.offer-card.is-featured:hover {
  transform:translateY(-16px) scale(1.025);
  border-color:rgba(124,92,255,1);
  box-shadow:0 44px 120px rgba(124,92,255,.36);
}

.offer-badge {
  display:inline-flex; align-items:center; gap:5px; width:fit-content;
  background:var(--accent-bg); color:var(--accent-dark);
  font-size:11px; font-weight:700; letter-spacing:.04em;
  padding:6px 14px; border-radius:100px;
  margin-bottom:18px;
}

.offer-card-name { position:relative; z-index:1; font-size:19px; font-weight:800; letter-spacing:.01em; text-transform:uppercase; color:var(--text); text-align:center; margin-bottom:4px; }
.offer-card-price { position:relative; z-index:1; font-size:28px; font-weight:800; letter-spacing:-.02em; color:var(--text); text-align:center; margin-bottom:18px; }
.offer-card-price span { font-size:11px; font-weight:700; letter-spacing:.04em; text-transform:uppercase; color:var(--accent-dark); }
.offer-card.is-featured .offer-card-price { color:var(--accent); }
.offer-card-tagline { position:relative; z-index:1; font-size:13px; color:var(--text-muted); line-height:1.6; text-align:center; margin-bottom:18px; min-height:40px; }

.offer-card-divider { position:relative; z-index:1; height:1px; background:var(--border); margin-bottom:20px; }

.offer-card-includes-label {
  position:relative; z-index:1;
  font-size:11px; font-weight:700; letter-spacing:.08em; text-transform:uppercase;
  color:var(--text-dim); margin-bottom:14px;
}
.offer-card-list {
  position:relative; z-index:1;
  list-style:none; padding:0; margin:0 0 24px;
  flex:1;
}
.offer-card-list li {
  font-size:13.5px; color:rgba(17,17,17,.74); line-height:1.5;
  padding:11px 0 11px 26px; position:relative;
  border-bottom:1px solid rgba(17,17,17,.08);
}
.offer-card-list li::before {
  content:'';
  position:absolute; left:0; top:50%; transform:translateY(-50%);
  width:16px; height:16px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='10.5' fill='none' stroke='%237c5cff' stroke-width='2'/%3E%3Cpath d='M7.5 12.5l3 3 6-6.5' fill='none' stroke='%237c5cff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-size:contain; background-repeat:no-repeat;
}
.offer-card-note {
  position:relative; z-index:1;
  font-size:11px; color:var(--text-muted); line-height:1.6;
  margin:-12px 0 20px; font-style:italic;
}
.offer-card-option {
  position:relative; z-index:1;
  display:flex; align-items:baseline; justify-content:space-between; gap:10px;
  padding:14px 2px; margin:-8px 0 16px;
  border-top:1px solid rgba(17,17,17,.08);
}
.offer-card-option-label { font-size:13px; color:rgba(17,17,17,.74); line-height:1.4; }
.offer-card-option-price { font-size:14px; font-weight:800; color:var(--accent-dark); white-space:nowrap; }

.offer-card-btn {
  position:relative; z-index:1;
  display:inline-flex; align-items:center; justify-content:center; gap:6px;
  width:100%; height:48px;
  font-family:inherit; font-size:12px; font-weight:700; letter-spacing:.03em;
  color:var(--text); background:rgba(255,255,255,.72); border:1px solid rgba(17,17,17,.16);
  border-radius:10px; cursor:pointer; text-decoration:none;
  transition:transform .25s ease, background .25s, color .25s, border-color .25s, box-shadow .25s;
  margin-top:auto;
}
.offer-card-btn:hover { transform:translateY(-2px); border-color:rgba(124,92,255,.45); box-shadow:0 12px 28px rgba(17,17,17,.08); }
.offer-card.is-featured .offer-card-btn {
  background:linear-gradient(135deg, #5f3df5, #7c5cff);
  color:#fff; border:none;
}
.offer-card.is-featured .offer-card-btn:hover { box-shadow:0 16px 36px rgba(124,92,255,.32); }


/* ── Cartes d'offres (Création de sites internet) ── */
.oc-grid {
  position:relative; z-index:1;
  display:grid; grid-template-columns:repeat(4, 1fr); gap:24px;
  max-width:1180px; margin:0 auto 40px;
  align-items:stretch;
}
.oc-card {
  position:relative;
  display:flex; flex-direction:column;
  background:rgba(255,255,255,.78);
  border:1px solid rgba(124,92,255,.35);
  border-radius:26px;
  padding:32px 28px;
  box-shadow:0 18px 44px rgba(124,92,255,.1);
  backdrop-filter:blur(18px); -webkit-backdrop-filter:blur(18px);
  opacity:0; transform:translateY(24px);
  transition:opacity .6s ease, transform .45s cubic-bezier(.16,1,.3,1), box-shadow .4s ease, border-color .4s ease;
}
.oc-card::after {
  content:'';
  position:absolute; inset:0;
  border-radius:26px;
  background:radial-gradient(circle at 50% 0%, rgba(124,92,255,.16), transparent 60%);
  opacity:0;
  transition:opacity .45s ease;
  pointer-events:none;
}
.oc-card:nth-child(1) { transition-delay:.05s,0s,0s,0s; }
.oc-card:nth-child(2) { transition-delay:.12s,0s,0s,0s; }
.oc-card:nth-child(3) { transition-delay:.19s,0s,0s,0s; }
.oc-card:nth-child(4) { transition-delay:.26s,0s,0s,0s; }
.oc-card.is-in { opacity:1; transform:translateY(0); }
@media(prefers-reduced-motion:reduce){
  .oc-card { transition:box-shadow .4s ease, border-color .4s ease; opacity:1; transform:none; }
}
.oc-card:hover {
  transform:translateY(-10px) scale(1.015);
  border-color:rgba(124,92,255,.55);
  box-shadow:0 30px 70px rgba(124,92,255,.2);
}
.oc-card:hover::after { opacity:1; }

.oc-card.is-featured {
  border:2px solid rgba(124,92,255,.85);
  background:rgba(255,255,255,.78);
  box-shadow:0 34px 100px rgba(124,92,255,.28);
  z-index:2;
}
.oc-card.is-featured::after {
  background:radial-gradient(circle at 50% 0%, rgba(124,92,255,.16), transparent 60%);
}
.oc-card.is-featured.is-in { transform:translateY(-10px); }
.oc-card.is-featured:hover {
  transform:translateY(-16px) scale(1.025);
  border-color:rgba(124,92,255,1);
  box-shadow:0 44px 120px rgba(124,92,255,.36);
}
@media(prefers-reduced-motion:reduce){
  .oc-card.is-featured { transform:translateY(-10px); }
}

.oc-pill {
  position:absolute; top:0; left:50%; transform:translate(-50%,-50%);
  background:var(--accent); color:#fff;
  font-size:11px; font-weight:700; letter-spacing:.02em; white-space:nowrap;
  padding:8px 18px; border-radius:100px;
  box-shadow:0 6px 16px rgba(123,114,233,.35);
}

.oc-head { position:relative; display:flex; align-items:center; margin-bottom:4px; min-height:34px; }
.oc-icon {
  position:absolute; left:0; top:50%; transform:translateY(-50%);
  flex-shrink:0; display:flex; align-items:center; justify-content:center;
  width:34px; height:34px; border-radius:11px;
  background:var(--accent-bg); color:var(--accent);
}
.oc-icon svg { width:17px; height:17px; }

.oc-name { font-size:19px; font-weight:800; letter-spacing:.01em; text-transform:uppercase; color:var(--text); line-height:1.3; margin-bottom:4px; text-align:center; }
.oc-head .oc-name { margin-bottom:0; width:100%; }
.oc-subtitle { font-size:12px; font-weight:700; color:var(--accent-dark); text-transform:uppercase; letter-spacing:.04em; min-height:15px; margin-bottom:12px; text-align:center; }
.oc-desc { font-size:13px; color:var(--text-muted); line-height:1.6; height:88px; margin-bottom:18px; overflow:hidden; }

.oc-price {
  display:flex; flex-direction:column-reverse; align-items:center;
  text-align:center;
  font-size:28px; font-weight:800; letter-spacing:-.02em; color:var(--text);
  margin-bottom:18px;
}
.oc-price span { font-size:11px; font-weight:700; letter-spacing:.04em; text-transform:uppercase; color:var(--accent-dark); margin-bottom:4px; }
.oc-card.is-featured .oc-price { color:var(--accent); }
.oc-card.is-featured .oc-price span { color:var(--accent-light); }

.oc-divider { height:1px; background:var(--border); margin-bottom:20px; }

.oc-list { list-style:none; padding:0; margin:0 0 24px; flex:1; }
.oc-list li {
  font-size:13.5px; color:rgba(17,17,17,.74); line-height:1.5;
  padding:11px 0 11px 26px; position:relative;
  border-bottom:1px solid rgba(17,17,17,.08);
}
.oc-list li::before {
  content:'';
  position:absolute; left:0; top:50%; transform:translateY(-50%);
  width:16px; height:16px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='10.5' fill='none' stroke='%237c5cff' stroke-width='2'/%3E%3Cpath d='M7.5 12.5l3 3 6-6.5' fill='none' stroke='%237c5cff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-size:contain; background-repeat:no-repeat;
}

.oc-btn {
  display:inline-flex; align-items:center; justify-content:center;
  width:100%; height:48px;
  font-family:inherit; font-size:12px; font-weight:700; letter-spacing:.03em;
  color:var(--text); background:rgba(255,255,255,.72); border:1px solid rgba(17,17,17,.16);
  border-radius:10px; text-decoration:none;
  transition:transform .25s ease, background .25s, color .25s, border-color .25s, box-shadow .25s;
}
.oc-btn:hover { transform:translateY(-2px); border-color:rgba(124,92,255,.45); box-shadow:0 12px 28px rgba(17,17,17,.08); }
.oc-btn-featured {
  background:linear-gradient(135deg, #5f3df5, #7c5cff);
  color:#fff; border:none;
}
.oc-btn-featured:hover { box-shadow:0 16px 36px rgba(124,92,255,.32); }

/* ── Comparatif détaillé (accordéon fermé par défaut) ── */
.oc-compare {
  position:relative; z-index:1;
  max-width:1180px; margin:0 auto;
  border:1px solid rgba(17,17,17,.08); border-radius:22px;
  background:rgba(255,255,255,.78);
  backdrop-filter:blur(18px); -webkit-backdrop-filter:blur(18px);
  box-shadow:0 24px 70px rgba(17,17,17,.06);
  overflow:hidden;
  transition:box-shadow .3s ease;
}
.oc-compare:hover { box-shadow:0 28px 80px rgba(17,17,17,.09); }
.oc-compare-toggle {
  width:100%; display:flex; align-items:center; justify-content:space-between;
  gap:16px; background:none; border:none; cursor:pointer;
  padding:24px 28px; font-family:inherit; text-align:left;
}
.oc-compare-title { display:block; font-size:15px; font-weight:700; color:var(--text); margin-bottom:4px; }
.oc-compare-sub { display:block; font-size:13px; color:var(--text-muted); }
.oc-compare-chevron { flex-shrink:0; color:var(--text-muted); transition:transform .3s ease; }
.oc-compare-toggle[aria-expanded="true"] .oc-compare-chevron { transform:rotate(180deg); }

.oc-compare-panel {
  max-height:0; overflow:hidden;
  transition:max-height .5s cubic-bezier(.16,1,.3,1);
}
.oc-compare-panel.is-open { max-height:1400px; }
.oc-compare-inner { border-top:1px solid var(--border); padding:28px; }

.oc-compare-wrap { overflow-x:auto; -webkit-overflow-scrolling:touch; }
.oc-compare-grid {
  position:relative;
  display:grid;
  grid-template-columns:200px repeat(4, minmax(140px, 1fr));
  min-width:760px;
}
.oc-compare-highlight {
  position:absolute; top:0; bottom:0;
  left:calc(200px + 2 * ((100% - 200px) / 4));
  width:calc((100% - 200px) / 4);
  background:rgba(130,105,255,.05);
  z-index:0; pointer-events:none;
}
.cc {
  position:relative; z-index:1;
  padding:14px 18px;
  display:flex; align-items:center;
  border-bottom:1px solid var(--border);
  font-size:13px; color:var(--text-2);
}
.cc-label { font-size:12.5px; font-weight:600; color:var(--text-muted); }
.cc-head { font-size:13px; font-weight:700; color:var(--text); padding-top:18px; padding-bottom:18px; }
.cc-featured { font-weight:600; color:var(--text); }
.cc-dim { color:var(--text-dim); }

@media(max-width:900px){
  .oc-compare-grid { grid-template-columns:160px repeat(4, minmax(130px, 1fr)); min-width:680px; }
  .oc-compare-highlight {
    left:calc(160px + 2 * ((100% - 160px) / 4));
    width:calc((100% - 160px) / 4);
  }
}

/* CTA inline */
.offer-inline-cta {
  position:relative; z-index:1;
  max-width:560px; margin:80px auto 0; text-align:center;
}
.offer-inline-cta h3 {
  font-size:clamp(22px,2.6vw,28px); font-weight:800; letter-spacing:-.02em;
  color:var(--text); margin-bottom:14px;
}
.offer-inline-cta p { font-size:14px; color:var(--text-muted); line-height:1.7; margin-bottom:28px; }

/* Automatisation & IA — v2 (claire, deux colonnes) */
.automation-v2-header { max-width:640px; margin:0 auto 56px; text-align:center; }
.automation-v2-eyebrow {
  font-size:clamp(28px,3.2vw,40px); font-weight:800; letter-spacing:-.03em;
  color:var(--text); margin:0;
}
.automation-v2-top {
  display:grid; grid-template-columns:1fr 1fr; gap:64px;
  align-items:center;
  max-width:1240px; margin:0 auto 72px;
}
.automation-v2-title {
  font-size:clamp(20px,2.5vw,29px); font-weight:500; letter-spacing:-.02em;
  line-height:1.25; color:var(--text); margin-bottom:56px;
  font-family:'Geist', sans-serif;
}
.automation-v2-title-line { display:block; }
.automation-v2-title .accent { color:var(--accent); }
.automation-v2-rule { width:36px; height:2px; background:var(--accent); border-radius:2px; margin-bottom:24px; }
.automation-v2-desc { font-size:15px; color:var(--text-2); line-height:1.8; max-width:440px; margin-bottom:32px; }

.automation-v2-visual {
  position:relative; aspect-ratio:1.1/1; max-height:420px;
  overflow:hidden;
}

.auto-light {
  position:absolute; left:9%; top:50%; width:36px; height:36px; border-radius:50%;
  background:radial-gradient(circle, #fff 0%, var(--accent-light) 45%, transparent 75%);
  filter:blur(5px);
  transform:translate(-50%,-50%);
  animation:autoLightPulse 4.5s ease-in-out infinite;
}
@keyframes autoLightPulse {
  0%,100% { opacity:.7; transform:translate(-50%,-50%) scale(1); }
  50%     { opacity:1;  transform:translate(-50%,-50%) scale(1.3); }
}

.auto-lines { position:absolute; inset:0; width:100%; height:100%; }
.auto-line {
  fill:none; stroke:url(#autoLineGrad); stroke-width:1.3; stroke-linecap:round;
  stroke-dasharray:7 11;
  filter:drop-shadow(0 0 3px rgba(160,154,239,.55));
  animation:autoFlowDash 6s linear infinite;
}
.auto-line:nth-child(2) { animation-duration:7s; }
.auto-line:nth-child(3) { animation-duration:5.5s; }
.auto-line:nth-child(4) { animation-duration:6.8s; }
.auto-line:nth-child(5) { animation-duration:6.2s; }
.auto-line:nth-child(6) { animation-duration:7.6s; }
@keyframes autoFlowDash { to { stroke-dashoffset:-180; } }

.auto-end {
  fill:var(--accent-light);
  filter:drop-shadow(0 0 4px rgba(160,154,239,.8));
  transform-box:fill-box; transform-origin:center;
  animation:autoEndPulse 5s ease-in-out infinite;
}
.auto-end:nth-child(2) { animation-delay:.6s; }
.auto-end:nth-child(3) { animation-delay:1.2s; }
.auto-end:nth-child(4) { animation-delay:1.8s; }
.auto-end:nth-child(5) { animation-delay:2.4s; }
.auto-end:nth-child(6) { animation-delay:3s; }
@keyframes autoEndPulse {
  0%,100% { opacity:.45; transform:scale(1); }
  50%     { opacity:1;   transform:scale(1.6); }
}

.automation-v2-panel-wrap {
  position:absolute;
  will-change:transform;
  transition:transform .1s linear;
}
.wrap-1 { width:56%; height:48%; left:10%; top:10%; }
.wrap-2 { width:56%; height:48%; left:24%; top:28%; }
.wrap-3 { width:56%; height:48%; left:38%; top:46%; }

.automation-v2-panel {
  position:absolute; inset:0;
  border-radius:22px;
  background:linear-gradient(155deg, rgba(123,114,233,.14), rgba(123,114,233,.04));
  border:1px solid rgba(123,114,233,.22);
  backdrop-filter:blur(6px) saturate(140%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.4), 0 20px 40px rgba(123,114,233,.1);
  will-change:transform;
}
.panel-float-1 { animation:autoFloat1 9s ease-in-out infinite; }
.panel-float-2 { animation:autoFloat2 11s ease-in-out infinite 1s; }
.panel-float-3 { animation:autoFloat3 8s ease-in-out infinite 2s; }

@keyframes autoFloat1 { 0%,100% { transform:translateY(0); } 50% { transform:translateY(-6px); } }
@keyframes autoFloat2 { 0%,100% { transform:translateY(0); } 50% { transform:translateY(8px); } }
@keyframes autoFloat3 { 0%,100% { transform:translateY(0); } 50% { transform:translateY(-4px); } }

@media(prefers-reduced-motion: reduce){
  .auto-light, .auto-line, .auto-end,
  .panel-float-1, .panel-float-2, .panel-float-3 { animation:none; }
}

.automation-v2-features {
  max-width:1240px; margin:0 auto; padding-top:48px;
  border-top:1px solid var(--border);
  display:grid; grid-template-columns:repeat(4,1fr); gap:32px;
}
.automation-v2-icon {
  width:40px; height:40px; border-radius:50%;
  border:1px solid rgba(123,114,233,.3); color:var(--accent);
  display:flex; align-items:center; justify-content:center;
  margin-bottom:16px;
}
.automation-v2-feature h3 { font-size:15px; font-weight:700; color:var(--text); margin-bottom:8px; }
.automation-v2-feature p { font-size:13px; color:var(--text-muted); line-height:1.7; }

.offer-btn-light {
  display:inline-flex; align-items:center; gap:8px;
  font-family:inherit; font-size:12px; font-weight:700; letter-spacing:.08em; text-transform:uppercase;
  color:var(--text); background:#F6F5F2; border:none; cursor:pointer; text-decoration:none;
  padding:18px 36px; border-radius:8px;
  transition:transform .3s, box-shadow .3s;
}
.offer-btn-light:hover { transform:translateY(-3px); box-shadow:0 16px 40px rgba(123,114,233,.3); }

/* ── Notre accompagnement (Services complémentaires + Maintenance) ── */
.acc-eyebrow {
  display:flex; align-items:center; justify-content:center; gap:10px;
  font-size:11px; font-weight:700; letter-spacing:.12em; text-transform:uppercase;
  color:var(--accent-dark); margin-bottom:14px;
}
.acc-eyebrow-dot { width:4px; height:4px; border-radius:50%; background:var(--accent); }
.acc-title {
  font-weight:800; font-size:clamp(28px,3.2vw,40px); letter-spacing:-.03em;
  color:var(--text); margin:0 0 14px;
}

.acc-grid {
  position:relative; z-index:1;
  display:grid; grid-template-columns:repeat(3, 1fr); gap:24px;
  max-width:1180px; margin:0 auto;
  align-items:stretch;
}
.acc-grid.acc-grid-2 { grid-template-columns:repeat(2, 1fr); max-width:800px; }
.acc-card {
  position:relative;
  display:flex; flex-direction:column; align-items:center;
  text-align:center;
  background:rgba(255,255,255,.78);
  border:1px solid rgba(124,92,255,.22);
  border-radius:22px; padding:40px 32px 32px;
  box-shadow:0 18px 44px rgba(124,92,255,.08);
  backdrop-filter:blur(18px); -webkit-backdrop-filter:blur(18px);
  transition:transform .4s cubic-bezier(.16,1,.3,1), box-shadow .4s ease, border-color .4s ease;
}
.acc-card:hover { transform:translateY(-8px); border-color:rgba(124,92,255,.45); box-shadow:0 28px 64px rgba(124,92,255,.16); }
.acc-card.is-featured {
  border:1px solid rgba(124,92,255,.3);
  background:
    radial-gradient(circle at 50% 0%, rgba(124,92,255,.16), transparent 55%),
    rgba(255,255,255,.86);
  box-shadow:0 28px 64px rgba(124,92,255,.16);
}
.acc-icon {
  display:flex; align-items:center; justify-content:center;
  width:56px; height:56px; border-radius:50%;
  background:var(--accent-bg); color:var(--accent);
  margin-bottom:18px;
}
.acc-icon svg { width:24px; height:24px; }
.acc-name {
  font-size:12px; font-weight:700; letter-spacing:.08em; text-transform:uppercase;
  color:var(--accent-dark); margin-bottom:10px;
  height:15px; line-height:15px; white-space:nowrap;
}
.acc-price {
  font-size:28px; font-weight:800; color:var(--text); letter-spacing:-.02em;
  margin-bottom:18px;
}
.acc-price span { font-family:'Geist',sans-serif; font-size:14px; color:var(--text-muted); margin-left:2px; }
.acc-desc { font-size:13px; color:var(--text-muted); line-height:1.6; margin:-8px 0 18px; }

.acc-list {
  list-style:none; padding:0; margin:0 0 28px; width:100%;
  flex:1;
}
.acc-list li {
  font-size:14px; color:var(--text-2); line-height:1.5;
  padding:11px 0 11px 26px; position:relative; text-align:left;
  border-bottom:1px solid rgba(17,17,17,.08);
}
.acc-list li::before {
  content:'';
  position:absolute; left:0; top:50%; transform:translateY(-50%);
  width:16px; height:16px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='10.5' fill='none' stroke='%237c5cff' stroke-width='2'/%3E%3Cpath d='M7.5 12.5l3 3 6-6.5' fill='none' stroke='%237c5cff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-size:contain; background-repeat:no-repeat;
}

.acc-btn {
  display:inline-flex; align-items:center; justify-content:center; gap:6px;
  width:100%; height:48px;
  font-family:'Geist',sans-serif; font-size:13px; font-weight:700;
  color:var(--text); background:rgba(255,255,255,.6); border:1px solid rgba(17,17,17,.16);
  border-radius:10px; text-decoration:none; margin-top:auto;
  transition:transform .25s ease, background .25s, color .25s, border-color .25s, box-shadow .25s;
}
.acc-btn:hover { transform:translateY(-2px); border-color:rgba(124,92,255,.45); box-shadow:0 12px 28px rgba(17,17,17,.08); }
.acc-btn-featured {
  background:linear-gradient(135deg, #5f3df5, #7c5cff);
  color:#fff; border:none;
}
.acc-btn-featured:hover { box-shadow:0 16px 36px rgba(124,92,255,.32); }

@media(max-width:980px){
  .acc-grid,
  .acc-grid.acc-grid-2 {
    grid-template-columns:1fr;
    max-width:480px;
  }
}

/* CTA final */
.offer-final-cta { background:var(--text); color:#F6F5F2; text-align:center; padding:110px 24px; }
.offer-final-cta .sec-eyebrow { color:var(--accent); justify-content:center; }
.offer-final-title {
  font-size:clamp(28px,3.6vw,42px); font-weight:800; letter-spacing:-.03em;
  color:#F6F5F2; margin:16px 0 18px;
}
.offer-final-text { font-size:15px; color:rgba(246,245,242,.6); line-height:1.7; max-width:480px; margin:0 auto 36px; }
.offer-final-note { font-size:12px; color:rgba(246,245,242,.4); line-height:1.7; margin-top:24px; max-width:420px; margin-left:auto; margin-right:auto; }

@media(max-width:1100px){
  .offer-grid { grid-template-columns:repeat(2,1fr); }
  .offer-chip-grid { grid-template-columns:repeat(2,1fr); }
  .oc-grid { grid-template-columns:repeat(2,1fr); }
}
@media(max-width:680px){
  .offer-section { padding:64px 24px; }
  .offer-grid { grid-template-columns:1fr; }
  .offer-chip-grid { grid-template-columns:1fr; }
  .oc-grid { grid-template-columns:1fr; }
  .offer-hero { padding:140px 24px 72px; }

  .automation-v2-header {
    margin-bottom:36px;
  }
  .automation-v2-eyebrow {
    font-size:clamp(25px,8vw,32px);
    line-height:1.08;
  }
  .automation-v2-top {
    grid-template-columns:1fr;
    gap:32px;
    margin-bottom:52px;
  }
  .automation-v2-title {
    max-width:100%;
    margin-bottom:28px;
    font-size:clamp(29px,8.6vw,36px);
    line-height:1.12;
    text-wrap:balance;
  }
  .automation-v2-rule {
    width:48px;
    margin-bottom:20px;
  }
  .automation-v2-desc {
    max-width:none;
    margin-bottom:28px;
    font-size:16px;
    line-height:1.7;
  }
  .automation-v2-text .offer-btn-dark {
    width:100%;
    min-height:56px;
    justify-content:center;
    padding:17px 24px;
    border-radius:999px;
    font-size:12px;
    line-height:1.2;
    text-align:center;
    white-space:nowrap;
  }
  .automation-v2-visual {
    width:min(100%,300px);
    max-height:none;
    margin:0 auto;
    aspect-ratio:1.18 / 1;
  }
  .automation-v2-features {
    grid-template-columns:1fr;
    gap:12px;
    padding-top:32px;
  }
  .automation-v2-feature {
    display:grid;
    grid-template-columns:48px minmax(0,1fr);
    grid-template-rows:auto auto;
    column-gap:16px;
    padding:20px;
    background:rgba(255,255,255,.62);
    border:1px solid var(--border);
    border-radius:16px;
  }
  .automation-v2-icon {
    grid-column:1;
    grid-row:1 / span 2;
    width:48px;
    height:48px;
    margin:0;
  }
  .automation-v2-feature h3 {
    grid-column:2;
    margin:1px 0 5px;
    font-size:16px;
    line-height:1.25;
  }
  .automation-v2-feature p {
    grid-column:2;
    font-size:14px;
    line-height:1.55;
  }
}

@media(max-width:1100px){
  .method-scroll { height:44.8vh; min-height:350px; }
  .method-scroll + .services {
    margin-top:0;
    padding-top:72px;
  }
  .method-word { font-size:112px; }
  .method-words { height:140px; }
}

@media(max-width:760px){
  .method-scroll {
    height:46.2vh;
    min-height:301px;
  }
  .method-scroll + .services {
    margin-top:0;
    padding-top:64px;
  }
  .method-bg {
    background:#FBFAF8;
  }
  .method-bg::before,
  .method-halo,
  .method-line,
  .ambient-liquid,
  .method-sticky::before {
    display:none;
  }
  .method-kicker {
    margin-bottom:24px;
    font-size:11px;
  }
  .method-sticky {
    height:100%;
    padding:0 24px;
  }
  .bubble-1,
  .bubble-6 {
    width:120px;
    height:100px;
  }
  .bubble-4,
  .bubble-8 {
    display:none;
  }
  .liquid-bubble {
    animation-duration:24s;
  }
  .method-words { height:100px; }
  .method-word {
    font-size:76px;
    transform:translateY(48px) scale(.98);
  }
  .method-word.is-before { transform:translateY(-48px) scale(.985); }
  .method-word.is-active { transform:translateY(0) scale(1); }
  .method-track {
    width:150px;
    margin-top:32px;
  }
}

@media(max-width:480px){
  .method-scroll {
    height:23.1vh;
    min-height:151px;
  }
  .method-sticky {
    height:100%;
    padding:0 20px;
  }
  .method-words { height:39px; }
  .method-word { font-size:26px; }
  .method-track { margin-top:16px; }
}

@media(prefers-reduced-motion:reduce){
  .method-scroll {
    height:auto;
    min-height:0;
  }
  .method-bg {
    display:none;
  }
  .ambient-liquid,
  .method-sticky::before {
    display:block;
  }
  .liquid-bubble {
    animation:none !important;
    display:block;
    opacity:.18;
    transform:translate3d(0,-70px,0);
  }
  .ambient-liquid::before,
  .ambient-liquid::after {
    animation:none !important;
  }
  .method-sticky {
    position:relative;
    height:auto;
    min-height:0;
    padding:110px 24px;
    overflow:visible;
    background:#FBFAF8;
  }
  .method-words {
    height:auto;
    display:flex;
    flex-direction:column;
    gap:18px;
  }
  .method-word,
  .method-word.is-before,
  .method-word.is-active {
    position:relative;
    opacity:1;
    transform:none;
    transition:none;
    text-shadow:none;
  }
  .method-halo,
  .method-line {
    animation:none;
  }
  .method-track {
    display:none;
  }
}

/* ══════════════ ABOUT PAGE ══════════════ */
.about-page {
  background:var(--bg);
}

.about-page main {
  overflow:hidden;
}

.about-page .serif {
  font-family:'Instrument Serif',serif;
  font-style:italic;
  font-weight:400;
  color:var(--accent);
}

/* ══════════════ MÉTHODE — ligne de progression animée ══════════════ */
.process-track {
  position:relative;
  max-width:1180px; margin:64px auto 0; padding:0 32px;
  display:grid; grid-template-columns:repeat(5,1fr); gap:20px;
}
.process-line {
  position:absolute; top:15px; left:11%; right:11%; height:2px;
  background:var(--border-strong); z-index:0; overflow:hidden;
}
.process-line-fill {
  display:block; width:100%; height:100%; background:var(--accent);
  transform:scaleX(0); transform-origin:left;
}
.process-step {
  position:relative; z-index:1; text-align:center;
  opacity:.4; transition:opacity .5s ease;
}
.process-step.is-active { opacity:1; }
.process-node {
  display:inline-flex; align-items:center; justify-content:center;
  width:32px; height:32px; border-radius:50%;
  background:var(--surface); border:2px solid var(--border-strong);
  color:var(--text-muted); font-size:12px; font-weight:800;
  margin-bottom:18px;
  transition:background .35s ease, border-color .35s ease, color .35s ease, transform .35s ease;
}
.process-step.is-active .process-node {
  background:var(--accent); border-color:var(--accent); color:#fff;
  transform:scale(1.18);
  box-shadow:0 6px 18px rgba(123,114,233,.4);
}
.process-step h3 {
  font-size:16px; font-weight:800; color:var(--text); margin-bottom:8px;
}
.process-step p {
  font-size:13px; color:var(--text-muted); line-height:1.6;
  max-width:180px; margin:0 auto;
}

@media(max-width:900px){
  .process-track {
    grid-template-columns:1fr; gap:36px; padding-left:44px; max-width:520px;
  }
  .process-line { display:none; }
  .process-step { text-align:left; }
  .process-node {
    position:absolute; left:-44px; top:0; margin-bottom:0;
  }
  .process-step p { max-width:none; margin:0; }
}

@media (prefers-reduced-motion: reduce) {
  .process-step { opacity:1; }
  .process-line-fill { transform:scaleX(1) !important; }
}

/* ══════════════ MÉTHODE — vignettes inspirées de la référence ══════════════ */
.about-method-section {
  background:#fff;
  padding-top:104px;
  padding-bottom:112px;
}
.about-method-section .method-grid-header {
  max-width:min(1140px, 82vw);
  margin-bottom:42px;
}
.method-vignettes {
  position:relative;
  z-index:1;
  display:grid;
  grid-template-columns:minmax(420px, 2.45fr) repeat(4, minmax(138px, 1fr));
  gap:10px;
  width:100%;
  max-width:1278px;
  margin:0 auto;
  align-items:stretch;
  transition:grid-template-columns .46s cubic-bezier(.16,1,.3,1);
}
.method-vignettes[data-active="1"] { grid-template-columns:minmax(420px, 2.45fr) repeat(4, minmax(138px, 1fr)); }
.method-vignettes[data-active="2"] { grid-template-columns:minmax(138px, 1fr) minmax(420px, 2.45fr) repeat(3, minmax(138px, 1fr)); }
.method-vignettes[data-active="3"] { grid-template-columns:repeat(2, minmax(138px, 1fr)) minmax(420px, 2.45fr) repeat(2, minmax(138px, 1fr)); }
.method-vignettes[data-active="4"] { grid-template-columns:repeat(3, minmax(138px, 1fr)) minmax(420px, 2.45fr) minmax(138px, 1fr); }
.method-vignettes[data-active="5"] { grid-template-columns:repeat(4, minmax(138px, 1fr)) minmax(420px, 2.45fr); }
.method-vignette {
  position:relative;
  min-height:454px;
  border-radius:14px;
  overflow:hidden;
  background:#F4F4F4;
  color:#000;
  cursor:pointer;
  outline:none;
  user-select:none;
  transition:
    background-color .34s ease,
    color .34s ease,
    box-shadow .34s ease,
    transform .34s ease;
}
.method-vignette:hover {
  transform:translateY(-2px);
  box-shadow:0 18px 50px rgba(17,17,17,.07);
}
.method-vignette:focus-visible {
  outline:3px solid rgba(123,114,233,.55);
  outline-offset:4px;
}
.method-vignette.is-active {
  background:var(--accent);
  color:#fff;
  transform:none;
  box-shadow:0 26px 70px rgba(123,114,233,.26);
}
.method-vignette-number {
  position:absolute;
  top:28px;
  right:18px;
  z-index:5;
  font-size:clamp(64px, 6.4vw, 82px);
  font-weight:800;
  line-height:.86;
  letter-spacing:-.06em;
  color:rgba(123,114,233,.58);
  font-variant-numeric:tabular-nums;
  transition:
    color .34s ease,
    font-size .46s cubic-bezier(.16,1,.3,1),
    top .46s cubic-bezier(.16,1,.3,1),
    right .46s cubic-bezier(.16,1,.3,1);
}
.method-vignette.is-active .method-vignette-number {
  top:32px;
  right:22px;
  font-size:clamp(76px, 7vw, 92px);
  color:#fff;
}
.method-vignette-copy {
  position:absolute;
  left:20px;
  right:18px;
  bottom:28px;
  min-height:74px;
  z-index:2;
  display:flex;
  flex-direction:column;
  justify-content:flex-start;
  transition:
    top .46s cubic-bezier(.16,1,.3,1),
    bottom .46s cubic-bezier(.16,1,.3,1),
    left .46s cubic-bezier(.16,1,.3,1),
    right .46s cubic-bezier(.16,1,.3,1);
}
.method-vignette.is-active .method-vignette-copy {
  top:auto;
  bottom:28px;
  left:22px;
  right:22px;
  max-width:260px;
}
.method-vignette-kicker {
  display:block;
  margin-bottom:9px;
  max-width:100%;
  font-size:clamp(16px, 1.28vw, 19px);
  font-weight:900;
  line-height:1;
  letter-spacing:-.04em;
  color:currentColor;
  white-space:nowrap;
  transition:
    font-size .46s cubic-bezier(.16,1,.3,1),
    font-weight .34s ease,
    margin-bottom .34s ease;
}
.method-vignette h3 {
  margin:0;
  color:#000;
  font-size:clamp(13px, .95vw, 15px);
  font-weight:500;
  line-height:1.18;
  letter-spacing:-.018em;
  text-wrap:balance;
  transition:
    color .34s ease,
    font-size .46s cubic-bezier(.16,1,.3,1);
}
.method-vignette.is-active h3 {
  color:#fff;
  font-size:clamp(15px, 1.25vw, 18px);
  font-weight:500;
  letter-spacing:-.02em;
  line-height:1.16;
}
.method-vignette.is-active .method-vignette-kicker {
  margin-bottom:10px;
  font-size:clamp(30px, 2.85vw, 38px);
  font-weight:900;
  line-height:.96;
  letter-spacing:-.045em;
}
.method-vignette-visual {
  position:absolute;
  left:16px;
  right:16px;
  top:130px;
  bottom:auto;
  height:132px;
  z-index:1;
  opacity:.34;
  transform:translateY(10px) scale(.86);
  pointer-events:none;
  --mv-white:rgba(255,255,255,.94);
  --mv-soft:rgba(255,255,255,.58);
  --mv-dark:rgba(18,19,28,.92);
  --mv-purple:#7B72E9;
  --mv-shadow:0 22px 54px rgba(21,18,74,.18);
  transition:
    opacity .34s ease,
    transform .46s cubic-bezier(.16,1,.3,1),
    top .46s cubic-bezier(.16,1,.3,1),
    left .46s cubic-bezier(.16,1,.3,1),
    right .46s cubic-bezier(.16,1,.3,1),
    height .46s cubic-bezier(.16,1,.3,1);
}
.method-vignette.is-active .method-vignette-visual {
  left:10%;
  right:8%;
  top:122px;
  bottom:126px;
  height:auto;
  opacity:1;
  transform:translateY(0) scale(1);
}
.method-vignette:not(.is-active) .method-vignette-visual {
  --mv-white:rgba(255,255,255,.8);
  --mv-soft:rgba(123,114,233,.22);
  --mv-dark:rgba(18,19,28,.58);
  --mv-shadow:0 16px 34px rgba(21,18,74,.08);
}
.method-vignette-visual::before,
.method-vignette-visual > span {
  position:absolute;
  display:block;
  box-sizing:border-box;
}
.method-vignette-visual::before {
  content:'';
  inset:8% 3% 4%;
  border-radius:999px;
  background:radial-gradient(circle at 50% 50%, rgba(255,255,255,.32), rgba(255,255,255,0) 70%);
  opacity:.72;
  animation:mvAmbient 6s ease-in-out infinite alternate;
}
.method-vignette:not(.is-active) .method-vignette-visual::before {
  background:radial-gradient(circle at 50% 50%, rgba(123,114,233,.22), rgba(123,114,233,0) 72%);
  opacity:.82;
}
.mv-card {
  border-radius:18px;
  background:var(--mv-white);
  border:1px solid rgba(255,255,255,.58);
  box-shadow:var(--mv-shadow);
  animation:mvCardFloat 5.5s ease-in-out infinite;
}
.method-visual-understand .mv-card-a {
  left:4%;
  top:8%;
  width:44%;
  height:34%;
}
.method-visual-understand .mv-card-b {
  right:4%;
  top:44%;
  width:48%;
  height:34%;
  animation-delay:-1.4s;
}
.mv-line {
  height:4px;
  border-radius:999px;
  background:var(--mv-soft);
  box-shadow:0 0 0 1px rgba(255,255,255,.12);
  transform-origin:left center;
  animation:mvLineDraw 3.8s ease-in-out infinite;
}
.method-visual-understand .mv-line-a {
  left:36%;
  top:33%;
  width:37%;
  --mv-rotate:16deg;
  transform:rotate(16deg);
}
.method-visual-understand .mv-line-b {
  left:27%;
  top:62%;
  width:43%;
  --mv-rotate:-18deg;
  transform:rotate(-18deg);
  animation-delay:-1.9s;
}
.mv-node {
  width:22px;
  height:22px;
  border-radius:50%;
  background:#fff;
  border:5px solid var(--mv-purple);
  box-shadow:0 12px 28px rgba(24,20,80,.20);
  animation:mvNodePulse 2.8s ease-in-out infinite;
}
.method-visual-understand .mv-node-a { left:24%; top:24%; }
.method-visual-understand .mv-node-b { left:58%; top:39%; animation-delay:-1.1s; }
.mv-pill {
  height:9px;
  border-radius:999px;
  background:var(--mv-dark);
}
.method-visual-understand .mv-pill-a {
  left:13%;
  top:22%;
  width:24%;
}
.method-visual-understand .mv-pill-b {
  right:13%;
  top:56%;
  width:28%;
  background:var(--mv-purple);
}
.mv-list {
  left:12%;
  width:66%;
  height:18%;
  border-radius:16px;
  background:var(--mv-white);
  box-shadow:var(--mv-shadow);
  animation:mvListLift 4.8s ease-in-out infinite;
}
.mv-list-a { top:10%; }
.mv-list-b {
  top:36%;
  width:76%;
  background:linear-gradient(90deg, var(--mv-white), rgba(255,255,255,.72));
  animation-delay:-1.2s;
}
.mv-list-c {
  top:62%;
  width:58%;
  animation-delay:-2.4s;
}
.mv-focus-ring {
  left:58%;
  top:26%;
  width:34%;
  height:38%;
  border-radius:50%;
  border:3px solid rgba(255,255,255,.82);
  box-shadow:0 0 0 9px rgba(255,255,255,.14);
  animation:mvFocusPulse 3.2s ease-in-out infinite;
}
.method-vignette:not(.is-active) .mv-focus-ring {
  border-color:rgba(123,114,233,.45);
  box-shadow:0 0 0 7px rgba(123,114,233,.08);
}
.mv-check {
  width:22px;
  height:22px;
  border-radius:50%;
  background:var(--mv-purple);
  box-shadow:0 10px 24px rgba(24,20,80,.16);
  animation:mvCheckPop 3.4s ease-in-out infinite;
}
.mv-check::before {
  content:'';
  position:absolute;
  left:7px;
  top:5px;
  width:7px;
  height:11px;
  border:solid #fff;
  border-width:0 3px 3px 0;
  transform:rotate(45deg);
}
.mv-check-a { left:16%; top:14%; }
.mv-check-b { left:16%; top:66%; animation-delay:-1.7s; }
.mv-scan {
  left:9%;
  top:6%;
  width:3px;
  height:78%;
  --mv-scan-distance:210px;
  border-radius:999px;
  background:linear-gradient(180deg, transparent, rgba(255,255,255,.95), transparent);
  animation:mvScan 3s ease-in-out infinite;
}
.method-vignette:not(.is-active) .mv-scan {
  --mv-scan-distance:92px;
}
.method-vignette:not(.is-active) .mv-scan {
  background:linear-gradient(180deg, transparent, rgba(123,114,233,.45), transparent);
}
.mv-page {
  width:31%;
  height:25%;
  border-radius:15px;
  background:var(--mv-white);
  box-shadow:var(--mv-shadow);
  animation:mvPageShift 5.2s ease-in-out infinite;
}
.mv-page-a { left:6%; top:10%; }
.mv-page-b { right:6%; top:10%; animation-delay:-1s; }
.mv-page-c { left:6%; bottom:8%; animation-delay:-2s; }
.mv-page-d { right:6%; bottom:8%; animation-delay:-3s; }
.mv-hub {
  left:50%;
  top:50%;
  width:58px;
  height:58px;
  border-radius:18px;
  background:var(--mv-purple);
  box-shadow:0 18px 42px rgba(24,20,80,.22);
  transform:translate(-50%,-50%);
  animation:mvHubPulse 3.6s ease-in-out infinite;
}
.mv-route {
  left:22%;
  top:50%;
  width:56%;
  height:4px;
  border-radius:999px;
  background:rgba(255,255,255,.58);
  transform-origin:center;
  animation:mvRouteGlow 3.2s ease-in-out infinite;
}
.mv-route-a { transform:rotate(24deg); }
.mv-route-b { transform:rotate(-24deg); animation-delay:-1.6s; }
.method-vignette:not(.is-active) .mv-route {
  background:rgba(123,114,233,.28);
}
.mv-browser {
  left:5%;
  top:10%;
  width:70%;
  height:62%;
  border-radius:18px;
  background:var(--mv-white);
  box-shadow:var(--mv-shadow);
  overflow:hidden;
}
.mv-browser::before {
  content:'';
  position:absolute;
  left:0;
  right:0;
  top:0;
  height:20%;
  background:rgba(15,19,24,.12);
}
.mv-hero-block {
  left:13%;
  top:38%;
  width:22%;
  height:22%;
  border-radius:10px;
  background:var(--mv-dark);
  animation:mvHeroMorph 4.4s ease-in-out infinite;
}
.mv-copy-line {
  left:41%;
  height:8px;
  border-radius:999px;
  background:rgba(15,19,24,.22);
}
.mv-copy-line-a { top:40%; width:24%; }
.mv-copy-line-b { top:53%; width:18%; }
.mv-swatch {
  right:8%;
  width:17%;
  height:17%;
  border-radius:12px;
  box-shadow:0 14px 30px rgba(24,20,80,.16);
  animation:mvSwatchBounce 3.8s ease-in-out infinite;
}
.mv-swatch-a {
  top:18%;
  background:#fff;
}
.mv-swatch-b {
  top:39%;
  background:var(--mv-purple);
  animation-delay:-1.9s;
}
.mv-cursor {
  left:52%;
  top:58%;
  width:24px;
  height:30px;
  background:#fff;
  clip-path:polygon(0 0, 0 100%, 30% 76%, 48% 100%, 63% 92%, 46% 68%, 78% 68%);
  filter:drop-shadow(0 8px 16px rgba(24,20,80,.28));
  animation:mvCursorPath 4.2s ease-in-out infinite;
}
.method-vignette:not(.is-active) .mv-cursor {
  background:rgba(123,114,233,.78);
}
.mv-dashboard {
  left:7%;
  top:10%;
  width:74%;
  height:64%;
  border-radius:20px;
  background:var(--mv-white);
  box-shadow:var(--mv-shadow);
}
.mv-dashboard::before {
  content:'';
  position:absolute;
  left:10%;
  top:14%;
  width:44%;
  height:8px;
  border-radius:999px;
  background:rgba(15,19,24,.18);
}
.mv-chart {
  bottom:31%;
  width:10%;
  border-radius:999px 999px 6px 6px;
  background:var(--mv-purple);
  transform-origin:bottom center;
  animation:mvChartGrow 3.6s ease-in-out infinite;
}
.mv-chart-a { left:17%; height:22%; }
.mv-chart-b { left:32%; height:34%; animation-delay:-1.2s; }
.mv-chart-c { left:47%; height:46%; animation-delay:-2.4s; }
.mv-progress {
  left:17%;
  bottom:18%;
  width:48%;
  height:8px;
  border-radius:999px;
  background:linear-gradient(90deg, var(--mv-purple) 0 68%, rgba(15,19,24,.14) 68% 100%);
  transform-origin:left center;
  animation:mvProgressSweep 4s ease-in-out infinite;
}
.mv-status-ring {
  right:8%;
  top:19%;
  width:34%;
  height:46%;
  border-radius:50%;
  border:4px solid rgba(255,255,255,.55);
  border-top-color:var(--mv-purple);
  animation:mvRingSpin 4.6s linear infinite;
}
.method-vignette:not(.is-active) .mv-status-ring {
  border-color:rgba(123,114,233,.14);
  border-top-color:rgba(123,114,233,.58);
}
.mv-status-dot {
  right:19%;
  top:39%;
  width:18px;
  height:18px;
  border-radius:50%;
  background:var(--mv-purple);
  box-shadow:0 0 0 9px rgba(123,114,233,.18);
  animation:mvStatusPulse 2.8s ease-in-out infinite;
}
@keyframes mvAmbient {
  from { transform:translate3d(-8px,-6px,0) scale(.98); }
  to { transform:translate3d(10px,8px,0) scale(1.04); }
}
@keyframes mvCardFloat {
  0%,100% { transform:translate3d(0,0,0) rotate(0deg); }
  50% { transform:translate3d(4px,-8px,0) rotate(.8deg); }
}
@keyframes mvLineDraw {
  0%,100% { opacity:.38; transform:scaleX(.72) rotate(var(--mv-rotate, 0deg)); }
  50% { opacity:1; transform:scaleX(1) rotate(var(--mv-rotate, 0deg)); }
}
@keyframes mvNodePulse {
  0%,100% { transform:scale(.92); }
  50% { transform:scale(1.12); }
}
@keyframes mvListLift {
  0%,100% { transform:translateX(0); }
  50% { transform:translateX(8px); }
}
@keyframes mvFocusPulse {
  0%,100% { transform:scale(.9); opacity:.64; }
  50% { transform:scale(1.08); opacity:1; }
}
@keyframes mvCheckPop {
  0%,70%,100% { transform:scale(.88); }
  12%,36% { transform:scale(1.08); }
}
@keyframes mvScan {
  0%,100% { transform:translateX(0); opacity:.32; }
  50% { transform:translateX(var(--mv-scan-distance)); opacity:1; }
}
@keyframes mvPageShift {
  0%,100% { transform:translate3d(0,0,0); }
  50% { transform:translate3d(0,-7px,0); }
}
@keyframes mvHubPulse {
  0%,100% { transform:translate(-50%,-50%) scale(.94); }
  50% { transform:translate(-50%,-50%) scale(1.08); }
}
@keyframes mvRouteGlow {
  0%,100% { opacity:.36; }
  50% { opacity:.92; }
}
@keyframes mvHeroMorph {
  0%,100% { border-radius:10px; transform:scale(1); }
  50% { border-radius:16px; transform:scale(1.08); }
}
@keyframes mvSwatchBounce {
  0%,100% { transform:translateY(0) rotate(0deg); }
  50% { transform:translateY(-9px) rotate(5deg); }
}
@keyframes mvCursorPath {
  0%,100% { transform:translate3d(-18px,-10px,0); }
  45% { transform:translate3d(22px,-24px,0); }
  70% { transform:translate3d(35px,8px,0); }
}
@keyframes mvChartGrow {
  0%,100% { transform:scaleY(.58); }
  50% { transform:scaleY(1); }
}
@keyframes mvProgressSweep {
  0%,100% { filter:saturate(.9); transform:scaleX(.82); }
  50% { filter:saturate(1.25); transform:scaleX(1); }
}
@keyframes mvRingSpin {
  to { transform:rotate(360deg); }
}
@keyframes mvStatusPulse {
  0%,100% { transform:scale(.88); box-shadow:0 0 0 7px rgba(123,114,233,.16); }
  50% { transform:scale(1.1); box-shadow:0 0 0 13px rgba(123,114,233,.08); }
}
.method-map > span {
  position:absolute;
  display:block;
}
.method-map-card {
  border-radius:18px;
  background:rgba(255,255,255,.92);
  border:1px solid rgba(255,255,255,.62);
  box-shadow:0 22px 54px rgba(21,18,74,.22);
}
.method-map-card-a {
  left:6%;
  top:8%;
  width:44%;
  height:34%;
}
.method-map-card-b {
  right:5%;
  top:40%;
  width:48%;
  height:34%;
}
.method-map-rail {
  height:4px;
  border-radius:999px;
  background:rgba(255,255,255,.54);
  box-shadow:0 0 0 1px rgba(255,255,255,.16);
  transform-origin:left center;
}
.method-map-rail-a {
  left:36%;
  top:32%;
  width:36%;
  transform:rotate(16deg);
}
.method-map-rail-b {
  left:28%;
  top:60%;
  width:42%;
  transform:rotate(-18deg);
}
.method-map-node {
  width:24px;
  height:24px;
  border-radius:50%;
  background:#fff;
  border:5px solid rgba(123,114,233,.92);
  box-shadow:0 14px 34px rgba(24,20,80,.24);
}
.method-map-node-a { left:24%; top:24%; }
.method-map-node-b { left:58%; top:38%; }
.method-map-node-c { left:35%; top:63%; }
.method-map-pill {
  height:10px;
  border-radius:999px;
  background:#111318;
  opacity:.9;
}
.method-map-pill-a {
  left:13%;
  top:21%;
  width:24%;
}
.method-map-pill-b {
  right:13%;
  top:55%;
  width:28%;
  background:#7B72E9;
}
.method-monitor {
  position:absolute;
  left:4%;
  right:4%;
  bottom:48px;
  height:72%;
  border-radius:20px 20px 24px 24px;
  background:#F7F7F4;
  border:1px solid rgba(255,255,255,.22);
  box-shadow:0 28px 70px rgba(0,0,0,.34);
  overflow:hidden;
}
.method-monitor::before {
  content:'';
  position:absolute;
  inset:0 0 auto;
  height:52px;
  background:#EAEBE8;
}
.method-monitor-dot,
.method-monitor-panel,
.method-monitor-line,
.method-monitor-cta {
  position:absolute;
  z-index:1;
  display:block;
}
.method-monitor-dot {
  top:23px;
  width:10px;
  height:10px;
  border-radius:50%;
  background:#C7C9C6;
}
.method-monitor-dot-1 { left:26px; }
.method-monitor-dot-2 { left:44px; }
.method-monitor-dot-3 { left:62px; }
.method-monitor-panel {
  left:28px;
  top:78px;
  width:38%;
  height:38%;
  border-radius:8px;
  background:#0F1318;
}
.method-monitor-line {
  left:52%;
  height:12px;
  border-radius:999px;
  background:#CED0CC;
}
.method-monitor-line-1 {
  top:78px;
  width:34%;
}
.method-monitor-line-2 {
  top:104px;
  width:26%;
}
.method-monitor-cta {
  left:52%;
  top:130px;
  width:74px;
  height:28px;
  border-radius:8px;
  background:var(--accent);
}
.method-monitor-line-3 {
  left:28px;
  right:46px;
  bottom:28px;
}
.method-monitor-base {
  position:absolute;
  left:0;
  right:0;
  bottom:42px;
  height:40px;
  border-radius:0 0 18px 18px;
  background:#D9DAD6;
  z-index:2;
}
.method-monitor-foot {
  position:absolute;
  left:50%;
  bottom:0;
  width:70%;
  height:40px;
  transform:translateX(-50%);
  border-radius:28px 28px 0 0;
  background:#F7F7F4;
  z-index:0;
}

@media(max-width:1180px){
  .method-vignettes {
    grid-template-columns:minmax(390px, 2.25fr) repeat(4, minmax(124px, 1fr));
  }
  .method-vignettes[data-active="1"] { grid-template-columns:minmax(390px, 2.25fr) repeat(4, minmax(124px, 1fr)); }
  .method-vignettes[data-active="2"] { grid-template-columns:minmax(124px, 1fr) minmax(390px, 2.25fr) repeat(3, minmax(124px, 1fr)); }
  .method-vignettes[data-active="3"] { grid-template-columns:repeat(2, minmax(124px, 1fr)) minmax(390px, 2.25fr) repeat(2, minmax(124px, 1fr)); }
  .method-vignettes[data-active="4"] { grid-template-columns:repeat(3, minmax(124px, 1fr)) minmax(390px, 2.25fr) minmax(124px, 1fr); }
  .method-vignettes[data-active="5"] { grid-template-columns:repeat(4, minmax(124px, 1fr)) minmax(390px, 2.25fr); }
  .method-vignette {
    min-height:420px;
  }
  .method-vignette-copy {
    left:16px;
    right:14px;
    bottom:28px;
  }
  .method-vignette-number {
    right:14px;
    font-size:clamp(58px, 6vw, 72px);
  }
  .method-vignette h3 {
    font-size:14px;
  }
}

@media(max-width:980px){
  .method-vignettes {
    grid-template-columns:repeat(2, minmax(0, 1fr));
    max-width:720px;
  }
  .method-vignettes[data-active] {
    grid-template-columns:repeat(2, minmax(0, 1fr));
  }
  .method-vignette.is-active {
    grid-column:1 / -1;
  }
  .method-vignette {
    min-height:284px;
  }
  .method-vignette.is-active {
    min-height:430px;
  }
  .method-vignette-number {
    font-size:76px;
  }
  .method-vignette h3 {
    font-size:15px;
  }
  .method-vignette:not(.is-active) .method-vignette-visual {
    top:104px;
    height:72px;
    opacity:.26;
  }
  .method-vignette.is-active .method-vignette-visual {
    top:118px;
    bottom:132px;
  }
}

@media(max-width:640px){
  .about-method-section {
    padding-top:72px;
    padding-bottom:76px;
  }
  .method-vignettes {
    grid-template-columns:1fr;
    max-width:100%;
  }
  .method-vignettes[data-active] {
    grid-template-columns:1fr;
  }
  .method-vignette,
  .method-vignette.is-active {
    min-height:231px;
  }
  .method-vignette.is-active {
    min-height:287px;
  }
  .method-vignette-copy {
    left:15px;
    right:15px;
    bottom:21px;
  }
  .method-vignette.is-active .method-vignette-copy {
    top:auto;
    bottom:21px;
  }
  .method-vignette-number {
    top:17px;
    right:15px;
    font-size:57px;
  }
  .method-vignette.is-active .method-vignette-number {
    font-size:62px;
  }
  .method-vignette:not(.is-active) .method-vignette-visual {
    top:64px;
    height:52px;
    opacity:.28;
  }
  .method-vignette.is-active .method-vignette-visual {
    left:9%;
    right:9%;
    top:83px;
    bottom:95px;
  }
}

@media(prefers-reduced-motion:reduce){
  .method-vignettes,
  .method-vignette,
  .method-vignette-number,
  .method-vignette-copy,
  .method-vignette h3,
  .method-vignette-visual {
    transition:none;
  }
  .method-vignette-visual::before,
  .method-vignette-visual > span {
    animation:none !important;
  }
}

/* ══════════════ SIGNATURE — mark animé ══════════════ */
.mark-signature {
  position:relative; overflow:hidden;
  background:#0D0D0D;
  padding:100px 24px 80px;
  text-align:center;
}
.mark-stars, .mark-graphic {
  position:relative; display:block; margin:0 auto;
}
.mark-stars {
  position:absolute; inset:0; width:100%; height:100%;
}
.mark-graphic {
  width:520px; max-width:90%; height:auto;
}
.mstar { animation:mark-twinkle 3s ease-in-out infinite; }
.mstar-b { animation-duration:2.4s; animation-delay:.8s; }
.mstar-c { animation-duration:4s; animation-delay:1.4s; }

.mark-pulse { transform-origin:340px 230px; animation:mark-pulse 5s ease-in-out infinite; }
.mark-ring-1 { transform-origin:340px 230px; animation:mark-spin 9s linear infinite; }
.mark-ring-2 { transform-origin:340px 230px; animation:mark-spin-offset 13s linear infinite; }
.mark-ring-3 { transform-origin:340px 230px; animation:mark-spin 22s linear infinite reverse; }
.mark-letter { transform-origin:340px 230px; animation:mark-flip 4s linear infinite; }
.mark-sat-1 { transform-origin:340px 230px; animation:mark-spin 6s linear infinite; }
.mark-sat-2 { transform-origin:340px 230px; animation:mark-spin-offset 8s linear infinite reverse; }
.mark-sat-3 { transform-origin:340px 230px; animation:mark-spin 3.5s linear infinite; }

.mark-tagline {
  position:relative; font-family:'Instrument Serif',serif; font-style:italic;
  color:#fff; font-size:22px; margin:16px 0 0;
}

@keyframes mark-twinkle { 0%,100% { opacity:.2; } 50% { opacity:1; } }
@keyframes mark-spin { from { transform:rotate(0deg); } to { transform:rotate(360deg); } }
@keyframes mark-spin-offset { from { transform:rotate(35deg); } to { transform:rotate(395deg); } }
@keyframes mark-pulse { 0%,100% { transform:scale(.92); opacity:.75; } 50% { transform:scale(1.12); opacity:1; } }
@keyframes mark-flip { from { transform:rotateY(0deg); } to { transform:rotateY(360deg); } }

@media (prefers-reduced-motion: reduce) {
  .mstar, .mark-pulse, .mark-ring-1, .mark-ring-2, .mark-ring-3,
  .mark-letter, .mark-sat-1, .mark-sat-2, .mark-sat-3 { animation:none; }
}

/* ══════════════ MÉTHODE — grille mosaïque sombre ══════════════ */
.method-grid-section {
  background:#0D0D0D;
  padding:80px 24px;
}
.method-grid-header { max-width:640px; margin:0 auto 48px; text-align:center; }
.method-mosaic {
  display:flex; align-items:flex-start;
  gap:0; max-width:1180px; margin:0 auto;
  border-top:1px solid rgba(255,255,255,.1);
  border-left:1px solid rgba(255,255,255,.1);
}
.method-mcol {
  flex:1; display:flex; flex-direction:column;
  border-right:1px solid rgba(255,255,255,.1);
}
.method-mcol-offset-1 { margin-top:40px; }
.method-mcol-offset-2 { margin-top:80px; }
.method-cell {
  position:relative;
  padding:40px 28px; border-bottom:1px solid rgba(255,255,255,.1);
  min-height:220px; display:flex; flex-direction:column;
}
.method-cell::before {
  content:''; position:absolute; top:-1px; left:0; height:2px; width:38%;
  background:var(--accent);
}
.method-cell-top {
  display:flex; align-items:flex-start; justify-content:space-between;
  margin-bottom:26px;
}
.method-num { font-size:38px; font-weight:800; color:#fff; line-height:1; }
.method-dots { display:flex; gap:5px; align-items:center; }
.method-dots i {
  display:block; width:6px; height:6px; border-radius:2px;
  background:rgba(255,255,255,.18);
}
.method-dots i.on { background:var(--accent); }
.method-tag {
  display:inline-flex; align-items:center; gap:7px;
  font-size:11px; font-weight:700; letter-spacing:.08em; color:rgba(255,255,255,.6);
  margin-bottom:10px;
}
.method-tag i { width:6px; height:6px; border-radius:1px; background:var(--accent); flex-shrink:0; }
.method-cell h3 { font-size:20px; font-weight:800; color:#fff; margin-bottom:10px; letter-spacing:-.01em; }
.method-cell p { font-size:14px; color:rgba(255,255,255,.5); line-height:1.65; margin:0; }

@media(max-width:900px){
  .method-mosaic { flex-direction:column; }
  .method-mcol { border-right:none; }
  .method-mcol-offset-1, .method-mcol-offset-2 { margin-top:0; }
}

/* ══════════════ SERVICES — lignes numérotées ══════════════ */
.svc-rows {
  max-width:1400px; margin:0 auto;
  border-top:1px solid var(--border);
}
.svc-row {
  display:grid;
  grid-template-columns:minmax(118px,180px) minmax(420px,620px) minmax(280px,420px);
  justify-content:center;
  align-items:center;
  gap:clamp(72px,6.4vw,116px);
  padding:76px 0;
  min-height:430px;
  border-bottom:1px solid var(--border);
}
.svc-row-num {
  font-size:clamp(96px,11vw,150px); font-weight:800; color:var(--accent);
  line-height:1; letter-spacing:-.03em;
  display:flex; align-items:center; justify-content:flex-start;
  font-variant-numeric:tabular-nums;
}
.svc-row-media {
  justify-self:center;
  width:100%;
  max-width:620px;
  aspect-ratio:16/10;
  border-radius:18px;
  overflow:hidden;
  background:var(--bg-2);
  outline:1px solid rgba(0,0,0,.1);
  outline-offset:-1px;
  box-shadow:0 24px 72px rgba(17,17,17,.08);
}
.svc-row-media img,
.svc-row-media video {
  width:100%; height:100%; object-fit:cover; display:block;
}
.svc-row-text {
  display:flex; flex-direction:column; justify-content:center;
  max-width:420px;
  padding:0;
}
.svc-row-title {
  font-size:clamp(34px,3.6vw,48px); font-weight:800; letter-spacing:-.02em;
  color:var(--text); margin:0;
  text-wrap:balance;
}
.svc-row-desc {
  font-size:17px; color:var(--text-muted); line-height:1.75; max-width:420px; margin:24px 0 0;
  text-wrap:pretty;
}

@media(max-width:1180px){
  .svc-row {
    grid-template-columns:110px minmax(360px,520px) minmax(230px,320px);
    gap:clamp(44px,5vw,68px);
  }
  .svc-row-num {
    font-size:clamp(76px,10vw,116px);
  }
  .svc-row-title {
    font-size:clamp(30px,3.5vw,40px);
  }
  .svc-row-desc {
    font-size:16px;
  }
}

@media(max-width:900px){
  .svc-row {
    grid-template-columns:1fr; gap:24px; padding:42px 24px; min-height:0;
  }
  .svc-row-num { font-size:56px; }
  .svc-row-media { max-width:100%; aspect-ratio:16/10; }
  .svc-row-text { max-width:100%; padding:0; }
  .svc-row-desc { max-width:100%; margin-top:14px; }
}

/* ── ZONE D'INTERVENTION v2 ── */
.zone-v2-section { padding:100px 72px; }
.zone-v2-grid {
  display:grid; grid-template-columns:.85fr 1.15fr; gap:64px;
  max-width:1400px; margin:0 auto; align-items:start;
}
.zone-v2-eyebrow {
  display:flex; align-items:center; gap:10px;
  font-size:12px; font-weight:700; letter-spacing:.1em; text-transform:uppercase;
  color:var(--accent-dark); margin-bottom:20px;
}
.zone-v2-dot { width:7px; height:7px; border-radius:50%; background:var(--accent); flex-shrink:0; }
.zone-v2-title {
  font-size:clamp(42px, 6.4vw, 92px); font-weight:800; letter-spacing:-.07em;
  line-height:.94; color:var(--text); margin-bottom:24px; text-wrap:balance;
}
.zone-v2-title .accent { color:var(--accent); }
.zone-v2-lead { font-size:16px; line-height:1.75; color:var(--text-2); margin-bottom:16px; max-width:480px; }
.zone-v2-lead strong { color:var(--text); font-weight:700; }
.zone-v2-points { display:flex; flex-wrap:wrap; gap:28px; margin-top:36px; }
.zone-v2-point { display:flex; align-items:center; gap:10px; font-size:13px; font-weight:600; color:var(--text-2); }
.zone-v2-point-icon {
  display:flex; align-items:center; justify-content:center;
  width:34px; height:34px; border-radius:50%; flex-shrink:0;
  background:var(--accent-bg); color:var(--accent);
}
.zone-v2-point-icon svg { width:17px; height:17px; }

.zone-v2-right { display:flex; flex-direction:column; gap:24px; }
.zone-v2-hero-card {
  display:grid; grid-template-columns:1.1fr 1fr; gap:0;
  background:var(--surface); border:1px solid var(--border); border-radius:20px;
  overflow:hidden; box-shadow:0 20px 50px rgba(20,16,60,.06);
}
.zone-v2-map-wrap { position:relative; display:flex; align-items:center; justify-content:center; background:var(--bg-2); }
.zone-v2-map { width:100%; height:100%; object-fit:cover; display:block; }
.zone-map-pulse circle { animation:zoneMapPulse 3.2s ease-out infinite; transform-origin:220px 180px; }
.zone-map-pulse circle:nth-child(2) { animation-delay:.5s; }
@keyframes zoneMapPulse {
  0%   { opacity:.6; transform:scale(.7); }
  100% { opacity:0; transform:scale(1.25); }
}
.zone-v2-engage { padding:34px 30px; display:flex; flex-direction:column; }
.zone-v2-badge {
  display:inline-flex; align-items:center; gap:7px; align-self:flex-start;
  font-size:11px; font-weight:700; letter-spacing:.04em; text-transform:uppercase;
  color:var(--accent); background:var(--accent-bg); border:1px solid rgba(123,114,233,.25);
  padding:7px 14px; border-radius:999px; margin-bottom:20px;
}
.zone-v2-badge svg { width:14px; height:14px; }
.zone-v2-engage-title { font-size:19px; font-weight:700; line-height:1.35; color:var(--text); letter-spacing:-.01em; }
.zone-v2-rule { display:block; width:36px; height:2px; background:var(--accent); border-radius:2px; margin:18px 0; }
.zone-v2-engage-text { font-size:14px; line-height:1.7; color:var(--text-muted); }

.zone-v2-cards { display:grid; grid-template-columns:repeat(4, 1fr); gap:16px; }
.zone-v2-card {
  background:var(--surface); border:1px solid var(--border); border-radius:16px;
  padding:26px 22px; text-align:left;
}
.zone-v2-card-icon {
  display:flex; align-items:center; justify-content:center;
  width:44px; height:44px; border-radius:50%; margin-bottom:16px;
  background:var(--accent-bg); color:var(--accent);
}
.zone-v2-card-icon svg { width:20px; height:20px; }
.zone-v2-card h3 { font-size:16px; font-weight:800; color:var(--text); margin-bottom:8px; letter-spacing:-.01em; }
.zone-v2-card p { font-size:13px; line-height:1.6; color:var(--text-muted); }

@media(max-width:1100px){
  .zone-v2-grid { grid-template-columns:1fr; gap:48px; }
  .zone-v2-hero-card { grid-template-columns:1fr; }
  .zone-v2-cards { grid-template-columns:repeat(2, 1fr); }
}
@media(max-width:640px){
  .zone-v2-section { padding:64px 24px; }
  .zone-v2-points { flex-direction:column; align-items:flex-start; gap:16px; }
  .zone-v2-cards { grid-template-columns:1fr; }
}