/* =====================================================================
   ÉVÉNEMENT CLEF — « Comment se déroule une partie » / Distribution des rôles
   Fichier CSS à héberger sur le serveur (FileZilla).
   Tout est préfixé « lgd- » et isolé sous « .lgd » pour ne pas
   entrer en conflit avec le thème / Elementor.

   POLICES : aucune police n'est chargée ici. Les titres et textes
   utilisent « font-family: inherit » = les polices NATIVES de votre site.
   ===================================================================== */

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

.lgd {
  /* ---- Réglages ---- */
  --lgd-maxw: 1400px;                 /* largeur de référence de vos autres sections */
  --lgd-textw: 480px;                 /* largeur de la colonne de texte */
  --lgd-gap: clamp(28px, 4vw, 72px);  /* espace texte <-> vidéo */
  --lgd-shift: clamp(60px, 22vw, 340px); /* distance d'arrivée de la vidéo */
  --lgd-ease: cubic-bezier(.22, 1, .36, 1);
  --lgd-p: 0;                         /* progression du scroll (0 -> 1), pilotée par le JS */

  /* Pleine largeur de la fenêtre, même dans un conteneur Elementor "boxed".
     Permet à la vidéo d'aller jusqu'au bord droit de l'écran. */
  position: relative;
  width: 100vw;
  max-width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  margin-block: 0;             /* sections collées les unes aux autres */
  overflow: hidden;            /* masque la vidéo quand elle est décalée (droite OU gauche) */
  /* AUCUNE couleur de fond : la section reste transparente. */
  background: transparent;
}

.lgd__inner {
  display: flex;
  align-items: center;
  gap: var(--lgd-gap);
  /* Le texte démarre sur le MÊME bord gauche que vos sections en 1400px.
     À droite : aucun espace, la vidéo file jusqu'au bord de l'écran. */
  padding-left: max(20px, calc((100vw - var(--lgd-maxw)) / 2));
  padding-right: 0;
}

/* ---------- Colonne de texte (gauche) ---------- */
.lgd__text {
  flex: 0 1 var(--lgd-textw);
  max-width: var(--lgd-textw);
  min-width: 0;
}

.lgd__title {
  margin: 0 0 clamp(14px, 1.4vw, 20px);
  font-family: inherit;        /* police NATIVE du site */
  font-weight: 700;
  line-height: 1.15;
  font-size: clamp(22px, 2.1vw, 30px);
  color: #fff;
}

.lgd__desc {
  margin: 0;
  font-family: inherit;        /* police NATIVE du site */
  font-weight: 400;
  font-size: clamp(15px, 1.15vw, 17px);
  line-height: 1.7;
  color: rgba(255, 255, 255, .82);
}

/* ---------- Colonne vidéo (droite) ---------- */
.lgd__media {
  flex: 1 1 auto;
  min-width: 0;
  /* Décalage + apparition pilotés par le scroll (variable --lgd-p) */
  transform: translateX(calc((1 - var(--lgd-p)) * var(--lgd-shift)));
  opacity: clamp(0, calc(var(--lgd-p) * 1.4), 1);
  will-change: transform, opacity;
  /* Le bord gauche de la vidéo se fond dans le fond sombre de la page. */
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 13%, #000 100%);
          mask-image: linear-gradient(to right, transparent 0, #000 13%, #000 100%);
}

.lgd__video {
  display: block;
  width: 100%;
  height: auto;                /* conserve le ratio natif 960 x 494 */
  object-fit: contain;
}

/* Léger adoucissement quand le scroll est instantané (clic ancre, etc.) */
.lgd.is-ready .lgd__media {
  transition: transform .12s linear, opacity .12s linear;
}

/* ---------- Variante INVERSÉE : vidéo à GAUCHE, texte à DROITE ---------- */
.lgd--flip .lgd__inner {
  flex-direction: row-reverse;         /* vidéo à gauche, texte à droite */
  padding-left: 0;                     /* la vidéo file jusqu'au bord gauche */
  padding-right: max(20px, calc((100vw - var(--lgd-maxw)) / 2));
}
.lgd--flip .lgd__media {
  /* la vidéo arrive depuis la gauche */
  transform: translateX(calc((1 - var(--lgd-p)) * (-1 * var(--lgd-shift))));
  /* le bord DROIT se fond dans le fond sombre (là où il rejoint le texte) */
  -webkit-mask-image: linear-gradient(to left, transparent 0, #000 13%, #000 100%);
          mask-image: linear-gradient(to left, transparent 0, #000 13%, #000 100%);
}

/* ---------- Accessibilité : mouvement réduit ---------- */
@media (prefers-reduced-motion: reduce) {
  .lgd { --lgd-p: 1 !important; }
  .lgd__media { transform: none !important; opacity: 1 !important; transition: none !important; }
}

/* ---------- Responsive : on empile sur tablette / mobile ---------- */
/* Les sélecteurs incluent la variante .lgd--flip pour l'emporter sur ses règles. */
@media (max-width: 980px) {
  .lgd__inner,
  .lgd--flip .lgd__inner {
    flex-direction: column;              /* toujours : texte au-dessus, vidéo en dessous */
    align-items: stretch;
    gap: clamp(20px, 5vw, 34px);
    padding-left: max(20px, calc((100vw - var(--lgd-maxw)) / 2));
    padding-right: max(20px, calc((100vw - var(--lgd-maxw)) / 2));
  }
  .lgd__text { flex: none; max-width: 100%; }
  .lgd__media,
  .lgd--flip .lgd__media {
    /* En colonne, pas de glissement latéral : simple fondu vertical. */
    transform: translateY(calc((1 - var(--lgd-p)) * 40px));
    opacity: clamp(0, calc(var(--lgd-p) * 1.4), 1);
    -webkit-mask-image: none;
            mask-image: none;
    border-radius: 12px;
    overflow: hidden;
  }
}