/* Palette de couleurs */
:root {
  --primary-color: #D96A93;
  /* Accent principal */
       --primary-color2:rgb(232, 136, 171);
  --secondary-color: #2D4B73;
  /* Couleur sombre pour le header et footer */
  --accent-color: #D9C355;
  /* Couleur vive pour les survols */
  --background-color: #F2F2F2;
  /* Fond général */
  --muted-color: rgba(217, 150, 150, 0.8);
  /* Fond des blocs de menu */
}
  .doc{
    color:var(--primary-color2);
  }
html,
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  font-size: 97%;
}
img {
  width: 60%; /* L'image prend toute la largeur de son conteneur */
  height: auto; /* Garder les proportions de l'image */
  max-width: 60%; /* Limiter la largeur à 100% du conteneur */
  display: block; /* Pour enlever l'espace sous l'image */
}

p {
  padding:5px 20px;
  margin-top: 0;
  margin-bottom: 1rem; /* Ajoute un espace sous le paragraphe */
  font-size: 1rem; /* Taille de police standard (16px) */
  font-weight: 400; /* Poids de la police normal */
  line-height: 1.5; /* Espacement des lignes pour une meilleure lisibilité */
  color: #212529; /* Couleur de texte par défaut */
 
}
body {
  margin:0;
  padding:0;
  background-color: var(--background-color);
  font-family: 'Poppins', sans-serif;
  min-height: 100vh;
  max-width:100%;
  /* Assure que le body prend toute la hauteur de la page */
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  overflow-x: hidden;
  /* Le  sera poussé vers le bas */
}
/* generale*/
.container {
  max-width: 100%;
  margin: 0 auto;
  padding: 0 2px;
}

.hide {
  display: none;
}

/* Affiche le menu */
.show {
  display: block;
}

.bg-impair {
  background-color: #2d4b7383;
}

.container-fluid {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
}

/*fin gelenrale*/
/* Header */
header {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background-color: var(--secondary-color);
  color: white;
  text-align: center;
  padding: 10px 20px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  width: 100%;
}

header h1 {
  font-size: 2rem;
  margin: 0;
  color: white;
}

header h4 {
  display:inline-block;
  margin: 0;padding:5px;
  font-size:1rem;
  font-style: italic;
}
/*fin header*/


/* Navigation */
nav {
  background-color: #D96A93;
  /* Couleur principale */
  opacity: 0.85;
  /* Applique 85% d'opacité à tout le bloc */
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;

  padding: 10px 15px; /* Hauteur et espacement */
  position: relative;
}
.navbar-nav {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
 /* En colonne pour le mode mobile */
  gap: 10px;
  align-items: center;
}
.nav-link {
  color: white; /* Conserve la couleur blanche des liens */
  text-decoration: none;
  font-size: 1rem;
  padding: 10px 20px;
  width: 100%;
  text-align: center;
  transition: background-color 0.3s ease-in-out; /* Ajoute une transition */
}
nav .nav-link:hover {
  color: var(--accent-color);
  opacity: 1;
}


/* fin navigation*/

/* card page accueil*/
.info-container {
  background-color: rgba(242, 242, 242, 0.9); /* Couleur douce */
  border: 1px solid #ddd; /* Bordure subtile */
  border-radius: 8px; /* Coins arrondis */
  padding: 10px; /* Espacement intérieur */
  max-width: 800px; /* Limite de largeur */
  margin: 20px auto; /* Centrage */
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Ombre douce */
   line-height: 1.6; /* Aération du texte */
}

.info-container p {
  margin-bottom: 15px; /* Espacement entre les paragraphes */
  font-size: 0.9rem; /* Taille du texte */
  color: #333; /* Couleur du texte */
}

.info-container strong {
  color: #007BFF; /* Accent sur les éléments forts */
}

/* fin container page d'accueil*/

/* Contenu principal */
.main-content {
  width: 100%;
  display: grid;
  grid-template-columns: 1fr 3fr 1fr;
  /* Menu gauche, contenu principal, menu droit */
  gap: 20px;
  /* Espacement entre les colonnes */
  padding: 2%;
  flex: 1;
  /* Permet de prendre tout l'espace restant de la page */
  background-color: var(--background-color);
}
/* Body - contenu principal */
.content {
  grid-column: 2;
  /* Place le contenu principal dans la deuxième colonne */
  background-color: white;
  border-radius: 10px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  padding: 10px;
  text-align: center;
}

