Cool, contente que ça te plaise.

J'ai essayé de le mettre sur ton forum (avec l'inspecteur d'élément), ça donne ça :


J'ai adapté un peu le placement du rond, par ce que sinon à la base ça donnait ça :


Ça te va ?

J'ai vu que tu avais récupéré le CSS de la 1ère fiche pour le mettre sur ton forum, est ce que tu peux l'enlever s'il te plait ♥ ?

Trop ouf!!!!!!!!!!!!!!!!!!!!!!!!!!

J'ai enlevé le CSS c'est bon ^.^

Coucou :)

Je vais m'y remettre x). J'étais partie dans une première version d'un code et finalement je vais "revenir en arrière" car ça ne convient pas ><

Hésite pas à upper quand même de temps en temps effectivement ♥

Ça marche! Merci de l'info!

Petit !

Hello ♥

Je poste juste pour te dire que là j'suis vraiment trop à la masse, depuis la dernière fois j'ai même pas ouvert le fichier ><... C'est vraiment nul, désolée désolée, j'arrive pas à me motiver ><

Je vais simplement prendre le temps de commenter mon code tel qu'il est actuellement et te le passer en t'expliquer comment l'utiliser / le modifier :DD

Pour les petites retouches on verra après, mais ça devra attendre x)

En attendant, voici une première version (pour te faire patienter que je commente tout XD)

Dans ton message tu écris :

Code:

<link href='https://fonts.googleapis.com/css?family=Kaushan+Script' rel='stylesheet' type='text/css'>
<div class="fiche-boutique">

<!-- Liste des onglets -->
<input type="radio" id="onglet1" name="onglets" checked="checked" />
<input type="radio" id="onglet2" name="onglets" />
<input type="radio" id="onglet3" name="onglets" />
<div class="list-onglets">
<label for="onglet1" id="techniques">Techniques </label>
<label for="onglet2" id="specialites">Spécialités </label>
<label for="onglet3" id="objets">Objets</label>
</div>

<div class="onglets">
<div class="onglet onglet1">
<div class="onglet-title">Techniques</div>

<input type="radio" id="onglet1-page1" name="onglet1" checked="checked" />
<input type="radio" id="onglet1-page2" name="onglet1">
<input type="radio" id="onglet1-page3" name="onglet1">
<div class="onglet-page page1">
<div class="onglet-category">Base</div>
<div>
<div class="onglet-product">
<div class="product-image" style="background-image:url('http://image.noelshack.com/fichiers/2014/33/1407790082-camille-1.png')"></div>
<div class="product-infobulle">Lem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet.
<div class="product-price">21 ~ Po </div>
</div>
</div>
<div class="onglet-product">
<div class="product-image" style="background-image:url('http://img11.hostingpics.net/pics/132806Poppy2.png')"></div>
<div class="product-infobulle">Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet.
<div class="product-price">3 x </div>
</div>
</div>
<div class="onglet-product">
<div class="product-image" style="background-image:url('http://i.imgur.com/zp5A42Q.png')"></div>
<div class="product-infobulle">Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet.
<div class="product-price">3 x</div>
</div>
</div>
<div class="onglet-product">
<div class="product-image" style="background-image:url('http://img11.hostingpics.net/pics/570286METHEEERE.png')"></div>
<div class="product-infobulle">Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet.
<div class="product-price">3 x</div>
</div>
</div>
<div class="onglet-product">
<div class="product-image" style="background-image:url('http://img11.hostingpics.net/pics/971710Eisenheim.png')"></div>
<div class="product-infobulle">Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet.
<div class="product-price">3 x</div>
</div>
</div>
<div class="onglet-product">
<div class="product-image" style="background-image:url('http://image.noelshack.com/fichiers/2013/33/1376518209-erudit-1.png')"></div>
<div class="product-infobulle">Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet.
<div class="product-price">3 x</div>
</div>
</div>
<div class="onglet-product">
<div class="product-image" style="background-image:url('http://i.imgur.com/lZJ94h9.png')"></div>
<div class="product-infobulle">Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet.
<div class="product-price">3 x</div>
</div>
</div>
<div class="onglet-product">
<div class="product-image" style="background-image:url('http://i.imgur.com/TpepTUe.png')"></div>
<div class="product-infobulle">Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet.
<div class="product-price">3 x</div>
</div>
</div>
<div class="onglet-product">
<div class="product-image" style="background-image:url('http://img11.hostingpics.net/pics/585982Error.png')"></div>
<div class="product-infobulle">Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet.
<div class="product-price">3 x</div>
</div>
</div>
</div>
</div>
<div class="onglet-page page2">
<div class="onglet-category">Katon</div>
<div>
<div class="onglet-product">
<div class="product-image" style="background-image:url('http://placehold.it/120x90/ffffff/000000?text=Page+2')"></div>
<div class="product-infobulle">Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet.
<div class="product-price">3 x</div>
</div>
</div>
<div class="onglet-product">
<div class="product-image" style="background-image:url('http://placehold.it/120x90/ffffff/000000?text=Page+2')"></div>
<div class="product-infobulle">Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet.
<div class="product-price">3 x</div>
</div>
</div>
<div class="onglet-product">
<div class="product-image" style="background-image:url('http://placehold.it/120x90/ffffff/000000?text=Page+2')"></div>
<div class="product-infobulle">Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet.
<div class="product-price">3 x</div>
</div>
</div>
<div class="onglet-product">
<div class="product-image" style="background-image:url('http://placehold.it/120x90/ffffff/000000?text=Page+2')"></div>
<div class="product-infobulle">Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet.
<div class="product-price">3 x</div>
</div>
</div>
<div class="onglet-product">
<div class="product-image" style="background-image:url('http://placehold.it/120x90/ffffff/000000?text=Page+2')"></div>
<div class="product-infobulle">Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet.
<div class="product-price">3 x</div>
</div>
</div>
<div class="onglet-product">
<div class="product-image" style="background-image:url('http://placehold.it/120x90/ffffff/000000?text=Page+2')"></div>
<div class="product-infobulle">Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet.
<div class="product-price">3 x</div>
</div>
</div>
<div class="onglet-product">
<div class="product-image" style="background-image:url('http://placehold.it/120x90/ffffff/000000?text=Page+2')"></div>
<div class="product-infobulle">Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet.
<div class="product-price">3 x</div>
</div>
</div>
<div class="onglet-product">
<div class="product-image" style="background-image:url('http://placehold.it/120x90/ffffff/000000?text=Page+2')"></div>
<div class="product-infobulle">Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet.
<div class="product-price">3 x</div>
</div>
</div>
<div class="onglet-product">
<div class="product-image" style="background-image:url('http://placehold.it/120x90/ffffff/000000?text=Page+2')"></div>
<div class="product-infobulle">Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet.
<div class="product-price">3 x</div>
</div>
</div>
</div>
</div>
<div class="onglet-page page3">
<div class="onglet-category">Suiton</div>
<div>
<div class="onglet-product">
<div class="product-image" style="background-image:url('http://placehold.it/120x90/ffffff/000000?text=Page+3')"></div>
<div class="product-infobulle">Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet.
<div class="product-price">3 x</div>
</div>
</div>
<div class="onglet-product">
<div class="product-image" style="background-image:url('http://placehold.it/120x90/ffffff/000000?text=Page+3')"></div>
<div class="product-infobulle">Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet.
<div class="product-price">3 x</div>
</div>
</div>
<div class="onglet-product">
<div class="product-image" style="background-image:url('http://placehold.it/120x90/ffffff/000000?text=Page+3')"></div>
<div class="product-infobulle">Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet.
<div class="product-price">3 x</div>
</div>
</div>
<div class="onglet-product">
<div class="product-image" style="background-image:url('http://placehold.it/120x90/ffffff/000000?text=Page+3')"></div>
<div class="product-infobulle">Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet.
<div class="product-price">3 x</div>
</div>
</div>
<div class="onglet-product">
<div class="product-image" style="background-image:url('http://placehold.it/120x90/ffffff/000000?text=Page+3')"></div>
<div class="product-infobulle">Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet.
<div class="product-price">3 x</div>
</div>
</div>
<div class="onglet-product">
<div class="product-image" style="background-image:url('http://placehold.it/120x90/ffffff/000000?text=Page+3')"></div>
<div class="product-infobulle">Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet.
<div class="product-price">3 x</div>
</div>
</div>
<div class="onglet-product">
<div class="product-image" style="background-image:url('http://placehold.it/120x90/ffffff/000000?text=Page+3')"></div>
<div class="product-infobulle">Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet.
<div class="product-price">3 x</div>
</div>
</div>
</div>
</div>
<div class="onglet-pages">
<label for="onglet1-page1">1</label> /
<label for="onglet1-page2">2</label> /
<label for="onglet1-page3">3</label>
</div>
</div>
<!-- fermeture onglet -->

