/* Indexation des variables et configuration de base des couleurs et polices */
:root {
    --color_blanc: rgb(255, 255, 255); /* Blanc pur */
    --color_noir: #000000; /* Noir pur */
    --color_jaune: #FFD700; /* Jaune doré */
    --color_bleu-acier: #0092CF; /* Bleu acier */
    --color_bleu-marine: #0F2B3D; /* Bleu marine foncé */
    --color_gris-fonce: #434343; /* Gris foncé */
    --color_gris-argente: #A7A9AC; /* Gris argenté */
    --filter_noir: brightness(0) saturate(100%); /* Filtre noir saturé à 100% */
    --filter_jaune: brightness(0) saturate(100%) invert(66%) sepia(96%) saturate(1094%) hue-rotate(1deg) brightness(106%) contrast(104%); /* Filtre jaune avec ajustements */
    --padding_L: 5.3vw; /* Padding pour grands éléments */
    --padding_LR: 9.3vw; /* Padding pour éléments horizontaux */
    --header_height: 80vh; /* Hauteur de l'en-tête */
    --navbar_height: 80px; /* Hauteur de la barre de navigation */
    --swiper-theme-color: var(--color_jaune) !important; /* Couleur principale du swiper */
    --swiper-pagination-bullet-inactive-color: var(--color_jaune) !important; /* Couleur des puces inactives du swiper */
    --swiper-pagination-bullet-width: 13px; /* Largeur des puces du swiper */
    --swiper-pagination-bullet-height: 13px; /* Hauteur des puces du swiper */
    --swiper-pagination-bullet-horizontal-gap: 12px; /* Espace horizontal entre les puces du swiper */
    --font_title: 'Racing Sans One', 'Prompt', sans-serif; /* Police des titres */
    --font_main: 'Prompt', sans-serif; /* Police principale */
}

/* Configuration générale du corps de la page */
body {
    box-sizing: border-box; /* S'assure que le box-sizing inclut padding et bordure */
    margin: 0; /* Supprime la marge par défaut */
    padding: 0; /* Supprime le padding par défaut */
    font-family: var(--font_main); /* Applique la police principale */
    background-position: center; /* Centrage de l'image de fond */
    background-repeat: no-repeat; /* Pas de répétition de l'image de fond */
    background-size: cover; /* L'image de fond couvre toute la zone */
    background-color: #797979; /* Couleur de fond grise si l'image n'est pas chargée */
    min-height: 100vh; /* Assure une hauteur minimale d'une pleine fenêtre */
    display: flex; /* Utilisation de flexbox pour l'alignement */
    flex-direction: column; /* Les éléments sont arrangés en colonne */
    justify-content: space-between; /* Les éléments sont également espacés */
    overflow-x: hidden; /* Empêche tout débordement horizontal */
}

/* Éviter les débordements horizontaux d'images et éléments larges */
img, .large-element {
    max-width: 100%; /* Limite la largeur maximale à 100% */
    height: auto; /* Hauteur adaptative */
    display: block; /* Supprime les espaces blancs en ligne */
}

/* Lorsque le scrolling est désactivé */
body.no-scroll {
    overflow: hidden; /* Empêche le scrolling */
}

/* Pages spécifiques avec des images de fond */
body.page-accueil {
    background-image: linear-gradient(90deg, rgba(0, 0, 0, 0.35) 0%, rgba(0, 0, 0, 0.35) 100%), url("/themes/jvflex/assets/images/background-accueil.webp"); /* Image de fond avec superposition sombre */
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-attachment: fixed; /* L'image de fond reste fixe */
    height: 70vh; /* Hauteur de la page d'accueil */
}

/* Pages avec des fonds spécifiques */
body.page-partenaires {
    background-image: url("/themes/jvflex/assets/images/background-partenaires.webp"); /* Fond partenaires */
}
body.page-contact {
    background-image: url("/themes/jvflex/assets/images/background-contact.webp"); /* Fond contact */
}
body.page-reservations {
    background-image: url("/themes/jvflex/assets/images/background-reservations.webp"); /* Fond réservations */
}

/* Configuration générale des éléments */
* {
    box-sizing: border-box; /* Inclure padding et bordure */
    max-width: 100vw; /* Évite le débordement horizontal */
}

/* Bouton fixe à l'écran pour JVFlex */
.jvflex {
    position: fixed;
    z-index: 9999; /* Place cet élément au-dessus de tous les autres */
    top: 70px;
    left: 16px;
}

/* Style du lien JVFlex */
.jvflex>a {
    border-radius: 24px; /* Bordures arrondies */
    cursor: pointer; /* Curseur pointer pour indiquer la cliquabilité */
    display: block;
    height: 48px;
    line-height: 48px; /* Hauteur de ligne pour centrer le texte */
    opacity: .9; /* Légèrement transparent */
    position: absolute;
    text-align: center;
    font-size: 24px;
    font-style: normal;
    font-weight: 400;
    font-variant: normal;
    speak: none; /* Évite la synthèse vocale */
    text-transform: none;
    -webkit-font-smoothing: antialiased; /* Améliore l'apparence du texte */
    -moz-osx-font-smoothing: grayscale;
    width: 48px;
    background: url("/themes/jvflex/assets/images/theme-preview.png"), #f8f6f5; /* Image de fond et couleur */
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
    box-shadow: 0px 0px 3px 1px rgb(0 0 0 / 30%); /* Ombre autour du bouton */
    color : #0092CF; /* Couleur */
}

/* Style des liens lors de différentes interactions */
a:visited{
    color : var(--color_bleu-acier); /* Couleur après avoir été visité */
}
a:hover {
    color: var(--color_bleu-acier); /* Couleur au survol */
}
a:focus {
    outline: 1px solid var(--color_bleu-acier); /* Bordure autour du lien avec focus */
}
a:active {
    color: var(--color_bleu-acier); /* Couleur lorsque le lien est actif */
}

a[href^="tel"] {
  color: var(--color_bleu-acier); /* Utilise `!important` pour forcer la couleur */
  font-weight: bold;
  text-decoration: none;
}

/* Hack CSS pour Safari */
@media not all and (min-resolution: 0.001dpcm) {
  @supports (-webkit-appearance: none) {
    a[href^="tel"] {
      color: var(--color_bleu-acier) !important;
    }

    a[href^="tel"]:visited,
    a[href^="tel"]:active,
    a[href^="tel"]:focus {
      color: var(--color_bleu-acier) !important;
    }
  }
}

/* Style général des images */
img {
    display: block; /* Supprime les espaces blancs */
    max-width: 100%; /* Limite la largeur */
}

/* Classe pour ajuster l'image */
.img_fit {
    object-fit: cover; /* L'image couvre toute la zone sans être déformée */
    object-position: center; /* Centre l'image */
}

/* Style des conteneurs avec titres */
.container {
    display: flex;
    justify-content: center; /* Centre le contenu horizontalement */
    padding: 2rem 0; /* Espace au-dessus et en-dessous */
    text-align: center; /* Centre le texte */
}

/* Titre avec fond pour améliorer la visibilité */
.title-with-background {
    color: white; /* Texte en blanc */
    padding: 0.5rem 1rem; /* Ajustement du padding */
    background-color: rgba(0, 0, 0, 0.7); /* Fond noir avec opacité */
    border-radius: 5px; /* Coins arrondis */
    font-size: 6rem; /* Taille du texte */
    text-transform: uppercase; /* Texte en majuscules */
}

/* Paragraphe avec fond pour améliorer la lisibilité */
.p-with-background {
    background-color: rgba(67, 67, 67, 0.8); /* Fond gris foncé avec opacité */
    padding: 1rem;
    border-left: 4px solid var(--color_gris-argente); /* Bordure verticale grise argentée */
    border-radius: 3px; /* Coins arrondis */
    color: var(--color_blanc); /* Texte en blanc */
    font-size: 1.1rem; /* Taille de police légèrement augmentée */
    line-height: 1.6; /* Hauteur de ligne pour une meilleure lisibilité */
    margin-bottom: 1.5rem; /* Espace sous le paragraphe */
}

/* Style des titres principaux */
h1 {
    margin: 0 0 1.25rem 0;
    font-style: normal;
    font-weight: 400;
    font-size: 96px; /* Taille des titres principaux */
    font-family: var(--font_title);
    line-height: 1;
    text-transform: uppercase;
    color: var(--color_blanc);
    text-align: center;
}

