@font-face {
	font-family: "Comic Sans MS";
	src: url("fonts/comic-sans-ms/comic.ttf");
}


html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
::placeholder { /* color: #460B38; */ }
.is-hidden { display: none; }
ul li { list-style: none; }
img { max-width: 100%; }
a { text-decoration: none;color: inherit; }
.position-relative { position: relative; }
.position-absolute { position: absolute; }
.double-size { font-size: 2em; }
.middle-v { vertical-align: middle; }
.on-middle-h { left: 50%;transform: translateX(-50%); }
.margin-top-small { margin-top: 5px !important; }
.margin-bottom-small { margin-bottom: 5px !important; }
.margin-right-small { margin-right: 5px; }
.color-gray { color: #777; }
.lineheight-min { line-height: 1.15; }
.inline-block { display: inline-block; }
.no-wrap { white-space: nowrap; }
.flex-center-v { display: flex;align-items: center; }

/* ---------- */
.pulse {
	animation-name: pulse_animation;
	animation-duration: 1.25s;
	transform-origin: 50% 50%;
	animation-iteration-count: infinite;
	animation-timing-function: ease-in-out;
}
@keyframes pulse_animation {
	0% { transform: scale(1); }
	20% { transform: scale(1); }
	50% { transform: scale(1.3); }
	100% { transform: scale(1); }
}
.pulse_color {
	animation-name: pulse_color_animation;
	animation-duration: 1.75s;
	transform-origin: 50% 50%;
	animation-iteration-count: infinite;
	animation-timing-function: linear;
}
@keyframes pulse_color_animation {
	0% 	 { transform: scale(1); }
	40%  { transform: scale(1.15);color: rgb(255,255,0); }
	60%  { transform: scale(1);color: rgb(255,255,255); }
	100% { transform: scale(1); }
}
/* ---------- */


html {
	font-size: 16px;
}
body {
	font-family: Montserrat,sans-serif;
}
body, #books {
	background-color: #fff;
}

#cache-scroll {
	position: fixed;
	top: 0; left: 0;
	width: 100%; height: 50px;
	background-color: inherit;
	z-index: 1;
}
img[alt="Patientez ..."] {
	display: flex;
	margin: auto;
}
#ajax-loader {
	position: fixed;
	display: none;
	left: 50%; top: 50%;
	transform: translate(-50%,0);
}
#books blockquote {
	margin-bottom: 1rem;
	font-size: 1rem;
	color: #666;
}
#books blockquote p { font-style: italic; }
#books blockquote cite { display: block;text-indent: 7px; }

button.btn {
	display: block;
	margin-left: auto;
	margin-right: auto;
	border: none;
	border-radius: 4px;
	font-family: Montserrat,sans-serif;
	font-weight: bold;
	font-size: inherit;
	cursor: pointer;
}

.lightgray-box {
	background: #fafafa;
	border: 1px solid #cccfdd;
	box-shadow: 0 0 4px rgb(0 0 0 / 20%);
	text-decoration: none;
}

/* --- MENU */
.menu > li {
	position: relative;
}
.menu > li:not(.active):hover {
	background: #eee !important;
}
.menu > li.active {
	font-weight: 900;
	color: black;
}
.menu {
	display: none;
	position: absolute;
	top: 90%; right: 0;
	box-sizing: border-box;
	margin: 7px;
	padding: 12px 15px 20px;
	font-size: 1rem;
	text-align: left;
	cursor: pointer;
	z-index: 1000;
}
.menu > li {
	padding: .25rem 5px;
	color: #444;
	white-space: nowrap;
}
.arrow-bottom { position: relative; }
.arrow-bottom:after {
	content: "";
	background: url("data:image/svg+xml,%3Csvg fill='%23ffffff' xmlns='http://www.w3.org/2000/svg' x='0px' y='0px' viewBox='284.89 438.709 24 14.926' enable-background='new 284.89 438.709 24 14.926' xml:space='preserve'%3E%3Cpath d='M285.296,438.729h23.188l-11.594,14.906L285.296,438.729z'/%3E%3C/svg%3E%0A") no-repeat;
	background-size: contain;
	display: inline-block;
	width: 12px; height: 10px;
	margin-left: 4px;
	opacity: .7;
	vertical-align: middle;
}

.tri-select.arrow-bottom:after {
	float: right;
	margin-top: 6px;
}
/* -------- */


