/* ═══════════════════════════════════════════════════════════════
   IDA-LINK — Design System V2 — Ethereal Glass Vibe
   taste-skill (8,9,4) + soft-skill (Ethereal Glass + IDA brand)
   ═══════════════════════════════════════════════════════════════ */

/* ─── Design Tokens — Dark theme (default) ─── */
:root, [data-theme="dark"] {
  --color-primary: #003f9e;
  --color-primary-dark: #00327e;
  --color-primary-light: rgba(0, 63, 158, 0.12);
  --color-primary-glow: rgba(0, 63, 158, 0.25);
  --color-secondary: #8e1b16;
  --color-secondary-light: rgba(142, 27, 22, 0.1);
  --color-bg: #050508;
  --color-bg-elevated: #0a0a10;
  --color-surface: #0f0f18;
  --color-surface-hover: #14141f;
  --color-text: #e4e4e7;
  --color-text-muted: #d4d4d8;
  --color-text-light: #a1a1aa;
  --color-heading: #ffffff;
  --color-border: rgba(255, 255, 255, 0.06);
  --color-border-light: rgba(255, 255, 255, 0.03);
  --nav-bg: rgba(10, 10, 16, 0.7);
  --nav-bg-scrolled: rgba(10, 10, 16, 0.92);
  --nav-border: rgba(255, 255, 255, 0.08);
  --card-bg: rgba(255, 255, 255, 0.02);
  --card-border: rgba(255, 255, 255, 0.06);
  --card-inner-bg: #0f0f18;
  --card-inner-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.04);
  --card-inner-border: rgba(255, 255, 255, 0.03);
  --btn-secondary-bg: rgba(255, 255, 255, 0.05);
  --btn-secondary-border: rgba(255, 255, 255, 0.1);
  --btn-secondary-color: #fff;
  --footer-bg: #050508;
  --mesh-blue: rgba(0, 63, 158, 0.12);
  --mesh-red: rgba(142, 27, 22, 0.08);
  --grain-opacity: 0.03;
}

/* ─── Design Tokens — Light theme (activable par section ou globalement) ─── */
[data-theme="light"],
.theme-light {
  --color-bg: #fafafa;
  --color-bg-elevated: #f4f4f5;
  --color-surface: #ffffff;
  --color-surface-hover: #f9f9fb;
  --color-text: #27272a;
  --color-text-muted: #52525b;
  --color-text-light: #71717a;
  --color-heading: #18181b;
  --color-primary-light: rgba(0, 63, 158, 0.08);
  --color-secondary-light: rgba(142, 27, 22, 0.06);
  --color-border: rgba(0, 0, 0, 0.06);
  --color-border-light: rgba(0, 0, 0, 0.03);
  --nav-bg: rgba(255, 255, 255, 0.82);
  --nav-bg-scrolled: rgba(255, 255, 255, 0.95);
  --nav-border: rgba(255, 255, 255, 0.5);
  --card-bg: rgba(0, 0, 0, 0.02);
  --card-border: rgba(0, 0, 0, 0.04);
  --card-inner-bg: #ffffff;
  --card-inner-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.04);
  --card-inner-border: transparent;
  --btn-secondary-bg: rgba(0, 63, 158, 0.06);
  --btn-secondary-border: rgba(0, 63, 158, 0.15);
  --btn-secondary-color: var(--color-primary);
  --footer-bg: #0a0a0f;
  --mesh-blue: rgba(0, 63, 158, 0.04);
  --mesh-red: rgba(142, 27, 22, 0.03);
  --grain-opacity: 0.015;
}

/* ─── Shared Tokens (fonts, radius, easing) ─── */
:root {
  /* Les fontes variables servies par le site (assets/fonts). Les noms sans suffixe
     restent en repli au cas où la police serait installée sur le poste du visiteur. */
  --font-display: 'Outfit Variable', 'Outfit', sans-serif;
  --font-body: 'DM Sans Variable', 'DM Sans', sans-serif;
  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-spring: cubic-bezier(0.32, 0.72, 0, 1);
  --radius-sm: 0.75rem;
  --radius-md: 1rem;
  --radius-lg: 1.5rem;
  --radius-xl: 2rem;
  --radius-full: 9999px;
}

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

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

body {
  font-family: var(--font-body);
  color: var(--color-text);
  background: var(--color-bg);
  line-height: 1.7;
  overflow-x: hidden;
}

