/* ================================================================
   ACMÉ — Mono editorial system
   Palette : noir / blanc / gris · vecteurs géométriques · 3D
   ================================================================ */

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

:root {
  --black: #000000;
  --ink: #0A0A0A;
  --white: #FFFFFF;
  --offwhite: #FAFAFA;
  --grey-900: #1A1A1A;
  --grey-700: #3A3A3A;
  --grey-500: #6E6E6E;
  --grey-300: #B8B8B8;
  --grey-200: #DDDDDD;
  --grey-100: #EFEFEF;

  --font-display: 'Archivo', 'Helvetica Neue', sans-serif;
  --font-body: 'Inter', 'Helvetica Neue', sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, monospace;

  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-inout: cubic-bezier(0.65, 0, 0.35, 1);

  --container: 1400px;
  --gutter: clamp(20px, 4vw, 56px);
}

html { scroll-behavior: smooth; -webkit-font-smoothing: antialiased; }
/* La barre de navigation est fixe et fait 97 px : sans cette marge, une ancre
   fait atterrir la section dessous, partiellement masquee. Vaut pour #faq
   comme pour #sectors, #articles, #observatoire et #configurateur. */
:target, section[id], article[id] { scroll-margin-top: 120px; }
body {
  font-family: var(--font-body);
  color: var(--ink);
  background: var(--white);
  font-size: 16px;
  line-height: 1.55;
  overflow-x: hidden;
}

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; background: none; border: none; color: inherit; }
ul { list-style: none; }

/* ==== Typography ==== */
.eyebrow {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.4em;
  text-transform: uppercase;
  color: var(--grey-500);
  font-weight: 500;
}
.display {
  font-family: var(--font-display);
  font-weight: 600;
  line-height: 0.98;
  letter-spacing: -0.02em;
}
h1.display { font-size: clamp(44px, 7vw, 104px); }
h2.display { font-size: clamp(36px, 5vw, 72px); }
h3.display { font-size: clamp(24px, 2.4vw, 36px); }
.lead { font-size: clamp(17px, 1.4vw, 21px); color: var(--grey-700); line-height: 1.5; max-width: 58ch; }
.mono { font-family: var(--font-mono); letter-spacing: 0.04em; }

/* ==== Background textures (vecteurs géométriques) ==== */
/* Background patterns removed for a clean, plain background across the site. */
.dot-grid { background-image: none; }
.line-grid { background-image: none; }

/* ==== Container ==== */
.container {
  max-width: var(--container);
  margin: 0 auto;
  padding-left: var(--gutter);
  padding-right: var(--gutter);
}

/* ==== Navigation ==== */
.nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  padding: 20px 0;
  transition: background 0.3s var(--ease-out), border-color 0.3s var(--ease-out), backdrop-filter 0.3s var(--ease-out);
  border-bottom: 1px solid transparent;
}
.nav.scrolled {
  background: rgba(255,255,255,0.92);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom-color: var(--grey-200);
}
.nav-inner {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 24px;
}
.nav-menu { margin-left: 20px; }
.nav-right { margin-left: auto; }
.nav-logo {
  display: flex; align-items: center; gap: 12px;
  font-family: var(--font-display); font-weight: 700;
  letter-spacing: 0.18em;
  font-size: 14px;
  text-transform: uppercase;
}
.nav-logo img { height: 56px; width: auto; }
@media (max-width: 900px) { .nav-logo img { height: 40px; } }
.nav-menu {
  display: flex; gap: 36px; align-items: center;
}
.nav-menu a {
  font-size: 13px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 500;
  position: relative;
  padding: 6px 0;
}
.nav-menu a::after {
  content: '';
  position: absolute;
  left: 0; right: 100%;
  bottom: 0;
  height: 1px;
  background: var(--black);
  transition: right 0.4s var(--ease-out);
}
.nav-menu a:hover::after { right: 0; }
.nav-menu a.current::after { right: 0; }

.nav-burger { display: none; flex-direction: column; gap: 5px; padding: 8px; }
.nav-burger span { width: 22px; height: 1.5px; background: var(--ink); transition: transform 0.3s; }

/* ═══════════════════════════════════════════════════════════════════
   APPAREILS TACTILES
   Mesure au doigt, pas a la souris : sous 44x44 px une cible se rate.
   On cible (pointer: coarse) plutot qu'une largeur — une tablette large
   reste tactile, un petit ecran de bureau ne l'est pas.
   ═══════════════════════════════════════════════════════════════════ */
@media (pointer: coarse) {
  /* Supprime le delai de 300 ms que les navigateurs mobiles ajoutent
     en attendant un eventuel double-tap. */
  a, button, summary, [role="button"] { touch-action: manipulation; }

  /* Le bouton de menu faisait 38x31 : c'est la commande principale sur
     mobile, elle doit etre la plus sure de toutes. */
  .nav-burger {
    width: 44px; height: 44px;
    align-items: center; justify-content: center;
    padding: 0;
  }

  /* Le selecteur de langue faisait 34x22 par bouton. */
  .lang-toggle button,
  .lang-toggle .lang-link { padding: 12px 14px; }

  /* Les liens de pied de page faisaient 17 px de haut, colles les uns aux
     autres. On ne peut pas leur donner 44 px sans etirer le pied de page
     hors de proportion ; on double leur hauteur utile et on porte
     l'ecart entre deux liens au-dela des 8 px demandes. */
  .footer ul { gap: 4px; }
  .footer ul li a { display: inline-block; padding: 9px 0; }
}

/* ==== Language toggle ==== */
.lang-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0;
  border: 1px solid var(--grey-300);
  padding: 0;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  user-select: none;
}
/* Le sélecteur mêle un bouton et un lien : la langue courante est inerte,
   l'autre est un lien vers l'URL correspondante. Les deux doivent se rendre
   à l'identique, sans quoi celui qui n'est pas stylé paraît écrasé. */
.lang-toggle button,
.lang-toggle .lang-link {
  display: inline-block;
  padding: 7px 12px;
  color: var(--grey-500);
  font: inherit;
  letter-spacing: inherit;
  line-height: 1;
  text-decoration: none;
  transition: color 0.25s var(--ease-out), background 0.25s var(--ease-out);
  border: none;
  background: transparent;
}
.lang-toggle button:hover,
.lang-toggle .lang-link:hover { color: var(--ink); }
.lang-toggle button.active,
.lang-toggle .lang-link.active {
  background: var(--black);
  color: var(--white);
}
.lang-toggle .lang-sep { color: var(--grey-300); padding: 0 2px; font-weight: 300; }

/* ==== Button ==== */
.btn {
  display: inline-flex; align-items: center; gap: 12px;
  padding: 16px 28px;
  font-size: 12px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  font-weight: 600;
  transition: all 0.3s var(--ease-out);
  border: 1px solid transparent;
  cursor: pointer;
}
.btn .arrow { transition: transform 0.3s var(--ease-out); }
.btn:hover .arrow { transform: translateX(6px); }
.btn:hover .arrow path { animation: arrow-pulse 0.8s ease-out; }
@keyframes arrow-pulse {
  0%   { opacity: 0.4; }
  100% { opacity: 1; }
}

/* All standalone SVG icons get a hover lift / spin */
.office-row svg,
.contact-form svg,
.footer-icon svg,
.tier-visual + .tier-meta svg,
.step-icon svg { transition: transform 0.45s var(--ease-out, cubic-bezier(0.22,0.61,0.36,1)); }
.office-row:hover svg { transform: scale(1.15) rotate(-6deg); }

/* Pulse animation for any element that opts-in with .icon-pulse */
.icon-pulse { animation: icon-pulse 3s ease-in-out infinite; transform-origin: center; }
@keyframes icon-pulse {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.08); }
}

