/* Premier écran : hero + logos occupent exactement la fenêtre, le hero
   prend la place restante et centre son contenu verticalement.
   Dans l'iframe Webflow, 100svh vaudrait la hauteur de l'iframe, qui suit
   celle de la page (boucle) : on utilise --fold-h, hauteur de la fenêtre
   parente envoyée par webflow-embed.html (js/embed.js), sinon rien. */
.hp-fold {
  display: flex;
  flex-direction: column;
  min-height: 100svh;
}

.is-embedded .hp-fold {
  min-height: var(--fold-h, 0px);
}

.hp-fold > .hp-hero {
  display: flex;
  flex: 1;
  flex-direction: column;
  justify-content: center;
}

.hp-fold > .hp-hero > .hp-hero-grid {
  width: 100%;
}

.hp-hero {
  /* Hero plus large que le reste de la page (--wrap-max : 1200px) : le texte
     se rapproche du bord gauche, le player gagne de la place. */
  --hero-wrap: 1320px;
  position: relative;
  overflow: hidden;
  padding: 72px 32px 40px;
  background-color: var(--color-white);
}

/* Page dans un iframe (classe posée par js/embed.js) : la nav fixe de
   www.legaleo.ai (.nav-wrapper : 80px desktop, 78px mobile, mesuré sur la
   page Leo) recouvre le haut de l'iframe. On la dégage. */
.is-embedded .hp-hero {
  padding-top: 132px;
}

/* Colonne droite un peu plus large : le player y réduit son canevas de
   scènes (880 px) à la largeur dispo, chaque pixel compte pour la lisibilité. */
.hp-hero-grid {
  max-width: var(--hero-wrap);
  display: grid;
  grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
  align-items: center;
  gap: 10px;
}

.hp-h1 {
  margin-top: 0;
  font-family: var(--font-serif);
  font-size: 50px;
  font-weight: 500;
  line-height: 1.07;
  letter-spacing: -1.2px;
  text-wrap: balance;
}

.hp-h1 .hp-em {
  color: var(--color-teal);
}

.hp-lede {
  max-width: 540px;
  margin-top: 22px;
  color: var(--color-muted);
  font-size: 17px;
  line-height: 1.6;
  text-wrap: pretty;
}

/* Décalage d'apparition du hero */
.hp-hero-copy > :nth-child(2) { --reveal-delay: 100ms; }
.hp-hero-copy > :nth-child(3) { --reveal-delay: 200ms; }
.hp-hero-copy > :nth-child(4) { --reveal-delay: 300ms; }

.hp-h1 sup {
  font-size: 0.5em;
  line-height: 0;
  vertical-align: 0.8em;
}

/* Ligne de preuves sous les boutons */
.hp-proofs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 20px;
  max-width: 560px;
  margin-top: 28px;
  padding: 0;
  list-style: none;
  color: var(--color-muted);
  font-size: 13.5px;
  font-weight: 600;
}

.hp-proofs li {
  display: flex;
  align-items: center;
  gap: 7px;
}

.hp-proofs li::before {
  content: "";
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  border-radius: 50%;
  background: var(--color-teal-bg) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23087f83' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / 10px no-repeat;
}

/* Colonne visuelle : le player (css/player.css). Il casse la grille :
   déborde dans la marge droite de la page (--bleed : jusqu'à 140px, en
   gardant 48px d'air avec le bord de la fenêtre), pour un canevas de
   scènes moins réduit. .hp-hero coupe ce qui dépasserait
   (overflow: hidden). */
.hp-hero-visual {
  --bleed: clamp(0px, calc((100vw - var(--hero-wrap)) / 2 - 48px), 140px);
  justify-self: start;
  width: calc(100% + var(--bleed));
}

/* ---------- Écosystème (orbites) — désactivé ----------
   Markup rangé dans <template id="hp-eco-disabled"> (index.html), styles
   gardés pour une éventuelle réactivation.
   Scène carrée : le SVG (viewBox 600 × 600) et les pastilles HTML partagent
   le même repère, les pastilles étant placées en % de la scène. Les tailles
   sont en cqw pour que tout l'ensemble se réduise d'un bloc. */

.hp-eco {
  position: relative;
  container-type: inline-size;
}

