*{
    padding: 0;
    margin: 0;
}
html{
    overflow-x: hidden;
    max-width: 100svw;
}

/* Modificartin de la scrollbar */

*{
    scrollbar-color: #5cf7f1ff transparent;
    scrollbar-width: thin;
}
::-webkit-scrollbar {
    width: 5px;
}
::-webkit-scrollbar-track {
    background: transparent;
}
::-webkit-scrollbar-thumb {
    border-radius: 6px;
    background: #5cf7f1ff;
}

@font-face{
    font-family: "Gravity";
    src:url(../media/fonts/Gravity/Gravity-Regular.otf);
}
@font-face{
    font-family: "Gravity-Bold";
    src: url(../media/fonts/Gravity/Gravity-Bold.otf);
}
@font-face{
    font-family: "Gravity-Bold-Italic";
    src: url(../media/fonts/Gravity/Gravity-BoldItalic.otf);
}
@font-face{
    font-family: "Gravity-Italic";
    src: url(../media/fonts/Gravity/Gravity-Italic.otf);
}
@font-face{
    font-family: "Gravity-Light";
    src: url(../media/fonts/Gravity/Gravity-Light.otf);
}
@font-face{
    font-family: "Gravity-Light-Italic";
    src: url(../media/fonts/Gravity/Gravity-LightItalic.otf);
}
@font-face{
    font-family: "Gravity-Ultra-Light";
    src: url(../media/fonts/Gravity/Gravity-UltraLight.otf);
}
@font-face{
    font-family: "Gravity-Ultra-Light-Italic";
    src: url(../media/fonts/Gravity/Gravity-UltraLightItalic.otf);
}
:root{
    --general-color-1:white;
    --general-base-color-1:rgb(0, 110, 255);
    --general-details-color-1:rgb(0, 110, 255);
    --general-border-color-1:rgba(0, 110, 255, 0.3);
    --general-background-color-1:rgba(0, 110, 255, 0.3);

    --general-gradient-low-color-1:rgba(0, 110, 255, 0);
    --general-gradient-high-color-1:rgba(0, 110, 255, 1);

    --general-grey-1:rgba(0, 0, 0, 0.9);




    --general-font-family-1:"Gravity";
    --general-font-family-1-bold:"Gravity-Bold";
    --general-font-family-1-bold-italic:"Gravity-Bold-Italic";
    --general-font-family-1-italic:"Gravity-Italic";
    --general-font-family-1-light:"Gravity-Light";
    --general-font-family-1-light-italic:"Gravity-Light-Italic";
    --general-font-family-1-ultra-light:"Gravity-Ultra-Light";
    --general-font-family-1-ultra-light-italic:"Gravity-Ultra-Light-Italic";
}



.flex-container-row-0{
    width:0%;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    margin: 0 auto;
}
.flex-container-row-10{
    width:10%;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    margin: 0 auto;
}
.flex-container-row-20{
    width:20%;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    margin: 0 auto;
}
.flex-container-row-30{
    width:30%;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    margin: 0 auto;
}
.flex-container-row-40{
    width:40%;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    margin: 0 auto;
}
.flex-container-row-50{
    width:50%;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    margin: 0 auto;
}
.flex-container-row-60{
    width:60%;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    margin: 0 auto;
}
.flex-container-row-70{
    width:70%;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    margin: 0 auto;
}
.flex-container-row-80{
    width:80%;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    margin: 0 auto;
}
.flex-container-row-90{
    width:90%;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    margin: 0 auto;
}
.flex-container-row-100{
    width:100%;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    margin: 0 auto;
}


.width-0{width:0%;}
.width-10{width:10%;}
.width-20{width:20%;}
.width-30{width:30%;}
.width-40{width:40%;}
.width-50{width:50%;}
.width-60{width:60%;}
.width-70{width:70%;}
.width-80{width:80%;}
.width-90{width:90%;}
.width-100{width:100%;}

