:root {
    --red-100: #F2DFE0;
    --red-200: #F0A7AB;
    --red-300: #D9575D;
    --red-400: #CC3D45;
    --red-500: #B2242B;
    --red-500-75: rgba(178, 36, 43, 0.75);
    --red-600: #AF1B23;
    --red-700: #59070B;
    --red-700-75: rgba(89, 7, 11, 0.76);
    --red-800: #4D0408;
    --red-900: #400003;

    --blue-100: #DFEAF2;
    --blue-100-05: rgba(223, 234, 242, 0.05);
    --blue-100-75: rgba(223, 234, 242, 0.75);
    --blue-200: #579ED9;
    --blue-300: #3D8CCC;
    --blue-400: #2472B2;
    --blue-500: #0A3D66;
    --blue-600: #073459;
    --blue-600-50: rgba(7, 52, 89, 0.50);
    --blue-600-75: rgba(7, 52, 89, 0.75);
    --blue-700: #042C4D;
    --blue-800: #002340;
    --blue-900: #001C33;
    --blue-900-transparent: rgba(0, 28, 51, 0.95);

    --yellow-100: #F2F2DF;
    --yellow-200: #D4D957;
    --yellow-300: #C7CC3D;
    --yellow-400: #AEB224;
    --yellow-500: #63660A;
    --yellow-600: #575907;
    --yellow-700: #4A4D04;
    --yellow-800: #3E4000;
    --yellow-900: #313300;

    --green-100: #E1F2DF;
    --green-200: #66D957;
    --green-300: #4ECC3D;
    --green-400: #34B224;
    --green-500: #15660A;
    --green-600: #115907;
    --green-700: #0C4D04;
    --green-800: #074000;
    --green-900: #063300;

    --gray-100: #DFECF2;
    --gray-200: #6C7A80;
    --gray-300: #5C6C73;
    --gray-400: #425B66;
    --gray-500: #3E5159;
    --gray-500-75: rgba(62, 81, 89, 0.76);
    --gray-600: #32454D;
    --gray-700: #263840;
    --gray-800: #1C2C33;
    --gray-900: #132126;
    --gray-900-75: rgba(19, 33, 38, 0.91);

    --grid-gap: 5px;
    --grid-gap-row: 5px;
    --grid-gap-column: 5px;
    --grid-block-gap: 5px 0;

    --h1-size: 24px;
    --h2-size: 16px;
    --p-size: 12px;

    --font-family: RobotoSerif-Italic-VariableFont_GRAD, opsz, wdth, wght;
    --font-primar-color: var(--blue-100);
    --font-second-color: var(--blue-200);
    --font-details-color: var(--red-200);
}

body {
    background-color: var(--blue-100);
    margin: 0;
}

/*
------------------------------------------- TEXT -------------------------------------------------------------------------
 */

html {
    font-family: var(--font-family);
}

h1 {
    font-size: var(--h1-size);
    text-align: center;
}

h2 {
    font-size: var(--h2-size);
    text-align: center;
    margin: 30px 0;
}

p, div {
    font-size: var(--p-size);
    line-height: 18px;
    letter-spacing: 1px;
}

.text-center {
    text-align: center;
}

.text-justify {
    text-align: justify;
}

h4 {
    margin: 20px 0 -5px 0;
}

h2 a {
    text-decoration: var(--red-500) underline;
    color: var(--font-second-color);
    width: 0;
}

h1, h2, h3, h4 {
    color: var(--font-second-color);
}

p, div {
    color: var(--font-primar-color);
}

.important {
    font-weight: bold;
}

.span-beta {
    color: var(--font-details-color);
}

.span-beta strong {
    color: var(--red-300);
}

a {
    color: var(--font-primar-color);
    text-decoration-color: var(--red-600);
    scroll-margin-top: -60px
}

.anchor {
    scroll-margin-top: 90px;
}

.base-padding-margin {
    padding: 20px;
    margin: 10px 0;
}

span.lien {
    color: var(--red-200);
    display: block;
    font-size: 12px;
    text-decoration: none;
}

.bold {
    font-weight: bold;
}

.grid p {
    margin: 20px;
    text-align: center;
}

.description p {
    text-align: justify;
}

/*
------------------------------------------- STRUCTURE -------------------------------------------------------------------------
 */

.container {
    width: 1200px;
    margin: 100px auto 0;
    overflow: hidden;
}

.grid-background {
    background-color: var(--blue-900-transparent);
}

.grid {
    display: grid;
    grid-template-columns: auto;
    gap: var(--grid-gap-column) var(--grid-gap-row);
    margin: var(--grid-block-gap);
}

.grid .grid {
    margin: 0;
}

.grid-table {
    align-items: center;
    text-align: center;
    min-height: 30px;
}

.grid-table:nth-child(2n) {
    background-color: var(--blue-100-05);
}

.grid-table-header {
    font-weight: bold;
    border-bottom: 1px solid var(--blue-100-75);
    padding: 0;
}

.grid-7 {
    grid-template-columns: repeat(7, 1fr);
}

.grid-2 {
    grid-template-columns: calc(50% - var(--grid-gap-row) / 2) calc(50% - var(--grid-gap-row) / 2);
}

.grid.grid-2 div {
    width: 98%;
    margin: 0 auto;
}

.grid-1-3-2 {
    grid-template-columns: 1fr 3fr 1fr 1fr;
}

.grid-2-1 {
    grid-template-columns: 3fr 9fr;
}

.grid-3 {
    grid-template-columns: repeat(3, 1fr);
}

.grid-4 {
    grid-template-columns: repeat(4, 1fr);
}

.grid-5 {
    grid-template-columns: calc(20% - (var(--grid-gap-row) / 5 * 4)) calc(20% - (var(--grid-gap-row) / 5 * 4)) calc(20% - (var(--grid-gap-row) / 5 * 4)) calc(20% - (var(--grid-gap-row) / 5 * 4)) calc(20% - (var(--grid-gap-row) / 5 * 4));
}

.grid-6 {
    grid-template-columns: repeat(6, 1fr);
}

.grid-7 {
    grid-template-columns: repeat(7, 1fr);
}

.grid-8 {
    grid-template-columns: repeat(8, 1fr);
}

.grid-9 {
    grid-template-columns: repeat(9, 1fr);
}

.grid-10 {
    grid-template-columns: repeat(10, 1fr);
}

.grid-11 {
    grid-template-columns: repeat(11, 1fr);
}


.grid-3-first-small {
    grid-template-columns: calc(23.33% - var(--grid-gap-row) / 3 * 2) calc(38.33% - var(--grid-gap-row) / 3 * 2) calc(38.33% - var(--grid-gap-row) / 3 * 2);
}

.col-2 {
    grid-column: span 2;
    max-width: 100%;
}

.row-2 {
    grid-row: span 2;
    max-height: 100%;
}

/*
-------------------------------------------- Translation ---------------------------------------------------------------
 */

.rotate-90 {
    transform: rotate(-90deg);
    transform-origin: 50px;
}

/*
------------------------------------------- IMAGE -----------------------------------------------------------------------
 */

.img {
    display: block;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center top;
    max-width: 85%;
    height: 320px;
    margin: 10px auto;
}

.img-border {
    border: black 1px solid;
    padding: 20px;
    margin: 20px 0;
}