/*
 * Overnight overlay — couche de style progressive appliquée au miroir local.
 * Objectif : swap typo titres → Plus Jakarta Sans, introduire palette Overnight,
 * sans toucher aux tailles/poids ni au layout.
 *
 * Chargé APRÈS les CSS Nfinite pour gagner la cascade.
 */

/* Police servie localement (vendor/fonts) plutôt que depuis le CDN Google :
   le site ne dépend d'aucun domaine tiers pour son rendu, et l'adresse IP
   des visiteurs n'est pas transmise à Google. */
@import url('/vendor/plus-jakarta-sans.css');

/* ---------- Charte Nfinite d'origine : on quitte le navy ----------
   Ces 3 variables viennent du CSS Webflow hébergé sur le CDN (que l'on
   ne peut pas éditer). Elles portent le bleu nuit de toutes les zones
   sombres héritées : sections produits, footers Webflow, etc.
   On les redéfinit sur le noir du menu (#201d1d) pour unifier le site.
   ------------------------------------------------------------------ */
:root, body {
  --_v2-colors---grey--900: #201d1d !important;   /* était #101223 */
  --_v2-colors---grey--800: #343030 !important;   /* était #282a3a */
  --_v2-colors---grey--700: #4a4545 !important;   /* était #404252 */
}