/* JS actif : caché jusqu'à l'intro (ou jusqu'à l'affichage statique si GSAP
   n'a pas chargé, voir initHeroEcosystem). */
.js-reveal .hp-eco:not(.is-ready) {
  opacity: 0;
}

/* Trame de points + lueur derrière la scène */
.hp-eco::before,
.hp-eco::after {
  content: "";
  position: absolute;
  pointer-events: none;
}

.hp-eco::before {
  inset: -4%;
  background-image: radial-gradient(rgb(8 127 131 / 0.2) 1px, transparent 1.6px);
  background-size: 22px 22px;
  mask-image: radial-gradient(closest-side, #000 35%, transparent);
}

.hp-eco::after {
  inset: 18%;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgb(98 231 235 / 0.35), transparent);
  filter: blur(20px);
}

.hp-eco-stage {
  position: relative;
  z-index: 1;
  aspect-ratio: 1;
}

.hp-eco-svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
}

.hp-eco-ring {
  stroke: rgb(8 127 131 / 0.16);
  stroke-width: 1;
}

.hp-eco-ring--outer {
  stroke-dasharray: 2 9;
  stroke-linecap: round;
}

.hp-eco-ring--orbit {
  stroke: rgb(8 127 131 / 0.24);
  stroke-width: 1.2;
}

.hp-eco-ring--inner {
  stroke-dasharray: 5 10;
}

.hp-eco-moons--orbit circle { fill: var(--color-teal); }
.hp-eco-moons--inner circle { fill: var(--color-cyan); }

.hp-eco-spokes path {
  stroke: rgb(8 127 131 / 0.25);
  stroke-width: 1.5;
  stroke-dasharray: 2 6;
  stroke-linecap: round;
}

/* Traînée lumineuse d'un document en transit */
/* Tranches à bouts carrés : des bouts ronds se recouvriraient et feraient
   des bandes plus opaques le long du dégradé. */
.hp-eco-trail {
  stroke: var(--color-teal);
  stroke-width: 3;
  stroke-linecap: butt;
}

