:root {
  --violet-royal: #5B2A8C;
  --violet-dark: #3D1B63;
  --violet-deep: #1F0F38;
  --lavender: #9B6FD1;
  --violet-tint: #F4EEFB;
  --white: #FFFFFF;
  --gold: #F4B400;
  --gold-soft: #FFD65C;
  --gold-dark: #A66800;
  --ink: #241A33;
  --ink-soft: #5C526B;
  --border: #E7DFF3;

  --font: 'Manrope', system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Consolas, monospace;
  --container: 1320px;
  --radius: 14px;
  --shadow: 0 10px 30px -12px rgba(61, 27, 99, 0.25);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; overflow-x: hidden; }
section[id], main > *[id] { scroll-margin-top: 90px; }
body {
  margin: 0;
  font-family: var(--font);
  color: var(--ink);
  background: var(--white);
  line-height: 1.6;
  overflow-x: hidden;
  width: 100%;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
ul { margin: 0; padding: 0; list-style: none; }
h1, h2, h3 { margin: 0 0 .5em; line-height: 1.2; font-weight: 800; }
h1 { font-size: clamp(2rem, 4.2vw, 3.1rem); letter-spacing: -0.02em; line-height: 1.12; }
h2 { font-size: clamp(1.5rem, 2.8vw, 2.15rem); letter-spacing: -0.01em; }
h3 { font-size: 1.1rem; }
p { margin: 0 0 1em; color: var(--ink-soft); }

.text-gradient {
  background: linear-gradient(120deg, var(--gold-soft), var(--gold));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.container {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 24px;
}

.skip-link {
  position: absolute;
  left: -999px;
  top: 0;
  background: var(--violet-royal);
  color: var(--white);
  padding: 10px 16px;
  z-index: 200;
}
.skip-link:focus { left: 12px; top: 12px; }

.complio-hero-grid {
  grid-template-columns: 1.1fr .9fr;
  gap: 48px;
  align-items: center;
}
.complio-hero-shot { justify-self: center; }
@media (max-width: 860px) {
  .complio-hero-grid { grid-template-columns: 1fr; }
  .complio-hero-shot { order: -1; margin: 0 auto; }
  /* .frame-tablet and .frame-phone poke out below .product-devices via negative
     "bottom" offsets (-42px / -66px) — the grid gap alone doesn't clear that
     overflow, so the copy underneath needs its own top margin to not overlap them. */
  .complio-hero-grid .hero-copy { margin-top: 90px; }
}

/* Product device mockup (Complio page hero) — flat vector frames, brand-colored bezels,
   no stock photo to lighting-match against. */
.product-devices {
  position: relative;
  width: 100%;
  max-width: 480px;
  padding: 4px 26px 118px 30px;
}
.frame {
  display: block;
  overflow: hidden;
  background: var(--violet-deep);
  border: 4px solid var(--violet-deep);
}
.frame img { display: block; width: 100%; height: 100%; object-fit: cover; }

.frame-monitor {
  width: 100%;
  border-radius: 8px;
  border-width: 4px;
  position: relative;
  box-shadow: 0 26px 44px -18px rgba(0,0,0,.55);
}
.frame-monitor img { aspect-ratio: 1905 / 870; object-position: top left; }
.frame-cam {
  position: absolute;
  top: -6px; left: 50%;
  transform: translateX(-50%);
  width: 5px; height: 5px;
  border-radius: 50%;
  background: rgba(255,255,255,.25);
}
.monitor-stand {
  width: 64px;
  height: 30px;
  margin: 0 auto;
  background: var(--violet-deep);
  clip-path: polygon(38% 0, 62% 0, 74% 100%, 26% 100%);
}
.monitor-base {
  width: 170px;
  height: 10px;
  margin: 6px auto 0;
  border-radius: 6px;
  background: var(--violet-deep);
}

.frame-tablet {
  position: absolute;
  left: -6%;
  bottom: -42px;
  width: 46%;
  aspect-ratio: 4 / 3;
  border-radius: 14px;
  box-shadow: 12px 22px 34px -16px rgba(0,0,0,.5);
}
.frame-tablet img { object-position: top left; }

.frame-phone {
  position: absolute;
  right: -4%;
  bottom: -66px;
  width: 24%;
  aspect-ratio: 9 / 18;
  border-radius: 20px;
  border-width: 3px;
  box-shadow: -8px 22px 34px -16px rgba(0,0,0,.5);
}
.frame-phone img { object-position: top left; }
.frame-notch {
  position: absolute;
  top: 0; left: 50%;
  transform: translateX(-50%);
  width: 34%;
  height: 14px;
  background: var(--violet-deep);
  border-radius: 0 0 8px 8px;
  z-index: 1;
}
@media (max-width: 720px) {
  .product-devices { max-width: 340px; margin: 0 auto; }
}

/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 13px 26px;
  border-radius: 999px;
  font-weight: 700;
  font-size: .95rem;
  transition: transform .15s ease, box-shadow .15s ease, opacity .15s ease;
  border: none;
  cursor: pointer;
}
.btn-accent {
  background: linear-gradient(135deg, var(--gold-soft), var(--gold) 55%, var(--violet-royal) 100%);
  color: var(--white);
}
.btn-accent:hover { transform: translateY(-2px); box-shadow: 0 8px 20px -6px rgba(244,180,0,.55); }
.btn-ghost {
  background: transparent;
  color: var(--violet-royal);
  border: 2px solid var(--violet-royal);
}
.btn-ghost:hover { background: var(--violet-tint); }
.btn-ghost-light {
  background: rgba(255,255,255,.08);
  color: var(--white);
  border: 2px solid rgba(255,255,255,.55);
}
.btn-ghost-light:hover { background: rgba(255,255,255,.16); border-color: var(--white); }
.btn-lg { padding: 16px 34px; font-size: 1.05rem; }
.btn-lg:has(.btn-icon) { padding: 10px 10px 10px 32px; }
.btn-lg .btn-icon { width: 36px; height: 36px; }

.btn:has(.btn-icon) { padding: 8px 8px 8px 24px; }
.btn-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px; height: 32px;
  border-radius: 50%;
  background: var(--violet-deep);
  color: var(--white);
  flex-shrink: 0;
  transition: transform .2s ease;
}
.btn:hover .btn-icon { transform: rotate(45deg); }
.btn-ghost .btn-icon { background: var(--violet-royal); }
.btn-ghost-light .btn-icon { background: rgba(255,255,255,.22); }

