/* Styles personnalisés de l'application */

/* Personnalisation Tailwind si nécessaire */
@tailwind base;
@tailwind components;
@tailwind utilities;

/* Typographie MADE TOMMY */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');

.product-title,
.accordion-title {
    font-family: 'Inter', sans-serif;
    font-weight: 400;
    font-style: normal;
    font-size: 14px;
    line-height: 30px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

/* Note: Pour utiliser la vraie police MADE TOMMY, 
   il faudra l'ajouter via @font-face ou un CDN */

/* Styles personnalisés */
.custom-scrollbar::-webkit-scrollbar {
    width: 8px;
}

.custom-scrollbar::-webkit-scrollbar-track {
    background: #f1f1f1;
}

.custom-scrollbar::-webkit-scrollbar-thumb {
    background: #888;
    border-radius: 4px;
}

.custom-scrollbar::-webkit-scrollbar-thumb:hover {
    background: #555;
}

/* ============================================
   HEADER RESPONSIVE - LOGO
   ============================================ */

/* Logo responsive */
.header-logo {
    width: 264px;
    height: 34px;
    transition: width 0.2s ease, height 0.2s ease;
}

/* Logo réduit sur tablette */
@media (max-width: 768px) {
    .header-logo {
        width: 200px;
        height: 26px;
    }
}

/* Logo encore plus petit sur mobile */
@media (max-width: 480px) {
    .header-logo {
        width: 150px;
        height: 20px;
    }
}

/* Très petits écrans */
@media (max-width: 360px) {
    .header-logo {
        width: 120px;
        height: 16px;
    }
}

/* ============================================
   HEADER RESPONSIVE - SAFE AREA (ENCOCHES)
   ============================================ */

/* Safe area pour les encoches des téléphones */
.safe-area-header {
    /* Padding top pour les encoches (iPhone X, etc.) */
    padding-top: env(safe-area-inset-top);
    padding-left: env(safe-area-inset-left);
    padding-right: env(safe-area-inset-right);
}

/* Ajustement du contenu du header pour éviter les encoches */
.safe-area-header .container {
    padding-left: max(0.75rem, env(safe-area-inset-left));
    padding-right: max(0.75rem, env(safe-area-inset-right));
}

/* Mobile : réduire la hauteur et ajuster les espacements */
@media (max-width: 640px) {
    .safe-area-header {
        min-height: calc(3.5rem + env(safe-area-inset-top));
    }
    
    .safe-area-header .container {
        padding-left: max(0.5rem, env(safe-area-inset-left));
        padding-right: max(0.5rem, env(safe-area-inset-right));
    }
    
    /* Réduire les espacements entre les icônes sur mobile */
    .safe-area-header .flex.items-center.space-x-2,
    .safe-area-header .flex.items-center.space-x-4 {
        gap: 0.5rem !important;
    }
    
    /* Réduire la taille des icônes sur très petits écrans */
    .safe-area-header svg {
        width: 1.25rem !important;
        height: 1.25rem !important;
    }
    
    /* Ajuster les badges pour qu'ils ne soient pas coupés */
    .safe-area-header .absolute {
        top: -0.25rem !important;
        right: -0.25rem !important;
    }
}

/* Très petits écrans avec encoches */
@media (max-width: 375px) {
    .safe-area-header {
        min-height: calc(3.25rem + env(safe-area-inset-top));
    }
    
    /* Réduire encore plus les espacements */
    .safe-area-header .container {
        padding-left: max(0.375rem, env(safe-area-inset-left));
        padding-right: max(0.375rem, env(safe-area-inset-right));
    }
    
    /* Logo plus petit */
    .safe-area-header .text-xl {
        font-size: 0.875rem !important;
    }
    
    /* Icônes encore plus petites */
    .safe-area-header svg {
        width: 1.125rem !important;
        height: 1.125rem !important;
    }
}

/* Menu mobile : safe area bottom */
.safe-area-menu {
    padding-bottom: env(safe-area-inset-bottom);
    padding-left: env(safe-area-inset-left);
    padding-right: env(safe-area-inset-right);
    max-height: calc(100vh - 3.5rem - env(safe-area-inset-top));
    overflow-y: auto;
}

/* ============================================
   MENU MOBILE AMELIORE
   ============================================ */

.mobile-menu-container {
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
}

.mobile-menu-link {
    display: flex;
    align-items: center;
    border-bottom: 1px solid #f3f4f6;
    margin: 0 0.5rem;
}

.mobile-menu-link:last-child {
    border-bottom: none;
}

.mobile-menu-link:hover {
    background-color: #f9fafb;
}

.mobile-menu-link:active {
    background-color: #f3f4f6;
}

/* Animation d'apparition du menu mobile */
#mobile-menu {
    transition: max-height 0.3s ease-out, opacity 0.2s ease-out;
    opacity: 1;
}

#mobile-menu.hidden {
    max-height: 0 !important;
    opacity: 0;
    overflow: hidden;
}

