/* admin_web/static/admin_web/css/public_styles.css */
:root {
    --primary-color: #FFC300;
    --dark-color: #1A1A1A;
    --text-light: #A0A0A0;
    --light-gray-bg: #f7f9fa;
    --white-color: #ffffff;
    --border-color: #333333;
    --border-color-light: #eeeeee;

    /* ▼▼▼ AJOUTEZ CES DEUX LIGNES ▼▼▼ */
    --concept-title-lines: 3;
    --concept-title-lh: 1.25;
}

/* NOUVEAU CODE (corrigé) */
html {
    margin: 0;
    padding: 0;
    font-family: 'Inter', -apple-system, sans-serif;
    background-color: var(--white-color);
    color: var(--dark-color);
    scroll-behavior: smooth;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    /* height: 100%; SUPPRIMÉ */
}

body {
    margin: 0;
    padding: 0;
    /* height: 100%; SUPPRIMÉ */
    /* overflow-y: auto; SUPPRIMÉ */
}





/* ==========================================================
   10. NOUVEAU LAYOUT DESKTOP (Side-by-Side) - CORRIGÉ (EQUAL HEIGHT)
========================================================== */
@media (min-width: 992px) {

    .simulator-desktop-container {
        display: flex;
        flex-direction: row; 
        
       /* ▼▼▼ SUPPRIMÉ : align-items: flex-start; ▼▼▼ */
         /* On laisse le comportement par défaut "stretch" pour étirer les enfants */
        
        gap: 30px; 
        max-width: 1600px; 
        margin: 0 auto;
        min-height: 100vh;
        padding: 120px 4%; 
        box-sizing: border-box;
        overflow: hidden; /* Comme sur .hero, coupe ce qui dépasse */
    }

    .simulator-desktop-container > .simulator-slide {
        height: auto; /* Laisse le parent flex "stretch" gérer la hauteur */
        min-height: auto;
        scroll-snap-align: none;
        overflow-y: visible;
        border-radius: 12px;
        overflow: hidden; 
        padding: 0; 
    }

    /* 3. On style les Paramètres (Gauche) */
    #simulator-params-slide {
        flex: 0 0 420px; 
        width: 420px;
        padding: 0;
       
    /* ▼▼▼ MODIFIÉ POUR CORRESPONDRE AUX RÉSULTATS ▼▼▼ */

        -webkit-backdrop-filter: blur(10px); /* Pour Safari */
        
        /* ▼▼▼ SUPPRIMÉ : position: sticky; et top: 100px; ▼▼▼ */
        /* C'est ce qui empêchait l'étirement. */
    }

    /* ▼▼▼ AJOUT : Faire en sorte que la carte interne remplisse son parent étiré ▼▼▼ */
    .simulator-desktop-container .simulator-sidebar {
        height: 100%;
        display: flex; /* S'assure que le contenu interne s'aligne bien */
        flex-direction: column;
    }
    .simulator-desktop-container .sidebar-content {
        flex-grow: 1; /* Fait en sorte que les boutons restent en bas */
    }
    /* ▲▲▲ FIN DE L'AJOUT ▲▲▲ */


    /* 4. On style les Résultats (Droite) */
    #simulator-results-slide {
        flex: 1; 
        min-width: 0; 
        padding: 0;
        display: flex; /* ▼▼▼ AJOUTEZ CETTE LIGNE ▼▼▼ */
        flex-direction: column; /* ▼▼▼ AJOUTEZ CETTE LIGNE ▼▼▼ */
    }
    
    .final-cta {
        
    }
}



body.home-page {
    scroll-snap-type: y mandatory; 
}


/* --- 1. En-tête (Navbar) --- */
header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 8%;
    background: transparent;
    position: fixed; 
    top: 0;
    left: 0;
    right: 0;
    z-index: 100;
    transition: background-color 0.3s ease, padding 0.3s ease;
}

/* ▼▼▼ SUPPRESSION DES RÈGLES 'header-scrolled' ▼▼▼ */


/* Style d'en-tête pour les pages intérieures (non-accueil) */
/* ▼▼▼ SUPPRESSION DES RÈGLES 'header-light' ▼▼▼ */


.logo {
    font-size: 28px;
    font-weight: 800;
    color: var(--white-color);
    text-decoration: none;
    transition: color 0.3s ease;
    z-index: 101; 
}

body.mobile-menu-active .logo {
    color: var(--white-color);
}
/* ▼▼▼ SUPPRESSION DES RÈGLES DE COULEUR DU LOGO (header-scrolled, header-light) ▼▼▼ */
header:not(.header-scrolled):not(.header-light) .logo {
    color: var(--white-color);
}


.nav-links a {
    margin-left: 24px;
    text-decoration: none;
    color: var(--text-light);
    font-weight: 500;
    transition: color 0.3s ease;
}

.nav-links a:hover {
    color: var(--white-color);
}

.nav-links .btn-admin {
    background-color: var(--primary-color);
    color: var(--dark-color);
    padding: 10px 20px;
    border-radius: 8px;
    font-weight: 700;
    transition: all 0.2s ease;
}