img { max-width: 100%; height: auto; display: block; }

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.025em;
  color: var(--color-heading);
}

/* ─── Mesh Gradient Background ─── */
.mesh-bg {
  position: fixed;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(ellipse 80% 50% at 20% 40%, var(--mesh-blue), transparent),
    radial-gradient(ellipse 60% 40% at 80% 20%, var(--mesh-red), transparent),
    radial-gradient(ellipse 50% 60% at 50% 80%, var(--mesh-blue), transparent);
  animation: meshFloat 20s ease-in-out infinite alternate;
}

@keyframes meshFloat {
  0% { opacity: 0.8; }
  50% { opacity: 1; }
  100% { opacity: 0.8; }
}

/* ─── Fluid Island Nav ─── */
.nav-glass {
  position: fixed;
  top: 1.5rem;
  left: 50%;
  transform: translateX(-50%);
  z-index: 100;
  background: var(--nav-bg);
  backdrop-filter: blur(24px) saturate(180%);
  -webkit-backdrop-filter: blur(24px) saturate(180%);
  border: 1px solid var(--nav-border);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.03), 0 8px 32px -8px rgba(0, 0, 0, 0.5);
  border-radius: var(--radius-full);
  padding: 0.5rem 0.75rem;
  transition: all 700ms var(--ease-spring);
  width: max-content;
  max-width: calc(100vw - 2rem);
}

.nav-glass.scrolled {
  background: var(--nav-bg-scrolled);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.06), 0 8px 40px -8px rgba(0, 0, 0, 0.6);
}

.nav-inner {
  display: flex;
  align-items: center;
  gap: 0.25rem;
}

/* ─── Classes des pages internes ──────────────────────────────────────────────
   Ces pages venaient d'un autre système de design dont la feuille de style n'a
   jamais été livrée : leurs classes n'existaient nulle part. Sans elles, le héros
   n'avait pas de fond (texte blanc sur blanc) et le menu mobile, un « fixed
   inset-0 » sans fond ni état fermé, recouvrait la page en permanence. */

/* Fond des héros : nuit, réchauffé d'un souffle d'or (charte §1). */
.hero-gradient {
  background:
    radial-gradient(120% 90% at 12% 0%, rgba(0, 63, 158, 0.55) 0%, transparent 62%),
    radial-gradient(90% 80% at 88% 100%, rgba(232, 176, 75, 0.1) 0%, transparent 55%),
    linear-gradient(158deg, #00246b 0%, #0a1120 100%);
}

/* Panneau de navigation mobile : fermé par défaut, ouvert par la classe .open. */
.mobile-nav {
  background: var(--color-bg);
  transform: translateX(100%);
  visibility: hidden;
  transition:
    transform 320ms var(--ease-out-expo),
    visibility 0s linear 320ms;
  overflow-y: auto;
}

.mobile-nav.open {
  transform: translateX(0);
  visibility: visible;
  transition:
    transform 320ms var(--ease-out-expo),
    visibility 0s linear;
}

@media (prefers-reduced-motion: reduce) {
  .mobile-nav,
  .mobile-nav.open {
    transition: visibility 0s linear;
  }
}

/* Bouton secondaire : un contour qui se remplit au survol. */
.btn-outline {
  transition:
    background-color 200ms var(--ease-out-expo),
    border-color 200ms var(--ease-out-expo),
    color 200ms var(--ease-out-expo);
}

.btn-outline:hover {
  background: var(--color-surface-hover);
  border-color: var(--color-border);
}

/* Carte de chiffre clé. Le fond et la bordure viennent déjà des classes posées
   dans le HTML (souvent un voile blanc sur fond bleu) : n'ajouter ici qu'un
   relief au survol, sinon un fond opaque rendrait le chiffre blanc invisible. */
.stat-card {
  transition:
    transform 240ms var(--ease-out-expo),
    box-shadow 240ms var(--ease-out-expo);
}

.stat-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 28px -12px rgba(0, 0, 0, 0.18);
}

/* ─── Menus déroulants de la navigation ───────────────────────────────────────
   Trois défauts corrigés ici :
   1. Le panneau était séparé du bouton par 16 px de vide n'appartenant à aucun
      des deux : la souris qui descendait y perdait le survol et le menu se
      refermait avant d'être atteignable. Le ::before comble ce vide — il fait
      partie du panneau, donc le survol tient.
   2. Aucun délai à la fermeture : sortir d'un pixel refermait tout. Les 180 ms
      de grâce laissent le temps de revenir ou de glisser en diagonale.
   3. Le menu ne s'ouvrait qu'à la souris. `focus-within` le rend accessible au
      clavier.
   `visibility` plutôt que `pointer-events` : le contenu masqué sort aussi de
   l'ordre de tabulation et n'est pas lu par les lecteurs d'écran. */