/*conte,euir genrale*/

/*** menu**/
.menu {
  display:block;
  grid-column: 1;
  /* Place ce menu dans la première colonne */
  background-color: var(--muted-color);
  padding: 5%;
  border-radius: 10px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.menu .menu-item {
  background-color: var(--primary-color);
  color: white;
  text-align: center;
  padding: 10px 10px;
  border-radius: 5px;
  margin-bottom: 10px;
  cursor: pointer;
  font-size:0.9rem;
  transition: background-color 0.3s ease, transform 0.2s ease;
}

.menu h3 {
  font-size:1.2rem;
  text-align: center;
  margin-bottom: 15px;
  color: var(--primary-color);
}

.menu .menu-item a {
  display:block;
  text-decoration: none;
  color: white;
}

.menu .menu-item:hover {
  background-color: var(--accent-color);
  transform: translateY(-5px);
}

.menu .submenu {
  display: none;
  margin-top: 5px;
  padding-left: 5px;
  max-height: 750px;
  overflow: auto;

  /* Option 1: Scrollbar fine en utilisant scrollbar-width */
  scrollbar-width: thin;
  /* Pour une barre de défilement plus fine sur Firefox */
}

/* Option 2: Personnaliser la barre de défilement avec ::-webkit-scrollbar pour les navigateurs basés sur Webkit (Chrome, Safari) */
.menu .submenu::-webkit-scrollbar {
  width: 8px;
  /* Largeur de la barre de défilement */
}

/* Couleur de la barre de défilement */
.menu .submenu::-webkit-scrollbar-thumb {
  background-color: rgba(0, 0, 0, 0.2);
  /* Couleur de la barre de défilement */
  border-radius: 4px;
  /* Coins arrondis */
}

/* Couleur du fond de la barre de défilement */
.menu .submenu::-webkit-scrollbar-track {
  background: #f1f1f1;
  /* Couleur de fond de la barre de défilement */
}

.menu .submenu .submenu-item {
  background-color: #f0f0f0;
  color: var(--secondary-color);
  padding: 8px 12px;
  border-radius: 5px;
  margin-bottom: 5px;
  cursor: pointer;
  margin-right: 5px;
  transition: background-color 0.3s ease;
}

.menu .submenu .submenu-item a {
  font-size:0.9rem;
  text-decoration: none;
  color: var(--secondary-color);
}

.menu .submenu .submenu-item:hover {
  background-color: var(--accent-color);
  color: white;
}

.menu .menu-item.active+.submenu {
  display: block;
}


#menu2 {
  grid-column: 3;
  /* Place ce menu dans la troisième colonne */
  background-color: #d9dde0;
  padding: 20px;
  border-radius: 10px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}
.content .image-container {
  display:flex;
  justify-content: center;
  align-items: center;;
  width:100%;
  opacity: 0;
  transform: translateY(-20px);

}
.content .image-container.show {
  opacity: 1;
  transform: translateY(0) scale(1.05); /* Effet de zoom léger */
  transition: opacity 02s ease, transform 2s ease;
}

/* Style du div d'information */
.info {
  background-color: rgba(242, 242, 242, 0.9);
  /* Couleur de fond avec opacité */
  padding: 20px;
  margin-top: 20px;
  border-radius: 8px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  text-align: left;
  font-size: 1.2rem;
}

/* Footer */
footer {
  background-color: var(--secondary-color);
  color: white;
  padding: 20px 0;
  text-align: center;
}

.accreditation-container {
  display: flex;
  justify-content:center;
  gap: 30px; /* Espacement entre les éléments */
  flex-wrap: wrap; /* Permet de s'adapter aux petits écrans */
  max-width: 700px;
  margin: auto;
}
footer p{
  color:var(--primary-color);
  font-weight:bold
}
.accreditation-item {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
  color: white;
  flex: 1;
  min-width: 150px;
  text-align: left;
}
.accreditation-item strong{
  color:white;
}
.accreditation-item i {

  font-size: 20px; /* Taille des icônes réduite pour un look épuré */
  color: #f8b400;
}
.section {
  margin-bottom: 30px;
  padding:10px;
}

.section h2 {
  font-size:2rem;
  color: var(--primary-color);
  margin-bottom: 20px;
}

