/**
 * ============================================
 * AMÉLIORATIONS PAGE D'ACCUEIL - DEMANDE JANE
 * ============================================
 * Date: 15 Janvier 2026
 * 
 * Objectifs:
 * 1. Réduire les espaces entre sections
 * 2. Augmenter la taille des polices
 * 3. Boutons plus visibles (gras + couleurs vibrantes)
 * 4. Pages plus légères et aérées
 */

/* ============================================
   1. RÉDUCTION DES ESPACEMENTS ENTRE SECTIONS
   ============================================ */

/* Sections générales - réduction du padding */
.section {
    padding-top: 60px !important;
    padding-bottom: 50px !important;
}

/* Hero section - plus compact */
.welcome-area {
    padding: 80px 0 60px !important;
    min-height: auto !important;
}

/* Section features - plus compacte */
.home-feature {
    padding: 40px 0 30px !important;
    margin-top: -30px !important;
}

/* Role selector - plus compact */
.role-selector-section {
    padding: 35px 0 45px !important;
    margin-top: 0 !important;
}

/* Work process - plus compact */
.work-process-section,
#work-process {
    padding: 50px 0 40px !important;
}

/* Testimonials - plus compact */
#testimonials,
.testimonials-section {
    padding: 50px 0 40px !important;
}

/* Pricing - plus compact */
#pricing,
.pricing-section {
    padding: 50px 0 40px !important;
}

/* Stats counter - plus compact */
.stats-section,
.counter-section,
#counter {
    padding: 40px 0 30px !important;
}

/* Blog section - plus compact */
#blog,
.blog-section {
    padding: 50px 0 40px !important;
}

/* Marges entre éléments dans les sections */
.section-title,
.center-heading .section-title,
.left-heading .section-title {
    margin-bottom: 15px !important;
}

.center-heading p,
.section-description {
    margin-bottom: 30px !important;
}

/* Cards et items - marges réduites */
.features-small-item,
.work-process-item,
.pricing-item,
.testimonial-item,
.blog-post-thumb {
    margin-bottom: 20px !important;
}

/* ============================================
   2. AUGMENTATION DE LA TAILLE DES POLICES
   ============================================ */

/* Texte général - base 18px au lieu de 16px */
body {
    font-size: 18px !important;
    line-height: 1.7 !important;
}

/* Paragraphes */
p {
    font-size: 18px !important;
    line-height: 1.7 !important;
}

/* Titres plus grands */
h1, .h1 {
    font-size: 3rem !important;
}

h2, .h2,
.section-title {
    font-size: 2.2rem !important;
    font-weight: 700 !important;
}

h3, .h3 {
    font-size: 1.6rem !important;
}

h4, .h4,
.features-title {
    font-size: 1.3rem !important;
    font-weight: 600 !important;
}

h5, .h5 {
    font-size: 1.15rem !important;
    font-weight: 600 !important;
}

/* Hero text - plus grand */
.header-text h1 {
    font-size: 3.2rem !important;
    font-weight: 800 !important;
    line-height: 1.2 !important;
}

.header-text p {
    font-size: 1.3rem !important;
    line-height: 1.6 !important;
}

/* Descriptions dans les cartes */
.features-small-item p,
.work-process-item p,
.rd-card__description {
    font-size: 1rem !important;
    line-height: 1.6 !important;
}

/* ============================================
   3. BOUTONS PLUS VISIBLES - GRAS ET VIBRANTS
   ============================================ */

/* Tous les boutons - base */
.btn,
.main-button,
.main-button-slider,
a.btn {
    font-weight: 700 !important;
    font-size: 1.1rem !important;
    padding: 14px 35px !important;
    text-transform: none !important;
    letter-spacing: 0.3px !important;
    border-radius: 30px !important;
    transition: all 0.3s ease !important;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15) !important;
}

