@font-face {
  font-family: 'robotoregular';
  src: url('./fonts/Roboto/roboto-regular-webfont.woff2') format('woff2'),
  url('./fonts/Roboto/roboto-regular-webfont.woff') format('woff');
  font-weight: normal;
  font-style: normal;

}
@font-face {
  font-family: 'robotobold';
  src: url('./fonts/Roboto/roboto-bold-webfont.woff2') format('woff2'),
  url('./fonts/Roboto/roboto-bold-webfont.woff') format('woff');
  font-weight: normal;
  font-style: normal;

}
@font-face {
  font-family: 'robotolight';
  src: url('./fonts/Roboto/roboto-light-webfont.woff2') format('woff2'),
  url('./fonts/Roboto/roboto-light-webfont.woff') format('woff');
  font-weight: normal;
  font-style: normal;

}
@font-face {
  font-family: 'ArchivoRegular';
  src: url('./fonts/Archivo/ArchivoRegular.eot');
  src: url('./fonts/Archivo/ArchivoRegular.eot') format('embedded-opentype'),
  url('./fonts/Archivo/ArchivoRegular.woff2') format('woff2'),
  url('./fonts/Archivo/ArchivoRegular.woff') format('woff'),
  url('./fonts/Archivo/ArchivoRegular.ttf') format('truetype'),
  url('./fonts/Archivo/ArchivoRegular.svg#ArchivoRegular') format('svg');
}
@font-face {
  font-family: 'OpenSans';
  src: url('./fonts/OpenSans/OpenSans-Regular.woff2') format('woff2');
}
@font-face {
  font-family: 'OpenSansBold';
  src: url('./fonts/OpenSans/OpenSans-Bold.woff2') format('woff2');
}

/* GLOBAL STYLES
-------------------------------------------------- */
/* Padding below the footer and lighter body text */