.location-card {
  background-color: white;
  border-radius: 10px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
  padding: 20px;
  padding-top: 3px;
  margin-bottom: 20px;
}

.location-card iframe {
  width: 100%;
  height: 300px;
  border: 0;
  border-radius: 10px;
  margin-top: 15px;
}

.location-card h2 {
  color: white;
  margin: 5px;
}

.location-card h3 {
  color: white;
  margin: 5px;
}
.location-card h2{
 font-size:1.5rem;
  margin: 0;
}

.text-container {
  max-width: 800px;
  /* Largeur maximale du texte */
  text-align: left;
  /* Alignement à gauche */
  padding: 10px;
  background-color: rgba(242, 242, 242, 0.9);
  /* Optionnel : fond léger pour contraste */
  border-radius: 10px;
  /* Coins arrondis */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  /* Ombre douce */
}
.info-section {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); /* Disposition en grille fluide */
  gap: 20px; /* Espacement entre les cartes */
  padding: 20px;
  
}

.info-card {
  background: #ffffff; /* Couleur de fond blanche */
  border-radius: 10px; /* Coins arrondis */
  padding: 20px; /* Espacement interne */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Ombre douce */
  text-align: center; /* Alignement centré */
  transition: transform 0.3s ease, box-shadow 0.3s ease; /* Animation au survol */
}

.info-card:hover {
  transform: translateY(-5px); /* Légère élévation au survol */
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15); /* Ombre accentuée */
}

.info-card h3 {
  font-size: 1.4rem;
  margin-bottom: 10px; /* Espacement sous le titre */
  color: var(--secondary-color);
}
.info-card p {
  font-size: 1.2rem;
  line-height: 1.6; /* Amélioration de la lisibilité */
  color:var(--secondary-color)
}

.info-card i {
  font-size: 2rem;
  color:var(--primary-color);
  margin-bottom: 10px; /* Espacement sous l'icône */
}

.flex-center {
  display: flex;
  justify-content: center;
  padding:0px;
}

.menu-link {
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: center;
  padding: 10px 15px;
  margin-bottom: 10px;
  text-decoration: none;
  color: var(--secondary-color);
  background-color: var(--accent-color);
  border-radius: 5px;
  font-size:0.9rem;
  transition: background-color 0.3s ease, color 0.3s ease;
}


.menu-link:hover {
  background-color: var(--secondary-color);
  color: white;
}

.section h2 {
  color: var(--primary-color);
  margin-bottom: 20px;
  margin-top: 40px;
}

.card-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;

}

.contact-card {
  background-color: rgb(244, 241, 241);
  border-radius: 10px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  padding: 0px;
  text-align: center;
  width: 330px;
  margin:10px;
}

.contact-card i {
  font-size: 2.5rem;
  color: var(--primary-color);
  margin-top: 10px;
  margin-bottom: 10px;
  
}

.contact-card h4 {
  font-size: 1.2rem;
  margin-bottom: 10px;
}

.contact-card p {
  padding:0;
  font-size: 1rem;
  margin: 0;
}
.contact-card p i {
  font-size: 1rem;
  color: var(--primary-color);
margin-right:5px;
}

table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 30px;
}

table th,
table td {
  border: 1px solid #ddd;
  padding: 8px;
}

table th {
  background-color: var(--primary-color);
  color: white;
}

table tbody td a {
  text-decoration: none;
}

table tbody td a i {
  font-size: 1.5rem;
  color: var(--secondary-color);
}

.badge {
  padding: 2px 8px;
  background-color: var(--secondary-color);
  color: white;
  font-size: 0.9rem;
  border-radius: 15px;
  text-align: center;
  text-transform: uppercase;
  display: inline-block;
}

.badge-en {
  background-color: var(--accent-color);
}

.badge-nl {
  background-color: var(--primary-color);
}

/* Style des cartes */
.card {
  background-color: white;
  border: 1px solid #ddd;
  border-radius: 8px;
  min-width: 280px;
  max-width: 400px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: transform 0.3s ease-in-out;
}

.card:hover {
  transform: translateY(-10px);
  /* Légère élévation au survol */
}

/* Image de la carte */
.card img {
  width: 100%;
  height: 200px;
  object-fit: cover;
}

.card-header {
  width: 100%;
  padding: 15px;
  flex-grow: 0;
  margin: 0 auto;
  background-color: #0056b3;

}

