Personnaliser le thème Twenty Seventeen

Nous allons relooker le thème gratuit par défaut de WordPress en 2017 : Twenty Seventeen pour qu’il reflète parfaitement ta marque.

Ce que tu vas apprendre dans ce tutoriel :

picto articles débutants

Débutant

picto articles intermediaires

Intermédiaire

 

picto articles débutants

Débutant

Les raisons du choix de Twenty Seventeen

  • Fonctionne parfaitement sur tous les supports : ordinateur, mobile et tablette
  • Convient très bien pour les petites entreprises
  • Efficace avec un rendu professionnel immédiat
  • Bien documenté avec plus d’un million d’installations
  • BONUS : il est entièrement gratuit

Le moins : ce thème est victime de son succès. Il faudra le personnaliser un minimum pour éviter l’impression de déjà vu.
A mon avis, un déjà vu pro est préférable à original mais bancal. Évitons toute ressemblance avec le salon de tata Kiki. Et pourtant, les tapisseries marrons fanées teintés au goudron de cigarette contrastent merveilleusement avec les crapauds violets en porcelaine.

Présentation de Twenty Seventeen

Je te propose de regarder l’exemple de présentation. L’équipe a pris l’exemple d’un café. Ton site ressemblera à cela à ses débuts. Le résultat est agréable et très lisible. Note : pour pas un rond est entièrement réalisé avec ce thème.

Twenty Seventeen se caractérise par une page d’accueil scindée en paragraphes séparés par des images qui s’affichent en parallaxe. L’effet parallaxe dévoile des images en fond par des “fenêtres” dans la page.

effet parallaxe de twenty seventeen

Tu peux ainsi disposer d’un mini site qui présente de ton activité sur une seule page. Comme tout site, tu pourras ajouter toutes les pages que tu souhaites et des menus sur la barre de navigation principale.

Sur la page d’accueil de pour pas un rond tu retrouves dans l’ordre :

  • la présentation du site
  • le sommaire des thèmes des articles
  • je me présente
  • l’abonnement à la newsletter
  • le formulaire de contact

Nous pouvons imaginer une page d’accueil d’un site d’un artisan potier avec les rubriques :

  • Mes plus belles réalisations
  • Les étapes de la fabrication d’un vase, d’une assiette… en vidéos
  • La présentation du potier dans son atelier
  • L’adresse de l’atelier avec une carte Google Maps et les heures d’ouvertures

Tu penses qu’une femme qui fait de la poterie s’appelle une potière ? Trêve de blabla, rentrons dans le vif du sujet.

La personnalisation du thème dans l’éditeur

Tu vas avoir besoin dans ce tutoriel des éléments suivants :

mini logo
ton logo au format : 250 pixels en largeur (maximum ) x 250 pixels en hauteur (maximum)

 

mini favicon

 

l’icône de site : 512 (l) X 512 px (h) – il s’agit de ton logo simplifié qui s’affichera dans l’onglet des pages

 

mini fond

 

l’image d’en-tête de la page d’accueil du site : 2000 X 1200 px

 

  • Ouvrir le menu Apparence > Personnaliser

menu apparence

  • Cliquer sur Identité du site

menu identite du site

Logo

  • Bouton Sélectionner un logo

apparence identite site

Tu arrives dans la bibliothèque de WordPress. Tu peux glisser directement le fichier ici ou suivre les étapes suivantes :

  • Onglet Envoyer des fichiers

  • Bouton Choisir des fichiers

chargement logo

 

  • Sélectionner ton fichier

De retour dans la bibliothèque d’image, à droite, tu trouveras un menu déroulant.

  • Remplir le texte alternatif (barbant mais indispensable pour que Google sache ce que représente ton image). Dans le cas  présent : logo suivi du nom de ton site
  • Alignement : aucun
  • Lier à : aucun
  • Taille : taille originale

chargement image details

  • Bouton Sélectionner

bibliothèque selectionner

  • Cliquer sur recadrer

recadrage logo

Tu vois sur la partie droite de ton écran les changements apportés au fur et à mesure

  • Titre du site : Il s’agit du nom de ta marque même si tu décides de ne pas l’afficher, il est impératif de le remplir
  • Slogan : Le résumé en une phrase de ton site
  • Afficher le titre et le slogan du site : Cocher ou non selon tes goûts
  • Icône de site : Il s’agit du symbole qui apparaît sur les onglets.
    C’est un petit plus pour renforcer l’image de marque. Tu répètes la même opération que pour le logo.

 

  • Bouton Enregistrer & publier situé en haut

