/* *************************** BASE *****************************  */
:root{
--orange: #FF9A00;
--gris: #4D4D4D;
--grisclair: #ECECEC;
--bleu: #2C5AA0;
--bleuclair: #00C5C8;
}

@font-face {
    font-family: gothic;
    src: url(/images/gothic.ttf) format("truetype"),
	     url(/images/gothic.woff) format("woff");
}
@font-face {
    font-family: bebas;
    src: url(/images/bebas.ttf) format("truetype"),
	     url(/images/bebas.woff) format("woff");
}

html{
	font-family: gothic;
	margin: 0;
	padding: 0;
	width: 100%;
	height: 100%;
}

body{
	margin:0;
	padding: 0;
	width: 100%;
	height: 100%;
	background: var(--grisclair);
}


/* *************************** LOGIN *****************************  */

#login-containeur{
	margin: 0 auto 0 auto;
	background: white;
	text-align: center;
	min-height:100%;
	min-width:100%;
}
#login-top{
	margin: 0 auto 0 auto;
	background: #FFF;
	display:block;
	min-width:100%;
	max-width:100%;
}
#login-bottom{
	margin: 0 auto 0 auto;
	background: var(--grisclair);
	display:block;
	margin-bottom:20px;
	min-width:100%;
	max-width:100%;	 
	height:360px;
}

#login-top img{
	margin-top:100px;
	margin-bottom:100px;
}
#login-bottom h3{
	font-family: bebas;
	color: var(--gris);	
	margin:0;
	padding:0;
	padding-top:50px;
	padding-bottom:50px;
	text-align:center;
	font-size:30px;
}
#login-bottom h4{
	font-size:20px;
	margin:0;
	padding:0;
	padding-top:15px;
	text-align:center;
}


#login-bottom img{
  vertical-align:top;
}

#login-bottom .champs{
	font-family: gothic;
	color: var(--gris);
	background:#FFF;
	border:0;
	width:350px;
	height:28px;
	font-size:14px;
	text-align: left;
	padding-left:20px;
}


#login-bottom .bouton{
	margin-top:25px;
	margin-bottom:5px;
	color:white;
	background:var(--bleu);
	border:0;
	width:150px;
	height:40px;
	cursor: pointer;
	font-family: bebas;
	font-size:24px;
	text-align: center;
}

#login-bottom::placeholder {  
  color: #EEE;
  opacity: 1;  
}

#login-bottom .champs:hover, #login-bottom .bouton:hover{
box-shadow: 0px 0px 15px #888;
}

/* pour bug couleur auto blanche/jaune du navigateur sur les champs */
#login .champs { 
  filter: none;  /* pour firefox , pas trouvé pour webkit... */
}


/* *************************** MENU / PAGE *****************************  */


	#page-conteneur{
		margin: 0 auto 0 auto;
		padding:0;
		background-color: #FFF;	
		color:black;
		background:var(--grisclair);
		min-height:100%;
		min-width:100%;
	}
	#page{
		margin: 0 auto 0 auto;
		min-width:480px;
		max-width:768px;
	}
	#nav-conteneur{
		background-color: #FFF;
		min-width:100%;		
	}
	#titre-conteneur{
		background-color: var(--orange);
		min-width:100%;		
	}

	h1{
		font-family: bebas;
		font-size:38px;
		height:40px;
		color:#FFF;
		text-align:center;
		margin: 0;
		padding: 0;
		padding-top:5px;
		padding-bottom:5px;	
		min-width:480px;
	}
	h1.titreorange{
			background:var(--orange);
	}
	h1.titrebleu{
			background:var(--bleu);
	}
	
	
	nav{
		display:block;
		padding:0;
		margin:0;
		width:100%;
		background:#FFF;
		color:var(--gris);
		height:150px;
		text-align:center;
		min-width:480px;
	}
	#barrenav{
		margin: 0 auto 0 auto;
		min-width:480px;
		max-width:768px;
	}
	
	nav .logo{
		width: 160px;
		height: 90px;
		margin-top:30px;
		margin-bottom:10px;
	}
	nav .logo:hover{
		animation: IcoAnim 1s infinite;
	}
	nav .nav-icon{
		float:left;
		width: 70px;
		height: 70px;
		margin-top:40px;
		margin-left:10px;
	}
	nav .nav-icon:hover{
		animation: IcoAnim 1s infinite;
	}
	
	section{
		display:block;
		margin: 0 auto 0 auto;
		min-height:600px;
		text-align:center;
		min-width:480px;
	}

	h2 {
		background:var(--bleuclair);
		font-family: bebas;
		font-size:28px;
		color:#FFF;
		height:30px;
		padding-top:5px;
		padding-bottom:5px;
		padding-left:50px;
		text-align:left;
		margin:0;
	}
	h3 {
		font-family: bebas;
		font-size:28px;
		margin:0;
	}
	h4 {
		font-family: gothic;
		font-size:20px;
		margin:0;
	}
	
	.bloc{
		background:#FFF;
		display:block;
		padding:50px;
		margin:0;
		text-align:left;
	}
	.aide{
		display: inline-block;
		width:65%;
		height:120px;
		padding-top:20px;
		padding-left:10px;
	}