/* Style des sous-titres */
h2 {
    font-style: normal;
    font-weight: 400;
    font-size: 48px; /* Taille des sous-titres */
    text-transform: uppercase;
    margin: 0;
    color: var(--color_blanc);
    text-align: center;
}

/* Style des sélecteurs (menus déroulants) */
select {
    appearance: none; /* Masquer la flèche par défaut */
    -webkit-appearance: none;
    -moz-appearance: none;
    padding: 10px 40px 10px 14px; /* Espacement autour du texte du sélecteur */
    background: #D9D9D9 url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"%3E%3Cpath fill="%236c6c6c" d="M7 10l5 5 5-5z"/%3E%3C/svg%3E') no-repeat right 14px center; /* Fond et icône de flèche */
    background-size: 2rem; /* Taille de l'icône */
    border-radius: 5px; /* Coins arrondis */
    font-size: 1rem; /* Taille du texte */
    border: none; /* Supprime la bordure par défaut */
}

/* Style pour le formulaire de réservation */
.reservationform {
    display: flex; /* Utilisation de flexbox pour aligner les éléments */
    flex-direction: column; /* Disposition en colonne des éléments */
    align-items: center; /* Centre les éléments horizontalement */
    gap: 0.5rem; /* Espacement vertical entre les éléments */
    max-width: 100%; /* Limite la largeur maximale à 100% */
    box-sizing: border-box; /* Inclut padding et bordures pour empêcher le débordement */
}

/* Style des étiquettes (labels) du formulaire */
.reservationform label {
    font-weight: 600; /* Texte en gras pour étiquettes */
    margin-bottom: 0.25rem; /* Espacement en bas des étiquettes */
    display: block; /* Les étiquettes prennent toute la largeur de leur conteneur */
}

/* Style des champs de saisie, zones de texte et sélecteurs du formulaire */
.reservationform input,
.reservationform textarea,
.reservationform select {
    background-color: #D9D9D9; /* Couleur de fond grise */
    border-radius: 5px; /* Coins arrondis */
    padding: 10px 14px; /* Espacement interne des champs */
    border: none; /* Pas de bordure */
    line-height: 1.2; /* Hauteur de ligne pour une meilleure lisibilité */
    font-family: var(--font_principal); /* Utilisation de la police principale */
    color: #6c6c6c; /* Couleur du texte en gris foncé */
    font-weight: 500; /* Léger gras pour le texte */
    resize: none; /* Empêche le redimensionnement des zones de texte */
    width: 100%; /* Les champs prennent toute la largeur de leur conteneur */
    font-size: 1rem; /* Taille de police par défaut */
    box-sizing: border-box; /* Inclut padding et bordure pour empêcher le débordement */
}

/* Style des groupes de formulaire */
.reservationform .form-group {
    display: flex; /* Utilisation de flexbox pour aligner les éléments */
    flex-direction: column; /* Disposition en colonne des éléments */
    width: 100%; /* Le groupe de formulaire prend toute la largeur */
    box-sizing: border-box; /* Inclut padding et bordure pour empêcher le débordement */
}

/* Style pour les champs de date du formulaire */
.reservationform .form-date .picker {
    width: 100%; /* Assure que l'élément occupe toute la largeur disponible */
    box-sizing: border-box; /* Inclut padding et bordure pour empêcher le débordement */
}

/* Style des groupes de formulaire pour les champs de date */
.reservationform .form-date .form-group {
    display: block; /* Affiche les éléments en bloc */
    width: 100%; /* Assure que l'élément occupe toute la largeur disponible */
    box-sizing: border-box; /* Inclut padding et bordure pour empêcher le débordement */
}

/* Style général pour la section date du formulaire */
.reservationform .form-date {
    display: flex; /* Utilisation de flexbox pour organiser les éléments */
    gap: 0.5rem; /* Espacement entre les champs de date */
    width: 100%; /* La section de date prend toute la largeur */
    box-sizing: border-box; /* Inclut padding et bordure pour empêcher le débordement */
    flex-wrap: wrap; /* Permet aux éléments de passer à la ligne en cas de manque d'espace */
}

/* Style pour la pagination Swiper avec ID modele-pagination */
.swiper-pagination#modele-pagination {
    margin-top: 1rem; /* Espacement au-dessus de la pagination */
    position: unset; /* Position par défaut, ne pas positionner de manière absolue ou relative */
}
/* Style pour les sous-titres */
.subtitle {
    font-style: normal; /* Style de police normal */
    font-weight: 300; /* Poids de police léger */
    font-size: 24px; /* Taille de police du sous-titre */
    color: var(--color_jaune); /* Couleur du texte utilisant la variable jaune */
    text-align: center; /* Centrer le texte */
}

/* Style pour les paragraphes généraux */
.paragraph {
    color: var(--color_blanc); /* Couleur de texte blanche */
}

/* Style pour les éléments de paragraphe (<p>) */
p {
    font-style: normal; /* Style de police normal */
    font-weight: 400; /* Poids de police standard */
    font-size: 18px; /* Taille de police du paragraphe */
}

/* Logo dans la barre de navigation */
.logo_navbar {
    padding-right: 1.875rem; /* Espace à droite du logo pour la séparation avec les autres éléments */
}

/* Style pour l'en-tête */
header {
    box-shadow: 0px 4px 30px rgba(0, 0, 0, 0.1); /* Ajoute une ombre portée subtile en dessous de l'en-tête */
}

/* Style pour l'en-tête de la page d'accueil */
header.home {
    background-image: url("/themes/jvflex/assets/images/header.webp"); /* Image de fond pour l'en-tête */
    background-position: center; /* Centrer l'image de fond */
    background-size: cover; /* L'image couvre toute la zone */
    background-repeat: no-repeat; /* Pas de répétition de l'image */
    min-height: 100vh; /* Assure que l'en-tête prend toute la hauteur visible */
    display: flex; /* Utilisation de flexbox pour organiser le contenu */
    flex-direction: column; /* Les éléments sont organisés verticalement */
}

/* Partie supérieure de l'en-tête */
header #header-top {
    display: flex; /* Utilisation de flexbox pour aligner les éléments */
    justify-content: center; /* Centre les éléments horizontalement */
    align-items: center; /* Centre les éléments verticalement */
    height: var(--navbar_height); /* Hauteur de la barre de navigation */
    background-color: rgba(0, 0, 0, 0.7); /* Fond noir avec transparence */
    padding: 0.5rem 2rem; /* Espacement interne autour du contenu */
}

/* Style pour la barre de navigation */
header #navbar {
    justify-self: center; /* Centre la barre de navigation */
}

/* Style pour la liste de navigation */
header #navbar ul {
    display: flex; /* Utilisation de flexbox pour aligner les éléments horizontalement */
    padding: 0; /* Supprime le padding par défaut de la liste */
    list-style: none; /* Supprime les puces de la liste */
    gap: 1.875rem; /* Espacement entre les éléments de la liste */
    margin: 0; /* Supprime la marge par défaut de la liste */
}

/* Style pour les liens de navigation */
header #navbar ul a.nav-link {
    color: var(--color_blanc); /* Couleur blanche pour les liens */
    text-decoration: none; /* Supprime la décoration par défaut (soulignement) */
    font-style: normal; /* Style de police normal */
    font-weight: 400; /* Poids de police standard */
    font-size: 2rem; /* Taille de police des liens */
    text-transform: uppercase; /* Transforme le texte en majuscules */
}
/* Cache le lien de contact dans la barre de navigation */
header #navbar ul li.contact-link {
    display: none; /* Masque complètement cet élément */
}

/* Style des liens de navigation lorsqu'ils sont survolés */
header #navbar ul a.nav-link:hover {
    color: var(--color_bleu-acier); /* Change la couleur des liens survolés en bleu acier */
}

/* Style des liens de navigation lorsqu'ils sont actifs */
header #navbar ul a.nav-link.active {
    color: var(--color_bleu-acier); /* Change la couleur des liens actifs en bleu acier */
    font-weight: 500; /* Accentue le poids de la police pour les liens actifs */
}

/* Cache le menu burger dans l'en-tête */
header#layout-header>#header-top>#burger-menu {
    display: none; /* Masque le menu burger */
}

