/* ========================================
   Initia v5 — Shared Styles
   ======================================== */

/* Brand Palette */
:root {
  --beige: #e7e5d2;
  --moss: #c4bfa9;
  --sky: #badbee;
  --black: #000000;
  --mint: #cfe1d4;
  --lavender: #d1ccf0;

  /* Tons dérivés — utilisés par les variantes du footer (démo). */
  --sky-dark: #5b9bc6;
  --sky-light: #f7fbfd;
  --mint-deep: #8db59a;
  --moss-deep: #a39c80;

  /* Design tokens — à adopter progressivement dans la codebase.
     Règle : toute valeur "magique" en px/rem qui se répète ≥ 3 fois
     devrait pointer vers l'un de ces tokens. */
  --space-xs: 8px;
  --space-sm: 16px;
  --space-md: 24px;
  --space-lg: 48px;
  --space-xl: 96px;
  --space-xxl: 140px;

  --text-xs: 0.8rem; /* 12.8px — micro labels, eyebrows */
  --text-sm: 0.9rem;
  --text-base: 1rem;
  --text-lg: 1.2rem;

  --radius-sm: 6px;
  --radius-md: 16px;
  --radius-lg: 24px;

  --z-nav: 100;
  --z-modal: 200;

  --breakpoint-sm: 480px;
  --breakpoint-md: 768px;
  --breakpoint-lg: 1024px;
}

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

/* Base */
html {
  scroll-behavior: smooth;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  font-family: "Funnel Sans", sans-serif;
  color: #111;
  background: #fff;
  line-height: 1.6;
}

a {
  text-decoration: none;
  color: inherit;
}

/* ========================================
   Navigation
   ======================================== */

.nav {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 100;
  background: transparent;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 32px;
}

/* Logo */
.nav-logo {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  background: rgba(255, 255, 255, 0.5);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-radius: 6px;
  padding: 7px 14px;
}

.nav-logo-img {
  height: 20px;
  width: auto;
}

/* Nav links (pills) */
.nav-links {
  display: flex;
  gap: 6px;
  align-items: center;
}

.nav-pill {
  background: rgba(231, 229, 210, 0.5);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-radius: 6px;
  padding: 7px 14px;
  font-family: "JetBrains Mono", monospace;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #444;
  transition:
    background 0.2s,
    color 0.2s,
    border-color 0.2s;
  border: 1.5px solid transparent;
  cursor: pointer;
}

.nav-pill:hover {
  background: rgba(231, 229, 210, 0.7);
  color: #222;
}

.nav-pill.active {
  background: rgba(255, 255, 255, 0.7);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-color: #111;
  color: #111;
  font-weight: 600;
}

/* CTA button — color cycling */
.nav-cta {
  flex-shrink: 0;
  border: 1.5px solid transparent;
  border-radius: 6px;
  padding: 8px 18px;
  font-family: "JetBrains Mono", monospace;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #111;
  cursor: pointer;
  background: var(--mint);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  animation: cta-cycle 9s ease-in-out infinite;
}

.nav-cta:hover {
  opacity: 0.85;
}

@keyframes cta-cycle {
  0%,
  100% {
    background-color: rgba(207, 225, 212, 0.7);
  }
  33% {
    background-color: rgba(186, 219, 238, 0.7);
  }
  66% {
    background-color: rgba(209, 204, 240, 0.7);
  }
}

/* Hamburger (hidden on desktop) */
.nav-hamburger {
  display: none;
  background: none;
  border: none;
  cursor: pointer;
  color: #111;
  padding: 4px;
}

.nav-hamburger .close-icon {
  display: none;
}

.nav-hamburger.open .hamburger-icon {
  display: none;
}

.nav-hamburger.open .close-icon {
  display: block;
}

/* Mobile menu overlay */
.mobile-menu {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  background: #fff;
  z-index: 99;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 32px;
  padding: 80px 32px 32px;
}

.mobile-menu.open {
  display: flex;
}

.mobile-menu-links {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}

.mobile-link {
  font-family: "JetBrains Mono", monospace;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #444;
  padding: 8px 16px;
  border-radius: 6px;
  transition: color 0.2s;
}

.mobile-link:hover,
.mobile-link.active {
  color: #111;
  font-weight: 600;
}

.mobile-link.active {
  background: #fff;
  border: 1.5px solid #111;
}

.mobile-cta {
  border: 1.5px solid transparent;
  border-radius: 6px;
  padding: 12px 24px;
  font-family: "JetBrains Mono", monospace;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #111;
  margin-top: 16px;
  background: var(--mint);
  animation: cta-cycle 9s ease-in-out infinite;
}

.mobile-cta:hover {
  opacity: 0.85;
}

/* ========================================
   Hero
   ======================================== */

.hero {
  position: relative;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  min-height: 90vh;
  padding: 120px 64px 120px
    clamp(48px, calc((100vw - 1400px) / 2 + 64px), 320px);
  overflow: hidden;
}

.hero-video-wrap {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.hero-video-wrap::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(
      90deg,
      rgba(255, 255, 255, 0.92) 0%,
      rgba(255, 255, 255, 0.6) 35%,
      rgba(255, 255, 255, 0) 55%
    ),
    linear-gradient(
      180deg,
      rgba(255, 255, 255, 0.3) 0%,
      rgba(255, 255, 255, 0) 30%
    ),
    linear-gradient(
      180deg,
      rgba(255, 255, 255, 0) 55%,
      rgba(255, 255, 255, 0.85) 85%,
      #fff 100%
    );
  pointer-events: none;
}

.hero-video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.hero-content {
  position: relative;
  z-index: 2;
  max-width: 560px;
  text-align: left;
}

.hero-title {
  font-family: "Funnel Display", sans-serif;
  font-size: clamp(2.2rem, 5vw, 3.75rem);
  font-weight: 600;
  color: #111;
  line-height: 1.1;
  letter-spacing: -0.02em;
  text-align: left;
}

.hero-subtitle {
  font-family: "Funnel Sans", sans-serif;
  font-size: clamp(1rem, 1.6vw, 1.25rem);
  font-weight: 400;
  color: #555;
  margin-top: 20px;
  line-height: 1.5;
  text-align: left;
}

/* ========================================
   Hero animation — H1 typé + indicateur "Analyse en cours" (5 variantes)
   ======================================== */

/* Couleurs animations (légèrement plus saturées que la palette pastel
   pour rester lisibles sur fond crème). Scope local au hero. */
.hero[data-variant] {
  --c-lavender: #9b8ee8;
  --c-sky: #7fbfe5;
  --c-mint: #8bc299;
  --c-moss: #a19b82;
}

/* Chevron Initia utilitaire — réutilise le mask data URI (browser-proof, fill=white).
   Coloré via background-color, taillé via width/height par le contexte. */
.ic-chevron {
  display: inline-block;
  background-color: var(--mint);
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 131 131'><path fill='white' d='M54.4511 21.094C54.4511 23.8216 56.6623 26.0328 59.3899 26.0328H73.5093C76.2369 26.0328 78.4481 28.2439 78.4481 30.9715V47.0639C78.4481 49.7915 80.6592 52.0027 83.3868 52.0027H97.5063C100.234 52.0027 102.445 54.2138 102.445 56.9414V73.5541C102.445 76.2817 100.234 78.4928 97.5063 78.4928H83.3868C80.6592 78.4928 78.4481 80.704 78.4481 83.4316V99.4255C78.4481 102.153 76.2369 104.364 73.5093 104.364H59.3899C56.6623 104.364 54.4511 106.575 54.4511 109.303V125.355C54.4511 128.083 52.2399 130.294 49.5123 130.294H32.8997C30.1721 130.294 27.9609 128.083 27.9609 125.355V108.743C27.9609 106.015 30.1721 103.804 32.8997 103.804H47.0187C49.7464 103.804 51.9575 101.593 51.9575 98.8651V82.8129C51.9575 80.0853 54.1687 77.8741 56.8963 77.8741H71.0157C73.7433 77.8741 75.9545 75.663 75.9545 72.9354V57.4617C75.9545 54.7341 73.7433 52.5229 71.0157 52.5229H56.8963C54.1687 52.5229 51.9575 50.3118 51.9575 47.5842V31.5319C51.9575 28.8043 49.7464 26.5932 47.0187 26.5932H32.8997C30.1721 26.5932 27.9609 24.382 27.9609 21.6544V5.04179C27.9609 2.31419 30.1721 0.103027 32.8997 0.103027H49.5123C52.2399 0.103027 54.4511 2.31419 54.4511 5.04179V21.094Z'/></svg>")
    center / contain no-repeat;
  mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 131 131'><path fill='white' d='M54.4511 21.094C54.4511 23.8216 56.6623 26.0328 59.3899 26.0328H73.5093C76.2369 26.0328 78.4481 28.2439 78.4481 30.9715V47.0639C78.4481 49.7915 80.6592 52.0027 83.3868 52.0027H97.5063C100.234 52.0027 102.445 54.2138 102.445 56.9414V73.5541C102.445 76.2817 100.234 78.4928 97.5063 78.4928H83.3868C80.6592 78.4928 78.4481 80.704 78.4481 83.4316V99.4255C78.4481 102.153 76.2369 104.364 73.5093 104.364H59.3899C56.6623 104.364 54.4511 106.575 54.4511 109.303V125.355C54.4511 128.083 52.2399 130.294 49.5123 130.294H32.8997C30.1721 130.294 27.9609 128.083 27.9609 125.355V108.743C27.9609 106.015 30.1721 103.804 32.8997 103.804H47.0187C49.7464 103.804 51.9575 101.593 51.9575 98.8651V82.8129C51.9575 80.0853 54.1687 77.8741 56.8963 77.8741H71.0157C73.7433 77.8741 75.9545 75.663 75.9545 72.9354V57.4617C75.9545 54.7341 73.7433 52.5229 71.0157 52.5229H56.8963C54.1687 52.5229 51.9575 50.3118 51.9575 47.5842V31.5319C51.9575 28.8043 49.7464 26.5932 47.0187 26.5932H32.8997C30.1721 26.5932 27.9609 24.382 27.9609 21.6544V5.04179C27.9609 2.31419 30.1721 0.103027 32.8997 0.103027H49.5123C52.2399 0.103027 54.4511 2.31419 54.4511 5.04179V21.094Z'/></svg>")
    center / contain no-repeat;
  flex-shrink: 0;
}

/* Le hero animé prend plus de largeur que le hero statique pour accommoder
   les questions plus longues. */
.hero[data-variant] .hero-content {
  max-width: 720px;
}

/* H1 typé : flex row avec chevron Initia + texte + caret */
.hero-typed {
  font-family: "Funnel Display", sans-serif;
  font-size: clamp(2rem, 4.6vw, 3.5rem);
  font-weight: 600;
  color: #111;
  line-height: 1.15;
  letter-spacing: -0.02em;
  min-height: 4.4em; /* réserve l'espace pour 3 lignes, évite le saut */
  display: flex;
  align-items: flex-start;
  gap: 0.25em;
  text-align: left;
}
/* Wrapper du chevron initial : permet de positionner une barre underscore
   absolue par dessus pour la variante A (prompt complet ">_"). */
.hero-chev-prompt {
  display: inline-block;
  position: relative;
  width: 0.85em;
  height: 0.85em;
  margin-top: 0.18em;
  flex-shrink: 0;
}
.hero-chevron-init {
  width: 100%;
  height: 100%;
  background-color: var(--c-mint);
  opacity: 0.95;
}
/* Barre du prompt (underscore). Hidden par défaut, visible seulement
   quand variant=A. Les coordonnées correspondent au rect de prompt.svg
   (viewBox 43x35 : x=24.96 (58%), y=28.77 (82%), w=17.95 (42%), h=4.69 (13%)). */
.hero-prompt-bar {
  display: none;
}
.hero[data-variant="a"] .hero-chevron-init {
  background-color: #111;
  opacity: 1;
}
.hero[data-variant="a"] .hero-prompt-bar {
  display: block;
  position: absolute;
  left: 58%;
  top: 82%;
  width: 42%;
  height: 13%;
  background: #111;
  border-radius: 1px;
  /* Clignote 2× (visible→invisible→visible→invisible→visible),
     puis reste à la dernière keyframe (opacity 1). Steps pour un blink discret. */
  animation: hero-bar-blink 0.4s steps(1, end) 2;
  animation-fill-mode: forwards;
}
@keyframes hero-bar-blink {
  0% {
    opacity: 1;
  }
  50% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
.hero-question-wrap {
  flex: 1;
}
.hero-caret {
  display: inline-block;
  width: 0.55ch;
  margin-left: 0.02em;
  color: #111;
  animation: hero-caret-blink 1.05s steps(1, end) infinite;
}
@keyframes hero-caret-blink {
  0%,
  49% {
    opacity: 1;
  }
  50%,
  100% {
    opacity: 0;
  }
}
.hero-typed.is-thinking .hero-caret {
  display: none;
}

/* Ligne "Analyse en cours" sous le H1 */
.hero-thinking {
  margin-top: 28px;
  display: flex;
  align-items: center;
  gap: 14px;
  opacity: 0;
  transform: translateY(6px);
  transition:
    opacity 0.45s ease,
    transform 0.45s ease;
}
.hero-thinking.is-visible {
  opacity: 1;
  transform: translateY(0);
}
.hero-thinking__label {
  font-family: "Funnel Sans", sans-serif;
  font-size: clamp(1rem, 1.4vw, 1.15rem);
  color: #555;
}
.hero-thinking__label::after {
  content: "";
  animation: hero-th-dots 1.4s steps(4, end) infinite;
  display: inline-block;
  min-width: 1.5ch;
}
@keyframes hero-th-dots {
  0% {
    content: "";
  }
  25% {
    content: ".";
  }
  50% {
    content: "..";
  }
  75% {
    content: "...";
  }
  100% {
    content: "";
  }
}

/* Indicateurs : 5 variantes, une seule visible selon data-variant sur .hero */
.hi {
  display: none;
  width: 44px;
  height: 44px;
  flex-shrink: 0;
  position: relative;
  align-items: center;
  justify-content: center;
}
.hero[data-variant="a"] .hi[data-v="a"],
.hero[data-variant="b"] .hi[data-v="b"],
.hero[data-variant="c"] .hi[data-v="c"],
.hero[data-variant="d"] .hi[data-v="d"],
.hero[data-variant="e"] .hi[data-v="e"] {
  display: flex;
}

/* === Variant A — Cycle 7 formes pixelisées dérivées du chevron ============
   Chaque forme rend en SVG inline avec fill=currentColor, ce qui permet
   de la teinter via la propriété 'color'. Les 7 formes se cross-fadent
   en cycle continu (9.8s = 7 × 1.4s par forme). Stagger via animation-delay
   sur :nth-child. */
.hi-a .ai-shape {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  color: var(--c-mint);
  opacity: 0;
  animation: hi-a-cycle 9.8s ease-in-out infinite;
}
.hi-a .ai-shape:nth-child(1) {
  animation-delay: 0s;
}
.hi-a .ai-shape:nth-child(2) {
  animation-delay: 1.4s;
}
.hi-a .ai-shape:nth-child(3) {
  animation-delay: 2.8s;
}
.hi-a .ai-shape:nth-child(4) {
  animation-delay: 4.2s;
}
.hi-a .ai-shape:nth-child(5) {
  animation-delay: 5.6s;
}
.hi-a .ai-shape:nth-child(6) {
  animation-delay: 7s;
}
.hi-a .ai-shape:nth-child(7) {
  animation-delay: 8.4s;
}
@keyframes hi-a-cycle {
  0% {
    opacity: 0;
  }
  5% {
    opacity: 1;
  } /* fade IN sur 0.49s */
  15% {
    opacity: 1;
  } /* HOLD ~0.98s */
  20% {
    opacity: 0;
  } /* fade OUT sur 0.49s — overlap crossfade avec la suivante */
  100% {
    opacity: 0;
  }
}

/* === Variant B — Echo Trio (3 chevrons en wave) =========================== */
.hi-b {
  width: 78px;
  gap: 4px;
}
.hi-b .ic-chevron {
  width: 22px;
  height: 22px;
  animation: hi-echo-wave 1.2s ease-in-out infinite;
}
.hi-b .ic-chevron:nth-child(1) {
  animation-delay: 0s;
  background-color: var(--c-lavender);
}
.hi-b .ic-chevron:nth-child(2) {
  animation-delay: 0.15s;
  background-color: var(--c-sky);
}
.hi-b .ic-chevron:nth-child(3) {
  animation-delay: 0.3s;
  background-color: var(--c-mint);
}
@keyframes hi-echo-wave {
  0%,
  100% {
    transform: translateX(0) scale(1);
    opacity: 0.4;
  }
  50% {
    transform: translateX(4px) scale(1.08);
    opacity: 1;
  }
}

/* === Variant C — Chevron Build (3 modules en escalier) ====================
   Le chevron principal du H1 passe en NOIR (matche le texte). Les 3 modules
   du monogramme s'allument bloc par bloc (bottom-left → top-right), tiennent
   ensemble, puis s'éteignent bloc par bloc dans le même ordre. */
.hero[data-variant="c"] .hero-chevron-init {
  background-color: #111;
  opacity: 1;
}
.hi-c .step {
  position: absolute;
  width: 16px;
  height: 16px;
  border-radius: 4px;
  background: var(--c-mint);
  opacity: 0;
  transform: scale(0.7);
  animation: hi-c-build 2.4s ease-in-out infinite;
}
.hi-c .step-1 {
  left: 4px;
  bottom: 4px;
  animation-delay: 0s;
}
.hi-c .step-2 {
  left: 14px;
  bottom: 14px;
  animation-delay: 0.18s;
}
.hi-c .step-3 {
  left: 24px;
  bottom: 24px;
  animation-delay: 0.36s;
}
@keyframes hi-c-build {
  0% {
    opacity: 0;
    transform: scale(0.7);
  }
  10% {
    opacity: 1;
    transform: scale(1);
  } /* fade IN */
  50% {
    opacity: 1;
    transform: scale(1);
  } /* HOLD */
  60% {
    opacity: 0;
    transform: scale(0.7);
  } /* fade OUT */
  100% {
    opacity: 0;
    transform: scale(0.7);
  }
}

/* === Variant D — Halo conique seul (les couleurs qui tournent) ===========
   Le chevron principal du H1 passe en noir. Pas de chevron au centre du halo
   — juste le gradient de couleurs qui bouge. */
.hero[data-variant="d"] .hero-chevron-init {
  background-color: #111;
  opacity: 1;
}
.hi-d .halo {
  position: absolute;
  inset: -6px;
  border-radius: 50%;
  background: conic-gradient(
    from 0deg,
    var(--c-lavender),
    var(--c-sky),
    var(--c-mint),
    var(--c-lavender)
  );
  filter: blur(8px);
  opacity: 0.85;
  animation: hi-halo-spin 3.5s linear infinite;
}
@keyframes hi-halo-spin {
  to {
    transform: rotate(360deg);
  }
}

/* === Variant E — Build Stack (3 modules en escalier) ====================== */
.hi-e .step {
  position: absolute;
  width: 14px;
  height: 14px;
  border-radius: 3px;
  opacity: 0;
  transform: scale(0.7);
  animation: hi-step-build 1.6s ease-in-out infinite;
}
.hi-e .step-1 {
  left: 4px;
  bottom: 4px;
  background: var(--c-mint);
  animation-delay: 0s;
}
.hi-e .step-2 {
  left: 15px;
  bottom: 15px;
  background: var(--c-sky);
  animation-delay: 0.18s;
}
.hi-e .step-3 {
  left: 26px;
  bottom: 26px;
  background: var(--c-lavender);
  animation-delay: 0.36s;
}
@keyframes hi-step-build {
  0%,
  70%,
  100% {
    opacity: 0;
    transform: scale(0.7);
  }
  20%,
  55% {
    opacity: 1;
    transform: scale(1);
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero-caret,
  .hi-a .ai-shape,
  .hi-b .ic-chevron,
  .hi-c .step,
  .hi-d .halo,
  .hi-e .step {
    animation: none;
  }
}

/* ========================================
   Expertise
   ======================================== */

.bento {
  padding: 0 32px 80px;
  max-width: 1264px;
  margin: -90px auto 0;
  position: relative;
  z-index: 2;
}

.bento-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}

.expertise-card {
  grid-column: 1 / -1;
  background: #f4f4f1;
  border-radius: 20px;
  padding: 60px;
}

.expertise-top {
  display: flex;
  gap: 48px;
  align-items: flex-start;
  margin-bottom: 60px;
}

.expertise-text {
  flex: 1;
  min-width: 0;
}

.expertise-eyebrow {
  font-family: "JetBrains Mono", monospace;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #666;
  display: block;
  margin-bottom: 16px;
}

.expertise-title {
  font-family: "Funnel Display", sans-serif;
  font-size: clamp(1.75rem, 3.5vw, 2.75rem);
  font-weight: 600;
  color: #111;
  line-height: 1.15;
  letter-spacing: -0.02em;
  margin-bottom: 24px;
}

.expertise-desc {
  font-family: "Funnel Sans", sans-serif;
  font-size: 1rem;
  font-weight: 400;
  color: #555;
  line-height: 1.7;
  max-width: 520px;
}

.expertise-image {
  flex: 1;
  min-width: 0;
  border-radius: 12px;
  overflow: hidden;
}

.expertise-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border-radius: 12px;
  min-height: 300px;
}

