/* Déclaration des variables CSS globales (utilisation de :root) */
:root {
    /* Déclaration des couleurs */
    --color_blanc: rgb(255, 255, 255); /* Blanc pur */
    --color_noir: rgb(1, 1, 1); /* Noir proche de 0,0,0 */
    --color_jaune: #F0850E; /* Couleur jaune-orangé */
    --color_jaune-hover: #E67300; /* Couleur jaune pour le survol */
    --color_bleu: #6A605A; /* Couleur bleu-gris */
    --color_bleu-hover: #A0948F; /* Couleur bleu clair pour le survol */
    --color_gris_fonce: #222222; /* Gris très foncé */
    --color_catalogue: #6A605A; /* page produits */

    /* Déclaration des dégradés */
    --gradient_rouge: linear-gradient(180deg, #F0850E 0%, #E67300 100%); /* Dégradé orange */
    --gradient_rouge_reverse: linear-gradient(180deg, #E67300 0%, #F0850E 100%); /* Dégradé inversé */

    /* Déclaration des filtres */
    --filter_jaune: brightness(0) saturate(100%) invert(83%) sepia(65%) saturate(2083%) hue-rotate(338deg) brightness(101%) contrast(100%); /* Filtre jaune */
    --filter_noir: brightness(0) saturate(100%); /* Filtre noir */

    /* Font et espacements */
    --font_principal: 'Sulphur Point', sans-serif; /* Police principale */
    --padding_L: 5.3vw; /* Largeur de padding large */
    --padding_LR: 9.3vw; /* Largeur de padding gauche-droite */
    --padding_LR-services: 5vw; /* Padding gauche-droite pour services */

    /* Dimensions */
    --header_height: 80vh; /* Hauteur de l'en-tête (80% de la hauteur de l'écran) */
    --navbar_height: 80px; /* Hauteur de la barre de navigation */
    --width_services: 192px; /* Largeur des éléments de service */

    /* Couleurs et styles pour Swiper */
    --swiper-theme-color: var(--gradient_rouge) !important; /* Couleur du thème Swiper */
    --swiper-pagination-bullet-inactive-color: var(--color_bleu-hover) !important; /* Couleur des puces inactives */
    --swiper-pagination-bullet-width: 13px; /* Largeur des puces de pagination */
    --swiper-pagination-bullet-height: 13px; /* Hauteur des puces */
    --swiper-pagination-bullet-horizontal-gap: 12px; /* Espace horizontal entre les puces */
}

/* Styles généraux pour le body */
body {
    box-sizing: border-box; /* Inclut les bordures et le padding dans les dimensions */
    margin: 0; /* Supprime les marges par défaut */
    padding: 0; /* Supprime le padding par défaut */
    font-family: 'Sulphur Point', sans-serif; /* Utilise la police définie */
}

/* Corps de la page sans scroll */
body.no-scroll {
    overflow: hidden; /* Empêche le défilement */
}

/* Style spécifique pour la page 404 */
body.page-404 {
    background-image: url("/themes/jvflex/assets/images/404.webp"); /* Image de fond pour la page 404 */
    background-position: center; /* Centre l'image de fond */
    background-size: cover; /* Recouvre toute la zone */
    background-repeat: no-repeat; /* Empêche la répétition de l'image */
    display: flex; /* Utilise un conteneur flex */
    flex-direction: column; /* Affiche les éléments en colonne */
    justify-content: space-between; /* Espace entre les éléments */
    min-height: 100vh; /* Hauteur minimale de 100% de la hauteur de l'écran */
}

/* Mise en page du contenu principal de la page 404 */
body.page-404 main {
    display: flex; /* Utilise le flex pour la mise en page */
    justify-content: space-around; /* Répartit les éléments avec espace autour */
}

/* Contenu spécifique de la page 404 */
body.page-404 main .content-404 {
    flex-shrink: 0; /* Empêche la réduction de la taille de l'élément */
}

/* Texte pour la page 404 */
body.page-404 main .text-404 {
    font-size: 2.75rem; /* Taille de la police */
    margin: 0.5rem 0; /* Marges haut et bas */
}

/* Image spécifique de la page 404 */
body.page-404 main .img-404 {
    width: 25%; /* Largeur de l'image */
}

body.page-404 main .img-404 img {
    width: 100%; /* Largeur de l'image à 100% de son conteneur */
    height: 100%; /* Hauteur de l'image à 100% de son conteneur */
}

/* Style général pour tous les éléments */
* {
    box-sizing: border-box; /* Inclut les bordures et le padding dans les dimensions */
}

/* Style spécifique pour l'élément jvflex */
.jvflex {
    position: fixed; /* Positionnement fixe */
    z-index: 9999; /* Niveau de superposition très élevé */
    top: 70px; /* Positionnement en haut */
    left: 16px; /* Positionnement à gauche */
}

/* Style pour les liens à l'intérieur de jvflex */
.jvflex>a {
    border-radius: 24px; /* Bords arrondis */
    cursor: pointer; /* Curseur en forme de main pour cliquer */
    display: block; /* Affichage en bloc */
    height: 48px; /* Hauteur fixe */
    line-height: 48px; /* Hauteur de ligne égale à la hauteur de l'élément */
    opacity: .9; /* Opacité légèrement réduite */
    position: absolute; /* Positionnement absolu */
    text-align: center; /* Texte centré */
    font-size: 24px; /* Taille de la police */
    font-weight: 400; /* Poids de la police */
    width: 48px; /* Largeur fixe */
    background: url("/themes/jvflex/assets/images/theme-preview.png"), #f8f6f5; /* Image et couleur de fond */
    background-position: center; /* Image de fond centrée */
    background-size: contain; /* Image contenue dans l'élément */
    background-repeat: no-repeat; /* Empêche la répétition de l'image */
    box-shadow: 0px 0px 3px 1px rgb(0 0 0 / 30%); /* Ombre portée */
}

/* Style général des liens */
a {
    color: #F0850E; /* Couleur par défaut du lien (orange) */
    text-decoration: underline; /* Soulignement par défaut */
}

/* Style des liens visités */
a:visited {
    color: #F0850E; /* Couleur des liens déjà visités (identique) */
}

/* Style des liens au survol */
a:hover {
    color: #F0850E; /* Couleur des liens au survol */
    text-decoration: none; /* Pas de soulignement au survol */
}

/* Style des liens actifs (au clic) */
a:active {
    color: #F0850E; /* Couleur des liens lors du clic */
    text-decoration: underline; /* Rétablit le soulignement lors du clic */
}

/* Style des images */
img {
    display: block; /* Affichage en bloc */
    max-width: 100%; /* Largeur maximale de l'image limitée à 100% de son conteneur */
}

/* Classe pour adapter l'ajustement de l'image */
.img_fit {
    object-fit: cover; /* Couvre toute la zone */
    object-position: center; /* Positionnement de l'image centré */
}

.padding-bottom{
    padding-bottom: 1rem;
}

/* Style pour les titres h1 */
h1 {
    margin: 0; /* Pas de marge */
    font-weight: 700; /* Police en gras */
    font-size: 64px; /* Taille de la police */
    line-height: 1; /* Hauteur de ligne */
}

/* Style des paragraphes */
p {
    font-size: 1.15rem; /* Taille de la police des paragraphes */
}

/* Classe showmore pour les éléments centrés */
.showmore {
    display: flex; /* Utilisation du flex */
    justify-content: center; /* Centre les éléments */
}

/* Style des liens dans la classe showmore */
.showmore a {
    text-decoration: none; /* Pas de soulignement */
    color: var(--color_bleu); /* Couleur définie par la variable */
    text-transform: uppercase; /* Texte en majuscules */
    border-bottom: 1.6875px solid var(--color_bleu); /* Bordure en bas */
    padding: 10px 13px; /* Espacement interne */
    display: flex; /* Utilisation du flex */
    font-weight: 700; /* Texte en gras */
    gap: 10px; /* Espace entre les éléments */
    transition: letter-spacing 0.35s; /* Transition de l'espacement des lettres */
}

/* Style des liens dans showmore au survol */
.showmore a:hover {
    letter-spacing: 0.2rem; /* Espacement des lettres augmenté au survol */
}

/* Style pour l'en-tête */
header {
    background-color: rgba(255, 255, 255, 0.9); /* Fond blanc légèrement transparent */
    box-shadow: 0px 4px 30px rgba(0, 0, 0, 0.1); /* Ombre portée */
}

/* En-tête spécifique à la page d'accueil */
header.home {
    background-position: top; /* Positionnement centré de l'image de fond */
    background-repeat: no-repeat; /* Empêche la répétition de l'image */
    background-size: cover; /* Image recouvre toute la zone */
    background-color: #275c91; /* Couleur de fond */
    height: var(--header_height); /* Hauteur définie par la variable */
}

/* Contenu supérieur de l'en-tête */
header #header-top {
    display: flex; /* Utilisation du flex pour la mise en page */
    justify-content: space-between; /* Espacement entre les éléments */
    align-items: center; /* Alignement vertical centré */
    height: var(--navbar_height); /* Hauteur de la barre de navigation */
    background-color: rgba(255, 255, 255, 0.9); /* Fond légèrement transparent */
    transition: top 0.3s ease-in-out, background-color 0.35s; /* Transition fluide */
    padding: 0.5rem 2rem; /* Espacement interne */
    position: fixed; /* Position fixe pour rester visible en haut */
    width: 100%; /* Prend toute la largeur */
    top: 0; /* Fixé en haut */
    z-index: 1000; /* Niveau de superposition */
}

/* Couleur des liens du menu de navigation et du numéro de téléphone dans l'en-tête */
header #header-top #navbar ul a.nav-link,
header #header-top .phone {
    color: var(--color_noir); /* Noir par défaut */
    text-decoration: none; /* Pas de soulignement */
    font-size: 1.5rem; /* Taille de la police */
    transition: color 0.25s; /* Transition fluide des couleurs */
}
/* Fond de la navbar lorsqu'elle est survolée sur la page d'accueil */
header.home #header-top:hover {
    background-color: rgba(255, 255, 255, 0.9); /* Fond blanc légèrement transparent */
}