<div class="onglet onglet2">
<div class="onglet-title">Spécialités</div>
<input type="radio" id="onglet2-page1" name="onglet2" checked="checked" />
<input type="radio" id="onglet2-page2" name="onglet2">
<input type="radio" id="onglet2-page3" name="onglet2">
<div class="onglet-page page1">
<div class="onglet-category">Taïjutsu</div>
<div>
<div class="onglet-product">
<div class="product-image" style="background-image:url('http://placehold.it/120x90/990100/FFFFFF?text=Page+1')"></div>
<div class="product-infobulle">Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet.
<div class="product-price">3 x</div>
</div>
</div>
<div class="onglet-product">
<div class="product-image" style="background-image:url('http://placehold.it/120x90/990100/FFFFFF?text=Page+1')"></div>
<div class="product-infobulle">Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet.
<div class="product-price">3 x</div>
</div>
</div>
<div class="onglet-product">
<div class="product-image" style="background-image:url('http://placehold.it/120x90/990100/FFFFFF?text=Page+1')"></div>
<div class="product-infobulle">Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet.
<div class="product-price">3 x</div>
</div>
</div>
<div class="onglet-product">
<div class="product-image" style="background-image:url('http://placehold.it/120x90/990100/FFFFFF?text=Page+1')"></div>
<div class="product-infobulle">Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet.
<div class="product-price">3 x</div>
</div>
</div>
<div class="onglet-product">
<div class="product-image" style="background-image:url('http://placehold.it/120x90/990100/FFFFFF?text=Page+1')"></div>
<div class="product-infobulle">Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet.
<div class="product-price">3 x</div>
</div>
</div>
<div class="onglet-product">
<div class="product-image" style="background-image:url('http://placehold.it/120x90/990100/FFFFFF?text=Page+1')"></div>
<div class="product-infobulle">Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet.
<div class="product-price">3 x</div>
</div>
</div>
<div class="onglet-product">
<div class="product-image" style="background-image:url('http://placehold.it/120x90/990100/FFFFFF?text=Page+1')"></div>
<div class="product-infobulle">Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet.
<div class="product-price">3 x</div>
</div>
</div>
<div class="onglet-product">
<div class="product-image" style="background-image:url('http://placehold.it/120x90/990100/FFFFFF?text=Page+1')"></div>
<div class="product-infobulle">Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet.
<div class="product-price">3 x</div>
</div>
</div>
<div class="onglet-product">
<div class="product-image" style="background-image:url('http://placehold.it/120x90/990100/FFFFFF?text=Page+1')"></div>
<div class="product-infobulle">Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet.
<div class="product-price">3 x</div>
</div>
</div>
</div>
</div>
<div class="onglet-page page2">
<div class="onglet-category">Ninjutsu</div>
<div>
<div class="onglet-product">
<div class="product-image" style="background-image:url('http://placehold.it/120x90/990100/FFFFFF?text=Page+2')"></div>
<div class="product-infobulle">Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet.
<div class="product-price">3 x</div>
</div>
</div>
<div class="onglet-product">
<div class="product-image" style="background-image:url('http://placehold.it/120x90/990100/FFFFFF?text=Page+2')"></div>
<div class="product-infobulle">Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet.
<div class="product-price">3 x</div>
</div>
</div>
<div class="onglet-product">
<div class="product-image" style="background-image:url('http://placehold.it/120x90/990100/FFFFFF?text=Page+2')"></div>
<div class="product-infobulle">Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet.
<div class="product-price">3 x</div>
</div>
</div>
<div class="onglet-product">
<div class="product-image" style="background-image:url('http://placehold.it/120x90/990100/FFFFFF?text=Page+2')"></div>
<div class="product-infobulle">Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet.
<div class="product-price">3 x</div>
</div>
</div>
<div class="onglet-product">
<div class="product-image" style="background-image:url('http://placehold.it/120x90/990100/FFFFFF?text=Page+2')"></div>
<div class="product-infobulle">Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet.
<div class="product-price">3 x</div>
</div>
</div>
<div class="onglet-product">
<div class="product-image" style="background-image:url('http://placehold.it/120x90/990100/FFFFFF?text=Page+2')"></div>
<div class="product-infobulle">Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet.
<div class="product-price">3 x</div>
</div>
</div>
<div class="onglet-product">
<div class="product-image" style="background-image:url('http://placehold.it/120x90/990100/FFFFFF?text=Page+2')"></div>
<div class="product-infobulle">Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet.
<div class="product-price">3 x</div>
</div>
</div>
<div class="onglet-product">
<div class="product-image" style="background-image:url('http://placehold.it/120x90/990100/FFFFFF?text=Page+2')"></div>
<div class="product-infobulle">Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet.
<div class="product-price">3 x</div>
</div>
</div>
<div class="onglet-product">
<div class="product-image" style="background-image:url('http://placehold.it/120x90/990100/FFFFFF?text=Page+2')"></div>
<div class="product-infobulle">Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet.
<div class="product-price">3 x</div>
</div>
</div>
</div>
</div>
<div class="onglet-page page3">
<div class="onglet-category">Genjutsu</div>
<div>
<div class="onglet-product">
<div class="product-image" style="background-image:url('http://placehold.it/120x90/990100/FFFFFF?text=Page+3')"></div>
<div class="product-infobulle">Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet.
<div class="product-price">3 x</div>
</div>
</div>
<div class="onglet-product">
<div class="product-image" style="background-image:url('http://placehold.it/120x90/990100/FFFFFF?text=Page+3')"></div>
<div class="product-infobulle">Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet.
<div class="product-price">3 x</div>
</div>
</div>
<div class="onglet-product">
<div class="product-image" style="background-image:url('http://placehold.it/120x90/990100/FFFFFF?text=Page+3')"></div>
<div class="product-infobulle">Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet.
<div class="product-price">3 x</div>
</div>
</div>
<div class="onglet-product">
<div class="product-image" style="background-image:url('http://placehold.it/120x90/990100/FFFFFF?text=Page+3')"></div>
<div class="product-infobulle">Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet.
<div class="product-price">3 x</div>
</div>
</div>
<div class="onglet-product">
<div class="product-image" style="background-image:url('http://placehold.it/120x90/990100/FFFFFF?text=Page+3')"></div>
<div class="product-infobulle">Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet.
<div class="product-price">3 x</div>
</div>
</div>
<div class="onglet-product">
<div class="product-image" style="background-image:url('http://placehold.it/120x90/990100/FFFFFF?text=Page+3')"></div>
<div class="product-infobulle">Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet.
<div class="product-price">3 x</div>
</div>
</div>
<div class="onglet-product">
<div class="product-image" style="background-image:url('http://placehold.it/120x90/990100/FFFFFF?text=Page+3')"></div>
<div class="product-infobulle">Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet.
<div class="product-price">3 x</div>
</div>
</div>
</div>
</div>
<div class="onglet-pages">
<label for="onglet2-page1">1</label> /
<label for="onglet2-page2">2</label> /
<label for="onglet2-page3">3</label>
</div>
</div>
<!-- fermeture onglet -->

