@font-face {
    font-family: "Effra", sans-serif;
    src: url(/assets/fonts/effra-variable.ttf) format("truetype");
    font-display: swap;
}

/* GOIA */
@font-face {
    font-family: Goia;
    src: url(/assets/fonts/goia-display/thin.otf);
    font-weight: 100;
    font-display: swap;
}

@font-face {
    font-family: Goia;
    src: url(/assets/fonts/goia-display/thin-italic.otf);
    font-weight: 100;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: Goia;
    src: url(/assets/fonts/goia-display/extralight.otf);
    font-weight: 200;
    font-display: swap;
}

@font-face {
    font-family: Goia;
    src: url(/assets/fonts/goia-display/extralight-italic.otf);
    font-weight: 200;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: Goia;
    src: url(/assets/fonts/goia-display/light.otf);
    font-weight: 300;
    font-display: swap;
}

@font-face {
    font-family: Goia;
    src: url(/assets/fonts/goia-display/light.otf);
    font-weight: 300;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: Goia;
    src: url(/assets/fonts/goia-display/regular.otf);
    font-weight: 400;
    font-display: swap;
}

@font-face {
    font-family: Goia;
    src: url(/assets/fonts/goia-display/regular-italic.otf);
    font-weight: 400;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: Goia;
    src: url(/assets/fonts/goia-display/medium.otf);
    font-weight: 500;
    font-display: swap;
}

@font-face {
    font-family: Goia;
    src: url(/assets/fonts/goia-display/medium-italic.otf);
    font-weight: 500;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: Goia;
    src: url(/assets/fonts/goia-display/bold.otf);
    font-weight: 600;
    font-display: swap;
}

@font-face {
    font-family: Goia;
    src: url(/assets/fonts/goia-display/bold-italic.otf);
    font-weight: 600;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: Goia;
    src: url(/assets/fonts/goia-display/extrabold.otf);
    font-weight: 800;
    font-display: swap;
}

@font-face {
    font-family: Goia;
    src: url(/assets/fonts/goia-display/extrabold-italic.otf);
    font-weight: 800;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: Goia;
    src: url(/assets/fonts/goia-display/black.otf);
    font-weight: 900;
    font-display: swap;
}

@font-face {
    font-family: Goia;
    src: url(/assets/fonts/goia-display/black-italic.otf);
    font-weight: 900;
    font-style: italic;
    font-display: swap;
}

/* Poppins */
@font-face {
    font-family: Poppins;
    src: url(/assets/fonts/poppins/400.ttf);
    font-weight: 400;
    font-display: swap;
}

@font-face {
    font-family: Poppins;
    src: url(/assets/fonts/poppins/500.ttf);
    font-weight: 500;
    font-display: swap;
}

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

:root {
    --primary-orange: #d4451b;
    --hovered-orange: #913008;
    --secondary-orange: #D97755;
    --tertiary-orange: #EEBDA6;
    --primary-blue: #282F63;
    --hovered-blue: #020A43;
    --secondary-blue: #759EB9;
    --tertiary-blue: #B9DEE2;
    --primary-green: #1D672D;
    --hovered-green: #0A3D14;
    --secondary-green: #6AA84F;
    --tertiary-green: #82E196;
    --components-lm-iut: #F7A70B;
    --components-laval-iut: #CE0E6A;
    --components-ensim: #077FA5;
    --components-lettres-fac: #485BA6;
    --components-droit-fac: #E30047;
    --components-sciences-fac: #007781;
    --background-dark: #040823;
    --dark: #000;
    --medium: #ababab;
    --hovered-light: #CECECE;
    --light: #FFF;

}

body {
    margin: 0;
    font-family: Poppins, sans-serif;
}

h1 {
    font-family: Goia, sans-serif;
    font-size: 46px;
    font-weight: 600;
}

h2 {
    font-family: Goia, sans-serif;
    font-size: 32px;
    font-weight: 600;
}

h3 {
    font-family: Poppins, sans-serif;
    font-size: 24px;
    font-weight: 600;
}