body {
  font-family: ArchivoRegular, Arial, serif;
  padding-top: 3rem;
  padding-bottom: 3rem;
}
.bg-grey {background: #f9f9f9}
/*h1 {
  font-size: clamp(1rem, 2.5vw, 3rem); !* Ne sera pas plus petit que 1rem, ni plus grand que 3rem, et idéalement 2.5vw *!
}*/

.h2, h2, .h3, h3, .h4, h4, .h5, h5 {font-family: robotoregular, serif;color:rgb(34, 34, 34)}
.h2, h2 {
  font-family: 'robotoregular', serif;
  font-size: 1.75rem;
  font-weight: bold;
  color: rgb(34, 34, 34);
  margin-bottom: 20px;
}
.section-board h2 {margin-bottom: 0}
.h3, h3 {
  font-size: 1.75rem;
  font-weight: bold;
  letter-spacing: -0.3px;
  margin-top: 30px;
}
.h4, h4 {font-size: 23px}
.h5, h5 {margin: 20px 0}
p, table, td, ul {color: rgb(86, 86, 86)}
.table > :not(caption) > * > * {border-bottom: 1px solid #dcdcdc}
.n4b-table {margin-top: 20px}
.n4b-table tr td {padding: 15px 0}
.btn-wrap {
  display: flex;
  justify-content: space-between; /* Aligne les boutons aux extrémités */
  gap: 20px; /* Espace entre les deux boutons */
  margin-top: 25px
}

p.subtitle {font-weight: bold; color: rgb(253, 157, 42);;font-size: 1.1em}

.btn-ejma {
  flex: 0 1 auto; /* Assure que les boutons conservent leur taille automatique */
}

/* Transition sur les boutons */
.btn-ejma, .btn-ejma-inv {
  font-family: OpenSansBold, serif;
  display: inline-block;
  color: #444444;
  border: 1px solid #444444;
  border-radius: 0 !important;
  padding: 9px 20px;
  text-decoration: none;
  text-transform: uppercase;
  font-size: 12px;
  font-weight: bold;
  letter-spacing: 2px;
  transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease; /* Ajoutez une transition fluide */
}

.btn-ejma-inv {
  color: #fff;
  background: #444;
  transition: background-color 0.3s ease, color 0.3s ease; /* Ajoutez une transition fluide */
}

/* Effet au survol (hover) */
.btn-ejma:hover {
  background-color: #444;  /* Change la couleur de fond au survol */
  color: #fff;             /* Change la couleur du texte au survol */
  border-color: #444;      /* Change la couleur de la bordure au survol */
}

.btn-ejma-inv:hover {
  background-color: #fff;  /* Change la couleur de fond au survol */
  color: #444;             /* Change la couleur du texte au survol */
  border-color: #444;      /* Change la couleur de la bordure au survol */
}


.btn-big {padding: 15px 0 !important; font-size: 18px}
.btn-link {color: black}
.n4b-text {margin-bottom: 55px}

/*.header-transparent {
  background-color: rgba(0, 0, 0, 0.5); !* Ajustez la transparence ici *!
}*/
header.header-transparent.header-scroll, header.header-transparent.header-scroll ul {
  transition: background-color 0.3s; /* Assure une transition douce */
}

.header-transparent.header-scroll {
  background-color: #666 !important; /* Choisissez une couleur plus sombre ou une autre couleur */
  transition: background-color 0.3s; /* Assure une transition douce */
}

.navbar.navbar-scroll {
  background-color: #333 !important; /* Une couleur différente pour la navbar */
  transition: background-color 0.3s; /* Assure une transition douce */
}



.navbar {
  background-color: rgba(0, 0, 0, 0); /* Complètement transparent */
  z-index: 1050;
}
.navbar-nav {
  width: 100%;
  background: white;
  position: absolute;
  left: 0;
}
.navbar-brand img {max-width: 220px}
.nav-link, .dropdown-item {color: rgb(74, 78, 87); padding: 20px 30px; border-bottom: 1px solid rgb(232, 232, 233)}
.nav-item .dropdown .nav-link a {rgb(86, 86, 86) font-size: 18px;}
/*.navbar-nav .nav-link.active{text-decoration: underline; color: white}*/
/* Survol pour les menus déroulants de la navbar */
/*.navbar .dropdown:hover .dropdown-menu {
  display: block;
}*/

.navbar-nav .nav-link.active, .navbar-nav .nav-link.show, .navbar-nav .nav-link:hover, .navbar-nav .nav-link:visited {
  color: rgb(74, 78, 87);
}

/* Optionnel: Garder le fond du lien actif sur le survol */
.navbar .dropdown-toggle:hover,
.navbar .dropdown-toggle:focus {
  background-color: transparent; /* Ou une autre couleur de fond si souhaité */
}
.navbar-toggler-icon {
  background-image: none; /* Retirer l'image de fond par défaut */
}
.nav-link.dropdown-toggle::after {
  position: absolute;
  right:25px; /* Ajuster la flèche complètement à droite */
  top: 50%; /* Centrer la flèche verticalement */
  transform: translateY(-50%);
  font-size: 1.4em;
}
.nav-link.dropdown-toggle {
  position: relative;
  overflow: visible; /* Assurez-vous que la flèche n'est pas coupée */
}


.navbar-toggler:not(.collapsed) .navbar-toggler-icon {
  transform: rotate(90deg); /* Rotation de 90 degrés lorsque activé */
  transition: transform 0.2s; /* Animation de la transformation */
}



/* Optionnel: Assurer que le menu reste ouvert quand l'utilisateur navigue dedans */
.navbar .dropdown-menu {
  margin-top: 0;
  /*
  padding: 10px 30px;
  */
  border: none;
  border-radius: 0;
}
/*.nav-item {margin-left: 25px}*/

.content {
  column-count: 2;
  column-gap: 40px; /* ajustez selon vos besoins */
  font-family: Arial, sans-serif; /* ou la police de votre choix */
}

.img-holder {display:block;margin-bottom: 20px}
.img-holder img {width: 100%}
.rounded-top img {border-top-left-radius: 10px;border-top-right-radius: 10px}

/* PAGE
-------------------------------------------------- */
#banner {
  margin-top: -52px; /* Négatif de la hauteur de votre navbar, ajustez en fonction */
  padding-top: 22vh;
  background-blend-mode: multiply;
  background-color: rgba(222, 80, 177, 0.37);
  background-repeat: no-repeat;
  background-size: cover;
}
#banner .banner-static-text{
  position: relative;
  color: white;   /* Couleur du texte pour une meilleure visibilité sur les images */
  font-family: "robotoregular", serif;
  bottom: -10px;
  display: none;
}
#banner .banner-static-text h1 {
  font-family: "robotobold", serif;
  font-style: normal;
  font-weight: lighter;
  margin: 0;
  font-size: 120px;
  letter-spacing: -1.2px;
  line-height: 0.9;
}
#banner-title {background: #222222;margin-bottom: 80px;}
#banner-title .banner-static-text{padding: 30px 10px}
#banner-title .banner-static-text h1 {
  font-family: "robotobold", serif;
  font-style: normal;
  font-weight: lighter;
  margin: 0;
  font-size: 7vw; /* La taille de la police sera 4% de la largeur du viewport */
  letter-spacing: -1.2px;
  line-height: 0.9;
  color: white;
}