.nav-links .btn-admin:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
}

/* --- 1.5. Styles pour le Menu Burger (Mobile) --- */
.menu-burger {
    display: none; 
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 10px;
    z-index: 101; 
    position: relative;
}
.burger-line {
    display: block;
    width: 28px;
    height: 3px;
    background-color: var(--white-color); 
    margin: 5px 0;
    transition: all 0.3s ease-in-out;
}

/* Couleur du burger sur le header transparent (home) */
/* ▼▼▼ SUPPRESSION DE LA RÈGLE 'header:not(.header-scrolled)' ▼▼▼ */


/* Couleur du burger sur les headers blancs (pages intérieures OU home scrollée) */
/* ▼▼▼ SUPPRESSION DE LA RÈGLE 'header-light, header-scrolled' ▼▼▼ */



/* Le burger redevient blanc quand le menu est ouvert */
body.mobile-menu-active .burger-line {
    background-color: var(--white-color);
}

/* Animation du burger en croix */
.menu-burger.is-active .burger-line:nth-child(1) {
    transform: translateY(8px) rotate(45deg);
}
.menu-burger.is-active .burger-line:nth-child(2) {
    opacity: 0;
}
.menu-burger.is-active .burger-line:nth-child(3) {
    transform: translateY(-8px) rotate(-45deg);
}

/* Styles du menu overlay */
.mobile-menu-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    /*background-color: rgba(26, 26, 26, 0.98); */
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px); 
    z-index: 90; 
    
    display: flex;
    justify-content: center;
    align-items: center;

    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
    transition: opacity 0.3s ease, visibility 0.3s ease, transform 0.3s ease;
}

