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

	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; }
/* L'illustration est une <img> dans un cadre qui l'epouse (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. On la contient donc dans la tuile (max-width/max-height) au lieu de
   la faire remplir : elle reste entiere, haut et bas compris.
   Le cadre en inline-block prend exactement la taille de l'image affichee —
   c'est lui qui porte le repere « booklist », qui colle ainsi a l'image et non
   au rectangle de la tuile. */
/* !important : la regle generique .cbp-item .cbp-caption-defaultWrap est plus
   specifique (3 classes) ET declaree plus bas — sans cela, le centrage serait
   ignore. Meme raison que les !important de l'ancienne version. */
#grid-container .en-illu .en-illu-image {
	display: flex !important;
	align-items: center;
	justify-content: center;
	background-image: none !important;
	border-radius: 3px;
}
#grid-container .en-illu .en-illu-cadre {
	position: relative;
	display: inline-block;
	max-width: 100%;
	max-height: 100%;
	line-height: 0;      /* pas de blanc sous l'image (baseline inline) */
}
#grid-container .en-illu .en-illu-cadre img {
	display: block;
	max-width: 100%;
	max-height: 100%;
	width: auto;
	height: auto;
	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; }
/* L'illustration est une <img> dans un cadre qui l'epouse (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. On la contient donc dans la tuile (max-width/max-height) au lieu de
   la faire remplir : elle reste entiere, haut et bas compris.
   Le cadre en inline-block prend exactement la taille de l'image affichee —
   c'est lui qui porte le repere « booklist », qui colle ainsi a l'image et non
   au rectangle de la tuile. */
/* !important : la regle generique .cbp-item .cbp-caption-defaultWrap est plus
   specifique (3 classes) ET declaree plus bas — sans cela, le centrage serait
   ignore. Meme raison que les !important de l'ancienne version. */
#grid-container .en-illu .en-illu-image {
	display: flex !important;
	align-items: center;
	justify-content: center;
	background-image: none !important;
	border-radius: 3px;
}
#grid-container .en-illu .en-illu-cadre {
	position: relative;
	display: inline-block;
	max-width: 100%;
	max-height: 100%;
	line-height: 0;      /* pas de blanc sous l'image (baseline inline) */
}
#grid-container .en-illu .en-illu-cadre img {
	display: block;
	max-width: 100%;
	max-height: 100%;
	width: auto;
	height: auto;
	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 .en-illu-cadre::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;
}