/* Style pour la partie inférieure de l'en-tête */
header #header-bottom {
    height: calc(100% - var(--navbar_height)); /* Calcul de la hauteur en tenant compte de la hauteur de la barre de navigation */
    display: flex; /* Utilisation de flexbox pour aligner les éléments */
    justify-content: center; /* Centre les éléments horizontalement */
    color: var(--color_blanc); /* Couleur de texte blanche */
    padding: 2rem 0 2rem var(--padding_LR); /* Ajoute du padding autour de l'élément, avec un espacement à gauche et à droite */
    gap: 1rem; /* Espacement entre les éléments */
    flex-grow: 1; /* Permet au conteneur de grandir si nécessaire */
}

/* Style pour les sections gauche et droite de la partie inférieure de l'en-tête */
header #header-bottom .header-bottom_left, header #header-bottom .header-bottom_right {
    display: flex; /* Utilisation de flexbox pour aligner les éléments */
    flex-direction: column; /* Les éléments sont disposés en colonne */
    justify-content: center; /* Centre verticalement les éléments */
}

/* Section gauche de la partie inférieure de l'en-tête */
header #header-bottom .header-bottom_left {
    width: 75%; /* La section gauche occupe 75% de la largeur */
}

/* Section droite de la partie inférieure de l'en-tête */
header #header-bottom .header-bottom_right {
    width: 100%; /* La section droite occupe 100% de la largeur disponible */
    overflow: hidden; /* Empêche tout débordement */
    position: relative; /* Position relative pour pouvoir positionner les éléments internes de manière absolue */
}

/* Images dans les sections gauche et droite de la partie inférieure de l'en-tête */
header #header-bottom .header-bottom_left, header #header-bottom .header-bottom_right img {
    height: auto; /* Hauteur automatique pour préserver le ratio de l'image */
}

/* Image dans la section droite de la partie inférieure de l'en-tête */
header #header-bottom .header-bottom_right img {
    width: 100%; /* L'image occupe toute la largeur de la section */
    position: absolute; /* Position absolue pour pouvoir la déplacer facilement */
    right: -10px; /* Décale l'image vers la droite */
}

/* Liens dans la section d'informations de l'en-tête */
header #header-bottom .header-infos a {
    text-decoration: none; /* Supprime la décoration des liens (soulignement) */
    color: inherit; /* Inhérite la couleur de son parent */
}

/* Style pour les titres dans la partie inférieure de l'en-tête */
header #header-bottom h1 {
    text-align: left; /* Alignement du texte à gauche */
}

/* Style des sous-titres dans la partie inférieure de l'en-tête */
header #header-bottom .subtitle {
    font-style: normal; /* Style de police normal */
    font-weight: 300; /* Poids de police léger */
    font-size: 2rem; /* Taille de police des sous-titres */
    margin: 0; /* Pas de marge externe */
    text-transform: uppercase; /* Texte en majuscules */
    color: var(--color_jaune); /* Couleur jaune pour le texte */
    text-align: left; /* Alignement du texte à gauche */
}
/* Style pour le paragraphe dans la partie inférieure de l'en-tête */
header #header-bottom .paragraph {
    font-style: normal; /* Style de police normal */
    font-weight: 400; /* Poids de police standard */
    font-size: 2rem; /* Taille de police du paragraphe */
    margin: 0; /* Pas de marge externe */
    color: var(--color_gris-argente); /* Couleur gris argenté */
    max-width: 750px; /* Limite la largeur maximale pour une meilleure lisibilité */
}

/* Style pour le conteneur de boutons dans la partie inférieure de l'en-tête */
header #header-bottom .button-container {
    margin: 1rem 0; /* Espacement vertical autour du conteneur de boutons */
}

/* Style pour les informations de l'en-tête */
header #header-bottom .header-infos .header-info, .footer-info {
    display: flex; /* Utilisation de flexbox pour aligner les éléments horizontalement */
    align-items: center; /* Centre les éléments verticalement */
    gap: 8px; /* Espacement entre les éléments */
    margin: 0; /* Pas de marge externe */
}

/* Marge pour les informations de l'en-tête */
header #header-bottom .header-infos {
    margin: 12px 0; /* Ajoute une marge en haut et en bas */
}

/* Style pour les informations suivantes dans l'en-tête */
header #header-bottom .header-infos .header-info+.header-info {
    margin: 5px 0; /* Ajoute une marge entre chaque information */
}

/* Fixer la position de l'en-tête au sommet de l'écran */
header#layout-header.fixed #header-top {
    position: fixed;
    top: 0;
    z-index: 100;
    width: 100%;
    background-color: rgba(0, 0, 0, 0.8); /* Couleur de fond pour rendre le menu visible */
    backdrop-filter: blur(2px); /* Effet de flou pour le fond */
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); /* Ombre pour l'effet visuel */
}

/* Conteneur pour les boutons */
.button-container {
    display: flex; /* Utilisation de flexbox pour aligner les boutons horizontalement */
    margin: 0; /* Pas de marge externe */
    justify-content: center; /* Centre les boutons horizontalement */
}

/* Style des boutons */
.button-container.btn>a, .button {
    appearance: none; /* Supprime le style par défaut du navigateur */
    border-radius: 5px; /* Coins arrondis */
    cursor: pointer; /* Affiche le curseur de pointeur */
    padding: 1.05rem 1.75rem; /* Espacement interne des boutons */
    background-color: var(--color_bleu-acier); /* Couleur de fond bleu acier */
    text-decoration: none; /* Supprime la décoration (soulignement) */
    color: var(--color_blanc); /* Couleur de texte blanche */
    font-style: normal; /* Style de police normal */
    font-weight: 400; /* Poids de police standard */
    font-size: 1.25rem; /* Taille de police des boutons */
    text-transform: uppercase; /* Transforme le texte en majuscules */
    display: flex; /* Utilisation de flexbox pour le contenu interne du bouton */
    gap: 14px; /* Espacement entre les éléments internes du bouton */
    align-items: center; /* Centre les éléments verticalement */
}

/* Style des boutons lors du survol */
.button-container.btn>a:hover, .button:hover {
    background-color: var(--color_blanc); /* Change la couleur de fond en blanc lors du survol */
    color: var(--color_noir); /* Change la couleur du texte en noir lors du survol */
}

/* Style des images dans les boutons lors du survol */
.button-container.btn>a:hover img, .button:hover img {
    filter: var(--filter_noir); /* Applique un filtre noir aux images */
}

/* Style général pour l'élément principal (main) */
main {
    padding: 0 var(--padding_LR); /* Espacement horizontal autour de l'élément principal */
    flex-grow: 1; /* Prend tout l'espace restant entre l'en-tête et le pied de page */
}

/* Style par défaut pour l'élément principal */
main.default {
    padding: 130px var(--padding_LR); /* Ajoute un espacement en haut pour le contenu par défaut */
}

/* Style pour les pages de véhicules et accessoires */
.page-vehicules main, .page-accessoires main {
    padding-bottom: 0; /* Supprime le padding en bas */
    padding-top: 0; /* Supprime le padding en haut */
}

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

/* Section en plein écran avec un espacement négatif sur les côtés */
section.full {
    margin: 0 calc(-1 * var(--padding_LR)) 0; /* Espacement négatif pour supprimer le padding latéral */
    padding: 15vh var(--padding_LR); /* Espacement interne de la section */
}

/* Section full sans padding interne */
section.fulla, .section-fulla {
    margin: 0 calc(-1 * var(--padding_LR)) 0; /* Espacement négatif pour supprimer le padding latéral */
}

/* Style pour certaines sections particulières (entreprise, carrosserie, dépannage) */
section#entreprise, section#carrosserie, section#depannage {
    background-color: rgba(255, 255, 255, 0.4); /* Fond blanc avec opacité */
    box-shadow: 0px 4px 40px rgba(0, 0, 0, 0.5); /* Ombre portée forte */
    display: grid; /* Utilisation de grille pour organiser les éléments */
    grid-template-columns: 1fr 1fr; /* Deux colonnes de largeur égale */
    max-width: 1400px; /* Largeur maximale de la section */
    margin: 10vh auto 12vh; /* Espacement vertical et centrage horizontal */
}

/* Image de l'entreprise dans certaines sections */
section#entreprise .entreprise_img, section#carrosserie .entreprise_img, section#depannage .entreprise_img {
    min-height: 35vh;
    display: flex;
    align-items: center;
    justify-content: center;

}

