/* ==========================================================================
   Section layouts
   ========================================================================== */

/* --- Navbar --------------------------------------------------------------- */
.nav {
  position: fixed;
  inset: 0 0 auto;
  z-index: 100;
  padding-top: 15px;
  transition: background-color var(--dur) var(--ease),
              backdrop-filter var(--dur) var(--ease),
              padding var(--dur) var(--ease),
              border-color var(--dur) var(--ease);
  border-bottom: 1px solid transparent;
}
.nav.is-stuck {
  padding-top: 8px;
  padding-bottom: 8px;
  background: rgba(0, 0, 0, 0.72);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom-color: var(--c-line-faint);
}
.nav__inner {
  display: flex;
  align-items: center;
  gap: 48px;
  min-height: 42px;
}
.nav__menu { display: flex; align-items: center; gap: 19px; }
.nav__link {
  font-family: var(--f-display);
  font-size: 16px;
  line-height: 20px;
  font-weight: 800;
  letter-spacing: 0.32px;
}
.nav__link:hover { color: var(--c-accent); }
.nav__cta { margin-left: auto; }

/* Mobile disclosure panel — enabled at <=991px in responsive.css */
.nav__panel { display: none; }

.nav__toggle {
  display: none;
  margin-left: auto;
  width: 42px; height: 42px;
  border: 1px solid var(--c-line-strong);
  border-radius: var(--r-pill);
  place-items: center;
}
.nav__toggle span {
  position: relative;
  display: block;
  width: 16px; height: 1.5px;
  background: #fff;
  transition: transform var(--dur) var(--ease), background-color var(--dur) var(--ease);
}
.nav__toggle span::before,
.nav__toggle span::after {
  content: "";
  position: absolute;
  left: 0;
  width: 100%; height: 100%;
  background: #fff;
  transition: transform var(--dur) var(--ease);
}
.nav__toggle span::before { top: -5px; }
.nav__toggle span::after  { top: 5px; }
.nav[data-open="true"] .nav__toggle span { background: transparent; }
.nav[data-open="true"] .nav__toggle span::before { transform: translateY(5px) rotate(45deg); }
.nav[data-open="true"] .nav__toggle span::after  { transform: translateY(-5px) rotate(-45deg); }

/* --- Hero ----------------------------------------------------------------- */
.hero {
  position: relative;
  padding: 120px 0 36px;
  overflow: hidden;
  background: var(--c-bg);
}
/* Layered violet field + upward arrow motif, drawn entirely in CSS/SVG */
.hero__backdrop { position: absolute; inset: 0; pointer-events: none; }
.hero__radial {
  position: absolute;
  left: 50%; top: 42%;
  transform: translate(-50%, -50%);
  width: min(1440px, 108vw);
  height: 1200px;
  background:
    radial-gradient(ellipse 34% 36% at 52% 44%, rgba(163, 112, 255, 0.95), transparent 68%),
    radial-gradient(ellipse 52% 48% at 50% 48%, rgba(120, 52, 255, 0.62), transparent 72%),
    radial-gradient(ellipse 26% 28% at 66% 38%, rgba(92, 10, 255, 0.5), transparent 70%);
  filter: blur(34px);
}
.hero__arrows {
  position: absolute;
  left: 50%; top: 46%;
  transform: translate(-46%, -50%);
  width: min(1020px, 92vw);
  aspect-ratio: 1;
  opacity: 1;
}
.hero__lines {
  position: absolute;
  left: 50%; top: 46%;
  transform: translate(-50%, -50%);
  width: min(1160px, 96vw);
  aspect-ratio: 1;
  opacity: 0.6;
}
.hero__vignette {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 58% 62% at 50% 44%, transparent 32%, rgba(0, 0, 0, 0.88) 100%),
    linear-gradient(90deg, #000 0%, transparent 22%, transparent 78%, #000 100%),
    linear-gradient(180deg, rgba(0, 0, 0, 0.55) 0%, transparent 16%, transparent 68%, #000 100%);
}

.hero__inner {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 40px;
  max-width: 640px;
  margin-inline: auto;
  text-align: center;
}
.hero__badge {
  width: 42px; height: 34px;
  display: grid;
  place-items: center;
}
.hero__title {
  font-family: var(--f-display);
  font-size: var(--t-hero);
  line-height: var(--t-hero-lh);
  font-weight: 700;
  text-wrap: balance;
}
.hero__desc {
  font-family: var(--f-display);
  font-size: var(--t-lead);
  line-height: var(--t-lead-lh);
  font-weight: 400;
  letter-spacing: -0.56px;
  color: var(--c-text);
  max-width: 34ch;
  /* Le sous-titre français tient sur trois lignes et laissait un mot seul en
     dernière ligne (65px sur mobile). `balance` répartit les lignes à égalité. */
  text-wrap: balance;
}
.hero__heading { display: flex; flex-direction: column; align-items: center; gap: 24px; }
.hero__cta { display: flex; flex-direction: column; align-items: center; gap: 8px; }

.hero__trusted {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 80px;
  padding: 24px var(--gutter) 35px;
}
.hero__rule { flex: 1 1 396px; max-width: 396px; height: 1px; background: var(--c-divider); }
.hero__trusted-inner { display: flex; align-items: center; gap: 18px; flex: none; }
.hero__trusted-label {
  font-family: var(--f-mono);
  font-size: 16px;
  line-height: 16px;
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
}
.hero__trusted-count {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--f-grotesk);
  font-size: 24px;
  font-weight: 700;
  letter-spacing: 0.5px;
}
.hero__trusted-count small {
  font-size: 16px;
  font-weight: 500;
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--c-text-dim);
}