/* Couleur des icônes de logo en noir */
header.home #header-top:hover .logo img,
header.default #header-top .logo img,
footer .logo img {
    filter: var(--filter_noir); /* Filtre noir pour les icônes de logo */
}

/* Couleur des icônes téléphone en noir */
header.home #header-top:hover .phone img,
header.default #header-top .phone img {
    filter: var(--filter_noir); /* Filtre noir pour les icônes téléphone */
}

/* Alignement de la barre de navigation */
header #header-top #navbar {
    justify-self: center; /* Centre la navbar par rapport à son conteneur */
}

/* Liste des liens du menu de la navbar */
header #header-top #navbar ul {
    display: flex; /* Affiche les liens de la navbar en flex */
    padding: 0; /* Pas de padding */
    list-style: none; /* Supprime les puces des éléments de la liste */
    gap: 1rem; /* Espace entre les éléments du menu */
}

/* Couleur des liens du menu, du téléphone, et des liens du footer lorsqu'ils sont survolés ou actifs - Jaune */
header #header-top #navbar ul a.nav-link:hover,
header #header-top .phone:hover,
footer .footer-navigation ul a.nav-link:hover,
footer .footer-links a:hover,
header #header-top #navbar ul a.nav-link.active {
    color: var(--color_jaune); /* Couleur jaune définie dans les variables CSS */
}

