/* ========================================
   MAX PICCININI - Design System
   Aligne sur Momentum & LP MasterClass
   ======================================== */

/* --- CSS RESET & BASE --- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  /* Brand Colors */
  --blue: #0046FF;
  --blue-hover: #0038CC;
  --blue-bright: #2563FF;
  --blue-dark: #0033CC;
  --blue-light: #6B9FFF;
  --navy: #00194C;
  --navy-deep: #030B20;   /* fond des sections sombres : entre l'origine et le quasi-noir */
  --black: #0A0A0F;
  --white: #FFFFFF;
  --off-white: #F7F8FA;
  --gray-50: #F8F9FB;
  --gray-100: #F0F1F5;
  --gray-200: #E2E4EA;
  --gray-300: #CDD1DB;
  --gray-400: #9AA0AF;
  --gray-500: #6B7280;
  --gray-600: #555B6E;
  --gray-800: #2A2D35;

  /* Premium Effects */
  --shadow-sm: 0 2px 8px rgba(0, 13, 43, 0.04);
  --shadow-md: 0 8px 30px rgba(0, 13, 43, 0.08);
  --shadow-lg: 0 20px 50px rgba(0, 13, 43, 0.12);
  --shadow-glow: 0 0 40px rgba(0, 70, 255, 0.15);
  --gradient-blue: linear-gradient(135deg, #0046FF 0%, #2563FF 50%, #0046FF 100%);
  --gradient-dark: linear-gradient(180deg, var(--navy-deep) 0%, #001233 100%);
  --gradient-divider: linear-gradient(90deg, transparent, rgba(0, 70, 255, 0.2), transparent);

  /* Typography */
  --font-heading: 'Poppins', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;

  /* Spacing - Primitives */
  --section-padding: 110px 0;
  --container-width: 1120px;
  --gap: 32px;
  --radius: 16px;
  --radius-sm: 12px;
  --radius-lg: 20px;

  /* ---- SEMANTIC TOKENS (Layer 2) ---- */

  /* Colors - Semantic */
  --color-text-primary: var(--navy);
  --color-text-body: var(--gray-600);
  --color-text-muted: var(--gray-500);
  --color-text-on-dark: rgba(255, 255, 255, 0.85);
  --color-text-on-dark-muted: rgba(255, 255, 255, 0.5);
  --color-cta: var(--navy);
  --color-cta-hover: var(--blue-dark);
  --color-surface: var(--white);
  --color-surface-alt: var(--off-white);
  --color-surface-dark: var(--navy-deep);
  --color-border: var(--gray-200);
  --color-border-hover: rgba(0, 70, 255, 0.12);

  /* Spacing - Semantic */
  --space-4: 4px;
  --space-6: 6px;
  --space-8: 8px;
  --space-12: 12px;
  --space-16: 16px;
  --space-20: 20px;
  --space-24: 24px;
  --space-32: 32px;
  --space-40: 40px;
  --space-48: 48px;
  --space-60: 60px;
  --space-80: 80px;

  /* Section Padding Variants */
  --section-padding-sm: 60px 0;
  --section-padding-md: 80px 0;
  --section-padding-lg: 100px 0;
  --section-padding-hero: 140px 0 60px;

  /* Typography - Semantic */
  --text-xs: 0.75rem;
  --text-sm: 0.8125rem;
  --text-base: 0.9375rem;
  --text-md: 1rem;
  --text-lg: 1.0625rem;
  --text-xl: 1.125rem;
  --text-2xl: 1.25rem;

  /* ---- COMPONENT TOKENS (Layer 3) ---- */
  --card-padding: 32px;
  --card-border: 1px solid var(--color-border);
  --card-radius: var(--radius);
  --card-shadow: var(--shadow-sm);
  --card-transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  --nav-height: 72px;
}

html { scroll-behavior: smooth; font-size: 16px; }

body {
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.7;
  color: var(--gray-600);
  background: var(--white);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img {
  max-width: 100%;
  height: auto;
  display: block;
  content-visibility: auto;
}
a { color: var(--navy); text-decoration: none; transition: color 0.3s; }
a:hover { color: var(--black); }

/* --- CONTAINER --- */
.container {
  max-width: var(--container-width);
  margin: 0 auto;
  padding: 0 24px;
}

/* --- TYPOGRAPHY --- */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading);
  font-weight: 700;
  line-height: 1.2;
  color: var(--black);
}

h1 { font-size: clamp(2rem, 3.5vw, 2.75rem); letter-spacing: -0.02em; }
h2 { font-size: clamp(1.75rem, 3vw, 2.5rem); letter-spacing: -0.01em; }
h3 { font-size: clamp(1.25rem, 2vw, 1.5rem); }
h4 { font-size: 1.125rem; }

.section-label {
  font-family: var(--font-heading);
  font-size: 0.6875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: var(--gray-500);
  margin-bottom: 14px;
}

.section-title { margin-bottom: 20px; }

.section-subtitle {
  font-size: 1.125rem;
  color: var(--gray-600);
  max-width: 640px;
  line-height: 1.7;
}

.text-center { text-align: center; }
.text-center .section-subtitle { margin: 0 auto; }

/* Light text on dark backgrounds */
.dark h1, .dark h2, .dark h3, .dark h4, .dark p, .dark li,
.dark .section-subtitle { color: var(--white); }
.dark .section-label { color: rgba(255,255,255,0.4); }
.dark .section-subtitle { color: rgba(255,255,255,0.75); }

/* --- BUTTONS --- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-heading);
  font-size: 0.9375rem;
  font-weight: 600;
  padding: 14px 28px;
  border-radius: var(--radius-sm);
  border: none;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  text-decoration: none;
  touch-action: manipulation;
}

.btn-primary {
  background: linear-gradient(135deg, var(--navy) 0%, var(--blue-dark) 100%);
  color: var(--white);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}
.btn-primary:hover {
  background: linear-gradient(135deg, var(--black) 0%, var(--navy) 100%);
  color: var(--white);
  transform: translateY(-1px);
  box-shadow: 0 6px 20px rgba(0, 13, 43, 0.2);
}

.btn-secondary {
  background: rgba(255,255,255,0.04);
  color: var(--white);
  border: 1.5px solid rgba(255,255,255,0.2);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.btn-secondary:hover {
  background: rgba(255,255,255,0.1);
  color: var(--white);
  border-color: rgba(255,255,255,0.5);
  box-shadow: 0 4px 20px rgba(255,255,255,0.08);
}

.btn-outline {
  background: transparent;
  color: var(--black);
  border: 1.5px solid rgba(0, 0, 0, 0.15);
}
.btn-outline:hover {
  background: var(--black);
  color: var(--white);
  border-color: var(--black);
}

/* Tertiary CTA (text link style) */
.btn-tertiary {
  background: transparent;
  color: var(--navy);
  padding: 14px 16px;
  font-weight: 500;
}
.btn-tertiary:hover {
  color: var(--blue-dark);
  background: rgba(0, 70, 255, 0.04);
}

.btn-lg { padding: 14px 32px; font-size: 1rem; }
.btn-arrow::after { content: '\2192'; margin-left: 4px; transition: transform 0.3s; }
.btn-arrow:hover::after { transform: translateX(4px); }

/* --- SECTIONS --- */
section { padding: var(--section-padding); }
.section-dark {
  background: var(--navy-deep);
  position: relative;
  overflow: hidden;
}
.section-dark::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 80% 60% at 50% -10%, rgba(0,70,255,0.28) 0%, transparent 72%),
    radial-gradient(ellipse 65% 45% at 82% 82%, rgba(0,70,255,0.12) 0%, transparent 62%);
  pointer-events: none;
}
.section-light { background: var(--off-white); }

/* saut de ligne pilote : le mobile replie deja les titres, un <br> force
   y ajouterait une troisieme ligne */
.br-desk { display: inline; }
.sur-desk { display: inline; }
@media (max-width: 900px) { .br-desk, .sur-desk { display: none; } }

/* Premium section divider */
.section-divider {
  height: 1px;
  background: var(--gradient-divider);
  border: none;
  margin: 0;
}

/* Grid pattern overlay */
.grid-bg::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.03) 1px, transparent 1px);
  background-size: 60px 60px;
  pointer-events: none;
}

/* --- GRID LAYOUTS --- */
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--gap); align-items: center; }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--gap); }
.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--gap); }

/* --- CARDS --- */
.card {
  background: var(--off-white);
  border: none;
  border-radius: 20px;
  padding: 36px;
  transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  box-shadow: none;
  display: flex;
  flex-direction: column;
}
.card p:last-of-type {
  flex: 1;
}
.card .btn {
  align-self: flex-start;
  margin-top: auto;
}
.card:hover {
  transform: translateY(-4px);
  box-shadow: 0 20px 60px rgba(0, 13, 43, 0.07);
}

.card-glass {
  background: rgba(255,255,255,0.04);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 20px;
  padding: 36px;
  transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}
.card-glass:hover {
  background: rgba(255,255,255,0.06);
  border-color: rgba(255,255,255,0.1);
}

.card-icon {
  width: 48px;
  height: 48px;
  background: rgba(0, 0, 0, 0.04);
  border: none;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.25rem;
  margin-bottom: 20px;
  transition: all 0.4s;
}
.card:hover .card-icon {
  background: rgba(0, 0, 0, 0.06);
}

/* --- STATS BAR --- */
.stats-bar {
  display: flex;
  justify-content: center;
  gap: 60px;
  padding: 40px 0;
  flex-wrap: wrap;
}
.stat {
  text-align: center;
  position: relative;
  padding: 0 30px;
}
.stat:not(:last-child)::after {
  content: '';
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 1px;
  height: 40px;
  background: linear-gradient(180deg, transparent, var(--gray-200), transparent);
}
.stat-number {
  font-family: var(--font-heading);
  font-size: 2.25rem;
  font-weight: 700;
  color: var(--navy);
  line-height: 1;
  letter-spacing: -0.02em;
}
.stat-label {
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--gray-500);
  margin-top: 6px;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}
.dark .stat-number {
  color: var(--white);
}
.dark .stat-label { color: rgba(255,255,255,0.45); }

/* --- LOGO BAR --- */
.logo-bar {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 24px 40px;
  flex-wrap: wrap;
  padding: 32px 0;
  width: 100%;
}
.logo-bar img {
  width: auto;
  height: 36px;
  opacity: 0.4;
  filter: grayscale(100%) brightness(0.9);
  transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
  flex-shrink: 1;
  object-fit: contain;
}
.logo-bar img:hover {
  opacity: 1;
  filter: grayscale(0%) brightness(1);
  transform: scale(1.05);
}

/* --- LOGO MARQUEE (infinite scroll) --- */
.logo-marquee {
  overflow: hidden;
  padding: 32px 0;
  mask-image: linear-gradient(90deg, transparent, black 8%, black 92%, transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, black 8%, black 92%, transparent);
}
.logo-marquee-track {
  display: flex;
  gap: 48px;
  align-items: center;
  width: max-content;
  animation: marqueeScroll 35s linear infinite;
}
.logo-marquee-track img {
  width: auto;
  height: 36px;
  opacity: 0.45;
  filter: grayscale(100%);
  transition: all 0.4s ease;
  flex-shrink: 0;
  object-fit: contain;
}
.logo-marquee-track img:hover {
  opacity: 1;
  filter: grayscale(0%);
}
.logo-marquee:hover .logo-marquee-track {
  animation-play-state: paused;
}
@keyframes marqueeScroll {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}
@media (max-width: 768px) {
  .logo-marquee-track { gap: 32px; }
  .logo-marquee-track img { width: auto; height: 28px; }
}
@media (min-width: 999999px) /* animations forcées : bloc neutralisé */ {
  .logo-marquee-track { animation: none; flex-wrap: wrap; justify-content: center; width: auto; }
}

/* --- TESTIMONIAL --- */
.testimonial {
  background: var(--white);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius);
  padding: 36px;
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: var(--shadow-sm);
  position: relative;
}
.testimonial::before {
  content: '\201C';
  position: absolute;
  top: 20px;
  left: 28px;
  font-size: 4rem;
  font-family: Georgia, serif;
  color: rgba(0, 70, 255, 0.08);
  line-height: 1;
  pointer-events: none;
}
.testimonial:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
  border-color: rgba(0, 70, 255, 0.12);
}
.testimonial-quote {
  font-size: 1.0625rem;
  font-style: italic;
  color: var(--gray-800);
  line-height: 1.7;
  margin-bottom: 20px;
}
.testimonial-result {
  font-family: var(--font-heading);
  font-weight: 700;
  color: var(--navy);
  font-size: 1.25rem;
  margin-bottom: 16px;
}
.testimonial-author {
  display: flex;
  align-items: center;
  gap: 12px;
}
.testimonial-avatar {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  object-fit: cover;
}
.testimonial-name {
  font-weight: 600;
  color: var(--navy);
  font-size: 0.9375rem;
}
.testimonial-role {
  font-size: 0.8125rem;
  color: var(--gray-500);
}

/* --- NAVBAR --- */
/* --- NAVBAR BASE (white bg by default for inner pages) --- */
.navbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  background: rgba(255, 255, 255, 0.98);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  border-bottom: 1px solid rgba(0, 0, 0, 0.05);
  transition: background 0.4s, border-color 0.4s, box-shadow 0.4s;
}
.navbar-inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 72px;
  transition: height 0.35s ease;
  max-width: var(--container-width);
  margin: 0 auto;
  padding: 0 24px;
}
.navbar-logo img { height: 36px; width: auto; transition: opacity 0.3s; }
.navbar-logo .logo-white { display: none; }
.navbar-logo .logo-dark { display: block; }
.navbar-links {
  display: flex;
  align-items: center;
  gap: 26px;
  list-style: none;
}
.navbar-links a {
  font-family: var(--font-heading);
  font-size: 0.71875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  white-space: nowrap;
  color: var(--gray-800);
  transition: color 0.3s, opacity 0.35s ease;
  touch-action: manipulation;
}
/* Focus éditorial : les autres rubriques s'estompent au survol de l'une (souris uniquement).
   Restreint aux rubriques de premier niveau : le contenu des panneaux ne s'estompe jamais. */
@media (hover: hover) and (pointer: fine) {
  .navbar-links:hover > li:not(.navbar-cta) > a,
  .navbar-links:hover > li:not(.navbar-cta) > .nav-parent { opacity: 0.4; }
  .navbar-links > li:not(.navbar-cta) > a:hover,
  .navbar-links > li:not(.navbar-cta) > .nav-parent:hover,
  .navbar-links > li.nav-has-sub:hover > .nav-parent,
  .navbar-links > li.nav-has-sub[data-open="true"] > .nav-parent { opacity: 1; }
  .navbar-links .nav-sub a { opacity: 1 !important; }
}
.navbar-links a:hover { color: var(--black); }
.navbar-links li:not(.navbar-cta) a { position: relative; padding-bottom: 4px; }
.navbar-links li:not(.navbar-cta) a::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}
.navbar-links li:not(.navbar-cta) a:hover::after,
.navbar-links li:not(.navbar-cta) a.active::after { transform: scaleX(1); }
.navbar-links .navbar-cta .btn { padding: 10px 22px; font-size: 0.8125rem; white-space: nowrap; }
.navbar-links .navbar-cta a.btn.btn-primary,
.navbar-links .navbar-cta a.btn.btn-primary:hover,
.navbar-links .navbar-cta a.btn.btn-primary:visited { color: #FFFFFF; }

.navbar.scrolled .navbar-inner { height: 62px; }

/* --- NAVBAR TRANSPARENT (homepage hero overlay) --- */
.navbar-transparent {
  background: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border-bottom-color: transparent;
}
.navbar-transparent .logo-white { display: block; }
.navbar-transparent .logo-dark { display: none; }
.navbar-transparent .navbar-links a { color: rgba(255, 255, 255, 0.85); }
.navbar-transparent .navbar-links a:hover { color: var(--white); }
.navbar-transparent .navbar-toggle span { background: var(--white); }
.navbar-transparent .navbar-links .navbar-cta a.btn.btn-primary { color: #FFFFFF; }

/* --- NAVBAR SCROLLED (overrides transparent) --- */
.navbar-transparent.scrolled {
  background: rgba(255, 255, 255, 0.98);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  border-bottom-color: var(--gray-200);
}
.navbar-transparent.scrolled .logo-white { display: none; }
.navbar-transparent.scrolled .logo-dark { display: block; }
.navbar-transparent.scrolled .navbar-links a { color: var(--gray-800); }
.navbar-transparent.scrolled .navbar-links a:hover { color: var(--black); }
.navbar-links li:not(.navbar-cta) a { position: relative; padding-bottom: 4px; }
.navbar-links li:not(.navbar-cta) a::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}
.navbar-links li:not(.navbar-cta) a:hover::after,
.navbar-links li:not(.navbar-cta) a.active::after { transform: scaleX(1); }
.navbar-transparent.scrolled .navbar-toggle span { background: var(--navy); }

/* Mobile menu */
.navbar-toggle {
  display: none;
  background: none;
  border: none;
  cursor: pointer;
  padding: 8px;
}
.navbar-toggle span {
  display: block;
  width: 24px;
  height: 2px;
  /* navy par defaut : sur les pages a barre blanche, le blanc rendait le
     menu invisible ; la barre transparente de l'accueil le repasse en blanc */
  background: var(--navy);
  margin: 6px 0;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  transform-origin: center;
}

/* --- FOOTER --- */
.footer {
  background: var(--navy-deep);
  color: rgba(255,255,255,0.5);
  padding: 56px 0 28px;
}
.footer-inner {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: 32px;
  margin-bottom: 28px;
}
.footer-brand p { margin-top: 16px; font-size: 0.875rem; line-height: 1.7; }
.footer-brand img { height: auto; width: 120px; object-fit: contain; margin-bottom: 8px; }
.footer h4, .footer h3 {
  color: var(--white);
  font-size: 0.875rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 12px;
}
.footer-links { list-style: none; }
.footer-links li { margin-bottom: 0; }
.footer-links a {
  color: rgba(255,255,255,0.5);
  font-size: 0.875rem;
  display: inline-block;
  padding: 3px 0;
  line-height: 1.55;
}
/* la zone tactile de 44px ne vaut que pour les écrans tactiles */
@media (max-width: 900px) {
  .footer-links a { min-height: 44px; display: flex; align-items: center; }
}
.footer-links a:hover { color: var(--white); }
.footer-social { display: flex; gap: 12px; }
.footer-social a {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: rgba(255,255,255,0.08);
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(255,255,255,0.6);
  font-size: 1rem;
  transition: all 0.3s;
}
.footer-social a:hover {
  background: rgba(255,255,255,0.15);
  color: var(--white);
}
.footer-bottom {
  border-top: 1px solid rgba(255,255,255,0.08);
  padding-top: 24px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.8125rem;
}
.footer-legal { display: flex; gap: 24px; }
.footer-legal a { color: rgba(255,255,255,0.6); }
.footer-legal a:hover { color: var(--white); }

/* --- CTA BANNER --- */
.cta-banner {
  background: var(--navy-deep);
  padding: 64px 48px;
  border-radius: 24px;
  text-align: center;
  position: relative;
  overflow: hidden;
}
.cta-banner::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 50% 0%, rgba(0, 70, 255, 0.08), transparent 60%);
  pointer-events: none;
}
.cta-banner h2 { color: var(--white); margin-bottom: 12px; }
.cta-banner p { color: rgba(255,255,255,0.8); margin-bottom: 24px; }
.cta-banner .btn-primary {
  background: var(--white);
  color: var(--blue);
}
.cta-banner .btn-primary:hover {
  background: var(--gray-100);
  color: var(--blue-dark);
}

/* --- ANIMATIONS --- */
.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.9s cubic-bezier(0.16, 1, 0.3, 1), transform 0.9s cubic-bezier(0.16, 1, 0.3, 1);
}
.reveal.visible {
  opacity: 1;
  transform: translateY(0);
}
.reveal-delay-1 { transition-delay: 0.12s; }
.reveal-delay-2 { transition-delay: 0.24s; }
.reveal-delay-3 { transition-delay: 0.36s; }
.reveal-delay-4 { transition-delay: 0.48s; }

/* Hero-specific staggered entrance */
.hero-home .reveal { transform: translateY(32px); }
.hero-home .reveal.visible { transform: translateY(0); }
.hero-home .badge { transition-delay: 0s; }
.hero-home .reveal-delay-1 { transition-delay: 0.15s; }
.hero-home .reveal-delay-2 { transition-delay: 0.3s; }
.hero-home .reveal-delay-3 { transition-delay: 0.45s; }

/* --- BADGE --- */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(0, 0, 0, 0.04);
  color: var(--gray-600);
  padding: 8px 18px;
  border-radius: 100px;
  font-size: 0.75rem;
  font-weight: 600;
  font-family: var(--font-heading);
  letter-spacing: 0.04em;
  border: 1px solid rgba(0, 0, 0, 0.08);
}
.dark .badge {
  background: rgba(255, 255, 255, 0.06);
  color: rgba(255,255,255,0.7);
  border-color: rgba(255, 255, 255, 0.1);
}
.badge-dot {
  width: 8px;
  height: 8px;
  background: var(--blue);
  border-radius: 50%;
  animation: pulse-dot 2s infinite;
}
@keyframes pulse-dot {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.5; transform: scale(1.5); }
}

/* --- CHECK LIST --- */
.check-list { list-style: none; }
.check-list li {
  padding: 8px 0;
  padding-left: 32px;
  position: relative;
  font-size: 0.9375rem;
}
.check-list li::before {
  content: '\2713';
  position: absolute;
  left: 0;
  color: var(--navy);
  font-weight: 700;
}

/* --- TABLE --- */
.table-wrapper { overflow-x: auto; }
table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9375rem;
}
th {
  font-family: var(--font-heading);
  font-weight: 600;
  color: var(--navy);
  text-align: left;
  padding: 16px 20px;
  background: var(--gray-50);
  border-bottom: 2px solid var(--gray-200);
}
td {
  padding: 16px 20px;
  border-bottom: 1px solid var(--gray-100);
  color: var(--gray-600);
}
tr:hover td { background: var(--gray-50); }

/* --- FAQ ACCORDION --- */
.faq-item {
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-sm);
  margin-bottom: 12px;
  overflow: hidden;
  transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
  background: var(--white);
}
.faq-item:hover {
  border-color: rgba(0, 70, 255, 0.15);
  box-shadow: var(--shadow-sm);
}
.faq-item.open {
  border-color: rgba(0, 70, 255, 0.2);
  box-shadow: 0 4px 20px rgba(0, 70, 255, 0.08);
}
.faq-question {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px 24px;
  cursor: pointer;
  font-family: var(--font-heading);
  font-weight: 600;
  color: var(--navy);
  background: var(--white);
  border: none;
  width: 100%;
  text-align: left;
  font-size: 1.0625rem;
  transition: background 0.3s;
  touch-action: manipulation;
  min-height: 44px;
}
.faq-question:hover { background: var(--gray-50); }
.faq-question::after {
  content: '+';
  font-size: 1.5rem;
  color: var(--navy);
  transition: transform 0.3s;
}
.faq-item.open .faq-question::after {
  transform: rotate(45deg);
}
.faq-answer {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}
.faq-answer-inner {
  padding: 0 24px 20px;
  color: var(--gray-600);
  line-height: 1.7;
}

/* --- RESPONSIVE --- */
@media (max-width: 1024px) {
  .grid-4 { grid-template-columns: repeat(2, 1fr); }
  .footer-inner { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 768px) {
  :root { --section-padding: 64px 0; --gap: 20px; }
  .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }
  .footer-inner { grid-template-columns: 1fr; }
  .stats-bar { gap: 24px; }
  .stat { padding: 0; }
  .stat:not(:last-child)::after { display: none; }
  .stat-number { font-size: 1.5rem; }
  .cta-banner { padding: 32px 20px; }

  /* Mobile nav - slide animation */
  .navbar-toggle { display: block; }
  .navbar-links {
    position: absolute;
    /* colle au bas de la barre, quelle que soit sa hauteur : une fois la page
       defilee elle passe a 62 px, et un top fixe a 72 px laissait une bande */
    top: 100%;
    left: 0;
    right: 0;
    /* opaque et sans flou propre : un flou imbrique dans celui de la barre est
       mal rendu par Safari, le texte de la page transparaissait sous le menu */
    background: #fbfbfc;
    flex-direction: column;
    padding: 24px;
    gap: 16px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
    box-shadow: 0 12px 40px rgba(0, 13, 43, 0.12);
    /* le panneau mesure 827 px deplie : sans plafond il depassait l'ecran et
       le doigt faisait defiler la page derriere au lieu du menu */
    max-height: calc(100vh - 72px);
    max-height: calc(100dvh - 72px);
    overflow-y: auto;
    /* sans cette ligne, overflow-y passe overflow-x de visible a auto */
    overflow-x: hidden;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    opacity: 0;
    transform: translateY(-8px);
    pointer-events: none;
    transition: opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1), transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  }
  .navbar-links.open {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
  }
  .navbar-links a,
  .navbar-transparent .navbar-links a { color: var(--navy); font-size: 1.0625rem; }
  /* Le bouton d'une rubrique à sous-menu n'est pas un lien : il échappait à la
     règle ci-dessus et gardait le blanc de la barre transparente, donc blanc
     sur le panneau blanc. */
  .navbar-links .nav-parent,
  .navbar-transparent .navbar-links .nav-parent { color: var(--navy); }
  /* Les rubriques sans sous-menu s'alignent sur celles qui en ont : elles
     pesaient 17 px contre 11,5 et coûtaient 12 px de hauteur chacune. */
  .navbar .navbar-links > li:not(.navbar-cta):not(.nav-lang) > a {
    font-size: 0.71875rem;
    letter-spacing: 0.08em;
  }
  .navbar-links a:hover,
  .navbar-transparent .navbar-links a:hover { color: var(--black); }
