/*
 * Hero de la landing pro.
 *
 * Composant de PREMIER NIVEAU : il déclare ses polices sur son `:host` (§ 5).
 * Valeurs relevées sur la maquette refontehero.html (page « 02 »). Paliers :
 * ordinateur en base, tablette sous 1100px, mobile sous 600px.
 */
:host {
  --lcl-font-display: "Cstm Neighbor", Impact, sans-serif;
  --lcl-font-body: Inter, sans-serif;

  display: block;
}

.BcBTGSyZtndu67ezWnAY {
  --lcl-pro-hero-bg: #2a2240;
  --lcl-pro-hero-ink: #fff;
  --lcl-pro-hero-lead: #e6e1ef;
  --lcl-pro-hero-halo: rgba(76, 63, 110, 0.6);

  /*
   * Thème sombre du site (classe Lumos `.u-theme-dark`), pour ce qu'on dépose
   * dans le slot « Bouton » : un bouton du site lit ses couleurs dans ces
   * variables, et elles l'atteignent par héritage à travers le slot (§ 5). La
   * classe elle-même ne servirait à rien ici : le CSS du site ne vise pas les
   * classes de notre shadow root. Copie de `.u-theme-dark` relevée le
   * 2026-10-22 dans lbylcl.shared.5572a4909.min.css : à reprendre si le thème
   * change. Les swatches sont globales, sur `:root`.
   */
  --_theme---background: var(--_swatch---swatch--brand-eggplant-900);
  --_theme---text-1: var(--_swatch---swatch--brand-text-2);
  --_theme---background-2: var(--_swatch---swatch--brand-eggplant-800);
  --_theme---background-skeleton: color-mix(in lab, currentcolor 10%, transparent);
  --_theme---heading-accent: var(--_swatch---swatch--brand-yellow-400);
  --_theme---border: var(--_swatch---swatch--brand-text-2-o60);
  --_theme---text-link--border: var(--_theme---border);
  --_theme---text-link--text: var(--_theme---text-1);
  --_theme---text-link--text-hover: var(--_theme---text-link--text);
  --_theme---nav--background: var(--_theme---background-2);
  --_theme---text-2: var(--_swatch---swatch--brand-text-2-o60);
  --_theme---text-link--border-hover: var(--swatch--brand-500);
  --_theme---logo--text: var(--_swatch---swatch--brand-eggplant-900);
  --_theme---logo--background: var(--_swatch---swatch--brand-yellow-400);
  --_theme---cards--icon-background: var(--_theme---heading-accent);
  --_theme---cards--icon: var(--_theme---background);
  --_theme---accent: white;
  --_theme---cards--background: var(--_theme---background-2);
  --_theme---selection--background: var(--swatch--brand-300);
  --_theme---selection--text: var(--swatch--brand-text);
  --_theme---button-primary--background: var(--_swatch---swatch--brand-white);
  --_theme---button-primary--border: var(--_theme---button-primary--background);
  --_theme---button-primary--text: var(--_swatch---swatch--brand-text);
  --_theme---button-primary--background-hover: var(--_swatch---swatch--brand-yellow-400);
  --_theme---button-primary--border-hover: var(--_theme---button-primary--background-hover);
  --_theme---button-primary--text-hover: var(--_theme---button-primary--text);
  --_theme---button-primary--lclpro--background: white;
  --_theme---button-secondary--background: var(--swatch--transparent);
  --_theme---button-secondary--border: var(--_swatch---swatch--brand-white);
  --_theme---button-secondary--text: var(--_theme---text-1);
  --_theme---button-secondary--background-hover: var(--_swatch---swatch--brand-yellow-400);
  --_theme---button-secondary--border-hover: var(--_theme---button-secondary--background-hover);
  --_theme---button-secondary--text-hover: var(--_swatch---swatch--brand-text);

  /* Unité de hauteur d'écran : `svh` si le moteur la connaît. Une custom
     property ne se replie pas par double déclaration, d'où le `@supports`. */
  --lcl-pro-hero-vh: 1vh;

  /* La nav est en `position: fixed` et ne prend pas de place (§ 4) : le hero
     réserve sa hauteur, publiée par la nav sur `html`. `head` est le haut du
     contenu, 24px sous la barre. */
  /* Hauteur réservée à la nav. En ordinateur, la valeur mesurée par la nav ;
     sur écran tactile, une constante (paliers plus bas) : la nav se remesure à
     chaque `resize`, et le navigateur mobile en émet un au premier défilement
     quand sa barre se replie. Le hero, la photo et son dégradé bougeaient
     alors d'un coup. */
  --lcl-pro-hero-nav: var(--lcl-nav-bottom, 84px);
  --lcl-pro-hero-head: calc(var(--lcl-pro-hero-nav, 84px) + 24px);

  position: relative;
  isolation: isolate;
  overflow: hidden;
  overflow: clip;
  box-sizing: border-box;
  width: 100%;
  /* Bas : l'écart texte → bento de la maquette (72px, 28px en mobile). La
     section suivante commence donc où commençait le bento. */
  padding: var(--lcl-pro-hero-nav, 84px) max(112px, calc((100% - 1280px) / 2)) 72px;
  background: var(--lcl-pro-hero-bg, #2a2240);
  color: var(--lcl-pro-hero-ink, #fff);
  font-family: var(--lcl-font-body, Inter, sans-serif);
  /* `text-align` est hérité : une section Webflow centrée ne recentre pas le hero. */
  text-align: start;
}

@supports (height: 1svh) {
  .BcBTGSyZtndu67ezWnAY {
    --lcl-pro-hero-vh: 1svh;
  }
}

.BcBTGSyZtndu67ezWnAY *,
.BcBTGSyZtndu67ezWnAY *::before,
.BcBTGSyZtndu67ezWnAY *::after {
  box-sizing: border-box;
}

/* — Fond : halo et photo — */

.WFKblUrKj9jdSjYrqnwg {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 1051px;
  overflow: hidden;
  pointer-events: none;
}

/* Cercle flou de la maquette (r = 276, flou 50) : `blur()` prend un écart type,
   comme le `stdDeviation` du SVG. */
.h7ZSr0pTj44dM3XujvZA {
  position: absolute;
  right: -195px;
  top: -11px;
  width: 552px;
  height: 552px;
  border-radius: 50%;
  background: var(--lcl-pro-hero-halo, rgba(76, 63, 110, 0.6));
  filter: blur(50px);
}

/* Tablette et mobile : la photo ne couvre que le haut, et le halo apparaissait
   sous elle en un pan plus clair, coupé net au bas de la photo. */
@media (max-width: 1100px) {
  .WFKblUrKj9jdSjYrqnwg {
    display: none;
  }
}

/* 789 × s, s = clamp(1, largeur / 1280, 1.3). */
.GPdkHCy8uQF2jc2_uAcy {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: clamp(789px, 61.64vw, 1026px);
  overflow: hidden;
  pointer-events: none;
}

.GPdkHCy8uQF2jc2_uAcy::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    194.08deg,
    rgba(42, 34, 64, 0.1) 14.26%,
    rgba(42, 34, 64, 0.65) 42.59%,
    #2a2240 70.9%
  );
}

