@import url('https://fonts.googleapis.com/css2?family=Oswald:wght@200..700&family=Quicksand:wght@300..700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Oswald:wght@200..700&display=swap');
/* Mega Menu Styles */
:root {
  --morel-primary: #000000;
  --morel-secondary: #e6007f;
  --morel-secondary-light: rgba(230, 0, 127, 0.5);
  --morel-tertiary: rgba(0, 0, 0, 0.5);
  --morel-light: #ffffff;
  --morel-dark: #333333;
  --morel-gray: #cdcdcd;
  --morel-transition: all 0.3s ease;
  --morel-font-family: 'Oswald', sans-serif;
}

.btn-primary {
  --bs-btn-color: white; 
  --bs-btn-bg: rgba(230, 0, 127, 0.5);
  --bs-btn-border-color: var(--morel-secondary);
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg:var(--morel-secondary);
  --bs-btn-hover-border-color:var(--morel-secondary);
  --bs-btn-focus-shadow-rgb: 49, 132, 253;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: var(--morel-secondary);
  --bs-btn-active-border-color: var(--morel-secondary);
  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
  --bs-btn-disabled-color: #fff;
  --bs-btn-disabled-bg: var(--morel-secondary);
  --bs-btn-disabled-border-color:var(--morel-secondary);
}

/* Utilitaires */

.full-width {
  margin-left: calc(-50vw + 50%) !important;
  margin-right: calc(-50vw + 50%) !important;
}

.sur-titre {
  font-size: 1rem;
  font-weight: 500;
  text-transform: uppercase;
  color: var(--morel-secondary);
  font-family: 'Quicksand', sans-serif;
}

/* Style pour le header */
#masthead {
  background-color: #191919;
  background-image: url(https://motocross.progressionstudios.com/wp-content/themes/motocross-progression/images/page-title.jpg);
  padding-bottom: 0px;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
  min-height: 150px;
  position: relative;
}

/* Style du header quand le slider est présent */
.has-slider #masthead {
  background-color: transparent !important;
  background-image: none !important;
  /* Transition pour un changement en douceur */
  transition: background-color 0.3s ease-in-out;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  width: 100%;
}


h1, h2, h3, h4, h5, h6 {
  font-family: var(--morel-font-family);
  color : var(--morel-dark);
  font-weight: 700;
  text-transform: uppercase;
}

/* Styles pour la barre supérieure */
.top-bar {
  font-size: 0.9rem;
  border-bottom: 1px solid rgba(230, 0, 127, 0.35);
  /*background-color: var(--morel-secondary);*/
  color: #fff;
}

/* Titre principal */
.section-title {
  margin-bottom: 10px;
  color: #000;
  font-weight: 800;
  font-size: 2.5rem;
  text-transform: uppercase;
  letter-spacing: -1px;
  position: relative;
  padding-bottom: 5px;
  display: inline-block;
}

.section-title:after {
  content: '';
  display: block;
  width: 60px;
  height: 4px;
  background-color: var(--morel-secondary);
  margin: 10px 0 0 0;
  position: absolute;
  bottom: 0;
  left: 0;
}

/* Sous-titre */
.section-subtitle {
  font-size: 1.1rem;
  color: #666;
  text-align: left;
}


/* Styles pour les informations de contact */
.contact-info a {
  color: rgba(255, 255, 255, 0.3);
  transition: color 0.3s ease;
}

.contact-info a:hover {
  color: var(--morel-secondary);
}

/* Styles pour les icônes de réseaux sociaux */
.social-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  color: #fff;
  transition: all 0.3s ease;
}

.social-icon:hover {
  background-color: var(--morel-secondary);
  color: #fff;
  transform: translateY(-2px);
}

/* Responsive */
@media (max-width: 767.98px) {
  .contact-info, .social-links {
    text-align: center;
  }
  
  .social-links {
    margin-top: 0.5rem;
  }
}