/* Images dans certaines sections particulières */
section#entreprise .entreprise_img img, section#carrosserie .entreprise_img img, section#depannage .entreprise_img img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center;
    display: block;
}

/* Contenu de l'entreprise dans certaines sections particulières */
section#entreprise .entreprise_content, section#carrosserie .entreprise_content, section#depannage .entreprise_content {
    padding: 70px; /* Espacement interne pour le contenu */
}

/* Style pour le pied de page */
footer {
    background: rgba(0, 0, 0, 0.5); /* Fond noir avec opacité */
    backdrop-filter: blur(12.5px); /* Effet de flou pour un arrière-plan désaturé */
    color: var(--color_gris-argente); /* Couleur de texte gris argenté */
    display: grid; /* Utilisation de grille pour organiser les éléments */
    grid-template-columns: 1fr 1fr 1fr; /* Trois colonnes de largeur égale */
    padding: 0 5vw; /* Espacement horizontal de 5vw */
}
/* Style pour les liens, paragraphes et adresses dans le pied de page */
footer a,
footer p,
footer address {
    color: inherit; /* Inhérite la couleur de l'élément parent */
    font-style: inherit; /* Inhérite le style de police de l'élément parent */
    text-decoration: none; /* Supprime la décoration par défaut (soulignement) */
    font-size: 18px; /* Taille de police standard pour le pied de page */
}

/* Style pour les titres dans le pied de page */
footer .title {
    font-style: normal; /* Style de police normal */
    font-weight: 500; /* Poids de police intermédiaire */
    font-size: 24px; /* Taille de police des titres du pied de page */
    text-transform: uppercase; /* Texte en majuscules */
    color: var(--color_jaune); /* Couleur jaune pour les titres */
}

/* Alignement des liens du pied de page */
footer .footer-links {
    text-align: center; /* Centre les liens horizontalement */
}

/* Alignement des horaires dans le pied de page */
footer .footer-hours {
    text-align: right; /* Aligne les horaires sur la droite */
}

/* Style pour les réseaux sociaux dans le pied de page */
footer .footer-socials {
    display: flex; /* Utilisation de flexbox pour organiser les icônes */
    gap: 20px; /* Espacement entre les icônes */
    justify-content: center; /* Centre les icônes de réseaux sociaux */
}

/* Style pour les icônes de réseaux sociaux au survol */
footer .footer-socials a:hover img {
    filter: var(--filter_jaune); /* Applique un filtre jaune lors du survol */
}

/* Style pour les textes légaux dans le pied de page */
footer .footer-legals p {
    margin: 0.5rem; /* Marge autour des paragraphes légaux */
}

/* Espacement entre les blocs d'information dans le pied de page */
footer .footer-info+.footer-info {
    margin-top: 0.5rem; /* Marge en haut des informations suivantes */
}

/* 🔹 Style global pour la section des partenaires */
section#partenaires {
    background: rgba(0, 0, 0, 0.8); /* Applique un fond noir semi-transparent */
    padding-top: 12vh; /* Ajoute un espace en haut de la section */
    padding-bottom: 15vh; /* Ajoute un espace en bas de la section */
    text-align: center; /* Centre le texte et les éléments dans la section */
}

/* 🔹 Style des titres dans la section partenaires */
.partenaires h2 {
    margin-bottom: 1rem; /* Ajoute un espace sous le titre */
    font-style: normal; /* Définit un style de police normal */
    font-weight: 400; /* Définit un poids de police moyen */
    font-size: 40px; /* Définit une taille de police de 40px */
}

/* 🔹 Grille des partenaires */
.partenaires {
    margin-top: 2rem; /* Ajoute un espace en haut de la section */
    display: grid; /* Utilise une grille pour organiser les partenaires */
    gap: 50px; /* Ajoute un espace de 50px entre chaque partenaire */
    justify-items: center; /* Centre chaque élément horizontalement */
    grid-template-columns: repeat(auto-fill, minmax(675px, 1fr)); /* 
       Définit une grille adaptative où chaque colonne fait au minimum 675px 
       et occupe l'espace disponible */
}

/* 🔹 Chaque partenaire (boîte contenant texte + image) */
.partenaires .partenaire {
    display: flex; /* Utilise Flexbox pour aligner les éléments en ligne */
    align-items: center; /* Centre verticalement les éléments (texte + image) */
    border-radius: 5px; /* Ajoute des coins arrondis */
    padding: 11px 11px 11px 2rem; /* Définit un espace intérieur pour aérer le contenu */
    gap: 1rem; /* Ajoute un espace entre le texte et l'image */
    width: 700px; /* Définit une largeur fixe de 700px */
    min-height: 322px; /* Définit une hauteur minimale pour assurer un alignement uniforme */
    box-sizing: border-box; /* Garantit que padding et border ne modifient pas la taille de la boîte */
    background: rgba(255, 255, 255, 0.35); /* Applique un fond blanc semi-transparent */
}

/* 🔹 Style alternatif pour les partenaires en position paire */
.partenaires .partenaire:nth-child(even) {
    background: rgba(0, 0, 0, 0.35); /* Applique un fond noir semi-transparent aux éléments pairs */
}

/* 🔹 Style des informations partenaires (Texte) */
.partenaires .partenaire .partenaire_infos {
    flex: 1; /* Assure que le texte prend 50% de la largeur du conteneur */
    min-width: 50%; /* Empêche le texte de devenir trop étroit */
    padding: 10px; /* Ajoute un espace autour du texte */
    text-align: left; /* Aligne le texte à gauche */
    color: white; /* Définit la couleur du texte en blanc */
}

/* 🔹 Empêche les boutons d'avoir un retour à la ligne */
.partenaires .partenaire .partenaire_infos .button-container {
    white-space: nowrap; /* Assure que le bouton reste sur une seule ligne */
}

/* 🔹 Conteneur du logo */
.partenaires .partenaire .partenaire_logo {
    flex: 1; /* Assure que le logo prend 50% de la largeur du conteneur */
   /*  min-width: 50%; Empêche la div contenant le logo de rétrécir excessivement */
    background-color: var(--color_blanc); /* Applique un fond blanc */
    display: flex; /* Utilise Flexbox pour centrer l’image */
    justify-content: center; /* Centre horizontalement l’image */
    align-items: center; /* Centre verticalement l’image */
    width: 340px; /* Définit une largeur fixe de 340px */
    height: 300px; /* Définit une hauteur fixe de 300px */
    border-radius: 5px; /* Ajoute des coins arrondis */
    overflow: visible; /* Assure que l’image ne soit pas coupée */
}

/* 🔹 Image du logo */
.partenaires .partenaire .partenaire_logo img {
    width: auto; /* Permet à l'image de garder son ratio d'origine */
    height: 100%; /* Assure que l’image prend toute la hauteur disponible */
    max-width: 100%; /* Empêche l’image de dépasser la largeur du conteneur */
    object-fit: contain; /* Assure que l’image reste entière sans être coupée */
}

/* 🔹 Style pour le carrousel des partenaires */
section#partenaires .carousselPartenaires .swiper-slide {
    display: flex; /* Utilise Flexbox pour aligner les éléments dans le carrousel */
    align-items: center; /* Centre les éléments verticalement */
    width: 196px; /* Définit une largeur fixe pour chaque élément du carrousel */
    height: 196px; /* Définit une hauteur fixe */
    border-radius: 196px; /* Rend les éléments du carrousel complètement arrondis */
    overflow: hidden; /* Empêche tout débordement des images */
}

/* 🔹 Style des images dans le carrousel */
section#partenaires .carousselPartenaires .swiper-slide img {
    height: auto; /* Assure que l’image garde son ratio et ne soit pas déformée */
}


/* Style pour le formulaire de contact */
.contact_form form {
    margin: 0 auto; /* Centre le formulaire horizontalement */
    width: 100%; /* Largeur de 100% */
    max-width: 485px; /* Largeur maximale du formulaire */
    display: flex; /* Utilisation de flexbox pour organiser les champs */
    flex-direction: column; /* Les champs sont disposés en colonne */
    gap: 25px; /* Espacement entre chaque champ du formulaire */
}

/* Style pour les blocs individuels du formulaire */
.contact_form form .form-block {
    display: flex; /* Utilisation de flexbox pour aligner les éléments */
    flex-direction: column; /* Les éléments sont disposés en colonne */
    row-gap: 7px; /* Espacement entre chaque élément du bloc */
    width: 100%; /* Largeur maximale du bloc */
}

