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

/* Déclaration des polices spécifiques*/
@font-face 
{
 font-family: "BoutonMenu";
 src: url("fonts/josefin.ttf") format("truetype");
}

@font-face 
{
 font-family: "TextePage";
 src: url("fonts/carlito.ttf") format("truetype");
}

@font-face 
{
 font-family: "TitreBloc";
 src: url("fonts/josefin-bold.ttf") format("truetype");
}

/* Structure de la page globale */

html, body {
    margin: 0; 
	padding: 0;
}
html
{
	min-width: 320px;
	/*background-image:linear-gradient( 60deg, #A9E2F3, #81BEF7);*/
	/*background-color: #F7F6EA;*/
	background:url(bg_full_2.jpg);
	background-position: center;
	background-repeat: no-repeat;
	background-attachment:fixed;
	background-size: cover;
}


#corps
{

	width: 85%;
	height: 100%;
	margin: auto;
	padding: 0;
	margin-top: 50px;
	display: flex;
	flex-direction: column;
}

/* Barre de menu, pour le desktop et le mobile, avec logo */

nav
{
	position: absolute;
	top:0px;
	right: 0;
	width: 50%;
	min-height: 60px;
	height: auto;
	margin: auto;
	background-color: transparent;

	transition: opacity, box-shadow, 0.5s;
	z-index: 52;
	/*
	display: flex;
	flex-wrap: wrap;
	flex-direction: row;
	justify-content: center;*/
}

nav:hover
{
	/*opacity:0.99;
	box-shadow: rgba(121,121,121,.41) 1px 20px 30px;
	background-image: radial-gradient(ellipse at center, blue, white);
	transition-property: opacity, box-shadow;
	transition-duration: 0.5s;*/
}

table
{
	background: rgba(255,255,255,0.84);
	color: black;
	font-family: arial;
	font-size: 15px;
}

td
{
	border-bottom: solid;
	border-bottom-width: 2px;
	border-bottom-color: rgba(95,95,95,1.00);
}

.menu-mainline
{
	display: flex;
	flex-wrap: no-wrap;
	flex-direction: row;
	justify-content: center;
}
div.menubtn-desktop-only
{
	display: flex;
	flex-direction: column;
	justify-content:flex-start;
	height: 40px;
	background-color: transparent;
	margin:auto;
	border: solid;
	border-color: transparent;
	border-radius: 5px;
	color: white;
	cursor: pointer;
	
	transition: background-color, boder-radius, 0.5s;
	
}
a.menubtn-desktop-only
{
	margin: auto;
	font-weight: bold;
	text-transform: uppercase;
	text-decoration: none;
	font-family: BoutonMenu;
	font-size: 23px;
	letter-spacing: 0.3em;
	color: inherit;
	transition: color, 2s;
}
a.menubtn-desktop-only:hover
{
	color: rgba(6,58,112,1.00)
}
div.minibtn
{
	height: 40px;
	line-height: 40px;
	width: auto;
	font-family: BoutonMenu;
	font-weight: bold;
	font-size: 20px;
	color: azure;
	letter-spacing: 0.1em;
	border-radius: 3px 3px 3px 3px;
	box-shadow: rgba(121,121,121,.22) 1px 2px 2px;
	
	transition: letter-spacing, 0.4s;
}
div.minibtn:hover
{
	font-weight: normal;
	letter-spacing: 0.2em;
}
a.minibtn
{
	text-decoration: none;
	font-family: inherit;
	padding: 4px;
	color: inherit;
	text-transform: uppercase;
}
.bleu
{
	background-color: aqua;
	border:solid;
	border-color: aqua;
	transition: background-color, color, 0.4s;
}
.bleu:hover
{
	color: aqua;
	background-color: transparent;
}
.orange
{
	background-color:orange;
	border:solid;
	border-color: orange;
	transition: background-color, color, 0.4s;
}
.orange:hover
{
	color: orange;
	background-color: transparent;
}
.violet
{
	background-color:purple;
	border:solid;
	border-color: purple;
	transition: background-color, color, 0.4s;
}
.violet:hover
{
	color: purple;
	background-color: transparent;
}
.vert
{
	background-color:rgba(13,229,38,1.00);
	border:solid;
	border-color: rgba(13,229,38,1.00);
	transition: background-color, color, 0.4s;
}
.vert:hover
{
	color: rgba(13,229,38,1.00);
	background-color: transparent;
}