h4 {
    font-family: Poppins, sans-serif;
    font-size: 15px;
    font-weight: 400;
    text-align: left;
}

p,
a,
li,
span {
    font-family: Poppins, sans-serif;
    font-size: 14px;
    display: inline;
}

a {
    text-decoration: none;
    color: var(--dark);
}

.goia {
    font-family: Goia, sans-serif;
}

.poppins {
    font-family: Poppins, sans-serif;
}

.material-symbols-outlined {
    font-variation-settings:
        'FILL' 0,
        'wght' 400,
        'GRAD' 0,
        'opsz' 24;
}


/* ROLE */
.role {
    font-family: Poppins, sans-serif;
    font-size: 14px;
    font-weight: 500;
}

.role::before {
    display: inline-block;
    content: "No role defined";
    background-color: var(--dark);
    color: var(--medium);
    padding: 5px 10px;
    border-radius: 10px;
}

.role.r1::before {
    content: "Présidence de l'université";
    background-color: #D4451B40;
    color: #D4451B;
}

.role.r5::before {
    content: "Administrateur";
    background-color: #201CA640;
    color: #201CA6;
}

.role.r4::before {
    content: "Responsable de service";
    background-color: #1CB49B40;
    color: #1CB49B;
}

.role.r3::before {
    content: "Chef de département";
    background-color: #F7C00B40;
    color: #F7C00B;
}

.role.r7::before {
    content: "Enseignant";
    background-color: #CE0E6A40;
    color: #CE0E6A;
}

.role.r6::before {
    content: "Bureau des étudiants";
    background-color: #1A912240;
    color: #1A9122;
}

.role.r8::before {
    content: "Étudiant";
    background-color: #9122B540;
    color: #9122B5;
}

.role.r2::before {
    content: "Directeur de composante";
    background-color: #FF000440;
    color: #FF0004;
}

/* LIEU COMPO */
.composante {
    font-family: Poppins, sans-serif;
    font-size: 14px;
    font-weight: 500;
}

.composante::before {
    display: inline-block;
    content: "No composante defined";
    background-color: var(--dark);
    color: var(--medium);
    padding: 5px 10px;
    border-radius: 10px;
}

.composante.c1::before {
    content: "Faculté de Droit, Sciences économiques & de Gestion";
    background-color: #E3004740;
    color: var(--components-droit-fac);
}

.composante.c2::before {
    content: "Faculté des Lettres, Langues & Sciences humaines";
    background-color: #485BA640;
    color: var(--components-lettres-fac);
}

.composante.c3::before {
    content: "Faculté des Sciences et Techniques";
    background-color: #00778140;
    color: var(--components-sciences-fac);
}

.composante.c4::before {
    content: "IUT du Mans";
    background-color: #F7A70B40;
    color: var(--components-lm-iut);
}

.composante.c5::before {
    content: "IUT de Laval";
    background-color: #CE0E6A40;
    color: var(--components-laval-iut);
}

.composante.c6::before {
    content: "ENSIM";
    background-color: #077FA540;
    color: var(--components-ensim);
}

/* STATUTS OBJETS */
.statut-objet {
    font-family: Poppins, sans-serif;
    font-size: 14px;
    font-weight: 500;
    display: inline-block;
    width: fit-content;
    background-color: rgba(171, 171, 171, 0.40);
    color: rgb(128, 128, 128);
    padding: 5px 10px;
    border-radius: 10px;
}

/* ERRORS */
.error,
.positive {
    font-family: Poppins, sans-serif;
    font-weight: 400;
    font-size: 16px;
    padding: 10px 20px;
    border-radius: 10px;
    width: 100%;
    text-align: center;
}

.error {
    background-color: rgba(255, 0, 0, 0.40);
    color: rgb(255, 0, 0);
}

.success {
    background-color: rgba(0, 255, 0, 0.40);
    color: rgb(0, 255, 0);
}

/* BOXS */
.main {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    margin: 20px 50px;
    gap: 20px;
}