/* =================================================================
   FIINAFAS — PAGE D'ACCUEIL 2026
   Feuille de style autonome. Police unique : Poppins.
   Cards NETTES (pas de neumorphism). Corrections design actives.
   ================================================================= */

/* -----------------------------------------------------------------
   TOKENS
   ----------------------------------------------------------------- */
:root {
  /* Primaires */
  --color-coral: #f05742;
  --color-green: #6fcf97;
  --color-green-dark: #169d53;

  /* Teintes */
  --color-rose-light: #fcf2f0;
  --color-rose-medium: #facbc3;
  --color-green-light: #c3e8d2;
  --color-blue-light: #bfd2e4;
  --color-blue-grey: #7290ac;
  --color-gold: #f7c472;
  --color-orange: #ee9936;
  --color-teal: #4abea6;

  /* Couleurs SEGMENT (jamais les couleurs de marque Fiinafas) */
  --seg-hum: #EE9936;    /* ONG Humanitaires — Orange */
  --seg-dev: #4ABEA6;    /* ONG Développement — Teal */
  --seg-incub: #7290AC;  /* Incubateurs — Blue grey */
  --seg-incl: #91DFCF;   /* Inclusion financière — Cyan medium */
  /* variantes texte lisibles sur fond clair tinté */
  --seg-hum-text: #EE9936;
  --seg-dev-text: #4ABEA6;
  --seg-incub-text: #3f5d7a;
  --seg-incl-text: #91DFCF;

  /* Texte & fonds */
  --color-text-primary: #1E3549;
  --color-text-secondary: #7290ac;
  --color-bg-primary: #ffffff;

  /* Gradient CTA (seul gradient autorisé) */
  --gradient-cta: linear-gradient(135deg, #fdf0ee 0%, #e8f5ee 100%);

  /* Type */
  --font-main: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  /* Easing */
  --easing-apple: cubic-bezier(0.16, 1, 0.3, 1);
  --easing-out-quart: cubic-bezier(0.25, 1, 0.5, 1);
  --easing-inout: cubic-bezier(0.65, 0, 0.35, 1);

  /* Ombres NETTES (jamais neumorphiques, blur ≤ 40px) */
  --shadow-card: 0 8px 24px rgba(30, 53, 73, 0.08);
  --shadow-card-hover: 0 16px 40px rgba(30, 53, 73, 0.12);
  --shadow-stat: 0 8px 24px rgba(30, 53, 73, 0.06);
  --shadow-nav: 0 2px 16px rgba(30, 53, 73, 0.08);

  --nav-height: 72px;
}

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

/* Netteté absolue : aucun blur parasite nulle part */
* { filter: none; backdrop-filter: none; }

html { scroll-behavior: smooth; scroll-padding-top: calc(var(--nav-height) + 16px); }

body {
  font-family: var(--font-main);
  font-weight: 400;
  font-size: 16px;
  line-height: 1.6;
  color: var(--color-text-primary);
  background: var(--color-bg-primary);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img { max-width: 100%; display: block; object-fit: cover; }
a { color: inherit; text-decoration: none; }

.dot::after { content: '.'; color: var(--color-coral); }

/* -----------------------------------------------------------------
   LAYOUT
   ----------------------------------------------------------------- */
.container {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 24px;
}
.section {
  padding: 96px 0;
}
.section__head {
  max-width: 800px;
  margin-bottom: 56px;
}
.section__title {
  font-size: clamp(28px, 3.6vw, 38px);
  font-weight: 700;
  line-height: 1.18;
  letter-spacing: -0.4px;
  color: var(--color-text-primary);
}
.section__sub {
  font-size: clamp(16px, 2vw, 20px);
  color: var(--color-text-secondary);
  line-height: 1.5;
  margin-top: 16px;
  max-width: 720px;
}

/* -----------------------------------------------------------------
   REVEAL AU SCROLL
   ----------------------------------------------------------------- */
.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 760ms var(--easing-apple), transform 760ms var(--easing-apple);
  will-change: opacity, transform;
}
.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* -----------------------------------------------------------------
   BOUTONS
   ----------------------------------------------------------------- */
.btn {
  font-family: var(--font-main);
  font-size: 16px;
  font-weight: 600;
  line-height: 1;
  padding: 14px 32px;
  border-radius: 24px;
  border: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  white-space: nowrap;
  transition: background 320ms var(--easing-apple),
    transform 320ms var(--easing-apple), box-shadow 320ms var(--easing-apple), opacity 200ms ease;
}
.btn--primary { background: var(--color-green); color: #fff; }
.btn--primary:hover { background: var(--color-green-dark); transform: translateY(-2px); }
.btn--coral { background: var(--color-coral); color: #fff; }
.btn--coral:hover { opacity: 0.9; }
.btn--outline-white { background: #fff; color: var(--color-text-primary); }
.btn--outline-white:hover { transform: translateY(-2px); }
.btn--ghost {
  background: transparent;
  border: 1.5px solid var(--color-text-primary);
  color: var(--color-text-primary);
  border-radius: 10px;
  padding: 12px 24px;
}
.btn--ghost:hover { background: var(--color-text-primary); color: #fff; }
.btn--sm { padding: 10px 20px; font-size: 14px; }

.link-arrow {
  font-weight: 600;
  font-size: 15px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: gap 200ms var(--easing-apple), opacity 200ms ease;
}
.link-arrow:hover { gap: 10px; }

/* -----------------------------------------------------------------
   NAVBAR
   ----------------------------------------------------------------- */
.navbar {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  height: var(--nav-height);
  background: rgba(255, 255, 255, 0.001);
  transition: background 250ms ease, box-shadow 250ms ease, height 250ms ease;
}
.navbar__inner {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 24px;
  height: 100%;
  display: flex;
  align-items: center;
}
/* En haut de la hero : navbar transparente, texte blanc */
.navbar.is-top { background: transparent; }
.navbar.is-top .navbar__link,
.navbar.is-top .navbar__lang { color: #fff; }
.navbar.is-top .navbar__lang b { color: #fff; }
.navbar.is-top .logo { color: #fff; }
.navbar.is-top .navbar__burger span { background: #fff; }

/* Au scroll : verre dépoli discret (liquid glass), fallback blanc — barre flottante arrondie */
.navbar.is-scrolled {
  top: 10px;
  left: 50%;
  right: auto;
  transform: translateX(-50%);
  width: min(1180px, calc(100% - 32px));
  border-radius: 18px;
  background: #fff;
  box-shadow: var(--shadow-nav);
  height: 64px;
}
@supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) {
  .navbar.is-scrolled {
    background: rgba(255, 255, 255, 0.78);
    -webkit-backdrop-filter: blur(16px) saturate(1.6);
    backdrop-filter: blur(16px) saturate(1.6);
  }
}

.navbar__logo { flex-shrink: 0; margin-right: 40px; }
.navbar__links { display: flex; align-items: center; gap: 28px; list-style: none; margin-left: 120px; }
.navbar__link {
  font-size: 14px;
  font-weight: 500;
  color: var(--color-text-primary);
  display: inline-flex;
  align-items: center;
  gap: 5px;
  cursor: pointer;
  white-space: nowrap;
  transition: color 150ms ease, opacity 150ms ease;
}
.navbar__link:hover { color: var(--color-green); opacity: 1; }
.navbar.is-top .navbar__link:hover { opacity: 0.75; color: #fff; }
.navbar__actions { margin-left: auto; display: flex; align-items: center; gap: 16px; flex-shrink: 0; }
.navbar__lang { font-size: 13px; color: var(--color-text-secondary); white-space: nowrap; }
.navbar__lang b { color: var(--color-text-primary); font-weight: 600; }
/* Sélecteur de langue à drapeaux (visible sur mobile ET desktop) */
.navbar__flags { display: inline-flex; align-items: center; gap: 4px; }
.navbar__flag { display: inline-flex; align-items: center; justify-content: center; padding: 7px 3px; border-radius: 6px; opacity: 0.5; transition: opacity 180ms ease; }
.navbar__flag:hover { opacity: 0.85; }
.navbar__flag.is-active { opacity: 1; }
.navbar__flag-img { width: 26px; height: 18px; border-radius: 4px; display: block; box-shadow: 0 0 0 1px rgba(0,0,0,0.12); }
.navbar__flag.is-active .navbar__flag-img { box-shadow: 0 0 0 1px rgba(0,0,0,0.12), 0 0 0 2px var(--color-green); }

/* Dropdown */
.navbar__dd { position: relative; }
.navbar__dropdown {
  position: absolute;
  top: calc(100% + 16px);
  left: -12px;
  background: #fff;
  border: 1px solid rgba(30, 53, 73, 0.08);
  border-radius: 12px;
  box-shadow: var(--shadow-card);
  padding: 8px;
  min-width: 250px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: opacity 180ms ease, transform 180ms ease, visibility 180ms;
}
.navbar__dd:hover .navbar__dropdown,
.navbar__dd.is-open .navbar__dropdown { opacity: 1; visibility: visible; transform: translateY(0); }
.navbar__dropdown a {
  display: block;
  padding: 10px 12px;
  border-radius: 8px;
  font-size: 14px;
  color: var(--color-text-primary);
  transition: background 150ms ease, color 150ms ease;
}
.navbar__dropdown a:hover { background: var(--color-rose-light); color: var(--color-coral); }

/* Logo */
.logo {
  display: inline-flex; align-items: center; gap: 8px;
  font-weight: 700; font-size: 20px; letter-spacing: -0.5px;
  color: var(--color-text-primary);
}
.logo__mark {
  width: 32px; height: 32px; border-radius: 9px;
  background: var(--color-coral);
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-size: 15px; font-weight: 700; flex-shrink: 0;
  position: relative;
}
.logo__mark::after {
  content: 'LOGO';
  position: absolute; bottom: -13px; left: 50%; transform: translateX(-50%);
  font-size: 7px; font-weight: 600; letter-spacing: 1px;
  color: var(--color-text-secondary); font-family: ui-monospace, monospace;
}
.navbar.is-top .logo__mark::after { color: rgba(255,255,255,0.7); }
.logo--footer { color: #1E3549; }
.logo--footer .logo__mark::after { color: rgba(30,53,73,0.55); }

/* Focus visible — accessibilité clavier */
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: 2px solid var(--color-coral);
  outline-offset: 2px;
  border-radius: 4px;
}

/* Logo image (wordmark SVG) */
.logo__img { height: 20px; width: auto; display: block; }
.logo__img--light { display: none; }
.logo__img--dark { display: block; }
.navbar.is-top .logo__img--light { display: block; }
.navbar.is-top .logo__img--dark { display: none; }
body[data-nav="solid"] .navbar.is-top .logo__img--light { display: none; }
body[data-nav="solid"] .navbar.is-top .logo__img--dark { display: block; }
.logo--footer .logo__img { height: 22px; }
.logo--footer .logo__img--footer-full { height: 39px; width: auto; }

/* Hamburger */
.navbar__burger {
  display: none; flex-direction: column; justify-content: center; gap: 5px;
  width: 44px; height: 44px; border: none; background: none; cursor: pointer; margin-left: 8px;
}
.navbar__burger span {
  display: block; height: 2px; width: 22px; margin: 0 auto;
  background: var(--color-text-primary); border-radius: 2px;
  transition: transform 200ms ease, opacity 200ms ease, background 200ms ease;
}
.navbar.is-open .navbar__burger span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.navbar.is-open .navbar__burger span:nth-child(2) { opacity: 0; }
.navbar.is-open .navbar__burger span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
.navbar.is-open .navbar__burger span { background: var(--color-text-primary) !important; }

.navbar__mobile {
  display: none;
  position: fixed; top: 64px; left: 0; right: 0; bottom: 0;
  background: #fff; padding: 16px 24px;
  flex-direction: column; overflow-y: auto; z-index: 99;
}
.navbar.is-open .navbar__mobile,
.navbar__mobile.is-open { display: flex; }
/* Filet de sécurité : le menu plein écran mobile ne doit JAMAIS s'afficher en
   desktop, même s'il était resté ouvert avant un élargissement de la fenêtre
   (sinon il recouvre tout le site). La navbar passe en burger à ≤1023px. */
@media (min-width: 1024px) { .navbar__mobile { display: none !important; } }
/* Le verrou de scroll (menu ouvert) ne s'applique qu'en mobile : jamais bloquer
   le scroll de la version PC. */
@media (max-width: 1023px) { body.nav-locked { overflow: hidden; } }
.navbar.is-open { background: #fff; }
.navbar.is-open .navbar__link, .navbar.is-open .navbar__lang, .navbar.is-open .logo { color: var(--color-text-primary); }
.navbar__mobile-group {
  padding: 16px 4px 8px; font-size: 12px; font-weight: 600; letter-spacing: 1px;
  text-transform: uppercase; color: var(--color-blue-grey);
}
.navbar__mobile-sublink { padding: 10px 16px; font-size: 15px; color: var(--color-text-secondary); }
.navbar__mobile-link { padding: 16px 4px; font-size: 16px; font-weight: 500; border-bottom: 1px solid rgba(30,53,73,0.08); }
.navbar__mobile-foot { margin-top: auto; padding-top: 20px; padding-bottom: calc(8px + env(safe-area-inset-bottom, 0px)); border-top: 1px solid rgba(30,53,73,0.10); display: flex; flex-direction: column; gap: 16px; }
/* Sélecteur de langue segmenté (style iOS) — voir aussi styles.css */
.navbar__mobile-lang { display: inline-flex; align-self: flex-start; gap: 2px; padding: 4px; background: var(--color-blue-light, #eef3f7); border-radius: 999px; }
.navbar__mobile-lang-opt { min-width: 56px; min-height: 40px; display: inline-flex; align-items: center; justify-content: center; padding: 0 18px; border-radius: 999px; font-size: 14px; font-weight: 600; text-decoration: none; color: var(--color-text-secondary); transition: background 200ms ease, color 200ms ease; }
.navbar__mobile-lang-opt.is-active { background: #fff; color: var(--color-text-primary); box-shadow: 0 1px 3px rgba(30,53,73,0.12); }
.navbar__mobile-cta { width: 100%; min-height: 52px; font-size: 16px; }

/* -----------------------------------------------------------------
   HERO
   ----------------------------------------------------------------- */
.hero {
  position: relative;
  min-height: 95vh;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  overflow: hidden;
  /* hauteur image inchang\u00e9e ; contenu d\u00e9cal\u00e9 vers le bas */
  padding: calc(var(--nav-height) + 22vh) 24px 40px;
}
/* Fondu doux du bas de la hero vers le blanc (transition Apple) */
.hero::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: -1px;
  height: 17vh;
  z-index: 2;
  pointer-events: none;
  background: linear-gradient(to bottom,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 0.04) 55%,
    rgba(255, 255, 255, 0.16) 76%,
    rgba(255, 255, 255, 0.45) 89%,
    rgba(255, 255, 255, 0.82) 96%,
    #ffffff 100%);
}
.hero__bg {
  position: absolute; inset: 0;
  background: var(--color-text-primary);
}
.hero__bg img {
  width: 100%; height: 100%;
  object-fit: cover; object-position: center 12%;
  transform: scale(1.18);
  transform-origin: center;
  will-change: transform;
}
.hero__bg-label {
  font-family: ui-monospace, monospace;
  font-size: 12px; letter-spacing: 1px;
  color: rgba(255,255,255,0.35);
  text-align: center; padding: 0 24px 28px; max-width: 600px;
}
.hero__bg::before {
  content: '';
  position: absolute; inset: 0; z-index: 1;
  background-image: none;
}
.hero__overlay {
  position: absolute; inset: 0; z-index: 1;
  /* Scrim léger : halo radial doux derrière le texte + voile vertical discret */
  background:
    radial-gradient(110% 80% at 50% 44%, rgba(30,53,73,0.42) 0%, rgba(30,53,73,0.18) 50%, rgba(30,53,73,0) 78%),
    linear-gradient(to bottom, rgba(30,53,73,0.30) 0%, rgba(30,53,73,0.22) 50%, rgba(30,53,73,0.28) 100%);
}
.hero__content {
  position: relative;
  z-index: 3;
  max-width: 860px;
  padding: 0 24px;
  margin-top: 8vh;
  color: #fff;
}
.hero__badge {
  position: relative; overflow: visible;
  display: inline-flex; align-items: center; gap: 11px;
  background: rgba(255,255,255,0.12); backdrop-filter: blur(8px);
  border: 1px solid rgba(244,194,106,0.4);
  box-shadow: 0 1px 0 rgba(255,255,255,0.25) inset, 0 8px 20px -10px rgba(0,0,0,0.35);
  border-radius: 16px; padding: 8px 14px 8px 8px;
  font-size: 12.5px; font-weight: 600; color: rgba(255,255,255,0.95); letter-spacing: 0.2px;
  margin: -10px 0 40px; cursor: grab; text-decoration: none; max-width: 100%; text-align: left;
  transition: background 220ms ease, border-color 220ms ease, box-shadow 220ms ease, transform 480ms cubic-bezier(0.22, 1.3, 0.36, 1);
  opacity: 0; transform: translateY(14px) scale(1);
  touch-action: none; user-select: none;
}
.hero__badge-text { display: flex; flex-direction: column; gap: 1px; line-height: 1.25; }
.hero__badge-eyebrow { font-size: 10px; font-weight: 700; letter-spacing: 1.4px; text-transform: uppercase; color: #f4c26a; }
.hero__badge-title { font-size: 12.5px; font-weight: 600; color: #fff; }
.hero__badge-arrow { flex-shrink: 0; color: rgba(255,255,255,0.8); transition: transform 260ms var(--easing-apple); }
.hero__badge:hover .hero__badge-arrow { transform: translateX(3px); }
.hero.play .hero__badge-arrow { animation: badgeArrowNudge 1.8s ease-in-out 1.4s infinite; }
@keyframes badgeArrowNudge { 0%,100% { transform: translateX(0); } 50% { transform: translateX(3px); } }
.hero__badge:hover { background: rgba(255,255,255,0.18); border-color: rgba(244,194,106,0.6); box-shadow: 0 1px 0 rgba(255,255,255,0.3) inset, 0 10px 26px -10px rgba(0,0,0,0.4); }
.hero__badge.is-dragging { cursor: grabbing; transition: background 220ms ease, border-color 220ms ease, box-shadow 220ms ease; }
.hero__badge.is-dragging .hero__badge-icon-wrap { transform: scale(0.94); }
.hero__badge:hover { background: rgba(255,255,255,0.16); border-color: rgba(255,255,255,0.36); }
.hero__badge-icon { flex-shrink: 0; color: #f4c26a; transform-origin: center; }
.hero__badge-icon-wrap {
  display: inline-flex; align-items: center; justify-content: center;
  width: 26px; height: 26px; border-radius: 50%; flex-shrink: 0;
  background: radial-gradient(circle at 35% 30%, rgba(244,194,106,0.35), rgba(244,194,106,0.08) 70%);
  border: 1px solid rgba(244,194,106,0.45);
  transition: transform 380ms cubic-bezier(0.22, 1.3, 0.36, 1);
}
.hero.play .hero__badge-icon { animation: badgeIconPop 700ms var(--easing-apple) 500ms backwards; }
@keyframes badgeIconPop { 0% { transform: scale(0) rotate(-30deg); } 60% { transform: scale(1.25) rotate(8deg); } 100% { transform: scale(1) rotate(0); } }
.hero.play .hero__badge { animation: heroFade 620ms var(--easing-apple) forwards; animation-delay: 80ms; }
@keyframes heroBadgeIn { to { opacity: 1; transform: rotate(-3deg) translateY(0); } }
.hero__title {
  font-size: clamp(34px, 4.6vw, 56px);
  font-weight: 700;
  line-height: 1.12;
  letter-spacing: -0.5px;
  color: #fff;
  text-shadow: 0 1px 2px rgba(30,53,73,0.35), 0 6px 24px rgba(30,53,73,0.45);
  opacity: 0;
  transform: translateY(20px);
}
.hero__title .reddot {
  color: var(--color-coral);
  display: inline-block;
  position: relative;
  text-shadow: 0 0 16px rgba(240,87,66,0.75), 0 0 2px rgba(240,87,66,0.9);
}
.hero__title .reddot::after {
  content: ''; position: absolute; left: 50%; top: 58%;
  width: 0.62em; height: 0.62em; border-radius: 50%;
  transform: translate(-50%, -50%) scale(0);
  background: radial-gradient(circle, rgba(240,87,66,0.55) 0%, rgba(240,87,66,0) 70%);
  opacity: 0; pointer-events: none;
}
.hero__sub {
  font-size: clamp(18px, 2.5vw, 24px);
  font-weight: 400;
  line-height: 1.4;
  color: #fff;
  opacity: 0;
  margin-top: 20px;
  transform: translateY(12px);
  text-shadow: 0 1px 2px rgba(30,53,73,0.4), 0 2px 12px rgba(30,53,73,0.4);
}
.hero__sub .reddot { color: var(--color-coral); }
.hero__levers {
  display: flex; align-items: center; justify-content: center;
  gap: 14px; flex-wrap: wrap;
  margin-top: 28px;
  font-size: clamp(14px, 1.5vw, 16px);
  font-weight: 600;
  color: #fff;
  opacity: 0;
}
.hero__levers .sep { color: var(--color-green); }
.hero__cta {
  margin-top: 36px;
  opacity: 0;
  transform: translateY(8px);
}
.hero__cta .btn {
  color: #fff;
  box-shadow: 0 8px 28px rgba(30,53,73,0.4);
  position: relative;
  overflow: hidden;
}
/* Sheen : reflet lumineux qui balaie le bouton */
.hero__cta .btn::after {
  content: '';
  position: absolute;
  top: 0; left: -130%;
  width: 70%; height: 100%;
  background: linear-gradient(100deg,
    transparent 0%,
    rgba(255, 255, 255, 0.32) 50%,
    transparent 100%);
  transform: skewX(-18deg);
  pointer-events: none;
}
.hero__cta .btn span,
.hero__cta .btn {
  position: relative;
}
.hero.play .hero__cta .btn::after {
  animation: heroSheen 4.6s var(--easing-apple) 2.4s infinite;
}
.hero__cta .btn:hover::after {
  animation: heroSheen 0.9s var(--easing-apple);
}
@keyframes heroSheen {
  0% { left: -130%; }
  60%, 100% { left: 130%; }
}
.hero__cta .btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 16px 38px rgba(30,53,73,0.5);
}
/* États animés (gérés en JS en ajoutant .play) */
.hero.play .hero__title { animation: heroFade 760ms var(--easing-apple) forwards; animation-delay: 200ms; }
.hero.play .hero__title .reddot.pulse { transform: scale(0); animation: heroPulse 760ms var(--easing-apple) forwards; animation-delay: var(--pd, 700ms); }
.hero.play .hero__title .reddot.pulse::after { animation: heroDotRing 900ms var(--easing-apple) forwards; animation-delay: calc(var(--pd, 700ms) + 120ms); }
.hero.play .hero__sub { animation: heroFade 680ms var(--easing-apple) forwards; animation-delay: var(--sub-d, 0ms); }
.hero.play .hero__levers { animation: heroFade 620ms var(--easing-apple) forwards; animation-delay: var(--lev-d, 0ms); }
.hero.play .hero__cta { animation: heroFade 620ms var(--easing-apple) forwards; animation-delay: var(--cta-d, 0ms); }

@keyframes heroFade { to { opacity: 1; transform: translateY(0); } }
@keyframes heroPulse { 0% { transform: scale(0); opacity: 0; } 45% { transform: scale(1.28); opacity: 1; } 70% { transform: scale(0.92); } 100% { transform: scale(1); opacity: 1; } }
@keyframes heroDotRing { 0% { transform: translate(-50%, -50%) scale(0.2); opacity: 0; } 25% { opacity: 0.6; } 100% { transform: translate(-50%, -50%) scale(3.2); opacity: 0; } }

/* Bandeau confiance — composant marquee (repris du Design System) */
.trust { background: #fff; padding: 28px 0 36px; }
.trust__label {
  display: flex; align-items: center; justify-content: center; gap: 18px;
  font-size: 13px; font-weight: 700; letter-spacing: 2.5px;
  text-transform: uppercase; color: var(--color-text-primary);
  text-align: center; /* centre le texte quand il s'enroule sur 2 lignes (mobile) */
  margin-bottom: 30px;
}
.trust__label::before,
.trust__label::after {
  content: '';
  height: 1px; width: 52px;
  background: linear-gradient(to right, transparent, rgba(30, 53, 73, 0.28));
}
.trust__label::after { transform: scaleX(-1); }
.marquee {
  overflow: hidden;
  -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);
}
.marquee__track {
  display: flex; align-items: center; gap: 0; width: max-content;
  animation: marqueeScroll var(--marquee-duration, 48s) linear infinite;
}
.marquee--reverse .marquee__track { animation-direction: reverse; }
.marquee:hover .marquee__track { animation-play-state: paused; }
@keyframes marqueeScroll { to { transform: translateX(-50%); } }
.marquee__item {
  height: 60px; width: 200px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  padding: 0 24px;
}
.marquee__item img {
  max-height: 40px; max-width: 148px; width: auto; height: auto;
  object-fit: contain; display: block;
}
.marquee--grayscale .marquee__item { filter: grayscale(1); opacity: 0.55; transition: opacity 220ms ease, filter 220ms ease; }
.marquee--grayscale .marquee__item:hover { filter: none; opacity: 1; }
/* compensation des logos à forte marge interne (paraissent petits) */
.marquee__item--boost img { max-height: 54px; }
.marquee__item--boost-sm img { max-height: 48px; }

/* -----------------------------------------------------------------
   CONSTAT
   ----------------------------------------------------------------- */
.constat { background: #fff; position: relative; margin-top: 48px; }
.constat::before {
  content: '';
  position: absolute;
  top: -24px; left: 50%;
  transform: translateX(-50%);
  width: 180px;
  height: 1px;
  background: linear-gradient(to right,
    transparent,
    rgba(30, 53, 73, 0.10) 50%,
    transparent);
}
.constat__head { text-align: center; max-width: 760px; margin: 0 auto 24px; }
.constat__h3 {
  font-style: italic;
  font-size: clamp(16px, 2vw, 20px);
  color: var(--color-text-secondary);
  line-height: 1.5;
  margin-top: 16px;
}
.constat__chip {
  display: block; text-align: center;
  font-size: 14px; font-weight: 600;
  color: var(--color-text-primary);
  margin: 32px auto 56px;
}
.constat .container {
  padding-left: clamp(24px, 4vw, 64px);
  padding-right: clamp(24px, 4vw, 64px);
}
.constat__layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(48px, 6vw, 96px);
  align-items: stretch;
}
.acc { padding-right: 16px; min-width: 0; }
/* Hauteur de colonne verrouillée en desktop : la frame centrée ne rebondit plus
   pendant l'ouverture/fermeture des panneaux (sentiment de slide pur). */
@media (min-width: 1024px) {
  /* Hauteur de colonne stable : l'accordéon garde au moins cette hauteur pour
     que l'image reste centrée face à lui. min-height (et non height) évite tout
     rognage si les titres réservés dépassent la valeur cible. */
  .acc { min-height: 500px; }
  /* L'image + sa légende remplissent la hauteur de l'accordéon ; le cadre prend
     la place restante, la légende reste en dessous (hors zone rognée). */
  .constat__image { justify-content: center; }
  .constat__stack { flex: 1; height: auto; aspect-ratio: auto; min-height: 0; }
}
.constat__image {
  padding-left: 16px;
  display: flex;
  flex-direction: column;
}
/* Carousel : pellicule verticale — les visuels défilent en bloc, sens selon la navigation */
.constat__stack {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border-radius: 16px;
  --dir: 1;
}
.constat__stack.dir-up { --dir: -1; }
.constat__slide {
  position: absolute;
  inset: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  transform: translateY(calc(var(--dir) * 100%));
  transition: transform 640ms var(--easing-inout);
  pointer-events: none;
  will-change: transform;
}
.constat__slide.is-active {
  transform: translateY(0);
  pointer-events: auto;
}
.constat__slide.is-exit {
  transform: translateY(calc(var(--dir) * -100%));
}
/* Les visuels au repos (ni actif ni sortant) restent hors-champ sans balayer l'écran
   quand le sens de défilement change. */
.constat__slide:not(.is-active):not(.is-exit) { transition: none; }
@media (prefers-reduced-motion: reduce) {
  .constat__slide { transition: opacity 200ms linear; transform: none; opacity: 0; }
  .constat__slide.is-active { opacity: 1; }
}
.constat__frame {
  flex: 1;
  border-radius: 16px;
  overflow: hidden;
  background: var(--color-blue-light);
  box-shadow: var(--shadow-card);
  border: 3px solid var(--seg, var(--color-green));
  transition: border-color 520ms var(--easing-apple);
}
.constat__media { width: 100%; height: 100%; display: block; }
.constat__cap {
  display: flex; align-items: center; gap: 8px;
  font-size: 14px; font-weight: 600;
  color: var(--color-text-primary);
  padding-left: 16px;
  margin-top: 16px;
}
.constat__cap-dot {
  width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0;
}

/* Accordéon */
.acc { display: flex; flex-direction: column; gap: 10px; }
.acc__item {
  border: 1px solid rgba(30,53,73,0.08);
  border-radius: 16px;
  background: #fff;
  transition: border-color 340ms var(--easing-apple), background 340ms var(--easing-apple), box-shadow 340ms var(--easing-apple);
}
/* Chaque item porte la couleur de son segment (même ordre que la pellicule d'images) */
.acc__item:nth-child(1) { --seg: var(--seg-hum);   --seg-text: var(--seg-hum-text); }
.acc__item:nth-child(2) { --seg: var(--seg-dev);   --seg-text: var(--seg-dev-text); }
.acc__item:nth-child(3) { --seg: var(--seg-incub); --seg-text: var(--seg-incub-text); }
.acc__item:nth-child(4) { --seg: var(--seg-incl);  --seg-text: var(--seg-incl-text); }
.acc__item:hover { border-color: rgba(30,53,73,0.18); }
.acc__item.is-open {
  border-color: color-mix(in srgb, var(--seg) 45%, transparent);
  background: color-mix(in srgb, var(--seg) 9%, #fff);
  box-shadow: 0 20px 44px -28px rgba(30,53,73,0.4);
}
.acc__trigger {
  width: 100%; background: none; border: none; cursor: pointer;
  font-family: var(--font-main); text-align: left;
  padding: 24px 26px; display: flex; flex-direction: column; gap: 10px;
}
.acc__trigger-top { display: flex; align-items: center; gap: 16px; }
.acc__title {
  flex: 1; font-size: 16.5px; font-weight: 600; line-height: 1.4; color: var(--color-text-primary);
  transition: color 240ms ease;
  /* Cartes FERMÉES de hauteur identique quelle que soit la longueur du titre :
     on borne l'aperçu du titre à 2 lignes (min-height réserve la place, le clamp
     coupe l'excédent). Le texte n'est jamais perdu : la carte OUVERTE annule
     le clamp et affiche le titre en entier (voir .is-open plus bas). */
  min-height: calc(2 * 1.4em);
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2;
  overflow: hidden;
}
.acc__item.is-open .acc__title {
  min-height: 0;
  -webkit-line-clamp: unset; overflow: visible;
}
.acc__chevron-wrap {
  flex-shrink: 0; width: 32px; height: 32px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: rgba(30,53,73,0.05);
  transition: background 340ms var(--easing-apple);
}
.acc__chevron { color: var(--color-text-secondary); transition: transform 340ms var(--easing-apple), color 240ms ease; }
.acc__item.is-open .acc__title { color: var(--seg-text); }
.acc__item.is-open .acc__chevron-wrap { background: var(--seg); }
.acc__item.is-open .acc__chevron { transform: rotate(180deg); color: #1E3549; }
.acc__panel { overflow: hidden; max-height: 0; transition: max-height 380ms var(--easing-apple); }
.acc__panel-inner {
  font-size: 15px; color: var(--color-text-secondary); line-height: 1.7; padding: 0 26px 22px;
  opacity: 0; transform: translateY(-6px);
  transition: opacity 320ms var(--easing-apple), transform 320ms var(--easing-apple);
}
.acc__item.is-open .acc__panel-inner { opacity: 1; transform: translateY(0); transition-delay: 90ms; }
@media (prefers-reduced-motion: reduce) {
  .acc__panel-inner { transition: opacity 1ms linear; transform: none; }
}

.constat__closing {
  text-align: center; font-style: italic;
  font-size: 16px; color: var(--color-text-secondary);
  max-width: 720px; margin: 48px auto 0; line-height: 1.6;
}

/* -----------------------------------------------------------------
   POUR QUI
   ----------------------------------------------------------------- */
/* Fond teinté qui fond vers le blanc en haut et en bas (comme « Qui sommes-nous ») */
.pour-qui { background: linear-gradient(180deg, #fff 0%, var(--color-rose-light) 8%, var(--color-rose-light) 92%, #fff 100%); }
.pour-qui__head { text-align: center; max-width: 760px; margin: 0 auto 56px; }
.pour-qui__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 400px), 1fr));
  gap: 24px;
}
.card-segment {
  --card-accent: var(--ring, var(--color-green));
  position: relative;
  overflow: hidden;
  background: #fff;
  border: 1px solid rgba(30,53,73,0.08);
  border-radius: 18px;
  padding: 28px 26px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  transition: transform 340ms var(--easing-apple), box-shadow 340ms var(--easing-apple), border-color 340ms var(--easing-apple);
  cursor: pointer;
  will-change: transform;
}
/* Barre d'accent haute qui se déploie au survol, dans la couleur du segment */
.card-segment::before {
  content: '';
  position: absolute; left: 0; right: 0; top: 0; height: 3px;
  background: var(--card-accent);
  transform: scaleX(0); transform-origin: left;
  transition: transform 440ms var(--easing-apple);
}
/* Couleur de texte lisible par segment (même ordre que la pellicule / l'accordéon) */
.pour-qui__grid .card-segment:nth-child(1) { --seg-text: var(--seg-hum-text); }
.pour-qui__grid .card-segment:nth-child(2) { --seg-text: var(--seg-dev-text); }
.pour-qui__grid .card-segment:nth-child(3) { --seg-text: var(--seg-incub-text); }
.pour-qui__grid .card-segment:nth-child(4) { --seg-text: var(--seg-incl-text); }
.card-segment:hover {
  border-color: color-mix(in srgb, var(--card-accent) 42%, transparent);
  box-shadow: 0 24px 50px -26px color-mix(in srgb, var(--card-accent) 60%, rgba(30,53,73,0.55));
  transform: translateY(-4px);
}
.card-segment:hover::before { transform: scaleX(1); }
.card-segment__title { font-size: 20px; font-weight: 600; color: var(--color-text-primary); letter-spacing: -0.2px; transition: color 240ms ease; }
.card-segment:hover .card-segment__title { color: var(--seg-text); }
.card-segment__desc { font-size: 15.5px; color: var(--color-text-secondary); line-height: 1.55; }
.card-segment__link {
  margin-top: auto;
  font-size: 15px;
  font-weight: 600;
  color: var(--seg-text, var(--color-green));
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: gap 240ms var(--easing-apple);
}
.card-segment:hover .card-segment__link { gap: 12px; }

/* -----------------------------------------------------------------
   NOS SOLUTIONS — cards façon référence (pill + dividers + pied)
   ----------------------------------------------------------------- */
.solutions { background: #fff; }
.solutions__head { text-align: center; max-width: 800px; margin: 0 auto 64px; }

.solutions-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
  gap: 28px;
  max-width: 1100px;
  margin: 0 auto;
}
.sol-card {
  position: relative;
  background: #fff;
  border: 1px solid rgba(30, 53, 73, 0.08);
  border-radius: 16px;
  box-shadow: var(--shadow-card);
  margin-top: 20px;
  transition: transform 250ms var(--easing-apple), box-shadow 250ms var(--easing-apple);
}
.sol-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-card-hover); }

/* Pill qui chevauche le bord haut */
.sol-card__pill {
  position: absolute;
  top: -16px; left: 24px;
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 14px; font-weight: 700;
  color: #fff;
  padding: 8px 18px;
  border-radius: 999px;
  box-shadow: var(--shadow-card);
  white-space: nowrap;
}
.sol-card__dot { width: 8px; height: 8px; border-radius: 50%; background: #fff; flex-shrink: 0; }
.sol-card--income .sol-card__pill { background: var(--color-green); }
.sol-card--packs  .sol-card__pill { background: var(--color-coral); }
.sol-card--coach  .sol-card__pill { background: var(--color-teal); }

.sol-card__body {
  padding: 40px 28px 28px;
  display: flex; flex-direction: column;
}
.sol-card__title {
  font-size: 21px; font-weight: 700; letter-spacing: -0.3px; line-height: 1.25;
  color: var(--color-text-primary);
  min-height: 78px;
}
.sol-card__divider {
  height: 1px; background: rgba(30, 53, 73, 0.1);
  margin: 22px 0;
}
.sol-card__benefit {
  display: flex; align-items: flex-start; gap: 10px;
  font-size: 16px; line-height: 1.5; color: var(--color-text-primary);
  min-height: 72px;
}
.sol-card__check { flex-shrink: 0; margin-top: 2px; }
.sol-card--income .sol-card__check { color: var(--color-green-dark); }
.sol-card--packs  .sol-card__check { color: var(--color-coral); }
.sol-card--coach  .sol-card__check { color: var(--color-teal); }

.sol-card__foot { display: flex; flex-direction: column; gap: 16px; }
.sol-card__badges { display: flex; flex-wrap: wrap; gap: 6px; }
.seg-badge {
  font-size: 11px; font-weight: 600; letter-spacing: 0.2px;
  padding: 4px 10px; border-radius: 999px; line-height: 1.3; white-space: nowrap;
}
.seg-badge--hum   { background: var(--seg-hum);   color: #1E3A4F; }
.seg-badge--dev   { background: var(--seg-dev);   color: #1E3A4F; }
.seg-badge--incub { background: var(--seg-incub); color: #1E3A4F; }
.seg-badge--incl  { background: #C7F0E8;  color: #1E3A4F; }

.sol-card__waitlist {
  display: flex; flex-direction: column; gap: 2px;
  background: rgba(74,190,166,0.1);
  border: 1px solid rgba(74,190,166,0.3);
  border-radius: 12px; padding: 12px 14px;
}
.sol-card__waitlist-top {
  font-size: 14px; font-weight: 600; color: var(--color-text-primary);
  display: inline-flex; align-items: center; gap: 8px;
}
.sol-card__waitlist-dot {
  width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0;
  background: var(--color-teal);
  box-shadow: 0 0 0 0 rgba(74,190,166,0.55);
  animation: waitlistPulse 2.6s var(--easing-apple) infinite;
}
@keyframes waitlistPulse {
  0% { box-shadow: 0 0 0 0 rgba(74,190,166,0.5); }
  70% { box-shadow: 0 0 0 7px rgba(74,190,166,0); }
  100% { box-shadow: 0 0 0 0 rgba(74,190,166,0); }
}
@media (prefers-reduced-motion: reduce) { .sol-card__waitlist-dot { animation: none; } }
.sol-card__waitlist-count { font-size: 13px; color: var(--color-text-secondary); }
.sol-card__waitlist-count b { color: var(--color-teal); font-weight: 600; }

.sol-card__cta {
  align-self: flex-start;
  font-size: 14px; font-weight: 600;
  display: inline-flex; align-items: center; gap: 6px;
  cursor: pointer; background: none; border: none; padding: 0;
  font-family: var(--font-main);
  transition: gap 200ms var(--easing-apple), opacity 150ms ease;
}
.sol-card__cta:hover { gap: 10px; opacity: 0.8; }
.sol-card--income .sol-card__cta { color: var(--color-green-dark); }
.sol-card--packs  .sol-card__cta { color: var(--color-green-dark); }
.sol-card--coach  .sol-card__cta { color: var(--color-coral); }

/* Barre langues (façon référence) */
.solutions__langbar {
  max-width: 1100px;
  margin: 36px auto 0;
  background: #fff;
  border: 1px solid rgba(30,53,73,0.08);
  border-left: 3px solid var(--color-green);
  border-radius: 12px;
  padding: 20px 28px;
  display: flex; flex-direction: column; align-items: flex-start;
  gap: 8px;
}
.solutions__langbar-row { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.solutions__langbar-label { font-size: 13px; font-weight: 700; letter-spacing: 0.4px; text-transform: uppercase; color: var(--color-green-dark); }
.solutions__langbar-langs { font-size: 15px; font-weight: 600; color: var(--color-text-primary); }
.solutions__langbar-note { margin: 0; font-size: 14px; line-height: 1.55; color: var(--color-text-secondary); }

/* -----------------------------------------------------------------
   IMPACT
   ----------------------------------------------------------------- */
/* Fond teinté qui fond vers le blanc en haut et en bas (comme « Qui sommes-nous ») */
.impact { background: #c3e8d2; }
.impact__head { text-align: center; max-width: 760px; margin: 0 auto 56px; }
.grid-4 { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); gap: 24px; }
.card-stat { border: none; border-radius: 20px; padding: 36px 28px; text-align: center; background: #c3e8d2; box-shadow: -6px -6px 12px rgba(255,255,255,0.8), 6px 6px 12px rgba(90,160,110,0.2); transition: box-shadow 200ms ease; }
.card-stat:hover { box-shadow: -8px -8px 16px rgba(255,255,255,0.85), 8px 8px 16px rgba(90,160,110,0.25); }
.card-stat__num { font-size: 52px; font-weight: 700; line-height: 1; color: var(--color-text-primary); letter-spacing: -1px; text-shadow: -1px -1px 2px rgba(255,255,255,0.8), 1px 1px 3px rgba(90,160,110,0.3); }
.card-stat__label { margin-top: 8px; font-size: 16px; color: var(--color-text-secondary); }
@media (max-width: 767px) {
  .card-stat__num { font-size: 36px; }
  .card-stat { box-shadow: -4px -4px 8px rgba(255,255,255,0.75), 4px 4px 8px rgba(90,160,110,0.18); }
}
.impact__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 210px), 1fr));
  gap: 24px;
}
.stat {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: linear-gradient(180deg, #ffffff 0%, #f8fbfa 100%);
  border: 1px solid rgba(30, 53, 73, 0.05);
  border-radius: 22px;
  padding: 42px 26px 34px;
  text-align: center;
  box-shadow:
    0 1px 1.5px rgba(30, 53, 73, 0.04),
    0 8px 18px -8px rgba(30, 53, 73, 0.10),
    0 24px 44px -16px rgba(30, 53, 73, 0.09);
  transition: transform 500ms var(--easing-apple), box-shadow 500ms var(--easing-apple);
  will-change: transform;
}
/* liseré de lumière en haut (verre Apple) */
.stat::before {
  content: '';
  position: absolute;
  top: 0; left: 16px; right: 16px; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.9), transparent);
}
/* halo vert diffus, révélé au survol */
.stat::after {
  content: '';
  position: absolute;
  z-index: -1;
  top: -48px; left: 50%;
  width: 180px; height: 180px;
  transform: translateX(-50%) scale(0.8);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(111, 207, 151, 0.22), transparent 70%);
  opacity: 0;
  transition: opacity 500ms var(--easing-apple), transform 500ms var(--easing-apple);
}
.stat:hover {
  transform: translateY(-6px);
  box-shadow:
    0 1px 1.5px rgba(30, 53, 73, 0.04),
    0 18px 30px -10px rgba(30, 53, 73, 0.12),
    0 40px 70px -20px rgba(74, 190, 166, 0.20);
}
.stat:hover::after { opacity: 1; transform: translateX(-50%) scale(1); }
.stat__num {
  font-size: clamp(42px, 5vw, 52px);
  font-weight: 700; line-height: 1;
  letter-spacing: -1.5px;
  background: linear-gradient(155deg, #1E3549 0%, #2b6a58 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}
.stat__num::after {
  content: '';
  display: block;
  width: 26px; height: 3px;
  margin: 16px auto 0;
  border-radius: 3px;
  background: linear-gradient(90deg, var(--color-green), var(--color-teal));
  opacity: 0.85;
}
.stat__label {
  margin-top: 14px;
  font-size: 15px;
  letter-spacing: 0.1px;
  color: var(--color-text-secondary);
}
.impact__sub { text-align: center; max-width: 720px; margin: 48px auto 0; }
.impact__sub-label {
  font-size: 12px; font-weight: 600; letter-spacing: 2px; text-transform: uppercase;
  color: var(--color-green); margin-bottom: 10px;
}
.impact__sub-text { font-size: 15px; color: var(--color-text-secondary); line-height: 1.6; }
.impact__links {
  display: flex; justify-content: center; gap: 32px; flex-wrap: wrap;
  margin-top: 32px;
}
.impact__links a { color: var(--color-green); }
.impact__links a:hover { opacity: 0.8; }

/* -----------------------------------------------------------------
   TÉMOIGNAGES — cards avec barre d'accent par segment
   ----------------------------------------------------------------- */
.temoignages { background: #fff; }
.temoignages__head { text-align: center; max-width: 760px; margin: 0 auto 56px; }

/* Cards témoignages — composant card-quote (repris du Design System) */
.tcards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr));
  gap: 28px;
  max-width: 1000px;
  margin: 0 auto;
}
.card-quote {
  background: var(--color-rose-light);
  border-radius: 18px;
  padding: 32px 28px 26px;
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: box-shadow 420ms var(--easing-apple), opacity 420ms var(--easing-apple), transform 720ms var(--easing-apple);
}
/* Repos : immobile. Au survol du groupe, les autres cards s'effacent — le regard se pose. */
.tcards:hover .card-quote { opacity: 0.66; }
.tcards:hover .card-quote:hover { opacity: 1; box-shadow: 0 16px 38px -28px rgba(30,53,73,0.26); }
.card-quote__mark {
  position: absolute;
  top: 6px;
  left: 20px;
  font-size: 96px;
  line-height: 1;
  font-weight: 700;
  color: var(--color-green);
  opacity: 0.32;
  font-family: Georgia, serif;
  pointer-events: none;
}
.card-quote__text {
  position: relative;
  flex: 1;
  font-size: 16.5px;
  font-style: italic;
  color: var(--color-text-primary);
  margin: 10px 0 22px;
  line-height: 1.7;
}
.card-quote__sep {
  height: 1px;
  background: var(--color-rose-medium, #facbc3);
  margin-bottom: 16px;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 720ms var(--easing-apple) 220ms;
}
.card-quote.is-visible .card-quote__sep { transform: scaleX(1); }
.card-quote__author {
  display: flex;
  align-items: center;
  gap: 12px;
}
.card-quote__avatar {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-weight: 600;
  font-size: 16px;
}
/* Entrée sobre : montée courte + léger décalage, sans grand saut ni flash */
.tcards .card-quote.reveal { transform: translateY(14px); }
.tcards .card-quote.reveal.is-visible { transform: translateY(0); }
.tcards .card-quote.reveal:nth-child(2) { transition-delay: 80ms; }
.tcards .card-quote.reveal:nth-child(3) { transition-delay: 160ms; }
.tcards .card-quote.reveal:nth-child(4) { transition-delay: 240ms; }
@media (prefers-reduced-motion: reduce) {
  .card-quote__sep { transform: none; }
  .tcards:hover .card-quote { opacity: 1; }
}
.card-quote__name {
  font-size: 14px;
  font-weight: 600;
  color: var(--color-text-primary);
}
.card-quote__role {
  font-size: 14px;
  color: var(--color-text-secondary);
  line-height: 1.45;
}

/* -----------------------------------------------------------------
   DERNIER CTA
   ----------------------------------------------------------------- */
.cta-final { background: #fff; }
.cta-card {
  border-radius: 16px;
  padding: clamp(48px, 6vw, 64px) clamp(24px, 5vw, 48px);
  text-align: center;
  background: var(--gradient-cta);
}
.cta-card__title {
  font-size: clamp(26px, 4vw, 34px);
  font-weight: 700; letter-spacing: -0.3px; line-height: 1.2;
  color: var(--color-text-primary);
  max-width: 800px; margin: 0 auto;
}
.cta-card__sub {
  font-size: clamp(16px, 2vw, 18px);
  margin: 12px auto 0; max-width: 600px;
  color: var(--color-text-primary);
  opacity: 0.75;
}
.cta-card__actions {
  display: flex; gap: 16px; justify-content: center; flex-wrap: wrap;
  margin-top: 28px;
}
.cta-card .btn { border-radius: 24px; padding: 14px 32px; }
.cta-card .btn--primary { background: var(--color-coral); box-shadow: none; }
.cta-card .btn--primary:hover { background: var(--color-coral); opacity: 0.9; }
.cta-card .btn--outline { background: #fff; border: none; color: var(--color-text-primary); box-shadow: none; }
.cta-card .btn--outline:hover { background: #fff; color: var(--color-text-primary); opacity: 0.9; }
.cta-card__reassure { margin-top: 16px; font-size: 14px; color: var(--color-text-secondary); }

/* -----------------------------------------------------------------
   PHOTO RONDE sur card "Pour qui" (drag & drop, anneau segment)
   ----------------------------------------------------------------- */
.card-segment__photo {
  width: 76px;
  height: 76px;
  flex-shrink: 0;
  border-radius: 50%;
  object-fit: cover;
  box-shadow: 0 0 0 3px var(--ring, var(--color-green)), 0 0 0 9px color-mix(in srgb, var(--ring, var(--color-green)) 14%, transparent);
  margin-bottom: 8px;
  transition: box-shadow 340ms var(--easing-apple);
}
.card-segment:hover .card-segment__photo {
  box-shadow: 0 0 0 3px var(--ring, var(--color-green)), 0 0 0 11px color-mix(in srgb, var(--ring, var(--color-green)) 22%, transparent);
}

/* -----------------------------------------------------------------
   FOOTER
   ----------------------------------------------------------------- */
.footer { background: var(--color-green); color: #1E3549; padding: 64px 0 32px; }
.footer__top {
  display: flex; justify-content: space-between; align-items: flex-start;
  gap: 40px; flex-wrap: wrap; margin-bottom: 56px;
}
.footer__brand { max-width: 280px; }
.footer__cols {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 32px;
  flex: 1; max-width: 760px;
}
.footer__brand-tag { font-size: 11px; font-weight: 700; letter-spacing: 2px; color: #1E3549; text-transform: uppercase; margin-top: 16px; }
.footer__brand-sub { font-size: 14px; font-style: italic; color: rgba(30,53,73,0.8); margin-top: 6px; }
.footer__col h3 { font-size: 13px; font-weight: 700; color: #1E3549; margin-bottom: 18px; text-transform: uppercase; letter-spacing: 1px; }
.footer__col ul { list-style: none; display: flex; flex-direction: column; gap: 10px; }
.footer__col a, .footer__col span { font-size: 14px; color: rgba(30,53,73,0.78); transition: color 150ms ease; }
.footer__col a:hover { color: #1E3549; }

/* CTA footer : discret mais affirmé (lien souligné actif, pas un bouton) */
.footer__cta {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 14px; font-weight: 700; color: #1E3549 !important;
  padding-bottom: 3px;
  border-bottom: 2px solid #1E3549;
  transition: gap 200ms var(--easing-apple), opacity 150ms ease;
}
.footer__cta:hover { gap: 11px; opacity: 0.8; }
.footer__cta svg { transition: transform 200ms var(--easing-apple); }
.footer__cta:hover svg { transform: translateX(2px); }
.footer__bottom {
  padding-top: 24px; border-top: 1px solid rgba(30,53,73,0.18);
  display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap;
}
.footer__legal { font-size: 13px; color: rgba(30,53,73,0.72); }
.footer__legal a:hover { color: #1E3549; }
.footer__social-wrap { display: flex; align-items: center; gap: 12px; }
.footer__social-label { font-size: 13px; font-weight: 700; color: #1E3549; }
.footer__social { display: flex; gap: 10px; }
.footer__social a {
  width: 32px; height: 32px; border-radius: 50%;
  background: #1E3549; color: var(--color-green);
  display: flex; align-items: center; justify-content: center;
  transition: background 180ms ease, color 180ms ease, transform 180ms ease;
}
.footer__social a:hover { background: #fff; color: #1E3549; transform: translateY(-2px); }

/* -----------------------------------------------------------------
   RESPONSIVE
   ----------------------------------------------------------------- */
@media (max-width: 1023px) {
  .section { padding: 72px 0; }
  .section__head { margin-bottom: 40px; }
  .container { padding: 0 20px; }
  .navbar__inner { padding: 0 20px; }

  /* navbar : hamburger masque "Nos projets" + "Qui sommes-nous" */
  .navbar__links, .navbar__actions .navbar__lang, .navbar__actions .btn { display: none; }
  .navbar__burger { display: flex; }
  .navbar__actions { margin-left: auto; }

  .constat__layout { grid-template-columns: 1fr; gap: 32px; }
  .constat__image {
    position: relative; top: auto; padding-left: 0;
    width: 100%; max-width: 500px; margin: 0 auto;
  }
  .acc { padding-right: 0; }
  /* Sur petit écran les titres s'enroulent davantage : aperçu borné à 3 lignes
     (au lieu de 2) pour que les cartes fermées restent de hauteur égale sans trop
     rogner. Titre complet visible à l'ouverture. */
  .acc__title { min-height: calc(3 * 1.4em); -webkit-line-clamp: 3; }

  /* Solutions : colonnes auto-adaptatives (auto-fit) — plus d'override nécessaire */

  /* Footer : brand au-dessus, colonnes 2×2 */
  .footer__top { flex-direction: column; }
  .footer__cols { grid-template-columns: repeat(2, 1fr); max-width: 100%; }
}

@media (max-width: 767px) {
  .section { padding: 56px 0; }
  .container { padding: 0 16px; }
  .navbar__inner { padding: 0 16px; }
  .hero { min-height: 78vh; padding: calc(var(--nav-height) + 16px) 16px 40px; }

  /* Pour qui : tuiles compactes 2 colonnes (pastille photo + nom + lien).
     Les descriptions détaillées sont masquées sur mobile — le détail est sur la
     page du segment. Mieux rangé, minimal. */
  .pour-qui__grid { grid-template-columns: 1fr 1fr; gap: 12px; }
  .card-segment { padding: 20px 14px; gap: 8px; align-items: center; text-align: center; }
  .card-segment__photo { width: 56px; height: 56px; margin-bottom: 2px; }
  .card-segment__desc { display: none; }
  .card-segment__title { font-size: 15px; line-height: 1.25; }
  .card-segment__link { font-size: 13px; }

  /* Hero leviers en colonne sans séparateurs */
  .hero__levers { flex-direction: column; gap: 8px; }
  .hero__levers .sep { display: none; }

  /* Constat : 1 colonne, image en flux */
  .constat__layout { grid-template-columns: 1fr; }

  /* Solutions : auto-fit gère la colonne unique */
  .solutions-grid { max-width: 380px; gap: 32px; margin-left: auto; margin-right: auto; }

  .cta-card { padding: 40px 20px; }
  .cta-card__actions { flex-direction: column; align-items: stretch; gap: 12px; }
  .cta-card__actions .btn { width: 100%; }

  /* Footer : 1 colonne */
  .footer__cols { grid-template-columns: 1fr; gap: 32px; }
  .footer__col h3 { padding-bottom: 12px; border-bottom: 1px solid rgba(30,53,73,0.15); }
  .footer__bottom { flex-direction: column; align-items: flex-start; }

  /* Témoignages : auto-fit gère la colonne unique */
  .tcards { gap: 16px; }
  .tcard { padding: 28px 24px 24px; }
}

@media (max-width: 900px) {
  .hero.play .hero__badge { animation: heroFade 620ms var(--easing-apple) forwards; animation-delay: 80ms; }
}
@media (max-width: 480px) {
  .hero__title { letter-spacing: -0.5px; }
  .hero__badge { font-size: 11px; padding: 6px 14px 6px 10px; border-radius: 14px; white-space: normal; text-align: left; line-height: 1.35; max-width: 92%; }
}

@media (max-width: 374px) {
  .section { padding: 48px 0; }
  .card-segment, .stat { padding: 24px 20px; }
}

/* (anciens helpers solutions split retirés) */

/* -----------------------------------------------------------------
   MICRO-INTERACTIONS — dynamisme discret « Apple », chargé partout
   Retour tactile au clic, lifts cohérents, taps mobiles propres.
   ----------------------------------------------------------------- */
a, button, [role="button"], .btn, .sol-card, .product-card, .pcard,
.form-option, .faq-trigger, .pacc__trigger, .acc__trigger {
  -webkit-tap-highlight-color: transparent;
}

/* Press : léger enfoncement au clic, ressenti sur chaque action */
.btn:active { transform: translateY(0) scale(0.972); }
.sol-card__cta:active, .footer__cta:active, .link-arrow:active,
.pexp-cta__btn:active, .navbar__dropdown a:active { transform: scale(0.97); }

/* Cartes produits cliquables : lift doux au survol + press */
.product-card { transition: transform 300ms var(--easing-apple), box-shadow 300ms var(--easing-apple); will-change: transform; }
.product-card.pexp-trigger { cursor: pointer; }
.product-card.pexp-trigger:hover { transform: translateY(-4px); box-shadow: 0 18px 38px -20px rgba(30,53,73,0.28); }
.product-card.pexp-trigger:active { transform: translateY(-1px) scale(0.994); }

/* Cartes parcours "Trois leviers" : press cohérent avec le lift existant */
.sol-card:active { transform: translateY(-2px) scale(0.995); }

/* Options de formulaire : feedback de sélection plus vivant */
.form-option { transition: background 180ms var(--easing-apple), border-color 180ms var(--easing-apple), transform 160ms var(--easing-apple); }
.form-option:active { transform: scale(0.99); }

/* Focus clavier net et discret (accessibilité + finition) */
.btn:focus-visible, .sol-card__cta:focus-visible, .navbar__link:focus-visible,
.product-card:focus-visible, .form-option:focus-visible, .footer__cta:focus-visible {
  outline: 2px solid var(--color-green);
  outline-offset: 3px;
  border-radius: 6px;
}

@media (prefers-reduced-motion: reduce) {
  .btn:active, .sol-card:active, .product-card.pexp-trigger:active,
  .form-option:active, .sol-card__cta:active, .footer__cta:active,
  .link-arrow:active, .pexp-cta__btn:active { transform: none; }
}

/* -----------------------------------------------------------------
   REDUCED MOTION
   ----------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }
  .reveal { opacity: 1; transform: none; }
  .hero__title .word, .hero__sub, .hero__levers, .hero__cta { opacity: 1; transform: none; }
  .marquee__track { animation: none; }
}

/* -----------------------------------------------------------------
   SECTION « LE CONSTAT » — importée de Qui sommes-nous (chiffres)
   ----------------------------------------------------------------- */
.qsn-section { padding: clamp(72px, 11vw, 132px) 0; }
.qsn-section--alt { background: linear-gradient(180deg, #fff 0%, var(--color-rose-light) 9%, var(--color-rose-light) 91%, #fff 100%); }
.qsn-wrap { max-width: 1080px; margin: 0 auto; padding: 0 clamp(24px, 6vw, 72px); }
.qsn-head { max-width: 780px; }
.qsn-title { font-size: clamp(28px, 3.6vw, 38px); font-weight: 700; letter-spacing: -0.4px; line-height: 1.18; color: var(--color-text-primary); margin: 0; }
.qsn-subtitle { font-size: clamp(16px, 1.5vw, 19px); font-weight: 400; letter-spacing: 0; color: var(--color-text-secondary); line-height: 1.7; margin: 16px 0 0; max-width: 62ch; }
.qsn-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr)); gap: clamp(18px, 2.2vw, 26px); margin-top: 64px; }
.qsn-stats--cols { grid-template-columns: repeat(3, 1fr); align-items: start; }
.qsn-statcol { display: flex; flex-direction: column; gap: 16px; }
.qsn-statcol__label { font-size: 12.5px; font-weight: 700; letter-spacing: 1.1px; text-transform: uppercase; color: var(--color-text-secondary); opacity: 0.75; margin-bottom: 2px; }
@media (max-width: 900px) { .qsn-stats--cols { grid-template-columns: 1fr; } }
.qsn-stat { position: relative; display: flex; flex-direction: column; gap: 10px; padding: 30px 28px 30px;
  background: #fff; border: 1px solid rgba(30,53,73,0.07); border-radius: 22px;
  box-shadow: 0 1px 2px rgba(30,53,73,0.04), 0 14px 30px -22px rgba(30,53,73,0.22);
  overflow: hidden; transition: transform 380ms var(--easing-apple), box-shadow 380ms var(--easing-apple); }
.qsn-stat::before { content: ''; position: absolute; inset: 0 0 auto 0; height: 120px;
  background: radial-gradient(120% 100% at 0% 0%, color-mix(in srgb, var(--c) 14%, transparent), transparent 70%);
  pointer-events: none; }
.qsn-stat:hover { transform: translateY(-6px); box-shadow: 0 2px 4px rgba(30,53,73,0.05), 0 30px 56px -28px rgba(30,53,73,0.34); }
.qsn-stat:nth-child(1) { --c: var(--color-coral); }
.qsn-stat:nth-child(2) { --c: var(--color-coral); }
.qsn-stat:nth-child(3) { --c: var(--color-coral); }
.qsn-stat:nth-child(4) { --c: var(--color-coral); }
.qsn-stat:nth-child(5) { --c: var(--color-coral); }
.qsn-stat__num { position: relative; display: inline-flex; align-items: baseline; gap: 2px;
  font-size: clamp(30px, 3.4vw, 40px); font-weight: 700; letter-spacing: -1.4px; line-height: 1;
  color: var(--c, var(--color-green-dark)); font-variant-numeric: tabular-nums; }
.qsn-stat__txt { position: relative; color: var(--color-text-secondary); line-height: 1.55; font-size: 15px; max-width: 30ch; }
.qsn-stat__dot { position: relative; align-self: flex-start; width: 9px; height: 9px; border-radius: 50%;
  background: var(--c, var(--color-green)); margin-bottom: 4px; box-shadow: 0 0 0 4px color-mix(in srgb, var(--c) 16%, transparent); }
.qsn-source { font-size: 13px; color: var(--color-text-secondary); opacity: 0.7; margin-top: 40px; }
.qsn-stat__photo { position: absolute; top: 16px; right: 16px; width: 56px; height: 56px; border-radius: 12px; overflow: hidden; box-shadow: 0 4px 12px -4px rgba(30,53,73,0.25); border: 1px solid rgba(30,53,73,0.08); z-index: 1; }
.qsn-stat__photo image-slot { width: 100%; height: 100%; display: block; }
@media (max-width: 480px) { .qsn-stat__photo { width: 46px; height: 46px; top: 14px; right: 14px; } }
/* Mobile : « Le constat » en grille 2 colonnes de tuiles compactes, groupées par
   région (le label coiffe la paire). Passe d'une pile de 6 grandes cartes à
   3 rangées de 2 tuiles : bien plus court, tout reste visible d'un coup. */
@media (max-width: 767px) {
  .qsn-stats { margin-top: 40px; }
  .qsn-statcol { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; align-items: stretch; }
  .qsn-statcol__label { grid-column: 1 / -1; margin-bottom: 0; }
  .qsn-stat { padding: 16px 14px; gap: 7px; border-radius: 18px; }
  .qsn-stat::before { height: 80px; }
  .qsn-stat__num { font-size: clamp(26px, 8vw, 34px); letter-spacing: -1px; }
  .qsn-stat__txt { font-size: 12.5px; line-height: 1.45; max-width: none; }
  .qsn-stat__photo { width: 40px; height: 40px; top: 12px; right: 12px; border-radius: 10px; }
}

/* -----------------------------------------------------------------
   CARTES PRODUIT (importées de Services) — section « Trois leviers »
   ----------------------------------------------------------------- */
.solutions-grid .product-card {
  --accent: var(--color-green); --ink: var(--accent); --pill-text: #fff;
  display: flex; flex-direction: column; background: #fff;
  border: 1px solid rgba(30,53,73,0.09); border-radius: 20px; overflow: hidden;
  box-shadow: 0 1px 2px rgba(30,53,73,0.05), 0 10px 30px -22px rgba(30,53,73,0.4);
  transition: transform 300ms var(--easing-apple), box-shadow 300ms var(--easing-apple);
}
.solutions-grid .product-card:hover { transform: translateY(-6px); box-shadow: 0 22px 48px -22px rgba(30,53,73,0.32); }
.product-card--income { --accent: #169D53; --ink: #169D53; --pill-text: #fff; }
.product-card--packs  { --accent: #C3E8D2; --ink: #169D53; --pill-text: #1E3A4F; }
.product-card--coach  { --accent: #F05742; --ink: #F05742; --pill-text: #fff; }
.solutions-grid .product-card--income { --accent: #169D53; --ink: #169D53; --pill-text: #fff; }
.solutions-grid .product-card--packs  { --accent: #C3E8D2; --ink: #169D53; --pill-text: #1E3A4F; }
.solutions-grid .product-card--coach  { --accent: #F05742; --ink: #F05742; --pill-text: #fff; }
.product-card__frame {
  position: relative; aspect-ratio: 16 / 11;
  border-bottom: 3px solid var(--accent);
  background-repeat: no-repeat; background-position: right -34px top -32px, center, center;
  background-size: 216px, cover, cover; transition: background-size 600ms var(--easing-apple);
}
.product-card:hover .product-card__frame { background-size: 236px, cover, cover; }
.product-card__media { width: 100%; height: 100%; display: block; background: transparent; }
/* L'image des cartes produits couvre et se centre proprement dans le cadre :
   neutralise les offsets inline (style="left:-12px") et le sous-cadrage du shim,
   pour ne plus voir la photo décalée ni le fond décoratif transparaître. */
.product-card__frame .product-card__media {
  position: absolute; inset: 0; left: 0 !important; width: 100% !important; height: 100% !important;
}
.product-card__frame .product-card__media img {
  position: absolute; inset: 0; left: 0 !important; top: 0 !important;
  width: 100% !important; height: 100% !important;
  object-fit: cover !important; object-position: center !important;
  transform: none !important; max-width: none;
}
.product-card--income .product-card__frame {
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240' viewBox='0 0 24 24' fill='none' stroke='%23169D53' stroke-opacity='0.24' stroke-width='1.25' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 2 2 7l10 5 10-5-10-5z'/%3E%3Cpath d='M2 17l10 5 10-5'/%3E%3Cpath d='M2 12l10 5 10-5'/%3E%3C/svg%3E"),
    radial-gradient(130% 92% at 82% 6%, rgba(22,157,83,0.16), rgba(22,157,83,0) 60%),
    linear-gradient(150deg, #E9F6EF 0%, #F5FBF8 52%, #ffffff 100%);
}
.product-card--packs .product-card__frame {
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240' viewBox='0 0 24 24' fill='none' stroke='%23169D53' stroke-opacity='0.22' stroke-width='1.25' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z'/%3E%3Cpath d='M9 12l2 2 4-4'/%3E%3C/svg%3E"),
    radial-gradient(130% 92% at 82% 6%, rgba(111,207,151,0.30), rgba(111,207,151,0) 60%),
    linear-gradient(150deg, #E7F5EE 0%, #F4FBF7 52%, #ffffff 100%);
}
.product-card--coach .product-card__frame {
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240' viewBox='0 0 24 24' fill='none' stroke='%23F05742' stroke-opacity='0.26' stroke-width='1.35' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 12h-4l-3 9L9 3l-3 9H2'/%3E%3C/svg%3E"),
    radial-gradient(130% 92% at 82% 6%, rgba(240,87,66,0.15), rgba(240,87,66,0) 60%),
    linear-gradient(150deg, #FDECE8 0%, #FFF6F4 52%, #ffffff 100%);
}
.product-card__pill {
  position: absolute; bottom: -15px; left: 20px; display: inline-flex; align-items: center;
  font-size: 14px; font-weight: 700; color: var(--pill-text); padding: 7px 16px; border-radius: 999px;
  background: var(--accent); box-shadow: 0 4px 12px rgba(30,53,73,0.18); z-index: 20;
}
.product-card__body { display: flex; flex-direction: column; gap: 16px; padding: 28px 22px 22px; }
.product-card__desc { font-size: 15.5px; line-height: 1.5; color: var(--color-text-primary); font-weight: 600; margin: 0; }
.product-card__benefits { list-style: none; display: flex; flex-direction: column; gap: 11px; margin: 0; padding: 0; }
.product-card__benefits li { position: relative; padding-left: 27px; font-size: 14px; line-height: 1.45; color: var(--color-text-secondary); }
.product-card__benefits li::before { content: ''; position: absolute; left: 0; top: 3px; width: 18px; height: 18px; border-radius: 50%; background: color-mix(in srgb, var(--accent) 16%, transparent); }
.product-card__benefits li::after { content: ''; position: absolute; left: 6px; top: 6px; width: 5px; height: 9px; border-right: 2px solid var(--ink); border-bottom: 2px solid var(--ink); transform: rotate(45deg); }
.product-card__cta {
  align-self: flex-start; margin-top: 6px; display: inline-flex; align-items: center; gap: 8px;
  font-family: 'Poppins', sans-serif; font-size: 15px; font-weight: 600; color: var(--ink); text-decoration: none;
  transition: gap 220ms var(--easing-apple);
}
.product-card__cta svg { transition: transform 220ms var(--easing-apple); }
.product-card__cta:hover { gap: 11px; }
.product-card__cta:hover svg { transform: translateX(3px); }
.solutions-grid .product-card__badges { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 2px; }
.solutions-grid .product-card__status { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; color: var(--color-text-secondary); }
.solutions-grid .product-card__status-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); flex-shrink: 0; box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 18%, transparent); }
.solutions-grid .product-card__benefits { margin-bottom: 2px; }

/* Libellés de boutons : version courte sous 560px (responsive) */
.btn-compact { display: none; }
@media (max-width: 560px) {
  .btn-full { display: none; }
  .btn-compact { display: inline; }
}