@import url('https://fonts.googleapis.com/css2?family=Merienda:wght@300&display=swap');

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  width: 100%;
  margin: 0;
  padding: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  font-family: "Roboto-Regular",Arial,sans-serif;
  background-color: white;
  color: #5b5b5b;
  font-size: 1.2rem;
  overflow-x: hidden;

}


/* ************************************** header style ***********************************************/
#menu {
  display: flex;
  align-items: center;
  justify-content: space-around;
  height: 16vh;
  margin-bottom: 1rem;
}

#menu, 
#menu-icon i,  
#menu nav ul li a {
  color: #0066cc;
}

.logo-container {
  max-width: 180px;
  height: auto;
  margin-top:30px;
  /*margin: 1.7rem 6rem 0 0;*/
  /*margin: 0;
  margin-left:0;*/
  /*margin: 0 auto; /* Centering the title */
  /*text-align: center;*/
}

.logo-container img {
  width: 100%;
  height: auto;
  margin: 0; /* Remove any margin around the logo */
}

.header-slogan {
  font-family: 'Merriweather', serif;
  color: #5a7391; 
  text-align: center;
  font-size: 1.2rem;
  font-style: italic;
  margin-top: 0;
}

.header-title {
  display: none;
  margin: 25px 55px 0 0;
  
}

.header-title h1 {
  font-family:'Hammersmith One', sans-serif; /*'Lobster', cursive*/
  font-size: 34px;
  margin-bottom: 0; 
  text-align: center;
  color: #0066cc;
}

#menu-icon {
  background: none;
  border: none;
  font-size: 1.5rem;
  cursor: pointer;
}

#menu-icon i {
  font-size: 2.2rem;
  padding-right: 20px; /* Adds space between the icon and the right edge */
}

/* Styles pour le menu déroulant en mode modal */
.none {
  position: fixed;  
  top: 0;
  left: 0;  
  width: 0; 
  height: 65vh; 
  background-color: white;
  overflow: hidden;  
  transition: width 0.3s ease-in-out;  
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;  
  align-items: center;
  z-index: 999;  
  padding: 0;  
  border: none;
}

#menu ul.open {
  width: 40%;  
}

#menu ul li {
  list-style: none;  
  font-size: 1.5rem;
  padding: 0; 
  margin: 0;
}

#menu ul li a {
  color: #0066cc;
  text-decoration: none;
  font-size: 1.1rem;
}

#menu ul li a:hover {
  color: blue;
}

ul.display-none {
  display: none; /* Cache le menu initialement */
}

#menu ul li:first-child {
  font-size: 1.1rem;
  color: red;
  cursor: pointer;
}

/* Style for the title when the menu is open */
.small-title {
  font-size: 1.2rem;  /* Reduces the title size */
  transform: translateX(-2%);  /* Pushes the title to the left */
  transition: all 0.3s ease-in-out;  /* Adds smooth animation for the transition */
  white-space: normal;  /* Allows the title to wrap onto multiple lines */
  word-wrap: break-word;  /* Breaks the words if they are too long */
  text-align: center;  /* Centers the title */
}




/********************************** HeaderPage page ****************************/
.header-for-page {
  margin-bottom: 0;
  position: fixed;  
  top: 0;          
  width: 100%;     
  z-index: 1000; 
  background-color: white;
  box-sizing: border-box; 
  border-bottom: 1px solid lightgrey; 
}

.header-for-page .logo-container {
  width: 150px;
  height: 108px; 
  margin-top: -25px;
  overflow: hidden; 
  
}

.header-for-page .logo-container img {
  width: 100%;
  height: auto;
  /*overflow: hidden;*/
  object-fit: contain; 
}

.header-for-page {
  height: 15vh;
}

#menu .submenu {
  display: none; 
  position: absolute; 
  background-color: white; 
  z-index: 1000; 
}

#menu li:hover .submenu {
    display: block; 
}

#menu .submenu li.partner-plus {
  display: none;
}



/******************************************************** Home page ************************************************/
/* Container holding the image */
.home-page {
  display: flex;
  flex-direction: column; /* Default for smaller screens */
  align-items: center;
  font-size: 1.2rem;
}

.image-asso {
  width: 100%; 
  height: 250px; 
  overflow: hidden; 
  margin-bottom: 0;
  position: relative; 
}

/* Image inside the container */
.image-asso img {
  position: absolute; 
  width: 100%; /* Full width */
  height: auto; 
}

.home-page .site-title h2 {
 font-family:'Hammersmith One', sans-serif; /*'Lobster', cursive*/
  font-size: 34px;
  /*margin-bottom: 0; */
  text-align: center;
  color: #0066cc;
  margin: 0 auto; /* Centrer horizontalement si besoin */
  display: block; 
}

.site-title p.slogan{ 
  font-family: 'Merriweather', serif;
  color: #5a7391; 
  text-align: center;
  /*font-size: 1.2rem;*/
  font-style: italic;
 }

 .site-title .association-presentation {
  padding: 20px; 
  border-radius: 8px; 
  /*font-family: 'Lora', serif;*/
  /*font-style: italic;*/
  color: #0066cc;
  line-height: 1.6; 
  font-size: 1.4rem;
  /*display: flex;
  flex-direction: column;
  align-items: center; 
  justify-content: center;*/ /* Garde le texte aligné en haut */
  /*text-align: justify; */
  /*text-justify: inter-word;*/ 
  padding-bottom: 0;
  width: 98%;
  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.4); 
  border-radius: 8px;
  background-color: #f9f9f9; 
  margin: auto;
}

.shadow {
  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.4); 
  border-radius: 8px;
  background-color: #f9f9f9;  
  padding: 1.5rem; 
}

.home-page .actuality-section {
  width: 85%;
  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.4); 
  border-radius: 8px;
  background-color: white;  
  margin: auto;
  padding: 1.5rem;
  margin-top: 2rem;
  margin-bottom: 2rem;
}
.site-title .association-presentation p {
  text-align: center;
}

