/* ========================================================= */
/* THEME GLOBAL — STRUCTURE PROPRE (IDENTIQUE, RE-ORDONNÉ)   */
/* ========================================================= */



/* ========================================================= */
/* 1) TABBED / ITEMS                                          */
/* ========================================================= */

.item::before {
  cursor: url('../assets/CURSOR_link.webp') 8 8, auto !important;
  font-weight: bold;
  padding: 0.5em;
  display: block;
  text-align: center;
}



/* ========================================================= */
/* 2) LINKS / UI LINKS                                         */
/* ========================================================= */

.fake-link {
  cursor: url('../assets/CURSOR_link.webp') 8 8, auto !important;
  text-decoration: none;
  font-weight: 400;
  text-align: center;
  display: block;
  padding: 0.5em 1em;
  color: #90771B;
  letter-spacing: 2.6px;
  transition: all 0.3s ease;
  display: inline;
  white-space: nowrap; /* pour éviter les retours à la ligne automatiques */
}

/* Liens “divider” (désactivé) */
a.divider {
  font-size: 110%;
  pointer-events: none;
  cursor: default;
}

/* Désactivation de liens (classe) */
.disable-link {
  pointer-events: none; /* Désactive les clics */
  cursor: not-allowed; /* Change le curseur pour indiquer que le lien est désactivé */
}



/* ========================================================= */
/* 3) OVERLAY TEXT (LOGO / HEADER)                             */
/* ========================================================= */

.overlay-text,
.overlay-text:hover,
.overlay-text:active,
.overlay-text:visited,
.overlay-text a,
.overlay-text a:hover,
.overlay-text a:active,
.overlay-text a:link,
.overlay-text a:visited {
  position: absolute;
  top: 50%; /* Center vertically */
  left: 50%; /* Center horizontally */
  transform: translate(-50%, -50%); /* Adjust for centering */

  background-color: rgba(0, 0, 0, 0.0); /* Semi-transparent background */
  padding: 0px;
  text-align: center;
  border-radius: 0px;
  margin-top: 0.5%;
  color: rgba(0, 0, 0, 0.0);
  font-weight: 800;
  text-decoration: none;
  text-decoration-color: rgba(0, 0, 0, 0.0);
  text-shadow: 0px 0px 0px rgba(0, 0, 0, 0.0);
  letter-spacing: 100px;
  cursor: url('../assets/CURSOR_link.webp') 8 8, auto !important;
}



/* ========================================================= */
/* 4) SERIE / SLIDESHOW / VIDEO                                */
/* ========================================================= */

.serie-slideshow {
  width: min(600px, 40vw); /* ← s’adapte à la taille de l’écran */
  aspect-ratio: 1 / 1;     /* ← conserve le carré, plus fiable que height fixe */
  overflow: hidden;
  position: relative;
  border-radius: 8px;
  cursor: pointer;
  flex-shrink: 0;
}

.serie-slideshow img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transform: scale(1);
  transition: opacity 1.5s ease-in-out, transform 6s ease-out;
  z-index: 0;
  pointer-events: none; /* ← empêche l’image de bloquer les clics */
}