.expertise-bottom {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr auto;
  gap: 40px;
  align-items: start;
  margin-top: 200px;
}

.expertise-col {
  flex: 1;
  min-width: 0;
  position: relative;
  cursor: default;
}

/* Hover image — slides up above the title */
.expertise-col-hover-img {
  overflow: hidden;
  border-radius: 10px;
  position: absolute;
  bottom: 100%;
  left: 0;
  right: 0;
  margin-bottom: 16px;
  opacity: 0;
  transform: translateY(60px);
  transition:
    opacity 0.9s ease-out,
    transform 0.9s ease-out;
  pointer-events: none;
}

.expertise-col-hover-img img {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  display: block;
  border-radius: 10px;
}

.expertise-col:hover .expertise-col-hover-img {
  opacity: 1;
  transform: translateY(0);
}

.expertise-col-title {
  font-family: "JetBrains Mono", monospace;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #111;
  margin-bottom: 8px;
  transition: color 0.2s;
}

.expertise-col:hover .expertise-col-title {
  color: #000;
}

.expertise-col-desc {
  font-family: "Funnel Sans", sans-serif;
  font-size: 0.9rem;
  font-weight: 400;
  color: #555;
  line-height: 1.6;
  transition: color 0.2s;
}

.expertise-col:hover .expertise-col-desc {
  color: #333;
}

.expertise-btn {
  align-self: start;
  background: #111;
  color: #fff;
  border: none;
  border-radius: 6px;
  padding: 14px 28px;
  font-family: "JetBrains Mono", monospace;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
  transition: opacity 0.2s;
  white-space: nowrap;
  display: inline-block;
}

.expertise-btn:hover {
  opacity: 0.85;
}

/* ========================================
   Services
   ======================================== */

.services-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}

/* Cards base */
.services-card {
  border-radius: 20px;
  overflow: hidden;
}

.services-card--large {
  position: relative;
}

.services-card--large .services-card-img {
  width: 100%;
  height: 100%;
}

.services-card--large .services-card-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border-radius: 20px;
}

/* Drawer — sits at bottom, slides up over image on hover */
.services-card-expand {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: var(--mint);
  padding: 24px 28px;
  border-radius: 20px;
  max-height: 72px;
  overflow: hidden;
  transition: max-height 0.7s ease-out;
}

.services-card:hover .services-card-expand {
  max-height: 320px;
}

.services-card-expand-title {
  font-family: "Funnel Display", sans-serif;
  font-size: clamp(1.25rem, 2.5vw, 1.75rem);
  font-weight: 500;
  color: #111;
  line-height: 1.2;
}

.services-card-expand-content {
  opacity: 0;
  transition: opacity 0.4s ease-out 0.15s;
  margin-top: 16px;
}

.services-card:hover .services-card-expand-content {
  opacity: 1;
}

.services-card-expand-desc {
  font-family: "Funnel Sans", sans-serif;
  font-size: 0.9rem;
  font-weight: 400;
  color: #333;
  line-height: 1.6;
  margin-bottom: 20px;
}

/* Right stack */
.services-card-stack {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

/* Accent card (colored) */
.services-card--accent {
  background: var(--mint);
  border-radius: 20px;
  padding: 36px 32px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  flex: 1;
}

.services-card-title {
  font-family: "Funnel Display", sans-serif;
  font-size: clamp(1.25rem, 2.5vw, 1.75rem);
  font-weight: 600;
  color: #111;
  line-height: 1.2;
  margin-bottom: 16px;
}

.services-card-desc {
  font-family: "Funnel Sans", sans-serif;
  font-size: 0.9rem;
  font-weight: 400;
  color: #333;
  line-height: 1.6;
  margin-bottom: 24px;
}

.services-card-btn {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  background: #fff;
  border-radius: 12px;
  padding: 12px 20px;
  font-family: "JetBrains Mono", monospace;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #111;
  transition: background 0.2s;
  align-self: flex-start;
}

.services-card-btn:hover {
  background: rgba(255, 255, 255, 0.7);
}

/* Image card (bottom right) */
.services-card--image {
  flex: 1;
  position: relative;
}

.services-card--image .services-card-img {
  width: 100%;
  height: 100%;
}

.services-card--image .services-card-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border-radius: 20px;
}

/* ========================================
   Workflow (Déroulement projet)
   ======================================== */

.workflow {
  padding: 80px 32px;
  max-width: 1264px;
  margin: 0 auto;
}

.workflow-header {
  margin-bottom: 80px;
}

.workflow-eyebrow {
  font-family: "JetBrains Mono", monospace;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #666;
  display: block;
  margin-bottom: 16px;
}

.workflow-title {
  font-family: "Funnel Display", sans-serif;
  font-size: clamp(1.75rem, 3.5vw, 2.75rem);
  font-weight: 600;
  color: #111;
  line-height: 1.15;
  letter-spacing: -0.02em;
  margin-bottom: 20px;
}

.workflow-desc {
  font-family: "Funnel Sans", sans-serif;
  font-size: 1rem;
  font-weight: 400;
  color: #555;
  line-height: 1.7;
  max-width: 560px;
}

.workflow-step {
  display: grid;
  grid-template-columns: 1fr 1.5fr;
  gap: 60px;
  min-height: 100vh;
  padding: 40px 0;
  border-top: 1px solid rgba(0, 0, 0, 0.06);
}

.workflow-step:last-child {
  min-height: auto;
}

.workflow-step-left {
  position: sticky;
  top: 120px;
  align-self: start;
  height: fit-content;
}

.workflow-step-num {
  font-family: "Funnel Display", sans-serif;
  font-size: clamp(5rem, 10vw, 8rem);
  font-weight: 700;
  color: rgba(0, 0, 0, 0.06);
  line-height: 1;
  display: block;
}

.workflow-step-title {
  font-family: "Funnel Display", sans-serif;
  font-size: clamp(1.5rem, 3vw, 2.25rem);
  font-weight: 600;
  color: #111;
  line-height: 1.2;
  margin-top: -20px;
}

.workflow-step-right {
  display: flex;
  flex-direction: column;
  gap: 24px;
  padding: 20px 0;
}

.workflow-card {
  background: #f4f4f1;
  border-radius: 20px;
  padding: 32px 36px 32px 52px;
  position: relative;
  opacity: 0;
  transform: translateY(30px);
  transition:
    opacity 0.6s ease-out,
    transform 0.6s ease-out;
}

.workflow-card.visible {
  opacity: 1;
  transform: translateY(0);
}

.workflow-card::before {
  content: "";
  position: absolute;
  left: 24px;
  top: 32px;
  bottom: 32px;
  width: 3px;
  border-radius: 2px;
  background: var(--card-accent, var(--mint));
}

.workflow-step[data-accent="mint"] {
  --card-accent: var(--mint);
}
.workflow-step[data-accent="sky"] {
  --card-accent: var(--sky);
}
.workflow-step[data-accent="lavender"] {
  --card-accent: var(--lavender);
}
.workflow-step[data-accent="moss"] {
  --card-accent: var(--moss);
}

.workflow-card-heading {
  font-family: "Funnel Display", sans-serif;
  font-size: clamp(1.1rem, 2vw, 1.4rem);
  font-weight: 500;
  color: #111;
  line-height: 1.2;
  margin-bottom: 8px;
}

.workflow-card-desc {
  font-family: "Funnel Sans", sans-serif;
  font-size: 0.9rem;
  font-weight: 400;
  color: #555;
  line-height: 1.7;
}

/* ========================================
   Contact (combined form + booking)
   ======================================== */

.contact {
  padding: 80px 32px;
  max-width: 1264px;
  margin: 0 auto;
}

.contact-grid {
  display: grid;
  grid-template-columns: minmax(280px, 1fr) minmax(0, 528px);
  gap: 72px;
  align-items: stretch;
}

.contact-left {
  display: flex;
  flex-direction: column;
}

/* === Section CTA contextuelle (5 variantes) ============================== */
/* Une seule .cc visible à la fois, contrôlée par data-variant sur la section. */

.contact-cta {
  position: relative;
  scroll-margin-top: 80px;
}
.contact-cta .cc {
  display: none;
}
.contact-cta[data-variant="a"] .cc[data-v="a"],
.contact-cta[data-variant="b"] .cc[data-v="b"],
.contact-cta[data-variant="c"] .cc[data-v="c"],
.contact-cta[data-variant="d"] .cc[data-v="d"],
.contact-cta[data-variant="e"] .cc[data-v="e"] {
  display: block;
}

/* === VARIANT A — Bandeau sky raffiné === */
.cc-a {
  background: var(--sky);
  padding: 20px 32px;
}
.cc-a-inner {
  max-width: 1280px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
}
.cc-a-text {
  font-family: "Funnel Sans", sans-serif;
  font-size: 1rem;
  font-weight: 400;
  color: #111;
  letter-spacing: 0.01em;
  text-align: center;
}
.cc-a-text strong {
  font-weight: 600;
}

/* === VARIANT B — Statement noir grande typo, date en accent === */
.cc-b {
  background: #000;
  padding: 80px 32px;
  text-align: center;
}
.cc-b-text {
  max-width: 1080px;
  margin: 0 auto;
  font-family: "Funnel Sans", sans-serif;
  font-size: clamp(22px, 3.5vw, 40px);
  line-height: 1.2;
  font-weight: 500;
  color: #fff;
  letter-spacing: -0.01em;
}
.cc-b-accent {
  color: var(--mint);
  font-weight: 600;
}

/* === VARIANT C — Card centrée premium avec bouton === */
.cc-c {
  background: #f4f4f1;
  padding: 80px 24px;
}
.cc-c-card {
  max-width: 720px;
  margin: 0 auto;
  background: #fff;
  border-radius: var(--radius-lg);
  padding: 56px 48px;
  box-shadow: 0 20px 48px rgba(0, 0, 0, 0.06);
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
}
.cc-c-eyebrow {
  font-family: "JetBrains Mono", monospace;
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #555;
}
.cc-c-eyebrow::before {
  content: "— ";
}
.cc-c-title {
  font-family: "Funnel Sans", sans-serif;
  font-size: clamp(22px, 3vw, 32px);
  line-height: 1.25;
  font-weight: 500;
  color: #111;
  letter-spacing: -0.01em;
  margin: 0;
}
.cc-c-cta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: #000;
  color: #fff;
  padding: 14px 28px;
  border-radius: 999px;
  text-decoration: none;
  font-size: 15px;
  font-weight: 500;
  transition: transform 0.2s;
}
.cc-c-cta::after {
  content: "→";
}
.cc-c-cta:hover {
  transform: translateY(-1px);
}

/* === VARIANT D — Bandeau défilant grande typo === */
.cc-d {
  background: #fafafa;
  padding: 24px 0 32px;
  overflow: hidden;
}
.cc-d-eyebrow-wrap {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 32px 12px;
  max-width: 1280px;
  margin: 0 auto;
}
.cc-d-eyebrow {
  font-family: "JetBrains Mono", monospace;
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #555;
}
.cc-d-track {
  display: flex;
  width: max-content;
  animation: cc-marquee 55s linear infinite;
}
.cc-d-set {
  display: flex;
  align-items: center;
  gap: 56px;
  padding-right: 56px;
  flex-shrink: 0;
}
.cc-d-item {
  font-family: "Funnel Sans", sans-serif;
  font-size: clamp(56px, 12vw, 152px);
  font-weight: 300;
  color: rgba(0, 0, 0, 0.2);
  text-transform: uppercase;
  letter-spacing: -0.02em;
  white-space: nowrap;
  line-height: 1;
}
.cc-d-sep {
  font-size: clamp(56px, 12vw, 152px);
  color: rgba(0, 0, 0, 0.2);
  flex-shrink: 0;
  line-height: 1;
}
@media (prefers-reduced-motion: reduce) {
  .cc-d-track {
    animation: none;
  }
}