body.mobile-menu-active .mobile-menu-overlay {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.mobile-nav-links {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
}
.mobile-nav-links a {
    color: var(--white-color);
    font-size: 28px;
    font-weight: 700;
    text-decoration: none;
    padding: 10px;
    transition: color 0.2s ease;
}
.mobile-nav-links a:hover {
    color: var(--primary-color);
}
.mobile-nav-links .btn-admin {
    background-color: var(--primary-color);
    color: var(--dark-color);
    font-size: 22px;
    padding: 12px 24px;
}
/* --- Fin Styles Menu Mobile --- */

/* --- 2. Pied de page --- */
footer {
    position: relative;
    padding: 60px 8%;
    background: var(--dark-color);
    color: #aaa;
    text-align: center;
    
    /* ▼▼▼ AJOUT POUR LE MODE DIAPO ▼▼▼ */
    /* Le footer devient la dernière "diapo" */
    height: 100svh; /* MODIFIÉ */
    box-sizing: border-box;
    z-index: 500;
    

    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    /* ▲▲▲ FIN AJOUTS ▲▲▲ */
}

.footer-logo {
    font-size: 24px;
    font-weight: 800;
    color: var(--white-color);
    margin-bottom: 20px;
}

.footer-links {
    margin-bottom: 20px;
    display: flex;
    flex-wrap: wrap; 
    justify-content: center;
}

.footer-links a {
    color: #aaa;
    margin: 5px 15px; 
    text-decoration: none;
}

.footer-links a:hover {
    color: var(--white-color);
}

.footer-copyright {
    font-size: 14px;
    color: #777;
}

/* --- 3. Styles Communs aux Pages --- */

/* Boutons CTA */
.cta-buttons a {
    text-decoration: none;
    padding: 16px 32px;
    border-radius: 8px;
    font-weight: 700;
    display: inline-block;
    margin-right: 15px;
    border: 2px solid transparent;
    transition: all 0.2s ease;
}

.btn-primary {
    background-color: var(--primary-color);
    color: var(--dark-color);
}

.btn-primary:hover {
    background-color: #ffca2b;
    transform: translateY(-2px);
    box-shadow: 0 10px 20px rgba(255, 195, 0, 0.2);
}

.btn-secondary {
    background-color: var(--white-color);
    color: var(--dark-color);
    border-color: var(--white-color);
}

.btn-secondary:hover {
    background-color: transparent;
    color: var(--white-color);
}

/* Amélioration "Devenir Chauffeur" (Hero) */
.hero .btn-secondary {
    background-color: rgba(255, 255, 255, 0.1);
    border-color: var(--white-color);
    color: var(--white-color);
}

.hero .btn-secondary:hover {
    background-color: var(--white-color);
    color: var(--dark-color);
    transform: translateY(-2px);
    box-shadow: 0 10px 20px rgba(255, 255, 255, 0.2);
}


/* CTA noir sur fond jaune (pour .final-cta) */
.final-cta .btn-secondary {
    background-color: var(--dark-color);
    color: var(--white-color);
    border-color: var(--dark-color);
}
.final-cta .btn-secondary:hover {
    background-color: var(--white-color);
    color: var(--dark-color);
}


/* Hero pour pages intérieures (about, safety, services) */
.page-hero {
    padding: 180px 8% 80px 8%; 
    background-color: var(--light-gray-bg);
    text-align: center;
    
    /* ▼▼▼ AJOUTS POUR LE MODE DIAPO ▼▼▼ */
    height: 100svh; /* MODIFIÉ */
    box-sizing: border-box;
    
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    /* ▲▲▲ FIN AJOUTS ▲▲▲ */
}

.page-hero h1 {
    font-size: 56px;
    font-weight: 800;
    line-height: 1.1;
    margin-bottom: 24px;
}
.page-hero h1 span {
    color: var(--primary-color);
}
.page-hero p {
    font-size: 20px;
    color: var(--text-light);
    max-width: 700px;
    margin: 0 auto;
    line-height: 1.6;
}

/* Section "Final CTA" (commune à toutes les pages) */
.final-cta {
        width: 100%;
    padding: 100px 8%;
    text-align: center;
    background: var(--primary-color);
    
    /* ▼▼▼ AJOUTS POUR LE MODE DIAPO ▼▼▼ */
    height: 100svh; /* MODIFIÉ */
    box-sizing: border-box; /* Pour que le padding ne casse pas la hauteur */
   
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    position: relative ;  
    z-index: 500;
    /* ▲▲▲ FIN AJOUTS ▲▲▲ */
}
.final-cta h2 {
    font-size: 40px;
    font-weight: 800;
    color: var(--dark-color);
    margin-bottom: 20px;
}
.final-cta p {
    font-size: 20px;
    color: #333;
    margin-bottom: 40px;
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
}


/* ==========================================================================
   SECTION GRILLE/CARROUSEL (Base = Carrousel Mobile)
   NOTE : LES STYLES POUR ".concept" ONT ÉTÉ RETIRÉS D'ICI
========================================================================== */

/* 1. LA SECTION PARENTE (La diapositive 100vh) */
.features, .services-section {
    height: 100svh; /* MODIFIÉ */
    box-sizing: border-box;
   

    display: flex;
    flex-direction: column;
    justify-content: center; /* Centre le bloc (titre + grille) verticalement */
    text-align: center;
    background-color: var(--light-gray-bg);
    
    padding: 40px 0; /* Padding vertical, 0 horizontal pour le carrousel */
    gap: 20px; /* Espace entre le titre et la grille */
    overflow: hidden; /* Empêche tout débordement de la diapo */
}

/* 2. LE TITRE */
.features h2, .services-section h2 {
    font-size: 40px;
    font-weight: 800;
    margin: 0;
    flex-shrink: 0;
    padding: 0 5%; /* Padding pour que le titre ne colle pas aux bords */
}

/* 3. LE CONTENEUR (Base Mobile = Carrousel) */
.features-grid, .services-grid {
    display: flex;       /* Horizontal */
    flex-direction: row;
    overflow-x: auto;    /* SCROLL */
    overflow-y: hidden;
    scroll-snap-type: x mandatory; /* SNAP */
    
    text-align: center;
    width: 100%;
    
    padding: 20px 5%; /* Padding pour voir le début et la fin */
    box-sizing: border-box;

    gap: 15px; /* Espace entre les cartes */
    
    /* Cache la barre de scroll */
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* IE */
}
.features-grid::-webkit-scrollbar, 
.services-grid::-webkit-scrollbar {
    display: none; /* Chrome, Safari */
}

/* 4. LES ITEMS (Base Mobile) */
.feature-item, .service-item {
    flex: 0 0 90%; /* L'item prend 90% de la largeur */
    scroll-snap-align: center; /* S'aligne au centre */
    min-width: 0; 
    
    aspect-ratio: 8 / 15; 
    
    position: relative;
    padding: 0; 
    border-radius: 12px;
    background: var(--white-color);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
    transition: all 0.3s ease; 
    overflow: hidden; 
}


/* ==========================================================================
   == [BLOC SUPPRIMÉ] ==
   L'ancienne "OPTIMISATION SECTION 2 (CONCEPT)" était ici.
========================================================================== */

/* ==========================================================================
   FIN DE LA SECTION GRILLE/CARROUSEL
========================================================================== 
*/

/* Styles des items (communs à tous les affichages) */

.feature-item:hover, .service-item:hover {
    transform: translateY(-8px); 
    box-shadow: 0 20px 45px rgba(0, 0, 0, 0.08); 
}

/* Règle pour la grille tablette/pc uniquement */
@media (min-width: 600px) {
    .feature-item:hover, .service-item:hover {
        box-shadow: 0 20px 45px rgba(0, 0, 0, 0.08); 
    }
}
/* Règle pour le carrousel mobile */
@media (max-width: 599px) {
    .feature-item:hover, .service-item:hover {
        transform: none; /* Pas d'effet de "hover" sur le carrousel */
        box-shadow: none;
    }
}


/* [BLOC SUPPRIMÉ] - Les anciens styles .concept-image, .concept-text-content, etc. étaient ici. */


.feature-icon, .service-icon {
    width: 48px;
    height: 48px;
    color: var(--primary-color);
    margin-bottom: 20px;
}

/* Le texte est maintenant sombre */
.feature-item h3, .service-item h3 {
    font-size: 20px; /* Un peu réduit pour s'adapter */
    font-weight: 700;
    margin-bottom: 10px;
    text-transform: uppercase; 
    letter-spacing: 0.5px;
    color: var(--white-color); /* ▼▼▼ MODIFICATION CLÉ (n'est plus 'white') ▼▼▼ */
    text-shadow: none; /* Suppression de l'ombre */
    
}

.feature-item p, .service-item p {
    color: rgba(255, 255, 255, 0.9);
    line-height: 1.6;
    text-shadow: 0 1px 2px rgba(0,0,0,0.2);
}

.feature-item li {
    color: var(--text-light);
    line-height: 1.6;
}
.feature-item ul {
    padding-left: 20px;
}
.service-links {
    margin-top: 20px;
}
.service-links a {
    text-decoration: none;
    color: var(--dark-color);
    font-weight: 700;
    margin-right: 15px;
}
.service-links a:hover {
    color: var(--primary-color);
}

/* Sections de contenu (about, safety) */
.content-section, .safety {
    display: flex;
    align-items: center;
    gap: 50px;
    padding: 100px 8%;
    overflow: hidden;
    position: relative;
    
    height: 100svh; /* MODIFIÉ */
    box-sizing: border-box;
    
    justify-content: center; 
}
.content-section.bg-light, .safety {
    background-color: var(--light-gray-bg);
}
.content-section.reversed, .safety.reversed {
    flex-direction: row-reverse;
}
.content-text, .safety-text {
    max-width: 50%;
    z-index: 1;
}
.content-text h2, .safety-text h2 {
    font-size: 40px;
    font-weight: 800;
    margin-bottom: 20px;
}
.content-text p, .safety-text p {
    font-size: 18px;
    color: var(--text-light);
    line-height: 1.7;
}
.content-image, .safety-image {
    width: 50%;
    height: 400px;
    background: var(--dark-color);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--primary-color);
    font-size: 20px;
    font-weight: 700;
}
.safety-image {
    height: 300px;
}
.safety-image svg {
    width: 80px;
    height: 80px;
}

