/* ============================================================
   KERBONE V2 — main.css
   ADN visuel : peaklab.fr
   Palette : Kerbone green atmosphérique
   Font : Montserrat (Google Fonts)
   ============================================================ */

/* ── RESET ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
img { max-width: 100%; height: auto; display: block; }
a { text-decoration: none; color: inherit; }
ul, ol { list-style: none; }

/* ── DESIGN TOKENS (ADN peaklab.fr → palette Kerbone) ── */
:root {
  /* Couleurs principales */
  --c-black:          #000000;
  --c-forest-deep:    #0d1f19;   /* équivalent de #200A00 chez PeakLab */
  --c-forest:         #1d3d2f;   /* sections sombres (= bg-black de PeakLab) */
  --c-forest-mid:     #2e5c42;
  --c-navy:           #1a2f5e;
  --c-sage:           #5a9a72;   /* accent principal (= #fdaf5c chez PeakLab) */
  --c-sage-light:     #8dc4a2;
  --c-mist:           #d8f0e4;
  --c-gold:           #c4a84a;   /* accent secondaire */

  /* Fonds */
  --c-bg-white:       #ffffff;
  --c-bg-light:       #f4f5f6;   /* identique à PeakLab bg-white-default */
  --c-bg-border:      #e4e4e7;   /* identique à PeakLab bg-white-border */

  /* Fonds sombres */
  --c-bg-dark:        #1d3d2f;   /* = #1a1a1a chez PeakLab */
  --c-bg-dark-fore:   #2e5c42;   /* = #333 chez PeakLab */
  --c-bg-dark-border: #3d6e52;   /* = #4d4d4d chez PeakLab */

  /* Textes sur fond clair */
  --c-text-title:     #000000;
  --c-text-default:   #555555;
  --c-text-muted:     #999999;

  /* Textes sur fond sombre */
  --c-text-dark-title:   #ffffff;
  --c-text-dark-default: #b2c4b8;  /* = #b2b2b2 chez PeakLab, teinté vert */
  --c-text-dark-muted:   #6b8070;  /* = #666 chez PeakLab, teinté vert */

  /* Border radius (fidèle à PeakLab) */
  --r-sm:     6px;    /* boutons — identique PeakLab rounded-[6px] */
  --r-md:     10px;   /* nav items */
  --r-card:   14px;   /* cartes — identique PeakLab rounded-xl ≈ 14px */
  --r-hero:   16px;   /* hero card mobile */
  --r-hero-lg:24px;   /* hero card desktop (légèrement + grand que PeakLab 12px) */
  --r-full:   9999px; /* pills/eyebrows */

  /* Typographie */
  --font:     'Montserrat', sans-serif;

  /* Transitions */
  --ease:     cubic-bezier(0.4, 0, 0.2, 1);
  --dur:      0.3s;

  /* Shimmer (reflet balayant le texte du hero) */
  --kv2-shimmer-hi: rgba(255, 255, 255, 0.48);

  /* ════════════════════════════════════════════════════════════
     ÉCHELLE TYPOGRAPHIQUE FLUIDE (design tokens)
     clamp(min mobile → MAX desktop). Les MAX = tailles desktop de
     référence ; le desktop rend donc toujours au MAX (inchangé), seul
     le mobile se réduit. Mécanisme natif, pas de media query.
     ════════════════════════════════════════════════════════════ */
  --text-title-1: clamp(2rem,    1.09rem + 3.88vw, 4rem);       /* 32 → 64px (min mobile abaissé) */
  --text-title-2: clamp(1.75rem, 1.18rem + 2.42vw, 3rem);       /* 28 → 48px (min mobile abaissé) */
  --text-title-3: clamp(1.5rem,  1.05rem + 1.94vw, 2.5rem);     /* 24 → 40px (min mobile abaissé) */
  --text-title-4: clamp(1.3rem,  0.98rem + 1.36vw, 2rem);       /* 20.8 → 32px (min mobile abaissé) */
  --text-title-5: clamp(1.6rem, 1.5308rem + 0.3077vw, 1.75rem); /* 25.6 → 28px */
  --text-title-6: clamp(1.4rem, 1.3538rem + 0.2051vw, 1.5rem);  /* 22.4 → 24px */
  --text-title-7: clamp(1.2rem, 1.1769rem + 0.1026vw, 1.25rem); /* 19.2 → 20px */
  --text-subheading: 1.1875rem; /* 19px  · line-height 1.2 */
  --text-body:       1rem;      /* 16px  · line-height 1 */
  --text-body-bold:  1rem;      /* 16px  · line-height 1 · 700 */
  --text-body-big:   1.125rem;  /* 18px  · line-height 1.125 */
  --text-body-small: 0.875rem;  /* 14px  · line-height 0.875 */

  /* ════ Dimensionnement fluide cartes/icônes (MAX = valeur desktop actuelle relevée) ════ */
  --space-card-padding:   clamp(0.95rem, 0.66rem + 1.45vw, 1.5rem);  /* 15.2 → 24px (padding horizontal cartes piliers) */
  --space-card-padding-y: clamp(1rem,    0.60rem + 2.00vw, 1.75rem); /* 16   → 28px (padding vertical cartes piliers) */
  --size-icon-sm: clamp(1.25rem, 1.09rem + 0.80vw, 1.5rem); /* 20   → 24px */
  --size-icon-md: clamp(1.6rem,  1.19rem + 2.05vw, 2.5rem); /* 25.6 → 40px (icônes des 6 piliers) */
  --size-icon-lg: clamp(2.4rem,  1.90rem + 2.50vw, 3.5rem); /* 38.4 → 56px */
}

/* ════════════════════════════════════════════════════════════
   CLASSES UTILITAIRES TYPOGRAPHIQUES (design system)
   ════════════════════════════════════════════════════════════ */
.text-title-1 { font-size: var(--text-title-1); line-height: 1.05; }
.text-title-2 { font-size: var(--text-title-2); line-height: 1.10; }
.text-title-3 { font-size: var(--text-title-3); line-height: 1.15; }
.text-title-4 { font-size: var(--text-title-4); line-height: 1.20; }
.text-title-5 { font-size: var(--text-title-5); line-height: 1.20; }
.text-title-6 { font-size: var(--text-title-6); line-height: 1.25; }
.text-title-7 { font-size: var(--text-title-7); line-height: 1.30; }
.text-subheading  { font-size: var(--text-subheading);  line-height: 1.2; }
.text-body        { font-size: var(--text-body);        line-height: 1; }
.text-body-bold   { font-size: var(--text-body-bold);   line-height: 1; font-weight: 700; }
.text-body-big    { font-size: var(--text-body-big);    line-height: 1.125; }
.text-body-small  { font-size: var(--text-body-small);  line-height: 0.875; }

/* ── BASE ── */
body {
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.5;
  color: var(--c-text-title);
  background: var(--c-bg-white);
  -webkit-font-smoothing: antialiased;
}

/* ── TYPOGRAPHIE ── */
h1 {
  font-family: var(--font);
  font-weight: 800;
  font-size: clamp(23px, 6vw, 72px);   /* max/vw desktop inchangés ; plancher mobile 20→23 (plus imposant, reste 3 lignes) */
  line-height: 1.0;
  letter-spacing: -0.03em;
  color: var(--c-text-dark-title);
}

h2 {
  font-family: var(--font);
  font-weight: 800;
  font-size: clamp(22px, 3.5vw, 44px);   /* max 44px desktop inchangé ; plancher mobile abaissé 28→22 */
  line-height: 1.1;
  letter-spacing: -0.025em;
  color: var(--c-text-title);
}

h3 {
  font-family: var(--font);
  font-weight: 700;
  font-size: clamp(16px, 1.5vw, 20px);
  line-height: 1.3;
  color: var(--c-text-title);
}

p {
  font-weight: 400;
  line-height: 1.625;
  color: var(--c-text-default);
}

/* ── CONTENEUR ── */
.kv2-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 32px;
}

@media (max-width: 768px) {
  .kv2-container { padding: 0 16px; }
}

/* ── PAGES DE CONTENU (mentions légales, confidentialité, etc.) ── */
.kv2-content {
  padding-top: 148px;
  padding-bottom: 96px;
  min-height: 60vh;
}
.kv2-content__article {
  max-width: 760px;
  margin: 0 auto;
}
.kv2-content__title {
  font-family: var(--font);
  font-weight: 500;
  font-size: clamp(30px, 1.2rem + 2.6vw, 46px);
  line-height: 1.1;
  color: var(--c-text-title);
  margin: 0 0 8px;
}
.kv2-prose {
  font-family: var(--font);
  color: var(--c-text-default);
}
.kv2-prose h2 {
  font-family: var(--font);
  font-weight: 600;
  font-size: 1.25rem;
  color: var(--c-forest, var(--c-text-title));
  margin: 40px 0 10px;
  line-height: 1.25;
}
.kv2-prose h2:first-of-type { margin-top: 28px; }
.kv2-prose p {
  font-size: 1rem;
  line-height: 1.7;
  margin: 0 0 16px;
  color: var(--c-text-default);
}
.kv2-prose a {
  color: var(--c-sage, #5a9a72);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.kv2-prose a:hover { opacity: 0.8; }
@media (max-width: 768px) {
  .kv2-content { padding-top: 120px; padding-bottom: 64px; }
  .kv2-prose h2 { font-size: 1.15rem; margin-top: 32px; }
}

/* ── ANIMATIONS SCROLL — effet « pop » (scale + translate + flou, ressort) ── */
.kv2-fade {
  opacity: 0;
  transform: translateY(42px) scale(0.955);
  filter: blur(6px);
  transition:
    opacity 0.65s cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.78s cubic-bezier(0.34, 1.45, 0.55, 1),   /* léger rebond = pop */
    filter 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}
.kv2-fade.visible {
  opacity: 1;
  transform: translateY(0) scale(1);
  filter: blur(0);
}

.kv2-stagger > * {
  opacity: 0;
  transform: translateY(30px) scale(0.94);
  transition:
    opacity 0.55s cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.66s cubic-bezier(0.34, 1.5, 0.55, 1);    /* pop en cascade */
}
.kv2-stagger.visible > *:nth-child(1) { transition-delay: 0.00s; }
.kv2-stagger.visible > *:nth-child(2) { transition-delay: 0.08s; }
.kv2-stagger.visible > *:nth-child(3) { transition-delay: 0.16s; }
.kv2-stagger.visible > *:nth-child(4) { transition-delay: 0.24s; }
.kv2-stagger.visible > *:nth-child(5) { transition-delay: 0.32s; }
.kv2-stagger.visible > *:nth-child(6) { transition-delay: 0.40s; }
.kv2-stagger.visible > *:nth-child(7) { transition-delay: 0.48s; }
.kv2-stagger.visible > *:nth-child(8) { transition-delay: 0.56s; }
.kv2-stagger.visible > * {
  opacity: 1;
  transform: translateY(0) scale(1);
}

/* accessibilité : apparition instantanée si l'utilisateur limite les animations */
@media (prefers-reduced-motion: reduce) {
  .kv2-fade,
  .kv2-stagger > * {
    transition-duration: 0.001ms;
    transform: none;
    filter: none;
  }
}

/* ════════════════════════════════════
   COMPOSANTS PARTAGÉS
════════════════════════════════════ */

/* ── EYEBROW / TAG ── */
.kv2-eyebrow {
  display: inline-block;
  background: var(--c-bg-light);
  color: var(--c-text-muted);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 6px 12px;
  border-radius: var(--r-full);
  margin-bottom: 16px;
}

.kv2-eyebrow--glass {
  background: rgba(255, 255, 255, 0.15);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  color: rgba(255, 255, 255, 0.75);
  border: 1px solid rgba(255, 255, 255, 0.20);
}

/* ── BOUTONS ── */
.kv2-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font);
  font-size: 15px;
  font-weight: 600;
  padding: 10px 20px;
  border-radius: var(--r-sm);
  border: none;
  cursor: pointer;
  transition: background var(--dur) var(--ease),
              transform 0.2s var(--ease),
              box-shadow 0.2s var(--ease);
  line-height: 1;
}

.kv2-btn--dark {
  background: var(--c-forest-deep);
  color: #ffffff;
}
.kv2-btn--dark:hover {
  background: var(--c-forest);
  transform: translateY(-1px);
  box-shadow: 0 8px 24px rgba(13, 31, 25, 0.30);
}