identite site enregistrer

 

Couleur

Tu choisis ici une couleur d’accompagnement qui sera appliquée à différents éléments du site : icônes, certains titres, boutons. Je te recommande ta couleur secondaire.

  • Déplacer le curseur sur la barre colorée
  • Bouton Enregistrer & publier

twenty seventeen couleur

En-tête du média

Il s’agit de l’image d’illustration de la page d’accueil de ton site.

image accueil principale

  • Bouton Ajouter une nouvelle image en descendant un peu dans le menu

twenty seventeen en-tete

  • Suivre la même procédure que pour le logo
  • Bouton Enregistrer & publier

Menus

Tes menus seront présents dans la barre principale et en option dans la barre latérale présente dans les articles.

menu principal

Menu supérieur

  • Aller dans Menus puis Menu supérieur
    Apparence > Menus > Menu supérieur

personnaliser menu

Sélection menu supérieur

  • Retirer les 4 pages présentes en cliquant sur le lien Retirer en bas de menu

menus retirer

  • Remettre l’adresse de votre lien sur votre page d’accueil

 

  • Bouton Ajouter des éléments

menus ajouter

  • Ajouter toutes les pages qui figureront dans la barre de menu.
    Si tu as décidé de réaliser une page d’accueil qui regroupe plusieurs éléments (présentation, a propos, contact, inscription à la newsletter…), seule la page d’accueil figure dans le menu. Les autres pages seront emboîtées dans une autre section que nous verrons un peu plus tard.

menus ajouter éléments

Tu retrouves toutes les pages créées sur la droite et tu les sélectionnes en cliquant sur le petit + à gauche du nom

  • Cliquer sur réordonner une fois tous les éléments du menu chargés

menus niveaux identiques

Les flèches haut et bas permettent de déplacer les éléments dans le menu, celui placé en haut sera le premier présent sur la gauche du menu. La flèche droite permet d’intégrer la page en qualité de sous-menu de celui placé juste au dessus. La gauche à l’inverse remonte le sous-menu d’un niveau hiérarchique.

Dans cet exemple, mes 4 éléments sont au même niveau et apparaissent dans la barre de menu.

Ici j’ai imbriqué “attirer des visiteurs” à “construire un site” ce qui donne ceci sur le site :

visualisation sur site sous-categorie

Attirer des visiteurs n’apparaît que lorsque tu cliques sur la flèche ou que tu passes au dessus du menu.

Il est recommandé de ne réaliser qu’un niveau de sous-menus. A delà la navigation est franchement pénible.

  • Bouton Enregistrer & publier

Menu des liens sociaux

4 réseaux sociaux sont déjà pré-existants + l’e-mail.

menus reseaux sociaux

  • Remplacer l’adresse présente par celle de ta page d’accueil dans les réseaux et ton adresse e-mail après “mailto:”.
  • Bouton Enregistrer et publier.

Supprimer un réseaux social

  • Cliquer sur la croix rouge à droite du nom

supprimer un reseau social

Intégrer un nouveau réseau social

Les réseaux sociaux les plus populaires sont supportés. WordPress insère automatiquement la bonne icône.

  • Bouton + Ajouter des éléments.
  • Aller dans Liens personnalisés
  • Intégrer le lien du profil dans Adresse Web, par ex https://www.linkedin.com/in/jean-lochet-21ba8614/
  • Compléter le nom du réseau dans Texte du lien, par ex LinkedIn
  • Bouton Ajouter au menu

ajouter un reseau social

Widgets

Les widgets sont les options de la barre latérale et du pied de page.

apparence widgets

  • Apparence > Widget

menu widgets

Colonne latérale

barre laterale

  • Bouton Gérer avec l’aperçu en Direct

widget interface

  • Bouton Colonne latérale

Widget interface avec l'appercu

Supprimer un Widget

  • Cliquer sur la flèche à droite pour faire apparaître la fenêtre
  • Cliquer sur le lien Retirer

widget supprimer

Ajouter un Widget

  • Bouton + Ajouter un Widget
  • Sélectionner le Widget

widget ajouter