/* Styles spécifiques (services, safety, home) */
.how-to {
    padding: 100px 8%;
    background-color: var(--light-gray-bg);
    text-align: center;
    
    height: 100svh; /* MODIFIÉ */
    box-sizing: border-box;
    
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.how-to h2 {
    font-size: 40px;
    font-weight: 800;
    margin-bottom: 60px;
}
.how-to-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 30px;
    text-align: left;
}
.how-to-item {
    background: var(--white-color);
    padding: 30px;
    border-radius: 12px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.03);
}
.how-to-item span {
    font-size: 32px;
    font-weight: 800;
    color: var(--primary-color);
    margin-bottom: 15px;
    display: block;
}
.how-to-item h3 {
    font-size: 20px;
    font-weight: 700;
    margin-bottom: 10px;
}
.how-to-item p {
    color: var(--text-light);
    line-height: 1.6;
    margin: 0;
}

.faq {
    padding: 100px 8%;
    max-width: 800px;
    margin: 0 auto;
    
    height: 100svh; /* MODIFIÉ */
    box-sizing: border-box;
    
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.faq h2 {
    text-align: center;
    font-size: 40px;
    font-weight: 800;
    margin-bottom: 60px;
}
.faq-item {
    
    padding: 20px 0;
}
.faq-item h3 {
    font-size: 20px;
    font-weight: 700;
    margin-bottom: 10px;
}
.faq-item p {
    font-size: 16px;
    color: var(--text-light);
    line-height: 1.6;
    margin: 0;
}

.safety::before {
    content: '';
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 400px;
    height: 400px;
    background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" style="color:%23FFC300;opacity:0.1;"><path stroke-linecap="round" stroke-linejoin="round" d="M9 12.75L11.25 15 15 9.75m-3-7.036A11.959 11.959 0 013.598 6 11.99 11.99 0 003 9.749c0 5.592 3.824 10.29 9 11.623 5.176-1.332 9-6.03 9-11.623 0-1.314-.213-2.622-.602-3.852A11.959 11.959 0 0112 2.714z" /></svg>') no-repeat;
    background-size: contain;
}

/* --- Styles pour la Vidéo d'Arrière-plan du Héros (PLEIN ÉCRAN) --- */
section.hero {
    position: relative; 
    overflow: hidden;   
    height: 100svh; /* MODIFIÉ */
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 5%;
    box-sizing: border-box;
    
}

.hero-background-video {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%); 
    min-width: 100%;
    min-height: 100%;
    width: auto;
    height: auto;
    object-fit: cover; 
    z-index: 1; 
}

.hero-video-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    
    z-index: 3; 
}

.hero-text {
    position: relative; 
    z-index: 3;         
    max-width: 800px; 
    text-align: center; 
    
    /* --- STYLES "VERRE DÉPOLI" AJOUTÉS --- */
    
    /* 1. Le fond flou (identique à la navbar) */
    background-color: rgba(0, 0, 0, 0.15); /* Noir semi-transparent */
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    
    /* 2. Le padding (un peu plus que le simulateur pour un effet "Héro") */
    padding: 40px;
    
    /* 3. Les coins arrondis et la bordure subtile */
    border-radius: 12px;
   
    
    /* 4. Une ombre légère pour le détacher */
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
}

