/* =================================================================
   FIINAFAS — DESIGN SYSTEM 2026  (v2 — corrigé)
   Univers institutionnel B2B · Police unique : Poppins
   Navbar une ligne · Responsive complet · 100% vanilla
   ================================================================= */

/* -----------------------------------------------------------------
   1. DESIGN TOKENS
   ----------------------------------------------------------------- */
:root {
  /* — Primaires — */
  --color-coral: #f05742;
  --color-green: #6fcf97;

  /* — Teintes chaudes — */
  --color-rose-light: #fcf2f0;
  --color-rose-medium: #facbc3;
  --color-rose-dark: #f9ada1;
  --color-beige: #f4d3ad;
  --color-gold: #f7c472;
  --color-orange: #ee9936;

  /* — Teintes froides — */
  --color-green-light: #c3e8d2;
  --color-green-dark: #169d53;
  --color-blue-light: #bfd2e4;
  --color-blue-grey: #7290ac;
  --color-cyan-light: #c7f0e8;
  --color-cyan-medium: #91dfcf;
  --color-teal: #4abea6;

  /* Couleurs SEGMENT (jamais les couleurs de marque Fiinafas) */
  --seg-hum: #EE9936;
  --seg-dev: #4ABEA6;
  --seg-incub: #7290AC;
  --seg-incl: #91DFCF;
  --seg-hum-text: #EE9936;
  --seg-dev-text: #4ABEA6;
  --seg-incub-text: #3f5d7a;
  --seg-incl-text: #91DFCF;

  /* — Texte — */
  --color-text-primary: #1E3A4F;
  --color-text-secondary: #7290ac;

  /* — Backgrounds — */
  --color-bg-primary: #ffffff;
  --color-bg-secondary: #fcf2f0;
  --color-bg-tertiary: #c3e8d2;

  /* — Gradients — */
  --gradient-cta: linear-gradient(135deg, #fdf0ee 0%, #e8f5ee 100%);
  --gradient-cool: linear-gradient(to right, #6fcf97, #4abea6);

  /* — Espacements — */
  --space-xs: 8px;
  --space-sm: 16px;
  --space-md: 24px;
  --space-lg: 48px;
  --space-xl: 80px;
  --space-2xl: 120px;

  /* — Rayons (tweakable) — */
  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-pill: 999px;

  /* — Ombres — */
  --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.06);
  --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.08);
  --shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.1);
  --shadow-green: 0 4px 16px rgba(111, 207, 151, 0.2);

  /* — Neumorphism contextuel (ombres calées sur le fond parent) — */
  /* sur fond blanc */
  --neu-white: -6px -6px 12px rgba(255, 255, 255, 0.9), 6px 6px 12px rgba(43, 71, 98, 0.12);
  --neu-white-hover: -8px -8px 16px rgba(255, 255, 255, 0.95), 8px 8px 16px rgba(43, 71, 98, 0.15);
  --neu-white-inset: inset -3px -3px 6px rgba(255, 255, 255, 0.9), inset 3px 3px 6px rgba(43, 71, 98, 0.12);
  /* sur fond rose clair */
  --neu-rose: -6px -6px 12px rgba(255, 255, 255, 0.85), 6px 6px 12px rgba(220, 160, 148, 0.25);
  --neu-rose-hover: -8px -8px 16px rgba(255, 255, 255, 0.9), 8px 8px 16px rgba(220, 160, 148, 0.3);
  /* sur fond vert clair */
  --neu-green: -6px -6px 12px rgba(255, 255, 255, 0.8), 6px 6px 12px rgba(90, 160, 110, 0.2);
  --neu-green-hover: -8px -8px 16px rgba(255, 255, 255, 0.85), 8px 8px 16px rgba(90, 160, 110, 0.25);

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

  /* — Layout — */
  --nav-height: 64px;
}

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

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;
}

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

/* -----------------------------------------------------------------
   3. GRILLE & MISE EN PAGE
   ----------------------------------------------------------------- */
.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 24px;
}
.section {
  padding: var(--space-xl) 0;
}

/* Grilles réutilisables */
.grid-4 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
  gap: var(--space-md);
}
.grid-3 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
  gap: var(--space-md);
}
.grid-2 {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 40px;
  align-items: center;
}

/* Sticky image (section CONSTAT) : accordéons gauche + image fixe droite */
.sticky-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-xl);
  align-items: start;
}
.sticky-layout__image {
  position: sticky;
  top: calc(var(--nav-height) + 24px);
}

/* -----------------------------------------------------------------
   4. ÉCHELLE TYPOGRAPHIQUE (responsive)
   ----------------------------------------------------------------- */
.h1 {
  font-size: 48px;
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.5px;
  color: var(--color-text-primary);
}
.h2 {
  font-size: 34px;
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.3px;
  color: var(--color-text-primary);
}
.h3 {
  font-size: 26px;
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: -0.2px;
  color: var(--color-text-primary);
}
.body-lg {
  font-size: 18px;
  font-weight: 400;
}
.body {
  font-size: 16px;
  font-weight: 400;
}
.small,
.caption {
  font-size: 14px;
  font-weight: 400;
}
.caption {
  color: var(--color-text-secondary);
}