Liste des Widgets disponibles

  • Archives répertorie les articles du site

widget archives

  • Articles récents

widget articles récents

  • Calendrier organise les articles du site dans un calendrier (adapté seulement en cas de production de nombreux articles d’actualité)

widget calendrier

  • Catégories liste les catégories du site

widget categories

  • Commentaires récents
  • Flux
  • Menu personnalisé pour sélectionner les éléments de ton menu principal qui apparaîtront ou non
  • Nuage d’étiquettes affiche les étiquettes du site
  • Pages pour afficher les pages du site
  • Rechercher : le moteur de recherche interne du site. C’est vraiment un plus pour les utilisateurs.

widget recherche

  • Texte permet d’ajouter des bannières publicitaires.

    Réordonner les Widgets

  • Sélectionner celui à déplacer de maintenir le clic gauche enfoncé et de le placer à l’emplacement souhaité.

    Pied de page

pied de page

Ajouter les mentions légales

Dans cet article de Service Public, tu retrouveras toutes les mentions légales à indiquer en fonction des différentes catégories d’entreprises.

Méthode simple :

Les mentions légales apparaissent directement en clair dans le pied de page.

  • Bouton + Ajouter un Widget
  • Sélectionner Texte
  • Ne pas remplir Titre
  • Écrire tes mentions légales dans contenu

pied page mentions legales

Méthode par liens :

  • Créer une page mentions légales (en option une page de contact)
  • Copier le lien de la page
  • Revenir sur Apparence > Widgets > Pied de page 1
  • Bouton + Ajouter un Widget
  • Sélectionner Texte
  • Ne pas remplir Titre
  • Ajouter le texte suivant dans contenu en personnalisant l’adresse de ta page mentions légales
    <p><a href=”https://www.tonsite.fr/tapage/“>mentions légales</a></p>
    Cela donne par exemple pour ce site :
    <p><a href=”https://www.pourpasunrond.fr/mentions-legales/”>mentions légales</a></p>
    Tu as peut être remarqué que j’ai également ajouté le lien vers ma page de contact séparé d’un |
    Cela donne :
    <p><a href=”adresse page mentions“>mentions légales</a> | <a href=”adresse page contacter“>contact</a></p>

Tu peux réaliser les mêmes actions dans le pied de page que dans la barre
latérale.

Page d’accueil statique

  • Sélectionner l’une des 2 options dans La page d’accueil affiche
    • Les derniers articles : à réserver à un site d’actualité type blog où la nouveauté prime sur tout. Un bon exemple serait un blog sur l’actualité d’une ville
    • Une page statique : une page de site classique qui organise la visite
  • Définir la page qui servira de page d’accueil dans le menu déroulant Page d’accueil
  • Cliquer sur le lien Ajouter une nouvelle page pour définir les pages qui s’intégreront dans la page d’accueil les unes à la suite des autres avec l’effet parallaxe
  • Bouton enregistrer et publier

apparence page accueil statique

Options du thème

Le texte du site peut s’afficher sur deux colonnes avec les titres isolés à gauche de l’article ou sur 1 colonne avec le titre au dessus de l’article.

Visuellement cela donne :

2 colonnes

theme twenty seventeen sur deux colonnes

 

1 colonne

theme twenty seventeen sur 1 colonne

Je te conseille fortement l’option en 2 colonnes car les longues lignes de textes sont plus difficiles à lire.

Contenu 1 de section de page d’accueil

C’est ici que seront indiqués les pages qui s’ajouteront avec l’effet parallaxe dans la page d’accueil

  • Sélectionner la première page à ajouter dans le menu déroulant
  • Cliquer sur le lien + Ajouter une nouvelle page pour les pages suivantes

apparence options theme

Synthèse des formats d’images

Les formats sont exprimés en pixels avec Largeur X hauteur :

Logos

  • Principal : 250 x 250 px
  • Icône de site : 512 X 512 px

Les dimensions des éléments de la page d’accueil pour 2 colonnes

Les dimensions des éléments de la page d'accueil

Les dimensions des éléments d’une page

Les dimensions des éléments d'une page

Les dimensions des éléments d’un article

Les dimensions des éléments d'un article

En détail :

  • Image principale du site : 2000 X 1200 px

image accueil principale

  • En-tête des rubriques de la page d’accueil : 2000 X 1200 px

