/* le media queries

@media all and (max-width: 1024px) 
    {

.ici le paramètre
{
blaba: test;
}
 
    }


doit se placé juste sous le prédécesseur
 */



    


body
{
background-color: #eaeaea;

font-size: 0.8em;
font-family: police-globerbold_free, police-droid_sansregular, 'Trebuchet MS', Arial, sans-serif;

background-attachment: fixed; /* le fond de la page reste fixe */

display: flex;
flex-wrap: wrap;
    
}


/* police pour le titre de chaque page: portfolio, bannières etc... */
/*  license:  fichiers/polices/police-Blogger_Sans-Medium-webfont-License.txt        */
@font-face 
{
font-family: 'police-blogger_sansmedium';
src: url('fichiers/polices/police-Blogger_Sans-Medium-webfont.eot');
src: url('fichiers/polices/police-Blogger_Sans-Medium-webfont.eot?#iefix') format('embedded-opentype'),
url('fichiers/polices/police-Blogger_Sans-Medium-webfont.woff2') format('woff2'),
url('fichiers/polices/police-Blogger_Sans-Medium-webfont.woff') format('woff'),
url('fichiers/polices/police-Blogger_Sans-Medium-webfont.ttf') format('truetype'),
url('fichiers/polices/police-Blogger_Sans-Medium-webfont.svg#blogger_sansmedium') format('svg');
font-weight: normal;
font-style: normal;
}


/* police pour le titre: Création d'images haute définition pour tous les usages... */
/*  license:  fichiers/polices/police-Shanti-Regular-License.txt        */
@font-face 
{
font-family: 'police-Shanti-Regular';
src: url('fichiers/police-Shanti-Regular.eot');
src: url('fichiers/police-Shanti-Regular.eot?#iefix') format('embedded-opentype'),
url('fichiers/police-Shanti-Regular.woff2') format('woff2'),
url('fichiers/police-Shanti-Regular.woff') format('woff'),
url('fichiers/police-Shanti-Regular.ttf') format('truetype'),
url('fichiers/police-Shanti-Regular.svg#shantiregular') format('svg');
font-weight: normal;
font-style: normal;
}



/* police générale que me sert pour tout le restant, faut juste choisir dans le body
police-droid_sansregular, police-globerbold_free,  en mettant la 1ere qui servira... */
/*  license:  fichiers/polices/police-Glober_Bold_Free-webfont-License.txt        */
@font-face 
{
font-family: 'police-globerbold_free';
src: url('fichiers/polices/police-Glober_Bold_Free-webfont.eot');
src: url('fichiers/polices/police-Glober_Bold_Free-webfont.eot?#iefix') format('embedded-opentype'),
url('fichiers/polices/police-Glober_Bold_Free-webfont.woff2') format('woff2'),
url('fichiers/polices/police-Glober_Bold_Free-webfont.woff') format('woff'),
url('fichiers/polices/police-Glober_Bold_Free-webfont.ttf') format('truetype'),
url('fichiers/polices/police-Glober_Bold_Free-webfont.svg#globerbold_free') format('svg');
font-weight: normal;
font-style: normal;
}



/* police générale que me sert pour tout le restant, faut juste choisir dans le body
police-droid_sansregular, police-globerbold_free,  en mettant la 1ere qui servira... */
/*  license:  fichiers/polices/police-DroidSans-webfont-License.txt        */
@font-face 
{
font-family: 'police-droid_sansregular';
src: url('fichiers/polices/police-DroidSans-webfont.eot');
src: url('fichiers/polices/police-DroidSans-webfont.eot?#iefix') format('embedded-opentype'),
url('fichiers/polices/police-DroidSans-webfont.woff2') format('woff2'),
url('fichiers/polices/police-DroidSans-webfont.woff') format('woff'),
url('fichiers/polices/police-DroidSans-webfont.ttf') format('truetype'),
url('fichiers/polices/police-DroidSans-webfont.svg#droid_sansregular') format('svg');
font-weight: normal;
font-style: normal;
}










@media all and (max-width: 1024px) /* éléments changeant quand taille atteinte */
    {

img
{
max-width: 100%;
}
 
video
{
max-width: 100%;
}
 
 
 
 
    }




.bloc_page
{
width: 1100px;
margin: auto;
/* border: 1px blue dashed;   bordure en tirets pour voir les bords  */

}


@media all and (max-width: 1024px) /* éléments changeant quand taille atteinte */
    {

.bloc_page
{
width: auto;
}
        
    }






.titre1
{
text-align: center;

/* font-size: 1.9em;   taille de la police normal sans le kit de police*/
color: #393939;
font-weight: bold;


font-size: 2.3em;
font-family: 'police-blogger_sansmedium';     

}






