/* Polices d'écriture utilisées pour le site. */
:root {
  --default-font: "Roboto",  system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  --heading-font: "Montserrat",  sans-serif;
  --nav-font: "Poppins",  sans-serif;
}
/* Polices d'écriture utilisées pour le site. */


/* Couleurs globales - Les variables de couleur suivantes sont utilisées sur tout le site web. 
Les mettre à jour ici changera le schéma de couleurs de tout le site */
:root { 
  --background-color: #f6faf3; /* Couleur de fond pour tout le site, y compris les sections individuelles */
  --default-color: #222222; /* Couleur par défaut utilisée pour la majorité du contenu textuel sur tout le site */
  --heading-color: #172a28; /* Couleur pour les titres, sous-titres et titres sur tout le site */
  --accent-color: #008374; /* Couleur d'accent qui représente votre marque sur le site. 
                            Elle est utilisée pour les boutons, les liens et autres éléments qui doivent se démarquer */
  --surface-color: #ffffff; /* La couleur de surface est utilisée comme fond pour les éléments 
                              encadrés dans les sections, tels que les cartes, les boîtes d'icônes 
                              ou d'autres éléments nécessitant une séparation visuelle du fond global. */
  --contrast-color: #ffffff; /* Couleur de contraste pour le texte, assurant la lisibilité 
                               contre les fonds de couleur d'accent, de titre ou par défaut. */
}

/* Couleurs du menu de navigation - Les variables de couleur suivantes sont utilisées spécifiquement 
pour le menu de navigation. 
Elles sont séparées des couleurs globales pour permettre plus d'options de personnalisation */
:root {
  --nav-color: #ffffff;  /* Couleur par défaut des liens du menu de navigation principal */
  --nav-hover-color: #008374; /* Appliqué aux liens du menu de navigation principal lorsqu'ils sont survolés ou actifs */
  --nav-mobile-background-color: #ffffff; /* Utilisé comme couleur de fond pour le menu de navigation mobile */
  --nav-dropdown-background-color: #ffffff; /* Utilisé comme couleur de fond pour les éléments déroulants 
                                              qui apparaissent lors du survol des éléments de navigation principaux */
  --nav-dropdown-color: #01433c; /* Utilisé pour les liens de navigation des éléments déroulants 
                                   dans le menu de navigation. */
  --nav-dropdown-hover-color: #008374; /* Similaire à --nav-hover-color, cette couleur est appliquée 
                                         aux liens de navigation déroulants lorsqu'ils sont survolés. */
}

/* Défilement fluide */
:root {
  scroll-behavior: smooth;
}
/* Défilement fluide */

/* Préréglages de couleurs - Ces classes remplacent les couleurs globales lorsqu'elles 
sont appliquées à une section ou un élément, permettant la réutilisation du même schéma de couleurs. */

/* Classe pour définir un fond clair */
.light-background {
  /* Couleur de fond de la section ou de l'élément */
  --background-color: #f2f9f9;
  /* Couleur de surface pour les éléments internes */
  --surface-color: #ffffff;
}

/* Classe pour définir un fond sombre */
.dark-background {
  /* Couleur de fond de la section ou de l'élément */
  --background-color: #060606;
  /* Couleur par défaut du texte pour garantir la lisibilité */
  --default-color: #ffffff;
  /* Couleur des titres pour garantir la lisibilité */
  --heading-color: #ffffff;
  /* Couleur de surface pour les éléments internes */
  --surface-color: #252525;
  /* Couleur de contraste pour le texte ou les éléments spécifiques */
  --contrast-color: #ffffff;
}

/* Classe pour définir un fond avec la couleur accent */
.accent-background {
  /* Couleur de fond de la section ou de l'élément */
  --background-color: #008374;
  /* Couleur par défaut du texte */
  --default-color: #ffffff;
  /* Couleur des titres */
  --heading-color: #ffffff;
  /* Couleur accent pour les éléments spécifiques */
  --accent-color: #ffffff;
  /* Couleur de surface pour les éléments internes */
  --surface-color: #00b6a1;
  /* Couleur de contraste pour le texte ou les éléments spécifiques */
  --contrast-color: #ffffff;
}




/*--------------------------------------------------------------
# Style général et classes partagées
--------------------------------------------------------------*/


/* Styles globaux pour le corps de la page, mode normal et mode sombre. */
body {
  /* Couleur par défaut du texte */
  color: var(--default-color);
  /* Couleur de fond de la page */
  background-color: var(--background-color);
  /* Police de caractères par défaut */
  font-family: var(--default-font);
}

/* Mode sombre */
/* Classe pour appliquer les styles en mode sombre */
body.dark-mode {
  /* Couleur de fond pour le mode sombre */
  --background-color: #121212;
  /* Couleur par défaut du texte en mode sombre */
  --default-color: #e0e0e0;
  /* Couleur des titres en mode sombre */
  --heading-color: #ffffff;
  /* Couleur accent utilisée pour les éléments interactifs */
  --accent-color: #bb86fc;
  /* Couleur de surface pour les éléments internes en mode sombre */
  --surface-color: #1e1e1e;
  /* Couleur de contraste pour le texte en mode sombre */
  --contrast-color: #ffffff;
  /* Couleur par défaut des liens de navigation */
  --nav-color: #e0e0e0;
  /* Couleur des liens de navigation lorsqu'ils sont survolés ou actifs */
  --nav-hover-color: #bb86fc;
  /* Couleur de fond du menu mobile en mode sombre */
  --nav-mobile-background-color: #1e1e1e;
  /* Couleur de fond des éléments déroulants du menu de navigation */
  --nav-dropdown-background-color: #1e1e1e;
  /* Couleur des liens des éléments déroulants du menu de navigation */
  --nav-dropdown-color: #e0e0e0;
  /* Couleur des liens des éléments déroulants lorsqu'ils sont survolés */
  --nav-dropdown-hover-color: #bb86fc;
}

/* Changement de style du bouton spécifique en mode sombre */
body.dark-mode .btn-dark {
  /* Couleur de fond du bouton en mode sombre */
  background-color: #bb86fc;
  /* Couleur du texte du bouton en mode sombre */
  color: #121212;
}

/* Classe pour ajuster le bouton de bascule du mode sombre */
.dark-mode-toggle {
  /* Marge à gauche ajoutée si nécessaire */
  margin-left: 20px;
}
/* Styles globaux pour le corps de la page, mode normal et mode sombre. */



/* Styles globaux pour les liens */
a {
  /* Couleur par défaut des liens */
  color: var(--accent-color);
  /* Suppression de la décoration par défaut des liens */
  text-decoration: none;
  /* Transition douce pour les interactions avec les liens */
  transition: 0.3s;
}
/* Styles globaux pour les liens */



/* Styles pour les liens lors du survol */
a:hover {
  /* Modification de la couleur du lien lors du survol */
  color: color-mix(in srgb, var(--accent-color), transparent 25%);
  /* Suppression de la décoration lors du survol */
  text-decoration: none;
}
/* Styles pour les liens lors du survol */



/* Styles globaux pour les titres (h1 à h6) */
h1,
h2,
h3,
h4,
h5,
h6 {
  /* Couleur par défaut des titres */
  color: var(--heading-color);
  /* Police spécifique pour les titres */
  font-family: var(--heading-font);
}
/* Styles globaux pour les titres (h1 à h6) */


/* Définition de l'animation pour faire que l'image dans l'en-tête de la page est un effet zoom à l'infini. */
@keyframes zoomAnimation {
  /* État initial : échelle normale */
  0% {
      transform: scale(1);
  }
  /* Milieu de l'animation : zoom à 105% */
  50% {
      transform: scale(1.05); /* Zoom à 105% */
  }
  /* Fin de l'animation : retour à l'échelle normale */
  100% {
      transform: scale(1);
  }
}



/* Classe pour appliquer une animation de zoom en boucle infinie */
.zoom-infinite {
  /* Application de l'animation zoomAnimation avec une durée de 3 secondes */
  animation: zoomAnimation 3s ease-in-out infinite;
  /* Délai de 200ms avant de démarrer l'animation */
  animation-delay: 0.2s;
}
/* Définition de l'animation pour faire que l'image dans l'en-tête de la page est un effet zoom à l'infini. */



/* Bouton Play pulsant
------------------------------*/
/* Classe pour créer un bouton de lecture pulsant */
.pulsating-play-btn {
  /* Largeur du bouton */
  width: 94px;
  /* Hauteur du bouton */
  height: 94px;
  /* Fond avec un dégradé radial utilisant la couleur accent */
  background: radial-gradient(var(--accent-color) 50%, color-mix(in srgb, var(--accent-color), transparent 75%) 52%);
  /* Bordures arrondies pour créer un bouton circulaire */
  border-radius: 50%;
  /* Affichage en bloc pour occuper toute la largeur disponible */
  display: block;
  /* Positionnement relatif pour les éléments enfants positionnés absolument */
  position: relative;
  /* Masquage du débordement du contenu */
  overflow: hidden;
}

/* Styles appliqués avant le contenu du bouton */
.pulsating-play-btn:before {
  /* Aucun contenu texte, juste un élément de style */
  content: "";
  /* Positionnement absolu par rapport à l'élément parent */
  position: absolute;
  /* Largeur du cercle pulsant */
  width: 120px;
  /* Hauteur du cercle pulsant */
  height: 120px;
  /* Aucun délai avant de commencer l'animation */
  animation-delay: 0s;
  /* Application de l'animation de pulsation */
  animation: pulsate-play-btn 2s;
  /* Direction de l'animation : en avant */
  animation-direction: forwards;
  /* Animation infinie */
  animation-iteration-count: infinite;
  /* Fonction de temporisation pour l'animation */
  animation-timing-function: steps;
  /* Opacité initiale du cercle */
  opacity: 1;
  /* Bordure arrondie pour créer un cercle */
  border-radius: 50%;
  /* Bordure avec couleur semi-transparente pour l'effet de pulsation */
  border: 5px solid color-mix(in srgb, var(--accent-color), transparent 30%);
  /* Positionnement du cercle au-dessus et à gauche du bouton */
  top: -15%;
  left: -15%;
  /* Fond transparent du cercle pulsant */
  background: rgba(198, 16, 0, 0);
}

/* Styles appliqués après le contenu du bouton */
.pulsating-play-btn:after {
  /* Aucun contenu texte, juste un élément de style */
  content: "";
  /* Positionnement absolu centré par rapport à l'élément parent */
  position: absolute;
  /* Positionnement horizontal centré */
  left: 50%;
  /* Positionnement vertical centré */
  top: 50%;
  /* Translation pour centrer exactement le triangle */
  transform: translateX(-40%) translateY(-50%);
  /* Largeur initiale du triangle (zéro) */
  width: 0;
  /* Hauteur initiale du triangle (zéro) */
  height: 0;
  /* Bordures pour créer un triangle représentant le symbole de lecture */
  border-top: 10px solid transparent;
  border-bottom: 10px solid transparent;
  border-left: 15px solid #fff;
  /* Index z pour placer le triangle au-dessus des autres éléments */
  z-index: 100;
  /* Transition douce pour les transformations */
  transition: all 400ms cubic-bezier(0.55, 0.055, 0.675, 0.19);
}

/* Styles appliqués au bouton de lecture pulsant lors du survol */
.pulsating-play-btn:hover:before {
  /* Aucun contenu texte, juste un élément de style */
  content: "";
  /* Positionnement absolu centré par rapport à l'élément parent */
  position: absolute;
  /* Positionnement horizontal centré */
  left: 50%;
  /* Positionnement vertical centré */
  top: 50%;
  /* Translation pour centrer exactement le triangle */
  transform: translateX(-40%) translateY(-50%);
  /* Largeur du triangle définie à zéro */
  width: 0;
  /* Hauteur du triangle définie à zéro */
  height: 0;
  /* Suppression des bordures */
  border: none;
  /* Création d'un triangle avec des bordures transparentes */
  border-top: 10px solid transparent;
  border-bottom: 10px solid transparent;
  border-left: 15px solid #fff;
  /* Positionnement au-dessus des autres éléments avec un z-index élevé */
  z-index: 200;
  /* Désactivation de l'animation lors du survol */
  animation: none;
  /* Suppression des bordures arrondies */
  border-radius: 0;
}

/* Styles appliqués après le contenu du bouton lors du survol */
.pulsating-play-btn:hover:after {
  /* Modification de la bordure gauche pour utiliser la couleur accent */
  border-left: 15px solid var(--accent-color);
  /* Transformation pour agrandir le triangle de manière significative */
  transform: scale(20);
}

/* Définition de l'animation de pulsation pour le bouton de lecture */
@keyframes pulsate-play-btn {
  /* Début de l'animation : réduction de l'échelle et opacité maximale */
  0% {
    transform: scale(0.6, 0.6);
    opacity: 1;
  }

  /* Fin de l'animation : retour à l'échelle normale et opacité minimale */
  100% {
    transform: scale(1, 1);
    opacity: 0;
  }
}
/* Bouton Play pulsant
------------------------------*/




/* Messages du formulaire PHP Email
------------------------------*/
/* Styles pour le message d'erreur du formulaire PHP */
.php-email-form .error-message {
  /* Le message est caché par défaut */
  display: none;
  /* Couleur de fond rouge pour indiquer une erreur */
  background: #df1529;
  /* Couleur blanche pour le texte */
  color: #ffffff;
  /* Alignement du texte à gauche */
  text-align: left;
  /* Espacement intérieur autour du message */
  padding: 15px;
  /* Marge en bas du message pour l'espacement */
  margin-bottom: 24px;
  /* Texte en gras pour souligner l'importance */
  font-weight: 600;
}

/* Styles pour le message de confirmation d'envoi du formulaire PHP */
.php-email-form .sent-message {
  /* Le message est caché par défaut */
  display: none;
  /* Couleur blanche pour le texte */
  color: #ffffff;
  /* Couleur de fond verte pour indiquer le succès */
  background: #059652;
  /* Alignement du texte au centre */
  text-align: center;
  /* Espacement intérieur autour du message */
  padding: 15px;
  /* Marge en bas du message pour l'espacement */
  margin-bottom: 24px;
  /* Texte en gras pour souligner l'importance */
  font-weight: 600;
}

/* Styles pour l'indicateur de chargement lors de l'envoi du formulaire PHP */
.php-email-form .loading {
  /* L'indicateur est caché par défaut */
  display: none;
  /* Couleur de fond basée sur la couleur de surface définie */
  background: var(--surface-color);
  /* Alignement du texte au centre */
  text-align: center;
  /* Espacement intérieur autour de l'indicateur */
  padding: 15px;
  /* Marge en bas de l'indicateur pour l'espacement */
  margin-bottom: 24px;
}

/* Styles pour l'animation de l'indicateur de chargement */
.php-email-form .loading:before {
  /* Aucun contenu texte, juste un élément de style */
  content: "";
  /* Affichage en ligne de l'élément */
  display: inline-block;
  /* Bordures arrondies pour créer un cercle */
  border-radius: 50%;
  /* Largeur du cercle de chargement */
  width: 24px;
  /* Hauteur du cercle de chargement */
  height: 24px;
  /* Marge pour espacer l'indicateur des autres éléments */
  margin: 0 10px -6px 0;
  /* Bordure du cercle avec une couleur d'accent */
  border: 3px solid var(--accent-color);
  /* Bordure supérieure avec la couleur de surface pour l'effet de rotation */
  border-top-color: var(--surface-color);
  /* Animation de rotation du cercle */
  animation: php-email-form-loading 1s linear infinite;
}

/* Définition de l'animation pour l'indicateur de chargement */
@keyframes php-email-form-loading {
  /* Début de l'animation : aucune rotation */
  0% {
    transform: rotate(0deg);
  }

  /* Fin de l'animation : rotation complète de 360 degrés */
  100% {
    transform: rotate(360deg);
  }
}
/* Messages du formulaire PHP Email
------------------------------*/




/*--------------------------------------------------------------
# En-tête, styles pour toutes les pages
--------------------------------------------------------------*/
/* Styles pour l'en-tête global du site */
.header {
  /* Couleur de fond pour l'en-tête */
  --background-color: #008374;
  /* Couleur des titres dans l'en-tête */
  --heading-color: #ffffff;
  /* Couleur par défaut du texte dans l'en-tête */
  color: var(--default-color);
  /* Transition douce pour tous les changements de style */
  transition: all 0.5s;
  /* Z-index élevé pour s'assurer que l'en-tête reste au-dessus des autres éléments */
  z-index: 997;
  /* Application de la couleur de fond définie */
  background-color: var(--background-color);
}

/* Styles pour la barre supérieure de l'en-tête */
.header .topbar {
  /* Couleur de fond pour la barre supérieure avec un mélange de la couleur d'accent et du noir */
  background-color: color-mix(in srgb, var(--accent-color) 90%, black 10%);
  /* Hauteur fixe de la barre supérieure */
  height: 40px;
  /* Suppression des marges intérieures */
  padding: 0;
  /* Taille de la police dans la barre supérieure */
  font-size: 14px;
  /* Transition douce pour les changements de style */
  transition: all 0.5s;
}

/* Styles pour les icônes de contact dans la barre supérieure */
.header .topbar .contact-info i {
  /* Style de police normal pour les icônes */
  font-style: normal;
  /* Couleur des icônes de contact */
  color: var(--contrast-color);
}

/* Styles pour les liens et les spans à l'intérieur des icônes de contact */
.header .topbar .contact-info i a,
.header .topbar .contact-info i span {
  /* Espacement à gauche du texte pour l'alignement */
  padding-left: 5px;
  /* Couleur du texte des liens et des spans */
  color: var(--contrast-color);
}

/* Ajustements des styles pour les écrans de petite taille */
@media (max-width: 575px) {

  /* Réduction de la taille de la police pour les contacts dans la barre supérieure sur les petits écrans */
  .header .topbar .contact-info i a,
  .header .topbar .contact-info i span {
    font-size: 13px;
  }
}

/* Styles pour les liens de contact dans la barre supérieure de l'en-tête */
.header .topbar .contact-info i a {
  /* Hauteur de ligne nulle pour rapprocher le texte et les icônes */
  line-height: 0;
  /* Transition douce de 0,3 seconde pour les changements de style */
  transition: 0.3s;
}

/* Styles lors du survol des liens de contact dans la barre supérieure */
.header .topbar .contact-info i a:hover {
  /* Changement de couleur lors du survol pour contraster avec le fond */
  color: var(--contrast-color);
  /* Ajout de soulignement pour indiquer l'interactivité */
  text-decoration: underline;
}

/* Styles pour les liens des réseaux sociaux dans la barre supérieure */
.header .topbar .social-links a {
  /* Couleur des liens avec une transparence de 40% */
  color: color-mix(in srgb, var(--contrast-color), transparent 40%);
  /* Hauteur de ligne nulle pour aligner les icônes avec le texte */
  line-height: 0;
  /* Transition douce de 0,3 seconde pour les changements de style */
  transition: 0.3s;
  /* Ajout d'une marge à gauche pour espacer les liens sociaux */
  margin-left: 20px;
}

/* Styles lors du survol des liens des réseaux sociaux dans la barre supérieure */
.header .topbar .social-links a:hover {
  /* Changement de couleur lors du survol pour contraster avec le fond */
  color: var(--contrast-color);
}

/* Styles pour la section de branding de l'en-tête */
.header .branding {
  /* Hauteur minimale pour le branding */
  min-height: 60px;
  /* Espacement intérieur vertical */
  padding: 10px 0;
}

/* Styles pour le logo dans la section de branding */
.header .logo {
  /* Hauteur de ligne normale pour le logo */
  line-height: 1;
}

/* Styles pour l'image du logo */
.header .logo img {
  /* Hauteur maximale de l'image du logo */
  max-height: 36px;
  /* Marge à droite pour espacer l'image du texte */
  margin-right: 8px;
}

/* Styles pour le texte du logo (h1) */
.header .logo h1 {
  /* Taille de la police pour le texte du logo */
  font-size: 30px;
  /* Suppression des marges autour du texte du logo */
  margin: 0;
  /* Poids de la police pour rendre le texte en gras */
  font-weight: 700;
  /* Couleur du texte du logo */
  color: var(--heading-color);
}

/* Styles pour un span dans le texte du logo */
.header .logo span {
  /* Taille de la police pour le texte du span */
  font-size: 32px;
  /* Marge à gauche pour espacer le span du texte précédent */
  margin-left: 2px;
  /* Couleur du texte du span, généralement utilisé pour un effet de survol */
  color: var(--nav-hover-color);
}

/* Styles pour l'en-tête lorsqu'il est en mode "scrolled" */
.scrolled .header {
  /* Ajout d'une ombre portée sous l'en-tête lorsqu'on fait défiler la page */
  box-shadow: 0px 0 18px rgba(0, 0, 0, 0.1);
}
/*--------------------------------------------------------------
# En-tête, styles pour toutes les pages
--------------------------------------------------------------*/



