/* ===================================================================
   ENVISION IA — Design System
   Couleurs : noir / bleu foncé / blanc + accent bleu électrique
   =================================================================== */
:root {
  --black: #05060a;
  --bg: #070912;
  --bg-2: #0a0e1c;
  --navy: #0b1430;
  --navy-2: #0f1d44;
  --line: rgba(255, 255, 255, 0.08);
  --line-2: rgba(255, 255, 255, 0.14);
  --white: #ffffff;
  --gray: #9aa4bf;
  --gray-2: #c3cadd;
  --blue: #1d34c4;
  --blue-2: #3f5fe6;
  --blue-glow: rgba(29, 52, 196, 0.42);
  /* tokens sections claires */
  --l-bg: #ffffff;
  --l-txt: #0b1020;
  --l-soft: #4b5572;
  --l-card: #f6f8fd;
  --l-brd: rgba(11, 16, 32, 0.10);
  --l-brd2: rgba(11, 16, 32, 0.18);
  --radius: 18px;
  --radius-sm: 12px;
  --maxw: 1180px;
  --ease: cubic-bezier(.22,.61,.36,1);
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { overflow-x: hidden; max-width: 100%; }
html { scroll-behavior: smooth; scroll-padding-top: 90px; }
body {
  font-family: "Inter", system-ui, sans-serif;
  background: var(--bg);
  color: var(--white);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, h4 { font-family: "Sora", "Inter", sans-serif; line-height: 1.1; letter-spacing: -0.02em; }

.container { width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 0 22px; }

.grad {
  background: linear-gradient(100deg, var(--blue-2), #9db9ff 60%, #ffffff);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}

/* ===== BUTTONS ===== */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font-weight: 600; font-size: 15px; padding: 13px 22px; border-radius: 999px;
  border: 1px solid transparent; cursor: pointer; transition: all .25s var(--ease);
  white-space: nowrap;
}
.btn--lg { padding: 16px 30px; font-size: 16px; }
.btn--xs { padding: 7px 14px; font-size: 13px; }
.btn--primary {
  background: linear-gradient(180deg, var(--blue-2), var(--blue));
  color: #fff; box-shadow: 0 10px 30px -8px var(--blue-glow), inset 0 1px 0 rgba(255,255,255,.25);
}
.btn--primary:hover { transform: translateY(-2px); box-shadow: 0 16px 40px -8px var(--blue-glow); }
.btn--ghost {
  background: rgba(255,255,255,.04); color: #fff; border: 1px solid var(--line-2);
  backdrop-filter: blur(6px);
}
.btn--ghost:hover { background: rgba(255,255,255,.09); transform: translateY(-2px); }

/* ===== NAV ===== */
.nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  transition: all .3s var(--ease);
}
/* Flou progressif transparent — copie exacte de la barre TrendTrack
   (4 couches de backdrop-blur masquées en bandes, aucun fond/teinte) */
.nav__blur {
  position: absolute; top: -1px; left: 0; right: 0; height: 142px;
  pointer-events: none; z-index: -1;
}
.nav__blur > div { position: absolute; inset: 0; }
/* voile dégradé ancré tout en haut : garantit une barre frostée visible jusqu'au bord supérieur */
.nav::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 128px; pointer-events: none; z-index: -1; background: linear-gradient(to bottom, rgba(6,8,14,.55) 0%, rgba(6,8,14,.24) 46%, rgba(6,8,14,0) 100%); }
.nav--on-light::before { background: linear-gradient(to bottom, rgba(255,255,255,.7) 0%, rgba(255,255,255,.32) 46%, rgba(255,255,255,0) 100%); }
/* flou maximal dès le haut de la barre, qui se dégrade vers le bas */
.nav__blur .l1 {
  -webkit-backdrop-filter: blur(1px); backdrop-filter: blur(1px);
  -webkit-mask: linear-gradient(to bottom, #fff 0%, #fff 80%, rgba(255,255,255,0) 100%);
          mask: linear-gradient(to bottom, #fff 0%, #fff 80%, rgba(255,255,255,0) 100%);
}
.nav__blur .l2 {
  -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px);
  -webkit-mask: linear-gradient(to bottom, #fff 0%, #fff 55%, rgba(255,255,255,0) 80%);
          mask: linear-gradient(to bottom, #fff 0%, #fff 55%, rgba(255,255,255,0) 80%);
}
.nav__blur .l3 {
  -webkit-backdrop-filter: blur(5px); backdrop-filter: blur(5px);
  -webkit-mask: linear-gradient(to bottom, #fff 0%, #fff 32%, rgba(255,255,255,0) 58%);
          mask: linear-gradient(to bottom, #fff 0%, #fff 32%, rgba(255,255,255,0) 58%);
}
.nav__blur .l4 {
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  -webkit-mask: linear-gradient(to bottom, #fff 0%, #fff 14%, rgba(255,255,255,0) 38%);
          mask: linear-gradient(to bottom, #fff 0%, #fff 14%, rgba(255,255,255,0) 38%);
}
.nav__inner { display: flex; align-items: center; justify-content: space-between; height: 72px; }
.brand { display: flex; align-items: center; gap: 7px; font-family: "Instrument Sans", "Inter", sans-serif; font-weight: 600; font-size: 18px; letter-spacing: -0.01em; text-decoration: none; color: #fff; }
.brand__logo { height: 32px; width: auto; object-fit: contain; display: block; }
.brand__logo--onLight { display: none; }
.nav--on-light .brand__logo--onDark { display: none; }
.nav--on-light .brand__logo--onLight { display: block; }
.brand__accent { color: #fff; }
.nav__links { display: flex; gap: 30px; }
.nav__links a { color: #ffffff; font-size: 15px; font-weight: 500; transition: color .3s var(--ease); }
.nav__links a:hover { color: #fff; }
/* Texte de nav adaptatif : noir quand la barre passe sur une section claire (façon TrendTrack) */
.brand, .brand__accent { transition: color .3s var(--ease); }
.nav--on-light .brand,
.nav--on-light .brand__accent { color: #05060a; }
.nav--on-light .nav__links a { color: rgba(5,6,10,0.92); }
.nav--on-light .nav__links a:hover { color: #000; }
.nav--on-light .nav__burger span { background: var(--l-txt); }
.nav--on-light .btn.nav__cta {
  color: var(--l-txt);
  background: rgba(11,16,32,0.05);
  border-color: rgba(11,16,32,0.18);
}
.nav--on-light .btn.nav__cta:hover { background: rgba(11,16,32,0.09); border-color: rgba(11,16,32,0.30); }
.nav__burger { display: none; flex-direction: column; gap: 5px; background: none; border: 0; cursor: pointer; }
.nav__burger span { width: 24px; height: 2px; background: #fff; border-radius: 2px; transition: .3s; }

/* ===== HERO ===== */
.hero { position: relative; padding: 150px 0 28px; text-align: center; overflow: hidden; }

/* ===== HERO BACKGROUND — shader WebGL exact Unizen Labs, bleu ===== */
.hero__bg {
  position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 0;
  background: #000;
}

/* ===================================================================
   Fond hero — COPIE EXACTE du background TrendTrack
   Cercle pixelisé qui pulse : 3 anneaux concentriques (scale 0→1, fade),
   floutés (blur 14px), masqués par leur PNG de points (tuilé 201px),
   sous 2 fondus verticaux, + glow doux. Anneaux bleus au lieu de leur vert.
   =================================================================== */
/* = .main_hero__bg : fondu vertical externe */
.hero-bg-mask {
  position: absolute; inset: 0;
  -webkit-mask: linear-gradient(rgba(0,0,0,0) 0%, #fff 50%, rgba(0,0,0,0) 100%);
          mask: linear-gradient(rgba(0,0,0,0) 0%, #fff 50%, rgba(0,0,0,0) 100%);
}
/* = .cta_bg__wrap : fondu vertical interne + clip */
.cta_bg__wrap {
  position: absolute; inset: 0; overflow: hidden;
  isolation: isolate; backface-visibility: hidden;
  -webkit-mask: linear-gradient(rgba(0,0,0,0) 0%, #fff 15%, #fff 65%, rgba(0,0,0,0) 100%);
          mask: linear-gradient(rgba(0,0,0,0) 0%, #fff 15%, #fff 65%, rgba(0,0,0,0) 100%);
}
/* = .cta_mask__dots : masque de points (leur PNG exact, tuilé 201px) */
.cta_mask__dots {
  position: absolute; inset: 0;
  -webkit-mask-image: url('../images/tt_mask_dots.png');
          mask-image: url('../images/tt_mask_dots.png');
  -webkit-mask-size: 201px 201px; mask-size: 201px 201px;
  -webkit-mask-repeat: repeat; mask-repeat: repeat;
}
/* = .cta_circle__wrap : flou + centrage */
.cta_circle__wrap {
  position: absolute; inset: 0;
  display: flex; justify-content: center; align-items: center;
  filter: blur(12px);
}
/* = .cta_circle : anneaux concentriques (bleu au lieu de leur vert #0ced1e)
   centrés sur le titre (haut), rendus plus visibles (bleu clair). */
.cta_circle {
  position: absolute; top: 28%; left: 50%;
  width: min(1100px, 92vw); aspect-ratio: 1 / 1;
  border: clamp(4em, 10vh, 10em) solid #6f93ff;
  border-radius: 999em;
  transform: translate(-50%, -50%) scale(0);
  animation: cta-circle 9s infinite;
}
.cta_circle:nth-child(2) { animation-delay: 3s; }
.cta_circle:nth-child(3) { animation-delay: 6s; }

@keyframes cta-circle {
  0%   { transform: translate(-50%, -50%) scale(0); opacity: 1; }
  100% { transform: translate(-50%, -50%) scale(1); opacity: 0; }
}

/* ===== Badges stats (design TrendTrack, thème bleu) ===== */
.tt-tags {
  display: flex; align-items: center; justify-content: center;
  flex-wrap: wrap; gap: 16px; margin: 26px 0 8px;
}
.tt-tag {
  display: flex; align-items: center; gap: 10px;
  padding: 6px 14px 6px 12px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.10);
  background: rgba(255, 255, 255, 0.02);
  font-size: 15px; font-weight: 400; color: #fff;
  white-space: nowrap;
}
.tt-tag__icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 16px; height: 16px; color: var(--blue-2); flex: none;
}
.tt-tag__icon svg { width: 100%; height: 100%; display: block; }

/* ===== Bouton CTA nav — verre transparent (façon badges) ===== */
.btn.nav__cta {
  padding: 9px 18px; font-size: 14px; font-weight: 500;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.14);
  color: #fff;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
.btn.nav__cta:hover {
  background: rgba(255, 255, 255, 0.10);
  border-color: rgba(255, 255, 255, 0.24);
  transform: translateY(-2px);
  box-shadow: 0 8px 24px -10px rgba(0, 0, 0, 0.5);
}

/* ===== Bouton CTA glow (design TrendTrack, thème bleu) ===== */
.tt-cta-wrap { display: flex; justify-content: center; margin: 22px 0 10px; }
.tt-cta {
  display: inline-flex; align-items: center; gap: 14px;
  padding: 8px 8px 8px 22px;
  border-radius: 18px;
  font-size: 16px; font-weight: 600; letter-spacing: -0.01em; color: #fff;
  background:
    linear-gradient(0deg, rgba(1, 8, 8, 0.16) 0%, rgba(1, 8, 8, 0.16) 100%),
    linear-gradient(135deg, #5b86ff 0%, #1d34c4 100%);
  box-shadow:
    rgba(255, 255, 255, 0.16) 0 1px 0 0 inset,
    rgba(255, 255, 255, 0.44) 0 0 8px 0 inset,
    rgba(63, 95, 230, 0.20) 0 16px 32px 0,
    rgba(63, 95, 230, 0.20) 0 8px 16px 0,
    rgba(63, 95, 230, 0.20) 0 4px 8px 0,
    rgba(63, 95, 230, 0.30) 0 0 24px 0;
  transition: transform .25s var(--ease), box-shadow .25s var(--ease);
}
.tt-cta:hover {
  transform: translateY(-2px);
  box-shadow:
    rgba(255, 255, 255, 0.16) 0 1px 0 0 inset,
    rgba(255, 255, 255, 0.44) 0 0 8px 0 inset,
    rgba(63, 95, 230, 0.28) 0 20px 40px 0,
    rgba(63, 95, 230, 0.28) 0 10px 20px 0,
    rgba(63, 95, 230, 0.40) 0 0 34px 0;
}
.tt-cta__icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 32px; height: 32px; border-radius: 12px;
  background: rgba(255, 255, 255, 0.28); color: #fff; flex: none;
}
.tt-cta__icon svg { width: 16px; height: 16px; display: block; }

.hero__glow {
  position: absolute; top: -200px; left: 50%; transform: translateX(-50%);
  width: 900px; height: 700px; pointer-events: none;
  background: radial-gradient(closest-side, rgba(29,52,196,.28), rgba(29,52,196,.06) 55%, transparent 75%);
  filter: blur(20px);
}
.hero__inner { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; }
.badge {
  display: inline-flex; align-items: center; gap: 9px;
  font-family: "Inter","Sora",sans-serif; font-size: 12.5px; font-weight: 500; letter-spacing: .02em;
  color: var(--gray);
  background: rgba(255,255,255,.03);
  border: none;
  padding: 7px 14px; border-radius: 999px; margin-bottom: 26px;
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
.badge .dot { width: 6px; height: 6px; flex: none; border-radius: 50%; background: var(--blue-2); box-shadow: 0 0 8px rgba(63,95,230,.55); }
.hero__title { font-family: "Instrument Sans", "Inter", sans-serif; font-size: clamp(34px, 6vw, 68px); font-weight: 600; letter-spacing: -0.042em; line-height: 1.1; margin-bottom: 22px; }
.hero__sub { max-width: 560px; color: var(--gray); font-size: clamp(14px, 1.4vw, 16px); line-height: 1.65; margin: 0 auto 32px; }
.hero__sub strong { color: #fff; }
.hero__cta { display: flex; gap: 14px; flex-wrap: wrap; justify-content: center; margin-bottom: 26px; }
.hero__trust { display: flex; align-items: center; gap: 10px; color: var(--gray); font-size: 14px; margin-bottom: 56px; }
.stars { color: #ffc94d; letter-spacing: 2px; }

/* VIDEO */
.hero__video { width: 100%; max-width: 940px; margin-top: 40px; }
.video-frame {
  position: relative; aspect-ratio: 16/9; width: 100%;
  border-radius: var(--radius); overflow: hidden;
  border: 1px solid var(--line-2);
  background: linear-gradient(160deg, var(--navy), var(--bg-2));
  box-shadow: 0 40px 90px -30px rgba(0,0,0,.8), 0 0 0 1px rgba(29,52,196,.1);
}
.video-frame iframe, .video-frame video { width: 100%; height: 100%; border: 0; display: block; }
.video-placeholder {
  position: absolute; inset: 0; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 14px; color: var(--gray-2);
}
.video-play {
  width: 76px; height: 76px; border-radius: 50%; border: 0; cursor: pointer;
  background: linear-gradient(180deg, var(--blue-2), var(--blue)); color: #fff;
  display: grid; place-items: center; box-shadow: 0 14px 40px -8px var(--blue-glow);
  transition: transform .25s var(--ease);
}
.video-play:hover { transform: scale(1.08); }
.video-placeholder p { font-weight: 600; color: #fff; }
.video-hint { font-size: 13px; color: var(--gray); }

/* ===== MARQUEE TRUST ===== */
.marquee-trust { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: 18px 0; background: var(--bg-2); }
.marquee { overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); }
.marquee__track { display: flex; gap: 26px; align-items: center; white-space: nowrap; animation: marquee 28s linear infinite; }
.marquee__track span { color: var(--gray-2); font-weight: 500; font-size: 15px; }
.marquee__track span:nth-child(even) { color: var(--blue-2); }
@keyframes marquee { to { transform: translateX(-50%); } }

/* ===== Endorsements (bande défilante sous la vidéo) ===== */
.endorse { margin-top: 56px; position: relative; z-index: 2; }
.endorse__head { text-align: center; margin-bottom: 28px; }
.endorse__eyebrow {
  display: inline-block; font-size: 13px; letter-spacing: .12em; text-transform: uppercase;
  color: var(--gray); margin-bottom: 12px;
}
.endorse__title {
  font-family: "Sora","Inter",sans-serif; font-weight: 600; letter-spacing: -.02em;
  font-size: clamp(24px, 3.2vw, 38px); line-height: 1.18;
  max-width: 760px; margin: 0 auto;
}
/* Effet scroll-fill : chaque mot passe de gris à blanc au fil du défilement */
.endorse__title .ew { color: rgba(255, 255, 255, 0.20); transition: color .25s linear; }
.endorse__title .ew.lit { color: #fff; }
/* "pionniers" se remplit en bleu dégradé (au lieu de blanc) au scroll */
.endorse__title .ew--accent.lit {
  background: linear-gradient(100deg, var(--blue-2), #9db9ff 60%, #ffffff);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}
.endorse__track { gap: 22px; align-items: stretch; }
/* Cartes verticales : grande photo en haut, prénom + réalisation en dessous */
.endorse__card {
  flex: none; width: 165px;
  display: flex; flex-direction: column; align-items: center; text-align: center;
  padding: 12px 10px 16px; border-radius: 20px;
  background: rgba(255, 255, 255, 0.035);
  border: 1px solid var(--line-2);
  transition: border-color .3s var(--ease), box-shadow .3s var(--ease);
}
.endorse__card:hover {
  border-color: rgba(140, 165, 255, 0.5);
  box-shadow: 0 22px 55px -22px rgba(90, 120, 250, 0.55);
}
/* cachées tant que la bande n'est pas révélée (armée par JS) */
.endorse.is-armed .endorse__card { opacity: 0; }
/* entrée en cascade au scroll, puis flottement continu */
.endorse.endorse--in .endorse__card {
  animation: endorseIn .6s var(--ease) both, endorseFloat 5.5s ease-in-out infinite;
}
.endorse.endorse--in .endorse__card:nth-child(1){ animation-delay: 0s, .6s; }
.endorse.endorse--in .endorse__card:nth-child(2){ animation-delay: .09s, .69s; }
.endorse.endorse--in .endorse__card:nth-child(3){ animation-delay: .18s, .78s; }
.endorse.endorse--in .endorse__card:nth-child(4){ animation-delay: .27s, .87s; }
.endorse.endorse--in .endorse__card:nth-child(5){ animation-delay: .36s, .96s; }
.endorse.endorse--in .endorse__card:nth-child(6){ animation-delay: .45s, 1.05s; }
.endorse.endorse--in .endorse__card:nth-child(7){ animation-delay: .54s, 1.14s; }
.endorse.endorse--in .endorse__card:nth-child(8){ animation-delay: .63s, 1.23s; }
@keyframes endorseIn {
  from { opacity: 0; transform: translateY(48px) scale(.9); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
@media (prefers-reduced-motion: reduce) {
  .endorse.is-armed .endorse__card { opacity: 1; }
  .endorse.endorse--in .endorse__card { animation: none; }
}
.endorse__photo {
  width: 100%; aspect-ratio: 1 / 1; border-radius: 16px; overflow: hidden;
  margin-bottom: 12px; background: var(--navy);
  transition: transform .35s var(--ease);
}
.endorse__card:hover .endorse__photo { transform: scale(1.05); }
.endorse__photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.endorse__name { font-family: "Sora","Inter",sans-serif; font-size: 15px; font-weight: 700; color: #fff; }
.endorse__sub {
  font-size: 12.5px; font-weight: 500; color: rgba(255, 255, 255, 0.86);
  margin-top: 6px; line-height: 1.35; letter-spacing: 0.01em;
}
/* une seule rangée, centrée */
.endorse__grid {
  display: flex; flex-wrap: nowrap; justify-content: center; gap: 14px;
  max-width: 1412px; margin: 0 auto;
  position: relative; z-index: 1; padding: 14px 4px;
}
.endorse__more {
  text-align: center; margin-top: 16px; font-size: 16px; color: var(--gray-2);
  position: relative; z-index: 1;
}
.endorse__card--dup { display: none; }
@media (max-width: 1080px) { .endorse__grid { flex-wrap: wrap; justify-content: center; } }
/* Mobile : bande fine qui défile (une seule ligne, marquee) au lieu d'empiler */
@media (max-width: 560px) {
  .endorse { overflow: hidden; }
  .endorse__grid {
    flex-wrap: nowrap; justify-content: flex-start;
    width: max-content; max-width: none; margin: 0;
    gap: 10px; padding: 6px 0;
    animation: marquee-cards 26s linear infinite;
  }
  .endorse__card--dup { display: flex; }
  .endorse__card { width: 116px; padding: 9px 8px 11px; animation: none !important; opacity: 1 !important; transform: none !important; }
  .endorse__photo { width: 74px; height: 74px; aspect-ratio: auto; margin: 0 auto 7px; }
  .endorse__name { font-size: 12.5px; }
  .endorse__sub { font-size: 9.5px; margin-top: 3px; line-height: 1.3; }
  .endorse__more { margin-top: 12px; }
}
/* flottement doux décalé + effet au survol */
@keyframes endorseFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }

/* ===== SECTION SHARED ===== */
section { position: relative; }
.section-head { max-width: 720px; margin: 0 auto 54px; text-align: center; }
.eyebrow {
  display: inline-block; font-size: 13px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase;
  color: var(--blue-2); margin-bottom: 14px;
}
/* dispositions alternatives du sur-titre — mêmes couleurs, formes différentes */
.section-head--flank .eyebrow { display: inline-flex; align-items: center; gap: 14px; }
.section-head--flank .eyebrow::before,
.section-head--flank .eyebrow::after { content: ""; width: 26px; height: 1px; background: currentColor; opacity: .45; }
.section-head--chip .eyebrow {
  padding: 7px 16px; border-radius: 999px; margin-bottom: 18px;
  background: rgba(63, 95, 230, .12); border: 1px solid rgba(63, 95, 230, .28);
}
.section-head h2, .story h2, .interface h2 { font-size: clamp(28px, 4.5vw, 46px); font-weight: 800; margin-bottom: 16px; }
.section-sub { color: var(--gray-2); font-size: 17px; }

/* ===== STORY ===== */
.story { padding: 56px 0 100px; background: #000; }
/* ===== Le Diptyque : split-screen cinéma piloté au scroll ===== */
.dpt { position: relative; width: 100%; min-height: clamp(640px, 92vh, 940px); overflow: hidden; background: #000; }
.dpt__stage { position: absolute; inset: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 0; }
.dpt__half { position: relative; overflow: hidden; will-change: transform, filter; }
.dpt__half img { width: 100%; height: 100%; object-fit: cover; display: block; }
.dpt__half--l img { object-position: 50% 18%; }
.dpt__half--r img { object-position: 50% 20%; }
.dpt__half.photo-empty { background: repeating-linear-gradient(45deg, rgba(255,255,255,.02), rgba(255,255,255,.02) 12px, rgba(255,255,255,.04) 12px, rgba(255,255,255,.04) 24px); }
.dpt__veil { position: absolute; inset: 0; pointer-events: none; }
.dpt__half--l .dpt__veil { background: radial-gradient(120% 100% at 100% 35%, rgba(7,9,18,.3), rgba(0,0,0,.92) 78%); }
.dpt__half--r .dpt__veil { background: radial-gradient(120% 100% at 0% 35%, rgba(7,9,18,.3), rgba(0,0,0,.92) 78%); }
.dpt__tag { position: absolute; left: 20px; bottom: 20px; font: 600 12px/1 "Inter", sans-serif; letter-spacing: .04em; padding: 7px 13px; border-radius: 999px; color: var(--gray-2); background: rgba(8,12,24,.55); border: 1px solid rgba(140,165,255,.28); backdrop-filter: blur(6px); opacity: .3; transition: opacity .4s var(--ease), box-shadow .4s var(--ease); }
.dpt__half--r .dpt__tag { left: auto; right: 20px; }
.dpt__glow { position: absolute; inset: 0; pointer-events: none; opacity: 0; background: radial-gradient(54% 80% at 50% 48%, rgba(63,95,230,.5), transparent 72%); will-change: opacity; }
.dpt__seam { position: absolute; top: 0; bottom: 0; left: 50%; width: 3px; transform: translateX(-50%); pointer-events: none; border-radius: 4px; opacity: 0; background: linear-gradient(180deg, transparent, #9db9ff 30%, #ffffff 50%, #9db9ff 70%, transparent); filter: blur(1.5px); will-change: opacity, box-shadow; }
.dpt__type { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 0 24px; pointer-events: none; }
.dpt__type a, .dpt__type strong { pointer-events: auto; }
.dpt__name { position: absolute; top: clamp(70px, 12vh, 132px); left: 0; right: 0; z-index: 3; display: flex; align-items: center; justify-content: center; gap: .14em; margin: 0; padding-top: .1em; font-family: "Sora","Inter",sans-serif; font-weight: 800; font-size: clamp(40px, 9vw, 128px); line-height: 1; letter-spacing: -.03em; white-space: nowrap; text-shadow: 0 2px 34px rgba(0,0,0,.6); }
.dpt__name-l, .dpt__name-r { background: linear-gradient(180deg, #fff 0%, #9db9ff 38%, var(--blue-2) 78%, var(--blue) 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; will-change: transform; }
.dpt__amp { font-family: "Sora","Inter",sans-serif; font-style: normal; font-weight: 500; font-size: .72em; color: var(--blue-2); }
.dpt__faille { max-width: 580px; margin-top: 16px; }
.dpt__qmark { display: block; font-family: "Fraunces","Georgia",serif; font-size: 56px; line-height: .5; margin: 0; background: linear-gradient(180deg, #cdd9ff, var(--blue-2)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; }
.dpt__quote { font-family: "Fraunces","Georgia",serif; font-weight: 400; font-size: clamp(18px, 1.9vw, 25px); line-height: 1.5; color: #d8deec; text-shadow: 0 1px 16px rgba(0,0,0,.8); opacity: 0; transform: translateY(24px); will-change: opacity, transform; margin: 6px auto 0; }
.dpt__quote strong { color: #fff; font-weight: 600; }
.dpt__sign { opacity: 0; will-change: opacity; margin-top: 20px; }
.dpt__sign .fdx__sign-name { font-family: "Dancing Script","Segoe Script",cursive; font-weight: 700; font-size: clamp(34px, 4.6vw, 52px); color: #fff; }
.dpt__sign .fdx__sign-name::after { display: none; }
.dpt__sign .fdx__sign-role { display: block; font: 600 12px/1 "Sora", sans-serif; text-transform: uppercase; letter-spacing: .2em; color: var(--gray); margin-top: 8px; }
.dpt__cta { opacity: 0; margin-top: 20px; transition: opacity .4s var(--ease); }
.dpt__half:hover img { transform: scale(1.03); transition: transform .6s var(--ease); }
.dpt__cta:hover { box-shadow: 0 16px 40px -8px var(--blue-glow); }
@media (max-width: 940px) {
  .dpt { min-height: auto; }
  .dpt__stage { position: relative; grid-template-columns: 1fr; grid-auto-rows: 1fr; }
  .dpt__half { aspect-ratio: 4 / 5; }
  .dpt__seam { left: 0; right: 0; top: 50%; bottom: auto; width: auto; height: 3px; transform: translateY(-50%); background: linear-gradient(90deg, transparent, var(--blue-2), var(--blue), var(--blue-2), transparent); }
  .dpt__type { position: relative; padding: 40px 24px 60px; }
  .dpt__name { flex-direction: column; gap: 0; font-size: clamp(40px, 14vw, 80px); }
  .dpt__faille { margin-top: 26px; }
}
@media (max-width: 560px) {
  .dpt__name { font-size: clamp(34px, 12vw, 60px); }
  .dpt__quote { font-size: 18px; }
  .dpt__tag { font-size: 11px; padding: 6px 11px; }
}
html.no-js .dpt .dpt__quote, html.no-js .dpt .dpt__sign, html.no-js .dpt .dpt__cta, html.no-js .dpt .dpt__tag { opacity: 1; }
html.no-js .dpt .dpt__quote { transform: none; }
html.no-js .dpt .dpt__veil { opacity: .22; }
html.no-js .dpt .dpt__half { filter: none; }
.story__inner {
  display: flex; flex-direction: column; align-items: center; gap: 36px;
  text-align: center;
}
.story__head { max-width: 820px; }
/* Maxence à gauche, Ismaël à droite — deux cartes côte à côte, taille modérée */
.story__media {
  display: grid; grid-template-columns: 1fr 1fr; gap: 20px;
  width: 100%; max-width: 760px; align-items: stretch; margin: 0;
}
.story__content { max-width: 680px; }
.story__content .btn { margin-top: 10px; }
.story__photo {
  position: relative; width: 100%; aspect-ratio: 1 / 1;
  border-radius: var(--radius); overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.10); background: #000;
  box-shadow: 0 24px 55px -28px rgba(0,0,0,.7);
  transition: transform .4s var(--ease), box-shadow .4s var(--ease), border-color .4s var(--ease);
}
.story__photo img { width: 100%; height: 100%; object-fit: cover; object-position: center 28%; transition: transform .6s var(--ease); }
.story__photo:hover { transform: translateY(-6px); border-color: rgba(140, 165, 255, 0.5); box-shadow: 0 36px 72px -30px rgba(45, 75, 210, 0.5); }
.story__photo:hover img { transform: scale(1.06); }
/* zoom sur Maxence pour que sa tête soit à la même échelle qu'Ismaël */
.story__photo--main img { transform: scale(1.33) translateY(-12%); transform-origin: 50% 30%; }
/* hover : même zoom relatif (~+6%) que l'autre photo, en gardant le cadrage de Maxence */
.story__photo--main:hover img { transform: scale(1.41) translateY(-12%); }
.story__photo--main, .story__photo--sm { width: 100%; }
.story__photo.photo-empty::after {
  content: "Photo"; position: absolute; inset: 0; display: grid; place-items: center;
  color: var(--gray); font-size: 14px;
  background: repeating-linear-gradient(45deg, rgba(255,255,255,.02), rgba(255,255,255,.02) 12px, rgba(255,255,255,.04) 12px, rgba(255,255,255,.04) 24px);
}
.photo-tag {
  position: absolute; left: 12px; bottom: 12px; z-index: 4;
  font-size: 12px; font-weight: 600; color: #fff; padding: 4px 10px;
  background: rgba(5,6,10,.55); border: 1px solid var(--line-2); border-radius: 999px; backdrop-filter: blur(6px);
}
/* Pill "Experts IA" sous les photos (remplace l'ancien badge) */
.story__chip {
  display: inline-flex; align-items: center; gap: 8px;
  margin: 0 auto 26px; padding: 8px 16px; border-radius: 999px;
  font-size: 13.5px; font-weight: 600; letter-spacing: .01em;
  color: var(--blue-2); background: rgba(63, 95, 230, .12);
  border: 1px solid rgba(63, 95, 230, .30);
}
.story__chip svg { color: var(--blue-2); flex: none; }
/* Accroche + bandeau "preuve" (passion IA / 2 ans) sous les photos */
.story__lead {
  font-family: "Sora","Inter",sans-serif; font-weight: 500;
  font-size: clamp(17px, 1.7vw, 20px); line-height: 1.6; letter-spacing: -.01em;
  color: var(--gray-2); margin: 0 auto 30px; max-width: 620px;
}
.story__lead strong { color: #fff; font-weight: 700; }
.story__proof {
  display: flex; justify-content: center; flex-wrap: wrap; gap: 14px;
  margin: 0 auto 32px;
}
.story__proof-item {
  display: flex; flex-direction: column; align-items: center; text-align: center;
  padding: 16px 22px; border-radius: 16px; min-width: 168px;
  background: rgba(255,255,255,.03); border: 1px solid var(--line-2);
}
.story__proof-item strong {
  font-family: "Sora","Inter",sans-serif; font-weight: 800; font-size: 21px;
  color: #fff; line-height: 1;
}
.story__proof-item span { font-size: 12.5px; color: var(--gray); margin-top: 7px; max-width: 150px; }
/* bouton glow identique au hero, légèrement plus compact */
.tt-cta--sm { padding: 7px 7px 7px 20px; font-size: 15px; border-radius: 16px; }
.tt-cta--sm .tt-cta__icon { width: 28px; height: 28px; }

/* ===== Section fondateurs — inspirée Agero (gros titre fondu + bio + timeline) ===== */
.fdx { max-width: 1320px; }
.fdx__head { text-align: center; }
.fdx__eyebrow {
  display: inline-block;
  font-family: "Sora","Inter",sans-serif; font-size: 13px; font-weight: 600;
  letter-spacing: .26em; text-transform: uppercase; color: rgba(255, 255, 255, 0.7);
  margin-bottom: 16px;
}
.fdx .fdx__bigtitle {
  font-family: "Sora","Inter",sans-serif; font-weight: 800; letter-spacing: -.03em;
  font-size: clamp(32px, 5.6vw, 64px); line-height: 1.12; text-align: center;
  color: #fff; max-width: 18ch; margin: 0 auto 12px;
}
.fdx__bigtitle .fdx__grad {
  background: linear-gradient(180deg, #ffffff 0%, #9db9ff 46%, var(--blue-2) 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}
.fdx__subtitle {
  font-family: "Sora","Inter",sans-serif; font-size: clamp(15px, 1.7vw, 19px); font-weight: 600;
  color: #9db9ff; letter-spacing: .01em; margin: 0;
}
/* photos côte à côte : Maxence à gauche, Ismaël à droite */
.fdx__photos2 {
  display: grid; grid-template-columns: 1fr 1fr; gap: 24px;
  max-width: 720px; margin: 20px auto 0; align-items: start;
}
.fdx__photos2 .story__photo { width: 100%; aspect-ratio: 4 / 5; border-radius: 22px; box-shadow: 0 32px 72px -34px rgba(0,0,0,.85), 0 0 0 1px rgba(140,165,255,.18), 0 0 72px -24px rgba(63,95,230,.5); }
.fdx__photos2 .story__photo img { object-position: center 20%; }
.fdx__photos2 .story__photo--main img { transform: scale(1.16) translateY(-6%); }
.fdx__photos2 .story__photo--main:hover img { transform: scale(1.23) translateY(-6%); }
.fdx__photos2 .story__photo:nth-child(2) { margin-top: 34px; }
/* texte sous les photos, centré */
.fdx__below { max-width: 860px; margin: 44px auto 0; text-align: center; }
/* trio : Maxence (gauche) | texte (centre) | Ismaël (droite) */
.fdx__trio { display: grid; grid-template-columns: 1.1fr 1fr 1.1fr; gap: clamp(24px, 3vw, 48px); align-items: center; max-width: 1240px; margin: 30px auto 0; }
.fdx__pic { width: 100%; border-radius: 22px; box-shadow: 0 32px 72px -34px rgba(0,0,0,.85), 0 0 0 1px rgba(140,165,255,.16), 0 0 70px -26px rgba(63,95,230,.45); }
.fdx__center { text-align: center; padding: 8px 4px; }
.fdx__center .fdx__qmark { font-size: 64px; margin-bottom: -8px; }
.fdx__center .fdx__quote { font-size: clamp(16px, 1.4vw, 19px); line-height: 1.55; margin: 0 auto 22px; max-width: none; }
.fdx__center .fdx__sign-name { font-size: clamp(28px, 2.7vw, 38px); white-space: nowrap; }
/* animation : photos qui glissent depuis les côtés */
.fdx__pic { transition: transform .4s var(--ease), box-shadow .4s var(--ease); }
.fdx__pic:hover { transform: translateY(-7px); box-shadow: 0 42px 84px -34px rgba(0,0,0,.9), 0 0 0 1px rgba(140,165,255,.32), 0 0 100px -22px rgba(63,95,230,.6); }
@media (max-width: 860px) {
  .fdx__trio { grid-template-columns: 1fr; max-width: 440px; gap: 26px; }
}
/* texte explicatif : serif éditorial (Fraunces) */
.fdx__quote {
  font-family: "Fraunces","Georgia",serif; font-weight: 400; font-optical-sizing: auto;
  font-size: clamp(18px, 1.9vw, 21px); line-height: 1.5; letter-spacing: 0;
  color: #d8deec; max-width: 720px; margin: 0 auto 28px;
  text-wrap: balance;
}
.fdx__quote strong { color: #fff; font-weight: 600; }
.fdx__qmark { display: block; text-align: center; font-family: "Fraunces","Georgia",serif; font-weight: 600; font-size: 84px; line-height: .9; margin: 0 0 -10px; background: linear-gradient(180deg, #cdd9ff, var(--blue-2)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; }
.fdx__sign { display: flex; flex-direction: column; align-items: center; gap: 5px; margin-bottom: 28px; }
.fdx__sign-name { position: relative; font-family: "Dancing Script","Segoe Script",cursive; font-weight: 700; font-size: clamp(38px, 4.6vw, 54px); line-height: 1; color: #fff; }
.fdx__sign-name::after { content: ""; display: block; width: 64%; height: 2px; margin: 4px auto 0; background: linear-gradient(90deg, transparent, var(--blue-2), transparent); border-radius: 2px; }
.fdx__sign-role { font-size: 12px; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; color: var(--gray); }
/* signature : nom + rôle */
.fdx__byline {
  display: flex; align-items: center; justify-content: center; gap: 14px;
  flex-wrap: wrap; margin-bottom: 30px;
}
.fdx__byname { font-family: "Sora","Inter",sans-serif; font-weight: 700; font-size: 16px; color: #fff; }
.fdx__byrole { position: relative; padding-left: 15px; font-size: 14px; color: var(--gray); }
.fdx__byrole::before {
  content: ""; position: absolute; left: 0; top: 50%; transform: translateY(-50%);
  width: 1px; height: 14px; background: var(--line-2);
}
/* stats : gros chiffre + libellé, séparées par un trait au-dessus */
.fdx__stats {
  display: flex; justify-content: center; flex-wrap: wrap; gap: 18px 44px;
  max-width: 760px; margin: 0 auto 32px; padding-top: 28px;
  border-top: 1px solid var(--line);
}
.fdx__stat { display: flex; align-items: center; gap: 13px; text-align: left; }
.fdx__stat-k {
  font-family: "Sora","Inter",sans-serif; font-weight: 800; font-size: 30px;
  line-height: 1; letter-spacing: -.02em; white-space: nowrap;
  background: linear-gradient(180deg, #ffffff 0%, #9db9ff 78%, var(--blue-2) 120%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}
.fdx__stat-v { font-size: 13px; color: var(--gray-2); line-height: 1.3; max-width: 160px; }
.fdx__cta { margin-top: 4px; }
@media (max-width: 720px) {
  .fdx__photos2 { grid-template-columns: 1fr; max-width: 420px; }
  .fdx__photos2 .story__photo:nth-child(2) { margin-top: 0; }
  .fdx__bigtitle { white-space: normal; }
  .fdx__stats { gap: 22px; flex-direction: column; align-items: center; }
  .fdx__stat { width: 240px; }
}
.story__content p { color: var(--gray-2); margin-bottom: 18px; font-size: 16.5px; line-height: 1.75; }
.story__content p strong { color: #fff; }
/* liste centrée en bloc, items alignés à gauche */
.story__points { list-style: none; margin: 26px auto 30px; display: grid; gap: 14px; width: fit-content; text-align: left; }
.story__points li { display: flex; align-items: center; gap: 12px; color: var(--gray-2); }
.check { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: rgba(29,52,196,.16); color: var(--blue-2); font-size: 13px; font-weight: 700; flex-shrink: 0; }

/* ===== SOLUTION / BENEFITS ===== */
.solution { padding: 100px 0; }
.benefits { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.benefit {
  background: linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.01));
  border: 1px solid var(--line); border-radius: var(--radius); padding: 30px 24px; text-align: center;
}
.benefit__num { font-family: "Sora"; font-size: 44px; font-weight: 800; margin-bottom: 8px; background: linear-gradient(180deg,#fff,var(--blue-2)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.benefit p { color: var(--gray-2); font-size: 14.5px; }

/* ===== AGENTS / CARDS ===== */
.agents { padding: 100px 0; background: linear-gradient(180deg, var(--bg-2), var(--bg)); }
.cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.card {
  background: linear-gradient(180deg, rgba(255,255,255,.045), rgba(255,255,255,.012));
  border: 1px solid var(--line); border-radius: var(--radius); padding: 30px;
  transition: transform .3s var(--ease), border-color .3s, box-shadow .3s;
}
.card:hover { transform: translateY(-6px); border-color: rgba(29,52,196,.4); box-shadow: 0 30px 60px -25px rgba(29,52,196,.4); }
.card__icon { font-size: 30px; width: 58px; height: 58px; display: grid; place-items: center; border-radius: 14px; background: rgba(29,52,196,.12); border: 1px solid var(--line-2); margin-bottom: 18px; }
.card h3 { font-size: 20px; margin-bottom: 10px; }
.card p { color: var(--gray-2); font-size: 15px; }

/* ===== INTERFACE / DASHBOARD ===== */
.interface { padding: 100px 0; }
.interface__inner { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; }
.feature-list { list-style: none; display: grid; gap: 18px; margin-top: 26px; }
.feature-list li { padding-left: 18px; border-left: 2px solid rgba(29,52,196,.5); }
.feature-list strong { display: block; font-size: 16px; margin-bottom: 3px; }
.feature-list span { color: var(--gray-2); font-size: 14.5px; }
.dash {
  background: linear-gradient(160deg, var(--navy-2), var(--bg-2));
  border: 1px solid var(--line-2); border-radius: var(--radius); padding: 22px;
  box-shadow: 0 40px 90px -30px rgba(0,0,0,.8);
}
.dash__row--head { display: flex; justify-content: space-between; align-items: center; font-weight: 600; margin-bottom: 18px; }
.dash__live { font-size: 12px; color: #4ade80; }
.dash__grid { display: grid; grid-template-columns: repeat(2,1fr); gap: 12px; margin-bottom: 20px; }
.dash__kpi { background: rgba(255,255,255,.04); border: 1px solid var(--line); border-radius: 12px; padding: 14px 16px; }
.dash__val { display: block; font-family: "Sora"; font-size: 26px; font-weight: 800; color: #fff; }
.dash__lbl { font-size: 12.5px; color: var(--gray); }
.dash__bars { display: flex; align-items: flex-end; gap: 14px; height: 130px; padding-top: 8px; }
.bar { flex: 1; height: var(--h); background: linear-gradient(180deg, var(--blue-2), var(--blue)); border-radius: 8px 8px 0 0; position: relative; min-height: 24px; opacity: .9; }
.bar span { position: absolute; bottom: -22px; left: 0; right: 0; text-align: center; font-size: 11px; color: var(--gray); }

/* ===== BOOKING ===== */
.booking { padding: 100px 0; background: linear-gradient(180deg, var(--bg), var(--navy) 120%); position: relative; z-index: 1; }
.booking__card { max-width: 720px; margin: 0 auto; background: linear-gradient(180deg, rgba(255,255,255,.045), rgba(255,255,255,.012)); border: 1px solid var(--line-2); border-radius: var(--radius); padding: 48px 40px; text-align: center; box-shadow: 0 40px 90px -30px rgba(0,0,0,.7); }
.booking__card h3 { font-size: clamp(22px, 2.4vw, 28px); margin-bottom: 12px; }
.booking__card p { color: var(--gray-2); margin: 0 auto 26px; max-width: 480px; line-height: 1.6; }
/* fenêtre (modal) du calendrier */
.bkmodal { position: fixed; inset: 0; z-index: 2000; display: flex; align-items: center; justify-content: center; padding: 20px; opacity: 0; visibility: hidden; transition: opacity .3s var(--ease); }
.bkmodal.open { opacity: 1; visibility: visible; }
.bkmodal__backdrop { position: absolute; inset: 0; background: rgba(5, 8, 20, .72); }
.bkmodal__panel { position: relative; width: 100%; max-width: 620px; max-height: 92vh; overflow-y: auto; background: #fff; border-radius: 20px; box-shadow: 0 40px 120px -20px rgba(0,0,0,.6); }
.bkmodal__close { position: absolute; top: 12px; right: 12px; z-index: 3; width: 38px; height: 38px; border-radius: 50%; border: none; background: rgba(10,20,48,.08); color: #0b1430; font-size: 15px; cursor: pointer; transition: background .2s; }
.bkmodal__close:hover { background: rgba(10,20,48,.18); }
.bkmodal .iclosed-widget { display: block; line-height: 0; }
.bkmodal .iclosed-widget iframe { display: block; width: 100%; border: 0; border-radius: 20px; }
/* ===== Widget chatbot flottant ===== */
.chatw { position: fixed; right: 22px; bottom: 22px; z-index: 1200; font-family: "Inter", sans-serif; }
.chatw__fab { position: relative; width: 62px; height: 62px; border: none; border-radius: 50%; background: linear-gradient(180deg, var(--blue-2), var(--blue)); color: #fff; cursor: pointer; display: grid; place-items: center; box-shadow: 0 14px 34px -8px var(--blue-glow), inset 0 1px 0 rgba(255,255,255,.28); transition: transform .25s var(--ease), box-shadow .25s; }
.chatw__fab:hover { transform: translateY(-3px) scale(1.05); box-shadow: 0 22px 48px -8px var(--blue-glow), inset 0 1px 0 rgba(255,255,255,.28); }
.chatw__fab::before { content: ""; position: absolute; inset: 0; border-radius: 50%; box-shadow: 0 0 0 0 rgba(63,95,230,.5); animation: chatpulse 2.4s var(--ease) infinite; }
.chatw.is-open .chatw__fab::before { animation: none; }
@keyframes chatpulse { 0% { box-shadow: 0 0 0 0 rgba(63,95,230,.5); } 70% { box-shadow: 0 0 0 16px rgba(63,95,230,0); } 100% { box-shadow: 0 0 0 0 rgba(63,95,230,0); } }
.chatw__fab svg { width: 27px; height: 27px; grid-area: 1 / 1; transition: opacity .2s, transform .25s var(--ease); }
.chatw__fab-x { opacity: 0; transform: rotate(-90deg) scale(.6); }
.chatw.is-open .chatw__fab-chat { opacity: 0; transform: rotate(90deg) scale(.6); }
.chatw.is-open .chatw__fab-x { opacity: 1; transform: none; }
.chatw__fab-dot { position: absolute; top: 5px; right: 5px; z-index: 1; width: 13px; height: 13px; border-radius: 50%; background: #ff5a3c; border: 2.5px solid var(--blue-2); }
.chatw.is-open .chatw__fab-dot { display: none; }
.chatw__teaser { position: absolute; right: 6px; bottom: 80px; width: max-content; max-width: 232px; text-align: left; background: #fff; color: var(--l-txt); font-size: 13.5px; font-weight: 600; line-height: 1.35; padding: 12px 32px 12px 15px; border-radius: 16px; border: 1px solid var(--l-brd); box-shadow: 0 18px 42px -16px rgba(10,20,48,.42); cursor: pointer; opacity: 0; transform: translateY(8px) scale(.96); transform-origin: bottom right; transition: opacity .3s var(--ease), transform .3s var(--ease); pointer-events: none; }
.chatw.is-teasing .chatw__teaser { opacity: 1; transform: none; pointer-events: auto; }
.chatw.is-open .chatw__teaser { opacity: 0 !important; transform: translateY(8px) scale(.96) !important; pointer-events: none; }
.chatw__teaser::after { content: ""; position: absolute; right: 24px; bottom: -7px; width: 13px; height: 13px; background: #fff; border-right: 1px solid var(--l-brd); border-bottom: 1px solid var(--l-brd); transform: rotate(45deg); }
.chatw__teaser-x { position: absolute; top: 5px; right: 5px; width: 21px; height: 21px; border: none; background: none; color: #9aa4bf; font-size: 11px; line-height: 1; cursor: pointer; border-radius: 50%; transition: background .2s, color .2s; }
.chatw__teaser-x:hover { background: var(--l-card); color: var(--l-txt); }
.chatw__panel { position: absolute; right: 0; bottom: 78px; width: 374px; max-width: calc(100vw - 32px); height: 560px; max-height: calc(100vh - 130px); background: #fff; border: 1px solid var(--l-brd); border-radius: 20px; overflow: hidden; display: flex; flex-direction: column; box-shadow: 0 34px 80px -24px rgba(10,20,48,.5); opacity: 0; visibility: hidden; transform: translateY(16px) scale(.98); transform-origin: bottom right; transition: opacity .28s var(--ease), transform .28s var(--ease), visibility .28s; }
.chatw.is-open .chatw__panel { opacity: 1; visibility: visible; transform: none; }
.chatw__head { display: flex; align-items: center; gap: 11px; padding: 15px 16px; background: #0b1220; color: #fff; flex: none; }
.chatw__ava { width: 38px; height: 38px; flex: none; border-radius: 11px; background: linear-gradient(180deg, var(--blue-2), var(--blue)); display: grid; place-items: center; }
.chatw__ava-e { width: 56%; height: 56%; background: #fff; -webkit-mask: url(../images/e-mark.png?v=2) center / contain no-repeat; mask: url(../images/e-mark.png?v=2) center / contain no-repeat; }
.chatw__id { flex: 1; min-width: 0; }
.chatw__id strong { display: block; font-size: 15px; font-weight: 700; }
.chatw__id span { display: flex; align-items: center; gap: 6px; font-size: 11.5px; color: rgba(255,255,255,.66); }
.chatw__id i { width: 7px; height: 7px; border-radius: 50%; background: #2bd07a; }
.chatw__close { flex: none; width: 30px; height: 30px; border-radius: 50%; border: none; background: rgba(255,255,255,.12); color: #fff; cursor: pointer; font-size: 12px; transition: background .2s; }
.chatw__close:hover { background: rgba(255,255,255,.22); }
.chatw__body { flex: 1; min-height: 0; overflow-y: auto; padding: 18px 16px; display: flex; flex-direction: column; gap: 11px; }
.chatw__row { display: flex; }
.chatw__row--bot { justify-content: flex-start; }
.chatw__row--user { justify-content: flex-end; }
.chatw__bubble { max-width: 84%; font-size: 14px; line-height: 1.5; padding: 11px 13px; border-radius: 15px; }
.chatw__bubble--bot { background: #f1f3f8; color: #3a4666; border-bottom-left-radius: 5px; }
.chatw__bubble--user { background: linear-gradient(180deg, var(--blue-2), var(--blue)); color: #fff; border-bottom-right-radius: 5px; }
.chatw__typing { display: inline-flex; gap: 4px; }
.chatw__typing span { width: 7px; height: 7px; border-radius: 50%; background: #b6c0d6; animation: faqdot 1s infinite; }
.chatw__typing span:nth-child(2) { animation-delay: .15s; }
.chatw__typing span:nth-child(3) { animation-delay: .3s; }
.chatw__cta { align-self: flex-start; margin-top: 2px; }
.chatw__chips { display: flex; flex-wrap: wrap; gap: 7px; padding: 0 16px 12px; flex: none; }
.chatw__chip { font-family: inherit; font-size: 12.5px; font-weight: 600; color: var(--blue); background: #fff; border: 1px solid rgba(63,95,230,.3); border-radius: 999px; padding: 7px 12px; cursor: pointer; transition: background .2s var(--ease), color .2s var(--ease), transform .2s var(--ease); }
.chatw__chip:hover { background: var(--blue); color: #fff; transform: translateY(-2px); }
.chatw__input { display: flex; align-items: center; gap: 8px; padding: 12px 14px; border-top: 1px solid var(--l-brd); flex: none; }
.chatw__input input { flex: 1; min-width: 0; border: 1px solid var(--l-brd); border-radius: 999px; padding: 11px 15px; font-family: inherit; font-size: 14px; color: var(--l-txt); outline: none; background: #fff; }
.chatw__input input:focus { border-color: var(--blue-2); }
.chatw__send { flex: none; width: 38px; height: 38px; border-radius: 50%; border: none; background: #0b1220; color: #fff; cursor: pointer; display: grid; place-items: center; }
.chatw__send svg { width: 17px; height: 17px; }
.chatw__by { text-align: center; font-size: 10.5px; color: #9aa4bf; padding: 0 0 10px; flex: none; }
@media (max-width: 560px) {
  .chatw { right: 16px; bottom: 16px; }
  .chatw__panel { width: calc(100vw - 24px); height: calc(100dvh - 110px); bottom: 74px; }
}
@media (prefers-reduced-motion: reduce) { .chatw__panel, .chatw__fab svg { transition: none; } }
.booking__placeholder { text-align: center; padding: 60px 24px; border: 1px dashed var(--line-2); border-radius: var(--radius-sm); }
.booking__cal-icon { font-size: 46px; margin-bottom: 14px; }
.booking__placeholder h3 { font-size: 22px; margin-bottom: 10px; }
.booking__placeholder p { color: var(--gray-2); margin-bottom: 22px; }

/* ===== SOLUTION (disposition type trendtrack) ===== */
.ttf { padding: 92px 0; }
.ttf__top { display: flex; justify-content: space-between; align-items: flex-start; gap: 40px; flex-wrap: wrap; margin-bottom: 58px; }
.ttf__intro { max-width: 600px; }
.ttf__tag { display: inline-block; font-family: ui-monospace, "SFMono-Regular", Menlo, monospace; font-size: 13px; font-weight: 600; letter-spacing: .06em; color: var(--blue); margin-bottom: 20px; }
.ttf__title { font-family: "Sora","Inter",sans-serif; font-size: clamp(30px, 3.7vw, 44px); font-weight: 800; line-height: 1.08; letter-spacing: -.03em; color: var(--l-txt); margin-bottom: 20px; }
.ttf__sub { color: var(--l-soft); font-size: 17px; line-height: 1.6; max-width: 470px; }
.ttf__cta { margin-top: 8px; flex: none; }
.ttf__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; }
.ttf__visual { position: relative; height: 330px; border-radius: var(--radius); overflow: hidden; margin-bottom: 24px; background: linear-gradient(180deg, #fbfcff, #eef2fb); border: 1px solid var(--l-brd); }
.ttf__block h3 { font-family: "Sora","Inter",sans-serif; font-size: 20px; font-weight: 700; color: var(--l-txt); margin-bottom: 9px; }
.ttf__block p { color: var(--l-soft); font-size: 15.5px; line-height: 1.6; max-width: 430px; }
.ttf__lead { color: var(--l-txt) !important; font-weight: 500; margin-bottom: 14px; }
.ttf__more { display: inline-flex; align-items: center; gap: 7px; margin-top: 2px; padding: 0; background: none; border: none; cursor: pointer; font-family: inherit; font-size: 14px; font-weight: 600; color: var(--blue); }
.ttf__more:hover { opacity: .82; }
.ttf__more-ic { width: 16px; height: 16px; transition: transform .35s ease; }
.ttf__more[aria-expanded="true"] .ttf__more-ic { transform: rotate(180deg); }
.ttf__list { list-style: none; margin: 0; max-width: 440px; display: grid; gap: 10px; max-height: 0; overflow: hidden; opacity: 0; transition: max-height .45s ease, opacity .35s ease, margin-top .35s ease; }
.ttf__list.open { opacity: 1; margin-top: 14px; }
.ttf__list li { position: relative; padding-left: 24px; color: var(--l-soft); font-size: 14.5px; line-height: 1.5; }
.ttf__list li::before { content: ""; position: absolute; left: 3px; top: 7px; width: 7px; height: 7px; border-radius: 50%; background: var(--blue-2); }
/* visuel 1 : réseau de canaux */
/* orbite des canaux autour du logo */
.ttf__net { display: grid; place-items: center; }
.ttf__rings2 { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); width: 300px; height: 300px; }
.ttf__orbit { position: absolute; top: 50%; left: 50%; width: 0; height: 0; }
.ttf__orbit--a { animation: ttforbit 34s linear infinite; }
.ttf__orbit--b { animation: ttforbit 26s linear infinite reverse; }
.ttf__sat { position: absolute; top: 0; left: 0; width: 0; height: 0; transform: rotate(var(--a)) translateX(var(--r)) rotate(calc(-1 * var(--a))); }
.ttf__sat-i { position: absolute; top: 0; left: 0; margin: -23px; width: 46px; height: 46px; display: grid; place-items: center; background: #fff; border: 1px solid var(--l-brd); border-radius: 14px; box-shadow: 0 8px 22px -10px rgba(20,32,70,.32); }
.ttf__orbit--a .ttf__sat-i { animation: ttforbit 34s linear infinite reverse; }
.ttf__orbit--b .ttf__sat-i { animation: ttforbit 26s linear infinite; }
.ttf__sat-i svg { width: 25px; height: 25px; display: block; }
.ttf__core { position: relative; z-index: 3; width: 70px; height: 70px; display: grid; place-items: center; border-radius: 20px; background: linear-gradient(180deg, var(--blue-2), var(--blue)); box-shadow: 0 16px 36px -10px var(--blue-glow); }
.ttf__core-e { width: 56%; height: 56%; background: #fff; -webkit-mask: url(../images/e-mark.png?v=2) center / contain no-repeat; mask: url(../images/e-mark.png?v=2) center / contain no-repeat; }
@keyframes ttforbit { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .ttf__orbit, .ttf__sat-i { animation: none !important; } }
/* visuel 2 : mock dashboard */
.ttf__win { position: absolute; inset: 18px; background: #fff; border: 1px solid var(--l-brd); border-radius: 14px; overflow: hidden; display: flex; flex-direction: column; box-shadow: 0 16px 36px -18px rgba(20,32,70,.28); }
/* mock application SmartCase */
.ttf__app { position: absolute; inset: 16px; background: #fff; border: 1px solid var(--l-brd); border-radius: 13px; overflow: hidden; display: flex; box-shadow: 0 16px 38px -18px rgba(20,32,70,.3); }
.ttf__app-side { width: 96px; flex: none; background: #fbfcff; border-right: 1px solid var(--l-brd); padding: 11px 8px; }
.ttf__app-brand { font-family: "Sora","Inter",sans-serif; font-weight: 800; font-size: 10.5px; color: var(--l-txt); margin: 0 0 12px 4px; }
.ttf__app-nav { display: grid; gap: 3px; }
.ttf__nav-item { font-size: 8.5px; color: #828ca1; padding: 5px 7px; border-radius: 6px; display: flex; align-items: center; gap: 5px; }
.ttf__nav-item--on { background: rgba(63,95,230,.10); color: var(--blue); font-weight: 600; }
.ttf__nav-item i { font-style: normal; margin-left: auto; background: var(--blue-2); color: #fff; border-radius: 50%; width: 12px; height: 12px; font-size: 7.5px; display: grid; place-items: center; }
.ttf__app-main { flex: 1; min-width: 0; padding: 12px 13px; display: flex; flex-direction: column; gap: 11px; }
.ttf__app-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; }
.ttf__app-head strong { display: block; font-family: "Sora","Inter",sans-serif; font-weight: 700; font-size: 13.5px; color: var(--l-txt); }
.ttf__app-head span { font-size: 8px; color: #8a93ad; }
.ttf__app-toggle { display: flex; gap: 2px; background: #f1f4fb; border-radius: 7px; padding: 2px; flex: none; }
.ttf__app-toggle b, .ttf__app-toggle span { font-size: 8px; padding: 3px 7px; border-radius: 5px; color: #8a93ad; font-weight: 500; }
.ttf__app-toggle b { background: #fff; color: var(--l-txt); box-shadow: 0 1px 2px rgba(0,0,0,.07); }
.ttf__app-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.ttf__stat-c { border-radius: 8px; padding: 7px 8px; min-width: 0; }
.ttf__stat-c span { display: block; font-size: 7.5px; color: #6b7493; line-height: 1.25; margin-bottom: 4px; }
.ttf__stat-c b { font-family: "Sora","Inter",sans-serif; font-weight: 800; font-size: 14px; color: var(--l-txt); }
.ttf__stat-c--gray { background: #f1f3f8; }
.ttf__stat-c--teal { background: #e2f5ee; }
.ttf__stat-c--teal b { color: #138a64; }
.ttf__stat-c--amber { background: #fdf0e1; }
.ttf__stat-c--purple { background: #ece7fb; }
.ttf__app-section { border: 1px solid var(--l-brd); border-radius: 11px; padding: 10px; }
.ttf__app-chip { display: inline-block; font-size: 8px; font-weight: 600; color: #7c5cff; background: #efeafe; border-radius: 999px; padding: 3px 9px; margin-bottom: 8px; }
.ttf__app-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.ttf__mcard { border: 1px solid var(--l-brd); border-radius: 8px; padding: 7px 8px; min-width: 0; }
.ttf__mcard span { display: block; font-size: 7.5px; color: #6b7493; line-height: 1.25; margin-bottom: 4px; }
.ttf__mcard b { font-family: "Sora","Inter",sans-serif; font-weight: 800; font-size: 14px; color: var(--l-txt); }
.ttf__mcard em { display: block; font-style: normal; font-size: 6.5px; color: #b06; color: #c0526b; margin-top: 2px; }
.ttf__win-bar { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-bottom: 1px solid var(--l-brd); }
.ttf__branddot { width: 22px; height: 22px; border-radius: 6px; background: linear-gradient(180deg,var(--blue-2),var(--blue)); color: #fff; font-size: 12px; font-weight: 800; display: grid; place-items: center; font-family: "Sora","Inter",sans-serif; }
.ttf__url { font-size: 12px; color: #8a93ad; }
.ttf__win-body { display: grid; grid-template-columns: 1.45fr 1fr; flex: 1; min-height: 0; }
.ttf__win-main { padding: 14px; border-right: 1px solid var(--l-brd); display: flex; flex-direction: column; }
.ttf__win-side { padding: 14px; display: flex; flex-direction: column; gap: 9px; }
.ttf__row { display: flex; align-items: center; justify-content: space-between; font-size: 12.5px; color: #6b7493; }
.ttf__live { color: var(--l-txt); font-weight: 700; font-size: 15px; }
.ttf__live::before { content: "● "; color: #1d9e75; font-size: 9px; vertical-align: middle; }
.ttf__chart { width: 100%; flex: 1; min-height: 70px; margin: 10px 0; }
.ttf__side-title { font-size: 10.5px; text-transform: uppercase; letter-spacing: .08em; color: #9aa4bf; margin: 2px 0; }
.ttf__metric { display: flex; align-items: center; justify-content: space-between; font-size: 12.5px; color: #44506e; }
.ttf__metric b { color: var(--l-txt); font-weight: 700; }
.ttf__metric--score b { color: var(--blue); }
.ttf__thumbs { display: grid; grid-template-columns: repeat(4,1fr); gap: 6px; margin-top: 2px; }
.ttf__thumbs span { aspect-ratio: 1; border-radius: 6px; background: linear-gradient(135deg, #e9edf8, #d8dff2); }
/* pastilles */
.ttf__pills { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; margin-top: 56px; padding-top: 42px; border-top: 1px solid var(--l-brd); }
.ttf__pill { display: inline-flex; align-items: center; gap: 9px; padding: 11px 18px; border-radius: 999px; background: var(--l-card); border: 1px solid var(--l-brd); font-size: 14px; font-weight: 500; color: var(--l-txt); }
.ttf__pill svg { width: 17px; height: 17px; color: var(--blue-2); flex: none; }
.ttf__grid--2 { margin-top: 28px; }
/* mock centralisateur : tickets à répondre */
.ttf__tk { display: flex; flex-direction: column; gap: 9px; }
.ttf__tk-msg { display: flex; align-items: flex-start; gap: 8px; border: 1px solid var(--l-brd); border-radius: 10px; padding: 9px 10px; background: #fbfcff; }
.ttf__tk-av { flex: none; width: 22px; height: 22px; border-radius: 50%; background: linear-gradient(180deg,var(--blue-2),var(--blue)); color: #fff; font-size: 9px; font-weight: 800; display: grid; place-items: center; font-family: "Sora","Inter",sans-serif; }
.ttf__tk-msg > div { flex: 1; min-width: 0; }
.ttf__tk-msg b { display: block; font-size: 9px; color: var(--l-txt); margin-bottom: 2px; }
.ttf__tk-msg p { font-size: 9.5px; color: #5b6480; line-height: 1.35; margin: 0; }
.ttf__tk-badge { flex: none; font-size: 7px; font-weight: 700; color: #c0526b; background: #fdebef; border-radius: 999px; padding: 2px 6px; }
.ttf__tk-reply { border: 1px solid rgba(63,95,230,.25); border-radius: 10px; padding: 9px 10px; background: rgba(63,95,230,.045); }
.ttf__tk-reply-lbl { display: inline-block; font-size: 7.5px; font-weight: 700; color: var(--blue); margin-bottom: 5px; }
.ttf__tk-reply p { font-size: 9.5px; color: #44506e; line-height: 1.4; margin: 0 0 8px; }
.ttf__tk-actions { display: flex; gap: 6px; justify-content: flex-end; }
.ttf__tk-regen { font-size: 8px; font-weight: 600; color: #6b7493; border: 1px solid var(--l-brd); border-radius: 7px; padding: 4px 9px; }
.ttf__tk-send { font-size: 8px; font-weight: 700; color: #fff; background: linear-gradient(180deg,var(--blue-2),var(--blue)); border-radius: 7px; padding: 4px 11px; box-shadow: 0 6px 14px -6px var(--blue-glow); animation: tksend 2.6s var(--ease) infinite; }
@keyframes tksend { 0%,100% { box-shadow: 0 6px 14px -6px var(--blue-glow); } 50% { box-shadow: 0 6px 20px -4px var(--blue-glow), 0 0 0 3px rgba(63,95,230,.13); } }
/* mock reviews : intentions / retours */
.ttf__rv-tabs { display: flex; gap: 6px; }
.ttf__rv-tabs b, .ttf__rv-tabs span { font-size: 8.5px; font-weight: 600; padding: 4px 10px; border-radius: 7px; }
.ttf__rv-tabs b { background: rgba(63,95,230,.10); color: var(--blue); }
.ttf__rv-tabs span { color: #8a93ad; border: 1px solid var(--l-brd); }
.ttf__rv-list { display: grid; gap: 9px; margin-top: 2px; }
.ttf__rv-row { display: grid; grid-template-columns: 86px 1fr 26px; align-items: center; gap: 9px; }
.ttf__rv-row > span { font-size: 8.5px; color: #5b6480; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ttf__rv-track { height: 7px; border-radius: 999px; background: #eef1f8; overflow: hidden; }
.ttf__rv-bar { display: block; height: 100%; width: var(--w); border-radius: 999px; background: linear-gradient(90deg, var(--blue-2), var(--blue)); transform-origin: left; animation: rvfill 1.1s var(--ease) both; }
.ttf__rv-row > b { font-size: 8.5px; font-weight: 800; color: var(--l-txt); text-align: right; font-family: "Sora","Inter",sans-serif; }
@keyframes rvfill { from { transform: scaleX(0); } }
@media (prefers-reduced-motion: reduce) { .ttf__tk-send, .ttf__rv-bar { animation: none !important; } }
/* sidebar app : icônes + badge rouge (fidèle au vrai app) */
.ttf__nav-item svg { width: 11px; height: 11px; flex: none; }
.ttf__nav-item i { background: #e5484d; }
/* mock Tickets à répondre */
.ttf__tkt-search { display: flex; align-items: center; gap: 6px; border: 1px solid var(--l-brd); border-radius: 8px; padding: 7px 9px; color: #9aa4bf; }
.ttf__tkt-search svg { width: 11px; height: 11px; flex: none; }
.ttf__tkt-search span { font-size: 8.5px; }
.ttf__tkt-tabs { display: flex; gap: 5px; flex-wrap: wrap; }
.ttf__tkt-tab { display: inline-flex; align-items: center; gap: 4px; font-size: 8px; font-weight: 600; color: #6b7493; border: 1px solid var(--l-brd); border-radius: 999px; padding: 4px 9px; }
.ttf__tkt-tab i { font-style: normal; font-size: 7px; color: #9aa4bf; }
.ttf__tkt-tab--on { background: #11152a; color: #fff; border-color: #11152a; }
.ttf__tkt-tab--on i { color: rgba(255,255,255,.65); }
.ttf__tkt-list { display: flex; flex-direction: column; gap: 6px; }
.ttf__tkt-row { position: relative; border: 1px solid var(--l-brd); border-radius: 9px; padding: 7px 10px 7px 12px; }
.ttf__tkt-row::before { content: ""; position: absolute; left: 0; top: 7px; bottom: 7px; width: 3px; border-radius: 0 3px 3px 0; background: var(--blue-2); }
.ttf__tkt-row-top { display: flex; align-items: center; gap: 6px; }
.ttf__tkt-row-top b { font-size: 9.5px; color: var(--l-txt); }
.ttf__tkt-id { font-size: 8px; font-weight: 700; color: var(--blue); background: #e8ecfc; border-radius: 5px; padding: 2px 5px; }
.ttf__tkt-chan { font-size: 7px; font-weight: 600; border-radius: 999px; padding: 2px 6px; }
.ttf__tkt-chan--wa { color: #1d8a64; background: #e2f5ee; }
.ttf__tkt-chan--em { color: #2954c8; background: #e6ecfb; }
.ttf__tkt-chan--bot { color: #7a3fd1; background: #efe7fb; }
.ttf__tkt-time { margin-left: auto; font-size: 7.5px; color: #9aa4bf; }
.ttf__tkt-prev { font-size: 8.5px; color: #8a93ad; margin: 4px 0 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* mock Reviews & Insights */
.ttf__rvi-tabs { display: flex; gap: 4px; flex-wrap: wrap; }
.ttf__rvi-tab { font-size: 7.5px; font-weight: 600; color: #6b7493; border: 1px solid var(--l-brd); border-radius: 6px; padding: 4px 7px; }
.ttf__rvi-tab--on { background: #11152a; color: #fff; border-color: #11152a; }
.ttf__rvi-card { border: 1px solid var(--l-brd); border-radius: 10px; padding: 10px; }
.ttf__rvi-sumhead { display: flex; align-items: center; gap: 5px; font-size: 9px; font-weight: 700; color: var(--l-txt); margin-bottom: 6px; }
.ttf__rvi-spark { color: var(--blue); }
.ttf__rvi-sum { font-size: 8.5px; color: #5b6480; line-height: 1.5; margin: 0; }
.ttf__rvi-sum b { color: var(--l-txt); }
.ttf__rvi-tics { display: grid; gap: 6px; }
.ttf__rvi-tic { display: flex; align-items: center; gap: 7px; border: 1px solid var(--l-brd); border-radius: 8px; padding: 7px 9px; }
.ttf__rvi-tic > span:not(.ttf__rvi-dot) { font-size: 8.5px; color: #44506e; flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ttf__rvi-tic b { font-size: 7.5px; font-weight: 700; color: #6b7493; flex: none; }
.ttf__rvi-dot { width: 7px; height: 7px; border-radius: 50%; flex: none; }
.ttf__rvi-dot--r { background: #e5484d; }
.ttf__rvi-dot--a { background: #f5a623; }
@media (max-width: 820px) {
  .ttf__grid { grid-template-columns: 1fr; }
  .ttf__top { flex-direction: column; }
  .ttf__cta { align-self: flex-start; }
}
/* Mobile : maquettes d'app rendues à leur taille desktop (524x300, où tout le
   contenu tient) puis réduites à 60% → carte compacte, contenu entier, centrée. */
@media (max-width: 560px) {
  .ttf__visual.ttf__dash {
    width: 314px; max-width: 100%;
    height: 180px;
    margin-left: auto; margin-right: auto;
    overflow: hidden;
  }
  .ttf__dash .ttf__app {
    position: absolute; inset: auto; top: 0; left: 0; margin: 0;
    width: 524px; height: 300px;
    transform: scale(0.6);
    transform-origin: top left;
  }
}

/* ===== ANALYSE (cluster maquettes + 3 colonnes) ===== */
.dca { padding: 80px 0 92px; }
.dca__cluster { display: flex; gap: 28px; align-items: flex-start; justify-content: center; flex-wrap: wrap; max-width: 760px; margin: 0 auto 56px; }
/* mock chatbot (gauche) */
.dca__chat { width: 338px; height: 600px; flex: none; display: flex; flex-direction: column; background: #fff; border: 1px solid var(--l-brd); border-radius: 20px; box-shadow: 0 26px 56px -26px rgba(20,32,70,.34); overflow: hidden; }
.dca__chat-head { display: flex; align-items: center; gap: 11px; padding: 14px 16px; border-bottom: 1px solid var(--l-brd); }
.dca__chat-ava { width: 34px; height: 34px; flex: none; border-radius: 11px; background: linear-gradient(180deg, var(--blue-2), var(--blue)); color: #fff; display: grid; place-items: center; font-family: "Sora","Inter",sans-serif; font-weight: 800; font-size: 14px; }
.dca__chat-id strong { display: block; font-size: 14px; color: var(--l-txt); font-weight: 700; }
.dca__chat-id span { display: flex; align-items: center; gap: 6px; font-size: 11px; color: #7a8499; }
.dca__chat-id i { width: 7px; height: 7px; border-radius: 50%; background: #2bb673; }
.dca__chat-body { flex: 1 1 auto; padding: 14px 16px; display: flex; flex-direction: column; gap: 11px; overflow-y: auto; }
.dca__bubble { background: #f1f3f8; color: #3a4666; font-size: 12px; line-height: 1.5; padding: 10px 12px; border-radius: 13px; border-top-left-radius: 4px; }
.dca__chat-lbl { font-size: 11px; font-weight: 700; color: var(--l-txt); margin: 2px 0 -2px; }
.dca__chat-prods { display: flex; gap: 9px; }
.dca__prod { flex: 1; min-width: 0; border: 1px solid var(--l-brd); border-radius: 12px; padding: 9px; }
.dca__prod-img { height: 64px; border-radius: 8px; background: #fff url(../images/coque-orange.png) center / contain no-repeat; margin-bottom: 7px; }
.dca__prod b { display: block; font-size: 10.5px; color: var(--l-txt); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dca__prod span { display: block; font-size: 11px; color: var(--l-txt); font-weight: 700; margin: 2px 0 6px; }
.dca__prod em { display: block; font-style: normal; font-size: 8.5px; font-weight: 600; text-align: center; color: #fff; background: #0b1220; border-radius: 7px; padding: 5px; }
.dca__chips { display: flex; flex-wrap: wrap; gap: 7px; }
.dca__chips span { font-size: 11px; color: #44506e; background: #f4f6fb; border: 1px solid var(--l-brd); border-radius: 999px; padding: 5px 11px; }
.dca__chat-input { margin: 0 16px 16px; display: flex; align-items: center; justify-content: space-between; gap: 8px; border: 1px solid var(--l-brd); border-radius: 999px; padding: 7px 7px 7px 15px; }
.dca__chat-input span { font-size: 12px; color: #9aa4bf; }
.dca__chat-input i { flex: none; width: 30px; height: 30px; border-radius: 50%; background: #0b1220; color: #fff; display: grid; place-items: center; font-style: normal; font-size: 12px; }
/* mock expert produit (droite) */
.dca__expert { width: 322px; flex: none; background: #fff; border: 1px solid var(--l-brd); border-radius: 20px; box-shadow: 0 26px 56px -26px rgba(20,32,70,.34); padding: 16px; }
.dca__expert-eyebrow { font-size: 10.5px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--blue); }
.dca__expert h4 { font-family: "Sora","Inter",sans-serif; font-size: 17px; font-weight: 700; color: var(--l-txt); line-height: 1.3; margin: 9px 0 16px; }
.dca__expert-chips { display: flex; flex-direction: column; gap: 9px; margin-bottom: 16px; }
.dca__expert-chips span { display: flex; align-items: center; gap: 9px; font-size: 12px; color: #44506e; background: #f4f6fb; border: 1px solid var(--l-brd); border-radius: 12px; padding: 10px 13px; line-height: 1.35; }
.dca__expert-chips span::before { content: "✦"; flex: none; color: var(--blue-2); font-size: 11px; }
.dca__expert-input { display: flex; align-items: center; justify-content: space-between; gap: 8px; border: 1px solid var(--l-brd); border-radius: 13px; padding: 11px 11px 11px 15px; }
.dca__expert-input span { font-size: 12px; color: #9aa4bf; }
.dca__expert-input i { flex: none; width: 26px; height: 26px; border-radius: 9px; background: #f1f4fb; color: #44506e; display: grid; place-items: center; font-style: normal; font-size: 15px; line-height: 1; }
.dca__expert-by { font-size: 10px; color: #9aa4bf; text-align: center; margin-top: 14px; }
.dca__expert-by b { color: var(--l-soft); font-weight: 600; }
/* fiche produit au-dessus du widget expert */
.dca__pdp { display: flex; gap: 13px; padding: 4px 4px 14px; }
.dca__pdp-img { width: 88px; height: 88px; flex: none; border-radius: 13px; background: url(../images/coque.svg) center / 80px no-repeat, linear-gradient(135deg, #eef2fb, #dde3f4); }
.dca__pdp-info { min-width: 0; display: flex; flex-direction: column; }
.dca__pdp-cat { font-size: 9.5px; letter-spacing: .08em; text-transform: uppercase; color: #9aa4bf; font-weight: 600; }
.dca__pdp-name { font-family: "Sora","Inter",sans-serif; font-size: 15px; font-weight: 700; color: var(--l-txt); margin: 3px 0 5px; }
.dca__pdp-stars { font-size: 11px; color: #f5a623; letter-spacing: 1px; margin-bottom: 9px; }
.dca__pdp-stars span { color: #9aa4bf; font-size: 10px; letter-spacing: 0; }
.dca__pdp-row { display: flex; align-items: center; gap: 10px; margin-top: auto; }
.dca__pdp-price { flex: none; white-space: nowrap; font-family: "Sora","Inter",sans-serif; font-weight: 800; font-size: 16px; color: var(--l-txt); }
.dca__pdp-add { flex: none; white-space: nowrap; font-size: 9.5px; font-weight: 600; color: #fff; background: #0b1220; border-radius: 8px; padding: 7px 11px; }
/* widget expert embarque sur la page produit */
.dca__expert-w { background: #f6f8fc; border: 1px solid var(--l-brd); border-radius: 15px; padding: 15px; }
.dca__expert-w .dca__expert-chips span { background: #fff; }
.dca__expert-w .dca__expert-input { background: #fff; }
/* bulle lanceur du chatbot */
.dca__chatwrap { position: relative; flex: none; }
.dca__launcher { position: absolute; left: -26px; bottom: -24px; width: 54px; height: 54px; border: none; border-radius: 50%; background: #0b1220; color: #fff; display: grid; place-items: center; cursor: pointer; box-shadow: 0 18px 32px -10px rgba(11,18,32,.55); }
.dca__launcher svg { width: 25px; height: 25px; }
.dca__launcher-dot { position: absolute; top: 3px; right: 3px; width: 13px; height: 13px; border-radius: 50%; background: #ff5a3c; border: 2.5px solid #0b1220; }
/* echange question / reponse de l'expert produit */
.dca__qa { display: flex; flex-direction: column; gap: 9px; margin: 12px 0 13px; }
.dca__q { align-self: flex-end; max-width: 88%; background: var(--blue-2); color: #fff; font-size: 11.5px; line-height: 1.42; padding: 9px 12px; border-radius: 13px; border-bottom-right-radius: 4px; }
.dca__a { align-self: flex-start; max-width: 94%; background: #fff; border: 1px solid var(--l-brd); color: #3a4666; font-size: 11.5px; line-height: 1.48; padding: 9px 12px; border-radius: 13px; border-bottom-left-radius: 4px; }
/* questions suggerees (prefaites) */
.dca__sugg { margin-bottom: 12px; }
.dca__sugg-lbl { display: block; font-size: 9.5px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: #9aa4bf; margin-bottom: 7px; }
.dca__sugg-chips { display: flex; flex-wrap: wrap; gap: 7px; }
.dca__sugg-chips span { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; color: var(--blue); background: #fff; border: 1px solid rgba(63,95,230,.28); border-radius: 999px; padding: 6px 11px; }
.dca__sugg-chips span::before { content: "✦"; color: var(--blue-2); font-size: 10px; }
/* carte flottante taux de conversion */
.dca__expertwrap { position: relative; flex: none; }
.dca__conv { position: absolute; z-index: 5; top: 30%; left: calc(100% - 26px); width: 166px; background: #fff; border: 1px solid var(--l-brd); border-radius: 16px; padding: 13px 14px 11px; box-shadow: 0 22px 46px -22px rgba(20,32,70,.34); }
.dca__conv-lbl { display: block; font-size: 10.5px; font-weight: 600; color: #6b7493; }
.dca__conv-val { display: flex; align-items: center; gap: 5px; margin: 3px 0 7px; }
.dca__conv-val strong { font-family: "Sora","Inter",sans-serif; font-weight: 800; font-size: 25px; color: var(--l-txt); }
.dca__conv-arrow { width: 19px; height: 19px; flex: none; }
.dca__conv-chart { width: 100%; height: 46px; display: block; }
@media (max-width: 1100px) { .dca__conv { display: none; } }
/* ===== Téléphone : Expert Produit en action ===== */
.phone { position: relative; width: 300px; height: 600px; flex: none; border-radius: 42px; background: #0b1220; padding: 9px; box-shadow: 0 44px 90px -32px rgba(10,20,48,.6); }
.phone__island { position: absolute; top: 20px; left: 50%; transform: translateX(-50%); width: 92px; height: 24px; background: #0b1220; border-radius: 999px; z-index: 3; }
.phone__screen { position: relative; height: 100%; border-radius: 34px; overflow: hidden; background: #fff; }
.phone__scroll { height: 100%; overflow-y: auto; scroll-behavior: smooth; scrollbar-width: none; }
.phone__scroll::-webkit-scrollbar { display: none; }
.phone__bar { padding: 52px 16px 12px; text-align: center; font-size: 11px; color: #9aa4bf; }
.phone__pdp { display: flex; gap: 13px; align-items: flex-start; padding: 6px 15px 15px; text-align: left; border-bottom: 1px solid var(--l-brd); }
.phone__pdp-img { width: 104px; height: 128px; flex: none; border-radius: 16px; border: 1px solid var(--l-brd); background: #fff url(../images/coque-orange.png) center / cover no-repeat; }
.phone__pdp-info { flex: 1; min-width: 0; }
.phone__pdp-cat { display: block; font-size: 9.5px; letter-spacing: .08em; text-transform: uppercase; color: #9aa4bf; font-weight: 600; }
.phone__pdp-name { display: block; font-family: "Sora","Inter",sans-serif; font-size: 15px; font-weight: 700; line-height: 1.2; color: var(--l-txt); margin: 4px 0 5px; }
.phone__pdp-stars { font-size: 11.5px; color: #f5a623; letter-spacing: 1px; margin-bottom: 7px; }
.phone__pdp-stars span { color: #9aa4bf; font-size: 10.5px; letter-spacing: 0; }
.phone__pdp-desc { font-size: 11px; line-height: 1.45; color: #6b7493; margin: 0 0 11px; }
.phone__pdp-row { display: flex; align-items: center; gap: 9px; }
.phone__pdp-price { font-family: "Sora","Inter",sans-serif; font-weight: 800; font-size: 16px; color: var(--l-txt); white-space: nowrap; }
.phone__pdp-add { flex: none; font-size: 11px; font-weight: 600; color: #fff; background: #0b1220; border-radius: 9px; padding: 7px 12px; white-space: nowrap; }
.phone__expert { padding: 14px 15px; }
.phone__expert-head { display: flex; align-items: center; gap: 9px; margin-bottom: 12px; }
.phone__expert-ava { flex: none; width: 30px; height: 30px; border-radius: 50%; background: linear-gradient(180deg, var(--blue-2), var(--blue)); color: #fff; font-size: 13px; display: grid; place-items: center; box-shadow: 0 6px 14px -6px var(--blue-glow); }
.phone__expert-id strong { display: block; font-family: "Sora","Inter",sans-serif; font-size: 12.5px; font-weight: 700; color: var(--l-txt); line-height: 1.2; }
.phone__expert-id span { display: flex; align-items: center; gap: 5px; font-size: 9.5px; color: #1d9e75; }
.phone__expert-id i { width: 6px; height: 6px; border-radius: 50%; background: #1d9e75; flex: none; }
.phone__trust { display: flex; gap: 14px; padding: 11px 15px; border-bottom: 1px solid var(--l-brd); }
.phone__trust span { display: flex; align-items: center; gap: 6px; font-size: 10px; font-weight: 600; color: #5b6480; }
.phone__trust svg { width: 14px; height: 14px; color: var(--blue); flex: none; }
.phone__qhead { display: flex; align-items: center; gap: 8px; margin-bottom: 11px; }
.phone__qhead-ic { flex: none; width: 26px; height: 26px; border-radius: 50%; background: rgba(63,95,230,.10); color: var(--blue); display: grid; place-items: center; }
.phone__qhead-ic svg { width: 15px; height: 15px; }
.phone__qhead strong { font-family: "Sora","Inter",sans-serif; font-size: 13px; font-weight: 700; color: var(--l-txt); }
.phone__qchips { display: grid; gap: 8px; margin-bottom: 12px; }
.phone__qchip { display: flex; align-items: center; gap: 9px; width: 100%; text-align: left; font-family: inherit; font-size: 12px; color: #44506e; background: #fff; border: 1px solid var(--l-brd); border-radius: 999px; padding: 9px 14px; cursor: pointer; transition: border-color .2s ease, background .2s ease; }
.phone__qchip span { color: var(--blue); font-size: 12px; flex: none; }
.phone__qchip:hover { border-color: var(--blue-2); background: rgba(63,95,230,.04); }
.phone__expert-eyebrow { display: block; font-size: 10.5px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--blue); margin-bottom: 12px; }
.phone__chat { display: flex; flex-direction: column; gap: 9px; margin-bottom: 12px; min-height: 30px; }
.phone__msg { max-width: 86%; font-size: 12.5px; line-height: 1.45; padding: 9px 12px; border-radius: 13px; }
.phone__msg--user { align-self: flex-end; background: linear-gradient(180deg, var(--blue-2), var(--blue)); color: #fff; border-bottom-right-radius: 4px; }
.phone__msg--bot { align-self: flex-start; background: #f1f3f8; color: #3a4666; border-bottom-left-radius: 4px; }
.phone__typing { align-self: flex-start; display: inline-flex; gap: 4px; padding: 11px 13px; background: #f1f3f8; border-radius: 13px; }
.phone__typing span { width: 6px; height: 6px; border-radius: 50%; background: #b6c0d6; animation: faqdot 1s infinite; }
.phone__typing span:nth-child(2) { animation-delay: .15s; }
.phone__typing span:nth-child(3) { animation-delay: .3s; }
.phone__input { display: flex; align-items: center; justify-content: space-between; border: 1px solid var(--l-brd); border-radius: 12px; padding: 10px 12px; }
.phone__input span { font-size: 12px; color: #9aa4bf; }
.phone__input i { font-style: normal; width: 24px; height: 24px; border-radius: 8px; background: #f1f4fb; color: #44506e; display: grid; place-items: center; }
@media (max-width: 560px) { .phone { width: 280px; height: 570px; } }
/* titre de section */
.dca__head { text-align: center; max-width: 700px; margin: 0 auto 46px; }
.dca__eyebrow { display: inline-flex; align-items: center; gap: 7px; font-size: 11.5px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--blue); background: rgba(63,95,230,.08); border: 1px solid rgba(63,95,230,.16); border-radius: 999px; padding: 6px 14px; margin-bottom: 20px; }
.dca__title { font-family: "Sora","Inter",sans-serif; font-size: clamp(27px, 4vw, 39px); font-weight: 700; line-height: 1.13; letter-spacing: -.02em; color: var(--l-txt); }
.dca__sub { font-size: 16px; line-height: 1.62; color: var(--l-soft); margin-top: 16px; }
/* 2 colonnes (chatbot + expert) */
.dca__feats.dca__feats--2 { grid-template-columns: repeat(2, 1fr); max-width: 720px; margin: 0 auto; }
.dca__card { position: absolute; width: 246px; background: #fff; border: 1px solid var(--l-brd); border-radius: 16px; padding: 14px; box-shadow: 0 20px 44px -24px rgba(20,32,70,.3); }
.dca__mock { background: #eef2fb; border-radius: 12px; padding: 16px; }
.dca__scr { background: #fff; border: 1px solid var(--l-brd); border-radius: 9px; height: 108px; display: flex; flex-direction: column; align-items: center; gap: 7px; padding: 14px 16px; }
.dca__card--lg .dca__scr { height: 134px; }
.dca__sbar { width: 46px; height: 7px; border-radius: 4px; background: #d7deec; }
.dca__sline { width: 80%; height: 6px; border-radius: 4px; background: #e6ebf5; }
.dca__saccent { width: 34px; height: 6px; border-radius: 4px; background: var(--blue-2); }
.dca__sblock { width: 72%; height: 22px; border-radius: 6px; background: #eef2fb; margin-top: 2px; }
.dca__meta { display: flex; align-items: center; justify-content: space-between; padding: 14px 4px 2px; }
.dca__meta strong { display: block; font-size: 14.5px; color: var(--l-txt); font-weight: 700; }
.dca__meta span { font-size: 12.5px; color: #9aa4bf; }
.dca__pct { font-size: 12.5px; color: #6b7493; background: var(--l-card); border: 1px solid var(--l-brd); border-radius: 999px; padding: 3px 9px; }
.dca__panel { position: absolute; width: 246px; background: #fff; border: 1px solid var(--l-brd); border-radius: 16px; padding: 10px; box-shadow: 0 20px 44px -24px rgba(20,32,70,.3); }
.dca__prow { display: flex; align-items: center; gap: 10px; padding: 8px; font-size: 13.5px; color: #44506e; border-radius: 8px; }
.dca__prow b { margin-left: auto; color: var(--l-txt); font-weight: 700; }
.dca__prow--hl { background: rgba(63,95,230,.10); }
.dca__pdot { width: 18px; height: 18px; border-radius: 5px; flex: none; }
.dca__pdot--a { background: #86b7eb; } .dca__pdot--b { background: var(--blue-2); }
.dca__pdot--c { background: #9fa9e8; } .dca__pdot--d { background: #cdd4ea; }
.dca__feats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; }
.dca__feat { padding: 24px 30px 0; border-top: 1px solid var(--l-brd); }
.dca__feat-ic { display: block; color: #b3bbcd; margin-bottom: 18px; }
.dca__feat-ic svg { width: 22px; height: 22px; }
.dca__feat h3 { font-family: "Sora","Inter",sans-serif; font-size: 19px; font-weight: 600; color: #8a93ad; margin-bottom: 13px; }
.dca__feat p { font-size: 15px; line-height: 1.62; color: #aab2c6; }
.dca__feat--active { border-top-color: var(--blue-2); }
.dca__feat--active .dca__feat-ic { color: var(--blue-2); }
.dca__feat--active h3 { color: var(--l-txt); }
.dca__feat--active p { color: var(--l-soft); }
@media (max-width: 860px) {
  .dca__cluster { max-width: 360px; }
  .dca__chatwrap, .dca__expertwrap { width: 100%; max-width: 340px; }
  .dca__chat, .dca__expert { width: 100%; }
  .dca__chat { height: auto; }
  .dca__expertwrap { align-items: center; }
  .dca__feats, .dca__feats.dca__feats--2 { grid-template-columns: 1fr; gap: 8px; }
}

/* ===== CASES MARQUEE ===== */
.cases { padding: 100px 0; overflow: hidden; }
.cases-marquee, .yt-marquee { overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); }
.cases-marquee__track { display: flex; gap: 20px; width: max-content; animation: marquee-cards 42s linear infinite; padding: 6px 10px; }
.cases-marquee:hover .cases-marquee__track, .yt-marquee:hover .yt-marquee__track { animation-play-state: paused; }
@keyframes marquee-cards { to { transform: translateX(-50%); } }
.case-card {
  width: 360px; flex-shrink: 0;
  background: linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.012));
  border: 1px solid var(--line); border-radius: var(--radius); padding: 26px;
}
.case-card__top { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; }
.avatar { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; font-weight: 800; font-family: "Sora"; background: linear-gradient(180deg, var(--blue-2), var(--blue)); color: #fff; flex-shrink: 0; }
.case-card__top strong { display: block; font-size: 15px; }
.case-card__top span { font-size: 13px; color: var(--gray); }
.case-card p { color: var(--gray-2); font-size: 15px; margin-bottom: 16px; }
.case-card__stat { font-size: 14px; color: var(--gray-2); padding-top: 14px; border-top: 1px solid var(--line); }
.case-card__stat strong { color: var(--blue-2); font-family: "Sora"; font-size: 18px; }

/* ===== METHOD ===== */
.method { padding: 100px 0; background: linear-gradient(180deg, var(--bg-2), var(--bg)); }
.steps { display: grid; grid-template-columns: repeat(4,1fr); gap: 18px; }
.step { background: linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.01)); border: 1px solid var(--line); border-radius: var(--radius); padding: 28px 24px; }
.step__num { font-family: "Sora"; font-size: 14px; font-weight: 800; color: var(--blue-2); letter-spacing: .1em; }
.step h3 { font-size: 18px; margin: 14px 0 10px; }
.step p { color: var(--gray-2); font-size: 14.5px; }

/* ===== YOUTUBE ===== */
.youtube { padding: 100px 0 70px; }
/* header chaîne YouTube : asymétrique, rouge, mot souligné (trait dessiné) */
.ythead { display: flex; align-items: flex-end; justify-content: space-between; gap: 30px; flex-wrap: wrap; margin-bottom: 48px; }
.ythead__kicker { display: inline-flex; align-items: center; gap: 9px; font-family: "Sora","Inter",sans-serif; font-size: 12px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: rgba(255,255,255,.72); }
.ythead__kicker i { width: 8px; height: 8px; border-radius: 50%; background: #FF0000; box-shadow: 0 0 0 0 rgba(255,0,0,.55); animation: ythbeat 2s var(--ease) infinite; }
@keyframes ythbeat { 0% { box-shadow: 0 0 0 0 rgba(255,0,0,.55); } 70% { box-shadow: 0 0 0 9px rgba(255,0,0,0); } 100% { box-shadow: 0 0 0 0 rgba(255,0,0,0); } }
.ythead__title { font-family: "Sora","Inter",sans-serif; font-weight: 800; font-size: clamp(34px, 4.6vw, 56px); line-height: 1.06; letter-spacing: -.025em; color: #fff; text-align: left; margin: 16px 0 0; }
.ythead__u { position: relative; color: #fff; white-space: nowrap; }
.ythead__u::after { content: ""; position: absolute; left: -2px; right: -2px; bottom: -12px; height: 14px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 16' preserveAspectRatio='none'%3E%3Cpath d='M4 11 Q45 3 80 9 T155 8 T230 9 T296 7' fill='none' stroke='%23FF0000' stroke-width='5' stroke-linecap='round'/%3E%3C/svg%3E") center / 100% 100% no-repeat; }
.ythead__sub { font-size: 16px; line-height: 1.6; color: var(--gray-2); margin: 22px 0 0; max-width: 440px; text-align: left; }
.ythead__sub-btn { flex: none; display: inline-flex; align-items: center; gap: 9px; background: #FF0000; color: #fff; font-family: "Sora","Inter",sans-serif; font-weight: 700; font-size: 15px; padding: 13px 22px; border-radius: 999px; text-decoration: none; box-shadow: 0 14px 34px -12px rgba(255,0,0,.6); transition: transform .3s var(--ease), box-shadow .3s var(--ease); }
.ythead__sub-btn:hover { transform: translateY(-3px); box-shadow: 0 22px 46px -12px rgba(255,0,0,.7); }
.ythead__sub-btn svg { width: 18px; height: 18px; }
@media (max-width: 640px) { .ythead { gap: 20px; } .ythead__sub-btn { align-self: flex-start; } }
.yt-marquee__track { display: flex; gap: 0; width: max-content; animation: marquee-cards 50s linear infinite; padding: 10px 0; }
.yt-card { width: clamp(380px, 38vw, 560px); flex-shrink: 0; margin-right: 30px; }
.yt-card__thumb {
  position: relative; overflow: hidden;
  aspect-ratio: 16/9; border-radius: 16px; display: grid; place-items: center;
  background: linear-gradient(160deg, var(--navy-2), var(--bg-2));
  border: 1px solid var(--line-2); margin-bottom: 16px; transition: transform .35s var(--ease), box-shadow .35s;
}
.yt-card__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; display: block; }
.yt-card:hover .yt-card__thumb { transform: translateY(-6px) scale(1.015); box-shadow: 0 34px 70px -24px var(--blue-glow); }
.yt-play { position: relative; z-index: 1; width: 72px; height: 72px; border-radius: 50%; display: grid; place-items: center; background: rgba(255,0,0,.92); color: #fff; font-size: 26px; padding-left: 4px; box-shadow: 0 14px 34px -10px rgba(255,0,0,.6); transition: transform .35s var(--ease); }
.yt-card:hover .yt-play { transform: scale(1.08); }
.yt-card__dur { position: absolute; bottom: 12px; right: 12px; background: rgba(0,0,0,.78); color: #fff; font-size: 13px; font-weight: 600; padding: 3px 9px; border-radius: 7px; letter-spacing: .02em; }
.yt-card__title { font-size: 17px; color: var(--gray-2); font-weight: 600; line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.yt-cta { text-align: center; margin-top: 30px; }
/* ===== Réseaux sociaux ===== */
.socials { padding: 24px 0 100px; }
.socwrap { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; max-width: 920px; margin: 0 auto; }
.socp { background: rgba(255,255,255,.03); border: 1px solid var(--line-2); border-radius: 24px; padding: 28px; transition: border-color .3s var(--ease), background .3s var(--ease); }
.socp:hover { border-color: rgba(140,165,255,.4); background: rgba(255,255,255,.05); }
.socp__head { display: flex; align-items: center; gap: 14px; margin-bottom: 22px; }
.socp__ava { width: 58px; height: 58px; flex: none; border-radius: 50%; overflow: hidden; border: 2px solid var(--line-2); background: var(--bg-2); }
.socp__ava img { width: 100%; height: 100%; object-fit: cover; object-position: center 22%; }
.socp__id b { display: block; font-family: "Sora","Inter",sans-serif; font-weight: 800; font-size: 21px; color: #fff; }
.socp__id span { font-size: 13px; color: var(--gray); }
.socp__btns { display: flex; flex-direction: column; gap: 12px; }
.soclink { display: flex; align-items: center; gap: 13px; padding: 15px 17px; border-radius: 15px; background: rgba(255,255,255,.04); border: 1px solid var(--line-2); text-decoration: none; transition: transform .3s var(--ease), background .3s var(--ease), border-color .3s var(--ease), box-shadow .3s var(--ease); }
.soclink__brand { width: 23px; height: 23px; flex: none; color: var(--c); transition: color .3s var(--ease); }
.soclink span { flex: 1; font-family: "Sora","Inter",sans-serif; font-weight: 600; font-size: 15.5px; color: #fff; }
.soclink__arr { width: 18px; height: 18px; flex: none; color: var(--gray); transition: transform .3s var(--ease), color .3s var(--ease); }
.soclink--li { --c: #4593e6; }
.soclink--ig { --c: #E4405F; }
.soclink:hover { transform: translateX(4px); background: var(--c); border-color: var(--c); box-shadow: 0 16px 34px -14px var(--c); }
.soclink:hover .soclink__brand, .soclink:hover .soclink__arr { color: #fff; }
.soclink:hover .soclink__arr { transform: translateX(4px); }
.soclink--ig:hover { background: linear-gradient(45deg, #F58529, #DD2A7B 52%, #8134AF); border-color: transparent; box-shadow: 0 16px 36px -14px #DD2A7B; }
.socyt { grid-column: 1 / -1; display: flex; align-items: center; gap: 18px; padding: 22px 26px; border-radius: 22px; background: linear-gradient(100deg, rgba(255,0,0,.14), rgba(255,255,255,.03) 60%); border: 1px solid rgba(255,0,0,.28); text-decoration: none; transition: transform .3s var(--ease), border-color .3s var(--ease), box-shadow .3s var(--ease); }
.socyt:hover { transform: translateY(-3px); border-color: rgba(255,0,0,.55); box-shadow: 0 26px 54px -22px rgba(255,0,0,.45); }
.socyt__ic { width: 58px; height: 58px; flex: none; border-radius: 16px; background: #FF0000; color: #fff; display: grid; place-items: center; box-shadow: 0 12px 28px -10px rgba(255,0,0,.6); }
.socyt__ic svg { width: 32px; height: 32px; }
.socyt__txt { flex: 1; min-width: 0; }
.socyt__txt b { display: block; font-family: "Sora","Inter",sans-serif; font-weight: 700; font-size: 19px; color: #fff; }
.socyt__txt span { font-size: 13.5px; color: var(--gray-2); }
.socyt__cta { flex: none; display: inline-flex; align-items: center; gap: 8px; font-family: "Sora","Inter",sans-serif; font-weight: 700; font-size: 14.5px; color: #fff; background: #FF0000; padding: 12px 20px; border-radius: 999px; box-shadow: 0 12px 30px -10px rgba(255,0,0,.55); transition: transform .3s var(--ease); }
.socyt__cta svg { width: 17px; height: 17px; }
.socyt:hover .socyt__cta { transform: translateX(4px); }
@media (max-width: 760px) {
  .socwrap { grid-template-columns: 1fr; max-width: 440px; }
  .socyt { flex-direction: column; text-align: center; }
  .socyt__txt { text-align: center; }
}

/* ===== FAQ ===== */
.faq { padding: 100px 0; }
.faq__inner { max-width: 820px; margin: 0 auto; }
.accordion { display: grid; gap: 12px; }
.acc-item { border: 1px solid var(--line); border-radius: var(--radius-sm); background: rgba(255,255,255,.025); overflow: hidden; }
.acc-q { width: 100%; text-align: left; background: none; border: 0; color: #fff; font-size: 16.5px; font-weight: 600; padding: 20px 22px; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 16px; font-family: "Inter"; }
.acc-ic { color: var(--blue-2); font-size: 22px; transition: transform .3s var(--ease); flex-shrink: 0; }
.acc-item.open .acc-ic { transform: rotate(45deg); }
.acc-a { max-height: 0; overflow: hidden; transition: max-height .35s var(--ease); }
.acc-a p { padding: 0 22px 20px; color: var(--gray-2); }
/* ===== FAQ en mode chat ===== */
.faqchat { max-width: 680px; margin: 0 auto; background: #fff; border: 1px solid var(--l-brd); border-radius: 22px; box-shadow: 0 34px 80px -34px var(--blue-glow); overflow: hidden; }
.faqchat__head { display: flex; align-items: center; gap: 12px; padding: 16px 20px; border-bottom: 1px solid var(--l-brd); background: #fbfcff; }
.faqchat__ava { width: 40px; height: 40px; flex: none; border-radius: 12px; background: linear-gradient(180deg, var(--blue-2), var(--blue)); color: #fff; display: grid; place-items: center; font-family: "Sora","Inter",sans-serif; font-weight: 800; font-size: 17px; }
.faqchat__id strong { display: block; font-size: 15px; color: var(--l-txt); }
.faqchat__id span { display: flex; align-items: center; gap: 6px; font-size: 12px; color: #7a8499; }
.faqchat__id i { width: 7px; height: 7px; border-radius: 50%; background: #2bb673; }
.faqchat__body { padding: 20px; display: flex; flex-direction: column; gap: 12px; min-height: 150px; max-height: 400px; overflow-y: auto; }
.faqchat__row { display: flex; }
.faqchat__row--bot { justify-content: flex-start; }
.faqchat__row--user { justify-content: flex-end; }
.faqchat__bubble { max-width: 82%; font-size: 14.5px; line-height: 1.5; padding: 11px 14px; border-radius: 16px; }
.faqchat__bubble--bot { background: #f1f3f8; color: #3a4666; border-bottom-left-radius: 5px; }
.faqchat__bubble--user { background: linear-gradient(180deg, var(--blue-2), var(--blue)); color: #fff; border-bottom-right-radius: 5px; }
.faqchat__typing { display: inline-flex; gap: 4px; }
.faqchat__typing span { width: 7px; height: 7px; border-radius: 50%; background: #b6c0d6; animation: faqdot 1s infinite; }
.faqchat__typing span:nth-child(2) { animation-delay: .15s; }
.faqchat__typing span:nth-child(3) { animation-delay: .3s; }
@keyframes faqdot { 0%,60%,100% { opacity: .3; transform: translateY(0); } 30% { opacity: 1; transform: translateY(-3px); } }
.faqchat__chips { display: flex; flex-wrap: wrap; gap: 8px; padding: 16px 20px; border-top: 1px solid var(--l-brd); background: #fbfcff; }
.faqchat__chip { font-family: inherit; font-size: 13px; font-weight: 600; color: var(--blue); background: #fff; border: 1px solid rgba(63,95,230,.3); border-radius: 999px; padding: 8px 14px; cursor: pointer; transition: background .2s var(--ease), color .2s var(--ease), transform .2s var(--ease), border-color .2s var(--ease); }
.faqchat__chip:hover { background: var(--blue); color: #fff; border-color: var(--blue); transform: translateY(-2px); }
.faqchat__chip.is-asked { opacity: .38; pointer-events: none; text-decoration: line-through; }
.faqchat__cta { align-self: flex-start; margin-top: 2px; }
/* ===== Expert inline + panneau de chat latéral ===== */
.xprt { max-width: 640px; margin: 0 auto; background: #fff; border: 1px solid var(--l-brd); border-radius: 20px; box-shadow: 0 34px 80px -34px var(--blue-glow); padding: 26px; }
.xprt__eyebrow { display: inline-block; font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--blue); }
.xprt__title { font-family: "Sora","Inter",sans-serif; font-size: 20px; font-weight: 700; color: var(--l-txt); margin: 10px 0 18px; line-height: 1.25; }
.xprt__chips { display: flex; flex-direction: column; gap: 10px; margin-bottom: 16px; }
.xprt__chip { display: flex; align-items: center; gap: 10px; text-align: left; width: 100%; font-family: inherit; font-size: 14.5px; font-weight: 500; color: #44506e; background: #f1f3f8; border: 1px solid var(--l-brd); border-radius: 14px; padding: 13px 16px; cursor: pointer; transition: background .2s var(--ease), border-color .2s var(--ease), transform .2s var(--ease); }
.xprt__chip::before { content: "✦"; flex: none; color: var(--blue-2); font-size: 12px; }
.xprt__chip:hover { background: #fff; border-color: rgba(63,95,230,.4); transform: translateY(-1px); }
.xprt__input { display: flex; align-items: center; gap: 8px; border: 1px solid var(--l-brd); border-radius: 14px; padding: 6px 6px 6px 16px; }
.xprt__input input { flex: 1; min-width: 0; border: none; outline: none; background: none; font-family: inherit; font-size: 14.5px; color: var(--l-txt); }
.xprt__go { flex: none; width: 38px; height: 38px; border-radius: 11px; border: none; background: #f1f4fb; color: #44506e; cursor: pointer; display: grid; place-items: center; transition: background .2s var(--ease), color .2s var(--ease); }
.xprt__go:hover { background: var(--blue); color: #fff; }
.xprt__go svg { width: 18px; height: 18px; }
.xprt__by { text-align: center; font-size: 11px; color: #9aa4bf; margin-top: 16px; }
.xprt__by b { color: var(--l-soft); }
/* ===== FAQ : disposition asymétrique + titre surligné (marqueur) ===== */
.faq2 { display: grid; grid-template-columns: 1fr 1.04fr; gap: clamp(32px, 5vw, 64px); align-items: center; max-width: 1080px; margin: 0 auto; }
.faq2__intro { text-align: left; }
.faq2__kicker { display: inline-flex; align-items: center; gap: 9px; font-size: 12px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: var(--blue-2); }
.faq2__kicker i { width: 7px; height: 7px; border-radius: 50%; background: var(--blue-2); box-shadow: 0 0 0 4px rgba(63,95,230,.18); }
.faq2__title { font-family: "Sora","Inter",sans-serif; font-weight: 800; font-size: clamp(34px, 4.6vw, 56px); line-height: 1.08; letter-spacing: -.025em; color: #fff; text-align: left; margin: 16px 0 0; }
.faq2__hl { position: relative; white-space: nowrap; z-index: 0; }
.faq2__hl::before { content: ""; position: absolute; left: -6px; right: -6px; top: 52%; bottom: 5px; background: linear-gradient(90deg, var(--blue), var(--blue-2)); border-radius: 7px; transform: rotate(-1.4deg); z-index: -1; }
.faq2__sub { font-size: 16px; line-height: 1.6; color: var(--gray-2); max-width: 430px; margin: 18px 0 22px; }
.faq2__chips { display: flex; flex-wrap: wrap; gap: 10px; }
.faq2__chips span { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; color: var(--gray-2); background: rgba(255,255,255,.04); border: 1px solid var(--line-2); border-radius: 999px; padding: 8px 14px; }
.faq2__chips svg { width: 15px; height: 15px; flex: none; color: var(--blue-2); }
.faq2 .xprt { max-width: none; margin: 0; }
@media (max-width: 860px) {
  .faq2 { grid-template-columns: 1fr; gap: 30px; max-width: 560px; }
  .faq2__chips { justify-content: flex-start; }
}
.xdrawer { position: fixed; inset: 0; z-index: 1500; visibility: hidden; }
.xdrawer.open { visibility: visible; }
.xdrawer__backdrop { position: absolute; inset: 0; background: rgba(8,12,26,.34); opacity: 0; transition: opacity .3s var(--ease); }
.xdrawer.open .xdrawer__backdrop { opacity: 1; }
.xdrawer__panel { position: absolute; top: 0; right: 0; height: 100%; width: min(620px, 100%); background: #fff; display: flex; flex-direction: column; box-shadow: -30px 0 90px -30px rgba(10,20,48,.55); transform: translateX(100%); transition: transform .34s var(--ease); }
.xdrawer.open .xdrawer__panel { transform: none; }
.xdrawer__head { display: flex; align-items: center; gap: 12px; padding: 18px 20px; border-bottom: 1px solid var(--l-brd); flex: none; }
.xdrawer__ava { width: 44px; height: 44px; flex: none; border-radius: 13px; background: linear-gradient(180deg, var(--blue-2), var(--blue)); display: grid; place-items: center; }
.xdrawer__ava-e { width: 56%; height: 56%; background: #fff; -webkit-mask: url(../images/e-mark.png?v=2) center / contain no-repeat; mask: url(../images/e-mark.png?v=2) center / contain no-repeat; }
.xdrawer__id { flex: 1; min-width: 0; }
.xdrawer__id strong { display: block; font-size: 15.5px; color: var(--l-txt); }
.xdrawer__id span { display: flex; align-items: center; gap: 6px; font-size: 12.5px; color: #7a8499; }
.xdrawer__id i { width: 7px; height: 7px; border-radius: 50%; background: #2bb673; }
.xdrawer__cta { flex: none; font-size: 13px; font-weight: 600; color: #fff; background: linear-gradient(180deg, var(--blue-2), var(--blue)); border-radius: 999px; padding: 9px 16px; box-shadow: 0 8px 22px -8px var(--blue-glow); }
.xdrawer__close { flex: none; width: 36px; height: 36px; border-radius: 50%; border: none; background: var(--l-card); color: var(--l-txt); cursor: pointer; font-size: 13px; transition: background .2s; }
.xdrawer__close:hover { background: #e7ebf5; }
.xdrawer__body { flex: 1; min-height: 0; overflow-y: auto; padding: 22px; display: flex; flex-direction: column; gap: 14px; background: var(--l-bg); }
.xdrawer__row { display: flex; }
.xdrawer__row--bot { justify-content: flex-start; }
.xdrawer__row--user { justify-content: flex-end; }
.xdrawer__bubble { max-width: 80%; font-size: 14.5px; line-height: 1.55; padding: 13px 16px; border-radius: 16px; white-space: pre-line; }
.xdrawer__bubble--bot { background: #fff; border: 1px solid var(--l-brd); color: #3a4666; border-bottom-left-radius: 5px; }
.xdrawer__bubble--user { background: linear-gradient(180deg, var(--blue-2), var(--blue)); color: #fff; border-bottom-right-radius: 5px; }
.xdrawer__typing { display: inline-flex; gap: 4px; }
.xdrawer__typing span { width: 7px; height: 7px; border-radius: 50%; background: #b6c0d6; animation: faqdot 1s infinite; }
.xdrawer__typing span:nth-child(2) { animation-delay: .15s; }
.xdrawer__typing span:nth-child(3) { animation-delay: .3s; }
.xdrawer__input { display: flex; align-items: center; gap: 10px; padding: 14px 18px; border-top: 1px solid var(--l-brd); flex: none; }
.xdrawer__input input { flex: 1; min-width: 0; border: 1px solid var(--l-brd); border-radius: 999px; padding: 13px 18px; font-family: inherit; font-size: 14.5px; color: var(--l-txt); outline: none; }
.xdrawer__input input:focus { border-color: var(--blue-2); }
.xdrawer__send { flex: none; width: 44px; height: 44px; border-radius: 50%; border: none; background: linear-gradient(180deg, var(--blue-2), var(--blue)); color: #fff; cursor: pointer; display: grid; place-items: center; }
.xdrawer__send svg { width: 18px; height: 18px; }
.xdrawer__by { text-align: center; font-size: 11px; color: #9aa4bf; padding: 0 0 12px; flex: none; }
@media (max-width: 560px) { .xdrawer__panel { width: 100%; } .xdrawer__cta { display: none; } }

/* ===== FINAL CTA ===== */
.final-cta { padding: 90px 0; background: #070912; }
.final-cta__inner {
  text-align: center; max-width: 900px; margin: 0 auto; padding: 70px 30px;
  border-radius: 28px; border: 1px solid var(--line-2);
  background: radial-gradient(120% 140% at 50% 0%, rgba(29,52,196,.22), transparent 60%), linear-gradient(180deg, var(--navy-2), var(--bg-2));
  box-shadow: 0 40px 90px -30px rgba(0,0,0,.7);
}
.final-cta h2 { font-size: clamp(28px, 4.5vw, 46px); font-weight: 800; margin-bottom: 28px; }

/* ===== FOOTER ===== */
.footer { border-top: 1px solid var(--line); padding: 64px 0 30px; background: var(--bg-2); }
.footer__inner { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 40px; margin-bottom: 44px; }
.footer__brand p { color: var(--gray); font-size: 14.5px; margin-top: 14px; max-width: 280px; }
.footer__col h4 { font-size: 14px; margin-bottom: 16px; color: #fff; }
.footer__col a { display: block; color: var(--gray); font-size: 14.5px; margin-bottom: 10px; transition: color .2s; }
.footer__col a:hover { color: var(--blue-2); }
.footer__bottom { display: flex; justify-content: space-between; align-items: center; padding-top: 26px; border-top: 1px solid var(--line); color: var(--gray); font-size: 13.5px; }

/* ===== REVEAL ANIM ===== */
.reveal { opacity: 0; transform: translateY(26px); transition: opacity .7s var(--ease), transform .7s var(--ease); }
.reveal.in { opacity: 1; transform: none; }

/* ===== HERO SOCIAL / AVATARS ===== */
.nav__right { display: flex; align-items: center; gap: 14px; }
.hero__social { display: flex; align-items: center; gap: 14px; margin-bottom: 30px; flex-wrap: wrap; justify-content: center; }
.avatars { display: flex; }
.avatars__item {
  width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center;
  font-weight: 800; font-family: "Sora"; font-size: 14px; color: #fff;
  background: linear-gradient(180deg, var(--blue-2), var(--blue));
  border: 2px solid var(--bg); margin-left: -10px;
}
.avatars__item:first-child { margin-left: 0; }
.hero__social-txt { text-align: left; }
.hero__social-txt .stars { font-size: 14px; }
.hero__social-txt span { display: block; font-size: 13.5px; color: var(--gray); max-width: 320px; }

/* ===== FEATURED TESTIMONIALS (3 cartes) ===== */
.t-featured { padding: 70px 0 80px; position: relative; z-index: 1; }
.t-featured__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; max-width: 1080px; margin: 0 auto; }
/* CTA compact sous les 4 cartes */
.t-cta { text-align: center; max-width: 560px; margin: 50px auto 0; }
.t-cta__title { font-family: "Sora","Inter",sans-serif; font-size: clamp(21px, 2.2vw, 27px); font-weight: 700; line-height: 1.2; letter-spacing: -.02em; color: var(--l-txt); margin-bottom: 10px; }
.t-cta__sub { color: var(--l-soft); font-size: 15.5px; line-height: 1.6; margin: 0 auto 22px; }
/* flèche bouclée bleue, tracé piloté par le scroll */
.cta-arrow { position: absolute; left: calc(50% - 130px); bottom: -250px; width: 720px; height: 460px; pointer-events: none; z-index: 4; }
@media (max-width: 960px) { .cta-arrow { display: none; } }
.t-card {
  background: linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.012));
  border: 1px solid var(--line); border-radius: var(--radius); padding: 26px;
  display: flex; flex-direction: column; justify-content: space-between; gap: 22px;
}
.t-card__quote { font-size: 16px; color: var(--gray-2); }
.t-card__foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-top: 18px; border-top: 1px solid var(--line); }
.t-card__person { display: flex; align-items: center; gap: 11px; }
.t-card__person strong { display: block; font-size: 13.5px; }
.t-card__person span { font-size: 12.5px; color: var(--gray); }
.t-card__metric { font-family: "Sora"; font-weight: 800; font-size: 26px; color: var(--blue-2); text-align: right; line-height: 1; }
.t-card__metric small { display: block; font-family: "Inter"; font-weight: 500; font-size: 11px; color: var(--gray); margin-top: 4px; }
.avatar--sm { width: 40px; height: 40px; font-size: 15px; }
.t-card__stars { color: #f5a623; font-size: 13.5px; letter-spacing: 3px; line-height: 1; }
.t-card .avatar--sm { box-shadow: 0 0 0 4px rgba(63,95,230,.1), 0 7px 18px -7px rgba(63,95,230,.55); }
.avatar--ph { overflow: hidden; background: #0d1530; }
.avatar--ph img { width: 100%; height: 100%; object-fit: cover; display: block; }
.t-card__quote { line-height: 1.6; }
@media (max-width: 900px) { .t-featured__grid { grid-template-columns: 1fr; max-width: 480px; } }

/* ===== FEATURE DEEP-DIVES ===== */
.features { padding: 60px 0 40px; }
.feature { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; padding: 50px 22px; }
.feature--reverse .feature__visual { order: -1; }
.feature__list { list-style: none; display: grid; gap: 12px; margin: 22px 0 26px; }
.feature__list li { display: flex; align-items: center; gap: 12px; color: var(--gray-2); }
.feature__list strong { color: #fff; }

/* ===== MOCKUPS ===== */
.mock {
  background: linear-gradient(160deg, var(--navy-2), var(--bg-2));
  border: 1px solid var(--line-2); border-radius: var(--radius); padding: 20px;
  box-shadow: 0 40px 90px -30px rgba(0,0,0,.8);
}
.mock__head { display: flex; justify-content: space-between; align-items: center; font-weight: 600; font-size: 14.5px; margin-bottom: 16px; }
.mock__live { font-size: 12px; color: #4ade80; }
.mock__inbox-row { display: flex; align-items: center; gap: 12px; padding: 12px; border-radius: 12px; border: 1px solid var(--line); margin-bottom: 9px; background: rgba(255,255,255,.02); }
.mock__inbox-row--active { border-color: rgba(29,52,196,.5); background: rgba(29,52,196,.08); }
.chan { width: 32px; height: 32px; border-radius: 9px; display: grid; place-items: center; font-size: 14px; flex-shrink: 0; background: rgba(255,255,255,.06); }
.mock__inbox-txt { flex: 1; min-width: 0; }
.mock__inbox-txt strong { display: block; font-size: 13.5px; }
.mock__inbox-txt span { display: block; font-size: 12.5px; color: var(--gray); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tag { font-size: 11px; font-weight: 600; padding: 3px 9px; border-radius: 999px; background: rgba(255,255,255,.08); color: var(--gray-2); flex-shrink: 0; }
.tag--ai { background: rgba(29,52,196,.18); color: var(--blue-2); }
.mock__reply { margin-top: 14px; padding: 14px; border-radius: 12px; background: rgba(255,255,255,.03); border: 1px solid var(--line); }
.mock__reply-lbl { font-size: 11px; font-weight: 600; color: var(--blue-2); text-transform: uppercase; letter-spacing: .08em; }
.mock__reply p { font-size: 13.5px; color: var(--gray-2); margin: 8px 0 12px; }
.mock__reply-actions { display: flex; gap: 8px; }

.mock--dash .dash__grid { display: grid; grid-template-columns: repeat(2,1fr); gap: 12px; margin-bottom: 18px; }
.mock--dash .dash__bars { display: flex; align-items: flex-end; gap: 14px; height: 120px; }

.chat-bubble { max-width: 80%; padding: 11px 15px; border-radius: 16px; font-size: 13.5px; margin-bottom: 10px; line-height: 1.45; }
.chat-bubble--bot { background: rgba(255,255,255,.06); border: 1px solid var(--line); border-bottom-left-radius: 4px; }
.chat-bubble--user { background: linear-gradient(180deg, var(--blue-2), var(--blue)); color: #fff; margin-left: auto; border-bottom-right-radius: 4px; }
.chat-typing { display: flex; gap: 5px; padding: 12px 15px; width: fit-content; background: rgba(255,255,255,.06); border: 1px solid var(--line); border-radius: 16px; border-bottom-left-radius: 4px; }
.chat-typing span { width: 7px; height: 7px; border-radius: 50%; background: var(--gray); animation: blink 1.4s infinite both; }
.chat-typing span:nth-child(2) { animation-delay: .2s; }
.chat-typing span:nth-child(3) { animation-delay: .4s; }
@keyframes blink { 0%, 60%, 100% { opacity: .3; } 30% { opacity: 1; } }

/* ===== AGENTS MARQUEE ===== */
.agents { padding: 80px 0; background: linear-gradient(180deg, var(--bg-2), var(--bg)); }
.agents-marquee { overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent); mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent); }
.agents-marquee__track { display: flex; gap: 20px; width: max-content; animation: marquee-cards 40s linear infinite; padding: 6px 10px; }
.agents-marquee:hover .agents-marquee__track { animation-play-state: paused; }
.agents-marquee .card { width: 300px; flex-shrink: 0; }
.card { background: linear-gradient(180deg, rgba(255,255,255,.045), rgba(255,255,255,.012)); border: 1px solid var(--line); border-radius: var(--radius); padding: 28px; transition: transform .3s var(--ease), border-color .3s, box-shadow .3s; }
.card:hover { transform: translateY(-6px); border-color: rgba(29,52,196,.4); box-shadow: 0 30px 60px -25px rgba(29,52,196,.4); }
.card__icon { font-size: 28px; width: 54px; height: 54px; display: grid; place-items: center; border-radius: 14px; background: rgba(29,52,196,.12); border: 1px solid var(--line-2); margin-bottom: 16px; }
.card h3 { font-size: 19px; margin-bottom: 9px; }
.card p { color: var(--gray-2); font-size: 14.5px; }

/* ===== INTEGRATIONS ===== */
.integrations { padding: 96px 0; }
/* ===== Console de branchement (integrations) ===== */
.intg { display: grid; grid-template-columns: 38% 62%; gap: clamp(32px, 5vw, 56px); align-items: start; }
.intg__aside { position: sticky; top: 110px; display: grid; grid-template-columns: auto 1fr; gap: 20px; }
.intg__eyebrow { writing-mode: vertical-rl; transform: rotate(180deg); text-transform: uppercase; letter-spacing: .26em; font-weight: 700; font-size: 12px; color: var(--blue); align-self: start; }
.intg__title { text-align: left; font-family: "Sora","Inter",sans-serif; font-weight: 800; font-size: clamp(30px, 4.4vw, 46px); line-height: 1.06; letter-spacing: -.02em; color: var(--l-txt); margin: 0; }
.intg__sub { text-align: left; color: var(--l-soft); font-size: 15.5px; line-height: 1.6; max-width: 380px; margin: 16px 0 22px; }
.intg__counter { display: flex; align-items: baseline; gap: 6px; margin-bottom: 9px; }
.intg__counter b { font-family: "Sora","Inter",sans-serif; font-weight: 800; font-size: 30px; color: var(--blue); }
.intg__counter span { font-size: 13px; color: var(--l-soft); font-weight: 600; }
.intg__bar { height: 6px; border-radius: 4px; background: var(--l-brd2); overflow: hidden; max-width: 320px; }
.intg__bar i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--blue-2), var(--blue)); border-radius: 4px; }
.intg__pills { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 20px; }
.intg__pills span { font-size: 12px; font-weight: 600; color: var(--l-soft); background: var(--l-card); border: 1px solid var(--l-brd); border-radius: 999px; padding: 6px 12px; }
.intg__win { background: #fff; border: 1px solid var(--l-brd); border-radius: var(--radius); box-shadow: 0 30px 60px -30px var(--blue-glow); overflow: hidden; }
.intg__bartop { display: flex; align-items: center; gap: 7px; padding: 13px 16px; border-bottom: 1px solid var(--l-brd); background: #fbfcff; }
.intg__dot { width: 10px; height: 10px; border-radius: 50%; background: #d7deec; }
.intg__bartop em { margin-left: 8px; font-style: normal; font-size: 12px; color: #9aa4bf; font-weight: 500; }
.intg__rows { list-style: none; margin: 0; padding: 0; }
.intg__row { display: flex; align-items: center; gap: 14px; padding: 15px 18px; border-bottom: 1px solid var(--l-brd); }
.intg__row:last-child { border-bottom: none; }
.intg__row:hover { background: var(--l-card); }
.intg__ic { width: 40px; height: 40px; flex: none; display: grid; place-items: center; background: var(--l-card); border: 1px solid var(--l-brd); border-radius: 11px; }
.intg__ic-svg { width: 24px; height: 24px; display: block; filter: grayscale(1); opacity: .45; }
.intg__row:hover .intg__ic-svg { filter: grayscale(0); opacity: 1; transition: filter .2s var(--ease), opacity .2s var(--ease); }
.intg__txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.intg__name { font-family: "Sora","Inter",sans-serif; font-weight: 700; font-size: 14.5px; color: var(--l-txt); }
.intg__state { font-size: 12px; color: #9aa4bf; }
.intg__row.is-on .intg__state { color: #1faa59; font-weight: 600; }
.intg__badge { position: relative; width: 22px; height: 22px; flex: none; display: grid; place-items: center; }
.intg__spin { position: absolute; width: 18px; height: 18px; border: 2px solid var(--l-brd); border-top-color: var(--blue-2); border-radius: 50%; opacity: 0; }
.intg__check { position: absolute; width: 22px; height: 22px; transform: scale(0); transform-origin: center; }
.intg__sys { display: flex; align-items: center; gap: 12px; padding: 14px 18px; border-top: 1px solid var(--l-brd); background: #fbfcff; }
.intg__sys > span:first-child { font-size: 12.5px; color: var(--l-soft); flex: 1; min-width: 0; }
.intg__sys-bar { width: 88px; height: 5px; border-radius: 3px; background: var(--l-brd2); overflow: hidden; flex: none; }
.intg__sys-bar i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--blue-2), var(--blue)); }
.intg__sys b { font-family: "Sora","Inter",sans-serif; font-weight: 800; font-size: 13px; color: var(--blue); flex: none; }
.intg__ok { font-size: 12px; font-weight: 700; color: #1faa59; opacity: 0; flex: none; }

/* ===== TESTIMONIALS WALL ===== */
.wall { padding: 90px 0; background: linear-gradient(180deg, var(--bg), var(--bg-2)); }
.wall__grid { columns: 3; column-gap: 18px; }
.wall__card { break-inside: avoid; margin-bottom: 18px; padding: 22px; border-radius: var(--radius); background: linear-gradient(180deg, rgba(255,255,255,.045), rgba(255,255,255,.012)); border: 1px solid var(--line); }
.wall__card .stars { font-size: 14px; margin-bottom: 10px; }
.wall__card p { color: var(--gray-2); font-size: 14.5px; margin-bottom: 16px; }
.wall__who { display: flex; align-items: center; gap: 10px; }
.wall__who strong { display: block; font-size: 13.5px; }
.wall__who span { font-size: 12.5px; color: var(--gray); }

/* ===================================================================
   SECTIONS CLAIRES (alternance noir / blanc, style trendtrack)
   =================================================================== */
.sec--light { background: var(--l-bg); color: var(--l-txt); }
/* Coins arrondis du grand bloc clair (style TrendTrack) : 1re section claire
   (story) arrondie en haut, dernière (cases) en bas → tout le bloc = 1 panneau. */
.t-featured.sec--light { border-top-left-radius: 32px; border-top-right-radius: 32px; }
.method.sec--light { border-bottom-left-radius: 32px; border-bottom-right-radius: 32px; }
.sec--light h1, .sec--light h2, .sec--light h3, .sec--light h4 { color: var(--l-txt); }
.sec--light .eyebrow { color: var(--blue); }
.sec--light .section-sub { color: var(--l-soft); }
.sec--light .grad {
  background: linear-gradient(100deg, var(--blue), #3f5fe6 70%, #1d34c4);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
.sec--light .check { background: rgba(29,52,196,.12); color: var(--blue); }

/* boutons sur fond clair */
.sec--light .btn--ghost { background: #fff; color: var(--l-txt); border-color: var(--l-brd2); }
.sec--light .btn--ghost:hover { background: var(--l-card); }

/* STORY clair */
/* Section fondateurs en blanc (coins haut arrondis gérés plus haut) */
.sec--light.story { background: var(--l-bg); }
.sec--light .story__content p { color: var(--l-soft); }
.sec--light .story__content p strong { color: var(--l-txt); }
/* Photos plus visibles sur fond blanc : cartes claires, ombre douce, plus grandes */
.sec--light .story__photo {
  border: 1px solid var(--l-brd2);
  background: var(--l-card);
  box-shadow: 0 26px 60px -22px rgba(11, 16, 32, 0.40);
}
.sec--light .story__photo.photo-empty::after {
  color: var(--l-soft);
  background: repeating-linear-gradient(45deg,
    rgba(11,16,32,.04), rgba(11,16,32,.04) 12px,
    rgba(11,16,32,.07) 12px, rgba(11,16,32,.07) 24px);
}
.sec--light .story__points li { color: var(--l-soft); }

/* FEATURE clair — fond pleine largeur via pseudo-élément */
.feature.sec--light { position: relative; background: transparent; }
.feature.sec--light::before {
  content: ""; position: absolute; top: 0; bottom: 0; left: 50%;
  transform: translateX(-50%); width: 100vw; background: var(--l-bg); z-index: -1;
}
.feature.sec--light .feature__list li { color: var(--l-soft); }
.feature.sec--light .feature__list strong { color: var(--l-txt); }

/* INTEGRATIONS clair */
.sec--light .logo-chip { background: var(--l-card); border-color: var(--l-brd); color: var(--l-soft); }
.sec--light .logo-chip:hover { color: var(--l-txt); border-color: var(--blue); }

/* METHOD clair */
.sec--light.method { background: var(--l-bg); }
.sec--light .step { background: var(--l-card); border-color: var(--l-brd); }
.sec--light .step__num { color: var(--blue); }
.sec--light .step h3 { color: var(--l-txt); }
.sec--light .step p { color: var(--l-soft); }
/* ===== Rail de progression (methode) ===== */
.rail { position: relative; display: grid; grid-template-columns: repeat(5, 1fr); gap: 18px; margin-top: 10px; }
.rail__track, .rail__fill { position: absolute; top: 20.5px; height: 3px; border-radius: 3px; }
.rail__track { left: 10%; right: 10%; background: var(--l-brd2); }
.rail__fill { left: 10%; width: 0; background: linear-gradient(90deg, var(--blue-2), var(--blue)); }
.rail__pulse { position: absolute; top: 22px; left: 10%; width: 11px; height: 11px; margin-left: -5.5px; margin-top: -5.5px; border-radius: 50%; background: var(--blue-2); box-shadow: 0 0 0 5px rgba(63,95,230,.18), 0 0 14px var(--blue-glow); opacity: 0; }
.rstep { position: relative; z-index: 1; background: var(--l-card); border: 1px solid var(--l-brd); border-radius: var(--radius); padding: 54px 22px 24px; transition: transform .35s var(--ease), border-color .35s var(--ease), box-shadow .35s var(--ease); }
.rstep__node { position: absolute; top: 22px; left: 22px; transform: translateY(-50%); width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; background: #fff; border: 2px solid var(--l-brd2); color: var(--blue); font-family: "Sora","Inter",sans-serif; font-weight: 800; font-size: 15px; z-index: 2; transition: transform .35s var(--ease), background .35s var(--ease), box-shadow .35s var(--ease), border-color .35s var(--ease); }
.rstep__num, .rstep__check { grid-area: 1 / 1; transition: opacity .25s; }
.rstep__check { width: 20px; height: 20px; color: #fff; opacity: 0; }
.rstep__milestone { display: inline-flex; align-items: center; font-size: 12px; font-weight: 600; color: var(--blue); background: rgba(63,95,230,.10); border: 1px solid rgba(63,95,230,.18); border-radius: 999px; padding: 4px 11px; margin-bottom: 12px; transition: color .35s, background .35s, border-color .35s; }
.rstep h3 { font-family: "Sora","Inter",sans-serif; font-size: 18px; color: var(--l-txt); margin: 0 0 8px; transition: color .35s; }
.rstep p { color: var(--l-soft); font-size: 14.5px; line-height: 1.55; margin: 0 0 16px; }
.rstep__meter { display: flex; align-items: center; gap: 10px; }
.rstep__meter i { flex: 1; height: 5px; border-radius: 3px; background: var(--l-brd2); position: relative; overflow: hidden; }
.rstep__meter i::after { content: ""; position: absolute; inset: 0 auto 0 0; width: var(--mp, 0%); background: linear-gradient(90deg, var(--blue-2), var(--blue)); border-radius: 3px; }
.rstep__meter b { font-family: "Sora","Inter",sans-serif; font-weight: 800; font-size: 13px; color: var(--blue); min-width: 38px; text-align: right; }
.rstep.is-on { transform: translateY(-6px); border-color: rgba(63,95,230,.35); box-shadow: 0 18px 40px -22px var(--blue-glow); }
.rstep.is-on .rstep__node { background: linear-gradient(180deg, var(--blue-2), var(--blue)); border-color: transparent; color: #fff; transform: translateY(-50%) scale(1.06); box-shadow: 0 0 0 6px rgba(63,95,230,.14), 0 10px 24px -8px var(--blue-glow); }
.rstep.is-on .rstep__num { opacity: 0; }
.rstep.is-on .rstep__check { opacity: 1; }
.rstep.is-on .rstep__milestone { color: #fff; background: var(--blue-2); border-color: transparent; }
.rstep.is-on h3 { color: var(--blue); }

/* WALL clair */
.sec--light.wall { background: var(--l-bg); }
.sec--light .wall__card { background: var(--l-card); border-color: var(--l-brd); }
.sec--light .wall__card p { color: var(--l-soft); }
.sec--light .wall__who strong { color: var(--l-txt); }
.sec--light .wall__who span { color: #6b7493; }

/* FAQ clair */
.sec--light .acc-item { background: var(--l-card); border-color: var(--l-brd); }
.sec--light .acc-q { color: var(--l-txt); }
.sec--light .acc-ic { color: var(--blue); }
.sec--light .acc-a p { color: var(--l-soft); }

/* TÉMOIGNAGES VEDETTES clairs */
.sec--light .t-card {
  background: var(--l-card); border-color: var(--l-brd);
  box-shadow: 0 14px 40px -18px rgba(20, 32, 70, 0.22), 0 3px 10px -6px rgba(20, 32, 70, 0.12);
  transition: box-shadow .35s var(--ease), transform .35s var(--ease);
}
.sec--light .t-card:hover {
  box-shadow: 0 22px 54px -20px rgba(20, 32, 70, 0.3), 0 4px 12px -6px rgba(20, 32, 70, 0.14);
  transform: translateY(-3px);
}
.sec--light .t-card__quote { color: var(--l-soft); }
.sec--light .t-card__foot { border-top-color: var(--l-brd); }
.sec--light .t-card__person strong { color: var(--l-txt); }
.sec--light .t-card__person span { color: #6b7493; }
.sec--light .t-card__metric { color: var(--blue); }

/* CARTES AGENTS claires */
.sec--light .card { background: var(--l-card); border-color: var(--l-brd); }
.sec--light .card h3 { color: var(--l-txt); }
.sec--light .card p { color: var(--l-soft); }
.sec--light .card__icon { background: rgba(29,52,196,.10); border-color: var(--l-brd); }
.sec--light .card:hover { border-color: var(--blue); box-shadow: 0 26px 55px -28px rgba(29,52,196,.30); }

/* CAS CLIENTS clairs */
.sec--light .case-card { background: var(--l-card); border-color: var(--l-brd); }
.sec--light .case-card__top strong { color: var(--l-txt); }
.sec--light .case-card__top span { color: #6b7493; }
.sec--light .case-card p { color: var(--l-soft); }
.sec--light .case-card__stat { border-top-color: var(--l-brd); color: var(--l-soft); }
.sec--light .case-card__stat strong { color: var(--blue); }

/* BOOKING clair */
.sec--light .booking__card {
  background: var(--l-card); border-color: var(--l-brd);
  box-shadow: 0 20px 54px -24px rgba(20, 32, 70, 0.26), 0 4px 12px -6px rgba(20, 32, 70, 0.12);
}
.sec--light .booking__card p { color: var(--l-soft); }

/* YOUTUBE clair (vignettes restent sombres comme une vraie vidéo) */
.sec--light .yt-card__title { color: var(--l-soft); }

/* ===== RESPONSIVE ===== */
@media (max-width: 940px) {
  .intg { grid-template-columns: 1fr; gap: 30px; }
  .intg__aside { position: static; grid-template-columns: 1fr; gap: 12px; }
  .intg__eyebrow { writing-mode: horizontal-tb; transform: none; }
  .intg__win { max-width: 560px; margin: 0 auto; width: 100%; }
  .nav__links, .nav__cta { display: none; }
  .nav__burger { display: flex; }
  .nav__links.open { display: flex; position: absolute; top: 72px; left: 0; right: 0; flex-direction: column; gap: 0; background: var(--bg-2); border-bottom: 1px solid var(--line); padding: 10px 22px 18px; }
  .nav__links.open a { padding: 12px 0; border-bottom: 1px solid var(--line); }
  .story__inner, .interface__inner { grid-template-columns: 1fr; }
  .story__media { max-width: 480px; margin: 0 auto; }
  .benefits, .cards, .steps { grid-template-columns: repeat(2,1fr); }
  .rail { grid-template-columns: 1fr; gap: 0; }
  .rail__track, .rail__fill { top: 12.5%; left: 21px; width: 3px; height: auto; right: auto; }
  .rail__track { bottom: 12.5%; }
  .rail__fill { height: 0; background: linear-gradient(180deg, var(--blue-2), var(--blue)); }
  .rail__pulse { left: 21px; }
  .rstep { display: grid; grid-template-columns: 44px 1fr; column-gap: 18px; align-items: start; padding: 16px 0; background: transparent; border: none; border-radius: 0; }
  .rstep + .rstep { margin-top: 4px; }
  .rstep__node { position: relative; top: auto; left: auto; transform: none; grid-column: 1; grid-row: 1 / -1; }
  .rstep__milestone, .rstep h3, .rstep p, .rstep__meter { grid-column: 2; }
  .rstep__milestone { justify-self: start; margin-top: 6px; }
  .rstep.is-on { transform: none; box-shadow: none; border: none; }
  .rstep.is-on .rstep__node { transform: scale(1.06); }
  .footer__inner { grid-template-columns: 1fr 1fr; }
  .section-head { margin-bottom: 40px; }
  .t-featured__grid { grid-template-columns: 1fr; }
  .feature { grid-template-columns: 1fr; gap: 32px; padding: 36px 22px; }
  .feature--reverse .feature__visual { order: 0; }
  .logo-grid { grid-template-columns: repeat(3, 1fr); }
  .wall__grid { columns: 2; }
}
@media (max-width: 560px) {
  .hero { padding-top: 120px; }
  .benefits, .cards, .steps, .footer__inner { grid-template-columns: 1fr; }
  .intg__row { padding: 12px 14px; }
  .intg__ic { width: 34px; height: 34px; }
  .case-card { width: 280px; }
  .yt-card { width: 310px; }
  .footer__bottom { flex-direction: column; gap: 10px; text-align: center; }
  .story__media { min-height: 400px; }
  .wall__grid { columns: 1; }
  .logo-grid { grid-template-columns: repeat(2, 1fr); }
  .agents-marquee .card { width: 260px; }
}