/* Corps de la carte */
.card-body {
  padding: 15px;
  flex-grow: 1;
  text-align: center;
  ;
}

.card-title {
  font-size: 1.1rem;
  margin-bottom: 0px;
}

.card-body i {
  margin: 5px;
  padding: 5px;
  border-bottom: #efefef 1px solid;
  display: block;
  font-size: 3.5rem;
  text-align: center;
  color: var(--secondary-color);

}
.card-body h5{
font-size:1.2rem;
font-weight: 600;
padding:5px;
padding-bottom:2px;
}
.card-body h4{
  font-size:1rem;
  font-weight:4300;
  padding:5px;
  padding-bottom:2px;
  }
  .card-body p{
    font-size:1rem;
    font-weight: 300;
    padding:5px;
    padding-bottom:2px;
    }
    .card-body p i {
       font-size: 1rem;
       padding:0;
    margin-left:1px;
    display: inline;
    text-align: left;
    border-bottom: none;
   
    
    }
.card-text {
  font-size: 1rem;
  margin-bottom: 15px;
  color: #6c757d;
}

/* Bouton de la carte */
.card-button {
  display: inline-block;
  padding: 10px 15px;
  background-color: #007bff;
  color: white;
  text-decoration: none;
  border-radius: 4px;
  text-align: center;
  transition: background-color 0.3s ease;
}

.card-button:hover {
  background-color: #0056b3;
}
.princip {
  font-size:1rem;
  list-style-type: none;
  padding: 0;
  margin: 0 auto;
  max-width: 600px;
  border: 1px solid #ddd;
  border-radius: 8px;
  background-color: #fff;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.princip li {
  padding: 8px 10px;
  border-bottom: 1px solid #eee;
}

.princip li:last-child {
  border-bottom: none;
}

.princip li::before {
  content: "• ";
  color: #2980b9;
  font-weight: bold;
}
.brand {
  display: flex;
  align-items: center;
  text-decoration: none;
  color: white;
}
.brand img {
  height: 6rem;
  margin-right: 10px;
}
.brand span {
  font-size: 1.5em;
  font-weight: bold;
}
.hamburger {
  display: none;
  background: none;
  border: none;
  font-size: 2rem;
  color: white;
  cursor: pointer;
}
/* Formulaire global */
form {
  max-width: 600px;
  margin: 0 auto;
  padding: 20px;
 
   text-align:left;
   background-color: rgba(242, 242, 242, 0.9);
    border: 1px solid #ddd;
    border-radius: 8px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}
select{
  font-size:1rem;
}
/* Groupes de champs */
.form-group {
  margin-bottom: 15px;
}
::placeholder {
  font-size: 0.9rem; /* Taille de la police */
  font-family: 'Poppins', sans-serif; /* Police */
  color: #888; /* Couleur du texte */
  font-style: italic; /* Style en italique (facultatif) */
}
/* Labels */
.form-label {
  display: block;
  margin-bottom: 8px;
  font-weight: bold;
  color: #333;
}

/* Champs de texte et textarea */
.form-control {
  width: 100%;
  padding: 10px;
  font-size: 1rem;
  color: #333;
  background-color: #fff;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-sizing: border-box;
  transition: border-color 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
}

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

/* Textarea */
textarea.form-control {
  resize: vertical; /* Permet de redimensionner verticalement uniquement */
}

/* Select */
.form-select {
  width: 100%;
  padding: 10px;
  font-size: 1rem;
  color: #333;
  background-color: #fff;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-sizing: border-box;
  appearance: none; /* Supprime les styles natifs des navigateurs */
}

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

/* Bouton de soumission */
.form-submit {
  display: inline-block;
  padding: 10px 20px;
  font-size: 1rem;
  color: #fff;
  background-color: #007bff;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  transition: background-color 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
}