.icone-aide{
	text-align:center;
	font-family: bebas;
	font-size:20px;
	color:var(--gris);
	vertical-align:top;
	display: inline-block;
	width:28%;
	height:120px;
}
.icone-aide img{
	width:40px;
	height:40px;
}

.icone-aide img:hover{
	animation: IcoAnim 1s infinite;
}	

	
.icone-conteneur{
	display:inline-block;
	max-width:700px;
}

.icone-accueil{
	text-align:center;
	font-family: bebas;
	font-size:20px;
	color:var(--gris);
	vertical-align:top;
	display: inline-block;
	width:160px;
	height:130px;
	margin:15px;
}
.icone-accueil img:hover{
	animation: IcoAnim 1s infinite;
}
@keyframes IcoAnim{
    0%{opacity:1;}
	50%{opacity:0.5;}
    100%{opacity:1;}
}

.nav-deco{
	display:inline-block;
	margin-top:10px;
	margin-bottom:10px;
	color:white;
	background:var(--bleu);
	border:0;
	width:150px;
	height:35px;
	cursor: pointer;
	font-family: bebas;
	font-size:24px;
	text-align: center;
	padding-top:5px;
}

.nav-deco:hover{
	box-shadow: 0px 0px 15px #888;
}

.nav-opt{
	color:#AAA;
	font-size:16px;
}
.nav-opt:hover{
	color:#666;
}

footer, footer a{
	padding: 0;
	padding-bottom:10px;
	font-size:12px;
	color : #BBB;
	text-align:center;
}



/* MESSAGE */

.message, .message-ok, .message-ne, .message-ko{
	position:fixed;
	font-family: bebas;
	top:150px;
	height:40px;
	width:100%;
	text-align:center;
	font-size:20px;
	padding-top:15px;
	display:block;
	margin: 0 0 0 0;
	z-index:9999;
}


