/*******************************************************************************************************/
/* FONT */
/*******************************************************************************************************/
@font-face {
  font-family:'delius';
  src:url('../fonts/delius/delius-regular-webfont.eot'); /* IE9 Compat Modes */
  src:url('../fonts/delius/delius-regular-webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/delius/delius-regular-webfont.woff2') format('woff2'), /* Super Modern Browsers */
       url('../fonts/delius/delius-regular-webfont.woff') format('woff'), /* Pretty Modern Browsers */
       url('../fonts/delius/delius-regular-webfont.ttf')  format('truetype'), /* Safari, Android, iOS */
       url('../fonts/delius/delius-regular-webfont.svg#svgFontName') format('svg'); /* Legacy iOS */
		 
	font-weight:normal;
    font-style:normal;
}

/*******************************************************************************************************/
/* STYLES GENERAUX */
/*******************************************************************************************************/
*{
	margin:0px;
	padding:0px;
	box-sizing:border-box;
	font-size:100%;
}

*:focus {
	outline:none;
}

*::-moz-focus-inner {
	border:none;
}

html {
	scroll-behavior:smooth;
}

body {
	width:100%;
	font-family:delius, tahoma, arial, sans-serif;
    font-size:100%;
	background-color:#ededed;
	color:#222;/*#222;*/

	background-image:url('../graphisme/fond_page.jpg');
    background-size:cover;
	background-position:0 0;
	background-repeat:no-repeat;
    background-attachment:fixed;
    
	visibility:hidden;
	opacity:0;
	transition:visibility 0s, opacity 0.5s linear;

  -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
     -khtml-user-select: none; /* Konqueror HTML */
       -moz-user-select: none; /* Old versions of Firefox */
        -ms-user-select: none; /* Internet Explorer/Edge */
            user-select: none; /* Non-prefixed version, currently
                                  supported by Chrome, Opera and Firefox */
}

a,
a:hover,
a:visited {
	font-weight:700;
	font-size:1.2rem;
	text-decoration:none;
	color:#00a2e3;
	word-wrap:break-word;
}

.note a,
.note a:hover,
.note a:visited {
	font-size:0.8rem;
	font-weight:normal;
	color:#222;
}

.note {
	font-size:0.8rem;
}

p, span, li {
	font-size:1.2rem;
}

h1, h1 span {
	font-family:tahoma, arial, sans-serif;
	font-size:1.4rem;
	font-weight:normal;
}

h2, h2 span {
	font-family:tahoma, arial, sans-serif;
	/*letter-spacing:0.1250em;*/
	font-size:1.6rem;
	font-variant-caps:small-caps;
	font-weight:normal;
}

h3, h3 span {
	font-size:2.2rem;
	font-weight:normal;
}

li {
	list-style-position:inside;
	text-align:left;
}

.italic {
	font-style:italic;
}

.center {
	text-align:center;
}

hr {
	width:98%;
	border-top:1px;
	color:#222;
	margin:2vh 0;
}

img {
	max-width:90vw;
	border-radius:6px;
}

input[type=text] {
	width:40vw;
	font-weight:400;
	color:#222;
	padding:5px 5px;
	margin:10px 0;
	font-size:1em;
	border-radius:6px;
}

select {
	color:#222;
	font-size:1.2em;
	padding:3px 3px;
	margin:10px 0;
	border-radius:6px;
}

select option:nth-child(odd) {
	background-color:#dedede;
}

select option:nth-child(even){
	background-color:#ffffff;
}


button,
input,
select {
	justify-self:center;
	background-color:#eee;
	border-style:hidden;
	height:30px;
}


button {
	transition:0.3s;
	cursor:pointer;
}

/*******************************************************************************************************/
/* ZONE PRINCIPALES */ 
/*******************************************************************************************************/
#zone_top{
	position:fixed;
	display:flex;
    left:50%;
	top:0;
    transform:translateX(-50%);
	justify-content:space-evenly;
	align-items:center;
	width:70%;
	height:110px;
	background-color:#f9f9f9;
	border:solid #bbb;
	border-width:thin;
	border-radius:6px;

	z-index:20;
}