header, footer {
	z-index: 8;
}


/*	HEADER
--------------
*/
header {
	position: fixed;
	top: 0; left: 50%;
	transform: translateX(-50%);
	width: 700px; max-width: 100%;
	/* height: 150px;  */
	height: 130px;
}
header:before {
	content: "";
	position: absolute;
	top: 0; left: 50%;
	transform: translateX(-50%);
	width: 100vw; height: 100%;
	background: url(img/bg-forest.png);
	background-position: right -60px;
}
@media screen and (max-width: 500px) {
	header:before {
	   background-position: right;
	}
}


header .visuel {
	position: absolute;
	bottom: -50px; left: -110px;
	height: 120px; width: auto;
	z-index: 1;
}
.login-page header:after{ display: none; }
header img[alt="header-titre"] {
	width: 180px;
	filter: drop-shadow(1px 2px 1px rgba(0,0,0, .4));
}
.login-page header img[alt="header-titre"] {
	width: 230px;
}
#header-top-bar {
	position: absolute;
	box-sizing: border-box;
	top: 35%; left: 0;
	width: 100%;
	padding: 0 4px;
	font-size: 1rem;
	display: flex;
	flex-wrap: nowrap;
	justify-content: space-around;
	align-items: center;
	/* transition: top 1s;  */
}
#header-top-bar #logo-wrapper { position: relative; }
#header-top-bar #logo-wrapper .current-user {
	position: absolute;
	top: -22px; left: 0;
	padding-left: 5px;
	width: 100%;
	text-align: left;
	color: white;
	/* white-space: nowrap; */
	font: 16px "Comic Sans MS", sans-serif;
	letter-spacing: 0.055em;
	z-index: 1;
}

#header-top-bar .current-user:before { content: "\e817" " ";font-family: fontello;margin-right: 4px; }

#header-top-bar .current-user .message-to-user-container { height: 24px; }
#header-top-bar .current-user .message-to-user-container.has-notification:after {
	content: "Vous avez un message";
	position: absolute;
	top: -1px;
	left: calc(100% + 12px);
	width: 215px; height: 24px;
	padding-right: 10px;
	text-align: right;
	background-color: tomato;
	background-image: url(img/arrow-left.svg);
	background-repeat: no-repeat;
	background-position: 4px center;
	transition: top 1s;
	pointer-events: none;
}
#header-top-bar .current-user .message-to-user-container.has-notification.is-offScreen:after { top: -500px; }

#header-top-bar .current-user .message-to-user-container > img[src$="email.svg"] { height: 18px;min-width: 24px;cursor: pointer; }
#header-top-bar .current-user .message-to-user-container > #message-to-user {
	position: absolute;
	top: 60%; left: -10px;
	box-sizing: border-box;
	width: 275px;
	background: Azure;
	margin-left: 4px;
	padding: 10px 16px;
	font-size: 1.05rem;
	color: black;
	box-shadow: 0 0 4px rgb(0,0,0, .25);
	opacity: 0;
	z-index: 1;
	pointer-events: none;
	transition: left .35s, opacity .25s;
}
#message-to-user:after {
	/* 2ème bordure */
	content: "";
	position: absolute;
	border: 2px dotted #7cc3c3;
	left: 1px;
	right: 1px;
	top: 1px;
	bottom: 1px;
	z-index: -1;
}
.isMobile #header-top-bar .current-user .message-to-user-container > #message-to-user { width: 235px; }
#header-top-bar .current-user .message-to-user-container > #message-to-user.show { left: 50%;opacity: 1;pointer-events: all; }
#header-top-bar .current-user .message-to-user-container #message-to-user button {
	width: 5.5rem;
	margin-top: 12px;
	line-height: 1.5rem;
	font-size: 1.05rem;
	background: #1f7a8c;
	color: white;
}

#header-top-bar > a { position: relative; }
.login-page #header-top-bar { top: 25%; }
#header-top-bar.on-top { top: 20%; }	/* -> scripts.js */
#header-top-bar.on-middle { top: 35%; }	/* -> scripts.js */

header #search input {
	border: none;
	max-width: 160px;
	margin-left: 7px;
  	padding: 4px 10px;
	border-radius: 4px;
	background: rgba(255,255,255, .65);
	font: normal 1rem Montserrat,sans-serif;
	vertical-align: top;
	outline: none;
}
.isMobile header #search input {
   font-size: .85rem;
}
header #search-by-date-wrapper {
	position: relative;
	display: inline-block;
}

