﻿/* < ============================================  VARIABLES root  ============================================ > */
:root {
    /* -------------------- */
    /* -- Couleurs -- */
    /* -- Noir -- */
    --noir: #101010;
    
    /* -- Blanc -- */
    --blanc: #FEFEFE;

    /* -- Rouge -- */
    --rouge: #E62D29;

    --rouge_50 : #EA5550;
    --rouge_100: var(--rouge);
    --rouge_150: #BE241C;

    /* -- Vert -- */
    --vert: #4EB272;

    --vert_50 : var(--vert);
    --vert_100: #189E53;
    --vert_150: #0E7B3B;
    --vert_dispo: #00bb55;

    /* -- Gris -- */
    --gris : #494949;

    --gris_50  : #D6D6D6;
    --gris_100 : var(--gris);
    --gris_150 : #D6D6D6;

    /* -- Bleu -- */
    --bleu : #68B0D8;

    --bleu_50  : #7BC5E9;
    --bleu_100 : var(--bleu);
    --bleu_150 : #4896BB;

    /* -- Jaune -- */
    --jaune : #E8B433;

    --jaune_50  : #f5C95B;
    --jaune_100 : var(--jaune);
    --jaune_150 : #BB8E1C;

    /* -------------------- */
    /* -- Font -- */
    --font: "Nunito", sans-serif;
    --bold:     800;
    --semibold: 700;
    --medium:   600;
    --regular:  500;

    /*--*/
    --size_h1: 40px;
    --size_h2: 28px;
    --size_h3: 22px;
    --size_h4: 18px;
    --size_h5: 16px;
    --size_h6: 12px;
    --size_p : 14px;

    /* -------------------- */
    /* 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_info: 3px var(--val_15);
    --marg_info: 3px var(--val_15);

    /*--*/
    --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_15: var(--val_5) var(--val_15);
    --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);
    /* -------------------- */
    /**/


    /* Border-radius */
    --cta_radius : 13px 6px 20px 13px;
    --info_radius : 14px 12px 12px 9px;
}

/* < ============================================  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);
}
.info {
    border-radius: var(--info_radius);
    padding: var(--marg_info);
    font-size: var(--size_h6);
    font-weight: var(--medium);
    color: var(--blanc);
}

.info_bleu {
    background: var(--bleu);
}

.info_rouge {
    background: var(--rouge);
}

.info_vert {
    background: var(--vert);
}

.cta {
    border-radius: var(--cta_radius);
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    padding: var(--marg_10_20);
}
.cta_vert {
    background: var(--vert);
    color: var(--blanc);
}
.cta_vert:hover {
    background: var(--vert_100);
}
.cat_ajouter_panier {
    background: var(--vert);
    border-radius: var(--cta_radius);
    font-size: var(--size_p);
    font-weight: var(--medium);
}
.cta_rouge {
    background: var(--rouge);
    color: var(--blanc);
}
.cta_rouge:hover {
    background: var(--rouge_50);
}


/* --- Item --- */
.relative{
    position: relative;
}
.absolute{
    position: absolute;
}
.sticky{
     position: sticky;
}
.large_max{
    width: 100%;
}
.item_center {
    margin: 0 auto;
}
.item_left {
    position: relative;
    right: auto;
    left: 0;
}
.item_right {
    position: relative;
    left: auto;
    right: 0;
}

.verticale_20 {
    margin-top: var(--val_20);
    margin-bottom: var(--val_20);
}

.horizontale_20{
    margin-left: var(--val_20);
    margin-right: var(--val_20);
}