/*
=========================================
Styles spécifiques à la page de résultats de recherche (search.php)
Ce fichier contient tous les styles nécessaires pour search.php
et remplace l'inclusion de css2.css sur cette page.
=========================================
*/

/* ========================================= */
/* Styles Généraux / Layout / Sticky Footer  */
/* ========================================= */

/* Assure que le corps utilise Flexbox pour le sticky footer */
html, body {
    height: 100%; /* Important pour que min-height: 100vh fonctionne sur body */
    margin: 0;     /* Annule les marges par défaut du navigateur */
    padding: 0;    /* Annule le padding par défaut du navigateur */
    /*font-family: 'Votre Police Principale', sans-serif; /* Ajoute ta police principale ici si elle n'est pas déjà définie ailleurs */
    /*color: #333; /* Couleur de texte par défaut si non définie ailleurs */
}

body {
    display: flex;
    flex-direction: column;
    min-height: 100vh; /* Le corps prend au moins la hauteur de la vue */
    /* background-color: #fff; /* Couleur de fond par défaut si non définie ailleurs */
}

/* Permet au contenu principal de prendre l'espace restant */
.main {
    flex-grow: 1;
    /* Tu peux ajouter ici un padding-bottom si tu veux un espace garanti entre le dernier élément de main et le footer */
    /* padding-bottom: 40px; */
}

/* Le footer est poussé vers le bas par flex-grow: 1 sur .main */
.footer {
    margin-top: auto; /* S'assure que le footer est en bas si .main ne remplit pas l'écran */
    margin-bottom: 0; /* Très important : empêche l'espace sous le footer */
    /* padding: 20px 0; /* Exemple de padding pour le footer si non défini ailleurs */
    /* background-color: #f8f9fa; /* Exemple de couleur de fond pour le footer */
    /* ... les autres styles de ton footer (qui sont dans inc/footer.php) ... */
}


/* Styles pour le bouton de défilement vers le haut */
#scroll-top {
    position: fixed; /* Essentiel : retire l'élément du flux normal */
    bottom: 20px;    /* Distance du bas de la fenêtre */
    right: 20px;     /* Distance de la droite de la fenêtre */
    z-index: 1000;   /* S'assure qu'il est au-dessus de la plupart des éléments */
    display: none; /* Caché par défaut, affiché par JavaScript */
    /* Ajoutez ici les styles de background, couleur, taille, etc. de ton bouton */
    background-color: var(--theme-color, #dc3545); /* Utilise ta couleur de thème */
    color: white;
    width: 40px;
    height: 40px;
    line-height: 40px;
    text-align: center;
    border-radius: 50%;
    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
    transition: all 0.3s ease;
    cursor: pointer;
}

#scroll-top:hover {
    background-color: #333; /* Couleur au survol */
}


/* Styles spécifiques pour le titre de la section (si non définis ailleurs dans style.css) */
.site-heading .site-title span {
    color: var(--theme-color, #dc3545);
}


/* ========================================= */
/* Styles Section Voitures (Résultats)     */
/* ========================================= */

/* Assurer que les colonnes Bootstrap s'étirent pour contenir les cartes de même hauteur */
.car-area .row > [class*='col-'] {
    display: flex;
    align-items: stretch; /* Fait que les colonnes s'étirent */
    margin-bottom: 30px; /* Espace entre les lignes de cartes */
}

/* Ajustement du padding pour la section des résultats quand le formulaire est en dessous */
/* L'objectif est de réduire le padding supérieur car il n'y a plus le formulaire au-dessus */
.car-area.bg {
    padding-top: 40px !important; /* Réduit le padding supérieur */
    padding-bottom: 80px; /* Ou 120px selon ton design initial pour la section */
}

/* Styles pour centrer les éléments pleine largeur (utilisé pour le message "aucun résultat") */
.full-width-center {
    width: 100%;
    display: flex;
    justify-content: center;
    text-align: center;
}


/* Uniformisation générale des cartes */
.car-item {
    background-color: #fff; /* Fond blanc pour la carte */
    border: 1px solid #eee; /* Bordure légère */
    border-radius: 8px; /* Coins arrondis */
    overflow: hidden; /* Cache tout ce qui dépasse */
    display: flex; /* Utilisation de flex pour la structure interne */
    flex-direction: column; /* Empile les éléments verticalement */
    height: 100%; /* Fait que la carte prend toute la hauteur de sa colonne */
    transition: box-shadow 0.3s ease; /* Effet d'ombre au survol */
}

.car-item:hover {
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1); /* Ombre plus prononcée au survol */
}