/* Point rouge signature en fin de H1 / H2 majeurs */
.dot::after {
  content: '.';
  color: var(--color-coral);
}

/* -----------------------------------------------------------------
   5. BOUTONS
   ----------------------------------------------------------------- */
.btn {
  font-family: var(--font-main);
  font-size: 16px;
  font-weight: 600;
  line-height: 1;
  padding: 14px 28px;
  border-radius: var(--radius-md);
  border: 1.5px solid transparent;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  transition: background 200ms ease, color 200ms ease, opacity 200ms ease,
    box-shadow 200ms ease, transform 120ms ease;
  white-space: nowrap;
}
.btn:active {
  transform: translateY(1px);
}
.btn--primary {
  background: var(--color-green);
  color: #fff;
}
.btn--primary:hover,
.btn--primary.is-hover {
  background: var(--color-green-dark);
}
.btn--secondary {
  background: var(--color-coral);
  color: #fff;
}
.btn--secondary:hover,
.btn--secondary.is-hover {
  opacity: 0.9;
}
.btn--outline {
  background: transparent;
  border-color: var(--color-text-primary);
  color: var(--color-text-primary);
}
.btn--outline:hover,
.btn--outline.is-hover {
  background: var(--color-text-primary);
  color: #fff;
}
.btn--link {
  background: none;
  border: none;
  padding: 0;
  font-size: 14px;
  font-weight: 400;
  color: var(--color-text-secondary);
  cursor: pointer;
}
.btn--link:hover,
.btn--link.is-hover {
  text-decoration: underline;
}
.btn--compact {
  padding: 10px 18px;
  font-size: 14px;
}

/* -----------------------------------------------------------------
   6. BADGES & TAGS
   ----------------------------------------------------------------- */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  font-weight: 600;
  padding: 4px 10px;
  border-radius: var(--radius-pill);
  line-height: 1.2;
}
.badge--new {
  background: var(--color-rose-light);
  border: 1px solid var(--color-coral);
  color: var(--color-coral);
}
.badge--success {
  background: var(--color-green-light);
  color: var(--color-green-dark);
}
.badge--urgent {
  background: var(--color-coral);
  color: #fff;
}
.tag {
  display: inline-flex;
  align-items: center;
  font-size: 12px;
  font-weight: 600;
  padding: 3px 10px;
  border-radius: var(--radius-pill);
  line-height: 1.3;
}
.tag--hum {
  background: var(--color-rose-light);
  color: var(--color-coral);
}
.tag--dev {
  background: var(--color-green-light);
  color: var(--color-green-dark);
}
.tag--incub {
  background: var(--color-blue-light);
  color: var(--color-text-primary);
}
.tag--inclusion {
  background: rgba(247, 196, 114, 0.3);
  color: #633806;
}

/* -----------------------------------------------------------------
   7. CARDS SEGMENTS
   ----------------------------------------------------------------- */
.card-segment {
  background: #fff;
  border: 1px solid var(--color-blue-light);
  border-radius: var(--radius-lg);
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  transition: border-color 200ms ease, box-shadow 200ms ease,
    transform 200ms ease;
  cursor: pointer;
}
.card-segment:hover,
.card-segment.is-hover {
  border-color: var(--color-green);
  box-shadow: var(--shadow-green);
  transform: translateY(-2px);
}
.card-segment__icon {
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-green);
}
.card-segment__title {
  font-size: 20px;
  font-weight: 600;
  color: var(--color-text-primary);
}
.card-segment__desc {
  font-size: 16px;
  color: var(--color-text-secondary);
}
.card-segment__link {
  margin-top: auto;
  font-size: 15px;
  font-weight: 600;
  color: var(--color-green);
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

/* -----------------------------------------------------------------
   8. CARDS TÉMOIGNAGES
   ----------------------------------------------------------------- */
.card-quote {
  background: var(--color-rose-light);
  border-radius: var(--radius-lg);
  padding: 28px;
  position: relative;
  overflow: hidden;
}
.card-quote__mark {
  position: absolute;
  top: 4px;
  left: 18px;
  font-size: 96px;
  line-height: 1;
  font-weight: 700;
  color: var(--color-green);
  opacity: 0.35;
  font-family: Georgia, serif;
  pointer-events: none;
}
.card-quote__text {
  position: relative;
  font-size: 16px;
  font-style: italic;
  color: var(--color-text-primary);
  margin-bottom: 20px;
  line-height: 1.7;
}
.card-quote__sep {
  height: 1px;
  background: var(--color-rose-medium);
  margin-bottom: 16px;
}
.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;
}
.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);
}

/* -----------------------------------------------------------------
   9. CARDS CHIFFRES CLÉS
   ----------------------------------------------------------------- */