.btn-dark {
  background: rgba(255,255,255,.1);
  border: 1px solid rgba(255,255,255,.35);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  color: var(--white);
}
.btn-dark:hover { transform: translateY(-2px); background: rgba(255,255,255,.16); border-color: rgba(255,255,255,.55); }
.btn-dark .btn-icon { background: rgba(255,255,255,.16); }

/* Header — floats over the hero as a frosted glass bar, like a native app chrome */
.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  background: rgba(20,10,36,.35);
  backdrop-filter: blur(16px) saturate(1.3);
  -webkit-backdrop-filter: blur(16px) saturate(1.3);
  transition: transform .3s ease, background .3s ease;
}
.site-header.is-hidden { transform: translateY(-100%); }
/* Once scrolled past the hero, switch to an opaque light bar so the header reads
   correctly over ordinary white section content instead of staying glass-dark. */
.site-header.is-scrolled {
  background: rgba(255,255,255,.85);
}
.site-header.is-scrolled .logo,
.site-header.is-scrolled .main-nav > ul > li > a {
  color: var(--violet-dark);
}
.logo, .main-nav > ul > li > a, .nav-toggle span {
  transition: color .3s ease, background-color .3s ease;
}
.site-header:not(.is-scrolled) .logo,
.site-header:not(.is-scrolled) .main-nav > ul > li > a {
  color: var(--white);
}
.site-header:not(.is-scrolled) .nav-toggle span { background: var(--white); }
@media (max-width: 980px) {
  /* backdrop-filter on a fixed header renders unreliably in some mobile/in-app
     browsers (blank or a visible seam at its edge) — use a solid tint instead. */
  .site-header { background: rgba(20,10,36,.88); backdrop-filter: none; -webkit-backdrop-filter: none; }
  .site-header.is-scrolled { background: rgba(255,255,255,.96); }
}
/* Legal pages have no dark hero behind the header, so it must read as scrolled from the start */
.legal-page .site-header {
  background: rgba(255,255,255,.92);
}
.legal-page .site-header .logo,
.legal-page .site-header .main-nav > ul > li > a {
  color: var(--violet-dark);
}
.legal-page .nav-toggle span { background: var(--violet-dark); }
.header-inner {
  display: flex;
  align-items: center;
  gap: 18px;
  height: 76px;
}
.logo {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 800;
  font-size: 1.25rem;
  color: var(--violet-dark);
  margin-right: auto;
}
.logo-img {
  height: 30px;
  width: auto;
  display: block;
}
.logo-img-white { display: none; }
.site-header:not(.is-scrolled) .logo-img-color { display: none; }
.site-header:not(.is-scrolled) .logo-img-white { display: block; }
.site-header.is-scrolled .logo-img-color { display: block; }
.site-header.is-scrolled .logo-img-white { display: none; }
.legal-page .site-header .logo-img-color { display: block; }
.legal-page .site-header .logo-img-white { display: none; }
.logo-footer .logo-img { height: 26px; }
.main-nav ul {
  display: flex;
  gap: 22px;
}
.main-nav > ul > li > a {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-weight: 600;
  font-size: .92rem;
  padding: 8px 2px;
  position: relative;
  white-space: nowrap;
}
.nav-chevron { transition: transform .2s ease; }
.has-dropdown:hover .nav-chevron,
.has-dropdown:focus-within .nav-chevron,
.has-dropdown.is-open .nav-chevron {
  transform: rotate(180deg);
}
.main-nav > ul > li > a::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 2px;
  background: var(--gold);
  transform: scaleX(0);
  transition: transform .2s ease;
}
.main-nav > ul > li > a:hover::after { transform: scaleX(1); }