<div class="onglet onglet3">
<div class="onglet-title">Objets</div>
<input type="radio" id="onglet3-page1" name="onglet3" checked="checked" />
<input type="radio" id="onglet3-page2" name="onglet3">
<input type="radio" id="onglet3-page3" name="onglet3">
<div class="onglet-page page1">
<div class="onglet-category">Armes</div>
<div>
<div class="onglet-product">
<div class="product-image" style="background-image:url('http://placehold.it/120x90/333333/FFFFFF?text=Page+1')"></div>
<div class="product-infobulle">Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet.
<div class="product-price">3 x</div>
</div>
</div>
<div class="onglet-product">
<div class="product-image" style="background-image:url('http://placehold.it/120x90/333333/FFFFFF?text=Page+1')"></div>
<div class="product-infobulle">Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet.
<div class="product-price">3 x</div>
</div>
</div>
<div class="onglet-product">
<div class="product-image" style="background-image:url('http://placehold.it/120x90/333333/FFFFFF?text=Page+1')"></div>
<div class="product-infobulle">Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet.
<div class="product-price">3 x</div>
</div>
</div>
<div class="onglet-product">
<div class="product-image" style="background-image:url('http://placehold.it/120x90/333333/FFFFFF?text=Page+1')"></div>
<div class="product-infobulle">Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet.
<div class="product-price">3 x</div>
</div>
</div>
<div class="onglet-product">
<div class="product-image" style="background-image:url('http://placehold.it/120x90/333333/FFFFFF?text=Page+1')"></div>
<div class="product-infobulle">Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet.
<div class="product-price">3 x</div>
</div>
</div>
<div class="onglet-product">
<div class="product-image" style="background-image:url('http://placehold.it/120x90/333333/FFFFFF?text=Page+1')"></div>
<div class="product-infobulle">Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet.
<div class="product-price">3 x</div>
</div>
</div>
<div class="onglet-product">
<div class="product-image" style="background-image:url('http://placehold.it/120x90/333333/FFFFFF?text=Page+1')"></div>
<div class="product-infobulle">Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet.
<div class="product-price">3 x</div>
</div>
</div>
<div class="onglet-product">
<div class="product-image" style="background-image:url('http://placehold.it/120x90/333333/FFFFFF?text=Page+1')"></div>
<div class="product-infobulle">Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet.
<div class="product-price">3 x</div>
</div>
</div>
<div class="onglet-product">
<div class="product-image" style="background-image:url('http://placehold.it/120x90/333333/FFFFFF?text=Page+1')"></div>
<div class="product-infobulle">Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet.
<div class="product-price">3 x</div>
</div>
</div>
</div>
</div>
<div class="onglet-page page2">
<div class="onglet-category">Bentôs</div>
<div>
<div class="onglet-product">
<div class="product-image" style="background-image:url('http://placehold.it/120x90/333333/FFFFFF?text=Page+2')"></div>
<div class="product-infobulle">Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet.
<div class="product-price">3 x</div>
</div>
</div>
<div class="onglet-product">
<div class="product-image" style="background-image:url('http://placehold.it/120x90/333333/FFFFFF?text=Page+2')"></div>
<div class="product-infobulle">Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet.
<div class="product-price">3 x</div>
</div>
</div>
<div class="onglet-product">
<div class="product-image" style="background-image:url('http://placehold.it/120x90/333333/FFFFFF?text=Page+2')"></div>
<div class="product-infobulle">Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet.
<div class="product-price">3 x</div>
</div>
</div>
<div class="onglet-product">
<div class="product-image" style="background-image:url('http://placehold.it/120x90/333333/FFFFFF?text=Page+2')"></div>
<div class="product-infobulle">Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet.
<div class="product-price">3 x</div>
</div>
</div>
<div class="onglet-product">
<div class="product-image" style="background-image:url('http://placehold.it/120x90/333333/FFFFFF?text=Page+2')"></div>
<div class="product-infobulle">Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet.
<div class="product-price">3 x</div>
</div>
</div>
<div class="onglet-product">
<div class="product-image" style="background-image:url('http://placehold.it/120x90/333333/FFFFFF?text=Page+2')"></div>
<div class="product-infobulle">Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet.
<div class="product-price">3 x</div>
</div>
</div>
</div>
</div>
<div class="onglet-page page3">
<div class="onglet-category">Base</div>
<div>
<div class="onglet-product">
<div class="product-image" style="background-image:url('http://placehold.it/120x90/333333/FFFFFF?text=Page+3')"></div>
<div class="product-infobulle">Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet.
<div class="product-price">3 x</div>
</div>
</div>
<div class="onglet-product">
<div class="product-image" style="background-image:url('http://placehold.it/120x90/333333/FFFFFF?text=Page+3')"></div>
<div class="product-infobulle">Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet.
<div class="product-price">3 x</div>
</div>
</div>
<div class="onglet-product">
<div class="product-image" style="background-image:url('http://placehold.it/120x90/333333/FFFFFF?text=Page+3')"></div>
<div class="product-infobulle">Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet.
<div class="product-price">3 x</div>
</div>
</div>
<div class="onglet-product">
<div class="product-image" style="background-image:url('http://placehold.it/120x90/333333/FFFFFF?text=Page+3')"></div>
<div class="product-infobulle">Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet.
<div class="product-price">3 x</div>
</div>
</div>
<div class="onglet-product">
<div class="product-image" style="background-image:url('http://placehold.it/120x90/333333/FFFFFF?text=Page+3')"></div>
<div class="product-infobulle">Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet.
<div class="product-price">3 x</div>
</div>
</div>
<div class="onglet-product">
<div class="product-image" style="background-image:url('http://placehold.it/120x90/333333/FFFFFF?text=Page+3')"></div>
<div class="product-infobulle">Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet.
<div class="product-price">3 x</div>
</div>
</div>
<div class="onglet-product">
<div class="product-image" style="background-image:url('http://placehold.it/120x90/333333/FFFFFF?text=Page+3')"></div>
<div class="product-infobulle">Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet.
<div class="product-price">3 x</div>
</div>
</div>
</div>
</div>
<div class="onglet-pages">
<label for="onglet3-page1">1</label> /
<label for="onglet3-page2">2</label> /
<label for="onglet3-page3">3</label>
</div>
</div>

