/*
// 1.9.1.9.10
*/

/* Largeur = width + padding */
* {
  box-sizing: border-box;
}

/* Styles de base et réinitialisation */
html, body {
  max-width: 100vw;
  overflow-x: hidden;
}
body {
    font-family: 'Arial', sans-serif;
    margin: 0;
    padding: 0;
    background-color: #fff;
    color: #333;  
	word-break: keep-all; /* évite les coupures mal placées */
}

h1 {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  flex-wrap: wrap;
}

h2 {
    color: #a0522d;
    padding: 0rem;
    margin: 0 auto;
}

.marge {
	border-left: 4px solid #a0522d;
	padding-left: 1rem;
}
 
p {
  font-size: 1.1rem;
  line-height: 1.6;
  margin: 1rem 0;
  color: #333;
  font-family: 'Arial', sans-serif;
}

/* Styles pour la popup Frissons Suisses */
#bookPage img.book-cover {
    display: flex;
    width: 98%;
    max-width: 350px;
    border-radius: 8px;
    margin: 0 auto;  
} 
.book-title {
  font-size: 1.8rem;
  color: #882584;
  margin-bottom: 0.5rem; 
}

.book-description {
font-style: italic;
    margin: 0.8rem auto;
    max-width: 440px;
    text-align: center;
    color: #333;
}

p.book-order {
    text-align: center;
    line-height: 1.8;
}

.book-order a {
  font-weight: bold;
  color: #882584;
  text-decoration: underline;
}

.book-release {
	margin-top: 0.5rem;
	font-size: 1rem;
	line-height: 2;
	color: #555;
    text-align: center;
}


/* Styles pour l'en-tête - Mise en cache du jeu */
#cacheStatusContainer {
  position: fixed;
  bottom: 1rem;
  left: 1rem;
  z-index: 9999;
}

.cache-status-icon {
  cursor: pointer;
  font-size: 1.6rem;
  background: white; 
    padding: 0rem 0.2rem;
    height: 50px;
    width: 50px; 
    font-size: 2rem;
    line-height: 3rem;
  border-radius: 50%;
  box-shadow: 0 2px 6px rgba(0,0,0,0.2);
  transition: transform 0.2s;
}
.cache-status-icon:hover {
  transform: scale(1.1);
}

#cacheStatusIcon {
  display: none; /* Caché par défaut */
}
#cacheStatusIcon {
  position: fixed;
  bottom: 1rem;
  left: 1rem;
  background: #e6ffef;
  color: #00a55f;
  border: 2px solid #00d26a;
  border-radius: 50%;
  width: 40px;
  height: 40px;
  font-size: 1.3rem;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  box-shadow: 0 0 8px rgba(0,0,0,0.2);
  transition: background 0.3s ease;
  z-index: 9999;
}

#cacheStatusIcon:hover {
  background: #ccffdd;
}


/* Styles pour l'en-tête */
header {
    background-color: #882584;
    color: white;
    padding: .5rem 1rem 0.5rem; 
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);    
	z-index: 2;
    position: relative;
}

.header-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    max-width: 700px;
    margin: 0 auto;
}
.header-page-select {
	display: inline-flex;
    align-items: center;
    justify-content: flex-end;
}
label#pageLabel  {
    margin-right: 1rem;
}

.site-title {
  display: flex;
  align-items: center;
  gap: .1rem;
  margin: 0; 
  font-family: 'Georgia', serif;
  font-size: 1.1rem;
  line-height: 1.3;
  flex-wrap: wrap;
  padding-right: 10px;
  border-radius: 8px;
  cursor: pointer;
  transition: background-color 0.3s ease, transform 0.2s ease, box-shadow 0.3s ease;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.site-title:hover {
    background-color: #6e1c6e;
    transform: scale(1.04);
    box-shadow: 0 6px 12px rgba(136, 37, 132, 0.35);
}

.title-icon {
  font-size: 2.8rem;
  animation: pop 0.8s ease forwards;
}

.title-text {
  display: flex;
  flex-direction: column;
  line-height: 1.1;
}

.sous-titre {
    font-size: 1.5rem;
    color: #fff;
    font-weight: bold;
    text-shadow: 1px 1px 0 #000000, 2px 2px 4px #6e1c6e;
}
 
/* En-tête du menu (masqué par défaut avec transition) */
#headerMenu {
	width: 100%;
	justify-content: space-evenly;
	align-items: center;
	overflow: hidden;
	max-height: 0;
	opacity: 0;
	transition: max-height 0.3s ease, opacity 0.3s ease;
}

