/** ====================================================
   FONTS
====================================================== */



/** ====================================================
   GLOBAL RESET
====================================================== */
*, html, body, iframe, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h5, h5, h6, pre, form, label, fieldset, input, p, blockquote, table, th, td, audio, video { margin:0; padding:0; outline:0; -webkit-box-sizing:border-box; -moz-box-sizing:border-box; box-sizing:border-box; }
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section, img { display:block; }
table { border-collapse:collapse; border-spacing:0; }
table td { vertical-align:top; }
iframe, fieldset, img, a img { border:0 none; }
address, caption, cite, code, dfn, th, var { font-style:normal; font-weight:normal; text-align:left; } 
h1, h2, h3, h5, h5, h6 { font-size:100%; -webkit-hyphens: auto; -moz-hyphens: auto; -ms-hyphens: auto; hyphens: auto; }
blockquote:before, blockquote:after, q:before, q:after { content:''; content:none; }
nav ul { list-style:none }
ol, ul, li { list-style:none; }
html>body * a { position:relative; }  /* Gets links displaying over a PNG background */
a { outline:none; } /* Gets rid of Firefox's dotted borders */
input, select { vertical-align:middle; }
ul { margin: 0 0 0 1.5em; padding: 0;}
ul li { list-style-type: circle; list-style-position: outside; }