/* Masque les images dans les liens de la navbar */
header #header-top #navbar ul a.nav-link img {
    display: none; /* Les images sont masquées */
}

/* Style de la section téléphone (texte et icône) */
header #header-top .phone {
    display: flex; /* Affichage en flex pour aligner le texte et l'icône */
    gap: 0.5rem; /* Espacement entre l'icône et le texte */
    text-decoration: none; /* Pas de soulignement */
}

/* Cacher le menu burger par défaut */
header#layout-header>#header-top>#burger-menu {
    display: none; /* Cache l'icône du menu burger */
}

/* Contenu inférieur de l'en-tête */
header #header-bottom {
    height: calc(100% - var(--navbar_height)); /* Hauteur en fonction de la hauteur de la navbar */
    display: flex; /* Utilise le flex */
    flex-direction: column; /* Affiche les éléments en colonne */
    justify-content: center; /* Centre verticalement les éléments */
    color: var(--color_blanc); /* Couleur blanche du texte */
    padding: 0.5rem var(--padding_LR); /* Espacement interne */
    max-width: calc(465px + 2 * var(--padding_LR)); /* Largeur maximale du conteneur */
    margin-top: 80px; /* Ajustez cette valeur en fonction de la hauteur de la navbar */
}

/* Style du paragraphe en bas de l'en-tête */
header #header-bottom .paragraph {
    margin: 0.5rem 0; /* Marges en haut et en bas */
    font-style: normal; /* Style de police normal */
    font-weight: 300; /* Poids de la police léger */
    font-size: 1.5rem; /* Taille de la police */
}

/* Conteneur des boutons */
.btn-container {
    display: flex; /* Utilise le flex */
    margin: 0; /* Pas de marge */
}

/* Style des boutons dans le conteneur */
.btn-container.button>a,
.btn {
    appearance: none; /* Supprime le style par défaut du bouton */
    border: none; /* Pas de bordure */
    border-radius: 0; /* Pas de bords arrondis */
    cursor: pointer; /* Change le curseur en main pour indiquer l'interactivité */
    padding: 0.625rem 1.875rem; /* Espacement interne du bouton */
    background: var(--gradient_rouge); /* Utilise un dégradé rouge comme fond */
    text-decoration: none; /* Pas de soulignement */
    color: var(--color_blanc); /* Couleur du texte en blanc */
    font-style: normal; /* Style de police normal */
    font-weight: 400; /* Poids de la police normal */
    font-size: 1.25rem; /* Taille de la police */
}

/* Style du bouton au survol */
.btn-container.button>a:hover,
.btn:hover {
    background: var(--gradient_rouge_reverse); /* Dégradé inversé au survol */
}

/* Style général de la section main */
main {
    padding: 0 var(--padding_LR); /* Espacement gauche-droite défini par les variables */
    margin: 0 auto; /* Centre la section principale */
}

/* Style spécifique pour la page 404 */
body.page-404 main {
    margin: 0; /* Pas de marge */
    color: var(--color_jaune); /* Texte en couleur jaune */
    padding: 100px var(--padding_LR); /* Espacement interne avec 100px en haut et en bas */
}

/* Classe titre pour les sections avec un titre */
.titre {
    padding: 4.25rem 1rem; /* Espacement interne vertical et horizontal */
    margin: 0 calc(-1 * var(--padding_LR)); /* Marge négative pour étendre la largeur */
    display: flex; /* Utilisation du flex pour aligner les éléments */
    justify-content: center; /* Centre horizontalement les éléments */
}

/* Style des titres h1 et h2 */
.titre h2,
.titre h1 {
    margin: 0; /* Pas de marge */
    color: var(--color_blanc); /* Couleur blanche du texte */
    text-align: center; /* Centre le texte */
    font-style: normal; /* Style de police normal */
    font-weight: 400; /* Poids de la police normal */
    font-size: 2.8125rem; /* Taille de la police */
    line-height: 1; /* Hauteur de ligne */
    display: flex; /* Utilisation du flex */
    padding: 0 30px 20px; /* Espacement interne */
    border-bottom: 4px solid var(--color_jaune); /* Bordure inférieure de couleur jaune */
}

/* Section pleine largeur */
section.full {
    margin: 0 calc(-1 * var(--padding_LR)); /* Marge négative pour étendre la largeur */
    padding: 0 var(--padding_LR); /* Espacement interne gauche-droite */
}

/* Section entreprise avec image de fond */
section#entreprise {
    background-position: center; /* Centre l'image de fond */
    background-repeat: no-repeat; /* Pas de répétition de l'image */
    background-size: cover; /* L'image couvre toute la zone */
}

/* Section "Qui sommes-nous" et formulaire de contact */
section#entreprise #qui-sommes-nous,
#contact form {
    margin: 95px auto; /* Marges en haut et en bas */
}

/* Nom de l'entreprise */
section#entreprise #qui-sommes-nous .enterprise-name {
    font-style: normal; /* Style de police normal */
    font-weight: 700; /* Police en gras */
    font-size: 3rem; /* Taille de la police */
    margin: 0; /* Pas de marge */
    text-align: center; /* Texte centré */
    text-transform: uppercase; /* Texte en majuscules */
}

/* Sous-titre */
.subtitle {
    color: var(--color_jaune); /* Couleur jaune du texte */
    font-style: normal; /* Style de police normal */
    font-weight: 300; /* Poids de la police léger */
    font-size: 2.25rem; /* Taille de la police */
    margin: 0; /* Pas de marge */
    text-align: center; /* Texte centré */
}

/* Paragraphe dans la section entreprise */
section#entreprise .paragraph {
    font-style: normal; /* Style de police normal */
    font-weight: 300; /* Poids de la police léger */
    font-size: 1.5rem; /* Taille de la police */
    text-align: center; /* Texte centré */
}