#zone_top.shadow {
	box-shadow:0px 1px 4px #888;
}

#main{
	position:relative;
	display:block;
    top:110px;
	left:50%;
    transform:translateX(-50%);
	width:70%;	
	
	z-index:0;
}

/*******************************************************************************************************/
/* LES MENUS */
/*******************************************************************************************************/
#zone_menu_desktop {
	display:flex;
	justify-items:center;
	/*align-items:center;*/
	width:700px;
	padding:0;
	height:70px;
	z-index:1;
}

#menu_mobile {
	position:fixed;
	display:flex;
	flex-direction:column;
	justify-content:flex-start;
	align-items:center;
	background:#00a2e3;
	top:0;
	margin:110px 0 0 0;
	width:70%;
	height:0;
	left:50%;
    transform:translateX(-50%);
	overflow-y:auto;
	border-top-left-radius:6px;
	border-top-right-radius:6px;
	z-index:12;

	transition-duration:0.4s;
}

#menu_mobile.open{
	height:calc(100vh - 110px);
}

#mnu_accueil:before {
	display:flex;
	content:url('../graphisme/accueil_mnu_mobile.png');
}

#mnu_titres_rech:before,
#mnu_auteurs_rech:before,
#mnu_genres_rech:before {
	display:flex;
	content:url('../graphisme/loupe_mnu_mobile.png');
}

#mnu_connexion:before {
	display:flex;
	content:url('../graphisme/connexion_mnu_mobile.png');
}

#mnu_accueil,
#mnu_titres_rech,
#mnu_auteurs_rech,
#mnu_genres_rech,
#mnu_connexion {
	display:flex;
	justify-content:flex-start;
	align-items:center;
	width:85vw;
	height:70px;
	margin:5vw 0 0 0;
	text-decoration:none;
	background:#00a2e3;
	color:#fff;
	padding:0 ;
	/*line-height:20px;*/
	
	border:solid #fff;
	border-width:thin;
	border-radius:6px;
}


/*******************************************************************************************************/
/* LES BOUTONS */
/*******************************************************************************************************/

#bt_logo_appli {
	width:261px;
	height:90px;
	background-image:url('../graphisme/logo_rlc.jpg');
    background-size:100%;
	background-position:center;
	background-repeat:no-repeat;
	background-color:#f9f9f9;

	border-radius:6px;
}

#bt_logo_appli:hover {
	border:solid #bbb;
	border-width:thin;
	border-radius:6px;
	/*box-shadow:0.5px 0.5px 0.5px #bbb;*/
}

#bt_connexion {
	width:70px;
	height:70px;
	background-image:url('../graphisme/bt_connexion.png');
    background-size:100%;
	background-position:center;
	background-repeat:no-repeat;
	background-color:#00a2e3;
}

#bt_haut_page {
	position:fixed;
	display:flex;
	width:72px;
	height:72px;
	right:0.5vw;
	
	background-image:url('../graphisme/bt_haut.png');
	background-size:100%;
	background-position:0 0;
	background-repeat:no-repeat;
	background-color:#f9f9f9;

	visibility:hidden;
	opacity:0;
	transition:visibility 0.2s, opacity 0.2s linear;
	cursor:pointer;
	z-index:10;
}

#bt_menu_mobile {
	position:relative;
	display:none;
	width:72px;
	height:72px;
	right:1vw;
	
	justify-content :center;
	align-content :center;
	background-color:#00a2e3;
	border:2px solid #fff;
	border-radius:6px;
	
	cursor:pointer;
}

#trait_01,
#trait_02,
#trait_03 {
	position:absolute;
	display: block;

	background-color:#fff;
	width:50%;
	height:6px;
	border:2px solid #fff;
	border-radius:6px;
	transform-origin: 50% 50%;
	
	transition-duration:0.4s;
}

#trait_01 {
	top:calc(18px - 5px);		
}

#trait_02 {
	top:calc(2*18px - 5px);		
}

#trait_03 {
	top:calc(3*18px - 5px);
}

