/* *****************************************************************************
	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(128, 153, 166,0.9);
	--color-bg-dark			:	#ffffff;
}

body {
	background-color : var(--bg-default, #f5f5f5);
	background : var(--bg-default) url(img/background-cafeine.jpg) no-repeat center fixed;
	background-size : cover;
	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-bg-dark);
}

a:hover,
a:focus,
a:active {
	text-decoration: none;
}

h1 {
	font-weight : 800;
	text-transform: uppercase;
	text-shadow: rgba(32, 32, 32,0.9) 0.1em 0.1em 0.2em;
}

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

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

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


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

/*	Bannière et pied de page */

.banner, .mentions {
	background-color : rgb(97, 117, 128);
	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);
}