/* --- Customer journeys ---------------------------------------------------- */
.journeys { padding-block: 0 var(--sp-section-sm); }
/* 880px au lieu de 760 : le titre en capitales tient alors sur deux lignes
   (comme le titre précédent) au lieu de trois. Portée limitée à cette section. */
.journeys__head { max-width: 880px; padding-bottom: 32px; }
.journey-card {
  display: flex;
  gap: 16px;
  align-items: center;
  flex: none;
  width: 428px;
  height: 391px;
}
.journey-card__pane {
  position: relative;
  width: 206px;
  height: 100%;
  border-radius: var(--r-md);
  overflow: hidden;
  border: 1px solid var(--c-line-faint);
}
/* La créa remplit le volet. Ratio image 0.5625 contre 0.527 pour le volet :
   `cover` ne rogne que ~6% en largeur, réparti des deux côtés — nettement
   moins pénalisant que les bandes noires qu'imposerait `contain`. */
.journey-card__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}
.journey-card__tag {
  position: absolute;
  left: 0; right: 0; top: 0;
  z-index: 2;
  padding: 10px;
  text-align: center;
  font-family: var(--f-grotesk);
  font-size: 11px;
  letter-spacing: 2.4px;
  text-transform: uppercase;
  color: var(--c-text-dim);
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.85), transparent);
}

/* --- Partnership ---------------------------------------------------------- */
.partnership { position: relative; overflow: hidden; }
.partnership__block {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  text-align: center;
  padding-block: var(--sp-section-xs);
  min-height: 449px;
}
.partnership__arrow { width: 28px; height: 54px; margin-top: 8px; color: var(--c-accent); }

.partnership__cards {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  width: 100%;
  padding-top: 8px;
}
.partnership__plus {
  flex: none;
  font-family: var(--f-grotesk);
  font-size: 56px;
  line-height: 56px;
  font-weight: 300;
  color: var(--c-accent);
}
.partnership-card {
  position: relative;
  flex: 1 1 0;
  min-width: 0;
  min-height: 300px;
  padding: 24px 72px 24px 24px;
  background: #fff;
  border-radius: var(--r-md);
  overflow: hidden;
  text-align: left;
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.partnership-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 32px 64px -32px rgba(140, 82, 255, 0.8);
}
.partnership-card__art {
  position: absolute;
  right: -40px; top: 0; bottom: 0;
  width: 442px;
  max-width: 62%;
  opacity: 0.9;
  /* The art starts under the copy column, so it fades in from the left and
     only reaches full strength past where the longest description wraps.
     Same treatment as .service-card__art. */
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 45%);
          mask-image: linear-gradient(90deg, transparent, #000 45%);
}
.partnership-card__art > .ph { width: 100%; height: 100%; }
/* Image carrée (1:1) dans un cadre en 1.337 : `cover` remplit le cadre et ne
   rogne que le fond flou en haut et en bas, le tableau restant centré. */