.form-submit:hover {
  background-color: #0056b3;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.form-submit:focus {
  outline: none;
  box-shadow: 0 0 5px rgba(0, 123, 255, 0.5);
}
.mb-3{
  margin-bottom:10px;
}
@media (min-width: 769px) {
  .menu{
    display:block;
  }
  #menu1,
  #menu2 {
    display: block;
  }
}
@media (max-width: 768px) {
  .hamburger {
    display: block;
  }
  table{
    font-size:0.9rem;
  }
  .container-fluid{
justify-content: left;
text-align: left;
margin-right:10px;
  }
 #navbarNav{
  display:none;
 }
  .main-content {
    display: flex;
    flex-direction: row;
  }

  .content {
    flex: 1; 
    padding: 10px;
    margin:0;
  }
 
  /* Masque le contenu principal lorsqu'un menu est ouvert */
  .content.hide {
    display: none;
  }
  .menu {
    position: absolute;
    top: 0;
    left:0;
    display:none;
    width: 65%; /* Chaque menu prend 50% de la largeur de l'écran */
    height:auto;
    background-color: var(--muted-color);
   z-index: 9999;
    overflow-y: auto;
    font-size:0.9rem;
    padding:5px;
    margin-top:25px;
   }
  .menu h3{
    font-size:1rem;
    margin:0;
  }
  .info {
     padding: 10px;
    margin-top: 10px;
      font-size: 1rem;
  }
  
  /* Menu de gauche */
  #menu1 {
    top:25%;
  }

  .menu .menu-item {
    color: white;
    text-align: center;
    padding: 5px 5px;
    margin-bottom: 5px;
   }
  
  
  .menu .submenu {
    margin:0;
    margin-top: 5px;
    padding-left: 5px;
    max-height: 400px;
    overflow: auto;
  }
  .card-container {
    gap: 5px;
  }
  .card {
width:110%;

  }
  .image-container {

    margin-top: 10px;
    margin-bottom: 10px;
  }
  
  .menu .submenu .submenu-item {
    padding: 8px 12px;
    border-radius: 5px;
    margin-bottom: 5px;
   margin-right: 0px;
   }
  
  
  /* Menu de droite5hude */
  #menu2 {
    padding:5px;
    top:25%;
    height:auto;
  
   }

   .menu-link {
    padding: 5px 5px;
    margin-bottom: 5px;
    font-size: 0.9rem;
   }
  
  .menu-link i {
    margin-right: 0px;
    font-size: 1.2rem;
  }
  
  .menu.show-menu {
  
   display:block;
    
   }
   .menu.show-menu2 {
  
    display:block;
   }
   .show-menu-item {
    display:block;
   }
   .card-container{
    margin-bottom:10px;;
   }
   .contact-card {
    background-color: rgb(244, 241, 241);
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    padding: 5px;
    text-align: center;
    width: 300px;
  }
  
  
   
.contact-card i {
  margin-top:10px;
  font-size: 1.5rem;
  color: var(--primary-color);
  margin-bottom: 10px;
}

.contact-card h4 {
  font-size: 1rem;
  margin-bottom: 10px;
}
.info-section {
  gap: 10px; /* Espacement entre les cartes */
  padding: 5px;
  
}
.contact-card p {
  font-size: 0.9rem;
  margin: 0;
}
.badge{
  margin:5px;
}
.contact-card p i {
  font-size: 0.9rem;
  color: var(--primary-color);
margin-right:5px;
}

}
@media (max-width: 450px) {
  header h1{
    font-size:1rem;
  }
  .contact-card{
    padding:0;
    background-color: rgb(244, 241, 241);
  }
  img{
   width:50%;
   max-width:50%;
  }
  .menu {
    margin-top:10px;
   }
   .card-container{
    padding:0;margin:5px;
    margin-bottom:15px;;
   }
   
.content{
  padding:5px;
}

   
.contact-card i {
  font-size: 1.5rem;
  color: var(--primary-color);
  margin-bottom: 10px;
}

.contact-card h4 {
  font-size: 1rem;
  margin-bottom: 10px;
}

.contact-card p {
  font-size: 0.9rem;
  margin: 0;
}
.contact-card p i {
  font-size: 0.9rem;
  color: var(--primary-color);
margin-right:5px;
}
.info-container {
  padding: 10px; /* Espacement intérieur */
  max-width: 800px; /* Limite de largeur */
  margin: 10px auto; /* Centrage */
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Ombre douce */
   line-height: 1.3; /* Aération du texte */
}

.info-container p {
  margin-bottom: 7px; /* Espacement entre les paragraphes */
  font-size: 0.9rem; /* Taille du texte */
  color: #333; /* Couleur du texte */
}

.info-card h3 {
  font-size: 1.1rem;
  margin-bottom: 8px; /* Espacement sous le titre */
 }

.info-card i {
  font-size: 1.5rem;
   margin-bottom: 8px; /* Espacement sous l'icône */
}

}