/*
 * Custom code goes here.
 * A template should always ship with an empty custom.css
 */

/*
 * Custom code goes here.
 * A template should always ship with an empty custom.css
 */

@import '_partials/_fonts.css';
@import '_partials/_inputs.css';
@import '_partials/_buttons.css';
@import '_partials/_components.css';


@import 'header.css';
@import 'footer.css';

@import 'home.css';

@import 'category.css';
@import 'product-miniature.css';
@import 'product.css';
@import 'search.css';

@import 'cart.css';
@import 'checkout.css';

@import 'page-cms.css';
@import 'formations.css';

@import 'contact.css';
@import 'account.css';
@import 'log-register.css';

/* ---- ROOT ---- */
:root{
    /*==== COLORS ====*/
    /* -- Primary -- */
    --color-blueprim: #004C70;
    --color-redprim: #C52026;

    /* -- Secondary -- */
    --color-blue: #0ACEB5;
    --color-lightblue: #D9EDF7;

    /* -- Neutral -- */
    --color-black: #282828;
    --color-darkgrey: #656565;
    --color-grey: #E4E4E2;
    --color-lightgrey: #F9F9F9;
    --color-white: #FFFFFF;
    /*==== FIN COLORS ====*/

    /*==== SHADOWS ====*/
    --shadow: 0 2px 6px 0 rgba(130, 169, 188, 0.08),
                0 5px 50px 0 rgba(0, 67, 101, 0.08);
    /*==== FIN SHADOWS ====*/

    /*==== BORDER RADIUS ====*/
    --br-5: 5px;
    --br-10: 10px;
    /*==== FIN BORDER RADIUS ====*/

    /*==== FONT ====*/
    --font-normal : 'Montserrat', Arial, serif;
    /*==== FIN FONT ====*/
}

html{
    font-size: 16px;
    scroll-behavior: smooth;
}

body{
    font-family: var(--font-normal);
    font-weight: 400;
    font-style: normal;
    color: var(--color-black);
    font-size: clamp(0.875rem, 1vw + 0.5rem, 1rem); /* ajuste entre 14px et 16px */
    line-height: 1.3;
}

#wrapper{
    background: var(--color-lightgrey);
    padding: 0 0 clamp(4rem, 5vw, 5rem) 0;
}

.h1, .h2, .h3, .h4, .h5, .h6, h1, h2, h3, h4, h5, h6{
    margin-bottom: 1rem;
}

h1, h2, h3{
    font-weight: 700;
    color: var(--color-black);
}

.h1, .h2, .h3{
    text-transform: inherit;
}

h1, .h1{
    font-size: clamp(1.5rem, 2vw + 1rem, 1.75rem);
    line-height: 1.3;
}

h2, .h2 {
    font-size: clamp(1.25rem, 2vw + 1rem, 1.5rem);
    line-height: 1.3;
}

h3, .h3{
    font-size: clamp(1.125rem, 2vw + 1rem, 1.25rem);
    line-height: 1.3;
}

.subtitle1{
    font-size: clamp(1rem, 2vw + 1rem, 1.125rem);
    line-height: 1.3;
    font-weight: 700;
}

.subtitle2{
    font-size: clamp(.875rem, 2vw + 1rem, 1rem);
    line-height: 1.3;
    font-weight: 700;
}

p, a, span, label, .label, li{
    color: var(--color-black);
    font-size: clamp(0.875rem, 1vw + .5rem, 1rem); /* ajuste entre 14px et 16px */
}

a:hover{
    color: inherit;
}

span{
    display: block;
}

@media screen and (min-width: 1200px){
    .container{width: 1320px;}
}