/* COULEURS GLOBALES */
:root {
    --cltxt-base: #b7a1a1;
    --cl-fond: #fbf1f1;
    --cl-noir99: #000000;
    --cl-noir90: rgb(32, 32, 32);
}

/* TYPOGRAPHIES */
@font-face {
    font-family: 'SF-Pro-Light';
    src: url('assets/typographies/SF-Pro-Display-Light.otf');
}
@font-face {
    font-family: 'SF-Pro-Regular';
    src: url('assets/typographies/SF-Pro-Display-Regular.otf');
}
@font-face {
    font-family: 'SF-Pro-Medium';
    src: url('assets/typographies/SF-Pro-Display-Medium.otf');
}
@font-face {
    font-family: 'SF-Rounded-Semibold' ;
    src: url(assets/typographies/SF-Pro-Rounded-Semibold.otf);
}

* {
    user-select: none;
    font-family: SF-Pro-Light;
    box-sizing: border-box;
}

.mathText {
    color: rgb(74, 71, 71);
    font-family: 'Cambria Math', sans-serif;
    font-style: italic;
    font-size: 0.9em;
}  

.colonne {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
} 

h1 {
    color: rgb(120, 107, 107);
    font-size: 2em;
    text-align: left;
    width: 70%;
}
h3 {
    font-family: SF-Pro-Medium;
    font-size: 1.2em;
}

img {
    -webkit-user-drag: none;
}

body {
    width: 100%
}

/* GLOBAL HEADER START */
.global-fixed-menu {
    top: 0;
    border: 1px solid red;
    position: fixed;
    z-index: 9999;
    width: 100%;
}
.global-header {
    display: flex;
    height: 100px;
    background-color: var(--cl-noir90);
}
#global-header-logo {
    margin-top: auto;
    margin-bottom: auto;
    margin-left: 60px;
    height: 70%;
}

.global-rubanitem {
    height: 90%;
    border: 1px solid red;
    display: inline flex;
    text-align: center;
    justify-content: center;
    align-items: center;
}
.header-margin {
    margin-top: 145px;
}
/*RUBAN*/



.global-label-ruban-bouton {
    display:contents;
    visibility: hidden;
    width: none;
    height: none;
    position:relative; 
}
.global-label-ruban-bouton:hover {
    visibility: visible;
    width: 100px
}
.ruban-bouton {
    visibility: visible;
    overflow: hidden;
    width: 60px;
}

.global-ruban {
    -webkit-backdrop-filter: blur(11.5px);
    backdrop-filter: blur(11.5px);
    background-image: linear-gradient(178deg, hsla(0, 0%, 100%, 0.793), #ffffff4f);
    border-bottom: 1px solid white;
    box-shadow: 0 0 40px 0 rgba(0, 0, 0, 0.1);
    display: flex;
    justify-content: center;
    align-items: center;
    height: 45px;
}
.global-rubancategory {
    display: flex;
    align-items: center;
    justify-content: start;
    height: 100%
}

/* GLOBAL HEADER END */
/* GLOBAL BACKGROUND START */
.global-bg-bulle {
    background-color: var(--cl-fond);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    z-index: -2;
    width: 100vh;
    height: 100vh;
    position: fixed;
    width: 100%
}
.bulles {
    display: absolute;
    width: 150px;
    height: 150px;
    border-radius: 100px;
    filter: blur(90px);
}

.bulle-red {
    background-color: rgb(104, 219, 165);
    animation: ani-b-red 12s infinite;
}
.bulle-pink {
    background-color: rgb(255, 120, 143);
    animation: ani-b-pink 16s infinite;
}
.bulle-yellow {
    background-color: rgb(255, 255, 255);
    animation: ani-b-yellow 14s infinite;
}
.bulle-blue {
    background-color: rgb(112, 228, 238);
    animation: ani-b-cyan 22s infinite;
}

@keyframes ani-b-red {
    0% {
        transform: translate(0, 0) scale(2);
    }
    10% {
        transform: translate(50px, -50px) scale(0.4);
    }
    50% {
        transform: translate(100px, 0) scale(1);
    }
    60% {
        transform: translate(50px, 50px) scale(1.2);
    }
    100% {
        transform: translate(0, 0) scale(2);
    }
}
@keyframes ani-b-pink {
    0% {
        transform: translate(150, 150) scale(0.4);
    }
    10% {
        transform: translate(200px, 100px) scale(1);
    }
    50% {
        transform: translate(250px, 150) scale(1.2);
    }
    60% {
        transform: translate(200px, 200px) scale(2);
    }
    100% {
        transform: translate(150, 150) scale(0.4);
    }
}
@keyframes ani-b-yellow {
    0% {
        transform: translate(-150, -150) scale(0.4);
    }
    10% {
        transform: translate(-100px, -200px) scale(2.4);
    }
    50% {
        transform: translate(-50px, -150) scale(1.4);
    }
    90% {
        transform: translate(-100px, -100px) scale(1.5);
    }
    100% {
        transform: translate(-150, -150) scale(0.4);
    }
}
@keyframes ani-b-cyan {
    0% {
        transform: translate(0, 0) scale(2);
    }
    10% {
        transform: translate(50px, -50px) scale(0.4);
    }
    50% {
        transform: translate(100px, 0) scale(1);
    }
    60% {
        transform: translate(50px, 50px) scale(1.2);
    }
    100% {
        transform: translate(0, 0) scale(2);
    }
}
/* GLOBAL BACKGROUND END */
/* NAV MENU START */
::-webkit-scrollbar {
    width: 12px; /* Largeur de la barre de défilement */
}
::-webkit-scrollbar-track {
    background: var(--cl-noir90); /* Couleur de la piste de la barre de défilement */
}
::-webkit-scrollbar-thumb {
    background-color: var(--cl-fond); /* Couleur de la poignée de la barre de défilement */
    border-radius: 10px; /* Arrondir les coins de la poignée */
    border: 2px solid var(--cl-noir90); /* Ajouter une bordure autour de la poignée */
}
::-webkit-scrollbar-thumb:hover {
    background-color: white; /* Couleur de la poignée au survol */
}
/* NAV MENU END */
.hide {
    visibility: hidden;
}
.disapear {
    display: none;
}


body {
    margin: 0 0;
}

button {
    cursor: pointer;
    text-align: center;
    transition: 60ms;

}
button:hover {
    transition: 180ms;
    

}
.classic-button {
    border: 2px solid white;
    border-radius: 4px;
    background-color: rgb(255, 255, 255);
    color:gray;
}
.classic-button:hover {
    border: 2px solid black;
    background-color: #ffffffb0;
    transition: 120ms;
}