.couleur1   /* ROUGE FONCÉ*/
{
color: #851607;
}

.couleur1 a   /* ROUGE FONCÉ*/
{
color: #851607;
}


.couleur1-gras   /* ROUGE FONCÉ*/
{
color: #851607;
font-weight: bold;
}




.couleur2
{
color: #393939;												/* GRIS FONCÉ */

}


.couleur2 a
{
color: #393939;												/* GRIS FONCÉ */

}





.couleur3 																	/* BLANC */
{
color: #ffffff;															
}

.couleur3 a															/* BLANC */
{
color: #ffffff;													
}




.couleur5 																	/* GRIS CLAIR */
{
color: #9A9A9A;												

}

.couleur5 a															/* GRIS CLAIR */
{
color: #9A9A9A;												

}




.couleur7 																	/* VERT BLEUTÉ */
{
color: #008080;															
}

.couleur7 a																/* VERT BLEUTÉ */
{
color: #008080;															
}


.couleur7-gras a																/* VERT BLEUTÉ */
{
color: #008080;														font-weight: bold;	
}





.couleur8 																	/* VERT FONCÉ */
{
color: #008000;															
}


.couleur8 a																/* VERT FONCÉ */
{
color: #008000;															
}




.couleur11																	/* ROUGE CLAIR*/
{
color: #FF0000;															
}

.couleur11 a																	/* ROUGE CLAIR*/
{
color: #FF0000;															
}


.couleur11-gras
{
color: #FF0000;
font-weight: bold;
}








.couleur13																/* BLEU FONCÉ*/
{
color: #0044aa;															
}

.couleur13 a																	/* BLEU FONCÉ*/
{
color: #0044aa;															
}









.couleur14																/* BLEU CIEL*/
{
color: #699BCD;															
}

.couleur14 a																	/* BLEU CIEL*/
{
color: #699BCD;
}











.espacement1
{
padding-top: 25px;    
}



.espacement2
{
padding-top: 45px;
}


.espacement3
{
padding-top: 0px;
}





.gras
{
font-weight: bold;
}


.souligner
{
text-decoration: underline;
}


.gras-souligner
{
font-weight: bold;
text-decoration: underline;
}






.italique
{
font-style: italic;    
}







.tableau1-flyers-affiche-etc
{
width: 50%;
margin: auto;
padding-top: 25px; 

/* border: 1px #0081c2 dashed;   bordure en tirets pour voir les bords  */    
}



@media all and (max-width: 1024px) /* éléments changeant quand taille atteinte */
    {


.tableau1-flyers-affiche-etc
{
width: 80%;
margin: auto;
padding-top: 25px; 

/* border: 1px #0081c2 dashed;       bordure en tirets pour voir les bords  */
}


        
    }








.tableau2-flyers-affiche-etc
{
width: 60%;
margin: auto;
padding-top: 65px;

/* border: 1px #aa00ff dashed;      bordure en tirets pour voir les bords  */ 
}




@media all and (max-width: 1024px) /* éléments changeant quand taille atteinte */
    {



.tableau2-flyers-affiche-etc
{
width: 80%;
margin: auto;
padding-top: 65px;

/* border: 1px #aa00ff dashed;       bordure en tirets pour voir les bords  */
}



        
    }










.tableau3-flyers-affiche-etc
{
width: 30%;
margin: auto;


/* border: 1px #008300 dashed;       bordure en tirets pour voir les bords  */
}



@media all and (max-width: 1024px) /* éléments changeant quand taille atteinte */
    {



.tableau3-flyers-affiche-etc
{
width: 70%;
margin: auto;


/* border: 1px #008300 dashed;       bordure en tirets pour voir les bords  */
}




        
    }










/* header page */

.icones-drapeaux
{
position: absolute;
right: 0.5%;
top: 0.5%;
}    



@media all and (max-width: 1800px) /* éléments changeant quand taille atteinte */
    {

.icones-drapeaux
{
display: none;
} 
        
    }






.header1
{
display: flex;
flex-direction: row;
justify-content: space-around;
align-items: center;

/* border: 2px #ffff00 dashed;       bordure en tirets pour voir les bords  */
}



@media all and (max-width: 1024px) /* éléments changeant quand taille atteinte */
    {

.header1
{
display: none;
} 
        
    }




.menuhorizontale nav ul
{
display: flex;
flex-direction: row;
justify-content: space-around;
align-items: center;    
    
list-style-type: none;    
padding-top: 0.6%;
padding-bottom: 0.6%;
margin-right: 15px;



/* border: 2px #aa00ff dashed;    bordure en tirets pour voir les bords */
}