.nav-dropdown {
  position: absolute;
  top: 100%;
  left: 0;
  margin-top: 0.5rem;
  z-index: 60;
  opacity: 0;
  visibility: hidden;
  transform: translateY(0.5rem);
  transition:
    opacity 200ms var(--ease-out-expo) 180ms,
    transform 200ms var(--ease-out-expo) 180ms,
    visibility 0s linear 380ms;
}

/* Le pont : une bande invisible qui relie le bouton au panneau. */
.nav-dropdown::before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 100%;
  height: 0.75rem;
}

.group:hover > .nav-dropdown,
.group:focus-within > .nav-dropdown {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  transition:
    opacity 200ms var(--ease-out-expo),
    transform 200ms var(--ease-out-expo),
    visibility 0s linear;
}

@media (prefers-reduced-motion: reduce) {
  .nav-dropdown,
  .group:hover > .nav-dropdown,
  .group:focus-within > .nav-dropdown {
    transform: none;
    transition: opacity 1ms linear, visibility 0s linear;
  }
}

.nav-brand {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1rem;
  text-decoration: none;
  padding: 0.375rem 0.75rem;
  white-space: nowrap;
  letter-spacing: -0.02em;
}

/* Le symbole officiel, à gauche du nom. Dimensions figées pour qu'il ne provoque
   aucun décalage de mise en page pendant le chargement. */
.nav-brand-mark {
  width: 1.75rem;
  height: 1.75rem;
  flex-shrink: 0;
  object-fit: contain;
}

.nav-links {
  display: flex;
  align-items: center;
  gap: 0;
}

.nav-link {
  display: inline-flex;
  align-items: center;
  padding: 0.5rem 0.875rem;
  font-family: var(--font-display);
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--color-text-light);
  text-decoration: none;
  border-radius: var(--radius-full);
  transition: all 300ms var(--ease-out-expo);
  white-space: nowrap;
}

.nav-link:hover { color: var(--color-heading); background: rgba(255, 255, 255, 0.06); }
.nav-link.active { color: var(--color-heading); font-weight: 600; }

.nav-cta {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  margin-left: 0.25rem;
  padding: 0.5rem 1.25rem;
  font-family: var(--font-display);
  font-size: 0.8125rem;
  font-weight: 600;
  color: #fff;
  background: var(--color-primary);
  border-radius: var(--radius-full);
  text-decoration: none;
  transition: all 300ms var(--ease-out-expo);
  box-shadow: 0 0 20px -4px rgba(0, 63, 158, 0.4);
}

.nav-cta:hover {
  background: var(--color-primary-dark);
  transform: translateY(-1px);
  box-shadow: 0 0 30px -4px rgba(0, 63, 158, 0.6);
}

.nav-cta:active { transform: scale(0.98); }

/* ─── Hamburger ─── */
.hamburger {
  display: none;
  flex-direction: column;
  gap: 5px;
  padding: 0.5rem;
  cursor: pointer;
  background: none;
  border: none;
}

.hamburger span {
  display: block;
  width: 20px;
  height: 2px;
  background: var(--color-heading);
  border-radius: 1px;
  transition: all 400ms var(--ease-spring);
  transform-origin: center;
}

.hamburger.open span:nth-child(1) { transform: rotate(45deg) translate(2.5px, 2.5px); }
.hamburger.open span:nth-child(2) { opacity: 0; }
.hamburger.open span:nth-child(3) { transform: rotate(-45deg) translate(2.5px, -2.5px); }

/* ─── Mobile Nav ─── */
.mobile-menu {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 99;
  background: rgba(5, 5, 8, 0.95);
  backdrop-filter: blur(32px);
  -webkit-backdrop-filter: blur(32px);
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1.5rem;
  opacity: 0;
  pointer-events: none;
  transition: opacity 400ms var(--ease-spring);
}

.mobile-menu.open { display: flex; opacity: 1; pointer-events: auto; }

.mobile-menu a {
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 600;
  color: #fff;
  text-decoration: none;
}