.home-page section, 
.all-actualities-page section {
  padding: 2rem;
}

.latest-news {
  text-align: center;
  margin-bottom: 20px;
  display: flex;
  flex-direction: column;
}

.latest-news img {
  width: 100%;
  max-width: 80%;
  margin: 0 auto;
  display: block;
}

.home-page .event-section .article-info {
  width: 98%;
  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.4); 
  border-radius: 8px;
  background-color: #f9f9f9;  
  margin: auto;
  padding: 1.5rem;
}

.home-page section h2, 
.all-actualities-page section h2 {
  color: #272727;
  font-size: 25px;
  position: relative;
  display: inline-block;
  margin-bottom: 1.5rem; 
}

.home-page .card-actuality, 
.all-actualities-page .card-actuality {
  display: flex;
  flex-direction: column;
  background-color: #f5f5f5;
  width: 100%;
  align-items: center;
  margin-top: -1rem;
}



.home-page .card-actuality a, 
.all-actualities-page .card-actuality a {
  text-decoration: none;
}


.home-page .card-actuality .card, 
.all-actualities-page .card-actuality .card {
  transition: transform 0.3s ease; 
}

.home-page .card-actuality .card:hover, 
.all-actualities-page .card-actuality .card:hover {
  transform: scale(1.05); 
}

.home-page .card-actuality article {
  with: 75%;
}

.home-page .card-actuality article, 
.all-actualities-page .card-actuality article {
  margin-bottom: 2rem;
}

.home-page .card-actuality h2, 
.all-actualities-page .card-actuality h2 {
  text-align: center;
}

.card-img-top {
  height: 230px; 
  object-fit: cover; 
}

.home-page .card-actuality article h3,
.all-actualities-page .card-actuality h3, 
.card-margin h3 {
  /*color: #5b5b5b;*/
  font-size: 20px;
}



.home-page section h3 {
  color: #0066cc; 
  margin-bottom: 1rem;
  font-size: 23px;
}

/* Icon */
.fas 
{
  color: #0066cc;
  font-size: 20px;
}

.icone {
  text-align: center;
  position: relative;
  width: 140px;
  margin: auto;
  bottom: 21px;
}
.fa-circle
{
  font-size:14px;
}

.icone:before {
  content: "";
  left: 0;
  right: 0;
  height: 1px;
  background: #ebebeb;
  position: absolute;
  top: calc(50% - 0px);
}
.icone span {
  display: inline-block;
  padding: 0 5px;
  padding-bottom: 3px;
  background: white;
  position: relative;
  z-index: 1;
  border-radius: 50%;
}

.event-submit-p {
  margin-top: 0.8rem;
}

.event-submit {
  width: 124px;
  height: 47px;
  background-color: #0066cc;
  border-radius: 3px;
  font-size: 20px;
  color: white;
  line-height: 55px;
  text-align: center;
  padding: 0.5rem 1.5rem 0.5rem 1.5rem;
  text-decoration: none;
}

.hi {
  background-color: #f5f5f5;
  width: 100%;
  display: flex;
}

.content-wrapper {
  width: 100%; 
  max-width: 700px; 
  margin: 0 auto;
  padding: 0 1rem; 
}

.actuality-section img {
  max-height: 270px;
  width: auto;
  display: block;
  margin: 0 auto; 
}

.event-section h3 {
  margin-top: 0.7rem;  
}

.home-excerpt {
  margin-top: 1rem;
}

.partner-section {
  width: 100vw;
}

.partenair-info {
  width: 100vw;
  display: flex;
  flex-wrap: wrap; 
  justify-content: center; 
  gap: 2rem;
}

.partenair-info .part-img {
  width: 250px; 
  margin-bottom: 1rem; 
}

.partenair-info .part-img img {
  width: 100%; 
  height: auto; 
}

.animation-section {
  display: none;
}

.back-color {
  display: none;
}

.carousel-control-prev-icon,
.carousel-control-next-icon {
  background-color: rgba(0, 0, 0, 0.5); /* Assure que les icônes sont visibles */
  border-radius: 50%;
  padding: 10px;
}

.carousel-indicators button {
  background-color: rgba(0, 0, 0, 0.5) !important; /* Forcer la couleur des boutons non actifs */
  border: none !important;
  width: 10px !important;
  height: 10px !important;
  border-radius: 50% !important;
  margin: 0 5px !important;
}

.carousel-indicators .active {
  background-color: #000 !important; /* Forcer la couleur du bouton actif */
}

.carousel-control-prev {
  left: -55px !important; /* Décale l'icône de gauche un peu vers l'extérieur */
}

.carousel-control-next {
  right: -55px !important; /* Décale l'icône de droite un peu vers l'extérieur */
}

/* Décaler les boutons indicateurs vers le bas */
.carousel-indicators {
  margin-bottom: -10px !important; /* Ajoute un espace entre les boutons indicateurs et le texte */
}

/* Ajuste les indicateurs */
.carousel-indicators button {
  width: 15px !important; 
  height: 15px !important;
  margin-bottom: -10px !important; 
}

.home-page .style-sep {
  display: flex;
  flex-direction: column;
  gap: 2rem;
}





/******************************* message success page ****************************/
.message-success-container, .error-page {
  text-align: center; 
  padding: 50px; 
}

.message-success-container p a, 
.donation-success-container a, 
.about-page .btn-about a:last-child, 
.legacy-page .btn-about a:last-child, 
.error-page a, 
.success-message a.button, 
.about-button  {
  display: inline-block; 
  margin-top: 20px; 
  padding: 10px 20px; 
  background-color: #0066cc; 
  color: #fff; 
  text-decoration: none; 
  border-radius: 5px;
}


.message-success-container p , 
.donation-success-container p, 
.success-message p, 
.eventRegistration-success p, 
.error-page p {
  font-size: 1.4rem;
}