/* === VARIANT E — Marquee ticker scrolling (texte 3× — choix user) ======== */
.cc-e {
  background: #fff;
  padding: 28px 0 36px;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(
    to right,
    transparent 0,
    #000 6%,
    #000 94%,
    transparent 100%
  );
  mask-image: linear-gradient(
    to right,
    transparent 0,
    #000 6%,
    #000 94%,
    transparent 100%
  );
}
.cc-e-eyebrow-wrap {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 32px 18px;
  max-width: 1280px;
  margin: 0 auto;
  transform: translateX(-100vw);
  transition: transform 1.1s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.cc-e-eyebrow-wrap.visible {
  transform: translateX(0);
}
.cc-e-eyebrow {
  font-family: "JetBrains Mono", monospace;
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #555;
}
.cc-e .contact-badge-dot::before {
  animation: cc-e-pulse 2s ease-out infinite;
}
@keyframes cc-e-pulse {
  0% {
    transform: scale(1);
    opacity: 0.7;
  }
  70% {
    transform: scale(3);
    opacity: 0;
  }
  100% {
    transform: scale(3);
    opacity: 0;
  }
}
.cc-e-track {
  display: flex;
  width: max-content;
  animation: cc-marquee 40s linear infinite;
}
.cc-e-set {
  display: flex;
  align-items: center;
  gap: 64px;
  padding-right: 64px;
  flex-shrink: 0;
}
.cc-e-item {
  font-family: "JetBrains Mono", monospace;
  font-size: 2.85rem;
  font-weight: 300;
  color: #b5b5b5;
  letter-spacing: 0.02em;
  white-space: nowrap;
  text-transform: uppercase;
}
.cc-e-item strong {
  font-weight: 500;
  color: #6b6b6b;
}
.cc-e-arrow {
  display: inline-block;
  margin: 0 0.2em;
  color: #b5b5b5;
  transform: translateY(-0.12em);
}
.cc-e-sep {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
  color: #b5b5b5;
  font-family: "JetBrains Mono", monospace;
  font-size: 2.85rem;
  font-weight: 300;
  line-height: 1;
}

/* Chevron Initia (mark de marque) — masque via SVG inline (data URI, fill=white)
   pour rendre le mask robust à tout mode (alpha OU luminance). White rend visible
   dans les deux modes ; un fill=black tombe invisible si le browser ignore mask-mode:alpha.
   Réutilisable inline en posant la classe sur un <i> ou <span> vide. */
.cc-chevron {
  display: inline-block;
  height: 0.9em;
  width: 0.9em; /* viewBox carré 131×131 ; le shape interne occupe ~57% du box */
  vertical-align: -0.12em;
  background-color: var(--mint);
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 131 131'><path fill='white' d='M54.4511 21.094C54.4511 23.8216 56.6623 26.0328 59.3899 26.0328H73.5093C76.2369 26.0328 78.4481 28.2439 78.4481 30.9715V47.0639C78.4481 49.7915 80.6592 52.0027 83.3868 52.0027H97.5063C100.234 52.0027 102.445 54.2138 102.445 56.9414V73.5541C102.445 76.2817 100.234 78.4928 97.5063 78.4928H83.3868C80.6592 78.4928 78.4481 80.704 78.4481 83.4316V99.4255C78.4481 102.153 76.2369 104.364 73.5093 104.364H59.3899C56.6623 104.364 54.4511 106.575 54.4511 109.303V125.355C54.4511 128.083 52.2399 130.294 49.5123 130.294H32.8997C30.1721 130.294 27.9609 128.083 27.9609 125.355V108.743C27.9609 106.015 30.1721 103.804 32.8997 103.804H47.0187C49.7464 103.804 51.9575 101.593 51.9575 98.8651V82.8129C51.9575 80.0853 54.1687 77.8741 56.8963 77.8741H71.0157C73.7433 77.8741 75.9545 75.663 75.9545 72.9354V57.4617C75.9545 54.7341 73.7433 52.5229 71.0157 52.5229H56.8963C54.1687 52.5229 51.9575 50.3118 51.9575 47.5842V31.5319C51.9575 28.8043 49.7464 26.5932 47.0187 26.5932H32.8997C30.1721 26.5932 27.9609 24.382 27.9609 21.6544V5.04179C27.9609 2.31419 30.1721 0.103027 32.8997 0.103027H49.5123C52.2399 0.103027 54.4511 2.31419 54.4511 5.04179V21.094Z'/></svg>")
    center / contain no-repeat;
  mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 131 131'><path fill='white' d='M54.4511 21.094C54.4511 23.8216 56.6623 26.0328 59.3899 26.0328H73.5093C76.2369 26.0328 78.4481 28.2439 78.4481 30.9715V47.0639C78.4481 49.7915 80.6592 52.0027 83.3868 52.0027H97.5063C100.234 52.0027 102.445 54.2138 102.445 56.9414V73.5541C102.445 76.2817 100.234 78.4928 97.5063 78.4928H83.3868C80.6592 78.4928 78.4481 80.704 78.4481 83.4316V99.4255C78.4481 102.153 76.2369 104.364 73.5093 104.364H59.3899C56.6623 104.364 54.4511 106.575 54.4511 109.303V125.355C54.4511 128.083 52.2399 130.294 49.5123 130.294H32.8997C30.1721 130.294 27.9609 128.083 27.9609 125.355V108.743C27.9609 106.015 30.1721 103.804 32.8997 103.804H47.0187C49.7464 103.804 51.9575 101.593 51.9575 98.8651V82.8129C51.9575 80.0853 54.1687 77.8741 56.8963 77.8741H71.0157C73.7433 77.8741 75.9545 75.663 75.9545 72.9354V57.4617C75.9545 54.7341 73.7433 52.5229 71.0157 52.5229H56.8963C54.1687 52.5229 51.9575 50.3118 51.9575 47.5842V31.5319C51.9575 28.8043 49.7464 26.5932 47.0187 26.5932H32.8997C30.1721 26.5932 27.9609 24.382 27.9609 21.6544V5.04179C27.9609 2.31419 30.1721 0.103027 32.8997 0.103027H49.5123C52.2399 0.103027 54.4511 2.31419 54.4511 5.04179V21.094Z'/></svg>")
    center / contain no-repeat;
  flex-shrink: 0;
}
/* Variante E : chevron utilisé comme flèche entre les deux mois */
.cc-e-arrow {
  margin: 0 0.15em;
  height: 0.85em;
  width: 0.85em;
}

/* Slash Initia (barre oblique pixelisée 3 modules) — séparateur typographique
   neutre. Masque via SVG inline (data URI, fill=white) pour rester robust à tout
   mode de masking. ViewBox 109×142 (aspect ~0.77). */
.cc-slash {
  display: inline-block;
  height: 1em;
  width: 0.77em;
  vertical-align: -0.18em;
  background-color: var(--mint);
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 109 142'><path fill='white' fill-rule='evenodd' clip-rule='evenodd' d='M108.181 42.001C108.181 45.3147 105.494 48.001 102.181 48.001H79.0908C75.7771 48.001 73.0908 50.6873 73.0908 54.001V88.8799C73.0908 92.1936 70.4045 94.8799 67.0908 94.8799H44C40.6863 94.8799 38 97.5662 38 100.88V135.864C38 139.178 35.3137 141.864 32 141.864H6C2.68629 141.864 0 139.178 0 135.864V99.8643C0 96.5506 2.68629 93.8643 6 93.8643H29.0908C32.4045 93.8643 35.0908 91.178 35.0908 87.8643V52.8799C35.0908 49.5662 37.7771 46.8799 41.0908 46.8799H64.1807C67.4944 46.8799 70.1807 44.1936 70.1807 40.8799V6C70.1807 2.68629 72.867 0 76.1807 0H102.181C105.494 0 108.181 2.68629 108.181 6V42.001Z'/></svg>")
    center / contain no-repeat;
  mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 109 142'><path fill='white' fill-rule='evenodd' clip-rule='evenodd' d='M108.181 42.001C108.181 45.3147 105.494 48.001 102.181 48.001H79.0908C75.7771 48.001 73.0908 50.6873 73.0908 54.001V88.8799C73.0908 92.1936 70.4045 94.8799 67.0908 94.8799H44C40.6863 94.8799 38 97.5662 38 100.88V135.864C38 139.178 35.3137 141.864 32 141.864H6C2.68629 141.864 0 139.178 0 135.864V99.8643C0 96.5506 2.68629 93.8643 6 93.8643H29.0908C32.4045 93.8643 35.0908 91.178 35.0908 87.8643V52.8799C35.0908 49.5662 37.7771 46.8799 41.0908 46.8799H64.1807C67.4944 46.8799 70.1807 44.1936 70.1807 40.8799V6C70.1807 2.68629 72.867 0 76.1807 0H102.181C105.494 0 108.181 2.68629 108.181 6V42.001Z'/></svg>")
    center / contain no-repeat;
  flex-shrink: 0;
}
@keyframes cc-marquee {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-50%);
  }
}
@media (prefers-reduced-motion: reduce) {
  .cc-e-track {
    animation: none;
  }
}

/* Responsive partagé */
@media (max-width: 768px) {
  .cc-a {
    padding: 16px 20px;
  }
  .cc-a-text {
    font-size: 0.92rem;
  }
  .cc-b {
    padding: 56px 20px;
  }
  .cc-c {
    padding: 56px 16px;
  }
  .cc-c-card {
    padding: 40px 28px;
  }
  .cc-d {
    padding: 20px 0 28px;
  }
  .cc-d-eyebrow-wrap {
    padding: 0 20px 10px;
  }
}

