/* ========================================
   HOME PAGE - Cookie Shop avec palette MIX
   ======================================== */

/* Variables CSS - Palette MIX */
:root {
    /* Couleurs principales */
    --mix-champagne: #F6ECD8;
    --mix-cream: #FAF7F2;
    --mix-cocoa: #B08070;
    --mix-cocoa-dark: #9A6B58;
    --mix-gold: #CCA748;
    --mix-gold-light: #D9B857;
    --mix-rose: #FF6B8F;
    --mix-rose-soft: #FF8BA5;
    
    /* Couleurs de fond */
    --mix-bg-main: #F9F4EE;
    --mix-bg-card: #FFF9F2;
    --mix-accent: #E6D8C8;
    
    /* Couleurs de texte */
    --mix-text-main: #3F2A1F;
    --mix-text-secondary: #6E503D;
    --mix-text-muted: #988977;
    
    /* Effets d'ombre */
    --mix-shadow-soft: 0 6px 20px rgba(103, 62, 48, 0.12);
    --mix-shadow-medium: 0 8px 28px rgba(103, 62, 48, 0.18);
    --mix-shadow-strong: 0 12px 40px rgba(103, 62, 48, 0.25);
    
    /* Effets de glow */
    --mix-glow-soft: 0 0 8px rgba(255, 107, 143, 0.3), 
                     0 0 15px rgba(255, 107, 143, 0.2),
                     0 0 25px rgba(204, 167, 72, 0.15);
                     
    --mix-glow-intense: 0 0 12px rgba(255, 107, 143, 0.5), 
                        0 0 24px rgba(255, 107, 143, 0.3),
                        0 0 35px rgba(204, 167, 72, 0.25);
    
    /* Rayons */
    --mix-radius-lg: 18px;
    --mix-radius-md: 12px;
    --mix-radius-full: 9999px;
}

/* Configuration de base */
body {
    font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    background-color: var(--mix-bg-main);
    color: var(--mix-text-main);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, .serif {
    font-family: 'Playfair Display', Georgia, serif;
    font-weight: 900;
}

/* Hero Overlay */
.hero-overlay {
    background: linear-gradient(
        to bottom, 
        rgba(63, 42, 31, 0.7) 0%, 
        rgba(63, 42, 31, 0.4) 50%, 
        rgba(63, 42, 31, 0.9) 100%
    );
}

/* Kraft Texture Background - Style nc-btn-primary */
.kraft-texture {
    background: linear-gradient(135deg, var(--mix-gold), var(--mix-rose-soft));
    box-shadow: var(--mix-shadow-soft), var(--mix-glow-soft);
    position: relative;
}

.kraft-texture::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: linear-gradient(135deg, rgba(255, 255, 255, 0.1) 25%, transparent 25%),
                      linear-gradient(225deg, rgba(255, 255, 255, 0.1) 25%, transparent 25%),
                      linear-gradient(45deg, rgba(255, 255, 255, 0.1) 25%, transparent 25%),
                      linear-gradient(315deg, rgba(255, 255, 255, 0.1) 25%, transparent 25%);
    background-size: 20px 20px;
    pointer-events: none;
}

.bg-beige-clair {
    background-color: #F69095;
}

/* Glass Card Effect - Pour section shop (fond clair) */
.glass-card {
    background: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(12px);
    border: 2px solid var(--mix-rose-soft);
}

/* Glass Card Effect - Pour section compose (fond rose) */
.compose-glass-card {
    background: rgba(255, 255, 255, 0.25);
    backdrop-filter: blur(12px);
    border: 2px solid rgba(255, 255, 255, 0.3);
}

