/*.brixton {
  font-family: "Brixton", sans-serif;
  font-style: normal;
}
*/


.quattrocento {
  font-family: "Quattrocento", serif;
  font-weight: 400;
  font-style: normal;
}

.quattrocento-bold {
  font-family: "Quattrocento", serif;
  font-weight: 700;
  font-style: normal;
}


.oswald {
  font-family: "Oswald", sans-serif;
  /*font-optical-sizing: auto;*/
  /*font-weight: <weight>;*/
  font-style: normal;
}


.inter{
  font-family: "Inter", sans-serif;
/*  font-optical-sizing: auto;
  font-weight: <weight>;*/
  font-style: normal;
}


.syne{
  font-family: "Syne", sans-serif;
/*  font-optical-sizing: auto;
  font-weight: <weight>;*/
  font-style: normal;
}

.text-rouge-f{
  color: #b4321e !important;
}

.text-black{
  color: #000 !important;
}
.navbar-brand img {
  width: 40%;
}


a {
  color: black; /* Définit la couleur du lien en noir */
  text-decoration: none; /* Retire le soulignement par défaut */
}

a:hover {
  color: gray;
  text-decoration: underline; /* Ajoute un soulignement au survol pour indiquer que c'est cliquable */
}



   /* Conteneur qui contient les deux images */
    .image-container {
      position: relative; /* Position relative pour positionner les enfants */
      width: 100%; /* Largeur du conteneur */
      height: 100%; /* Hauteur du conteneur */
    }

    /* Image de fond (la première image) */
    .background-image {
      /*position: absolute;*/
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      object-fit: cover; /* Ajuste l'image pour couvrir entièrement */
    }

    /* Image au-dessus (la seconde image) */
    .foreground-image {
      position: absolute;
      /*top: 50%;  Positionne au centre verticalement */
      left: 60%;
      /*right: 0%;*/
      transform: translate(-50%, -50%); /* Centre parfaitement l'image */
      width: 150px; /* Largeur de l'image au-dessus */
      height: auto; /* Conserve le ratio de l'image */
      z-index: 2; /* Assure que cette image soit au-dessus de l'autre */
    }















/**NEW**/

.bg-image {
  background-image: url('fond.jpg'); /* Remplacez par l'URL de votre image */
  background-size: cover;
  background-position: center;
  height: 80vh;
  position: relative;
}

.text-overlay {
  position: absolute;
  top: 50%;
  left: 0;
  width: 100%;
  transform: translateY(-50%);
  color: white;
  text-align: center;
}

.text-shadow{
    text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.7);
}


.bg-bleu{
  background-color: #257ba4 !important
}

.text-bg-bleu {
    color: #fff !important;
    background-color: #d77e5e !important;
}

.bg-bleu-c{
  background-color: #d1eff9 !important;
}

.bg-rouge-f{
  
   background-color: #a73520 !important;
}

.text-bg-bleu-c {
    color: #fff !important;
    background-color: #d1eff9 !important;
}

.hero {
    width: 100%;
    min-height: 60vh; /* ou 100vh pour plein écran */
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
}

.hero-content {
    /*background-color: rgba(0, 0, 0, 0.5); /* assombrit pour lisibilité */
    background-color: #a73520;
    color: white;
    padding: 2rem;
    border-radius: 0px;
}




.image-hover-effect {

  transition: filter 0.5s ease, transform 0.5s ease; /* Animation fluide */
  filter: grayscale(100%); /* Applique le noir et blanc */
}

.image-hover-effect:hover {
  filter: grayscale(0%); /* Supprime le noir et blanc */

}

.hover-card {
  border: 2px solid #ddd; /* Couleur de base du contour */
  transition: border-color 0.3s ease; /* Transition fluide */
}

.hover-card:hover {
  border-color: #d77e5e; /* Couleur du contour au survol */
}


.bg-gris-c{
  background-color: #cce9ff !important;
}

.bg-bleu-f{
  background-color: #389390 !important;
}


.btn{
  --bs-btn-border-radius: 0rem !important;
}




.bg-bleu-new{
  background-color: #0A96C5

}


.bg-rouge-new{
  background-color: #C33520

}

.text-white{
  color: #F2F2F2 !important;
}

div.btn.btn-outline-dark.oswald.text-uppercase > a:not([class]), 
div.btn.btn-outline-dark.oswald.text-uppercase > a[class=" "] {
  text-decoration: none;
}

div.btn.btn-outline-dark.oswald.text-uppercase > a:not([class]), 
div.btn.btn-outline-dark.oswald.text-uppercase > a[class=" "]:hover {
  text-decoration: none;
  color: white;
}

/*div[data-type="staff"] {
  display: none;
}
*/