// CSS utilisés **************************************************

/* div génériques --------------------------  */

#global_conteneur {
    scroll-snap-type		: y mandatory;
  	overflow-y				: hidden; 
    overflow-x				: hidden;
    width					: 100%;
    //display					: flex;
    //flex-direction			: column;
}
#global_conteneur, div {
    scroll-snap-align		: start; 	
}
/* Div ----------------------------------------------------------------------------*/


.div_pages {
	position				: relative;
   // display					: inline-block;   
    flex-direction			: column;
    width					: 100%;
    padding					: none;
    margin					: none;  
}

#page_alternative {
	position				: relative;
    display					: flex;
    flex-wrap				: wrap;
    overflow-y				: inline flex;
    border-bottom			: 1px solid black;
}

/*Header -------------------------------------*/
div.fond_entete{
	background-image		: url("http://www.fort-mutzig.eu/v_2022/_images/header/header_fond_0.jpg");
    background-size			: cover;
    //background-size			: contain;
    
}
#header_div_fond {	
    position				: absolute;
    top						: 0;
    width					: 100%;
    height					: 560px;
    background-color		: transparent;
    background-size			: cover;      
    padding					: 0;
}

#header_img {
	opacity					: 0;
    position				: absolute;
    left					: 50%;
    transform				: translate3d(-50%,-50%,0);
    top						: 50%;
    height 					: 560px;
    transition				: opacity 1s;
    width					: 100%;
    object-fit				: cover;
}

#header_menu {
	position				: absolute;
    display					: flex;
    flex-direction			: row;
    margin					: auto;

    top						: 15px;
    height					: 300px;
}

#header_menu_smart {
	position				: absolute;
    display					: flex;
    flex-direction			: row;
    margin					: auto;

    top						: 15px;
   
    height					: 300px;
     //right					: 30%;
}

#header_bandeau {
	width					: 100%;	
	display					: flex;
    background-color		: white;
}

#num_page {
	position				: absolute;
    top						: 0;
    left 					: 0;
    background-color		: transparent;
    color					: red;
	visibility				: hidden; 
    //visibility				: visible; 
}
#actus_titre{
	margin-top			: -22px;
    height				: 150px;
}
#id_page {
	position				: absolute;
    bottom					: 0;
    left 					: 0;
    background-color		: transparent;
    color					: red;
	visibility				: hidden; 
    //visibility				: visible; 
}

/* Page d'accueil (header avec menu racine ) -------------------*/
#header_conteneur {	
    width					: 100%;
    height					: 560px;
    //background-color		: transparent;
    overflow-y				: inline flex;
    padding					: none;
    margin					: none;
}
#en_tete {
	
	width					: 100%;
    height					: 560px;
	background-color		: transparent;
}
#header_nom_mois {
    position				: absolute;
    top						: 510px;
    left					: 20px;
	
    width					: 160px;
    height					: 40px;
    box-shadow				: 0 4px 8px 0 , 0 6px 20px 0 ;
    background-color		: transparent;
    background				: ;
	color					: ;
    font-family				: ;
    font-size				: ;
    font-weight				: bold;
    text-align				: center;
}

#header_menu {
	justify-content			: center;
  	align-items				: center;
    top						: 30px;
    height					: 90px;
    width					: 100%;
}
#header_icone_menu_smart {
	position				: absolute;
	justify-content			: center;
  	align-items				: center;
    top						: 30px;
    right					: 100px;
    height					: 90px;
    width					: 90px;
    visibility				: visible;
}
#header_menu_smart {
	position			: absolute;
    top 				: 30px; 
    height				: 270px;
    left				: 50px; //px;
    width				: 240px;
    background-color	: ; 
    
    margin				: 0 auto;
    max-width			: 80%; 
    background-color 	:  ; 
    box-shadow			: 0 4px 8px 0 , 0 6px 20px 0 ;  
    
//    visibility			: visible;
    visibility			: hidden;
}

#zone_logo {
	width					: 20%;
    height					: 90px;
}

/* Menu Choix de la langue */
#sel_langue {
	width				: 30%;
    top 				: 20px;
    margin				: auto;
}
#header_sel_langue_conteneur {
	position			: absolute;
    height				: 80px;
    width				: 180px;
    background-color	: ; 
    
    margin				: 0 auto;
    max-width			: 80%; 
    background-color 	:  ; 
    box-shadow			: 0 4px 8px 0 , 0 6px 20px 0 ;  
    
    visibility			: hidden;
}