#nav-mobile
{
	display: none;
}

/* Le bas de page */
footer
{
	display: flex;
	flex-wrap: wrap;
	justify-content: space-around;
	background-color: white;
	width:100%;
	margin-top:40px;
	left:0;
	margin-left : 0px;
	margin-right : 0px;
	right:0;
	min-height:50px;
	line-height: 50px;
	border-top-style:solid;
	border-top-color: purple;
	border-top-width: 3px;
	box-shadow: rgba(121,121,121,.52) 1px -5px 5px;
	color: purple;
	font-family: TextePage;
	font-size: 19px;
	text-align: center;
}
footer a{
	color: purple;
	text-decoration: none;
	font-family: TextePage;
	font-size: 19px;
	text-align: center;
}

/* A traiter ... */
div.menubtn:hover
{
	background-color: #8EECF4;
	border-radius: 15px;
	color: white;
}

#logo
{
	height: 400px;
	text-align: center;
	display: flex;
	flex-direction: column;
	/*justify-content: space-around;*/
	justify-content: center;
}

/* Structure de la page en elle-même */
.page
{
	/* le flex*/
	display: flex;
	flex-direction: column;
	justify-content: space-around;
	
	/* rapport aux élts extérieurs */
	width: 85%;
	min-height: 100%;
	margin: auto;
	margin-top: 50px;
	padding: 10vh;
	
	/*le style du "bloc" -- inutile */
	background-color: transparent;
	/*
	box-shadow: rgba(121,121,121,.35) 1px 20px 30px;
	padding: 15px;
	border: solid;
	border-color: #FFFFF2;
	border-radius: 3px;*/
	
	
}

.page h1
{
	display: block;
	font-family: TitreBloc;
	font-size: 45px;
	color:white;
	text-transform: uppercase;
	text-align: center;
	position: relative;
	top: -10vh;
}

.page h2
{
	display: block;
	font-family: BoutonMenu;
	font-size: 27px;
	color: white;
	text-transform: uppercase;
	text-align: left;
	font-weight: normal;
}

.page h3
{
	display: block;
	font-family: BoutonMenu;
	font-size: 27px;
	color: white;
	text-align: center;
	font-weight: bold;
}

.page p
{
	display: block;
	font-family: BoutonMenu;
	font-size: 27px;
	color: white;
	text-align: justify;
}

.page a
{
	display: block;
	color: white;
	text-transform: uppercase;
	text-align: left;
	font-weight: bold;
    text-decoration: none;
    font-family: BoutonMenu;
    font-size: 18px;
    letter-spacing: 0.3em;
	margin-bottom: 3vh;
}

img.preview
{
	width: 450px;
	max-width: 70vw;
	height: auto;
	max-height: 100%;
	margin: auto;
	margin-bottom: 20px;
}

.std-bloc
{
	display: block;
	box-shadow: rgba(121,121,121,.35) 1px 20px 30px;
	padding: 0px;
	min-width: 300px;
	max-width: 350px;
	min-height: 500px;
	max-height: 500px;
	height: auto;
	width: auto;
	border: none;

	border-color: #FFFFF2;
	text-decoration: none;
	color: inherit;
	font-size: 22px;
	text-align: justify;
	border-radius: 3px;
	margin: 10px;
	overflow: hidden;
	
     transition:max-height 0.9s;
}
.std-bloc:hover{
	max-height: 900px;
	z-index: 12;
}

.std-bloc h2
{
	font-family: TitreBloc;
	text-transform:uppercase;
	color: white;
	font-size: 25px;
	margin: 0;
	padding: 15px;
	width: inherit;
	background-color: aqua;
}

