@charset "UTF-8";
/*=======================================================================*/
/* fichier style pour la version responsive des pages du site beaufresne */
/*=======================================================================*/

/* tous les elements de la page sauf bloc fixe en colonne pour presentationresponsive*/
	.container_flex {
		width:100%;
		display:flex;
		flex-direction:column;
		justify-content: space-around;
		flex-wrap: wrap;
	}
	
	/* comme container, en colonne (contient tout sauf le footer et bloc fixe)*/
	.mainContent_flex {
		display:flex;
		flex-direction:column;
		justify-content: space-around;
		flex-wrap: wrap;
		top:0;
		width:100%;
		margin-left:auto;
		margin-right:auto;
	}
	
/*=======================
  ==== ENTETE PAGE	=====
  =======================*/	
	
	/*.header_flex { intégré à beaufresne.css
		width:90%;
		padding:0.5em 2em;
		display:flex;
		align-content: space-between;
		flex-direction: row;
		flex-wrap: nowrap;
		align-items: center;
	}*/
	
	#logo-cheval{margin:auto;max-width: 10%;}
	
	#logo-beaufresne{
		max-width:10%;
		min-width:10%;
		margin:auto;
	}
	
	#titre-entete-beaufresne{
		max-width:60%;
		min-width:50%;
		margin:auto;
	}
	
	/*animation accueil */	
	#animation-accueil {
		animation-duration: 3s;
		animation-name: animation-accueil;
		width: 17em;/*272x181px*/
		z-index: 999;
	}
	
	@keyframes animation-accueil {
		
		 0% {
			opacity:0.1;
			width:2.5em; 
    		}
				
		100% {
			opacity:1;
			animation-fill-mode:backwards;
			/*z-index: 999;*/
    		}	
		
	}
/* fin animation accueil */	
	
/* ======= FIN ENTETE PAGE =======*/
	

/*=============================
  ==== CONTENU DE LA PAGE =====
  =============================*/

	.trait_3px_vert {
		color:#030;
		height:3px;
		background-color:#030;
		}
	
	.trait_2px_vert {
		color:#030;
		height:2px;
		background-color:#030;
		}
   
	/* taille de la zone du texte de presentation */
	#mainContent2{width:65%;margin:0;padding:0; }
	
	/*commentaire de la liste dfilante */
	#comment-defile{
		font-size: 0.8rem;
		font-style:italic;
		text-align:center;
		line-height:12px;
		margin-top:1px;
		padding-bottom:2px;
		width:95%;
		margin-left:auto;
		margin-right:auto;
	}
	
	/*regroupe le titre de la page et le logo du lien flash info en horizontal*/
	#titre-LienFlash{
		width:100%;
		display:flex;
		flex-direction: row;
		justify-content:space-between;
		flex-wrap: wrap;
		align-items: center;
	}
	
	/*titre de la page*/
	h1#titre-accueil {
		min-width: 75%;
		max-width: 85%;
		text-align: left;
		padding:0;
		margin:0 0 0 0.3em;
	}
	
	/* animation sur le titre qui arrive de gauche en zoomant */
	h1 {
		animation-duration: 1s;
		animation-name: zoomtitre;
	}
	
	@keyframes zoomtitre {
		from {
			margin-left:0%;	
			font-size: 0.06em;
			opacity:0;
		}
		to {
			margin-left:0%;
			font-size:normal;
			opacity:1;
		}
	}
	/* fin animation titre */

	
	/* logo flash-info */
	.ombre_logo
	{
		
		-moz-box-shadow:
				2px 2px 3px 1px rgba(0, 0, 0, .6), /* ombre exterieure bas et droite */
				-2px -1px 3px 1px rgba(0, 0, 0, .6); /* ombre exterieure gauche et haut */			 
		-webkit-box-shadow:
				2px 2px 3px 1px rgba(0, 0, 0, .6), /* ombre exterieure bas et droite */
				-2px -1px 3px 1px rgba(0, 0, 0, .6); /* ombre exterieure gauche et haut */
	
		box-shadow:
				2px 2px 3px 1px rgba(0, 0, 0, .6), /* ombre exterieure bas et droite */
				-2px -1px 3px 1px rgba(0, 0, 0, .6); /* ombre exterieure gauche et haut */
	}
	
	/* fin des styles pour logo flash info */

	
	/*taille police du texte de présentation*/
	#container #mainContent #mainContent2 p, ul {font-size:0.8em }
	
	
	/*pour la présentation du diaporama et du texte de présentation en ligne*/
	#Diapo-TextePresentaion {
		width:100%;
		margin:0;
		display:flex;
		flex-direction: row;
		justify-content:space-around;
		flex-wrap: wrap;
		align-items: center;
	}

	/*pour la présentation d'une image à coté d'un titre, - flexible, peut passer en alignement vertical
	utilisé pour des listes responsives (feuille "stages" par ex)*/
	.mep-titre-image{
		width:100%;
		margin:0;
		display:flex;
		flex-direction: row;
		justify-content:space-around;
		flex-wrap: wrap;
		align-items: center;
	}
	
	/* pour mettre le diporama et son bouton MA l'un en dessous de l'autre */
	#diapo-BoutonMA {
		display:flex;
		flex-direction:column;
		align-content:center;
		align-items: flex-start;
	}
	
	img { border: 0;
		 padding-left:0px;/*20px*/
		 margin-top:0;
	}



	/*styles diapo presentation */
	
	/* enveloppe globale du diaporama*/
    #slideShowImages { /* The following CSS rules are optional. */
      border: none;/* 1px #030 solid;*/
      background-color: transparent;
		margin-left:auto;
		margin-right:auto;
		max-height:350px;
		max-width:300px;
    }   
  	
	/*images du diaporama */
    #slideShowImages img {
		z-index: -1000;		
		max-height:350px;
		max-width:300px;
		margin-left:auto;
		margin-right:auto;
		margin-top:3%;
    } 
	
	/* bouton du diaporama*/
	#slideShowButton {
		z-index:1000;
		max-width:300px;
		margin-left:auto;
		margin-right:auto;
		color:aliceblue;
		background-color:red;
	}
	
	#slideShowButton:hover {
		cursor:pointer;
	}
	/*fin de styles diapo presentation */

	/*gestion du survol des boutons latéraux de navigation */
	#lien_page_precedente:hover,
	#lien_page_accueil:hover{
		filter: saturate(600%);
		-webkit-filter: saturate(600%);
	}

	/* <div> ajoutée après le titre de la page pour réserver la place au bouton "afficher/cacher menu" sur less petits
	écrans. une media query (section media queries de ce fichier) permet de supprimer cet espace dès que le nenu passe en format horizontal (plus de 980px)*/
	.lignes-vides{
		display:block;
		/*height:3rem;*/
		height:0rem;
	}

	