.has-dropdown { position: relative; }
.dropdown {
  position: absolute;
  top: calc(100% + 14px);
  left: 50%;
  transform: translateX(-50%);
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: var(--shadow);
  min-width: 280px;
  padding: 10px;
  opacity: 0;
  visibility: hidden;
  transition: opacity .18s ease, transform .18s ease;
}
.has-dropdown:hover .dropdown,
.has-dropdown:focus-within .dropdown {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
}
.dropdown li a {
  display: block;
  padding: 10px 14px;
  border-radius: 8px;
  font-size: .92rem;
  font-weight: 600;
}
.dropdown li a:hover { background: var(--violet-tint); color: var(--violet-royal); }

.nav-cta { flex-shrink: 0; }

.nav-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 40px;
  height: 40px;
  background: none;
  border: none;
  cursor: pointer;
}
.nav-toggle span {
  width: 24px;
  height: 2px;
  background: var(--violet-dark);
  border-radius: 2px;
  transition: transform .2s ease, opacity .2s ease;
}

/* Tech texture: soft glow blobs, reused on dark sections */
.hero, .section-dark { position: relative; overflow: hidden; }
.hero-glow {
  position: absolute;
  z-index: 2;
  top: -20%; left: 0; right: 0;
  height: 145%;
  background:
    radial-gradient(38% 55% at 12% 15%, rgba(244,180,0,.30) 0%, transparent 70%),
    radial-gradient(35% 45% at 92% 85%, rgba(255,255,255,.16) 0%, transparent 70%),
    radial-gradient(30% 40% at 80% 10%, rgba(155,111,209,.35) 0%, transparent 70%);
  background-size: 130% 130%;
  pointer-events: none;
  will-change: transform, background-position;
  animation: glowDrift 16s ease-in-out infinite alternate;
}
@keyframes glowDrift {
  0%   { background-position: 0% 0%, 100% 100%, 80% 0%; }
  100% { background-position: 12% 14%, 88% 84%, 66% 18%; }
}
@media (prefers-reduced-motion: reduce) {
  .hero-glow { animation: none; }
}
.hero-glow-alt {
  background:
    radial-gradient(35% 50% at 88% 20%, rgba(244,180,0,.22) 0%, transparent 70%),
    radial-gradient(35% 45% at 8% 85%, rgba(155,111,209,.30) 0%, transparent 70%);
}
/* Hero */
.hero {
  padding: 110px 0 100px;
  background: linear-gradient(135deg, var(--violet-deep) 0%, var(--violet-royal) 48%, var(--lavender) 82%, rgba(244,180,0,.35) 100%);
  color: var(--white);
}
.hero-inner {
  position: relative;
  z-index: 3;
}
.hero-copy { max-width: 520px; }
.hero h1, .hero p { color: var(--white); }
.text-lavender {
  background: linear-gradient(100deg, var(--white), var(--lavender));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: .78rem;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--violet-royal);
  margin-bottom: 18px;
}
.eyebrow::before {
  content: '';
  width: 8px; height: 8px;
  border-radius: 2px;
  background: linear-gradient(135deg, var(--gold-soft), var(--gold));
  flex-shrink: 0;
}
.eyebrow-light { color: var(--gold-soft); }
.hero-lead { font-size: 1.1rem; color: rgba(255,255,255,.88) !important; max-width: 560px; }
.hero-actions { display: flex; gap: 16px; flex-wrap: wrap; margin-top: 8px; }
.hero-illustration {
  width: 100%; max-width: 480px;
  filter: drop-shadow(0 20px 40px rgba(0,0,0,.35));
  animation: heroFloat 6s ease-in-out infinite;
}

/* Wrapper that JS translates on scroll for a parallax drift — kept separate from
   .marquee-wall so the scroll transform never fights its own centering/rotation transform. */
