Hello les tacos ! Ça va bien j'espère ! Aujourd'hui on se retrouve pour un tutoriel un peu spécial puisqu'il s'agit en fait d'une sorte de mini TD ! En effet, après concertation avec moi-même (j'adore vraiment dire ça !) et certains membres de la CB, j'ai décidé de vous montrer pas à pas comment je réalisais le code d'un élément de forum. Aujourd'hui, on s'attaque à une PA ! Deux choix s'offrent à vous maintenant : Vous avez un design précis pour votre PA et vous voulez le coder ou bien vous vous servez du PSD que j'ai donné au-dessus. Je tiens à préciser que cette PA a été réalisée spécialement pour ce tutoriel, certains éléments auraient pu être améliorés (et auraient dus) mais cela aurait complexifié le code.
Autre précision : je vais faire en sorte d'expliciter au maximum mes propos et pensées. Mon but est de permettre à n'importe qui, débutant ou curieux, de comprendre mon processus et ainsi permettre aux plus débutants de se lancer dans la merveilleuse aventure qu'est le fait de coder soi-même !
Si jamais vous avez une quelconque remarque ou un quelconque problème, n'hésitez pas à m'en faire part à la suite ou par MP !
Fini le bla-bla ! On attaque ! (Par pur esprit de partage, j'ai décidé d'ouvrir le tutoriel à n'importe qui, sans condition mais un merci est toujours apprécié !
0 - La préparation
On va tout d'abord commencer par le commencement ! J'aime travailler dans un fichier à part pour voir si le code seul fonctionne avant de le mettre sur un forum et debug si j'en ai besoin. Donc on va commencer par télécharger un éditeur de texte. J'alterne généralement entre 3 éditeurs. Brackets, Sublime Text et Atom. (Lien de téléchargements donnés sur les noms !)
- Pourquoi ces éditeurs ? (Sous spoiler):
Brackets est mon éditeur principal mais il est un peu lourd pour travailler sur un seul fichier. Je l'utilise souvent pour les projet un peu plus gros. Sublime Text est léger et très apprécié, il y a un grand nombre de plugins et skin mais il faut le crack pour ne pas avoir toutes les 10 saves un message promotionnel. Atom est très pratique, beau et léger. C'est généralement celui que j'utilise pour les codes sur ForumActif.
Ici, tout mon code est réalisé sur Atom. C'est donc de ce dernier que vous verrez l'interface. J'utilise le thème One Dark (fourni de base il me semble). Ne vous inquiétez pas si votre Atom ne ressemble pas totalement au mien, j'ai installé un certains nombres de plugins pour m'aider à aller plus vite:D
Donc, une fois que l'on a installé notre éditeur de texte, on va se créer un dossier dans lequel on va travailler ! Nommez-le comme vous le désirez. On va ouvrir Atom (ou n'importe lequel des éditeur de texte) et faire Fichier/File > Ouvrir le dossier/Open Folder et l'on va choisir notre dossier ! De ce fait, sur la gauche, on obtient ça :
Notre dossier est actuellement vide. On va créer dedans un sous dossier "css" et à partir de là, on va démarrer ! Donc, on va créer 2 fichiers : le fichier index.html dans notre dossier PA directement et le fichier main.css dans le dossier css. C'est une habitude à prendre de bien ranger les fichiers. Ça permet de retrouver plus rapidement où l'on doit travailler !
On va mettre en place le doctype dans notre index.html. Je vous passe les détails, ça permet de dire au navigateur « Ça, c'est du HTML. Donc va falloir l'interpréter ! ». Je vous donne directement le code pour vous simplifier la tâche :
- Code:
-
<!DOCTYPE html>
<html lang="fr-FR">
<head>
<meta charset="UTF-8">
<title>Ma sublime P.A.</title>
</head>
<body>
</body>
</html>
À partir de maintenant, vous pouvez ouvrir votre fichier index.html avec votre navigateur mais vous ne devriez rien voir dessus (à part le titre en haut qui change). On va maintenant lier le css et le html. Pour ça rien de plus simple, on va utiliser une balise link. La balise link va faire un lien avec un autre fichier. On défini que c'est un css en mettant en place une relation de type stylesheet. Tout ce charabia complexe, ça veut dire au navigateur « Tu vois le fichier là-bas ? C'est mon styliste attitré. C'est lui qui va te dire à quoi je ressemble. ». La ligne pour faire ça :
- Code:
-
<link rel="stylesheet" href="css/main.css">
On colle cette ligne juste après le title, entre les deux balises head. Pour faire court (et très schématisé) le head (la tête du HTML) contient les informations non affichées dont va se servir le navigateur pour comprendre votre fichier. Le body (corps donc) contient le contenu qui sera affiché par le navigateur (attention, c'est vraiment très schématisé là!). Le code entier de notre fichier index.html ressemble donc à
- Code:
-
<!DOCTYPE html>
<html lang="fr-FR">
<head>
<meta charset="UTF-8">
<title>Ma sublime P.A.</title>
<link rel="stylesheet" href="css/main.css">
</head>
<body>
</body>
</html>
Maintenant, juste petite vérification : on va ajouter une couleur bien cradoss au body pour voir si le fichier html est bien lié ! Si c'est le cas, le corps de notre HTML sera vraiment moche. Mais au moins, on sera assuré d'avoir fait un bon boulot ! Dans mon main.css, je colore donc le body !
- Code:
-
body {
background-color: magenta;
}
On ouvre ou recharge la page index.html, dépend de si vous l'avez ouverte ou pas et on regarde le résultat.
- Spoiler:
Si vous avez un truc bien flashy, c'est que tout va bien. Sinon, revérifier que votre dossier sur la gauche ressemble bien à ça :
OK, on a fini la phase de préparation de nos fichiers de travail. On va s'attaquer à la phase où il faut réfléchir à la structure que l'on va donner à notre HTML et CSS pour avoir notre PA. En gros, c'est la partie que l'on va passer sur Photoshop (ou n'importe quel logiciel de traitement d'image hein, même paint pourrait faire l'affaire).
1 - Réflexion pré-code
Je vais vous montrer la réalisation de cette partie sur photoshop. Sachez qu'elle peut être réalisée sur n'importe quel logiciel de retouche ou traitement d'image. Une fois habitués, vous réaliserez cela même sans logiciel, juste avec vos magnifiques yeux de codeur.
Le principal intérêt de cette partie est de prévoir ce que l'on va réaliser pour éviter d'avoir un trop gros nombre de moments où l'on ne comprend pas ce que l'on fait, ces moments que tout le monde a croisé et s'est dit « Je pige pas. Les codeurs sont magiciens en fait. »
En fait, on va découper notre image en gros blocs puis en plus petits blocs. Tout le code est basé sur ça : des blocs dans des blocs (grossièrement hein, je simplifie !). Donc on va prendre notre petit PSD (l'image suffirait limite !) et on va couper ! (Pas au sens propre, on va tracer des lignes imaginaires pour séparer en blocs!)
La PA que j'ai fournie est assez simple, j'ai fait exprès de rester sur un design carré. Parfois, vous aurez des réalisations plus complexes mais garder en tête qu'il ne s'agit que de blocs ! Le placement se fera ensuite !
En regardant la PA, on voit d'abord 3 parties émergées : Le titre, la partie gauche et la partie droite. Donc on va tracer nos traits !
La réalité est presque identique. Vous vous rappelez, je vous ai dit des blocs dans des blocs ? Et bien en fait ici, il y a un plus gros blocs que l'on peut voir ! Personne ? Mais oui ! On va d'abord commencer par collé les 2 blocs du bas !
La vraie séparation est donc :
Voilà pourquoi il faut bien penser ses blocs avant de se lancer dans le code ! Grâce à ça, on voit que sans ce travail préliminaire, on serait parti trop rapidement et on aurait pu se tromper. ATTENTION, je ne dis pas qu'avec la méthode en 3 séparations directes, vous n'auriez pas réussi à faire la PA. Simplement, je préfère généralement prévoir toute éventualité et donc mettre trop de balise que pas assez.
On continue ? On voit les 2 blocs se profiler puis chacun des blocs est autonome ensuite ! Ce qui donne :
Vous aviez tout trouvé ? Très bien ! Vous vous étiez trompé ? Ce n'est pas grave ! On apprend bien mieux des erreurs ! Et surtout, on a notre structure bien pensée là ! On va commencer par faire fonctionner ces systèmes là avant de se lancer dans une réflexion plus précise et poussée ! (Il est 1h30 du matin, je commence à écrire n'importe comment non? Il me faut un correcteur !)
Au passage, est-ce que quelqu'un a remarqué l'erreur ? Personne ? Et oui, il faut aussi un bloc tout autour de la PA ! Au final, le schéma est :
2 - Premier prototype codé
On va revenir vers la partie qui fait peur : Atom ! Pas de panique, je suis là pour vous guider pas à pas ! Si jamais vous bloquez, n'hésitez pas à me demander hein ! (Vous pensez qu'après ça, je pourrais demander à ce que l'on ouvre des classes pour donner des cours de code ? XD). Enfin bref, on ouvre Atom (ou son éditeur préféré!). On va commencer par retirer ce magenta du fond ! Je propose un #e0e0e0, d'accord ? (C'est le gris du fond quoi). On ouvre donc main.css et on change magenta en #e0e0e0.
D'un coup ça va mieux non ? Je pense bien ! Maintenant, on va commencer par le gros blocs cyan ! On regarde, l'image fait 600px de large. Je vais donc faire un bloc de 600px de large ! On va ensuite le centrer et on va l'afficher en cyan pour voir s'il est bien là !
Dans index.html, je crée mon premier bloc. Ce sera une div (une div est un bloc neutre, elle n'a pas d'utilité propre si ce n'est être un bloc et regroupé les autres éléments dedans!) que je vais nommée PA-container. Je crée donc ma div avec la class PA-container (je n'utilise que des classes, plus léger au chargement et plus c'est plus beau à écrire !:troll : )
Je lui mets un contenu pour qu'il apparaisse bien sûr (sinon, le bloc n'a pas de hauteur. Quelque chose de 0px ne se voit pas!). Voici donc mon index.html :
- Code:
-
<!DOCTYPE html>
<html lang="fr-FR">
<head>
<meta charset="UTF-8">
<title>Ma sublime P.A.</title>
<link rel="stylesheet" href="css/main.css">
</head>
<body>
<div class="PA-container">
Mon gros bloc cyan !
</div>
</body>
</html>
Puis on va modifier le CSS. On a dit largeur de 600px, une couleur de fond cyan et qui définit l'espace à gauche et à droite automatiquement pour se centrer, c'est ça ? Et bien on traduit littéralement ça en anglais ! L'espace laissé sur les côtés de la feuille pour écrire, c'est une marge non ? On va mettre des espaces automatiques. Margin : auto ; Et on continue sur cette lancée ! Une couleur de fond cyan ? Background-color:cyan ; Et pour finir largeur = 600px se traduit en width:600px ; Ce qui donne :
- Code:
-
body {
background-color: #e0e0e0; /*/ Fond du body en gris */
}
.PA-container {
width: 600px; /* Ma largeur de 600px */
margin: auto; /* Ici on dit au navigateur "Débrouile toi, mais le conainer va trouver ses écart tout seul et se centrer"*/
background: cyan; /* Un background moche pour bien le voir ! */
}
On arrive à ça comme résultat :
- Spoiler:
C'est moche mais au moins, on sait que ça marche ! Et avec ça, on a notre bloc principal ! Pas trop compliqué non ? On va donc s'attaquer aux deux violets ! Ici, pas de réels problèmes je pense, on a ni à définir leurs largeurs, ni leurs hauteurs. En effet, leurs hauteurs respectives vont dépendre du contenu !
On crée donc deux div qui partageront la même classe ! Même visage = même classe. Facile non ?Le seul but ? Les rendre violette ! (Oui, je vais remettre du magenta moche). On peut enlever le texte du bloc cyan, il ne sert plus à rien. Le code complet :
index.html - Code:
-
<!DOCTYPE html>
<html lang="fr-FR">
<head>
<meta charset="UTF-8">
<title>Ma sublime P.A.</title>
<link rel="stylesheet" href="css/main.css">
</head>
<body>
<div class="PA-container">
<div class="half-top">Je suis magenta</div>
<div class="half-top">Moi aussi, je suis moche</div>
</div>
</body>
</html>
main.css - Code:
-
body {
background-color: #e0e0e0; /*/ Fond du body en gris */
}
.PA-container {
width: 600px; /* Ma largeur de 600px */
margin: auto; /* Ici on dit au navigateur "Débrouile toi, mais le container va trouver ses écart tout seul et se centrer"*/
background: cyan; /* Un background moche pour bien le voir ! */
}
.half-top {
background: magenta; /* Bouhou, caca pas beau ! */
}
On va maintenant s'attaquer aux deux blocs rouges! Notre but, c'est de les faire mettre côte à côte. Pour ça, on va utiliser une petite propriété css qui s'appelle le float. En gros, cette propriété css dit « les éléments qui ont un float vont flotter vers la zone indiquée tant qu'il reste dans son conteneur. Donc, si je dit à un élément qu'il a un float:left ; il va se coller automatiquement vers le plus à gauche possible (en gardant en tête qu'ils tentent automatiquement de se mettre le plus haut possible). Pour vous aider, imaginer simplement des bateaux. Si on les pose sur un sol, sans instructions l'un derrière l'autre (comme tout block HTML donc), ils y restent. Si maintenant, je les mets sur l'eau avec pour instructions « allez vers le plus à gauche possible », s'il y a de la place, ils se mettront côte à côte. On crée nos deux blocs qui vont représenter nos colonnes et on va leur dire de flotter sur la gauche !
Le code :
- Code:
-
<!DOCTYPE html>
<html lang="fr-FR">
<head>
<meta charset="UTF-8">
<title>Ma sublime P.A.</title>
<link rel="stylesheet" href="css/main.css">
</head>
<body>
<div class="PA-container">
<div class="half-top">Je suis magenta et j'aurais un titre !</div>
<div class="half-top">
<div class="column">Je suis un bloc rouge !</div>
<div class="column">Je suis un bloc rouge !</div>
</div>
</div>
</body>
</html>
- Code:
-
body {
background-color: #e0e0e0; /*/ Fond du body en gris */
}
.PA-container {
width: 600px; /* Ma largeur de 600px */
margin: auto; /* Ici on dit au navigateur "Débrouile toi, mais le conainer va trouver ses écart tout seul et se centrer"*/
background: cyan; /* Un background moche pour bien le voir ! */
}
.half-top {
background: magenta; /* Bouhou, caca pas beau ! */
}
.column {
background: red; /* Blocs rouges non ? */
float: left; /* Allez le plus à gauche tas de fainéants !*/
}
Oui, j'ai créer les deux blocs rouges avec la même classe. En même temps, rappelez-vous au dessus, j'ai dit « même tête = même classe ». Et bah je n'ai fait qu'appliquer cela. Bien, si tout s'est bien passé, vous arrivez à un truc comme ça :
- Spoiler:
Bon, on va commencer à entrer dans les détails, voulez-vous bien ? On va jeter un coup d'oeil aux typographies ! Pour la PA, j'utilise du source sans pro light et du oswald light et regular. Ce sont toutes les deux des fonts de google. Ainsi, c'est bien plus simple pour les intégrer ! Si besoin, je vous montrerais comment les récupérer. En attendant, je vous donne la ligne à ajouter entre les balises head (rappel : entre le head = non apparent et utiliser par le navigateur!)
- Code:
-
<link href='http://fonts.googleapis.com/css?family=Source+Sans+Pro:300|Oswald:400,300' rel='stylesheet' type='text/css'>
On défini que Source Sans Pro est la typo principale dans la PA en la désignant comme font sur notre gros container de base (le cyan)
- Code:
-
font: 300 14px 'Source Sans Pro'; /* Font principale 300 = light, 16px = taille, puis la typo*/
Là, on va s'attaquer au message d'en-tête ! On pourrait utiliser un titre, simplement, son contenu ne correspond à un titre à mes yeux, je vais donc utiliser un texte simple ! Donc, texte = p (en balise) et on va le styliser !
Ce p va être utilisé en 18px avec du oswald. On remarque aussi qu'il est centré et qu'il y a un écart de 20px en haut et en bas. Ici, deux écoles s'affrontent, marge extérieure (margin) ou marge intérieure (padding). Je suis partisan du padding, il a tendance à créer moins de problème (à mes yeux!). Pour finir, le nom de l'utilisateur est en oswald regular (normal). On va utiliser une balise pour symboliser que cette zone de texte à une importance plus forte que le reste ! La balise strong ! Donc, on écrit notre p dans la première case magenta (ne pas oublier de nommer le p pour le distinguer !) :
- Code:
-
<p class="PA-header">Que comptes-tu faire aujourd'hui <strong>KolonelReyel</strong> ?</p>
Puis on le stylise :
- Code:
-
.PA-header {
font: 300 18px 'Oswald'; /* font du header */
text-align: center; /* On centre le texte */
text-transform: uppercase; /* On dit au texte de se mettre entièrement en majuscule */
margin: 0; /* On annule toute marge extérieure car on va utiliser les marges intérieures */
padding: 20px 0; /* Marge intérieure. Premier chiffre = haut et bas, second = droite et gauche */
}
Et on en a fini avec la case magenta du dessus ! Le code complet ressemble à :
index.html - Code:
-
<!DOCTYPE html>
<html lang="fr-FR">
<head>
<meta charset="UTF-8">
<title>Ma sublime P.A.</title>
<link href='http://fonts.googleapis.com/css?family=Source+Sans+Pro:300|Oswald:400,300' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="css/main.css">
</head>
<body>
<div class="PA-container">
<div class="half-top">
<p class="PA-header">Que comptes-tu faire aujourd'hui <strong>KolonelReyel</strong> ?</p>
</div>
<div class="half-top">
<div class="column">Je suis un bloc rouge !</div>
<div class="column">Je suis un bloc rouge !</div>
</div>
</div>
</body>
</html>
main.css - Code:
-
body {
background-color: #e0e0e0; /*/ Fond du body en gris */
}
.PA-container {
width: 600px; /* Ma largeur de 600px */
margin: auto; /* Ici on dit au navigateur "Débrouile toi, mais le conainer va trouver ses écart tout seul et se centrer"*/
background: cyan; /* Un background moche pour bien le voir ! */
font: 300 14px 'Source Sans Pro'; /* Font principale 300 = light, 16px = taille, puis la typo*/
}
.half-top {
background: magenta; /* Bouhou, caca pas beau ! */
}
.column {
background: red; /* Blocs rouges non ? */
float: left; /* Allez le plus à gauche tas de fainéants !*/
}
.PA-header {
font: 300 18px 'Oswald'; /* font du header */
text-align: center; /* On centre le texte */
text-transform: uppercase; /* On dit au texte de se mettre entièrement en majuscule */
margin: 0; /* On annule toute marge extérieure car on va utiliser les marges intérieures */
padding: 20px 0; /* Marge intérieure. Premier chiffre = haut et bas, second = droite et gauche */
}
On attaque celle en dessous ? Pour ça, il va falloir donner le visage que l'on veut aux deux cases rouges. Sur ce point, les deux cases rouges diffèrent. L'une est plus large que l'autre. On va donc dire à chacune de ces cases rouges « Ok, t'es une case rouge (column) mais t'es aussi différente ! ». Ici, plusieurs méthodes encore. Personnellement, je trouve ça plus simple d'ajouter une class, mais certains parleront de nth-type-of ou nth-child. Vous qui débutez, nous allons juste ajouter un nommage. En gros, c'est comme dire « Lui, c'est un fromage mais c'est aussi du gouda. L'autre c'est un formage mais c'est aussi de l'emmental » (Oui, pas meilleur exemple en tête!). Donc, on prend nos deux column et on ajoute à chacun une autre class. Pour ça, on va dans class="" et on sépare chacune d'un espace. On a donc :
- Code:
-
<div class="half-top">
<div class="column first-column">Je suis un bloc rouge !</div>
<div class="column second-column">Je suis un bloc rouge !</div>
</div>
Et on va les styliser séparément ! Donc, on a une box qui fait 20 px sur la gauche + 290px de blanc. L'autre fait 20px sur la gauche + 250px + 20px sur la droite. On y va donc ?
- Code:
-
.first-column {
padding-left: 20px; /* Ecart à gauche*/
width: 290px; /* Largeur */
}
.second-column {
padding: 0 20px; /* Ecart à gauche et à droite identique */
width: 250px; /* Largeur */
}
Pour les plus avancés : Je n'aurais pas réalisé comme cela en temps normal. C'est juste que ce tuto cherche à être accessible à tous et donc je vais au plus simple. Ma méthode se trouve en spoiler juste après !
- Méthode plus avancée:
Mettre un padding de 10 px sur PA-container ou le second half-top. Ainsi, il reste juste à mettre un autre padding de 10px sur les columns.
Ici, on a donc les 2 blocs rouges qui, collés ensemble, prennent toutes la largeur.
Petit aparté : Pour ceux qui se demandent ce que ça change entre padding (intérieure) et margin (extérieure), voici la version en margin :
On voit donc que les padding entrent en jeu dans la largeur d'un bloc mais pas les margin. C'est à retenir!(Gardez ça dans un petit coin de votre tête et repensez-y la prochaine fois que vous aurez un problème).
Par contre, vous ne trouvez pas ça bizarre ? La box magenta derrière les rouges n'est plus là ! On s'attendrait pourtant à la voir dans les zones transparente non ? Bah, c'est vrai non ? On a bien mis nos box rouges dans une box magenta ! Et sur la case du dessus, le fond est toujours là ! Alors, pourquoi est-ce qu'il disparaît ? Les amis, cet effet est dû au float !
En effet, on a indiqué avec ça que les box allaient le plus à gauche possible. Imaginons la succession de box comme une file indienne devant une caisse. Le float les fait aller le plus à gauche possible. Et par cette action, elles sortent de la file (on parle de sortir du flux). Et normalement, tout block derrière aurait pris la place ! Sauf qu'il n'y en a aucun ici donc le caissier pense qu'il n'y a personne pour lui.
Pour régler ce problème, on va utiliser un clearfix. En gros, on va créer un vigile qui va dire à toute personne derrière « Ces deux-là font la queue, tu doubles pas ! » Le caissier voyant ça va comprendre et les considérer !
En html/css, ça donne ça :
Le vigile (Grrr, pas doublé !) : - Code:
-
<div class="clearfix"></div>
Son badge de vigile : - Code:
-
.clearfix {
clear: both; /* Le vigile ! */
}
On retire le rouge des box pour bien voir et là Boom shakalaka ! (J'adore dire ça!)
On a traité une grosse partie là ! Et on est vraiment loin du résultat non ? Pour l'instant, nos codes ressemblent à ça :
index.html - Code:
-
<!DOCTYPE html>
<html lang="fr-FR">
<head>
<meta charset="UTF-8">
<title>Ma sublime P.A.</title>
<link href='http://fonts.googleapis.com/css?family=Source+Sans+Pro:300|Oswald:400,300' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="css/main.css">
</head>
<body>
<div class="PA-container">
<div class="half-top">
<p class="PA-header">Que comptes-tu faire aujourd'hui <strong>KolonelReyel</strong> ?</p>
</div>
<div class="half-top">
<div class="column first-column">Je suis un bloc rouge !</div>
<div class="column second-column">Je suis un bloc rouge !</div>
<div class="clearfix"></div>
</div>
</div>
</body>
</html>
main.css - Code:
-
body {
background-color: #e0e0e0; /*/ Fond du body en gris */
}
.clearfix {
clear:both; /* Le vigile ! */
}
.PA-container {
width: 600px; /* Ma largeur de 600px */
margin: auto; /* Ici on dit au navigateur "Débrouile toi, mais le container va trouver ses écart tout seul et se centrer"*/
background: cyan; /* Un background moche pour bien le voir ! */
font: 300 14px 'Source Sans Pro'; /* Font principale 300 = light, 16px = taille, puis la typo*/
}
.half-top {
background: magenta; /* Bouhou, caca pas beau ! */
}
.column {
float: left; /* Allez le plus à gauche tas de fainéants !*/
}
.PA-header {
font: 300 18px 'Oswald'; /* font du header */
text-align: center; /* On centre le texte */
text-transform: uppercase; /* On dit au texte de se mettre entièrement en majuscule */
margin: 0; /* On annule toute marge extérieure car on va utiliser les marges intérieures */
padding: 20px 0; /* Marge intérieure. Premier chiffre = haut et bas, second = droite et gauche */
}
.first-column {
padding-left: 20px; /* Ecart à gauche*/
width: 290px; /* Largeur */
}
.second-column {
padding: 0 20px; /* Ecart à gauche et à droite identique */
width: 250px; /* Largeur */
}
Je vous donne rendez-vous dans la partie 2 !
Merci et à tout de suite partie 2 !
Accueil 