/* Le menu compte desormais onze entrees au lieu de sept : les pages de second
   niveau (Equipe, les trois pages de services) n'existaient que dans les
   deroulants du menu desktop et etaient donc inatteignables au doigt.
   On resserre le rythme et on autorise le defilement ; centrer verticalement
   un contenu qui deborde couperait le haut du menu, sans moyen d'y revenir. */
.mobile-menu {
  gap: 1rem;
  justify-content: flex-start;
  padding: 5.5rem 1.5rem 3rem;
  overflow-y: auto;
}

.mobile-menu a.mobile-sublink {
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: 500;
  /* 72 % de blanc sur le fond du menu : au-dela de 7:1. */
  color: rgba(255, 255, 255, 0.72);
  transition: color 200ms var(--ease-out-expo);
}

.mobile-menu a.mobile-sublink:hover,
.mobile-menu a.mobile-sublink:focus-visible {
  color: #fff;
}

/* ─── Eyebrow ─── */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.375rem 1rem;
  font-family: var(--font-display);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--color-primary);
  background: var(--color-primary-light);
  border: 1px solid rgba(0, 63, 158, 0.15);
  border-radius: var(--radius-full);
}

/* ─── Double-Bezel Card (Ethereal Glass) ─── */
.card-bezel {
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  padding: 0.375rem;
  border-radius: var(--radius-xl);
  transition: all 600ms var(--ease-spring);
}

.card-bezel:hover {
  border-color: var(--color-primary-light);
  box-shadow: 0 8px 40px -8px rgba(0, 63, 158, 0.15);
  transform: translateY(-3px);
}

.card-bezel-inner {
  background: var(--card-inner-bg);
  border-radius: calc(var(--radius-xl) - 0.375rem);
  padding: 2rem;
  box-shadow: var(--card-inner-shadow);
  border: 1px solid var(--card-inner-border);
  height: 100%;
}

/* ─── Spotlight Border (hover glow) ─── */
.card-spotlight {
  position: relative;
  overflow: hidden;
}

.card-spotlight::before {
  content: '';
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  background: conic-gradient(from var(--spotlight-angle, 0deg), transparent, rgba(0, 63, 158, 0.3), transparent 40%);
  opacity: 0;
  transition: opacity 600ms var(--ease-spring);
  z-index: -1;
}

.card-spotlight:hover::before { opacity: 1; }

/* ─── Parallax Tilt ─── */
.tilt-card {
  transform-style: preserve-3d;
  perspective: 1000px;
  transition: transform 200ms ease-out;
  will-change: transform;
}

.tilt-card-inner {
  transform: translateZ(20px);
}

/* ─── Buttons ─── */
.btn-primary {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.875rem 2rem;
  font-family: var(--font-display);
  font-size: 0.9375rem;
  font-weight: 600;
  color: #fff;
  background: var(--color-primary);
  border: none;
  border-radius: var(--radius-full);
  cursor: pointer;
  text-decoration: none;
  transition: all 400ms var(--ease-spring);
  box-shadow: 0 0 24px -6px rgba(0, 63, 158, 0.4);
}

.btn-primary:hover {
  background: var(--color-primary-dark);
  transform: translateY(-2px);
  box-shadow: 0 0 40px -6px rgba(0, 63, 158, 0.6);
}

.btn-primary:active { transform: scale(0.98) translateY(0); }

.btn-primary .arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.75rem;
  height: 1.75rem;
  background: rgba(255, 255, 255, 0.15);
  border-radius: var(--radius-full);
  transition: transform 300ms var(--ease-out-expo);
}

.btn-primary:hover .arrow { transform: translateX(3px); }

.btn-secondary {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.875rem 2rem;
  font-family: var(--font-display);
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--btn-secondary-color);
  background: var(--btn-secondary-bg);
  border: 1px solid var(--btn-secondary-border);
  border-radius: var(--radius-full);
  cursor: pointer;
  text-decoration: none;
  transition: all 400ms var(--ease-spring);
}

.btn-secondary:hover {
  background: var(--color-primary);
  color: #fff;
  border-color: var(--color-primary);
}

/* ─── Section Spacing ─── */
.section-padding { padding: 7rem 1.5rem; }
.section-container { max-width: 1400px; margin: 0 auto; }

/* ─── Scroll Animations (Motion 9) ─── */
.fade-up {
  opacity: 0;
  transform: translateY(3rem);
  filter: blur(6px);
  transition: all 1000ms var(--ease-spring);
}

