.unifrakturmaguntia-regular {
  font-family: "UnifrakturMaguntia", system-ui;
  font-weight: 400;
  font-style: normal;
}


.playfair-display {
  font-family: "Playfair Display", serif;
  font-optical-sizing: auto;
  font-weight: <400>;
  font-style: normal;
}

/* Ordinateurs */
@media (min-width: 992px) {
  .entete-title {
    font-size: 3rem;
  }
}

/* Tablettes */
@media (min-width: 768px) and (max-width: 991px) {
  .entete-title {
    font-size: 2rem;
  }
}

/* Mobiles */
@media (max-width: 767px) {
  .entete-title {
    font-size: 1.5rem;
    text-align: center;
    /* Sur mobile */
  }

  .jumbotron {
    background-size: contain; /* Change de cover à contain pour éviter que l'image écrase d'autres éléments */
  }
}


  * {
    cursor: url(https://cur.cursors-4u.net/holidays/hol-1/hol18.cur), auto !important;
  }
  
  a, a:hover, a:focus, a:active {
    cursor: url(https://cur.cursors-4u.net/holidays/hol-1/hol18.cur), auto !important;
  }




/* Garde l'image en-tête intacte */
.jumbotron {
  background-image: url("images/pexels-nietjuh-1906606.jpg");
  background-color: transparent;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  filter: saturate(30%) contrast(100%);
}



/* nav en-tête */

/* Mobiles */
@media (max-width: 767px) {
  .entete-title {
    font-size: 3.5rem;
    text-align: center;
  }

  /* Ajout du fond noir derrière la navbar sur mobile */
  #entete nav {
    background-color: black; /* Fond noir */
    border-color: transparent;
    padding: 10px 0; /* Un peu d'espace autour des éléments */
  }

  /* Ajout de style pour les liens dans la navbar sur mobile */
  #entete nav ul {
    display: flex;
    flex-direction: column; /* Met les éléments de la navbar en colonne */
    list-style-type: none; /* Enlève les puces des éléments de la liste */
    padding: 0;
    margin: 0;
  }

  
}

  /* Ajout du fond noir derrière la navbar sur mobile */
  #entete nav {
    background-color: rgba(0, 0, 0, 0.3); /* Fond noir */
    border-color: transparent;
  }
}
#entete nav {
  background-color: transparent;
  border-color: transparent;
  color: white;
  font-family: "UnifrakturMaguntia";
  text-shadow: 1px 1px 2px black;
  text-align: center;
  font-size: 50px;

}


#entete a {
  color: ghostwhite;
  box-align: center;
  font-family: "UnifrakturMaguntia";
}

#entete a:hover {
  color : rgb(249, 198, 207);
  background-color: transparent;
}

.dropdown-menu {
  background-color: rosybrown;
  border-color: ghostwhite;
  opacity: 70%;
  background-image: url('images/pexels-karolina-grabowska-6634140.jpg'); /* Image de texture */
  background-size: cover; /* Ajuste la taille de l'image pour couvrir tout l'écran */
  background-blend-mode: overlay 50%; /* Mélange la texture avec la couleur de fond */
  border-radius: 15px; /* Ajuste la valeur pour plus ou moins d'arrondi */
}

.dropdown-menu a {
  color: white;
  font-family: "Playfair Display" !important; 
  text-align: center;
}


nav ul li a {
    transition: color 2s ease, opacity 2s ease;
}


/* Style pour l'élément actif de la navbar */
.navbar .nav > .active > a {
    background-color: transparent; /* Change cette couleur selon ton design */
    color: rosybrown !important; /* Couleur du texte */

}





/* texte en-tête*/


.entete-title {
  color: ghostwhite !important;
  text-align: center;
  /* offset-x | offset-y | blur-radius | color */
  text-shadow: 1px 1px 10px black;
  font-family: "UnifrakturMaguntia";
}

.entete-description {
  color: ghostwhite;
  text-align: center;
  font-family: "Playfair Display";
   /* offset-x | offset-y | blur-radius | color */
  text-shadow: 2px 2px 5px black;
}






/* corps de texte */



/* Formulaire - Conteneur */
#formulaire-container {
  display: flex;
  justify-content: center; /* Centre horizontalement */
  align-items: center;     /* Centre verticalement */
  min-height: 100vh;       /* Hauteur minimale pour occuper toute la fenêtre */
  background: none;       /* Garder un fond transparent */
}

