/**
Theme Name: Astra Child
Author: Lucas FARENC
Template: astra
*/


/* Pour avoir le texte noir sur le descriptif unitaire des annonces*/
.iwp__card-body,
.iwp__card-body ul,
.iwp__card-body li {
    color: #000 !important;
}
.iwp__card-body ul {
    list-style-type: disc !important;
    padding-left: 20px !important;
}

/* Garder un fond blanc sur la page de véhicule sélectionné */
.ast-separate-container{
	background-color: #fff !important;
}

/* On crée une classe réutilisable qui reste liée à Astra - fond jaune & blanc*/
.fond-jaune {
    background-color: var(--ast-global-color-4) !important;
}

.fond-blanc {
    background-color: var(--ast-global-color-3) !important;
}

/* Bug Logo SVG sur mobile */
@media (max-width: 544px) {
    .site-branding .ast-logo-svg-icon svg {
        width: 150px;
    }
}

/* Réduction padding logo */
.ast-site-identity {
    padding: 0em 0 !important;
}

/* Les flèches sur les listings des voitures ne sont pas au bon endroit */
.swiper-button-next, .swiper-button-prev {
    top: 55% !important;
}

/* Le padding est trop important sur les nouvelles pépites en hauteur, on le réduit */
.iwp__property {
    padding: 10px 20px !important;
}

/* Réduction du padding du footer */
.site-below-footer-wrap[data-section="section-below-footer-builder"] {
    padding-top: 12px!important;
    padding-bottom: 12px!important;
}
/* Supprime l'espace entre le menu et le copyright */
.site-footer-below-section-1 > .site-footer-focus-item {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}

/* Supprime la marge par défaut du texte du copyright */
.ast-footer-copyright p {
    margin-bottom: 0 !important;
}

/* On gère les mobiles */
@media (max-width: 921px) {

    /* 1. DÉSEMPILER LE MENU (Horizontal) */
    .site-below-footer-wrap .footer-nav-wrap ul {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: wrap !important;
        justify-content: center !important;
        gap: 8px !important; /* Espace horizontal entre les liens */
        margin-bottom: 0 !important;
        padding-left: 0 !important;
        list-style: none !important;
    }

    /* 2. RÉDUIRE LA POLICE & PADDING DES LIENS (Ton code conservé) */
    .site-below-footer-wrap .footer-nav-wrap ul li a {
        padding-top: 2px !important;    /* Ajusté pour le mode horizontal */
        padding-bottom: 2px !important;
        line-height: 1.2 !important;
        font-size: 11px !important;     /* Ta valeur souhaitée */
        display: inline-block !important;
    }

    /* 3. RÉDUIRE LE BLOC ENTIER (Ton code conservé) */
    .site-below-footer-wrap[data-section="section-below-footer-builder"] {
        padding-top: 5px !important;
        padding-bottom: 5px !important;
    }

    /* 4. SUPPRIMER LES ÉCARTS DE GRILLE (Ton code conservé) */
    .site-below-footer-wrap .ast-builder-grid-row {
        gap: 0 !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
    }

    /* 5. ÉLIMINER L'ESPACE ENTRE MENU ET COPYRIGHT (Ton code conservé) */
    .site-footer-below-section-1 > .site-footer-focus-item {
        margin-bottom: 0 !important;
        padding-bottom: 0 !important;
        margin-top: 0 !important;
    }

    /* 6. POLICE DU COPYRIGHT (Ta valeur souhaitée) */
    .ast-footer-copyright, .ast-footer-copyright p {
        font-size: 9px !important;
        margin: 0 !important;
    }
}

/* Page de listing des véhicules */
/* 1. Structure du formulaire en grille flexible */
.iwp__searchbar-aside form {
    display: flex;
    flex-wrap: wrap; /* Permet de passer à la ligne suivante */
    gap: 10px;
    width: 100%;
}