#bt_menu_mobile.croix #trait_01{
	transform :translateY(18px) rotate(-45deg);
}

#bt_menu_mobile.croix #trait_02{
	width:0;
}

#bt_menu_mobile.croix #trait_03{
	transform :translateY(-18px) rotate(45deg);
}

button.bt_mnu_top,
button.loupe {
	display:inline-block;
	width:172px;
	height:70px;
	background-image:url('../graphisme/bt_large_loupe.png');
	background-size:100%;
	background-position:0 0;
	background-repeat:no-repeat;
	margin:0 0.1vw;
	padding:0 0 0 60px;
	text-align:left;
	font-size:20px;
	word-wrap:break-all;
	color:#fff;
	border-radius:6px;
	z-index:1;
}

button.bt_only {
	display:inline-block;
	width:172px;
	height:70px;
	vertical-align:middle;
	text-align:center;
	font-size:20px;
	word-wrap:break-all;
	color:#fff;
	border-radius:6px;
	z-index:1;
}

button.bleu,
button.loupe {
	background-color:#00a2e3;
}

button.bleu:hover,

button.vert,
#bt_connexion:hover,
#bt_connexion.vert {
	background-color:#6aac1d;
}

button.orange {
	background-color:#f88600;
}

/*******************************************************************************************************/
/* LA CLASSE GRILLE
/*******************************************************************************************************/

div.grille {
	display:grid;
	width:100%;
	margin:0.1vw auto 0 auto;
	
	grid-template-columns:repeat(6, 16.66%);
}

div.grille > div {
	display:grid;
	grid-column:1 / span 6;
	margin:0.1vw 0;
	padding:1vw;
	background-color:#f9f9f9;
	text-align:center;
	border:thin solid #bbb;
	border-radius:6px;

	/*box-shadow:1px 1px 3px #888;*/
}


div.grille > div img
{
	justify-self:center;
	align-self:center;
	max-height:250px;
	object-fit:contain;
}

div.grille > div select
{
	justify-self:center;
}

#zone_recherche {
	height:70vh;
	align-content:flex-start;
}

/*******************************************************************************************************/
/* ZONE AFFICHAGE "CARTES LIVRES"
/*******************************************************************************************************/
.onglet {
	width:40%;
}

#cartes_livres {
	display:flex;
	flex-direction:row;
	flex-flow:wrap;
	margin:0.1vw 0;
	padding:1%;
	background-color:#f9f9f9;
	
	justify-content:flex-start;/*space-between;*/
	align-content:center;

	border:solid #bbb;
	border-width:thin;
	border-radius:6px;
}

#cartes_livres h2 {
	display:block;
	width:100%;
	text-align:center;
}

#cartes_livres div.livre {
	position:relative;
	display:grid;
	float:left;
	background-color:#efefef;
	color:#222;
	width:24%;
	/*height:210px;*/
	margin:0.3% 0.5%;
	grid-template-columns:repeat(3, 33.33%);
	border:solid #bbb;
	border-width:thin;
	border-radius:6px;
	/*box-shadow:1px 1px 3px #bbb;*/
}

.titre_bleu,
.titre_vert {
	grid-row:1;
	grid-column:1 / span 3;
	height:48px;
	padding:3px 2% 0 2%;
	margin-bottom:4%;
	color:#fff;
	text-align:left;
	font-weight:700;
	border-top-left-radius:4px;
	border-top-right-radius:4px;
}

.titre_bleu {
	background-color:#00a2e3;
}

.titre_vert {
	background-color:#6aac1d;
}

.public_bleu {
	color:#00a2e3;
	font-size:2em;
}

.public_vert {
	color:#6aac1d;
	font-size:2em;
}

.pastille {
	position:absolute;
	width:30px;
	height:30px;
	right:2px;
	bottom:2px;
}

.couv,
.abs_couv {
	grid-row:2 / span 5;
	grid-column:1;
	display:flex;
	height:140px;
	justify-content:center;
	align-items:center;
}