/*--------------------------------------------------------------
# Menu de navigation
--------------------------------------------------------------*/
/* Navigation de bureau */
/* Styles pour les écrans larges, à partir de 1200px de largeur */
@media (min-width: 1200px) {
  /* Styles pour le menu de navigation */
  .navmenu {
    /* Suppression des marges intérieures */
    padding: 0;
  }

  /* Styles pour les listes dans le menu de navigation */
  .navmenu ul {
    /* Suppression des marges extérieures */
    margin: 0;
    /* Suppression des marges intérieures */
    padding: 0;
    /* Affichage en flexbox pour aligner les éléments horizontalement */
    display: flex;
    /* Suppression des puces de liste */
    list-style: none;
    /* Alignement vertical des éléments de la liste */
    align-items: center;
  }

  /* Styles pour les éléments de liste dans le menu de navigation */
  .navmenu li {
    /* Positionnement relatif pour permettre un positionnement absolu des sous-éléments */
    position: relative;
  }

  /* Styles pour les éléments de premier niveau dans le menu de navigation */
  .navmenu>ul>li {
    /* Empêche le texte de se diviser en plusieurs lignes */
    white-space: nowrap;
    /* Espacement intérieur pour chaque élément du menu */
    padding: 15px 14px;
  }

  /* Suppression de la marge droite pour le dernier élément du menu */
  .navmenu>ul>li:last-child {
    /* Pas d'espacement à droite pour le dernier élément */
    padding-right: 0;
  }

  /* Styles pour les liens dans le menu de navigation */
  .navmenu a,
  .navmenu a:focus {
    /* Couleur du texte des liens de navigation */
    color: var(--nav-color);
    /* Taille de la police des liens */
    font-size: 15px;
    /* Espacement intérieur horizontal pour les liens */
    padding: 0 2px;
    /* Police utilisée pour les liens de navigation */
    font-family: var(--nav-font);
    /* Poids de la police pour rendre le texte en semi-gras */
    font-weight: 500;
    /* Affichage en flexbox pour aligner les éléments horizontalement */
    display: flex;
    /* Alignement vertical des éléments */
    align-items: center;
    /* Justification de l'espace entre les éléments enfants */
    justify-content: space-between;
    /* Empêche le texte de se diviser en plusieurs lignes */
    white-space: nowrap;
    /* Transition douce pour les changements de style */
    transition: 0.3s;
    /* Positionnement relatif pour permettre des ajustements supplémentaires */
    position: relative;
  }

  /* Styles pour les icônes dans les liens de navigation */
  .navmenu a i,
  .navmenu a:focus i {
    /* Taille de la police des icônes */
    font-size: 12px;
    /* Hauteur de ligne nulle pour aligner les icônes avec le texte */
    line-height: 0;
    /* Marge à gauche pour espacer l'icône du texte */
    margin-left: 5px;
    /* Transition douce pour les changements de style des icônes */
    transition: 0.3s;
  }
}


 /* Styles pour l'effet sous les liens de navigation */
.navmenu>ul>li>a:before {
  /* Aucun contenu texte, juste un élément de style */
  content: "";
  /* Positionnement absolu par rapport au lien */
  position: absolute;
  /* Hauteur de la ligne sous le lien */
  height: 2px;
  /* Positionnement en bas du lien avec un léger décalage */
  bottom: -6px;
  /* Alignement à gauche du lien */
  left: 0;
  /* Couleur de fond de la ligne, généralement la couleur de survol */
  background-color: var(--nav-hover-color);
  /* Ligne cachée par défaut */
  visibility: hidden;
  /* Largeur initiale de la ligne (nulle) */
  width: 0px;
  /* Transition douce pour la largeur et la visibilité */
  transition: all 0.3s ease-in-out 0s;
}

/* Styles pour l'affichage de la ligne sous le lien lors du survol ou pour l'élément actif */
.navmenu a:hover:before,
.navmenu li:hover>a:before,
.navmenu .active:before {
  /* Rendre la ligne visible */
  visibility: visible;
  /* Étendre la ligne sur toute la largeur du lien */
  width: 100%;
}

/* Styles pour les liens de navigation lors du survol ou pour l'élément actif */
.navmenu li:hover>a,
.navmenu .active,
.navmenu .active:focus {
  /* Couleur du texte des liens lorsqu'ils sont survolés ou actifs */
  color: var(--nav-color);
}

/* Styles pour les sous-menus déroulants dans la navigation */
.navmenu .dropdown ul {
  /* Suppression des marges extérieures */
  margin: 0;
  /* Espacement intérieur pour les éléments du sous-menu */
  padding: 10px 0;
  /* Couleur de fond pour le sous-menu déroulant */
  background: var(--nav-dropdown-background-color);
  /* Affichage en bloc des sous-éléments */
  display: block;
  /* Positionnement absolu par rapport à l'élément parent */
  position: absolute;
  /* Sous-menu caché par défaut */
  visibility: hidden;
  /* Positionnement à gauche avec un léger décalage */
  left: 14px;
  /* Positionnement en dessous de l'élément parent avec un léger décalage */
  top: 130%;
  /* Opacité initiale du sous-menu (invisible) */
  opacity: 0;
  /* Transition douce pour la visibilité et l'opacité */
  transition: 0.3s;
  /* Bordures arrondies pour les coins du sous-menu */
  border-radius: 4px;
  /* Z-index élevé pour s'assurer que le sous-menu reste au-dessus des autres éléments */
  z-index: 99;
  /* Ajout d'une ombre portée sous le sous-menu */
  box-shadow: 0px 0px 30px rgba(0, 0, 0, 0.1);
}

/* Styles pour les éléments de liste dans les sous-menus déroulants */
.navmenu .dropdown ul li {
  /* Largeur minimale pour chaque élément du sous-menu */
  min-width: 200px;
}


/* Styles pour les liens dans les sous-menus déroulants */
.navmenu .dropdown ul a {
  /* Espacement intérieur pour les liens du sous-menu */
  padding: 10px 20px;
  /* Taille de la police des liens du sous-menu */
  font-size: 15px;
  /* Aucun changement de casse pour le texte des liens */
  text-transform: none;
  /* Couleur du texte des liens dans le sous-menu */
  color: var(--nav-dropdown-color);
}

/* Styles pour les icônes dans les liens des sous-menus déroulants */
.navmenu .dropdown ul a i {
  /* Taille de la police des icônes dans le sous-menu */
  font-size: 12px;
}

/* Styles pour les liens des sous-menus lors du survol ou lorsque l'élément est actif */
.navmenu .dropdown ul a:hover,
.navmenu .dropdown ul .active:hover,
.navmenu .dropdown ul li:hover>a {
  /* Changement de couleur lors du survol pour indiquer l'interactivité */
  color: var(--nav-dropdown-hover-color);
}

/* Styles pour afficher le sous-menu lorsqu'il est survolé */
.navmenu .dropdown:hover>ul {
  /* Rendre le sous-menu visible en augmentant l'opacité */
  opacity: 1;
  /* Ajustement de la position du sous-menu vers le haut */
  top: 100%;
  /* Rendre le sous-menu visible */
  visibility: visible;
}

/* Styles pour les sous-menus déroulants imbriqués */
.navmenu .dropdown .dropdown ul {
  /* Positionnement initial du sous-menu imbriqué */
  top: 0;
  /* Positionnement à gauche avec un décalage pour le sous-menu imbriqué */
  left: -90%;
  /* Sous-menu imbriqué caché par défaut */
  visibility: hidden;
}

/* Styles pour afficher le sous-menu imbriqué lorsqu'il est survolé */
.navmenu .dropdown .dropdown:hover>ul {
  /* Rendre le sous-menu imbriqué visible en augmentant l'opacité */
  opacity: 1;
  /* Ajustement de la position verticale du sous-menu imbriqué */
  top: 0;
  /* Positionnement à gauche avec un décalage pour le sous-menu imbriqué */
  left: -100%;
  /* Rendre le sous-menu imbriqué visible */
  visibility: visible;
}


/* Navigation mobile */
/* Styles pour les écrans plus petits, jusqu'à 1199px de largeur */
@media (max-width: 1199px) {
  /* Styles pour l'icône de bascule du menu mobile */
.mobile-nav-toggle {
  /* Couleur de l'icône de bascule, généralement la couleur des liens de navigation */
  color: var(--nav-color);
  /* Taille de la police pour l'icône de bascule */
  font-size: 28px;
  /* Hauteur de ligne nulle pour aligner l'icône avec d'autres éléments */
  line-height: 0;
  /* Marge à droite pour espacer l'icône des autres éléments */
  margin-right: 10px;
  /* Changement du curseur pour indiquer que l'icône est cliquable */
  cursor: pointer;
  /* Transition douce pour les changements de couleur lors des interactions */
  transition: color 0.3s;
}


 /* Styles pour le menu de navigation */
.navmenu {
  /* Suppression des marges intérieures pour le menu de navigation */
  padding: 0;
  /* Z-index élevé pour s'assurer que le menu de navigation reste au-dessus des autres éléments */
  z-index: 9997;
}


 /* Styles pour les listes de navigation dans le menu */
.navmenu ul {
  /* Masquer le menu par défaut (utilisé pour les menus mobiles) */
  display: none;
  /* Suppression des puces de liste */
  list-style: none;
  /* Positionnement absolu pour permettre de superposer le menu */
  position: absolute;
  /* Positionnement du menu avec des marges internes par rapport aux bords de l'écran */
  inset: 60px 20px 20px 20px;
  /* Espacement intérieur pour les éléments du menu */
  padding: 10px 0;
  /* Suppression des marges extérieures */
  margin: 0;
  /* Bordures arrondies pour les coins du menu */
  border-radius: 6px;
  /* Couleur de fond pour le menu mobile */
  background-color: var(--nav-mobile-background-color);
  /* Bordure subtile autour du menu avec un effet de transparence */
  border: 1px solid color-mix(in srgb, var(--default-color), transparent 90%);
  /* Suppression de l'ombre portée (par défaut) */
  box-shadow: none;
  /* Activation du défilement vertical si le contenu dépasse la hauteur de l'écran */
  overflow-y: auto;
  /* Transition douce pour les changements de style */
  transition: 0.3s;
  /* Z-index élevé pour s'assurer que le menu reste au-dessus des autres éléments */
  z-index: 9998;
}

/* Styles pour les liens dans le menu de navigation */
.navmenu a,
.navmenu a:focus {
  /* Couleur du texte des liens dans le menu de navigation */
  color: var(--nav-dropdown-color);
  /* Espacement intérieur pour les liens */
  padding: 10px 20px;
  /* Police utilisée pour les liens du menu de navigation */
  font-family: var(--nav-font);
  /* Taille de la police des liens */
  font-size: 17px;
  /* Poids de la police pour rendre le texte en semi-gras */
  font-weight: 500;
  /* Affichage en flexbox pour aligner les éléments horizontalement */
  display: flex;
  /* Alignement vertical des éléments au centre */
  align-items: center;
  /* Justification de l'espace entre les éléments enfants */
  justify-content: space-between;
  /* Empêche le texte de se diviser en plusieurs lignes */
  white-space: nowrap;
  /* Transition douce pour les changements de style */
  transition: 0.3s;
}


  /* Styles pour les icônes dans les liens de navigation et lors du focus */
.navmenu a i,
.navmenu a:focus i {
  /* Taille de la police pour les icônes */
  font-size: 12px;
  /* Hauteur de ligne nulle pour aligner l'icône avec le texte */
  line-height: 0;
  /* Marge à gauche pour espacer l'icône du texte */
  margin-left: 5px;
  /* Largeur fixe pour l'icône, pour garantir une forme circulaire */
  width: 30px;
  /* Hauteur fixe pour l'icône, pour garantir une forme circulaire */
  height: 30px;
  /* Affichage en flexbox pour aligner l'icône au centre */
  display: flex;
  /* Alignement vertical de l'icône au centre */
  align-items: center;
  /* Alignement horizontal de l'icône au centre */
  justify-content: center;
  /* Bordures arrondies pour créer une icône circulaire */
  border-radius: 50%;
  /* Transition douce pour les changements de style, comme la couleur de fond */
  transition: 0.3s;
  /* Couleur de fond de l'icône avec une transparence de 90% */
  background-color: color-mix(in srgb, var(--accent-color), transparent 90%);
}


  /* Styles pour les icônes dans les liens de navigation lors du survol et du focus */
.navmenu a i:hover,
.navmenu a:focus i:hover {
  /* Changement de couleur de fond pour l'icône lors du survol ou du focus */
  background-color: var(--accent-color);
  /* Changement de couleur du texte de l'icône pour contraster avec le fond */
  color: var(--contrast-color);
}

/* Styles pour les liens de navigation lors du survol ou lorsque l'élément est actif */
.navmenu a:hover,
.navmenu .active,
.navmenu .active:focus {
  /* Changement de couleur du texte des liens lorsqu'ils sont survolés ou actifs */
  color: var(--nav-dropdown-hover-color);
}

/* Styles pour les icônes dans les liens actifs ou lorsque l'élément est en focus */
.navmenu .active i,
.navmenu .active:focus i {
  /* Changement de couleur de fond pour l'icône dans les liens actifs */
  background-color: var(--accent-color);
  /* Changement de couleur du texte de l'icône pour contraster avec le fond */
  color: var(--contrast-color);
  /* Rotation de l'icône à 180 degrés pour un effet visuel distinct */
  transform: rotate(180deg);
}

/* Styles pour les sous-menus déroulants dans la navigation */
.navmenu .dropdown ul {
  /* Positionnement statique par rapport à l'élément parent */
  position: static;
  /* Le sous-menu est masqué par défaut */
  display: none;
  /* Z-index pour s'assurer que le sous-menu reste au-dessus des autres éléments */
  z-index: 99;
  /* Espacement intérieur pour les éléments du sous-menu */
  padding: 10px 0;
  /* Marges autour du sous-menu */
  margin: 10px 20px;
  /* Couleur de fond pour le sous-menu déroulant */
  background-color: var(--nav-dropdown-background-color);
  /* Transition douce pour l'affichage du sous-menu */
  transition: all 0.5s ease-in-out;
}

/* Styles pour les sous-sous-menus déroulants */
.navmenu .dropdown ul ul {
  /* Couleur de fond légèrement transparente pour les sous-sous-menus */
  background-color: rgba(33, 37, 41, 0.1);
}

  /* Styles pour le sous-menu actif dans un menu déroulant */
.navmenu .dropdown>.dropdown-active {
  /* Afficher le sous-menu lorsqu'il est actif */
  display: block;
  /* Couleur de fond légèrement transparente pour l'élément actif */
  background-color: rgba(33, 37, 41, 0.03);
}

/* Styles pour l'état actif du menu mobile */
.mobile-nav-active {
  /* Désactivation du défilement du contenu en arrière-plan */
  overflow: hidden;
}

/* Styles pour l'icône de bascule du menu mobile lorsque le menu est actif */
.mobile-nav-active .mobile-nav-toggle {
  /* Couleur blanche pour l'icône de bascule du menu mobile */
  color: #fff;
  /* Positionnement absolu pour l'icône de bascule */
  position: absolute;
  /* Taille de la police pour l'icône de bascule lorsqu'elle est active */
  font-size: 32px;
  /* Positionnement de l'icône en haut à 15 pixels du bord supérieur */
  top: 15px;
  /* Positionnement de l'icône à droite avec 15 pixels du bord droit */
  right: 15px;
  /* Suppression de la marge droite */
  margin-right: 0;
  /* Z-index élevé pour s'assurer que l'icône reste au-dessus des autres éléments */
  z-index: 9999;
}

/* Styles pour le menu de navigation lorsqu'il est en mode mobile actif */
.mobile-nav-active .navmenu {
  /* Positionnement fixe pour que le menu reste visible lors du défilement */
  position: fixed;
  /* Désactivation du défilement du contenu dans le menu mobile */
  overflow: hidden;
  /* Positionnement du menu pour occuper toute la fenêtre */
  inset: 0;
  /* Couleur de fond sombre et légèrement transparente pour le menu mobile */
  background: rgba(33, 37, 41, 0.8);
  /* Transition douce pour l'apparition du menu mobile */
  transition: 0.3s;
}


  /* Styles pour afficher le menu de navigation mobile lorsqu'il est actif */
.mobile-nav-active .navmenu>ul {
  /* Afficher le menu de navigation (liste) lorsque le mode mobile est actif */
  display: block;
}

}
/*--------------------------------------------------------------
# Menu de navigation
--------------------------------------------------------------*/



/*--------------------------------------------------------------
# Pied de page global
--------------------------------------------------------------*/
/* Styles pour le pied de page global */
.footer {
  /* Couleur du texte par défaut dans le pied de page */
  color: var(--default-color);
  /* Couleur de fond du pied de page */
  background-color: var(--background-color);
  /* Taille de la police pour le texte dans le pied de page */
  font-size: 14px;
  /* Positionnement relatif pour permettre un positionnement absolu des éléments enfants si nécessaire */
  position: relative;
}

/* Styles pour la section supérieure du pied de page */
.footer .footer-top {
  /* Espacement supérieur pour la section supérieure du pied de page */
  padding-top: 50px;
}

/* Styles pour le logo dans la section "À propos" du pied de page */
.footer .footer-about .logo {
  /* Hauteur de ligne normalisée pour le logo */
  line-height: 1;
  /* Marge inférieure pour espacer le logo des autres éléments */
  margin-bottom: 25px;
}


/* Styles pour l'image du logo dans la section "À propos" du pied de page */
.footer .footer-about .logo img {
  /* Hauteur maximale pour l'image du logo afin de s'assurer qu'elle reste proportionnée */
  max-height: 40px;
  /* Marge à droite pour espacer l'image du texte adjacent */
  margin-right: 6px;
}

/* Styles pour le texte adjacent au logo dans la section "À propos" du pied de page */
.footer .footer-about .logo span {
  /* Couleur du texte adjacent au logo */
  color: var(--heading-color);
  /* Taille de la police pour le texte du logo */
  font-size: 30px;
  /* Poids de la police pour rendre le texte en gras */
  font-weight: 700;
  /* Espacement des lettres pour donner plus d'espace entre chaque caractère */
  letter-spacing: 1px;
  /* Police utilisée pour le texte du logo */
  font-family: var(--heading-font);
}

/* Styles pour les paragraphes dans la section "À propos" du pied de page */
.footer .footer-about p {
  /* Taille de la police pour les paragraphes */
  font-size: 14px;
  /* Police utilisée pour le texte des paragraphes */
  font-family: var(--heading-font);
}

/* Styles pour les liens des réseaux sociaux dans le pied de page */
.footer .social-links a {
  /* Utilisation de flexbox pour centrer le contenu du lien (icône) */
  display: flex;
  /* Alignement vertical des éléments au centre */
  align-items: center;
  /* Alignement horizontal des éléments au centre */
  justify-content: center;
  /* Largeur fixe pour chaque lien (cercle) */
  width: 40px;
  /* Hauteur fixe pour chaque lien (cercle) */
  height: 40px;
  /* Bordures arrondies pour créer un lien en forme de cercle */
  border-radius: 50%;
  /* Bordure du lien avec une transparence de 50% */
  border: 1px solid color-mix(in srgb, var(--default-color), transparent 50%);
  /* Taille de la police pour l'icône à l'intérieur du lien */
  font-size: 16px;
  /* Couleur de l'icône dans le lien avec une transparence de 50% */
  color: color-mix(in srgb, var(--default-color), transparent 50%);
  /* Marge à droite pour espacer les liens les uns des autres */
  margin-right: 10px;
  /* Transition douce pour les changements de style lors de l'interaction */
  transition: 0.3s;
}

/* Styles pour les liens des réseaux sociaux dans le pied de page lors du survol */
.footer .social-links a:hover {
  /* Changement de couleur de l'icône dans le lien lors du survol */
  color: var(--default-color);
  /* Changement de couleur de la bordure du lien lors du survol */
  border-color: var(--default-color);
}

/* Styles pour les titres des sections dans le pied de page */
.footer h4 {
  /* Taille de la police pour les titres des sections */
  font-size: 16px;
  /* Poids de la police pour rendre les titres en gras */
  font-weight: bold;
  /* Positionnement relatif pour permettre le positionnement d'éléments enfants */
  position: relative;
  /* Espacement inférieur pour séparer le titre des autres éléments */
  padding-bottom: 12px;
}

/* Styles pour les liens dans le pied de page */
.footer .footer-links {
  /* Marge inférieure pour espacer les liens des autres éléments dans le pied de page */
  margin-bottom: 30px;
}

/* Styles pour les listes de liens dans le pied de page */
.footer .footer-links ul {
  /* Suppression des puces de liste */
  list-style: none;
  /* Suppression des marges intérieures */
  padding: 0;
  /* Suppression des marges extérieures */
  margin: 0;
}

/* Styles pour les icônes dans les listes de liens du pied de page */
.footer .footer-links ul i {
  /* Espacement à droite pour séparer l'icône du texte */
  padding-right: 2px;
  /* Taille de la police pour les icônes dans les listes de liens */
  font-size: 12px;
  /* Hauteur de ligne nulle pour aligner les icônes avec le texte */
  line-height: 0;
}

/* Styles pour les éléments de liste dans les listes de liens du pied de page */
.footer .footer-links ul li {
  /* Espacement vertical pour chaque élément de liste */
  padding: 10px 0;
  /* Utilisation de flexbox pour aligner les icônes et le texte horizontalement */
  display: flex;
  /* Alignement vertical des éléments au centre */
  align-items: center;
}


/* Styles pour le premier élément de liste dans les listes de liens du pied de page */
.footer .footer-links ul li:first-child {
  /* Suppression de l'espacement supérieur pour le premier élément */
  padding-top: 0;
}

/* Styles pour les liens dans les listes de liens du pied de page */
.footer .footer-links ul a {
  /* Couleur du texte des liens avec une transparence de 30% */
  color: color-mix(in srgb, var(--default-color), transparent 30%);
  /* Affichage en ligne pour les liens avec possibilité de marge/padding */
  display: inline-block;
  /* Hauteur de ligne normale pour un espacement cohérent */
  line-height: 1;
}