.hero-pretitle {
    display: block;
    font-size: 10px;
    font-weight: 500;
    color: var(--white-color);
    opacity: 1;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    margin-bottom: 20px;
    line-height: 1.6;
}

.hero-pretitle strong {
    font-weight: 800;
    opacity: 1;
    font-size: 12px;
    letter-spacing: 0.5px;
}

.hero-text h1 {
    font-size: 65px;
    font-weight: 600;
    line-height: 1.1;
    margin-bottom: 24px;
    color: var(--white-color);
   
}

.hero-text h1 .highlight-yellow {
    color: var(--primary-color);
    font-weight: 900;
    
}

.hero-subtitle {
    font-size: 26px;
    font-weight: 500;
    color: var(--white-color);
    max-width: 600px;
    margin: 0 auto 40px auto;
    line-height: 1.5;
    opacity: 1;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

.hero-subtitle .highlight {
    font-weight: 900;
    color: var(--primary-color);
}


/* --- Styles pour la Section Sécurité (de home.html) --- */
.safety {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 40px;
    padding: 80px 5%;
    max-width: 1100px;
    margin: 0 auto;
}

.safety-image {
    flex-basis: 30%;
    text-align: center;
}

.safety-image svg {
    width: 150px;
    height: 150px;
    color: var(--primary-color); 
}

.safety-text {
    flex-basis: 70%;
}

.safety-text h2 {
    font-size: 32px;
    margin-bottom: 15px;
}

.safety-text p {
    font-size: 17px;
    line-height: 1.6;
}

/* --- Styles pour la page 'About Us' --- */
.content-section .content-image {
    width: 50%;
    height: 500px;
    background-color: #f0f0f0;
    border-radius: 12px;
    background-size: cover;
    background-position: center;
}


/* --- 7. Responsive (Mobile) --- */

/* ===== CORRECTIONS RESPONSIVE (TABLETTE) ===== */
/* Note : les règles pour 600px+ sont déjà définies ci-dessus */
@media (max-width: 900px) {
    .nav-links {
        display: none;
    }
    .menu-burger {
        display: block;
    }

    .hero {
        flex-direction: column;
        text-align: center;
        padding-left: 5%; 
        padding-right: 5%;
        box-sizing: border-box;
    }
    .hero-text {
        margin-top: 0;
        max-width: 100%;
    }
    
    .hero-text h1 {
        font-size: 44px;
        line-height: 1.15;
        word-break: break-word;
    }
    .page-hero h1 {
        font-size: 40px; 
        line-height: 1.2;
    }
    .hero-pretitle {
        font-size: 15px;
    }
    .hero-pretitle strong {
        font-size: 16px;
    }

    .page-hero {
        padding-top: 150px;
        padding-left: 5%;
        padding-right: 5%;
    }

    /* On ajuste le titre h2 pour mobile/tablette */
    .features h2, .services-section h2 {
        font-size: 32px; 
    }

    .how-to-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .safety, .safety.reversed, .content-section, .content-section.reversed {
        flex-direction: column;
        text-align: center;
        padding: 80px 5%; 
        overflow-y: auto;
    }
    .safety-text, .content-text {
        max-width: 100%;
        margin-bottom: 30px;
    }
    .content-text h2, .safety-text h2 {
        font-size: 32px; 
    }
    .content-text p, .safety-text p {
        font-size: 16px; 
    }
    .safety::before {
        display: none;
    }
    .safety-image, .content-image {
        width: 100%;
        height: 250px; 
    }
}

/* ===== CORRECTIONS RESPONSIVE (TÉLÉPHONE) ===== */
/* Note : les règles de base (carrousel) sont déjà pour le mobile */
@media (max-width: 599px) { /* <- Changé de 500px à 599px pour coller à la tablette */
    
    .hero-text h1 {
        font-size: 28px;
        line-height: 1.2;
    }
    .hero-pretitle {
        font-size: 11px;
    }
    .hero-pretitle strong {
        font-size: 12px;
    }
    .hero-subtitle {
        font-size: 18px;
        font-weight: 500;
        max-width: 100%;
        margin-bottom: 30px;
        line-height: 1.4;
        opacity: 1;
        
    }

    .how-to-grid {
        grid-template-columns: 1fr; 
        gap: 20px;
    }
    .cta-buttons {
        display: flex;
        flex-direction: column; 
        gap: 15px;
        align-items: center;
    }
    .cta-buttons a {
        margin-right: 0;
        width: 100%; 
        box-sizing: border-box; 
        text-align: center;
        padding: 14px 24px;
    }

    .final-cta {
        padding: 80px 5%;
    }
    .final-cta h2 {
        font-size: 32px;
    }
    .final-cta p {
        font-size: 16px;
    }

    /* On réduit le padding de la "diapo" carrousel sur petit écran */
    .features, .services-section {
        padding: 40px 0;
        gap: 15px; /* On réduit l'espace titre/grille */
    }

    /* On réduit la taille du titre sur petit écran */
    .features h2, .services-section h2 {
        font-size: 28px;
    }

    /* On réduit le padding dans les cartes */
    .feature-item h3, .service-item h3 {
        font-size: 18px;
    }
    .feature-item p, .service-item p {
        font-size: 14px;
        line-height: 1.5;
    }

}


/* --- 8. Styles pour la Page de Connexion (login.html) --- */
.sexy-login-page {
    display: flex;
    height: 100vh; 
    background: var(--dark-color); 
    position: relative;
    overflow: hidden; 
    
}

.login-description-section {
    flex: 1; 
    background: linear-gradient(135deg, var(--dark-color) 0%, #0c0c0c 100%); 
    color: var(--white-color);
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 0 5%; 
    position: relative;
    z-index: 2; 
}

.login-headline {
    font-size: 4.5vw; 
    font-weight: 800;
    line-height: 1.1;
    margin-bottom: 20px;
}

.login-headline span {
    color: var(--primary-color);
}

.login-subtext {
    font-size: 1.2vw; 
    color: var(--text-light);
    line-height: 1.6;
    max-width: 80%;
    margin-bottom: 30px;
}

.login-features-list {
    list-style: none;
    padding: 0;
    margin-bottom: 40px;
}

.login-features-list li {
    display: flex;
    align-items: center;
    margin-bottom: 15px;
    font-size: 1.1vw; 
    color: var(--white-color);
    font-weight: 500;
}

.login-features-list li svg {
    width: 28px;
    height: 28px;
    color: var(--primary-color);
    margin-right: 15px;
    flex-shrink: 0; 
}

.login-description-footer {
    margin-top: auto; 
    padding-top: 30px;
}

.back-to-home {
    color: var(--text-light);
    text-decoration: none;
    font-size: 1vw; 
    display: inline-flex;
    align-items: center;
    transition: color 0.2s ease;
}

.back-to-home:hover {
    color: var(--white-color);
}

.login-form-section {
    flex: 1; 
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background: var(--white-color); 
    position: relative;
    z-index: 2;
    padding: 40px; 
}

.login-logo-form {
    position: absolute; 
    top: 40px;
    left: 40px;
    font-size: 32px;
    font-weight: 800;
    color: var(--dark-color);
    text-decoration: none;
}

.login-form {
    max-width: 400px; 
    width: 100%;
    padding: 40px;
    background: var(--white-color);
    border-radius: 12px;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.1);
    border: 1px solid var(--border-color-light);
}

.login-form h3 {
    text-align: center;
    font-size: 26px;
    font-weight: 800;
    color: var(--dark-color);
    margin-top: 0;
    margin-bottom: 10px;
}

.login-form p {
    text-align: center;
    color: var(--text-light);
    margin-bottom: 30px;
    font-size: 15px;
}

.form-group {
    margin-bottom: 20px;
}

.form-group label {
    display: block;
    margin-bottom: 8px;
    font-weight: 600;
    font-size: 14px;
    color: var(--dark-color);
}

.form-group input[type="text"],
.form-group input[type="password"] {
    width: 100%;
    padding: 14px 18px;
    font-size: 16px;
    border: 1px solid #ddd;
    border-radius: 8px;
    box-sizing: border-box;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.form-group input::placeholder {
    color: #a0a0a0;
}

.form-group input[type="text"]:focus,
.form-group input[type="password"]:focus {
    outline: none;
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px rgba(255, 195, 0, 0.2);
}

.btn-login {
    background-color: var(--primary-color);
    color: var(--dark-color);
    padding: 14px 25px;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    width: 100%;
    font-size: 17px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    transition: all 0.2s ease;
}

.btn-login:hover {
    background-color: #ffda47;
    transform: translateY(-2px);
    box-shadow: 0 6px 15px rgba(255, 195, 0, 0.25);
}

.btn-login svg {
    width: 20px;
    height: 20px;
    transition: transform 0.2s ease;
}

.btn-login:hover svg {
    transform: translateX(5px);
}

.login-links {
    text-align: center;
    margin-top: 25px;
    font-size: 14px;
}

.login-links a {
    color: var(--text-light);
    text-decoration: none;
    margin: 0 10px;
    transition: color 0.2s ease;
}

.login-links a:hover {
    color: var(--dark-color);
}

.form-error-global {
    background-color: #ffeaea; 
    color: #d8000c; 
    border: 1px solid #d8000c;
    border-radius: 8px;
    padding: 15px;
    margin-bottom: 20px;
    text-align: center;
    font-weight: 500;
    font-size: 14px;
}

/* --- Animation de fond avec le logo Katira --- */
.animated-katira-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none; 
    overflow: hidden;
    z-index: 1; 
}

.animated-katira-bg .logo-shape {
    position: absolute;
    opacity: 0.05; 
    color: var(--primary-color);
    animation: float 20s ease-in-out infinite alternate; 
}

.animated-katira-bg .logo-shape svg {
    width: 200px; 
    height: 200px;
    fill: currentColor; 
}

.animated-katira-bg .logo-shape:nth-child(1) { top: 10%; left: 5%; transform: scale(0.8); animation-delay: 0s; }
.animated-katira-bg .logo-shape:nth-child(2) { top: 50%; left: 30%; transform: scale(1.2); animation-delay: 2s; }
.animated-katira-bg .logo-shape:nth-child(3) { top: 20%; right: 10%; transform: scale(0.6); animation-delay: 4s; }
.animated-katira-bg .logo-shape:nth-child(4) { bottom: 5%; left : 40%; transform : scale(1.0); animation-delay: 6s; }
.animated-katira-bg .logo-shape:nth-child(5) { top: 80%; right: 20%; transform: scale(0.9); animation-delay: 8s; }

@keyframes float {
    0% { transform: translate(0, 0) scale(var(--scale, 1)); }
    100% { transform: translate(20px, 30px) scale(var(--scale, 1)); }
}

/* Responsive pour les écrans plus petits */
@media (max-width: 992px) {
    .sexy-login-page {
        flex-direction: column; 
        height: auto; 
        min-height: 100vh;
    }

    .login-description-section {
        padding: 60px 8%;
        text-align: center;
        flex: none; 
        order: 2; 
    }

    .login-headline {
        font-size: 36px;
        margin-bottom: 15px;
    }
    .login-subtext, .login-features-list li, .back-to-home {
        font-size: 16px;
        max-width: 100%;
    }
    .login-features-list {
        display: flex;
        flex-direction: column;
        align-items: center;
    }
    .login-features-list li svg {
        width: 24px;
        height: 24px;
    }

    .login-description-footer {
        padding-top: 20px;
        margin-top: 30px;
    }

    .login-form-section {
        padding: 60px 8%;
        order: 1; 
        flex: none;
    }

    .login-logo-form {
        position: static; 
        text-align: center;
        margin-bottom: 40px;
        font-size: 40px;
    }

    .login-form {
        max-width: 100%; 
        padding: 30px;
    }

    .animated-katira-bg {
        opacity: 0.3; 
    }
}

/* ==========================================================
   [BLOC SUPPRIMÉ]
   Toutes les anciennes media queries pour 
   .concept, .concept-grid, .concept-item 
   ont été supprimées d'ici.
========================================================== */



/* ==========================================================
   STYLES POUR LE SIMULATEUR DE PRIX (page_systeme.html)
========================================================== */

.simulator-section {
    padding: 80px 5%;
    background-color: var(--light-gray-bg);
    
    /* Correction pour le mode "diapo" */
    height: auto; 
    min-height: 100vh;
}

.simulator-wrapper {
    max-width: 800px;
    margin: 0 auto;
    background: var(--white-color);
    border-radius: 12px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
    overflow: hidden;
    border: 1px solid var(--border-color-light);
}

/* --- Étape 1: Toggle --- */
.simulator-toggle {
    display: flex;
    background: #f9f9f9;
    padding: 8px;
}

.toggle-option {
    flex: 1;
    text-align: center;
    padding: 14px 20px;
    font-size: 16px;
    font-weight: 600;
    color: var(--text-light);
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.toggle-option input[type="radio"] {
    display: none; /* Cache les vrais boutons radio */
}

.toggle-option.active {
    background: var(--white-color);
    color: var(--dark-color);
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
}


/* [BLOC SUPPRIMÉ]
   Les anciens styles .concept-links,
   .concept-item h3, .concept-item p, etc.
   ont été supprimés d'ici.
*/


/* ==========================================================
   ▼▼▼ NOUVEAU BLOC À AJOUTER ▼▼▼
   STYLES POUR LA NOUVELLE GRILLE "CONCEPT" (BOOTSTRAP)
========================================================== */

/* On s'assure que la section prend bien la hauteur de la diapositive */
.concept {
    height: 100svh; /* MODIFIÉ */
    box-sizing: border-box;
    
    display: flex; /* Garde le centrage vertical */
    flex-direction: column;
    justify-content: center;
    background-color: var(--light-gray-bg);
    /* Padding pour le header fixe et le bas */
    padding-top: 100px;
    padding-bottom: 40px;
    padding-left: 2%; /* Ajoute un peu d'air sur les côtés */
    padding-right: 2%;
}

/* Style de la carte Bootstrap */
.concept-card {
    border: none; /* Enlever la bordure de base de Bootstrap */
    border-radius: 12px; /* Garder les coins arrondis d'origine */
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
    /* h-100 est déjà sur la carte, mais on s'assure d'une hauteur min */
    min-height: 450px; 
}

/* L'image de fond */
.concept-card-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.4s ease;
}

/* L'overlay de texte avec le dégradé (comme l'original) */
.concept-card-overlay {
    background: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.85) 100%);
    padding: 30px; /* Garder le padding original */
    align-items: flex-start; /* Aligne le texte à gauche */
    /* justify-content-end est déjà dans le HTML, c'est parfait */
}

