@charset "UTF-8";
/* CSS Document */


@font-face {
  font-family: 'icomoon';
  src:  url('fonts/icomoon.eot?m3s896');
  src:  url('fonts/icomoon.eot?m3s896#iefix') format('embedded-opentype'),
    url('fonts/icomoon.ttf?m3s896') format('truetype'),
    url('fonts/icomoon.woff?m3s896') format('woff'),
    url('fonts/icomoon.svg?m3s896#icomoon') format('svg');
  font-weight: normal;
  font-style: normal;
  font-display: block;
}

[class^="icon-"], [class*=" icon-"] {
  /* use !important to prevent issues with browser extensions that change fonts */
  font-family: 'icomoon' !important;
  speak: never;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;

  /* Better Font Rendering =========== */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.icon-instagram:before {
  content: "\e900";
}




html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike,  sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
  display: block;
}
body {
  line-height: 1;
}
ol, ul {
  list-style: none;
}
blockquote, q {
  quotes: none;
}
blockquote:before, blockquote:after, q:before, q:after {
  content: '';
  content: none;
}
table {
  border-collapse: collapse;
  border-spacing: 0;
}
p {
  margin-bottom: 1rem;
}
* {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
.rwd {
  max-width: 100%;
  height: auto;
}
body {
  font-family: 'Dosis', sans-serif;
    color: #2D2E2F;
}
html, body {
  height: 100%;
}

#menu, #fermer, .menu-resp, #mentions-nav {
  display: none;
}


.rwd {
  max-width: 100%;
  height: auto;
}
.titre {
font-family: 'Playfair Display', serif;
 color: #A0913c;} 

.titre span {
    font-size: 1rem;
    letter-spacing: .2rem;
}
a {
    color:#100d0d;
}
h1 {
    font-size: 2rem;
    padding: 20px 0;
    letter-spacing: .4rem;
    position: relative;
} 

#pic {
    text-align: center;
    margin-bottom: 20px;
}
.photohome {
    width: 80%;
}


h2 {
    font-size: 1.8rem;
    padding-bottom: 20px;
}
#wrapper {
   max-width: 1101px;
    width: 90%;
    margin : 0 auto;
}
header {
    text-align: center;
    margin: 15px 0;
    border-bottom: 1px dotted gray;
	position: relative;

}
#nav-top { 
    text-align: center;
    width: 70%;
    margin : 20px auto ;
    line-height: 1.3;
     text-transform: uppercase;
    font-size: .85rem;
	
    
}

.choix-langue{
position: absolute;
top: -8px;
right: -12px;
text-transform: capitalize;
background: #DAAB6E;
padding: 1px;
width: 50px;
font-size: 0.85rem;
text-transform: uppercase;
	
}

.choix-langue a {
	color: #fff;
    display: block;
}

#nav-top ul{
    display: flex;
    justify-content: space-between;

}

header a {
    text-decoration: none;
    color:#9F903B;
}

.eng {
    display: inline-block;
    padding-top: 8px;
    position: relative;
    color: #84959F;
}

.flex {
    display: flex;
    justify-content: space-between;
}
.content {
   
    width: 90%;
    margin : 20px auto;
    line-height:  1.4;
}

.content2 {
  display: flex;
  justify-content: space-around;
  width: 95%;
  margin: 25px auto;
  line-height: 2;
}
.intro {
    max-width: 700px;
   }

aside {
    text-align:right;
    max-width:294px;
    margin-top:20px;
	font-size: 0.87rem;
}
/* -- test blockquote--*/
.blockquote{
    position: relative;
    border-top: dotted 1px #A0913c;
    border-bottom: dotted 1px #A0913c;
    padding: 20px 0;
    line-height: 1.6;
    font-family: 'Playfair Display', serif
}
.blockquote:after {
    position: absolute;
    content: "“";
    color: #A0913c;
    font-size: 8rem;
    line-height: 0;
    bottom: 24px;
right: 14px;
transform: rotate(180deg);
}
.auteur {
    color: #A0913c;
    text-transform: uppercase;
}

footer {
    margin-top: 20px;
    border-top: 1px dotted gray;
    padding: 30px 0;
    text-align: center;
}

