/* ===================================================================
   ENVISION IA — Design System
   Couleurs : noir / bleu foncé / blanc + accent bleu électrique
   =================================================================== */
:root {
  --black: #05060a;
  --bg: #070912;
  --bg-2: #0a0e1c;
  --navy: #0b1430;
  /* bleu nuit assombri de la zone bas de page : même teinte que --navy
     (rapport G/B et R/B conservés), luminance abaissée d'environ 30% */
  --navy-deep: #080e22;
  --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;
}
@supports (overflow-x: clip) {
  /* clip au lieu de hidden : même protection contre les débordements
     horizontaux, mais sans casser position: sticky (rail des pages projet). */
  body { overflow-x: clip; }
}

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

/* ---------- roulement des libellés ----------
   Repris de la référence : le libellé est enfermé dans une fenêtre d'une
   hauteur de ligne et porte une ombre portée décalée d'exactement cette même
   hauteur. Au survol la lettre monte, son ombre prend sa place — la seconde
   copie n'existe donc pas dans le document, rien n'est dupliqué pour les
   lecteurs d'écran ni pour l'indexation. Le découpage en caractères est posé
   par script.js ; sans lui, le libellé reste un libellé normal.
   La courbe est celle déjà employée par les autres transitions du site. */
.ev-roll {
  display: inline-flex; height: 1.4em; overflow: hidden;
  text-shadow: 0 1.4em;
  vertical-align: bottom;
}
.ev-roll__c {
  display: inline-block;
  transition: transform .46s cubic-bezier(.66, .01, .17, .97);
  transition-delay: calc(var(--i) * 18ms);
}
a:hover .ev-roll__c,
a:focus-visible .ev-roll__c,
button:hover .ev-roll__c,
button:focus-visible .ev-roll__c { transform: translateY(-1.4em); }

@media (prefers-reduced-motion: reduce) {
  .ev-roll__c { transition: none; }
}

/* 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: 175px 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;
  /* Cette couche couvre TOUTE la zone sombre de l'accueil (~1836 px), pas
     seulement le titre : c'est elle qu'on voit derrière le hero, les badges
     et le bandeau défilant. Elle était en noir pur, ce qui tranchait avec le
     pied de page. Même valeur que .footer (--bg-2) : la page n'a plus qu'un
     seul fond sombre, du haut jusqu'en bas. */
  background: var(--bg-2);
}

/* ===================================================================
   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: 14px; margin: 49px 0 0;
}
.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: 14px; 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; }
/* Mobile : les libellés longs peuvent revenir à la ligne dans la pastille */
@media (max-width: 600px) {
  .tt-tags { gap: 10px; margin-top: 32px; }
  .tt-tag { white-space: normal; font-size: 13px; line-height: 1.35; text-align: left; }
}

/* ===== 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: 42px 0 0; }
.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: 45px;
  -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: 38px; }
/* text-wrap: balance => la phrase se répartit d'elle-même en lignes de longueur
   voisine, sans <br> forcé. Typographie, taille, couleur et largeur inchangées. */
.hero__sub { max-width: 640px; color: var(--gray); font-size: clamp(15px, 1.45vw, 17px); line-height: 1.88; margin: 0 auto; text-wrap: balance; }
.hero__sub strong { color: #fff; }
/* Accent bleu de marque sur la 2e phrase de la description Hero.
   Couleur = --blue-2, le bleu déjà utilisé pour tous les textes accentués
   du site. Typographie, taille, graisse et interlignage inchangés. */
.hero__sub .accent { color: var(--blue-2); display: block; }
/* Secteurs ciblés : taille remontée et contraste rétabli (blanc cassé) pour
   redevenir lisible, tout en restant un cran sous le CTA. Police inchangée
   (Inter héritée du body, comme depuis l'origine). */
.hero__sectors { max-width: 620px; color: rgba(255,255,255,.88); font-size: clamp(13px, 1.2vw, 14px); line-height: 1.6; letter-spacing: .01em; margin: 28px auto 0; }
.hero__sectors strong { color: #fff; font-weight: 600; }
.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: 44px; }
/* Mobile : respirations de la Hero resserrées (doit rester APRÈS les règles de base) */
@media (max-width: 600px) {
  /* Incréments volontairement plus faibles qu'en desktop : la Hero mobile est
     déjà haute (titre 4 lignes + description 6 lignes), il faut garder le CTA
     le plus haut possible. */
  .badge { margin-bottom: 28px; }
  .hero__title { margin-bottom: 25px; }
  .tt-cta-wrap { margin-top: 28px; }
  .hero__sectors { margin-top: 19px; }
  /* la vidéo remonte aussi sur mobile ; les autres écarts restent inchangés,
     ils sont déjà au plus serré pour garder le CTA haut dans l'écran */
  .hero__video { margin-top: 38px; }
}
.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: 10.5px; font-weight: 500; color: rgba(255, 255, 255, 0.60);
  margin-top: 10px; line-height: 1.4; letter-spacing: 0.01em;
  white-space: nowrap;
}
/* Ligne 2 — résultat chiffré : l'élément de preuve, immédiatement lisible.
   Hauteur réservée de 2 lignes : un libellé long (Sofia) passe sur 2 lignes
   sans décaler la hauteur des autres cartes ni casser l'alignement. */
.endorse__stat {
  font-family: "Sora", "Inter", sans-serif;
  font-size: 12.5px; font-weight: 600; color: #fff;
  margin-top: 4px; line-height: 1.3; letter-spacing: 0.01em;
  min-height: 2.6em; text-wrap: balance;
}
/* 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; }
  /* carte élargie : indispensable pour tenir "Entrepreneur international"
     sur une seule ligne à une taille encore lisible (marquee => sans impact layout) */
  .endorse__card { width: 146px; padding: 9px 8px 11px; animation: none !important; opacity: 1 !important; transform: none !important; }
  .endorse__photo { width: 96px; height: 96px; aspect-ratio: auto; margin: 0 auto 7px; }
  .endorse__name { font-size: 12.5px; }
  .endorse__sub { font-size: 9.5px; margin-top: 6px; line-height: 1.35; }
  .endorse__stat { font-size: 10.5px; margin-top: 3px; }
  .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 ===== */
/* Section "Les humains derrière l'IA" — intégrée au flux sombre du site.
   Fond = var(--bg) (identique au body) : aucun bord dur ni en haut ni en bas,
   la section se fond dans la page au lieu de former un bloc noir posé.
   Rythme vertical aligné sur .youtube (100px) et .faq (100px). */
/* ===== ZONE BLEU NUIT CONTINUE =====================================
   Fondateurs → Vidéos & podcasts → Suivez l'aventure → FAQ.
   Les quatre sections sont contiguës (0px d'écart) et reçoivent la même
   background-color : une seule surface uniforme, sans dégradé ni couture.
   Une seule déclaration pour les quatre => impossible de les désynchroniser. */
.story, .youtube, .socials, .faq { background-color: var(--navy-deep); }

/* La section claire juste au-dessus a des coins bas arrondis de 32px qui
   laissent voir le fond du body. Sans ce calque, deux encoches plus sombres
   apparaîtraient à l'entrée de la zone. z-index négatif => il est peint sous
   les fonds de blocs, donc masqué par le blanc sauf dans les coins. */
.story { position: relative; padding: 100px 0 40px; }
.story::before {
  content: ""; position: absolute; left: 0; right: 0; top: -40px; height: 40px;
  background: var(--navy-deep); z-index: -1; pointer-events: none;
}
/* ===== 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);
}
.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) ===== */
/* plus de surcharge de gabarit : la section utilise le .container standard
   (--maxw), donc le même axe et la même largeur que YouTube, Réseaux et FAQ */
.fdx { max-width: var(--maxw); }
.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;
}
/* échelle de titre identique à .ythead__title et .faq2__title (sections voisines) */
.fdx .fdx__bigtitle {
  font-family: "Sora","Inter",sans-serif; font-weight: 800; letter-spacing: -.025em;
  font-size: clamp(34px, 4.6vw, 56px); line-height: 1.08; 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) */
/* largeur alignée sur .container (--maxw) : plus de débordement hors gabarit */
.fdx__trio { display: grid; grid-template-columns: 1.1fr 1fr 1.1fr; gap: clamp(24px, 3vw, 48px); align-items: center; max-width: none; margin: 40px auto 0; }
/* cadres photo : même langage que les cartes du site (rayon --radius, filet --line-2) */
.fdx__pic {
  width: 100%; border-radius: var(--radius);
  border: 1px solid var(--line-2);
  box-shadow: 0 40px 90px -30px rgba(0,0,0,.8), 0 0 0 1px rgba(29,52,196,.10);
}
.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), border-color .4s var(--ease); }
/* hover calé sur .card:hover du reste du site */
.fdx__pic:hover { transform: translateY(-7px); border-color: rgba(29,52,196,.40); box-shadow: 0 30px 60px -25px rgba(29,52,196,.40); }
@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 WhatsApp flottant (bouton + mini fenêtre de contact) ===== */
.wafab { position: fixed; right: 40px; bottom: 40px; z-index: 1200; font-family: "Inter", sans-serif; display: flex; flex-direction: column; align-items: flex-end; gap: 14px; }

/* Bouton : rond, bleu de marque, glow identique aux CTA du site */
/* Cercle plein au bleu de la marque : le haut est exactement --blue-2 (#3f5fe6),
   la teinte de « Alors nous l'automatisons » du hero, et le bas descend sur
   --blue (#1d34c4) — c'est le dégradé des CTA du site (.btn--primary), donc le
   bouton appartient visiblement à la même famille. Il se détache aussi bien du
   blanc des sections claires que du bleu nuit du pied de page.
   Aucune bordure sur le cercle : le seul contour est l'anneau de points, posé
   juste à l'intérieur du bord (.wafab__ring). */