/* Affichage du menu lorsqu’il est actif */
#headerMenu.show {
	display:flex;
	max-height: 200px;
	opacity: 1;
}

.header-menu { 
  align-items: center;
  gap: 1rem;
}

select {
    padding: 0.5rem;
    border-radius: 4px;
    border: 1px solid #ccc;
    cursor: pointer;
}

@media screen and (max-width: 6000px) {
  .header-menu {
    transition: max-height 0.3s ease, opacity 0.3s ease;
    overflow: hidden;
    max-height: 0;
    opacity: 0;
  }

  .header-menu.show {
    max-height: 200px;
    opacity: 1;
  }
}

#burgerBtn {
	display: none; /* caché par défaut */
    animation: pop 0.8s ease forwards;
}

.burger {
	font-size: 2rem;
	line-height: 1;
	width: 3.5rem;
	padding-left: 1rem;
	height: 3.5rem;
	display: flex;
	align-items: center;
	justify-content: center;
	background: none;
	border: none;
	color: white;
	cursor: pointer;
	box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

/* Responsive layout */
@media screen and (max-width: 600px) {
  .burger {
    display: block;
  }

  .header-menu {
    flex-direction: column;
    align-items: flex-start;
    width: 100%;
    display: none; /* hidden by default */
    padding-top: 1rem;
  }

  .header-menu.show {
    display: flex;
  }

  #pageSelect, #resetButton {
    width: 100%;
  }
}


/* Styles pour le score et le bouton de réinitialisation */
.score-container {
    background-color: rgba(255, 255, 255, 0.2);
    border-radius: 20px;
    padding: 0.5rem 0.75rem;
    font-weight: bold;
}

#scoreContainer {
    display: none !important;
}

#resetButton {
    background-color: #ff5252;
    color: white;
    border: none;
    padding: 0.5rem 1rem;
    border-radius: 4px;
    cursor: pointer;
    font-size: 1rem; 
}

#resetButton:hover {
    background-color: #ff1744;
}

/* Styles pour le contenu principal */
main { 
    min-height: 80vh;
    padding: 0rem; 
}

/* Styles pour les pages */
.page {
	box-sizing: border-box;
    background-color: white;
    padding: 1rem 1rem 1rem;
    text-align: center;
    width: 100%;
    max-width: 700px;
    margin: 0 auto;
    border-radius: 8px;
    /* box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); */
    pointer-events: none;
    z-index: 0;
    min-height: 300px;
    visibility: hidden;
    opacity: 0;
    transition: all 0.4s ease-in-out;
    overflow-wrap: break-word;
}
.page.visible {
  visibility: visible;
  opacity: 1;
  pointer-events: auto;
}
.page h1 { 
    color: #882584;
    margin-bottom: 1.5rem;
    font-family: 'Georgia', serif;
    border-bottom: 3px dotted #eee8d0;
    padding: 1rem 0;
    border-top: 3px dotted #eee8d0;
    text-shadow: 1px 1px 0 #ffffff;
}
#introPage h1 { 
    background: rgb(255 255 255 / 34%);
    padding: 1rem .5rem;
    border-radius: 1rem;
	border:none;
    margin: 0rem auto 1rem;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
    color: #882584;
    margin-bottom: 1.5rem;
    font-family: 'Georgia', serif; 
    padding: 1rem 0; 
    text-shadow: 1px 1px 0 #ffffff;
}

.page-home-h1 {
    max-width: 410px;
}
.page h1 span {
    font-size: 1.2rem;
    opacity: .5;
    display: block;
    color: #6e1c6e;
}
 
.page img {
    max-width: 100%;
    height: auto; 
}