#categorie-title {
	position: absolute;
	top: 78px;
	width: 100%;
	color: white;
	font-size: 1.25em;
	text-align: center;
	line-height: 1.1;
}

.icon-search, .icon-calendar {
	font-size: 1.5em;
	color: white;
	opacity: .55;
	vertical-align: middle;
	cursor: pointer;
}
.icon-calendar {font-size: 1.1em;}

#display-tri {
	display: block;
	margin-top: 4px;
	font-size: .85em;
	color: rgba(255,255,255, .7);
}
#display-tri .tri-select {
	display: inline-block;
	padding: 1px 8px;
	border: 1px solid rgba(255,255,255, .55);
	border-radius: 3px;
	text-align: left;
	/* filter: brightness(110%); */
	cursor: pointer;
}
#display-tri .tri-select + .tri.menu {
	display: none;
}

#sub-header strong, .message strong {font-weight: 700;}
#sub-header {
	position: absolute;
	left: 0; top: 100%;
	box-sizing: border-box;
	width: 100%;
	/* height: 60px; => HAUTEUR EN JS */
	margin-top: 3px;
	padding: 10px 35px;
	font-style: italic;
	font-family: Georgia;
	line-height: 1.2;
	text-align: center;
	color: #3d7177;
	background: rgb(239,239,246);
	border: solid white;
	border-width: 0 15px 10px 15px;
	overflow: hidden;
	/* transition: height .5s; */
	/* background: linear-gradient(180deg, rgba(255,255,255,1) 0%, rgba(255,255,255,1) 70%,rgba(255,255,255,0.40) 100%); */
}
#sub-header .close {
}
#sub-header #resize {
	position: absolute;
	right: 0; bottom: 0;
	padding: 1px;
	transform: scaleX(-1);
	color: #55868c;
	cursor: pointer;
	background: #d3d3e7;
}
#sub-header #resize.icon-resize-full {
 	background: none !important;
}
.sub-header-small #sub-header { /* class body */
	display: none;
}
.sub-header-small #sub-header p { /* display: none; */}
.sub-header-small #books { padding-top: 150px !important; }
.sub-header-small .back-btn { top: 140px; }






/*	SIDEBAR Boutons
--------------
*/
#sidebar {
	position: absolute;
	left: 1px; top: 140px;
	width: 32px;
	cursor: pointer;
}
#sidebar .button-wrapper {
	position: relative;
}
#sidebar .button {
	position: relative;
	display: flex;
	justify-content: center;
	align-items: center;
	width: 32px;
	height: 32px;
	margin-bottom: 8px;
	padding: 0;
	font-size: 24px;
	color: white;
	background: #444;
	border-radius: 50%;
	z-index: 1;
	/* border: 1px solid #000; */
}
#sidebar #button-message-admin { background: #c71585; }
#sidebar #button-add-book { background: royalblue; }
#sidebar #button-add-book > img { width: 76%; height: 76%; }

#sidebar .button + .message {
	position: absolute;
	right: 34px;
	/* top: 0;  => défini dans style inline */
	box-sizing: border-box;
	width: 25vw;
	min-width: 350px;
	min-height: 100px;
	max-height: 55vh;
	overflow-x: hidden;
	overflow-y: auto;
	padding: 0 25px 20px;
	font: 1.05rem "Comic Sans MS", sans-serif;
	opacity: 0;
}
#sidebar .button + .message em {
	font-style: italic !important;
}

#sidebar #button-add-book > img {
	width: 76%; height: 76%;
}
#sidebar .icon-mobile::before {
	font-size: 1.2em;
}

.fadeInLeft {
	animation-name: fadeInLeft;
	animation-timing-function: ease-out;
	animation-fill-mode: forwards; /* conserve style défini par la dernière image clé */
	animation-duration: .25s;
}
.fadeInRight {
	animation-name: fadeInLeft;
	animation-timing-function: ease-out;
	animation-fill-mode: forwards; /* conserve style défini par la dernière image clé */
	animation-duration: .25s;
	animation-direction: reverse;
}

@keyframes fadeInLeft {
	0%		{ opacity: 0; left: 0; }
	100% 	{ opacity: 1; left: 120% }
}

