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


/*font*/

@font-face {
    font-family: "Le Havre2";
    src: url('fonts/LeHavre.ttf');
}

/*@font-face {
    font-family: "Maiandra GD";
    font-style: italic;
    src: url('MaSuperFonte-Italic.ttf');
}
@font-face {
    font-family: "Maiandra GD";
    font-weight: bold;
    src: url('MaSuperFonte-Bold.ttf');
}*/

:root{
    --emph1: #424487; /*bleu*/
    --emph2: #ffa365; /*orange*/
} /* variables*/


/*mise en forme*/

html {
	height:95%;
}

body {
/*
	background-color:#F4CD8A;
	background-image: url("motifs/fond2_small.jpg");
	background-repeat: repeat;
	font-family: "Maiandra GD2", "Myriad Pro", Arial, sans-serif;
	font-size: 20px;
*/
	font-family: muli, Arial, Helvetica, sans-serif;
	font-size: 1em;
	height:100%;
	margin:0;
	padding:0;
}

h1 {
	font-family: "Le Havre2", "Maiandra GD2", "Myriad Pro", Arial, sans-serif;
	font-variant:small-caps;
	color: white; /*#641f32;*/
	background-color: var(--emph1);
	font-size:1.4em;
	text-align:center;
	margin-bottom:30px;
	margin-top:50px;
}

h2 {

	font-variant:small-caps;
	font-size:125%;
	margin-top:50px;
}

em {
	font-style:italic;
	text-decoration:underline;
}

a {
	border:0px;
	color:var(--emph2);
	text-decoration: none;
}



/*

.horaires {
	font-style:italic;
	font-size:20px;
}

.ages {
	font-size:18px;
}
*/

/*

small {
	font-size:80px;
	text-align:right;
}


small a {
	color:#111;
	text-decoration:none;
}
*/



/* ---------------------------  header  ----------------------- */

#header{
	z-index: 1;	
    top: 0;
    left: 0;
    width: 100%;
    background-color: white; /*#d8d8d8;*/
/*    height: 150px;    */
    font-family: "Le Havre2", "Maiandra GD2", "Myriad Pro", Arial, sans-serif;
    font-variant:small-caps;
    color: var(--emph1);
    font-size:1.15em;
/*    text-shadow: -1px 0 1px white, 0 1px 1px white, 1px 0  1px white, 0 -1px 1px white;*/
	box-shadow: 0 5px 5px #bbbbbb;
}
#header_content
{
	/*max-width: 1100px;*/
	margin: auto;
	padding: 0px 10px 0px 0;
	height: 100%;
	display: flex;
	justify-content: space-between;	
	vertical-align: middle;
}
header #logo {
	width: 500px;
	max-width: 50%;
	background-size: auto 100%;
	background-position-x: right;
	background-repeat: no-repeat;
	clip-path: polygon(0% 0, 0% 100%, 100% 100%, 80% 0%);
	display: flex;
	align-items: flex-end;
    text-shadow: -2px 0 4px #000, 0 2px 4px #000, 2px 0  4px #000, 0 -2px 4px #000;
	padding: 10px 30px 15px 0;
	background-color: black;
}

header #logo img{
	float: left;
	margin-right: 10px;
	height: 130px;
}
header h1   { 
	text-align: left;
	margin:0;
	text-decoration: none;
	color: white; 
	background-color: transparent;
}

nav
{
	align-self: end;
	flex-grow: 1;
	display: flex;
	align-items: center;
}

header #navbar
{
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	flex-grow: 1;
	justify-content: space-evenly;
	padding-left: 5px;
/*	padding-top: 5px;
	height: 50px; */
	margin:0.0em;
}
header #navbar a
{
	color: var(--emph1);
/*	text-shadow: -1px 0 1px white, 0 1px 1px white, 1px 0  1px white, 0 -1px 1px white;*/
/*	padding: 0 0.5em;*/
	margin-bottom: 15px;
	background-color: white;
}
header #navbar > li
{
	padding: 0 0.5em;
	position: relative;

}

