/*
	Theme Name: HTML5 Blank
	Theme URI: http://html5blank.com
	Description: HTML5 Blank WordPress Theme
	Version: 1.4.3
	Author: Todd Motto (@toddmotto)
	Author URI: http://toddmotto.com
	Tags: Blank, HTML5, CSS3

	License: MIT
	License URI: http://opensource.org/licenses/mit-license.php
*/

/*------------------------------------*\
    MAIN
\*------------------------------------*/

/*font-family: 'Cormorant Upright', serif;
Light 300
Regular 400
Medium 500
Semi-bold 600
Bold 700

font-family: 'Livvic', sans-serif;
Extra-light 200
Light 300
Light 300 italic
Regular 400
Regular 400 italic
Medium 500
Medium 500 italic
Semi-bold 600
Semi-bold 600 italic
Bold 700
Bold 700 italic*/

* {
    box-sizing: inherit;
}
html {
    font-size:10px; /* font-size:62.5% / 1rem = 10px */
    box-sizing: border-box;
}
body {
    font-family: 'Livvic', sans-serif;
    font-weight: 400;
    color:#131211;
    font-size:1.6rem; /* 16px */
    line-height: 1.5;
    margin:0;
}
a{
    text-decoration: none;
}
img {
	max-width:100%;
}
/**********************header*****************************************************/
header{
    background-image: url("img/homepage-banniere-maison-didier.jpg");
   height: 100vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    width: 100%;
    background-repeat: no-repeat;
    background-size: cover;
}
/***************header page à propos********************/
.page-id-5 header{
	background-image: url("img/devanture-maison-didier.jpg");
	background-position: center center;
	background-repeat: no-repeat;
    background-size: cover;
}
/******************header page collection********************/
.page-id-10 header{
    background-image: url("img/background-page-collection.jpg");
    background-position: center center;
}
/******************header page lunettes classiques**************************/
.post-type-archive-lunettes_classique header{
    background-image: url("img/background-page-lunettes-classiques.jpg");
    background-position: center center;
}
/********************header page lunettes créateurs************************/
.post-type-archive-lunettes_createur header{
    background-image: url("img/background-page-lunettes-createur.jpg");
    background-position: center center;
}
/*******************header page lunettes de luxe******************************/
.post-type-archive-lunettes-luxe header{
    background-image: url("img/background-page-lunettes-de-luxe.jpg");
    background-position: center center;
}
/**********************header page accessoires lunettes***************************/
.post-type-archive-accessoires-lunettes header{
    background-image: url("img/background-page-accessoire.jpg");
    background-position: center center;
}
/*******************header page lunettes sur mesure***************************/
.page-id-19 header{
    background-image: url("img/background-page-sur-mesure.jpg");
    background-position: center center;
}
/******************header page corner createur**********************/
 .page-id-21 header{
    background-image: url("img/corner-createur-8.jpg");
    background-position: center center;
    }
/**********************header page actualités******************************/
.category-10 header{
background-image: url("img/background-page-actualites.jpg");
background-position: center center;
}
/*******************header page contact**************************/
.page-id-8 header{
background-image: url("img/background-page-contact.jpg");
}
/*****nav******/
header nav{
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    align-items: center;
    margin:0;
	background: rgb(0,0,0);
	background: linear-gradient(180deg, rgba(0,0,0,0.9363095580028886) 0%, rgba(0,0,0,0) 100%);
}
header nav ul {
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    align-items: center;
    margin:0;
    padding: 0;
}
header nav a{
    margin-top: 3px;
}
header nav ul li{
    list-style: none;
    padding: 0 40px;
    margin:0;
    position: relative;
}
header nav ul li a{
    display: inline-block;
    color: #f7f7f7;
    text-transform: uppercase;
    font-family: 'Cormorant Upright', serif;
    font-size: 1.8rem;
    font-weight: 500;
    text-align: center;
}
header nav a img{
    width: 100px;
    max-width: none;
}
header nav a.logoMobile{
    display: none;
}
/****h1****/
h1{
    font-family: 'Cormorant Upright', serif;
    font-weight: 700;
    font-size: 6rem;
    color: #f7f7f7;
  	margin: auto 100px;
    padding-top: 150px;
    line-height: 1.5;
    display: inline-block;
    animation: titreh1 0.7s cubic-bezier(0.95, 0.05, 0.795, 0.035) 1 forwards;
    opacity: 0;
    transform-origin: bottom;
}
@keyframes titreh1{
    0%{
        opacity: 0;
        transform: translateY(20%);
    }
    70%{
        opacity: 0;
    }
    100%{
        opacity: 1;
        transform: translate(0);
    }
}
.phraseHeader{
    font-family: 'Livvic', sans-serif;
    font-weight: 500;
    font-size: 1.9rem;
    color: #f7f7f7;
    max-width: 600px;
	margin: auto 100px;
}
/****liste de marque animation****/
.animList{
    margin: 0 auto;
    width: 100vw;
    height: 30px;
    white-space: nowrap;
    box-sizing: border-box;
    position: relative;
}
.animList:last-of-type{
    margin-bottom: 30px;
}
.defilementMarque {
    display: flex;
    line-height: 30px;
    animation: listeM 50s linear infinite forwards;
}
.defilementMarque:hover {
    animation-play-state: paused;
}
.Liste1ligne{
    display: flex;
    justify-content: space-around;
    list-style: none;
    padding: 0;
    margin: 0 10px;
}
@keyframes listeM {
    0% { transform: translateX(0); }
    100% { transform: translateX(-100%); }
}
.Liste1ligne a{
    color: #f7f7f7;
    margin: 0 20px;
}
.liste2{
    animation: listeM2 55s linear infinite forwards;
}
@keyframes listeM2 {
    0% { transform: translateX(-100%); }
    100% { transform: translateX(0%); }
}
/***********************bouton prendre rendez vous******************/
#boutonRDV{
    font-family: 'Livvic', sans-serif;
    font-weight: 500;
    font-size: 1.6rem;
    color: #102434;
    background-color: #f7f7f78f;
    padding: 3px 40px;
    border:#9d6c59 4px solid; 
    transform-origin: 0 0;
    transform: rotate(-90deg);
    z-index: 4;
    position: fixed;
    margin:10px;
    left:96%;
	text-align:center;
    top:50%;
    width: 300px;
    display: inline-block;
}
#boutonRDV:hover{
    background-color: #f7f7f7;
    border-color: #102434;
}*
/*******MenuS*******/
header nav li ul.sub-menu {
    display: none;
}
header nav ul>li:nth-of-type(2):hover .sub-menu{
    position: absolute;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background: rgba(32, 32, 32, 0.288);
    box-shadow: 0 8px 32px 0 rgba(5, 5, 5, 0.185);
    backdrop-filter: blur( 10px );
    -webkit-backdrop-filter: blur( 10px );
    border-radius: 10px;
    z-index: 100;
    left:0;
    top:100%;
}
header nav li ul.sub-menu li{
    margin: 5px 0;
}
header nav li ul.sub-menu li a{
    color: #DCDCEB;
    font-size: 18px;
    text-transform: uppercase;
    font-family: 'Cormorant Upright', serif;
}
header nav li ul.sub-menu li:hover{
    background:rgba(53, 53, 53, 0.541); 
    box-shadow: 0 8px 32px 0 rgba(5, 5, 5, 0.185);
    backdrop-filter: blur( 10px );

}
header nav li ul.sub-menu li a{
    font-size: 14px;
    margin: 10px 0;
}
/******************section produits***************************************************/
#accueilProduits{
    display: flex;
    flex-direction: row;
    height:100vh;
    width: 100%;
    margin: 0;
    padding: 0;
}
#accueilProduits h2{
    font-family: 'Cormorant Upright', serif;
    font-weight: 700;
    font-size: 3.5rem;
    color: #f7f7f7;
    margin: 25px 20px;
    z-index: 2;
    padding: 0;
    display: inline-block;
}
#accueilProduits p{
    margin: 0;
    z-index: 2;
    font-size: 16px;
    font-weight: 300;
    margin-bottom: 35px;
    max-width: 450px;
}