#header_smart_sel_langue_conteneur {
	position			: absolute;
    top 				: 30px; 
    height				: 140px;
    left				: 10px;
    width				: 230px;
    background-color	: ; 
    margin				: 0 auto;
    
    background-color 	:  ; 
    box-shadow			: 0 4px 8px 0 , 0 6px 20px 0 ;  
    visibility			: hidden;
}

#sel_langue_smart {
	width				: 50%;
    top 				: 20px;
    margin				: auto;
}

#zone_menu_1_conteneur {
    height					: 90px;
    display					: inline-block;
    //vertical-align			: middle;
    display					: flex;
    flex-direction			: row;
}
#zone_menu_1_conteneur a {
	display					: table;
    vertical-align			: middle;
    text-decoration			: none;
}
.zone_menu_horizontal {
	width					: 30%;
    margin					: 15px;
    padding-top				: 10px;
    padding-left			: 10px;
    display					: inline-block;
    vertical-align			: middle;
}
#bandeau_titre_page {
	position				: absolute;
    background-color		: rgba(255, 255, 255, 0.75); //white;
	color					: ;
    top						: 400px;
    height					: 100px;
}

/* La div pour les sous-menus niveau 1 et 2 -----------------------*/
#header_ss_menu_conteneur {
    position				: absolute;
    margin					: auto;
    top						: 131px;
    width					: 100%;
    height					: 400px;
   	background-color		: white;
    display					: inline-block;
    display					: flex;
    flex-direction			: row;
    visibility				: hidden; 
}

#ss_menu_col_1 {
	background				: url(ss_menu/photo_menu_0.jpg) no-repeat;
    background-size			: cover;
    visibility				: true; 
	width					: 40%;
    height					: 400px
}
.ss_menu_col_2 {
	display					: flex run-in;
	width					: 35%;
    margin					: 10px;
    padding-top				: 10px;
    padding-left			: 10px;
    text-align				: left;
}
.ss_menu_col_3 {
	//background				: url(ss_menu/photo_menu_0.jpg) no-repeat;
    //background-size			: cover;
    width					: 33%;
	margin					: 10px;
    padding-top				: 10px;
	height					: 20px;
    text-align				: left;
}
.ss_menu_img_titre {
	position				: abolute;
	margin-top				: 75%;
    margin-left				: 20px;	
    height					: 40px;
    width					: 70%;
}
.ss_menu_img_txt {
	margin-top				: 260px;
    margin-left				: 20px;
    height					: 20px;
    background-color		: white;
}



/* Illustration du sous_menu */

#item_menu {
	text-decoration			: none;
}
#item_menu:hover, #galerie:hover, #diaporama:hover {
	color					: ;
}

/* Pages alternatives --------------------------*/

#bandeau_infos_conteneur{
	//margin-top			: -29px;
}
.intro_liste {
	width					: 50%;
	text-align				: left;
    padding					: 20px;
    
}
.intro_img {
	width					: 50%;
	padding					: 20px;
    border-left				: 1px solid black;
    display					: block;
    margin					: 0 auto;
}


//CSS	Anciens **************************************************

#actus_conteneur {
    background-color		: white; 
}

/* Home ____________________________________________*/
.link_fond_bleu, .link_fond_brun {
	color				: white;
    font				: ;	
	font-size			: ;
    font-weight			: bold;
    text-decoration		: none;   
}
.link_fond_bleu:hover {
	color				: ;
}
.link_fond_brun:hover {
	color				: ;
}
#galerie, #diaporama {
	background			: url(galerie/galerie_0.jpg) no-repeat;
    background-size		: cover;
    visibility			: true; 
}

.diapo_button{
	position: relative;
    background: ;
	color: ;
    transition: color .4s linear;
    transform: translatey(-50%);
    
    top: 80%;
    width : 80%;
    left: 10%;
    font-size: 1.4rem;
}

.diapo_button_txt {
    position		: absolute;
    background		: ;
	color			: ;
    transition		: color .4s linear;
    transform		: translatey(-50%);
    padding-bottom	: 5px;
    top				: 10%;
    width 			: 80%;
    left			: 10%;
    font-size		: 1.6rem;
}
.diapo_button_bas_txt{
	position: relative;
    background: ;
	color: ;
    transition: color .4s linear;
    transform: translatey(-50%);
    
    top: 80%;
    width : 80%;
    left: 10%;
    font-size: 1.4rem;
}

