/* app/code/style.css */

/* Vidéo */
/* Ne jamais cacher le widget vidéo */
.video-son {
  width: 100%;
}

/* Elementor gère l’affichage */
.video-son .elementor-wrapper {
  display: none;
}

.video-son .elementor-wrapper.active {
  display: block;
}

/* Masquer les contrôles vidéo */
.video-son video::-webkit-media-controls {
  display: none !important;
}

.video-son video {
  pointer-events: none; /* empêche l’interaction */
}


/* Image */
.image-son.hidden {
  display: none;
}

/* Panneau explicatif */
.panneau-explicatif {
  position: fixed;
  top: 0;
  right: -100%;
  width: 60%;
  max-width: 500px;
  height: 100%;
  background: white;
  padding: 2rem;
  box-shadow: -5px 0 15px rgba(0,0,0,0.3);
  transition: right 0.5s ease;
  z-index: 9999;
  overflow-y: auto;
}

.panneau-explicatif.actif {
  right: 0;
}

.texte-explicatif {
  font-size: 16px;
  line-height: 1.4;
  color: #333;
}

.texte-explicatif img {
  max-width: 100%;
  height: auto;
  margin-top: 1em;
  border-radius: 8px;
}

.hidden {
  display: none !important;
}


/*PANNEAU EXPLICATIF*/
.elementor-element.cont_panneau .panneau-explicatif {
  position: fixed!important;
  top: 0;
  right: -100%;
  width: 60%;
  max-width: 500px;
  height: 100%;
  background: white;
  padding: 2rem;
  box-shadow: -5px 0 15px rgba(0,0,0,0.3);
  transition: right 0.5s ease;
  z-index: 9999;
  overflow-y: auto;
}

@media only screen and (max-device-width : 1024px) {
.elementor-element.cont_panneau .panneau-explicatif {
  width: 90%;
}
}


.elementor-element.cont_panneau .panneau-explicatif.actif {
  right: 0;
}


.texte-explicatif {
  font-size: 16px;
  line-height: 1.4;
  color: var( --e-global-color-accent );
  font-family: "Kalam", Sans-serif;
}

.bouton-son a {
  box-shadow: 0 2px 0 var( --e-global-color-accent );
}
.bouton-son a:active {
  transform: translateY(2px);
  box-shadow: 0 2px 0 var( --e-global-color-accent );
}