/* Votre Style */
@font-face { 
	font-family: 'Lucida Handwriting Italic';
	src: url('../divers/lucida_handwriting_italic.eot');
	src: url('../divers/lucida_handwriting_italic.eot?#iefix') format('embedded-opentype'),
 		 url('../divers/lucida_handwriting_italic.woff') format('woff'), 
 		 url('../divers/lucida_handwriting_italic.ttf') format('truetype'), 
 		 url('../divers/lucida_handwriting_italic.svg') format('svg'); 

font-weight: normal; 
font-style: normal;
}
@font-face {
    font-family: 'open_sanscondensed_light';
    src: url('../divers/OpenSans-CondLight-webfont.eot');
    src: url('../divers/OpenSans-CondLight-webfont.eot?#iefix') format('embedded-opentype'),
         url('../divers/OpenSans-CondLight-webfont.woff') format('woff'),
         url('../divers/OpenSans-CondLight-webfont.ttf') format('truetype'),
         url('../divers/OpenSans-CondLight-webfont.svg#open_sanscondensed_light') format('svg');
font-weight: normal;
font-style: normal;
}

header, #main, footer {
	position: relative;
	}
header {
	z-index:1;
	}	
#main {
	z-index:0;
	}
h1 {
	font-family: "Lucida Handwriting Italic", arial, helvetica, sans serif;
	color:rgb(193,98,112)
	}
	
header h1 {
	font-size: 4em; 
    color: rgb(175, 166, 162);
    font-weight: normal;
	margin-bottom:-20px;
	padding: .5em 0 0;
	line-height: 1.2em;
	text-align: center;
	}
header h1 span {
	font-size:.5em; 
	text-indent:5em; 
	background-color:rgb(175, 166, 162);
	padding:5px 25px;
	color:rgb(146, 45, 45);
	}	
.gauche h1 {
	font-family: "open_sanscondensed_light", arial, helvetica, sans serif;
	}	
.gauche ul{
	color:rgb(193, 98, 112);
	font-size:.9em;
	line-height:1.3em;
	}	
.gauche a{
	color:#555;
	text-decoration:none;
	}	
.gauche a:hover{
	color:rgb(193, 98, 112);
	}	
.droite p, .content p, .content li {
	font-family: "open_sanscondensed_light", arial, helvetica, sans serif;
	color:rgb(193,98,112);
	font-size:1.2em;
	line-height:1.3em;
	}
/*-------plus d'info sur http://css3.bradshawenterprises.com/cfimg/-----*/
/*@-webkit-keyframes diapo {
 0% {
   opacity:1;
 }
 17% {
   opacity:1;
 }
 25% {
   opacity:0;
 }
 92% {
   opacity:0;
 }
 100% {
   opacity:1;
 }
}

@-moz-keyframes diapo {
 0% {
   opacity:1;
 }
 17% {
   opacity:1;
 }
 25% {
   opacity:0;
 }
 92% {
   opacity:0;
 }
 100% {
   opacity:1;
 }
}

@-o-keyframes diapo {
 0% {
   opacity:1;
 }
 17% {
   opacity:1;
 }
 25% {
   opacity:0;
 }
 92% {
   opacity:0;
 }
 100% {
   opacity:1;
 }
}

@keyframes diapo {
 0% {
   opacity:1;
 }
 17% {
   opacity:1;
 }
 25% {
   opacity:0;
 }
 92% {
   opacity:0;
 }
 100% {
   opacity:1;
 }
}*/
#actus {
  position:relative;
  height:auto; /*319px;*/
  /*max-width:520px;*/
  width:100%;
  margin:0 auto;
}
.diaporama {
  position:relative;
  height:500px;
  width:640px;
  overflow: hidden;
}
.diaporama img {
  position:absolute;
  left:0;
  height : 100%;
	animation-name: fade-in-out;
	animation-duration: 26s;
	animation-timing-function: ease-in-out;
	animation-delay: 0s;
	animation-iteration-count: infinite;
	animation-direction: normal;
	animation-play-state: running;
  opacity: 0;
}
.diaporama img:nth-child(13) {
  animation-delay: 0ms;
}
.diaporama img:nth-child(12) {
  animation-delay: 2s;
}
.diaporama img:nth-child(11) {
  animation-delay: 4s;
}
.diaporama img:nth-child(4) {
  animation-delay: 6s;
}
.diaporama img:nth-child(5) {
  animation-delay: 8s;
}
.diaporama img:nth-child(6) {
  animation-delay: 10s;
}
.diaporama img:nth-child(7) {
  animation-delay: 12s;
}
.diaporama img:nth-child(8) {
   animation-delay: 14s
}   
.diaporama img:nth-child(9) {
   animation-delay: 16s;
}
.diaporama img:nth-child(10) {
   animation-delay: 18s;
}
.diaporama img:nth-child(1) {
   animation-delay: 20s;
}
.diaporama img:nth-child(2) {
   animation-delay: 22s;
}
.diaporama img:nth-child(3) {
   animation-delay: 24s;
}

