body {
    font-family: sans-serif;
    margin: 0;
    padding: 0;
    background-color: #f0f0f0;
}
*:disabled {
  background-color: orange;
  font-weight:bold;
  color: linen;
  opacity: 1;
}

header {
    background-color: #333;
    color: #fff;
    padding: 20px;
	box-sizing: border-box;
	display:flex;
	flex-wrap: wrap;
	justify-content:space-evenly;
	height:95px;
	box-shadow: 0 0px 10px rgba(51, 51, 51, 1);
}
header a {
	font-weight:bold;
}

h1 {
  font-size: 3rem;
  color: #333;
  text-align: center;
  margin: 0;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
  position: relative;
  background: linear-gradient(to top, orange, white);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
h1 span {
  font-size: 1.5rem;
  color: white;
  vertical-align: middle;
}

.container {
    position: relative;
    padding: 20px;
    border: 2px solid #00FF00; /* Couleur verte néon pour la bordure extérieure */
    box-shadow: 0 0 20px #00FF00; /* Lueur néon verte */
}

.container::before {
    content: '';
    position: absolute;
    top: -10px;
    left: -10px;
    right: -10px;
    bottom: -10px;
    border: 2px solid #00FF00; /* Couleur verte néon pour la bordure intérieure */
    box-shadow: 0 0 20px #00FF00; /* Lueur néon verte */
    z-index: -1;
}
main {
    padding: 20px;
	box-sizing: border-box;
	display:flex;
	flex-wrap:wrap;
	justify-content:space-between;
}
#main {
	display: flex;
	flex-wrap:wrap-reverse;
    flex-direction: row; /* Disposition des éléments en ligne */
	justify-content:center;
	margin-top:20px;
}
#hi {
	width:30%;
	backdrop-filter: blur(5px);
	background-color:rgba(240,240,240,0.4);
	color:rgba(0,0,0,0.5);
	font-size:1.1em;
	height: 45vh;
	padding:30px;
	box-shadow: -10px 0 10px -5px rgba(0, 0, 0, 0.3);
	order:1;
	flex-grow:1;
	box-sizing: border-box;
}

.presentation {
    text-align: center;
    margin-bottom: 20px;
}


/* Conteneur principal */
.main-container {
	margin:0 auto;
    display: flex;
	flex-wrap:wrap;
    flex-direction: column; /* Disposition des éléments en ligne */
    align-items: center; /* Aligner verticalement les éléments */
    padding: 0px;
	box-sizing: border-box;
	background-image: url('../img/index/background.png');
	background-repeat:no-repeat;
    background-size: auto auto; /* Ajout de cette ligne */
}
.containPrest {
	max-width:1500px;
	margin:0 auto;
    display: flex;
    align-items: center; /* Aligner verticalement les éléments */
	justify-content:space-between;
    padding: 0px;
	box-sizing: border-box;
	margin-bottom:20px;
	margin-top:20px;
}


/* Section gauche (photos) */
.photos-section {
    display: flex;
	flex-wrap:wrap;
	/* Marge à droite pour séparer des autres sections */
	max-width:450px;
	justify-content:center;
	margin-bottom:30px;
	gap:10px;
}

.photos-section img {
    background-color:white;
	padding:10px;
	border-radius: 5px;
	box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.2);	
}
.photos-section img.vignette:hover {
	animation: pulsating-shadow-vignettes 0.8s;
	animation-fill-mode: forwards;
	transform: translateY(-5px); /* Déplace l'image de 10 pixels vers le haut */
	filter: drop-shadow(0 0 5px orange);
}


/* Section droite (formulaire) */
.inscription-section {
	max-width: 440px;
    background-color: #fff;
    padding: 20px;
    border-radius: 5px;
    box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.1);
	margin-bottom:20px;
	box-sizing: border-box; /* Inclure le padding dans la largeur */

}

.inscription-section form {
  max-width: 400px;
  margin: 0 auto;
  padding: 20px;
  border: 1px solid #ccc;
  border-radius: 3px;
  box-sizing: border-box;
  border:none;
}

label {
  display: inline-block;
  width: 130px;
 
  margin-bottom:10px;
  font-size:0.9em;
  margin-top:4px;
  color: #999;
}

input {
  padding: 5px;
  border: 1px solid #ccc;
  border-radius: 3px;
  margin-bottom:5px;
  border-radius: 10px;
  background-color:#f5fcff;
}

.inscription-section input[type="submit"] {
  background-color: #4CAF50;
  color: white;
  padding: 10px 20px;
  border: none;
  border-radius: 3px;
  cursor: pointer;
}

/* Style de base du conteneur */
.toggle-container {
  display: flex;
  gap:10px;
  position: relative;
  width: 100%;
  height: 25px;
  margin: 10px 0;
}

/* Style du bouton bascule */
.toggle-switch {
  position: absolute;
  top: 0;
  left: 0;
  width: 25px;
  height: 25px;
  background-color: #ccc;
  transition: background-color 0.3s ease;
}

/* Style du bouton bascule lorsqu'il est activé */
.toggle-container input:checked ~ .toggle-switch {
  background-color: orange;
}