@media all and (max-width: 1024px) /* éléments changeant quand taille atteinte */
    {

.menuhorizontale nav ul
{
text-shadow: 2px 2px 4px #77aa15;
}

        
    }





    
    
    
body .menuhorizontale
{
/* background-color: #006680; (une couleur uni simplet) */
background: linear-gradient(to right, #0079e2, #00a4cb);
width: 100%;
border-radius: 10px 10px 10px 10px;       /* bordure arrondies */

}    




@media all and (max-width: 1024px) /* éléments changeant quand taille atteinte */
    {

body .menuhorizontale
{
background: none;
border: none;        
}
        
    }





.menuhorizontale a	/* lien non survole */
{
color: #ffffff;

text-decoration: none;
font-size: 1em;
font-weight: bold;
}


.menuhorizontale a:hover /* lien survole */
{
color: #DCDCDC;

text-decoration: none;    
font-size: 1em;
font-weight: bold;
}




@media all and (max-width: 1024px) /* éléments changeant quand taille atteinte */
    {


.menuhorizontale a	/* lien non survole */
{
color: #000000;

text-decoration: none;
font-size: 1em;
font-weight: bold;
}


.menuhorizontale a:hover /* lien survole */
{
color: #343434;

text-decoration: none;    
font-size: 1em;
font-weight: bold;
}

     
    }





.titre-grand
{
padding-left: 10px;
/* font-size: 1.4em;   taille de la police normal sans le kit de police */
font-weight: bold;
    
/* border: 2px #ff55ff dashed;   bordure en tirets pour voir les bords  */
font-size: 1.6em;
font-family: 'police-Shanti-Regular';  
text-align: justify;  /* comme les journaux */   

}




@media all and (max-width: 1024px) /* éléments changeant quand taille atteinte */
    {


.titre-grand
{
display: none;
}

        
     
    }








/* header page FIN */










/* vignettes pages */


.mes-vignettes nav ul
{
display: flex;
flex-direction: row;    
flex-wrap: wrap;
justify-content: center;
align-items: center;


list-style-type: none;




/* border: 1px #ff00ff dashed;   bordure en tirets pour voir les bords  */
}




.mes-vignettes nav li
{
margin: 25px;


/* border: 1px #0000ff dashed;     bordure en tirets pour voir les bords  */
}



.mes-vignettes img
{
box-shadow: 6px 6px 10px black;  
}





/* vignettes pages FIN */






::-moz-selection{background:#57c6e2;color:#ffffff;text-shadow:none}		
::selection{background:#57c6e2;color:#ffffff;text-shadow:none}





/* footer page */


.footer2
{
display: flex;
flex-direction: row;
justify-content: space-around;

padding-top: 10px;
/* border: 1px #ff0000 dashed;    bordure en tirets pour voir les bords  */   

}


.footer2 a
{
text-decoration: none;
}






.menuhorizontale2 nav ul
{
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;

list-style-type: none;
padding-top: 0.6%;
padding-bottom: 0.6%;
margin-right: 15px;    

font-weight: bold;

/* border: 2px #aa00ff dashed;   bordure en tirets pour voir les bords  */
}





@media all and (max-width: 1024px) /* éléments changeant quand taille atteinte */
    {

.menuhorizontale2 nav ul
{
text-shadow: 2px 2px 4px #307ca1;
}

        
    }






body .menuhorizontale2
{

/* background-color: #006680; (une couleur uni simplet) */
background: linear-gradient(to right, #0079e2, #00a4cb);
width: 100%;
border-radius: 10px 10px 10px 10px;       /* bordure arrondies */

    
    
/*
margin-top: 35px;
*/

}




@media all and (max-width: 1024px) /* éléments changeant quand taille atteinte */
    {

body .menuhorizontale2
{
background: none;
border: none;   
}
        
    }







.menuhorizontale2 a	/* lien non survole */
{
color: #ffffff;

text-decoration: none;
font-size: 1em;
font-weight: bold;
}


.menuhorizontale2 a:hover /* lien survole */
{
color: #DCDCDC;

text-decoration: none;    
font-size: 1em;
font-weight: bold;
}



@media all and (max-width: 1024px) /* éléments changeant quand taille atteinte */
    {


.menuhorizontale2 a	/* lien non survole */
{
color: #000000;

text-decoration: none;
font-size: 1em;
font-weight: bold;
}


.menuhorizontale2 a:hover /* lien survole */
{
color: #343434;

text-decoration: none;    
font-size: 1em;
font-weight: bold;
}

        
        
    }









.texte1 a	/* lien non survolé */
{

font-size: 1.3em;
color: #0044aa;
text-decoration: none;
}



.texte1 a:hover /* lien survolé */
{

font-size: 1.3em;
color: #000000;
text-decoration: none;

}





/* footer page FIN */
























/* publicites page */


.publicites-vignettes
{
text-align: center;
    
}

.publicites-vignettes img
{
padding: 10px;
    
}



/* publicites page FIN */
















































/* une barre horizontale en haut et en bas apparaitrons */

@media all and (max-width: 1024px) /* éléments changeant quand taille atteinte */
    {



.barre-horizontale1
{
/* background-color: #006680; (une couleur uni bleu simplet) */
background: linear-gradient(to right, #ff0000, #0000ff);
width: 100%;
height: 1%;

position: fixed;
left: 0%;
top: 0%;

opacity: 0.6;

    

}




.barre-horizontale2
{
/* background-color: #006680; (une couleur uni bleu simplet) */    
background: linear-gradient(to right, #0000ff, #ff0000);
width: 100%;
height: 1%;

position: fixed;
left: 0%;
bottom: 0%;

opacity: 0.6;
}

        
        
        
    }



    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
/* À PARTIR D'ICI C'EST POUR GRUISSAN */    
    
    
    
    
    
    
    
    
    
/* calendrier */

.tarifs_de_la_semaine         /*  les balise th et td vont appliquer la bordure 1px  lisse et couleur noir */
{
   border: 1px solid #007CE2;

	
}

.tarifs_de_la_semaine td          /*  les balise th et td vont appliquer la bordure 1px  lisse et couleur noir */
{
   border: 1px solid #007CE2;


}



.tarifs_de_la_semaine
{
font-size: 13px;  /* pour que la police dans IE soit de taille normale  */


text-align: center;     /*ma photo de la page d'acceuil centrer*/

font-family: Verdana, Arial, Helvetica, sans-serif;      /* police */

color: #000000;
}



.tarifs_de_la_semaine
{
font-size: 13px;  /* pour que la police dans IE soit de taille normale  */


text-align: center;     /*ma photo de la page d'acceuil centrer*/

font-family: Verdana, Arial, Helvetica, sans-serif;      /* police */

color: #000000;
}    





.deja_louer td          /*  les balise th et td vont appliquer la bordure 1px  lisse et couleur noir */
{
   border: 1px solid black;


}



.deja_louer
{
font-size: 13px;  /* pour que la police dans IE soit de taille normale  */


font-family: Verdana, Arial, Helvetica, sans-serif;      /* police */
}


.deja-louer-texte
{
color: #000000;
}


.deja_louer_fond
{
background-color: #EC2020; /* fond color */

width: 35%;      /*dimension de la largeur de la cellule totale*/
}





th, .corps5 td          /*  les balise th et td vont appliquer la bordure 1px  lisse et couleur noir */
{
   border: 1px solid #0395D1;


}

.corps5
{
width: 350px;         /*largeur du corps sur la page */

text-align: center;     /*ma photo de la page d'acceuil centrer*/

font-size: 13px;  /* pour que la police dans IE soit de taille normale  */

color: #000000;
}


body .corps5
{
background-image:url("fichiers/images/tableau-piscine.jpg"); /* image de fond de toute la page */

}



.jour-louer
{
background-color: #EC2020; /* fond color */


}



/* fin calendrier */























































/* général  */





.liens-partenaires a:hover /* lien survolé */
{
   color: #466889; 
   text-decoration: none;

font-family: Verdana, Arial, Helvetica, sans-serif;
}


.liens-partenaires a	/* lien non survole */
{
   color: #699BCD;
   text-decoration: none;

font-family: Verdana, Arial, Helvetica, sans-serif;
}







.wikipedia a:hover /* lien survolé */
{
   color: #466889; 
   text-decoration: none;
font-size: 13px;
font-family: Verdana, Arial, Helvetica, sans-serif;
}


.wikipedia a	/* lien non survole */
{
   color: #699BCD;
   text-decoration: none;
font-size: 13px;
font-family: Verdana, Arial, Helvetica, sans-serif;
}








body .banniere
{
background:url("fichiers/banniere.png") no-repeat;

height: 145px;
width: 970px;
}


.banniere
{
border-radius: 20px 20px 20px 0px;      /*    bordure arrondies         */
}







.tel 																	/* BLANC */
{
color: #ffffff;															
}





@media all and (max-width: 1024px) /* éléments changeant quand taille atteinte */
    {


.tel
{
color: #000000;

text-decoration: none;
font-size: 1em;
font-weight: bold;
}




    }


    
    
    
    
    
    
    
/* fin   général  */