/*********************************
    Eléments design
   ********************************** */
   @viewport {
   width: device-width; /* largeur du viewport */
   zoom: 1; /* zoom initial à 1.0 (et clin d'oeil aux fans d'IE6/7) */
}
         
                .image_fond {
                    /*background-color: #FF0000;*/

                    position:fixed;
                    /*background-image: url("<?php echo $gotoroot; ?>images/fond.jpg");*/
                    left:14.5%;
                    bottom:6.6%;
                    width:70.3%;
                    height:auto;

                    /*  border: 4px ridge darkblue; */

                }
                .image_fond img {
                    width: 100%;
                    height: 100%;
                }

                .table_accueil {
                    /*background-color: #FF0000;*/
                    /* background-image:url("images/new_design/fond1.png");*/
                    position:fixed;
                    width: 100%;
                    max-width : 100%;
                    max-height : 100%;
                    /*background-color:red;*/
                    top:0%;
                    left: 0%;
                    text-align:center;
                    /*border-bottom: 3px ridge darkblue;*/
                    z-index:3;
                }
                .fond_cadre {
                    position:absolute;
                    width: auto;
                    min-width: 100%;
					height:100%;
					
                    /* background-color:black; */
                    top:0;
                    left: 0;
                    text-align:center;
                    /*border-bottom: 3px ridge darkblue;*/
                    z-index:3;
					
                }
				
                .table_accueil img{
                    width:100%;
                    height:100%;
                }
                
.normal {
	filter: invert(0%);
}