/* v1 / v2 variant toggle (visible on both pages) */
.v2-toggle {
  position: fixed;
  bottom: 24px; right: 24px;
  z-index: 998;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 6px;
  background: #fff;
  border: 1px solid #e0e0e0;
  border-radius: 999px;
  box-shadow: 0 4px 18px rgba(0,0,0,0.08);
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.v2-toggle .v2-current {
  background: #000; color: #fff;
  padding: 6px 12px; border-radius: 999px;
}
.v2-toggle .v2-link {
  padding: 6px 12px;
  border-radius: 999px;
  color: #6e6e6e;
  text-decoration: none;
  transition: color 0.2s ease, background 0.2s ease;
}
.v2-toggle .v2-link:hover { color: #000; background: #f4f4f4; }

.btn-primary-dark { background: var(--black); color: var(--white); border-color: var(--black); }
.btn-primary-dark:hover { background: var(--grey-900); }
.btn-primary-light { background: var(--white); color: var(--black); border-color: var(--white); }
.btn-primary-light:hover { background: var(--grey-200); }
.btn-outline-dark { background: transparent; color: var(--black); border-color: var(--black); }
.btn-outline-dark:hover { background: var(--black); color: var(--white); }
.btn-outline-light { background: transparent; color: var(--white); border-color: var(--white); }
.btn-outline-light:hover { background: var(--white); color: var(--black); }

/* ==== Sections ==== */
section { position: relative; }
.section-pad { padding: clamp(80px, 10vw, 160px) 0; }

/* ==== HERO ==== */
.hero {
  min-height: 100vh;
  padding-top: 120px;
  padding-bottom: 80px;
  position: relative;
  display: flex;
  align-items: center;
  overflow: hidden;
}
.hero-bg {
  position: absolute;
  inset: 0;
  opacity: 0.5;
  z-index: 0;
  -webkit-mask-image: radial-gradient(ellipse at center, black 40%, transparent 80%);
          mask-image: radial-gradient(ellipse at center, black 40%, transparent 80%);
}

/* === Hero split slider (value prop + 2 brand animations, seamless) === */
.hero-split {
  min-height: 100vh;
  padding-top: 110px;
  padding-bottom: 60px;
  display: flex;
  align-items: center;
  position: relative;
  overflow: hidden;
}
.hero-split .hero-bg { opacity: 0.18; }
/* Decorative animated layers behind the slider */
.hero-split::before,
.hero-split::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
}
.hero-split::before {
  background:
    radial-gradient(circle 320px at 78% 42%, rgba(0,0,0,0.04), transparent 60%),
    radial-gradient(circle 220px at 86% 70%, rgba(0,0,0,0.025), transparent 60%);
  animation: hero-glow 14s ease-in-out infinite alternate;
}
.hero-split::after {
  /* Background grid removed for a clean hero background. */
  background-image: none;
}
@keyframes hero-glow {
  0%   { transform: translate(0, 0) scale(1); opacity: 0.6; }
  100% { transform: translate(-30px, 20px) scale(1.05); opacity: 1; }
}
@keyframes hero-drift {
  0%   { background-position: 0 0, 0 0; }
  100% { background-position: 80px 80px, 80px 80px; }
}

.hero-split-inner {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: minmax(320px, 0.85fr) minmax(460px, 1.15fr);
  gap: 56px;
  align-items: center;
  width: 100%;
}

.hsplit-text { max-width: 520px; }
.hsplit-text .hero-eyebrow { margin-bottom: 22px; font-size: 10px; }
.hsplit-text h1.display {
  font-size: clamp(36px, 4.2vw, 56px);
  line-height: 1.05;
  letter-spacing: -0.02em;
  margin-bottom: 22px;
}
.hsplit-text p.lead {
  font-size: clamp(14px, 1.05vw, 16px);
  line-height: 1.55;
  color: var(--grey-700);
  max-width: 460px;
}
.hsplit-text .hero-ctas { margin-top: 28px; gap: 12px; }
.hsplit-text .hero-ctas .btn { padding: 12px 18px; font-size: 13px; }

/* Visual column — seamless: no border, no background panel */
.hsplit-visual {
  position: relative;
  aspect-ratio: 5 / 4;
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  user-select: none;
}
.hsplit-stage {
  position: relative;
  flex: 1;
  overflow: hidden;
  background: transparent;
  border: none;
}
/* Soft fade-edge mask so the animations blend with the page */
.hsplit-stage::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 4;
  background:
    radial-gradient(ellipse 70% 80% at 50% 50%, transparent 60%, var(--white, #fff) 100%);
}
.hsplit-frame {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  opacity: 0;
  transform: scale(1.02);
  transition: opacity 0.7s cubic-bezier(0.22, 0.61, 0.36, 1),
              transform 1s cubic-bezier(0.22, 0.61, 0.36, 1);
  will-change: opacity, transform;
}
.hsplit-frame.is-active {
  opacity: 1;
  transform: scale(1);
}
/* Each frame embeds a self-contained animation via iframe — seamless, full-bleed */
.hsplit-frame iframe {
  width: 100%;
  height: 100%;
  margin: 0;
  border: 0;
  display: block;
  pointer-events: none;
  background: transparent;
  mix-blend-mode: multiply;
}

/* Auto-cycle hero (was v3.1) — applied to every variant */
.hsplit-hud,
.hsplit-labels { display: none !important; }
.hsplit-visual { aspect-ratio: auto; height: 100%; }
.hsplit-stage  { height: 100%; min-height: 460px; }

.hsplit-frame {
  transition: opacity 0.9s cubic-bezier(0.22, 0.61, 0.36, 1),
              transform 1.4s cubic-bezier(0.22, 0.61, 0.36, 1);
  transform: scale(0.985);
}
.hsplit-frame.is-active { transform: scale(1); }

/* No radial fade-edge mask: let animations breathe edge-to-edge */
.hsplit-stage::before { background: none !important; }

/* Subtle "playing" pulse indicator (bottom-left of stage) */
.hsplit-stage::after {
  content: "";
  position: absolute;
  left: 14px; bottom: 14px;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: #1f5bff;
  box-shadow: 0 0 0 0 rgba(31, 91, 255, 0.5);
  animation: hsplit-pulse 1.6s ease-in-out infinite;
  z-index: 5;
  pointer-events: none;
}
@keyframes hsplit-pulse {
  0%, 100% { transform: scale(1);   box-shadow: 0 0 0 0   rgba(31,91,255,0.5); }
  50%      { transform: scale(1.2); box-shadow: 0 0 0 8px rgba(31,91,255,0);   }
}

/* Slider HUD: arrows + counter bar */
.hsplit-hud {
  margin-top: 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.hsplit-arrow {
  width: 44px; height: 44px;
  border: 1px solid var(--grey-300, #c4c4c4);
  background: var(--white, #fff);
  border-radius: 50%;
  display: inline-grid; place-items: center;
  cursor: pointer;
  color: var(--black);
  transition: background 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}
.hsplit-arrow:hover {
  background: var(--black);
  border-color: var(--black);
  color: var(--white);
  transform: translateY(-1px);
}
.hsplit-counter {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: 1;
  font-family: var(--font-mono, 'JetBrains Mono', monospace);
  font-size: 12px;
  letter-spacing: 0.14em;
  color: var(--grey-700);
}
.hsplit-num { color: var(--black); font-weight: 600; }
.hsplit-total { color: var(--grey-500); }
.hsplit-bar {
  flex: 1;
  height: 2px;
  background: var(--grey-200);
  position: relative;
  overflow: hidden;
}
.hsplit-bar-fill {
  position: absolute;
  left: 0; top: 0;
  width: 33.33%;
  height: 100%;
  background: var(--black);
  transition: width 0.5s cubic-bezier(0.22, 0.61, 0.36, 1),
              transform 0.5s cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* Floating keyword labels (light hint, top-right of stage) */
.hsplit-labels {
  position: absolute;
  top: 16px; right: 18px;
  font-family: var(--font-mono, 'JetBrains Mono', monospace);
  font-size: 10px;
  letter-spacing: 0.22em;
  color: var(--grey-700);
  text-transform: uppercase;
  pointer-events: none;
}
.hsplit-label {
  position: absolute;
  top: 0; right: 0;
  white-space: nowrap;
  opacity: 0;
  transform: translateY(-4px);
  transition: opacity 0.4s ease, transform 0.4s ease;
}
.hsplit-label.is-active { opacity: 1; transform: translateY(0); position: relative; }

@media (max-width: 1024px) {
  .hero-split-inner { grid-template-columns: 1fr; gap: 40px; }
  .hsplit-visual { aspect-ratio: 16 / 10; }
}
@media (prefers-reduced-motion: reduce) {
  .hsplit-frame { transition: opacity 0.3s ease !important; transform: none !important; }
}

/* === Tiny animated SVG icons hidden in main titles === */
.title-icon {
  display: inline-block;
  width: 0.65em; height: 0.65em;
  vertical-align: -0.02em;
  margin-left: 0.22em;
  color: currentColor;
  opacity: 0.78;
  transform: translateY(0);
  transition: opacity 0.3s ease, transform 0.4s cubic-bezier(0.22, 1.4, 0.6, 1);
}
.title-icon svg { width: 100%; height: 100%; overflow: visible; display: block; }
.title-icon .ti-pawn-body,
.title-icon .ti-pawn-head,
.title-icon .ti-light-cone,
.title-icon .ti-target-ring,
.title-icon .ti-pin-stem,
.title-icon .ti-glass-ring,
.title-icon .ti-glass-handle { transform-origin: center; }

/* Pawn — head bobs gently */
.title-icon .ti-pawn-head { animation: ti-pawn-head 3s ease-in-out infinite; transform-origin: 50% 80%; }
@keyframes ti-pawn-head {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-1.4px); }
}

/* Balance — beam tilts; pans counter-weight */
.balance-icon .ti-beam {
  transform-origin: 16px 9px;
  animation: ti-balance-tilt 4.5s ease-in-out infinite;
}
@keyframes ti-balance-tilt {
  0%, 100% { transform: rotate(-3.5deg); }
  50%      { transform: rotate(3.5deg); }
}
.balance-icon .ti-pan-l { transform-box: fill-box; transform-origin: center top; animation: ti-pan-l 4.5s ease-in-out infinite; }
.balance-icon .ti-pan-r { transform-box: fill-box; transform-origin: center top; animation: ti-pan-r 4.5s ease-in-out infinite; }
@keyframes ti-pan-l { 0%,100% { transform: translateY(0.8px); } 50% { transform: translateY(-0.6px); } }
@keyframes ti-pan-r { 0%,100% { transform: translateY(-0.6px); } 50% { transform: translateY(0.8px); } }

/* Spotlight cone — gentle sweep */
.title-icon .ti-light-cone { animation: ti-cone-sweep 4s ease-in-out infinite; transform-origin: 50% 0%; }
@keyframes ti-cone-sweep {
  0%, 100% { transform: rotate(-8deg); opacity: 0.75; }
  50%      { transform: rotate(8deg);  opacity: 1; }
}

/* Target — slow rotation */
.title-icon .ti-target-ring { animation: ti-spin 9s linear infinite; transform-origin: center; transform-box: fill-box; }
@keyframes ti-spin { to { transform: rotate(360deg); } }

/* Pin — gentle drop */
.title-icon .ti-pin-stem { animation: ti-pin-drop 2.6s ease-in-out infinite; transform-origin: 50% 100%; transform-box: fill-box; }
@keyframes ti-pin-drop {
  0%, 100% { transform: scaleY(1); }
  50%      { transform: scaleY(0.93); }
}

/* Magnifier — sweep */
.title-icon .ti-glass-ring,
.title-icon .ti-glass-handle { animation: ti-glass-move 3.6s ease-in-out infinite; transform-box: fill-box; }
@keyframes ti-glass-move {
  0%, 100% { transform: translateX(0); }
  50%      { transform: translateX(1.4px); }
}

/* Hover: lift + scale */
h1:hover .title-icon,
h2:hover .title-icon,
h3:hover .title-icon {
  opacity: 1;
  transform: translateY(-3px) rotate(-3deg) scale(1.12);
}

@media (prefers-reduced-motion: reduce) {
  .title-icon, .title-icon * { animation: none !important; }
}

/* === legacy hero (kept in case other pages still reference) === */
.hero-inner {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  align-items: center;
  width: 100%;
}
.hero-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 28px;
}
.hero-eyebrow::before {
  content: '';
  width: 32px; height: 1px; background: var(--black);
}
.hero h1 {
  margin-bottom: 28px;
}
.hero h1 .serif-accent {
  font-style: italic;
  font-weight: 400;
  color: var(--grey-500);
}
.hero-ctas { display: flex; gap: 16px; margin-top: 40px; flex-wrap: wrap; }

.hero-3d {
  position: relative;
  aspect-ratio: 1/1;
  width: 100%;
}
.hero-3d canvas { width: 100% !important; height: 100% !important; }

/* ==== Marquee ==== */
.marquee {
  border-top: 1px solid var(--grey-200);
  border-bottom: 1px solid var(--grey-200);
  overflow: hidden;
  padding: 22px 0;
  background: var(--white);
}
.marquee-track {
  display: flex;
  gap: 60px;
  white-space: nowrap;
  animation: marquee 40s linear infinite;
  font-family: var(--font-mono);
  font-size: 14px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
}
.marquee-track span::before {
  content: '✦';
  margin-right: 60px;
  color: var(--grey-500);
}
@keyframes marquee {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

/* ==== Pillars ==== */
.pillars-head {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  align-items: end;
  margin-bottom: 80px;
}
.pillars-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--grey-200);
  border: 1px solid var(--grey-200);
}
.pillar {
  background: var(--white);
  padding: 48px 40px;
  min-height: 420px;
  display: flex;
  flex-direction: column;
  position: relative;
  transition: background 0.4s var(--ease-out);
}
.pillar:hover { background: var(--offwhite); }
.pillar-n {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.3em;
  color: var(--grey-500);
  margin-bottom: 40px;
}
.pillar-icon {
  width: 48px; height: 48px;
  margin-bottom: 32px;
}
.pillar-icon svg { width: 100%; height: 100%; transition: transform 0.5s var(--ease-out); }
.pillar:hover .pillar-icon svg { transform: rotate(-6deg) scale(1.06); }
.pillar-icon svg path,
.pillar-icon svg circle {
  stroke-dasharray: 200;
  stroke-dashoffset: 0;
  transition: stroke-dashoffset 0.6s ease;
}
.pillar:hover .pillar-icon svg path,
.pillar:hover .pillar-icon svg circle {
  animation: pillar-icon-draw 1.2s ease-out;
}
@keyframes pillar-icon-draw {
  0%   { stroke-dashoffset: 200; }
  100% { stroke-dashoffset: 0; }
}
.pillar h3 { margin-bottom: 16px; font-family: var(--font-display); font-size: 28px; font-weight: 600; line-height: 1.1; letter-spacing: -0.01em; }
.pillar p { color: var(--grey-700); font-size: 15px; line-height: 1.6; flex: 1; }
.pillar-viz {
  margin-top: 32px;
  height: 180px;
  border-top: 1px solid var(--grey-200);
  padding-top: 16px;
  position: relative;
}
.pillar-viz svg { width: 100%; height: 100%; overflow: visible; }
.pillar-viz canvas { width: 100%; height: 100%; display: block; }

/* ==== Methodology timeline ==== */
.method {
  background: var(--ink);
  color: var(--white);
  position: relative;
  overflow: hidden;
}
.method .dot-grid { opacity: 0.08; }
.method-head {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  margin-bottom: 80px;
  align-items: end;
}
.method-head .lead { color: var(--grey-300); }
.method-steps {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 0;
  position: relative;
}
.method-steps::before {
  content: '';
  position: absolute;
  left: 0; right: 0;
  top: 42px;
  height: 1px;
  background: var(--grey-700);
}
.m-step {
  position: relative;
  padding-right: 24px;
  padding-top: 0;
}
.m-step-dot {
  width: 14px; height: 14px;
  border-radius: 50%;
  background: var(--white);
  margin-bottom: 32px;
  position: relative;
  z-index: 2;
  margin-top: 36px;
  transition: transform 0.3s var(--ease-out);
}
.m-step:hover .m-step-dot { transform: scale(1.6); }
.m-step-n {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.3em;
  color: var(--grey-500);
  margin-bottom: 12px;
}
.m-step h4 {
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 600;
  margin-bottom: 12px;
  line-height: 1.15;
  letter-spacing: -0.01em;
}
.m-step p {
  font-size: 13px;
  color: var(--grey-300);
  line-height: 1.5;
}
.method-steps--compact .m-step h4 { margin-bottom: 0; }

/* ==== Deliverables tiers ==== */
.tiers-head { text-align: center; margin-bottom: 72px; }
.tiers-head .lead { margin: 24px auto 0; }
.tiers {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.tier {
  border: 1px solid var(--grey-200);
  padding: 40px 32px;
  display: flex;
  flex-direction: column;
  transition: border-color 0.3s var(--ease-out), transform 0.3s var(--ease-out);
  position: relative;
  min-height: 520px;
}
.tier:hover { border-color: var(--black); transform: translateY(-4px); }
.tier-label {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.3em;
  color: var(--grey-500);
  margin-bottom: 20px;
}
.tier-visual {
  height: 140px;
  margin-bottom: 28px;
  position: relative;
  border: 1px solid var(--grey-200);
  overflow: hidden;
  background: var(--offwhite);
}
.tier-visual canvas { width: 100% !important; height: 100% !important; }
.tier h3 {
  font-family: var(--font-display);
  font-size: 26px;
  font-weight: 600;
  margin-bottom: 16px;
  line-height: 1.1;
  letter-spacing: -0.01em;
}
.tier p { color: var(--grey-700); font-size: 15px; line-height: 1.55; margin-bottom: 28px; }
.tier ul { display: flex; flex-direction: column; gap: 10px; margin-top: auto; }
.tier li {
  font-size: 13px;
  color: var(--grey-700);
  padding-left: 22px;
  position: relative;
  line-height: 1.4;
}
.tier li::before {
  content: '';
  position: absolute;
  left: 0; top: 8px;
  width: 10px; height: 1px;
  background: var(--black);
}

/* ==== Impact dashboard ==== */
.impact {
  background: var(--offwhite);
}
.impact-head { margin-bottom: 60px; max-width: 800px; }
.impact-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}
.impact-metric {
  background: var(--white);
  border: 1px solid var(--grey-200);
  padding: 36px 28px;
  min-height: 200px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.impact-metric .label {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.3em;
  color: var(--grey-500);
  margin-bottom: 16px;
  text-transform: uppercase;
}
.impact-metric .value {
  font-family: var(--font-display);
  font-size: clamp(42px, 5vw, 64px);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.03em;
}
.impact-metric .sub {
  font-size: 13px;
  color: var(--grey-500);
  margin-top: 12px;
}
.impact-chart {
  grid-column: span 2;
  background: var(--white);
  border: 1px solid var(--grey-200);
  padding: 32px;
  min-height: 260px;
}
.impact-chart h4 {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.3em;
  color: var(--grey-500);
  text-transform: uppercase;
  margin-bottom: 20px;
}
.impact-chart svg { width: 100%; height: 200px; }

/* ==== Expertises ==== */
.expertises {
  background: var(--white);
}
.expertises-head {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  align-items: end;
  margin-bottom: 80px;
}
.expertise-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  align-items: center;
  padding: 80px 0;
  border-top: 1px solid var(--grey-200);
}
.expertise-row:last-child { border-bottom: 1px solid var(--grey-200); }
.expertise-row.alt { direction: rtl; }
.expertise-row.alt > * { direction: ltr; }
.expertise-content .eyebrow { margin-bottom: 20px; display: block; }
.expertise-content h3 {
  font-family: var(--font-display);
  font-size: clamp(28px, 3vw, 42px);
  font-weight: 600;
  line-height: 1.05;
  letter-spacing: -0.02em;
  margin-bottom: 24px;
}
.expertise-content .body { color: var(--grey-700); margin-bottom: 28px; font-size: 16px; line-height: 1.6; }
.expertise-diff { display: flex; flex-direction: column; gap: 10px; margin-bottom: 36px; }
.expertise-diff li {
  font-size: 14px;
  padding-left: 28px;
  position: relative;
  color: var(--grey-700);
}
.expertise-diff li::before {
  content: '';
  position: absolute;
  left: 0; top: 10px;
  width: 16px; height: 1px;
  background: var(--black);
}
.expertise-quote {
  border-left: 2px solid var(--black);
  padding: 8px 0 8px 24px;
  margin-top: 32px;
  display: flex;
  gap: 20px;
  align-items: flex-start;
}
.quote-portrait {
  width: 56px; height: 56px;
  border-radius: 50%;
  background: var(--grey-200);
  flex-shrink: 0;
  overflow: hidden;
  position: relative;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 20px;
  color: var(--white);
  background: linear-gradient(135deg, var(--grey-700), var(--black));
}
.quote-body p { font-style: italic; font-size: 15px; line-height: 1.5; color: var(--ink); margin-bottom: 10px; }
.quote-body .author { font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--grey-500); font-family: var(--font-mono); }

.expertise-visual {
  position: relative;
  aspect-ratio: 1 / 1;
  background: var(--offwhite);
  border: 1px solid var(--grey-200);
  overflow: hidden;
}
.expertise-visual canvas { width: 100% !important; height: 100% !important; }
.expertise-visual .photo-placeholder {
  position: absolute;
  bottom: 20px; left: 20px;
  width: 88px; height: 88px;
  background: var(--grey-200);
  border: 2px solid var(--white);
  overflow: hidden;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 26px;
  color: var(--white);
  background: linear-gradient(135deg, var(--grey-700), var(--black));
  z-index: 2;
}

/* ==== Territories teaser ==== */
.terr-teaser {
  background: var(--white);
  border-top: 1px solid var(--grey-200);
}
.terr-teaser-grid {
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: 80px;
  align-items: center;
}
.terr-teaser-map { aspect-ratio: 16/10; position: relative; }
.terr-teaser-map svg { width: 100%; height: 100%; }

/* ==== CTA block ==== */
.cta-block {
  padding: clamp(80px, 10vw, 140px) 0;
  text-align: center;
}
.cta-block.dark { background: var(--black); color: var(--white); }
.cta-block.light { background: var(--offwhite); color: var(--black); }
.cta-block h2 { margin-bottom: 24px; max-width: 18ch; margin-left: auto; margin-right: auto; }
.cta-block .lead { color: var(--grey-300); margin: 0 auto 40px; }
.cta-block.light .lead { color: var(--grey-700); }
.cta-block .ctas { display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; }

/* ==== Footer ==== */
.footer {
  background: var(--ink);
  color: var(--white);
  padding: 80px 0 32px;
  position: relative;
  overflow: hidden;
}
.footer .dot-grid { opacity: 0.06; }
.footer-grid {
  display: grid;
  /* Trois blocs sur les pages écrites à la main, quatre sur les pages
     générées, qui ont en plus la colonne « Ressources ». `repeat(auto-fit)`
     ne se mélange pas à une piste en `fr` — la déclaration serait invalide
     et tout retomberait sur une colonne. On compte les blocs. */
  grid-template-columns: 1.3fr 1fr 1fr;
  gap: 40px;
  margin-bottom: 60px;
  position: relative;
  z-index: 2;
}
.footer h4 {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.3em;
  color: var(--grey-500);
  text-transform: uppercase;
  margin-bottom: 20px;
}
.footer p, .footer a { font-size: 14px; color: var(--grey-300); line-height: 1.6; }
.footer a:hover { color: var(--white); }
.footer ul { display: flex; flex-direction: column; gap: 10px; }
.footer-legal {
  border-top: 1px solid var(--grey-700);
  padding-top: 24px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 16px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.15em;
  color: var(--grey-500);
  text-transform: uppercase;
  position: relative; z-index: 2;
}

/* ==== Sub-page hero compact ==== */
.hero-compact {
  padding-top: 180px;
  padding-bottom: 80px;
  position: relative;
  overflow: hidden;
}
.hero-compact .line-grid { opacity: 0.5; }
.hero-compact-inner { position: relative; z-index: 2; max-width: 900px; }
.hero-compact-centered { margin-left: auto; margin-right: auto; text-align: center; }
.hero-compact-centered .lead { margin-left: auto; margin-right: auto; }
/* L'accent d'ACMÉ, repris du hero de l'accueil : un serif italique gris,
   jamais une couleur. Distingue le h1 des h2 de la même page. */
/* Le hub anglais est le pendant de ressources.html : meme echelle de titre
   et meme accent que l'accueil, sur son propre gabarit de hero. */
.hero-hub h1.display { font-size: clamp(38px, 4.9vw, 76px); }
.hero-hub h1 .serif {
  font-family: 'Iowan Old Style', 'Palatino Linotype', Georgia, serif;
  font-style: italic; font-weight: 400; letter-spacing: -.01em;
  color: var(--grey-500);
}
.hero-hub .lead { font-size: clamp(15px, 1.2vw, 19px); line-height: 1.5; max-width: 40ch; }
.hero-compact-centered h1 .serif {
  font-family: 'Iowan Old Style', 'Palatino Linotype', Georgia, serif;
  font-style: italic; font-weight: 400; letter-spacing: -.01em;
  color: var(--grey-500);
}
.hero-compact h1 { margin: 24px 0 24px; font-size: clamp(40px, 6vw, 80px); }

/* ==== Contact page ==== */
.contact-split {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 80px;
  align-items: start;
}
.contact-form {
  background: var(--white);
  border: 1px solid var(--grey-200);
  padding: 48px;
}
.contact-form h2 { margin-bottom: 32px; font-size: 28px; }
.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  margin-bottom: 20px;
}
.form-field { margin-bottom: 20px; }
.form-field label {
  display: block;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--grey-500);
  margin-bottom: 8px;
}
.form-field input, .form-field select, .form-field textarea {
  width: 100%;
  border: none;
  border-bottom: 1px solid var(--grey-300);
  padding: 12px 0;
  font: inherit;
  color: var(--ink);
  background: transparent;
  outline: none;
  transition: border-color 0.3s var(--ease-out);
}
.form-field input:focus, .form-field select:focus, .form-field textarea:focus {
  border-bottom-color: var(--black);
}
.form-field textarea { resize: vertical; min-height: 120px; }
.form-legal { font-size: 12px; color: var(--grey-500); margin-top: 20px; }
.form-feedback {
  margin-top: 16px;
  font-size: 13px;
  font-family: var(--font-mono, 'JetBrains Mono', monospace);
  letter-spacing: 0.02em;
  color: var(--grey-700);
  min-height: 1em;
}
.form-feedback.ok { color: #0a7a3b; }
.form-feedback.err { color: #c42b2b; }

.office-card {
  background: var(--ink);
  color: var(--white);
  padding: 48px;
  position: relative;
  overflow: hidden;
}
.office-card .dot-grid { opacity: 0.08; }
.office-card > * { position: relative; z-index: 2; }
.office-card h3 { font-family: var(--font-display); font-size: 28px; margin-bottom: 24px; letter-spacing: -0.01em; }
.office-row { display: flex; gap: 16px; margin-bottom: 20px; align-items: flex-start; }
.office-row svg { width: 18px; height: 18px; flex-shrink: 0; margin-top: 2px; color: var(--grey-500); }
.office-row p { font-size: 14px; color: var(--grey-300); line-height: 1.5; }
.office-row a { color: var(--white); }
.office-map {
  height: 220px;
  margin-top: 32px;
  position: relative;
  border: 1px solid var(--grey-700);
  overflow: hidden;
  background: var(--black);
}
.office-map svg { width: 100%; height: 100%; }

/* ==== Territories page ==== */
.map-hero {
  padding: 40px 0 120px;
  background: var(--offwhite);
}
.world-map {
  position: relative;
  width: 100%;
  aspect-ratio: 16/9;
  background: var(--white);
  border: 1px solid var(--grey-200);
  overflow: hidden;
}
.world-map svg { width: 100%; height: 100%; }
.map-point {
  cursor: pointer;
  transition: r 0.3s var(--ease-out);
}
.map-point-ring { transform-origin: center; animation: pulseRing 3s ease-out infinite; transform-box: fill-box; }
@keyframes pulseRing {
  0% { transform: scale(0.6); opacity: 1; }
  100% { transform: scale(2.6); opacity: 0; }
}
.map-panel {
  position: absolute;
  top: 24px; right: 24px;
  width: 340px;
  background: var(--white);
  border: 1px solid var(--black);
  padding: 28px;
  opacity: 0;
  transform: translateX(20px);
  pointer-events: none;
  transition: all 0.4s var(--ease-out);
  z-index: 5;
}
.map-panel.active { opacity: 1; transform: translateX(0); pointer-events: auto; }
.map-panel-eyebrow {
  font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.3em;
  color: var(--grey-500); text-transform: uppercase; margin-bottom: 12px;
}
.map-panel h3 { font-family: var(--font-display); font-size: 26px; margin-bottom: 12px; letter-spacing: -0.01em; }
.map-panel .status {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  padding: 4px 10px;
  background: var(--black);
  color: var(--white);
  margin-bottom: 16px;
}
.map-panel .status.partner { background: transparent; color: var(--black); border: 1px solid var(--black); }
.map-panel ul { display: flex; flex-direction: column; gap: 8px; }
.map-panel li { font-size: 13px; color: var(--grey-700); padding-left: 16px; position: relative; }
.map-panel li::before { content: ''; position: absolute; left: 0; top: 9px; width: 8px; height: 1px; background: var(--black); }

.regions-list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--grey-200);
  border: 1px solid var(--grey-200);
  margin-top: 40px;
}
.region-card { background: var(--white); padding: 32px; }
.region-card h4 { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.3em; color: var(--grey-500); text-transform: uppercase; margin-bottom: 16px; }
.region-card .countries { display: flex; flex-direction: column; gap: 12px; }
.region-country { display: flex; justify-content: space-between; align-items: center; padding: 8px 0; border-bottom: 1px solid var(--grey-100); font-size: 14px; }
.region-country:last-child { border-bottom: none; }
.region-country .badge { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.15em; color: var(--grey-500); text-transform: uppercase; }