.marquee-parallax {
  position: absolute;
  inset: 0;
  z-index: 0;
}
/* Full-bleed scrolling wall of (grayscale) product screens behind the hero, on a diagonal */
.marquee-wall {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 130%;
  height: 160%;
  transform: translate(-50%, -50%) rotate(-8deg);
  transform-origin: center;
  display: flex;
  gap: 10px;
  overflow: hidden;
}
/* Dark, opaque scrim so the copy on the left stays readable; fades out toward the right
   so the scrolling screens still show through clearly on that side. Stops are in px, not %,
   because .hero-copy has a fixed max-width (620px) — a %-based fade covers less of it as the
   viewport narrows, letting the marquee bleed through behind the text on medium screens. */
.hero-scrim {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(100deg,
    rgba(19,9,35,.97) 0px,
    rgba(19,9,35,.93) 320px,
    rgba(31,15,56,.78) 660px,
    rgba(31,15,56,.4) 940px,
    rgba(31,15,56,.2) 1200px);
}
.marquee-col { flex: 1; overflow: hidden; }
.marquee-track {
  display: flex;
  flex-direction: column;
  animation: marqueeUp 52s linear infinite;
  will-change: transform;
}
.marquee-col:nth-child(1) .marquee-track { animation-duration: 44s; }
.marquee-col:nth-child(2) .marquee-track { animation-duration: 60s; }
.marquee-col:nth-child(3) .marquee-track { animation-duration: 50s; }
.marquee-col:nth-child(4) .marquee-track { animation-duration: 68s; }
.marquee-col:nth-child(5) .marquee-track { animation-duration: 56s; }
.marquee-col:nth-child(6) .marquee-track { animation-duration: 64s; }
.marquee-col.reverse .marquee-track { animation-name: marqueeDown; }
.marquee-track img { width: 100%; display: block; }
.marquee-gap { width: 100%; height: 14px; background: rgba(31,15,56,.9); }
@keyframes marqueeUp { from { transform: translateY(0); } to { transform: translateY(-50%); } }
@keyframes marqueeDown { from { transform: translateY(-50%); } to { transform: translateY(0); } }
@media (prefers-reduced-motion: reduce) {
  .marquee-track { animation: none; }
}
.node-dot {
  transform-box: fill-box;
  transform-origin: center;
  animation: nodePulse 2.4s ease-in-out infinite;
}
.node-dot:nth-child(1) { animation-delay: 0s; }
.node-dot:nth-child(2) { animation-delay: .3s; }
.node-dot:nth-child(3) { animation-delay: .6s; }
.node-dot:nth-child(4) { animation-delay: .9s; }
.node-dot:nth-child(5) { animation-delay: 1.2s; }
.node-dot:nth-child(6) { animation-delay: 1.5s; }

@keyframes heroFloat {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-14px); }
}
@keyframes nodePulse {
  0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.6); opacity: .55; }
}
@media (prefers-reduced-motion: reduce) {
  .hero-illustration, .node-dot { animation: none !important; }
}

/* Sections */
.section { padding: 88px 0; }
.section-tint { background: var(--violet-tint); }
.section-dark {
  background: linear-gradient(160deg, var(--violet-deep), var(--violet-royal) 60%, var(--violet-dark));
  color: var(--white);
  margin: 0 0.1cm;
  border-radius: 28px;
}
.section-dark p, .section-dark h2 { color: var(--white); }
.section-dark .container { position: relative; z-index: 1; }
h2.light { color: var(--white); }

.grid { display: grid; gap: 24px; margin-top: 42px; }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }
.grid-5 { grid-template-columns: repeat(5, 1fr); }

/* Problem cards */
.problem-card {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 26px 20px;
}
.problem-num {
  display: block;
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 1.4rem;
  color: var(--gold-dark);
  margin-bottom: 10px;
  opacity: 0;
  transform: scale(1.6);
  transition: opacity .4s ease, transform .5s cubic-bezier(.34,1.56,.64,1);
  transition-delay: .12s;
}
/* Staggered per card, in step with the card's own reveal-group cascade delay
   (0/90/180/270/360ms) plus a 120ms lag so the number pops just after the card lands. */
.reveal-group .problem-card:nth-child(2) .problem-num { transition-delay: .21s; }
.reveal-group .problem-card:nth-child(3) .problem-num { transition-delay: .3s; }
.reveal-group .problem-card:nth-child(4) .problem-num { transition-delay: .39s; }
.reveal-group .problem-card:nth-child(5) .problem-num { transition-delay: .48s; }
.reveal.is-visible .problem-num { opacity: 1; transform: scale(1); }
.no-js .problem-num { opacity: 1; transform: none; }
.problem-card p { color: var(--ink); margin: 0; font-weight: 600; font-size: .95rem; }