.navbar-links li:not(.navbar-cta) a { position: relative; padding-bottom: 4px; }
.navbar-links li:not(.navbar-cta) a::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}
.navbar-links li:not(.navbar-cta) a:hover::after,
.navbar-links li:not(.navbar-cta) a.active::after { transform: scaleX(1); }
  .navbar-cta { width: 100%; }
  .navbar-cta .btn { width: 100%; justify-content: center; }

  .footer-bottom { flex-direction: column; gap: 12px; text-align: center; }
  .footer-legal { flex-wrap: wrap; justify-content: center; }
}

@media (max-width: 480px) {
  h1 { font-size: 1.875rem; }
  h2 { font-size: 1.5rem; }
  .btn-lg { padding: 12px 24px; font-size: 0.9375rem; }
  .stats-bar { flex-direction: column; gap: 16px; }
  .logo-bar { gap: 16px; flex-wrap: wrap; justify-content: center; }
  .logo-bar img { width: auto; height: 28px; }
}

/* --- SKIP LINK --- */
.skip-link {
  position: absolute;
  top: -100%;
  left: 16px;
  background: var(--blue);
  color: var(--white);
  padding: 8px 16px;
  border-radius: var(--radius-sm);
  z-index: 10000;
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 0.875rem;
}
.skip-link:focus {
  top: 8px;
  color: var(--white);
}

/* --- STICKY CTA --- */
.sticky-cta {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 999;
  background: rgba(0, 13, 43, 0.92);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  padding: 14px 24px;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 16px;
  transform: translateY(100%);
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
  box-shadow: 0 -4px 30px rgba(0, 13, 43, 0.25);
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}
.sticky-cta.visible { transform: translateY(0); }
.sticky-cta p { color: rgba(255,255,255,0.75); font-size: 0.875rem; margin: 0; }
.sticky-cta .btn {
  padding: 10px 24px;
  font-size: 0.875rem;
  box-shadow: 0 2px 12px rgba(0, 70, 255, 0.35);
}
@media (max-width: 480px) {
  .sticky-cta p { display: none; }
}

/* --- NEWSLETTER FORM --- */
.newsletter-form {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  justify-content: center;
}
.newsletter-form input[type="email"] {
  flex: 1;
  min-width: 240px;
  padding: 14px 20px;
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-sm);
  font-family: var(--font-body);
  font-size: 1rem;
  outline: none;
  transition: border-color 0.3s, box-shadow 0.3s;
  background: var(--white);
}
.newsletter-form input[type="email"]:focus {
  border-color: var(--blue);
  box-shadow: 0 0 0 3px rgba(0, 70, 255, 0.1);
}

/* --- NAVBAR SCROLLED --- */
.navbar.scrolled {
  box-shadow: 0 1px 0 rgba(0,0,0,0.04), 0 4px 24px rgba(0, 13, 43, 0.06);
}

/* --- ACTIVE NAV LINK --- */
.navbar-links a[aria-current="page"] {
  color: var(--black);
  position: relative;
}
.navbar-links a[aria-current="page"]::after {
  content: '';
  position: absolute;
  bottom: -4px;
  left: 0;
  right: 0;
  height: 2px;
  background: var(--blue);
  border-radius: 1px;
}

/* --- HAMBURGER TO X ANIMATION --- */
.navbar-toggle.active span:nth-child(1) {
  transform: translateY(8px) rotate(45deg);
}
.navbar-toggle.active span:nth-child(2) {
  opacity: 0;
  transform: scaleX(0);
}
.navbar-toggle.active span:nth-child(3) {
  transform: translateY(-8px) rotate(-45deg);
}

/* --- FOCUS-VISIBLE (Accessibility) --- */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
.btn:focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: 3px;
  border-radius: 4px;
}
.dark a:focus-visible,
.dark button:focus-visible,
.section-dark a:focus-visible,
.section-dark button:focus-visible {
  outline-color: var(--blue-light);
}

/* --- PREFERS REDUCED MOTION --- */
@media (min-width: 999999px) /* animations forcées : bloc neutralisé */ {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  .reveal {
    opacity: 1;
    transform: none;
  }
}

/* --- VIDEO CARD ENHANCEMENTS --- */
.video-facade {
  position: relative;
  padding-bottom: 56.25%;
  height: 0;
  overflow: hidden;
  background: var(--gray-100);
  cursor: pointer;
}
.video-facade img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}
.video-facade:hover img {
  transform: scale(1.03);
}
.video-facade .play-btn {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 64px;
  height: 64px;
  background: rgba(0, 70, 255, 0.9);
  border: none;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.3s;
  box-shadow: 0 4px 20px rgba(0, 70, 255, 0.4);
}
.video-facade .play-btn:focus-visible {
  outline: 2px solid var(--white);
  outline-offset: 4px;
}
.video-facade:hover .play-btn {
  background: var(--blue);
  transform: translate(-50%, -50%) scale(1.1);
  box-shadow: 0 8px 30px rgba(0, 70, 255, 0.5);
}
.video-facade .play-btn svg {
  width: 24px;
  height: 24px;
  fill: var(--white);
  margin-left: 3px;
}
.video-facade iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 0;
}
.video-facade.is-playing {
  cursor: default;
}
.video-facade.is-playing .play-btn {
  display: none;
}

/* --- SMOOTH SCROLL PADDING FOR FIXED NAV --- */
html { scroll-padding-top: 80px; }

/* --- PREMIUM GRADIENT TEXT --- */
.gradient-text {
  background: linear-gradient(135deg, var(--blue) 0%, var(--blue-bright) 50%, var(--blue-light) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* --- PREMIUM HOVER GLOW FOR LINKS --- */
.glow-link {
  transition: all 0.3s;
}
.glow-link:hover {
  text-shadow: 0 0 20px rgba(0, 70, 255, 0.3);
}

/* --- PREMIUM SECTION SPACING --- */
.section-premium {
  position: relative;
}
.section-premium + .section-premium::before {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: min(80%, 600px);
  height: 1px;
  background: var(--gradient-divider);
}

/* --- SELECTION COLOR --- */
::selection {
  background: rgba(0, 70, 255, 0.15);
  color: var(--navy);
}

/* ========================================
   UTILITY CLASSES (replace inline styles)
   ======================================== */

/* --- Spacing Utilities --- */
.mt-0 { margin-top: 0; }
.mt-4 { margin-top: var(--space-4); }
.mt-8 { margin-top: var(--space-8); }
.mt-12 { margin-top: var(--space-12); }
.mt-16 { margin-top: var(--space-16); }
.mt-20 { margin-top: var(--space-20); }
.mt-24 { margin-top: var(--space-24); }
.mt-32 { margin-top: var(--space-32); }
.mt-40 { margin-top: var(--space-40); }
.mt-48 { margin-top: var(--space-48); }

.mb-0 { margin-bottom: 0; }
.mb-6 { margin-bottom: var(--space-6); }
.mb-8 { margin-bottom: var(--space-8); }
.mb-12 { margin-bottom: var(--space-12); }
.mb-16 { margin-bottom: var(--space-16); }
.mb-20 { margin-bottom: var(--space-20); }
.mb-24 { margin-bottom: var(--space-24); }
.mb-32 { margin-bottom: var(--space-32); }
.mb-48 { margin-bottom: var(--space-48); }

.my-16 { margin-top: var(--space-16); margin-bottom: var(--space-16); }

.mx-auto { margin-left: auto; margin-right: auto; }

/* --- Section Padding Variants --- */
.section-sm { padding: var(--section-padding-sm); }
.section-md { padding: var(--section-padding-md); }
.section-lg { padding: var(--section-padding-lg); }
.section-hero { padding: var(--section-padding-hero); }

/* --- Layout Utilities --- */
.flex { display: flex; }
.flex-col { flex-direction: column; }
.flex-wrap { flex-wrap: wrap; }
.items-center { align-items: center; }
.items-start { align-items: flex-start; }
.justify-center { justify-content: center; }
.justify-between { justify-content: space-between; }
.gap-8 { gap: var(--space-8); }
.gap-12 { gap: var(--space-12); }
.gap-14 { gap: 14px; }
.gap-16 { gap: var(--space-16); }
.gap-20 { gap: var(--space-20); }
.gap-24 { gap: var(--space-24); }
.gap-32 { gap: var(--space-32); }
.w-full { width: 100%; }
.shrink-0 { flex-shrink: 0; }
.self-end { align-self: flex-end; }
.relative { position: relative; }
.z-1 { z-index: 1; }
.overflow-hidden { overflow: hidden; }

/* --- Width Constraints --- */
.max-w-800 { max-width: 800px; }
.max-w-640 { max-width: 640px; }

/* --- Typography Utilities --- */
.text-xs { font-size: var(--text-xs); }
.text-sm { font-size: var(--text-sm); }
.text-base { font-size: var(--text-base); }
.text-md { font-size: var(--text-md); }
.text-lg { font-size: var(--text-lg); }
.text-xl { font-size: var(--text-xl); }
.text-2xl { font-size: var(--text-2xl); }
.font-heading { font-family: var(--font-heading); }
.font-semibold { font-weight: 600; }
.font-bold { font-weight: 700; }
.uppercase { text-transform: uppercase; }
.tracking-wide { letter-spacing: 0.05em; }
.tracking-wider { letter-spacing: 0.08em; }
.tracking-widest { letter-spacing: 0.1em; }
.leading-relaxed { line-height: 1.7; }

/* --- Color Utilities --- */
.text-navy { color: var(--color-text-primary); }
.text-body { color: var(--color-text-body); }
.text-muted { color: var(--color-text-muted); }
.text-blue { color: var(--color-cta); }
.text-white { color: var(--white); }
.text-on-dark { color: var(--color-text-on-dark); }
.text-on-dark-muted { color: var(--color-text-on-dark-muted); }

/* --- Component Patterns (replacing common inline combos) --- */

/* Feature list item (dark bg) */
.feature-item {
  display: flex;
  align-items: flex-start;
  gap: var(--space-12);
  font-size: var(--text-base);
}
.feature-item--highlight { color: var(--color-text-on-dark); }
.feature-item--muted { color: var(--color-text-on-dark-muted); }

/* Icon circle */
.icon-circle {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.icon-circle--dark { background: rgba(255, 255, 255, 0.06); }
.icon-circle--blue { background: rgba(0, 70, 255, 0.15); }
.icon-circle--blue-subtle {
  width: 56px;
  height: 56px;
  background: linear-gradient(135deg, rgba(0, 70, 255, 0.12), rgba(0, 70, 255, 0.03));
  border: 1px solid rgba(0, 70, 255, 0.1);
}

/* Inline label (uppercase small text) */
.label {
  font-size: var(--text-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--gray-500);
}
.label--muted {
  font-size: var(--text-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--gray-500);
}

/* Card heading (heading font, semi-bold, navy) */
.card-title {
  font-family: var(--font-heading);
  font-weight: 600;
  color: var(--color-text-primary);
  font-size: var(--text-lg);
}

/* Card subtitle / meta */
.card-meta {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  margin-top: var(--space-4);
  letter-spacing: 0.02em;
}

/* Card accent text */
.card-accent {
  font-size: var(--text-base);
  color: var(--navy);
  font-weight: 700;
  margin-top: var(--space-4);
}

/* Feature list (unstyled vertical) */
.list-features {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

/* Video embed wrapper (16:9) */
.video-embed {
  position: relative;
  padding-bottom: 56.25%;
  height: 0;
  overflow: hidden;
}
.video-embed iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

/* Card with border (common inline pattern) */
.card-bordered {
  background: var(--color-surface);
  border: 1px solid var(--gray-100);
  border-radius: 20px;
  overflow: hidden;
  box-shadow: none;
  transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}
.card-bordered:hover {
  transform: translateY(-3px);
  box-shadow: 0 16px 48px rgba(0, 13, 43, 0.06);
}

/* Card highlighted (blue border accent) */
.card-highlighted {
  background: var(--white);
  box-shadow: 0 2px 24px rgba(0, 13, 43, 0.06);
}

/* Inner padding for card content */
.card-body { padding: var(--space-20) var(--space-24); }

/* Section description (muted, below title) */
.section-desc {
  color: var(--color-text-muted);
  font-size: 0.875rem;
  margin-top: var(--space-40);
}

/* Flex button group */
.btn-group {
  display: flex;
  gap: var(--space-12);
  margin-top: var(--space-16);
  flex-wrap: wrap;
}
.btn-group--center { justify-content: center; width: 100%; }

/* ========================================
   PAGE-SPECIFIC COMPONENTS
   ======================================== */

/* --- HERO HOME --- */
.hero-home { padding: 134px 0 40px; }
.hero-grid { grid-template-columns: 1.2fr 0.8fr; }
.hero-home .hero-grid > div:first-child { max-width: 664px; padding-bottom: 16px; }
.pb-40 { padding-bottom: 40px; }
.mb-0 { margin-bottom: 0; }
.mb-8 { margin-bottom: var(--space-8); }
.mb-20 { margin-bottom: var(--space-20); }
.mb-24 { margin-bottom: var(--space-24); }
.mb-32 { margin-bottom: var(--space-32); }
.mb-36 { margin-bottom: 36px; }
.mb-40 { margin-bottom: 40px; }

.hero-tagline {
  color: var(--blue-light);
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: var(--text-base);
  letter-spacing: 0.01em;
}

.hero-portrait {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: flex-end;
  margin-right: -80px;
}
.hero-glow {
  position: absolute;
  bottom: 20%;
  left: 50%;
  transform: translateX(-50%);
  width: 400px;
  height: 400px;
  background: radial-gradient(circle, rgba(0, 70, 255, 0.18), transparent 70%);
  border-radius: 50%;
  z-index: 0;
}
.hero-img {
  position: relative;
  z-index: 1;
  height: 650px;
  width: auto;
  display: block;
  object-fit: cover;
  object-position: top center;
  margin-bottom: -70px;
}

/* --- LOGOS SECTION --- */
.section-logos { padding: 16px 0; }
.logo-bar--compact { padding: 8px 0; }

/* --- CARD GLASS SUBTLE (not-for-you variant) --- */
.card-glass--subtle {
  background: rgba(255, 255, 255, 0.03);
  border-color: rgba(255, 255, 255, 0.08);
}

/* --- MAX PORTRAIT SECTION --- */
.section-max { padding: 40px 0 0; }
.section-max .grid-2 { grid-template-columns: 0.8fr 1.2fr; gap: 24px; }
/* la regle ci-dessus est plus specifique que le passage a une colonne du
   bloc mobile : sans cette reprise, la section restait sur deux colonnes
   de 127 et 190 px sur telephone */
@media (max-width: 900px) {
  .section-max .grid-2 { grid-template-columns: 1fr; gap: 32px; }
  .section-max-bio > .flex.gap-32 { gap: 18px; }
}
.section-max-bio { align-self: center; padding: 40px 0; }
.max-portrait {
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  max-height: 520px;
  width: 100%;
  object-fit: cover;
  object-position: top;
  display: block;
  transform: scaleX(-1);
}

/* --- CTA FINAL SECTION --- */
.section-cta-final { padding: 120px 0 100px; background: var(--white); }
.max-w-720 { max-width: 720px; }
.trust-note { letter-spacing: 0.04em; }

/* --- FOOTER NEWSLETTER --- */
.footer-newsletter {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-20);
  padding-bottom: 32px;
  margin-bottom: 40px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  flex-wrap: wrap;
}
.footer-newsletter-title {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 0.875rem;
  color: var(--white);
  margin: 0;
  white-space: nowrap;
}
.footer-newsletter .newsletter-form { margin: 0; }
.footer-newsletter-count {
  font-size: 0.6875rem;
  color: rgba(255, 255, 255, 0.25);
  margin: 0;
}
.newsletter-input {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: var(--white);
  width: 240px;
  padding: 9px 14px;
  font-size: var(--text-sm);
  border-radius: 8px;
  font-family: var(--font-body);
  outline: none;
  transition: border-color 0.3s;
  height: 40px;
}
.newsletter-input:focus { border-color: var(--blue); }
.newsletter-input::placeholder { color: rgba(255, 255, 255, 0.35); }
.newsletter-btn { padding: 9px 20px; font-size: var(--text-sm); white-space: nowrap; height: 40px; }
.newsletter-btn:disabled {
  background: #10B981;
  opacity: 1;
  cursor: default;
  box-shadow: 0 2px 12px rgba(16, 185, 129, 0.3);
}
.newsletter-form input:disabled {
  opacity: 0.5;
}
.footer-logo { width: 120px; height: auto; object-fit: contain; }

/* --- RESSOURCES PAGE --- */
.video-title {
  font-family: var(--font-heading);
  font-weight: 600;
  color: var(--navy);
}
.video-meta {
  font-size: 0.8125rem;
  color: var(--gray-500);
  margin-top: 4px;
}
.guide-desc {
  color: var(--gray-600);
  font-size: 0.9375rem;
  margin-bottom: 20px;
  flex: 1;
}
.book-desc {
  color: var(--gray-600);
  margin-bottom: 16px;
}
.book-highlight {
  color: var(--navy);
  font-family: var(--font-heading);
  font-weight: 600;
  margin-bottom: 24px;
}
.book-img {
  max-width: 320px;
  width: 100%;
  height: auto;
  display: inline-block;
}
.newsletter-wrapper {
  display: flex;
  gap: 12px;
  max-width: 480px;
  margin: 0 auto;
  flex-wrap: wrap;
  justify-content: center;
}
.newsletter-wrapper input[type="email"] {
  flex: 1;
  min-width: 240px;
}
.newsletter-disclaimer {
  margin-top: 12px;
  font-size: 0.8125rem;
  color: rgba(255, 255, 255, 0.5);
}
.gap-48 { gap: 48px; }

/* --- LEGAL PAGES --- */
.legal-content { max-width: 800px; }
.legal-content h2 { margin-top: 40px; }
.legal-content h2:first-child { margin-top: 0; }
.legal-content p { margin: 16px 0; }
.legal-content ul { margin: 16px 0 16px 24px; }
.legal-meta {
  margin-top: 40px;
  color: var(--gray-500);
  font-size: 0.875rem;
}

/* --- SHARED UTILITIES (additional) --- */
.max-w-560 { max-width: 560px; }
.ml-16 { margin-left: 16px; }
.section-flush-top { padding-top: 0; padding-bottom: 40px; }
.cta-link {
  display: block;
  margin-top: 12px;
  color: rgba(255, 255, 255, 0.7);
  font-size: 0.9375rem;
}

/* --- A-PROPOS & FAQ PAGE UTILITIES --- */

/* FAQ group heading */
.faq-group-title {
  font-size: 0.8125rem;
  color: var(--gray-500);
  margin-bottom: 20px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* Team section heading */
.team-section-heading {
  margin-bottom: 32px;
  color: var(--gray-500);
  font-size: 0.875rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

/* Summary box for additional departments */
.other-poles-box {
  padding: 32px;
  background: var(--gray-50, #f8f9fa);
  border-radius: var(--radius-lg);
  text-align: center;
}
.other-poles-title {
  font-size: 1.125rem;
  font-weight: 600;
  font-family: var(--font-heading);
  margin-bottom: 8px;
}

/* CTA contact link on dark bg */
.cta-contact-link {
  color: rgba(255, 255, 255, 0.7);
  font-size: 0.9375rem;
}

/* Section padding variants */
.section-cta-bottom { padding: 40px 0 100px; }
.section-cta-flush { padding: 0 0 100px; }

/* Stats bar with top border */
.stats-bar-bordered {
  margin-top: 48px;
  border-top: 1px solid var(--gray-200);
  padding-top: 48px;
}

/* Newsletter section (FAQ/a-propos standalone) */
.section-newsletter {
  background: var(--gray-50, #f8f9fa);
  padding: 80px 0;
}
.section-newsletter .newsletter-form input[type="email"] {
  flex: 1;
  min-width: 240px;
  padding: 14px 20px;
  border: 1px solid var(--gray-200, #e5e7eb);
  border-radius: 8px;
  font-size: 1rem;
  outline: none;
  transition: border-color 0.2s;
}
.section-newsletter .newsletter-form input[type="email"]:focus {
  border-color: var(--blue);
}
.max-w-600 { max-width: 600px; }
.mt-64 { margin-top: 64px; }

/* --- Programmes page utilities --- */
.link-light { color: var(--blue-light); text-decoration: underline; }
.link-light:hover { color: var(--white); }
.pb-80 { padding-bottom: 80px; }
.mb-28 { margin-bottom: 28px; }
.section-newsletter {
  padding: var(--section-padding-sm);
  background: var(--gray-50, #f8f9fa);
  border-top: 1px solid var(--gray-200);
}
.newsletter-title {
  font-size: 1.75rem;
  margin-bottom: 12px;
}

/* ========================================
   HERO PAGE (shared across inner pages)
   ======================================== */
.hero-page,
.hero-compact {
  padding: 140px 0 80px;
}
.hero-page h1,
.hero-compact h1 {
  max-width: 800px;
  margin: 0 auto 20px;
}
.hero-page .section-subtitle,
.hero-compact .section-subtitle {
  max-width: 680px;
  margin: 0 auto;
}

/* ========================================
   PROGRAMMES PAGE
   ======================================== */

/* Programme cards grid */
.programme-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.programme-card {
  background: var(--white);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 2px 8px rgba(0, 13, 43, 0.04);
}
.programme-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 16px 48px rgba(0, 25, 76, 0.1);
  border-color: rgba(0, 70, 255, 0.15);
}
.programme-card.featured {
  border-color: rgba(0, 70, 255, 0.25);
  box-shadow: 0 4px 20px rgba(0, 70, 255, 0.08);
}
.programme-card--recommended {
  position: relative;
  border-color: var(--navy);
  box-shadow: 0 0 0 1px rgba(0, 25, 76, 0.12), 0 8px 32px rgba(0, 25, 76, 0.08);
}
.programme-card-ribbon {
  position: absolute;
  top: 16px;
  right: -8px;
  background: var(--navy-deep);
  color: var(--white);
  font-family: var(--font-heading);
  font-size: 0.6875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 6px 16px 6px 12px;
  border-radius: 4px 0 0 4px;
  z-index: 2;
  box-shadow: 0 4px 12px rgba(0, 70, 255, 0.3);
}
.programme-card-ribbon::after {
  content: '';
  position: absolute;
  top: 100%;
  right: 0;
  border: 4px solid transparent;
  border-top-color: var(--blue-dark);
  border-right-color: var(--blue-dark);
}
.programme-card-img {
  width: 100%;
  height: 200px;
  object-fit: cover;
  display: block;
}
.programme-card-body {
  padding: 24px 28px 28px;
  display: flex;
  flex-direction: column;
  flex: 1;
}
.programme-card-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(0, 0, 0, 0.04);
  color: var(--blue);
  padding: 4px 12px;
  border-radius: 100px;
  font-size: 0.6875rem;
  font-weight: 600;
  font-family: var(--font-heading);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  width: fit-content;
  margin-bottom: 12px;
}
.programme-card-title {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 1.25rem;
  color: var(--navy);
  margin-bottom: 4px;
}
.programme-card-format {
  font-size: 0.8125rem;
  color: var(--gray-500);
  margin-bottom: 12px;
}
.programme-card-desc {
  color: var(--gray-600);
  font-size: 0.9375rem;
  line-height: 1.7;
  margin-bottom: 20px;
  flex: 1;
}
.programme-card-actions {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.programme-card-actions .btn {
  width: 100%;
  justify-content: center;
}
.programme-card-video {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--navy);
  text-decoration: none;
  transition: color 0.3s;
}
.programme-card-video:hover {
  color: var(--blue-hover);
}
.programme-card-video svg {
  flex-shrink: 0;
}

/* Filter tabs */
.filter-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
  margin-bottom: 40px;
}
.filter-tab {
  font-family: var(--font-heading);
  font-size: 0.9375rem;
  font-weight: 600;
  padding: 12px 28px;
  border-radius: 100px;
  border: 1.5px solid var(--gray-200);
  background: var(--white);
  color: var(--gray-600);
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.filter-tab:hover {
  border-color: var(--navy);
  color: var(--navy);
}
.filter-tab.active {
  background: var(--navy);
  color: var(--white);
  border-color: var(--navy);
}
.programme-card[data-category] {
  transition: opacity 0.3s, transform 0.3s;
}
.programme-card.hidden {
  display: none;
}

/* Section spacing adjustment */
.programmes-section {
  padding: 48px 0 100px;
}

/* Video modal */
.video-modal {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 9999;
  align-items: center;
  justify-content: center;
}
.video-modal.active {
  display: flex;
}
.video-modal-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 13, 43, 0.85);
  cursor: pointer;
}
.video-modal-content {
  position: relative;
  width: 90%;
  max-width: 900px;
  aspect-ratio: 16/9;
  z-index: 1;
}
.video-modal-content iframe {
  width: 100%;
  height: 100%;
  border: 0;
  border-radius: 12px;
}
.video-modal-close {
  position: absolute;
  top: -40px;
  right: 0;
  background: none;
  border: none;
  color: white;
  font-size: 2rem;
  cursor: pointer;
  line-height: 1;
  padding: 4px 8px;
}
.video-modal-close:hover {
  opacity: 0.7;
}

/* FAQ section specific */
.faq-section {
  padding: 80px 0 100px;
}
.faq-wrapper {
  max-width: 800px;
  margin: 0 auto;
}

@media (max-width: 1024px) {
  .programme-cards { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 768px) {
  .programme-cards { grid-template-columns: 1fr; }
}

/* ========================================
   RESULTATS PAGE
   ======================================== */
.case-study-card {
  background: var(--white);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius);
  padding: 40px;
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 2px 8px rgba(0, 13, 43, 0.04);
}
.case-study-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 16px 48px rgba(0, 25, 76, 0.1);
  border-color: rgba(0, 70, 255, 0.12);
}
.case-study-result {
  font-family: var(--font-heading);
  font-size: clamp(1.5rem, 2.5vw, 2rem);
  font-weight: 700;
  color: var(--blue);
  margin-bottom: 8px;
  line-height: 1.2;
}
.case-study-meta {
  font-size: 0.8125rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--gray-500);
  margin-bottom: 24px;
  padding-bottom: 24px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}
.case-study-phase {
  margin-bottom: 16px;
}
.case-study-phase-label {
  font-family: var(--font-heading);
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: 4px;
}
.case-study-phase-label.before { color: var(--gray-500); }
.case-study-phase-label.transformation { color: var(--navy); }
.case-study-phase-label.resultat { color: #10B981; }
.case-study-phase p {
  font-size: 0.9375rem;
  line-height: 1.6;
  color: var(--gray-600);
}
.case-studies-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--gap);
}
.case-studies-grid .case-study-card:last-child {
  grid-column: 1 / -1;
  max-width: 600px;
  justify-self: center;
  width: 100%;
}

.celeb-quote {
  background: var(--white);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius);
  padding: 36px;
  text-align: center;
  box-shadow: 0 2px 8px rgba(0, 13, 43, 0.04);
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}
.celeb-quote:hover {
  box-shadow: 0 8px 30px rgba(0, 13, 43, 0.08);
  border-color: rgba(0, 70, 255, 0.1);
}
.celeb-quote blockquote {
  font-size: 1.0625rem;
  font-style: italic;
  color: var(--gray-800);
  line-height: 1.7;
  margin-bottom: 16px;
}
.celeb-quote .celeb-name {
  font-family: var(--font-heading);
  font-weight: 600;
  color: var(--navy);
  font-size: 0.9375rem;
}
.celeb-quote .celeb-title {
  font-size: 0.8125rem;
  color: var(--gray-500);
}

.cta-section { padding: 80px 0; }

/* Video testimonial styles */
.video-card {
  background: var(--white);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius);
  overflow: hidden;
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 2px 8px rgba(0, 13, 43, 0.04);
}
.video-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 16px 48px rgba(0, 25, 76, 0.1);
  border-color: rgba(0, 70, 255, 0.12);
}
.video-card .video-wrapper {
  position: relative;
  padding-bottom: 56.25%;
  height: 0;
  overflow: hidden;
}
.video-card .video-wrapper iframe {
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  height: 100%;
  border: 0;
}
.video-card .video-info {
  padding: 20px 24px;
}
.video-card .video-name {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 1.0625rem;
  color: var(--navy);
  margin-bottom: 4px;
}
.video-card .video-result {
  font-size: 0.9375rem;
  color: var(--navy);
  font-weight: 500;
}
.video-card .video-program {
  font-size: 0.8125rem;
  color: var(--gray-500);
  margin-top: 4px;
}