.margin-bot-0{margin-bottom:0px;}
.margin-bot-10{margin-bottom:10px;}
.margin-bot-20{margin-bottom:20px;}
.margin-bot-30{margin-bottom:30px;}
.margin-bot-40{margin-bottom:40px;}
.margin-bot-50{margin-bottom:50px;}
.margin-bot-60{margin-bottom:60px;}
.margin-bot-70{margin-bottom:70px;}
.margin-bot-80{margin-bottom:80px;}
.margin-bot-90{margin-bottom:90px;}
.margin-bot-100{margin-bottom:100px;}

.min-width-250{
    min-width: 250px;
}

/* Padding */
.padding-25{
    padding: 25px;
    box-sizing: border-box;
}

/* TEXT ALIGN */
.text-align-center, .text-align-center *{
    text-align: center;
}
.text-align-left,.text-align-left *{
    text-align: left;
}
.text-align-right,.text-align-right *{
    text-align: right;
}

/* ALIGN ITEM */
.item-align-center{
    align-items: center;
}
.item-align-start{
    align-items: start;
}
.item-align-end{
    align-items: end;
}

/* JUSTIFY CONTENT */
.justify-content-center{
    justify-content: center;
}
.justify-content-around{
    justify-content: space-around;
}
.justify-content-between{
    justify-content: space-between;
}

.value-word{
    color: var(--general-base-color-1);
    font-size: 120%;
}




/* Base typographique */
html {
    font-size: 16px; /* Définit 1rem = 16px */
    font-family: var(--general-font-family-1);
}

/* Typographie responsive */
h1 {
    font-family: var(--general-font-family-1-bold);
    font-size: calc(2rem + 1vw); /* Grand titre responsive */
}

h2 {
    font-size: calc(1.75rem + 0.8vw); /* Sous-titre responsive */
    font-family: var(--general-font-family-1-bold);
}
h3{
    font-size: 2rem;
    font-family: var(--general-font-family-1);
}
h4{
    font-size: 1.5rem;
    font-family: var(--general-font-family-1);
    text-align: center;
    text-decoration: underline;
}
ul{
    padding-top: 25px;
}
li{
    padding-bottom: 5px;
    font-family: var(--general-font-family-1-bold);
}

p {
    font-family: var(--general-font-family-1-light);
    font-size: 1.125rem; /* Texte lisible sur tous les supports */
    line-height: 1.6; /* Pour améliorer la lisibilité */
}
a{
    font-family: var(--general-font-family-1);
    text-decoration: none;
    color: var(--general-color-1);
    font-size: 1.125rem; /* Texte lisible sur tous les supports */
    line-height: 1.6; /* Pour améliorer la lisibilité */
}

/* Adaptation sur plus petits écrans */
@media (max-width: 768px) {
    h1 {
        font-size: calc(1.5rem + 2vw); /* Ajustement sur petits écrans */
    }

    h2 {
        font-size: calc(1.25rem + 1.5vw);
    }

    p {
        font-size: 1rem; /* Légèrement réduit pour s'adapter aux petits écrans */
    }
}
.footer{
    position: relative;
    width: 100%;
    height: auto;
    background-color: #090c15ff;
    z-index: 100000;
    display: flex;
    flex-direction: column;
}
.footer-blocks{
    width: 80%;
    margin: 0 auto;
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    justify-content: space-around;
    flex-wrap: wrap;
}
.footer-block{
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: space-around;
}
.footer-block .footer-link{
    margin: 0 auto;
    color: #5cf7f1ff;
    padding: 5px;
}
.footer-block .footer-link:hover{
    text-shadow: #5cf7f1ff 0 0 5px;
}
.footer-block .footer-title{
    color: #db6bcdff;
    text-decoration: underline;
    margin: 0 auto;
    font-family: "Gravity";
    font-size: 1.4rem;
    padding-bottom: 15px;
}
.footer-end{
    color: aliceblue;
    margin: 50px auto;
    padding-bottom: 60px;
}
canvas{
    width: 100%;
    height: 25vh;
    max-height: 25vh;
}