/* Styles pour les liens dans les listes de liens lors du survol */
.footer .footer-links ul a:hover {
  /* Changement de la couleur du texte lors du survol pour améliorer la visibilité */
  color: var(--default-color);
}

/* Styles pour les paragraphes dans la section de contact du pied de page */
.footer .footer-contact p {
  /* Marge inférieure pour espacer les paragraphes */
  margin-bottom: 5px;
}

/* Styles pour la section des droits d'auteur dans le pied de page */
.footer .copyright {
  /* Espacement supérieur pour la section des droits d'auteur */
  padding-top: 30px;
  /* Espacement inférieur pour la section des droits d'auteur */
  padding-bottom: 30px;
  /* Bordure supérieure subtile avec une transparence de 90% */
  border-top: 1px solid color-mix(in srgb, var(--default-color), transparent 90%);
}

/* Styles pour les paragraphes dans la section des droits d'auteur */
.footer .copyright p {
  /* Suppression de la marge inférieure pour un espacement cohérent */
  margin-bottom: 0;
}

/* Styles pour la section des crédits dans le pied de page */
.footer .credits {
  /* Marge supérieure pour espacer la section des crédits des autres éléments */
  margin-top: 4px;
  /* Taille de la police pour le texte des crédits */
  font-size: 13px;
}
/*--------------------------------------------------------------
# Pied de page global
--------------------------------------------------------------*/


/*--------------------------------------------------------------
# Préchargement
--------------------------------------------------------------*/
/* Styles pour l'élément de préchargement */
#preloader {
  /* Positionnement fixe pour couvrir toute la fenêtre, même lors du défilement */
  position: fixed;
  /* Positionnement de l'élément pour couvrir toute la zone visible */
  inset: 0;
  /* Z-index très élevé pour s'assurer que l'élément de préchargement reste au-dessus de tout le contenu */
  z-index: 999999;
  /* Désactivation du défilement du contenu sous le préchargeur */
  overflow: hidden;
  /* Couleur de fond pour l'élément de préchargement */
  background: var(--background-color);
  /* Transition douce lors de la disparition de l'élément de préchargement */
  transition: all 0.6s ease-out;
}

/* Styles pour l'animation de l'élément à l'intérieur du préchargeur */
#preloader:before {
  /* Contenu vide utilisé pour afficher l'animation */
  content: "";
  /* Positionnement fixe pour centrer l'animation dans la fenêtre */
  position: fixed;
  /* Centrage vertical de l'animation */
  top: calc(50% - 30px);
  /* Centrage horizontal de l'animation */
  left: calc(50% - 30px);
  /* Bordure épaisse pour créer l'effet de cercle animé */
  border: 6px solid #ffffff;
  /* Couleurs alternées pour créer l'effet de rotation */
  border-color: var(--accent-color) transparent var(--accent-color) transparent;
  /* Bordures arrondies pour créer un cercle parfait */
  border-radius: 50%;
  /* Dimensions fixes pour le cercle animé */
  width: 60px;
  height: 60px;
  /* Animation continue de rotation pour le cercle */
  animation: animate-preloader 1.5s linear infinite;
}

/* Définition de l'animation de rotation pour l'élément de préchargement */
@keyframes animate-preloader {
  /* Début de l'animation (aucune rotation) */
  0% {
    transform: rotate(0deg);
  }
  /* Fin de l'animation (rotation complète à 360 degrés) */
  100% {
    transform: rotate(360deg);
  }
}
/*--------------------------------------------------------------
# Préchargement
--------------------------------------------------------------*/



/*--------------------------------------------------------------
# Bouton de retour en haut de la page
--------------------------------------------------------------*/
/* Styles pour le bouton de retour en haut de la page */
.scroll-top {
  /* Positionnement fixe pour rester visible lors du défilement de la page */
  position: fixed;
  /* Le bouton est caché par défaut */
  visibility: hidden;
  /* Transparence totale par défaut pour le bouton */
  opacity: 0;
  /* Positionnement à 15 pixels du bord droit de la fenêtre */
  right: 15px;
  /* Positionnement en dehors de la fenêtre, en bas */
  bottom: -15px;
  /* Z-index élevé pour s'assurer que le bouton reste au-dessus des autres éléments */
  z-index: 99999;
  /* Couleur de fond pour le bouton */
  background-color: var(--accent-color);
  /* Largeur fixe pour le bouton */
  width: 44px;
  /* Hauteur fixe pour le bouton */
  height: 44px;
  /* Bordures arrondies pour créer un bouton circulaire */
  border-radius: 50px;
  /* Transition douce pour les changements de style, comme l'apparition ou les changements de couleur */
  transition: all 0.4s;
}

/* Styles pour l'icône à l'intérieur du bouton de retour en haut */
.scroll-top i {
  /* Taille de la police pour l'icône */
  font-size: 24px;
  /* Couleur de l'icône pour contraster avec le fond du bouton */
  color: var(--contrast-color);
  /* Hauteur de ligne nulle pour aligner l'icône correctement */
  line-height: 0;
}

/* Styles pour le bouton de retour en haut lors du survol */
.scroll-top:hover {
  /* Couleur de fond légèrement transparente lors du survol */
  background-color: color-mix(in srgb, var(--accent-color), transparent 20%);
  /* Couleur du texte/élément à l'intérieur du bouton pour maintenir le contraste */
  color: var(--contrast-color);
}


/* Styles pour le bouton de retour en haut lorsqu'il est actif */
.scroll-top.active {
  /* Le bouton devient visible */
  visibility: visible;
  /* Opacité totale pour rendre le bouton complètement opaque */
  opacity: 1;
  /* Positionnement à 15 pixels du bord inférieur de la fenêtre pour le rendre visible */
  bottom: 15px;
}
/*--------------------------------------------------------------
# Bouton de retour en haut de la page
--------------------------------------------------------------*/




/*--------------------------------------------------------------
# Désactiver le délai d'animation aos sur les appareils mobiles
--------------------------------------------------------------*/
/* Styles appliqués aux éléments avec un délai d'animation AOS sur les écrans de moins de 768px de large */
@media screen and (max-width: 768px) {
  /* Sélection des éléments ayant un attribut "data-aos-delay" */
  [data-aos-delay] {
    /* Suppression du délai de transition pour les animations sur les petits écrans */
    transition-delay: 0 !important;
  }
}
/*--------------------------------------------------------------
# Désactiver le délai d'animation aos sur les appareils mobiles
--------------------------------------------------------------*/




/*--------------------------------------------------------------
# Titres globaux de pages et fil d'Ariane
--------------------------------------------------------------*/
/* Styles pour la section du titre de la page */
.page-title {
  /* Définition de la couleur de fond pour la section du titre de la page */
  --background-color: var(--accent-color);
  /* Définition de la couleur par défaut pour le texte */
  --default-color: #fff;
  /* Définition de la couleur des titres pour la section */
  --heading-color: #fff;
  /* Application de la couleur par défaut au texte de la section */
  color: var(--default-color);
  /* Application de la couleur de fond à la section */
  background-color: var(--background-color);
  /* Positionnement relatif pour permettre le positionnement d'éléments enfants si nécessaire */
  position: relative;
}

/* Styles pour l'en-tête de la section du titre de la page */
.page-title .heading {
  /* Espacement intérieur supérieur et inférieur pour l'en-tête */
  padding: 160px 0 80px 0;
  /* Bordure supérieure subtile avec une transparence de 90% */
  border-top: 1px solid color-mix(in srgb, var(--default-color), transparent 90%);
}

/* Styles pour le titre principal (h1) dans l'en-tête de la section du titre de la page */
.page-title .heading h1 {
  /* Taille de la police pour le titre principal */
  font-size: 38px;
  /* Poids de la police pour rendre le titre en gras */
  font-weight: 700;
}

/* Styles pour la navigation dans la section du titre de la page */
.page-title nav {
  /* Couleur de fond pour la navigation avec une transparence de 92% */
  background-color: color-mix(in srgb, var(--default-color), transparent 92%);
  /* Espacement intérieur supérieur et inférieur pour la navigation */
  padding: 20px 0;
}

/* Styles pour la liste de navigation (chemin de navigation) */
.page-title nav ol {
  /* Affichage en flexbox pour organiser les éléments horizontalement */
  display: flex;
  /* Permet à la liste de s'adapter sur plusieurs lignes si nécessaire */
  flex-wrap: wrap;
  /* Suppression des puces de liste */
  list-style: none;
  /* Suppression des marges extérieures */
  margin: 0;
  /* Taille de la police pour les éléments de la liste */
  font-size: 16px;
  /* Poids de la police pour rendre le texte en semi-gras */
  font-weight: 600;
}

/* Styles pour les liens dans la liste de navigation */
.page-title nav ol a {
  /* Couleur du texte des liens avec une transparence de 50% */
  color: color-mix(in srgb, var(--default-color), transparent 50%);
}


/* Styles pour les liens dans la liste de navigation lors du survol */
.page-title nav ol a:hover {
  /* Changement de la couleur du texte des liens lors du survol pour améliorer la visibilité */
  color: var(--default-color);
}

/* Styles pour les éléments de la liste de navigation suivants (non-premiers) */
.page-title nav ol li+li {
  /* Espacement à gauche pour séparer les éléments de la liste */
  padding-left: 10px;
}

/* Styles pour l'ajout d'un séparateur entre les éléments de la liste de navigation */
.page-title nav ol li+li::before {
  /* Contenu du séparateur entre les éléments de la liste */
  content: "/";
  /* Affichage en ligne du séparateur */
  display: inline-block;
  /* Espacement à droite du séparateur */
  padding-right: 10px;
  /* Couleur du séparateur avec une transparence de 50% */
  color: color-mix(in srgb, var(--default-color), transparent 50%);
}
/*--------------------------------------------------------------
# Titres globaux de pages et fil d'Ariane
--------------------------------------------------------------*/



/*--------------------------------------------------------------
# Sections globales
--------------------------------------------------------------*/
/* Styles pour les sections générales de la page */
section,
.section {
  /* Couleur du texte par défaut dans les sections */
  color: var(--default-color);
  /* Couleur de fond pour les sections */
  background-color: var(--background-color);
  /* Espacement intérieur supérieur et inférieur pour les sections */
  padding: 60px 0;
  /* Marge en haut de la section lors du défilement pour éviter que le contenu soit masqué sous un en-tête fixe */
  scroll-margin-top: 112px;
  /* Clip overflow pour s'assurer que le contenu déborde de manière contrôlée */
  overflow: clip;
}

/* Styles pour les sections générales sur les écrans de moins de 1199px de large */
@media (max-width: 1199px) {
  section,
  .section {
    /* Réduction de la marge en haut lors du défilement sur les petits écrans */
    scroll-margin-top: 100px;
  }
}
/*--------------------------------------------------------------
# Sections globales
--------------------------------------------------------------*/




/*--------------------------------------------------------------
# Titres de section globales
--------------------------------------------------------------*/
/* Styles pour le titre des sections */
.section-title {
  /* Alignement centré du texte pour le titre des sections */
  text-align: center;
  /* Espacement intérieur en bas pour créer un espace sous le titre */
  padding-bottom: 60px;
  /* Positionnement relatif pour permettre le positionnement d'éléments enfants */
  position: relative;
}

/* Styles pour les titres de niveau 2 dans le titre des sections */
.section-title h2 {
  /* Taille de la police pour les titres de niveau 2 */
  font-size: 32px;
  /* Poids de la police pour rendre le titre en gras */
  font-weight: 700;
  /* Marge inférieure pour espacer le titre des éléments suivants */
  margin-bottom: 20px;
  /* Espacement intérieur en bas pour créer un espace sous le texte du titre */
  padding-bottom: 20px;
  /* Positionnement relatif pour permettre le positionnement d'éléments décoratifs */
  position: relative;
}

/* Styles pour la ligne décorative sous les titres de niveau 2 */
.section-title h2:after {
  /* Contenu vide pour créer une ligne décorative */
  content: "";
  /* Positionnement absolu pour placer la ligne sous le titre */
  position: absolute;
  /* Affichage en bloc pour la ligne */
  display: block;
  /* Largeur de la ligne décorative */
  width: 50px;
  /* Hauteur de la ligne décorative */
  height: 3px;
  /* Couleur de fond pour la ligne décorative */
  background: var(--accent-color);
  /* Positionnement de la ligne à gauche */
  left: 0;
  /* Positionnement de la ligne à droite */
  right: 0;
  /* Positionnement de la ligne en bas */
  bottom: 0;
  /* Centrage de la ligne décorative sous le titre */
  margin: auto;
}

/* Styles pour les paragraphes dans le titre des sections */
.section-title p {
  /* Suppression de la marge inférieure pour un espacement cohérent */
  margin-bottom: 0;
}
/*--------------------------------------------------------------
# Titres de section globales
--------------------------------------------------------------*/




/*--------------------------------------------------------------
# Section Hero
--------------------------------------------------------------*/
/* Styles pour la section "hero" de la page */
.hero {
  /* Largeur de la section "hero" couvrant 100% de la largeur disponible */
  width: 100%;
  /* Positionnement relatif pour permettre le positionnement d'éléments enfants */
  position: relative;
  /* Espacement intérieur en haut pour créer de l'espace au-dessus du contenu */
  padding: 140px 0 0 0;
}

/* Styles pour le conteneur à l'intérieur de la section "hero" */
.hero .container {
  /* Positionnement relatif pour permettre le positionnement d'éléments enfants */
  position: relative;
  /* Z-index élevé pour s'assurer que le contenu du conteneur reste au-dessus des autres éléments */
  z-index: 3;
}

/* Styles pour les titres de niveau 2 dans la section "hero" */
.hero h2 {
  /* Taille de la police pour les titres de niveau 2 */
  font-size: 48px;
  /* Poids de la police pour rendre le titre en gras */
  font-weight: 700;
  /* Marge inférieure pour espacer le titre des éléments suivants */
  margin-bottom: 20px;
}

/* Styles pour les éléments accentués dans les titres de niveau 2 */
.hero h2 .accent {
  /* Couleur spécifique pour les éléments accentués dans les titres */
  color: var(--contrast-color);
}

/* Styles pour les paragraphes dans la section "hero" */
.hero p {
  /* Couleur du texte avec une transparence de 40% pour un effet adouci */
  color: color-mix(in srgb, var(--default-color), transparent 40%);
  /* Poids de la police pour un texte normal (non-gras) */
  font-weight: 400;
  /* Marge inférieure pour espacer le paragraphe des éléments suivants */
  margin-bottom: 30px;
}

/* Styles pour le bouton "Get Started" dans la section "hero" */
.hero .btn-get-started {
  /* Couleur du texte du bouton */
  color: var(--contrast-color);
  /* Couleur de fond du bouton */
  background: var(--accent-color);
  /* Police spécifique pour le texte du bouton */
  font-family: var(--heading-font);
  /* Poids de la police pour rendre le texte du bouton semi-gras */
  font-weight: 500;
  /* Taille de la police pour le texte du bouton */
  font-size: 14px;
  /* Espacement des lettres pour donner plus d'espace entre chaque caractère */
  letter-spacing: 1px;
  /* Affichage en ligne avec possibilité de marge/padding */
  display: inline-block;
  /* Espacement intérieur pour créer une zone cliquable confortable */
  padding: 14px 40px;
  /* Bordures arrondies pour donner une forme de pilule au bouton */
  border-radius: 50px;
  /* Transition douce pour les changements de style lors de l'interaction */
  transition: 0.3s;
  /* Bordure avec une transparence de 90% pour un effet subtil */
  border: 2px solid color-mix(in srgb, var(--default-color), transparent 90%);
  /* Couleur de fond avec une transparence de 90% pour un effet adouci */
  background-color: color-mix(in srgb, var(--default-color), transparent 90%);
}


/* Styles pour le bouton "Get Started" lors du survol dans la section "hero" */
.hero .btn-get-started:hover {
  /* Changement de la couleur de la bordure lors du survol avec une transparence de 60% */
  border-color: color-mix(in srgb, var(--default-color), transparent 60%);
}

/* Styles pour le bouton "Watch Video" dans la section "hero" */
.hero .btn-watch-video {
  /* Taille de la police pour le texte du bouton "Watch Video" */
  font-size: 16px;
  /* Transition douce pour les changements de style lors de l'interaction */
  transition: 0.5s;
  /* Marge à gauche pour espacer le bouton des éléments précédents */
  margin-left: 25px;
  /* Poids de la police pour rendre le texte du bouton semi-gras */
  font-weight: 600;
  /* Couleur du texte du bouton */
  color: var(--default-color);
}

/* Styles pour l'icône à l'intérieur du bouton "Watch Video" */
.hero .btn-watch-video i {
  /* Couleur de l'icône avec une transparence de 50% */
  color: color-mix(in srgb, var(--default-color), transparent 50%);
  /* Taille de la police pour l'icône */
  font-size: 32px;
  /* Transition douce pour les changements de style lors de l'interaction */
  transition: 0.3s;
  /* Hauteur de ligne nulle pour aligner l'icône correctement */
  line-height: 0;
  /* Marge à droite pour espacer l'icône du texte */
  margin-right: 8px;
}

/* Styles pour l'icône à l'intérieur du bouton "Watch Video" lors du survol */
.hero .btn-watch-video:hover i {
  /* Changement de la couleur de l'icône lors du survol pour correspondre à la couleur du texte */
  color: var(--default-color);
}

/* Styles spécifiques pour la section "hero" sur les écrans de 640px de large ou moins */
@media (max-width: 640px) {
  /* Ajustement de la taille de la police pour le titre de niveau 2 */
  .hero h2 {
    font-size: 36px;
  }

  /* Ajustement de la taille de la police pour les boutons "Get Started" et "Watch Video" */
  .hero .btn-get-started,
  .hero .btn-watch-video {
    font-size: 14px;
  }
}

/* Styles pour les boîtes d'icônes dans la section "hero" */
.hero .icon-boxes {
  /* Espacement intérieur en bas pour créer de l'espace sous les boîtes d'icônes */
  padding-bottom: 60px;
  /* Z-index élevé pour s'assurer que les boîtes d'icônes restent au-dessus des autres éléments */
  z-index: 4;
}

/* Styles spécifiques pour les boîtes d'icônes sur les écrans de 1200px de large ou plus */
@media (min-width: 1200px) {
  /* Ajout d'un élément avant les boîtes d'icônes pour créer un effet visuel */
  .hero .icon-boxes:before {
    /* Contenu vide pour l'élément décoratif */
    content: "";
    /* Positionnement absolu pour placer l'élément en bas des boîtes d'icônes */
    position: absolute;
    /* Positionnement en bas de l'élément */
    bottom: 0;
    /* Positionnement à gauche de l'élément */
    left: 0;
    /* Positionnement à droite de l'élément */
    right: 0;
    /* Hauteur de l'élément décoratif */
    height: calc(50% + 20px);
    /* Couleur de fond pour l'élément décoratif */
    background-color: var(--default-color);
    /* Bordure supérieure subtile avec une transparence de 90% */
    border-top: 1px solid color-mix(in srgb, var(--default-color), transparent 90%);
  }
}


/* Styles pour les boîtes d'icônes dans la section "hero" */
.hero .icon-box {
  /* Espacement intérieur autour du contenu de la boîte d'icônes */
  padding: 60px 30px;
  /* Positionnement relatif pour permettre le positionnement d'éléments enfants */
  position: relative;
  /* Masque tout débordement de contenu qui dépasse la boîte */
  overflow: hidden;
  /* Couleur de fond pour la boîte d'icônes */
  background: var(--background-color);
  /* Ombre portée pour donner de la profondeur à la boîte */
  box-shadow: 0 0 29px 0 rgba(0, 0, 0, 0.1);
  /* Transition douce pour les changements de style lors de l'interaction */
  transition: all 0.3s ease-in-out;
  /* Bordures légèrement arrondies pour adoucir les coins de la boîte */
  border-radius: 8px;
  /* Z-index élevé pour s'assurer que la boîte reste au-dessus des autres éléments */
  z-index: 1;
  /* Hauteur de la boîte définie pour occuper 100% de l'espace disponible */
  height: 100%;
  /* Largeur de la boîte définie pour occuper 100% de l'espace disponible */
  width: 100%;
  /* Alignement centré du texte à l'intérieur de la boîte */
  text-align: center;
}

/* Styles pour les titres à l'intérieur des boîtes d'icônes */
.hero .icon-box .title {
  /* Poids de la police pour rendre le titre en gras */
  font-weight: 700;
  /* Marge inférieure pour espacer le titre des éléments suivants */
  margin-bottom: 15px;
  /* Taille de la police pour le titre */
  font-size: 24px;
}

/* Styles pour les liens dans les titres des boîtes d'icônes */
.hero .icon-box .title a {
  /* Couleur du texte du lien avec une transparence de 20% */
  color: color-mix(in srgb, var(--default-color), transparent 20%);
  /* Transition douce pour les changements de style lors de l'interaction */
  transition: 0.3s;
}

/* Styles pour les icônes à l'intérieur des boîtes d'icônes */
.hero .icon-box .icon {
  /* Marge inférieure pour espacer l'icône des éléments suivants */
  margin-bottom: 20px;
  /* Espacement supérieur pour créer un espace au-dessus de l'icône */
  padding-top: 10px;
  /* Affichage en ligne de l'icône pour le centrer */
  display: inline-block;
  /* Transition douce pour les changements de style lors de l'interaction */
  transition: all 0.3s ease-in-out;
  /* Taille de la police pour l'icône */
  font-size: 48px;
  /* Hauteur de ligne pour s'assurer que l'icône est correctement alignée */
  line-height: 1;
  /* Couleur de l'icône avec une transparence de 20% */
  color: color-mix(in srgb, var(--default-color), transparent 20%);
}