/* Isometric Box 3D Effect */
.isometric-box {
    transform: perspective(1000px) rotateX(25deg) rotateY(-15deg) rotateZ(5deg);
    transition: transform 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.isometric-box.haptic-shake {
    animation: hapticShake 0.4s ease-in-out;
}

@keyframes hapticShake {
    0%, 100% { 
        transform: perspective(1000px) rotateX(25deg) rotateY(-15deg) rotateZ(5deg) scale(1); 
    }
    25% { 
        transform: perspective(1000px) rotateX(28deg) rotateY(-12deg) rotateZ(7deg) scale(1.02); 
    }
    75% { 
        transform: perspective(1000px) rotateX(22deg) rotateY(-18deg) rotateZ(3deg) scale(0.98); 
    }
}

/* Glow Effects */
.glow-gold {
    box-shadow: var(--mix-glow-soft);
}

.glow-gold:hover {
    box-shadow: var(--mix-glow-intense);
}

/* Cookie Shadow */
.cookie-shadow {
    filter: drop-shadow(0 10px 15px rgba(63, 42, 31, 0.2));
}

/* Micro Interactions */
.micro-interaction {
    transition: all 0.5s ease-out;
}

.micro-interaction:hover {
    transform: scale(1.02);
}

/* Loupe Effect (Zoom on hover) */
.loupe-effect {
    cursor: zoom-in;
    overflow: hidden;
}

.loupe-effect img {
    transition: transform 0.6s cubic-bezier(0.165, 0.84, 0.44, 1);
}

.loupe-effect:hover img {
    transform: scale(1.4);
}

/* Crumb Particles */
.crumb {
    position: fixed;
    pointer-events: none;
    z-index: 9999;
    border-radius: 2px;
}

/* Toast Notification Animation */
.toast-notification {
    animation: toastIn 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55) forwards;
}

@keyframes toastIn {
    from { 
        transform: translateX(100%) scale(0.5); 
        opacity: 0; 
    }
    to { 
        transform: translateX(0) scale(1); 
        opacity: 1; 
    }
}

/* Magnetic Button Wrapper */
.magnetic-wrap {
    display: inline-block;
    transition: transform 0.2s ease-out;
}

/* Custom Scrollbar - Adapté pour section compose (fond rose) */
.custom-scrollbar::-webkit-scrollbar {
    width: 6px;
}

.custom-scrollbar::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.5);
    border-radius: 9999px;
}

.custom-scrollbar::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.7);
}

.custom-scrollbar::-webkit-scrollbar-track {
    background: transparent;
}

/* Filling Slot Animation */
.filling-slot {
    transition: all 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
    transform: scale(0) rotate(-45deg);
    opacity: 0;
}

.filling-slot.active {
    transform: scale(1) rotate(0deg);
    opacity: 1;
}

/* Classes utilitaires pour les couleurs - Palette MIX */
.bg-chocolat {
    background-color: var(--mix-cocoa-dark);
}

.bg-or {
    background: linear-gradient(135deg, var(--mix-gold), var(--mix-rose-soft));
}

.bg-creme {
    background-color: var(--mix-cream);
}

.text-chocolat {
    color: var(--mix-cocoa-dark);
}

.text-or {
    color: var(--mix-gold);
}

/* Texte crème adapté pour fond clair */
.text-creme {
    color: var(--mix-text-main);
}

.border-or {
    border-color: var(--mix-rose-soft);
}

/* Effets de hover */
.hover\:text-or:hover {
    color: var(--mix-rose);
}

.hover\:border-or:hover {
    border-color: var(--mix-rose);
}

.hover\:bg-or:hover {
    background: linear-gradient(135deg, var(--mix-gold-light), var(--mix-rose));
}

/* Animations au survol */
.group:hover .group-hover\:bg-or {
    background: linear-gradient(135deg, var(--mix-gold), var(--mix-rose-soft));
}

.group:hover .group-hover\:text-chocolat {
    color: white;
}

.group:hover .group-hover\:border-or {
    border-color: var(--mix-rose);
}

/* Opacités personnalisées */
.text-chocolat\/80 {
    color: rgba(154, 107, 88, 0.8);
}

.text-chocolat\/60 {
    color: rgba(154, 107, 88, 0.6);
}

.text-chocolat\/50 {
    color: rgba(110, 80, 61, 0.5);
}

/* Textes crème adaptés pour fond clair */
.text-creme\/90 {
    color: rgba(63, 42, 31, 0.9);
}

.text-creme\/40 {
    color: rgba(110, 80, 61, 0.6);
}

.border-chocolat\/10 {
    border-color: rgba(154, 107, 88, 0.1);
}

.bg-chocolat\/40 {
    background-color: rgba(154, 107, 88, 0.4);
}

.bg-or\/20 {
    background-color: rgba(255, 107, 143, 0.2);
}

.bg-or\/10 {
    background-color: rgba(255, 107, 143, 0.1);
}

