/* ============================================================
   BASE RESPONSIVE UNIQUE (MOBILE & TABLETTE)
   ============================================================ */
@media screen and (max-width: 991px) {
    
    /* 1. SÉCURITÉ ANTI-DÉBORDEMENT */
    html, body {
        overflow-x: hidden;
        margin: 0;
        padding: 0;
        width: 100%;
    }

    /* 2. HEADER (Fixé et ajusté) */
    .navbar {
        position: sticky !important;
        top: 0 !important;
        width: 100% !important;
        height: 70px !important;
        background: #ffffff !important;
        display: flex !important;
        align-items: center !important;
        z-index: 10000 !important;
        box-shadow: 0 2px 10px rgba(0,0,0,0.1) !important;
    }

    .nav-container {
        display: flex !important;
        justify-content: space-between !important;
        align-items: center !important;
        width: 100% !important;
        padding: 0 15px !important;
    }

    .main-logo-img { height: 45px !important; width: auto !important; }
    .nav-actions { flex: 1 !important; display: flex !important; justify-content: center !important; }
    
/* --- BOUTON BURGER (AGRANDI ET ALIGNÉ) --- */
    .burger {
        flex: 1 !important;
        display: flex !important;
        justify-content: flex-end !important;
        background: none !important;
        border: none !important;
        cursor: pointer !important;
        padding: 0 !important;
    }

    .burger i {
        font-size: 32px !important; /* Taille augmentée pour une meilleure visibilité */
        color: #1a1a1a !important;   /* Couleur noire bien nette */
        display: block !important;
    }

/* --- ALIGNEMENT : LOGO GAUCHE | LANGUE MILIEU | BURGER DROITE --- */
    .nav-container {
        display: flex !important;
        justify-content: space-between !important;
        align-items: center !important;
        width: 100% !important;
        padding: 0 15px !important;
    }

    .logo-block {
        flex: 1 !important; /* Prend l'espace à gauche */
        display: flex !important;
        justify-content: flex-start !important;
    }

    .nav-actions {
        flex: 1 !important; /* Prend l'espace au milieu */
        display: flex !important;
        justify-content: center !important; /* CENTRE LA LANGUE */
    }

  

    /* --- AFFICHAGE FORCÉ DU MENU --- */
    .nav-links {
        display: none !important; /* Caché par défaut */
        position: fixed !important;
        top: 75px !important;
        left: 15px !important;
        right: 15px !important;
        background: #ffffff !important;
        border: 2px solid #27ae60 !important;
        border-radius: 15px !important;
        padding: 20px !important;
        z-index: 10001 !important;
        box-shadow: 0 10px 30px rgba(0,0,0,0.2) !important;
    }

    /* QUAND LE MENU EST ACTIF */
    .nav-links.show-menu {
    display: block !important; 
}

    /* FORCE L'AFFICHAGE DES LIENS INTERNES */
   .nav-links.show-menu .main-nav,
.nav-links.show-menu .nav-cta-mobile {
    display: flex !important;
    flex-direction: column !important;
    visibility: visible !important;
    opacity: 1 !important;
}

    .main-nav li {
        display: block !important; /* Force chaque ligne à exister */
        width: 100% !important;
    }

    .main-nav li a {
        display: block !important;
        padding: 15px !important;
        color: #1a1a1a !important;
        font-weight: 800 !important;
        border-bottom: 1px solid #eee !important;
        text-decoration: none !important;
    }

    /* BOUTON DANS LE MENU */
    .nav-cta-mobile {
        display: block !important;
        margin-top: 15px !important;
    }

    .nav-cta-mobile .btn-primary {
        display: block !important;
        background: #27ae60 !important;
        color: #fff !important;
        text-align: center !important;
        padding: 15px !important;
        border-radius: 10px !important;
        font-weight: 900 !important;
    }
    
 
 /* --- STYLE DE L'ACCORDÉON --- */
    
    /* On cache le sous-menu par défaut */
    .dropdown-menu {
        max-height: 0 !important; /* Technique pour une animation fluide */
        overflow: hidden !important;
        display: block !important; /* Doit rester block pour l'animation */
        opacity: 0 !important;
        transition: all 0.4s ease-in-out !important;
        background: #f8fafc !important;
        list-style: none !important;
        padding-left: 0 !important;
    }

    /* Quand on clique (classe .open ajoutée par le JS) */
    .has-dropdown.open .dropdown-menu {
        max-height: 500px !important; /* Donne assez de place pour tous les liens */
        opacity: 1 !important;
        padding: 10px 0 !important;
        margin-top: 5px !important;
    }

    /* La flèche (icône) */
    .has-dropdown > a .fa-chevron-down {
        transition: transform 0.3s ease !important;
        float: right !important; /* Aligne la flèche à droite du texte */
        margin-top: 5px !important;
    }

    /* Style des sous-liens pour qu'ils soient clairs */
    .dropdown-menu li a {
        padding: 12px 25px !important; /* On décale un peu à droite */
        font-size: 0.95rem !important;
        font-weight: 600 !important;
        border-bottom: 1px solid #eee !important;
        color: #444 !important;
    }
    
    /* ON SUPPRIME LE BOUTON DU HEADER QUI GÊNE */
    .nav-cta-desktop { 
        display: none !important; 
    }

 /* 4. HERO SECTION (Soudure avec le Header) */

    body.home-page #accueil.hero {

        min-height: auto !important;   /* SUPPRIME LE VIDE IMMENSE */
        padding-top: 20px !important;  /* COLLE LE CONTENU AU HEADER */
        padding-bottom: 40px !important;
        display: block !important;
        background-position: center top !important; /* Image bien calée */
    }

    #accueil .hero-grid {
        flex-direction: column !important; /* Contenu l'un sous l'autre */
        align-items: center !important;
        text-align: center !important;
        gap: 0px !important;
        width: 95% !important;
    }

    .hero-content {
        text-align: center !important;
        width: 100% !important;
    }

    /* 5. LE BADGE ET LE TITRE */
    .trust-tag {
        margin-top: 0 !important;
        margin-bottom: 10px !important; /* Réduit l'espace sous le badge */
        font-size: 0.8rem !important;
        display: inline-flex !important;
    }

    h1 .line-1, h1 .line-2 {
        font-size: 2.2rem !important;  /* Taille adaptée aux petits écrans */
        text-align: center !important;
        display: block !important;
        line-height: 1.1 !important; /* Resserre les deux lignes du titre */
    }

