adHoc.71site.fr

/* Slideshow Accordion : Rey Wang https://tympanus.net/codrops/2012/06/06/image-accordion-with-css3/ */
/* Quelques modifications : JeanDenis https://www.71site.fr https://adhoc.71site.fr */

figure { /*!!IMPORTANT NE PAS MODIFIER!!*/
	margin: 0;
	-webkit-margin-before: 0;
	-webkit-margin-after: 0;
	-webkit-margin-start: 0;
	-webkit-margin-end: 0;
}

.ia-container { /*attributs du conteneur 705px en tout, ici : 695px + 5px + 5px */
	width: 695px; /*largeur, ici : 335px + 6x60px */
	margin: 20px auto; /*marges extérieures*/
	overflow: hidden;
	box-shadow: 1px 1px 4px rgba(0,0,0,0.08); /*ombre portée*/
	border: 5px solid rgba(194,102,46,0.9); /*largeur nature et couleur bordure*/
}

.ia-container figure {
	position: absolute;
	top: 0;
	left: 60px; /* = largeur parties visibles*/
	width: 335px; /* = largeur image*/
	box-shadow: 0 0 0 1px rgba(255,255,255,0.6); /*ombre portée*/
	-webkit-transition: all 0.3s ease-in-out;
	-moz-transition: all 0.3s ease-in-out;
	transition: all 0.3s ease-in-out; /*temps et nature transition*/
}

.ia-container > figure {
	position: relative;
	left: 0 !important;
}

.ia-container img {
	display: block;
	width: 100% !important;
	max-width:100% !important;
	margin:0 !important;
}

.ia-container input {
	position: absolute;
	top: 0;
	left: 0;
	width: 60px; /* = largeur parties visibles*/
	height: 100%;
	cursor: pointer;
	border: 0;
	padding: 0;
	opacity: 0;
	z-index: 100;
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
}
.ia-container input:checked{
	width: 5px;
	left: auto;
	right: 0px;
}
.ia-container input:checked ~ figure {
	-webkit-transition: all 0.7s ease-in-out;
	-moz-transition: all 0.7s ease-in-out;
	transition: all 0.7s ease-in-out; /*temps et nature transition*/
	left: 335px; /* = largeur image*/
}

.ia-container figcaption { /*attributs figcaption*/
	width: 100%;
	height: 100%;
	background: rgba(87, 73, 81, 0.3); /*couleur fond bandes images*/
	position: absolute;
	top: 0px;
	-webkit-transition: all 0.2s linear;
	-moz-transition: all 0.2s linear;
	transition: all 0.2s linear; /*temps et nature transition*/
}

.ia-container figcaption span { /*attributs du texte span*/
	position: absolute;
	top: 40%; /*position de départ*/
	margin-top: -30px; /*marge extérieure haute*/
	right: 20px; /*positions*/
	left: 20px;
	overflow: hidden;
	text-align: center; /*texte centré*/
	background: rgba(87, 73, 81, 0.5); /*couleur fond*/
	font-size: 20px; /*taille police*/
	opacity: 0;
	text-transform: uppercase; /*tout en majuscule*/
	letter-spacing: 4px; /*écartement lettres*/
	font-weight: 700; /*gras de la police*/
	padding: 20px; /*marges intérieure*/
	color: #fff; /*couleur police*/
	text-shadow: 1px 1px 1px rgba(0,0,0,0.1); /*ombre portée*/
}

.ia-container input:checked + figcaption,
.ia-container input:checked:hover + figcaption{
	background: rgba(87, 73, 81, 0.0); /*couleur fond de l'image affichée, ici : transparent*/
}

.ia-container input:checked + figcaption span {
	-webkit-transition: all 0.4s ease-in-out 0.5s;
	-moz-transition: all 0.4s ease-in-out 0.5s;
	transition: all 0.4s ease-in-out 0.5s; /*temps et nature transition*/
	opacity: 1;	
	top: 50%; /*position texte affiché*/
}

.ia-container #ia-selector-last:checked + figcaption span {
	-webkit-transition-delay: 0.3s;
	-moz-transition-delay: 0.3s;
	transition-delay: 0.3s; /*délai transition*/
}

.ia-container input:hover + figcaption {
	background: rgba(87, 73, 81, 0.1); /*couleur fond bandes images au survol*/
}

.ia-container input:checked ~ figure input{
	z-index: 1;
}

@media screen and (max-width: 900px), screen and (max-device-width: 900px) { /* inférieur à 900px de largeur (MOBILE) */
.ia-container {
	width: 600px; /*largeur, ici : 300px + 6x50px */
}
.ia-container figure {
	left: 50px; /* = largeur parties visibles*/
	width: 300px; /* = largeur image*/
}
.ia-container input {
	width: 50px; /* = largeur parties visibles*/
}
.ia-container input:checked ~ figure {
	left: 300px; /* = largeur image*/
}
.ia-container figcaption span {
	font-size: 16px; /*taille police*/
}
} /*fin adaptations pour taille max 900px*/

@media screen and (max-width: 720px), screen and (max-device-width: 720px) { /* inférieur à 720px de largeur (MOBILE) */
.ia-container {
	width: 450px; /*largeur, ici : 240px + 6x35px */
}
.ia-container figure {
	left: 35px; /* = largeur parties visibles*/
	width: 240px; /* = largeur image*/
}
.ia-container input {
	width: 35px; /* = largeur parties visibles*/
}
.ia-container input:checked ~ figure {
	left: 240px; /* = largeur image*/
}
.ia-container figcaption span {
	font-size: 14px; /*taille police*/
}
} /*fin adaptations pour taille max 720px*/

@media screen and (max-width: 480px), screen and (max-device-width: 480px) { /* inférieur à 480px de largeur (MOBILE) */
.ia-container {
	width: 330px; /*largeur, ici : 180px + 6x25px */
}
.ia-container figure {
	left: 25px; /* = largeur parties visibles*/
	width: 180px; /* = largeur image*/
}
.ia-container input {
	width: 25px; /* = largeur parties visibles*/
}
.ia-container input:checked ~ figure {
	left: 180px; /* = largeur image*/
}
.ia-container figcaption span {
	font-size: 12px; /*taille police*/
	letter-spacing: 2px; /*écartement lettres*/
	padding: 10px; /*marges intérieure*/
	margin-top: -20px; /*marge extérieure haute*/
}
} /*fin adaptations pour taille max 480px*/