/*
Theme Name:     Sarah Design Child
Theme URI:      http://monsite.com/
Description:    Thème enfant pour le thème Sarah Design
Author:         Sarah Duponchel
Author URI:     http://monsite.com/presentation/
Template:       sarah-design                             
Version:        0.1.0
*/
@import url("../sarah-design/style.css");

:root{
    --rouge:#8F403D;
    --sauge:#8AA3A0;
    --vert:#0F2E29;
    --beige:#F2EFE6;
    --ocre:#C3B499;
    --gris:#707070;
}

* {
    box-sizing: border-box;
  }
  
  html{
    font-size: 62.5%; /* 1rem = 10px */
  }
  
  body{
    font-family: 'poppins';
    margin:0; 
    font-size:1.6rem;
  }
  
  figure {
    margin: 0;
  }
  
  
  h1,h2{
    font-family: "saudagar";
    font-weight: 300;
  }

  h1{
      font-size: 8rem;
  }

  h2{
      font-size: 6rem;
  }

  p{
   font-family: 'poppins';
   font-size:1.8rem;
   font-weight: 200;
  }

  a{
    font-family: 'poppins';
    text-decoration: none;
  }

  ul{
    list-style-type: none;
   
  }

  .flexContainer {
    display: flex;
    
  }

  /******* NAV BARRE *****/
  /* header */

.header {
    background-color: #8aa3a0;
    box-shadow: 1px 1px 4px 0 rgba(0,0,0,.1);
    display:inline-block;
    width: 100%;
    z-index: 3;
    height:75px;
    }
    
    .header ul {
    margin: 0;
    padding: 0;
    list-style: none;
    overflow: hidden;
    background-color: #8aa3a0;
    }
    
    .header figure.logo img{
      width:85px;
      max-width: 100%;
    }
    
    .header li a {
    display: block;
    padding: 20px 20px;
    color: #f2efe6;
    font-family: 'poppins';
    text-decoration: none;
    font-size:1.5rem;
    font-weight: 300;
    }
    
    .header li a:hover,
    .header .menu-btn:hover {
    background-color: var(--sauge);
    }
    
    .header .logo {
    display: block;
    float: left;
    font-size: 2em;
    margin:0;
    padding:1rem;
    text-decoration: none;
    position:fixed;
    z-index:51;
    width:fit-content;
    }
    
    /* menu */
    
    .header .menu {
    clear: both;
    max-height: 0;
    transition: all 0.8s ease;
    }
    
    /* menu icon */
    
    .header .menu-icon {
    cursor: pointer;
    display: inline-block;
    float: right;
    padding: 28px 20px;
    position: fixed;
    user-select: none;
    right:0px;
    z-index:85;
    background-color:var(--sauge);
    border-radius:4px;
    }
    
    .header .menu-icon .navicon {
    background: #F2EFE6;
    display: block;
    height: 2px;
    position: relative;
    transition: background .2s ease-out;
    width: 18px;
    }
    
    .header .menu-icon .navicon:before,
    .header .menu-icon .navicon:after {
    background: #F2EFE6;
    content: '';
    display: block;
    height: 100%;
    position: absolute;
    transition: all .2s ease-out;
    width: 100%;
    }
    
    .header .menu-icon .navicon:before {
    top: 5px;
    }
    
    .header .menu-icon .navicon:after {
    top: -5px;
    }
    
    /* menu btn */
    
    .header .menu-btn {
    opacity: 0;

    }
    
    .header .menu-btn:checked ~ .menu {
    max-height: 500%;
    padding-top:85px;
    position:fixed;
    width:100%;
    z-index:80;
    }
    
    .header .menu-btn:checked ~ .menu-icon .navicon {
    background: transparent;
    }
    
    .header .menu-btn:checked ~ .menu-icon .navicon:before {
    transform: rotate(-45deg);
    }
    
    .header .menu-btn:checked ~ .menu-icon .navicon:after {
    transform: rotate(45deg);
    }
    
    .header .menu-btn:checked ~ .menu-icon:not(.steps) .navicon:before,
    .header .menu-btn:checked ~ .menu-icon:not(.steps) .navicon:after {
    top: 0;
    }
    
    
    
    @media (min-width: 1024px) {
    .header li {
      float: left;
    }
    .header li a {
     padding-right: 10px;
    }
    .header .menu {
      clear: none;
      float: right;
      max-height: none;
      padding-right: 11rem;
    }

.header .burgerCache{
      opacity: 1;
    }
    }
    
    /***** Boite icone ******/
    .icone-nav {
		margin: 0;
    display: flex;
    /* flex-flow: column; */
    /* width: fit-content; */
    padding: 4px;
    border-radius: 4px;
    bottom: 0;
    right: 0%;
    background-color: var(--sauge);
    position: bottom;
    z-index: 50;
    position: fixed;
    width: 100%;
    /* align-content: baseline; */
    justify-content: space-around;
      
    }
    .icone-nav a{
      display: flex;
      align-items: center;
      justify-content: center;
      padding:0.6rem;
      border-radius: 4px;
      cursor:pointer;
    }
    .header figure{
    width:100%;
    }
    @media (min-width: 768px) { /*tablette*/
      .icone-nav {
      flex-flow: column; 
      width: fit-content;
	  height: fit-content;
      top:20%;
     }
     .burgerCache{
       opacity: 1;
     }
    }
    @media (min-width: 1024px) {
      #select.flexContainer #selection{
        flex-flow: row wrap;

      }
    }

    /****** VIDEO ******/
    /*height: 80vh; 
      position: relative;
      /* overflow: hidden; */
     
    
    #video {
      height:90vh;
      position: relative;
      overflow: hidden;
      display: flex;
      justify-content: center;
      align-items: center;

    }

     #video > video{
      object-fit: cover;
      width: 100%;
      height: 100%;
      position: absolute;
    }

 #video::after, #video::before{
      content:"";
      position: absolute;
      display: block;
      width: 100%;
      height: 50%;
    }