.contact-badge-dot {
  position: relative;
  width: 6px;
  height: 6px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.contact-badge-dot::before {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: #4ade80;
  animation: contact-pulse 2s ease-out infinite;
}

.contact-badge-dot::after {
  content: "";
  position: relative;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #22c55e;
}

@keyframes contact-pulse {
  0% {
    transform: scale(1);
    opacity: 0.7;
  }
  70% {
    transform: scale(2.5);
    opacity: 0;
  }
  100% {
    transform: scale(2.5);
    opacity: 0;
  }
}

/* Left column text */
.contact-eyebrow {
  font-family: "JetBrains Mono", monospace;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(0, 0, 0, 0.25);
  display: block;
  margin-bottom: 10px;
}

.contact-title {
  font-family: "Funnel Display", sans-serif;
  font-size: clamp(1.75rem, 3.5vw, 2.25rem);
  font-weight: 600;
  color: #111;
  letter-spacing: -0.03em;
  line-height: 1.1;
}

.contact-desc {
  font-family: "Funnel Sans", sans-serif;
  font-size: 0.9rem;
  font-weight: 400;
  color: rgba(0, 0, 0, 0.5);
  line-height: 1.6;
  margin-top: 14px;
  max-width: 300px;
}

.contact-text-panel {
  display: block;
}

/* CTA rendez-vous : bloc Google Calendar Appointment Scheduling sous les advantages */
.contact-rdv-cta {
  margin-top: 28px;
  padding-top: 24px;
  border-top: 1px solid rgba(0, 0, 0, 0.08);
  display: flex;
  flex-direction: column;
  gap: 12px;
  align-items: flex-start;
}

.contact-rdv-text {
  font-family: "Funnel Sans", sans-serif;
  font-size: 13px;
  font-weight: 500;
  color: rgba(0, 0, 0, 0.55);
  margin: 0;
  letter-spacing: 0.01em;
}

/* Override des styles inline injectés par Google Calendar Appointment Scheduling.
   Le script Google applique `style="color:#fff; background-color:<param.color>"` sur
   le <button> ; on neutralise pour aligner sur le bouton .nav-cta (menu). */
.contact-rdv-cta button {
  flex-shrink: 0;
  border: 1.5px solid transparent !important;
  border-radius: 6px !important;
  padding: 8px 18px !important;
  font-family: "JetBrains Mono", monospace !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase;
  color: #111 !important;
  cursor: pointer;
  background-color: var(--mint) !important;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  animation: cta-cycle 9s ease-in-out infinite;
}
.contact-rdv-cta button:hover {
  opacity: 0.85;
}

/* Advantages list */
.contact-advantages {
  margin-top: 28px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.contact-advantage {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}

.contact-advantage-icon {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.05);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-top: 1px;
}

.contact-advantage-icon svg {
  width: 12px;
  height: 12px;
}

.contact-advantage-title {
  font-family: "Funnel Sans", sans-serif;
  font-size: 0.85rem;
  font-weight: 600;
  color: #111;
}

.contact-advantage-desc {
  font-family: "Funnel Sans", sans-serif;
  font-size: 0.75rem;
  font-weight: 400;
  color: rgba(0, 0, 0, 0.45);
  line-height: 1.4;
}

/* Right column */
.contact-right {
  display: block;
  align-self: stretch;
  position: relative;
}

/* Form panel */
.contact-panel {
  background: var(--beige);
  border-radius: 14px;
  padding: 22px 24px;
  border: 1px solid rgba(0, 0, 0, 0.06);
  position: relative;
}

/* Form styles */
.contact-form-row {
  display: flex;
  gap: 10px;
  margin-bottom: 12px;
}

.contact-form-group {
  flex: 1;
  margin-bottom: 12px;
}

.contact-form-row .contact-form-group {
  margin-bottom: 0;
}

.contact-form-label {
  display: block;
  font-family: "Funnel Sans", sans-serif;
  font-size: 0.75rem;
  font-weight: 500;
  color: rgba(0, 0, 0, 0.5);
  margin-bottom: 5px;
}

.contact-form-label .required {
  color: #cfe1d4;
  font-weight: 600;
}

.contact-form-input,
.contact-form-textarea,
.contact-form-select {
  width: 100%;
  background: #fff;
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 6px;
  padding: 10px 14px;
  font-family: "Funnel Sans", sans-serif;
  font-size: 0.85rem;
  font-weight: 400;
  color: #111;
  outline: none;
  transition:
    border-color 0.2s,
    box-shadow 0.2s;
}

.contact-form-input:focus,
.contact-form-textarea:focus,
.contact-form-select:focus {
  border-color: #cfe1d4;
  box-shadow: 0 0 0 2px rgba(207, 225, 212, 0.4);
}

.contact-form-input::placeholder,
.contact-form-textarea::placeholder {
  color: rgba(0, 0, 0, 0.3);
}

.contact-form-textarea {
  resize: none;
  min-height: 68px;
}

.contact-form-select {
  appearance: none;
  cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23737373' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
}

.contact-form-submit {
  width: 100%;
  height: 42px;
  background: var(--mint);
  border: none;
  border-radius: 8px;
  font-family: "Funnel Sans", sans-serif;
  font-size: 0.85rem;
  font-weight: 600;
  color: #111;
  cursor: pointer;
  margin-top: 18px;
  transition: background 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.contact-form-submit:hover {
  filter: brightness(0.92);
}

.contact-form-status {
  font-family: "Funnel Sans", sans-serif;
  font-size: 0.85rem;
  font-weight: 400;
  margin-top: 12px;
  display: none;
}

.contact-form-status.success {
  display: block;
  color: #22c55e;
}

.contact-form-status.error {
  display: block;
  color: #ef4444;
}

/* Booking panel */
.contact-booking-title {
  font-family: "Funnel Display", sans-serif;
  font-size: 1.1rem;
  font-weight: 600;
  color: #111;
  margin-bottom: 4px;
}

.contact-booking-desc {
  font-family: "Funnel Sans", sans-serif;
  font-size: 0.85rem;
  font-weight: 400;
  color: rgba(0, 0, 0, 0.5);
  line-height: 1.5;
  margin-bottom: 12px;
}

.contact-booking-btn {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px;
  border: 1px solid rgba(0, 0, 0, 0.06);
  border-radius: 12px;
  margin-bottom: 10px;
  cursor: pointer;
  background: #fff;
  transition:
    background 0.15s,
    border-color 0.15s;
}

.contact-booking-btn:last-of-type {
  margin-bottom: 0;
}

.contact-booking-btn:hover {
  background: #cde2d6;
  border-color: #cde2d6;
}

.contact-booking-btn-icon {
  width: 40px;
  height: 40px;
  background: var(--sky);
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: background 0.15s;
}

.contact-booking-btn:hover .contact-booking-btn-icon {
  background: rgba(255, 255, 255, 0.5);
}

.contact-booking-btn-icon svg {
  width: 18px;
  height: 18px;
}

.contact-booking-btn-text {
  flex: 1;
  min-width: 0;
}

.contact-booking-btn-title {
  font-family: "Funnel Sans", sans-serif;
  font-size: 0.85rem;
  font-weight: 600;
  color: #111;
}

.contact-booking-btn-sub {
  font-family: "Funnel Sans", sans-serif;
  font-size: 0.75rem;
  font-weight: 400;
  color: rgba(0, 0, 0, 0.45);
}

.contact-booking-btn-arrow {
  flex-shrink: 0;
  color: rgba(0, 0, 0, 0.2);
}

.contact-booking-note {
  text-align: center;
  font-family: "Funnel Sans", sans-serif;
  font-size: 0.7rem;
  font-weight: 400;
  color: rgba(0, 0, 0, 0.3);
  margin-top: 16px;
}

/* ========================================
   Footer
   ======================================== */

.footer-wrapper {
  background: #fff;
  padding: 24px;
}

.footer-container {
  background: var(--sky);
  border-radius: 24px;
  padding: 48px 48px 0;
}

.footer-top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 40px;
  padding-bottom: 40px;
}

.footer-identity {
  display: flex;
  flex-direction: column;
  gap: 16px;
  max-width: 320px;
}

.text-footer-tagline {
  font-family: "JetBrains Mono", monospace;
  font-size: 0.9375rem;
  font-weight: 200;
  color: #555;
}

.label-eyebrow {
  font-family: "JetBrains Mono", monospace;
  font-size: 0.75rem;
  font-weight: 300;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.label-micro {
  font-family: "JetBrains Mono", monospace;
  font-size: 0.7rem;
  font-weight: 300;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #888;
}

.label-micro--dim {
  opacity: 0.5;
}

.text-body-sm {
  font-family: "Funnel Sans", sans-serif;
  font-size: 0.875rem;
  font-weight: 400;
  color: #555;
  transition: color 0.2s;
}

.text-body-sm:hover {
  color: #111;
}

.footer-clocks {
  display: flex;
  gap: 56px;
  flex-shrink: 0;
}

.footer-clock-group {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}

.footer-clock {
  width: 72px;
  height: 72px;
}

.footer-clock-time {
  font-family: "JetBrains Mono", monospace;
  font-size: 0.8rem;
  font-weight: 300;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #666;
}

.footer-clock-label {
  font-family: "JetBrains Mono", monospace;
  font-size: 0.7rem;
  font-weight: 300;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #888;
  opacity: 0.6;
}

.footer-divider {
  border: none;
  border-top: 1px solid rgba(0, 0, 0, 0.08);
  margin: 0;
}

.footer-bottom {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 40px;
  padding: 40px 0;
}

.footer-links {
  display: flex;
  gap: 64px;
}

.footer-links-col {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.footer-links-col h4 {
  margin-bottom: 4px;
  color: #111;
}

.footer-links-col ul {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.footer-copyright {
  align-self: flex-start;
}

.footer-wordmark {
  padding: 10px 0 20px;
}

.footer-wordmark svg {
  width: 100%;
  height: auto;
  display: block;
}

/* ========================================
   Terminal (ported from v4)
   ======================================== */

.terminal {
  background: #1a201c;
  border-radius: 10px;
  overflow: hidden;
  box-shadow:
    0 8px 40px rgba(20, 30, 20, 0.28),
    0 2px 6px rgba(20, 30, 20, 0.16);
}

.terminal__bar {
  background: #252e26;
  padding: 13px 16px;
  display: flex;
  align-items: center;
  gap: 7px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.terminal__dot {
  width: 11px;
  height: 11px;
  border-radius: 50%;
}

.terminal__dot--red {
  background: #ff5f56;
}
.terminal__dot--yellow {
  background: #ffbd2e;
}
.terminal__dot--green {
  background: #27c93f;
}

.terminal__title {
  flex: 1;
  text-align: center;
  font-family: "JetBrains Mono", monospace;
  font-size: 11px;
  font-weight: 300;
  color: rgba(200, 220, 195, 0.35);
  letter-spacing: 0.08em;
}

.terminal__body {
  padding: 28px 32px 36px;
  font-family: "JetBrains Mono", monospace;
  font-size: 14px;
  line-height: 1.85;
}

.terminal__body .block {
  margin-bottom: 28px;
}
.terminal__body .block:last-child {
  margin-bottom: 0;
}
.terminal__body .comment {
  color: rgba(160, 190, 155, 0.38);
  font-weight: 300;
  font-size: 13px;
}
.terminal__body .line-plain {
  color: #9ab89a;
  font-weight: 300;
}
.terminal__body .line-mid {
  color: #b8cfb4;
  font-weight: 300;
}
.terminal__body .em {
  font-style: italic;
}
.terminal__body .line-strong {
  color: #deecd8;
  font-weight: 600;
}
.terminal__body .line-result {
  color: #b0c8ac;
  font-weight: 300;
  padding-left: 20px;
}
.terminal__body .prompt {
  color: #5da05d;
  font-weight: 400;
  margin-right: 6px;
  user-select: none;
}
.terminal__body .line-output {
  color: rgba(170, 200, 165, 0.5);
  font-weight: 300;
  padding-left: 20px;
}
.terminal__body .cursor {
  display: inline-block;
  width: 8px;
  height: 14px;
  background: #5da05d;
  vertical-align: middle;
  margin-left: 3px;
  animation: blink 1.1s step-end infinite;
}

@keyframes blink {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0;
  }
}

/* ========================================
   About Page (L'agence)
   ======================================== */

.about-hero {
  padding: 160px 32px 80px;
  max-width: 1200px;
  margin: 0 auto;
}

.about-hero-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  align-items: start;
}

.about-hero-text {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.about-hero-title {
  font-family: "Funnel Display", sans-serif;
  font-size: clamp(2rem, 4vw, 3rem);
  font-weight: 600;
  color: #111;
  line-height: 1.1;
  letter-spacing: -0.02em;
}

.about-hero-lead {
  font-family: "Funnel Sans", sans-serif;
  font-size: 1.05rem;
  font-weight: 400;
  color: #333;
  line-height: 1.7;
}

.about-hero-body {
  font-family: "Funnel Sans", sans-serif;
  font-size: 0.95rem;
  font-weight: 400;
  color: #555;
  line-height: 1.7;
}

.about-section {
  padding: 80px 32px;
  max-width: 1200px;
  margin: 0 auto;
}

.about-section-title {
  font-family: "Funnel Display", sans-serif;
  font-size: clamp(1.75rem, 3.5vw, 2.5rem);
  font-weight: 600;
  color: #111;
  line-height: 1.15;
  letter-spacing: -0.02em;
  margin-bottom: 40px;
}

.about-values-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

.about-value-card {
  background: #f4f4f1;
  border-radius: 20px;
  padding: 32px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.about-value-icon {
  width: 36px;
  height: 36px;
  color: var(--mint);
}

.about-value-title {
  font-family: "Funnel Display", sans-serif;
  font-size: 1.25rem;
  font-weight: 600;
  color: #111;
}

.about-value-desc {
  font-family: "Funnel Sans", sans-serif;
  font-size: 0.9rem;
  font-weight: 400;
  color: #555;
  line-height: 1.6;
}

.about-team-title {
  font-family: "Funnel Display", sans-serif;
  font-size: clamp(1.75rem, 3.5vw, 2.5rem);
  font-weight: 600;
  color: #111;
  line-height: 1.15;
  letter-spacing: -0.02em;
}

.about-team-title span {
  font-weight: 300;
  font-style: italic;
}

.about-team-grid {
  display: grid;
  grid-template-columns: 7fr 5fr;
  gap: 48px;
  align-items: start;
  margin-top: 40px;
}

.about-team-lead {
  font-family: "Funnel Sans", sans-serif;
  font-size: 1.05rem;
  font-weight: 400;
  color: #333;
  line-height: 1.7;
}

.about-team-lists {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px;
}

.about-team-list-title {
  font-family: "JetBrains Mono", monospace;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #888;
  margin-bottom: 16px;
}

.about-team-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.about-team-list li {
  font-family: "Funnel Sans", sans-serif;
  font-size: 0.9rem;
  font-weight: 400;
  color: #333;
}

.about-bio-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: start;
}

.about-bio-photos {
  display: flex;
  gap: 12px;
  height: 560px;
}

.about-bio-main-photo {
  width: 200px;
  flex-shrink: 0;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12);
}

.about-bio-main-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.about-bio-side-photos {
  display: flex;
  flex-direction: column;
  gap: 12px;
  flex: 1;
}

.about-bio-side-photo {
  flex: 1;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
  min-height: 0;
}

.about-bio-side-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.about-bio-text {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.about-bio-name {
  font-family: "Funnel Display", sans-serif;
  font-size: clamp(1.5rem, 3vw, 2rem);
  font-weight: 600;
  color: #111;
}

.about-bio-role {
  font-family: "Funnel Sans", sans-serif;
  font-size: 0.95rem;
  font-weight: 400;
  color: var(--mint);
}

.about-bio-body {
  font-family: "Funnel Sans", sans-serif;
  font-size: 0.9rem;
  font-weight: 400;
  color: #555;
  line-height: 1.7;
}

.about-bio-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: #fff;
  border: 1px solid rgba(0, 0, 0, 0.1);
  border-radius: 999px;
  padding: 10px 20px;
  font-family: "Funnel Sans", sans-serif;
  font-size: 0.85rem;
  font-weight: 400;
  color: #111;
  transition: background 0.2s;
  width: fit-content;
}

.about-bio-link:hover {
  background: #f4f4f1;
}

.about-bio-link svg {
  width: 16px;
  height: 16px;
}

/* ========================================
   Partner Section (within about page)
   ======================================== */

.partner-section {
  padding: 80px 32px;
  max-width: 1200px;
  margin: 0 auto;
  border-top: 1px solid rgba(0, 0, 0, 0.06);
}

.partner-intro-title {
  font-family: "Funnel Display", sans-serif;
  font-size: clamp(1.75rem, 3.5vw, 2.5rem);
  font-weight: 600;
  color: #111;
  line-height: 1.15;
  letter-spacing: -0.02em;
  margin-bottom: 20px;
}

.partner-intro-text {
  font-family: "Funnel Sans", sans-serif;
  font-size: 1rem;
  font-weight: 400;
  color: #555;
  line-height: 1.7;
  max-width: 700px;
  margin-bottom: 48px;
}

.partner-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}

.partner-card {
  background: #f4f4f1;
  border-radius: 20px;
  padding: 28px;
  display: flex;
  align-items: flex-start;
  gap: 16px;
}

.partner-card-icon {
  width: 24px;
  height: 24px;
  flex-shrink: 0;
  color: var(--mint);
  margin-top: 2px;
}

.partner-card-title {
  font-family: "Funnel Display", sans-serif;
  font-size: 1rem;
  font-weight: 600;
  color: #111;
  margin-bottom: 6px;
}

.partner-card-desc {
  font-family: "Funnel Sans", sans-serif;
  font-size: 0.85rem;
  font-weight: 400;
  color: #555;
  line-height: 1.6;
}

.partner-form-wrap {
  max-width: 700px;
  margin: 60px auto 0;
  border: 1px dashed rgba(0, 0, 0, 0.2);
  padding: 48px;
}

/* Message de succès du formulaire partenaire (remplace le form après envoi) */
.about-form-success {
  font-family: "JetBrains Mono", monospace;
  font-weight: 300;
  color: #111;
  font-size: 0.95rem;
  letter-spacing: 0.05em;
  padding: 32px 0;
}

/* ─── Accessibilité : focus visible ─── */
/* Style de focus cohérent pour la navigation clavier. On cible :focus-visible
   pour ne pas afficher l'outline au clic souris (le UA-default le ferait aussi). */
.nav-pill:focus-visible,
.nav-cta:focus-visible,
.mobile-link:focus-visible,
.mobile-cta:focus-visible,
.expertise-btn:focus-visible,
.services-card-btn:focus-visible,
.expertise-col:focus-visible,
.contact-form-submit:focus-visible,
.footer-links-col a:focus-visible,
.notfound-btn:focus-visible {
  outline: 2px solid #111;
  outline-offset: 3px;
  border-radius: var(--radius-sm, 6px);
}

/* Inputs / textarea / select : focus plus discret (bordure au lieu d'outline) */
.contact-form-input:focus-visible,
.contact-form-textarea:focus-visible,
.contact-form-select:focus-visible {
  outline: 2px solid #111;
  outline-offset: 1px;
}

/* ─── Utilitaires déplacés depuis des styles inline ─── */
.about-emphasis {
  color: #c8dcc4;
  font-weight: 600;
}
.about-bio-body--italic {
  font-style: italic;
}
.about-section-title--spaced {
  margin-top: 48px;
}
.services-card-expand--beige {
  background: #f4f4f1;
}
.workflow--with-hero-offset {
  padding-top: 140px;
}

.partner-form-header {
  margin-bottom: 48px;
}

.partner-form-title {
  font-family: "Funnel Display", sans-serif;
  font-size: clamp(1.25rem, 2.5vw, 1.75rem);
  font-weight: 600;
  color: #111;
  margin-bottom: 8px;
}

.partner-form-desc {
  font-family: "Funnel Sans", sans-serif;
  font-size: 0.95rem;
  font-weight: 400;
  color: #555;
  line-height: 1.6;
}

.partner-form-row {
  display: flex;
  border-bottom: 1px dashed rgba(0, 0, 0, 0.2);
}

.partner-form-field {
  flex: 1;
  position: relative;
  display: flex;
  align-items: center;
}

.partner-form-field + .partner-form-field {
  border-left: 1px dashed rgba(0, 0, 0, 0.2);
  padding-left: 24px;
}

.partner-form-input {
  width: 100%;
  background: transparent;
  border: none;
  padding: 16px 0;
  font-family: "Funnel Sans", sans-serif;
  font-size: 0.95rem;
  font-weight: 300;
  color: #111;
  outline: none;
}

.partner-form-input::placeholder {
  color: #737373;
  font-weight: 300;
}

.partner-form-single {
  border-bottom: 1px dashed rgba(0, 0, 0, 0.2);
}

.partner-form-single .partner-form-input {
  width: 100%;
}

.partner-checkbox-section {
  margin-top: 40px;
  margin-bottom: 36px;
}

.partner-checkbox-title {
  font-family: "JetBrains Mono", monospace;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #737373;
  margin-bottom: 16px;
}

.partner-checkbox-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px 32px;
}

.partner-checkbox {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  cursor: pointer;
}

.partner-checkbox input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

.partner-check-indicator {
  font-family: "JetBrains Mono", monospace;
  font-size: 0.85rem;
  color: #737373;
  user-select: none;
  white-space: nowrap;
  margin-top: 1px;
  transition: color 0.2s;
}

.partner-checkbox:hover .partner-check-indicator {
  color: #111;
}

.partner-checkbox-label {
  font-family: "Funnel Sans", sans-serif;
  font-size: 0.9rem;
  font-weight: 300;
  color: #737373;
  user-select: none;
  transition: color 0.2s;
}

.partner-checkbox:hover .partner-checkbox-label {
  color: #111;
}

.partner-form-submit {
  border-top: 1px dashed rgba(0, 0, 0, 0.2);
  padding-top: 24px;
}

.partner-form-submit button {
  background: none;
  border: none;
  font-family: "JetBrains Mono", monospace;
  font-size: 0.85rem;
  font-weight: 300;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: #111;
  cursor: pointer;
  transition: color 0.2s;
}

.partner-form-submit button:hover {
  color: #737373;
}

.partner-form-message {
  margin-top: 12px;
  font-family: "Funnel Sans", sans-serif;
  font-size: 0.85rem;
  font-weight: 300;
  display: none;
}

.about-cta {
  padding: 80px 32px;
  background: var(--mint);
}

.about-cta-inner {
  max-width: 600px;
  margin: 0 auto;
  text-align: center;
}

.about-cta-title {
  font-family: "Funnel Display", sans-serif;
  font-size: clamp(1.5rem, 3vw, 2rem);
  font-weight: 600;
  color: #111;
  margin-bottom: 16px;
}

.about-cta-desc {
  font-family: "Funnel Sans", sans-serif;
  font-size: 1rem;
  font-weight: 400;
  color: #333;
  line-height: 1.6;
  margin-bottom: 32px;
}

/* ========================================
   Expertise Page
   ======================================== */

.expertise-page-hero {
  padding: 160px 32px 80px;
  max-width: 1264px;
  margin: 0 auto;
}

.expertise-page-hero-inner {
  max-width: 700px;
}

.expertise-page-title {
  font-family: "Funnel Display", sans-serif;
  font-size: clamp(1.75rem, 3.5vw, 2.75rem);
  font-weight: 600;
  color: #111;
  line-height: 1.15;
  letter-spacing: -0.02em;
  margin-bottom: 24px;
}

.expertise-pillar {
  padding: 60px 32px;
  max-width: 1264px;
  margin: 0 auto;
  border-top: 1px solid rgba(0, 0, 0, 0.06);
}

.expertise-pillar-inner {
  display: grid;
  grid-template-columns: 1fr;
  gap: 40px;
}

.expertise-pillar-header {
  display: flex;
  align-items: baseline;
  gap: 20px;
}

.expertise-pillar-num {
  font-family: "Funnel Display", sans-serif;
  font-size: clamp(3rem, 6vw, 5rem);
  font-weight: 700;
  color: rgba(0, 0, 0, 0.06);
  line-height: 1;
}

.expertise-pillar-title {
  font-family: "Funnel Display", sans-serif;
  font-size: clamp(1.5rem, 3vw, 2.25rem);
  font-weight: 600;
  color: #111;
  line-height: 1.2;
}

.expertise-pillar-content {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
}

.expertise-pillar-lead {
  font-family: "Funnel Sans", sans-serif;
  font-size: 1.1rem;
  font-weight: 500;
  color: #111;
  line-height: 1.6;
  margin-bottom: 16px;
}

.expertise-pillar-body {
  font-family: "Funnel Sans", sans-serif;
  font-size: 0.95rem;
  font-weight: 400;
  color: #555;
  line-height: 1.7;
}

.expertise-pillar-subtitle {
  font-family: "JetBrains Mono", monospace;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #111;
  margin-bottom: 12px;
  margin-top: 28px;
}

.expertise-pillar-subtitle:first-child {
  margin-top: 0;
}

.expertise-pillar-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.expertise-pillar-list li {
  font-family: "Funnel Sans", sans-serif;
  font-size: 0.9rem;
  font-weight: 400;
  color: #555;
  line-height: 1.5;
  padding-left: 20px;
  position: relative;
}

.expertise-pillar-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 8px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--mint);
}

.expertise-cta {
  padding: 80px 32px;
  background: var(--mint);
}

.expertise-cta-inner {
  max-width: 600px;
  margin: 0 auto;
  text-align: center;
}

.expertise-cta-title {
  font-family: "Funnel Display", sans-serif;
  font-size: clamp(1.5rem, 3vw, 2rem);
  font-weight: 600;
  color: #111;
  margin-bottom: 16px;
}

.expertise-cta-desc {
  font-family: "Funnel Sans", sans-serif;
  font-size: 1rem;
  font-weight: 400;
  color: #333;
  line-height: 1.6;
  margin-bottom: 32px;
}

/* ========================================
   Responsive
   ======================================== */