.kv2-btn--white {
  background: #ffffff;
  color: var(--c-forest-deep);
}
.kv2-btn--white:hover {
  background: var(--c-bg-light);
  transform: translateY(-1px);
  box-shadow: 0 8px 24px rgba(0,0,0,0.15);
}

.kv2-btn--sage {
  background: var(--c-sage);
  color: #ffffff;
}
.kv2-btn--sage:hover {
  background: var(--c-forest-mid);
  transform: translateY(-1px);
}

.kv2-btn--outline {
  background: transparent;
  color: var(--c-text-default);
  border: 1.5px solid var(--c-bg-border);
}
.kv2-btn--outline:hover {
  border-color: var(--c-text-default);
  color: var(--c-text-title);
}

.kv2-btn--lg {
  font-size: 16px;
  padding: 13px 26px;
}

/* ════════════════════════════════════
   BARRE DE MENTION (top) + NAVIGATION FLOTTANTE
════════════════════════════════════ */
/* Bandeau d'annonce vert foncé, pleine largeur, fixé tout en haut */
.kv2-topbar {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: 40px;
  z-index: 1001;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 16px;
  background: var(--c-forest);
  color: #fff;
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.01em;
  text-align: center;
}
.kv2-topbar strong { color: var(--c-sage-light); font-weight: 700; }
/* Desktop : 1 seul message, centré, statique (rendu inchangé). Le duplicata (marquee)
   ne sert qu'en mobile. */
.kv2-topbar__viewport { max-width: 100%; }
.kv2-topbar__track { display: inline-flex; }
.kv2-topbar__msg { white-space: nowrap; }
.kv2-topbar__msg--dup { display: none; }
@keyframes kv2-topbar-scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .kv2-topbar__track { animation: none; } }

/* Header flottant noir : détaché, arrondi, par-dessus le hero */
.kv2-nav {
  position: fixed;
  top: 52px;
  left: 50%;
  transform: translateX(-50%);
  width: 82%;
  max-width: 1080px;
  height: 64px;
  z-index: 1000;
  display: flex;
  align-items: center;
  padding: 0 14px 0 22px;
  /* Verre dépoli premium (frosted glass, façon notifications Apple) en permanence */
  background: rgba(18, 18, 18, 0.45);
  -webkit-backdrop-filter: blur(20px) saturate(160%);
  backdrop-filter: blur(20px) saturate(160%);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 16px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.18),
              0 1px 0 rgba(255, 255, 255, 0.06) inset;
  transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
/* Au scroll (au-dessus du contenu) : légèrement plus opaque pour garder la lisibilité */
.kv2-nav.scrolled {
  background: rgba(18, 18, 18, 0.60);
  border-color: rgba(255, 255, 255, 0.12);
  box-shadow: 0 10px 34px rgba(0, 0, 0, 0.28),
              0 1px 0 rgba(255, 255, 255, 0.06) inset;
}

/* Logo toujours blanc (header sombre) */
.kv2-nav__logo { display: flex; align-items: center; }
.kv2-nav__logo img { height: 50px; width: auto; }
.kv2-nav__logo-dark  { display: none !important; }
.kv2-nav__logo-white { display: block; }

/* Liens centrés au milieu du header (logo à gauche, actions à droite) */
.kv2-nav__links {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 4px;
  margin: 0;
}

/* Groupe d'actions à droite : CTA + WhatsApp */
.kv2-nav__right {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-left: auto;
}
.kv2-nav__wa {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.2s var(--ease);
}
.kv2-nav__wa img { height: 32px; width: 32px; display: block; }
.kv2-nav__wa:hover { transform: translateY(-1px) scale(1.05); }
.kv2-nav__links a {
  font-size: 14px;
  font-weight: 500;
  color: rgba(255,255,255,0.92);
  padding: 8px 14px;
  border-radius: var(--r-md);
  transition: color var(--dur), background var(--dur);
}
.kv2-nav__links a:hover {
  background: rgba(255,255,255,0.10);
  color: #ffffff;
}

/* CTA : blanc plein sur header noir */
.kv2-nav__cta {
  background: #ffffff;
  color: var(--c-forest-deep) !important;
  font-size: 14px !important;
  padding: 9px 18px !important;
  font-weight: 600 !important;
  border-radius: var(--r-sm) !important;
  transition: background var(--dur), transform 0.2s !important;
}
.kv2-nav__cta:hover {
  background: var(--c-sage-light) !important;
  transform: translateY(-1px) !important;
}
/* Icône téléphone verte (même vert que « Le reste, c'est notre job. » = #08b530) dans le CTA */
.kv2-cta-phone {
  width: 1.15em;
  height: 1.15em;
  color: #08b530;
  flex: none;
}

/* Mobile nav */
.kv2-nav__hamburger {
  display: none;
  flex-direction: column;
  gap: 5px;
  cursor: pointer;
  padding: 6px;
  margin-left: auto;
}
.kv2-nav__hamburger span {
  display: block;
  width: 22px; height: 2px;
  background: #fff;
  border-radius: 2px;
  transition: all 0.3s;
}

.kv2-mobile-menu {
  display: none;
  position: fixed;
  inset: 0;
  background: #0b1a14;
  padding: 132px 28px 40px;
  flex-direction: column;
  gap: 18px;
  z-index: 999;
}
.kv2-mobile-menu.open { display: flex; }
.kv2-mobile-menu a { color: #fff; font-size: 20px; font-weight: 700; }
.kv2-mobile-wa { display: inline-flex; align-items: center; gap: 10px; }
.kv2-mobile-wa img { height: 26px; width: 26px; }

@media (max-width: 768px) {
  .kv2-nav__links { display: none; }
  .kv2-nav__right { display: none; }
  .kv2-nav__hamburger { display: flex; }
  /* Bandeau sur UNE seule ligne en mobile : texte court, police fluide qui
     rétrécit pour toujours tenir (plancher 11px), padding resserré. */
  /* Bandeau en MARQUEE : le message complet défile ; fondu de chaque côté pour l'harmonie */
  .kv2-topbar { height: 34px; font-size: 12px; line-height: 1.3; padding: 0; justify-content: flex-start; }
  .kv2-topbar__viewport {
    width: 100%; overflow: hidden;
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 7%, #000 93%, transparent 100%);
            mask-image: linear-gradient(90deg, transparent 0, #000 7%, #000 93%, transparent 100%);
  }
  .kv2-topbar__track { width: max-content; animation: kv2-topbar-scroll 22s linear infinite; }
  .kv2-topbar__msg { padding-right: 48px; }        /* espace entre les 2 copies (boucle sans saut) */
  .kv2-topbar__msg--dup { display: inline; }
  .kv2-nav { top: 46px; height: 54px; padding: 0 10px 0 16px; width: calc(100% - 24px); }
  .kv2-nav__logo img { height: 38px; }
  .kv2-page { padding-top: 34px; }
}

/* ════════════════════════════════════
   HERO
════════════════════════════════════ */
.kv2-page {
  padding-top: 40px;
  background: var(--c-bg-white);
}

.kv2-hero {
  padding: 0;                 /* plein cadre : le vert va bord à bord */
  background: var(--c-bg-white);
}

.kv2-hero__card {
  position: relative;
  width: 100%;
  max-width: none;            /* pleine largeur, aucune marge blanche latérale */
  margin: 0;
  border-radius: 0;          /* coins carrés : le vert englobe tout, y compris en haut */
  overflow: hidden;
  /* hauteur pilotée par le contenu (plus de min-height:74vh) : les CTA et la
     bande partenaires se suivent avec un espacement symétrique et stable. */

  background: url('/wp-content/uploads/2026/06/new-hero.png') center center / cover no-repeat;
}

/* Fond hero animé : Ken Burns (image) + halos lumineux qui dérivent */
.kv2-hero__card::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  background: url('/wp-content/uploads/2026/06/new-hero.png') center center / cover no-repeat;
  transform-origin: center;
  animation: kv2-hero-kenburns 16s ease-in-out infinite;
}
.kv2-hero__card::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    radial-gradient(52% 62% at 16% 26%, rgba(141, 196, 162, 0.60), transparent 70%),
    radial-gradient(48% 58% at 84% 64%, rgba(255, 255, 255, 0.60), transparent 72%),
    radial-gradient(40% 50% at 58% 12%, rgba(141, 196, 162, 0.45), transparent 72%);
  animation: kv2-hero-glow 9s ease-in-out infinite alternate;
}
@keyframes kv2-hero-kenburns {
  0%   { transform: scale(1.03) translate(1.4%, 0.9%); }
  50%  { transform: scale(1.19) translate(-3.4%, -2.4%); }
  100% { transform: scale(1.03) translate(1.4%, 0.9%); }
}
@keyframes kv2-hero-glow {
  0%   { opacity: 0.6;  transform: translate(-3%, 1.5%) scale(1); }
  50%  { opacity: 1;    transform: translate(2.5%, -2.5%) scale(1.2); }
  100% { opacity: 0.8;  transform: translate(5%, -4%) scale(1.32); }
}
@media (prefers-reduced-motion: reduce) {
  .kv2-hero__card::before { animation: none; }
  .kv2-hero__card::after  { animation: none; opacity: 0.8; }
}

/* (plein cadre : plus d'arrondi sur desktop) */

.kv2-hero__geo {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  pointer-events: none;
}

/* Halo lumineux façon mister-ia : puits de lumière derrière le titre,
   qui éclaire le texte du hero. Animé en douceur (pulsation). */
.kv2-hero__overlay {
  display: block;
  position: absolute; inset: 0;
  z-index: 1;
  pointer-events: none;
  /* puits de lumière radial (PAS un bandeau plat) centré derrière le titre :
     le haut reste vert, l'effet lumineux est franc et pulse. */
  background: radial-gradient(
    62% 52% at 50% 40%,
    rgba(255, 255, 255, 0.98) 0%,
    rgba(255, 255, 255, 0.64) 28%,
    rgba(216, 240, 228, 0.30) 52%,
    transparent 72%
  );
  animation: kv2-hero-halo 6.5s ease-in-out infinite alternate;
}
@keyframes kv2-hero-halo {
  0%   { opacity: 0.82; transform: scale(1); }
  100% { opacity: 1;    transform: scale(1.08); }
}
@media (prefers-reduced-motion: reduce) {
  .kv2-hero__overlay { animation: none; opacity: 0.9; }
}

/* Dégradé blanc haut + bas du hero : recrée le blanc cuit de l'image
   (rognée par le cover de l'image portrait) et assure une transition
   douce vers la bande blanche des partenaires en dessous. Le vert
   saturé reste visible au centre. Couche stable, sous le contenu. */
.kv2-hero__fade {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  /* dégradé bas très progressif (nombreux paliers) : le vert glisse vers le
     blanc sans cassure, jusqu'à la bande partenaires. */
  /* dégradé bas étalé haut (dès ~48%) pour rester fondu malgré la faible
     réserve : le vert glisse vers le blanc sans cassure jusqu'aux logos. */
  background: linear-gradient(
    to bottom,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 0) 46%,
    rgba(255, 255, 255, 0.06) 58%,
    rgba(255, 255, 255, 0.15) 68%,
    rgba(255, 255, 255, 0.28) 77%,
    rgba(255, 255, 255, 0.45) 85%,
    rgba(255, 255, 255, 0.66) 92%,
    rgba(255, 255, 255, 0.85) 97%,
    #ffffff 100%
  );
}

.kv2-hero__content {
  position: relative;
  z-index: 2;
  /* contenu remonté + grande réserve en bas : laisse la place à un
     dégradé vert -> blanc très progressif avant la bande partenaires */
  padding: 80px 24px 28px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}

@media (min-width: 1024px) {
  .kv2-hero__content {
    /* top/bottom recalculés pour CENTRER la bulle (nav↔texte) et les CTA (texte↔logos)
       SANS déplacer le texte : padTop+pillMB reste = 167 (texte figé),
       h1MB+padBottom reste = 107 (logos figés). */
    padding: 121px 24px 53px;
  }
  /* Desktop : chaque phrase sur 1 ligne (hero en 2 lignes), police à peine réduite,
     même police / mêmes effets ; titre reste centré entre le pill et les CTA. */
  .kv2-hero__content h1 { font-size: clamp(50px, 0.3rem + 4.6vw, 72px); }
  .kv2-hero__content h1 span,
  .kv2-hero__content h1 em { white-space: nowrap; }
  /* Bulle centrée entre bas de nav et haut du texte ; CTA centrés entre bas du texte et haut des logos.
     (préfixe .kv2-hero = spécificité) */
  .kv2-hero .kv2-hero__pill { margin-bottom: 46px; }
  .kv2-hero .kv2-hero__content h1 { margin-bottom: 54px; }
  .kv2-hero .kv2-hero__ctas { margin-top: 0; }
}