/* ============================================================
   RÉORGANISATION COMPACTE DU HERO (MOBILE)
   ============================================================ */

/* 1. On resserre la grille principale */
#accueil .hero-grid {
    display: grid !important;
    grid-template-columns: 1fr !important;
    grid-template-rows: auto auto auto auto auto !important; 
    gap: 0px !important; /* Espace très réduit entre les blocs */
    padding: 10px !important;
}

/* 2. On libère les éléments internes */
.hero-content {
    display: contents !important; 
}

/* 3. Placement précis et suppression des marges fantômes */
.trust-tag { 
    grid-row: 1 !important; 
    margin: 0 auto 5px auto !important; 
    font-size: 0.75rem !important;
}

h1 { 
   grid-row: 2 !important; 
    margin: 0 !important; 
    padding: 0 !important;
line-height: 0.8 !important; /* <--- PASSEZ À 0.8 POUR SOUDER LE TITRE */
    
}

h1 .line-1, h1 .line-2 {
    font-size: 1.8rem !important; /* Un peu plus petit pour gagner de la place */
}

.hero-description { 
   grid-row: 3 !important; 
   margin-top: -10px !important; /* On augmente l'aspiration vers le haut */
   margin-bottom: 0 !important;
   padding: 0 10px !important;    /* On met le padding du haut à 0 */
   font-size: 0.9rem !important;
   line-height: 1.2 !important;
}


/* 4. LE SIMULATEUR (compact) */
.hero-simulator { 
   grid-row: 4 !important; 
    width: 100% !important;
    margin-top: -25px !important; /* <--- ON MONTE PLUS HAUT POUR COLLER AU TEXTE */
    padding: 15px !important;
}

/* 5. LES STATS (tout en bas) */
.hero-stats { 
    grid-row: 5 !important; 
    width: 100% !important;
    margin-top: 5px !important;
    display: flex !important;
    justify-content: center !important;
    gap: 10px !important;
}

.stat-item {
    padding: 8px !important;
    margin: 0 !important;
}

/* --- RÉDUCTION DE LA HAUTEUR DU SIMULATEUR --- */

/* 1. On réduit l'espace interne global du cadre */
.hero-simulator {
    padding: 15px !important; 
}

/* 2. On resserre l'en-tête (Titre et Badge) */
.sim-header {
    margin-bottom: 10px !important;
}

.sim-title {
    font-size: 1rem !important; /* Un peu plus petit */
    line-height: 1.2 !important;
    margin-top: 5px !important;
}

.rate-badge {
    padding: 2px 10px !important;
    font-size: 0.75rem !important;
}

/* 3. On réduit l'espace des champs de saisie (Inputs) */
.sim-body .input-group {
    margin-bottom: 8px !important;
}