/* Section "Nos produits" */
section#nos-produits {
    padding: 0 var(--padding_LR-services); /* Espacement gauche-droite défini par les variables */
}

/* Titre de la section "Nos produits" */
section#nos-produits .titre {
    margin: 0 calc(-1 * var(--padding_LR-services)); /* Marge négative pour étendre la largeur */
}

/* Liste des services dans la section "Nos produits" */
section#nos-produits .services_list {
    display: flex; /* Utilisation du flex */
    flex-direction: column; /* Affichage en colonne */
    gap: 80px; /* Espace entre les éléments */
    margin: 85px auto; /* Marges en haut et en bas */
    position: relative; /* Positionnement relatif */
    max-width: 1650px; /* Largeur maximale */
}

/* Fond de la liste des services */
section#nos-produits .services_list .background {
    height: calc(100% - 90px); /* Hauteur totale moins 90px */
    background-color: var(--color_bleu-hover); /* Couleur de fond définie par la variable */
    width: 9px; /* Largeur de l'élément de fond */
    position: absolute; /* Positionnement absolu */
    z-index: -1; /* Position en arrière-plan */
    left: 50%; /* Positionnement à 50% à partir de la gauche */
    transform: translateX(-50%); /* Centre horizontalement l'élément */
}
/* Mise en page des éléments de service dans la liste des services */
section#nos-produits .services_list .service {
    display: grid; /* Affichage en grille */
    grid-template-columns: repeat(2, 1fr); /* Deux colonnes de même taille */
    grid-template-rows: 1fr; /* Une seule rangée */
    grid-column-gap: 86px; /* Espacement horizontal entre les colonnes */
    justify-items: center; /* Centre les éléments horizontalement */
    align-items: center; /* Centre les éléments verticalement */
    text-decoration: none; /* Pas de soulignement */
}

/* Direction de lecture droite à gauche pour chaque deuxième élément de service */
section#nos-produits .services_list .service:nth-child(2n) {
    direction: rtl; /* Change la direction de lecture en droite à gauche */
}

/* Positionnement de l'image à gauche de l'élément */
section#nos-produits .services_list .service .image {
    justify-self: flex-start; /* Aligne l'image sur la gauche */
}

/* Style de la section de détail du service */
section#nos-produits .services_list .service .detail {
    background-color: var(--color_gris_fonce); /* Fond de couleur gris foncé */
    padding: 1.625rem 2.75rem 1.625rem calc((2.75rem + var(--width_services))/2); /* Espacement interne, ajusté selon la largeur des services */
    position: relative; /* Position relative */
    text-align: right; /* Texte aligné à droite */
    max-width: 505px; /* Largeur maximale du détail */
    justify-self: flex-end; /* Aligne le détail sur la droite */
}

/* Ajustement du style de détail pour chaque deuxième élément */
section#nos-produits .services_list .service:nth-child(2n) .detail {
    padding: 1.625rem calc((2.75rem + var(--width_services))/2) 1.625rem 2.75rem; /* Inverse le padding pour la direction RTL */
    text-align: left; /* Texte aligné à gauche */
}

/* Style du titre h3 dans le détail du service */
section#nos-produits .services_list .service .detail h3 {
    font-style: normal; /* Style de police normal */
    font-weight: 400; /* Poids de la police normal */
    font-size: 2.91rem; /* Taille de la police */
    margin: 2rem 0; /* Marge en haut et en bas */
    color: var(--color_jaune); /* Couleur jaune définie */
    line-height: 1; /* Hauteur de ligne */
}

/* Style des paragraphes dans le détail du service */
section#nos-produits .services_list .service .detail p {
    font-style: normal; /* Style de police normal */
    font-weight: 300; /* Poids de la police léger */
    font-size: 1.25rem; /* Taille de la police */
    color: var(--color_blanc); /* Couleur blanche */
    direction: ltr; /* Direction de lecture de gauche à droite */
}

/* Style du carré décoratif dans le détail du service */
section#nos-produits .services_list .service .detail .square {
    border-radius: 1px; /* Bords légèrement arrondis */
    border: 2px solid var(--color_jaune); /* Bordure de couleur jaune */
    position: absolute; /* Positionnement absolu */
    left: calc((-1 * var(--width_services))/2); /* Positionnement à gauche pour décaler à moitié de la largeur du service */
    top: 50%; /* Positionnement vertical au milieu */
    transform: translateY(-50%); /* Centre verticalement l'élément */
    z-index: 3; /* Niveau de superposition élevé */
    width: var(--width_services); /* Largeur définie par la variable */
    height: var(--width_services); /* Hauteur définie par la variable */
}

/* Ajustement du carré décoratif pour chaque deuxième élément de service */
section#nos-produits .services_list .service:nth-child(2n) .detail .square {
    left: unset; /* Annule la position à gauche */
    right: calc((-1 * var(--width_services))/2); /* Positionnement à droite */
}

/* Style du grand carré décoratif */
section#nos-produits .services_list .service .large-square {
    width: 64px; /* Largeur du carré */
    height: 64px; /* Hauteur du carré */
    background-color: var(--color_bleu-hover); /* Couleur de fond bleu clair */
    position: absolute; /* Positionnement absolu */
    display: block; /* Affichage en bloc */
    z-index: 0; /* Niveau de superposition bas */
}

/* Style du carré moyen décoratif */
section#nos-produits .services_list .service .medium-square {
    width: 32px; /* Largeur du carré */
    height: 32px; /* Hauteur du carré */
    background-color: var(--color_bleu); /* Couleur de fond bleu */
    position: absolute; /* Positionnement absolu */
    top: 50%; /* Position verticale au milieu */
    left: 50%; /* Position horizontale au milieu */
    transform: translate(-50%, -50%); /* Centre l'élément */
}