/* Solution / product cards */
.solution-card, .product-card {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 32px 28px;
  box-shadow: var(--shadow);
}
.solution-icon, .product-mark {
  width: 54px; height: 54px;
  border-radius: 12px;
  background: linear-gradient(145deg, var(--violet-tint), #E9DCF7);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.7), 0 4px 14px -6px rgba(91,42,140,.35);
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 18px;
}
.product-shot {
  width: calc(100% + 56px);
  margin: -32px -28px 18px;
  overflow: hidden;
  border-radius: var(--radius) var(--radius) 0 0;
}
.product-shot svg, .product-shot img { width: 100%; height: auto; display: block; }

/* Photo band placeholder: swap in a real <img> (see assets/photos/) once available */
.card-photo {
  width: calc(100% + 56px);
  height: 168px;
  margin: -32px -28px 20px;
  border-radius: var(--radius) var(--radius) 0 0;
  background: linear-gradient(145deg, var(--violet-royal), var(--violet-deep));
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.card-photo img { width: 100%; height: 100%; object-fit: cover; }
.card-photo svg { opacity: .3; }
.card-photo svg.card-illustration { width: 100%; height: 100%; opacity: 1; }
.check-list li {
  position: relative;
  padding-left: 26px;
  margin-bottom: 10px;
  font-size: .93rem;
  color: var(--ink-soft);
}
.check-list li::before {
  content: '✓';
  position: absolute;
  left: 0;
  color: var(--gold-dark);
  font-weight: 800;
}
.check-list.large li { font-size: 1rem; color: var(--ink); font-weight: 600; }

/* Timeline */
.timeline {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  margin-top: 48px;
}
.timeline-step {
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.18);
  border-radius: var(--radius);
  padding: 26px 22px;
}
.step-index {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px; height: 34px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--gold-soft), var(--gold));
  color: var(--violet-dark);
  font-family: var(--font-mono);
  font-weight: 700;
  margin-bottom: 14px;
}
.timeline-step h3 { color: var(--white); }
.timeline-step p { color: rgba(255,255,255,.78); margin: 0; font-size: .93rem; }

/* Conseil IA section */
.ia-layout {
  display: grid;
  grid-template-columns: minmax(280px, 420px) 1fr;
  gap: 56px;
  align-items: start;
}
.ia-photo {
  position: sticky;
  top: 100px;
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow);
}
.ia-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ia-photo::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 13%;
  background: linear-gradient(to top, var(--violet-deep) 0%, var(--violet-deep) 50%, rgba(31,15,56,0) 100%);
}
.ia-content .lead-text { margin-bottom: 28px; }
.ia-feature-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
  margin: 0 0 32px;
}
.ia-feature {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 20px 22px;
  box-shadow: var(--shadow);
}
.ia-feature h3 { margin: 0; font-size: 1rem; color: var(--ink); line-height: 1.35; }

/* Sector cards — full-bleed photo, text overlaid on a dark scrim at the bottom */
.sector-card {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius);
  aspect-ratio: 4 / 5;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}
.sector-card .card-photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  border-radius: 0;
}
.sector-card::before {
  content: "";
  position: absolute;
  inset: 0;
  /* z-index needed: with both this and .card-photo at the default stacking level,
     paint order follows DOM order and the photo (a real element after this
     generated content) would paint on top, hiding the cover entirely. */
  z-index: 1;
  /* One uniform dark cover over the whole photo — same darkness top to bottom,
     so the image reads consistently and text is legible wherever it sits, not
     just near the bottom. .6 is the minimum that keeps white text at ≥4.5:1
     contrast even over a pure-white patch of photo (sky, glare, reflection). */
  background: rgba(8,6,18,.6);
  pointer-events: none;
}
.sector-card h3 {
  position: relative;
  z-index: 1;
  color: var(--white);
  padding: 0 22px;
  min-height: 2.4em;
  margin-bottom: 6px;
  text-shadow: 0 1px 3px rgba(0,0,0,.9), 0 4px 14px rgba(0,0,0,.55);
}
.sector-card .check-list {
  position: relative;
  z-index: 1;
  padding: 0 22px 20px;
  min-height: 104px;
}
.sector-card .check-list li { color: rgba(255,255,255,.92); text-shadow: 0 1px 2px rgba(0,0,0,.9), 0 2px 10px rgba(0,0,0,.55); line-height: 1.3; margin-bottom: 6px; }
.sector-card .check-list li:last-child { margin-bottom: 0; }
.sector-card .check-list li::before { color: var(--gold-soft); text-shadow: 0 1px 2px rgba(0,0,0,.9), 0 2px 10px rgba(0,0,0,.55); }