.wafab__btn {
  position: relative; width: 80px; height: 80px; flex: none;
  border: none; padding: 0; border-radius: 50%;
  background: linear-gradient(180deg, var(--blue-2) 0%, var(--blue) 100%);
  color: #fff; cursor: pointer; display: grid; place-items: center;
  /* ombre douce, diffuse, légèrement vers le bas : l'objet est posé
     au-dessus de la page, il ne flotte pas dans un halo. */
  box-shadow:
    0 2px 4px rgba(0, 0, 0, .22),
    0 8px 18px rgba(0, 0, 0, .20),
    0 18px 38px rgba(0, 0, 0, .16);
  /* Le déplacement magnétique passe par ces variables : le module les écrit
     image par image. La transition ne sert qu'aux cas SANS module (tactile,
     mouvement réduit, JS coupé) — sinon elle doublerait l'interpolation. */
  transform: translate3d(var(--mx, 0px), var(--my, 0px), 0) scale(var(--ms, 1));
  transition: transform .5s cubic-bezier(.16, 1, .3, 1), box-shadow .3s var(--ease);
  -webkit-tap-highlight-color: transparent;
}
.wafab__btn.is-magnetic { transition: box-shadow .3s var(--ease); will-change: transform; }
.wafab__btn:active { --ms: .94; }
@media (hover: hover) and (pointer: fine) {
  .wafab__btn:hover {
    box-shadow:
      0 3px 6px rgba(0, 0, 0, .24),
      0 10px 22px rgba(0, 0, 0, .22),
      0 24px 48px rgba(0, 0, 0, .18);
  }
}
.wafab__btn:focus-visible { outline: 2px solid #fff; outline-offset: 4px; }
/* L'icône suit un peu plus que le cercle : c'est ce léger écart qui donne
   la sensation de joystick plutôt que de bloc qui glisse. */
.wafab__core {
  grid-area: 1 / 1; display: grid; place-items: center; pointer-events: none;
  transform: translate3d(var(--ix, 0px), var(--iy, 0px), 0);
}
.wafab__ico {
  grid-area: 1 / 1; width: 35px; height: 35px; display: block;
  transition: opacity .24s var(--ease), transform .24s var(--ease);
}
.wafab__ico--close { opacity: 0; transform: rotate(-45deg) scale(.72); }
.wafab.is-open .wafab__ico--wa { opacity: 0; transform: rotate(45deg) scale(.72); }
.wafab.is-open .wafab__ico--close { opacity: 1; transform: none; }

/* Anneau de points verts À L'INTÉRIEUR du cercle bleu.
   ------------------------------------------------------------------------
   Cotes de la référence, relevées dans son code et pas à l'œil : son masque
   est un tracé de 79 px sur une boîte de 81, elle-même en retrait de 2 px
   dans un bouton de 80 — le trait tombe donc à ~3 px du bord, stroke-width 1,
   stroke-dasharray « 1 3 ». On reprend exactement cela.
   La boîte de l'anneau vaut donc 80 − 3 − 3 = 74 px, et le viewBox fait 74 :
   1 unité = 1 px, les cotes ci-dessous sont littérales et non approchées.
   Deux précautions :
   - Taille donnée en calc() et pas par un inset seul. Un SVG est un élément
     remplacé : avec width/height:auto certains moteurs (WebKit) retombent sur
     la taille intrinsèque du viewBox et ancrent l'anneau en haut à gauche.
   - pathLength="228" : la circonférence réelle vaut ~229,3 px, soit 57,3 motifs
     de 4 px. Normaliser à 228 donne 57 motifs pile, donc aucun raccord
     irrégulier — un défaut qui, sur un anneau qui tourne, se remarquerait.
   L'anneau est un enfant du bouton : il hérite donc du translate3d/scale
   magnétique et suit le joystick, tandis que son propre transform ne porte
   que la rotation. Les deux ne se marchent jamais dessus. */
.wafab__ring {
  position: absolute; top: 3px; left: 3px;
  width: calc(100% - 6px); height: calc(100% - 6px);
  overflow: visible; pointer-events: none;
  fill: none; stroke: #6fe3a2; stroke-width: 1; stroke-linecap: butt;
  stroke-dasharray: 1 3;
  opacity: .65;
  transform-origin: 50% 50%;
  animation: wafabspin 10s linear infinite;
  transition: opacity .32s var(--ease);
}
@media (hover: hover) and (pointer: fine) {
  /* Au survol l'anneau se densifie un peu — mais ne change pas de vitesse. */
  .wafab__btn:hover .wafab__ring { opacity: 1; }
}
@keyframes wafabspin { to { transform: rotate(360deg); } }

/* Mini fenêtre de conversation */
.wachat { width: 320px; max-width: calc(100vw - 44px); background: #fff; border: 1px solid var(--l-brd); border-radius: 20px; overflow: hidden; box-shadow: 0 34px 80px -24px rgba(10,20,48,.5); transform-origin: bottom right; opacity: 0; visibility: hidden; transform: translateY(14px) scale(.97); transition: opacity .26s var(--ease), transform .26s var(--ease), visibility .26s; }
.wafab.is-open .wachat { opacity: 1; visibility: visible; transform: none; }
.wachat__head { display: flex; align-items: center; gap: 11px; padding: 14px 15px; background: #0b1220; color: #fff; }
/* Avatar : initiales tant que la photo de profil n'a pas été déposée dans
   assets/images/ismael-profil.jpg. Dès que le fichier existe, le script applique
   la photo et .has-photo masque les initiales (cadrage centré sur le visage). */
.wachat__ava { position: relative; width: 46px; height: 46px; flex: none; border-radius: 50%; background: linear-gradient(180deg, var(--blue-2), var(--blue)); display: grid; place-items: center; font-family: "Sora", "Inter", sans-serif; font-size: 15px; font-weight: 700; letter-spacing: .02em; color: #fff; box-shadow: inset 0 0 0 1px rgba(255,255,255,.18); }
/* L'image est déjà recadrée carrée sur le visage : un simple cover suffit. */
.wachat__ava.has-photo { color: transparent; background-repeat: no-repeat; background-size: cover; background-position: center; }
.wachat__ava::after { content: ""; position: absolute; right: 0; bottom: 1px; width: 11px; height: 11px; border-radius: 50%; background: #25d366; border: 2px solid #0b1220; }
.wachat__id { flex: 1; min-width: 0; }
.wachat__id strong { display: block; font-size: 15px; font-weight: 700; line-height: 1.25; }
.wachat__id span { display: block; font-size: 11.5px; color: rgba(255,255,255,.66); }
.wachat__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; }
.wachat__close:hover { background: rgba(255,255,255,.22); }
.wachat__body { padding: 18px 16px 16px; background: #f1f3f8; }
.wachat__msg { position: relative; background: #fff; color: #3a4666; font-size: 14px; line-height: 1.55; padding: 12px 14px; border-radius: 15px; border-top-left-radius: 5px; box-shadow: 0 6px 18px -12px rgba(10,20,48,.5); }
.wachat__status { display: flex; align-items: center; gap: 6px; margin-top: 10px; font-size: 11.5px; color: #7c88a6; }
.wachat__status i { width: 7px; height: 7px; border-radius: 50%; background: #25d366; flex: none; }
.wachat__cta { display: flex; align-items: center; justify-content: center; gap: 9px; padding: 15px 16px; background: linear-gradient(180deg, #2ee06d, #1da851); color: #fff; font-size: 14.5px; font-weight: 700; transition: filter .2s var(--ease); }
.wachat__cta:hover { filter: brightness(1.06); }
.wachat__cta svg { width: 19px; height: 19px; }

@media (max-width: 560px) {
  .wafab { right: 20px; bottom: 20px; gap: 12px; }
  .wafab__btn { width: 64px; height: 64px; }
  .wafab__ico { width: 28px; height: 28px; }
  /* Boîte de 58 px pour un viewBox de 74 : tout est réduit de 22 %. On
     recompense sur l'épaisseur pour rester sur un trait d'environ 1 px. */
  .wafab__ring { stroke-width: 1.28; }
  .wachat { width: calc(100vw - 32px); max-height: calc(100dvh - 130px); overflow-y: auto; }
}
@media (prefers-reduced-motion: reduce) { .wafab__btn, .wachat, .wafab__ico { transition: none; } .wafab__ring { animation: 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; }
.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; }
.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; }
.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; }
.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; } }
.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; }
.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 ===== */
/* padding haut réduit : forme avec le padding bas de .story la respiration
   d'environ 90px demandée entre le bloc fondateurs et le titre YouTube.
   Aucun fond ni dégradé propre — surface strictement identique à .story. */
.youtube { padding: 50px 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; }
/* ===== 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); }
@media (max-width: 860px) {
  .faq2 { grid-template-columns: 1fr; gap: 30px; max-width: 560px; }
  .faq2__chips { justify-content: flex-start; }
}

/* ---- Assistant : amorces de conversation sous le message d'accueil ---- */
/* Elles n'existent que pour demarrer l'echange et disparaissent au premier clic. */

/* ---- Assistant : bloc de reservation de fin de qualification ---- */
/* Insere uniquement quand l'agent juge la qualification suffisante : c'est la
   conclusion de la conversation, pas un bouton permanent. */

/* la bulle d'attente n'a pas besoin de la largeur d'une vraie reponse */


@media (max-width: 560px) {
  /* l'input reste au-dessus du clavier et hors de la zone geste iOS */
}

/* ===== 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__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: 12px; }
.t-cta__title { font-family: "Sora","Inter",sans-serif; font-size: clamp(26px, 3.2vw, 36px); font-weight: 800; line-height: 1.14; letter-spacing: -.025em; color: var(--l-txt); margin-bottom: 12px; }
.t-cta__sub { color: var(--l-soft); font-size: 15.5px; line-height: 1.6; margin: 0 auto 22px; }
/* Ligne de rappel sous le bouton du CTA final de l'accueil. */
.t-cta__note { margin: 16px 0 0; font-size: 13.5px; font-weight: 500; line-height: 1.5; color: var(--l-soft); }
/* Variante du CTA final de l'accueil. Deux réglages, tous portés par cette
   classe pour que le composant d'origine (v2/index.html) reste intact :
   1. la colonne est élargie et le titre très légèrement réduit, pour tenir sur
      DEUX lignes en desktop — à 660 px et 36 px il en prenait trois ;
   2. les écarts verticaux sont resserrés d'environ un quart (marge d'entrée
      50→38, label 12→9, titre 12→9, texte 22→17, réassurance 16→12) : le bloc
      doit fermer la page, pas rejouer une section héro. */
.t-cta--audit { max-width: 820px; margin-top: 38px; }
.t-cta--audit .t-cta__tag { margin-bottom: 9px; }
.t-cta--audit .t-cta__title { font-size: clamp(25px, 2.8vw, 33px); margin-bottom: 9px; }
/* Le titre tient sur deux lignes en desktop AVEC de la marge : mesuré à
   1504 px de texte pour 820 px de colonne, soit ~90 px de battement par
   ligne. À 34 px dans 780 px il n'en restait que 5 : le moindre écart de
   rendu d'une machine à l'autre le faisait basculer sur trois lignes. */
.t-cta--audit .t-cta__sub { max-width: 620px; margin-bottom: 17px; }
.t-cta--audit .t-cta__note { margin-top: 12px; }
/* 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); }
/* Solutions déployées — intercalé entre le témoignage et le pied de carte.
   Reprend à l'identique le filet de .t-card__foot : le premier trait reste
   donc exactement à sa place, et celui du pied devient le second.
   Aucune couleur nouvelle : label = teinte de la fonction client,
   liste = teinte de la citation. */
.t-card__deployed { padding-top: 14px; border-top: 1px solid var(--line); }
.t-card__deployed-label {
  display: block; font-size: 11px; font-weight: 600; letter-spacing: .12em;
  text-transform: uppercase; color: var(--gray); margin-bottom: 4px;
}
.t-card__deployed-list { font-size: 13px; line-height: 1.4; color: var(--gray-2); }
.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)
   =================================================================== */
/* Sur l'accueil, le <body> n'est visible QUE dans les quatre encoches des
   coins arrondis du bloc clair (ailleurs il est couvert par .hero__bg, la
   section blanche puis le pied de page). Il doit donc porter le même sombre
   que ses deux voisins — sinon la courbe se détache sur un fond légèrement
   plus noir, exactement à l'endroit qu'on regarde. Les autres pages gardent
   --bg : elles n'ont ni cette couche ni ces arrondis. */
body.page-home { background: var(--bg-2); }

/* Fond de page des pages internes.
   Le body est sombre par defaut (--bg) : c'est le fond de la Home. Toute page
   qui se termine par le pied de page clair .ofoot doit donc porter un fond
   blanc, sinon la marge haute du footer (72 px, sans fond propre) laisse
   apparaitre le noir du body et dessine une bande sombre au-dessus du footer.
   .page-faq et .page-offre posent la meme regle dans leur feuille dediee. */
.page-solutions, .page-realisations { background: #fff; }

.sec--light { background: var(--l-bg); color: var(--l-txt); }
/* Coins arrondis du grand bloc clair (style TrendTrack) : la 1re section claire
   est arrondie en haut, la dernière en bas → tout le bloc se lit comme un seul
   panneau posé sur le fond sombre.
   Sur l'accueil, ce bloc s'est réduit à UNE seule section (#realisations) : elle
   est donc à la fois la première et la dernière, et porte les quatre coins.
   Sans l'arrondi du bas, le blanc se terminait à l'équerre juste avant le pied
   de page alors qu'il commençait en courbe — la symétrie était rompue. */
.t-featured.sec--light { border-radius: 32px; }
/* .method n'existe plus dans aucune page ; règle conservée si le bloc clair
   redevient un jour multi-sections (elle ne s'applique à rien aujourd'hui). */
.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__deployed { border-top-color: var(--l-brd); }
.sec--light .t-card__deployed-label { color: #6b7493; }
.sec--light .t-card__deployed-list { color: var(--l-soft); }
.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; }
}

/* =====================================================================
   RÉALISATIONS — projets empilés à navigation verticale
   Un seul projet à la fois : les quatre visuels sont superposés dans une
   même cellule de grille, idem pour les quatre blocs d'informations. Les
   panneaux se relaient en fondu, donc aucune hauteur ne saute au
   changement. Règles additives et préfixées .work* : aucune autre section
   du site n'est concernée.
   ===================================================================== */
.work { max-width: 1140px; margin: 0 auto; }

/* visuel dominant à gauche, colonne de navigation, informations à droite */
.work__stage {
  display: grid;
  grid-template-columns: minmax(0, 1.46fr) 58px minmax(0, 1fr);
  gap: 0 24px;
  align-items: center;
}

/* ---------------- colonne gauche : emplacement du visuel ---------------- */
/* Le format est fixé par aspect-ratio : la place de la future capture est
   réservée dès maintenant, sans image et sans faux mockup. */
.work__visual {
  position: relative; grid-column: 1;
  aspect-ratio: 16 / 10; width: 100%;
  border-radius: 20px; overflow: hidden;
}
.work__shot {
  position: absolute; top: 0; right: 0; bottom: 0; left: 0;
  display: grid; place-items: center;
  border-radius: 20px;
  background: linear-gradient(180deg, #f8fafe, var(--l-card));
  border: 1px solid var(--l-brd);
  opacity: 0; visibility: hidden; pointer-events: none;
  transform: translateY(10px) scale(.995);
  transition: opacity .42s var(--ease), transform .42s var(--ease), visibility .42s;
}
.work__shot.is-on { opacity: 1; visibility: visible; pointer-events: auto; transform: none; }
/* liseré intérieur discontinu : signale un emplacement réservé, sans bruit */
.work__ph {
  display: flex; flex-direction: column; align-items: center; gap: 9px;
  padding: 26px; text-align: center;
  border: 1px dashed rgba(11,16,32,.14); border-radius: 14px;
  width: calc(100% - 44px); height: calc(100% - 44px);
  justify-content: center;
}
.work__ph svg { width: 26px; height: 26px; color: #9aa3b7; }
.work__ph b { font-size: 14px; font-weight: 600; color: #7d879e; letter-spacing: .01em; }
.work__ph i { font-style: normal; font-size: 12.5px; color: #9aa3b7; }

/* ---------------- colonne centrale : navigation verticale ---------------- */
.work__nav {
  grid-column: 2; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 16px;
}
.work__arrow {
  width: 40px; height: 40px; flex: none; border-radius: 50%;
  display: grid; place-items: center; cursor: pointer;
  background: #fff; border: 1px solid var(--l-brd2); color: var(--l-txt);
  transition: color .2s var(--ease), border-color .2s var(--ease), box-shadow .25s var(--ease), transform .2s var(--ease);
}
.work__arrow svg { width: 15px; height: 15px; }
.work__arrow:hover { color: var(--blue-2); border-color: var(--blue-2); box-shadow: 0 8px 20px -10px rgba(63,95,230,.6); }
.work__arrow:active { transform: scale(.94); }
.work__arrow:focus-visible { outline: 2px solid var(--blue-2); outline-offset: 3px; }
/* repères verticaux : position dans la série, cliquables */
.work__ticks { display: flex; flex-direction: column; align-items: center; gap: 7px; }
.work__tick {
  width: 2px; height: 20px; padding: 0; border: 0; border-radius: 2px; cursor: pointer;
  background: rgba(11,16,32,.16);
  transition: background .25s var(--ease), height .25s var(--ease);
}
.work__tick.is-on { background: var(--blue-2); height: 28px; }
.work__tick:focus-visible { outline: 2px solid var(--blue-2); outline-offset: 3px; }
.work__count {
  font-family: ui-monospace, "SFMono-Regular", Menlo, monospace;
  font-size: 11px; letter-spacing: .04em; color: #8b95ad;
  font-variant-numeric: tabular-nums;
  white-space: nowrap; text-align: center; margin-top: 2px;
}

/* ---------------- colonne droite : informations du projet ---------------- */
/* Grille à une cellule : les quatre articles se superposent, la hauteur est
   celle du plus long et rien ne bouge d'un projet à l'autre. */
.work__info { grid-column: 3; display: grid; align-items: center; }
.work__item {
  grid-area: 1 / 1; text-align: left;
  opacity: 0; visibility: hidden; pointer-events: none;
  transform: translateY(12px);
  transition: opacity .42s var(--ease), transform .42s var(--ease), visibility .42s;
}
.work__item.is-on { opacity: 1; visibility: visible; pointer-events: auto; transform: none; }
.work__num {
  display: block; font-family: ui-monospace, "SFMono-Regular", Menlo, monospace;
  font-size: 12px; letter-spacing: .08em; color: var(--blue); margin-bottom: 10px;
}
.work__name {
  font-family: "Sora", "Inter", sans-serif; font-weight: 800;
  font-size: clamp(26px, 3vw, 34px); line-height: 1.1; letter-spacing: -.02em;
  color: var(--l-txt); margin: 0 0 14px;
}
.work__tags { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 16px; padding: 0; list-style: none; }
.work__tags li {
  font-size: 12.5px; font-weight: 500; color: var(--l-soft);
  padding: 6px 11px; border-radius: 999px;
  background: var(--l-card); border: 1px solid var(--l-brd);
}
.work__desc { font-size: 15px; line-height: 1.65; color: var(--l-soft); margin: 0 0 22px; max-width: 42ch; }
.work__actions { display: flex; flex-wrap: wrap; gap: 10px; }

/* ---------------- tablette : navigation sous le visuel ---------------- */
@media (max-width: 940px) {
  .work__stage { grid-template-columns: minmax(0, 1fr); gap: 22px 0; }
  .work__visual, .work__nav, .work__info { grid-column: 1; }
  .work__visual { aspect-ratio: 16 / 9; }
  /* la navigation passe à l'horizontale, les repères suivent */
  .work__nav { flex-direction: row; justify-content: center; gap: 14px; }
  .work__ticks { flex-direction: row; }
  .work__tick { width: 20px; height: 2px; }
  .work__tick.is-on { width: 28px; height: 2px; }
  .work__desc { max-width: none; }
}
@media (max-width: 560px) {
  .work__visual { aspect-ratio: 4 / 3; border-radius: 16px; }
  .work__shot { border-radius: 16px; }
  .work__ph { width: calc(100% - 28px); height: calc(100% - 28px); padding: 18px; gap: 7px; }
  .work__ph b { font-size: 13px; }
  .work__ph i { font-size: 12px; }
  .work__arrow { width: 38px; height: 38px; }
  .work__actions .btn { width: 100%; justify-content: center; }
}

/* les panneaux inactifs sont simplement présents : pas de mouvement imposé */
@media (prefers-reduced-motion: reduce) {
  .work__shot, .work__item { transition: opacity .18s linear, visibility .18s; transform: none; }
  .work__shot.is-on, .work__item.is-on { transform: none; }
  .work__arrow, .work__tick { transition: none; }
}

/* =====================================================================
   ANIMATION D'OUVERTURE — habillage du loader plein écran
   Le panneau est présent sur toutes les pages du site. Seul le strict
   minimum (fond bleu du panneau + verrou de défilement) est répété en
   ligne dans le <head> de chaque page, pour être peint dès la première
   image même si cette feuille tarde. Toute la mise en scène est ici :
   c'est le seul endroit à modifier pour retoucher le design.
   ===================================================================== */
:root {
  /* Hauteur de la zone estompée en bas du panneau. Au repos elle se trouve
     SOUS le pli (le panneau est plus haut que l'écran), donc invisible ;
     elle n'entre dans le champ que pendant la remontée. */
  --ev-veil-fade: 180px;
  /* Fondu du bord inférieur. Les paliers ne sont pas régulièrement espacés :
     l'opacité suit une courbe, sinon on devine une rampe linéaire — et donc
     une frontière. */
  --ev-veil-mask: linear-gradient(to bottom,
      rgb(0 0 0 / 1)   calc(100% - var(--ev-veil-fade)),
      rgb(0 0 0 / .93) calc(100% - var(--ev-veil-fade) * .82),
      rgb(0 0 0 / .78) calc(100% - var(--ev-veil-fade) * .64),
      rgb(0 0 0 / .54) calc(100% - var(--ev-veil-fade) * .46),
      rgb(0 0 0 / .28) calc(100% - var(--ev-veil-fade) * .28),
      rgb(0 0 0 / .09) calc(100% - var(--ev-veil-fade) * .13),
      rgb(0 0 0 / 0)   100%);
}

html.ev-loading .ev-load {
  display: block; position: fixed; top: 0; left: 0;
  width: 100%; height: calc(100vh + var(--ev-veil-fade));
  z-index: 9000;
  /* Bleu marine très profond : au premier coup d'oeil on lit du noir, la
     teinte navy ne se révèle qu'ensuite. Uniquement des couleurs de la
     charte : --navy (#0b1430) au centre, --navy-deep (#080e22) puis
     --black (#05060a) sur les bords. Le halo --blue-2 n'est plus une tache
     lumineuse : juste assez pour donner du relief derrière le filigrane. */
  background:
    radial-gradient(44% 30% at 50% 33%, rgba(63,95,230,.13), rgba(63,95,230,0) 72%),
    radial-gradient(96% 78% at 50% 36%, #0b1430 0%, #080e22 56%, #05060a 100%);
  /* Le bord inférieur ne doit JAMAIS être une ligne nette : le masque le fait
     disparaître progressivement. Il est solidaire du panneau, donc il suit la
     remontée sans rien coûter (aucune propriété de mise en page animée). */
  -webkit-mask-image: var(--ev-veil-mask);
          mask-image: var(--ev-veil-mask);
  transform: translateY(0);
  transition: transform .95s cubic-bezier(.76, 0, .24, 1);
  will-change: transform;
}
/* Le sélecteur doit rester plus spécifique que « html.ev-loading .ev-load »
   ci-dessus, sinon le translateY(0) de repos l'emporte et le voile ne se lève
   jamais : il disparaît d'un coup à la fin. */
html.ev-loading .ev-load.is-out { transform: translateY(-101%); }

/* La scène fait exactement la hauteur de l'écran : tout ce qui est centré
   l'est par rapport au regard, pas par rapport au panneau (qui déborde de la
   hauteur du fondu). Le sélecteur est volontairement plus spécifique que le
   garde-fou posé en ligne dans le <head> (qui masque le contenu tant que
   cette feuille n'est pas là). */
html.ev-loading .ev-load .ev-load__stage {
  opacity: 1;
  position: absolute; top: 0; left: 0; width: 100%; height: 100vh;
  /* Empilement : filigrane, puis compteur, puis libellé. Le padding du bas
     remonte l'ensemble de la moitié de sa valeur : le compteur retombe près
     du centre optique et le symbole passe nettement au-dessus. */
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  padding-bottom: 80px;
}

/* ---------- filigrane : le symbole Envision IA, presque ton sur ton ---------- */
.ev-load__mark {
  display: flex; justify-content: center;
  margin-bottom: 30px; pointer-events: none;
}
.ev-load__mark img {
  height: clamp(120px, 19vh, 172px); width: auto;
  /* le symbole est bleu : ramené au blanc pour exister sur le fond, puis
     ramené à un filigrane. L'opacité a baissé avec le fond : sur du presque
     noir, un même 7,5 % de blanc ressort nettement plus. */
  filter: brightness(0) invert(1);
  opacity: .055;
  animation: evMarkIn 1.2s cubic-bezier(.22, 1, .36, 1) .1s both;
}
@keyframes evMarkIn {
  from { opacity: 0; transform: scale(.94); }
  to   { opacity: .055; transform: scale(1); }
}
@keyframes evFadeIn { from { opacity: 0; } to { opacity: 1; } }

/* ---------- repères : « calibration », rien de plus ---------- */
/* Deux lignes très fines, interrompues en leur centre : elles encadrent le
   compteur sans jamais le traverser. Pas de grille, pas de particules. */
.ev-load__guides {
  position: absolute; top: 0; left: 0; right: 0; bottom: 0;
  pointer-events: none;
  animation: evFadeIn 1s ease .24s both;
}
.ev-load__guides i {
  position: absolute; top: 50%; left: 50%; display: block;
  transform: translate(-50%, -50%);
}
/* Les trous centraux sont exprimés en pixels, pas en pourcentage : ils
   doivent dégager le compteur et son libellé quelle que soit la longueur
   de la ligne, sinon un trait vient couper les chiffres sur petit écran. */
/* L'axe vertical doit désormais dégager toute la pile (filigrane en haut,
   libellé en bas) : son trou est plus haut que le précédent. */
.ev-load__guides i:nth-child(1) {
  width: 1px; height: min(82vh, 620px);
  background: linear-gradient(180deg,
    rgba(255,255,255,0)   0,
    rgba(255,255,255,.07) 60px,
    rgba(255,255,255,.07) calc(50% - 258px),
    rgba(255,255,255,0)   calc(50% - 214px),
    rgba(255,255,255,0)   calc(50% + 130px),
    rgba(255,255,255,.07) calc(50% + 174px),
    rgba(255,255,255,.07) calc(100% - 60px),
    rgba(255,255,255,0)   100%);
}
.ev-load__guides i:nth-child(2) {
  height: 1px; width: min(78vw, 620px);
  background: linear-gradient(90deg,
    rgba(255,255,255,0)   0,
    rgba(255,255,255,.07) 80px,
    rgba(255,255,255,.07) calc(50% - 152px),
    rgba(255,255,255,0)   calc(50% - 112px),
    rgba(255,255,255,0)   calc(50% + 112px),
    rgba(255,255,255,.07) calc(50% + 152px),
    rgba(255,255,255,.07) calc(100% - 80px),
    rgba(255,255,255,0)   100%);
}
/* Les quatre repères encadrent la pile entière, filigrane compris. */
.ev-load__guides b {
  position: absolute; width: 9px; height: 9px;
  border: 1px solid rgba(255,255,255,.10);
}
.ev-load__guides b:nth-child(3) { top: calc(50% - 234px); left: calc(50% - 208px); border-right: 0; border-bottom: 0; }
.ev-load__guides b:nth-child(4) { top: calc(50% - 234px); left: calc(50% + 199px); border-left: 0;  border-bottom: 0; }
.ev-load__guides b:nth-child(5) { top: calc(50% + 152px); left: calc(50% - 208px); border-right: 0; border-top: 0; }
.ev-load__guides b:nth-child(6) { top: calc(50% + 152px); left: calc(50% + 199px); border-left: 0;  border-top: 0; }

/* ---------- bloc central : compteur + libellé ---------- */
.ev-load__core {
  position: relative; z-index: 2;
  display: flex; flex-direction: column; align-items: center;
  transition: opacity .3s ease, transform .46s cubic-bezier(.4, 0, .2, 1);
}
/* il s'efface dès que le panneau s'ébranle : on ne lit pas un compteur qui part */
.ev-load.is-out .ev-load__core { opacity: 0; transform: translateY(-9px); }

/* ---------- compteur ---------- */
.ev-load__count {
  display: flex; align-items: flex-end; justify-content: center;
  font-family: "Inter", system-ui, -apple-system, sans-serif;
  font-size: clamp(30px, 3.4vw, 42px);
  font-weight: 500; line-height: 1; letter-spacing: -.028em;
  color: #eaf0ff;
  font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1;
}
.ev-load__digits { display: flex; }
/* un rang = une fenêtre d'un chiffre. Deux calques y coulissent : celui qui
   part monte, celui qui arrive vient du bas. Un cran, jamais un défilement. */
.ev-d { position: relative; display: block; width: .62em; height: 1.12em; overflow: hidden; }
.ev-d__c {
  position: absolute; left: 0; right: 0; top: 0; height: 100%;
  display: flex; align-items: center; justify-content: center;
  /* 90 ms : le rang des dizaines change toutes les ~170 ms, la glissade doit
     être terminée bien avant la suivante. Au-delà, deux chiffres se
     chevauchent en permanence et le compteur devient illisible.
     Seul le `transform` est animé, jamais l'opacité : les chiffres restent
     pleins et c'est la fenêtre qui les découpe, comme une vraie roue. Un
     chiffre à demi effacé se lisait mal à cette cadence. */
  transition: transform .09s cubic-bezier(.33, 0, .12, 1);
}
.ev-d__c.is-in    { transform: translateY(0); }
.ev-d__c.is-out   { transform: translateY(-110%); }
.ev-d__c.is-below { transform: translateY(110%); transition: none; }
/* Le rang des unités change toutes les ~17 ms (le compteur passe par chaque
   entier) : aucune glissade ne peut s'y terminer, elle ne produirait qu'un
   brouillard. Il permute donc net. Les dizaines et les centaines, elles,
   changent assez lentement pour garder le geste d'odomètre. */
.ev-d--fast .ev-d__c { transition: none; }
.ev-load__pct {
  font-size: .44em; font-weight: 500; letter-spacing: 0;
  margin-left: .5em; padding-bottom: .42em;
  color: rgba(255, 255, 255, .5);
}

/* ---------- libellé ---------- */
.ev-load__label {
  margin: 50px 0 0;
  font-family: "Inter", system-ui, -apple-system, sans-serif;
  font-size: 11px; font-weight: 500; text-transform: uppercase;
  letter-spacing: .28em; text-indent: .28em;  /* recentre malgré le tracking */
  color: rgba(255, 255, 255, .42);
  animation: evFadeIn .8s ease .3s both;
}

/* ---------- le Hero attend derrière le panneau ---------- */
/* Il est bien dans le DOM (aucune conséquence SEO), simplement masqué. */
html.ev-loading .hero__inner > * { opacity: 0; }

/* =====================================================================
   SÉQUENCE D'ENTRÉE DU HERO
   ---------------------------------------------------------------------
   Une seule timeline, entièrement en CSS (le site n'embarque aucune
   bibliothèque d'animation, il n'y a aucune raison d'en ajouter une).
   Origine des temps : l'instant où le script d'ouverture pose à la fois
   « ev-reveal » sur <html> et « is-out » sur le panneau.

   Le panneau remonte du bas vers le haut en 0,95 s et son bord inférieur
   est estompé sur 180 px. --ev-t0 est calé pour que le titre démarre quand
   environ 72 % du panneau a quitté l'écran : sa zone est alors dégagée (ou
   dans le fondu), et la révélation s'enchaîne sans temps mort — c'est ce
   chevauchement qui donne la continuité « ouverture → contenu ».
   sont tous exprimés en écart par rapport à ce point de départ unique,
   c'est le seul curseur à déplacer pour retoucher le rythme.

   Ordre : titre → texte secondaire → CTA → les trois pastilles (avec le
   filament bleu) → la vidéo. Puis plus rien ne bouge.

   Des animations CSS, et non des transitions : elles priment sur les
   styles en ligne, donc le filet de sécurité du script principal ne peut
   pas couper la révélation en cours de route. Uniquement transform et
   opacity : aucun reflow, aucun CLS, aucune propriété coûteuse.
   ===================================================================== */
:root {
  --ev-t0: .55s;                          /* départ de la séquence Hero */
  --ev-in: cubic-bezier(.16, 1, .3, 1);   /* sortie très douce, sans rebond */
  --ev-lift: 18px;                        /* montée des éléments secondaires */
  --ev-title-lift: .72em;                 /* montée du titre, relative à sa taille */
}

/* ---- socle : tout enfant direct de la Hero entre de la même façon ---- */
html.ev-reveal .hero__inner > * { animation: evHeroIn .78s var(--ev-in) both; }
@keyframes evHeroIn {
  from { opacity: 0; transform: translateY(var(--ev-lift)); }
  to   { opacity: 1; transform: none; }
}

/* ---- 1. le gros titre : chaque ligne sort de son masque ---- */
/* padding-bottom = la place des jambages sous le masque ; la marge négative
   de même valeur l'annule exactement. Le h1 étant un élément flex (donc un
   contexte de formatage), la marge du dernier enfant reste à l'intérieur :
   ni l'interligne ni l'écart sous le titre ne bougent d'un pixel. */
.hero__title .ev-line {
  display: block; overflow: hidden;
  padding-bottom: .22em; margin-bottom: -.22em;
}
.hero__title .ev-line__i { display: block; }

html.ev-reveal .hero__inner > .hero__title { animation: none; opacity: 1; }
html.ev-reveal .hero__title .ev-line__i { animation: evHeroLine .95s var(--ev-in) both; }
html.ev-reveal .hero__title .ev-line:nth-child(1) .ev-line__i { animation-delay: var(--ev-t0); }
html.ev-reveal .hero__title .ev-line:nth-child(2) .ev-line__i { animation-delay: calc(var(--ev-t0) + .11s); }
@keyframes evHeroLine {
  from { opacity: 0; transform: translateY(var(--ev-title-lift)); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ---- 2. les éléments secondaires, décalés derrière le titre ---- */
html.ev-reveal .badge         { animation-delay: calc(var(--ev-t0) + .22s); }
html.ev-reveal .hero__sub     { animation-delay: calc(var(--ev-t0) + .30s); }
html.ev-reveal .tt-cta-wrap   { animation-delay: calc(var(--ev-t0) + .40s); }
html.ev-reveal .hero__sectors { animation-delay: calc(var(--ev-t0) + .48s); }
html.ev-reveal .hero__video   { animation-delay: calc(var(--ev-t0) + .74s); }

/* ---- 3. les trois pastilles : ce sont elles qui entrent, pas le bloc ---- */
html.ev-reveal .hero__inner > .tt-tags { animation: none; opacity: 1; }
html.ev-reveal .tt-tags .tt-tag {
  position: relative; overflow: hidden;
  animation: evTagIn .7s var(--ev-in) both;
}
html.ev-reveal .tt-tags .tt-tag:nth-child(1) { animation-delay: calc(var(--ev-t0) + .54s); }
html.ev-reveal .tt-tags .tt-tag:nth-child(2) { animation-delay: calc(var(--ev-t0) + .63s); }
html.ev-reveal .tt-tags .tt-tag:nth-child(3) { animation-delay: calc(var(--ev-t0) + .72s); }
@keyframes evTagIn {
  from { opacity: 0; transform: translateY(15px) scale(.98); }
  to   { opacity: 1; transform: none; }
}

/* ---- 4. le filament bleu qui traverse chaque pastille, une seule fois ---- */
/* Une bande fine, aux bleus déjà en charte (--blue-2 #3f5fe6 et son clair
   #7aa2ff, celui de la barre de chargement). Elle est découpée par le
   overflow de la pastille, donc épouse sa forme. Aucune boucle, aucun halo :
   elle passe, puis le pseudo-élément retombe à zéro et ne coûte plus rien. */
html.ev-reveal .tt-tags .tt-tag::after {
  content: ""; position: absolute; top: 0; bottom: 0; left: 0;
  width: 62%; pointer-events: none;
  background: linear-gradient(100deg,
    rgba(63, 95, 230, 0)      0%,
    rgba(63, 95, 230, .20)   38%,
    rgba(122, 162, 255, .58) 47%,
    rgba(168, 196, 255, .62) 50%,
    rgba(122, 162, 255, .58) 53%,
    rgba(63, 95, 230, .20)   62%,
    rgba(63, 95, 230, 0)    100%);
  opacity: 0; transform: translateX(-100%);
  animation: evTagSheen .82s cubic-bezier(.45, .05, .35, 1) both;
}
html.ev-reveal .tt-tags .tt-tag:nth-child(1)::after { animation-delay: calc(var(--ev-t0) + .74s); }
html.ev-reveal .tt-tags .tt-tag:nth-child(2)::after { animation-delay: calc(var(--ev-t0) + .83s); }
html.ev-reveal .tt-tags .tt-tag:nth-child(3)::after { animation-delay: calc(var(--ev-t0) + .92s); }
@keyframes evTagSheen {
  0%   { opacity: 0; transform: translateX(-100%); }
  14%  { opacity: 1; }
  86%  { opacity: 1; }
  100% { opacity: 0; transform: translateX(230%); }
}

/* ---------- mobile ---------- */
/* Même concept, amplitudes réduites : le fondu du bord est moins haut (la
   fenêtre l'est aussi), le compteur et le filigrane rentrent dans l'écran. */
@media (max-width: 600px) {
  :root { --ev-veil-fade: 120px; }
  .ev-load__stage { padding-bottom: 60px; }
  .ev-load__mark { margin-bottom: 24px; }
  .ev-load__mark img { height: clamp(96px, 15vh, 128px); }
  .ev-load__count { font-size: 28px; }
  .ev-load__label { margin-top: 38px; font-size: 10px; letter-spacing: .24em; text-indent: .24em; }
  /* la ligne horizontale n'a pas la place de respirer sur un écran étroit :
     seul l'axe vertical et les quatre repères sont conservés. */
  .ev-load__guides i:nth-child(2) { display: none; }
  .ev-load__guides b:nth-child(3), .ev-load__guides b:nth-child(5) { left: calc(50% - 146px); }
  .ev-load__guides b:nth-child(4), .ev-load__guides b:nth-child(6) { left: calc(50% + 137px); }
  .ev-load__guides b:nth-child(3), .ev-load__guides b:nth-child(4) { top: calc(50% - 176px); }
  .ev-load__guides b:nth-child(5), .ev-load__guides b:nth-child(6) { top: calc(50% + 126px); }
}
/* Séquence Hero sur petit écran : mêmes gestes, amplitude réduite. Le départ
   est décalé de quelques centièmes car la Hero mobile commence plus haut
   dans l'écran : le voile met un peu plus longtemps à dégager le titre. */
@media (max-width: 600px) {
  :root { --ev-lift: 12px; --ev-title-lift: .55em; }
  html.ev-reveal .hero__title .ev-line__i { animation-duration: .82s; }
  html.ev-reveal .hero__inner > * { animation-duration: .68s; }
  html.ev-reveal .tt-tags .tt-tag { animation-duration: .62s; }
  html.ev-reveal .tt-tags .tt-tag::after { animation-duration: .74s; }
}

/* ---------- animations réduites ---------- */
/* Plus aucun mouvement : ni glissement, ni flou, ni poussière. Un fondu
   court, uniquement pour éviter l'apparition brutale du site. */
@media (prefers-reduced-motion: reduce) {
  /* Le panneau ne remonte plus : il s'efface. Le compteur reste lisible, les
     chiffres ne coulissent pas. Le visiteur n'est jamais bloqué dessus. */
  html.ev-loading .ev-load { transition: opacity .22s linear; }
  html.ev-loading .ev-load.is-out { transform: none; opacity: 0; }
  .ev-load__mark img { animation: none; opacity: .075; transform: none; }
  .ev-load__guides, .ev-load__label { animation: evFadeIn .2s linear both; }
  .ev-d__c { transition: none; }
  .ev-load.is-out .ev-load__core { opacity: 0; transform: none; transition: opacity .16s linear; }
  html.ev-reveal .hero__inner > * { animation: evFadeIn .22s linear both; animation-delay: 0s !important; }
  /* Les calques de la séquence Hero : le titre et les pastilles ne glissent
     plus, ils se contentent du même fondu court. Le filament est retiré. */
  html.ev-reveal .hero__title .ev-line__i,
  html.ev-reveal .tt-tags .tt-tag { animation: evFadeIn .22s linear both; animation-delay: 0s !important; }
  html.ev-reveal .tt-tags .tt-tag::after { display: none; }
}
/* =====================================================================
   PAGE RÉALISATIONS
   ---------------------------------------------------------------------
   Composition reprise de la page Réalisations de Pulsor, transposée à la
   charte Envision IA : page claire, panneau projet sombre. Les proportions
   du showcase sont celles relevées sur la référence (rail de 996 px, carte
   en 12 colonnes, colonne texte sur 5, visuel sur 6→12 débordant en bas à
   droite, visuel en 573/594, glissement de 600 ms).
   Tout est en CSS + un module maison : aucune bibliothèque ajoutée.
   ===================================================================== */
.rea-rail { width: 100%; max-width: 1040px; margin: 0 auto; padding: 0 22px; }

/* ---------- introduction ---------- */
.rea-intro { padding: 168px 0 0; }
.rea-intro__eyebrow {
  display: inline-flex; align-items: center; gap: 12px;
  font-size: 12.5px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase;
  color: var(--blue); margin-bottom: 22px;
}
.rea-intro__eyebrow::before { content: ""; width: 26px; height: 1px; background: currentColor; opacity: .5; }
.rea-intro h1 {
  font-family: "Instrument Sans", "Inter", sans-serif;
  font-size: clamp(32px, 5vw, 56px); font-weight: 600; line-height: 1.08;
  letter-spacing: -.038em; max-width: 17ch; margin: 0 0 22px;
}
.rea-intro h1 em { font-style: normal; color: rgba(11, 16, 32, .34); }
.rea-intro p { max-width: 54ch; font-size: 16.5px; line-height: 1.65; color: var(--l-soft); margin: 0; }

/* ---------- en-tête du showcase ---------- */
.rea-show { padding: 96px 0 0; }
.rea-show__head { display: flex; justify-content: space-between; align-items: flex-end; gap: 28px; }
/* Marque pigmentée, à droite du titre, comme sur la référence — chez elle en
   gris, ici dans le bleu de la maison. Le sigle sert de masque à une trame de
   points : aucun fichier image supplémentaire, et la densité de la trame reste
   nette à toutes les tailles. Purement décoratif, donc retiré du flux lu. */
.rea-show__mark {
  flex: none; align-self: center;
  width: clamp(124px, 13.5vw, 200px); aspect-ratio: 59 / 77;
  background-image: radial-gradient(circle, var(--blue-2) 1.45px, transparent 1.65px);
  background-size: 7px 7px;
  -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;
  opacity: .52;
  pointer-events: none;
}
.rea-show__headL { min-width: 0; }
.rea-show h2 {
  font-family: "Instrument Sans", "Inter", sans-serif;
  font-size: clamp(34px, 5vw, 70px); font-weight: 600; line-height: 1.04;
  letter-spacing: -.04em; margin: 0;
}
/* même respiration que la référence : le second mot recule d'un ton */
.rea-show h2 em { font-style: normal; color: rgba(11, 16, 32, .34); }
.rea-show__sub { max-width: 46ch; font-size: clamp(15.5px, 1.3vw, 17.5px); line-height: 1.5; color: var(--l-soft); margin: 18px 0 0; }

/* ---------- navigation du slider ---------- */
.rea-nav { display: flex; align-items: center; gap: 14px; margin-top: 26px; }
.rea-nav__pill {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px; border-radius: 999px; background: var(--l-card); border: 1px solid var(--l-brd);
}
.rea-nav__btn {
  width: 38px; height: 38px; flex: none; border-radius: 999px;
  display: flex; align-items: center; justify-content: center;
  background: #fff; border: 1px solid var(--l-brd); color: #545a63; cursor: pointer;
  box-shadow: 0 1px 2px rgba(11, 16, 32, .06);
  transition: color .22s var(--ease), border-color .22s var(--ease), transform .22s var(--ease), opacity .22s var(--ease);
}
.rea-nav__btn svg { width: 16px; height: 16px; display: block; }
.rea-nav__btn:hover:not(:disabled) { color: var(--blue); border-color: rgba(29, 52, 196, .35); transform: translateY(-1px); }
.rea-nav__btn:disabled { opacity: .38; cursor: default; box-shadow: none; }
.rea-nav__count {
  font-family: "Inter", system-ui, sans-serif;
  font-size: 12.5px; font-weight: 500; letter-spacing: .16em;
  font-variant-numeric: tabular-nums; color: var(--l-soft);
}

/* ---------- le rail ---------- */
/* Le conteneur déborde volontairement de part et d'autre du rail : la carte
   suivante se devine dans les marges, c'est ce qui dit « il y en a d'autres ».
   L'écrêtage se fait ici, jamais sur la page (aucun débordement horizontal). */
.rea-slider { overflow: hidden; padding: 44px 0 0; }
.rea-slider__rail { width: 100%; max-width: 1040px; margin: 0 auto; padding: 0 22px; }
.rea-track {
  display: flex; align-items: stretch;
  transition: transform .6s cubic-bezier(.66, .01, .17, .97);
  will-change: transform;
}
.rea-track.is-grab { transition: none; }
.rea-slide { flex: 0 0 auto; display: flex; }
/* les cartes en attente reculent légèrement : la carte active domine */
.rea-slide .rea-card { transition: opacity .6s var(--ease), transform .6s cubic-bezier(.66, .01, .17, .97); }
.rea-slide:not(.is-on) .rea-card { opacity: .55; }
.rea-slide:not(.is-on) { cursor: pointer; }

/* ---------- la carte projet ---------- */
.rea-card {
  position: relative; width: 100%;
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 20px;
  border-radius: 32px; overflow: hidden; color: #fff;
  /* bleu nuit de la charte, éclairé en haut à gauche là où se lit le texte */
  background:
    radial-gradient(92% 74% at 12% 0%, rgba(63, 95, 230, .22), rgba(63, 95, 230, 0) 60%),
    linear-gradient(158deg, #0b1430 0%, #080e22 58%, #05060a 100%);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, .07),
    inset 0 0 34px rgba(255, 255, 255, .05),
    0 34px 80px -46px rgba(11, 16, 32, .6);
}
.rea-card__col {
  grid-column: span 5; display: flex; flex-direction: column; justify-content: space-between;
  gap: 46px; padding: 36px;
}
.rea-card__body { display: flex; flex-direction: column; gap: 30px; }

.rea-card__id { display: flex; align-items: center; gap: 14px; }
.rea-logo {
  width: 44px; height: 44px; flex: none; border-radius: 14px; overflow: hidden;
  display: flex; align-items: center; justify-content: center;
  background: #fff;
  box-shadow: inset 0 0 0 1px rgba(11, 16, 32, .08), 0 2px 8px rgba(0, 0, 0, .28);
}
.rea-logo img { width: 100%; height: 100%; object-fit: contain; padding: 7px; }
.rea-card__id > span:last-child { min-width: 0; }
.rea-name { display: block; font-size: 16.5px; font-weight: 500; letter-spacing: -.012em; line-height: 1.25; }
.rea-type {
  display: block; font-size: 12px; font-weight: 500; letter-spacing: .1em; text-transform: uppercase;
  color: rgba(255, 255, 255, .5); margin-top: 3px;
}
/* Badges des solutions livrées : MÊME composant que les pills de l'accueil
   (.hs__tag), mêmes cotes, seule la peinture change — la carte est ici bleu
   nuit, un fond bleu à 5 % sur blanc y serait invisible et le bleu --blue
   illisible. Ils se replient d'eux-mêmes ; Eva's Hair en porte six. */
.rea-tags { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.rea-tag {
  display: inline-flex; align-items: center; gap: 6px; min-width: 0;
  padding: 6px 14px 6px 10px; border-radius: 999px;
  font-size: 13.5px; font-weight: 500; line-height: 1.2;
  color: #c3d0ff; background: rgba(63, 95, 230, .16);
  box-shadow: inset 0 0 0 1px rgba(63, 95, 230, .22);
}
.rea-tag svg { width: 13px; height: 13px; flex: none; opacity: .85; }
.rea-desc {
  font-size: 15px; line-height: 1.62; color: rgba(255, 255, 255, .73); margin: 0;
  display: -webkit-box; -webkit-line-clamp: 5; -webkit-box-orient: vertical; overflow: hidden;
}
.rea-card__actions { display: grid; grid-template-columns: 1fr 48px; gap: 8px; }
.rea-card__actions .btn { width: 100%; }
/* La carte est sombre alors que la section est claire : sans cette reprise,
   .sec--light .btn--ghost la repeindrait en blanc plein. On rétablit le
   bouton des fonds sombres du site, plus proche de la retenue du modèle. */
.sec--light .rea-card .btn--ghost {
  background: rgba(255, 255, 255, .06); color: #fff; border-color: var(--line-2);
}
.sec--light .rea-card .btn--ghost:hover {
  background: rgba(255, 255, 255, .12); border-color: rgba(63, 95, 230, .5);
}
.rea-card__side {
  width: 48px; height: 48px; border-radius: 999px;
  display: flex; align-items: center; justify-content: center;
  background: rgba(255, 255, 255, .04); border: 1px solid var(--line-2); color: #fff;
  transition: background .22s var(--ease), border-color .22s var(--ease), transform .22s var(--ease);
}
.rea-card__side svg { width: 16px; height: 16px; display: block; }
.rea-card__side:hover { background: rgba(255, 255, 255, .09); border-color: rgba(63, 95, 230, .5); transform: translateY(-2px); }

/* ---------- le visuel ---------- */
/* Il déborde en bas et à droite de la carte : seul son coin haut-gauche est
   arrondi. C'est ce cadrage qui donne l'impression d'un vrai écran posé
   dans le panneau plutôt que d'une vignette centrée. */
.rea-card__vis { grid-column: 6 / -1; padding-top: 36px; }
.rea-visual {
  position: relative; width: 100%; aspect-ratio: 573 / 594;
  border-top-left-radius: 28px; overflow: hidden; display: flex;
  background: #070d1c;
}
.rea-visual img { width: 100%; height: 100%; object-fit: cover; object-position: 0 0; display: block; }
/* Emplacement en attente d'une capture : motif de la charte, jamais une
   image cassée. Déposer un fichier et renseigner data-img suffit. */
.rea-visual--wait {
  align-items: center; justify-content: center;
  background:
    radial-gradient(78% 60% at 50% 34%, rgba(63, 95, 230, .20), rgba(63, 95, 230, 0) 70%),
    linear-gradient(160deg, #101a3d 0%, #0a1026 60%, #070b18 100%);
}
.rea-visual--wait::before {
  content: ""; position: absolute; inset: 0; opacity: .9;
  background-image: radial-gradient(rgba(255, 255, 255, .22) 1px, transparent 1px);
  background-size: 14px 14px;
  -webkit-mask-image: radial-gradient(68% 58% at 50% 42%, #000, transparent 78%);
          mask-image: radial-gradient(68% 58% at 50% 42%, #000, transparent 78%);
}
/* deux anneaux très diffus, le motif déjà employé sur la page d'accueil */
.rea-visual--wait::after {
  content: ""; position: absolute; left: 50%; top: 42%;
  width: 62%; aspect-ratio: 1; transform: translate(-50%, -50%);
  border-radius: 999em; pointer-events: none;
  border: 1px solid rgba(122, 162, 255, .10);
  box-shadow: 0 0 0 42px rgba(122, 162, 255, .045), inset 0 0 60px rgba(63, 95, 230, .12);
}
.rea-visual__mark { position: relative; display: flex; flex-direction: column; align-items: center; gap: 18px; }
.rea-visual__mark img { width: auto; height: 62px; opacity: .5; filter: brightness(0) invert(1); }
.rea-visual__mark span {
  font-size: 11px; font-weight: 500; letter-spacing: .2em; text-transform: uppercase;
  color: rgba(255, 255, 255, .34);
}

/* ---------- entrée de la carte active ---------- */
/* Rien ne bouge tant que la section n'est pas à l'écran ni tant que la carte
   n'est pas la carte active : une seule mise en scène à la fois. */
.rea-slider.is-armed .rea-slide.is-on .rea-card__id,
.rea-slider.is-armed .rea-slide.is-on .rea-tags,
.rea-slider.is-armed .rea-slide.is-on .rea-desc,
.rea-slider.is-armed .rea-slide.is-on .rea-card__actions { animation: reaIn .72s cubic-bezier(.16, 1, .3, 1) both; }
.rea-slider.is-armed .rea-slide.is-on .rea-tags         { animation-delay: .08s; }
.rea-slider.is-armed .rea-slide.is-on .rea-desc         { animation-delay: .16s; }
.rea-slider.is-armed .rea-slide.is-on .rea-card__actions{ animation-delay: .24s; }
.rea-slider.is-armed .rea-slide.is-on .rea-visual       { animation: reaVisIn .95s cubic-bezier(.16, 1, .3, 1) .06s both; }
@keyframes reaIn {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: none; }
}
@keyframes reaVisIn {
  from { opacity: 0; transform: scale(.98); }
  to   { opacity: 1; transform: scale(1); }
}

/* ---------- archives ---------- */
.rea-arch { padding: 104px 0 118px; }
.rea-arch__head { display: flex; justify-content: space-between; align-items: flex-end; gap: 28px; flex-wrap: wrap; }
.rea-arch h2 {
  font-family: "Instrument Sans", "Inter", sans-serif;
  font-size: clamp(25px, 3vw, 34px); font-weight: 600; letter-spacing: -.035em; margin: 0;
}
.rea-filters { display: flex; flex-wrap: wrap; gap: 8px; }
.rea-filter {
  padding: 9px 17px; border-radius: 999px; cursor: pointer;
  background: #fff; border: 1px solid var(--l-brd);
  font-family: inherit; font-size: 14px; font-weight: 500; color: var(--l-soft);
  transition: color .22s var(--ease), background .22s var(--ease), border-color .22s var(--ease);
}
.rea-filter:hover { color: var(--l-txt); border-color: var(--l-brd2); }
.rea-filter.is-on { background: var(--l-txt); border-color: var(--l-txt); color: #fff; }
.rea-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; margin-top: 34px; }
.rea-tile {
  display: flex; flex-direction: column; overflow: hidden;
  border-radius: 20px; background: var(--l-card); border: 1px solid var(--l-brd);
  transition: opacity .24s var(--ease), transform .24s var(--ease), border-color .24s var(--ease), box-shadow .24s var(--ease);
}
.rea-tile:hover { border-color: var(--l-brd2); box-shadow: 0 20px 40px -30px rgba(11, 16, 32, .5); }
.rea-tile[hidden] { display: none; }
.rea-tile.is-hiding { opacity: 0; transform: scale(.97); }
.rea-tile__vis { display: block; position: relative; aspect-ratio: 16 / 10; overflow: hidden; background: #0a1026; }
.rea-tile__vis img { width: 100%; height: 100%; object-fit: cover; object-position: 0 0; display: block; }
.rea-tile__body { padding: 18px 20px 22px; display: flex; flex-direction: column; gap: 6px; }
.rea-tile__name { font-size: 16px; font-weight: 600; letter-spacing: -.012em; color: var(--l-txt); }
.rea-tile__type { font-size: 12px; font-weight: 500; letter-spacing: .1em; text-transform: uppercase; color: var(--l-soft); }
.rea-tile__link {
  margin-top: 12px; display: inline-flex; align-items: center; gap: 7px;
  font-size: 14px; font-weight: 500; color: var(--blue);
}
.rea-tile__link svg { width: 14px; height: 14px; transition: transform .22s var(--ease); }
.rea-tile:hover .rea-tile__link svg { transform: translateX(3px); }
.rea-tile__soon { margin-top: 12px; font-size: 13px; color: var(--l-soft); }
.rea-arch__empty { margin-top: 30px; font-size: 15px; color: var(--l-soft); }

/* ---------- tablette ---------- */
@media (max-width: 900px) {
  .rea-intro { padding-top: 138px; }
  .rea-show__mark { display: none; }
  .rea-card__col { padding: 28px; gap: 34px; }
  .rea-card__body { gap: 24px; }
  /* La colonne de texte reste sur 5 des 12 colonnes jusqu'à 700 px : elle est
     donc bien plus étroite qu'en desktop et le pli à 5 lignes coupait la
     description. La carte a la hauteur nécessaire, on desserre le pli. */
  .rea-desc { -webkit-line-clamp: 7; }
  .rea-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ---------- mobile ---------- */
/* La carte s'empile : contenu puis visuel, qui garde son débord en bas à
   droite. Le ratio du visuel passe en paysage pour ne pas manger l'écran. */
@media (max-width: 700px) {
  .rea-intro { padding-top: 124px; }
  .rea-show { padding-top: 68px; }
  .rea-slider { padding-top: 30px; }
  .rea-card { display: flex; flex-direction: column; justify-content: space-between; gap: 0; border-radius: 26px; }
  .rea-card__col { padding: 24px; gap: 28px; }
  .rea-card__vis { padding: 4px 0 0 24px; }
  .rea-visual { aspect-ratio: 1440 / 980; border-top-left-radius: 24px; }
  .rea-visual__mark img { height: 46px; }
  /* Le pli à 4 lignes coupait la nouvelle description d'entreprise en plein
     milieu d'une phrase : sur une colonne il faut 6 lignes pour la lire. */
  .rea-desc { -webkit-line-clamp: 6; }
  .rea-tags { gap: 6px; }
  .rea-tag { padding: 5px 12px 5px 9px; font-size: 12.5px; }
  .rea-show__head { flex-direction: column; align-items: stretch; }
  .rea-arch { padding: 76px 0 92px; }
  .rea-arch__head { gap: 20px; }
  .rea-grid { grid-template-columns: minmax(0, 1fr); gap: 16px; margin-top: 26px; }
  .rea-slide:not(.is-on) .rea-card { opacity: .4; }
}

/* ---------- animations réduites ---------- */
@media (prefers-reduced-motion: reduce) {
  .rea-track { transition: none; }
  .rea-slide .rea-card { transition: opacity .18s linear; }
  .rea-slider.is-armed .rea-slide.is-on .rea-card__id,
  .rea-slider.is-armed .rea-slide.is-on .rea-tags,
  .rea-slider.is-armed .rea-slide.is-on .rea-desc,
  .rea-slider.is-armed .rea-slide.is-on .rea-card__actions,
  .rea-slider.is-armed .rea-slide.is-on .rea-visual {
    animation: evFadeIn .2s linear both; animation-delay: 0s !important;
  }
  .rea-tile { transition: opacity .16s linear; }
}

/* =====================================================================
   PIED DE PAGE CLAIR — .ofoot
   Déplacé ici depuis offre.css le 2026-08-23 : /offre/ et /faq/ s'en
   servent toutes les deux, ce n'est plus une règle d'une seule page.
   Même composition que le footer sombre (2fr 1fr 1fr 1fr, gouttière 40,
   64 px de respiration), posée sur le blanc de la page.
   ===================================================================== */
.ofoot { margin-top: 72px; border-top: 1px solid var(--l-brd); background: #fff; }
/* même largeur utile que la grille de la page, pour que le footer reste dans
   son axe : 1272 px de contenu (330 + 22 + 920) + les 26 px de marge latérale */
.ofoot__in, .ofoot__bottom { max-width: 1324px; margin: 0 auto; padding: 0 26px; }
.ofoot__in {
  display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 40px;
  padding-top: 64px; padding-bottom: 44px;
}
.ofoot__logo { display: inline-block; }
.ofoot__logo img { height: 30px; width: auto; display: block; }
.ofoot__brand p { margin: 14px 0 0; max-width: 280px; font-size: 14.5px; line-height: 1.6; color: var(--l-soft); }
.ofoot__col h4 { margin: 0 0 16px; font-size: 14px; font-weight: 600; color: var(--l-txt); }
.ofoot__col a { display: block; margin-bottom: 10px; font-size: 14.5px; color: var(--l-soft); transition: color .2s var(--ease); }
.ofoot__col a:last-child { margin-bottom: 0; }
.ofoot__col a:hover { color: var(--blue-2); }
/* le bleu de marque ne sert qu'à signaler la page courante et le survol */
.ofoot__col a[aria-current="page"] { color: var(--blue-2); }
.ofoot__bottom { padding-bottom: 30px; }
.ofoot__bottom > span {
  display: block; padding-top: 26px; border-top: 1px solid var(--l-brd);
  font-size: 13.5px; color: var(--l-soft);
}
.ofoot__bottom a { transition: color .2s var(--ease); }
.ofoot__bottom a:hover { color: var(--blue-2); }

/* Le repli du pied de page clair suit celui d'origine (/offre/) : la marque
   prend toute la largeur à 980 px et les trois listes restent alignées, puis
   tout passe sur une colonne à 560 px. Sans ces règles le footer garde ses
   quatre colonnes sur mobile et la phrase de marque tombe mot à mot. */
@media (max-width: 980px) {
  .ofoot { margin-top: 56px; }
  .ofoot__in { grid-template-columns: repeat(3, 1fr); gap: 34px 26px; padding-top: 52px; padding-bottom: 36px; }
  .ofoot__brand { grid-column: 1 / -1; }
}
@media (max-width: 560px) {
  .ofoot__in, .ofoot__bottom { padding-left: 16px; padding-right: 16px; }
  .ofoot__in { grid-template-columns: 1fr; gap: 30px; padding-top: 44px; padding-bottom: 30px; }
  .ofoot__brand p { max-width: none; }
  .ofoot__bottom > span { padding-top: 22px; line-height: 1.6; }
}

/* =====================================================================
   PAGES PROJET  (/projects/<slug>/)
   Composition relevée au navigateur sur la page de référence (desktop 1440) :
   rail d'information de 465 px à gauche qui se fige au défilement, pile de
   grands visuels de ~675 px à droite, puis bannière sombre pleine largeur.
   Page BLANCHE ; le seul bloc sombre est la bannière de clôture.
   Composants repris tels quels : .hs__tag, .tt-cta, .ofoot, .reveal.
   ===================================================================== */
.page-projet { background: #fff; }

.pj-top { padding: 132px 0 0; }
/* PAS d'align-items: start ici : il ramènerait les deux colonnes à la hauteur
   de leur contenu, et la colonne du rail n'aurait alors aucune course pour se
   figer. Les colonnes s'étirent donc sur la hauteur de la rangée (défaut). */
.pj-grid {
  display: grid; grid-template-columns: 465px minmax(0, 1fr);
  gap: clamp(28px, 3vw, 42px);
}

/* ---------- rail d'information ---------- */
/* sticky : le rail accompagne la pile au lieu de disparaître. align-self
   start est indispensable, sinon la grille l'étire et il ne colle jamais. */
/* Le rail est figé PAR RAPPORT à sa colonne, pas dans sa propre boîte : un
   élément sticky ne peut se déplacer que dans son bloc conteneur. Posé
   directement sur la case de grille avec `align-self: start`, la case ne fait
   que la hauteur du rail — donc aucune course possible, et rien ne se fige
   (mesuré). D'où la colonne .pj-railcol, étirée sur toute la hauteur de la
   rangée, et le rail sticky à l'intérieur. */
.pj-railcol { position: relative; height: 100%; }
.pj-rail { position: static; }
@media (min-height: 990px) {
  /* On ne fige que si la fenêtre peut montrer le rail en entier (862 px de
     haut + 104 px sous la barre de navigation) : sinon sa fin serait coupée
     en permanence, ce qui est pire que pas de figeage du tout. */
  .pj-rail { position: sticky; top: 104px; }
}
.pj-back {
  display: inline-flex; align-items: center; gap: 7px; margin-bottom: 26px;
  font-size: 13.5px; font-weight: 500; color: var(--l-soft);
  transition: color .22s var(--ease);
}
.pj-back svg { width: 14px; height: 14px; transition: transform .22s var(--ease); }
.pj-back:hover { color: var(--l-txt); }
.pj-back:hover svg { transform: translateX(-3px); }

.pj-id { display: flex; align-items: center; gap: 15px; }
.pj-logo {
  width: 50px; height: 50px; flex: none; border-radius: 14px; overflow: hidden;
  display: flex; align-items: center; justify-content: center; background: #fff;
  box-shadow: inset 0 0 0 1px var(--l-brd), 0 10px 26px -16px rgba(11, 16, 32, .5);
}
.pj-logo img { width: 100%; height: 100%; object-fit: contain; padding: 8px; }
.pj-name {
  font-family: "Sora", "Inter", sans-serif; font-weight: 800;
  font-size: clamp(38px, 4.2vw, 60px); line-height: 1.02; letter-spacing: -.035em;
  color: var(--l-txt); margin: 0;
}
.pj-tags { display: flex; flex-wrap: wrap; gap: 8px; margin: 22px 0 0; }
.pj-desc { margin: 20px 0 0; font-size: 15.5px; line-height: 1.62; color: var(--l-soft); }

.pj-actions { display: grid; gap: 8px; margin: 24px 0 30px; }
/* Bouton du rail : pleine largeur, très sobre — la référence pose des
   boutons qui occupent toute la colonne, pas des pastilles flottantes. */
.pj-btn {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  width: 100%; height: 46px; padding: 0 18px; border-radius: 14px;
  font-size: 14.5px; font-weight: 600; letter-spacing: -.01em;
  transition: background .22s var(--ease), color .22s var(--ease), transform .22s var(--ease), box-shadow .22s var(--ease);
}
.pj-btn svg { width: 14px; height: 14px; flex: none; transition: transform .22s var(--ease); }
.pj-btn--main {
  color: #fff; background: linear-gradient(180deg, var(--blue-2), var(--blue));
  box-shadow: 0 12px 30px -12px var(--blue-glow), inset 0 1px 0 rgba(255, 255, 255, .25);
}
.pj-btn--main:hover { transform: translateY(-1px); box-shadow: 0 18px 40px -12px var(--blue-glow); }
.pj-btn--main:hover svg { transform: translateX(3px); }
/* Second bouton du rail (témoignage vidéo) : même gabarit, en retrait du
   bouton principal pour ne pas lui disputer le regard. Rendu seulement si le
   projet porte un champ `video` dans data.js. */
.pj-btn--video {
  color: var(--l-txt); background: var(--l-card);
  box-shadow: inset 0 0 0 1px var(--l-brd);
}
.pj-btn--video:hover { color: var(--blue); box-shadow: inset 0 0 0 1px rgba(63,95,230,.4); }
.pj-btn--video svg { width: 16px; height: 16px; }

/* ---------- accordéons du rail ---------- */
.pj-acc { border-top: 1px solid var(--l-brd); }
.pj-acc:last-of-type { border-bottom: 1px solid var(--l-brd); }
.pj-acc > summary {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 18px 2px; cursor: pointer; list-style: none;
}
.pj-acc > summary::-webkit-details-marker { display: none; }
.pj-acc__label { font-size: 14.5px; font-weight: 600; color: var(--l-txt); }
.pj-acc[open] .pj-acc__label { color: var(--blue); }
.pj-acc__sign { position: relative; width: 26px; height: 26px; flex: none; border-radius: 50%; background: rgba(63, 95, 230, .08); }
.pj-acc__sign::before, .pj-acc__sign::after {
  content: ""; position: absolute; left: 50%; top: 50%; width: 9px; height: 1.5px;
  background: var(--blue); border-radius: 2px; transform: translate(-50%, -50%);
  transition: opacity .22s var(--ease);
}
.pj-acc__sign::after { transform: translate(-50%, -50%) rotate(90deg); }
.pj-acc[open] .pj-acc__sign::after { opacity: 0; }
.pj-acc__body { padding: 2px 2px 24px; }
.pj-block { padding-left: 16px; border-left: 2px solid rgba(63, 95, 230, .16); margin-bottom: 22px; }
.pj-block:last-child { margin-bottom: 0; }
.pj-chip {
  display: inline-block; margin-bottom: 10px; padding: 4px 10px; border-radius: 8px;
  font-size: 10.5px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  color: var(--blue); background: rgba(29, 52, 196, .07);
}
.pj-block p { margin: 0; font-size: 14.5px; line-height: 1.65; color: var(--l-soft); }
.pj-points { list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 9px; }
.pj-points li {
  position: relative; padding-left: 24px;
  font-size: 14px; line-height: 1.5; color: var(--l-txt); font-weight: 500;
}
.pj-points li::before {
  content: ""; position: absolute; left: 1px; top: 5px; width: 13px; height: 8px;
  border-left: 1.7px solid var(--blue-2); border-bottom: 1.7px solid var(--blue-2);
  transform: rotate(-45deg); border-radius: 1px;
}

/* Équipe du rail : deux portraits carrés côte à côte, rôle en gris dessous,
   nom dans une pastille sombre. Composition reprise de la référence. */
.pj-team {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(14px, 1.6vw, 22px); padding: 2px 0 4px; justify-items: center;
}
.pj-team__card {
  margin: 0; display: flex; flex-direction: column; align-items: center; gap: 11px;
  width: 100%; max-width: 168px;
}
.pj-team__ph {
  width: 100%; aspect-ratio: 1; border-radius: clamp(20px, 2vw, 26px);
  overflow: hidden; background: #e8ecf5;
  box-shadow: 0 20px 38px -24px rgba(11, 16, 32, .55), inset 0 0 0 1px rgba(11, 16, 32, .05);
}
.pj-team__ph img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform .5s var(--ease);
}
.pj-team__card:hover .pj-team__ph img { transform: scale(1.045); }
.pj-team__role { font-size: 13px; line-height: 1.3; color: var(--l-soft); text-align: center; }
/* La pastille porte le nom : c'est l'élément que l'œil retient, elle est
   donc la seule zone sombre du bloc. */
.pj-team__name {
  display: inline-flex; align-items: center; height: 33px; padding: 0 15px;
  border-radius: 999px; background: var(--l-txt); color: #fff;
  font-size: 13.5px; font-weight: 600; letter-spacing: -.01em; white-space: nowrap;
}
@media (prefers-reduced-motion: reduce) {
  .pj-team__ph img, .pj-team__card:hover .pj-team__ph img { transition: none; transform: none; }
}

/* ---------- pile de visuels ---------- */
/* Chaque visuel est posé dans un cadre clair légèrement plus grand que lui :
   c'est ce liseré qui donne l'effet « écran présenté », pas une vignette. */
.pj-stack { display: grid; gap: clamp(20px, 2.2vw, 30px); }
.pj-card { margin: 0; }
.pj-card__frame {
  padding: 14px; border-radius: 26px; background: var(--l-card);
  box-shadow: inset 0 0 0 1px var(--l-brd);
  display: flex; align-items: center; justify-content: center;
}
.pj-card__frame img { width: 100%; height: auto; border-radius: 16px; display: block; }
/* Emplacement en attente, volontairement CLAIR : un aplat sombre à la place
   d'une capture attirait plus l'œil que les vraies captures. Il doit se faire
   oublier jusqu'à l'arrivée du visuel. */
.pj-card__wait {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px;
  width: 100%; aspect-ratio: 60 / 36; border-radius: 16px;
  background: #eef1f7; box-shadow: inset 0 0 0 1px rgba(11, 16, 32, .05);
}
.pj-card__wait img { width: auto; height: 34px; opacity: .22; }
.pj-card__wait > span {
  font-size: 10.5px; font-weight: 500; letter-spacing: .2em; text-transform: uppercase;
  color: rgba(75, 85, 114, .55);
}
.pj-card__cap { padding: 20px 4px 0; max-width: 58ch; }
.pj-card__num {
  display: block; font-family: ui-monospace, "SFMono-Regular", Menlo, monospace;
  font-size: 11.5px; font-weight: 600; letter-spacing: .1em; color: var(--blue); margin-bottom: 8px;
}
.pj-card__title {
  font-family: "Sora", "Inter", sans-serif; font-weight: 700;
  font-size: clamp(19px, 1.9vw, 23px); line-height: 1.22; letter-spacing: -.02em;
  color: var(--l-txt); margin: 0 0 8px;
}
.pj-card__text { margin: 0; font-size: 15px; line-height: 1.62; color: var(--l-soft); }

/* ---------- bannière de clôture ---------- */
.pj-final { padding: clamp(90px, 8vw, 128px) 0 0; }
.pj-band {
  border-radius: 40px; padding: clamp(48px, 5.4vw, 86px) clamp(24px, 4vw, 64px);
  text-align: center; color: #fff;
  background:
    radial-gradient(88% 70% at 50% 0%, rgba(63, 95, 230, .26), rgba(63, 95, 230, 0) 62%),
    linear-gradient(168deg, #0b1430 0%, #080e22 58%, #05060a 100%);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .07), 0 50px 100px -60px rgba(11, 16, 32, .8);
}
.pj-band__tag {
  display: inline-block; font-family: ui-monospace, "SFMono-Regular", Menlo, monospace;
  font-size: 12px; font-weight: 600; letter-spacing: .14em; color: #c3d0ff; margin-bottom: 18px;
}
.pj-band__title {
  font-family: "Sora", "Inter", sans-serif; font-weight: 800;
  font-size: clamp(28px, 3.6vw, 50px); line-height: 1.1; letter-spacing: -.035em;
  margin: 0 auto 18px; max-width: 18ch;
}
/* color EXPLICITE en double classe : `.sec--light h1, h2, h3, h4` (classe +
   élément) est plus spécifique qu'une simple classe et repeindrait ce titre
   en bleu nuit sur bleu nuit. Même piège pour tout titre d'un bloc sombre
   posé dans une section claire. */
.sec--light .pj-band__title { color: #fff; }
.pj-band__sub { margin: 0 auto 28px; max-width: 62ch; font-size: 16px; line-height: 1.62; color: var(--gray-2); }
.pj-band__btn { margin: 0 auto; }
.pj-band__note { margin: 14px 0 0; font-size: 13.5px; font-weight: 500; color: var(--gray); }

.pj-avis {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px;
  margin-top: clamp(40px, 4vw, 58px); padding-top: clamp(32px, 3vw, 44px);
  border-top: 1px solid rgba(255, 255, 255, .09); text-align: left;
}
.pj-avis__item { margin: 0; padding: 22px; border-radius: 20px; background: rgba(255, 255, 255, .04); }
.pj-avis__item blockquote { margin: 0 0 16px; font-size: 14.5px; line-height: 1.6; color: #e9f0ff; text-wrap: balance; }
.pj-avis__item figcaption { display: flex; align-items: center; gap: 10px; }
.pj-avis__ava { width: 32px; height: 32px; flex: none; border-radius: 50%; overflow: hidden; background: #0d1530; }
.pj-avis__ava img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pj-avis__id strong { display: block; font-size: 13.5px; font-weight: 600; }
.pj-avis__id span { font-size: 12.5px; color: var(--gray); }
.pj-avis__stars { margin-top: 12px; color: #f5a623; font-size: 13.5px; letter-spacing: .14em; line-height: 1; }

/* ---------- tablette : le rail repasse au-dessus de la pile ---------- */
@media (max-width: 1080px) {
  .pj-grid { grid-template-columns: minmax(0, 1fr); gap: 44px; }
  .pj-rail { position: static; max-width: 620px; }
  .pj-avis { grid-template-columns: minmax(0, 1fr); }
}

/* ---------- mobile ---------- */
@media (max-width: 700px) {
  .pj-top { padding-top: 112px; }
  .pj-logo { width: 44px; height: 44px; border-radius: 12px; }
  .pj-card__frame { padding: 9px; border-radius: 20px; }
  .pj-card__frame img, .pj-card__wait { border-radius: 13px; }
  .pj-card__cap { padding-top: 16px; }
  .pj-final { padding-top: 76px; }
  .pj-band { border-radius: 28px; }
  .pj-band__btn { width: 100%; justify-content: center; }
}

/* =====================================================================
   ACCUEIL — PONT « CE QUE NOUS AUTOMATISONS »
   Section de transition entre la preuve d'autorité et les réalisations.
   Volontairement pauvre en CSS : elle n'apporte aucun composant, elle
   assemble ceux du site (.section-head--chip, .eyebrow, .section-sub,
   les pills .rea-tag et .btn--primary). Seuls le rythme vertical et le
   centrage sont définis ici.
   ===================================================================== */
.autom { padding: 94px 0 98px; }
.autom .section-head { margin-bottom: 30px; }
.autom .section-head h2 { font-size: clamp(26px, 3.6vw, 38px); }
/* Les pills reprennent le composant de /realisations/ : mêmes cotes, même
   peinture. Ici elles sont centrées et se replient d'elles-mêmes. */
.autom__tags { justify-content: center; max-width: 620px; margin: 0 auto; }
.autom__cta { display: flex; justify-content: center; margin-top: 34px; }
.autom__cta .btn svg { width: 15px; height: 15px; flex: none; }

@media (max-width: 700px) {
  .autom { padding: 66px 0 70px; }
  .autom .section-head { margin-bottom: 24px; }
  .autom__cta .btn { width: 100%; }
}

/* =====================================================================
   ACCUEIL — SHOWCASE RÉALISATIONS
   ---------------------------------------------------------------------
   Remplace l'ancienne section projets. Composition reprise de la section
   « works » de la page d'accueil de Pulsor, transposée à la charte
   Envision IA. Cotes relevées sur la référence en 1440 :
   rail 1280 (contenu 1200), titre 60 px sur 2 lignes à gauche et les deux
   CTA alignés en bas à droite, puis deux colonnes de 600 px — à gauche une
   fenêtre de 640 px de haut où défilent verticalement des visuels en
   60/36, à droite les flèches puis les informations, le tout centré
   verticalement. Le fondu haut/bas de la fenêtre laisse deviner le projet
   suivant : c'est lui qui donne la sensation de défilement.
   ===================================================================== */
.hs { position: relative; }
.hs__rail { width: 100%; max-width: 1280px; margin: 0 auto; padding: 0 40px; }

/* ---------- ligne du haut : titre + CTA ---------- */
.hs__head { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; }
.hs__title {
  font-family: "Instrument Sans", "Inter", sans-serif;
  /* La largeur est calée pour que la phrase tienne sur DEUX lignes comme sur
     la référence : au-delà, « concrètement » bascule sur une 3e ligne et la
     composition perd son équilibre avec les deux boutons. */
  font-size: clamp(32px, 3.8vw, 52px); font-weight: 600;
  line-height: 1.08; letter-spacing: -.042em;
  max-width: 14.6em; margin: 0; color: var(--l-txt); text-wrap: balance;
}
/* Contrairement au titre de leur page Réalisations, celui-ci est monochrome
   sur la référence : le bicolore cassait l'impact recherché. */
.hs__title em { font-style: normal; color: inherit; }
.hs__cta { display: flex; align-items: center; gap: 10px; flex: none; }
.hs__cta .btn { height: 50px; padding: 0 24px; font-size: 15px; }
.hs__cta .btn svg { width: 15px; height: 15px; flex: none; }

/* ---------- les deux colonnes ---------- */
.hs__layout {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0; margin-top: 24px;
}

/* colonne visuels : une fenêtre fixe, estompée en haut et en bas */
.hs__visuals {
  position: relative; width: 100%; height: 640px;
  padding: 16px 24px 16px 0;
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 20%, #000 80%, transparent 100%);
          mask-image: linear-gradient(180deg, transparent 0%, #000 20%, #000 80%, transparent 100%);
}
.hs__vtrack {
  display: flex; flex-direction: column; gap: 4px;
  transition: transform .6s cubic-bezier(.66, .01, .17, .97);
  will-change: transform;
}
.hs__shot {
  position: relative; width: 100%; aspect-ratio: 60 / 36; flex: none;
  border-radius: 18px; overflow: hidden; background: #0a1026;
  transition: opacity .6s cubic-bezier(.66, .01, .17, .97);
}
.hs__shot:not(.is-on) { opacity: .5; }
.hs__shot img {
  width: 100%; height: 100%; object-fit: cover; object-position: 50% 0;
  display: block; transition: transform .6s cubic-bezier(.16, 1, .3, 1);
}
/* Filet intérieur : la capture AXILAB est claire jusqu'à ses bords, et la
   section est blanche — sans lui, le bas et le coin bas-droit de la carte se
   fondraient dans la page. En ::after et non en box-shadow inset, qui passerait
   SOUS l'image. Invisible sur les visuels sombres (10 % de noir sur du bleu nuit). */
.hs__shot::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit;
  box-shadow: inset 0 0 0 1px var(--l-brd); pointer-events: none;
}

/* survol : l'image respire, le cadre ne bouge pas */
.hs__shot.is-on:hover img { transform: scale(1.015); }

/* Carte portant un visuel plus large que le cadre (montage 16/9 contre 60/36).
   « cover » rognerait la gauche et la droite du montage, or son cadre clair
   fait partie de l'image : on l'affiche donc en entier. Les deux fines bandes
   qui restent en haut et en bas sont peintes aux couleurs relevées sur les
   bords du fichier (#0a0f25 en haut, #101321 en bas) : la jointure ne se voit
   pas et le visuel a l'air posé dans la carte, pas collé dedans. */
/* Le visuel ALUGA ne remplit pas toute la carte (16/9 dans un cadre 60/36) et
   ses coins sont transparents. Ces deux valeurs sont la couleur MESURÉE de la
   1re et de la dernière ligne du fichier : bandes et coins deviennent donc
   invisibles. À remesurer si le visuel change. */
.hs__shot--fit { background: linear-gradient(180deg, #03081f 0%, #070c19 100%); }
.hs__shot--fit img { object-fit: contain; object-position: 50% 50%; }

/* ---- clic + glisser sur la pile ----------------------------------------
   .is-draggable est posé par le module UNIQUEMENT là où la pile coulisse
   vraiment (au-dessus de 1000 px) : en dessous, .hs__vtrack est figé par la
   requête média et le curseur « grab » mentirait au visiteur.
   Pendant le geste, la piste ne doit obéir qu'à la main : on coupe sa
   transition, ainsi que celle des opacités, pilotées image par image.
   Le retour en place a sa propre courbe, plus courte que la validation
   (600 ms) : on doit sentir que rien ne s'est passé. */
.hs.is-draggable .hs__visuals { cursor: grab; }
.hs.is-draggable .hs__visuals,
.hs.is-draggable .hs__visuals * { -webkit-user-select: none; user-select: none; }
.hs__visuals img { -webkit-user-drag: none; user-drag: none; }
.hs.is-dragging .hs__visuals { cursor: grabbing; }
.hs.is-dragging .hs__vtrack { transition: none; }
.hs.is-dragging .hs__shot { transition: none; }
/* le zoom de survol ne doit pas s'inviter au milieu d'un glissement */
.hs.is-dragging .hs__shot img { transform: none; }
.hs.is-snapback .hs__vtrack { transition: transform .46s cubic-bezier(.16, 1, .3, 1); }

/* Emplacement en attente d'une capture : motif de la charte, jamais une
   image cassée. Déposer le fichier et remplacer le bloc par un <img>. */
.hs__wait {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  background:
    radial-gradient(78% 62% at 50% 40%, rgba(63, 95, 230, .20), rgba(63, 95, 230, 0) 70%),
    linear-gradient(158deg, #101a3d 0%, #0a1026 60%, #070b18 100%);
}
.hs__wait::before {
  content: ""; position: absolute; inset: 0; opacity: .9;
  background-image: radial-gradient(rgba(255, 255, 255, .22) 1px, transparent 1px);
  background-size: 14px 14px;
  -webkit-mask-image: radial-gradient(66% 60% at 50% 44%, #000, transparent 78%);
          mask-image: radial-gradient(66% 60% at 50% 44%, #000, transparent 78%);
}
.hs__wait span { position: relative; display: flex; flex-direction: column; align-items: center; gap: 14px; }
.hs__wait img { width: auto; height: 44px; opacity: .5; filter: brightness(0) invert(1); }
.hs__wait b {
  font-size: 10.5px; font-weight: 500; letter-spacing: .2em; text-transform: uppercase;
  color: rgba(255, 255, 255, .34);
}

/* colonne informations : flèches puis contenu, centrés verticalement */
.hs__side { display: flex; align-items: center; gap: 24px; }

.hs__nav {
  display: flex; flex-direction: column; gap: 6px; flex: none;
  padding: 4px; border-radius: 999px; background: var(--l-card); border: 1px solid var(--l-brd);
}
.hs__nav button {
  width: 38px; height: 38px; border-radius: 999px; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  background: #fff; border: 1px solid var(--l-brd); color: #545a63;
  box-shadow: 0 1px 2px rgba(11, 16, 32, .06);
  transition: color .22s var(--ease), border-color .22s var(--ease), transform .22s var(--ease), opacity .22s var(--ease);
}
.hs__nav button svg { width: 16px; height: 16px; display: block; }
.hs__nav button:hover:not(:disabled) { color: var(--blue); border-color: rgba(29, 52, 196, .35); transform: translateY(-1px); }
.hs__nav button:disabled { opacity: .38; cursor: default; box-shadow: none; }

/* Les fiches sont empilées dans la même case : celle qui part s'efface,
   celle qui arrive monte. Aucune hauteur ne bouge pendant l'échange. */
.hs__infos { position: relative; flex: 1 1 auto; min-width: 0; display: grid; }
.hs__info {
  grid-area: 1 / 1; display: flex; flex-direction: column; gap: 40px;
  transition: opacity .42s var(--ease), transform .42s cubic-bezier(.16, 1, .3, 1);
}
.hs__info:not(.is-on) { opacity: 0; transform: translateY(14px); pointer-events: none; }
.hs__info.is-out { opacity: 0; transform: translateY(-12px); }

.hs__id { display: flex; align-items: center; gap: 16px; }
.hs__logo {
  width: 44px; height: 44px; flex: none; border-radius: 12px; overflow: hidden;
  display: flex; align-items: center; justify-content: center;
  background: #fff; box-shadow: 0 1px 3px rgba(11, 16, 32, .12), inset 0 0 0 1px rgba(11, 16, 32, .06);
}
.hs__logo img { width: 100%; height: 100%; object-fit: contain; padding: 6px; }
.hs__name {
  font-family: "Instrument Sans", "Inter", sans-serif;
  font-size: 32px; font-weight: 600; letter-spacing: -.015em; line-height: 1.1;
  color: var(--l-txt); margin: 0;
}

.hs__tags { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: -22px 0 -22px; }
.hs__tag {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 16px 6px 10px; border-radius: 999px;
  font-size: 14px; font-weight: 500; line-height: 1.2;
  color: var(--blue); background: rgba(29, 52, 196, .05);
}
.hs__tag svg { width: 13px; height: 13px; flex: none; opacity: .85; }

.hs__desc {
  font-size: 16px; line-height: 1.45; color: var(--l-soft);
  max-width: 530px; margin: 0;
}

.hs__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
/* Boutons de projet : gris très léger, sans bordure marquée, compacts et
   très arrondis — la retenue de la référence. */
.hs__btn {
  display: inline-flex; align-items: center; gap: 8px;
  height: 42px; padding: 0 18px; border-radius: 999px;
  font-family: inherit; font-size: 14.5px; font-weight: 500; color: var(--l-txt);
  background: var(--l-card); border: 1px solid transparent;
  transition: background .22s var(--ease), color .22s var(--ease), transform .22s var(--ease);
}
.hs__btn svg { width: 14px; height: 14px; transition: transform .22s var(--ease); }
.hs__btn:hover { background: #eef1fa; transform: translateY(-1px); }
.hs__btn:hover svg { transform: translateX(3px); }
.hs__btn--line { background: transparent; border-color: var(--l-brd2); }
.hs__btn--line:hover { background: var(--l-card); }
/* état d'attente : lien pas encore fourni, le libellé reste inerte plutôt
   que de publier un bouton qui ne mène nulle part. */
.hs__btn--wait {
  border-style: dashed; opacity: .5; cursor: default; pointer-events: none;
}
.hs__btn--wait svg { width: 16px; height: 16px; }

/* ---------- entrée au scroll ---------- */
/* Un seul passage : le titre, puis les CTA, puis le showcase. */
.hs__head, .hs__layout { opacity: 0; transform: translateY(25px); }
.hs.is-in .hs__title  { animation: hsIn .8s cubic-bezier(.16, 1, .3, 1) both; }
.hs.is-in .hs__cta    { animation: hsIn .8s cubic-bezier(.16, 1, .3, 1) .1s both; }
.hs.is-in .hs__head   { opacity: 1; transform: none; }
.hs.is-in .hs__layout { animation: hsIn .9s cubic-bezier(.16, 1, .3, 1) .2s both; }
@keyframes hsIn {
  from { opacity: 0; transform: translateY(25px); }
  to   { opacity: 1; transform: none; }
}

/* ---------- tablette : une colonne, la fenêtre se réduit ---------- */
@media (max-width: 1000px) {
  .hs__rail { padding: 0 28px; }
  .hs__head { flex-direction: column; align-items: stretch; gap: 26px; }
  .hs__title { max-width: none; }
  .hs__layout { grid-template-columns: minmax(0, 1fr); margin-top: 40px; }
  .hs__visuals { height: auto; padding: 0; -webkit-mask-image: none; mask-image: none; }
  /* plus de fenêtre à fondu : sur une colonne, seul le projet actif est
     montré, l'aperçu du suivant n'aurait plus de sens vertical. */
  .hs__vtrack { transform: none !important; display: grid; }
  .hs__shot { grid-area: 1 / 1; transition: opacity .42s var(--ease); }
  .hs__shot:not(.is-on) { opacity: 0; pointer-events: none; }
  .hs__side { flex-direction: column-reverse; align-items: stretch; gap: 28px; margin-top: 28px; }
  .hs__nav { flex-direction: row; align-self: flex-start; }
  .hs__info { gap: 30px; }
}

/* ---------- mobile ---------- */
@media (max-width: 640px) {
  .hs__rail { padding: 0 22px; }
  .hs__cta { flex-direction: column; align-items: stretch; }
  .hs__cta .btn { width: 100%; justify-content: center; }
  .hs__name { font-size: 26px; }
  .hs__tags { margin: -18px 0; }
  .hs__desc { font-size: 15.5px; }
  .hs__actions .hs__btn { flex: 1 1 auto; justify-content: center; }
  .hs__wait img { height: 34px; }
}

/* ---------- animations réduites ---------- */
@media (prefers-reduced-motion: reduce) {
  .hs__vtrack, .hs__shot, .hs__shot img, .hs__info { transition: opacity .18s linear; }
  .hs.is-in .hs__title, .hs.is-in .hs__cta, .hs.is-in .hs__layout {
    animation: evFadeIn .2s linear both; animation-delay: 0s !important;
  }
  .hs__shot.is-on:hover img { transform: none; }
}

/* =========================================================================
   Page Réalisations — bannière de clôture.
   Reprend le visuel fourni par le client : fond bleu nuit, trame de points,
   halos latéraux, titre à deux couleurs, bouton bleu lumineux. La trame est
   la bande haute du fichier d'origine (assets/images/cta-grid.webp), répétée
   verticalement : ses colonnes de points sont régulières, elle se raccorde
   donc sans couture. Tout le reste (dégradé, halos, lueur du bouton) est
   refait en CSS, aux couleurs relevées sur le fichier — le texte reste du
   HTML, donc lisible, sélectionnable et adaptable à toutes les largeurs.
   ========================================================================= */

/* La section reste sur le fond blanc de la page : c'est la boîte intérieure
   qui est sombre. Le footer arrive donc après un espace blanc. */
.rcta { padding: 96px 0 0; }
/* La bannière ne suit pas la largeur du contenu : comme sur la référence, elle
   file presque d'un bord à l'autre et ne garde qu'un retrait latéral discret,
   qui s'ouvre un peu sur les très grands écrans et se resserre sur mobile. */
.rcta__wrap { padding: 0 clamp(16px, 1.4vw, 30px); }

.rcta__box {
  position: relative; overflow: hidden;
  border-radius: 30px;
  padding: clamp(58px, 8vw, 116px) clamp(24px, 5vw, 76px) clamp(48px, 6vw, 84px);
  text-align: center;
  background: #000c26;
  box-shadow: 0 46px 100px -46px rgba(6,10,26,.75);
}
/* Trame du visuel d'origine, volontairement très discrète : sur la référence
   l'écart entre la trame et le fond est d'un niveau sur 255. Le pseudo-élément
   déborde du cadre pour pouvoir dériver sans laisser de vide, et n'anime que
   `transform` — aucune propriété qui forcerait un recalcul de mise en page. */
.rcta__box::before {
  content: ""; position: absolute; inset: -8% -6%; pointer-events: none;
  background: url(../images/cta-grid.webp?v=1) top center / 100% auto repeat-y;
  opacity: .30;
  will-change: transform;
  animation: rctadrift 42s linear infinite alternate;
}
@keyframes rctadrift {
  from { transform: translate3d(-1.6%, -1.4%, 0); }
  to   { transform: translate3d( 1.6%,  1.4%, 0); }
}
/* Halos latéraux très adoucis et dégradé vertical. Pas de halo central : à
   l'endroit du titre il éclaircissait le fond et faisait passer le bleu du
   titre sous le seuil de contraste. Le halo respire lentement :
   seule l'opacité varie, ce qui reste imperceptible mais empêche le bloc de
   paraître figé. */
.rcta__box::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(46% 38% at 0% 45%, rgba(1,40,148,.34), rgba(1,40,148,0) 72%),
    radial-gradient(46% 38% at 100% 45%, rgba(1,36,138,.34), rgba(1,36,138,0) 72%),
    linear-gradient(180deg, rgba(0,12,38,.18) 0%, rgba(1,13,41,.52) 58%, rgba(2,13,41,.90) 100%);
  animation: rctabreathe 16s ease-in-out infinite;
}
@keyframes rctabreathe {
  0%, 100% { opacity: .92; }
  50%      { opacity: 1; }
}
/* la bannière étant large, le titre a la place de tenir sur deux lignes à
   sa nouvelle taille ; le sous-titre et les avis gardent leur propre
   largeur de lecture, plus étroite. */
.rcta__in { position: relative; z-index: 1; max-width: 1060px; margin: 0 auto; }

.rcta__title {
  font-family: "Sora","Inter",sans-serif;
  font-size: clamp(34px, 5.4vw, 66px); font-weight: 800;
  line-height: 1.06; letter-spacing: -.018em; color: #fff;
  margin: 0 0 22px; text-wrap: balance;
}
/* le bleu du visuel d'origine ; à cette taille il passe le seuil de contraste */
.rcta__title em { font-style: normal; color: #1e4ef6; }
.rcta__sub {
  font-size: clamp(16.5px, 1.7vw, 20.5px); line-height: 1.6;
  color: rgba(255,255,255,.74); max-width: 680px; margin: 0 auto 36px;
}
/* même intention que le visuel, un ton plus clair : la ligne est petite et
   le bleu d'origine n'y serait plus assez lisible */
.rcta__sub b { display: block; font-weight: 600; color: #5b83ff; }

/* CTA : le bouton bleu lumineux du visuel */
.rcta__btn {
  display: inline-flex; align-items: center; gap: 10px;
  font-size: 15.5px; font-weight: 600; color: #fff;
  background: linear-gradient(180deg, #2a5bff, #0732ea);
  border-radius: 999px; padding: 16px 30px;
  box-shadow: 0 0 0 1px rgba(120,155,255,.35),
              0 10px 30px -6px rgba(12,60,240,.75),
              0 0 60px -6px rgba(30,78,246,.55);
  transition: transform .22s var(--ease), box-shadow .22s var(--ease), filter .22s var(--ease);
}
.rcta__btn:hover {
  transform: translateY(-1px); filter: brightness(1.06);
  box-shadow: 0 0 0 1px rgba(150,180,255,.45),
              0 14px 36px -6px rgba(12,60,240,.85),
              0 0 74px -6px rgba(30,78,246,.7);
}
.rcta__btn:focus-visible { outline: 2px solid #b9c6ff; outline-offset: 3px; }
.rcta__btn svg { width: 15px; height: 15px; }

/* ---- Avis clients, sous le bouton ----
   Même mécanique que le carrousel de la page Offre : fondu enchaîné en CSS
   pur, 12 s par cycle, pause au survol. Seules les couleurs sont adaptées. */
.rcta__tm { margin-top: 52px; }
.rcta__stage { display: grid; max-width: 620px; margin: 0 auto; }
.rcta__item {
  grid-area: 1 / 1; text-align: center;
  opacity: 0;
  animation: rctafade 12s ease-in-out infinite both;
}
.rcta__item:nth-child(2) { animation-delay: 4s; }
.rcta__item:nth-child(3) { animation-delay: 8s; }
.rcta__tm:hover .rcta__item { animation-play-state: paused; }
@keyframes rctafade {
  0%   { opacity: 0; transform: translateY(6px); }
  6%   { opacity: 1; transform: none; }
  27%  { opacity: 1; transform: none; }
  33%  { opacity: 0; transform: translateY(-6px); }
  100% { opacity: 0; transform: translateY(-6px); }
}
.rcta__quote { font-size: 15.5px; line-height: 1.62; color: rgba(255,255,255,.84); margin: 0 0 15px; text-wrap: balance; }
.rcta__who { display: flex; align-items: center; justify-content: center; gap: 10px; flex-wrap: wrap; }
.rcta__ava { width: 34px; height: 34px; flex: none; border-radius: 50%; overflow: hidden; background: rgba(255,255,255,.1); }
.rcta__ava img { width: 100%; height: 100%; object-fit: cover; display: block; }
.rcta__name { font-size: 13.5px; font-weight: 600; color: #fff; }
.rcta__org { font-weight: 400; color: rgba(255,255,255,.58); }
.rcta__sep { color: rgba(255,255,255,.22); }
.rcta__stars { color: #f5a623; font-size: 15px; letter-spacing: .16em; line-height: 1; }

/* ---------------- Responsive ---------------- */
@media (max-width: 760px) {
  .rcta { padding: 70px 0 0; }
  /* on rejoint le retrait des autres sections : coller aux bords ferait sale */
  .rcta__wrap { padding: 0 16px; }
  .rcta__box { border-radius: 24px; padding-top: 52px; padding-bottom: 44px; }
  .rcta__title { font-size: clamp(29px, 8.2vw, 40px); letter-spacing: -.012em; }
  .rcta__sub { font-size: 16.5px; margin-bottom: 30px; }
  .rcta__btn { width: 100%; justify-content: center; padding: 17px 24px; }
  .rcta__tm { margin-top: 38px; }
  .rcta__quote { font-size: 15px; }
  /* le nom et les étoiles passent sous la photo plutôt que de se serrer */
  .rcta__who { gap: 8px; }
}
@media (prefers-reduced-motion: reduce) {
  .rcta__item { animation: none; opacity: 0; }
  .rcta__item:first-child { opacity: 1; }
  .rcta__btn { transition: none; }
  /* le fond ne bouge plus du tout */
  .rcta__box::before { animation: none; transform: none; }
  .rcta__box::after { animation: none; opacity: 1; }
}