/**
 * RESPONSIVE.CSS - Media Queries pour tous les appareils
 * Mobile, Tablet, Desktop
 */

/* ===========================
   TABLET (768px - 1024px)
   =========================== */
@media (max-width: 1024px) {
    /* Sections */
    section {
        padding: 3rem 0;
    }
    
    .section-title {
        font-size: 1.75rem;
    }
    
    .section-subtitle {
        font-size: 1rem;
    }
    
    /* Hero */
    .hero {
        min-height: 400px;
        padding: 4rem 0;
    }
    
    .hero-title {
        font-size: 2.25rem;
    }
    
    .hero-subtitle {
        font-size: 1.125rem;
    }
    
    /* Grilles */
    .grid-4 {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .grid-3 {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* ===========================
   MOBILE LARGE (481px - 767px)
   =========================== */
@media (max-width: 767px) {
    /* Typographie */
    html {
        font-size: 15px;
    }
    
    h1 { font-size: 2rem; }
    h2 { font-size: 1.5rem; }
    h3 { font-size: 1.25rem; }
    
    /* Sections */
    section {
        padding: 2.5rem 0;
    }
    
    .section-title {
        font-size: 1.5rem;
        margin-bottom: 0.75rem;
    }
    
    .section-subtitle {
        font-size: 0.9375rem;
        margin-bottom: 2rem;
    }
    
    /* Hero */
    .hero {
        min-height: 350px;
        padding: 3rem 0;
    }
    
    .hero-title {
        font-size: 1.75rem;
        margin-bottom: 1rem;
    }
    
    .hero-subtitle {
        font-size: 1rem;
        margin-bottom: 1.5rem;
    }
    
    /* Grilles - Passage en colonne unique */
    .grid-2,
    .grid-3,
    .grid-4 {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }
    
    /* Cards */
    .card {
        padding: 1.5rem;
    }
    
    .card-title {
        font-size: 1.125rem;
    }
    
    /* Boutons */
    .btn {
        padding: 0.625rem 1.25rem;
        font-size: 0.9375rem;
    }
    
    .btn-large {
        padding: 0.875rem 1.75rem;
        font-size: 1rem;
    }
    
    /* Formulaires */
    .form-control {
        padding: 0.625rem;
        font-size: 16px; /* Évite le zoom sur iOS */
    }
    
    /* Footer */
    .footer {
        padding: 2.5rem 0 1rem;
    }
    
    .footer-content {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }
    
    /* Container */
    .container {
        padding: 0 1rem;
    }
}

/* ===========================
   MOBILE SMALL (< 480px)
   =========================== */
@media (max-width: 480px) {
    /* Typographie encore plus petite */
    html {
        font-size: 14px;
    }
    
    h1 { font-size: 1.75rem; }
    h2 { font-size: 1.375rem; }
    h3 { font-size: 1.125rem; }
    
    /* Sections */
    section {
        padding: 2rem 0;
    }
    
    .section-title {
        font-size: 1.375rem;
    }
    
    .section-subtitle {
        font-size: 0.875rem;
    }
    
    /* Hero */
    .hero {
        min-height: 300px;
        padding: 2.5rem 0;
    }
    
    .hero-title {
        font-size: 1.5rem;
        margin-bottom: 0.75rem;
    }
    
    .hero-subtitle {
        font-size: 0.9375rem;
        margin-bottom: 1.25rem;
    }
    
    /* Cards */
    .card {
        padding: 1.25rem;
    }
    
    .card-icon {
        font-size: 2rem;
    }
    
    .card-title {
        font-size: 1rem;
    }
    
    /* Grilles */
    .grid {
        gap: 1.25rem;
    }
    
    /* Boutons */
    .btn {
        padding: 0.5rem 1rem;
        font-size: 0.875rem;
        width: 100%;
        display: block;
    }
    
    .btn-large {
        padding: 0.75rem 1.5rem;
        font-size: 0.9375rem;
    }
    
    /* Container */
    .container {
        padding: 0 0.75rem;
    }
    
    /* Footer */
    .footer {
        padding: 2rem 0 1rem;
    }
    
    .footer-section h3 {
        font-size: 1.125rem;
    }
}

/* ===========================
   SAMSUNG S25 SPÉCIFIQUE (360px)
   =========================== */
@media (max-width: 360px) {
    html {
        font-size: 13px;
    }
    
    .hero-title {
        font-size: 1.375rem;
    }
    
    .container {
        padding: 0 0.5rem;
    }
}

/* ===========================
   ORIENTATION PAYSAGE MOBILE
   =========================== */
@media (max-width: 767px) and (orientation: landscape) {
    .hero {
        min-height: 250px;
        padding: 2rem 0;
    }
    
    .hero-title {
        font-size: 1.5rem;
    }
    
    .hero-subtitle {
        font-size: 0.9375rem;
    }
}

/* ===========================
   IMAGES RESPONSIVE
   =========================== */
@media (max-width: 767px) {
    img {
        width: 100%;
        height: auto;
    }
    
    .logo img {
        max-height: 40px;
    }
}

@media (max-width: 480px) {
    .logo img {
        max-height: 35px;
    }
}

/* ===========================
   TABLES RESPONSIVE
   =========================== */
@media (max-width: 767px) {
    table {
        display: block;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
}

/* ===========================
   UTILITAIRES RESPONSIVE
   =========================== */
/* Cacher sur mobile */
.hide-mobile {
    display: block;
}

@media (max-width: 767px) {
    .hide-mobile {
        display: none !important;
    }
}

/* Cacher sur desktop */
.hide-desktop {
    display: none;
}

@media (max-width: 767px) {
    .hide-desktop {
        display: block !important;
    }
}

/* Texte responsive */
@media (max-width: 767px) {
    .text-center-mobile {
        text-align: center !important;
    }
    
    .text-left-mobile {
        text-align: left !important;
    }
}

/* Espacements responsives */
@media (max-width: 767px) {
    .mt-mobile-0 { margin-top: 0 !important; }
    .mt-mobile-1 { margin-top: 0.5rem !important; }
    .mt-mobile-2 { margin-top: 1rem !important; }
    
    .mb-mobile-0 { margin-bottom: 0 !important; }
    .mb-mobile-1 { margin-bottom: 0.5rem !important; }
    .mb-mobile-2 { margin-bottom: 1rem !important; }
    
    .px-mobile-1 { padding-left: 0.5rem !important; padding-right: 0.5rem !important; }
    .px-mobile-2 { padding-left: 1rem !important; padding-right: 1rem !important; }
}

/* ===========================
   PERFORMANCE - OPTIMISATIONS
   =========================== */
@media (max-width: 767px) {
    /* Désactiver animations pour performance sur mobile ancien */
    @media (prefers-reduced-motion: reduce) {
        * {
            animation-duration: 0.01ms !important;
            animation-iteration-count: 1 !important;
            transition-duration: 0.01ms !important;
        }
    }
}

/* ===========================
   RETINA / HAUTE DENSITÉ
   =========================== */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
    /* Images haute résolution si nécessaire */
}

/* ===========================
   PRINT - Impression
   =========================== */
@media print {
    .navbar,
    .footer,
    .hamburger,
    .mobile-menu,
    .mobile-overlay,
    .btn {
        display: none !important;
    }
    
    body {
        font-size: 12pt;
        color: #000;
        background: #fff;
    }
    
    a {
        color: #000;
        text-decoration: underline;
    }
}