@charset "UTF-8";

/******** TABLE DES MATIÈRES ********/
/* 

IMPORTATIONS
RESET
VARIABLES
STYLES DE PAGE
MISE EN PAGE
    LOAD
    MAIN
    DIALOG
TYPOS
ÉLÉMENTS DE PAGE
    LOGO
UTILITAIRES
    AMÉLORATION PROGRESSIVE DU JAVASCRIPT

*/

/*** IMPORTATIONS ***/
@import url("https://fonts.googleapis.com/css2?family=Gabarito:wght@400..900&display=swap");

/*** RESET ***/
*,
*::before,
*::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/*** VARIABLES ***/
:root {
    font-size: 112.5%;

    --c-fuchsia: #29000d;
    --c-rose: #ff75a0;
    --c-framboise: #672238;
    --c-blanc: #fef0f5;
    --c-gris: #bfbfbf;

    /*** STYLES DE PAGE ***/
    background-color: var(--c-fuchsia);
    color: var(--c-blanc);
    font-family: "Gabarito", Arial, Helvetica, sans-serif;
    font-weight: 400;
}

/*** TYPOS ***/
h1 {
    font-size: 1.5rem;
}

small,
.texte--petit {
    font-size: 0.75rem;
}

.texte--gris {
    color: var(--c-gris);
}

/*** MISE EN PAGE ***/
/* LOAD */
.load {
    position: fixed;
    display: flex;
    background-color: var(--c-fuchsia);
    height: 100dvh;
    width: 100%;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    user-select: none;
}

/* MAIN */
.main {
    display: flex;
    flex-direction: column;
    height: 100dvh;
    gap: 3rem;
    justify-content: center;
    align-items: center;

    .ctnFlex {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        gap: 0.25rem;
    }
}

/* DIALOG */
#sectionMDJ[open] {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    flex-direction: column;
    padding: 1rem;
    gap: 1rem;
    background-color: var(--c-fuchsia);
    color: var(--c-blanc);
    border: var(--c-rose) 0.25rem solid;
    border-radius: 1rem;
    max-width: calc(100vw - 1rem);
    justify-content: center;
    align-items: center;
}

::backdrop {
    backdrop-filter: blur(1rem);
}

/*** ÉLÉMENTS DE PAGE ***/
/* LOGO */
:has(#loadScreen) .logo {
    transform: translateY(4rem);
}

.logo {
    position: relative;
    z-index: 2;
}

/* BOUTONS */
/* Primaire */
button,
.bouton {
    all: unset;
    cursor: pointer;
    display: inline-flex;
    gap: 0.5rem;
    padding: 0.75rem 1.5rem;
    background-color: var(--c-rose);
    color: var(--c-fuchsia);
    border-radius: 1rem;
}

.bouton.ouvert {
    background-color: var(--c-framboise);
    color: var(--c-blanc);
    border: var(--c-rose) 0.25rem solid;
}

#ouvrirMDJ {
    &.ouvert {
        & .cadeau-ouvert {
            display: inline-block;
        }

        & .cadeau-ferme {
            display: none;
        }
    }

    &:not(.ouvert) {
        & .cadeau-ouvert {
            display: none;
        }

        & .cadeau-ferme {
            display: inline-block;
        }
    }
}

/*** UTILITAIRES ***/
.fill-currentColor {
    fill: currentColor;
}   

/* AMÉLORATION PROGRESSIVE DU JAVASCRIPT */
:root:not(.js) .show-with-script {
    display: none;
}