/* loupe */
.zoom-container {
	position: relative;
	display: inline-block;
}
.lens {
	position: absolute;
	width: 300px;
	height: 300px;
	border-radius: 50%;
	pointer-events: none;
	display: none;
	z-index: 10;

	/* Image zoomée */
	background-repeat: no-repeat;
	background-size: 200% 200%;

	/* Style réaliste */
	border: 4px solid rgba(255, 255, 255, 0.3); /* bord clair */
	background-color: rgba(255, 255, 255, 0.05); /* effet "verre" */
	backdrop-filter: blur(3px);
	-webkit-backdrop-filter: blur(3px);

	box-shadow:
		0 0 12px rgba(255, 215, 0, 0.4),       /* halo doré externe */
		0 0 4px rgba(0, 0, 0, 0.3),            /* ombre générale */
		inset 0 4px 12px rgba(255, 255, 255, 0.2), /* lumière haut */
		inset 0 -4px 8px rgba(0, 0, 0, 0.3);   /* ombre bas */

	animation: lensGlow 4s ease-in-out infinite;
}
@keyframes lensGlow {
	0% {
		box-shadow:
			0 0 12px rgba(255, 215, 0, 0.3),
			0 0 4px rgba(0, 0, 0, 0.3),
			inset 0 4px 12px rgba(255, 255, 255, 0.2),
			inset 0 -4px 8px rgba(0, 0, 0, 0.3);
	}
	50% {
		box-shadow:
			0 0 16px rgba(255, 215, 0, 0.5),
			0 0 6px rgba(0, 0, 0, 0.35),
			inset 0 4px 16px rgba(255, 255, 255, 0.25),
			inset 0 -4px 10px rgba(0, 0, 0, 0.4);
	}
	100% {
		box-shadow:
			0 0 12px rgba(255, 215, 0, 0.3),
			0 0 4px rgba(0, 0, 0, 0.3),
			inset 0 4px 12px rgba(255, 255, 255, 0.2),
			inset 0 -4px 8px rgba(0, 0, 0, 0.3);
	}
}


.toggle-loupe {
	background: linear-gradient(145deg, #f7d77b, #ffb300);
	border: none;
	border-radius: 8px;
	padding: 0.6rem 1.2rem;
	font-weight: bold;
	cursor: pointer;
	box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
	transition: transform 0.2s ease;
	margin-bottom: 2rem;
}
.toggle-loupe:hover {
	transform: scale(1.05);
}
 .loupe-cursor-none {
	cursor: none;
}
/* clickable */

img.clickable-image {
	scale: 1;
  transition: transform 0.3s ease-in-out;
  border-radius: 6px;
  will-change: transform;
}

img.clickable-image:hover {
  transition: transform 0.3s ease-in-out;
  transform: scale(1.02);
  cursor: zoom-in;
  /* box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2); */
}
.shiny-gold-text {
	font-weight: bold; 
	color: transparent; 
    font-size: 2.8rem;
    line-height: 1;
	background: linear-gradient(
		135deg,
		#f7c14d 0%,
		#ff9900 15%,
		#ffd700 30%,
		#ffb300 45%,
		#f7c14d 60%,
		#ffea70 75%,
		#f7c14d 90%,
		#ff9900 100%
	);
	background-size: 400% 400%;
	background-clip: text;
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	animation: shineGoldLoop 6s ease-in-out infinite;
	text-shadow: none;
}

@keyframes shineGoldLoop {
	0%   { background-position: 100% 100%; }
	50%  { background-position: 0% 0%; }
	100% { background-position: 100% 100%; }
}
@media screen and (max-width: 530px) {
	 #introPage h1 {  
		padding: 1rem 0;  
	}
	.page-home-h1 {  
		font-size: 2rem;
        padding: 0rem .5rem;
    }
}
.shiny-text {
	font-size: 2rem;
	font-weight: bold;
	color: transparent;
	background: repeating-linear-gradient(
		-45deg,
		#882584 0%,
		#882584 10%,
		#ffffff 20%,
		#882584 30%
	);
	background-size: 200% 200%;
	background-clip: text;
	-webkit-background-clip: text;
	animation: shineDiagonal 3s linear infinite;
}