.partnership-card__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}
.partnership-card__text { position: relative; display: flex; flex-direction: column; gap: 6px; max-width: 74%; }
.partnership-card__title {
  font-family: var(--f-display);
  font-size: 28px;
  line-height: 35px;
  font-weight: 800;
  letter-spacing: var(--ls-tight);
  color: #000;
}
.partnership-card__desc {
  padding-left: 15px;
  border-left: 2px solid var(--c-accent);
  font-family: var(--f-body);
  font-size: 15px;
  line-height: 20px;
  color: rgba(0, 0, 0, 0.68);
}

/* --- Stats ---------------------------------------------------------------- */
.stats { position: relative; overflow: hidden; padding-block: 72px 36px; }
.stats__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  padding-top: 8px;
}
.stats__cta {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
  padding-block: 72px 24px;
  text-align: center;
}
.stats__spark { width: 48px; height: 49px; color: var(--c-accent); }

/* --- Services ------------------------------------------------------------- */
.services { position: relative; overflow: hidden; padding-block: 64px var(--sp-section); }
.services__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  padding-top: 72px;
}

/* --- Case studies --------------------------------------------------------- */
.cases { position: relative; overflow: hidden; padding-block: var(--sp-section); }
.cases__inner { display: flex; flex-direction: column; gap: 100px; }
.cases__group { display: flex; flex-direction: column; gap: var(--sp-block); }
.cases__group-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
}
.cases__group-title {
  font-family: var(--f-display);
  font-size: 28px;
  line-height: 35px;
  font-weight: 400;
  letter-spacing: -0.56px;
}
.cases__chips { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.cases__chip {
  padding: 5px 14px;
  border: 1px solid var(--c-line-soft);
  border-radius: var(--r-pill);
  font-family: var(--f-grotesk);
  font-size: 12px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--c-text-faint);
}

/* --- Process -------------------------------------------------------------- */
.process { position: relative; background: var(--c-bg); padding-block: var(--sp-section-xs) var(--sp-section); overflow: hidden; }
.process__panel {
  display: flex;
  align-items: center;
  gap: 40px;
  padding: 20px;
  background: var(--c-surface-3);
  border: 1px solid var(--c-line-faint);
  border-radius: var(--r-md);
}
.process__panel-text { flex: 1 1 0; display: flex; flex-direction: column; gap: 16px; padding-right: 20px; }
.process__media {
  position: relative;
  flex: 1 1 0;
  aspect-ratio: 16 / 9;
  border-radius: var(--r-md);
  overflow: hidden;
}
.process__media > .ph { position: absolute; inset: 0; }
/* Le cadre est en 16:9 comme la source : `cover` ne rogne donc rien, il
   garantit seulement l’absence de bande au pixel près. */
.process__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  background: #000;
}
.process__play {
  position: absolute;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  z-index: 3;
  display: grid;
  place-items: center;
  width: 72px; height: 72px;
  border: 2px solid rgba(255, 255, 255, 0.8);
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.35);
  backdrop-filter: blur(4px);
  color: #fff;
  transition: transform var(--dur) var(--ease), background-color var(--dur) var(--ease);
}
.process__play:hover { transform: translate(-50%, -50%) scale(1.08); background: var(--c-accent); }

/* Bandeau partenaires — proportions relevées sur le visuel de référence :
   rapport ~8.9:1, libellé calé à gauche, badges poussés à droite, badges à
   46% de la hauteur du bandeau, gouttière de 17px. */
