/* *****************************************************************************
	STYLES ET AMBIANCE

	4 jeux de couleurs définies dans des variables CSS

	Couleurs pleines
		default
			--bg-default
			--color-default
			--color-accent

	Couleurs avec des effets de transparence sur les fonds :
		light (couleur par défaut)
			--bg-light
			--color-bg-light
		dark (couleur par défaut inversée)
			--bg-dark
			--color-bg-dark
		accent (couleur par accentuée inversée)
			--bg-accent
			--color-bg-accent
******************************************************************************** */
:root {
	--color-default			: #555555;
	--bg-default				:	#f5f5f5;
	--color-accent			: #de5833;
	--bg-accent					: rgba(222, 88, 51, 0.8);
	--color-bg-accent		:	#ffffff;
	--bg-light					: rgba(245, 245, 245,0.5);
	--color-bg-light		:	#555555;
	--bg-dark						: rgba(85, 85, 85,0.6);
	--color-bg-dark			:	#f5f5f5;
}

body {
	background-color : var(--bg-default, #f5f5f5);
	color : var(--color-default, #555555);

	/* Choix d'une police */
	font-family: 'Open Sans', sans-serif;
}

/*
	Astuce pour baisser la luminosité de l'image de fond
		Jouer avec le coefficient de transparence alpha
*/
body:after {
	content : '';
	display : block;
	position : absolute;
	z-index : -1;
	top :0; bottom : 0; right : 0; left : 0;
	background : rgba(0,0,0,0.1);
}

a {
	color: var(--color-accent);
}

h1 {
	font-weight : 800;
	text-transform: uppercase;
}

h2 {
	margin-top : 0;
	font-weight: 700;
}

h3 {
	margin-top : 0;
	text-transform: uppercase;
}

h3,h4,h5,h6,strong {
	font-weight : 600;
}

.project header * {
	margin-top : 0;
	margin-bottom: 0;
}

.project-header {
	min-height : 30vh;
	display : flex;
	flex-direction : column;
	justify-content: center;
	text-align: center;
}

.project-section {
	padding-top : 3em;
	padding-bottom : 3em;
}


/* *****************************************************************************
	AMBIANCE
****************************************************************************** */

/*	Bannière et pied de page */

.banner, .mentions {
	background-color : var(--color-default,#555555);
	color : var(--color-bg-dark,#f5f5f5);
}

.banner {
	box-shadow : 0 0.5rem 0.5rem rgba(0,0,0,0.5);
}

.banner-link {
	color : var(--color-bg-dark,#f5f5f5);
}

.banner-nav-link {
	color : var(--color-bg-dark,#f5f5f5);
	opacity : 0.6;
}

.banner-nav-link:hover,
.banner-nav-link:focus,
.banner-nav-link.is-current {
	opacity : 1;
}

.goTop {
	background-color : var(--bg-accent,rgb(222, 88, 51));
	color : var(--color-bg-accent,#ffffff);
	opacity : 0.7;
}

.goTop:hover {
	opacity : 1;
}


/*	Classes graphiques utilitaires */

.container [class*="bg-"],
.container-fluid [class*="bg-"] {
	padding : 1em;
	margin-top : 1em;
	margin-bottom : 1em;
	border-radius: 0.5rem;
}

.bg-default {
	background-color : var(--bg-default, #f5f5f5);
	color : var(--color-default,#f5f5f5);
}

.bg-accent {
	background-color : var(--bg-accent,rgb(222, 88, 51));
	color : var(--color-bg-accent,#ffffff);
}

.bg-light {
	background-color : var(--bg-light,#f5f5f5);
	color : var(--color-bg-light,#555555);
}

.bg-dark {
	background-color : var(--bg-dark,#555555);
	color : var(--color-bg-dark,#f5f5f5);
}

.btn {
	background-color : var(--color-accent,#de5833);
	border : 2px solid var(--bg-default,#f5f5f5);
	color : var(--color-bg-accent,#ffffff);
	transition : all 0.25s;
}

.btn:hover,
.btn:focus {
	background-color : var(--color-bg-accent,#ffffff);
	color : var(--color-accent,#de5833);
	transform : scale(1.1);
}


/* *****************************************************************************
	FORMULAIRES
******************************************************************************** */
fieldset {
}

legend {
	background : var(--bg-accent,rgb(222, 88, 51));
	color : var(--color-bg-dark,#f5f5f5);
}

label {

}

input[type="color"],
input[type="date"],
input[type="datetime-local"],
input[type="email"],
input[type="month"],
input[type="number"],
input[type="password"],
input[type="search"],
input[type="tel"],
input[type="text"],
input[type="time"],
input[type="url"],
input[type="week"],
select,
textarea {
	background-color: var(--bg-light);
	border: 1px solid #ccc;
	color : var(--color-default);
}

form :focus {
	background-color: #fff;
	outline: none;
}

.field-group-choice {
}

.field-group-choice legend {
}

.field-text-help {
}

.field-text-error {
	color : var(--color-accent,#de5833);
}

.field-error {
	border : 1px solid var(--color-accent,#de5833);
}