.page-two-columns {
  display: flex;
  flex-wrap: wrap; /* Permet aux colonnes de passer à la ligne suivante sur des écrans plus petits si nécessaire */
}

.page-two-columns .two-columns-left,
.page-two-columns .two-columns-right {
  flex: 0 0 100% ;
  max-width: 100% ;
  margin-left: 0 ;
}

.page-two-columns .two-columns-left {margin-bottom: 35px}
.two-columns-right p {border-bottom: 1px solid lightgray; padding-bottom: 20px}
.page_404 {padding: 10vw}
.page_404 h1 span {font-size: 7vw;padding-right: 45px}



/* CUSTOMIZE THE CAROUSEL
-------------------------------------------------- */

.carousel-background {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
}

.carousel-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5); /* Noir avec une opacité de 50% */
  mix-blend-mode: darken; /* Assombrit le background */
}

/* Carousel base class */
.carousel {
  margin-bottom: 4rem;
  margin-top: -52px; /* Négatif de la hauteur de votre navbar, ajustez en fonction */
}


/* Since positioning the image, we need to help out the caption */
.carousel-caption {
  bottom: 3rem;
  z-index: 10;
}
.carousel-item::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-image: inherit;  /* Hérite du background du parent */
  opacity: 0.5;  /* Ajustez l'opacité ici */
  background-size: cover;
  background-position: center;
}
/* Définition générale pour les grands écrans */
.carousel-fullscreen .carousel-item {
  height: 100vh; /* Pleine hauteur pour les grands écrans */
  min-height: 300px;
}

/* Spécifique aux tablettes - ajustez la hauteur ici */
@media (max-width: 992px) and (min-width: 768px) {
  .carousel-fullscreen .carousel-item {
    height: 50vh; /* Par exemple, la moitié de la hauteur pour les tablettes */
    min-height: 300px;
  }
}

/* Pour les mobiles */
@media (max-width: 767px) {
  .carousel-fullscreen .carousel-item {
    height: 40vh; /* Par exemple, 40% de la hauteur pour les mobiles */
    min-height: 300px;
  }
}


.carousel-background {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
}

.static-text {
  position: absolute;
  z-index: 100;  /* Assure que le texte est au-dessus du carousel */
  top: 60%;       /* Centrer verticalement */
  right: 3%;     /* Ajuster pour aligner avec le contenu du .container de la navbar */
  transform: translateY(-50%); /* Seulement centré verticalement */
  color: white;   /* Couleur du texte pour une meilleure visibilité sur les images */
  text-align: right; /* Alignement du texte à droite */
  font-family: "robotoregular", serif;
}
.static-text h1 {
  font-family: "robotoregular", serif;
  font-style: normal;
  font-weight: 700;
  margin: 0;
  font-size: 2.5em;
  letter-spacing: 0.32px;
  line-height: 0.9;}

div.accordion > .accordion-item {
  border-radius: 0 !important; /* Retire le border-radius */
  border: 1px solid #dee2e6 !important; /* Ajoute une bordure, ajustez la couleur selon vos besoins */
  margin-bottom: 15px !important; /* Ajoute une marge en bas */
}

.accordion-button i {
  margin-right: 5px; /* Espacement entre l'icône et le texte */
}
.accordion-button::after {
  display: none;  /* Cache l'icône par défaut */
}
.accordion-button {
  position: relative;
  padding-right: 30px; /* Ajustez l'espacement pour éviter que le texte chevauche l'icône */
  font-weight: bold; /* Plus visible */
  font-size: 0.6em;
}
.accordion-button:not(.collapsed) {
  background-color: transparent !important; /* Supprime la couleur de fond bleue */
  border-color: transparent !important; /* Réapplique une bordure neutre si nécessaire */
}
.accordion-button:focus {
  outline: none !important; /* Retire l'outline pour le focus */
}
div.accordion > .accordion-item:first-of-type > .accordion-header .accordion-button {border: none !important;}
.accordion .accordion-item .accordion-collapse .accordion-body {
  border: none !important;
}
.accordion .accordion-body {
  border: none !important;
}
.accordion-button i {
  position: absolute;
  right: 20px; /* Ajustez en fonction de l'espacement désiré du bord droit */
  top: 50%;
  transform: translateY(-50%);
}

