/* =========================== 

	EPREUVES NUMERIQUES

 ========================== */
/*
* VARIABLES
*/
.boxed-layout {
	box-shadow: none;
	background: none;
}

/* ---------------------------- */
/* MOTEUR DE RECHERCHE          */
/* ---------------------------- */
.breadcrumbs-v3.img-EN {
	background-repeat: no-repeat;
	background-size: cover;
}

.breadcrumbs-v3 p {
	color: inherit;
	font-size: inherit;
	font-weight: inherit;
	margin: inherit;
	text-transform: inherit;
}

.header-v1 .topbar-v1 {
	border: 0;
}

.navbar-brand {
	padding: 0;
}

.header-v1 .navbar-default .navbar-nav > li > a {
	padding-right: 0;
}

.header-v1 .topbar-v1 .top-v1-data li {
	border: 0;
}

#moteur_recherche {
	z-index: 1000;
}
#moteur_recherche form {
	position: relative;
	background-color: rgba(255, 255, 255, 0.85);
}
#moteur_recherche form fieldset {
	background: none;
}
#moteur_recherche form li {
	text-transform: uppercase;
}
@media (max-width: 767px) {
	#moteur_recherche form {
		width: 90%;
		margin: 0 5% 0 5%;
	}
}
@media (min-width: 768px) {
	#moteur_recherche form {
		width: 90%;
		margin: 0 5% 0 5%;
	}
}
@media (min-width: 993px) {
	#moteur_recherche form {
		width: 50%;
		margin: 0 25% 0 25%;
	}
}
@media (min-width: 1200px) {
	#moteur_recherche form {
		width: 50%;
		margin: 0 10% 0 40%;
	}
}

/* ------------------------------------------------------------------
   Largeur des tuiles — indispensable en layoutMode 'mosaic'
   ------------------------------------------------------------------
   Cube Portfolio y lit la largeur CSS de chaque tuile et en deduit son
   nombre de colonnes : la plus petite largeur rencontree devient la
   reference (getMosaicWidthReference), les autres valent leur multiple.

   Une couverture = 1 colonne. Une illustration de booklist declare le
   double + la gouttiere, donc 2 colonnes — a tous les paliers d'ecran,
   sans calcul cote serveur.

   Les valeurs suivent les paliers de hauteur definis plus bas, et les
   cols des mediaQueries de public/js/accueil.js (5/4/3/2).
------------------------------------------------------------------ */
/* ------------------------------------------------------------------
   Illustration de booklist — une vignette large de deux couvertures
   ------------------------------------------------------------------
   Meme hauteur qu'une couverture (les hauteurs sont fixees plus bas, par
   palier) : la tuile double occupe deux cases en largeur, pas en hauteur.

   L'image est recadree en cover — le ratio d'une tuile double est ~1.37
   (paysage), une image portrait serait donc rognee haut et bas. L'ecran
   d'upload le signale.
------------------------------------------------------------------ */
/* Barre de retour, visible quand une booklist est ouverte. */
#en-illu-retour {
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 0 0 18px;
	padding: 11px 16px;
	background: #f4f6f9;
	border-left: 3px solid var(--theme-primary, #4e78c6);
	border-radius: 4px;
	cursor: pointer;
	transition: background .15s;
}
#en-illu-retour:hover { background: #eaeef4; }
#en-illu-retour .en-illu-retour-fleche {
	font-size: 1.3em;
	line-height: 1;
	color: var(--theme-primary, #4e78c6);
}
#en-illu-retour .en-illu-retour-texte { font-size: .95em; color: #444; }
#en-illu-retour em { font-style: normal; font-weight: 600; color: #222; }

#grid-container .en-illu { cursor: pointer; }
#grid-container .en-illu .en-illu-image {
	background-size: cover !important;
	background-position: center !important;
	border-radius: 3px;
}

/* Sans image : un pave au nom de la booklist plutot qu'un trou. */
#grid-container .en-illu .en-illu-vide {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 12px;
	background: var(--theme-primary, #4e78c6);
	border-radius: 3px;
	text-align: center;
}
#grid-container .en-illu .en-illu-nom {
	color: #fff;
	font-size: 1.05em;
	line-height: 1.3;
	font-weight: 600;
}

/* Largeur des tuiles — en POURCENTAGE, pas en pixels.
   ------------------------------------------------------------------
   Cube Portfolio divise la largeur mesuree de chaque tuile par
   mosaicWidthReference — qui vaut columnWidth, la colonne AVEC sa
   gouttiere, calculee sur la largeur reelle du conteneur. Une valeur en
   pixels ne peut pas la deviner : elle depend du conteneur, des marges
   Bootstrap et du nombre de colonnes du palier.

   Constate : a 380px de fenetre, columnWidth vaut 180 alors qu'un CSS a
   130px supposait 140 — le rapport tombait a 1,55, et getColsMosaic
   arrondissant a l'inferieur sous 0,79 de decimale, la vignette repassait
   a UNE colonne.

   En pourcentage, le rapport est exact par construction : la simple vaut
   1/cols du conteneur, la double 2/cols. Les paliers suivent les cols des
   mediaQueries de public/js/accueil.js (5/4/3/2).
------------------------------------------------------------------ */
#grid-container .cbp-item            { width: 50%; }        /* 2 colonnes */
#grid-container .cbp-item.cbp-item-2 { width: 100%; }