/* ======================================================
   GENERIQUE
====================================================== */
html { width:100%; }
body { width:100%; font:1em/1.4em arial,helvetica,sans-serif; color:#000; background-color:#fff; text-align:left; }

h1 { /*margin: 0.5em 1em 0.5em 4%;*/ max-width: 950px; font:normal 3em/1.5em arial,helvetica,sans-serif; text-transform: uppercase; color: #aaa; }
h2 { margin:1em 0 0.3em 0; font:normal 2em/1.5em arial,helvetica,sans-serif; text-transform: uppercase; color: #FF9114; }
h3 { margin:1em 0 0.3em 0; font:normal 1.5em/1.4em arial,helvetica,sans-serif; color: #FF9114; }
h4 { margin:1.5em 0 0.5em 0; font:normal 1.3em/1.2em arial,helvetica,sans-serif; color: #FF9114;  }

a { color:#31AABD; font-weight:normal; text-decoration:none; border-bottom: 1px dashed #31AABD; }
a:hover, a:focus { color:#31AABD; font-weight:normal; text-decoration:none; border-bottom: 1px solid #31AABD; }
strong, b { font-weight:normal; font-family:arial,helvetica,sans-serif; }
em, i { font-style:italic; }
u { text-decoration-line: underline; text-decoration-color:#31AABD;}
div{ width: 100%; height: auto; }
p { margin:0.5em 0 1.5em; }
img { width:100%; /*border: 3px solid #FF9114; border-radius: 1em; -webkit-box-shadow: 0 0 15px 0px rgb(0,0,0,0.4); box-shadow: 0 0 15px 0px rgb(0,0,0,0.4); */}
td { padding:2px 4px 2px 4px; font-family:arial,helvetica,sans-serif; font-size:0.8em; }
hr { display:block; margin:1em 0; padding:0; border:none; background-color:#000; color:#000; font-size:1px; height:1px; line-height:1px; }
iframe { width: 100%; height: auto; border: none; }

/* ======================================================
   CLASSES génériques
====================================================== */
.imgToLeft { float:left; margin: 0 0.5em 0.5em 0; width:auto; height:auto; max-width:30%; }
.imgToRightJS { float:right; margin: 0 0 0.5em 0.5em; width:auto; height:auto; max-width:90px; }
.imgToRight { float:right; margin: 0 0 0.5em 0.5em; width:auto; height:auto; max-width:160px; }
.invisible, .hidden { display:none; }
.smaller { font-size:0.8em; }
.caps { text-transform:uppercase; }
.msg, .error-msg { color: red; }
.transparent { zoom: 1; filter: alpha(opacity=90); opacity: 0.9; }
.clearing { clear:both; }
.clear-float { clear:both; }
.clear-fix:after { visibility: hidden; display: block; font-size: 0; content: " "; clear: both; height: 0; }
.clear-fix { zoom:1; } /** IE 5.5/6/7 */

/* Formulaires */
form { margin:1.5em 0; }
form fieldset { margin: 1em auto; }
form legend { margin: 0.5em 0; font-size: 1.3em; color: #31AABD; }
form p { clear:both; margin:0.3em auto; max-width: 680px; }
form label, p.containCheckbox span { display:block; padding:0.3em 0; cursor:pointer; }
p.nolabel span, p.nolabel label { display: none; }
form p.containCheckbox label { display: inline; }
form p.longlabel label { width:auto; }
form p.longlabel-smallfield label { display: inline-block; float:right; width:80%; text-align: left; }
form p.longlabel-smallfield input[type="text"] { width:50px; }
form input[type="text"], form input[type="password"], form textarea, form select { padding:0.2em 0.5em; width:100%; max-width: 500px; font:1.0em/1.5em Arial,Helvetica,sans-serif; color:#31AABD; background-color:#fff; border:1px solid #eee; border-bottom-color:#31AABD; }
form input[type="text"]:focus, form input[type="password"]:focus, form textarea:focus, form select:focus { border-left-color:#31AABD; border-bottom-color:#31AABD; }
form textarea { height:10em; max-width: 680px; }
form input[type="submit"] { margin:1em 0; padding:0.7em 1.5em; font-family:Arial,Helvetica,sans-serif; font-size:1.2em; text-transform:uppercase; background-color:#31AABD; color:#fff; text-decoration:none; border: none; border-radius: 0.5em; -moz-box-shadow:1px 1px 5px 1px #ccc; -webkit-box-shadow:1px 1px 5px 1px #ccc; box-shadow:1px 1px 5px 1px #ccc; cursor:pointer; }
form input[type="submit"]:hover, form input[type="submit"]:focus { color:#fff; background-color:#31AABD; -moz-box-shadow:1px 1px 2px 1px #ccc; -webkit-box-shadow:1px 1px 2px 1px #ccc; box-shadow:1px 1px 2px 1px #ccc; }
.code-image { clear:both; margin:1em 0; }
.code-image label { display:block; float:none; margin-bottom:0.5em; width:80%; }
.code-image img { border:medium none; float:left; margin:0 1em 0 0; width:160px; border-radius:inherit; }
.code-image .form-field { height:50px; width:140px; text-align:center; letter-spacing:0.5em; text-transform:uppercase; }
button { padding:0.5em 0; background-color:transparent; border:none; cursor:pointer; color:#31AABD; font-weight:normal; font:1em/1.5em arial,helvetica,sans-serif; }
button:hover, button:focus { color:#31AABD; }

/* ======================================================
   HEADER
====================================================== */
#header { position: relative; z-index: 3; }
/*#header .wrapper { display: flex; align-items: center; justify-content: space-between; padding: 1em 0 0.5em; }*/
a.logo { display:block; margin:0 auto; width:50%; border-bottom:none; }
a.logo img { width:100%; height: auto; min-width: 180px; border:none;box-shadow:none; /*max-width: 240px; */}
#header .wrapper { padding: 2em 0 1em; }

/* ======================================================
   MAIN, CONTENT
====================================================== */
#main { position:relative; z-index: 2; padding:0 2em;}
.wrapper { position:relative; margin:0 auto; max-width:1280px; text-align:center; }

/* bloc */
.blk { position: relative; text-align:left; margin:0 0 0 0; padding: 2em 4% 2em 4%; border-top:8px dotted #31AABD; /*border-left:1px dashed #31AABD; border-right:1px dashed #31AABD; border-radius: 0.5em 0.5em  0 0; */}
/*.blk { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; flex-direction: column; align-items: flex-start; }*/
.item { margin-bottom: 1em; }

/* contenu */
.content { margin: 0 auto 3em; padding: 0 4%; max-width: 900px; }

/* ======================================================
   FOOTER
====================================================== */
#footer { position:relative; padding: 0 0 1.5em 0; background-color: #31AABD; color: #fff; }
.blk-footer { padding:0 2em; }
.footer { margin: 0; padding:1em 0 0 0; /*border-bottom:1px dashed #FFFFFF; border-left:1px dashed #FFF; border-right:1px dashed #FFF; border-radius:  0 0 0.5em 0.5em; */text-align:center; }
.copyright { display: block; margin:0 auto 1em auto; font-size:0.8em;  }


/* ======================================================
   MENU
====================================================== */
nav { text-align: right; }
#blk-menu { /*position:absolute; right:0; top:185px; */ margin: 1em 0 1em 0; width:100%; background-color: #fff; -moz-box-shadow:0 8px 6px -6px rgba(0,0,0,0.5); -webkit-box-shadow:0 8px 6px -6px rgba(0,0,0,0.5); box-shadow:0 8px 6px -6px rgba(0,0,0,0.5); z-index:11; }
.menu li { display:block; text-transform:uppercase; }
.menu li a { display:block; padding:0.7em 0 0 0; margin:0 0.2em; color:#FF9114; text-decoration:none; text-align:center; border-bottom: 1px dashed #FFF; }
.menu li a:hover, .menu li a:focus, .menu li a.active { color:#31AABD; text-decoration:none; border-bottom: 1px dashed #FFF; }
.menu li a.current { color:#31AABD; }
#menu { font-size: 2.8em; line-height: 1em; font-family: arial,helvetica,sans-serif; }


/**=====================================================
   GALERIE
====================================================== */

.photos { width: 100%; padding-top:1em; }
.photos img { float:left; width:45%; height:45%; margin:0 1% 1% 0; }
/*.photos img:hover { display:block; position:absolute; left:0; top:0; height:300px; width:300px; padding:40px 60px; z-index:1;}*/


/**=====================================================
   ECRANS petits / 2 colonnes
====================================================== */
@media (min-width:640px) {
  body { font-size:0.9em; line-height:1.5em; }
  .blk { flex-direction: row; flex-wrap: wrap; }
  .item { flex-basis: 47%; margin: 0 3% 1em 0; }
  .blk-left { width:50%; float:left; padding: 0 3% 0 4%; }
  .blk-right { width:50%; float:right; padding: 0 4% 0 3%; }
  .photos img { float:left; width:30%; height:30%; margin:0 1% 1% 0; }
  form label { float:left; width: 180px; }
  form p.containCheckbox label { float: none; }
  form p.longlabel label { float: none; }
  form p.longlabel-smallfield label { width:90%; }
  #menu { font-size: 2.5em; }
  #footer .content { flex-direction: row; }
  #footer .content p { margin: 0 4%; flex-basis: 50%; align-self: center; }
}

/**=====================================================
   ECRANS moyens
====================================================== */
@media (min-width:960px) {
	body { font-size:1em; line-height:1.5em; }
	#header .wrapper { display: flex; align-items: center; justify-content: space-between; padding: 1em 0 0.5em; }
  /*h1 { font-size: 2.8em; }*/
  #header { padding: 0; }
  #header .wrapper { padding: 3em 0 2em 1em; }
	a.logo { width:35%; }
  nav { position: relative; width: 74%; }
  #blk-menu { display: block; position: relative; top:0; padding: 0 1.5em 0 0; background-color: transparent; -moz-box-shadow:none; -webkit-box-shadow:none; box-shadow:none; }
  .menu { position:relative; width:auto; }
  #menu { font-size: 2.5em; }
  .menu li { display:inline-block; }
  .menu li a { margin:0.2em 0.2em 0 0.2em; }
  .menu li a:hover, .menu li a:focus, .menu li a.active { border-bottom: 1px dashed #31AABD;  }
  .menu li a.current, .menu li a.current:hover, .menu li a.current:focus, .menu li a.current:active { border-bottom: 1px dashed #31AABD; }
  .team-item { flex-basis: 31%; }
  .photos { width: 100%; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; justify-content: space-between; }
  .photos img { float:left; width:20%; height:20%; margin:0 1% 0 0; }
  /*.imgToRightJS { max-width:110px; }
  .imgToRight { max-width:20%; }*/
}

/**=====================================================
   ECRANS + grands
====================================================== */
@media (min-width:1280px) {
  body { font-size:1.1em; line-height:1.6em; }
	/*a.logo { margin: 0; }*/
  .menu li a { margin:0.2em 0.5em 0 0.5em; }
  .team-item { flex-basis: 23%; }
}