/* ============================================================
   VARIABLES GLOBALES
   ============================================================ */

:root {

    --fond:
        #111827;

    --fond-secondaire:
        #1f2937;

    --carte:
        #374151;

    --texte:
        #ffffff;

    --texte-secondaire:
        #cbd5e1;

    --accent:
        #3b82f6;

    --danger:
        #ef4444;

    --ombre:
        rgba(0,0,0,0.45);

    --rayon:
        18px;

}


/* ============================================================
   MODE CLAIR

   Activé plus tard par JavaScript avec :
   body.clair
   ============================================================ */

body.clair {

    --fond:
        #f3f4f6;

    --fond-secondaire:
        #ffffff;

    --carte:
        #e5e7eb;

    --texte:
        #111827;

    --texte-secondaire:
        #374151;

    --ombre:
        rgba(0,0,0,0.15);

}



/* ============================================================
   RESET GENERAL
   ============================================================ */

* {

    box-sizing:border-box;

}


body {

    margin:0;

    min-height:100vh;

    background:
        var(--fond);

    color:
        var(--texte);

    font-family:
        Arial,
        Helvetica,
        sans-serif;

    transition:
        background .3s,
        color .3s;

}



/* ============================================================
   HEADER
   ============================================================ */


header {

    padding:
        25px;

    background:
        var(--fond-secondaire);

    box-shadow:
        0 5px 20px var(--ombre);

    position:
        sticky;

    top:0;

    z-index:10;

}



.titre {

    text-align:center;

}


h1 {

    margin:
        0 0 20px 0;

    font-size:
        35px;

}



/* ============================================================
   BARRE OUTILS
   ============================================================ */


.outils {

    display:flex;

    justify-content:center;

    align-items:center;

    gap:15px;

    flex-wrap:wrap;

}



.champ {

    display:flex;

    align-items:center;

    gap:10px;

    background:
        var(--carte);

    padding:
        10px 15px;

    border-radius:
        30px;

}



.champ input {

    border:none;

    outline:none;

    background:
        transparent;

    color:
        var(--texte);

    font-size:
        17px;

    width:
        220px;

}



select,
.outils button,
footer button {


    border:none;

    border-radius:
        14px;

    padding:
        12px 18px;

    cursor:pointer;

    background:
        var(--carte);

    color:
        var(--texte);

    font-size:
        16px;

    transition:
        .2s;

}



button:hover {

    transform:
        translateY(-2px);

    filter:
        brightness(1.2);

}




/* ============================================================
   STATISTIQUES
   ============================================================ */


#stats {

    display:flex;

    justify-content:center;

    gap:30px;

    padding:
        15px;

    color:
        var(--texte-secondaire);

}



/* ============================================================
   GRILLE DES SONS
   ============================================================ */


#grille {


    display:grid;

    grid-template-columns:

        repeat(
            auto-fill,
            minmax(170px,1fr)
        );


    gap:

        20px;


    padding:

        25px;

}



/* ============================================================
   BOUTON SON
   Créé automatiquement par JavaScript
   ============================================================ */


.bouton-son {


    height:
        190px;


    border:none;


    border-radius:
        var(--rayon);


    color:white;


    cursor:pointer;


    display:flex;


    flex-direction:column;


    justify-content:center;


    align-items:center;


    gap:12px;


    font-weight:bold;


    font-size:20px;


    box-shadow:

        0 8px 18px var(--ombre);



    transition:

        transform .15s,
        box-shadow .15s;



    position:relative;


    overflow:hidden;


}



.bouton-son:hover {


    transform:
        scale(1.05);


    box-shadow:

        0 12px 25px var(--ombre);


}



.bouton-son:active {


    transform:
        scale(.95);


}



/* Emoji ou icône */

.bouton-son .icone {


    font-size:
        45px;

}


/* Nom du son */

.bouton-son .titre-son {


    font-size:
        22px;

}


/* Catégorie */

.bouton-son .categorie {


    font-size:
        13px;

    opacity:
        .8;

}


/* Raccourci clavier */

.bouton-son .touche {


    position:absolute;

    bottom:10px;

    right:12px;


    background:
        rgba(255,255,255,.25);


    padding:
        5px 9px;


    border-radius:
        8px;


}



/* ============================================================
   FAVORI
   ============================================================ */


.bouton-son.favori::before {


    content:"⭐";


    position:absolute;


    top:10px;

    left:10px;


    font-size:20px;


}



/* ============================================================
   SON EN COURS
   Animation lumineuse
   ============================================================ */


.bouton-son.joue {


    animation:

        pulse .6s infinite alternate;


}



@keyframes pulse {


    from {

        transform:
            scale(1);

    }


    to {

        transform:
            scale(1.07);

    }

}




/* ============================================================
   FOOTER
   ============================================================ */


footer {


    position:

        fixed;


    bottom:

        0;


    left:

        0;


    right:

        0;


    background:

        var(--fond-secondaire);


    padding:

        15px;


    display:flex;


    justify-content:center;


    align-items:center;


    gap:30px;


    box-shadow:

        0 -5px 20px var(--ombre);


}



.volume {


    display:flex;


    align-items:center;


    gap:10px;


}


.volume input {


    width:
        200px;

}




/* ============================================================
   TELEPHONE
   ============================================================ */


@media(max-width:700px){


    h1 {

        font-size:
            25px;

    }


    #grille {


        grid-template-columns:

            repeat(
                2,
                1fr
            );


        padding:
            15px;


        gap:
            12px;

    }



    .bouton-son {


        height:
            130px;


    }


    .bouton-son .icone {


        font-size:
            32px;

    }



    footer {


        flex-direction:

            column;


        gap:
            10px;


    }


}




@media(max-width:400px){


    #grille {


        grid-template-columns:
            1fr;

    }


}