.bg-or\/5 {
    background-color: rgba(255, 107, 143, 0.05);
}

.border-or\/40 {
    border-color: rgba(255, 107, 143, 0.4);
}

.border-or\/20 {
    border-color: rgba(255, 107, 143, 0.2);
}

.border-or\/10 {
    border-color: rgba(255, 107, 143, 0.1);
}

.border-white\/20 {
    border-color: rgba(255, 255, 255, 0.2);
}

/* Fond crème adapté pour fond clair */
.bg-creme\/5 {
    background-color: rgba(176, 128, 112, 0.08);
}

/* Bordures personnalisées */
.border-l-or {
    border-left-color: var(--mix-rose);
}

.border-l-4 {
    border-left-width: 4px;
}

/* Notifications avec couleur rose */
.toast-notification {
    border-color: var(--mix-rose);
}

.toast-notification .bg-or\/20 {
    background-color: rgba(255, 107, 143, 0.2);
}

.toast-notification .text-or {
    color: var(--mix-rose);
}

.isometric-box {
    -webkit-transform: perspective(800px) rotateX(15deg) rotateY(-8deg) rotateZ(3deg);
    will-change: transform;
}

/* ================================================================
   MEDIA QUERIES MOBILE — Cookie Shop
   Compatibilité : Safari iOS (iPhone récents 375px–430px)

   ⚠️  RÈGLE D'OR DE CE FICHIER :
   Aucun sélecteur Tailwind échappé (pas de lg\:, \[, \/, etc.)
   Safari iOS ne les parse pas → on cible uniquement :
     - Les IDs HTML    (#compose, #shop, #isometric-box …)
     - Les classes CSS custom (.js-cookie-item, .glass-card …)
     - Les balises HTML simples (section, h2, img, button …)

   SOMMAIRE
   ────────────────────────────────────────────────────────────
   §1  Reset général mobile
   §2  Hero section
   §3  Composer — titre & intro
   §4  Composer — conteneur glassmorphism
   §5  Composer — box 3D isométrique + slots
   §6  Composer — badge compteur 0/6
   §7  Composer — liste des cookies (scrollable)
   §8  Composer — items cookie (lignes)
   §9  Composer — bouton "Commander le coffret"
   §10 Shop — en-tête (titre + lien boutique)
   §11 Shop — grille de cards
   §12 Shop — card individuelle
   §13 Shop — zone image cookie
   §14 Shop — nom + description (description masquée)
   §15 Shop — prix + bouton panier
   §16 Timer widget fixe
   §17 Toast notifications
   §18 Ajustements iPhone 17 standard  (376–393px)
   §19 Ajustements iPhone 17 Plus/Max  (394–430px)
   ================================================================ */


/* ================================================================
   §1 — RESET GÉNÉRAL MOBILE
   Empêche tout scroll horizontal parasite sur la page entière
   ================================================================ */
/* =========================================================
   MOBILE OPTIMISÉ GLOBAL (≤ 430px) — VERSION CLEAN
   ========================================================= */

