/**
 * Fichier utilitaire regroupant des class CSS ne faisant qu'une seule opération
 *
 * Par exemple des tailles de typographie, etc.
 */

/* ==========================================================================
   Root
   ========================================================================== */

:root {
    --Beige: #BB8F6E;
    --Bleu: #283A49;
    --Noir: #010101;
    --Blanc: #FFFFFF;
    --Degrad: linear-gradient(90deg, #BB8F6E 0%, #BC9170 45%, #C19877 67%, #CAA484 84%, #D7B697 99%, #D9B899 100%);

    --transition: all cubic-bezier(0.4, 0, 0.2, 1) 250ms;
    --cubic-bezier: cubic-bezier(0.4, 0, 0.2, 1);

    --space: 0.25rem;
}

*, *:before, *:after {
    box-sizing: border-box;
}

::selection {
    color: var(--Blanc);
    background-color: var(--Bleu);
}

/* ==========================================================================
   Textes
   ========================================================================== */

.-uppercase {
    text-transform: uppercase;
}

.-text-center {
    text-align: center;
}

.-text-left {
    text-align: left;
}

.-text-right {
    text-align: right;
}

/* Font weight
   ========================================================================== */

.-font-normal {
    font-weight: 400;
}

.-font-medium {
    font-weight: 500;
}

.-font-bold {
    font-weight: 700;
}



/* ==========================================================================
   Blocks
   ========================================================================== */

/* Margin
   ========================================================================== */

.-mx-auto {
    margin-left: auto;
    margin-right: auto;
}

/* Radius
   ========================================================================== */

.-rounded-full {
    border-radius: 9999px;
}

/* Display
   ========================================================================== */

.-whitespace-nowrap {
    white-space: nowrap;
}

.-overflow-auto {
    overflow: auto;
}

.-overflow-hidden {
    overflow: hidden;
}

.-sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border-width: 0;
}

.-mobile-only {
    display: none !important;
}



/* ==========================================================================
   AlpineJS
   ========================================================================== */

[x-cloak] {
    display: none !important;
}



/* ==========================================================================
   Responsive
   ========================================================================== */

@media screen AND (max-width: 768px) {

    .-desktop-only {
        display: none !important;
    }

    .-mobile-only {
        display: block !important;
    }
}