@keyframes shineDiagonal {
	0% {
		background-position: 200% 200%;
	}
	100% {
		background-position: 0% 0%;
	}
}

.image-container {
    margin-bottom: .5rem;
}

/* Navigation et Titre pages */ 

.page-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background:rgba(255, 248, 220, 0.85);
  padding: 1rem .5rem;
  border-radius: 1rem;
  margin: 0rem auto 1rem;
  box-shadow: 0 2px 6px rgba(0,0,0,0.05);
}

.page-title {
    border: none !important;
    text-align: center;
    flex: 1;
    font-family: 'Georgia', serif;
    color: #882584;
    font-size: 1.5rem;
    margin: 0 !important;
    padding: 0rem !important;
}

.page-title-h1 {
    font-size: 2rem;
    line-height: 1;
}

.page-title span {
  display: block;
  font-size: 0.9rem;
  color: #444;
  margin-top: 0.2rem;
}

.nav-arrow {
	font-size: 2.5rem;
    background: transparent;
    box-shadow: none;
    color: white;
    border: none;
    padding: 0rem 0rem 0.2rem 0rem;
    border-radius: 0.5rem;
    cursor: pointer;
    transition: transform 0.2s ease;
}

.nav-arrow:hover {
  transform: scale(1.1);
}

/* */

h3 {
    display: inline-block;
    color: #882584;
    margin-bottom: 1.5rem;
    font-family: 'Georgia', serif;
    border-bottom: 1px dashed #6e1c6e;
    padding: .5rem;
    border-top: 1px dashed #6e1c6e;
}

p.description {
    color: #b23739;
    font-family: cursive;
    font-style: italic;
    font-size: 1.2rem;
    margin-bottom: 2rem;
}
p.description.marge { 
	color: #333;
    font-family: 'Arial', sans-serif;
    font-style: normal;
    font-size: 1.1rem;
    line-height: 1.6;
    text-align: left; 
    margin-bottom: 2rem;
}
img.indice {
	width:100%;
    max-width: 350px;
    margin-top: 2vh;
}
@media (prefers-reduced-motion: reduce) {
  .page {
    transition: none !important;
  }
}

/* Styles les messages de réussite  */
/* Bloc principal */
.popup-message {
  position: fixed;
  top: 30%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 9999;
  background: white;
  padding: 1.2rem 1.2rem;
  border-radius: 12px;
  box-shadow: 0 0 20px rgba(0,0,0,0.2);
  opacity: 0;
  transition: opacity 0.3s ease;
}

.popup-message.visible {
  opacity: 1;
}

/* Structure interne */
.popup-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.6rem;
  text-align: center;
}

/* Types */
.popup-message.success {
  border: 2px solid #00d26a;
  background-color: #e6ffef;
  color: #00a55f;
}

.popup-message.error {
  border: 2px solid #f8312f;
  background-color: #ffe6e6;
  color: #c62828;
}

.popup-message.error .popup-inner {
  animation: shake 0.5s ease-in-out;
}

.popup-main-text {
  font-size: 1.5rem;
  font-weight: bold;
}

.popup-subtext {
  margin-top: 0.4rem;
  font-size: 0.9rem;
  color: #666;
  font-style: italic;
}

/* Icône animée */
.success-icon,
.error-icon {
  font-size: 1.8rem;
  animation: pop 0.8s ease forwards;
}

.success-icon { color: #00d26a; }
.error-icon { color: #f8312f; }

/* Animations */
@keyframes pop {
  0%   { transform: scale(0); opacity: 0; }
  60%  { transform: scale(1.4); opacity: 1; }
  100% { transform: scale(1); opacity: 1; }
}

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

 

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(-5px); }
  to   { opacity: 1; transform: translateY(0); }
}


/* Styles pour les long popup */ 
.long-popup {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%); /* ✅ Centrage parfait */
  background: white;
  padding: 1rem;
  max-width: 90%;
  width: 540px;
  min-width: 280px;
  min-height: 100px;
  border-radius: 12px;
  border: 2px solid #882584;
  box-shadow: 0 0 20px rgba(0,0,0,0.25);
  z-index: 9999; 
  text-align: left;
  opacity: 0;
  transition: opacity 0.3s ease;
}

