@font-face {
	font-family: "Police";
	src: url('ubuntu.ttf');
}

	
@font-face {
	font-family: "PoliceTitre";
	src: url('comic-sans-ms.ttf');
}


@font-face {
	font-family: "Police_Gabriola";
	src: url("Gabriola.ttf");
}

@font-face {
	font-family: "Police_Ubuntu";
	src: url("ubuntu.ttf");
}

@font-face {
	font-family: "Police_Verdana";
	src: url("verdana.ttf");
}

@font-face {
	font-family: "Police_MeaCulpa";
	src: url("MeaCulpa-Regular.ttf");
}

h1 { 
font-family: "Police_verdana";
line-height:1;
}

html { 
  margin:0;
  padding:0;
 }

body {
	display: flex;
	flex-direction: column;
	margin: 0;
	padding:0;
	width:100%;
	height:100%;
	font-size: 100%;
	/*background-image:url('../SITE.Fond.jpg');*/
}

.BanniereTitre
{	
/* avec h1  ou h2 ou h3
*/
   	text-align: center;
	color:navy;
}

.TexteInvitationMessage {
	width:100%;
	margin-left:auto;
	margin-right:auto;
	height:auto;
	text-align: center;
    font-family: "Police_Verdana";
	color:navy;
}

.LBDL_TexteInvitationMessage {
	width:100%;
	margin-left:auto;
	margin-right:auto;
	height:auto;
	text-align: center;
    font-family: "LBDL_Police";	font-size:100%;
	color:navy;
	line-height:30px;
}


.Erreur {   
	text-align:center;
    font-family: "Police_Verdana";
    font-size:1em;
    font-style: italic;
    color:red;
	padding:2px 0px 2px 0px; /* TOP, RIGHT, BOTTOM, LEFT */
}



.TitreSite
{   font-family: "PoliceTitre";
	font-size:2rem;
    font-style: normal;
    font-weight: normal;
    color:navy;
	text-align:center;
	letter-spacing:2px;
}

/********************************************************************/
/********************************************************************/
/********************************************************************/

/* ***************************** PAR DEFAUT*/

.PoliceH1 {font-size:250%;}
.PoliceH2 { font-size:180%;} 

.TexteInvitationMessage,
.Erreur
{ 
font-size:120%;
}

.Textarea_height {height:6em;}
.TitreSite			{font-size:2rem;letter-spacing:2px;}
	
/********************************************************************/
/********************************************************************/
/********************************************************************/
@media screen and (max-width:1440px)  /* 1025 à 1440 */
{
.PoliceH1 {font-size:180%;}
.PoliceH2 { font-size:160%;} 

.TexteInvitationMessage,
.Erreur
{ 
font-size:100%;
}

.Textarea_height {height:5.5em;}
.TitreSite		 {font-size:1.5rem;letter-spacing:1px;}

}
/********************************************************************/
/********************************************************************/
/********************************************************************/
@media screen and (max-width:1024px)  /* 821 à 1024 */
{
.PoliceH1 {font-size:150%;} 
.PoliceH2 { font-size:140%;} 

.TexteInvitationMessage,
.Erreur
{ 
font-size:90%;
}
.Textarea_height {height:5em;}
.TitreSite		 {font-size:1.5rem;letter-spacing:1px;}
}



/********************************************************************/
/********************************************************************/
/********************************************************************/
@media screen and (max-width:820px) /* 769 à 820 */
{
.PoliceH1 {font-size:120%;} 
.PoliceH2 { font-size:110%;} 

.TexteInvitationMessage,
.Erreur
{ 
font-size:90%;
}
.Textarea_height {height:4em;}
.TitreSite		 {font-size:1.5rem;letter-spacing:1px;}
}



/********************************************************************/
/********************************************************************/
/********************************************************************/
@media screen and (max-width:768px) /* 641 à 768 */
{
.PoliceH1 {font-size:100%;}
.PoliceH2 { font-size:90%;} 

.TexteInvitationMessage,
.Erreur
{ 
font-size:70%;
}
.Textarea_height {height:3.5em;}
.TitreSite		 {font-size:1.5rem;letter-spacing:1px;}

}



/********************************************************************/
/********************************************************************/
/********************************************************************/
@media screen and (max-width:640px) /* 481 à 640 */
{
.PoliceH1 {font-size:90%;}
.PoliceH2 {font-size:80%;} 

.TexteInvitationMessage,
.Erreur
{ 
font-size:50%;
}
.Textarea_height {height:3em;}
.TitreSite		 {font-size:1.5rem;letter-spacing:1px;}
}



/********************************************************************/
/********************************************************************/
/********************************************************************/
@media screen and (max-width:480px) /*480 */
{
.PoliceH1 {font-size:40%;}
.PoliceH2 { font-size:40%;} 

.TexteInvitationMessage,
.Erreur
{ 
font-size:30%;
}
.Textarea_height {height:2em;}
.TitreSite		 {font-size:1.5rem;letter-spacing:1px;}
}