@font-face {
    font-family: 'DINEngschrift';
    src: url('../fonts/DIN_14151_STD_Engschrift.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'AlteDINMittleschrift';
    src: url('../fonts/Alte_DIN_14151_Mittleschrift.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

@import url('https://fonts.googleapis.com/css2?family=Oswald:wght@400;700&display=swap');

* {
    margin: 0;
    padding: 0;
}


/* H1 avec DIN 14151 STD Engschrift */
.engschrift, h1 , h2 {
    font-family: 'DINEngschrift', sans-serif;
}

/* Texte spécifique avec Alte DIN 14151 Mittleschrift */
.mittleschrift, h3, nav {
    font-family: 'AlteDINMittleschrift', sans-serif;
}

/* Paragraphes avec Oswald */
.oswald, p, h4, button{
    font-family: 'Oswald', sans-serif;
}



html, body {
    height: 100%; /* S'assure que le document occupe toute la hauteur */
    margin: 0; /* Supprime les marges indésirables */
    display: flex;
    flex-direction: column; /* Organisation verticale */
}

body {
    justify-content: space-between; /* Place le contenu entre le header et le footer */
}

main {
    flex: 1; /* Prend tout l'espace disponible entre le header et le footer */
    display: flex;
    align-items: center; /* Centre verticalement le contenu du main */
    justify-content: center; /* Centre horizontalement le contenu du main */
    margin-top: 0; /* Supprime tout espace inutilisé */
    margin-bottom: 0; /* Idem */
}

/* Compense la hauteur du header */
main {
    margin-top: 80px; /* Hauteur du header */
}

@media (max-width: 640px) {
    main {
        margin-top: 60px; /* Hauteur ajustée pour mobile */
    }
}
footer {
    margin-top: auto; /* Force le footer à rester en bas lorsque le contenu est insuffisant */
}

.blanc {
    color: #43659F;
    background-color: #FFFFFF;
}

.bleu {
    color: #FFFFFF;
    background-color: #43659F;
}

.orange {
    color: #e76130;
}

.little-button {
    width: 100px;
    height: 25px;
    border: solid 1 black;
    border-radius: 20px;
    cursor: pointer;
}

.large-button {
    width: 210px;
    height: 30px;
    border: solid 1 black;
    border-radius: 20px;
    cursor: pointer;
}

.big-button {
    width: 250px;
    height: 60px;
    border: solid 1 black;
    border-radius: 20px;
    font-size: larger;
    font-weight: 700;
    cursor: pointer;
}

/*   192.168.1.99:8888/wakatu%20vitrine/index.php

.anim {
    opacity: 0;
    transform: translateY(70px);
}

.anim_visible {
    opacity: 1;
    transform: translateY(0px);
    transition: 0.7s;
}