.process__partners {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 40px;
  flex-wrap: wrap;
  min-height: 144px;
  padding: 24px 48px;
  margin-block: 40px;
  border: 1px solid var(--c-line-faint);
  border-radius: var(--r-md);
  overflow: hidden;
  /* Presque noir à gauche, violet profond à droite. */
  background:
    radial-gradient(150% 210% at 100% 50%, rgba(88, 44, 190, 0.55), transparent 58%),
    linear-gradient(90deg, #05040a 0%, #0a0713 40%, #17103a 78%, #241a55 100%);
}
/* Trame de points, révélée uniquement sur la moitié droite. */
.process__partners::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image: radial-gradient(rgba(255, 255, 255, 0.24) 1px, transparent 1px);
  background-size: 7px 7px;
  -webkit-mask-image: linear-gradient(90deg, transparent 42%, #000 100%);
          mask-image: linear-gradient(90deg, transparent 42%, #000 100%);
  opacity: 0.55;
}
.process__partners > * { position: relative; z-index: 1; }

.process__partners-title {
  font-family: var(--f-grotesk);
  font-size: 24px;
  line-height: 34.56px;
  font-weight: 400;
  letter-spacing: 3.2px;
  text-transform: uppercase;
  white-space: nowrap;
}
/* Les badges reposent directement sur le dégradé : pas de conteneur intermédiaire. */
.process__partners-logos {
  display: flex;
  align-items: center;
  gap: 17px;
}
.process__partner {
  display: grid;
  place-items: center;
  height: 66px;
  padding-inline: 30px;
  border: 1px solid rgba(255, 255, 255, 0.62);
  border-radius: 12px;
  background: rgba(6, 4, 12, 0.5);
  transition: border-color var(--dur) var(--ease), background-color var(--dur) var(--ease);
}
.process__partner:hover {
  border-color: #fff;
  background: rgba(140, 82, 255, 0.16);
}
/* Hauteur fixe, largeur libre : chaque badge s'adapte à son logo sans le déformer. */
.process__partner-logo {
  height: 30px;
  width: auto;
  display: block;
}

.process__steps {
  display: flex;
  flex-direction: column;
  gap: 12px;
  max-width: 1052px;
  margin-inline: auto;
}
.process__footer {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
  padding-top: 72px;
  text-align: center;
}

/* --- Comparison ----------------------------------------------------------- */
.compare { position: relative; background: var(--c-bg); padding-block: 0 var(--sp-section-sm); overflow: hidden; }
.compare__inner { display: flex; flex-direction: column; gap: 72px; }
.compare__head { display: flex; flex-direction: column; align-items: center; gap: 4px; text-align: center; }
.compare__head .section-title { max-width: 24ch; }
.compare__head-sub { font-weight: 400; }

.compare__toggle { display: flex; flex-direction: column; align-items: center; gap: 16px; }
.compare__tabs { display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; }
.compare__tab {
  position: relative;
  padding: 14px 20px;
  border: 1px solid var(--c-line-soft);
  border-radius: var(--r-md);
  font-family: var(--f-display);
  font-size: 18px;
  line-height: 18.9px;
  font-weight: 400;
  letter-spacing: 0.18px;
  text-transform: uppercase;
  color: var(--c-text-dim);
  transition: color var(--dur) var(--ease),
              border-color var(--dur) var(--ease),
              background-color var(--dur) var(--ease);
}
.compare__tab:hover { color: #fff; border-color: var(--c-line-strong); }
.compare__tab[aria-selected="true"] {
  color: #fff;
  border-color: var(--c-accent);
  background: rgba(140, 82, 255, 0.16);
}

.compare__panels {
  position: relative;
  width: 100%;
  border-radius: var(--r-md);
  overflow: hidden;
  border: 1px solid var(--c-line-faint);
}
.compare__panel {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  min-height: 433px;
}
.compare__panel[hidden] { display: none; }
.compare__panel-text {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 36px 64px 40px 36px;
  background: linear-gradient(140deg, rgba(140, 82, 255, 0.14), rgba(0, 0, 0, 0.6));
}
.compare__panel-title {
  font-family: var(--f-display);
  font-size: 28px;
  line-height: 28px;
  font-weight: 400;
  letter-spacing: var(--ls-tight);
}
.compare__panel-body { display: flex; flex-direction: column; gap: 1em; color: var(--c-text-dim); font-size: 16px; line-height: 24px; }
/* Liste à puces dans un panneau : même pastille violette que les cartes
   Services et Études de cas, hérite de la typo du corps de texte. */
.compare__panel-list { display: flex; flex-direction: column; gap: 10px; margin: 0; padding: 0; list-style: none; }
.compare__panel-list li { display: flex; gap: 10px; }
.compare__panel-list li::before {
  content: '';
  flex: none;
  width: 6px; height: 6px;
  margin-top: 9px;
  border-radius: 50%;
  background: var(--c-accent);
}

.compare__panel-art { position: relative; min-height: 433px; }
.compare__panel-art > .ph { position: absolute; inset: 0; }
/* Visuel réel de l’onglet : remplit le cadre existant sans déformation. */
.compare__panel-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* 40 % plutôt que 50 % : dans la bande paysage de 260px (768-991px) seule
     46 % de la hauteur reste visible, et ce calage garde les visages entiers
     ainsi que les cartes de notification. Effet négligeable en desktop, où le
     recadrage n'excède pas 52px. */
  object-position: var(--art-pos, center 40%);
}

.compare__progress {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 7px;
  background: #000;
  border-radius: 0 0 var(--r-md) var(--r-md);
  overflow: hidden;
}
.compare__progress-bar {
  width: 0%;
  height: 100%;
  background: var(--c-accent);
}
.compare__progress-bar.is-running { animation: compare-fill 9s linear forwards; }
@keyframes compare-fill { from { width: 0%; } to { width: 100%; } }

.compare__footer {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
  text-align: center;
}

/* --- Team ----------------------------------------------------------------- */
.team { position: relative; overflow: hidden; padding-block: var(--sp-section); }
.team__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
  padding-top: 48px;
}

/* --- FAQ ------------------------------------------------------------------ */
.faq { padding-block: var(--sp-section) var(--sp-section-sm); }
.faq__wrap { display: flex; gap: 72px; align-items: flex-start; }
.faq__left { flex: 0 0 380px; display: flex; flex-direction: column; gap: 48px; }
.faq__right { flex: 1 1 0; min-width: 0; }

/* --- Resources ------------------------------------------------------------ */
.resources { position: relative; overflow: hidden; padding-block: var(--sp-section); }
.resources__wrap { display: flex; flex-direction: column; gap: 48px; }
.resources__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}
.resource-card {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--c-line);
  border-radius: var(--r-md);
  overflow: hidden;
  background: var(--c-surface);
  transition: border-color var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.resource-card:hover { border-color: var(--c-accent-soft); transform: translateY(-4px); }