#video::before{
      background-color: var(--sauge);
      top:0%;
      left: 0%;
      transition: all 2s ease-out;
      z-index: 10;

    }
#video:hover::before{
      left:-100%;
      opacity: 0.2;
  }

#video::after{
    background-color: var(--sauge);
    bottom: 0%;
    right: 0%;
    transition: all 2s ease-out;
    z-index: 20;
}
    #video:hover::after{
  right:-100% ;
  opacity: 0.2;
}
#video #titreVideo{
  flex-direction: column;
  position: relative;
  align-items: center;
  text-align: center;
  z-index:30;
  display: block; 
}
    #video h1{
  font-family: 'saudagar';
  font-size: 45px;
  transform: translate(0%, 90%);
  align-items: center;
  text-align: center;
  z-index:30;
  display: block; 
  color: var(--rouge);
  transition: all 1s ease-out;
  position:absolute;
  
  }

  #video h1:nth-child(1){
    color: transparent;
    -webkit-text-stroke:2px var(--rouge);
  }
  #video h1:nth-child(2){
    color:var(--rouge);
    animation: animate 4s ease-in-out infinite;
  }
  @keyframes animate{
    0%,
    100% {
      clip-path:polygon(
        0% 45%,
        16% 44%,
        33% 50%,
        54% 60%,
        70% 61%,
        84% 59%,
        100% 52%,
        100% 100%,
        0% 100%
      );
    }
    50%{
      clip-path: polygon(
        0% 60%,
        15% 65%,
        34% 66%,
        51% 62%,
        67% 50%,
        84% 45%,
        100% 46%,
        100% 100%,
        0 100%
      );
    }
  }
  #video p{
    font-family: 'arial';
    font-size: 17px;
    align-items: center;
    text-align: center;
    z-index:31;
    display: block;
    position: relative; 
    color: var(--rouge);
    transition: all 1s ease-out;
    transform: translate(1px, 114px);

  }
  #video:hover h1, #video:hover p{
    opacity: 0;
}
  
    @media (min-width: 768px) { /*tablette*/
      #background-video{
        width: 100%;
        object-fit: cover;
        height: 90vh;
        max-width: 100%;
        
      }
      .header .menu-btn{
        opacity: 0;
      }
      .burgerCache{
        opacity: 1;
      }
    }

    @media (min-width: 1024px){
      #video h1{
        font-family: 'saudagar';
        font-size: 150px;
        transform: translate(0%, -50%);
    }
    #video p{
      font-size: 56px;
      transform: translate(-6px, 114px);
    }
  }

    /***** LA SELECTION DU MOMENT *****/