.fade-up.visible {
  opacity: 1;
  transform: translateY(0);
  filter: blur(0);
}

.stagger > .fade-up:nth-child(1) { transition-delay: 0ms; }
.stagger > .fade-up:nth-child(2) { transition-delay: 120ms; }
.stagger > .fade-up:nth-child(3) { transition-delay: 240ms; }
.stagger > .fade-up:nth-child(4) { transition-delay: 360ms; }
.stagger > .fade-up:nth-child(5) { transition-delay: 480ms; }
.stagger > .fade-up:nth-child(6) { transition-delay: 600ms; }

/* ─── Kinetic Marquee ─── */
.marquee {
  overflow: hidden;
  white-space: nowrap;
  padding: 1.5rem 0;
  border-top: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
}

.marquee-track {
  display: inline-flex;
  animation: marqueeScroll 30s linear infinite;
  will-change: transform;
}

.marquee:hover .marquee-track {
  animation-play-state: paused;
}

/* ─── Theme Toggle ─── */
.theme-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  border-radius: var(--radius-full);
  background: transparent;
  border: 1px solid var(--color-border);
  cursor: pointer;
  color: var(--color-text-muted);
  transition: all 300ms var(--ease-out-expo);
  margin-left: 0.25rem;
  flex-shrink: 0;
}

.theme-toggle:hover {
  background: var(--color-primary-light);
  color: var(--color-primary);
  border-color: var(--color-primary-light);
}

.theme-toggle .icon-sun,
.theme-toggle .icon-moon { display: none; }

[data-theme="dark"] .theme-toggle .icon-sun { display: block; }
[data-theme="dark"] .theme-toggle .icon-moon { display: none; }
[data-theme="light"] .theme-toggle .icon-sun { display: none; }
[data-theme="light"] .theme-toggle .icon-moon { display: block; }

/* Light theme overrides (works with both data-theme="light" and .theme-light) */
/* --color-text-light (#71717a) ne donnait que 3,3:1 sur la barre translucide.
   --color-text-muted (#52525b) dépasse 5:1 sans alourdir la barre. */
[data-theme="light"] .nav-link,
.theme-light .nav-link { color: var(--color-text-muted); }

/* Le bouton « Contact » cumule .nav-link et .btn-primary : la couleur de
   .nav-link écrasait le blanc du bouton, laissant du gris sur fond bleu (1,97:1).
   style.css étant chargé après Tailwind, le « text-white » du HTML ne suffisait pas. */
.nav-link.btn-primary,
.nav-link.nav-cta,
[data-theme="light"] .nav-link.btn-primary,
.theme-light .nav-link.btn-primary {
  color: #fff;
}
[data-theme="light"] .nav-link:hover,
.theme-light .nav-link:hover { color: var(--color-primary); background: var(--color-primary-light); }
[data-theme="light"] .nav-link.active,
.theme-light .nav-link.active { color: var(--color-primary); }

[data-theme="light"] .hamburger span,
.theme-light .hamburger span { background: var(--color-text); }

[data-theme="light"] .partner-card,
.theme-light .partner-card { color: var(--color-text-muted); }
[data-theme="light"] .partner-card:hover,
.theme-light .partner-card:hover { color: var(--color-primary); }

[data-theme="light"] .btn-secondary:hover,
.theme-light .btn-secondary:hover {
  background: var(--color-primary);
  color: #fff;
  border-color: var(--color-primary);
}

[data-theme="light"] .marquee-track span,
.theme-light .marquee-track span { color: var(--color-text-light); }

[data-theme="light"] .mobile-menu a,
.theme-light .mobile-menu a { color: var(--color-text); }

[data-theme="light"] .btn-secondary:hover {
  background: var(--color-primary);
  color: #fff;
  border-color: var(--color-primary);
}

.marquee-track span {
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 600;
  color: var(--color-text-muted);
  padding: 0 2rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  flex-shrink: 0;
}

.marquee-track .dot {
  color: var(--color-primary);
}