/* Le titre de la carte */
.concept-card .card-title {
    font-size: 20px;
    font-weight: 700;
    margin-bottom: 10px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--white-color);
    text-shadow: 0 1px 2px rgba(0,0,0,0.2);
    /* On garde votre logique de clamp pour la hauteur du titre */
    line-height: var(--concept-title-lh, 1.25);
    height: calc(var(--concept-title-lines, 3) * 1em * var(--concept-title-lh, 1.25));
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: var(--concept-title-lines, 3);
    -webkit-box-orient: vertical;
}

/* Le texte de la carte */
.concept-card .card-text {
    color: rgba(255, 255, 255, 0.9);
    line-height: 1.6;
    text-shadow: 0 1px 2px rgba(0,0,0,0.2);
    /* On limite le nombre de lignes pour un affichage propre */
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 5; /* 5 lignes max */
    -webkit-box-orient: vertical;
    margin-bottom: 1rem; /* Espace avant le bouton */
}

/* Le bouton personnalisé (pour remplacer .btn-secondary dans la carte) */
.btn-concept {
    background-color: rgba(255, 255, 255, 0.15);
    border: 2px solid var(--primary-color);
    color: var(--primary-color) !important; /* !important pour surcharger Bootstrap si besoin */
    padding: 12px 24px;
    font-size: 15px;
    font-weight: 600;
    border-radius: 8px;
    text-decoration: none;
    transition: all 0.2s ease;
    max-width: fit-content; /* Pour que le bouton ne prenne pas 100% de largeur */
}