/* Style pour l'identité dans le formulaire */
.contact_form form .form-identity {
    display: flex; /* Utilisation de flexbox pour aligner les champs horizontalement */
    gap: 25px; /* Espacement entre les champs d'identité */
}

/* Style pour les labels et les champs de saisie du formulaire */
.contact_form form label,
.contact_form form .form-input {
    font-family: var(--font_main); /* Utilise la police principale */
    font-style: normal; /* Style de police normal */
    font-weight: 400; /* Poids de police standard */
    font-size: 0.95rem; /* Taille de police des labels et champs */
    color: var(--color_blanc); /* Couleur de texte blanche */
    border-radius: 5px; /* Coins arrondis */
    width: 100%; /* Largeur maximale */
}

/* Style pour les labels du formulaire */
.contact_form form label {
    text-transform: uppercase; /* Texte en majuscules pour les labels */
}

/* Style pour les champs de saisie du formulaire */
.contact_form form .form-input {
    background-color: rgba(0, 0, 0, 0.5); /* Fond noir avec opacité */
    border: 1px solid var(--color_bleu-acier); /* Bordure bleue acier */
    padding: 19px 20px; /* Espacement interne du champ de saisie */
    color: var(--color_gris-argente); /* Couleur de texte gris argenté */
    resize: none; /* Empêche le redimensionnement */
}
/* Style pour le bouton de soumission du formulaire de contact */
.contact_form form .form-submit input {
    border: none; /* Supprime la bordure par défaut */
    font-family: var(--font_main); /* Utilise la police principale */
    font-style: normal; /* Style de police normal */
    font-weight: 400; /* Poids de police standard */
    font-size: 0.95rem; /* Taille de police du bouton de soumission */
}

/* Style général pour le formulaire de contact */
.contact_form {
    background-color: #434343; /* Fond gris foncé */
    border-radius: 15px; /* Coins arrondis du formulaire */
    padding: 30px; /* Espacement interne du formulaire */
    margin: 20px auto; /* Centre le formulaire avec une marge autour */
    max-width: 800px; /* Largeur maximale du formulaire */
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.4); /* Ombre pour l'effet visuel */
    box-sizing: border-box; /* Inclut le padding et la bordure dans la largeur et la hauteur */
}

/* Style pour les titres dans les pages de véhicules et accessoires */
.page-vehicules h2, .page-accessoires h2 {
    margin-bottom: 4rem; /* Ajoute un espacement en bas des titres */
}

/* Style pour le sous-titre dans la page des véhicules */
.page-vehicules .subtitle {
    /* color: var(--color_gris-argente); */ /* Commentaire pour la couleur de texte */
    padding-bottom: 3rem; /* Ajoute un espacement en bas du sous-titre */
}

/* Style pour la section des types de véhicules */
.page-vehicules section#types {
    min-height: 90vh; /* Hauteur minimale de la section */
    padding-top: 130px; /* Espacement en haut de la section */
    background-image: linear-gradient(90deg, rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0.5) 100%), url("/themes/jvflex/assets/images/background-vehicules_first.webp"); /* Image de fond avec superposition */
}

/* Style pour la section des marques */
.page-vehicules section#marques, .page-accessoires section#marques {
    min-height: 60vh; /* Hauteur minimale de la section */
    color: var(--color_blanc); /* Couleur de texte blanche */
    display: flex; /* Utilisation de flexbox pour organiser les éléments */
    align-items: center; /* Centre les éléments verticalement */
    justify-content: space-between; /* Espace entre les éléments */
    /* gap: 2rem; */ /* Commentaire pour l'espacement entre les éléments */
}

/* Style pour la section des modèles */
.page-vehicules section#modeles, .page-accessoires section#modeles {
    background-color: var(--color_gris-fonce); /* Couleur de fond gris foncé */
    min-height: 90vh; /* Hauteur minimale de la section */
    color: var(--color_blanc); /* Couleur de texte blanche */
}

/* Style spécifique pour la section des marques dans les véhicules */
.page-vehicules section#marques {
    background-image: linear-gradient(90deg, rgba(0, 0, 0, 0.35) 0%, rgba(0, 0, 0, 0.35) 100%), url("/themes/jvflex/assets/images/background_marques_moto.webp"); /* Image de fond avec superposition */
    background-color: var(--color_gris-argente); /* Couleur de fond gris argenté */
    justify-content: center; /* Centre les éléments horizontalement */
    padding: 5vh 0; /* Espacement vertical interne de la section */
    display: grid; /* Utilisation de grille pour organiser les éléments */
    grid-template-columns: 0.8fr 1fr; /* Création de deux colonnes de largeur différente */
    position: relative; /* Position relative pour contenir les éléments enfants */
    overflow: hidden; /* Empêche tout débordement */
}

/* Style spécifique pour la section des modèles dans les véhicules */
.page-vehicules section#modeles {
    background-image: linear-gradient(90deg, rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0.5) 100%), url("/themes/jvflex/assets/images/background-vehicules_vehicules.webp"); /* Image de fond avec superposition */
}

/* Style pour le titre des marques */
.page-vehicules .title-brand, .page-accessoires .title-brand {
    color: var(--color_jaune); /* Couleur jaune pour le titre */
}

/* Style pour la liste des véhicules */
.vehicules_list {
    padding: 0; /* Pas de padding */
    margin: 0; /* Pas de marge */
    list-style: none; /* Supprime les puces de la liste */
    display: flex; /* Utilisation de flexbox pour organiser les éléments */
    gap: 1rem; /* Espacement entre les éléments */
    justify-content: center; /* Centre les éléments horizontalement */
    flex-wrap: wrap; /* Les éléments peuvent passer à la ligne si nécessaire */
}

/* Style pour la liste des types de véhicules */
.vehicules_list.types_list {
    flex-wrap: nowrap; /* Les éléments ne passent pas à la ligne */
}

/* Style pour chaque élément de la liste des véhicules */
.vehicules_list .vehicules_item {
    display: flex; /* Utilisation de flexbox pour aligner les éléments */
    justify-content: center; /* Centre les éléments horizontalement */
    position: relative; /* Position relative pour contenir les éléments enfants */
    background-color: var(--color_blanc); /* Couleur de fond blanche */
}

/* Style pour chaque type de véhicule dans la liste */
.vehicules_list .types_item {
    width: 370px; /* Largeur de chaque élément */
    border-radius: 25px; /* Coins arrondis */
    padding: 20px; /* Espacement interne */
    height: 300px; /* Hauteur fixe de chaque élément */
    color: var(--color_blanc); /* Couleur de texte blanche */
    background-color: var(--color_gris-fonce); /* Couleur de fond gris foncé */
    display: flex; /* Utilisation de flexbox pour centrer le contenu */
    justify-content: center; /* Centre horizontalement le contenu */
    align-items: center; /* Centre verticalement le contenu */
    transition: width 0.3s; /* Transition pour la largeur lors du survol */
    background-position: center; /* Centre l'image de fond */
    background-size: cover; /* L'image de fond couvre toute la zone */
    background-repeat: no-repeat; /* Pas de répétition de l'image de fond */
    overflow: hidden; /* Empêche le débordement du contenu */
    box-shadow: 0px 0px 20px rgb(255 255 255 / 10%); /* Ombre subtile autour de l'élément */
}

/* Style lors du survol des éléments de type de véhicule */
.vehicules_list .types_item:hover {
    box-shadow: inset 0px 0px 10px 0px #ffffff45; /* Ombre interne lors du survol */
}

/* Style pour le conteneur des types de véhicules */
.type_vehicule_container span {
    display: block; /* Élément de type bloc */
    width: 45vw; /* Largeur de l'élément */
    background: linear-gradient(90deg, rgba(0, 0, 0, 1) 0%, gray 100%); /* Fond en dégradé */
    position: absolute; /* Position absolue par rapport au parent */
    top: -15px; /* Positionnement en haut */
    bottom: -15px; /* Positionnement en bas */
    left: -25%; /* Positionnement à gauche */
    border-radius: 1000px; /* Coins très arrondis pour un effet circulaire */
}

/* Style commenté pour le conteneur des types de véhicules */
/* .type_vehicule_container {
    width: 25vw;
    height: 100%;
    position: absolute;
    left: -100px;
    display: flex;
    align-items: center;
} */
/* Espacement horizontal pour les éléments */
.page-vehicules .marques_list {
    padding: 0 var(--padding_LR);
}