/* FAQ */
.faq-list { display: flex; flex-direction: column; gap: 12px; }
.faq-item {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 4px 22px;
}
.faq-item summary {
  padding: 18px 28px 18px 0;
  font-weight: 700;
  color: var(--ink);
  cursor: pointer;
  list-style: none;
  position: relative;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
  content: '+';
  position: absolute;
  right: 0;
  top: 18px;
  font-size: 1.3rem;
  font-weight: 700;
  color: var(--violet-royal);
}
.faq-item[open] summary::after { content: '−'; }
.faq-item p { padding-bottom: 20px; margin: -8px 0 0; }

/* Products carousel */
.carousel { margin-top: 42px; }
.carousel-track {
  display: flex;
  gap: 24px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding: 4px 4px 16px;
  scrollbar-width: none;
}
.carousel-track::-webkit-scrollbar { display: none; }
.carousel-slide {
  flex: 0 0 clamp(260px, 32%, 340px);
  scroll-snap-align: start;
}
.product-card { height: 100%; display: flex; flex-direction: column; position: relative; }
.product-status {
  position: absolute;
  top: 20px; right: 20px;
  font-family: var(--font-mono);
  font-size: .7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
  padding: 5px 12px;
  border-radius: 999px;
}
.product-status-live { background: rgba(52,168,83,.14); color: #1F8A3B; }
.product-status-soon { background: var(--violet-tint); color: var(--violet-royal); }
.product-card.is-upcoming { border-style: dashed; }
.product-card.is-cta {
  background: linear-gradient(160deg, var(--violet-royal), var(--violet-deep));
  color: var(--white);
  justify-content: center;
  text-align: left;
}
.product-card.is-cta h3, .product-card.is-cta p { color: var(--white); }
.product-mark-cta { background: rgba(255,255,255,.12); }
.carousel-controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  margin-top: 18px;
}
.carousel-btn {
  width: 40px; height: 40px;
  border-radius: 50%;
  border: 1px solid var(--border);
  background: var(--white);
  color: var(--violet-royal);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  transition: background .2s ease, color .2s ease, transform .2s ease;
}
.carousel-btn:hover { background: var(--violet-royal); color: var(--white); transform: translateY(-2px); }
.carousel-btn:disabled { opacity: .35; cursor: default; transform: none; background: var(--white); color: var(--violet-royal); }
.carousel-dots { display: flex; gap: 8px; }
.carousel-dots button {
  width: 9px; height: 9px;
  border-radius: 50%;
  border: none;
  background: var(--border);
  padding: 0;
  cursor: pointer;
  transition: background .2s ease, transform .2s ease;
}
.carousel-dots button.is-active { background: var(--gold); transform: scale(1.25); }

/* About */
.about-section { position: relative; overflow: hidden; }
.about-grid {
  position: relative;
  z-index: 1;
  max-width: 760px;
  margin: 0 auto;
}
.lead-text { font-size: 1.05rem; }

.about-mist {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
  background-image: radial-gradient(rgba(91,42,140,.07) 1px, transparent 1px);
  background-size: 22px 22px;
  animation: dustDrift 50s linear infinite;
}
.about-wave {
  position: absolute;
  top: -25%;
  left: -20%;
  width: 90%;
  height: 150%;
  background: linear-gradient(100deg,
    transparent 0%,
    transparent 28%,
    rgba(139,92,220,.34) 44%,
    rgba(190,155,235,.52) 50%,
    rgba(139,92,220,.34) 56%,
    transparent 72%,
    transparent 100%);
  filter: blur(45px);
  animation: waveSweepDiagonal 20s ease-in-out infinite;
}
@keyframes waveSweepDiagonal {
  0%   { transform: translate(-90%, -18%); }
  20%  { transform: translate(140%, 18%); }
  100% { transform: translate(140%, 18%); }
}
@keyframes dustDrift {
  0%   { background-position: 0 0; }
  100% { background-position: 240px 120px; }
}
@media (prefers-reduced-motion: reduce) {
  .about-mist, .about-wave { animation: none !important; }
}

