/* landing.css — hero intégré en production — système body.dark */

/* Scroll container pour home + section 2.
   align-items:flex-start évite que flex center coupe le haut quand
   le contenu dépasse 100vh (hero + section2 = ~200vh). */
#auth-layer { overflow-y: auto; align-items: flex-start; }

:root {
  --nav-h: 72px;
  --font:  'Inter', system-ui, -apple-system, sans-serif;
  --bg:    #030014;
  /* Accent contextuel par page — valeurs homepage par défaut */
  --page-accent-1: #3E72F5;
  --page-accent-2: #7c3aed;
  --page-accent-soft: rgba(62,114,245,0.12);
  --page-accent-border: rgba(62,114,245,0.30);
  --page-accent-glow: rgba(62,114,245,0.18);
  --page-accent-text: #3E72F5;
}

body[data-page-accent="homepage"] {
  --page-accent-1: #3E72F5;
  --page-accent-2: #7c3aed;
  --page-accent-soft: rgba(62,114,245,0.12);
  --page-accent-border: rgba(62,114,245,0.30);
  --page-accent-glow: rgba(62,114,245,0.18);
  --page-accent-text: #3E72F5;
}

/* ── Palette dark ────────────────────────────────────── */
body.dark {
  --bg-nav:      rgba(3,0,20,0.70);
  --nav-border:  rgba(255,255,255,0.07);
  --text:        #ffffff;
  --text-2:      rgba(255,255,255,0.55);
  --text-sub:    rgba(255,255,255,0.92);
  --text-nav:    rgba(255,255,255,0.68);
  --text-nav-h:  #ffffff;
  --surface:     rgba(255,255,255,0.04);
  --surface2:    rgba(255,255,255,0.07);
  --border:      rgba(255,255,255,0.08);
  --drop-bg:     rgba(4,1,22,0.97);
  --drop-border: rgba(255,255,255,0.09);
  --drop-shadow: 0 16px 48px rgba(0,0,0,0.78);
  --btn-border:  rgba(255,255,255,0.26);
  --btn-text:    #ffffff;
  --logo-filter: none;
  --g-text:      linear-gradient(90deg,#4facfe 0%,#00cfff 35%,#7c3aed 100%);
  --cta1:        linear-gradient(90deg,#6246ea 0%,#2d8ef0 100%);
  /* Toggle dark */
  --tg-bg:       linear-gradient(145deg,#0c0824,#160e3c);
  --tg-shadow:   inset 2px 2px 6px rgba(0,0,0,.55), inset -1px -1px 3px rgba(147,130,255,.12), 0 2px 10px rgba(0,0,0,.55), 0 0 0 1px rgba(147,130,255,.18);
  --tg-text-c:   rgba(147,130,255,.75);
  --tg-knob-glow:0 0 10px rgba(147,130,255,.35);
  --tg-icon-c:   #9382ff;
  /* Logos */
  --logo-ph:          rgba(255,255,255,0.24);
  --logos-border:     rgba(255,255,255,0.06);
  --client-logo-color:  #ffffff;
  --client-logo-opacity: 0.55;
}

/* ── Palette light ───────────────────────────────────── */
body:not(.dark) {
  --light-page-background: #f6f6fc;
  --light-surface:          #ffffff;
  --light-surface-elevated: #ffffff;
  --light-border:           rgba(0,0,76,0.08);
  --light-text:             #16215c;
  --light-text-muted:       rgba(0,0,76,0.55);
  --bg-nav:      rgba(235,234,255,0.82);
  --nav-border:  rgba(0,0,0,0.09);
  --text:        #16215c;
  --text-2:      rgba(0,0,76,0.55);
  --text-sub:    rgba(12,12,34,0.56);
  --text-nav:    #16215c;
  --text-nav-h:  #16215c;
  --surface:     rgba(0,0,76,0.03);
  --surface2:    rgba(0,0,76,0.055);
  --border:      rgba(0,0,76,0.08);
  --drop-bg:     rgba(255,255,255,0.98);
  --drop-border: rgba(0,0,0,0.08);
  --drop-shadow: 0 8px 32px rgba(0,0,0,0.14);
  --btn-border:  rgba(0,0,0,0.22);
  --btn-text:    #16215c;
  --logo-filter: invert(1) brightness(0.12);
  --g-text:      linear-gradient(90deg,#1478d4 0%,#0092bb 35%,#5a18c0 100%);
  --cta1:        linear-gradient(90deg,#4530d0 0%,#1470cc 100%);
  /* Toggle light */
  --tg-bg:       linear-gradient(145deg,#e6e4f8,#f4f3ff);
  --tg-shadow:   inset 2px 2px 5px rgba(0,0,0,.08), inset -1px -1px 3px rgba(255,255,255,.9), 0 2px 8px rgba(0,0,0,.12), 0 0 0 1px rgba(0,0,0,.06);
  --tg-text-c:   rgba(79,70,229,.70);
  --tg-knob-glow:0 2px 10px rgba(0,0,0,.18);
  --tg-icon-c:   #f59e0b;
  /* Logos */
  --logo-ph:          rgba(0,0,0,0.26);
  --logos-border:     rgba(0,0,0,0.07);
  --client-logo-color:  #111111;
  --client-logo-opacity: 0.45;
}

/* ══════════════════════════════════════════════════════
   NAVIGATION
══════════════════════════════════════════════════════ */
.hp-nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 200;
  height: var(--nav-h);
  background: var(--bg-nav);
  border-bottom: 1px solid transparent;
  transition: border-color .3s, backdrop-filter .3s;
}
.hp-nav.scrolled {
  border-bottom-color: var(--nav-border);
  backdrop-filter: blur(24px) saturate(1.6);
  -webkit-backdrop-filter: blur(24px) saturate(1.6);
}
.hp-nav-inner {
  max-width: 1360px;
  margin: 0 auto;
  height: 100%;
  display: flex;
  align-items: center;
  padding: 0 32px;
  gap: 4px;
}

/* Logo */
.hp-logo-link {
  text-decoration: none;
  display: flex;
  align-items: center;
  align-self: center;
  line-height: 0;
  margin-right: 24px;
  flex-shrink: 0;
}
.hp-logo-img {
  height: 22px;
  width: auto;
  display: block;
  filter: var(--logo-filter);
  transition: filter .2s;
  max-width: 200px;
  transform: translateY(-1.5px);
}

/* Nav links */
.hp-nav-links {
  display: flex;
  align-items: center;
  list-style: none;
  gap: 0;
  flex: 1;
  transform: translateY(2px);
}
.hp-navbtn {
  background: none;
  border: none;
  cursor: pointer;
  font-family: var(--font);
  font-size: 14px;
  font-weight: 500;
  color: var(--text-nav);
  padding: 8px 12px;
  border-radius: 6px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  transition: color .15s, background .15s;
  white-space: nowrap;
  text-decoration: none;
}
.hp-navbtn:hover,
.hp-has-drop.open > .hp-navbtn { color: var(--text-nav-h); background: rgba(255,255,255,0.07); }
body:not(.dark) .hp-navbtn:hover,
body:not(.dark) .hp-has-drop.open > .hp-navbtn { color: #1470cc; background: rgba(20,112,204,0.06); }
.hp-navbtn-plain { gap: 0; }

.hp-chevron {
  transition: transform .22s cubic-bezier(.34,1.56,.64,1);
  flex-shrink: 0;
}
.hp-has-drop.open .hp-chevron { transform: rotate(180deg); }

/* Dropdown */
.hp-has-drop { position: relative; }
.hp-drop {
  position: absolute;
  top: calc(100% + 10px);
  left: 0;
  min-width: 185px;
  background: var(--drop-bg);
  border: 1px solid var(--drop-border);
  border-radius: 10px;
  box-shadow: var(--drop-shadow);
  padding: 6px;
  opacity: 0;
  transform: translateY(-8px) scale(.97);
  pointer-events: none;
  transition: opacity .18s, transform .18s;
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
}
.hp-has-drop.open .hp-drop {
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: auto;
}
.hp-drop-link {
  display: block;
  padding: 9px 14px;
  border-radius: 8px;
  font-size: 13.5px;
  font-weight: 500;
  color: var(--text-nav);
  text-decoration: none;
  transition: background .12s, color .12s;
}
.hp-drop-link:hover { background: rgba(255,255,255,0.07); color: var(--text-nav-h); }

/* Nav right */
.hp-nav-right {
  display: flex;
  align-items: center;
  gap: 11px;
  margin-left: auto;
  transform: translateY(2px);
}

/* ── LANGUAGE DROPDOWN (FR/EN) — précède immédiatement .hp-toggle ───
   Sobre, calqué sur les dropdowns de nav existants (.hp-navbtn/.hp-drop
   ci-dessus) plutôt que sur le style "gros bouton" du toggle de thème :
   trigger texte discret + petit menu, pas de pilule pleine ni d'ombre
   permanente. ──────────────────────────────────────────────────── */
.hp-lang-dd { position: relative; }

.hp-lang-trigger {
  display: flex;
  align-items: center;
  gap: 5px;
  height: 36px;
  padding: 0 10px;
  border-radius: 8px;
  background: transparent;
  border: none;
  cursor: pointer;
  font-family: var(--font);
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.3px;
  color: var(--text-nav);
  transition: background .15s, color .15s;
}
.hp-lang-trigger:hover,
.hp-lang-dd.open .hp-lang-trigger { color: var(--text-nav-h); background: rgba(255,255,255,0.07); }
body:not(.dark) .hp-lang-trigger:hover,
body:not(.dark) .hp-lang-dd.open .hp-lang-trigger { color: #1470cc; background: rgba(20,112,204,0.06); }
.hp-lang-trigger:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(147,130,255,.5);
}
.hp-lang-trigger span[aria-hidden] { font-size: 13px; line-height: 1; }
.hp-lang-code { text-transform: uppercase; }

.hp-lang-menu {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  left: auto;
  min-width: 130px;
  margin: 0;
  list-style: none;
  background: var(--drop-bg);
  border: 1px solid var(--drop-border);
  border-radius: 10px;
  box-shadow: var(--drop-shadow);
  padding: 6px;
  opacity: 0;
  transform: translateY(-8px) scale(.97);
  pointer-events: none;
  transition: opacity .18s, transform .18s;
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  z-index: 40;
}
.hp-lang-dd.open .hp-lang-menu {
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: auto;
}
.hp-lang-opt {
  padding: 9px 14px;
  border-radius: 8px;
  font-size: 13.5px;
  font-weight: 500;
  color: var(--text-nav);
  cursor: pointer;
  transition: background .12s, color .12s;
}
.hp-lang-opt:hover { background: rgba(255,255,255,0.07); color: var(--text-nav-h); }
body:not(.dark) .hp-lang-opt:hover { background: rgba(20,112,204,0.06); color: #1470cc; }
.hp-lang-opt[aria-selected="true"] { color: var(--text-nav-h); font-weight: 700; }

/* Header : uniquement desktop — voir sélecteur mobile équivalent dans le
   footer (.ft-lang-row) juste en dessous, jamais affichés simultanément
   (même breakpoint 960px que le reste de la nav mobile). */
@media (max-width: 960px) {
  .hp-nav-right .hp-lang-dd { display: none; }
}

/* ── LANGUAGE — variante FOOTER (mobile uniquement) ─────────────────
   Ligne discrète, sobre, alignée sur la typo des liens légaux du footer
   (.hp-footer-legal-links) plutôt que sur le style "trigger de nav" du
   header. Même moteur i18n (.hp-lang-dd/.hp-lang-trigger/.hp-lang-menu/
   .hp-lang-opt réutilisés tels quels) — seul l'habillage change via les
   classes --footer. ──────────────────────────────────────────────── */
.ft-lang-row { display: none; }
@media (max-width: 960px) {
  .ft-lang-row {
    display: flex;
    padding-top: 14px;
    margin-top: 14px;
    border-top: 1px solid rgba(255,255,255,0.07);
  }
  body:not(.dark) .ft-lang-row { border-top-color: rgba(0,0,0,0.07); }
}

.hp-lang-trigger--footer {
  height: auto;
  padding: 2px 0;
  border-radius: 0;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0;
  color: rgba(255,255,255,0.5);
}
body:not(.dark) .hp-lang-trigger--footer { color: rgba(0,0,76,0.5); }
.hp-lang-trigger--footer:hover,
.hp-lang-dd--footer.open .hp-lang-trigger--footer { background: none; color: rgba(255,255,255,0.85); }
body:not(.dark) .hp-lang-trigger--footer:hover,
body:not(.dark) .hp-lang-dd--footer.open .hp-lang-trigger--footer { color: rgba(0,0,76,0.85); }
.hp-lang-trigger--footer span[aria-hidden] { font-size: 12px; }

/* Le menu s'ouvre vers le HAUT (le trigger est tout en bas de page —
   éviter qu'il soit tronqué par le bord de la fenêtre). */
.hp-lang-menu--footer {
  top: auto;
  bottom: calc(100% + 8px);
  left: 0;
  right: auto;
}

/* Coche discrète sur la langue déjà active, uniquement dans ce menu —
   le trigger lui-même affiche déjà le nom complet de la langue active
   ("🌐 Français"/"🌐 English"), la coche n'est utile que dans le menu. */
.hp-lang-dd--footer .hp-lang-opt[aria-selected="true"]::after { content: " ✓"; }

/* ── TOGGLE ──────────────────────────────────────── */
.hp-toggle {
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  border-radius: 999px;
  outline: none;
}
.hp-toggle:focus-visible .hp-tg-track {
  box-shadow: var(--tg-shadow), 0 0 0 3px rgba(147,130,255,.5);
}

.hp-tg-track {
  display: flex;
  align-items: center;
  width: 124px;
  height: 44px;
  border-radius: 999px;
  background: var(--tg-bg);
  box-shadow: var(--tg-shadow);
  position: relative;
  padding: 0;
  transition: background .4s ease, box-shadow .4s ease;
  overflow: hidden;
}

.hp-tg-label {
  position: absolute;
  font-size: 7.5px;
  font-weight: 700;
  letter-spacing: 0.7px;
  text-transform: uppercase;
  color: var(--tg-text-c);
  transition: color .4s, left .4s cubic-bezier(.34,1.56,.64,1), right .4s cubic-bezier(.34,1.56,.64,1), opacity .25s;
  white-space: nowrap;
  user-select: none;
}
body.dark      .hp-tg-label { left: 12px; right: auto; }
body:not(.dark) .hp-tg-label { right: 12px; left: auto; }

.hp-tg-knob {
  position: absolute;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: #ffffff;
  top: 3px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 8px rgba(0,0,0,.28), 0 4px 16px rgba(0,0,0,.18), var(--tg-knob-glow);
  transition:
    left   .42s cubic-bezier(.34,1.56,.64,1),
    box-shadow .4s ease;
}
body.dark      .hp-tg-knob { left: calc(100% - 41px); }
body:not(.dark) .hp-tg-knob { left: 3px; }

.hp-tg-icon {
  position: absolute;
  transition: opacity .25s, transform .35s cubic-bezier(.34,1.56,.64,1);
  color: var(--tg-icon-c);
}
body.dark      .hp-tg-moon { opacity: 1; transform: rotate(0deg) scale(1); }
body.dark      .hp-tg-sun  { opacity: 0; transform: rotate(45deg) scale(.6); }
body:not(.dark) .hp-tg-moon { opacity: 0; transform: rotate(-45deg) scale(.6); }
body:not(.dark) .hp-tg-sun  { opacity: 1; transform: rotate(0deg) scale(1); }

/* SIGN IN / SIGN UP */
.hp-btn-signin,
.hp-btn-signup {
  display: inline-flex;
  align-items: center;
  font-family: var(--font);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .4px;
  text-decoration: none;
  padding: 8px 20px;
  border-radius: 999px;
  border: none;
  white-space: nowrap;
  cursor: pointer;
  transition: opacity .15s;
}
.hp-btn-signin {
  position: relative;
  background: transparent;
  color: #ffffff;
}
body:not(.dark) .hp-btn-signin { color: #16215c; }
.hp-btn-signin::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1.5px;
  background: var(--cta1);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
}
.hp-btn-signin:hover { opacity: .75; }
.hp-btn-signup {
  color: #ffffff;
  background: var(--cta1);
}
.hp-btn-signup:hover { opacity: .85; }

/* Burger */
.hp-burger {
  display: none;
  flex-direction: column;
  gap: 5px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px;
  margin-left: 12px;
}
.hp-burger span {
  display: block;
  width: 22px; height: 2px;
  border-radius: 2px;
  background: var(--text);
}

/* ══════════════════════════════════════════════════════
   HERO
══════════════════════════════════════════════════════ */
.hp-hero {
  background: #030014;
  position: relative;
  z-index: 1;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding-top: var(--nav-h);
  padding-bottom: 0;
  color: var(--text, #ffffff);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Halos de fond animés */
.hp-bg-glow {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(310px 390px at 11% 45%, rgba(70,42,140,0.26) 0%, rgba(30,18,80,0.12) 45%, transparent 100%),
    radial-gradient(170px 220px at  4% 70%, rgba(50,24,110,0.16) 0%, transparent 100%);
  animation: hpGlowDrift 32s ease-in-out infinite alternate;
}
@keyframes hpGlowDrift {
  0%   { opacity: .80; }
  100% { opacity: 1; }
}

/* Grille 2 colonnes */
.hp-hero-grid {
  position: relative;
  z-index: 3;
  flex: 1;
  width: 100%;
  max-width: 1360px;
  margin: 0 auto;
  padding: 0 32px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
}

/* ── Colonne gauche ──────────────────────────────── */
.hp-hero-left {
  display: flex;
  flex-direction: column;
  gap: 28px;
  padding-right: 40px;
}

.hp-headline { font-family: 'Inter', system-ui, -apple-system, sans-serif; font-weight: 800; line-height: 1.05; letter-spacing: -2px; overflow: visible; }
.hp-hl-l1, .hp-hl-l2 { display: block; font-size: clamp(2rem, 4vw, 3.2rem); }
.hp-hl-l2 { padding-bottom: 0.08em; }
.hp-hl-w { color: #ffffff; }
.hp-hl-g {
  background: var(--g-text);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* ══════════════════════════════════════════════════════
   GRADIENT HEADING — utilitaire partagé (mêmes valeurs que
   solution-page.css). .hp-hl-g reste le porteur du gradient
   dans le H1 homepage (design deux tons : ligne 1 pleine,
   ligne 2 gradient) ; .hp-cta-final-hl = H2 du CTA final.
══════════════════════════════════════════════════════ */
.gradient-heading,
.hp-hl-g {
  background: var(--g-text);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
body.dark .gradient-heading,
body.dark .hp-hl-g {
  filter: drop-shadow(0 0 20px rgba(124,58,237,0.22));
}

.hp-sub {
  font-size: clamp(15px, 1.4vw, 18px);
  line-height: 1.65;
  color: var(--text-sub);
  font-weight: 400;
  max-width: 520px;
}
.hp-br-d { display: inline; }

/* CTAs */
.hp-cta-row {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}

/* CTA secondary — transparent + border gradient (Sign In), harmonisé avec .hp-btn-signin */
.hp-cta-connect {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-family: var(--font);
  font-size: 14.5px;
  font-weight: 600;
  color: rgba(255,255,255,.82);
  text-decoration: none;
  padding: 13px 30px;
  border-radius: 999px;
  background: transparent;
  border: none;
  cursor: pointer;
  position: relative;
  white-space: nowrap;
  transition: color .18s, transform .18s;
}
.hp-cta-connect::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 999px;
  padding: 1px;
  background: linear-gradient(90deg, #6246ea, #2d8ef0);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: destination-out;
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask-composite: exclude;
  pointer-events: none;
}
.hp-cta-connect:hover { color: #fff; transform: translateY(-1px); }
.hp-chevrons { font-size: 15px; font-weight: 700; letter-spacing: -3px; line-height: 1; }

/* CTA primary — solid gradient pill (Create account) */
.hp-cta-create {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-family: var(--font);
  font-size: 14.5px;
  font-weight: 600;
  color: #ffffff;
  text-decoration: none;
  padding: 13px 30px;
  border-radius: 999px;
  background: var(--cta1);
  border: none;
  cursor: pointer;
  white-space: nowrap;
  transition: opacity .18s, transform .18s;
}
.hp-cta-create:hover { opacity: .88; transform: translateY(-1px); }
.hp-arr { font-size: 16px; line-height: 1; }

/* ── Colonne droite ─────────────────────────────── */
.hp-hero-right {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 75vh;
  max-height: 820px;
  min-height: 480px;
  position: relative;
  overflow: hidden;
}
/* Masque les bords de l'animation en light mode pour éviter la coupure rectangulaire */
body:not(.dark) .hp-hero-right {
  -webkit-mask-image: radial-gradient(ellipse 88% 80% at 60% 48%, black 45%, transparent 88%);
  mask-image: radial-gradient(ellipse 88% 80% at 60% 48%, black 45%, transparent 88%);
}

/* Groupe spire + étoiles */
.hp-spire-group {
  position: absolute;
  top: 0;
  right: 0;
  height: clamp(900px, 110vh, 1080px);
  width: clamp(855px, 104.5vh, 1026px);
  pointer-events: none;
  /* TODO: remplacer spire-visual.png par un asset original */
}

.hp-spire {
  position: absolute;
  top: 0;
  right: 0;
  height: 100%;
  width: auto;
  z-index: 2;
  mix-blend-mode: lighten;
  pointer-events: none;
}
.hp-spire-tip {
  clip-path: inset(0 0 87% 0);
  z-index: 210;
}

/* Champ d'étoiles montantes */
.hp-orbit-stars {
  position: absolute;
  inset: 0;
  overflow: hidden;
  z-index: 1;
  pointer-events: none;
}
.hp-orbit-stars > span {
  position: absolute;
  border-radius: 50%;
  background: #ffffff;
  animation: hpRise linear infinite;
}
@keyframes hpRise {
  from { transform: translateY(0); }
  to   { transform: translateY(-1300px); }
}

/* ── Bandeau logos ───────────────────────────────── */
.hp-logos-bar {
  position: relative;
  z-index: 5;
  padding: 32px 0 40px;
  background: transparent;
  border-top: none;
  margin-top: 20px;
}
.hp-marquee-viewport {
  overflow: hidden;
  mask-image: linear-gradient(to right, transparent, #fff 12%, #fff 88%, transparent);
  -webkit-mask-image: linear-gradient(to right, transparent, #fff 12%, #fff 88%, transparent);
}
.hp-marquee-track {
  display: flex;
  width: max-content;
  animation: hpMarqueeRight 60s linear infinite;
}
@keyframes hpMarqueeRight {
  from { transform: translateX(-50%); }
  to   { transform: translateX(0); }
}
.hp-marquee-set {
  display: flex;
  align-items: center;
  padding: 20px 0 0;
}
.client-logo {
  --logo-url: none;
  display: block;
  flex-shrink: 0;
  width: 120px;
  height: 34px;
  margin: 0 44px;
  color: var(--client-logo-color);
  opacity: var(--client-logo-opacity);
  background-color: currentColor;
  -webkit-mask-image: var(--logo-url);
  mask-image: var(--logo-url);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: contain;
  mask-size: contain;
  transition: opacity 180ms ease;
}
.client-logo--nestle        { -webkit-mask-image: url("/assets/logos/nestle.svg");               mask-image: url("/assets/logos/nestle.svg");               width: 72px; }
.client-logo--toyota        { -webkit-mask-image: url("/assets/logos/toyota.svg");               mask-image: url("/assets/logos/toyota.svg"); }
.client-logo--playstation   { -webkit-mask-image: url("/assets/logos/playstation.svg");          mask-image: url("/assets/logos/playstation.svg");          width: 150px; }
.client-logo--colgate       { -webkit-mask-image: url("/assets/logos/colgate.svg");              mask-image: url("/assets/logos/colgate.svg");              width: 148px; }
.client-logo--totalenergies { -webkit-mask-image: url("/assets/logos/totalenergies.svg");        mask-image: url("/assets/logos/totalenergies.svg");        width: 152px; }
.client-logo--schneider     { -webkit-mask-image: url("/assets/logos/schneider-electric.svg");   mask-image: url("/assets/logos/schneider-electric.svg"); }
.client-logo--subway        { -webkit-mask-image: url("/assets/logos/subway.svg");               mask-image: url("/assets/logos/subway.svg");               width: 100px; }
.client-logo--airbnb        { -webkit-mask-image: url("/assets/logos/airbnb.svg");               mask-image: url("/assets/logos/airbnb.svg"); }

/* ══════════════════════════════════════════════════════
   LIGHT MODE OVERRIDES
══════════════════════════════════════════════════════ */

/* Hero — fond dégradé blanc → bleu ciel très clair */
body:not(.dark) .hp-hero {
  background: linear-gradient(180deg, #ffffff 50%, #cce5ff 100%);
  -webkit-font-smoothing: auto;
  -moz-osx-font-smoothing: auto;
}
/* Headline plus lourd en light pour compenser l'effet optique dark vs light */
body:not(.dark) .hp-headline { font-weight: 700; }
/* "Performance" bleu marine en light mode */
body:not(.dark) .hp-hl-l1 { color: #16215c; }
body:not(.dark) .hp-sub { color: rgba(0,0,76,0.68); }
/* Nav transparente en light mode */
body:not(.dark) .hp-nav         { background: transparent; }
body:not(.dark) .hp-nav.scrolled { background: rgba(255,255,255,0.85); backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px); }

/* Supprime les éléments visuels dark-only */
body:not(.dark) .hp-bg-glow     { display: none; }
body:not(.dark) .hp-orbit-stars { display: none; }
body:not(.dark) .hp-spire,
body:not(.dark) .hp-spire-tip   { display: none; }

/* Switch logo dark ↔ light */
.hp-logo-lm               { display: none; filter: none; }
body:not(.dark) .hp-logo-dm { display: none; }
body:not(.dark) .hp-logo-lm { display: block; }

/* CTA light-mode overrides */
body:not(.dark) .hp-cta-connect { color: #16215c; }
body:not(.dark) .hp-cta-connect::before { background: linear-gradient(90deg, #4530d0, #1470cc); }
body:not(.dark) .hp-cta-create  { color: #ffffff; } /* solid gradient — stays white text */

/* ══════════════════════════════════════════════════════
   RESPONSIVE
══════════════════════════════════════════════════════ */
@media (max-width: 960px) {
  .hp-hero-grid {
    grid-template-columns: 1fr;
    padding: 36px 24px 0;
    gap: 36px;
  }
  .hp-hero-left  { padding-right: 0; order: 2; gap: 22px; }
  .hp-hero-right { order: 1; height: 52vh; min-height: 280px; }
  .hp-nav-links { display: none; }
  /* .hp-nav-right reste affiché pour garder le toggle Light/Dark visible ;
     seuls Sign In / Sign Up se replient (pas de place dans la barre mobile). */
  .hp-nav-right .hp-btn-signin,
  .hp-nav-right .hp-btn-signup { display: none; }
  .hp-burger { display: flex; }
  .hp-br-d { display: none; }
  .hp-logos-bar { padding-bottom: 32px; }
  .client-logo  { width: 90px; height: 28px; margin: 0 28px; }
}

@media (max-width: 540px) {
  .hp-hl-l1, .hp-hl-l2 { letter-spacing: -1px; }
  .hp-cta-row { flex-direction: column; align-items: stretch; }
  .hp-cta-connect, .hp-cta-create { justify-content: center; }
}

/* ══════════════════════════════════════════════════════
   REDUCED MOTION
══════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
  .hp-bg-glow           { animation: none; }
  .hp-orbit-stars > span { animation: none !important; }
  .hp-marquee-track     { animation: none; }
  .hp-tg-knob           { transition: none; }
  .hp-tg-icon           { transition: none; }
}

/* ══════════════════════════════════════════════════════
   SOL-REVEAL — fade-up partagé avec solution-page.css
══════════════════════════════════════════════════════ */
.sol-reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity .55s ease, transform .55s ease;
}
.sol-reveal.is-visible {
  opacity: 1;
  transform: none;
}
/* Stagger pour hp-s3-inner */
.hp-s3-inner.sol-reveal { transition-delay: .15s; }
@media (prefers-reduced-motion: reduce) {
  .sol-reveal { opacity: 1; transform: none; }
}

/* ══════════════════════════════════════════════════════
   SECTION 2 — VIDEO CTA
══════════════════════════════════════════════════════ */
/* ══════════════════════════════════════════════════════════
   SECTION 4 — SOLUTIONS & SERVICES
══════════════════════════════════════════════════════════ */
.hp-s4 {
  position: relative;
  z-index: 2;
  margin-top: -30px;
  min-height: 200vh;
}
body.dark .hp-s4 { background: #030014; }

/* Dark: même image que s3, raccord fluide — masque haut pour supprimer la ligne de la vidéo */
.hp-s4-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  background:
    linear-gradient(180deg, rgba(2,4,22,0.55) 0%, rgba(2,4,22,0.42) 50%, rgba(2,4,22,0.55) 100%),
    url('/assets/WPP_Pro_Editions_BCK_HR.webp') center/cover no-repeat;
  pointer-events: none;
  mask-image: linear-gradient(180deg, transparent 0%, black 32%, black 65%, transparent 100%);
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, black 32%, black 65%, transparent 100%);
}
body:not(.dark) .hp-s4-bg { display: none; }
body:not(.dark) .hp-s4 { background: #eef4ff; }

/* Sticky : absolute children pour hauteur fiable */
.hp-s4-sticky {
  position: sticky;
  top: 0;
  height: 100vh;
  overflow: hidden;
  z-index: 3;
}

/* Fondu haut s4 (raccord s3) — au-dessus du bg, sous le header/nav */
body.dark .hp-s4-sticky::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 200px;
  background: linear-gradient(180deg, #030014 0%, transparent 100%);
  z-index: 1;
  pointer-events: none;
}
body:not(.dark) .hp-s4-sticky::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 100px;
  background: linear-gradient(180deg, #eef4ff 0%, transparent 100%);
  z-index: 1;
  pointer-events: none;
}
/* Fondu bas sticky → raccord section suivante */
body.dark .hp-s4-sticky::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 220px;
  background: linear-gradient(0deg, #010006 0%, #040215 55%, transparent 100%);
  z-index: 10;
  pointer-events: none;
}
body:not(.dark) .hp-s4-sticky::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 200px;
  background: linear-gradient(0deg, #eef4ff 0%, #eef4ff 40%, transparent 100%);
  z-index: 10;
  pointer-events: none;
}

/* Header */
.hp-s4-header {
  position: absolute;
  top: 0; left: 0; right: 0;
  padding: 32px 64px 0;
  z-index: 2;
}
.hp-s4-title {
  font-family: 'Inter', system-ui, sans-serif;
  font-size: clamp(28px, 2.5vw, 40px);
  font-weight: 700;
  letter-spacing: -0.5px;
  color: #ffffff;
  margin: 0 0 14px;
}
body:not(.dark) .hp-s4-title { color: #16215c; }
.hp-s4-sep {
  border: none;
  border-top: 1px solid rgba(255,255,255,0.12);
  margin: 0;
}
body:not(.dark) .hp-s4-sep { border-top-color: rgba(0,0,76,0.12); }

/* Nav tabs */
.hp-s4-nav {
  position: absolute;
  top: 100px; left: 0; right: 0;
  display: flex;
  align-items: center;
  padding: 0 64px;
  z-index: 2;
}
.hp-s4-nav-btn {
  background: none;
  border: none;
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 14px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: rgba(255,255,255,0.28);
  cursor: pointer;
  padding: 6px 0 7px;
  position: relative;
  transition: color 0.35s;
  white-space: nowrap;
}
.hp-s4-nav-btn.active { color: #ffffff; }
.hp-s4-nav-btn::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0;
  width: 0; height: 1.5px;
  background: linear-gradient(90deg, #4facfe, #7c3aed);
  transition: width 0.4s ease;
}
.hp-s4-nav-btn.active::after { width: 100%; }
.hp-s4-nav-sep {
  width: 1px; height: 13px;
  background: rgba(255,255,255,0.18);
  margin: 0 20px;
  flex-shrink: 0;
}
body:not(.dark) .hp-s4-nav-btn { color: rgba(0,0,76,0.28); }
body:not(.dark) .hp-s4-nav-btn.active { color: #16215c; }
body:not(.dark) .hp-s4-nav-sep { background: rgba(0,0,76,0.18); }

/* Panels wrap — top fixe sous header+nav */
.hp-s4-panels-wrap {
  position: absolute;
  top: 138px; left: 0; right: 0; bottom: 0;
}

.hp-s4-panel {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  gap: 56px;
  padding: 0 64px 40px;
  opacity: 0;
  transform: translateX(48px);
  transition: opacity 0.55s ease, transform 0.55s ease;
  pointer-events: none;
}
.hp-s4-panel.active {
  opacity: 1;
  transform: translateX(0);
  pointer-events: auto;
}
.hp-s4-panel.exiting {
  opacity: 0;
  transform: translateX(-48px);
}

/* Video card */
.hp-s4-left { flex-shrink: 0; }
.hp-s4-video-card {
  position: relative;
  width: 220px;
  height: 330px;
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,0.07);
  box-shadow: 0 8px 32px rgba(0,0,0,0.35);
  background: #0a0a1a;
}
body:not(.dark) .hp-s4-video-card {
  border: 1px solid rgba(0,0,76,0.08);
  box-shadow: none;
  background: #dce8f8;
}
.hp-s4-video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.hp-s4-video-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(79,172,254,0.42), rgba(124,58,237,0.42));
  opacity: 0.9;
  transition: opacity 0.35s ease;
}
.hp-s4-video-card:hover .hp-s4-video-overlay { opacity: 0.5; }

/* Right content */
.hp-s4-right { flex: 1; min-width: 0; }

/* Chips */
.hp-s4-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 28px;
}
.hp-s4-chip {
  display: inline-flex;
  align-items: center;
  padding: 5px 14px;
  border-radius: 999px;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.10);
  color: rgba(255,255,255,0.75);
  font-size: 12.5px;
  font-weight: 500;
  font-family: 'Inter', system-ui, sans-serif;
  white-space: nowrap;
  transition: background .15s, border-color .15s;
}
body:not(.dark) .hp-s4-chip {
  background: rgba(0,0,120,0.05);
  border-color: rgba(0,0,120,0.12);
  color: rgba(0,0,76,0.7);
}

.hp-s4-panel-body {
  font-size: 15px;
  line-height: 1.7;
  color: rgba(255,255,255,0.6);
  max-width: 560px;
}
body:not(.dark) .hp-s4-panel-body { color: rgba(0,0,76,0.72); }
/* Chip break = forçage de retour à la ligne */
.hp-s4-chip-break { flex-basis: 100%; height: 0; }

/* Panel 1 (Data Intelligence) : video droite, chips droite */
#hp-s4-panel-1 { justify-content: flex-end; }
#hp-s4-panel-1 .hp-s4-right { flex: 0 0 auto; max-width: 360px; }
#hp-s4-panel-1 .hp-s4-chips { justify-content: flex-end; }
#hp-s4-panel-1 .hp-s4-panel-body { text-align: right; margin-left: auto; }

/* ══════════════════════════════════════════════════════════
   SECTION 2 — VIDEO CTA
══════════════════════════════════════════════════════════ */
.hp-s2 {
  position: relative;
  z-index: 3;
  margin-top: -30px;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: #010006;
}

/* Parallax wrapper — centré avec marge pour mouvement */
.hp-s2-parallax {
  position: absolute;
  inset: -5% 0;
  z-index: 0;
  will-change: transform;
  display: flex;
  align-items: center;
  justify-content: center;
}

.hp-s2-video {
  width: auto;
  height: auto;
  max-width: 68%;
  max-height: 70vh;
  object-fit: contain;
  opacity: 0.7;
  display: block;
}

/* Overlay désactivé */
.hp-s2-overlay { display: none; }

/* Fondu haut : raccord s4 → s2 */
.hp-s2::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 140px;
  background: linear-gradient(to bottom, #010006 0%, transparent 100%);
  z-index: 2;
  pointer-events: none;
}
/* Light : ::before supprimé, géré par background multi-couche sur .hp-s2 */
body:not(.dark) .hp-s2::before { display: none; }


/* Fondu bas dark : footer démarre à #010006 = même couleur que hp-s2 bg, pas de ::after nécessaire */
body:not(.dark) .hp-s2::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 140px;
  background: linear-gradient(0deg, #ffffff 0%, transparent 100%);
  z-index: 2;
  pointer-events: none;
}

/* Light mode : bleu section 3 → ciel, overlay clair pour ne pas désaturer le ciel */
body:not(.dark) .hp-s2 {
  background:
    linear-gradient(to bottom, #cce5ff 0%, #cce5ff 40%, rgba(204,229,255,0) 100%),
    url('/assets/clue.jpg') center / cover no-repeat;
  background-color: #133268;
}
body:not(.dark) .hp-s2-parallax { display: none; }
body:not(.dark) .hp-s2 { align-items: flex-start; padding-top: 34vh; }

/* Contenu : shrink-wrap sur la largeur du titre (white-space:nowrap) */
.hp-s2-content {
  position: relative;
  z-index: 3;
  padding: 0 32px;
  text-align: center;
}

.hp-s2-hl {
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  font-size: clamp(22px, 2.6vw, 42px);
  font-weight: 700;
  color: #ffffff;
  letter-spacing: -1px;
  line-height: 1.08;
  margin-bottom: 10px;
  -webkit-font-smoothing: antialiased;
  white-space: nowrap;
}

/* Texte accessible masqué visuellement (typewriter le remplace) */
.hp-s2-full-text {
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
}

/* Partie gradient du titre : blanc → bleu → violet depuis "better" */
.hp-s2-grad {
  background: linear-gradient(90deg, #ffffff 0%, #4facfe 35%, #a855f7 75%, #7c3aed 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* Light mode : gradient "better results now" #3E72F5 → #643BF5 */
body:not(.dark) .hp-s2-grad {
  background: linear-gradient(90deg, #3E72F5 0%, #643BF5 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

/* Curseur clignotant */
.hp-s2-cursor {
  display: inline-block;
  color: #ffffff;
  font-weight: 200;
  animation: hp-s2-blink 0.75s step-end infinite;
  margin-left: 1px;
  -webkit-text-fill-color: #ffffff;
}

@keyframes hp-s2-blink {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0; }
}

/* Sous-titre — apparaît après le typing */
.hp-s2-sub {
  font-size: 18px;
  color: rgba(255,255,255,0);
  font-weight: 400;
  line-height: 1.7;
  letter-spacing: 0.01em;
  display: block;
  max-width: 480px;
  margin: 16px auto 0;
  text-align: center;
  transition: color 0.8s ease 0.3s;
}

.hp-s2-sub.hp-s2-sub--visible {
  color: #ffffff;
}

@media (max-width: 768px) {
  .hp-s2::before  { height: 80px; }
  .hp-s2-content  { padding: 0 24px; width: 100%; }
  .hp-s2-hl       { white-space: normal; font-size: clamp(22px, 5.5vw, 32px); }
}

@media (prefers-reduced-motion: reduce) {
  .hp-s2-cursor   { animation: none; opacity: 0; }
  .hp-s2-parallax { will-change: auto; }
}

/* ══════════════════════════════════════════════════════════
   SECTION 3 — PRO EDITIONS RADAR
══════════════════════════════════════════════════════════ */

/* Fondu bas hero → s3 en dark */
body.dark .hp-hero::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 180px;
  background: linear-gradient(0deg, #030014 0%, transparent 100%);
  z-index: 2;
  pointer-events: none;
}
/* Fondu haut s3 (raccord hero) en dark */
body.dark .hp-s3::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 160px;
  background: linear-gradient(180deg, #030014 0%, transparent 100%);
  z-index: 1;
  pointer-events: none;
}
/* Fondu bas s3 (raccord s4) en dark */
body.dark .hp-s3::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 160px;
  background: linear-gradient(0deg, #030014 0%, transparent 100%);
  z-index: 1;
  pointer-events: none;
}

.hp-s3 {
  position: relative;
  z-index: 1;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: #030014;
}

/* Light mode : pas de background image, gradient doux, pas de calque glass */
body:not(.dark) .hp-s3-bg { display: none; }
body:not(.dark) .hp-s3 { background: linear-gradient(180deg, #cce5ff 0%, #e8f2ff 45%, #cce5ff 100%); }
body:not(.dark) .hp-s3-glass {
  background: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border: none;
  box-shadow: none;
  border-radius: 0;
  overflow: visible;
}
body:not(.dark) .hp-s3-radar-annulus { display: none; }

/* Background image */
.hp-s3-bg {
  position: absolute;
  inset: 0;
  background:
    url('/assets/WPP_Pro_Editions_BCK_HR.webp') center/cover no-repeat,
    radial-gradient(ellipse 80% 80% at 20% 50%, #1a0a4a 0%, #040618 60%);
  opacity: 0.85;
  z-index: 0;
}

.hp-s3-inner {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 1280px;
  padding: 60px 40px;
}

/* Glass card */
.hp-s3-glass {
  display: flex;
  gap: 0;
  background: rgba(8, 12, 40, 0.45);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(255,255,255,0.07);
  border-radius: 12px;
  overflow: visible;
  box-shadow: 0 1px 3px rgba(0,0,0,0.3), 0 4px 24px rgba(0,0,0,0.2);
}

/* ── LEFT — Radar ─────────────────────────────────────── */
.hp-s3-left {
  flex: 0 0 55%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 48px 32px;
}

.hp-s3-radar {
  position: relative;
  width: min(520px, 46vw);
  height: min(520px, 46vw);
  flex-shrink: 0;
}

/* SVG radar overlay */
.hp-s3-radar-svg {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  pointer-events: none;
  overflow: visible;
}

/* ── Orbital dots (positioned by JS via transform) ────── */
.hp-s3-dot {
  position: absolute;
  left: 0; top: 0;          /* référence fixe — le JS applique transform */
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  cursor: default;
  user-select: none;
  will-change: transform;
}

/* Text label dots */
.hp-s3-dot span {
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 13px;
  font-weight: 600;
  color: #fff;
  white-space: nowrap;
  line-height: 1;
}

.hp-s3-dot--content  { width: 72px; height: 72px; background: linear-gradient(135deg,#7c3aed,#a855f7); box-shadow: 0 0 20px rgba(168,85,247,0.5); }
.hp-s3-dot--strategy { width: 76px; height: 76px; background: linear-gradient(135deg,#6d28d9,#8b5cf6); box-shadow: 0 0 20px rgba(139,92,246,0.4); }
.hp-s3-dot--social   { width: 68px; height: 68px; background: linear-gradient(135deg,#10b981,#34d399); box-shadow: 0 0 18px rgba(16,185,129,0.5); }
.hp-s3-dot--ads      { width: 60px; height: 60px; background: linear-gradient(135deg,#38bdf8,#7dd3fc); box-shadow: 0 0 16px rgba(56,189,248,0.45); }
.hp-s3-dot--leads    { width: 64px; height: 64px; background: linear-gradient(135deg,#f472b6,#ec4899); box-shadow: 0 0 16px rgba(244,114,182,0.45); }
.hp-s3-dot--data     { width: 56px; height: 56px; background: linear-gradient(135deg,#3b82f6,#60a5fa); box-shadow: 0 0 16px rgba(59,130,246,0.5); }
.hp-s3-dot--tech     { width: 60px; height: 60px; background: linear-gradient(135deg,#14b8a6,#2dd4bf); box-shadow: 0 0 16px rgba(20,184,166,0.5); }

/* Logo dots */
.hp-s3-dot--tiktok     { width: 62px; height: 62px; background: #000; box-shadow: 0 0 18px rgba(0,0,0,0.7); }
.hp-s3-dot--tiktok svg { width: 28px; height: 28px; }
.hp-s3-dot--meta       { width: 62px; height: 62px; background: #ffffff; box-shadow: 0 0 16px rgba(0,100,220,0.25); }
.hp-s3-dot--meta img   { width: 42px; height: auto; display: block; }
/* Instagram : fond gradient de la marque, icon blanc outline */
.hp-s3-dot--instagram  {
  width: 62px; height: 62px;
  background: linear-gradient(135deg, #feda75 0%, #fa7e1e 20%, #d62976 50%, #962fbf 80%, #4f5bd5 100%);
  box-shadow: 0 0 18px rgba(214,41,118,0.5);
}
.hp-s3-dot--instagram svg { width: 34px; height: 34px; }

/* Photo dots */
.hp-s3-dot--camera {
  width: 72px; height: 72px;
  background-size: cover; background-position: center;
  border: 2px solid rgba(255,255,255,0.18);
  box-shadow: 0 0 18px rgba(30,80,160,0.4);
}
.hp-s3-dot--person {
  width: 68px; height: 68px;
  background-size: cover; background-position: center top;
  border: 2px solid rgba(255,255,255,0.18);
  box-shadow: 0 0 16px rgba(80,40,10,0.4);
}

/* ── RIGHT — Texte ────────────────────────────────────── */
.hp-s3-right {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  padding: 56px 56px 56px 48px;
}

.hp-s3-text { max-width: 100%; padding-bottom: 8px; }

.hp-s3-text-hl {
  font-family: 'Inter', system-ui, sans-serif !important;
  font-size: clamp(22px, 2.2vw, 32px);
  font-weight: 700 !important;
  letter-spacing: -0.5px;
  line-height: 1.25;
  margin: 0 0 20px;
  overflow-wrap: break-word;
  background: linear-gradient(90deg, #ffffff 0%, #ffffff 32%, #c084fc 60%, #7c3aed 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
body:not(.dark) .hp-s3-text-hl {
  background: linear-gradient(90deg, #16215c 0%, #16215c 32%, #8228d6 60%, #5a18c0 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.hp-s3-text-body {
  font-size: clamp(14px, 1.1vw, 16px);
  line-height: 1.7;
  color: rgba(255,255,255,0.62);
  overflow-wrap: break-word;
}
body:not(.dark) .hp-s3-text-body { color: rgba(0,0,76,0.65); }

.hp-s3-cards {
  display: grid;
  grid-template-columns: repeat(3, 172px);
  grid-auto-rows: 142px;
  gap: 11px;
}

.hp-s3-card {
  border-radius: 12px;
  display: flex;
  align-items: flex-end;
  padding: 14px;
  position: relative;
  overflow: hidden;
  /* Default : sombre transparent */
  background: rgba(12, 16, 44, 0.70);
  border: 1px solid rgba(255,255,255,0.07);
  cursor: default;
  transition: background 0.35s ease;
}

/* Gradient reveal on hover via ::before */
.hp-s3-card::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  opacity: 0;
  transition: opacity 0.35s ease;
  pointer-events: none;
}
.hp-s3-card:hover::before { opacity: 1; }

.hp-s3-card span {
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.92);
  line-height: 1.3;
  position: relative;
  z-index: 1;
}

/* Gradient ::before par carte */
.hp-s3-card--datacoll::before  { background: linear-gradient(145deg, #0c3060 10%, #0a8fa8 100%); }
.hp-s3-card--content::before   { background: linear-gradient(145deg, #0a6a8a 10%, #0dbf90 100%); }
.hp-s3-card--influence::before { background: linear-gradient(145deg, #0c1a38 10%, #1a3060 100%); }
.hp-s3-card--affil::before     { background: linear-gradient(145deg, #0a5a80 10%, #08c4b0 100%); }
.hp-s3-card--sms::before       { background: linear-gradient(145deg, #3a0a80 10%, #6020c0 100%); }
.hp-s3-card--socialshop::before { background: linear-gradient(145deg, #061820 10%, #0a3040 100%); }
.hp-s3-card--email::before     { background: linear-gradient(145deg, #580a90 10%, #3a0870 100%); }
.hp-s3-card--display::before   { background: linear-gradient(145deg, #0a3888 10%, #0a70c8 100%); }

/* Ghost cards : transparents, cropés par overflow du panel */
.hp-s3-card--ghost {
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.06);
  cursor: default;
}
.hp-s3-card--ghost::before { display: none; }

/* ── Responsive ───────────────────────────────────────── */
@media (max-width: 1024px) {
  .hp-s3-left  { flex: 0 0 50%; padding: 32px 20px; }
  .hp-s3-radar { width: min(380px, 46vw); height: min(380px, 46vw); }
  .hp-s3-cards { grid-template-columns: repeat(3, 120px); grid-template-rows: repeat(4, 110px); gap: 8px; }
  .hp-s3-card  { padding: 10px; }
}

@media (max-width: 768px) {
  .hp-s3-glass { flex-direction: column; }
  .hp-s3-left  { flex: none; padding: 32px 24px 0; }
  .hp-s3-radar { width: min(340px, 85vw); height: min(340px, 85vw); }
  .hp-s3-right { padding: 24px; overflow-x: auto; }
  .hp-s3-cards { grid-template-columns: repeat(3, 130px); }
}

/* ══════════════════════════════════════════════════════
   FOOTER
══════════════════════════════════════════════════════ */
.hp-footer {
  position: relative;
  z-index: 1;
  background: linear-gradient(180deg, #010006 0%, #10132F 100%);
  border-top: none;
}
body:not(.dark) .hp-footer {
  background: linear-gradient(180deg, #ffffff 0%, #e8f2ff 60%, #cce5ff 100%);
  border-top: none;
}

.hp-footer-inner {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 40px;
}

/* CTA */
.hp-footer-cta { padding: 80px 0 64px; }
.hp-footer-cta .hp-footer-inner { padding-top: 0; padding-bottom: 0; }

.hp-footer-cta-hl {
  font-family: 'Inter', system-ui, sans-serif;
  font-size: clamp(28px, 3.5vw, 44px);
  font-weight: 600;
  line-height: 1.1;
  margin: 0 0 18px;
}

/* Gradient blanc → bleu → violet couvrant tout "Want to try ?" */
.hp-footer-cta-hl span {
  background: linear-gradient(90deg, #ffffff 0%, #ffffff 8%, #4facfe 42%, #a855f7 78%, #7c3aed 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
body:not(.dark) .hp-footer-cta-hl span {
  background: linear-gradient(90deg, #16215c 0%, #16215c 8%, #1478d4 42%, #8228d6 78%, #5a18c0 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.hp-footer-cta-sub {
  font-size: 16px;
  line-height: 1.65;
  color: #ffffff;
  max-width: 520px;
  margin: 0 0 36px;
}
body:not(.dark) .hp-footer-cta-sub { color: #16215c; }

.hp-footer-cta-btns { display: flex; gap: 14px; flex-wrap: wrap; align-items: center; }

.hp-footer-btn-primary {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 16px 40px;
  background: var(--cta1);
  color: #fff;
  border: none;
  border-radius: 5px;
  font-size: 15px;
  font-weight: 400;
  cursor: pointer;
  white-space: nowrap;
  transition: opacity 0.2s;
  letter-spacing: 0.01em;
}
.hp-footer-btn-primary:hover { opacity: 0.85; }

/* "Contact the team" : fond transparent, border gradient via mask */
.hp-footer-btn-outline {
  position: relative;
  display: inline-flex;
  align-items: center;
  padding: 15px 30px;
  border: none;
  background: transparent;
  border-radius: 5px;
  font-size: 15px;
  font-weight: 400;
  color: #ffffff;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: opacity 0.2s;
}
.hp-footer-btn-outline::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1.5px;
  background: linear-gradient(90deg, #4facfe 0%, #a855f7 60%, #7c3aed 100%);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
}
body:not(.dark) .hp-footer-btn-outline { color: #16215c; }
body:not(.dark) .hp-footer-btn-outline::before {
  background: linear-gradient(90deg, #1478d4 0%, #8228d6 60%, #5a18c0 100%);
}
.hp-footer-btn-outline span { color: inherit; }
.hp-footer-btn-outline:hover { opacity: 0.8; }

/* Nav columns */
.hp-footer-nav {
  border-top: 1px solid rgba(255,255,255,0.07);
  padding: 52px 0;
}
body:not(.dark) .hp-footer-nav { border-top-color: rgba(0,0,0,0.07); }

.hp-footer-nav .hp-footer-inner {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 32px;
}

/* ── Bloc logo — au-dessus de la grille de colonnes ─────── */
.hp-footer-brand {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 40px;
}
.hp-footer-brand .hp-logo-img { height: 24px; }
.hp-footer-tagline {
  font-size: 13px;
  color: rgba(255,255,255,0.35);
  margin: 0;
}
body:not(.dark) .hp-footer-tagline { color: rgba(0,0,76,0.38); }

.hp-footer-col h3 {
  font-size: 14px;
  font-weight: 700;
  color: #ffffff;
  margin: 0 0 18px;
  letter-spacing: 0;
}
body:not(.dark) .hp-footer-col h3 { color: #16215c; }

.hp-footer-col ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 11px; }

/* Liens avec underline animé gauche→droite au survol */
.hp-footer-col a {
  font-size: 14px;
  color: rgba(255,255,255,0.55);
  text-decoration: none;
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  transition: color 0.18s;
}
body:not(.dark) .hp-footer-col a { color: rgba(0,0,76,0.55); }

.hp-footer-col a::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 0;
  height: 1px;
  background: currentColor;
  transition: width 0.22s ease;
}
.hp-footer-col a:hover { color: #ffffff; }
body:not(.dark) .hp-footer-col a:hover { color: #16215c; }
.hp-footer-col a:hover::after { width: 100%; }

/* Partner badges */
.hp-footer-partners {
  border-top: 1px solid rgba(255,255,255,0.07);
  padding: 32px 0;
}
body:not(.dark) .hp-footer-partners { border-top-color: rgba(0,0,0,0.07); }

.hp-footer-partners .hp-footer-inner { display: flex; gap: 14px; align-items: stretch; flex-wrap: wrap; }

.hp-footer-badge {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 18px;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,0.10);
  background: rgba(255,255,255,0.05);
}
body:not(.dark) .hp-footer-badge { background: rgba(0,0,0,0.04); border-color: rgba(0,0,0,0.09); }

.hp-footer-badge--tiktok { color: #ffffff; }
body:not(.dark) .hp-footer-badge--tiktok { color: #16215c; }

.hp-footer-badge--meta { color: #ffffff; }
body:not(.dark) .hp-footer-badge--meta { color: #16215c; }

.hp-footer-badge--amazon {
  flex-direction: column;
  align-items: flex-start;
  gap: 5px;
  color: #ffffff;
}
body:not(.dark) .hp-footer-badge--amazon { color: #16215c; }

.hp-footer-badge-amazon-img { display: block; }
body.dark .hp-footer-badge-amazon-img { filter: brightness(0) invert(1); }

.hp-footer-badge-amazon-sub { font-size: 11px; }
.hp-footer-badge-amazon-sub .hp-badge-verified { color: #42929A; font-style: normal; }

.hp-footer-badge-text { display: flex; flex-direction: column; line-height: 1.25; }
.hp-footer-badge-text strong { font-size: 13px; font-weight: 700; }
.hp-footer-badge-text span   { font-size: 11px; opacity: 0.75; }
.hp-footer-badge-text--amazon strong { font-size: 12px; letter-spacing: -0.01em; }

.hp-footer-badge--google { color: #ffffff; }
body:not(.dark) .hp-footer-badge--google { color: #16215c; }

.hp-badge-verified { font-style: normal; color: #42929A; }

/* Legal bar */
.hp-footer-legal {
  border-top: 1px solid rgba(255,255,255,0.07);
  padding: 18px 0;
}
body:not(.dark) .hp-footer-legal { border-top-color: rgba(0,0,0,0.07); }

.hp-footer-legal-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
}

.hp-footer-legal-links { display: flex; gap: 20px; flex-wrap: wrap; }
.hp-footer-legal-links a {
  font-size: 12px;
  color: rgba(255,255,255,0.35);
  text-decoration: none;
  position: relative;
  transition: color 0.18s;
}
body:not(.dark) .hp-footer-legal-links a { color: rgba(0,0,76,0.38); }
.hp-footer-legal-links a::after {
  content: '';
  position: absolute;
  bottom: -2px; left: 0;
  width: 0; height: 1px;
  background: currentColor;
  transition: width 0.22s ease;
}
.hp-footer-legal-links a:hover { color: rgba(255,255,255,0.65); }
body:not(.dark) .hp-footer-legal-links a:hover { color: rgba(0,0,76,0.7); }
.hp-footer-legal-links a:hover::after { width: 100%; }

.hp-footer-copy { font-size: 12px; color: rgba(255,255,255,0.35); margin: 0; }
body:not(.dark) .hp-footer-copy { color: rgba(0,0,76,0.38); }

/* Icônes réseaux sociaux */
.hp-footer-social { display: inline-flex; align-items: center; gap: 8px; }

/* Responsive footer */
@media (max-width: 1200px) {
  .hp-footer-nav .hp-footer-inner { grid-template-columns: repeat(3, 1fr); gap: 32px; }
}
@media (max-width: 900px) {
  .hp-footer-nav .hp-footer-inner { grid-template-columns: repeat(2, 1fr); gap: 32px; }
}
@media (max-width: 560px) {
  .hp-footer-inner { padding: 0 20px; }
  .hp-footer-cta   { padding: 52px 0 44px; }
  .hp-footer-nav .hp-footer-inner { grid-template-columns: 1fr 1fr; gap: 24px; }
  .hp-footer-legal-inner { flex-direction: column; align-items: flex-start; }
  .hp-footer-brand { flex-wrap: wrap; }
}

@media (prefers-reduced-motion: reduce) {
  .hp-s3-dot { will-change: auto; }
}

/* ══ DROPDOWN PREMIUM ══════════════════════════════════ */
.hp-drop--wide {
  min-width: 520px;
  left: -60px;
}

.hp-drop-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2px;
  padding: 6px;
}

.hp-drop-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px 14px;
  border-radius: 8px;
  text-decoration: none;
  transition: background .12s;
  color: var(--text-nav);
}
.hp-drop-item:hover { background: rgba(255,255,255,0.06); }
body:not(.dark) .hp-drop-item:hover { background: rgba(0,0,120,0.04); }

.hp-drop-icon {
  flex-shrink: 0;
  width: 32px; height: 32px;
  border-radius: 8px;
  border: 1px solid rgba(255,255,255,0.09);
  display: flex; align-items: center; justify-content: center;
  color: #4facfe;
  background: rgba(255,255,255,0.04);
}
body:not(.dark) .hp-drop-icon {
  border-color: rgba(0,0,76,0.08);
  background: rgba(0,0,76,0.03);
  color: #1470cc;
}

.hp-drop-text {
  display: flex; flex-direction: column; gap: 2px;
}
.hp-drop-text b {
  font-size: 13px; font-weight: 600;
  color: var(--text-nav-h);
  display: block;
}
.hp-drop-text span {
  font-size: 12px; color: var(--text-nav);
  line-height: 1.4;
}

/* Single-column dropdowns (Partners, Ressources) */
.hp-drop:not(.hp-drop--wide) .hp-drop-grid {
  grid-template-columns: 1fr;
}
.hp-drop:not(.hp-drop--wide) {
  min-width: 280px;
}

/* ══ PREMIUM RIBBONS — landing ══════════════════════════ */
.sol-ribbons {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  overflow: hidden;
}
.rib {
  position: absolute;
  border-radius: 50%;
  will-change: transform;
  transition: opacity .6s;
}
.rib-1 {
  width: 85vw; height: 72vh;
  top: -30vh; left: -28vw;
  background: radial-gradient(ellipse at 42% 42%, rgba(62,114,245,0.72) 0%, rgba(124,58,237,0.42) 46%, transparent 70%);
  filter: blur(96px);
}
.rib-2 {
  width: 72vw; height: 62vh;
  bottom: -22vh; right: -22vw;
  background: radial-gradient(ellipse at 55% 55%, rgba(109,40,217,0.62) 0%, rgba(79,172,254,0.32) 52%, transparent 72%);
  filter: blur(108px);
}
.rib-3 {
  width: 42vw; height: 38vh;
  top: 38vh; right: -4vw;
  background: radial-gradient(ellipse at 48% 38%, rgba(124,58,237,0.52) 0%, rgba(34,211,165,0.18) 62%, transparent 80%);
  filter: blur(82px);
}
body.dark .rib-1 { opacity: 0.52; }
body.dark .rib-2 { opacity: 0.42; }
body.dark .rib-3 { opacity: 0.32; }
body:not(.dark) .rib-1 { opacity: 0.16; }
body:not(.dark) .rib-2 { opacity: 0.12; }
body:not(.dark) .rib-3 { opacity: 0.09; }
@keyframes rib-drift-a {
  0%   { transform: translate(0,0) scale(1); }
  50%  { transform: translate(28px,-22px) scale(1.04); }
  100% { transform: translate(0,0) scale(1); }
}
@keyframes rib-drift-b {
  0%   { transform: translate(0,0) scale(1); }
  50%  { transform: translate(-22px,18px) scale(1.03); }
  100% { transform: translate(0,0) scale(1); }
}
@keyframes rib-drift-c {
  0%   { transform: translate(0,0) scale(1); }
  50%  { transform: translate(16px,-12px) scale(0.97); }
  100% { transform: translate(0,0) scale(1); }
}
@media (prefers-reduced-motion: no-preference) {
  .rib-1 { animation: rib-drift-a 68s ease-in-out infinite; }
  .rib-2 { animation: rib-drift-b 88s ease-in-out infinite; animation-delay: -32s; }
  .rib-3 { animation: rib-drift-c 78s ease-in-out infinite; animation-delay: -18s; }
}

/* Mobile: dropdown items inline */
@media (max-width: 960px) {
  body.hp-mob-open .hp-drop-item {
    padding: 8px 32px;
    border-radius: 0;
    font-size: 13.5px;
  }
  body.hp-mob-open .hp-drop-grid {
    display: flex;
    flex-direction: column;
    gap: 0;
    padding: 0;
  }
  body.hp-mob-open .hp-drop-icon { display: none; }
  body.hp-mob-open .hp-drop-text span { display: none; }
}

/* ══════════════════════════════════════════════════════════
   MOBILE ≤ 768px — polish : overflow, nav, hero, s4, s2
   Ne modifie aucun rendu desktop > 768px
══════════════════════════════════════════════════════════ */
@media (max-width: 768px) {

  /* ─── Étoiles hero : accentuées sur mobile ──────────── */
  .hp-orbit-stars > span {
    width: 2px !important;
    height: 2px !important;
    opacity: 0.95 !important;
    box-shadow: 0 0 4px 2px rgba(255,255,255,0.5);
  }

  /* ─── Overflow horizontal — sécurité globale ─────────── */
  html, body       { overflow-x: clip; }
  #auth-layer      { overflow-x: clip; }
  .hp-hero         { overflow-x: clip; }
  .hp-s3           { overflow-x: clip; }
  .hp-s4           { overflow-x: clip; }
  .hp-s2           { overflow-x: clip; }
  .hp-footer       { overflow-x: clip; }
  .hp-logos-bar    { overflow: hidden; }
  .hp-marquee-viewport { overflow: hidden; max-width: 100%; }
  /* Les dots du radar peuvent légèrement dépasser : clip le conteneur */
  .hp-s3-radar     { overflow: hidden; }

  /* ─── Nav — logo gauche, burger droite ───────────────── */
  .hp-nav-inner {
    justify-content: space-between;
    padding: 0 20px;
    gap: 0;
  }
  .hp-logo-link { margin-right: 0; }
  .hp-burger {
    margin-left: 0;
    min-width: 44px;
    min-height: 44px;
    align-items: center;
    justify-content: center;
    padding: 10px;
  }

  /* ─── Hero — 100svh, visuel réduit, logos épinglé en bas ── */
  /* space-between : grid (contenu) en haut, logos-bar en bas */
  .hp-hero { min-height: 100svh; justify-content: space-between; }
  .hp-hero-grid {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    flex: 0 0 auto; /* hauteur naturelle — ne PAS flex:1 */
    padding: 8px 20px 0;
    gap: 16px;
  }
  .hp-hero-right {
    height: clamp(180px, 25svh, 280px); /* réduit de 38svh → 25svh */
    min-height: unset;
    max-height: unset;
  }
  body:not(.dark) .hp-hero-right { -webkit-mask-image: none; mask-image: none; }

  .hp-hl-l1, .hp-hl-l2 { font-size: clamp(28px, 8vw, 34px); }
  .hp-hero-left { gap: 16px; padding-right: 0; }
  .hp-sub { font-size: 16px; }

  /* Logos bar : pas de débordement, padding réduit */
  .hp-logos-bar { margin-top: 0; padding-bottom: 20px; }

  /* ─── Burger — menu mobile ──────────────────────────── */
  body.hp-mob-open .hp-nav-links {
    display: flex !important;
    flex-direction: column;
    align-items: stretch;
    position: fixed;
    top: var(--nav-h); left: 0; right: 0;
    background: var(--drop-bg);
    border-top: 1px solid var(--drop-border);
    z-index: 198;
    padding: 8px 0 16px;
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    box-shadow: 0 8px 24px rgba(0,0,0,0.24);
  }
  body.hp-mob-open .hp-nav-links li { width: 100%; }
  body.hp-mob-open .hp-navbtn {
    width: 100%;
    justify-content: flex-start;
    padding: 13px 24px;
    font-size: 15px;
    border-radius: 0;
    color: var(--text);
  }
  /* Dropdown inline dans l'overlay burger (pas de position absolute) */
  body.hp-mob-open .hp-drop {
    display: none;
    position: static;
    opacity: 1;
    transform: none;
    box-shadow: none;
    border: none;
    border-radius: 0;
    padding: 2px 0 6px 0;
    background: transparent;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    pointer-events: auto;
    transition: none;
  }
  body.hp-mob-open .hp-has-drop.open .hp-drop { display: block; }
  body.hp-mob-open .hp-drop-link {
    color: var(--text-2);
    font-size: 13.5px;
    padding: 8px 32px;
    border-radius: 0;
  }
  body.hp-mob-open .hp-drop-link:hover { background: rgba(120,120,255,0.08); color: var(--text); }

  /* ─── S3 Radar — taille validée, ne pas modifier ─────── */
  .hp-s3-radar { width: min(80vw, 320px); height: min(80vw, 320px); }
  .hp-s3-right { display: none; }
  /* Les dots gardent une taille fixe en px : à ce gabarit de radar réduit,
     ils débordent légèrement en haut/bas. On les réduit pour rester
     dans le cadre sans recadrage visible. */
  .hp-s3-dot--content, .hp-s3-dot--camera             { width: 54px; height: 54px; }
  .hp-s3-dot--strategy                                { width: 57px; height: 57px; }
  .hp-s3-dot--social, .hp-s3-dot--person              { width: 51px; height: 51px; }
  .hp-s3-dot--ads, .hp-s3-dot--tech                    { width: 45px; height: 45px; }
  .hp-s3-dot--leads                                    { width: 48px; height: 48px; }
  .hp-s3-dot--data                                     { width: 42px; height: 42px; }
  .hp-s3-dot--tiktok, .hp-s3-dot--meta, .hp-s3-dot--instagram { width: 47px; height: 47px; }
  .hp-s3-dot--instagram svg { width: 26px; height: 26px; }
  .hp-s3-dot--tiktok svg { width: 22px; height: 22px; }
  .hp-s3-dot--meta img { width: 32px; }

  /* ─── S4 Solutions — flux normal, sticky désactivé ─── */
  .hp-s4 { min-height: auto; margin-top: 0; }

  .hp-s4-sticky {
    position: relative;
    top: auto;
    height: auto;
    overflow: visible;
  }
  .hp-s4-sticky::before,
  .hp-s4-sticky::after { display: none; }

  .hp-s4-header { position: relative; padding: 28px 20px 0; }

  .hp-s4-nav {
    position: relative;
    top: auto;
    padding: 12px 20px 0;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .hp-s4-nav::-webkit-scrollbar { display: none; }

  .hp-s4-panels-wrap { position: relative; top: auto; }

  .hp-s4-panel,
  .hp-s4-panel.active,
  .hp-s4-panel.exiting {
    position: relative;
    inset: auto;
    opacity: 1;
    transform: none;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    padding: 20px 20px 36px;
    pointer-events: auto;
    transition: none;
  }

  #hp-s4-panel-1 { border-top: 1px solid rgba(255,255,255,0.08); }
  body:not(.dark) #hp-s4-panel-1 { border-top: 1px solid rgba(0,0,76,0.08); }

  /* Vidéos S4 — masquées mobile (aucun placeholder) */
  .hp-s4-left { display: none; }

  /* Chips et texte — centré, pleine largeur */
  .hp-s4-right  { flex: none; width: 100%; }
  .hp-s4-chips  { justify-content: flex-start; }
  .hp-s4-panel-body { text-align: center; max-width: 100%; }

  /* Panel 1 : reset des overrides desktop droite */
  #hp-s4-panel-1                   { justify-content: flex-start; }
  #hp-s4-panel-1 .hp-s4-right     { flex: none; max-width: 100%; text-align: left; }
  #hp-s4-panel-1 .hp-s4-chips     { justify-content: flex-start; }
  #hp-s4-panel-1 .hp-s4-panel-body { text-align: left; margin-left: 0; }

  /* Label "Data Intelligence" — élément HTML, trait s'arrête à la fin du texte */
  .hp-s4-di-label { display: none; } /* caché par défaut (desktop) */
  #hp-s4-panel-1 .hp-s4-di-label {
    display: inline-block;
    font-family: 'Inter', system-ui, sans-serif;
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #ffffff;
    padding-bottom: 5px;
    margin-bottom: 16px;
    background: linear-gradient(90deg, #4facfe, #7c3aed);
    background-repeat: no-repeat;
    background-size: 100% 1.5px;
    background-position: 0 100%;
  }
  body:not(.dark) #hp-s4-panel-1 .hp-s4-di-label {
    color: #16215c;
    background: linear-gradient(90deg, #3E72F5, #643BF5);
    background-repeat: no-repeat;
    background-size: 100% 1.5px;
    background-position: 0 100%;
  }

  /* ─── S2 — gradient centré bleu/violet sous le texte ─── */
  .hp-s2-parallax { display: none !important; }
  body.dark .hp-s2 {
    background:
      radial-gradient(ellipse 90% 50% at 50% 62%, rgba(63,114,245,0.30) 0%, rgba(100,59,245,0.18) 50%, transparent 72%),
      #010006;
  }
  body:not(.dark) .hp-s2 { padding-top: clamp(80px, 14svh, 140px); }

  /* Sous-titre : centré mobile */
  .hp-s2-sub { text-align: center; }
}

/* ══════════════════════════════════════════════════════
   PLATFORM OVERVIEW
══════════════════════════════════════════════════════ */
.hp-platform {
  position: relative;
  z-index: 1;
  padding: 120px 0 100px;
}
.hp-platform-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 40px;
}
.hp-platform-header { max-width: 720px; }
.hp-platform-label {
  display: inline-block;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--page-accent-text);
  background: var(--page-accent-soft);
  border: 1px solid var(--page-accent-border);
  border-radius: 999px;
  padding: 4px 12px;
  margin-bottom: 24px;
}
.hp-platform-title {
  font-size: clamp(2rem, 4vw, 3.2rem);
  font-weight: 800;
  line-height: 1.15;
  color: var(--text);
  margin: 0 0 20px;
}
.hp-platform-sub {
  font-size: 1.05rem;
  color: var(--text-2);
  max-width: 600px;
  line-height: 1.7;
  margin: 0 0 60px;
}
.hp-platform-grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 16px;
}
.hp-platform-cell {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 32px;
}
.hp-platform-cell--main    { grid-column: span 7; }
.hp-platform-cell--partners { grid-column: span 5; }
.hp-platform-cell--data    { grid-column: span 6; }
.hp-platform-cell--finance { grid-column: span 6; }
.hp-platform-cell-icon {
  width: 48px;
  height: 48px;
  border-radius: 10px;
  background: var(--page-accent-soft);
  border: 1px solid var(--page-accent-border);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 20px;
  color: var(--page-accent-text);
}
.hp-platform-cell h3 {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--text);
  margin: 0 0 10px;
}
.hp-platform-cell p {
  font-size: 0.9rem;
  color: var(--text-2);
  line-height: 1.65;
  margin: 0;
}
.hp-platform-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 20px;
}
.hp-platform-tags span {
  font-size: 0.78rem;
  font-weight: 500;
  color: var(--page-accent-text);
  background: var(--page-accent-soft);
  border: 1px solid var(--page-accent-border);
  border-radius: 999px;
  padding: 3px 10px;
}
@media (max-width: 900px) {
  .hp-platform-cell--main,
  .hp-platform-cell--partners,
  .hp-platform-cell--data,
  .hp-platform-cell--finance { grid-column: span 12; }
}

/* ══════════════════════════════════════════════════════
   RADAR
══════════════════════════════════════════════════════ */
.hp-radar {
  position: relative;
  z-index: 1;
  padding: 100px 0;
}
.hp-radar-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 40px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  align-items: center;
}
.hp-radar-label {
  display: inline-block;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--page-accent-text);
  background: var(--page-accent-soft);
  border: 1px solid var(--page-accent-border);
  border-radius: 999px;
  padding: 4px 12px;
  margin-bottom: 24px;
}
.hp-radar-title {
  font-size: clamp(1.8rem, 3.5vw, 2.8rem);
  font-weight: 800;
  line-height: 1.15;
  color: var(--text);
  margin: 0 0 20px;
}
.hp-radar-body {
  font-size: 0.95rem;
  color: var(--text-2);
  line-height: 1.7;
  margin: 0 0 40px;
}
.hp-radar-metrics {
  display: flex;
  gap: 32px;
}
.hp-radar-metric {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.hp-radar-metric-num {
  font-size: 1.6rem;
  font-weight: 800;
  color: var(--page-accent-text);
  line-height: 1;
}
.hp-radar-metric-label {
  font-size: 0.78rem;
  color: var(--text-2);
  font-weight: 500;
}
.hp-radar-left { display: flex; flex-direction: column; justify-content: center; }
.hp-radar-right {
  display: flex;
  align-items: center;
  justify-content: center;
}
.hp-radar .hp-s3-radar {
  width: 480px;
  height: 480px;
  max-width: 100%;
}
@media (max-width: 900px) {
  .hp-radar-inner {
    grid-template-columns: 1fr;
    gap: 48px;
  }
  .hp-radar .hp-s3-radar {
    width: 320px;
    height: 320px;
  }
  .hp-radar-metrics { gap: 20px; }
}

/* ══════════════════════════════════════════════════════
   SOLUTIONS BENTO
══════════════════════════════════════════════════════ */
.hp-solutions {
  position: relative;
  z-index: 1;
  padding: 100px 0;
}
.hp-solutions-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 40px;
}
.hp-solutions-label {
  display: inline-block;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--page-accent-text);
  background: var(--page-accent-soft);
  border: 1px solid var(--page-accent-border);
  border-radius: 999px;
  padding: 4px 12px;
  margin-bottom: 24px;
}
.hp-solutions-title {
  font-size: clamp(1.8rem, 3.5vw, 2.8rem);
  font-weight: 800;
  color: var(--text);
  margin: 0 0 48px;
}
.hp-solutions-bento {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 16px;
}
.hp-sol-card {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 32px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  text-decoration: none;
  color: inherit;
  transition: border-color 0.2s, background 0.2s;
  position: relative;
  overflow: hidden;
}
.hp-sol-card:hover {
  border-color: var(--page-accent-border);
  background: var(--page-accent-soft);
}
.hp-sol-card[data-accent="affiliation"]:hover       { border-color: rgba(79,70,229,0.4); }
.hp-sol-card[data-accent="lead-generation"]:hover   { border-color: rgba(79,172,254,0.4); }
.hp-sol-card[data-accent="social-shopping"]:hover   { border-color: rgba(236,72,153,0.4); }
.hp-sol-card[data-accent="content-to-commerce"]:hover { border-color: rgba(6,182,212,0.4); }
.hp-sol-card[data-accent="messaging"]:hover         { border-color: rgba(20,184,166,0.4); }
.hp-sol-card[data-accent="drive-to-store"]:hover    { border-color: rgba(163,230,53,0.35); }
.hp-sol-card--wide  { grid-column: span 7; }
.hp-sol-card--half  { grid-column: span 5; }
.hp-sol-card--third { grid-column: span 4; }
.hp-sol-card-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--page-accent-text);
  opacity: 0.8;
}
.hp-sol-card-title {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--text);
  margin: 0;
  line-height: 1.3;
}
.hp-sol-card-body {
  font-size: 0.88rem;
  color: var(--text-2);
  line-height: 1.6;
  margin: 0;
}
.hp-sol-card-arrow {
  margin-top: auto;
  font-size: 1.1rem;
  color: var(--page-accent-text);
  transition: transform 0.2s;
}
.hp-sol-card:hover .hp-sol-card-arrow { transform: translateX(4px); }
@media (max-width: 1100px) {
  .hp-sol-card--wide  { grid-column: span 12; }
  .hp-sol-card--half  { grid-column: span 6; }
  .hp-sol-card--third { grid-column: span 6; }
}
@media (max-width: 700px) {
  .hp-sol-card--wide,
  .hp-sol-card--half,
  .hp-sol-card--third { grid-column: span 12; }
}

/* ══════════════════════════════════════════════════════
   WORKFLOW
══════════════════════════════════════════════════════ */
.hp-workflow {
  position: relative;
  z-index: 1;
  padding: 100px 0;
}
.hp-workflow-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 40px;
}
.hp-workflow-label {
  display: inline-block;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--page-accent-text);
  background: var(--page-accent-soft);
  border: 1px solid var(--page-accent-border);
  border-radius: 999px;
  padding: 4px 12px;
  margin-bottom: 24px;
}
.hp-workflow-title {
  font-size: clamp(1.8rem, 3.5vw, 2.8rem);
  font-weight: 800;
  color: var(--text);
  margin: 0 0 16px;
}
.hp-workflow-sub {
  font-size: 1rem;
  color: var(--text-2);
  max-width: 560px;
  line-height: 1.7;
  margin: 0 0 64px;
}
.hp-workflow-steps {
  display: grid;
  grid-template-columns: 1fr auto 1fr auto 1fr;
  gap: 0;
  align-items: start;
  margin-bottom: 64px;
  padding: 40px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
}
.hp-wf-step { padding: 0 24px; }
.hp-wf-sep {
  font-size: 1.4rem;
  color: var(--page-accent-text);
  opacity: 0.5;
  padding-top: 4px;
  align-self: flex-start;
  margin-top: 4px;
}
.hp-wf-step-num {
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--page-accent-text);
  letter-spacing: 0.08em;
  margin-bottom: 12px;
  opacity: 0.7;
}
.hp-wf-step-title {
  font-size: 1rem;
  font-weight: 700;
  color: var(--text);
  margin: 0 0 8px;
}
.hp-wf-step-body {
  font-size: 0.88rem;
  color: var(--text-2);
  line-height: 1.6;
  margin: 0;
}
.hp-workflow-profiles {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}
.hp-wf-profile {
  padding: 28px 28px 24px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
}
.hp-wf-profile-icon {
  width: 40px;
  height: 40px;
  border-radius: 8px;
  background: var(--page-accent-soft);
  border: 1px solid var(--page-accent-border);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--page-accent-text);
  margin-bottom: 16px;
}
.hp-wf-profile strong {
  display: block;
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 8px;
}
.hp-wf-profile p {
  font-size: 0.88rem;
  color: var(--text-2);
  line-height: 1.6;
  margin: 0;
}
@media (max-width: 900px) {
  .hp-workflow-steps {
    grid-template-columns: 1fr;
    gap: 24px;
  }
  .hp-wf-sep { display: none; }
  .hp-wf-step { padding: 0; }
  .hp-workflow-profiles { grid-template-columns: 1fr; }
}

/* ══════════════════════════════════════════════════════
   CTA FINAL
══════════════════════════════════════════════════════ */
.hp-cta-final {
  position: relative;
  min-height: 480px;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1;
  overflow: hidden;
}
.hp-cta-final-video-wrap {
  position: absolute;
  inset: 0;
}
.hp-cta-final-video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.hp-cta-final-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(3,0,20,0.72) 0%, rgba(3,0,20,0.58) 60%, rgba(3,0,20,0.82) 100%);
}
body:not(.dark) .hp-cta-final-overlay {
  background: linear-gradient(180deg, rgba(255,255,255,0.95) 0%, rgba(246,246,252,0.93) 100%);
}
.hp-cta-final-content {
  position: relative;
  z-index: 1;
  text-align: center;
  padding: 80px 40px;
  max-width: 680px;
}
.hp-cta-final-label {
  display: inline-block;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--page-accent-text);
  background: var(--page-accent-soft);
  border: 1px solid var(--page-accent-border);
  border-radius: 999px;
  padding: 4px 12px;
  margin-bottom: 24px;
}
.hp-cta-final-hl {
  font-size: clamp(2rem, 4.5vw, 3.4rem);
  font-weight: 800;
  color: var(--text);
  margin: 0 0 16px;
  line-height: 1.1;
}
body.dark .hp-cta-final-hl { color: #ffffff; }
.hp-cta-final-sub {
  font-size: 1rem;
  color: var(--text-2);
  margin: 0 0 40px;
  line-height: 1.7;
}
body.dark .hp-cta-final-sub { color: rgba(255,255,255,0.65); }
.hp-cta-final-btns {
  display: flex;
  gap: 16px;
  justify-content: center;
  flex-wrap: wrap;
}
.hp-cta-final-btn-primary {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 14px 28px;
  border-radius: 8px;
  background: linear-gradient(135deg, var(--page-accent-1) 0%, var(--page-accent-2) 100%);
  color: #ffffff;
  font-weight: 700;
  font-size: 0.95rem;
  border: none;
  cursor: pointer;
  font-family: 'Inter', system-ui, sans-serif;
  transition: opacity 0.2s;
}
.hp-cta-final-btn-primary:hover { opacity: 0.88; }
.hp-cta-final-btn-outline {
  display: inline-flex;
  align-items: center;
  padding: 14px 28px;
  border-radius: 8px;
  background: transparent;
  color: var(--text);
  font-weight: 600;
  font-size: 0.95rem;
  border: 1px solid var(--page-accent-border);
  cursor: pointer;
  font-family: 'Inter', system-ui, sans-serif;
  transition: border-color 0.2s, background 0.2s;
}
.hp-cta-final-btn-outline:hover {
  border-color: var(--page-accent-1);
  background: var(--page-accent-soft);
}
body.dark .hp-cta-final-btn-outline { color: rgba(255,255,255,0.85); }
@media (max-width: 600px) {
  .hp-cta-final-btns { flex-direction: column; align-items: center; }
  .hp-cta-final-btn-primary, .hp-cta-final-btn-outline { width: 100%; justify-content: center; }
}

/* Footer simplifié (sans hp-footer-cta) */
.hp-footer { padding-top: 0; }