/*Généralités*/
 /*-----------------------------------------------------------------------------SITE-----------------------------------------------------------------*/
 /*je définis la police*/
@font-face {
    font-family: 'capsu';
    src: url('font/capsuula-webfont.woff2') format('woff2'),
         url('font/capsuula-webfont.ttf') format('truetype'),
		 url('font/capsuula-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}
/*je définis la couleur de fond*/
html {
	background-color: #F4F3F4;
	}
/** {-moz-box-sizing: border-box; box-sizing: border-box;}*/
body {
	height:100%;
	position:relative;
	padding-bottom:1%;
}
/*je définis h1*/
h1 {
	font-family: 'capsu', Arial, sans-serif;
	font-size: 4em;
	font-weight: 500;
}
/*je définis h2*/
h2 {
	font-family: 'capsu', Arial, sans-serif;
	font-size: 1.6em;
	font-weight: 900;
	text-align:left;
}
/*je définis h3 titre des zooms*/

h3 {
	font-family: 'capsu', Arial, sans-serif;
	font-size: 1.4em;
	font-weight: 700;
	text-align:left;
	margin:0px;
}
/*je définis les p*/
p {
	font-family: 'capsu', Arial, sans-serif;
	font-size: 1.2em;
	text-align:justify;
}
/*je définis le centrage du corps de la page*/
.corps {
	text-align:center;
}


/*Liens*/
a:link {
    text-decoration: none;
	font-family: 'capsu', Arial, sans-serif;
	color:#272E24;
	}
a:visited {
    text-decoration: none;
	font-family: 'capsu', Arial, sans-serif;
	color:#272E24;
	}
a:hover {
    text-decoration: none;
	font-family: 'capsu', Arial, sans-serif;
	color:#272E24;
	}
a:active {
    text-decoration: none;
	font-family: 'capsu', Arial, sans-serif;
	color:#272E24;
	}
	
a img {
	border:none;
}
area {
	border:none;
	outline: none;
}
	
/*Menu horizontal*/
/*----------------------------------------------------------------------MENU-HAUT----------------------------------------------------*/
/*je définis le positionnement des éléments dans le header*/
header{
	display: flex;
	margin : 10px 0px 0px 20px;
}
/*je définis la largeur du logo*/
#logo{
     width: 100px;
	 margin: 20px 0px 0px 80px;
}
/*je définis la présentation de nav*/
#menu {
	width: 100%;
	margin:auto; 
	font-family: 'capsu', Arial, sans-serif;
}
.before {
	padding:0px 300px 30px 0px;
}
/*je définis la présentation de ul*/
#listeMenu {
	list-style-type:none;
	padding-top: 10px;
	text-align: center;
	margin: 0px;
}
/*je définis la présentation des li du ul en inline-block sauf la première "accueil" qui n'est pas visible ici*/
.liste {
		display:inline-block;
}
/*je dissimula accueil*/
#accueil {
		display:none;
}
/*je définis la présentation des li du ul*/
#listeMenu li{
	font-size: 1.3em;
	font-weight: 500;
	margin: 0px 10px 0px 10px;
	padding: 0px 10px 0px 10px ;
	border-radius: 10px;
	border-left:1px solid rgba(0,0,0,0);
	border-right:1px solid rgba(0,0,0,0);
}
/*je définis une classe qui ne s'active que quand on scrolle*/
.fixe {
	position:fixed;
	top: 0;
	left: -50px;
	background-color: rgba(244,243,244,0.8);
}
/*je crée une div fantôme pour remplacer la div fixed qd on scrolle*/
#fantome {
	display:none;
	height:110px;
	width:100%;
}

/*Visuel d'accueil*/
/*---------------------------------------------------------------------------ACCUEIL------------------------------------------------------------*/
/*je définis la largeur max de l'img*/
#visuel {
	max-width:500px;
}
#corpsHome {
	margin: 0% 0% 1% 0%;
}

