/* Import police Barlow */
@import url('https://fonts.googleapis.com/css2?family=Barlow:wght@300;400;600;700;800&display=swap');
/* Import police Noto Sans */
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans:wght@400;100;400&display=swap');


/*** Règles css de base ***/

*{
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}
html, body{
    overflow-x: hidden;
}
body{
    font-family: 'Noto Sans', sans-serif;
}
ul{
    list-style: none;
}
select{
	border-radius: 0;
}
a{
    text-decoration: none;
    color: black;
}
a:hover{
    color: var(--tertiaire);
    transition: .1s;
}
img{
    max-width: 100%;
}
p{
    line-height: 1.4;
}

/* Variables de couleurs */
:root {
    --primaire: #2D8C8C;
    --secondaire: #ACC549;
    --tertiaire: #C63629;
    --blanc: #fff;
    --noir: #222222;
}


/* Global */
.btn{
    border: 1px solid var(--tertiaire);
    background-color: var(--tertiaire);
    border-radius: 48px;
    padding: 0.5rem 1.5rem;
    color: var(--blanc);
    text-decoration: none;
    transition: .3s;
    display: block;
    width: fit-content;
    text-transform: uppercase;
	text-align: center;
}
.btn:hover{
    background-color: transparent;
    color: var(--tertiaire);
}
h1, h2{
    font-family: 'Barlow', sans-serif;
}
h1{
    font-weight: 800;
    font-size: 2.5rem;
}
.sous-titre{
    font-size: 2rem;
    font-weight: 600;
    color: var(--primaire);
    position: relative;
}
.sous-titre::after{
    content: '';
    position: absolute;
    left: 0;
    bottom: -0.5rem;
    width: 3.75rem;
    height: 5px;
    background-color: var(--secondaire);
}
/* Police titre desktop */
@media screen and ( min-width:1200px ) {
    h1{
        font-size: 4rem;
    }
    .sous-titre{
        font-size: 2.5rem;
    }
    .sous-titre::before{
        top: 0rem;
    }
}
/* Police écran 4k */
@media screen and ( min-width:3000px ) {
    *{
        font-size: 1.5rem;
    }
}
.affiche{
    opacity: 1 !important;
}

/*********
* HEADER *
*********/

.header{
    width: 100vw;
    position: fixed;
    z-index: 5;
    margin-top: 0;
    top: 0;
    display: flex;
    background-color: var(--blanc);
}
.header .menu{
    min-height: 100vh;
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 4rem;
    font-family: 'Barlow', sans-serif;
}
.header .infos{
    display: none;
}
.header .header__logo{
    height: 4.5rem;
    padding: 1rem;
}
.header .menu__container{
    display: flex;
    flex-direction: column;
    gap: 1rem;
    position: relative;
}
.checkbox{
    display: none;
}

/* Barre de recherche mobile */
.header .menu .search{
    height: fit-content;
    padding-bottom: 0.5rem;
    border-bottom: solid 1px var(--primaire);
}
.header .menu .search input, .header .search button{
    border: none;
    background-color: transparent;
    color: var(--primaire);
}
.header .menu .search input:focus{
    outline: none;
}
.header .menu .search button{
    cursor: pointer;
}
.header .menu .search input::placeholder{
    color: var(--primaire);
    font-family: 'Noto Sans', sans-serif;
    font-size: 1rem;
    font-weight: 100;
}
.header .menu .search img{
    filter: brightness(0.5);
}

/* Sous menu */