/* Style du libellé */
.toggle-label {
  margin-left: 20px;
  margin-top: 2px;
  font-weight: bold;
  user-select: none;
}


.step {
  display: none; /* Hide steps initially */
  text-align:left;
}
.step.active {
  display: block; /* Show the active step */
  animation: glitch-animation 0.4s linear 1;
}
.hidden {
  display: none;
}
@keyframes glitch-animation {
  0% { transform: translateX(15%); /* Reset to center */
    filter: blur(7px); /* Add blur effect */ } /* Start with no displacement */
  100% {
    transform: translateX(0); /* Reset to center */
    filter: blur(0px); /* Add blur effect */
 }
}

#login-modal {
	transform: translateY(100px); /* Initial position off-screen */
	animation: bounceIn 0.2s ease-in-out both; /* Animation properties */
}
@keyframes bounceIn {
  0%, 100% { transform: translateY(0); } /* Start and end at original position */
  20% { transform: translateY(-20px); } /* Bounce up */
  50% { transform: translateY(-40px); } /* Bounce down */
  80% { transform: translateY(-20px); } /* Bounce up */
  90% { transform: translateY(10px); } /* Bounce up */
}
.modal {
  display: none;
  justify-content: center;
  align-items: center;
  position: fixed;
  z-index: 1;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.3); /* Black w/ opacity */
  z-index: 1000;
  
}
.modal-content {
  overflow-y: auto; /* Affiche la barre de défilement verticale si nécessaire */
  scrollbar-width: thin; /* Rend la barre de défilement plus fine */
  scrollbar-color: #888 #f1f1f1; /* Couleurs de la barre de défilement */
  background-color: #fefefe;
  margin: 5% auto;
  padding: 20px;
  width: 400px; /* Adjust as needed */
  min-width:200px;
  border:none;
  border-radius: 10px;
  box-shadow: 0px 0px 20px rgba(0, 0, 5, 0.3);
	text-align:center;
	max-height:1160px;
}
/* Styles pour la barre de défilement WebKit (Chrome, Safari, Opera) */
.scrollable-container::-webkit-scrollbar {
  width: 8px; /* Largeur de la barre de défilement */
}
.scrollable-container::-webkit-scrollbar-track {
  background-color: #f1f1f1; /* Couleur de la piste de défilement */
}

.scrollable-container::-webkit-scrollbar-thumb {
  background-color: #888; /* Couleur de la poignée de défilement */
  border-radius: 4px; /* Arrondit les coins de la poignée */
}

.scrollable-container::-webkit-scrollbar-thumb:hover {
  background-color: #555; /* Couleur de la poignée au survol */
}
/* Styles pour le contenu */



.close {
  color: #aaa;
  float: right;
  font-size: 28px;
  font-weight: bold;
}
.close:hover,
.close:focus {
  color: black;
  text-decoration: none;
  cursor: pointer;
}
#connect-form input {
 margin-bottom:5px;
 text-align:center;	
 box-sizing: border-box;
}

.center_bulles {
	display:flex;
	flex-wrap:wrap;
	justify-content:center;
	padding:20px;	
}
.bulles {
	display:flex;
	flex-wrap:wrap;
	gap:20px;
	justify-content:center;
}
.bulle {
	width:100%;
	min-width:250px;
	max-width:800px;
	display:flex;
	flex-wrap:wrap;
	gap:10px;
	align-items:center;
	justify-content:center;
	flex-grow:1;
	transition: transform 0.3s ease;
}
.bulle:hover img {
  transform: translateY(-5px); /* Déplace l'image de 10 pixels vers le haut */
  filter: drop-shadow(0 0 5px orange);
}

.bulle div.text {
	width:70%;
	min-width:250px;
	flex-grow:1;
}
.detail-section {
	width:100%;
	box-sizing: border-box;
	margin-bottom:90px;
		display:flex;
	flex-direction:column;
	justify-content:center;
	box-shadow: 0 0px 10px rgba(51, 51, 51, 1);
	
}
.detail-section section {
	background-color:#333;
	/*padding:20px;*/
	color:gray;
	border-top:2px solid orange;
	border-bottom:2px solid orange;

}
.detail-section section h3 {
	color:white;
}

.button {
  /* Base styles */
  display: block;
  margin-top: 15px;
  padding: 15px 30px; /* Adjust padding as needed */
  color: #fff;
  font-weight: bold;
  font-size: 1.2em;
  text-decoration: none;
  text-align: center;
  border: none; /* Remove default border */
  border-radius: 50px; /* Create a rounded button */
  background-image: linear-gradient(to right, #ff9900, #ff6600); /* Orange background gradient */
  background-position: center;
  background-size: cover;
  transition: background-size 0.5s ease; /* Smooth background shift on hover */
  cursor: pointer; /* Indicate clickable area */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Add a subtle shadow */
}
/* Hover effect */
.button:hover {
  background-position: left; /* Shift background gradient to left on hover */
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3); /* Increase shadow intensity */
  animation: pulsating-text 0.8s ease-in-out infinite, pulsating-shadow 2s ease-in-out infinite;																						
}