/*Valorisation*/
/*----------------------------------------------------------------------------VALORISATION------------------------------------------------------*/
/*je définis le contenant général*/
#corpsValo {
	width: 50%;
	margin:auto;
}
/*je définis le contenant du zoom*/
.resume {
	display: flex;
	padding-top: 5%;
	padding-bottom: 5%;
}
/*je définis le contenant du zoom pour la page fonds*/
.resumebis {
		display: flex;
	padding-top: 5%;
	padding-bottom: 5%;
}
.resumebis:hover {
	opacity: 0.5;
}
/*je définis le contenant du visuel du zoom*/
.visurond {
	margin-right: 4%;
}
/*je définis l'aspect d'En savoir plus zoom*/
.bleue {
	cursor:pointer; 
	color: #4E5B82;
	font-weight: bold;
}
/*je style le bouton player lire et pause*/
button {
	border:0px; 
	cursor:pointer;
	text-align:center;
	background:rgba(0,0,0,0);
}
/*je style le mot lire du player*/
.lire {
	padding-right:5px;
}
/*je définis le corps des petites notes*/
.notes {
	font-size: 0.9em;
}
.photofocus {
	max-width:180px;
}
	.imgmissions {
		max-width:400px;
	}
/*je définis le corps de la page Rayssac-------------------------------------------RAYSSAC-------------------------------------------------*/
#corpsRayssac {
	width:90%;
}
/*je définis le corps de la page frontieres------------------------------------------FRONTIERES---------------------------------------------*/
#corpsFrontieres {
	width:65%;
	margin:auto;
	padding-top:2%;
}
/*pour la page frontieres*/
.photofront {
	margin:1%;
	width:95%;
	max-width: 500px;
}
/*pour les div photo + lecteur*/
.frontieres {
	display: flex;
    flex-direction: column;	
}
/*pour les div photo + photo*/
.front {
	display: flex;
		justify-content: space-between;

}
/*je définis le corps de la page des visuels--------------------------------------VISUELS-----------------------------------------------------*/
.corpsvisu {
	text-align:center; 
	width: 90%;
}
/*les img des pages visuels*/
.photovisu {
	width:100%;
	height:100%;
	min-width:400px;
	max-width:600px; 
}


/*Présentation*/
/*-------------------------------------------------------------------------PRESENTATION---------------------------------------*/
/*le corps du texte centré */
.corpsPres {
	width: 50%;
	margin:auto;
	text-align:center;
}
/*img à droite dans Pres + Contacts + TexteRayssac*/
.oiseau {
		float:right; 
		margin:20% 4% 0% 2%;
}
.imggauche {
	float:left; 
	margin: 0% 2% 0% 4%;
}
/*je définis la mise en page de CONTACTS*/
#contacts {
	display: flex;
	justify-content: space-between;
	}
/*je définis le style du bouton HAUTDEPAGE*/
#haut {
	font-family: 'capsu', Arial, sans-serif;
	font-size: 1em;
	cursor:pointer; 
	background:rgba(232,232,232,0.70); 
	border-radius: 13px;
	border-left:1px solid rgba(0,0,0,0);
	border-right:1px solid rgba(0,0,0,0);
	padding:15px;
	position:fixed; 
	right:80px; 
	bottom:20px;
}
/*et en HOVER*/
#haut:hover {
	border-left:1px solid rgba(0,0,0,1);
	border-right:1px solid rgba(0,0,0,1);
	}
#fleche2  {
	display:none;
}
/*Mission*/
/*--------------------------------------------------------------------------MISSIONS-------------------------------------------------*/
/*le corps du texte centré */
.corpsMission {
	width: 50%;
	margin:auto;
}
.imgmissionspetit {
	display:none;
}
/*Infos*/
/*--------------------------------------------------------------------------CONTACTS-------------------------------------------------*/
/*liste */
#listephotocredit {
	font-family: 'capsu', Arial, sans-serif;
	font-size: 1.7em;
	text-align:left;
	margin-top:0px;
}
.AccesReserve {
	font-size: 0.7em;
	cursor:pointer;
}
.mdp {
	font-size: 1em;
	width:100px;
	height:30px;
}
#formulaire {
	display:none;
}

/*Fonds*/
/*--------------------------------------------------------------------------FONDS-------------------------------------------------*/
.pastille {
	margin-left: 4%;
}
figcaption {
	font-family: 'capsu', Arial, sans-serif;
	font-size: 0.9em;
}
#oreille, #oreille1, #oreille2, #oreille3 {
	display:none;
}
.psansmargin {
	margin-bottom:0px;
}
.imagesfocus {
	width:100%;
	max-width:940px;
	min-width:200px;
}


