/* =========================================
   ADAPTACCESSOIRES — RESPONSIVE
   ========================================= */


/* =========================================
   LARGE TABLET / SMALL DESKTOP
   ========================================= */

@media (max-width: 1200px) {

    :root {
        --aa-container: 1140px;
    }

}


/* =========================================
   TABLET
   ========================================= */

@media (max-width: 1024px) {

    :root {
        --aa-heading-xl: 54px;
        --aa-heading-lg: 44px;
        --aa-heading-md: 32px;
    }


    /* -----------------------------------------
       GLOBAL SECTIONS
       ----------------------------------------- */

    .aa-section {
        padding-block: var(--aa-space-11);
    }


    /* -----------------------------------------
       CONTAINERS
       ----------------------------------------- */

    .aa-container {
        width: min(
            calc(100% - 40px),
            var(--aa-container)
        );
    }


    .aa-container--narrow {
        width: min(
            calc(100% - 40px),
            var(--aa-container-narrow)
        );
    }

}


/* =========================================
   MOBILE
   ========================================= */

@media (max-width: 767px) {

    :root {
        --aa-heading-xl: 42px;
        --aa-heading-lg: 34px;
        --aa-heading-md: 28px;
        --aa-heading-sm: 24px;
    }


    /* -----------------------------------------
       CONTAINERS
       ----------------------------------------- */

    .aa-container,
    .aa-container--narrow {
        width: calc(100% - 30px);

        max-width: none;
    }


    /* -----------------------------------------
       GLOBAL SECTIONS
       ----------------------------------------- */

    .aa-section {
        padding-block: var(--aa-space-10);
    }


    /* -----------------------------------------
       SECTION HEADERS
       ----------------------------------------- */

    .aa-section-header {
        margin-bottom: var(--aa-space-7);
    }


    /* -----------------------------------------
       BUTTONS
       ----------------------------------------- */

    .aa-button {
        min-height: 48px;

        padding-inline: 22px;
    }


    /* -----------------------------------------
       GLOBAL IMAGES
       ----------------------------------------- */

    img {
        max-width: 100%;
    }

}


/* =========================================
   SMALL MOBILE
   ========================================= */

@media (max-width: 480px) {

    :root {
        --aa-heading-xl: 36px;
        --aa-heading-lg: 30px;
        --aa-heading-md: 26px;
    }


    /* -----------------------------------------
       CONTAINERS
       ----------------------------------------- */

    .aa-container,
    .aa-container--narrow {
        width: calc(100% - 24px);
    }


    /* -----------------------------------------
       SECTION HEADERS
       ----------------------------------------- */

    .aa-section-header {
        margin-bottom: var(--aa-space-6);
    }

}


/* =========================================
   VERY SMALL MOBILE
   ========================================= */

@media (max-width: 360px) {

    :root {
        --aa-heading-xl: 32px;
        --aa-heading-lg: 28px;
        --aa-heading-md: 24px;
        --aa-heading-sm: 21px;
    }


    .aa-container,
    .aa-container--narrow {
        width: calc(100% - 20px);
    }


    .aa-button {
        padding-inline: 18px;
    }

}


/* =========================================
   REDUCED MOTION
   ========================================= */

@media (prefers-reduced-motion: reduce) {

    html {
        scroll-behavior: auto;
    }


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

        animation-iteration-count: 1 !important;

        transition-duration: 0.01ms !important;

        scroll-behavior: auto !important;
    }

}