.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;
  }
}

  * {
    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;
  }


/* image en-tête*/
.jumbotron {
  background-image: url("images/pexels-rdne1.jpg") ;
  background-color: transparent;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  filter: saturate(30%) contrast(100%) ;
  margin-bottom: 30px;


}

/* 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;
}

/* Couleur du texte lorsque le bouton est actif */
#navbar-header button {
    color: rosybrown; /* Couleur du texte lorsque le bouton est actif */
    background-color: transparent; /* Fond transparent pour l'élément actif */
}

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





/* 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 */

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 */
    display: flex;
    flex-direction: column;
}


.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;
}

main {
    flex: 1;
}

/*thumbnail*/

.row {
    display: flex; /* Alignement horizontal */
    align-items: flex-start; /* Aligne les éléments en haut */
}

.thumbnail {
    margin: 0 auto; /* Centre l'élément horizontalement */
    display: inline-block; /* Garantit un bon comportement dans un conteneur centré */
    position: relative; 
    overflow: hidden;
    background-color: black;
    border: none;
    width: 500px; /* Définissez une largeur fixe */
    height: 500px; /* Définissez une hauteur fixe */
}



.thumbnail img {
    width: 100%; /* L'image occupe tout l'espace de la vignette */
    height: 100%; /* Ajuste l'image pour correspondre à la hauteur */
    object-fit: cover; /* Coupe l'image pour qu'elle s'adapte au conteneur */
    filter: grayscale(50%);
    transition: transform 1.2s ease; /* Transition pour l'effet de zoom */
}



.thumbnail img:hover {
  filter: grayscale(100%);
  transform: scale(1.2); /* Zoom léger sur l'image */
}

.text-center .thumbnail {
  max-width: 300px; /* Facultatif : ajustez la taille */
}

.overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.7); /* Fond sombre avec transparence */
    color: white;
    display: flex;
    justify-content: center; /* Centre horizontalement */
    align-items: center; /* Centre verticalement */
    opacity: 0; /* Invisible par défaut */
    transition: opacity 0.3s; /* Transition douce */
  color: ghostwhite;
  text-align: left;
  font-family: "UnifrakturMaguntia";
  text-shadow: 1px 1px 5px black;
  letter-spacing: 1px;

}

.overlay .text {
    font-size: 2.5em; /* Taille de police agrandie au survol */
    transition: none; /* Pas de transition sur la taille du texte */
}


.thumbnail:hover img {
    filter: grayscale(100%);
    transform: scale(1.2); /* Zoom léger sur l'image */
}

.thumbnail:hover .overlay {
    opacity: 1; /* Affiche l'overlay au survol */
}

.thumbnail img:hover {
    transition: transform 0.2s ease, filter 0.2s ease; /* Diminuer la durée pour éviter les conflits */
}

.thumbnail:hover .overlay .text {
    font-size: 2.5em; /* Augmentez la taille de la police */

}

.container1 .row {
  margin-top: 20px;
}

.col-md-6 {
  padding: 15px;
}

/* 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: 0;
}

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

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

.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 */