/* CTA band */
.cta-band { padding: 40px 0.5cm; }
.cta-card {
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  flex-wrap: wrap;
  background:
    radial-gradient(120% 160% at 85% 50%, rgba(31,15,56,.35) 0%, transparent 60%),
    linear-gradient(120deg, var(--gold-soft) 0%, var(--gold) 45%, var(--violet-royal) 100%);
  border-radius: 28px;
  padding: 56px 64px;
  box-shadow: var(--shadow);
}
/* fine diamond grid, brightest at the edges, fading out behind the text */
.cta-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    repeating-linear-gradient(45deg, rgba(255,255,255,.16) 0 1.5px, transparent 1.5px 48px),
    repeating-linear-gradient(-45deg, rgba(255,255,255,.16) 0 1.5px, transparent 1.5px 48px);
  -webkit-mask-image: radial-gradient(120% 140% at 50% 50%, transparent 32%, #000 78%);
  mask-image: radial-gradient(120% 140% at 50% 50%, transparent 32%, #000 78%);
  pointer-events: none;
}
/* bold oversized diamonds, only where the two opposite corners flare out */
.cta-card::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    repeating-linear-gradient(45deg, rgba(255,255,255,.5) 0 2px, transparent 2px 130px),
    repeating-linear-gradient(-45deg, rgba(255,255,255,.5) 0 2px, transparent 2px 130px);
  -webkit-mask-image:
    radial-gradient(50% 90% at 0% 0%, #000 0%, transparent 60%),
    radial-gradient(50% 90% at 100% 100%, #000 0%, transparent 60%);
  -webkit-mask-composite: source-over;
  mask-image:
    radial-gradient(50% 90% at 0% 0%, #000 0%, transparent 60%),
    radial-gradient(50% 90% at 100% 100%, #000 0%, transparent 60%);
  mask-composite: add;
  pointer-events: none;
}
.cta-card h2 { position: relative; color: var(--white); max-width: 620px; margin: 0; text-align: left; }
.cta-card .btn { position: relative; flex-shrink: 0; }
.cta-card .btn-accent {
  background: linear-gradient(135deg, var(--gold) 0%, var(--violet-royal) 55%, var(--violet-deep) 100%);
}
@media (max-width: 640px) {
  .cta-card { padding: 40px 28px; text-align: center; justify-content: center; }
  .cta-card h2 { text-align: center; }
}

/* Contact */
.contact-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 56px;
  align-items: start;
}
.contact-info li { margin-bottom: 12px; color: var(--ink-soft); }
.contact-form {
  display: grid;
  gap: 16px;
  background: var(--violet-tint);
  padding: 30px;
  border-radius: var(--radius);
}
.contact-form label {
  display: grid;
  gap: 6px;
  font-size: .88rem;
  font-weight: 700;
  color: var(--ink);
}
.contact-form input,
.contact-form textarea {
  font-family: var(--font);
  font-size: .95rem;
  padding: 12px 14px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--white);
  resize: vertical;
}
.contact-form input:focus,
.contact-form textarea:focus {
  outline: 2px solid var(--violet-royal);
  outline-offset: 1px;
}
.contact-form button { justify-self: start; }
.form-note { font-size: .88rem; color: var(--violet-royal); font-weight: 700; min-height: 1.2em; }

/* Footer */
.site-footer {
  background: var(--violet-deep);
  color: rgba(255,255,255,.75);
  padding: 64px 0 24px;
}
.site-footer p { color: rgba(255,255,255,.75); }
.footer-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1.2fr;
  gap: 32px;
}
.logo-footer { color: var(--white); margin-bottom: 12px; }
.footer-tagline { font-size: .9rem; }
.site-footer h3 {
  color: var(--white);
  font-size: .85rem;
  text-transform: uppercase;
  letter-spacing: .06em;
  margin-bottom: 16px;
}
.site-footer ul li { margin-bottom: 10px; font-size: .9rem; }
.site-footer a:hover { color: var(--gold); }
.footer-bottom {
  margin-top: 48px;
  padding-top: 24px;
  border-top: 1px solid rgba(255,255,255,.12);
  font-size: .82rem;
  display: flex;
  flex-wrap: wrap;
  gap: 8px 20px;
  justify-content: space-between;
}
.footer-bottom p { margin: 0; }
.footer-legal-links a { color: rgba(255,255,255,.75); }
.footer-legal-links a:hover { color: var(--gold); }

/* Legal pages (mentions légales, politique de confidentialité) */
.legal-content .container { max-width: 760px; }
.legal-content h1 { margin-top: 8px; }
.legal-content h2 { font-size: 1.2rem; margin-top: 1.6em; }
.legal-content a { color: var(--violet-royal); text-decoration: underline; }

/* Reveal animation */
.reveal {
  opacity: 0;
  transform: translateY(36px) scale(.97);
  transition: opacity .7s cubic-bezier(.16,1,.3,1), transform .7s cubic-bezier(.16,1,.3,1);
  transition-delay: var(--reveal-delay, 0ms);
}
.reveal.is-visible { opacity: 1; transform: none; }
/* Safety net: if JavaScript never runs (blocked, errors out), content must not stay invisible forever */
.no-js .reveal { opacity: 1; transform: none; }

/* Cascade / stagger: cards in the same grid reveal one after another */
.reveal-group .reveal:nth-child(1) { --reveal-delay: 0ms; }
.reveal-group .reveal:nth-child(2) { --reveal-delay: 90ms; }
.reveal-group .reveal:nth-child(3) { --reveal-delay: 180ms; }
.reveal-group .reveal:nth-child(4) { --reveal-delay: 270ms; }
.reveal-group .reveal:nth-child(5) { --reveal-delay: 360ms; }
.reveal-group .reveal.is-visible { --reveal-delay: 0ms; }

/* Hover lift */
.solution-card, .sector-card, .problem-card, .timeline-step, .product-card {
  transition:
    opacity .7s cubic-bezier(.16,1,.3,1) var(--reveal-delay, 0ms),
    transform .18s ease-out var(--reveal-delay, 0ms),
    box-shadow .25s ease,
    border-color .25s ease;
}
.solution-card, .product-card, .sector-card { transform-style: preserve-3d; }
.solution-card:hover, .sector-card:hover, .product-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 16px 40px -14px rgba(91,42,140,.45), 0 0 0 1px rgba(244,180,0,.35);
  border-color: var(--gold);
}
/* JS applies a richer 3D tilt via inline style on fine-pointer devices; this hover rule
   remains as the fallback for touch and reduced-motion, where JS tilt never attaches. */