/* Bouton primaire - Cyan vibrant */
.btn-primary,
.main-button,
a.main-button {
    background: linear-gradient(135deg, #0891b2 0%, #06b6d4 100%) !important;
    border: none !important;
    color: #ffffff !important;
}

.btn-primary:hover,
.main-button:hover,
a.main-button:hover {
    background: linear-gradient(135deg, #0e7490 0%, #0891b2 100%) !important;
    transform: translateY(-3px) !important;
    box-shadow: 0 8px 25px rgba(8, 145, 178, 0.4) !important;
}

/* Bouton secondaire - Orange action */
.btn-secondary,
.btn-action,
.btn-orange {
    background: linear-gradient(135deg, #E46A2E 0%, #f07d42 100%) !important;
    border: none !important;
    color: #ffffff !important;
}

.btn-secondary:hover,
.btn-action:hover,
.btn-orange:hover {
    background: linear-gradient(135deg, #c85a24 0%, #E46A2E 100%) !important;
    transform: translateY(-3px) !important;
    box-shadow: 0 8px 25px rgba(228, 106, 46, 0.4) !important;
}

/* Bouton blanc (sur fond coloré) */
.btn-white,
.main-button-slider,
.header-text .main-button-slider {
    background: #ffffff !important;
    color: #0891b2 !important;
    border: 2px solid #ffffff !important;
    font-weight: 700 !important;
}

.btn-white:hover,
.main-button-slider:hover,
.header-text .main-button-slider:hover {
    background: rgba(255, 255, 255, 0.9) !important;
    color: #0e7490 !important;
    transform: translateY(-3px) !important;
    box-shadow: 0 8px 25px rgba(255, 255, 255, 0.3) !important;
}

/* Boutons dans le header/navbar */
.navbar .btn,
header .btn {
    font-weight: 700 !important;
    padding: 10px 25px !important;
}

/* Bouton Connexion - plus visible */
.navbar .btn-login,
.navbar a[href*="login"] {
    font-weight: 700 !important;
    color: #0891b2 !important;
}

/* Bouton S'inscrire - très visible */
.navbar .btn-register,
.navbar a[href*="register"] {
    background: linear-gradient(135deg, #0891b2 0%, #06b6d4 100%) !important;
    color: #ffffff !important;
    font-weight: 700 !important;
    padding: 10px 25px !important;
    border-radius: 25px !important;
}

.navbar .btn-register:hover,
.navbar a[href*="register"]:hover {
    background: linear-gradient(135deg, #0e7490 0%, #0891b2 100%) !important;
    transform: translateY(-2px) !important;
}

/* Boutons dans les cartes de rôle */
.role-card .btn {
    font-weight: 700 !important;
    font-size: 1rem !important;
    padding: 12px 28px !important;
}

.role-card .btn-light {
    background: #ffffff !important;
    color: #0891b2 !important;
    border: 2px solid #ffffff !important;
}

.role-card .btn-light:hover {
    background: #f0f9ff !important;
    transform: translateY(-2px) !important;
}

.role-card .btn-outline-light {
    background: transparent !important;
    color: #ffffff !important;
    border: 2px solid #ffffff !important;
}

.role-card .btn-outline-light:hover {
    background: #ffffff !important;
    color: #0891b2 !important;
}

/* ============================================
   4. PAGES PLUS LÉGÈRES - NETTOYAGE VISUEL
   ============================================ */

/* Fond plus léger pour certaines sections */
.section.colored {
    background: linear-gradient(180deg, #f8fcfd 0%, #ffffff 100%) !important;
}

/* Cartes plus légères */
.features-small-item,
.work-process-item,
.pricing-item {
    background: #ffffff !important;
    box-shadow: 0 2px 15px rgba(0, 0, 0, 0.06) !important;
    border: 1px solid rgba(0, 0, 0, 0.04) !important;
}

.features-small-item:hover,
.work-process-item:hover {
    box-shadow: 0 8px 30px rgba(8, 145, 178, 0.12) !important;
}

/* Réduction du nombre d'éléments visuels */
.section::before,
.section::after {
    display: none !important;
}

/* Textes moins denses */
.work-process-item .step-number,
.pricing-item .price-value {
    font-weight: 800 !important;
}

/* ============================================
   5. RESPONSIVE MOBILE
   ============================================ */

@media (max-width: 991px) {
    .section {
        padding-top: 45px !important;
        padding-bottom: 35px !important;
    }
    
    body, p {
        font-size: 16px !important;
    }
    
    h2, .section-title {
        font-size: 1.8rem !important;
    }
    
    .header-text h1 {
        font-size: 2.2rem !important;
    }
    
    .header-text p {
        font-size: 1.1rem !important;
    }
    
    .btn, .main-button {
        font-size: 1rem !important;
        padding: 12px 28px !important;
    }
}

@media (max-width: 576px) {
    .section {
        padding-top: 35px !important;
        padding-bottom: 25px !important;
    }
    
    body, p {
        font-size: 15px !important;
    }
    
    h2, .section-title {
        font-size: 1.5rem !important;
    }
    
    .header-text h1 {
        font-size: 1.8rem !important;
    }
    
    .btn, .main-button {
        font-size: 0.95rem !important;
        padding: 11px 24px !important;
    }
    
    .role-card .btn {
        padding: 10px 20px !important;
        font-size: 0.9rem !important;
    }
}

/* ============================================
   6. ANIMATION SUBTILE POUR LES CTA
   ============================================ */

@keyframes pulse-subtle {
    0%, 100% {
        box-shadow: 0 4px 15px rgba(8, 145, 178, 0.3);
    }
    50% {
        box-shadow: 0 4px 25px rgba(8, 145, 178, 0.5);
    }
}

.btn-primary,
.main-button,
.role-card .btn-light {
    animation: pulse-subtle 3s ease-in-out infinite;
}

.btn-primary:hover,
.main-button:hover,
.role-card .btn-light:hover {
    animation: none;
}