/* 
CSS Document
FONTS - ALBERT : 'albert'

COULEURS
- INDEX : rgba(204,0,102);
- GROSSESSE : #EF2C8B / rgba(239,44,139)
- BEBES : #EF90B9 / rgba(239,144,185)
- ENFANTS : #9682B9 / rgba(150,130,185)
- ADOLESCENTS : #7D52B3 / rgba(125,82,179)
- FAMILLE : #401C80 / rgba(64,28,128)
- LIVRES : #13007C / rgba(19,0,124)
*/

.indexColor { width:100%; color:#FFFFFF; padding:1em; border-radius:0 0 8px 0; }
	.indexColor p { text-align:justify; }
.infoStock { width:100%; margin:1em 0; color:#FFFFFF; border-radius:0 8px 8px 0; padding:1em; }
	.infoStock p { text-align:justify; }
	.infoStock a:link, .infoStock a:visited { color:#FFFF00; }
	.infoStock a:hover, .infoStock a:active { color:#FFFFFF; }
	.infoStock span { width:100%; display:flex; justify-content:center; font-size:3em; color:#FFFF00; }

.pageContent_articles_lastBooks { width:100%; display:flex; flex-wrap:wrap; justify-content:space-between; }
	.lastBook-box { width:24%; display:flex; flex-wrap:wrap; margin:0.5% 0; background-color:#F6F6F6; align-content:flex-start; position:relative; }
		.lastBook-box-pict { width:100%; font-size:0; padding:4%; position:relative; }
		.lastBook-box-text { width:100%; display:flex; flex-wrap:wrap; align-content:flex-start; padding:1em; }
			.lastBook-box-text h2 { width:100%; margin:0; padding:0; text-align:center; }
			.lastBook-box-text p { width:100%; padding-bottom:3em; }
		.lastBook-box-button { width:100%; position:absolute; bottom:0; text-align:center; padding:0.5em; background-color:rgba(204,0,102); }

/* SUPERPOSITION LORS DU SURVOL DE L'IMAGE */
.lastBook-box-pict-overlay { width:100%; position:absolute; top:0; bottom:0; left:0; right:0; height:100%; opacity:0; transition:.5s ease; background-color:#F6F6F6; }
.lastBook-box-pict:hover .lastBook-box-pict-overlay { opacity:0.85; }
.lastBook-box-pict-overlay-text { width:100%; padding:2em; color:#FFFFFF; font-size:20px; position:absolute; top:50%; left:50%; -webkit-transform:translate(-50%, -50%); -ms-transform:translate(-50%, -50%); transform:translate(-50%, -50%); text-align:center; }
	.lastBook-box-pict-overlay-text h2, .lastBook-box-pict-overlay-text p { width:100%; }

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

}

@media screen and (max-width:1280px) {
	/* 17-19 pouces */
}

@media screen and (max-width:1020px) {
	/* 15 pouces */

}

@media screen and (max-width:600px) {
	.indexColor, .infoStock { border-radius:unset; }
	
	.lastBook-box { width:100%; margin:2% 0; }
	.lastBook-box-pict-overlay { display:block; opacity:1; position:static; height:unset; }
	.lastBook-box-pict-overlay-text { width:100%; position:static; top:0; left:0; background-color:#F6F6F6; transform:unset; }
}

@media only screen and (-webkit-min-device-pixel-ratio:2) {
	/*  iphone SE --> 11 + XR | MacBook | iMac | iPad */
	@media screen and (max-width:880px) {
		.indexColor, .infoStock { border-radius:unset; }
		.indexColor { width:75%; margin:0 auto; }
		.infoStock { width:75%; margin:0 auto; }
		
		.lastBook-box { width:46%; margin:2% 0; height:unset; padding-bottom:2em; }
			.lastBook-box-pict-overlay { display:block; opacity:1; position:static; height:unset; }
			.lastBook-box-pict-overlay-text { width:100%; position:static; transform:unset; font-size:2.25vw; padding:1em; }
			.lastBook-box-button { position:absolute; }
				.lastBook-box-pict-overlay-text h2, .lastBook-box-pict-overlay-text p { margin:0; padding:0; }
	}
	
	@media screen and (max-width:450px) {
		.indexColor, .infoStock { width:94%; border-radius:unset; margin:0.5% 3% 3% 3%; }
		
		.lastBook-box { width:100%; margin:2% 0; padding-bottom:2em; }
			.lastBook-box-pict-overlay-text { width:100%; position:static; transform:unset; font-size:4.5vw; padding:1em; }
	}

}

@media only screen and (-webkit-min-device-pixel-ratio:3) {
	/*  iphone12 --> 16  */
	@media screen and (max-width:940px) {
		.indexColor, .infoStock { width:100%; }
	}

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

	}
}

@media only screen and (-webkit-min-device-pixel-ratio:4) {
	/*  Google Pixel 6 Pro | OPPO Find X3 Pro | Samsung Galaxy + S21-22 Ultra */
	@media screen and (max-width:880px) {
	
	}
	
	@media screen and (max-width:450px) {
		
	}
}