</div>
<!-- fermeture onglet -->
<a href="http://www.never-utopia.com/" target="_blank" class="f-nu-credit" title="Visiter le forum Never Utopia">❤ <span class="f-nu-credit-texte">Fait avec amour par Never Utopia</span></a>

</div>

Le CSS :

Code:

 .fiche-boutique br { display: none; }
      
      
/* -----------------------------------
 * CODE POUR FAIRE MARCHER LES ONGLETS
 * -----------------------------------
 * */
        
        .fiche-boutique input[type="radio"] {
            display: none;
        }
      
      /* Par défaut on n.affiche pas les pages */
        input[id$="page1"]:not(:checked) ~ .page1,
        input[id$="page2"]:not(:checked) ~ .page2,
        input[id$="page3"]:not(:checked) ~ .page3 {
            display: none;
        }
      
       /* Par défaut on n.affiche pas les onglets */      
        input[id$="onglet1"]:not(:checked) ~ .onglets .onglet1,
        input[id$="onglet2"]:not(:checked) ~ .onglets .onglet2,
        input[id$="onglet3"]:not(:checked) ~ .onglets .onglet3 {
            display: none;
        }
        
      /* Style de la pagination active */
        input[id$="page1"]:checked ~ .onglet-pages label[for$="page1"],
        input[id$="page2"]:checked ~ .onglet-pages label[for$="page2"],
        input[id$="page3"]:checked ~ .onglet-pages label[for$="page3"] {
            font-weight: bold;
            color: #B4232F;
        }


      /* Style de l.onglet actif */  
        input[id$="onglet1"]:checked ~ .list-onglets label[for$="onglet1"],
        input[id$="onglet2"]:checked ~ .list-onglets label[for$="onglet2"],
        input[id$="onglet3"]:checked ~ .list-onglets label[for$="onglet3"] {
            font-weight: bold;
        }
      
/* -----------------------------------
 * CODE POUR FAIRE MARCHER LES ONGLETS
 * -----------------------------------
 * */
      
        
        .fiche-boutique {
            width: 390px;
            margin: auto;
            position: relative;
            color: #fff;
            padding-bottom: 30px;
        }
        
        .list-onglets {
            position: absolute;
            width: 150px;
            height: 120px;
            border-radius: 50%;
            background: rgb(178, 26, 26);
            text-align: center;
            top: -120px;
            left: -120px;
            padding-top: 30px;
            font-family: "Kaushan Script", sans-serif;
        }
        
        .list-onglets label {
            padding: 5px;
            display: block;
            font-size: 18px;
            position: relative;
            z-index: 5;
            text-overflow: ellipsis;
            overflow: hidden;
        }
        
        .onglet-title {
            text-align: center;
            height: 70px;
            background-image: url("http://i.imgur.com/TNBUrtC.png");
            background-position: top center;
            background-size: 100%;
            background-repeat: no-repeat;
            font-family: "Kaushan Script", sans-serif;
            font-size: 23px;
            padding-top: 20px;
            font-variant: small-caps;
            position: relative;
        }
        
        .onglet-category {
            text-align: center;
            position: relative;
            top: -40px;
            z-index: 5;
            font-family: "Kaushan Script", sans-serif;
            font-size: 30px;
            color: #ffffff;
            letter-spacing: 2px;
            text-shadow: 1px 1px 0 #dd4646, -1px -1px 0 #6d2626;
        }
        
        .onglet-product {
            width: 120px;
            height: 90px;
            display: inline-block;
            vertical-align: top;
            position: relative;
            margin-right: 10px;
            margin-bottom: 20px;
            font-size: 11px;
            text-align: center;
            
        }
        
        .onglet-product:nth-child(3n) {
            margin-right: 0;
        }
        
        .product-image {
            background: #f6f6f6;
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            transition: all 200ms;
            background-size: cover;
            background-position: center;
            border-radius: 3px / 10px;
        }
        
        .product-infobulle {
            position: absolute;
            top: 50px;
            left: 50px;
            width: 150px;
            padding: 10px;
            background-image: url("http://image.noelshack.com/fichiers/2015/37/1441749753-25-old-paper-4-500x687.jpg");
            background-position: center;
            z-index: 2;
            visibility: hidden;
            opacity: 0;
            transition: all 600ms;
            text-shadow: 0 0 5px #ffffff;
            box-shadow: 0 0 5px #b2824b inset, 0 0 25px rgba(62, 8, 8, 0.6) inset, 0 0 5px #a28564, 0 5px 20px -10px #381100;
            border-radius: 4px;
            padding-bottom: 60px;
            line-height: 2;
            color: #000;
            overflow: hidden;
            word-wrap: break-word;
        }
        
        .onglet-product:hover .product-infobulle {
            visibility: visible;
            opacity: 1;
        }
        
        .onglet-pages {
            margin-top: 20px;
            font-family: "Kaushan Script", sans-serif;
            text-align: center;
            color: #292C37;
        }
        
        .onglet-pages label {
            padding: 10px;
        }
        
        .fiche-boutique label {
            cursor: pointer;
        }
        
 
        
        .product-price {
            position: absolute;
            bottom: 0px;
            left: 0;
            right: 0;
            text-align: left;
            padding-left: 10px;
            padding-top: 15px;
            padding-bottom: 0px;
            background: url("http://image.noelshack.com/fichiers/2015/37/1441886210-partie-prix.png");
            background-size: 100%;
            background-position: top center;
            font-family: "Kaushan Script", sans-serif;
            font-size: 20px;
            z-index: -1;
            color: #dd0a1b;
            text-shadow: none;
        }

        /* ------------- CREDITS POUR NEVER UTOPIA ------------- */

.f-nu-credit, .f-nu-credit:link, .f-nu-credit:visited  {
    color: white;
    text-shadow: 0 0 3px black;
    position: absolute;
    bottom: 0px;
    right: 0px;
    padding: 10px;
    z-index: 1;
    text-decoration: none;
}

.f-nu-credit-texte  {
    color: #d42929;
    position: absolute;
    width: 150px;
    right: 5px;
    bottom: 5px;
    background: #111;
    padding: 10px;
    -webkit-transform: scale(0);
    -ms-transform: scale(0);
    transform: scale(0);
    border-radius: 10px;
    -webkit-transition: all 300ms;
    transition: all 300ms;
    -webkit-transform-origin: bottom right;
    -ms-transform-origin: bottom right;
    transform-origin: bottom right;
    opacity: 0.5;
    visibility: hidden;
}