.capability-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  margin-top: 48px;
}
.cap-card { padding: 36px 28px; border: 1px solid var(--grey-200); background: var(--white); min-height: 220px; }
.cap-card .n { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.3em; color: var(--grey-500); margin-bottom: 24px; }
.cap-card h4 { font-family: var(--font-display); font-size: 20px; font-weight: 600; margin-bottom: 12px; line-height: 1.15; letter-spacing: -0.01em; }
.cap-card p { font-size: 14px; color: var(--grey-700); line-height: 1.5; }

/* ==== References page ==== */
.stats-band {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border-top: 1px solid var(--grey-200);
  border-bottom: 1px solid var(--grey-200);
}
.stats-band .stat {
  padding: 48px 32px;
  border-right: 1px solid var(--grey-200);
  text-align: left;
}
.stats-band .stat:last-child { border-right: none; }
.stats-band .value { font-family: var(--font-display); font-size: clamp(40px, 5vw, 72px); font-weight: 700; line-height: 1; letter-spacing: -0.03em; margin-bottom: 8px; }
.stats-band .label { font-size: 13px; color: var(--grey-500); }

.mobility-pillars {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1px;
  background: var(--grey-200);
  border: 1px solid var(--grey-200);
  margin-top: 60px;
}
.mpill { background: var(--white); padding: 40px; }
.mpill h4 { font-family: var(--font-display); font-size: 22px; font-weight: 600; margin-bottom: 20px; letter-spacing: -0.01em; }
.mpill ul { display: flex; flex-direction: column; gap: 10px; }
.mpill li { font-size: 14px; color: var(--grey-700); padding-left: 22px; position: relative; }
.mpill li::before { content: ''; position: absolute; left: 0; top: 10px; width: 12px; height: 1px; background: var(--black); }