#selection > div > ul > li > a.woocommerce-LoopProduct-link.woocommerce-loop-product__link{
	display: flex;
    align-content: center;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
	flex-direction: column;
}
ul.products li.product img {
    display: block;
    width: 400px;
}

  #select.flexContainer{
      flex-direction: column;
      align-items: center;
      margin-block: 10rem;
      
    }
    #select.flexContainer article figure{
      margin: 0;
      max-width: 270px;
      display: block;
      align-items: center;
      overflow: hidden;

    }
    #select.flexContainer article{
      display: block;
      align-items: center;
      text-align: center;
      
    }
h2.woocommerce-loop-product__title{
	margin-top:5rem;
}
#select.flexContainer a{
	display: block;
    /* margin-left: auto; */
    /* margin-right: auto; */
    /* margin-bottom: 2rem; */
    /* max-width: fit-content; */
    padding: 1.2rem;
    /* background-color: var(--rouge); */
    /* align-self: center; */
    /* text-decoration: none; */
    color: var(--rouge);
    font-family: 'poppins';
    font-size: 1.8rem;
    /* font-weight: 300; */
    border-radius: 2px;
    text-align: center;
    /* box-shadow: 3px 3px 8px rgb(0 0 0 / 30%); */
    border-radius: 2px;
	margin-top: 2rem;
    inline-size: fit-content;
}
a.button.product_type_simple.add_to_cart_button.ajax_add_to_cart{
	box-shadow: 3px 3px 8px rgb(0 0 0 / 30%);
    background-color: #ffffff69;
    border-style: solid;
    border-radius: 2px;
    border-width: 2px;
	text-decoration:none;
	
}
a.button.product_type_simple.add_to_cart_button.ajax_add_to_cart:hover{
	background-color:var(--rouge);
      color:#ffffff69;
      border-style:solid;
      box-shadow: 3px 3px 8px rgba(0, 0, 0, 0.1);
	   transition: 0.4s;
}
#select.flexContainer a:hover{
	color:var(--ocre);
}
@media screen and (min-width: 48em){
ul.products.columns-3 > li.product {
    width: 30.79667%;
	text-align: -webkit-center;}}
       
    section#select #laSelection h1{
      font-family: "saudagar";
      font-size: 7rem;
      margin: 0;
      padding:0;
      color:var(--rouge);
      font-weight: 300;
      line-height: 1;
      
      
    }
    section#select #laSelection p{
      font-family: "saudagar";
      font-size:42px;
      margin-top: -18px;
      padding:0;
      color:var(--rouge);
      font-weight: 300;
     
    }
    section#select #laSelection {
      padding-left: 3rem;
    }
    section#select #laSelection{
      align-items: center;
      display: flex;
      flex-direction: column;
      
    }
   
    section#select div#selection{
      flex-flow: column;
      margin-block: 2rem;
    }

 @media (min-width: 375px){
      section#select #laSelection{
        align-items: flex-end;
        padding-left: 0;
      }

    }

    @media (min-width: 768px){
        #select.flexContainer{
            flex-flow: column wrap;
            align-items: center;
            justify-content: center;
            background-color: var(--beige);
            margin:0;
            padding-top: 10rem;
            padding-bottom: 25rem
            
        }
    }
    @media (min-width: 1024px) {
      #select.flexContainer #selection   {
        flex-flow: row wrap;
	
      }
      #select.flexContainer article:nth-child(2){
        margin-left: 2rem;
        margin-right:2rem;
      }
		#woocommerce columns-3{
			width:800px;
		}
  }


    


    /****** PROFIL *******/
   section#profil.flexContainer{
      flex-flow: column;
      align-items: center;
      margin-bottom: 5rem;
      background-image: url(img/profilBG-sable.svg);
	   background-repeat:no-repeat;
	   background-size: cover;
      
    }
    figure#oneline.flexContainer img{
          object-fit: cover;
   		 width: 100%;
    		height: 100%;
     
    }
    figure#oneline.flexContainer{
     max-width: 300px;
   /* overflow: hidden; */
    }
   


    section#profil.flexContainer article{
      display: block;
    }
    section#profil article h2{
      font-size:4rem;
      font-family: 'saudagar';
      font-weight: 200;
      margin:7rem 4rem 2rem 2rem;
    }

    section#profil article p{
      margin: 4rem;
  
    }
    section#profil.flexContainer article a{
    display:block;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 4rem;
    max-width: fit-content;
    padding: 1.2rem;
    background-color:white;
    align-self: center;
    text-decoration: none;
    color:var(--vert);
    font-family: 'poppins';
    font-size: 1.8rem;
    font-weight:300;
    border-radius: 2px;
    text-align: center;
    border-style: solid;
	  
	  box-shadow: 3px 3px 8px rgba(0, 0, 0, 0.3);
    border-radius: 2px;
    }
    section#profil.flexContainer article a:hover{
      background-color:#8AA3A0;
    color:#FFF;
    transition: 0.4s;
  }
  @media(max-width:768px){
    div.wpsisac-slick-slider-wrp.wpsisac-clearfix{
      width: 34rem;
    }
    figure#oneline.flexContainer img{
      object-position: 24px;
    }
  }

  @media (min-width: 768px) { /*tablette*/
    section#profil.flexContainer{
      flex-flow: row wrap ;
      margin: 10rem 0 10rem 0rem;
      
      background-size: cover;
      height: 130vh;
      z-index: 1;
      margin-top:-14rem;
      background-color: rgba(255, 255, 255, 0);
      justify-content: center;
    }
    section#profil.flexContainer article {
      display: block;
      max-width: 506px;
  }

  }

  @media (min-width: 1024px){
    section#profil.flexContainer{
      margin:12rem auto;
     
      width: 100%;
      margin-top: -14rem;
      flex-flow: row wrap;
      justify-content: center;
      
    }
    figure#oneline.flexContainer{
      /*max-width: 330px;
      overflow: hidden;*/
      margin-bottom: 7rem;
      margin-left: 10rem
    }
    figure#oneline.flexContainer img{
     /* max-width: 665px;
      object-position:-74px;*/
    }
    section#profil.flexContainer article{
      text-align: -webkit-left;

    }
    section#profil article h2{
      margin:3rem
    }
    section#profil article p{
      margin:3rem;
    }

  }

