/** Shopify CDN: Minification failed

Line 192:33 Expected ":"

**/
/* LAVAFIELD HERO BANNER COMPONENT */

/* --- HERO BANNER --- */
.rb-hero {
    position: relative;
    width: 100%;
    min-height: var(--rb-height); /* Hauteur confortable sur Desktop */
    display: flex;
    overflow: hidden;
  }

  /* --- IMAGE (DROITE) --- */
  .rb-hero__image-container {
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    width: 65%; /* L'image dépasse sous la courbe */
    z-index: 1;
  }

  .rb-hero__image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
  }

  /* --- VIDÉO HERO --- */
.rb-hero__video,
.rb-hero__iframe-wrapper {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

/* Style pour la balise video native (MP4) */
.rb-hero__video {
  object-fit: cover; /* Remplit la zone sans déformation */
  object-position: center;
  z-index: 1;
}

/* Style pour les iframes (YouTube/Vimeo) */
.rb-hero__iframe {
  width: 100%;
  height: 100%;
  /* Astuce pour zoomer un peu dans l'iframe et éviter les bandes noires potentielles */
  transform: scale(1.3); 
  pointer-events: none; /* Empêche de cliquer sur la vidéo (pause/play) */
}

.rb-hero__iframe-wrapper {
  overflow: hidden; /* Coupe ce qui dépasse à cause du scale */
  z-index: 1;
}

/* Le conteneur qui délimite la zone visible */
.video-cover-wrapper {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden; /* Coupe tout ce qui dépasse */
}

/* L'iframe qui va grandir pour couvrir toute la surface */
.video-cover-wrapper iframe {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100vw; /* Largeur de l'écran pour assurer la couverture */
  height: 56.25vw; /* Ratio 16:9 calculé sur la largeur (9/16 = 0.5625) */
  min-height: 100%; 
  min-width: 120vh; /* Ratio 16:9 calculé sur la hauteur (16/9 = 1.777) */
  transform: translate(-50%, -50%); /* Centre parfaitement la vidéo */
  pointer-events: none; /* Empêche de cliquer sur la vidéo (optionnel) */
}


  /* --- CONTENU (GAUCHE - PARTIE BEIGE) --- */
  .rb-hero__content {
    position: relative;
    z-index: 2;
    width: 35%; /* Largeur du bloc beige */
    background-color: var(--rb-bg);
    /*border-bottom-right-radius: 120px;*/ /* La courbe */

    display: flex;
    align-items: center; /* Centré verticalement */
    justify-content: flex-start; /* Aligné à gauche horizontalement */
    padding-left: max(2rem, calc((100vw - 1920px) / 2));
  }

  @media only screen and (min-width: 2080px) {
    .rb-hero__content {
      width: 40%; /* Largeur du bloc beige */
    }
  }

  .rb-hero__text-wrapper {
    padding-top: 2rem;
    padding-bottom: 2rem;
    padding-right: 2rem; /* Espace pour ne pas coller à la courbe */
    max-width: 650px;
    color: var(--rb-text);
  }

  .rb-hero__text-wrapper .btn{
    background-color:var(--rb-accent);
    color:var(--rb-bg);
    margin-top: .5rem;
  }

  .rb-hero__text-wrapper .btn--secondary{
    background-color: transparent;
    color: unset;
    border-color: unset;
  }

  /* --- TYPOGRAPHIE --- */
  .rb-hero__subtitle {
    display: block;
    /*font-size: 0.9rem;*/
    text-transform: uppercase;
    letter-spacing: 2px;
    margin-bottom: .5rem;
    /*font-weight: 500;*/
  }

  .rb-hero__title {
    /*font-size: 3.5rem; /* Grande taille pour impact */
    line-height: 1.1;
    /*font-weight: 400;
    font-family: var(--typeHeaderPrimary);*/
    margin-bottom: 1rem;
  }

  .rb-hero__text-wrapper .btn{
    margin-top: 1.5rem;
  }

  .rb-hero__title em {
    color: var(--rb-accent);
    font-style: normal;
  }

  /* --- RESPONSIVE --- */

  /* Étape 1 : Écrans plus petits que le site (Laptop standard) */
  @media only screen and (max-width: 2020px) {
    .rb-hero__content {
      /* On fixe la marge gauche standard car on ne peut plus centrer par rapport à 1680px */
      padding-left: 40px;
    }
  }

  /* Étape 2 : Tablettes / Petits Laptops */
  @media only screen and (max-width: 992px) {
    .rb-hero__content {
      width: 60%;
      padding-left: 40px;
    }
    .rb-hero__title {
      /*font-size: 2.8rem;*/
    }
  }

  /* Étape 3 : Mobiles */
  @media only screen and (max-width: 768px) {
    .rb-hero {
      flex-direction: column; /* Image au-dessus, texte en-dessous ? Ou l'inverse. Ici : Texte en bas. */
      height: auto;
      min-height: auto;
    }

    .rb-hero__image-container {
      position: relative;
      width: 100%;
      height: 300px;
    }

    .rb-hero__content {
      width: 100%;
      border-bottom-right-radius: 0; /* Plus de courbe sur mobile */
      /*justify-content:*/ center; /* On recentre tout */
      padding: 0rem 20px;
    }

    .rb-hero__text-wrapper {
      padding-right: 0;
    }

    .rb-hero__title {
      /*font-size: 2.2rem;*/
    }

    .rb-hero__subtitle{
      font-size: 12px;
      margin-bottom: 0.5rem;
    }
  }

  /* FIN LAVAFIELD HERO BANNER COMPONENT */