.sim-body label {
    font-size: 0.85rem !important;
    margin-bottom: 3px !important;
}

.sim-body input {
    padding: 8px 12px !important; /* Inputs moins hauts */
    height: auto !important;
}

/* 4. On réduit l'espace autour du bouton et du tableau de résultat */
.btn-calc {
    padding: 10px !important;
    margin-top: 10px !important;
    font-size: 0.95rem !important;
}

.result-table td {
    padding: 6px 10px !important; /* Cellules du tableau plus fines */
    font-size: 0.9rem !important;
}

#result-area {
    margin-top: 10px !important;
}

/* ============================================================
   2. SECTION PROPOS (NOS AVANTAGES) - MOBILE
   ============================================================ */

#propos.features-grid-section {
    padding: 30px 15px !important; /* Moins d'espace en haut/bas */
    background: #ffffff !important;
}

/* En-tête compact */
#propos .section-header {
    text-align: center !important;
    margin-bottom: 25px !important;
}

#propos .subtitle {
    color: #27ae60 !important;
    font-size: 0.75rem !important;
    font-weight: 800 !important;
    text-transform: uppercase !important;
    letter-spacing: 1px !important;
}

#propos h2 {
    font-size: 1.6rem !important;
    line-height: 1.2 !important;
    margin: 10px 0 !important;
    color: #1a1a1a !important;
}

#propos h2 span {
    color: #27ae60 !important;
}

#propos .section-header p {
    font-size: 0.9rem !important;
    color: #666 !important;
    line-height: 1.4 !important;
}

/* Grille de cartes empilées */
#propos .grid-cards {
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important; /* Petit espace entre les cartes */
}

/* Cartes horizontales et compactes pour Mobile */
#propos .feature-card {
    display: flex !important;
    align-items: center !important;
    text-align: left !important; /* Plus lisible sur mobile */
    padding: 15px !important;
    background: #f9f9f9 !important;
    border-radius: 12px !important;
    border: 1px solid #eee !important;
    gap: 15px !important;
}

/* Icônes adaptées au format ligne */
#propos .icon-circle {
    min-width: 45px !important;
    height: 45px !important;
    background: rgba(39, 174, 96, 0.1) !important;
    color: #27ae60 !important;
    border-radius: 10px !important; /* Carré arrondi plus moderne */
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 18px !important;
    margin: 0 !important; /* On enlève le centrage auto */
}

/* Ajustement du texte à côté de l'icône */
#propos .feature-card h3 {
    font-size: 1rem !important;
    margin-bottom: 2px !important;
    font-weight: 700 !important;
}

#propos .feature-card p {
    font-size: 0.85rem !important;
    line-height: 1.3 !important;
    color: #555 !important;
}

/* ============================================================
   SECTION OFFRES (COMPLÈTE) - MOBILE RESPONSIVE
   ============================================================ */

/* 1. Fond et espacement de la section */
#offres.offers-section {
    padding: 50px 15px !important;
    background-color: #f8fafc !important; /* Léger gris pour détacher */
}

/* 2. En-tête (H2, Span et Paragraphe) */
#offres .section-header-centered {
    text-align: center !important;
    margin-bottom: 40px !important;
}

#offres .section-header-centered h2 {
    font-size: 1.8rem !important;
    color: #1a1a1a !important;
    line-height: 1.2 !important;
    margin-bottom: 10px !important;
}

#offres .section-header-centered h2 span {
    color: #27ae60 !important; /* Le vert FinancePME */
    display: inline !important;
}

#offres .section-header-centered p {
    font-size: 0.95rem !important;
    color: #666 !important;
    max-width: 280px !important;
    margin: 0 auto !important;
}

#offres .header-accent-bar {
    width: 60px !important;
    height: 4px !important;
    background: #27ae60 !important;
    margin: 15px auto 0 auto !important;
    border-radius: 2px !important;
}

/* 3. Le conteneur des offres (On force l'empilement) */
#offres .offers-strip {
    display: flex !important;
    flex-direction: column !important; /* L'une en-dessous de l'autre */
    gap: 20px !important;
    width: 100% !important;
}

/* 4. L'unité d'offre (La carte) */
#offres .offer-unit.premium-border {
    display: flex !important;
    flex-direction: column !important; /* Image en haut, texte en bas */
    width: 100% !important;
    min-width: 100% !important; /* Sécurité contre la compression */
    background: #ffffff !important;
    border-radius: 15px !important;
    overflow: hidden !important;
    border: 1px solid #eee !important;
    box-shadow: 0 5px 15px rgba(0,0,0,0.05) !important;
}