.right {
	display:flex;
	justify-content:right;
}
.center {
	display:flex;
	justify-content:center;
}


.button2 {
  /* Base styles */
  display: block;
  margin-top: 15px;
  padding: 10px 15px; /* Adjust padding as needed */
  color: #fff;
  font-weight: bold;
  font-size: 1.2em;
  text-decoration: none;
  text-align: center;
  border: none; /* Remove default border */
  border-radius: 50px; /* Create a rounded button */
  background-image: linear-gradient(to right, #ff9900, #ff6600); /* Orange background gradient */
  background-position: center;
  background-size: cover;
  transition: background-size 0.5s ease; /* Smooth background shift on hover */
  cursor: pointer; /* Indicate clickable area */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Add a subtle shadow */
}


.blink {
	  animation: pulsating-text 1.2s ease-in-out infinite, pulsating-shadow 2.4s ease-in-out infinite;
}
.blink:hover {
	  animation: pulsating-text 0.6s ease-in-out infinite, pulsating-shadow 1.4s ease-in-out infinite;
}
/* Optional: Add an outline on focus */
.button:focus {
  outline: none; /* Remove default outline */
  box-shadow: 0 0 0 2px #ff9900; /* Add an orange outline */
}
 .button:active {
     box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3); /* Increase shadow intensity */
	 
	 
}
@keyframes pulsating-shadow {
  0% {
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  }
  50% {
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3);
  }
  100% {
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  }
}
@keyframes pulsating-shadow-vignettes {
  0% {
    box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.2);
  }
  100% {
    box-shadow: 0px 0px 25px rgba(255, 255, 255, 0.4);
  }
}
@keyframes pulsating-text {
  0% {
    text-shadow: 0 0 0 #fff; /* Remove text shadow */
  }
  50% {
    text-shadow: 0 0 10px #ff9900; /* Add a large orange text shadow */
  }
  100% {
    text-shadow: 0 0 0 #fff; /* Remove text shadow */
  }
}
.errors.visible {
  animation-name: blink;
  animation-duration: 0.7s;
  animation-iteration-count: 3;
}
@keyframes blink {
  0%,
  50%,
  100% {
    opacity: 0.8;
  }
  25%,
  75% {
    opacity: 0.5;
  }
}

.vignette {
  max-width: 100px; /* 20% de la largeur de la fenêtre */
  max-height: 100px; /* Même hauteur que la largeur pour conserver les proportions */
  object-fit: contain; /* Pour s'assurer que l'image reste dans son conteneur */
}
.photos-container {
  display: flex;
  max-width: 100%;
  align-items: center;
}

/* Responsive pour les petits écrans */
@media (max-width: 768px) {
    .inscription-section {
        width: 85%; /* Prendre toute la largeur */
    }
	  h1 {
		font-size: 2em; /* Adjust font size for smaller screens */
	  }

	  h2 {
		font-size: 1.5em; /* Adjust font size for smaller screens */
	  }
}

.mini-text {
	font-size:0.75em;
}
.msg_valid {
	margin:0 auto;
	background-color:#91bd8b;
	border: 1px dotted white;
	color:white;
	font-weight:bold;
	text-align:center;
	padding:10px;
	margin-bottom:10px;
}

.msg_invalid {
	margin:0 auto;
	background-color:#dd6e6b;
	border: 1px dotted white;
	color:white;
	font-weight:bold;
	text-align:center;
	padding:10px;
	margin-bottom:10px;
}
.msg_question {
	margin:0 auto;
	background-color:rgba(0, 86, 179, 0.4);
	border: 1px dotted white;
	color:white;
	font-weight:bold;
	text-align:center;
	padding:10px;
	margin-bottom:10px;
}

p {
  font-family: 'roboto', sans-serif;
}
a, a:visited {
	color:orange;
	text-decoration:none;
}
a.button {
	color:white;
}

h2, .h2 {
  margin: 0.83em 0; /* Inherit from <h2> */
  font-size: 1.3em; /* Inherit from <h2> */
  font-weight: bold; /* Inherit from <h2> */
  line-height: 1.3; /* Inherit from <h2> */
  text-shadow: 0 0 5px rgba(255, 255, 255, 0.3);
  text-align:center;
	background: linear-gradient(to right, black, #333);
	padding: 15px;
	border-radius: 5px;
    box-shadow: 0 0px 8px rgba(255,165,0, 0.5); /* Darker blue drop shadow */
  color: #fff;
  letter-spacing: 0.07em; /* Add a subtle letter-spacing */
  font-family: "roboto", sans-serif;
}
footer {
    background-color: #333;
    color: #fff;
    text-align: center;
    padding: 20px;
	position: relative; /* Positionnement relatif par rapport au flux normal */
	bottom: 0; /* Placer le bas du footer en bas de la page */
	width: 100%; /* Prendre toute la largeur de la page */
	flex-shrink: 0; /* Empêcher le footer de se réduire */
	box-sizing: border-box;
	height:90px;
	margin-top:90px;
	position:fixed;
	
	box-shadow: 0 0px 8px rgba(255, 165, 0, 0.5);
}