.case-studies {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
  margin-top: 60px;
}
.case-study {
  background: var(--white);
  border: 1px solid var(--grey-200);
  padding: 40px;
  transition: border-color 0.3s var(--ease-out), transform 0.3s var(--ease-out);
  display: flex;
  flex-direction: column;
  min-height: 420px;
}
.case-study:hover { border-color: var(--black); transform: translateY(-4px); }
.case-study .client {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--grey-500);
  margin-bottom: 16px;
}
.case-study h3 { font-family: var(--font-display); font-size: 24px; font-weight: 600; margin-bottom: 20px; line-height: 1.15; letter-spacing: -0.01em; }
.case-study .cs-block { margin-bottom: 16px; }
.case-study .cs-block h5 {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--grey-500);
  margin-bottom: 8px;
}
.case-study .cs-block p { font-size: 14px; color: var(--grey-700); line-height: 1.5; }
.case-study .cs-impact {
  margin-top: auto;
  padding-top: 20px;
  border-top: 1px solid var(--grey-200);
  font-size: 14px;
  color: var(--ink);
  font-weight: 500;
  line-height: 1.4;
}

.quote-feature {
  background: var(--ink);
  color: var(--white);
  padding: clamp(80px, 10vw, 140px) 0;
  position: relative;
  overflow: hidden;
}
.quote-feature .dot-grid { opacity: 0.08; }
.quote-feature-inner { max-width: 1000px; margin: 0 auto; text-align: center; position: relative; z-index: 2; }
.quote-feature blockquote {
  font-family: var(--font-display);
  font-size: clamp(24px, 3vw, 40px);
  font-weight: 500;
  line-height: 1.25;
  letter-spacing: -0.015em;
  margin-bottom: 40px;
  font-style: italic;
}
.quote-feature .author-block {
  display: flex; flex-direction: column; align-items: center; gap: 16px;
}
.quote-feature .author-portrait {
  width: 64px; height: 64px; border-radius: 50%;
  background: linear-gradient(135deg, var(--grey-500), var(--white));
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-display); font-weight: 700; font-size: 22px; color: var(--black);
}
.quote-feature .author {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--grey-300);
}