/* Hero videos grid - 2 columns, large */
.videos-hero-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 32px;
}

/* Compact video grid - 3 columns, smaller */
.videos-compact-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.videos-compact-grid .video-card .video-info {
  padding: 14px 18px;
}
.videos-compact-grid .video-card .video-name {
  font-size: 0.9375rem;
}
.videos-compact-grid .video-card .video-result {
  font-size: 0.8125rem;
}

/* Hidden videos + toggle */
.videos-hidden { display: none; }
.videos-hidden.is-visible { display: grid; margin-top: 24px; }
.btn-show-more {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 32px;
  padding: 14px 32px;
  background: var(--white);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius);
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 0.9375rem;
  color: var(--navy);
  cursor: pointer;
  transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 2px 8px rgba(0, 13, 43, 0.04);
}
.btn-show-more:hover {
  border-color: rgba(0, 25, 76, 0.2);
  color: var(--navy);
  box-shadow: 0 8px 24px rgba(0, 25, 76, 0.06);
  transform: translateY(-2px);
}
.btn-show-more svg {
  transition: transform 0.3s ease;
}
.btn-show-more.is-open svg {
  transform: rotate(180deg);
}

@media (max-width: 768px) {
  .case-studies-grid { grid-template-columns: 1fr; }
  .case-studies-grid .case-study-card:last-child { max-width: none; }
  .videos-hero-grid { grid-template-columns: 1fr; }
}
@media (max-width: 1024px) {
  .videos-compact-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  .videos-compact-grid { grid-template-columns: 1fr; }
}

/* ========================================
   METHODE PAGE
   ======================================== */

/* Process steps */
.process-step {
  display: flex;
  gap: 32px;
  align-items: flex-start;
  padding: 36px 0;
  border-bottom: 1px solid var(--gray-100);
  transition: all 0.3s;
}
.process-step:hover {
  padding-left: 8px;
}
.process-step:last-child { border-bottom: none; }
.process-number {
  font-family: var(--font-heading);
  font-size: 3rem;
  font-weight: 700;
  background: linear-gradient(180deg, var(--blue) 0%, rgba(0, 70, 255, 0.3) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  line-height: 1;
  min-width: 80px;
}
.process-content h3 {
  margin-bottom: 8px;
}
.process-content p {
  color: var(--gray-600);
  line-height: 1.7;
}

/* Stats grid on dark bg */
.stats-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--gap);
}
.stat-card {
  text-align: center;
  padding: 32px 16px;
}
.stat-card .stat-number {
  font-size: 2.5rem;
  margin-bottom: 8px;
}
.stat-card .stat-label {
  font-size: 0.9375rem;
}

@media (max-width: 768px) {
  .process-step { flex-direction: column; gap: 12px; }
  .process-number { font-size: 2rem; min-width: auto; }
  .stats-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 480px) {
  .stats-grid { grid-template-columns: 1fr; }
}

/* ========================================
   A PROPOS PAGE
   ======================================== */

/* Timeline styles */
.timeline {
  position: relative;
  max-width: 720px;
  margin: 0 auto;
  padding: 20px 0;
}
.timeline::before {
  content: '';
  position: absolute;
  left: 24px;
  top: 0;
  bottom: 0;
  width: 2px;
  background: linear-gradient(180deg, var(--blue), var(--gray-200) 80%, transparent);
}
.timeline-item {
  position: relative;
  padding-left: 64px;
  padding-bottom: 40px;
}
.timeline-item:last-child {
  padding-bottom: 0;
}
.timeline-dot {
  position: absolute;
  left: 16px;
  top: 4px;
  width: 18px;
  height: 18px;
  background: var(--white);
  border: 3px solid var(--navy);
  border-radius: 50%;
  z-index: 1;
  box-shadow: 0 0 0 4px rgba(0, 25, 76, 0.08);
}
.timeline-year {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 1.125rem;
  color: var(--navy);
  margin-bottom: 4px;
}
.timeline-text {
  color: var(--gray-600);
  font-size: 0.9375rem;
  line-height: 1.6;
}

/* Team grid */
.team-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 32px;
  margin-top: 48px;
}
.team-member {
  text-align: center;
}
.team-member-photo {
  width: 120px;
  height: 120px;
  border-radius: 50%;
  object-fit: cover;
  margin: 0 auto 16px;
  display: block;
  border: 3px solid var(--gray-200);
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}
.team-member:hover .team-member-photo {
  border-color: rgba(0, 70, 255, 0.25);
  box-shadow: 0 8px 24px rgba(0, 13, 43, 0.1);
  transform: scale(1.05);
}
.team-member h4 {
  font-family: var(--font-heading);
  font-size: 0.9375rem;
  font-weight: 600;
  margin-bottom: 4px;
}
.team-member .team-role {
  font-size: 0.8125rem;
  color: var(--gray-500);
  font-weight: 500;
}
.team-pole {
  margin-top: 64px;
}
.team-pole-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 24px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--gray-100);
}
.team-pole-icon {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background: linear-gradient(135deg, rgba(0, 70, 255, 0.1), rgba(0, 70, 255, 0.04));
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.team-pole-header h3 {
  font-size: 1.25rem;
}
.team-pole-header p {
  font-size: 0.9375rem;
  color: var(--gray-500);
}
.team-pole-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 24px;
}

/* Media logos bar text */
.media-mentions {
  text-align: center;
  color: var(--gray-500);
  font-size: 0.9375rem;
  margin-top: 16px;
}

/* Bio image */
.bio-image {
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.bio-image img {
  width: 100%;
  height: auto;
  object-fit: cover;
}

/* Award badge */
.award-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(0, 0, 0, 0.03);
  border: 1px solid rgba(0, 0, 0, 0.08);
  color: var(--navy);
  padding: 10px 20px;
  border-radius: 100px;
  font-size: 0.875rem;
  font-weight: 600;
  font-family: var(--font-heading);
  margin-bottom: 20px;
}

/* Newsletter section (a-propos specific) */
.newsletter-section {
  background: var(--gray-50, #f8f9fa);
  padding: 80px 0;
  border-top: 1px solid var(--gray-200, #e5e7eb);
}
.newsletter-box {
  max-width: 560px;
  margin: 0 auto;
  text-align: center;
}
.newsletter-box h2 {
  margin-bottom: 12px;
}
.newsletter-box p {
  color: var(--gray-600, #4b5563);
  margin-bottom: 28px;
}
.newsletter-note {
  font-size: 0.8125rem;
  color: var(--gray-400, #9ca3af);
  margin-top: 12px;
}

@media (max-width: 768px) {
  .team-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
  }
  .team-pole-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .timeline::before {
    left: 16px;
  }
  .timeline-item {
    padding-left: 48px;
  }
  .timeline-dot {
    left: 8px;
  }
}

/* ========================================
   RESSOURCES PAGE
   ======================================== */

/* Guide cards */
.guide-card {
  background: var(--white);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius);
  overflow: hidden;
  display: grid;
  grid-template-columns: 190px minmax(0, 1fr);
  align-items: center;
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 2px 8px rgba(0, 13, 43, 0.04);
}
.guide-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 32px rgba(0, 25, 76, 0.08);
  border-color: rgba(0, 70, 255, 0.15);
}
.guide-card-visual {
  padding: 24px 0 24px 24px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.guide-card-visual img {
  width: 100%;
  max-width: 150px;
  height: auto;
  display: block;
  border-radius: 4px;
  border: 1px solid var(--gray-200);
  box-shadow: 0 8px 20px -6px rgba(0, 13, 43, 0.18);
}
.guide-card-body {
  padding: 24px 28px 24px 24px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.guide-tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(0, 0, 0, 0.03);
  color: var(--gray-500);
  padding: 4px 12px;
  border-radius: 100px;
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 16px;
  width: fit-content;
  border: none;
}

/* Articles grid */
.article-card {
  background: var(--white);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius);
  overflow: hidden;
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  display: flex;
  flex-direction: column;
  box-shadow: 0 2px 8px rgba(0, 13, 43, 0.04);
}
.article-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 16px 48px rgba(0, 25, 76, 0.1);
  border-color: rgba(0, 70, 255, 0.12);
}
.article-card-body {
  padding: 24px;
  flex: 1;
  display: flex;
  flex-direction: column;
}
.article-category {
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--blue);
  margin-bottom: 8px;
}
.article-card-body h3, .article-card-body h2 {
  font-size: 1.125rem;
  margin-bottom: 8px;
  line-height: 1.4;
}
.article-card-body h3 a, .article-card-body h2 a {
  color: var(--navy);
  text-decoration: none;
}
.article-card-body h3 a:hover, .article-card-body h2 a:hover {
  color: var(--blue);
}
.article-card-body p {
  color: var(--gray-600);
  font-size: 0.9375rem;
  line-height: 1.6;
  flex: 1;
}
.article-meta {
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid var(--gray-100);
  font-size: 0.8125rem;
  color: var(--gray-500);
}

/* Video resources */
.video-resource {
  background: var(--white);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius);
  overflow: hidden;
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 2px 8px rgba(0, 13, 43, 0.04);
}
.video-resource:hover {
  transform: translateY(-6px);
  box-shadow: 0 16px 48px rgba(0, 25, 76, 0.1);
}
.video-resource-body {
  padding: 16px 20px;
}

/* Topic tabs */
.topic-tabs {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: center;
  margin-bottom: 40px;
}
.topic-tab {
  padding: 8px 20px;
  border-radius: 100px;
  font-family: var(--font-heading);
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--gray-600);
  background: var(--white);
  border: 1px solid var(--gray-200);
  cursor: pointer;
  transition: all 0.3s;
  text-decoration: none;
  letter-spacing: 0.01em;
}
.topic-tab:hover {
  background: var(--gray-50);
  color: var(--navy);
  border-color: rgba(0, 70, 255, 0.2);
}
.topic-tab.active {
  background: var(--navy);
  color: var(--white);
  border-color: var(--navy);
  box-shadow: 0 4px 12px rgba(0, 70, 255, 0.25);
}

@media (max-width: 768px) {
  .grid-3 { grid-template-columns: 1fr; }
}

/* --- RESPONSIVE: Hero & page-specific --- */
@media (max-width: 768px) {
  .hero-home { padding: 100px 0 40px; }
  .hero-grid { grid-template-columns: 1fr; }
  .hero-portrait { margin-right: 0; }
  .hero-img { height: 400px; }
  .hero-glow { width: 250px; height: 250px; }
  .section-max { padding: 60px 0 0; }
  .section-cta-final { padding: 64px 0 60px; }
  .footer-newsletter { text-align: center; }
}

@media (max-width: 480px) {
  .hero-img { height: 300px; }
}

/* ========================================
   BLOG PAGES
   ======================================== */

/* --- BLOG LISTING GRID --- */
.blog-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--gap);
}

/* --- BLOG CARD --- */
.blog-card {
  background: var(--white);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 2px 8px rgba(0, 13, 43, 0.04);
}
.blog-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 16px 48px rgba(0, 25, 76, 0.1);
  border-color: rgba(0, 70, 255, 0.12);
}

.blog-card-thumbnail {
  display: block;
  text-decoration: none;
  overflow: hidden;
  border-radius: 12px 12px 0 0;
}
.blog-card-thumbnail img {
  width: 100%;
  height: 200px;
  object-fit: cover;
  display: block;
  transition: transform 0.4s ease;
}
.blog-card:hover .blog-card-thumbnail img {
  transform: scale(1.05);
}
.blog-card-placeholder {
  background: var(--navy-deep);
  display: flex;
  align-items: center;
  justify-content: center;
  height: 200px;
  transition: background 0.4s;
}
.blog-card:hover .blog-card-placeholder {
  background: var(--navy);
}

.blog-card-body {
  padding: 24px;
  display: flex;
  flex-direction: column;
  flex: 1;
}

.blog-card-tag {
  display: inline-block;
  font-family: var(--font-heading);
  font-size: 0.6875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--navy);
  background: rgba(0, 0, 0, 0.03);
  border: 1px solid rgba(0, 70, 255, 0.1);
  padding: 4px 12px;
  border-radius: 100px;
  width: fit-content;
  margin-bottom: 12px;
}

.blog-card-body h3, .blog-card-body h2 {
  font-size: 1.125rem;
  line-height: 1.4;
  margin-bottom: 8px;
}
.blog-card-body h3 a, .blog-card-body h2 a {
  color: var(--navy);
  text-decoration: none;
}
.blog-card-body h3 a:hover, .blog-card-body h2 a:hover {
  color: var(--blue);
}

.blog-card-excerpt {
  color: var(--gray-600);
  font-size: 0.9375rem;
  line-height: 1.6;
  flex: 1;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.blog-card-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid var(--gray-100);
}
.blog-card-readtime {
  font-size: 0.8125rem;
  color: var(--gray-500);
}
.blog-card-link {
  font-family: var(--font-heading);
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--navy);
}
.blog-card-link:hover {
  color: var(--blue-dark);
}

/* Compact variant (related articles) */
.blog-card--compact {
  flex-direction: row;
}
.blog-card--compact .blog-card-body {
  padding: 20px 24px;
}
.blog-card--compact .blog-card-body h3, .blog-card--compact .blog-card-body h2 {
  font-size: 1rem;
}

/* --- READING PROGRESS BAR --- */
.reading-progress {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: var(--navy-deep);
  z-index: 1001;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.1s linear;
}

/* --- ARTICLE HERO --- */
.article-hero {
  padding: 140px 0 60px;
}
.article-hero-inner {
  max-width: 720px;
}
.article-breadcrumb {
  display: inline-block;
  font-size: 0.875rem;
  color: rgba(255, 255, 255, 0.5);
  margin-bottom: 20px;
  transition: color 0.3s;
}
.article-breadcrumb:hover {
  color: rgba(255, 255, 255, 0.85);
}
.article-hero h1 {
  color: var(--white);
  margin-top: 12px;
  margin-bottom: 20px;
}
.article-hero .blog-card-tag {
  background: rgba(0, 70, 255, 0.2);
  border-color: rgba(0, 70, 255, 0.3);
  color: var(--blue-light);
}
.article-meta-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  font-size: 0.9375rem;
  color: rgba(255, 255, 255, 0.6);
}
.article-meta-bar strong {
  color: rgba(255, 255, 255, 0.9);
  font-weight: 600;
}
.article-meta-sep {
  color: rgba(255, 255, 255, 0.25);
}

/* --- ARTICLE LAYOUT (content + sidebar) --- */
.article-content-section {
  padding: 60px 0 80px;
}
.article-layout {
  display: grid;
  grid-template-columns: 1fr 320px;
  gap: 48px;
  align-items: start;
}
.article-content {
  max-width: 720px;
  font-size: 1.0625rem;
  line-height: 1.8;
  color: var(--gray-600);
  min-width: 0;
}

/* --- ARTICLE SIDEBAR --- */
.article-sidebar {
  position: relative;
  align-self: stretch;
}
.article-sidebar-inner {
  position: sticky;
  top: 100px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.sidebar-card {
  background: var(--white);
  border: 1px solid var(--gray-200);
  border-radius: 12px;
  padding: 24px;
}
.sidebar-card--primary {
  background: var(--white);
  border-color: var(--gray-200);
  color: var(--gray-600);
}
.sidebar-card--primary h4, .sidebar-card--primary h3 {
  color: var(--navy);
}
.sidebar-card--primary .sidebar-card-note {
  display: block;
  margin-top: 10px;
  font-size: 0.75rem;
  text-align: center;
  opacity: 0.6;
}
.sidebar-card-icon {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 14px;
  background: rgba(0, 70, 255, 0.1);
  color: var(--blue);
}
.sidebar-card--primary .sidebar-card-icon {
  background: rgba(0, 70, 255, 0.08);
  color: var(--blue);
}
.sidebar-card h4, .sidebar-card h3 {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 1.05rem;
  margin-bottom: 8px;
  color: var(--navy);
}
.sidebar-card p {
  font-size: 0.9375rem;
  line-height: 1.6;
  margin-bottom: 16px;
}
.sidebar-card .btn {
  font-size: 0.875rem;
  padding: 10px 18px;
}
.sidebar-card--stat {
  text-align: center;
  background: var(--off-white);
  border-color: var(--gray-200);
}
.sidebar-stat-number {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 1.75rem;
  color: var(--navy);
  margin-bottom: 8px;
}
.sidebar-card--stat p {
  font-size: 0.8125rem;
  color: var(--gray-500);
}
.sidebar-card-link {
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--navy);
  text-decoration: none;
}
.sidebar-card-link:hover {
  text-decoration: underline;
}

.article-lead {
  font-size: 1.1875rem;
  line-height: 1.8;
  color: var(--gray-800);
  font-weight: 500;
  margin-bottom: 40px;
  padding-bottom: 32px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}

.article-content h2 {
  margin-top: 48px;
  margin-bottom: 16px;
  font-size: clamp(1.25rem, 2vw, 1.5rem);
}
.article-content h3 {
  margin-top: 32px;
  margin-bottom: 12px;
}

.article-content p {
  margin-bottom: 20px;
}

.article-content ul,
.article-content ol {
  margin: 20px 0;
  padding-left: 24px;
}
.article-content li {
  margin-bottom: 10px;
  line-height: 1.7;
}

.article-content blockquote {
  margin: 32px 0;
  padding: 24px 28px;
  border-left: 4px solid var(--navy);
  background: rgba(0, 70, 255, 0.03);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}
.article-content blockquote p {
  font-style: italic;
  font-size: 1.0625rem;
  color: var(--gray-800);
  line-height: 1.7;
  margin-bottom: 0;
}

.article-content img {
  border-radius: var(--radius-sm);
  margin: 32px 0;
  box-shadow: var(--shadow-md);
}

.article-content strong {
  color: var(--navy);
  font-weight: 600;
}

/* --- ARTICLE CTA (mid-article & final) --- */
.article-cta {
  margin: 48px 0;
  padding: 40px;
  background: var(--off-white);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-lg);
  text-align: center;
}
.article-cta-label {
  font-family: var(--font-heading);
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--gray-500);
  margin-bottom: 8px;
}
.article-cta h3 {
  font-size: 1.375rem;
  margin-bottom: 12px;
  margin-top: 0;
}
.article-cta p {
  color: var(--gray-600);
  max-width: 520px;
  margin: 0 auto 24px;
  font-size: 1rem;
}
.article-cta .btn {
  margin: 0 auto;
}

.article-cta--final {
  margin-top: 60px;
  margin-bottom: 60px;
  background: var(--navy-deep);
  border-color: transparent;
}
.article-cta--final h3 {
  color: var(--white);
}
.article-cta--final p {
  color: rgba(255, 255, 255, 0.7);
}
.article-cta--final .article-cta-label {
  color: var(--blue-light);
}

/* --- AUTHOR BIO --- */
.author-bio {
  display: flex;
  gap: 24px;
  align-items: center;
  padding: 32px;
  margin-top: 48px;
  background: var(--white);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius);
  max-width: 720px;
}
.author-bio-photo {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
  border: 3px solid var(--gray-200);
}
.author-bio-name {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 1.0625rem;
  color: var(--navy);
  margin-bottom: 2px;
}
.author-bio-role {
  font-size: 0.8125rem;
  color: var(--gray-500);
  font-weight: 500;
  margin-bottom: 8px;
}
.author-bio-text {
  font-size: 0.9375rem;
  color: var(--gray-600);
  line-height: 1.6;
  margin-bottom: 0;
}

/* --- RELATED ARTICLES --- */
.related-articles {
  margin-top: 60px;
  padding-top: 48px;
  border-top: 1px solid var(--gray-200);
  max-width: 720px;
}
.related-articles h2 {
  margin-bottom: 24px;
  font-size: 1.5rem;
}
.related-articles-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
}

/* --- BLOG RESPONSIVE --- */
@media (max-width: 1024px) {
  .blog-grid { grid-template-columns: repeat(2, 1fr); }
  .article-layout { grid-template-columns: 1fr 280px; gap: 32px; }
}
@media (max-width: 768px) {
  .blog-grid { grid-template-columns: 1fr; }
  .article-layout { grid-template-columns: 1fr; }
  .article-sidebar-inner { position: static; flex-direction: row; flex-wrap: wrap; }
  .sidebar-card { flex: 1; min-width: 250px; }
  .related-articles-grid { grid-template-columns: 1fr; }
  .blog-card--compact { flex-direction: column; }
  .author-bio { flex-direction: column; text-align: center; }
  .article-cta { padding: 28px 20px; }
}
@media (max-width: 480px) {
  .article-hero { padding: 120px 0 40px; }
  .article-content { font-size: 1rem; }
  .article-lead { font-size: 1.0625rem; }
}

/* ========================================
   HERO AURORA (motion, réutilisable)
   ======================================== */
.hero-aurora {
  position: absolute;
  inset: -25%;
  background:
    radial-gradient(ellipse 42% 55% at 28% 38%, rgba(0, 70, 255, 0.16), transparent 62%),
    radial-gradient(ellipse 34% 44% at 72% 66%, rgba(107, 159, 255, 0.07), transparent 60%);
  animation: heroAurora 16s ease-in-out infinite alternate;
  pointer-events: none;
  z-index: 0;
}
@keyframes heroAurora {
  from { transform: translate3d(-2.5%, -2%, 0) scale(1); }
  to   { transform: translate3d(2.5%, 2.5%, 0) scale(1.07); }
}

/* ========================================
   HERO — MOTION (révélation lignes + photo)
   ======================================== */