.hp-eco-trail--glow {
  stroke: var(--color-cyan);
  stroke-width: 11;
  opacity: 0.8;
  filter: url(#hp-eco-blur);
}

.hp-eco-token-glow { fill: url(#hp-eco-glow); }

.hp-eco-token-dot {
  fill: var(--color-white);
  stroke: var(--color-teal);
  stroke-width: 2.5;
}

/* Cœur */
.hp-eco-core {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 27cqw;
  aspect-ratio: 1;
  translate: -50% -50%;
}

.hp-eco-core-card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  border-radius: 32%;
  color: var(--color-white);
  background:
    radial-gradient(90% 70% at 30% 15%, rgb(98 231 235 / 0.28), transparent 60%),
    linear-gradient(160deg, #13605d, var(--color-teal-deep) 55%, #0a3634);
  box-shadow:
    inset 0 1px 0 rgb(255 254 251 / 0.18),
    0 0 0 1px rgb(98 231 235 / 0.25),
    0 24px 60px -18px rgb(8 127 131 / 0.7);
  text-align: center;
}

.hp-eco-logo {
  width: 58%;
  height: auto;
  color: var(--color-white);
}

.hp-eco-core-n {
  margin-top: 1.2cqw;
  color: var(--color-cyan);
  font-family: var(--font-serif);
  font-size: 7.2cqw;
  font-weight: 600;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.hp-eco-core-l {
  margin-top: 0.8cqw;
  color: rgb(255 254 251 / 0.72);
  font-size: max(8px, 1.75cqw);
  font-weight: 600;
}

.hp-eco-halo {
  position: absolute;
  inset: 0;
  border: 1.5px solid rgb(98 231 235 / 0.6);
  border-radius: 34%;
  animation: hp-eco-breathe 3.2s var(--ease-out) infinite;
}

.hp-eco-halo--2 {
  animation-delay: 1.6s;
}

@keyframes hp-eco-breathe {
  from { opacity: 0.7; transform: scale(1); }
  to { opacity: 0; transform: scale(1.45); }
}

/* Satellites */
.hp-eco-sat {
  position: absolute;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 1.5cqw;
  /* Assez large pour le plus long statut au repos (« Avec l'assistant IA
     Leo ») sur une ligne. Les pastilles latérales (centre à 17 %) touchent
     presque le bord de la scène à cette largeur. */
  width: 33cqw;
  border: 1px solid rgb(31 18 14 / 0.07);
  border-radius: 2.8cqw;
  padding: 1.3cqw 1.8cqw 1.3cqw 1.3cqw;
  background-color: var(--color-white);
  box-shadow: var(--shadow-float);
  translate: -50% -50%;
  transition: border-color 0.4s ease, box-shadow 0.4s ease;
  /* Couche GPU dédiée : évite le scintillement pendant les animations GSAP. */
  will-change: transform;
}

/* Cliquable une fois l'intro jouée (initClicks) : rejoue l'étape. */
.hp-eco.is-interactive .hp-eco-sat {
  cursor: pointer;
  user-select: none;
}

.hp-eco.is-interactive .hp-eco-sat:hover {
  border-color: rgb(98 231 235 / 0.7);
}

.hp-eco-sat.is-active {
  border-color: var(--color-cyan);
  box-shadow: 0 0 0 4px rgb(98 231 235 / 0.3), var(--shadow-float);
}

.hp-eco-ico {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: 5.8cqw;
  height: 5.8cqw;
  border-radius: 1.6cqw;
}

.hp-eco-ico svg {
  width: 56%;
  height: 56%;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.hp-eco-ico .hp-leo-glyph {
  width: 56%;
  height: 56%;
}

/* Support de l'animation Lottie de Leo (.hp-leo-lottie, voir base.css) */
.hp-eco-ico--leo {
  position: relative;
}

.hp-eco-ico--teal { color: var(--color-teal); background-color: var(--color-teal-bg); }
.hp-eco-ico--orange { color: var(--color-orange-text); background-color: var(--color-orange-bg); }
.hp-eco-ico--green { color: var(--color-green-text); background-color: var(--color-green-bg); }
.hp-eco-ico--brick { color: var(--color-brick); background-color: #fbe7df; }
.hp-eco-ico--purple { color: var(--color-purple-text); background-color: var(--color-purple-bg); }
.hp-eco-ico--leo { background-color: var(--color-leo-badge); }

.hp-eco-txt {
  display: flex;
  flex-direction: column;
  min-width: 0;
  line-height: 1.3;
}

.hp-eco-txt strong {
  font-size: max(10px, 2.2cqw);
  font-weight: 700;
}

.hp-eco-status {
  overflow: hidden;
  color: var(--color-muted);
  font-size: max(9px, 1.8cqw);
  font-weight: 600;
  white-space: nowrap;
  text-overflow: ellipsis;
  transition: color 0.3s ease;
}

.hp-eco-status.is-done {
  color: var(--color-green-text);
}

/* Petite scène (mobile) : les pastilles gardent icône + verbe. */
@container (max-width: 440px) {
  .hp-eco-sat {
    width: auto;
    gap: 6px;
    border-radius: 12px;
    padding: 5px 9px 5px 5px;
  }

  .hp-eco-ico {
    width: 24px;
    height: 24px;
    border-radius: 7px;
  }

  .hp-eco-txt strong {
    font-size: 11px;
  }

  .hp-eco-status {
    display: none;
  }

  .hp-eco-core-l {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .hp-eco-halo {
    display: none;
  }
}

@media (max-width: 1100px) {
  .hp-hero-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 48px;
  }

  .hp-hero-copy {
    max-width: 720px;
  }

  /* Empilé sous le texte : le player reprend sa taille pleine, dans la
     grille. */
  .hp-hero-visual {
    justify-self: center;
    width: 100%;
    max-width: 880px;
  }
}

@media (max-width: 640px) {
  .hp-hero {
    padding: 48px 20px 72px;
  }

  .is-embedded .hp-hero {
    padding-top: 110px;
  }

  .hp-h1 {
    font-size: 34px;
    letter-spacing: -0.6px;
  }

  .hp-lede {
    font-size: 16px;
  }

  .hp-ctarow .hp-btn {
    flex: 1 1 auto;
  }

  /* Sur mobile, le hero se suffit : canevas des scènes trop réduit pour
     rester lisible, pas de player. */
  .hp-hero-visual {
    display: none;
  }
}