@media (min-width: 450px) {                                  /* 3 colonnes */
	#grid-container .cbp-item            { width: 33.333%; }
	#grid-container .cbp-item.cbp-item-2 { width: 66.666%; }
}
@media (min-width: 570px) {                                  /* 4 colonnes */
	#grid-container .cbp-item            { width: 25%; }
	#grid-container .cbp-item.cbp-item-2 { width: 50%; }
}
@media (min-width: 992px) {                                  /* 5 colonnes */
	#grid-container .cbp-item            { width: 20%; }
	#grid-container .cbp-item.cbp-item-2 { width: 40%; }
}

/* ------------------------------------------------------------------
   Illustration de booklist — une vignette large de deux couvertures
   ------------------------------------------------------------------
   Meme hauteur qu'une couverture (les hauteurs sont fixees plus bas, par
   palier) : la tuile double occupe deux cases en largeur, pas en hauteur.

   L'image est recadree en cover — le ratio d'une tuile double est ~1.37
   (paysage), une image portrait serait donc rognee haut et bas. L'ecran
   d'upload le signale.
------------------------------------------------------------------ */
/* Barre de retour, visible quand une booklist est ouverte. */
#en-illu-retour {
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 0 0 18px;
	padding: 11px 16px;
	background: #f4f6f9;
	border-left: 3px solid var(--theme-primary, #4e78c6);
	border-radius: 4px;
	cursor: pointer;
	transition: background .15s;
}
#en-illu-retour:hover { background: #eaeef4; }
#en-illu-retour .en-illu-retour-fleche {
	font-size: 1.3em;
	line-height: 1;
	color: var(--theme-primary, #4e78c6);
}
#en-illu-retour .en-illu-retour-texte { font-size: .95em; color: #444; }
#en-illu-retour em { font-style: normal; font-weight: 600; color: #222; }

#grid-container .en-illu { cursor: pointer; }
#grid-container .en-illu .en-illu-image {
	background-size: cover !important;
	background-position: center !important;
	border-radius: 3px;
}

/* Sans image : un pave au nom de la booklist plutot qu'un trou. */
#grid-container .en-illu .en-illu-vide {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 12px;
	background: var(--theme-primary, #4e78c6);
	border-radius: 3px;
	text-align: center;
}
#grid-container .en-illu .en-illu-nom {
	color: #fff;
	font-size: 1.05em;
	line-height: 1.3;
	font-weight: 600;
}

#grid-container .cbp-item .cbp-caption-defaultWrap {
	position: relative;
	-webkit-filter: drop-shadow(4px 4px 4px #ccc);
	filter: drop-shadow(4px 4px 4px #ccc);
	background-repeat: no-repeat;
	background-position: bottom center;
}
@media (max-width: 767px) {
	#grid-container .cbp-item .cbp-caption-defaultWrap {
		-moz-background-size: 130px auto;
		-o-background-size: 130px auto;
		-webkit-background-size: 130px auto;
		background-size: 130px auto;
		height: 200px;
	}
}
@media (min-width: 768px) {
	#grid-container .cbp-item .cbp-caption-defaultWrap {
		-moz-background-size: 160px auto;
		-o-background-size: 160px auto;
		-webkit-background-size: 160px auto;
		background-size: 160px auto;
		height: 240px;
	}
}
@media (min-width: 993px) {
	#grid-container .cbp-item .cbp-caption-defaultWrap {
		-moz-background-size: 210px auto;
		-o-background-size: 210px auto;
		-webkit-background-size: 210px auto;
		background-size: 210px auto;
		height: 340px;
	}
}
@media (min-width: 1200px) {
	#grid-container .cbp-item .cbp-caption-defaultWrap {
		-moz-background-size: 200px auto;
		-o-background-size: 200px auto;
		-webkit-background-size: 200px auto;
		background-size: 200px auto;
		height: 330px;
	}
}
#grid-container .cbp-item .cbp-l-grid-agency-title {
	font-size: 12px;
	margin-top: 0;
}
#grid-container .cbp-item .cbp-l-grid-agency-desc {
	font-size: 10px;
}

/* ---------------------------- */
/* FILTRE DE RECHERCHE          */
/* ---------------------------- */
#zone_filtre {
	z-index: 1000;
	background-repeat: no-repeat;
	background-position: center center;
}

#filtre_formulaire {
	width: 50%;
	margin: 0 60% 0 40%;
}
#filtre_formulaire .filtre span {
	text-transform: capitalize;
}

#js-grid-blog-posts .cbp-caption img {
	position: absolute;
	bottom: 0;
}
@media (min-width: 993px) {
	#js-grid-blog-posts .cbp-caption {
		height: 340px;
	}
}
@media (min-width: 1200px) {
	#js-grid-blog-posts .cbp-caption {
		height: 330px;
	}
}

/* ---------------------------- */
/* VALIDATION FORMULAIRES       */
/* ---------------------------- */
.form-control.error,
input.error,
select.error,
textarea.error {
	border: 2px solid #e74c3c !important;
	background-color: #fdf2f2 !important;
}
.form-control.error:focus,
input.error:focus,
select.error:focus,
textarea.error:focus {
	border-color: #c0392b !important;
	box-shadow: 0 0 5px rgba(231, 76, 60, 0.5) !important;
}
label.error {
	color: #e74c3c !important;
	font-size: 12px;
	font-weight: bold;
	margin-top: 5px;
	display: block;
}
.input-group + label.error {
	margin-top: 5px;
	margin-bottom: 10px;
}
/* Radio buttons en erreur */
#bloc_activite.has-error .checkbox-inline {
	color: #e74c3c;
}
#bloc_activite .row + label.error {
	margin-top: 10px;
	display: block;
}