@charset "UTF-8";

/* Reset style */
html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, a, cite, em, img, strong, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, embed, footer, header, nav, section, 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, footer, header, nav, section {display: block;}
body {line-height: 1;}
ol, ul {list-style: none;}
blockquote {quotes: none;}
blockquote:before, blockquote:after {content: ''; content: none;}
table {border-collapse: collapse; border-spacing: 0;}

/* Bonne visibilité et lissage des textes */
body {text-rendering: optimizeLegibility; font-smoothing: antialiased; -webkit-font-smoothing: antialiased;} /* TEXT RENDERING */
article, aside, figcaption, figure, footer, header, hgroup, nav, section, p {margin-bottom: 30px;} /* BASELINE */

/* Le style general */
html {font-size: 100%; background-color: #fff; font-family: 'Capriola', arial, verdana? "Times New Roman", Times, serif;}
body {max-width: 964px; width: 96%; margin: 10px auto; font-size: 1em; line-height: 1.5em; border:1px solid black;}
a {text-decoration: none;}
em{font-style: italic;}
strong{font-weight: bold;}

/* L'en-tête */
header{width:100%; height:90px; background: url("../images/courtoisie-small.jpg") no-repeat 2%, url("../images/courtoisie-mob.jpg") no-repeat 50%, url("../images/voiture-header-small.jpg") no-repeat 100%; background-color:#D3D6E9; margin-bottom:10px; border-bottom:1px solid black;}
.open {display: block; width: 40px; height: 30px; background: url(../images/menu.png) center no-repeat #999; border-radius: 8px; text-indent: -999em;}
header h1, header p{display:none;}
.menujs{display: block;}

/* Le menu */
nav{display:none}
#pageslide {
    display: none; position: absolute; top: 0; height: auto; z-index: 999999; /* Ne pas changer */
    width: 210px; padding: 20px;/* largeur du pageslide */
    background-color: #dce4f1; color: #000000; -webkit-box-shadow: inset 0 0 10px 2px #FCCE30; -moz-shadow: inset 0 0 10px 2px #FCCE30; box-shadow: inset 0 0 10px 2px #FCCE30; /* Option, describe how the pageslide will look */
}
#pageslide .menu {display: block;}
#pageslide .element_menu h3{color:#80684c; text-align:center; margin:3%;}
#pageslide .element_menu a {float: none; display: block; width: 100%; color: #000000;}
.logoPart{text-align:center; margin-bottom:0;}
.logoPart img{padding-top: 5%;}

/* Le corps */
section{width:94%; margin:3% 3% 3% 3%; text-align:justify;}
section p{text-indent:3%;}
section h1{font-size:1.1em; font-weight: bold; padding-bottom:3%;}
section h2{font-size:1em; text-indent:3%; text-decoration: underline; margin-bottom:2%}
section a{text-decoration: underline; color: black;}
section .img_gauche, section .img_droite, section .img_centre{text-align: center;}
section .img_gauche img, section .img_droite img, section .img_centre img{max-width:100%; height:auto;}
section .centrer{text-align: center;}
section .boutique{width:100%; height:3000px; margin:0; padding:0; text-align: center; border: none;}
section ul{margin:3% 3% 30px 3%;}
section li{list-style-type: square; margin-left:3%;}
section .long li{margin-bottom: 10%;}/* Liste avec texte long*/

/* Citations */
blockquote{ display:block; background: #fff; padding: 15px 20px 15px 45px; margin: 0 0 20px; position: relative;
   /*Font*/ font-family: Georgia, serif; font-size: 16px; line-height: 1.2; color: #666; text-align: justify;   
  /*Borders - (Optional)*/ border-left: 15px solid #FECE2E; border-right: 2px solid #FECE2E;  
  /*Box Shadow - (Optional)*/ -moz-box-shadow: 2px 2px 15px #ccc; -webkit-box-shadow: 2px 2px 15px #ccc; box-shadow: 2px 2px 15px #ccc;
}

blockquote::before{
  content: "\201C"; /*Unicode for Left Double Quote*/
  /*Font*/ font-family: Georgia, serif; font-size: 60px; font-weight: bold; color: #999;
  /*Positioning*/ position: absolute; left: 10px; top:5px;
}

blockquote::after{/*Reset to make sure*/  content: "";}
blockquote a{text-decoration: none; background: #eee; cursor: pointer; padding: 0 3px; color: #c76c0c;}

/* les videos */
.video{width:100%; text-align:center; height:0; padding-bottom:56.25%; position:relative; margin-bottom:70px;} /* 16/9 */
.video .r1{padding-bottom:100%;} /* 4/3 */
.video iframe, .video embed, .video object{width:100% !important; height:100% !important; position:absolute; top:0; left:0;}
figcaption{padding-top:59%; font-style:italic; font-size:0.9em;}
figcaption .r1{padding-top:103%;}

/* Le formulaire de contact */
#contact{padding: 3%; border: 1px solid black; text-indent: 3%; text-align: justify; border-radius: 20px; box-shadow: 6px 6px 6px black;}
#contact label{display: block; text-align: left;}
#contact input{width: 60%;}
#contact textarea{width: 80%;}
#contact .btform{text-align:center;}

/* pied de page */
footer{padding: 1%; margin-bottom: 0px; text-align:center; background-color:#D3D6E9; border-top:1px solid black; width: 98%; clear:both;}
footer p{margin-bottom: 0px; line-height: 2em;}
footer a{text-decoration:none; color:#000000;}

/* Les tableaux */
@media only screen and (max-width: 41em){
	section table, section thead, section tbody, section th, section td, section tr {display: block;}
	section caption {display: inline; padding-left: 10px; font-style : italic; font-size:0.9em;}
	section thead tr {position: absolute; top: -9999px; left: -9999px;}
	section tr {border: 1px solid #ccc; margin-top:10px}
	section th {background-color:#D3D6E9;}
	section td {border-bottom: 1px dashed #ccc; position: relative; padding-left: 50%; white-space: normal; text-align:left; padding-bottom:0px; text-indent:0;}
	section td.lastTd {border: none;}
	section td:before {position: absolute; top: 0px; left: 0px; width: 45%; padding-right: 10px; white-space: nowrap; text-align:center; font-weight: bold; text-indent:0;}
	section td:before {content: attr(data-title); color:#D3D6E9;}
}
/* Fin Les tableaux */

/* tableaux des tests */
@media only screen and (max-width: 41em){
	.test, .test thead, .test tbody, .test th, .test td, .test tr {display: block;}
	.test caption {display: inline; padding-left: 10px; font-style : italic; font-size:0.9em;}
	.test thead tr {position: absolute; top: -9999px; left: -9999px;}
	.test tr {border: 1px solid #ccc; margin-top:10px}
	.test td {border-bottom: 1px dashed #ccc; position: relative; padding-left: 35%; white-space: normal; text-align:left; padding-bottom:0px; text-indent:0;}
	.test td.lastTd {border: none;}
	.test td:before {position: absolute; top: 0px; left: 0px; width: 30%; padding-right: 10px; white-space: nowrap; text-align:center; font-weight: bold; text-indent:0;}
	.test td:before {content: attr(data-title);}
}
/* Fin Les tableaux */

/* Formulaire test */
.pform {border: 1px solid #FECE2E; padding: 10px}
.pform input[type="radio"]{margin-left: 20px}
.question{font-size:1.1em; padding-bottom:5px;}

/* Autres */
.bleu {color: blue;}
.vert {color: green;}
.orange {color: orange;}
.rouge {color: red;}