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{width: 90%; font-weight: bold; margin: 5px 50px 15px 50px; height: auto; padding: 5px 0px 0px 40px; font-size: 22px; overflow: hidden; background: url(../images/puce.jpg) no-repeat; box-sizing: border-box;}
.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: 1920px;
    min-height: 100vh;
    max-width: 100%;
    display: flex;
    flex-direction: column;
    margin: 0 auto; 
    box-sizing: border-box;}
	#header{width: 1920px; max-width: 100%; margin: 0 auto; padding: 0px; position: fixed; top: 0px; z-index: 50; flex: 0 1 43px;}
		.header_images{width: 100%; height: 43px;}
		#image_accueil {
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
    margin: 0 auto;
    padding: 0;
    background: url("../images/image_index.jpg") no-repeat center center;
    background-size: 100% 100%;
}
        #menu{float: left; text-align: left; width: 100%; height: 43px; margin: 0 auto; padding-left: 110px; background-color: #0170b4; overflow: hidden; position: fixed; top: 0px; text-align: center; box-sizing: border-box; color: #ffffff; z-index: 30;}
			#menu.ouvert {
                width: 100%;
            }
            .menu-items {
                width: 100%;
                margin: 0 auto;
                padding: 0 auto;
                box-sizing: border-box;
            }
            .menu-item {
                float: left;
                margin: 0 auto;
                padding: 0 auto;
                color: white;
                width: 160px;
                height: 43px;
                transition: background-color 0.6s ease;
                box-sizing: border-box;
                padding-top: 12px;
            }
            .menu-item-sans-clic {
                float: left;
                color: white;
                width: 265px;
                height: 43px;
                box-sizing: border-box;
                padding-top: 12px;
                transition: background-color 0.6s ease;
                border-radius: 0px 8px 0px 0px;
            }

            .menu_connexion{
                position: relative;
                display: block;
                float: right;
                min-width: 160px;
                height: 43px;
                margin: 0 auto;
                box-sizing: border-box;
                color: white;
                text-align: center;
                padding-top: 12px;
                transition: background-color 0.6s ease;
                white-space: nowrap;
            }
			.menu_connexion img{vertical-align: middle;}

            .menu-item:hover, .menu-item-sans-clic:hover, .menu_connexion:hover {
                background-color: #86b625;
                cursor: pointer;
            }

.menu_item_connexion {
    display: block;
    visibility: visible;
    opacity: 1;
}
            .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_message{width: 100%; height: 35px; margin: 0 auto; padding-top: 7px; position: fixed; top: 0px; background-color: #ffffff; z-index: 20; transition: transform 0.4s ease-in-out; border-bottom: 1px solid #0170b4; text-align: center; box-sizing: border-box;}
		#logo_fdsea88{width: 100px; height: 100px; position: fixed; top: -110px; left: 30px; margin: 0 auto; background: url("../images/logo_fdsea88.png") no-repeat; background-position: center; vertical-align: middle; background-size: contain; z-index: 100;  transition: transform 0.4s ease-in-out;}
		#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;}
    
    .agrandi_menu {
        transform: translate(0, 43px);
    }
    .deplace_logo_fdsea88{
        transform: translate(0, 110px);
    }
    

	#page{width: 100%; background-color: #ffffff; margin: 80px 0 auto; padding: 0; display: flow-root; flex: 0 0 auto;}
		#index_gauche{float: left; width: calc(100% - 560px); height: 100%; padding: 20px;}
.marge_page_transforme{
        margin: 25px 0 auto;
    }
    
.liste_actualites {
   display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 280px));
    gap: 30px;
    width: 95%;
    max-width: 1750px;
    margin: 20px auto;
    justify-content: center;
}
            
