/*!
 * Easy-CSS
 * Version : 1
 * Copyright 2024 - Decoux MAthilde
*/

/*
@charset "UTF-8"
*/

@font-face {
    font-family: 'Butany';
    src: url('../fonts/Butany.otf') format('truetype');
}
@font-face {
    font-family: 'Now-Black';
    src: url('../fonts/Now-Black.otf') format('truetype');
}
@font-face {
    font-family: 'Now-Bold';
    src: url('../fonts/Now-Bold.otf') format('truetype');
}
@font-face {
    font-family: 'Now-Light';
    src: url('../fonts/Now-Light.otf') format('truetype');
}
@font-face {
    font-family: 'Now-Medium';
    src: url('../fonts/Now-Medium.otf') format('truetype');
}
@font-face {
    font-family: 'Now-Regular';
    src: url('../fonts/Now-Regular.otf') format('truetype');
}
@font-face {
    font-family: 'Now-Thin';
    src: url('../fonts/Now-Thin.otf') format('truetype');
}
@font-face {
    font-family: 'NowAlt-Black';
    src: url('../fonts/NowAlt-Black.otf') format('truetype');
}
@font-face {
    font-family: 'NowAlt-Bold';
    src: url('../fonts/NowAlt-Bold.otf') format('truetype');
}
@font-face {
    font-family: 'NowAlt-Light';
    src: url('../fonts/NowAlt-Light.otf') format('truetype');
}
@font-face {
    font-family: 'NowAlt-Medium';
    src: url('../fonts/NowAlt-Medium.otf') format('truetype');
}
@font-face {
    font-family: 'NowAlt-Regular';
    src: url('../fonts/NowAlt-Regular.otf') format('truetype');
}
@font-face {
    font-family: 'NowAlt-Thin';
    src: url('../fonts/NowAlt-Thin.otf') format('truetype');
}

:root {
    /* Base */
    --white: #fff;
    --black: #000;

    /* Primitives */
    --clr-green-base : #479850;
    --clr-green-light : #7fb383;
    --clr-brown-base : #6E2f1A;
    --clr-brown-light : #80635a;
    --clr-orange-base : #BF7812;
    --clr-orange-light : #c5a06b;
    --clr-blue-base : #086E9B;
    --clr-blue-light : #6d8b97;
    --clr-gray : #363636;


    /* Reseaux */
    --clr-facebook : #3B5998;
    --clr-linkedin : #0179B5;
    --clr-instagram : linear-gradient(45deg, rgba(195, 42, 163, 1) 0%, rgba(244, 111, 48, 1) 100%);
    --clr-youtube : #c4302b ;
    --clr-twitter : #000000;
    --clr-tiktok : #000000;

    /* Typographie */
    --title : 'Butany';
    --base : 'Now-Light';
}

body {
    font-family: var(--base);
    font-weight: 300;
    background-color: #fcfafa;
}

html,
body {
    scroll-behavior: smooth;
}

picture {
	width: 100%;
}

p { 
    font-family: var(--base);
    font-size: 16px;
}

@media screen and (min-width: 800px) {
    p { font-size: 18px; }
}

header {
    position: fixed;
    width: 100%;
    z-index: 999;
}

main {
    padding-top: 10rem;
    padding-bottom: 3rem;
    overflow-x: hidden;
    overflow-y: hidden;
}

.site-main {
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

.boutique-main {
    display: flex;
    flex-direction: column;
    gap: 2rem;
    padding-top: 6rem;
    padding-bottom: 1rem;
    overflow-x: hidden;
    overflow-y: hidden;
}

@media screen and (max-width: 576px) {
    header .topnav__content,
    header nav .nav__content,
    .title__content,
    footer .footer-top__content,
    footer .footer-bottom,
    .front-about,
    .front-categories,
    .front-reseaux,
    .reseaux,
    .about,
    .about-valeurs,
    .about-clients,
    .carte-maps,
    .carte-section,
    .carte-lieux,
    .fiche-produit,
    .boutique,
    .content__page {
        margin: 0 1rem;
    }

    .cta,
    .front-catalogue {
        padding: 0 1rem;
    }
}


.page__content h2 {
    color: var(--clr-orange-base);
    font-family: "Now-Regular";
    padding-left: 2rem;
    margin-top: 2rem;
    margin-bottom: 1rem;
}

.page__content h3 {
    color: var(--clr-orange-base);
    font-family: "Now-Regular";
    margin-top: 1rem;
    margin-bottom: 1rem;
}

.page__content strong {
    font-family: "Now-Bold";
}

.page__content a {
    text-decoration: underline;
}

.page__content ul {
    padding: 1rem 0 1rem 2rem;
}

.page__content li {
    list-style-image: url("../images/icon-fleche-black.svg");
}