.diapo_button_2_txt {
    background: ;
	color: ;
    transition: color .4s linear;
    transform: translatey(-50%);  
}

/* ------------------------------------------ Gestion des titres des vignettes pour Smart ---------------- Début */
.div_diapo_txt {
	position			: absolute;
    background-color	: rgba(63, 146, 191, 0.5); // bleu
    transition			: color .4s linear;
    transform			: translatey(-50%);
  	box-shadow			: 0 4px 8px 0 , 0 6px 20px 0 ;
    top					: 50px;
    left				: 45%;
    min-width			: 50%; //150px;
    padding				: .5rem;
}

.diapo_txt_smart {	
    text-decoration		: none;
    color				: ;
    font-family			: ;
    font-size			: ;
    z-index				: 2;
}

/* ------------------------------------------ Gestion des titres des vignettes pour Smart ---------------- Fin */

.img_include_txt {
	position			: absolute;
	background			: ;
	color				: ;
    transition			: color .4s linear;
    transform			: translatey(-50%);
    top					: 80%;
    left				: 10%;
    padding				: .5rem;
    opacity				: 0.5;  
    
}
.img_txt {
	position			: absolute;
    background			: ;
	color				: ;
    transition			: color .4s linear;
    transform			: translateY(-30%);
    top					: 80%;
    left				: 10%;
    padding				: .5rem;
    font-size			: 2rem;
}

#link:hover {
	color 				: ;
}

/* Gestion du visuel popup du message de la page d'accueil */

#actus_visu {
    border			: solid 1px black;
    position		: fixed;
    left			: 50%;
    top				: 20%;
    z-index			: 100;
    height			: 400px;
    margin-top		: -200px;
    width			: 800px;
    margin-left		: -400px;
    visibility		: hidden;
}


/* CSS pour x vignetes côte à côte */

.vignette_3_button_txt {
	position: absolue;
    background: ;
	color: ;
    transition: color .4s linear;
    transform			: translate3d(5%,-120%,0);
   
    padding: .5rem;
    font-size: 1.2rem;
}

/* Fin CSS pour 3 vignetes côte à côte */

.diapo_button_txt:hover, .diapo_button_2_txt:hover, .img_include_txt:hover {
	background	: ;
}
#contenu_2 {
	position: relative;
}

.bouton_basic:hover, .link_basic:hover, .link_fond_bleu:hover, .diapo_button_2_txt:hover{
	color					: ;
}

.video_intro {
	width					: 100%;
    higth					: 600px;
    vertical-align			: middle;
}
.vignette {
    background-size			: cover; 
    height					: 500px;
}
.vignette_img {
    width					: 100%;
    box-shadow				: 0 4px 8px 0 , 0 6px 20px 0 ;
  	margin-top				: 1px;
    margin-bottom			: 1px;
    border-radius			: 8px;  
    object-fit				: cover; 
   
}
/*
.img_demi {
    width					: 100%;
    box-shadow				: 0 4px 8px 0 , 0 6px 20px 0 ;
  	margin-top				: 1px;
    margin-bottom			: 1px;
    border-radius			: 8px;  
    object-fit				: cover; 
    
}
*/
/*---------------------------- */

.langue_courante {
	font-size			: ;
    color				: ;
    text-decoration		: none;
}

.liste_deroulante_smart {
	list-style			: square inside url("puces/puce8.png"); 
    padding-left		: 15px;
    height				: 50px;
    text-align			: left;
    font-size			: ;
    color				: ;
    text-decoration		: none;
}
.liste_deroulante {
	list-style			: square inside url("puces/puce8.png"); 
    padding-left		: 15px;
    height				: 25px;
    text-align			: left;
    font-size			: ;
    color				: ;
    text-decoration		: none;
}
.liste_deroulante:hover, .liste_deroulante_smart:hover, .langue_courante:hover {
	color				: ;
    font-style			: italic;
}

/* Diaporama ---------------*/
	
.diapo {
	opacity				: 0;
    position			: absolute;
    left				: 50%;
    transform			: translate3d(-50%,-50%,0);
    top					: 50%;
    height 				: 500px;
    transition			: opacity 2s;
    width				: 100%;
    max-width			: 600px;
    visibility			: visble;
}
img.h500_full {
    position			: absolute;
    left				: 50%;
    transform			: translate3d(-50%,-50%,0);
    top					: 50%;
    height 				: 500px;
    transition			: opacity 2s;
    width				: 100%;
    max-width			: 600px;
}
button{
    border: none;
    cursor: pointer
}
	
