#theme_preview_container {
    background-color: unset !important;
    display: inline-block;
    position: relative;
    transition: background-color 0.3s ease, border-color 0.3s ease;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    width: 100%;
    height: 415px;
    border: 1px solid;
}

#theme_preview {
    width: 580px;
    position: absolute;
}

#theme_preview_parent {
    position: relative;
}


body {
    font-family: 'Arial', sans-serif;
}

canvas {
    max-width: 100%;
}

.container {
    margin-top: 20px;
}

.input-field input, .input-field select {
    font-size: 1.2rem; /* Agrandir la taille du texte */
    padding: 10px;
}

.input-field label {
    font-size: 1rem; /* Augmenter la taille des labels */
}

/* Agrandir le bouton sur mobile */
.btn {
    font-size: 1.2rem;
}

/* Styles pour les prévisualisations */
#theme_preview, #theme_preview_container {
    max-width: 100%;
    width: 100%;
    height: auto;
}

/* Utilisation des media queries pour l'adaptation mobile */
@media screen and (max-width: 768px) {
    /* Champs de saisie plus grands pour les petits écrans */
    .input-field input, .input-field select {
        font-size: 1.5rem; /* Augmenter la taille de la police sur mobile */
        padding: 15px;
    }

    .input-field label {
        font-size: 1.2rem; /* Augmenter la taille des labels sur mobile */
    }

    /* Agrandir le titre sur mobile */
    h4 {
        font-size: 1.8rem;
    }

    /* Espacement entre les champs */
    .row {
        margin-bottom: 20px;
    }

    /* Ajustement de la disposition des colonnes sur mobile */
    .col.s12.l6 {
        width: 100%;
        margin-bottom: 20px;
    }

    /* Agrandir le prix total */
    #prix_total {
        font-size: 1.5rem;
        margin-bottom: 20px;
    }

    /* Agrandir le texte de la prévisualisation */
    #theme_text_1, #theme_text_2 {
        font-size: 1.5rem; /* Agrandir la taille du texte de prévisualisation */
        padding: 10px;
    }
}

/* Plus de personnalisation pour les petites tailles d'écran */
@media screen and (max-width: 480px) {
    /* Ajuster la taille du bouton encore plus pour les petits appareils */
    .btn {
        font-size: 1.4rem;
    }

    /* Agrandir le prix pour plus de visibilité */
    #prix_total {
        font-size: 1.7rem;
    }
}