:root{
   --main-color: #DAB776;
}
@font-face {
   font-family: 'GreatVibes';
   src: url(".\\fonts\\GreatVibes\\GreatVibes.ttf") format('truetype');
   font-weight: normal;
   font-style: normal;
}
 
@font-face {
   font-family: 'Sacramento';
   src: url(".\\fonts\\sacramento\\Sacramento-Regular.ttf") format('truetype');
   font-weight: normal;
   font-style: normal;
}
 
body {
   margin: 0;
   background-image: url("..\\images\\background.jpg");
   background-repeat: no-repeat;
   background-attachment: fixed;
   background-position: center;
   background-color: black;
   background-size: cover;
   justify-content: center;
   min-height: 100vh;
   align-items: center;
   display: flex;
   font-family: "Georgia";
   font-size: 1.0rem;
}
 
h1 {
   color: white;
   text-align: center;
   text-shadow: 4px 4px 5px rgba(0, 0, 0, 1.0);
   font-family: 'GreatVibes';
   font-size: 3.0rem;
}
 
.divMain {
   position: relative;
}
 
.containerAccueil, .containerContent, .containerFooter {
   position: relative;
   width: 90%;
   margin: 20px 20px 20px auto;
   padding: 20px;
   border-style: solid;
   border-radius: 20px;
   background: rgba(0, 0, 0, 0.354);
   box-shadow: 0 0 20px rgba(0, 0, 0, 0.9);
}
 
.containerContent {
   background: rgba(0, 0, 0, 0.7);
}
 
.containerFooter {
   border-style: solid;
   border-color: black;
   background: rgba(0, 0, 0, 0.5);
   box-shadow: 0 0 20px rgba(0, 0, 0, 1.0);
   color: white;
   text-align: center;
}
 
#cercles {
   position: absolute;
   top: 0;
   left: 50%;
   transform: translateX(-50%);
   width: 100%;
   height: 100%;
}
 
.cercle-cliquable {
   position: absolute;
   border-radius: 50%;
   border-style: solid;
   border-width: 6px;
   display: flex;
   background-color: rgba(255, 255, 255, 1.0);
   text-shadow: 1px 1px 1px white;
   align-items: center;
   justify-content: center;
   text-align: center;
   color: black;
   font-family: 'GreatVibes';
   font-size: 1.7rem;
   font-weight: bold;
   text-decoration: none;
   border-color: var(--main-color);
   box-sizing: border-box;
   transition: border-color 0.3s, background-color 0.3s, transform 0.3s;
}
 
.cercle-cliquable:hover {
   transform: scale(1.1);
   background-color: var(--main-color);
   border-color: white;
}
 

/* Style pour chaque bloc paragraphe */
.paragraph-block {
   display: flex;
   align-items: top;
   margin-bottom: 20px;
   border-radius: 5px;
   gap: 0px; /* Espacement entre image et texte */
}
 
.paragraph-block img {
   width: 350px; /* Taille fixe pour l’image */
   margin: 20px;
   max-height: 500px;
   height: auto;
   vertical-align: top;
   border-radius: 5px;
   object-fit: cover; /* Pour que l’image remplisse bien son espace */
}
 
.paragraph-block {
   flex: 1; /* Prend le reste de l’espace disponible */
}
 
.text-content {
   line-height: 1.6;
   color: black;
   padding: 20px 20px 20px 0px;
}
 
h2 {
   font-family: 'GreatVibes';
   font-size: 3rem;
   color: black;
   text-align: left;
}
 
h3 {
   font-family: 'GreatVibes';
   font-size: 2rem;
   color: black;
   text-align: left;
}
   
.paragraph-block h2 {
   font-family: 'GreatVibes';
   font-size: 2rem;
   color: #ffffff;
}
 
.paragraph-block p {
   text-align: justify;
   margin: 0 20px 20px 0px;
   line-height: 1.4;
   color: #f9f9f9;
}
 

#content-container {
   padding: 10px;
   border-radius: 10px;
}
 
form {
   flex: 90%; /* Prend le reste de l’espace disponible */
   display: flex;
   width: 100%;
   flex-direction: column;
   gap: 10px;
   padding: 10px -20px 10px 10px;
}
 
