<style type="text/css">
.tabs { /*attributs du conteneur-4bis*/
    position: relative;
    margin: 40px auto; /*marges extérieures*/
    width: 100%; /*largeur*/
}
.tabs input { /*attributs zones onglets*/
    position: absolute;
    z-index: 1000;
    width: 30px; /*largeur*/
    height: 125px; /*hauteur*/
    left: 0px; /*position à gauche*/
    top: 0px; /*position 1er onglet en haut*/
    opacity: 0;
    cursor: pointer;
}

.tabs input#tab-2{
    top: 125px; /*position 2ème onglet en haut*/
}
.tabs input#tab-3{
    top: 250px; /*position 3ème onglet en haut*/
}
.tabs input#tab-4{
    top: 375px; /*position 4ème onglet en haut*/
}

.tabs label { /*attributs titres onglets*/
    background: linear-gradient(#D2763E 0%,#A85726 100%); /*couleur fond*/
    font-size: 15px; /*taille police*/
    height: 125px; /*hauteur*/
    position: relative;
    margin-bottom: 0px; /*marge basse pour séparer les onglets*/
    padding: 2px 5px; /*marges intérieures*/
    float: left;
    display: block;
    clear: both;
    width: 30px; /*!! largeur idem .tabs input !!*/
    color: #5A2F14; /*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*/
    text-shadow: 1px 1px 1px rgba(255,255,255,0.3); /*ombre portée texte*/
    box-shadow: 0px 0px 2px rgba(72,38,17,0.5); /*ombre portée boite onglet*/
    border-radius: 3px 0 0 3px; /*arrondis*/
}
.tabs label:after { /*pseudo-élément : permet de masquer l'ombre à gauche des contenus*/
    content: ''; /*!!NE PAS MODIFIER!!*/
    background: #fff; /*couleur fond : mieux si = couleur fond .content */
    position: absolute;
    right: -2px;
    top: 0;
    width: 2px;
    height: 100%;
}
.tabs input:hover + label {
    background: #D2763E; /*couleur fond onglet survolé*/
}

.tabs label:first-of-type {
    z-index: 4;
}
.tabs label:first-of-type { /*attributs titre 1er onglet*/
    z-index: 4; /*index superposition : important*/
    box-shadow: 0px 0px 2px rgba(72,38,17,0.5); /*ombre portée boite onglet*/
}

.tab-label-2 { /*2ème onglet*/
    z-index: 3; /*index superposition : important*/
}

.tab-label-3 { /*3ème onglet*/
    z-index: 2; /*index superposition : important*/
}

.tab-label-4 { /*4ème onglet*/
    z-index: 1; /*index superposition : important*/
}

.tabs input:checked + label { /*attributs titre onglet sélectionné*/
    background: #fff; /*couleur fond*/
    text-shadow: 1px 1px 1px rgba(72,38,17,0.5); /*ombre portée texte*/
    z-index: 6; /*index superposition : important*/
}
.clear-shadow {
    clear: both;
}
.content { /*attributs contenu*/
    background: #fff; /*couleur fond*/
    position: relative;
    width: auto; /*largeur = auto*/
    margin: -515px 0 0 30px; /*marges extérieures !!important : à gauche = largeur onglet*/
    height: 540px; /*hauteur*/
    z-index: 5; /*index superposition : important*/
    overflow: hidden; /*masque les débordements extérieurs : important*/
    box-shadow: 1px 1px 2px rgba(72,38,17,0.5), 0px 0px 2px rgba(72,38,17,0.5); /*ombre portée boite contenu*/
    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*/
    transform: translateY(-450px); /*translationV*/
    transition: all linear 0.6s; /*transition tout  : nature temps*/
}

.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 { /*attributs contenu si sélectionné*/
    transform: translateY(0px); /*translationV0*/
    z-index: 100; /*index superposition : important*/
    opacity: 1; /*opacité : 1=visible*/
    transition: all ease-out 0.6s 0.6s; /*transition tout  : nature temps*/
}
.content div h2,
.content div h3{ /*attributs div h2 et h3 (titres) du contenu*/
    color: #8E4920; /*couleur texte*/
}
.content div p { /*attributs div paragraphe du contenu*/
    font-size: 14px; /*taille police*/
    line-height: 20px; /*hauteur ligne*/
    font-style: italic; /*à ajuster ou supprimer*/
    text-align: left; /*alignement*/
    margin: 15px 0; /*marges extérieures*/
    color: #777; /*couleur texte*/
    padding-left: 15px; /*marge intérieure gauche*/
    border-left: 8px solid rgba(219,146,102, 0.8); /*bordure gauche*/
}
</style>