/* Swiper de la section réalisations */
section#realisations .swiperRealisations {
    margin: 50px auto 15px; /* Marges en haut et en bas */
    max-width: 1300px; /* Largeur maximale */
}

/* Alignement des éléments dans le wrapper Swiper */
section#realisations .swiperRealisations .swiper-wrapper {
    align-items: center; /* Centre les éléments verticalement */
}

/* Style des diapositives du Swiper */
section#realisations .swiperRealisations .swiper-slide {
    display: flex; /* Utilise le flex */
    background-color: var(--color_gris_fonce); /* Fond gris foncé */
    color: var(--color_blanc); /* Texte blanc */
    padding: 4vw; /* Espacement interne basé sur la largeur de la fenêtre */
}

/* Images dans les diapositives Swiper */
section#realisations .swiperRealisations .swiper-slide .realisation_img,
section#realisations .swiperRealisations .swiper-slide .realisation_img img {
    width: 100%; /* Largeur de l'image à 100% du conteneur */
}

/* Contenu des diapositives Swiper */
section#realisations .swiperRealisations .swiper-slide .realisation_content {
    display: flex; /* Utilisation du flex */
    flex-direction: column; /* Affichage en colonne */
    justify-content: space-between; /* Espacement entre les éléments */
    align-items: center; /* Centre horizontalement les éléments */
    width: 100%; /* Largeur à 100% du conteneur */
    padding: 25px 0 25px 25px; /* Espacement interne */
}

/* Style du titre h3 dans le contenu des diapositives */
section#realisations .swiperRealisations .swiper-slide .realisation_content h3 {
    margin: 0; /* Pas de marge */
    font-style: normal; /* Style de police normal */
    font-weight: 400; /* Poids de la police normal */
    font-size: 2.5rem; /* Taille de la police */
}

/* Conteneur de la ville dans les diapositives */
section#realisations .swiperRealisations .swiper-slide .realisation_content .realisation_city {
    display: flex; /* Utilisation du flex */
    align-items: center; /* Centre verticalement les éléments */
    gap: 4px; /* Espace entre les éléments */
}

/* Texte de la ville dans les diapositives */
section#realisations .swiperRealisations .swiper-slide .realisation_content .realisation_city p {
    line-height: 1; /* Hauteur de ligne */
    margin: 0; /* Pas de marge */
}

/* Pagination du Swiper */
section#realisations .swiper-pagination {
    margin: 40px 0; /* Marge en haut et en bas */
    position: unset; /* Position par défaut */
    display: block; /* Affichage en bloc */
}

/* Style général du footer */
footer {
    box-shadow: 0px 4px 30px rgba(0, 0, 0, 0.1); /* Ombre portée */
    background-color: rgba(255, 255, 255, 0.9); /* Fond blanc légèrement transparent */
    color: var(--color_noir); /* Texte noir */
    display: flex; /* Utilisation du flex */
    justify-content: space-between; /* Espace entre les éléments */
    padding: 5vh var(--padding_LR); /* Espacement interne vertical et horizontal */
}

/* Style des liens, paragraphes et adresses dans le footer */
footer a,
footer p,
footer address {
    color: inherit; /* Utilise la couleur héritée */
    font-style: normal; /* Style de police normal */
    font-weight: 400; /* Poids de la police normal */
    font-size: 0.875rem; /* Taille de la police */
    line-height: 1.5; /* Hauteur de ligne */
}

/* Style des liens dans le footer */
footer a {
    text-decoration: none; /* Pas de soulignement */
}

/* Style des paragraphes dans le footer */
footer p {
    margin: 0; /* Pas de marge */
}

/* Style du titre dans le footer */
footer .title {
    font-style: normal; /* Style de police normal */
    font-weight: 700; /* Poids de la police en gras */
    font-size: 1.5rem; /* Taille de la police */
    color: inherit; /* Utilise la couleur héritée */
    margin-bottom: 0.5rem; /* Marge en bas */
    line-height: 1; /* Hauteur de ligne */
}

/* Style de l'adresse dans le footer */
footer .footer-address {
    display: flex; /* Utilisation du flex */
    align-items: center; /* Centre verticalement les éléments */
    gap: 8px; /* Espace entre les éléments */
    margin: 0.5rem 0; /* Marge en haut et en bas */
}

/* Style de l'image de l'adresse dans le footer */
footer .footer-address img {
    width: 12px; /* Largeur de l'image */
    height: 100%; /* Hauteur à 100% du conteneur */
}

/* Style de la section téléphone dans le footer */
footer .footer-phone {
    display: flex; /* Utilisation du flex */
    gap: 5px; /* Espace entre les éléments */
}

/* Style de l'image de téléphone dans le footer */
footer .footer-phone img {
    filter: var(--filter_noir); /* Filtre noir pour l'image */
    width: 16px; /* Largeur de l'image */
    height: 100%; /* Hauteur à 100% du conteneur */
}

/* Style de la navigation dans le footer */
footer .footer-navigation ul {
    padding: 0; /* Pas de padding */
    list-style: none; /* Pas de puces pour les éléments de la liste */
    margin: 0; /* Pas de marge */
}
/* Icônes des réseaux sociaux dans le footer */
footer .footer-socials {
    display: flex; /* Utilisation du flex pour l'alignement des icônes */
    align-items: center; /* Alignement vertical centré */
    gap: 0.9rem; /* Espacement entre les icônes */
    margin: 0.5rem 0; /* Marges en haut et en bas */
}

/* Texte introductif et formulaire de contact */
#contact p.intro,
#contact form {
    max-width: 650px; /* Largeur maximale du formulaire et du texte d'introduction */
    width: 100%; /* Largeur totale disponible */
}