.couv img,
.abs_couv img {
	width:auto;
	max-width:90%;
	height:auto;
	max-height:140px;

	border-radius:2px;
}

.couv img {
	/*box-shadow:2px 1px 2px #555;*/
}

.num {
	grid-row:7;
	grid-column:1;
	display:flex;
	height:20px;
	justify-content:center;
	align-items:flex-end;
	font-size:0.8em;
	font-style:italic;
}

/*.public,*/
.auteur,
.genre {
	text-align:left;
	font-size:1.2em;
	min-height:75px;
}


.auteur {
	grid-row:2 / span 3;
	grid-column:2 / span 2;
}

.genre {
	grid-row:5 / span 3;
	grid-column:2 / span 2;
}

.dates_empr {
	grid-row:5 / span 3;
	grid-column:2 / span 2;
	text-align:left;
	font-size:0.8em;
	min-height:75px;
}


#footer {
	position:relative;
	display:block;
	margin:0.1vw 0 0 0;
	padding:1vw;
	background-color:#f9f9f9;
	text-align:center;
	border:thin solid #bbb;
	border-radius:6px;
	z-index:0;
}

/*******************************************************************************************************/
/* RESPONSIVITE
/*******************************************************************************************************/
@media only screen and (max-width:1580px) {
	#cartes_livres div.livre {
		width:32%;
		margin:0.3% 0.66%;
	}
}

@media only screen and (max-width:1410px) {
	#menu_mobile {
		width:100%
	}
	
	.onglet {
		width:50%;
	}
}

@media only screen and (max-width:1330px) {
	#zone_top,
	#main {
		width:98%;
	}
}

@media only screen and (max-width:1210px) {
	#cartes_livres div.livre {
		width:49%;
		margin:0.3% 0.5%;
	}
}	
	
@media only screen and (max-width:992px) {	
	#zone_top {
		justify-content:space-between;
	}

	#bt_logo_appli {
		margin:0 0 0 1vw;
	}
}

@media only screen and (max-width:950px) {	

	h2, h2 span {
		letter-spacing:0;
	}

	#zone_menu_desktop {
		display:none;
	}
	
	#bt_menu_mobile,
	#bt_menu_mobile.init {
		display:flex;
	}
	
	#bt_haut_page {
		right:calc(2vw + 72px);	
	}

	input[type=text] {
		width:65vw;
	}
	.onglet {
		width:60%;
	}
}	

@media only screen and (max-width:780px) {
	#zone_recherche {
		height:69vh;
	}

	
	#cartes_livres div.livre {
		width:98%;
		margin:0.5% auto;
	}
}

@media only screen and (max-width:576px) {
	#zone_top {
		height:90px;
	}
	
	#main{
		top:90px;
		height:calc(100vh - 90px);
	}
	
	#bt_logo_appli {
		width:194px;
		height:72px;
	}

	#menu_mobile {
		margin:90px 0 0 0;/* = hauteur #zone_top */
	}
	
	#menu_mobile.open{
		height:calc(100vh - 90px);
	}
	
	#zone_top,
	/*#menu_mobile,*/
	#main {
		width:96%;
	}
		
	#result span {
		font-size:0.8em;
	}
	
	input[type=text] {
		width:85vw;
	}
	
	select {
		width:96%;
		font-size:1em;
	}
	
	.onglet {
		width:98%;
	}	
}

@media only screen and (max-width:380px) {
	
	#bt_logo_appli {
		width:175px;
		height:65px;
	}

	#bt_menu_mobile {
		width:64px;
		height:64px;
		
	}

	#trait_01 {
		top:calc(16px - 5px);		
	}

	#trait_02 {
		top:calc(2*16px - 5px);		
	}

	#trait_03 {
		top:calc(3*16px - 5px);
	}
	
	#bt_menu_mobile.croix #trait_01{
		transform :translateY(16px) rotate(-45deg);
	}

	#bt_menu_mobile.croix #trait_03{
		transform :translateY(-16px) rotate(45deg);
	}

	#bt_haut_page {
		width:64px;
		height:64px;right:calc(2vw + 64px);	
	}
}