body {
    margin: 0;                   /* supprime la marge par défaut */
    height: 100vh;               /* prend toute la hauteur */
    width: 100vw;                /* prend toute la largeur */
    display: flex;               /* on va centrer avec flex */
    justify-content: center;     /* centre horizontalement */
    align-items: center;         /* centre verticalement */
    overflow: hidden;            /* supprime les scrollbars */
    background-color: #000000;
    font-family: 'Montserrat', sans-serif;
}

.armature_principale {
    position: relative;

    width: calc(1920 * var(--scale));
    height: calc(1080 * var(--scale));;
    background: #000000;
}

:root {
    --vw: calc(100vw / 1920);  /* largeur de la maquette */
    --vh: calc(100vh / 1080);  /* hauteur de la maquette */
    --scale: min(calc(100vw / 1920), calc(100vh / 1080));
}

.rectangle_gauche {
    width: calc(751 * var(--scale));
    height: calc(897 * var(--scale));

    background-color: #000;

    box-sizing: border-box;
    border-width: calc(5 * var(--scale));
    border-style: solid;
    border-color: #dbb42c;
    border-radius: calc(50 * var(--scale));

    position: absolute;
    top: 50%;
    left: 26%;
    transform: translate(-50%, -50%);

    display: flex;
    justify-content: center;
    align-items: center;

    z-index: 2;
}

.texte_introductif{
    width: calc(680 * var(--scale));
    height: calc(800 * var(--scale));
    color: #ffffff;
    font-size: calc(20 * var(--scale));
}

.salsifou_fond {
width: auto;
height: calc(1080 * var(--scale));

position: absolute;
top: 50%;
left: 100%;

transform: translate(-100%, -50%);
}

.salsifou_texte {
    width: calc(886 * var(--scale));
    height: auto;

    position: absolute;
    top: 15%;
    left: 74%;

    transform: translate(-50%, -50%);
}

.casino_texte {
    width: calc(569 * var(--scale));
    height: auto;

    position: absolute;
    top: 88%;
    left: 74%;

    transform: translate(-50%, -50%);
}

.rectangle_carte{
    width: calc(410 * var(--scale));
    height: calc(608.7628 * var(--scale));

    position: absolute;
    top: 50.2%;
    left: 74.4%;
    transform: translate(-50%, -50%);
}

.carte {
    width: auto;
    height: calc(608.7628 * var(--scale));

    position: absolute;
    top: 50%;
    left: 50%;

    transform: translate(-50%, -50%);
}

.rectangle_se-connecter {
    width: calc(330 * var(--scale));
    height: calc(75 * var(--scale));

    background-color: #c9a227;
    color: white;
    font-size: calc(45 * var(--scale));
    font-family: 'Montserrat', sans-serif;
    text-align: center;
    text-decoration: none;       /* Retire le soulignement */

    display: flex;
    justify-content: center;
    align-items: center;

    box-sizing: border-box;
    border-width: calc(7 * var(--scale));
    border-style: solid;
    border-color: #000000;
    border-radius: calc(37.65 * var(--scale));

    position: absolute;
    top: 42%;
    left: 50%;
    transform: translate(-50%, -50%);

    cursor: pointer;
    transition: background-color 0.4s ease, color 0.4s ease;
}

.rectangle_se-connecter:hover {
    background-color: #61227b;
    color: #000000;
    box-shadow: -0.1vw -0.1vw 1.2vw 0vw #61227b;
}

.je_m-inscrit {
    width: calc(291 * var(--scale));
    height: calc(28 * var(--scale));

    color: #ffffff;
    font-size: calc(19 * var(--scale));
    text-align: center;

    display: flex;
    justify-content: center;
    align-items: center;

    position: absolute;            /* Positionnement libre */
    top: 57%;                      /* À 20% du haut de la page */
    left: 50%;
    transform: translate(-50%, -50%);   /* Centrage horizontal parfait */

    font-family: 'Montserrat', sans-serif;
}

.salsifi {
    width: auto;
    height: calc(200 * var(--scale));
    opacity: 55%;

    position: absolute;
    top: 10.5%;
    left: 8%;

    transform: translate(-50%, -50%) rotate(-39.7deg);

    z-index: 1;
}

.salsifou_carte_coin1{
    width: calc(100 * var(--scale));
    height: calc(100 * var(--scale));

    background-color: rgba(174, 174, 174, 0);

    position: absolute;
    top: 28.3%;
    left: 67.8%;
    transform: translate(-50%, -50%);

    z-index: 2;
}

.salsifou_carte_coin2{
    width: calc(100 * var(--scale));
    height: calc(100 * var(--scale));

    background-color: rgba(4, 4, 4, 0);

    position: absolute;
    top: 72%;
    left: 81%;
    transform: translate(-50%, -50%);

    z-index: 2;
}