/* Titre du hero : interlignes serrés, respiration entre les blocs */
.hero-anim { line-height: 1.06; }
.hero-anim .ha-line { display: block; overflow: hidden; padding-bottom: 0.04em; }
.hero-anim .ha-line > span {
  display: inline-block;
  transform: translateY(115%);
  animation: haLineUp 1s cubic-bezier(0.16, 1, 0.3, 1) 0.1s forwards;
}
.hero-anim .ha-line:nth-child(2) > span { animation-delay: 0.2s; }
.hero-anim .ha-line:nth-child(3) > span { animation-delay: 0.32s; }
.hero-anim .ha-seg { display: inline-block; }
.hero-anim .ha-seg:first-child { margin-right: 0.3em; }
@media (max-width: 430px) {
  .hero-anim .ha-seg { display: block; margin-right: 0; }
}
@keyframes haLineUp { to { transform: translateY(0); } }

.hero-portrait { transition: transform 0.3s ease-out; will-change: transform; position: relative; }
/* La courbe de croissance qui se trace derrière le portrait */
.hero-curve {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none;
}
.hero-img { position: relative; z-index: 1; }
.hc-path {
  fill: none;
  stroke: url(#hcg);
  stroke-width: 3;
  stroke-linecap: round;
  stroke-dasharray: 100;
  stroke-dashoffset: 100;
  animation: hcDraw 2.2s cubic-bezier(0.65, 0, 0.35, 1) 0.7s forwards;
}
.hc-glowpath { stroke-width: 7; opacity: 0.55; }
.hc-area {
  fill: url(#hcfill);
  opacity: 0;
  animation: hcFade 1.2s ease 2.5s forwards;
}
.hc-proj {
  fill: none;
  stroke: #6B9FFF;
  stroke-width: 2;
  stroke-dasharray: 2.5 8;
  stroke-linecap: round;
  opacity: 0;
  animation: hcProj 0.9s ease 3s forwards;
}
.hc-pt {
  fill: #F7F8FA;
  stroke: #0046FF;
  stroke-width: 1.5;
  opacity: 0;
  animation: hcFade 0.4s ease var(--hd, 1.5s) forwards;
}
.hc-dot {
  fill: #6B9FFF;
  opacity: 0;
  animation: hcFade 0.5s ease 2.7s forwards;
}
.hc-pulse {
  fill: none;
  stroke: #6B9FFF;
  stroke-width: 1.5;
  opacity: 0;
  transform-origin: 1300px 195px;
  animation: hcPulse 3s ease-out 3.1s infinite;
}
@keyframes hcDraw { to { stroke-dashoffset: 0; } }
@keyframes hcFade { to { opacity: 1; } }
@keyframes hcProj { to { opacity: 0.6; } }
@keyframes hcPulse {
  0% { opacity: 0.5; transform: scale(1); }
  70%, 100% { opacity: 0; transform: scale(3.2); }
}
/* Profondeur de scène : projecteur derrière le sujet + grain cinéma */
.hero-glow {
  position: absolute;
  inset: -10% -20%;
  background: radial-gradient(ellipse 46% 52% at 52% 40%, rgba(0, 70, 255, 0.22), rgba(0, 70, 255, 0.06) 55%, transparent 72%);
  filter: blur(2px);
  z-index: 0;
}
.hero-home::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E");
  opacity: 0.05;
  mix-blend-mode: overlay;
  pointer-events: none;
  z-index: 2;
}
@media (min-width: 999999px) /* animations forcées : bloc neutralisé */ {
  .hc-comet { display: none; }
  .hc-path { animation: none; stroke-dashoffset: 0; }
  .hc-dot, .hc-pt, .hc-area { animation: none; opacity: 1; }
  .hc-proj { animation: none; opacity: 0.6; }
  .hc-pulse { animation: none; }
}
.hero-img {
  animation: heroImgIn 1.3s cubic-bezier(0.16, 1, 0.3, 1) 0.2s both;
}
@keyframes heroImgIn {
  from { opacity: 0; transform: translateY(28px) scale(1.03); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

/* --- Hero mobile : Max en fond cinématique derrière le texte --- */
@media (max-width: 767px) {
  .hero-home {
    /* Le contenu s'arrete vers 555 px : sur un grand telephone le hero gardait
       jusqu'a 377 px de vide en bas et repoussait la bande de logos hors de
       l'ecran. On rend ce vide a la bande. Le plancher protege les petits
       ecrans, ou le contenu descend a 573 px et ou il n'y a rien a reprendre. */
    min-height: 100vh;
    min-height: max(660px, calc(100svh - 104px));
    padding: 90px 0 292px;
    overflow: hidden;
  }
  .hero-home .container { width: 100%; }
  .hero-home .hero-grid { grid-template-columns: 1fr; gap: 0; }
  .hero-home .hero-grid > div:first-child { position: relative; z-index: 4; padding-bottom: 0; }
  .hero-portrait {
    position: absolute;
    /* Descendu de 10 % de la hauteur de l'image. Celle-ci fait 210 % de la
       colonne (100vw - 48px) en ratio 1500:1210, soit 169,4vw - 81px de haut ;
       10 % valent donc 16,94vw - 8px, retranches des -500px d'origine. */
    top: calc(16.94vw - 508px);
    left: 50%;
    transform: translateX(-50%);
    width: 210%;
    /* Le visage occupe 0,438 à 0,585 de la largeur de l'image, centré à 0,512.
       Ce décalage amene son bord gauche juste sur la fin de « vite. » et
       « mieux. », avec une dizaine de pixels de chevauchement, et tient de
       360 a 430 px de large puisqu'il suit la largeur d'ecran. */
    margin: 0 0 0 calc(27.18vw + 1px);
    pointer-events: none;
  }
  .hero-portrait .hero-img {
    position: static;
    width: 100%;
    max-width: none;
    height: auto;
    animation: heroImgInMob 1.6s ease 0.1s both;
  }
  /* fondu cinématique : le visage reste perceptible, le texte lisible */
  .hero-home::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background:
      radial-gradient(ellipse 130% 70% at 50% 112%, rgba(3, 10, 32, 0.85), transparent 62%),
      linear-gradient(180deg,
        rgba(3, 10, 32, 0.92) 0%,
        rgba(3, 10, 32, 0.78) 30%,
        rgba(3, 10, 32, 0.62) 46%,
        rgba(3, 10, 32, 0.55) 64%,
        rgba(3, 10, 32, 0.70) 86%,
        rgba(3, 10, 32, 0.92) 100%);
  }
  .hero-glow { display: none; }
  /* courbe plus discrète sur mobile : elle habille, elle n'éblouit pas */
  .hero-curve { z-index: 2; opacity: 0.78; }
  .hero-home .hc-glowpath { opacity: 0.28; }
  .hero-home .hc-path { stroke-width: 2.5; }
  .hero-home .hero-overline { margin-bottom: 12px; }
  .hero-home .hero-anim { margin-bottom: 12px; }
  .hero-home .section-subtitle { margin-bottom: 8px; }
  .hero-home .mt-32 { margin-top: 20px; }
  /* le lien secondaire s'efface derrière le bouton principal */
  .hero-home .link-cta { font-weight: 400; font-size: 0.84375rem; }
}
@keyframes heroImgInMob { from { opacity: 0; } to { opacity: 1; } }

@media (max-width: 430px) {
  /* « Multipliez vos résultats. » mesure 11,6 fois la taille de police : elle
     tient donc tant que la police reste sous (100vw - 48px) / 11,6. La formule
     garde 3 % de marge, ce qui donne 28,6 px en 390 et 26,1 px en 360, là où
     une valeur fixe de 28 px aurait débordé sur les ecrans étroits. */
  .hero-anim { font-size: clamp(1.5rem, 8.35vw - 4px, 2rem); letter-spacing: -0.02em; }
  .hero-home .hero-overline { font-size: 0.6875rem; letter-spacing: 0.05em; }
}
@media (min-width: 999999px) /* animations forcées : bloc neutralisé */ {
  .hero-aurora { animation: none; }
  .hero-anim .ha-line > span { animation: none; transform: none; }
  .hero-img { animation: none; }
}

/* ========================================
   LES 9 LEVIERS — SPLIT ÉDITORIAL + DÉMO
   ======================================== */
.m9x-split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 540px);
  gap: 48px;
  align-items: center;
}
.m9x-lead {
  font-size: 1.125rem;
  line-height: 1.75;
  color: var(--gray-600);
  margin-bottom: 16px;
  max-width: 460px;
}
.m9x-lead strong { color: var(--black); }

@media (max-width: 900px) {
  .m9x-split { grid-template-columns: 1fr; gap: 40px; }
  .m9x-lead { max-width: none; }
}
/* Screen-reader only */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ========================================
   HERO OVERLINE (éditorial, sans pill)
   ======================================== */
.hero-overline {
  font-family: var(--font-heading);
  font-size: 0.6875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.22em;
  color: rgba(255, 255, 255, 0.5);
}
/* Preuves en mini-badges : lisibles sur la courbe, discrets sous les CTA */
/* Action secondaire : lien texte discret, jamais un second bouton */
.link-cta {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  font-family: var(--font-heading);
  font-size: 0.9375rem;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.82);
  text-decoration: none;
  transition: color 0.25s ease;
}
.link-cta i {
  flex: none;
  width: 26px;
  height: 26px;
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: 50%;
  position: relative;
  transition: border-color 0.25s ease, background 0.25s ease, transform 0.25s ease;
}
.link-cta i::before,
.link-cta i::after {
  content: '';
  position: absolute;
  background: currentColor;
}
.link-cta i::before { top: 50%; left: 7px; width: 10px; height: 1px; transform: translateY(-50%); }
.link-cta i::after { top: 50%; right: 7px; width: 6px; height: 6px; border-right: 1px solid currentColor; border-top: 1px solid currentColor; background: none; transform: translateY(-50%) rotate(45deg); }
.link-cta span { position: relative; }
.link-cta:hover { color: #fff; }
.link-cta:hover i { border-color: rgba(255, 255, 255, 0.6); background: rgba(255, 255, 255, 0.08); transform: translateX(3px); }

.hero-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 26px;
  margin-top: 24px;
}
.hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.75rem;
  letter-spacing: 0.01em;
  color: rgba(255, 255, 255, 0.5);
  white-space: nowrap;
  text-shadow: 0 1px 8px rgba(2, 8, 30, 0.8);
}
.hero-badge::before {
  content: '';
  flex: none;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #6B9FFF;
}
.hero-badge #caCounter { color: rgba(255, 255, 255, 0.75); font-weight: 600; }



/* ========================================
   LES 9 LEVIERS — LA COURBE D'HYPERCROISSANCE
   ======================================== */
/* Pin scrollytelling : la section reste fixée pendant que la courbe se dessine */
.m9x-pin { height: 200vh; padding: 0; }
.m9x-pin-inner {
  position: sticky;
  top: 0;
  min-height: 100vh;
  display: flex;
  align-items: flex-start;
}
.m9x-pin-inner > .container { width: 100%; }
/* En mode épinglé, le centrage flex remplace le padding vertical de section-md */
@media (min-width: 901px) {
  .m9x-pin-inner.section-md { padding-top: 18vh; padding-bottom: 0; }
}
@media (max-width: 900px) {
  .m9x-pin { height: auto; }
  .m9x-pin-inner { position: static; min-height: 0; display: block; }
}

.gc { width: 100%; max-width: 560px; justify-self: end; }
.gc svg { width: 100%; height: auto; display: block; overflow: visible; }

.gc-axis { stroke: var(--gray-200); stroke-width: 1; }
.gc-cap {
  font-family: var(--font-body);
  font-size: 12px;
  fill: var(--gray-500);
  letter-spacing: 0.01em;
}

/* La courbe se trace au scroll */
.gc-path {
  fill: none;
  stroke: var(--navy);
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-dasharray: 100;
  stroke-dashoffset: 100;
  transition: stroke-dashoffset 2s cubic-bezier(0.65, 0, 0.35, 1) 0.15s;
}
.gc.visible:not(.js-scroll) .gc-path { stroke-dashoffset: 0; }

/* Chaque levier s'allume au passage de la courbe (--d calé sur la longueur du tracé) */
.gc-pt circle {
  fill: var(--navy);
  opacity: 0;
  transition: opacity 0.4s ease var(--d, 0s);
}
.gc-pt text {
  font-family: var(--font-heading);
  font-size: 15px;
  font-weight: 600;
  fill: var(--black);
  letter-spacing: -0.01em;
  opacity: 0;
  transform: translateY(5px);
  transition: opacity 0.55s cubic-bezier(0.16, 1, 0.3, 1) var(--d, 0s),
              transform 0.55s cubic-bezier(0.16, 1, 0.3, 1) var(--d, 0s);
}
.gc.visible:not(.js-scroll) .gc-pt circle { opacity: 1; }
.gc.visible:not(.js-scroll) .gc-pt text { opacity: 1; transform: translateY(0); }

.gc-final {
  font-family: var(--font-heading);
  font-size: 34px;
  font-weight: 800;
  letter-spacing: -0.03em;
  fill: var(--navy);
  opacity: 0;
  transition: opacity 0.7s ease 2.3s;
}
.gc.visible:not(.js-scroll) .gc-final { opacity: 1; }

/* Halo discret sur le point d'arrivée */
.gc-pulse {
  fill: none;
  stroke: var(--navy);
  stroke-width: 1.5;
  opacity: 0;
  transform-origin: 590px 70px;
}
.gc.visible:not(.js-scroll) .gc-pulse { animation: gcPulse 3.2s ease-out 2.6s infinite; }
@keyframes gcPulse {
  0% { opacity: 0.4; transform: scale(1); }
  60% { opacity: 0; transform: scale(3.4); }
  100% { opacity: 0; transform: scale(3.4); }
}

/* Mode scroll-driven : transitions courtes, le scroll donne le rythme */
.gc.js-scroll .gc-path {
  transition: stroke-dashoffset 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}
.gc.js-scroll .gc-pt circle { transition: opacity 0.3s ease; }
.gc.js-scroll .gc-pt text {
  transition: opacity 0.45s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.45s cubic-bezier(0.16, 1, 0.3, 1);
}
.gc.js-scroll .gc-pt.lit circle { opacity: 1; }
.gc.js-scroll .gc-pt.lit text { opacity: 1; transform: translateY(0); }
.gc.js-scroll .gc-final { transition: opacity 0.5s ease 0.15s; }
.gc.js-scroll .gc-final.lit { opacity: 1; }
.gc.js-scroll .gc-pulse.lit { animation: gcPulse 3.2s ease-out 0.4s infinite; }

@media (max-width: 900px) {
  .gc { max-width: 480px; justify-self: center; }
  .gc-pt text { font-size: 20px; }
  .gc-cap { font-size: 15px; }
  .gc-final { font-size: 42px; }
}
@media (min-width: 999999px) /* animations forcées : bloc neutralisé */ {
  .gc-path { stroke-dashoffset: 0; transition: none; }
  .gc-pulse { animation: none !important; }
  .gc-pt circle, .gc-pt text, .gc-final {
    opacity: 1 !important; transform: none !important; transition: none;
  }
}

/* ========================================
   POUR QUI — LISTE ÉDITORIALE
   ======================================== */
.pq { max-width: 780px; margin: 0 auto; }
.pq-prose { margin-bottom: 40px; }
.pq-prose p {
  font-size: 1.125rem;
  line-height: 1.8;
  color: rgba(255, 255, 255, 0.82);
  margin: 0 0 24px;
}
.pq-prose p:last-child { margin-bottom: 0; }
.pq-prose strong { color: var(--white); font-weight: 600; }

/* Note de fin : même corps que le texte courant, le filet marque
   le changement de registre plutôt qu'une réduction de taille. */
.pq-note {
  font-size: 1.125rem;
  line-height: 1.8;
  color: rgba(255, 255, 255, 0.72);
  max-width: 620px;
  border-left: 2px solid #6B9FFF;
  padding-left: 18px;
}
@media (max-width: 900px) {
  .pq-prose p,
  .pq-note { font-size: 1.0625rem; }
  .pq-note { padding-left: 14px; }
}

/* ========================================
   RÉSULTATS — FORMAT MAGAZINE
   ======================================== */
.story-row {
  display: grid;
  grid-template-columns: minmax(0, 460px) minmax(0, 1fr);
  gap: 56px;
  align-items: center;
  padding: 44px 0;
  border-top: 1px solid var(--gray-200);
}
.stories .story-row:last-of-type { border-bottom: 1px solid var(--gray-200); }
.story-row .video-embed {
  border-radius: 12px;
  overflow: hidden;
}
.story-kicker {
  font-family: var(--font-heading);
  font-size: 0.6875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--gray-500);
  margin: 0 0 12px;
}
.story-stat {
  font-family: var(--font-heading);
  font-size: clamp(1.375rem, 2.1vw, 1.75rem);
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.25;
  color: var(--black);
  margin: 0 0 14px;
}
/* Le chiffre porte le resultat : il se lit avant la phrase, et la phrase
   l explique. Ligne de base alignee sur le texte, pas simplement grossi. */
.story-stat .sc-x {
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: 1.55em;
  line-height: 1;
  letter-spacing: -0.04em;
  color: var(--blue);
  margin-right: 0.12em;
  display: inline-block;
  vertical-align: -0.06em;
}
.story-recit {
  font-size: 1.0625rem;
  line-height: 1.7;
  color: var(--gray-600);
  margin: 0;
  max-width: 560px;
}
@media (max-width: 900px) {
  .story-row { grid-template-columns: 1fr; gap: 20px; padding: 32px 0; }
  .story-recit { max-width: none; }
}

/* ========================================
   PROGRAMMES — INDEX ÉDITORIAL
   ======================================== */
.prog-index { margin-bottom: 40px; }
.prog-row {
  display: grid;
  grid-template-columns: 260px minmax(0, 1fr) 200px;
  gap: 40px;
  align-items: start;
  padding: 34px 8px;
  border-top: 1px solid var(--gray-200);
  text-decoration: none;
  color: inherit;
  transition: background 0.3s ease;
}
.prog-index .prog-row:last-of-type { border-bottom: 1px solid var(--gray-200); }
.prog-row:hover { background: var(--white); }
.prog-stage {
  font-family: var(--font-heading);
  font-size: 0.6875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--gray-500);
  margin: 0 0 10px;
}
.prog-row--flagship .prog-stage { color: var(--blue); }
.prog-row h3 {
  font-size: 1.5rem;
  margin: 0;
  letter-spacing: -0.02em;
}
.prog-desc {
  margin: 4px 0 0;
  line-height: 1.65;
  color: var(--gray-600);
}
.prog-side {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  padding-top: 4px;
}
.prog-aud {
  font-family: var(--font-heading);
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--black);
}
.prog-arrow {
  font-size: 1.25rem;
  color: var(--black);
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}
.prog-row:hover .prog-arrow { transform: translateX(6px); }

@media (max-width: 900px) {
  .prog-row {
    grid-template-columns: 1fr;
    gap: 12px;
    padding: 26px 0;
  }
  .prog-side { padding-top: 4px; }
}

/* ========================================
   BRAND IDEA — CITATION PLEINE LARGEUR
   ======================================== */
.brand-quote {
  padding: 140px 0;
  background: var(--white);
}
.bq { margin: 0; text-align: center; transform-origin: center; will-change: transform, opacity; }
.bq-block { margin: 0; border: 0; padding: 0; }
.bq-glyph {
  display: block;
  font-family: var(--font-heading);
  font-size: clamp(5rem, 9vw, 7.5rem);
  font-weight: 500;
  line-height: 0.45;
  color: var(--gray-200);
  user-select: none;
}
.bq-text {
  font-family: 'Playfair Display', serif;
  font-style: italic;
  font-size: clamp(2rem, 4.6vw, 3.75rem);
  font-weight: 500;
  line-height: 1.22;
  letter-spacing: -0.01em;
  color: var(--black);
  margin: 0 0 40px;
}
.bq-src {
  font-family: var(--font-heading);
  font-size: 0.6875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--gray-500);
  display: inline-flex;
  align-items: center;
  gap: 14px;
}
.bq-src::before,
.bq-src::after {
  content: '';
  width: 28px;
  height: 1px;
  background: var(--gray-300);
}
@media (max-width: 430px) {
  .bq-text { font-size: 1.625rem; }
  .bq-glyph { font-size: 4rem; }
}

/* ========================================
   EN BREF — Q/R ÉDITORIALES (SEO/GEO)
   ======================================== */
.brief-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 64px;
  max-width: 1040px;
  margin: 0 auto;
}
.brief-item {
  border-top: 1px solid var(--gray-200);
  padding: 28px 4px 36px;
}
.brief-item h3 {
  font-size: 1.0625rem;
  letter-spacing: -0.01em;
  margin: 0 0 12px;
}
.brief-item p {
  margin: 0;
  font-size: 0.9375rem;
  line-height: 1.75;
  color: var(--gray-600);
}
.brief-item strong { color: var(--black); font-weight: 600; }
.brief-item a { color: var(--navy); font-weight: 500; text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--gray-300); }
.brief-item a:hover { text-decoration-color: var(--navy); }
@media (max-width: 900px) {
  .brief-grid { grid-template-columns: 1fr; gap: 0; }
  .brief-item { padding: 24px 0 30px; }
}

/* Guide offert en sidebar : présentation objet-livre, sans boîte */
.sidebar-card--guide {
  text-align: center;
}
.sidebar-guide-cover {
  display: block;
  width: 62%;
  max-width: 170px;
  height: auto;
  margin: 0 auto 18px;
  border-radius: 4px;
  border: 1px solid var(--gray-200);
  box-shadow: 0 10px 24px -8px rgba(0, 13, 43, 0.18);
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}
.sidebar-card--guide:hover .sidebar-guide-cover { transform: translateY(-4px); }
.sidebar-card--guide h4 {
  font-size: 0.6875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--gray-500);
  margin-bottom: 8px;
}
.sidebar-card--guide p {
  font-size: 0.875rem;
  line-height: 1.6;
  color: var(--gray-600);
  margin-bottom: 12px;
}
.sidebar-guide-link {
  font-family: var(--font-heading);
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--navy);
}
.sidebar-guide-link:hover { text-decoration: underline; text-underline-offset: 3px; }

/* Cas réels dans les articles (preuve de première main) */
.article-case {
  margin: 44px 0;
  padding: 28px 32px;
  background: var(--off-white);
  border-left: 2px solid var(--navy);
  border-radius: 0 12px 12px 0;
}
.case-kicker {
  font-family: var(--font-heading);
  font-size: 0.6875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--gray-500);
  margin: 0 0 10px;
}
.article-case h3 { margin: 0 0 14px; font-size: 1.25rem; line-height: 1.35; }
.article-case p { margin: 0 0 14px; font-size: 0.9875rem; }
.article-case blockquote {
  margin: 0 0 14px;
  padding-left: 16px;
  border-left: 2px solid var(--gray-300);
  font-style: italic;
  color: var(--gray-600);
}
.article-case blockquote p { margin: 0; }
.article-case .case-video {
  margin: 20px 0 14px;
  border-radius: 8px;
  overflow: hidden;
}
.article-case figcaption { font-size: 0.8125rem; color: var(--gray-500); }
@media (max-width: 900px) {
  .article-case { padding: 22px 20px; }
}

/* À lire aussi : pleine largeur sous l'article */
.related-section {
  margin-top: 72px;
  padding-top: 48px;
  border-top: 1px solid var(--gray-200);
}
.related-section h2 { margin-bottom: 32px; }
.related-grid { margin-top: 0; }

/* Orientation par palier (page Programmes) */
.palier-guide { max-width: 880px; margin: 0 auto; }
.palier-row {
  display: grid;
  grid-template-columns: 220px minmax(0, 1fr);
  gap: 40px;
  padding: 28px 4px;
  border-top: 1px solid var(--gray-200);
}
.palier-guide .palier-row:last-child { border-bottom: 1px solid var(--gray-200); }
.palier-num {
  font-family: var(--font-heading);
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--gray-500);
  padding-top: 4px;
}
.palier-row h3 { font-size: 1.25rem; margin: 0 0 8px; }
.palier-row p { margin: 0; line-height: 1.7; color: var(--gray-600); }
@media (max-width: 900px) {
  .palier-row { grid-template-columns: 1fr; gap: 8px; padding: 22px 0; }
}

/* Grands parcours documentaires (page Résultats) */
.parcours-feature {
  display: grid;
  grid-template-columns: minmax(0, 460px) minmax(0, 1fr);
  gap: 56px;
  align-items: center;
  padding: 44px 0;
  border-top: 1px solid var(--gray-200);
}
.parcours-feature:last-of-type { border-bottom: 1px solid var(--gray-200); }
.parcours-feature .video-embed { border-radius: 12px; overflow: hidden; }
.parcours-body h3 {
  font-size: clamp(1.375rem, 2.1vw, 1.75rem);
  letter-spacing: -0.02em;
  margin: 0 0 14px;
}
.parcours-body p { margin: 0 0 14px; line-height: 1.7; color: var(--gray-600); max-width: 560px; }
.parcours-body .case-kicker { margin-bottom: 12px; }
.parcours-chiffres {
  font-size: 0.9375rem;
  color: var(--gray-500);
  border-top: 1px solid var(--gray-200);
  padding-top: 14px;
}
.parcours-chiffres strong { color: var(--navy); font-weight: 600; }
.parcours-body--solo { grid-column: 1 / -1; max-width: 760px; margin: 0 auto; text-align: left; }
@media (max-width: 900px) {
  .parcours-feature { grid-template-columns: 1fr; gap: 20px; padding: 32px 0; }
}