.boutonProduits{
    font-family: 'Livvic', sans-serif;
    font-weight: 500;
    color:#f7f7f7;
    padding: 5px 45px;
    border:#9d6c59 4px solid;
    max-width: 250px;
    margin: 0 auto;
    z-index: 2;
    
}
.boutonProduits:hover{
color:#102434;
border-color:#f7f7f7;
background-color: #9d6c59;
}
/******section collections***/
/*fond*/
#accueilCollection, #accueilSur-mesure, #accueilCorner{
    flex: 1;
    background-image: url("img/collection-homepage-maison-didier.jpg");
    background-repeat: no-repeat;
    background-size: cover;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    color: #f7f7f7;
}
/*placement texte*/
#accueilCollection div, #accueilSur-mesure div, #accueilCorner div{
    display: flex;
    justify-content: center;
    flex-direction: column;
    text-align: center;
    max-width:500px;
    margin: 0 0 110px 0;
    position: relative;

}
/*blur*/
#accueilCollection div::before, #accueilSur-mesure div::before, #accueilCorner div::before{
    content: "";
    width: 500px;
    height: 270px;
    position:absolute;
    background: rgba(5, 5, 5, 0.288);
    box-shadow: 0 8px 32px 0 rgba(5, 5, 5, 0.185);
    backdrop-filter: blur( 10px );
    -webkit-backdrop-filter: blur( 10px );
    border-radius: 10px;
    /*border: 1px solid rgba(5, 5, 5, 0.185);*/
    z-index: 1;
}

/********section droite******/
#accueilProduitDroite{
    flex: 1;
    display: flex;
    flex-direction: column;
    height: 100%;
    width: 100%;
}
#accueilCollection div::before{
    top: 5%;
    left: -5%;
}
/***section sur mesure***/

#accueilSur-mesure{
    height: 50%;
    background-image: url("img/sur-mesure-homepage-maison-didier.jpg");
}
#accueilSur-mesure div, #accueilCorner div{
    margin-bottom: 30px;
}
#accueilSur-mesure div::before{
    height: 230px;
    max-width:450px ;
    top:8%;
    left: -10%;
}
/***section corner créateur ***/
#accueilCorner{
    height: 50%;
    background-image: url("img/homepage-corner-createur-maison-didier.jpg");
}
#accueilCorner div{
    max-width: 380px;
}
#accueilCorner div::before{
    max-height: 250px;
    max-width:450px ;
    top:8%;
    left: -10%;
}
/**********************************section coup de coeur********************************************/
#accueilCoeur {
    display: flex;
    align-items: center;
    flex-shrink: 0;
    margin: 30px 0;
    overflow: hidden;
}
#accueilCoeur p:first-of-type{
    font-family: 'Cormorant Upright', serif;
    font-weight: 700;
    font-size: 4rem;
    color:#102434;
    margin: 20px 0;
    display: inline-block;
    position: absolute;
    top: -5%;
    width: 500%;
}
#accueilCoeur h2{
    font-family: 'Cormorant Upright', serif;
    font-weight: 500;
    font-size: 3rem;
    color:#102434;
    margin-top: 90px;
    margin-bottom: 20px;
    display: inline-block;
}
#accueilCoeur p:last-of-type{
    max-width: 145px;
    margin: 20px 0;
}
#accueilCoeur div{
    position: relative;
    margin: 70px 100px 70px 280px;
    width: 480px;
}
#accueilCoeur img{
    width: 1000px;
    max-height: 450px;
    margin: 70px 0 70px 0;
    border-radius: 5px 0 0 5px;
}
#boutonCoeur{
    font-family: 'Livvic', sans-serif;
    font-weight: 500;
    font-size: 1.7rem;
    color:#131211;
    padding: 4px 45px;
    border:#9d6c59 5px solid;
    margin-bottom: 40px;
    margin-top: 30px;
    display: inline-block;
    flex-direction: column;
    flex: 1;
}
#boutonCoeur:hover{
    color: #f7f7f7;
    border-color: #102434;
    background-color: #9d6c59;
}
/**********************************section services**********************************************/
#accueilServices{
    height: 80vh;
    background-color: #e4dbd8;
    display: flex;
    justify-content: center;
    align-items: center;
}
#accueilServices h3{
    font-size: 2rem;
    font-family: 'Livvic', sans-serif;
    font-weight: 400;
    color: #102434;
    text-align: center;
}
#accueilServices div{
    max-width: 150px;
    margin: 0 90px;
    display: flex;
    align-items:center;
    flex-direction: column;
    justify-content: center;
}
#accueilServices div img{
    width: 120px;
    height: 120px;
}
/********************************section actualités************************************************/
#accueilActus{
    display: flex;
    flex-direction: row;
    margin: 70px 0;
}
#textActus{
    max-width: 340px;
    max-height: 430px;
    margin: 60px 80px 60px 250px;
}
#textActus p:first-of-type{
    font-family: 'Cormorant Upright', serif;
    font-weight: 700;
    font-size: 4rem;
    line-height: 1.2;
    color: #102434;
    margin:0;
    max-width: 290px;
}
#textActus p:last-of-type{
    color:#131211;
    max-width: 200px;
    margin :70px 0;
}
#boutonActus{
    font-family: 'Livvic', sans-serif;
    font-weight: 500;
    font-size: 1.7rem;
    margin-top: 10px;
    color:#131211;
    padding: 4px 55px;
    border:#9d6c59 4px solid;
    display: inline-block;
}
#boutonActus:hover{
color: #f7f7f7;
border-color: #102434;
background-color: #9d6c59;
}
#imageActus{
    max-height: 430px;
    max-width:1300px ;
    display: flex;
    flex-direction: row;
    flex:1;
    margin: 60px 0;    
    overflow: hidden;
}
.cardActus{
    width:250px;
    background-size:cover ;
    background-repeat: no-repeat;
    border-radius: 5px;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    flex-shrink: 0;
    margin: 0 10px;
	background-position: 50%;
    opacity: 0.8;

}
.contenuCard{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    max-width:160px ;
    text-align: center;
    position: relative;
    margin: 10px;
	width: 160px;
    height: 145px;
}
.cardActus p{
    font-family: 'Cormorant Upright', serif;
    font-weight: 700;
    font-size: 2rem;
    color: #f7f7f7;
    z-index: 2;
    position: relative;
}
.cardActus h4{
    font-family: 'Livvic', serif;
    font-weight: 400;
    font-size: 1.6rem;
    color: #f7f7f7;
    margin: 0 0 30px 0;
    z-index: 2;
}
.cardActus p::after{
    content: "";
    height: 1px ;
    width: 110px;
    background-color: #f7f7f7;
    z-index: 2;
    position: absolute;
    left:-56%;
    top:130%;

}
.contenuCard::before{
    content: "";
    width: 100%;
    height: 100%;
    position:absolute;
    background: rgba(5, 5, 5, 0.185);
    box-shadow: 0 8px 32px 0 rgba(5, 5, 5, 0.185);
    backdrop-filter: blur( 10px );
    -webkit-backdrop-filter: blur( 10px );
    border-radius: 10px;
    /*border: 1px solid rgba(5, 5, 5, 0.185);*/
    z-index: 1;
}
#swipeActusRight{
    position: absolute;
    border:none;
    background:none;
    right: 1%;
    top: 42%;
    z-index: 2;
}
#swipeActusLeft{
	position: absolute;
    border:none;
    background:none;
    left: 1%;
    top: 42%;
    z-index: 2;
}
#imageActus .slick-track{
    height: 100%;
}
#accueilActus .slick-initialized .slick-slide {
    display: flex;
}
/**************************************************section témoignages***************************************************/
#slider {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 70px auto;
    border-radius: 4px;
}
#sliderTemoignages{
    -webkit-box-shadow: inset 0px 0px 15px 5px rgba(0,0,0,0.45); 
    box-shadow: inset 0px 0px 15px 5px rgba(0,0,0,0.45);
    height: 400px;
    width: 800px;
    border-radius: 5px;
    border: #102434 5px solid;
    display: flex;
    align-items: center;
    flex-direction: row;
    overflow: hidden;
}
#sliderTemoignages .slick-track{
	display:flex;
	align-items:center;
}
.contenuTemoignages {
    display: flex;
    padding: 0;
    max-width: 780px;
    max-height: 380px;
    align-items: center;
    flex-direction: row;
    justify-content: center;
    position:relative;
    flex-shrink:0;
}
.control_prev, .control_next {
    margin: 0 10px;
    z-index:1;
    background-color:transparent;
    border:none;
    cursor: pointer;
}
.texteTemoignages p:first-of-type{
    font-family: 'Cormorant Upright', serif;
    font-weight: 700;
    font-size: 3rem;
    color:#102434;
    margin: 0 0 30px 0;
}
.contenuTemoignages img{
    border-radius: 3px;
    margin: 40px 20px;
    max-width: 300px;
    min-height: 230px;
}
.texteTemoignages p:last-of-type{
    max-width: 500px;
    font-size: 16px;
    margin: 0 40px 30px 0;
}