.kv2-hero__pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(13,31,25,0.08);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(13,31,25,0.15);
  border-radius: var(--r-full);
  padding: 6px 16px;
  color: #1d3d2f;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-bottom: 24px;
}
.kv2-hero__pill::before {
  content: '';
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--c-sage-light);
  flex-shrink: 0;
}

.kv2-hero__content h1 {
  max-width: 1340px;           /* assez large pour que chaque phrase tienne sur 1 ligne en desktop large */
  text-align: center;
  font-weight: 400;
  margin-bottom: 14px;
  color: var(--c-text-title);  /* noir : phrases 1 & 2 (le shimmer balaie par-dessus) */
  text-wrap: balance;          /* découpage équilibré si retour à la ligne (petits écrans / mobile) */
}
/* phrase 1 (span) et phrase 2 (accent sage) chacune sur sa propre ligne */
.kv2-hero__content h1 span,
.kv2-hero__content h1 em { display: block; }

/* ── Shimmer : reflet lumineux balayant le texte (clip:text + gradient animé)
   Reproduit l'effet du composant React fourni, en CSS natif.
   currentColor = la couleur propre de chaque phrase (forest / sage) → conservée. ── */
.kv2-shimmer {
  -webkit-text-fill-color: transparent;
  /* étend la zone de clip vers le bas pour ne pas couper les descendantes (g, p),
     compensé par la marge négative pour garder l'espacement des lignes intact */
  padding-bottom: 0.15em;
  margin-bottom: -0.15em;
  background-color: currentColor;
  background-image: linear-gradient(
    to right,
    currentColor 0%,
    var(--kv2-shimmer-hi) 40%,
    var(--kv2-shimmer-hi) 60%,
    currentColor 100%
  );
  -webkit-background-clip: text;
  background-clip: text;
  background-repeat: no-repeat;
  background-size: 50% 200%;
  background-position-x: 250%;
  /* période commune 6s : 1,5s de balayage puis attente, déphasée par ligne */
  animation: kv2-shimmer-move 6s linear infinite;
}
/* décalage = effet "lecture" ligne après ligne, puis respiration avant la boucle */
.kv2-shimmer--1 { animation-delay: 0s; }
.kv2-shimmer--2 { animation-delay: 1.5s; }
.kv2-shimmer--3 { animation-delay: 3s; }
@keyframes kv2-shimmer-move {
  0%   { background-position-x: -100%; }   /* 0 → 1,5s : la ligne se fait balayer */
  25%  { background-position-x: 250%; }
  100% { background-position-x: 250%; }    /* reste hors-champ jusqu'à la fin du cycle */
}
@media (prefers-reduced-motion: reduce) {
  .kv2-shimmer {
    -webkit-text-fill-color: currentColor;
    background: none;
    animation: none;
  }
}

.kv2-hero__sub {
  font-size: clamp(16px, 1.8vw, 20px);
  color: #2e5c42;
  max-width: 540px;
  line-height: 1.6;
  margin-bottom: 32px;
  text-align: center;
}

.kv2-hero__ctas {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  justify-content: center;
  margin-top: 30px;      /* + h1 margin-bottom 14 = 44, == gap CTA -> logos */
  margin-bottom: 0;
}

/* ── Hero mobile : pill fortement réduit + CTA même largeur / plus hauts ── */
@media (max-width: 768px) {
  /* padding horizontal réduit → plus de largeur pour agrandir les phrases (3 lignes) */
  .kv2-hero__content { padding-left: 12px; padding-right: 12px; }
  .kv2-hero__pill {
    font-size: 8px; padding: 4px 10px; gap: 5px;
    letter-spacing: 0.02em; margin-bottom: 24px;   /* espace pill → phrases */
    white-space: nowrap;                 /* toujours sur UNE ligne */
  }
  .kv2-hero__pill::before { width: 4px; height: 4px; }
  /* même distance phrases → CTA que pill → phrases (24px) */
  .kv2-hero__content h1 { margin-bottom: 24px; }
  .kv2-hero__ctas {
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
    max-width: 244px;                    /* conteneur réduit (~-20%) */
    margin-top: 0;                       /* le gap vient du margin-bottom du h1 (24px) */
    margin-left: auto; margin-right: auto;
  }
  /* même largeur (100%) + taille réduite ~20% (font 13→10.5, padding 13→10) */
  .kv2-hero__ctas .kv2-btn { width: 100%; font-size: 10.5px; padding: 10px 14px; }
  .kv2-hero__ctas .kv2-btn:not(.kv2-btn--chevron) { justify-content: center; } /* « Découvrir nos offres » centré */
  .kv2-hero__ctas .kv2-btn--chevron { min-width: 0; padding: 10px 36px 10px 14px; }
  .kv2-hero__ctas .kv2-btn--chevron .btn-chevron { width: 26px; }
}

.kv2-hero__trust {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: center;
}
.kv2-hero__trust-item {
  background: rgba(13,31,25,0.08);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border: 1px solid rgba(13,31,25,0.15);
  border-radius: var(--r-full);
  padding: 5px 14px;
  font-size: 12px;
  font-weight: 600;
  color: #1d3d2f;
}

.kv2-hero__rating {
  margin-top: 20px;
  font-size: 13px;
  color: rgba(255,255,255,0.55);
  font-weight: 500;
}

.kv2-hero__content > * {
  opacity: 0;
  transform: translateY(16px);
  animation: kv2HeroReveal 0.65s var(--ease) forwards;
}
.kv2-hero__content > *:nth-child(1) { animation-delay: 0.15s; }
.kv2-hero__content > *:nth-child(2) { animation-delay: 0.30s; }
.kv2-hero__content > *:nth-child(3) { animation-delay: 0.45s; }
.kv2-hero__content > *:nth-child(4) { animation-delay: 0.58s; }
.kv2-hero__content > *:nth-child(5) { animation-delay: 0.70s; }
.kv2-hero__content > *:nth-child(6) { animation-delay: 0.80s; }
@keyframes kv2HeroReveal { to { opacity: 1; transform: none; } }

/* ════════════════════════════════════
   LOGOS CAROUSEL
════════════════════════════════════ */
/* Bande partenaires : pleine largeur sur fond blanc, entre le hero et la
   section douleurs. Logos en grand, défilants, masqués aux extrémités
   (invisibles aux bords → nets vers le centre de la page). */
.kv2-logos {
  background: var(--c-bg-white);
  padding: 16px 0 60px;   /* gap CTA -> logos ~= gap titre -> CTA */
}
.kv2-logos__label {
  text-align: center;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--c-text-muted);
  margin-bottom: 20px;
}
.kv2-logos__track-wrap {
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 22%, #000 78%, transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0%, #000 22%, #000 78%, transparent 100%);
}
.kv2-logos__track {
  display: flex;
  align-items: center;
  width: max-content;
  animation: kv2LogoScroll 38s linear infinite;
}
.kv2-logos__track:hover { animation-play-state: paused; }
@keyframes kv2LogoScroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
.kv2-logos__track img {
  height: 58px;
  width: auto;
  object-fit: contain;
  flex-shrink: 0;
  margin-right: 96px; /* espacement via marge (trailing inclus) → boucle -50% sans saut */
}
@media (max-width: 768px) {
  .kv2-logos { padding: 14px 0 36px; }
  .kv2-logos__track img { height: 30px; margin-right: 44px; }   /* logos partenaires réduits en mobile */
}
@media (prefers-reduced-motion: reduce) {
  .kv2-logos__track { animation: none; }
}

/* ════════════════════════════════════
   SECTIONS — LAYOUT COMMUN
════════════════════════════════════ */
.kv2-section {
  padding: 74px 0;
}
.kv2-section--light { background: var(--c-bg-white); }
.kv2-section--gray  { background: var(--c-bg-light); }

.kv2-section__header {
  margin-bottom: 56px;
}
.kv2-section__header--center { text-align: center; }
.kv2-section__header--center .kv2-eyebrow { display: block; }
.kv2-section__sub {
  font-size: 18px;
  color: var(--c-text-default);
  max-width: 520px;
  margin-top: 12px;
  line-height: 1.65;
}
.kv2-section__header--center .kv2-section__sub {
  margin: 12px auto 0;
}
/* #plateforme : sous-titre sur une seule ligne (desktop) + style/espacements harmonisés */
#plateforme .kv2-section__sub {
  max-width: 680px;
  font-size: clamp(0.85rem, 1.2vw, 1.05rem);   /* plancher mobile abaissé : chaque phrase tient sur 1 ligne */
  font-weight: 400;
  color: #666666;
}
/* saut de ligne du sous-titre : masqué en desktop (1 ligne), affiché en mobile (1 phrase/ligne) */
.kv2-sub-br { display: none; }
@media (max-width: 768px) { .kv2-sub-br { display: inline; } }
#plateforme .kv2-construit-title { margin-bottom: 2rem; font-size: clamp(22px, 0.5rem + 2.3vw, 37px); } /* plancher mobile 22px INCHANGÉ ; desktop plafonné à 37px pour tenir sur 1 ligne */
#plateforme .kv2-section__header { margin-bottom: 2rem; }
#plateforme .modules-grid { margin-bottom: 0; }
#plateforme .kv2-plateforme__visual { margin-top: 0; }

/* Les 2 fragments d'une même phrase (au-dessus / sous les 6 cartes) :
   style typographique STRICTEMENT identique pour signaler la continuité. */
.section-piliers__phrase {
  font-family: inherit;
  font-size: clamp(1rem, 1.3vw, 1.15rem);
  font-weight: 700;
  font-style: italic;
  color: var(--c-forest);
  text-align: center;
  letter-spacing: 0.01em;
  display: block;
  width: 100%;
}
.section-piliers__phrase--top { margin-bottom: 2.5rem; }
.section-piliers__phrase--bottom { margin-top: 3rem; margin-bottom: 2.5rem; }

/* ════════════════════════════════════
   CE QU'ON CONSTRUIT — SERVICES
════════════════════════════════════ */
.kv2-services__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
}
@media (max-width: 768px) {
  .kv2-services__grid { grid-template-columns: 1fr; }
}

.kv2-service-card {
  background: var(--c-bg-white);
  border: 1px solid var(--c-bg-border);
  border-radius: var(--r-card);
  padding: 36px;
  display: flex;
  flex-direction: column;
  transition: border-color var(--dur), box-shadow var(--dur), transform 0.2s;
  cursor: pointer;
}
.kv2-service-card:hover {
  border-color: var(--c-sage-light);
  box-shadow: 0 8px 32px rgba(90,154,114,0.12);
  transform: translateY(-3px);
}

.kv2-service-card__icon {
  width: 48px; height: 48px;
  background: var(--c-bg-light);
  border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 20px;
  transition: background var(--dur);
}
.kv2-service-card:hover .kv2-service-card__icon {
  background: var(--c-sage);
}
.kv2-service-card__icon svg {
  width: 22px; height: 22px;
  stroke: var(--c-sage); fill: none;
  stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
  transition: stroke var(--dur);
}
.kv2-service-card:hover .kv2-service-card__icon svg { stroke: white; }

.kv2-service-card h3 {
  margin-bottom: 10px;
  color: var(--c-text-title);
  font-size: 17px;
}
.kv2-service-card p {
  font-size: 14px;
  color: var(--c-text-default);
  line-height: 1.65;
  flex: 1;
}
.kv2-service-card__link {
  display: inline-flex; align-items: center; gap: 6px;
  margin-top: 20px;
  font-size: 13px; font-weight: 600;
  color: var(--c-sage);
  transition: gap 0.2s;
}
.kv2-service-card:hover .kv2-service-card__link { gap: 10px; }

/* ════════════════════════════════════
   VOUS VOUS RECONNAISSEZ — cartes douleurs (image + titre + texte)
════════════════════════════════════ */
.kv2-recog-title { font-weight: 400; }