.page-bloc
{
	display: block;
	position: relative;
	box-shadow: rgba(121,121,121,.35) 1px 20px 30px;
	padding: 0px;
	min-width: 300px;
	height: auto;
	width: auto;
	border: none;
	/*
	background-color: #F7F6EA;*/
	background-color: #fff;
	border-color: #F7F6EA;
	text-decoration: none;
	color: inherit;
	font-size: 18px;
	text-align: justify;
	border-radius: 3px;
	margin: 10px;
	overflow: hidden;
}
.page-bloc h1
{
	font-family: TitreBloc;
	font-size: 50px;
	/*font-weight: lighter;*/
	color:rgba(18,18,18,1.00);
	text-align: center;
}
.page-bloc h2
{
	font-family: BoutonMenu;
	text-transform: uppercase;
	color: white;
	font-size: 15px;
	line-height: 15px;
	margin: 0;
	padding: 8px;
	width: inherit;
	background-color:rgba(154,154,154,1.00);
}
.page-bloc aside
{
	min-width: 270px;
	max-width: 330px;
	float: right;
	margin:10px;
	margin-left: 20px;
	background-color: purple;
	color: white;
	padding: 8px;
	font-family: TextePage;
	border-radius: 3px;
	box-shadow: rgba(121,121,121,.35) 5px 5px 10px;
	text-align: justify;
}
.page-bloc h3
{
	font-family: TitreBloc;
	text-transform: uppercase;
	text-align: center;
	color: white;
	font-size: 25px;
	letter-spacing: 0.2em;
}
.page-bloc p
{
	font-family: TextePage;
	padding: 19px;
	
}

.bloc-img
{
	width: 350px;
	max-width: 96%;
	margin: auto;
	background-color: gainsboro;

	text-align: center;
	padding-bottom: 10px;
	
	border-radius: 4px;
	font-family: TextePage;
	font-size: 16px;
}
.bloc-img img
{
	width: 80%;
	margin: 10%;
	margin-bottom: 5px;
	
}
p
{
	font-family: TextePage;
	font-weight: lighter;
	font-size: inherit;
	padding: 8px;
}
.vignette
{
	width: 100%;
	height: auto;
	overflow: hidden;
}

/* Anciens éléments */
#lg
{
	display: flex;
	flex-direction: row;
	justify-content: center;
}
.logo
{
	margin: auto;
	margin-top: 5px;
	margin-left: 5px;
	max-width: 100%;
	height: 50px;
	width: auto;
}


.textemenu
{
	font-size: inherit;
}

#bouton-menu-mobile
{
	z-index: 90;
	background-color: white;
	position: fixed;
	top:15px;
	left: 10px;
	color: black;
	height: 30px;
	width: 30px;
}
#bouton-menu-mobile-a
{
	display: block;
	color:rgba(71,71,71,1.00);
	font-size: 30px;
	padding: 0;
}
#menu-mobile
{
	position: fixed;
	top: 0;
	bottom: 0;
	z-index: 100;
	background: white;
	width: 100%;
	height: 100%;
	padding: 0;
	margin: 0;
	border-bottom-style: solid;
	border-bottom-color: aqua;
	
	display: flex;
	flex-direction: column;
	justify-content: space-around;
}
#menu-mobile div
{
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	width: 100%;
	text-align: left;
	border-bottom-style: solid;
	border-bottom-width: 4px;
	border-bottom-color: transparent;
}
#menu-mobile a.title
{
	text-align: center;
	height: 60px;
	line-height: 60px;
	font-family: TitreBloc;
	background-color: aqua;
}
#menu-mobile a
{
	display: block;

	width: 100%;
	height: 60px;
	line-height: 60px;
	text-align: left;
}
#menu-mobile a.down
{
	font-size: 25px;
	position: absolute;
	bottom: 0px;
	text-align: center;
	background-color: red;
	color: white;
}

.mobile
{
	display: none;
}

@media screen and (max-width: 865px){
    /* Ici du code s'appliquant aux écrans de moins de 865 pixels de large */
	#nav-desktop{
		display: none;
		width: 0px;
		margin-top: 0px;
	}
	#nav-mobile
	{
		display: flex;
		flex-wrap: wrap;
		flex-direction: row;
		justify-content: center;
	}
	.mobile
	{
		display: block;
	}
}