@media (max-width: 768px) {
  .nav {
    padding: 12px 20px;
  }

  .nav-links,
  .nav-cta {
    display: none;
  }

  .nav-hamburger {
    display: block;
  }

  .hero {
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 100px 20px 90px;
    min-height: 80vh;
  }

  .hero-video-wrap::after {
    background:
      linear-gradient(
        180deg,
        rgba(255, 255, 255, 0.3) 0%,
        rgba(255, 255, 255, 0) 30%
      ),
      linear-gradient(
        180deg,
        rgba(255, 255, 255, 0) 60%,
        rgba(255, 255, 255, 0.85) 85%,
        #fff 100%
      );
  }

  .hero-content {
    max-width: 100%;
    text-align: center;
    background: rgba(255, 255, 255, 0.78);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    padding: 28px 24px;
    border-radius: 18px;
  }

  .hero-title,
  .hero-subtitle {
    text-align: center;
  }

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

  .bento {
    padding: 0 16px 60px;
    margin-top: -60px;
  }

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

  .expertise-card {
    padding: 32px 24px;
    border-radius: 16px;
  }

  .expertise-top {
    flex-direction: column;
    gap: 32px;
  }

  .expertise-image img {
    min-height: 200px;
  }

  .expertise-bottom {
    flex-direction: column;
    gap: 24px;
    align-items: flex-start;
  }

  .expertise-btn {
    width: 100%;
    text-align: center;
  }

  .services-card--large .services-card-img img {
    min-height: 250px;
  }

  .workflow {
    padding: 60px 16px;
  }

  .workflow-header {
    margin-bottom: 48px;
  }

  .workflow-step {
    grid-template-columns: 1fr;
    gap: 24px;
    min-height: auto;
    padding: 32px 0;
  }

  .workflow-step-left {
    position: relative;
    top: auto;
    display: flex;
    align-items: baseline;
    gap: 16px;
  }

  .workflow-step-num {
    font-size: 3rem;
  }

  .workflow-step-title {
    margin-top: 0;
  }

  .workflow-card {
    padding: 24px 20px 24px 40px;
  }

  .workflow-card::before {
    left: 16px;
    top: 24px;
    bottom: 24px;
  }

  .contact {
    padding: 60px 16px;
  }

  .contact-grid {
    grid-template-columns: 1fr;
    gap: 32px;
  }

  .contact-panel {
    padding: 24px 20px;
  }

  .contact-form-row {
    flex-direction: column;
    gap: 0;
  }

  .contact-form-row .contact-form-group {
    margin-bottom: 12px;
  }

  .footer-wrapper {
    padding: 16px;
  }

  .footer-container {
    padding: 32px 24px 0;
    border-radius: 20px;
  }

  .footer-top {
    flex-direction: column;
    gap: 32px;
  }

  .footer-clocks {
    gap: 40px;
  }

  .footer-bottom {
    flex-direction: column;
    gap: 32px;
  }

  .footer-links {
    flex-direction: column;
    gap: 32px;
  }

  .footer-copyright {
    align-self: flex-start;
  }

  .expertise-page-hero {
    padding: 120px 16px 60px;
  }

  .expertise-pillar {
    padding: 40px 16px;
  }

  .expertise-pillar-content {
    grid-template-columns: 1fr;
    gap: 32px;
  }

  .expertise-cta {
    padding: 60px 16px;
  }

  .about-hero {
    padding: 120px 16px 60px;
  }

  .about-hero-grid {
    grid-template-columns: 1fr;
    gap: 32px;
  }

  .about-section {
    padding: 48px 16px;
  }

  .about-values-grid {
    grid-template-columns: 1fr;
  }

  .about-team-grid {
    grid-template-columns: 1fr;
    gap: 32px;
  }

  .about-team-lists {
    grid-template-columns: 1fr 1fr;
  }

  .about-bio-grid {
    grid-template-columns: 1fr;
    gap: 32px;
  }

  .about-bio-photos {
    height: 300px;
  }

  .about-cta {
    padding: 60px 16px;
  }

  .partner-section {
    padding: 48px 16px;
  }

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

  .partner-form-wrap {
    padding: 24px;
    margin-top: 40px;
  }

  .partner-form-row {
    flex-direction: column;
    border-bottom: none;
  }

  .partner-form-row .partner-form-field {
    border-bottom: 1px dashed rgba(0, 0, 0, 0.2);
  }

  .partner-form-field + .partner-form-field {
    border-left: none;
    padding-left: 0;
  }

  .partner-checkbox-grid {
    grid-template-columns: 1fr;
  }
}

/* ============================================================ */
/* === Section expertise + logos clients (intégration index.html) === */
/* ============================================================ */

/* === Expertise variantes (5) ============================================== */
/* Une seule .ev visible à la fois, contrôlée par data-variant sur le parent. */

.expertise-section {
  position: relative;
}
.expertise-section .ev {
  display: none;
}
.expertise-section[data-variant="a"] .ev[data-v="a"],
.expertise-section[data-variant="b"] .ev[data-v="b"],
.expertise-section[data-variant="c"] .ev[data-v="c"],
.expertise-section[data-variant="d"] .ev[data-v="d"],
.expertise-section[data-variant="e"] .ev[data-v="e"] {
  display: block;
}

/* Utilitaires partagés par les 5 variantes (eyebrow, CTA pill) */
.expertise-section .eyebrow {
  font-family: "JetBrains Mono", monospace;
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #555;
  display: inline-block;
}
.expertise-section .eyebrow::before {
  content: "— ";
}

.expertise-section .cta {
  align-self: flex-start;
  background: #000;
  color: #fff;
  padding: 16px 28px;
  border-radius: 999px;
  text-decoration: none;
  font-size: 15px;
  font-weight: 500;
  display: inline-flex;
  gap: 10px;
  align-items: center;
  transition: transform 0.2s;
}
.expertise-section .cta:hover {
  transform: translateY(-1px);
}
.expertise-section .cta::after {
  content: "→";
}

/* === Expertise — design final (globe + portraits) ====================== */
/* ====================================================================== */
.expertise-section {
  background: #fff;
}
.expertise-section .es-inner {
  max-width: 1380px;
  margin: 0 auto;
  padding: 96px 32px 64px;
  position: relative;
}
.expertise-section .es-headline {
  font-family: "Funnel Display", sans-serif;
  font-size: clamp(56px, 8vw, 120px);
  line-height: 0.92;
  letter-spacing: -0.04em;
  font-weight: 600;
  max-width: 12ch;
  margin: 28px 0 80px;
  color: #0a0a0a;
}

/* Caption commune (légende sous photos) */
.expertise-section .es-caption {
  font-family: "JetBrains Mono", monospace;
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #6b6b6b;
  margin-top: 14px;
  display: block;
}

/* ROW 1 : 25+ | "Depuis 1998..." | portrait (baissé, recentré) */
.expertise-section .es-row-stat {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) 220px;
  gap: 56px;
  align-items: end;
  margin-bottom: 280px;
  padding-right: 280px;
}
.expertise-section .es-stat-num {
  font-family: "Funnel Display", sans-serif;
  font-size: clamp(140px, 20vw, 260px);
  line-height: 0.85;
  font-weight: 700;
  letter-spacing: -0.06em;
  color: #0a0a0a;
}
.expertise-section .es-stat-num sup {
  font-size: 0.35em;
  font-weight: 400;
  vertical-align: super;
  line-height: 1;
}
.expertise-section .es-stat-text {
  font-family: "Funnel Display", sans-serif;
  font-size: clamp(20px, 2vw, 28px);
  font-weight: 500;
  line-height: 1.25;
  max-width: 18ch;
  color: #1a1a1a;
  padding-bottom: 16px;
}
.expertise-section .es-stat-text small {
  display: block;
  font-family: "JetBrains Mono", monospace;
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #6b6b6b;
  margin-bottom: 12px;
  font-weight: 400;
}
.expertise-section .es-portrait {
  position: relative;
  align-self: end;
  margin-bottom: -227px; /* Aligne le haut du portrait sur le milieu du 25 */
}
.expertise-section .es-portrait img {
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  border-radius: 4px;
  box-shadow: 0 24px 48px -16px rgba(0, 0, 0, 0.25);
  transform: rotate(-1.5deg);
  display: block;
}

/* ROW 2 : [texte + whiteboard empilés] | globe */
.expertise-section .es-row-mid {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  gap: 64px;
  align-items: center;
  margin-bottom: 96px;
}
.expertise-section .es-row-mid-left {
  display: flex;
  flex-direction: column;
  gap: 40px;
}
.expertise-section .es-mid-text {
  padding-left: 150px; /* Aligne le bord gauche sur le centre du 25 */
}
.expertise-section .es-mid-text p {
  font-family: "Funnel Display", sans-serif;
  font-size: clamp(20px, 1.8vw, 28px);
  font-weight: 400;
  line-height: 1.35;
  letter-spacing: -0.01em;
  color: #1a1a1a;
  max-width: 26ch;
}
.expertise-section .es-whiteboard {
  max-width: 360px;
  transform: rotate(0.8deg);
}
.expertise-section .es-whiteboard img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 4px;
  box-shadow: 0 22px 44px -16px rgba(0, 0, 0, 0.22);
}

/* Globe : disque beige + continents + marqueurs + arc des pays */
.expertise-section .es-globe-wrap {
  position: relative;
  width: 100%;
  max-width: 297px;
  aspect-ratio: 1;
  margin: 0 auto;
  justify-self: center;
}
.expertise-section .es-globe {
  width: 100%;
  height: 100%;
  display: block;
}
.expertise-section .es-globe .disk {
  fill: var(--beige);
}
.expertise-section .es-globe .grid-line {
  stroke: var(--moss);
  stroke-width: 0.5;
  fill: none;
  opacity: 0.55;
}
.expertise-section .es-globe .continent {
  fill: var(--moss);
}
.expertise-section .es-globe .marker {
  fill: #0a0a0a;
}
.expertise-section .es-globe .marker-halo {
  fill: #0a0a0a;
  opacity: 0.15;
}
.expertise-section .es-globe-arc {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.expertise-section .es-globe-arc svg {
  width: 100%;
  height: 100%;
}
.expertise-section .es-globe-arc text {
  font-family: "JetBrains Mono", monospace;
  font-size: 9pt;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  fill: #0a0a0a;
}

/* ROW 3 : 2 photos plus petites + organiques */
.expertise-section .es-row-bottom {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
  gap: 48px;
  margin-top: 32px;
  align-items: start;
}
.expertise-section .es-photo {
  position: relative;
  border-radius: 4px;
  overflow: hidden;
  box-shadow: 0 24px 48px -16px rgba(0, 0, 0, 0.3);
  display: block;
}
.expertise-section .es-photo img {
  width: 100%;
  height: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  display: block;
}
.expertise-section .es-photo .es-caption {
  position: absolute;
  bottom: 12px;
  left: 14px;
  margin-top: 0;
  color: #fff;
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.6);
}
.expertise-section .es-photo-cca {
  max-width: 380px;
  margin-top: 56px;
  margin-left: 60px;
  transform: rotate(-1.5deg);
}
.expertise-section .es-photo-hop {
  max-width: 440px;
  margin-top: 0;
  margin-left: auto;
  transform: rotate(1.6deg);
}

/* Foot — paragraphe + CTA */
.expertise-section .es-foot {
  margin-top: 120px;
  padding-top: 48px;
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 32px;
  flex-wrap: wrap;
}
.expertise-section .es-foot p {
  max-width: 540px;
  font-size: 16px;
  line-height: 1.6;
  color: #333;
}

/* Mobile */
@media (max-width: 980px) {
  .expertise-section .es-row-stat,
  .expertise-section .es-row-mid,
  .expertise-section .es-row-bottom {
    grid-template-columns: 1fr;
    gap: 40px;
  }
  .expertise-section .es-row-stat {
    padding-right: 0;
    margin-bottom: 80px;
  }
  .expertise-section .es-portrait {
    margin-bottom: 0;
    max-width: 240px;
  }
  .expertise-section .es-mid-text {
    padding-left: 0;
  }
  .expertise-section .es-whiteboard {
    max-width: 320px;
  }
  .expertise-section .es-photo-cca,
  .expertise-section .es-photo-hop {
    max-width: 100%;
    margin: 0;
    transform: none;
  }
}

/* === Expertise · VARIANT A REFINED — Portrait + 25+ watermark animé ======= */
/* Grid 2-col : portrait réduit (0.7fr) + stage (2fr) avec 25+ en filigramme */
/* ========================================================================= */

