body, html {font-family: Arial, Verdana, Helvetica, sans-serif; font-size: 15px; margin: 0; padding: 0; height: 100%; background-color: #ffffff;}
img{border: 0px;}
a{text-decoration: none;}
.obligatoire{font-weight: bold; color: red;}
.gros_titre{float: left; width: 100%; font-weight: bold; border-bottom: 2px solid #80b490; margin: 5px; height: 28px; padding-top: 5px; font-size: 22px; overflow: hidden;}
.petit_titre{float: left; width: 100%; font-weight: bold; border-top: 2px solid #80b490; border-bottom: 2px solid #80b490; margin: 5px; height: 22px; padding-top: 5px; font-size: 18px;}
.petite_remarque{color: gray; font-size: 13px;}
.gras{font-weight: bold;}
.reseaux_sociaux img:hover, .paysan_vosgien img:hover{opacity: 0.6;}
.grande_miniature{border-radius: 10px;}
.pdf{vertical-align: middle; width: 30px;}
.bouton_formulaire:hover, .miniature:hover, .grande_miniature:hover {opacity: 0.6; cursor: pointer;}
.image_responsive{display: block; max-width: 100%; height: auto; margin: auto;}
p.titre{font-weight: bold; font-size: 16px; text-align: center;}
.sous_titre{float: left; font-size: 16px; margin: 20px; width: 100%; text-decoration: underline; font-style: italic;}
	li{height: 25px;}
.texte_fond_blanc{float: left; margin: 0px 20px 10px 0px; width: 100%; padding-left: 50px;}
.texte_fond_gris{float: left; margin: 0px 20px 10px 0px; width: 100%; padding-left: 50px; background-color: #f3f3f3;}
p.rubrique{font-weight: bold; font-size: 14px; text-align: center; color: #467755;}
.centre{text-align: center;}
.obligatoire{color: red; font-size: 18px; padding-left: 10px;}
.nombre_vert{font-size: 24px; font-weight: bold; color:#467755;}
.texte_vert{color:#467755;}
.italic{font-style: italic;}
.mot_recherche{display: block; color: #9b0000; font-weight: bold; border: 1px solid lightgrey; background-color: rgb(245, 245, 245); padding: 5px;}
.mot_recherche:hover{border: 1px solid gray; cursor: pointer;}
.aucun_resultat{float: center; height: 500px; width: 100%; text-align: center; background: url(../images/aucun_resultat.png) no-repeat; background-position: center; vertical-align: middle;}
#fermer_photo{float: left; width: 54px; height: 54px; background-image: url(../images/annuler.png); cursor: pointer; margin: 0px 4px 0px 4px;}
#affiche_erreur{color: #9b0000; font-weight: bold;}
#affiche_info{color: #009b34; font-weight: bold; margin: 20px;}
.cache{display: none;}

ul li{height: auto;}
#global{width: 100%;
    min-height: 100vh;

    display: flex;
    flex-direction: column;

    box-sizing: border-box;}
	#header{width: 100%; margin: 0px; padding: 0px; position: fixed; top: 0px; z-index: 50; flex: 0 1 194px;}
		.header_images{float: left; width: 100%; height: 113px; background-image: url("../images/header.jpg");}
		#menu{float: left; width: 100%; height: 43px; margin: auto; padding: auto; background-color: #467755; overflow: hidden;}
			.image_menu{float: left; width: 306px; height: 100%; background-image: url("../images/menu.jpg"); margin: auto; padding: auto;}
			.menu_texte{float: left; height: 100%; margin: 0 auto; padding: 0 auto;}
				.item_menu{float: left; min-width: 150px; color: white; text-align: center; transition-property: background-color; transition-duration: 0.5s; height: 100%; padding-top: 12px;}
				.item_menu:hover{background-color: #80b490;}
				.menu_connexion:hover{text-decoration: underline;}
			.menu_connexion{position: relative; display: table-cell; float: right; width: 150px; height: 100%; margin: 0 auto; box-sizing: border-box; color: black; text-align: center; transition-property: text-decoration; transition-duration: 0.5s; background-color: white;}
				.menu_connexion img{vertical-align: middle;}
		
		#icone_menu{display: none;}

		#citation{display: flex; flex-flow: row; width: 100%; height: 38px; margin: auto; padding: auto; overflow: hidden; box-sizing: border-box;}
			.image_citation{flex: 0 1 306px; height: 100%; background-image: url("../images/citation.jpg"); margin: auto; padding: auto;}
			.citation{display: block; flex: 1 1 auto; height: 100%; margin: 0px; text-align: center; color:#467755; background-color: #ffffff; box-sizing: border-box; padding-top: 7px;}

	#page{width: 100%; background-color: #ffffff; margin-top: 194px; padding: 0; display: flow-root; flex: 0 0 auto;}
		#index_gauche{float: left; width: calc(100% - 560px); height: 100%; padding: 20px;}
			.bloc_actualite{float: left; width: 30%; height: 500px; background-color: #f8f8f8; margin: 20px; transition-property: box-shadow; transition-duration: 0.5s;}
			.bloc_actualite:hover{-webkit-box-shadow:inset 0px 0px 0px 2px #212522; -moz-box-shadow:inset 0px 0px 0px 2px #467755; box-shadow:inset 0px 0px 0px 2px #467755;}
				.bloc_actualite img{display: block;
    width: 100%;
    height: 280px;
    object-fit: contain;
    object-position: center;}
				.contenu_actualite{float: left; padding: 10px; width: 100%; box-sizing: border-box; text-align: justify;}

            .nom_auteur{float: left; margin-top: 20px; color: gray; text-align: right; width: 100%;}

			.miniature{float: center; margin: 10px; height: 100px; overflow: hidden; border-radius: 10px; padding: 0 auto; transition-property: border; transition-duration: 0.5s;}

			.actu_precedente{float: left; width: 48%; margin: 10px; padding: 0 auto; box-sizing: border-box;}
			.actu_suivante{float: left; width: 48%; margin: 10px; padding: 0 auto; box-sizing: border-box; text-align: right;}
		
		#index_droit{float: right; width: 470px; text-align: center; margin-right: 20px; padding: 25px; box-sizing: border-box; position: static; max-height: 700px; overflow-y: auto; overflow-x: hidden;}

        .editorial{float: left; width: 100%; overflow: hidden; text-align: justify;}
        .paysan_vosgien{float: left; width: 100%; overflow: hidden; text-align: center;}
            .paysan_vosgien img{width: 80%;}
        .lien_organigramme_bleu{width: 250px; height: 150px; background-color: #6d9bb9; transition-property: box-shadow; transition-duration: 0.5s; margin: 20px auto; padding: 10px;  box-sizing: border-box;}
        .lien_organigramme_vert{width: 250px; height: 150px; background-color: #a9c46e; transition-property: box-shadow; transition-duration: 0.5s; margin: 20px auto; padding: 10px;  box-sizing: border-box;}
        .lien_organigramme_bleu:hover, .lien_organigramme_vert:hover{-webkit-box-shadow:inset 0px 0px 0px 2px #212522; -moz-box-shadow:inset 0px 0px 0px 2px #467755; box-shadow:inset 0px 0px 0px 2px #467755;}

		#groupe_espace_pratique{max-width: 1200px; margin: 0 auto; padding: 0 auto;}
			.espace_pratique_texte{float: center; margin: 10px 20px 20px 20px; width: 100%; box-sizing: border-box;}
				.espace_pratique_texte p{font-size: 17px; font-weight: bold; box-sizing: border-box;}
		
		.contenu_pleine_page{float: left; padding: 0; padding: 25px; width: 100%; box-sizing: border-box;}
			.bloc_50_pourcent{float: left; margin: 0; padding: 30px; width: 50%; box-sizing: border-box; overflow: hidden;}
		.lien_grande_page{float: left; width: 100%; padding: 25px; margin: 0; text-align: center; box-sizing: border-box;}

		#bloc_gauche_pour_recherche{float: left; width: calc(100% - 390px); height: 100%; padding: 20px;}
		#bloc_droit_recherche{float: right; width: 320px; text-align: center; height: 100%; margin: 0; padding-right: 25px; position: fixed; right: 0px; top: 200px;}

		.bloc_partenaire{float: left; width: 250px; height: 300px; background-color: #f8f8f8; margin: 20px; transition-property: box-shadow; transition-duration: 0.5s;}
			.bloc_partenaire:hover{-webkit-box-shadow:inset 0px 0px 0px 2px #212522; -moz-box-shadow:inset 0px 0px 0px 2px #467755; box-shadow:inset 0px 0px 0px 2px #467755; box-sizing: border-box;}
				.bloc_partenaire img{width: 100%; max-height: 124px;}
				.bloc_partenaire_texte{float: center; padding: 5px 10px 5px 10px; width: 100%; box-sizing: border-box;}
				.bloc_partenaire_texte p{font-size: 18px; font-weight: bold; text-align: center;}

		.lien_ancre_page{display: block; border: 1px solid gray; width: 22%; margin: 10px; float: left; padding: 20px 5px 5px 5px; text-align: center; height: 35px; background-color: #ddc7e2; transition-property: background-color; transition-duration: 0.5s; font-weight: bold;}
		.lien_ancre_page:hover{background-color: #9d6998; cursor: pointer;}
		
		a.menu:link{font-size: 16px; color: #ffffff; font-weight: none;}
		a.menu:visited{font-size: 16px; color: #ffffff; font-weight: none;}
		a.menu:hover{font-size: 16px; color: #ffffff; font-weight: none; text-decoration: underline;}
		
		a.actu:link{font-weight: none; color: black;}
		a.actu:visited{font-weight: none; color: black;}
		a.actu:hover{font-weight: none; text-decoration: underline;}
		
		a.lien_ecrit_en_vert:link{font-weight: none; color: #467755;}
		a.lien_ecrit_en_vert:visited{font-weight: none; color: #467755;}
		a.lien_ecrit_en_vert:hover{font-weight: none; text-decoration: underline; color: #467755;}
		
		
		a.lien_blocs{color: #000000; text-decoration: none;}
		#bulle{position: absolute; color: #d30000; border-radius: 0px 0px 10px 10px; height: 25px; width: 200px; box-shadow: 0px 5px 5px #ff9900; background-color: #ffdead; padding: 3px 0px 0px 3px; border: 1px solid lightgray; text-align: center; visibility: hidden;}
	
	#footer {
    width: 100%;
    min-height: 127px;

    margin: 0;
    padding: 0;

    background-color: #467755;
    color: white;

    font-size: 13px;

    box-sizing: border-box;

    display: flex;
    flex-wrap: wrap;
    align-items: stretch;

    clear: both;

    position: relative;
    z-index: 20;
}
.footer_reseaux {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;

    width: auto;
    height: 70px;
}

/* ---------------------------------------------------------
   Réseaux sociaux
   --------------------------------------------------------- */

.reseaux_sociaux {
    width: 60px;
    min-width: 60px;

    height: 127px;

    display: flex;
    align-items: flex-end;
    justify-content: center;

    box-sizing: border-box;
}

.reseaux_sociaux img {
    display: block;

    width: auto;
    height: auto;

    margin: 10px;
}


/* ---------------------------------------------------------
   Adresse
   --------------------------------------------------------- */

.footer_adresse {
    flex: 1 1 25%;

    min-width: 200px;

    min-height: 127px;

    padding: 40px 20px 10px 30px;

    box-sizing: border-box;

    overflow: hidden;

    display: flex;
    align-items: flex-start;
}


/* ---------------------------------------------------------
   Zone 1
   --------------------------------------------------------- */

.footer_zone1 {
    flex: 1 1 25%;

    min-width: 240px;

    min-height: 127px;

    padding: 100px 10px 10px 10px;

    box-sizing: border-box;

    text-align: center;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
}


/* ---------------------------------------------------------
   Zone 2
   --------------------------------------------------------- */

.footer_zone2 {
    flex: 1 1 25%;

    min-width: 240px;

    min-height: 127px;

    padding: 100px 20px 10px 10px;

    box-sizing: border-box;

    text-align: right;

    display: flex;
    flex-direction: column;
    align-items: flex-end;
    justify-content: flex-start;
}


/* ---------------------------------------------------------
   Liens
   --------------------------------------------------------- */

a.lien_footer:link,
a.lien_footer:visited {
    font-size: 13px;
    color: white;
}

a.lien_footer:hover {
    text-decoration: underline;
}
			

input, select, textarea{padding: 10px; font-family: Arial, Helvetica, sans-serif; color:#467755; font-size: 15px; border-radius: 10px; border: 1px solid gray;}
.formulaire_contact{float: left; width: 100%; padding-left: 80px;}
	.formulaire_contact input, .formulaire_contact select, .formulaire_contact textarea{width: 70%;}

	.formulaire_connexion input[type="checkbox"]{width: 20px; margin: 5px; padding: 0 auto; text-align: center;}
	label {width: auto; margin: 0 auto; padding: 0 auto; text-align: center;}
	.case_a_cocher_nous_rejoindre{width: 400px; margin: 0 auto; padding: 0 auto; text-align: left;}

.formulaire_connexion{float: left; width: 100%; margin: auto; padding: auto; text-align: center;}
	.formulaire_connexion input[type="text"],.formulaire_connexion input[type="number"],.formulaire_connexion input[type="button"],.formulaire_connexion input[type="tel"],.formulaire_connexion input[type="email"] {width: 400px;}

	.css-checkbox { position: absolute; overflow: hidden; clip: rect(0 0 0 0); height: 1px; width: 1px; margin: -1px; padding: 0; border: 0; }#inputPreview { display: flex; gap: 20px; justify-content: center;	}.css-checkbox + label { position: relative; font-size: 14px; cursor: pointer; display: inline-flex; align-items: center; height: 20px; color: rgb(0, 0, 0); }.css-checkbox + label::before { content: " "; display: inline-block; vertical-align: middle; margin-right: 3px; width: 18px; height: 18px; background-color: white; border-width: 1px; border-style: solid; border-color: rgb(204, 204, 204); border-radius: 2px; box-shadow: none; }.css-checkbox:checked + label::after { content: " "; background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA1MTIgNTEyIj48cGF0aCBmaWxsPSIjNDY3NzU1IiBkPSJNMTczLjg5OCA0MzkuNDA0bC0xNjYuNC0xNjYuNGMtOS45OTctOS45OTctOS45OTctMjYuMjA2IDAtMzYuMjA0bDM2LjIwMy0zNi4yMDRjOS45OTctOS45OTggMjYuMjA3LTkuOTk4IDM2LjIwNCAwTDE5MiAzMTIuNjkgNDMyLjA5NSA3Mi41OTZjOS45OTctOS45OTcgMjYuMjA3LTkuOTk3IDM2LjIwNCAwbDM2LjIwMyAzNi4yMDRjOS45OTcgOS45OTcgOS45OTcgMjYuMjA2IDAgMzYuMjA0bC0yOTQuNCAyOTQuNDAxYy05Ljk5OCA5Ljk5Ny0yNi4yMDcgOS45OTctMzYuMjA0LS4wMDF6Ii8+PC9zdmc+"); background-repeat: no-repeat; background-size: 10px 10px; background-position: center center; position: absolute; display: flex; justify-content: center; align-items: center; margin-left: 0px; left: 0px; top: 0px; text-align: center; background-color: transparent; font-size: 10px; height: 20px; width: 20px; }


	.div_cache{position: fixed; left: 0px; top: 0px; z-index: 100; width: 100%; height: 100%; display: none; background-color: #000000bb;}
            .div_cache_contenu{display: block; margin: 5px; padding: auto; height: 95%; overflow: hidden; text-align: center; width: auto;}
               #grande_image{height: 100%; border-radius: 10px;}
            .div_cache_bloc{margin: 0 auto; padding: 0 auto; width: 65px; height: 65px; bottom: -10px; z-index: 200; text-align: center;}
            .div_image_cache{margin: auto; padding: auto;  height: 800px;}

.maski_form{
    position:absolute;
    left:-10000px;
}