/*
* Nom du fichier : typo_simple_responsive.css
* Version : v2 - 27/11/2025
*/

/* === TABLETTES === */
@media (max-width: 768px) {
    .typo_container {
        padding: 16px;
    }

    .typo_header {
        padding: 40px 16px 30px;
    }

    .typo_section {
        padding: 24px;
    }

    .typo_section h2 {
        font-size: 1.2rem;
    }

    .typo_radio_grid {
        grid-template-columns: 1fr;
    }

    .typo_btn_group {
        flex-direction: column;
    }

    .typo_btn {
        width: 100%;
    }

    .typo_upload_zone {
        padding: 40px 24px;
    }

    .typo_preview_wrapper {
        max-height: 450px;
        padding: 12px;
    }

    .typo_crop_handle {
        width: 32px;
        height: 32px;
    }

    .typo_overlay_controls {
        flex-direction: column;
    }

    .typo_select_small {
        width: 100%;
    }

    .typo_slider_inline {
        flex-wrap: wrap;
    }

    .typo_slider_inline .typo_slider {
        width: 100%;
        order: 1;
    }
}

/* === MOBILES === */
@media (max-width: 480px) {
    .typo_container {
        padding: 12px;
    }

    .typo_header {
        padding: 30px 12px 20px;
    }

    .typo_header h1 {
        font-size: 1.5rem;
    }

    .typo_subtitle {
        font-size: 0.95rem;
    }

    .typo_section {
        padding: 20px 16px;
        margin-bottom: 16px;
        border-radius: 12px;
    }

    .typo_section h2 {
        font-size: 1.1rem;
        gap: 8px;
        margin-bottom: 20px;
    }

    .typo_section h2 svg {
        width: 20px;
        height: 20px;
    }

    .typo_config_group {
        padding: 16px;
        margin-bottom: 16px;
    }

    .typo_config_label {
        font-size: 0.95rem;
        flex-wrap: wrap;
    }

    .typo_upload_zone {
        padding: 32px 16px;
    }

    .typo_upload_icon svg {
        width: 48px;
        height: 48px;
    }

    .typo_upload_content h2 {
        font-size: 1.2rem;
    }

    .typo_btn {
        padding: 14px 20px;
        font-size: 0.95rem;
    }

    .typo_btn_large {
        padding: 16px 24px;
    }

    .typo_btn_download {
        padding: 18px 32px;
    }

    .typo_radio_label {
        padding: 12px;
    }

    .typo_preview_wrapper {
        max-height: 350px;
    }

    .typo_download_box {
        padding: 30px 20px;
    }

    .typo_crop_handle {
        width: 36px;
        height: 36px;
        border-width: 4px;
    }

    .typo_crop_controls {
        flex-direction: column;
    }

    .typo_tags_container {
        padding: 10px;
    }

    .typo_tag {
        font-size: 0.85rem;
        padding: 5px 10px;
    }
}

/* === TRÈS PETITS ÉCRANS === */
@media (max-width: 360px) {
    .typo_header h1 {
        font-size: 1.3rem;
    }

    .typo_config_value {
        font-size: 0.85rem;
    }

    .typo_btn_icon {
        padding: 10px 14px;
        font-size: 0.85rem;
    }
}

/* === ORIENTATION PAYSAGE MOBILE === */
@media (max-width: 768px) and (orientation: landscape) {
    .typo_upload_zone {
        min-height: auto;
        padding: 30px 20px;
    }

    .typo_preview_wrapper {
        max-height: 280px;
    }

    .typo_crop_container {
        max-height: 60vh;
    }
}

/* === GRAND ÉCRAN === */
@media (min-width: 1200px) {
    .typo_container {
        max-width: 1000px;
    }
}

/* === PREFERENCE REDUCED MOTION === */
@media (prefers-reduced-motion: reduce) {

    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        transition-duration: 0.01ms !important;
    }
}