/* Aller plus loin (page Ressources) */
.plus-loin { max-width: 880px; margin: 0 auto; }
.plus-loin-row {
  display: grid;
  grid-template-columns: 240px minmax(0, 1fr) 32px;
  gap: 32px;
  align-items: baseline;
  padding: 26px 8px;
  border-top: 1px solid var(--gray-200);
  text-decoration: none;
  color: inherit;
  transition: background 0.3s ease;
}
.plus-loin .plus-loin-row:last-child { border-bottom: 1px solid var(--gray-200); }
.plus-loin-row:hover { background: var(--white); }
.plus-loin-row:hover .prog-arrow { transform: translateX(6px); }
.plus-loin-row h3 { font-size: 1.0625rem; margin: 0; }
.plus-loin-row p { margin: 0; color: var(--gray-600); line-height: 1.65; }
@media (max-width: 900px) {
  .plus-loin-row { grid-template-columns: 1fr; gap: 8px; padding: 22px 0; }
  .plus-loin-row .prog-arrow { display: none; }
}

.guide-card-body .btn { align-self: flex-start; width: auto !important; padding: 10px 20px; font-size: 0.875rem; }
.guide-card-body .guide-desc { font-size: 0.9375rem; line-height: 1.65; }
@media (max-width: 900px) {
  .guide-card { grid-template-columns: 130px minmax(0, 1fr); }
  .guide-card-visual { padding: 18px 0 18px 16px; }
}

/* Guides en rangées fines (page Ressources) */
.guides-slim {
  display: flex;
  flex-direction: column;
  gap: 20px;
  max-width: 880px;
  margin: 0 auto;
}
.guides-slim .guide-card { grid-template-columns: 170px minmax(0, 1fr); }
.guides-slim .guide-card-visual { padding: 20px 0 20px 20px; }
.guides-slim .guide-card-visual img { max-width: 130px; }
.guides-slim .guide-card-body { padding: 20px 28px; gap: 8px; }
.guides-slim .guide-card-body h3, .guides-slim .guide-card-body h2 { font-size: 1.0625rem; margin: 0; }
@media (max-width: 900px) {
  .guides-slim .guide-card { grid-template-columns: 110px minmax(0, 1fr); }
}

/* Particules lumineuses du hero (poussières dans le faisceau) */
.hero-particles { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.hero-particles span {
  position: absolute;
  bottom: 8%;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: #6B9FFF;
  opacity: 0;
  animation: particleRise 9s linear infinite;
}
.hero-particles span:nth-child(1) { left: 12%; animation-delay: 0s; animation-duration: 10s; }
.hero-particles span:nth-child(2) { left: 28%; animation-delay: 2.2s; width: 2px; height: 2px; }
.hero-particles span:nth-child(3) { left: 45%; animation-delay: 4.5s; animation-duration: 12s; }
.hero-particles span:nth-child(4) { left: 62%; animation-delay: 1.2s; width: 2px; height: 2px; animation-duration: 11s; }
.hero-particles span:nth-child(5) { left: 74%; animation-delay: 5.8s; }
.hero-particles span:nth-child(6) { left: 86%; animation-delay: 3.4s; width: 2px; height: 2px; animation-duration: 13s; }
.hero-particles span:nth-child(7) { left: 55%; animation-delay: 7s; animation-duration: 10s; }
@keyframes particleRise {
  0% { transform: translateY(0); opacity: 0; }
  12% { opacity: 0.55; }
  75% { opacity: 0.25; }
  100% { transform: translateY(-52vh); opacity: 0; }
}

/* Indicateur de scroll */
.scroll-cue {
  position: absolute;
  left: 50%;
  bottom: 26px;
  transform: translateX(-50%);
  width: 1px;
  height: 40px;
  background: rgba(255, 255, 255, 0.14);
  z-index: 3;
}
.scroll-cue span {
  position: absolute;
  left: -1px;
  top: 0;
  width: 3px;
  height: 10px;
  border-radius: 2px;
  background: rgba(255, 255, 255, 0.75);
  animation: cueDrop 2.2s cubic-bezier(0.65, 0, 0.35, 1) infinite;
}
@keyframes cueDrop {
  0% { top: 0; opacity: 0; }
  25% { opacity: 1; }
  75%, 100% { top: 30px; opacity: 0; }
}
.hero-img, .hero-curve, .hero-glow { transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1); will-change: transform; }
@media (max-width: 900px) {
  .scroll-cue, .hero-particles { display: none; }
}
@media (min-width: 999999px) /* animations forcées : bloc neutralisé */ {
  .hero-particles span, .scroll-cue span { animation: none; opacity: 0; }
}

/* Annotations de la courbe : la triade du titre sur la trajectoire */
.hero-labels { position: absolute; inset: 0; z-index: 2; pointer-events: none; }
.hero-label {
  position: absolute;
  left: var(--lx);
  top: var(--ly);
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  opacity: 0;
  animation: heroLabelIn 0.7s cubic-bezier(0.16, 1, 0.3, 1) var(--ld, 1.6s) forwards;
}
.hero-label i {
  display: block;
  width: 1px;
  height: 22px;
  background: linear-gradient(to bottom, rgba(107, 159, 255, 0.4), rgba(107, 159, 255, 0.06));
  margin-bottom: 7px;
}
.hero-label span {
  font-family: var(--font-heading);
  font-size: 0.6875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: rgba(176, 190, 220, 0.42);
  white-space: nowrap;
}
/* Variante latérale : le texte se place à droite du point (tige horizontale) */
.hero-label--right {
  transform: translateY(-50%);
  flex-direction: row;
  align-items: center;
  animation-name: heroLabelInRight;
}
.hero-label--right i {
  width: 30px;
  height: 1px;
  margin: 0 10px 0 9px;
  background: linear-gradient(to right, rgba(107, 159, 255, 0.4), rgba(107, 159, 255, 0.06));
}
@keyframes heroLabelInRight {
  from { opacity: 0; transform: translateY(-50%) translateX(-8px); }
  to { opacity: 1; transform: translateY(-50%) translateX(0); }
}
@keyframes heroLabelIn {
  from { opacity: 0; transform: translateX(-50%) translateY(8px); }
  to { opacity: 1; transform: translateX(-50%) translateY(0); }
}
@media (max-width: 900px) {
  .hero-labels { display: none; }
}
@media (min-width: 999999px) /* animations forcées : bloc neutralisé */ {
  .hero-label { animation: none; opacity: 1; }
}

/* ========================================
   LES CLUBS — LE NIVEAU DES CLIENTS
   ======================================== */
.section-clubs { background: var(--white); }
.clubs-head { max-width: 760px; margin: 0 auto 56px; text-align: center; }
.clubs-head h2 { margin-bottom: 20px; }
.clubs-head .section-subtitle { margin: 0 auto; }
.clubs-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  border-top: 1px solid var(--gray-200);
  border-bottom: 1px solid var(--gray-200);
}
.club-card {
  padding: 44px 36px 40px;
  border-right: 1px solid var(--gray-200);
  position: relative;
}
.club-card:last-child { border-right: 0; }
.club-num {
  display: block;
  font-family: var(--font-heading);
  font-size: 4.5rem;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.04em;
  color: var(--gray-200);
  margin-bottom: 18px;
}
.club-card--top .club-num { color: var(--blue); }
.club-card h3 {
  font-size: 1.0625rem;
  font-weight: 600;
  color: var(--navy);
  margin-bottom: 10px;
  letter-spacing: -0.01em;
}
.club-range {
  font-size: 0.9375rem;
  color: var(--gray-600);
  line-height: 1.6;
  margin-bottom: 20px;
}
.club-case {
  font-size: 0.9375rem;
  line-height: 1.65;
  color: var(--gray-500);
  border-top: 1px solid var(--gray-200);
  padding-top: 16px;
}
.club-case strong { color: var(--black); font-weight: 600; }
.club-card--top .club-case { border-top-color: rgba(0, 70, 255, 0.25); }
.clubs-foot {
  margin-top: 32px;
  text-align: center;
  font-size: 0.9375rem;
  color: var(--gray-600);
}
.clubs-foot a { color: var(--blue); text-decoration: none; border-bottom: 1px solid rgba(0, 70, 255, 0.3); }
.clubs-foot a:hover { border-bottom-color: var(--blue); }

@media (max-width: 900px) {
  .clubs-grid { grid-template-columns: 1fr; }
  .club-card { border-right: 0; border-bottom: 1px solid var(--gray-200); padding: 32px 0 28px; }
  .club-card:last-child { border-bottom: 0; }
  .club-num { font-size: 3.25rem; margin-bottom: 12px; }
  .clubs-head { margin-bottom: 36px; text-align: left; }
}

/* Étapes d'intervention dans les récits clients */
.story-steps { list-style: none; margin: 18px 0 0; padding: 0; }
.story-steps li {
  position: relative;
  padding: 12px 0 12px 0;
  border-top: 1px solid var(--gray-200);
  font-size: 0.9375rem;
  line-height: 1.65;
  color: var(--gray-600);
}
.story-steps li:first-child { border-top: 0; padding-top: 0; }
.story-steps span {
  display: block;
  font-family: var(--font-heading);
  font-size: 0.6875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--navy);
  margin-bottom: 5px;
}
.story-steps li:last-child { color: var(--black); font-weight: 500; }

/* ========================================
   LES DEUX VOIES
   ======================================== */
.voies { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; }
.voie {
  border-radius: 24px;
  display: block;
  padding: 40px 36px 34px;
  background: var(--white);
  border: 1px solid var(--gray-200);
  text-decoration: none;
  transition: border-color 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
}
.voie:hover { border-color: rgba(0, 70, 255, 0.35); transform: translateY(-3px); box-shadow: 0 18px 40px rgba(0, 25, 76, 0.08); }
.voie--top { background: var(--navy-deep); border-color: var(--navy-deep); }
.voie--top:hover { border-color: var(--blue); }
.voie-label {
  font-family: var(--font-heading);
  font-size: 0.6875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--gray-500);
  margin-bottom: 14px;
}
.voie--top .voie-label { color: rgba(255, 255, 255, 0.5); }
.voie h3 {
  font-size: 1.5rem;
  line-height: 1.25;
  letter-spacing: -0.02em;
  color: var(--navy);
  margin-bottom: 16px;
}
.voie--top h3 { color: #fff; }
.voie-desc { font-size: 0.9375rem; line-height: 1.7; color: var(--gray-600); margin-bottom: 22px; }
.voie--top .voie-desc { color: rgba(255, 255, 255, 0.72); }
.voie-list { list-style: none; margin: 0 0 26px; padding: 0; }
.voie-list li {
  position: relative;
  padding: 9px 0 9px 20px;
  border-top: 1px solid var(--gray-200);
  font-size: 0.9375rem;
  color: var(--gray-600);
}
.voie--top .voie-list li { border-top-color: rgba(255, 255, 255, 0.12); color: rgba(255, 255, 255, 0.72); }
.voie-list li b {
  color: var(--navy);
  font-weight: 600;
}
.voie--top .voie-list li b { color: #fff; }
.voie-list li::before {
  content: '';
  position: absolute;
  left: 0; top: 18px;
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--blue);
}
.voie--top .voie-list li::before { background: #6B9FFF; }
.voie-go {
  font-family: var(--font-heading);
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--blue);
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.voie--top .voie-go { color: #6B9FFF; }
.voie-go em { font-style: normal; transition: transform 0.3s ease; }
.voie:hover .voie-go em { transform: translateX(4px); }
.voies-foot { margin-top: 28px; text-align: center; font-size: 0.9375rem; color: var(--gray-600); }

@media (max-width: 900px) {
  .voies { grid-template-columns: 1fr; gap: 16px; }
  .voie { padding: 30px 26px 28px; }
  .voie h3 { font-size: 1.3125rem; }
}

/* ========================================
   LE SYSTÈME / DISPOSITIF
   ======================================== */
/* Les filets se font par bordure et non par un fond visible dans la gouttiere :
   des cartes opaques masquaient le halo de la section et faisaient un bloc plat. */
.sys-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; }
@media (max-width: 1100px) {
  .sys-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sys-grid > .sys-item:nth-child(odd) { border-left: 0; }
  .sys-grid > .sys-item:nth-child(n+3) { border-top: 1px solid rgba(255, 255, 255, 0.10); }
}
@media (max-width: 620px) {
  .sys-grid { grid-template-columns: 1fr; }
  .sys-grid > .sys-item { border-left: 0; border-top: 1px solid rgba(255, 255, 255, 0.10); }
  .sys-grid > .sys-item:first-child { border-top: 0; }
}
.sys-item {
  background: none;
  padding: 34px 26px 30px;
  border-left: 1px solid rgba(255, 255, 255, 0.10);
}
.sys-grid > .sys-item:first-child { border-left: 0; }
.sys-num {
  display: block;
  font-family: var(--font-heading);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  color: #6B9FFF;
  margin-bottom: 16px;
}
.sys-item h3 {
  font-size: 1.0625rem;
  line-height: 1.35;
  color: #fff;
  margin-bottom: 12px;
  letter-spacing: -0.01em;
}
.sys-item p { font-size: 0.9375rem; line-height: 1.7; color: rgba(255, 255, 255, 0.62); }
.sys-foot {
  margin-top: 40px;
  text-align: center;
  font-size: 0.9375rem;
  color: rgba(255, 255, 255, 0.5);
}
@media (max-width: 900px) {
  .sys-grid { grid-template-columns: 1fr; }
  .sys-item { padding: 28px 22px 26px; }
}

/* ========================================
   PAGE INTERVENTIONS — LES DEUX DISPOSITIFS
   ======================================== */
.disp {
  padding: 56px 0 60px;
  border-top: 1px solid var(--gray-200);
}
.disp:first-child { border-top: 0; padding-top: 8px; }
.disp-head { max-width: 780px; margin-bottom: 40px; }
.disp-label {
  font-family: var(--font-heading);
  font-size: 0.6875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--blue);
  margin-bottom: 14px;
}
.disp-head h2 {
  font-size: clamp(1.75rem, 3.4vw, 2.5rem);
  line-height: 1.15;
  letter-spacing: -0.025em;
  color: var(--navy);
  margin-bottom: 18px;
}
.disp-lead { font-size: 1.0625rem; line-height: 1.75; color: var(--gray-600); }
.disp-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0 48px; }
.disp-item { padding: 24px 0; border-top: 1px solid var(--gray-200); }
.disp-item h3 { font-size: 1.0625rem; color: var(--navy); margin-bottom: 8px; letter-spacing: -0.01em; }
.disp-item p { font-size: 0.9375rem; line-height: 1.7; color: var(--gray-600); }
.disp-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  flex-wrap: wrap;
  margin-top: 36px;
  padding-top: 28px;
  border-top: 1px solid var(--gray-200);
}
.disp-for { font-size: 0.9375rem; line-height: 1.7; color: var(--gray-600); max-width: 560px; }
.disp-for strong {
  display: block;
  font-family: var(--font-heading);
  font-size: 0.6875rem;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--navy);
  margin-bottom: 5px;
}

/* Les séminaires */
.sem-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.sem-card {
  display: block;
  background: var(--white);
  border: 1px solid var(--gray-200);
  text-decoration: none;
  overflow: hidden;
  transition: border-color 0.3s ease, transform 0.3s ease;
}
a.sem-card:hover { border-color: rgba(0, 70, 255, 0.3); transform: translateY(-3px); }
.sem-card img { width: 100%; height: 150px; object-fit: cover; display: block; }
.sem-body { padding: 22px 22px 26px; }
.sem-tag {
  display: block;
  font-family: var(--font-heading);
  font-size: 0.625rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--gray-500);
  margin-bottom: 10px;
}
.sem-card h3 { font-size: 1.0625rem; color: var(--navy); margin-bottom: 10px; letter-spacing: -0.01em; }
.sem-card p { font-size: 0.9375rem; line-height: 1.7; color: var(--gray-600); }
.sem-card--phare { border-color: rgba(0, 70, 255, 0.28); }
.sem-date {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--gray-200);
  font-size: 0.8125rem !important;
  color: var(--navy) !important;
}
.sem-date strong {
  display: block;
  font-family: var(--font-heading);
  font-size: 0.625rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--blue);
  margin-bottom: 4px;
}
.sem-link {
  display: inline-block;
  margin-top: 14px;
  font-family: var(--font-heading);
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--blue);
}
.sem-link::after { content: " \2192"; transition: margin-left 0.3s ease; }
a.sem-card:hover .sem-link::after { margin-left: 4px; }

@media (max-width: 900px) {
  .disp-grid { grid-template-columns: 1fr; gap: 0; }
  .sem-grid { grid-template-columns: 1fr; }
  .sem-card img { height: 180px; }
  .disp-foot { flex-direction: column; align-items: flex-start; gap: 20px; }
}

/* Variante : le chiffre du résultat en héros de colonne */
.club-num--fig { font-size: 3.25rem; color: var(--navy); letter-spacing: -0.03em; }
.club-card--top .club-num--fig { color: var(--blue); }
@media (max-width: 900px) { .club-num--fig { font-size: 2.5rem; } }

/* L'espace sous les puces du hero : la courbe passe dessous sans les toucher */
@media (min-width: 768px) {
  .hero-home .hero-badges { margin-bottom: 24px; }
}

/* Galerie de témoignages : le même ADN éditorial que les grands formats */
.video-kicker {
  font-family: var(--font-heading);
  font-size: 0.6563rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.11em;
  color: var(--gray-500);
  margin-bottom: 6px;
}
.video-stat {
  font-family: var(--font-heading);
  font-size: 0.9375rem;
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: -0.01em;
  color: var(--navy);
}

/* ========================================
   FILTRE PAR SECTEUR (page Résultats)
   ======================================== */
.section-parcours { padding: 64px 0 80px; }
.sect-filters {
  position: sticky;
  top: 62px;
  z-index: 20;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
  margin: 0 0 40px;
  padding: 14px 0;
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--gray-200);
}
.sect-btn {
  font-family: var(--font-heading);
  font-size: 0.8125rem;
  font-weight: 500;
  letter-spacing: 0.01em;
  color: var(--gray-600);
  background: transparent;
  border: 1px solid var(--gray-200);
  padding: 9px 18px;
  border-radius: 100px;
  cursor: pointer;
  transition: color 0.25s ease, border-color 0.25s ease, background 0.25s ease;
}
.sect-btn:hover { color: var(--navy); border-color: rgba(0, 70, 255, 0.35); }
.sect-btn.is-active { background: var(--navy); border-color: var(--navy); color: #fff; }
.sect-empty {
  text-align: center;
  color: var(--gray-600);
  font-size: 0.9375rem;
  margin: 0 0 32px;
}
.sect-reset {
  background: none; border: 0; padding: 0;
  color: var(--blue); font-size: inherit; font-family: inherit;
  cursor: pointer; text-decoration: underline;
}
.video-card[hidden] { display: none !important; }
@media (max-width: 900px) {
  .sect-filters { justify-content: flex-start; overflow-x: auto; flex-wrap: nowrap; padding-bottom: 6px; }
  .sect-btn { flex: none; }
}

/* Galerie unifiée : 3 colonnes, cartes éditoriales */
.videos-compact-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px 24px; align-items: start; }
.video-recit { font-size: 0.9375rem; line-height: 1.65; color: var(--gray-600); margin-top: 10px; }
@media (max-width: 1100px) { .videos-compact-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 700px) { .videos-compact-grid { grid-template-columns: 1fr; } }

/* Cartes de même hauteur : le récit occupe l'espace restant */
.videos-compact-grid .video-card { display: flex; flex-direction: column; height: 100%; }
.videos-compact-grid .video-info { display: flex; flex-direction: column; flex: 1; }
.videos-compact-grid .video-recit { flex: 1; }

/* ========================================
   PAGE ACCOMPAGNEMENT — AIDE AU CHOIX
   ======================================== */
.choix { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; margin-bottom: 72px; }
.choix-col { padding: 34px 32px 30px; border: 1px solid var(--gray-200); border-radius: 14px; background: var(--white); }
.choix-col--top { background: var(--navy-deep); border-color: var(--navy-deep); }
.choix-num {
  font-family: var(--font-heading); font-size: 0.6875rem; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.16em; color: var(--blue); margin-bottom: 10px;
}
.choix-col--top .choix-num { color: #6B9FFF; }
.choix-titre { font-size: 1.5rem; letter-spacing: -0.02em; color: var(--navy); margin-bottom: 22px; }
.choix-col--top .choix-titre { color: #fff; }
.choix-list { margin: 0 0 24px; }
.choix-list dt {
  font-family: var(--font-heading); font-size: 0.6563rem; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.13em; color: var(--gray-500);
  padding-top: 14px; border-top: 1px solid var(--gray-200);
}
.choix-col--top .choix-list dt { color: rgba(255,255,255,0.5); border-top-color: rgba(255,255,255,0.14); }
.choix-list dd { margin: 5px 0 14px; font-size: 0.9375rem; line-height: 1.6; color: var(--gray-600); }
.choix-col--top .choix-list dd { color: rgba(255,255,255,0.78); }
.choix-go { font-family: var(--font-heading); font-size: 0.8125rem; font-weight: 600; color: var(--blue); text-decoration: none; display: inline-flex; align-items: center; gap: 7px; }
.choix-col--top .choix-go { color: #6B9FFF; }
.choix-col--current { box-shadow: inset 0 0 0 2px var(--blue); }
.choix-ici {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-heading);
  font-size: 0.6875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--blue);
  margin: 0;
}
.choix-ici::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--blue);
  flex: none;
}
.choix-col--top .choix-ici { color: #6B9FFF; }
.choix-col--top .choix-ici::before { background: #6B9FFF; }

/* Preuve rattachée au dispositif */
.disp-preuve {
  display: grid; grid-template-columns: 280px minmax(0, 1fr); gap: 28px; align-items: center;
  margin-top: 34px; padding: 24px; border-radius: 12px; background: var(--gray-50);
}
.disp-preuve .video-facade { border-radius: 8px; overflow: hidden; }
.disp-preuve-stat { font-family: var(--font-heading); font-size: 1.0625rem; font-weight: 600; color: var(--navy); margin: 8px 0 8px; letter-spacing: -0.01em; }
.disp-preuve-txt { font-size: 0.9375rem; line-height: 1.65; color: var(--gray-600); margin: 0; }

/* Déroulé en 4 temps */
.deroule { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: rgba(255,255,255,0.1); }
.deroule li { background: var(--navy-deep); padding: 32px 26px 30px; }
.der-num { display: block; font-family: var(--font-heading); font-size: 0.75rem; font-weight: 600; letter-spacing: 0.14em; color: #6B9FFF; margin-bottom: 14px; }
.deroule h3 { font-size: 1.0625rem; color: #fff; margin-bottom: 10px; letter-spacing: -0.01em; }
.deroule p { font-size: 0.9375rem; line-height: 1.7; color: rgba(255,255,255,0.62); }

/* Investissement */
.invest { display: grid; grid-template-columns: minmax(0, 360px) minmax(0, 1fr); gap: 56px; align-items: start; }
.invest h2 { font-size: clamp(1.5rem, 2.6vw, 2rem); letter-spacing: -0.02em; color: var(--navy); }
.invest-txt p { font-size: 0.9375rem; line-height: 1.75; color: var(--gray-600); margin-bottom: 16px; }
.invest-note { border-left: 2px solid var(--blue); padding-left: 16px; color: var(--navy) !important; font-weight: 500; }

@media (max-width: 900px) {
  .choix { grid-template-columns: 1fr; gap: 16px; margin-bottom: 48px; }
  .disp-preuve { grid-template-columns: 1fr; gap: 18px; }
  .deroule { grid-template-columns: 1fr; }
  .invest { grid-template-columns: 1fr; gap: 24px; }
}

/* ========================================
   NAVIGATION À SOUS-MENUS
   ======================================== */
.nav-has-sub { position: relative; }
.nav-parent {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-heading);
  font-size: 0.71875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--gray-800);
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  position: relative;
  transition: color 0.3s, opacity 0.35s ease;
}
.nav-parent:hover { color: var(--black); }
.navbar-transparent .nav-parent { color: rgba(255, 255, 255, 0.85); }
.navbar-transparent .nav-parent:hover { color: var(--white); }
.navbar-transparent.scrolled .nav-parent { color: var(--gray-800); }
.navbar-transparent.scrolled .nav-parent:hover { color: var(--black); }
.nav-chev {
  width: 7px; height: 7px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: translateY(-2px) rotate(45deg);
  transition: transform 0.25s ease;
  opacity: 0.6;
}
.nav-has-sub[data-open="true"] .nav-chev { transform: translateY(1px) rotate(225deg); }
/* --- Panneau de navigation pleine largeur (ordinateur) --- */
.nav-sub {
  position: absolute;
  top: calc(100% + 1px);
  left: 0;
  right: 0;
  min-width: 0;
  margin: 0;
  padding: 40px max(24px, calc((100% - 1120px) / 2 + 24px)) 0;
  list-style: none;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  column-gap: 44px;
  row-gap: 0;
  background: var(--white);
  border: 0;
  border-bottom: 1px solid rgba(0, 25, 76, 0.08);
  border-radius: 0;
  box-shadow: 0 26px 44px -28px rgba(0, 25, 76, 0.28);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-10px);
  transition: opacity 0.16s ease-out, transform 0.16s ease-out, visibility 0.16s;
  z-index: 60;
}
.navbar-links .nav-has-sub:hover > .nav-sub,
.navbar-links .nav-has-sub:focus-within > .nav-sub,
.navbar-links .nav-has-sub[data-open="true"] > .nav-sub {
  opacity: 1 !important; visibility: visible !important; transform: translateY(0);
}
.nav-sub li { margin: 0; }

/* un item : intitulé + précision, séparés par un filet qui se colore au survol */
.navbar .navbar-links .nav-sub a {
  display: block;
  padding: 0 0 34px;
  border: 0;
  border-radius: 0;
  font-family: var(--font-heading);
  text-transform: none;
  letter-spacing: 0;
  text-decoration: none;
  white-space: normal;
  background: none;
}
.navbar .navbar-links .nav-sub a::after { display: none; }
.navbar .navbar-links .nav-sub a:hover,
.navbar .navbar-links .nav-sub a:focus-visible { background: none; }
.nss-t {
  display: block;
  position: relative;
  padding-bottom: 11px;
  font-size: 0.9375rem;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: -0.012em;
  color: var(--navy);
  transition: color 0.22s ease;
}
.nss-t::after {
  content: '';
  position: absolute;
  left: 0; bottom: 0;
  width: 26px; height: 1px;
  background: var(--gray-300);
  transition: width 0.28s cubic-bezier(0.22, 1, 0.36, 1), background 0.22s ease;
}
.nav-sub a:hover .nss-t,
.nav-sub a:focus-visible .nss-t { color: var(--blue); }
.nav-sub a:hover .nss-t::after,
.nav-sub a:focus-visible .nss-t::after { width: 100%; background: var(--blue); }
.nss-d {
  display: block;
  margin-top: 11px;
  font-family: var(--font-body);
  font-size: 0.8125rem;
  font-weight: 400;
  line-height: 1.55;
  color: var(--gray-500);
}

/* l'événement, en bandeau sur toute la largeur du panneau */
.nav-sub li:has(> .nav-sub-feature) {
  grid-column: 1 / -1;
  position: relative;
  isolation: isolate;
}
/* la teinte du bandeau déborde jusqu'aux bords de l'écran */
.nav-sub li:has(> .nav-sub-feature)::before {
  content: '';
  position: absolute;
  top: 0; bottom: 0; left: -100vw; right: -100vw;
  background: var(--gray-50);
  z-index: -1;
}
.navbar .navbar-links .nav-sub .nav-sub-feature {
  display: flex;
  align-items: baseline;
  gap: 14px;
  flex-wrap: wrap;
  padding: 20px 0 22px;
  border-top: 1px solid var(--gray-100);
}
.nav-sub-feature .nsf-tag {
  font-family: var(--font-heading);
  font-size: 0.5625rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--blue);
}
.nav-sub-feature .nss-t {
  padding-bottom: 0;
  font-size: 0.9375rem;
}
.nav-sub-feature .nss-t::after { display: none; }
.nav-sub-feature .nss-d {
  margin-top: 0;
  color: var(--gray-500);
}
.nav-sub-feature .nss-d::after {
  content: ' \2192';
  color: var(--blue);
  font-weight: 600;
  transition: margin-left 0.22s ease;
  margin-left: 6px;
}
.nav-sub-feature:hover .nss-d::after { margin-left: 12px; }
.nav-sub-feature:hover .nss-t { color: var(--blue); }