/* Style du formulaire de contact */
#contact form {
    display: flex; /* Utilisation du flex */
    flex-direction: column; /* Les éléments du formulaire sont empilés verticalement */
    gap: 1.25rem; /* Espacement entre chaque élément du formulaire */
}

/* Bloc de champs de formulaire (label + input/textarea) */
#contact .form-block {
    display: flex; /* Utilisation du flex */
    flex-direction: column; /* Les éléments sont empilés verticalement */
    width: 100%; /* Largeur totale disponible */
}

/* Champs d'identité du formulaire (nom, prénom, etc.) */
#contact .form-identity {
    display: flex; /* Utilisation du flex */
    gap: 1rem; /* Espacement entre les champs */
}

/* Champs de saisie et zones de texte du formulaire */
#contact .form-block input,
#contact .form-block textarea {
    width: 100%; /* Largeur totale disponible */
    box-sizing: border-box; /* Inclut padding et bordure dans les dimensions */
    appearance: none; /* Supprime l'apparence native des éléments */
    resize: none; /* Désactive le redimensionnement des zones de texte */
    border-radius: 0; /* Pas de coins arrondis */
    font-family: var(--font_principal); /* Police définie dans les variables */
    font-size: 1rem; /* Taille de la police */
    padding: 5px 10px; /* Espacement interne du champ */
    border: 1.5px solid var(--color_jaune); /* Bordure de couleur jaune */
    background-color: var(--color_bleu-hover); /* Couleur de fond bleu clair */
}

/* Champs de saisie et zones de texte en focus (active) */
#contact .form-block input:focus-visible,
#contact .form-block textarea:focus-visible {
    outline-style: solid; /* Style de contour solide */
    border-color: var(--color_bleu); /* Couleur de bordure en bleu lors du focus */
    caret-color: var(--color_bleu); /* Couleur du curseur de saisie */
}

/* Labels des champs du formulaire */
#contact .form-block label {
    font-size: 1.15rem; /* Taille de la police */
    padding-bottom: 5px; /* Espacement en bas */
    font-weight: 500; /* Poids de la police moyen */
    color: var(--color_gris_fonce); /* Couleur catalogue */
    text-transform: uppercase; /* Texte en majuscules */
}

/* Bouton de soumission du formulaire */
#contact .form-submit {
    margin: 0 auto; /* Centre le bouton horizontalement */
}

/* Champ de soumission du formulaire */
#contact .form-submit input {
    font-family: var(--font_principal); /* Police définie dans les variables */
}

.page-services{
    margin-top: 80px; /* Ajustez cette valeur en fonction de la hauteur de la navbar */

}

/* Section des services sur la page des services */
.page-services section#nos-services {
    background-color: var(--color_catalogue); /* Fond gris foncé */
    color: var(--color_blanc); /* Texte en blanc */
}

/* Titre des services */
.page-services section#nos-services .title-service {
    display: flex; /* Utilisation du flex */
    align-items: center; /* Centre verticalement les éléments */
    gap: 6px; /* Espace entre les éléments */
}

/* Style du titre h2 dans la section des services */
.page-services section#nos-services .title-service h2 {
    color: var(--color_jaune); /* Couleur jaune */
    margin: 2rem 0; /* Marges en haut et en bas */
    font-style: normal; /* Style de police normal */
    font-weight: 700; /* Police en gras */
    font-size: 2.8125rem; /* Taille de la police */
    line-height: 1; /* Hauteur de ligne */
}

/* Liste des services */
.page-services section#nos-services .services_list {
    padding: 6.25rem 0; /* Espacement interne vertical */
}

/* Paragraphe de description des services */
.page-services section#nos-services .description p {
    margin-top: 0; /* Pas de marge en haut */
}

/* Carrousel des services */
.page-services section#nos-services .caroussel {
    margin: 3.6875rem 0; /* Marges en haut et en bas */
}

/* Pagination du carrousel */
.page-services section#nos-services .caroussel .swiper-pagination {
    margin-top: 15px; /* Marge en haut */
    position: unset; /* Position par défaut */
}

/* Diapositives du carrousel */
.page-services section#nos-services .caroussel .swiper-slide {
    width: unset; /* Largeur par défaut (non spécifiée) */
}

/* Media query pour les écrans jusqu'à 1430px de largeur */
@media all and (max-width:1430px) {
    :root {
        --padding_LR: 5.3vw; /* Réduction du padding latéral */
        --padding_LR-services: 1vw; /* Réduction du padding latéral pour les services */
        --width_services: 150px; /* Largeur des services réduite */
    }

    /* Ajustement du carré de détail dans la section des services */
    section#nos-produits .services_list .service .detail .square {
        top: 0%; /* Le carré est aligné au sommet */
    }
}

