/**
 * Responsive CSS pour les pages spéciales - B'yours Agency
 * Blog, About, Services, Contact, Testimonials
 * Optimisation complète pour mobile
 */

/* ========== BLOG PAGE MOBILE ========== */
@media (max-width: 768px) {
    .blog-hero {
        padding: 8rem 0 5rem !important;
    }

    .blog-hero h1 {
        font-size: 2.5rem !important;
        padding: 0 1rem;
    }

    .blog-hero p {
        font-size: 1rem !important;
        padding: 0 1.5rem;
    }

    .blog-container {
        padding: 0 1rem !important;
    }

    .blog-intro h2 {
        font-size: 2rem !important;
    }

    .blog-grid {
        grid-template-columns: 1fr !important;
        gap: 2rem;
        padding: 0 !important;
    }

    .featured-article {
        grid-template-columns: 1fr !important;
    }

    .featured-content {
        padding: 2rem 1.5rem !important;
    }

    .featured-title {
        font-size: 1.8rem !important;
    }

    /* Modal du blog en mobile */
    .modal-body {
        grid-template-columns: 1fr !important;
    }

    .modal-article-content {
        padding: 2rem 1.5rem !important;
        max-height: 40vh !important;
        order: 1;
    }

    .modal-slideshow {
        padding: 1.5rem !important;
        order: 2;
    }

    .slideshow-container {
        height: 350px !important;
    }

    .categories-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 1.5rem;
    }

    .category-card {
        padding: 2rem 1rem !important;
    }

    .newsletter-form {
        flex-direction: column !important;
    }

    .newsletter-input,
    .newsletter-button {
        width: 100% !important;
    }
}

@media (max-width: 480px) {
    .blog-hero h1 {
        font-size: 2rem !important;
    }

    .blog-intro h2 {
        font-size: 1.6rem !important;
    }

    .article-title {
        font-size: 1.2rem !important;
    }

    .categories-grid {
        grid-template-columns: 1fr !important;
    }

    .modal-article-content {
        padding: 1.5rem 1rem !important;
    }

    .slideshow-container {
        height: 280px !important;
    }
}

/* ========== ABOUT PAGE MOBILE ========== */
@media (max-width: 768px) {
    .about-hero {
        padding: 8rem 0 5rem !important;
    }

    .about-hero h1 {
        font-size: 2.5rem !important;
        padding: 0 1rem;
    }

    .about-hero p {
        font-size: 1rem !important;
        padding: 0 1.5rem;
    }

    .about-container {
        padding: 0 1.5rem !important;
    }

    .about-content {
        padding: 5rem 0 !important;
    }

    .about-text h2 {
        font-size: 2rem !important;
    }

    .about-text p {
        font-size: 1rem !important;
    }

    .values-grid {
        grid-template-columns: 1fr !important;
        gap: 2rem !important;
    }

    .philosophy-content h2 {
        font-size: 2.5rem !important;
    }

    .philosophy-content p {
        font-size: 1rem !important;
    }
}

@media (max-width: 480px) {
    .about-hero {
        padding: 6rem 0 4rem !important;
    }

    .about-hero h1 {
        font-size: 2rem !important;
    }

    .about-content {
        padding: 4rem 0 !important;
    }

    .about-text h2 {
        font-size: 1.6rem !important;
    }

    .philosophy-content h2 {
        font-size: 2rem !important;
    }

    .value-card {
        padding: 1.5rem !important;
    }
}

/* ========== SERVICES PAGE MOBILE ========== */
@media (max-width: 768px) {
    .services-hero {
        padding: 8rem 0 5rem !important;
    }

    .services-hero h1 {
        font-size: 2.5rem !important;
        padding: 0 1rem;
    }

    .services-container {
        padding: 0 1rem !important;
    }

    .services-intro h2 {
        font-size: 2rem !important;
    }

    .service-category-title {
        font-size: 2rem !important;
        margin-bottom: 2rem !important;
    }

    .service-detail {
        padding: 2rem 1.5rem !important;
    }

    .service-detail h3 {
        font-size: 1.5rem !important;
    }

    .service-features {
        grid-template-columns: 1fr !important;
        gap: 1rem;
    }

    .pricing-card {
        padding: 2rem 1.5rem !important;
    }

    .pricing-price {
        font-size: 2.5rem !important;
    }
}

@media (max-width: 480px) {
    .services-hero h1 {
        font-size: 2rem !important;
    }

    .services-intro h2 {
        font-size: 1.6rem !important;
    }

    .service-category-title {
        font-size: 1.6rem !important;
    }

    .service-detail {
        padding: 1.5rem 1rem !important;
    }

    .pricing-card {
        padding: 1.5rem 1rem !important;
    }

    .pricing-price {
        font-size: 2rem !important;
    }
}