/* Panneau mobile : sous-menus dépliés */
@media (max-width: 900px) {
  /* Le toucher déclenche :hover sur téléphone. La règle blanche de la barre
     transparente a la même spécificité que la mise en navy du menu mobile et
     arrive plus loin dans la feuille : au premier appui, l'intitulé repassait
     en blanc sur le panneau blanc. On la neutralise ici, après elle. */
  .navbar .navbar-links .nav-parent,
  .navbar .navbar-links .nav-parent:hover,
  .navbar .navbar-links .nav-parent:focus,
  .navbar .navbar-links .nav-parent:active,
  .navbar-transparent .navbar-links .nav-parent:hover,
  .navbar-transparent.scrolled .navbar-links .nav-parent:hover { color: var(--navy); }
  .nav-has-sub { width: 100%; }
  .nav-parent { width: 100%; justify-content: space-between; padding: 10px 0; }
  /* en accordeon : replie par defaut, deplie par le clic. Sans le display:none
     ci-dessous, les quatre sous-menus restaient ouverts en permanence et le
     panneau faisait 827 px, le clic sur une rubrique ne changeant rien. */
  .nav-sub {
    position: static; transform: none; opacity: 1; visibility: visible;
    display: none;
    min-width: 0; padding: 0 0 6px 14px; margin: 0;
    background: none; border: 0; box-shadow: none;
  }
  .nav-has-sub[data-open="true"] > .nav-sub { display: block; }
  .navbar .navbar-links .nav-sub a { padding: 9px 0; }
  .nss-t { font-size: 0.8125rem; padding-bottom: 0; }
  .nss-t::after { display: none; }
  .nss-d { margin-top: 3px; font-size: 0.75rem; }
  .navbar .navbar-links .nav-sub .nav-sub-feature {
    display: block; padding: 12px 0 8px; margin-top: 4px;
    border-top: 1px solid rgba(0, 25, 76, 0.1);
  }
  /* la teinté du bandeau déborde de 100vw de part et d'autre pour rejoindre les
     bords de l'ecran sur ordinateur ; dans un panneau qui defile, elle créait
     366 px de course latérale */
  .nav-sub li:has(> .nav-sub-feature)::before { display: none; }
  .nav-sub li:has(> .nav-sub-feature) { background: none; }
  .nav-sub-feature .nsf-tag { display: block; margin-bottom: 4px; }
  .nav-sub-feature .nss-d::after { display: none; }
  /* alignement identique pour les rubriques simples et celles à sous-menu */
  .navbar-links > li:not(.navbar-cta) { width: 100%; text-align: left; }
  .navbar-links > li:not(.navbar-cta) > a {
    display: block;
    width: 100%;
    text-align: left;
    padding: 10px 0;
  }
}

/* le parent ne sert plus de repère de position : le panneau se cale sur la barre */
@media (min-width: 901px) {
  .nav-has-sub { position: static; }
  .nav-has-sub::after { display: none; }

  /* Le panneau s'ouvre sous la barre, l'intitulé est centré dedans : entre les
     deux subsiste une bande morte, et la souris y perdait le survol en
     descendant. Une passerelle transparente relie l'intitulé au panneau.
     Elle n'existe que pendant l'ouverture, sinon elle intercepterait les clics
     sur la page derrière la barre. */
  .navbar-links .nav-has-sub:hover > .nav-parent::after,
  .navbar-links .nav-has-sub:focus-within > .nav-parent::after,
  .navbar-links .nav-has-sub[data-open="true"] > .nav-parent::after {
    content: '';
    position: absolute;
    top: 100%;
    left: -13px;
    right: -13px;
    height: 34px;
  }
}

/* ========================================
   BANDEAU DE PAGE : hauteur uniforme
   ======================================== */
.hero-page,
.hero-compact,
.m9x-hero,
.section-hero {
  min-height: 420px;
  display: flex;
  align-items: center;
  padding-top: 118px !important;
  padding-bottom: 58px !important;
}
.hero-page > .container,
.hero-compact > .container,
.m9x-hero > .container,
.section-hero > .container { width: 100%; }

@media (max-width: 900px) {
  .hero-page,
  .hero-compact,
  .m9x-hero,
  .section-hero {
    min-height: 380px;
    padding-top: 104px !important;
    padding-bottom: 48px !important;
  }
}

/* ========================================
   REMISE DE TROPHEES : mur de preuve
   ======================================== */
.trophees { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
.trophee { margin: 0; }
.trophee img {
  width: 100%;
  aspect-ratio: 2 / 3;
  object-fit: cover;
  display: block;
  border-radius: 2px;
  background: var(--gray-100);
}
.trophee figcaption {
  margin-top: 13px;
  font-size: 0.8125rem;
  line-height: 1.6;
  color: var(--gray-600);
}
@media (max-width: 1000px) { .trophees { grid-template-columns: repeat(2, 1fr); gap: 20px; } }
@media (max-width: 600px)  { .trophees { grid-template-columns: repeat(2, 1fr); gap: 16px; } }

/* Dernière section sombre avant le pied de page : marque la couture,
   les deux fonds étant identiques. */
.section-fin { border-bottom: 1px solid rgba(255, 255, 255, 0.10); }

/* ========================================
   CAS CLIENTS : défilement épinglé
   Sans JS, la section reste une simple pile de trois cas.
   ======================================== */
.stories-sticky { padding: var(--section-padding-md) 0; }
.stories-stage { display: grid; gap: 0; }
.story-card {
  display: grid;
  grid-template-columns: minmax(0, 460px) minmax(0, 1fr);
  gap: 56px;
  align-items: center;
  padding: 44px 0;
  border-top: 1px solid var(--gray-200);
}
.story-card:last-child { border-bottom: 1px solid var(--gray-200); }
.story-card .video-facade { border-radius: 12px; overflow: hidden; }
.stories-rail { display: none; }
.stories-more { margin-top: 40px; }

/* --- Mode épinglé : un cas à la fois, piloté par le défilement --- */
@media (min-width: 901px) {
  .js-stories.stories-pin { height: 180vh; padding: 0; position: relative; }
  .js-stories .stories-sticky {
    position: sticky;
    top: 0;
    min-height: 100vh;
    display: flex;
    align-items: center;
    padding: 48px 0 36px;
  }
  /* en flex, le conteneur ne s'étire pas de lui-même */
  .js-stories .stories-sticky > .container { width: 100%; flex: 1 1 auto; }
  .js-stories .stories-stage {
    position: relative;
    display: block;
    min-height: 348px;
  }
  .js-stories .story-card {
    position: absolute;
    inset: 0;
    padding: 0;
    border: 0;
    opacity: 0;
    transform: translateY(26px) scale(0.985);
    transition: opacity 0.55s cubic-bezier(0.22, 1, 0.36, 1),
                transform 0.55s cubic-bezier(0.22, 1, 0.36, 1);
    pointer-events: none;
  }
  .js-stories .story-card.is-active {
    opacity: 1;
    transform: none;
    pointer-events: auto;
  }
  .js-stories .story-card.is-past { transform: translateY(-26px) scale(0.985); }

  /* le rail : trois jalons, celui en cours se remplit au défilement */
  .js-stories .stories-rail {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 28px;
    list-style: none;
    margin: 28px 0 0;
    padding: 0;
  }
  .stories-rail button {
    display: block;
    width: 100%;
    text-align: left;
    background: none;
    border: 0;
    padding: 0;
    cursor: pointer;
    font-family: var(--font-heading);
  }
  .sr-num {
    display: block;
    font-size: 0.625rem;
    font-weight: 700;
    letter-spacing: 0.18em;
    color: var(--gray-400);
    transition: color 0.35s ease;
  }
  .sr-nom {
    display: block;
    margin: 5px 0 12px;
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--gray-500);
    transition: color 0.35s ease;
  }
  .sr-bar { display: block; height: 2px; background: var(--gray-200); overflow: hidden; }
  .sr-bar i { display: block; height: 100%; width: 0; background: var(--blue); }
  .stories-rail li.is-active .sr-num { color: var(--blue); }
  .stories-rail li.is-active .sr-nom { color: var(--navy); }
  .stories-rail li.is-past .sr-bar i { width: 100% !important; }
  .stories-rail button:hover .sr-nom { color: var(--navy); }

  .js-stories .stories-more { margin-top: 36px; }
}
.stories-outro { padding: 0 0 var(--section-padding-md); }
@media (max-width: 900px) {
  .story-card { grid-template-columns: 1fr; gap: 20px; padding: 32px 0; }
  .stories-sticky { padding: var(--section-padding-md) 0 0; }
}

/* ========================================
   EQUIPE : portraits carrés, traitement uniforme
   ======================================== */
.eq-tete { margin: 72px 0 26px; }
.eq-tete h3 {
  font-family: var(--font-heading);
  font-size: 1.25rem;
  font-weight: 600;
  letter-spacing: -0.015em;
  color: var(--navy);
  margin: 0;
}
.eq-tete h3::after {
  content: '';
  display: block;
  width: 30px;
  height: 2px;
  background: var(--blue);
  margin-top: 12px;
}
.eq-tete p { margin: 12px 0 0; font-size: 0.9375rem; color: var(--gray-600); }
.eq-grille { display: grid; grid-template-columns: repeat(6, 1fr); gap: 26px 22px; }
.eq-membre { margin: 0; }
.eq-membre img {
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  display: block;
  border-radius: 3px;
  background: var(--gray-100);
  filter: grayscale(1);
  transition: filter 0.4s ease, transform 0.4s ease;
}
.eq-membre:hover img { transform: translateY(-3px); }
.eq-nom {
  display: block;
  margin-top: 12px;
  font-family: var(--font-heading);
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--navy);
}
.eq-role { display: block; margin-top: 2px; font-size: 0.75rem; line-height: 1.45; color: var(--gray-500); }
@media (max-width: 1000px) { .eq-grille { grid-template-columns: repeat(4, 1fr); } }
@media (max-width: 640px)  { .eq-grille { grid-template-columns: repeat(3, 1fr); gap: 20px 16px; } }

/* ========================================
   MOSAIQUE D'EQUIPE : le visuel dit ce que dit le titre
   ======================================== */
.eq-mosaique {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  height: 520px;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 14%, #000 86%, transparent 100%);
          mask-image: linear-gradient(to bottom, transparent 0%, #000 14%, #000 86%, transparent 100%);
}
.eqm-col {
  display: flex;
  flex-direction: column;
  gap: 10px;
  animation: eqm-defile var(--d, 34s) linear infinite;
  will-change: transform;
}
.eqm-col--inverse { animation-direction: reverse; }
.eqm-col img {
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  display: block;
  border-radius: 3px;
  filter: grayscale(1) contrast(1.04);
  opacity: 0.88;
}
@keyframes eqm-defile {
  from { transform: translateY(0); }
  to   { transform: translateY(-50%); }
}
@media (max-width: 900px) {
  .eq-mosaique { height: 380px; gap: 8px; }
  .eqm-col { gap: 8px; }
}

/* --- Le mur d'équipe sur fond sombre --- */
.eq-section { padding: var(--section-padding-md); }
.eq-chiffres {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  margin: 44px 0 8px;
  padding: 26px 0;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
  text-align: center;
}
.eq-chiffres b {
  display: block;
  font-family: var(--font-heading);
  font-size: 1.75rem;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--white);
}
.eq-chiffres span {
  display: block;
  margin-top: 5px;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: rgba(255, 255, 255, 0.5);
}
.eq-section .eq-tete h3 { color: var(--white); }
.eq-section .eq-tete h3::after { background: #6B9FFF; }
.eq-section .eq-tete p { color: rgba(255, 255, 255, 0.6); }
.eq-section .eq-grille { grid-template-columns: repeat(7, 1fr); gap: 22px 16px; }
.eq-section .eq-membre img { opacity: 0.92; }
.eq-section .eq-membre:hover img { opacity: 1; }
.eq-section .eq-nom { color: var(--white); font-size: 0.8125rem; }
.eq-section .eq-role { color: rgba(255, 255, 255, 0.52); font-size: 0.6875rem; }
@media (max-width: 1000px) {
  .eq-section .eq-grille { grid-template-columns: repeat(4, 1fr); }
  .eq-chiffres { grid-template-columns: repeat(2, 1fr); gap: 26px 20px; }
}
@media (max-width: 640px) { .eq-section .eq-grille { grid-template-columns: repeat(3, 1fr); } }

/* ========================================
   PAGE A PROPOS : citation, presse, engagements
   ======================================== */
.bio-conviction {
  margin: 26px 0 0;
  padding: 0 0 0 20px;
  border-left: 2px solid var(--blue);
}
.bio-conviction p {
  margin: 0;
  font-size: 1.125rem;
  line-height: 1.7;
  color: var(--navy);
  font-style: italic;
}
.bio-conviction cite {
  display: block;
  margin-top: 12px;
  font-family: var(--font-heading);
  font-size: 0.75rem;
  font-style: normal;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--gray-500);
}

/* La couverture a gauche, la distinction et les logos a droite : la preuve
   visuelle precede la mention, qui precede l'etendue. */
.presse { display: grid; grid-template-columns: minmax(0, 0.78fr) minmax(0, 1.22fr); gap: 58px; align-items: center; }
.presse-visuel { margin: 0; }
.presse-visuel img { width: 100%; height: auto; display: block; }
.presse-logos { margin-top: 34px; padding-top: 26px; border-top: 1px solid var(--gray-200); }
.presse-lien { margin: 22px 0 0; font-size: 0.9375rem; }
.presse-lien a {
  color: var(--blue); text-decoration: none;
  border-bottom: 1px solid rgba(0, 70, 255, 0.3);
  transition: border-color 0.25s ease;
}
.presse-lien a:hover { border-bottom-color: var(--blue); }
.presse-titre {
  font-family: var(--font-heading);
  font-size: clamp(1.5rem, 2.6vw, 2rem);
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.2;
  color: var(--navy);
  margin: 0 0 12px;
}
.presse-source { font-size: 0.9375rem; line-height: 1.7; color: var(--gray-600); margin: 0; }
.presse-intro {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--gray-500);
  margin: 0 0 22px;
}
.presse-bande { display: flex; flex-wrap: wrap; align-items: center; gap: 34px; }
.presse-bande img { height: 26px; width: auto; opacity: 0.55; filter: grayscale(1); }
@media (max-width: 900px) {
  .presse { grid-template-columns: minmax(0, 1fr); gap: 34px; }
  /* La couverture ne doit pas manger l'ecran sur mobile : elle illustre, elle
     ne porte pas la section. */
  .presse-visuel { max-width: 300px; }
  .presse-logos { margin-top: 26px; }
}

.engagements { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }
.engagement { padding-top: 22px; border-top: 2px solid var(--navy); }
.eng-num {
  display: block;
  font-family: var(--font-heading);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  color: var(--blue);
  margin-bottom: 14px;
}
.engagement h3 {
  font-size: 1.0625rem;
  font-weight: 600;
  letter-spacing: -0.012em;
  line-height: 1.35;
  color: var(--navy);
  margin: 0 0 12px;
}
.engagement p { font-size: 0.9375rem; line-height: 1.7; color: var(--gray-600); margin: 0; }
@media (max-width: 900px) {
  .presse { grid-template-columns: 1fr; gap: 34px; }
  .engagements { grid-template-columns: 1fr; gap: 30px; }
  .presse-bande { gap: 26px; }
}

/* ========================================
   PAGE GROUPE : échelle, métiers, mur d'équipe
   ======================================== */
.gr-echelle { padding: var(--section-padding-md); }
.gr-echelle-tete { max-width: 620px; margin-bottom: 56px; }
.gr-chiffres { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; }
.gr-chiffre { padding: 0 32px; border-left: 1px solid rgba(255, 255, 255, 0.14); }
.gr-chiffre:first-child { padding-left: 0; border-left: 0; }
.grc-val {
  display: block;
  font-family: var(--font-heading);
  white-space: nowrap; font-size: clamp(2rem, 3.4vw, 3rem);
  font-weight: 600;
  letter-spacing: -0.035em;
  line-height: 1;
  color: var(--white);
  font-variant-numeric: tabular-nums;
}
.grc-val i { font-style: normal; color: #6B9FFF; }
.grc-lib {
  display: block;
  margin-top: 14px;
  font-family: var(--font-heading);
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--white);
}
.grc-note { display: block; margin-top: 5px; font-size: 0.8125rem; line-height: 1.5; color: rgba(255, 255, 255, 0.48); }

.gr-metiers { display: grid; gap: 0; }
.gr-metier {
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr) 130px;
  gap: 32px;
  align-items: start;
  padding: 34px 0;
  border-top: 1px solid var(--gray-200);
}
.gr-metier:last-child { border-bottom: 1px solid var(--gray-200); }
.grm-num {
  font-family: var(--font-heading);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  color: var(--blue);
  padding-top: 5px;
}
.grm-corps h3 { font-size: 1.25rem; font-weight: 600; letter-spacing: -0.018em; color: var(--navy); margin: 0 0 10px; }
.grm-corps p { font-size: 0.9375rem; line-height: 1.75; color: var(--gray-600); margin: 0; max-width: 660px; }
.grm-effectif { text-align: right; font-size: 0.75rem; color: var(--gray-500); line-height: 1.3; }
.grm-effectif b {
  display: block;
  font-family: var(--font-heading);
  font-size: 1.75rem;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--navy);
}

.gr-fondateur { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: 64px; align-items: center; }
.grf-visuel img { width: 100%; height: auto; display: block; border-radius: 3px; }
.grf-texte p:not(.section-label) { font-size: 1.0625rem; line-height: 1.8; color: var(--gray-700, #3a3f4b); margin: 0 0 18px; }
.grf-citation { margin: 26px 0 0; padding-left: 20px; border-left: 2px solid var(--blue); }
.grf-citation p { font-size: 1.125rem; line-height: 1.7; color: var(--navy); font-style: italic; margin: 0; }

.gr-mur { padding: var(--section-padding-md); }
.grw-bande {
  margin: 52px 0 44px;
  -webkit-mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent);
          mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent);
}
.grw-rangee { display: flex; gap: 14px; width: max-content; animation: grw-defile var(--d, 58s) linear infinite; }
.grw-rangee + .grw-rangee { margin-top: 14px; }
.grw-rangee--inverse { animation-direction: reverse; }
.grw-rangee img {
  width: 132px;
  height: 132px;
  object-fit: cover;
  display: block;
  border-radius: 3px;
  filter: grayscale(1) contrast(1.04);
  opacity: 0.9;
  flex: none;
}
@keyframes grw-defile { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.btn-clair { color: #fff !important; border-color: rgba(255, 255, 255, 0.35) !important; }
.btn-clair:hover { border-color: #fff !important; background: rgba(255, 255, 255, 0.06) !important; }

@media (max-width: 1000px) {
  .gr-chiffres { grid-template-columns: repeat(2, 1fr); gap: 34px 0; }
  .gr-chiffre:nth-child(3) { padding-left: 0; border-left: 0; }
  .gr-fondateur { grid-template-columns: 1fr; gap: 32px; }
}
@media (max-width: 700px) {
  .gr-metier { grid-template-columns: 44px minmax(0, 1fr); gap: 18px; }
  .grm-effectif { grid-column: 2; text-align: left; margin-top: 6px; }
  .grm-effectif b { display: inline; font-size: 1rem; margin-right: 6px; }
  .grw-rangee img { width: 96px; height: 96px; }
}
/* Bandeau et chiffres forment une seule ouverture */
.gr-ouverture { padding-bottom: 0 !important; min-height: auto; }
.gr-ouverture-suite { padding-top: 44px; }
.gr-ouverture-suite .gr-echelle-tete { margin-bottom: 40px; padding-top: 40px; border-top: 1px solid rgba(255, 255, 255, 0.12); }

/* Les remises de trophée restent en couleur, seules photos du site à l'être.
   Le reste des portraits est en noir et blanc : la preuve est donc la seule
   chose qui a de la couleur, et la scène porte deja le navy et le bleu de la
   marque. Un degrade navy sur le bas seulement pose l'image et adoucit la
   couture avec la legende : teste a 0,30 sur 42 %, il eteignait la couleur
   qu'on venait de rendre. */
.trophee { margin: 0; position: relative; }
.trophee img { filter: saturate(1.06) contrast(1.03); }
.trophee-vue { position: relative; display: block; border-radius: 2px; overflow: hidden; }
.trophee-vue::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(to top, rgba(0, 25, 76, 0.22) 0%, rgba(0, 25, 76, 0) 22%);
}

/* L'audit remplace la newsletter en pied de page */
.footer-audit {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 20px;
  padding-bottom: 40px;
  margin-bottom: 40px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}
.footer-audit-titre {
  margin: 0;
  font-family: var(--font-heading);
  font-size: 1.125rem;
  font-weight: 600;
  letter-spacing: -0.012em;
  color: var(--white);
}
@media (max-width: 640px) {
  .footer-audit { flex-direction: column; align-items: flex-start; gap: 16px; }
}
/* .section-cta-final impose un fond blanc : on laisse la composition l'emporter */
.section-cta-final.section-light { background: var(--off-white); }

/* ========================================
   CTA FINAL : un panneau sombre posé sur la page claire
   ======================================== */
.cta-panneau {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
  gap: 56px;
  align-items: center;
  padding: 60px 64px;
  background: var(--navy-deep);
  border-radius: 24px;
  position: relative;
  overflow: hidden;
}
.cta-panneau::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(0, 70, 255, 0.10) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0, 70, 255, 0.10) 1px, transparent 1px);
  background-size: 64px 64px;
  pointer-events: none;
}
.ctap-texte, .ctap-action { position: relative; z-index: 1; }
.cta-panneau .section-label { color: rgba(255, 255, 255, 0.45); }
.cta-panneau h2 {
  font-size: clamp(1.625rem, 3vw, 2.25rem);
  font-weight: 600;
  letter-spacing: -0.025em;
  line-height: 1.18;
  color: var(--white);
  margin: 10px 0 16px;
}
.ctap-lead { font-size: 1.0625rem; line-height: 1.7; color: rgba(255, 255, 255, 0.68); margin: 0; }
.ctap-action { display: flex; flex-direction: column; align-items: flex-start; gap: 22px; }
.ctap-reassurance { list-style: none; margin: 0; padding: 0; }
.ctap-reassurance li {
  position: relative;
  padding-left: 20px;
  font-size: 0.8125rem;
  line-height: 1.9;
  color: rgba(255, 255, 255, 0.55);
}
.ctap-reassurance li::before {
  content: '';
  position: absolute;
  left: 0; top: 12px;
  width: 9px; height: 2px;
  background: #6B9FFF;
}
@media (max-width: 900px) {
  .cta-panneau { grid-template-columns: 1fr; gap: 30px; padding: 40px 28px; }
}