.f-nu-credit:hover .f-nu-credit-texte {
    -webkit-transform: scale(1);
    -ms-transform: scale(1);
    transform: scale(1);
    opacity: 1;
    visibility: visible;
}

.f-nu-credit:hover {
    text-decoration: none;
}

Pour l'instant c'est en brut, j'ai pas nettoyé

Je veux bien le lien du sujet ensuite pour vérifier d'éventuels bugs o: !

Merciiiiiiiiiiiiiiiiiiiiiiiiiii!!!!!!!!!!!!!!! C'est suuuuuuuuuuuuuuuuupeeeeeeeeeeeeeeeer!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!

Voici le lien du sujet >> Boutique

Petit

Coucou :)

Désolée, je n'ai pas avancé d'un cheveux dessus encore ><.

Le sujet est dans une section du forum que je ne peux pas voir °-°. Du coup, tu as constaté des bugs ou pas >< ?

x) *boulet*

Je vais le mettre où tu peux le voir
Ici >> Boutique

Hum, chez moi ça apparait bien on dirait :)

Je vois que tu as commencé à personnaliser les textes, ça va tu t'en sors ? Pas de bugs / soucis ?

Je ne vais plus modifier le HTML à priori donc tu veux le modifier autant que tu veux ♥

Si tu veux faire une modif en attendant que je donne le code CSS commenté et que tu ne trouves pas, hésite pas :)

Coucou!

Alors je n'ai remarqué qu'un seul bug, c'est quand on passe sur une image (notamment au niveau des liens vers les autres pages) il revient alors qu'on ne passe pas sur l'image mais sur l'ancien emplacement de la fenêtre texte. Je sais pas si c'est très clair...

Sinon, pour remplir, je me débrouille, c'est juste au niveau des pages, si je veux en rajouter, je dois faire comment?

En tout cas, merci beaucoup, c'est vraiment super!!

En temps normal j'aurais fait la génération des onglets en javascript pour te faciliter la vie, mais je dois t'avouer que là j'en avais un peu marre et envie de passer à autre chose

Si tu veux, tu peux me copier / coller ton HTML actuel pour que j'y rajoute directement des commentaires supplémentaires pour t'aider à te repérer

Pour le petit bug, on va modifier ceci dans le CSS :

Code:

.product-infobulle {
    position: absolute;
    top: 50px;
    left: 50px;
    width: 150px;
    padding: 10px;
    background-image: url("http://image.noelshack.com/fichiers/2015/37/1441749753-25-old-paper-4-500x687.jpg");
    background-position: center;
    z-index: 2;
    visibility: hidden;
    opacity: 0;
    transition: all 600ms;
    text-shadow: 0 0 5px #ffffff;
    box-shadow: 0 0 5px #b2824b inset, 0 0 25px rgba(62, 8, 8, 0.6) inset, 0 0 5px #a28564, 0 5px 20px -10px #381100;
    border-radius: 4px;
    padding-bottom: 60px;
    line-height: 2;
    color: #000;
    overflow: hidden;
    word-wrap: break-word;
}
       
.onglet-product:hover .product-infobulle {
    visibility: visible;
    opacity: 1;
}

A la place on met ça :

Code:

.product-infobulle {
    position: absolute;
    top: 50px;
    left: 50px;
    width: 150px;
    padding: 10px;
    background-image: url("http://image.noelshack.com/fichiers/2015/37/1441749753-25-old-paper-4-500x687.jpg");
    background-position: center;
    z-index: 2;
    visibility: hidden;
    opacity: 0;
    transition: all 200ms;
    text-shadow: 0 0 5px #ffffff;
    box-shadow: 0 0 5px #b2824b inset, 0 0 25px rgba(62, 8, 8, 0.6) inset, 0 0 5px #a28564, 0 5px 20px -10px #381100;
    border-radius: 4px;
    padding-bottom: 60px;
    line-height: 2;
    color: #000;
    overflow: hidden;
    word-wrap: break-word;
}
       
.onglet-product:hover .product-infobulle {
    visibility: visible;
    opacity: 1;
    transition: all 600ms;
}

Normalement ça sera mieux :)

Hey!!

Merci beaucoup! Ça marche mieux!!
Je dis pas non pour quelques commentaires d'aide ^^
Voici mon HTML

Code:

<link href='https://fonts.googleapis.com/css?family=Kaushan+Script' rel='stylesheet' type='text/css'>
<div class="fiche-boutique">

<!-- Liste des onglets -->
<input type="radio" id="onglet1" name="onglets" checked="checked" />
<input type="radio" id="onglet2" name="onglets" />
<input type="radio" id="onglet3" name="onglets" />
<div class="list-onglets">
<label for="onglet1" id="techniques">Techniques </label>
<label for="onglet2" id="specialites">Spécialités </label>
<label for="onglet3" id="objets">Objets</label>
</div>

<div class="onglets">
<div class="onglet onglet1">
<div class="onglet-title">Techniques</div>

