/* Style général du corps de la page */
  body {
    font: 400 15px/1.8 Lato, sans-serif; /* Définit la police, le poids de la police, la taille de police et la hauteur de ligne pour le corps */
    color: #777; /* Définit la couleur du texte du corps */
  }

  /* Styles des titres de niveau 3 et 4 */
  h3, h4 {
    letter-spacing: 10px; /* Définit l'espacement entre les lettres pour les titres de niveau 3 et 4 */
    font-size: 20px; /* Définit la taille de police pour les titres de niveau 3 et 4 */
    color: #111; /* Définit la couleur du texte pour les titres de niveau 3 et 4 */
    margin-bottom: 40px; /* Définit la marge inférieure des titres de niveau 3 et 4 */
  }

  /* Styles spécifiques pour les titres de niveau 3 */
  h3 {
    font-family: 'Candal', sans-serif; /* Définit la police 'Candal' pour les titres de niveau 3 */
    color: rgb(93, 93, 93); /* Définit une couleur personnalisée pour les titres de niveau 3 */
  }

  /* Styles spécifiques pour les titres de niveau 5 */
  h5 {
    font-family: 'Candal', sans-serif; /* Définit la police 'Candal' pour les titres de niveau 5 */
    font-size: 18px; /* Définit la taille de police pour les titres de niveau 5 */
  }

  /* Styles spécifiques pour les class scroll-zoom */
  .scroll-zoom {
    opacity: 0; /* Définit l'opacité initiale à 0 */
    transform: scale(0.5); /* Définit la taille initiale de l'élément */
    transition: opacity 1s, transform 1s; /* Ajoute une transition de 1 seconde pour l'opacité et la taille */
  }
  
  /* Styles spécifiques pour les class scroll-zoom qui ont la class show */
  .scroll-zoom.show {
    opacity: 1; /* Lorsque la classe 'show' est ajoutée, l'opacité passe à 1 */
    transform: scale(1); /* Lorsque la classe 'show' est ajoutée, l'élément est agrandi */
  }

  /* Styles spécifiques pour les class fade-in */
  .fade-in {
    opacity: 0; /* Définit l'opacité initiale à 0 */
    transition: opacity 2s ease; /* Ajoute une transition de 1 seconde pour l'opacité */
  }

  /* Styles spécifiques pour les class fade-in qui ont la class show */
  .fade-in.show {
    opacity: 1; /* Lorsque la classe 'show' est ajoutée, l'opacité passe à 1 */
  }

  
  /* Styles pour la classe .container */
  .container {
    padding: 80px; /* Ajoute un remplissage de 80 pixels à tous les côtés du conteneur */
  }

  /* Styles pour l'élément avec l'ID #animated-text */
  #animated-text {
    opacity: 0; /* Rend l'élément invisible initialement */
    transform: translateX(-100%); /* Déplace l'élément vers la gauche de 100% de sa largeur */
    animation: appear 2s forwards; /* Applique l'animation 'appear' pendant 2 secondes avec une rétention de l'état final */
  }

  /* Styles pour les paragraphes */
  p {
    font-family: 'Candal', sans-serif; /* Définit la police 'Candal' pour les paragraphes */
  }

  /* Animation 'appear' */
  @keyframes appear {
    0% {
        opacity: 0;
        transform: translateX(-100%);
    }
    100% {
        opacity: 1;
        transform: translateX(0);
    }
  }

  /* Styles pour les éléments <span> à l'intérieur de #animated-text */
  #animated-text span {
    display: inline-block;
    opacity: 0; /* Rend les éléments <span> invisibles initialement */
    transform: translateY(100%); /* Déplace les éléments <span> vers le bas de 100% de leur hauteur */
    animation: reveal 1.5s forwards; /* Applique l'animation 'reveal' pendant 1.5 secondes avec une rétention de l'état final */
    animation-delay: 0.5s; /* Délai de 0.5 seconde avant le démarrage de l'animation */
  }

  /* Animation 'reveal' */
  @keyframes reveal {
    0% {
        opacity: 0;
        transform: translateY(100%);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
  }

  /* Animation 'floating' */
  @keyframes floating {
    0% {
        transform: translate(10,10) rotate(0deg);
    }
    50% {
        transform: translate(0,30px) rotate(0deg);
    }
    100% {
        transform: translate(10,10) rotate(0deg);
    }
  }

  /* Animation 'floating-rotate-left' */
  @keyframes floating-rotate-left {
    0% {
        transform: translate(10,10) rotate(-25deg);
    }
    50% {
        transform: translate(0, 30px) rotate(-25deg);
    }
    100% {
        transform: translate(10,10) rotate(-25deg);
    }
  }

  /* Animation 'floating-rotate-right' */
  @keyframes floating-rotate-right {
    0% {
        transform: translate(10,10) rotate(25deg);
    }
    50% {
        transform: translate(0, 30px) rotate(25deg);
    }
    100% {
        transform: translate(10,10) rotate(25deg);
    }
  }

  /* Styles pour les éléments avec la classe .floating-image */
  .floating-image {
    animation: floating 6s ease-in-out infinite; /* Applique l'animation 'floating' pendant 6 secondes en boucle */
    will-change: transform; /* Amélioration des performances pour l'animation */
  }

  /* Styles pour les éléments avec la classe .floating-image-left */
  .floating-image-left {
    animation: floating-rotate-left 6s ease-in-out infinite; /* Applique l'animation 'floating-rotate-left' pendant 6 secondes en boucle */
    will-change: transform; /* Amélioration des performances pour l'animation */
    animation-delay: 0s; /* Pas de délai pour l'image flottante de gauche */
  }

  /* Styles pour les éléments avec la classe .floating-image-right */
  .floating-image-right {
    animation: floating-rotate-right 6s ease-in-out infinite; /* Applique l'animation 'floating-rotate-right' pendant 6 secondes en boucle */
    will-change: transform; /* Amélioration des performances pour l'animation */
    animation-delay: 1.5s; /* Délai de 1.5 secondes pour l'image flottante de droite */
  }

  /* Styles pour l'animation de section */
  .animate-section {
    opacity: 0; /* Rend l'élément invisible initialement */
    transform: translateY(-20px); /* Déplace l'élément vers le haut de 20 pixels */
    transition: opacity 2s ease, transform 1s ease; /* Ajoute une transition d'opacité de 2 secondes et de transformation de 1 seconde */
  }

  /* Styles pour afficher l'animation de section */
  .animate-section.show {
    opacity: 1; /* Rend l'élément visible */
    transform: translateY(0); /* Réinitialise la transformation en translation vers le haut */
  }

  /* Media query pour les écrans rétrécis avec une largeur maximale de 768px */
  @media screen and (max-width: 768px) {
    .responsive-text {
        font-size: 1em; /* Taille de police réduite pour les écrans rétrécis */
    }
  }

  /* Styles pour le premier élément .list-group-item */
  .list-group-item:first-child {
    border-top-right-radius: 0; /* Supprime le rayon de bordure supérieur droit */
    border-top-left-radius: 0; /* Supprime le rayon de bordure supérieur gauche */
  }

  /* Styles pour le dernier élément .list-group-item */
  .list-group-item:last-child {
    border-bottom-right-radius: 0; /* Supprime le rayon de bordure inférieur droit */
    border-bottom-left-radius: 0; /* Supprime le rayon de bordure inférieur gauche */
  }

  /* Styles pour les éléments avec la classe .thumbnail */
  .thumbnail {
    padding: 0 0 15px 0; /* Ajoute un remplissage spécifique pour les miniatures */
    border: 1px solid black; /* Ajoute une bordure de 1 pixel solide de couleur noire */
    border-radius: 0; /* Supprime le rayon de bordure */
  }

  /* Styles pour les paragraphes à l'intérieur des éléments .thumbnail */
  .thumbnail p {
    margin-top: 15px; /* Ajoute une marge supérieure de 15 pixels pour les paragraphes */
    color: #555; /* Définit la couleur du texte en gris foncé */
  }

  /* Styles pour les boutons */
  .btn {
    padding: 10px 20px; /* Ajoute un remplissage spécifique pour les boutons */
    background-color: #333; /* Définit la couleur de fond des boutons en noir */
    color: #f1f1f1; /* Définit la couleur du texte des boutons en blanc */
    border-radius: 0; /* Supprime le rayon de bordure */
    transition: .2s; /* Ajoute une transition de 0.2 seconde */
  }

  /* Styles pour les boutons au survol ou au focus */
  .btn:hover, .btn:focus {
    border: 1px solid white; /* Ajoute une bordure de 1 pixel solide de couleur blanche */
    background-color: #fff; /* Définit la couleur de fond des boutons au survol ou au focus en blanc */
    color: #000; /* Définit la couleur du texte des boutons au survol ou au focus en noir */
  }

  /* Styles pour la classe .modal-header, les balises h4 et .close */
  .modal-header, h4, .close {
    background-color: #333; /* Définit la couleur de fond pour l'en-tête de la modal, les balises h4 et le bouton de fermeture en noir */
    color: #fff !important; /* Définit la couleur du texte en blanc */
    text-align: center; /* Centre le texte dans l'en-tête de la modal, les balises h4 et le bouton de fermeture */
    font-size: 30px; /* Définit la taille de police à 30 pixels */
  }

  /* Styles pour .modal-header et .modal-body */
  .modal-header, .modal-body {
    padding: 40px 50px; /* Ajoute un remplissage spécifique pour l'en-tête et le corps de la modal */
  }

  /* Styles pour les liens à l'intérieur des éléments de la classe .nav-tabs */
  .nav-tabs li a {
    color: #777; /* Définit la couleur des liens en gris */
  }

  /* Styles pour l'élément avec l'ID #googleMap */
  #googleMap {
    width: 100%; /* Définit la largeur à 100% */
    height: 400px; /* Définit la hauteur à 400 pixels */
    -webkit-filter: grayscale(100%); /* Applique un filtre de désaturation complet pour rendre l'image en niveaux de gris dans les navigateurs WebKit */
    filter: grayscale(100%); /* Applique un filtre de désaturation complet pour rendre l'image en niveaux de gris */
  }

  /* Styles pour la barre de navigation */
  .navbar {
    font-family: Candal, sans-serif; /* Définit la police de caractères de la barre de navigation */
    margin-bottom: 0; /* Supprime la marge inférieure de la barre de navigation */
    background-color: #ecb38f; /* Définit la couleur de fond de la barre de navigation en beige */
    border: 0; /* Supprime la bordure de la barre de navigation */
    font-size: 11px !important; /* Définit la taille de police importante à 11 pixels */
    letter-spacing: 4px; /* Ajoute un espacement entre les lettres de 4 pixels */
    opacity: 0.9; /* Définit l'opacité de la barre de navigation à 0.9 */
  }

  /* Styles pour les liens et la marque de la barre de navigation */
  .navbar li a, .navbar .navbar-brand {
    color: white !important; /* Définit la couleur du texte des liens et de la marque en blanc */
  }

  /* Styles pour les liens de navigation au survol */
  .navbar-nav li a:hover {
    color: #fff !important; /* Définit la couleur du texte des liens de navigation au survol en blanc */
  }

  /* Styles pour le lien actif dans la barre de navigation */
  .navbar-nav li.active a {
    color: #95b3a0 !important; /* Définit la couleur du texte du lien actif en vert clair */
    text-shadow: -0.5px 1px 0 white; /* Ajoute une ombre de texte légèrement décalée en blanc */
    background-color: #f7f0d2 !important; /* Définit la couleur de fond du lien actif en beige clair */
  }

  /* Styles pour le bouton de bascule de la barre de navigation par défaut */
  .navbar-default .navbar-toggle {
    border-color: transparent; /* Définit la couleur de bordure du bouton de bascule de la barre de navigation par défaut en transparent */
  }

  /* Styles pour le bouton de bascule de la barre de navigation par défaut au focus ou au survol */
  .navbar-default .navbar-toggle:focus, .navbar-default .navbar-toggle:hover {
    background-color: #f7f0d2; /* Définit la couleur de fond du bouton de bascule de la barre de navigation par défaut au focus ou au survol en beige clair */
  }

  /* Styles pour l'élément ouvert .dropdown-toggle */
  .open .dropdown-toggle {
    color: #fff; /* Définit la couleur du texte de l'élément ouvert en blanc */
    background-color: black !important; /* Définit la couleur de fond de l'élément ouvert en noir */
  }

  /* Styles pour les liens à l'intérieur du menu déroulant */
  .dropdown-menu li a {
    color: #000 !important; /* Définit la couleur du texte des liens à l'intérieur du menu déroulant en noir */
  }

  /* Styles pour les liens au survol à l'intérieur du menu déroulant */
  .dropdown-menu li a:hover {
    background-color: red !important; /* Définit la couleur de fond des liens au survol à l'intérieur du menu déroulant en rouge */
  }

  /* Styles pour le pied de page */
  footer {
    background-color: #ecb390; /* Définit la couleur de fond du pied de page en beige */
    color: #f5f5f5; /* Définit la couleur du texte en blanc */
    padding: 32px; /* Ajoute un remplissage de 32 pixels autour du contenu du pied de page */
  }

  /* Styles pour les liens à l'intérieur du pied de page */
  footer a {
    color: #f5f5f5; /* Définit la couleur du texte des liens à l'intérieur du pied de page en blanc */
  }

  /* Styles pour les liens au survol à l'intérieur du pied de page */
  footer a:hover {
    color: #95b3a0; /* Définit la couleur du texte des liens au survol à l'intérieur du pied de page en vert clair */
    text-decoration: none; /* Supprime la décoration de soulignement des liens au survol à l'intérieur du pied de page */
  }

  /* Styles pour les contrôles de formulaire */
  .form-control {
    border-radius: 0; /* Supprime le rayon de bordure des contrôles de formulaire */
  }

  /* Styles pour les zones de texte */
  textarea {
    resize: none; /* Désactive la redimension des zones de texte */
  }