/*Formulaire*/
/*--------------------------------------------------------------------------FORM-------------------------------------------------*/
input  {
	width:350px; 
	height:20px;
	font-family: 'capsu', Arial, sans-serif;
	font-size: 0.7em;
	}
textarea {
	font-family: 'capsu', Arial, sans-serif;
	font-size: 0.7em;
}

/*Responsive*/
/*-----------------------------------------------------------------------RESPONSIVE---------------------------------------------------------*/

/*tous les media dont la largeur max est 1024px*/
@media all and (max-width: 1024px)
{
	/*header sans marge*/
	header{
		margin : 0px;
	}
	/*logo plus petit*/
	#logo{
		 width: 70%;
	}
	/*div contenant le logo disparaît*/
	#logoIn {
	display:none;
	}
	.fixe {
	position:fixed;
	top: 0;
	left: -0px;
	background-color: rgba(238,238,240,0.8);
	}

	/*modifications sur les padding du menu*/
	#menu {
	padding:0px 0px 0px 0px;
	}
	/*modifications sur les li*/
	#listeMenu li {
		font-size: 1.1em;
		margin: 0px;
		padding: 5px;
	}
	/*div accueil apparaît*/
	#accueil {
			display:inline-block;
	}
	/*enlever fleche de retour pour AD*/
	#retour {
	display:none;
	}
	/*ajout marge pour accueil visuel*/
	#corpsHome {
		margin: 4%;
	}
	/* plus petit*/
	p {
		font-size: 1em;
	}
	/* h2*/
	h2 {
		font-size: 1.4em;
	}

	/*pour la page Missions*/
	.corpsMission {
	width: 80%;
	text-align:center;
	}
	.imgmissions {
		display:none;
	}
	/*pour la page valo*/
	#corpsValo {
		width: 80%;
	}
	/*je définis le style du bouton HAUTDEPAGE*/
	#haut {
		right:1%; 
		bottom:10px;
	}
	/*pas de parentheses en hover*/
	#haut:hover {
	border-left:1px solid rgba(0,0,0,0);
	border-right:1px solid rgba(0,0,0,0);
	}
	/*texte disparait*/
	#depage {
		display :none;
	}
	/*fleche apparait*/
	#fleche2  {
		display:block;
	}

	/*titre des zooms*/
	h3 {
	font-size: 1.2em;
	margin-top:10px;
	}
	/*class utilisée dans Pres et TexteRayssac*/
	.corpsPres {
	width: 80%;
	margin:auto;
	text-align:center;
	max-width:940px;
	}
	/*img à droite dans Pres + Contacts + TexteRayssac*/
	.oiseau {
		display:none;
	}
	/*img a gauche dans Pres*/
	.imggauche {
		display:none;
	}
	.imgmissionspetit {
		display:block;
		width:200px;
		margin:auto;
	}
}
@media all and (max-width: 900px) {
	/*pour les photos dans frontieres*/
	.front {
	display: flex;
	flex-direction:column;
	}
		/*contenant du zoom*/
}

/*tous les media dont la largeur max est 1024px*/
@media all and (max-width: 700px)
{
	p {
		text-align:left;
	}
	.resume, .resumebis {
		display: flex;
		flex-direction: column;	
		padding-top: 5%;
		padding-bottom: 5%;
	}

}

@media (orientation:portrait) {
	#visuel {
		margin-top:20%;
	}
}

@media all and (min-width: 1800px)
{
	p {
	font-family: 'capsu', Arial, sans-serif;
	font-size: 1.5em;
	text-align:justify;
}	

	.corpsPres, .corpsMission, #corpsValo  {
	width: 40%;
	
	}
	#logo {
		   width: 150px;
	}
	#listeMenu li {
		font-size: 2em;
	}
	h3 {
		font-size: 1.8em;
	}
	.notes {
	font-size: 1.2em;
	}	

	.oiseau {
		margin:20% 10% 0% 2%;
	}
	.imggauche {
	margin: 0% 2% 0% 10%;
	}
	.imgmissions {
		max-width:600px;
	}

}