.expertise-section .ev-a .eva-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.7fr) minmax(0, 2fr);
  gap: 48px 56px;
  align-items: start;
  margin-bottom: 72px;
}
.expertise-section .ev-a .eva-portrait {
  max-width: 280px;
}
.expertise-section .ev-a .eva-portrait img {
  width: 100%;
  aspect-ratio: 4/5;
  object-fit: cover;
  border-radius: 4px;
  box-shadow: 0 24px 48px -16px rgba(0, 0, 0, 0.25);
  display: block;
}
.expertise-section .ev-a .eva-stage {
  position: relative;
  min-height: 540px;
  padding: 24px 0 0;
}
.expertise-section .ev-a .eva-stat-bg {
  position: absolute;
  top: 80px;
  right: 32px;
  z-index: 0;
  font-family: "Funnel Display", sans-serif;
  font-size: clamp(360px, 42vw, 600px);
  line-height: 0.85;
  font-weight: 700;
  letter-spacing: -0.06em;
  color: rgba(10, 10, 10, 0.09);
  pointer-events: none;
  user-select: none;
  white-space: nowrap;
  filter: blur(84px);
  opacity: 0;
  transform: scale(1.04);
  transition:
    filter 3.6s cubic-bezier(0.22, 0.61, 0.36, 1),
    opacity 3s cubic-bezier(0.22, 0.61, 0.36, 1),
    transform 4s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.expertise-section .ev-a .eva-stat-bg sup {
  font-size: 0.32em;
  font-weight: 400;
  vertical-align: super;
}
.expertise-section .ev-a .eva-stage.is-visible .eva-stat-bg {
  filter: blur(0);
  opacity: 1;
  transform: scale(1);
}
.expertise-section .ev-a .eva-career {
  position: relative;
  z-index: 2;
  max-width: 56ch;
  padding-left: 8px;
}
.expertise-section .ev-a .eva-career h3 {
  font-family: "Funnel Display", sans-serif;
  font-size: clamp(26px, 2.6vw, 34px);
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -0.025em;
  color: #0a0a0a;
  margin-bottom: 20px;
  max-width: 22ch;
}
.expertise-section .ev-a .eva-career p {
  font-family: "Funnel Sans", sans-serif;
  font-size: 17px;
  line-height: 1.65;
  color: #2a2a2a;
}
.expertise-section .ev-a .eva-stat-sub {
  position: absolute;
  bottom: 24px;
  right: 32px;
  z-index: 2;
  max-width: 320px;
  text-align: right;
  opacity: 0;
  transform: translateY(8px);
  transition:
    opacity 0.9s ease-out 3.2s,
    transform 0.9s ease-out 3.2s;
}
.expertise-section .ev-a .eva-stage.is-visible .eva-stat-sub {
  opacity: 1;
  transform: translateY(0);
}
.expertise-section .ev-a .eva-stat-sub small {
  display: block;
  font-family: "JetBrains Mono", monospace;
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-bottom: 10px;
  font-weight: 400;
}
.expertise-section .ev-a .eva-stat-text {
  font-family: "Funnel Display", sans-serif;
  font-size: 18px;
  line-height: 1.35;
  color: #1a1a1a;
  font-weight: 500;
}
.expertise-section .ev-a .eva-photos {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-bottom: 56px;
}
.expertise-section .ev-a .eva-photo {
  display: block;
  text-decoration: none;
}
.expertise-section .ev-a .eva-photo img {
  width: 100%;
  aspect-ratio: 4/3;
  object-fit: cover;
  border-radius: 4px;
  display: block;
  box-shadow: 0 16px 40px -16px rgba(0, 0, 0, 0.18);
}
.expertise-section .ev-a .eva-sectors {
  background: var(--beige);
  border-radius: 8px;
  padding: 28px 26px;
}
.expertise-section .ev-a .eva-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 8px;
  margin-top: 16px;
}
.expertise-section .ev-a .eva-pill {
  display: inline-flex;
  align-items: center;
  padding: 6px 12px;
  border: 1px solid #0a0a0a;
  border-radius: 999px;
  font-family: "Funnel Display", sans-serif;
  font-size: 12px;
  font-weight: 500;
  color: #0a0a0a;
  white-space: nowrap;
  line-height: 1;
}
.expertise-section .ev-a .es-foot {
  margin-top: 64px;
  padding-top: 32px;
  border-top: 1px solid rgba(10, 10, 10, 0.12);
  flex-direction: column;
  align-items: flex-start;
  gap: 20px;
}
.expertise-section .ev-a .cta {
  background: var(--mint);
  color: #0a0a0a;
  font-family: "JetBrains Mono", monospace;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.expertise-section .ev-a .cta::after {
  display: none;
}
@media (prefers-reduced-motion: reduce) {
  .expertise-section .ev-a .eva-stat-bg,
  .expertise-section .ev-a .eva-stat-sub {
    transition: none !important;
    filter: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
}
@media (max-width: 980px) {
  .expertise-section .ev-a .eva-grid {
    grid-template-columns: 1fr;
    gap: 32px;
  }
  .expertise-section .ev-a .eva-portrait {
    max-width: 240px;
  }
  .expertise-section .ev-a .eva-stage {
    min-height: auto;
    padding: 24px 0;
  }
  .expertise-section .ev-a .eva-stat-bg {
    font-size: 240px;
    left: -40px;
    top: -20px;
  }
  .expertise-section .ev-a .eva-photos {
    grid-template-columns: 1fr 1fr;
  }
}

/* === Expertise · VARIANT B — Grille 3×3 (intégration finale) ============== */
/* Portrait + 25+ + parcours · Globe + texte voyage + secteurs · 3 photos    */
/* ========================================================================= */

.expertise-section .ev-b .evb-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 56px 40px;
  align-items: start;
  margin-top: 24px;
}

/* ROW 1 — portrait | 25+ | parcours */
.expertise-section .ev-b .evb-cell-portrait img {
  width: 100%;
  height: auto;
  border-radius: 4px;
  box-shadow: 0 24px 48px -16px rgba(0, 0, 0, 0.25);
  display: block;
}
.expertise-section .ev-b .evb-cell-portrait .es-caption {
  margin-top: 12px;
  display: block;
}
.expertise-section .ev-b .evb-cell-stat {
  padding-top: 8px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.expertise-section .ev-b .evb-cell-stat .es-stat-num {
  font-family: "Funnel Display", sans-serif;
  font-size: clamp(120px, 14vw, 200px);
  line-height: 0.85;
  font-weight: 700;
  letter-spacing: -0.06em;
  color: #0a0a0a;
}
.expertise-section .ev-b .evb-cell-stat .es-stat-num sup {
  font-size: 0.35em;
  font-weight: 400;
  vertical-align: super;
  line-height: 1;
}
.expertise-section .ev-b .evb-cell-stat .es-stat-text {
  font-family: "Funnel Display", sans-serif;
  font-size: 22px;
  line-height: 1.25;
  font-weight: 500;
  max-width: 16ch;
  color: #1a1a1a;
}
.expertise-section .ev-b .evb-cell-stat .es-stat-text small {
  display: block;
  font-family: "JetBrains Mono", monospace;
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #6b6b6b;
  margin-bottom: 12px;
  font-weight: 400;
}
.expertise-section .ev-b .evb-cell-career {
  padding-top: 16px;
}
.expertise-section .ev-b .evb-career-title {
  font-family: "Funnel Display", sans-serif;
  font-size: clamp(22px, 2vw, 28px);
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: #0a0a0a;
  margin-bottom: 16px;
  max-width: 18ch;
}
.expertise-section .ev-b .evb-career-body {
  font-family: "Funnel Sans", sans-serif;
  font-size: 16px;
  line-height: 1.65;
  color: #2a2a2a;
}

/* ROW 2 — globe | texte voyage | secteurs */
.expertise-section .ev-b .evb-cell-globe {
  align-self: center;
}
.expertise-section .ev-b .evb-globe-wrap {
  position: relative;
  width: 100%;
  max-width: 400px;
  aspect-ratio: 1;
  margin: 0 auto;
}
.expertise-section .ev-b .evb-globe {
  width: 100%;
  height: 100%;
  display: block;
}
.expertise-section .ev-b .evb-globe .disk {
  fill: var(--beige);
}
.expertise-section .ev-b .evb-globe .grid-line {
  stroke: var(--moss);
  stroke-width: 0.5;
  fill: none;
  opacity: 0.55;
}
.expertise-section .ev-b .evb-globe .continent {
  fill: var(--moss);
}
.expertise-section .ev-b .evb-globe .marker {
  fill: #0a0a0a;
}
.expertise-section .ev-b .evb-globe .marker-halo {
  fill: #0a0a0a;
  opacity: 0.15;
}
.expertise-section .ev-b .evb-globe-arc {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.expertise-section .ev-b .evb-globe-arc svg {
  width: 100%;
  height: 100%;
}
.expertise-section .ev-b .evb-globe-arc text {
  font-family: "JetBrains Mono", monospace;
  font-size: 9pt;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  fill: #0a0a0a;
}

.expertise-section .ev-b .evb-cell-travel {
  align-self: center;
}
.expertise-section .ev-b .evb-travel {
  font-family: "Funnel Display", sans-serif;
  font-size: clamp(22px, 2.2vw, 32px);
  font-weight: 400;
  line-height: 1.35;
  letter-spacing: -0.01em;
  color: #1a1a1a;
}

.expertise-section .ev-b .evb-cell-sectors {
  align-self: center;
}
.expertise-section .ev-b .evb-sectors {
  background: var(--beige);
  border-radius: 8px;
  padding: 28px 26px;
  position: relative;
}
.expertise-section .ev-b .evb-sectors .eyebrow {
  margin-bottom: 20px;
  display: inline-block;
}
.expertise-section .ev-b .evb-sectors-list {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 8px;
  max-width: 380px;
}
.expertise-section .ev-b .evb-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px 6px 10px;
  background: transparent;
  border: 1px solid #0a0a0a;
  border-radius: 999px;
  font-family: "Funnel Display", sans-serif;
  font-size: 12px;
  font-weight: 500;
  color: #0a0a0a;
  white-space: nowrap;
  letter-spacing: -0.01em;
  line-height: 1;
}
.expertise-section .ev-b .evb-pill-ic {
  width: 13px;
  height: 13px;
  stroke: #0a0a0a;
  fill: none;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
  flex-shrink: 0;
}

/* ROW 3 — whiteboard | CCA | Hop : photos en ratio natif (pas de crop) */
.expertise-section .ev-b .es-photo {
  /* Hérité du style de base (.expertise-section .es-photo) — */
  /* on retire l'aspect-ratio 4/3 pour conserver le ratio natif des images */
}
.expertise-section .ev-b .es-photo img {
  aspect-ratio: auto;
  width: 100%;
  height: auto;
  object-fit: initial;
}
.expertise-section .ev-b .evb-cell-whiteboard .es-caption {
  position: static;
  color: #6b6b6b;
  text-shadow: none;
  margin-top: 12px;
  display: block;
}

/* Mobile */
@media (max-width: 980px) {
  .expertise-section .ev-b .evb-grid {
    grid-template-columns: 1fr;
    gap: 40px;
  }
  .expertise-section .ev-b .evb-globe-wrap {
    max-width: 320px;
  }
}

/* === VARIANT A — Mockup fidèle (bento asymétrique 3×3) === */
/* (code mort — ces styles ne sont référencés par aucun markup actif) */
/* ============================================================ */
.ev-a .ev-a-section {
  padding: 80px 24px;
}
.ev-a .ev-a-card {
  max-width: 1280px;
  margin: 0 auto;
  background: var(--cream);
  border-radius: 32px;
  padding: 80px;
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  gap: 64px;
  align-items: center;
}
.ev-a .ev-a-text {
  display: flex;
  flex-direction: column;
  gap: 28px;
  max-width: 480px;
}
.ev-a .ev-a-text h2 {
  font-size: clamp(40px, 4.5vw, 64px);
  line-height: 1.02;
  font-weight: 600;
  color: #0a0a0a;
}
.ev-a .ev-a-text p {
  font-size: 16px;
  line-height: 1.65;
  color: #333;
}
.ev-a .ev-a-bento {
  display: grid;
  grid-template-columns: 1.15fr 0.95fr 0.95fr;
  grid-template-rows: 1fr 1fr 1.2fr;
  gap: 14px;
  height: 560px;
}
.ev-a .ev-a-cell {
  border-radius: 18px;
  overflow: hidden;
  position: relative;
}
.ev-a .ev-a-cell img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.ev-a .ev-a-c-portrait {
  grid-column: 1;
  grid-row: 1 / 3;
}
.ev-a .ev-a-c-conf {
  grid-column: 2 / 4;
  grid-row: 1;
}
.ev-a .ev-a-c-map {
  grid-column: 2;
  grid-row: 2;
  background: var(--beige);
  padding: 18px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.ev-a .ev-a-c-stat {
  grid-column: 3;
  grid-row: 2;
  background: var(--mint);
  padding: 18px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.ev-a .ev-a-c-teach {
  grid-column: 1 / 4;
  grid-row: 3;
}
.ev-a .ev-a-caption {
  position: absolute;
  bottom: 14px;
  left: 16px;
  color: #fff;
  font-family: "JetBrains Mono", monospace;
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.6);
}
.ev-a .ev-a-stat-num {
  font-family: "Funnel Display", sans-serif;
  font-size: 64px;
  font-weight: 700;
  line-height: 1;
  display: flex;
  align-items: flex-start;
}
.ev-a .ev-a-stat-num sup {
  font-size: 28px;
  margin-top: 4px;
  font-weight: 400;
}
.ev-a .ev-a-stat-label {
  font-family: "JetBrains Mono", monospace;
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #444;
}
.ev-a .ev-a-map-svg {
  width: 100%;
  height: auto;
  opacity: 0.55;
}
@media (max-width: 900px) {
  .ev-a .ev-a-card {
    grid-template-columns: 1fr;
    padding: 40px;
    gap: 40px;
  }
  .ev-a .ev-a-bento {
    height: auto;
    grid-template-rows: 280px 220px 240px;
  }
}

/* === VARIANT B — 2×2 + bandeau bas === */
/* ============================================================ */
.ev-b .ev-b-section {
  padding: 80px 24px;
}
.ev-b .ev-b-wrap {
  max-width: 1280px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  gap: 64px;
  align-items: start;
  margin-bottom: 16px;
}
.ev-b .ev-b-text {
  display: flex;
  flex-direction: column;
  gap: 28px;
  max-width: 480px;
  padding-top: 16px;
}
.ev-b .ev-b-text h2 {
  font-size: clamp(40px, 4.5vw, 64px);
  line-height: 1.02;
  font-weight: 600;
}
.ev-b .ev-b-text p {
  font-size: 16px;
  line-height: 1.65;
  color: #333;
}
.ev-b .ev-b-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  gap: 16px;
  height: 480px;
}
.ev-b .ev-b-cell {
  border-radius: 20px;
  overflow: hidden;
  position: relative;
}
.ev-b .ev-b-cell img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.ev-b .ev-b-stat-cell {
  background: var(--beige);
  padding: 28px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.ev-b .ev-b-map-cell {
  background: var(--mint);
  padding: 28px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.ev-b .ev-b-stat-num {
  font-family: "Funnel Display", sans-serif;
  font-size: 88px;
  font-weight: 700;
  line-height: 1;
}
.ev-b .ev-b-stat-num sup {
  font-size: 36px;
  font-weight: 400;
}
.ev-b .ev-b-stat-label {
  font-family: "JetBrains Mono", monospace;
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #333;
}
.ev-b .ev-b-banner {
  max-width: 1280px;
  margin: 24px auto 0;
  height: 320px;
  border-radius: 24px;
  overflow: hidden;
}
.ev-b .ev-b-banner img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
@media (max-width: 900px) {
  .ev-b .ev-b-wrap {
    grid-template-columns: 1fr;
  }
  .ev-b .ev-b-grid {
    height: auto;
    grid-template-rows: 220px 220px;
  }
}

/* === VARIANT C — Portrait dominant + chips empilés === */
/* ============================================================ */
.ev-c .ev-c-section {
  padding: 80px 24px;
  background: var(--cream);
}
.ev-c .ev-c-wrap {
  max-width: 1280px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 0.8fr 1.2fr;
  gap: 56px;
  align-items: start;
}
.ev-c .ev-c-text {
  display: flex;
  flex-direction: column;
  gap: 28px;
  max-width: 460px;
  padding-top: 24px;
}
.ev-c .ev-c-text h2 {
  font-size: clamp(40px, 4.5vw, 60px);
  line-height: 1.02;
  font-weight: 600;
}
.ev-c .ev-c-text p {
  font-size: 16px;
  line-height: 1.65;
  color: #333;
}
.ev-c .ev-c-bento {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  grid-template-rows: repeat(4, 1fr);
  gap: 12px;
  height: 600px;
}
.ev-c .ev-c-portrait {
  grid-column: 1;
  grid-row: 1 / 5;
  border-radius: 20px;
  overflow: hidden;
  position: relative;
}
.ev-c .ev-c-portrait img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.ev-c .ev-c-chip {
  grid-column: 2;
  border-radius: 16px;
  overflow: hidden;
  position: relative;
}
.ev-c .ev-c-chip img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.ev-c .ev-c-chip-stat {
  background: #000;
  color: #fff;
  padding: 20px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.ev-c .ev-c-chip-map {
  background: var(--moss);
  padding: 20px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.ev-c .ev-c-chip-stat .num {
  font-family: "Funnel Display", sans-serif;
  font-size: 56px;
  font-weight: 700;
  line-height: 1;
}
.ev-c .ev-c-chip-stat .num sup {
  font-size: 24px;
  font-weight: 400;
}
.ev-c .ev-c-chip-stat .lbl {
  font-family: "JetBrains Mono", monospace;
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #aaa;
}
.ev-c .ev-c-chip-map .lbl {
  font-family: "JetBrains Mono", monospace;
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #1a1a1a;
}
.ev-c .ev-c-chip-map .num {
  font-family: "Funnel Display", sans-serif;
  font-size: 56px;
  font-weight: 700;
  line-height: 1;
  color: #1a1a1a;
}
.ev-c .ev-c-caption {
  position: absolute;
  bottom: 12px;
  left: 14px;
  color: #fff;
  font-family: "JetBrains Mono", monospace;
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.6);
}
@media (max-width: 900px) {
  .ev-c .ev-c-wrap {
    grid-template-columns: 1fr;
  }
  .ev-c .ev-c-bento {
    height: auto;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 320px repeat(2, 160px);
  }
  .ev-c .ev-c-portrait {
    grid-column: 1 / 3;
    grid-row: 1;
  }
  .ev-c .ev-c-chip {
    grid-column: auto;
  }
}

/* === VARIANT D — Éditorial split-cinema (non-grid) === */
/* ============================================================ */
.ev-d {
  background: #0e0e0e;
  color: #fff;
}
.ev-d .ev-d-section {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  min-height: 100vh;
}
.ev-d .ev-d-left {
  position: relative;
  background: #1a1a1a;
  overflow: hidden;
}
.ev-d .ev-d-left img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 30%;
  filter: contrast(1.05) saturate(0.9);
}
.ev-d .ev-d-left::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    transparent 30%,
    rgba(0, 0, 0, 0.4) 65%,
    rgba(0, 0, 0, 0.92) 100%
  );
  pointer-events: none;
}
.ev-d .ev-d-overlay {
  position: absolute;
  left: 56px;
  right: 56px;
  bottom: 56px;
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.ev-d .ev-d-overlay .eyebrow {
  color: rgba(255, 255, 255, 0.7);
}
.ev-d .ev-d-overlay h2 {
  font-size: clamp(48px, 6vw, 88px);
  line-height: 0.98;
  font-weight: 600;
  color: #fff;
  letter-spacing: -0.025em;
}
.ev-d .ev-d-overlay .name {
  font-family: "JetBrains Mono", monospace;
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.55);
  margin-top: 8px;
}
.ev-d .ev-d-right {
  background: #0e0e0e;
  padding: 56px;
  display: flex;
  flex-direction: column;
  gap: 0;
}
.ev-d .ev-d-strip {
  flex: 1;
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 20px;
  padding: 28px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.ev-d .ev-d-strip:first-of-type {
  padding-top: 0;
}
.ev-d .ev-d-strip:last-of-type {
  border-bottom: 0;
}
.ev-d .ev-d-strip .ev-d-thumb {
  height: 140px;
  border-radius: 8px;
  overflow: hidden;
  background: #222;
}
.ev-d .ev-d-strip .ev-d-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.ev-d .ev-d-strip .ev-d-meta {
  display: flex;
  flex-direction: column;
  gap: 8px;
  justify-content: center;
}
.ev-d .ev-d-strip .ev-d-meta .lbl {
  font-family: "JetBrains Mono", monospace;
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.55);
}
.ev-d .ev-d-strip .ev-d-meta .ttl {
  font-family: "Funnel Display", sans-serif;
  font-size: 22px;
  font-weight: 500;
  color: #fff;
  line-height: 1.15;
}
.ev-d .ev-d-stat-line {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  padding: 28px 0 0;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}
.ev-d .ev-d-stat-line .num {
  font-family: "Funnel Display", sans-serif;
  font-size: 56px;
  font-weight: 600;
  line-height: 1;
  color: #fff;
}
.ev-d .ev-d-stat-line .num sup {
  font-size: 24px;
  font-weight: 300;
}
.ev-d .ev-d-stat-line .lbl {
  font-family: "JetBrains Mono", monospace;
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.55);
  margin-top: 6px;
}
.ev-d .ev-d-cta-row {
  margin-top: 28px;
}
.ev-d .ev-d-cta-row .cta {
  background: #fff;
  color: #000;
}
.ev-d .ev-d-logos {
  background: #0e0e0e;
  padding: 80px 24px 100px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}
.ev-d .ev-d-logos .lc-inner {
  max-width: 1280px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 80px;
  align-items: center;
}
.ev-d .ev-d-logos .lc-logo {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 50px;
  filter: invert(1);
  opacity: 0.6;
  transition: opacity 0.3s;
}
.ev-d .ev-d-logos .lc-logo:hover {
  opacity: 1;
}
.ev-d .ev-d-logos .lc-logo img {
  max-height: 100%;
  width: auto;
  object-fit: contain;
}
@media (max-width: 900px) {
  .ev-d .ev-d-section {
    grid-template-columns: 1fr;
  }
  .ev-d .ev-d-left {
    min-height: 70vh;
  }
  .ev-d .ev-d-right {
    padding: 40px 24px;
  }
}

/* === VARIANT E — Manifesto typographique (chiffres XXL) === */
/* ============================================================ */
.ev-e .ev-e-section {
  padding: 120px 32px 80px;
  background: #fff;
  position: relative;
  overflow: hidden;
}
.ev-e .ev-e-inner {
  max-width: 1380px;
  margin: 0 auto;
  position: relative;
}
.ev-e .ev-e-eyebrow-row {
  margin-bottom: 32px;
}
.ev-e .ev-e-headline {
  font-family: "Funnel Display", sans-serif;
  font-size: clamp(56px, 8vw, 128px);
  line-height: 0.92;
  letter-spacing: -0.04em;
  font-weight: 600;
  max-width: 12ch;
  margin-bottom: 72px;
  color: #0a0a0a;
}
.ev-e .ev-e-stat-block {
  display: flex;
  align-items: baseline;
  gap: 32px;
  margin-bottom: 96px;
  flex-wrap: wrap;
}
.ev-e .ev-e-stat-num {
  font-family: "Funnel Display", sans-serif;
  font-size: clamp(140px, 22vw, 320px);
  line-height: 0.85;
  font-weight: 700;
  letter-spacing: -0.06em;
  color: #0a0a0a;
  position: relative;
}
.ev-e .ev-e-stat-num sup {
  font-size: 0.35em;
  font-weight: 400;
  vertical-align: super;
  line-height: 1;
  margin-left: 0.05em;
}
.ev-e .ev-e-stat-text {
  font-family: "Funnel Display", sans-serif;
  font-size: clamp(24px, 2.6vw, 40px);
  font-weight: 500;
  line-height: 1.1;
  max-width: 16ch;
  color: #1a1a1a;
}
.ev-e .ev-e-stat-text small {
  display: block;
  font-family: "JetBrains Mono", monospace;
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 12px;
  font-weight: 400;
}

/* Asymmetric editorial photo grid — natural ratios, no overlap */
.ev-e .ev-e-photos {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  column-gap: 32px;
  row-gap: 56px;
  margin: 32px 0 80px;
  align-items: start;
}
.ev-e .ev-e-photo {
  position: relative;
  border-radius: 4px;
  overflow: hidden;
  box-shadow: 0 30px 60px -20px rgba(0, 0, 0, 0.25);
}
.ev-e .ev-e-photo img {
  width: 100%;
  height: auto;
  display: block;
}
.ev-e .ev-e-photo .lbl {
  position: absolute;
  bottom: 10px;
  left: 12px;
  font-family: "JetBrains Mono", monospace;
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #fff;
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.6);
}
/* Row 1: portrait + subtitle text block + conférence */
.ev-e .ev-e-p1 {
  grid-column: 1 / span 2;
  grid-row: 1;
  transform: rotate(-1.5deg);
  margin-top: 0;
}
.ev-e .ev-e-p2 {
  grid-column: 8 / span 5;
  grid-row: 1;
  transform: rotate(1deg);
  margin-top: 64px;
}
/* Row 2: formation + atelier, staggered */
.ev-e .ev-e-p3 {
  grid-column: 2 / span 4;
  grid-row: 2;
  transform: rotate(-0.5deg);
  margin-top: -16px;
}
.ev-e .ev-e-p4 {
  grid-column: 9 / span 3;
  grid-row: 2;
  transform: rotate(1.5deg);
  margin-top: 48px;
}
/* Subtitle text block — sits between portrait and conférence in row 1 */
.ev-e .ev-e-subtitle-block {
  grid-column: 4 / span 4;
  grid-row: 1;
  align-self: center;
  padding: 24px 8px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.ev-e .ev-e-subtitle-block .eyebrow {
  color: var(--muted);
}
.ev-e .ev-e-subtitle-block p {
  font-family: "Funnel Display", sans-serif;
  font-size: clamp(20px, 1.7vw, 26px);
  font-weight: 400;
  line-height: 1.35;
  letter-spacing: -0.01em;
  color: #1a1a1a;
}

.ev-e .ev-e-foot {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  flex-wrap: wrap;
  gap: 32px;
  padding-top: 48px;
  border-top: 1px solid #e8e8e3;
}
.ev-e .ev-e-foot p {
  max-width: 540px;
  font-size: 16px;
  line-height: 1.6;
  color: #333;
}
.ev-e .ev-e-marquees {
  margin-top: 64px;
  background: #0a0a0a;
  color: #fff;
}
.ev-e .ev-e-marquee {
  padding: 18px 0;
  overflow: hidden;
  white-space: nowrap;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.ev-e .ev-e-marquee:last-child {
  border-bottom: 0;
}
.ev-e .ev-e-marquee-track {
  display: inline-flex;
  gap: 56px;
  font-family: "Funnel Display", sans-serif;
  letter-spacing: -0.01em;
  will-change: transform;
}
.ev-e .ev-e-marquee-track > span {
  display: inline-flex;
  align-items: center;
  gap: 56px;
}
.ev-e .ev-e-marquee-track > span::after {
  content: "✦";
  color: rgba(255, 255, 255, 0.3);
}
.ev-e .ev-e-marquee--countries .ev-e-marquee-track {
  font-size: 38px;
  font-weight: 500;
  animation: ev-e-scroll-l 36s linear infinite;
}
.ev-e .ev-e-marquee--sectors .ev-e-marquee-track {
  font-size: 26px;
  font-weight: 400;
  color: rgba(255, 255, 255, 0.7);
  animation: ev-e-scroll-r 22s linear infinite;
}
@keyframes ev-e-scroll-l {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-50%);
  }
}
@keyframes ev-e-scroll-r {
  from {
    transform: translateX(-50%);
  }
  to {
    transform: translateX(0);
  }
}
@media (max-width: 900px) {
  .ev-e .ev-e-photos {
    grid-template-columns: 1fr 1fr;
    row-gap: 32px;
  }
  .ev-e .ev-e-subtitle-block {
    grid-column: 1 / -1;
    grid-row: auto;
    padding: 0;
  }
  .ev-e .ev-e-p1 {
    grid-column: 1;
    grid-row: auto;
    margin-top: 0;
  }
  .ev-e .ev-e-p2 {
    grid-column: 2;
    grid-row: auto;
    margin-top: 24px;
  }
  .ev-e .ev-e-p3 {
    grid-column: 1;
    grid-row: auto;
    margin-top: 0;
  }
  .ev-e .ev-e-p4 {
    grid-column: 2;
    grid-row: auto;
    margin-top: 24px;
  }
}