@keyframes marqueeScroll {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

/* ─── Bandeau de logos partenaires ───
   Remplace la liste de noms en capitales : des logos en niveaux de gris,
   d'une hauteur optique commune, qui reprennent leur couleur au survol. */
.logo-band {
  padding: 3.5rem 0 4rem;
}

.logo-band-title {
  font-family: var(--font-body);
  font-size: 0.8125rem;
  font-weight: 600;
  line-height: 1.5;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-align: center;
  /* --color-text-light (#71717a) plafonne a 3,3:1 sur le fond papier :
     insuffisant pour un texte de 13 px. --color-text-muted depasse 5:1. */
  color: var(--color-text-muted);
  margin: 0 auto 2.5rem;
  padding: 0 1.5rem;
  max-width: 60ch;
}

/* Ni bordures ni rythme vertical du marquee generique : le bandeau vit
   dans .logo-band, et ses bords s'effacent en fondu plutot que d'etre coupes. */
.logo-band .marquee {
  border: 0;
  padding: 0;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 10%, #000 90%, transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0, #000 10%, #000 90%, transparent 100%);
}

.logo-band .marquee-track {
  align-items: center;
}

.logo-item {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  padding: 0 2.75rem;
}

.logo-item img {
  height: 2.25rem;
  width: auto;
  max-width: 11rem;
  object-fit: contain;
  filter: grayscale(1);
  opacity: 0.75;
  transition:
    opacity 300ms var(--ease-out-expo),
    filter 300ms var(--ease-out-expo);
}

/* Les logos hauts (marque empilee sur son symbole) paraissent deux fois plus
   petits que les logos horizontaux a hauteur egale : on les compense. */
.logo-item--tall img {
  height: 3.25rem;
}

.logo-item img:hover {
  filter: grayscale(0);
  opacity: 1;
}

@media (max-width: 640px) {
  .logo-item { padding: 0 1.75rem; }
  .logo-item img { height: 1.875rem; }
  .logo-item--tall img { height: 2.75rem; }
  .logo-band-title { font-size: 0.75rem; letter-spacing: 0.1em; }
}

/* Sans animation, une piste qui defile n'a plus de sens : les logos se
   rangent en grille centree et les duplicata de boucle disparaissent. */
@media (prefers-reduced-motion: reduce) {
  .logo-band .marquee {
    white-space: normal;
    -webkit-mask-image: none;
    mask-image: none;
  }

  .logo-band .marquee-track {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    row-gap: 1.5rem;
    animation: none;
  }

  .logo-item--dup { display: none; }
}

/* ─── Metric ─── */
.metric-value {
  font-family: var(--font-display);
  font-size: 2.75rem;
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1;
  background: linear-gradient(135deg, var(--color-primary), #4f8ef7);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* ─── Partner ─── */
.partner-card {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem 2rem;
  border-radius: var(--radius-lg);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  transition: all 400ms var(--ease-spring);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.125rem;
  color: var(--color-text-muted);
}

.partner-card:hover {
  border-color: rgba(0, 63, 158, 0.3);
  box-shadow: 0 0 24px -6px rgba(0, 63, 158, 0.15);
  color: var(--color-heading);
}

/* ─── Hero Image ─── */
.hero-img-wrap {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-xl);
}

.hero-img-wrap::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(0, 63, 158, 0.2), rgba(142, 27, 22, 0.1));
}

/* ─── Service Icon ─── */
.service-icon {
  width: 3rem;
  height: 3rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-md);
  background: var(--color-primary-light);
  color: var(--color-primary);
  flex-shrink: 0;
}

.service-icon-red {
  background: var(--color-secondary-light);
  color: var(--color-secondary);
}

/* ─── Footer ─── */
.footer {
  background: var(--footer-bg);
  border-top: 1px solid var(--color-border);
  color: var(--color-text-muted);
  padding: 5rem 1.5rem 2rem;
}

.footer a { color: var(--color-text-light); text-decoration: none; transition: color 300ms var(--ease-out-expo); }
.footer a:hover { color: #fff; }

.footer-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: 3rem;
  max-width: 1400px;
  margin: 0 auto;
}

.footer-divider {
  border-top: 1px solid var(--color-border);
  margin-top: 3rem;
  padding-top: 2rem;
  max-width: 1400px;
  margin-left: auto;
  margin-right: auto;
}

/* ─── Scroll Rectangle Animation ─── */
.scroll-stage {
  position: relative;
  height: 200vh;
  overflow: clip;
}

.scroll-bg {
  position: sticky;
  top: 0;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-primary);
  z-index: 1;
  overflow: hidden;
}

.scroll-bg::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 60% 50% at 30% 40%, rgba(255,255,255,0.08), transparent),
    radial-gradient(ellipse 40% 40% at 70% 60%, rgba(142,27,22,0.12), transparent);
}

