@import url('https://fonts.googleapis.com/css?family=Lato:300,400,700,900');

*{
	-webkit-box-sizing:border-box;
	-moz-box-sizing:border-box;
	box-sizing:border-box;
}

body {
  margin:0px;
  padding:0px;
  background-color:#efefef;
}



/** structure **/
.conteneur {
  width:1000px;
  margin:auto;
}

.mobile_element {
  display:none;
}



/*************************** forms *****************************/

input, textarea, select, .saisie {
  border:1px solid #ccc;
  color: #444;
  background-color: #ffffff;
  font-family: 'Lato', sans-serif;
  font-size:14px;
  padding:4px;
  margin:0;
}

input.inputSubmit,input[type=submit]  {
  border:0px;
  font-family: 'Lato', sans-serif;
  font-size:14px;
  background-color:#f99d1c;
  color: #FFFFFF;
  font-weight:300;
  cursor:pointer;
}
input.inputSubmit:hover, input[type=submit]:hover {
  background-color:#d77b0a;
}

input[type=radio] {
  border:0px;
  background:none;
}
input[type=checkbox] {
  border:0px;
  background:none;
}
.formChamp, .formChampLarge
{
	margin-bottom: 5px;
  float:left;
  width:45%;
  margin-right:5%;
}

.formChampLarge {
  width:100%;
  margin:0;
}

.formIntituleChamp
{
	margin-bottom: 5px;
  font-weight:700;
}
.formInputChamp
  {
	
}
.formInputSubmit
{
  margin-top:10px;
}

textarea#message {
  width:100%;
  height:100px;
}


/*special champ à ignorer pour contrer les robots*/
.mon_champ {
  display:none;
}

/*
erreur SQL
*/
.sql_error {
  padding:10px;
  margin:10px;
  background-color:#eeeeee;
  color:#aa0000;
}


/*************************** header *****************************/





#header {
  height:240px;
  background-image:url(../images/background_header.png);
  background-repeat:repeat-x;
}
#header_logo{
	width:373px;
	height:127px;
	background-repeat:no-repeat;
	background-position:center;
	background-image:url(../images/Logo-Association-Saint-Angele-373x127.svg);
	float:left;
	display:block;
	margin-top:60px;
}
#header_raccourcis{
	width:41px;
	height:160px;
	float:right;
	margin-top:46px;
  position:relative;
}
.header_raccourci{
	width:41px;
	height:41px;
	margin:6px 0px;
	background-position:center;
	background-repeat:no-repeat;
	display:block;
}
#header_raccourcis_facebook{
	background-image:url(../images/picto_facebook_OFF.png);
}
#header_raccourcis_rechercher{
	background-image:url(../images/picto_recherche_OFF.png);
}
#header_raccourcis_contact{
	background-image:url(../images/picto_contact_OFF.png);
}
#header_raccourcis_facebook:hover{
	background-image:url(../images/picto_facebook_ON.png);
}
#header_raccourcis_rechercher:hover{
	background-image:url(../images/picto_recherche_ON.png);
}
#header_raccourcis_contact:hover{
	background-image:url(../images/picto_contact_ON.png);
}
#header_presentation{
	width:486px;
	margin:40px 50px;
	float:left;
	background-position:top center;
	background-repeat:no-repeat;
	background-image:url(../images/picto_reseau_header.jpg);
}
#header_presentation_texte{
	margin:20px 0px;
	text-align:center;
	border-top:1px solid #e4e4e4;
	border-bottom:1px solid #e4e4e4;
}
#header_presentation_texte p{
	color:#4f4e4e;
	font-size:18px;
}

.header_recherche {
  position:absolute;
  margin:0;
  padding:0;
  display:none;
  top:53px;
  left:-190px;
  background-color:#dedede;
  height:41px;
  width:190px;
  border-radius:21px;
  padding:8px;
  transition: 1s;

}

  .header_recherche form {
    margin:0;
    padding:0;
    height:25px;
    
  }
  .header_recherche_texte {
    font-size:12px;
    padding:0px 4px; 
    border:0;
    background-color:#dedede;
    color:#000!important;
    height:25px;
    margin:0;
    float:left;
  }
  .header_recherche_btn {
    width:30px;
    height:25px;
    float:left;
    border-radius:21px;
  }


