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

	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.
------------------------------------------------------------------ */
/* Retour a l'accueil : une CROIX seule, visible quand une booklist est
   ouverte. L'encart gris pleine largeur qui la precedait annoncait une
   section, alors qu'il ne fait que fermer. Meme bleu que le repere des
   illustrations. Sans contour : le signe suffit a se lire. */
#en-illu-retour {
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 0 0 14px;
	padding: 0;
	background: none;
	border: none;
	color: #4e78c6;
	cursor: pointer;
	transition: opacity .15s;
}
#en-illu-retour:hover,
#en-illu-retour:focus { opacity: .6; outline: none; }
#en-illu-retour .en-illu-retour-croix {
	font-size: 2.6em;
	line-height: 1;
}

#grid-container .en-illu { cursor: pointer; }
/* CONTAIN et non cover (2026-08-23) : la tuile a une hauteur FIXE par palier
   (200px en mobile, 340px au-dela), calee sur des couvertures en portrait.
   Une illustration de booklist est en PAYSAGE : « cover » l'agrandissait pour
   remplir cette hauteur, et lui rognait donc le haut et le bas — en mobile, le
   titre de l'illustration disparaissait. « contain » la montre entiere, quelle
   que soit la hauteur de la tuile. */
#grid-container .en-illu .en-illu-image {
	background-size: contain !important;
	background-position: center !important;
	background-repeat: no-repeat !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.
------------------------------------------------------------------ */
/* Retour a l'accueil : une CROIX seule, visible quand une booklist est
   ouverte. L'encart gris pleine largeur qui la precedait annoncait une
   section, alors qu'il ne fait que fermer. Meme bleu que le repere des
   illustrations. Sans contour : le signe suffit a se lire. */
#en-illu-retour {
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 0 0 14px;
	padding: 0;
	background: none;
	border: none;
	color: #4e78c6;
	cursor: pointer;
	transition: opacity .15s;
}
#en-illu-retour:hover,
#en-illu-retour:focus { opacity: .6; outline: none; }
#en-illu-retour .en-illu-retour-croix {
	font-size: 2.6em;
	line-height: 1;
}

#grid-container .en-illu { cursor: pointer; }
/* CONTAIN et non cover (2026-08-23) : la tuile a une hauteur FIXE par palier
   (200px en mobile, 340px au-dela), calee sur des couvertures en portrait.
   Une illustration de booklist est en PAYSAGE : « cover » l'agrandissait pour
   remplir cette hauteur, et lui rognait donc le haut et le bas — en mobile, le
   titre de l'illustration disparaissait. « contain » la montre entiere, quelle
   que soit la hauteur de la tuile. */
#grid-container .en-illu .en-illu-image {
	background-size: contain !important;
	background-position: center !important;
	background-repeat: no-repeat !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;
}

/* ------------------------------------------------------------------
   Repere « booklist » sur les illustrations de la grille
   ------------------------------------------------------------------
   Une vignette d'illustration s'ouvre sur le contenu de la booklist,
   alors qu'une couverture ouvre un livre : rien ne distinguait les deux
   avant le clic. Un carre a contour bleu, en haut a gauche, marque
   celles qui sont des listes.

   Bleu #4e78c6 : celui du Reader (--reader-primary), deja la couleur de
   reference de la maison — cf. conventions §8.

   Pose sur .cbp-caption, qui porte l'image : Cube Portfolio recalcule la
   taille des tuiles, un repere ancre plus haut se decalerait.
------------------------------------------------------------------ */
#grid-container .en-illu .cbp-caption { position: relative; }

#grid-container .en-illu .cbp-caption::before {
	content: "";
	position: absolute;
	top: 10px;
	left: 10px;
	width: 26px;
	height: 26px;
	box-sizing: border-box;
	border: 2px solid #4e78c6;
	border-radius: 3px;
	background: transparent;
	pointer-events: none;
	z-index: 2;
}