/* Styles pour les boîtes d'icônes lors du survol */
.hero .icon-box:hover {
  /* Changement de la couleur de fond de la boîte lors du survol avec un léger mélange de blanc */
  background-color: color-mix(in srgb, var(--background-color), white 10%);
}


/* Styles pour les liens dans les titres des boîtes d'icônes lors du survol */
.hero .icon-box:hover .title a,
.hero .icon-box:hover .icon {
  /* Changement de la couleur du texte du lien et de l'icône lors du survol */
  color: var(--contrast-color);
}
/*--------------------------------------------------------------
# Section Hero
--------------------------------------------------------------*/




/*--------------------------------------------------------------
# Section A propos
--------------------------------------------------------------*/
/* Styles pour les titres de niveau 3 dans la section "about" */
.about h3 {
  /* Poids de la police pour rendre le titre en gras */
  font-weight: 700;
  /* Taille de la police pour le titre */
  font-size: 28px;
  /* Marge inférieure pour espacer le titre des éléments suivants */
  margin-bottom: 20px;
}

/* Styles pour les éléments avec la classe "fst-italic" dans la section "about" */
.about .fst-italic {
  /* Couleur du texte avec un mélange de la couleur par défaut et de la couleur de contraste à 50% */
  color: color-mix(in srgb, var(--default-color), var(--contrast-color) 50%);
}

/* Styles pour les listes non ordonnées dans le contenu de la section "about" */
.about .content ul {
  /* Suppression des puces de liste par défaut */
  list-style: none;
  /* Suppression du padding par défaut pour aligner la liste avec le contenu environnant */
  padding: 0;
}

/* Styles pour les éléments de liste dans la section "about" */
.about .content ul li {
  /* Padding inférieur pour espacer les éléments de liste entre eux */
  padding: 0 0 10px 30px;
  /* Positionnement relatif pour permettre le positionnement d'icônes */
  position: relative;
}

/* Styles pour les icônes à l'intérieur des éléments de liste dans la section "about" */
.about .content ul i {
  /* Positionnement absolu pour placer l'icône à côté du texte de l'élément de liste */
  position: absolute;
  /* Taille de la police pour l'icône */
  font-size: 20px;
  /* Positionnement à gauche de l'icône */
  left: 0;
  /* Positionnement légèrement au-dessus du texte pour un alignement optimal */
  top: -3px;
  /* Couleur de l'icône pour la faire ressortir */
  color: var(--accent-color);
}


/* Styles pour le dernier paragraphe dans le contenu de la section "about" */
.about .content p:last-child {
  /* Suppression de la marge inférieure pour éviter un espace inutile en bas */
  margin-bottom: 0;
}

/* Styles pour le bouton de lecture pulsant dans la section "about" */
.about .pulsating-play-btn {
  /* Positionnement absolu pour placer le bouton à un emplacement spécifique */
  position: absolute;
  /* Calcul pour centrer horizontalement le bouton en soustrayant la moitié de sa largeur */
  left: calc(50% - 47px);
  /* Calcul pour centrer verticalement le bouton en soustrayant la moitié de sa hauteur */
  top: calc(50% - 47px);
}
/*--------------------------------------------------------------
# Section A propos
--------------------------------------------------------------*/



/*--------------------------------------------------------------
# Section Clients
--------------------------------------------------------------*/
/* Styles pour le composant Swiper dans la section "clients" */
.clients .swiper {
  /* Espacement intérieur supérieur et inférieur pour le composant Swiper */
  padding: 10px 0;
}

/* Styles pour le conteneur Swiper-wrapper dans la section "clients" */
.clients .swiper-wrapper {
  /* Hauteur automatique pour s'adapter au contenu */
  height: auto;
}

/* Styles pour les images dans chaque slide de Swiper dans la section "clients" */
.clients .swiper-slide img {
  /* Transition douce pour les changements de style lors du survol */
  transition: 0.3s;
}

/* Styles pour les images dans les slides de Swiper lors du survol */
.clients .swiper-slide img:hover {
  /* Agrandissement de l'image à 110% de sa taille d'origine lors du survol */
  transform: scale(1.1);
}
/*--------------------------------------------------------------
# Section Clients
--------------------------------------------------------------*/




/*--------------------------------------------------------------
# Section Statistiques
--------------------------------------------------------------*/
/* Styles pour les éléments statistiques dans la section "stats" */
.stats .stats-item {
  /* Espacement intérieur autour de chaque élément statistique */
  padding: 10px;
}

/* Styles pour les icônes à l'intérieur des éléments statistiques */
.stats .stats-item i {
  /* Taille de la police pour les icônes pour les rendre plus visibles */
  font-size: 44px;
  /* Couleur des icônes en utilisant la couleur d'accent définie */
  color: var(--accent-color);
  /* Hauteur de ligne nulle pour un alignement précis des icônes */
  line-height: 0;
  /* Marge à droite pour espacer l'icône du texte suivant */
  margin-right: 15px;
}

/* Styles pour les compteurs de statistiques dans la section "stats" */
.stats .stats-item .purecounter {
  /* Couleur du texte pour correspondre à la couleur des titres */
  color: var(--heading-color);
  /* Taille de la police pour les compteurs */
  font-size: 40px;
  /* Affichage en bloc pour que chaque compteur occupe toute la largeur disponible */
  display: block;
  /* Poids de la police pour rendre le texte du compteur en gras */
  font-weight: 700;
  /* Hauteur de ligne égale à la taille de la police pour un espacement optimal */
  line-height: 40px;
}

/* Styles pour les paragraphes sous les compteurs dans la section "stats" */
.stats .stats-item p {
  /* Couleur du texte avec une transparence de 40% pour un effet adouci */
  color: color-mix(in srgb, var(--default-color), transparent 40%);
  /* Padding supérieur pour espacer le paragraphe du texte précédent */
  padding: 15px 0 0 0;
  /* Suppression de la marge pour un alignement parfait avec le compteur */
  margin: 0;
  /* Police spécifique pour le texte du paragraphe */
  font-family: var(--heading-font);
  /* Taille de la police pour le texte du paragraphe */
  font-size: 14px;
}
/*--------------------------------------------------------------
# Section Statistiques
--------------------------------------------------------------*/


/*--------------------------------------------------------------
# Section Appel à l'action, Venez nous découvrir
--------------------------------------------------------------*/
/* Styles pour la section "call-to-action" */
.call-to-action {
  /* Couleur de fond transparente pour la section */
  background-color: transparent;
}

/* Styles pour le conteneur de la section "call-to-action" */
.call-to-action .container {
  /* Espacement en haut pour créer de l'espace au-dessus du contenu */
  padding-top: 80px;
  /* Espacement en bas pour créer de l'espace en dessous du contenu */
  padding-bottom: 80px;
  /* Bordures arrondies pour adoucir les coins du conteneur */
  border-radius: 15px;
  /* Masque tout débordement de contenu qui dépasse le conteneur */
  overflow: hidden;
  /* Positionnement relatif pour permettre le positionnement d'éléments enfants */
  position: relative;
  /* Coupe les coins du conteneur de manière arrondie pour un effet visuel */
  clip-path: inset(0 round 15px);
}

/* Styles pour les images à l'intérieur du conteneur de la section "call-to-action" */
.call-to-action .container img {
  /* Positionnement fixe pour que l'image reste en place lors du défilement */
  position: fixed;
  /* Positionnement en haut à gauche de l'écran */
  top: 0;
  left: 0;
  /* Affichage de l'image en tant que bloc */
  display: block;
  /* L'image occupe 100% de la largeur du conteneur */
  width: 100%;
  /* L'image occupe 100% de la hauteur du conteneur */
  height: 100%;
  /* L'image s'adapte à la taille du conteneur tout en conservant ses proportions */
  object-fit: cover;
  /* Z-index faible pour que l'image soit derrière le contenu */
  z-index: 1;
  /* Bordures arrondies pour correspondre au conteneur */
  border-radius: 15px;
  /* Masque tout débordement de l'image qui dépasse le conteneur */
  overflow: hidden;
}

/* Styles pour l'élément avant dans le conteneur de la section "call-to-action" */
.call-to-action .container:before {
  /* Contenu vide utilisé pour créer un overlay */
  content: "";
  /* Couleur de fond noire semi-transparente pour l'overlay */
  background: rgba(0, 0, 0, 0.5);
  /* Positionnement absolu pour couvrir tout le conteneur */
  position: absolute;
  /* Extension de l'overlay sur tout le conteneur */
  inset: 0;
  /* Z-index supérieur à l'image mais inférieur au contenu pour être visible sans couvrir le contenu */
  z-index: 2;
}

/* Styles pour le contenu à l'intérieur du conteneur de la section "call-to-action" */
.call-to-action .container .content {
  /* Positionnement relatif pour permettre le positionnement précis des éléments enfants */
  position: relative;
  /* Z-index élevé pour s'assurer que le contenu reste au-dessus de l'overlay */
  z-index: 3;
}


/* Styles pour le titre de niveau 3 dans la section "call-to-action" */
.call-to-action h3 {
  /* Couleur du texte pour correspondre à la couleur par défaut définie */
  color: var(--default-color);
  /* Taille de la police pour le titre */
  font-size: 28px;
  /* Poids de la police pour rendre le titre en gras */
  font-weight: 700;
  /* Marge inférieure pour espacer le titre des éléments suivants */
  margin-bottom: 20px;
}

/* Styles pour les paragraphes dans la section "call-to-action" */
.call-to-action p {
  /* Couleur du texte pour correspondre à la couleur par défaut définie */
  color: var(--default-color);
  /* Marge inférieure pour espacer le paragraphe des éléments suivants */
  margin-bottom: 20px;
}

/* Styles pour le bouton de lecture dans la section "call-to-action" */
.call-to-action .play-btn {
  /* Largeur du bouton de lecture */
  width: 94px;
  /* Hauteur du bouton de lecture */
  height: 94px;
  /* Marge inférieure pour espacer le bouton des éléments suivants */
  margin-bottom: 20px;
  /* Fond radial pour créer un effet de dégradé circulaire */
  background: radial-gradient(var(--accent-color) 50%, color-mix(in srgb, var(--accent-color), transparent 60%) 52%);
  /* Bordures arrondies pour rendre le bouton circulaire */
  border-radius: 50%;
  /* Affichage en ligne du bouton de lecture */
  display: inline-block;
  /* Positionnement relatif pour permettre le positionnement d'éléments enfants */
  position: relative;
  /* Masque tout débordement de contenu qui dépasse le bouton */
  overflow: hidden;
}

/* Styles pour l'élément avant dans le bouton de lecture */
.call-to-action .play-btn:before {
  /* Contenu vide utilisé pour créer un effet pulsant */
  content: "";
  /* Positionnement absolu pour placer l'élément avant à un emplacement spécifique */
  position: absolute;
  /* Largeur de l'élément avant */
  width: 120px;
  /* Hauteur de l'élément avant */
  height: 120px;
  /* Délai d'animation à zéro pour commencer immédiatement */
  animation-delay: 0s;
  /* Animation définie pour créer un effet de pulsation */
  animation: pulsate-btn 2s;
  /* Direction de l'animation vers l'avant */
  animation-direction: forwards;
  /* Nombre d'itérations de l'animation définie à l'infini */
  animation-iteration-count: infinite;
  /* Fonction de temporisation pour un effet d'animation fluide */
  animation-timing-function: steps;
  /* Opacité de l'élément avant */
  opacity: 1;
  /* Bordures arrondies pour correspondre au bouton circulaire */
  border-radius: 50%;
  /* Bordure pour créer un effet d'anneau autour de l'élément avant */
  border: 5px solid color-mix(in srgb, var(--accent-color), transparent 20%);
  /* Positionnement en haut à gauche du bouton */
  top: -15%;
  left: -15%;
  /* Couleur de fond transparente pour l'élément avant */
  background: rgba(198, 16, 0, 0);
}

/* Styles pour l'élément après dans le bouton de lecture de la section "call-to-action" */
.call-to-action .play-btn:after {
  /* Contenu vide utilisé pour créer un triangle qui représente l'icône de lecture */
  content: "";
  /* Positionnement absolu pour placer l'icône au centre du bouton */
  position: absolute;
  /* Positionnement horizontal au centre du bouton */
  left: 50%;
  /* Positionnement vertical au centre du bouton */
  top: 50%;
  /* Transformation pour aligner le triangle précisément au centre */
  transform: translateX(-40%) translateY(-50%);
  /* Largeur du triangle initialement définie à zéro */
  width: 0;
  /* Hauteur du triangle initialement définie à zéro */
  height: 0;
  /* Bordure supérieure transparente pour former un triangle */
  border-top: 10px solid transparent;
  /* Bordure inférieure transparente pour former un triangle */
  border-bottom: 10px solid transparent;
  /* Bordure gauche colorée pour créer l'icône de lecture en forme de triangle */
  border-left: 15px solid var(--default-color);
  /* Z-index élevé pour s'assurer que l'icône de lecture reste au-dessus des autres éléments */
  z-index: 100;
  /* Transition douce pour les changements d'état de l'icône de lecture */
  transition: all 400ms cubic-bezier(0.55, 0.055, 0.675, 0.19);
}

/* Styles pour l'élément avant du bouton de lecture lors du survol */
.call-to-action .play-btn:hover:before {
  /* Contenu vide utilisé pour gérer l'état de survol */
  content: "";
  /* Positionnement absolu pour centrer l'élément avant */
  position: absolute;
  /* Centrage horizontal du bouton */
  left: 50%;
  /* Centrage vertical du bouton */
  top: 50%;
  /* Transformation pour aligner l'élément au centre */
  transform: translateX(-40%) translateY(-50%);
  /* Largeur initiale définie à zéro */
  width: 0;
  /* Hauteur initiale définie à zéro */
  height: 0;
  /* Suppression des bordures pour le rendre invisible */
  border: none;
  /* Bordures supérieures transparentes pour conserver la forme triangulaire */
  border-top: 10px solid transparent;
  /* Bordures inférieures transparentes pour conserver la forme triangulaire */
  border-bottom: 10px solid transparent;
  /* Bordure gauche colorée pour l'icône de lecture */
  border-left: 15px solid var(--default-color);
  /* Z-index élevé pour s'assurer que cet élément reste au-dessus */
  z-index: 200;
  /* Suppression de l'animation pour cet état */
  animation: none;
  /* Suppression des bordures arrondies pour un effet d'icône classique */
  border-radius: 0;
}

/* Styles pour l'élément après du bouton de lecture lors du survol */
.call-to-action .play-btn:hover:after {
  /* Changement de la couleur de la bordure gauche pour correspondre à la couleur d'accent */
  border-left: 15px solid var(--accent-color);
  /* Transformation pour agrandir l'icône de lecture à 2000% de sa taille d'origine */
  transform: scale(20);
}

/* Styles pour le bouton d'appel à l'action dans la section "call-to-action" */
.call-to-action .cta-btn {
  /* Utilisation de la police de caractères définie pour les titres */
  font-family: var(--heading-font);
  /* Poids de la police pour un texte modérément gras */
  font-weight: 500;
  /* Taille de la police pour le texte du bouton */
  font-size: 16px;
  /* Espacement entre les lettres pour une meilleure lisibilité */
  letter-spacing: 1px;
  /* Affichage en ligne du bouton pour qu'il prenne uniquement la largeur nécessaire */
  display: inline-block;
  /* Padding intérieur pour agrandir le bouton et le rendre cliquable facilement */
  padding: 12px 40px;
  /* Bordures légèrement arrondies pour un effet visuel agréable */
  border-radius: 5px;
  /* Transition douce pour les changements de style lors du survol */
  transition: 0.5s;
  /* Marge pour espacer le bouton des éléments environnants */
  margin: 10px;
  /* Bordure contrastante pour le bouton pour le faire ressortir */
  border: 2px solid var(--contrast-color);
  /* Couleur du texte pour correspondre à la couleur de contraste définie */
  color: var(--contrast-color);
}

/* Styles pour le bouton d'appel à l'action lors du survol */
.call-to-action .cta-btn:hover {
  /* Changement de la couleur de fond pour correspondre à la couleur d'accent */
  background: var(--accent-color);
  /* Changement de la bordure pour correspondre à la couleur d'accent */
  border: 2px solid var(--accent-color);
}

/* Définition de l'animation pour l'effet de pulsation du bouton */
@keyframes pulsate-btn {
  /* État initial de l'animation : réduction de l'échelle à 60% et pleine opacité */
  0% {
    transform: scale(0.6, 0.6);
    opacity: 1;
  }

  /* État final de l'animation : retour à l'échelle normale (100%) et disparition progressive */
  100% {
    transform: scale(1, 1);
    opacity: 0;
  }
}
/*--------------------------------------------------------------
# Section Appel à l'action, Venez nous découvrir
--------------------------------------------------------------*/



/*--------------------------------------------------------------
# Section Services
--------------------------------------------------------------*/
/* Styles pour les éléments de service dans la section "services" */
.services .service-item {
  /* Couleur de fond pour l'élément de service, définie par la variable de surface */
  background-color: var(--surface-color);
  /* Padding intérieur pour espacer le contenu de l'élément de service */
  padding: 40px;
  /* Ombre portée pour créer un effet de profondeur sous l'élément de service */
  box-shadow: 0px 0 30px rgba(0, 0, 0, 0.1);
  /* Hauteur définie à 100% pour remplir l'espace disponible */
  height: 100%;
}

/* Styles pour l'icône dans chaque élément de service */
.services .service-item .icon {
  /* Largeur de l'icône */
  width: 48px;
  /* Hauteur de l'icône */
  height: 48px;
  /* Positionnement relatif pour permettre le positionnement absolu des éléments enfants */
  position: relative;
  /* Marge inférieure pour espacer l'icône des éléments suivants */
  margin-bottom: 50px;
}

/* Styles pour l'élément <i> dans l'icône de l'élément de service */
.services .service-item .icon i {
  /* Couleur de l'icône, mélangée avec la couleur des titres pour un effet atténué */
  color: color-mix(in srgb, var(--heading-color), transparent 30%);
  /* Taille de la police pour agrandir l'icône */
  font-size: 56px;
  /* Transition fluide pour les changements de style sur l'icône */
  transition: ease-in-out 0.3s;
  /* Z-index élevé pour s'assurer que l'icône reste au-dessus des autres éléments */
  z-index: 2;
  /* Positionnement relatif pour permettre des ajustements spécifiques à l'icône */
  position: relative;
}

/* Styles pour l'élément avant dans l'icône de l'élément de service */
.services .service-item .icon:before {
  /* Positionnement absolu pour placer l'élément avant par rapport à l'icône */
  position: absolute;
  /* Contenu vide utilisé pour ajouter un style décoratif autour de l'icône */
  content: "";
  /* Hauteur de l'élément avant pour correspondre à celle de l'icône */
  height: 100%;
  /* Largeur de l'élément avant pour correspondre à celle de l'icône */
  width: 100%;
  /* Couleur de fond mélangée avec la couleur des titres pour un effet atténué */
  background: color-mix(in srgb, var(--heading-color), transparent 95%);
  /* Bordures arrondies pour créer un effet de cercle autour de l'icône */
  border-radius: 50px;
  /* Z-index inférieur pour que cet élément se trouve sous l'icône */
  z-index: 1;
  /* Positionnement légèrement en dessous du sommet de l'icône */
  top: 10px;
  /* Décalage de l'élément vers la droite pour créer un effet d'ombre ou de perspective */
  right: -20px;
  /* Transition fluide pour les changements de style de l'élément avant */
  transition: 0.3s;
}


/* Styles pour le titre (h3) dans chaque élément de service */
.services .service-item h3 {
  /* Couleur du texte du titre, légèrement atténuée en mélangeant avec la couleur des titres */
  color: color-mix(in srgb, var(--heading-color), transparent 20%);
  /* Poids de la police pour un texte gras */
  font-weight: 700;
  /* Marges pour espacer le titre des éléments environnants */
  margin: 0 0 20px 0;
  /* Padding inférieur pour espacer le texte du titre de la bordure */
  padding-bottom: 8px;
  /* Taille de la police pour le texte du titre */
  font-size: 22px;
  /* Positionnement relatif pour permettre des ajustements spécifiques au titre */
  position: relative;
  /* Affichage en ligne pour que le titre occupe seulement la place nécessaire */
  display: inline-block;
  /* Bordure inférieure pour souligner le titre */
  border-bottom: 4px solid color-mix(in srgb, var(--heading-color), transparent 90%);
  /* Transition fluide pour les changements de style du titre */
  transition: 0.3s;
}

/* Styles pour le paragraphe (p) dans chaque élément de service */
.services .service-item p {
  /* Hauteur de ligne pour un espacement vertical agréable entre les lignes de texte */
  line-height: 24px;
  /* Taille de la police pour le texte du paragraphe */
  font-size: 14px;
  /* Suppression de la marge inférieure pour un alignement propre avec d'autres éléments */
  margin-bottom: 0;
}

/* Styles pour le lien "readmore" dans chaque élément de service */
.services .service-item .readmore {
  /* Marge supérieure pour espacer le lien du contenu précédent */
  margin-top: 15px;
  /* Affichage en ligne pour que le lien occupe seulement la place nécessaire */
  display: inline-block;
  /* Couleur du texte du lien, légèrement atténuée en mélangeant avec la couleur par défaut */
  color: color-mix(in srgb, var(--default-color), transparent 30%);
}