/* 2. Les 6 champs du haut : ils occupent chacun une part égale sur la première ligne */
/* On calcule environ 16% pour en mettre 6 par ligne (100/6) */
.iwp__searchbar-aside__group:not(.aside-group-btn) {
    flex: 1 1 calc(16% - 10px); 
    min-width: 120px; /* Sécurité pour ne pas qu'ils soient trop écrasés */
    margin-bottom: 0 !important;
}

/* 3. La ligne de la coche Utilitaire : on la force à prendre 100% pour être seule */
.iwp__searchbar-aside form > div:nth-last-child(2) {
    flex: 0 0 100%;
    margin-top: 5px;
}

/* 4. Le bouton Filtrer : pleine largeur tout en bas */
.aside-group-btn {
    flex: 0 0 100% !important;
    margin-top: 10px;
}

/* 5. Style du bouton Filtrer (Correction typo et espacement) */
.aside-group-btn button[type="submit"] {
    width: 100% !important;
    background-color: var(--ast-global-color-0) !important;
    color: #000 !important;
    padding: 12px !important;
    border: none !important;
    border-radius: 4px !important;
    text-transform: none; /* Plus élégant qu'en MAJUSCULES si tu préfères */
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 12px; /* Espace entre la loupe et le texte */
    cursor: pointer;
    transition: all 0.3s ease;
}

/* 6. Unification des champs (Selects, Inputs et Label Utilitaire) */
.iwp__searchbar-aside select, 
.iwp__searchbar-aside input[type="text"], 
label[for="vehiculeUtilitaire"] {
    width: 100% !important;
    padding: 10px 15px !important;
    border: 1px solid #ddd !important;
    border-radius: 4px !important;
    background-color: #fff !important;
    font-size: 14px !important;
    box-sizing: border-box !important;
}

/* Cacher la checkbox native */
#vehiculeUtilitaire {
    display: none;
}

/* Style de la coche Utilitaire active */
#vehiculeUtilitaire:checked + label {
    background-color: #000 !important;
    color: var(--ast-global-color-0) !important;
    border-color: #000 !important;
}

/* Mobile : On empile tout proprement */
@media (max-width: 921px) {
    .iwp__searchbar-aside__group:not(.aside-group-btn) {
        flex: 1 1 45%; /* 2 par ligne sur tablette */
    }
}
@media (max-width: 600px) {
    .iwp__searchbar-aside__group:not(.aside-group-btn) {
        flex: 1 1 100%; /* 1 par ligne sur mobile */
    }
}

/* Style de base du bouton */
.aside-group-btn button[type="submit"] {
    background-color: var(--ast-global-color-0) !important;
    color: #000 !important;
    border: none !important;
    transition: all 0.3s ease-in-out !important; /* L'animation est ici */
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
}

/* L'effet au survol (Hover) */
.aside-group-btn button[type="submit"]:hover {
    background-color: #000 !important; /* Devient noir */
    color: var(--ast-global-color-0) !important; /* Le texte devient jaune */
    transform: scale(1.05); /* Petit effet de zoom très léger */
    cursor: pointer;
}

.aside-group-btn button[type="submit"] {
    /* Augmenter un peu la taille et l'espacement */
    font-size: 15px !important; 
    letter-spacing: 0.3px !important;
    line-height: 1.2 !important;
    
    /* Forcer le texte à ne pas revenir à la ligne si possible */
    white-space: nowrap !important;
    
    /* Un gras intermédiaire pour la netteté */
    font-weight: 400 !important; 
}

/* Animations sur listing des véhicules */
/* 1. On prépare la carte pour gérer les niveaux de profondeur */
.iwp__item {
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
    overflow: hidden;
    border: 1px solid #eee;
    border-radius: 8px;
    background: #fff;
    position: relative; /* Indispensable pour le z-index */
}

/* 2. L'effet au survol */
.iwp__item:hover {
    transform: translateY(-15px) scale(1.03);
    box-shadow: 0 20px 35px rgba(0,0,0,0.25) !important;
    border-color: var(--ast-global-color-0) !important;
    z-index: 99; /* On s'assure que la carte entière passe devant tout le reste */
}