#slider .slick-initialized .slick-slide {
    display: flex;
}
/****************temoignage formulaire***********************/
form#group_60fe677119d63{
	max-width:500px;
	max-height:350px;
}
form#group_60fe677119d63 .-top{
	display: flex;
    flex-wrap: wrap;
    max-width: 450px;
}
form#group_60fe677119d63 .acf-field--post-title, form#group_60fe677119d63 .acf-field-60fe67fafea96, form#group_60fe677119d63 .acf-field-60fe6812fea97, form#group_60fe677119d63 .acf-field-image{
	padding:5px;
	border:none;
}
form#group_60fe677119d63 .acf-field-image{
	width: 200px;
}
form#group_60fe677119d63 .acf-field .acf-label {
	margin: 0 0 5px;
}
form#group_60fe677119d63 .acf-field--post-title #acf-_post_title, form#group_60fe677119d63 textarea#acf-field_60fe67fafea96, form#group_60fe677119d63 input#acf-field_60fe6812fea97{
	margin:0;
	border: transparent 1px solid;
}
form#group_60fe677119d63 .acf-input{
	width:400px;
	border:#102434 2px solid;
}
form#group_60fe677119d63 .acf-field-60fe6812fea97{
	width:130px;
}
form#group_60fe677119d63 .acf-field--post-title .acf-input{
	width:200px;
}
form#group_60fe677119d63 .acf-field-60fe6ad7f7106 .acf-input{
	border:none;
}
form#group_60fe677119d63 .acf-field-60fe6812fea97 .acf-input {
	width:50px;
}
form#group_60fe677119d63 .acf-field--post-title  #acf-_post_title:focus-visible, form#group_60fe677119d63 textarea#acf-field_60fe67fafea96:focus-visible, form#group_60fe677119d63 input#acf-field_60fe6812fea97:focus-visible{
	background-color: #E4DBD8;
	outline: transparent 1px solid;
}
form#group_60fe677119d63 .acf-required{
	color:#9D6C59;
}
form#group_60fe677119d63 .acf-field-image .acf-image-uploader{
	width:250px;
}
form#group_60fe677119d63 .acf-field-image .acf-image-uploader #file-upload-button{
	padding:0;
}
form#group_60fe677119d63 .acf-field-image .acf-image-uploader .acf-basic-uploader{
	font-size:1.2rem;
}
form#group_60fe677119d63 .acf-field .acf-label label{
	font-weight:500;
}
form#group_60fe677119d63>.acf-form-submit>input.button{
	border: #9d6c59 4px solid;
    padding: 2px 15px;
}
form#group_60fe677119d63>.acf-form-submit>input.button:hover{
	color: #f7f7f7;
    border-color: #102434;
    background-color: #9d6c59;
}
#message p{
	margin: 0;
    background-color: #FFFFFF;
    padding: 10px;
    width: 270px;
    text-align: center;
}
/*******************************************bouton newsletter*************************/
#News{
    width: 100%;
    display: flex;
    justify-content: center;
    flex-direction: column;
    text-align: center;
    padding: 50px 0;
    background-color: #e4dbd8;

}
#newsletter{
    font-family: 'Livvic', sans-serif;
    font-weight: 500;
    font-size: 1.7rem;
    color:#131211;
    padding: 4px 55px;
    border:#9d6c59 5px solid;
    display: block;
    margin: 0 auto;
    max-width: 400px;
    /*max-width: 330px;*/
}
#newsletter:hover{
    color: #f7f7f7;
    border-color: #102434;
    background-color: #9d6c59;
}
#News form{
    max-width: 400px;
    display: block;
    margin: 10px auto;
    display: none;
}
#News form input{
    font-family: 'Livvic', sans-serif;
    font-weight: 400;
    font-size: 1.7rem;
    margin: 8px 0;
    color:#131211;
    padding: 4px 55px;
    border:#9d6c59 5px solid;
    background-color: transparent;
}
#News form input:focus-visible{
    border:#102434 5px solid;
}
#News form input:last-of-type:hover{
    border:#102434 5px solid;
    color: #f7f7f7;
    background-color: #9d6c59;
}
/******************************************footer*******************************************************/
footer{
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    background-color: #102434;
}
/***********section du milieu***********/
#footerMilieu{
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
#footerMilieu>img{
    margin: 50px;
}
#footerMilieu p{
    color: #f7f7f7;
    font-size: 1.8rem;
}
#footerReseauS{
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    margin: 0 0 50px 0;
}
#menuSecondaire{
    display: flex;
    flex-direction: column;
    justify-content:center;
    align-items: center;
}
#menuSecondaire a{
    color: #f7f7f7;
    font-size: 1.3rem;
}


/**********section à droite**********/
#footerDroit{
    flex: 1;
    display: flex;
    justify-content:center;
    align-items: center;
}
#footerDroit a{
    font-size: 16px;
    line-height: 3;
    color: #f7f7f7;
}
#footerDroit li{
    list-style: none;
}

/***********section à gauche*******/
#footerGauche{
    flex: 1;
    padding-left: 80px;
    padding-bottom: 40px;
    color: #f7f7f7;
    margin: 0;
    max-width: 493px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
}
#footerGauche h5{
    font-family: 'Cormorant Upright', serif;
    font-weight: 600;
    font-size: 3rem;
    color: #f7f7f7;
    display: inline-block;
    margin: 50px 0 20px 0;
}
a#boutonNum{
    font-family: 'Livvic', sans-serif;
    font-weight: 500;
    font-size: 16px;
    color:#f7f7f7;
    padding: 4px 55px;
    border:#9d6c59 5px solid;
    display: inline-block;
}
a#boutonNum:hover{
    background-color:#9d6c59;
    color: #102434;
    border-color:#f7f7f7;
}

section#produitsCollection{
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    width: 100%;
    max-height: 80vh;
    padding: 50px 20px;
    
}
/*********************************************pages lunettes dans collection************************************************************/
/*******section gauche image*********/
#produitsCollection .imageLunettes{
    flex: 1;
    width: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}
/**swipe***/
#produitsCollection .imageLunettes button.prev{
    position: absolute;
    border:none;
    background:none;
    transform: translate(-50%, -50%);
    top:50%;
    z-index: 1;
    left: 5%;
}
#produitsCollection .imageLunettes button.after{
    position: absolute;
    border:none;
    background:none;
	transform: translate(-50%, -50%);
    top:50%;
    right:-4%;
}
/**cercle**/
ul.slick-dots{
	position:absolute;
	bottom:-2%;
	transform: translate(-50%, -50%);
    left:50%;
	margin:0;
}
ul.slick-dots li{
	list-style:none;
	font-size:0;
	display:inline-block;
	margin: 10px;
	width:20px;
	height:20px;
}
ul.slick-dots li button{
	width:100%;
	height:100%;
	border-radius:50%;
}
ul.slick-dots li.slick-active button:active{
	background-color:#102434;
	border: #e4dbd8 solid 1px;
}
/**photo**/
#produitsCollection .imageLunettes .photoLunette{
    display: flex;
    width: 90%;
    height: 90%;
    overflow: hidden;
    max-width: 600px;
}
#produitsCollection .imageLunettes .photoLunette img{
    width:600px ;
    flex-shrink: 0;
    overflow: hidden;
    height:450px;
    object-fit: cover;
    border-radius: 10px;
}
/***********section droite texte**************/
#produitsCollection .textLunettes{
    flex: 1;
    width: 50%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}
#produitsCollection .textLunettes h2{
    font-family: 'Cormorant Upright', serif;
    font-weight: 700;
    margin: 0;
    font-size: 4rem;
    color: #102434;
    margin: 25px 20px;
    z-index: 2;
    padding: 0;
    display: inline-block;
}
#produitsCollection .textLunettes p{
    font-family: 'Livvic', sans-serif;
    font-weight: 400;
    color:#131211;
    font-size:1.6rem; /* 16px */
    line-height: 1.5;
    max-width: 500px;
    text-align: center;
    margin:0;
    margin-top: 20px;
}
/***changement damier**/
section#produitsCollection:nth-child(even){
    flex-direction: row-reverse;
    background-color: #e4dbd8;
}
/*********************************************PAGE ACTUALITES*********************************************************/
.pageActualites{
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    width: 100%;
    max-height: 80vh;
    padding: 50px 20px;
}
.pageActualites .textActualites{
    flex: 1;
    width: 50%;
    display: flex;
    justify-content: center;
    flex-direction: column;
    position: relative;
    padding-left: 150px;
}