<input type="radio" id="onglet1-page1" name="onglet1" checked="checked" />
<input type="radio" id="onglet1-page2" name="onglet1">
<input type="radio" id="onglet1-page3" name="onglet1">
<div class="onglet-page page1">
<div class="onglet-category">Base</div>
<div>
<div class="onglet-product">
<div class="product-image" style="background-image:url('http://img3.wikia.nocookie.net/__cb20150802180925/naruto/fr/images/b/be/D%C3%A9doublement.png')"></div>
<div class="product-infobulle">[u]Bunshin no Jutsu :[/u] Cette technique permet à son utilisateur de pouvoir se dédoubler instantanément. Une fois dédoublé, le Chakra est divisé en deux entre l'original et la copie. L'utilisateur peut créer 2 clones au maximum.
<div class="product-price">2 ~ PC </div>
</div>
</div>
<div class="onglet-product">
<div class="product-image" style="background-image:url('http://i21.servimg.com/u/f21/18/95/57/71/kai10.jpg')"></div>
<div class="product-infobulle">[u]Kaï :[/u] L'utilisateur utilise Kai pour dissiper une illusion de niveau moyen.
<div class="product-price">2 PC </div>
</div>
</div>
<div class="onglet-product">
<div class="product-image" style="background-image:url('http://i21.servimg.com/u/f21/18/95/57/71/fuma_s10.jpg')"></div>
<div class="product-infobulle">[u]Kage Shuriken no jutsu :[/u] L'utilisateur cache un shuriken dans un autre pour avoir un effet de surprise. Technique difficile à esquiver.
<div class="product-price">2 PC</div>
</div>
</div>
<div class="onglet-product">
<div class="product-image" style="background-image:url('http://i21.servimg.com/u/f21/18/95/57/71/kawari10.jpg')"></div>
<div class="product-infobulle">[u]Kawarimi no jutsu :[/u] Avec cette technique, les utilisateurs remplacent leur propre corps avec un objet, généralement avec une bûche de bois, au moment ou l'attaque est portée. Cela crée une illusion d'optique, laissant l'ennemi penser que son attaque a réussi.
<div class="product-price">2 PC</div>
</div>
</div>
<div class="onglet-product">
<div class="product-image" style="background-image:url('http://i21.servimg.com/u/f21/18/95/57/71/shinte11.jpg')"></div>
<div class="product-infobulle">[u]Shunshin no Jutsu :[/u] L'utilisateur ce déplace à une vitesse presque intraçable. Cela ressemble à une téléportation.
<div class="product-price">3 PC</div>
</div>
</div>
<div class="onglet-product">
<div class="product-image" style="background-image:url('http://image.noelshack.com/fichiers/2013/33/1376518209-erudit-1.png')"></div>
<div class="product-infobulle">Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet.
<div class="product-price">3 x</div>
</div>
</div>
<div class="onglet-product">
<div class="product-image" style="background-image:url('http://i.imgur.com/lZJ94h9.png')"></div>
<div class="product-infobulle">Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet.
<div class="product-price">3 x</div>
</div>
</div>
<div class="onglet-product">
<div class="product-image" style="background-image:url('http://i.imgur.com/TpepTUe.png')"></div>
<div class="product-infobulle">Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet.
<div class="product-price">3 x</div>
</div>
</div>
<div class="onglet-product">
<div class="product-image" style="background-image:url('http://img11.hostingpics.net/pics/585982Error.png')"></div>
<div class="product-infobulle">Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet.
<div class="product-price">3 x</div>
</div>
</div>
</div>
</div>
<div class="onglet-page page2">
<div class="onglet-category">Katon</div>
<div>
<div class="onglet-product">
<div class="product-image" style="background-image:url('http://www.captainaruto.com/images/techniques/24.jpg')"></div>
<div class="product-infobulle">[u]Gogakyû no jutsu :[/u] L'utilisateur canalise sont chakra et envoie une boule de feu suprême.
<div class="product-price">4 PC</div>
</div>
</div>
<div class="onglet-product">
<div class="product-image" style="background-image:url('http://www.captainaruto.com/images/techniques/25.jpg')"></div>
<div class="product-infobulle">[u]Hosenka no jutsu :[/u] L'utilisateur envoie plusieurs petites boules de feu, capable de suivre l'opposant une fois la technique bien maîtrisée.
<div class="product-price">5 PC</div>
</div>
</div>
<div class="onglet-product">
<div class="product-image" style="background-image:url('http://www.captainaruto.com/images/techniques/techniques-redigees/gokamesshitsu.png')"></div>
<div class="product-infobulle">[u]Gouka Messhitsu no jutsu :[/u] L'utilisateur envoie un torrent de flammes capable d’incendier toute une zone. Très efficace lorsque l’environnement est principalement composé de bois.
<div class="product-price">5 PC</div>
</div>
</div>
<div class="onglet-product">
<div class="product-image" style="background-image:url('http://www.captainaruto.com/images/techniques/techniques-redigees/bakufuranbu.jpg')"></div>
<div class="product-infobulle">[u]Bakufuu Ranbu no jutsu :[/u] C'est en modifiant l'air que l'utilisateur parviens à créer un résultat étonnant. Cette technique est très difficile à esquiver ou à contrer.
<div class="product-price">5 PC</div>
</div>
</div>
<div class="onglet-product">
<div class="product-image" style="background-image:url('http://www.captainaruto.com/images/techniques/techniques-redigees/katonryuuenhouka.png')"></div>
<div class="product-infobulle">[u]Ryuuen Houka no jutsu :[/u] L'utilisateur envoie des têtes de dragons qui se jettent sur la cible rapidement.
<div class="product-price">7 PC</div>
</div>
</div>
<div class="onglet-product">
<div class="product-image" style="background-image:url('http://www.captainaruto.com/images/techniques/databook/katon/gokamekkyaku.png')"></div>
<div class="product-infobulle">[u]Gouka Mekkyaku no jutsu :[/u] Un gigantesque mur de flammes qui s’abat sur l’adversaire, demande une grande quantité de Chakra.
<div class="product-price">9 PC</div>
</div>
</div>
<div class="onglet-product">
<div class="product-image" style="background-image:url('http://i87.servimg.com/u/f87/11/27/86/43/katons10.jpg')"></div>
<div class="product-infobulle">[u]Karyū Endan no jutsu :[/u] L'utilisateur crache un puissant jet de flammes qui adopte vaguement le profil d'un dragon, plus puissante que Houka no jutsu.
<div class="product-price">10 PC</div>
</div>
</div>
<div class="onglet-product">
<div class="product-image" style="background-image:url('http://i21.servimg.com/u/f21/18/95/57/71/sfsdgs10.jpg')"></div>
<div class="product-infobulle">[u]Haisekishō no jutsu :[/u]  L'utilisateur crache un nuage de cendres ardentes sur l'adversaire, celle-ci offre un effet de surprise efficace.
<div class="product-price">10 PC</div>
</div>
</div>
<div class="onglet-product">
<div class="product-image" style="background-image:url('http://i20.servimg.com/u/f20/11/53/70/46/7133bn10.jpg')"></div>
<div class="product-infobulle">[u]Ikari Hōsenka no Jutsu :[/u] Créé une gigantesque boule de feu ravageant tout sur sont passage.
<div class="product-price">15 PC</div>
</div>
</div>
</div>
</div>
<div class="onglet-page page3">
<div class="onglet-category">Suiton</div>
<div>
<div class="onglet-product">
<div class="product-image" style="background-image:url('http://placehold.it/120x90/ffffff/000000?text=Page+3')"></div>
<div class="product-infobulle">Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet.
<div class="product-price">3 x</div>
</div>
</div>
<div class="onglet-product">
<div class="product-image" style="background-image:url('http://placehold.it/120x90/ffffff/000000?text=Page+3')"></div>
<div class="product-infobulle">Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet.
<div class="product-price">3 x</div>
</div>
</div>
<div class="onglet-product">
<div class="product-image" style="background-image:url('http://placehold.it/120x90/ffffff/000000?text=Page+3')"></div>
<div class="product-infobulle">Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet.
<div class="product-price">3 x</div>
</div>
</div>
<div class="onglet-product">
<div class="product-image" style="background-image:url('http://placehold.it/120x90/ffffff/000000?text=Page+3')"></div>
<div class="product-infobulle">Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet.
<div class="product-price">3 x</div>
</div>
</div>
<div class="onglet-product">
<div class="product-image" style="background-image:url('http://placehold.it/120x90/ffffff/000000?text=Page+3')"></div>
<div class="product-infobulle">Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet.
<div class="product-price">3 x</div>
</div>
</div>
<div class="onglet-product">
<div class="product-image" style="background-image:url('http://placehold.it/120x90/ffffff/000000?text=Page+3')"></div>
<div class="product-infobulle">Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet.
<div class="product-price">3 x</div>
</div>
</div>
<div class="onglet-product">
<div class="product-image" style="background-image:url('http://placehold.it/120x90/ffffff/000000?text=Page+3')"></div>
<div class="product-infobulle">Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet.
<div class="product-price">3 x</div>
</div>
</div>
</div>
</div>
<div class="onglet-pages">
<label for="onglet1-page1">1</label> /
<label for="onglet1-page2">2</label> /
<label for="onglet1-page3">3</label>
</div>
</div>
<!-- fermeture onglet -->