/* Section Image */
.car-img {
    position: relative;
    overflow: hidden; /* Cache les parties de l'image qui dépassent */
    height: 230px; /* Hauteur fixe pour toutes les images */
    display: flex; /* Centre l'image */
    align-items: center;
    justify-content: center;
    background-color: #f8f9fa; /* Fond si l'image est transparente ou plus petite */
}

.car-img img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover; /* Couvre la zone sans déformer, rogne si nécessaire */
    object-position: center; /* Centre l'image lors du rognage */
    transition: transform 0.4s ease; /* Zoom doux au survol */
}

.car-item:hover .car-img img {
    transform: scale(1.08); /* Effet de zoom au survol */
}


/* Boutons sur l'image (Favoris, Comparer) */
.car-btns {
    position: absolute;
    top: 15px;
    right: 15px;
    display: flex;
    gap: 8px;
    z-index: 2;
}

.car-btns a {
    background-color: rgba(255, 255, 255, 0.9);
    color: #333;
    width: 35px;
    height: 35px;
    line-height: 35px;
    text-align: center;
    border-radius: 50%;
    font-size: 0.9rem;
    transition: all 0.3s ease;
}

.car-btns a:hover {
    background-color: var(--theme-color, #dc3545);
    color: #fff;
}


/* Contenu de la carte (Titre, Liste, Footer) */
.car-content {
    padding: 20px;
    display: flex; /* Pour aligner le footer en bas */
    flex-direction: column; /* Empile les éléments */
    flex-grow: 1; /* Prend l'espace restant */
}

/* Titre de la voiture */
.car-top h4 {
    margin-bottom: 15px;
    font-size: 1.2rem;
    font-weight: 600;
    /* text-align: center; est déjà dans la classe Bootstrap .text-center */
}
.car-top h4 a {
    color: #333;
    text-decoration: none;
    transition: color 0.3s ease;
}
.car-top h4 a:hover {
    color: var(--theme-color, #dc3545);
}


/* Liste des caractéristiques */
.car-list {
    list-style: none;
    padding: 0;
    margin-bottom: 20px;
    display: grid; /* Affichage en grille pour un alignement propre */
    grid-template-columns: repeat(2, 1fr); /* Deux colonnes */
    gap: 10px 15px; /* Espacement vertical et horizontal */
    font-size: 0.85rem;
    color: #666;
}

.car-list li {
    display: flex;
    align-items: center;
    gap: 8px; /* Espace entre icône et texte */
}

.car-list li i {
    color: var(--theme-color, #dc3545);
    width: 16px; /* Largeur fixe pour l'alignement */
    text-align: center;
}

/* Footer de la carte */
.car-footer {
    margin-top: auto; /* Pousse le footer en bas */
    padding-top: 15px; /* Espace au-dessus du footer */
    border-top: 1px solid #eee; /* Ligne de séparation légère */
}

/* Conteneur pour prix et estimation financement */
.price-finance-container {
    /* Utilise d-flex justify-content-center align-items-center flex-wrap gap-2 mb-2 text-center */
    min-height: 30px; /* Ajustez si nécessaire pour éviter les sauts */
}

/* Style du prix */
.car-price {
    font-size: 1.3rem; /* Taille de police du prix */
    font-weight: 700;
    color: var(--theme-color, #dc3545);
    white-space: nowrap; /* Empêche le prix de passer à la ligne */
}

/* Style du séparateur "ou dès :" */
.finance-separator {
    color: #666;
    font-size: 0.9em;
    white-space: nowrap;
    margin: 0 5px; /* Ajoute un peu d'espace autour du "ou dès :" */
}

/* Style de l'estimation de financement */
.finance-estimate {
    background-color: #e8f0fe; /* Bleu très clair */
    color: #1967d2; /* Bleu foncé pour le texte */
    padding: 6px 12px; /* Padding intérieur ajusté */
    border-radius: 20px; /* Bords très arrondis */
    font-size: 0.8rem; /* Taille de police */
    font-weight: 600; /* Police un peu plus grasse */
    display: inline-flex; /* Pour aligner l'icône/texte correctement */
    align-items: center;
    gap: 4px; /* Espace réduit entre icône/texte/info */
    white-space: nowrap; /* Empêche le texte de passer à la ligne */
    border: 1px solid #d2e3fc; /* Bordure subtile assortie */
    transition: background-color 0.3s ease; /* Transition douce */
}
.finance-estimate:hover {
    background-color: #d2e3fc; /* Légèrement plus foncé au survol */
}

/* Style de l'icône calculatrice */
.finance-calculator-icon {
    color: #f39c12; /* Orange */
    font-size: 1em; /* Ajuster si besoin */
}

/* Style de l'icône d'info 'i' */
.finance-info-icon {
    display: inline-block;
    background-color: #1967d2; /* Bleu foncé assorti au texte */
    color: white; /* Texte blanc */
    font-style: normal; /* Le 'i' ne doit pas être en italique */
    font-weight: bold;
    width: 18px;
    height: 18px;
    line-height: 18px; /* Centre verticalement le 'i' */
    text-align: center;
    border-radius: 50%; /* Cercle parfait */
    font-size: 0.75rem; /* Taille du 'i' */
    cursor: pointer; /* Indique qu'on peut interagir */
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
    transition: transform 0.2s ease;
}
.finance-info-icon:hover {
    transform: scale(1.1); /* Léger grossissement au survol */
}

/* Style pour la popover de financement Bootstrap */
.popover.finance-popover {
    max-width: 320px; /* Largeur maximale */
    border: none;
    border-radius: 8px;
    box-shadow: 0 5px 20px rgba(0,0,0,0.15);
}
.popover.finance-popover .popover-header {
    background-color: #f8f9fa;
    font-size: 1rem;
    font-weight: 600;
    border-bottom: 1px solid #eee;
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;
}
.popover.finance-popover .popover-body {
    font-size: 0.8rem; /* Taille réduite pour le contenu */
    line-height: 1.5;
    padding: 12px 15px;
}
.popover.finance-popover .popover-body strong {
    color: #333;
}
.popover.finance-popover .popover-body hr {
    margin: 0.7rem 0;
}
.popover.finance-popover .popover-body small {
    font-size: 0.7rem;
    color: #6c757d;
    display: block;
    margin-top: 0.8rem;
    line-height: 1.3;
}

/* Variables CSS personnalisées pour le bouton Détails */
/* NOTE: Ces variables devraient idéalement être dans un fichier CSS global */
    :root {
        --cd-btn-primary: #ff6b00; /* Orange */
        --cd-btn-primary-hover: #111111; /* Noir/Gris foncé */
        --cd-btn-text: white;
        --cd-btn-shadow: 0 2px 5px rgba(0,0,0,0.1);
        --cd-btn-shadow-hover: 0 4px 8px rgba(0,0,0,0.15);
        --cd-btn-transition: all 0.3s ease;
        --cd-btn-padding: 12px 20px;
        --cd-btn-radius: 4px;
        --cd-btn-margin-top: 15px;
    }

    /* Style du bouton "Détails" */
    .cd-btn-details {
        display: block;
        width: 100%;
        padding: var(--cd-btn-padding);
        background-color: var(--cd-btn-primary);
        color: var(--cd-btn-text);
        text-align: center;
        font-weight: 600;
        border-radius: var(--cd-btn-radius);
        border: none;
        cursor: pointer;
        transition: var(--cd-btn-transition);
        text-decoration: none;
        margin-top: var(--cd-btn-margin-top);
        box-shadow: var(--cd-btn-shadow);
    }

    .cd-btn-details:hover {
        background-color: var(--cd-btn-primary-hover);
        color: var(--cd-btn-text);
        transform: translateY(-2px);
        box-shadow: var(--cd-btn-shadow-hover);
        text-decoration: none;
    }

    .cd-btn-details:active {
        transform: translateY(0);
        box-shadow: var(--cd-btn-shadow);
    }

    .cd-btn-details .far.fa-eye {
        margin-right: 8px;
    }

    /* Version alternative pour les écrans larges */
    @media (min-width: 992px) {
        .cd-btn-details {
            padding: 14px 24px;
            font-size: 1.05rem;
        }
    }


/* ========================================= */
/* Styles Section Formulaire Recherche       */
/* ========================================= */

/* Styles pour la section du formulaire de recherche (maintenant en bas) */
.find-car {
    background: #f8f9fa; /* Couleur de fond de la section */
    padding: 40px 0; /* Espacement vertical */
    margin-top: 40px; /* Ajoute de l'espace au-dessus du formulaire */
    margin-bottom: 40px; /* Ajoute de l'espace en dessous avant le footer si nécessaire */
}

.find-car .container .row:first-child {
     margin-bottom: 2rem; /* Espace sous le titre et la description du formulaire */
}


/* Styles spécifiques au conteneur du formulaire */
.find-car-form {
    margin-top: 0 !important; /* Annule toute marge supérieure héritée */
    box-shadow: 0 5px 15px rgba(0,0,0,.1); /* Ombre légère */
    padding: 30px; /* Padding intérieur pour espacer les champs */
    border-radius: 8px; /* Coins arrondis */
    background-color: #fff; /* Fond blanc pour le formulaire lui-même */
}

/* Espace entre les groupes de formulaire */
.find-car-form .form-group {
    margin-bottom: 20px;
}

/* Styles pour les labels des champs du formulaire */
.find-car-form label {
    font-weight: 600;
    margin-bottom: 8px;
    display: block; /* Assure que le label est sur sa propre ligne */
    color: #555; /* Couleur de texte légèrement foncée */
    font-size: 0.95rem; /* Ajuster la taille si besoin */
}

/* Assure que les selects personnalisés par nice-select prennent toute la largeur */
.find-car-form .select {
     width: 100%;
}

/* Styles pour le titre de la section du formulaire déplacé */
.find-car .container .row:first-child h3 {
    margin-bottom: 10px;
    color: #333;
    font-size: 2rem; /* Ajuster la taille pour qu'elle corresponde aux autres titres de section */
    font-weight: 700;
}
.find-car .container .row:first-child p {
     color: #666;
     font-size: 1.1rem;
     /* margin-bottom: 20px; est déjà géré par le margin-bottom du row */
}


/* ========================================= */
/* Responsive Adjustments                    */
/* ========================================= */

@media (max-width: 991px) {
    .find-car .container .row:first-child h3 {
         font-size: 1.8rem;
    }
     .find-car .container .row:first-child p {
         font-size: 1rem;
     }
     .find-car-form {
         padding: 20px;
     }
     .find-car .container .row:first-child {
          margin-bottom: 1.5rem;
     }
}
@media (max-width: 767px) {
    .car-list {
        grid-template-columns: 1fr; /* Une seule colonne sur mobile */
        gap: 8px;
    }
    .price-finance-container {
        flex-direction: column; /* Empile le prix et le financement sur mobile */
        align-items: center; /* Centre les éléments empilés */
        gap: 5px;
    }
    .car-price {
        font-size: 1.2rem;
    }
    .car-img {
        height: 200px;
    }
    .finance-separator {
        margin: 0; /* Supprime la marge sur mobile car ils sont empilés */
    }


    .find-car {
         padding: 30px 0;
    }
    .find-car-form {
         padding: 15px;
    }
     .find-car-form .form-group {
         margin-bottom: 15px;
     }
     .find-car .container .row:first-child h3 {
         font-size: 1.5rem;
     }
      .find-car .container .row:first-child p {
         font-size: 0.9rem;
     }
     .find-car .container .row:first-child {
          margin-bottom: 1rem;
     }
     .car-area.bg {
         padding-top: 30px !important; /* Ajustement mobile */
     }
}

/* Ajustement potentiel si le prix + séparateur + estimation est trop large sur très petit écran */
@media (max-width: 400px) {
    .price-finance-container {
        flex-direction: column; /* Force l'empilement sur très petits écrans */
        gap: 5px; /* Réduire le gap vertical */
    }
    /* .finance-separator { display: none !important; } /* Optionnel: Masquer sur très petit écran ? */
}

/* Version alternative pour les écrans larges pour le bouton Détails */
    @media (min-width: 992px) {
        .cd-btn-details {
            padding: 14px 24px;
            font-size: 1.05rem;
        }
    }