.card-stat {
  background: #fff;
  border: 1px solid var(--color-green-light);
  border-top: 3px solid var(--color-green);
  border-radius: var(--radius-lg);
  padding: 32px 24px;
  text-align: center;
}
.card-stat__num {
  font-size: 48px;
  font-weight: 700;
  line-height: 1;
  color: var(--color-text-primary);
  letter-spacing: -1px;
}
.card-stat__label {
  margin-top: 8px;
  font-size: 16px;
  color: var(--color-text-secondary);
}

/* -----------------------------------------------------------------
   10. SECTION CTA FINALE
   ----------------------------------------------------------------- */
.cta-card {
  border-radius: var(--radius-xl);
  padding: 64px 48px;
  text-align: center;
}
.cta-card--warm {
  background: var(--gradient-cta);
}
.cta-card--warm .cta-card__title,
.cta-card--warm .cta-card__sub {
  color: var(--color-text-primary);
}
.cta-card--soft {
  background: var(--gradient-cta);
}
.cta-card__title {
  font-size: 34px;
  font-weight: 700;
  letter-spacing: -0.3px;
  color: var(--color-text-primary);
}
.cta-card__sub {
  font-size: 18px;
  margin-top: 12px;
  color: var(--color-text-primary);
  opacity: 0.75;
}
/* Boutons CTA = pilule très arrondie */
.cta-card .btn {
  border-radius: 28px;
  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__actions {
  display: flex;
  gap: 16px;
  justify-content: center;
  flex-wrap: wrap;
  margin-top: 28px;
}
.cta-card__reassure {
  margin-top: 16px;
  font-size: 14px;
  color: var(--color-text-secondary);
}

/* -----------------------------------------------------------------
   11. ACCORDÉON
   ----------------------------------------------------------------- */
.accordion {
  width: 100%;
}
.accordion__item {
  border-bottom: 1px solid var(--color-blue-light);
}
.accordion__trigger {
  width: 100%;
  background: none;
  border: none;
  cursor: pointer;
  font-family: var(--font-main);
  font-size: 18px;
  font-weight: 600;
  color: var(--color-text-primary);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 20px 0;
  text-align: left;
  transition: color 200ms ease;
}
.accordion__trigger:hover {
  color: var(--color-coral);
}
.accordion__chevron {
  flex-shrink: 0;
  color: var(--color-green);
  transition: transform 250ms ease, color 200ms ease;
}
.accordion__item.is-open .accordion__trigger {
  color: var(--color-coral);
}
.accordion__item.is-open .accordion__chevron {
  transform: rotate(180deg);
  color: var(--color-coral);
}
.accordion__panel {
  overflow: hidden;
  max-height: 0;
  transition: max-height 250ms ease;
}
.accordion__panel-inner {
  font-size: 16px;
  color: var(--color-text-secondary);
  padding: 0 0 20px;
  line-height: 1.7;
}

/* -----------------------------------------------------------------
   12. CALLOUTS / HIGHLIGHT BOX
   ----------------------------------------------------------------- */
.callout {
  border-radius: 12px;
  padding: 20px 24px;
  color: var(--color-text-primary);
  font-size: 16px;
  background: #fff;
  border-left: 4px solid transparent;
  box-shadow: none;
}
.callout--green {
  background: #fff;
  border-left: 4px solid var(--color-green);
}
.callout--rose {
  background: #fff;
  border-left: 4px solid var(--color-coral);
}

/* -----------------------------------------------------------------
   13. PLACEHOLDER IMAGE
   ----------------------------------------------------------------- */
.img-placeholder {
  background: var(--color-blue-light);
  border-radius: var(--radius-lg);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  color: var(--color-text-secondary);
  position: relative;
  overflow: hidden;
}
.img-placeholder::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: repeating-linear-gradient(
    45deg,
    transparent,
    transparent 12px,
    rgba(114, 144, 172, 0.08) 12px,
    rgba(114, 144, 172, 0.08) 24px
  );
}
.img-placeholder__icon,
.img-placeholder__label {
  position: relative;
}
.img-placeholder__label {
  font-family: ui-monospace, 'SF Mono', Menlo, monospace;
  font-size: 12px;
  letter-spacing: 0.2px;
  text-align: center;
  padding: 0 12px;
}
.ratio-16-9 {
  aspect-ratio: 16 / 9;
}
.ratio-4-3 {
  aspect-ratio: 4 / 3;
}
.ratio-1-1 {
  aspect-ratio: 1 / 1;
}

/* -----------------------------------------------------------------
   14. NAVBAR — une seule ligne, sticky, responsive
   ----------------------------------------------------------------- */
.navbar {
  position: sticky;
  top: 0;
  z-index: 100;
  height: var(--nav-height);
  background: #fff;
  border-bottom: 1px solid var(--color-blue-light);
  transition: box-shadow 200ms ease;
}
.navbar.is-scrolled {
  box-shadow: var(--shadow-md);
}
@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__inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 24px;
  height: 100%;
  display: flex;
  align-items: center;
}
.navbar__logo {
  flex-shrink: 0;
  margin-right: 40px;
}
.navbar__links {
  display: flex;
  align-items: center;
  gap: 28px;
  list-style: none;
}
.navbar__link {
  font-size: 14px;
  font-weight: 400;
  color: var(--color-text-primary);
  display: inline-flex;
  align-items: center;
  gap: 5px;
  cursor: pointer;
  white-space: nowrap;
  transition: color 150ms ease;
}
.navbar__link:hover {
  color: var(--color-green);
}
.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;
}

