/************************************************ FICHE INFOS************************************************/


/* On met en place la fiche et son image de fond */

.fiche {
  position: relative;
  width: 460px;
  margin: auto;
  overflow: hidden;
  background: url('http://image.noelshack.com/fichiers/2016/34/1472388194-pattern.png');
  background-size: auto;
}


/* On cache les input */

.fiche > input {
  display: none;
}


/* Mise en place la partie qui contient les images */

.fiche .images {
  position: relative;
  width: 460px;
  height: 220px;
}


/*Mise en place des petites images*/

.images.small {
  height: 110px;
}


/* Mise en place des images. On les cache également de base */

.fiche .images .imag {
  position: absolute;
  top: 0px;
  left: 0px;
  width: 460px;
  background-size: 460px;
  opacity: 0;
  visibility: hidden;
  transition: all ease 0.5s;
  overflow: hidden;
  height: 100%;
}


/* Mise en forme du titre de la fiche */

.fiche > oo {
  position: relative;
  z-index: 2;
  width: 100%;
  margin: 0px;
  margin-top: ;
  text-align: center;
  font-weight: normal;
  font-family: 'Aguafina Script', cursive;
  font-size: 60px;
  color: white;
  text-shadow: 1px 1px 1px black;
}

o1 { position: relative;
  text-align: center;
  font-weight: normal;
  margin-top:-50px;
  font-family: 'Aguafina Script', cursive;
  font-size: 50px;
  color: #C14550;
  text-shadow: 1px 1px 1px;
}

/* Mise en forme de la citation de la fiche */

.fiche .citation {
  width: 100%;
  padding-bottom: 5px;
  padding-bottom: 10px;
  text-align: center;
  font-family: 'Handlee', cursive;
  font-size: 18px;
  font-style: italic;
  line-height: 20px;
  color: white;
  text-shadow: 1px 1px 1px black;
}


/* On met les labels au centre */

.fiche .boutons {
  text-align: center;
}


/* Mise en forme des labels/titre des onglets normal */

.fiche .boutons label {
  margin-left: 3px;
  margin-right: 3px;
  color: #5566aa;
  font-size: 20px;
  font-family: 'pacifico';
  cursor: pointer;
  text-shadow: 1px 1px 1px black;
  transition: all ease 0.5s;
}


/* Effet au survol des labels */

.fiche .boutons label:hover {
  color: #88aadd;
  transition: all ease 0.5s;
  font-family: 'pacifico';
}

/* Onglet cliqué */

.fiche .boutons label.selected{
  color: #88aadd;
  transition: all ease 0.5s;
  font-family: 'pacifico';
}


/* On met en place le bloc qui va contenir le contenu de chaque onglet */

.fiche .interne {
  position: relative;
  width: 94%;
  height: 150px;
  margin: auto;
  border: 1px #aaaacc solid;
  background: white;
  font-family: 'Architects Daughter',cursive;
  font-size: 13px;
  color: black;
}


/* On met en place et en forme le contenu de chaque onglet */

.fiche .interne .contenu {
  position: absolute;
  top: 5px;
  left: 10px;
  margin-left: 4px;
  margin-right: 4px;
  width: 94%;
  height: 130px;
  padding-left:8px;
  padding-right:15px;
  padding: 5px;
  margin: auto;
  overflow: auto;
  text-align: justify;
  opacity: 0;
  visibility: hidden;
  transition: all ease 0.5s;
}


/* Petit effet sur les b: on change la couleur */

.fiche .interne clc {
  font-style: italic;
  color: #aaaacc;
}



/* Fait le changement de style sur les labels sélectionnés */

.fiche #lien1:checked ~ .boutons .lab.L1,
.fiche #lien2:checked ~ .boutons .lab.L2,
.fiche #lien3:checked ~ .boutons .lab.L3,
.fiche #lien4:checked ~ .boutons .lab.L4,
.fiche #lien5:checked ~ .boutons .lab.L5,
.fiche #lien6:checked ~ .boutons .lab.L6{
  font-family: 'Handlee', cursive;
  color: #bbaabb;
}