/* Media query pour les écrans jusqu'à 1025px de largeur */
@media all and (max-width: 1025px) {

    /* Masquer la navbar et l'icône du téléphone sur les petits écrans */
    header #header-top #navbar,
    header #header-top .phone {
        display: none; /* Masque ces éléments */
    }

    /* Afficher le menu burger sur les petits écrans */
    header#layout-header>#header-top>#burger-menu {
        display: block; /* Affichage du menu burger */
        justify-self: flex-end; /* Aligne le burger à droite */
        width: 2.25rem; /* Largeur du burger */
        height: 2.5rem; /* Hauteur du burger */
        cursor: pointer; /* Curseur en main pour indiquer l'interactivité */
        position: relative; /* Positionnement relatif */
        appearance: none; /* Supprime l'apparence native */
        border: none; /* Pas de bordure */
        background: none; /* Pas de fond */
        box-sizing: border-box; /* Inclut padding et bordure dans les dimensions */
        padding: 0; /* Pas de padding */
        flex-shrink: 0; /* Ne rétrécit pas */
    }

    /* Lignes du menu burger */
    header#layout-header>#header-top>#burger-menu span {
        width: 100%; /* Largeur à 100% du burger */
        height: 5px; /* Hauteur des lignes du burger */
        background-color: var(--color_noir); /* Fond noir */
        display: block; /* Affichage en bloc */
        transition: background-color 0.5s ease-in-out; /* Transition de couleur */
        margin: 0 0 0 auto; /* Marge à droite */
    }

    /* Première ligne du menu burger ajustée */
    header#layout-header>#header-top>#burger-menu span:nth-child(1) {
        transform: translateY(-10px); /* Décalée vers le haut */
    }

    /* Deuxième ligne du menu burger ajustée */
    header#layout-header>#header-top>#burger-menu span:nth-child(2) {
        width: 65%; /* Largeur à 65% */
    }

    /* Troisième ligne du menu burger ajustée */
    header#layout-header>#header-top>#burger-menu span:nth-child(3) {
        transform: translateY(10px); /* Décalée vers le bas */
        width: 35%; /* Largeur à 35% */
    }

    /* Style du menu burger lorsque actif (ouvert) */
    header#layout-header>#header-top>#burger-menu.active span:nth-child(2) {
        width: 100%; /* La deuxième ligne occupe toute la largeur */
    }

    /* Cache la première et la troisième ligne du menu burger lorsqu'actif */
    header#layout-header>#header-top>#burger-menu.active span:nth-child(1),
    header#layout-header>#header-top>#burger-menu.active span:nth-child(3) {
        display: none; /* Masque ces lignes */
    }

    /* Liens du menu de la navbar pour petits écrans */
    header#layout-header>#header-top>nav>ul>li.nav-item>a.nav-link,
    header#layout-header>#header-top>nav>ul>li.nav-item>a.nav-link.active {
        width: 100%; /* Occupe toute la largeur */
        display: flex; /* Affichage en flex */
        gap: 10px; /* Espace entre les éléments */
        align-items: center; /* Centre verticalement les éléments */
        font-size: 1.5rem; /* Taille de la police */
        text-align: left; /* Texte aligné à gauche */
        color: var(--color_noir); /* Couleur du texte noir */
    }

    /* Affiche les images dans les liens de la navbar */
    header #header-top #navbar ul a.nav-link img {
        display: block; /* Affichage en bloc */
    }

    /* Menu burger ouvert et nav affichée */
    header#layout-header>#header-top>#burger-menu.active~nav {
        position: absolute; /* Positionnement absolu */
        display: flex; /* Utilisation du flex */
        top: var(--navbar_height); /* Positionné juste en dessous de la barre de navigation */
        flex-direction: column; /* Affichage en colonne */
        width: 100%; /* Occupe toute la largeur */
        background: var(--gradient_rouge); /* Fond dégradé rouge */
        left: 0; /* Positionné à gauche */
        padding: var(--padding_LR) calc(var(--padding_LR) + 1rem); /* Espacement interne */
        box-sizing: border-box; /* Inclut padding et bordure dans les dimensions */
        z-index: 999; /* Niveau de superposition élevé */
    }
/* Menu burger actif avec la navigation visible */
header#layout-header>#header-top>#burger-menu.active~nav>ul {
    height: 100%; /* Prend toute la hauteur disponible */
    flex-direction: column; /* Affichage en colonne pour les éléments du menu */
    justify-content: center; /* Centre verticalement les éléments */
}

/* Media query pour les écrans jusqu'à 915px de largeur */
@media all and (max-width:915px) {
    :root {
        --padding_LR-services: 1vw; /* Réduction du padding latéral pour les services */
        --width_services: 192px; /* Largeur définie pour les éléments de service */
        --gap_services_list: 164px; /* Espacement entre les services */
    }

    /* Ajustement de la liste des services */
    section#nos-produits .services_list {
        gap: var(--gap_services_list); /* Utilise la variable d'espacement */
    }

    /* Mise en page des services avec une colonne */
    section#nos-produits .services_list .service {
        grid-template-columns: 1fr; /* Une seule colonne */
        gap: 1.5rem; /* Espacement entre les éléments */
        position: relative; /* Positionnement relatif */
    }

    /* Style de l'image et du détail dans les services */
    section#nos-produits .services_list .service .image,
    section#nos-produits .services_list .service .detail {
        justify-self: unset; /* Supprime l'alignement personnalisé */
        max-width: 546px; /* Largeur maximale définie */
    }

    /* Ajustement du détail du service */
    section#nos-produits .services_list .service .detail,
    section#nos-produits .services_list .service:nth-child(2n) .detail {
        padding: 1.625rem 2.75rem calc(1.625rem + var(--width_services)/2); /* Espacement interne ajusté */
        text-align: center; /* Texte centré */
        margin-bottom: calc(var(--width_services)/2); /* Marge en bas ajustée */
    }

    /* Positionnement du carré décoratif */
    section#nos-produits .services_list .service .detail .square,
    section#nos-produits .services_list .service:nth-child(2n) .detail .square {
        top: unset; /* Supprime la position en haut */
        bottom: 0; /* Place en bas */
        transform: translate(-50%, 50%); /* Centre horizontalement et décale vers le bas */
        left: 50%; /* Positionnement centré horizontalement */
        right: unset; /* Supprime la position à droite */
    }

    /* Bordure jaune autour des images de service */
    section#nos-produits .services_list .service .image {
        border: 2px solid var(--color_jaune); /* Bordure de couleur jaune */
    }

    /* Ajustement du grand carré décoratif */
    section#nos-produits .services_list .service .large-square {
        bottom: calc(-1 * (var(--gap_services_list) - 64px) / 2); /* Ajustement de la position en bas */
        transform: translateY(64px); /* Décalage vertical */
    }
}