/* Fenêtre de la photo : toute la largeur, sauf sur très grand écran. */
.GzD_W_TamRAcEL398VBw {
  position: absolute;
  inset: 0;
  display: block;
}

/* Le CSS du site atteint nos balises (§ 6.6) : la classe fixe la taille. */
.GG_5JaJWU5uQYidhBlbj {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  object-position: var(--lcl-pro-hero-x-desk, 0%) var(--lcl-pro-hero-y-desk, 0%);
}

/*
 * Au-delà de 1664px (1280 × 1,3), l'échelle plafonne à 1,3 comme sur la
 * maquette : fenêtre de 1664 × 1026, placée à 50 % − 862,3px pour garder le
 * sujet à droite du texte, bords fondus sur 160px. Image : 1512 × 803 × 1,3,
 * décalée de −1,77 % en haut. Les réglages « Cadrage ordinateur » ne
 * s'appliquent plus à cette taille.
 */
@media not all and (max-width: 1664px) {
  .GzD_W_TamRAcEL398VBw {
    right: auto;
    left: max(0px, calc(50% - 862.3px));
    width: 1664px;
    height: 1026px;
    overflow: hidden;
    -webkit-mask-image: linear-gradient(90deg, #000 0, #000 calc(100% - 160px), transparent 100%);
    mask-image: linear-gradient(90deg, #000 0, #000 calc(100% - 160px), transparent 100%);
  }

  .GG_5JaJWU5uQYidhBlbj {
    inset: auto;
    left: 0;
    top: -18.2px;
    width: 1965.6px;
    height: 1043.6px;
    object-fit: fill;
  }
}

/* Le bord gauche ne se fond que quand la fenêtre quitte le bord de l'écran. */
@media not all and (max-width: 1726px) {
  .GzD_W_TamRAcEL398VBw {
    -webkit-mask-image: linear-gradient(
      90deg,
      transparent 0,
      #000 160px,
      #000 calc(100% - 160px),
      transparent 100%
    );
    mask-image: linear-gradient(
      90deg,
      transparent 0,
      #000 160px,
      #000 calc(100% - 160px),
      transparent 100%
    );
  }
}

/* — Contenu — */

.QeDqxr1XDaW8o6ZI5xrG {
  position: relative;
  z-index: 2;
  margin-top: 24px;
  display: flex;
  flex-direction: column;
  gap: 72px;
}

/*
 * Ordinateur : le texte descend pour que le haut de la section suivante (le
 * bento) affleure 74px au-dessus du bas de l'écran (bas de `.top` + 72px de
 * padding bas = 100vh − 74px), à condition qu'elle n'ait pas de padding haut.
 * La maquette borne l'espace au-dessus du texte entre 32 et 200px : le
 * plancher est le `padding-top`, le plafond la borne de `min-height` — la
 * hauteur du texte de la maquette (396px) plus 200px.
 */
._r01VnCXatWB1z78EffN {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: flex-start;
  gap: 32px;
  min-height: min(
    calc(100 * var(--lcl-pro-hero-vh, 1vh) - 146px - var(--lcl-pro-hero-head, 108px)),
    596px
  );
  padding-top: 32px;
}

.Uic_CYlkyIisrX9smhpH {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/*
 * Le titre est un `props.RichText` : son contenu arrive SLOTTÉ (§ 6.3). Police,
 * taille, casse et couleur l'atteignent par héritage ; le wrapper slotté devient
 * une grille sans écart, pour qu'un paragraphe fasse une ligne du titre.
 */
.sQmYd8afMFp8OULbRSWm {
  margin: 0;
  font-family: var(--lcl-font-display, "Cstm Neighbor", Impact, sans-serif);
  /* « Cstm Neighbor » n'existe qu'en 400 / 700 / 900. */
  font-weight: 900;
  font-size: 64px;
  line-height: 68px;
  font-feature-settings: "ss04" 1;
  text-transform: uppercase;
  overflow-wrap: break-word;
  color: var(--lcl-pro-hero-ink, #fff);
}

.sQmYd8afMFp8OULbRSWm > slot::slotted(*) {
  display: grid !important;
  row-gap: 0 !important;
  margin: 0 !important;
}

/*
 * Le texte est un `props.RichText` : son contenu arrive SLOTTÉ (§ 6.3).
 * Typographie par héritage seulement — le gras blanc de la maquette est sur
 * un `<b>` du contenu slotté, hors de portée de cette feuille.
 */
.oPCFxPeBVsiifyCaRHMT {
  font-family: var(--lcl-font-body, Inter, sans-serif);
  font-weight: 500;
  font-size: 20px;
  line-height: 26px;
  color: var(--lcl-pro-hero-lead, #e6e1ef);
}

.oPCFxPeBVsiifyCaRHMT > slot::slotted(*) {
  display: grid !important;
  row-gap: 1.3em !important;
  row-gap: 1lh !important;
  margin: 0 !important;
}

/* Le bouton est SLOTTÉ, le hero ne le peint pas (§ 6.12) : il le place. */
.PtueLWxV32Hmijy7dVrF {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 24px;
}

.PtueLWxV32Hmijy7dVrF > slot {
  display: contents;
}

.PtueLWxV32Hmijy7dVrF > slot::slotted(*) {
  display: contents !important;
}

/* — Tablette et mobile — */

@media (max-width: 1100px) {
  .BcBTGSyZtndu67ezWnAY {
    /* Bas de la nav sur tablette et mobile : 12px de retrait + 60px de barre. */
    --lcl-pro-hero-nav: 72px;
    /* Espace au-dessus du texte, et haut du texte qui cale photo et dégradé. */
    --lcl-pro-hero-ht: clamp(200px, calc(30 * var(--lcl-pro-hero-vh, 1vh)), 340px);
    --lcl-pro-hero-text-top: calc(var(--lcl-pro-hero-head, 108px) + var(--lcl-pro-hero-ht, 230px));
    /* Cadrage étroit : largeur minimale de la photo, plafond de son haut. */
    --lcl-pro-hero-img-min: 0px;
    --lcl-pro-hero-in-cap: 0px;

    padding-left: 32px;
    padding-right: 32px;
  }

  ._r01VnCXatWB1z78EffN {
    justify-content: flex-start;
    min-height: 0;
    padding-top: var(--lcl-pro-hero-ht, 230px);
  }

  .sQmYd8afMFp8OULbRSWm {
    font-size: 48px;
    line-height: 52px;
  }

  /* La photo s'arrête 170px sous le haut du texte ; le dégradé s'y cale. */
  .GPdkHCy8uQF2jc2_uAcy {
    height: calc(var(--lcl-pro-hero-text-top, 338px) + 170px);
  }

  .GPdkHCy8uQF2jc2_uAcy::after {
    background: linear-gradient(
      180deg,
      rgba(42, 34, 64, 0.05) 0,
      rgba(42, 34, 64, 0.25) max(0px, calc(var(--lcl-pro-hero-text-top, 338px) - 90px)),
      rgba(42, 34, 64, 0.85) calc(var(--lcl-pro-hero-text-top, 338px) + 40px),
      #2a2240 calc(var(--lcl-pro-hero-text-top, 338px) + 160px)
    );
  }

  /* Repli sans unités de conteneur : recadrage simple. */
  .GG_5JaJWU5uQYidhBlbj {
    object-position: var(--lcl-pro-hero-x-narrow, 65%) var(--lcl-pro-hero-y-narrow, 35%);
  }

  /*
   * Cadrage de la maquette, sans rien mesurer : le sujet (300px de haut sur
   * l'image de 803) occupe l'espace entre la nav et le texte, échelle bornée
   * à 1,2 et à la largeur ; l'image couvre toujours la largeur. Tout est
   * écrit en largeur d'image (1512 × échelle), le rapport 803 / 1512 en tire
   * la hauteur. Le point (fx, fy) de l'image va au centre horizontal et au
   * milieu de l'espace au-dessus du texte.
   */
  @supports (width: 1cqw) {
    .GPdkHCy8uQF2jc2_uAcy {
      container-type: inline-size;
    }

    .GG_5JaJWU5uQYidhBlbj {
      --lcl-pro-hero-band: max(
        120px,
        calc(var(--lcl-pro-hero-text-top, 338px) - 14px - var(--lcl-pro-hero-nav, 84px) - 8px)
      );
      --lcl-pro-hero-img-w: max(
        min(
          max(calc(var(--lcl-pro-hero-band) * 5.04), var(--lcl-pro-hero-img-min, 0px)),
          calc((100cqw - 32px) * 7.2),
          1814.4px
        ),
        118.125cqw
      );

      inset: auto;
      left: clamp(
        calc(100cqw - 0.84656 * var(--lcl-pro-hero-img-w)),
        calc(50cqw - var(--lcl-pro-hero-fx-narrow, 0.65) * var(--lcl-pro-hero-img-w)),
        0px
      );
      top: min(
        calc(var(--lcl-pro-hero-in-cap, 0px) - 0.009236 * var(--lcl-pro-hero-img-w)),
        calc(
          var(--lcl-pro-hero-nav, 84px) + 14px +
            (0.099206 - var(--lcl-pro-hero-fy-narrow, 0.35) * 0.53108) * var(--lcl-pro-hero-img-w)
        )
      );
      width: var(--lcl-pro-hero-img-w);
      height: calc(0.53108 * var(--lcl-pro-hero-img-w));
      object-fit: fill;
    }
  }
}

@media (max-width: 600px) {
  .BcBTGSyZtndu67ezWnAY {
    --lcl-pro-hero-ht: clamp(96px, calc(100 * var(--lcl-pro-hero-vh, 1vh) - 600px), 190px);
    /* Échelle au moins 0,62 (1512 × 0,62) ; la photo peut descendre de 70px. */
    --lcl-pro-hero-img-min: 937.44px;
    --lcl-pro-hero-in-cap: 70px;

    padding-left: 16px;
    padding-right: 16px;
    padding-bottom: 28px;
  }

  .QeDqxr1XDaW8o6ZI5xrG {
    gap: 28px;
  }

  ._r01VnCXatWB1z78EffN {
    gap: 20px;
  }

  .Uic_CYlkyIisrX9smhpH {
    gap: 12px;
  }

  .sQmYd8afMFp8OULbRSWm {
    font-size: 40px;
    line-height: 44px;
  }

  .oPCFxPeBVsiifyCaRHMT {
    font-size: 17px;
    line-height: 24px;
  }

  /* Bouton pleine largeur, en colonne. */
  .PtueLWxV32Hmijy7dVrF {
    align-self: stretch;
    flex-direction: column;
    align-items: stretch;
    gap: 16px;
  }

  /* Le haut de la photo se fond sous la nav. */
  .GG_5JaJWU5uQYidhBlbj {
    -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 90px);
    mask-image: linear-gradient(to bottom, transparent 0, #000 90px);
  }
}