@keyframes fade-in-out {
  0%, 100% {
    opacity: 0;
  }
  6.73% {
    opacity: 1;
  }
  7.69% {
    opacity: 1;
  }
  14.42% {
    opacity: 0;
  }
}



footer {
	clear:both;
	}
ul.navprincipale {
	display: inline-block;
	text-align: center;
	padding: 0 auto;
	margin: 0;
	height: 3em;
	width: 100%;
	background-color: rgb(207,177,130);
	}
.navprincipale li{
	display: inline;
	list-style:none;
	float:left;
	vertical-align:middle;
	margin-top:5px;
	border-right: 3px solid rgb(146, 45, 45);	
	}
.navprincipale li:last-child {
	border-right: none	
	}

.navprincipale li a{
	font-family: "open_sanscondensed_light", arial, helvetica, sans serif;
	list-style:none;
	text-decoration:none;
	height: 2.5em;
	color:#fff;
	font-size:1.6em;
	text-transform:uppercase;
	padding:5px 1em;
	}
.navprincipale li a:hover{
	color:#555;
	background-color: rgba(168, 93, 76, .5)
	}
	
ul.navsecondaire {
	display: inline-block;
	height: 2em;
	padding:0;
	margin:0;
	width: 100%;
	}
.navsecondaire li{
	display: inline;
	list-style:none;
	height: 1.5em;
	float:right;
	}
.navsecondaire li a{
	font-family: "open_sanscondensed_light", arial, helvetica, sans serif;
	list-style:none;
	text-decoration:none;
	color:rgb(146, 130, 124);
	font-size:1.2em;
	text-transform:lowercase;
	padding:0 15px 5px;
	}
.navsecondaire li a:hover{
	color:#fff;
	background-color: rgba(168, 93, 76, .5)
	}
footer p{
	font-family: "open_sanscondensed_light", arial, helvetica, sans serif;
	color:rgb(146, 130, 124);
	font-size:1em;
	padding:0 15px 5px;
	}
footer img {
	margin-top:2em;
	border:2px solid transparent;
	}

/* --- Bouton hamburger : caché par défaut sur desktop --- */
.hamburger-btn {
	display: none;
}

/* ========================================
   RESPONSIVE MOBILE (max-width: 768px)
   ======================================== */