/* --- Cas clients épinglés : respiration et coupures de ligne --- */
.stories-pin .stories-sticky .section-subtitle {
  max-width: 760px;
  text-wrap: balance;          /* pas de mot orphelin en fin de phrase */
}
.stories-pin .stories-sticky > .container > .text-center { margin-bottom: 56px; }
@media (min-width: 901px) {
  .js-stories .stories-sticky > .container > .text-center { margin-bottom: 60px; }
  .js-stories .stories-rail { margin-top: 40px; }
}


/* --- ECHELLE TYPOGRAPHIQUE : 11 / 13 / 15 / 17 / 18 ---
   Ces blocs heritaient du 16px de body, entre le corps (15) et la lecture (17). */
.section-max-bio p:not(.section-label) { font-size: 1.0625rem; }
.faq-answer-inner,
.faq-answer-inner p,
.faq-answer-inner a,
.faq-answer-inner li { font-size: 0.9375rem; }
.process-content p { font-size: 0.9375rem; }
.plus-loin-row p { font-size: 0.9375rem; }
.cta-banner p { font-size: 1.0625rem; }


/* Le fondateur pose sur la limite basse de la section (pas de blanc sous la photo).
   grf-visuel bas de section */
@media (min-width: 901px) {
  .gr-sec-fondateur { padding-bottom: 0; }
  .gr-fondateur { align-items: end; }
  .grf-visuel { margin-bottom: 6px; }
  .grf-texte { padding-bottom: 80px; }
}


/* Cibles tactiles : 24 px minimum (WCAG 2.2 AA, critere Target Size) */
.footer-legal a,
.clubs-foot a { display: inline-block; padding: 5px 0; }


/* ========================================
   AVIS TRUSTPILOT — bloc statique, sans script tiers
   ======================================== */
.tp {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  padding: 12px 18px;
  border: 1px solid var(--gray-200);
  border-radius: 3px;
  text-decoration: none;
  background: var(--white);
  transition: border-color 0.25s ease;
}
.tp:hover { border-color: rgba(0, 70, 255, 0.35); }
.tp-note {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 1.625rem;
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--navy);
  font-variant-numeric: tabular-nums;
}
.tp-note span { font-size: 0.55em; font-weight: 600; color: var(--gray-500); }
.tp-corps { display: grid; gap: 3px; }
.tp-etoiles { font-size: 0.8125rem; letter-spacing: 0.12em; color: #C97A00; line-height: 1; }
.tp-lib { font-size: 0.8125rem; color: var(--gray-600); line-height: 1.35; }
.tp-lib b { color: var(--navy); font-weight: 600; }

/* sur fond sombre */
.dark .tp, .section-dark .tp, .cta-panneau .tp, .footer .tp {
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(255, 255, 255, 0.16);
}
.dark .tp:hover, .section-dark .tp:hover, .cta-panneau .tp:hover, .footer .tp:hover { border-color: rgba(255, 255, 255, 0.34); }
.dark .tp-note, .section-dark .tp-note, .cta-panneau .tp-note, .footer .tp-note { color: #fff; }
.dark .tp-note span, .section-dark .tp-note span, .cta-panneau .tp-note span, .footer .tp-note span { color: rgba(255, 255, 255, 0.5); }
.dark .tp-etoiles, .section-dark .tp-etoiles, .cta-panneau .tp-etoiles, .footer .tp-etoiles { color: #E0A94A; }
.dark .tp-lib, .section-dark .tp-lib, .cta-panneau .tp-lib, .footer .tp-lib { color: rgba(255, 255, 255, 0.66); }
.dark .tp-lib b, .section-dark .tp-lib b, .cta-panneau .tp-lib b, .footer .tp-lib b { color: #fff; }

/* dans la colonne de marque du pied de page */
.footer-brand .tp { margin-top: 20px; }


/* ========================================
   SÉLECTEUR DE LANGUE
   Un seul lien : celui de l'autre langue. Un couple « FR | EN » oblige à
   repérer lequel est actif ; un lien unique dit où il mène.
   ======================================== */
.nav-lang a {
  display: inline-block;
  padding: 6px 10px;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  border: 1px solid currentColor;
  border-radius: 3px;
  opacity: 0.55;
  text-decoration: none;
  transition: opacity 0.25s ease;
}
.nav-lang a:hover, .nav-lang a:focus-visible { opacity: 1; }
@media (max-width: 900px) {
  /* la pastille suit « A propos », comme sur ordinateur, au lieu de tomber
     sous le bouton bleu ; et elle garde sa taille au lieu d'etre etiree sur
     toute la largeur par la mise en page du menu */
  .navbar-links > li.nav-lang { align-self: flex-start; }
  .navbar .navbar-links > li.nav-lang > a {
    display: inline-block;
    width: auto;
    padding: 7px 15px;
    font-size: 0.8125rem;
    text-align: center;
    opacity: 1;
    color: var(--navy);
    border-color: rgba(0, 25, 76, 0.28);
  }
  /* le soulignement des liens du menu se dessinait a l'interieur du cadre */
  .navbar-links > li.nav-lang > a::after { display: none; }
}


/* ========================================
   REVUE DE PRESSE
   Registre editorial : la couverture a gauche, le contexte a droite, une
   filet entre les deux entrees. Les Unes restent en couleur — c'est ce qui
   les rend probantes.
   ======================================== */
.unes { display: grid; gap: 56px; }
.une {
  display: grid;
  grid-template-columns: minmax(0, 0.72fr) minmax(0, 1.28fr);
  gap: 52px;
  align-items: center;
}
.une + .une { padding-top: 56px; border-top: 1px solid var(--gray-200); }
.une-visuel { margin: 0; }
.une-visuel img { width: 100%; height: auto; display: block; }
.une-source {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--gray-500);
  margin: 0 0 14px;
}
.une-texte h3 {
  font-family: var(--font-heading);
  font-size: clamp(1.375rem, 2.3vw, 1.75rem);
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.25;
  color: var(--navy);
  margin: 0 0 16px;
}
.une-texte p { font-size: 1.0625rem; line-height: 1.7; color: var(--gray-600); margin: 0; }
.une-liens { display: flex; flex-wrap: wrap; gap: 26px; margin-top: 22px !important; }
.une-liens a {
  font-size: 0.9375rem;
  color: var(--blue);
  text-decoration: none;
  border-bottom: 1px solid rgba(0, 70, 255, 0.3);
  transition: border-color 0.25s ease;
}
.une-liens a:hover { border-bottom-color: var(--blue); }

/* Plateaux : le nom du media porte, la ligne explique. */
.plateaux { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: 0; }
.plateau { padding: 0 30px; border-left: 1px solid var(--gray-200); }
.plateau:first-child { padding-left: 0; border-left: 0; }
.plateau:last-child { padding-right: 0; }
.plateau-nom {
  display: block;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 1.0625rem;
  letter-spacing: -0.01em;
  color: var(--navy);
  margin-bottom: 10px;
}
.plateau p { font-size: 0.9375rem; line-height: 1.65; color: var(--gray-600); margin: 0; }

/* Sur la page presse, la bande de logos dit l'etendue quand les Unes disent
   la preuve. Le gris les unifie — onze logos en couleur feraient du bruit —
   mais a 0,55 ils s'effacaient : on remonte a 0,72. */
/* Grille de sequences TV : chaque carte porte une capture reelle du plateau,
   le nom de l antenne et un lien vers la sequence. Aucun embarquement — la
   page ne charge aucun script tiers, une revue de presse n a pas a couter
   500 Ko de lecteur video. */
.seqs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 34px; margin-bottom: 52px; }
.seq { text-decoration: none; color: inherit; display: block; }
.seq-visuel {
  position: relative; margin: 0 0 18px;
  border-radius: 4px; overflow: hidden;
  background: var(--gray-100);
}
.seq-visuel img { width: 100%; height: auto; display: block; transition: transform 0.5s cubic-bezier(0.16,1,0.3,1); }
.seq:hover .seq-visuel img { transform: scale(1.03); }
.seq-play {
  position: absolute; inset: 0; margin: auto;
  width: 48px; height: 48px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: rgba(255,255,255,0.92); color: var(--navy);
  box-shadow: 0 6px 24px rgba(0, 13, 43, 0.24);
  transition: transform 0.3s cubic-bezier(0.16,1,0.3,1), background 0.3s ease;
}
.seq:hover .seq-play { transform: scale(1.1); background: #fff; }
.seq-source {
  font-size: 0.6875rem; text-transform: uppercase; letter-spacing: 0.14em;
  color: var(--gray-500); margin: 0 0 8px;
}
.seq h3 {
  font-family: var(--font-heading);
  font-size: 1.0625rem; font-weight: 600; letter-spacing: -0.01em;
  line-height: 1.35; color: var(--navy); margin: 0 0 8px;
}
.seq-texte { font-size: 0.9375rem; line-height: 1.6; color: var(--gray-600); margin: 0; }
.seq-go { display: inline-block; margin-top: 14px; font-size: 0.875rem; font-weight: 600; color: var(--blue); }
.seq-go em { font-style: normal; display: inline-block; transition: transform 0.3s ease; }
.seq:hover .seq-go em { transform: translateX(4px); }
.plateau p a { color: var(--blue); text-decoration: none; border-bottom: 1px solid rgba(0, 70, 255, 0.3); }
.plateau p a:hover { border-bottom-color: var(--blue); }

.presse-bande--centre { justify-content: center; gap: 44px 52px; }
.presse-bande--centre img { opacity: 0.72; height: 30px; }

@media (max-width: 900px) {
  .unes { gap: 40px; }
  .une { grid-template-columns: minmax(0, 1fr); gap: 26px; }
  .une + .une { padding-top: 40px; }
  /* La couverture illustre : elle ne doit pas occuper un ecran entier. */
  .une-visuel { max-width: 260px; }
  .seqs { grid-template-columns: minmax(0, 1fr); gap: 30px; margin-bottom: 38px; }
  .plateaux { grid-template-columns: repeat(2, 1fr); gap: 28px 24px; }
  .plateau { padding: 0; border-left: 0; padding-top: 18px; border-top: 1px solid var(--gray-200); }
  .plateau:first-child { padding-left: 0; }
  .presse-bande--centre { gap: 26px 32px; }
}
@media (max-width: 560px) {
  .plateaux { grid-template-columns: minmax(0, 1fr); }
}


/* Avis de traduction sur les pages legales : la version francaise fait foi.
   Une traduction de document juridique est une commodite, pas un contrat. */
.avis-langue {
  margin: 0 0 34px;
  padding: 14px 18px;
  border-left: 2px solid var(--navy);
  background: var(--off-white);
  font-size: 0.875rem;
  line-height: 1.65;
  color: var(--gray-600);
}
.avis-langue a { color: var(--blue); text-decoration: none; border-bottom: 1px solid rgba(0, 70, 255, 0.3); }
.avis-langue a:hover { border-bottom-color: var(--blue); }


/* ========================================
   LE GROUPE : les intervenants
   ======================================== */
.gr-team { overflow: hidden; }

/* Le filet ouvre la section : il portait le label, il tient seul. */
.gr-team > .container:first-child {
  border-top: 1px solid var(--gray-200);
  padding-top: 44px;
}

.grt-titre {
  margin: 0;
  font-family: var(--font-heading);
  /* Deux lignes a toutes les largeurs : le titre fait 905 px sur une ligne a
     36 px, il faut donc une boite d'au moins la moitie de sa longueur. */
  font-size: clamp(1.4375rem, 3.05vw, 2.625rem);
  font-weight: 700;
  line-height: 1.08;
  letter-spacing: -0.03em;
  color: var(--navy);
  text-wrap: balance;
  max-width: 700px;
}

/* Le chapo, numerote, en colonne etroite */
.grt-chapo {
  margin: 26px 0 0;
  max-width: 68ch;
}
.grt-chapo p { font-size: 1.0625rem; line-height: 1.68; }
.grt-num {
  flex: none;
  padding-top: 4px;
  font-family: var(--font-heading);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  color: var(--gray-500);
}
.grt-chapo p {
  margin: 0;
  font-size: 1rem;
  line-height: 1.66;
  color: var(--gray-600);
}
.grt-chapo strong { color: var(--navy); font-weight: 600; }

.grt-souslabel {
  margin: 56px 0 20px;
  font-family: var(--font-heading);
  font-size: 0.6875rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--gray-500);
}

/* La piste : elle court jusqu'au bord de l'ecran, les cartes se coupent
   a droite pour dire qu'il y en a d'autres. Meme calcul de marge que
   les panneaux de navigation. */
/* fondu aux deux bords : les cartes entrent et sortent sans coupure nette,
   meme traitement que le bandeau de photos plus haut dans la page */
.grt-piste-zone {
  width: 100%;
  margin-top: 14px;
  -webkit-mask-image: linear-gradient(to right, transparent, #000 5%, #000 95%, transparent);
          mask-image: linear-gradient(to right, transparent, #000 5%, #000 95%, transparent);
}
.grt-piste {
  display: flex;
  width: max-content;
  gap: 18px;
  margin: 0;
  padding: 0;
  list-style: none;
  /* meme mecanique que les bandeaux de photos : la serie est dupliquee,
     on la fait glisser d'une demie et le raccord ne se voit pas */
  animation: grw-defile var(--d, 132s) linear infinite;
}

/* Meme gabarit que les vignettes du bandeau au-dessus (132 px), en portrait :
   plus grandes, elles ecrasaient le reste de la section. */
.grg {
  flex: 0 0 132px;
  margin: 0;
}
.grg-cadre {
  display: block;
  overflow: hidden;
  border-radius: 8px;
  background: var(--gray-100);
}
.grg-photo {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  object-position: center 14%;
  filter: contrast(1.05);
  transition: transform 0.85s cubic-bezier(0.16, 1, 0.3, 1), filter 0.5s ease;
}
.grg-nom {
  margin: 15px 0 0;
  font-family: var(--font-heading);
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: -0.01em;
  color: var(--navy);
}
.grg-rang {
  margin: 5px 0 0;
  font-size: 0.8125rem;
  line-height: 1.35;
  color: var(--gray-500);
}

/* L'appel a l'action est separe des fleches : les unes font naviguer,
   l'autre engage. Les melanger sur une meme ligne brouillait les deux. */
.grt-appel {
  margin-top: 52px;
  padding-top: 38px;
  border-top: 1px solid var(--gray-200);
}

@media (max-width: 900px) {
  .grt-chapo { margin-top: 26px; }
  .grt-souslabel { margin: 40px 0 16px; }
}
@media (max-width: 560px) {
  .grt-chapo { gap: 14px; }
  .grt-chapo p { font-size: 0.9375rem; }
  .grt-piste { gap: 13px; }
  .grg { flex-basis: 104px; }
}

/* La bande des quarante, desormais dans la section des intervenants :
   elle illustre le premier paragraphe, les portraits nommes illustrent le second.
   Sur fond clair les vignettes ont besoin d'un peu plus de contraste. */
.gr-team .grw-bande { margin: 46px 0 14px; }
.gr-team .grw-rangee img {
  opacity: 1;
  filter: grayscale(1) contrast(1.06);
  border-radius: 4px;
}


/* ========================================
   LE GROUPE : recit et compacite
   ======================================== */
/* Cinq metiers empiles faisaient 1175 px, soit 1,3 ecran a parcourir.
   En trois colonnes la section tient d'un seul regard. */
@media (min-width: 901px) {
  .gr-metiers {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 40px 38px;
  }
  .gr-metier { display: block; }
  .gr-metier .grm-num { display: block; margin-bottom: 12px; }
  .gr-metier .grm-corps { padding: 0; }
}

@media (min-width: 621px) and (max-width: 900px) {
  .gr-metiers {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 34px 32px;
  }
  .gr-metier { display: block; }
  .gr-metier .grm-num { display: block; margin-bottom: 10px; }
  .gr-metier .grm-corps { padding: 0; }
}

/* Le recit : une colonne de lecture, pas une frise sans contenu */
.grr-texte { max-width: 68ch; margin: 0 auto; }
.grr-texte p {
  margin: 0 0 20px;
  font-size: 1.0625rem;
  line-height: 1.72;
  color: var(--gray-600);
}
.grr-texte p:last-child { margin-bottom: 0; }
.grr-texte strong { color: var(--navy); font-weight: 600; }
.grr-texte em { font-style: italic; }

.grr-chiffres {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 28px;
  max-width: 68ch;
  margin: 46px auto 0;
  padding-top: 34px;
  border-top: 1px solid var(--gray-200);
  list-style: none;
}
.grr-chiffres li { margin: 0; }
.grrc-nb {
  display: block;
  font-family: var(--font-heading);
  font-size: 1.5rem;
  font-weight: 700;
  letter-spacing: -0.025em;
  color: var(--navy);
}
.grrc-lb {
  display: block;
  margin-top: 5px;
  font-size: 0.875rem;
  line-height: 1.45;
  color: var(--gray-500);
}
@media (max-width: 620px) {
  .grr-chiffres { grid-template-columns: 1fr; gap: 18px; }
  .grr-texte p { font-size: 1rem; }
}


/* ========================================
   ENCARTS SOMBRES : leur propre lumiere
   ======================================== */
/* Poses sur fond clair, ces encarts n'heritent pas du halo de .section-dark.
   Sur l'ancien fond bleu ils s'en passaient ; sur le quasi-noir ils devenaient
   des trous. Chacun porte donc sa propre source. */
.cta-panneau,
.article-cta--final,
.voie--top,
.choix-col--top,
.deroule li {
  background-color: var(--navy-deep);
  background-image: radial-gradient(ellipse 105% 85% at 14% -12%, rgba(0, 70, 255, 0.26) 0%, transparent 66%);
  background-repeat: no-repeat;
}
/* le pied de page est large : la source se place au centre et reste douce */
.footer {
  background-color: var(--navy-deep);
  background-image: radial-gradient(ellipse 70% 120% at 50% -30%, rgba(0, 70, 255, 0.18) 0%, transparent 70%);
  background-repeat: no-repeat;
}


/* ========================================
   WEBCONFERENCES
   ======================================== */
.conf-liste { display: flex; flex-direction: column; }
.conf {
  display: grid;
  /* le replay porte la ligne : il prend la moitie de la largeur, a gauche */
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  grid-template-rows: auto 1fr;
  gap: 0 52px;
  align-items: start;
  padding: 52px 0;
  border-top: 1px solid var(--gray-200);
}
.conf-video { grid-column: 1; grid-row: 1 / -1; }
.conf-num   { grid-column: 2; grid-row: 1; }
.conf-corps { grid-column: 2; grid-row: 2; }
.conf:last-child { border-bottom: 1px solid var(--gray-200); }
.conf-num {
  margin: 0 0 14px;
  font-family: var(--font-heading);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  color: var(--blue);
}
.conf-titre {
  margin: 0 0 14px;
  font-family: var(--font-heading);
  font-size: 1.375rem;
  font-weight: 600;
  line-height: 1.24;
  letter-spacing: -0.022em;
  color: var(--navy);
  text-wrap: balance;
}
.conf-chapo {
  margin: 0 0 20px;
  font-size: 1rem;
  line-height: 1.66;
  color: var(--gray-600);
  max-width: 62ch;
}
.conf-points { list-style: none; margin: 0 0 20px; padding: 0; }
.conf-points li {
  position: relative;
  margin: 0 0 8px;
  padding-left: 20px;
  font-size: 0.9375rem;
  line-height: 1.5;
  color: var(--gray-600);
}
.conf-points li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.62em;
  width: 9px;
  height: 1px;
  background: var(--blue);
}
.conf-meta {
  margin: 0;
  font-family: var(--font-heading);
  font-size: 0.6875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.13em;
  color: var(--gray-500);
}
/* emplacement du replay, en attente des identifiants Vimeo */
.conf-video {
  aspect-ratio: 16 / 9;
  border-radius: 6px;
  overflow: hidden;
  background: var(--gray-100);
}
.conf-video--attente {
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px dashed var(--gray-300);
  background: none;
}
.conf-video--attente span {
  font-family: var(--font-heading);
  font-size: 0.625rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--gray-500);
}


.conf-facade { border-radius: 6px; overflow: hidden; }
.conf-facade img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; }
.conf-video { align-self: start; }

/* le podcast */
.pod {
  display: grid;
  grid-template-columns: minmax(0, 300px) minmax(0, 1fr);
  gap: 56px;
  align-items: start;
}
/* la colonne de gauche se lit comme une pochette de disque :
   visuel, chiffres de la serie, puis les acces */
.pod-cote { display: flex; flex-direction: column; }
.pod-liens { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; margin-top: 26px; }
.pod-lien-2 {
  font-family: var(--font-heading); font-size: 0.75rem; font-weight: 600;
  color: var(--gray-600); border-bottom: 1px solid var(--gray-300);
  padding-bottom: 3px; transition: color 0.3s ease, border-color 0.3s ease;
}
.pod-lien-2:hover { color: var(--blue); border-color: var(--blue); }
.pod-pochette img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 10px;
  box-shadow: 0 22px 44px -22px rgba(0, 13, 43, 0.34);
}
.pod-titre {
  margin: 6px 0 14px;
  font-family: var(--font-heading);
  font-size: clamp(1.75rem, 3.4vw, 2.5rem);
  font-weight: 700;
  letter-spacing: -0.035em;
  color: var(--navy);
}
.pod-chapo {
  margin: 0 0 26px;
  font-size: 1.0625rem;
  line-height: 1.66;
  color: var(--gray-600);
  max-width: 46ch;
}
/* en colonne sous la pochette : trois lignes de fiche, pas trois blocs cote a cote */
.pod-chiffres {
  display: block;
  margin: 26px 0 0;
  padding: 0;
  border-top: 1px solid var(--gray-200);
  list-style: none;
}
.pod-chiffres li {
  display: flex; align-items: baseline; justify-content: space-between; gap: 14px;
  margin: 0; padding: 11px 0;
  border-bottom: 1px solid var(--gray-200);
}
.podc-nb {
  display: block;
  font-family: var(--font-heading);
  font-size: 1.375rem;
  font-weight: 700;
  letter-spacing: -0.025em;
  color: var(--navy);
}
.podc-lb {
  display: block; margin-top: 0; font-size: 0.75rem; color: var(--gray-500);
  text-transform: uppercase; letter-spacing: 0.11em; font-weight: 600;
  font-family: var(--font-heading);
}

.pode-titre {
  margin: 0 0 14px;
  font-family: var(--font-heading);
  font-size: 0.6875rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.15em; color: var(--gray-500);
}
.pod-episodes { list-style: none; margin: 0 0 28px; padding: 0; max-width: 52ch; }
.pod-episodes li { margin: 0; }
.pod-episodes a {
  display: flex; align-items: baseline; justify-content: space-between; gap: 20px;
  padding: 11px 0; border-bottom: 1px solid var(--gray-200);
  text-decoration: none; transition: color 0.22s ease;
}
.pod-episodes li:first-child a { border-top: 1px solid var(--gray-200); }
.pode-t { font-size: 0.9375rem; line-height: 1.4; color: var(--navy); }
.pode-d {
  flex: none; font-family: var(--font-heading); font-size: 0.75rem;
  color: var(--gray-500); font-variant-numeric: tabular-nums;
}
.pod-episodes a:hover .pode-t { color: var(--blue); }
.pod-episodes a:hover .pode-d { color: var(--blue); }

@media (max-width: 760px) {
  .pod { grid-template-columns: 1fr; gap: 30px; }
  .pod-pochette { max-width: 190px; }
}

@media (max-width: 900px) {
  .conf {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto auto auto;
    gap: 18px 0; padding: 36px 0;
  }
  .conf-video { grid-column: 1; grid-row: 1; }
  .conf-num   { grid-column: 1; grid-row: 2; margin: 0; }
  .conf-corps { grid-column: 1; grid-row: 3; }
  .conf-titre { font-size: 1.1875rem; }
}


/* ========================================
   OPTIN REPLAY
   ======================================== */