/* 5. L'image de l'offre */
#offres .unit-img {
    width: 100% !important;
    height: 180px !important; /* Hauteur fixe pour toutes les photos */
    margin: 0 !important;
}

#offres .unit-img img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
}

/* 6. Le corps de texte sous l'image */
#offres .unit-body {
    padding: 20px !important;
    text-align: left !important;
    display: block !important;
}

#offres .unit-body h3 {
    font-size: 1.2rem !important;
    margin-bottom: 8px !important;
    color: #1a1a1a !important;
    font-weight: 700 !important;
}

#offres .unit-body p {
    font-size: 0.9rem !important;
    line-height: 1.4 !important;
    color: #555 !important;
    margin-bottom: 15px !important;
}

/* 7. Le lien "En savoir" */
#offres .unit-link {
    display: inline-flex !important;
    align-items: center !important;
    color: #27ae60 !important;
    text-decoration: none !important;
    font-weight: 700 !important;
    font-size: 0.9rem !important;
    gap: 8px !important;
}

#offres .unit-link i {
    font-size: 0.8rem !important;
}

/* ============================================================
   4. SECTION TÉMOIGNAGES (COMPLÈTE) - MOBILE
   ============================================================ */

/* --- EN-TÊTE DE CONFIANCE --- */

.testimonials-section {
    padding: 30px 0 !important;
}

.trust-header {
    text-align: center !important;
    margin-bottom: 20px !important;
    padding: 0 15px !important;
}

/* Réduction du titre avec l'émoji */
.trust-title {
    font-size: 1.25rem !important;
    line-height: 1.3 !important;
    margin-bottom: 12px !important;
    font-weight: 700 !important;
}

/* Le badge de score (plus compact) */
.trust-score-badge {
    background: #f8fafc !important;
    border: 1px solid #e2e8f0 !important;
    padding: 8px 15px !important;
    border-radius: 50px !important;
    display: inline-flex !important;
    flex-direction: column !important;
    align-items: center !important;
}

.score-val {
    font-size: 0.85rem !important;
    color: #475569 !important;
    margin-bottom: 2px !important;
}

.score-val strong {
    color: #1a1a1a !important;
}

/* Les étoiles dorées */
.stars-gold {
    color: #f1c40f !important;
    font-size: 0.75rem !important; /* Étoiles plus discrètes */
    letter-spacing: 2px !important;
}

/* --- LE SLIDER MANUEL (SANS ANIMATION) --- */

.testimonial-slider {
    width: 100% !important;
    mask-image: none !important; /* On enlève le fondu PC qui gêne le clic */
    overflow-x: auto !important; /* Active le glissement au doigt */
    scroll-snap-type: x mandatory !important;
    -webkit-overflow-scrolling: touch !important;
    padding: 15px 0 30px 0 !important;
}

.testimonial-track {
    display: flex !important;
    flex-wrap: nowrap !important; /* Aligne tout sur une ligne */
    animation: none !important;    /* STOPPE le défilement automatique PC */
    width: max-content !important;
    padding-left: 20px !important; /* Marge de début pour l'esthétique */
}

.testimonial-card {
    flex: 0 0 260px !important; /* Largeur fixe de la carte */
    margin-right: 15px !important;
    scroll-snap-align: center !important; /* Centre la carte au lâcher du doigt */
    background: #ffffff !important;
    border: 1px solid #edf2f7 !important;
    box-shadow: 0 4px 12px rgba(0,0,0,0.05) !important;
    white-space: normal !important; /* Permet au texte de s'afficher sur plusieurs lignes */
}

/* On cache la barre de défilement pour faire "Appli" */
.testimonial-slider::-webkit-scrollbar {
    display: none !important;
}

/* ============================================================
   5. BANNIÈRE CTA (APPEL À L'ACTION) - MOBILE
   ============================================================ */