/* Filtres par secteur au-dessus du mur */
.logo-filters {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin-bottom: 36px;
}
.logo-filter {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 9px 16px;
  border: 1px solid var(--grey-200);
  background: var(--white);
  color: var(--grey-500);
  cursor: pointer;
  border-radius: 2px;
  transition: color 0.25s var(--ease-out), background 0.25s var(--ease-out), border-color 0.25s var(--ease-out);
}
.logo-filter:hover { color: var(--ink); border-color: var(--grey-500); }
.logo-filter.is-active { background: var(--ink); color: #fff; border-color: var(--ink); }

.logos-wall {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border-top: 1px solid var(--grey-200);
  border-left: 1px solid var(--grey-200);
  margin-top: 40px;
}
.logo-slot.is-hidden { display: none; }
.logo-slot {
  background: var(--white);
  padding: 24px 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 96px;
  border-right: 1px solid var(--grey-200);
  border-bottom: 1px solid var(--grey-200);
  transition: background 0.3s var(--ease-out);
}
.logo-slot:hover { background: var(--offwhite); }
.logo-img {
  /* Dimensions posées par logo (inline) pour un poids optique égal ; object-fit = filet anti-déformation */
  display: block;
  max-width: 100%;
  object-fit: contain;
  /* Mur monochrome : désaturé + assombrissement par logo (--b) pour égaliser les pâles… */
  filter: grayscale(1) brightness(var(--b, 1));
  opacity: 0.62;
  transition: filter 0.35s var(--ease-out), opacity 0.35s var(--ease-out);
}
/* …couleur d'origine révélée au survol de la cellule */
.logo-slot:hover .logo-img { filter: grayscale(0); opacity: 1; }

/* ==== Reveal animations ==== */
.reveal { opacity: 0; transform: translateY(30px); transition: opacity 0.8s var(--ease-out), transform 0.8s var(--ease-out); }
.reveal.in { opacity: 1; transform: translateY(0); }

/* ==== Mobile ==== */
@media (max-width: 900px) {
  .nav-menu { display: none; }
  .nav-burger { display: flex; }
  .nav-menu.open {
    display: flex;
    position: absolute;
    top: 100%; left: 0; right: 0;
    background: var(--white);
    flex-direction: column;
    padding: 24px var(--gutter);
    gap: 20px;
    border-bottom: 1px solid var(--grey-200);
  }

  .hero { min-height: auto; padding-top: 130px; }
  .hero-inner { grid-template-columns: 1fr; gap: 40px; }
  .hero-3d { aspect-ratio: 4/3; }

  .pillars-head, .method-head, .expertises-head, .terr-teaser-grid { grid-template-columns: 1fr; gap: 30px; }
  .pillars-grid, .tiers, .impact-grid, .regions-list, .capability-grid, .mobility-pillars, .case-studies { grid-template-columns: 1fr; }
  .logos-wall { grid-template-columns: repeat(3, 1fr); }
  .impact-chart { grid-column: span 1; }
  .method-steps { grid-template-columns: 1fr; gap: 40px; }
  .method-steps::before { display: none; }

  .expertise-row { grid-template-columns: 1fr; padding: 50px 0; }
  .expertise-row.alt { direction: ltr; }

  .contact-split { grid-template-columns: 1fr; gap: 40px; }
  .contact-form, .office-card { padding: 32px 24px; }
  .form-row { grid-template-columns: 1fr; }

  .stats-band { grid-template-columns: repeat(2, 1fr); }
  .stats-band .stat:nth-child(2) { border-right: none; }
  .stats-band .stat:nth-child(-n+2) { border-bottom: 1px solid var(--grey-200); }

  .map-panel { position: static; width: 100%; margin-top: 20px; transform: none; opacity: 1; pointer-events: auto; }

  .footer-grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 560px) {
  .stats-band { grid-template-columns: 1fr; }
  .stats-band .stat { border-right: none; border-bottom: 1px solid var(--grey-200); }
  .footer-grid { grid-template-columns: 1fr; }
  .logos-wall { grid-template-columns: repeat(2, 1fr); }
}

/* ==== Sectors (9 sectors) ==== */
.sectors {
  background: var(--white);
  border-top: 1px solid var(--grey-200);
}
.sectors-head {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  align-items: end;
  margin-bottom: 64px;
}
.sectors-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border-top: 1px solid var(--grey-200);
  border-left: 1px solid var(--grey-200);
}
.sector-card {
  background: var(--white);
  padding: 36px 28px;
  position: relative;
  overflow: hidden;
  min-height: 300px;
  display: flex;
  flex-direction: column;
  border-right: 1px solid var(--grey-200);
  border-bottom: 1px solid var(--grey-200);
  transition: background 0.4s var(--ease-out);
}
.sector-card:hover { background: var(--offwhite); }
.sector-card .sector-icon {
  width: 44px; height: 44px;
  margin-bottom: 20px;
  color: var(--ink);
}
.sector-card .sector-icon svg { width: 100%; height: 100%; transition: transform 0.4s var(--ease-out); }
.sector-card:hover .sector-icon svg { transform: scale(1.12) rotate(4deg); }
.sector-card .sector-icon { animation: sector-icon-float 6s ease-in-out infinite; }
@keyframes sector-icon-float {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-4px); }
}
.sector-card h3 {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -0.01em;
  margin-bottom: 14px;
}
.sector-card p {
  font-size: 14px;
  color: var(--grey-700);
  line-height: 1.55;
  margin-bottom: 20px;
}
.sector-card .sector-clients {
  margin-top: auto;
  padding-top: 16px;
  border-top: 1px solid var(--grey-200);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  color: var(--grey-500);
  line-height: 1.5;
  text-transform: uppercase;
}
.sector-card .sector-clients-label {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.3em;
  color: var(--grey-500);
  margin-bottom: 8px;
  text-transform: uppercase;
}

