body,html{
	margin:0px;
	padding:0px;
	background:#261d11;
	color:#e0cfb8;

	/*w3school Conserver ce height:100%; : indispensable pour les images "parallax" */
	height:100%;
	
	font-size:1em;
}
h1,h2,h3,h4,h5{padding:0px;margin:0px;}
header,footer{
	background:#4c3b25;
}
a{
	transition: 0.3s;
	/*color:#9ec0e2;*/
}
button{border:none;padding:6px 8px;background:#e0cfb8;color:#4c3b25;transition: 0.3s;}
button:hover{background:#f9992a;}
button:active{color:#e0cfb8;}
input[type=submit]{border:none;padding:6px 8px;background:#e0cfb8;color:#4c3b25;transition: 0.3s;}
input[type=submit]:hover{background:#f9992a;}

/* Des trucs généralistes par paquets ! */
.opacy80{opacity:0.8;}
.tBold{font-weight:bold;border-radius:4px;padding:2px 5px;}
.flex{display:-webkit-box;display:-moz-box;display:-ms-flexbox;display:-webkit-flex;display:flex;}
.chariot{display:none;}
.temoin{background-color:#9ec0e2;}
@media only screen and (max-width:992px){.chariot{display:initial;}.temoin{background-color:#f9992a;}}
.nearly_hiden1{color:#4c3b25;}/* pour affichage très léger (cf auteur unique en page projet) */

/* Pour avoir un fade-in des images chargées par blazy : */
.b-lazy {
	-webkit-transition: opacity 500ms ease-in-out;
	   -moz-transition: opacity 500ms ease-in-out;
		 -o-transition: opacity 500ms ease-in-out;
			transition: opacity 500ms ease-in-out;
			 max-width: 100%;
			   opacity: 0;
	}
.b-lazy.b-loaded {opacity: 1;}


/* En provenance de parallax w3school */

.plaximg{
	background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}
/* Image parallax 1 (Logo. Full height) à titre d'exemple */
#pagePlaximg142 {
    background-image: url('data/img/fulton-p27-web.jpg');
    min-height: 100%;
}

.w3-wide-tl {letter-spacing: 10px;}

.w3-hover-opacity {cursor: pointer;}

/* Césure des étiquettes sur images parallax */
.parallaxTiquette{display:flex;}
@media only screen and (max-device-width: 290px){.parallaxTiquette.pT290{flex-direction:column;}}
@media only screen and (max-device-width: 340px){.parallaxTiquette.pT340{flex-direction:column;}}

/* Turn off parallax scrolling for tablets and phones */
@media only screen and (max-device-width: 992px){.plaximg{background-attachment: scroll;}}

/* max-width c'est les écran inférieur et égale à… */
/* min-width c'est les écran supérieur et égale à… */
/* Les domaines sont : mobile-600,601-tablette-992,993-ordi */


/* Pallettes de couleur */
.tlTSombre{color:#4c3b25;}
.tlTClaire{color:#e0cfb8;}
.tlTOrange{color:#f9992a;}
.tlTVert  {color:#b7ce7b;}
.tlTBleu  {color:#9ec0e2;}
.tlTNoire {color:#261d11;}
.tlTMarine{color:#29293d;}

.tlBSombre{background:#4c3b25;}
.tlBClaire{background:#e0cfb8;}
.tlBOrange{background:#f9992a;}
.tlBVert  {background:#b7ce7b;}
.tlBBleu  {background:#9ec0e2;}
.tlBNoire {background:#261d11;}
.tlBMarine{background:#29293d;}

.tlHBDeep:hover{background:#1e1e2f;}
.tlHBVert:hover{background:#b7ce7b;color:#4c3b25;}

/* Barre "site en chantier" (dans index par exemple)*/
.stdCrossLine{
	height:18px;
	width:100%;
	background-image: url("/data/habillage/crossLine.svg");
	background-color:#261d11;
}



/*Les boutons-formulaires qui envoient à la page projet (page index et page liste) */
.item_panel{
	margin:10px 0px 10px 0px;
	display:-webkit-box;display:-moz-box;display:-ms-flexbox;display:-webkit-flex;display:flex;
	align-items:center;
}
.liImg{
	margin-right:14px;
	float:left;
	width:75px;
	height:75px;
	border-radius:75px;
	margin-left:14px;
}
.formItem button{
	border:none;
	color:#e0cfb8;
	width:100%;
	text-align:left;
	padding:10px 0px 10px 0px;
}





/* FIN pour les boutons-formulaires qui envoient à la page projet (page index et page liste) */


/* Bouton 3D Gros effet */
.tl3dButton a{
	position: absolute;
	top:50%;
	left:50%;
	transform:translate(-50%,-50%);
	width:90%;/*Pour régler la largeur c'est ici et rien qu'ici*/
	height:60%;
	text-align: center;
	transform-style:preserve-3d;
	perspective:1000px;
	transform-origin: center center;
}
.tl3dButton span{
	position:absolute;
	top:0px;
	left:0px;
	width:100%;
	height:100%;
	display:block;
	text-align:center;
	line-height:-60%;	
	font-size:24px;
	background:rgba(255,255,255,.05);
	transform-style:preserve-3d;
	backface-visibility:hidden;
	border-radius:300px;
	/*text-transform:uppercase;*/
	color:#fff;
	transition:0.35s;
}
.tl3dButton span.front{transform: rotateX(0deg) translateZ(20px)}
.tl3dButton a:hover span.front{transform: rotateX(-180deg) translateZ(20px)}

.tl3dButton span.back{transform: rotateX(180deg) translateZ(20px)}
.tl3dButton a:hover span.back{transform: rotateX(0deg) translateZ(20px)}

.tl3dButton span.center{background: linear-gradient(to left,#f9992a,#b7ce7b)}
.tl3dButton span.center:before{
	content:'';
	position:absolute;
	top:0px;
	left:0px;
	width:100%;
	height:100%;
	background: linear-gradient(to left,#e0cfb8,#9ec0e2);
	border-radius:300px;
	transform: translateZ(-1px);
}
.tl3dButton a:hover span.center{transform: rotateX(-180deg) translateZ(0px)}

.tl3dButton p{
	position:absolute;
	left:50%;
	top:50%;
	transform:translate(-50%,-100%);
}



/* Gérer les accordéons */
.accordionBtn{
	background-color: #4c3b25;
	color: #e0cfb8;
	cursor: pointer;
	padding: 18px;
	width: 100%;
	text-align: left;
	border: none;
	outline: none;
}
.accordionPanel{
	padding: 0 18px;
	background-color: #4c3b25;
	overflow: hidden;
	max-height: 0;
	transition: max-height 0.2s ease-out;
}
.active, .accordionBtn:hover{background-color:#f9992a;color:#4c3b25;}
.accordionBtn:after{
	content: '\02795'; /* Unicode character for "plus" sign (+) */
	font-size: 13px;
	color: #e0cfb8;
	float: right;
	margin-right: 5px;
}
.active:after{
	content: "\2796";/* Unicode character for "minus" sign (-) */
	color: #4c3b25;
}
/* Fin de la gestion accordéons */