/**
 * MycvTop Store - Responsive Styles
 * Optimisé pour Smartphone, Tablette et Desktop
 */

/* ============================================
   BREAKPOINTS
   ============================================ */
/* Mobile: 320px - 480px */
/* Tablette: 481px - 768px */
/* Desktop: 769px - 1200px */
/* Large Desktop: 1201px+ */

/* ============================================
   MOBILE FIRST - BASE STYLES & TYPOGRAPHY
   ============================================ */

/* Container responsive */
.container {
    width: 100%;
    padding-left: 1.25rem;
    padding-right: 1.25rem;
}

/* ============================================
   MOBILE SPECIFIC (max-width: 480px)
   ============================================ */
@media (max-width: 480px) {
    /* Typographie mobile - Modernized */
    h1 {
        font-size: 1.875rem; /* Slightly larger, more impact */
        line-height: 1.2;
        letter-spacing: -0.02em;
    }
    
    h2 {
        font-size: 1.625rem;
        line-height: 1.25;
        letter-spacing: -0.01em;
    }
    
    h3 {
        font-size: 1.375rem;
    }
    
    /* Boutons mobile */
    .btn {
        padding: 0.875rem 1.25rem;
        font-size: 0.95rem;
        width: 100%;
        border-radius: var(--border-radius-full, 9999px);
    }
    
    .btn-large {
        padding: 1rem 1.5rem;
        font-size: 1.05rem;
    }
    
    /* Espacements réduits */
    section {
        padding: 2.5rem 0;
    }
    
    .container {
        padding-left: 1rem;
        padding-right: 1rem;
    }
    
    /* Masquer certains éléments sur mobile */
    .hide-mobile {
        display: none !important;
    }
    
    /* Afficher uniquement sur mobile */
    .show-mobile {
        display: block !important;
    }
}

/* ============================================
   TABLETTE SPECIFIC (481px - 768px)
   ============================================ */
@media (min-width: 481px) and (max-width: 768px) {
    .hide-tablet {
        display: none !important;
    }
    
    .show-tablet {
        display: block !important;
    }
}

/* ============================================
   DESKTOP SPECIFIC (769px+)
   ============================================ */
@media (min-width: 769px) {
    .hide-desktop {
        display: none !important;
    }
    
    .show-desktop {
        display: block !important;
    }
}

/* ============================================
   ORIENTATION LANDSCAPE
   ============================================ */
@media (max-width: 768px) and (orientation: landscape) {
    /* Ajustements pour mode paysage */
    section {
        padding: 2rem 0;
    }
}

/* ============================================
   TOUCH DEVICES
   ============================================ */
@media (hover: none) and (pointer: coarse) {
    /* Augmenter les zones de clic pour les appareils tactiles */
    .btn,
    a,
    button {
        min-height: 44px;
        min-width: 44px;
    }
    
    /* Espacement supplémentaire pour les éléments interactifs */
    .interactive-element {
        padding: 1rem;
        margin: 0.5rem 0;
    }
}

/* ============================================
   PRINT STYLES
   ============================================ */
@media print {
    .no-print {
        display: none !important;
    }
    
    body {
        background: white;
        color: black;
    }
    
    a {
        text-decoration: underline;
    }
}