/* ==== Animated counter ==== */
.counter { font-variant-numeric: tabular-nums; }

/* ==== SVG draw-in animation ==== */
.draw-in path, .draw-in polygon, .draw-in polyline, .draw-in line, .draw-in circle, .draw-in rect {
  stroke-dasharray: 1000;
  stroke-dashoffset: 1000;
  transition: stroke-dashoffset 2.2s var(--ease-out);
}
.draw-in.in path, .draw-in.in polygon, .draw-in.in polyline, .draw-in.in line, .draw-in.in circle, .draw-in.in rect {
  stroke-dashoffset: 0;
}

/* ==== Flow bars (data viz band) ==== */
.flow-bars { display: flex; align-items: flex-end; gap: 6px; height: 80px; }
.flow-bar {
  width: 100%;
  background: var(--ink);
  transform-origin: bottom;
  transform: scaleY(0);
  transition: transform 1.1s var(--ease-out);
}
.flow-bars.in .flow-bar { transform: scaleY(1); }

/* ==== Mobile overrides for sectors ==== */
@media (max-width: 900px) {
  .sectors-head { grid-template-columns: 1fr; gap: 30px; }
  .sectors-grid { grid-template-columns: 1fr; }
}
@media (min-width: 901px) and (max-width: 1100px) {
  .sectors-grid { grid-template-columns: repeat(2, 1fr); }
}

/* ==== Nav right-cluster (lang + cta + burger) ==== */
.nav-right {
  display: flex;
  align-items: center;
  gap: 18px;
}
@media (max-width: 900px) {
  .nav-right .btn { padding: 10px 14px; font-size: 11px; }
  .lang-toggle button,
  .lang-toggle .lang-link { padding: 6px 9px; }
}

/* ==== Hero HUD (minimalist state label) ==== */
.hero-3d { position: relative; }
.hero-hud {
  position: absolute;
  top: 14px;
  left: 14px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 6px 10px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #000;
  border: 1px solid rgba(0,0,0,0.18);
  border-radius: 999px;
  background: rgba(255,255,255,0.78);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  pointer-events: none;
  z-index: 2;
}
.hud-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: #000;
  animation: hud-pulse 1.6s ease-in-out infinite;
}
.hud-label { opacity: 0.75; }
.hud-state {
  font-weight: 600;
  padding-left: 10px;
  border-left: 1px solid rgba(0,0,0,0.18);
}
@keyframes hud-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.3; transform: scale(1.4); }
}
@media (max-width: 900px) {
  .hero-hud { top: 8px; left: 8px; font-size: 9px; padding: 4px 8px; }
}

/* ==== Nos missions (grille de cartes) ==== */
.missions-head { max-width: 760px; margin-bottom: 56px; }
.missions-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
/* Quatre missions dans une grille de trois laissaient une carte seule en
   deuxième ligne : on passe en 2x2, comme les decks les présentent.
   Les navigateurs sans :has() gardent les trois colonnes — le rendu
   d'avant, jamais un rendu cassé.

   ⚠️ La requete de largeur est indispensable. :has() ajoute de la
   specificite, les media queries n'en ajoutent pas : sans elle, cette regle
   ecrase le passage a une colonne sous 900 px et pose deux colonnes de
   226 px dans un conteneur de 335 px. */
