/**
 * Détection et optimisation multi-dispositifs
 * Améliore l'expérience utilisateur selon l'appareil
 */

/* ============================================
   VARIABLES RESPONSIVE
   ============================================ */
:root {
    --mobile-padding: 1rem;
    --tablet-padding: 1.5rem;
    --desktop-padding: 2rem;
}

/* ============================================
   UTILITAIRES RESPONSIVE
   ============================================ */

/* Masquer sur mobile */
@media (max-width: 768px) {
    .hide-mobile {
        display: none !important;
    }
}

/* Masquer sur tablette */
@media (min-width: 769px) and (max-width: 1024px) {
    .hide-tablet {
        display: none !important;
    }
}

/* Masquer sur desktop */
@media (min-width: 1025px) {
    .hide-desktop {
        display: none !important;
    }
}

/* Afficher uniquement sur mobile */
.show-mobile {
    display: none !important;
}

@media (max-width: 768px) {
    .show-mobile {
        display: block !important;
    }
}

/* Afficher uniquement sur tablette */
.show-tablet {
    display: none !important;
}

@media (min-width: 769px) and (max-width: 1024px) {
    .show-tablet {
        display: block !important;
    }
}

/* Afficher uniquement sur desktop */
.show-desktop {
    display: none !important;
}

@media (min-width: 1025px) {
    .show-desktop {
        display: block !important;
    }
}

/* ============================================
   CONTAINERS RESPONSIVE
   ============================================ */
.container {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 var(--desktop-padding);
}

@media (max-width: 1024px) {
    .container {
        padding: 0 var(--tablet-padding);
    }
}

@media (max-width: 768px) {
    .container {
        padding: 0 var(--mobile-padding);
    }
}

/* ============================================
   GRILLES RESPONSIVE
   ============================================ */
.grid-responsive {
    display: grid;
    gap: 2rem;
}

/* Desktop: 3 colonnes */
@media (min-width: 1025px) {
    .grid-responsive {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* Tablette: 2 colonnes */
@media (min-width: 769px) and (max-width: 1024px) {
    .grid-responsive {
        grid-template-columns: repeat(2, 1fr);
        gap: 1.5rem;
    }
}

/* Mobile: 1 colonne */
@media (max-width: 768px) {
    .grid-responsive {
        grid-template-columns: 1fr;
        gap: 1rem;
    }
}

/* ============================================
   TEXTE RESPONSIVE
   ============================================ */
.text-responsive-h1 {
    font-size: 2.5rem;
    line-height: 1.2;
}

@media (max-width: 1024px) {
    .text-responsive-h1 {
        font-size: 2rem;
    }
}

@media (max-width: 768px) {
    .text-responsive-h1 {
        font-size: 1.75rem;
    }
}

.text-responsive-h2 {
    font-size: 2rem;
    line-height: 1.3;
}

@media (max-width: 1024px) {
    .text-responsive-h2 {
        font-size: 1.75rem;
    }
}

@media (max-width: 768px) {
    .text-responsive-h2 {
        font-size: 1.5rem;
    }
}

/* ============================================
   BOUTONS RESPONSIVE
   ============================================ */
.btn-responsive {
    padding: 1rem 2rem;
    font-size: 1rem;
}

@media (max-width: 768px) {
    .btn-responsive {
        width: 100%;
        padding: 0.875rem 1.5rem;
        font-size: 0.95rem;
    }
}

/* ============================================
   IMAGES RESPONSIVE
   ============================================ */
.img-responsive {
    width: 100%;
    height: auto;
    display: block;
}

/* ============================================
   ESPACEMENT RESPONSIVE
   ============================================ */
.section-spacing {
    padding: 4rem 0;
}

@media (max-width: 1024px) {
    .section-spacing {
        padding: 3rem 0;
    }
}

@media (max-width: 768px) {
    .section-spacing {
        padding: 2rem 0;
    }
}

/* ============================================
   OPTIMISATIONS TACTILES (Smartphones/Tablettes)
   ============================================ */
@media (hover: none) and (pointer: coarse) {
    /* Augmenter la zone tactile des boutons */
    button,
    a.btn,
    input[type="submit"] {
        min-height: 44px;
        min-width: 44px;
    }
    
    /* Supprimer les effets hover sur tactile */
    *:hover {
        transition: none !important;
    }
    
    /* Améliorer les inputs */
    input,
    textarea,
    select {
        font-size: 16px; /* Évite le zoom iOS */
    }
}

/* ============================================
   ORIENTATION PAYSAGE (Smartphones)
   ============================================ */
@media (max-height: 500px) and (orientation: landscape) {
    .customization-frame {
        max-height: 300px;
    }
    
    .customization-header {
        margin-bottom: 1rem;
    }
    
    .customization-section {
        margin-bottom: 1rem;
    }
}

/* ============================================
   AFFICHAGE HAUTE DENSITÉ (Retina)
   ============================================ */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
    /* Utiliser des images 2x si disponibles */
    .logo-high-res {
        background-image: url('/assets/images/logo@2x.png');
        background-size: contain;
    }
}

/* ============================================
   MODE SOMBRE (Préférence système)
   ============================================ */
@media (prefers-color-scheme: dark) {
    :root {
        /* Variables pour mode sombre si nécessaire */
        --bg-dark: #111827;
        --text-dark: #f9fafb;
    }
    
    /* Désactivé par défaut - à activer si besoin */
    /* body {
        background: var(--bg-dark);
        color: var(--text-dark);
    } */
}

/* ============================================
   PERFORMANCES (Réduction mouvement)
   ============================================ */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}