.inverted {
	-webkit-filter: invert(1);
   filter: invert(1);
}


                .tout{
                    background-color:#6257C4;
                    position:fixed;
					
                    left:0px;
                    top:0px; /* ??? proportion affichage à régler !!! */
                    width:100%;
                    overflow:auto;
                    z-index:18;

                }
    
      
			/*Div TITRE PAGE*/
				.titrePageHeader {
					background: linear-gradient(45deg, rgba(255,225,250,0.95), rgba(255,255,215,0.83));
                    
					left:5.5%;
                    width:89%;
					height: 5%;
					position: fixed;
					text-align: center;
					align-items: center;
					/* background-color: red; */
					
					top: 17%;
					z-index: 999;
				}
				.contourHead {
                    box-shadow: 1px 1px #ccc, -1px -1px #fdf8e3, -1px 1px #ccc, 1px -1px #fdf8e3, 3px 3px 1px #ddd ;
					background-image: linear-gradient(45deg, #dbd6c1, #fdf8e3 40%, #dbd6c1);
					padding: 0 0.5% 0 0.5%;
					align-self:center;
					
                   
                }
				.pied_page {
                    /*background-image:url("images/new_design/pied.png");*/
                    /*background-color:black;*/
					
                    
					background: linear-gradient(45deg, rgba(255,255,215,0.85), rgba(255,230,250,0.80));
                    position:fixed;
					left:5.5%;
                    width:89%;
                    height: 6.5%;
                    top:93%;
                    text-align:center;
                    /* border-top: 4px ridge darkblue;*/
                    z-index:4;

                }
              
        /*
        Le conteneur centrale
        */
    hr.style-two {
    border: 0;
    height: 3px;
	margin-left:20%;
	margin-right:20%;
    background-image: linear-gradient(to right, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0));
}
	.menu_gauche{
		visibility: visible;
		position:fixed;
		/*background-color:red;*/
		left:0px;
		  top:20%; 
		width:6%;
		height:80%;
		z-index: 100;
		align-content:space-between;
		justify-content: center;
		
	}

	.menu_droite2{
		background: linear-gradient(45deg, rgba(255,255,235,0.75), rgba(255,210,250,0.60));
		display: grid;
		grid-template-columns: repeat(9, 1fr);
		align-items: space-around;
		justify-content: center;  
		align-content: center;
		position:fixed;
		right:5.5%;
		Top:1.5%; 
		width:89%;
		height:15%;
		overflow:none;
		z-index: 100;
	}
	.conteneurBlog {
		background: linear-gradient(45deg, rgba(255,235,255,0.85), rgba(255,250,230,0.80));
		position:fixed;
		left:67.5%;
		top:22.5%;
		width:27%;
		height:70%;                   
		overflow:no;
		overflow-x:hidden;
		visibility:visible;
		z-index:7;
		-webkit-transition: all 0.5s;
		-o-transition: all 0.5s;
		-moz-transition: all 0.5s;
		transition: all 0.5s;

	}
	.conteneurB {
		
		background: linear-gradient(135deg, rgba(255,255,255,0.85), rgba(255,250,239,0.80));
		position:fixed;
		visibility:visible;
		left:5.5%;
		top:22.5%;
		width:61.7%;
		height:70%;
		overflow:auto;
		z-index:7;
		-webkit-transition: all 0.5s;
		-o-transition: all 0.5s;
		-moz-transition: all 0.5s;
		transition: all 0.5s;

	}
	.articleB{
		position: relative;
		height: auto;
		width: 15%;
		
	}
	.creative{
		text-align:justify; border-radius:0.5em; padding:0.5em; 
position: fixed; top:87%; left:20%; width:59.5%; height:11%; 
overflow: auto; visibility:visible;
		
                    background: linear-gradient(135deg, rgba(255,255,255,1), rgba(255,250,239,1));
	}
	.Btn_HoraireWelcome {
			display: flex; 
		/* align-content: center; */
					align-items: center;
					justify-items: stretch;
					/* justify-content: center; */
		position: absolute; width: auto; left: 0; height: 100%; 
		
	}
	.Btn_EntrerSite {
		
			display: flex; 
		/* align-content: center; */
					align-items: center;
					justify-items: center;
					/* justify-content: center; */
		position: absolute; width: auto; right: 0; height: 100%; 
		
	}
		.boutonNews {
		/*background: linear-gradient(135deg, rgba(205,155,155,0.85), rgba(255,250,239,0.20));*/
		border-radius: 5%;
		position:fixed;
                    left:20%;
                    top:2%;
                    width:60%;
                    height:13%;
                    overflow:none;
                    visibility:visible;
                    z-index:7;
					/* align-content: middle; */
					/* justify-content: center; */
                    -webkit-transition: all 0.5s;
                    -o-transition: all 0.5s;
                    -moz-transition: all 0.5s;
                    transition: all 0.5s;
	}
	.welcome {
		position:fixed;
                    left:20%;
                    top:1.4%;
                    width:60%;
                    height:14%;
                    overflow:none;
                    visibility:visible;
                    z-index:7;
                    -webkit-transition: all 0.5s;
                    -o-transition: all 0.5s;
                    -moz-transition: all 0.5s;
                    transition: all 0.5s;
					border-radius: 1em;
					background: linear-gradient(135deg, rgba(255,255,155,0.85), rgba(255,250,239,0.80));
	}
	.conteneur table {
		padding: 4px;
	}
                .conteneur1 {
                    position:fixed;
                    left:10.3%;
                    top:16.4%;
                    width:76.7%;
                    height:85%;
                    overflow:none;
                    visibility:visible;
                    z-index:7;
                    -webkit-transition: all 0.5s;
                    -o-transition: all 0.5s;
                    -moz-transition: all 0.5s;
                    transition: all 0.5s;

                }
	.menu_mobile {
		display: none;
		background-image: linear-gradient(125deg, #dcccae, #feeed0 40%, #dcccae);
		position:fixed;
		z-index:99;
		}

	
	.boutonsMobile {
		background-color:#CBBB9D;
		position:fixed;
		width:100%; height:90%; top:10%; left:0;
		z-index: 99;
		overflow:auto;
		visibility:hidden;
	}
	.boutonM2 {
		/* background: radial-gradient(circle at 80% 35%, rgba(250, 250, 240, 0.8), rgba(250, 250, 240, 0.4) 40%, rgba(0, 0, 0, 0) 90%);
		 border-radius:100%;*/
		 position:relative;
		width:85%;
		height:auto;

		-webkit-transition: all 5s;
                    -o-transition: all 5s;
                    -moz-transition: all 5s;
                    transition: all 5s;
		
	}
	.boutonM2 .img {
		width:100%;
		max-height:98%;
	}
	.boutonG {
		
		position:relative;
	   width:100%;
		height:auto;
		-webkit-transition: all 1s;
                    -o-transition: all 1s;
                    -moz-transition: all 1s;
                    transition: all 1s;
		

	}

                .bouton_menu {
                    width: 90%;
                }
                .bouton_menu img{
                    width: 100%;
                    height: 100%;
					
                }


                .masque_beige {
                    position:fixed;
                    top:0px;
                    left:0px;
                    width:100%;
                    height:100%;
                    background-color:#CBBB9D;
                    visibility:hidden;
                    z-index:0;
                }
                
        /*
                mobile design
        */
	.boutonBlog, .boutonSite{
		display:none;
	}

	.separDiv {
		width:100%;
		color:white;
		background-color:burlywood;
	}
	.boutonM {
		width:auto; 
		height:16%;

	}
               /*
        Les menus Lattéraux
        */
	.flex {
	  display: flex;
	  flex-wrap: wrap;
	}
	.flex1{
	  display: flex;
	  flex-wrap: no-wrap;
	}
	.bouton_lire { 
			position: fixed;   
			z-index: 999999;
			border-radius:10%;
					/*background: linear-gradient(135deg, rgba(255,255,255,0.45), rgba(255,250,239,0.50));*/
					
			
	}
	#bouton_lire{
		/*background-color:red;*/
		top:17.5%; 
		right:6.6%;
		width:12%;
		height:4%;
		align-content:center;
		justify-content: center;
	}
	#bouton_lire1{
		top:17.5%; 
		right:6.6%;
		width:12%;
		height:4%;
		align-content:center;
		justify-content: center;
		visibility:	hidden; 
	}
	
	
  
	

	.bubulle {
		position:relative;
					
					/*width: 300px;
					height: 300px;*/
					border-radius:50%;
					background: radial-gradient(circle at 100px 100px, #5cabff, #000);
				}
			
            /* nav > a {
  display: flex;
  align-content: end;
  align-items: end;
  justify-content: center;
  justify-items: center;
  height:auto;
}*/   
    


    /****************************************************
    pour rendre les iframe scrollable sur mac. En cours de test
    ****************************************************/
.scroll-wrapper {
	-webkit-overflow-scrolling: touch;
  	overflow-y: hidden;

	/* important:  dimensions or positioning here! */
}

.scroll-wrapper iframe {
	/* nada! */
}
    /****************************************************
    CLASS d'animation effet visuel...
    ****************************************************/

				.transition{
					-webkit-transition: all 0.5s;
                    -o-transition: all 0.5s;
                    -moz-transition: all 0.5s;
                    transition: all 0.5s;
				}
                .fond_texte {
                    margin-left:2em; 
                    margin-right: 2em; 
                    padding: 2em 2em;

                    background-color: #FFFFFE;

                    /*visibility:hidden;*/

                }
                .fond_texteOld {
                    margin-left:0.5em; 
                    margin-right: 0.5em; 
                    background-color: #FFFFEE; 

                    opacity:0.9; 
                    -moz-opacity:0.9; 
                    -khtml-opacity:0.9; 
                    filter:Alpha(Opacity=90);

                    /*visibility:hidden;*/


                }
                .survol {

                    -webkit-transition: all 0.5s;
                    -o-transition: all 0.5s;
                    transition: all 0.5s;

                }
                .survol a {
                    opacity: 0.75;
                }
                .survol a:hover {
                    filter: xray;
                    opacity: 1;
                    width: 101%;
                    -webkit-transition: all 0.5s;
                    -o-transition: all 0.5s;
                    transition: all 0.5s;
                }
                .shadow {

                    box-shadow: 1px 1px 2px #151515;
                }

                .shadowTable td{

                    box-shadow: 1px 1px 2px #151515;
                    border-radius: 0 0.51em 0 0.51em;
                    padding: 0.5em;
                }
                .shadow1 .boutonM {

                    box-shadow: 2px 2px 1px #151515;
                }
                .ombreText {

                    text-shadow: 2px 2px 2px #151515;
                }
                .ombreText a {

                    text-shadow: 1px 1px 3px #DDBBDD;
                }
                .ombreText a:hover {

                    text-shadow: 1px 1px 1px #1c1c1c;
                }


                .contour .boutonM {

                    border-radius: 0.31em;
                }
                .contourBox .boutonM {
                    box-shadow: 1px 1px #1c1c1c, -1px -1px #1c1c1c, -1px 1px #1c1c1c, 1px -1px #1c1c1c, 3px 3px 1px #151515 ;
                }
                
                .contourText {
                    text-shadow: 1px 1px #1c1c1c, -1px -1px #1c1c1c, -1px 1px #1c1c1c, 1px -1px #1c1c1c, 3px 3px 1px #151515 ;
                }
                .animeFade {
                    -moz-animation-duration: 6s;
                    -webkit-animation-duration: 6s;
                    animation-duration: 6s;
                    -moz-animation-name: animeFade;
                    -webkit-animation-name: animeFade;
                    animation-name: animeFade;
                    -moz-animation-iteration-count: infinite;
                    -webkit-animation-iteration-count: infinite;
                    animation-iteration-count: infinite;
                    -moz-animation-direction: normal;
                    -webkit-animation-direction: normal;
                    animation-direction: normal;
                }
                @-moz-keyframes animeFade {
                    from {
                        opacity:0.9; 
                        -moz-opacity:1;
                        -khtml-opacity:1;
                        filter:Alpha(Opacity=100);
                        opacity:1;

                    }
                    50%{
                        -moz-opacity:0.5;
                        -khtml-opacity:0.5;
                        filter:Alpha(Opacity=50);
                        opacity:0.5;
                    }
                    to {
                        -moz-opacity:1;
                        -khtml-opacity:1;
                        filter:Alpha(Opacity=100);
                        opacity:1;
                    }
                }

                @-webkit-keyframes animeFade {
                    from {
                        opacity:0.9; 
                        -moz-opacity:1;
                        -khtml-opacity:1;
                        filter:Alpha(Opacity=100);
                        opacity:1;

                    }
                    50%{
                        -moz-opacity:0.5;
                        -khtml-opacity:0.5;
                        filter:Alpha(Opacity=50);
                        opacity:0.5;
                    }
                    to {
                        -moz-opacity:1;
                        -khtml-opacity:1;
                        filter:Alpha(Opacity=100);
                        opacity:1;
                    }
                }

                @keyframes animeFade {
                    from {
                        opacity:0.9; 
                        -moz-opacity:1;
                        -khtml-opacity:1;
                        filter:Alpha(Opacity=100);
                        opacity:1;

                    }
                    50%{
                        -moz-opacity:0.5;
                        -khtml-opacity:0.5;
                        filter:Alpha(Opacity=50);
                        opacity:0.5;
                    }
                    to {
                        -moz-opacity:1;
                        -khtml-opacity:1;
                        filter:Alpha(Opacity=100);
                        opacity:1;
                    }
                }
                .animeColor {
                    -moz-animation-duration: 8s;
                    -webkit-animation-duration: 8s;
                    animation-duration: 8s;
                    -moz-animation-name: animeColor;
                    -webkit-animation-name: animeColor;
                    animation-name: animeColor;
                    -moz-animation-iteration-count: infinite;
                    -webkit-animation-iteration-count: infinite;
                    animation-iteration-count: infinite;
                    -moz-animation-direction: normal;
                    -webkit-animation-direction: normal;
                    animation-direction: normal;
                }
                @-moz-keyframes animeColor {
                    from {
                        background-color:#00103F;

                    }
                    50%{
                        background-color:#3F1000;
                    }
                    to {
                        background-color:#00103F;
                    }
                }

                @-webkit-keyframes animeColor {
                    from {
                        background-color:#00103F;

                    }
                    50%{
                        background-color:#3F1000;
                    }
                    to {
                        background-color:#00103F;
                    }
                }

                @keyframes animeColor {
                    from {
                        background-color:#00103F;

                    }
                    50%{
                        background-color:#3F1000;
                    }
                    to {
                        background-color:#00103F;
                    }
                }
                .animeColorText {
                    -moz-animation-duration: 12s;
                    -webkit-animation-duration: 12s;
                    animation-duration: 12s;
                    -moz-animation-name: animeColorText;
                    -webkit-animation-name: animeColorText;
                    animation-name: animeColorText;
                    -moz-animation-iteration-count: infinite;
                    -webkit-animation-iteration-count: infinite;
                    animation-iteration-count: infinite;
                    -moz-animation-direction: normal;
                    -webkit-animation-direction: normal;
                    animation-direction: normal;
                }
                @-moz-keyframes animeColorText {
                    from {
                        color:#D8A300;

                    }
                    50%{
                        color:#333;
                    }
                    to {
                        color:#D8A300;
                    }
                }

                @-webkit-keyframes animeColorText {
                    from {
                        color:#D8A300;

                    }
                    50%{
                        color:#333;
                    }
                    to {
                        color:#D8A300;
                    }
                }

                @keyframes animeColorText {
                    from {
                        color:#D8A300;

                    }
                    50%{
                        color:#333;
                    }
                    to {
                        color:#D8A300;
                    }
                }
                
		

  .lienjecache, .lienjemontre {font-style:italic; color: #FA0000;} /* ici, vous mettez ce qui */ 
  .lienjecache {margin-left: 5em; color: #dd0000; } /* vous semble bon */ 

.ow-anywhere {
	
  overflow-wrap: anywhere;
}

.ow-break-word {
	 /* white-space: nowrap; */
  /* overflow: scroll; */
  
  /* text-overflow: fade; */
  overflow-wrap: break-word;
   
  
}

.word-break {
  word-break: break-all;
}

.hyphens {
  -webkit-hyphens: auto;
  -ms-hyphens: auto;
  hyphens: auto;
}