@keyframes fade_in_show {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

@media screen and ( min-width:1200px ) {
    h2{
        font-size: 2.5rem;
    }
    .header{
        width: 100vw;
        position: fixed;
        background-color: var(--blanc);
        box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.12);
    }
    .header__logo-conteneur{
        width: 35%;
        display: flex;
        justify-content: center;
        align-items: center;
    }
    .header__logo-conteneur a{
        height: 60%;
    }
    .header .header__logo{
        height: 7rem;
        padding: 0;
    }
    .header > :last-child{
        flex-grow: 1;
    }
    /* Barre d'infos */
    .header .infos{
        display: flex;
        background-color: var(--primaire);
        color: var(--blanc);
        padding: 0 3rem;
        justify-content: space-around;
        align-items: center;
        height: 100px;
        transition: height 0.5s ease-in-out;
    }
    .header .info{
        display: flex;
        gap: 1rem;
        align-items: center;
    }
    .header .info__picto{
        height: 24px;
        margin-top: 5px;
    }
    /* Barre de recherche */
    .header .search{
        height: fit-content;
        padding-bottom: 0.5rem;
        border-bottom: solid 1px var(--blanc);
    }
    .header .search input, .header .search button{
        border: none;
        background-color: transparent;
        color: var(--blanc);
    }
    .header .search input:focus{
        outline: none;
    }
    .header .search button{
        cursor: pointer;
    }
    .header .search input::placeholder{
        color: var(--blanc);
        font-family: 'Noto Sans', sans-serif;
        font-size: 1rem;
        font-weight: 100;
    }
    /* Barre de navigation */
    .header .menu{
        flex-direction: row;
        min-height: initial;
        justify-content: center;
        padding: 2rem 0;
    }
    .header .menu__container{
        flex-direction: row;
        gap: 2rem;
        width: initial;
		align-items: center;
        text-align: center;
    }
    .menu__lien-container{
        position: relative;
    }
    /* Enlever la barre de recherche mobile */
    .header .menu .search{
        display: none;
    }
}

/* Menu burger pour mobile et tablette */
@media screen and ( max-width:1200px ) {
    .checkbox{
        display: block;
        width: 40px;
        height: 32px;
        position: absolute;
        top: 1rem;
        right: 1rem;
        cursor: pointer;
        opacity: 0;
        z-index: 2;
        -webkit-touch-callout: none;
    }

    /* Burger style */
    .burger{
        position: fixed;
        top: 1.5rem;
        right: 1.5rem;
        z-index: 1;
    }
    .burger span{
        display: block;
        width: 33px;
        height: 4px;
        margin-bottom: 5px;
        position: relative;
        background: var(--secondaire);
        border-radius: 3px;
        z-index: 1;
        transform-origin: 4px 0px;
        transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0),
                    background 0.5s cubic-bezier(0.77,0.2,0.05,1.0),
                    opacity 0.55s ease;
    }
    .burger span:first-child{
        transform-origin: 0% 0%;
    }
    .burger span:nth-last-child(1){
        transform-origin: 0% 100%;
    }
    /* Transform burger into a crossmark */
    .header .checkbox:checked ~ .burger span{
        opacity: 1;
        transform: rotate(45deg) translate(-2.5px, -2.5px);
        background: var(--secondaire);
    }
    .header .checkbox:checked ~  .burger span:nth-last-child(2){
        opacity: 0;
        transform: rotate(0deg) scale(0.2, 0.2);
    }
    .header .checkbox:checked ~  .burger span:nth-last-child(1){
        transform: rotate(-45deg) translate(0, 0);
    }
    .header .menu{
        position: absolute;
        top: 0;
        right: 0;
        background-color: var(--blanc);
        transform-origin: 0% 0%;
        transform: translate(100%, 0);
        transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0);
        width: 50%
    }
    .header .checkbox:checked ~ .menu{
        transform: none;
    }
}
@media screen and ( max-width:650px ) {
    .header .menu{
        width: 100%;
    }
}

/*********
* FOOTER *
*********/

.footer{
    display: flex;
    flex-direction: column;
    background-color: var(--primaire);
    color: var(--blanc);
    justify-content: space-around;
    align-items: flex-start;
    padding: 4rem 10%;
    gap: 2rem;

    margin-top: 5rem;
}
.footer__logo{
    max-width: 300px;
}
.footer a{
    color: var(--blanc);
}
.footer a:hover{
    color: var(--secondaire);
}
.footer .footer__infos > *{
    margin-bottom: 1rem;
}
.footer .footer__infos a{
    display: block;
}
.footer__menu ul{
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}
.footer__devis .suivre{
    margin-bottom: 0.5rem;
}
.footer .btn--footer{
    background-color: var(--secondaire);
    border-color: var(--secondaire);
    margin-top: 1rem;
    margin-bottom: 2rem;
}
.footer .btn--footer:hover{
    background-color: transparent;
    color: var(--secondaire);
}
.footer .footer__conteneur{
    display: flex;
    flex-direction: column;
    gap: 2rem;
}
/* Responsive tablette */
@media screen and (min-width: 668px) {
    .footer .footer__conteneur{
        flex-direction: row;
		gap: 5rem;
    }
}
/* Responsive desktop */
@media screen and ( min-width:1200px ) {
    .footer{
        flex-direction: row;
        position: relative;
        padding-right: 15%;
		padding-bottom: 6rem;
    }
    .footer__logo{
        width: 20%;
    }
    .footer::before{
        position: absolute;
        top: -21.5rem;
        left: -8rem;
        content: url(../images/arc.svg);
        z-index: -1;
        transform: scale(80%);
    }
    .footer::after{
        position: absolute;
        bottom: 0;
        right: 0;
        content: url(../images/espacevert-blanc.svg);
    }
	.footer .footer__credits{
        display: flex;
        position: absolute;
        bottom: 2rem;
        font-size: .875rem;
    }
}