/* Style pour les types de véhicules dans la page des véhicules */
.page-vehicules .type_vehicule {
    width: 100%; /* Largeur maximale */
    height: auto; /* Hauteur adaptative */
    transform: translateX(calc(-1 * var(--padding_LR))); /* Translate horizontalement en utilisant le padding */
}

/* Style pour chaque type de véhicule dans la liste des types */
.page-vehicules .types_item .type_vehicule {
    position: absolute; /* Positionnement absolu pour aligner l'élément */
    left: -95px; /* Déplacement vers la gauche */
    max-height: 270px; /* Hauteur maximale de l'élément */
    width: auto; /* Largeur adaptative */
    transition: all 2s, left 0.8s 0.1s; /* Transition sur toutes les propriétés avec un effet de glissement */
}

/* Style pour le texte des types de véhicules */
.vehicules_list .types_item p {
    margin: 0; /* Pas de marge externe */
    font-style: normal; /* Style de police normal */
    font-weight: 500; /* Poids de police intermédiaire */
    text-transform: uppercase; /* Texte en majuscules */
    font-size: 2rem; /* Taille de police */
    margin-left: 3rem; /* Marge à gauche du texte */
    flex-shrink: 0; /* Évite la réduction de la taille du texte */
}

/* Style pour les éléments de saisie dans la liste des véhicules */
.vehicules_list .vehicules_item input {
    width: 100%; /* Largeur maximale */
    height: 100%; /* Hauteur maximale */
    z-index: 3; /* Place l'élément au-dessus des autres */
    position: absolute; /* Positionnement absolu pour couvrir tout l'élément parent */
    display: flex; /* Utilisation de flexbox pour organiser le contenu */
    padding: 0; /* Pas de padding */
    margin: 0; /* Pas de marge */
    top: 0; /* Positionnement en haut */
    left: 0; /* Positionnement à gauche */
    right: 0; /* Positionnement à droite */
    bottom: 0; /* Positionnement en bas */
    opacity: 0; /* Élément invisible */
    cursor: pointer; /* Change le curseur en pointeur */
}

/* Style pour la liste des marques dans la page des véhicules */
.page-vehicules .brand_list {
    flex-wrap: wrap; /* Les éléments peuvent passer à la ligne si nécessaire */
    align-items: center; /* Centre les éléments verticalement */
}

/* Style pour chaque élément de la liste des marques */
.vehicules_list .brand_item {
    width: 170px; /* Largeur fixe de chaque marque */
    height: 170px; /* Hauteur fixe de chaque marque */
    align-items: center; /* Centre les éléments verticalement */
    border-radius: 170px; /* Coins arrondis pour un aspect circulaire */
    overflow: hidden; /* Empêche le débordement du contenu */
    aspect-ratio: 1/1; /* Assure un ratio carré */
    background-color: rgba(255, 255, 255, 0.2); /* Fond blanc avec opacité */
    backdrop-filter: blur(12.5px); /* Ajoute un effet de flou en arrière-plan */
    border: 2px solid var(--color_blanc); /* Bordure blanche */
    transition: all 0.3s; /* Transition sur toutes les propriétés pour un effet fluide */
    text-align: center; /* Centre le texte horizontalement */
}

/* Style pour les éléments de la liste des marques au survol ou actifs */
.vehicules_list .brand_item:hover, .vehicules_list .brand_item.active {
    border-width: 5px; /* Augmente la largeur de la bordure */
    background-color: rgba(255, 255, 255, 0.3); /* Change la couleur de fond avec plus de transparence */
}

/* Style pour le logo des marques */
.vehicules_list .brand_item .logo {
    height: auto; /* Hauteur adaptative */
}

/* Style pour les labels des éléments de la liste des marques */
.vehicules_list .brand_item label>span {
    visibility: hidden; /* Cache le texte */
    position: absolute; /* Positionnement absolu pour centrer le texte */
    top: 50%; /* Centre verticalement */
    left: 50%; /* Centre horizontalement */
    transform: translate(-50%, -50%); /* Ajuste la position pour un centrage parfait */
}

/* Style pour le conteneur des cartes en section pleine */
.card-container.section-fulla {
    overflow: hidden; /* Empêche le débordement du contenu */
    padding: 0 5vw; /* Espacement horizontal autour du conteneur */
}

/* Style pour chaque carte dans la liste des cartes */
.card_list .card_item {
    border: 1px solid var(--color_bleu-marine); /* Bordure de couleur bleu marine */
    border-radius: 5px; /* Coins arrondis de la carte */
    max-width: 425px; /* Largeur maximale de chaque carte */
    background-color: var(--color_noir); /* Couleur de fond noire */
    display: flex; /* Utilisation de flexbox pour organiser le contenu */
    flex-direction: column; /* Contenu organisé en colonne */
    overflow: hidden; /* Empêche le débordement du contenu */
    position: relative; /* Positionnement relatif pour les éléments enfants */
}

/* Style pour l'image de la carte */
.card_list .card_item .card_item-img {
    background: linear-gradient(180deg, var(--color_bleu-marine) 0%, var(--color_noir) 100%); /* Dégradé du bleu marine au noir */
    height: 320px; /* Hauteur fixe de l'image */
    display: flex; /* Utilisation de flexbox pour centrer l'image */
    justify-content: center; /* Centre l'image horizontalement */
    align-items: center; /* Centre l'image verticalement */
    padding: 12px; /* Espacement interne autour de l'image */
}

/* Style pour l'image elle-même dans la carte */
.card_list .card_item .card_item-img img {
    height: auto; /* Hauteur adaptative pour préserver le ratio */
    width: auto; /* Largeur adaptative pour préserver le ratio */
}

/* Style pour le contenu de la carte */
.card_list .card_item .card_item-content {
    color: var(--color_blanc); /* Couleur de texte blanche */
    padding: 15px 45px 22px; /* Espacement interne autour du contenu */
    height: 100%; /* Hauteur adaptative */
    display: flex; /* Utilisation de flexbox pour organiser le contenu */
    flex-direction: column; /* Organise le contenu en colonne */
    justify-content: space-between; /* Espace entre les éléments */
    border-top-left-radius: 25px; /* Coins arrondis en haut à gauche */
    border-top-right-radius: 25px; /* Coins arrondis en haut à droite */
    background-color: var(--color_noir); /* Couleur de fond noire */
    transition: height 0.3s ease, padding 0.3s ease; /* Transition fluide pour la hauteur et le padding */
}
/* Style pour le contenu de la carte lorsqu'elle est active */
.card_list .card_item.active .card_item-content {
    height: unset; /* Retire la contrainte de hauteur */
    position: absolute; /* Positionnement absolu pour s'ancrer en bas de la carte */
    bottom: 0; /* Positionnement en bas de la carte */
    width: 100%; /* Largeur maximale */
    min-height: 80%; /* Hauteur minimale de 80% de la carte */
    padding: 24px 45px 22px; /* Espacement interne */
}

/* Bouton de fermeture du contenu de la carte */
.card_list .card_item .card_item-content .close {
    display: none; /* Le bouton de fermeture est caché par défaut */
}

/* Bouton de fermeture du contenu de la carte lorsqu'elle est active */
.card_list .card_item.active .card_item-content .close {
    display: block; /* Affiche le bouton de fermeture */
    width: 25px; /* Largeur du bouton */
    height: 25px; /* Hauteur du bouton */
    background: var(--color_gris-argente); /* Fond gris argenté */
    position: absolute; /* Positionnement absolu */
    top: 15px; /* Positionnement en haut de la carte */
    right: 15px; /* Positionnement à droite de la carte */
    border: 0; /* Pas de bordure */
    border-radius: 15px; /* Coins arrondis */
    color: var(--color_noir); /* Couleur de texte noire */
    cursor: pointer; /* Change le curseur en pointeur */
}

/* Style pour le titre de la carte */
.card_list .card_item .card_item-content h3 {
    font-family: var(--font_title); /* Police de titre */
    font-style: normal; /* Style de police normal */
    font-weight: 400; /* Poids de police standard */
    font-size: 2.5rem; /* Taille de police du titre */
    margin: 0; /* Pas de marge externe */
}

/* Style pour le prix et la marque de la carte */
.card_list .card_item .card_item-content .price, .card_list .card_item .card_item-content .brand {
    font-style: normal; /* Style de police normal */
    margin: 0; /* Pas de marge externe */
}