/* ════════════════════════════════════
   #services — « Vous vous reconnaissez » : titre + grille 2×2 de cellules
   (icône 3D flottante en haut, texte dessous). Reveal au scroll (reconnaissance.js).
════════════════════════════════════ */
.section-reconnaissance {
  background: var(--c-bg-white);
  padding: 60px 0 60px;
}
.reconnaissance-inner {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 40px;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.reconnaissance-titre {
  font-family: var(--font);
  font-size: clamp(22px, 3.5vw, 44px);   /* identique au titre « Ce qu'on construit » ; plancher mobile 28→22, desktop inchangé */
  font-weight: 400;                        /* sans gras */
  color: var(--c-text-title);
  text-align: center;
  letter-spacing: -0.02em;
  margin: 0 0 52px;
}
/* ── Grille 2×2 ── */
.douleur-grille {
  width: 100%;
  display: grid;
  grid-template-columns: 1fr 1fr;
  border: 1px solid var(--c-bg-border);
  border-radius: 16px;
  overflow: hidden;
}
.douleur-cellule {
  padding: 44px 20px;   /* hauteur conservée (44), côtés resserrés (->20) pour gagner de la largeur texte */
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 20px;
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.6s ease, transform 0.6s ease;
  border-right: 1px solid var(--c-bg-border);
  border-bottom: 1px solid var(--c-bg-border);
}
.douleur-cellule.visible { opacity: 1; transform: translateY(0); }
/* Pas de bordure droite sur la colonne de droite */
.douleur-cellule:nth-child(2),
.douleur-cellule:nth-child(4) { border-right: none; }
/* Pas de bordure bas sur la dernière rangée */
.douleur-cellule:nth-child(3),
.douleur-cellule:nth-child(4) { border-bottom: none; }
/* ── Icône 3D flottante ── */
.douleur-visuel {
  width: 100%;
  height: 130px;
  display: flex;
  align-items: center;
  justify-content: center;     /* icône centrée dans la carte */
}
.douleur-img {
  height: 115px;
  width: auto;
  object-fit: contain;
  filter: drop-shadow(0 12px 24px rgba(0, 0, 0, 0.13));
}
/* Le marteau est un objet « paysage » : sa masse ne remplit que ~64 % du cadre
   (vs ~90 % pour les autres). On le rend plus grand pour un rendu homogène
   (proportionnel à la nouvelle base de 115px). */
.douleur-cellule:nth-child(2) .douleur-img { height: 160px; }
@keyframes flotter {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-7px); }
}
.flottant { animation: flotter 3.5s ease-in-out infinite; }
/* ── Texte (hiérarchie par la taille, pas le gras — inspiré PeakLab) ── */
.douleur-phrase {
  font-family: var(--font);
  font-size: clamp(1.05rem, 1.35vw, 1.3rem);    /* ~21px desktop (max avant wrap) */
  font-weight: 500;                              /* léger, pas gras */
  color: var(--c-text-title);
  line-height: 1.15;
  letter-spacing: -0.03em;                      /* resserré : la longue phrase tient */
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 5px;
  white-space: nowrap;                          /* 1re ligne garantie sur une ligne */
}
.douleur-suite {
  font-family: var(--font);
  font-size: clamp(0.88rem, 1.05vw, 1rem);      /* ~16-17px desktop */
  font-weight: 400;
  color: #444444;                                /* gris foncé PeakLab (plus lisible que le #555) */
  line-height: 1.5;
  letter-spacing: normal;
  white-space: nowrap;
}
/* ── Clôture ── */
.reconnaissance-cloture {
  margin-top: 56px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 28px;
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.6s ease 0.3s, transform 0.6s ease 0.3s;
}
.reconnaissance-cloture.visible { opacity: 1; transform: translateY(0); }
.cloture-phrase {
  font-family: var(--font);
  font-size: clamp(1.1rem, 1.6vw, 1.4rem);   /* ~22px : ni corps ni gros titre */
  font-weight: 500;
  color: var(--c-text-title);
  line-height: 1.3;
  text-align: center;
  margin: 0;
}
.cloture-accent { color: #08b530; }
/* Version courte de la clôture (sans « nous ») : masquée par défaut → desktop = version longue. */
.cloture-noir--short { display: none; }
/* Tablette/mobile : on relâche le nowrap (le texte peut revenir à la ligne)
   et on rend la marge intérieure au conteneur. */
@media (max-width: 768px) {
  .reconnaissance-inner { max-width: 100%; padding: 0 20px; }
  .douleur-phrase { white-space: normal; font-size: 0.9rem; }
  .douleur-suite { white-space: normal; }
  /* clôture en 2 lignes : on retire « nous » (version courte) */
  .cloture-noir--full { display: none; }
  .cloture-noir--short { display: inline; }
}
@media (max-width: 640px) {
  /* On CONSERVE la grille 2×2, on réduit les cartes (pas d'empilement 1 colonne) */
  .douleur-grille { grid-template-columns: repeat(2, 1fr); border-radius: 12px; }
  .douleur-cellule { padding: 26px 14px; gap: 12px; }
  .douleur-visuel { height: 84px; }
  .douleur-img { height: 66px; }
  .douleur-cellule:nth-child(2) .douleur-img { height: 92px; }
  .douleur-phrase { font-size: 0.8rem; line-height: 1.2; }
  .douleur-suite { font-size: 0.72rem; }
}
@media (max-width: 480px) {
  .douleur-cellule { padding: 18px 10px; gap: 9px; }
  .douleur-visuel { height: 66px; }
  .douleur-img { height: 54px; }
  .douleur-cellule:nth-child(2) .douleur-img { height: 74px; }
  .douleur-phrase { font-size: 0.72rem; }
  .douleur-suite { font-size: 0.64rem; line-height: 1.4; }
}
@media (prefers-reduced-motion: reduce) {
  .douleur-cellule,
  .reconnaissance-cloture { transition: none; }
  .flottant { animation: none; }
}
.kv2-recog__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 18px;
}
.kv2-recog-card {
  background: var(--c-bg-white);
  border: 1px solid var(--c-bg-border);
  border-radius: var(--r-card);
  overflow: hidden;
  display: flex;
  flex-direction: row;          /* horizontal : image à gauche, texte à droite */
  align-items: stretch;
  transition: box-shadow var(--dur), transform 0.2s, border-color var(--dur);
}
.kv2-recog-card:hover {
  box-shadow: 0 10px 32px rgba(0,0,0,0.08);
  transform: translateY(-3px);
  border-color: var(--c-sage-light);
}
.kv2-recog-card__img {
  flex: 0 0 52%;
  min-width: 0;
  align-self: stretch;         /* remplit la hauteur de la carte */
  object-fit: cover;           /* l'image remplit son panneau gauche, recadrage minime */
  display: block;
  background: var(--c-bg-light);
}
.kv2-recog-card__body {
  flex: 1;
  padding: 16px 24px;
  display: flex; flex-direction: column; justify-content: center;
}
.kv2-recog-card h3 {
  font-size: 16.5px;
  line-height: 1.3;
  margin-bottom: 8px;
  color: var(--c-text-title);
}
.kv2-recog-card p {
  font-size: 14px;
  color: var(--c-text-default);
  line-height: 1.55;
}
.kv2-recog__cta {
  margin-top: 48px;
  text-align: center;
}
.kv2-recog__phrase {
  font-size: 22px;
  font-weight: 600;
  color: var(--c-text-title);
  max-width: 660px;
  margin: 0 auto 28px;
  line-height: 1.45;
}
.kv2-recog__phrase .kv2-sage { color: var(--c-sage); }
@media (max-width: 768px) {
  .kv2-recog__grid { grid-template-columns: 1fr; }
  .kv2-recog-card { flex-direction: column; }
  .kv2-recog-card__img { flex: none; width: 100%; aspect-ratio: 16 / 9; }
  .kv2-recog__phrase { font-size: 19px; }
}

/* ════════════════════════════════════
   BLOC SOMBRE — BPI FRANCE
════════════════════════════════════ */
/* Titre de section centré, non gras */
.kv2-construit-title { font-weight: 400; }

/* Section plateforme : galerie circulaire 3D des 3 mockups (détourés sur
   blanc pur, ombre de fenêtre conservée). Fond hérité de la section (blanc). */
.kv2-plateforme__visual {
  margin-top: 40px;
  /* pleine largeur : on casse la colonne pour occuper toute la page */
  max-width: none;
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
}

.circ-gallery-wrap {
  width: 100%;
  height: 470px;
  display: flex;
  align-items: center;
  justify-content: center;
  perspective: 2500px;         /* perspective plus douce : la carte de face est
                                  moins « grossie », rendu plus élégant/contenu */
  overflow: hidden;
  /* fond strictement transparent : hérite du blanc pur de la section */
  background: transparent;
  position: relative;
  cursor: grab;                /* on peut l'attraper pour le diriger */
  touch-action: pan-y;         /* glisser horizontal = nous, scroll vertical = navigateur */
}
.circ-gallery-wrap.is-dragging { cursor: grabbing; }

/* Masques dégradés gauche/droite : larges fondus vers le blanc pur de la
   section -> effet « mise en lumière » (les cartes apparaissent/disparaissent
   dans un dégradé prononcé, aucun bord de section visible). */
.circ-gallery-wrap::before,
.circ-gallery-wrap::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  width: 22%;
  z-index: 10;
  pointer-events: none;
}
.circ-gallery-wrap::before {
  left: 0;
  background: linear-gradient(to right,
    #ffffff 0%,
    #ffffff 18%,
    rgba(255, 255, 255, 0.7) 45%,
    rgba(255, 255, 255, 0.3) 72%,
    transparent 100%);
}
.circ-gallery-wrap::after {
  right: 0;
  background: linear-gradient(to left,
    #ffffff 0%,
    #ffffff 18%,
    rgba(255, 255, 255, 0.7) 45%,
    rgba(255, 255, 255, 0.3) 72%,
    transparent 100%);
}
/* Fondu bas : les cartes partagent le même centre vertical, leurs ombres
   portées s'accumulent en une nappe grise en bas du wrap (coupée net par
   overflow:hidden). Ce dégradé la dissout dans le blanc de la section. */
.circ-fade-bottom {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 78px;
  background: linear-gradient(to bottom, transparent 0%, #ffffff 100%);
  z-index: 12;
  pointer-events: none;
}

.circ-track {
  position: relative;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  will-change: transform;
}

/* Tourniquet 3D : chaque carte est posée sur l'anneau par le JS
   (rotateY + translateZ), le track tourne en continu. Pas de
   backface-hidden : en tournant, on voit le dos du mockup, estompé. */
.circ-card {
  position: absolute;
  width: 424px;                /* réduit ~15% pour un tourniquet plus contenu */
  height: 283px;
  left: 50%;
  top: 50%;
  margin-left: -212px;
  margin-top: -141.5px;
  /* Les nouveaux mockups sont droits et sans ombre cuite : on cadre la carte
     (radius + overflow) et on ajoute une ombre portée franche pour la profondeur.
     Opacité + luminosité pilotées par frame en JS -> AUCUNE transition ici
     (sinon l'effet retarderait la rotation continue). */
  border-radius: 16px;
  overflow: hidden;
  /* fond blanc : la carte n'est JAMAIS transparente, même si le mockup
     n'emplit pas exactement le cadre (object-fit: contain). */
  background: #ffffff;
  box-shadow:
    0 24px 60px rgba(0, 0, 0, 0.22),
    0 8px 20px rgba(0, 0, 0, 0.12);
  transition: none;
}
/* reflet diagonal subtil */
.circ-card::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background: linear-gradient(135deg,
    rgba(255, 255, 255, 0.10) 0%,
    transparent 45%,
    rgba(0, 0, 0, 0.06) 100%);
}

.circ-card img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center center;
  display: block;
  user-select: none;
  -webkit-user-drag: none;
}

@media (max-width: 900px) {
  .circ-gallery-wrap { height: 340px; }
  .circ-card {
    width: 372px;
    height: 248px;
    margin-left: -186px;
    margin-top: -124px;
  }
}

@media (max-width: 600px) {
  /* Dézoom mobile : perspective + douce (carte de face moins grossie) et
     fondus latéraux réduits → une interface passe ENTIÈRE au centre. */
  .circ-gallery-wrap { height: 250px; perspective: 3400px; }
  .circ-gallery-wrap::before,
  .circ-gallery-wrap::after { width: 11%; }
  .circ-card {
    width: 232px;
    height: 155px;
    margin-left: -116px;
    margin-top: -77.5px;
  }
}