.btn-concept:hover {
    background-color: var(--white-color);
    color: var(--dark-color) !important;
    transform: translateY(-2px);
    border-color: var(--white-color);
}

/* Effet de hover sur la carte */
.concept-card:hover .concept-card-img {
    transform: scale(1.05);
}

/* Ajustement pour mobile (<768px)
  Puisque les cartes s'empilent, la section n'a plus besoin de faire 100vh.
  On la laisse grandir naturellement.
*/
@media (max-width: 991px) {
    .concept {
        height: auto; /* Laisse la section grandir */
        min-height: 100vh; /* Garde l'effet "diapo" au minimum */
        padding-top: 120px; /* Plus de padding en haut sur mobile */
    }
    .concept-card {
       
        height: 400px !important; /* On FORCE la hauteur à 400px */
    }
    .concept-card .card-text {
        -webkit-line-clamp: 4; /* 4 lignes max sur mobile */
    }


}


/* ▼▼▼ STYLE "BLUR" POUR LA NAVBAR (AJOUTÉ À L'ÉTAPE PRÉCÉDENTE) ▼▼▼ */
/* --- 1.1. Global Bootstrap Navbar Style (Frosted) --- */
#main-navbar {
    /* Style de fond "blur" de la page simulateur */
    
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    background-color: rgba(0, 0, 0, 0.15); 
    
    /* Supprime les styles par défaut de Bootstrap (ombre, fond uni) */
    box-shadow: none;
    transition: background-color 0.3s ease;
    z-index: 1050; /* AJOUTÉ */
    transform: translate3d(0, 0, 0); /* LIGNE AJOUTÉE */
}

