﻿/* < ============================================  VARIABLES root  ============================================ > */
:root {
    /* -------------------- */
    /* -- Couleurs -- */
    /* -- Noir -- */
    --noir: #000000;
    --noir_100: var(--noir);
    --noir_90: #16161D;
    --noir_80: #2B2B38;

    /* -- Jaune -- */
    --jaune: #FFCF00;
    --jaune_150: #C6A000;
    --jaune_100: var(--jaune);
    --jaune_65: #FFE783;
    --jaune_40: #FFF3C2;

    /* -- Blanc -- */
    --blanc: #FFFFFF;

    /* -- Bleu -- */
    --bleu: #416D81;
    --bleu_150: #1E2A3D;
    --bleu_100: var(--bleu);
    --bleu_65: #558EA8;
    --bleu_40: #87C3D8;

    /* -- Rouge -- */
    --rouge: #C91D1D;

    /* -- Vert -- */
    --vert: #00BB55;

    /* -- Orange -- */
    --orange:    #FF9A52;
    --orange150: #E66F00;

    /* -- Gris -- */
    --gris: #838383;
    --gris_200: #242424;
    --gris_150: #6A6A6A;
    --gris_100: var(--gris);
    --gris_50: #EDEDED;
    --gris_25: #C0C0C0;
    --gris_10: #E6E6E6;
    
    /* -------------------- */
    /* -- Font -- */
    --font: "Outfit", sans-serif;
    --bold:      700;
    --semibold:  600;
    --medium:    500;
    --regular:   400;
    /*--*/
    --size_h1: 40px;
    --size_h2: 32px;
    --size_h3: 24px;
    --size_h4: 20px;
    --size_h5: 14px;
    --size_h6: 12px;
    --size_p : 13px;
    --size_p15:15px;
    /* -------------------- */
    /* Valeurs */
    --val_0: 0px;
    --val_5: 5px;
    --val_10: 10px;
    --val_15: 15px;
    --val_20: 20px;
    --val_25: 25px;
    --val_30: 30px;
    --val_35: 35px;
    --val_40: 40px;
    --val_45: 45px;
    --val_50: 50px;
    /*--*/
    --marg_0_10: var(--val_0) var(--val_10);
    --marg_0_20: var(--val_0) var(--val_20);
    --marg_0_25: var(--val_0) var(--val_25);
    --marg_0_30: var(--val_0) var(--val_30);
    --marg_0_35: var(--val_0) var(--val_35);
    --marg_0_40: var(--val_0) var(--val_40);
    /*--*/
    --marg_5_0: var(--val_5) 0;
    --marg_5_10: var(--val_5) var(--val_10);
    --marg_5_20: var(--val_5) var(--val_20);
    --marg_5_25: var(--val_5) var(--val_25);
    --marg_5_30: var(--val_5) var(--val_30);
    --marg_5_35: var(--val_5) var(--val_35);
    --marg_5_40: var(--val_5) var(--val_40);
    /*--*/
    --marg_10_0: var(--val_10) 0;
    --marg_10_20: var(--val_10) var(--val_20);
    --marg_10_25: var(--val_10) var(--val_25);
    --marg_10_30: var(--val_10) var(--val_30);
    --marg_10_35: var(--val_10) var(--val_35);
    --marg_10_40: var(--val_10) var(--val_40);
    /*--*/
    --marg_15_0: var(--val_15) 0;
    --marg_15_10: var(--val_15) var(--val_10);
    --marg_15-20: var(--val_15) var(--val_20);
    --marg_15-25: var(--val_15) var(--val_25);
    --marg_15-30: var(--val_15) var(--val_30);
    --marg_15-35: var(--val_15) var(--val_35);
    --marg_15-40: var(--val_15) var(--val_40);
    /*--*/
    --marg_0_auto: 0 auto;
    --marg_5_auto: var(--val_5) auto;
    --marg_10_auto: var(--val_10) auto;
    --marg_15_auto: var(--val_15) auto;
    --marg_20_auto: var(--val_20) auto;
    --marg_25_auto: var(--val_25) auto;
    --marg_30_auto: var(--val_30) auto;
    --marg_25_auto: var(--val_35) auto;
    --marg_20_0: var(--val_20) 0;
    --marg_25_0: var(--val_25) 0;
    --marg_30_0: var(--val_30) 0;
    /*--*/
    --marg_20_0: var(--val_20) 0;
    --marg_20_5: var(--val_20) var(--val_5);
    --marg_20_10: var(--val_20) var(--val_10);
    --marg_20_15: var(--val_20) var(--val_15);
    /*--*/
    --marg_25_0: var(--val_25) 0;
    --marg_25_5: var(--val_25) var(--val_5);
    --marg_25_10: var(--val_25) var(--val_10);
    --marg_25_15: var(--val_25) var(--val_15);
    /* -------------------- */
    /**/
}