.message-ok{background-color:#8F8;}
.message-ne{background-color:#88F;}
.message-ko{background-color:#F88;}

.message-login, .message-ok-login, .message-ne-login, .message-ko-login{
	position:fixed;
	font-family: bebas;
	height:25px;
	width:100%;
	text-align:center;
	font-size:20px;
	padding-top:4px;
	display:block;
	margin: 0 0 0 0;
	z-index:9999;
}
.message-ok-login{background-color:#8F8;}
.message-ne-login{background-color:#88F;}
.message-ko-login{background-color:#F88;}


/* FORMULAIRE MESSAGE */

#form_msg .textarea{
	border:0;
	padding:10px;
	color:black;
	font-size:18px;
	width:380px;
	height:110px;
}

#form_msg .envoyer{
	margin-top:10px;
	margin-bottom:50px;
	color:white;
	background:var(--bleu);
	border:0;
	width:400px;
	height:40px;
	cursor: pointer;
	font-family: bebas;
	font-size:24px;
	text-align: center;
}
#form_msg .envoyer:hover, #form_msg textarea:hover{
	box-shadow: 0px 0px 15px #888;
}

/* RECHERCHE */

.recherche{
	display:block;
	padding-top:40px;
	padding-left:10px;
	padding-bottom:30px;
}

.recherche .champs{
	font-family: bebas;
	color: var(--gris);
	background:#FFF;
	border:0;
	padding:0;
	width:300px;
	height:30px;
	font-size:16px;
	text-align: left;
	padding-left:20px;
}
.recherche .bprechercher{
	vertical-align:top;
	margin:0;
	padding:0;
}


.recherche::placeholder {  
  color: #EEE;
  opacity: 1;  
}

.recherche .champs:hover, .recherche .bouton:hover{
box-shadow: 0px 0px 15px #888;
}


/* pour bug couleur auto blanche/jaune du navigateur sur les champs */
.recherche .champs { 
  filter: none;  /* pour firefox , pas trouvé pour webkit... */
}

/*  CHANTIERS */

.chantier-conteneur{
	text-align:center;
}

.chantier{
	font-family: gothic;
	display:inline-block;
	text-align:left;
	background:#FFF;
	width:360px;
	height:180px;
	vertical-align:top;
	margin:10px;
}
.chantier:hover{
	animation: IcoAnim 1s infinite;
}

.chantier .titre, .chantier .numero{
	font-family: bebas;
	display:inline-block;
	font-size:20px;
	background:var(--orange);
	color:#FFF;
	padding-top:10px;
	padding-bottom:10px;
	padding-left:5%;
	height:25px;
	white-space:nowrap;
	text-overflow: ellipsis;
	overflow: hidden;
	width:65%;
}
.chantier .numero{
	float:right;
	width:25%;
	padding-left:0;
	padding-right:5%;
	text-align:right;
}

.etape,.etape-ko,.etape-sync{
	display:block;
	height:20px;
	border-bottom: #AAA SOLID 1px;
	margin:10px;
}
.etape{
	color:var(--gris);
}
.etape-ko{
	font-family: bebas;
	border:0;
}
.etape-sync{
	font-family: bebas;
	border:0;
	color:var(--bleu);
	width:100%;
}
/* ARCHIVES */


.archives{
	font-family: gothic;
	display:inline-block;
	text-align:left;
	background:#FFF;
	width:240px;
	height:120px;
	vertical-align:top;
	margin:5px;
	
}

.archives:hover{
	animation: IcoAnim 1s infinite;
}

.archives .titre{
	font-family: bebas;
	display:block;
	font-size:20px;
	background:var(--orange);
	color:#FFF;
	padding:10px;
	height:20px;
	white-space:nowrap;
	text-overflow: ellipsis;
	overflow: hidden;
}
.ref{
	display:inline-block;
	height:20px;
	margin:10px;
	font-size:20px;
}
.archives .icon{
	float: right;
	text-align:center;
	font-size:10px;
	margin-top:15px;
	margin-right:25px;
}

/* POUR RECHERCHE GLOBALE */

.chantier-recherche, .archive-recherche{
	background:var(--orange);
	display:inline-block;
	height:40px;
	margin:5px;
	font-size:20px;
	width:100%;
	text-align:left;
	color:white;
	font-size:15px;
	font-family: bebas;
	padding-left:15px;
	padding-top:20px;
}
.archive-recherche{
	background:var(--bleuclair);
}
.chantier-recherche:hover, .archive-recherche:hover{
		animation: IcoAnim 1s infinite;
}


/* DETAIL CHANTIER / ARCHIVE */

	.chantiertitrecadre{
		display:block;
		background:var(--orange);
		height: 71px;
		width:100%;
		margin:0;
		padding:0;
	}
	.chantierref, .chantiertitre{
		float:left;
		display:inline-block;
		text-align:left;
		color: white;
		font-size:22px;
		font-family: bebas;
		margin-left:15px;
		margin-right:15px;
		margin-top:20px;
		margin-bottom:20px;
		white-space:nowrap;
		text-overflow: ellipsis;
		overflow: hidden;
	}
	.chantiertitre{
			width:47%;
	}
	
	.chantiermessage, .chantierdocuments{
		float:right;
		display:inline-block;
		font-size:9px;
		font-family: bebas;
		text-align:center;
		color:white;
		width : 40px;
		height: 55px;
		background:var(--bleuclair);
		padding:8px;
	}
	
	.chantiermessage:hover, .chantierdocuments:hover{
		animation: IcoAnim 1s infinite;
	}
	
	.chantieretape{
		font-family: gothic;
		display:inline-block;
		text-align:left;
		background:#FFF;
		width:360px;
		height:140px;
		vertical-align:top;
		margin:10px;
	}
	
	.chantieretapetitre{
		font-size:22px;
		font-family: bebas;
		display:block;
		height:25px;
		border-bottom: #AAA SOLID 1px;
		margin:10px;
	}
	
	.etapeiconeok{
		float: right;
		margin-right:10px;
	}
	.etapeiconemessage{
		border-radius: 15px;
		font-size:10px;
		font-family: bebas;
		text-align:center;
		color:var(--gris);
		background:var(--grisclair);
		float: right;
		margin-right:20px;
		padding:8px;
		width:50px;
	}
	.etapeiconemessage:hover{
		background:var(--orange);
		animation: IcoAnim 1s infinite;
	}
	
	
	.etapedatelieu{
		display:inline-block;
		vertical-align:top;
		margin-left:10px;
		margin-right:10px;
		margin-top:2px;
		margin-bottom:10px;
		width:10px;
		height:15px;
	}
	
	.etapetexte{
		font-size:14px;
		display:inline-block;
		vertical-align:top;
		width:67%;
	}	
	.ligneadr{
		white-space:nowrap;
		text-overflow: ellipsis;
		overflow: hidden;
		width:100%;
	}
	
/* DOCUMENTS */

.document-icon{
	display:inline-block;
	width:400px;
	height:120px;
	background:#FFF;
	margin:10px;
	padding:20px;
	vertical-align:top;
}

/* CONTACTS */

.contactcadre{
	font-family: gothic;
	display:inline-block;
	text-align:left;
	background:#FFF;
	width:600px;
	height:220px;
	vertical-align:top;
	margin:10px;
}
.contact{
	padding:30px;
}

.contactcadre h2{
	padding-left:15px;
}

.contact:hover{
	animation: IcoAnim 1s infinite;
}
/* STATUT ETAPES */

.statut-ok,.statut-ko,.statut-pre,.statut-pla,.statut-att{
	float:right;
	font-family: bebas;
	white-space:nowrap;
	text-overflow: ellipsis;
	overflow: hidden;
	width : auto;
}
.statut-ok{color:#080;}
.statut-ko,.etape-ko{color:#F00;}
.statut-pre{color:var(--bleu);}
.statut-pla{color:var(--bleuclair);}
.statut-att{color:var(--orange);}

.statut-aide{
	font-size:20px;
	padding-top:20px;
	float:left;
	text-align:center;
	height:120px;
	width:28%;
}

/* CHANGEMENT SITE EN MODE MOBILE */

@media screen and (max-width: 768px) {
	
	#login-top img{
		margin-top:40px;
		margin-bottom:40px;
	}
	#login-bottom h2{
		font-size:40px;
	}
	#login-bottom .champs{
		width:240px;
	}
	#login-bottom .bouton{
		width:240px;
	}
	#login-top{
		min-width:380px;
		max-width:700px;		
	}
	#login-bottom{
		height:550px;
		min-width:380px;
		max-width:700px;
	}

	nav{
		height:100px;
	}
	nav .logo{
		float:right;
		width: 120px;
		height: 70px;
		margin-top:15px;
		margin-right:30px;
	}
	nav .nav-icon{
		float:left;
		width: 40px;
		height: 40px;
		margin-top:33px;
		margin-left:30px;
	}
	
	.message, .message-ok, .message-ne, .message-ko{
		top:100px;
		height:40px;
		padding-top:15px;
	}
	
	.chantier{
		width:440px;
	}
	
	.archives{
		width:440px;
	}
	
	.chantieretape{
		width:440px;
	}
	
	.contactcadre{
		width:440px;
	}
	.chantier-recherche, .archive-recherche{
		width:440px;
	}
		
}
/* MODE GRAND ECRAN */