@media screen and (max-width: 768px) {

	/* --- Box-sizing global pour éviter les débordements --- */
	*, *::before, *::after {
		box-sizing: border-box;
	}
	html, body {
		max-width: 100%;
		overflow-x: hidden;
	}

	/* --- Bandeau d'avertissement --- */
	body::before {
		content: "Ce site est conçu pour être consulté sur ordinateur. L'affichage sur mobile peut être altéré.";
		display: block;
		background-color: #d32f2f;
		color: #fff;
		text-align: center;
		padding: 10px 15px;
		font-size: 13px;
		font-weight: bold;
		font-family: Arial, sans-serif;
		line-height: 1.3;
		position: relative;
		z-index: 9999;
	}

	/* --- Bouton hamburger --- */
	.hamburger-btn {
		display: block;
		width: 100%;
		padding: 12px 15px;
		background-color: rgb(207,177,130);
		color: rgb(146, 45, 45);
		border: none;
		font-family: "open_sanscondensed_light", Arial, sans-serif;
		font-size: 18px;
		font-weight: bold;
		text-transform: uppercase;
		cursor: pointer;
		text-align: left;
		position: sticky;
		top: 0;
		z-index: 9998;
		box-shadow: 0 2px 4px rgba(0,0,0,0.2);
	}
	.hamburger-icon {
		display: inline-block;
		width: 20px;
		height: 3px;
		background-color: rgb(146, 45, 45);
		position: relative;
		vertical-align: middle;
		margin-right: 8px;
	}
	.hamburger-icon::before,
	.hamburger-icon::after {
		content: "";
		display: block;
		width: 20px;
		height: 3px;
		background-color: rgb(146, 45, 45);
		position: absolute;
		left: 0;
	}
	.hamburger-icon::before { top: -7px; }
	.hamburger-icon::after { top: 7px; }
	.hamburger-icon.open {
		background-color: transparent;
	}
	.hamburger-icon.open::before {
		top: 0;
		transform: rotate(45deg);
	}
	.hamburger-icon.open::after {
		top: 0;
		transform: rotate(-45deg);
	}

	/* --- Images : forcer max-width --- */
	img {
		max-width: 100%;
		height: auto;
	}

	/* --- Titre principal --- */
	header#header {
		width: 100%;
		float: none;
	}
	header h1 {
		font-size: 1.6em;
		line-height: 1.15em;
		padding: .3em 10px 0;
		margin-bottom: 0;
	}
	header h1 span {
		font-size: .55em;
		padding: 4px 12px;
	}

	/* --- Layout principal : colonne unique --- */
	#main.row {
		display: block;
	}
	.col {
		display: block;
		width: 100%;
		padding: 0;
	}

	/* --- Navigation gauche : masquée par défaut --- */
	.aside.gauche {
		display: none !important;
		width: 100%;
		padding: 0 10px;
	}
	body.menu-open .aside.gauche {
		display: block !important;
	}
	body.menu-open .aside.gauche h1 {
		font-size: 1.2em;
		margin: 10px 0 5px;
	}
	body.menu-open .aside.gauche ul {
		margin-bottom: 10px;
	}
	body.menu-open .aside.gauche li {
		padding: 8px 10px;
	}
	body.menu-open .aside.gauche a {
		font-size: 1em;
	}

	/* --- Diaporama : responsive --- */
	.diaporama {
		display: block !important;
		width: 100% !important;
		height: 0;
		padding-bottom: 78%;
		overflow: hidden;
		position: relative;
	}
	.diaporama img {
		width: 100%;
		height: auto;
	}

	/* --- Colonne droite (Bienvenue) --- */
	.aside.droite {
		width: 100%;
		padding: 10px 15px;
	}
	.droite p {
		font-size: 1em;
		line-height: 1.4em;
		margin-right: 0;
	}

	/* --- Footer --- */
	footer#footer {
		width: 100%;
	}
	ul.navprincipale {
		display: flex;
		flex-direction: column;
		height: auto;
	}
	.navprincipale li {
		float: none;
		border-right: none;
		border-bottom: 1px solid rgb(146, 45, 45);
	}
	.navprincipale li a {
		font-size: 1.1em;
		padding: 10px 15px;
		display: block;
	}
	ul.navsecondaire {
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		height: auto;
	}
	.navsecondaire li {
		float: none;
	}
	.navsecondaire li a {
		font-size: 1em;
		padding: 5px 10px;
	}
	footer img {
		max-width: 100%;
		display: block;
		margin: 5px auto;
	}
	footer p {
		font-size: 0.8em;
		padding: 5px 10px;
	}
	footer .w70 {
		width: 100%;
	}
}

/* ========================================
   RESPONSIVE TABLETTE (max-width: 1024px)
   ======================================== */
@media screen and (min-width: 769px) and (max-width: 1024px) {
	header#header {
		width: 100%;
	}
	header h1 {
		font-size: 3em;
	}
	img {
		max-width: 100%;
		height: auto;
	}
	.diaporama {
		width: 100%;
		max-width: 640px;
	}
	footer img {
		max-width: 100%;
	}
}