.resource-card__media { position: relative; aspect-ratio: 16 / 9; }
.resource-card__media > .ph { position: absolute; inset: 0; }
/* Portraits verticaux dans un cadre 16:9 : `cover` remplit sans déformer, et
   `--portrait-pos` cale la bande visible sur le visage, réglé par personne. */
.resource-card__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: var(--portrait-pos, center);
}
.resource-card__body { display: flex; flex-direction: column; gap: 8px; padding: 20px; }
.resource-card__kicker {
  font-family: var(--f-grotesk);
  font-size: 12px;
  letter-spacing: 2.4px;
  text-transform: uppercase;
  color: var(--c-accent);
}
.resource-card__title {
  font-family: var(--f-display);
  font-size: 18px;
  line-height: 24px;
  font-weight: 700;
}

/* --- Final CTA + footer --------------------------------------------------- */
.cta { padding-block: 48px 0; }
.cta__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  padding-bottom: 48px;
  text-align: center;
}
.cta__desc { max-width: 590px; }
.cta__button { margin-top: 16px; }

.footer { position: relative; overflow: hidden; }
.footer__glow {
  position: absolute;
  left: 50%; bottom: -220px;
  transform: translateX(-50%);
  width: 1200px; height: 460px;
  background: radial-gradient(ellipse at center, rgba(140, 82, 255, 0.55), transparent 68%);
  filter: blur(70px);
  pointer-events: none;
}
.footer__inner {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 40px;
  min-height: 400px;
  padding-block: 48px;
}
.footer__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  flex-wrap: wrap;
}
.footer__nav { display: flex; gap: 32px; flex-wrap: wrap; }
.footer__nav a { font-family: var(--f-grotesk); font-size: 14px; letter-spacing: 0.5px; }
.footer__nav a:hover { color: #fff; }
.footer__bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
  padding-top: 24px;
  border-top: 1px solid var(--c-line-faint);
}
.footer__copy, .footer__social, .footer__social a {
  font-family: var(--f-grotesk);
  font-size: 14px;
  line-height: 20px;
}
.footer__social { display: flex; gap: 30px; flex-wrap: wrap; }
/* Placeholder social entries: styled like the links they will become. */
.footer__social-pending { color: var(--c-text-faint); }
.footer__social a:hover { color: var(--c-accent); }