/*fichier css globals avec les variables*/

@font-face {
    font-family: 'Jost';
    src: url(../../public/assets/Jost/static/Jost-Regular.ttf) format('truetype');
    font-weight: normal; /* Regular */
    font-style: normal;
}

@font-face {
    font-family: 'Jost';
    src: url(../../public/assets/Jost/static/Jost-Medium.ttf) format('truetype');
    font-weight: 500; /* Medium */
    font-style: normal;
}

@font-face {
    font-family: 'Jost';
    src: url(../../public/assets/Jost/static/Jost-Bold.ttf) format('truetype');
    font-weight: bold; /* Bold */
    font-style: normal;
}

* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
    font-family: var(--font-primary);
}

:root {
    --font-primary: 'Jost', sans-serif;
    --text-size : clamp(16px, 2.5vw, 20px); /*20px -> 16px*/
    --lower-text-size : clamp(12px, 1.7vw, 16px); /*16px -> 12px*/
    --h1-size : clamp(30px, 6vw, 90px); /*90px -> 30px*/
    --h2-size: clamp(25px, 5vw, 60px); /*50 sur figma*/
    --h3-size : clamp(20px, 4vw, 30px); /*30px -> 20px*/
    --bg-primary: #FFFFFF;
    --bg-secondary: #F5F5F5;
    --color-primary: #333333;
    --section-color: #B5B5B5;
    --button-color: #333333;
    --input-color1: #E2E2E2;
    --success-color: #43A73A;
    --failure-color: #ea2424;
    --button-color: #333333;
    --line-color: #dedede;
    --box-color: #f5f5f5;
    --model-color: #00529D;
}

@media (prefers-color-scheme: dark) {
}

body {
    background-color: var(--bg-primary);
    color: var(--color-primary);
}

p {
    font-size: var(--text-size);
}

a {
    text-decoration: none;
}

h1 {
    font-size: var(--h1-size);
}

h2 {
    font-size: var(--h2-size); 
}

h3 {
    font-size: var(--h3-size);
}

.error-message-div {
    display: flex;
    flex-direction: column;
    padding: 10px 10px;
    margin-bottom: 10px;
    border: dashed #FFB2B2 1px ;
    background-color: rgba(255, 178, 178, 0.28);
}

.error-message-div>* {
    font-size: 16px;
    color: #FF0000 !important;
}

.invisible {
    display: none !important;
}

.transparent {
    visibility: hidden;
    opacity: 0;
}

button{
    cursor: pointer;
}


::-webkit-scrollbar {
    width: 10px;
}

::-webkit-scrollbar-thumb {
    background-color: #B5B5B5;
    border-radius: 4px;
    cursor: grab;
}

::-webkit-scrollbar-thumb:hover {
    background-color: #333333;
}

/** Pour les ordinateurs **/

/** Pour les tablettes   **/

/** Pour les téléphones  **/