/* ============================================
   CORRECTIONS RESPONSIVE SUPPLÉMENTAIRES
   ============================================ */

/* Empêcher le débordement de texte sur tous les éléments */
/* Empêcher le débordement de texte sur tous les éléments */
* {
    word-wrap: break-word;
    overflow-wrap: break-word;
    hyphens: auto;
    box-sizing: border-box;
    /* Sécurité ultime */
    min-width: 0;
    /* Empêche les flex-items de déborder */
}

/* Bulletproof Global Reset */
/* Bulletproof Global Reset */
html {
    width: 100%;
    /* Keep width constraint */
    /* Removed overflow-x: hidden from HTML to fix sticky header */
}

body {
    overflow-x: clip;
    /* Modern alternative to hidden, safer for sticky */
    width: 100%;
    margin: 0;
    padding: 0;
}

/* Images et Vidéos 100% fluides */
img,
video,
iframe {
    max-width: 100%;
    height: auto;
    display: block;
    /* Évite les espaces fantômes sous les images inline */
}

/* Container responsive */
.container {
    width: 100%;
    max-width: 1200px;
    padding-left: clamp(20px, 5vw, 30px);
    /* Plus d'air sur les côtés */
    padding-right: clamp(20px, 5vw, 30px);
    margin: 0 auto;
    overflow: hidden;
    /* Sécurité supplémentaire */
}

/* Titres responsive avec clamp() - Ajustés pour tablette */
h1 {
    font-size: clamp(1.8rem, 4.5vw, 3.5rem);
    line-height: 1.2;
}

h2 {
    font-size: clamp(1.6rem, 3.8vw, 3rem);
    line-height: 1.3;
}

h3 {
    font-size: clamp(1.4rem, 2.8vw, 2.2rem);
    /* Reduced max size slightly to prevent wrapping */
    line-height: 1.3;
}

h4 {
    font-size: clamp(1.2rem, 2.8vw, 2rem);
    line-height: 1.4;
}

/* Logo responsive */
.logo h1 {
    font-size: clamp(1.4rem, 3.5vw, 2rem);
}

.logo .tagline {
    font-size: clamp(0.65rem, 1.8vw, 1.5rem);
}

/* Hero section responsive */
/* Hero section responsive - LIGHTER overrides */
.hero-content h2 {
    /* Only override font-size if needed, trust layout.css for margins except on very small screens */
    padding: 0 15px;
}

.hero-content p {
    font-size: clamp(0.95rem, 2.8vw, 1.3rem);
    padding: 20px 50px;
    /* Match layout.css */
    max-width: 90%;
    margin: 0 auto;
}

/* Alert box responsive */
.alert-box {
    font-size: clamp(0.9rem, 2.5vw, 1rem);
    padding: 15px;
}

.alert-box strong {
    display: block;
    margin-top: 5px;
}

/* Section title responsive */
.section-title {
    font-size: clamp(1.8rem, 4.5vw, 3rem);
    padding: 0 15px 25px;
    word-break: break-word;
    max-width: 100%;
    text-align: center;
    line-height: 1.3;
    position: relative;
}

/* Assurer que la fleur reste en dessous */
.section-title::after {
    bottom: -10px !important;
}

.section-title::before {
    bottom: 2px !important;
}

/* Service cards responsive */
.service-card h3 {
    font-size: clamp(1.3rem, 3vw, 1.6rem);
}

.service-card p {
    font-size: clamp(0.9rem, 2.5vw, 1rem);
}

/* Info boxes responsive */
.info-box h4 {
    font-size: clamp(1.1rem, 3vw, 1.4rem);
    margin-bottom: 25px !important;
    /* Force margin */
}

.info-box p {
    font-size: clamp(0.9rem, 2.5vw, 1rem);
}

/* Buttons responsive */
.btn-primary,
.btn-secondary {
    font-size: clamp(0.85rem, 2.5vw, 1rem);
    padding: clamp(10px, 3vw, 14px) clamp(20px, 5vw, 35px);
}