.cta-banner {
    padding: 50px 20px !important;
    background: linear-gradient(135deg, #27ae60 0%, #1e8449 100%) !important; /* Dégradé vert pro */
    text-align: center !important;
    border-radius: 0 !important; /* On occupe toute la largeur */
}

/* On casse le flex "ligne" de l'ordinateur pour empiler les éléments */
.cta-flex {
    display: flex !important;
    flex-direction: column !important;
    gap: 30px !important;
    align-items: center !important;
}

/* Texte de la bannière */
.cta-text h2 {
    color: #ffffff !important;
    font-size: 1.6rem !important;
    line-height: 1.2 !important;
    margin-bottom: 15px !important;
    font-weight: 800 !important;
}

.cta-text p {
    color: rgba(255, 255, 255, 0.9) !important;
    font-size: 1rem !important;
    max-width: 300px !important;
    margin: 0 auto !important;
}

/* Conteneur des boutons */
.cta-btns {
    display: flex !important;
    flex-direction: column !important; /* Boutons l'un sur l'autre pour plus de clicabilité */
    width: 100% !important;
    gap: 15px !important;
}

/* Bouton Principal (Blanc) */
.btn-primary-white {
    background-color: #ffffff !important;
    color: #27ae60 !important;
    padding: 16px 25px !important;
    border-radius: 12px !important;
    font-weight: 800 !important;
    text-decoration: none !important;
    font-size: 1.05rem !important;
    box-shadow: 0 4px 15px rgba(0,0,0,0.1) !important;
    display: block !important;
}

/* Bouton Secondaire (Contour blanc) */
.btn-outline-white {
    background-color: transparent !important;
    color: #ffffff !important;
    border: 2px solid #ffffff !important;
    padding: 14px 25px !important;
    border-radius: 12px !important;
    font-weight: 700 !important;
    text-decoration: none !important;
    font-size: 1rem !important;
    display: block !important;
}

.btn-outline-white i {
    margin-right: 8px !important;
}

/* ============================================================
   6. FOOTER (PIED DE PAGE) - MOBILE RESPONSIVE
   ============================================================ */

.site-footer {
    padding: 40px 0 20px 0 !important;
    background-color: #1a1a1a !important; /* Noir pro */
    color: #ffffff !important;
    text-align: center !important;
}

/* 1. La grille : on passe d'une ligne à une seule colonne centrale */
.footer-content {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 40px !important;
    padding: 0 20px !important;
}

/* 2. Style des colonnes */
.footer-col {
    width: 100% !important;
    margin-bottom: 0 !important;
}

.footer-col h4 {
    color: #27ae60 !important;
    font-size: 1.2rem !important;
    margin-bottom: 20px !important;
    position: relative !important;
}

/* Soulignement discret sous les titres */
.footer-col h4::after {
    content: '' !important;
    position: absolute !important;
    bottom: -8px !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    width: 30px !important;
    height: 2px !important;
    background: #27ae60 !important;
}

/* 3. Logo et réseaux sociaux */
.footer-logo-container {
    margin-bottom: 20px !important;
}

.footer-logo-container img {
    max-width: 160px !important; /* Taille ajustée pour mobile */
    height: auto !important;
    filter: none !important; /* SUPPRIME LE FORÇAGE EN BLANC */
    display: block !important;
    margin: 0 auto !important; /* Centre l'image */
    margin: 0 auto 20px auto !important; }

.footer-desc {
    font-size: 0.9rem !important;
    line-height: 1.6 !important;
    color: #aaa !important;
    max-width: 300px !important;
    margin: 0 auto 20px auto !important;
}

.social-icons {
    display: flex !important;
    justify-content: center !important;
    gap: 15px !important;
}

.social-icons a {
    width: 40px !important;
    height: 40px !important;
    background: rgba(255,255,255,0.1) !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    color: #fff !important;
    text-decoration: none !important;
    font-size: 1.1rem !important;
}

/* 4. Liens et Contact */
.footer-links {
    list-style: none !important;
    padding: 0 !important;
}

.footer-links li {
    margin-bottom: 12px !important;
}

.footer-links a {
    color: #ccc !important;
    text-decoration: none !important;
    font-size: 0.95rem !important;
}

.contact-item {
    display: flex !important;
    flex-direction: column !important; /* Icône au-dessus du texte pour gagner de la place */
    align-items: center !important;
    gap: 5px !important;
    margin-bottom: 20px !important;
    color: #ccc !important;
    font-size: 0.9rem !important;
}

.contact-item i {
    color: #27ae60 !important;
    font-size: 1.2rem !important;
}

/* 5. Zone légale du bas */
.footer-bottom-area {
    margin-top: 40px !important;
    padding: 20px 15px !important;
    border-top: 1px solid rgba(255,255,255,0.05) !important;
}

.legal-badge {
    background: rgba(255, 255, 255, 0.05) !important;
    padding: 15px !important;
    border-radius: 8px !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    margin-bottom: 15px !important;
}

.legal-badge strong {
    font-size: 0.8rem !important;
    display: block !important;
    line-height: 1.4 !important;
    color: #fff !important;
}

.legal-text, .copyright {
    font-size: 0.75rem !important;
    color: #777 !important;
    margin-bottom: 5px !important;
}

}