🪄🖨️

L'atelier à cartes

Ajuster le texte 📥 Télécharger la carte 📖 Télécharger le livret 📄 Télécharger l'affiche A4

⚙️ Architecture des vues

Vue	Fichiers CSS	Cible
Print	`cards-print.css`	Impression A6, Puppeteer PDF
Web	`cards.css`	Modale desktop 700px
Mobile	`cards.css`	Tuile 300px + Modale 360px

Fichiers clés

assets/css/style.css - Variables globales (couleurs, fonts)
assets/css/cards.css - Styles tuiles + modales (site public)
assets/css/cards-print.css - Styles print A6 (à modifier pour le rendu PDF)
assets/data/cards-index.json - Index des cartes

🖨️ Tailles Print (A6)

Base: --print-base-font-size: 9pt • Min auto-fit: 6.5pt

Élément	Variable CSS	Taille calculée
H1 (titre carte)	`--print-h1-size: 1.556em`	14pt
H2 (sections)	`--print-h2-size: 1.111em`	10pt
H3 (sous-sections)	`--print-h3-size: 1em`	9pt
H6 (sous-titre)	`--print-h6-size: 1em`	9pt
Corps texte	`1em`	9pt

Dimensions physiques

Format: 105 × 148 mm (A6)
Padding: 5mm
Zone utile: 95 × 138 mm
Border-radius: 3mm

🔄 Fonctionnement du renderer

1. Chargement

cards-index.json → liste les cartes avec path vers le fichier markdown source

2. Parsing Markdown

 sépare le header sticky (H1 + H6) du contenu
 sépare recto et verso pour le print
Marked.js parse le MD → HTML
Twemoji convertit les emojis en SVG

3. Auto-fit (Print)

Réduit font-size de --print-font-size-max à --print-font-size-min par pas de --print-font-size-step jusqu'à ce que le contenu tienne dans la zone A6.

Fichier à modifier : assets/css/cards-print.css

4. Navigation sections (Web/Mobile)

Génère une barre de nav à partir des H2. Intersection Observer gère le scroll-spy.

📊 Carte chargée

← Sélectionner une carte pour voir ses infos

← Sélectionner une carte

Recto A6 105×148mm Source: -

🖨️ Vérifier rendu recto

← Sélectionner une carte

Verso A6 105×148mm Source: -

🖨️ Vérifier rendu verso

Web 700px Source: -

🎴

Sélectionner une carte

← Choisir dans la liste

Tuile 300px Source: cards-index.json

Mobile 360px Source: -