.problem-card:hover { transform: translateY(-4px); border-color: var(--gold); }
.timeline-step:hover { transform: translateY(-4px); border-color: var(--gold); background: rgba(255,255,255,.1); }

/* Custom cursor (desktop / fine pointers only, injected via JS) */
html.has-custom-cursor, html.has-custom-cursor a, html.has-custom-cursor button { cursor: none; }
.cursor-dot, .cursor-ring {
  position: fixed;
  top: 0; left: 0;
  pointer-events: none;
  z-index: 9999;
  border-radius: 50%;
}
.cursor-dot {
  width: 8px; height: 8px;
  margin-left: -4px; margin-top: -4px;
  background: var(--gold);
}
.cursor-ring {
  width: 34px; height: 34px;
  margin-left: -17px; margin-top: -17px;
  border: 1.5px solid rgba(91,42,140,.55);
  transition: width .2s ease, height .2s ease, margin .2s ease, border-color .2s ease, background .2s ease;
}
.cursor-ring.is-active {
  width: 54px; height: 54px;
  margin-left: -27px; margin-top: -27px;
  background: rgba(244,180,0,.12);
  border-color: var(--gold);
}
@media (pointer: coarse) {
  .cursor-dot, .cursor-ring { display: none !important; }
}

/* Responsive */
@media (max-width: 980px) {
  .hero-inner { grid-template-columns: 1fr; text-align: left; }
  .hero-visual { order: -1; max-width: 360px; margin: 0 auto 12px; }
  .grid-5 { grid-template-columns: repeat(2, 1fr); }
  .grid-4 { grid-template-columns: repeat(2, 1fr); }
  .grid-3, .grid-2 { grid-template-columns: 1fr; }
  .ia-layout { grid-template-columns: 1fr; }
  .ia-photo { max-width: 420px; margin: 0 auto; }
  .ia-feature-grid { grid-template-columns: 1fr; }
  .timeline { grid-template-columns: repeat(2, 1fr); }
  .contact-grid { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 980px) {
  .main-nav {
    position: fixed;
    top: 76px;
    left: 0; right: 0;
    bottom: 0;
    width: 100%;
    max-width: 100vw;
    background: var(--white);
    padding: 24px;
    transform: translateX(100%);
    transition: transform .25s ease;
    overflow-y: auto;
    overflow-x: hidden;
  }
  .main-nav.is-open { transform: translateX(0); }
  .main-nav ul { flex-direction: column; gap: 4px; }
  .main-nav > ul > li > a { display: block; padding: 14px 4px; border-bottom: 1px solid var(--border); }
  .dropdown {
    position: static;
    transform: none;
    opacity: 1;
    visibility: visible;
    box-shadow: none;
    border: none;
    display: none;
    margin-left: 12px;
  }
  .has-dropdown.is-open .dropdown { display: block; }
  .nav-cta { display: none; }
  .nav-toggle { display: flex; }
  .carousel-slide { flex-basis: 82%; }
}

@media (max-width: 640px) {
  .grid-5, .grid-4 { grid-template-columns: 1fr; }
  .timeline { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr; }
  /* 6 columns x ~20 images each is too much for mobile GPUs to composite smoothly —
     drop to 3 columns so the marquee scrolls cleanly instead of stuttering/freezing. */
  .marquee-col:nth-child(4), .marquee-col:nth-child(5), .marquee-col:nth-child(6) { display: none; }
}