.precedent, .suivant{
    color					: white; 
    transition				: color .4s linear;
    transform				: translatey(-50%);
    top						: 50%;
    padding					: .5rem;
    font-size				: 2rem;
    text-decoration			: none;
    background				: black;
    position				: absolute
}

.precedent{left:0}
.suivant{right:0}
	
.precedent:hover,
.suivant:hover{
	color: ;
}

/* Google Maps ------------------------------*/
.map_container {
	color: Black;
    top: 0%;
    width : 100%;
    position: relative;
   
     background: -webkit-gradient(linear, left top, left bottom, from(rgba(215, 212, 212,0.5)), to(rgba(215, 212, 212, 0)));
    /* For Mozilla */
     background: -moz-linear-gradient(top, rgba(215, 212, 212,0.5), rgba(215, 212, 212, 0));
    /* For lt IE8 */
     filter: progid:DXImageTransform.Microsoft.gradient(gradientyype=0,
    startColorstr='#D7D4D4', endColorstr='#D7D4D4');
    /* For gt IE8 */
     -moz-filter: progid:DXImageTransform.Microsoft.gradient(gradientyype=0,
    startColorstr='#D7D4D4', endColorstr='#D7D4D4');  
}

#plan_logo {
	float: center;
}

/*
div.legende [
	width					: 100%;
    text-align				: center;
    background-color 		:  ;
	box-shadow				: 0 2px 2px 0 , 0 4px 5px 0 ;
    border-radius			: 4px;  
    color					: ;
}
*/

/* [Calendrier]--------------------------------------------*/

#div_calendrier {
    margin				: 0 auto;
}

#iframe_calendrier {
  	top: 0;
  	left: 0;
  	bottom: 0;
  	right: 0;
  	width: 100%;
  	height: 360px;
}

.css_bloc_jour {
	width				: 40px;
    height				: 30px; 
    text-align			: right;
    padding				: 5px;
}

div.calendrier_une_semaine {
	display				: flex;
    flex-direction		: row;
}
div.calendrier_div_num_sem {
	width				: 11%;
    max-width			: 100px;
    height				: 30px;
    background-color 	:  ; 
    padding-top			: 10px;
    text-align			: right;
    margin-right		: 5px;
}
div.calendrier_div_jour {
	width				: 11%;
    min-width			: 40px;	
    max-width			: 50px;
    height				: 25px;
    text-align			: right;
    margin				: 5px;
    padding-right		: 5px;
}
div.calendrier_div_jour_txt {
	width				: 50%;
    min-width			: 40px;	
    --max-width			: 50px;
    height				: 25px;
    text-align			: left;
    margin				: 10px;
    padding-right		: 10px;
    padding-top			: 5px;
}
div.calendrier_div_sem {
    background-color 	:  ;
	box-shadow			: 0 2px 2px 0 , 0 4px 5px 0 ;
    border-radius		: 4px;  
    color				: ;
}
div.calendrier_div_we_ferie {
    background-color 	:  ;
	box-shadow			: 0 2px 2px 0 , 0 4px 5px 0 ;
    border-radius		: 4px;  
    color				: ;
}

div.calendrier_div_animation {
	box-shadow			: 0 2px 2px 0 , 0 4px 5px 0 ;
    border-radius		: 4px;
	background-blend-mode: multiply;
    background-color	: ;
	background-image	: no-repeat url("../_images/puces/coin_rouge.png");
	background-position	: bottom 0px right 0px;
   
}
div.calendrier_div_heute {
	box-shadow			: 0 2px 2px 0 , 0 4px 5px 0 ;
    border-radius		: 4px;
    background-blend-mode: normal;
    background-color	: ;
    background-image	:  no-repeat  url("../_images/puces/coin_jaune.png");
    background-position	: top right;
}
div.calendrier_div_ferme {
	
	background-color 	:  ;
    box-shadow			: 0 2px 2px 0 , 0 4px 5px 0 ;
    border-radius		: 4px;  
    color				: ;
}

div.jour_a_tester_smart {
	text-align	: center;
	background-color	: ;
    margin				: 20px;
}