/* 3. FIX DU BANDEAU : On force le contenu à rester au-dessus de l'image zoomée */
.iwp__item-content {
    position: relative;
    z-index: 2; /* Passe au-dessus du bloc image */
    background: #fff; /* Évite la transparence si l'image dépasse derrière */
}

.iwp__item-overview {
    position: relative;
    z-index: 3; /* Le bandeau (Km, Année) passe encore au-dessus */
}

/* 4. Zoom de l'image (en fond) */
.iwp__item-image {
    overflow: hidden; /* Coupe l'image qui dépasse */
    z-index: 1;
}

.iwp__item-image img {
    transition: transform 0.6s ease-in-out !important;
    display: block;
}

.iwp__item:hover .iwp__item-image img {
    transform: scale(1.15);
}

/* 5. Effet sur le prix */
.iwp__item:hover .price {
    color: var(--ast-global-color-0) !important;
    transform: scale(1.05);
    display: inline-block;
    transition: all 0.3s ease;
}

/* Masquer le bandeau de tri et nombre de résultats sur mobile */
@media (max-width: 921px) {
    .iwp__property-listing__header {
        display: none !important;
    }
}

/* --- Animations de la Galerie Photo --- */

/* 1. Conteneur de chaque image */
.iwp__header-gallery .figure-item {
    overflow: hidden; /* Important pour que le zoom ne sorte pas du cadre */
    border-radius: 4px; /* Optionnel : arrondir légèrement les coins */
    transition: transform 0.3s ease;
    cursor: pointer;
}

/* 2. L'image elle-même */
.iwp__header-gallery .figure-item img {
    transition: all 0.5s cubic-bezier(0.25, 0.8, 0.25, 1) !important;
    display: block;
    width: 100%;
    height: auto;
}

/* --- Effet au survol de la Galerie (Bordure Jaune + Zoom) --- */

/* 1. Préparation du conteneur pour la bordure */
.iwp__header-gallery .figure-item {
    position: relative;
    overflow: hidden; /* Important pour que le zoom de l'image ne dépasse pas */
    border: 3px solid transparent; /* On réserve l'espace de la bordure */
    transition: all 0.3s ease-in-out;
    border-radius: 8px; /* Optionnel : pour des coins arrondis comme tes cartes */
}

/* 2. L'image à l'intérieur */
.iwp__header-gallery .figure-item img {
    transition: all 0.4s ease-in-out;
    display: block;
}

/* 3. L'effet au survol COMBINÉ */
.iwp__header-gallery .figure-item:hover {
    border-color: var(--ast-global-color-0); /* Ton jaune Astra */
    box-shadow: 0 10px 20px rgba(0,0,0,0.15); /* Ajoute de la profondeur */
}

.iwp__header-gallery .figure-item:hover img {
    transform: scale(1.1); /* Ton zoom actuel */
    filter: brightness(1.1); /* Ta luminosité actuelle */
}

/* 4. Cas particulier : Le bouton "+XX" sur la dernière image */
.iwp__header-gallery .figure-item .hover_grid {
    transition: all 0.3s ease;
    z-index: 2;
}

.iwp__header-gallery .figure-item:hover .hover_grid {
    background-color: var(--ast-global-color-0) !important; /* Devient jaune (couleur thème) au survol */
    transform: scale(1.1);
    color: #000; /* Assure la lisibilité du texte */
}

/* On agrandit le compteur de photos de la gallerie*/
.pswp__counter {
    height: 60px !important;
    font-size: 30px !important;
}

/* --- Style du Prix --- */

.iwp__header-title__price {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: #ffffff;
    padding: 10px 35px;
    border-radius: 100px;
    /* On met une bordure grise très claire par défaut */
    border: 2px solid #f0f0f0; 
	border-color: var(--ast-global-color-0); 
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    min-width: 220px;
    cursor: default;
}

.iwp_price {
    font-size: 1.8rem;
    font-weight: 800;
    color: #000000; /* Noir par défaut */
    white-space: nowrap;
    line-height: 1.1;
    display: block;
    /* Transition fluide pour le changement de couleur */
    transition: color 0.3s ease; 
}

