<style type="text/css">
.tabs { /*attributs du conteneur-1*/
    position: relative;
    margin: 40px auto; /*marges extérieures*/
    width: 100%; /*largeur*/
}

.tabs input { /*attributs zones onglets*/
    position: absolute;
    z-index: 1000;
    width: 120px; /*largeur*/
    height: 40px; /*hauteur*/
    left: 0px; /*position 1er onglet à gauche*/
    top: 0px; /*position en haut*/
    opacity: 0;
    cursor: pointer;
}
.tabs input#tab-2{
    left: 120px; /*position 2ème onglet à gauche*/
}
.tabs input#tab-3{
    left: 240px; /*position 3ème onglet à gauche*/
}
.tabs input#tab-4{
    left: 360px; /*position 4ème onglet à gauche*/
}

.tabs label { /*attributs titres onglets*/
    background: linear-gradient(#5ba4a4 0%,#4e8c8a 100%); /*couleur fond*/
    font-size: 15px; /*taille police*/
    line-height: 40px; /*hauteur ligne*/
    height: 40px; /*hauteur*/
    position: relative;
    padding: 0 20px; /*marges intérieures*/
    float: left;
    display: block;
    width: 120px;  /*!! largeur idem .tabs input !!*/
    color: #294342; /*couleur texte*/
    letter-spacing: 1px; /*écartement caractères*/
    text-transform: uppercase; /*tout en majuscule*/
    font-weight: bold; /*gras de la police*/
    text-align: center; /*alignement*/
    text-shadow: 1px 1px 1px rgba(255,255,255,0.3); /*ombre portée texte*/
    box-shadow: 2px 0 2px rgba(0,0,0,0.3), -2px 0 2px rgba(0,0,0,0.3); /*ombre portée boite onglet*/
    border-radius: 3px 3px 0 0; /*arrondis*/
}

.tabs label:after { /*pseudo-élément : permet de masquer l'ombre du haut des contenus*/
    content: ''; /*!!NE PAS MODIFIER!!*/
    background: #fff; /*couleur fond : mieux si = couleur fond .content */
    position: absolute;
    bottom: -2px;
    left: 0;
    width: 100%;
    height: 2px;
    display: block;
}

.tabs input:hover + label {
    background: #5ba4a4; /*couleur fond onglet survolé*/
}

.tabs label:first-of-type { /*attributs titre 1er onglet*/
    z-index: 4; /*index superposition : important*/
    box-shadow: 2px 0 2px rgba(0,0,0,0.3), 0 0 2px rgba(0,0,0,0.3); /*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(0,0,0,0.3); /*ombre portée texte*/
    z-index: 6; /*index superposition : important*/
}

.clear-shadow {
    clear: both;
}

.content { /*attributs contenu*/
    background: #fff; /*couleur fond*/
    position: relative;
    width: 100%;
    top: -5px; /*ajustement du contenu en position haute*/
    height: 340px; /*hauteur*/
    z-index: 5; /*index superposition : important*/
    overflow: hidden; /*masque les débordements extérieurs : important*/
    box-shadow: 0 -2px 3px -2px rgba(0,0,0,0.3), 0 2px 2px rgba(0,0,0,0.3); /*ombre portée boite contenu*/
    border-radius: 0 3px 3px 3px; /*arrondis*/
}

.content div { /*attributs div contenu*/
    position: absolute;
    top: 0; /*positions*/
    left: 0;
    padding: 10px 20px; /*marges intérieures*/
    z-index: 1; /*index superposition : important*/
    opacity: 0; /*opacité : 0=invisible*/
    transition: opacity linear 0.6s; /*transition opacité  : 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é*/
    z-index: 100; /*index superposition : important*/
    opacity: 1; /*opacité : 1=visible*/
    transition: opacity ease-out 0.6s 0.3s; /*transition opacité  : nature temps*/
}
.content div h2,
.content div h3{ /*attributs div h2 et h3 (titres) du contenu*/
    color: #385c5b; /*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(63,148,148, 0.3); /*bordure gauche*/
}
</style>