@import url('https://fonts.googleapis.com/css2?family=Spartan:wght@100;200;300;400;500;600;700;800;900&display=swap');
:root {
    --clr-utile-blanc: #FFFFFF;
    --clr-utile-noir: #000000;
    --clr-utile-gris: #AFAFAF;
    /* 10/08/2023 : Nathan a dis que je peux renommer ça "gris sombre +" */
    --clr-utile-gris-sombre: #222222;
    --clr-utile-rouge: #ff5e4d;
    --clr-utile-rouge-sombre: #D44738;
    --font-pricipale-normale: 'Spartan';
    --font-code: "Lucida Console", Courier, monospace;
    --ombre-petite-sombre: 5px 5px 5px rgba(0, 0, 0, .2);
}


/* Texte */

* {
    font-family: var(--font-pricipale-normale);
}

h1 {
    font-size: 2rem;
    font-weight: 900;
}

h2 {
    font-size: 1.5rem;
}

textarea {
    padding: 0.5em;
    width: calc(100% - 1.25em);
    resize: none;
    font-family: var(--font-code);
}


/* Block */


/* 
form {
    position: relative;
    border: 5px solid var(--wikifamille-clr-base);
    padding: 2em 2.5em;
    border-radius: 5px;
    display: flex;
    flex-direction: column;
} */

body {
    font-family: var(--font-pricipale-normale);
}

header {
    background-color: var(--wikifamille-clr-base);
    height: fit-content;
    padding: .5em;
    position: relative;
}

main {
    background-color: var(--clr-utile-blanc);
    border-radius: 5px;
    height: auto;
    width: 100%;
    color: var(--clr-utile-noir);
    position: relative;
    padding: 1rem;
    max-width: 85rem;
    margin: .75rem
}

.ctn-main {
    padding: 0.5em;
    display: flex;
    transform: translateY(4rem);
    justify-content: center;
    background-color: #e4e2ff;
    min-height: calc(100vh - 5rem)
}

table {}

thead {
    color: var(--clr-utile-blanc);
    border-radius: 5px;
}

th {
    background-color: var(--wikifamille-clr-base-clair-2);
    border: 2px solid var(--clr-utile-blanc);
    padding: 0.5rem;
    font-weight: 400;
}

td {
    padding: .5rem;
    box-sizing: border-box;
}

.bordure th {
    border: 2px solid var(--wikifamille-clr-base-clair-2);
}

.bordure td {
    border: 2px solid var(--wikifamille-clr-base-obscur-2);
}


/* ===== Scrollbar CSS ===== */


/* Firefox */

.scrollbar-custom {
    scrollbar-width: auto;
    scrollbar-color: var(--wikifamille-clr-base-clair-2) var(--wikifamille-clr-base-obscur-2);
}


/* Chrome, Edge, and Safari */

.scrollbar-custom::-webkit-scrollbar {
    width: 0px;
}

.scrollbar-custom::-webkit-scrollbar-track {
    background: var(--wikifamille-clr-base-obscur-2);
}

.scrollbar-custom::-webkit-scrollbar-thumb {
    background-color: var(--wikifamille-clr-base-clair-2);
    border-radius: 0px;
    border: 0px solid #ffffff;
}