:root {
    --dark: #000000;
    --light: #ffffff;
    --primary: #4169E1;
}

body {
    font-family: "helveticaneuew01-65medi", helveticaneuew02-65medi, helveticaneuew10-65medi, sans-serif;
    background-color: var(--dark);
    color: var(--light);
    margin: 0;
    padding: 0;
    overflow-x: hidden;
    min-width: 980px;
}

/* Hero Section */
/* Remplacer la partie du hero-section dans le CSS */
.hero-section {
min-height: 100vh;
background: radial-gradient(circle at 72.02% 93.4%, #000000 0%, 17.5%, rgba(0, 0, 0, 0) 35%),
        radial-gradient(circle at 32.2% 95.77%, #000000 0%, 17.5%, rgba(0, 0, 0, 0) 35%),
        radial-gradient(circle at 40.7% 60.52%, rgba(13, 50, 230, 0.16) 0%, 17.5%, rgba(13, 50, 230, 0) 35%),
        radial-gradient(circle at 60.21% 67.78%, rgba(96, 17, 94, 0.15) 0%, 17.5%, rgba(96, 17, 94, 0) 35%),
        radial-gradient(circle at 52.03% 0%, #000000 0%, 17.5%, rgba(0, 0, 0, 0) 35%),
        radial-gradient(circle at 51.25% 97.88%, #000000 0%, 17.5%, rgba(0, 0, 0, 0) 35%),
        radial-gradient(circle at 72.72% 100%, #000000 0%, 17.5%, rgba(0, 0, 0, 0) 35%),
        radial-gradient(circle at 97.85% 98.14%, #000000 0%, 17.5%, rgba(0, 0, 0, 0) 35%),
        radial-gradient(circle at 68.41% 6.31%, #000000 0%, 17.5%, rgba(0, 0, 0, 0) 35%),
        radial-gradient(circle at 34.03% 95.79%, #000000 0%, 17.5%, rgba(0, 0, 0, 0) 35%),
        radial-gradient(circle at 95.2% 53.64%, #000000 0%, 17.5%, rgba(0, 0, 0, 0) 35%),
        radial-gradient(circle at 55.81% 71.83%, rgba(96, 17, 94, 0.81) 0%, 25%, rgba(96, 17, 94, 0) 50%),
        radial-gradient(circle at 3.85% 93.32%, #000000 0%, 17.5%, rgba(0, 0, 0, 0) 35%),
        radial-gradient(circle at 29.57% 8.08%, #000000 0%, 27.5%, rgba(0, 0, 0, 0) 55%),
        radial-gradient(circle at 37.01% 68.47%, rgba(13, 50, 230, 0.81) 0%, 25%, rgba(13, 50, 230, 0) 50%),
        radial-gradient(circle at 1.13% 5.89%, #000000 0%, 43%, rgba(0, 0, 0, 0) 86%),
        radial-gradient(circle at 0.83% 55.21%, rgba(0, 0, 0, 0.99) 0%, 35.5%, rgba(0, 0, 0, 0) 71%),
        radial-gradient(circle at 97.95% 8.18%, #000000 0%, 42%, rgba(0, 0, 0, 0) 70%),
        radial-gradient(circle at 48.9% 49.52%, #FF4040 0%, 100%, rgba(255, 64, 64, 0) 100%);
position: relative;
overflow: hidden;
--bg-overlay-color: transparent;
}

.container {
    max-width: 1440px;
    padding: 0 80px;
}

.hero-content {
    padding-top: 120px;
    text-align: center;
}

.hero-title {
    font-size: 2rem;
    font-weight: 500;
    margin-bottom: 1rem;
    opacity: 0;
    transform: translateY(-20px);
    transition: all 0.8s ease-out;
}

.hero-title.visible {
    opacity: 1;
    transform: translateY(0);
}

.hero-subtitle {
    font-size: 4.5rem;
    font-weight: 500;
    margin-bottom: 3rem;
    line-height: 1.2;
    opacity: 0;
    transform: translateY(20px);
    transition: all 0.8s ease-out;
}

.hero-subtitle.visible {
    opacity: 1;
    transform: translateY(0);
}

.hero-cars {
    width: 100%;
    max-width: 1200px;
    margin: 4rem auto 0;
    padding: 0 20px;
    position: relative;
    opacity: 0;
    transform: scale(0.95);
    transition: all 1s ease-out;
}

.hero-cars.visible {
    opacity: 1;
    transform: scale(1);
}

/* Enlever l'animation float des voitures */
.hero-cars img {
width: 100%;
height: auto;
}

/* Section Experience */
.experience-section {
padding: 50px 0;
position: relative;
overflow: hidden;
background-color: var(--light);
}

.experience-card {
border-radius: 24px;
overflow: hidden;
position: relative;
max-width: 1200px;
margin: 0 auto;
opacity: 0;
transform: translateY(30px);
transition: all 1s ease-out;
}

.experience-card.visible {
opacity: 1;
transform: translateY(0);
}

.experience-image {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
object-fit: cover;
}

.experience-content {
position: relative;
z-index: 1;
padding: 80px 40px;
}

.experience-text {
font-size: 4rem;
line-height: 1.2;
text-align: center;
color: white;
margin: 0;
}

.highlight {
display: inline-block;
background: #4169E1;
padding: 5px 15px;
border-radius: 4px;
color: white;
transform: skew(-5deg);
transition: transform 0.3s ease;
}

.highlight:hover {
transform: skew(-5deg) scale(1.05);
}

.subscription-section {
padding: 120px 0;
background-color: var(--dark);
color: white;
}

.main-title {
font-size: 4rem;
font-weight: 500;
margin-bottom: 1rem;
}

.subtitle {
font-size: 1.5rem;
color: rgba(255, 255, 255, 0.7);
}

.feature-card {
background: rgba(255, 255, 255, 0.05);
border-radius: 24px;
padding: 40px;
height: 100%;
position: relative;
overflow: hidden;
transition: transform 0.3s ease;
}

.feature-card:hover {
transform: translateY(-10px);
}

.feature-card h3 {
font-size: 2rem;
margin-bottom: 1.5rem;
}

.benefits-list {
margin: 30px 0;
}

.benefit-item {
display: flex;
align-items: center;
margin-bottom: 15px;
}

.benefit-item i {
color: #4169E1;
margin-right: 10px;
font-size: 1.2rem;
}

.learn-more {
color: #4169E1;
text-decoration: none;
display: inline-block;
margin-top: 20px;
transition: color 0.3s ease;
}

.learn-more:hover {
color: #2d4ba1;
}

.card-image {
margin-top: 30px;
}

.card-image img {
width: 100%;
height: auto;
border-radius: 12px;
}


.cta-wrapper {
margin-top: 10px !important;
padding: 60px 20px;
}

.cta-subtitle {
font-size: 1.2rem;
color: var(--primary);
margin-bottom: 1rem;
font-weight: 500;
}

.cta-title {
font-size: 2.5rem;
margin-bottom: 2rem;
max-width: 800px;
margin-left: auto;
margin-right: auto;
}

.cta-button {
display: inline-flex;
align-items: center;
background: var(--primary);
color: white;
padding: 20px 40px;
border-radius: 50px;
text-decoration: none;
font-size: 1.2rem;
font-weight: 500;
transition: all 0.3s ease;
box-shadow: 0 10px 30px rgba(65, 105, 225, 0.3);
}

.cta-button:hover {
background: #2d4ba1;
color: white;
transform: translateY(-3px);
box-shadow: 0 15px 40px rgba(65, 105, 225, 0.4);
}

.button-text {
margin-right: 15px;
}

.button-icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 24px;
height: 24px;
transition: transform 0.3s ease;
}

.cta-button:hover .button-icon {
transform: translateX(5px);
}


/* Styles pour la section vidéo */
/* Modifiez la partie vidéo du CSS */
.video-section {
margin: 120px auto;
max-width: 1200px;
padding: 0 20px;
}

.video-container {
position: relative;
width: 100%;
border-radius: 24px;
overflow: hidden;
aspect-ratio: 16/9;
}

.background-video {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
}

.video-overlay {
position: absolute;
bottom: 0;
left: 0;
right: 0;
padding: 60px 40px;
background: linear-gradient(0deg, rgba(0,0,0,0.7) 0%, rgba(0,0,0,0) 100%);
color: white;
}

.video-title {
font-size: 41px;
line-height: 1em;
margin-bottom: 20px;
letter-spacing: -0.05em;
font-weight: normal;
}

.highlight-red {
background-color: #EA311A;
padding: 0 5px;
}

.video-text {
font-size: 16px;
line-height: 1.2;
color: #DBDBDB;
max-width: 600px;
font-weight: 400;
}







.features-list-section {
padding: 0px 0;
background-color: var(--dark);
}

.features-list-wrapper {
max-width: 800px;
margin: 0 auto;
padding: 0 20px;
}

.features-list {
list-style: none;
padding: 0;
margin: 0;
display: flex;
flex-direction: column;
gap: 15px;
}

.feature-item {
display: flex;
align-items: center;
gap: 15px;
font-size: 2.5rem;
font-weight: 500;
}

.check-icon {
color: #7B61FF;
font-weight: bold;
min-width: 20px;
}

.feature-highlight {
margin-top: 30px;
font-size: 2.5rem;
font-weight: 500;
}

.highlight-purple {
color: #7B61FF;
}

.highlight-red {
color: #EA311A;
margin: 0 10px;
}

.highlight-blue {
background: #4169E1;
padding: 5px 15px;
border-radius: 4px;
color: white;
}



/* princing */
.pricing-section {
background-color: white;
padding: 80px 0;
color: var(--dark);
}

.pricing-tabs {
display: flex;
justify-content: center;
gap: 20px;
margin-bottom: 40px;
}

.tab {
padding: 12px 40px;
border-radius: 50px;
border: none;
background: rgba(0, 0, 0, 0.1);
cursor: pointer;
font-size: 1.1rem;
transition: all 0.3s ease;
}

.tab.active {
background: var(--dark);
color: white;
}

.pricing-card {
background: white;
border-radius: 24px;
overflow: hidden;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
max-width: 1200px;
margin: 0 auto;
}

.pricing-content {
    display: flex;
    flex-direction: column;
    gap: 40px;
    padding: 40px;
}

.pricing-card{
    max-width: 560px;
}


.pricing-carousel {
position: relative;
}

.pricing-carousel img {
width: 100%;
object-fit: cover;
border-radius: 12px;
}

.carousel-next {
position: absolute;
right: 20px;
top: 50%;
transform: translateY(-50%);
background: white;
border: none;
width: 40px;
height: 40px;
border-radius: 50%;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}

.pricing-caption {
margin-top: 20px;
}

.price {
font-size: 1.2rem;
font-weight: 500;
margin-bottom: 5px;
}

.price-details {
color: #666;
font-size: 0.9rem;
}

.pricing-header {
margin-bottom: 40px;
}

.pricing-title {
font-size: 2.5rem;
margin-bottom: 10px;
}

.price-tag {
color: #666;
font-size: 0.9rem;
}

.features-list {
list-style: none;
padding: 0;
margin: 0;
}

.features-list li {
padding: 10px 0;
border-top: 1px solid rgba(0, 0, 0, 0.1);
font-size: 1rem;
line-height: 1.4;
}

.subscription-section .features-list li {
    padding: 0px 0;
    border-top: 1px solid rgba(0, 0, 0, 0.1);
    font-size: 2.6rem;
    line-height: 1.4;
}

.features-list li:last-child {
border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}

.subscribe-btn {
margin-top: 30px;
background: var(--primary);
color: white;
border: none;
padding: 12px 30px;
border-radius: 50px;
font-size: 1rem;
cursor: pointer;
transition: all 0.3s ease;
}

.subscribe-btn:hover {
background: #2d4ba1;
transform: translateY(-2px);
}

.location-info {
padding: 20px 40px;
border-top: 1px solid rgba(0, 0, 0, 0.1);
color: #666;
font-size: 0.9rem;
}

.service-footer {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 40px;
padding: 40px;
background: #f8f8f8;
}

.service-item {
display: flex;
align-items: flex-start;
gap: 20px;
}

.service-item i {
font-size: 1.5rem;
color: var(--primary);
}

.service-info h3 {
margin-bottom: 10px;
font-size: 1.1rem;
font-weight: 500;
}

.service-info p {
color: #666;
font-size: 0.9rem;
line-height: 1.4;
}



/* Variables et configuration de base */
:root {
--card-radius: 24px;
--primary-blue: #4169E1;
--light-bg: #f8f9fa;
}

/* Section principale */
.vehicles-section {
background: white;
padding: 80px 0;
}

/* En-tête de section */
.new-arrival {
display: inline-block;
color: var(--primary-blue);
font-size: 1rem;
margin-bottom: 1rem;
}

.section-title {

color: var(--dark);
}

.section-description {
max-width: 800px;
margin: 0 auto;
color: #666;
}

/* Navigation des catégories */
.categories-nav {
display: flex;
justify-content: center;
gap: 15px;
margin: 40px 0;
flex-wrap: wrap;
}

.cat-btn {
padding: 12px 30px;
border-radius: 50px;
border: none;
background: var(--light-bg);
transition: all 0.3s ease;
}

.cat-btn.active {
background: var(--primary-blue);
color: white;
}

/* Grille de voitures */
.vehicles-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 30px;
margin-bottom: 40px;
}

/* Carte de voiture */
.vehicle-card {
background: white;
border-radius: var(--card-radius);
overflow: hidden;
box-shadow: 0 4px 20px rgba(0,0,0,0.1);
transition: transform 0.3s ease;
color: var(--dark); /* Ajout de la couleur de texte par défaut */
}

.vehicle-title {
color: var(--dark); /* Couleur noire pour le titre */
font-size: 1.5rem;
font-weight: 500;
margin-bottom: 15px;
}

.vehicle-card:hover {
transform: translateY(-5px);
}

.vehicle-image img {
width: 100%;
height: 167px;
object-fit: cover;
}

.vehicle-content {
padding: 20px;
}

/* Spécifications du véhicule */
.vehicle-specs {
display: flex;
gap: 20px;
margin: 15px 0;
}

.spec-item {
display: flex;
align-items: center;
gap: 5px;
font-size: 0.9rem;
color: #333; /* Gris foncé pour meilleure lisibilité */
}

/* Caractéristiques */
.vehicle-features {
margin: 15px 0;
}

.feature {
display: flex;
align-items: center;
gap: 10px;
margin-bottom: 10px;
font-size: 0.9rem;
color: #333; /* Gris foncé pour le texte */
}

.feature i {
color: var(--primary-blue); /* Icônes en bleu */
}


/* Prix et rentabilité */
.vehicle-pricing {
display: flex;
justify-content: space-between;
margin: 20px 0;
}

.price-label, .roi-label {
display: block;
font-size: 0.8rem;
color: #666; /* Gris moyen pour les labels */
}

.price-amount, .roi-amount {
font-size: 1.2rem;
font-weight: 500;
color: var(--dark); /* Noir pour les montants */
}

/* Boutons d'action */
.vehicle-actions {
display: flex;
gap: 15px;
}

.btn-subscribe {
background: var(--primary-blue);
color: white; /* Texte blanc pour le bouton */
padding: 10px 20px;
border-radius: 50px;
border: none;
}

.spec-item i {
color: var(--primary-blue); /* Icônes en bleu */
}

/* Boutons */
.btn-discover {
color: var(--primary-blue);
text-decoration: none;
}

/* Bouton voir plus (mobile) */
.show-more-wrapper {
display: none;
text-align: center;
margin-top: 30px;
}

/* Disclaimer */
.disclaimer {
text-align: center;
color: #666;
font-size: 0.8rem;
margin-top: 40px;
}








/* Section Nouvelle Arrivage */
.new-arrival-section {
padding: 100px 0;
background-color: var(--dark);
overflow: hidden;
position: relative;
}

/* Container principal */
.arrival-container {
max-width: 1440px;
margin: 0 auto;
padding: 0 80px;
display: grid;
grid-template-columns: 1fr 1fr;
gap: 60px;
align-items: center;
}

/* Contenu texte */
.arrival-content {
position: relative;
z-index: 2;
}

/* Badge nouvelle arrivage */
.arrival-badge {
display: inline-block;
background: var(--primary);
color: white;
padding: 8px 16px;
border-radius: 50px;
font-size: 0.9rem;
margin-bottom: 20px;
}

/* Titre principal */
.arrival-title {
font-size: 3.5rem;
line-height: 1.2;
margin-bottom: 30px;
color: white;
}

.arrival-title .highlight {
color: var(--primary);
}

/* Description */
.arrival-description {
font-size: 1.1rem;
line-height: 1.6;
color: rgba(255, 255, 255, 0.8);
margin-bottom: 40px;
max-width: 500px;
}

/* Caractéristiques */
.arrival-features {
display: flex;
gap: 30px;
margin-bottom: 40px;
}

.arrival-badge .feature {
display: flex;
align-items: center;
gap: 10px;
color: white;
}

.feature i {
color: var(--primary);
font-size: 1.2rem;
}

/* Zone CTA */
.arrival-cta {
display: flex;
align-items: center;
gap: 30px;
}

.cta-main {
display: inline-flex;
align-items: center;
background: var(--primary);
color: white;
text-decoration: none;
padding: 15px 30px;
border-radius: 50px;
font-weight: 500;
transition: all 0.3s ease;
}

.cta-main:hover {
background: #2d4ba1;
transform: translateY(-2px);
}

.cta-price {
color: white;
font-size: 1.1rem;
}

.cta-price strong {
color: var(--primary);
}

/* Image */
.arrival-image {
position: relative;
}

.arrival-image img {
width: 100%;
height: auto;
border-radius: 24px;
transform: scale(1.1);
transition: transform 0.3s ease;
}

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



/* Section Ce qui est compris */
.included-section {
background: white;
padding: 120px 0;
}

/* Titre de la section */
.included-title {
font-size: 3.5rem;
line-height: 1.2;
margin-bottom: 80px;
color: var(--dark);
}

/* Grille des éléments */
.included-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 60px 100px;
max-width: 1200px;
margin: 0 auto;
}

/* Item individuel */
.included-item {
position: relative;
}

/* Titre de l'item */
.included-item-title {
font-size: 2rem;
margin-bottom: 20px;
color: var(--dark);
}

/* Texte de l'item */
.included-item-text {
font-size: 1rem;
line-height: 1.6;
color: #666;
}
/* Section Roadmap */
.roadmap-section {
background-color: var(--dark);
padding: 120px 0;
color: white;
}

/* Titres */
.roadmap-title {
font-size: 3.5rem;
line-height: 1.2;
margin-bottom: 20px;
text-align: center;
}

.roadmap-subtitle {
font-size: 1.2rem;
color: rgba(255, 255, 255, 0.7);
text-align: center;
margin-bottom: 80px;
}

/* Timeline */
.roadmap-timeline {
max-width: 900px;
margin: 0 auto;
position: relative;
}

/* Ligne verticale */
.roadmap-timeline::before {
content: '';
position: absolute;
left: 85px;
top: 0;
width: 1px;
height: 100%;
background: linear-gradient(to bottom, 
rgba(65, 105, 225, 0) 0%,
rgba(65, 105, 225, 1) 15%,
rgba(65, 105, 225, 1) 85%,
rgba(65, 105, 225, 0) 100%
);
}

/* Étape */
.roadmap-step {
display: flex;
gap: 60px;
margin-bottom: 60px;
position: relative;
}

.roadmap-step:last-child {
margin-bottom: 0;
}

/* Numéro d'étape */
.step-number {
flex-shrink: 0;
width: 50px;
height: 50px;
background: var(--primary);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 1.2rem;
font-weight: 600;
position: relative;
z-index: 2;
box-shadow: 0 0 20px rgba(65, 105, 225, 0.3);
}

/* Contenu de l'étape */
.step-content {
flex: 1;
padding-top: 10px;
}

.step-title {
font-size: 1.5rem;
margin-bottom: 15px;
color: var(--primary);
}

.step-description {
font-size: 1rem;
line-height: 1.6;
color: rgba(255, 255, 255, 0.8);
margin-bottom: 15px;
}

.step-status {
display: inline-block;
padding: 5px 15px;
background: rgba(65, 105, 225, 0.1);
border: 1px solid var(--primary);
border-radius: 20px;
font-size: 0.9rem;
color: var(--primary);
}

/* Animation sur hover */
.roadmap-step:hover .step-number {
transform: scale(1.1);
transition: transform 0.3s ease;
}


/* Section CTA finale */
.final-cta {
background: linear-gradient(to right, var(--dark), #1a1a1a);
padding: 120px 0;
position: relative;
overflow: hidden;
}

/* Wrapper principal */
.cta-wrapper {
max-width: 900px;
margin: 0 auto;
text-align: center;
position: relative;
z-index: 2;
}

/* Badge supérieur */
.cta-badge {
display: inline-block;
background: rgba(65, 105, 225, 0.1);
color: var(--primary);
padding: 8px 16px;
border-radius: 50px;
font-size: 0.9rem;
margin-bottom: 30px;
}

/* Titre principal */
.cta-title {
font-size: 4rem;
line-height: 1.2;
margin-bottom: 20px;
color: white;
}

.cta-title .highlight {
color: var(--primary);
position: relative;
display: inline-block;
}

/* Description */
.cta-description {
font-size: 1.2rem;
color: rgba(255, 255, 255, 0.8);
margin-bottom: 50px;
}

/* Métriques */
.cta-metrics {
display: flex;
justify-content: center;
gap: 60px;
margin-bottom: 50px;
}

.metric {
text-align: center;
}

.metric-number {
display: block;
font-size: 2.5rem;
font-weight: 600;
color: var(--primary);
margin-bottom: 10px;
}

.metric-label {
color: rgba(255, 255, 255, 0.8);
font-size: 0.9rem;
line-height: 1.4;
}

/* Zone d'action */
.cta-actions {
display: flex;
flex-direction: column;
align-items: center;
gap: 20px;
}

.cta-button {
display: inline-flex;
align-items: center;
gap: 15px;
background: var(--primary);
color: white;
padding: 20px 40px;
border-radius: 50px;
font-size: 1.1rem;
font-weight: 500;
text-decoration: none;
transition: all 0.3s ease;
box-shadow: 0 10px 30px rgba(65, 105, 225, 0.3);
}

.cta-button:hover {
transform: translateY(-3px);
box-shadow: 0 15px 40px rgba(65, 105, 225, 0.4);
background: #2d4ba1;
}

.cta-note {
color: rgba(255, 255, 255, 0.6);
font-size: 0.9rem;
}

/* Effet de background */
.final-cta::before {
content: '';
position: absolute;
top: -50%;
right: -20%;
width: 80%;
height: 200%;
background: radial-gradient(circle, rgba(65, 105, 225, 0.1) 0%, rgba(65, 105, 225, 0) 70%);
transform: rotate(-20deg);
}


/* CTA Roadmap */
.roadmap-cta {
max-width: 900px;
margin: 100px auto 0;
padding: 0 20px;
}

.roadmap-cta-content {
background: rgba(65, 105, 225, 0.1);
border: 1px solid rgba(65, 105, 225, 0.2);
border-radius: 24px;
padding: 40px;
display: flex;
justify-content: space-between;
align-items: center;
gap: 40px;
}

/* Partie gauche */
.cta-left {
flex: 1;
}

.cta-label {
display: inline-block;
background: var(--primary);
color: white;
padding: 6px 12px;
border-radius: 30px;
font-size: 0.9rem;
margin-bottom: 15px;
}

.cta-heading {
font-size: 1.8rem;
color: white;
margin-bottom: 10px;
}

.cta-text {
color: rgba(255, 255, 255, 0.7);
font-size: 1rem;
line-height: 1.5;
}

/* Partie droite */
.cta-right {
display: flex;
flex-direction: column;
align-items: flex-end;
gap: 15px;
}

.roadmap-cta-button {
display: inline-flex;
align-items: center;
gap: 10px;
background: var(--primary);
color: white;
padding: 15px 30px;
border-radius: 50px;
text-decoration: none;
font-size: 1rem;
font-weight: 500;
transition: all 0.3s ease;
}

.roadmap-cta-button:hover {
background: #2d4ba1;
transform: translateY(-2px);
}

.cta-stats {
display: flex;
gap: 20px;
}

.stat-item {
display: flex;
align-items: center;
gap: 8px;
color: rgba(255, 255, 255, 0.7);
font-size: 0.9rem;
}

.stat-item i {
color: var(--primary);
}


/* Section Chiffres Clés */
.key-figures-section {
background: white;
padding: 120px 0;
}

.figures-header {
text-align: center;
margin-bottom: 80px;
}

.section-label {
display: inline-block;
color: var(--primary);
font-size: 1rem;
margin-bottom: 20px;
}

.section-title {
font-size: 3.5rem;
color: var(--dark);
line-height: 1.2;
}

.figures-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 40px;
max-width: 1200px;
margin: 0 auto;
}

.figure-item {
text-align: center;
padding: 40px 20px;
background: white;
border-radius: 24px;
box-shadow: 0 10px 30px rgba(0,0,0,0.05);
transition: transform 0.3s ease;
}

.figure-item:hover {
transform: translateY(-10px);
}

.figure-number {
font-size: 3.5rem;
font-weight: 600;
color: var(--primary);
margin-bottom: 10px;
}

.figure-label {
font-size: 1.2rem;
font-weight: 500;
color: var(--dark);
margin-bottom: 15px;
}

.figure-description {
color: #666;
font-size: 0.9rem;
line-height: 1.5;
}

/* Section Luxe Sportif */
.luxury-offers-section {
padding: 120px 0;
background: white;
}

.offers-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 30px;
max-width: 1400px;
margin: 0 auto;
padding: 0 20px;
}

.offer-card {
position: relative;
background: white;
border-radius: 24px;
overflow: hidden;
box-shadow: 0 15px 40px rgba(0,0,0,0.1);
display: flex;
flex-direction: column;
}

.urgency-badge {
position: absolute;
top: 20px;
right: 20px;
background: #ff4040;
color: white;
padding: 8px 16px;
border-radius: 50px;
font-size: 0.9rem;
z-index: 2;
}

.offer-content {
padding: 40px;
flex: 1;
}

.offer-label {
display: inline-block;
background: var(--primary);
color: white;
padding: 6px 12px;
border-radius: 20px;
font-size: 0.8rem;
margin-bottom: 20px;
}

.offer-title {
font-size: 2.5rem;
color: var(--dark);
margin-bottom: 20px;
line-height: 1.2;
}

.offer-description {
color: #666;
margin-bottom: 30px;
line-height: 1.6;
}

.offer-specs {
display: flex;
gap: 20px;
margin-bottom: 20px;
}

.spec {
display: flex;
align-items: center;
gap: 8px;
color: #666;
font-size: 0.9rem;
}

.spec i {
color: var(--primary);
}

.offer-price {
display: flex;
justify-content: space-between;
align-items: center;
margin-top: auto;
}

.price {
font-size: 1.2rem;
color: var(--dark);
font-weight: 500;
}

.offer-cta {
display: inline-flex;
align-items: center;
background: var(--primary);
color: white;
padding: 12px 30px;
border-radius: 50px;
text-decoration: none;
font-weight: 500;
transition: all 0.3s ease;
}

.offer-cta:hover {
background: #2d4ba1;
transform: translateY(-2px);
}

.offer-image {
width: 100%;
height: 300px;
}

.offer-image img {
width: 100%;
height: 100%;
object-fit: cover;
}

/* Section FAQ */
.faq-section {
padding: 120px 0;
background: white;
}

.faq-header {
text-align: center;
margin-bottom: 80px;
}

.section-subtitle {
color: #666;
font-size: 1.1rem;
margin-top: 20px;
}

.faq-grid {
max-width: 900px;
margin: 0 auto;
}

.faq-item {
border-bottom: 1px solid rgba(0,0,0,0.1);
padding: 30px 0;
}

.faq-question {
display: flex;
justify-content: space-between;
align-items: center;
cursor: pointer;
}

.faq-question h3 {
font-size: 1.2rem;
color: var(--dark);
}

.toggle-btn {
background: none;
border: none;
color: var(--primary);
font-size: 1.2rem;
cursor: pointer;
padding: 5px;
transition: transform 0.3s ease;
}

.faq-item.active .toggle-btn {
transform: rotate(45deg);
}

.faq-answer {
display: none;
padding-top: 20px;
color: #666;
line-height: 1.6;
}

.faq-item.active .faq-answer {
display: block;
}


/* ====================================
Hero Section - Badge & Video Button
==================================== */
.hero-badge {
display: inline-flex;
align-items: center;
gap: 12px;
padding: 8px 20px;
background: rgba(65, 105, 225, 0.1);
border: 1px solid rgba(65, 105, 225, 0.2);
border-radius: 50px;
margin-bottom: 40px;
transform: translateY(20px);
opacity: 0;
animation: fadeInUp 0.8s ease forwards;
}

.hero-badge .star-icon {
color: var(--primary);
font-size: 16px;
}

.hero-badge .badge-text {
color: var(--primary);
font-size: 14px;
font-weight: 500;
letter-spacing: 0.5px;
}

/* Video Button Styles */
.video-preview {
margin-top: 60px;
opacity: 0;
transform: translateY(20px);
animation: fadeInUp 0.8s ease forwards;
animation-delay: 0.3s;
}

.video-trigger {
display: flex;
align-items: center;
gap: 20px;
background: rgba(255, 255, 255, 0.05);
border: 1px solid rgba(255, 255, 255, 0.1);
padding: 8px 8px 8px 8px;
border-radius: 16px;
cursor: pointer;
transition: all 0.3s ease;
backdrop-filter: blur(10px);
}

.video-trigger:hover {
background: rgba(255, 255, 255, 0.08);
transform: translateY(-2px);
}

.play-icon {
width: 48px;
height: 48px;
background: var(--primary);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.3s ease;
}

.play-icon i {
color: white;
font-size: 18px;
margin-left: 3px; /* Pour centrer visuellement l'icône play */
}

.video-trigger:hover .play-icon {
transform: scale(1.05);
box-shadow: 0 0 20px rgba(65, 105, 225, 0.4);
}

.video-info {
text-align: left;
}

.video-label {
display: block;
color: white;
font-size: 16px;
font-weight: 500;
margin-bottom: 4px;
}

.video-duration {
color: rgba(255, 255, 255, 0.7);
font-size: 14px;
}

/* Keyframes pour les animations */
@keyframes fadeInUp {
to {
opacity: 1;
transform: translateY(0);
}
}



/* ====================================
Video Modal Styles
==================================== */
.video-modal {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.95);
z-index: 1000;
opacity: 0;
visibility: hidden;
transition: all 0.3s ease;
display: flex;
align-items: center;
justify-content: center;
backdrop-filter: blur(10px);
}

.video-modal.active {
opacity: 1;
visibility: visible;
}

.modal-container {
position: relative;
width: 90%;
max-width: 1000px;
transform: translateY(20px);
transition: all 0.3s ease;
}

.video-modal.active .modal-container {
transform: translateY(0);
}

.modal-video-wrapper {
position: relative;
padding-bottom: 56.25%; /* Ratio 16:9 */
height: 0;
overflow: hidden;
border-radius: 12px;
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4);
}

.modal-video {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: #000;
border-radius: 12px;
}

.close-modal {
position: absolute;
top: -50px;
right: -50px;
width: 40px;
height: 40px;
border: none;
background: rgba(255, 255, 255, 0.1);
border-radius: 50%;
color: white;
font-size: 24px;
cursor: pointer;
transition: all 0.3s ease;
display: flex;
align-items: center;
justify-content: center;
backdrop-filter: blur(10px);
}

.close-modal:hover {
background: rgba(255, 255, 255, 0.2);
transform: rotate(90deg);
}


/* ====================================
Urgency Banner Styles
==================================== */
.urgency-banner {
position: fixed;
width: 100%;
background: linear-gradient(
45deg,
rgba(65, 105, 225, 0.95) 0%,
rgba(123, 97, 255, 0.95) 50%,
rgba(234, 49, 26, 0.95) 100%
);
overflow: hidden;
z-index: 1000;
}

/* Effet de brillance */
.urgency-banner::before {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 50%;
height: 100%;
background: linear-gradient(
90deg,
transparent 0%,
rgba(255, 255, 255, 0.1) 50%,
transparent 100%
);
animation: shine 3s infinite;
}

/* Container du contenu */
.urgency-content {
display: flex;
justify-content: center;
align-items: center;
padding: 12px 20px;
gap: 15px;
max-width: 1440px;
margin: 0 auto;
}

/* Icône d'horloge pulsante */
.urgency-icon {
color: white;
font-size: 18px;
animation: pulse 2s infinite;
}

/* Message principal */
.urgency-message {
color: white;
font-size: 15px;
font-weight: 500;
letter-spacing: 0.3px;
}

/* Mise en évidence du nombre */
.spots-left {
background: rgba(255, 255, 255, 0.15);
padding: 3px 8px;
border-radius: 4px;
margin: 0 4px;
font-weight: 600;
}

/* Bouton d'action */
.urgency-cta {
display: inline-flex;
align-items: center;
gap: 8px;
background: white;
color: var(--primary);
padding: 6px 16px;
border-radius: 50px;
font-size: 14px;
font-weight: 500;
text-decoration: none;
transition: all 0.3s ease;
border: 1px solid rgba(255, 255, 255, 0.2);

}

.urgency-cta:hover {
transform: translateY(-1px);
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.urgency-cta i {
font-size: 12px;
transition: transform 0.3s ease;
}

.urgency-cta:hover i {
transform: translateX(3px);
}

.urgency-message{
margin-bottom: 0;
}

/* Animations */
@keyframes shine {
0% {
left: -100%;
}
20%, 100% {
left: 200%;
}
}

@keyframes pulse {
0% {
transform: scale(1);
}
50% {
transform: scale(1.1);
}
100% {
transform: scale(1);
}
}



/* ====================================
Fixed CTA Styles - Version Complète
==================================== */
.fixed-cta {
position: fixed;
bottom: 0;
left: 0;
right: 0;
background: linear-gradient(
to right,
rgba(0, 0, 0, 0.95) 0%,
rgba(25, 25, 25, 0.95) 100%
);
backdrop-filter: blur(10px);
padding: 16px 24px;
transform: translateY(100%);
opacity: 0;
transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
z-index: 999;
box-shadow: 0 -10px 30px rgba(0, 0, 0, 0.25);
border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.fixed-cta.visible {
transform: translateY(0);
opacity: 1;
}

.fixed-cta-container {
max-width: 690px;
margin: 0 auto;
display: flex;
justify-content: space-between;
align-items: center;
gap: 30px;
}

/* Message gauche */
.fixed-cta-message {
display: flex;
align-items: center;
gap: 15px;
}

.fixed-cta-icon {
width: 40px;
height: 40px;
background: var(--primary);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
}

.fixed-cta-icon i {
color: white;
font-size: 18px;
}

.fixed-cta-text {
color: white;
}

.fixed-cta-title {
font-size: 16px;
font-weight: 600;
margin-bottom: 4px;
}

.fixed-cta-subtitle {
font-size: 14px;
color: rgba(255, 255, 255, 0.7);
}

/* Bouton animé */
.fixed-cta-button {
position: relative;
display: flex;
align-items: center;
gap: 12px;
background: var(--primary);
color: white;
padding: 14px 32px;
border-radius: 50px;
font-weight: 500;
text-decoration: none;
overflow: hidden;
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
border: 1px solid rgba(255, 255, 255, 0.1);
}

/* Effet de brillance */
.fixed-cta-button::before {
content: '';
position: absolute;
top: -50%;
left: -50%;
width: 200%;
height: 200%;
background: linear-gradient(
45deg,
transparent,
rgba(255, 255, 255, 0.1),
transparent
);
transform: rotate(45deg);
animation: shimmer 3s infinite;
pointer-events: none;
}

/* Effet de pulse */
.fixed-cta-button::after {
content: '';
position: absolute;
top: -2px;
left: -2px;
right: -2px;
bottom: -2px;
border-radius: 50px;
background: var(--primary);
z-index: -1;
animation: pulse 2s infinite;
opacity: 0;
}

/* Conteneur pour le texte et l'icône */
.cta-button-content {
display: flex;
align-items: center;
gap: 12px;
position: relative;
z-index: 2;
}

/* Badge gratuit */
.free-badge {
position: absolute;
top: -12px;
right: 30px;
background: #EA311A;
color: white;
font-size: 12px;
font-weight: 600;
padding: 4px 12px;
border-radius: 20px;
text-transform: uppercase;
box-shadow: 0 4px 10px rgba(234, 49, 26, 0.3);
/* animation: bounce 2s infinite; */
}

/* Effets au hover */
.fixed-cta-button:hover {
transform: translateY(-2px) scale(1.02);
box-shadow: 0 8px 20px rgba(65, 105, 225, 0.3),
        0 0 20px rgba(65, 105, 225, 0.2);
background: linear-gradient(
45deg,
var(--primary) 0%,
#2d4ba1 50%,
var(--primary) 100%
);
background-size: 200% 200%;
animation: gradientShift 3s ease infinite;
}

.fixed-cta-button:hover i {
animation: bounceRight 0.8s infinite;
}

/* Keyframes */
@keyframes shimmer {
0% {
transform: translate(-50%, -50%) rotate(45deg);
}
100% {
transform: translate(150%, 150%) rotate(45deg);
}
}

@keyframes pulse {
0% {
transform: scale(1);
opacity: 0.5;
}
50% {
transform: scale(1.05);
opacity: 0;
}
100% {
transform: scale(1);
opacity: 0;
}
}

@keyframes bounceRight {
0%, 100% {
transform: translateX(0);
}
50% {
transform: translateX(5px);
}
}

@keyframes gradientShift {
0% {
background-position: 0% 50%;
}
50% {
background-position: 100% 50%;
}
100% {
background-position: 0% 50%;
}
}

@keyframes bounce {
0%, 100% {
transform: translateY(0);
}
50% {
transform: translateY(-3px);
}
}



/* États du CTA */
.fixed-cta {
/* ... styles existants ... */
transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

/* État 2 - Bouton uniquement */
.fixed-cta.state-button-only .fixed-cta-container {
justify-content: flex-end;
}

.fixed-cta.state-button-only .fixed-cta-message {
display: none;
}

/* État 3 - Version complète */
.fixed-cta.state-full .fixed-cta-message {
display: flex;
}

/* Réorganisation de l'icône */
.fixed-cta-title-group {
display: flex;
align-items: center;
gap: 10px;
}

.fixed-cta-icon {
width: 24px;  /* Réduit de 40px */
height: 24px; /* Réduit de 40px */
margin-right: 0;
}

.fixed-cta-icon i {
font-size: 14px; /* Réduit de 18px */
}



@keyframes badgePulse {
0% {
transform: translateY(0) scale(1);
}
50% {
transform: translateY(-3px) scale(1.05);
}
100% {
transform: translateY(0) scale(1);
}
}




/* ====================================
Trainer Section Styles
==================================== */
.trainer-section {
padding: 30px 0;
background: linear-gradient(to bottom right, 
rgba(13, 50, 230, 0.05) 0%,
rgba(96, 17, 94, 0.05) 100%);
overflow: hidden;
}

.trainer-wrapper {
display: grid;
grid-template-columns: 1fr 1.5fr;
gap: 60px;
align-items: center;
max-width: 1200px;
margin: 0 auto;
}

/* Image Styles */
.trainer-image-container {
position: relative;
}

.trainer-image {
position: relative;
border-radius: 24px;
overflow: hidden;
aspect-ratio: 3/4;
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2);
}

.trainer-image img {
width: 100%;
height: 100%;
object-fit: cover;
}

.experience-badge {
position: absolute;
bottom: -20px;
right: -20px;
width: 100px;
height: 100px;
background: var(--primary);
border-radius: 50%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
color: white;
box-shadow: 0 10px 20px rgba(65, 105, 225, 0.3);
}

.experience-badge .years {
font-size: 32px;
font-weight: 600;
line-height: 1;
}

.experience-badge .text {
font-size: 14px;
text-align: center;
line-height: 1.2;
}

/* Content Styles */
.trainer-content {
color: var(--dark);
}

.trainer-header {
margin-bottom: 30px;
}

.trainer-name {
font-size: 3.5rem;
margin-bottom: 10px;
background: linear-gradient(45deg, var(--primary), #7B61FF);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}

.trainer-title {
font-size: 1.2rem;
color: #666;
}

.trainer-description {
font-size: 1.1rem;
line-height: 1.6;
color: #444;
margin-bottom: 40px;
}

/* Achievements Grid */
.achievements-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 30px;
margin-bottom: 40px;
}

.achievement-item {
padding: 20px;
background: white;
border-radius: 16px;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
transition: transform 0.3s ease;
}

.achievement-item:hover {
transform: translateY(-5px);
}

.achievement-icon {
width: 48px;
height: 48px;
background: rgba(65, 105, 225, 0.1);
border-radius: 12px;
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 15px;
}

.achievement-icon i {
font-size: 24px;
color: var(--primary);
}

.achievement-value {
display: block;
font-size: 24px;
font-weight: 600;
color: var(--dark);
margin-bottom: 5px;
}

.achievement-label {
font-size: 14px;
color: #666;
line-height: 1.4;
}

/* CTA Button */
.trainer-cta {
display: inline-flex;
align-items: center;
gap: 12px;
background: var(--primary);
color: white;
padding: 16px 32px;
border-radius: 50px;
font-size: 1.1rem;
font-weight: 500;
text-decoration: none;
transition: all 0.3s ease;
border: 1px solid rgba(255, 255, 255, 0.1);
}

.trainer-cta:hover {
transform: translateY(-2px);
background: #2d4ba1;
box-shadow: 0 10px 20px rgba(65, 105, 225, 0.2);
}

.trainer-cta i {
transition: transform 0.3s ease;
}

.trainer-cta:hover i {
transform: translateX(5px);
}



/* ====================================
Hero Ratings Section Styles
==================================== */
.hero-ratings {
margin-top: 40px;
display: flex;
justify-content: center;
align-items: center;
gap: 40px;
opacity: 0;
transform: translateY(20px);
animation: fadeInUp 1s ease forwards;
animation-delay: 0.6s;
}

.rating-block {
display: flex;
align-items: center;
gap: 12px;
padding: 12px 20px;
background: rgba(255, 255, 255, 0.05);
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: 16px;
backdrop-filter: blur(10px);
}

.rating-stars {
display: flex;
align-items: center;
gap: 4px;
}

.rating-stars i {
color: #FFD700;
font-size: 16px;
}

.rating-value {
font-weight: 600;
font-size: 18px;
color: white;
margin-left: 4px;
}

.rating-count {
color: rgba(255, 255, 255, 0.7);
font-size: 14px;
}

.success-rate {
display: flex;
align-items: center;
gap: 12px;
padding: 12px 20px;
background: rgba(65, 105, 225, 0.1);
border: 1px solid rgba(65, 105, 225, 0.2);
border-radius: 16px;
color: white;
}

.success-rate span {
font-size: 15px;
}

.success-rate strong {
color: var(--primary);
font-weight: 600;
}

/* Animation de pulsation subtile */


.video-trigger{
animation: subtlePulse 3s infinite;
}

@keyframes subtlePulse {
0% {
transform: scale(1);
}
50% {
transform: scale(1.02);
}
100% {
transform: scale(1);
}
}


/* Style pour la section bénéfices */
/* Style pour la section bénéfices avec des classes uniques */
.hero-benefits-wrapper {
padding: 80px 0;
background-color: var(--dark);
}

.hero-benefits-items {
max-width: 800px;
margin: 0 auto;
padding: 0;
list-style: none;
}

.hero-benefit-single {
display: flex;
align-items: flex-start;
gap: 20px;
margin-bottom: 30px;
}

.hero-benefit-check {
color: #00FF00;
font-size: 1.2rem;
line-height: 1.4;
flex-shrink: 0;
}

.hero-benefit-content {
color: white;
font-size: 1.1rem;
line-height: 1.4;
font-weight: 500;
text-align: left;
}

.hero-benefit-asterisk {
color: #00FF00;
margin-left: 4px;
}

/* Style pour les cartes de véhicules de la formation */
/* Style pour le voile */
.reserved-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(180deg, rgba(0,0,0,0.85) 0%, rgba(0,0,0,0.7) 100%);
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
}

.reserved-content {
    color: white;
    padding: 2rem;
}

.reserved-content i {
    font-size: 2rem;
    margin-bottom: 1rem;
    color: #6366f1; /* Bleu qui correspond à votre charte */
}

.reserved-content span {
    display: block;
    font-size: 1.5rem;
    font-weight: 600;
    margin-bottom: 0.5rem;
}

.reserved-content p {
    font-size: 1rem;
    opacity: 0.9;
}

/* Adapter les styles existants pour la version réservée */
.vehicle-card {
    position: relative;
    overflow: hidden;
}

.reserved-overlay {
    background: linear-gradient(180deg, rgba(0,0,0,0.5) 0%, rgba(0,0,0,0.8) 100%);
}





/* Nouveaux styles pour la section pricing */
/* Nouveaux styles avec des classes uniques */
.prime-success-banner {
    background: #4169E1;
    color: white;
    padding: 15px 30px;
    border-radius: 12px 12px 0 0;
}

.prime-success-content {
    display: flex;
    align-items: center;
    gap: 15px;
    font-size: 15px;
}

.prime-star {
    color: #FFD700;
    font-size: 18px;
}

.prime-success-rate {
    margin-left: auto;
    font-weight: 500;
}

.prime-badge {
    position: absolute;
    top: 20px;
    right: 20px;
    background: rgba(0, 0, 0, 0.8);
    color: white;
    padding: 8px 16px;
    border-radius: 6px;
    font-size: 14px;
}

.prime-price {
    margin-top: 15px;
}

.prime-amount {
    font-size: 24px;
    font-weight: 600;
    color: #4169E1;
}

.prime-period {
    font-size: 14px;
    color: #666;
    margin-left: 8px;
}

.prime-features-list {
    list-style: none;
    padding: 0;
    margin: 30px 0;
}

.prime-feature {
    display: flex;
    align-items: flex-start;
    gap: 15px;
    padding: 15px 0;
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}

.prime-check {
    color: #4169E1;
    font-size: 18px;
    flex-shrink: 0;
    margin-top: 3px;
}

.prime-cta-wrapper {
    margin-top: 30px;
}

.prime-spots {
    text-align: center;
    background: #f8f9fa;
    padding: 10px;
    border-radius: 6px;
    margin-bottom: 20px;
    font-size: 14px;
    color: #ff4040;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

/* Ajouter ces styles */
.prime-badge {
    background: rgba(65, 105, 225, 0.1);
    color: #4169E1;
    padding: 8px 16px;
    border-radius: 50px;
    font-size: 14px;
    display: inline-flex;
    align-items: center;
    margin-top: 10px;
}

.prime-time-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: rgba(65, 105, 225, 0.1);
    border: 1px solid rgba(65, 105, 225, 0.2);
    color: #4169E1;
    padding: 8px 16px;
    border-radius: 50px;
    font-size: 14px;
    margin: 15px 0;
}

.prime-time-badge i {
    font-size: 16px;
}






/* Nouveaux styles hero v2 */
.form-hero {
    min-height: 100vh;
    background: radial-gradient(circle at 72.02% 93.4%, #17001a 0%, rgba(23, 0, 26, 0) 35%),
                radial-gradient(circle at 40.7% 60.52%, rgba(81, 0, 196, 0.16) 0%, rgba(81, 0, 196, 0) 35%),
                radial-gradient(circle at 60.21% 67.78%, rgba(96, 17, 94, 0.15) 0%, rgba(96, 17, 94, 0) 35%),
                radial-gradient(circle at 37.01% 68.47%, rgba(81, 0, 196, 0.4) 0%, rgba(81, 0, 196, 0) 50%),
                radial-gradient(circle at 48.9% 49.52%, #2d0536 0%, rgba(45, 5, 54, 0) 100%);
    position: relative;
    overflow: hidden;
    --bg-overlay-color: transparent;
    padding-top: 110px;
}
 .form-hero-container {
    max-width: 1000px;
    margin: 0 auto;
    padding: 0 80px;
    display: block;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
 }
 
 /* Côté gauche */
 .form-hero-badge {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    padding: 8px 20px;
    background: rgba(65, 105, 225, 0.1);
    border: 1px solid rgba(65, 105, 225, 0.2);
    border-radius: 50px;
    margin-bottom: 40px;
 }
 
 .form-hero-badge i {
    color: #4169E1;
 }
 
 .form-hero-badge span {
    color: white;
    font-size: 14px;
 }
 
 .form-hero-subtitle {
    font-size: 2rem;
    color: white;
 }
 
 .form-hero-title {
    font-size: 3.5rem;
    color: white;
    margin-bottom: 40px;
 }
 
 .form-hero-features {
    list-style: none;
    padding: 0;
    margin: 0 0 30px 0;
 }
 
 .form-hero-feature {
    display: flex;
    align-items: flex-start;
    gap: 15px;
    margin-bottom: 20px;
    color: white;
    font-size: 1.1rem;
 }
 
 .form-hero-feature i {
    color: #4169E1;
    font-size: 1.2rem;
    flex-shrink: 0;
    margin-top: 5px;
 }
 
 .form-hero-note {
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.9rem;
    margin-bottom: 30px;
 }
 
 /* Stats et avis */
 .form-hero-stats {
    display: flex;
    gap: 30px;
    align-items: center;
 }
 
.form-hero-rating, .form-hero-success {
    display: flex;
    align-items: center;
    gap: 10px;
    background: rgba(255, 255, 255, 0.05);
    padding: 10px 20px;
    border-radius: 12px;
    justify-content: center;
    margin-bottom: 20px;
 }
 
 .form-hero-stars {
    display: flex;
    align-items: center;
    gap: 4px;
 }
 
 .form-hero-stars i {
    color: #FFD700;
 }
 
 .form-hero-stars span {
    color: white;
    margin-left: 5px;
    font-weight: 500;
 }
 
 .form-hero-reviews {
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.9rem;
 }
 
 .form-hero-success {
    color: white;
    font-size: 0.95rem;
 }
 
 .form-hero-success strong {
    color: #4169E1;
 }
 
 /* Formulaire */
 .form-hero-form {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 24px;
    padding: 30px;
    backdrop-filter: blur(10px);
 }
 
 .form-hero-form-title {
    color: white;
    font-size: 1.5rem;
    text-align: center;
    margin-bottom: 30px;
 }
 
 .form-hero-input {
    position: relative;
    margin-bottom: 20px;
 }
 
 .form-hero-input input {
    width: 100%;
    padding: 15px 20px 15px 50px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    color: white;
    font-size: 1rem;
 }
 
 .form-hero-input i {
    position: absolute;
    left: 20px;
    top: 50%;
    transform: translateY(-50%);
    color: #4169E1;
 }
 
 .form-hero-submit {
    width: 100%;
    background: #4169E1;
    color: white;
    border: none;
    padding: 20px;
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.3s ease;
 }
 
 .form-hero-submit span {
    display: block;
    font-size: 0.9rem;
    opacity: 0.8;
    margin-top: 5px;
 }
 
 /* Voitures */
 .form-hero-cars {
    margin: 40px auto 0;
    max-width: 1200px;
    padding: 0 20px;
 }
 
 .form-hero-cars img {
    width: 100%;
    height: auto;
 }
 
 /* Vidéo */
 
/* Nouvelle partie vidéo */
.form-hero-video {
    position: relative;
    width: 100%;
    max-width: 800px;
    margin: 10px auto;
    border-radius: 16px;
    overflow: hidden;
}

.form-hero-video-content {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 16px;
}

.form-hero-video-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 20px;
    background: linear-gradient(to top, rgba(0,0,0,0.7), transparent);
    color: white;
}

.form-hero-video-text {
    text-align: left;
}

.heo-img-mobile{
    display: none;
}

.form-hero-title{
    font-weight: bold;
}

.urgent-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 16px;
    background: rgba(255, 68, 68, 0.1);
    border: 1px solid rgba(255, 68, 68, 0.3);
    border-radius: 50px;
    color: #FF4444;
    font-size: 14px;
}

.urgent-badge i {
    font-size: 12px;
}



 
 /* Media Queries */
 @media (max-width: 992px) {
    .form-hero-container {
        grid-template-columns: 1fr;
        gap: 0px;
        padding: 0 40px;
    }
 
    .form-hero-title {
        font-size: 3.5rem;
    }
 }
 
 @media (max-width: 768px) {
    .form-hero-stats {
        flex-direction: column;
        align-items: flex-start;
    }
 
    .form-hero-title {
        font-size: 2.8rem;
    }
 
    .form-hero-feature {
        font-size: 1rem;
    }
 
    .form-hero-container {
        padding: 0 20px;
    }

    .heo-img-destop{
        display: none;
    }

    .heo-img-mobile{
        display: block;
    }

    .form-hero-title{
        font-size: 2.3rem;
    }

    .form-hero {
        padding-top: 79px;
    }
 }




 /* formulaire 2 a etape */
.alt-form-wrapper {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 24px;
    overflow: hidden;
    backdrop-filter: blur(10px);
    position: relative;
 }
 
 /* Barre de progression */
 .alt-form-progress {
    height: 4px;
    background: #4169E1;
    transition: width 0.5s ease;
 }
 
 /* Étapes */
 .alt-form-step {
    display: none;
    padding: 30px;
    animation: altFadeOut 0.3s ease;
 }
 
 .alt-form-step.alt-form-active {
    display: block;
    animation: altFadeIn 0.3s ease;
 }
 
 .alt-form-content {
    max-width: 500px;
    margin: 0 auto;
 }
 
 /* Groupes d'inputs */
 .alt-form-input-group {
    margin-bottom: 25px;
 }
 
 .alt-form-label {
    display: block;
    color: white;
    margin-bottom: 8px;
    font-size: 14px;
 }
 
 .alt-form-input {
    position: relative;
 }
 
 .alt-form-input i {
    position: absolute;
    left: 15px;
    top: 50%;
    transform: translateY(-50%);
    color: #4169E1;
    font-size: 16px;
 }
 
 .alt-form-input input,
 .alt-form-input select {
    width: 100%;
    padding: 15px 15px 15px 45px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    color: white;
    font-size: 16px;
    transition: all 0.3s ease;
 }
 
 .alt-form-input input:focus,
 .alt-form-input select:focus {
    border-color: #4169E1;
    outline: none;
 }
 
 /* Boutons */
 .alt-form-buttons {
    display: flex;
    justify-content: space-between;
    gap: 15px;
    margin-top: 30px;
 }
 
 .alt-form-btn {
    background: #4169E1;
    color: white;
    border: none;
    padding: 15px 30px;
    border-radius: 12px;
    font-size: 16px;
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    transition: all 0.3s ease;
 }
 
 .alt-form-btn:hover {
    background: #2d4ba1;
    transform: translateY(-2px);
 }
 
 .alt-form-btn-back {
    background: rgba(255, 255, 255, 0.1);
 }
 
 .alt-form-btn-back:hover {
    background: rgba(255, 255, 255, 0.2);
 }
 
 /* Écran de succès */
 .alt-form-success {
    text-align: center;
    padding: 40px 20px;
    color: white;
 }
 
 .alt-form-success-icon {
    width: 80px;
    height: 80px;
    background: #4169E1;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 20px;
    font-size: 30px;
 }
 
 .alt-form-success h3 {
    margin-bottom: 15px;
    font-size: 24px;
 }
 
 .alt-form-success p {
    color: rgba(255, 255, 255, 0.7);
    font-size: 16px;
 }
 
 /* Animations */
 @keyframes altFadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
 }
 
 @keyframes altFadeOut {
    from {
        opacity: 1;
        transform: translateY(0);
    }
    to {
        opacity: 0;
        transform: translateY(-10px);
    }
 }
 
 /* Responsive */
 @media (max-width: 768px) {
    .alt-form-step {
        padding: 20px;
    }
    
    .alt-form-btn {
        padding: 12px 20px;
        font-size: 14px;
    }
 }

 /* Styles à ajouter à votre CSS */
.alt-form-header {
    text-align: center;
    padding: 30px 20px 20px;
}

.alt-form-title {
    color: white;
    font-size: 28px;
    font-weight: 600;
    margin-bottom: 15px;
}

.alt-form-info {
    display: flex;
    justify-content: center;
    gap: 15px;
}

.alt-form-tag {
    display: flex;
    align-items: center;
    gap: 8px;
    background: rgba(65, 105, 225, 0.1);
    border: 1px solid rgba(65, 105, 225, 0.2);
    padding: 6px 12px;
    border-radius: 20px;
    color: white;
    font-size: 14px;
}

.alt-form-tag i {
    color: #4169E1;
    font-size: 12px;
}

@media (max-width: 768px) {
    .alt-form-title {
        font-size: 24px;
    }
    
    .alt-form-tag {
        font-size: 12px;
    }
}

/* Ajouter ces styles */
.alt-form-privacy {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 15px;
    background: rgba(255, 255, 255, 0.03);
    border-radius: 12px;
    margin: 25px 0;
}

.alt-form-privacy i {
    color: #4169E1;
    font-size: 16px;
    margin-top: 3px;
}

.alt-form-privacy p {
    color: rgba(255, 255, 255, 0.7);
    font-size: 14px;
    line-height: 1.4;
    margin: 0;
}






/* Styles pour le formulaire voiture */
.car-slider {
    width: 100%;
    overflow: hidden;
    position: relative;
    cursor: grab;
    padding-left: 15px;
    padding-right: 15px;
    margin: 20px 0;
    user-select: none;
}

.car-wrapper {
    display: flex;
    transition: transform 0.3s ease-out;
}

.car-card {
    flex: 0 0 auto;
    width: 280px;
    margin-right: 15px;
    border-radius: 15px;
    overflow: hidden;
    background: rgba(255, 255, 255, 0.05);
    border: 2px solid transparent;
    transition: all 0.3s ease;
    box-shadow: 0 5px 15px rgba(0,0,0,0.08);
    user-select: none;
    -webkit-user-select: none;
}

.car-image {
    width: 100%;
    height: 140px;
    object-fit: cover;
    display: block;
}

.car-info {
    padding: 20px;
    color: white;
}

.car-name {
    margin: 0;
    font-size: 18px;
    font-weight: 600;
    color: white;
}

.car-specs {
    color: rgba(255, 255, 255, 0.7);
    margin-top: 10px;
    font-size: 14px;
}

.car-card:hover {
    transform: translateY(-5px);
}

.car-card.selected {
    border-color: var(--primary);
    background: rgba(65, 105, 225, 0.1);
}

@media (max-width: 768px) {
    .car-card {
        width: calc(80% - 15px);
    }

    .car-image {
        height: 120px;
    }

    .car-info {
        padding: 15px;
    }

    .car-name {
        font-size: 16px;
    }

    .car-specs {
        font-size: 13px;
    }
}

.form-error-message {
    display: none;
    color: #ff4444;
    background: rgba(255, 68, 68, 0.1);
    border: 1px solid rgba(255, 68, 68, 0.3);
    padding: 12px 16px;
    border-radius: 12px;
    margin-top: 20px;
    font-size: 14px;
    align-items: center;
    gap: 10px;
}

.form-error-message.visible {
    display: flex;
}

.form-error-message i {
    font-size: 16px;
}









/* Styles modernisés pour la section zakari */
.trainer-section-v2 {
    padding: 120px 0;
    background: linear-gradient(to bottom right, 
        rgba(13, 50, 230, 0.05) 0%,
        rgba(96, 17, 94, 0.05) 100%);
    overflow: hidden;
}

.trainer-wrapper-v2 {
    display: grid;
    grid-template-columns: 1fr 1.5fr;
    gap: 60px;
    align-items: center;
    max-width: 1200px;
    margin: 0 auto;
}

/* Container vidéo */
.trainer-media-container {
    position: relative;
    border-radius: 24px;
    overflow: hidden;
    aspect-ratio: 3/4;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2);
}

.trainer-background-video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.trainer-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(
        rgba(0, 0, 0, 0.2),
        rgba(0, 0, 0, 0.4)
    );
}

.experience-badge-v2 {
    position: absolute;
    bottom: -20px;
    right: -20px;
    width: 100px;
    height: 100px;
    background: var(--primary);
    border-radius: 50%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: white;
    box-shadow: 0 10px 30px rgba(65, 105, 225, 0.3);
    z-index: 2;
}

/* Contenu */
.trainer-content-v2 {
    color: var(--dark);
}

.trainer-name-v2 {
    font-size: 3.5rem;
    margin-bottom: 10px;
    background: linear-gradient(45deg, var(--primary), #7B61FF);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.trainer-title-v2 {
    font-size: 1.2rem;
    color: #666;
    display: block;
    margin-bottom: 30px;
}

.trainer-description-v2 {
    font-size: 1.1rem;
    line-height: 1.6;
    color: #444;
    margin-bottom: 40px;
}

.achievements-grid-v2 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
    margin-bottom: 40px;
}

.achievement-item-v2 {
    padding: 20px;
    background: white;
    border-radius: 16px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
    transition: transform 0.3s ease;
}

.achievement-icon-v2 {
    width: 48px;
    height: 48px;
    background: rgba(65, 105, 225, 0.1);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 15px;
}

.achievement-icon-v2 i {
    color: var(--primary);
    font-size: 24px;
}

.achievement-value-v2 {
    display: block;
    font-size: 24px;
    font-weight: 600;
    color: var(--dark);
    margin-bottom: 5px;
}

.trainer-cta-v2 {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    background: var(--primary);
    color: white;
    padding: 16px 32px;
    border-radius: 50px;
    font-size: 1.1rem;
    font-weight: 500;
    text-decoration: none;
    transition: all 0.3s ease;
}

/* Media queries */
@media (max-width: 992px) {
    .trainer-wrapper-v2 {
        grid-template-columns: 1fr;
        gap: 40px;
        padding: 0 20px;
    }

    .trainer-media-container {
        max-width: 400px;
        margin: 0 auto;
    }
}

@media (max-width: 768px) {
    .trainer-section-v2 {
        padding: 60px 0;
    }
    
    .achievements-grid-v2 {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 480px) {
    .achievements-grid-v2 {
        grid-template-columns: 1fr;
    }
    
    .trainer-name-v2 {
        font-size: 2.5rem;
    }
}

/* Ajoutez ces styles en gardant les styles existants de .trainer-section */

/* Nouveau conteneur vidéo */
.trainer-video-wrapper {
    position: relative;
    width: 100%;
    height: 100%;
    border-radius: 24px;
    overflow: hidden;
    aspect-ratio: 3/4;
}

.trainer-bg-video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.trainer-video-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(
        rgba(0, 0, 0, 0.2),
        rgba(0, 0, 0, 0.4)
    );
}

/* Modification du conteneur image existant */
.trainer-image-container {
    position: relative;
    width: 100%;
}

/* Ajustement du badge d'expérience */
.experience-badge {
    position: absolute;
    bottom: -20px;
    right: -20px;
    width: 100px;
    height: 100px;
    background: var(--primary);
    border-radius: 50%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: white;
    box-shadow: 0 10px 30px rgba(65, 105, 225, 0.3);
    z-index: 10; /* Augmentation du z-index pour s'assurer qu'il reste au-dessus */
}

/* Media queries existantes modifiées */
@media (max-width: 992px) {
    .trainer-wrapper {
        grid-template-columns: 1fr;
        gap: 40px;
        padding: 0 20px;
    }

    .trainer-image-container {
        max-width: 400px;
        margin: 0 auto;
    }

    .trainer-video-wrapper {
        aspect-ratio: 3/4;
    }

    /* Ajustement du badge en mobile */
    .experience-badge {
        width: 80px;
        height: 80px;
        bottom: -10px;
        right: -10px;
    }

    .experience-badge .years {
        font-size: 24px;
    }

    .experience-badge .text {
        font-size: 12px;
    }
}

@media (max-width: 768px) {
    .trainer-section {
        padding: 60px 0;
    }

    .trainer-video-wrapper {
        aspect-ratio: 4/5; /* Ajustement du ratio pour mobile */
    }
}

@media (max-width: 480px) {
    .trainer-name {
        font-size: 2.5rem;
    }

    .experience-badge {
        width: 70px;
        height: 70px;
    }

    .experience-badge .years {
        font-size: 20px;
    }

    .experience-badge .text {
        font-size: 11px;
    }
}






















/* Styles de base pour la carte Success Story */
.success-story {
    position: relative;
    border: 2px solid var(--primary);
    background: linear-gradient(
        135deg,
        rgba(13, 50, 230, 0.15) 0%,
        rgba(65, 105, 225, 0.25) 100%
    );
}

/* Overlay et effets */
.success-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(
        135deg,
        rgba(0, 0, 0, 0.2) 0%,
        rgba(0, 0, 0, 0.1) 100%
    );
    backdrop-filter: blur(2px);
}

/* Badge Success */
.success-badge {
    position: absolute;
    top: 20px;
    left: 20px;
    background: #EA311A;
    color: white;
    padding: 8px 16px;
    border-radius: 50px;
    display: flex;
    align-items: center;
    gap: 8px;
    box-shadow: 0 4px 15px rgba(234, 49, 26, 0.4);
    border: 1px solid rgba(255, 255, 255, 0.2);
    z-index: 2;
}

.success-badge i {
    color: white;
}

/* Zone d'information */
.success-header {
    position: relative;
    margin-bottom: 20px;
}

.success-info {
    margin-top: 15px;
    padding: 15px;
    background: rgba(0, 0, 0, 0.2);
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.success-text {
    display: block;
    color: white;
    font-weight: 500;
    margin-bottom: 15px;
}

/* Bouton témoignage */
.btn-testimonial {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: #EA311A;
    color: white;
    border: 1px solid rgba(255, 255, 255, 0.1);
    padding: 12px 20px;
    border-radius: 50px;
    cursor: pointer;
    transition: all 0.3s ease;
    font-size: 0.9rem;
    box-shadow: 0 4px 15px rgba(234, 49, 26, 0.3);
    animation: pulse 2s infinite ease-in-out;
}

.btn-testimonial:hover {
    transform: translateY(-2px);
    background: #ff4433;
    box-shadow: 0 6px 20px rgba(234, 49, 26, 0.4);
}

.btn-testimonial i {
    font-size: 1.2rem;
}

.video-duration {
    background: rgba(255, 255, 255, 0.2);
    padding: 3px 8px;
    border-radius: 20px;
    font-size: 0.8rem;
    margin-left: 5px;
}

/* Adaptations des éléments existants */
.success-story .vehicle-title,
.success-story .spec-item,
.success-story .feature {
    color: white;
}

.success-story .spec-item i,
.success-story .feature i {
    color: #EA311A;
}

.success-story .price-label,
.success-story .roi-label {
    color: rgba(255, 255, 255, 0.7);
}

.success-story .price-amount,
.success-story .roi-amount {
    color: white;
}

/* Modal de témoignage */
.testimonial-modal {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.9);
    z-index: 9999;
    backdrop-filter: blur(5px);
    align-items: center;
}

.modal-content {
    position: relative;
    max-width: 800px;
    width: 90%;
    margin: 0 auto;
}

.modal-close {
    position: absolute;
    top: -40px;
    right: 0;
    background: none;
    border: none;
    color: white;
    font-size: 24px;
    cursor: pointer;
}

.modal-video-container {
    position: relative;
    padding-bottom: 56.25%;
    height: 0;
    overflow: hidden;
    border-radius: 12px;
}

.modal-video-container video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    background: #000;
}

/* Animation */
@keyframes pulse {
    0% { transform: scale(1); }
    50% { transform: scale(1.05); }
    100% { transform: scale(1); }
}

/* Media Queries */
@media (max-width: 768px) {
    .btn-testimonial {
        width: 100%;
        justify-content: center;
    }
}
















/* zo ajustement------------------------- */
.video-trigger{
    margin: 0 auto;
}


.hero-cars {
    margin: 1rem auto 0;
    padding: 0;
    margin-bottom: 20px;
}

.video-info{
    padding-right: 10px;
}

.hero-subtitle {
    margin-bottom: 1rem;
}

.video-preview {
    margin-top: 37px;
}

.hero-section {
    min-height: max-content;
}

.hero-content {
    padding-top: 84px;
}

.subscription-section {
    padding: 65px 0;
}

.feature-card:hover {
    transform: none;
}

.text-muted {
    --bs-text-opacity: 1;
    color: var(--light) !important;
}


.highlight-red {
    color: var(--light) !important;
}

.vehicles-grid{
    margin-top: 30px;
}

.vehicles-section .roi-amount{
    font-weight: 600;
    color: #1b933f;
}


.feature-card {
    padding-bottom: 200px;
    min-height: 723px;
}


.arrival-title .highlight {
    color: white;
}

.cta-title .highlight {
    color: white;
}

.hero-subtitle{
    text-transform: uppercase;
}

.page_forms .form-hero-container{
    display: flex;
    justify-content: center;
}


.img_forms {
    max-width: 600PX;
    text-align: center;
    margin: 34px auto;
}

.img_forms img{
    width: 90%;
    height: auto;
    margin: 0 auto
    
    
    ;
}


.alt-form-buttons {
    justify-content: center;
}

.alt-form-wrapper {

    min-height: initial;
    height: max-content;
}


/* Masquer les messages de validation par défaut de CF7 */
.wpcf7-response-output {
    display: none !important;
}

/* Masquer les petites notifications inline de CF7 */
.wpcf7-not-valid-tip {
    display: none !important;
}

.form-hero .urgent-badge{
    margin-bottom: 16px;
}

.subscribe-btn{
    margin: 0 auto;
    display: block;
}

.faq-section{
    padding-bottom: 185px;
}

select option {
    color: #000; /* ou la couleur de votre choix */
    background-color: #fff;
}



.form-hero-success{
    display: none !important;
}


/* ===== Socials Hero (au-dessus de la vidéo) ===== */
.social-hero {
    margin: 20px auto 40px;
    max-width: 900px;
  }
  
  .social-hero-title {
    font-size: 1.4rem;
    text-align: center;
    margin-bottom: 16px;
    color: rgba(255,255,255,0.9);
  }
  
  .social-hero-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
  }
  
  .social-hero-card {
    position: relative;
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 16px 18px;
    border-radius: 16px;
    text-decoration: none;
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.12);
    transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
    color: #fff;
  }
  
  .social-hero-card i.fab {
    font-size: 26px;
    flex: 0 0 26px;
  }
  
  /* Couleurs des marques */
  .social-hero-card.youtube i.fab { color: #FF0000; }
  .social-hero-card.instagram i.fab { color: #E1306C; }
  .social-hero-card.snapchat i.fab { color: #FFFC00; }
  
  .social-hero-text { display: flex; flex-direction: column; line-height: 1.2; text-align: left; }
  .social-hero-name { font-weight: 700; font-size: 1.05rem; }
  .social-hero-desc { font-size: .9rem; color: rgba(255,255,255,0.75); }
  
  .social-hero-arrow {
    margin-left: auto;
    opacity: .7;
    transition: transform .2s ease, opacity .2s ease;
  }
  
  .social-hero-card:hover {
    transform: translateY(-2px);
    border-color: rgba(255,255,255,0.2);
    box-shadow: 0 10px 24px rgba(0,0,0,.25);
  }
  
  .social-hero-card:hover .social-hero-arrow {
    transform: translateX(4px);
    opacity: 1;
  }
  
  /* Responsive */
  @media (max-width: 992px) {
    .social-hero-grid { grid-template-columns: 1fr; }
    .social-hero { max-width: 640px; }
  }
  


/* ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */



/* Responsive Design */
@media (max-width: 1024px) {
.included-title {
font-size: 3rem;
margin-bottom: 60px;
}

.included-grid {
gap: 40px 60px;
padding: 0 20px;
}

.figures-grid {
grid-template-columns: repeat(2, 1fr);
}

.offers-grid {
grid-template-columns: 1fr;
}
}


/* Media Queries */
@media (max-width: 1024px) {
.arrival-container {
padding: 0 40px;
}

.arrival-title {
font-size: 2.8rem;
}
}


@media (max-width: 980px) {
body {
min-width: unset;
}

.container {
padding: 0 40px;
}

.hero-title {
font-size: 2.5rem;
}

.hero-subtitle {
font-size: 3.5rem;
}

.experience-text {
font-size: 3rem;
}

.experience-content {
padding: 40px 20px;
}

.main-title {
font-size: 3rem;
}
}

/* Responsive */
@media (max-width: 992px) {
.trainer-wrapper {
grid-template-columns: 1fr;
gap: 40px;
padding: 0 20px;
}

.trainer-image-container {
max-width: 400px;
margin: 0 auto;
}

.achievements-grid {
grid-template-columns: repeat(2, 1fr);
}
}

@media (max-width: 768px) {
.container {
padding: 0 20px;
}

.hero-title {
font-size: 2rem;
}

.hero-subtitle {
font-size: 3rem;
}

.main-title {
font-size: 2.75rem;
}

.feature-card {
padding: 30px;
margin-bottom: 63%;
}

.feature-card h3 {
font-size: 2.25rem;
}

.benefit-item {
font-size: 1.25rem;
}

.cta-title {
font-size: 2.25rem;
}

.cta-subtitle {
font-size: 1.5rem;
}

.cta-button {
padding: 15px 30px;
font-size: 1.25rem;
}

.video-section {
margin: 20px auto;
}

.video-container {
aspect-ratio: 9/16;
height: 80vh; /* Hauteur fixe en mobile */
}

.background-video {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
}

.video-overlay {
/* Ajustement de l'overlay pour mobile */
padding: 30px 20px;
background: linear-gradient(0deg, rgba(0,0,0,0.8) 0%, rgba(0,0,0,0.4) 50%, rgba(0,0,0,0) 100%);
}

.video-title {
font-size: 2.75rem;
}

.video-text {
font-size: 1.25rem;
}

.feature-item,
.feature-highlight {
font-size: 2.25rem;
}

.features-list-section {
padding: 40px 0;
}

.pricing-content {
grid-template-columns: 1fr;
padding: 20px;
}

.service-footer {
grid-template-columns: 1fr;
padding: 20px;
}

.location-info {
padding: 20px;
}

.pricing-title {
font-size: 2rem;
}

.vehicles-grid {
grid-template-columns: 1fr;
}

.vehicle-card:nth-child(n+4) {
display: none;
}

.show-more-wrapper {
display: block;
}

.arrival-container {
grid-template-columns: 1fr;
padding: 0 20px;
gap: 40px;
}

.arrival-title {
font-size: 2.3rem;
}

.arrival-features {
flex-wrap: wrap;
}

.arrival-image {
order: -1; /* Place l'image en haut en mobile */
}

.included-section {
padding: 80px 0;
}

.included-title {
font-size: 2.5rem;
margin-bottom: 40px;
padding: 0 20px;
}

.included-grid {
grid-template-columns: 1fr;
gap: 40px;
}

.included-item-title {
font-size: 1.75rem;
}

.roadmap-section {
padding: 80px 0;
}

.roadmap-title {
font-size: 2.5rem;
padding: 0 20px;
}

.roadmap-subtitle {
font-size: 1.1rem;
padding: 0 20px;
margin-bottom: 60px;
}

.roadmap-timeline::before {
left: 45px;
}

.roadmap-step {
gap: 40px;
margin-bottom: 40px;
padding: 0 20px;
}

.step-number {
width: 40px;
height: 40px;
font-size: 1rem;
}

.step-title {
font-size: 1.3rem;
}

.final-cta {
padding: 80px 0;
}

.cta-wrapper {
padding: 0 20px;
}

.cta-title {
font-size: 2.8rem;
}

.cta-metrics {
flex-direction: column;
gap: 30px;
}

.metric-number {
font-size: 2rem;
}

.cta-button {
width: 100%;
justify-content: center;
padding: 15px 30px;
}

.roadmap-cta {
margin-top: 60px;
}

.roadmap-cta-content {
flex-direction: column;
padding: 30px;
text-align: center;
}

.cta-right {
align-items: center;
width: 100%;
}

.roadmap-cta-button {
width: 100%;
justify-content: center;
}

.cta-heading {
font-size: 1.5rem;
}

.section-title {
font-size: 2.5rem;
}

.figure-number {
font-size: 2.8rem;
}

.offer-title {
font-size: 2rem;
}

.offer-specs {
flex-direction: column;
}

.modal-container {
width: 95%;
}

.close-modal {
top: -60px;
right: 10px;
}

.urgency-content {
text-align: center;
padding: 15px 20px;
gap: 10px;
}

.urgency-message {
font-size: 14px;
}

.urgency-cta {
width: fit-content;
}

.urgency-banner{
.urgency-cta{
    display: none;
}

.urg_btn_txt{
display: none;
}
}

.fixed-cta-container {
flex-direction: column;
gap: 15px;
text-align: center;
}

.fixed-cta-message {
flex-direction: column;
}

.fixed-cta-button {
width: 100%;
justify-content: center;
padding: 12px 24px;
}

.free-badge {
right: 50%;
transform: translateX(50%);
}

.hero-ratings {
flex-direction: column;
gap: 20px;
}

.success-rate {
width: 100%;
justify-content: center;
}

.rating-block {
    width: max-content;
    justify-content: center;
}

.hero-benefits-wrapper {
padding: 40px 0;
}

.hero-benefits-container {
padding: 0 20px;
}

.hero-benefit-single {
font-size: 1rem;
margin-bottom: 20px;
}

.hero-benefits-wrapper {
padding: 60px 0;
}

.hero-benefits-items {
padding: 0 20px;
}

.hero-benefit-content {
font-size: 1rem;
}

.hero-benefit-check {
font-size: 1.1rem;
}

.pricing-card{
    max-width: 100%;
}

.success-rate{
    background: none;
    border: 0;
}

.feature-card {
    padding-bottom: 200px;
    min-height: 446px;
}

}

@media (max-width: 576px) {
.achievements-grid {
grid-template-columns: 1fr;
}

.feature-card {
    padding-bottom: 200px;
    min-height: 520px;
}

.trainer-name {
font-size: 2.5rem;
}

.experience-badge {
width: 80px;
height: 80px;
bottom: -10px;
right: -10px;
}

.experience-badge .years {
font-size: 24px;
}

.experience-badge .text {
font-size: 12px;
}
}

@media (max-width: 480px) {
.hero-title {
font-size: 1.75rem;
}

.hero-subtitle {
font-size: 2.3rem;
}

.experience-text {
font-size: 2.25rem;
}

.main-title {
font-size: 2.25rem;
}

.feature-card h3 {
font-size: 2rem;
}

.benefit-item {
font-size: 1.125rem;
}

.video-overlay {
padding: 30px 15px;
}

.video-title {
font-size: 2.25rem;
}

.video-text {
font-size: 1.125rem;
}

.feature-item,
.feature-highlight {
font-size: 2rem;
}

.features-list {
gap: 12px;
}

.cta-title {
font-size: 2rem;
}

.cta-subtitle {
font-size: 1.25rem;
}

.cta-button {
font-size: 1.125rem;
padding: 12px 25px;
}

.arrival-title {
font-size: 2rem;
}

.arrival-cta {
flex-direction: column;
align-items: flex-start;
gap: 20px;
}

.arrival-features {
gap: 20px;
}

.included-title {
font-size: 2rem;
}

.included-item-title {
font-size: 1.5rem;
}

.roadmap-title {
font-size: 2rem;
}

.roadmap-timeline::before {
left: 35px;
}

.roadmap-step {
gap: 30px;
}

.step-number {
width: 30px;
height: 30px;
font-size: 0.9rem;
}

.step-title {
font-size: 1.2rem;
}

.cta-title {
font-size: 2.2rem;
}

.cta-description {
font-size: 1rem;
}

.roadmap-cta-content {
padding: 20px;
}

.cta-stats {
flex-direction: column;
align-items: center;
gap: 10px;
}

.section-title {
font-size: 2rem;
}

.figures-grid {
grid-template-columns: 1fr;
}

.offer-content {
padding: 20px;
}

.hero-benefit-single {
font-size: 0.9rem;
gap: 10px;
}

.hero-benefit-icon {
font-size: 1.2rem;
}

}





/* ========== Multi-step – structure & topbar ========== */
/* ====== Layout / Topbar ====== */
.mf2-wrap{ position:relative; padding-top:20px; }
.mf2-topbar{
  position:absolute; inset:16px 18px auto 18px;
  display:flex; align-items:center; gap:12px; z-index:2;
}
.mf2-backlink{
  width:40px;height:40px;border-radius:12px;border:1px solid rgba(255,255,255,.14);
  background:linear-gradient(180deg,rgba(255,255,255,.10),rgba(255,255,255,.06));
  display:grid;place-items:center;cursor:pointer;
  box-shadow:0 8px 24px rgba(0,0,0,.25), inset 0 1px 0 rgba(255,255,255,.08);
  transition:.18s ease;
}
.mf2-backlink i{ opacity:.9; }
.mf2-backlink:hover{ transform:translateX(-2px); background:rgba(255,255,255,.12); }

.mf2-topright{ flex:1; }
.mf2-pill{
  width:max-content; padding:6px 12px; border-radius:999px;
  background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.12);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  font-size:12px; letter-spacing:.3px; text-transform:uppercase; opacity:.9;
}
.mf2-progress{ margin-top:8px; height:5px; width:100%; border-radius:999px; overflow:hidden;
  background:linear-gradient(90deg,rgba(255,255,255,.10),rgba(255,255,255,.06));
  border:1px solid rgba(255,255,255,.12);
}
.mf2-progress span{
  display:block; height:100%; width:0%;
  background:linear-gradient(90deg,#6ea8ff 0%,#8a79ff 55%,#c06bff 100%);
  box-shadow:0 0 16px rgba(138,121,255,.35) inset;
  transition:width .28s ease;
}

/* ====== Header / Typo ====== */
.mf2-header{ margin:6px 0 14px; text-align:center; }
.mf2-eyebrow{
  font-size:12px; letter-spacing:.4px; text-transform:uppercase;
  opacity:.85; display:inline-flex; align-items:center; gap:8px;
  padding:6px 10px; border-radius:999px;
  background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.10);
}
.mf2-title{
  margin:12px 0 6px; font-size:24px; font-weight:800; line-height:1.15;
  background:linear-gradient(90deg,#ffffff 0%,#cfc8ff 100%); -webkit-background-clip:text; background-clip:text; color:transparent;
}
.mf2-helper{ margin:0 auto 8px; max-width:520px; font-size:13px; opacity:.85; }

/* ====== Labels ====== */
.mf2-label{
  display:block; margin:14px 0 8px; font-size:13px; opacity:.9;
}

/* ====== Inputs / Selects ====== */
.form-hero-input{ position:relative; margin-bottom:14px; }
.form-hero-input i{ position:absolute; left:14px; top:50%; transform:translateY(-50%); opacity:.8; }

.form-hero-input input[type="text"],
.form-hero-input input[type="email"],
.form-hero-input input[type="tel"],
.form-hero-input select{
  width:100%; height:52px; border-radius:14px; outline:0;
  color:#fff; padding:0 16px 0 44px;
  border:1px solid rgba(255,255,255,.14);
  background:
    radial-gradient(120% 120% at 0% 0%, rgba(255,255,255,.10), rgba(255,255,255,.05) 40%, rgba(255,255,255,.04) 100%),
    linear-gradient(180deg, rgba(0,0,0,.12), rgba(0,0,0,.06));
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.06),
    0 10px 30px rgba(0,0,0,.25);
  transition: border-color .2s ease, box-shadow .2s ease, transform .08s ease;
}
.form-hero-input input:focus,
.form-hero-input select:focus{
  border-color: rgba(134,173,255,.9);
  box-shadow: 0 0 0 4px rgba(134,173,255,.15), inset 0 1px 0 rgba(255,255,255,.08);
}

.form-hero-input.mf2-select::after{
  content:"\f078"; font-family:"Font Awesome 6 Free"; font-weight:900;
  position:absolute; right:14px; top:50%; transform:translateY(-50%);
  opacity:.75; pointer-events:none;
}
.form-hero-input select{
  -webkit-appearance:none; -moz-appearance:none; appearance:none; padding-right:44px;
}

/* ====== CTA ====== */
.form-hero-submit{
  width:100%; min-height:54px; border:0; border-radius:14px; font-weight:700;
  letter-spacing:.3px; color:#fff; cursor:pointer;
  background: linear-gradient(135deg,#5b86ff 0%,#7b5cff 45%,#c16bff 100%);
  box-shadow: 0 12px 30px rgba(91,134,255,.35), inset 0 1px 0 rgba(255,255,255,.18);
  transition: filter .18s ease, transform .06s ease;
}
.form-hero-submit:hover{ filter:brightness(1.06); }
.form-hero-submit:active{ transform: translateY(1px); }

/* ====== Errors ====== */
.mf2-error-box{
  display:none; margin:6px 0 2px; padding:10px 12px; border-radius:12px;
  background: rgba(255,85,85,.14); color:#ffd6d6; font-size:13px;
  border:1px solid rgba(255,85,85,.22);
}
.mf2-error-box.visible{ display:flex; align-items:center; gap:8px; }
.mf2-error{ border-color: rgba(255,85,85,.9) !important; box-shadow:0 0 0 3px rgba(255,85,85,.18) !important; }

/* ====== Footnote élégante ====== */
.mf2-footnote{
  margin-top:14px; display:flex; align-items:center; gap:12px; justify-content:center;
  opacity:.85; font-size:12px;
}
.mf2-footnote::before, .mf2-footnote::after{
  content:""; height:1px; width:46px; border-radius:999px;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.25),transparent);
}

/* Cacher la flèche en étape 1 */
.mf2-wrap.is-step-1 .mf2-backlink{ opacity:0; pointer-events:none; }

/* Responsive */
@media (max-width:480px){
  .mf2-title{ font-size:22px; }
  .form-hero-submit{ font-size:14px; }
}


/* Le mono-étape n’a pas besoin de la topbar */
.mf2-single .mf2-topbar{ display:none; }

/* Bouton : retour à la ligne naturel + largeur 100% */
.form-hero-submit,
.mf2-submit{
  white-space: normal !important;
  overflow-wrap: anywhere;
  word-break: normal;
  display:block;
  width:100%;
  max-width:100%;
  line-height:1.2;
}