/* Animation d’apparition visuelle uniquement */
.long-popup.visible {
  opacity: 1;
}

/* Si tu veux ajouter une animation douce, fais-la sur scale */
@keyframes fadeScaleIn {
  0%   { opacity: 0; transform: translate(-50%, -50%) scale(0.9); }
  100% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}

.long-popup.animate {
  animation: fadeScaleIn 0.3s ease forwards;
}


.long-popup h2 {
  margin-top: 0;
  font-size: 1.4rem;
  color: #882584;
  text-align: center;
}

.long-popup-content {
  max-height: 400px; 
	overflow-y: auto;
  overflow-y: auto;
  margin: 0rem 0;
  text-align: left;
}
.long-popup-footer {
	text-align: right;
	margin-top: 0rem; 
	border-top: 1px solid gray;
	padding-top: 1px;
}

.popup-close {
  display: block;
  margin: 0 auto;
  padding: 0.5rem 1rem;
  font-weight: bold;
  background-color: #882584;
  color: white;
  border: none;
  border-radius: 6px;
  cursor: pointer;
}


.long-popup button {
  margin-top: 1rem;
  background-color: #882584;
  color: white;
  border: none;
  padding: 0.5rem 1rem;
  border-radius: 6px;
  cursor: pointer;
  font-weight: bold;
}

.long-popup button:hover {
  background-color: #6e1c6e;
}

/* Styles pour les popup confirm/alert  */
.custom-popup {
  position: fixed;
  top: 35%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: white;
  padding: 1.5rem;
  border-radius: 12px;
  border: 2px solid #882584;
  box-shadow: 0 0 20px rgba(0,0,0,0.3);
  z-index: 9999;
  opacity: 0;
  transition: opacity 0.3s ease;
  font-size: 1.1rem;
  max-width: 90%;
  width: 320px;
  text-align: center;
}

.custom-popup.visible {
  opacity: 1;
}

.popup-buttons {
  margin-top: 1rem;
  display: flex;
  justify-content: center;
  gap: 1rem;
}

.popup-buttons button {
  padding: 0.5rem 1rem;
  border: none;
  border-radius: 6px;
  font-weight: bold;
  cursor: pointer;
}

.popup-buttons button:first-child {
  background-color: #00a55f;
  color: white;
}

.popup-buttons button:last-child {
  background-color: #ccc;
  color: black;
}

/* Styles pour le message de conclusion  */
#finalPage h1 {
	display: flex;
	flex-direction: column;
	align-items: center;
	border-top: none;
	border-bottom: none;
	padding-top: 0; 
	color:#cf2c81;
	animation: popFinal 0.8s ease-out forwards;
}

.final-icon {
  font-size: 3.5rem!important;
  margin: 1rem;
  animation: bounceIcon .6s ease infinite alternate;
} 

.subtitle {
  display: block;
  margin-top: 0.5rem;
  font-size: 1rem;
  color: #444;
  font-weight: normal;
  text-shadow: none;
}

@keyframes popFinal {
  0%   { transform: scale(0.8); opacity: 0; }
  60%  { transform: scale(1.3); opacity: 1; }
  100% { transform: scale(1); }
}

@keyframes bounceIcon {
  from { transform: scale(1); }
  to   { transform: scale(1.2) rotate(5deg); }
}
 
div#introPage,
.hints,
.conclusion {
	position: relative;
	background-color: transparent;
	background-image: url('/images/site/Fond-Carte-Tresor.png');
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	border: 0px solid #a0522d;
	border-radius: 1rem;
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
	padding: 2rem 2rem 2rem 2rem;
	font-family: 'Georgia', serif;
	line-height: 1.6;
	max-width: 700px;
	margin: 3rem auto;
	color: #3b2b1a;
	z-index: 0;
} 