@media screen and (min-width: 1250px) {
	#page{
		margin: 0 auto 0 auto;
		min-width:480px;
		max-width:1600px;
	}	
	
	#barrenav{
		margin: 0 auto 0 auto;
		min-width:480px;
		max-width:1600px;
	}
	
	.chantier{
		width:500px;
	}
	.archives{
		width:500px;
		height:150px;
	}
	
	.chantieretape{
		width:500px;
	}
		.chantier-recherche, .archive-recherche{
		width:850px;
	}
}


/* *************************** PAGES ***************************** */


a{
	 text-decoration:none;
	 color:black;
}

.minilien{
	color:#AAA;
	font-size:14px;
}
.minilien:hover{
	color:green;
}

.lien:hover{
	color:green;
}

.centrer{
	text-align:center;
}
.droite{
	text-align:right;
}
.gauche{
	text-align:left;
}
.rouge{
	color:red;
}
.bleu{
	color:blue;
}
.vert{
	color:green;
}
.gras{
	font-weight:bold;
}
.italique{
	font-style:italic;
}

.debug{
	font-size:8px;
}
.debugtete{
	font-size:10px;
	font-weight:bold;
}
/* TABLEAUX ADMIN */


table{
	border-collapse: collapse;
	margin-left:10px;
	margin-right:10px;
	font-size:16px;
	text-align:left;
	width:100%;
}