/* ════════════════════════════════════
   PLATEFORME — enrichissement (sous-titre, 6 modules, transition, diff)
   NB : le brief hardcodait le vert néon #0bd93b pour les accents ; on
   utilise le token DA --c-sage à la place (cohérence charte).
════════════════════════════════════ */
.plateforme__subtitle {
  text-align: center;
  font-size: clamp(1.05rem, 1.5vw, 1.3rem);
  font-weight: 500;
  color: var(--c-text-title);
  max-width: 560px;
  margin: 0 auto 4rem;
  line-height: 1.55;
}
.plateforme__subtitle strong { font-weight: 700; }

.modules-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
  max-width: 960px;
  margin: 0 auto 2rem;
  position: relative;
}

/* Cartes piliers : verre dépoli translucide façon Apple. La couleur du
   pilier n'est plus qu'une teinte (via color-mix) posée sur le verre. */
.module-card {
  position: relative;
  z-index: 1;
  overflow: hidden;
  border-radius: 18px;
  padding: var(--space-card-padding-y) var(--space-card-padding); /* desktop 28px/24px, compacté en mobile */
  font-family: var(--font);
  color: var(--c-text-title);
  background:
    linear-gradient(150deg,
      color-mix(in srgb, var(--card-color) 20%, transparent),
      color-mix(in srgb, var(--card-color) 7%, transparent));
  -webkit-backdrop-filter: blur(16px) saturate(1.4);
  backdrop-filter: blur(16px) saturate(1.4);
  border: 1px solid color-mix(in srgb, var(--card-color) 30%, rgba(255, 255, 255, 0.55));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.55),          /* reflet haut = arête de verre */
    0 10px 30px color-mix(in srgb, var(--card-color) 14%, transparent);
  opacity: 0;
  transform: scale(0.85) translateY(20px);
  transition: opacity 0.4s ease,
              transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1),
              box-shadow 0.35s ease,
              border-color 0.35s ease;
}

.module-card.is-visible {
  opacity: 1;
  transform: scale(1) translateY(0);
}

/* ── Survol : icône remplie + animée, bandeau de couleur droite/bas ── */
.module-card:hover {
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.6),
    8px 8px 0 0 var(--card-color),                                   /* bandeau épais bas + droite */
    0 14px 34px color-mix(in srgb, var(--card-color) 20%, transparent);
  border-color: color-mix(in srgb, var(--card-color) 45%, rgba(255, 255, 255, 0.5));
}
.module-card:hover .module-card__icon svg { fill: var(--card-color); }   /* l'icône se remplit dans la couleur */
.module-card:hover .module-card__icon { animation: kv2-icon-pop 0.5s var(--ease) both; }
@keyframes kv2-icon-pop {
  0%   { transform: scale(1); }
  40%  { transform: scale(1.22); }
  70%  { transform: scale(0.95); }
  100% { transform: scale(1.08); }
}

/* halo de couleur diffus dans l'angle (sous le verre) */
.module-card::before {
  content: '';
  position: absolute;
  bottom: -30px;
  right: -30px;
  width: 120px;
  height: 120px;
  border-radius: 50%;
  background: radial-gradient(circle,
    color-mix(in srgb, var(--card-color) 34%, transparent),
    transparent 70%);
  pointer-events: none;
}

.module-card__icon {
  position: relative;
  width: var(--size-icon-md);        /* desktop 40px, compacté en mobile */
  height: var(--size-icon-md);
  margin-bottom: clamp(0.55rem, 0.15rem + 1.6vw, 1rem); /* desktop 1rem (16px), compacté en mobile */
  color: var(--card-dark);           /* icône dans la couleur du pilier */
  transition: transform 0.3s ease;   /* retour doux après l'animation de survol */
}
.module-card__icon svg {
  width: 100%;
  height: 100%;
  fill: none;
  transition: fill 0.3s ease;        /* remplissage progressif au survol */
}

.module-card__title {
  position: relative;
  font-family: var(--font);
  /* Le titre de carte (17.6px desktop) est SOUS l'échelle --text-title-*
     (title-7 min = 19.2px l'agrandirait) : clamp dédié maxant à 1.1rem exact. */
  font-size: clamp(1rem, 0.9rem + 0.5vw, 1.1rem); /* desktop 1.1rem (17.6px), mobile ~16px */
  font-weight: 700;
  margin-bottom: 0.5rem;
  color: var(--card-dark);           /* titre dans la couleur du pilier */
}

.module-card__text {
  position: relative;
  font-family: var(--font);
  font-size: clamp(0.78rem, 0.72rem + 0.3vw, 0.85rem); /* desktop 0.85rem (13.6px), mobile ~12.7px */
  color: var(--c-text-default);
  line-height: 1.5;                  /* desktop inchangé ; compacté à 1.3 en mobile (media query) */
  margin: 0;
}

/* ligne de liaison entre les cartes (desktop) */
.modules-grid::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 5%;
  right: 5%;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--c-sage) 20%, var(--c-sage) 80%, transparent);
  opacity: 0.25;
  pointer-events: none;
  z-index: 0;
}

.modules-link-text {
  text-align: center;
  font-size: 0.95rem;
  color: #888888;
  font-style: italic;
  max-width: 600px;
  margin: 1rem auto 4rem;
}

.carousel-intro {
  text-align: center;
  font-size: clamp(1.2rem, 2vw, 1.5rem);
  font-weight: 600;
  color: var(--c-text-title);
  margin: 0 auto 2.5rem;
  max-width: 480px;
}

.plateforme-diff {
  max-width: 760px;
  margin: 5rem auto 0;
  text-align: center;
}
.plateforme-diff__title {
  font-size: clamp(1.1rem, 2.2vw, 1.8rem);   /* même échelle que le punch (équilibre mobile) */
  font-weight: 500;
  color: var(--c-text-title);
  line-height: 1.25;
  text-wrap: balance;
  margin-bottom: 0.4rem;
}
/* Titre FAQ « Vos questions, nos réponses. » — desktop : identique aux autres titres de section
   (h2 de base : 44px, weight 400, comme « 4 étapes… »). Mobile : weight 500 conservé + fluide 1 ligne. */
.kv2-faq-title { font-weight: 400; }
@media (max-width: 768px) { .kv2-faq-title { font-weight: 500; font-size: clamp(18px, 5.4vw, 22px); white-space: nowrap; letter-spacing: -0.02em; } }
.plateforme-diff__punch {
  font-size: clamp(1.1rem, 2.2vw, 1.8rem);   /* plancher mobile réduit : « C'est elle qui s'adapte à vous. » sur 1 ligne */
  font-weight: 500;
  color: var(--c-sage);
  line-height: 1.25;
  margin-bottom: 1.5rem;
}
.plateforme-diff__intro {
  font-size: 1rem;
  color: var(--c-text-default);
  margin-bottom: 2rem;
}
.plateforme-diff__list {
  list-style: none;
  padding: 0;
  margin: 0 0 2rem;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}
.plateforme-diff__list li {
  font-size: 1rem;
  color: var(--c-text-title);
  font-weight: 500;
  padding: 0.75rem 1.25rem;
  border-left: 3px solid var(--c-sage);
  text-align: left;
  background: var(--c-bg-light);
  border-radius: 0 8px 8px 0;
}
.plateforme-diff__closing {
  font-size: 1rem;
  color: var(--c-text-default);
  font-style: italic;
}

/* Les 4 axes sur-mesure : bulles en verre dépoli teinté sage (cohérent avec
   les cartes piliers), pour montrer ce qu'on intègre DE l'entreprise. */
.diff-bubbles {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem;
  margin: 0 0 2.25rem;
  text-align: left;
}
.diff-bubble {
  position: relative;
  overflow: hidden;
  padding: 1.4rem 1.5rem;
  border-radius: 18px;
  background:
    linear-gradient(150deg,
      color-mix(in srgb, var(--c-sage) 16%, rgba(255, 255, 255, 0.6)),
      color-mix(in srgb, var(--c-sage) 5%, rgba(255, 255, 255, 0.35)));
  -webkit-backdrop-filter: blur(16px) saturate(1.4);
  backdrop-filter: blur(16px) saturate(1.4);
  border: 1px solid color-mix(in srgb, var(--c-sage) 28%, rgba(255, 255, 255, 0.55));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.6),
    0 10px 30px color-mix(in srgb, var(--c-sage) 12%, transparent);
  transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1),
              box-shadow 0.35s ease, border-color 0.35s ease;
}
.diff-bubble::before {
  content: '';
  position: absolute;
  bottom: -30px;
  right: -30px;
  width: 120px;
  height: 120px;
  border-radius: 50%;
  background: radial-gradient(circle,
    color-mix(in srgb, var(--c-sage) 26%, transparent), transparent 70%);
  pointer-events: none;
}
.diff-bubble:hover {
  transform: translateY(-4px);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.65),
    0 16px 38px color-mix(in srgb, var(--c-sage) 20%, transparent);
  border-color: color-mix(in srgb, var(--c-sage) 42%, rgba(255, 255, 255, 0.5));
}
.diff-bubble__icon {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  margin-bottom: 0.85rem;
  border-radius: 12px;
  color: var(--c-forest);
  background: rgba(255, 255, 255, 0.55);
  border: 1px solid color-mix(in srgb, var(--c-sage) 30%, rgba(255, 255, 255, 0.5));
}
.diff-bubble__icon svg { width: 22px; height: 22px; }
.diff-bubble h4 {
  position: relative;
  font-family: var(--font);
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--c-forest);
  margin: 0 0 0.35rem;
}
.diff-bubble p {
  position: relative;
  font-family: var(--font);
  font-size: 0.9rem;
  line-height: 1.5;
  color: var(--c-text-default);
  margin: 0;
}
@media (max-width: 600px) {
  .diff-bubbles { grid-template-columns: 1fr; }
}

@media (max-width: 768px) {
  /* Sizing des cartes (padding/icône/police) = tokens fluides sur les règles de base.
     Ici, uniquement ce que clamp ne sait pas faire : passage 2 colonnes, gap,
     radius mobile, line-height compacte, marge de titre resserrée. */
  .modules-grid { grid-template-columns: repeat(2, 1fr); gap: 0.8rem; }
  .modules-grid::after { display: none; }
  /* Cartes nettement plus petites en mobile (moins « zoomées »), desktop inchangé */
  .module-card { border-radius: 12px; padding: 0.75rem 0.7rem; }
  .module-card::before { width: 74px; height: 74px; }
  .module-card__icon { width: 22px; height: 22px; margin-bottom: 0.4rem; }
  .module-card__title { font-size: 13px; margin-bottom: 0.25rem; }
  .module-card__text { font-size: 11px; line-height: 1.3; }
}
@media (max-width: 480px) {
  .modules-grid { grid-template-columns: repeat(2, 1fr); gap: 0.8rem; }
}