/* Style pour le prix de la carte */
.card_list .card_item .card_item-content .price {
    font-weight: 700; /* Poids de police accentué */
    font-size: 1.6rem; /* Taille de police du prix */
    color: var(--color_jaune); /* Couleur jaune pour le prix */
}

/* Style pour la marque de la carte */
.card_list .card_item .card_item-content .brand {
    font-weight: 400; /* Poids de police standard */
    font-size: 1.4rem; /* Taille de police de la marque */
    color: var(--color_gris-argente); /* Couleur gris argenté */
}

/* Style pour la description de la carte */
.card_list .card_item .card_item-content .description {
    font-style: normal; /* Style de police normal */
    font-weight: 500; /* Poids de police intermédiaire */
    margin: 20px 0; /* Marge en haut et en bas de la description */
    text-align: justify; /* Alignement justifié du texte */
    max-height: 52px; /* Hauteur maximale par défaut pour la description */
    overflow: hidden; /* Cache le contenu débordant */
    transition: max-height 0.5s ease, overflow 0.5s ease; /* Transition fluide pour la hauteur et le débordement */
    transition-delay: 0.2s; /* Délai avant de débuter la transition */
}

/* Style pour la description de la carte lorsqu'elle est active */
.card_list .card_item.active .card_item-content .description {
    max-height: 1000px; /* Augmente la hauteur maximale pour afficher tout le contenu */
    overflow: visible; /* Rend tout le contenu visible */
    animation-name: expandHeight; /* Animation pour l'expansion de la description */
    animation-duration: 0.5s; /* Durée de l'animation */
    animation-timing-function: ease; /* Fonction de timing pour une animation douce */
}

/* Animation pour agrandir la hauteur de la description */
@keyframes expandHeight {
    from {
        max-height: 52px; /* Hauteur initiale */
    }
    to {
        max-height: 1000px; /* Hauteur finale */
    }
}

/* Style pour le conteneur de boutons dans la carte */
.card_list .card_item .card_item-content .button-container {
    margin-top: 20px; /* Marge en haut du conteneur de boutons */
    justify-content: center; /* Centre les boutons horizontalement */
}

/* Style pour la première section de la page des accessoires */
.page-accessoires section#first {
    background-image: linear-gradient(90deg, rgba(0, 0, 0, 0.65) 0%, rgba(0, 0, 0, 0.65) 100%), url("/themes/jvflex/assets/images/background-accessoires_first.webp"); /* Image de fond avec superposition */
    background-color: var(--color_gris-argente); /* Couleur de fond gris argenté */
    min-height: calc(50vh - var(--navbar_height)); /* Hauteur minimale de la section en tenant compte de la barre de navigation */
    padding-top: 130px; /* Espacement en haut de la section */
}

/* Style pour le paragraphe principal dans la section des accessoires */
.paragraph-first {
    max-width: 900px; /* Largeur maximale du paragraphe */
    margin: 1rem auto; /* Centre le paragraphe avec une marge autour */
}

/* Style pour la section des marques dans la page des accessoires */
.page-accessoires section#marques {
    background-image: linear-gradient(90deg, rgba(0, 0, 0, 0.65) 0%, rgba(0, 0, 0, 0.65) 100%), url("/themes/jvflex/assets/images/background-accessoires_marques.webp"); /* Image de fond avec superposition */
    background-color: var(--color_gris-argente); /* Couleur de fond gris argenté */
    flex-direction: column; /* Organise les éléments en colonne */
    justify-content: unset; /* Retire la justification */
}

/* Style pour la section des modèles dans la page des accessoires */
.page-accessoires section#modeles {
    background-image: linear-gradient(90deg, rgba(0, 0, 0, 0.65) 0%, rgba(0, 0, 0, 0.65) 100%), url("/themes/jvflex/assets/images/background-accessoires_modeles.webp"); /* Image de fond avec superposition */
    background-color: var(--color_gris-argente); /* Couleur de fond gris argenté */
}

#mentions h2{
    text-align: left;
}
#cgv h2{
    text-align: left;
}

/* Media query pour les écrans de taille maximale 1025px */
@media all and (max-width: 1025px) {
    /* Réduction du padding pour les côtés */
    :root {
        --padding_LR: 5vw;
    }

    /* Taille de police réduite pour le titre principal (h1) */
    h1 {
        font-size: 2.5rem;
    }

    /* Taille de police réduite pour le sous-titre (h2) */
    h2 {
        font-size: 2rem;
    }

    /* Hauteur minimale désactivée pour l'en-tête de la page d'accueil */
    header.home {
        min-height: unset;
    }

    /* Masquer la barre de navigation pour les écrans plus petits */
    header #header-top #navbar {
        display: none;
    }

    /* Justifier le contenu de l'en-tête en fin de ligne */
    header #header-top {
        justify-content: flex-end;
    }

    /* Afficher le menu burger et ajuster son style */
    header#layout-header>#header-top>#burger-menu {
        display: block;
        justify-self: flex-end;
        width: 2.25rem;
        height: 2.5rem;
        cursor: pointer;
        position: relative;
        appearance: none;
        border: none;
        background: none;
        box-sizing: border-box;
        padding: 0;
        flex-shrink: 0;
    }

    /* Style des lignes du menu burger */
    header#layout-header>#header-top>#burger-menu span {
        width: 100%;
        height: 5px;
        background-color: var(--color_bleu-acier);
        display: block;
        transition: background-color 0.5s ease-in-out;
        margin: 0 0 0 auto;
        border-radius: 5px;
    }

    /* Positionnement de la première ligne du menu burger */
    header#layout-header>#header-top>#burger-menu span:nth-child(1) {
        transform: translateY(-10px);
    }

    /* Positionnement de la troisième ligne du menu burger */
    header#layout-header>#header-top>#burger-menu span:nth-child(3) {
        transform: translateY(10px);
    }

    /* Style pour les liens de navigation dans le menu burger */
    header#layout-header>#header-top>nav>ul>li.nav-item>a.nav-link {
        width: 100%;
        display: flex;
        gap: 10px;
        align-items: center;
        font-size: 1.5rem;
        text-align: left;
        color: var(--color_blanc);
    }

    /* Style pour les liens actifs dans le menu burger */
    header#layout-header>#header-top>nav>ul>li.nav-item>a.nav-link.active {
        color: var(--color_bleu-acier);
    }

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

    /* Style pour le menu burger lorsqu'il est actif */
    header#layout-header>#header-top>#burger-menu.active~nav {
        position: fixed;
        display: flex;
        top: var(--navbar_height);
        flex-direction: column;
        width: 100%;
        background-color: var(--color_noir);
        border: 1px solid var(--color_bleu-acier);
        left: 0;
        padding: var(--padding_LR) calc(var(--padding_LR) + 1rem);
        box-sizing: border-box;
        z-index: 999;
    }

    /* Style pour la liste de navigation lorsque le menu burger est actif */
    header#layout-header>#header-top>#burger-menu.active~nav>ul {
        height: 100%;
        flex-direction: column;
        justify-content: center;
    }

    /* Style pour le pied de page sur les écrans plus petits */
    footer {
        display: flex;
        flex-direction: column;
    }

    /* Style pour les informations du pied de page */
    footer .footer-infos {
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    /* Alignement centré des titres et des horaires dans le pied de page */
    footer .footer-infos .title, footer .footer-hours {
        text-align: center;
    }

 /* 🔹 Adaptation de la grille des partenaires en une seule colonne */
    .partenaires {
        grid-template-columns: 1fr; /* Passe à une seule colonne */
    }

    /* 🔹 Chaque partenaire s'affiche en colonne */
    .partenaires .partenaire {
        flex-direction: column-reverse; /* Met le texte sous l’image */
        flex-wrap: wrap; /* Permet aux éléments de s'adapter à la taille de l'écran */
        justify-content: center; /* Centre le contenu */
        padding: 4vw; /* Ajoute un padding responsive */
        width: 90%; /* Permet un affichage fluide */
        min-height: auto; /* Ajuste la hauteur dynamiquement */
    }

    /* 🔹 Ajustement du conteneur du logo des partenaires */
    .partenaires .partenaire .partenaire_logo {
        width: 100%; /* Le logo prend toute la largeur */
        height: auto; /* Ajuste la hauteur dynamiquement */
        max-width: 300px; /* Limite la taille maximale pour éviter l'agrandissement excessif */
        margin-bottom: 1rem; /* Ajoute un espace entre l’image et le texte */
    }

    /* 🔹 Ajustement des images pour éviter qu'elles soient rognées */
    .partenaires .partenaire .partenaire_logo img {
        width: 100%; /* S'assure que l'image prend toute la largeur disponible */
        height: auto; /* Garde le ratio sans déformation */
        object-fit: contain; /* S'assure que l'image ne soit pas rognée */
        max-height: 200px; /* Évite que l’image devienne trop grande */
    }

    /* 🔹 Réduction de la taille de police pour les titres des partenaires */
    .partenaires .partenaire .partenaire_infos h2 {
        font-size: 2rem; /* Réduit la taille du titre pour s'adapter aux petits écrans */
        text-align: center; /* Centre le texte */
    }

    /* 🔹 Ajustement du texte et des boutons */
    .partenaires .partenaire .partenaire_infos {
        text-align: center; /* Centre le texte */
        width: 100%; /* Prend toute la largeur */
    }

    /* 🔹 Ajustement du conteneur de boutons des partenaires */
    .partenaires .partenaire .partenaire_infos .button-container {
        white-space: normal; /* Permet au texte de passer à la ligne */
    }

    /* Ajustement de la taille des boutons */
    .button-container.btn>a, .button {
        padding: 0.95rem 1.45rem;
    }

    /* Ajustement de la direction des champs d'identité dans le formulaire de contact */
    .contact_form form .form-identity {
        flex-direction: column;
    }
}
/* Media query pour les écrans d'une largeur minimale de 825px */
@media all and (min-width: 825px) {
    /* Style pour la description de la carte lors du survol */
    .card_list .card_item:hover .card_item-content .description {
        max-height: 1000px; /* Augmente la hauteur maximale pour afficher tout le contenu */
        overflow: visible; /* Rend tout le contenu visible */
        animation-name: expandHeight; /* Animation pour agrandir la description */
        animation-duration: 0.5s; /* Durée de l'animation */
        animation-timing-function: ease; /* Fonction de timing pour une animation douce */
    }

    /* Style pour le contenu de la carte lors du survol */
    .card_list .card_item:hover .card_item-content {
        height: unset; /* Retire la contrainte de hauteur */
        position: absolute; /* Positionnement absolu pour s'ancrer en bas de la carte */
        bottom: 0; /* Positionnement en bas de la carte */
        width: 100%; /* Largeur maximale */
        min-height: 80%; /* Hauteur minimale de 80% de la carte */
        padding: 24px 45px 22px; /* Espacement interne */
    }
}