.message-success-container p a, 
.donation-success-container a, 
.success-message a, 
.eventRegistration-success p a, 
.error-page a {
  font-size: 1.4rem;
}


/********************************** News page ********************************/
.news-section .responsive-news{
  display: flex;
  flex-direction: column;
  background-color: #f5f5f5;
  margin-top: 10.5rem;
  gap: 2rem;
  justify-content: center; 
  align-items: center;
}

.new-page-detail .news-item, 
.new-page-containair .news-item {
  width: 90%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin: 1rem;
  padding: 1rem; 
  border: 1px solid #ddd; 
  border-radius: 4px; 
  background-color: white;
}

.news-item h2 {
  font-size: 1.5rem; 
  margin-bottom: 0.5rem; 
  text-align: center;
}

.news-item img {
  max-width: 100%;
  height: auto;
  margin-bottom: 1rem; 
  display: block; 
  max-height: 300px; 
  object-fit: cover;
  margin-left: auto;
  margin-right: auto; 
}
.news-item p {
  margin-bottom: 1rem; 
}

.news-item .youtube-video iframe {
  width: 100%;
  height: auto; 
  aspect-ratio: 16/9;
}

.news-section p {
  font-size: 1.2rem; 
  text-align: center; 
  margin-top: 2rem; 
}
.news-section .P-excerpt {
  font-weight: 600;
}

.art h2 {
margin-bottom: 1rem;
}
.art .date {
  font-style: italic;
  font-size: 1rem;
  padding: 0;
  margin: 0;
}

.header-news-page {
  top: 0; 
}

.news-section .responsive-news article { 
  width: 80%;
  display: flex;
  flex-direction: column;
  border: 1px solid grey;
  justify-content: center;
  align-items: center;

  }

.white .news-page-article {
  background-color: white;
  padding: 1rem;
  border-radius: 7px;
  font-size: 1.2rem;
}

.news-navigation {
  margin-top: 20px;
  display: flex;
  justify-content: space-between;
}

.button {
  padding: 10px 20px;
  background-color: #007bff;
  color: white;
  text-decoration: none;
  border-radius: 5px;
  margin: 2rem;
}

.button.disabled {
  background-color: #ccc;
  pointer-events: none;
}

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

.news-page-article .news-h2 {
  margin-top: 2rem;
}

.all-actualities-page {
  width: 100vw;
  background-color: #f5f5f5;
  padding-top: 4rem;
  margin-top: 4.5rem;
  min-height: 100vh;
  display: flex;
  justify-content: center;
}

.all-actualities-page .row-article {
  width: 95%;
}






/****************************** Membership fom page *******************************/
.membership-form {
  /*font-family: 'Merienda', cursive;*/
  /*font-size: 16px;*/
  -webkit-font-smoothing: antialiased;
  display: flex;
  justify-content: center;
  align-items: center;
  align-content: center;
  min-height: 93vh;
  width: 100vw;
  /*background-image: url("../images/renais.jpg");*/
  /*background-size: contain;*/ /* Makes the background image cover the entire area */
  /*background-position: center;*/ /* Centers the image */
  /*background-repeat: repeat;*/ /* Prevents the image from repeating */
  /* margin: 0;*/
  margin-top: 5rem;
  margin-bottom: 4rem;
}

.membership-form .form-member-container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 1rem;
  margin: 2.5rem 1rem 1rem 1rem; 
  width: 97%;
  border-radius: 7px;
  background-color: #60aed166; 
  gap: 1rem;
  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.5);
  
}

.membership-form form legend, 
.membership-form form h2 {
text-align: center;
font-size: 1.5rem;
}

.membership-form form legend.label-question {
  font-size: 1.2rem;
}

.membership-form label {
  display: none;
}

.membership-form form {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 1.4rem;
  width: 90%;
  margin: 1rem;
}

.membership-form form fieldset {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.membership-form form fieldset input, 
.membership-form form fieldset select,
.membership-form form button {
  width: 100%;
  padding: 0.6rem;
  }

.membership-form form button {
  color: black;
  background-color: #e2e3e5;
  font-size: 1.2rem;
}

.membership-form form fieldset.paymentQuestionField, 
.membership-form form fieldset.membershipFeeField {
  display: flex;
  flex-direction: row;
  justify-content: end;
  width: 80%;
}

.membership-form form fieldset.membershipFeeField {
  margin-bottom: 1rem;
}

.alert-message {
  display: none; /* Masqué par défaut */
  background-color: #f8d7da; /* Couleur de fond pour les erreurs */
  color: #721c24; /* Couleur du texte */
  padding: 1rem;
  margin-bottom: 1rem;
  border: 1px solid #f5c6cb; /* Bordure rouge pour les erreurs */
  border-radius: 5px;
}

.membership-form .footer, 
.event-registration-main .footer {
  height: 57px;
}

.foot-hidden {
  display: none;
}



  /*************************  Donation success page  membership success page****************************/
.donation-success-container, 
.success-message, 
.about-page, 
.eventRegistration-success, 
.error-page {
  width: 90%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  margin: 0 auto; 
}



  /************************************ About page *****************************************************/
.overflow {
  overflow: hidden;
}

.about-page-section {
  display: flex;
  flex-wrap: wrap;
  justify-content: center; 
}

.about-block,
.about-block-two,
.about-block-tree,
.about-block-four {
  width: 330px; 
  margin: 20px; 
  padding: 15px;
  border: 1px solid #ddd;
  border-radius: 8px;
}

/* Bloc général */
.about-block {
  background-color: rgb(204, 65, 0); 
  color: white; 
}

.about-block-two {
  background-color: #e7f3ff;
}

.about-block-tree {
  background-color: #34A853; 
  color: white; 
}

.about-block-four {
    background-color: #FBBC05;
    color: black; 
}

/* Accessibility */
.btn-about {
  text-align: center;
}

.about-page-section div.about-block h2,
.about-page-section div h3,
.about-page-section div h4,
.about-page-section div h5 {
  text-align: center;
  font-size: 25px;
}

.about-page-section div h3, 
.about-page-section div h5 {
  text-align: center;
  color: #272727;
}


.about-page-section div.about-block h2, 
.about-page-section .about-block-tree h4  {
  color: white;
}



  /************************************ Legacy policy page ***********************************/
.legacy-page ul {
  list-style: none;
} 
.legacy-page {
  background-color: #f9f9f9;
  font-size: 1.2rem;
  margin-top: 5rem;
}

.legacy-page-div {
  display: flex;
  flex-wrap: wrap; 
  justify-content: space-between; 
}
  

.legacy-page h2, .legacy-page h3, .legacy-page h4, .legacy-page h5, .legacy-page h6 {
  color: #333;
  font-weight: bold;
}

.legacy-page h3, .legacy-page h4, .legacy-page h5, .legacy-page h6 {
  font-size: 19px;
}

.legacy-page h2 {
  text-align: center;
  font-size: 24px;
  padding-top: 1.5rem;
}

.legacy-page section {
  margin: 20px;
  padding: 20px;
  background: white;
  border-radius: 5px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
  flex: 1 1 100%;
}

/* Liens */
.legacy-page a {
  color: #0066cc;
  text-decoration: none;
}

.legacy-page a:hover {
  text-decoration: underline;
}

/* Bouton de retour */
.legacy-page .btn-about {
  text-align: center;
  margin-top: 20px;
}

.legacy-page .about-button {
  background-color: #0066cc;
  color: white;
  padding: 10px 15px;
  border: none;
  border-radius: 5px;
  cursor: pointer;
}

.legacy-page .about-button:hover {
  background-color: #0056b3;
}


/*********************** Modal error **************************************/
#error-message {
  color: red; 
}