/* Dropdown (hover desktop) */
.navbar__dropdown-wrap {
  position: relative;
}
.navbar__dropdown {
  position: absolute;
  top: calc(100% + 18px);
  left: -12px;
  background: #fff;
  border: 1px solid var(--color-blue-light);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
  padding: 8px;
  min-width: 240px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: opacity 180ms ease, transform 180ms ease, visibility 180ms;
  z-index: 50;
}
.navbar__dropdown-wrap:hover .navbar__dropdown {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.navbar__dropdown a {
  display: block;
  padding: 10px 12px;
  border-radius: 6px;
  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);
}

/* 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: auto;
}
.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;
}
.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);
}

/* Menu mobile */
.navbar__mobile {
  display: none;
  position: fixed;
  top: var(--nav-height);
  left: 0;
  right: 0;
  bottom: 0;
  background: #fff;
  padding: 16px;
  flex-direction: column;
  overflow-y: auto;
  z-index: 99;
}
/* Menu rendu via portail (hors .navbar) : la classe is-open est posée
   directement sur .navbar__mobile. On garde l'ancien sélecteur par sécurité. */
.navbar.is-open .navbar__mobile,
.navbar__mobile.is-open {
  display: flex;
}
.navbar__mobile-link {
  padding: 16px 4px;
  font-size: 16px;
  font-weight: 500;
  color: var(--color-text-primary);
  border-bottom: 1px solid var(--color-blue-light);
}
.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-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) : deux cibles tactiles claires. */
.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);
}
/* CTA « Prendre RDV » : pleine largeur, hauteur confortable. */
.navbar__mobile-cta {
  width: 100%;
  min-height: 52px;
  font-size: 16px;
}

/* -----------------------------------------------------------------
   15. FOOTER
   ----------------------------------------------------------------- */
.footer {
  background: var(--color-green);
  color: var(--color-text-primary);
  padding: 64px 0 32px;
}
.footer__grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr 1.2fr;
  gap: 40px;
  margin-bottom: 48px;
}
.footer__brand-tag {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 2px;
  color: #1E3A4F;
  margin-top: 16px;
}
.footer__brand-sub {
  font-size: 14px;
  font-style: italic;
  color: rgba(30, 58, 79, 0.8);
  margin-top: 6px;
}
.footer__col h3 {
  font-size: 14px;
  font-weight: 600;
  color: #1E3A4F;
  margin-bottom: 16px;
}
.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, 58, 79, 0.7);
  transition: color 150ms ease, opacity 150ms ease;
}
.footer__col a:hover {
  color: #1E3A4F;
}
.footer__bottom {
  margin-top: 0;
  padding-top: 20px;
  border-top: 1px solid rgba(30, 58, 79, 0.15);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
}
.footer__legal {
  font-size: 13px;
  color: rgba(30, 58, 79, 0.7);
}
.footer__legal a:hover {
  color: #1E3A4F;
}
.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);
}

/* -----------------------------------------------------------------
   16. LOGO PLACEHOLDER (clairement marqué)
   ----------------------------------------------------------------- */
.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;
}
.logo--footer {
  color: #1E3A4F;
}
.logo--footer .logo__mark::after {
  color: var(--color-blue-light);
}

/* 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; }

/* -----------------------------------------------------------------
   17. UTILITAIRES
   ----------------------------------------------------------------- */
.text-center { text-align: center; }
.text-green { color: var(--color-green); }
.text-coral { color: var(--color-coral); }
.text-secondary { color: var(--color-text-secondary); }
.hide-mobile { display: initial; }
.show-mobile { display: none; }

/* =================================================================
   CHROME DE PRÉSENTATION (style-guide — non livré au site)
   ================================================================= */
.sg-hero {
  padding: 72px 0 56px;
  background: var(--color-bg-secondary);
  border-bottom: 1px solid var(--color-rose-medium);
}
.sg-hero__kicker {
  font-family: ui-monospace, monospace;
  font-size: 13px;
  letter-spacing: 1px;
  color: var(--color-coral);
  text-transform: uppercase;
  margin-bottom: 16px;
}
.sg-hero h1 {
  font-size: 52px;
  font-weight: 700;
  letter-spacing: -1px;
  line-height: 1.05;
  max-width: 780px;
}
.sg-hero p {
  font-size: 18px;
  color: var(--color-text-secondary);
  max-width: 620px;
  margin-top: 20px;
}