/*===== FIN DU CONTENU DE LA PAGE ======*/	
	
/*========================
======== FOOTER ==========
==========================*/
	
	.twoColElsLtHdr #container #footer p a{	
		color: #EAFFEA;
	}
	
	/* tous les elements du footer mis en ligne par flex row */
	#elements-footer {
		display:flex;
		flex-direction: row;
		justify-content: space-around;
		align-items: center;
	}
	
	/*partie gauche du footer (adresse et logo facebook)*/
	#elements-footerG {
		display:flex;
		flex-direction: row;
		justify-content: space-around;
		align-items: center;
		width:30%;
		margin-left:auto;
		margin-right:auto;
	}
	
	/*partie droite du footer (liens info legales et plan site)*/
	#elements-footerD {
		display:flex;
		flex-direction: row;
		justify-content: space-around;
		align-items: center;
		width:65%;
		margin-left:auto;
		margin-right:auto;
	}
	
	/* les liens plan site et info legales sont en vertical*/
	#legal_plan {
		display:flex;
		flex-direction: column;
		justify-content: space-between;
		align-items: center;
	}
	
	/*texte des liens dans le footer */
	#plan-site a,
	#info-legale a {
		text-decoration: none;
		color:#FFFFFF;
		font-size:1.1em;
		font-weight: normal;
	}
	
	/* police adresse dans le footer */
	#adresse-beaufresne {font-size: smaller;}
	
	/* lien vers page facebook ferme dans le footer */
	#lien_page_facebook{
		min-width:2em;
		max-width:3em;
	}
	
	/* lien vers FFE dans le footer */
	.Logo-FFE-horiz{
		padding-top:0.44em;
		padding-bottom:0.25em;
		padding-left:0;
		padding-right:0;
	}

	/*style au survol du logo lien vers page facebook de la ferme*/
	#lien_page_facebook:hover{
		/*filter: hue-rotate(40deg);
		-webkit-filter: hue-rotate(40deg);*/
		/*filter: opacity(50%);
		-webkit-filter: opacity(50%);*/
		filter: brightness(150%);
		-webkit-filter: brightness(150%);
		transform:scale(0.8);		
	}
	
	/* style survol du logo lien vers site de la FFE */
	#lien_site_ffe:hover{
		filter: opacity(80%);
		-webkit-filter: opacity(80%);
		transform:scale(0.95);
		background-color:hsla(84,72%,85%,0.86);
		border-radius:20px;
		padding:7px 5px 6px 5px;
	}
	
	/* style survol des liens vers info legales et plan du site */
	#info-legale a:hover,
	#plan-site a:hover
		{color:hsla(13,85%,62%,0.96)}
	