tr.entete {
	border-bottom:0;
	height:50px;
}

tr.entete td{
	background-color: #BBB;
	font-weight:bold;
	text-align:left;
	padding-left:15px;
}

tr.normal {
	border-bottom:1px SOLID #333;
	height:60px;
}

tr.mini {
	border-bottom:1px SOLID #333;
	height:30px;
	font-size:14px;
}

tr.inactif {
	background-color: #EDD;
	border-bottom:1px SOLID #333;
	height:60px;
}


tr.autre {
	color: #555;
	border-bottom:1px SOLID #333;
	height:60px;
}
tr.attente {
	background-color: #DDE;
	border-bottom:1px SOLID #333;
	height:60px;
}

tr.normal:hover,tr.mini:hover,tr.autre:hover,tr.inactif:hover,tr.attente:hover{
	background-color: #DED;
}

td{
	padding-left:15px;
}


/* case à cocher personnalisé */

.case_a_cocher {
	position: relative;
	display: inline-block;
	padding-bottom:5px;
}

.case_a_cocher input[type="checkbox"] {
	visibility: hidden; 
	position: absolute; top: -999px; left: -999px;
}

.case_a_cocher label {
	padding-left :23px;
}

.case_a_cocher input[type="checkbox"] + label:before {
	cursor: pointer;
	content: " ";
	text-align:center;
	width: 18px;height: 18px;
	position: absolute; 
	top: 1px ; 
	left: -3px;
	border: solid #333 2px;
	background: #EEE;

}
.case_a_cocher  input[type="checkbox"]:hover + label:before {
	border: solid #1274E5 2px;
}
.case_a_cocher  input[type="checkbox"]:checked + label:before {
	background: #FFF url("/images/case.png"); 
	background-size:100%;
}


/* radio bouton personnalisé */

.radio {
	position: relative;
	display: inline-block;
	padding-bottom:5px;
}

.radio input[type="radio"] {
	visibility: hidden; 
	position: absolute; top: -999px; left: -999px;
}

.radio label {
	padding-left :23px;
}

.radio input[type="radio"] + label:before {
	cursor: pointer;
	content: " ";
	text-align:center;
	width: 18px;height: 18px;
	position: absolute; top: 1px; left: -3px;
	border: solid #333 2px;
	background: #EEE;
	border-radius: 10px;
}
.radio  input[type="radio"]:hover + label:before {
	border: solid #1274E5 2px;
}
.radio  input[type="radio"]:checked + label:before {
	background: #FFF url("/images/radio.png"); 
	background-size:100%;
}
input[type="submit"].boutonrouge{
	background:#F00;
	border-radius:10px;
	width:25px;
	height:25px;
	padding:3px;
	margin:10px;
	border : 1px SOLID #F00;
	cursor: pointer;
}
input[type="submit"].boutonrouge:hover{
	background:#F55;
}