/* Style par défaut */
.defaut{
    margin: 3rem 10%;
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}
.defaut h2{
    font-size: 2rem;
    font-weight: 600;
    color: var(--primaire);
    position: relative;
}
.defaut h2::after{
    content: '';
    position: absolute;
    left: 0;
    bottom: -0.5rem;
    width: 3.75rem;
    height: 5px;
    background-color: var(--secondaire);
}
.defaut h1{
    color: var(--primaire);
    position: relative;
    margin-bottom: 2rem;
}
.defaut h1::after{
    content: '';
    position: absolute;
    left: 0;
    bottom: -0.5rem;
    width: 3.75rem;
    height: 5px;
    background-color: var(--secondaire);
}
.defaut ul li{
    position: relative;
    margin-left: 1.5rem;
    margin-bottom: 0.5rem;
}
.defaut ul li::before {
    position: absolute;
    content: "\002022";
    color: var(--secondaire);
    font-weight: bold;
    font-size: 32px;
    line-height: 0.7;
    margin-left: -1.5rem
}
.defaut a{
    color: var(--secondaire);
}
.defaut a:hover{
    text-decoration: underline;
}
.erreur404 .btn{
	color: var(--blanc);
}
.erreur404 .btn:hover{
	text-decoration: none;
}
/* Responsive desktop */
@media screen and ( min-width:1200px ) {
    .defaut{
        margin-bottom: 15rem;
    }
    /* search */
    .recherche{
        margin-top: 13rem;
    }
    .defaut .btn:hover{
        color: var(--tertiaire);
    }
    .defaut a:hover{
        color: var(--secondaire);
    }
    /* 404 */
	.erreur404{
		position: relative;
	}
    .erreur404::after{
        content: url(../images/herbes.svg);
        position: absolute;
        right: 0;
        bottom: -17rem;
    }
}

/* Main par défaut */
.main{
    margin-top: 4.5rem;
    min-height: 40vh;
    position: relative;
    padding: 0 10%;
}
.main::before{
    position: absolute;
    content: '';
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    background-position: center;
    background-size: cover;
    z-index: -1;
}
.main::after{
    position: absolute;
    content: '';
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    z-index: -1;
    background-color: rgba(0, 77, 51, 0.4);
}
.main__titre{
    color: var(--blanc);
    padding-top: 4rem;
    position: relative;
}
.main__titre::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: -0.5rem;
    width: 3.75rem;
    height: 5px;
    background-color: var(--secondaire);
}

/* Responsive desktop */
@media screen and (min-width: 1200px) {
    .main{
        margin-top: 12.5rem;
        min-height: 30vh;
    }
}

/* Cacher le logo ReCaptcha */
.grecaptcha-badge {
    display: none !important;
}


/* Popup bons cadeaux */
#popmake-549{
	display: flex;
    flex-direction: column;
    align-items: center;
}
#popmake-549 #pum_popup_title_549{
	color: #2D8C8C;
	text-align: center;
	font-weight: 400;
}
#popmake-549 .popmake-content{
	display: flex;
    flex-direction: column;
    gap: 0.5rem;
    text-align: center;
    align-items: center;
}
#popmake-549 .photo-popup{
	position: relative;
	margin-bottom: 1.5rem;
}
#popmake-549 .btn{
	position: absolute;
	bottom: -1rem;
	left: 50%;
	transform: translateX(-50%);
}
#popmake-549 .btn:hover{
	background-color: white;
}
#popmake-549 .bold{
	font-weight: 800;
	color: #C63629;
}