html, body {
    height: 100%; /* Nécessaire pour que Flexbox fonctionne */
    margin: 0; /* Supprime les marges par défaut */
    display: flex;
    flex-direction: column; /* Permet de disposer les sections verticalement */
    -ms-high-contrast-adjust: none; /* À supprimer si présent */
    background-color: rgb(52, 52, 52);
    color: white;
}

a {
    cursor: pointer;
    color: white;
}

ul {
    list-style-position: inside; /* Place les points à l'intérieur de la boîte des <li> */
    padding: 0; /* Retire les marges par défaut de la liste */
    display: inline-block; /* Permet de centrer la liste entière */
    text-align: left; /* Recentrage local pour le texte */
}

li {
    margin-bottom: 3px;
    font-size: 1em;
}

h1 {
    font-size: 4vh;
}

.up { 
    padding-top:1vh;
    padding-bottom: 1vh;
    height: 5%;
    border-bottom: solid;
    display:flex;
    background-color: rgb(40, 113, 214); /* #0072ffad;*/
}

.titre-page {
    display: flex;
    /*margin-bottom: 1%;*/
    align-items: center;
    margin-left: 0.5%;
    cursor: pointer;
}

#menu-bouton {
    padding-right: 2%;
    margin-left: auto;
}

.contenu {
    margin-top: 1%;
    margin-left: 3%;
    margin-right: 3%;
    margin-bottom: 4%;
    border:solid;
    border-radius: 25px;
    padding: 2%;
    flex: 1; /* Étend cette section pour occuper tout l'espace disponible */
    display: ruby;
    text-align: center;
}

.bas {
    text-align: center;
    align-items: center;
    padding-top:2%;
    border-top:solid;
    width:100%;
    background-color: #0061d7ad;
    padding-bottom: 2%;
}

#menu {
    transform: translateX(0);
    visibility: hidden;
    position: fixed;
    width: 100%;
    height: 100%;
    z-index: 10;
    display: flex;
    transition: transform 0.45s ease, visibility 0.45s;
}

.desc-menu {
    float:right;
    margin-left: auto;
    width:40%;
    background-color: rgb(61 61 61);/* #2592ff;*/
    text-align: center;
    height: 100%;
    border-left: solid;
    padding-top: 3%;
    padding-bottom: 0%;
    padding-left: 2%;
    padding-right: 2%;
}

.desc-menu h2 {
    font-size: 3vh;
}

.desc-menu a {
    font-size: 2vh;
}

.desc-menu h3 {
    font-size: 2.6vh;
}

.desc-menu button {
    font-size: 2vh;
}

.ferme-menu {
    width: 60%;
    height: 100%;
    background-color: rgba(228, 227, 227, 0.573);
    float: left;
    cursor: pointer;
}

.bloc_ {
    text-align: center;
    padding: 1%;
    border: dashed;
    border-radius: 20px;
    width: 42%;
    float:left;
    margin-right: 2%;
    background-color: rgb(35 59 93);
}

.bloc2_ {
    text-align: center;
    padding: 1%;
    border: dashed;
    border-radius: 20px;
    width: 42%;
    float: right;
    margin-left: 2%;
    background-color: rgb(35 59 93);
}

.bloc {
    text-align: center;
    padding: 1%;
    border: dashed;
    border-radius: 20px;
    width: 42%;
    float:left;
    margin-top: 2%;
    margin-right: 2%;
    background-color: rgb(35 59 93);
}

.bloc2 {
    text-align: center;
    padding: 1%;
    border: dashed;
    border-radius: 20px;
    width: 42%;
    float: right;
    margin-top: 2%;
    margin-left: 2%;
    background-color: rgb(35 59 93);
}

.img-bloc {
    cursor: pointer;
    height: 20%;
    width: 30vw;
    max-height: 100px;
    max-width: 300px;
}

#sombre-bouton {
    background-color: rgb(52, 52, 52);
}

.but {
    background-color: rgb(45, 104, 118);/* rgb(107, 224, 253);*/
    border: solid; 
    border-radius: 25px; 
    /*width: 20%; */
    margin-left: 5%; 
    margin-right: 5%; 
    cursor: pointer; 
    display: flex; 
    align-items: center; 
    justify-content: center; 
    padding: 10px; 
    height: 60px;
    margin-top: 1em;
    margin-bottom: 1em;
}

.new-block {
    text-align: center;
    padding: 1%;
    width: 90%;
    margin-bottom: 2%;
    display: flex;
    align-items: center;
    height: 10%;
    justify-content: space-around;
    cursor: pointer;
}


.new-block h3 {
    font-size: clamp(2em, 2vh, 2vh);
    text-decoration: underline;
}

.new-block h5 {
    font-size: clamp(1.5em, 1.8vh, 1.8vh);
}

.new-block img {
    width: 40%;
    object-fit: contain;
}

.but img {
    height: 2vh;
    margin-right: 10px;
    min-height: 2em;
}

.but h2 {
    font-size: 1.3em; /*clamp(2em, 2vh, 2vh);*/
    margin: 0;
}

.categ {
    border:solid;
    border-radius: 20px;
    padding: 2%;
    text-decoration: none;
    display: inline-block;
    margin-top: 10%;
    width: 100%;
    text-align: center;
}