@media screen and (max-width: 500px) {
	.message {
		width: 81vw !important;
		min-width: 0 !important;
	}
}




/*	FOOTER
--------------
*/
footer {
	/* display: none;  */
	position: fixed;
	display: flex;
	justify-content: center;
	bottom: 0;
	width: 100%;
	margin: auto;
	padding: 8px 0;
	text-align: center;
	color: rgba(255,255,255, .9);
	/* background-color: #40006B; */
}
#footer {
	position: relative;
	width: 100%;
	max-width: 600px;
}
#footer > p small {
	font-size: .85rem;
}
#footer #active-help  {
	font: .95rem "Comic Sans MS", sans-serif;
	cursor: pointer;
}
#footer #active-help span:hover  {
	background: rgba(0,0,0, .5);
}
#footer #active-help > img  {
	width: 1.25rem; height: auto;
}
#footer #something_else span {
	display: inline-block;
	font-family: "comic sans MS", sans-serif;
/* 	line-height: 34px; */
	cursor: pointer;
}
#footer #notes {
	font-size: .75em;
	font-style: italic;
	line-height: 1;
	opacity: .75;
}
.back-btn {
	display: none;
	position: absolute;
	right: 4px; top: 170px;
	/* opacity: .55;  */
	box-sizing: border-box;
	width: 38px;
	height: 38px;
	padding: 12px;
	background: url(img/back.svg) no-repeat center center;
	background-size: 70%;
	border-radius: 50%;
	opacity: 1;
	transition: top .25s;
}
.isMobile .back-btn {/*  right: 10px;bottom: 40px;  */}

.back-btn:before { /* opacité */
	content: "";
	position: absolute;
	left: 0; top: 0;
	width: 100%; height: 100%;
	border-radius: 50%;
	background-color: inherit;
	opacity: .25;
	z-index: 1;
}
.back-btn:after {
	content: "Retour";
	position: absolute;
	transform: translate(-50%, 0);
	left: 50%; top: 100%;
	padding: 0 2px;
	font-size: .55rem;
	width: 100%;
	text-align: center;
	background-color: black;
	border: 1px solid white;
	color: white;
}



/*	CATEGORIES
--------------
*/
.item-categorie {
	display: flex;
	position: relative;
	align-items: center;
	/* margin-bottom: 5px; */
	font-size: 1.15rem;
	padding: 4px 0;
	border-top: 1px solid rgba(85, 86, 92, .25);
	cursor: pointer;
	background: #fff;
	transition: background .35s;
}
.item-categorie:after {
	content: attr(data-count);
	position: relative;
	top: -5px; left: 7px;
	font-size: .75em;
	color: #777;
}
.item-categorie:first-child {
	border-top: none;
}
.item-categorie > span {
	/* picto */
	margin-right: 8px;
	margin-left: 4px;
	/* font-size: 1.75rem; */
}
.item-categorie > small {
	margin-left: 0.45em;
}
.item-categorie:hover {
	/* font-weight: 700; */
	background: #e6e6e6;
}
.item-categorie .cat-vignette {
	flex: none;
	width: 3.44rem; height: 3.44rem;
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center center;
}



/*	BOOKS
--------------
*/
#books-container {
	display: flex;
	flex-direction: column;
	align-items: center;
	padding-bottom: 60px;
	overflow: hidden;
}
#books {
	position: relative;
	/* min-width: 250px; */
	max-width: 600px;
	padding-top: 210px;
	transition: padding-top .35s;
}