/* Mobile specific */
@media (max-width: 480px) {
    .container {
        padding-left: 15px;
        padding-right: 15px;
    }

    /* Force text wrapping */
    h1,
    h2,
    h3,
    h4,
    h5,
    h6,
    p,
    span,
    div {
        white-space: normal !important;
        word-break: break-word;
        overflow-wrap: break-word;
        hyphens: auto;
    }

    /* Reduce padding on mobile */
    .section-padding {
        padding: 40px 0;
    }

    /* Hero adjustments */
    .hero {
        height: 60vh;
        border-radius: 0 0 40px 40px;
    }

    /* Intro section */
    .intro-content h3 {
        /* Allow layout.css to handle sizing with clamp */
        margin-bottom: 15px;
    }

    .intro-content p {
        font-size: 0.95rem;
        line-height: 1.6;
        padding: 0 15px;
        /* Added breathing room */
        text-align: justify;
        /* Optional: makes it look neater if user likes justified text, but padding is key */
    }

    /* FIX: Reduce Hero Text Size and Padding on Mobile */
    .hero-content p {
        font-size: 0.95rem !important;
        /* Force smaller text */
        padding: 10px 20px !important;
        /* Reduce the bulky padding */
        width: auto;
        display: inline-block;
        line-height: 1.4;
    }

    /* Alert box mobile */
    .blog-post {
        flex-direction: column !important;
        gap: 20px;
    }

    /* Responsive for App Announcement Block */
    div[style*="flex-direction: row"] {
        flex-direction: column !important;
        text-align: center !important;
        gap: 30px !important;
    }

    div[style*="text-align: right"] {
        text-align: center !important;
        margin: 0 auto;
    }

    .alert-box i {
        font-size: 1.2rem;
    }

    /* Service grid mobile */
    .services-grid {
        grid-template-columns: 1fr;
        gap: 25px;
    }

    /* Info grid mobile */
    .info-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    /* Footer mobile */
    .footer-content {
        grid-template-columns: 1fr;
        gap: 30px;
        text-align: center;
    }

    .footer-col h4::after {
        left: 50%;
        transform: translateX(-50%);
    }
}

/* Tablet adjustments */
@media (min-width: 481px) and (max-width: 768px) {
    .services-grid {
        grid-template-columns: repeat(2, 1fr);
    }

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

/* ============================================
   TABLETTE PORTRAIT (810x1080 et similaires)
   ============================================ */
@media (min-width: 769px) and (max-width: 900px) {

    /* Navigation compacte pour tablette */
    .main-nav ul {
        gap: 15px;
    }

    .main-nav a {
        font-size: 0.8rem;
        padding: 5px 8px;
    }

    .logo h1 {
        font-size: 1.6rem;
    }

    .logo .tagline {
        font-size: 0.9rem;
    }

    /* Titres ajustés */
    .section-title {
        font-size: 2.2rem;
        padding: 0 20px 40px;
        /* Ajout d'espace en bas pour la fleur */
        word-break: break-word;
    }

    /* Hero section */
    .hero-content h2 {
        font-size: 2.8rem !important;
    }

    /* Intro section */
    .intro-content h3 {
        font-size: 2rem !important;
    }

    .intro-content p[style*="Great Vibes"] {
        font-size: 1.8rem !important;
    }

    /* Container plus compact */
    .container {
        padding-left: 25px;
        padding-right: 25px;
    }

    /* Services grid */
    .services-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 25px;
    }

    /* Info grid */
    .info-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* ============================================
   TABLETTE PORTRAIT ÉTROITE (700-810px)
   ============================================ */
@media (min-width: 700px) and (max-width: 810px) {

    /* Passer en menu mobile pour éviter le débordement */
    .main-nav {
        display: none;
    }

    .mobile-menu-btn {
        display: block !important;
    }

    /* Titres encore plus compacts */
    .section-title {
        font-size: 2rem;
    }



    /* Services en colonne unique */
    .services-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }
}

/* Very small screens */
@media (max-width: 360px) {
    .container {
        padding-left: 10px;
        padding-right: 10px;
    }

    .hero-content h2 {
        font-size: 1.8rem !important;
    }

    .intro-content h3 {
        font-size: 1.2rem !important;
    }

    .btn-primary,
    .btn-secondary {
        font-size: 0.8rem;
        padding: 10px 20px;
    }
}

/* --- Responsive Newsletter Popup --- */
@media (max-width: 768px) {
    .newsletter-popup-content {
        flex-direction: column;
        max-height: 85vh;
        overflow-y: auto;
    }

    .popup-image {
        min-height: 180px;
        flex: none;
        width: 100%;
        background-position: center;
    }

    .popup-text {
        padding: 30px 20px;
        text-align: center;
    }

    .popup-text h3 {
        font-size: 1.8rem;
    }

    .popup-close {
        top: 10px;
        right: 15px;
        color: white;
        /* Pour qu'on la voie sur l'image */
        text-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
        background: rgba(0, 0, 0, 0.3);
        width: 30px;
        height: 30px;
        line-height: 30px;
        border-radius: 50%;
        text-align: center;
    }
}