.modal {
  display: none; /* Masqué par défaut */
  position: fixed; /* Reste en place */
  z-index: 1; /* Au-dessus du contenu */
  left: 0;
  top: 0;
  width: 100%; /* Plein écran */
  height: 100%; /* Plein écran */
  overflow: auto; /* Ajoute un défilement si nécessaire */
  background-color: rgba(0, 0, 0, 0.4); /* Fond noir avec transparence */
}

.modal-content {
  background-color: #fefefe;
  margin: auto; /* Centré */
  padding: 20px;
  border: 1px solid #888;
  width: 90%; /* Largeur adaptable */
  max-width: 500px; /* Largeur maximale */
  border-radius: 8px; /* Arrondir les coins */
}

.close-btn {
  color: #aaa;
  float: right;
  font-size: 28px;
  font-weight: bold;
}

.close-btn:hover,
.close-btn:focus {
  color: black;
  text-decoration: none;
  cursor: pointer;
}

/* Optionnel : styles pour le texte dans la modale */
.modal-content h2 {
  margin: 0; /* Supprime le margin par défaut */
  text-align: center; /* Centre le texte */
  font-size: 1.4rem;
}




/***************************************** news detail page ********************************************/
.new-page-detail {
  width: 90%;
  margin: auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center; 
  
}

.new-page-detail-container article .article-detail-image {
  width: 200px;
  height: auto; 
}

.new-page-detail-container article .article-detail-image img {
  width: 100%;
  height: auto;  
}

.new-page-detail-container article h2 {
  text-align: center; 
}

.new-page-detail-container article .excerpt {
  font-weight: bold;
  font-size: 1.2rem;
  margin-top: 1rem;  
}

.new-page-detail-container article .date {
  font-style: italic;  
}

.new-page-detail-container article {
  width: 90%;
  margin: auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center; 
  margin-top: 8.2rem;
  padding-top: 1.5rem;
  /*text-align: justify;*/
   
}

.new-page-detail-container article .resp-div {
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.news-b {
  margin-top: 3rem;
}

.new-page-detail-container article .event-detail-content {
  text-align: justify;
}

.new-page-detail-container article .event-detail-content h4 {
  color: #0066cc; 
}




/*********************************** Event registration page **********************************/
.event-registration-main, 
.new-page-detail-container, 
.main  {
  width:100vw;
  display: flex; 
  flex-direction: column;
  justify-content: center;
  align-items: center; 
  min-height: 100vh;
  background-color: #f5f5f5;
} 
.eventRegistration-form, 
.login-form, 
.update-password-form {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
  width: 90vw;
  /*margin: 0;*/
  color: #333;
}
  
/* General form styling */
.eventRegistration-form form, 
.login-form form, 
.update-password-form form {
  width: 100%;
  max-width: 600px; 
  margin: 0 auto; 
  padding: 1rem;
  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1); 
  border-radius: 8px;
  background-color: #f9f9f9; 
}

.eventRegistration-form .hidden-title {
  display: none;
}

/* Styling for the fieldset and labels */
.eventRegistration-form fieldset, 
.login-form form fieldset, 
.update-password-form form fieldset {
  border: none;
  margin-bottom: 1rem;
  padding: 0;
}

.eventRegistration-form legend {
  font-size: 1rem;
  font-weight: bold;
  margin-bottom: 0.5rem;
}

.eventRegistration-form label {
  display: block;
  margin-bottom: 0.5rem;
  font-size: 16px;
}

/* Input fields */
.eventRegistration-form input[type="text"], 
input[type="email"], 
select, 
.login-form form input[type="password"], 
.login-form form input[type="email"], 
.update-password-form form fieldset input[type="password"], 
.update-password-form form fieldset input[type="email"] {
  width: 100%; 
  padding: 0.8rem;
  margin-bottom: 1rem;
  font-size: 1rem;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-sizing: border-box;
}

.eventRegistration-form input:focus, select:focus {
  border-color: #0066cc;
  outline: none;
}

