/* --------------------------------------------------------- */
/* ------------------- PAGE OBJETS-MAUDITS ----------------- */
/* --------------------------------------------------------- */
/* Conteneur principal */
/* 🧲 Conteneur principal circulaire central des objets maudits */.objets-maudits-container {
  position: relative;
  width: 100%;
  max-width: 600px;
  aspect-ratio: 1 / 1;
  margin: 3rem auto;  
}

.objets-maudits-container h1 {
  font-family: 'OctoberCrow', cursive;
  text-align: center;
  font-size: 3rem;
  margin-top: 7rem;
  margin-bottom: 2rem;
  color: #1cce5b;
  font-weight: lighter;
  text-shadow: 0 0 10px #1cce5b;
}

/* Images de fond */
/* 🌀 Image de fond rotative derriere les objets */.fond-grand-cercle,
/* 🔮 Animation legere du texte central du cercle */.texte-grand-cercle {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100%;
  transform: translate(-50%, -50%);
  pointer-events: none;
}

/* 🔮 Animation legere du texte central du cercle */.texte-grand-cercle {
  z-index: 1;
  animation: animations 2s infinite ease-in-out;
}

/* 🌀 Image de fond rotative derriere les objets */.fond-grand-cercle {
  z-index: 0;
}

/* Objets maudits */
/* 📌 Chaque point d’objet maudit sur le cercle */.objet {
  position: absolute;
  width: 16.66%; /* 100px / 600px */
  aspect-ratio: 1 / 1;
  transform: translate(-50%, -50%);
  z-index: 2;
}

/* 📌 Chaque point d’objet maudit sur le cercle */.objet .cercle {
  position: absolute;
  width: 100%;
  height: 100%;
  transition: filter 0.3s ease;
  background-color: #250644;
  border-radius: 50%;
  border: 2px solid #850606;
}

