@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
    #middle-office-body {
        display: grid;
        grid-template-areas:
            "header"
            "content"
            "footer";
        grid-template-rows: auto 1fr auto;
        grid-template-columns: 1fr;
    }
}

@layer components {
    .buttons {
        display: flex;
        justify-content: center;
    }

    .buttons.both {
        flex-direction: column-reverse;
        gap: 1rem; /* space-y-4 */

        /* Styles appliqués à partir du breakpoint XL (1280px) */
        @media (min-width: 80rem) {
            flex-direction: row; /* xl:flex-row */
            gap: 1rem 1rem; /* xl:space-x-4 xl:space-y-0 */
        }
    }

    .both {
        display: flex;
        justify-content: center;
        gap: 1rem; /* space-x-4 */
        flex-direction: column;

        /* Styles appliqués à partir du breakpoint SM (640px) */
        @media (min-width: 40rem) {
            flex-direction: row; /* xl:flex-row */
            gap: 1rem 1rem; /* xl:space-x-4 xl:space-y-0 */
        }
    }

    .card {
        .btn-submit-contact {
            display: flex;
            justify-content: center;
            align-items: center;
        }
    }

   .form-contact, .collection-products-intro {
       @media (max-width: 1024px) {
           width: 100%;
       }
       @media (min-width: 1025px) {
           width: 65%;
       }
       display: flex;
       justify-content: center;
       align-items: center;
   }

    .champ {
        input, select, textarea {
            width: 100%;
            border-radius: 5px;
            height: 45px;
            background-color: white;
            border-color: #E8E8E8 !important;
            padding: 15px !important;
            margin-bottom: 15px !important;
            color: grey !important;
        }

        .textareaMessage {
            height: 60px;
        }
    }
}