/* Styles pour l'icône lors du survol d'un élément de service */
.services .service-item:hover .icon i {
  /* Changement de la couleur de l'icône pour correspondre à la couleur des titres */
  color: var(--heading-color);
}


/* Styles pour l'élément avant de l'icône lors du survol d'un élément de service */
.services .service-item:hover .icon:before {
  /* Changement de la couleur de fond pour correspondre à la couleur d'accent, atténuée de 50% */
  background: color-mix(in srgb, var(--accent-color), transparent 50%);
}

/* Styles pour le titre (h3) lors du survol d'un élément de service */
.services .service-item:hover h3 {
  /* Changement de la couleur de la bordure inférieure pour correspondre à la couleur d'accent, atténuée de 10% */
  border-color: color-mix(in srgb, var(--accent-color), transparent 10%);
  /* Changement de la couleur du texte pour correspondre à la couleur des titres */
  color: var(--heading-color);
}

/* Styles pour le lien "readmore" lors du survol d'un élément de service */
.services .service-item:hover .readmore {
  /* Changement de la couleur du texte pour correspondre à la couleur d'accent */
  color: var(--accent-color);
}
/*--------------------------------------------------------------
# Section Services
--------------------------------------------------------------*/




/*--------------------------------------------------------------
# Section Témoignages
--------------------------------------------------------------*/
/* Styles pour chaque élément de témoignage dans la section "testimonials" */
.testimonials .testimonial-item {
  /* Couleur de fond pour l'élément de témoignage, définie par la variable de surface */
  background-color: var(--surface-color);
  /* Ombre portée pour créer un effet de profondeur sous l'élément de témoignage */
  box-shadow: 0px 2px 15px rgba(0, 0, 0, 0.1);
  /* Box-sizing défini sur content-box pour inclure le padding dans les dimensions */
  box-sizing: content-box;
  /* Padding intérieur pour espacer le contenu de l'élément de témoignage */
  padding: 30px;
  /* Marges pour espacer l'élément de témoignage des autres éléments environnants */
  margin: 30px 15px;
  /* Positionnement relatif pour permettre des ajustements spécifiques à l'intérieur de l'élément */
  position: relative;
  /* Hauteur définie à 100% pour remplir l'espace disponible */
  height: 100%;
}

/* Styles pour l'image du témoignage dans chaque élément de témoignage */
.testimonials .testimonial-item .testimonial-img {
  /* Largeur de l'image du témoignage */
  width: 90px;
  /* Bordures arrondies pour créer un effet de cercle autour de l'image */
  border-radius: 50px;
  /* Marge à droite pour espacer l'image du texte */
  margin-right: 15px;
}

/* Styles pour le titre (h3) dans chaque élément de témoignage */
.testimonials .testimonial-item h3 {
  /* Taille de la police pour le texte du titre */
  font-size: 18px;
  /* Poids de la police pour un texte gras */
  font-weight: bold;
  /* Marges pour espacer le titre des autres éléments */
  margin: 10px 0 5px 0;
}

/* Styles pour le sous-titre (h4) dans chaque élément de témoignage */
.testimonials .testimonial-item h4 {
  /* Taille de la police pour le texte du sous-titre */
  font-size: 14px;
  /* Couleur du texte du sous-titre, atténuée en mélangeant avec la couleur par défaut */
  color: color-mix(in srgb, var(--default-color), transparent 40%);
  /* Suppression de la marge pour un alignement propre avec d'autres éléments */
  margin: 0;
}

/* Styles pour les étoiles de notation dans chaque élément de témoignage */
.testimonials .testimonial-item .stars {
  /* Marge pour espacer les étoiles des autres éléments */
  margin: 10px 0;
}

/* Styles pour chaque icône d'étoile dans les étoiles de notation */
.testimonials .testimonial-item .stars i {
  /* Couleur des étoiles de notation (or) */
  color: #ffc107;
  /* Marges entre chaque étoile pour un espacement régulier */
  margin: 0 1px;
}

/* Styles pour les icônes de guillemets à gauche et à droite dans chaque élément de témoignage */
.testimonials .testimonial-item .quote-icon-left,
.testimonials .testimonial-item .quote-icon-right {
  /* Couleur des icônes de guillemets, mélangée avec la couleur d'accent et atténuée à 50% */
  color: color-mix(in srgb, var(--accent-color), transparent 50%);
  /* Taille de la police pour les icônes de guillemets */
  font-size: 26px;
  /* Hauteur de ligne réglée sur 0 pour compacter les icônes */
  line-height: 0;
}

/* Styles spécifiques pour l'icône de guillemet à gauche */
.testimonials .testimonial-item .quote-icon-left {
  /* Affichage en ligne pour que l'icône soit alignée avec le texte */
  display: inline-block;
  /* Positionnement relatif pour permettre un ajustement de la position */
  left: -5px;
  /* Positionnement relatif à son conteneur */
  position: relative;
}

/* Styles spécifiques pour l'icône de guillemet à droite */
.testimonials .testimonial-item .quote-icon-right {
  /* Affichage en ligne pour que l'icône soit alignée avec le texte */
  display: inline-block;
  /* Positionnement relatif pour permettre un ajustement de la position */
  right: -5px;
  /* Positionnement relatif à son conteneur */
  position: relative;
  /* Décalage vers le bas pour un meilleur alignement vertical */
  top: 10px;
  /* Transformation pour inverser l'icône horizontalement et verticalement */
  transform: scale(-1, -1);
}

/* Styles pour le paragraphe de texte dans chaque élément de témoignage */
.testimonials .testimonial-item p {
  /* Style de la police en italique pour le texte du témoignage */
  font-style: italic;
  /* Marges pour centrer le texte et espacer les éléments environnants */
  margin: 15px auto 15px auto;
}

/* Styles pour le conteneur swiper-wrapper dans la section "testimonials" */
.testimonials .swiper-wrapper {
  /* Hauteur automatique pour s'adapter au contenu */
  height: auto;
}

/* Styles pour la pagination du swiper dans la section "testimonials" */
.testimonials .swiper-pagination {
  /* Marge supérieure pour espacer la pagination du contenu précédent */
  margin-top: 20px;
  /* Positionnement relatif pour permettre un ajustement de la position */
  position: relative;
}

/* Styles pour chaque puce de pagination dans le swiper */
.testimonials .swiper-pagination .swiper-pagination-bullet {
  /* Largeur des puces de pagination */
  width: 12px;
  /* Hauteur des puces de pagination */
  height: 12px;
  /* Couleur de fond des puces, mélangée avec la couleur par défaut et atténuée à 85% */
  background-color: color-mix(in srgb, var(--default-color), transparent 85%);
  /* Opacité totale des puces de pagination */
  opacity: 1;
}

/* Styles pour la puce de pagination active dans le swiper */
.testimonials .swiper-pagination .swiper-pagination-bullet-active {
  /* Couleur de fond de la puce active, correspondant à la couleur d'accent */
  background-color: var(--accent-color);
}


/* Styles appliqués pour les écrans avec une largeur maximale de 767px */
@media (max-width: 767px) {

  /* Styles pour le conteneur d'un témoignage (testimonial-wrap) */
  .testimonials .testimonial-wrap {
    /* Suppression du padding à gauche pour s'adapter à l'écran réduit */
    padding-left: 0;
  }

  /* Styles pour chaque élément de témoignage */
  .testimonials .testimonial-item {
    /* Padding intérieur pour espacer le contenu des bords de l'élément */
    padding: 30px;
    /* Réduction de la marge pour un meilleur ajustement dans les écrans plus petits */
    margin: 15px;
  }

  /* Styles pour l'image du témoignage dans chaque élément de témoignage */
  .testimonials .testimonial-item .testimonial-img {
    /* Position statique pour annuler tout positionnement absolu précédent */
    position: static;
    /* Réinitialisation des propriétés left et auto pour s'adapter au nouvel alignement */
    left: auto;
  }
}
/*--------------------------------------------------------------
# Section Témoignages
--------------------------------------------------------------*/




/*--------------------------------------------------------------
# Section des activités
--------------------------------------------------------------*/
/* Styles pour les filtres du portfolio */
.portfolio .portfolio-filters {
  /* Suppression des marges internes et ajout de 20px en bas pour espacer les filtres du contenu suivant */
  padding: 0 0 20px 0;
  /* Centrage du conteneur des filtres dans sa section */
  margin: 0 auto;
  /* Suppression du style de liste pour les éléments de filtre */
  list-style: none;
  /* Alignement centré du texte dans le conteneur des filtres */
  text-align: center;
}

/* Styles pour chaque élément de filtre du portfolio */
.portfolio .portfolio-filters li {
  /* Curseur en forme de pointeur pour indiquer qu'il est cliquable */
  cursor: pointer;
  /* Affichage en ligne pour que les filtres s'affichent côte à côte */
  display: inline-block;
  /* Suppression du padding interne des éléments de filtre */
  padding: 0;
  /* Taille de la police des éléments de filtre */
  font-size: 18px;
  /* Épaisseur de la police des éléments de filtre */
  font-weight: 500;
  /* Marges gauche et droite pour espacer les filtres entre eux */
  margin: 0 10px;
  /* Hauteur de ligne définie à 1 pour un espacement vertical réduit */
  line-height: 1;
  /* Transition douce pour tous les changements d'état, avec un effet sur 0.3s */
  transition: all 0.3s ease-in-out;
}

/* Styles pour les filtres lors du survol ou lorsqu'ils sont actifs */
.portfolio .portfolio-filters li:hover,
.portfolio .portfolio-filters li.filter-active {
  /* Couleur des filtres en survol ou actifs définie à la couleur d'accent */
  color: var(--accent-color);
}

/* Styles pour le premier élément de filtre du portfolio */
.portfolio .portfolio-filters li:first-child {
  /* Suppression de la marge à gauche pour le premier élément */
  margin-left: 0;
}

/* Styles pour le dernier élément de filtre du portfolio */
.portfolio .portfolio-filters li:last-child {
  /* Suppression de la marge à droite pour le dernier élément */
  margin-right: 0;
}

/* Styles pour les filtres du portfolio sur des écrans plus petits (max-width : 575px) */
@media (max-width: 575px) {
  .portfolio .portfolio-filters li {
    /* Réduction de la taille de la police pour une meilleure lisibilité sur petits écrans */
    font-size: 14px;
    /* Réduction des marges gauche et droite pour espacer moins les filtres entre eux */
    margin: 0 5px;
  }
}


/* Styles pour le conteneur de contenu du portfolio */
.portfolio .portfolio-content {
  /* Couleur de fond définie à la couleur de surface */
  background-color: var(--surface-color);
  /* Application d'une ombre pour ajouter de la profondeur au conteneur */
  box-shadow: 0px 10px 30px rgba(0, 0, 0, 0.1);
  /* La hauteur du conteneur est réglée pour s'adapter à 100% de son parent */
  height: 100%;
  /* Cachage de tout dépassement de contenu en dehors des limites du conteneur */
  overflow: hidden;
}

/* Styles pour les images dans le contenu du portfolio */
.portfolio .portfolio-content img {
  /* Transition douce appliquée aux changements sur les images */
  transition: 0.3s;
  /* Positionnement relatif pour permettre un contrôle plus précis avec z-index */
  position: relative;
  /* Placement des images au-dessus des autres éléments en utilisant z-index */
  z-index: 1;
}

/* Styles pour les informations du portfolio */
.portfolio .portfolio-content .portfolio-info {
  /* Couleur de fond des informations définie à la couleur de fond globale */
  background-color: var(--background-color);
  /* Bordure supérieure ajoutée pour séparer visuellement les informations du reste du contenu */
  border-top: 1px solid color-mix(in srgb, var(--default-color), transparent 90%);
  /* Padding interne pour espacer le contenu des bords */
  padding: 25px 20px;
  /* Positionnement relatif pour permettre un contrôle plus précis avec z-index */
  position: relative;
  /* Placement des informations au-dessus des autres éléments en utilisant z-index */
  z-index: 2;
}

/* Styles pour le titre (h4) des informations du portfolio */
.portfolio .portfolio-content .portfolio-info h4 {
  /* Taille de la police définie à 18px pour le titre */
  font-size: 18px;
  /* Épaisseur de la police définie à 600 pour rendre le titre plus visible */
  font-weight: 600;
  /* Padding à droite pour s'assurer que le texte ne touche pas les bords */
  padding-right: 50px;
}

/* Styles pour les liens dans le titre des informations du portfolio */
.portfolio .portfolio-content .portfolio-info h4 a {
  /* Couleur des liens définie à la couleur des titres */
  color: var(--heading-color);
  /* Transition douce appliquée aux changements de couleur des liens */
  transition: 0.3s;
}

/* Styles pour les liens dans le titre lors du survol */
.portfolio .portfolio-content .portfolio-info h4 a:hover {
  /* Couleur des liens en survol définie à la couleur d'accent */
  color: var(--accent-color);
}


/* Styles pour le paragraphe dans les informations du portfolio */
.portfolio .portfolio-content .portfolio-info p {
  /* Couleur du texte du paragraphe avec une transparence de 30% pour un effet adouci */
  color: color-mix(in srgb, var(--default-color), transparent 30%);
  /* Taille de la police définie à 14px pour le paragraphe */
  font-size: 14px;
  /* Suppression de la marge inférieure pour un alignement serré */
  margin-bottom: 0;
  /* Padding à droite pour espacer le texte du bord droit */
  padding-right: 50px;
}

/* Styles pour les images dans le contenu du portfolio lors du survol */
.portfolio .portfolio-content:hover img {
  /* Agrandissement de l'image à 110% lors du survol pour un effet de zoom */
  transform: scale(1.1);
}
/*--------------------------------------------------------------
# Section des activités
--------------------------------------------------------------*/



/*--------------------------------------------------------------
# Section Équipe
--------------------------------------------------------------*/
/* Styles pour les membres de l'équipe */
.team .member {
  /* Couleur de fond définie à la couleur de surface pour chaque membre de l'équipe */
  background-color: var(--surface-color);
  /* Application d'une ombre légère pour ajouter de la profondeur aux cartes des membres */
  box-shadow: 0px 2px 25px rgba(0, 0, 0, 0.1);
  /* Centrage du texte pour un alignement uniforme des éléments */
  text-align: center;
  /* Bordure arrondie pour adoucir les angles des cartes des membres */
  border-radius: 15px;
  /* Ajout de padding pour espacer le contenu à l'intérieur de la carte */
  padding: 15px;
  /* Cachage du dépassement de contenu pour s'assurer que tout reste à l'intérieur des limites de la carte */
  overflow: hidden;
}

/* Styles pour l'image du membre de l'équipe */
.team .member img {
  /* Bordure arrondie pour l'image du membre afin de correspondre au style de la carte */
  border-radius: 15px;
  /* Cachage du dépassement de l'image pour s'assurer qu'elle reste à l'intérieur des limites de la carte */
  overflow: hidden;
}

/* Styles pour le contenu textuel du membre de l'équipe */
.team .member .member-content {
  /* Ajout de padding pour espacer le contenu textuel à l'intérieur de la carte */
  padding: 0 20px 30px 20px;
}

/* Styles pour le nom (h4) du membre de l'équipe */
.team .member h4 {
  /* Augmentation du poids de la police pour rendre le nom plus visible */
  font-weight: 700;
  /* Marge supérieure ajoutée pour espacer le nom du reste du contenu */
  margin-top: 16px;
  /* Marge inférieure réduite pour rapprocher le nom du titre ou de l'élément suivant */
  margin-bottom: 2px;
  /* Taille de la police définie à 20px pour le nom */
  font-size: 20px;
}

/* Styles pour le titre ou la description du membre de l'équipe */
.team .member span {
  /* Texte en italique pour le titre ou la description pour une meilleure distinction */
  font-style: italic;
  /* Affichage en bloc pour s'assurer que le texte occupe toute la largeur disponible */
  display: block;
  /* Taille de la police définie à 14px pour le titre ou la description */
  font-size: 14px;
  /* Couleur du texte avec une transparence de 40% pour un effet adouci */
  color: color-mix(in srgb, var(--default-color), transparent 40%);
}

/* Styles pour la section des liens sociaux des membres de l'équipe */
.team .member .social {
  /* Marge supérieure pour espacer les icônes sociales du contenu précédent */
  margin-top: 15px;
  /* Marge inférieure pour espacer les icônes sociales du contenu suivant */
  margin-bottom: 10px;
  /* Utilisation de Flexbox pour aligner les éléments horizontalement */
  display: flex;
  /* Alignement vertical centré des éléments enfants */
  align-items: center;
  /* Répartition égale de l'espace entre les icônes sociales */
  justify-content: space-around;
}

/* Styles pour les liens individuels des icônes sociales */
.team .member .social a {
  /* Couleur des icônes sociales avec une transparence de 60% pour un effet adouci */
  color: color-mix(in srgb, var(--default-color), transparent 60%);
  /* Transition fluide sur 0,3 seconde pour les changements d'état (couleur, bordure) */
  transition: 0.3s;
  /* Bordure arrondie pour donner une forme circulaire aux icônes */
  border-radius: 50%;
  /* Largeur fixe de 40px pour chaque icône sociale */
  width: 40px;
  /* Hauteur fixe de 40px pour chaque icône sociale */
  height: 40px;
  /* Utilisation de Flexbox pour centrer les icônes à l'intérieur des liens */
  display: flex;
  /* Alignement vertical centré des icônes */
  align-items: center;
  /* Alignement horizontal centré des icônes */
  justify-content: center;
  /* Bordure d'une épaisseur de 1px avec une transparence de 60% pour un effet subtil */
  border: 1px solid color-mix(in srgb, var(--default-color), transparent 60%);
}

/* Styles pour les liens sociaux lors du survol */
.team .member .social a:hover {
  /* Changement de la couleur des icônes sociales lors du survol */
  color: var(--accent-color);
  /* Changement de la couleur de la bordure lors du survol pour correspondre à la couleur d'accent */
  border-color: var(--accent-color);
}

/* Styles pour les icônes à l'intérieur des liens sociaux */
.team .member .social i {
  /* Taille de la police fixée à 18px pour les icônes sociales */
  font-size: 18px;
  /* Marge horizontale de 2px pour espacer les icônes de leur bordure */
  margin: 0 2px;
}
/*--------------------------------------------------------------
# Section Équipe
--------------------------------------------------------------*/



/*--------------------------------------------------------------
# Section Tarifs
--------------------------------------------------------------*/
/* Styles généraux pour la section des prix */
.pricing {
  /* Espacement intérieur (padding) en haut et en bas de la section */
  padding: 60px 0 120px 0;
}

/* Styles pour le titre de section dans la section des prix */
.pricing .section-title {
  /* Marge inférieure pour espacer le titre de section des autres éléments */
  margin-bottom: 40px;
}

/* Styles pour chaque élément de la grille de prix */
.pricing .pricing-item {
  /* Couleur de fond pour chaque carte de prix */
  background-color: var(--surface-color);
  /* Ombre pour donner de la profondeur à la carte */
  box-shadow: 0 3px 20px -2px rgba(0, 0, 0, 0.1);
  /* Espacement intérieur (padding) autour du contenu de la carte */
  padding: 60px 40px;
  /* Hauteur totale de chaque carte pour un alignement uniforme */
  height: 100%;
  /* Position relative pour permettre des positionnements internes spécifiques */
  position: relative;
  /* Coins arrondis pour adoucir les bords de la carte */
  border-radius: 15px;
}

/* Styles pour le titre (h3) dans chaque élément de la grille de prix */
.pricing h3 {
  /* Poids de la police pour un texte en gras */
  font-weight: 600;
  /* Marge inférieure pour espacer le titre des autres éléments */
  margin-bottom: 15px;
  /* Taille de la police pour le titre */
  font-size: 20px;
  /* Centrage du texte */
  text-align: center;
}

/* Styles pour l'icône dans chaque carte de prix */
.pricing .icon {
  /* Marge autour de l'icône pour l'espacer des autres éléments */
  margin: 30px auto 20px auto;
  /* Largeur fixe pour l'icône */
  width: 70px;
  /* Hauteur fixe pour l'icône */
  height: 70px;
  /* Couleur de fond pour l'icône */
  background: var(--accent-color);
  /* Bordure arrondie pour donner une forme circulaire à l'icône */
  border-radius: 50%;
  /* Utilisation de Flexbox pour centrer l'icône */
  display: flex;
  /* Alignement vertical centré */
  align-items: center;
  /* Alignement horizontal centré */
  justify-content: center;
  /* Transition fluide pour les changements d'état (couleur, taille, etc.) */
  transition: 0.3s;
  /* Style de transformation 3D préservé pour les effets de profondeur */
  transform-style: preserve-3d;
}

/* Styles pour l'icône elle-même (balise <i>) à l'intérieur du conteneur */
.pricing .icon i {
  /* Couleur de l'icône, ici définie en utilisant la couleur d'arrière-plan */
  color: var(--background-color);
  /* Taille de la police pour l'icône */
  font-size: 28px;
  /* Transition fluide pour les changements d'état de l'icône */
  transition: ease-in-out 0.3s;
  /* Hauteur de ligne pour centrer verticalement le texte à l'intérieur de l'icône */
  line-height: 0;
}