#books #item-info {
	font-size: .75em;
	text-align: right;
	padding-bottom: 7px;
	color: #666;
}
#books #count, #books #tri, #books li[data-tri-menu], #books #params {
	display: none;
}
.item-book {
	margin-bottom: 40px;
}
.item-book .auteur {
	position: relative;
	font-weight: bold;
	vertical-align: top;
}
.item-book .titre {
	padding-bottom: 2px;
	font-size: 1.5em;
	line-height: 1;
	color: #691155; /* #555 */
}
.item-book .date {
	font-size: .85em;
}
.item-book img[src$="calendar-today.svg"] {
	float: right;
	width: 1em; height: 1em;
	margin-top: 2px;
}
.item-book .note {
	font-size: 1em;
	line-height: 1.3;
	margin-top: 4px;
	padding-top: 6px;
	border-top: 1px solid #ccc;
	overflow: hidden;
}
.item-book .note img {
	float: left;
	width: 125px; height: auto;
	margin: 5px 15px 0 0;
	border: 1px solid #ccc;
}
.item-book .note img:hover {
	box-shadow: 0 0 7px #aaa;
}
.isMobile .item-book .note img {
	float: none;
 	display: block;
	width: 145px;
	margin: 0 auto 10px;
}
.item-book .note strong {
	font-weight: 700;
}
.item-book p:nth-child(2) a:hover { /* titre */
	text-decoration: underline dotted #555;  /* rgb(158, 26, 128) */
}
.item-book .no-file {
	position: relative;
	top: -3px; left: -4px;
	font-size: .7em;
	color: tomato;
}
.badge-categorie { /* affiché en mode Recherche */
	display: inline-block;
	font-size: .75rem;
	margin-top: 8px;
	padding: 2px 8px;
	background: #55565c;
	color: white;
	border-radius: 10px;
	vertical-align: middle;
}
.badge-categorie:before {
	content: "\e802" " ";
	font-family: 'fontello';
}

.no-result {
	position: relative;
	background: url(img/no-result.png) no-repeat center center;
	background-size: contain;
	width: 150px; height: 150px;
	margin-top: 50px;
}
.no-result:after {
	content: "Si votre recherche porte sur un auteur, essayez avec le nom seul.";
 	position: absolute;
	left: 0; top: 100%;
	width: 240px;
	margin-left: -45px;
	font-size: .85rem;
	font-style: italic;
}

.item-book .auteur > a,
.item-categorie small,
#categorie-title #title > small {
	position: relative;
	font-size: 0.7em;
}

.item-book .auteur > a:not([data-pays=""]) {
	white-space: nowrap;
	z-index: 1;
}
.item-book .auteur > a:not([data-pays=""]):after {
	/* icone Question */
	content: "";
	display: inline-block;
	background: url(img/ico-question.svg) no-repeat center center;
	background-size: contain;
	width: 1em; height: 1em;
	position: relative;
	top: -2px;
	margin-left: 2px;
	border-radius: 50%;
}
.item-book .auteur > a:not([data-pays=""]):before {
	/* bulle nom pays */
	content: attr(data-pays);
	visibility: hidden;
	position: absolute;
	left: -100px; bottom: 1.14rem; /* 21px */
	padding: 2px 8px;
	color: white;
	background-color: #fff;
	white-space: nowrap;
	z-index: 0;
	transition: background-color .5s;
}
.item-book .auteur > a:not([data-pays=""]):focus:before,
.item-book .auteur > a:not([data-pays=""]):active:before {
	visibility: visible;
	left: 8px;
	background-color: #000;
}




/*	CONNEXION
--------------
*/
#connexion-image-wrapper {
	 margin: 150px 0 10px;
	 text-align: center;
}
#connexion-image-wrapper > img {
	max-width: 360px;
	max-height: 260px;
}

.isMobile #connexion-image-wrapper > img {
	max-width: 95% !important;
}
#connexion-box {
	display: flex;
	flex-direction: column;
	justify-content: center;
	width: 100%;
	max-width: 250px;
	/* margin: 200px auto 0; */
	margin: 0 auto 0;
	padding: 30px;
	background: white;
	box-shadow: 0 0 3px rgba(0,0,0, .2);
}
#connexion-box .icon-strongbox {
	text-align: center;
	font-size: 4em;
	margin-bottom: 30px;
	color: slategray;
	opacity: .5;
}
#connexion-box .icon-strongbox small {

}
#connexion-box > div {
	display: flex;
	align-items: center;
	/* padding-left: 5px;  */
	border-bottom: 1px solid rgba(85,86,92, .35);
	overflow: hidden;
}
#connexion-box > div span[class^="icon-"] {
	font-size: 1.5em;
	color: slategray;
}
#connexion-box #mdp-eye {
	font-size: 1.3em;
	cursor: pointer;
}
.cadenas-color {
	color: slategray;
}
.cadenas-color-error {
	color: tomato !important;
}
#connexion-box input[name="mdp"] {
	box-sizing: border-box;
	padding: 5px;
	background: transparent;
	width: 100%;
	font-size: 1em;
	border: none;
	outline: none;
}
#connexion-box input[type="submit"] {
	box-sizing: border-box;
	margin-top: 10px;
	padding: 13px 5px;
	font-size: 1rem;
	font-family: inherit;
	font-weight: bold;
 	background-color: rgba(85, 86, 92, 1);
	color: rgba(255,255,255, .75);
	border: none;
	border-radius: 4px;
	cursor: pointer;
}
#connexion-box + p {
	position: absolute;
	left: 0; bottom: 50px;
	width: 100%;
	text-align: center;
}