.pageActualites .textActualites h2{
    font-family: 'Cormorant Upright', serif;
    font-weight: 700;
    margin: 0;
    font-size: 4rem;
    color: #102434;
    margin: 25px 0;
    z-index: 2;
    padding: 0;
    display: inline-block;
}
.pageActualites .textActualites p{
    font-family: 'Livvic', sans-serif;
    font-weight: 400;
    color:#131211;
    font-size:1.6rem; /* 16px */
    line-height: 1.5;
    max-width: 500px;
    text-align: start;
    margin:0;
    margin-bottom: 20px;
}
#boutonActualites{
    font-family: 'Livvic', sans-serif;
    font-weight: 500;
    font-size: 1.7rem;
    color:#131211;
    padding: 4px 45px;
    border:#9d6c59 5px solid;
    margin-bottom: 40px;
    margin-top: 30px;
    display: inline-block;
    flex-direction: column;
    flex: 1;
    max-width: 200px;
}
#boutonActualites:hover{
    color: #f7f7f7;
    border-color: #102434;
    background-color: #9d6c59;
}
.pageActualites .imgActualites{
    flex: 1;
    width: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
}


.pageActualites .imgActualites img{
    width: 500px;
	max-height:350px;
    object-fit: cover;
    border-radius: 10px;
    margin-right: 100px;
}
/*****************************************************ARTICLES*********************************************************/
#pageArticle{
    display: flex;
    justify-content: center;
}
/****************titre article***********************/
.split-character span {
  display: inline-block;
}

.titreArticlejs {
  display: inline-block;
  overflow: hidden;
}
.titreArticlejs span > span {
  opacity: 0;
  animation: titleAnimation 0.5s cubic-bezier(0.95, 0.05, 0.795, 0.035) 1 forwards;
}

@keyframes titleAnimation {
  from {
    transform: translate3d(0, 100%, 0);
    opacity: 0;
  }
  to {
    transform: translate3d(0, 0, 0);
    opacity: 1;
  }
}
.pageArticleTexte{
    max-width: 900px;
    margin: 20px;
    margin-left: 30px;
    flex: 2;
}
.pageArticleTexte h2{
    font-family: 'Cormorant Upright', serif;
    font-weight: 700;
    font-size: 4rem;
    color: #102434;
    margin: 20px 0;
    padding: 0;
    display: inline-block;
}
.pageArticleTexte p{
    font-family: 'Livvic', sans-serif;
    font-weight: 400;
    color:#131211;
    font-size:1.6rem; /* 16px */
    margin:10px 0;
    max-width: 700px;
}
#boutonArticle{
    font-family: 'Livvic', sans-serif;
    font-weight: 500;
    font-size: 1.7rem;
    color:#131211;
    padding: 4px 45px;
    border:#9d6c59 5px solid;
    margin-bottom: 40px;
    margin-top: 30px;
    display: inline-block;
    flex-direction: column;
    flex: 1;
    max-width: 400px;
}
#boutonArticle:hover{
    color: #f7f7f7;
    border-color: #102434;
    background-color: #9d6c59;
}
/*****************aside article***********************/
aside.archiveArticle{
    flex:1;
    margin-top:60px;
    background-color: #e4dbd8;
    max-width: 300px;
    border-radius: 10px;
    height: max-content;
}
aside.archiveArticle p{
    font-family: 'Cormorant Upright', serif;
    font-weight: 700;
    font-size: 3rem;
    color: #102434;
    margin: 20px;
    padding: 0;
    text-align: center;
    position: relative;
}
aside.archiveArticle p::after{
    content: "";
    width: 100%;
    height: 1px;
    background-color:#102434;
    position: absolute;
    bottom:-30%;
    left:0;
}
aside.archiveArticle h3{
    font-family: 'Livvic', sans-serif;
    font-weight: 400;
    color:#131211;
    text-align: center;
    font-size:1.6rem; /* 16px */
    margin: 30px 10px;
}
/******************************************************Page à propos***********************************************************************/
.Apropos{
    display: flex;
    flex-direction: column;
    align-content: center;
}
/*******************************texte à propos maison didier***************************/
.hisoireMaisonDidier{
    background-color: #e4dbd8;
    padding: 70px;
    padding-top: 30px;
    margin-top:250px;
    margin-left: 220px;
    display: inline-block;
    border-radius: 10px;
    align-self: flex-start;
    position: relative;
}

#hisoireMaisonDidier1{
    align-self: flex-end;
    margin-right: 220px;
    position: relative;
}
#hisoireMaisonDidier1::before{
    content: "";
    background-image: url("img/int-maison-didier.jpg");
    position: absolute;
    width: 100%;
    height: 100%;
    top: -30%;
    left: -70%;
    z-index: -1;
    border-radius: 10px;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    
}
#hisoireMaisonDidier2{
    position: relative;
    margin-bottom: 80px;
}
#hisoireMaisonDidier2::before{
    content: "";
    background-image: url("img/int-maison-didier2.jpg");
    position: absolute;
    width: 100%;
    height: 100%;
    top: -30%;
    left: 70%;
    z-index: -1;
    border-radius: 10px;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}
/**********************************photo équipe maison didier****************************************/
#equipe{
    display: flex;
    flex-direction: column;
    align-items: center;
}
#equipeM{
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap:wrap;
    min-height: 70vh;
    margin:30px;
}
.cardEquipe{
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap:wrap;
    max-width: 350px;
    box-shadow: inset 5px 5px 5px rgba(0,0,0,0.2), inset -5px -5px 15px rgba(255,255,255,0.1), 5px 5px 15px rgba(0,0,0,0.3),-5px -5px 15px rgba(255,255,255,0.1);
    border-radius: 15px;
    margin: 20px;
}
.cardNotreEquipe{
    min-width: 290px;
    height: 400px;
    border-radius: 15px;
    margin: 30px;
}
.containerEquipe{
    width: 100%;
    height: 100%;
    text-align: center;
    position: relative;
    padding: 20px 10px;
    background: #c4c4da;
    border:2px solid #d1d1d1;
    border-radius: 15px;
    box-shadow: 0 20px 50px rgba(0,0,0,0.5);
    transition: transform 2s;
    transform-style: preserve-3d;
}
.cardNotreEquipe:hover .containerEquipe{
    transform: rotateY(0.5turn);
}
.devant{
    /*position*/
    position: absolute;
    top:0;
    bottom: 0;
    left: 0;
    border-radius: 15px;
    right: 0;
    padding:5px 2px; /*utile?*/
    /*background*/
    background-image: url("img/a-propos-equipe-maison-didier-1.jpg");
    background-position: 90%;
    background-size: cover;
    /*flex pour ce que contient .devant*/
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-content: center;
    transform-style: preserve-3d;

}

.devant::before{
    content: "";
    width: 100%;
    height: 40%;
    top: 60%;
    left: 0%;
    position:absolute;
    background: rgb(0,0,0);
    background: linear-gradient(0deg, rgba(0,0,0,0.9363095580028886) 0%, rgba(0,0,0,0) 100%);
    border-radius: 0 0 15px 15px;
    z-index: -1;
}
.cyril{
    background-image: url("img/a-propos-equipe-maison-didier-2.jpg");
}
.sarah{
    background-image: url("img/a-propos-equipe-maison-didier-3.jpg");
}
.thomas{
    background-image: url("img/a-propos-equipe-maison-didier-6.jpg");
}
.emilie{
    background-image: url("img/a-propos-equipe-maison-didier-5.jpg");
}
.leo{
    background-image: url("img/a-propos-equipe-maison-didier-4.jpg");
}
.derriere{
    /*position*/
    position: absolute;
    top:0;
    bottom: 0;

    left: 0;
    right: 0;
    border-radius: 15px;
    padding: 20px; /*utile ?*/
    /*background*/
    background-size: cover;
    background-color: #e4dbd8;
    /*flex*/
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-content: center;
    /*pour la transition*/
    transform-style: preserve-3d;
    transform: rotateY(0.5turn);
}

