@charset "UTF-8";
/***************************
	PAGE présentation PRÉCISE
***************************/
#presentation {
    padding: 0;
    margin: 0;
}
#presentation p {
    margin: 0 0 1em 0;
    padding: 0;
}
#presentation li {
    margin: 0.5em 0;
    padding: 0;
}
#presentation ul {
    margin: 1em;
    padding: 0;
    list-style-type: square;
}
#presentation h2 {
    font-family:"Oswald", "Arial", sans-serif;
    padding:8px 12px 6px 12px;
    margin:16px -24px 8px -24px;
    font-size: 1.8em;
    color:rgb(228,35,19);
    border-bottom:1px solid rgba(0,0,0,0.1);
    background-color:rgba(50,0,0,0.05);
    
}
#presentation h2 big{
    position:relative;
    top:-2px;
    margin:0 8px 0 0;
    padding:12px 16px 8px 16px;
    color:white;
    background-color: rgb(228,35,19);
    box-shadow:5px 1px 0 rgba(0,0,0,0.05)
 }

#presentation h3 {
    font-size: 1.5em;
    margin: 0.6em 0;
    padding: 0;
    color: rgb(0,72,153);
}
#presentation h4 {
    font-size: 1.2em;
    margin: 0 0 1em 0;
    padding: 0;
    color: #111;
}
#presentation section {
    position: relative;
    background-color: #EEE;
    padding: 0 16px 32px 16px;
    border-bottom: 6px solid rgb(228,35,19);
    background-repeat: no-repeat;
    background-origin: center top;
    background-size: cover;
    min-height:100vw;
}
#presentation header {
    position: relative;
    border-bottom: 6px solid rgb(228,35,19);
}
#presentation #main-photo {
    margin: 0 -15px;
}
#main-photo img {
    min-width: 100%;
    max-width: 100%;
}
#presentation #main-text {
    margin: 0;
    padding: 0 16px 32px 16px;
    z-index: -1;
}
#presentation #main-text h2 {
    background-color: rgb(228,35,19);
    color: white;
    margin: 0 -17px 16px -17px;
    padding: 16px;
    text-align: left;
    z-index: 20;
    border: 10px solid #CC0000;
    border-width: 0 0 0 32px;
}
#presentation #main-text .date_maj {
    font-style: italic;
    color: #999;
    font-size: 0.8em;
}
#presentation .texte {
    background-color: rgb(255,255,255);
    padding: 16px 24px 32px 24px;
}
#presentation .number {
    font-size: 3.6em;
    padding: .1em 0.3em;
    margin: 0;
    background-color: rgb(228,35,19);
    color: #EEE;
}
#presentation .photo {
    background-color: rgba(0,0,0,0.2);
    padding: 32px;
}

#sommaire {
    font-size: 1.1em
}
#sommaire ul {
    padding: 10px;
    list-style: none;
}
#sommaire li {
    padding: 0;
    background: rgba(0,0,0,0.1);
    margin: 5px 0;
    border-radius: 16px;
}
#sommaire li:hover {
    background: rgba(0,0,0,0.15);
}
#sommaire big {
    background: #7470AD;
    color: white;
    padding: 8px 8px 8px 12px;
    display: inline-block;
    margin-right: 12px;
    border-radius: 16px 0 0 16px
}
#sommaire .actif big {
    background-color: #333;
}
#sommaire span {
    display: block;
    margin: 1px 0 0 0;
    color: #333;
}
#sommaire a {
    color: #7470AD;
    text-decoration: none;
}
#sommaire a:hover {
    color: #111
}

/* Extra small devices (phones, less than 768px) */
/* No media query since this is the default in Bootstrap */