.intro-half {
    width: 45%;
}
/*--- about--- page lecture*/

.texte {
     max-width: 50%;
    line-height: 1.5;
}


#photo {
    max-width: 40%;
}
#photo-about {
    max-width: 35%;
}


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

.puce {
    padding-bottom: 20px;
    
    
}

.bullet li {
    list-style: circle;
    padding-bottom: 12px;
}
.puce li {
 border-left : 1px dotted brown;
padding-left: 10px;
margin-bottom: 12px;
}

.sous-titre {
color: #ac9595;
font-size: 1.3rem;}


/*---credits*/

.content-credits {
   
    width: 70%;
    margin : 25px auto;
    line-height:  2;
}

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

.signature {
 
   font-variant-caps: all-small-caps;
    
}

.mentions {
    display: flex;
    width: 90%;
    justify-content: space-around;
}

.colorgold {
      color: #A0913c;
}

/*----page témoignages ---*/

#list-review {
    display: flex;
     justify-content: space-around;
     flex-wrap: wrap;
}

.review {
   width: calc(30% - 15px);
    line-height: 1.5;
    position: relative;
    p:first-child::first-letter { padding-left: 20px; text-transform: uppercase; font-size: 2em; line-height: .5;}
    padding-top: 30px;
   
}

.avis {
    text-align: right;
    color:#7E7130;
}
.avis::before {
    content: ".................";
}

#envoyer {
    background: none;
    border : 1px solid #EDCF74;
    padding: 10px;
}


/* page posts*/


.posts {width: 33%;
padding: 0 5px;
line-height: 1.4;}

.content-post { 
    max-width: 90%;
    display: flex;
  flex-wrap: wrap;
justify-content: space-around;}


.posts img {
    margin-bottom: 0;
   
}

.posts p:first-child { min-height:70px; }

/*---------------------
----------------------*/

@media screen and (max-width: 820px) {
	body{
		color: #212121;
	}
    .texte-contact{
width: 50%;} 

#nav-top { width: 90%;}

    
}




/*---------------------
----------------------*/

@media screen and (max-width: 600px) {
	body{
		color: #212121;
	}
	
    .texte-contact {
    width: 100%;
}
     #nav-top {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    margin: auto;
    background: #fff;
    width: 100%;
    height: 100%;
    padding-top: 40px;
  }

	#nav-top ul li:last-child{
	display:block;
padding-top: 30px;
text-transform: none;
}
    #mentions-nav{
        display: block;
    }
	aside {
		font-size: 0.8rem;
	}
	
	.cote{
    
    display:none;
}
	
     .content2, .content-lecture, .flex, .comment {
        flex-direction:column;
         max-width: 90%;
    }
    
    #photo , #photo-about{
        max-width: 60%;
        margin: 0 auto;
    }
    
    .texte {
     max-width: 90%;
        }
    
    aside {
        text-align:left;
    }
    
    .comment {
        max-width:90%;
        margin: 0 auto;
    }
    
    .titre {
        font-size: 1.3rem;
        text-align:center;
    }
    
    #nav-top {
        display:none;
        position: fixed;
        top: 0;
        left:0;
        right:0;
        margin: auto;
        background: #fff;
        width:100%;
        height: 100%;
        padding-top: 40px;
        
    }
    #nav-top ul {
    
    flex-direction: column;
  }
  #nav-top ul li {
    padding-bottom: 20px;
  }
    
    .top {max-width: 20%;        
    }
    .menu-resp {
        display: block;
        margin:auto;
        max-width: 20%;
        padding-bottom: 30px;
    }
    h1 {
        font-size: 1.2rem;
    }
    .titre span {
        font-size: 0.8rem;
    }
     #menu, #fermer {
    position: fixed;
    top: 30px;
    right: 10px;
    z-index: 100;
    display: block;
    width: 40px;
    height: 40px;
    text-indent: -9999px;
  }
  #menu {
    background: url(img/menu.png) no-repeat left top;
  }
  #fermer {
    background: url(img/menu.png) no-repeat right top;
    display: none;
}
    
    
 #list-review {
        flex-direction: column;}
        
        .review {
            width: 100%;}


.content-post { 
  flex-direction: column;
margin: 0 auto;}

.posts {
    width: 100%;
}
}