@charset "utf-8";
/* CSS Document 
font du logo : Marmelad
turquoise : #0fc5be
gris : #a9aead
*/

/* FONTS */

/* titres et texte */
@import url('https://fonts.googleapis.com/css2?family=Arsenal:ital,wght@0,400;0,700;1,400;1,700&display=swap');
/* lettrine */
@import url('https://fonts.googleapis.com/css2?family=Luxurious+Script&display=swap');
/* texte alternatif */
 @import url('https://fonts.googleapis.com/css2?family=Lato:wght@300;400;700&display=swap');
 
 
/************ MISE EN PAGE *************/
body {margin:0; font-family: "Arsenal", sans-serif; background:#efefef;}
header, nav, footer, figure, section, article { display:block; }

#mainpage { width:100%; max-width:1190px; margin:5px auto; background:#FFF; padding-bottom:30px; }
article { width:75%; margin:0 auto; padding:20px 0; }
article.index, article.search { width:95%; overflow:hidden; }

.sep {float:none; font-size:0px; height:0px; line-height:0px; margin:0; padding:0; clear:both;}
hr {height: 1px; margin: 20px 0; padding: 0; color: #DDD; background: #DDD; border: 0;}
a { transition: all .3s ease; }
a:hover { color:#3e428b; }

/******** HEADER *******/
header { width:100%; height:185px; background:#FFF; overflow:hidden; box-shadow: 0 2px 8px #CCC; }
header .logo {height:75px; text-align:center; padding-top:10px; margin:0; }
header .logo img { width:220px;}
header .baseline { text-align:center; color:#777; height:35px; letter-spacing:2px; font-size:13px; font-family: 'Lato', sans-serif; }
header .loupe A { position:absolute; right:60px; top:45px; background:url(images/icones/search.png) no-repeat; width:32px; height:32px; }
.responsive_icon, nav .iconX, .instanav { display:none; }
 
/* navigation */
header nav { width:100%; margin:0 auto 0 auto; padding:20px 0 10px 0; overflow:hidden; text-align:center; border-top:1px solid #DDD; }
header nav A { text-decoration:none; text-transform:uppercase; margin:0 15px; padding-bottom:5px; font-size:17px; color:#555; border-bottom:1px solid #FFF; }
header nav A:hover { border-bottom:1px solid #0fc5be; }
header nav span.navlink::after { content:'\25CF'; color:#0fc5be; }
header nav span.navlink:last-of-type::after { content:'';}
/* header small */
#decalFixedHeader { height:175px; }
.smaller { height:90px!important; position:fixed; z-index:900; box-shadow: 0 10px 5px -9px #bbb; top:-100px; transition:transform 0.8s; transform:translateY(100%); border-top:none; }
.smaller .baseline { display:none; }
.smaller .logo {height:40px; text-align:center; margin-bottom:10px; }
.smaller .logo img { width:150px; }
.smaller nav { padding:0; border:none; }
.smaller nav A { font-size:13px; padding-bottom:0; }
.smaller .loupe A { top:35px; }

/******** ARTICLES *******/

/*index*/
article.index h1 { font-size:35px; line-height: 35px; color:#555; font-weight:normal; text-transform: uppercase; border-bottom: 1px solid #0fc5be; padding-bottom: 20px; display: block; width: fit-content; }
article.index P {text-align:center; margin:30px auto; width:80%; font-size:16px;}
.index .each { margin:5px 5px 20px 10px; }
.search .each { margin:5px 5px 30px 10px; }
.each span.date { display:block; width: fit-content; text-align:left; margin:5px 15px; font-size:12px; text-transform:uppercase; font-family: 'Lato', sans-serif; color:#888;
border-top: 1px solid #0fc5be; padding-top: 10px; }
.each span.intro { text-align:left; color:#444; font-size:15px; line-height:24px; margin:5px 15px; display:block; }

/*page*/
article span.wait { text-align:center; display:block; color:#FFF; text-transform:uppercase; font-size:20px; background:#C00; border-radius:5px; margin:10px 30px 20px 30px; padding:5px 0; }
article .cat { text-align:center; margin:10px auto; color:#0fc5be; text-transform:uppercase; font-size:20px; font-weight: bold; }
article h1 { text-align:center; margin:20px auto; font-size:35px; width:600px; line-height:50px; color:#333; } 
article h2 { font-size:25px; color:#333; margin:0 0 20px 0; } 
article h3 { font-size:20px; color:#333; margin:-15px 0 0 0; } 
/*article span.liseret { width:100px; background:#0fc5be; height:2px; margin:30px auto; display:block; }*/
article span.liseret {
  width: 150px;
  height: 6px;
  margin: 30px auto;
  display: block;
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 6' preserveAspectRatio='none'><path d='M0 3 Q 12.5 0 25 3 T 50 3 T 75 3 T 100 3' fill='none' stroke='%230fc5be' stroke-width='2'/></svg>") no-repeat center/100% 100%;
}

article P { text-align:justify; font-size:18px; line-height:28px; color:#222; margin:0; }
article P.lettrine:first-letter {font-family: "Luxurious Script", cursive; font-size:50px; padding:0 3px 3px 0; color:#0fc5be; font-weight: normal; }
article P.chapo { text-align:justify; margin:30px auto; width:800px; font-size:18px; line-height: 26px; text-shadow: 0 0 0.3px currentColor;}
.article P IMG.insert {display: inline; margin: 0;}
article UL { font-size:18px; line-height:18px; color:#333; margin:0 20px 10px 20px; padding:0; list-style: none; }
article UL LI { line-height:27px; margin:0; text-align:justify; }
article li::before {content: "\25CF"; color: #0fc5be; font-size:18px; padding-right:5px; }
article .timelec {text-align:center; color:#888; font-size:15px; margin:20px 0 30px 0; display:block; font-family: 'Lato', sans-serif; }
article .timelec::before { content:'\231B'; margin-right:5px;font-family: "Segoe UI Symbol", "Noto Sans Symbols", sans-serif;}

article .photoArticle { margin: 20px auto 30px auto; padding: 0; text-align:center; }
article .photoArticle IMG { box-shadow: 0 0 4px #aaa; border: 4px solid #FFF; }
article .photoArticle .copyright { display:block; text-align:right; margin:10px 50px 0 0; font-size:12px; color:#666; font-family: 'Lato', sans-serif; }
article .photoArticle .copyright A { text-decoration:none; border-bottom:1px dotted #CCC; color:#666; }
article P IMG, article P iframe { margin:10px auto -20px auto; display: block;}
article P A, article li A { color:#333; text-decoration:none; border-bottom:1px dashed #0fc5be; }
article P A:hover { color:#0fc5be; border-bottom:1px dashed #0fc5be; }
article span.pucelink::before { content:'\0000BB'; font-size:14px; color:#3e428b; background:#FFF; border:1px solid #3e428b; border-radius:100%; padding:0 5px; margin-right:10px; }

SPAN.legende { font-size:12px; padding-right:50px; margin-bottom:-40px; font-weight:normal; color:#666;  text-align:right; display:block;  font-family: 'Lato', sans-serif;}
SPAN.source { font-size:12px; margin:0; padding:0; font-weight:normal; font-style:italic; color:#666;  text-align:left; display:block;  font-family: 'Lato', sans-serif;}
SPAN.quote { font-size:26px; line-height:30px; font-style:italic; text-align:left; color:#777; margin: 0 auto -15px auto; padding:0 0 0 10px; width:500px; display:block; border-left:7px solid #0fc5be; }

article.mentions P::before { content:'\25A0'; font-size: 20px; color:#CCC; margin-right:5px; }
article.mentions h2 { margin-top:30px;}

.blocRedac { text-align:center; width:500px; border-top: 1px solid #0fc5be; margin:10px auto 30px auto;  }
.blocRedac P { color:#666; font-size:15px; font-family: 'Lato', sans-serif; }

/* liste : index, recommandations, recherche */
.reco { overflow:hidden; margin-bottom:10px; }
.reco h3, .search h3, .index h3 { border-top:1px solid #0fc5be; border-bottom:1px solid #0fc5be; padding:10px 0; margin:20px; text-align:center; font-size:20px; color:#444; text-transform:uppercase; font-weight:normal; }
.each { float:left; width:355px; height:460px; margin:5px 30px 0 10px; text-align:center; overflow:hidden; }
.each img { width:330px; transition: transform 0.3s ease; }
.each img:hover { transform: rotate(-5deg) ; }
.each span.rub { display:block; text-align:left; padding:10px 0 0 15px; font-size:15px; text-transform:uppercase; color:#0fc5be; }
.each span.titre { display:block; text-align:left; padding:5px 15px; font-size:22px; line-height:28px; }
.each A { color:#000; text-decoration:none;  transition: all .3s ease; }
.each A:hover { color:#0fc5be; text-decoration:none; }

.each.quadri { width:250px; height:auto; margin:5px 10px 5px 30px; }
.each.quadri img { width:250px;}

/* home page */
h3.HP { border:none; color:#0fc5be; width:250px; border-bottom:1px solid #EEE; margin:20px auto; font-size: 24px; }
.each.HP { width:570px; height:500px; margin-right:10px; }
.each.HP img { width:560px; }

/* formulaires */
.formsearch { text-align:center; }
.formsearch input[type=text] {color:#333; width:50%; height:30px; padding:10px; font-size:20px; border:1px solid #000; }
input[type=submit] {color:#FFF; background:#666; border:1px solid #3e428b; padding:10px; font-size:15px; height:52px; text-transform:uppercase; vertical-align:bottom; }
input[type=submit]:hover {cursor:pointer; background:#0fc5be; } 

.formulaire { width:60%; margin:20px auto; border:1px solid #DDD; padding:10px 20px; text-align:left; }
article.index .formulaire P { width:120px; text-align:left; margin:0 0 0 30px; float:left; }
.formulaire LABEL { clear: both; display: block; margin: 10px 0; font-size: 14px; color: #333; }
.formulaire input, .formulaire select, .formulaire textarea { padding:5px; font-size:15px; border: 1px solid #CCC; outline: transparent; }
.formulaire input[type=submit] { margin-top:20px;}
.formulaire input:focus, .formulaire select:focus, .formulaire textarea:focus {border: 1px solid #0fc5be; outline: transparent;}

/* faq */
.faq { border:1px solid #DDD; overflow:hidden; width:80%; margin:20px auto; padding:0 10px; }
.faq A { color:#666; text-decoration:none; font-size: 16px; display:block; margin:10px 0; }
.faq A::before { content:'\25A0'; font-size: 18px; color:#0fc5be; margin-right:5px; vertical-align:bottom; }
.faq .reponse { background:#EEE; padding:10px; margin:10px; font-size:16px; }

/********* PAGINATION ****************/
.pagination { color:#333; font-size:18px; margin:15px 0px 10px 0px; text-align:center; }
.pagination A { border:1px solid #999; background:#888; color:#FFF; text-decoration:none; display:inline; margin:5px; font-weight: normal; font-size:18px; padding:3px 8px; }
.pagination A:HOVER { text-decoration:none; background: #FFF; border: 1px solid #3e428b; color: #3e428b;}
.pagination SPAN.pageactive A, .pagination SPAN.pageactive { color:#FFF;  background:#3e428b; font-weight:bold; font-size:18px; border:1px solid #3e428b; margin:5px; padding:3px 8px; }
.pagetop { text-align:center; margin:20px 0; color:#777; font-size:22px;}

/******** FOOTER *******/
footer { width:100%; background:#333; overflow:hidden; text-align:center; }
footer .content {width:1100px; margin: 0 auto; padding:30px; }
footer .content img { width:150px; }
footer .content img.insta { width:40px; }
.content ul.col { width:275px; height:230px; float:left; padding:0; margin:0 0 20px 0; text-align:left; }
.content ul.col h4 { font-size:17px; font-weight:normal; margin:0 0 15px 0; padding: 0; color:#FFF; }
.content ul.col P { color:#FFF; font-size:16px; line-height:26px; }
.content ul.col LI { display:block; margin:0; padding:0 0 5px 0; color:#EEE; font-size:14px; }
.content ul.col LI A { color:#EEE; text-decoration:none; font-size:14px; font-family: 'Lato', sans-serif;  }
.content ul.col LI A:HOVER { text-decoration:underline; }
footer .copyright { text-align:center; padding:20px; background:#000; color:#FFF; font-size:16px; }


/********** STYLE MOBILE **********/
@media (max-width:640px) { 
	html { width:auto; }
	body, p { word-wrap:break-word; }
	img { width:auto; height:auto; max-width:100%; margin:0; }
	
	.smaller { display:none; }
	header { height:110px; }
	header .loupe A { top:15px; right:10px; }
	.responsive_icon { display:block; position:absolute; left:10px; top:-5px; cursor:pointer; margin:0; padding:0; color:#444; font-size:50px; text-align:center; }
	SPAN.iconX {font-family:Arial, Helvetica, sans-serif; position:relative; display:block; margin: 10px 5px 0 10px; padding:0; width:25px; height:25px; background:#777; cursor:pointer; border-radius:5px; color:#FFF; font-size:25px; text-align:center; }
	.instanav { display:block;}
	header nav {margin:0; padding:0; width:100%; height:0; z-index:300; position:absolute; display:block;}
	.nav.on { height:auto; transition-property: height; transition-duration: 0.5s; background:#FFF; border-bottom:1px solid #CCC; padding-bottom:20px; }
	.nav.on A { display:block; margin-top:10px; }
	
	.each.HP { width:auto; height:auto; margin-bottom:20px; }
	.each.HP img {width: 100%; }
	.each span.titre, .each span.rub { padding:5px; }
	
	article { width:95%;}
	article h1 {width: 95%; font-size:28px; line-height:38px; }
	article.index P {width: 95%;}
	.each, .each.quadri {float:none; width: auto; height:auto; margin: 10px 5px 30px 5px; padding-bottom:5px; border-bottom:1px solid #EEE; }
	.each img, .each.quadri img {width: 100%; }
	
	article P.chapo {width: 100%;}
	article h2 { font-size:20px; line-height:28px;}
	article .photoArticle .copyright {margin: 10px 10px 0 0;}
	span.legende { padding-right:5px;}
	.blocRedac {width: 95%; margin-top:0;}
	
	footer .content {width: auto; padding: 10px 20px; }
	.content ul.col {width: 100%; height: auto; float: none; }
}