/*nav > ul > li > a {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}*/
.menu-deroulant > a:after{
  content: '❯';
  font-size: 15px;
  margin-left: 7px;
  display: inline-block;
	transform: rotate(90deg);
}
.sous-menu {
	display: none;
	position: absolute;
	z-index: 1000;
	box-shadow: 0px 0px 5px #BBB;
	padding: 0 ;
	border-radius: 10px 10px 10px 10px;
	border-style: solid;
	border-width: 3px;
	border-color: #FFF;
	background-color: #FFF;
/*  margin-top: 20px;
  width: 100%;
  overflow: hidden;
  max-height: 0;*/
}
/*.sous-menu > li > a {
  height: 50px;
  padding-left: 20px;
  width: 100%;
  align-items: center;
  display: flex;
}*/
#navbar li:hover .sous-menu {
  display: block;
}

.sous-menu li{
	list-style: none;
	padding: 5px;
	background-color: #FFF;
	border-bottom: 1px solid #CCC; 
}

.sous-menu li:last-child{
	border-bottom: 0px solid #CCC; 
}

/*
.sous-menu a{
	margin: 10px;
}
*/

/*.sous-menu a:hover{
	margin: 10px;
	background-color: #DDD;
}*/

header .social a
{
	padding: 0 0.05em;
}
header .social img:hover
{
	transform:scale(1.1);
}
header .social 
{
	flex-shrink: 0;
}

header #navbar a.on_page{
	margin-top: 0px;
	background-color: var(--emph1);
	color: white;
}
header #navbar a:hover{
	margin-top: 0px;
	color: var(--emph2);
}
header #navbar a:hover.on_page{
	margin-top: 0px;
	color: white;
}
header nav  img
{
	height: 23px;
	width: 23px;
}

/* ---------------------------  page layout  ----------------------- */

.flexbox
{
	display: flex;
}

main{
    max-width: 1000px;
    margin: auto;
/*    margin-top:180px;*/
	text-align: center;
	padding: 0 10px;
}

	
footer{
	box-shadow: 0 -5px 5px #bbbbbb;
	text-align: center;
	margin-top: 25px;
	padding: 5px;
}



.video-container {
	position: relative;
	width:100%;
    max-width: 600px;
	margin: auto;
	overflow: hidden;
}
.video-container::after {
  display: block;
  content: "";
  padding-top: 56.25%;
}
.video-container iframe{ 
	position: absolute; 
	top: 0; 
	left: 0; 
	width: 100%; 
	height: 100%; 
}



/*carousel page index*/
#carousel {
    position: relative;
	width:100%;
    max-width: 1000px;
    margin: auto;
	padding: 1.5em 0;
	overflow: hidden;
}

#carousel-container {
	display: flex;
    align-items: center;
	gap: 10px;
	width: 1150%;
	transition: transform 0.3s;
}

.carousel-item {
	height: 210px;
}

#carousel #prev,
#carousel #next {
	cursor: pointer;
	transition: 0.6s ease;
	position: absolute;
	color: white;
	font-weight: bold;
	font-size: 22px;
	padding: 2px 7px;
	top: 45%;
	background-color: rgba(255,255,1255,0.3);
}

#carousel #prev {
    left: 0;
    text-shadow: -1px 0 4px #000;
}

#carousel #next {
    right: 0;
    text-shadow: 1px 0 4px #000;
}

#carousel:hover #prev,
#carousel:hover #next {
     background-color: rgba(255,255,1255,0.5);
}





/*galeries photos*/
#one_thumb img, .thumb-img {
  box-shadow: 0 0 2px 1px rgba(0, 0, 0, .15) !important;
  border-color: #FFFFFF !important;
  border-width: 3px !important;
border-style: solid;
}


div#photos {
	display: flex;
	flex-direction: row;
	justify-content: center;
	flex-wrap: wrap;
}

#one_thumb img{
	max-width: 130px;
	max-height: 100px;
}

#one_thumb{
	width: 150px;
	height: 155px;
	padding-top: 5px;
}


/*

div#photos #one_thumb img+p
{
	position: absolute;
	top:100px;
	text-align: center;
	width:140px;
	margin-left: 5px;
	margin-bottom: 5px;
}
*/

div#photos #one_thumb p
{
	margin: 5px;
}

div#photos #one_thumb:hover{
	background-color:rgba(0,0,0,0.1);
}



#stages p {
	text-align: left;
	margin: 10px 0px 0px 0px;
}

#stages #one_thumb
{
	height: auto;
}

