Charte PayPal, documentation complète FR + EN et export PDF - #1
Merged
Merged
Conversation
Charte graphique - Couleurs relevées sur paypal.com : #002991, #60CDFF, #F1EFEA, #FFC439 - En-tête blanc + logo PayPal, comme sur paypal.com ; version blanche du logo en mode sombre - Feuille de style dédiée (docs/assets/css/paypal.css) : titres, tableaux, encarts, cartes, cadre sur les captures d'écran - Police Inter en substitut de PayPal Pro Text (propriétaire) - Bascule clair / sombre Contenu - Import de la documentation utilisateur (export Google Docs) : 8 chapitres répartis en 10 pages, 22 captures extraites du base64 vers docs/assets/img/ - Nettoyage de l'export : titres préfixés par des numéros de liste, gras dans les titres, caractères échappés, ancres Google Docs - Liens internes réécrits en liens inter-pages avec ancres explicites - Encarts « NB / A noter / Attention » convertis en admonitions Material - Navigation par onglets : Démarrer, Configuration, Exploitation, Référence - Page d'accueil avec cartes d'entrée Outillage - .gitignore (absent du dépôt) : .venv/, site/, .DS_Store - mkdocs.local.yml : config de dev désactivant l'export PDF, dont les dépendances système ne sont pas installables sans droits admin - README : procédure d'installation locale et structure du projet Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
Sans ligne vide, l'export Google Docs collait l'image au texte précédent : elle était rendue en ligne au milieu du paragraphe. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
L'export Markdown de Google Docs perdait des données. L'export « Page Web » les conserve : le contenu est repris depuis cette source. Images - 5 GIF animés de démonstration, aplatis en PNG fixes par l'export Markdown - 2 images purement absentes de l'export Markdown - résolution d'origine (jusqu'à 1666 px) au lieu de 605 px imposés à l'export - noms explicites plutôt que imageN.png, légendes pour l'accessibilité et le PDF - chargement différé (loading=lazy) : les GIF pèsent 10 Mo Texte - repris verbatim : plus aucune reformulation, seule la syntaxe Markdown change - emphases portées par des classes CSS résolues en gras / italique - liens déballés du redirecteur google.com/url - titres remis à leur niveau (Google Docs les enveloppe dans des <ol>) - en-têtes de tableaux vides corrigés, listes des cellules rendues en <br> - ancres internes du document mappées vers leur page et leur section - blocs « NB / A noter / Attention » convertis en encarts, texte inchangé Structure - une page par section du document, 13 pages au lieu de 10 - navigation calquée sur les 8 chapitres du document source Charte - titres en noir, graisse 900, interlettrage -0.03em : relevé sur paypal.com, le bleu y est réservé aux liens et éléments interactifs - onglets et boutons en pilule (radius 1000px) - Inter chargée en graisses 400 à 900 Outillage - tools/import-google-doc.py : le convertisseur, pour les prochains imports - README : procédure de mise à jour du contenu depuis le Google Doc Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
Détecteur impeccable passé sur le site généré : 188 occurrences, ramenées à 0. Charte - encarts : suppression du liseré coloré de 4 px à gauche, le marqueur le plus reconnaissable des interfaces générées par IA ; la couleur passe désormais par le titre et son icône, avec un filet uniforme - typographie : Inter remplacée par Archivo — Inter est devenue si répandue qu'elle ne distingue plus rien, et Archivo est plus proche du dessin de « PayPal Pro » (graisses 400 à 900) - ombres : halo bleuté remplacé par une ombre neutre Lisibilité - tableaux : Material les rend à 10,24 px, alignés sur le corps de texte - pied de page, lien d'évitement et résultats de recherche remontés à 11,5 px - marges internes du pied de page Règles ignorées, partagées dans .impeccable/config.json - layout-transition et clipped-overflow-container : CSS compilé de Material for MkDocs, non modifiable sans forker le thème Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
Le PNG du logo avait un fond blanc opaque, sans canal alpha utile. Le filtre `brightness(0) invert(1)` repeignait donc tout le rectangle en blanc, logo compris : rien n'était lisible sur l'en-tête sombre. - détourage du logo par inversion de la composition sur fond blanc (A = 1 - min(R,G,B) puis démultiplication), bords antialiasés propres - génération de la version réservée blanche, que PayPal prescrit sur fond sombre ; un filtre CSS ne convenait pas, il écrasait le bichromatisme bleu - bascule par `content: url(...)` selon le thème, plus de filtre Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
Deux défauts dans la barre d'onglets : - le lien était calé en haut du <li> (4 px au-dessus, 22,8 px en dessous dans une barre de 57 px) : le padding de la pilule avait cassé le calage vertical que Material obtient par sa marge haute. Le <li> centre désormais son lien. - le sélecteur de l'onglet actif visait `.md-tabs__link--active`, qui n'existe pas : Material 9 porte le marqueur sur le <li> (`.md-tabs__item--active`). L'onglet actif n'avait donc jamais été mis en évidence. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
Le tableau à 5 colonnes de la page Général faisait 1066 px pour 720 px disponibles : il fallait le faire défiler latéralement pour le lire. - page Général : sommaire de droite masqué, ce qui rend ~265 px au contenu. L'en-tête est posé par le convertisseur, il survit donc au réimport. - marges internes des cellules ramenées de 19,5 px à ~12 px - colonne des libellés protégée sur les tableaux de 4 colonnes ou plus, sinon elle se faisait écraser à 107 px - césure par overflow-wrap et non hyphens, qui coupait « Pay-Pal » ; les URL cassent sans tiret parasite Vérifié sans défilement à 1440, 1280 et 1100 px. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
Les tailles de titres étaient fixes : sur un écran de 375 px, le H1 s'affichait à 44 px et occupait quatre lignes de deux mots. Passage en clamp() : 31 px sur mobile, 44 px sur grand écran. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
CI - `mkdocs build --strict` : un lien mort ou une page absente de nav: fait désormais échouer le job. Vérifié : code de sortie 1 sur lien cassé, 0 sinon. - le lien vers le PDF pointait vers docs/pdf/, que MkDocs ne trouve jamais — le plugin écrit dans site/. Le build strict échouait donc y compris en CI, où le PDF est pourtant bien généré. Lien passé en URL absolue. Métadonnées - site_url : URL canoniques et sitemap corrects (ils pointaient nulle part) - repo_url / repo_name : l'icône GitHub configurée dans theme.icon.repo ne s'affichait pas sans repo_url - copyright Pas d'action « modifier cette page » : les pages de docs/ sont régénérées depuis le Google Doc, un tel bouton inviterait à des modifications écrasées. Corrections induites par le bloc « dépôt » - dans le tiroir mobile, Material le peint avec la couleur de texte de l'en-tête, noire ici, sur fond bleu profond : 1,7:1. Passé à 12,17:1. - nom du dépôt sous le plancher de lisibilité, et marges internes nulles - 404.html exclu du détecteur : MkDocs y met des chemins absolus à dessein Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
Audit de contraste des deux thèmes sur l'ensemble des pages : un échec. - l'encart `danger` n'avait pas de variante sombre et gardait son rouge foncé #B3261E, soit 2,44:1 sur fond sombre — sous le seuil AA de 4,5:1. C'est l'avertissement sur la restriction IP, le plus important de la doc. Passé à #FF8A80 : 6,99:1. - bordure des captures d'écran : un noir à 10 % ne délimite rien sur fond sombre, passée en blanc à 18 % Vérifié sur Accueil, Général et Configuration dans les deux thèmes, plus le tiroir mobile en sombre : plus aucun texte sous son seuil AA. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
…onglet Navigation - `toc.integrate` : le sommaire de la page rejoint la navigation de gauche, sous le chapitre courant. La colonne de droite disparaît : il n'y a plus qu'un seul endroit où se repérer. - `navigation.sections` retiré : les chapitres redeviennent dépliables - le `hide: toc` de la page Général n'a plus lieu d'être — il masquerait désormais ses sous-sections dans la navigation Liens sortants - ouverture dans un nouvel onglet, avec rel="noopener noreferrer" (sans quoi la page ouverte peut manipuler celle d'origine via window.opener) - flèche ↗ visible et mention « (nouvel onglet) » pour les lecteurs d'écran - les liens internes ne sont pas touchés Perte de contenu corrigée Le convertisseur écartait les paragraphes contenant un lien `#h.`, pour filtrer le sommaire Google Docs. Or ce sommaire précède le premier titre et était déjà écarté en amont : le filtre ne supprimait donc que du contenu. Deux paragraphes manquaient, dont « Vous êtes déjà un client PayPal : Rendez-vous au chapitre 2 ». Audit de complétude relancé sur les 180 blocs du document source : aucun absent. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
Le français reste à la racine, l'anglais vit sous /en/. Le sélecteur apparaît dans l'en-tête, la navigation et les métadonnées sont traduites. Les 13 pages anglaises sont des COQUILLES portant un encart « Translation pending ». La structure et le sélecteur sont en place, pas le contenu : à ne pas publier en production en l'état. Configuration réorganisée La config de dev remplaçait la liste des plugins, ce qui a fait qu'i18n était absent en local sans que rien ne le signale — l'aperçu local ne reflétait plus la production. Découpage en trois fichiers : - mkdocs.base.yml : tout le commun, plugins déclarés en mapping (l'héritage MkDocs fusionne les mappings, mais remplace les listes) - mkdocs.yml : production, ajoute l'export PDF — lancé par la CI - mkdocs.local.yml : développement, sans l'export PDF Plus aucune duplication : les deux environnements ne diffèrent que par le PDF. Vérifié en résolvant l'héritage des deux fichiers. mkdocs.local.yml n'est plus ignoré par git : le README demande de l'utiliser, il doit donc être versionné. Le convertisseur ne régénère que les pages françaises, les *.en.md sont préservés. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
…e ligne Depuis l'intégration du sommaire à gauche, les trois niveaux — chapitre, pages du chapitre, sections de la page ouverte — se ressemblaient, et on ne voyait pas où finissait la liste des pages. - le chapitre devient un intitulé de rubrique : petites capitales, interlettré - les pages reçoivent une pastille au survol, comme les onglets - les sections de la page ouverte sont regroupées dans leur propre encart, crème en clair, blanc translucide en sombre ; les sous-sections gardent un simple filet de retrait - filets de séparation du tiroir mobile retirés : ils faisaient doublon avec les pastilles et les entrées butaient dessus Longueur de ligne La suppression de la colonne de droite avait élargi le texte à 938 px, soit près de 100 caractères par ligne — l'œil décroche en fin de ligne. La grille s'élargit à 68rem, la navigation passe à 15rem, et le texte est bridé à 32rem (~80 caractères). Seul le texte est bridé : tableaux, captures et encarts gardent la pleine largeur, et la matrice des produits tient toujours sans défilement (1018 px pour 1052 disponibles). Tous les retraits de la navigation portés à 8 px minimum. Détecteur impeccable à zéro sans recourir à une règle ignorée ; audit de contraste des deux thèmes sur la navigation et le contenu : aucun texte sous son seuil AA. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
Les coquilles « Translation pending » sont remplacées par le contenu réel, importé du Google Doc anglais avec le même convertisseur. Convertisseur généralisé Il prend désormais la langue en argument (`fr` ou `en`) et ne régénère que les pages de cette langue. Tout est tabulé par langue : routage des pages, table des images, légendes, marqueurs d'encart (« Please note », « Warning ») et page d'accueil. La structure du document anglais est le miroir exact du français, l'arborescence du site est donc identique dans les deux langues. GIF mutualisés Les 5 GIF de l'export anglais sont les mêmes enregistrements d'écran français, réencodés sept fois plus lourds : 71 Mo contre 10. Ils ne sont pas recopiés, les pages anglaises pointent sur les fichiers français. Seules les 17 captures anglaises sont ajoutées, soit 1,4 Mo au lieu de 73. Liens internes Google Docs référence des signets qu'il n'exporte pas — un par langue, vers la section « mode de prélèvement ». Le correctif codé en dur pour le français devient une table par langue, et le script signale désormais tout lien interne non résolu sur les fichiers écrits, pour qu'un import futur ne livre pas de lien mort en silence. Audit de complétude sur les 168 blocs du document anglais : aucun absent. À savoir sur les visuels : les captures anglaises portent des annotations en anglais mais montrent une interface PrestaShop en français, et les GIF sont intégralement en français. Une version anglaise complète suppose de les réenregistrer en locale anglaise. C'est consigné dans le README. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
Le lien « Télécharger le PDF » était en place mais n'avait jamais été vérifié : WeasyPrint n'était pas installable sur la machine de développement. Il l'est désormais, via conda-forge dans le dossier personnel (procédure au README), et tout ce qui suit a été contrôlé sur le PDF réellement produit. Ce qui était cassé - la page d'accueil anglaise renvoyait vers le PDF français - la couverture du PDF anglais était en français : le plugin n'a qu'une configuration globale, et les surcharges par langue d'i18n ne portent pas sur les options des plugins. Corrigé par hooks/pdf-par-langue.py, qui écrit dans l'objet Options du plugin — sa configuration est figée avant les hooks. - le logo n'apparaissait pas : le gabarit d'origine le pose en image de fond d'un conteneur flexbox, que WeasyPrint ne sait pas dimensionner. Remplacé par templates/cover.html.j2, qui utilise une balise img. - le PDF sortait dans le serif par défaut : WeasyPrint ne récupère pas Archivo depuis Google Fonts. Bloc @media print ajouté. Un piège coûteux La règle libérant la largeur du texte incluait les titres — qui portent les ancres du document. Résultat : 98 liens internes actifs tombaient à 38, et 47 ancres mortes faisaient échouer le build strict. La règle épargne désormais les titres, et le README le signale. Vérifié sur les deux PDF 44 titres sur 44, 98 liens internes actifs, 10 liens externes, images incorporées, matrice des produits entière sur sa page, couverture et sommaire dans la bonne langue. Build strict au vert, détecteur impeccable à zéro. Le PDF est régénéré à chaque build de production : il ne peut pas diverger du site. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
Le workflow ne se déclenchait que sur main : l'export PDF n'aurait donc été testé qu'après la fusion. Il exige des bibliothèques système (Pango, Cairo) absentes des postes de développement, la CI est le seul endroit où le vérifier. La pull request construit désormais le site et les deux PDF en mode strict ; l'étape de déploiement reste réservée à main. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
La CI installait Markdown 3.10.3 et WeasyPrint 70 là où le rendu a été vérifié avec Markdown 3.9 et WeasyPrint 66. Les ancres internes du PDF n'étaient plus résolues et le build strict échouait — sur un code pourtant valide en local. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
Retire aussi le hook de diagnostic temporaire. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
clotairer
approved these changes
Sep 17, 2026
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Refonte de la charte graphique et intégration de la documentation utilisateur, en français et en anglais.
Charte
Couleurs, typographie et composants relevés sur paypal.com : bleu profond
#002991, bleu clair#60CDFF, crème#F1EFEA, or#FFC439. Titres en noir graisse 900 à interlettrage serré — chez PayPal le bleu est réservé aux liens et éléments interactifs. Onglets et boutons en pilule. Archivo remplace la police propriétaire « PayPal Pro ». Bascule clair / sombre, avec la version réservée blanche du logo sur fond sombre.Contenu
Import depuis les deux Google Docs via l'export « Page Web », seul format qui conserve les GIF animés et la résolution d'origine des images. Le texte est repris verbatim : seule la syntaxe Markdown change.
13 pages par langue, calquées sur les 8 chapitres du document source. Le français vit à la racine, l'anglais sous
/en/, avec sélecteur de langue.Les 5 GIF de l'export anglais sont les mêmes enregistrements que les français, réencodés sept fois plus lourds (71 Mo contre 10) : ils sont mutualisés plutôt que dupliqués.
Navigation
Une seule colonne : le sommaire de la page est intégré à la navigation de gauche, sous le chapitre courant. Les trois niveaux — chapitre, pages, sections — sont distingués visuellement. Les liens sortants s'ouvrent dans un nouvel onglet.
Export PDF
Chaque build régénère un PDF par langue à partir des pages du site : la version imprimable ne peut pas diverger du contenu en ligne.
Vérifié sur les fichiers réellement produits : 35 pages en français, 32 en anglais, 44 titres sur 44, 98 liens internes navigables, polices incorporées et sous-ensemblées, couverture avec logo, matrice des produits entière sur sa page.
Outillage
tools/import-google-doc.py: réimport reproductible, par langue. Signale tout lien interne non résolu.mkdocs.base.yml/mkdocs.yml(prod) /mkdocs.local.yml(dev) : les deux environnements ne diffèrent que par l'export PDF.mkdocs build --stricten CI : un lien mort ou une page absente denav:fait échouer le build.site_url,repo_url,copyright,.gitignoreajoutés.Vérifications
À traiter après la fusion
🤖 Generated with Claude Code