/* ---------- Tokens Overnight (pour usage futur, ne déclenchent rien tout seul) ---------- */
:root {
  --ov-brand-500: #b130ff;
  --ov-brand-600: #8000ff;
  --ov-heat-500: #d54b7d;
  --ov-heat-600: #ff6152;
  --ov-ink-900: #111112;
  --ov-ink-700: #29292a;
  --ov-gradient-brand: linear-gradient(100deg, #b130ff 0%, #8000ff 100%);
  --ov-gradient-heat: linear-gradient(100deg, #d54b7d 0%, #ff6152 100%);
}

/* ---------- Swap typographique : titres en Plus Jakarta Sans ---------- */
/*
 * On cible tous les niveaux de titres + les classes fréquentes de Webflow.
 * On conserve size / weight / letter-spacing / line-height existants — seule
 * la famille change. Ça donne l'identité Overnight sans déplacer les éléments.
 */
h1, h2, h3, h4, h5, h6,
[class*="heading"], [class*="title"], [class*="Heading"], [class*="Title"] {
  font-family: 'Plus Jakarta Sans', 'Inter', ui-sans-serif, system-ui, sans-serif !important;
  letter-spacing: -0.015em;
}

/* ---------- Utilities Overnight (activables via classes .ov-*) ---------- */
/*
 * Pour styler 1-2 mots ou éléments ponctuels sans refondre la page.
 * Exemple d'usage futur : wrap un mot du hero avec <span class="ov-text-gradient">.
 */
.ov-text-gradient-brand {
  background-image: var(--ov-gradient-brand);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.ov-text-gradient-heat {
  background-image: var(--ov-gradient-heat);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.ov-bg-brand { background-color: var(--ov-brand-500); }
.ov-bg-heat { background-color: var(--ov-heat-500); }
.ov-text-brand { color: var(--ov-brand-500); }
.ov-text-heat { color: var(--ov-heat-500); }

/* ---------- Hero : élargir le container texte ----------
   La classe .max-width-45 Webflow limite le hero à ~720px, ce qui force
   le H1 et le sous-titre à wrap en 3+ lignes même avec des <br> explicites.
   On override à 1100px UNIQUEMENT dans le contexte du hero pour permettre
   au H1 ("the future of AI-driven production") et au sous-titre ("by
   senior 3D infographistes accelerated by Chat3D™ technologies empowered
   with AI.") de tenir chacun sur une seule ligne après leur <br>. */
.header_component .max-width-45 {
  max-width: 1440px !important;
}

/* ============================================================
   Header global Mercury-inspired (.ov-topnav)
   Remplace la navbar Nfinite sur toutes les pages du miroir.
   ============================================================ */
.navbarv2_component,
.navbarv2_wrapper,
nav.navbarv2,
nav[class*="navbarv2"] {
  display: none !important;
}

/* Banner Physicl (lien blog supprimé) + footer Webflow Nfinite (liens morts
   vers about/careers/solutions). Remplacés par notre .ov-footer injecté. */
.banner2_component,
footer.footerv2_component {
  display: none !important;
}

/* Timings exacts d'osmo (scrapés depuis slater.app/16596/45154.css) */
/* La nav est en position:fixed → on décale le contenu pour qu il ne colle
   pas sous la pill (osmo laisse ~100px de respiration). */
body { padding-top: 82px; }

.ov-topnav {
  --ov-cubic: cubic-bezier(0.625, 0.05, 0, 1);
  --ov-dur: 0.6s;
  --ov-dur-half: 0.3s;
  --ov-dur-onehalf: 0.9s;
  --ov-anim: var(--ov-dur) var(--ov-cubic);
  --ov-anim-onehalf: var(--ov-dur-onehalf) var(--ov-cubic);
  --ov-nav-fg: #f4f4f4;
  --ov-nav-surface: #f1f3f8;

  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 200;
  display: flex;
  justify-content: center;
  padding: 18px 16px 0;
  pointer-events: none;
}
/* backdrop plein écran (osmo .nav__bg) */
.ov-nav-bg {
  position: fixed;
  inset: 0;
  background: var(--ov-nav-surface, #f1f3f8);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.2s ease, visibility 0.2s ease;
  pointer-events: none;
}
.ov-topnav[data-nav-status="active"] .ov-nav-bg {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

/* la barre s'ÉLARGIT à l'ouverture (osmo : max-width → 100%) */
.ov-nav-bar {
  pointer-events: auto;
  position: relative;
  width: 100%;
  max-width: 660px;
  transition: max-width var(--ov-anim) 0s;
  color: var(--ov-nav-fg);
  font-size: 16px;
}
.ov-topnav[data-nav-status="active"] .ov-nav-bar { max-width: 100%; }

/* fond de la pill : calque séparé dont les inset se rétractent au scroll */
.ov-nav-back {
  position: absolute;
  inset: 0;
  background: #201d1d;
  border-radius: 10px;
  box-shadow: 0 22px 48px -22px rgba(0, 0, 0, 0.5);
  transition: all var(--ov-anim);
  z-index: 0;
}
.ov-topnav[data-scrolling-started="true"] .ov-nav-back { inset: 0.1875em; }
.ov-topnav[data-scrolling-started][data-nav-status="active"] .ov-nav-back { inset: 0; }
/* Menu ouvert : la barre devient une surface pleine (couleur du fond de la
   page, détectée en JS) pour que les liens restent lisibles au-dessus du contenu. */
.ov-topnav[data-nav-status="active"] .ov-nav-back {
  box-shadow: 0 30px 70px -26px rgba(0, 0, 0, 0.55);
}

.ov-nav-top {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 60px;
  padding: 8px 8px 8px 6px;
}
.ov-nav-menu {
  display: inline-flex;
  align-items: center;
  gap: 0.375em;
  background: none;
  border: 0;
  color: var(--ov-nav-fg);
  cursor: pointer;
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 16px;
  font-weight: 500;
  padding: 10px 12px;
  transition: column-gap var(--ov-anim);
}
.ov-topnav[data-nav-status="active"] .ov-nav-menu { gap: 0.1875em; }
/* hamburger 2 barres → X, avec scaleX(0.75) exactement comme osmo */
.ov-nav-burger { position: relative; display: block; width: 1.5em; height: 0.5em; }
.ov-nav-burger i {
  position: absolute;
  left: 0; right: 0; top: 50%;
  height: 1.5px; margin-top: -0.75px;
  background: var(--ov-nav-fg);
  border-radius: 1px;
  transition: transform var(--ov-anim);
  transform: translateY(0.1875em) rotate(0.001deg) scaleX(1);
}
.ov-nav-burger i:nth-child(2) { transform: translateY(-0.1875em) rotate(0.001deg) scaleX(1); }
.ov-topnav[data-nav-status="active"] .ov-nav-burger i:nth-child(1) {
  transform: translateY(0em) rotate(-45deg) scaleX(0.75);
}
.ov-topnav[data-nav-status="active"] .ov-nav-burger i:nth-child(2) {
  transform: translateY(0em) rotate(45deg) scaleX(0.75);
}
/* Logo : le wordmark se transforme en icône au scroll (mécanique osmo).
   Au repos → wordmark visible / icône décalée en haut et transparente.
   Scroll   → le wordmark glisse vers le bas en disparaissant, l'icône
              descend à sa place en apparaissant.
   Menu ouvert → le wordmark revient (comme sur la référence). */
.ov-nav-logo {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  display: grid;
  place-items: center;
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 21px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: #ffffff;
  text-decoration: none;
  line-height: 1;
}
.ov-nav-logo__wordmark,
.ov-nav-logo__icon {
  grid-area: 1 / 1;
  transition: transform var(--ov-anim), opacity var(--ov-dur-half) var(--ov-cubic) 0.15s;
}
.ov-nav-logo__wordmark { transform: translateY(0em) rotate(0.001deg); opacity: 1; white-space: nowrap; }
.ov-nav-logo__icon { transform: translateY(-0.75em) rotate(0.001deg); opacity: 0; display: block; }
.ov-nav-logo__icon svg { width: 26px; height: 26px; display: block; }
/* au scroll : swap */
.ov-topnav[data-scrolling-started="true"] .ov-nav-logo__wordmark {
  transform: translateY(0.75em) rotate(0.001deg); opacity: 0;
}
.ov-topnav[data-scrolling-started="true"] .ov-nav-logo__icon {
  transform: translateY(0em) rotate(0.001deg); opacity: 1;
}
/* menu ouvert : le wordmark reprend sa place, même scrollé */
.ov-topnav[data-scrolling-started][data-nav-status="active"] .ov-nav-logo__wordmark {
  transform: translateY(0em) rotate(0.001deg); opacity: 1;
}
.ov-topnav[data-scrolling-started][data-nav-status="active"] .ov-nav-logo__icon {
  transform: translateY(-0.75em) rotate(0.001deg); opacity: 0;
}
.ov-nav-cta {
  display: inline-flex; align-items: center; white-space: nowrap;
  background: #f4f4f4; color: #201d1d;
  border-radius: 6px; padding: 11px 18px;
  font-family: 'Plus Jakarta Sans', sans-serif; font-size: 14px; font-weight: 600;
  line-height: 1.1; text-decoration: none; transition: background-color 0.18s ease;
}
.ov-nav-cta:hover { background: #ffffff; }

/* ---- Panneau : grid-template-rows 0fr→1fr, 0.9s cubic, delay 0.3s ---- */
.ov-nav-bottom {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows var(--ov-anim) 0s;
}
.ov-topnav[data-nav-status="active"] .ov-nav-bottom {
  transition: grid-template-rows var(--ov-anim-onehalf) 0.3s;
  grid-template-rows: 1fr;
}
.ov-nav-bottom-clip { overflow: hidden; min-height: 0; }
.ov-nav-bottom-inner { padding: 0 14px 14px; }
/* la ligne apparaît en fondu (0.6s, delay 0.1s) */
.ov-nav-line {
  height: 1px;
  background: #312e2e;
  margin-bottom: 14px;
  opacity: 0;
  transition: all var(--ov-anim) 0s;
}
.ov-topnav[data-nav-status="active"] .ov-nav-line {
  transition: all var(--ov-anim) 0.1s;
  opacity: 1;
}
/* colonnes : translateY(2em) → 0, décalées de 75 ms (stagger osmo) */
.ov-nav-bottom-row {
  display: grid;
  grid-template-columns: 1fr 1fr 0.86fr;
  gap: 20px;
  align-items: stretch;
}
.ov-nav-bottom-row > * {
  transition: transform var(--ov-anim) 0s;
  transform: translateY(2em) rotate(0.001deg);
}
.ov-nav-bottom-row > *:nth-child(2) { transition: transform var(--ov-anim) 0.075s; }
.ov-nav-bottom-row > *:nth-child(3) { transition: transform var(--ov-anim) 0.15s; }
.ov-topnav[data-nav-status="active"] .ov-nav-bottom-row > * {
  transition: transform var(--ov-anim-onehalf) 0.3s;
  transform: translateY(0em) rotate(0.001deg);
}
.ov-topnav[data-nav-status="active"] .ov-nav-bottom-row > *:nth-child(2) {
  transition: transform var(--ov-anim-onehalf) 0.375s;
}
.ov-topnav[data-nav-status="active"] .ov-nav-bottom-row > *:nth-child(3) {
  transition: transform var(--ov-anim-onehalf) 0.45s;
}
.ov-nav-col { min-width: 0; display: flex; flex-direction: column; }
/* Le padding vit sur TOUTES les colonnes de liens, pas seulement celles qui
   ont un fond : la colonne sans carte se comporte comme une « carte
   invisible », donc son eyebrow s'aligne sur celui de la colonne carte. */
.ov-nav-col:not(.is--banner) { padding: 26px 30px 28px; }
/* la carte n'ajoute que la surface */
.ov-nav-col.is--card {
  background: rgba(244, 244, 244, 0.05);
  border-radius: 14px;
}
.ov-nav-eyebrow {
  display: block;
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 11.5px; font-weight: 600; letter-spacing: 0.09em;
  text-transform: uppercase; color: rgba(244, 244, 244, 0.55);
}
.ov-nav-biglist, .ov-nav-smalllist { list-style: none; margin: 18px 0 0; padding: 0; }
.ov-nav-biglist li + li { border-top: 1px solid #312e2e; }
.ov-nav-biglist a {
  display: block; padding: 22px 0;
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 34px; font-weight: 400; letter-spacing: -0.02em;
  color: var(--ov-nav-fg); text-decoration: none;
  transition: padding-left 0.25s ease, color 0.2s ease;
}
.ov-nav-biglist a:hover { padding-left: 8px; color: #ffffff; }
.ov-nav-smalllist a {
  display: block; padding: 7px 0;
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 15px; font-weight: 400;
  color: rgba(244, 244, 244, 0.72); text-decoration: none;
  white-space: nowrap;
  transition: color 0.2s ease;
}
.ov-nav-smalllist a:hover { color: #ffffff; }
.ov-nav-biglist a.active, .ov-nav-smalllist a.active { color: rgba(244, 244, 244, 0.4); }
/* ---- Colonne 3 : bannière promo Granular (osmo .nav-banner) ---- */
.ov-nav-col.is--banner { display: flex; }
.ov-nav-banner {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  flex: 1;
  width: 100%;
  padding: 26px 28px 28px;
  border-radius: 14px;
  background: linear-gradient(150deg, #2f2b2b 0%, #262323 100%);
  border: 1px solid rgba(244, 244, 244, 0.08);
  text-decoration: none;
  overflow: hidden;
  transition: border-color 0.25s ease, transform 0.25s ease;
}
.ov-nav-banner:hover { border-color: rgba(244, 244, 244, 0.2); transform: translateY(-2px); }
.ov-nav-banner-tag {
  display: inline-block;
  padding: 3px 9px;
  border-radius: 999px;
  background: linear-gradient(135deg, #b130ff 0%, #8000ff 100%);
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 10px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
  color: #ffffff;
}
.ov-nav-banner-logo {
  position: absolute;
  right: -44px; top: -34px;
  width: 210px; height: 210px;
  color: rgba(244, 244, 244, 0.07);
  pointer-events: none;
}
.ov-nav-banner-logo svg { width: 100%; height: 100%; display: block; }
.ov-nav-banner-title {
  display: block;
  margin-top: 20px;
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 40px; font-weight: 400; letter-spacing: -0.03em; line-height: 1.05;
  color: #ffffff;
}
.ov-nav-banner-title sup { font-size: 0.5em; opacity: 0.75; margin-left: 2px; }
.ov-nav-banner-copy {
  display: block;
  margin: 6px 0 18px;
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 14px; line-height: 1.5;
  color: rgba(244, 244, 244, 0.62);
}
.ov-nav-banner-btn {
  display: inline-flex; align-items: center;
  margin-top: auto;
  padding: 13px 20px;
  border-radius: 8px;
  background: #f4f4f4;
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 13px; font-weight: 600;
  color: #201d1d;
}

/* ---- Boutons sociaux ronds (osmo .square-button[data-shape="round"]) ---- */
.ov-nav-socials { display: flex; gap: 8px; margin-top: auto; padding-top: 32px; }
.ov-nav-social {
  display: inline-flex; align-items: center; justify-content: center;
  width: 2.5em; height: 2.5em;
  border-radius: 3em;
  background: rgba(244, 244, 244, 0.08);
  color: var(--ov-nav-fg);
  transition: background-color 0.25s ease, transform 0.25s ease;
}
.ov-nav-social:hover { background: rgba(244, 244, 244, 0.18); transform: translateY(-2px); }
.ov-nav-social svg { width: 17px; height: 17px; display: block; }

@media (max-width: 900px) {
  .ov-nav-col.is--banner { display: none; }
}


@media (max-width: 560px) {
  .ov-nav-menu-label { display: none; }
  .ov-nav-logo { font-size: 18px; }
  .ov-nav-cta { padding: 9px 14px; font-size: 13px; }
  .ov-nav-bottom-row { flex-direction: column; gap: 26px; }
  .ov-nav-biglist a { font-size: 24px; }
  /* Cibles tactiles : le bouton menu et le CTA faisaient 28 et 32 px de haut,
     sous le minimum confortable au doigt (~44 px). On agrandit la zone
     cliquable sans changer la taille visuelle du contenu. */
  .ov-nav-menu {
    min-height: 44px;
    min-width: 44px;
    justify-content: center;
  }
  .ov-nav-cta { min-height: 44px; align-items: center; }
}
@media (prefers-reduced-motion: reduce) {
  .ov-topnav *, .ov-topnav { transition: none !important; }
}

/* ---------- Hero product eyebrow (Virtual Twin / Next-Gen Pipeline) ----------
   Reprend le style du badge produit de la home (pill blanc + cercle d'icône
   gris #f1f3f8 + label), placé en eyebrow au-dessus du H1 des pages dédiées,
   à la place de l'ancien "Powered by Chat3D". */
.ov-hero-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: #ffffff;
  border: 1px solid rgba(15, 23, 42, 0.06);
  border-radius: 999px;
  padding: 6px 18px 6px 6px;
  margin: 0 auto 32px;
}
.ov-hero-eyebrow-icon {
  width: 28px;
  height: 28px;
  border-radius: 999px;
  background: #f1f3f8;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
}
.ov-hero-eyebrow-icon img {
  width: 15px;
  height: 15px;
  object-fit: contain;
  display: block;
}
.ov-hero-eyebrow-text {
  font-family: 'Plus Jakarta Sans', 'Inter', system-ui, sans-serif;
  font-size: 14px;
  font-weight: 500;
  color: #383434;
  letter-spacing: 0.2px;
}



/* ============================================================
   END-CAP : CTA qui fade vers navy + footer (pages produit custom)
   Recrée le pattern section_cta + footer des pages Nfinite, en CSS custom.
   Le bloc fond le gris/blanc de la section au-dessus vers le navy, puis le
   footer continue en navy. --ov-cta-top = couleur de départ du fade (réglée
   par page pour matcher la section précédente).
   ============================================================ */
.ov-cta {
  background: #201d1d;          /* navy plein — coupure nette avec la section
                                  au-dessus (pas de fade), comme les pages réf */
  padding: 120px 24px 104px;
  text-align: center;
  color: #ffffff;
  position: relative;
  overflow: hidden;
}
.ov-cta-dots {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background-image: radial-gradient(rgba(255, 255, 255, 0.07) 1px, transparent 1px);
  background-size: 30px 30px;
  -webkit-mask: radial-gradient(ellipse 62% 55% at 50% 92%, #000 0%, transparent 72%);
          mask: radial-gradient(ellipse 62% 55% at 50% 92%, #000 0%, transparent 72%);
}
.ov-cta-inner {
  position: relative;
  z-index: 2;
  max-width: 780px;
  margin: 0 auto;
}
.ov-cta-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 999px;
  padding: 6px 16px 6px 6px;
  margin: 0 auto 28px;
}
.ov-cta-eyebrow-icon {
  position: relative;
  width: 26px;
  height: 26px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.12);
  flex: 0 0 auto;
}
.ov-cta-eyebrow-icon::after {
  content: '';
  position: absolute;
  inset: 0;
  margin: auto;
  width: 14px;
  height: 14px;
  background: #ffffff;
  -webkit-mask: var(--ov-cta-icon) center / contain no-repeat;
          mask: var(--ov-cta-icon) center / contain no-repeat;
}
.ov-cta-eyebrow-text {
  font-family: 'Plus Jakarta Sans', 'Inter', system-ui, sans-serif;
  font-size: 13px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.9);
  letter-spacing: 0.02em;
}
.ov-cta h2 {
  font-family: 'Plus Jakarta Sans', 'Inter', system-ui, sans-serif;
  font-size: 52px;
  line-height: 1.08;
  letter-spacing: -0.02em;
  font-weight: 400;
  color: #ffffff;
  margin: 0 auto 20px;
  max-width: 18ch;
}
.ov-cta-lead {
  font-family: 'Plus Jakarta Sans', 'Inter', system-ui, sans-serif;
  font-size: 17px;
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.6);
  margin: 0 auto 36px;
  max-width: 46ch;
}
.ov-cta-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: #ffffff;
  color: #201d1d;
  padding: 14px 26px;
  border-radius: 999px;
  font-family: 'Plus Jakarta Sans', 'Inter', system-ui, sans-serif;
  font-size: 15px;
  font-weight: 600;
  text-decoration: none;
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.ov-cta-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 14px 34px -12px rgba(0, 0, 0, 0.55);
}

/* ---------- Footer (navy continu) ---------- */
.ov-footer {
  background: #201d1d;
  color: rgba(255, 255, 255, 0.66);
  padding: 0 64px 44px;          /* pleine largeur avec gouttières — pas de
                                  container max-width centré */
  font-family: 'Plus Jakarta Sans', 'Inter', system-ui, sans-serif;
}
.ov-footer-inner {
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr 1fr;
  gap: 56px;
  padding: 56px 0 44px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.ov-footer-logo {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: #ffffff;
  text-decoration: none;
}
.ov-footer-tagline {
  font-size: 14px;
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.5);
  margin: 14px 0 0;
  max-width: 32ch;
}
.ov-footer-col-title {
  display: block;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: rgba(255, 255, 255, 0.4);
  font-weight: 600;
  margin-bottom: 16px;
}
.ov-footer-col a {
  display: block;
  font-size: 14px;
  color: rgba(255, 255, 255, 0.66);
  text-decoration: none;
  margin-bottom: 11px;
  transition: color 0.15s ease;
}
.ov-footer-col a:hover { color: #ffffff; }
.ov-footer-bottom {
  padding-top: 24px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  font-size: 13px;
  color: rgba(255, 255, 255, 0.4);
}
.ov-footer-legal { display: flex; gap: 22px; }
.ov-footer-legal a { color: rgba(255, 255, 255, 0.4); text-decoration: none; transition: color 0.15s ease; }
.ov-footer-legal a:hover { color: #ffffff; }
@media (max-width: 1024px) {
  .ov-footer { padding: 0 40px 44px; }
}
@media (max-width: 860px) {
  .ov-footer-inner { grid-template-columns: 1fr 1fr; gap: 36px 24px; }
  .ov-footer-brand { grid-column: 1 / -1; }
  /* Liens empilés à 21 px de haut sans marge : difficile de viser le bon
     au doigt. On élargit la zone tactile par du padding, sans changer
     l'espacement visuel perçu (les marges sont compensées). */
  .ov-footer-col a {
    padding: 9px 0;
    margin: -9px 0;
  }
}
@media (max-width: 720px) {
  .ov-cta { padding: 88px 20px 80px; }
  .ov-cta h2 { font-size: 34px; }
  .ov-footer { padding: 0 24px 40px; }
  .ov-footer-bottom { justify-content: flex-start; }
}

/* ---------- Hero badge "Powered by Chat3D™" ----------
   État INITIAL = juste un cercle avec le bolt au centre.
   ANIMATION (auto, 0.5s après le load) = le badge s'écarte vers la droite,
   le texte "Powered by Chat3D™" est révélé par expansion de max-width.
   ---
   Trick layout : padding symétrique 6px de tous les côtés AU REPOS →
   le badge mesure 32+12 = 44×44 avec border-radius 999px = cercle parfait.
   Au cours de l'animation, padding-right passe à 18px et la text expand
   passe sa max-width de 0 à 240px, créant le pill horizontal final. */
.ov-chat3d-badge {
  display: inline-flex;
  align-items: center;
  padding: 6px;
  gap: 0;
  background: #f1f3f8;
  border-radius: 999px;
  /* margin-top 56 pour donner de l'air entre le header et le badge ;
     margin-bottom 4 conservé pour rester proche du H1 dessous */
  margin: 56px auto 4px;
  border: 1px solid rgba(15, 23, 42, 0.04);
  font-family: "BDO Grotesk", Tahoma, sans-serif;
  white-space: nowrap;
  /* Lien : pas de soulignement, curseur pointer, hover subtil */
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.2s ease, transform 0.2s ease;
  /* PAS de overflow: hidden ici — c'était la cause du clipping vertical
     du <sup>TM</sup> (vertical-align: super pousse le TM au-dessus de la
     line-box du texte, le badge clipait cette zone). Le clipping
     horizontal nécessaire à l'animation est géré par le overflow: hidden
     du .ov-chat3d-badge-text enfant uniquement. */
  animation: ovChat3dExpand 0.95s cubic-bezier(0.34, 1.15, 0.64, 1) 0.6s forwards;
}
@keyframes ovChat3dExpand {
  0%   { padding-right: 6px;  gap: 0; }
  100% { padding-right: 18px; gap: 10px; }
}
/* Hover : léger lift + bg légèrement plus saturé */
.ov-chat3d-badge:hover {
  background: #e9ecf3;
  transform: translateY(-1px);
}
.ov-chat3d-badge:active {
  transform: translateY(0);
}

.ov-chat3d-badge-icon {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 999px;
  background: #e3e6ee;
  flex: 0 0 auto;
  overflow: visible;
}
.ov-chat3d-badge-icon img {
  /* Bolt absolute centré, taille 28px → 2px d'inset dans le cercle 32px.
     Plus de débordement, l'éclair tient nettement à l'intérieur. */
  position: absolute;
  top: 50%;
  left: 50%;
  width: 28px;
  height: 28px;
  transform: translate(-50%, -50%);
  object-fit: contain;
  display: block;
  filter: drop-shadow(0 2px 6px rgba(15, 23, 42, 0.22));
  pointer-events: none;
}

/* Texte caché initialement (max-width:0 + opacity:0), révélé par expansion.
   max-width est animatable (≠ width:auto). overflow:hidden côté parent
   masque les caractères pendant le clipping. Le delay 0.75s laisse 0.15s
   d'avance à l'expansion du badge avant que le texte commence à apparaître,
   pour un effet "le badge s'écarte d'abord, puis le texte arrive". */
.ov-chat3d-badge-text {
  font-size: 14px;
  font-weight: 500;
  color: #383434;
  letter-spacing: 0.3px;
  line-height: 1.4;
  max-width: 0;
  opacity: 0;
  overflow: hidden;
  /* 2 animations cumulées :
     1) ovChat3dTextReveal  : la révélation max-width 0→360 (PENDANT l'anim,
        on a besoin de overflow: hidden pour clipper le texte qui apparaît)
     2) ovChat3dTextUnclip  : flip overflow hidden→visible APRÈS la fin de
        la révélation (1.4s = 0.75s delay + 0.65s durée). Une fois la révéla-
        tion finie, on peut laisser le <sup>TM</sup> dépasser librement
        au-dessus de la line-box (le badge parent n'a plus de overflow:hidden
        non plus, donc le TM est autorisé à pop par-dessus le badge si besoin). */
  animation:
    ovChat3dTextReveal 0.65s cubic-bezier(0.34, 1.15, 0.64, 1) 0.75s forwards,
    ovChat3dTextUnclip 0s linear 1.4s forwards;
}
@keyframes ovChat3dTextUnclip {
  to { overflow: visible; }
}
@keyframes ovChat3dTextReveal {
  100% {
    max-width: 360px;  /* large buffer pour que le <sup>TM</sup> ne soit jamais clippé */
    opacity: 1;
  }
}
.ov-chat3d-badge-text sup {
  font-size: 0.6em;
  margin-left: 1px;
  opacity: 0.7;
  vertical-align: super;
  line-height: 1;
}

/* Reduced motion : pas d'animation, on présente directement l'état final */
@media (prefers-reduced-motion: reduce) {
  .ov-chat3d-badge {
    animation: none;
    padding: 6px 18px 6px 6px;
    gap: 10px;
  }
  .ov-chat3d-badge-text {
    animation: none;
    max-width: none;
    opacity: 1;
    overflow: visible; /* sinon le TM est clippé en l'absence du unclip animé */
  }
}

/* ---------- Granular section : fond nodes + grille sur toute la carte ---------- */
/*
 * Les éléments décoratifs Nfinite (points + overlay fumée) sont cachés.
 * La grille est appliquée directement à la carte parent `.home_products_card.phyai`,
 * avec un fade radial sur les bords. Le canvas de nodes devient transparent et
 * couvre toute la carte en position absolue — c'est lui le fond visuel.
 * Le contenu texte (z-index-2 dans Webflow) reste naturellement au-dessus.
 */

/* FOUC prevention — on masque les visuels legacy Nfinite dès le 1er paint
   (avant que l'overlay JS n'ait eu le temps de tourner et de les remove
   du DOM). Sans ces règles, l'utilisateur voit pendant ~500ms-1s les
   anciennes tiles coulissantes / espresso machines / pill VCP avant
   qu'on les remplace.

   ----- Granular section ----- */
.home_phyai_images,
.home_phyai_overlay,
.dots-background,
.home_phyai_grid,
.phyai_grid_tile,
.phyai_grid_image-wrapper,
.home_products_card.phyai .w-background-video,
.home_products_card.phyai .phyai_grid_image {
  display: none !important;
}
/* Pour bonne mesure : la video de fond (autoplay+loop) est neutralisée
   visuellement même si pour une raison de timing elle n'est pas encore
   removed du DOM. */
.home_products_card.phyai video {
  display: none !important;
}

/* ----- VCP section (Overnight Digital) -----
   Cache les espresso machines + Order card avant que JS ne les hide.
   La product-eyebrow elle reste dans le flow (l'espace est réservé) mais
   est invisible via opacity:0 jusqu'à ce que JS injecte "Overnight pipeline"
   et ajoute la classe .ov-ready (cf. règle plus bas). Évite le FOUC du
   "Nfinite VCP™" original et le layout shift au reveal du badge. */
.home_products_card.first .home_vxp_images-wrapper,
.home_products_card.first .home_vxp_data {
  display: none !important;
}
/* L'opacity:0 initial + animation sur .ov-visible sont gérés par la
   règle unifiée plus bas dans ce fichier (.middle .product-eyebrow,
   .first .product-eyebrow) — rien à dupliquer ici. */

/* ----- Digital Twin section -----
   Cache le canvas Spline 3D bouteille avant que JS ne le replace par
   le model-viewer du backpack. */
.home_products_card.middle:not(.insight) .home_products_spline-wrap .hero_spline {
  visibility: hidden;
}

/* ----- Insight section -----
   Cache la video Nfinite (.home_products_insight-video-wrap) avant que JS
   ne vide .home_products_insight-graph et n'injecte la grille parallax. */
.home_products_card.middle.insight .home_products_insight-video-wrap,
.home_products_card.middle.insight .home_products_insight-graph .w-background-video,
.home_products_card.middle.insight .home_products_insight-graph video {
  display: none !important;
}

.home_products_card.phyai {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  padding-block: 1rem;
  min-height: auto !important;
}

/* Empêcher le flex Webflow d'étaler verticalement les éléments (le parent
   utilise justify-content: space-between pour l'ancien layout à images) */
.home_products_card-content.phyai {
  display: flex !important;
  flex-direction: column !important;
  justify-content: flex-start !important;
  gap: 0.5rem !important;
  min-height: auto !important;
  height: auto !important;
}
.home_products_card.phyai .z-index-2:not(.button-group),
.home_products_card.phyai .button-group.z-index-2 {
  flex: 0 0 auto !important;
  margin: 0 !important;
}

/* Grille sur toute la carte avec fade radial sur les bords */
.home_products_card.phyai::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.07) 1px, transparent 1px);
  background-size: 48px 48px;
  -webkit-mask-image: radial-gradient(ellipse 75% 85% at center, black 35%, transparent 95%);
          mask-image: radial-gradient(ellipse 75% 85% at center, black 35%, transparent 95%);
}

/* Canvas nodes — dans le flow normal, entre le texte et les CTA */
.ov-nodes-canvas {
  position: relative !important;
  inset: auto !important;
  margin: 0.5rem auto 0.5rem !important;
  max-width: 1340px !important;
  width: 100% !important;
  aspect-ratio: 1400 / 660 !important;
  min-height: 440px !important;
  border: none !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  overflow: visible !important;
  z-index: 2;
  flex: 0 0 auto;
}

.ov-nodes-canvas .grid-bg {
  display: none; /* la grille est désormais sur la carte parent */
}

/* S'assurer que le contenu texte Nfinite reste au-dessus de tout le reste */
.home_products_card.phyai .home_products_card-content.phyai,
.home_products_card.phyai .z-index-2 {
  position: relative;
  z-index: 3;
}

/* ---------- Mur de logos IA supportés ---------- */
.ov-logos-wall {
  position: relative;
  z-index: 3;
  width: 100%;
  max-width: 1280px;
  margin: 0.25rem auto 0.5rem;
  padding: 1rem 1.5rem 1.25rem;
  text-align: center;
  font-family: 'Plus Jakarta Sans', 'Inter', system-ui, sans-serif;
  flex: 0 0 auto;
}
.ov-logos-label {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: rgba(255, 255, 255, 0.45);
  font-weight: 600;
  margin-bottom: 1.25rem;
}
.ov-logos-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 1.75rem 2.75rem;
  min-height: 40px;
}
/*
 * Chaque logo est une <img> servie depuis /logos/*.svg.
 * On force une hauteur uniforme (32px) et on laisse la largeur s'adapter.
 * filter: brightness(0) invert(1) transforme chaque SVG en blanc monochrome
 * pour une cohérence visuelle sur le fond sombre (peu importe la couleur source).
 */
.ov-logo {
  display: inline-flex;
  align-items: center;
  height: 24px;
  opacity: 0.8;
  transition: opacity 0.2s ease, transform 0.2s ease;
}
.ov-logo img {
  height: 24px;
  width: auto;
  max-width: 110px;
  object-fit: contain;
  filter: brightness(0) invert(1);
  display: block;
}
.ov-logo:hover {
  opacity: 1;
  transform: translateY(-1px);
}

/* ---------- Insight : courbe ×5 Chat3D ---------- */
/* La carte Insight est sur fond CLAIR (cream) — textes en noir/gris foncé */

/* Masquer les tags (Retail/Merchandising/Operations sur Digital Twin,
   Scale/Craft/AI-assisted sur Insight) — décision utilisateur. */
.home_products_card.middle .tags-group {
  display: none !important;
}

/* ---------- Badges "Virtual twin" / "ML pipeline" : copie EXACTE du bouton
   "Schedule a demo" Nfinite, sans icône ni ombre ---------- */
/* Valeurs relevées via DevTools sur .primary-buttonv2 button-text :
     color: #D2D4DA
     font: 16px "BDO Grotesk", Tahoma, sans-serif
     padding: 12px 0 (sur .button-text) — on rajoute du padding horizontal
     hauteur totale ~46px
*/
/* Badges "Virtual twin" / "ML pipeline" / "Overnight pipeline".
   Style aligné sur le badge "Powered by Chat3D™" du hero :
   - pill #f1f3f8 avec border subtle
   - padding asymétrique 6/18 pour accueillir l'icône à gauche
   - icon container rond 32×32 avec bolt 28px en placeholder
   - typo BDO Grotesk 14px / 500 / line-height 1.4
   État initial caché (opacity 0 + translateY + blur) — l'IntersectionObserver
   ajoute .ov-visible qui déclenche l'animation d'entrée. */
.home_products_card.middle .product-eyebrow,
.home_products_card.first .product-eyebrow {
  background: #ffffff !important;
  border-radius: 999px !important;
  padding: 6px 18px 6px 6px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-shadow: none !important;
  border: none !important;
  gap: 10px !important;
  min-height: 0 !important;
  line-height: 1.2 !important;
  font-family: "BDO Grotesk", Tahoma, sans-serif;
  /* État initial d'animation */
  opacity: 0;
  transform: translateY(28px) scale(0.92);
  filter: blur(6px);
}
/* Icon container rond — bg #f1f3f8 pour créer un step de contraste vs le
   pill blanc du badge (inversion du pattern Chat3D où l'icône était plus
   foncée que le pill : ici le pill est plus clair que l'icône). */
.home_products_card.middle .product-eyebrow .icon-embed-xsmall,
.home_products_card.first .product-eyebrow .icon-embed-xsmall {
  position: relative;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 24px !important;
  height: 24px !important;
  border-radius: 999px !important;
  background: #f1f3f8 !important;
  flex: 0 0 auto !important;
  margin: 0 !important;
  overflow: visible !important;
}
.home_products_card.middle .product-eyebrow .icon-embed-xsmall img,
.home_products_card.first .product-eyebrow .icon-embed-xsmall img {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 14px;
  height: 14px;
  transform: translate(-50%, -50%);
  object-fit: contain;
  display: block;
  filter: none;
  pointer-events: none;
}
.home_products_card.middle .product-eyebrow > div:not(.icon-embed-xsmall),
.home_products_card.first .product-eyebrow > div:not(.icon-embed-xsmall) {
  color: #383434 !important;
  font-family: "BDO Grotesk", Tahoma, sans-serif !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  line-height: 1.4 !important;
  letter-spacing: 0.3px !important;
  margin: 0 !important;
  padding: 0 !important;
  text-align: center !important;
}

/* Animation d'entrée — déclenchée par IO qui ajoute .ov-visible.
   Multi-keyframe pour donner un mouvement organique :
     0%   : caché en bas, scale 0.92, blur
     55%  : pleinement visible et net
     65%  : OVERSHOOT léger (translateY négatif + scale 1.03)
     85%  : petit retour de ressort sous la position finale
     100% : settle à 0 / 1
   Easing cubic-bezier(0.34, 1.2, 0.64, 1) ajoute encore un peu de spring. */
.home_products_card.middle .product-eyebrow.ov-visible,
.home_products_card.first .product-eyebrow.ov-visible {
  animation: ovBadgeEnter 0.95s cubic-bezier(0.34, 1.2, 0.64, 1) forwards;
}
@keyframes ovBadgeEnter {
  0% {
    opacity: 0;
    transform: translateY(28px) scale(0.92);
    filter: blur(6px);
  }
  55% {
    opacity: 1;
    filter: blur(0);
  }
  65% {
    opacity: 1;
    transform: translateY(-5px) scale(1.03);
    filter: blur(0);
  }
  85% {
    transform: translateY(1px) scale(0.99);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
    filter: blur(0);
  }
}
@media (prefers-reduced-motion: reduce) {
  .home_products_card.middle .product-eyebrow.ov-visible,
  .home_products_card.first .product-eyebrow.ov-visible {
    animation: none;
    opacity: 1;
    transform: none;
    filter: none;
  }
}

/* ---------- Liquid button (See the craft) ---------- */
/* Pill + cercle gooey, palette blanc / gris foncé. Sur hover : le cercle
   s'évade vers la droite avec un effet liquide, l'icône pivote en →,
   pill et cercle échangent leurs couleurs. */
:root {
  --ov-liquid-pill-bg: #ffffff;
  --ov-liquid-pill-fg: #201d1d;
  --ov-liquid-arrow-bg: #201d1d;
  --ov-liquid-arrow-fg: #ffffff;
  --ov-liquid-ease: cubic-bezier(.135, .9, .15, 1);
  --ov-liquid-duration: .9s;
}

.home_products_card .liquid-btn {
  filter: url(#ovLiquidFilter);
  display: inline-flex;
  align-items: stretch;
  color: var(--ov-liquid-pill-fg);
  text-decoration: none;
  cursor: pointer;
  position: relative;
  padding-right: 1.5rem;
  transition: color var(--ov-liquid-duration) var(--ov-liquid-ease);
  border: none;
  background: transparent;
  box-shadow: none;
  font-family: "BDO Grotesk", Tahoma, sans-serif !important;
}
.home_products_card .liquid-btn__wrap {
  display: flex;
  align-items: center;
  gap: .625rem;
  background: var(--ov-liquid-pill-bg);
  border-radius: 3rem;
  padding: .25rem .5rem .25rem 1.5rem;
  /* Typo : alignée sur les badges du haut (Tahoma / BDO Grotesk) */
  font-family: "BDO Grotesk", Tahoma, sans-serif !important;
  font-size: 16px;
  font-weight: 500;
  letter-spacing: 0;
  color: var(--ov-liquid-pill-fg);
  transition:
    background-color var(--ov-liquid-duration) var(--ov-liquid-ease),
    color var(--ov-liquid-duration) var(--ov-liquid-ease);
}
.home_products_card .liquid-btn__arrow {
  background: var(--ov-liquid-arrow-bg);
  color: var(--ov-liquid-arrow-fg);
  border-radius: 10rem;
  width: 2.5rem;
  height: 2.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  transition:
    transform var(--ov-liquid-duration) var(--ov-liquid-ease),
    background-color var(--ov-liquid-duration) var(--ov-liquid-ease),
    color var(--ov-liquid-duration) var(--ov-liquid-ease);
}
.home_products_card .liquid-btn__arrow svg {
  width: 1.5rem;
  height: 1.5rem;
  transition: transform var(--ov-liquid-duration) var(--ov-liquid-ease);
}
.home_products_card .liquid-btn:hover .liquid-btn__arrow {
  transform: translateX(1.5rem) scale(1.05);
  background: var(--ov-liquid-pill-bg);
  color: var(--ov-liquid-arrow-bg);
}
.home_products_card .liquid-btn:hover .liquid-btn__arrow svg {
  transform: rotate(-45deg);
}
.home_products_card .liquid-btn:hover .liquid-btn__wrap {
  background: var(--ov-liquid-arrow-bg);
  color: var(--ov-liquid-pill-bg);
}
.home_products_card .liquid-btn:active {
  transform: scale(.97);
}
@media (prefers-reduced-motion: reduce) {
  .home_products_card .liquid-btn,
  .home_products_card .liquid-btn__wrap,
  .home_products_card .liquid-btn__arrow,
  .home_products_card .liquid-btn__arrow svg {
    transition-duration: 0.01ms;
  }
}

/* ---------- Liquid btn : version générique (hors home_products_card) ---------- */
/* Utilisée sur les pages internes (ml-pipeline, etc.) avec exactement le même
   style que les CTAs "See the craft" / "Try Granular" de la home. */
.ov-liquid-scope .liquid-btn,
a.liquid-btn:not(.home_products_card .liquid-btn) {
  filter: url(#ovLiquidFilter);
  display: inline-flex;
  align-items: stretch;
  color: var(--ov-liquid-pill-fg);
  text-decoration: none;
  cursor: pointer;
  position: relative;
  padding-right: 1.5rem;
  transition: color var(--ov-liquid-duration) var(--ov-liquid-ease);
  border: none;
  background: transparent;
  box-shadow: none;
  font-family: "BDO Grotesk", Tahoma, sans-serif !important;
}
.ov-liquid-scope .liquid-btn__wrap,
a.liquid-btn:not(.home_products_card .liquid-btn) .liquid-btn__wrap {
  display: flex;
  align-items: center;
  gap: .625rem;
  background: var(--ov-liquid-pill-bg);
  border-radius: 3rem;
  padding: .25rem .5rem .25rem 1.5rem;
  font-family: "BDO Grotesk", Tahoma, sans-serif !important;
  font-size: 16px;
  font-weight: 500;
  letter-spacing: 0;
  color: var(--ov-liquid-pill-fg);
  transition:
    background-color var(--ov-liquid-duration) var(--ov-liquid-ease),
    color var(--ov-liquid-duration) var(--ov-liquid-ease);
}
.ov-liquid-scope .liquid-btn__arrow,
a.liquid-btn:not(.home_products_card .liquid-btn) .liquid-btn__arrow {
  background: var(--ov-liquid-arrow-bg);
  color: var(--ov-liquid-arrow-fg);
  border-radius: 10rem;
  width: 2.5rem;
  height: 2.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  transition:
    transform var(--ov-liquid-duration) var(--ov-liquid-ease),
    background-color var(--ov-liquid-duration) var(--ov-liquid-ease),
    color var(--ov-liquid-duration) var(--ov-liquid-ease);
}
.ov-liquid-scope .liquid-btn__arrow svg,
a.liquid-btn:not(.home_products_card .liquid-btn) .liquid-btn__arrow svg {
  width: 1.5rem;
  height: 1.5rem;
  transition: transform var(--ov-liquid-duration) var(--ov-liquid-ease);
}
.ov-liquid-scope .liquid-btn:hover .liquid-btn__arrow,
a.liquid-btn:not(.home_products_card .liquid-btn):hover .liquid-btn__arrow {
  transform: translateX(1.5rem) scale(1.05);
  background: var(--ov-liquid-pill-bg);
  color: var(--ov-liquid-arrow-bg);
}
.ov-liquid-scope .liquid-btn:hover .liquid-btn__arrow svg,
a.liquid-btn:not(.home_products_card .liquid-btn):hover .liquid-btn__arrow svg {
  transform: rotate(-45deg);
}
.ov-liquid-scope .liquid-btn:hover .liquid-btn__wrap,
a.liquid-btn:not(.home_products_card .liquid-btn):hover .liquid-btn__wrap {
  background: var(--ov-liquid-arrow-bg);
  color: var(--ov-liquid-pill-bg);
}
.ov-liquid-scope .liquid-btn:active,
a.liquid-btn:not(.home_products_card .liquid-btn):active {
  transform: scale(.97);
}
/* Variante "ghost" : pour rendre le wrap transparent avec bordure (look secondaire) */
.liquid-btn.ghost .liquid-btn__wrap {
  background: transparent;
  color: var(--ov-liquid-pill-fg);
  box-shadow: inset 0 0 0 1px rgba(17, 18, 24, 0.18);
}
.liquid-btn.ghost:hover .liquid-btn__wrap {
  background: var(--ov-liquid-arrow-bg);
  color: var(--ov-liquid-pill-bg);
  box-shadow: inset 0 0 0 1px var(--ov-liquid-arrow-bg);
}
/* Variante "on-dark" : pour usage sur fond sombre (final CTA) */
.liquid-btn.on-dark .liquid-btn__wrap {
  background: #ffffff;
  color: #201d1d;
}
.liquid-btn.on-dark .liquid-btn__arrow {
  background: #201d1d;
  color: #ffffff;
}
.liquid-btn.on-dark:hover .liquid-btn__wrap {
  background: #201d1d;
  color: #ffffff;
}
.liquid-btn.on-dark:hover .liquid-btn__arrow {
  background: #ffffff;
  color: #201d1d;
}
/* Book-a-demo final CTA : force Plus Jakarta Sans over the liquid-btn's default
   BDO Grotesk. Specificity bumped past the base rules. */
a.liquid-btn.ov-cta-end:not(.home_products_card .liquid-btn),
a.liquid-btn.ov-cta-end:not(.home_products_card .liquid-btn) .liquid-btn__wrap {
  font-family: 'Plus Jakarta Sans', 'Inter', sans-serif !important;
}
@media (prefers-reduced-motion: reduce) {
  .ov-liquid-scope .liquid-btn,
  .ov-liquid-scope .liquid-btn__wrap,
  .ov-liquid-scope .liquid-btn__arrow,
  .ov-liquid-scope .liquid-btn__arrow svg {
    transition-duration: 0.01ms;
  }
}

/* ---------- CTAs : format flex simple (Nfinite natif), zéro animation ---------- */
/* - Fond blanc, texte noir, icône grise à droite
   - Pas d'ombre portée, pas d'absolute positioning
   - Toutes les animations Nfinite (wipe, 2e texte qui monte, hover transform)
     sont désactivées explicitement */
.home_products_card.middle .primary-buttonv2 {
  position: static !important;
  background: #ffffff !important;
  color: #201d1d !important;
  box-shadow: none !important;
  border: 1px solid rgba(16, 18, 35, 0.08) !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 10px !important;
  overflow: visible !important;
  transition: none !important;
  animation: none !important;
  /* Padding interne resserré */
  padding: 7px 14px 7px 18px !important;
}
.home_products_card.middle .primary-buttonv2:hover {
  background: #ffffff !important;
}
.home_products_card.middle .primary-buttonv2 .button-text {
  position: static !important;
  color: #201d1d !important;
  order: 1 !important;
  transform: none !important;
  transition: none !important;
  animation: none !important;
  top: auto !important;
  right: auto !important;
  left: auto !important;
  bottom: auto !important;
}
.home_products_card.middle .primary-buttonv2:hover .button-text {
  transform: none !important;
  transition: none !important;
}
/* 2e button-text dupliqué (celui qui monte en hover) + wipe overlay : OFF */
.home_products_card.middle .primary-buttonv2 .button-wipe,
.home_products_card.middle .primary-buttonv2 .button-text + .button-text,
.home_products_card.middle .primary-buttonv2 .button-text[style*="position: absolute"] {
  display: none !important;
}
/* Icône à droite du texte, en flow flex normal */
.home_products_card.middle .primary-buttonv2 .icon-embed-xsmall {
  position: static !important;
  order: 2 !important;
  flex: 0 0 auto;
  transform: none !important;
  transition: none !important;
  animation: none !important;
  inset: auto !important;
  width: 24px !important;
  height: 24px !important;
}
.home_products_card.middle .primary-buttonv2 .icon-embed-xsmall svg rect {
  fill: #D2D4DA !important;
}

/* Digital Twin : model-viewer remplace le canvas Spline.
   Le wrap est forcé en position absolute sur la moitié droite de la carte
   (comme le faisait probablement Nfinite pour le canvas Spline). La carte
   garde sa taille d'origine — dictée par la colonne texte à gauche. */
.home_products_card.middle:not(.insight) {
  position: relative !important;
  overflow: hidden;
}
.home_products_card.middle:not(.insight) .home_products_spline-wrap {
  position: absolute !important;
  /* Même pattern que la section Insight : le viewer 3D couvre TOUTE la carte,
     le texte est posé par-dessus avec ses max-width natifs Webflow (valeurs
     fixes en px). Résultat : le texte ne se redimensionne plus avec l'écran. */
  inset: 0 !important;
  z-index: 0 !important;
  pointer-events: auto;
}
/* Padding natif Nfinite rétabli (48px 40px), PAS de padding-right en % */
.home_products_grid-list._2col .home_products_card.middle:not(.insight) .home_products_card-content.large-gap {
  padding: 48px 40px !important;
  box-sizing: border-box !important;
}
.home_products_card.middle:not(.insight) .home_products_card-content {
  position: relative;
  z-index: 2;
}
.ov-dt-model {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  min-height: 0 !important;
  max-height: none !important;
  display: block;
  background: transparent;
  /* Masquer complètement la barre de chargement + poster gris du model-viewer */
  --poster-color: transparent;
  --progress-bar-color: transparent;
  --progress-bar-height: 0px;
  --progress-mask: transparent;
  border-radius: 20px;
  /* Décaler le sac à dos vers la droite dans le cadre */
  transform: translateX(18%);
}
.ov-dt-model::part(default-progress-bar) {
  display: none !important;
  opacity: 0 !important;
}

/* Panneau "Export specs" glassmorphique — miroir vertical de la Safari
   frame en bas-droite. Style iOS : topbar avec titre centré + body en
   liste discrète. Tailles compactes, ombre douce. */
.home_products_card.middle:not(.insight) .ov-dt-specs {
  position: absolute;
  top: 28px;
  right: 28px;
  width: 176px;
  padding: 0; /* topbar et body gèrent leur propre padding */
  background: rgba(255, 255, 255, 0.36);
  -webkit-backdrop-filter: blur(22px) saturate(180%);
          backdrop-filter: blur(22px) saturate(180%);
  border: 1px solid rgba(255, 255, 255, 0.55);
  border-radius: 14px;
  /* Ombre allégée (1/3 de l'intensité précédente) */
  box-shadow:
    0 8px 22px rgba(16, 18, 35, 0.10),
    0 1px 3px rgba(16, 18, 35, 0.05);
  overflow: hidden; /* garantit que la topbar respecte le border-radius */
  z-index: 4;
  font-family: 'Plus Jakarta Sans', 'Inter', system-ui, sans-serif;
  pointer-events: auto;
}
/* Topbar style iOS : titre centré, fond légèrement plus opaque pour
   marquer la séparation, hairline bottom comme un divider iOS sheet. */
.ov-dt-specs-bar {
  padding: 7px 12px 8px;
  background: rgba(255, 255, 255, 0.4);
  border-bottom: 1px solid rgba(15, 23, 42, 0.06);
  text-align: center;
  font-size: 10px;
  font-weight: 600;
  color: rgba(32, 29, 29, 0.65);
  letter-spacing: 0.05px;
}
.ov-dt-specs-list {
  list-style: none;
  margin: 0;
  padding: 10px 12px 11px;
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.ov-dt-specs-list li {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-size: 10px;
  line-height: 1.2;
  gap: 10px;
}
.ov-dt-specs-list li span:first-child {
  color: rgba(32, 29, 29, 0.5);
  font-weight: 500;
}
/* Valeurs plus claires + weight réduit pour rester discret */
.ov-dt-specs-list li span:last-child {
  color: rgba(32, 29, 29, 0.62);
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* Frame iOS Safari glassmorphism qui remplace l'ancienne fiche ID/VOLUME/etc.
   Le conteneur .dt_data garde sa position absolute d'origine (Nfinite) mais
   reçoit une nouvelle skin : barre d'URL Safari + image produit. */
.ov-safari-frame {
  background: rgba(255, 255, 255, 0.32) !important;
  -webkit-backdrop-filter: blur(22px) saturate(180%);
          backdrop-filter: blur(22px) saturate(180%);
  border: 1px solid rgba(255, 255, 255, 0.55) !important;
  border-radius: 20px !important;
  overflow: hidden !important;
  box-shadow:
    0 18px 48px rgba(16, 18, 35, 0.22),
    0 2px 6px rgba(16, 18, 35, 0.08) !important;
  padding: 0 !important;
  width: 200px !important;
  /* Aligné à droite, descendu vers le bas */
  left: auto !important;
  right: 40px !important;
  bottom: 16px !important;
  top: auto !important;
  /* Flex column : zéro gap entre chrome et image */
  display: flex !important;
  flex-direction: column !important;
  z-index: 3;
  font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Inter', system-ui, sans-serif;
  font-size: 0;
  line-height: 0;
}
.ov-safari-chrome {
  display: flex !important;
  align-items: center;
  gap: 10px;
  /* Padding vertical équilibré : la pill respire au-dessus ET en dessous.
     Le fond translucide du chrome va jusqu'à son bord inférieur, qui est
     en contact direct avec l'image (pas de margin entre les deux). */
  padding: 10px 12px 10px !important;
  margin: 0 !important;
  background: linear-gradient(to bottom,
    rgba(255, 255, 255, 0.55),
    rgba(255, 255, 255, 0.3));
  line-height: 1;
  font-size: 14px;
  flex: 0 0 auto;
  width: 100% !important;
  box-sizing: border-box;
}
.ov-safari-dots {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  flex: 0 0 auto;
}
.ov-safari-dots span {
  display: block;
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: rgba(16, 18, 35, 0.18);
}
.ov-safari-dots span:nth-child(1) { background: rgba(255, 90, 71, 0.55); }
.ov-safari-dots span:nth-child(2) { background: rgba(255, 179, 71, 0.55); }
.ov-safari-dots span:nth-child(3) { background: rgba(76, 175, 80, 0.50); }
.ov-safari-url {
  /* Content-sized + margin-left auto : URL + flèche sont poussés à droite,
     les dots restent à gauche, l'espace vide est entre les deux */
  flex: 0 0 auto !important;
  margin-left: auto !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 5px 14px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.62);
  color: rgba(16, 18, 35, 0.5);
  box-shadow: inset 0 0 0 1px rgba(16, 18, 35, 0.05);
  min-height: 18px;
}
.ov-safari-url svg {
  opacity: 0.6;
}
.ov-safari-actions {
  display: inline-flex;
  align-items: center;
  color: rgba(16, 18, 35, 0.35);
  flex: 0 0 auto;
  /* Plus besoin du margin-left: auto — la URL pill au-dessus le fait déjà
     et entraîne la flèche avec elle à droite */
  margin-left: 0 !important;
}
.ov-safari-body {
  display: block !important;
  width: 100% !important;
  background: #f5f5f5;
  overflow: hidden;
  margin: 0 !important;
  padding: 0 !important;
  line-height: 0 !important;
  font-size: 0 !important;
  flex: 1 1 auto;
  min-height: 0;
}
.ov-safari-body img {
  display: block !important;
  width: 100% !important;
  height: auto;
  object-fit: cover;
  margin: 0 !important;
  padding: 0 !important;
  vertical-align: top !important;
  border: 0 !important;
}

/* Normalisation : aligner verticalement le contenu des deux cartes
   Digital Twin et Chat3D (effet miroir demandé). Les deux utilisent
   .home_products_card-content.large-gap — on force le même padding
   et le même gap entre les children. */
.home_products_grid-list._2col .home_products_card.middle .home_products_card-content.large-gap {
  padding: 48px 40px !important;
  box-sizing: border-box !important;
}
.home_products_grid-list._2col .home_products_card.middle .home_products_card-content.large-gap > :first-child {
  margin-top: 0 !important;
}

/* Ne pas changer la hauteur de la section : on retire tout min-height forcé
   et on override les mask-image Nfinite qui fadaient le bord droit (et donc
   masquaient le label ×5). */

.home_products_card.middle.insight .home_products_insight-graph,
.home_products_card.middle.insight .home_products_insight-video-wrap,
.home_products_card.middle.insight .home_products_insight-video,
.home_products_card.middle.insight .w-background-video {
  mask-image: none !important;
  -webkit-mask-image: none !important;
  mask: none !important;
  -webkit-mask: none !important;
}

/* Graph devient le fond du card : position absolute, derrière le contenu texte.
   La grille parallax 3×5 occupe la moitié droite (inset 0 -40px 0 58%),
   débordant légèrement à droite pour que le mask-image fade coupe les tuiles. */
.home_products_card.middle.insight {
  position: relative !important;
  overflow: hidden !important;
  isolation: isolate;
}
.home_products_card.middle.insight .home_products_insight-graph {
  position: absolute !important;
  inset: 0 -40px 0 58% !important;
  z-index: 0 !important;
  display: block !important;
  padding: 0 !important;
  box-sizing: border-box !important;
  overflow: hidden !important;
  pointer-events: none !important;
}
.home_products_card.middle.insight .home_products_card-content {
  position: relative;
  z-index: 2;
}

.ov-insight-curve {
  width: 100%;
  height: 100%;
  display: block;
  position: relative;
  overflow: hidden;
  /* Double fade : à gauche pour donner de l'air au texte, à droite pour que
     les tuiles semblent sortir de l'écran dans la couleur du fond */
  -webkit-mask-image: linear-gradient(to right, transparent 0%, transparent 4%, black 20%, black 68%, transparent 100%);
          mask-image: linear-gradient(to right, transparent 0%, transparent 4%, black 20%, black 68%, transparent 100%);
}

/* Grille 3 colonnes × 5 rangées — style Nfinite phyai-grid */
.ov-assets-grid {
  display: flex;
  gap: 10px;
  width: 100%;
  height: 100%;
}
.ov-assets-col {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
  will-change: transform;
  transition: transform 0.05s linear;
}
/* Col 1 décalée de départ pour cascading */
.ov-assets-col[data-col-idx="1"] {
  transform: translate3d(0, -38px, 0);
}
.ov-asset-tile {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1;
  flex: 0 0 auto; /* empêche le flex d'écraser la hauteur — tuiles vraiment carrées */
  border-radius: 14px;
  overflow: hidden;
  background-size: cover;
  background-position: center;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.08);
}
.ov-asset-tag {
  position: absolute;
  top: 6px;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(15, 15, 20, 0.55);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  color: #fff;
  font-family: 'Plus Jakarta Sans', 'Inter', system-ui, sans-serif;
  font-size: 9px;
  font-weight: 600;
  padding: 3px 8px;
  border-radius: 99px;
  letter-spacing: 0.04em;
  white-space: nowrap;
}
/* Variant pour tuiles claires : badge dark */
.ov-asset-tile.is-dark-label .ov-asset-tag {
  background: rgba(10, 10, 15, 0.7);
}

.ov-curve-bignum {
  fill: #b130ff;
  font-family: 'Plus Jakarta Sans', 'Inter', sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0;
  transition: opacity 0.3s ease;
}

/* ============================================================
   VCP card (Overnight Digital) : texte gauche (largeur Webflow native),
   schéma droit (Standard + Overnight pipelines empilés).
   - .home_vxp_images-wrapper et .home_vxp_data → display:none via JS
   - .tags-group → display:none via JS
   - .home_products_card-content garde sa max-width Webflow native
     (.max-width-medium ≈ 520px) — pas d'override
   - .ov-vcp-schema injecté en absolute, démarre à 50% pour respecter
     le respiro entre la fin naturelle du texte et le début du schéma
   ============================================================ */
.home_products_card.first {
  position: relative !important;
  overflow: hidden !important;
}
/* Le bloc texte (titre + paragraphe + CTA) reste en arrière-plan z:1.
   Sa largeur Webflow native (.max-width-medium) ne le fait pas chevaucher
   le Safari, donc passer le Safari en z:2 ne masque rien visuellement. */
.home_products_card.first .home_products_card-content {
  position: relative;
  z-index: 1;
}
/* Sécurité : si jamais les tags se ré-affichent (re-render Webflow) */
.home_products_card.first .tags-group {
  display: none !important;
}
/* Le schéma + Safari passent au premier plan (z-index: 2). Comme le
   Safari démarre à left: 33% et que le texte natif Webflow s'arrête
   bien avant (max-width-medium ≈ 540px sur card large), zéro overlap
   visuel — la mise en page n'est pas cassée. */
.home_products_card.first .ov-vcp-schema {
  position: absolute;
  top: 48px;
  bottom: 0;
  left: 33%;
  right: 32px;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  z-index: 2;
  pointer-events: auto;
}
.home_products_card.first .ov-vcp-schema .ov-pipe {
  width: 100%;
}

/* ----- Cadre Safari qui enrobe les 2 schémas -----
   Devient un container "interface" qui structure visuellement la section.
   Couleurs : gris cool (pas chauds) pour matcher le ton neutre du site,
   pas le cream warm que j'avais avant.
   Hauteur : flex: 1 → s'étire jusqu'au bas de .ov-vcp-schema, puis le
   mask-image fade le bas vers transparent. */
.home_products_card.first .ov-vcp-safari-frame {
  width: 100%;
  flex: 1 1 auto;
  background: #ffffff;
  border-radius: 18px 18px 0 0;
  border: 1px solid rgba(15, 23, 42, 0.08);
  border-bottom: none;
  box-shadow:
    0 0 0 1px rgba(15, 23, 42, 0.03),
    0 28px 64px -34px rgba(15, 23, 42, 0.22);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  /* Fade bas : on garde 80% du Safari complètement opaque (au lieu de 65%
     précédemment) pour que la note "Same steps — grey overhead..." reste
     bien lisible — elle se trouve juste avant le début du fade maintenant. */
  -webkit-mask-image: linear-gradient(to bottom, black 0%, black 80%, transparent 100%);
          mask-image: linear-gradient(to bottom, black 0%, black 80%, transparent 100%);
}
.home_products_card.first .ov-vcp-safari-chrome {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 16px;
  /* Couleur solide flat — descendue de quelques teintes (#eef0f4 → #e1e4ea)
     pour ressortir clairement du fond du Safari (qui est blanc) et de la
     card (qui est cream). Gris cool neutre, style macOS chrome. */
  background: #e1e4ea;
  border-bottom: 1px solid rgba(15, 23, 42, 0.1);
  flex: 0 0 auto;
}
.home_products_card.first .ov-vcp-safari-dots {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  flex: 0 0 auto;
}
.home_products_card.first .ov-vcp-safari-dots span {
  display: block;
  width: 12px; height: 12px;
  border-radius: 50%;
  box-shadow: inset 0 0 0 0.5px rgba(15, 23, 42, 0.1);
}
.home_products_card.first .ov-vcp-safari-dots span:nth-child(1) { background: #ff5f57; }
.home_products_card.first .ov-vcp-safari-dots span:nth-child(2) { background: #ffbd2e; }
.home_products_card.first .ov-vcp-safari-dots span:nth-child(3) { background: #28c940; }
.home_products_card.first .ov-vcp-safari-url {
  flex: 0 1 auto;
  margin: 0 auto;
  max-width: 420px;
  min-width: 180px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 6px 18px;
  background: rgba(15, 23, 42, 0.05);
  border-radius: 999px;
  font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Inter', system-ui, sans-serif;
  font-size: 12px;
  font-weight: 500;
  color: rgba(32, 29, 29, 0.55);
  letter-spacing: 0.05px;
  white-space: nowrap;
}
.home_products_card.first .ov-vcp-safari-url svg {
  flex: 0 0 auto;
  opacity: 0.55;
}
.home_products_card.first .ov-vcp-safari-actions {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  color: rgba(32, 29, 29, 0.4);
  flex: 0 0 auto;
}
.home_products_card.first .ov-vcp-safari-body {
  padding: 26px 28px 22px;
  flex: 1 1 auto;
  background: #ffffff;
  /* Pipe au top, espace en bas qui sera mangé par le fade du frame parent */
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}

/* Resserre légèrement le bouton CTA vers le haut (≈ 8 px) pour aligner
   le bas du bloc texte gauche avec le bas du Safari à droite. */
.home_products_card.first .liquid-btn {
  margin-top: -8px;
}
.home_products_card.first .ov-vcp-schema .ov-pipe-section {
  margin-top: 22px;
}
.home_products_card.first .ov-vcp-schema .ov-pipe-section:first-child {
  margin-top: 0;
}

/* ----- Tailles "imposantes" pour le schéma dans le contexte VCP -----
   Avec ~2/3 de card de large, le schéma a beaucoup d'espace : on bump
   les bars (32→44px), les labels (8→11px), le headline ×5 faster
   (28→38px) et les paddings du frame pour un rendu plus présent. */
.home_products_card.first .ov-vcp-schema .ov-pipe-tag {
  font-size: 11px;
  letter-spacing: 2.4px;
  margin-bottom: 12px;
}
.home_products_card.first .ov-vcp-schema .ov-pipe-tag::before {
  width: 8px; height: 8px;
}
.home_products_card.first .ov-vcp-schema .ov-pipe-frame {
  padding: 22px 20px 24px;
  border-radius: 18px;
  box-shadow:
    0 0 0 1px rgba(10, 10, 10, 0.05),
    0 18px 44px -28px rgba(10, 10, 10, 0.22);
}
/* Gap 2px entre segments (au lieu du 3px par défaut) — demandé pour
   que le pipeline Overnight (post-shrink à 54%) tienne entièrement
   sans débordement et reste lisible. */
.home_products_card.first .ov-vcp-schema .ov-pipe-row {
  gap: 2px;
}
.home_products_card.first .ov-vcp-schema .ov-pipe-bar {
  height: 44px;
  border-radius: 7px;
}
.home_products_card.first .ov-vcp-schema .ov-pipe-label {
  font-size: 11px;
  letter-spacing: 0.15px;
  padding-bottom: 11px;
}
.home_products_card.first .ov-vcp-schema .ov-pipe-note {
  font-size: 11px;
  margin-top: 14px;
}

/* Card "×5 faster" : pas d'eyebrow, headline + copy centrés verticalement
   par flex (justify-content: center). Hauteur = strictement celle de la
   .ov-pipe-frame à gauche, donc on clear :
     - top: tag (font 11 ≈ 13px) + margin-bottom 12px = 25px
     - bottom: note (font 11 ≈ 15px) + margin-top 14px = 29px
   → la card et le frame partagent exactement les mêmes y-bounds. */
.home_products_card.first .ov-vcp-schema .ov-pipe-accel {
  top: 25px;
  bottom: 29px;
  left: calc(54% + 14px);
  padding: 18px 22px;
  border-radius: 14px;
  box-shadow:
    0 0 0 1px rgba(10, 10, 10, 0.05),
    0 14px 32px -22px rgba(10, 10, 10, 0.18);
}
.home_products_card.first .ov-vcp-schema .ov-pipe-accel-headline {
  font-size: 30px;
  letter-spacing: -1.1px;
  margin-bottom: 8px;
}
.home_products_card.first .ov-vcp-schema .ov-pipe-accel-copy {
  font-size: 11px;
  line-height: 1.45;
}

/* ----- Gap résiduel après animation phase 2 -----
   Pre-animation : .ov-pipe-bars { gap: 2px } sépare le bar coloré du
   bar gris à l'intérieur d'un segment. Post-animation, le gris a
   `flex-grow: 0` (largeur 0) mais le gap CSS de 2px persiste comme
   espace vide à droite du bar coloré. Cumulé au gap inter-segment
   de 2px (.ov-pipe-row), on obtenait 4px visibles entre 2 colorés
   adjacents. On annule le gap intra-segment APRÈS l'animation pour
   ne garder que les 2px inter-segment demandés. */
.home_products_card.first .ov-vcp-schema .ov-pipe-section.is-animated.visible .ov-pipe-bars {
  gap: 0;
  transition: gap 0.6s cubic-bezier(0.65, 0, 0.35, 1) 2.6s;
}

/* ============================================================
   Schéma animé "Standard vs Overnight 3D pipeline"
   Source : ANIMATED-PIPELINE-SLIDE.md (deck /demo/retail).
   Composé de 2 sections (.ov-pipe-section) empilées :
     - Phase 1 : segments slide-in L→R avec stagger (.visible)
     - Phase 2 : barres .is-grey fade out + frame shrink à 54% sur
       .ov-pipe-section.is-animated, et .ov-pipe-accel apparaît
       depuis la gauche dans l'espace libéré.
   ============================================================ */
.ov-pipe {
  width: 100%;
  font-family: 'Plus Jakarta Sans', 'Inter', system-ui, sans-serif;
  /* Tokens couleurs (palette du deck — reproduite ici en --pipe-* pour
     ne pas écraser les --ov-* déjà définis sur :root) */
  --pipe-red:    #CB360F;
  --pipe-coral:  #FF5A47;
  --pipe-orange: #FF8C00;
  --pipe-yellow: #FFB347;
  --pipe-violet: #9533CF;
  --pipe-purple: #7B24F5;
  --pipe-green:  #4CAF50;
  --pipe-blue:   #2196F3;
  --pipe-pink:   #E89DC8;
  /* Reset des héritages typo Webflow qui pourraient écraser nos tailles */
  font-size: 12px;
  line-height: 1.4;
}
.ov-pipe-section {
  position: relative;
  margin-top: 18px;
}
.ov-pipe-section:first-child { margin-top: 0; }

/* Tag éditorial avec point coloré devant (style Linear/Stripe) */
.ov-pipe-tag {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: rgba(10, 10, 10, 0.55);
  margin-bottom: 10px;
}
.ov-pipe-tag::before {
  content: '';
  width: 7px; height: 7px; border-radius: 50%;
  flex-shrink: 0;
}
.ov-pipe-tag.standard::before  { background: var(--pipe-coral); }
.ov-pipe-tag.overnight::before { background: var(--pipe-violet); }

/* Cadre de chaque pipeline (gris cool neutre, matche l'interface du site
   au lieu du cream warm précédent qui jurait avec le fond du Safari). */
.ov-pipe-frame {
  background: linear-gradient(135deg, #fbfbfd 0%, #f1f3f6 100%);
  border-radius: 14px;
  padding: 16px 14px 18px;
  box-shadow:
    0 0 0 1px rgba(15, 23, 42, 0.04),
    0 12px 28px -20px rgba(15, 23, 42, 0.16);
  position: relative;
  overflow: hidden;
}

.ov-pipe-row {
  display: flex;
  align-items: flex-start;
  gap: 3px;
}

/* Un segment = label en haut + barres colorée + grise en dessous.
   Phase 1 : opacité 0 + translateX(-14px) → visible. Stagger via :nth-child.
   `min-width: 0` est crucial : sans ça, le label en `white-space: nowrap`
   force le segment à sa min-content width et empêche le shrink à 54%
   du frame en phase 2. Avec, les labels truncate proprement (ellipsis). */
.ov-pipe-seg {
  display: flex;
  flex-direction: column;
  min-width: 0;
  opacity: 0;
  transform: translateX(-14px);
  transition:
    opacity 0.55s cubic-bezier(0.16, 1, 0.3, 1),
    transform 0.55s cubic-bezier(0.16, 1, 0.3, 1);
}
.ov-pipe-section.visible .ov-pipe-seg {
  opacity: 1;
  transform: translateX(0);
}
.ov-pipe-section.visible .ov-pipe-seg:nth-child(1)  { transition-delay: 0.08s; }
.ov-pipe-section.visible .ov-pipe-seg:nth-child(2)  { transition-delay: 0.16s; }
.ov-pipe-section.visible .ov-pipe-seg:nth-child(3)  { transition-delay: 0.24s; }
.ov-pipe-section.visible .ov-pipe-seg:nth-child(4)  { transition-delay: 0.32s; }
.ov-pipe-section.visible .ov-pipe-seg:nth-child(5)  { transition-delay: 0.40s; }
.ov-pipe-section.visible .ov-pipe-seg:nth-child(6)  { transition-delay: 0.48s; }
.ov-pipe-section.visible .ov-pipe-seg:nth-child(7)  { transition-delay: 0.56s; }
.ov-pipe-section.visible .ov-pipe-seg:nth-child(8)  { transition-delay: 0.64s; }
.ov-pipe-section.visible .ov-pipe-seg:nth-child(9)  { transition-delay: 0.72s; }
.ov-pipe-section.visible .ov-pipe-seg:nth-child(10) { transition-delay: 0.80s; }

.ov-pipe-label {
  font-size: 8px;
  font-weight: 600;
  letter-spacing: 0.1px;
  padding-bottom: 7px;
  white-space: nowrap;
  text-align: center;
  overflow: hidden;
  text-overflow: ellipsis;
  opacity: 0.95;
  line-height: 1.2;
}
.ov-pipe-bars {
  display: flex;
  gap: 2px;
}
.ov-pipe-bar {
  height: 32px;
  border-radius: 5px;
  min-width: 5px;
  position: relative;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.35),
    inset 0 -1px 0 rgba(0, 0, 0, 0.05);
}

/* Barres colorées (créatif) — fond glass-morphic + hairline assortie */
.ov-pipe-bar[data-color="red"]:not(.is-grey) {
  background: linear-gradient(135deg, rgba(203,54,15,0.96) 0%, rgba(203,54,15,0.82) 100%);
  border: 1px solid rgba(203, 54, 15, 0.55);
}
.ov-pipe-bar[data-color="coral"]:not(.is-grey) {
  background: linear-gradient(135deg, rgba(255,90,71,0.96) 0%, rgba(255,90,71,0.82) 100%);
  border: 1px solid rgba(255, 90, 71, 0.55);
}
.ov-pipe-bar[data-color="orange"]:not(.is-grey) {
  background: linear-gradient(135deg, rgba(255,140,0,0.96) 0%, rgba(255,140,0,0.82) 100%);
  border: 1px solid rgba(255, 140, 0, 0.55);
}
.ov-pipe-bar[data-color="yellow"]:not(.is-grey) {
  background: linear-gradient(135deg, rgba(255,179,71,0.96) 0%, rgba(255,179,71,0.82) 100%);
  border: 1px solid rgba(255, 179, 71, 0.55);
}
.ov-pipe-bar[data-color="violet"]:not(.is-grey) {
  background: linear-gradient(135deg, rgba(149,51,207,0.96) 0%, rgba(149,51,207,0.82) 100%);
  border: 1px solid rgba(149, 51, 207, 0.55);
}
.ov-pipe-bar[data-color="purple"]:not(.is-grey) {
  background: linear-gradient(135deg, rgba(123,36,245,0.96) 0%, rgba(123,36,245,0.82) 100%);
  border: 1px solid rgba(123, 36, 245, 0.55);
}
.ov-pipe-bar[data-color="green"]:not(.is-grey) {
  background: linear-gradient(135deg, rgba(76,175,80,0.96) 0%, rgba(76,175,80,0.82) 100%);
  border: 1px solid rgba(76, 175, 80, 0.55);
}
.ov-pipe-bar[data-color="blue"]:not(.is-grey) {
  background: linear-gradient(135deg, rgba(33,150,243,0.96) 0%, rgba(33,150,243,0.82) 100%);
  border: 1px solid rgba(33, 150, 243, 0.55);
}
.ov-pipe-bar[data-color="pink"]:not(.is-grey) {
  background: linear-gradient(135deg, rgba(232,157,200,0.95) 0%, rgba(232,157,200,0.78) 100%);
  border: 1px solid rgba(220, 130, 190, 0.55);
}

/* Barres grises (overhead à supprimer) — outline dashed + tint très léger
   du parent. Convention UI : "cette zone va disparaître". */
.ov-pipe-bar.is-grey {
  border: 1px dashed rgba(10, 10, 10, 0.18);
  box-shadow: none;
}
.ov-pipe-bar.is-grey[data-color="red"]    { background: rgba(203, 54, 15, 0.07);  border-color: rgba(203, 54, 15, 0.25); }
.ov-pipe-bar.is-grey[data-color="coral"]  { background: rgba(255, 90, 71, 0.07);  border-color: rgba(255, 90, 71, 0.25); }
.ov-pipe-bar.is-grey[data-color="orange"] { background: rgba(255, 140,  0, 0.07); border-color: rgba(255, 140,  0, 0.25); }
.ov-pipe-bar.is-grey[data-color="yellow"] { background: rgba(255, 179, 71, 0.10); border-color: rgba(255, 179, 71, 0.28); }
.ov-pipe-bar.is-grey[data-color="violet"] { background: rgba(149,  51,207, 0.07); border-color: rgba(149,  51,207, 0.25); }
.ov-pipe-bar.is-grey[data-color="purple"] { background: rgba(123,  36,245, 0.07); border-color: rgba(123,  36,245, 0.25); }
.ov-pipe-bar.is-grey[data-color="green"]  { background: rgba( 76, 175, 80, 0.08); border-color: rgba( 76, 175, 80, 0.26); }
.ov-pipe-bar.is-grey[data-color="blue"]   { background: rgba( 33, 150,243, 0.07); border-color: rgba( 33, 150,243, 0.25); }
.ov-pipe-bar.is-grey[data-color="pink"]   { background: rgba(232, 157,200, 0.14); border-color: rgba(200, 140,200, 0.30); }

.ov-pipe-note {
  font-size: 10px;
  color: rgba(10, 10, 10, 0.5);
  margin-top: 10px;
  letter-spacing: 0.1px;
  opacity: 0.85;
  display: flex;
  align-items: center;
  gap: 6px;
}

/* Swatches de légende dans la note Standard : un mini-rectangle coloré
   (créatif) + un mini-rectangle pointillé (overhead à supprimer). Tailles
   et styles calqués sur les vrais bars du frame pour que la légende soit
   lisible visuellement comme une réplique miniature d'un segment. */
.ov-pipe-swatch {
  display: inline-block;
  width: 18px;
  height: 12px;
  border-radius: 3px;
  flex: 0 0 auto;
}
.ov-pipe-swatch.is-colored {
  background: linear-gradient(135deg, rgba(255, 140, 0, 0.95) 0%, rgba(255, 90, 71, 0.82) 100%);
  border: 1px solid rgba(255, 140, 0, 0.5);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.35),
    inset 0 -1px 0 rgba(0, 0, 0, 0.05);
}
.ov-pipe-swatch.is-grey {
  background: rgba(10, 10, 10, 0.03);
  border: 1px dashed rgba(10, 10, 10, 0.28);
  box-shadow: none;
}

/* ============================================================
   PHASE 2 — uniquement sur .ov-pipe-section.is-animated.visible
   À 1.8s : les barres grises s'effacent + se replient (flex-grow 0)
   À 1.8s : le cadre lui-même rétrécit à 54% (transform-origin: left)
   À 2.9s : la card .ov-pipe-accel glisse depuis la gauche
   ============================================================ */
.ov-pipe-section.is-animated .ov-pipe-frame {
  max-width: 100%;
  transform-origin: left center;
  transition: max-width 1.4s cubic-bezier(0.65, 0, 0.35, 1) 1.8s;
}
.ov-pipe-section.is-animated.visible .ov-pipe-frame {
  max-width: 54%;
}

.ov-pipe-section.is-animated.visible .ov-pipe-bar.is-grey {
  animation: ovPipeGreyOut 1.4s cubic-bezier(0.65, 0, 0.35, 1) 1.8s forwards;
}
@keyframes ovPipeGreyOut {
  0%   { opacity: 1; }
  40%  { opacity: 0; }
  100% { opacity: 0; flex-grow: 0; margin-left: 0; margin-right: 0; border-width: 0; }
}

/* Card "×5 faster" — slide-in depuis la gauche dans l'espace libéré.
   Même gris cool neutre que .ov-pipe-frame pour l'harmonie visuelle. */
.ov-pipe-accel {
  position: absolute;
  top: 28px;     /* clear le .ov-pipe-tag (~14px + margin 10px) */
  bottom: 26px;  /* clear le .ov-pipe-note (~14px + margin 10px) */
  left: calc(54% + 14px);
  right: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 14px 18px;
  background: linear-gradient(135deg, #fbfbfd 0%, #f1f3f6 100%);
  border-radius: 14px;
  box-shadow:
    0 0 0 1px rgba(15, 23, 42, 0.04),
    0 12px 28px -20px rgba(15, 23, 42, 0.16);
  opacity: 0;
  transform: translateX(-22px);
  transition:
    opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1) 2.9s,
    transform 0.8s cubic-bezier(0.16, 1, 0.3, 1) 2.9s;
  pointer-events: none;
}
.ov-pipe-section.is-animated.visible .ov-pipe-accel {
  opacity: 1;
  transform: translateX(0);
  pointer-events: auto;
}
.ov-pipe-accel-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 1.8px;
  text-transform: uppercase;
  color: rgba(10, 10, 10, 0.55);
  margin-bottom: 6px;
}
.ov-pipe-accel-eyebrow::before {
  content: '';
  width: 5px; height: 5px; border-radius: 50%;
  background: linear-gradient(90deg, #FF5A47 0%, #9533CF 100%);
}
.ov-pipe-accel-headline {
  font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
  font-size: 28px;
  font-weight: 800;
  letter-spacing: -1.2px;
  line-height: 1;
  background: linear-gradient(90deg, #FF5A47 0%, #9533CF 100%);
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
  margin-bottom: 6px;
}
.ov-pipe-accel-copy {
  font-size: 11px;
  font-weight: 500;
  color: rgba(10, 10, 10, 0.55);
  letter-spacing: -0.05px;
  line-height: 1.4;
  margin: 0;
}

/* Reduced motion : on saute les transitions et on affiche directement
   l'état FINAL (pipeline réduit, greys cachés, card visible) */
@media (prefers-reduced-motion: reduce) {
  .ov-pipe-seg,
  .ov-pipe-section.is-animated .ov-pipe-frame,
  .ov-pipe-section.is-animated .ov-pipe-bar.is-grey,
  .ov-pipe-accel {
    transition: none !important;
    animation: none !important;
    transform: none !important;
    opacity: 1 !important;
  }
  .ov-pipe-section.is-animated.visible .ov-pipe-frame { max-width: 54%; }
  .ov-pipe-section.is-animated.visible .ov-pipe-bar.is-grey {
    opacity: 0; flex-grow: 0; margin: 0; border-width: 0;
  }
}

/* ---------- Feature icons : "stroke draws itself" reveal on scroll ----------
   Les icônes outline de .features-section (page Next-Gen Pipeline) sont cachées
   au repos (le trait est entièrement "non dessiné" via stroke-dashoffset), puis
   se tracent quand la cellule entre dans le viewport. La longueur exacte de
   chaque tracé (--draw-len) et le délai séquentiel (--draw-delay) sont posés en
   JS via getTotalLength() pour un rendu naturel. */
.features-section .ft-icon svg path,
.features-section .ft-icon svg circle,
.features-section .ft-icon svg rect,
.features-section .ft-icon svg line,
.features-section .ft-icon svg polyline,
.features-section .ft-icon svg ellipse {
  stroke-dasharray: var(--draw-len, 300);
  stroke-dashoffset: var(--draw-len, 300);
}
.features-section .feature-cell.is-drawn .ft-icon svg path,
.features-section .feature-cell.is-drawn .ft-icon svg circle,
.features-section .feature-cell.is-drawn .ft-icon svg rect,
.features-section .feature-cell.is-drawn .ft-icon svg line,
.features-section .feature-cell.is-drawn .ft-icon svg polyline,
.features-section .feature-cell.is-drawn .ft-icon svg ellipse {
  stroke-dashoffset: 0;
  transition: stroke-dashoffset 0.9s cubic-bezier(0.45, 0.05, 0.25, 1);
  transition-delay: var(--draw-delay, 0s);
}
@media (prefers-reduced-motion: reduce) {
  .features-section .ft-icon svg path,
  .features-section .ft-icon svg circle,
  .features-section .ft-icon svg rect,
  .features-section .ft-icon svg line,
  .features-section .ft-icon svg polyline,
  .features-section .ft-icon svg ellipse {
    stroke-dasharray: none;
    stroke-dashoffset: 0;
    transition: none;
  }
}

/* ============================================================
   Home — 3D Furniture Studio card (injected between "A 3D workflow"
   and "One subscription" via injectFurnitureStudioCard() in JS).
   Reuses the products-3d-production hero visual (scene-app + fc
   cards + tagwraps) scoped to .ov-furn-card so it never bleeds.
   ============================================================ */
.ov-furn-card {
  display: grid !important;
  grid-template-columns: 0.88fr 1.12fr;
  align-items: center;
  gap: 56px;
  padding: 64px;
  position: relative;
  overflow: hidden;
}
.ov-furn-card .ov-furn-left { position: relative; z-index: 4; min-width: 0; }
.ov-furn-card .ov-furn-eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  background: #ffffff;
  border: 1px solid rgba(15, 23, 42, 0.08);
  border-radius: 999px;
  padding: 5px 14px 5px 5px;
  margin-bottom: 24px;
}
.ov-furn-card .ov-furn-eyebrow-icon {
  width: 28px; height: 28px; border-radius: 50%;
  background: #f1f3f8;
  display: inline-flex; align-items: center; justify-content: center;
}
.ov-furn-card .ov-furn-eyebrow-icon img { width: 14px; height: 14px; display: block; }
.ov-furn-card .ov-furn-eyebrow-text {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 13.5px; font-weight: 600; color: #201d1d;
}
.ov-furn-card h2 { margin: 0 0 20px; max-width: 14ch; }
.ov-furn-card .ov-furn-lead {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 16px; line-height: 1.6; color: #71717A;
  max-width: 52ch; margin: 0 0 32px;
}
.ov-furn-card .ov-furn-cta-row { display: flex; align-items: center; gap: 24px; flex-wrap: wrap; }

/* Right column : scene visualizer */
.ov-furn-card .ov-furn-right { position: relative; align-self: stretch; display: flex; align-items: center; justify-content: center; min-width: 0; }
.ov-furn-card .scene-stage { position: relative; width: 100%; max-width: 540px; }

/* iOS app frame */
.ov-furn-card .scene-app {
  position: relative; z-index: 2; background: #ffffff; border-radius: 28px;
  border: 1px solid rgba(15, 23, 42, 0.07); overflow: visible;
  box-shadow: 0 50px 100px -45px rgba(32, 29, 29, 0.55), 0 12px 30px -18px rgba(15, 23, 42, 0.25);
}
.ov-furn-card .scene-bar { display: flex; align-items: center; justify-content: space-between; padding: 15px 18px 12px; border-radius: 28px 28px 0 0; background: #ffffff; }
.ov-furn-card .sb-left { display: flex; align-items: center; gap: 10px; }
.ov-furn-card .sb-back { width: 30px; height: 30px; border-radius: 50%; background: #f1f3f8; display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; }
.ov-furn-card .sb-back svg { width: 16px; height: 16px; stroke: #52565e; stroke-width: 2.2; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.ov-furn-card .sb-title { display: flex; flex-direction: column; line-height: 1.2; font-family: 'Plus Jakarta Sans', sans-serif; }
.ov-furn-card .sb-title b { font-size: 15px; font-weight: 600; color: #201d1d; }
.ov-furn-card .sb-title em { font-style: normal; font-size: 11px; font-weight: 500; color: #71717A; margin-top: 2px; }
.ov-furn-card .sb-actions { display: flex; align-items: center; gap: 8px; }
.ov-furn-card .sb-pill { display: inline-flex; align-items: center; gap: 5px; font-family: 'Plus Jakarta Sans', sans-serif; font-size: 11px; font-weight: 600; color: #52565e; background: #f1f3f8; border-radius: 999px; padding: 6px 11px; }
.ov-furn-card .sb-pill svg { width: 12px; height: 12px; stroke: #52565e; stroke-width: 2; fill: none; }
.ov-furn-card .sb-dots { width: 30px; height: 30px; border-radius: 50%; background: #f1f3f8; display: inline-flex; align-items: center; justify-content: center; }
.ov-furn-card .sb-dots svg { width: 18px; height: 18px; fill: #52565e; stroke: none; }
.ov-furn-card .scene-body { position: relative; }
.ov-furn-card .scene-photo { position: relative; overflow: hidden; border-radius: 0 0 28px 28px; }
.ov-furn-card .scene-photo img { width: 100%; display: block; }

/* Glass bubbles + product card hover reveal */
.ov-furn-card .tagwrap { position: absolute; transform: translate(-50%, -50%); z-index: 3; }
.ov-furn-card .tag-bubble {
  position: relative; z-index: 2;
  display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; cursor: pointer;
  background: rgba(255, 255, 255, 0.46); -webkit-backdrop-filter: blur(11px) saturate(1.4); backdrop-filter: blur(11px) saturate(1.4);
  border: 1px solid rgba(255, 255, 255, 0.55); border-radius: 999px; padding: 5px 11px;
  font-family: 'Plus Jakarta Sans', sans-serif; font-size: 11.5px; font-weight: 600; color: #2a2626;
  box-shadow: 0 6px 16px -9px rgba(32, 29, 29, 0.4); transition: background 0.2s ease, transform 0.2s ease;
}
.ov-furn-card .tag-bubble:hover { background: rgba(255, 255, 255, 0.74); transform: translateY(-1px); }
.ov-furn-card .tag-bubble .tb-chev { width: 12px; height: 12px; stroke: rgba(28, 31, 42, 0.5); stroke-width: 2; fill: none; transition: transform 0.25s ease; }
.ov-furn-card .tagwrap.is-open .tag-bubble .tb-chev { transform: rotate(180deg); }
.ov-furn-card .tag-card {
  position: absolute; top: calc(100% + 7px); left: 50%; width: 154px; z-index: 1;
  transform: translateX(-50%) translateY(-16px);
  opacity: 0; pointer-events: none;
  transition: opacity 0.3s ease, transform 0.38s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.ov-furn-card .tagwrap.up .tag-card { top: auto; bottom: calc(100% + 7px); transform: translateX(-50%) translateY(16px); }
.ov-furn-card .tagwrap:hover, .ov-furn-card .tagwrap.is-open { z-index: 30; }
.ov-furn-card .tag-bubble:hover + .tag-card,
.ov-furn-card .tagwrap.is-open .tag-card { opacity: 1; pointer-events: auto; transform: translateX(-50%) translateY(0); }

/* Product card */
.ov-furn-card .fc { position: relative; border-radius: 16px; overflow: hidden; background: #ffffff; border: 1px solid rgba(15, 23, 42, 0.07); box-shadow: 0 18px 40px -22px rgba(32, 29, 29, 0.42); }
.ov-furn-card .fc-img { position: relative; width: 100%; aspect-ratio: 4 / 5; display: flex; align-items: center; justify-content: center; padding: 24px 10px 26px; background: #ffffff; }
.ov-furn-card .fc-img img { max-width: 100%; max-height: 100%; object-fit: contain; display: block; }
.ov-furn-card .fc-name { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; padding: 7px 13px 11px; font-family: 'Plus Jakarta Sans', sans-serif; font-size: 12.5px; font-weight: 600; color: #201d1d; background: linear-gradient(to top, #ffffff 60%, rgba(255,255,255,0)); }
.ov-furn-card .fc-bar { position: absolute; top: 0; left: 0; right: 0; z-index: 3; display: flex; align-items: center; justify-content: space-between; padding: 10px 12px 16px; background: linear-gradient(to bottom, rgba(255,255,255,0.94), rgba(255,255,255,0)); pointer-events: none; }
.ov-furn-card .fc-dots { display: inline-flex; gap: 5px; }
.ov-furn-card .fc-dots i { width: 8px; height: 8px; border-radius: 50%; display: block; }
.ov-furn-card .fc-dots i:nth-child(1) { background: rgba(255, 95, 86, 0.9); }
.ov-furn-card .fc-dots i:nth-child(2) { background: rgba(254, 188, 46, 0.9); }
.ov-furn-card .fc-dots i:nth-child(3) { background: rgba(40, 200, 64, 0.85); }
.ov-furn-card .fc-arrow svg { width: 13px; height: 13px; stroke: rgba(28, 31, 42, 0.42); stroke-width: 2; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.ov-furn-card .scene-dock {
  position: absolute; left: 50%; bottom: 16px; transform: translateX(-50%); z-index: 3;
  display: flex; gap: 22px; align-items: center;
  background: rgba(255, 255, 255, 0.72); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  border: 1px solid rgba(255, 255, 255, 0.6); border-radius: 999px; padding: 11px 20px;
  box-shadow: 0 16px 34px -14px rgba(32, 29, 29, 0.5);
}
.ov-furn-card .scene-dock svg { width: 19px; height: 19px; stroke: #52565e; stroke-width: 1.8; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.ov-furn-card .scene-dock .on svg { stroke: #b130ff; }

/* Floating pin cards */
.ov-furn-card .fc.is-pin { position: absolute; z-index: 4; width: 158px; }
.ov-furn-card .pin-sofa { right: -100px; top: 10%; }
.ov-furn-card .pin-pouf { left: -90px; top: auto; bottom: 8%; }

/* Responsive */
@media (max-width: 991px) {
  .ov-furn-card { grid-template-columns: 1fr; gap: 48px; padding: 48px 36px; }
  .ov-furn-card .ov-furn-right { padding-top: 16px; }
  .ov-furn-card .scene-stage { max-width: 480px; margin: 0 auto; }
  .ov-furn-card .fc.is-pin { display: none; }
}
@media (max-width: 640px) {
  .ov-furn-card { padding: 36px 24px; }
  .ov-furn-card h2 { font-size: 28px; line-height: 1.15; }
}

/* ============================================================
   Home — "A 3D workflow, redesigned by AI" : dark navy treatment
   with the same subtle 36px grid pattern as the Granular section.
   ============================================================ */
.home_products_card.first {
  background: #201d1d !important;
  position: relative;
  overflow: hidden;
}
.home_products_card.first::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.04) 1px, rgba(0, 0, 0, 0) 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.04) 1px, rgba(0, 0, 0, 0) 1px);
  background-size: 36px 36px, 36px 36px;
  z-index: 0;
}
.home_products_card.first > * { position: relative; z-index: 1; }
.home_products_card.first h2 { color: #f1f3f8 !important; }
.home_products_card.first .paragraph-v2 { color: rgba(255, 255, 255, 0.66) !important; }
.home_products_card.first .product-eyebrow { color: rgba(255, 255, 255, 0.7) !important; }

/* ============================================================
   Home — 3D Furniture Studio card overrides : strip the card
   chrome, sit directly on the page bg, bigger right visual,
   narrower left text column.
   ============================================================ */
.home_products_card.ov-furn-card {
  background: transparent !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  padding: 88px 64px !important;
  margin: 32px 0 !important;
}
.ov-furn-card { grid-template-columns: 0.7fr 1.3fr; gap: 56px; }
.ov-furn-card .ov-furn-left { max-width: 440px; }
.ov-furn-card h2 { max-width: 14ch; }
.ov-furn-card .ov-furn-lead { max-width: 40ch; }
.ov-furn-card .scene-stage { max-width: 640px; }
.ov-furn-card .pin-sofa { right: -80px; top: 8%; }
.ov-furn-card .pin-pouf { left: -70px; bottom: 6%; }
/* Dark-by-default liquid CTA on the transparent furniture section,
   so it stays visible against the white page background. */
.ov-furn-card .liquid-btn {
  --ov-liquid-pill-bg: #201d1d;
  --ov-liquid-pill-fg: #ffffff;
  --ov-liquid-arrow-bg: #ffffff;
  --ov-liquid-arrow-fg: #201d1d;
}

/* Tighten the text columns of the Virtual Twin + Next-Gen Pipeline
   side-by-side cards so the headings + paragraphs don't sprawl to
   the right. .max-width-xxsmall (Virtual Twin ~320) and
   .max-width-xsmall (Next-Gen ~400) both clamp to 300px.
   Desktop only — on mobile let the text flow naturally. */
@media (min-width: 992px) {
  .home_products_card.middle .home_products_card-content .max-width-xsmall,
  .home_products_card.middle .home_products_card-content .max-width-xxsmall {
    max-width: 300px !important;
  }
}

/* Pull the CTA closer to the paragraph in Virtual Twin + Next-Gen Pipeline
   cards (default Webflow gap is ~120px which feels too airy). */
.home_products_card.middle .button-group { margin-top: -64px; }
@media (max-width: 600px) {
  .home_products_card.middle .button-group { margin-top: -36px; }
}

/* ============================================================
   Home mobile pass — refine our injected / overridden sections
   for tight viewports (≤600 + ≤400). The Webflow base handles
   most stacking; here we tighten typography, spacing and the
   custom iOS visual inside .ov-furn-card so nothing overflows.
   ============================================================ */
@media (max-width: 600px) {
  /* 3D Furniture Studio card (transparent on home) */
  .home_products_card.ov-furn-card {
    padding: 56px 24px !important;
    margin: 16px 0 !important;
  }
  /* La grille desktop (0.7fr / 1.3fr) restait active sur mobile : la colonne
     de texte tombait à ~84 px de large et le titre s'étalait sur 7 lignes.
     On empile texte puis visuel. */
  .ov-furn-card {
    grid-template-columns: 1fr;
    gap: 36px;
  }
  .ov-furn-card .ov-furn-left { max-width: none; }
  .ov-furn-card h2 { font-size: 26px !important; line-height: 1.12; max-width: 100%; }
  .ov-furn-card .ov-furn-lead { font-size: 14.5px; line-height: 1.55; }
  .ov-furn-card .ov-furn-eyebrow-text { font-size: 12.5px; }
  .ov-furn-card .scene-stage { max-width: 100%; }
  .ov-furn-card .tag-bubble { font-size: 10px; padding: 4px 8px; }
  .ov-furn-card .tag-bubble .tb-chev { width: 10px; height: 10px; }
  .ov-furn-card .tag-card { width: 122px; }
  .ov-furn-card .scene-dock { gap: 14px; padding: 9px 16px; }
  .ov-furn-card .scene-dock svg { width: 16px; height: 16px; }

  /* "A 3D workflow" navy card : keep Safari schema readable */
  .home_products_card.first .ov-vcp-safari-url { font-size: 10.5px; padding: 4px 12px; min-width: 0; }
  .home_products_card.first .ov-vcp-safari-actions svg { width: 14px; height: 14px; }
  .home_products_card.first .ov-vcp-safari-body { padding: 18px 18px 16px; }
  .home_products_card.first .ov-vcp-schema .ov-pipe-tag {
    font-size: 9.5px; letter-spacing: 1.6px; margin-bottom: 9px;
  }
  .home_products_card.first .ov-vcp-schema .ov-pipe-frame {
    padding: 14px 12px 16px; border-radius: 14px;
  }
  .home_products_card.first .ov-vcp-schema .ov-pipe-bar { height: 28px; border-radius: 5px; }
  .home_products_card.first .ov-vcp-schema .ov-pipe-label { font-size: 9px; padding-bottom: 7px; }
  .home_products_card.first .ov-vcp-schema .ov-pipe-note { font-size: 9.5px; margin-top: 10px; }
  .home_products_card.first .ov-vcp-schema .ov-pipe-accel-headline { font-size: 22px; letter-spacing: -0.6px; }
  .home_products_card.first .ov-vcp-schema .ov-pipe-accel-copy { font-size: 10px; }
}
@media (max-width: 400px) {
  .home_products_card.ov-furn-card { padding: 48px 20px !important; }
  .ov-furn-card h2 { font-size: 23px !important; }
  .ov-furn-card .ov-furn-lead { font-size: 14px; }
  .ov-furn-card .tag-bubble { font-size: 9.5px; padding: 3px 7px; }
  .ov-furn-card .tag-card { width: 108px; }
  .home_products_card.first .ov-vcp-schema .ov-pipe-bar { height: 22px; }
  .home_products_card.first .ov-vcp-schema .ov-pipe-accel-headline { font-size: 19px; }
}

/* ============================================================
   Home — "A 3D workflow" : dark-theme schema (Safari + pipeline)
   sur la section noire. Le faux navigateur et les panneaux du
   pipeline sont en GRIS NEUTRE (pas en bleu, pas en noir) : ils
   doivent se détacher du fond #201d1d de la section tout en
   restant sombres. Les carrés de couleur (barres, pastilles
   macOS, dégradé du headline) gardent leurs teintes d'origine.
   ============================================================ */
.home_products_card.first .ov-vcp-safari-frame {
  background: #262626 !important;
  border-color: rgba(255, 255, 255, 0.08) !important;
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.04),
    0 28px 64px -34px rgba(0, 0, 0, 0.55) !important;
}
.home_products_card.first .ov-vcp-safari-chrome {
  background: #2f2f2f !important;
  border-bottom-color: rgba(255, 255, 255, 0.08) !important;
}
.home_products_card.first .ov-vcp-safari-url {
  background: rgba(255, 255, 255, 0.06) !important;
  color: rgba(255, 255, 255, 0.62) !important;
}
.home_products_card.first .ov-vcp-safari-url svg { color: rgba(255, 255, 255, 0.55) !important; }
.home_products_card.first .ov-vcp-safari-actions { color: rgba(255, 255, 255, 0.48) !important; }
.home_products_card.first .ov-vcp-safari-body { background: #262626 !important; }

/* Panneaux du pipeline + carte "x5 faster" : gris neutres, un cran
   plus clairs que le Safari pour rester lisibles par-dessus. */
.home_products_card.first .ov-vcp-schema .ov-pipe-frame {
  background: linear-gradient(135deg, #2c2c2c 0%, #272727 100%) !important;
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.05),
    0 18px 44px -28px rgba(0, 0, 0, 0.5) !important;
}
.home_products_card.first .ov-vcp-schema .ov-pipe-accel {
  background: linear-gradient(135deg, #2c2c2c 0%, #272727 100%) !important;
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.06),
    0 14px 32px -22px rgba(0, 0, 0, 0.45) !important;
}
.home_products_card.first .ov-vcp-schema .ov-pipe-accel-copy { color: rgba(255, 255, 255, 0.66) !important; }

/* Labels, notes, legend */
.home_products_card.first .ov-vcp-schema .ov-pipe-tag { color: rgba(255, 255, 255, 0.72) !important; }
.home_products_card.first .ov-vcp-schema .ov-pipe-note { color: rgba(255, 255, 255, 0.55) !important; }
.home_products_card.first .ov-vcp-schema .ov-pipe-swatch.is-grey {
  background: rgba(255, 255, 255, 0.04) !important;
  border-color: rgba(255, 255, 255, 0.28) !important;
}

/* Grey "overhead" placeholder bars : keep them visible against dark navy.
   We bump the alpha of each color tint and shift the dashed outline lighter
   so the "non-creative steps to remove" stay readable. */
.home_products_card.first .ov-vcp-schema .ov-pipe-bar.is-grey {
  border: 1px dashed rgba(255, 255, 255, 0.22) !important;
}
.home_products_card.first .ov-vcp-schema .ov-pipe-bar.is-grey[data-color="red"]    { background: rgba(255, 110,  70, 0.14) !important; border-color: rgba(255, 110,  70, 0.38) !important; }
.home_products_card.first .ov-vcp-schema .ov-pipe-bar.is-grey[data-color="coral"]  { background: rgba(255, 130, 110, 0.14) !important; border-color: rgba(255, 130, 110, 0.38) !important; }
.home_products_card.first .ov-vcp-schema .ov-pipe-bar.is-grey[data-color="orange"] { background: rgba(255, 160,  60, 0.15) !important; border-color: rgba(255, 160,  60, 0.38) !important; }
.home_products_card.first .ov-vcp-schema .ov-pipe-bar.is-grey[data-color="yellow"] { background: rgba(255, 200, 100, 0.16) !important; border-color: rgba(255, 200, 100, 0.40) !important; }
.home_products_card.first .ov-vcp-schema .ov-pipe-bar.is-grey[data-color="violet"] { background: rgba(180, 100, 230, 0.14) !important; border-color: rgba(180, 100, 230, 0.40) !important; }
.home_products_card.first .ov-vcp-schema .ov-pipe-bar.is-grey[data-color="purple"] { background: rgba(160,  80, 255, 0.14) !important; border-color: rgba(160,  80, 255, 0.40) !important; }
.home_products_card.first .ov-vcp-schema .ov-pipe-bar.is-grey[data-color="green"]  { background: rgba(110, 200, 120, 0.14) !important; border-color: rgba(110, 200, 120, 0.38) !important; }
.home_products_card.first .ov-vcp-schema .ov-pipe-bar.is-grey[data-color="blue"]   { background: rgba(80,  180, 255, 0.14) !important; border-color: rgba(80,  180, 255, 0.38) !important; }
.home_products_card.first .ov-vcp-schema .ov-pipe-bar.is-grey[data-color="pink"]   { background: rgba(255, 180, 215, 0.18) !important; border-color: rgba(255, 180, 215, 0.40) !important; }

/* ============================================================
   Home hero — Osmo-inspired : titre géant horizontal ("3D" bleu
   sépare en deux), sous-titre à badges gris, roue radiale qui
   tourne en place (cercle large clippé en arc), puis phrase
   centrale révélée au scroll.
   `html.ov-anim` posé inline avant le paint ; `ov-hero-go` déclenche.
   ============================================================ */
:root { --ov-hero-blue: #2f6bff; }

/* ---- Titre géant : UNE ligne, le LOGO Overnight Digital centré sur la page ---- */
.header_component h1.heading-style-h1-v2 {
  max-width: none !important;
  font-weight: 400;                             /* osmo = weight 400, pas gras */
  letter-spacing: -0.06em;                      /* serré comme la référence */
  line-height: 1.0;
  margin: 0;
  white-space: nowrap;                          /* une seule ligne sur desktop */
  font-size: clamp(2.2rem, 6.3vw, 7.6rem);      /* grand mais avec de l'air aux bords */
  /* flex : logo au centre exact de la page, moitiés équilibrées de part et d'autre */
  display: flex;
  align-items: baseline;
  justify-content: center;
}
.header_component h1 .ov-h1-side {
  flex: 1 1 0;
  min-width: 0;
  display: inline-flex;
  align-items: baseline;
  white-space: nowrap;
}
.header_component h1 .ov-h1-side--l { justify-content: flex-end; }
.header_component h1 .ov-h1-side--r { justify-content: flex-start; }
/* espace inter-mots (le flex supprime les espaces du HTML) */
.header_component h1 .ov-h1-side .ov-wm + .ov-wm { margin-left: 0.22em; }
.header_component h1 .ov-wm {
  display: inline-block;
  overflow: clip;
  vertical-align: bottom;
  padding: 0.12em 0.01em 0.16em;
  margin: -0.12em 0 -0.16em;       /* room pour montantes/descendantes */
}
.header_component h1 .ov-w { display: inline-block; will-change: transform; }
/* logo séparateur centré (à la place de l'ancien "3D") */
.header_component h1 .ov-h1-logowm {
  flex: 0 0 auto;
  align-self: center;              /* recentré verticalement par rapport aux sides */
  overflow: visible;
}
.header_component h1 .ov-w--logo {
  display: inline-flex;
  align-items: center;
  padding: 0 0.26em;               /* espace autour du logo */
}
.header_component h1 .ov-h1-logo {
  width: 0.96em; height: 0.96em; display: block;  /* gros, comme l'étoile osmo */
  transform: translateY(0.1em);    /* centre optique sur la hauteur de capitale */
}
html.ov-anim .header_component h1 .ov-w {
  transform: translateY(112%);
  transition: transform 1s cubic-bezier(0.22, 1, 0.36, 1);
  transition-delay: calc(var(--i, 0) * 80ms + 120ms);
}
html.ov-anim.ov-hero-go .header_component h1 .ov-w { transform: translateY(0); }
html.ov-anim:not(.ov-hero-go) .header_component h1 { visibility: hidden; }

/* ---- Sous-titre à badges gris (proportions osmo) ---- */
/* osmo : gros espace sous le titre (~110px), texte ~1.5% du viewport,
   badges gris #eaeaea rectangles arrondis + quelques ronds, poids normal */
.header_component .text-align-center .spacer-small { height: 56px !important; }
.header_component .text-align-center .paragraph-v2 {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: clamp(1.05rem, 1.55vw, 1.85rem);   /* suit jusqu'à ~30px @1920 (osmo) */
  line-height: 1.45;                            /* lignes serrées comme la référence */
  color: #2a2626;
  max-width: 40ch;
  margin: 0 auto;
}
.ov-hero-pill {
  display: inline-flex;
  align-items: center;
  white-space: nowrap;
  background: #f1f3f8;                 /* même gris que le badge "Powered by Chat3D" */
  border-radius: 8px;                  /* rectangle arrondi par défaut (osmo) */
  padding: 0.08em 0.5em;
  margin: 0 0.05em;
  font-weight: 400;                    /* osmo : même poids que le texte */
  color: #201d1d;
}
.ov-hero-pill.is--round { border-radius: 999px; padding: 0.08em 0.6em; }

/* badge + sous-titre : fade-up séquencé après le titre */
html.ov-anim .header_component .ov-chat3d-badge,
html.ov-anim .header_component .text-align-center .paragraph-v2 {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.8s ease, transform 0.8s cubic-bezier(0.22, 1, 0.36, 1);
}
html.ov-anim .header_component .ov-chat3d-badge { transition-delay: 80ms; }
html.ov-anim .header_component .text-align-center .paragraph-v2 { transition-delay: 700ms; }
html.ov-anim.ov-hero-go .header_component .ov-chat3d-badge,
html.ov-anim.ov-hero-go .header_component .text-align-center .paragraph-v2 {
  opacity: 1;
  transform: translateY(0);
}

/* ============================================================
   Section "arc" osmo : UNE section avec la phrase au centre-bas
   et le cercle de cards qui tourne autour. Centre du cercle placé
   bas / hors-section → seul l'ARC DU HAUT est visible ; le bas et
   les côtés sont clippés par overflow:hidden (pas de fade).
   ============================================================ */
.ov-arc {
  position: relative;
  overflow: hidden;
  background: #ffffff;
  min-height: 980px;
  margin-top: 60px;                  /* espace entre le titre et le cercle */
  /* full-bleed : casse le container pour toucher les bords de l'écran
     (le cercle d'images est ainsi clippé au bord du viewport, pas du container) */
  width: 100vw;
  margin-left: calc(50% - 50vw);
}
/* roue : occupe toute la section, clippée par le parent */
.ov-arc__wheel {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
}
/* Le disque qui tourne. Géométrie osmo : rayon 75vw, cartes larges quasi
   jointives. `top` = position du SOMMET du cercle géométrique (le centre des
   cartes passe par ce point) : haut des cartes du sommet = top - cardH/2. */
.ov-arc .ov-radial__circle {
  --D: 150vw;                       /* diamètre */
  --R: 75vw;                        /* rayon = D/2 */
  position: absolute;
  left: 50%;
  top: 200px;                       /* sommet du cercle (cartes hautes à ~60px) */
  width: var(--D);
  height: var(--D);
  margin-left: calc(var(--D) / -2);
  transform-origin: center center;
  will-change: transform;
  animation: ovRotateWheel 90s linear infinite;
}
/* entrée : fondu d'opacité UNIQUEMENT — les cartes ne bougent pas de position
   (pas de translate : elles ne doivent pas "s'éloigner" / remonter dans le titre) */
.ov-arc__wheel {
  opacity: 0;
  transition: opacity 0.9s ease 0.15s;
}
.ov-arc.ov-wheel-in .ov-arc__wheel { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
  .ov-arc .ov-radial__circle { animation: none; }
  .ov-arc__wheel { opacity: 1; transition: none; }
}

/* Chaque carte : boîte de taille FIXE dont le centre est calé exactement sur
   le centre du disque (margins négatives) → transform-origin: center center
   = centre du cercle. rotate(--a) translateY(-R) place la carte sur l'anneau,
   inclinée tangentiellement. Sans height fixe, l'origin dérivait → roue
   excentrée (le bug "tourne pas centré"). */
.ov-radial__item {
  --cardW: 360px;                   /* grand écran : cartes larges, bien espacées */
  --cardH: 303px;                   /* 9px pad + image (cardW-18)×7/10 + label ~55px */
  position: absolute;
  top: 50%;
  left: 50%;
  width: var(--cardW);
  height: var(--cardH);
  margin: calc(var(--cardH) / -2) 0 0 calc(var(--cardW) / -2);
  transform-origin: center center;
  transform: rotate(var(--a, 0deg)) translateY(calc(-1 * var(--R)));
}
/* carte sombre, specs osmo : fond #201d1d, image 8px, coins 4px, label off-white 400 */
.ov-radial__card {
  background: #201d1d;
  border-radius: 9px;
  padding: 9px 9px 0;
  box-shadow: 0 26px 54px -28px rgba(0, 0, 0, 0.6);
}
/* image plus haute (10/7) : limite le crop haut/bas des visuels 4:3 */
.ov-radial__img { aspect-ratio: 10 / 7; border-radius: 4px; overflow: hidden; background: #ffffff; }
.ov-radial__img img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* packshots Digital Twin en rotation : fondu court au switch */
.ov-radial__img .ov-dt-rotate { transition: opacity 0.28s ease; }
/* label : plus gros et padding généreux (respiration osmo), sans puce */
.ov-radial__label {
  display: flex;
  align-items: center;
  padding: 15px 8px 17px;
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 17px;
  font-weight: 400;
  color: #f4f4f4;
  white-space: nowrap;
  overflow: hidden;
}
html.ov-anim .header_component .spacer-xlarge { display: none; }

@keyframes ovRotateWheel {
  from { transform: rotate(0deg); }
  to   { transform: rotate(-360deg); }
}

/* ---- Phrase centrée dans l'ouverture de l'arc ---- */
.ov-arc__phrase {
  position: relative;
  z-index: 2;
  max-width: 1060px;                 /* large → max 4 lignes de texte */
  margin: 0 auto;
  /* offset FIXE (pas vh, instable selon la hauteur d'écran) + padding bas
     généreux pour ne pas coller la section suivante. */
  padding: 640px 32px 150px;
}
.ov-statement__text {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-weight: 400;
  font-size: clamp(1.5rem, 3.3vw, 2.7rem);   /* légèrement plus petit, max 4 lignes */
  line-height: 1.2;
  letter-spacing: -0.025em;
  color: #201d1d;
  text-align: center;
  margin: 0;
}
.ov-st-wm {
  display: inline-block;
  overflow: clip;
  vertical-align: bottom;
  padding: 0.06em 0 0.18em;
  margin-bottom: -0.12em;
}
.ov-st-w {
  display: inline-block;
  transform: translateY(112%);
  transition: transform 0.85s cubic-bezier(0.22, 1, 0.36, 1);
  transition-delay: calc(var(--i, 0) * 38ms);
  will-change: transform;
}
.ov-arc.is-in .ov-st-w { transform: translateY(0); }

/* Laptops : cartes réduites → nettement PLUS espacées sur l'anneau
   (l'espacement d'arc en vw baisse avec l'écran, les cartes doivent suivre) */
@media (max-width: 1560px) {
  .ov-radial__item { --cardW: 318px; --cardH: 274px; }
}
@media (max-width: 1280px) {
  .ov-radial__item { --cardW: 22vw; --cardH: calc(15.4vw + 52px); }
}
@media (max-width: 880px) {
  .header_component h1.heading-style-h1-v2 { font-size: clamp(2rem, 9vw, 4rem); white-space: normal; }
  .header_component .text-align-center .spacer-small { height: 36px !important; }
  .ov-arc { min-height: 780px; margin-top: 44px; }
  .ov-arc .ov-radial__circle { --D: 190vw; --R: 95vw; top: 150px; }
  .ov-radial__item { --cardW: 26vw; --cardH: calc(18.2vw + 31px); }
  .ov-radial__label { font-size: 13px; padding: 10px 6px 12px; }
  .ov-arc__phrase { padding: 470px 28px 0; max-width: 560px; }
}
@media (max-width: 480px) {
  .header_component h1.heading-style-h1-v2 { font-size: clamp(1.8rem, 11vw, 2.8rem); }
  .header_component .text-align-center .paragraph-v2 { font-size: 15px; max-width: 32ch; }
  .header_component .text-align-center .spacer-small { height: 28px !important; }
  .ov-arc { min-height: 640px; margin-top: 32px; }
  .ov-arc .ov-radial__circle { --D: 260vw; --R: 130vw; top: 120px; }
  .ov-radial__item { --cardW: 42vw; --cardH: calc(29.4vw + 27px); }
  .ov-radial__label { font-size: 12px; padding: 8px 5px 10px; }
  .ov-arc__phrase { padding: 370px 22px 0; max-width: 92%; }
  .ov-statement__text { font-size: clamp(1.4rem, 6.5vw, 1.9rem); }
}

/* ============================================================
   Badges d'accroche en tête de page — retirés : on arrive
   directement sur le titre. Scopé aux HEROS uniquement (les
   badges de section plus bas dans les pages sont conservés).
   ============================================================ */
.ov-chat3d-badge,                                  /* home : "Powered by Chat3D" */
.hero-title > .hero-inner > .ov-hero-eyebrow,      /* Virtual Twin */
.hero > .hero-inner > .ov-hero-eyebrow,            /* Next-Gen Pipeline */
.p3-hero-left > .ov-hero-eyebrow,                  /* 3D Furniture */
.demo-hero-left > .ov-hero-eyebrow {               /* Book a demo */
  display: none !important;
}