/* ========== CONTACT PAGE MOBILE ========== */
@media (max-width: 768px) {
    .contact-hero h1 {
        font-size: 2.5rem !important;
        padding: 0 1rem;
    }

    .contact-container {
        grid-template-columns: 1fr !important;
        gap: 3rem !important;
        padding: 0 1rem !important;
    }

    .contact-form-section {
        padding: 2rem 1.5rem !important;
        order: 1;
    }

    .contact-info {
        order: 2;
        position: static !important;
    }

    .form-header h2 {
        font-size: 2rem !important;
    }

    .form-row {
        grid-template-columns: 1fr !important;
    }

    .form-group {
        margin-bottom: 1.5rem !important;
    }

    .contact-item {
        flex-direction: row !important;
        text-align: left !important;
        gap: 1rem;
        padding: 1rem;
        background: var(--light-gray, #F8F6F3);
        border-radius: 10px;
        margin-bottom: 1rem;
    }

    .contact-icon {
        width: 45px !important;
        height: 45px !important;
        font-size: 1.2rem !important;
        flex-shrink: 0;
    }

    .contact-details {
        flex: 1;
    }

    .contact-label {
        font-size: 0.9rem !important;
        margin-bottom: 0.3rem;
    }

    .contact-value {
        font-size: 1rem !important;
    }

    .social-links {
        justify-content: center;
        flex-wrap: wrap;
        gap: 1rem;
    }

    .social-link {
        width: 45px !important;
        height: 45px !important;
    }
}

@media (max-width: 480px) {
    .contact-hero {
        padding: 6rem 0 4rem !important;
    }

    .contact-hero h1 {
        font-size: 2rem !important;
    }

    .contact-form-section {
        padding: 1.5rem 1rem !important;
    }

    .form-header h2 {
        font-size: 1.6rem !important;
    }

    .contact-item {
        flex-direction: column !important;
        text-align: center !important;
    }

    .contact-icon {
        align-self: center;
    }

    .submit-btn {
        width: 100% !important;
    }
}

/* ========== TESTIMONIALS PAGE MOBILE ========== */
@media (max-width: 768px) {
    .testimonials-hero {
        padding: 8rem 0 5rem !important;
    }

    .testimonials-hero h1 {
        font-size: 2.5rem !important;
        padding: 0 1rem;
    }

    .testimonials-container {
        padding: 0 1rem !important;
    }

    .testimonials-intro h2 {
        font-size: 2rem !important;
    }

    .testimonials-grid {
        grid-template-columns: 1fr !important;
        gap: 2rem !important;
        max-width: 400px;
        margin: 0 auto;
    }

    .testimonial-card {
        padding: 2rem 1.5rem !important;
    }

    .testimonial-avatar {
        width: 100px !important;
        height: 100px !important;
    }

    .testimonial-name {
        font-size: 1.1rem !important;
    }

    .testimonial-role {
        font-size: 0.9rem !important;
    }

    .testimonial-text {
        font-size: 1rem !important;
    }

    .stats-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 1.5rem !important;
    }

    .stat-number {
        font-size: 2.5rem !important;
    }
}

@media (max-width: 480px) {
    .testimonials-hero h1 {
        font-size: 2rem !important;
    }

    .testimonials-intro h2 {
        font-size: 1.6rem !important;
    }

    .testimonial-card {
        padding: 1.5rem 1rem !important;
    }

    .testimonial-avatar {
        width: 80px !important;
        height: 80px !important;
    }

    .stats-grid {
        grid-template-columns: 1fr !important;
    }

    .stat-number {
        font-size: 2rem !important;
    }
}

/* ========== BEFORE-AFTER PAGE MOBILE ========== */
@media (max-width: 768px) {
    .before-after-hero {
        padding: 8rem 0 5rem !important;
    }

    .before-after-hero h1 {
        font-size: 2.5rem !important;
        padding: 0 1rem;
    }

    .gallery-grid {
        grid-template-columns: 1fr !important;
        gap: 2rem !important;
    }

    .gallery-item {
        max-width: 400px;
        margin: 0 auto;
    }
}

@media (max-width: 480px) {
    .before-after-hero h1 {
        font-size: 2rem !important;
    }

    .gallery-item {
        max-width: 100%;
    }
}

/* ========== FOOTER MOBILE ========== */
@media (max-width: 768px) {
    .main-footer {
        padding: 4rem 0 2rem !important;
    }

    .footer-content {
        grid-template-columns: 1fr !important;
        gap: 2.5rem !important;
        text-align: center;
    }

    .footer-column h3 {
        font-size: 1.1rem !important;
        margin-bottom: 1rem !important;
    }

    .footer-links li {
        margin: 0.6rem 0;
    }

    .footer-links a {
        font-size: 0.95rem !important;
    }

    .footer-social {
        justify-content: center;
    }

    .social-icon {
        width: 40px !important;
        height: 40px !important;
        font-size: 1.1rem !important;
    }

    .footer-bottom {
        padding: 1.5rem 1rem 0 !important;
        flex-direction: column;
        gap: 1rem;
        text-align: center;
    }

    .copyright {
        font-size: 0.85rem !important;
    }

    .footer-legal {
        justify-content: center;
        flex-wrap: wrap;
    }

    .footer-legal a {
        font-size: 0.8rem !important;
    }
}