<div class="onglet onglet2">
<div class="onglet-title">Spécialités</div>
<input type="radio" id="onglet2-page1" name="onglet2" checked="checked" />
<input type="radio" id="onglet2-page2" name="onglet2">
<input type="radio" id="onglet2-page3" name="onglet2">
<div class="onglet-page page1">
<div class="onglet-category">Taïjutsu</div>
<div>
<div class="onglet-product">
<div class="product-image" style="background-image:url('http://placehold.it/120x90/990100/FFFFFF?text=Page+1')"></div>
<div class="product-infobulle">Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet.
<div class="product-price">3 x</div>
</div>
</div>
<div class="onglet-product">
<div class="product-image" style="background-image:url('http://placehold.it/120x90/990100/FFFFFF?text=Page+1')"></div>
<div class="product-infobulle">Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet.
<div class="product-price">3 x</div>
</div>
</div>
<div class="onglet-product">
<div class="product-image" style="background-image:url('http://placehold.it/120x90/990100/FFFFFF?text=Page+1')"></div>
<div class="product-infobulle">Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet.
<div class="product-price">3 x</div>
</div>
</div>
<div class="onglet-product">
<div class="product-image" style="background-image:url('http://placehold.it/120x90/990100/FFFFFF?text=Page+1')"></div>
<div class="product-infobulle">Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet.
<div class="product-price">3 x</div>
</div>
</div>
<div class="onglet-product">
<div class="product-image" style="background-image:url('http://placehold.it/120x90/990100/FFFFFF?text=Page+1')"></div>
<div class="product-infobulle">Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet.
<div class="product-price">3 x</div>
</div>
</div>
<div class="onglet-product">
<div class="product-image" style="background-image:url('http://placehold.it/120x90/990100/FFFFFF?text=Page+1')"></div>
<div class="product-infobulle">Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet.
<div class="product-price">3 x</div>
</div>
</div>
<div class="onglet-product">
<div class="product-image" style="background-image:url('http://placehold.it/120x90/990100/FFFFFF?text=Page+1')"></div>
<div class="product-infobulle">Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet.
<div class="product-price">3 x</div>
</div>
</div>
<div class="onglet-product">
<div class="product-image" style="background-image:url('http://placehold.it/120x90/990100/FFFFFF?text=Page+1')"></div>
<div class="product-infobulle">Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet.
<div class="product-price">3 x</div>
</div>
</div>
<div class="onglet-product">
<div class="product-image" style="background-image:url('http://placehold.it/120x90/990100/FFFFFF?text=Page+1')"></div>
<div class="product-infobulle">Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet.
<div class="product-price">3 x</div>
</div>
</div>
</div>
</div>
<div class="onglet-page page2">
<div class="onglet-category">Ninjutsu</div>
<div>
<div class="onglet-product">
<div class="product-image" style="background-image:url('http://placehold.it/120x90/990100/FFFFFF?text=Page+2')"></div>
<div class="product-infobulle">Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet.
<div class="product-price">3 x</div>
</div>
</div>
<div class="onglet-product">
<div class="product-image" style="background-image:url('http://placehold.it/120x90/990100/FFFFFF?text=Page+2')"></div>
<div class="product-infobulle">Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet.
<div class="product-price">3 x</div>
</div>
</div>
<div class="onglet-product">
<div class="product-image" style="background-image:url('http://placehold.it/120x90/990100/FFFFFF?text=Page+2')"></div>
<div class="product-infobulle">Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet.
<div class="product-price">3 x</div>
</div>
</div>
<div class="onglet-product">
<div class="product-image" style="background-image:url('http://placehold.it/120x90/990100/FFFFFF?text=Page+2')"></div>
<div class="product-infobulle">Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet.
<div class="product-price">3 x</div>
</div>
</div>
<div class="onglet-product">
<div class="product-image" style="background-image:url('http://placehold.it/120x90/990100/FFFFFF?text=Page+2')"></div>
<div class="product-infobulle">Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet.
<div class="product-price">3 x</div>
</div>
</div>
<div class="onglet-product">
<div class="product-image" style="background-image:url('http://placehold.it/120x90/990100/FFFFFF?text=Page+2')"></div>
<div class="product-infobulle">Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet.
<div class="product-price">3 x</div>
</div>
</div>
<div class="onglet-product">
<div class="product-image" style="background-image:url('http://placehold.it/120x90/990100/FFFFFF?text=Page+2')"></div>
<div class="product-infobulle">Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet.
<div class="product-price">3 x</div>
</div>
</div>
<div class="onglet-product">
<div class="product-image" style="background-image:url('http://placehold.it/120x90/990100/FFFFFF?text=Page+2')"></div>
<div class="product-infobulle">Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet.
<div class="product-price">3 x</div>
</div>
</div>
<div class="onglet-product">
<div class="product-image" style="background-image:url('http://placehold.it/120x90/990100/FFFFFF?text=Page+2')"></div>
<div class="product-infobulle">Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet.
<div class="product-price">3 x</div>
</div>
</div>
</div>
</div>
<div class="onglet-page page3">
<div class="onglet-category">Genjutsu</div>
<div>
<div class="onglet-product">
<div class="product-image" style="background-image:url('http://placehold.it/120x90/990100/FFFFFF?text=Page+3')"></div>
<div class="product-infobulle">Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet.
<div class="product-price">3 x</div>
</div>
</div>
<div class="onglet-product">
<div class="product-image" style="background-image:url('http://placehold.it/120x90/990100/FFFFFF?text=Page+3')"></div>
<div class="product-infobulle">Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet.
<div class="product-price">3 x</div>
</div>
</div>
<div class="onglet-product">
<div class="product-image" style="background-image:url('http://placehold.it/120x90/990100/FFFFFF?text=Page+3')"></div>
<div class="product-infobulle">Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet.
<div class="product-price">3 x</div>
</div>
</div>
<div class="onglet-product">
<div class="product-image" style="background-image:url('http://placehold.it/120x90/990100/FFFFFF?text=Page+3')"></div>
<div class="product-infobulle">Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet.
<div class="product-price">3 x</div>
</div>
</div>
<div class="onglet-product">
<div class="product-image" style="background-image:url('http://placehold.it/120x90/990100/FFFFFF?text=Page+3')"></div>
<div class="product-infobulle">Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet.
<div class="product-price">3 x</div>
</div>
</div>
<div class="onglet-product">
<div class="product-image" style="background-image:url('http://placehold.it/120x90/990100/FFFFFF?text=Page+3')"></div>
<div class="product-infobulle">Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet.
<div class="product-price">3 x</div>
</div>
</div>
<div class="onglet-product">
<div class="product-image" style="background-image:url('http://placehold.it/120x90/990100/FFFFFF?text=Page+3')"></div>
<div class="product-infobulle">Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet.
<div class="product-price">3 x</div>
</div>
</div>
</div>
</div>
<div class="onglet-pages">
<label for="onglet2-page1">1</label> /
<label for="onglet2-page2">2</label> /
<label for="onglet2-page3">3</label>
</div>
</div>
<!-- fermeture onglet -->

