/* GLOBAL */

html { height:100% }

body {
	height:100%;
	margin : 0px; 
	margin : 0px; 
	padding : 0px; 
}

.normal { 
	font-size:14px;
	font-family:Verdana,Arial;
}

.normal2 { 
	font-size:15px;
	font-family:Verdana,Arial;
}

.normalptl { 
	font-size:13px;
	font-family:Verdana,Arial;
}

.Bold20 {
font-family: Helvetica,Verdana,Arial;
font-size:20px;
line-height:1;
margin:0;
padding:0;
font-weight:bold;
color:#353639;
}

.MediumCheckbox { transform : scale(1.3); }
.BigCheckbox { transform : scale(2); }

.normalV {
	font-size:12px;
	font-family:Verdana,Arial;
}

.titre {
	font-size:14px;
	font-family:Verdana,Arial;
	color:#A84B00;
}

.titre2 {
	font-size:16px;
	font-family:Verdana,Arial;
	font-weight:bold;
	color:#A84B00;
}

.titre3 {
	font-size:18px;
	font-family:Verdana,Arial;
	font-weight:bold;
	color:#853d03;
}

.titre4 {
	font-size:20px;
	font-family:Helvetica,Verdana,Arial;
	color:#688228; 
	font-weight:bold;
	text-decoration: none;
	
}

.titre5 {
	font-size:18px;
	font-family:Helvetica,Arial,Verdana;
	color:#FFFFFF;
	font-weight:normal;
	text-decoration: none;
}

.titre6 {
	font-size:28px;
	font-family:Helvetica,Verdana,Arial;
	color:#688228; 
	font-weight:bold;
	text-decoration: none;
	text-shadow: 0 0 7px rgba(0,0,0,0.2);
}

.ptl {
	font-size:11px;
	font-family:Verdana,Arial;
}

.ptl2 {
	font-size:10px;
	font-family:Verdana,Arial;
}

.ptl3 {
	font-size:9px;
	font-family:Tahoma,Verdana,Arial;
	text-decoration: none;

}

.ptl4 {
	font-size:9px;
	font-family:Tahoma,Verdana,Arial;

}

.tptl {
	font-size:9px;
	font-family:Verdana,Arial;
}



.ttptl {
	font-size:9px;
	font-family:,Arial;
}


.InputPass { 
	font-size:13px;
	font-family:Verdana,Arial;
	width:150px;
	line-height:21px;
	border:none;
}

.ImgPass:hover {
   cursor: pointer;
}

