/*
 * Rayflections Masterclass — Wave 8, cadre Logbook transparent unique.
 * DRAFT LOCAL UNIQUEMENT · non charge avant validation et application.
 *
 * Le head pedagogique est retire par le script DOM. Le shell devient l'unique
 * cadre vitre autour des quatre zones utiles. Le layout interne est neutralise.
 */

/* Cadre transparent unique — selecteur attribut + theme pour battre les V2 !important. */
html[data-theme] body.production-v2.masterclass-v2.masterclass-detail-v2.masterclass-relationnel-v2 #livrables-relationnels .relationnel-logbook__shell[data-wave8-logbook-frame="single"],
html body.production-v2.masterclass-v2.masterclass-detail-v2.masterclass-relationnel-v2 #livrables-relationnels .relationnel-logbook__shell[data-wave8-logbook-frame="single"] {
  box-sizing: border-box !important;
  width: 100% !important;
  max-width: 1160px !important;
  margin-inline: auto !important;
  padding: clamp(1.25rem, 2.4vw, 2.15rem) !important;
  border: 1px solid rgba(255, 250, 240, 0.64) !important;
  border-radius: 28px !important;
  background: linear-gradient(135deg, rgba(255, 250, 240, 0.38), rgba(255, 250, 240, 0.16)) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.42), 0 24px 64px rgba(7, 24, 42, 0.1) !important;
  backdrop-filter: blur(12px) saturate(1.05) !important;
  -webkit-backdrop-filter: blur(12px) saturate(1.05) !important;
}

html[data-theme="day"] body.production-v2.masterclass-v2.masterclass-detail-v2.masterclass-relationnel-v2 #livrables-relationnels .relationnel-logbook__shell[data-wave8-logbook-frame="single"],
html body.production-v2.theme-day.masterclass-v2.masterclass-detail-v2.masterclass-relationnel-v2 #livrables-relationnels .relationnel-logbook__shell[data-wave8-logbook-frame="single"] {
  border-color: rgba(255, 250, 240, 0.7) !important;
  background: linear-gradient(135deg, rgba(255, 250, 240, 0.4), rgba(255, 250, 240, 0.18)) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5), 0 24px 64px rgba(7, 24, 42, 0.1) !important;
}

html[data-theme="night"] body.production-v2.masterclass-v2.masterclass-detail-v2.masterclass-relationnel-v2 #livrables-relationnels .relationnel-logbook__shell[data-wave8-logbook-frame="single"],
html body.production-v2.theme-night.masterclass-v2.masterclass-detail-v2.masterclass-relationnel-v2 #livrables-relationnels .relationnel-logbook__shell[data-wave8-logbook-frame="single"] {
  border-color: rgba(240, 212, 138, 0.32) !important;
  background: linear-gradient(135deg, rgba(7, 16, 29, 0.52), rgba(7, 16, 29, 0.32)) !important;
  box-shadow: inset 0 1px 0 rgba(255, 250, 240, 0.07), 0 26px 68px rgba(0, 0, 0, 0.22) !important;
}

/* Aucun second cadre autour du layout. */
html[data-theme] body.production-v2.masterclass-v2.masterclass-detail-v2.masterclass-relationnel-v2 #livrables-relationnels .relationnel-logbook__shell[data-wave8-logbook-frame="single"] > .relationnel-logbook__layout,
html body.production-v2.masterclass-v2.masterclass-detail-v2.masterclass-relationnel-v2 #livrables-relationnels .relationnel-logbook__shell[data-wave8-logbook-frame="single"] > .relationnel-logbook__layout {
  display: grid !important;
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

/* Les quatre zones restent structurelles : aucun verre individuel n'est ajoute. */
html[data-theme] body.production-v2.masterclass-v2.masterclass-detail-v2.masterclass-relationnel-v2 #livrables-relationnels [data-wave8-logbook-zone],
html body.production-v2.masterclass-v2.masterclass-detail-v2.masterclass-relationnel-v2 #livrables-relationnels [data-wave8-logbook-zone] {
  box-sizing: border-box !important;
  min-width: 0 !important;
  margin: 0 !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

html[data-theme] body.production-v2.masterclass-v2.masterclass-detail-v2.masterclass-relationnel-v2 #livrables-relationnels [data-wave8-logbook-zone="intro"],
html body.production-v2.masterclass-v2.masterclass-detail-v2.masterclass-relationnel-v2 #livrables-relationnels [data-wave8-logbook-zone="intro"] {
  grid-area: intro !important;
  width: 100% !important;
  max-width: none !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  text-align: center !important;
}