@media (max-width: 640px) {
    .safe-area-menu {
        max-height: calc(100vh - 3.25rem - env(safe-area-inset-top));
    }

    /* Menu mobile plus aéré */
    .mobile-menu-link {
        padding: 1rem 1rem !important;
        font-size: 15px !important;
    }
}

@media (max-width: 375px) {
    .mobile-menu-link {
        padding: 0.875rem 0.75rem !important;
        font-size: 14px !important;
    }
}

/* Fallback pour les navigateurs qui ne supportent pas env() */
@supports not (padding: env(safe-area-inset-top)) {
    .safe-area-header {
        padding-top: 0.5rem;
    }
    
    @media (max-width: 640px) {
        .safe-area-header {
            padding-top: 0.75rem;
        }
    }
}

/* ============================================
   OVERFLOW FIX - Empêcher le scroll horizontal
   ============================================ */
html, body {
    overflow-x: hidden;
    max-width: 100%;
}

/* ============================================
   SMOOTH SCROLLING GLOBAL
   ============================================ */
html {
    scroll-behavior: smooth;
}

@media (prefers-reduced-motion: no-preference) {
    html {
        scroll-behavior: smooth;
    }
}

/* Désactiver smooth scroll si l'utilisateur préfère réduire les animations */
@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }
    
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* ============================================
   ANIMATIONS AU SCROLL
   ============================================ */

/* État initial des éléments animés */
.scroll-animate {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

/* État visible */
.scroll-animate.visible {
    opacity: 1;
    transform: translateY(0);
}

/* Animation fade-in */
.scroll-fade {
    opacity: 0;
    transition: opacity 0.8s ease-out;
}

.scroll-fade.visible {
    opacity: 1;
}

/* Animation slide-in depuis la gauche */
.scroll-slide-left {
    opacity: 0;
    transform: translateX(-50px);
    transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}

.scroll-slide-left.visible {
    opacity: 1;
    transform: translateX(0);
}

/* Animation slide-in depuis la droite */
.scroll-slide-right {
    opacity: 0;
    transform: translateX(50px);
    transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}

.scroll-slide-right.visible {
    opacity: 1;
    transform: translateX(0);
}

/* Animation scale-in */
.scroll-scale {
    opacity: 0;
    transform: scale(0.9);
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

.scroll-scale.visible {
    opacity: 1;
    transform: scale(1);
}

/* Animation avec délai pour les éléments en grille */
.scroll-animate-delay-1 {
    transition-delay: 0.1s;
}

.scroll-animate-delay-2 {
    transition-delay: 0.2s;
}

.scroll-animate-delay-3 {
    transition-delay: 0.3s;
}

.scroll-animate-delay-4 {
    transition-delay: 0.4s;
}

/* Animation pour les cartes produits */
.product-card {
    transition: transform 0.3s ease, opacity 0.6s ease-out;
}

.product-card.scroll-animate {
    opacity: 0;
    transform: translateY(30px) scale(0.95);
}

.product-card.scroll-animate.visible {
    opacity: 1;
    transform: translateY(0) scale(1);
}

/* Animation pour les sections */
section.scroll-animate {
    opacity: 0;
    transform: translateY(50px);
    transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}

section.scroll-animate.visible {
    opacity: 1;
    transform: translateY(0);
}

/* Animation pour les images */
img.scroll-animate {
    opacity: 0;
    transform: scale(1.1);
    transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}

img.scroll-animate.visible {
    opacity: 1;
    transform: scale(1);
}

/* Désactiver les animations sur mobile si nécessaire (performance) */
@media (max-width: 768px) {
    .scroll-animate,
    .scroll-fade,
    .scroll-slide-left,
    .scroll-slide-right,
    .scroll-scale {
        transition-duration: 0.4s;
    }
}

/* ============================================
   PRODUCT CARDS - TITRES ET PRIX MOBILE
   ============================================ */

/* Styles pour les cartes produits sur mobile */
@media (max-width: 768px) {
    /* Titre du produit */
    .product-card h3,
    .product-card .product-title,
    .product-card .text-center h3,
    .inedit-product-name {
        font-size: 11px !important;
        line-height: 30px !important;
        letter-spacing: 0.13em !important;
    }

    /* Prix du produit */
    .product-card p,
    .product-card .price-main,
    .product-card .text-center p,
    .inedit-product-price {
        font-size: 11px !important;
        line-height: 30px !important;
        letter-spacing: 0.13em !important;
    }
}

/* Très petits écrans */
@media (max-width: 480px) {
    .product-card h3,
    .product-card .product-title,
    .product-card .text-center h3,
    .inedit-product-name {
        font-size: 11px !important;
        line-height: 30px !important;
        letter-spacing: 0.13em !important;
    }

    .product-card p,
    .product-card .price-main,
    .product-card .text-center p,
    .inedit-product-price {
        font-size: 11px !important;
        line-height: 30px !important;
        letter-spacing: 0.13em !important;
    }
}