* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

:root {
    /* Choix 2 : couleur des familles de médicament Je préfère celle-ci*/
    --rouge: #F54029;
    /*Myorelaxant (genre curare)*/
    --orange: #FF6600;
    /*Benzodiazépine (famille des anxiolytiques)*/
    --jaune: #FFFF00;
    /*Agent d'induction (genre révélateur dans une scintigraphie*/
    --bleu: #85C7E3;
    /*Opioïde (dérivé d'opium : morphine etc.)*/
    --violet: #DEBFD9;
    /*Vassopresseur (permet d'augmenter la pressions artérielle)*/
    --vert: #A3D963;
    /*Anasthésie (dodo quoi)*/
    --sable: #edc282;
    /*antiemetique (contre les vomissements)*/
}

@font-face {
    font-family: "Funnel";
    src: url(font/FunnelDisplay-VariableFont_wght.ttf);
    font-weight: 300 800;
}

body {
    background: #eee;
    font-family: "Funnel";
    font-weight: 380;
    overflow: hidden;
    height: 100vh;
    width: 100vw;

}

/* ========================================================= balise dans laquelle la scrollbar s'insère + la grille du contenu */

main {
    display: grid;
    padding: 5em;
    grid-template-columns: repeat(12, 1fr);
    gap: 1em 1em;
}

#container {
    overflow: hidden;
    position: relative;
    height: 100vh;
    width: 100vw;
    z-index: 1;
    /* présevre un espace en haut équivalent à la hauteur du header */
    padding-top: 4vw;
}


/* ========================================================= nav */

.bandeau {
    overflow: hidden;
    line-height: 1;
    display: flex;
    width: 97.7vw;
    position: fixed;
    top: 0;
    z-index: 2;
    justify-content: space-around;
    font-family: 'Funnel';
    font-size: 2vw;
    padding: .5em;
    background-color: #eee;
}

.bandeau a {
    text-decoration: none;
    color: black;
    font-weight: bolder;
    position: relative;
}

.bandeau div {
    color: black;
    font-weight: bolder;
    position: relative;
}

.logo::before {
    --size: .8em;
    content: "";
    display: block;
    background: gray;
    height: var(--size);
    width: var(--size);
    position: absolute;
    z-index: -1;
    left: -0.6em;
    top: -0.11em;

}

/* ========================================================= classes pour des switchs js */

.visible {
    display: block;
}

.invisible {
    display: none !important;
}

/* ========================================================= Styles des paragraphes */

.titres {
    font-size: 6vw;
    font-weight: 800;
}

.sousTitres {
    grid-column: 1/span 12;
    position: relative;
    font-size: 5vw;
    font-weight: 600;
    top: 0.3em;
    left: 0.85em;
    margin-bottom: .5em;
}

.sousTitres::before {
    content: '';
    --size: 1em;
    height: var(--size);
    width: var(--size);
    background-color: var(--c);
    position: absolute;
    display: block;
    top: -0.3em;
    left: -0.85em;
    z-index: -1;
}

.titresParagraphe {
    font-size: 20pt;
    line-height: 22pt;
    font-weight: 500;
    margin-bottom: 0.5rem;
}

.corpsTxt {
    font-size: 16pt;
    line-height: 18pt;
    font-weight: 380;
}

.corpsTxtInterview {
    font-size: 16pt;
    line-height: 18pt;
    font-weight: 380;
}

.citations {
    font-size: 20pt;
    line-height: 22pt;
    font-weight: 300;
    position: relative;
    display: flex;
    width: 65vw;
    margin-top: 1rem;
}

ul{
    list-style: none;
}

/* ========================================================= Styles des boutons */

button {
    position: relative;
    color: black;
    font-size: 1em;
    border: 0px;
    border-radius: 0;
    background-color: gray;
}

button:hover {
    color: white;
    background-color: var(--c);
    border: 0px;
}

.filtres{
    display: block;
    padding-bottom: 1.5em;
    outline: 2px solid var(--c);
    border-radius: 2000em;
    width: 6.5em;
    height: 1em;
    text-align: center;

}