div#introPage::before,
.hints::before,
.conclusion::before {
	content: "";
	position: absolute;
	inset: 0;
	background: rgba(255, 248, 220, 0.85); /* voile beige clair semi-transparent */
	border-radius: 1rem;
	z-index: -1; /* derrière le texte */
}

div#introPage::after {
	content: "🧭";
	position: absolute;
	top: -3.4rem;
	right: -3.4rem;
	font-size: 6rem;
	transform: rotate(264deg);    
	z-index: 1;
    pointer-events: none;
}

div#introPage { 
	margin: 1rem auto;
	width: calc(100% - 2rem); /* 1rem à gauche + 1rem à droite */
	max-width: 700px;
    padding: 2rem;
}

.conclusion {
    padding: 1rem;
}
.conclusion p {
  font-size: 1.1rem;
  margin-bottom: 1rem;
  line-height: 1.8;
}

.conclusion ul {
  margin: 2rem 1rem;
  padding-left: 1.5rem;
  list-style-type: "🔍 "; /* "🖋 "; */
}

.conclusion ul li {
  margin-bottom: 0.6rem;
  font-style: italic;
}

.book-order a.startGame,
.conclusion a.startGame {
  color: #8b4513;
  background-color: #fff5cc;
  padding: 0.4rem 0.8rem;
  font-weight: bold;
  border-radius: 6px;
  text-decoration: none;
  border: 1px solid #e8c27a;
  transition: background-color 0.3s ease, transform 0.2s ease;
}

.conclusion a.startGame:hover {
  background-color: #fce59c;
  transform: scale(1.05);
  text-decoration: underline;
}

/* Styles pour les formulaires */

.password-form {
    width: 100%;
    margin: 1rem 0 1rem;
    border: 2px solid #882584;
    padding: 0.75rem 1rem;
    border-radius: 8px;
    background-color: #fff;
    color: #064e3b;
    font-weight: bold;
    font-size: 1.05rem;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    transition: transform 0.2s ease;
}

.password-form p{
    margin: 0 auto .5rem;
}

.input-button-container {
    display: flex;
    width: 100%;
    justify-content: center;
}

.password-input {
    width: 130px; 
	margin: 0 2%;
    padding: 0.5rem;
    border: 1px solid #ccc;
    border-radius: 4px;
    text-align: center;
}

.submit-button {
    width: 150px;
	margin: 0 2%;
    background-color: #882584;
    color: white;
    border: none;
    padding: 1rem;
    border-radius: 4px;
    cursor: pointer;
    transition: background-color 0.3s;
}

.submit-button:hover {
    background-color: #6e1c6e;
}

/* Styles pour les messages */
.message {
    margin: 1rem 0 1rem;
    padding: 0.5rem;
    border-radius: 4px;
    display: none;
}

.success {
    background-color: #e8f5e9;
    color: #00d26a;
    display: block;
}

.error {
    background-color: #ffebee;
    color: #f8312f;
    display: block;
}

/* Styles pour les indices */
.hints {
    margin-top: 1rem;
}

.hints button {
    background-color: #ffab00;
    padding: 1rem;
    margin: 0.25rem;
    border: none;
    border-radius: 4px;
    cursor: pointer;
}

.hints button:hover {
    background-color: #ff9800;
}
 

/* Styles pour les solutions */
.solution {
  margin: 0;
  padding: 0.75rem 1.2rem;
  border-radius: 8px;
  background-color: #d2ffd9; /* vert plus clair, plus vibrant */
  border-left: 0px solid #00c853; /* accent vert pétant */
  color: #064e3b;
  font-weight: bold;
  font-size: 1.05rem;
  box-shadow: 0 4px 8px rgba(0, 200, 83, 0.2);
  transition: transform 0.2s ease;
}
 

/* Styles pour les tentatives */
.attempts {
    margin-top: 1rem;
    font-style: italic;
    color: #666;
}

/* Styles pour la page finale */
#finalPage {
    text-align: center;
}

#finalPage h2 {
    font-size: 2.5rem;
}

/* Styles pour le résumé des scores */
#scoreTable {
  width: 80%;
  margin: 0 auto;
  border-collapse: collapse;
}