/* Style du formulaire */
form {
  width: 30rem;           /* Largeur adaptée */
  padding: 20px;          /* Espacement interne */
  background-color: black; /* Fond sombre pour le formulaire */
  border-radius: 8px;     /* Coins arrondis */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Légère ombre pour le style */
  font-family: "Playfair Display", serif;
  color: white;           /* Texte blanc dans le formulaire */
}

/* Style des étiquettes */
form label {
  display: block;
  margin-bottom: 8px;   /* Espacement sous les labels */
  color: white;         /* Couleur du texte des labels */
  font-family: "Playfair Display", serif;
}

/* Style des champs de saisie (input, textarea) */
form input, form textarea {
  width: 100%;           /* Champs prenant toute la largeur */
  padding: 10px;         /* Espacement interne */
  margin-bottom: 15px;   /* Espacement entre les champs */
  border: 1px solid #ddd; /* Bordure légère */
  border-radius: 5px;    /* Coins arrondis */
  font-family: "Playfair Display", serif;
  color: black;          /* Couleur du texte dans les champs */
  background-color: white; /* Fond blanc pour les champs */
}

#contact-form {
  display: flex;
  flex-direction: column; /* Disposer les éléments en colonne */
  align-items: center; /* Centrer les éléments horizontalement */
}

/* Style pour le bouton */
.btn-custom {
  background-color: black; /* Couleur de fond */
  color: ghostwhite; /* Couleur du texte */
  padding: 10px 20px; /* Espacement interne */
  border-radius: 8px; /* Coins arrondis */
  border: none;
  cursor: pointer;
  font-size: 16px;
  font-family: "Playfair Display", serif;
  transition: background-color 0.3s ease;
}

/* Effet au survol du bouton */
.btn-custom:hover {
  background-color: rosybrown; /* Changer la couleur au survol */
  color: white; /* Garder le texte en blanc */
}


/* Message de confirmation après envoi */
#confirmation-message {
  display: none;          /* Cacher initialement */
  color: rosybrown;       /* Couleur du texte de confirmation */
  text-align: center;
  font-size: 18px;
  margin-top: 20px;
}



/* Personnalisation globale */
body {
  background-color: rgb(0, 0, 0, 0.7); /* Fond sombre transparent */
  color: white;           /* Texte blanc sur toute la page */
  font-family: "Playfair Display", serif;
  background-image: url('images/pexels-karolina-grabowska-6634140.jpg'); /* Image de fond */
  background-size: cover; /* Image de fond qui couvre tout l'écran */
  background-blend-mode: overlay; /* Mélange l'image avec une couleur sombre */
  min-height: 100vh;       /* Hauteur minimale pour la page */
}

/* Formulaire - Centrer le formulaire sans affecter l'en-tête et le pied de page */
#formulaire-container {
  display: flex;
  justify-content: center;  /* Centrer horizontalement */
  align-items: center;      /* Centrer verticalement */
  min-height: 100vh;         /* Hauteur minimale pour occuper toute la fenêtre */
  margin-top: 0;             /* Pas de marge supplémentaire */
}

/* Formulaire */
form {
  width: 30rem;  /* Largeur du formulaire */
  padding: 20px;  /* Un peu de padding pour espacer les champs */
  background-color: black;  /* Fond noir pour un contraste élégant */
  border-radius: 8px;  /* Coins arrondis */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);  /* Ombre pour plus de style */
  align-items: center !important;
}

/* Les autres éléments comme les titres et les paragraphes dans le formulaire */
form label {
  color: white;  /* Texte blanc pour les labels */
  text-align: center;
  font-family: "Playfair Display";
}

/* Personnaliser la couleur du bouton */
form button {
  background-color: black;
  text-align: center;
  font-family: "Playfair Display";
}

/* Conteneur de message de confirmation */
#confirmation-message {
  display: none; /* Cacher le message initialement */
  color: rosybrown; /* Couleur du message de confirmation */
  font-size: 18px;
  text-align: center;
  margin-top: 20px;
}



body {
    background-color: rgb(0, 0, 0, 0.7); /* Le fond de la page sera noir */
    color: white; /* Le texte de la page sera blanc */
    background-image: url('images/pexels-karolina-grabowska-6634140.jpg'); /* Image de texture */
    background-size: cover; /* Ajuste la taille de l'image pour couvrir tout l'écran */
    background-blend-mode: overlay; /* Mélange la texture avec la couleur de fond */
}

