Typo : plus de mot ni de signe seul en fin de ligne

- text-wrap-style pretty sur les paragraphes, listes, légendes et chapôs, balance sur les titres
  (landing, guides statiques, base pz.css de l'app). Longhand pour ne pas réactiver le retour
  à la ligne là où white-space: nowrap est posé. Les noms de l'arbre sont sur le canvas, non touchés.
- Espaces insécables du français dans le texte visible : fine insécable avant ? ! ;,
  insécable avant : et dans les guillemets, entre un nombre et son unité (Mo, Go, €, dpi).
  Landing (i18n.js, bloc fr hors meta) et pages guides FR (corps de page, hors script).
- App : frenchTypography() appliquée par t() en français, avant le remplacement des variables ;
  le dictionnaire anglais reste indexé sur le français tel qu'écrit. Tests mis à jour.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
This commit is contained in:
IliesAllaliandClaude Opus 5.5 committed 2026-10-04 17:06:44 +02:00
1 parent d7c86b5ae8
commit 10f1fc5d14
16 files changed
+102 -60

No files matched your search

+10 -1
View File
@@ -3,7 +3,7 @@ import { join } from 'node:path'
import { fileURLToPath } from 'node:url'
import { describe, expect, it } from 'vitest'
import en from './en/index.js'
import { t } from './index.js'
import { frenchTypography, t } from './index.js'
const SRC = fileURLToPath(new URL('..', import.meta.url))
@@ -45,4 +45,13 @@ describe('i18n', () => {
const mismatched = Object.entries(en).filter(([fr, english]) => vars(fr) !== vars(english)).map(([fr]) => fr)
expect(mismatched).toEqual([])
})
it('pose les espaces insécables du français sans toucher aux variables', () => {
expect(frenchTypography('Quitter {em} ?')).toBe('Quitter {em}\u202F?')
expect(frenchTypography('Prénom : {name}')).toBe('Prénom\u00A0: {name}')
expect(frenchTypography('Touchez « Ajouter »')).toBe('Touchez «\u00A0Ajouter\u00A0»')
expect(frenchTypography('Jusqu’à 20 Mo, {n} Mo')).toBe('Jusqu’à 20\u00A0Mo, {n}\u00A0Mo')
expect(frenchTypography('https://app.parenthese.io/?lang=fr')).toBe('https://app.parenthese.io/?lang=fr')
expect(frenchTypography('?')).toBe('?')
})
})
+22 -1
View File
@@ -39,8 +39,29 @@ if (typeof document !== 'undefined') document.documentElement.lang = locale
const missing = new Set()
// Typographie française : espace fine insécable avant ? ! ;, insécable avant : et à l'intérieur
// des « », insécable entre un nombre (ou une variable) et son unité. Appliquée au texte avant le
// remplacement des variables, qui gardent leurs espaces (noms, adresses). Le dictionnaire anglais
// reste indexé sur le français tel qu'écrit dans le code.
const NNBSP = '\u202F'
const NBSP = '\u00A0'
const typoCache = new Map()
export function frenchTypography(text) {
if (typeof text !== 'string') return text
let out = typoCache.get(text)
if (out !== undefined) return out
out = text
.replace(/(?<=[^\s\u00A0\u202F])[ \u00A0](?=[?!;])/g, NNBSP)
.replace(/(?<=[^\s\u00A0\u202F])[ \u202F](?=:)/g, NBSP)
.replace(/«[ \u202F]?(?!\u00A0)/g, `«${NBSP}`)
.replace(/(?<!\u00A0)[ \u202F]?»/g, `${NBSP}»`)
.replace(/(?<=[\d}]) (?=(?:%|€|km|kg|cm|mm|Mo|Go|Ko|ko|min|px|h)(?![\p{L}\d]))/gu, NBSP)
typoCache.set(text, out)
return out
}
export function t(fr, vars) {
let text = fr
let text = locale === 'fr' ? frenchTypography(fr) : fr
if (locale === 'en') {
if (Object.prototype.hasOwnProperty.call(en, fr)) text = en[fr]
else if (import.meta.env?.DEV && !missing.has(fr)) {
+5
View File
@@ -36,6 +36,11 @@
}
/* ── Typo ─────────────────────────────────────────────────────── */
/* Pas de mot ni de signe seul en fin de paragraphe (fenêtres, fiche, accueil, écrans d'accès).
Les noms de l'arbre sont dessinés sur le canvas, ces règles ne les touchent pas.
Longhand : ne réactive pas le retour à la ligne là où white-space: nowrap est posé. */
h1, h2, h3, h4 { text-wrap-style: balance; }
p, li, blockquote, figcaption, dd, .pz-sub, .pz-small, .pz-hint, .pz-error, .pz-success { text-wrap-style: pretty; }
.pz-eyebrow { font: 500 12px/1.3 var(--pz-sans); letter-spacing: .1em; text-transform: uppercase; color: var(--pz-muted); margin: 0; }
.pz-title { font: 400 30px/1.1 var(--pz-serif); letter-spacing: -.01em; color: var(--pz-ink); margin: 0; text-wrap: balance; }
.pz-title em { font-style: italic; font-weight: 300; }
+5 -5
View File
@@ -56,7 +56,7 @@ describe('getAccountErrorMessage', () => {
it('returns media size message for image_too_large', () => {
expect(getAccountErrorMessage({ status: 400, message: 'image_too_large' }))
.toBe('Image trop volumineuse (maximum 5 Mo).')
.toBe('Image trop volumineuse (maximum 5\u00A0Mo).')
})
it('returns invalid avatar format message', () => {
@@ -89,7 +89,7 @@ describe('getAccountErrorMessage', () => {
status: 400,
message: 'invalid_payload',
payload: { error: 'invalid_payload', details: { fieldErrors: { slug: ['too short'] }, formErrors: [] } },
})).toBe('Slug invalide : 3-64 caractères, uniquement lettres minuscules, chiffres et tirets.')
})).toBe('Slug invalide\u00A0: 3-64 caractères, uniquement lettres minuscules, chiffres et tirets.')
})
it('returns name validation message for invalid_payload with name error', () => {
@@ -97,7 +97,7 @@ describe('getAccountErrorMessage', () => {
status: 400,
message: 'invalid_payload',
payload: { error: 'invalid_payload', details: { fieldErrors: { name: ['too short'] }, formErrors: [] } },
})).toBe("Nom d'arbre invalide : entre 2 et 120 caractères.")
})).toBe("Nom d'arbre invalide\u00A0: entre 2 et 120 caractères.")
})
it('returns password validation message for invalid_payload with password error', () => {
@@ -105,7 +105,7 @@ describe('getAccountErrorMessage', () => {
status: 400,
message: 'invalid_payload',
payload: { error: 'invalid_payload', details: { fieldErrors: { visitorPassword: ['too short'] }, formErrors: [] } },
})).toBe('Mots de passe invalides : entre 8 et 128 caractères.')
})).toBe('Mots de passe invalides\u00A0: entre 8 et 128 caractères.')
})
it('returns generic field error for unknown field', () => {
@@ -121,7 +121,7 @@ describe('getAccountErrorMessage', () => {
status: 400,
message: 'invalid_payload',
payload: { error: 'invalid_payload', details: { fieldErrors: {}, formErrors: ['Something went wrong'] } },
})).toBe('Erreur formulaire : Something went wrong')
})).toBe('Erreur formulaire\u00A0: Something went wrong')
})
it('returns generic 400 message for non-validation errors', () => {
+2 -2
View File
@@ -34,8 +34,8 @@ describe('mediaUpload utils', () => {
it('validates media size constraints', () => {
expect(validateMediaFile(null, 'photo')).toBe('Sélectionnez un fichier.')
expect(validateMediaFile({ size: 0 }, 'photo')).toBe('Fichier invalide.')
expect(validateMediaFile({ size: 25 * 1024 * 1024 }, 'document')).toBe('Fichier trop volumineux (max 20 Mo).')
expect(validateMediaFile({ size: 6 * 1024 * 1024 }, 'photo')).toBe('Image trop volumineuse (max 5 Mo).')
expect(validateMediaFile({ size: 25 * 1024 * 1024 }, 'document')).toBe('Fichier trop volumineux (max 20\u00A0Mo).')
expect(validateMediaFile({ size: 6 * 1024 * 1024 }, 'photo')).toBe('Image trop volumineuse (max 5\u00A0Mo).')
expect(validateMediaFile({ size: 4 * 1024 * 1024 }, 'photo')).toBe('')
expect(validateMediaFile(null, 'citation', { citationText: '' })).toBe('Saisissez le texte de la citation.')
expect(validateMediaFile(null, 'citation', { citationText: 'Toujours avancer' })).toBe('')
+4 -4
View File
@@ -131,19 +131,19 @@
<p>Vérifiez les majuscules et qu'il n'y a pas d'espace en trop avant ou après. S'il est toujours refusé, il a peut-être été changé. Demandez le nouveau à la personne qui gère l'arbre.</p>
</details>
<details>
<summary>Faut-il créer un compte&nbsp;?</summary>
<summary>Faut-il créer un compte ?</summary>
<p>Non. Le lien et le mot de passe suffisent pour regarder l'arbre et y ajouter des souvenirs. Un compte sert seulement à retrouver l'arbre sans retaper le mot de passe.</p>
</details>
<details>
<summary>Est-ce que ça marche sur ordinateur&nbsp;?</summary>
<summary>Est-ce que ça marche sur ordinateur ?</summary>
<p>Oui. Les mêmes boutons se trouvent en bas à droite de l'écran. Pour agrandir l'arbre, tournez la molette de la souris, et cliquez sur un portrait pour ouvrir sa fiche.</p>
</details>
<details>
<summary>Ma photo ne passe pas</summary>
<p>Une photo peut peser jusqu'à 5 Mo et une vidéo jusqu'à 20 Mo. Si elle est refusée, envoyez-la en taille réduite, ou demandez à quelqu'un de la famille de l'ajouter pour vous.</p>
<p>Une photo peut peser jusqu'à 5 Mo et une vidéo jusqu'à 20 Mo. Si elle est refusée, envoyez-la en taille réduite, ou demandez à quelqu'un de la famille de l'ajouter pour vous.</p>
</details>
<details>
<summary>Qui peut voir l'arbre&nbsp;?</summary>
<summary>Qui peut voir l'arbre ?</summary>
<p>Seules les personnes qui ont le lien et le mot de passe. L'arbre n'apparaît pas dans les moteurs de recherche. Le détail est sur la page <a href="/donnees-et-vie-privee/">données et vie privée</a>.</p>
</details>
</div>
@@ -63,7 +63,7 @@
<main>
<article class="wrap">
<span class="eyebrow">Guide</span>
<h1>Quelle application d'arbre généalogique choisir ?</h1>
<h1>Quelle application d'arbre généalogique choisir ?</h1>
<p class="lead">La question cache deux besoins différents. Retrouver des ancêtres dans les archives, ou rassembler ce que votre famille sait encore d'elle-même avant que ça se perde. Les bons outils ne sont pas les mêmes.</p>
<h2>Commencez par nommer votre besoin</h2>
@@ -109,33 +109,33 @@
</table>
<div class="note">
<p><strong>Un critère que personne ne regarde.</strong> Qui va ouvrir l'arbre dans dix ans ? Un logiciel installé sur un ordinateur qui n'existera plus, un abonnement arrêté, ou un lien que toute la famille connaît déjà. Choisissez l'outil que vos enfants sauront ouvrir.</p>
<p><strong>Un critère que personne ne regarde.</strong> Qui va ouvrir l'arbre dans dix ans ? Un logiciel installé sur un ordinateur qui n'existera plus, un abonnement arrêté, ou un lien que toute la famille connaît déjà. Choisissez l'outil que vos enfants sauront ouvrir.</p>
</div>
<h2>Questions fréquentes</h2>
<div class="faq">
<details>
<summary>Quelle est la meilleure application d'arbre généalogique ?</summary>
<summary>Quelle est la meilleure application d'arbre généalogique ?</summary>
<p>Il n'y en a pas une seule. Pour retrouver des ancêtres dans les archives, Geneanet, Filae ou FamilySearch. Pour rassembler les photos, les vidéos et les souvenirs d'une famille vivante et les partager, Parenthèse. Beaucoup de familles utilisent les deux.</p>
</details>
<details>
<summary>Où créer un arbre généalogique gratuitement ?</summary>
<summary>Où créer un arbre généalogique gratuitement ?</summary>
<p>Geneanet et FamilySearch proposent un arbre gratuit orienté recherche. Parenthèse est gratuit, et le restera. L'arbre se consulte sans compte, par un simple lien.</p>
</details>
<details>
<summary>Geneanet est-il gratuit ?</summary>
<p>Oui, pour l'arbre. L'inscription gratuite permet d'héberger un arbre sans limite de taille, de le sauvegarder, de consulter les arbres des autres membres et les fonds collaboratifs (tombes, relevés, registres, cartes postales), avec 1 Go pour les photos et documents privés. L'abonnement Premium, à partir de 4,13 € par mois, ajoute la recherche avancée (conjoint, parents, variantes orthographiques, lieux voisins), les relevés d'archives indexés, la Bibliothèque Généalogique, les indices et alertes automatiques, et 10 Go de stockage.</p>
<summary>Geneanet est-il gratuit ?</summary>
<p>Oui, pour l'arbre. L'inscription gratuite permet d'héberger un arbre sans limite de taille, de le sauvegarder, de consulter les arbres des autres membres et les fonds collaboratifs (tombes, relevés, registres, cartes postales), avec 1 Go pour les photos et documents privés. L'abonnement Premium, à partir de 4,13 € par mois, ajoute la recherche avancée (conjoint, parents, variantes orthographiques, lieux voisins), les relevés d'archives indexés, la Bibliothèque Généalogique, les indices et alertes automatiques, et 10 Go de stockage.</p>
</details>
<details>
<summary>MyHeritage est-il gratuit ?</summary>
<p>En partie. L'inscription est gratuite et donne un site familial Basic, avec un arbre limité à 250 personnes. La recherche dans les archives est gratuite, mais la consultation de certains documents demande un abonnement Data. Les formules payantes (Premium, PremiumPlus, Data, Complet, Omni) sont facturées à l'année. Premium, la moins chère, est affichée à 99 € par an sur la page tarifs française (65 € la première année) et porte l'arbre à 2 500 personnes. PremiumPlus le rend illimité.</p>
<summary>MyHeritage est-il gratuit ?</summary>
<p>En partie. L'inscription est gratuite et donne un site familial Basic, avec un arbre limité à 250 personnes. La recherche dans les archives est gratuite, mais la consultation de certains documents demande un abonnement Data. Les formules payantes (Premium, PremiumPlus, Data, Complet, Omni) sont facturées à l'année. Premium, la moins chère, est affichée à 99 € par an sur la page tarifs française (65 € la première année) et porte l'arbre à 2 500 personnes. PremiumPlus le rend illimité.</p>
</details>
<details>
<summary>Faut-il un logiciel à installer ?</summary>
<summary>Faut-il un logiciel à installer ?</summary>
<p>Non. Les logiciels comme Heredis restent utiles pour ceux qui cherchent leurs ancêtres et veulent tout garder sur leur ordinateur. Un arbre en ligne se partage en famille sans rien installer, sur téléphone comme sur ordinateur.</p>
</details>
<details>
<summary>Peut-on passer de l'un à l'autre ?</summary>
<summary>Peut-on passer de l'un à l'autre ?</summary>
<p>Oui, par le format GEDCOM, que tous ces outils lisent et écrivent. Parenthèse importe et exporte le GEDCOM, donc vous pouvez partir d'un arbre Geneanet et y ajouter la mémoire vivante, ou l'inverse.</p>
</details>
</div>
@@ -177,19 +177,19 @@
<h2>Questions fréquentes</h2>
<div class="faq">
<details>
<summary>Combien de générations mettre dans un arbre généalogique ?</summary>
<summary>Combien de générations mettre dans un arbre généalogique ?</summary>
<p>Trois pour un premier arbre ou un travail d'école, quatre si vous connaissez vos arrière-grands-parents, cinq en éventail pour aller jusqu'aux trisaïeuls. Chaque génération double le nombre de cases, soit 2, 4, 8 puis 16 personnes.</p>
</details>
<details>
<summary>Comment faire un arbre généalogique soi-même ?</summary>
<summary>Comment faire un arbre généalogique soi-même ?</summary>
<p>Imprimez un modèle vierge, remplissez votre case, puis celles de vos parents et grands-parents en interrogeant la famille. Le livret de famille donne les dates exactes, les archives départementales en ligne donnent les actes plus anciens.</p>
</details>
<details>
<summary>Les modèles d'arbre généalogique sont-ils gratuits ?</summary>
<summary>Les modèles d'arbre généalogique sont-ils gratuits ?</summary>
<p>Oui. Les cinq modèles se téléchargent sans inscription ni adresse e-mail, et vous pouvez les imprimer et les partager autant que vous voulez.</p>
</details>
<details>
<summary>Comment imprimer un arbre généalogique en A3 ?</summary>
<summary>Comment imprimer un arbre généalogique en A3 ?</summary>
<p>Ouvrez le PDF, choisissez le format A3 dans la fenêtre d'impression et l'option « ajuster à la page ». Le modèle s'agrandit sans perdre en netteté, ce qui donne plus de place pour écrire, surtout sur l'éventail à cinq générations.</p>
</details>
</div>
@@ -71,12 +71,12 @@
<h2>2. Numériser sans matériel</h2>
<p>Un téléphone suffit. Posez la photo à plat près d'une fenêtre, sans flash, l'appareil parallèle au tirage, et prenez la vue un peu plus large que la photo pour la recadrer ensuite. Les applications de numérisation (Google PhotoScan, Notes sur iPhone, Adobe Scan) corrigent les reflets en assemblant plusieurs prises.</p>
<p>Avec un scanner, 300 dpi suffisent pour un tirage 10 × 15 ; montez à 600 dpi pour les petits formats anciens que vous voudrez agrandir. Gardez l'original numérisé tel quel, et faites vos retouches sur une copie.</p>
<p>Avec un scanner, 300 dpi suffisent pour un tirage 10 × 15 ; montez à 600 dpi pour les petits formats anciens que vous voudrez agrandir. Gardez l'original numérisé tel quel, et faites vos retouches sur une copie.</p>
<h2>3. Nommer et dater tout de suite</h2>
<p>Une photo sans nom ni date perd sa valeur en une génération. C'est la seule règle qui n'a pas d'exception. Au moment où vous ajoutez une image dans l'arbre, écrivez qui est dessus, où, quand, et une ligne sur le contexte. Trente secondes maintenant, ou une énigme pour vos petits-enfants.</p>
<h2>4. Une photo par case, ou une vie par personne ?</h2>
<h2>4. Une photo par case, ou une vie par personne ?</h2>
<p>Les modèles d'arbre à imprimer, les cadres muraux et les affiches personnalisées tiennent une photo par personne. C'est un bel objet à offrir, et il se fige le jour de l'impression. Rien ne s'y ajoute.</p>
<p>Dans un arbre numérique, chaque personne porte tout ce qu'on sait d'elle, plusieurs photos à différents âges, une vidéo de mariage, un enregistrement de sa voix, une anecdote racontée par un cousin. Et l'arbre continue de grandir quand la famille y ajoute les siennes.</p>
<div class="note">
@@ -88,20 +88,20 @@
<p>Dans Parenthèse, chaque personne peut porter des photos, des vidéos, des enregistrements audio, des documents et des citations. Ils entourent son portrait dans l'arbre, et s'ouvrent d'un clic.</p>
<h2>6. Partager, pour que les autres complètent</h2>
<p>Un arbre que vous êtes seul à alimenter s'arrête à ce que vous savez. Envoyez le lien à la famille. Avec Parenthèse, ils consultent sans créer de compte ; avec le mot de passe de contribution, ils proposent leurs photos et leurs corrections, et vous validez, ou vous laissez passer directement si vous préférez. Les cousins éloignés sont souvent ceux qui ont la photo qui manque.</p>
<p>Un arbre que vous êtes seul à alimenter s'arrête à ce que vous savez. Envoyez le lien à la famille. Avec Parenthèse, ils consultent sans créer de compte ; avec le mot de passe de contribution, ils proposent leurs photos et leurs corrections, et vous validez, ou vous laissez passer directement si vous préférez. Les cousins éloignés sont souvent ceux qui ont la photo qui manque.</p>
<h2>Questions fréquentes</h2>
<div class="faq">
<details>
<summary>Comment faire un arbre généalogique avec des photos ?</summary>
<summary>Comment faire un arbre généalogique avec des photos ?</summary>
<p>Rassemblez, numérisez, nommez et datez, puis placez chaque photo sur la fiche de la bonne personne dans un arbre numérique que la famille ouvre par un lien. Un modèle à imprimer ne tient qu'une photo par case.</p>
</details>
<details>
<summary>Où créer gratuitement un arbre généalogique avec des photos ?</summary>
<summary>Où créer gratuitement un arbre généalogique avec des photos ?</summary>
<p>Parenthèse est gratuit, et le restera. Chaque personne peut porter plusieurs photos, des vidéos et des enregistrements, et l'arbre se consulte sans compte.</p>
</details>
<details>
<summary>Quel format et quelle taille pour les photos ?</summary>
<summary>Quel format et quelle taille pour les photos ?</summary>
<p>JPEG ou HEIC tels que sortis du téléphone, sans compression supplémentaire. Parenthèse redimensionne lui-même pour l'affichage et garde l'original en qualité haute pour l'agrandissement.</p>
</details>
</div>
@@ -151,23 +151,23 @@
<h2>Questions fréquentes</h2>
<div class="faq">
<details>
<summary>Comment faire son arbre généalogique soi-même ?</summary>
<summary>Comment faire son arbre généalogique soi-même ?</summary>
<p>Commencez par vous, vos parents et vos grands-parents, avec ce que vous savez déjà. Interrogez ensuite les plus âgés de la famille, rassemblez les papiers, puis cherchez les actes qui manquent à la mairie et aux archives départementales. Il n'y a pas besoin d'être spécialiste, il faut surtout noter d'où vient chaque information.</p>
</details>
<details>
<summary>Comment créer un arbre généalogique gratuitement ?</summary>
<summary>Comment créer un arbre généalogique gratuitement ?</summary>
<p>Toutes les étapes peuvent être gratuites. Les demandes d'actes en mairie ne coûtent rien, les registres numérisés des archives départementales se consultent gratuitement en ligne, et plusieurs outils proposent un arbre gratuit, comme Geneanet, FamilySearch ou Parenthèse pour garder photos, voix et souvenirs.</p>
</details>
<details>
<summary>Quel est le tarif d'un arbre généalogique ?</summary>
<summary>Quel est le tarif d'un arbre généalogique ?</summary>
<p>Fait soi-même, il ne coûte rien. Les dépenses possibles sont un abonnement à un site de recherche pour accéder à des index payants, le recours à un professionnel de la recherche, qui travaille sur devis, ou l'impression d'un arbre décoratif.</p>
</details>
<details>
<summary>Comment faire son arbre généalogique sur ordinateur ?</summary>
<summary>Comment faire son arbre généalogique sur ordinateur ?</summary>
<p>Deux options. Un logiciel à installer garde tout sur votre machine et convient à un travail de recherche au long cours. Un arbre en ligne s'ouvre depuis n'importe quel ordinateur ou téléphone et se partage avec la famille. Le format GEDCOM permet de passer de l'un à l'autre.</p>
</details>
<details>
<summary>Comment retrouver ses ancêtres sur internet gratuitement ?</summary>
<summary>Comment retrouver ses ancêtres sur internet gratuitement ?</summary>
<p>Sur le site des archives départementales du lieu où vivaient vos ancêtres, qui ont numérisé les registres paroissiaux et d'état civil, et sur la base de noms de FranceArchives, qui compile les recensements de 1836 à 1936 et les registres matricules militaires de 1867 à 1925. Geneanet et FamilySearch proposent aussi des arbres et des index consultables gratuitement.</p>
</details>
</div>
+8 -8
View File
@@ -90,7 +90,7 @@
<h2>5. Collecter les souvenirs le jour même</h2>
<p>Demandez dans l'invitation que chacun apporte une photo ancienne et une histoire. Le jour J, une personne tient un téléphone. Elle photographie les photos apportées, enregistre trois minutes de chaque ancien qui raconte, filme le moment du gâteau. C'est le seul jour de l'année où tous ceux qui savent sont dans la même pièce.</p>
<div class="note">
<p><strong>La question qui fait parler.</strong> « Comment tes parents se sont rencontrés ? » Personne ne la pose jamais, tout le monde a une réponse.</p>
<p><strong>La question qui fait parler.</strong> « Comment tes parents se sont rencontrés ? » Personne ne la pose jamais, tout le monde a une réponse.</p>
</div>
<h2>6. Garder une trace que tout le monde retrouve</h2>
@@ -100,31 +100,31 @@
<h2>Questions fréquentes</h2>
<div class="faq">
<details>
<summary>Combien de temps à l'avance organiser une cousinade ?</summary>
<summary>Combien de temps à l'avance organiser une cousinade ?</summary>
<p>Six mois pour une trentaine de personnes, un an au-delà de cent. Le point qui bloque n'est pas le lieu, c'est de retrouver et prévenir toutes les branches.</p>
</details>
<details>
<summary>Comment retrouver tous les cousins à inviter ?</summary>
<summary>Comment retrouver tous les cousins à inviter ?</summary>
<p>En partant de l'arbre. Chaque branche connue mène à une personne qui connaît la suivante. Un arbre partagé en ligne que chacun complète fait ce travail en quelques semaines.</p>
</details>
<details>
<summary>Que faire des photos après la cousinade ?</summary>
<summary>Que faire des photos après la cousinade ?</summary>
<p>Les placer sur les personnes qu'elles montrent dans un arbre partagé, avec les enregistrements et les vidéos du jour. Un groupe de messagerie les perd en quelques semaines.</p>
</details>
<details>
<summary>Qui invite-t-on à une cousinade ?</summary>
<summary>Qui invite-t-on à une cousinade ?</summary>
<p>Tous les descendants d'un même couple d'ancêtres, avec leurs conjoints et leurs enfants. Choisissez le couple de départ selon la taille voulue. Les grands-parents donnent une trentaine de personnes, les arrière-grands-parents souvent plus de cent.</p>
</details>
<details>
<summary>Quel budget pour une cousinade ?</summary>
<summary>Quel budget pour une cousinade ?</summary>
<p>Une participation par adulte couvre le lieu et le repas. Demandez le prix du lieu et du traiteur, divisez par le nombre d'adultes attendus, et ajoutez une petite marge pour les absents de dernière minute. Une salle des fêtes communale coûte bien moins qu'un gîte de groupe loué pour le week-end. Les enfants participent peu ou pas.</p>
</details>
<details>
<summary>Que peut-on préparer pour un repas de cousinade ?</summary>
<summary>Que peut-on préparer pour un repas de cousinade ?</summary>
<p>Un repas où chaque branche apporte un plat, le plus simple à organiser, ou un traiteur pour le plat principal si le groupe dépasse cinquante personnes. Proposez à chaque branche d'apporter la recette de famille, celle qu'on ne mange que chez elle. Prévoyez des tables longues plutôt que des tables rondes, pour que les branches se mélangent.</p>
</details>
<details>
<summary>Quelles activités prévoir pour une cousinade ?</summary>
<summary>Quelles activités prévoir pour une cousinade ?</summary>
<p>Peu, et qui font parler. Un grand arbre affiché au mur où chacun retrouve sa place, un moment où les plus anciens racontent, une photo de groupe par branche, un jeu de devinettes sur les photos d'enfance apportées par chacun. Pour les enfants, un espace à eux et un adulte par tranche d'âge.</p>
</details>
</div>
@@ -59,7 +59,7 @@
<p><strong>Votre compte.</strong> Votre adresse email et votre mot de passe, stocké sous forme de hachage (bcrypt), donc personne ne peut le relire, moi compris. La date de création du compte et le dernier arbre ouvert, pour vous y ramener à la connexion. Le prénom demandé à l'inscription n'est pas envoyé au serveur, il reste dans votre navigateur.</p>
<p><strong>Vos arbres.</strong> Le nom, la description, l'adresse de partage, les réglages, et le mot de passe de partage. Il est haché pour vérifier l'accès, et gardé chiffré pour que le propriétaire puisse le relire et le renvoyer à sa famille.</p>
<p><strong>Les personnes.</strong> Ce que vous saisissez sur chacune, prénom, nom, nom de naissance, dates et lieu de naissance et de décès, profession, région, nationalité, sexe, notes, portrait. Et les unions et liens de filiation qui les relient.</p>
<p><strong>Les médias.</strong> Photos, vidéos, enregistrements audio, documents, tracés GPS, citations et liens YouTube posés sur une personne, avec leur légende et leur source. Une photo fait 5 Mo au plus, un autre fichier 20 Mo. Les photos sont réenregistrées sans leurs métadonnées (position GPS, appareil, date de prise de vue), et la position est retirée des vidéos de téléphone. S'y ajoutent les annotations posées sur l'arbre lui-même, textes, dessins, autocollants, photos.</p>
<p><strong>Les médias.</strong> Photos, vidéos, enregistrements audio, documents, tracés GPS, citations et liens YouTube posés sur une personne, avec leur légende et leur source. Une photo fait 5 Mo au plus, un autre fichier 20 Mo. Les photos sont réenregistrées sans leurs métadonnées (position GPS, appareil, date de prise de vue), et la position est retirée des vidéos de téléphone. S'y ajoutent les annotations posées sur l'arbre lui-même, textes, dessins, autocollants, photos.</p>
<p><strong>Les contributions.</strong> Quand quelqu'un propose une modification, Parenthèse garde la proposition, l'état avant et après, qui l'a soumise (l'adresse email d'un membre, ou pour un accès par mot de passe le prénom que la personne a donné, sinon « Contributeur ») et la décision prise.</p>
<p><strong>Le journal de l'arbre.</strong> Chaque création, modification et suppression est datée et attribuée à un compte ou à un accès par mot de passe. Le propriétaire peut le consulter. Il sert à savoir qui a changé quoi.</p>
<p><strong>Les visites.</strong> Chaque ouverture d'un arbre est notée, avec la date, le type d'appareil (téléphone, tablette ou ordinateur), le compte s'il y en a un, et le prénom si la personne l'a donné en ouvrant l'arbre. L'adresse IP n'est pas gardée, seule une empreinte impossible à retourner sert à compter les visiteurs distincts. Le propriétaire de l'arbre voit ces visites. Elles sont effacées au bout d'un an.</p>
+4 -1
View File
@@ -36,7 +36,10 @@ header.top .wrap { display: flex; align-items: center; justify-content: space-be
/* Article */
main { padding: 56px 0 24px; }
.eyebrow { display: inline-block; font: 500 12px/1.3 var(--sans); letter-spacing: 0.1em; text-transform: uppercase; color: var(--doux); margin-bottom: 16px; }
h1, h2, h3 { font-family: var(--serif); text-wrap: balance; color: var(--encre); }
h1, h2, h3 { font-family: var(--serif); color: var(--encre); }
/* Pas de mot ni de signe seul en fin de paragraphe, titres équilibrés sur leurs lignes */
h1, h2, h3, h4 { text-wrap-style: balance; }
p, li, blockquote, figcaption, dd, td, .lead, .note { text-wrap-style: pretty; }
h1 { font-size: clamp(36px, 5vw, 54px); line-height: 1.06; font-weight: 300; margin: 0 0 20px; letter-spacing: -0.02em; }
.lead { font-size: 20px; line-height: 1.55; color: var(--encre2); margin: 0 0 40px; }
h2 { font-size: 30px; line-height: 1.2; font-weight: 400; margin: 52px 0 14px; letter-spacing: -0.01em; }
@@ -74,13 +74,13 @@
<h2>Les questions qui font parler</h2>
<p>Les questions larges (« raconte-moi ta vie ») bloquent. Les questions concrètes ouvrent. En voici quelques-unes qui marchent à chaque fois.</p>
<ul>
<li>Comment tes parents se sont rencontrés ?</li>
<li>À quoi ressemblait la maison où tu as grandi ? Qui dormait où ?</li>
<li>Qu'est-ce qu'on mangeait le dimanche ?</li>
<li>Quel est le premier événement du monde dont tu te souviens ?</li>
<li>Qu'est-ce que tes parents ne t'ont jamais dit et que tu as compris plus tard ?</li>
<li>De quoi tu es le plus fier ?</li>
<li>Qu'est-ce que tu voudrais que tes petits-enfants sachent de toi ?</li>
<li>Comment tes parents se sont rencontrés ?</li>
<li>À quoi ressemblait la maison où tu as grandi ? Qui dormait où ?</li>
<li>Qu'est-ce qu'on mangeait le dimanche ?</li>
<li>Quel est le premier événement du monde dont tu te souviens ?</li>
<li>Qu'est-ce que tes parents ne t'ont jamais dit et que tu as compris plus tard ?</li>
<li>De quoi tu es le plus fier ?</li>
<li>Qu'est-ce que tu voudrais que tes petits-enfants sachent de toi ?</li>
</ul>
<p>Une question, puis le silence. Ne comblez pas les blancs, c'est là que viennent les vraies réponses.</p>
@@ -106,15 +106,15 @@
<h2>Questions fréquentes</h2>
<div class="faq">
<details>
<summary>Comment connaître son histoire familiale ?</summary>
<summary>Comment connaître son histoire familiale ?</summary>
<p>En interrogeant les plus âgés tant qu'ils sont là, avec des questions concrètes, en enregistrant les réponses, puis en rassemblant ce qu'on apprend avec les photos et les papiers de famille dans un endroit que toute la famille peut ouvrir.</p>
</details>
<details>
<summary>Par qui commencer ?</summary>
<summary>Par qui commencer ?</summary>
<p>Par la personne la plus âgée qui a encore envie de parler, et par ce qu'elle a vécu elle-même. Les archives attendent, les souvenirs de première main non.</p>
</details>
<details>
<summary>Faut-il écrire un livre ?</summary>
<summary>Faut-il écrire un livre ?</summary>
<p>Non. Un livre est un bel aboutissement, mais il fige et demande des mois. Un arbre vivant se commence en une heure et s'enrichit à mesure que la famille contribue. Le livre peut venir après, à partir de ce que l'arbre a recueilli.</p>
</details>
</div>
+1 -1
View File
@@ -84,7 +84,7 @@ export const COPY = {
},
{
href: '/application-arbre-genealogique/',
title: "Quelle application d'arbre généalogique choisir ?",
title: "Quelle application d'arbre généalogique choisir ?",
text: 'Geneanet, MyHeritage, Filae, FamilySearch, Parenthèse. Rechercher des ancêtres et garder une mémoire vivante ne sont pas le même besoin.',
},
{
+5 -1
View File
@@ -25,7 +25,11 @@ body {
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
h1, h2, h3, h4 { font-weight: 400; text-wrap: balance; }
h1, h2, h3, h4 { font-weight: 400; }
/* Pas de mot ni de signe seul en fin de paragraphe, titres équilibrés sur leurs lignes */
/* (longhand : ne réactive pas le retour à la ligne là où white-space: nowrap est posé) */
h1, h2, h3, h4, .t-d1, .t-d2, .t-h2, .t-h3 { text-wrap-style: balance; }
p, li, blockquote, figcaption, dd, .lede, .t-small { text-wrap-style: pretty; }
:focus-visible { outline: 2px solid var(--a500); outline-offset: 3px; border-radius: 6px; }
.wrap { width: 100%; max-width: 1200px; margin-inline: auto; padding-inline: var(--gut); }