input,
textarea,
button {
   flex: 1; /* Prend le reste de l’espace disponible */
   padding: 4px;
   font-size: 16px;
   border: 1px solid #ccc;
   border-radius: 4px;
}
 
textarea {
   min-height: 150px;
   resize: none;
}
 
button {
   background-color: rgba(22, 22, 23, 0.761);
   color: white;
   border: none;
   border-radius: 4px;
   font-weight: normal;
   cursor: pointer;
   transition: color 0.3s, background-color 0.3s, padding 0.3s;
   font-size: 1rem;
}
 
button:hover {
   background-color: black;
   padding: 10px;
   color: var(--main-color);
   font-weight: bold;
}
 
.image-container {
   position: relative;
   display: flex;
   justify-content: center;
   width: 100%;
}
 
#nav-image {
   max-width: 100%;
   height: auto;
   opacity: 100%;
   display: block;
}
 
#image-title {
   width : 80px;
   height: 80px;
   border-radius: 50%;
   background-color: white;
   padding: 5px;
   border-style: solid;
   border-width: 5px;
   border-color: black;
   margin: 0 20px 0 0;
   float: left;
}
 
.bouton-retour {
   position: absolute;
   font-size: 1rem;
   top: 0px;
   left: 0px;
   background-color: #80808080;
   color: white;
   padding: 5px 50px;
   border-radius: 20px;
   text-decoration: none;
   transition: color 0.3s, background-color 0.3s, transform 0.3s;
   z-index: 1000;
}
 
.bouton-retour:hover {
   background-color: black;
   transform: scale(1.05);
   color: var(--main-color);
}
 
.footer-menu {
   display: flex;
   justify-content: center;
   gap: 10px;
   font-size: 14px;
}
 
.separator {
   text-decoration: none;
   color: white;
}
 
.menu-item {
   text-decoration: none;
   color: white;
   transition: color 0.3s;
}
 
.menu-item:hover {
   text-decoration: underline;
   color: var(--main-color);
}
.menu-item.active {
   text-decoration: underline;
   color: black; /* Couleur pour l'élément actif */
   font-weight: bold;
}
 
.error {
   color: red;
   font-weight: bold;
   margin: 10px;
   font-size: 1em;
   display: none;
}
 
.success {
   color: black;
   font-weight: bold;
   margin: 10px 0;
   font-size: 1em;
   display: none;
}
 
#captchaExpected {
   display: none;
}
 
.captcha-container {
   margin-bottom: 15px;
   flex: 1; /* Prend le reste de l’espace disponible */
}
 
.captcha-images {
   display: flex;
   justify-content: center;
   flex-wrap: wrap;
   gap: 10px;
   padding: 20px 0 0 0;
}
 
.captcha-image {
   object-fit: cover;
   width: 130px;
   height: auto;
   cursor: pointer;
   border: 4px solid transparent;
   border-radius: 5px;
}
 
.captcha-image.selected {
   border-color: var(--main-color);
   transform: scale(1.1);
}
 
#captcha-message{
   padding: 0, 0, 0, 20px;
}
 
@media (max-width: 600px) {
   .containerAccueil, .containerContent, .containerFooter {
      max-width: 90%;
   }
   #nav-image {
      width:100%;
   }
   input,
   textarea,
   button {
       font-size: 14px;
   }
   textarea {
      min-height: 100px;
      font-size: 14px;
      resize: none;
   }
   h1 {
      font-size: 2rem;
   }
   .text-content {
      padding: 20px;
   }
   h3 {
      font-size: 2rem;
      padding: 0 0 20px;
      margin: 0px;
   }
   .cercle-cliquable {
      font-size: 1.2rem;
   }
   .paragraph-block {
      flex-direction: column; /* Image au-dessus sur mobile */
   }
   .paragraph-block h2{
      margin: 0 0 0 20px;
   }  
   .paragraph-block{
      padding: 0px;
   }
   .paragraph-block img {
       width: 91%; /* Image pleine largeur sur mobile */
   }
   #fMenu {
      display: none;
   }
}