.sliderImgProf .prev.slick-arrow, .sliderImgProf .next.slick-arrow {
    position: absolute;
    top: 50%;
    left: -20px;
    z-index: 10;
    font-size: 4rem;
}

.sliderImgProf .next.slick-arrow {
    right: -20px;
    left: auto;
}

  /******* BANDE PHOTO VISUEL ******/

  .containerPartners {
    overflow: hidden;
      /* margin: 1rem 6rem; */
      padding: 1;
      /* padding: 3px; */
      background-color: white;
      /* height: 30vh; */
      width: 800px;
      display: block;
      width: 100%;
      margin: 0 auto;
  }
  
  .containerPartners figure {
    margin: 0;
  }
  .containerPartners figure img {
      min-width: 800px;
    padding:2rem;
  }
  /*
  .containerPartners .reservoir {
    animation: slideRight 40s linear infinite;
  }
  */
  .containerPartners .reservoir img{
    height: 20vh;
    margin-inline-end: 20px;
  }
  body > div.containerPartners > div > div.listPartners{
    margin:20px;
  }
.clients{margin-top:3rem;}
.clients-slider{
	position:relative;
	overflow:hidden;
	/*margin:0 -1.75rem;*/
	height:10rem;
}
.clients-slider > *{
	display:flex;
	justify-content:space-around;
	align-items: center;
	gap:1rem;
	position:absolute;
	top:0;
	left:0;
	overflow: hidden;
	animation: marquee 20s linear infinite;
	padding-right:1rem;
	background: var(--white);
}
.clients-slider > .clients-2{
	transform:translateX(100%);
	animation: marquee_2 20s linear infinite;
}
.clients-slider figure{
	width:32rem;
	height:32rem;
}
.clients-slider img{height:10rem;}
@keyframes marquee {
	0% {
		transform:translateX(0);
	}
	100% {
		transform:translateX(-100%);
	}
}
@keyframes marquee_2 {
	0% {
		transform:translateX(100%);
	}
	100% {
		transform:translateX(0);
	}
}
@keyframes marquee_vertical {
	0% {
		transform:translateY(-100%);
	}
	100% {
		transform:translateY(100%);
	}
}
  /*@keyframes slideRight {
    100% {
      transform: translateX(-2500px);
    }
  }/*

    /**** BOX/VIGNERON ****/
     div#rouge.flexContainer{
      flex-flow: column;
		 background-image: url(img/BG-rouge.svg);
        background-repeat: no-repeat;
		 background-size:cover;
    }
    section#box.flexContainer{
      flex-flow: column;
    }
    figure#boite.flexContainer{
      max-width: 300px;
      margin: auto;

    }
    section#box.inverse{
      flex-flow: column-reverse;
      max-width: 100%;
    }
    figure#vigneron.flexContainer{
      max-width: 300px;
      margin:auto;
  
    }

    section#box.flexContainer article p{
      margin: 4rem;
	  color: white;
    }
    section#box.flexContainer article h2{
      font-size:4rem;
      font-family: 'saudagar';
      font-weight: 200;
      margin:7rem 4rem 7rem 2rem;
      color: var(--rouge);

    }