#header_open_menu {
  display:none;
}
/** variables couleur **/
/* dans style_couleurs.php */


/*************************** menu *****************************/


/*


#header_menu {
	height:56px;
  background-color:#FFF;
}

#header_menu a {
	width:156px;
	height:56px;
  float:left;
  padding:15px 5px;
  display:block;
  font-size:16px;
  color:#000;
  text-decoration:none;
  text-align:center;
  font-weight:700;
}
#header_menu a:hover {
	color:#FFF;
	height:56px;
}
.menu_orange{
	border-bottom:7px solid #f99d1c;
}
.menu_orange:hover{
	background-color:#f99d1c;
}
.menu_bleu{
	border-bottom:7px solid #007fc7;
}
.menu_bleu:hover{
	background-color:#007fc7;
}
.menu_vert{
	border-bottom:7px solid #96c984;
}
.menu_vert:hover{
	background-color:#96c984;
}
.menu_jaune{
	border-bottom:7px solid #ffc703;
}
.menu_jaune:hover{
	background-color:#ffc703;
}
.menu_violet{
	border-bottom:7px solid #b5278a;
}
.menu_violet:hover{
	background-color:#b5278a;
}
.menu_rouge{
	border-bottom:7px solid #ef4036;
}
.menu_rouge:hover{
	background-color:#ef4036;
}
#header_menu .menu_rouge{
	width:164px;
}



#milieu_index {
  min-height:500px;
  padding:30px 0px;
}


*/

/**** menu horizontal ***/
        #menu{
       	  width:100%;
           margin:0;
          padding:0;
          height:56px;
         background-color:#FFF;
         display:flex;
         justify-content:space-around;
        }
        
        #menu li {
       	width:100%;
       	height:56px;

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


        #menu li a {
          display:flex;
          font-size:16px;
          color:#000;
          text-decoration:none;
          text-align:center;
          font-weight:700;         
          height:56px;
          width:100%;
           justify-content: center;
           align-items: center; 
           border-bottom:7px solid #fde1ba;         
        }
        
        /* styles par couleur dans style_couleurs.php */
        
        #menu li a.nosousmenu {
          
        }
                
        #menu li a:hover, #menu li:hover > a {
          text-decoration:none;
          color:#fff;
          background-color:#f99d1c;
          transition:0.5s;  
          border-bottom:7px solid #f99d1c;
        }
        
        /* styles par couleur dans style_couleurs.php */
        
        #menu > li {
          cursor:pointer;
          float:left;
          position:relative;
          text-align:center;
        }
        
                
        /* actif */
        li.li_menu_actif a {
          border-bottom:7px solid #f99d1c!important;
          color:#fff!important;
          background-color:#f99d1c;
        }
        
        li.li_menu_actif a[couleur=violet] {
          border-bottom:7px solid var(--couleur-violet)!important;
          background-color:var(--couleur-violet);
        }        
        
        /* sub-menus*/

       
        /* conteneur sous menu */
        .ul_sousmenu {
          position:absolute;
          top:0px;
          left:50%;
          
          transform:translate(-50%, 0);
          opacity:0.95;
          

          z-index:1000;/*  1003 */

          display:none;
          /*display:block;*/
        	width:100%;
          height:auto;
        	padding:0;
          padding-top:56px;
          
          
        }

        #menu li:hover ul.ul_sousmenu {
          display:block;
        }
        /* element sous menu */
        .ul_sousmenu li{
          display:block;
          list-style-type:none;
          margin:0px;
          /*text-align:center;*/
          z-index:1003;

        	width:250px;
        
        	padding:0px!important;
        	border-bottom:#fff 1px solid!important;
          position:relative;
          
        }

        .ul_sousmenu li:hover{
          background-color:#f99d1c;
          transition:0.5s;  
          color:#fff!important;  
        }  
        .ul_sousmenu li a:hover {
          color:#fff!important;
          text-decoration:none;
          background-color:#f99d1c; 
        }             
        /* + styles par couleur dans style_couleurs.php */



        .ul_sousmenu li a { 
          display:block;
          padding:6px!important;
          margin:0;
          width:auto;
        	font-size:16px;
        	text-align:left;
          text-decoration:none;
          color:#000!important;
          border:0!important;
          background-image:none!important;
          background-color:#fff;
        }



        .ul_sousmenu li:last-child{
        	border-bottom:none!important;
        }
        
       
        #header_menu_home {
        	width:40%!important;
        	height:56px;

        	display:inline-block!important;
        }
        #header_menu_home a {
        	background-color:#949494;
        	background-position:center;
        	background-repeat:no-repeat;
        	background-image:url(../images/picto_home.png); 
          border-bottom:7px solid #949494!important;       
        }
        #header_menu_home a:hover{
        	background-color:#626262!important;
          border-bottom:7px solid #626262!important;       
        }
      