/* Button styling */
.eventRegistration-form button, 
.login-form form button, 
.update-password-form form button {
  width: 100%; 
  padding: 1rem;
  font-size: 1.2rem;
  background-color: #0066cc;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

.eventRegistration-form button:hover, 
.login-form form button:hover, 
.update-password-form form button:hover {
  background-color: #005bb5;
}

.update-password-form form fieldset label {
  display: none;
}

.eventRegistration-form h3 {
  margin-bottom: 2rem;
}

.eventRegistration-form h2, .eventRegistration-form h3 {
  text-align: center;
}


.eventRegistration-form form {
  margin-bottom: 6rem;
}

.eventRegistration-form h2 {
  margin-top: 4rem; 
} 



/******************************* partner page ************************************/ 
.partner-page {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 1rem;
  margin-top: 6rem;
}

.partner-page h2 {
  text-align: center;
  color: #272727;
  font-size: 25px;
  margin-top: 1rem;

}

figure {
  position: relative;
  cursor: pointer;
  align-self: center;
}

figcaption {
  position: absolute;
  visibility: hidden;
  background-color: black;
  opacity: 0.8;
  color: white;
  bottom: 0;
  padding: 1rem;
  text-align: center;
  align-self: center;
}

figure:hover figcaption {
  visibility: visible;
}

.partners-container {
  display: flex;
  flex-wrap: wrap; 
  justify-content: center;
  padding: 0 2rem 0 2rem;
  margin-top: -1.5rem;
}

.partners-container .partner-card {
  flex: 1 1 120px; 
  max-width: 150px; 
  gap: 1rem; 
  display: flex; 
  flex-direction: column; 
  justify-content: center;
  align-items: center;
}

.partners-container .partner-card img {
  width: 100%;
  max-width: 80%;
  margin: 0 auto;
  display: block;
  height: auto;
}




/******************************* Login page ************************************/ 
.login-form form label,
.update-password-form form fieldset label {
  display: none;
}



/******************************* admin home page ************************************/ 
#roleSpecificMessage {
  text-align: center;
  padding: 1rem;
  margin: 1rem;
  font-size: 1.4rem;
  font-weight: bold;
}

/**** News form page **/







/********************************************* Donation Page ***************************/
.donation-list table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 20px;
}

.donation-list table th, table td {
  border: 1px solid #ddd;
  padding: 8px;
  text-align: left;
}



/* Style de l'en-tête du tableau */
.donation-list th {
  background-color: #f4f4f4;
  font-weight: bold;
}

/* Ajout d'une couleur de fond alternée pour les lignes */
.donation-list tbody tr:nth-child(odd) {
  background-color: #f9f9f9;
}

.donation-list tbody tr:nth-child(even) {
  background-color: #fff;
}

/* Ajout d'un effet de survol */
.donation-list tbody tr:hover {
  background-color: #e0e0e0;
}






/************************************** News form page **********************************************/
.news-form {
  width: 80%;
  max-width: 800px;
  margin: 0 auto;
  padding: 20px;
  background-color: #f9f9f9;
  border-radius: 8px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}

.news-form h2, 
.donation-list h2 {
  text-align: center;
  font-size: 26px;
  color: #333;
  margin-bottom: 20px;
}

.news-form form fieldset {
  border: none;
  margin-bottom: 20px;
}

.news-form form legend {
  font-weight: bold;
  color: #333;
  font-size: 16px;
}

/* Labels */
.news-form form label {
  font-size: 14px;
  color: #555;
}

/* Input fields */
.news-form form input[type="text"], 
.news-form form nput[type="url"], 
.news-form form input[type="datetime-local"], 
.news-form form input[type="file"], 
.news-form form textarea {
  width: 100%;
  padding: 10px;
  margin-top: 8px;
  border: 1px solid #ccc;
  border-radius: 4px;
  font-size: 14px;
  color: #333;
}

/* Textarea spécifique */
.news-form form textarea {
  height: 150px;
  resize: vertical;
}

/* Placeholder styles */
.news-form form input::placeholder, 
.news-form form textarea::placeholder {
  color: #aaa;
}

/* Bouton d'envoi */
.news-form form button[type="submit"] {
  background-color: #4CAF50;
  color: white;
  padding: 12px 20px;
  border: none;
  border-radius: 4px;
  font-size: 16px;
  cursor: pointer;
  display: block;
  width: 100%;
  margin-top: 20px;
}

.news-form form button[type="submit"]:hover {
  background-color: #45a049;
}







/*********************************** contact page ****************************/
.contact-page {
  display: flex;
  width:100vw;
  display: flex; 
  flex-direction: column;
  justify-content: center;
  align-items: center; 
  min-height: 96vh;
  margin: 2rem 0 4.7rem 0;
}

.contact-page #contact-form p {
  text-align: center;
}








/******************************* logout success page ************************************/ 
.logout-page #dots::after {
  content: '';
  animation: dots 1s steps(3, end) infinite;
}

@keyframes dots {
  0% {
    content: '.';
  }
  33% {
    content: '..';
  }
  66% {
    content: '...';
  }
  100% {
    content: '';
  }
}








/**************************************** bord member page ***************************************/
.bord-member-form {
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.bord-member-form form {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 90%;
  padding: 2rem;
  background-color: #f9f9f9;
  border-radius: 10px;
  box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1);
}

.bord-member-form h2 {
  text-align: center;
  margin-bottom: 2rem;
  /*font-family: 'Roboto', sans-serif;*/
  padding: 1rem;
}

.bord-member-fieldset {
  border: none;
  padding: 0;
  margin: 0;
}

.bord-member-fieldset fieldset {
  margin-bottom: 20px;
  display: flex;
  flex-direction: column;
  gap: 5px;
}

/* Hides the labels visually but keeps them accessible for screen readers */
.bord-member-fieldset label {
  display: none;
}


.bord-member-fieldset input {
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 5px;
  font-size: 1rem;
  font-family: 'Roboto', sans-serif;
  box-sizing: border-box;
  width: 300px;
}