/* Styles pour les filtres de véhicules */
.vehicle-filters .card-header {
  background-color: #000;
  color: #fff;
}

.vehicle-filters .form-label {
  font-weight: 600;
}

/* Styles pour les cartes de véhicules */
.vehicle-details .price {
  color: var(--morel-secondary);
  font-size: 1.5rem;
  font-weight: 700;
}

.object-fit-cover {
  object-fit: cover;
}

/* Animation de chargement */
@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

#vehicle-results article {
  animation: fadeIn 0.5s ease-in-out;
  border: none;
}

/* Styles pour le menu de filtrage à gauche */
.card-header {
  background-color: #000;
  color: #fff;
}

.form-label {
  font-weight: 600;
  margin-bottom: 0.25rem;
}

/* Styles pour les cartes de véhicules */
.vehicle-details .price {
  color: var(--morel-secondary);
  font-size: 1.5rem;
  font-weight: 700;
}

/* Styles pour les badges */
.badge.bg-secondary {
  background-color: #6c757d !important;
}

.badge.bg-success {
  background-color: #28a745 !important;
}

/* Styles pour les filtres sur mobile */
@media (max-width: 991.98px) {
  .col-lg-3.mb-4 {
    margin-bottom: 1.5rem !important;
  }
}

/* Animation pour les résultats filtrés */
@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

#vehicle-results .col {
  animation: fadeIn 0.5s ease-in-out;
}

/* Style pour le badge A2 */
.badge.bg-info {
    background-color: var(--morel-secondary) !important;
    color: white;
    font-weight: bold;
    font-size: 0.75rem;
    padding: 0.35em 0.65em;
}

/* Animation pour attirer l'attention sur le badge A2 */
@keyframes pulse {
    0% { transform: scale(1); }
    50% { transform: scale(1.1); }
    100% { transform: scale(1); }
}

.badge.bg-info:hover {
    animation: pulse 1s infinite;
    cursor: help;
}

.form-control.bg-light {
  cursor: default;
}

.btn-sm.btn-outline-secondary {
  padding: 0.25rem 0.5rem;
  line-height: 1;
}

/* Styles pour les liens de pagination */

.page-link {
  color: var(--morel-secondary);
  background-color: white;
  border: var(--bs-pagination-border-width) solid var(--morel-secondary);

}


.page-link.active, .active > .page-link {
  background-color: var(--morel-secondary);
  border-color:var(--morel-secondary);
}

.page-link:hover {
  color: var(--morel-secondary);
  background-color: var(--morel-secondary-light);
}

/* Styles pour les informations du véhicule */

.col.details-infos h6 {
  font-size: 1rem;
  font-family: var(--morel-font-family);
  font-weight: 500;
  text-transform: uppercase;
  color: var(--morel-primary);
}

.col.details-infos {
  font-size: 0.9rem;
  font-family: var(--morel-font-family);
  font-weight: 400;
  text-align: center;
  color: var(--morel-tertiary);
}

.infos-occasions .col.details-infos div {
  color: var(--morel-secondary);
}

.col.info-modele, .col.info-kilometrage {
  border-right: 1px solid #0000001a;
}

.card .modele-name {
  font-size: 1.3rem;
  font-family: var(--morel-font-family);
  font-weight: 500;
  text-transform: uppercase;
  color: var(--morel-secondary);
  text-align: center;
}

.card .modele-name span {
  color: var(--morel-dark);
}

.card.occasion .infos-occasions {
  padding: 1rem 0;
  border-top: 1px solid #0000001a;
  margin-top: 1rem;
}

.card.occasion .type-vente {
  font-size: 0.9rem;
  font-family: var(--morel-font-family);
  font-weight: 400;
  text-align: center;
  color: var(--morel-dark);
}

img.img-vehicule {
  padding: 1rem;
}

.vehicle-card {
  border-color: rgba(0, 0, 0, 0.08);
  box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.09);
}

