@charset "utf-8";
/* CSS Document */

html, body {   height: 100%; }
* { margin:0; padding:0; }
body { background-color:#f8f5eb; font:Arial, Helvetica, sans-serif; }
p { font-family:Arial, Helvetica, sans-serif; font-size:13px; color:#333; text-align:justify; line-height:21px; padding:20px 25px 15px 25px; }
h1 { font-size:23px; color:#bc4a33; text-align:center; font:Arial, Helvetica, sans-serif; font-style:italic; margin:6px auto;}
h2 { font-size:21px; color:#125c65; margin:0; text-align:center; font:Arial, Helvetica, sans-serif;}
h2.h2-acc { font-family:Arial, Helvetica, sans-serif; color:#a7361f; font-style:italic; margin:0 0 5px 0; font-size:18px; font-weight:bold; text-align:center; margin:20px 0 5px 0; }
h2.h2-acc a { font-family:Arial, Helvetica, sans-serif; color:#125c65; font-style:italic; font-weight:200; text-decoration:none; }
h2.h2-acc a:hover { color:#333; }
a,aftr { font-family:Arial, Helvetica, sans-serif; color:#125c65; font-style:italic; font-size:14px; line-height:20px; font-weight:200; text-decoration:none; }
#marge-hdr { height:35px; }
#pat, #conteneur-galerie { --s: 200px; /* control the size */
  
  --_g: #dc9d37 25%,#fed450 0 50%,#0000 0;
  --_l1: #fff 0 1px,#0000 0 calc(25% - 1px),#fff 0 25%;
  --_l2: #fff 0 1px,#0000 0 calc(50% - 1px),#fff 0 50%;
  background:
    repeating-linear-gradient( 45deg,var(--_l1)),
    repeating-linear-gradient(-45deg,var(--_l1)),
    repeating-linear-gradient(  0deg,var(--_l2)),
    repeating-linear-gradient( 90deg,var(--_l2)),
    conic-gradient(from 135deg at 25% 75%,var(--_g)),
    conic-gradient(from 225deg at 25% 25%,var(--_g)),
    conic-gradient(from  45deg at 75% 75%,var(--_g)),
    conic-gradient(from -45deg at 75% 25%,var(--_g)),
    repeating-conic-gradient(#125c65 0 45deg,#bc4a33 0 90deg);  
  background-size: var(--s) var(--s); }
#pat { background-position: 300px 0px; padding:50px 0; }
#hdr-nav { width:100%; max-width:980px;  font-size:17px; margin:20px auto; font-weight:bold; }
#hdr-nav ul { text-align:center; width:100%;  }
#hdr-nav ul li{ display:inline-block; margin:0 5px; line-height:40px; }
#hdr-nav ul li a { text-decoration:none; padding:10px 0; color:#767676; }
#hdr-nav ul li a:hover { color:#900; }
#hdr-bg { background-image:url(../images/header3.jpg); background-position:center center; max-width:980px; height:315px; margin:20px auto 20px auto; border:solid 5px #dc9d37;}
#hdr-titre { position:fixed; background-color:#f8f5eb; background-color: rgba(248, 245, 235, .9); width:100%; z-index:50; }
#conteneur { width:100%; max-width:980px; padding:20px 0; margin:20px auto 0 auto; }
#gauche { min-height:400px; width:52%; float:left; }
#sous-gauche {  width:96%; overflow:hidden; border-radius: 14px;  margin:0 0 0 4%; }
#gauche-cont { background-color:#fff; width:98%; margin:0 0 0 0; border-radius:14px; border:solid 3px #dc9d37; margin:0 0 30px 0; overflow:hidden;}
.img-acc { margin:0 5% 17px 5%; }
#droite { width:40%; float:right; margin:0 0 40px 0; }
#sous-droite { width:96%; overflow:hidden; border-radius: 14px; border:solid 3px #dc9d37; background-color:#FFF; text-align:center; }
p.contact { padding-top:10px; font-size:14px; color:#125c65;; text-align:center; line-height:20px; font-weight:bold; }
#ftr { text-align:center; clear:both; padding:10px 0; }
#conteneur-galerie {  margin:60px auto 0 auto; max-width:980px; border-radius:14px; border:solid 3px #dc9d37; }
#transpa-galerie { background-color:#f8f5eb; background-color:rgba(248, 245, 233, 0); }
.bloc-galerie { padding:25px 0 20px 4%; margin:0 auto; max-width:980px; }
#cases-img { padding:0 0 20px 4%; width:90%; margin:0 auto 0 2%; }
.img-galerie { width:12%; float:left; border-bottom:3px solid #fff; border-top:3px solid #fff; }
.img-cases { width:30%; margin:0 1%; float:left; border-bottom:3px solid #fff; border-top:3px solid #fff; }
#num { font-weight:400; font-size:18px; color:#bc4a33; font-style:italic; }
p.cntr { text-align:center; }
.clear { clear:both; }

@media screen and (max-width: 1000px) {
	#hdr-bg {border-left:none; border-right:none; }
	#conteneur-galerie {  width:92%; }
}

@media screen and (max-width: 780px) {
	#conteneur { margin:5px auto 0 auto; }
	#gauche { float:none; width:80%; margin:0 auto; }
	#sous-gauche { margin:0; }
	#droite { float:none; width:80%; margin:20px auto 0 auto; }
	.img-galerie { width:24%; margin:10px 0; }
	#conteneur-galerie { border-radius:0; border-left:none; border-right:none; width:100%; }
	.bloc-galerie { padding:45px 0 40px 4%; }
	#ftr { padding:40px 0; }
	#pat { padding:35px 0; }
}

@media screen and (max-width: 580px) {
	#gauche, #droite { width:90%; }	
	h1 { font-size:19px; }
}