.scroll-bg-text {
  position: relative;
  z-index: 2;
  font-family: var(--font-display);
  font-size: clamp(2rem, 5vw, 4.5rem);
  font-weight: 800;
  color: white;
  letter-spacing: -0.03em;
  text-align: center;
  max-width: 20ch;
  line-height: 1.05;
  opacity: 0;
  transform: scale(0.92);
  animation: scroll-text-reveal linear both;
  animation-timeline: scroll(nearest);
  animation-range: 20% 45%;
}

@keyframes scroll-text-reveal {
  0%   { opacity: 0; transform: scale(0.92); filter: blur(8px); }
  100% { opacity: 1; transform: scale(1); filter: blur(0); }
}

.scroll-card {
  position: sticky;
  top: 0;
  height: 100vh;
  z-index: 2;
  margin-top: -100vh;
  overflow: hidden;
  animation: scroll-card-anim linear both;
  animation-timeline: scroll(nearest);
  animation-range: 0% 100%;
  transform-origin: center center;
}

@keyframes scroll-card-anim {
  0%   {
    border-radius: 0;
    transform: scale(1);
    box-shadow: none;
  }
  12%  {
    border-radius: 2rem;
    transform: scale(0.96);
    box-shadow: 0 20px 80px -10px rgba(0,0,0,0.25);
  }
  45%  {
    border-radius: 2.5rem;
    transform: scale(0.65);
    box-shadow: 0 40px 120px -10px rgba(0,0,0,0.45);
  }
  55%  {
    border-radius: 2.5rem;
    transform: scale(0.65);
    box-shadow: 0 40px 120px -10px rgba(0,0,0,0.45);
  }
  88%  {
    border-radius: 2rem;
    transform: scale(0.96);
    box-shadow: 0 20px 80px -10px rgba(0,0,0,0.25);
  }
  100% {
    border-radius: 0;
    transform: scale(1);
    box-shadow: none;
  }
}

/* Content fade during scroll */
.scroll-card-content {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  animation: scroll-content-fade linear both;
  animation-timeline: scroll(nearest);
  animation-range: 10% 40%;
}

@keyframes scroll-content-fade {
  0%   { opacity: 1; }
  100% { opacity: 0; }
}

/* Second content (services) appears on reverse */
.scroll-card-content-next {
  position: absolute;
  inset: 0;
  opacity: 0;
  animation: scroll-content-appear linear both;
  animation-timeline: scroll(nearest);
  animation-range: 60% 90%;
}

@keyframes scroll-content-appear {
  0%   { opacity: 0; }
  100% { opacity: 1; }
}

@media (max-width: 768px) {
  .scroll-bg-text { font-size: clamp(1.5rem, 8vw, 2.5rem); }
  @keyframes scroll-card-anim {
    0%   { border-radius: 0; transform: scale(1); box-shadow: none; }
    12%  { border-radius: 1.5rem; transform: scale(0.96); box-shadow: 0 12px 40px rgba(0,0,0,0.2); }
    45%  { border-radius: 1.5rem; transform: scale(0.75); box-shadow: 0 20px 60px rgba(0,0,0,0.35); }
    55%  { border-radius: 1.5rem; transform: scale(0.75); box-shadow: 0 20px 60px rgba(0,0,0,0.35); }
    88%  { border-radius: 1.5rem; transform: scale(0.96); box-shadow: 0 12px 40px rgba(0,0,0,0.2); }
    100% { border-radius: 0; transform: scale(1); box-shadow: none; }
  }
}

/* ─── Grain Overlay ─── */
body::after {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 9999;
  opacity: var(--grain-opacity);
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E");
}

/* ─── Responsive ─── */
@media (max-width: 1024px) {
  .footer-grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 768px) {
  .nav-links { display: none; }
  .hamburger { display: flex; }
  .nav-glass {
    width: calc(100% - 2rem);
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  .section-padding { padding: 4rem 1rem; }
  .footer-grid { grid-template-columns: 1fr; gap: 2rem; }
  .metric-value { font-size: 2rem; }
  h1 { font-size: 2.25rem !important; }
  h2 { font-size: 1.75rem !important; }
  .marquee-track span { font-size: 0.875rem; padding: 0 1.25rem; }
}

@media (max-width: 480px) {
  .section-padding { padding: 3rem 1rem; }
  .card-bezel-inner { padding: 1.25rem; }
}