html[data-theme] body.production-v2.masterclass-v2.masterclass-detail-v2.masterclass-relationnel-v2 #livrables-relationnels [data-wave8-logbook-zone="intro"] .relationnel-logbook__frame-title {
  margin: 0 0 clamp(0.5rem, 0.85vw, 0.72rem) !important;
}

html[data-theme] body.production-v2.masterclass-v2.masterclass-detail-v2.masterclass-relationnel-v2 #livrables-relationnels [data-wave8-logbook-zone="intro"] p {
  max-width: 78ch !important;
  margin: 0 auto !important;
}

/* Contenu : plus compact afin de tenir dans la hauteur commune 450–480 px. */
html[data-theme] body.production-v2.masterclass-v2.masterclass-detail-v2.masterclass-relationnel-v2 #livrables-relationnels [data-wave8-logbook-zone="contents"],
html body.production-v2.masterclass-v2.masterclass-detail-v2.masterclass-relationnel-v2 #livrables-relationnels [data-wave8-logbook-zone="contents"] {
  grid-area: contents !important;
  display: flex !important;
  width: 100% !important;
  max-width: none !important;
  align-self: stretch !important;
  padding: clamp(0.9rem, 1.4vw, 1.15rem) !important;
}

html[data-theme] body.production-v2.masterclass-v2.masterclass-detail-v2.masterclass-relationnel-v2 #livrables-relationnels [data-wave8-logbook-zone="contents"] .relationnel-logbook__contents,
html body.production-v2.masterclass-v2.masterclass-detail-v2.masterclass-relationnel-v2 #livrables-relationnels [data-wave8-logbook-zone="contents"] .relationnel-logbook__contents {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  align-content: stretch !important;
  width: 100% !important;
  max-width: none !important;
  height: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  gap: clamp(0.48rem, 0.72vw, 0.6rem) !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

html[data-theme] body.production-v2.masterclass-v2.masterclass-detail-v2.masterclass-relationnel-v2 #livrables-relationnels [data-wave8-logbook-zone="contents"] .relationnel-logbook__contents > :is(strong, span, small) {
  box-sizing: border-box !important;
  padding: clamp(0.62rem, 0.8vw, 0.76rem) !important;
  font-size: clamp(0.78rem, 0.18vw + 0.75rem, 0.88rem) !important;
  font-weight: 500 !important;
  line-height: 1.34 !important;
}

html[data-theme] body.production-v2.masterclass-v2.masterclass-detail-v2.masterclass-relationnel-v2 #livrables-relationnels [data-wave8-logbook-zone="contents"] .relationnel-logbook__contents > strong {
  grid-column: 1 / -1 !important;
  font-family: var(--font-head, "Cormorant Garamond", serif) !important;
  font-size: clamp(1.05rem, 0.42vw + 0.98rem, 1.28rem) !important;
  font-weight: 600 !important;
}

/* Video quasi carree/haute et strictement alignee avec la zone contenu. */
html[data-theme] body.production-v2.masterclass-v2.masterclass-detail-v2.masterclass-relationnel-v2:is(.masterclass-personnel-gold-metal-v2, .masterclass-professionnel-silver-metal-v2) #livrables-relationnels [data-wave8-logbook-zone="video"],
html[data-theme] body.production-v2.masterclass-v2.masterclass-detail-v2.masterclass-relationnel-v2:not(.masterclass-personnel-gold-metal-v2):not(.masterclass-professionnel-silver-metal-v2) #livrables-relationnels [data-wave8-logbook-zone="video"],
html body.production-v2.masterclass-v2.masterclass-detail-v2.masterclass-relationnel-v2 #livrables-relationnels [data-wave8-logbook-zone="video"] {
  grid-area: video !important;
  display: flex !important;
  width: 100% !important;
  max-width: none !important;
  align-self: stretch !important;
  padding: clamp(0.9rem, 1.4vw, 1.15rem) !important;
}

html[data-theme] body.production-v2.masterclass-v2.masterclass-detail-v2.masterclass-relationnel-v2 #livrables-relationnels [data-wave8-logbook-zone="video"] .relationnel-logbook__video,
html body.production-v2.masterclass-v2.masterclass-detail-v2.masterclass-relationnel-v2 #livrables-relationnels [data-wave8-logbook-zone="video"] .relationnel-logbook__video {
  display: flex !important;
  flex-direction: column !important;
  width: 100% !important;
  height: 100% !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  gap: 0 !important;
  border-radius: 16px !important;
  overflow: hidden !important;
  aspect-ratio: auto !important;
}