/* Centrer le formulaire sans affecter l'en-tête et le pied de page */
#formulaire-container {
  display: flex;
  justify-content: center;  /* Centrer horizontalement */
  align-items: center;      /* Centrer verticalement */
  min-height: 100vh;         /* Hauteur minimale pour occuper toute la hauteur de la fenêtre */
  margin-top: 0;             /* Pas de marge supplémentaire */
}

/* Formulaire */
form {
  width: 26rem;  /* Largeur du formulaire */
  padding: 20px;  /* Un peu de padding pour espacer les champs */
  background-color: ghostwhite;  /* Couleur de fond pour une meilleure visibilité */
  border-radius: 8px;  /* Coins arrondis */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);  /* Ombre pour plus de style */
  align-items: center !important;
}

/* Les autres éléments comme les titres et les paragraphes dans le formulaire */
form label {
  color: black;
  text-align: center;
  font-family: "Playfair Display";
}

form button {
  background-color: ghostwhite;
  text-align: center;
  font-family: "Playfair Display";
}

/* Personnaliser la couleur du bouton */
.btn-custom {
  background-color: black;  /* Couleur de fond personnalisée */
  color: ghostwhite;                /* Couleur du texte */
  border: none;                /* Enlever les bordures */
  padding: 10px 20px;          /* Padding pour un bouton plus large */
  font-size: 16px;             /* Taille du texte */
  border-radius: 8px;          /* Coins arrondis */
}

/* Effet au survol */
.btn-custom:hover {
  background-color: rosybrown;  /* Changer la couleur au survol */
  color: ghostwhite;                /* Garder le texte en blanc */

}

/* Centrage supplémentaire pour la classe container */
.container {
  width: 100%;  /* S'assurer que le conteneur prend toute la largeur */
  padding-left: 0;
  padding-right: 0;
}

.colonnes {
   background-color: rgba(255, 255, 255, 0.1);
  margin: 70px;
  padding: 70px;
  border-radius: 15px; /* Ajuste la valeur pour plus ou moins d'arrondi */
}

#corpsdetexte h1 {
  color: ghostwhite;
  text-align: center;
  font-family: "UnifrakturMaguntia";
  
  letter-spacing: 1px;
}

#corpsdetexte h4 {
  color: ghostwhite;
  text-align: center;
  font-family: "Playfair Display";
  
  letter-spacing: 1px;
}

#corpsdetexte h5 {
  color: ghostwhite;
  text-align: justify;
  font-family: "Playfair Display";
 
  letter-spacing: 1px;
  line-height: 1.5;
  text-indent: 15px;
}

#corpsdetexte h6 {
  color: ghostwhite;
  text-align: center;
  font-family: "UnifrakturMaguntia";
 
  font-size: 20px;
}



/* Pied de Page */

@media (max-width: 768px) {
  .footer .row {
    flex-direction: column;
    text-align: left;
  }

   .footer .col-md-6 {
    
    justify-content: left; /* Centre le contenu horizontalement */
    align-items: left; /* Centre le contenu verticalement */
    margin-bottom: 20px; /* Espacement entre les colonnes */
  }
}


.footer {
  position: static;
  background-color: ghostwhite; /* Couleur de fond */
  color: black; /* Couleur du texte */
  padding: 20px 0; /* Espacement en haut et en bas */
  text-align: center; 
  padding-left: 15px;
  padding-right: 15px;
   width: 100%;
}

.footer h5 {
  font-size: 1.2em;
  margin-bottom: 15px;
  font-family: "UnifrakturMaguntia";

}

.footer ul {
  list-style: none;
  padding: 20px;
}

.footer ul li {
  margin-right: 20px;
  margin-bottom: 10px;
}

.footer ul li svg {
  margin-bottom: 20px;
}

.footer ul li a {
  color: black;
  text-decoration: none;
  font-family: "Playfair Display";
}

.footer ul li a:hover {
  color: rosybrown;
}

.footer-separator {
    height: 0.1px; /* Ajuste la hauteur de la ligne */
    filter: opacity(10%);
    background-color: rgba(0, 0, 0); /* Couleur de la ligne */
    margin: 10px 0; /* Espace au-dessus et en dessous de la ligne */
}

.copyright p {
  color: black;
  text-decoration: none;
  font-family: "Playfair Display";
    margin: 0; /* Supprime le margin par défaut */
    font-size: 14px; /* Ajuste la taille de la police si nécessaire */