.taxonomy-cnt {font-size: 0.9em;padding: 15px;display: none; opacity: 0.9; background: #ffde00}
.taxonomy-sub {margin-bottom: 15px}
.taxonomy-sub-name { font-weight: bold;padding: 10px 10px; /* Ajoutez un peu d'espace autour du texte */
  border-bottom: 1px solid #ddd; /* Ligne de séparation sous chaque heading */
  cursor: pointer;}
.taxonomy-sub-name:before {content: ' + '}
.taxonomy-sub-name.toggle:before { content: ' - '; }
.taxonomy-sub:last-child .taxonomy-sub-name {
  border-bottom: none; /* Supprime la bordure sous le dernier élément */
  padding-bottom: 0;
}
.taxonomy-sub-cnt {font-size: 0.9em; display: none; padding: 10px}
.taxonomy-cnt p {margin-bottom: 0.5rem;}
.taxonomy-cnt ul {padding-left: 5px; margin-top: 8px}
.taxonomy-cnt ul li {font-weight: bold}
.taxonomy-cnt ul li:before {content: '> ';padding-right: 8px}

.sponsors {background: #efefef}

.cs-profile-txt h5 {margin-bottom: 5px}
.cs-profile-board {padding: 15px; background: #f9f9f9}
.cs-news-item .card-text {font-family: robotoregular, serif; font-size: 18px}
.cs-news-header {background: url("../img/trame-agenda-large.gif");background-size: cover;padding: 35px 30px 25px 30px;margin-bottom: 15px; min-height: 200px}
.cs-news-header h4 {color: rgb(253, 157, 42);font-size: 26px;font-weight: bold}
.cs-news-cat {font-size: 16px; color: rgb(239, 239, 239); text-transform: uppercase}
.cs-news-item h6 {font-size: 20px;color: rgb(102, 102, 102); font-weight: lighter}
#topBtn {
  display: none;
  position: fixed;
  bottom: -5px;
  right: 30px;
  z-index: 99;
  border: none;
  outline: none;
  background-color: #555;
  color: white;
  cursor: pointer;
  padding: 5px;
  border-radius: 10px;
  font-size: 18px;
  opacity: 0.7;
  width: 45px;
}

.nav_breadcrumb {
  list-style-type: none;
  padding: 0;
  margin: 0;
  display: flex;
}

.nav_breadcrumb li {
  margin-right: 5px;
}

.nav_breadcrumb li.bread-active {
  color: #c0c0c0;
}

.nav_breadcrumb li a {
  text-decoration: none;
  color:#2c4965;
}

.nav_breadcrumb li a:hover {
  text-decoration: underline;
}

.nav_breadcrumb li::after {
  content: ">";
  margin-left: 5px;
  font-size: 0.8em;
}

.nav_breadcrumb li:last-child::after {
  content: "";
}
.navbar-toggler {color: white}

footer {background: #222222}
.footer-inner {padding: 2.9rem 0}
footer h4 {color: white;font-size: 15px; font-weight: 600; letter-spacing: 0.32px;margin-bottom: 15px;text-transform: uppercase;}
footer address {color: white}
footer ul {padding: 0;list-style: none}
footer ul li a {color: white;text-decoration: none}
/* Formulaire de contact styles */
.contact-form {
  margin: 0 auto;
  font-family: ArchivoRegular, Arial, sans-serif;
  padding: 30px;
}

.contact-form h2 {
  font-family: 'robotoregular', serif;
  font-size: 1.75rem;
  font-weight: bold;
  color: rgb(34, 34, 34);
  margin-bottom: 20px;
}

.contact-form .form-group {
  margin-bottom: 15px;
}

.contact-form label {
  font-family: 'robotoregular', serif;
  color: rgb(34, 34, 34);
  font-size: 1rem;
  margin-bottom: 5px;
  display: block;
}

.contact-form input[type="text"],
.contact-form input[type="email"],
.contact-form textarea {
  width: 100%;
  padding: 10px;
  border: 1px solid #ddd;
  border-radius: 5px;
  font-family: ArchivoRegular, Arial, sans-serif;
  color: rgb(86, 86, 86);
  font-size: 1rem;
  background-color: #ffffff;
}

.contact-form textarea {
  resize: vertical;
}

.contact-form button[type="submit"] {
  font-family: OpenSansBold, serif;
  background-color: #444444;
  color: #ffffff;
  padding: 10px 20px;
  border: none;
  border-radius: 0;
  text-transform: uppercase;
  font-size: 12px;
  font-weight: bold;
  letter-spacing: 2px;
  cursor: pointer;
}

.contact-form button[type="submit"]:hover {
  background-color: #333333;
}

/* Style des messages d'état du formulaire */
#formStatus .alert {
  padding: 10px;
  border-radius: 5px;
  margin-top: 20px;
  font-size: 0.9rem;
}

#formStatus .alert-success {
  background-color: #d4edda;
  color: #155724;
  border: 1px solid #c3e6cb;
}

#formStatus .alert-danger {
  background-color: #f8d7da;
  color: #721c24;
  border: 1px solid #f5c6cb;
}
.section-cours h5 {margin-top:0 !important;}
.cours-content {padding: 25px}
.nav-tabs .nav-item a {font-size: 0.8em !important;text-transform: uppercase}
.pdf-list {
  list-style-type: none;
  padding-left: 0;
  display: flex;
  flex-wrap: wrap;  /* Pour s'assurer que les éléments se déplacent à la ligne si nécessaire */
}