@media (min-width: 901px) {
  .missions-grid:has(> .mission-card:nth-child(4):last-child) {
    grid-template-columns: repeat(2, 1fr);
  }
}
.mission-card {
  background: var(--white);
  border: 1px solid var(--grey-200);
  padding: 40px 34px;
  display: flex; flex-direction: column;
  transition: border-color .35s var(--ease-out), box-shadow .4s var(--ease-out), transform .35s var(--ease-out);
}
.mission-card:hover {
  border-color: var(--ink);
  transform: translateY(-4px);
  box-shadow: 0 18px 44px rgba(0, 0, 0, .07);
}
.mission-n {
  font-family: var(--font-mono); font-size: 12px; letter-spacing: .3em;
  color: var(--grey-500); margin-bottom: 30px;
}
.mission-card h3 {
  font-family: var(--font-display); font-size: 24px; font-weight: 600;
  letter-spacing: -.01em; line-height: 1.15; margin-bottom: 16px;
}
.mission-card p { color: var(--grey-500); font-size: 15px; line-height: 1.6; }

/* Deux missions dans une grille de trois laissaient une colonne vide à
   droite : on passe en deux colonnes, comme pour le cas à quatre cartes
   au-dessus. Même garde de largeur, pour la même raison — :has() ajoute de
   la spécificité, les media queries n'en ajoutent pas. */
@media (min-width: 901px) {
  .missions-grid:has(> .mission-card:nth-child(2):last-child) {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* Le bouton se colle au bas de la carte : deux paragraphes de longueurs
   différentes alignent quand même leurs boutons. `align-self` l'empêche de
   s'étirer sur toute la largeur de la carte, que la colonne flex impose. */
.mission-cta { margin-top: auto; align-self: flex-start; }
.mission-card:has(> .mission-cta) p { margin-bottom: 26px; }

@media (max-width: 900px) {
  .missions-grid { grid-template-columns: repeat(2, 1fr); }
  .missions-head { margin-bottom: 40px; }
}
/* Une seule colonne seulement quand deux ne tiennent plus : entre 620 et
   900 px, deux cartes cote a cote valent mieux qu'une colonne etiree. */
@media (max-width: 620px) {
  .missions-grid { grid-template-columns: 1fr; }
}

/* ==== Page Qui sommes-nous ==== */
.about-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 48px; }
.about-block-label { font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--ink); margin-bottom: 20px; }
.about-block p { color: var(--grey-700); font-size: 15.5px; line-height: 1.65; }

.about-quote-band { padding: clamp(70px, 9vw, 130px) 0; border-top: 1px solid var(--grey-200); border-bottom: 1px solid var(--grey-200); }
.about-quote-band .container { margin: 0 auto; }
.about-quote { font-family: var(--font-display); font-weight: 500; font-size: clamp(26px, 3.4vw, 46px); line-height: 1.15; letter-spacing: -0.02em; }
.about-quote-author { font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--grey-500); margin-top: 28px; }

.team-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: 56px; }
.team-card { background: var(--white); border: 1px solid var(--grey-200); padding: 32px 28px; display: flex; flex-direction: column; transition: border-color .35s var(--ease-out), transform .35s var(--ease-out); }
.team-card:hover { border-color: var(--ink); transform: translateY(-4px); }
.team-portrait { width: 54px; height: 54px; border-radius: 50%; background: var(--ink); color: #fff; display: flex; align-items: center; justify-content: center; font-family: var(--font-display); font-weight: 600; font-size: 18px; letter-spacing: 0.02em; margin-bottom: 22px; }
.team-card h3 { font-family: var(--font-display); font-size: 21px; font-weight: 600; letter-spacing: -0.01em; margin-bottom: 4px; }
.team-role { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--grey-500); margin-bottom: 18px; }
.team-card p { color: var(--grey-500); font-size: 14px; line-height: 1.6; }

.team-sub { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; margin-top: 64px; padding-top: 56px; border-top: 1px solid var(--grey-200); }
.team-mini { display: flex; flex-direction: column; gap: 20px; }
.team-mini li { display: flex; align-items: center; gap: 16px; }
.team-mini-portrait { flex: none; width: 42px; height: 42px; border-radius: 50%; border: 1px solid var(--grey-300); display: flex; align-items: center; justify-content: center; font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.05em; color: var(--grey-700); }
.team-mini strong { display: block; font-family: var(--font-display); font-weight: 600; font-size: 16px; }
.team-mini em { font-style: normal; font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--grey-500); }
.team-mini-bio li { align-items: flex-start; }
.team-mini-bio .team-mini-portrait { margin-top: 2px; }
.team-mini-bio p { margin-top: 8px; color: var(--grey-500); font-size: 13.5px; line-height: 1.6; }

@media (max-width: 900px) {
  .about-grid { grid-template-columns: 1fr; gap: 36px; }
  .team-grid { grid-template-columns: 1fr; }
  .team-sub { grid-template-columns: 1fr; gap: 40px; }
}

/* Bouton "Découvrir" des cartes secteurs */
.sector-cta { margin-top: auto; align-self: flex-start; padding: 12px 22px; font-size: 11px; }

/* ==== Bannière de logos coulissants (pages secteur) ==== */
.logo-marquee {
  overflow: hidden;
  border-top: 1px solid var(--grey-200);
  border-bottom: 1px solid var(--grey-200);
  padding: 26px 0;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}
.logo-marquee-track { display: flex; align-items: center; width: max-content; animation: logo-scroll 60s linear infinite; }
.logo-marquee:hover .logo-marquee-track { animation-play-state: paused; }
.logo-marquee-img {
  height: 32px; width: auto; object-fit: contain; margin-right: 64px; flex: none;
  filter: grayscale(1) brightness(var(--b, 1)); opacity: 0.6;
}
@keyframes logo-scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .logo-marquee-track { animation: none; } }

/* ==== Carrousel logos 4 par 4 (pages secteur) ==== */
.logo-quad { border-top: 1px solid var(--grey-200); border-bottom: 1px solid var(--grey-200); padding: 30px 0; }
.logo-quad-row { display: grid; grid-template-columns: repeat(4, 1fr); align-items: center; gap: 40px; transition: opacity .4s var(--ease-out); }
.logo-quad-row.is-out { opacity: 0; }
.logo-quad-slot { height: 36px; width: auto; max-width: 100%; justify-self: center; object-fit: contain; filter: grayscale(1) brightness(var(--b, 1)); opacity: .6; }
@media (max-width: 700px) { .logo-quad-row { grid-template-columns: repeat(2, 1fr); gap: 28px 24px; } }

/* ==== Menu déroulant "Secteurs" ==== */
.nav-dd { position: relative; display: flex; align-items: center; }
.nav-dd-caret { display: inline-block; margin-left: 6px; font-size: 9px; transform: translateY(-1px); transition: transform .25s var(--ease-out); }
.nav-dd:hover .nav-dd-caret { transform: translateY(-1px) rotate(180deg); }
.nav-dd-menu {
  position: absolute; top: 100%; left: 0; margin-top: 14px;
  min-width: 250px;
  background: var(--white);
  border: 1px solid var(--grey-200);
  box-shadow: 0 16px 40px rgba(0, 0, 0, .09);
  padding: 8px;
  display: flex; flex-direction: column;
  opacity: 0; visibility: hidden; transform: translateY(6px);
  transition: opacity .22s var(--ease-out), transform .22s var(--ease-out), visibility .22s;
  z-index: 130;
}
.nav-dd-menu::before { content: ''; position: absolute; left: 0; right: 0; top: -16px; height: 16px; }
.nav-dd:hover .nav-dd-menu, .nav-dd:focus-within .nav-dd-menu { opacity: 1; visibility: visible; transform: translateY(0); }
.nav-dd-menu a {
  display: block; padding: 11px 14px;
  font-size: 12px; letter-spacing: .03em; text-transform: none; font-weight: 500;
  color: var(--grey-700); white-space: nowrap;
  transition: background .2s var(--ease-out), color .2s var(--ease-out);
}
.nav-dd-menu a::after { display: none; }
.nav-dd-menu a:hover { background: var(--offwhite); color: var(--ink); }

/* Un en-tête de groupe, pas un lien : « Nos études » ouvre le sous-menu
   au survol et au clavier, mais ne mène nulle part. Bouton plutôt que
   <a> sans href — seul le bouton reste atteignable au clavier. */