.white { color: #FFFFFF }

td {
	font-family:Tahoma,Verdana;
	font-size:12px;
	color:#515151;
}
form {	margin:0px; }

a {
	
	color:#000000;
}

/* a souligné */
.as { text-decoration: underline;}
/* a sans lien */
.ass { text-decoration: none }
/* a sans lien block */
.assb { text-decoration: none; display:block}

a.1 {
	text-decoration: none;
	color:#515151;
}
a.2 {
	text-decoration: none;
	color:#6E7F95;
}
a.3 {
	text-decoration: none;
	color:#FFFFFF;
	 
}
a.4 {
	text-decoration: underline;
	color:#F3F5F5;
	 
}
a.5 {
	text-decoration: underline;
	color:#555D70;
}

.AUnderlineIfMouse { text-decoration: none;font-size:16px; font-family:Verdana,Arial;}
.AUnderlineIfMouse:hover { text-decoration: underline; color: #000000; }

.aligncenter { text-align: center; }
.CenterOuPetitRight { text-align: center; }
.alignleft { text-align: left; }
.alignright { text-align: right; }

.floatleft { float: left; }
.floatright { float: right; }
.ClearBoth { clear: both; }

.width100pc { width: 100%;}

.A1:link    { color:#505050; font-size:11px; font-family:Tahoma,Verdana,Arial;}
.A1:visited { color:#505050; font-size:11px; font-family:Tahoma,Verdana,Arial;}
.A1:hover   { color:#008800; font-size:11px; font-family:Tahoma,Verdana,Arial;}

.A2:link    { 
	font-size:13px; font-family:Helvetica,Verdana,Arial;text-decoration: none; 
	-webkit-transition: background-color 0.3s cubic-bezier(0, 0, 0, 0), color 0.3s cubic-bezier(0, 0, 0, 0), width 0.3s cubic-bezier(0, 0, 0, 0), border-width 0.3s cubic-bezier(0, 0, 0, 0), border-color 0.3s cubic-bezier(0, 0, 0, 0);
  -moz-transition: background-color 0.3s cubic-bezier(0, 0, 0, 0), color 0.3s cubic-bezier(0, 0, 0, 0), width 0.3s cubic-bezier(0, 0, 0, 0), border-width 0.3s cubic-bezier(0, 0, 0, 0), border-color 0.3s cubic-bezier(0, 0, 0, 0);
  -o-transition: background-color 0.3s cubic-bezier(0, 0, 0, 0), color 0.3s cubic-bezier(0, 0, 0, 0), width 0.3s cubic-bezier(0, 0, 0, 0), border-width 0.3s cubic-bezier(0, 0, 0, 0), border-color 0.3s cubic-bezier(0, 0, 0, 0);
  transition: background-color 0.3s cubic-bezier(0, 0, 0, 0), color 0.3s cubic-bezier(0, 0, 0, 0), width 0.3s cubic-bezier(0, 0, 0, 0), border-width 0.3s cubic-bezier(0, 0, 0, 0), border-color 0.3s cubic-bezier(0, 0, 0, 0);

}
.A2:visited { font-size:13px; font-family:Helvetica,Verdana,Arial;text-decoration: none; }
.A2:hover   { font-size:13px; font-family:Helvetica,Verdana,Arial;text-decoration: none;color:#9EC73B;position:relative;top:2px  }

.A3  { 
	font-size:20px; font-family:Helvetica,Verdana,Arial;text-decoration: none; font-weight:100;
	-webkit-transition: background-color 0.3s cubic-bezier(0, 0, 0, 0), color 0.3s cubic-bezier(0, 0, 0, 0), width 0.3s cubic-bezier(0, 0, 0, 0), border-width 0.3s cubic-bezier(0, 0, 0, 0), border-color 0.3s cubic-bezier(0, 0, 0, 0);
  -moz-transition: background-color 0.3s cubic-bezier(0, 0, 0, 0), color 0.3s cubic-bezier(0, 0, 0, 0), width 0.3s cubic-bezier(0, 0, 0, 0), border-width 0.3s cubic-bezier(0, 0, 0, 0), border-color 0.3s cubic-bezier(0, 0, 0, 0);
  -o-transition: background-color 0.3s cubic-bezier(0, 0, 0, 0), color 0.3s cubic-bezier(0, 0, 0, 0), width 0.3s cubic-bezier(0, 0, 0, 0), border-width 0.3s cubic-bezier(0, 0, 0, 0), border-color 0.3s cubic-bezier(0, 0, 0, 0);
  transition: background-color 0.3s cubic-bezier(0, 0, 0, 0), color 0.3s cubic-bezier(0, 0, 0, 0), width 0.3s cubic-bezier(0, 0, 0, 0), border-width 0.3s cubic-bezier(0, 0, 0, 0), border-color 0.3s cubic-bezier(0, 0, 0, 0);
}
.A3:hover   { color:#F1AA67; }

.opacity20 {  filter:opacity(20%); }
.opacity30 {  filter:opacity(30%); }
.opacity40 {  filter:opacity(40%); }

.defaut{
border-style: solid;
border-color: #AAAAAA;
border-width: 0px;
padding-top:5px;
padding-bottom:5px;
}
 
.selection{
border-style: solid;
border-color: #AAAAAA;
border-width: 2px;
background-color: #8888DD;
padding-top:5px;
padding-bottom:5px;
}

#idDiv{
padding: 2px;
border-width: 2px;
border-style: inset;
border-color: #AAAAAA;
}

inputboxOrange {
	border: 1px solid ##FF5900;
	background: #FFFFFF;
}

.invisible { display:none;}

.texte_recherche {
	border:hidden;font-family: arial, verdana, sans-serif;	font-size: 15px;color: #555555;
}

.texte_recherche:focus {
	outline: 0 none; /* Pour enlever la "bordure" jaune qu'ajoute Google Chrome au focus */
}

.entete { 
	position: fixed;
	top: 0;
	width:100%;
	z-index: 10;
	border-bottom: 1px solid #c0c0c0;
	-moz-box-shadow: 0px 1px 12px #555; 
	-webkit-box-shadow: 0px 1px 12px #555; 
	box-shadow: 0px 1px 12px #555; 
}

.enteteViewMail { 
	position: fixed;
	top: 0;
	width:100%;
	z-index: 10;
	border-bottom: 1px solid #c0c0c0;
	-moz-box-shadow: 10px 1px 12px #555; 
	-webkit-box-shadow: 10px 1px 12px #555; 
	box-shadow: 10px 1px 12px #555; 
}

/*.CheckBoxPuisLabelModern {
	position: absolute;  
}*/

.CheckBoxPuisLabelModern [type="checkbox"]:not(:checked), 
.CheckBoxPuisLabelModern [type="checkbox"]:checked {
	/* Cache la checkbox sans
	   la désactiver pour les
	   lecteurs d'écran */
	position: absolute;
	left: 0;
	opacity: 0.01;
}



/* on prépare le label */
.CheckBoxPuisLabelModern [type="checkbox"]:not(:checked) + label,
.CheckBoxPuisLabelModern [type="checkbox"]:checked + label {
	position: relative; /* permet de positionner les pseudo-éléments */
	padding-left: 25px; /* fait un peu d'espace pour notre case à venir */
	padding-top:5px;
	font-size: 1.05em; /* Label un peu plus gros */
	cursor: pointer;    /* affiche un curseur adapté */
	top:0px;
	
}

/* Aspect de la case */
.CheckBoxPuisLabelModern [type="checkbox"]:not(:checked) + label:before,
.CheckBoxPuisLabelModern [type="checkbox"]:checked + label:before {
	content: '';
	position: absolute;
	left: 0;
	top: 0;
	width: 20px;
	height: 20px;
	border: 1px solid #aaa;
	
	border-radius: 50%;
	box-shadow: inset 0 1px 3px rgba(0,0,0, .1), 0 0 0 rgba(203, 34, 237, .2);
	transition: all .275s;
}

/* Aspect de la coche */
.CheckBoxPuisLabelModern [type="checkbox"]:not(:checked) + label:after,
.CheckBoxPuisLabelModern [type="checkbox"]:checked + label:after {
	content: '✕';
	position: absolute;
	top: .38em;
	left: .18em;
	font-size: 1.6em;
	color: #CB22ED;
	
	line-height: 0;
	transition: all .2s; /* Petite transition */
}

/* Aspect non cochée */
.CheckBoxPuisLabelModern [type="checkbox"]:not(:checked) + label:after {
	opacity: 0;
	transform: scale(0) rotate(45deg);
}

/* Aspect cochée */
.CheckBoxPuisLabelModern [type="checkbox"]:checked + label:after {
	opacity: 1;
	transform: scale(1) rotate(0);
}



.CheckBoxRond {
	  -webkit-appearance: none;
    -moz-appearance: none;
    -ms-appearance: none;
	appearance: none;
    -moz-border-radius: 12px;
    -webkit-border-radius: 12px;
    border-radius: 50%;
    height: 24px;
    width: 24px;
    border: 1px solid #ccc;
}




.CheckBoxRond:checked {
  background: #ccc;
   display: block;
}


/* The container */
.container {
  /*display: block; */
  position: relative;
  top:0;
  padding-left: 0px;
  padding-top:0px; 
  cursor: pointer;
  border: 1px solid #FFFFFF;
  
}

/* Hide the browser's default checkbox */
.container input {
 position: absolute;
  opacity: 0;
  cursor: pointer;
  height: 0;
  width: 0;
  top:0;
  left:0px;
  padding:0;
  margin:0;
  display:inline;
}

/* Create a custom checkbox */
.checkmark {
  position: absolute;
  top:0;
  left: 0;
  height: 30px;
  width: 30px;
  /* background-color: #eee; */
  -moz-border-radius: 50%;
  -webkit-border-radius: 50%;
  border-radius: 50%;
   /* border: 1px solid #000000; */
  box-shadow: inset 0 1px 3px rgba(0,0,0,1), 0 0 0 rgba(203, 34, 237, .2); 
}

/* On mouse-over, add a grey background color */
.container:hover input ~ .checkmark {
  background-color: #cca;
}

/* When the checkbox is checked, add a blue background */
.container input:checked ~ .checkmark {
  background-color: #2196F3;
}

/* Create the checkmark/indicator (hidden when not checked) */
.checkmark:after {
  content: "";
  position: absolute;
  display: none;
}

/* Show the checkmark when checked */
.container input:checked ~ .checkmark:after {
  display: block;
 }

/* Style the checkmark/indicator */
.container .checkmark:after {
  left: 9px;
  top: 6px;
  width: 7px;
  height: 12px;
  border: solid white;
  border-width: 0 3px 3px 0;
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
}

/* responsive */

.padleft5 { padding-left:5px !important;}
.padleft10 { padding-left:10px !important;}
.padleft20 { padding-left:20px !important;}

.padright5 { padding-right:5px !important;}
.padright10 { padding-right:10px !important;}

.padtop5 { padding-top:5px !important;}
.padtop10  { padding-top:10px !important;}
.padtop20  { padding-top:20px !important;}
.padtop30  { padding-top:30px !important;}
.padtop40  { padding-top:40px !important;}
.padtop50  { padding-top:50px !important;}

.padbottom10 { padding-bottom:10px !important;}
.padbottom20 { padding-bottom:20px !important;}
.padbottom30 { padding-bottom:30px !important;}
.padbottom40 { padding-bottom:40px !important;}

.Bold {font-weight:bold; !important;}

.textAlignLeft { text-align:left }

.menuLang  {border: 1px}
.menuLang  .menuLangNiv2 {display: none; position: absolute; left: 0px; top: 30px; margin:0px; padding: 0px 0px 0px 0px; border: 1px solid grey; }
.menuLang ul li{ width:150px ;padding-top:10px; }
.menuLang li {list-style-type: none; position: relative; z-index: 2;        ; height:30px; margin: 0px; }
.menuLang li.SousMenuDroit {text-align:left;background-color: #FFFFFF;}
.menuLang  li:hover .menuLangNiv2 {display: block;}
.menuLangNiv2 {display: none; }
.menuLangNiv2  li.SousMenuDroit:hover {background-color: #F0CF9A;}

.IconMenu {border: 1px; }
.IconMenu .menuNiv2 {  display: none; background-color: #000000; border-bottom: 1px solid #383838;  width: 100%;  position: absolute; left: 0px; top: 45px; ; margin:0px; padding: 0px 0px 0px 0px; border: 1px solid grey; }
.IconMenu li {list-style-type: none; position: relative; z-index: 99; ; height:40px; margin: 0px; padding-left:5px; padding-top:10px; }
.IconMenu li:hover .menuNiv2 {display: block;  }
.menuNiv2  li:hover {color: #1c1c1c;    background: #ccc;}

.menuNiv2 a {
	color: #fff;
    text-decoration: none;
	font-size: 12px;
    font-weight: bold;
	font-family:Verdana,Arial;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    letter-spacing: 0.1em;
    line-height: 2em;
    height: 2em;
}
.menuNiv2 div { border-bottom: 1px solid #383838; margin-left:10px }


.menuRub  {border: 1px}
.menuRub  .menuRubNiv2 {display: none; position: absolute; left: 0px; top: 30px; margin:0px; padding: 0px 0px 0px 0px; border: 1px solid grey; }
.menuRub ul li{ width:150px ;padding-top:10px; }
.menuRub li {list-style-type: none; position: relative; z-index: 2;        ; height:30px; margin: 0px; }
.menuRub li.SousMenuDroit {text-align:left;background-color: #FFFFFF;}
.menuRub  li:hover .menuRubNiv2 {display: block;}
.menuRub divReroul:hover .menuRubNiv2 {display: block;}
.menuRubNiv2 {display: none; }
.menuRubNiv2  li.SousMenuDroit:hover {background-color: #F0CF9A;}


.img-valign {  vertical-align: middle; }
.StartInvisible { display: none; }

.ChangeTDsAuSurvolTR {
	background-color:#FFFFFF;
}

/* 
Lors du survol d'une ligne, tous les td contenu dans cette ligne changeront de couleur de fond 
*/
.ChangeTDsAuSurvolTR:hover td{
	background-color:#EEEEEE;
}

.Zone1
	{

	/* margin-right:315px; */
	display:table-cell;

	border: 1px solid #C0C0C0;
	margin-left: 10px;
	min-height: 300px;
	background-color: #F8FAFA;
	
	-moz-border-radius: 20px 20px 20px 20px;
        -webkit-border-radius: 20px 20px 20px 20px;
        border-radius: 20px 20px 20px 20px;
	
        
	}

.Zone1New {display:table-cell; }

.EntreZone1et2 { display:table-cell;width:10px }

.Zone2
	{
	display:table-cell;

	width:300px;
	border: 1px solid #C0C0C0;
	margin-left: 10px;
	min-height: 300px;
	background-color: #E9EEF1;
	
	-moz-border-radius: 20px 20px 20px 20px;
        -webkit-border-radius: 20px 20px 20px 20px;
        border-radius: 20px 20px 20px 20px;
	
        background: url('images/CadreM.png') repeat;
	}
	
.Zone2New
	{
	display:table-cell;

	width:300px;
	border: 1px solid #C0C0C0;
	margin-left: 10px;
	min-height: 300px;
	background-color: #EFEBE7;
	
	-moz-border-radius: 10px 10px 10px 10px;
        -webkit-border-radius: 10px 10px 10px 10px;
        border-radius: 10px 10px 10px 10px;
	
	position:relative;top:20px;left:40px;
	box-shadow: 2px 2px 2px #aaa;
        
	}

.Zone2b
	{
	display: none;
	}

.Zone3
	{
	float:left;width:300px;

	border: 1px solid #C0C0C0;
	
	min-height: 300px;
	background-color: #E9EEF1;
	
	-moz-border-radius: 20px 20px 20px 20px;
        -webkit-border-radius: 20px 20px 20px 20px;
        border-radius: 20px 20px 20px 20px;
	
        background: url('images/CadreM.png') repeat;
	}
.Zone4
	{

	margin-left:312px;margin-top:10px;

	border: 1px solid #C0C0C0;
	
	min-height: 300px;
	background-color: #E9EEF1;
	
	-moz-border-radius: 20px 20px 20px 20px;
        -webkit-border-radius: 20px 20px 20px 20px;
        border-radius: 20px 20px 20px 20px;
	
        background: url('images/CadreM.png') repeat;
	}

.Zone5
	{
	border: 1px solid #C0C0C0;
	background-color:#EFEBE7;
	
	
	-moz-border-radius: 20px 20px 20px 20px;
        -webkit-border-radius: 20px 20px 20px 20px;
        border-radius: 20px 20px 20px 20px;
        
	}

.Zone6
	{
	border: 1px solid #C0C0C0;
	background-color:#F4F6F6;
	

	-moz-border-radius: 20px 20px 20px 20px;
        -webkit-border-radius: 20px 20px 20px 20px;
        border-radius: 20px 20px 20px 20px;
        
	}
	
.Zone7 {
	border-top: 1px solid #C0C0C0;
	background-color:#FFFFFF;
	
	-moz-border-radius: 20px 0px 0px 0px;   
	-webkit-border-radius: 20px 0px 0px 0px;  
	border-radius: 20px 0px 0px 0px;  
	
	box-shadow: -5px 2px 5px 0 #C5C6C6 inset;
	
	}
	
.shadowWhite { background-color:#FFFFFF;border-radius:5px;box-shadow: 1px 2px 0 rgba(0,0,0,0.1); }	

.ButtonSubmit:hover
	{
	position: relative;
	top:2px;
	cursor:  pointer;
	}

.div1 { width:90%;padding-top:10px }
.inscription { width:80%;text-align:right }
.alignSelonLargEcran { text-align:right }
.AlignInscrEtap2 { text-align:right }

.MsgUtilisateur {
	margin-left:5px;
	border: 1px solid #000000;padding:20px;background-color : #FFFFEF;
	-moz-border-radius: 15px 15px 15px 0px;
	-webkit-border-radius: 15px 15px 15px 0px;
	border-radius: 15px 15px 15px 0px;
	margin-right:30px
}

.MsgSEM {
	margin-right:5px;
	border: 1px solid #da5008;padding:20px;background-color : #ffffff;
	-moz-border-radius: 15px 15px 0px 15px;
	-webkit-border-radius: 15px 15px 0px 15px;
	border-radius: 15px 15px 0px 15px;
	margin-left:30px
}

.ZoneCentreAutoriser { 
	width:750px;

}

.navigationMobile {
  background: #ebe6d0;
}
.navigationMobile > span {
  display: block;
  padding: 10px;
  background: rgba(255,255,255,.3);
  border-top: 2px solid #fff;
  color: #fff;
  text-decoration: none;
}

.CellSup1000px { display: table-cell; }
.CellInf1000px { display: none; }
.DivInf1000 { display: none; }
.DivSup1000 { display: block; }
.Font35SaufPetit { font-size:35px }
.Font30SaufPetit { font-size:30px }
.LeftSaufPetit { text-align:left }
.FlexSaufPetit { display: flex; }

.col1Console { display: table-cell;width:70px; }
.menuConsoleGauche { display: table-cell;width:300px;position:static; }
.LeftMoins700SiInf1000 { left:0px}
.col3Console { display: table-cell;width:10px }
.col5Console { display: table-cell;width:20px }

.CellSup1000 { display: table-cell; }

.OmbreZoneIncludeConsole { box-shadow: 2px 2px 5px 0 #C5C6C6 inset } 
.ZonePrincipaleConsole { padding-left:20px;padding-right:20px; }

.col1Accueil { display: table-cell }
@media all and (max-width: 1200px) {
	.col1Accueil { display:none; }
}


@media all and (max-width: 1000px) {  
	.CellSup1000px { display: none; }
	.CellInf1000px { display: table-cell; }
	.DivInf1000 { display: block; }
	.DivSup1000 { display: none; }
	.Font35SaufPetit { font-size:25px }
	.Font30SaufPetit { font-size:25px }
	.LeftSaufPetit { text-align:center }
	.DivHautConsoleMobile { position:fixed;top: 0;left:0;height:45px;border-bottom:1px solid #CCCCCC}
	
	.menuLang { display: block; }
	.menuRub { display: block; }
	.IconMenu { display: block; }
	.ListLang  { display: none; }
	.Loupe { display: none; }
	.FlexSaufPetit { display: none; }
	.MenuLigne { display: none; }
	/* .imagePrincipale { display: none; } */

	.div1 { padding-top:0px }

	.inscription { width:100%;text-align:left }
	.alignSelonLargEcran { text-align:left }
	.AlignInscrEtap2 { text-align:left }
	.ZoneCentreAutoriser { 	width:90%;margin-left:10px;}

	
	.menuConsoleGauche { position:fixed;left:-300px}
	.LeftMoins700SiInf1000 { left:-300px}
	.col3Console { display:none }
	.OmbreZoneIncludeConsole { box-shadow: none }
	.MenuDeroulConsole { display: block; }
	.CellSup1000 { display:none }
	.ZonePrincipaleConsole { padding-left:0px;padding-right:0px; }
	
	.Zone7 {
		/* border-width:0px; */
		-moz-border-radius: 0px 0px 0px 0px;
      	  -webkit-border-radius: 0px 0px 0px 0px;
     	   border-radius: 0px 0px 0px 0px;
	
		box-shadow: none;
	
	}
	
}
.ZoneCentre1 { margin-top:10px; width:100%; display: table ;}
.ZoneCentre2 {  width:100% }

.ZoneCentreInscEtap2 { margin-left: auto;  margin-right: auto;  ;width:80%; }
.ZoneCentreContact {  margin-left: auto;  margin-right: auto;  ;width:70%; }
.ImgCheckOkAutoriser { display:block}
.Zonetxt1Autoriser { margin-right:145px; }
.SEMtxt { padding-left:10px;padding-top:8px}
.PadRight90saufPetit{ padding-right:90px }



@media all and (min-width: 690px) and (max-width: 1000px) {

	.col1Console { display: table-cell;width:10px}
	.col5Console { display: table-cell;width:10px }
}

.marges30SaufPetit { margin-left:30px;margin-right:30px }
.cellSaufPetit { display: table-cell }
.cellQuePetit { display: none }
.tptlQuePetit{
	font-size:11px;
	font-family:Verdana,Arial;
}
.CellOuBlockSiPetit { display: table-cell }

/* pour Recap.php */

.Width200ou75SiPetit { width:200px }

.TableauRecap {
	margin-left:15px;
	margin-right:15px;
	padding-top:1px;
}

/* --- Pour tableau AutreCmptSEM --- */

.Width135ou45Sipetit { width:135px }

/* --- Pour le tableau MailsBloqués --- */

.MMcol1 { width:30px;  }
.MMcol2 { width:90px }

.MMcol5 { width:50px }
.MMcol6 { width:95px;  }
.MMcol7 { width:55px;  }
.MMcolPetit { width:40px }


.SaufPetit { display: block; }
.SpanSaufPetit { display:inline; }
.QuePetit { display:none;}

.RadiusHG {
	-moz-border-radius: 10px 0 0 0;
        -webkit-border-radius: 10px 0 0 0;
        border-radius: 10px 0 0 0;
	}

.RadiusHD {
	-moz-border-radius: 0 10px 0 0 ;
        -webkit-border-radius: 0 10px 0 0 ;
        border-radius: 0 10px 0 0 ;
	}

.divAccueil { width:100% }


.Zone50PourCentou95siPetit { margin-left: auto;  margin-right: auto; width:50% }


.TableSaufPetit { display:table; }

.AccueilNouveautes { float: right; margin-top:50px}


.W690Grd350petit { width:690px }

@media all and (max-width: 1200px) {
	.AccueilNouveautes { float: none; margin-top:20px}
}

@media all and (max-width: 690px) {
	.W690Grd350petit { width:350px }
	.CenterOuPetitRight { text-align: right; }
	.TableSaufPetit { display:none;  }
	.Zone50PourCentou95siPetit { margin-left: auto;  margin-right: auto; width:95% }
	.divAccueil { margin-left: auto;  margin-right: auto; width:300px }
	.div1 { width:100%; border-width:0px}
	.ZoneCentre1 { 
		float: none;
		width:100%px;
		border-width:0px;
	}
	.Zone1 { display:none;}
	.Zone1New { display:none;}
	.EntreZone1et2 { display:none;}

	.Zone2b { display: block; }
	.Zone3 { width:100%;}
	.Zone4 { width:100%;margin-left:0px;border-style: none; background-image: none;}

	.Zone2 { border-width:0px; width:100%;;margin-left:0px;border-style:solid;
		-moz-border-radius: 0px 0px 0px 0px;
	        -webkit-border-radius: 0px 0px 0px 0px;
	        border-radius: 0px 0px 0px 0px;
	}
	.Zone2New { border-width:0px; width:100%;;margin-left:0px;border-style:solid;
		-moz-border-radius: 0px 0px 0px 0px;
	        -webkit-border-radius: 0px 0px 0px 0px;
	        border-radius: 0px 0px 0px 0px;
			
			position:static;
			float:left;
			box-shadow: 0px 0px 0px;
			
	}
	
	.Zone3 {
		border-width:0px;
		-moz-border-radius: 0px 0px 0px 0px;
	        -webkit-border-radius: 0px 0px 0px 0px;
	        border-radius: 0px 0px 0px 0px;
	}
	.Zone5 {
		border-width:0px;
		-moz-border-radius: 0px 0px 0px 0px;
      	  -webkit-border-radius: 0px 0px 0px 0px;
     	   border-radius: 0px 0px 0px 0px;
	}
	.Zone6 {
		border-width:0px;
		-moz-border-radius: 0px 0px 0px 0px;
      	  -webkit-border-radius: 0px 0px 0px 0px;
     	   border-radius: 0px 0px 0px 0px;
	}
	
	

	.SEMtxt { padding-left:5px;padding-top:0px}
	.hautfooter { display: none }

	.ZoneCentreInscEtap2 { width:100%; }
	.ZoneCentreContact { width:100%; }

	.ZoneCentreAutoriser { 	width:100%;margin-left:0px; }
	.ImgCheckOkAutoriser { display:none;}
	.Zonetxt1Autoriser { margin-right:0px }

	.txtVousEtesCnxLong { display:none;}
	.txtVousEtesCnxCourt { display:block;}
	.txtDeCnx { display:none;}
	.logoDeCnx { display:block;}
	.PadRight90saufPetit{ padding-right:0px; }
	
	.TableauRecap {
		margin-left:0px;
		margin-right:0px;
		border-left: 0px;
		border-right:0px;
	}

	.col1Console { display:none;width:0px}
	.col5Console { display:none;width:0px}

	.marges30SaufPetit { margin-left:0px;margin-right:0px }
	.cellSaufPetit { display: none }
	.cellQuePetit { display: table-cell }
	tptlQuePetit{
		font-size:9px;
		font-family:Verdana,Arial;
	}
	.CellOuBlockSiPetit { display: block }
	
	.Width200ou75SiPetit { width:75px }

	.Width135ou45Sipetit { width:45px }
	
	
	
	.MMcol1 { width:30px;  }
	.MMcol2 { width:70px }


	.MMcol6 { width:55px;  }
	.MMcol7 { width:55px;  }

	.SaufPetit { display: none; }
	.SpanSaufPetit { display: none; }
	.QuePetit { display:block;}

	.RadiusHG {
	-moz-border-radius: 0 0 0 0;
        -webkit-border-radius: 0 0 0 0;
        border-radius: 0 0 0 0;
	}

	.RadiusHD {
	-moz-border-radius: 0 0 0 0 ;
        -webkit-border-radius: 0 0 0 0 ;
        border-radius: 0 0 0 0 ;
	}
}
/* inscription.php */
.MargeGinscription { width:150px; }
@media all and (max-width: 570px) { 
	.MargeGinscription { width:10px; }
}
/* ConfirmCmd */
.MargeGConfirmCmd { width:70px; }
@media all and (max-width: 570px) { 
	.MargeGConfirmCmd { width:10px; }
}

.RubGauche:hover { background-color : #F6F4EA; }
.SousRubrique:hover { background-color : #fdfdfb; }


.backHaut1 { background: linear-gradient(#FADABA, #EFA563); background-color: #F7B57B}
.backHaut2 { background: linear-gradient(#D4E6CE,#2BB800); background-color: #7CCE62}
.backHaut3 { background: linear-gradient(#E57D84,#C63E48); background-color: #D84E58}
.backHaut4 { background: linear-gradient(#E0E0E0,#BEBEBE); background-color: #CCCCCC}
.backHaut5 { background: linear-gradient(#EBEBEB,#aaaaaa); background-color: #EBEBEB}
.backHaut6 { padding:5px;} /* pour inboxN */

.Hauttab {  
	/* border-bottom: 1px solid #222200;*/
	border-left: 1px solid #ffffff; 
	height:25px;
}

.LigneTabMails {
	display: table-row;
	
	}

.CaseTableau {  /* tableau mails bloqués et Recap.php */
	background:#FFFFFF;
	border-bottom: 1px solid #DE5208;
	padding:5px;
	vertical-align:middle;
}

.CaseTableauACTION {  /* tableau mails bloqués / Case si on a une action de deblocage ou de banissement sur le mail */
	background:#FFFFFF;
	border-bottom: 5px solid #FFF1A8;
	padding:5px;
	vertical-align:middle;
}

.CaseTableau2 {  /* tableau autorisations */
	background:#FFFFFF;
	border-bottom: 1px solid #1E8E21;
	padding:5px;
	vertical-align:middle;
}

.CaseTableau3 {  /* tableau autorisations */
	background:#FFFFFF;
	border-bottom: 1px solid #B77D8A;
	padding:5px;
	vertical-align:middle;
}

.CaseTableau4 {  /* tableau autorisations, AutresCmptSEM, repondeur,... */
	
	border-bottom: 1px solid #9B9B9B;
	padding:6px;
	vertical-align:middle;
}



.OngletAlphab {
	float: left;
	padding-top:3px;
	padding-bottom:2px;
	width:18px;
	text-align:center;
	border-bottom: 1px solid #000000;
	-moz-border-radius: 20px 20px 0px 0px;
        -webkit-border-radius: 20px 20px 0px 0px;
        border-radius: 20px 20px 0px 0px;
	background-color: #FFFFFF;
	box-shadow: -2px 1px 4px 0 #C5C6C6 inset;
}
.OngletAlphab:hover { position:relative; top:-2px;font-weight:bold; }




.droitGauch {
  animation-duration: 2s;
  animation-name: slidein1;
}

@keyframes slidein1 {
  from {
    margin-left: 100%;
    width: 300%; 
  }

  to {
    margin-left: 0%;
    width: 100%;
  }
}

.GauchDroit {
	animation-duration: 1s;
	animation-name: slidein2;
}

@keyframes slidein2 {
  from {
    margin-right: 100%;
    
  }

  to {
     margin-right: 0%;
    
  }
}

.AffProgressif {
	animation-duration: 2s;
	animation-name: slidein3;	
}

@keyframes slidein3 {
  from {
	background-color: #FFDC39;
    opacity:0;
  }

  to {
	background-color: #FFF9EB;
    opacity:1;
   
  }
}

.AffProgressif2 {
	animation-duration: 2s;
	animation-name: slidein4;	
	
}

@keyframes slidein4 {
  from {
	 
    opacity:0;
	
  }

  to {
	 
    opacity:1;
    
  }
}

.DisparProgressif {
	animation-fill-mode: forwards;
	transition-timing-function: ease-in;
	animation-duration: 15s;
	animation-name: slidein5;	
}

@keyframes slidein5 {
  from {
    opacity:0;
	top:0px;
  }
  
  10% {
	  opacity:1;
	  
  }
  40% { 
		top:0px;
  }
   to {
	opacity:1;
	 top:-500px;
	
  }
}


/* enjoycss.com */
.ButtonModern {
  -webkit-box-sizing: content-box;
  -moz-box-sizing: content-box;
  box-sizing: content-box;
 
  
  cursor: pointer;
  margin: 0 auto;
  text-decoration: none;
  box-shadow: 1px 1px 1px #bbbbbb;
  border: 2px solid rgb(0,0,0);
  -webkit-border-radius: 10px;
  border-radius: 20px;
  font: normal 20px  Helvetica, Verdana, sans-serif;
  color: rgb(0, 0, 0);
  text-align: center;
  -o-text-overflow: clip;
  text-overflow: clip;
  letter-spacing: 1px;
  background: rgba(255,255,255,1);
  box-shadow: 5px 5px 5px 0px rgba(170, 170, 170, 0.5);
  -webkit-transition: background-color 0.3s cubic-bezier(0, 0, 0, 0), color 0.3s cubic-bezier(0, 0, 0, 0), width 0.3s cubic-bezier(0, 0, 0, 0), border-width 0.3s cubic-bezier(0, 0, 0, 0), border-color 0.3s cubic-bezier(0, 0, 0, 0);
  -moz-transition: background-color 0.3s cubic-bezier(0, 0, 0, 0), color 0.3s cubic-bezier(0, 0, 0, 0), width 0.3s cubic-bezier(0, 0, 0, 0), border-width 0.3s cubic-bezier(0, 0, 0, 0), border-color 0.3s cubic-bezier(0, 0, 0, 0);
  -o-transition: background-color 0.3s cubic-bezier(0, 0, 0, 0), color 0.3s cubic-bezier(0, 0, 0, 0), width 0.3s cubic-bezier(0, 0, 0, 0), border-width 0.3s cubic-bezier(0, 0, 0, 0), border-color 0.3s cubic-bezier(0, 0, 0, 0);
  transition: background-color 0.3s cubic-bezier(0, 0, 0, 0), color 0.3s cubic-bezier(0, 0, 0, 0), width 0.3s cubic-bezier(0, 0, 0, 0), border-width 0.3s cubic-bezier(0, 0, 0, 0), border-color 0.3s cubic-bezier(0, 0, 0, 0);
}

.ButtonModern:hover {
  color: rgba(255,255,255,1);
  background: rgb(104, 130, 40);
  position:relative;top:2px
}

.ButtonModern:active {
  border: 2px solid rgba(33,224,163,1);
  background: rgba(33,224,163,1);
  -webkit-transition: none;
  -moz-transition: none;
  -o-transition: none;
  transition: none;
}

/* bouton on/off */
    .onoffswitch {
        position: relative; width: 90px;
        -webkit-user-select:none; -moz-user-select:none; -ms-user-select: none;
    }
    .onoffswitch-checkbox {
        display: none;
    }
    .onoffswitch-label {
        display: block; overflow: hidden; cursor: pointer;
        border: 2px solid #D9C8C8; border-radius: 20px;
    }
    .onoffswitch-inner {
        display: block; width: 200%; margin-left: -100%;
        transition: margin 0.3s ease-in 0s;
    }
    .onoffswitch-inner:before, .onoffswitch-inner:after {
        display: block; float: left; width: 50%; height: 30px; padding: 0; line-height: 30px;
        font-size: 14px; color: white; font-family: Trebuchet, Arial, sans-serif; font-weight: bold;
        box-sizing: border-box;
    }
    .onoffswitch-inner:before {
        content: "ON";
        padding-left: 10px;
        background-color: #39C234; color: #FFFFFF;
    }
    .onoffswitch-inner:after {
        content: "OFF";
        padding-right: 10px;
        background-color: #EEEEEE; color: #D62222;
        text-align: right;
    }
    .onoffswitch-switch {
        display: block; width: 18px; margin: 6px;
        background: #FFFFFF;
        position: absolute; top: 0; bottom: 0;
        right: 56px;
        border: 2px solid #D9C8C8; border-radius: 20px;
        transition: all 0.3s ease-in 0s; 
    }
    .onoffswitch-checkbox:checked + .onoffswitch-label .onoffswitch-inner {
        margin-left: 0;
    }
    .onoffswitch-checkbox:checked + .onoffswitch-label .onoffswitch-switch {
        right: 0px; 
    }

/* Box de Dialogue (pour message confirmation...) doit juste être complété par style="background-color: #FCFEC6" */
.DialBox {
	margin-top:20px;margin-bottom:30px;
	max-width:700px;width:90%;margin-left: auto;  margin-right: auto;
	border:1px solid #000000;
	border-radius: 10px;
	text-align:center;
	box-shadow: 3px 3px 3px #808080;
}
@media all and (max-width: 690px) {
	.DialBox {
		margin-top:15px;margin-bottom:20px;
		width:95%;margin-left: auto;  margin-right: auto;
		border: none;
		text-align:center;
		box-shadow: none;
	}
}

/* Pour le pop-up dans ListeRejet.php ou Recap.php si on detecte par exemple [..] dans le sujet */
.popup {
  margin: 70px auto;
  padding: 20px;
  background: #fff;
  border-radius: 15px;
  width: 30%;
  position: relative;
  transition: all 3s ease-in-out;
}

@media screen and (max-width: 700px){

  .popup{
    width: 70%;
  }
}

.popup .close {
  position: absolute;
  top: 5px;
  right: 30px;
  transition: all 200ms;
  font-size: 30px;
  font-weight: bold;
  text-decoration: none;
  color: #333;
}