.pdf-list li {
  margin-right: 20px; /* Espacement entre les éléments */
  display: inline-block;
}

.pdf-download-link {
  text-decoration: none;
  color: #79161f;
  font-size: 16px;
}

.pdf-download-link:hover {
  color: #ff4d4d;
}

.pdf-download-link i {
  margin-right: 8px;
  font-size: 18px;
}
#loading-indicator {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5); /* Effet de grisage */
  color: white;
  font-size: 0.7em;
  text-align: center;
  line-height: 100vh;
  z-index: 2000;
  text-transform: uppercase;
}
.instru-description {padding: 10px 20px;text-align: justify;font-size: 0.9em}
/* Supprimer les coins arrondis de la modal */
.modal-content {
  border-radius: 0 !important; /* Supprime les coins arrondis */
  box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.1); /* Optionnel : Ajustez l'ombre portée */
  padding:25px;
}

/* Ajuster les styles de la bordure (facultatif) */
.modal-header, .modal-footer {
  border: none; /* Supprime les bordures de l'en-tête et du pied */
}

/* Personnaliser les boutons de fermeture */


.btn-close:hover {
  opacity: 1; /* Rendre le bouton de fermeture opaque au survol */
}

/* Changer la taille des titres de la modal */
.modal-title {
  font-size: 1.75rem; /* Ajuster la taille du titre */
  font-weight: bold;
}

/* Personnaliser la taille des images à l'intérieur de la modal */
#professorImage {
  max-width: 100%; /* Assurez-vous que l'image ne dépasse pas de la modal */
  height: auto; /* Conserver les proportions de l'image */
  border-radius: 0; /* Supprimer les coins arrondis de l'image */
}

/* Ajuster les marges et le texte à l'intérieur de la modal */
.modal-body {
  padding: 1.5rem; /* Ajuster l'espacement interne */
  line-height: 1.6; /* Améliorer la lisibilité du texte */
  font-size: 0.9rem; /* Ajuster la taille du texte */
}
.modal-body h4 {
  font-size: 1.2em;
}

/* Personnaliser les boutons dans le pied de page de la modal */
.modal-footer .btn {
  padding: 0.75rem 1.5rem; /* Ajuster la taille des boutons */
  border-radius: 0; /* Supprimer les coins arrondis des boutons */
  background-color: #444; /* Couleur de fond personnalisée */
  color: white; /* Couleur du texte */
}

.modal-footer .btn:hover {
  background-color: #333; /* Couleur de fond au survol */
  color: white; /* Conserver le texte blanc */
}
.instrument-description {font-size: 0.9em; padding-right: 30px; text-align: justify}
.card-text {font-size: 0.9em}
.card-location span {display: block; margin-bottom: 10px}
.partners {background: #e0e0e0; margin-top: 80px}

.cs-profile-img img {
  width: 100%; /* L'image prendra toute la largeur du parent */
  height: auto; /* Maintient les proportions */
  object-fit: cover; /* Assure un bon recadrage */
  display: block; /* Évite les espaces indésirables */
}



/* Règle appliquée uniquement pour les écrans dont la largeur est inférieure à 992px */
@media (max-width: 991.98px) {
  .modal-custom-width {
    max-width: 88%; /* Applique une largeur de 80% pour les petits écrans */
  }

  header.header-transparent {
    background-color: transparent !important;
  }

  .navbar {
    background-color: transparent !important;
  }

  /* Ajouter du padding pour rendre le menu plus lisible sur mobile */
  .navbar-collapse {
    background-color: #333 !important;
    padding: 1rem !important;
  }

  /* Assurez-vous que les liens du menu ont les bonnes couleurs */
  .navbar-nav .nav-link {
    color: #343a40 !important; /* Couleur sombre pour les liens */
  }
}