/* === Logos clients ======================================================== */
/* === Shared: logos-clients banner (5 variantes) ============================ */
/* Une seule .lc visible à la fois, contrôlée par data-variant sur la section. */

.logos-clients {
  position: relative;
}
.logos-clients .lc {
  display: none;
}
.logos-clients[data-variant="a"] .lc[data-v="a"],
.logos-clients[data-variant="b"] .lc[data-v="b"],
.logos-clients[data-variant="c"] .lc[data-v="c"],
.logos-clients[data-variant="d"] .lc[data-v="d"],
.logos-clients[data-variant="e"] .lc[data-v="e"] {
  display: block;
}

/* Layout grid partagé par A, B, C, E */
.logos-clients .lc-inner {
  max-width: 1280px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 80px;
  align-items: center;
}
.logos-clients .lc-logo {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 72px;
}
.logos-clients .lc-logo img {
  max-height: 100%;
  max-width: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  transition:
    opacity 0.3s,
    transform 0.3s;
}
/* Normalisation par logo (compense les ratios variables) */
.logos-clients .lc-logo[data-logo="2ndskin"] {
  height: auto;
  min-height: 72px;
}
.logos-clients .lc-logo[data-logo="2ndskin"] img {
  max-height: 140px;
}
.logos-clients .lc-logo[data-logo="brulerie"] img {
  max-height: 96px;
}
.logos-clients .lc-logo[data-logo="gsf"] img {
  max-height: 38px;
}
.logos-clients .lc-logo[data-logo="ace"] img {
  max-height: 48px;
}

/* === VARIANT A — Noir profond, logos blancs (contraste max) === */
.lc-a {
  background: #000;
  padding: 48px 24px;
}
.lc-a .lc-logo img {
  opacity: 0.85;
  filter: invert(1) brightness(1.1);
}
.lc-a .lc-logo:hover img {
  opacity: 1;
}

/* === VARIANT B — Beige brand "halo" === */
.lc-b {
  background: var(--beige);
  padding: 48px 24px;
  border-top: 1px solid rgba(0, 0, 0, 0.06);
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}
.lc-b .lc-logo img {
  opacity: 0.8;
}
.lc-b .lc-logo:hover img {
  opacity: 1;
}

/* === VARIANT C — Cream + eyebrow narratif === */
.lc-c {
  background: #f4f4f1;
  padding: 40px 24px 48px;
  text-align: center;
}
.lc-c .lc-c-eyebrow {
  display: inline-block;
  font-family: "JetBrains Mono", monospace;
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #555;
  margin-bottom: 56px;
}
.lc-c .lc-c-eyebrow::before {
  content: "— ";
}
.lc-c .lc-inner {
  gap: 64px;
}
.lc-c .lc-logo img {
  opacity: 0.7;
}
.lc-c .lc-logo:hover img {
  opacity: 1;
}

/* === VARIANT D — Marquee mint, défilement infini === */
.lc-d {
  background: var(--mint);
  padding: 36px 0;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(
    to right,
    transparent 0,
    #000 8%,
    #000 92%,
    transparent 100%
  );
  mask-image: linear-gradient(
    to right,
    transparent 0,
    #000 8%,
    #000 92%,
    transparent 100%
  );
}
.lc-d-track {
  display: flex;
  width: max-content;
  animation: lc-marquee 32s linear infinite;
}
.lc-d-set {
  display: flex;
  align-items: center;
  gap: 120px;
  padding-right: 120px;
  flex-shrink: 0;
}
.lc-d .lc-logo {
  width: auto;
  flex-shrink: 0;
}
.lc-d .lc-logo img {
  opacity: 0.8;
}
@keyframes lc-marquee {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-50%);
  }
}
@media (prefers-reduced-motion: reduce) {
  .lc-d-track {
    animation: none;
  }
}

/* === VARIANT E — Cards blanches sur noir doux === */
.lc-e {
  background: #111;
  padding: 40px 24px;
}
.lc-e .lc-inner {
  gap: 24px;
}
.lc-e .lc-e-card {
  background: #fff;
  border-radius: var(--radius-md);
  height: 120px;
  padding: 24px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
  transition:
    transform 0.3s,
    box-shadow 0.3s;
}
.lc-e .lc-e-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.35);
}
.lc-e .lc-logo img {
  opacity: 1;
}

/* Responsive partagé */
@media (max-width: 720px) {
  .logos-clients .lc-inner {
    grid-template-columns: repeat(2, 1fr);
    gap: 48px;
  }
  .lc-a,
  .lc-b,
  .lc-c,
  .lc-e {
    padding: 32px 24px;
  }
  .lc-d {
    padding: 28px 0;
  }
  .lc-d-set {
    gap: 72px;
    padding-right: 72px;
  }
  .lc-e .lc-e-card {
    height: 96px;
    padding: 16px;
  }
}

/* === Variant switcher ===================================================== */
/* Caché par défaut. JS retire [hidden] uniquement si ?demo dans l'URL.       */

.variant-switcher[hidden] {
  display: none !important;
}

.variant-switcher {
  /* Ancré au bas-droite de la section parente (scroll avec elle) — chaque   */
  /* section qui propose des variantes a son propre bouton à sa base.        */
  position: absolute;
  bottom: 24px;
  right: 24px;
  z-index: 5;
  font-family: "JetBrains Mono", monospace;
}
.variant-switcher-button {
  width: 36px;
  height: 36px;
  border-radius: 999px;
  border: 1px solid rgba(0, 0, 0, 0.1);
  background: rgba(255, 255, 255, 0.95);
  color: #111;
  cursor: pointer;
  opacity: 0.35;
  transition:
    opacity 0.2s,
    transform 0.2s;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}
.variant-switcher-button:hover,
.variant-switcher-button:focus-visible,
.variant-switcher.open .variant-switcher-button {
  opacity: 1;
  transform: scale(1.05);
}
.variant-switcher-popover {
  position: absolute;
  bottom: 48px;
  right: 0;
  display: none;
  gap: 4px;
  padding: 5px;
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 999px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
}
.variant-switcher.open .variant-switcher-popover {
  display: flex;
}
.variant-switcher-popover button {
  font-family: "JetBrains Mono", monospace;
  font-size: 11px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  border: 0;
  background: transparent;
  color: #444;
  padding: 8px 12px;
  border-radius: 999px;
  cursor: pointer;
}
.variant-switcher-popover button.active {
  background: #000;
  color: #fff;
}

/* === Variant switcher — modificateur footer (sticky bas-droite) ============ */
/* Le footer étant à la base du flux, on utilise position: fixed pour rester  */
/* visible pendant le scroll (UX "sticky" demandée par le user).              */

.variant-switcher--footer {
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: 50;
}

/* === Variantes du footer (démo) =========================================== */
/* Pilotées par data-variant sur .footer-wrapper. Activées via ?demo +         */
/* footer-variants.js. Aucune visibilité par défaut (variant "a" = défaut).   */

/* B — Bleu dégradé : foncé sur les bords, clair (quasi blanc) au centre.    */
/*    Tous les textes passent en noir pour la lisibilité.                    */
.footer-wrapper[data-variant="b"] .footer-container {
  background: radial-gradient(
    ellipse 75% 110% at center,
    var(--sky-light) 0%,
    var(--sky-light) 12%,
    var(--sky) 55%,
    var(--sky-dark) 100%
  );
}
.footer-wrapper[data-variant="b"] .text-footer-tagline,
.footer-wrapper[data-variant="b"] .label-micro,
.footer-wrapper[data-variant="b"] .text-body-sm,
.footer-wrapper[data-variant="b"] .footer-clock-time,
.footer-wrapper[data-variant="b"] .footer-clock-label,
.footer-wrapper[data-variant="b"] .footer-copyright {
  color: var(--black);
  opacity: 1;
}
.footer-wrapper[data-variant="b"] .footer-clock circle,
.footer-wrapper[data-variant="b"] .footer-clock line {
  stroke: var(--black);
}
.footer-wrapper[data-variant="b"] .footer-clock circle[fill] {
  fill: var(--black);
}
.footer-wrapper[data-variant="b"] .footer-divider {
  border-top-color: rgba(0, 0, 0, 0.18);
}

/* C — Beige × Moss : dégradé deux teintes, wordmark en moss-deep tone-on-tone. */
.footer-wrapper[data-variant="c"] .footer-container {
  background: linear-gradient(
    135deg,
    var(--beige) 0%,
    var(--beige) 55%,
    var(--moss) 130%
  );
}
.footer-wrapper[data-variant="c"] .footer-wordmark svg path {
  fill: var(--moss-deep);
}
.footer-wrapper[data-variant="c"] .text-footer-tagline,
.footer-wrapper[data-variant="c"] .label-micro,
.footer-wrapper[data-variant="c"] .text-body-sm,
.footer-wrapper[data-variant="c"] .footer-clock-time,
.footer-wrapper[data-variant="c"] .footer-clock-label,
.footer-wrapper[data-variant="c"] .footer-copyright {
  color: var(--black);
  opacity: 1;
}
.footer-wrapper[data-variant="c"] .footer-clock circle,
.footer-wrapper[data-variant="c"] .footer-clock line {
  stroke: var(--black);
}
.footer-wrapper[data-variant="c"] .footer-clock circle[fill] {
  fill: var(--black);
}
.footer-wrapper[data-variant="c"] .footer-divider {
  border-top-color: rgba(0, 0, 0, 0.14);
}

/* D — Vert (mint) : wordmark en mint-deep tone-on-tone. */
.footer-wrapper[data-variant="d"] .footer-container {
  background: var(--mint);
}
.footer-wrapper[data-variant="d"] .footer-wordmark svg path {
  fill: var(--mint-deep);
}
.footer-wrapper[data-variant="d"] .text-footer-tagline,
.footer-wrapper[data-variant="d"] .label-micro,
.footer-wrapper[data-variant="d"] .text-body-sm,
.footer-wrapper[data-variant="d"] .footer-clock-time,
.footer-wrapper[data-variant="d"] .footer-clock-label,
.footer-wrapper[data-variant="d"] .footer-copyright {
  color: var(--black);
  opacity: 1;
}
.footer-wrapper[data-variant="d"] .footer-clock circle,
.footer-wrapper[data-variant="d"] .footer-clock line {
  stroke: var(--black);
}
.footer-wrapper[data-variant="d"] .footer-clock circle[fill] {
  fill: var(--black);
}
.footer-wrapper[data-variant="d"] .footer-divider {
  border-top-color: rgba(0, 0, 0, 0.12);
}

/* E — Mauve (lavender) : wordmark blanc. */
.footer-wrapper[data-variant="e"] .footer-container {
  background: var(--lavender);
}
.footer-wrapper[data-variant="e"] .footer-wordmark svg path {
  fill: #fff;
}

/* ============================================================ */
/* === Section services + 2e switcher (intégration index.html) === */
/* ============================================================ */

/* === Section services (5 variantes) ====================================== */
/* Une seule .sv visible à la fois, contrôlée par data-variant sur le parent. */

.services-section {
  position: relative;
}
.services-section .sv {
  display: none;
}
.services-section[data-variant="a"] .sv[data-v="a"],
.services-section[data-variant="b"] .sv[data-v="b"],
.services-section[data-variant="c"] .sv[data-v="c"],
.services-section[data-variant="d"] .sv[data-v="d"],
.services-section[data-variant="e"] .sv[data-v="e"] {
  display: block;
}

/* Utilitaires (eyebrow, cta) — réutilise les styles de la section expertise */
.services-section .eyebrow {
  font-family: "JetBrains Mono", monospace;
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #555;
  display: inline-block;
}
.services-section .eyebrow::before {
  content: "— ";
}

.services-section .cta {
  align-self: flex-start;
  background: #000;
  color: #fff;
  padding: 14px 26px;
  border-radius: 999px;
  text-decoration: none;
  font-size: 14px;
  font-weight: 500;
  display: inline-flex;
  gap: 10px;
  align-items: center;
  transition: transform 0.2s;
}
.services-section .cta:hover {
  transform: translateY(-1px);
}
.services-section .cta::after {
  content: "→";
}
/* === VARIANT A — Comme la vidéo (faithful)               === */
/* ============================================================ */
.sv-a {
  background: #fff;
  padding: 120px 24px;
}
.sv-a-container {
  max-width: 1280px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 0.8fr 1.2fr;
  gap: 80px;
  align-items: start;
}
.sv-a-left {
  display: flex;
  flex-direction: column;
  gap: 24px;
  max-width: 380px;
  padding-top: 40px;
}
.sv-a-left h2 {
  font-size: clamp(36px, 4vw, 52px);
  line-height: 1.05;
  font-weight: 600;
}
.sv-a-left p {
  font-size: 15px;
  line-height: 1.6;
  color: #333;
}
.sv-a-right {
  display: flex;
  flex-direction: column;
}
.sv-a-row {
  position: relative;
  display: grid;
  grid-template-columns: 40px 56px 1fr;
  gap: 24px;
  align-items: center;
  padding: 32px 0;
  border-top: 1px dashed var(--line);
}
.sv-a-row:last-child {
  border-bottom: 1px dashed var(--line);
}
.sv-a-num {
  font-family: "JetBrains Mono", monospace;
  font-size: 12px;
  color: var(--muted);
}
.sv-a-icon {
  width: 56px;
  height: 56px;
  border-radius: 999px;
  background: var(--mint);
  color: #0e3d20;
  display: flex;
  align-items: center;
  justify-content: center;
  transition:
    background 0.25s,
    color 0.25s;
}
.sv-a-icon svg {
  width: 24px;
  height: 24px;
}
.sv-a-meta h3 {
  font-size: 22px;
  font-weight: 600;
  margin-bottom: 6px;
}
.sv-a-meta p {
  font-size: 14px;
  line-height: 1.55;
  color: #444;
  max-width: 480px;
}