#stages{
	display: flex;
	border-bottom: solid 1px #CCC;
	padding: 10px 0;
	vertical-align: top;
}
.titre_stage {
	/*font-family: "Le Havre2", "Maiandra GD2", "Myriad Pro", Arial, sans-serif;
	font-variant:small-caps;*/
	color: white; /*#641f32;*/
	background-color: var(--emph1);
	padding: 3px;
	/*font-size:1.4em;
	text-align:center;
	margin-bottom:30px;
	margin-top:50px;*/
}






#bureau{
	
}
#bureau p{
	display: inline-block;
	vertical-align: top;
	width: 40%;
	text-align: right;
	margin-right: 10px;
}
#bureau p+p{
	text-align: left;
	width: 50%;
}



#tarifs{
	text-align: left;
	border-collapse: collapse; 
	margin: auto
}

#tarifs tr{
	border-bottom: 1px solid black;
}
#tarifs td{
	padding: 8px
}




main ul {
	text-align:left;
}









/*formulaires*/

form {
	margin:auto;
	width:80%;
	text-align:left;
	padding-bottom:10px;
}	

label {
	display:block;
	margin:20px 0px 0px;
}

input, textarea {
	border:1px solid #000;
	background-color:#f9f5f6;
	padding:2px;
	font-size:95%;
	max-width: 90%;
}

/*#news input.submit {
	position:relative;
	left:10px;
	bottom:10px;
}*/

textarea {
	width:98%;
}

input.submit {
	background-color:#f2edee;
	width:150px;
/*
	font-family:"Maiandra GD", "Myriad Pro", Arial, sans-serif;
	font-size:100%;
*/
	padding:0px;
}

input.submit:hover {
	cursor:pointer;
	background-color:#CCC;
}

.auteur {
	font-size:100%;
}




/*
@media all and (max-device-width: 480px), all and (max-width: 700px)
{
header #navbar
{
	flex-wrap: wrap;
}
header #logo{
	width: 80px;
	padding: 5px 15px 7px 0;
}

}
*/


@media all and (max-width: 980px)
{

header h1
{
font-size: 1.2em;
}
header #logo img
{
height:90px;
}
	
}

@media all and (max-device-width: 480px), all and (max-width: 860px)
{
	header
	{
		position: fixed;
	}
	header #logo img
	{
	height:55px;
	font-size: 1em;
	}

	header h1
	{
	/*display: none;*/
	font-size: 1em;
	}
	h1 {
		font-size: 1.2em;
	}
	header #logo{
		padding: 5px 15px 7px 0;
	}
	main
	{
		margin-top: 85px;
	}
	.carousel-item {
		height: 120px;
	}
	#carousel-container {
		width: 1550%;
	}
}



.fullnavbar a.icon{
	display: none;
	color: var(--emph2);
}
/* version mobile, menu enroulé*/
@media all and (max-device-width: 480px), all and (max-width: 700px)
{
	.fullnavbar a.icon {
    	display: block;
  	}
	.fullnavbar li:not(:last-child) {display: none;}
/*	.fullnavbar.responsive {position: relative;}*/
	.responsive li {display: block;		border-bottom: 1px solid #CCC; 
}
	.responsive .social a {display: inline;}
/*	.responsive .social  {display: block;}*/
	.responsive .menu-deroulant > a{
	  display: none;
	}
/*
.sous-menu {
	display: none;
	position: absolute;
	z-index: 1000;
	box-shadow: 0px 0px 5px #BBB;
	padding: 0 ;
	border-radius: 10px 10px 10px 10px;
	border-style: solid;
	border-width: 3px;
	border-color: #FFF;
	background-color: #FFF;

}
*/

	.sous-menu li{
		padding: 0px;
		/*border: 0px solid #CCC; */
	}
	.sous-menu {
		display: block;
		position: static;
		box-shadow: 0px 0px 0px #FFF;
	}
	header .social 
	{
		order:-1;
	}

	header #navbar.responsive .icon {
		position: absolute;
		right: 10px;
		top: 0;
	}
	header #navbar.responsive {
		flex-direction: column;
		margin-right: 40px;
	}

	header #logo {
		max-width: 70%;
	}
	header #navbar li img
	{
		height: 20px;
		width: 20px;
	}
	/*change size of thumb picture*/
/*
	div#photos #one_thumb{
	width: 170px;
	height: 175px;
}

div#photos #one_thumb img+p
{
	top:97px;
	text-align: center;
	width:160px;
}
div#photos img{
	max-width: 150px;
	max-height: 110px;

}
*/
}