/* < ============================================  CSS  ============================================ > */

/* -------------------- */
/* -- Font -- */
*, html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video, input {
    font-family: var(--font);
}
.h1, .h2, .h3, .h4, .h5, .h6, .p{
    font-weight: var(--medium);
    font-optical-sizing: auto;
    font-family: var(--font);
    font-style: normal;
}
.h1{
    font-size: var(--size_h1);
    font-weight: var(--bold);
}
.h2{
    font-size: var(--size_h2);
    font-weight: var(--semibold);
}
.h3{
    font-size: var(--size_h3);
    font-weight: var(--medium);
}
.h4{
    font-size: var(--size_h4);
    font-weight: var(--regular);
}
.h5 {
    font-size: var(--size_h5);
    font-weight: var(--regular);
}
.h6 {
    font-size: var(--size_p);
    font-weight: var(--regular);
}
.p {
    font-size: var(--size_p);
    font-weight: var(--regular);
}
.a {
    text-decoration: none;
    font-size: var(--size_p);
    font-weight: var(--medium);
}
.bold {
    font-weight: var(--bold);
}
.semibold {
    font-weight: var(--semibold);
}
.medium {
    font-weight: var(--medium);
}
.regular {
    font-weight: var(--regular);
}
.p_blanc{
    color: var(--blanc);
}

/* -------------------- */
/* -- CTA -- */

/* CTA jaune */
.cta{
    padding: var(--marg_15-35);
    background-color: var(--jaune);
    cursor: pointer;
}
.cta:hover{
    background-color: var(--jaune_65);
}
.cta-p{
    color: var(--noir);
    font-size: var(--size_h3);
    font-weight: var(--medium);
}
.cta_small {
    padding: var(--marg_5_10);
}


/* CTA blanc */
.cta_blanc {
    padding: var(--marg_15-35);
    background-color: var(--blanc);
}
.cta_blanc:hover{
    background-color: var(--jaune_65);
}


/* -------------------- */
/* -- info -- */
.info{
    padding: var(--marg_5-30);
    color: var(--blanc);
    font-size: var(--size_h5);
    font-weight: var(--semibold);
}
.info_vert{
    background-color: var(--vert);
}
.info_noir{
    background-color: var(--noir);
}
.info_gris{
    background-color: var(--gris);
    color: var(--rouge);
}


/* -------------------- */
/* -- flex -- */
.flex{
    display: flex;
}
.flex_center{
    display: flex;
    justify-content: center;
    align-items: center;
}
.flex_between{
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.flex_around{
    display: flex;
    justify-content: space-around;
    align-items: center;
}
.flex_start{
    display: flex;
    justify-content: flex-start;
    align-items: center;
}
.flex_end{
    display: flex;
    justify-content: flex-end;
    align-items: center;
}
.flex_column{
    display: flex;
    flex-direction: column;
}

.menu_boutons,
.cbk_menu-legend {
    font-size: var(--size_h5);
    font-weight: var(--medium);
}