@font-face {
	font-family: 'ted';
	src: url('../fonts/ted.ttf') format('truetype')
}

/* Les variables à changer selon les goûts et le style de site*/
:root{
  --image_de_fond : url('../images/fond/background_family.png');
 /* --image_titre : url('../images/titre/bandeau-ligne.png');  */  /* je mets l'image de fond dans le header de la page index pour le changement avec dates */  

  --couleur_font_nav_footer_div : #fff;

  --couleur_fond_footer : rgba(238,87,4);

  /* couleur de fond avec effet de transparence sur div prestations */
  --couleur_fond_div : rgba(0, 0, 0, 0.5);

  /* couleur de fond avec effet de transparence sur la barre verticale menu burger */
  --couleur_fond_barnav_burger : rgba(238,87,4, 0.7);

  /* couleur de fond avec effet de transparence sur la barre menu */
  --couleur_fond_barnav : rgba(238,87,4, 0.8);

  --arrondis_div : 50px 10px 50px 10px;
  --arrondis_image : 10px 10px 10px 10px;

  --barre_horizontal_separative : 5px solid #6f6f6f; width: 100%;
/* Fin des variables */
}
html{
    scroll-behavior: smooth;
}

body{
    margin: 0px;
    padding: 0px;
    font-family: sans-serif;
    background: var(--image_de_fond);
    background-size: cover;
    background-repeat: no-repeat;
}

ul {
    list-style:none;
  }

/* Navbar */
.navbar {  
    display:flex;
    align-items:center; 
    justify-content:space-between;   
    padding:10px;
    font-size:1.1rem;
    background:var(--couleur_fond_barnav);
    color:var(--couleur_font_nav_footer_div);
    top:0;
    position: fixed;
    width: 100%;
    height: 10px;
  }
  .navbar__links { 
    display:flex;  
  }
  .navbar__link { 
    padding:0 10px;
  }
  .navbar__link > a { 
    color:var(--couleur_font_nav_footer_div);
    text-decoration:none;
  }
  .burger {
    display:none;
  }
 


.barre {border-top: var(--barre_horizontal_separative);}


header{
    display: flex;
    flex-direction: column; 
   /* background: var(--image_titre); */
    background-size: 100% 100%;
    margin-top: 10px;
    background-repeat: no-repeat;
    color: var(--couleur_font_nav_footer_div);
    padding: 100px;
   

  }


h3{
    font-family: 'Playfair Display', serif;
    font-size: 20px;
    margin-left: 15px;
}

h2{
  font-family: 'ted', serif;
  font-size: 10px;
  margin-left: 15px;
}

h1{
  font-family: 'ted', serif;
  font-size: 15px;
  margin-left: 15px;
}


p{
	margin-left: 15px;
	margin-right: 0px;
}

.ecart_img {
    display: flex;
    justify-content: space-between;
     }

.main{
    margin-top: 40px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.main .content .card{
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    margin-bottom:20px;
}

.main .content .card .left{
   border-radius: var(--arrondis_div);
   flex: 0 0 50%;
   padding: 20px;
   background-color:var(--couleur_fond_div);
   color:var(--couleur_font_nav_footer_div);
   }

   

.zoom-image {overflow:hidden}
.zoom-image img {border-radius: var(--arrondis_image);width:300px;height:auto;filter:grayscale(0%)}
.zoom-image img:hover{width:100%;filter:grayscale(100%);-webkit-transform:scale(1.3);transform:scale(1.3);-webkit-transition:1s ease-in-out;transition:1s ease-in-out}

.main .content .card img{
    border-radius: var(--arrondis_image);
	height:300px;
    width: auto;
    margin-top: 5px;
    margin-right: 5px;
}

footer{
    margin-top: 40px;
    border-top: var(--barre_horizontal_separative);
    background-color: var(--couleur_fond_footer);
    color: var(--couleur_font_nav_footer_div);
    padding: 30px 100px;
    opacity: .8;
}


footer .services{
    margin-top: -10px;
    display:flex;
    flex-wrap:wrap;
}

footer .services .service{
    margin-right: 30px;
}

footer .services .service p{
    max-width: 300px;
}
footer .services .service a{ 
  color:var(--couleur_font_nav_footer_div);
  text-decoration:none;
}


@media screen and (max-width:680px){

    body{
        margin: 0px;
        padding: 0px;
        font-family: sans-serif;
        background: var(--image_de_fond);
        background-size: cover;
        background-repeat: no-repeat; }

         
    .main .card {
        margin: 10px;
    }
    .main .content .card .right img{
        height:200px;
        width: 100%;
        margin-top: -0px;
    }
    .ecart_img {
        display: block;
              }
    .main .content .card{
        display: block;
    }
    footer{
        padding: 30px;
    }

/* MENU */

.navbar__links { 
    overflow:hidden;
    display:flex;
    flex-direction:column;
    width:0;
    height:calc(40vh - 35px);  
    position:absolute;
    top:12px;
    right:0;     
    background:var(--couleur_fond_barnav_burger);
    transform: translateX(110%);
    transition: all .5s ease-in-out;
  }
  .show-nav .navbar__links { 
    
    width:100vw;    
    transform: translateX(0);
  } 
  .navbar__link {    
    transform: translateX(101%);
    transition: all .5s ease-in-out;
  }
  
  .show-nav .navbar__link  {        
    transform: translateX(0);    
  }   
  .navbar__link > a {
    display:block;
    padding:1rem;
    font-size:1rem;
    color:var(--couleur_font_nav_footer_div);
    transition: all .4s ease-in-out;
  }
  .navbar__link > a:hover {
    padding-left:2rem;
    letter-spacing:5px;
      }
  
  /* Toggle menu */
  .burger {
    margin-top: 5px;
    display:block;
    position:relative;
    padding:0px;
    width:35px;
    height:35px;
    border:none;
    background:transparent;
    cursor:pointer;
  }
  .bar {
    display:block;    
    width:35px;
    height:4px;  
    border-radius:3px;
    background:var(--couleur_font_nav_footer_div);
    transition: all .5s ease-in-out;   
  }
  .bar::before, .bar::after {
    content:"";
    width:35px;
    height:4px;
    position:absolute; 
    left:0;  
    background:var(--couleur_font_nav_footer_div);
    border-radius:3px;    
    transition: all .5s ease-in-out;
  }
  .bar::before {
    transform:translateY(-12px)
  }
  .bar::after {
    transform:translateY(12px)
  }
  .show-nav .bar {
    width:0;
    background:transparent;    
  }
  .show-nav .bar::before {
    transform:rotate(45deg);
  }
  .show-nav .bar::after {
    transform:rotate(-45deg);
  }
  
  /* Bonus - Animations */
  .show-nav .first {      
    transition: all 1s ease-out;
  } 
  .show-nav .second {      
    transition: all 1.1s ease-out;
  } 
  .show-nav .third {      
    transition: all 1.2s ease-out;
  } 
  .show-nav .four {      
    transition: all 1.3s ease-out;
  } 
  .show-nav .fifth {      
    transition: all 1.4s ease-out;
  }
}

/*  Medium device - Bonus pour effets spéciaux barre sous le menu */
@media screen and (min-width:768px) {
  .navbar__link > a::after {
    display:block;
    content:"";
    width:0;
    height:1px;
    background:var(--couleur_font_nav_footer_div);
    transition:width .4s;
  }
  .navbar__link:hover > a::after {
    width:100%;
  }
}

/* bonus */
.main-content, #section2 {
  height:100vh;
}