@charset "utf-8";

/* ----------------------------------------------
Auteur/author : nicodeux
Dernière mise à jour/last update : 11/04/2025
Licence : GNU General Public License v3.0
---------------------------------------------- */

/*********************************************/
/* CSS de base des pages du Strip Poker Club */
/*********************************************/

/***************************/
/* Eléments communs        */
/***************************/

* {
    /* palette de couleurs de base */
    --marron-leger: #900;
    --vert-1: #005400;
    --vert-2: #060;
    --vert-3: #008500;
    --vert-4: #090;
}

#plein-ecran {
    justify-content: flex-end;
    align-items: center;
    flex-direction: column;
    background-color: #333 !important;
}

#conteneur-accueil {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    position: relative;
    height: 100%;
    width: 100%;
    overflow: hidden;
    bottom: 0;
}

#accueil {
    position: relative;
    aspect-ratio: 1 / 1;
}

#groom {
    display: block;
    position: relative;
    width: 100%;
    height: 100%;
    background-image: url(../images/accueil/kEnE6C8.svg);
    background-repeat: no-repeat;
    background-size: contain;
}

#bulle {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    position: absolute;
    bottom: 58%;
    left: 31%;
    width: 60%;
}

#languette {
    display: block;
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    width: calc(2em + 1px);
    background-image: url(../images/accueil/pn3fnI7549.svg);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: left 0 bottom 1.3em;
}

#texte, #mail-newsletter, #valide-newsletter {
    border-radius: 1.6em;
    color: var(--marron-sombre);
    font-family: "Suplex", "Comic Sans MS", "Comic Sans", cursive;
    text-align: left;
}

#texte, #mail-newsletter {
    background-color: white;
}

#texte {
    margin-left: calc(2em - 0.15em);
    border: 0.15em solid var(--marron-sombre);
    border-radius: 1.6em;
    padding: 0.8em;
    box-shadow: 0 0 1em black;
    line-height: 1.5em;
}

@media (orientation: landscape) {
    #accueil {
        height: 100%;
        font-size: calc(4px + 1.706485vh);
    }
    /* On cache alternativement une bande verte ou l'autre suivant l'orientation pour qu'elle soit toujours bien placée
       par rapport au div */
    #bande-verte {
        display: block;
    }

    #bande-verte-int {
        display: none;
    }

    input {
        font-size: calc(1px + 1.706485vh);
    }
}

@media (orientation: portrait) {
    #accueil {
        width: 100%;
        font-size: calc(4px + 1.706485vw);
    }
    /* On cache alternativement une bande verte ou l'autre suivant l'orientation pour qu'elle soit toujours bien placée
       par rapport au div */
    #bande-verte {
        display: none;
    }

    #bande-verte-int {
        display: block;
    }

    input {
        font-size: calc(1px + 1.706485vw);
    }
}

#bande-verte, #bande-verte-int {
    position: absolute;
    bottom: 10.3%;
    height: 35%;
    width: 100%;
    background-color: var(--vert-3);
    background-image: url(../images/accueil/oeNf8Hl501.svg);
    background-size: contain;
    background-position: top 0 left 0;
    border-top: 0.30em solid var(--marron-sombre);
    border-bottom: 0.30em solid var(--marron-sombre);
    box-shadow: 0 0 1em black;
}

/* ********************************
   Inscription à la newsletter
******************************** */

#newsletter {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: flex-end;
    align-items: flex-start;
    position: absolute;
    bottom: 15%;
    right: 0;
    width: 60%;
    padding: 1.1em 0.4em 0 0.4em;
    background-image: url(../images/accueil/moNA65bL8.svg);
    background-size: 8em;
    background-repeat: no-repeat;
    background-position: top 0 left 30%;
}

#newsletter label {
    display: none;
}

#mail-newsletter, #valide-newsletter {
    padding: 0.3em 0.8em;
    height: 2.6em;
    border: 0.35em solid var(--marron-sombre);
    box-shadow: 0.30em 0.30em 0 var(--marron-clair);
}

#mail-newsletter {
    width: 60%;
    margin-left: 0.6em;
    margin-right: 0.6em;
}

#valide-newsletter {
    width: 26%;
    background-color: var(--vert-2);
    color: white;
    cursor: pointer;
}

#valide-newsletter:hover {
    background-color: var(--vert-4);
}

#index-news {
    display: block;
    width: 8%;
    aspect-ratio : 1.2 / 1;
    background-image: url(../images/accueil/mna208GnL.svg);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: 50% 50%;
}

/* ********************************
   Pied de page
******************************** */

#logo-n2 a {
    background-image: url(../images/accueil/ln2.svg);
}

#logo-st a {
    background-image: url(../images/accueil/lst.svg);
}

#texte-pp {
    color: black;
    font-family: "Arial", sans-serif;
}

#texte-pp a:hover {
    color: #808080;
}

.valide {
    border: 1px solid black;
}

.valide:hover {
    color: #333 !important;
    background-color: #808080;
}