/* accessibilité : pas d'animation -> cartes visibles d'emblée */
@media (prefers-reduced-motion: reduce) {
  .module-card {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* ════════════════════════════════════
   CONSEIL — showcase EcoVadis + 3 piliers
════════════════════════════════════ */
.kv2-conseil-show {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;   /* texte (gauche) prioritaire, image à droite */
  gap: 52px;
  align-items: center;
  margin-bottom: 56px;
  overflow-x: clip;   /* contient le halo/ombre, pas de scroll horizontal mobile */
}
.kv2-conseil-show__visual { position: relative; isolation: isolate; }
.kv2-conseil-show__glow {
  position: absolute;
  inset: -14%;
  z-index: -1;
  background: radial-gradient(circle at 50% 50%, rgba(90, 154, 114, 0.30), rgba(90, 154, 114, 0) 68%);
  filter: blur(6px);
  pointer-events: none;
}
.kv2-conseil-show__img {
  width: 100%;
  border-radius: var(--r-hero-lg);
  border: 1px solid var(--c-bg-border);
  box-shadow: 0 24px 60px rgba(13, 31, 25, 0.14);
  animation: kv2-float 6s var(--ease) infinite;
}
@keyframes kv2-float {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-12px); }
}
.kv2-conseil-show__body .kv2-eyebrow {
  background: var(--c-mist);
  color: var(--c-forest-mid);
}
.kv2-conseil-show__body h3 {
  font-size: clamp(22px, 2.4vw, 30px);
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: -0.02em;
  margin-bottom: 14px;
  text-wrap: balance;
}
.kv2-conseil-show__body p {
  font-size: 16px;
  max-width: 46ch;
  margin-bottom: 22px;
}
.kv2-conseil-show__pts { display: flex; flex-direction: column; gap: 11px; }
.kv2-conseil-show__pts li {
  position: relative;
  padding-left: 30px;
  font-size: 15px;
  font-weight: 500;
  color: var(--c-text-title);
}
.kv2-conseil-show__pts li::before {
  content: "";
  position: absolute; left: 0; top: 1px;
  width: 18px; height: 18px;
  border-radius: 50%;
  background: var(--c-sage);
}
.kv2-conseil-show__pts li::after {
  content: "";
  position: absolute; left: 6px; top: 4px;
  width: 4px; height: 8px;
  border: solid #fff;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

/* Trois piliers */
.kv2-conseil-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}
.kv2-conseil-card {
  background: var(--c-bg-white);
  border: 1px solid var(--c-bg-border);
  border-radius: var(--r-card);
  padding: 28px 24px;
  transition: transform var(--dur) var(--ease),
              box-shadow var(--dur) var(--ease),
              border-color var(--dur) var(--ease);
}
.kv2-conseil-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 18px 40px rgba(13, 31, 25, 0.10);
  border-color: var(--c-sage-light);
}
.kv2-conseil-card__icon {
  width: 48px; height: 48px;
  display: flex; align-items: center; justify-content: center;
  border-radius: var(--r-md);
  background: var(--c-mist);
  color: var(--c-forest-mid);
  margin-bottom: 18px;
}
.kv2-conseil-card h3 {
  font-size: 18px;
  font-weight: 600;
  margin-bottom: 8px;
}
.kv2-conseil-card p {
  font-size: 14.5px;
  line-height: 1.6;
  margin-bottom: 16px;
}
.kv2-conseil-card__tag {
  display: inline-block;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--c-forest-mid);
  background: var(--c-bg-light);
  border-radius: var(--r-full);
  padding: 5px 11px;
}
@media (max-width: 880px) {
  .kv2-conseil-show { grid-template-columns: 1fr; gap: 28px; }
  .kv2-conseil-grid { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  .kv2-conseil-show__img { animation: none; }
}

/* Bandeau rapproché de la section équipe (« nos têtes ») : padding haut réduit */
#construit { padding-top: 24px; }

/* Bandeau « Référencé Bpifrance » — jaune glass, hyper visuel */
.kv2-refbpi {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  width: 82%;                 /* calé exactement sur le header (.kv2-nav) */
  max-width: 1080px;          /* même largeur max que le header */
  margin: 8px auto 0;
  border-radius: var(--r-hero-lg);
  background: linear-gradient(135deg, #ffe454 0%, #ffda03 46%, #f6c500 100%);
  padding: 28px 56px;
  display: grid;
  grid-template-columns: 1.7fr auto;   /* colonne logo dimensionnée au contenu */
  gap: 56px;
  align-items: center;
  box-shadow: 0 22px 52px rgba(246, 197, 0, 0.36);
}
/* colonne droite : BPI puis RF+ADEME, tuiles superposées identiques */
.kv2-refbpi__aside {
  position: relative; z-index: 1;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 18px;
}
/* halos translucides (glass) */
.kv2-refbpi__blob {
  position: absolute;
  border-radius: 50%;
  z-index: -1;
  pointer-events: none;
}
.kv2-refbpi__blob--1 {
  width: 240px; height: 240px;
  background: radial-gradient(circle, rgba(255,255,255,0.55), rgba(255,255,255,0) 70%);
  top: -90px; right: 22%;
}
.kv2-refbpi__blob--2 {
  width: 190px; height: 190px;
  background: radial-gradient(circle, rgba(255,255,255,0.35), rgba(255,255,255,0) 70%);
  bottom: -90px; left: -40px;
}
.kv2-refbpi__content { position: relative; z-index: 1; }
.kv2-refbpi__eyebrow {
  display: inline-block;
  font-size: 12px; font-weight: 700;
  letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--c-forest-deep);
  background: rgba(255,255,255,0.40);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border: 1px solid rgba(255,255,255,0.65);
  padding: 6px 14px; border-radius: var(--r-full);
  margin-bottom: 10px;
}
.kv2-refbpi__title {
  font-size: clamp(18px, 2.3vw, 28px); /* max 28px desktop inchangé ; plancher mobile 20→18 */
  font-weight: 700;
  color: var(--c-forest-deep);
  line-height: 1.15;
  letter-spacing: -0.02em;
  margin-bottom: 8px;
  text-wrap: balance;                  /* équilibre les lignes, pas d'orphelin */
}
.kv2-refbpi__text {
  font-size: 15.5px;
  color: #3b3000;
  line-height: 1.45;
}
.kv2-refbpi__text strong { font-weight: 800; color: var(--c-forest-deep); }
/* chips chiffres (40 % / 4 000 €) — donnent l'air « offre » */
.kv2-refbpi__stats {
  margin-top: 16px;
  display: flex; flex-wrap: wrap;
  gap: 10px;
}
.kv2-refbpi__stat {
  display: inline-flex; align-items: baseline; gap: 6px;
  font-size: 13px; color: #3b3000;
  background: rgba(255,255,255,0.45);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(255,255,255,0.7);
  border-radius: var(--r-full);
  padding: 7px 14px;
}
.kv2-refbpi__stat b { font-size: 16px; font-weight: 800; color: var(--c-forest-deep); }
/* logos officiels (RF + ADEME) — dispositif public, tuile glass identique à BPI */
.kv2-refbpi__official {
  display: flex; flex-direction: column; align-items: center;
  gap: 8px;
}
.kv2-refbpi__official-label {
  font-size: 10px; font-weight: 700;
  letter-spacing: 0.1em; text-transform: uppercase;
  color: rgba(59, 48, 0, 0.7);
  text-align: center;
}
.kv2-refbpi__official-logos {
  display: flex;
  align-items: center; justify-content: center;
  gap: 24px;
}
.kv2-refbpi__official-logos img {
  height: 50px; width: auto;
  object-fit: contain;
}
.kv2-refbpi__cta { margin-top: 22px; }
/* tuiles glass dépolies — BPI et RF+ADEME STRICTEMENT identiques (200×104) */
.kv2-refbpi__logo,
.kv2-refbpi__official-logos {
  box-sizing: border-box;
  width: 200px; height: 104px;
  display: flex; align-items: center; justify-content: center;
  padding: 14px;
  background: rgba(255,255,255,0.28);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid rgba(255,255,255,0.60);
  border-radius: var(--r-card);
  box-shadow: 0 10px 28px rgba(0,0,0,0.10);
}
.kv2-refbpi__logo img {
  width: 160px;
  height: auto; display: block;
  border-radius: 8px;
}
/* Logos hors cadre : version affichée uniquement en mobile (desktop = logos dans le cadre) */
.kv2-refbpi-outside { display: none; }

@media (max-width: 768px) {
  /* Section moins haute + bandeau compacté */
  #construit { padding-top: 24px; padding-bottom: 28px; }
  .kv2-refbpi {
    width: calc(100% - 32px);   /* quasi pleine largeur sur mobile */
    max-width: 100%;
    grid-template-columns: 1fr;
    gap: 12px; padding: 20px 18px;
    text-align: center;
  }
  /* eyebrow sur 1 ligne */
  .kv2-refbpi__eyebrow { font-size: 10px; padding: 5px 12px; letter-spacing: 0.08em; white-space: nowrap; margin-bottom: 10px; }
  /* titre sur 2 lignes */
  .kv2-refbpi__title { font-size: 16px; line-height: 1.25; margin-bottom: 12px; }
  .kv2-refbpi__text { display: none; }              /* paragraphe masqué en mobile, conservé en desktop */
  /* chips + CTA équilibrés */
  .kv2-refbpi__stats { margin-top: 0; gap: 8px; justify-content: center; }
  .kv2-refbpi__stat { font-size: 12px; padding: 6px 12px; }
  .kv2-refbpi__stat b { font-size: 14px; }
  .kv2-refbpi__cta { margin-top: 14px; }
  .kv2-refbpi__cta.kv2-btn { font-size: 14px; }
  .kv2-refbpi__cta.kv2-btn--chevron { padding: 11px 48px 11px 20px; min-width: 220px; }
  .kv2-refbpi__cta .btn-chevron { width: 34px; }

  /* PROUESSE : logos SORTIS du cadre jaune → aside interne masqué, version externe dessous */
  .kv2-refbpi__aside { display: none; }
  .kv2-refbpi-outside {
    display: flex; flex-direction: column; align-items: center;
    gap: 8px; margin: 16px auto 0;
  }
  .kv2-refbpi-outside .kv2-refbpi__official-label { margin-bottom: 2px; }
  /* BPI : uniquement le logo jaune arrondi (aucun cadre blanc) */
  .kv2-refbpi-outside .kv2-refbpi__logo {
    background: none; border: none; box-shadow: none; padding: 0;
    width: auto; height: auto;
  }
  .kv2-refbpi-outside .kv2-refbpi__logo img { width: 150px; border-radius: 10px; }
  /* RF + ADEME : cadre blanc arrondi, MÊME largeur que le logo BPI (150px) */
  .kv2-refbpi-outside .kv2-refbpi__official-logos {
    width: 150px; height: 56px; padding: 8px; gap: 12px;
    background: #ffffff;
    border: 1px solid var(--c-bg-border);
    border-radius: var(--r-card);
    box-shadow: 0 6px 18px rgba(0,0,0,0.08);
  }
  .kv2-refbpi-outside .kv2-refbpi__official-logos img { height: 32px; }
}

/* ════════════════════════════════════
   VOUS VOUS RECONNAISSEZ — PAIN POINTS
════════════════════════════════════ */
.kv2-pain__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
}
@media (max-width: 1024px) { .kv2-pain__grid { grid-template-columns: 1fr; } }

.kv2-pain-card {
  background: var(--c-bg-white);
  border: 1px solid var(--c-bg-border);
  border-radius: var(--r-card);
  display: flex;
  align-items: flex-start;
  gap: 20px;
  padding: 28px;
  transition: border-color var(--dur), box-shadow var(--dur), transform 0.2s;
}
.kv2-pain-card:hover {
  border-color: var(--c-sage-light);
  box-shadow: 0 4px 24px rgba(90,154,114,0.10);
  transform: translateY(-2px);
}

.kv2-pain-card__icon {
  width: 44px; height: 44px; min-width: 44px;
  background: var(--c-bg-light);
  border-radius: var(--r-md);
  display: flex; align-items: center; justify-content: center;
  transition: background var(--dur);
}
.kv2-pain-card:hover .kv2-pain-card__icon { background: var(--c-sage); }
.kv2-pain-card__icon svg {
  width: 20px; height: 20px;
  stroke: var(--c-sage); fill: none;
  stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
  transition: stroke var(--dur);
}
.kv2-pain-card:hover .kv2-pain-card__icon svg { stroke: white; }
.kv2-pain-card h3 { font-size: 15px; margin-bottom: 8px; color: var(--c-text-title); }
.kv2-pain-card p { font-size: 14px; color: var(--c-text-default); line-height: 1.6; }

.kv2-pain__cta {
  margin-top: 56px;
  text-align: center;
}
.kv2-pain__phrase {
  font-size: 20px;
  font-weight: 600;
  font-style: italic;
  color: var(--c-text-title);
  max-width: 640px;
  margin: 0 auto 28px;
  line-height: 1.5;
}

/* ════════════════════════════════════
   COMMENT ON COLLABORE — TIMELINE ANIMÉE
════════════════════════════════════ */
.kv2-collab { overflow-x: clip; }
.kv2-collab .kv2-section__header h2 { font-weight: 400; }
.kv2-collab__timeline {
  position: relative;
  max-width: 940px;
  margin: 64px auto 0;
}