/* Styles pour l'élément avant (::before) dans l'icône de chaque carte de prix */
.pricing .icon::before {
  /* Positionnement absolu pour superposer l'élément à l'icône */
  position: absolute;
  /* Aucun contenu textuel, seulement un effet visuel */
  content: "";
  /* Hauteur fixe pour l'élément avant */
  height: 86px;
  /* Largeur fixe pour l'élément avant */
  width: 86px;
  /* Bordure arrondie pour donner une forme circulaire */
  border-radius: 50%;
  /* Couleur de fond de l'élément avant avec un mélange de transparence */
  background: color-mix(in srgb, var(--accent-color), transparent 80%);
  /* Transition fluide pour les changements d'état de l'élément */
  transition: all 0.3s ease-out 0s;
  /* Transformation pour déplacer l'élément en arrière-plan */
  transform: translateZ(-1px);
}

/* Styles pour l'élément après (::after) dans l'icône de chaque carte de prix */
.pricing .icon::after {
  /* Positionnement absolu pour superposer l'élément à l'icône */
  position: absolute;
  /* Aucun contenu textuel, seulement un effet visuel */
  content: "";
  /* Hauteur fixe pour l'élément après */
  height: 102px;
  /* Largeur fixe pour l'élément après */
  width: 102px;
  /* Bordure arrondie pour donner une forme circulaire */
  border-radius: 50%;
  /* Couleur de fond de l'élément après avec un mélange de transparence plus élevé */
  background: color-mix(in srgb, var(--accent-color), transparent 90%);
  /* Transition fluide pour les changements d'état de l'élément */
  transition: all 0.3s ease-out 0s;
  /* Transformation pour déplacer l'élément encore plus en arrière-plan */
  transform: translateZ(-2px);
}

/* Styles pour le titre principal (h4) dans chaque carte de prix */
.pricing h4 {
  /* Taille de la police pour le titre */
  font-size: 48px;
  /* Couleur du texte, utilisant la couleur d'accentuation */
  color: var(--accent-color);
  /* Poids de la police pour un texte très en gras */
  font-weight: 700;
  /* Police utilisée, ici la police définie pour les titres */
  font-family: var(--heading-font);
  /* Marge inférieure pour espacer le titre des autres éléments */
  margin-bottom: 25px;
  /* Centrage du texte */
  text-align: center;
}

/* Styles pour les éléments sup (comme un symbole de devise) dans le titre */
.pricing h4 sup {
  /* Taille de la police pour le texte en exposant */
  font-size: 28px;
}

/* Styles pour les éléments span (comme une description de tarif) dans le titre */
.pricing h4 span {
  /* Couleur du texte avec un mélange de transparence */
  color: color-mix(in srgb, var(--default-color), transparent 50%);
  /* Taille de la police pour le texte dans le span */
  font-size: 18px;
  /* Poids de la police pour un texte normal */
  font-weight: 400;
}

/* Styles pour la liste des fonctionnalités dans chaque carte de prix */
.pricing ul {
  /* Ajout de padding en haut et en bas de la liste */
  padding: 20px 0;
  /* Suppression des puces de la liste */
  list-style: none;
  /* Couleur du texte avec une légère transparence */
  color: color-mix(in srgb, var(--default-color), transparent 20%);
  /* Alignement du texte à gauche */
  text-align: left;
  /* Hauteur de ligne pour l'espacement entre les éléments */
  line-height: 20px;
}

/* Styles pour chaque élément de la liste */
.pricing ul li {
  /* Ajout de padding en haut et en bas pour chaque élément */
  padding: 10px 0;
  /* Utilisation de flexbox pour aligner les éléments horizontalement */
  display: flex;
  /* Alignement vertical centré pour les éléments flex */
  align-items: center;
}

/* Styles pour les icônes dans les éléments de la liste */
.pricing ul i {
  /* Couleur des icônes, ici un vert spécifique */
  color: #059652;
  /* Taille des icônes */
  font-size: 24px;
  /* Espacement à droite de l'icône */
  padding-right: 3px;
}

/* Styles pour les éléments de liste qui ne sont pas disponibles (classe .na) */
.pricing ul .na {
  /* Couleur du texte pour les éléments indisponibles, avec plus de transparence */
  color: color-mix(in srgb, var(--default-color), transparent 70%);
}

/* Styles pour les icônes dans les éléments indisponibles */
.pricing ul .na i {
  /* Couleur des icônes dans les éléments indisponibles */
  color: color-mix(in srgb, var(--default-color), transparent 70%);
}

/* Styles pour le texte barré dans les éléments indisponibles */
.pricing ul .na span {
  /* Décoration du texte en le barrant */
  text-decoration: line-through;
}

/* Styles pour le bouton d'achat dans chaque carte de prix */
.pricing .buy-btn {
  /* Couleur du texte du bouton, avec une légère transparence */
  color: color-mix(in srgb, var(--default-color), transparent 20%);
  /* Affichage en bloc pour le bouton, permettant la gestion de la taille */
  display: inline-block;
  /* Padding pour le bouton, ajustant l'espacement interne */
  padding: 8px 40px 10px 40px;
  /* Bordure arrondie pour donner une forme de pillule au bouton */
  border-radius: 50px;
  /* Couleur de la bordure du bouton, avec une transparence élevée */
  border: 1px solid color-mix(in srgb, var(--default-color), transparent 80%);
  /* Désactivation des transitions par défaut */
  transition: none;
  /* Taille de la police pour le texte du bouton */
  font-size: 16px;
  /* Poids de la police pour un texte en semi-gras */
  font-weight: 600;
  /* Police utilisée pour le texte du bouton */
  font-family: var(--heading-font);
  /* Transition pour les changements d'état du bouton */
  transition: 0.3s;
}

/* Styles pour le bouton d'achat au survol */
.pricing .buy-btn:hover {
  /* Changement de la couleur de fond du bouton lorsqu'il est survolé */
  background-color: var(--accent-color);
  /* Changement de la couleur du texte lorsqu'il est survolé */
  color: var(--contrast-color);
}

/* Styles pour les cartes de prix mises en avant (classe .featured) */
.pricing .featured {
  /* Positionnement en avant des autres éléments sur l'axe z */
  z-index: 10;
  /* Ajout d'une bordure de 3px autour de la carte, utilisant la couleur accentuée */
  border: 3px solid var(--accent-color);
}

/* Styles spécifiques aux écrans d'une largeur minimale de 992px */
@media (min-width: 992px) {
  /* Appliquer une transformation d'agrandissement pour les cartes mises en avant */
  .pricing .featured {
    /* Agrandir la carte mise en avant à 115% de sa taille originale */
    transform: scale(1.15);
  }
}
/*--------------------------------------------------------------
# Section Tarifs
--------------------------------------------------------------*/




/*--------------------------------------------------------------
# Section FAQ
--------------------------------------------------------------*/
/* Style pour les titres de section dans la FAQ */
.faq .content h3 {
  /* Réglage du poids de la police pour le titre */
  font-weight: 400;
  /* Taille de la police pour le titre de la section FAQ */
  font-size: 34px;
}

/* Style pour les paragraphes dans la FAQ */
.faq .content p {
  /* Taille de la police pour les paragraphes */
  font-size: 15px;
  /* Couleur du texte avec un mélange de la couleur par défaut et une transparence */
  color: color-mix(in srgb, var(--default-color), transparent 30%);
}

/* Style pour les éléments individuels de la FAQ */
.faq .faq-container .faq-item {
  /* Couleur de fond pour chaque élément de la FAQ */
  background-color: var(--surface-color);
  /* Positionnement relatif pour permettre l'utilisation de pseudo-éléments */
  position: relative;
  /* Padding intérieur pour espacer le contenu */
  padding: 20px;
  /* Espacement sous chaque élément de la FAQ */
  margin-bottom: 20px;
  /* Ombre portée pour donner une profondeur à l'élément */
  box-shadow: 0px 5px 25px 0px rgba(0, 0, 0, 0.1);
  /* Gestion du débordement pour éviter que le contenu ne dépasse */
  overflow: hidden;
}

/* Retrait de la marge inférieure pour le dernier élément de la FAQ */
.faq .faq-container .faq-item:last-child {
  margin-bottom: 0;
}

/* Style pour les titres des questions dans la FAQ */
.faq .faq-container .faq-item h3 {
  /* Poids de la police pour les titres des questions */
  font-weight: 600;
  /* Taille de la police pour les titres des questions */
  font-size: 18px;
  /* Hauteur de ligne pour un espacement vertical approprié */
  line-height: 24px;
  /* Retrait de la marge sur les côtés du titre */
  margin: 0 30px 0 0;
  /* Transition pour les effets de survol */
  transition: 0.3s;
  /* Indication que l'élément est cliquable */
  cursor: pointer;
  /* Alignement des éléments enfants au début de l'élément parent */
  display: flex;
  align-items: flex-start;
}

/* Style pour les numéros devant les questions dans la FAQ */
.faq .faq-container .faq-item h3 .num {
  /* Couleur du numéro utilisant la couleur accentuée */
  color: var(--accent-color);
  /* Espacement entre le numéro et le texte */
  padding-right: 5px;
}

/* Changement de la couleur du texte du titre au survol */
.faq .faq-container .faq-item h3:hover {
  color: var(--accent-color);
}

/* Style pour le contenu des réponses dans la FAQ */
.faq .faq-container .faq-item .faq-content {
  /* Utilisation d'une grille pour organiser le contenu */
  display: grid;
  /* Définition de la hauteur initiale du contenu */
  grid-template-rows: 0fr;
  /* Transition pour une animation fluide de l'expansion ou de la réduction */
  transition: 0.3s ease-in-out;
  /* Rendre le contenu caché par défaut */
  visibility: hidden;
  /* Opacité à 0 pour cacher visuellement le contenu */
  opacity: 0;
}

/* Style pour les paragraphes à l'intérieur du contenu de la FAQ */
.faq .faq-container .faq-item .faq-content p {
  /* Réinitialisation de la marge inférieure pour éviter l'espace supplémentaire */
  margin-bottom: 0;
  /* Masquer tout débordement de contenu */
  overflow: hidden;
}

/* Style pour le bouton de bascule de la FAQ */
.faq .faq-container .faq-item .faq-toggle {
  /* Positionnement absolu du bouton de bascule dans l'élément de la FAQ */
  position: absolute;
  /* Positionnement en haut à droite avec un espacement de 20px */
  top: 20px;
  right: 20px;
  /* Taille de la police pour l'icône de bascule */
  font-size: 16px;
  /* Hauteur de ligne nulle pour éviter tout espace supplémentaire autour de l'icône */
  line-height: 0;
  /* Transition pour les effets de rotation et de couleur */
  transition: 0.3s;
  /* Indication que l'élément est cliquable */
  cursor: pointer;
}

/* Changement de couleur de l'icône de bascule au survol */
.faq .faq-container .faq-item .faq-toggle:hover {
  color: var(--accent-color);
}

/* Style appliqué lorsque la FAQ est active (déployée) */
.faq .faq-container .faq-active h3 {
  /* Couleur du titre de la FAQ en mode actif */
  color: var(--accent-color);
}

/* Style pour le contenu de la FAQ lorsque celle-ci est active */
.faq .faq-container .faq-active .faq-content {
  /* Expansion de la hauteur du contenu pour afficher le texte */
  grid-template-rows: 1fr;
  /* Rendre le contenu visible */
  visibility: visible;
  /* Opacité à 1 pour afficher visuellement le contenu */
  opacity: 1;
  /* Ajout d'un espacement en haut du contenu */
  padding-top: 10px;
}

/* Style pour l'icône de bascule lorsque la FAQ est active */
.faq .faq-container .faq-active .faq-toggle {
  /* Rotation de l'icône pour indiquer l'état actif */
  transform: rotate(90deg);
  /* Changement de la couleur de l'icône en mode actif */
  color: var(--accent-color);
}
/*--------------------------------------------------------------
# Section FAQ
--------------------------------------------------------------*/




/*--------------------------------------------------------------
# Section Articles Récents
--------------------------------------------------------------*/
/* Style pour les articles de la section "Recent Posts" */
.recent-posts article {
  /* Couleur de fond de l'article */
  background: var(--surface-color);
  /* Ombre pour donner un effet de profondeur */
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
  /* Espacement intérieur de l'article */
  padding: 30px;
  /* Hauteur de l'article */
  height: 100%;
  /* Coins arrondis de l'article */
  border-radius: 10px;
  /* Masquer tout débordement de contenu */
  overflow: hidden;
}

/* Style pour l'image du post dans la section "Recent Posts" */
.recent-posts .post-img {
  /* Hauteur maximale de l'image */
  max-height: 240px;
  /* Marge négative pour recouvrir les bords de l'article */
  margin: -30px -30px 15px -30px;
  /* Masquer tout débordement de l'image */
  overflow: hidden;
}

/* Style pour la catégorie du post */
.recent-posts .post-category {
  /* Taille de la police pour la catégorie */
  font-size: 16px;
  /* Couleur du texte de la catégorie */
  color: color-mix(in srgb, var(--default-color), transparent 50%);
  /* Marge inférieure pour espacer la catégorie du contenu suivant */
  margin-bottom: 10px;
}

/* Style pour le titre du post */
.recent-posts .title {
  /* Taille de la police pour le titre */
  font-size: 20px;
  /* Épaisseur de la police pour le titre */
  font-weight: 700;
  /* Suppression des marges internes */
  padding: 0;
  /* Marge inférieure pour espacer le titre du contenu suivant */
  margin: 0 0 20px 0;
}

/* Style pour les liens dans le titre du post */
.recent-posts .title a {
  /* Couleur du lien pour le titre */
  color: var(--heading-color);
  /* Transition de la couleur au survol */
  transition: 0.3s;
}

/* Changement de couleur du lien du titre au survol */
.recent-posts .title a:hover {
  color: var(--accent-color);
}

/* Style pour l'image de l'auteur du post */
.recent-posts .post-author-img {
  /* Largeur de l'image de l'auteur */
  width: 50px;
  /* Arrondir l'image pour qu'elle soit circulaire */
  border-radius: 50%;
  /* Marge droite pour espacer l'image du texte */
  margin-right: 15px;
}

/* Style pour le nom de l'auteur du post */
.recent-posts .post-author {
  /* Épaisseur de la police pour le nom de l'auteur */
  font-weight: 600;
  /* Marge inférieure pour espacer le nom de la date */
  margin-bottom: 5px;
}

/* Style pour la date du post */
.recent-posts .post-date {
  /* Taille de la police pour la date */
  font-size: 14px;
  /* Couleur de la date */
  color: color-mix(in srgb, var(--default-color), transparent 50%);
  /* Suppression de la marge inférieure */
  margin-bottom: 0;
}
/*--------------------------------------------------------------
# Section Articles Récents
--------------------------------------------------------------*/




/*--------------------------------------------------------------
# Section Contact
--------------------------------------------------------------*/
/* Conteneur d'information dans la section "Contact" */
.contact .info-container {
  /* Couleur de fond pour le conteneur d'information */
  background-color: var(--accent-color);
  /* Hauteur totale du conteneur */
  height: 100%;
  /* Espacement intérieur du conteneur */
  padding: 20px;
}

/* Élément d'information individuel dans la section "Contact" */
.contact .info-item {
  /* Largeur totale de l'élément */
  width: 100%;
  /* Marge inférieure entre les éléments */
  margin-bottom: 20px;
  /* Espacement intérieur de l'élément */
  padding: 20px;
  /* Couleur du texte */
  color: var(--contrast-color);
  /* Couleur de fond avec une transparence */
  background-color: color-mix(in srgb, var(--contrast-color), transparent 90%);
}

/* Suppression de la marge inférieure pour le dernier élément d'information */
.contact .info-item:last-child {
  margin-bottom: 0;
}

/* Icône à l'intérieur de l'élément d'information */
.contact .info-item i {
  /* Taille de la police pour l'icône */
  font-size: 20px;
  /* Couleur de l'icône */
  color: var(--contrast-color);
  /* Couleur de fond de l'icône avec une transparence */
  background-color: color-mix(in srgb, var(--contrast-color), transparent 80%);
  /* Dimensions de l'icône */
  width: 44px;
  height: 44px;
  /* Centrer l'icône à l'intérieur du conteneur */
  display: flex;
  justify-content: center;
  align-items: center;
  /* Arrondir l'icône pour un effet circulaire */
  border-radius: 50px;
  /* Transition douce pour les effets au survol */
  transition: all 0.3s ease-in-out;
  /* Marge droite pour espacer l'icône du texte */
  margin-right: 15px;
}

/* Titre de l'élément d'information */
.contact .info-item h3 {
  /* Couleur du texte pour le titre */
  color: var(--contrast-color);
  /* Taille de la police pour le titre */
  font-size: 20px;
  /* Suppression de l'espacement interne */
  padding: 0;
  /* Taille de la police */
  font-size: 18px;
  /* Épaisseur de la police pour le titre */
  font-weight: 700;
  /* Marge inférieure pour espacer le titre du paragraphe */
  margin-bottom: 5px;
}

/* Texte descriptif dans l'élément d'information */
.contact .info-item p {
  /* Suppression de l'espacement interne */
  padding: 0;
  /* Suppression de la marge inférieure */
  margin-bottom: 0;
  /* Taille de la police pour le texte */
  font-size: 14px;
}

/* Styles au survol pour l'icône à l'intérieur de l'élément d'information */
.contact .info-item:hover i {
  /* Changement de la couleur de fond au survol */
  background: var(--contrast-color);
  /* Changement de la couleur de l'icône au survol */
  color: var(--accent-color);
}

/* Formulaire de contact PHP */
.contact .php-email-form {
  /* Couleur de fond du formulaire */
  background-color: var(--surface-color);
  /* Ombre portée pour donner de la profondeur */
  box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.1);
  /* Largeur et hauteur du formulaire */
  width: 100%;
  height: 100%;
  /* Espacement interne du formulaire */
  padding: 30px;
}

/* Styles pour les champs de texte et email ainsi que la zone de texte */
.contact .php-email-form input[type=text],
.contact .php-email-form input[type=email],
.contact .php-email-form textarea {
  /* Taille de la police des champs */
  font-size: 14px;
  /* Espacement interne pour les champs */
  padding: 10px 15px;
  /* Suppression de l'ombre portée par défaut */
  box-shadow: none;
  /* Bordures non arrondies */
  border-radius: 0;
  /* Couleur du texte à l'intérieur des champs */
  color: var(--default-color);
  /* Couleur de fond des champs */
  background-color: var(--surface-color);
  /* Couleur de la bordure */
  border-color: color-mix(in srgb, var(--default-color), transparent 80%);
}

/* Styles pour les champs de texte, email et la zone de texte lorsqu'ils sont focalisés */
.contact .php-email-form input[type=text]:focus,
.contact .php-email-form input[type=email]:focus,
.contact .php-email-form textarea:focus {
  /* Changement de la couleur de la bordure lors du focus */
  border-color: var(--accent-color);
}

/* Styles pour les espaces réservés (placeholders) dans les champs de texte, email et zone de texte */
.contact .php-email-form input[type=text]::placeholder,
.contact .php-email-form input[type=email]::placeholder,
.contact .php-email-form textarea::placeholder {
  /* Couleur des placeholders avec une légère transparence */
  color: color-mix(in srgb, var(--default-color), transparent 70%);
}

/* Styles pour le bouton de soumission du formulaire */
.contact .php-email-form button[type=submit] {
  /* Couleur du texte du bouton */
  color: var(--contrast-color);
  /* Couleur de fond du bouton */
  background: var(--accent-color);
  /* Suppression de la bordure */
  border: 0;
  /* Espacement interne du bouton */
  padding: 10px 30px;
  /* Transition douce pour les interactions utilisateur */
  transition: 0.4s;
  /* Bordures arrondies pour un effet de bouton pillule */
  border-radius: 50px;
}

/* Styles au survol pour le bouton de soumission du formulaire */
.contact .php-email-form button[type=submit]:hover {
  /* Changement de la couleur de fond au survol avec transparence */
  background: color-mix(in srgb, var(--accent-color), transparent 20%);
}
/*--------------------------------------------------------------
# Section Contact
--------------------------------------------------------------*/





/*--------------------------------------------------------------
# Section Détails des Services
--------------------------------------------------------------*/
/* Conteneur pour la liste des services dans les détails du service */
.service-details .services-list {
  /* Couleur de fond de la liste des services */
  background-color: var(--surface-color);
  /* Espacement interne de la liste des services */
  padding: 10px 30px;
  /* Bordure légère autour de la liste des services */
  border: 1px solid color-mix(in srgb, var(--default-color), transparent 90%);
  /* Marge en bas de la liste des services */
  margin-bottom: 20px;
}

/* Liens dans la liste des services */
.service-details .services-list a {
  /* Affichage en bloc pour occuper toute la largeur disponible */
  display: block;
  /* Hauteur de ligne pour les liens */
  line-height: 1;
  /* Espacement interne des liens */
  padding: 8px 0 8px 15px;
  /* Bordure à gauche des liens */
  border-left: 3px solid color-mix(in srgb, var(--default-color), transparent 70%);
  /* Marge verticale entre les liens */
  margin: 20px 0;
  /* Couleur du texte des liens */
  color: color-mix(in srgb, var(--default-color), transparent 20%);
  /* Transition douce pour les effets au survol et à l'activation */
  transition: 0.3s;
}

/* Style pour le lien actif dans la liste des services */
.service-details .services-list a.active {
  /* Couleur du texte pour le lien actif */
  color: var(--heading-color);
  /* Poids de la police pour mettre en évidence le lien actif */
  font-weight: 700;
  /* Couleur de la bordure à gauche pour le lien actif */
  border-color: var(--accent-color);
}