.sg-section {
  padding: 64px 0;
  border-bottom: 1px solid var(--color-blue-light);
}
.sg-section__head {
  margin-bottom: 36px;
  max-width: 780px;
}
.sg-section__num {
  font-family: ui-monospace, monospace;
  font-size: 13px;
  color: var(--color-green-dark);
  letter-spacing: 1px;
}
.sg-section__head h2 {
  font-size: 32px;
  font-weight: 700;
  letter-spacing: -0.4px;
  margin-top: 6px;
}
.sg-section__head p {
  font-size: 16px;
  color: var(--color-text-secondary);
  margin-top: 10px;
}
.sg-block {
  margin-bottom: 44px;
}
.sg-block:last-child {
  margin-bottom: 0;
}
.sg-block__label {
  font-family: ui-monospace, monospace;
  font-size: 12px;
  letter-spacing: 0.5px;
  color: var(--color-blue-grey);
  margin-bottom: 16px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.sg-block__label::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--color-green);
}
.sg-states {
  display: flex;
  flex-wrap: wrap;
  gap: 28px;
}
.sg-state {
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: flex-start;
}
.sg-state__tag {
  font-family: ui-monospace, monospace;
  font-size: 11px;
  letter-spacing: 0.5px;
  color: var(--color-blue-grey);
  text-transform: uppercase;
}
.sg-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px;
}
.sg-frame {
  border: 1px solid var(--color-blue-light);
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.sg-frame .navbar {
  position: relative;
}

/* couleurs */
.swatch-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 16px;
}
.swatch-grid--row {
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
}
.swatch {
  border: 1px solid var(--color-blue-light);
  border-radius: var(--radius-md);
  overflow: hidden;
}
.swatch__chip {
  height: 76px;
}
.swatch__meta {
  padding: 10px 12px;
  background: #fff;
}
.swatch__name {
  font-size: 13px;
  font-weight: 600;
}
.swatch__hex {
  font-family: ui-monospace, monospace;
  font-size: 12px;
  color: var(--color-text-secondary);
  text-transform: uppercase;
}
.gradient-card {
  height: 96px;
  border-radius: var(--radius-md);
  display: flex;
  align-items: flex-end;
  padding: 12px 14px;
  color: #fff;
  font-family: ui-monospace, monospace;
  font-size: 12px;
}

/* type specimens */
.type-row {
  display: flex;
  align-items: baseline;
  gap: 24px;
  padding: 18px 0;
  border-bottom: 1px dashed var(--color-blue-light);
}
.type-row__meta {
  flex-shrink: 0;
  width: 170px;
  font-family: ui-monospace, monospace;
  font-size: 12px;
  color: var(--color-text-secondary);
  line-height: 1.5;
}

/* tokens radius/spacing */
.token-demo {
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: center;
}
.radius-demo {
  width: 88px;
  height: 88px;
  background: var(--color-green-light);
  border: 1px solid var(--color-green);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: ui-monospace, monospace;
  font-size: 12px;
  color: var(--color-green-dark);
}
.space-demo {
  background: var(--color-rose-dark);
  height: 28px;
  border-radius: 3px;
}

/* sticky-layout demo image height */
.sticky-demo-img {
  height: 420px;
}

/* -----------------------------------------------------------------
   18. RESPONSIVE
   ----------------------------------------------------------------- */

/* Tablet */
@media (max-width: 1023px) {
  .container { padding: 0 20px; }
  .section { padding: 64px 0; }

  .h1 { font-size: 40px; }
  .h2 { font-size: 28px; }
  .h3 { font-size: 22px; }
  .body-lg { font-size: 17px; }
  .sg-hero h1 { font-size: 40px; }

  .footer__grid { grid-template-columns: repeat(2, 1fr); gap: 32px; }

  .sticky-layout { grid-template-columns: 1fr; gap: 32px; }
  .sticky-layout__image { position: relative; top: auto; }
  .sticky-demo-img { height: 280px; }

  /* navbar : masquer les liens secondaires, tout passe au burger */
  .navbar__links,
  .navbar__actions .navbar__lang,
  .navbar__actions .btn {
    display: none;
  }
  .navbar__burger { display: flex; }
  .navbar__actions { margin-left: 0; }
}

/* Mobile */
@media (max-width: 767px) {
  .container { padding: 0 16px; }
  .section { padding: 48px 0; }

  .h1 { font-size: 32px; }
  .h2 { font-size: 24px; }
  .h3 { font-size: 20px; }
  .body-lg { font-size: 16px; }
  .body { font-size: 15px; }
  .sg-hero { padding: 48px 0 40px; }
  .sg-hero h1 { font-size: 32px; }
  .sg-hero p { font-size: 16px; }
  .sg-section { padding: 48px 0; }

  .grid-2 { grid-template-columns: 1fr; gap: 24px; }
  .footer__grid { grid-template-columns: 1fr; gap: 24px; }

  .card-stat__num { font-size: 36px; }
  .cta-card { padding: 40px 20px; border-radius: var(--radius-lg); }
  .cta-card__title { font-size: 24px; }
  .cta-card__actions { flex-direction: column; align-items: stretch; }

  /* boutons full-width sur mobile */
  .cta-card__actions .btn,
  .sg-state .btn:not(.btn--link) { width: 100%; }

  .hide-mobile { display: none; }
  .show-mobile { display: initial; }
}

@media (max-width: 480px) {
  .section { padding: 40px 0; }
}