/* La mention TVA récupérable (Reste grise) */
.iwp__header-title__price::after {
    display: block;
    font-size: 10px;
    color: #888;
    text-transform: uppercase;
    font-weight: 600;
    margin-top: 2px;
    letter-spacing: 0.5px;
    white-space: nowrap;
}

/* --- EFFET HOVER --- */

.iwp__header-title__price:hover {
    transform: translateY(-5px) scale(1.03);
    /* La bordure devient jaune */
    border-color: var(--ast-global-color-1); 
    box-shadow: 0 12px 25px rgba(0, 0, 0, 0.1) !important;
}

/* Quand on survole le bloc, le prix à l'intérieur passe en jaune */
.iwp__header-title__price:hover .iwp_price {
    color: var(--ast-global-color-0);
}



/* Bloc résumé : on arrange le style */

.iwp__overview-list {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 30px 20px !important;
    padding: 0 !important;
    list-style: none !important;
}

/* On verrouille les 3 colonnes extérieures */
.iwp__overview-list li {
    flex: 0 0 calc(33.333% - 20px) !important;
    width: calc(33.333% - 20px) !important;
    min-width: 130px !important;
    max-width: calc(33.333% - 20px) !important;
    margin-bottom: 5px !important;
    list-style-type: none !important;
}

/* On casse tout alignement horizontal interne */
.iwp__media-body, 
.iwp__media-body span, 
.iwp__media-body span span {
    display: block !important; /* Force le retour à la ligne automatique */
    width: 100% !important;
    float: none !important;
    text-align: left !important;
}

/* Style des Libellés (Titre) */
.iwp__media-body span {
    font-size: 10px !important;
    color: #888 !important;
    text-transform: uppercase !important;
    font-weight: 700 !important;
    line-height: 1.4 !important;
}

/* Icône : on la garde en ligne avec le titre uniquement */
.iwp__media-body i {
    color: #e2b11d !important;
    margin-right: 5px !important;
    display: inline-block !important;
    vertical-align: middle !important;
}

/* Style des Valeurs (Le texte en gras) */
.iwp__media-body strong {
    display: block !important; /* FORCE le passage sous le titre */
    clear: both !important;   /* Sécurité anti-flottement */
    font-size: 13px !important;
    color: #000 !important;
    font-weight: 800 !important;
    margin-top: 5px !important; /* Espace entre titre et valeur */
    padding-left: 0 !important; /* On repart de la gauche pour gagner de la place */
    line-height: 1.2 !important;
}

/* Correction spécifique pour éviter les mots coupés */
.iwp__media-body strong {
    white-space: normal !important;
    word-break: break-word !important;
}

/* --- Finalisation : Style du Titre Résumé --- */

.iwp__overview-list-title, 
.iwp__overview-title,
.iwp__overview-container h3 {
    background-color: #fef7e2 !important; /* Le jaune clair */
    color: #000 !important;
    font-size: 20px !important;
    font-weight: 700 !important;
    padding: 12px 20px !important;
    margin: 0 0 25px 0 !important; /* Espace sous le titre pour aérer la grille */
    border-radius: 4px !important;
    display: block !important;
    width: 100% !important;
    text-align: left !important;
    border-left: 5px solid #e2b11d !important; /* Petite barre jaune foncée à gauche pour le style */
}

/* --- Style du Titre Résumé (Header) --- */

.iwp__card-header.fond-jaune {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important; /* Centre verticalement le titre et la flèche */
    justify-content: space-between !important; /* Pousse la flèche tout à droite */
    background-color: #fef7e2 !important;
    padding: 10px 20px !important;
    margin-bottom: 5px !important;
    border-radius: 5px !important;
    border-left: 5px solid #e2b11d !important;
    width: 100% !important;
    cursor: pointer; /* Indique que c'est cliquable */
}

