/* ========== CORRECTIF RESPONSIVITÉ MOBILE - SIMPLE ET ÉLÉGANT ========== */
/* Correction minimaliste qui ne touche PAS aux interactions */

/* 📐 VARIABLES D'ESPACEMENT HARMONISÉES AVEC CARD-REVEAL.CSS */
:root {
    --space-xs: 0.5rem;
    --space-sm: 1rem;
    --space-md: 1.5rem;
    --container-padding: clamp(1rem, 5vw, 3rem);
}

/* Seule correction nécessaire : dimensionnement du conteneur sur mobile */
/* 🚀 STANDARDISATION : Utilisation des mêmes dimensions que card-reveal.css */
@media (max-width: 768px) {
    #gift-card-container {
        width: clamp(280px, 85vw, 420px); /* ✅ Aligné avec --card-width */
        max-width: clamp(320px, 90vw, 380px); /* ✅ Responsive intelligent */
        min-height: 300px;
        margin: var(--space-md) auto; /* ✅ 1.5rem = 24px harmonisé */
        padding: var(--space-xs); /* ✅ 0.5rem = 8px harmonisé */
    }
    
    /* Si la carte n'apparaît toujours pas, message de fallback */
    #gift-card-container:empty::after {
        content: "🎁 Cliquez pour découvrir votre Emocard";
        display: block;
        padding: 60px 20px;
        text-align: center;
        color: #D4AF37;
        font-size: 1.1rem;
        background: white;
        border: 2px dashed #D4AF37;
        border-radius: 12px;
        box-shadow: 0 4px 20px rgba(0,0,0,0.1);
        cursor: pointer;
    }
}

/* Petit écran : ajustement standardisé */
@media (max-width: 480px) {
    #gift-card-container {
        max-width: clamp(280px, 95vw, 350px); /* ✅ Plus cohérent */
        padding: calc(var(--space-xs) / 2); /* ✅ 0.25rem = 4px harmonisé */
    }
}

/* Empêche l'effondrement du flex et force la carte à rester visible sur mobile */
@media (max-width: 800px) {
  .card-reveal-container,
  .gift-wrapper {
    min-height: 400px !important;
    height: auto !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: flex-start !important;
    overflow: visible !important;
  }
  #giftPackage {
    display: block !important;
    position: relative !important;
    opacity: 1 !important;
    z-index: 10 !important;
    pointer-events: auto !important;
    min-height: 320px !important;
    min-width: 220px !important;
  }
}

/* 🚀 OPTIMISATION LANDSCAPE : Package d'emballage plus grand en mode paysage */
@media (max-height: 600px) and (orientation: landscape) and (max-width: 800px) {
  #giftPackage {
    min-height: 280px !important;
    min-width: 200px !important;
    max-width: 400px !important;
  }
  
  .gift-wrapper {
    min-height: 350px !important;
  }
}