.bord-member-fieldset input:focus {
  border-color: #007bff;
  outline: none;
  box-shadow: 0 0 5px rgba(0, 123, 255, 0.5);
}

.bord-member-form button {
  width: 100%;
  padding: 12px;
  background-color: #007bff;
  color: white;
  border: none;
  border-radius: 5px;
  font-size: 1.1rem;
  font-family: 'Roboto', sans-serif;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

.bord-member-form button:hover {
  background-color: #0056b3;
}








/******************************* footer ************************************/ 
#map {    
	/*background-color: #60aed1;*/
  width: 100%;
  height: 1020px;
}

iframe {
  width: 100%;
  height: 350px;
  border: 0;	
  display: block;
 
}

/* form */
.form-map {
  width: 100%;
  padding: 1rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

#contact-form input {
 	width: 70%;
  padding: 7px;
  border: 1px solid grey;
  border-radius: 4px;
}

#contact-form legend {
  text-align: center;
}

#contact-form #message {
  width: 70%;
  font-family: "Verdana", Amiko, sans-serif;
  border-radius: 4px;
  height: 70px;
}

#contact-form #message::placeholder {
  padding: 7px;
}

#contact {
	overflow: hidden;
}

#contact-form {
  width: 96%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background: #60aed166; 
  gap: 1rem;
  padding: 1rem;
  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.5);
  border-radius: 8px;
}

#contact-form p {
  font-family: "Roboto-Regular",Arial,sans-serif;
}

.footer {
  width: 100vw;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  color: white;
  background-color: #5b5b5b;
  height: 160px;
  position: fixed; 
  bottom: 0; 
  left: 0;
  z-index: 1000; 
  margin: 0;
}

.i-foot {
  width: 100%;
  display: flex;
  flex-direction: column; 
  align-items: center;
  gap: 0.5rem;
  padding-left: 0;
}

.footer a {
  color: white;
  background-color: rgb(204, 65, 0);
  padding: 0.5rem 1rem 0.5rem 1rem;
  border-radius: 10px;
  text-decoration: none;
  width: 70%; 
  text-align: center;
  
}

label.company-logo {
  display: block;
}

.registerForm fieldset.logoField {
  display: flex;
  flex-direction: column;
}

footer .container {
  margin-top: -11rem;
  margin-bottom: 9.8rem;
  background-color: #2f5070; 
  color: white;
  width: 100vw;
  padding: 3rem 1rem 3rem 1rem;
}

footer .container p a {
  color: #fff;
  text-decoration: none;
}

footer .container p a:hover {
  text-decoration: underline;
}

footer .container div {
  padding-top: 1rem;
}

footer .container div a {
  padding: 0.5rem;
}

footer .container div a i {
  font-size: 1.5rem;
}



.new-page-detail article p .event-detail-submit {
  font-size: 18px;
}

.event-marg {
  margin-top: 1rem;
  font-size: 1.2rem;
}

.mail-success-p {
  padding-top: 1rem;
}





/******************** Sitemap page ******************************/
.sitemap {
  padding: 1rem;
}

.sitemap ul {
  list-style: none;
}





/******************** Medias queries ******************************/

@media (width: 912px) and (height: 1368px) {
  .all-actualities-page .card-actuality h2 {
    padding-top: 3rem;
    padding-bottom: 0;
    margin-bottom: 0;
  }

  .all-actualities-page .card-actuality article {
    padding-top: 0;
    margin-top: 0;
  }
}




@media (width: 1024px) and (height: 1366px) {
  .all-actualities-page .card-actuality article {
    padding-top: 1rem;
    margin-top: 1rem;
  }
}

@media (width: 912px) and (height: 1368px) {
  .all-actualities-page .card-actuality h2 {
    padding-top: 3rem;
    padding-bottom: 1rem;
    margin-bottom: 1rem;
  }
}
  




@media screen and (min-width: 360px) {
  .new-page-detail article .event-detail-submit {
    font-size: 20px;
  }

  .all-actualities-page {
    margin-top: 5rem;
  }

}


@media screen and (min-width: 470px) {
  /*.header-for-page .logo-container {
    max-width: 83px; 
  }*/

  #menu ul.open {
    width: 45%;  
 }

  .image-asso {
    width: 100%; 
    height: 220px; /* Fixed height for large screens */
    overflow: hidden; 
    margin-bottom: 0;
    position: relative; 
  }
  
  /* Image inside the container */
  .image-asso img {
    position: absolute; 
    width: 100%; /* Full width */
    height: auto; 
    object-fit: cover; 
    object-position: center bottom; /* Keeps the bottom in view and centers the image vertically */
    transform: translateY(-36%); 
  }

  .new-page-detail, .news-section .responsive-news {
    margin-top: 2rem;
  }

  .news-section .responsive-news{
    margin-top: 11.5rem;
  }

  .home-page .card-actuality article {
    with: 65%;
  }

  /*.all-actualities-page .card-actuality article {
    with: 85%;
  }*/

  .home-page .row-article, 
  .all-actualities-page .row-article {
    display: flex;
    flex-wrap: wrap; 
    justify-content: center; 
    gap: 1rem;
  }

  .home-page .card-actuality .card, 
  .all-actualities-page .card-actuality .card {
    flex: 1 1 15rem; 
    max-width: 15rem; 
  }

  .new-page-detail-container article {
    margin-top: 9.5rem;
  }

  .all-actualities-page {
    margin-top: 6rem;
  }

  .separator {
    width: 85%;
    padding-top: 14vh; 
  }

  .news-b {
    margin-top: 3.8rem;
  }

  .bord-member-fieldset input {
    width: 400px;
  }
 
  .footer {
    height: 70px;
  }

  .i-foot {
    flex-direction: row; /* Passe les liens en ligne (horizontale) */
    justify-content: space-around; /* Espace autour des liens */
    width: 100%;
  }

  .foot-hidden {
    display: block;
  }

  .eventRegistration-form {
    margin-top: 8rem;
  } 

  .footer a {
    width: auto; /* Ajuste la largeur des liens automatiquement */
  }

  #map {
    height: 895px;
  }

  .new-page-detail-container article {
    margin-top: 5rem;  
  } 

  footer .container {
    margin-top: -3rem; 
    margin-bottom: 4rem;
    width: 100%;
    max-width: 100%; 
  } 

}

