/* 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-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/police-Blogger_Sans-Medium-webfont-License.txt        */
@font-face 
{
font-family: 'police-blogger_sansmedium';
src: url('fichiers/police-Blogger_Sans-Medium-webfont.eot');
src: url('fichiers/police-Blogger_Sans-Medium-webfont.eot?#iefix') format('embedded-opentype'),
url('fichiers/police-Blogger_Sans-Medium-webfont.woff2') format('woff2'),
url('fichiers/police-Blogger_Sans-Medium-webfont.woff') format('woff'),
url('fichiers/police-Blogger_Sans-Medium-webfont.ttf') format('truetype'),
url('fichiers/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/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, en mettant la 1ere qui servira... */
/*  license:  fichiers/police-DroidSans-webfont-License.txt        */
@font-face 
{
font-family: 'police-droid_sansregular';
src: url('fichiers/police-DroidSans-webfont.eot');
src: url('fichiers/police-DroidSans-webfont.eot?#iefix') format('embedded-opentype'),
url('fichiers/police-DroidSans-webfont.woff2') format('woff2'),
url('fichiers/police-DroidSans-webfont.woff') format('woff'),
url('fichiers/police-DroidSans-webfont.ttf') format('truetype'),
url('fichiers/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-invisible
{
color: #eaeaea;															        /* GRIS LE MÊME QUE CELUI DU FOND DE PAGE POUR RENDRE LE TEXTE INVISIBLE*/
}

.couleur14-invisible a																	/* GRIS LE MÊME QUE CELUI DU FOND DE PAGE POUR RENDRE LE TEXTE INVISIBLE*/
{
color: #eaeaea;															
}












.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;    
}




.cliquez-pour-agrandir a															/*     lien non survolé	     ROUGE */
{
color: #FF0000;												font-weight: bold;
text-decoration: none;
font-size: 1.2em;

}


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



.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, #98b92d, #307ca1);
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:#56CA3C;color:#ffffff;text-shadow:none}		
::selection{background:#56CA3C;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, #307ca1, #98b92d);
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;

}




.siret
{
color: #ffffff;
}

.siret a
{
color: #ffffff;
}





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


.siret
{
color: #000000;
}

.siret a
{
color: #000000;
}

        
        
    }




/* footer page FIN */
























/* publicites page */


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

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



/* publicites page FIN */














/* logos page */


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

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






/* logos page FIN */


















/* divers page */


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


/* divers page FIN */
















/* videos page */



.tableau-videos        
{
border: 1px solid #007CE2;	


}

.tableau-videos td          
{
border: 1px solid #007CE2;   
}



/* videos page FIN */













/* PAIEMENT PORTRAIT */


.paiement-portrait
{

width: 20%; 
margin: auto;
text-align: center;
margin-bottom: 30%;

padding: 1%;
border: 1px solid #007CE2;	
}






/* PAIEMENT PORTRAIT FIN */











/* ILLUSTRATIONS  */


.tableau-porfolio         
{
width: 100%;	

border: 1px solid #98B92D;
}


.tableau-porfolio td         
{
border: 1px solid #98B92D;


}



.tableau-porfolio
{
text-align: center;    
color: #000000;
}



.titre-tableau-portfolio
{
font-weight: bold;	
background-color: #98B92D;
}





.categorie-principale
{
background-color: #f3f3f3;
width: 70%;
border-radius: 20px 20px 20px 20px;      /*    bordure arrondies         */
}







.separation1
{
background-color: #d6d6d6;
height: 1px;
}









.portfolio-resume
{
width:70%;

}















.etoile0
{
        /*    aucune étoile pour dire c'est nul       */
}

.etoile1
{
background:url("fichiers/etoile1.png") no-repeat ;
}

.etoile2
{
background:url("fichiers/etoile2.png") no-repeat ;
}

.etoile3
{
background:url("fichiers/etoile3.png") no-repeat ;
}

.etoile4
{
background:url("fichiers/etoile4.png") no-repeat ;
}

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

}







.tableau-porfolio a:link /* lien non visité  VERT */  
{
   color: #008000; 
}
.tableau-porfolio a:visited /* lien visité VIOLET */ 
{
   color: #800080; 
}
.tableau-porfolio a:hover /* lien survolé VERT FONCÉ */
{
   color: #003C00; 
}








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

        
        
        
    }