/*	MODAL
--------------
*/
.modal:not(#modal-registration) { display: none; }
.modal {
	position: fixed;
	z-index: 10;
	left: 0; top: 0;
	width: 100%;
	height: 100%;
	overflow: auto;
	background-color: rgb(0,0,0); /* Fallback color */
	background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}
/* Modal Content/Box */
.modal-content {
	position: relative;
	box-sizing: border-box;
	background-color: #fefefe;
	margin: 5% auto;
	padding: 15px 35px 35px;
	border: 1px solid #888;
	width: 380px;
	max-width: 93%;
	border-radius: 8px;
}
.modal-content > h1 {
	margin-bottom: 5px;
	font-size: 1.25em;
	text-transform: uppercase;
	text-align: center;
	white-space: nowrap;
}
.isMobile .modal-content > h1 {
	font-size: 1.1em;
}
#modal-demande.modal .notification, #modal-demande .mail-success {
	background: #c8ffc8;
}
#modal-demande .modal-content h1:before {
	content: "";
	display: inline-block;
	height: 2em; width: 2em;
	margin-right: 7px;
	background: url(img/book-red.png) no-repeat center center;
	background-size: contain;
	vertical-align: middle;
}

#modal-registration .notification {
	line-height: 1.15;
}
.modal-content * {
	font-family: "Comic Sans MS", sans-serif;
}
.modal-content i {
	vertical-align: middle;
	color: green;
}
/* CLOSE Btn */
.close {
	position: absolute;
	top: 0; right: 10px;
	color: tomato;
	font-size: 32px;
	line-height: 1;
	/* font-weight: bold; */
}
.message .close {
	position: sticky;
	position: -webkit-sticky;  /* Safari */
	top: 0px; left: 0;
	display: block;
	width: 100%;
	height: 24px;
	text-align: right;
	line-height: 0.7;
	background: #fafafa;
}
.close:hover, .close:focus {
	color: black;
	text-decoration: none;
	cursor: pointer;
}

/* FORM */
.modal label { display: inline-block;font-size: 1.1em;line-height: 1.1;margin: 10px 0 3px 0;color: #444; }
.modal label > strong { font-weight: 700; }
.modal textarea, .modal input[type="text"], .modal input[type="email"] {
	width: 98%;
	padding: 4px;
	font-size: 1rem;
	color: #777;
}
.modal .submit-box { margin-top: 20px;text-align: center; }
.modal .submit-box button {
	padding: 10px 30px;
	background: rgb(85, 86, 92);
	color: rgba(255,255,255, .85);
}
.modal .submit-box button:active {
	background: rgba(85,86,92, .5);
}
.modal .submit-box button[disabled] { opacity: .5;cursor: default; }

.modal .notification { display: flex; }
.modal .notification span:first-child { flex: none;margin-right: 5px; }
.modal .input-errors { display: block;height: 1.15em;padding: 7px 0;color: red; }

#modal-registration form { margin-top: 15px; }
#modal-registration .input-wrapper { display: flex; }
#modal-registration .input-wrapper i { font-size: 1.6em;color: slategray;border: 1px solid;border-right: none; }
#modal-registration .input-wrapper input { border: 1px solid;border-left: none; }
#modal-registration .submit-box { margin-top: 0 !important; }




@media screen and (max-width: 500px) {
	html { font-size: 20px; }
	#connexion-image-wrapper > img { max-width: 95%; }
	header:after { height: 90px; }
	header img[alt="header-titre"] { width: 122px; }
	#categorie-title { top: 68px; }
	#books { max-width: 80%; }
	#books #item-info { color: #333; }
	header #search input { max-width: 125px; }
	#header-top-bar > a {  position: static; }
	header .visuel { left: 7px;bottom: -35px;height: 85px; }
	#header-top-bar #logo-wrapper .current-user { top: -25px; }
}