/* Ligne centrale + progression pilotée par --scroll-progress (JS) */
.kv2-collab__line-track {
  position: absolute;
  top: 0; bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 2px;
  background: var(--c-bg-border);
  --scroll-progress: 0;
}
.kv2-collab__line-fill {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  background: #0bd93b;
  transform: scaleY(var(--scroll-progress));
  transform-origin: top center;
}
.kv2-collab__dot {
  position: absolute;
  left: 50%;
  top: calc(var(--scroll-progress) * 100%);
  width: 14px; height: 14px;
  margin: -7px 0 0 -7px;
  border-radius: 50%;
  background: #0bd93b;
  box-shadow: 0 0 12px 4px rgba(11, 217, 59, 0.45),
              0 0 24px 8px rgba(11, 217, 59, 0.2);
}

/* Étapes en alternance gauche / droite autour de la barre centrale */
.kv2-collab__step {
  position: relative;
  width: 50%;
  box-sizing: border-box;
  margin-bottom: 56px;
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.65s cubic-bezier(0.22, 1, 0.36, 1),
              transform 0.65s cubic-bezier(0.22, 1, 0.36, 1);
}
.kv2-collab__step.is-visible { opacity: 1; transform: translateY(0); }
.kv2-collab__step:last-child { margin-bottom: 0; }
.kv2-collab__step--left  { left: 0;   padding-right: 56px; }
.kv2-collab__step--right { left: 50%; padding-left: 56px; }

/* Médaillon icône sur la barre centrale (à l'intersection de chaque étape) */
.kv2-collab__marker {
  position: absolute;
  top: 36px;
  z-index: 3;
}
.kv2-collab__step--left  .kv2-collab__marker { right: -22px; }
.kv2-collab__step--right .kv2-collab__marker { left: -22px; }
.kv2-collab__line-icon {
  width: 44px; height: 44px;
  border-radius: 50%;
  background: #ffffff;
  border: 2px solid #0bd93b;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.08);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transform: scale(0.7);
  transition: opacity 0.4s ease 0.15s,
              transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) 0.15s;
}
.kv2-collab__step.is-visible .kv2-collab__line-icon { opacity: 1; transform: scale(1); }

/* Chiffre : grand, au-dessus du texte ; pâle au repos, vert foncé une fois atteint */
.kv2-collab__num {
  display: block;
  font-size: clamp(5.5rem, 10vw, 10rem);
  font-weight: 800;
  line-height: 0.85;
  color: #c8dfc9;
  user-select: none;
  margin-bottom: 16px;
  opacity: 0;
  transition: opacity 0.5s ease 0.2s, color 0.45s ease;
}
.kv2-collab__step.is-visible .kv2-collab__num { opacity: 1; }
.kv2-collab__step.is-active .kv2-collab__num { color: #0bd93b; }

/* Texte : aligné à gauche, aéré */
.kv2-collab__card h3 { font-size: 20px; line-height: 1.3; margin-bottom: 8px; color: var(--c-text-title); }
.kv2-collab__card p  { font-size: 15px; line-height: 1.6; color: var(--c-text-default); margin: 0; }

@media (max-width: 768px) {
  .kv2-collab__timeline { max-width: 520px; }
  .kv2-collab__line-track { left: 18px; transform: none; }
  .kv2-collab__dot { left: 50%; }   /* centré sur la barre (le dot est enfant du track de 2px) */
  .kv2-collab__step,
  .kv2-collab__step--left,
  .kv2-collab__step--right {
    width: 100%;
    left: 0;
    padding: 0 0 0 50px;
  }
  .kv2-collab__step--left .kv2-collab__marker,
  .kv2-collab__step--right .kv2-collab__marker { left: -4px; right: auto; top: 18px; }
  .kv2-collab__num { font-size: clamp(4.5rem, 18vw, 6rem); margin-bottom: 10px; }
  /* titres + textes des étapes réduits ~13% (chiffres inchangés), ratio titre/texte conservé */
  .kv2-collab__card h3 { font-size: 16.5px; }
  .kv2-collab__card p  { font-size: 13px; }
}

@media (prefers-reduced-motion: reduce) {
  .kv2-collab__step { opacity: 1; transform: none; }
  .kv2-collab__num { opacity: 1; }
  .kv2-collab__line-icon { opacity: 1; transform: scale(1); }
}

/* ════════════════════════════════════
   STATS RÉSULTATS
════════════════════════════════════ */
.kv2-stats__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2px;
  margin-top: 56px;
}
@media (max-width: 768px) { .kv2-stats__grid { grid-template-columns: 1fr; } }

.kv2-stat-card {
  padding: 40px 32px;
  border: 1px solid var(--c-bg-border);
  border-radius: var(--r-card);
}
.kv2-stat__number {
  font-size: clamp(40px, 5vw, 60px);
  font-weight: 800;
  letter-spacing: -0.03em;
  color: var(--c-text-title);
  line-height: 1;
  margin-bottom: 4px;
}
.kv2-stat__label {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--c-text-muted);
  margin-bottom: 16px;
}
.kv2-stat__desc { font-size: 14px; color: var(--c-text-default); line-height: 1.6; }
.kv2-stat__author { font-size: 13px; color: var(--c-text-muted); margin-top: 12px; font-style: italic; }

/* ════════════════════════════════════
   TÉMOIGNAGES QUOTES
════════════════════════════════════ */
.kv2-testimonials__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin-top: 56px;
}
@media (max-width: 1024px) { .kv2-testimonials__grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 768px) { .kv2-testimonials__grid { grid-template-columns: 1fr; } }

.kv2-testimonial-card {
  background: var(--c-bg-white);
  border: 1px solid var(--c-bg-border);
  border-radius: var(--r-card);
  padding: 28px 32px;
  display: flex; flex-direction: column;
  transition: border-color var(--dur), box-shadow var(--dur);
}
.kv2-testimonial-card:hover { border-color: var(--c-sage-light); box-shadow: 0 4px 20px rgba(90,154,114,0.10); }
.kv2-testimonial-card__result {
  display: inline-block;
  background: var(--c-bg-light);
  color: var(--c-text-title);
  font-size: 11px; font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: var(--r-full);
  margin-bottom: 16px;
}
.kv2-testimonial-card__quote {
  font-size: 14px; line-height: 1.7;
  color: var(--c-text-default); font-style: italic;
  flex: 1; margin-bottom: 20px;
}
.kv2-testimonial-card__author {
  display: flex; align-items: center; gap: 10px;
}
.kv2-testimonial-card__avatar {
  width: 40px; height: 40px;
  border-radius: 50%; object-fit: cover;
  background: var(--c-bg-light);
  border: 2px solid var(--c-bg-border);
}
.kv2-testimonial-card__name { font-size: 14px; font-weight: 700; color: var(--c-text-title); }
.kv2-testimonial-card__role { font-size: 12px; color: var(--c-text-muted); }

/* ════════════════════════════════════
   FAQ — ACCORDION
════════════════════════════════════ */
.kv2-faq__list { margin-top: 48px; max-width: 800px; margin-left: auto; margin-right: auto; }
.kv2-faq-item {
  border-bottom: 1px solid var(--c-bg-border);
  overflow: hidden;
}
.kv2-faq-item:first-child { border-top: 1px solid var(--c-bg-border); }
.kv2-faq-item__q {
  padding: 20px 0;
  display: flex; justify-content: space-between; align-items: center;
  cursor: pointer; gap: 16px;
  font-size: 16px; font-weight: 600;
  color: var(--c-text-title);
  user-select: none;
}
.kv2-faq-item__icon {
  width: 28px; height: 28px; min-width: 28px;
  border-radius: 50%;
  border: 1.5px solid var(--c-bg-border);
  display: flex; align-items: center; justify-content: center;
  font-size: 18px; font-weight: 300; color: var(--c-text-default);
  transition: transform var(--dur), border-color var(--dur);
}
.kv2-faq-item.open .kv2-faq-item__icon { transform: rotate(45deg); border-color: var(--c-sage); }
.kv2-faq-item__a {
  max-height: 0; overflow: hidden;
  font-size: 15px; color: var(--c-text-default); line-height: 1.7;
  padding: 0;
  transition: max-height 0.35s var(--ease), padding 0.2s;
}
.kv2-faq-item.open .kv2-faq-item__a { max-height: 500px; padding-bottom: 20px; }

/* ════════════════════════════════════
   FOOTER
════════════════════════════════════ */
.kv2-footer {
  background: transparent;
  padding: 40px 0;
}
/* Footer simplifié : logo discret · liens légaux · copyright, sur une rangée */
.kv2-footer__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 20px 32px;
}
.kv2-footer__logo { height: 48px; width: auto; opacity: 0.9; }
.kv2-footer__links {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px 24px;
}
.kv2-footer__links a,
.kv2-footer__cookies {
  color: var(--c-text-default);
  font-family: var(--font);
  font-size: 13px;
  font-weight: 400;
  transition: color var(--dur);
}
.kv2-footer__links a:hover,
.kv2-footer__cookies:hover { color: var(--c-text-title); }
/* Le bouton Complianz stylé comme un lien */
.kv2-footer__cookies {
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  line-height: inherit;
}
.kv2-footer__copy { color: var(--c-text-muted); font-size: 13px; font-family: var(--font); }

@media (max-width: 640px) {
  .kv2-footer__inner { flex-direction: column; align-items: flex-start; gap: 18px; }
  .kv2-footer__links { gap: 10px 20px; }
}

/* ════════════════════════════════════
   RESPONSIVE — ADJUSTEMENTS GLOBAUX
════════════════════════════════════ */
@media (max-width: 768px) {
  .kv2-section { padding: 48px 0; }
  .kv2-hero { padding: 0 8px; }
}

/* ════════════════════════════════════
   #equipe — accompagnement humain : 3 photos qui s'écartent en éventail
   à l'entrée dans le viewport (equipe.js ajoute .visible).
════════════════════════════════════ */
.section-equipe {
  background: var(--c-bg-white);
  padding: 74px 0 36px;   /* bas réduit : rapproche le bandeau jaune des photos équipe */
  overflow: visible;
}
.equipe-inner {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 40px;
  display: flex;
  align-items: center;
  gap: 80px;
}
/* Texte */
.equipe-texte { flex: 1; display: flex; flex-direction: column; gap: 20px; }
/* CTA à la largeur de son contenu (pas pleine largeur du bloc texte). Desktop = aligné à gauche ;
   le mobile le recentre via son media query. */