.nav-dd-trigger.is-static {
  display: inline-flex; align-items: center;
  font-family: inherit; font-size: 13px; font-weight: 500;
  letter-spacing: 0.08em; text-transform: uppercase;
  color: inherit; text-align: left;
  background: none; border: 0; padding: 6px 0;
  cursor: default;
}

@media (max-width: 900px) {
  .nav-dd { flex-direction: column; align-items: flex-start; }
  .nav-dd-caret { display: none; }
  .nav-dd-menu {
    position: static; opacity: 1; visibility: visible; transform: none;
    margin: 10px 0 0; border: none; box-shadow: none; padding: 0 0 0 14px; min-width: 0;
  }
  .nav-dd-menu::before { display: none; }
  .nav-dd-menu a { padding: 8px 0; color: var(--grey-500); }
}

/* ==== Affiliation ESOMAR ==== */
.esomar-badge { display: flex; align-items: center; justify-content: center; gap: 16px; margin-top: 40px; }
.esomar-badge span { font-family: var(--font-mono); font-size: 11px; letter-spacing: .22em; text-transform: uppercase; color: var(--grey-500); }
.esomar-badge img { height: 26px; width: auto; filter: grayscale(1); opacity: .7; }
.footer-esomar { display: flex; align-items: center; gap: 14px; margin: 8px 0 28px; }
.footer-esomar span { font-family: var(--font-mono); font-size: 10px; letter-spacing: .2em; text-transform: uppercase; color: rgba(255,255,255,.55); }
.footer-esomar img { height: 22px; width: auto; filter: brightness(0) invert(1); opacity: .85; }

/* ==== Teaser Études & IA (home) ==== */
.ia-split { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-top: 8px; }
.ia-col { border: 1px solid var(--grey-200); padding: 32px 30px; }
.ia-col-label { font-family: var(--font-mono); font-size: 12px; letter-spacing: .2em; text-transform: uppercase; color: var(--ink); margin-bottom: 22px; }
.ia-col ul { display: flex; flex-direction: column; gap: 14px; }
.ia-col li { position: relative; padding-left: 22px; color: var(--grey-700); font-size: 15px; line-height: 1.5; }
.ia-col li::before { content: ''; position: absolute; left: 0; top: 11px; width: 10px; height: 1px; background: var(--grey-500); }
@media (max-width: 900px) { .ia-split { grid-template-columns: 1fr; } }

/* ==== Bandeau cookies ====
   Encart d'information, pas un mur de consentement : le site ne dépose
   aucun traceur, il n'y a donc rien à autoriser ni à refuser. Il dit ce
   qui part vers des tiers, et se retire dès qu'on l'a lu. */
.cookie-note {
  position: fixed; z-index: 200;
  left: var(--gutter); bottom: var(--gutter);
  width: min(420px, calc(100vw - 2 * var(--gutter)));
  background: var(--white);
  border: 1px solid var(--grey-200);
  box-shadow: 0 16px 40px rgba(0, 0, 0, .12);
  padding: 24px;
  opacity: 0; transform: translateY(12px);
  transition: opacity .45s var(--ease-out), transform .45s var(--ease-out);
}
.cookie-note.is-in { opacity: 1; transform: translateY(0); }
.cookie-note-eyebrow {
  font-family: var(--font-mono);
  font-size: 10px; letter-spacing: .22em; text-transform: uppercase;
  color: var(--grey-500);
}
.cookie-note h2 {
  font-family: var(--font-display);
  font-size: 16px; font-weight: 700; line-height: 1.25;
  margin: 8px 0 0; color: var(--ink);
}
.cookie-note p {
  margin: 10px 0 0;
  font-size: 13px; line-height: 1.55; color: var(--grey-700);
}
.cookie-note-actions { margin-top: 18px; display: flex; flex-wrap: wrap; gap: 10px; }
.cookie-note-actions .btn { flex: 1 1 auto; justify-content: center; }
.cookie-note .btn { padding: 12px 22px; }
.cookie-note-close {
  position: absolute; top: 10px; right: 10px;
  width: 32px; height: 32px;
  display: flex; align-items: center; justify-content: center;
  background: none; border: 0; padding: 0;
  color: var(--grey-500); font-size: 18px; line-height: 1;
  cursor: pointer;
  transition: color .2s var(--ease-out);
}
.cookie-note-close:hover { color: var(--ink); }
@media (max-width: 640px) {
  .cookie-note { padding: 20px; }
}

/* Les deux liens légaux du pied de page, à droite de la ligne © */
.footer-legal-links { display: flex; gap: 20px; flex-wrap: wrap; }
.footer-legal-links a { color: inherit; }
.footer-legal-links a:hover { color: var(--white); }
.cookie-note-lien { margin-top: 10px; }
.cookie-note-lien a {
  font-size: 12.5px; color: var(--grey-700);
  text-decoration: underline; text-underline-offset: 3px;
}
.cookie-note-lien a:hover { color: var(--ink); }

/* Le lien LinkedIn du pied de page — une tuile carrée, pas un logo posé */
.footer-social {
  display: inline-flex; align-items: center; justify-content: center;
  width: 38px; height: 38px; margin-top: 20px;
  border: 1px solid var(--grey-700);
  color: rgba(255, 255, 255, .7);
  transition: color .25s var(--ease-out), border-color .25s var(--ease-out);
}
.footer-social:hover { color: var(--white); border-color: var(--white); }

/* Le pied des pages générées porte un bloc de plus (« Ressources ») : il
   prend une quatrième colonne, mais seulement au-dessus des paliers mobiles,
   qui rangent le pied sur une ou deux colonnes quel que soit le nombre. */
@media (min-width: 901px) {
  .footer-grid:has(> div:nth-child(4)) { grid-template-columns: 1.3fr 1fr 1fr 1fr; }
}

/* ==== Page « Nos études sur mesure » ====
   Huit méthodes, chacune en quatre temps : accroche, corps, bénéfice,
   relance. Le numéro tient une colonne à gauche, comme une numérotation de
   sommaire — sous 900 px il repasse au-dessus du titre. */
.sm-blocs { margin-top: 8px; }
.sm-bloc {
  display: grid; grid-template-columns: 120px 1fr; gap: 0 32px;
  padding: 44px 0; border-top: 1px solid var(--grey-200);
}
.sm-bloc:last-child { border-bottom: 1px solid var(--grey-200); }
.sm-bloc-n {
  font-family: var(--font-mono); font-size: 12px; letter-spacing: .3em;
  color: var(--grey-500); padding-top: 6px;
}
.sm-bloc-txt { max-width: 760px; }
.sm-bloc-txt h3 {
  font-family: var(--font-display); font-size: 26px; font-weight: 600;
  letter-spacing: -.01em; line-height: 1.15; margin-bottom: 18px;
}
/* Le bloc « concept & prix » porte deux volets sous un même titre. */
.sm-bloc-txt h4 {
  font-family: var(--font-display); font-size: 18px; font-weight: 600;
  margin: 34px 0 12px;
}
.sm-bloc-txt h4:first-of-type { margin-top: 4px; }
.sm-bloc-txt p { color: var(--grey-500); font-size: 15.5px; line-height: 1.65; }
.sm-bloc-txt p + p { margin-top: 14px; }
.sm-lead { color: var(--ink) !important; font-size: 17px !important; }
/* Le bénéfice est ce que le lecteur vient chercher : un filet le détache du
   corps sans en faire un encadré. */
.sm-gain {
  margin-top: 18px !important; padding-left: 16px;
  border-left: 2px solid var(--ink);
  color: var(--grey-700) !important;
}
.sm-cta {
  display: inline-flex; align-items: center; gap: 10px; margin-top: 24px;
  font-family: var(--font-mono); font-size: 12px; letter-spacing: .16em;
  text-transform: uppercase; color: var(--ink); text-decoration: none;
  border-bottom: 1px solid var(--grey-300); padding-bottom: 6px;
  transition: border-color .3s var(--ease-out);
}
.sm-cta:hover { border-color: var(--ink); }
.sm-cta .arrow { transition: transform .3s var(--ease-out); }
.sm-cta:hover .arrow { transform: translateX(4px); }

@media (max-width: 900px) {
  .sm-bloc { grid-template-columns: 1fr; gap: 0; padding: 34px 0; }
  .sm-bloc-n { padding-top: 0; margin-bottom: 14px; }
  .sm-bloc-txt h3 { font-size: 22px; }
}