/* Style pour les liens au survol dans la liste des services */
.service-details .services-list a:hover {
  /* Changement de la couleur de la bordure à gauche au survol */
  border-color: var(--accent-color);
}

/* Style pour les images dans les détails du service */
.service-details .services-img {
  /* Marge en bas des images */
  margin-bottom: 20px;
}

/* Style pour les titres de niveau 3 dans les détails du service */
.service-details h3 {
  /* Taille de la police pour les titres de niveau 3 */
  font-size: 26px;
  /* Poids de la police pour les titres de niveau 3 */
  font-weight: 700;
}

/* Style pour les titres de niveau 4 dans les détails du service */
.service-details h4 {
  /* Taille de la police pour les titres de niveau 4 */
  font-size: 20px;
  /* Poids de la police pour les titres de niveau 4 */
  font-weight: 700;
}

/* Style pour les paragraphes dans les détails du service */
.service-details p {
  /* Taille de la police pour les paragraphes */
  font-size: 15px;
}


/* Liste non ordonnée dans les détails du service */
.service-details ul {
  /* Suppression des puces par défaut */
  list-style: none;
  /* Suppression du padding interne par défaut */
  padding: 0;
  /* Taille de la police pour le texte de la liste */
  font-size: 15px;
}

/* Élément de liste dans les détails du service */
.service-details ul li {
  /* Espacement interne en haut et en bas de chaque élément de la liste */
  padding: 5px 0;
  /* Alignement des éléments de la liste sur la même ligne */
  display: flex;
  /* Alignement vertical des éléments de la liste */
  align-items: center;
}

/* Icône à l'intérieur des éléments de la liste dans les détails du service */
.service-details ul i {
  /* Taille de la police pour les icônes */
  font-size: 20px;
  /* Marge à droite des icônes */
  margin-right: 8px;
  /* Couleur des icônes */
  color: var(--accent-color);
}


/*--------------------------------------------------------------
# Section détails des activités
--------------------------------------------------------------*/
/* Image dans le slider des détails du portfolio */
.portfolio-details .portfolio-details-slider img {
  /* Largeur de l'image prend 100% de l'espace disponible */
  width: 100%;
}

/* Wrapper du slider des détails du portfolio */
.portfolio-details .swiper-wrapper {
  /* Hauteur automatique pour s'ajuster au contenu */
  height: auto;
}

/* Boutons précédent et suivant dans le slider des détails du portfolio */
.portfolio-details .swiper-button-prev,
.portfolio-details .swiper-button-next {
  /* Taille des boutons de navigation */
  width: 48px;
  height: 48px;
}

/* Styles pour les icônes des boutons précédent et suivant */
.portfolio-details .swiper-button-prev:after,
.portfolio-details .swiper-button-next:after {
  /* Couleur des icônes avec opacité */
  color: rgba(255, 255, 255, 0.8);
  /* Couleur de fond des icônes avec opacité */
  background-color: rgba(0, 0, 0, 0.15);
  /* Taille de la police des icônes */
  font-size: 24px;
  /* Bordures arrondies pour les icônes */
  border-radius: 50%;
  /* Dimensions des icônes */
  width: 48px;
  height: 48px;
  /* Alignement central des icônes */
  display: flex;
  align-items: center;
  justify-content: center;
  /* Transition pour les changements de style */
  transition: 0.3s;
}

/* Changement de couleur de fond des icônes au survol */
.portfolio-details .swiper-button-prev:hover:after,
.portfolio-details .swiper-button-next:hover:after {
  /* Couleur de fond des icônes au survol avec plus d'opacité */
  background-color: rgba(0, 0, 0, 0.3);
}

/* Styles pour les écrans de petite taille */
@media (max-width: 575px) {
  
  /* Cacher les boutons de navigation du slider pour les petits écrans */
  .portfolio-details .swiper-button-prev,
  .portfolio-details .swiper-button-next {
    display: none;
  }
}

/* Pagination du swiper dans les détails du portfolio */
.portfolio-details .swiper-pagination {
  /* Marge supérieure de la pagination */
  margin-top: 20px;
  /* Position relative pour permettre un placement personnalisé */
  position: relative;
}

/* Style des bullets de pagination */
.portfolio-details .swiper-pagination .swiper-pagination-bullet {
  /* Taille des bullets */
  width: 10px;
  height: 10px;
  /* Couleur de fond des bullets avec transparence */
  background-color: color-mix(in srgb, var(--default-color), transparent 85%);
  /* Opacité des bullets */
  opacity: 1;
}

/* Style des bullets de pagination actives */
.portfolio-details .swiper-pagination .swiper-pagination-bullet-active {
  /* Couleur de fond des bullets actives */
  background-color: var(--accent-color);
}

/* Titre de l'information du portfolio */
.portfolio-details .portfolio-info h3 {
  /* Taille de la police */
  font-size: 22px;
  /* Poids de la police */
  font-weight: 700;
  /* Marge inférieure du titre */
  margin-bottom: 20px;
  /* Padding en bas du titre */
  padding-bottom: 20px;
  /* Position relative pour permettre un placement personnalisé */
  position: relative;
}

/* Ligne décorative sous le titre */
.portfolio-details .portfolio-info h3:after {
  /* Contenu vide pour créer la ligne */
  content: "";
  /* Positionnement absolu de la ligne */
  position: absolute;
  /* Affichage du bloc */
  display: block;
  /* Taille de la ligne */
  width: 50px;
  height: 3px;
  /* Couleur de fond de la ligne */
  background: var(--accent-color);
  /* Alignement à gauche */
  left: 0;
  /* Positionnement en bas */
  bottom: 0;
}

/* Liste des informations du portfolio */
.portfolio-details .portfolio-info ul {
  /* Retrait des puces */
  list-style: none;
  /* Suppression du padding */
  padding: 0;
  /* Taille de la police de la liste */
  font-size: 15px;
}

/* Éléments de la liste des informations du portfolio */
.portfolio-details .portfolio-info ul li {
  /* Affichage en colonne */
  display: flex;
  flex-direction: column;
  /* Padding en bas des éléments de la liste */
  padding-bottom: 15px;
}

/* Texte en gras pour les titres des informations */
.portfolio-details .portfolio-info ul strong {
  /* Transformation du texte en majuscules */
  text-transform: uppercase;
  /* Poids de la police */
  font-weight: 400;
  /* Couleur du texte avec transparence */
  color: color-mix(in srgb, var(--default-color), transparent 50%);
  /* Taille de la police */
  font-size: 14px;
}


/* Bouton de visite dans les informations du portfolio */
.portfolio-details .portfolio-info .btn-visit {
  /* Padding autour du bouton */
  padding: 8px 40px;
  /* Couleur de fond du bouton */
  background: var(--accent-color);
  /* Couleur du texte du bouton */
  color: var(--contrast-color);
  /* Bordure arrondie du bouton */
  border-radius: 50px;
  /* Transition pour les interactions */
  transition: 0.3s;
}

/* État du bouton de visite au survol */
.portfolio-details .portfolio-info .btn-visit:hover {
  /* Changement de la couleur de fond avec transparence */
  background: color-mix(in srgb, var(--accent-color), transparent 20%);
}

/* Titre de la description du portfolio */
.portfolio-details .portfolio-description h2 {
  /* Taille de la police */
  font-size: 26px;
  /* Poids de la police */
  font-weight: 700;
  /* Marge inférieure du titre */
  margin-bottom: 20px;
}

/* Paragraphe dans la description du portfolio */
.portfolio-details .portfolio-description p {
  /* Suppression du padding */
  padding: 0;
}

/* Élément de témoignage dans la description du portfolio */
.portfolio-details .portfolio-description .testimonial-item {
  /* Padding autour du témoignage */
  padding: 30px 30px 0 30px;
  /* Positionnement relatif pour personnalisation */
  position: relative;
  /* Couleur de fond avec transparence */
  background: color-mix(in srgb, var(--default-color), transparent 97%);
  /* Marge inférieure du témoignage */
  margin-bottom: 50px;
}

/* Image de l'auteur du témoignage */
.portfolio-details .portfolio-description .testimonial-item .testimonial-img {
  /* Largeur de l'image */
  width: 90px;
  /* Bordure arrondie de l'image */
  border-radius: 50px;
  /* Bordure autour de l'image */
  border: 6px solid var(--background-color);
  /* Positionnement flottant à gauche */
  float: left;
  /* Marge autour de l'image */
  margin: 0 10px 0 0;
}

/* Nom de l'auteur du témoignage */
.portfolio-details .portfolio-description .testimonial-item h3 {
  /* Taille de la police */
  font-size: 18px;
  /* Poids de la police */
  font-weight: bold;
  /* Marges autour du nom */
  margin: 15px 0 5px 0;
  /* Padding supérieur pour ajustement */
  padding-top: 20px;
}

/* Position ou titre de l'auteur du témoignage */
.portfolio-details .portfolio-description .testimonial-item h4 {
  /* Taille de la police */
  font-size: 14px;
  /* Couleur du texte */
  color: #6c757d;
  /* Suppression de la marge */
  margin: 0;
}


/* Style pour les icônes de citation gauche et droite dans les témoignages */
.portfolio-details .portfolio-description .testimonial-item .quote-icon-left,
.portfolio-details .portfolio-description .testimonial-item .quote-icon-right {
  /* Couleur des icônes avec transparence */
  color: color-mix(in srgb, var(--accent-color), transparent 50%);
  /* Taille de la police des icônes */
  font-size: 26px;
  /* Hauteur de ligne réduite à zéro */
  line-height: 0;
}

/* Icône de citation gauche dans les témoignages */
.portfolio-details .portfolio-description .testimonial-item .quote-icon-left {
  /* Affichage en ligne */
  display: inline-block;
  /* Positionnement relatif avec déplacement à gauche */
  left: -5px;
  position: relative;
}

/* Icône de citation droite dans les témoignages */
.portfolio-details .portfolio-description .testimonial-item .quote-icon-right {
  /* Affichage en ligne */
  display: inline-block;
  /* Positionnement relatif avec déplacement à droite */
  right: -5px;
  /* Positionnement relatif avec déplacement vers le haut */
  position: relative;
  top: 10px;
  /* Transformation pour inverser l'icône horizontalement et verticalement */
  transform: scale(-1, -1);
}

/* Paragraphe du texte du témoignage */
.portfolio-details .portfolio-description .testimonial-item p {
  /* Style de police en italique */
  font-style: italic;
  /* Marge inférieure du paragraphe */
  margin: 0 0 15px 0;
  /* Suppression du padding */
  padding: 0;
}

/*--------------------------------------------------------------
# Section Starter Section
--------------------------------------------------------------*/
/* .starter-section { */
  /* Ajouter vos styles ici */
/* } */

/*--------------------------------------------------------------
# Section Articles de Blog
--------------------------------------------------------------*/
/* Style pour les articles de blog dans la section des posts */
.blog-posts article {
  /* Couleur de fond pour l'article */
  background-color: var(--surface-color);
  /* Ombre portée pour l'article */
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
  /* Padding autour du contenu de l'article */
  padding: 30px;
  /* Hauteur totale de l'article */
  height: 100%;
  /* Bordure arrondie pour l'article */
  border-radius: 10px;
  /* Contenu masqué si dépassement */
  overflow: hidden;
}

/* Style pour l'image du post dans l'article */
.blog-posts .post-img {
  /* Hauteur maximale de l'image */
  max-height: 240px;
  /* Marge négative autour de l'image */
  margin: -30px -30px 15px -30px;
  /* Contenu masqué si dépassement */
  overflow: hidden;
}

/* Style pour la catégorie du post */
.blog-posts .post-category {
  /* Taille de la police pour la catégorie */
  font-size: 16px;
  /* Couleur de la catégorie avec transparence */
  color: color-mix(in srgb, var(--default-color), transparent 40%);
  /* Marge inférieure sous la catégorie */
  margin-bottom: 10px;
}

/* Style pour le titre de l'article */
.blog-posts .title {
  /* Taille de la police pour le titre */
  font-size: 20px;
  /* Poids de la police pour le titre */
  font-weight: 700;
  /* Suppression du padding */
  padding: 0;
  /* Marge inférieure sous le titre */
  margin: 0 0 20px 0;
}

/* Style pour les liens dans le titre de l'article */
.blog-posts .title a {
  /* Couleur du lien dans le titre */
  color: var(--heading-color);
  /* Transition pour le changement de couleur */
  transition: 0.3s;
}

/* Style pour le lien dans le titre au survol */
.blog-posts .title a:hover {
  /* Changement de la couleur du lien au survol */
  color: var(--accent-color);
}

/* Style pour l'image de l'auteur du post */
.blog-posts .post-author-img {
  /* Largeur de l'image de l'auteur */
  width: 50px;
  /* Bordure arrondie pour l'image de l'auteur */
  border-radius: 50%;
  /* Marge à droite de l'image de l'auteur */
  margin-right: 15px;
}

/* Style pour le nom de l'auteur du post */
.blog-posts .post-author {
  /* Poids de la police pour le nom de l'auteur */
  font-weight: 600;
  /* Marge inférieure sous le nom de l'auteur */
  margin-bottom: 5px;
}

/* Style pour la date du post */
.blog-posts .post-date {
  /* Taille de la police pour la date */
  font-size: 14px;
  /* Couleur de la date avec transparence */
  color: color-mix(in srgb, var(--default-color), transparent 40%);
  /* Suppression de la marge inférieure */
  margin-bottom: 0;
}


/*--------------------------------------------------------------
# Section Pagination de Blog
--------------------------------------------------------------*/
/* Style pour la pagination des articles de blog */
.blog-pagination {
  /* Padding en haut de la pagination */
  padding-top: 0;
  /* Couleur de la pagination avec transparence */
  color: color-mix(in srgb, var(--default-color), transparent 40%);
}

/* Style pour la liste de la pagination */
.blog-pagination ul {
  /* Affichage en flexbox pour aligner les éléments horizontalement */
  display: flex;
  /* Suppression du padding */
  padding: 0;
  /* Suppression de la marge */
  margin: 0;
  /* Suppression du style de liste */
  list-style: none;
}

/* Style pour les éléments de la liste de pagination */
.blog-pagination li {
  /* Marge entre les éléments de pagination */
  margin: 0 5px;
  /* Transition pour les effets au survol */
  transition: 0.3s;
}