section#box.flexContainer:last-child article h2{
      font-size:4rem;
      font-family: 'saudagar';
      font-weight: 200;
      margin:12rem 4rem 2rem 2rem;
      color: white;

    }

    section#box.flexContainer article a{
      display:block;
      margin-left: auto;
      margin-right: auto;
      margin-bottom: 4rem;
      max-width: fit-content;
      padding: 1.2rem;
      background-color:var(--beige);
      align-self: center;
      text-decoration: none;
      color:var(--rouge);
      font-family: 'poppins';
      font-size: 1.8rem;
      font-weight:300;
      border-radius: 2px;
      text-align: center;
      border-style: solid;
      
      box-shadow: 3px 3px 8px rgba(0, 0, 0, 0.3);
      border-radius: 2px;
      }
      section#box.flexContainer article a:hover{
        background-color:#c3b49975;
        color:#FFF;
        transition: 0.4s;
    }

    @media(min-width :768px){
      section#box.flexContainer{
        align-items: center;
      }
      #rouge #box article{
        width: 54rem;
        margin:auto;

      }
      #rouge #box article h2{
        margin: 12rem 0rem 2rem 0rem;
      }
      section#box.flexContainer article p{
        margin-block: 2rem;
        margin:0
      }
      section#box.flexContainer article a{
        margin-block: 4rem;
      }
    }
    @media(min-width :1024px){
      section#box.flexContainer{
        flex-flow: row wrap;
      }
      section#box.flexContainer{
        flex-flow: row wrap
      }
    }

    @media(min-width:1024px){
      div#rouge.flexContainer{
        
        margin-top: 10rem;
        
      }
      section#box.flexContainer{
        margin-top:10rem;
        justify-content: space-evenly;
        
        }
        section#box.flexContainer:nth-child(2){
          margin-bottom: 10rem;
          margin-top: 0;

        }
      
      #rouge #box article {
        color:white;
        margin:0;
      }
      #rouge #box article h2{
        color:white;

      }
      figure#boite.flexContainer, figure#vigneron.flexContainer{
        margin:0;
      }

    }

    /******** animToi ****/
 section#box figure img.animToi{
  transform: scale(1.1);
  clip-path: polygon(0 0, 1% 0, 1% 100%, 0% 100%);            
  transition: all 0.8s ease-in;

}
section#box figure img.animToi.active{
  transform: scale(1);
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);

}
.animToi.slideRight {
          transform: translateX(100%);
          opacity: 0;
          transition: all 0.8s ease-in;
      }
      .animToi.slideLeft {
          transform: translateX(-100%);
          opacity: 0;
          transition: all 0.8s ease-in;
      }
      .animToi.slideLeft.active, .animToi.slideRight.active {
          transform: translateX(0);
          opacity: 1;
      }
      .animToi{
          transform: scale(1);
          opacity: 1;

      }

img.animToi.active{
      max-width: 250px;
      object-fit: cover;

    }

    figure#vigneron.flexContainer{
      max-width: 300px;

    }



   

      /****BANDE TEXTE LA LIGNE ROUGE*****/

      .aniTxt{color:#8F403D;
		font-size:15rem;
		font-family:'saudagar';
		margin-top:20rem;
		margin-bottom:30rem;
}


    /**** AVIS *****/
    .slick-track article p {
      font-family:'poppins';
      font-style:italic;
      font-weight:200;
      
    }
   .slider-posts.slick-initialized.slick-slider{
	width:50%;
}

    
    
    
    
    .slider-posts {
                max-width: 800px;
                margin: 2rem auto;
                padding: 1rem;
            }
            .slider-posts article{
                background-color: #ffffff89;
                margin: 1rem;
            }
            section#avis{
              position:relative;
              z-index: 2;
           
         
          text-align: center;
          display: block;
          font-family: 'poppins';
          font-weight: 500;
          color: #0F2E29;
          font-size: 3rem;
            }
            section#avis p{
              position: relative;
              z-index: 3;
            }
            section#avis h3{
              position: relative;
              z-index: 4;
            }
            section#avis:before{
              content: ' ';
              display: block;
              position: absolute;
              left: 0;
              top: 0;
              width: 100%;
              height: 100%;
              z-index: 1;
              opacity: 0.6;
              background-image: url('img/picto:illustration/illustration_profil_one_line/mainoneline.jpg');
              background-repeat: no-repeat;
              background-position: 50% 0;
              background-size: cover;

            }
    
    section#avis h3{
      font-weight:500;
      font-size:3rem;
      color:#0F2E29;
      text-decoration: none;
    }
  #avis.flexContainer{
    display: flex;
    align-items: center;
    justify-content: center;
    flex-flow: column;
            }
  .prev, .next{
                
    padding: 2px 6px;
    border-radius: 50%;
    font-weight: bold;
    color: #8AA3A0;
            }
  .prev:hover, .next:hover{ 
  color: #0F2E29;
                
            }