.equipe-texte .kv2-btn { align-self: flex-start; }
.equipe-surtitre {
  font-family: var(--font);
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #08b530;
  margin: 0;
}
.equipe-titre {
  font-family: var(--font);
  font-size: clamp(1.25rem, 2.5vw, 2.2rem); /* max/vw desktop inchangés ; plancher mobile 1.6→1.25rem */
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: -0.02em;
  color: var(--c-text-title);
  margin: 0;
}
.equipe-desc {
  font-family: var(--font);
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.6;
  color: var(--c-text-default);
  margin: 0;
}
/* Photos empilées -> éventail */
.equipe-photos {
  flex: 1;
  position: relative;
  height: 320px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.photo-card {
  position: absolute;
  width: 200px;
  height: 240px;
  border-radius: 16px;
  overflow: hidden;
  background: var(--c-bg-white);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.14);
  transition: transform 0.8s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.4s ease;
  cursor: pointer;
}
.photo-card img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* État initial : empilées au centre */
.photo-gauche { transform: rotate(0deg) translate(0, 0); z-index: 3; --tx: -160px; }
.photo-milieu { transform: rotate(0deg) translate(0, 0); z-index: 2; --tx: 0px; }
.photo-droite { transform: rotate(0deg) translate(0, 0); z-index: 1; --tx: 160px; }
/* État animé : éventail */
.equipe-photos.visible .photo-gauche { transform: rotate(-8deg) translate(-160px, 10px); }
.equipe-photos.visible .photo-milieu { transform: rotate(5deg)  translate(0, -10px); }
.equipe-photos.visible .photo-droite { transform: rotate(-5deg) translate(160px, 20px); }
/* Hover : la carte se redresse et se soulève */
.photo-card:hover {
  transform: rotate(0deg) translate(var(--tx), -12px) !important;
  z-index: 10;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.2);
}
/* Bulle nom/rôle (frosted glass) : cachée en bas, glisse au survol */
.photo-label {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(255, 255, 255, 0.92);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  padding: 10px 14px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  transform: translateY(100%);
  transition: transform 0.3s cubic-bezier(0.34, 1.2, 0.64, 1);
  border-top: 1px solid rgba(0, 0, 0, 0.06);
}
.photo-card:hover .photo-label { transform: translateY(0); }
.photo-nom {
  font-family: var(--font);
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--c-text-title);
  line-height: 1.2;
}
.photo-role {
  font-family: var(--font);
  font-size: 0.7rem;
  font-weight: 400;
  color: #08b530;
  line-height: 1.2;
}
/* Logo LinkedIn cliquable à droite de l'étiquette (desktop uniquement) */
.photo-label { padding-right: 74px; }
.photo-linkedin { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); display: flex; }
.photo-linkedin img { width: 54px; height: 54px; display: block; }
@media (max-width: 1023px) { .photo-linkedin { display: none; } }
/* Responsive : empile texte / photos */
@media (max-width: 900px) {
  /* Empilement + réordonnancement : PHOTOS au-dessus du CTA.
     display:contents « aplatit » .equipe-texte pour que le CTA devienne un frère
     de .equipe-photos et puisse passer sous les photos via order. */
  .equipe-inner { flex-direction: column; gap: 16px; padding: 0 24px; align-items: stretch; }
  .equipe-texte { display: contents; }
  .equipe-photos { width: 100%; order: 2; flex: none; }   /* flex:none sinon flex:1 la collapse à 0 */
  .equipe-texte .kv2-btn { order: 3; }
}
@media (max-width: 768px) {
  /* surtitre sur 1 ligne, titre sur 2 lignes */
  .equipe-surtitre { font-size: 0.7rem; letter-spacing: 0.06em; white-space: nowrap; }
  .equipe-titre { font-size: 1.05rem; }   /* « La plateforme, c'est nous. » tient sur 1 ligne */
  .equipe-desc { font-size: 0.9rem; }
  /* CTA étroit + centré (comme « Parlons de votre projet » de la clôture) */
  .equipe-texte .kv2-btn { align-self: center; margin-top: 4px; }
}
@media (max-width: 560px) {
  /* photos réduites ~50% ; cartes CENTRÉES dans leur conteneur (plus de débord vers le haut) */
  .equipe-photos { height: 150px; }
  .photo-card { width: 76px; height: 96px; border-radius: 10px; top: 50%; margin-top: -48px; }
  .photo-gauche { --tx: -56px; }
  .photo-droite { --tx: 56px; }
  .equipe-photos.visible .photo-gauche { transform: rotate(-8deg) translate(-56px, 5px); }
  .equipe-photos.visible .photo-milieu { transform: rotate(5deg) translate(0, -5px); }
  .equipe-photos.visible .photo-droite { transform: rotate(-5deg) translate(56px, 8px); }
  .photo-nom { font-size: 0.6rem; }
  .photo-role { font-size: 0.55rem; }
  .photo-label { padding: 6px 8px; }
}
@media (prefers-reduced-motion: reduce) {
  .photo-card { transition: box-shadow 0.4s ease; }
}

/* ════════════════════════════════════
   CTA « chevron slide » : au survol, le texte s'efface et le badge
   chevron s'étend pour remplir le bouton. Modificateur posé sur les
   grands CTA sombres (.kv2-btn--dark).
════════════════════════════════════ */
.kv2-btn--chevron {
  position: relative;
  overflow: hidden;
  justify-content: flex-start;
  gap: 0;
  padding: 13px 50px 13px 24px;   /* padding-right réserve la place du chevron */
  min-width: 240px;
}
.kv2-btn--chevron .btn-texte {
  white-space: nowrap;
  transition: opacity 0.45s ease;
}
.kv2-btn--chevron:hover .btn-texte { opacity: 0; }
.kv2-btn--chevron .btn-chevron {
  position: absolute;
  right: 4px;
  top: 4px;
  bottom: 4px;
  width: 38px;                     /* largeur fixe : ne mord plus sur le texte */
  border-radius: 5px;
  background: rgba(255, 255, 255, 0.15);
  display: grid;
  place-items: center;
  font-style: normal;
  color: #ffffff;
  flex-shrink: 0;
  transition: width 0.45s cubic-bezier(0.34, 1.1, 0.64, 1);
}
.kv2-btn--chevron:hover .btn-chevron { width: calc(100% - 8px); }
.kv2-btn--chevron:active { transform: scale(0.98); }

/* ════ CTA plus petits en MOBILE uniquement (−30/40%), desktop inchangé ════ */
@media (max-width: 768px) {
  .kv2-btn        { font-size: 10px; padding: 7px 14px; gap: 6px; }   /* 15px → 10px */
  .kv2-btn--lg    { font-size: 11px; padding: 8px 18px; }             /* 16px → 11px */
  .kv2-btn--chevron { padding: 8px 40px 8px 16px; min-width: 168px; }
  .kv2-btn--chevron .btn-chevron { width: 28px; right: 4px; }
  .kv2-nav__cta   { font-size: 10px; padding: 7px 13px; }             /* 14px → 10px */
}

/* ════════════════════════════════════
   Plateforme — diagramme filaments : hub Kerbone à droite, 4 filaments
   qui se dessinent vers 4 bulles à gauche (plateforme-diagram.js).
════════════════════════════════════ */
.plateforme-diagramme {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  max-width: 760px;
  margin: 56px auto 0;
  min-height: 360px;
}
/* Bulles gauche */
.filaments-bulles {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 20px;
  z-index: 2;
  position: relative;
  height: 300px;
}
.filament-bulle {
  opacity: 0;
  transform: translateX(-12px);
  transition: opacity 0.4s ease, transform 0.4s ease;
}
.filament-bulle.visible { opacity: 1; transform: translateX(0); }
.bulle-label {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: #f4f9f4;
  border: 1px solid #e0ede0;
  border-radius: 100px;
  padding: 10px 18px 10px 12px;
  white-space: nowrap;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}
.bulle-icone {
  display: grid;
  place-items: center;
  color: var(--c-forest-mid);
  flex-shrink: 0;
}
.bulle-icone svg { width: 16px; height: 16px; }
.bulle-texte {
  font-family: var(--font);
  font-size: 0.82rem;
  font-weight: 500;
  color: var(--c-text-title);
}
/* SVG filaments */
.filaments-svg {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 1;
}
.filament-path {
  transition: stroke-dashoffset 0.8s ease;
}
/* Hub Kerbone */
.kerbone-hub {
  width: 92px;
  height: 92px;
  background: var(--c-forest-deep);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.18);
  z-index: 2;
  position: relative;
  flex-shrink: 0;
}
.hub-logo {
  width: 54px;
  height: auto;
  filter: brightness(0) invert(1);   /* mark navy -> blanc dans le hub sombre */
}
/* Responsive : sous 760px on empile (hub en haut), filaments masqués */
@media (max-width: 760px) {
  .plateforme-diagramme {
    flex-direction: column;
    gap: 28px;
    min-height: 0;
    max-width: 100%;
  }
  .kerbone-hub { order: -1; }
  .filaments-bulles {
    height: auto;
    align-items: center;
    gap: 12px;
    width: 100%;
  }
  .filaments-svg { display: none; }
  .filament-bulle { transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .filament-bulle { opacity: 1; transform: none; transition: none; }
  .filament-path { transition: none; }
}

/* ════════════════════════════════════
   #rdv — prise de rendez-vous : fond vagues vertes (pleine largeur),
   photos équipe en éventail + widget calendrier vanilla.
════════════════════════════════════ */
.kv2-rdv {
  position: relative;
  padding: 72px 0 66px;
  background-color: var(--c-bg-white);
  background-image: var(--kv2-rdv-bg);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  overflow: hidden;
}
.kv2-rdv__inner {
  max-width: 1080px;
  margin: 0 auto;
  padding: 0 40px;
}
/* Layout 2 colonnes : texte + avatars à gauche, calendrier Calendly à droite */
.kv2-rdv__inner--split {
  max-width: 1200px;
  display: flex;
  align-items: center;
  gap: 56px;
}
.kv2-rdv__col-left { flex: 1 1 42%; }
.kv2-rdv__col-right { flex: 1 1 58%; }
.kv2-rdv__head { text-align: left; margin: 0; }
.kv2-rdv__eyebrow {
  font-family: var(--font);
  font-size: 0.8rem; font-weight: 600;
  letter-spacing: 0.12em; text-transform: uppercase;
  color: #08b530; margin: 0 0 12px;
}
.kv2-rdv__title {
  font-family: var(--font);
  font-size: clamp(1.25rem, 2.6vw, 2.2rem); /* max/vw desktop inchangés ; plancher mobile 1.6→1.25rem */
  font-weight: 500; line-height: 1.2; letter-spacing: -0.02em;
  color: var(--c-text-title); margin: 0 0 14px;
}
.kv2-rdv__desc {
  font-family: var(--font);
  font-size: 1rem; line-height: 1.6; color: var(--c-text-default); margin: 0;
}

/* Photos en éventail (réutilise .equipe-photos / .photo-card du bloc #equipe) */
/* Avatars ronds de l'équipe (petits, côte à côte, léger chevauchement) */
.kv2-rdv__avatars {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  margin: 28px 0 0;
}
.kv2-rdv__avatar {
  width: 62px;
  height: 62px;
  border-radius: 50%;
  object-fit: cover;
  border: 3px solid #ffffff;
  box-shadow: 0 4px 12px rgba(13, 31, 25, 0.14);
}
.kv2-rdv__avatar:not(:first-child) { margin-left: -14px; }

/* ── Cadre du widget de réservation Calendly (embed inline) ── */
.kv2-cal {
  max-width: 820px;
  margin: 0 auto;
  background: #ffffff;
  border: 1px solid var(--c-bg-border);
  border-radius: var(--r-card);
  box-shadow: 0 24px 60px rgba(13, 31, 25, 0.12);
  padding: 8px;
  overflow: hidden;
}
.kv2-cal.kv2-rdv__col-right { max-width: none; margin: 0; min-width: 0; }
.kv2-cal .calendly-inline-widget { border-radius: calc(var(--r-card) - 8px); }

/* Desktop : le cadre blanc épouse le calendrier (vue mois) au lieu de laisser
   un grand vide blanc en bas. La vue « choix d'un créneau » (plus haute) garde
   son scroll interne dans l'iframe, donc la réservation reste complète. */
@media (min-width: 861px) {
  .kv2-cal { padding: 4px; box-shadow: 0 14px 34px rgba(13, 31, 25, 0.09); }
  /* La grille Calendly fait ~312px (largeur fixe, centrée). On serre l'iframe à 344px
     pour que le cadre blanc épouse le calendrier (plus de larges marges blanches). */
  .kv2-cal .calendly-inline-widget { width: 344px !important; min-width: 0 !important; height: 490px !important; }
  .kv2-cal.kv2-rdv__col-right { flex: 0 0 auto; width: 352px; margin: 0; }
  /* Colonnes recentrées autour de la carte serrée pour garder l'équilibre */
  .kv2-rdv__inner--split { justify-content: center; }
  .kv2-rdv__col-left { flex: 0 1 440px; }
}
.kv2-cal__noscript { text-align: center; color: var(--c-text-default); font-family: var(--font); padding: 24px; }
.kv2-cal__noscript a { color: #08b530; text-decoration: underline; }

/* Mobile : on empile (texte + avatars en haut, calendrier dessous) */
/* Mobile : on empile (texte + avatars en haut, calendrier dessous), compact */
@media (max-width: 860px) {
  .kv2-rdv__inner--split { flex-direction: column; gap: 20px; align-items: stretch; }
  .kv2-rdv__head { text-align: center; }
  .kv2-rdv__avatars { justify-content: center; margin-top: 14px; }
  .kv2-cal.kv2-rdv__col-right { max-width: 560px; margin: 0 auto; width: 100%; }
}
@media (max-width: 720px) {
  .kv2-rdv { padding: 36px 0 36px; }
  .kv2-rdv__desc { font-size: 0.9rem; }
  /* Calendrier réduit ~35% MAIS élargi pour remplir la carte (format ~carré) :
     l'iframe rend en 154% de large puis est scalée à 0.65 → largeur visuelle = 100% de la carte,
     éléments plus petits. Marge négative pour rattraper la hauteur libérée. */
  .kv2-cal { padding: 5px; overflow: hidden; }
  .kv2-cal.kv2-rdv__col-right { margin: 0 auto; }
  .kv2-cal .calendly-inline-widget {
    width: 154%;
    height: 470px !important;
    transform: scale(0.65);
    transform-origin: top left;
    margin-bottom: -165px;
  }
}