span.badge {
  margin-top: 0.5rem;
}

#bandeau-sous-slider {
  background-color: var(--morel-secondary);
  color: #fff;
}

#bandeau-sous-slider h2 {
  font-size: 2rem;
  font-family: var(--morel-font-family);
  font-weight: 500;
  min-height: 120px;
}



.contact-info p, 
.contact-info div {
    display: flex;
    align-items: flex-start;
}

.contact-info a {
    display: flex;
    align-items: center;
    text-decoration: none;
    color: inherit;
}

.contact-info a:hover {
    color: white;
}

.contact-info a:hover svg {
    stroke: white; 
}


input[type="text"], input[type="email"], input[type="url"], input[type="password"], input[type="search"], input[type="tel"], input[type="number"], textarea, select {
  background-color: #e0e0e0 !important;
  padding: 10px;
  margin: 5px 0px;
  border: none;
  border-radius: 0px;
}



/* Styles pour le formulaire de contact */

.wpcf7-form h4 {
    color: var(--morel-secondary);
    font-weight: bold;
    text-transform: uppercase;
    font-size: 1rem;
    margin-bottom: 10px !important;
}

.wpcf7-list-item {
   margin: 0 !important;
   margin-right: 5px !important;
}

.wpcf7-list-item:hover {
    background-color: #e0e0e0 !important;
}

.wpcf7-form input[type="checkbox"],
.wpcf7-acceptance input[type="checkbox"] {
    width: 17px !important;
    height: 17px !important;
    cursor: pointer;
    accent-color: black;
    margin-right: 5px !important;
}

.wpcf7-acceptance .wpcf7-list-item {
    display: flex;
    align-items: center;
    padding: 20px !important;
    border: 1px solid #e0e0e0 !important;
}

.wpcf7-acceptance .wpcf7-list-item:hover {
    background-color: #dbfbe9 !important;
}


.form-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr); /* Deux colonnes de taille égale */
    gap: 20px; /* Espacement entre les colonnes */
  }
  
  .form-column {
    display: flex;
    flex-direction: column;
    gap: 10px; /* Espacement entre les champs */
  }
  
  /* Pleine largeur pour le message */
  textarea {
    width: 100%;
    min-height: 150px;
  }
  
  /* Responsive : Afficher en une seule colonne sur petits écrans */
  @media (max-width: 768px) {
    .form-grid {
      grid-template-columns: 1fr; /* Une seule colonne sur mobile */
    }
  }

  .prix-vehicule {
    text-align: right;
    font-size: 0.8rem !important;
    margin: 20px 0;
    padding: 15px;
    border-top: 1px solid #c3c3c3;
    border-bottom: 1px solid #c3c3c3;
  }

  .prix-vehicule-montant {
    font-family: var(--morel-font-family);
    font-size: 1.5rem;
    font-weight: 500;
    color: var(--morel-dark);
    margin-bottom: 5px;
  }

  .prix-vehicule-info {
    display: block;
    font-size: 0.75rem;
    color: var(--morel-tertiary);
    font-style: italic;
  }

/* Styles pour la bannière du véhicule - structure simplifiée */
.vehicule-banner {
    height: 50vh; /* 50% de la hauteur de la fenêtre visible */
    min-height: 250px;
    max-height: 400px;
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    position: relative;
    margin-bottom: 1.5rem;
}

.vehicule-banner-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to right, rgba(0, 0, 0, 0.8) 0%, rgba(0, 0, 0, 0.6) 40%, rgba(0, 0, 0, 0.2) 100%);
    border-bottom: 5px solid var(--morel-secondary);
}

.vehicule-banner-content {
    backdrop-filter: blur(5px);
}

.vehicule-banner h1 {
    font-size: 3.5rem;
    font-weight: 700;
    margin-bottom: 1rem;
    text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.7);
    color: white;
}