#scoreTable th, #scoreTable td {
  border: 1px solid #ddd;
  padding: 8px;
  text-align: center;
}

#scoreTable tr:nth-child(even) {
  background-color: #f2f2f2;
}

#scoreTable thead tr {
  background-color: #f9f9f9;
}

#scoreTable tr:hover {
  /* background-color: #ddd; */
}

#scoreTable tbody tr.perfect-row {
  background-color: #e5ffe5;
}

#scoreTable tbody tr.imperfect-row {
  background-color: #fff8e6;
}

/* Couleurs de score */
.green {
  color: #00d26a;
  font-weight: bold;
}

.red {
  color: #f8312f;
  font-weight: bold;
}

.orange {
  color: orange;
  font-weight: bold;
}

.neutral {
  color: gray;
  font-weight: normal;
}

.bold {
  font-weight: bold;
}

.score-summary {
  margin-top: 2rem;
}

#scoreTable td.score {
  text-align: center;
  font-weight: bold;
  font-size: 1.1em;
}

#totalScore {
  font-size: 1.5rem;
  font-weight: bold;
  text-align: center;
  margin-top: 1rem;
}

#totalScore.green {
  color: #00d26a;
}

#totalScore.orange {
  color: orange;
}

#totalScore.red {
  color: #f8312f;
}

/* Phrase de conclusion */
#finalConclusion { 
  text-align: center;
  font-size: 1.2rem;
  font-weight: bold;
  color: #333;
}

/* Responsive */
@media screen and (max-width: 600px) {
  #scoreTable {
    width: 100%;
    font-size: 0.9em;
  }

  #scoreTable th, #scoreTable td {
    padding: 6px;
  }

  #finalConclusion {
    font-size: 1rem;
  }
}


/* Styles pour l'overlay d'image */
.image-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(255, 255, 255, 0.9);
    justify-content: center;
    align-items: center;
    z-index: 10000; /* Au dessus des popup, messages etc */
}

.fullscreen-image {
    max-width: 100%;
    max-height: 100%;
    background-color: rgba(255, 255, 255, 1);
   /*  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2); */
}

.close-button {
    position: absolute;
    top: 20px;
    right: 30px;
    color: #882584;
    opacity: 1;
    font-size: 35px;
    font-weight: bold;
    cursor: pointer;
    background: #fff;
    border-radius: 50%;
    width: 50px;
    height: 50px;
    text-align: center;
  border: none;
  transition: background-color 0.3s ease, transform 0.2s ease, box-shadow 0.3s ease;
  box-shadow: 0 4px 8px rgba(136, 37, 132, 0.2);
  overflow: hidden;
} 

/* Effet de survol engageant */
.close-button:hover {
	color: #fff;
  background-color: #6e1c6e;
  transform: scale(1.04);
  box-shadow: 0 6px 12px rgba(136, 37, 132, 0.35);
}

.image-container img { 
    cursor: pointer; 
}

/* Styles pour la section d'introduction */
p.startGame {
    text-align: center;
    color: #882584;
    font-size: 1.3rem;
    margin: 2rem auto 0;
}

.intro-section, .instructions, .scoring, .disclaimer {
    margin-bottom: 1.5rem;
    text-align: left;
}

.intro-section p, .instructions p, .disclaimer p {
	text-align: justify;
    font-size: 1.1rem;
    line-height: 1.6;
}

.scoring ul {
    list-style-type: none;
    padding: 0;
}

.scoring li {
    padding: 0.5rem 0;
    border-bottom: 1px solid #eee;
}

.start-button-container {
    margin: 2rem 0;
}

.start-button-container button {
    margin: 1rem 0;
    font-weight: bold;
    text-transform: uppercase;
}

.note {
    font-size: 0.9rem;
    color: #666;
    font-style: italic;
    margin-top: 1rem;
}

button {
  background-color: #882584;
  color: white;
  border: none;
  padding: 0.75rem 1.5rem;
  font-size: 1rem;
  border-radius: 8px;
  cursor: pointer;
  transition: background-color 0.3s ease, transform 0.2s ease, box-shadow 0.3s ease;
  box-shadow: 0 4px 8px rgba(136, 37, 132, 0.2);
  font-weight: bold;
  letter-spacing: 0.5px;
  position: relative;
  overflow: hidden;
}