.optin { position: fixed; inset: 0; z-index: 9999; display: flex; align-items: center; justify-content: center; padding: 24px; }
.optin[hidden] { display: none; }
.optin-voile { position: absolute; inset: 0; background: rgba(4, 9, 26, 0.86); cursor: pointer; }
.optin-boite {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 440px;
  padding: 40px 40px 32px;
  background: var(--white);
  border-radius: 10px;
  box-shadow: 0 30px 70px -20px rgba(0, 13, 43, 0.45);
  animation: optin-entre 0.34s cubic-bezier(0.16, 1, 0.3, 1) both;
}
@keyframes optin-entre { from { opacity: 0; transform: translateY(14px) scale(0.985); } to { opacity: 1; transform: none; } }
.optin-fermer {
  position: absolute; top: 14px; right: 14px;
  width: 34px; height: 34px; display: inline-flex; align-items: center; justify-content: center;
  padding: 0; background: none; border: 0; border-radius: 4px;
  color: var(--gray-500); cursor: pointer; transition: color 0.2s ease, background 0.2s ease;
}
.optin-fermer:hover { color: var(--navy); background: var(--gray-100); }
.optin-boite h2 {
  margin: 6px 0 10px;
  font-family: var(--font-heading);
  font-size: 1.375rem; font-weight: 600; line-height: 1.24;
  letter-spacing: -0.022em; color: var(--navy);
}
.optin-chapo { margin: 0 0 24px; font-size: 0.9375rem; line-height: 1.55; color: var(--gray-600); }
.optin-form { display: grid; gap: 16px; }
.optin-form .champ { display: grid; gap: 7px; }
.optin-form label {
  font-family: var(--font-heading);
  font-size: 0.6875rem; font-weight: 600; text-transform: uppercase;
  letter-spacing: 0.11em; color: var(--gray-500);
}
.optin-form input {
  font-family: var(--font-body); font-size: 1rem; color: var(--navy);
  padding: 13px 16px; border: 1px solid var(--gray-200); border-radius: 4px;
  background: var(--white); width: 100%;
  transition: border-color 0.18s ease, box-shadow 0.18s ease;
}
.optin-form input:focus {
  outline: none; border-color: var(--blue); box-shadow: 0 0 0 3px rgba(0, 70, 255, 0.10);
}
.optin-form input.est-en-erreur { border-color: #C0392B; }
.optin-form .btn { width: 100%; justify-content: center; margin-top: 4px; }
.optin-err { margin: 0; font-size: 0.8125rem; color: #C0392B; }
.optin-mentions { margin: 16px 0 0; font-size: 0.75rem; color: var(--gray-500); text-align: center; }

/* la vignette verrouillee porte un cadenas discret */
.conf-facade { position: relative; cursor: pointer; }
.conf-facade.est-verrouille::after {
  content: 'Replay';
  position: absolute; left: 12px; bottom: 12px;
  padding: 5px 10px; border-radius: 3px;
  background: rgba(4, 9, 26, 0.72);
  font-family: var(--font-heading); font-size: 0.5625rem; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.14em; color: #fff;
}

@media (max-width: 480px) {
  .optin-boite { padding: 34px 24px 26px; }
  .optin-boite h2 { font-size: 1.1875rem; }
}


/* ========================================
   CAS CLIENTS : cartes et dossier
   ======================================== */
.cas-zone {
  padding: 4px 0 6px;
  overflow: hidden;
  touch-action: pan-y;          /* le glissement horizontal nous revient, le vertical reste a la page */
  cursor: grab;
}
.cas-zone.cas-tire { cursor: grabbing; }
.cas-zone.cas-tire .cas-carte { transition: none; }
.cas-rail {
  display: flex; align-items: stretch; gap: 22px;
  width: max-content; margin: 0; padding: 0; list-style: none;
  will-change: transform;
}
.cas-rail > li { display: flex; flex: 0 0 clamp(262px, 27vw, 330px); min-width: 0; margin: 0; }
.cas-rail img { pointer-events: none; -webkit-user-drag: none; user-select: none; }

/* la carte : une page de dossier posee sur le fond de section.
   Pas de coin arrondi ni de filet : c'est le blanc et le blanc-casse qui separent. */
.cas-carte {
  display: flex; flex-direction: column; width: 100%; padding: 0; text-align: left;
  background: var(--white);
  border: 0; border-radius: 2px;
  overflow: hidden; cursor: pointer;
  box-shadow: 0 1px 3px rgba(0, 25, 76, 0.05);
  transition: box-shadow 0.45s ease, transform 0.45s cubic-bezier(0.16, 1, 0.3, 1);
}
.cas-vue { display: block; position: relative; overflow: hidden; background: var(--gray-100); }
.cas-vue img {
  display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover;
  object-position: center 20%;
  filter: grayscale(0.82) contrast(1.05);
  transition: transform 0.9s cubic-bezier(0.16, 1, 0.3, 1), filter 0.6s ease;
}
/* le bas de l'image se fond dans la page du dossier */
.cas-vue::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(to top, var(--white) 0%, rgba(255, 255, 255, 0.62) 12%, transparent 34%);
}
.cas-play {
  position: absolute; right: 16px; top: 16px; z-index: 1;
  display: flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; border-radius: 50%;
  background: rgba(255, 255, 255, 0.9); color: var(--navy); padding-left: 2px;
  transition: background 0.35s ease, color 0.35s ease;
}
.cas-corps {
  display: flex; flex-direction: column; flex: 1;
  padding: 6px 24px 20px; position: relative; z-index: 1;
}
.cas-qui {
  display: block; margin-bottom: 10px;
  font-family: var(--font-heading); font-size: 0.625rem; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.18em; color: var(--gray-500);
}
.cas-chiffre {
  display: block; font-family: var(--font-heading); font-size: 0.9375rem;
  font-weight: 500; line-height: 1.4; letter-spacing: -0.01em;
  color: var(--navy); text-wrap: balance;
}
/* le chiffre porte la carte : il sort du corps de texte */
.cas-chiffre b {
  display: block; margin-bottom: 3px;
  font-size: 2.35em; font-weight: 800; line-height: 0.94; letter-spacing: -0.045em;
  color: var(--blue);
}
.cas-desc {
  display: block; margin-top: 14px; padding-top: 14px;
  border-top: 1px solid var(--gray-200);
  font-size: 0.78125rem; line-height: 1.58; color: var(--gray-600);
}
.cas-lire {
  display: inline-flex; align-items: center; gap: 7px; align-self: flex-start;
  margin-top: auto; padding-top: 16px;
  font-family: var(--font-heading); font-size: 0.6875rem; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.14em; color: var(--navy);
}
.cas-lire::after {
  content: '\2192'; font-size: 1.15em; letter-spacing: 0;
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}
@media (hover: hover) and (pointer: fine) {
  .cas-carte:hover {
    box-shadow: 0 16px 38px rgba(0, 25, 76, 0.11);
    transform: translateY(-4px);
  }
  .cas-carte:hover .cas-vue img { transform: scale(1.05); filter: grayscale(0) contrast(1.02); }
  .cas-carte:hover .cas-play { background: var(--blue); color: var(--white); }
  .cas-carte:hover .cas-lire { color: var(--blue); }
  .cas-carte:hover .cas-lire::after { transform: translateX(4px); }
}
.cas-carte:focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; }
.cas-note {
  max-width: 620px; margin: 34px auto 0;
  font-size: 0.8125rem; line-height: 1.6; color: var(--gray-500); text-align: center;
}

/* la fiche en surimpression */
.dossier { position: fixed; inset: 0; z-index: 9998; display: flex; align-items: center; justify-content: center; padding: 24px; }
.dossier[hidden] { display: none; }
.dossier-voile { position: absolute; inset: 0; background: rgba(4, 9, 26, 0.86); cursor: pointer; }
.dossier-boite {
  position: relative; z-index: 1; width: 100%; max-width: 720px;
  max-height: calc(100vh - 48px); max-height: calc(100dvh - 48px);
  overflow-y: auto; overscroll-behavior: contain;
  padding: 46px 48px 42px; background: var(--white); border-radius: 10px;
  box-shadow: 0 30px 70px -20px rgba(0, 13, 43, 0.45);
  animation: optin-entre 0.34s cubic-bezier(0.16, 1, 0.3, 1) both;
}
.dossier-fermer {
  position: absolute; top: 14px; right: 14px; width: 34px; height: 34px;
  display: inline-flex; align-items: center; justify-content: center;
  padding: 0; background: var(--white); border: 0; border-radius: 4px;
  color: var(--gray-500); cursor: pointer; z-index: 2;
  transition: color 0.2s ease, background 0.2s ease;
}
.dossier-fermer:hover { color: var(--navy); background: var(--gray-100); }
.dos-qui {
  margin: 0 0 8px; font-family: var(--font-heading); font-size: 0.6875rem;
  font-weight: 600; text-transform: uppercase; letter-spacing: 0.15em; color: var(--gray-500);
}
.dos-chiffre {
  margin: 0 0 26px; font-family: var(--font-heading); font-size: 1.5rem;
  font-weight: 600; line-height: 1.26; letter-spacing: -0.025em; color: var(--navy);
}
.dos-chiffre b { font-size: 1.55em; font-weight: 800; letter-spacing: -0.045em; color: var(--blue); margin-right: 0.12em; }
.dos-video { border-radius: 8px; overflow: hidden; margin-bottom: 30px; }
.dos-video img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; }
.dos-texte { margin: 0; }
.dos-texte > div { padding: 18px 0; border-top: 1px solid var(--gray-200); }
.dos-texte > div:last-child { border-bottom: 1px solid var(--gray-200); }
.dos-texte dt {
  margin-bottom: 6px; font-family: var(--font-heading); font-size: 0.6875rem;
  font-weight: 700; text-transform: uppercase; letter-spacing: 0.14em; color: var(--blue);
}
.dos-texte dd { margin: 0; font-size: 1rem; line-height: 1.62; color: var(--gray-600); }
.dos-texte dd em { font-style: italic; color: var(--navy); }
.dos-pied {
  margin: 22px 0 0;
  font-size: 0.75rem; line-height: 1.55; color: var(--gray-500);
}

/* Le dossier en deux colonnes des qu'il y a la place : la video et le chiffre a
   gauche, la lecture a droite. Le selecteur porte :not([hidden]) — poser un
   display sur .dos-fiche ecraserait l'attribut hidden des sept autres fiches. */
@media (min-width: 900px) {
  .dossier-boite { max-width: 1060px; padding: 44px 46px 40px; }
  .dos-fiche:not([hidden]) {
    display: grid;
    grid-template-columns: minmax(0, 0.92fr) minmax(0, 1fr);
    /* rangees explicites : sans elles, '1 / -1' ne couvre qu'une rangee et la
       colonne de gauche se retrouve poussee sous la hauteur du texte */
    grid-template-rows: auto auto auto 1fr;
    column-gap: 48px;
    align-items: start;
  }
  .dos-qui     { grid-column: 1; grid-row: 1; }
  .dos-chiffre { grid-column: 1; grid-row: 2; }
  .dos-video   { grid-column: 1; grid-row: 3; }
  /* la colonne de lecture est plus haute : la note se cale en pied de grille,
     le vide devient une respiration et non une colonne qui s'arrete court */
  .dos-pied    { grid-column: 1; grid-row: 4; align-self: end; margin-top: 28px; }
  .dos-texte   { grid-column: 2; grid-row: 1 / -1; }
  .dos-video { margin-bottom: 0; }
  .dos-chiffre { margin-bottom: 22px; }
  .dos-pied { margin-top: 20px; }
  /* les blocs de lecture ne doivent pas ouvrir sur un filet en haut de colonne */
  .dos-texte > div:first-child { padding-top: 0; border-top: 0; }
}

/* passer d'un dossier a l'autre sans refermer : la barre vit dans la boite,
   pas dans une fiche, elle survit donc au changement */
.dos-nav {
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
  margin-top: 34px; padding-top: 22px;
  border-top: 1px solid var(--gray-200);
}
.dosn {
  display: flex; flex-direction: column; gap: 5px; min-width: 0; max-width: 42%;
  padding: 0; background: none; border: 0; cursor: pointer; text-align: left;
}
.dosn--suiv { text-align: right; align-items: flex-end; }
.dosn-lb {
  font-family: var(--font-heading); font-size: 0.625rem; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.16em; color: var(--gray-500);
  transition: color 0.3s ease;
}
.dosn-nom {
  max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-family: var(--font-heading); font-size: 0.875rem; font-weight: 600;
  line-height: 1.3; color: var(--navy); transition: color 0.3s ease;
}
.dosn:hover .dosn-nom, .dosn:hover .dosn-lb { color: var(--blue); }
.dosn:focus-visible { outline: 2px solid var(--blue); outline-offset: 4px; }
.dos-rang {
  flex: 0 0 auto;
  font-family: var(--font-heading); font-size: 0.6875rem; font-weight: 600;
  letter-spacing: 0.1em; color: var(--gray-500); font-variant-numeric: tabular-nums;
}

@media (max-width: 620px) {
  /* deux noms ne tiennent pas cote a cote : on garde les reperes */
  .dosn-nom { display: none; }
  .dosn { max-width: none; }
  .dos-nav { margin-top: 26px; padding-top: 18px; }
}

@media (max-width: 620px) {
  .cas-rail { gap: 16px; }
  .dossier-boite { padding: 40px 22px 28px; }
  .dos-chiffre { font-size: 1.25rem; }
}


/* ========================================
   HERO — MUR DE CLIENTS
   Le portrait a cede la place a une matiere de fond : trois colonnes de
   vignettes clients, calees sur le bord droit du conteneur. Les bords sont
   decoupes par un masque et non par des aplats, pour que le mur se dissolve
   dans le degrade du hero au lieu de le recouvrir.
   ======================================== */
.hm-cadre {
  position: absolute;
  top: 0;
  bottom: 0;
  right: max(16px, calc(50% - 616px));
  width: min(506px, 37vw);
  z-index: 0;
  pointer-events: none;
  /* masque vertical porte par le cadre, masque horizontal par le mur : deux
     couches separees plutot qu'un mask-composite, dont le rendu varie */
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, transparent 16%, #000 35%, #000 87%, transparent 100%);
  mask-image: linear-gradient(to bottom, transparent 0, transparent 16%, #000 35%, #000 87%, transparent 100%);
}
.hm-mur {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  height: 100%;
  overflow: hidden;
  /* bord gauche a peine adouci, sur 8 px : les legendes commencent a 8 px du
     bord des vignettes et doivent rester nettes */
  -webkit-mask-image: linear-gradient(to right, rgba(0, 0, 0, 0.35) 0, #000 8px, #000 95%, rgba(0, 0, 0, 0.65) 100%);
  mask-image: linear-gradient(to right, rgba(0, 0, 0, 0.35) 0, #000 8px, #000 95%, rgba(0, 0, 0, 0.65) 100%);
}
.hm-col { display: flex; flex-direction: column; gap: 18px; will-change: transform; }
/* chaque colonne part d'une hauteur differente : le mur ne se lit pas en lignes */
.hm-col--a { margin-top: -34px; }
.hm-col--b { margin-top: -146px; }
.hm-col--c { margin-top: -88px; }
/* un format par vignette : portrait, carre, paysage, ils s'imbriquent */
.hm-col .hm-tuile { flex: 0 0 auto; aspect-ratio: var(--ar, 4/5); }
.hm-anim .hm-col--a { animation: hmDefile 64s linear infinite; }
.hm-anim .hm-col--b { animation: hmDefile 82s linear infinite reverse; }
.hm-anim .hm-col--c { animation: hmDefile 70s linear infinite; }
/* la liste est doublee dans le HTML : a -50 % la boucle se referme sans saut */
@keyframes hmDefile {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(0, -50%, 0); }
}
/* la lueur rattache la matiere au bleu du hero */
.hm-halo {
  position: absolute;
  inset: -18% -24% -18% -40%;
  z-index: 0;
  pointer-events: none;
  background: radial-gradient(60% 48% at 76% 52%, rgba(0, 70, 255, 0.24), transparent 74%);
  filter: blur(22px);
}

.hm-tuile {
  position: relative;
  margin: 0;
  border-radius: 10px;
  overflow: hidden;
  background: #070f26;
  box-shadow: 0 14px 40px rgba(0, 0, 0, 0.5), inset 0 0 0 1px rgba(255, 255, 255, 0.06);
  opacity: 0;
  transform: translateY(22px) scale(0.985);
  animation: hmEntre 0.85s cubic-bezier(0.22, 1, 0.36, 1) forwards;
  animation-delay: calc(var(--d) + 0.35s);
  transition: transform 0.9s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.9s ease;
}
@keyframes hmEntre { to { opacity: 1; transform: none; } }
/* une fois l'entree jouee, main.js libere transform pour la mise en lumiere */
.hm-pret .hm-tuile { animation: none; opacity: 1; transform: none; }
/* liseré interieur, au-dessus de l'image : l'effet verre */
.hm-tuile::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 3;
  border-radius: inherit;
  pointer-events: none;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.07), inset 0 1px 0 rgba(255, 255, 255, 0.08);
}
/* au repos : noir et blanc, nettement assombri. Cadrage remonte : la bande
   basse des photogrammes porte les sous-titres incrustes des videos source */
.hm-tuile img {
  display: block;
  width: 100%;
  height: 118%;
  object-fit: cover;
  /* --fx : position horizontale du visage, posee vignette par vignette */
  object-position: var(--fx, 50%) top;
  filter: grayscale(1) contrast(1.05) brightness(0.38);
  transition: filter 0.9s ease, transform 6s linear;
}
.hm-voile {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(3, 11, 32, 0) 40%, rgba(3, 11, 32, 0.55) 72%, rgba(3, 11, 32, 0.9) 100%);
}
.hm-tuile figcaption { position: absolute; left: 12px; right: 12px; bottom: 11px; z-index: 2; }
/* tout le texte reste visible ; la vignette en lumiere le porte a pleine intensite */
.hm-chiffre {
  display: block;
  color: var(--white);
  font-size: 10.5px;
  line-height: 1.2;
  text-shadow: 0 1px 10px rgba(3, 11, 32, 0.9);
  opacity: 0.8;
  transition: opacity 0.9s ease;
}
.hm-chiffre b { display: block; font-size: 1.6em; font-weight: 700; line-height: 1; letter-spacing: -0.02em; }
.hm-det { display: block; margin-top: 3px; line-height: 1.2; opacity: 0.85; transition: opacity 0.9s ease; }
.hm-qui {
  display: block;
  margin-top: 3px;
  font-size: 10px;
  line-height: 1.2;
  letter-spacing: 0.01em;
  color: var(--gray-300);
  text-shadow: 0 1px 8px rgba(3, 11, 32, 0.9);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  opacity: 0.85;
  transition: opacity 0.9s ease;
}
/* vignettes paysage, les plus basses : trois lignes y couvraient le visage */
.hm-tuile[style*="16/11"] .hm-det { display: none; }
/* la mise en lumiere : une seule vignette a la fois, en couleur, legerement
   avancee, avec un double liseré bleu separe de l'image par un vide */
.hm-tuile.hm-vedette {
  z-index: 2;
  transform: scale(1.04);
  box-shadow:
    0 0 0 3px #030b20,
    0 0 0 4px rgba(107, 159, 255, 0.85),
    0 18px 50px rgba(0, 70, 255, 0.32),
    0 10px 30px rgba(0, 0, 0, 0.5);
}
.hm-tuile.hm-vedette img { filter: grayscale(0) contrast(1.04) brightness(1); transform: scale(1.06); }
.hm-tuile.hm-vedette .hm-chiffre,
.hm-tuile.hm-vedette .hm-det,
.hm-tuile.hm-vedette .hm-qui { opacity: 1; }

@media (max-width: 900px) {
  /* le mur passe sous le texte, cale sur le bas du hero, la ou etait le portrait */
  .hm-cadre {
    top: auto;
    bottom: 0;
    left: 0;
    right: 0;
    width: auto;
    height: 238px;
    -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 36%);
    mask-image: linear-gradient(to bottom, transparent 0, #000 36%);
  }
  /* sur 375 px le fondu lateral mangeait la largeur : bande reguliere */
  .hm-mur { gap: 8px; -webkit-mask-image: none; mask-image: none; }
  .hm-col { gap: 8px; }
  .hm-col--a { margin-top: -30px; }
  .hm-col--b { margin-top: -74px; }
  .hm-col--c { margin-top: -52px; }
  .hm-halo { inset: -24% -14%; }
  .hm-tuile figcaption { left: 7px; right: 7px; bottom: 6px; }
  .hm-chiffre { font-size: 9px; }
  .hm-qui { font-size: 7.5px; }
}

/* ========================================
   HERO MOBILE — LA PREUVE EN DEFILEMENT CONTINU
   Sur telephone, le mur de trois colonnes devenait une bande de vignettes
   illisibles. A la place : des cartes en grand, qui glissent sans arret ;
   celle qui passe au centre grandit, reprend sa couleur et devoile son
   chiffre. Echelle, opacite et legende sont pilotees image par image par
   main.js ; seule la couleur bascule en CSS, un filtre anime coutant cher.
   Le carrousel est construit a partir du mur : une seule source pour les
   vignettes, et sans JavaScript l'ancienne bande reste en place.
   ======================================== */
.hm-carrousel { display: none; }

@media (max-width: 900px) {
  .hero-home.hm-mobile .hm-cadre { display: none; }
  /* le hero entier doit tenir dans le premier ecran du telephone : marges
     resserrees sous la barre, entre les blocs et en bas */
  .hero-home.hm-mobile { padding-bottom: 22px; min-height: 0; }
  .hero-home.hm-mobile .hm-carrousel + div { margin-top: 14px; row-gap: 8px; }
  .hero-home.hm-mobile .hero-badges { margin-top: 16px; }
  /* petit ecran : le carrousel est passe sous les boutons */
  .hm-carrousel.hm-sous-boutons { margin-top: 22px; }
  /* la piste fait trente cartes de large : sans ces deux lignes, la colonne de
     grille s'etirait a sa largeur minimale de contenu et le texte du hero
     sortait de l'ecran par la droite */
  .hero-home.hm-mobile .hero-grid { grid-template-columns: minmax(0, 1fr); }
  .hero-home.hm-mobile .hero-grid > div:first-child { min-width: 0; max-width: none; }

  .hm-carrousel {
    display: block;
    position: relative;
    /* place entre le sous-titre et les boutons */
    margin: 4px -24px 0;
    overflow: hidden;
    touch-action: pan-y;
    -webkit-user-select: none;
    user-select: none;
  }
  .hm-piste { display: flex; gap: 12px; will-change: transform; }
  /* de l'air en haut et en bas pour le liseré de la carte active */
  .hm-carrousel { padding: 6px 0; }

  .hm-carte {
    position: relative;
    /* deux cartes et demie a l'ecran, quelle que soit la position du defilement */
    /* en % de la piste, donc du bloc : 100vw comptait la barre de defilement */
    flex: 0 0 min(calc((100% - 34px) / 2.5), 260px);
    /* carre : au-dessus des boutons, chaque pixel de hauteur repousse l'appel
       a l'action sous la ligne de flottaison */
    aspect-ratio: 1 / 1;
    margin: 0;
    border-radius: 10px;
    overflow: hidden;
    background: #070f26;
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.45);
    transform: scale(0.96);
    opacity: 0.72;
    will-change: transform, opacity;
    transition: box-shadow 0.8s;
  }
  .hm-carte::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 3;
    border-radius: inherit;
    pointer-events: none;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.07), inset 0 1px 0 rgba(255, 255, 255, 0.08);
  }
  .hm-carte.hm-active {
    box-shadow:
      0 0 0 3px #030b20,
      0 0 0 4px rgba(107, 159, 255, 0.85),
      0 16px 40px rgba(0, 70, 255, 0.3);
  }
  .hm-carte img {
    display: block;
    width: 100%;
    height: 118%;
    object-fit: cover;
    object-position: var(--fx, 50%) top;
    filter: grayscale(1) contrast(1.05) brightness(0.5);
    transition: filter 1s ease;
  }
  .hm-carte.hm-active img { filter: grayscale(0) contrast(1.04) brightness(1); }
  .hm-carte-voile {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(3, 11, 32, 0) 42%, rgba(3, 11, 32, 0.6) 72%, rgba(3, 11, 32, 0.92) 100%);
  }
  .hm-carte figcaption {
    position: absolute;
    left: 10px;
    right: 10px;
    bottom: 10px;
    z-index: 2;
    opacity: 0;
  }
  .hm-carte-nb {
    display: block;
    color: var(--white);
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 1.4rem;
    line-height: 0.95;
    letter-spacing: -0.03em;
  }
  .hm-carte-det {
    display: block;
    margin-top: 3px;
    color: var(--gray-300);
    font-size: 0.71875rem;
    line-height: 1.2;
  }
  .hm-carte-qui {
    display: block;
    margin-top: 4px;
    font-size: 0.625rem;
    line-height: 1.2;
    letter-spacing: 0.01em;
    color: var(--gray-300);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
}

/* Menu mobile : les rubriques sans sous-menu (Résultats, Le Groupe) héritaient
   du gris de la barre défilée ; toutes passent au navy des rubriques à sous-menu */
@media (max-width: 768px) {
  .navbar .navbar-links > li:not(.navbar-cta):not(.nav-lang) > a,
  .navbar-transparent.scrolled .navbar-links > li:not(.navbar-cta):not(.nav-lang) > a { color: var(--navy); }
}

/* Textes juridiques officiels (copie conforme) : sous-titres d'articles et listes numérotées */
.legal-content h3 { margin-top: 28px; font-size: 1.125rem; }
.legal-content ol { margin: 16px 0 16px 24px; }
.legal-content li { margin: 6px 0; }