/* -----------------------------------------------------------------
   19. DENSITÉ (tweakable)
   ----------------------------------------------------------------- */
body[data-density='compact'] .sg-section { padding: 44px 0; }
body[data-density='compact'] .sg-block { margin-bottom: 28px; }
body[data-density='comfy'] .sg-section { padding: 88px 0; }
body[data-density='comfy'] .sg-block { margin-bottom: 60px; }

/* =================================================================
   20. FONDS DE SECTION CONTEXTUELS (alternance brandbook)
   Indispensables au neumorphism : la card hérite du fond de sa
   section pour que l'ombre claire/sombre se calcule sur le bon ton.
   ================================================================= */
.sg-section--rose,
.sg-section--green { transition: background 200ms ease; }
body[data-cardstyle='neu'] .sg-section--rose { background: var(--color-rose-light); }
body[data-cardstyle='neu'] .sg-section--green { background: var(--color-bg-tertiary); }

/* =================================================================
   21. NEUMORPHISM CONTEXTUEL (activable via Tweaks : data-cardstyle)
   Le style plat reste la base ; ces règles ne s'appliquent que
   lorsque body[data-cardstyle="neu"]. Aucune bordure : l'ombre
   double (claire haut-gauche / sombre bas-droite) fait le relief.
   ================================================================= */

/* ---- Cards segments (sur fond blanc) ---- */
body[data-cardstyle='neu'] .card-segment {
  border: none;
  border-radius: 20px;
  padding: 28px;
  background: var(--color-bg-primary);
  box-shadow: var(--neu-white);
}
body[data-cardstyle='neu'] .card-segment::before {
  content: '';
  width: 40px;
  height: 3px;
  border-radius: 2px;
  background: var(--color-green);
}
body[data-cardstyle='neu'] .card-segment:hover,
body[data-cardstyle='neu'] .card-segment.is-hover {
  box-shadow: var(--neu-white-hover);
  transform: translateY(-2px);
}
body[data-cardstyle='neu'] .card-segment:active {
  box-shadow: var(--neu-white-inset);
  transform: translateY(0);
}

/* ---- Cards témoignages (sur fond rose) ---- */
body[data-cardstyle='neu'] .card-quote {
  border-radius: 20px;
  padding: 32px;
  box-shadow: var(--neu-rose);
}
body[data-cardstyle='neu'] .card-quote:hover {
  box-shadow: var(--neu-rose-hover);
}
body[data-cardstyle='neu'] .card-quote__mark {
  opacity: 0.12;
  text-shadow: -2px -2px 4px rgba(255, 255, 255, 0.8),
    2px 2px 4px rgba(220, 160, 148, 0.3);
}
body[data-cardstyle='neu'] .card-quote__sep {
  background: transparent;
  box-shadow: inset 0 1px 2px rgba(220, 160, 148, 0.4),
    inset 0 -1px 1px rgba(255, 255, 255, 0.8);
}

/* ---- Cards chiffres clés (sur fond vert) ---- */
body[data-cardstyle='neu'] .card-stat {
  border: none;
  border-top: none;
  border-radius: 20px;
  padding: 36px 28px;
  background: var(--color-bg-tertiary);
  box-shadow: var(--neu-green);
}
body[data-cardstyle='neu'] .card-stat:hover {
  box-shadow: var(--neu-green-hover);
}
body[data-cardstyle='neu'] .card-stat__num {
  font-size: 52px;
  text-shadow: -1px -1px 2px rgba(255, 255, 255, 0.8),
    1px 1px 3px rgba(90, 160, 110, 0.3);
}

/* ---- Boutons ---- */
body[data-cardstyle='neu'] .btn--primary {
  border-radius: 12px;
  box-shadow: -4px -4px 8px rgba(255, 255, 255, 0.4),
    4px 4px 8px rgba(43, 71, 98, 0.2);
}
body[data-cardstyle='neu'] .btn--primary:hover,
body[data-cardstyle='neu'] .btn--primary.is-hover {
  box-shadow: -5px -5px 10px rgba(255, 255, 255, 0.4),
    5px 5px 10px rgba(20, 80, 40, 0.3);
  transform: translateY(-1px);
}
body[data-cardstyle='neu'] .btn--primary:active {
  box-shadow: inset -2px -2px 4px rgba(255, 255, 255, 0.3),
    inset 2px 2px 6px rgba(20, 80, 40, 0.3);
  transform: translateY(0);
}
body[data-cardstyle='neu'] .btn--secondary {
  border-radius: 12px;
  box-shadow: -4px -4px 8px rgba(255, 160, 148, 0.45),
    4px 4px 8px rgba(150, 40, 28, 0.25);
}
body[data-cardstyle='neu'] .btn--secondary:active {
  box-shadow: inset -2px -2px 4px rgba(255, 180, 170, 0.35),
    inset 2px 2px 6px rgba(150, 40, 28, 0.3);
}
body[data-cardstyle='neu'] .btn--outline {
  background: #fff;
  border: none;
  border-radius: 12px;
  color: var(--color-text-primary);
  box-shadow: var(--neu-white);
}
body[data-cardstyle='neu'] .btn--outline:hover,
body[data-cardstyle='neu'] .btn--outline.is-hover {
  background: #fff;
  color: var(--color-text-primary);
  box-shadow: var(--neu-white-hover);
  transform: translateY(-1px);
}
body[data-cardstyle='neu'] .btn--outline:active {
  box-shadow: var(--neu-white-inset);
  transform: translateY(0);
}