.sv-a-row:hover .sv-a-icon {
  background: #000;
  color: #fff;
}

.sv-a-preview {
  position: absolute;
  right: calc(100% + 20px);
  top: 50%;
  transform: translateY(-50%) translateX(-20px);
  width: 320px;
  background: #fff;
  border: 1px solid #e2e2dd;
  border-radius: 12px;
  box-shadow:
    0 30px 60px -20px rgba(0, 0, 0, 0.18),
    0 6px 12px rgba(0, 0, 0, 0.04);
  opacity: 0;
  pointer-events: none;
  transition:
    opacity 0.25s,
    transform 0.25s;
  z-index: 5;
}
.sv-a-row:hover .sv-a-preview {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(-50%) translateX(0);
}
.sv-a-preview-chrome {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  border-bottom: 1px solid #f0efea;
  font-family: "JetBrains Mono", monospace;
  font-size: 11px;
  color: var(--muted);
}
.sv-a-preview-chrome::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: #d8d8d2;
}
.sv-a-preview-body {
  padding: 16px 16px 0;
}
.sv-a-preview-body p {
  font-size: 14px;
  line-height: 1.45;
  color: #1a1a1a;
}
.sv-a-preview-body p strong {
  font-weight: 600;
}
.sv-a-preview-foot {
  padding: 14px 16px 16px;
}
.sv-a-term {
  font-family: "JetBrains Mono", monospace;
  font-size: 11px;
  background: #0e0e0e;
  color: #ccc;
  padding: 10px 12px;
  border-radius: 6px;
  white-space: pre-line;
}
.sv-a-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.sv-a-chip {
  font-family: "JetBrains Mono", monospace;
  font-size: 10px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  padding: 5px 10px;
  border: 1px solid #e2e2dd;
  border-radius: 4px;
  color: #333;
}
.sv-a-photo {
  width: 100%;
  height: 90px;
  border-radius: 6px;
  overflow: hidden;
  margin-bottom: 8px;
}
.sv-a-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.sv-a-photo-cap {
  font-family: "Funnel Sans", sans-serif;
  font-size: 12px;
  color: #444;
}
@media (max-width: 1100px) {
  .sv-a-preview {
    display: none;
  }
}
@media (max-width: 900px) {
  .sv-a-container {
    grid-template-columns: 1fr;
    gap: 40px;
  }
}

/* === VARIANT B — A amélioré                              === */
/* ============================================================ */
.sv-b {
  background: #fff;
  padding: 120px 24px;
}
.sv-b-container {
  max-width: 1280px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 0.75fr 1fr 380px;
  gap: 56px;
  align-items: start;
}
.sv-b-left {
  display: flex;
  flex-direction: column;
  gap: 24px;
  padding-top: 32px;
}
.sv-b-left h2 {
  font-size: clamp(36px, 4vw, 52px);
  line-height: 1.05;
  font-weight: 600;
}
.sv-b-left p {
  font-size: 15px;
  line-height: 1.6;
  color: #333;
  max-width: 360px;
}
.sv-b-list {
  display: flex;
  flex-direction: column;
  position: relative;
}
.sv-b-list::before {
  content: "";
  position: absolute;
  left: 11px;
  top: 40px;
  bottom: 40px;
  border-left: 1px dashed #d3d2cb;
}
.sv-b-row {
  position: relative;
  display: grid;
  grid-template-columns: 24px 56px 1fr;
  gap: 24px;
  align-items: center;
  padding: 28px 0;
  cursor: pointer;
}
.sv-b-row + .sv-b-row {
  border-top: 1px solid var(--line);
}
.sv-b-num {
  font-family: "JetBrains Mono", monospace;
  font-size: 11px;
  color: var(--muted);
  position: relative;
  background: #fff;
  padding: 4px 0;
  z-index: 1;
}
.sv-b-icon {
  width: 56px;
  height: 56px;
  border-radius: 999px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition:
    background 0.25s,
    color 0.25s,
    transform 0.25s;
}
.sv-b-icon svg {
  width: 24px;
  height: 24px;
}
.sv-b-row[data-accent="mint"] .sv-b-icon {
  background: var(--mint);
  color: #0e3d20;
}
.sv-b-row[data-accent="lavender"] .sv-b-icon {
  background: var(--lavender);
  color: #1f1a4a;
}
.sv-b-row[data-accent="sky"] .sv-b-icon {
  background: var(--sky);
  color: #0f3a55;
}
.sv-b-row[data-accent="beige"] .sv-b-icon {
  background: var(--beige);
  color: #3a2e0e;
}
.sv-b-row:hover .sv-b-icon,
.sv-b-row.is-active .sv-b-icon {
  background: #000;
  color: #fff;
  transform: scale(1.05);
}
.sv-b-meta h3 {
  font-size: 22px;
  font-weight: 600;
  margin-bottom: 6px;
}
.sv-b-meta p {
  font-size: 14px;
  line-height: 1.55;
  color: #444;
  max-width: 460px;
}

/* Anchored preview zone (right column) */
.sv-b-preview-zone {
  position: sticky;
  top: 80px;
  width: 380px;
  border: 1px solid #e2e2dd;
  border-radius: 12px;
  background: #fff;
  box-shadow:
    0 30px 60px -20px rgba(0, 0, 0, 0.18),
    0 6px 12px rgba(0, 0, 0, 0.04);
  overflow: hidden;
  align-self: start;
}
.sv-b-card {
  display: none;
}
.sv-b-card.active {
  display: block;
}
.sv-b-card .chrome {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  border-bottom: 1px solid #f0efea;
  font-family: "JetBrains Mono", monospace;
  font-size: 11px;
  color: var(--muted);
}
.sv-b-card .chrome::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: #d8d8d2;
}
.sv-b-card .body {
  padding: 18px;
}
.sv-b-card .body p {
  font-size: 14px;
  line-height: 1.5;
  color: #1a1a1a;
}
.sv-b-card .body p strong {
  font-weight: 600;
}
.sv-b-card .foot {
  padding: 0 18px 18px;
}

@media (max-width: 1100px) {
  .sv-b-container {
    grid-template-columns: 1fr;
    gap: 48px;
  }
  .sv-b-preview-zone {
    display: none;
  }
}

/* === VARIANT C — Stepper / chips + panel                 === */
/* ============================================================ */
.sv-c {
  background: var(--cream);
  padding: 120px 24px;
}
.sv-c-container {
  max-width: 1280px;
  margin: 0 auto;
}
.sv-c-head {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 48px;
  align-items: end;
  margin-bottom: 56px;
}
.sv-c-head h2 {
  font-size: clamp(40px, 4.5vw, 60px);
  line-height: 1.02;
  font-weight: 600;
  max-width: 600px;
}
.sv-c-head p {
  font-size: 15px;
  line-height: 1.6;
  color: #333;
  max-width: 380px;
  margin-top: 24px;
}
.sv-c-tabs {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 40px;
}
.sv-c-tab {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 22px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 999px;
  cursor: pointer;
  transition:
    background 0.2s,
    color 0.2s,
    border-color 0.2s;
}
.sv-c-tab.active {
  background: #000;
  color: #fff;
  border-color: #000;
}
.sv-c-tab .num {
  font-family: "JetBrains Mono", monospace;
  font-size: 11px;
  opacity: 0.6;
}
.sv-c-tab .lbl {
  font-family: "Funnel Display", sans-serif;
  font-size: 16px;
  font-weight: 500;
}
.sv-c-panel {
  background: #fff;
  border-radius: 24px;
  overflow: hidden;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  min-height: 360px;
  box-shadow: 0 20px 50px -20px rgba(0, 0, 0, 0.12);
}
.sv-c-panel-left {
  padding: 56px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 20px;
}
.sv-c-panel-left .icon {
  width: 64px;
  height: 64px;
  border-radius: 999px;
  background: var(--mint);
  color: #0e3d20;
  display: flex;
  align-items: center;
  justify-content: center;
}
.sv-c-panel-left .icon svg {
  width: 28px;
  height: 28px;
}
.sv-c-panel-left h3 {
  font-size: 36px;
  font-weight: 600;
  line-height: 1.05;
}
.sv-c-panel-left p {
  font-size: 15px;
  line-height: 1.6;
  color: #333;
  max-width: 400px;
}
.sv-c-panel-right {
  background: var(--cream);
  padding: 40px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 18px;
}
.sv-c-panel-right .chrome {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: "JetBrains Mono", monospace;
  font-size: 11px;
  color: var(--muted);
  margin-bottom: 8px;
}
.sv-c-panel-right .chrome::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: #d8d8d2;
}
.sv-c-card {
  display: none;
}
.sv-c-card.active {
  display: contents;
}
@media (max-width: 900px) {
  .sv-c-head {
    grid-template-columns: 1fr;
    gap: 24px;
  }
  .sv-c-panel {
    grid-template-columns: 1fr;
  }
  .sv-c-panel-left {
    padding: 40px 32px;
  }
  .sv-c-panel-right {
    padding: 32px;
  }
}

/* === VARIANT D — Grid 2×2 enrichi                        === */
/* ============================================================ */
.sv-d {
  background: #fff;
  padding: 120px 24px;
}
.sv-d-container {
  max-width: 1280px;
  margin: 0 auto;
}
.sv-d-head {
  max-width: 720px;
  margin-bottom: 64px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.sv-d-head h2 {
  font-size: clamp(40px, 4.5vw, 60px);
  line-height: 1.02;
  font-weight: 600;
}
.sv-d-head p {
  font-size: 15px;
  line-height: 1.6;
  color: #333;
}
.sv-d-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}
.sv-d-card {
  background: var(--cream);
  border-radius: 24px;
  padding: 36px;
  display: flex;
  flex-direction: column;
  gap: 18px;
  border: 1px solid transparent;
  transition:
    transform 0.25s,
    box-shadow 0.25s,
    border-color 0.25s,
    background 0.25s;
}
.sv-d-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 30px 60px -25px rgba(0, 0, 0, 0.15);
  background: #fff;
  border-color: var(--line);
}
.sv-d-top {
  display: flex;
  align-items: center;
  gap: 16px;
}
.sv-d-num {
  font-family: "JetBrains Mono", monospace;
  font-size: 11px;
  color: var(--muted);
}
.sv-d-icon {
  width: 56px;
  height: 56px;
  border-radius: 999px;
  background: var(--mint);
  color: #0e3d20;
  display: flex;
  align-items: center;
  justify-content: center;
}
.sv-d-icon svg {
  width: 24px;
  height: 24px;
}
.sv-d-card h3 {
  font-size: 24px;
  font-weight: 600;
  line-height: 1.1;
}
.sv-d-card > p {
  font-size: 14px;
  line-height: 1.55;
  color: #444;
}
.sv-d-extra {
  margin-top: auto;
  padding-top: 16px;
  border-top: 1px dashed var(--line);
}
.sv-d-extra .chrome {
  font-family: "JetBrains Mono", monospace;
  font-size: 10px;
  color: var(--muted);
  margin-bottom: 10px;
  display: flex;
  align-items: center;
  gap: 6px;
}
.sv-d-extra .chrome::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: #d8d8d2;
}
.sv-d-extra .term {
  font-family: "JetBrains Mono", monospace;
  font-size: 11px;
  background: #0e0e0e;
  color: #ccc;
  padding: 10px 12px;
  border-radius: 6px;
  white-space: pre-line;
}
.sv-d-extra .chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.sv-d-extra .chip {
  font-family: "JetBrains Mono", monospace;
  font-size: 10px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  padding: 5px 10px;
  border: 1px solid #e2e2dd;
  border-radius: 4px;
  color: #333;
  background: #fff;
}
.sv-d-extra .photo {
  width: 100%;
  height: 100px;
  border-radius: 6px;
  overflow: hidden;
}
.sv-d-extra .photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.sv-d-extra .meta {
  font-size: 12px;
  color: #444;
  margin-top: 6px;
}
@media (max-width: 800px) {
  .sv-d-grid {
    grid-template-columns: 1fr;
  }
}

/* === VARIANT E — Funky brutalist accordéon               === */
/* ============================================================ */
.sv-e {
  background: #0a0a0a;
  color: #fff;
  padding: 120px 24px;
}
.sv-e-container {
  max-width: 1280px;
  margin: 0 auto;
}
.sv-e-head {
  display: flex;
  flex-direction: column;
  gap: 20px;
  max-width: 720px;
  margin-bottom: 80px;
}
.sv-e-head .eyebrow {
  color: rgba(255, 255, 255, 0.55);
}
.sv-e-head h2 {
  font-size: clamp(48px, 6vw, 96px);
  line-height: 0.95;
  letter-spacing: -0.04em;
  font-weight: 600;
}
.sv-e-head p {
  font-size: 16px;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.7);
  max-width: 480px;
}
.sv-e-cta {
  background: #fff;
  color: #000;
  align-self: flex-start;
}

.sv-e-rows {
  display: flex;
  flex-direction: column;
}
.sv-e-row {
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  padding: 28px 0;
  cursor: pointer;
  transition: padding 0.3s;
}
.sv-e-row:last-child {
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
.sv-e-row.is-open {
  padding: 36px 0;
}
.sv-e-row-head {
  display: grid;
  grid-template-columns: 80px 1fr auto;
  gap: 32px;
  align-items: center;
}
.sv-e-row .num {
  font-family: "Funnel Display", sans-serif;
  font-size: clamp(40px, 5vw, 64px);
  font-weight: 600;
  color: rgba(255, 255, 255, 0.4);
  letter-spacing: -0.02em;
  line-height: 1;
  transition: color 0.3s;
}
.sv-e-row .name {
  font-family: "Funnel Display", sans-serif;
  font-size: clamp(32px, 4.5vw, 56px);
  font-weight: 500;
  color: #fff;
  letter-spacing: -0.03em;
  line-height: 1;
  transition:
    color 0.3s,
    transform 0.3s;
}
.sv-e-row .arrow {
  width: 40px;
  height: 40px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 999px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  color: #fff;
  transition:
    transform 0.3s,
    background 0.2s,
    border-color 0.2s;
}
.sv-e-row:hover .arrow {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.4);
}
.sv-e-row.is-open .arrow {
  transform: rotate(45deg);
  background: #fff;
  color: #000;
  border-color: #fff;
}
.sv-e-row:hover .num {
  color: rgba(255, 255, 255, 0.7);
}
.sv-e-row:hover .name {
  color: var(--mint);
}

.sv-e-row-detail {
  max-height: 0;
  overflow: hidden;
  transition:
    max-height 0.5s ease,
    margin-top 0.4s,
    opacity 0.4s;
  opacity: 0;
}
.sv-e-row.is-open .sv-e-row-detail {
  max-height: 600px;
  margin-top: 32px;
  opacity: 1;
}
.sv-e-detail-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px;
  padding-left: 112px;
}
.sv-e-detail-grid p {
  font-size: 16px;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.85);
}
.sv-e-detail-grid p strong {
  color: #fff;
  font-weight: 500;
}
.sv-e-detail-card {
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.03);
  overflow: hidden;
}
.sv-e-detail-card .chrome {
  padding: 10px 14px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  font-family: "JetBrains Mono", monospace;
  font-size: 11px;
  color: rgba(255, 255, 255, 0.55);
  display: flex;
  align-items: center;
  gap: 8px;
}
.sv-e-detail-card .chrome::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.2);
}
.sv-e-detail-card .body {
  padding: 16px;
}
.sv-e-detail-card .term {
  font-family: "JetBrains Mono", monospace;
  font-size: 11px;
  color: #b8d8c0;
  white-space: pre-line;
  line-height: 1.7;
}
.sv-e-detail-card .chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.sv-e-detail-card .chip {
  font-family: "JetBrains Mono", monospace;
  font-size: 10px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.85);
  padding: 5px 10px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 4px;
}
.sv-e-detail-card .photo {
  width: 100%;
  aspect-ratio: 16/9;
  overflow: hidden;
}
.sv-e-detail-card .photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.sv-e-detail-card .cap {
  padding: 10px 14px;
  font-size: 12px;
  color: rgba(255, 255, 255, 0.6);
}
@media (max-width: 800px) {
  .sv-e-row-head {
    grid-template-columns: 56px 1fr auto;
    gap: 18px;
  }
  .sv-e-detail-grid {
    grid-template-columns: 1fr;
    padding-left: 0;
  }
}

/* === Real service icons (PNG, black on transparent) === */
/* Real service icons (PNG) — black on transparent. Invert on hover/active state. */
.svc-icon-img {
  width: 24px;
  height: 24px;
  object-fit: contain;
  transition: filter 0.25s;
}
.sv-a-row:hover .sv-a-icon .svc-icon-img,
.sv-b-row:hover .sv-b-icon .svc-icon-img,
.sv-b-row.is-active .sv-b-icon .svc-icon-img,
.sv-c-tab.active .sv-c-tab-icon .svc-icon-img {
  filter: invert(1);
}
.sv-c-panel-left .icon .svc-icon-img {
  width: 28px;
  height: 28px;
}
.sv-d-icon .svc-icon-img {
  width: 26px;
  height: 26px;
}

/* === Switcher de variantes — services (2e instance) ====================== */
/* Position héritée du base .variant-switcher (absolute, ancrée au section parent) */