image accueil principale rubriques

  • En-tête des pages et des articles : 1200 X au choix
    • 1200 X 240 pour une image format bandeau (identique à ce site)

images hauteur 1200X240

  •  1200 X 720 pour une image format cinéma

images hauteur 1200X720

  • 1200 X 1200 pour une image format carré

images hauteur 1200X1200

  • Internes des articles : Largeur de 524 px pour l’option 2 colonnes (740 px en 1 colonne)

Tu peux utiliser ces visuels pour personnaliser ton site.

Pour aller plus loin :

Mes recommandations pour ceux qui souhaitent choisir un autre thème :

  • prendre son thème uniquement dans WordPress pour des raisons de sécurité
  • préférer un thème avec de nombreux utilisateurs et avis
  • choisir un thème adapté à tous les supports : ordinateur, tablette, mobile. Cette fonctionnalité s’appelle responsive

Un thème payant n’est pas une grosse dépense (aux alentours de 50 €) et te garantit pour les plus connus une mise en place rapide avec de nombreuses options. Les fournisseurs les plus connus sont Theme Forest et Elegant Themes (en particulier Divi ). Attention : plus ton thème est sophistiqué plus la migration vers un autre thème occasionnera des pertes.

picto articles intermediaires

Intermédiaire

Modifier l’apparence de son thème avec les CSS

Nous allons rentrer dans le cœur du thème ici. Tu vas avoir un site en adéquation avec ta marque : choix des polices, couleurs de la barre latérale et des boutons… Cela va beaucoup plus loin que ce qui est proposé en standard.

La première chose à faire est d’installer un thème enfant. Cela ne prend que quelques minutes.

Avant tout, tu réalises une sauvegarde du site. Il n’y a aucun risque si tu suis les instructions mais il faut toujours assurer ses arrières.

Tu vas faire ton marché dans les options que je te propose. Tu personnalises les parties en bleu-vert.

Il s’agit de codes CSS qui déterminent l’aspect d’un site.

2 point utiles à savoir :

  • Les lignes comprises entre /*  */ sont du commentaires. Elles ne sont pas utilisées mais permettent de retrouver ses petits.
  • !important en fin de ligne sert à indiquer que s’il existe des instructions similaires, celles-ci prendront le pas.

Apparence > Editeur

Wordpress éditeur CSS

  • Sélectionner ton thème enfant dans le menu
  • Bouton Sélectionner

Wordpress éditeur sélection thème

  • Cliquer sur Feuille de style dans Styles

thème enfant css sélectionner

Le texte descriptif du thème est déjà présent.

css thème enfant

Tu copieras ton code après ce texte.

css thème enfant où insérer son code css

  • Bouton Mettre à jour le fichier après chaque ajout
  • Vérifier ce que cela donne sur ton site

Le fichier du code complet pour ne pas le recopier à chaque fois est disponible dans la section réservée aux abonnés de la newsletter.

bannière de la newsletter de pour pas un rond version bleu-vert

Pied de page et barre latérale

Couleur du pied de page et de la barre latérale

Tu peux modifier la couleur du fond de ta barre latérale et de ton pied de page.

/* couleur du pied de page */
.site-footer {
background: #eeeeee;
}

/* couleur de la barre latérale */
.widget-area {
background: #eeeeee;
}

Marge dans la barre latérale

J’ai inséré une marge sur l’ensemble de la barre latérale pour éviter que le contenu ne colle le bord ce qui n’est pas esthétique à mon sens. Tu peux réaliser des essais d’épaisseur.

/* marge de 8 px dans la barre latérale */
#secondary.widget-area {
margin: 0px;
padding: 8px;
}

Suppression des marges du deuxième espace dans le pied de page

Je n’utilise qu’un seul des deux espaces disponibles sur le pied de page. Cela me donnait un pied de page avec de grands vides. Je les ai supprimés.

/* suppression des marges du deuxième espace dans le pied de page */
.site-footer .wrap {
padding-bottom: 0px!important;
}

.site-footer .widget-area {
padding-bottom: 0px!important;
}

#secondary.widget-area {
padding-bottom: 0px!important;
}

Supprimer la mention WordPress

Tu peux masquer la mention Fièrement propulsé par WordPress dans le pied de page.

/* suppression de Fièrement propulsé par WordPress */
.site-info {
display: none;
}