/* 📌 Chaque point d’objet maudit sur le cercle */.objet:hover .cercle {
  filter: drop-shadow(0 0 4px #1CCD5B);
  background-color: #1CCD5B;
}

/* 📌 Chaque point d’objet maudit sur le cercle */.objet .maudit {
  position: absolute;
  width: 150%;
  height: 100%;
  top: 1%;
  left: -26%;
  z-index: 3;
}

/* Positionnement des objets maudits selon les trous du pentagramme */
/* 🎯 Coordonnees precises de chaque objet dans le cercle */#voodoo { top: 8%; left: 50.3%; }
#miroir { top: 39.1%; left: 91.4%; }
#tarot { top: 87.9%; left: 76.4%; }
#ouija { top: 87.9%; left: 25%; }
#musique { top: 39.1%; left: 8.5%; }

/* Objets internes */
#invocation { top: 35%; left: 50%; }
/* 🖼️ Image illustrative de l’objet maudit flottant au-dessus */#invocation .maudit { width: 170%; height: 170%; top: -28%; left: -32%; }
#singe { top: 75%; left: 50%; }



/* 📌 Chaque point d’objet maudit sur le cercle */.objets-maudits-scene {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1;
  max-width: 600px;
  margin: 0 auto;
}
/* 🧩 Texte descriptif central de la page objets-maudits.html */.section-texte {
  background: #110024d9;
  backdrop-filter: blur(4px);
  padding: 1rem 1.5rem;
  border-radius: 10px;
  border: 1px solid;
  border-image: linear-gradient(to right, #090013, #1cce5b, #090013) 1;
  margin-top: 2rem;
      line-height: 1.5;
      text-align: center;
}


/* 🧩 Texte descriptif central de la page objets-maudits.html */.section-texte h2 {
  font-family: 'OctoberCrow', cursive;
  font-weight: lighter;
  font-size: 3rem;
  color: #1cce5b;
  margin-bottom: 0.5rem;
  margin-top: 0rem;
}

/* 🧩 Texte descriptif central de la page objets-maudits.html */.section-texte h3 {
  font-size: 1.3rem;
  font-weight: lighter;
  color: #1cce5b;
  margin-bottom: 1rem;
    border-bottom: 1px solid;
  border-image: linear-gradient(to right, #090013, #1cce5b, #090013) 1;
}

/* 🧩 Texte descriptif central de la page objets-maudits.html */.section-texte ul {
  list-style: none;
  padding-left: 0;
  margin-top: 1rem;
}

/* 🧩 Texte descriptif central de la page objets-maudits.html */.section-texte li {
  font-size: 1rem;
  margin-bottom: 0.5rem;
  color: #dbdbdb;
}


/* 🧩 Texte descriptif central de la page objets-maudits.html */.section-texte p {
  font-size: 1rem;
  margin-bottom: 1rem;
}

/* 🧩 Texte descriptif central de la page objets-maudits.html */.section-texte strong {
  color: #1cce5b;
  font-weight: lighter;
  font-size: 1.1rem;
}




/* Responsive */
@media (max-width: 768px) {
/* 🧲 Conteneur principal circulaire central des objets maudits */  .objets-maudits-container {
    width: 90vw;
    margin-top: 80px; /* Marge augmentee en mobile aussi */
  }

  .section-texte h2 {
    font-size: 2rem;
  }
}

/* Animation texte-grand-cercle */
@keyframes animations {
  0% { transform: translate(-50%, -50%) rotate(0deg); }
  25% { transform: translate(-50%, -50%) rotate(0.5deg); }
  50% { transform: translate(-50%, -50%) rotate(-0.5deg); }
  75% { transform: translate(-50%, -50%) rotate(0.3deg); }
  100% { transform: translate(-50%, -50%) rotate(0deg); }
} 






/* ✨ Canvas de particules decoratives en fond */.particles-canvas {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100%;
  height: 100%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  z-index: 0.5; /* Entre le fond et le texte */
}













/* 🧾 Affichage du nom de l’objet au survol */.nom-objet-hover {
  position: absolute;
  bottom: 40%;
  left: 50%;
  transform: translateX(-50%);
  font-size: 2rem;
  color: #1cce5b;
  font-family: 'OctoberCrow', cursive;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
  z-index: 10;
}

/* 🧾 Affichage du nom de l’objet au survol */.nom-objet-hover.visible {
  opacity: 1;
  animation: pulseGlow 2s ease-in-out infinite;
}

@keyframes pulseGlow {
  0% { text-shadow: 0 0 4px #1cce5b88, 0 0 8px #1cce5b44; }
  50% { text-shadow: 0 0 10px #1cce5b, 0 0 20px #1cce5b; }
  100% { text-shadow: 0 0 4px #1cce5b88, 0 0 8px #1cce5b44; }
}

@media (max-width: 768px) {
/* 🧾 Affichage du nom de l’objet au survol */  .nom-objet-hover {
    font-size: 2rem;
    bottom: 37%;
  }
}
















/* --------------------------------------------------------- */
/* --------- PAGE : POUPeE VAUDOU + MIROIR HANTe ----------- */
/* ------- (Blocs texte descriptif & statistiques) --------- */
/* --------------------------------------------------------- */

.section-texte-vaudoo,
.section-texte-miroir,
.section-texte-musique,
.section-texte-invocation,
.section-texte-ouija,
.section-texte-tarot,
.section-texte-singe {
  margin-top: 5rem;
  background: #110024d9;
  backdrop-filter: blur(4px);
  padding: 1rem 1.5rem;
  border-radius: 10px;
  border: 1px solid;
  border-image: linear-gradient(to right, #090013, #1cce5b, #090013) 1;
  line-height: 1.5;
  color: #dbdbdb;
  text-align: center;
}

/* Titres principaux (nom de l'objet) */
.section-texte-vaudoo h1,
.section-texte-miroir h1,
.section-texte-musique h1,
.section-texte-invocation h1,
.section-texte-ouija h1,
.section-texte-tarot h1,
.section-texte-singe h1 {
  font-family: 'OctoberCrow', cursive;
  font-weight: lighter;
  font-size: 3rem;
  color: #1cce5b;
  margin-bottom: 1rem;
}

/* Sous-titres (categories) */
/* 📄 Blocs de texte individuels pour chaque page d’objet */.section-texte-vaudoo h3,
.section-texte-miroir h3,
.section-texte-musique h3,
.section-texte-invocation h3,
.section-texte-ouija h3,
.section-texte-tarot h3,
.section-texte-singe h3 {
  font-size: 1.6rem;
  font-weight: lighter;
  color: #1cce5b;
  margin-bottom: 1rem;
  border-bottom: 1px solid;
  border-image: linear-gradient(to right, #090013, #1cce5b, #090013) 1;
}

/* Paragraphes */
/* 📄 Blocs de texte individuels pour chaque page d’objet */.section-texte-vaudoo p,
.section-texte-miroir p,
.section-texte-musique p,
.section-texte-invocation p,
.section-texte-ouija p,
.section-texte-tarot p,
.section-texte-singe p {
  font-size: 1rem;
  margin-bottom: 1rem;
}

/* Mots cles en gras */
/* 📄 Blocs de texte individuels pour chaque page d’objet */.section-texte-vaudoo strong,
.section-texte-miroir strong,
.section-texte-musique strong,
.section-texte-invocation strong,
.section-texte-ouija strong,
.section-texte-tarot strong,
.section-texte-singe strong {
  color: #1cce5b;
  font-weight: lighter;
  font-size: 1.1rem;
}

/* Image d'illustration principale */
.image-vaudoo,
.image-miroir,
.image-musique,
.image-invocation,
.image-ouija,
.image-tarot,
.image-singe {
  width: 200px;
  margin: 1rem auto;
  display: block;
}

/* Liste des statistiques */
.statistiques-vaudoo,
.statistiques-miroir,
.statistiques-musique,
.statistiques-invocation,
.statistiques-ouija,
.statistiques-tarot,
.statistiques-singe {
  list-style: none;
  padding-left: 0;
  margin-top: 1rem;
  text-align: center;
}

.statistiques-vaudoo li,
.statistiques-miroir li,
.statistiques-musique li,
.statistiques-invocation li,
.statistiques-ouija li,
.statistiques-tarot li,
.statistiques-singe li {
  font-size: 1rem;
  margin-bottom: 0.5rem;
}

.statistiques-vaudoo li strong,
.statistiques-miroir li strong,
.statistiques-musique li strong,
.statistiques-invocation li strong,
.statistiques-ouija li strong,
.statistiques-tarot li strong,
.statistiques-singe li strong {
  color: #1cce5b;
  font-weight: lighter;
}

/* --------------------------------------------------------- */
/* ---------- Disposition en deux colonnes (Objet) ---------- */
/* --------------------------------------------------------- */

/* Conteneur principal (Poupee & Miroir) */
/* 📦 Mise en page a 2 colonnes pour les pages objets individuels */.contenu-vaudoo,
.contenu-miroir,
.contenu-musique,
.contenu-invocation,
.contenu-ouija,
.contenu-tarot,
.contenu-singe {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 2rem;
  max-width: 1200px;
  margin: 0 auto;
  padding: 2rem 1rem;
  border-bottom: 1px solid;
  border-image: linear-gradient(to right, #090013, #1cce5b, #090013) 1;
}

/* Colonnes gauche et droite */
.voodoo-col,
.miroir-col,
.musique-col,
.invocation-col,
.ouija-col,
.tarot-col,
.singe-col {
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

/* Colonne gauche : illustration + description */
/* ↙️ Colonne gauche avec illustration et texte */.voodoo-col.gauche,
.miroir-col.gauche,
.musique-col.gauche,
.invocation-col.gauche,
.ouija-col.gauche,
.tarot-col.gauche,
.singe-col.gauche  {
  flex: 1 1 65%;
}

/* Colonne droite : statistiques */
/* ↗️ Colonne droite avec statistiques */.voodoo-col.droite,
.miroir-col.droite,
.musique-col.droite,
.invocation-col.droite,
.ouija-col.droite,
.tarot-col.droite,
.singe-col.droite  {
  flex: 1 1 30%;
}

/* Blocs de contenu */
/* 🧱 Bloc stylise de texte ou de stats */.bloc-description,
.bloc-statistiques {
  background: #110024d9;
  backdrop-filter: blur(4px);
  padding: 1.5rem;
  border-radius: 10px;
  border: 1px solid;
  border-image: linear-gradient(to right, #090013, #1cce5b, #090013) 1;
}

/* Responsive : stack vertical sur mobile */
@media (max-width: 768px) {
/* 📦 Mise en page a 2 colonnes pour les pages objets individuels */  .contenu-vaudoo,
  .contenu-miroir,
  .contenu-musique,
  .contenu-invocation,
  .contenu-ouija,
  .contenu-tarot,
  .contenu-singe  {
    flex-direction: column;
  }

/* ↙️ Colonne gauche avec illustration et texte */  .voodoo-col.gauche,
/* ↗️ Colonne droite avec statistiques */  .voodoo-col.droite,
  .miroir-col.gauche,
  .miroir-col.droite,
  .musique-col.gauche,
  .musique-col.droite,
  .invocation-col.gauche,
  .invocation-col.droite,
  .ouija-col.gauche,
  .ouija-col.droite,
  .tarot-col.gauche,
  .tarot-col.droite,
  .singe-col.gauche,
  .singe-col.droite   {
    flex: 1 1 100%;
  }
}


/* --------------------------------------------------------- */
/* -------- Illustration superposee (Poupee & Miroir) ------- */
/* --------------------------------------------------------- */

/* Conteneur de l’illustration avec particules + images */
/* 🎬 Conteneur d’images superposees avec animations */.voodoo-illustration,
.miroir-illustration,
.musique-illustration,
.invocation-illustration,
.ouija-illustration,
.tarot-illustration,
.singe-illustration {
  position: relative;
  width: 100%;
  height: 280px;
  margin: 0 auto -2.5rem auto;
}

/* Images internes superposees et centrees */
/* 🎬 Conteneur d’images superposees avec animations */.voodoo-illustration img,
.miroir-illustration img,
.musique-illustration img,
.invocation-illustration img,
.ouija-illustration img,
.tarot-illustration img,
.singe-illustration img {
  position: absolute;
  top: 80%;
  left: 50%;
  transform: translate(-50%, -50%);
  max-width: 100%;
  max-height: 100%;
  pointer-events: none;
}


/* ------------ Image superieure (Poupee & Miroir) ------------ */

/* Image principale la plus haute (la vraie forme de l’objet) */
.voodoo-poupee,
.miroir-image,
.musique-image,
.invocation-image,
.ouija-image,
.tarot-image,
.singe-image  {
  z-index: 3;
}


/* ------------ Animation texte central (Poupee & Miroir) ------------ */

/* Texte illustre : effet de respiration magique */
.voodoo-texte,
.miroir-texte,
.musique-texte,
.invocation-texte,
.ouija-texte,
.tarot-texte,
.singe-texte  {
  z-index: 2;
  animation: runeAwakening 4s ease-in-out infinite alternate;
  transition: opacity 0.3s ease;
}

/* Animation de montee douce + apparition */
/* 🌟 Animation d’apparition magique centrale */@keyframes runeAwakening {
  0% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.95);
  }
  100% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
  }
}


/* ------------ Rotation cercle illustre + hover (Poupee & Miroir) ------------ */

/* Cercle normal : rotation continue */
/* 🔁 Cercle tournant en fond sous l’objet */.voodoo-cercle,
.miroir-cercle,
.musique-cercle,
.invocation-cercle,
.ouija-cercle,
.tarot-cercle,
.singe-cercle  {
  z-index: 1;
  animation: rotateInfini 12s linear infinite;
  transition: opacity 0.3s ease;
}

/* Cercle vert au survol : cache par defaut */
/* 🔁 Cercle tournant en fond sous l’objet */.voodoo-cercle-hover,
.miroir-cercle-hover,
.musique-cercle-hover,
.invocation-cercle-hover,
.ouija-cercle-hover,
.tarot-cercle-hover,
.singe-cercle-hover  {
  z-index: 2;
  opacity: 0;
  animation: rotateInfini 12s linear infinite;
  transition: opacity 0.3s ease;
}

/* --------------------------------------------------------- */
/* ------- Animation & survol des cercles (Poupee/Miroir) -- */
/* --------------------------------------------------------- */

/* --- Poupee Vaudou --- */
/* 🎬 Conteneur d’images superposees avec animations */.voodoo-illustration:hover .voodoo-cercle {
  opacity: 0;
}
/* 🎬 Conteneur d’images superposees avec animations */.voodoo-illustration:hover .voodoo-cercle-hover {
  opacity: 1;
}

/* --- Miroir Hante --- */
.miroir-illustration:hover .miroir-cercle {
  opacity: 0;
}
.miroir-illustration:hover .miroir-cercle-hover {
  opacity: 1;
}

/* --- Boite a Musique --- */
.musique-illustration:hover .musique-cercle {
  opacity: 0;
}

.musique-illustration:hover .musique-cercle-hover {
  opacity: 1;
}

/* --- Cercle d'Invocation --- */
.invocation-illustration:hover .invocation-cercle {
  opacity: 0;
}
.invocation-illustration:hover .invocation-cercle-hover {
  opacity: 1;
}

/* --- Planche Ouija --- */
.ouija-illustration:hover .ouija-cercle {
  opacity: 0;
}
.ouija-illustration:hover .ouija-cercle-hover {
  opacity: 1;
}

/* --- Cartes de Tarot --- */
.tarot-illustration:hover .tarot-cercle {
  opacity: 0;
}
.tarot-illustration:hover .tarot-cercle-hover {
  opacity: 1;
}

/* --- Patte de Singe --- */
.singe-illustration:hover .singe-cercle {
  opacity: 0;
}
.singe-illustration:hover .singe-cercle-hover {
  opacity: 1;
}

/* --- Animation de rotation continue --- */
/* 🔄 Animation de rotation continue */@keyframes rotateInfini {
  0% {
    transform: translate(-50%, -50%) rotate(0deg);
  }
  100% {
    transform: translate(-50%, -50%) rotate(360deg);
  }
}

/* --------------------- */
/* Bloc questions , carte , voeu */
/* ❓ Blocs de contenu supplementaires : questions, voeux, cartes */.bloc-questions,
.bloc-cartes,
.bloc-voeux {
  width: 100%;
  margin-top: 3rem;
  padding: 2rem 1.5rem;
  background: #110024d9;
  backdrop-filter: blur(4px);
  border-radius: 10px;
  border: 1px solid;
  border-image: linear-gradient(to right, #090013, #1cce5b, #090013) 1;
}

/* Titre principal */
/* ❓ Blocs de contenu supplementaires : questions, voeux, cartes */.bloc-questions h3,
.bloc-cartes h3,
.bloc-voeux h3 {
  font-size: 1.6rem;
  font-weight: lighter;
  color: #1cce5b;
  margin-bottom: 1rem;
  border-bottom: 1px solid;
  border-image: linear-gradient(to right, #090013, #1cce5b, #090013) 1;
}

/* Conteneur des cartes */
.groupe-questions,
.groupe-cartes-tarot,
.groupe-voeux {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem;
  margin-top: 2rem;
  justify-content: center;
}

/* Chaque carte question */
.carte-question,
.carte-tarot,
.carte-voeu {
  flex: 1 1 260px;
  max-width: 300px;
  background: #1a0a2b;
  border-radius: 10px;
  padding: 1rem;
  box-shadow: 0 0 10px #09001366;
  transition: transform 0.3s ease;
  list-style-type: none;
    border: 1px solid;
  border-image: linear-gradient(to right, #090013, #1cce5b, #090013) 1;
}

.carte-question:hover,
.carte-tarot:hover,
.carte-voeu:hover {
  transform: scale(1.02);
}

.carte-question strong,
.carte-tarot strong,
.carte-voeu strong {
  font-size: 1.2rem;
  color: #1cce5b;
  margin-bottom: 0.5rem;
}

.carte-question p,
.carte-tarot p,
.carte-voeu p {
  color: #ccc;
  font-size: 0.95rem;
  margin-bottom: 0.5rem;
}

.carte-question span,
.carte-tarot span,
.carte-voeu span  {
  color: #1cce5b;
  font-weight: lighter;
}

.carte-question ul,
.carte-tarot ul,
.carte-voeu ul {
  padding-left: 1.2rem;
  list-style: disc;
  list-style-type: none;
}

.carte-question li,
.carte-tarot li,
.carte-voeu li {
  font-size: 0.95rem;
  margin-bottom: 0.3rem;
  color: #dbdbdb;
}


.objets-maudits-bg {
  position: fixed;
  inset: 0;
background: url('/assets/images/FONDECRAN9.webp') no-repeat center center;
  background-size: cover;
  z-index: -1;
  animation: fantomeFloat 10s ease-in-out infinite;
  will-change: transform, background-position;
  pointer-events: none;
}

.objets-maudits-7-bg {
  position: fixed;
  inset: 0;
background: url('/assets/images/FONDECRAN10.webp') no-repeat center center;
  background-size: cover;
  z-index: -1;
  animation: fantomeFloat 10s ease-in-out infinite;
  will-change: transform, background-position;
  pointer-events: none;
}

@keyframes fantomeFloat {
  0%   { transform: scale(1); background-position: 50% 50%; }
  50%  { transform: scale(1.05); background-position: 48% 52%; }
  100% { transform: scale(1); background-position: 50% 50%; }
}



/* 🔼 Bouton retour en haut, visible apres scroll */#back-to-top {
  position: fixed;
      bottom: 40px;
      right: 60px;
  background: #1cce5b;
  color: #090013;
  border: none;
  padding: 0.6rem 1rem;
  font-size: 1.2rem;
  border-radius: 50%;
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
  z-index: 1000;
  display: none;
  transition: opacity 0.3s ease;
}

/* 🔼 Bouton retour en haut, visible apres scroll */#back-to-top:focus {
  outline: 2px solid #fff;
  outline-offset: 2px;
}

/* 🌌 Fond de page pour la page centrale des objets maudits */body.bg-objets-maudits {
  padding-top: 80px; /* ajuste selon la hauteur reelle de ta navbar */
/* ✅ Garantit que le padding et border sont inclus dans les dimensions d’un element */
  box-sizing: border-box;
}