html[data-theme] body.production-v2.masterclass-v2.masterclass-detail-v2.masterclass-relationnel-v2 #livrables-relationnels [data-wave8-logbook-zone="video"] video.relationnel-logbook__media,
html body.production-v2.masterclass-v2.masterclass-detail-v2.masterclass-relationnel-v2 #livrables-relationnels [data-wave8-logbook-zone="video"] video.relationnel-logbook__media {
  display: block !important;
  flex: 1 1 auto !important;
  width: 100% !important;
  height: 100% !important;
  min-height: 0 !important;
  aspect-ratio: auto !important;
  object-fit: cover !important;
  border-radius: 15px 15px 0 0 !important;
}

html[data-theme] body.production-v2.masterclass-v2.masterclass-detail-v2.masterclass-relationnel-v2 #livrables-relationnels [data-wave8-logbook-zone="video"] figcaption {
  position: static !important;
  flex: 0 0 auto !important;
  margin: 0 !important;
  padding: clamp(0.58rem, 0.82vw, 0.72rem) clamp(0.72rem, 1vw, 0.92rem) !important;
  border-radius: 0 0 15px 15px !important;
  font-size: clamp(0.78rem, 0.18vw + 0.75rem, 0.88rem) !important;
  font-weight: 500 !important;
  line-height: 1.34 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
}

/* Prix + CTA reunis, sans creer un cinquieme vitrage. */
html[data-theme] body.production-v2.masterclass-v2.masterclass-detail-v2.masterclass-relationnel-v2 #livrables-relationnels [data-wave8-logbook-zone="action"],
html body.production-v2.masterclass-v2.masterclass-detail-v2.masterclass-relationnel-v2 #livrables-relationnels [data-wave8-logbook-zone="action"] {
  grid-area: action !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-self: center !important;
  width: min(100%, 920px) !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  gap: clamp(0.75rem, 1.1vw, 0.95rem) !important;
  text-align: center !important;
}

html[data-theme] body.production-v2.masterclass-v2.masterclass-detail-v2.masterclass-relationnel-v2 #livrables-relationnels [data-wave8-logbook-zone="action"] .relationnel-logbook__offer {
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
}

html[data-theme] body.production-v2.masterclass-v2.masterclass-detail-v2.masterclass-relationnel-v2 #livrables-relationnels [data-wave8-logbook-zone="action"] .relationnel-logbook__video-cta {
  width: min(100%, 320px) !important;
  margin: 0 !important;
  transform: none !important;
}

@media (min-width: 981px) {
  html[data-theme] body.production-v2.masterclass-v2.masterclass-detail-v2.masterclass-relationnel-v2 #livrables-relationnels .relationnel-logbook__shell[data-wave8-logbook-frame="single"] > .relationnel-logbook__layout {
    grid-template-columns: minmax(0, 1.08fr) minmax(390px, 0.92fr) !important;
    grid-template-areas:
      "intro intro"
      "contents video"
      "action action" !important;
    align-items: stretch !important;
    gap: clamp(1rem, 1.8vw, 1.45rem) !important;
  }

  html[data-theme] body.production-v2.masterclass-v2.masterclass-detail-v2.masterclass-relationnel-v2 #livrables-relationnels :is([data-wave8-logbook-zone="contents"], [data-wave8-logbook-zone="video"]) {
    height: clamp(450px, 37vw, 480px) !important;
    min-height: 450px !important;
    max-height: 480px !important;
  }

  /* Les anciennes variantes Personnel/Relationnel/Professionnel imposent
     encore width, align-self, display et 16:9 avec !important. La chaîne
     complète Wave 8 reprend la main pour que la vidéo remplisse réellement
     la hauteur commune, et pas seulement son conteneur invisible. */
  html[data-theme] body.production-v2.masterclass-v2.masterclass-detail-v2.masterclass-relationnel-v2 #livrables-relationnels .relationnel-logbook__shell[data-wave8-logbook-frame="single"] > .relationnel-logbook__layout > .relationnel-logbook__video-stack[data-wave8-logbook-zone="video"] {
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    max-width: none !important;
    padding: 0 !important;
    align-self: stretch !important;
    justify-self: stretch !important;
  }

  html[data-theme] body.production-v2.masterclass-v2.masterclass-detail-v2.masterclass-relationnel-v2 #livrables-relationnels .relationnel-logbook__shell[data-wave8-logbook-frame="single"] > .relationnel-logbook__layout > .relationnel-logbook__video-stack[data-wave8-logbook-zone="video"] > figure.relationnel-logbook__video {
    display: flex !important;
    flex-direction: column !important;
    flex: 1 1 auto !important;
    width: 100% !important;
    max-width: none !important;
    height: 100% !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    align-self: stretch !important;
    justify-self: stretch !important;
    aspect-ratio: auto !important;
  }

  html[data-theme] body.production-v2.masterclass-v2.masterclass-detail-v2.masterclass-relationnel-v2 #livrables-relationnels .relationnel-logbook__shell[data-wave8-logbook-frame="single"] > .relationnel-logbook__layout > .relationnel-logbook__video-stack[data-wave8-logbook-zone="video"] > figure.relationnel-logbook__video > video.relationnel-logbook__media {
    display: block !important;
    flex: 1 1 auto !important;
    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
    aspect-ratio: auto !important;
    object-fit: cover !important;
  }
}