/*************************** page accueil *****************************/





.accueil_bloc_ecole_gen{
	width:313px;
	height:340px;
	float:left;
	margin:10px;
	background-color:#FFF;
}

#milieu .accueil_bloc_ecole_gen{ 
  width:210px;
}


.accueil_bloc_ecole_logo{
	height:106px;
	width:100%;
	background-color:#fff;
  background-repeat:no-repeat;
	background-position:center;
	background-size:auto;
}



.accueil_bloc_ecole_image{
	height:187px;
	width:100%;
	background-color:#ddd;
  background-repeat:no-repeat;
	background-position:center;
	background-size:cover;
}


.accueil_bloc_ecole_lien{
	height:47px;
	color:#FFF;
	display:block;
	padding:14px;
	text-transform:uppercase;
	font-size:18px;
	font-weight:700;
}

.accueil_bloc_ecole_gen:hover .accueil_bloc_ecole_lien{
	background-color:#333!important;
	color:#FFF;
  transition:0.4s;
}


/*************************** éléments identiques *****************************/

.background_rose{
	background-color:#e65ea2;
}
.background_orange{
	background-color:#f99d1c;
}
.background_bleu{
	background-color:#007fc7;
}
.background_vert{
	background-color:#96c984;
}
.background_jaune{
	background-color:#ffc703;
}
.background_violet{
	background-color:#b5278a;
}
.background_rouge{
	background-color:#ef4036;
}


.texte_rose{
	color:#e65ea2;
}
.texte_orange{
	color:#f99d1c;
}
.texte_bleu{
	color:#007fc7;
}
.texte_vert{
	color:#96c984;
}
.texte_jaune{
	color:#ffc703;
}
.texte_violet{
	color:#b5278a;
}
.texte_rouge{
	color:#ef4036;
}

.barre_titre {
  width:42px;
  height:8px;
  background-color:#f99d1c;/*defaut : orange*/
  margin-bottom:20px;
}

.barre-titre {
  display: block;
  width:42px;
  height:8px;
  background-color:#f99d1c;/*defaut : orange*/
  margin-top:10px;
  margin-bottom: 20px;
}

#btn-lien-etab {
  display: inline-block;
  float: right;
  border: 1px solid #f99d1c;/*defaut : orange*/
  color: #f99d1c;/*defaut : orange*/
  padding: 5px 10px;
  margin: 0 0 10px 10px;
  transition: all 0.2s ease;
}

