/*******************************************************************************************************/
/* GRILLE
/*******************************************************************************************************/

#accroche,
#nouveau,
#infos_temp,
#reseaux_sociaux {
	grid-column:1 / span 6;
	text-align:center;
}

#nouveau {
	color:#00a2e3;
	font-weight:bold;
}

#accueil,
#photo_04 {
	grid-column:1 / span 2;
}

#photo_01,
#infos_pratiques,
#plan {
	grid-column:1 / span 4;
	text-align:left;
}

#photo_02,
#rlc_en_chiffres {
	grid-column:3 / span 4;
}

#horaires,
#photo_03,
#qr_code {
	grid-column:5 / span 2;
	text-align:left;
}

#qr_code #qrcode{
	display:block;
	justify-self: center;
}
/*-----------------------------------------------------------------------------------------------------*/

#accueil,
#rlc_en_chiffres {
	text-align:left;
}

#plan img {
	border:thin solid #bbb;
	border-radius:6px;
	/*cursor:url(../graphisme/cursor_plus.cur) 24 24,auto;*/
}

#plan a {
	margin: auto;
}

#reseaux_sociaux {
	display: flex;
	justify-content:space-evenly;
}

#reseaux_sociaux img {
	width:60px;
	height:auto;
}

#whatsapp {
	display:none;
}

/*******************************************************************************************************/
/* AUTRES
/*******************************************************************************************************/
#tel_desktop {
	display:block;
}

.tel_mobile {
	display:none;
}

.infobulle_text{
	position:absolute;
	margin-left:20px;
	top:220px;
	background:#00a2e3;
	color:#fff;
	padding:7px 15px;
	border-radius:3px;
	width:350px;
}

.infobulle_text::after{
	content:""; 
	border-left:20px solid transparent;
	border-right:20px solid transparent;
	border-top: 20px solid #139ee0;
	position: absolute;
}

.infobulle_text a,
.infobulle_text a:hover,
.infobulle_text a:visited,
.infobulle_text hr {
	color:#fff;
}

/*******************************************************************************************************/
/* RESPONSIVITE
/*******************************************************************************************************/

@media only screen and (min-width: 901px) {	

	#photo_01 {
		margin:0.1vw 0 0 0;
		border:none;
		border-top:thin solid #bbb;
		border-left:thin solid #bbb;
		border-radius:0;
		border-top-left-radius:6px;
	}
	
	#horaires {
		margin:0.1vw 0 0 0;
		border:none;
		border-top:thin solid #bbb;
		border-right:thin solid #bbb;
		border-radius:0;
		border-top-right-radius:6px;
	}

	#accueil,
	#infos_pratiques,
	#photo_04 {
		margin:0;
		border:none;
		border-left:thin solid #bbb;
		border-radius:0;
	}

	#photo_02,
	#photo_03,
	#rlc_en_chiffres {
		margin:0;
		border:none;
		border-right:thin solid #bbb;
		border-radius:0;
	}

	#plan {
		margin:0 0 0.1vw 0;
		border:none;
		border-left:thin solid #bbb;
		border-bottom:thin solid #bbb;
		border-radius:0;
		border-bottom-left-radius:6px;
	}

	#qr_code {
		margin:0 0 0.1vw 0;
		border:none;
		border-right:thin solid #bbb;
		border-bottom:thin solid #bbb;
		border-radius:0;
		border-bottom-right-radius:6px;
	}
}







/* LES 4 LIVRES S'AFFICHENT PAR 4, 2 OU 1 */
@media only screen and (max-width: 1580px) {
	#cartes_livres div.livre {
		width:49%;
		margin:0.3% 0.5%;
	}
}

@media only screen and (max-width: 992px) {	
	#whatsapp {
		display:inline-block;
	}
}
	
@media only screen and (max-width: 900px) {		
	div.grille > div {
		padding:2vw;
	}
	div.grille > div img
	{
		max-height: 180px;
		object-fit: contain;
	}

	#photo_01,
	#horaires,
	#accueil,
	#photo_02,
	#infos_pratiques,
	#photo_04,
	#rlc_en_chiffres,
	#plan,
	#qr_code,
	#reseaux_sociaux {
		grid-column:1 / span 6;
	}

	/*-----------------------------------------------------------------------------------------------------*/
	#horaires,
	#accueil,
	#infos_pratiques h2,
	#rlc_en_chiffres h2,
	#qr_code {
		text-align:center;
	}
	
	#photo_03 {
		display:none;
	}
	

	#tel_desktop {
		display:none;
	}

	.tel_mobile {
		display:block;
	}

	#rlc_en_chiffres {
		grid-column:1 / span 6;
		text-align:left;
	}
	
	#plan img {
		pointer-events: none;
		cursor:auto;
	}
	
}

@media only screen and (max-width: 780px) {
	#cartes_livres div.livre {
		width:98%;
		margin:0.3% 0.5%;
	}
}