/* ---- Accordéon : panneau blanc extrudé, triggers pressés ---- */
body[data-cardstyle='neu'] .accordion {
  background: #fff;
  border-radius: 20px;
  padding: 8px;
  box-shadow: var(--neu-white);
}
body[data-cardstyle='neu'] .accordion__item {
  border-bottom: none;
  margin: 4px 0;
}
body[data-cardstyle='neu'] .accordion__trigger {
  padding: 18px 20px;
  border-radius: 14px;
  transition: background 200ms ease, color 200ms ease, box-shadow 200ms ease;
}
body[data-cardstyle='neu'] .accordion__trigger:hover {
  background: var(--color-rose-light);
  box-shadow: inset -2px -2px 4px rgba(255, 255, 255, 0.9),
    inset 2px 2px 4px rgba(43, 71, 98, 0.08);
}
body[data-cardstyle='neu'] .accordion__item.is-open .accordion__trigger {
  background: var(--color-rose-light);
  box-shadow: inset -3px -3px 6px rgba(255, 255, 255, 0.9),
    inset 3px 3px 6px rgba(220, 160, 148, 0.2);
}
body[data-cardstyle='neu'] .accordion__panel-inner {
  padding: 4px 20px 18px;
}

/* ---- Callouts : fond blanc + bordure gauche colorée (correctif) ---- */
body[data-cardstyle='neu'] .callout {
  border-radius: 12px;
  padding: 20px 24px;
  background: #fff;
  border-left: 4px solid transparent;
  box-shadow: none;
  position: relative;
}
body[data-cardstyle='neu'] .callout--green {
  background: #fff;
  border-left: 4px solid var(--color-green);
  box-shadow: none;
}
body[data-cardstyle='neu'] .callout--rose {
  background: #fff;
  border-left: 4px solid var(--color-coral);
  box-shadow: none;
}
body[data-cardstyle='neu'] .callout::before {
  content: none;
}

/* ---- CTA finale : gradient pastel sobre, aucune ombre neu (correctif) ---- */
body[data-cardstyle='neu'] .cta-card--soft,
body[data-cardstyle='neu'] .cta-card--warm {
  border-radius: 16px;
  box-shadow: none;
  background: var(--gradient-cta);
  position: relative;
  overflow: hidden;
}
body[data-cardstyle='neu'] .cta-card--soft::after {
  content: none;
}
/* Boutons CTA = pilule, m\u00eame en mode neu (correctif) */
body[data-cardstyle='neu'] .cta-card .btn {
  border-radius: 28px;
}

/* ---- Badges ---- */
body[data-cardstyle='neu'] .badge {
  border: none;
  padding: 5px 12px;
}
body[data-cardstyle='neu'] .badge--new {
  box-shadow: -2px -2px 4px rgba(255, 255, 255, 0.9),
    2px 2px 4px rgba(220, 160, 148, 0.3);
}
body[data-cardstyle='neu'] .badge--success {
  box-shadow: -2px -2px 4px rgba(255, 255, 255, 0.8),
    2px 2px 4px rgba(90, 160, 110, 0.2);
}
body[data-cardstyle='neu'] .badge--urgent {
  box-shadow: -2px -2px 4px rgba(255, 130, 110, 0.5),
    2px 2px 6px rgba(180, 40, 20, 0.3);
}

/* ---- Mobile : ombres allégées (÷1.5) ---- */
@media (max-width: 767px) {
  body[data-cardstyle='neu'] .card-segment {
    box-shadow: -4px -4px 8px rgba(255, 255, 255, 0.85),
      4px 4px 8px rgba(43, 71, 98, 0.1);
  }
  body[data-cardstyle='neu'] .card-quote {
    box-shadow: -4px -4px 8px rgba(255, 255, 255, 0.8),
      4px 4px 8px rgba(220, 160, 148, 0.2);
  }
  body[data-cardstyle='neu'] .card-stat {
    box-shadow: -4px -4px 8px rgba(255, 255, 255, 0.75),
      4px 4px 8px rgba(90, 160, 110, 0.18);
  }
  body[data-cardstyle='neu'] .cta-card--soft {
    box-shadow: -8px -8px 16px rgba(255, 255, 255, 0.9),
      8px 8px 16px rgba(220, 160, 148, 0.22);
  }
}

/* =================================================================
   22. PHOTO RONDE SEGMENT (sur card-segment, remplace l'icône)
   ================================================================= */
.card-segment__photo {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  box-shadow: 0 0 0 3px var(--ring, var(--color-green));
  margin-bottom: 4px;
}