/* S'assure que le logo reste blanc (car on utilise navbar-dark) */
#main-navbar .navbar-brand.logo {
    color: var(--white-color);
}

/* Corrige la couleur de l'icône burger pour qu'elle soit blanche */
#main-navbar .navbar-toggler-icon {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba(255, 255, 255, 0.7)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

/* Corrige la bordure du bouton burger */
#main-navbar .navbar-toggler {
    border-color: rgba(255, 255, 255, 0);
}



/* ==========================================================
   AMÉLIORATION NAVBAR (Bootstrap)
========================================================== */

/* 1. Typo plus petite et liens en blanc */
#main-navbar .nav-link {
    font-size: 14px; /* Typo plus petite (16px par défaut) */
    color: rgba(255, 255, 255); /* Texte en blanc (légèrement transparent) */
    font-weight: 550;
    padding-left: 15px; /* Assurer un espacement régulier */
    padding-right: 15px;
    transition: color 0.2s ease;
}

/* 2. Style au survol et lien actif (blanc opaque) */
#main-navbar .nav-link:hover,
#main-navbar .nav-link.active {
    color: var(--white-color); /* 100% blanc */
    text-shadow: 3px 3px 10px rgba(255, 255, 255, 0.9);
    font-weight: 700;
     transition: text-shadow 0.3s ease;
}
    


/* 3. Ajuster le bouton "Espace Chauffeur" pour être cohérent */
#main-navbar .btn-admin {
    background-color: var(--primary-color); /* Reste jaune */
    color: var(--dark-color); /* Texte noir */
    font-weight: 600; /* Un peu moins gras que 700 */
    font-size: 12px; /* Même taille que les liens */
    padding: 7px 18px; /* Padding réduit pour mieux s'aligner en hauteur */
    border-radius: 8px;
    transition: all 0.2s ease;
    position: relative;
}

/* 4. Effet de survol sur le bouton */
#main-navbar .btn-admin:hover {
    background-color: #ffca2b; /* Jaune plus clair */
    transform: translateY(-2px);
    box-shadow: 0 4px 10px rgba(255, 195, 0, 0.2);
}