/* On s'assure que le titre ne prend pas toute la place */
.iwp__card-header.fond-jaune h2 {
    margin: 0 !important;
    padding: 0 !important;
    font-size: 20px !important;
    font-weight: 700 !important;
    color: #000 !important;
    flex-grow: 1 !important; /* Prend l'espace disponible à gauche */
}

/* Style de la flèche SVG */
.iwp__card-header.fond-jaune .toggle-icon {
    margin-left: 15px !important;
    fill: #000 !important; /* Couleur de la flèche */
    transition: transform 0.3s ease !important; /* Animation fluide si elle tourne */
}

/* --- Style Équipements : Ciblage par classe personnalisée --- */

/* On cible uniquement le bloc qui a la nouvelle classe 'bloc-equipements' */
.bloc-equipements .iwp__card-body ul {
    list-style: none !important;
    padding: 5px !important;
    margin: 0 !important;
}

/* Cache le message par défaut dès que le bloc n'a plus la classe "iwp__close" */
.iwp__block:not(.iwp__close) .info-repli {
    display: none !important;
}

/* Par précaution, si ton plugin ajoute "iwp__open" quand on clique */
.iwp__block.iwp__open .info-repli {
    display: none !important;
}

 
.info-repli {
    margin-left: auto !important; /* Pousse tout ce qui suit vers la droite */
    font-size: 13px;
    font-style: italic;
    color: #666;
    white-space: nowrap !important; /* Garde le message sur une ligne */
}

/* --- OPTIMISATION MOBILE --- */
@media screen and (max-width: 768px) {
    .info-repli {
        grid-area: info;
        margin-left: 0 !important; /* On annule le poussage à droite */
        white-space: normal !important; /* Autorise le texte à aller sur 2 lignes si besoin */
        font-size: 12px;
        line-height: 1.2;
    }
}

.bloc-equipements .iwp__card-body ul li:first-child {
    display: block !important;
    column-count: 2 !important; 
    column-gap: 40px !important;
    column-rule: 2px solid #fef7e2 !important; /* Ligne entre les colonnes */
    
    font-size: 13px !important;
    line-height: 2.2 !important; 
    color: #444 !important;
    padding: 0 !important;
    
    border-left: 2px solid #fef7e2 !important; /* Ligne à gauche de la 1ère colonne */
    padding-left: 15px !important;
}

/* L'avertissement en bas */
.bloc-equipements .iwp__card-body ul li:last-child {
    display: block !important;
    column-span: all !important;
    margin-top: 30px !important;
    padding: 15px !important;
    background-color: #f9f9f9 !important;
    border-radius: 4px !important;
    font-size: 12px !important;
    color: #888 !important;
    border-left: none !important;
}

/* --- Adaptabilité Mobile --- */
@media (max-width: 768px) {
    .bloc-equipements .iwp__card-body ul li:first-child {
        column-count: 1 !important;
        column-rule: none !important;
    }
}

/* Formulaire de contact, on se plie aux couleurs */
/* Personnalisation Fluent Forms Doriat Autos */

/* Style des champs de saisie */
.fluentform .ff-el-form-control {
    border: 1px solid #ddd !important;
    border-radius: 4px !important;
    padding: 12px !important;
    background-color: #fff !important;
}

/* Couleur jaune quand on clique dans un champ */
.fluentform .ff-el-form-control:focus {
    border-color: var(--ast-global-color-0) !important;
    box-shadow: 0 0 0 2px rgba(226, 177, 29, 0.2) !important;
}

/* Le bouton ENVOYER */
.fluentform .ff-btn-submit {
    background-color: var(--ast-global-color-0) !important;
    color: #000 !important;
    width: 100% !important;
    border: none !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 1px !important;
    padding: 15px !important;
    border-radius: 4px !important;
    transition: all 0.3s ease !important;
}

/* Effet au survol du bouton */
.fluentform .ff-btn-submit:hover {
    background-color: #000 !important;
    color: #fff !important;
    cursor: pointer !important;
}

/* Style de la case à cocher RGPD */
.fluentform .ff-el-check-label {
    font-size: 13px !important;
    color: #666 !important;
}