#equipe h2, .hisoireMaisonDidier h2{
    font-family: 'Cormorant Upright', serif;
    font-weight: 700;
    font-size: 4rem;
    color: #102434;
    margin: 25px 0;
    padding: 0;
    display: inline-block;
}

.hisoireMaisonDidier p, .derriere p{
    font-family: 'Livvic', sans-serif;
    font-weight: 400;
    color:#131211;
    font-size:1.6rem;
    line-height: 1.5;
    max-width: 700px;
    margin:0;
    margin-top: 20px;
}
#equipe h3{
    color: #d1d1d1;
    font-family: 'Livvic', sans-serif;
    font-weight: 400;
    font-size: 2rem;
    margin: 25px 0;
    padding: 0;
    display: inline-block;
    
}
.hisoireMaisonDidier p{
    max-width: 500px;
}
/*****************************************Page lunette sur-mesure****************************************************/
#savoirFaireLunetier{
    max-width: 1000px;
    margin:0 100px;
}
#savoirFaireLunetier h2, #conceptionLunette h2, #lookbook h2 {
    font-family: 'Cormorant Upright', serif;
    font-weight: 700;
    font-size: 4rem;
    color: #102434;
    margin: 25px 0;
    padding: 0;
    display: inline-block;
}
#savoirFaireLunetier p, #conceptionLunette p{
    font-family: 'Livvic', sans-serif;
    font-weight: 400;
    color:#131211;
    font-size:1.6rem; /* 16px */
    line-height: 1.5;
    max-width: 600px;
    margin:0;
    margin-top: 20px;
}
#savoirFaireLunetier p{
    max-width: 900px;
}
/*********conteneur etapes de conception************/
#conceptionLunette{
    display:flex;
    flex-direction: column;
    justify-content: center;
    max-width: 1300px;
    height: 100%;
    margin:50px auto;
}
#conceptionLunette h2{
    align-self: flex-end;
}
.conteneurConceptionlunette{
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 40px 0;
}
.imgConceptionlunette{
    flex:1;
    display: flex;
    width: 50%;
}
.imgConceptionlunette img{
    display: block;
    object-fit: cover;
    max-width: 500px;
    max-height: 350px;
    border-radius: 10px;
}
.texteConceptionlunette{
    flex:1;
    width: 50%;
}
.texteConceptionlunette h3{
    font-family: 'Livvic', sans-serif;
    font-weight: 800;
    font-size: 2rem;
    color: #102434;
    margin: 25px 0;
    padding: 0;
    display: inline-block;
}
.conteneurConceptionlunette:nth-child(odd){
    flex-direction: row-reverse;
}
.conteneurConceptionlunette:nth-child(odd) .imgConceptionlunette{
    justify-content: flex-end;
    margin-right: 20px;
}
/********************Image lookbook**********************/
#lookbook{
    margin:0 100px;
}
.imgLookbook {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    grid-template-rows: 1fr 1fr 1fr;
    gap: 0px 0px;
    grid-auto-flow: row;
    grid-template-areas:
    "imgSurMesure1 imgSurMesure2 imgSurMesure2 imgSurMesure3"
    "imgSurMesure1 imgSurMesure7 imgSurMesure6 imgSurMesure4"
    "imgSurMesure8 imgSurMesure7 imgSurMesure6 imgSurMesure5";
    max-width: 1300px;
    max-height: 1100px;
}
.imgLookbook img{
    display: block;
    object-fit: cover;
    max-width: 100%;
}
.imgSurMesure1 { 
    grid-area: imgSurMesure1;
}
.imgSurMesure2 { 
    grid-area: imgSurMesure2; 
}
.imgSurMesure3 { 
    grid-area: imgSurMesure3; 
}
.imgSurMesure4 { 
    grid-area: imgSurMesure4; 
}
.imgSurMesure5 { 
    grid-area: imgSurMesure5; 
}
.imgSurMesure6 { 
    grid-area: imgSurMesure6; 
}
.imgSurMesure7 { 
    grid-area: imgSurMesure7; 
}
.imgSurMesure8 { 
    grid-area: imgSurMesure8; 
}

img{
    max-width: 100%;
    object-fit: cover;
}
/***********************************************PAGE corner créateur*******************************************************************/
#Createur{
    text-align: center;
    margin: 50px auto;
    position: relative;
}
#boutonContactCorner{
    font-family: 'Livvic', sans-serif;
    font-weight: 500;
    font-size: 1.7rem;
    color:#131211;
    padding: 4px 45px;
    border:#9d6c59 5px solid;
    margin:40px auto;
    display: block;
    flex-direction: column;
    flex: 1;
    max-width: 300px;
    text-align: center;
}
#boutonContactCorner:hover{
    color: #f7f7f7;
    border-color: #102434;
    background-color: #9d6c59;
}

#CornerCreateur{
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 100px auto;
}
#logoCornerCreateur{
    flex: 1;
    width: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
}
#ConteneurCornerCreateur{
    flex: 1.5;
    width: 50%;
}
#texteCornerCreateur{
    max-width: 500px;
    padding: 50px;
    background-color: #e4dbd8;
    display: inline-block;
    position: relative;
    border-radius: 10px;
    margin-left: 150px;
    transition: margin-left 450ms linear;
}
#texteCornerCreateur:hover{
    margin-left:0;
}
#texteCornerCreateur::before{
    content: "";
    background-image: url("img/corner-createur-homepage-maison-didier.jpg");
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left:0;
    z-index: -1;
    border-radius: 10px;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    transition: all 450ms linear;
}
#texteCornerCreateur:hover::before{
    top: -20%;
    left: 50%;
}
#texteCornerCreateur p{
    max-width: 400px;
    font-family: 'Livvic', sans-serif;
    font-weight: 400;
    color:#131211;
    font-size:1.6rem; /* 16px */
    line-height: 1.5;
    text-align: start;
    margin:0;
}
#reseauxSociauxCornerCreateur{
    display: flex;
    justify-content: space-evenly;
    margin-top: 20px;
}

/***********************photo corner createur***************************/
.imgCornerCreateur{
    margin: 30px auto;
    max-width: 1300px;
    max-height: 1400px;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: 1fr 1fr 1fr 1fr;
    gap: 0px 0px;
    grid-auto-flow: row;
    grid-template-areas:
    "img-corner-createur-1 img-corner-createur-1 img-corner-createur-3"
    "img-corner-createur-4 img-corner-createur-2 img-corner-createur-3"
    "img-corner-createur-6 img-corner-createur-2 img-corner-createur-5"
    "img-corner-createur-6 img-corner-createur-7 img-corner-createur-7";
}

