* {margin : 0;padding : 0;}
html {font-size:100%;margin : 0;padding : 0;}
body {
margin : 0;
padding : 0;
background : #eae7e4;
font : 1.4rem 'Source Sans Pro', "Helvetica Neue", Helvetica, Arial, sans-serif;
}

#conteneur {
display: flex;
display: -webkit-flex;
align-items: flex-start;
min-height: 100vh;
box-sizing : border-box;
margin: 0 2.0rem;
}

#sidebar {
flex: 18%;
text-align:center;
padding-left:1.0rem
}

#logo {
display : block;
padding : 2rem 0;
border-bottom: 1px solid #999 ;
}

h1 {
font-size : 2.2rem;
margin : 0;
letter-spacing : 0.4rem;
font-weight: 600;
}
h2 {font-weight : 400;font-size : 1.1rem;font-style: italic;}

#menu {
text-align:left;
margin-top : 2rem;
line-height : 1.6em;
padding-left : 3.0rem;
padding-bottom : 3rem;
font-size : 1.1rem;
border-bottom: 1px solid #999 ;
}
#menu a {
color : #3e3e3e;
font-weight : 500;
text-decoration : none;
}
#menu #current a {
color : #f5634a;
}
#menu a:hover {
font-weight: bold;
}
#menu ul li {
list-style : none;
}
#menu ul li ul li {
list-style : none;
margin-left : 2rem;
}
#contact{
padding:3.0rem 0;
border-bottom: 1px solid #999 ;}

#principal {
flex: 72%;
min-height: 100vh;
box-sizing : border-box;
background : #fff;
margin:1.0rem;
padding : 0 1.0rem 2.0rem 0rem;
}
#principal p{margin: 0 1.0rem 1.0rem 1.0rem;font-size: 1.0rem;text-indent:1.0rem;}
#principal a{color: #f5634a;text-decoration: none;}
#principal img{border: thin solid #999;}

#header {margin : 2.0rem ;text-align:center;}
#header img {display:inline-block;}
#header p {font-size : 1.0rem;text-align:right;}

h3 {
font-weight: 500;
font-size: 1.6rem;
text-align: left;
letter-spacing: 0.1rem;
padding-top : 0.4rem;
padding-bottom : 0.5rem;
border-top: 1px solid #999 ;
border-bottom: 1px solid #999 ;
}

#part1, #part2, #part3 {display:inline-block;width:100%;font-size: 1.0rem;margin: 1.0rem;overflow:auto;}
h4{
font-weight : 600;
font-size : 1.1rem;
padding-top:1.0rem;
padding-bottom:1.0rem;
}
#galerie {display:flex;flex-wrap:wrap;width:100%;}

#galerie p {padding : 0.5rem;text-align:left;}

.miniature {
padding-top:0.8rem;
width:33%;
margin : 0 auto;
text-align:center;/* pour centrer l'image */ 
}
.centre {text-align:center;padding-top:1.0rem;}
.img-gauche {float:left;margin-right:1.0rem;}
.strong {font-weight: 600;}

#maj {
font-size : 0.9rem;
text-align : center;
margin:3.0rem 0;
font-style: italic;
}

/* Smartphones (portrait) ----------- */
@media only screen and (min-width : 360px) and (orientation : portrait) {
#conteneur {margin : 0;flex-direction : column;}
#sidebar{margin:0 auto;padding-left:0rem}
#contact{padding:1.0rem 0;border-bottom: none ;}
#principal {width: 95%;margin:0.5rem auto;}
#header {width:100%;margin-left :0rem;}
#header img {object-fit: contain;max-width: 90%;height: auto;}
h3 {padding-left:1.0rem;}
.img-gauche {float:none;text-align:center;}
}

/* Smartphones (paysage) ----------- */
@media only screen and (min-width : 360px) and (orientation : landscape) {
#header img {object-fit: contain;max-width: 90%;height: auto;}
}


/* Tablettes portrait----------- */
@media only screen and (min-width : 768px) and (max-width : 1024px) and (orientation : portrait) {
#header img {object-fit: contain;max-width: 90%;height: auto;}
h3 {padding-left:1.0rem;}
}

/* Tablettes paysage----------- */
@media only screen and (min-width : 820px) and (max-width : 1180px) and (orientation : landscape) {

}