/* Style pour les liens dans la pagination */
.blog-pagination li a {
  /* Couleur des liens de pagination avec transparence */
  color: color-mix(in srgb, var(--default-color), transparent 40%);
  /* Padding à l'intérieur des liens */
  padding: 7px 16px;
  /* Affichage en flexbox pour centrer le contenu verticalement et horizontalement */
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Style pour les liens actifs ou survolés dans la pagination */
.blog-pagination li a.active,
.blog-pagination li a:hover {
  /* Couleur de fond pour le lien actif ou survolé */
  background: var(--accent-color);
  /* Couleur du texte pour le lien actif ou survolé */
  color: var(--contrast-color);
}

/* Style pour les liens imbriqués dans un lien actif ou survolé */
.blog-pagination li a.active a,
.blog-pagination li a:hover a {
  /* Couleur du texte pour les liens imbriqués dans un lien actif ou survolé */
  color: var(--contrast-color);
}

/*--------------------------------------------------------------
# Section Détails du Blog
--------------------------------------------------------------*/
/* Style général pour les détails des articles de blog */
.blog-details {
  /* Espacement en bas des détails de l'article */
  padding-bottom: 30px;
}

/* Style pour l'article dans les détails de blog */
.blog-details .article {
  /* Couleur de fond de l'article */
  background-color: var(--surface-color);
  /* Espacement intérieur de l'article */
  padding: 30px;
  /* Ombre portée pour l'article */
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
}

/* Style pour l'image de l'article dans les détails de blog */
.blog-details .post-img {
  /* Marge négative pour l'image de l'article */
  margin: -30px -30px 20px -30px;
  /* Gestion du débordement de l'image */
  overflow: hidden;
}

/* Style pour le titre de l'article dans les détails de blog */
.blog-details .title {
  /* Couleur du titre */
  color: var(--heading-color);
  /* Taille de la police pour le titre */
  font-size: 28px;
  /* Poids de la police pour le titre */
  font-weight: 700;
  /* Suppression du padding */
  padding: 0;
  /* Marge autour du titre */
  margin: 30px 0;
}

/* Style pour le contenu de l'article dans les détails de blog */
.blog-details .content {
  /* Marge en haut du contenu */
  margin-top: 20px;
}

/* Style pour les sous-titres dans le contenu de l'article */
.blog-details .content h3 {
  /* Taille de la police pour les sous-titres */
  font-size: 22px;
  /* Marge en haut des sous-titres */
  margin-top: 30px;
  /* Poids de la police pour les sous-titres */
  font-weight: bold;
}

/* Style pour les blockquotes dans le contenu de l'article */
.blog-details .content blockquote {
  /* Gestion du débordement pour les blockquotes */
  overflow: hidden;
  /* Couleur de fond pour les blockquotes avec transparence */
  background-color: color-mix(in srgb, var(--default-color), transparent 95%);
  /* Espacement intérieur des blockquotes */
  padding: 60px;
  /* Positionnement relatif pour les blockquotes */
  position: relative;
  /* Alignement du texte au centre pour les blockquotes */
  text-align: center;
  /* Marge autour des blockquotes */
  margin: 20px 0;
}

/* Style pour les paragraphes dans les blockquotes des détails de l'article */
.blog-details .content blockquote p {
  /* Couleur du texte des paragraphes dans les blockquotes */
  color: var(--default-color);
  /* Hauteur de ligne pour une meilleure lisibilité */
  line-height: 1.6;
  /* Suppression de la marge en bas des paragraphes */
  margin-bottom: 0;
  /* Style de police en italique */
  font-style: italic;
  /* Poids de la police pour les paragraphes */
  font-weight: 500;
  /* Taille de la police pour les paragraphes */
  font-size: 22px;
}

/* Style pour l'effet visuel sur les blockquotes des détails de l'article */
.blog-details .content blockquote:after {
  /* Contenu vide pour créer un effet visuel */
  content: "";
  /* Positionnement absolu pour le pseudo-élément */
  position: absolute;
  /* Positionnement à gauche du pseudo-élément */
  left: 0;
  /* Étirement du pseudo-élément de haut en bas */
  top: 0;
  bottom: 0;
  /* Largeur du pseudo-élément */
  width: 3px;
  /* Couleur du pseudo-élément correspondant à l'accent */
  background-color: var(--accent-color);
  /* Marge en haut et en bas du pseudo-élément pour un espace */
  margin-top: 20px;
  margin-bottom: 20px;
}

/* Style pour la section des métadonnées en haut des détails de l'article */
.blog-details .meta-top {
  /* Marge en haut des métadonnées */
  margin-top: 20px;
  /* Couleur du texte des métadonnées avec transparence */
  color: color-mix(in srgb, var(--default-color), transparent 40%);
}

/* Style pour la liste non ordonnée des métadonnées */
.blog-details .meta-top ul {
  /* Affichage flexible pour la liste des métadonnées */
  display: flex;
  /* Enveloppe les éléments si nécessaire */
  flex-wrap: wrap;
  /* Suppression du style de liste */
  list-style: none;
  /* Alignement des éléments de la liste */
  align-items: center;
  /* Suppression du padding par défaut */
  padding: 0;
  /* Suppression de la marge par défaut */
  margin: 0;
}

/* Style pour ajouter un espace entre les éléments de la liste des métadonnées */
.blog-details .meta-top ul li+li {
  /* Espacement entre les éléments de la liste */
  padding-left: 20px;
}

/* Style pour les icônes dans les métadonnées */
.blog-details .meta-top i {
  /* Taille de la police pour les icônes */
  font-size: 16px;
  /* Marge à droite des icônes */
  margin-right: 8px;
  /* Hauteur de ligne pour les icônes */
  line-height: 0;
  /* Couleur des icônes avec transparence */
  color: color-mix(in srgb, var(--default-color), transparent 40%);
}

/* Style pour les liens dans les métadonnées */
.blog-details .meta-top a {
  /* Couleur des liens avec transparence */
  color: color-mix(in srgb, var(--default-color), transparent 40%);
  /* Taille de la police pour les liens */
  font-size: 14px;
  /* Affichage en bloc pour les liens */
  display: inline-block;
  /* Hauteur de ligne pour les liens */
  line-height: 1;
}


/* Style pour la section des métadonnées en bas des détails de l'article */
.blog-details .meta-bottom {
  /* Espacement en haut de la section */
  padding-top: 10px;
  /* Ligne de séparation en haut avec transparence */
  border-top: 1px solid color-mix(in srgb, var(--default-color), transparent 90%);
}

/* Style pour les icônes dans la section des métadonnées en bas */
.blog-details .meta-bottom i {
  /* Couleur des icônes avec transparence */
  color: color-mix(in srgb, var(--default-color), transparent 40%);
  /* Affichage en ligne pour les icônes */
  display: inline;
}

/* Style pour les liens dans la section des métadonnées en bas */
.blog-details .meta-bottom a {
  /* Couleur des liens avec transparence */
  color: color-mix(in srgb, var(--default-color), transparent 40%);
  /* Transition des liens */
  transition: 0.3s;
}

/* Style pour les liens lors du survol dans la section des métadonnées en bas */
.blog-details .meta-bottom a:hover {
  /* Couleur des liens survolés correspondant à l'accent */
  color: var(--accent-color);
}

/* Style pour les catégories dans la section des métadonnées en bas */
.blog-details .meta-bottom .cats {
  /* Suppression du style de liste */
  list-style: none;
  /* Affichage en ligne pour les éléments de la liste */
  display: inline;
  /* Espacement interne à droite */
  padding: 0 20px 0 0;
  /* Taille de la police pour les catégories */
  font-size: 14px;
}

/* Style pour chaque élément de la liste des catégories */
.blog-details .meta-bottom .cats li {
  /* Affichage en ligne pour les éléments de la liste */
  display: inline-block;
}

/* Style pour les étiquettes (tags) dans la section des métadonnées en bas */
.blog-details .meta-bottom .tags {
  /* Suppression du style de liste */
  list-style: none;
  /* Affichage en ligne pour les éléments de la liste */
  display: inline;
  /* Suppression du padding interne */
  padding: 0;
  /* Taille de la police pour les étiquettes */
  font-size: 14px;
}

/* Style pour chaque élément de la liste des étiquettes */
.blog-details .meta-bottom .tags li {
  /* Affichage en ligne pour les éléments de la liste */
  display: inline-block;
}

/* Style pour ajouter une virgule entre les éléments de la liste des étiquettes */
.blog-details .meta-bottom .tags li+li::before {
  /* Espacement à droite de la virgule */
  padding-right: 6px;
  /* Couleur de la virgule */
  color: var(--default-color);
  /* Contenu de la pseudo-élément représentant la virgule */
  content: ",";
}

/* Style pour la section de partage dans la section des métadonnées en bas */
.blog-details .meta-bottom .share {
  /* Taille de la police pour la section de partage */
  font-size: 16px;
}

/* Style pour les icônes dans la section de partage */
.blog-details .meta-bottom .share i {
  /* Espacement à gauche des icônes de partage */
  padding-left: 5px;
}


/*--------------------------------------------------------------
# Section Auteur du Blog
--------------------------------------------------------------*/
/* Style pour la section de l'auteur du blog */
.blog-author {
  /* Espacement en haut et en bas de la section de l'auteur */
  padding: 10px 0 40px 0;
}

/* Style pour le conteneur de l'auteur */
.blog-author .author-container {
  /* Couleur de fond du conteneur de l'auteur */
  background-color: var(--surface-color);
  /* Espacement interne du conteneur de l'auteur */
  padding: 20px;
  /* Ombre portée autour du conteneur de l'auteur */
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
}

/* Style pour l'image de l'auteur */
.blog-author img {
  /* Largeur maximale de l'image de l'auteur */
  max-width: 120px;
  /* Espacement à droite de l'image de l'auteur */
  margin-right: 20px;
}

/* Style pour le nom de l'auteur */
.blog-author h4 {
  /* Poids de la police pour le nom de l'auteur */
  font-weight: 600;
  /* Taille de la police pour le nom de l'auteur */
  font-size: 20px;
  /* Marge inférieure du titre */
  margin-bottom: 0px;
  /* Suppression du padding interne */
  padding: 0;
  /* Couleur du texte du nom de l'auteur avec transparence */
  color: color-mix(in srgb, var(--default-color), transparent 20%);
}

/* Style pour les liens de réseaux sociaux de l'auteur */
.blog-author .social-links {
  /* Espacement autour des liens de réseaux sociaux */
  margin: 0 10px 10px 0;
}

/* Style pour chaque lien de réseau social */
.blog-author .social-links a {
  /* Couleur des liens de réseaux sociaux avec transparence */
  color: color-mix(in srgb, var(--default-color), transparent 60%);
  /* Espacement à droite de chaque lien */
  margin-right: 5px;
}

/* Style pour le texte descriptif de l'auteur */
.blog-author p {
  /* Style de police italique pour le texte descriptif */
  font-style: italic;
  /* Couleur du texte descriptif avec transparence */
  color: color-mix(in srgb, var(--default-color), transparent 30%);
  /* Suppression de la marge inférieure */
  margin-bottom: 0;
}


/*--------------------------------------------------------------
# Section Commentaires du Blog
--------------------------------------------------------------*/
/* Style pour la section des commentaires du blog */
.blog-comments {
  /* Espacement en haut et en bas de la section des commentaires */
  padding: 10px 0;
}

/* Style pour le compteur de commentaires */
.blog-comments .comments-count {
  /* Poids de la police pour le compteur de commentaires */
  font-weight: bold;
}

/* Style pour chaque commentaire */
.blog-comments .comment {
  /* Marge supérieure entre les commentaires */
  margin-top: 30px;
  /* Position relative pour permettre un positionnement précis des éléments internes */
  position: relative;
}

/* Style pour l'image de profil du commentaire */
.blog-comments .comment .comment-img {
  /* Espacement à droite de l'image de profil */
  margin-right: 14px;
}

/* Style pour l'image de profil elle-même */
.blog-comments .comment .comment-img img {
  /* Largeur de l'image de profil */
  width: 60px;
}

/* Style pour le nom de l'auteur du commentaire */
.blog-comments .comment h5 {
  /* Taille de la police pour le nom de l'auteur */
  font-size: 16px;
  /* Marge inférieure du titre */
  margin-bottom: 2px;
}

/* Style pour le lien du nom de l'auteur du commentaire */
.blog-comments .comment h5 a {
  /* Poids de la police pour le lien du nom */
  font-weight: bold;
  /* Couleur du lien du nom de l'auteur */
  color: var(--default-color);
  /* Transition pour l'effet de survol */
  transition: 0.3s;
}

/* Style pour le lien du nom de l'auteur lors du survol */
.blog-comments .comment h5 a:hover {
  /* Couleur du lien lors du survol */
  color: var(--accent-color);
}

/* Style pour le lien de réponse au commentaire */
.blog-comments .comment h5 .reply {
  /* Espacement à gauche du lien de réponse */
  padding-left: 10px;
  /* Couleur du lien de réponse avec transparence */
  color: color-mix(in srgb, var(--default-color), transparent 20%);
}

/* Style pour l'icône de réponse */
.blog-comments .comment h5 .reply i {
  /* Taille de la police pour l'icône de réponse */
  font-size: 20px;
}

/* Style pour l'élément de temps du commentaire */
.blog-comments .comment time {
  /* Affichage du temps sur un bloc distinct */
  display: block;
  /* Taille de la police pour l'élément de temps */
  font-size: 14px;
  /* Couleur du texte de l'élément de temps avec transparence */
  color: color-mix(in srgb, var(--default-color), transparent 40%);
  /* Marge inférieure pour espacer l'élément de temps */
  margin-bottom: 5px;
}

/* Style pour les réponses aux commentaires */
.blog-comments .comment.comment-reply {
  /* Indentation des réponses aux commentaires */
  padding-left: 40px;
}

/*--------------------------------------------------------------
# Section Formulaire de Commentaires
--------------------------------------------------------------*/
/* Style pour la section du formulaire de commentaire */
.comment-form {
  /* Espacement en haut de la section du formulaire */
  padding-top: 10px;
}

/* Style pour le formulaire de commentaire */
.comment-form form {
  /* Couleur de fond du formulaire */
  background-color: var(--surface-color);
  /* Marge supérieure pour espacer le formulaire du contenu précédent */
  margin-top: 30px;
  /* Espacement intérieur du formulaire */
  padding: 30px;
  /* Ombre portée pour le formulaire */
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
}

/* Style pour le titre du formulaire de commentaire */
.comment-form form h4 {
  /* Poids de la police pour le titre */
  font-weight: bold;
  /* Taille de la police pour le titre */
  font-size: 22px;
}

/* Style pour les paragraphes à l'intérieur du formulaire */
.comment-form form p {
  /* Taille de la police pour les paragraphes */
  font-size: 14px;
}

/* Style pour les champs de saisie du formulaire */
.comment-form form input {
  /* Couleur de fond des champs de saisie */
  background-color: var(--surface-color);
  /* Couleur du texte des champs de saisie */
  color: var(--default-color);
  /* Bordure des champs de saisie */
  border: 1px solid color-mix(in srgb, var(--default-color), transparent 70%);
  /* Taille de la police pour le texte des champs de saisie */
  font-size: 14px;
  /* Bordure arrondie des champs de saisie */
  border-radius: 4px;
  /* Espacement intérieur des champs de saisie */
  padding: 10px 10px;
}

/* Style pour les champs de saisie lorsqu'ils sont en focus */
.comment-form form input:focus {
  /* Couleur du texte en focus */
  color: var(--default-color);
  /* Couleur de fond en focus */
  background-color: var(--surface-color);
  /* Suppression de l'ombre portée lors du focus */
  box-shadow: none;
  /* Couleur de la bordure lors du focus */
  border-color: var(--accent-color);
}

/* Style pour les placeholders des champs de saisie */
.comment-form form input::placeholder {
  /* Couleur du texte des placeholders */
  color: color-mix(in srgb, var(--default-color), transparent 50%);
}

/* Style pour le champ de texte (textarea) du formulaire */
.comment-form form textarea {
  /* Couleur de fond du textarea */
  background-color: var(--surface-color);
  /* Couleur du texte du textarea */
  color: var(--default-color);
  /* Bordure du textarea */
  border: 1px solid color-mix(in srgb, var(--default-color), transparent 70%);
  /* Bordure arrondie du textarea */
  border-radius: 4px;
  /* Espacement intérieur du textarea */
  padding: 10px 10px;
  /* Taille de la police pour le texte du textarea */
  font-size: 14px;
  /* Hauteur du textarea */
  height: 120px;
}

/* Style pour le textarea lorsqu'il est en focus */
.comment-form form textarea:focus {
  /* Couleur du texte en focus */
  color: var(--default-color);
  /* Suppression de l'ombre portée lors du focus */
  box-shadow: none;
  /* Couleur de la bordure lors du focus */
  border-color: var(--accent-color);
  /* Couleur de fond en focus */
  background-color: var(--surface-color);
}

/* Style pour les placeholders du textarea */
.comment-form form textarea::placeholder {
  /* Couleur du texte des placeholders */
  color: color-mix(in srgb, var(--default-color), transparent 50%);
}

/* Style pour le groupe de champs (form-group) du formulaire */
.comment-form form .form-group {
  /* Marge inférieure pour espacer les groupes de champs */
  margin-bottom: 25px;
}

/* Style pour le bouton principal (btn-primary) du formulaire */
.comment-form form .btn-primary {
  /* Bordure arrondie du bouton */
  border-radius: 4px;
  /* Espacement intérieur du bouton */
  padding: 10px 20px;
  /* Suppression de la bordure du bouton */
  border: 0;
  /* Couleur de fond du bouton */
  background-color: var(--accent-color);
  /* Couleur du texte du bouton */
  color: var(--contrast-color);
}

/* Style pour le bouton principal lors du survol (hover) */
.comment-form form .btn-primary:hover {
  /* Couleur du texte lors du survol */
  color: var(--contrast-color);
  /* Couleur de fond lors du survol */
  background-color: color-mix(in srgb, var(--accent-color), transparent 20%);
}


/*--------------------------------------------------------------
# Sujets récurents
--------------------------------------------------------------*/
/* Style pour le conteneur des widgets */
.widgets-container {
  /* Couleur de fond du conteneur */
  background-color: var(--surface-color);
  /* Espacement intérieur du conteneur */
  padding: 30px;
  /* Marges autour du conteneur */
  margin: 60px 0 30px 0;
  /* Ombre portée pour le conteneur */
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
}

/* Style pour le titre des widgets */
.widget-title {
  /* Couleur du texte du titre */
  color: var(--heading-color);
  /* Taille de la police pour le titre */
  font-size: 20px;
  /* Poids de la police pour le titre */
  font-weight: 700;
  /* Supprime le remplissage intérieur */
  padding: 0;
  /* Marge inférieure pour espacer le titre du contenu suivant */
  margin: 0 0 20px 0;
}

/* Style pour chaque élément de widget */
.widget-item {
  /* Marge inférieure pour espacer les éléments de widget */
  margin-bottom: 40px;
}

/* Supprime la marge inférieure pour le dernier élément de widget */
.widget-item:last-child {
  margin-bottom: 0;
}

/* Style pour le widget de recherche */
.search-widget form {
  /* Couleur de fond du formulaire */
  background: var(--background-color);
  /* Bordure du formulaire */
  border: 1px solid color-mix(in srgb, var(--default-color), transparent 70%);
  /* Espacement intérieur du formulaire */
  padding: 3px 10px;
  /* Positionnement relatif du formulaire */
  position: relative;
  /* Transition pour les effets visuels */
  transition: 0.3s;
}

/* Style pour le champ de texte du formulaire de recherche */
.search-widget form input[type=text] {
  /* Supprime la bordure du champ de texte */
  border: 0;
  /* Espacement intérieur du champ de texte */
  padding: 4px;
  /* Bordure arrondie du champ de texte */
  border-radius: 4px;
  /* Largeur du champ de texte en fonction du conteneur */
  width: calc(100% - 40px);
  /* Couleur de fond du champ de texte */
  background-color: var(--background-color);
  /* Couleur du texte du champ de texte */
  color: var(--default-color);
}

/* Style pour le champ de texte lorsqu'il est en focus */
.search-widget form input[type=text]:focus {
  /* Supprime le contour par défaut du champ de texte */
  outline: none;
}


/* Style pour le bouton du formulaire de recherche */
.search-widget form button {
  /* Couleur de fond du bouton */
  background: var(--accent-color);
  /* Couleur du texte du bouton */
  color: var(--contrast-color);
  /* Positionnement absolu du bouton dans le formulaire */
  position: absolute;
  /* Aligne le bouton en haut, à droite et en bas */
  top: 0;
  right: 0;
  bottom: 0;
  /* Supprime la bordure du bouton */
  border: 0;
  /* Taille de la police pour le texte du bouton */
  font-size: 16px;
  /* Espacement intérieur horizontal du bouton */
  padding: 0 15px;
  /* Marge négative pour aligner parfaitement le bouton */
  margin: -1px;
  /* Transition pour les effets visuels */
  transition: 0.3s;
  /* Bordure arrondie pour les coins droits du bouton */
  border-radius: 0 4px 4px 0;
  /* Hauteur de ligne pour le texte du bouton */
  line-height: 0;
}

/* Style pour l'icône à l'intérieur du bouton */
.search-widget form button i {
  /* Hauteur de ligne pour l'icône */
  line-height: 0;
}

/* Style pour le bouton lors du survol */
.search-widget form button:hover {
  /* Couleur de fond du bouton avec une transparence ajoutée */
  background: color-mix(in srgb, var(--accent-color), transparent 20%);
}

/* Style pour le formulaire de recherche lorsqu'il est focus */
.search-widget form:is(:focus-within) {
  /* Change la couleur de la bordure lors du focus */
  border-color: var(--accent-color);
}

/* Style pour la liste des catégories dans le widget */
.categories-widget ul {
  /* Supprime les puces de la liste */
  list-style: none;
  /* Supprime le padding par défaut de la liste */
  padding: 0;
  /* Supprime les marges par défaut de la liste */
  margin: 0;
}

/* Style pour chaque élément de la liste des catégories */
.categories-widget ul li {
  /* Espacement inférieur entre les éléments */
  padding-bottom: 10px;
}

/* Supprime l'espacement inférieur pour le dernier élément de la liste */
.categories-widget ul li:last-child {
  padding-bottom: 0;
}

/* Style pour les liens dans la liste des catégories */
.categories-widget ul a {
  /* Couleur des liens avec une transparence ajoutée */
  color: color-mix(in srgb, var(--default-color), transparent 20%);
  /* Transition pour les effets visuels */
  transition: 0.3s;
}


/* Style pour les liens dans la liste des catégories lors du survol */
.categories-widget ul a:hover {
  /* Change la couleur du texte du lien au survol */
  color: var(--accent-color);
}

/* Style pour les éléments span à l'intérieur des liens de la liste des catégories */
.categories-widget ul a span {
  /* Ajoute un espacement à gauche du texte */
  padding-left: 5px;
  /* Couleur du texte avec une transparence de 50% */
  color: color-mix(in srgb, var(--default-color), transparent 50%);
  /* Taille de la police pour le texte */
  font-size: 14px;
}

/* Style pour chaque article dans le widget des articles récents */
.recent-posts-widget .post-item {
  /* Affiche les articles en flexbox pour aligner l'image et le texte */
  display: flex;
  /* Ajoute un espace inférieur entre les articles */
  margin-bottom: 15px;
}

/* Supprime l'espace inférieur pour le dernier article de la liste */
.recent-posts-widget .post-item:last-child {
  margin-bottom: 0;
}

/* Style pour les images dans le widget des articles récents */
.recent-posts-widget .post-item img {
  /* Définit la largeur des images */
  width: 80px;
  /* Ajoute un espacement à droite de l'image */
  margin-right: 15px;
}

/* Style pour les titres des articles dans le widget des articles récents */
.recent-posts-widget .post-item h4 {
  /* Taille de la police pour les titres */
  font-size: 15px;
  /* Définit le texte en gras */
  font-weight: bold;
  /* Ajoute un espace inférieur sous le titre */
  margin-bottom: 5px;
}


/* Style pour les liens dans les titres des articles du widget des articles récents */
.recent-posts-widget .post-item h4 a {
  /* Définit la couleur du texte des liens */
  color: var(--default-color);
  /* Transition douce de 0.3s pour les changements de style */
  transition: 0.3s;
}

/* Change la couleur du texte des liens lors du survol */
.recent-posts-widget .post-item h4 a:hover {
  color: var(--accent-color);
}

/* Style pour l'affichage de la date des articles dans le widget des articles récents */
.recent-posts-widget .post-item time {
  /* Affiche la date en tant que bloc distinct */
  display: block;
  /* Style en italique pour la date */
  font-style: italic;
  /* Taille de la police pour la date */
  font-size: 14px;
  /* Couleur de la date avec une transparence de 50% */
  color: color-mix(in srgb, var(--default-color), transparent 50%);
}

/* Style pour le widget des tags */
.tags-widget {
  /* Ajuste la marge inférieure pour le widget des tags */
  margin-bottom: -10px;
}

/* Style pour la liste des tags dans le widget des tags */
.tags-widget ul {
  /* Supprime le style de liste par défaut */
  list-style: none;
  /* Supprime le padding et la marge */
  padding: 0;
  margin: 0;
}

/* Style pour chaque élément de la liste des tags */
.tags-widget ul li {
  /* Affiche les tags en ligne */
  display: inline-block;
}

/* Style pour les liens dans le widget des tags */
.tags-widget ul a {
  /* Couleur du texte des liens avec une transparence de 30% */
  color: color-mix(in srgb, var(--default-color), transparent 30%);
  /* Taille de la police pour les tags */
  font-size: 14px;
  /* Padding autour du texte du tag */
  padding: 6px 14px;
  /* Marge autour des tags pour espacement */
  margin: 0 6px 8px 0;
  /* Bordure autour du tag avec une transparence de 60% */
  border: 1px solid color-mix(in srgb, var(--default-color), transparent 60%);
  /* Affiche les tags en ligne */
  display: inline-block;
  /* Transition douce de 0.3s pour les changements de style */
  transition: 0.3s;
}


/* Change le style des liens dans le widget des tags lors du survol */
.tags-widget ul a:hover {
  /* Change le fond du tag en couleur d'accentuation */
  background: var(--accent-color);
  /* Change la couleur du texte en couleur de contraste */
  color: var(--contrast-color);
  /* Change la couleur de la bordure en couleur d'accentuation */
  border: 1px solid var(--accent-color);
}

/* Style pour les éléments supplémentaires (span) dans les liens du widget des tags */
.tags-widget ul a span {
  /* Ajoute un padding à gauche pour espacement */
  padding-left: 5px;
  /* Couleur du texte avec une transparence de 60% */
  color: color-mix(in srgb, var(--default-color), transparent 60%);
  /* Taille de la police pour les éléments supplémentaires */
  font-size: 14px;
}


/* Changement d'aspect de la barre de défilement de la page */
/* Style de la barre de défilement pour les navigateurs WebKit */
::-webkit-scrollbar {
  width: 9px; /* Largeur de la barre de défilement */
  height: 9px; /* Hauteur de la barre de défilement (pour les barres horizontales) */
}

/* Style de la piste de la barre de défilement */
::-webkit-scrollbar-track {
  background: #008374; /* Couleur de fond de la piste */
  border-radius: 10px; /* Bordure arrondie de la piste */
}

/* Style de la poignée de la barre de défilement */
::-webkit-scrollbar-thumb {
  background: #FEDB59; /* Couleur de la poignée */
  border-radius: 10px; /* Bordure arrondie de la poignée */
  border: 3px solid #008374; /* Bordure de la poignée (pour créer un espacement) */
}

/* Effet de survol pour la poignée de la barre de défilement */
::-webkit-scrollbar-thumb:hover {
  background: #E788AA; /* Couleur de la poignée au survol */
  border-radius: 10px; /* Bordure arrondie de la poignée au survol */
}

/* Style de la barre de défilement pour les navigateurs Mozilla Firefox */
* {
  scrollbar-width: thin; /* Largeur fine de la barre de défilement */
  scrollbar-color: #FEDB59 #008374; /* Couleur de la poignée et de la piste */
}

/* Style détaillé pour les navigateurs Mozilla Firefox */
*::-webkit-scrollbar-track {
  background: #008374;
}

*::-webkit-scrollbar-thumb {
  background-color: #FEDB59;
  border-radius: 10px;
  border: 3px solid #008374;
}

*::-webkit-scrollbar-thumb:hover {
  background-color: #E788AA;
  border-radius: 10px;
}