.imgCornerCreateur>div img{
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.img-corner-createur-1 { grid-area: img-corner-createur-1; 
    max-width: 1000px;
    max-height: 400px;}

.img-corner-createur-2 { grid-area: img-corner-createur-2;
    max-width: 450px;
    max-height: 600px; }

.img-corner-createur-3 { grid-area: img-corner-createur-3; 
    max-width: 450px;
    max-height: 700px;}

.img-corner-createur-4 { grid-area: img-corner-createur-4; 
    max-height: 300px;
    max-width: 450px;}

.img-corner-createur-5 { grid-area: img-corner-createur-5;
    max-width: 450px;
    max-height: 300px; }

.img-corner-createur-6 { grid-area: img-corner-createur-6; 
    max-width: 450px;
    max-height: 800px;}

.img-corner-createur-7 { grid-area: img-corner-createur-7; 
    max-width: 870px;
    max-height: 400px;}

/********************************************************page collection****************************************************************/
.PageCollection{
    display: flex;
    align-items: center;
    background-position: center;
    background-size: cover;
    background-attachment: fixed;
    background-repeat: no-repeat;
    height: 100vh;
    width: 100%;
}
.pageClassiques{
    background-image: url('img/fond-page-classiques.jpg');
}
.pageCreateur{
    background-image: url('img/fond-page-createurs.jpg');
}
.pageLuxe{
    background-image: url('img/fond-page-luxe.jpg');
}
.pageAccessoires{
    background-image: url('img/fond-collection-accessoire.jpg');
}
.textePageCollection{
    background-color: white;
    display: flex;
    width: 100%;
    max-height: 400px;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}
.textePageCollection h2{
    font-family: 'Cormorant Upright', serif;
    font-weight: 700;
    font-size: 4rem;
    color: #102434;
    margin: 25px 0;
    padding: 0;
    display: inline-block;
}
.textePageCollection p{
    font-family: 'Livvic', sans-serif;
    font-weight: 400;
    color:#131211;
    font-size:1.6rem; /* 16px */
    line-height: 1.5;
    max-width: 600px;
    text-align: center;
    margin:0;
    margin-bottom: 20px;
}
.boutonPageCollection {
    font-family: 'Livvic', sans-serif;
    font-weight: 500;
    font-size: 1.7rem;
    color:#131211;
    padding: 4px 45px;
    border:#9d6c59 5px solid;
    margin-bottom: 40px;
    margin-top: 30px;
    display: inline-block;
    max-width: 400px;
    text-align: center;
}
.boutonPageCollection:hover{
    color: #f7f7f7;
    border-color: #102434;
    background-color: #9d6c59;
}


/**************************************************************Page Contact*******************************************************/
#informationMaisonDidier{
    width: 100%;
    display: flex;
    justify-content: center;
    align-items:center;
    padding: 70px;
}
/******************informations sur la gauche************************/
#texteInfoMaisonDidier{
    flex: 1;
    margin-left: 50px;
}
#contactMaisonDiderPage, #maisonDidierHoraires{
    padding: 0;
    margin: 0;
}
#texteInfoMaisonDidier h2, #texteInfoMaisonDidier>p,  #facilitesAcces>p, #messageMaisonDidier>form>p:first-of-type, #maisonDidierHoraires>p, #formulaireRDV>p{
    font-family: 'Cormorant Upright', serif;
    font-weight: 700;
    font-size: 4rem;
    color: #102434;
    margin: 25px 25px;
    padding: 0;
    display: inline-block;
}
.infoMaisonDidier{
    display: flex;
    align-items: center;
    margin: 10px 0;
}
.infoMaisonDidier img{
    max-width: 100%;
    object-fit: cover;
}
.infoMaisonDidier:first-of-type{
    margin-left: 5px;
}
#horaireMaisonDidier{
    display: flex;
    align-content: center;
    margin-left: 25px;
}
.infoMaisonDidier a, #horaireMaisonDidier p, .infoFaciliteAcces p{
    font-family: 'Livvic', sans-serif;
    font-weight: 400;
    color:#131211;
    font-size:1.6rem; /* 16px */
    line-height: 1.7;
    text-align: start;
    margin: 0;
    display: inline-block;
}
#horaireMaisonDidier p:last-of-type{
    margin-left: 80px;
}
/**********************map maison didier*****************************/
#imgInfoMaisonDidier{
    flex:1;
    width: 100%;
}
#imgInfoMaisonDidier img{
    object-fit: cover;
    max-width: 600px;
}
/******************************facilités d'accès**************************************/
#facilitesAcces{
    margin: 0 50px;
    padding: 0 70px;
    margin-bottom: 50px;
}
#conteneurFacilitesAcces{
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.infoFaciliteAcces{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}
.infoFaciliteAcces p{
    text-align: center;
}
.infoFaciliteAcces img{
    max-width: 100%;
    object-fit: cover;
}
/********************************formulaire MESSAGE************************************/
#messageMaisonDidier{
    margin: 50px 0 70px 0;
}
#messageMaisonDidier form>p:first-of-type{
    margin: 20px 0;
}

#messageMaisonDidier form{
    display: block;
    width: 800px;
    margin:30px auto;
}
#messageMaisonDidier form div{
    display: flex;
    justify-content: space-between;
}
#messageMaisonDidier form div input:last-of-type{
    margin-left: 10px;
}
#messageMaisonDidier form input, #messageMaisonDidier form textarea{
    width: 100%;
    height: 50px;
    display:block;
    border: #9d6c59 solid 5px;
    margin:0;
    margin-top: 10px;
}
#messageMaisonDidier form input:focus-visible, #messageMaisonDidier form textarea:focus-visible{
    border: #102434 solid 5px;
}
#messageMaisonDidier form>input:last-of-type{
    max-width: 300px;
    margin: 0 auto;
    font-family: 'Livvic', sans-serif;
    font-weight: 500;
    font-size: 1.7rem;
    color:#131211;
    border:#9d6c59 5px solid;
    background-color: white;
}
#messageMaisonDidier form textarea{
    height: 300px;
}
#messageMaisonDidier form input[placeholder],  #messageMaisonDidier form textarea[placeholder]{
    font-family: 'Livvic', sans-serif;
    font-weight: 400;
    color:#131211;
    font-size:1.6rem; /* 16px */
    line-height: 1.7;
    text-align: start;
    display: inline-block;
}
#messageMaisonDidier form>input:last-of-type:hover{
    color: #f7f7f7;
    border-color: #102434;
    background-color: #9d6c59;
}
#messageMaisonDidier>form>p:last-of-type{
    font-family: 'Livvic', sans-serif;
    font-weight: 400;
    color:#131211;
    font-size:1.2rem; /* 16px */
    text-align: start;
    display: inline-block;
    margin: 0;
    margin-bottom: 20px;
}