.serie-video {
  aspect-ratio: 1 / 1;
  overflow: hidden;
  position: relative;
  border-radius: 8px;
  cursor: pointer;
  flex-shrink: 0;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.serie-video canvas,
.serie-video .xyz-controls {
  cursor: url('../assets/CURSOR_link.webp'), default;
}

.serie-description a {
  display: inline-block;
  margin-top: 12px;
  font-weight: bold;
  text-decoration: underline;
  cursor: pointer;
}



/* ========================================================= */
/* 5) DATA-XYZ / XYZ UI                                        */
/* ========================================================= */

.data-xyz {
  aspect-ratio: 1 / 1;
  overflow: hidden;
  border-radius: 8px;
  position: relative;
  cursor: pointer; /* main sur toute la zone */
  position: relative;
  display: inline-block;
  width: fit-content;
}

.data-xyz video {
  max-width: 100%;
  max-height: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  display: block;
  border-radius: 8px;
  pointer-events: none;
}

.xyz-title {
  margin-top: 16px;
  font-size: 1.3em;
  font-weight: 600;
  letter-spacing: 0.5px;
}

.xyz-desc {
  margin-top: 6px;
  font-size: 1em;
  font-style: italic;
  color: #777;
}

.xyz-controls {
  position: absolute;
  bottom: 8px;
  left: 8px;
  z-index: 10;
  font-size: 18px;
  color: #90771B;
  padding: 4px 8px;
  border-radius: 5px;
  pointer-events: none;
  user-select: none;
}

.xyz-toggle {
  border: none;
  color: #90771B;
  font-size: 14px;
  padding: 2px 6px;
  cursor: pointer;
  font-family: Arial, sans-serif;
}

.xyz-fullscreen {
  background: none;
  border: none;
  color: #90771B;
  font-size: 18px;
  cursor: pointer;
  margin-left: 10px;
  padding: 2px 4px;
  font-family: Arial, sans-serif;
}



/* ========================================================= */
/* 6) CANVAS / WRAPPERS                                        */
/* ========================================================= */

.canvas {
  aspect-ratio: 1 / 1;
  width: 100%;
  display: block;
  margin: 0 auto;
  height: auto;
  pointer-events: auto;
  background: #000;
  border-radius: 8px; /* ✅ arrondi par défaut */
}

.canvas.sharp {
  border-radius: 0 !important;
}

/* Le canvas suit le wrapper */
.canvas-wrapper canvas {
  width: 100%;
  height: 100%;
  display: block;
  border-radius: 8px;
}

/* Et le bouton reste dans le coin bas-droit du wrapper */
.canvas-wrapper .xyz-controls {
  position: absolute;
  bottom: 10px;
  left: 10px; /* ✅ au lieu de right: 10px */
  z-index: 10;
  font-size: 18px;
  color: #90771B;
  padding: 4px 8px;
  border-radius: 0 !important;
  pointer-events: none;
  user-select: none;
  text-align: left; /* ✅ pour éviter un centrage du texte */
}

/* Le canvas suit le wrapper */
.canvas-wrapper-sharp canvas {
  width: 100%;
  height: 100%;
  display: block;
  border-radius: 0 !important;
}

/* Et le bouton reste dans le coin bas-droit du wrapper */
.canvas-wrapper-sharp .xyz-controls {
  position: absolute;
  bottom: 10px;
  left: 10px; /* ✅ au lieu de right: 10px */
  z-index: 10;
  font-size: 18px;
  color: #90771B;
  padding: 4px 8px;
  border-radius: 0 !important;
  pointer-events: none;
  user-select: none;
  text-align: left; /* ✅ pour éviter un centrage du texte */
}

/* Empêche les wrappers d’imposer leurs propres arrondis */
.canvas-wrapper,
.canvas-wrapper-sharp,
.data-xyz,
.dataX-xyz,
.bio-video {
  border-radius: 0 !important;
}

/* Canvas interactions */
.square-canva-classic,
.square-canva-classic * {
  pointer-events: none;
  cursor: url('../assets/CURSOR_default.webp'), default !important;
}

.square-canva-link,
.square-canva-link * {
  cursor: url('../assets/CURSOR_link.webp'), default;
}

canvas.redirect {
  cursor: url('../assets/CURSOR_link.webp'), default !important;
}



/* ========================================================= */
/* 7) CAROUSEL                                                 */
/* ========================================================= */

.carousel {
  position: relative; /* ✅ Important : pour que les flèches puissent être absolues par rapport à lui */
  width: auto;
  max-width: 100%;
  margin: 40px auto;
  overflow: hidden;
  border-radius: 10px;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column; /* ✅ Le track + les flèches en colonne */
  padding-bottom: 60px; /* ✅ AJOUTE UN ESPACE EN BAS pour voir les flèches */
}

.carousel-image {
  flex: 0 0 100%;
  width: 100%;
  height: auto;
  object-fit: contain;
  user-select: none;
  cursor: url('../assets/CURSOR_link.webp') 8 8, auto !important;
}

.carousel-btn {
  background-color: rgba(0,0,0,0.5);
  color: #90771b; /* ✅ flèches couleur or */
  border: none;
  padding: 10px 15px;
  font-size: 24px;
  border-radius: 50%;
  cursor: url('../assets/CURSOR_link.webp') 8 8, auto !important;
  transition: background-color 0.3s ease;
  pointer-events: auto; /* ✅ réactive les clics sur les boutons */
}

.carousel-btn:hover {
  color: #ecdcb7; /* ✅ flèches couleur or */
}

/* Plein écran */
.carousel-fullscreen {
  display: none;
  position: fixed;
  top: 0; left: 0;
  width: 100vw;
  height: 100vh;
  background: rgba(0, 0, 0, 0.9);
  justify-content: center;
  align-items: center;
  cursor: url('../assets/CURSOR_default.webp') 8 8, auto;
  z-index: 9999;
}

#carousel-fullscreen-img {
  max-width: 90%;
  max-height: 90%;
  cursor: url('../assets/CURSOR_default.webp') 8 8, auto;
}