.vehicule-excerpt {
    font-size: 1.1rem;
    line-height: 1.6;
}

.vehicule-excerpt p {
    margin-bottom: 0;
}

/* Media queries pour la responsivité */
@media (max-width: 767px) {
    .vehicule-banner {
        height: 50vh;
        min-height: 200px;
    }
    
    .vehicule-banner h1 {
        font-size: 1.8rem;
    }
    
    .vehicule-excerpt {
        font-size: 1rem;
    }
    
    .vehicule-banner-overlay {
        background: linear-gradient(to right, rgba(0, 0, 0, 0.8) 0%, rgba(0, 0, 0, 0.7) 70%, rgba(0, 0, 0, 0.5) 100%);
    }
}

/* Styles pour les titres du véhicule */


.vehicule-title {
  font-family: var(--morel-font-family);
  font-size: 2rem;
  font-weight: 700;
  color: var(--morel-dark);
  margin-bottom: 1rem;
  text-transform: uppercase;
}

/* Styles pour les informations complémentaires du véhicule */
.vehicule-info-box {
  margin: 15px 0;
  padding: 10px 15px;
  background-color: rgba(0, 0, 0, 0.03);
  border-left: 3px solid var(--morel-secondary);
}

.vehicule-info-box h4 {
  font-size: 1rem;
  color: var(--morel-dark);
  margin-bottom: 5px;
}

.vehicule-info-box p {
  font-size: 0.9rem;
  margin-bottom: 0;
}

.vehicule-info-label {
  font-weight: 600;
  margin-right: 5px;
}

.vehicule-info-value {
  color: var(--morel-secondary);
  font-size: 1rem;
}

/* Styles pour la grille de détails du véhicule d'occasion */
.vehicule-details-grid {
  margin-bottom: 20px;
}

.vehicule-detail-box {
  background-color: #f9f9f9;
  padding: 10px 5px;
  height: 100%;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
  transition: transform 0.2s ease;
}

.vehicule-detail-box:hover {
  transform: translateY(-3px);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.vehicule-detail-box i {
  color: var(--morel-secondary);
  margin-bottom: 10px;
  font-size: 1.5rem;
}

.vehicule-detail-box h5 {
  font-size: 0.9rem;
  margin-bottom: 5px;
}

.vehicule-detail-value {
  font-size: 1rem;
  font-weight: 600;
  margin-bottom: 0;
  color: black;
  align-self: flex-end;
}

.vehicule-detail-value .badge {
  font-size: 0.85rem;
  padding: 0.4em 0.8em;
}

@media (max-width: 767px) {
  .vehicule-details-col {
    margin-bottom: 15px;
  }
  
  .vehicule-detail-box {
    padding: 12px 8px;
  }
  
  .vehicule-detail-box h5 {
    font-size: 0.85rem;
  }
  
  .vehicule-detail-value {
    font-size: 1rem;
  }
}

/* Styles pour les informations du véhicule d'occasion */
.vehicule-occasion-info {
  background-color: rgba(230, 0, 127, 0.05);
  border-left: 3px solid var(--morel-secondary);
  padding: 10px 15px;
  margin-bottom: 15px;
}

.vehicule-occasion-info h6 {
  font-size: 1rem;
  font-weight: 600;
  margin-bottom: 5px;
  color: var(--morel-dark);
}

.vehicule-type-vente p {
  font-size: 0.9rem;
  margin-bottom: 0;
  color: var(--morel-secondary);
  font-weight: 500;
}

article.article-card h3 a{
    text-decoration: none;
    color: var(--morel-dark);
    font-size: 1.5rem;
}

article.article-card h3 a:hover{
    color: var(--morel-secondary);
}


#bandeau-sous-slider {
  padding: 10px 0;
}

.infos-contact, .infos-contact a {
  font-size: 0.8rem;
  font-weight: 400;
  text-align: center;
  color: white;
  text-decoration: none;
}