/* Supprimer les flèches (spinners) sur les champs numéro */

/* Pour Chrome, Safari, Edge et Opera */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* Pour Firefox */
input[type=number] {
  -moz-appearance: textfield;
}

/* CSS pour popup plugins cookies */

/* Cache l'onglet de gestion des cookies de Complianz */
#cmplz-manage-consent .cmplz-manage-consent {
    display: none !important;
}
.reouvrir-cookies {
    position: fixed;
    bottom: 20px;
    left: 20px;
    background-color: #e2b11d !important; /* Ton doré */
    color: #ffffff;
    border: none;
    padding: 8px 12px;
    border-radius: 5px;
    font-size: 10px;
    cursor: pointer;
    z-index: 9999;
    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
}


/* Séparateur contact pour prise de rdv sur véhicule */
.separateur-contact {
    display: flex;
    align-items: center;
    text-align: center;
    margin: 10px 0;
    color: #000;
    font-size: 0.8em;
    font-weight: bold;
    letter-spacing: 1px;
}

.separateur-contact::before,
.separateur-contact::after {
    content: '';
    flex: 1;
    border-bottom: 1px solid #eee;
}

.separateur-contact:not(:empty)::before {
    margin-right: .5em;
}

.separateur-contact:not(:empty)::after {
    margin-left: .5em;
}

/* On met un petit message sur la section des équipements */
/* 1. RÉDUCTION GLOBALE DU FORMULAIRE #4 */
#fluentform_4 .ff-el-input--label label {
    font-size: 13px !important;
    margin-bottom: 3px !important;
}

#fluentform_4 .ff-el-form-control {
    padding: 8px 12px !important;
    font-size: 14px !important;
    min-height: auto !important;
}

#fluentform_4 textarea.ff-el-form-control {
    height: 80px !important;
    min-height: 80px !important;
}

#fluentform_4 .ff-el-group {
    margin-bottom: 8px !important;
}

/* 2. ALIGNEMENT PRÉCIS DE LA COCHE ET DU TEXTE RGPD */
#fluentform_4 .ff-el-tc {
    margin-top: 5px !important;
    padding: 0 !important;
}

#fluentform_4 .ff-el-form-check-label.ff_tc_label {
    display: flex !important;
    align-items: flex-start !important; /* Alignement sur le haut pour le texte multi-ligne */
    gap: 10px !important;
    line-height: 1.3 !important;
}

#fluentform_4 .ff_t_c p {
    font-size: 12px !important;
    margin: 0 !important;
    padding: 0 !important;
    display: inline !important;
}

#fluentform_4 .ff_tc_checkbox {
    display: flex !important;
    align-items: center !important;
    margin-top: 2px !important; /* Ajustement vertical pour centrer sur la 1ère ligne */
}

#fluentform_4 input[type="checkbox"].ff-el-form-check-input {
    margin: 0 !important;
    width: 16px !important;
    height: 16px !important;
    cursor: pointer !important;
}

/* 3. BOUTON ENVOYER */
#fluentform_4 .ff-btn-submit {
    padding: 10px 20px !important;
    font-size: 15px !important;
    margin-top: 10px !important;
    width: 100% !important;
}

/* Fenetre modale hors spectra */
/* Design du bouton */
.bouton-contact-trigger {
    background-color: #ffcc00; /* Ton jaune */
    color: #000;
    padding: 12px 25px;
    border-radius: 5px;
    text-decoration: none;
    font-weight: bold;
    display: inline-flex;
    align-items: center;
    gap: 10px;
}

/* Masquage de la modale par défaut */
.modal-overlay {
    position: fixed;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background: rgba(0,0,0,0.7);
    display: none; /* Caché */
    justify-content: center;
    align-items: center;
    z-index: 9999;
}

/* Affichage de la modale quand on clique */
.modal-overlay:target {
    display: flex;
}

/* Fenêtre blanche */
.modal-content {
    background: #fff;
    padding: 30px;
    border-radius: 15px;
    width: 90%;
    max-width: 500px;
    position: relative;
    box-shadow: 0 10px 25px rgba(0,0,0,0.2);
}