<div class="onglet onglet3">
<div class="onglet-title">Objets</div>
<input type="radio" id="onglet3-page1" name="onglet3" checked="checked" />
<input type="radio" id="onglet3-page2" name="onglet3">
<input type="radio" id="onglet3-page3" name="onglet3">
<div class="onglet-page page1">
<div class="onglet-category">Armes</div>
<div>
<div class="onglet-product">
<div class="product-image" style="background-image:url('http://placehold.it/120x90/333333/FFFFFF?text=Page+1')"></div>
<div class="product-infobulle">Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet.
<div class="product-price">3 x</div>
</div>
</div>
<div class="onglet-product">
<div class="product-image" style="background-image:url('http://placehold.it/120x90/333333/FFFFFF?text=Page+1')"></div>
<div class="product-infobulle">Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet.
<div class="product-price">3 x</div>
</div>
</div>
<div class="onglet-product">
<div class="product-image" style="background-image:url('http://placehold.it/120x90/333333/FFFFFF?text=Page+1')"></div>
<div class="product-infobulle">Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet.
<div class="product-price">3 x</div>
</div>
</div>
<div class="onglet-product">
<div class="product-image" style="background-image:url('http://placehold.it/120x90/333333/FFFFFF?text=Page+1')"></div>
<div class="product-infobulle">Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet.
<div class="product-price">3 x</div>
</div>
</div>
<div class="onglet-product">
<div class="product-image" style="background-image:url('http://placehold.it/120x90/333333/FFFFFF?text=Page+1')"></div>
<div class="product-infobulle">Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet.
<div class="product-price">3 x</div>
</div>
</div>
<div class="onglet-product">
<div class="product-image" style="background-image:url('http://placehold.it/120x90/333333/FFFFFF?text=Page+1')"></div>
<div class="product-infobulle">Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet.
<div class="product-price">3 x</div>
</div>
</div>
<div class="onglet-product">
<div class="product-image" style="background-image:url('http://placehold.it/120x90/333333/FFFFFF?text=Page+1')"></div>
<div class="product-infobulle">Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet.
<div class="product-price">3 x</div>
</div>
</div>
<div class="onglet-product">
<div class="product-image" style="background-image:url('http://placehold.it/120x90/333333/FFFFFF?text=Page+1')"></div>
<div class="product-infobulle">Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet.
<div class="product-price">3 x</div>
</div>
</div>
<div class="onglet-product">
<div class="product-image" style="background-image:url('http://placehold.it/120x90/333333/FFFFFF?text=Page+1')"></div>
<div class="product-infobulle">Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet.
<div class="product-price">3 x</div>
</div>
</div>
</div>
</div>
<div class="onglet-page page2">
<div class="onglet-category">Bentôs</div>
<div>
<div class="onglet-product">
<div class="product-image" style="background-image:url('http://placehold.it/120x90/333333/FFFFFF?text=Page+2')"></div>
<div class="product-infobulle">Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet.
<div class="product-price">3 x</div>
</div>
</div>
<div class="onglet-product">
<div class="product-image" style="background-image:url('http://placehold.it/120x90/333333/FFFFFF?text=Page+2')"></div>
<div class="product-infobulle">Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet.
<div class="product-price">3 x</div>
</div>
</div>
<div class="onglet-product">
<div class="product-image" style="background-image:url('http://placehold.it/120x90/333333/FFFFFF?text=Page+2')"></div>
<div class="product-infobulle">Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet.
<div class="product-price">3 x</div>
</div>
</div>
<div class="onglet-product">
<div class="product-image" style="background-image:url('http://placehold.it/120x90/333333/FFFFFF?text=Page+2')"></div>
<div class="product-infobulle">Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet.
<div class="product-price">3 x</div>
</div>
</div>
<div class="onglet-product">
<div class="product-image" style="background-image:url('http://placehold.it/120x90/333333/FFFFFF?text=Page+2')"></div>
<div class="product-infobulle">Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet.
<div class="product-price">3 x</div>
</div>
</div>
<div class="onglet-product">
<div class="product-image" style="background-image:url('http://placehold.it/120x90/333333/FFFFFF?text=Page+2')"></div>
<div class="product-infobulle">Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet.
<div class="product-price">3 x</div>
</div>
</div>
</div>
</div>
<div class="onglet-page page3">
<div class="onglet-category">Base</div>
<div>
<div class="onglet-product">
<div class="product-image" style="background-image:url('http://placehold.it/120x90/333333/FFFFFF?text=Page+3')"></div>
<div class="product-infobulle">Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet.
<div class="product-price">3 x</div>
</div>
</div>
<div class="onglet-product">
<div class="product-image" style="background-image:url('http://placehold.it/120x90/333333/FFFFFF?text=Page+3')"></div>
<div class="product-infobulle">Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet.
<div class="product-price">3 x</div>
</div>
</div>
<div class="onglet-product">
<div class="product-image" style="background-image:url('http://placehold.it/120x90/333333/FFFFFF?text=Page+3')"></div>
<div class="product-infobulle">Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet.
<div class="product-price">3 x</div>
</div>
</div>
<div class="onglet-product">
<div class="product-image" style="background-image:url('http://placehold.it/120x90/333333/FFFFFF?text=Page+3')"></div>
<div class="product-infobulle">Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet.
<div class="product-price">3 x</div>
</div>
</div>
<div class="onglet-product">
<div class="product-image" style="background-image:url('http://placehold.it/120x90/333333/FFFFFF?text=Page+3')"></div>
<div class="product-infobulle">Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet.
<div class="product-price">3 x</div>
</div>
</div>
<div class="onglet-product">
<div class="product-image" style="background-image:url('http://placehold.it/120x90/333333/FFFFFF?text=Page+3')"></div>
<div class="product-infobulle">Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet.
<div class="product-price">3 x</div>
</div>
</div>
<div class="onglet-product">
<div class="product-image" style="background-image:url('http://placehold.it/120x90/333333/FFFFFF?text=Page+3')"></div>
<div class="product-infobulle">Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet.
<div class="product-price">3 x</div>
</div>
</div>
</div>
</div>
<div class="onglet-pages">
<label for="onglet3-page1">1</label> /
<label for="onglet3-page2">2</label> /
<label for="onglet3-page3">3</label>
</div>
</div>

</div>
<!-- fermeture onglet -->
<a href="http://www.never-utopia.com/" target="_blank" class="f-nu-credit" title="Visiter le forum Never Utopia">❤ <span class="f-nu-credit-texte">Fait avec amour par Never Utopia</span></a>

</div>

Merci pour tout ton travail!

Coucou!!

Tu es toujours là?

Bonjour/Bonsoir

J'ai compris l'intégralité du code je suis capable de modifier ce dont j'ai besoin (pages, titres etc...)
Alors je pense que l'on peut considérer cette demande comme aboutie.

Scar, merci beaucoup pour ton aide si précieuse! Je te le revaudrait un jour!!

Désolée pour le temps pour répondre à chaque fois T____T

Surtout en cas de problème, n'hésite pas à revenir vers moi