adHoc.71site.fr

.tabs { /*attributs du conteneur*/
	position: relative;
	margin: 20px 0 auto; /*marges extérieures*/
	width: 100%; /*largeur*/
}
.tabs input { /*attributs zones onglets*/
	position: absolute;
	z-index: 1000;
	width: 30px; /*largeur*/
	height: 30px; /*hauteur*/
	left: 0px; /*position à gauche*/
	top: 0px; /*position 1er onglet en haut*/
	opacity: 0;
	cursor: pointer;
}

.tabs input#tab-1 {
	top: 30px; /*position 2ème onglet en haut*/
}
.tabs input#tab-2{
	top: 60px; /*position 3ème onglet en haut*/
}
.tabs input#tab-3{
	top: 90px; /*position 4ème onglet en haut*/
}
.tabs input#tab-4 {
	top: 120px; /*position 5ème onglet en haut*/
}
.tabs input#tab-5{
	top: 150px; /*position 6ème onglet en haut*/
}
.tabs input#tab-6{
	top: 180px; /*position 7ème onglet en haut*/
}
.tabs input#tab-7 {
	top: 210px; /*position 8ème onglet en haut*/
}
.tabs input#tab-8{
	top: 240px; /*position 9ème onglet en haut*/
}
.tabs input#tab-9{
	top: 270px; /*position 10ème onglet en haut*/
}
.tabs input#tab-A {
	top: 300px; /*position 11ème onglet en haut*/
}
.tabs input#tab-B{
	top: 330px; /*position 12ème onglet en haut*/
}
.tabs input#tab-C{
	top: 360px; /*position 13ème onglet en haut*/
}

.tabs titre { /*attributs titres onglets*/
	background: #000; /*couleur fond*/
	font-size: 1.2rem; /*taille police*/
	height: 30px; /*hauteur*/
	position: relative;
	margin-bottom: 0px; /*marge basse pour séparer les onglets*/
	padding: 0px 3px; /*marges intérieures*/
	float: left;
	display: block;
	clear: both;
	width: 30px; /*!! largeur idem .tabs input !!*/
	color: #fff; /*couleur texte*/
	text-transform: uppercase; /*tout en majuscule*/
	font-weight: bold; /*gras de la police*/
	text-align: center; /*alignement*/
	writing-mode: vertical-rl; /*texte vertical*/
	text-orientation: upright; /*texte H>B*/
	border-radius: 3px 0 0 3px; /*arrondis*/
	border:1px solid #c0c0c0;
}
.tabs titre:after { /*pseudo-élément : permet de masquer l'ombre à gauche des contenus*/
	content: ''; /*!!NE PAS MODIFIER!!*/
	background: transparent; /*couleur fond : mieux si = couleur fond .content */
	position: absolute;
	right: -2px;
	top: 0;
	width: 2px;
	height: 100%;
}
.tabs input:hover + titre {
	background: transparent; /*couleur fond onglet survolé*/
	border: 1px solid #c0c0c0;
}

.tabs titre:first-of-type { /*attributs titre 1er onglet*/
	z-index: 13; /*index superposition : important*/
}
.tab-titre-1 { /*2ème onglet*/
	z-index: 12; /*index superposition : important*/
}
.tab-titre-2 { /*3ème onglet*/
	z-index: 11; /*index superposition : important*/
}
.tab-titre-3 { /*4ème onglet*/
	z-index: 10; /*index superposition : important*/
}
.tab-titre-4 { /*5ème onglet*/
	z-index: 9; /*index superposition : important*/
}
.tab-titre-5 { /*6ème onglet*/
	z-index: 8; /*index superposition : important*/
}
.tab-titre-6 { /*7ème onglet*/
	z-index: 7; /*index superposition : important*/
}
.tab-titre-7 { /*8ème onglet*/
	z-index: 6; /*index superposition : important*/
}
.tab-titre-8 { /*9ème onglet*/
	z-index: 5; /*index superposition : important*/
}
.tab-titre-9 { /*10ème onglet*/
	z-index: 4; /*index superposition : important*/
}
.tab-titre-A { /*11ème onglet*/
	z-index: 3; /*index superposition : important*/
}
.tab-titre-B { /*12ème onglet*/
	z-index: 2; /*index superposition : important*/
}
.tab-titre-C { /*13ème onglet*/
	z-index: 1; /*index superposition : important*/
}


.tabs input:checked + titre { /*attributs titre onglet sélectionné*/
	background: #eee; /*couleur fond*/
	color: #000;
	z-index: 15; /*index superposition : important*/
}
.clear-shadow {
	clear: both;
}
.content { /*attributs contenu*/
	background: linear-gradient(rgba( 75, 75, 75, .8), rgba( 0, 0, 0, .8)); /*couleur de fond*/
	position: relative;
	width: auto; /*largeur = auto*/
	margin: -400px 0 0 30px; /*marges extérieures */
	/* !!important : en haut à ajuster // nb onglets et hauteur ||| !!important : à gauche = largeur onglet */
	height: 450px; /*hauteur*/
	z-index: 14; /*index superposition : important*/
	overflow: hidden; /*masque les débordements extérieurs : important*/
	border: 1px solid #c0c0c0;
	border-radius: 3px; /*arrondis*/
}
.content div { /*attributs div contenu*/
	position: absolute;
	top: 0; /*position*/
	padding: 10px 20px; /*marges intérieures*/
	z-index: 1; /*index superposition : important*/
	opacity: 0; /*opacité : 0=invisible*/
	transition: all linear 0.05s; /*transition tout  : nature temps*/
}
.content div h2,
.content div h3{ /*attributs div h2 et h3 (titres) du contenu*/
	color: #d6af84; /*couleur texte*/
	margin:5px auto;
}
.content div p { /*attributs div paragraphe du contenu*/
	font-size: 1rem; /*taille police*/
	line-height: 1.5; /*hauteur ligne*/
	font-style: normal; /*à ajuster ou supprimer*/
	text-align: left; /*alignement*/
	margin: 15px 0; /*marges extérieures*/
	color: #fff; /*couleur texte*/
	padding:0 10px; /*marge intérieure gauche*/
}
.contentoverflow { /*mise en place ascenseur vertical*/
	max-height: 370px; /*hauteur maxi... forcément inférieure à height de .content */
	overflow:auto;
}

.tabs input.tab-selector-0:checked ~ .content .content-0,
.tabs input.tab-selector-1:checked ~ .content .content-1,
.tabs input.tab-selector-2:checked ~ .content .content-2,
.tabs input.tab-selector-3:checked ~ .content .content-3,
.tabs input.tab-selector-4:checked ~ .content .content-4,
.tabs input.tab-selector-5:checked ~ .content .content-5,
.tabs input.tab-selector-6:checked ~ .content .content-6,
.tabs input.tab-selector-7:checked ~ .content .content-7,
.tabs input.tab-selector-8:checked ~ .content .content-8,
.tabs input.tab-selector-9:checked ~ .content .content-9,
.tabs input.tab-selector-A:checked ~ .content .content-A,
.tabs input.tab-selector-B:checked ~ .content .content-B,
.tabs input.tab-selector-C:checked ~ .content .content-C { /*attributs contenu si sélectionné*/
	z-index: 100; /*index superposition : important*/
	opacity: 1; /*opacité : 1=visible*/
	width: 100%; /*largeur*/
	transition: all linear 0.05s; /*transition tout  : nature temps*/
}