#carousel-close-fullscreen {
  position: absolute;
  top: 30px;
  right: 40px;
  font-size: 40px;
  color: #ecdcb7; /* ✅ flèches couleur or */
  cursor: url('../assets/CURSOR_link.webp') 8 8, auto !important;
}

#carousel-close-fullscreen:hover {
  position: absolute;
  top: 30px;
  right: 40px;
  font-size: 40px;
  color: #90771b; /* ✅ flèches couleur or */
  cursor: url('../assets/CURSOR_link.webp') 8 8, auto !important;
}

.carousel-fullscreen-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  color: #90771b; /* ✅ flèches couleur or */
  border: none;
  font-size: 60px;
  padding: 10px;
  cursor: url('../assets/CURSOR_link.webp') 8 8, auto !important;
  z-index: 10001;
}

.carousel-fullscreen-btn:hover {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  color: #ecdcb7; /* ✅ flèches couleur or */
  border: none;
  font-size: 60px;
  padding: 10px;
  cursor: url('../assets/CURSOR_link.webp') 8 8, auto !important;
  z-index: 10001;
}



/* ========================================================= */
/* 8) LEGAL WARNING                                            */
/* ========================================================= */

#legal-warning {
  font-size: 12px;
  padding: 8px 10px;
  border-bottom: 1px solid #ddd;
}

#legal-warning a {
  color: inherit;
  text-decoration: underline dotted;
}



/* ========================================================= */
/* 9) FORM WARNINGS                                            */
/* ========================================================= */

/* Info-bulle personnalisée pour le formulaire */
#form-warning {
  display: none;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  padding: 12px 24px;
  font-size: 14px;
  font-weight: 400;
  border-radius: 8px;
  z-index: 9999;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.3s ease;
}

/* Info-bulle personnalisée pour le formulaire */
#write-us-form-warning {
  display: none;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  padding: 12px 24px;
  font-size: 14px;
  font-weight: 400;
  border-radius: 8px;
  z-index: 9999;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.3s ease;
}



/* ========================================================= */
/* 🔟 PRELOADER IMAGE (GIF / BACKGROUND)                       */
/* ========================================================= */

/* Styles pour le préchargeur */
#preloader {
  width: 100%;
  height: 100%;
  background-size: 100% 100%; /* Le GIF se déforme pour remplir toute la fenêtre */
  opacity: 1;
  transition: opacity 0.1s ease-in-out;
}

#preloader {
  background-size: cover;
  background-position: center;
}



/* ========================================================= */
/* 1️⃣1️⃣ BIO (VIDEO + LINKS)                                  */
/* ========================================================= */

.bio-description a {
  display: inline-block;
  margin-top: 12px;
  font-weight: bold;
  text-decoration: underline;
  cursor: pointer;
}

.bio-video {
  flex-grow: 1 !important;              /* 🔥 PREND TOUT L’ESPACE QU’IL PEUT */
  max-width: 750px !important;         /* 🔥 PEUT S’ÉTALER JUSQU’À 1000px                 C'EST ICI QU'ON RÈGLE LA TAILLE DE LA VIDEO!!!!!!!!!!!!!!!!!*/
  width: 100%;                          /* 🔥 PREND LA LARGEUR MAXIMALE */
  aspect-ratio: 1 / 1;
  overflow: hidden;
  position: relative;
  border-radius: 8px;
  cursor: pointer;
  display: flex;
  justify-content: center;
  align-items: center;
}

.bio-video video,
.bio-video canvas {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  pointer-events: none;
  max-width: none !important;          /* 🔥 CASSE TOUTE LIMITE EXTERNE */
}



/* ========================================================= */
/* 1️⃣2️⃣ LAYOUT UTILITY                                        */
/* ========================================================= */

.tusseau-centered-text {
  max-width: 1800px;
  width: 100%;
  margin: 40px auto;
  padding: 0 30px;
  text-align: center;
  box-sizing: border-box;
}

b, strong { font-weight: 700 !important; }