/* Media query pour les écrans jusqu'à 780px de largeur */
@media all and (max-width: 780px) {
    :root {
        --header_height: 80vh; /* Ajuste la hauteur de l'en-tête à 80% de la hauteur de l'écran */
    }

    /* Ajustement de la page 404 */
    body.page-404 {
        background-image: url("/themes/jvflex/assets/images/404-780.webp"); /* Image de fond adaptée */
    }

    /* Mise en page de la section principale de la page 404 */
    body.page-404 main {
        padding: 1.5rem var(--padding_LR); /* Espacement interne ajusté */
        min-height: calc(100vh - var(--navbar_height)); /* Hauteur minimale ajustée */
        text-align: center; /* Texte centré */
        flex-direction: column; /* Affichage en colonne */
        gap: 1.25rem; /* Espacement entre les éléments */
    }

    /* Ajustement de la flexibilité des éléments sur la page 404 */
    body.page-404 main .content-404 {
        flex-shrink: unset; /* Supprime le rétrécissement */
    }

    /* Centrage du bouton sur la page 404 */
    body.page-404 main .btn-container.btn {
        justify-content: center; /* Centre le bouton */
    }

    /* Ajustement de la largeur de l'image sur la page 404 */
    body.page-404 main .img-404 {
        width: 100%; /* Largeur totale */
    }

    /* Ajustement de la taille des titres et des paragraphes pour petits écrans */
    h1 {
        font-size: 2.875rem; /* Taille réduite du titre principal */
    }

    p {
        font-size: 1.25rem; /* Taille du texte des paragraphes */
        line-height: 1.1; /* Hauteur de ligne réduite */
    }

    /* Ajustement de la taille du paragraphe dans l'en-tête */
    header #header-bottom .paragraph {
        font-size: 1.5rem; /* Taille de la police ajustée */
    }

    /* Ajustement des titres h1 et h2 */
    .titre h2,
    .titre h1 {
        font-size: 2.5rem; /* Taille réduite des titres */
    }

    /* Ajustement de la taille de police pour le nom de l'entreprise */
    section#entreprise #qui-sommes-nous .enterprise-name {
        font-size: 2.25rem; /* Taille de la police ajustée */
    }

    /* Ajustement de la taille du sous-titre */
    .subtitle {
        font-size: 1.95rem; /* Taille de la police ajustée */
    }

    /* Ajustement du paragraphe de la section entreprise */
    section#entreprise .paragraph {
        font-size: 1.35rem; /* Taille de la police ajustée */
    }

    /* Mise en page en colonne pour la liste des services */
    section#nos-produits .services_list .service {
        flex-direction: column; /* Affichage en colonne */
    }

    /* Ajustement du détail des services */
    section#nos-produits .services_list .service .detail,
    section#nos-produits .services_list .service:nth-child(2n) .detail {
        padding: 1.25rem 1rem calc(1.25rem + var(--width_services)/2); /* Espacement interne ajusté */
    }

    /* Ajustement de la taille des titres h3 dans les détails des services */
    section#nos-produits .services_list .service .detail h3 {
        font-size: 2.45rem; /* Taille de la police ajustée */
    }

    /* Mise en page du footer pour les petits écrans */
    footer {
        display: grid; /* Utilisation d'une grille pour l'affichage */
        grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); /* Colonnes adaptatives */
        gap: 1.75rem; /* Espace entre les éléments du footer */
    }

    /* Ajustement de la taille des textes dans le footer */
    footer a,
    footer p,
    footer address {
        font-size: 1.125rem; /* Taille de la police ajustée */
    }

    /* Ordre des éléments dans le footer pour petits écrans */
    footer .footer-infos {
        order: 1;
    }

    footer .footer-hours {
        order: 2;
    }

    footer .footer-navigation {
        order: 3;
    }

    footer .footer-links {
        order: 4;
    }

    /* Ajustement du carrousel de la section réalisations */
    section#realisations .swiperRealisations .swiper-slide {
        flex-direction: column; /* Affichage en colonne */
    }

    /* Mise en page du contenu des diapositives */
    section#realisations .swiperRealisations .swiper-slide .realisation_content {
        padding-left: 0; /* Supprime le padding à gauche */
        text-align: center; /* Texte centré */
    }

    /* Taille des titres dans le contenu des diapositives */
    section#realisations .swiperRealisations .swiper-slide .realisation_content h3 {
        font-size: 1.575rem; /* Taille de la police ajustée */
        order: 1; /* Ordre de l'élément */
    }

    /* Ordre des éléments de la ville dans le contenu des diapositives */
    section#realisations .swiperRealisations .swiper-slide .realisation_content .realisation_city {
        order: 2; /* Deuxième élément */
    }

    section#realisations .swiperRealisations .swiper-slide .realisation_content p {
        order: 3; /* Troisième élément */
    }

    /* Ajustement de la hauteur des images des réalisations et des services */
    section#realisations .swiperRealisations .swiper-slide .realisation_img img,
    .page-services section#nos-services .caroussel .swiper-slide img {
        max-height: 35vh; /* Hauteur maximale de 35% de la hauteur de la fenêtre */
    }

    /* Ajustement de la largeur des images dans le carrousel */
    .page-services section#nos-services .caroussel .swiper-slide img {
        width: 100vw; /* Largeur de l'image à 100% de la largeur de la fenêtre */
    }
}

/* Media query pour les écrans jusqu'à 675px de largeur */
@media all and (max-width: 675px) {
    /* Mise en page en colonne pour les champs d'identité du formulaire de contact */
    #contact .form-identity {
        flex-direction: column; /* Affichage en colonne pour les champs d'identité */
    }
}
}