/* 🎨 Declaration des polices utilisees pour titres et contenus */@font-face {
  font-family: 'LazyDog';
  src: url('/assets/fonts/lazy_dog.ttf') format('truetype');
}

/* 🎨 Declaration des polices utilisees pour titres et contenus */@font-face {
  font-family: 'OctoberCrow';
  src: url('/assets/fonts/October_Crow.ttf') format('truetype');

}

/* ----------------------------------- */
/* ---------PAGE : MAPS.HTML---------- */
/* ----------------------------------- */

/* 🗺️ Conteneur principal pour la page maps.html */.maps-page {
  padding: 2rem;
  max-width: 1200px;
  margin: 0 auto;
  margin-top: 80px;
}

/* 🏷️ Titre principal stylise de la page Maps */.maps-title {
  text-align: center;
  font-size: 3rem;
  margin-bottom: 2rem;
  color: #1cce5b;
  font-weight: lighter;
  font-family: 'OctoberCrow', cursive;
  text-shadow: 0 0 10px #1cce5b;
}

/* 🧱 Grille d'affichage responsive des cartes de maps */.maps-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 2rem;
}

/* 🃏 Carte individuelle representant une map dans la grille */.map-card {
  background-color: #110024d9;
  border-radius: 12px;
  overflow: hidden;
  text-decoration: none;
  color: #1cce5b;
  transition: transform 0.3s ease;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
  border: 1px solid;
  border-image: linear-gradient(to right, #090013, #1cce5b, #090013) 1;
}

/* 🃏 Carte individuelle representant une map dans la grille */.map-card:hover {
  transform: scale(1.05);
}

/* 🃏 Carte individuelle representant une map dans la grille */.map-card img {
  width: 100%;
  height: auto;
  display: block;
  border: 1px solid;
  border-image: linear-gradient(to right, #090013, #1cce5b, #090013) 1;
}

/* 🃏 Carte individuelle representant une map dans la grille */.map-card h2 {
  padding: 1rem;
  font-size: 1.3rem;
  text-align: center;
  font-weight: lighter;
  background-color: #110024d9;
}


/* ===============================
   PAGE DE DeTAIL D'UNE MAP
================================== */
/* 🧾 Page de detail d'une map avec bordure personnalisee */.map-detail-page {
  max-width: 1200px;
  margin: 0 auto;
  padding: 2rem;
  margin-top: 80px;

}

/* Titre principal */
/* 🖋️ Titre principal dans une page de detail de map */.map-detail-title {
  font-family: 'OctoberCrow', cursive;
  font-weight: lighter;
  color: #1cce5b;
  font-size: 3rem;
  text-align: center;
  margin-bottom: 2rem;
    text-shadow: 0 0 10px #1cce5b;

}

/* Conteneur du plan */
/* 🧭 Conteneur relatif pour image et overlays de plans */.map-plan-container {
  position: relative; /* permet aux overlays de se positionner dessus */
  margin-bottom: 2rem;
}

/* Image de la map */
/* 🖼️ Image principale de la carte */.map-base {
  width: 100%;
  height: auto;
  border: 1px solid;
  background-color: #110024d9;
  border-image: linear-gradient(to right, #090013, #1cce5b, #090013) 1;
  border-radius: 10px;
  display: block;
  margin: 0 auto;
}

/* ===============================
   SURBRILLANCE AU SURVOL
================================== */
/* 🔍 Surbrillance dynamique d'une piece sur le plan */.map-hover-highlight {
  position: absolute;
  background-color: #1100246b;
  border: 1px solid #1cce5b;
  border-radius: 12px;
  pointer-events: none; /* ne bloque pas les clics */
  z-index: 10;
  display: none; /* visible uniquement au survol */
}

/* ===============================
   INFOS DE LA PIeCE CLIQUeE
================================== */
/* 💬 Boite d'information affichee lors du clic sur une piece */.room-info {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: #110024f2;
  padding: 1rem;
  border: 1px solid;
  border-image: linear-gradient(to right, #090013, #1cce5b, #090013) 1;
  border-radius: 10px;
  color: white;
  width: 90%;
  max-width: 500px;
  text-align: center;
  z-index: 999;
  display: none;
}
/* 💬 Boite d'information affichee lors du clic sur une piece */.room-info img {
  width: 100%;
  max-height: 300px;
  object-fit: cover;
  border-radius: 10px;
  margin-top: 1rem;
    border: 1px solid;
  border-image: linear-gradient(to right, #090013, #1cce5b, #090013) 1;
}

/* 💬 Boite d'information affichee lors du clic sur une piece */.room-info h3 {
  color: #1cce5b;
  font-weight: lighter;
  font-size: 2rem;

}

/* Fond noir derriere */
/* 💬 Boite d'information affichee lors du clic sur une piece */.room-info-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0,0,0,0.6);
  z-index: 998;
  display: none;
}


/* ❌ Bouton pour fermer la boite d’information */.close-room-info {
  margin-top: 1rem;
  padding: 0.5rem 1.2rem;
  background: transparent;
  color: #1cce5b;
  border: 1px solid #1cce5b;
  border-radius: 8px;
  font-size: 1rem;
  text-transform: uppercase;
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease;
  font-family: 'LazyDog', sans-serif;
}

/* ❌ Bouton pour fermer la boite d’information */.close-room-info:hover {
  background-color: #1cce5b;
  color: #0b0f16;
}




/* 🎯 Overlay SVG pour interactions polygonales sur le plan */.map-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 20;
}

/* 🎯 Overlay SVG pour interactions polygonales sur le plan */.map-overlay polygon {
  fill: rgba(28, 206, 91, 0.3);
  stroke: #1cce5b;
  stroke-width: 2;
}





.maps-bg {
  position: fixed;
  inset: 0;
background: url('/assets/images/FONDECRAN8.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%; }
}


.tanglewood-drive-bg {
  position: fixed;
  inset: 0;
background: url('/assets/images/MapsPG/Tanglewood-Drive/tanglewood-drive-bg.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;
}

.edgefield-road-bg {
  position: fixed;
  inset: 0;
background: url('/assets/images/MapsPG/Edgefield-Road/edgefield-road-bg.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;
}

.ridgeview-court-bg {
  position: fixed;
  inset: 0;
background: url('/assets/images/MapsPG/Ridgeview-Court/ridgeview-court-bg.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;
}

.willow-street-bg {
  position: fixed;
  inset: 0;
background: url('/assets/images/MapsPG/Willow-Street/willow-street-bg.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;
}

.grafton-farmhouse-bg {
  position: fixed;
  inset: 0;
background: url('/assets/images/MapsPG/Grafton-Farmhouse/grafton-farmhouse-bg.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;
}

.bleasdale-farmhouse-bg {
  position: fixed;
  inset: 0;
background: url('/assets/images/MapsPG/Bleasdale-Farmhouse/bleasdale-farmhouse-bg.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;
}

.point-hope-bg {
  position: fixed;
  inset: 0;
background: url('/assets/images/MapsPG/Point-Hope/point-hope-bg.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;
}

.maple-lodge-camp-bg {
  position: fixed;
  inset: 0;
background: url('/assets/images/MapsPG/Maple-Lodge-Camp/maple-lodge-camp-bg.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;
}

.camp-woodwind-bg {
  position: fixed;
  inset: 0;
background: url('/assets/images/MapsPG/Camp-Woodwind/camp-woodwind-bg.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;
}

.prison-bg {
  position: fixed;
  inset: 0;
background: url('/assets/images/MapsPG/Prison/prison-bg.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;
}

.brownstone-high-school-bg {
  position: fixed;
  inset: 0;
background: url('/assets/images/MapsPG/Brownstone-High-School/brownstone-high-school-bg.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;
}

.sunny-meadows-bg {
  position: fixed;
  inset: 0;
background: url('/assets/images/MapsPG/Sunny-Meadows/sunny-meadows-bg.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;
}

.sunny-meadows-restricted-bg {
  position: fixed;
  inset: 0;
background: url('/assets/images/MapsPG/Sunny-Meadows-Restricted/sunny-meadows-restricted-bg.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;
}
/* 🔼 Bouton retour en haut de la page */#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 de la page */#back-to-top:focus {
  outline: 2px solid #fff;
  outline-offset: 2px;
}