Aspect des boutons

La police des boutons

Nous allons commencer à modifier les polices. Tu trouveras ce qu’il faut indiquer dans Google Fonts. Les références sont indiquées dans la fiche des polices sélectionnées en bas sous Specify in CSS (emplacement : recherche > sélection des polices > clic sur le bloc noir en bas). La première référence est ta police et la seconde la famille de remplacement en cas de problème de chargement.

google font reference police

/* Changer police pour boutons, textes divers */
body,
button,
input,
select,
textarea {
font-family: ‘Raleway’, sans-serif!important;
}

La couleur des boutons

La première référence représente la couleur du texte et la seconde la couleur du fond.

/* personnalisation des boutons */
.colors-custom input[type=”submit”] {
color: #032136!important;
background: #ffff00!important;
}

Les titres et le texte

Tu retrouves ici mes paramétrages. Si tu ne souhaites pas te compliquer la vie, tu peux juste modifier la couleur et la police.

La couleur du texte suit color et la police font-family.

Pour aller plus loin, tu trouveras les explications complètes et un outil  de visualisation dans l’article consacré à l’utilisation de SiteOrigin CSS.

Note : j’ai réduit la largeur de ma colonne à 480 pixels de large pour offrir une meilleur lisibilité. Si tu souhaites utiliser toute la largeur disponible, tu supprimes les lignes max-width: 480px!important;. Seul le titre n’est pas concerné pour le faire ressortir.

titre article decallé

Le texte standard des paragraphes de texte

/* texte des paragraphes */
p {
color: #0c0d0e!important;
font-size: 16px!important;
line-height: 24px!important;
font-weight: 400!important;
font-variant: normal!important;
font-family: ‘Lusitana’, serif!important;
text-align: left!important;
border-width: 0px!important;
margin-top: 0px!important;
margin-right: 0px!important;
margin-left: auto!important;
max-width: 480px!important;
}

Le titre principal des articles (H1)

/* titre de l’article */
h1,
.page .panel-content .entry-title,
body.page:not(.twentyseventeen-front-page) .entry-title {
color: #032136!important;
font-size: 40px!important;
line-height: 48px!important;
font-weight: 200!important;
text-transform: uppercase!important;
font-family: ‘Raleway’, sans-serif!important;
letter-spacing: 10px!important;
border-width: 0px!important;
margin-top: 0px!important;
margin-right: 0px!important;
margin-left: 0px!important;
margin-bottom: 48px!important;
}

Le sous-titre des articles (H2)

/* titre H2 */
h2 {
color: #032136!important;
font-variant: normal!important;
font-weight: 400 !important;
font-size: 32px!important;
line-height: 40px!important;
text-transform: none!important;
font-family: ‘Raleway’, sans-serif!important;
border-width: 0px!important;
padding: 0px!important;
max-width: 480px!important;
margin-top: 32px!important;
margin-right: 0px!important;
margin-left: auto!important;
margin-bottom: 24px!important;
}

Le sous-titre secondaire des articles (H3)

/* titre H3 */
h3 {
font-family: ‘Raleway’, sans-serif!important;
text-transform: none!important;
font-variant: normal!important;
color: #032136!important;
font-size: 25px!important;
line-height: 32px!important;
font-weight: 500!important;
border-width: 0px!important;
margin: 0px!important;
margin-bottom: 0px!important;
padding: 0px!important;
margin-left: auto!important;
max-width: 480px!important;
}

Les autres sous-titre (H4 à H6)

Je n’ai pas détaillé de forme spécifique pour les sous-titres H5 et H6 car je ne les utilise jamais.

/* titre H4 à H6 */
h4,
h5,
h6 {
color: #0c0d0e!important;
font-size: 16px!important;
line-height: 24px!important;
font-weight: 400!important;
font-variant: normal!important;
text-transform: none!important;
font-family: ‘Raleway’, sans-serif!important;
border-width: 0px!important;
margin-bottom: 0px!important;
margin-left: auto!important;
padding: 0px!important;
max-width: 480px!important;
}

Les listes

/* listes */
li {
color: #0c0d0e!important;
font-size: 16px!important;
line-height: 24px!important;
font-weight: 400!important;
font-family: ‘Lusitana’, serif!important;
text-align: left!important;
border-width: 0px!important;
margin: 0px!important;
margin-bottom: 0px!important;
padding: 0px!important;
max-width: 480px!important;
margin-left: auto!important;
}

