#gugg {
  display: flex;
  justify-content: center;
  align-items: center;
  opacity: 0;
  transition: opacity 5s ease;
  margin-top: 50px;

}

#gugg-inner {
 transform: translateY(10px);
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;   /* 🔑 centre image + texte */
  max-width: 550px;      /* même largeur que l’image */
}
#gugg-inner p {
  font-family: "Cutive Mono", monospace;
  color: #000;
  margin-top: 30px;
  margin-bottom: 30px;
  padding-left: 10px;
  text-align: left;     /* centre le texte */
  max-width: 500px;       /* un peu plus étroit pour la lecture */
  line-height: 1.3;
  font-size: 17px;
  border-left: 1px solid rgba(0,0,0,0.25);
}

#gugg.show {
  opacity: 1;
}

#main-video {
  width: 100%;
  height: auto; /* ou hauteur fixe si tu préfères */
  display: block;
  border-radius: 12px;
  object-fit: cover;
  opacity: 0;
  transition: opacity 2.5s ease;
  
  filter: brightness(0.95) contrast(1.05);
}

/* Quand gugg apparaît, la vidéo fade aussi */
#gugg.show #main-video {
  opacity: 1;
}

#gugg a#open-overlay {
  position: absolute;
  bottom: 80%;
  left: 20%;
  width: 50px;
  height: 50px;
  transform: translate(-50%, 50%);
}


/* Les deux images play superposées */
#gugg a#open-overlay img.play {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  cursor: pointer;
  transition: opacity 0.9s ease;
}

/* L'image par défaut visible */
#gugg a#open-overlay img.play-default {
  opacity: 1;
  z-index: 1;
}

/* L'image hover invisible au départ */
#gugg a#open-overlay img.play-hover {
  opacity: 0;
  z-index: 2;
}

/* Au survol, on fait apparaître l'image hover et disparaître la default */
#gugg a#open-overlay:hover img.play-default {
  opacity: 0;
}

#gugg a#open-overlay:hover img.play-hover {
  opacity: 1;
}




/* Style de l'overlay */
/* L’overlay reste centré comme avant */
#overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0,0,0,1);
  display: flex;
  justify-content: center;
  align-items: center;
  opacity: 0;
  visibility: hidden;
  transition: opacity 4s ease;
  z-index: 9999;
}

/* Overlay visible */
#overlay.show {
  opacity: 1;
  visibility: visible;
}
/* Overlay en fermeture (fondu) */
#overlay.hide {
  opacity: 0;
  visibility: visible; /* reste cliquable pendant le fondu */
}

/* Contenu de l’overlay */
#overlay-content {
  position: relative; /* permet aux éléments absolus d’être placés par rapport à ce bloc */
  text-align: center;
}

/* Bouton en bas à droite du main-wrapper */

#close-btn {
  position: absolute;
  top: calc(50% + 250px);
  left: calc(50% + 350px);
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  width: 30px;   /* largeur du bouton */
  height: 30px;  /* hauteur du bouton */
  display: block;
}

/* Superposer les deux images */
#close-btn img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  transition: opacity 0.4s ease;
}

/* image hover invisible par défaut */
#close-btn img.btn-hover {
  opacity: 0;
}

/* au survol, fade in de l'image hover */
#close-btn:hover img.btn-hover {
  opacity: 1;
}

#close-btn:hover img.btn-default {
  opacity: 0;
}
/* =======================
POLICE MOTS
======================= */

@font-face {
  font-family: 'TTWPGOTT';
  src: url('font/TTWPGOTT.ttf') format('truetype');
}


/* =======================

   VIDEOS
======================= */
/* Wrapper principal : vidéos côte à côte et centrées verticalement/horizontalement */
.main-wrapper {
  display: flex;
  justify-content: center; /* centre horizontalement */
  align-items: center;     /* centre verticalement */
  gap: 70px;               /* espace entre les vidéos */
  min-height: 100vh;       /* prend toute la hauteur de la page */
}

/* Cadre vidéo verticale (verticale réelle) */
.video-frame.rotate {
  width: 350px;   /* largeur du cadre vertical */
  height: 500px;  /* hauteur du cadre vertical */
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  background: rgba(255,255,255,0.15);
}

/* Vidéo horizontale + texte */
.video-frame-with-text {
  position: relative;     /* permet au bouton de se positionner par rapport à ce conteneur */
  display: flex;
  flex-direction: column; /* texte sous la vidéo */
  align-items: center;
  transform: translateY(-50px); /* décalage vers le haut */
}
/* Vidéo verticale : prend tout le cadre */
#videoV {
  width: 100%;
  height: 100%;
  object-fit: cover; /* ajuste sans déformer */
  transform: none;   /* plus besoin de rotation */
}

/* Vidéo horizontale */
#videoH {
  width: 500px;
  height: auto;
  background: rgba(255,255,255,0.15);
}

/* TEXTE sous la vidéo horizontale */
#word {
  font-family: 'Cutive Mono', monospace;
  font-size: 18px;
  color: #FFFFFF;
  text-align: center;
  opacity: 0;
  margin-top: 35px;
  transform: translateX(-100px); /* décale vers la gauche */
}