/**
 * Correctifs de responsivité pour la Emocard
 * Ces règles vont compléter et override les styles existants
 */

/* Variables améliorées pour garantir un ratio constant */
:root {
    --card-ratio: 0.79; /* Width/Height pour maintenir les proportions */
}

/* Améliorations générales de responsivité */
.card-container {
    overflow: visible !important; /* Pour éviter que les effets 3D et boutons soient coupés */
    z-index: 1; /* Assure que la carte reste au-dessus des autres éléments */
    max-width: 100%; /* Garantit qu'on ne déborde jamais de l'écran */
    display: flex;
    flex-direction: column;
    align-items: center;
}

.premium-card-container {
    max-width: 100%; /* Garantit qu'on ne déborde jamais de l'écran */
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* Garantir proportions de la carte */
.gift-card {
    aspect-ratio: calc(1 / var(--card-ratio)); /* Garantit un ratio constant même lors du redimensionnement */
    max-width: 100%; /* Garantit qu'on ne déborde jamais de l'écran */
}

/* Optimisations pour tablettes et grands mobiles */
@media (max-width: 768px) {
    .card-container, 
    .premium-card-container {
        width: var(--card-mobile-width);
        max-width: min(var(--card-mobile-max-width), 95%);
        height: auto;
    }
    
    /* Ajustement des coins de la carte et des décorations pour qu'ils ne dépassent pas */
    .corner-decoration {
        transform: scale(0.85);
    }
}

/* Ajustements responsifs pour les petits écrans */
@media (max-width: 480px) {
    .card-title {
        font-size: 1.2rem !important;
        letter-spacing: 1px !important;
    }
    
    .card-recipient, .card-from {
        font-size: 0.95rem !important;
    }
    
    .card-message {
        font-size: 0.9rem !important;
        min-height: 60px !important;
    }
    
    /* Garantit que les éléments principaux sont correctement dimensionnés */
    .card-face {
        padding: 1.2rem 1rem !important;
    }
}

/* Ajustements pour très petits écrans (iPhone SE, etc.) */
@media (max-width: 375px) {
    :root {
        --card-mobile-max-width: 280px;
    }
    
    .card-face {
        padding: 1rem 0.8rem !important;
    }
    
    .card-title {
        font-size: 1rem !important;
        letter-spacing: 0.5px !important;
        margin-bottom: 0.5rem !important;
    }
    
    /* Réduction de certains éléments visuels pour gagner de l'espace */
    .card-logo {
        width: 45px !important;
        height: 45px !important;
        margin-bottom: 0.8rem !important;
    }
    
    /* Préserver la lisibilité du message */
    .card-message {
        font-size: 0.85rem !important;
        min-height: 50px !important;
    }
}

/* Optimisations pour orientation landscape sur petits écrans */
@media (max-height: 500px) and (orientation: landscape) {
    .card-container,
    .premium-card-container {
        margin: 0.5rem auto !important;
    }
    
    .card-face {
        padding: 0.8rem !important;
    }
    
    .card-logo {
        margin-bottom: 0.5rem !important;
    }
    
    .card-title {
        font-size: 1.1rem !important;
        margin-bottom: 0.4rem !important;
    }
}

/* Annulation partielle des effets 3D sur appareils tactiles */
@media (hover: none) and (pointer: coarse) {
    .gift-card:hover {
        transform: none !important;
        box-shadow: none !important;
    }
    
    .gift-card .card-logo,
    .gift-card .card-title,
    .gift-card .card-content-wrapper {
        transform: none !important;
    }
}