/* ========================================= 

   STYLE SPÉCIFIQUE ACCUEIL (HOME) 

   ========================================= */ 

  

/* --- 1. HERO COMPACT (PC) --- */ 

/* On écrase le min-height: 60vh du global.css */ 

.hero { 

    min-height: 40vh !important;  

    padding: 60px 20px !important; 

} 

  

/* --- 2. PROCESS SECTION (Déjà validé) --- */ 

.process-section { 

    padding: 80px 20px; 

    text-align: center; 

    background: white; 

    border-bottom: 1px solid var(--border-soft);  

} 

.process-section h2 { margin-bottom: 50px; font-size: 2rem; color: var(--text-title); } 

.process-steps { display: flex; justify-content: center; gap: 40px; flex-wrap: wrap; max-width: 1200px; margin: 0 auto; } 

.step-card { flex: 1; min-width: 280px; padding: 20px; position: relative; text-align: center; } 

  

.step-number { 

    font-size: 3rem; font-weight: 900; color: #e2e8f0; margin-bottom: -20px; 

    position: relative; z-index: 1; font-family: 'Montserrat', sans-serif; line-height: 1; 

} 

.step-card h3 { position: relative; z-index: 2; color: var(--text-title); margin-bottom: 15px; font-size: 1.25rem; } 

.step-card p { position: relative; z-index: 2; color: var(--text-main); line-height: 1.5; } 

  

  

/* --- 3. MOBILE : CARTES CÔTE À CÔTE --- */ 

@media (max-width: 768px) { 

     

    /* Le Hero encore plus compact sur mobile */ 

    .hero { min-height: auto !important; padding: 40px 20px !important; } 

    .hero h1 { font-size: 1.8rem; } 

  

    /* Forcer l'affichage en ligne (Row) au lieu de colonne */ 

    .split-section { 

        display: flex !important; 

        flex-direction: row !important; /* C'est la clé */ 

        flex-wrap: nowrap !important; 

        align-items: stretch; 

        gap: 10px !important; 

        padding: 0 10px !important; 

        margin: 30px auto !important; 

    } 

  

    /* Style compact des cartes */ 

    .card { 

        flex: 1 !important; 

        width: 50% !important; 

        min-width: 0 !important; /* Permet de descendre sous les 300px du global */ 

        padding: 15px 10px !important; 

        display: flex; 

        flex-direction: column; 

        justify-content: center; 

        align-items: center; 

        text-align: center; 

    } 

  

    /* On cache les détails encombrants sur mobile */ 

    .card ul,  

    .card p:not(.mobile-visible) { /* On cache tout sauf les p avec cette classe */ 

        display: none !important;  

    } 

  

    /* On réduit la taille des titres */ 

    .card h2 {  

        font-size: 0.95rem !important;  

        margin: 5px 0 0 0 !important;  

    } 

     

    /* On ajuste le bouton */ 

    .card .btn-b2b-outline,  

    .card .btn-b2c-outline { 

        padding: 8px 15px !important; 

        font-size: 0.7rem !important; 

        margin-top: 10px !important; 

        width: 100% !important; 

    } 

     

    /* Ajustement de l'icône */ 

    .split-section .icon-svg { 

        width: 28px !important; height: 28px !important; 

        margin: 0 !important; 

    } 

     

    /* On cache le conteneur flex du header de carte pour le refaire en colonne simple */ 

    .card > div:first-child { 

        display: flex; 

        flex-direction: column; 

        align-items: center; 

        margin-bottom: 5px !important; 

    } 

}