@media (max-width: 980px) {
  html[data-theme] body.production-v2.masterclass-v2.masterclass-detail-v2.masterclass-relationnel-v2 #livrables-relationnels .relationnel-logbook__shell[data-wave8-logbook-frame="single"] {
    max-width: 100% !important;
    padding: clamp(1rem, 4vw, 1.35rem) !important;
    border-radius: 22px !important;
  }

  html[data-theme] body.production-v2.masterclass-v2.masterclass-detail-v2.masterclass-relationnel-v2 #livrables-relationnels .relationnel-logbook__shell[data-wave8-logbook-frame="single"] > .relationnel-logbook__layout {
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-areas:
      "intro"
      "video"
      "contents"
      "action" !important;
    gap: clamp(0.9rem, 3vw, 1.15rem) !important;
  }

  html[data-theme] body.production-v2.masterclass-v2.masterclass-detail-v2.masterclass-relationnel-v2 #livrables-relationnels :is([data-wave8-logbook-zone="contents"], [data-wave8-logbook-zone="video"]) {
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
  }

  html[data-theme] body.production-v2.masterclass-v2.masterclass-detail-v2.masterclass-relationnel-v2 #livrables-relationnels [data-wave8-logbook-zone="video"] {
    width: min(100%, 460px) !important;
    justify-self: center !important;
  }

  html[data-theme] body.production-v2.masterclass-v2.masterclass-detail-v2.masterclass-relationnel-v2 #livrables-relationnels [data-wave8-logbook-zone="video"] .relationnel-logbook__video {
    height: auto !important;
    min-height: clamp(330px, 92vw, 440px) !important;
    aspect-ratio: 4 / 4.2 !important;
  }

  html[data-theme] body.production-v2.masterclass-v2.masterclass-detail-v2.masterclass-relationnel-v2 #livrables-relationnels .relationnel-logbook__shell[data-wave8-logbook-frame="single"] > .relationnel-logbook__layout > .relationnel-logbook__video-stack[data-wave8-logbook-zone="video"] {
    width: min(100%, 460px) !important;
    max-width: 460px !important;
    padding: 0 !important;
    justify-self: center !important;
  }

  html[data-theme] body.production-v2.masterclass-v2.masterclass-detail-v2.masterclass-relationnel-v2 #livrables-relationnels .relationnel-logbook__shell[data-wave8-logbook-frame="single"] > .relationnel-logbook__layout > .relationnel-logbook__video-stack[data-wave8-logbook-zone="video"] > figure.relationnel-logbook__video {
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    height: auto !important;
    min-height: clamp(330px, 92vw, 440px) !important;
    margin: 0 !important;
    aspect-ratio: 4 / 4.2 !important;
  }

  html[data-theme] body.production-v2.masterclass-v2.masterclass-detail-v2.masterclass-relationnel-v2 #livrables-relationnels .relationnel-logbook__shell[data-wave8-logbook-frame="single"] > .relationnel-logbook__layout > .relationnel-logbook__video-stack[data-wave8-logbook-zone="video"] > figure.relationnel-logbook__video > video.relationnel-logbook__media {
    flex: 1 1 auto !important;
    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
    aspect-ratio: auto !important;
  }
}

@media (max-width: 620px) {
  html[data-theme] body.production-v2.masterclass-v2.masterclass-detail-v2.masterclass-relationnel-v2 #livrables-relationnels [data-wave8-logbook-zone="contents"] .relationnel-logbook__contents {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  html[data-theme] body.production-v2.masterclass-v2.masterclass-detail-v2.masterclass-relationnel-v2 #livrables-relationnels [data-wave8-logbook-zone="contents"] .relationnel-logbook__contents > strong {
    grid-column: auto !important;
  }
}