@media screen and (min-width: 576px) {
  .home-page .site-title h2 {
    font-size: 38px;
    text-align: center;
  }
  
  .site-title .slogan {
    font-size: 1.5rem;
  }

  /*.site-title .association-presentation {
    color: #5b5b5b; /*#ffffff;*/
    /*background-color: #60aed166; /*#1d3557;*/
  /*}*/

  .none {
    height: 80vh;
  }

  #menu ul.open {
    width: 50%;  
 }


  .image-asso {
    height: 250px  
  }

  .site-title .association-presentation {
    width: 85%;
  }

  .home-page .event-section .article-info {
    width: 85%;
}

  .home-page section h2, 
  .all-actualities-page section h2 {
    font-size: 28px;
  }

  .small-title {
    transform: translateX(-10%);  /* Pushes the title to the left */
  }

  /*#menu ul li a {
    font-size: 1.rem;
  }*/

  .all-actualities-page {
    margin-top: 7rem;
  }

  .membership-form .form-member-container {
    width: 65%;
  }

  .membership-form form fieldset input, 
  .membership-form form fieldset select,
  .membership-form form button {
    width: 90%;
    padding: 0.5rem;
  }

  .membership-form form legend, 
  .membership-form form h2 {
    font-size: 1.8rem;
  }

  .about-page .about-button {
    width: 100%;
    padding: 12px;
  }
  .new-page-detail-container article {
    margin-top: 9rem;  
  } 

  .new-page-detail-container article .article-detail-image {
    width: 270px;
  }
  
  .news-b {
    margin-top: 4.5rem;
  }

  .bord-member-fieldset input {
    width: 450px;
  }

  footer .container {
    margin-bottom: 4rem; 
  }

}


@media screen and (min-width: 768px) {
/*#menu {
  height: 13.8vh;
}*/

  /*.site-title h1  {
    font-size: 40px;
  } 

  /*.site-title .slogan {
    font-size: 1.6rem;
  }*/

  .header-title {
    display:block;
  }

  .site-title {
    display: none;
  }

  .back-color {
    display: flex;
    background-color: #60aed166; 
    width: 100%;
    justify-content: center;
    align-items: center;
  }
 
  .small-title {
    transform: translateX(-15%);  /* Pushes the title to the left */
  }

  /*#menu ul li a {
    font-size: 1.4rem;
  }*/

  #menu ul li:first-child {
    font-size: 1.5rem;
  }

  .image-asso {
    height: 285px;  
    width: 100vw;
  }

  .back-color p {
    font-size: 1.3rem;
  }

  .home-page .actuality-section { 
    box-shadow: none; 
    border-radius: 0; 
    background-color: transparent; 
  }

  .home-page .event-section .article-info {
    /*box-shadow: none; 
    border-radius: 0;
    background-color: transparent;*/  
  }

  .article-info {
    width: 720px;
    height: auto;
    display: flex;
    gap: 2rem; 
    align-items: stretch; /* Ensure both .art-img and .art-content stretch to the same height */
  }
  .art-img {
    flex: 1; /* Allow the image container to take up equal space */
  }
  .art-img img {
    width: 100%;
    height: 100%; /* Make the image fill the height of its container */
    object-fit: cover; /* Ensure the image keeps its aspect ratio and fills the container */
  }
  .art-content {
    flex: 2; /* Allow the content to take up more space compared to the image */
    display: flex;
    flex-direction: column;
    justify-content: space-between; /* Distribute the content vertically */
  }
  .actuality-section {
    width: 900px;
    margin: auto;
  }

  .all-actualities-page {
    margin-top: 8rem;
  }

  .membership-form .form-member-container {
    width: 60%;
  }


  .news-section {
    flex-direction: row;
  }

  .separator {
    padding-top: 16.5vh; 
    width: 75%;
  }

   .sep {
    padding-top: 15vh;
  }

  .new-page-detail-container article {
    margin-top: 11.5rem;  
  }

   .new-page-detail-container article .resp-div {
    display: grid;
    grid-template-columns: 25% 70%;
    gap: 2rem;
    align-items: start;
  }

   .new-page-detail-container article .resp-div .article-detail-image {
    width: 100%;
    /*align-self: start;*/
  }

  .new-page-detail-container article .resp-div {
    display: block;
    width: 100%;
    /*grid-template-columns: 25% 70%;
    gap: 1rem;
    align-items: start;*/
  }

   .new-page-detail-container article .resp-div .article-detail-image {
    /*width: 100%;*/
    /*align-self: start;*/
    float: left; /* Fait flotter l'image à gauche */
    width: 30%; /* Définit la largeur de l'image */
    height: auto;
    margin-right: 2rem; 

  }