/****************************formulaire prendre rdv***************************************/
#formulaireRDV{
	display:flex;
	justify-content:center;
	align-items:center;
	flex-direction:column;
	margin:20px;
}
#containerformRDV{
		margin:20px;
		max-width:900px;
	    max-height:500px;
}
.powered-by-bookly{
	display:none;
}
#containerformRDV .bookly-time-step{
	width:500px;
	height:300px;
}
#containerformRDV .bookly-columnizer, #containerformRDV .bookly-time-screen{
	height:300px;
}
#containerformRDV .bookly-js-first-column{
	height:300px;
	display:flex;
	flex-direction:column;
	flex-wrap:wrap;
}
#containerformRDV .bookly-js-first-column>button{
	width:150px;
}
#containerformRDV .bookly-table>div{
	font-family: 'Livvic', sans-serif;
    font-weight: 500;
    color:#131211;
    font-size:1.6rem;
}
#containerformRDV .bookly-table .active{
	font-weight:700;
}
#containerformRDV .bookly-table .step{
	background-color:#9d6c59;
}
#containerformRDV .bookly-table .active .step{
	border: #102434 4px solid;
}
#containerformRDV .bookly-box {
	font-family: 'Livvic', sans-serif;
    color:#102434;
    font-size:1.4rem;
}
#containerformRDV .bookly-form-group>label{
	font-family: 'Livvic', sans-serif;
    font-size:1.6rem;
}
#containerformRDV .bookly-form-group div select option{
	font-family: 'Livvic', sans-serif;
    font-size:1.6rem;
}
#containerformRDV .bookly-btn span.ladda-label, #containerformRDV .picker__box{
	font-family: 'Livvic', sans-serif;
}
/***********************************************************MEDIA QUERIES********************************************************************/
@media screen and (max-width:1330px){
    /***************page actus******************/
    .pageActualites .textActualites p{
        max-width: 500px;
    }
	/****************page d'accueil**************/
	#boutonRDV{
        width: 250px;
        top: 60%;
    }
    #boutonCoeur{
        width: 250px;
        text-align: center;
    }
    #accueilCoeur img {
        width: 800px;
    }
    #textActus{
    margin: 60px 70px 60px 200px;
    }
}
@media screen and (max-width:1270px){
    /***************page corner createur******************/
    #texteCornerCreateur:hover::before{
        left: 40%;
    }
	/**************page d'accueil********************/
	 #boutonRDV{
        left: 95.5%;
    }
    #accueilCoeur img {
        width: 600px;
    }
    #accueilServices div {
        margin: 0 70px;
    }
    #textActus{
        margin: 60px 40px 60px 150px;
        }
}
@media screen and (max-width:1230px){
    /***************page actus******************/
    .pageActualites .textActualites p{
        max-width: 400px;
    }
}
@media screen and (max-width:1185px){
    /***************page corner createur******************/
    #texteCornerCreateur:hover::before{
        left: 30%;
    }
    /***************page contact******************/
    #informationMaisonDidier{
        flex-direction: column;
    }
    #texteInfoMaisonDidier{
        display: flex;
        justify-content: space-between;
        margin-left:0;
        width: 100%;
    }
    #imgInfoMaisonDidier{
        display: flex;
        justify-content: center;
    }
	 /***************page à propos******************/
    
}
@media screen and (max-width:1140px){
	/**************page d'accueil************/
    header nav ul li{
        padding: 0 20px;
    }
    #boutonRDV{
        left: 94.8%;
    }
    h1{
        font-size: 5rem ;
    }
    #accueilCoeur div{
        margin-left: 240px;
    }
    #accueilServices div {
        margin: 0 50px;
    }
    #textActus{
        margin: 60px 30px 60px 40px;
        }
}
@media screen and (max-width:1120px){
    /***************page actus******************/
    .pageActualites .textActualites p{
        max-width: 350px;
    }
    .pageActualites .textActualites h2{
        max-width: 350px;
        font-size: 3.8rem;
    }
}
@media screen and (max-width:1100px){
    /***************page corner createur******************/
    #CornerCreateur{
        flex-direction: column;
    }
    #ConteneurCornerCreateur{
        width: 100%;
        display: flex;
        justify-content: center;
    }
    #logoCornerCreateur {
        width: 100%;
        margin:70px;
    }
    #texteCornerCreateur{
        margin-left: 0;
        width: 100%;
        transition: margin-top 450ms linear;
    }
    #texteCornerCreateur:hover::before{
        left: 30%;
        top: -15%;
    }
    #texteCornerCreateur:hover{
        margin-top: 50px;
    }
}
@media screen and (max-width:1060px){
	/***********page d'accueil***********/
    #accueilCollection div::before, #accueilSur-mesure div::before, #accueilCorner div::before {
        width: 400px;
        left: -4%;
    }
    #accueilProduits h2 {
        margin: 10px;
    }
    #accueilProduits p{
    margin-bottom: 25px;
    }
    #accueilSur-mesure div::before, #accueilCorner div::before{
    height: 180px;
    max-width: 420px;
    }
    #accueilCorner div::before{
        height: 210px;
        max-width: 420px;
    }
    #accueilCollection{
        background-position: center;
    }
    #accueilCollection p{
        max-width: 370px;
    }
    #accueilCollection div::before{
        height: 230px;
    }
    #accueilCoeur div{
        margin-left: 200px;
    }
    #accueilCoeur div{
        margin-left: 180px;
    }
    #textActus{
        margin: 60px 10px 60px 30px;
        }
}
@media screen and (max-width:1030px){
    /***************page actus******************/
    .pageActualites{
        flex-direction: column;
        max-height: none;
    }
    .pageActualites .textActualites{
        padding-left: 0;
    }
    .pageActualites .textActualites p{
        max-width: 500px;
    }
    .pageActualites .textActualites h2{
        max-width: none;
        font-size: 3.7rem;
    }
    .pageActualites .imgActualites img{
        margin-right: 0;
    }
    .pageActualites .textActualites{
        width: 70%;
    }
    .pageActualites .imgActualites{
        width: 70%;
        justify-content: flex-start;
    }
	/***************page à propos******************/
    
}
@media screen and (max-width:980px){
	/********page d'accueil************/
	header nav ul li a {
		font-size: 1.6rem;
	}
	#boutonRDV{
		left: 94.2%;
	}
	#h1{
		margin: auto 50px;
	}
	#accueilCoeur div{
		margin-left: 130px;
	}
	#accueilCoeur img {
		width: 500px;
		height: 300px;
	}
	#accueilServices div {
		margin: 0 30px;
	}
	#accueilServices div img{
		width: 100px;
		height: 100px;
	}
	#footerGauche{
		padding-left: 40px;
	}
}
@media screen and (max-width:935px){
    /***************page contact******************/
    #facilitesAcces {
        padding:0;
    }
    #messageMaisonDidier form div {
        max-width: 600px;
        width: 100%;
    }
    #messageMaisonDidier form {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    }
    #messageMaisonDidier form input[placeholder], #messageMaisonDidier form textarea[placeholder] {
        max-width: 600px;
    }
	 /***************page à propos******************/
}
@media screen and (max-width:880px){
	/*******page d'accueil***********/
		header nav li a img{
		width: 80px;
	}
	#boutonRDV{
		left: 93.8%;
	}
	#accueilCoeur div{
		margin-left: 50px;
	}
	#accueilCoeur img {
		width: 500px;
		height: 300px;
	}
	#sliderTemoignages{
		width: 600px;
	}
	.contenuTemoignages img {
		border-radius: 3px;
		margin: 20px 10px;
		max-width: 180px;
		max-height: 230px;
		min-height: 0;
	}
	.contenuTemoignages{
		width: 500px;
	}
	.texteTemoignages p:first-of-type {
		margin: 0 0 10px 0;
	}
	.texteTemoignages p:first-of-type{
		max-width: 240px;
		margin:0;
		margin-bottom: 20px;
	}
	#textActus p:first-of-type{
		max-width: 220px;
	}
}
@media screen and (max-width:845px){
/*********page d'accueil**********/
	header nav{
		display: flex;
		position: relative;
		flex-direction: row-reverse;
		justify-content: space-between;
	}

	header nav a.logoMobile{
	display: block;
	}
	header nav a.logoMobile a img{
	width: 100px;
	margin:15px;
	}
	nav ul.hamMenu{
	display: none;
	background: rgba(32, 32, 32, 0.288);
	box-shadow: 0 8px 32px 0 rgba(5, 5, 5, 0.185);
	backdrop-filter: blur( 10px );
	-webkit-backdrop-filter: blur( 10px );
	z-index: 98;
	top: 100%;
	right: 0%;
	position: absolute;
	}
	header nav ul.hamMenu li:hover, header nav ul.hamMenu li ul.sub-menu li:hover{ 
	background:rgba(53, 53, 53, 0.541); 
	box-shadow: 0 8px 32px 0 rgba(5, 5, 5, 0.185);
	backdrop-filter: blur( 10px );
	}
	header nav ul.hamMenu li a {
	font-size: 1.5rem;
	margin: 10px;
	}

	header nav ul.hamMenu li ul.sub-menu {
	flex-direction: column;
	display: flex;
	}
	header nav ul.hamMenu>li:nth-of-type(2):hover .sub-menu{
	position: relative;
	display: flex;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	background: transparent;
	box-shadow: none;
	backdrop-filter: none;
	-webkit-backdrop-filter: none;
	border-radius:none;
	z-index: 98;
	}
	header nav ul li:nth-of-type(4){
	display: none;
	}
	#accueilCollection div, #accueilSur-mesure div, #accueilCorner div {
	max-width: 280px;
	}
	#accueilCollection div::before, #accueilSur-mesure div::before, #accueilCorner div::before {
	width: 300px;
	height: 300px;
	}
	#accueilSur-mesure div::before, #accueilCorner div::before {
	height: 260px;
	top:4%;
	}
	#accueilCoeur p:first-of-type{
	position: relative;
	top:0;
	width: 100%;
	}
	#accueilCoeur h2{
	margin:20px 0;
	}
	#accueilCoeur{
	flex-direction: column;
	align-items: flex-start;
	}
	#accueilCoeur div{
	margin: 0;
	margin-top: 70px;
	margin-left: 40px;
	}
	#accueilCoeur img{
	align-self: center;
	margin: 0;
	margin-bottom: 70px;
	border-radius: 5px;
	width: 90%;
	}
	/*menu hamburger*/
	.hamburger {
		align-self: flex-end;
		padding: 15px 15px;
		display: inline-block;
		cursor: pointer;
		transition-property: opacity, filter;
		transition-duration: 0.15s;
		transition-timing-function: linear;
		font: inherit;
		color: inherit;
		text-transform: none;
		background-color: transparent;
		border: 0;
		margin: 0;
		overflow: visible; }
		.hamburger:hover {
			opacity: 0.7; }
		.hamburger.is-active:hover {
			opacity: 0.7; }
		.hamburger.is-active .hamburger-inner,
		.hamburger.is-active .hamburger-inner::before,
		.hamburger.is-active .hamburger-inner::after {
			background-color:white; }

	.hamburger-box {
		width: 40px;
		height: 24px;
		display: inline-block;
		position: relative; }

	.hamburger-inner {
		display: block;
		top: 50%;
		margin-top: -2px; }
		.hamburger-inner, .hamburger-inner::before, .hamburger-inner::after {
		width: 40px;
		height: 4px;
		background-color: white;
		border-radius: 4px;
		position: absolute;
		transition-property: transform;
		transition-duration: 0.15s;
		transition-timing-function: ease; }
		.hamburger-inner::before, .hamburger-inner::after {
		content: "";
		display: block; }
		.hamburger-inner::before {
		top: -10px; }
		.hamburger-inner::after {
		bottom: -10px; }
		.hamburger--stand .hamburger-inner {
			transition: transform 0.075s 0.15s cubic-bezier(0.55, 0.055, 0.675, 0.19), background-color 0s 0.075s linear; }
			.hamburger--stand .hamburger-inner::before {
				transition: top 0.075s 0.075s ease-in, transform 0.075s 0s cubic-bezier(0.55, 0.055, 0.675, 0.19); }
			.hamburger--stand .hamburger-inner::after {
			transition: bottom 0.075s 0.075s ease-in, transform 0.075s 0s cubic-bezier(0.55, 0.055, 0.675, 0.19); }

    .hamburger--stand.is-active .hamburger-inner {
        
        transform: rotate(90deg);
        background-color: transparent !important;
        transition: transform 0.075s 0s cubic-bezier(0.215, 0.61, 0.355, 1), background-color 0s 0.15s linear; }
        .hamburger--stand.is-active .hamburger-inner::before {
        top: 0;
        transform: rotate(-45deg);
        transition: top 0.075s 0.1s ease-out, transform 0.075s 0.15s cubic-bezier(0.215, 0.61, 0.355, 1); }
        .hamburger--stand.is-active .hamburger-inner::after {
        bottom: 0;
        transform: rotate(45deg);
        transition: bottom 0.075s 0.1s ease-out, transform 0.075s 0.15s cubic-bezier(0.215, 0.61, 0.355, 1); 
    }
}
@media screen and (max-width:823px){
    /*********page article*************/
    aside.archiveArticle p::after{
        bottom: -15%;
    }
    .pageArticleTexte h2{
        font-size: 3.8rem;
    }
    /***************page actus******************/
    .pageActualites .textActualites{
        width: 80%;
    }
    .pageActualites .imgActualites{
        width: 80%;
        justify-content: flex-start;
    }
    .pageActualites .textActualites h2{
        max-width: 500px;
        font-size: 3.5rem;
    }
    /***************page corner createur******************/
    #texteCornerCreateur:hover{
        margin-right: 70px;
    }
    #texteCornerCreateur{
        transition: margin-right 450ms linear,margin-top 450ms linear ;
    }
    /***************page contact******************/
    #messageMaisonDidier {
        margin:0;
    }
    #informationMaisonDidier{
        padding:30px;
    }
}
@media screen and (max-width:800px){
	/*********page d'accueil************/
    #boutonRDV{
        left: 92.6%;
    }
    h1{
        font-size: 4rem;
    }
    #accueilServices{
        flex-wrap: wrap;
    }
    #accueilServices div {
        margin: 0 60px;
    }
    #footerGauche{
        padding-left: 20px;
    }
}
@media screen and (max-width:760px){
    /***************page corner createur******************/
    #texteCornerCreateur:hover{
        margin-right: 100px;
    }
    #texteCornerCreateur {
        max-width: 400px;
        padding:40px;
    }
    /***************page contact******************/
    #texteInfoMaisonDidier{
        flex-direction: column;
        margin:20px auto;
    }
    #conteneurFacilitesAcces{
        flex-wrap: wrap;
        justify-content: center;
    }
    .infoFaciliteAcces{
        justify-content: center;
        margin: 20px;
    }
    #imgInfoMaisonDidier{
        justify-content: flex-start;
    }
    #imgInfoMaisonDidier img{
        max-width: 400px;
    }
    #messageMaisonDidier form div {
        max-width: 400px;
    }
    #messageMaisonDidier form input[placeholder], #messageMaisonDidier form textarea[placeholder] {
        max-width: 400px;
    }
}
@media screen and (max-width:735px){
    #footerDroit {
        display: none;
    }
}
@media screen and (max-width:690px){
	/***************page d'accueil********/
    #boutonRDV{
        left: 91.2%;
    }
    h1{
        font-size: 4rem;
        margin: auto 30px;
    }
    #accueilProduits{
        flex-direction: column;
        height:100%;
    }
    #accueilCollection div, #accueilSur-mesure div, #accueilCorner div {
        max-width: 350px;
        margin: 20px 0;
    }
    #accueilCollection div::before, #accueilSur-mesure div::before, #accueilCorner div::before {
        width: 350px;
        max-height: 260px;
        left: 0%;
    }
    #accueilSur-mesure div::before, #accueilCorner div::before {
        max-height: 210px;
    }
    #accueilCollection{
        background-position:top;
    }
    #sliderTemoignages {
        width: 400px;
        height: 500px;
    }
    .contenuTemoignages {
        flex-direction: column;
        width: 290px;
        max-height: 460px;
    }
    .texteTemoignages p:last-of-type {
        max-width: 300px;
        font-size: 16px;
        margin: 0 10px 10px 0;
    }
    .texteTemoignages p:first-of-type{
        margin-bottom: 10px;
    }
    .contenuTemoignages img{
        max-width: 150px;
        max-height: 150px;
    }
	 /*********page article*************/
    aside.archiveArticle{
        display: none;
    }
    .pageArticleTexte h2{
        font-size: 3.5rem;
    }
}
@media screen and (max-width:650px){
	/**********page d'accueil*****************/
    #accueilActus {
        flex-direction: column;
        margin:10px 0;
    }
	.cardActus {
        height: 350px;
        max-width: 220px;
    }
    #imageActus {
        max-height: 600px;
        max-width: 480px;
        margin: 0 auto;
    }
    #textActus {
        text-align: center;
        flex-direction: column;
        align-items: center;
        display: flex;
        margin: 60px auto;
    }
    #textActus p:last-of-type {
        margin: 20px 0;
    }
}