/* Small devices (tablets, 768px and up) */
@media (min-width: 768px) {
    
    #presentation #main-text {
        position: absolute;
        bottom: 3%;
        left: 20%;
        right: 0;
        width: 60%;
        margin: 0;
        z-index: 100;
        background-color: rgba(255,255,255,.80)
    }
    #presentation section {
        min-height:60vw;
    }
    #presentation .texte {
        padding: 16px 32px;
    }
    #presentation .number {
        display: inline-block;
        float: left;
        padding: .8em .3em .4em .3em;
        margin: -0.35em .6em .1em 0;
    }
    #presentation .bottom .photo img {
        width: 23%;
        float: left;
        margin: 1%;
    }
    #presentation .top .main_photo {
        margin: 0;
        background-color: rgba(0,0,0,0.2);
    }
    #presentation .top .main_photo img {
        margin: 0 -15px;
    }
    #presentation .top .number {
        position: absolute;
        top: 12px;
        left: 32px;
    }
    #presentation .top .photo img {
        width: 23%;
        float: left;
        margin: 1%;
    }
    #presentation .top .texte {
        position: relative;
        top: -120px;
        border-radius: 0 128px 0 0;
        padding: 48px 24px 24px 48px;
    }
}

/* Medium devices (desktops, 992px and up) */
@media (min-width: 992px) {
    #presentation header {
        left: -1px !important;
        width: 100vw;
        height: 60vw;
        overflow: hidden;
    }
}

/* Large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) {
    #presentation header {
        height: 50vw;
        overflow: hidden;
    }
    #presentation #main-photo img {
    }
    #presentation section {
        min-height:50vw;
    }
}


#inpage_nav {
	list-style: none;
	margin: 0 !important;
    padding:0;
    position:fixed;
    left:1px;
    top:200px;
    z-index:300;
}

#inpage_nav li {
    list-style: none;
	margin: 1px 1px 1px 0;
    box-shadow:8px 8px 0px rgba(0,0,0,0.05);
}
#inpage_nav a {
	background: #ededed;
	color: #666;
	display: block;
	font-size: 14px;
	padding: 5px 10px;
	text-decoration: none;
	text-transform: uppercase;
}

#inpage_nav a:hover {
	background: #dedede;
}

#inpage_nav .current a {
	background: rgb(228,35,19);
	color: #ededed;
}
/*
section { position:relative}
#content-main {
	position:relative;
	padding:1px;
}

.photo_box { background:rgba(255,255,255,0.5);padding:32px;
}
.photo_box a { 
}
#intro {
    font-size:1.1em;
    margin:0;
    padding:0;    
    position:relative;
    box-shadow:0 10px 10px rgba(0,0,0,0.1);
    z-index:200;
}
#chapeau {
    min-width:100%;
    z-index:-1;
     position: absolute;
    bottom:0;
    left: 0;
    right: 0;
}

#chapeau .container {
   position:relative;
}
#chapeau .texte{
   
    z-index: 1000;
    background-color: rgba(255, 255, 255, 0.9) ;
    padding: 32px;
    margin: 1px auto;
}
#intro  {
    min-width:100%;
    position:relative;
    top:0px;
    z-index:-1;
    background-size:cover;
    height: 56.25vw;
    width:100%;
}
.part {
    border-top:1px solid #FFF;
    border-bottom:1px solid #666;
    overflow:hidden;
    min-width:100%; position:relative; top:0px; z-index:-1;
    background-size:cover;
    min-height:60vw;
    padding:36px;
}
.texte {
   background-color:rgba(255,255,255,0.9) ;
   padding:32px;
}

object {
		margin:10px auto;
}

#photos {
		background:white;
		padding:0px;
		width:256px;
		float:right;
		margin: 0 0px  0 10px;
}

#photos ul {
		padding:0;
		margin:10px;
}

#photos li {
		background:url(/images/techniques/ombre_photos_petites.png) no-repeat bottom left #EFEEE6;
		padding:0 0 6px 0;
		margin:20px;
		list-style-type:none;
		width:216px;
}

#photos img {
		border:8px solid #EFEEE6;
}*/