.actu {
    display: flex;
    height: 100%;
    text-decoration: none;
    color: inherit;
}
.bloc_actualite {
    width: 100%;
    height: 320px;
    box-sizing: border-box;
    background-color: #ffffff;
    border: 2px solid #86b625;
    border-radius: 10px;
    overflow: hidden;

    transition: box-shadow 0.5s;

    display: flex;
    flex-direction: column;
}
.bloc_actualite:hover {
    box-shadow: 0px 0px 10px #000000;
}
.contenu_actualite {
    height: 100%;
    display: flex;
    flex-direction: column;
}
.titre_actualite{
    height: 55px;
    min-height: 55px;
    background-color: #d2d2d2;

    font-weight: bold;
    text-align: center;

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

    padding: 5px 8px;
    box-sizing: border-box;
}
.titre_espace_pratique{
    height: 40px;
    min-height: 40px;
    background-color: #d2d2d2;

    font-weight: bold;
    text-align: center;

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

    padding: 5px 8px;
    box-sizing: border-box;
}
.bloc_actualite img {
    width: 100%;
    height: 200px;
    min-height: 200px;

    object-fit: contain;
    object-position: center;

    background-color: #ffffff;
    display: block;
}
.date_actualite {
    color: black;
    text-align: center;
    box-sizing: border-box;
    padding: 5px;
}
.lire_actualite {
    color: #86b625;
    text-align: center;
    box-sizing: border-box;
    padding: 5px;
}
.lire_actualite:hover {       
    font-weight: bold;     
}
            .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{width: 100%; padding: 25px; margin: 0 auto; text-align: center; box-sizing: border-box; color: #0170b4;}
            .lien_grande_page a:visited{color: #0170b4;}
            .lien_grande_page a:hover{color: #0170b4; text-decoration: underline;}

		#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; border-radius: 10px; overflow: hidden; border: 2px solid #86b625;}
			.bloc_partenaire:hover{box-shadow: 0px 0px 10px #000000;}
				.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%;
    height: 114px;
    min-height: 114px;
    max-height: 114px;

    margin: 0;
    padding: 0;

    background-color: #0170b4;
    color: white;

    font-size: 13px;

    box-sizing: border-box;

    display: flex;
    flex-direction: row;
    align-items: stretch;

    clear: both;

    position: relative;
    z-index: 20;

    overflow: visible;
    z-index:800;
}

/* Les 3 réseaux sociaux redeviennent horizontaux */
.footer_reseaux {
    flex: 0 0 210px;

    width: 210px;
    height: 114px;

    display: flex;
    flex-direction: row;

    align-items: center;
    justify-content: flex-start;

    box-sizing: border-box;
}


/* Chaque réseau garde sa largeur de 70px */
.footer_reseaux .reseaux_sociaux {
    flex: 0 0 70px;

    width: 70px;
    height: 114px;

    float: none;

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

    box-sizing: border-box;
}


/* ---------------------------------------------------------
   Conteneur des textes
   --------------------------------------------------------- */

.footer_contenu {
    flex: 1 1 auto;

    min-width: 0;
    height: 114px;

    display: flex;
    flex-direction: row;
    align-items: stretch;

    box-sizing: border-box;
}


/* Adresse */
.footer_contenu .footer_adresse {
    flex: 1 1 0;

    min-width: 150px;
    height: 114px;

    padding: 20px 20px 10px 10px;

    box-sizing: border-box;

    overflow: hidden;

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


/* Zone 1 */
.footer_contenu .footer_zone1 {
    flex: 1 1 0;

    min-width: 250px;
    height: 114px;

    padding: 20px 10px;

    box-sizing: border-box;

    text-align: left;

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


/* Zone 2 */
.footer_contenu .footer_zone2 {
    flex: 1 1 0;

    min-width: 250px;
    height: 114px;

    padding: 20px 150px 10px 10px;

    box-sizing: border-box;

    text-align: right;

    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
}
/* ---------------------------------------------------------
   Nouvelle image à droite
   --------------------------------------------------------- */

.footer_image {
    margin-left: auto;

    width: 190px;
    height: 244px;
    
    position: absolute;
    bottom: 5px;
    right: 5px;

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

    box-sizing: border-box;

    z-index:800;
    transition: bottom 0.4s ease;
}

.footer_image img {   
    width: auto;
}
.footer_image:hover {     
    bottom: 30px;
}

/* ---------------------------------------------------------
   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;
}