Les textes du pied de page et de la barre latérale

/* pied de page et barre latérale */

.colors-custom .widget a, .site-footer {
font-family: ‘Raleway’, sans-serif!important;
font-size: 16px!important;
line-height: 16px!important;
font-weight: 500!important;
text-align: center!important;
max-width: none!important;
}

Les textes des commentaires

/* commentaires */

#comments {
color: #0c0d0e!important;
font-weight: 400!important;
font-family: ‘Lusitana’, serif!important;
padding: 0px!important;
max-width: none!important;
}

Le fil d’Ariane

Si tu n’as pas encore installé le fil d’Ariane avec Yoast. Tu peux déjà copier le code. Cela sera fait. Le tutoriel pas à pas du paramétrage de Yoast.

/* fil d’ariane */
#breadcrumbs {
text-align: center!important;
top: 0px;
border-width: 0px;
text-indent: 0px;
padding: 0px;
max-width: none!important;
}

/* ajout fil d’ariane défini par Yoast */
#breadcrumbs {
margin-top: -30px;
padding-bottom: 10px;
padding-left: 13.6%;
text-decoration: none !important;
}

/* suppression du fil d’ariane défini par Yoast sur la page d’acceuil */
.home #breadcrumbs {
display: none;
}

Augmenter la taille du logo

La taille du logo est définie dans le thème. Pour supprimer cette contrainte, il faut modifier les fonctions du thème.

Apparence > Editeur

Wordpress éditeur CSS

  • Sélectionner ton thème enfant dans le menu
  • Bouton Sélectionner

Wordpress éditeur sélection thème

  • Cliquer sur Fonctions du thème dans Modèles

thème enfant fonctions

Copier le code suivant à la fin sous // END ENQUEUE PARENT ACTION

// Logo agrandi.

add_theme_support( ‘custom-logo’, array(

‘width’       => 250,

‘height’      => 250,

‘flex-width’  => true,

) );

thème enfant fonctions endroit où copier le code

  • Bouton Mettre à jour le fichier après chaque ajout
  • Vérifier ce que cela donne sur ton site

Le support du SVG

Supprimer le recadrage

Le recadrage des images empêche l’utilisation de fichiers SVG. Attention, n’utiliser que des images SVG que tu crées. Ces images peuvent contenir des virus.

Reprendre la procédure pour augmenter la taille du logo ci-dessus avec le code suivant :

$args = array(

‘flex-width’    => true,

‘width’         => 980,

‘flex-height’    => true,

‘height’        => 200,

‘default-image’ => get_template_directory_uri() . ‘/images/header.jpg’,

);

add_theme_support( ‘custom-header’, $args );

Conclusion

Tu disposes désormais d’un site qui est le reflet de ta marque. Tu peux me communiquer l’adresse de ton site. Je suis impatient de voir le résultat.

Ce sont les détails qui feront toute la différence en particulier le soin apporté aux visuels. Mon conseil : tu peux demander l’avis de proches et faire un point dans un ou deux mois pour regarder ton site avec un œil critique et l’améliorer.

Tu peux pousser la personnalisation plus loin à l’aide de   SiteOrigin CSS un outil de visualisation des modifications apportées sur un thème.

Ressources

Cet article de Loic Bernard du Journal du blogueur donne les informations pour modifier un thème WordPress. J’aime particulièrement l’explication sur la différence entre php et css.

25 exemples de codes pour modifier TwentySeventeen d’Om Prakash Chowdhury

Fontaholic présente d’autres modifications possibles.

Les articles qui peuvent t’intéresser
Créer les images de ton site
Assurer la sécurité de ton site
Structurer le contenu de ton site
Le contenu de ta page d’accueil

bannière de la newsletter pour pas un rond

personnaliser twenty seventeen image pinterest

9 réponses sur “Personnaliser le thème Twenty Seventeen”

  1. Bonjour,

    Merci pour ses conseils. Mais je suis à la recherche d’une solution pour l’affichage des widgets sur une page !

    Car ils sont visible que sur un article ! ce qui est bien dommage pour ce thème. Comment faire ? quel code mettre ? …

    merci d’avance pour votre aide.
    Cha’

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *