@import url('https://fonts.googleapis.com/css?family=Merriweather');
@import url('https://fonts.googleapis.com/css?family=Lobster');
@import url('https://fonts.googleapis.com/css?family=Slabo+27px');
/**
 *	font-family: 'Lobster', cursive;
 *	font-family: 'Merriweather', serif;
 *	font-family: 'Slabo 27px', serif;
 **/

@import "base.css";
@import "button.css";
@import "content.css";
@import "form.css";
@import "normalize.css";
@import "primary.css";
@import "table.css";


/**
*	Les couleur du site
*/
:root {
	--primary-1: #155724;
	--primary-2: #ff00ff;
	--primary-3: #bf00bf;

	--color: #333;

	--bg-primary: rgba(0, 200, 0, 1);
	--bg-alert: rgba(200, 0, 0, 1);
	--bg-info: rgba(0, 200, 200, 1);
	--bg-warning: rgba(200, 200, 0, 1);
}
/*
 * Debug
 */
.xdebug-var-dump{
	width: 80%;
	margin: 15px auto;
	background-color: #ddd;
	border: 1px solid grey;
	padding: 10px;
	border-radius: 5px;
}
.debug{
	margin: auto;
	width: 100%;
}
.debug .xdebug-var-dump{
	margin: 0;
	width: 100%;
}
.xdebug-error{
	margin: 0 auto;
}

pre.erreur{
	white-space:pre-wrap;
	width: 90%;
	margin: 0 auto;
	display: block;
	padding: 12px;
	color: #F60;
	background:#f5f5f5;
}
.message-flash{
    bottom: 10px;
    position: fixed;
    left: 20px;
}
.flashbag-content{
    background-color: #aaa;
    border-radius: 0px 5px 5px 5px ;
    padding: 10px;
    color: #fff;
}
.flashbag{
    border-radius: 5px;
    margin: 0;
    padding: 5px;
}
.flashbag+.flashbag{
    margin-top: 15px;
}
.flashbag-btn{
    background-color: #aaa;
    border-radius: 5px 5px 0px 0px ;
    display: inline-block;
    padding: 0 10px;
    position: absolute;
    top: -30px;
    left: 0;
    color: #fff;
}
.flashbag-btn:hover{
    cursor: pointer;
}
.flashbag-info{
    background-color: var(--bg-info);
}
.flashbag-alert{
    background-color: var(--bg-alert);
}
.flashbag-primary{
    background-color: var(--bg-primary);
}
.flashbag-warning{
    background-color: var(--bg-warning);
}
/**
 *	Mode tablette
 */
 @media screen and (min-width:700px) {
	a.model{
		width: 50%;
	}
}
/**
*	Mode PC
*/
@media screen and (min-width:1024px) {
	a.model{
		width: 33.33%;
	}
	.separator::before{
		content: " | ";
		display: block;
		color: white;
		padding-top: 5px;
		border-bottom: none;
	}
}