/* =================================================================
   23. MARQUEE — bande défilante réutilisable
   (partenaires · clients · réseaux · presse…)
   ================================================================= */
.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: 48px;
  width: max-content;
  animation: marqueeScroll var(--marquee-duration, 30s) linear infinite;
}
.marquee--reverse .marquee__track { animation-direction: reverse; }
.marquee:hover .marquee__track { animation-play-state: paused; }
@keyframes marqueeScroll { to { transform: translateX(-50%); } }

/* Item logo générique (placeholder) */
.marquee__item {
  height: 48px;
  min-width: 140px;
  padding: 0 20px;
  flex-shrink: 0;
  background: #f5f5f7;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: ui-monospace, monospace;
  font-size: 12px;
  color: #9aa3ad;
  white-space: nowrap;
  transition: opacity 200ms ease, filter 200ms ease;
}
.marquee--grayscale .marquee__item { filter: grayscale(1); opacity: 0.6; }
.marquee--grayscale .marquee__item:hover { filter: none; opacity: 1; }
/* Variante "pills" : réseaux / mots-clés */
.marquee__pill {
  height: 40px;
  padding: 0 20px;
  flex-shrink: 0;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 600;
  white-space: nowrap;
  background: var(--color-rose-light);
  color: var(--color-text-primary);
}

/* =================================================================
   24. CADRE IMAGE PRODUIT — frame réutilisable par produit
   ================================================================= */
.product-frame {
  position: relative;
  border-radius: 16px;
  overflow: hidden;
  background: var(--color-blue-light);
  box-shadow: var(--shadow-card);
  border: 3px solid var(--frame, var(--color-green));
}
.product-frame__media {
  width: 100%;
  height: 100%;
  display: block;
}
/* badge produit en coin */
.product-frame__tag {
  position: absolute;
  top: 12px;
  left: 12px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 700;
  color: #fff;
  padding: 5px 12px;
  border-radius: 999px;
  background: var(--frame, var(--color-green));
}
.product-frame--income { --frame: var(--color-green); }
.product-frame--packs  { --frame: var(--color-coral); }
.product-frame--coach  { --frame: var(--color-teal); }
/* ratios utilitaires déjà présents : .ratio-16-9 / .ratio-4-3 / .ratio-1-1 */

/* =================================================================
   25. PRODUCT CARD — image + nom bulle + desc + bénéfices + livrable
   ================================================================= */
.product-card {
  --accent: var(--color-green);
  --ink: var(--accent);        /* couleur lisible sur blanc : coches + CTA */
  --pill-text: #fff;           /* texte sur la bulle nom */
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid var(--color-blue-light);
  border-radius: 16px;
  overflow: hidden;
  transition: transform 220ms ease, box-shadow 220ms ease, border-color 220ms ease;
  will-change: transform;
}
.product-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 32px rgba(30, 53, 73, 0.12);
  border-color: var(--accent);
}
.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; }
.product-card--monallie { --accent: #F05742; --ink: #F05742; --pill-text: #fff; }

/* Frame image + bulle nom qui chevauche le bas */
.product-card__frame {
  position: relative;
  aspect-ratio: 16 / 10;
  background: var(--color-blue-light);
  border-bottom: 3px solid var(--accent);
}
.product-card__media { width: 100%; height: 100%; display: block; }
.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: 15px;
  line-height: 1.5;
  color: var(--color-text-primary);
  font-weight: 500;
}
.product-card__benefits {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 9px;
  margin: 0; padding: 0;
}
.product-card__benefits li {
  position: relative;
  padding-left: 26px;
  font-size: 14px;
  line-height: 1.45;
  color: var(--color-text-secondary);
}
.product-card__benefits li::before {
  content: '';
  position: absolute;
  left: 0; top: 2px;
  width: 16px; height: 16px;
  border-radius: 50%;
  background: var(--ink);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round' d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / 12px no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round' d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / 12px no-repeat;
}
/* CTA de card : lien texte fléché, ton de l'accent lisible sur blanc */
.product-card__cta {
  align-self: flex-start;
  margin-top: 4px;
  padding-top: 18px;
  border-top: 1px solid var(--color-blue-light);
  width: 100%;
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 14px; font-weight: 600;
  color: var(--ink);
  text-decoration: none;
  transition: gap 220ms cubic-bezier(0.16, 1, 0.3, 1);
}
.product-card__cta svg {
  transition: transform 220ms cubic-bezier(0.16, 1, 0.3, 1);
}
.product-card__cta:hover { gap: 11px; }
.product-card__cta:hover svg { transform: translateX(3px); }
.product-card__deliverable {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 2px;
  padding-top: 16px;
  border-top: 1px solid var(--color-blue-light);
}
.product-card__deliverable-label {
  flex-shrink: 0;
  font-size: 10px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase;
  color: #fff;
  background: var(--accent);
  padding: 4px 9px; border-radius: 6px;
}
.product-card__deliverable-value {
  font-size: 14px; font-weight: 600;
  color: var(--color-text-primary);
  line-height: 1.3;
}

/* 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; }
}