/*===== FIN DE FOOTER ======*/	
	
/*===========================
======== BLOCS FIXES ========
=============================*/
	
	/* bloc horizontal reseaux sociaux (masquable avec bouton fxe gauche) */	
	#bloc-fixe{
		background-color:rgba(228,233,220,0.89);/*blanc légèrement transparent (0.89)*/
		width:95%;
		z-index:99999;
		position:fixed;
		bottom: 0.1rem;		
		margin-left:auto;
		margin-right:auto;
		vertical-align: middle;
		padding-top:0.4rem
		/*padding:0;
		margin-top:0;
		margin-bottom:0;
		height:auto;*/
	}
	
	/*bloc fixe vertical boutons de navigation */
	#bloc-fixe-navigation{
		position:fixed;
		z-index:99999;
		top:24em;
		width:2em;
		left:0.1em;
	}
	
		
	/*#page-1-fixe{width:2.3em;padding:0; }
	#accueil-fxe{width:2.3em;padding: 0;}*/
		
	/* css pour la presentation des boutons partage sharrif*/
	/*#reseau-socpetit, #reseau-socgrand{
		margin-bottom:0;
	}*/
	
/*========= FIN DE BLOC FIXE =======*/
				
/*=================================
========= MEDIA QUERIES ===========
===================================*/

	@media screen and (max-width:569px) and (orientation:landscape) {
		#titre-LienFlash{margin-left:2.5rem;}/*on deplace le titre et le logo flash-info vers la droite pour laisser place au boutons verticaux*/
	}
	
	/* on deplace les icones de navigation et de reseau sociaux vers la droite quand on utilise des smartphones*/
	@media screen and (max-width:414px){
		h1{font-size:1.2em;padding-top:0.5em;}
		#titre-LienFlash{margin-left:2.5rem;}/*on deplace le titre vers la droite pour laisser place au boutons verticaux*/
		#container #mainContent #mainContent2 p, ul {font-size:0.8em }
		#mainContent2 {min-width:84%}
		#elements-footer {
			flex-direction:column;
			align-content: space-between;	
			padding:0;
			margin:auto;
		}
		.Logo-FFE-horiz {
			min-width:85%;
			max-width:98%;
			height:auto;
			padding:0;
			margin:auto;
		}	
		#legal_plan {
			display:flex;
			flex-direction: row;
			justify-content: space-around;
			align-items: center;
			font-size:0.8em;
			width:95%;
			padding:0.2em;
		}
		#animation-accueil{display:none;}
		#fond_header {max-width:83%;}
		ul.newsticker {font-size:0.8em;}
		ul.newsticker a {font-size:0.8em;}
		#elements-footerG{
			padding:0.5em;
			width:95%;
			margin-left:auto;
			margin-right:auto;
			align-content: space-around;
			font-size: smaller;
			text-align:left;}
		#elements-footerD {
			display:flex;
			flex-direction: column;
			justify-content: space-around;
			align-items: center;
			width:95%;
			margin-left:auto;
			margin-right:auto;
		}
		
	}
	/* entre 415 et 782, on agrandit les textes du titre et du menu ainsi que la largeur du texte , empilé avec le diaporama*/ 
	@media screen and (min-width:415px) and (max-width:782px){
		h1{font-size:1.3em;padding-top:0.5em}
		#titre-LienFlash{max-width: 95%;margin-left:2em}
		#mainContent2 {min-width:90%;}
		#elements-footer {
			flex-direction:column;
			align-content: space-between;	
			padding:0;
			margin:auto;
		}
		.Logo-FFE-horiz {
			min-width:85%;
			max-width:98%;
			height:auto;
			padding:0;
			margin:auto;}
		#legal_plan {
			display:flex;
			flex-direction: row;
			justify-content: space-around;
			align-items: center;
			font-size:0.8em;
			width:95%;
			padding:0.2em;
		}

		#animation-accueil{display:none;}
		#fond_header {min-width:85%;max-width:90%;}
		#elements-footerG{
			padding:0.5em;
			width:95%;
			margin-left:auto;
			margin-right:auto;
			align-content: space-around;
			font-size: smaller;
			text-align:left;}
		#elements-footerD {
			display:flex;
			flex-direction: column;
			justify-content: space-around;
			align-items: center;
			width:95%;
			margin-left:auto;
			margin-right:auto;
		}
	
	}
	/*on agrandit la taille du titre dans l'entete pour les petits formats "portrait"*/
	@media screen and (max-width:415px) and (orientation:portrait) {
		#titre-entete-beaufresne{height:3rem}
		#logo-beaufresne{width:3.5rem;}
         .popup {width:100%}
	}
	
	@media screen and (min-width:415px) and (max-width:835px) and (orientation:portrait) {
		h1{font-size:2em;padding-top:1.5em}
		#mainContent2 {min-width:90%;}
		#container #mainContent #mainContent2 p, ul {font-size:1.1em }
		#animation-accueil{display:none;}
		#elements-footer {
			flex-direction:column;
			align-content: space-between;	
			padding:0;
			margin:auto;
		}
		.Logo-FFE-horiz {
			min-width:85%;
			max-width:98%;
			height:auto;
			padding:0;
			margin:auto;}
		#legal_plan {
			display:flex;
			flex-direction: row;
			justify-content: space-around;
			align-items: center;
			font-size:0.8em;
			width:95%;
			padding:0.2em;
		}
		#elements-footerG{
			padding:0.5em;
			width:95%;
			margin-left:auto;
			margin-right:auto;
			align-content: space-around;
			font-size: smaller;
			text-align:left;}
		#elements-footerD {
			display:flex;
			flex-direction: column;
			justify-content: space-around;
			align-items: center;
			width:95%;
			margin-left:auto;
			margin-right:auto;
		}
        
         .popup {width:100%}
		
	}
		
	/*entre 670 et 1024 px on décale le titre pour ne pas interferer avec la boutons gauche */
	@media screen and (min-width:670px) and (max-width:1024px){
		/*h1{margin-left:3%;width:55%}*/
		#titre-LienFlash{margin-left:5%;}
	}
	
	
	/*entre 1024 et 2000px, on augmente la taille des polices et l'espace danss lequel se glisse le bandeaux deroulant, et on ajuste la largeur et la marge de l'ensemble titre/logo flash-info*/
	@media screen and (min-width:1023px)and (max-width:2000px){
		#container #mainContent #mainContent2 p{font-size:0.8em }
		#container #mainContent #mainContent2 ul li{font-size:0.9em }
		#titre-LienFlash{max-width: 95%;margin-left:2em}
		h1{font-size:2em;padding-top:1.5em}
		.tickercontainer {height:2em;}
		#logo-cheval{display:none;}
		
	}
	
	/* suppression du logo tete de cheval, remplacé par l'animation image de la ferme dans le header */
	@media screen and (min-width:980px)and (max-width:1023px){
		#logo-cheval{display:none;}
		
	}
	
	/*pour eviter une trop forte expansion de l'image de la ferme de beaufresne dans le header*/
	@media screen and (min-width:1020px)and (max-width:1365px){
		#animation-accueil{max-width:12em;}
		
		
	}
	
	/*au dela de 2000px, on augmente la taille des polices et l'espace danss lequel se glisse le bandeaux deroulant*/
	@media screen and (min-width:2001px){
		#container #mainContent #mainContent2 p, ul {font-size:1.3em }
		h1{font-size:2em;padding-top:1.7em}
		/*taille police de la liste deroulante*/	
		ul.tickercontainer {height:2.2em;}
		ul.newsticker {font-size:2em;}
		ul.newsticker a {font-size:2em;}		
		#logo-cheval{display:none;}
		
	}
	
	/*position des boutons fixes en format lanscape smartphone */
	@media screen and (max-height:414px){
		#bouton_bloc-fixe{top:18em;}       /*bouton "nous suivre" dans le fichier css "AfficherCacher.css"*/
		#bloc-fixe-navigation{top:15.5em;} /*boutons de navigation */
		h1#titre-accueil{margin:0 0 0 1em;}/*titre de la page */
	}

	/* <div> ajoutée après le titre de la page pour réserver la place au bouton "afficher/cacher menu" sur less petits
	écrans. La media query permet de supprimer cet espace dès que le nenu passe en format horizontal ( plus de 980px)*/
	@media screen and (min-width: 980px){
		.lignes-vides{display:none}	
		}
	
	
	/*============================================
	GESTION DES BOUTONS RESEAU: icon-count ou icon
	==============================================*/	
	@media screen and (max-width :679px ){
		#reseau-socgrand{display:none}/* on n'affiche pas les "icon-count", remplacées par "icon"*/
	}
	@media screen and (min-width:680px){
		#reseau-socpetit{display:none}/* on n'affiche pas les "icon" remplacées par "icon-count"*/
	}
	/*===fin de gestion des boutons reseau soc====*/