/*
ne sert plus :
*/
/*

.puce_h2_rose{
	background-image:url(../images/puce_h2_rose.png);
}
.puce_h2_orange{
	background-image:url(../images/puce_h2_orange.png);
}
.puce_h2_bleu{
	background-image:url(../images/puce_h2_bleu.png);	
}
.puce_h2_vert{
	background-image:url(../images/puce_h2_vert.png);
}
.puce_h2_jaune{
	background-image:url(../images/puce_h2_jaune.png);
}
.puce_h2_violet{
	background-image:url(../images/puce_h2_violet.png);
}
.puce_h2_rouge{
	background-image:url(../images/puce_h2_rouge.png);
}
*/



/*************************** page interieure *****************************/



#milieu{
	width:100%;
	min-height:400px;
	margin:20px 0px 40px 0px;
	
}
#fil_ariane_bloc{
	height:40px;
	width:100%;
	background-color:#b6b6b6;
	display:block;
	padding:12px 32px;
	color:#FFF;
	font-size:14px;
}
#fil_ariane_bloc a{
	color:#FFF;
	font-weight:700;
	font-size:14px;
	padding: 0px 10px;
}
#milieu_page_int{
	padding:20px 40px 40px 40px;
  background-color:#FFF;
}



/*************************** carte *****************************/






#carte {
	width:100%;
	height:456px;
  margin-top:20px;
}
  #carte_iframe {
    width:100%;
    height:100%;
    overflow:hidden;
    border:0;
  }






/*************************** footer *****************************/







#footer_credits{
	height:40px;
	background-color:#FFF;
	margin-top:40px;
}
#footer_credits .conteneur{
	width:700px;
}
#footer_credits a{
	color:#4d4d4d;
	padding:10px;
	display:block;
	float:left;
}
#footer_credits a:hover{
	color:#000;
}


/*** etablissement ***/
/*
#etab_photo {
  background-repeat:no-repeat;
  background-position:center;
  background-size:cover;
  float:left;
  width:40%;
  height:300px;
  margin-bottom:20px;
}
#etab_texte {
  float:right;
  width:55%;
}
*/

#etab_photo {
  background-repeat:no-repeat;
  background-position:center;
  background-size:cover;

  width:100%;
  height:300px;
  margin-bottom:20px;
}
#etab_texte {

}

#etab_bandeau {
  height:120px;
}
#etab_logo {
	background-position:20px center;
	background-repeat:no-repeat;
  width:30%;
  height:100%;
  float:left;
}
#etab_adresse {
  width:40%;
  height:100%;
  float:left;
  background-repeat:no-repeat;
  background-position:left center;
  background-image:url('../images/puce_localisation_blanc.png');
  padding-left:60px;
  padding-top:30px;
  
  color:#fff;
  font-size:16px;
  text-align:left;    
  
}
#etab_site {
  width:30%;
  height:100%;
  float:left;
  display:block;
  background-color:rgba(0,0,0,0.1);
  
  background-repeat:no-repeat;
  background-position:center 24px;
  background-image:url('../images/www.png');  
  padding-top:60px;
  color:#fff;
  font-size:20px;
  text-align:center;
}
#etab_site:hover {
  background-color:rgba(0,0,0,0.2);
}

#etab_tel {
  color:#fff;
  margin-top:5px;
  font-size:16px;
}


/**** page contact ***/

#page_contact_plan {
  margin-bottom:10px;
}



#page_contact_plan_adresse {
	background-position:left top;
	background-repeat:no-repeat;
	background-image:url(../images/location-point.png);
  padding-left:75px;
  min-height:64px;
  
  float:left;
  width:40%;
}

#page_contact_plan_tel {
	background-position:left top;
	background-repeat:no-repeat;
	background-image:url(../images/phone-symbol.png);
  padding-left:75px;
  min-height:64px;
  padding-top:1px;
  
  float:left;
  width:30%;
}





#page_contact_plan_map {
	background-position:left top;
	background-repeat:no-repeat;
	background-image:url(../images/compass.png);
  padding-left:75px;
  min-height:64px;
  padding-top:1px;
  display:block;
  
  float:left;
  width:30%;
}

#page_contact_intro {
  margin:10px 0 10px 0;
}