@media screen and (max-width:560px){
    /***************page corner createur******************/
    #texteCornerCreateur:hover{
        margin-right: 100px;
    }
    #texteCornerCreateur {
        max-width: 350px;
        padding:40px;
    }
    
}
@media screen and (max-width:580px){
	/***********page d'accueil******/
    #boutonRDV{
        left: 90%;
    }
    h1{
        margin: auto 20px;
    }
    #accueilCoeur div{
        margin-left: 20px;
    }
    #accueilServices div {
        margin: 0 30px;
    }
    footer{
        flex-direction: column;
    }
    #footerGauche {
        padding-left:0;
        margin: 0 auto;
        max-width:300px;
        align-items: center;
    }
    #footerMilieu>img {
        display: none;
    }
    #footerReseauS {
        margin: 0 0 20px 0;
    }
    #footerGauche p{
        text-align: center;
        font-size:1.4rem ;
    }
    h1 {
        font-size: 3.8rem;
    }
}
@media screen and (max-width:530px){
	/********page d'accueil***************/
    #boutonRDV{
        left: 90%;
    }
    #accueilCoeur p:first-of-type {
        max-width: 350px;
    }
    #accueilServices {
        height: 100%;
    }
    #newsletter {
        max-width: 300px;
    }
}
@media screen and (max-width:430px){
    /***************page corner createur******************/
    #texteCornerCreateur:hover{
        margin-right: 100px;
    }
    #texteCornerCreateur {
        max-width: 300px;
        padding:20px;
    }
    /***************page contact******************/
    #horaireMaisonDidier{
        margin-left: 0;
    }
    #horaireMaisonDidier p:last-of-type{
        margin-left: 10px;
    }
    #imgInfoMaisonDidier img {
        max-width: 270px;
    }
    #messageMaisonDidier {
        margin: 15px;
    }
    #messageMaisonDidier form>input:last-of-type {
        max-width: 150px;
    }
	/*******************page d'accueil*****************/
	 #sliderTemoignages {
        width: 300px;
        height: 520px;
    }
    .texteTemoignages p:last-of-type {
        max-width: 260px;
        font-size: 14px;
        text-align: center;
    }
    .texteTemoignages p:first-of-type{
        text-align: center;
    }
    .contenuTemoignages{
        width: 190px;
    }
    .contenuTemoignages img {
        max-width: 110px;
        max-height: 120px;
    }
    .etoile{
        text-align: center;
    }
    #imageActus{
        max-width: 300px;
    }
    .cardActus {
        height: 300px;
        max-width: 130px;
    }
    .cardActus p::after {
        content: "";
        width: 60px;
        left: 0%;
    }
    .cardActus h4 {
        font-size: 1.4rem;
    }
    #accueilServices div {
        margin: 0 20px;
    }
}
@media screen and (max-width:400px){
    /***************page corner createur******************/
    #texteCornerCreateur:hover{
        display: none;
    }
    #texteCornerCreateur:hover::before{
        display: none;
    }
    
}
@media screen and (max-width:300px){
    /***************page contact******************/
    #informationMaisonDidier {
        padding: 10px;
    }
}