/* ========== GLOBAL ========== */
		  html, body {
			margin: 0; padding: 0;
			height: 100%;
			overflow: hidden;
			font-family: Arial, sans-serif;
			background-color: black;
			color: white;
		  }

		  /* ========== CONTAINER MAP ========== */
		  #map-container {
			position: relative;
			width: 100%;
			height: 0;
			padding-bottom: 56.25%; /* 16:9 aspect ratio */
			margin: 3em auto 0;
			background-size: contain;
			background-repeat: no-repeat;
			background-position: center;
			border-radius: 0.5em;
		  }
			.flou {
			  filter: blur(10px);
			  transition: filter 0.3s ease;
			}
		  /* ========== ICONS LAYER ========== */
		  .icon {
			position: absolute;
			font-size: 3vw;
			color: #6592e6;
			background: rgba(0, 0, 0, 0.5);
			border-radius: 50%;
			padding: 0.5vw;
			cursor: pointer;
			display: flex;
			align-items: center;
			justify-content: center;
			user-select: none;
			transition: background-color 0.3s, color 0.3s;
			box-shadow: 0 0 6px rgba(0,0,0,0.8);
		  }
		  .icon:hover {
			background-color: rgba(255, 255, 255, 0.8);
			color: #222;
		  }
		  .icon.clicked {
			color: #ffa600 !important;
		  }

		  /* ========== OVERLAY ========== */
		  .overlay {
			position: fixed;
			top: 0; left: 0;
			width: 100vw; height: 100vh;
			background: rgba(0, 0, 0, 0.6);
			display: none;
			z-index: 1000;
		  }

			/* ========== POPUP GLASS IMMERSIVE ========== */
			.popup {
			  position: fixed;
			  top: 50%; left: 50%;
			  transform: translate(-50%, -50%);
			  width: 90vw;
			  max-width: 800px;
			  max-height: 90vh;
			  display: none;
			  flex-direction: column;
			  z-index: 1010;

			  /* Apparence glass */
			  /*background: rgba(0, 20, 40, 0.1); /* fond semi-transparent */
			  
			  /*border: 1px solid rgba(255, 255, 255, 0.15);
			  backdrop-filter: blur(100px) saturate(150%);
			  -webkit-backdrop-filter: blur(100px) saturate(150%);*/
			  border-radius: 12px;
			  color: white;

			  /* Ombres et profondeur */
			  /*box-shadow:
				inset 0 0 12px rgba(255, 255, 255, 0.05),
				0 0 30px rgba(0, 183, 255, 0.3),
				0 0 10px rgba(0, 123, 255, 0.4);*/

			  /* Animation */
			  animation: popupAppear 0.6s ease-out;
			}

			/* Effet sonar externe */

			.popup::before {
			  content: "";
			  position: absolute;
			  top: -50px;
			  left: -50px;
			  right: -50px;
			  bottom: -50px;
			  border-radius: 24px;
			  background: radial-gradient(
				ellipse at center,
				rgba(0, 183, 255, 0.5) 30%,
				rgba(0, 183, 255, 0) 100%
			  );
			  filter: blur(60px);
			  z-index: -1;
			  pointer-events: none;
			  animation: sonarPulseBlur 4s infinite ease-in-out;
			}

			@keyframes sonarPulseBlur {
			  0%   { opacity: 0.5; transform: scale(1); }
			  50%  { opacity: 0.9; transform: scale(1.1); }
			  100% { opacity: 0.5; transform: scale(1); }
			}



			/* Apparition en fondu et zoom */
			@keyframes popupAppear {
			  0% {
				transform: translate(-50%, -50%) scale(0.8);
				opacity: 0;
			  }
			  100% {
				transform: translate(-50%, -50%) scale(1);
				opacity: 1;
			  }
			}



			/* ========== EN-TÊTE ========== */
			.popup-header {
			  /*background: rgba(0, 60, 120, 0);
			  backdrop-filter: blur(6px);
			  -webkit-backdrop-filter: blur(6px);*/
			  color: white;
			  padding: 0.8em 1em;
			  font-weight: bold;
			  font-size: 1.1rem;
			  display: flex;
			  justify-content: space-between;
			  align-items: center;
			  border-bottom: 1px solid rgba(255,255,255,0.1);
			  text-shadow: 0 0 6px rgba(0,255,255,0.4);
			}

			.popup-header .close-btn {
			  cursor: pointer;
			  font-size: 2.2em;
			  background: transparent;
			  border: none;
			  color: white;
			  transition: color 0.3s;
			}

			.popup-header .close-btn:hover {
			  color: #ffbbbb;
			}
			.popup-header .close-btn:focus {
			  outline: none;
			  box-shadow: none;
			}
			/* ========== CONTENU LISIBLE ========== */
			.popup-content {
			  display: flex;
			  flex-direction: column;
			  align-items: flex-start;
			  justify-content: flex-start;
			  padding: 1em;
			  overflow-y: auto;
			  flex: 1;
			  /* Fond semi-transparent lisible */
			  /*background: rgba(0, 0, 0, .1);*/
			  border-radius: 0 0 12px 12px;
			  color: #f0f0f0;
			  font-size: 1rem;
			  line-height: 1.5;
			}


		  /* ========== MEDIA STYLES INSIDE POPUP ========== */

		  /* Iframe containers */
		  .youtube-container {
			position: relative;
			width: 100%;
			padding-bottom: 56.25%; /* 16:9 ratio */
			height: 0;
			overflow: hidden;
			border-radius: 8px;
			box-shadow: 0 0 12px rgba(0,0,0,0.7);
			margin-bottom: 1em;
		  }
		  .youtube-container iframe {
			position: absolute;
			top: 0; left: 0;
			width: 100%; height: 100%;
			border: none;
			border-radius: 8px;
		  }

		  iframe {
			width: 100%;
			height: 80vh;
			border: none;
			border-radius: 4px;
			margin-bottom: 1em;
			aspect-ratio: 16 / 9;
		  }

			.popup-iframe-web {
			  width: 90vw;
			  height: 85vh;
			  aspect-ratio: 9 / 16;
			  border: none;
			  display: block;
			  max-height: 100%;
			  max-width: 100%;
			}

		  .popup-content img.responsive-16-9 {
			width: 100%;
			height: auto;
			aspect-ratio: 16 / 9;
			object-fit: cover;
			border-radius: 4px;
			margin-bottom: 1em;
			max-height: 80vh;
		  }

		.audio-container-16-9 {
		  display: flex;
		  flex-direction: column;
		  align-items: center;
		  max-width: 600px;
		  margin: auto;
		}

		.audio-container-16-9 img {
		  max-width: 100%;
		  border-radius: 6px;
		  margin-bottom: 0.8em;
		}

		.audio-container-16-9 audio {
		  display: none; /* On masque la barre audio native */
		}

		.audio-controls {
		  display: flex;
		  justify-content: center;
		  gap: 1em;
		  margin: 0.8em 0 1em 0;
		  width: 100%;
		}

		.audio-controls button {
		  background-color: #007bff;
		  border: none;
		  color: white;
		  padding: 0.5em 1em;
		  border-radius: 5px;
		  font-size: 1rem;
		  cursor: pointer;
		  transition: background-color 0.3s;
		  user-select: none;
		}

		.audio-controls button:hover {
		  background-color: #0056b3;
		}

		.audio-controls button:active {
		  background-color: #003f7f;
		}
		.question-container {
		  display: flex;
		  flex-direction: column;
		  align-items: center;       /* centre tout horizontalement */
		  text-align: center;        /* centre le texte à l’intérieur */
		  padding: 1em;
		  color: #222;
		  max-width: 600px;
		  margin: 0 auto;            /* centre la boîte dans son conteneur */
		  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
		}

		.question {
		  font-size: 1.3rem;
		  font-weight: 600;
		  color: #00bfff;
		  padding: 0.8em 1.2em;
		  margin-bottom: 1em;
		  user-select: text;
		  width: 100%;
		}

		.question-container > div {
		  display: flex;
		  justify-content: center;   /* centre les boutons */
		  flex-wrap: wrap;
		  gap: 0.5em;
		  margin-top: 0.7em;
		  width: 100%;
		}

		.question-container button {
		  background: linear-gradient(to bottom, #004f6e, #007a99);
		  border: 2px solid #00bcd4;
		  border-radius: 8px;
		  padding: 0.6em 1.2em;
		  color: white;
		  font-size: 1em;
		  cursor: pointer;
		  transition: transform 0.2s, background 0.3s, box-shadow 0.3s;
		  box-shadow: 0 4px 8px rgba(0,0,0,0.3);
		}

		.question-container button:hover {
		  transform: scale(1.05);
		  background: linear-gradient(to bottom, #006680, #00acc1);
		}

		.question-container button:active {
		  background-color: #003f7f;  /* Encore plus foncé au clic */
		  box-shadow: none;
		  transform: scale(0.97);
		}

		.question-container button:focus {
		  outline: 2px solid #66b3ff;
		  outline-offset: 2px;
		}

		.quiz-container {
		  display: flex;
		  flex-direction: column;
		  justify-content: center; /* vertical center */
		  align-items: center;     /* horizontal center */
		  max-width: 90%;
		  margin: 0 auto;
		  padding: 1em;
		  box-sizing: border-box;
		  text-align: center;
		  color: #fff;
		  font-family: Arial, sans-serif;
		}

		.quiz-question {
		  font-size: 1.2em;
		  font-weight: bold;
		  margin-bottom: 1em;
		  text-shadow: 0 0 5px #000;
		}

		.quiz-choices {
		  display: flex;
		  justify-content: center;
		  gap: 0.6em;
		  flex-wrap: wrap;
		  margin-top: 1em;
		}

		.quiz-button {
		  background: linear-gradient(to bottom, #004f6e, #007a99);
		  border: 2px solid #00bcd4;
		  border-radius: 8px;
		  padding: 0.6em 1.2em;
		  color: white;
		  font-size: 1em;
		  cursor: pointer;
		  transition: transform 0.2s, background 0.3s, box-shadow 0.3s;
		  box-shadow: 0 4px 8px rgba(0,0,0,0.3);
		}

		.quiz-button:hover {
		  transform: scale(1.05);
		  background: linear-gradient(to bottom, #006680, #00acc1);
		}

		.quiz-button.correct {
		  background-color: #4caf50 !important;
		  border-color: #388e3c;
		  color: white;
		  animation: pulse-correct 0.5s;
		}

		.quiz-button.wrong {
		  background-color: #f44336 !important;
		  border-color: #c62828;
		  color: white;
		  animation: shake-wrong 0.4s;
		}

		.quiz-next-btn {
		  background-color: #00bcd4;
		  border: none;
		  padding: 0.5em 1em;
		  color: white;
		  font-size: 1em;
		  border-radius: 6px;
		  cursor: pointer;
		  transition: background 0.3s;
		  margin-top: 1em;
		}

		.quiz-next-btn:hover {
		  background-color: #0097a7;
		}

		@keyframes pulse-correct {
		  0% { transform: scale(1); }
		  50% { transform: scale(1.15); }
		  100% { transform: scale(1); }
		}

		@keyframes shake-wrong {
		  0% { transform: translateX(0); }
		  25% { transform: translateX(-5px); }
		  50% { transform: translateX(5px); }
		  75% { transform: translateX(-3px); }
		  100% { transform: translateX(0); }
		}



	  #popup-content iframe,
	  #popup-content img,
	  #popup-content audio {
		width: 100%;
		border-radius: 8px;
		display: block;
		margin: 0 auto 1em auto;
		aspect-ratio: 16 / 9;
	  }

	  /* ========== NAVIGATION BUTTONS ========== */
	  #nav-buttons {
		position: absolute;
		bottom: 7.5em;
		left: 50%;
		transform: translateX(-50%);
		z-index: 900;
		display: flex;
		gap: 1em;
	  }
	  #nav-buttons button {
		padding: 0.6em 1.4em;
		font-size: 1rem;
		border: none;
		border-radius: 5px;
		background: #007bff;
		color: white;
		cursor: pointer;
		transition: background-color 0.3s;
	  }
	  #nav-buttons button:disabled {
		background: #666;
		cursor: not-allowed;
	  }
	  #nav-buttons button:hover:not(:disabled) {
		background: #0056b3;
	  }

	  #slide-thumbnails {
		position: fixed;
		bottom: 0.2em;
		right: 0.2em;
		display: flex;
		gap: 0.3em;
		  width:100vw;
		z-index: 1200;
	  }
	  #slide-thumbnails .thumb {
		width: 10em;
		height: 5.6em;
		cursor: pointer;
		border: 2px solid transparent;
		border-radius: 4px;
		object-fit: cover;
	  }
	  #slide-thumbnails .thumb.active {
		border-color: #007bff;
	  }