/********************** partner page ************/
  .partner-page {
    margin-top: 12rem;
  }

  .about-block,
  .about-block-two,
  .about-block-tree,
  .about-block-four {
    width: 330px; 
  }
 
  .legacy-page section {
    flex: 1 1 calc(40% - 20px); 
    margin: 20px; 
    padding: 20px;
  }

  .legacy-page h3, .legacy-page h4, .legacy-page h5, .legacy-page h6 {
    font-size: 22px;
  }

  .legacy-page h2 {
    font-size: 28px;
    padding-top: 2.5rem;
  }

  .legacy-page {
    margin-top: 9rem;
  }

  .youtube-video {
    display: none;
  }

  .bord-member-form form {
    width: 70%
  }

  .all-actualities-page .row-article {
    width: 95%;
  }

  .home-page .style-sep {
    margin: auto;
  }

   

  /********************** footer ************/
  #map {    
    /*background-color: #60aed1;*/
    width: 100%;
    height: 450px;
  }
  
  iframe
  {
    height: 470px;
    border: 0;
    margin-bottom: -8.3rem;	
  }
  
  /* form */
  #map .form-map {    
    width: 25%;
    position: relative;
    left: 73%;
    transform: translateY(-30%);
    top: 170px; 
  }
  
  #map #contact-form {      
    position: absolute;
    bottom: 60px;
    background-color: white;
    right: 20px;
    padding-left: 16px;
    height: 450px;
    width: 500px;
    
  }

  #map #contact-form legend {
    font-weight: bold;
  }
  
  input::placeholder, #message::placeholder, #contact-form button, #contact-form p {
    color: black
  }

  #map #contact-form p {
    text-align: center;
  }

  .contact-page .form-map {
    width:60vw;
  }

  footer .container {
    margin-top: 1rem; 
    margin-bottom: 4rem;
  }

}


@media screen and (min-width: 992px) {
  /*#menu {
     height: 15vh;
  }*/

  .site-title h1  {
    font-size: 42px;
  }

  .small-title {
    transform: translateX(-35%);  /* Pushes the title to the left */
  }

  #menu ul li a {
    font-size: 1.2rem;
  }

  #menu ul li:first-child {
    font-size: 1.6rem;
  }
  
  .image-asso  {
    height: 315px  
  }

  .article-info {
    width: 850px;
  }

  .home-page section h2,
  .all-actualities-page section h2 {
    font-size: 30px;
  }

  .home-page section h3 {
    font-size: 27px;
  }

  .membership-form form {
    width: 600px;  
  }

  .carousel-control-prev {
    left: -70px !important; /* Décale l'icône de gauche un peu vers l'extérieur */
  }
  
  .carousel-control-next {
    right: -70px !important; /* Décale l'icône de droite un peu vers l'extérieur */
  }

  .all-actualities-page {
    margin-top: 4.5rem;
  }

  .membership-form .form-member-container {
    width: 60%;  
  }

  .membership-form form fieldset input, 
  .membership-form form fieldset select,
  .membership-form form button {
    width: 90%;
    padding: 0.5rem;
  }

  .new-page-detail-container article {
    margin-top: 12.2rem;  
  }

  .separator {
    padding-top: 16vh; 
  }

  .partner-page {
    margin-top: 13.5rem;
  }

  .animation-section {
    display: block;
  }

  .contact-page .form-map {
    width:55vw;
  }

  .contact-page {
    margin-top: 3rem;
  }

  .all-actualities-page .row-article {
    width: 95%;
  }

  
}


@media screen and (min-width: 1200px) {
  #menu {
    display: grid;
    grid-template-columns: 1fr 2.5fr 5fr;
    align-items: center;
    gap: 1rem;
  }

  #menu {
    height: 15vh;
 
  }

  .header-title {
    margin: -15px 55px 0 0;
    
  }

  .carousel-control-prev {
    left: -90px !important; /* Décale l'icône de gauche un peu vers l'extérieur */
  }
  
  .carousel-control-next {
    right: -90px !important; /* Décale l'icône de droite un peu vers l'extérieur */
  }

  #menu .submenu li.partner-plus {
    display: block;
  }

  .logo-container {
    width: 190px;
    margin-top:-25px;
  }

  .header-for-page .logo-container {
    margin-top:-45px;
  }

  .header-for-page .header-title {
    margin-top: 15px;
    
  }

  .header-for-page  ul.display-none {
    margin-bottom: 15px;
  }
  
  
  /* Show the menu as a horizontal list */
  ul.display-none {
    display: flex; /* Ensure the menu is displayed as flex */
    justify-content: space-around;
    align-items: center;
    margin-bottom: 60px; 
    padding: 0;
  }

  /* Hide the "Close" menu item */
  ul.display-none li:first-of-type {
    display: none;
  }

  /*#menu ul li a {
    font-size: 1rem;
  }*/

  /* Hide the burger icon */
  #menu-icon {
    display: none;
  }

  .image-asso {
    height: 365px  
  }

  .back-color p {
    font-size: 1.4rem;
  }

  .home-page section h2, 
  .all-actualities-page section h2 {
    font-size: 32px;
  }

  .home-page .card-actuality .card, 
  .all-actualities-page .card-actuality .card {
    flex: 1 1 20rem; 
    max-width: 20rem; 
  }

  .membership-form form legend{
    font-size: 2rem;
    }

  .membership-form form legend.label-question {
    font-size: 1.2rem;
  }

  .membership-form form {
    width: 700px;  
  }

  .new-page-detail-container article {
    margin-top: 7rem;
  }
  .separator {
    padding-top: 17vh; 
  } 

  .partner-page {
    margin-top: 8rem;
  }

  .about-page-container {
    margin-top: 5rem;
  }

  @keyframes scroll {
    0% {
        transform: translateX(50%); /* Commence à droite */
    }
    100% {
        transform: translateX(-50%); /* Défile jusqu'à la gauche */
    }
  }

  .partner-section .partners-container {
    display: flex;
    animation: scroll 30s linear infinite; /* Applique l'animation */
    width: calc(100% + 250px); /* Ajuste la largeur pour permettre le défilement */
    overflow: hidden; 
  }

  .legacy-page {
    margin-top: 5rem;
  }

  .contact-page .form-map {
    width:50vw;
  }

  .bord-member-form form {
    width: 60%
  }

  .all-actualities-page .row-article {
    width: 95%;
  }

  .home-page .style-sep {
    width: 88%;
    margin: auto;
  }

}


@media screen and (min-width: 1400px) {
 /* #menu {
    display: grid;
    grid-template-columns: 10% 35% 50%;
    gap: 1rem;
  }*/
  

  
}