/* Bouton fermer */
.modal-close {
    position: absolute;
    top: 10px; right: 15px;
    font-size: 28px;
    text-decoration: none;
    color: #333;
}

/* Header de la modale */
.modal-header {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 20px;
}
.modal-header h3 { margin: 0; font-size: 20px; }

/* --- OPTIMISATION MOBILE --- */
@media screen and (max-width: 768px) {
    /* 1. On donne plus de place à la fenêtre */
    .modal-content {
        width: 95% !important;
        padding: 20px 15px !important; /* Moins de vide sur les côtés */
        max-height: 90vh; /* On évite qu'elle sorte de l'écran */
        overflow-y: auto; /* On permet de scroller à l'intérieur de la modale si besoin */
        border-radius: 10px !important;
    }

    /* 2. On réduit la taille du titre pour qu'il tienne sur une ligne */
    .modal-header h3 {
        font-size: 16px !important;
    }

    .modal-header svg {
        width: 24px !important;
    }

    /* 3. On force les champs Prénom / Nom à passer l'un sous l'autre */
    #fluentform_4 .ff-t-container {
        display: block !important;
    }

    #fluentform_4 .ff-t-cell {
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        margin-bottom: 10px !important;
    }

    /* 4. On s'assure que le texte RGPD reste lisible mais compact */
    #fluentform_4 .ff_t_c p {
        font-size: 11px !important;
    }
}
/* Blocs gris sur la page de détail du véhicule */
.bloc-gris {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    background-color: #fcfcfc !important; /* Un gris plus clair, plus moderne */
    padding: 25px 20px !important; 
    border-radius: 8px !important; /* Arrondis plus doux */
    border: 1px solid #eee !important; /* Bordure fine et solide */
    border-left: 5px solid #e2b11d !important; /* Barre d'accentuation à gauche */
    line-height: 1.5;
    width: 100%;
    box-sizing: border-box !important;
    margin-bottom: 25px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.03); /* Légère ombre pour le relief */
}

/* Texte grand - Le titre */
.bloc-gris .bloc-gris-grand {
    color: #1a1a1a !important;
    font-size: 16px !important;
    font-weight: 700 !important; /* On met l'accent sur l'info principale */
    display: block !important;
    width: 100%;
}

.bloc-gris .bloc-gris-grand small {
    font-size: 14px !important;
    font-weight: 400 !important;
    display: block;
    margin-top: 4px;
    color: #666;
}

/* Texte petit - La recommandation */
.bloc-gris .bloc-gris-petit {
    color: #555;
    font-size: 14px !important;
    display: block !important;
    font-style: normal !important; /* On enlève l'italique pour la lisibilité */
    margin: 15px 0 !important;
    width: 100%;
    border-top: 1px solid #eee; /* Petite séparation subtile */
    padding-top: 10px;
}

/* Boutons de contact sur page détail annonce */
/* Conteneur des boutons */
.groupe-boutons-contact {
    display: flex;
    gap: 10px;
    flex-wrap: wrap; /* Pour le mobile */
    margin-top: 15px;
}

/* Style commun aux boutons */
.btn-contact {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 12px 20px;
    border-radius: 6px;
    text-decoration: none !important;
    font-weight: 700;
    font-size: 14px;
    transition: all 0.3s ease;
    flex: 1; /* Les boutons prennent la même largeur */
    min-width: 200px;
}

/* Style spécifique Téléphone (Bordure) */
.btn-telephone {
    border: 2px solid #e2b11d;
    color: #e2b11d !important;
    background: transparent;
}

.btn-telephone:hover {
    background: #fdf8e6;
}

/* Style spécifique Message (Plein Jaune) */
.btn-message {
    background-color: #e2b11d;
    color: #000 !important;
}

.btn-message:hover {
    background-color: #c99a16;
}

/* Taille des icônes SVG */
.btn-contact svg {
    width: 16px;
    height: 16px;
    fill: currentColor; /* L'icône prend la couleur du texte */
}