/* Fait apparaitre l'image de l'onglet sélectionné */

.fiche #lien1:checked ~ .images .imag.L1,
.fiche #lien2:checked ~ .images .imag.L2,
.fiche #lien3:checked ~ .images .imag.L3,
.fiche #lien4:checked ~ .images .imag.L4 {
  opacity: 1;
  visibility: visible;
  transition: all ease 0.5s;
}


/* Fait apparaitre le contenu de l'onglet sélectionné */

.fiche #lien1:checked ~ .interne .contenu.L1,
.fiche #lien2:checked ~ .interne .contenu.L2,
.fiche #lien3:checked ~ .interne .contenu.L3,
.fiche #lien4:checked ~ .interne .contenu.L4,
.fiche #lien5:checked ~ .interne .contenu.L5,
.fiche #lien6:checked ~ .interne .contenu.L6 {
  opacity: 1;
  visibility: visible;
  transition: all ease 0.5s;
}

<center> <div class="fiche">
<br> <oo> Prénom Nom </oo></br><div class="images small"> <div class="imag L1 "> <img src="ICI GIF n°1" class="gdh"> <img src="ICI GIF n°2" class="gdh"> </div><div class="imag L2 "><img src="ICI GIF n°3" class="gdh"> <img src="ICI GIF n°4" class="gdh"></div><div class="imag L3 "><img src="ICI GIF n°5" class="gdh"> <img src="ICI GIF n°6" class="gdh"></div><div class="imag L4 "><img src="ICI GIF n°7" class="gdh"> <img src="ICI GIF n°8" class="gdh"></div></div><br><div class="boutons"><label for="lien1" class="lab L1">My Person</label> <label for="lien2" class="lab L2"> To Know</label> <label for="lien3" class="lab L3">My secret </label> <label for="lien4" class="lab L4">The inside</label> </div><div class="citation">« Une toute petite citation »</div><div class="interne"><div class="contenu L1"><br><clc>Nom ≈</clc> Réponse ici <clc>Prénom(s) ≈</clc> Réponse ici <clc>Âge ≈</clc> Réponse ici <clc>Date,lieu de naissance ≈</clc> Réponse ici <clc>Origines,Nationalité ≈</clc> Réponse ici <clc>Métier/étude ≈</clc> Réponse ici <clc>Orientation sexuelle ≈</clc> Réponse ici <clc>Statut Matrimonial ≈</clc> Réponse ici  <clc> Famille ≈</clc>Réponse ici <clc>caractère ≈ </clc> <b1>+</b1> qualité <b1>-</b1> défaut <b1>+</b1> qualité <b1>-</b1> défaut <b1>+</b1> qualité <b1>-</b1> défaut <b1>+</b1> qualité <b1>-</b1> défaut <b1>+</b1> qualité <b1>-</b1> défaut <b1>+</b1> qualité <b1>-</b1> défaut <b1>+</b1> qualité <b1>-</b1> défaut  <clc>Groupe ≈</clc> Réponse ici  <clc>Crédit(s) ≈</clc> Réponse ici </div><div class="contenu L2"> <clc> Que ressentez vous face à cette folie meurtrière?</clc> Nous demondons au minimum trois lignes pour répondre à cette question. Cela est assez simple à atteinte au vu du code.
<clc> Ces meurtres vous font ils regretter des choses passés que vous aimeriez régler/avouer ? </clc> Nous demondons au minimum trois lignes pour répondre à cette question. Cela est assez simple à atteinte au vu du code.
<br><clc>(1)</clc> dis nous quelques choses qu'on ne sait pas sur toi ! manies, secret ou encore autre chose.  <clc>(2)</clc> dis nous quelques choses qu'on ne sait pas sur toi ! manies, secret ou encore autre chose.  <clc>(3)</clc> dis nous quelques choses qu'on ne sait pas sur toi ! manies, secret ou encore autre chose.  <clc>(4)</clc>dis nous quelques choses qu'on ne sait pas sur toi ! manies, secret ou encore autre chose.  <clc>(5)</clc> dis nous quelques choses qu'on ne sait pas sur toi ! manies, secret ou encore autre chose.  <clc>(6)</clc> dis nous quelques choses qu'on ne sait pas sur toi ! manies, secret ou encore autre chose.  <clc>(7)</clc> dis nous quelques choses qu'on ne sait pas sur toi ! manies, secret ou encore autre chose.  <clc>(8)</clc> dis nous quelques choses qu'on ne sait pas sur toi ! manies, secret ou encore autre chose.  <clc>(9)</clc> dis nous quelques choses qu'on ne sait pas sur toi ! manies, secret ou encore autre chose.  <clc>(10)</clc> dis nous quelques choses qu'on ne sait pas sur toi ! manies, secret ou encore autre chose. </div><div class="contenu L3">(Alors, voici un petit qcm que vous devez remplir pour connaître lors de votre validation par mp votre groupe secret qui vous permettra d'être enrôler convenablement dans l'intrigue des meurtres. Pour choisir une réponse vous n'avez qu'à mettre cette dernière en évidence ( en gras, italique, couleur ) .Quand vous avez fini vous pouvez effacer cette parenthèse, mais n'oubliez pas de remplir les codes juste en dessous du qcm pour votre avatar :love:)

<i>Tu es pressé et à pied aujourd’hui, les voitures sont en masse ce matin, que fais-tu quand tu te retrouves devant un feu orange :</i>
_ Tu te lances dans la circulation jonglant entre les capots de voiture.
_ Tu continues tout droit histoire de voir si tu ne vas pas croiser un autre feu rouge qui te laisserait passer au bon moment.
_ Tu attends que ce soit rouge, pour quelques secondes tu ne vas pas périr aujourd'hui.

<i>Tu marches dans la rue, puis un chien arrive et t'aboie dangereusement dessus :</i>
_ Tu prends la fuite, servir de hot dog à ce dernier, non merci.
_ Tu ne t'en aperçois même pas, trop occupé à faire autre chose.
_ Tu t'approches doucement du chien et cherches à trouver ses maitres.

<i>Lors de l'annonce des premiers meurtres, tu :</i>
_ As regardé les informations avant de retourner à tes occupations.
_ As immédiatement téléphoné à tes proches avant d'aller fermer tes verrous à double tours.
_ As directement mis la chaine d'informations pour connaitre toutes les informations données par la police.

<i>Dans le monde de Némo tu serais :</i>
_ Marin
_ Némo
_ Dory

<i>Quel type de personnage es-tu dans un film d'horreur:</i>
_ Celui qui se planque et se fait tuer.
_ Le héros.
_ Le mec marrant qui ne prend pas la chose au sérieux.

[center]Si vous êtes un personnage inventé[/center]
[code]<pris> ≈</pris> Célébrité feat Pseudo du personnage _ <pris> Pris</pris>[/code]

[center]Si vous êtes un scénario[/center]
[code]<pris> ≈</pris> Célébrité <pris>feat</pris> Pseudo du personnage _<pris> Scénario pris </pris>[/code]

[center]Si tu es un membre de la famille d'un mort[/center]
<b1> De quelle famille es tu? Qui es-tu dans cette dernière ? :</b1> réponse ici

 <br> </div> <div class="contenu L4"> (Tu peux soit faire ta présentation comme tu le sens, sois tu peux répondre aux questions suivantes)
<i>Tu es une femme ou un homme?</i> Réponse ici <i>Ton petit âge?</i> Réponse ici <i>Tu viens d'où?</i> Réponse ici <i>Comment es-tu arrivé ici?</i> Réponse ici <i>Tu es un double compte?</i> Réponse ici <i>Autres chose à dire?</i> Réponse ici  </div></div><br></div></center>