@media (max-width: 430px) {

    /* ================================
       GLOBAL
       ================================ */
    body, main {
        overflow-x: hidden;
        width: 100%;
    }

    /* ================================
       HERO SECTION
       ================================ */
    .h-screen {
        height: 100svh !important;
    }

    .h-screen h1 {
        font-size: 3.25rem !important;
        line-height: 0.9 !important;
        margin-bottom: 1rem !important;
    }

    .h-screen p {
        font-size: 0.95rem !important;
        margin-bottom: 1.5rem !important;
        padding: 0 0.5rem !important;
    }

    .h-screen .inline-block {
        padding: 0.3rem 1rem !important;
        margin-bottom: 1rem !important;
    }

    .h-screen .inline-block span {
        font-size: 0.55rem !important;
        letter-spacing: 0.25em !important;
    }

    .h-screen .flex.flex-col {
        gap: 1rem !important;
    }

    .h-screen .js-magnetic-btn.group.relative {
        padding: 0.85rem 2rem !important;
        font-size: 0.85rem !important;
        border-radius: 999px !important;
    }

    .h-screen .js-magnetic-btn.group.relative span.flex {
        gap: 0.5rem !important;
    }

    .h-screen a.group.flex {
        font-size: 0.85rem !important;
        gap: 0.75rem !important;
    }

    .h-screen a.group.flex .w-12 {
        width: 2.25rem !important;
        height: 2.25rem !important;
    }

    .h-screen .absolute.bottom-10 {
        bottom: 1.25rem !important;
    }

    .h-screen .h-16 {
        height: 2.5rem !important;
    }

    /* ================================
       COMPOSE SECTION
       ================================ */
    #compose {
        padding: 1rem 0 !important;
    }

    #compose h2 {
        font-size: 2rem !important;
        text-align: center !important;
        margin-bottom: 0.5rem !important;
    }

    #compose .text-center {
        margin-bottom: 0.75rem !important;
    }

    #compose .text-center p {
        margin-top: 0.25rem !important;
    }

    #compose > div > div.grid {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        gap: 0.30rem !important;
        padding: 0.75rem !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }

    #compose .relative.py-20 {
        padding-top: 0.5rem !important;
        padding-bottom: 0.5rem !important;
    }

    #compose .space-y-6 {
        gap: 0.4rem !important;
    }

    #compose .space-y-6 > h3 {
        margin-bottom: 0.5rem !important;
        font-size: 1rem !important;
    }

    #compose .box-slot {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        aspect-ratio: 1 !important;
        width: 100% !important;
        padding: 0.2rem !important;
    }

    #compose .box-slot span {
        font-size: 2rem !important;
    }

    #compose .box-slot img {
        width: 85% !important;
        height: 85% !important;
        object-fit: cover !important;
        border-radius: 999px !important;
    }

    /* BOX WRAPPER */
    #box-wrapper {
        width: 100% !important;
        padding: 0.25rem 0 !important;
        display: flex !important;
        justify-content: center !important;
    }

    #isometric-box {
        transform: none !important;
        width: 100% !important;
        min-height: 230px !important;
        display: block !important;
        padding: 0.5rem !important;
        box-sizing: border-box !important;
    }

    #box-grid {
        display: grid !important;
        grid-template-columns: repeat(3, 1fr) !important;
        gap: 0.4rem !important;
        width: 100% !important;
        min-height: 180px !important;
    }

    #box-grid .box-slot {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        aspect-ratio: 1 / 1 !important;
        width: 100% !important;
        min-height: 80px !important;
        border-radius: 0.75rem !important;
        box-sizing: border-box !important;
    }

    #counter-badge {
        top: -8px !important;
        right: 50% !important;
        transform: translateX(50%) rotate(-6deg) !important;
        width: 56px !important;
        height: 56px !important;
    }

    #cookie-count {
        font-size: 0.65rem !important;
    }

    #order-box-btn {
        padding: 0.85rem !important;
        font-size: 0.85rem !important;
        margin-top: 0.5rem !important;
    }

    /* LISTE COOKIES */
    .custom-scrollbar {
        display: grid !important;
        grid-template-columns: repeat(3, 1fr) !important;
        gap: 0.5rem !important;
        max-height: none !important;
        overflow: visible !important;
        padding: 0 !important;
        width: 100% !important;
    }

    .custom-scrollbar .js-cookie-item {
        flex-direction: column !important;
        align-items: center !important;
        padding: 0.5rem !important;
        gap: 0.35rem !important;
        border-radius: 1rem !important;
    }

    .custom-scrollbar .js-cookie-item > div:first-child {
        width: 100% !important;
        height: auto !important;
        aspect-ratio: 1 !important;
        border-radius: 0.75rem !important;
        padding: 0 !important;
        overflow: hidden !important;
    }

    .custom-scrollbar .js-cookie-item > div:first-child img {
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
        border-radius: 0.75rem !important;
        transform: none !important;
    }

    .custom-scrollbar .js-cookie-item .flex-1 p:first-child {
        font-size: 0.7rem !important;
        text-align: center !important;
    }

    .custom-scrollbar .js-cookie-item .flex-1 p:last-child,
    .custom-scrollbar .js-cookie-item button {
        display: none !important;
    }

    /* ================================
       SHOP SECTION
       ================================ */
    #shop {
        padding-top: 2.5rem !important;
        padding-bottom: 2.5rem !important;
    }

    #shop .flex.flex-col {
        margin-bottom: 1.5rem !important;
        gap: 0.5rem !important;
    }

    #shop h2 {
        font-size: 2.5rem !important;
        line-height: 1.1 !important;
    }

    #shop span.text-sm {
        font-size: 0.65rem !important;
        margin-bottom: 0.25rem !important;
    }

    #shop a.group {
        font-size: 0.85rem !important;
    }

    #shop .grid {
        grid-template-columns: 1fr !important;
        gap: 1rem !important;
    }

    #shop .glass-card {
        padding: 1.25rem !important;
        border-radius: 2rem !important;
    }

    #shop .relative.mb-12 {
        margin-bottom: 1rem !important;
        height: 9rem !important;
    }

    #shop .glass-card img {
        width: 7rem !important;
        height: 7rem !important;
    }

    #shop .absolute.-top-4 {
        padding: 0.4rem 0.75rem !important;
        font-size: 0.55rem !important;
        border-radius: 0 0 0 1rem !important;
    }

    #shop h3 {
        font-size: 1.4rem !important;
        margin-bottom: 0.25rem !important;
    }

    #shop .text-center p {
        font-size: 0.75rem !important;
        margin-bottom: 0.75rem !important;
    }

    #shop .flex.items-center.justify-between {
        margin-top: 0.5rem !important;
    }

    #shop .text-3xl.font-black {
        font-size: 1.5rem !important;
    }

    #shop button.w-16 {
        width: 3rem !important;
        height: 3rem !important;
        border-radius: 1rem !important;
    }

    /* ================================
       TIMER WIDGET
       ================================ */
    .fixed.bottom-8.right-8 {
        bottom: 1rem !important;
        right: 1rem !important;
        padding: 0.6rem 0.9rem !important;
        border-radius: 1.5rem !important;
        gap: 0.6rem !important;
    }

    .fixed.bottom-8.right-8 .w-16 {
        width: 2rem !important;
        height: 2rem !important;
        border-radius: 0.6rem !important;
    }

    .fixed.bottom-8.right-8 .text-4xl {
        font-size: 1.1rem !important;
    }

    .fixed.bottom-8.right-8 .h-4,
    .fixed.bottom-8.right-8 .w-4 {
        height: 0.5rem !important;
        width: 0.5rem !important;
    }

    .fixed.bottom-8.right-8 p {
        font-size: 0.5rem !important;
        margin-bottom: 0.15rem !important;
    }

    .fixed.bottom-8.right-8 .text-2xl {
        font-size: 0.95rem !important;
        gap: 0.2rem !important;
    }

    /* ================================
       TOAST
       ================================ */
    #toast-container {
        top: 4.5rem !important;
        left: 1rem !important;
        right: 1rem !important;
    }

    /* ================================
       MAGNETIC BTN
       ================================ */
    .magnetic-btn-container {
        margin-top: 0.5rem !important;
    }

    /* ================================
       MODAL SUCCÈS PAIEMENT
       ================================ */
    #success-modal > div {
        padding: 2rem 1.25rem 1.5rem !important;
        border-radius: 2rem !important;
        margin: 0 1rem !important;
        max-width: 100% !important;
    }

    #success-modal .absolute.-top-16 {
        width: 4rem !important;
        height: 4rem !important;
        top: -2rem !important;
    }

    #success-modal .text-6xl {
        font-size: 1.75rem !important;
    }

    #success-modal .pt-20 {
        padding-top: 2.5rem !important;
    }

    #success-modal h2 {
        font-size: 2rem !important;
        margin-bottom: 0.75rem !important;
    }

    #success-modal .text-xl {
        font-size: 0.95rem !important;
        margin-bottom: 1rem !important;
    }

    #success-modal .bg-white\/50 {
        padding: 1rem !important;
        border-radius: 1.25rem !important;
        margin-bottom: 1rem !important;
    }

    #success-modal .bg-white\/50 span {
        font-size: 0.75rem !important;
    }

    #success-modal .text-lg {
        font-size: 0.85rem !important;
    }

    #success-modal .text-2xl {
        font-size: 1.1rem !important;
    }

    #success-modal .text-sm {
        font-size: 0.7rem !important;
        margin-bottom: 1rem !important;
    }

    #success-modal button {
        padding: 0.85rem !important;
        font-size: 0.8rem !important;
        border-radius: 1.25rem !important;
    }
}