/* Effet de survol engageant */
button:hover {
  background-color: #6e1c6e;
  transform: scale(1.04);
  box-shadow: 0 6px 12px rgba(136, 37, 132, 0.35);
}

/* Effet de clic (pression) */
button:active {
  transform: scale(0.98);
  box-shadow: 0 2px 6px rgba(136, 37, 132, 0.3);
}
/* Animation pulsante */
@keyframes pulse {
  0% {
    transform: scale(1);
    box-shadow: 0 0 0 rgba(136, 37, 132, 0.4);
  }
  50% {
    transform: scale(1.05);
    box-shadow: 0 0 15px rgba(136, 37, 132, 0.6);
  }
  100% {
    transform: scale(1);
    box-shadow: 0 0 0 rgba(136, 37, 132, 0.4);
  }
}

/* À ajouter uniquement aux boutons que tu veux rendre pulsants */
button.cta-pulse {
  animation: pulse 2.5s infinite ease-in-out;
}

/* Bouton doré pulsant */
button.cta-gold {
  background: linear-gradient(145deg, #f7d77b, #ffd700);
  color: #4a3500;
  border: none;
  padding: 0.75rem 1.5rem;
  font-size: 1.1rem;
  border-radius: 6px;
  cursor: pointer;
  font-weight: bold;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
  transition: transform 0.2s ease;
  animation: pulse-gold 2.2s infinite ease-in-out;
  margin: 1rem auto;
}
/* Hover effet pour le bouton doré */
button.cta-gold:hover {
  transform: scale(1.08);
  box-shadow: 0 0 15px rgba(255, 215, 0, 0.8);
}

/* Animation dorée pulsante */
@keyframes pulse-gold {
  0% {
    transform: scale(1);
    box-shadow: 0 0 0 rgba(255, 215, 0, 0.4);
  }
  50% {
    transform: scale(1.05);
    box-shadow: 0 0 12px rgba(255, 215, 0, 0.8);
  }
  100% {
    transform: scale(1);
    box-shadow: 0 0 0 rgba(255, 215, 0, 0.4);
  }
}

/****************/


footer#gameFooter {
  text-align: center;
  font-size: 0.85rem;
  color: #666;
  padding: 1rem 2rem;
  border-top: 1px solid #ccc;
  margin-top: 4rem;
  background-color: #f9f9f9;
}
footer#gameFooter p {
    font-size: .9rem;
    line-height: 1.6; 
    margin: 1rem 0;
    color: gray;
    font-family: 'Arial', sans-serif;
}

footer#gameFooter a {
	font-weight: bold;
  color: #882584;
  text-decoration: none;
}

footer#gameFooter a:hover {
  text-decoration: underline;
}

.version-note {
  margin-top: 2rem;
  font-size: 0.9rem;
  font-style: italic;
  color: #777;
}

.bold {
    font-weight: bold;
}

.center {
    text-align: center !important;
}

/****************/
#debugMenu {
	display: none;
    text-align: center;
    position: fixed;
    bottom: 1rem;
    right: 1rem;
    max-width: 90%;
    max-height: 479px;
    width: 450px; 
    background: white;
    border: 2px solid rgb(136, 37, 132);
    padding: 1rem;
    z-index: 9999;
    box-shadow: 0 0 20px rgba(0,0,0,0.25);
    border-radius: 8px;
}
#debugMenu h3 {
	padding: .75rem;
}
#debugContent {
    background: #f7f7f7;
    max-height: 291px;
    overflow-y: auto;
}
div#debugMenu p {
    margin: 0;
}
#debugToggle { 
	position: fixed;
    bottom: 1rem;
    right: 1rem;
    background: #882584;
    border: 1px solid #ccc;
    padding: 0rem;
    height: 50px;
    width: 50px;
    font-size: 2rem;
    line-height: 3rem;
    border-radius: 50%;
    z-index: 9999;
}