@media (max-width: 480px) {
    .main-footer {
        padding: 3rem 0 1.5rem !important;
    }

    .footer-content {
        gap: 2rem !important;
    }

    .footer-column h3 {
        font-size: 1rem !important;
    }

    .footer-links a {
        font-size: 0.9rem !important;
    }

    .social-icon {
        width: 35px !important;
        height: 35px !important;
    }

    .copyright {
        font-size: 0.8rem !important;
    }
}

/* ========== GENERAL MOBILE FIXES ========== */
@media (max-width: 768px) {
    /* Fix critique : Header toujours au-dessus */
    .main-header {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        width: 100% !important;
        z-index: 9999 !important;
        background: rgba(250, 247, 242, 0.98) !important;
    }

    /* Menu burger et menu mobile toujours accessibles */
    .mobile-menu-toggle {
        position: relative !important;
        z-index: 10001 !important;
    }

    .mobile-menu {
        z-index: 10000 !important;
    }

    /* Compenser l'espace du header fixed */
    body {
        padding-top: 70px !important;
    }

    .hero-section,
    .blog-hero,
    .about-hero,
    .services-hero,
    .contact-hero,
    .testimonials-hero,
    .before-after-hero {
        margin-top: 0 !important;
        padding-top: 8rem !important;
    }

    /* S'assurer que les sections ne couvrent pas le header */
    section,
    .hero-section,
    .blog-hero,
    .about-hero,
    .services-hero,
    .contact-hero,
    .testimonials-hero {
        position: relative !important;
        z-index: 1 !important;
    }

    /* Padding général pour toutes les pages */
    .hero-section,
    .main-content > section {
        padding-left: 1rem !important;
        padding-right: 1rem !important;
    }

    /* Fix hero title - empêcher le retour à la ligne */
    .hero-title {
        white-space: nowrap !important;
        font-size: 1.6rem !important;
        padding: 0 1rem !important;
    }
}

@media (max-width: 480px) {
    .hero-title {
        font-size: 1.3rem !important;
    }
}

@media (max-width: 400px) {
    .hero-title {
        font-size: 1.15rem !important;
    }
}

@media (max-width: 360px) {
    .hero-title {
        font-size: 1.05rem !important;
    }
}

@media (max-width: 768px) {

    /* Fix des titres longs */
    h1, h2, h3, h4, h5, h6 {
        word-wrap: break-word;
        hyphens: auto;
        overflow-wrap: break-word;
    }

    /* Fix des images débordantes */
    img {
        max-width: 100% !important;
        height: auto !important;
    }

    /* Fix des conteneurs */
    .container,
    .content-wrapper,
    .page-container {
        max-width: 100% !important;
        padding: 0 1rem !important;
        overflow-x: hidden;
    }

    /* Fix des boutons */
    button,
    .btn,
    .cta-button {
        min-height: 44px !important; /* Accessibilité tactile */
        padding: 12px 20px !important;
    }

    /* Fix des formulaires */
    input,
    textarea,
    select {
        font-size: 16px !important; /* Éviter le zoom iOS */
        padding: 12px !important;
    }

    /* Fix des marges */
    section {
        margin-bottom: 3rem !important;
    }

    /* Fix du header qui peut couvrir le contenu */
    .main-header + * {
        margin-top: 80px !important;
    }
}

/* ========== VERY SMALL SCREENS ========== */
@media (max-width: 360px) {
    body {
        font-size: 14px !important;
    }

    h1 {
        font-size: 1.8rem !important;
    }

    h2 {
        font-size: 1.4rem !important;
    }

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

    .container {
        padding: 0 0.75rem !important;
    }

    button,
    .btn {
        font-size: 0.85rem !important;
        padding: 10px 15px !important;
    }
}

/* ========== LANDSCAPE MODE ========== */
@media (max-width: 768px) and (orientation: landscape) {
    .hero-section,
    .blog-hero,
    .about-hero,
    .services-hero,
    .contact-hero,
    .testimonials-hero {
        padding: 5rem 0 3rem !important;
        min-height: auto !important;
    }

    .modal-content {
        max-height: 95vh !important;
    }

    .modal-article-content {
        max-height: 35vh !important;
    }

    .slideshow-container {
        height: 300px !important;
    }
}

/* ========== ACCESSIBILITY TOUCH TARGETS ========== */
@media (max-width: 768px) {
    /* Augmenter la taille des cibles tactiles */
    a,
    button,
    input[type="submit"],
    input[type="button"],
    .nav-link,
    .mobile-nav-list a {
        min-height: 44px !important;
        min-width: 44px !important;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

    /* Espacement pour éviter les clics accidentels */
    .mobile-nav-list li {
        margin: 0.5rem 0 !important;
    }
}

/* ========== PREVENT HORIZONTAL SCROLL ========== */
@media (max-width: 768px) {
    html,
    body {
        overflow-x: hidden !important;
        max-width: 100vw !important;
    }

    * {
        max-width: 100% !important;
    }

    /* Exception pour les modals */
    .modal,
    .modal-content {
        max-width: 100vw !important;
    }
}