/* Media query pour les écrans d'une largeur maximale de 825px */
@media all and (max-width: 825px) {
    /* Ajustement du padding pour la partie inférieure de l'en-tête */
    header #header-bottom {
        padding: 0.5rem var(--padding_LR);
    }

    /* La partie gauche de l'en-tête occupe toute la largeur */
    header #header-bottom .header-bottom_left {
        width: 100%;
    }

    /* Cache la partie droite de l'en-tête */
    header #header-bottom .header-bottom_right {
        display: none;
    }

    /* Ajustement de la grille pour certaines sections (entreprise, carrosserie, dépannage) */
    section#entreprise, section#carrosserie, section#depannage {
        grid-template-columns: 1fr; /* Une seule colonne pour les petits écrans */
    }

    /* Ajustement de la grille pour la section des marques dans la page des véhicules */
    .page-vehicules section#marques {
        grid-template-columns: 1fr; /* Une seule colonne pour les petits écrans */
    }

    /* Cache le conteneur des types de véhicules */
    .type_vehicule_container {
        display: none;
    }

    /* Centre les éléments dans la section des marques */
    .page-vehicules section#marques {
        justify-content: center;
    }

    /* Ajustement de la direction des éléments dans la liste des types de véhicules */
    .vehicules_list.types_list, .page-vehicules section#marques {
        flex-direction: column; /* Organise les éléments en colonne */
    }

    /* Les éléments de la liste des types de véhicules occupent toute la largeur */
    .vehicules_list .types_item {
        width: 100%; /* Largeur maximale */
    }

    /* Ajustement de la hauteur des éléments de la liste des types de véhicules */
    .vehicules_list .types_item {
        height: 25vh; /* Hauteur fixe pour chaque élément */
    }

    /* Ajustement de la taille de police et de la profondeur des éléments de la liste des types de véhicules */
    .vehicules_list .types_item p {
        font-size: 1.5rem; /* Taille de police réduite */
        z-index: 1; /* Place l'élément au-dessus des autres */
    }

    /* Ajustement de la position et de la hauteur des types de véhicules */
    .page-vehicules .types_item .type_vehicule {
        left: -115px; /* Déplacement vers la gauche */
        max-height: 24vh; /* Hauteur maximale réduite */
    }

    /* Ajustement du padding pour le contenu des cartes */
    .card_list .card_item .card_item-content {
        padding: 3vh 6vw; /* Espacement adapté à la hauteur et à la largeur de l'écran */
    }

    /* Ajustement de la hauteur de l'image de la carte */
    .card_list .card_item .card_item-img {
        height: 35vh; /* Hauteur adaptative pour les petits écrans */
    }

    /* Centrage du texte de la description dans les cartes */
    .card_list .card_item .card_item-content .description {
        text-align: center; /* Centre le texte horizontalement */
    }
}
/* Media query pour les écrans d'une largeur maximale de 765px */
@media all and (max-width: 765px) {
    /* Réduction de la taille de police pour les sous-titres et paragraphes dans l'en-tête */
    header #header-bottom .subtitle, header #header-bottom .paragraph {
        font-size: 1.5rem;
    }

    /* Ajustement de la taille de police pour les informations de l'en-tête et du pied de page */
    header #header-bottom .header-infos .header-info, .footer-info {
        font-size: 16px;
    }

    /* Réduction du padding pour le contenu des sections entreprise, carrosserie, dépannage */
    section#entreprise .entreprise_content, 
    section#carrosserie .entreprise_content, 
    section#depannage .entreprise_content {
        padding: 10px;
    }

    /* Centrage du texte des paragraphes dans les sections entreprise, carrosserie, dépannage */
    section#entreprise .entreprise_content .paragraph, 
    section#carrosserie .entreprise_content .paragraph, 
    section#depannage .entreprise_content .paragraph {
        text-align: center;
    }

    /* Ajustement de l'image des sections entreprise, carrosserie, dépannage */
    section#entreprise .entreprise_img img, section#carrosserie .entreprise_img img, section#depannage .entreprise_img img {
        object-fit: contain; /* Ajuste l'image pour la contenir dans l'espace disponible */
    }

    /* Ajustement de la taille des éléments du carrousel de partenaires */
    section#partenaires .carousselPartenaires .swiper-slide {
        width: 150px; /* Largeur réduite */
        height: 150px; /* Hauteur réduite */
    }

    /* Ajustement du padding pour la section des partenaires */
    section#partenaires {
        padding-top: 6vh;
        padding-bottom: 7vh;
    }

    /* Réduction du padding pour le pied de page */
    footer {
        padding: 1vh;
    }

    /* Organisation du pied de page en colonne */
    footer .footer-infos {
        display: flex;
        flex-direction: column;
        align-items: normal;
    }

    /* Réduction de la taille de police pour le titre avec fond */
    .title-with-background {
        font-size: 3rem; /* Taille réduite pour les tablettes */
    }

    /* Réduction de la taille de police pour les titres dans l'en-tête */
    #layout-header h1.title-with-background, h2.title-with-background {
        font-size: 2.5rem; /* Taille réduite pour les smartphones */
    }

    /* Limitation de la largeur maximale de l'élément picker */
    .picker__holder {
        max-width: 80vw !important; /* Limite la largeur maximale */
    }
}

/* Media query pour les écrans d'une largeur maximale de 325px */
@media all and (max-width: 325px) {
    /* Ajustement de la position et de la hauteur des types de véhicules */
    .page-vehicules .types_item .type_vehicule {
        left: -70px; /* Déplacement vers la gauche */
        max-height: 24vh; /* Hauteur maximale réduite */
    }

    /* Réduction de la taille de police pour le titre avec fond */
    .title-with-background {
        font-size: 2rem; /* Taille réduite pour les smartphones */
    }
}