@media(min-width :768px){
  section#avis:before{
    display:none;
  }

}
@media (min-width :1024px) {
  #avis.flexContainer{
    background-image: url(img/mainoneline.jpg);
    background-repeat: no-repeat;
    background-position-x: right;
    height: 70vh;
  }
  
}
    
    
    
    /****** BOUTON LIEN DONNER SON AVIS *******/
    #donneravis {
      width: 222px;
      color:#0F2E29;
      text-align:center;
      align-items:center;
        justify-content: center;
        display: flex;
        border-radius: 2px;
        background-color: #fff;
        border-style: solid;
      margin:auto;
      box-shadow: 3px 3px 8px rgba(0, 0, 0, 0.3);
      font-size: 2rem;
        font-weight:300;
        border-radius: 2px;
        text-align: center;
      padding-left:2rem;
      padding-right:2rem;
      box-shadow: 3px 3px 8px rgba(0, 0, 0, 0.3);
    
      
    }
    #donneravis:hover{
      background-color:var(--sauge);
      color:#FFF;
      text-decoration: none;
    }

    .prev, .next{
      padding: 2px 6px;
    border-radius: 50%;
    font-weight: bold;
    color: var(--sauge);

    }


    /**** map *****/
    #mappy.flexContainer{
      background-image: url(img/carteFondVert.svg);
      background-size: cover;
      background-repeat: no-repeat;
      background-position: 50%;
      width: auto;
      height:185vh;
      margin:6rem auto;
      
    }
    #tableau.flexContainer{
      flex-flow: column;
      align-items: flex-start;
      margin: 30rem 2rem 4rem 2rem;
    }

    #tableau.flexContainer #contact{
      margin-bottom: 4rem;
      background-color: rgb(255 255 255 / 84%);
      
      border-radius: 3px;
    }
    #tableau.flexContainer #horaire{
      
      background-color: rgb(255 255 255 / 84%);
      
      border-radius: 3px;

    }

    #tableau.flexContainer #contact a{

      width: 222px;
      color:var(--vert);
      text-align:center;
      align-items:center;
      justify-content: center;
      display: flex;
      border-radius: 2px;
      background-color: #fff;
      border-style: solid;
      margin:auto;
      box-shadow: 3px 3px 8px rgba(0, 0, 0, 0.3);
      font-size: 2rem;
      font-weight:300;
      border-radius: 2px;
      text-align: center;
      padding-left:2rem;
      padding-right:2rem;
      box-shadow: 3px 3px 8px rgba(0, 0, 0, 0.3);
      width: fit-content;
      margin: 2rem auto;
    
      
    }
    #tableau.flexContainer #contact a:hover{
      background-color:var(--sauge);
      color:#FFF;
      text-decoration: none;
	  transition: 0.4s;
    }


    @media (min-width: 425px) { /*téléphone L*/
      #tableau.flexContainer #horaire, #tableau.flexContainer #contact{
        padding: 3rem;
      } 
    }

    @media(min-width :768px){
      #tableau.flexContainer {
        margin: 24rem 2rem 4rem 2rem
      }

    }
    
    @media(min-width:1024px) {
      #mappy.flexContainer{
        justify-content: center;
        height: 120vh;
      }
      #tableau.flexContainer{
        flex-flow: row wrap;
        align-items: center;
        margin: 26rem 2rem 4rem 2rem
      }
      #tableau.flexContainer #horaire{
        margin-left: 17rem;
      }
      #tableau.flexContainer #contact{
        margin-left: 2rem;
      }
    }
    /**** Animation dessin-logo *****/
     #anima.flexContainer{
      flex-flow: column ;
      margin-bottom: 6rem;
      align-items: center;
    }

    #anima.flexContainer #dessin, #anima.flexContainer #baseLine{
      width: 285px;
      overflow: hidden;
   
    }

    #anima.flexContainer #dessin #illus,  #anima.flexContainer #baseLine #illusBase {
      object-fit: cover;
      width: 280px;
    } 
    @media(min-width:1024px){
      #anima.flexContainer{
        flex-flow: row wrap;
        place-content: space-evenly;
      }
    }






    /***** FOOTER *******/
    .footer ul {
      margin: 0px;
      padding: 0px;
  }
  .footer-section {
    background: var(--rouge);
    position: relative;
  }
  .footer-cta {
    border-bottom: 1px solid --vert;
  }
  .single-cta i {
    color: var(--ocre);
    font-size: 30px;
    float: left;
    margin-top: 8px;
  }
  .cta-text {
    padding-left: 15px;
    display: inline-block;
  }
  .cta-text h4 {
    color: var(--ocre);
    font-size: 20px;
    font-weight: 600;
    margin-bottom: 2px;
    font-family:'poppins';
  }
  .cta-text span {
    color: #fff;
    font-size: 15px;
    font-family:'poppins';
  }
  .footer-content {
    position: relative;
    z-index: 2;
  }
  .footer-pattern img {
    position: absolute;
    top: 0;
    left: 0;
    height: 330px;
    background-size: cover;
    background-position: 100% 100%;
  }
  
  .footer-logo img {
      max-width: 200px;
  }
  .footer-text img {
      padding-left: 2rem;
      padding-bottom: 1rem;
  }
  .footer-social-icon span {
    color: #fff;
    display: block;
    font-size: 20px;
    font-weight: 700;
    font-family: 'Poppins', sans-serif;
    margin-bottom: 10px;
    margin-top:1rem;
  }
  .footer-social-icon a {
    color: var(--rouge);
    font-size: 16px;
    margin-right: 15px;
  }
  .footer-social-icon i {
    height: 40px;
    width: 40px;
    text-align: center;
    line-height: 38px;
    border-radius: 50%;
  }
  .facebook-bg{
    background:var(--ocre);
  }
  .twitter-bg{
    background: var(--ocre);
  }
  .google-bg{
    background: var(--ocre);
  }
  .footer-widget-heading h3 {
    color: var(--ocre);
    font-size: 20px;
    font-weight: 600;
    margin-bottom: 40px;
    position: relative;
    font-family:'poppins';
  }
  .footer-widget-heading h3::before {
    content: "";
    position: absolute;
    left: 0;
    bottom: -15px;
    height: 2px;
    width: 50px;
    background: #C3B499;
    
  }
  .footer-widget ul li {
    display: inline-block;
    float: left;
    width: 50%;
    margin-bottom: 12px;
    font-family:'poppins';
    
  }
  .footer-widget ul li a:hover{
    color: var(--vert);
  }
  .footer-widget ul li a {
    color: #fff;
    text-transform: capitalize;
  }
  .subscribe-form {
    position: relative;
    overflow: hidden;
  }
  .footer-text.mb-25{
      font-family:'poppins';
      color:var(--vert);
  
  }
  .subscribe-form input {
    width: 100%;
    padding: 14px 28px;
    background: #050606;
    border: 1px solid #fff;
    color: #fff;
  }
  
  .subscribe-form button {
      position: absolute;
      right: 0;
      background: var(--sauge);
      padding: 13px 20px;
      border: 1px solid #fff;
      top: 0;
  }
  .subscribe-form button i {
    color: #fff;
    font-size: 22px;
    transform: rotate(-6deg);
  }
  .copyright-area{
    background: #050606;
    padding: 25px 0;
  }
  .copyright-text p {
    margin: 0;
    font-size: 14px;
    color: var(--ocre);
  }
  .copyright-text p a{
    color: var(--rouge);
  }
  .footer-menu li {
    display: inline-block;
    margin-left: 20px;
  }
  .footer-menu li:hover a{
    color: #fff;
  }
  .footer-menu li a {
    font-size: 14px;
    color: var(--ocre);
  }

  @media (max-width: 425px) { /*téléphone L*/
    .copyright-area {
      height:25vh;
      
    }


  }