Guides statiques : passage à la DA terracotta

Les 5 pages de landing/public reprennent les tokens, typos et boutons de la
landing (fond grège, encre, accent terracotta, Newsreader + DM Sans chargées
par Google Fonts). Logo du header remplacé par /logo.svg, theme-color à
#FBFAF7. Suppression des polices Bradford de landing/public/fonts, qui
n'étaient plus référencées que par guides.css.

Co-Authored-By: Claude Opus 5.5 (1M context) <noreply@anthropic.com>
This commit is contained in:
IliesAllaliandClaude Opus 5.5 committed 2026-09-25 11:42:37 +02:00
1 parent 5b5636e1be
commit ffc2db759c
6 files changed
+105 -55

No files matched your search

@@ -3,7 +3,7 @@
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="theme-color" content="#FDF8EC" />
<meta name="theme-color" content="#FBFAF7" />
<title>Quelle application d'arbre généalogique choisir ? Geneanet, MyHeritage, Filae, Parenthèse</title>
<meta name="description" content="Rechercher des ancêtres ou partager la mémoire de sa famille : ce ne sont pas les mêmes outils. Comparatif honnête de Geneanet, MyHeritage, Filae, FamilySearch, des modèles à imprimer et de Parenthèse." />
<link rel="canonical" href="https://parenthese.io/application-arbre-genealogique/" />
@@ -17,6 +17,9 @@
<meta name="twitter:card" content="summary_large_image" />
<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
<link rel="apple-touch-icon" href="/apple-touch-icon.png" />
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link href="https://fonts.googleapis.com/css2?family=Newsreader:ital,opsz,wght@0,6..72,300;0,6..72,400;1,6..72,300&family=DM+Sans:opsz,wght@9..40,400;9..40,500;9..40,600&display=swap" rel="stylesheet" />
<link rel="stylesheet" href="/guides.css" />
<script type="application/ld+json">
{
@@ -48,8 +51,7 @@
<header class="top">
<div class="wrap">
<a class="brand" href="/" aria-label="Parenthèse, accueil">
<svg viewBox="0 0 400 400" fill="none" aria-hidden="true"><rect width="400" height="400" rx="59" fill="#F7F1E6"/><path d="M174.887 159.122C169.851 167.606 163.424 170.911 155.806 170.911C151.516 170.911 146.062 170.294 139.361 168.956L136.494 168.511C130.481 167.577 124.376 166.512 118.179 165.315C111.028 163.933 103.992 162.551 97.0728 161.169C89.662 160.051 83.4359 159.49 78.1617 159.49C69.1859 159.49 61.0961 161.278 54.0787 164.947C47.0981 168.596 41.4507 173.962 37.0058 180.803C28.1973 194.726 24 213.38 24 236.509V272H51.2117V237.548C51.2117 222.972 53.9416 212.085 58.96 204.553C61.3391 201.15 64.3726 198.736 68.0205 197.145C71.7017 195.54 76.2888 194.653 81.9743 194.653C86.8306 194.653 92.1966 195.123 98.0908 196.096C104.072 197.473 110.278 198.85 116.708 200.225C123.508 201.63 130.268 202.852 137.031 203.902C144.293 205.343 151.478 206.074 158.579 206.074C164.902 206.074 170.875 204.335 176.414 201.175C181.975 198.003 186.682 193.552 190.634 188.003C194.375 182.751 197.378 176.456 199.706 169.182C202.04 176.425 205.273 182.755 209.461 188.131C218.173 199.364 228.964 206.074 242.115 206.074C248.993 206.074 255.953 205.342 262.986 203.9C269.977 202.849 276.746 201.626 283.292 200.225C289.729 198.848 295.941 197.47 301.929 196.091C307.578 195.123 312.823 194.653 317.68 194.653C323.365 194.653 327.952 195.54 331.633 197.145C335.285 198.738 338.321 201.156 340.701 204.565C345.714 212.097 348.441 222.98 348.441 237.548V272H376V236.509C376 214.043 371.791 195.592 363.04 181.394L362.599 180.706C358.225 174.002 352.689 168.723 345.867 165.094C338.785 161.328 330.596 159.49 321.492 159.49C316.218 159.49 309.992 160.051 302.877 161.117C295.867 162.555 288.96 163.935 281.821 165.315C274.739 166.683 267.776 167.88 260.934 168.904C253.938 170.294 248.485 170.911 244.194 170.911C236.556 170.911 230.009 167.586 224.748 159.09C219.607 150.411 216.658 138.373 216.205 122.739L216.096 119H183.904L183.796 122.739C183.341 138.378 180.276 150.405 174.92 159.068Z" fill="#9A734C"/></svg>
<span>Parenthèse</span>
<img src="/logo.svg" alt="" width="166" height="22" />
</a>
<a class="btn" href="https://app.parenthese.io/?account=register&amp;source=guide-application">Créer mon arbre</a>
</div>
@@ -3,7 +3,7 @@
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="theme-color" content="#FDF8EC" />
<meta name="theme-color" content="#FBFAF7" />
<title>Faire un arbre généalogique avec photos, vidéos et voix : le guide</title>
<meta name="description" content="Comment faire un arbre généalogique avec des photos : lesquelles choisir, comment les numériser, où les mettre pour que la famille les voie, et comment y ajouter les vidéos et les voix." />
<link rel="canonical" href="https://parenthese.io/arbre-genealogique-avec-photos/" />
@@ -17,6 +17,9 @@
<meta name="twitter:card" content="summary_large_image" />
<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
<link rel="apple-touch-icon" href="/apple-touch-icon.png" />
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link href="https://fonts.googleapis.com/css2?family=Newsreader:ital,opsz,wght@0,6..72,300;0,6..72,400;1,6..72,300&family=DM+Sans:opsz,wght@9..40,400;9..40,500;9..40,600&display=swap" rel="stylesheet" />
<link rel="stylesheet" href="/guides.css" />
<script type="application/ld+json">
{
@@ -49,8 +52,7 @@
<header class="top">
<div class="wrap">
<a class="brand" href="/" aria-label="Parenthèse, accueil">
<svg viewBox="0 0 400 400" fill="none" aria-hidden="true"><rect width="400" height="400" rx="59" fill="#F7F1E6"/><path d="M174.887 159.122C169.851 167.606 163.424 170.911 155.806 170.911C151.516 170.911 146.062 170.294 139.361 168.956L136.494 168.511C130.481 167.577 124.376 166.512 118.179 165.315C111.028 163.933 103.992 162.551 97.0728 161.169C89.662 160.051 83.4359 159.49 78.1617 159.49C69.1859 159.49 61.0961 161.278 54.0787 164.947C47.0981 168.596 41.4507 173.962 37.0058 180.803C28.1973 194.726 24 213.38 24 236.509V272H51.2117V237.548C51.2117 222.972 53.9416 212.085 58.96 204.553C61.3391 201.15 64.3726 198.736 68.0205 197.145C71.7017 195.54 76.2888 194.653 81.9743 194.653C86.8306 194.653 92.1966 195.123 98.0908 196.096C104.072 197.473 110.278 198.85 116.708 200.225C123.508 201.63 130.268 202.852 137.031 203.902C144.293 205.343 151.478 206.074 158.579 206.074C164.902 206.074 170.875 204.335 176.414 201.175C181.975 198.003 186.682 193.552 190.634 188.003C194.375 182.751 197.378 176.456 199.706 169.182C202.04 176.425 205.273 182.755 209.461 188.131C218.173 199.364 228.964 206.074 242.115 206.074C248.993 206.074 255.953 205.342 262.986 203.9C269.977 202.849 276.746 201.626 283.292 200.225C289.729 198.848 295.941 197.47 301.929 196.091C307.578 195.123 312.823 194.653 317.68 194.653C323.365 194.653 327.952 195.54 331.633 197.145C335.285 198.738 338.321 201.156 340.701 204.565C345.714 212.097 348.441 222.98 348.441 237.548V272H376V236.509C376 214.043 371.791 195.592 363.04 181.394L362.599 180.706C358.225 174.002 352.689 168.723 345.867 165.094C338.785 161.328 330.596 159.49 321.492 159.49C316.218 159.49 309.992 160.051 302.877 161.117C295.867 162.555 288.96 163.935 281.821 165.315C274.739 166.683 267.776 167.88 260.934 168.904C253.938 170.294 248.485 170.911 244.194 170.911C236.556 170.911 230.009 167.586 224.748 159.09C219.607 150.411 216.658 138.373 216.205 122.739L216.096 119H183.904L183.796 122.739C183.341 138.378 180.276 150.405 174.92 159.068Z" fill="#9A734C"/></svg>
<span>Parenthèse</span>
<img src="/logo.svg" alt="" width="166" height="22" />
</a>
<a class="btn" href="https://app.parenthese.io/?account=register&amp;source=guide-photos">Créer mon arbre</a>
</div>
+5 -3
View File
@@ -3,7 +3,7 @@
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="theme-color" content="#FDF8EC" />
<meta name="theme-color" content="#FBFAF7" />
<title>Organiser une cousinade : la méthode, et ce qu'il en reste après</title>
<meta name="description" content="Comment organiser une cousinade sans y laisser six mois : recenser la famille, fixer la date, partager le budget, prévoir le programme, collecter les souvenirs, et garder une trace que tout le monde retrouve." />
<link rel="canonical" href="https://parenthese.io/cousinade/" />
@@ -17,6 +17,9 @@
<meta name="twitter:card" content="summary_large_image" />
<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
<link rel="apple-touch-icon" href="/apple-touch-icon.png" />
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link href="https://fonts.googleapis.com/css2?family=Newsreader:ital,opsz,wght@0,6..72,300;0,6..72,400;1,6..72,300&family=DM+Sans:opsz,wght@9..40,400;9..40,500;9..40,600&display=swap" rel="stylesheet" />
<link rel="stylesheet" href="/guides.css" />
<script type="application/ld+json">
{
@@ -51,8 +54,7 @@
<header class="top">
<div class="wrap">
<a class="brand" href="/" aria-label="Parenthèse, accueil">
<svg viewBox="0 0 400 400" fill="none" aria-hidden="true"><rect width="400" height="400" rx="59" fill="#F7F1E6"/><path d="M174.887 159.122C169.851 167.606 163.424 170.911 155.806 170.911C151.516 170.911 146.062 170.294 139.361 168.956L136.494 168.511C130.481 167.577 124.376 166.512 118.179 165.315C111.028 163.933 103.992 162.551 97.0728 161.169C89.662 160.051 83.4359 159.49 78.1617 159.49C69.1859 159.49 61.0961 161.278 54.0787 164.947C47.0981 168.596 41.4507 173.962 37.0058 180.803C28.1973 194.726 24 213.38 24 236.509V272H51.2117V237.548C51.2117 222.972 53.9416 212.085 58.96 204.553C61.3391 201.15 64.3726 198.736 68.0205 197.145C71.7017 195.54 76.2888 194.653 81.9743 194.653C86.8306 194.653 92.1966 195.123 98.0908 196.096C104.072 197.473 110.278 198.85 116.708 200.225C123.508 201.63 130.268 202.852 137.031 203.902C144.293 205.343 151.478 206.074 158.579 206.074C164.902 206.074 170.875 204.335 176.414 201.175C181.975 198.003 186.682 193.552 190.634 188.003C194.375 182.751 197.378 176.456 199.706 169.182C202.04 176.425 205.273 182.755 209.461 188.131C218.173 199.364 228.964 206.074 242.115 206.074C248.993 206.074 255.953 205.342 262.986 203.9C269.977 202.849 276.746 201.626 283.292 200.225C289.729 198.848 295.941 197.47 301.929 196.091C307.578 195.123 312.823 194.653 317.68 194.653C323.365 194.653 327.952 195.54 331.633 197.145C335.285 198.738 338.321 201.156 340.701 204.565C345.714 212.097 348.441 222.98 348.441 237.548V272H376V236.509C376 214.043 371.791 195.592 363.04 181.394L362.599 180.706C358.225 174.002 352.689 168.723 345.867 165.094C338.785 161.328 330.596 159.49 321.492 159.49C316.218 159.49 309.992 160.051 302.877 161.117C295.867 162.555 288.96 163.935 281.821 165.315C274.739 166.683 267.776 167.88 260.934 168.904C253.938 170.294 248.485 170.911 244.194 170.911C236.556 170.911 230.009 167.586 224.748 159.09C219.607 150.411 216.658 138.373 216.205 122.739L216.096 119H183.904L183.796 122.739C183.341 138.378 180.276 150.405 174.92 159.068Z" fill="#9A734C"/></svg>
<span>Parenthèse</span>
<img src="/logo.svg" alt="" width="166" height="22" />
</a>
<a class="btn" href="https://app.parenthese.io/?account=register&amp;source=guide-cousinade">Créer mon arbre</a>
</div>
@@ -3,7 +3,7 @@
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="theme-color" content="#FDF8EC" />
<meta name="theme-color" content="#FBFAF7" />
<title>Données et vie privée : ce que Parenthèse enregistre, et pourquoi</title>
<meta name="description" content="Ce que Parenthèse enregistre quand vous créez un compte et un arbre familial, qui peut le voir, où c'est hébergé, ce qui est mesuré, et comment exporter ou supprimer vos données." />
<link rel="canonical" href="https://parenthese.io/donnees-et-vie-privee/" />
@@ -17,6 +17,9 @@
<meta name="twitter:card" content="summary_large_image" />
<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
<link rel="apple-touch-icon" href="/apple-touch-icon.png" />
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link href="https://fonts.googleapis.com/css2?family=Newsreader:ital,opsz,wght@0,6..72,300;0,6..72,400;1,6..72,300&family=DM+Sans:opsz,wght@9..40,400;9..40,500;9..40,600&display=swap" rel="stylesheet" />
<link rel="stylesheet" href="/guides.css" />
<script type="application/ld+json">
{
@@ -36,8 +39,7 @@
<header class="top">
<div class="wrap">
<a class="brand" href="/" aria-label="Parenthèse, accueil">
<svg viewBox="0 0 400 400" fill="none" aria-hidden="true"><rect width="400" height="400" rx="59" fill="#F7F1E6"/><path d="M174.887 159.122C169.851 167.606 163.424 170.911 155.806 170.911C151.516 170.911 146.062 170.294 139.361 168.956L136.494 168.511C130.481 167.577 124.376 166.512 118.179 165.315C111.028 163.933 103.992 162.551 97.0728 161.169C89.662 160.051 83.4359 159.49 78.1617 159.49C69.1859 159.49 61.0961 161.278 54.0787 164.947C47.0981 168.596 41.4507 173.962 37.0058 180.803C28.1973 194.726 24 213.38 24 236.509V272H51.2117V237.548C51.2117 222.972 53.9416 212.085 58.96 204.553C61.3391 201.15 64.3726 198.736 68.0205 197.145C71.7017 195.54 76.2888 194.653 81.9743 194.653C86.8306 194.653 92.1966 195.123 98.0908 196.096C104.072 197.473 110.278 198.85 116.708 200.225C123.508 201.63 130.268 202.852 137.031 203.902C144.293 205.343 151.478 206.074 158.579 206.074C164.902 206.074 170.875 204.335 176.414 201.175C181.975 198.003 186.682 193.552 190.634 188.003C194.375 182.751 197.378 176.456 199.706 169.182C202.04 176.425 205.273 182.755 209.461 188.131C218.173 199.364 228.964 206.074 242.115 206.074C248.993 206.074 255.953 205.342 262.986 203.9C269.977 202.849 276.746 201.626 283.292 200.225C289.729 198.848 295.941 197.47 301.929 196.091C307.578 195.123 312.823 194.653 317.68 194.653C323.365 194.653 327.952 195.54 331.633 197.145C335.285 198.738 338.321 201.156 340.701 204.565C345.714 212.097 348.441 222.98 348.441 237.548V272H376V236.509C376 214.043 371.791 195.592 363.04 181.394L362.599 180.706C358.225 174.002 352.689 168.723 345.867 165.094C338.785 161.328 330.596 159.49 321.492 159.49C316.218 159.49 309.992 160.051 302.877 161.117C295.867 162.555 288.96 163.935 281.821 165.315C274.739 166.683 267.776 167.88 260.934 168.904C253.938 170.294 248.485 170.911 244.194 170.911C236.556 170.911 230.009 167.586 224.748 159.09C219.607 150.411 216.658 138.373 216.205 122.739L216.096 119H183.904L183.796 122.739C183.341 138.378 180.276 150.405 174.92 159.068Z" fill="#9A734C"/></svg>
<span>Parenthèse</span>
<img src="/logo.svg" alt="" width="166" height="22" />
</a>
<a class="btn" href="https://app.parenthese.io/?account=register&amp;source=page-vie-privee">Créer mon arbre</a>
</div>
+80 -40
View File
@@ -1,53 +1,93 @@
/* Pages guides statiques de parenthese.io : même DA que la landing (crème, brun, doré, Bradford + Red Hat Mono) */
@font-face { font-family: 'Bradford LL'; src: url('/fonts/BradfordLLWeb-Regular.woff') format('woff'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'Bradford LL'; src: url('/fonts/BradfordLLWeb-Bold.woff') format('woff'); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: 'Bradford LL'; src: url('/fonts/BradfordLLWeb-Italic.woff') format('woff'); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: 'Bradford Mono LL'; src: url('/fonts/BradfordMonoLLWeb-Regular.woff') format('woff'); font-weight: 400; font-display: swap; }
/* Pages guides statiques de parenthese.io : même DA que la landing (accent terracotta, Newsreader + DM Sans).
Polices chargées par Google Fonts dans le <head> de chaque page. Tokens repris de landing/src/index.css. */
:root {
--cream: #FEF9ED; --surface: #F7ECD9; --brown: #5D524B; --brown-2: #8B7355; --gold: #A67C52; --line: rgba(93, 82, 75, 0.14);
--grege: #fbfaf7; --papier: #ffffff;
--a50: #fcf3ef; --a100: #f8e4db; --a200: #f4d6c9; --a300: #edb6a4; --a500: #d2694a; --a700: #93402a; --a800: #7a3421;
--encre: #2a2622; --encre2: #4f4841; --doux: #6b645d; --trait: #ebe6df; --trait-l: #efe3dc;
--ombre: 0 1px 2px rgba(42,38,34,.05), 0 8px 24px rgba(42,38,34,.07);
--serif: 'Newsreader', Georgia, 'Times New Roman', serif;
--sans: 'DM Sans', system-ui, -apple-system, sans-serif;
--ease-out: cubic-bezier(.23,1,.32,1);
color-scheme: light;
}
* { box-sizing: border-box; }
html { background: var(--cream); }
body { margin: 0; color: var(--brown); background: linear-gradient(180deg, #fff5df 0%, #fef9ed 40%, #fef9ed 100%); font-family: 'Bradford LL', 'Iowan Old Style', 'Palatino Linotype', serif; font-size: 18px; line-height: 1.6; -webkit-font-smoothing: antialiased; }
a { color: var(--gold); text-decoration: none; }
a:hover { text-decoration: underline; }
.mono { font-family: 'Bradford Mono LL', 'Red Hat Mono', ui-monospace, monospace; }
html { background: var(--grege); scroll-padding-top: 84px; }
body { margin: 0; color: var(--encre); background: var(--grege); font: 400 17px/1.65 var(--sans); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
:focus-visible { outline: 2px solid var(--a500); outline-offset: 3px; border-radius: 6px; }
::selection { background: var(--a200); }
a { color: var(--a700); text-decoration: underline; text-decoration-color: var(--a300); text-underline-offset: 3px; text-decoration-thickness: 1px; }
a:hover { color: var(--a800); text-decoration-color: currentColor; }
.wrap { width: min(100% - 32px, 720px); margin: 0 auto; }
header.top { position: sticky; top: 0; z-index: 10; backdrop-filter: blur(10px); background: rgba(254, 249, 237, 0.82); border-bottom: 1px solid var(--line); }
header.top .wrap { display: flex; align-items: center; justify-content: space-between; height: 64px; }
.brand { display: inline-flex; align-items: center; gap: 10px; color: var(--brown); font-size: 18px; }
.brand svg { width: 28px; height: 28px; }
.btn { display: inline-flex; align-items: center; gap: 8px; padding: 10px 18px; border-radius: 999px; background: var(--gold); color: var(--cream); font-family: 'Bradford Mono LL', 'Red Hat Mono', monospace; font-size: 14px; transition: transform 160ms cubic-bezier(.23, 1, .32, 1), background 160ms; }
.btn:hover { background: #96704a; text-decoration: none; transform: translateY(-1px); }
.btn:active { transform: scale(0.97); }
.btn.ghost { background: transparent; color: var(--brown); border: 1px solid var(--line); }
/* Header, calé sur .site-nav de la landing */
header.top { position: sticky; top: 0; z-index: 10; backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); background: rgba(251, 250, 247, 0.86); border-bottom: 1px solid var(--trait); }
header.top .wrap { display: flex; align-items: center; justify-content: space-between; gap: 16px; height: 68px; }
.brand { display: inline-flex; align-items: center; color: var(--encre); text-decoration: none; }
.brand img { display: block; height: 22px; width: auto; }
/* Boutons, calés sur .btn.p / .btn.s de la landing (fond encre : le blanc sur a500 ne passe pas AA) */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 10px 16px; border-radius: 999px; background: var(--encre); color: #fff; font: 500 14px/1 var(--sans); text-decoration: none; white-space: nowrap; transition: transform 140ms var(--ease-out), background-color 180ms ease; }
.btn:hover { background: #3d3731; color: #fff; text-decoration: none; }
.btn:active { transform: scale(0.97); }
.btn.ghost { background: transparent; color: var(--encre); box-shadow: inset 0 0 0 1px var(--a300); }
.btn.ghost:hover { background: var(--a50); }
/* Article */
main { padding: 56px 0 24px; }
.eyebrow { display: inline-block; font-family: 'Bradford Mono LL', monospace; font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--brown-2); margin-bottom: 14px; }
h1 { font-size: clamp(34px, 5vw, 48px); line-height: 1.12; font-weight: 400; margin: 0 0 18px; letter-spacing: -0.01em; }
.lead { font-size: 21px; color: rgba(93, 82, 75, 0.85); margin: 0 0 36px; }
h2 { font-size: 28px; line-height: 1.2; font-weight: 400; margin: 44px 0 12px; }
h3 { font-size: 21px; font-weight: 400; margin: 28px 0 8px; }
.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 { 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; }
h3 { font-size: 23px; line-height: 1.25; font-weight: 400; margin: 32px 0 8px; }
h1 em, h2 em, h3 em, em.s { font-style: italic; font-weight: 300; }
p { margin: 0 0 16px; }
ul, ol { padding-left: 22px; margin: 0 0 16px; }
li { margin-bottom: 6px; }
strong { font-weight: 700; }
.note { padding: 16px 20px; border-left: 3px solid var(--gold); background: rgba(247, 236, 217, 0.6); border-radius: 0 12px 12px 0; margin: 20px 0; }
table { width: 100%; border-collapse: collapse; margin: 16px 0 24px; font-size: 16px; }
th, td { text-align: left; vertical-align: top; padding: 10px 10px; border-bottom: 1px solid var(--line); }
th { font-family: 'Bradford Mono LL', monospace; font-weight: 400; font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--brown-2); }
.faq details { border-bottom: 1px solid var(--line); padding: 12px 0; }
.faq summary { cursor: pointer; font-size: 19px; list-style: none; display: flex; justify-content: space-between; gap: 16px; }
.faq summary::after { content: '+'; color: var(--gold); }
li::marker { color: var(--a500); }
strong { font-weight: 600; }
.note { padding: 18px 22px; border-left: 3px solid var(--a500); background: var(--a50); border-radius: 0 14px 14px 0; margin: 24px 0; }
.note p:last-child { margin-bottom: 0; }
table { width: 100%; border-collapse: collapse; margin: 16px 0 28px; font-size: 15px; line-height: 1.5; }
th, td { text-align: left; vertical-align: top; padding: 12px 10px; border-bottom: 1px solid var(--trait); }
th { font: 500 12px/1.3 var(--sans); letter-spacing: 0.08em; text-transform: uppercase; color: var(--doux); border-bottom-color: var(--a300); }
td:first-child { font-weight: 500; }
th:first-child, td:first-child { padding-left: 0; }
.faq details { border-bottom: 1px solid var(--trait); padding: 14px 0; }
.faq summary { text-wrap: pretty; cursor: pointer; font: 400 21px/1.3 var(--serif); list-style: none; display: flex; justify-content: space-between; gap: 16px; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: '+'; font-family: var(--sans); color: var(--a700); flex: none; }
.faq details[open] summary::after { content: '−'; }
.faq p { margin: 10px 0 4px; color: rgba(93, 82, 75, 0.85); }
.cta { margin: 56px 0 24px; padding: 32px; border-radius: 20px; background: #fff; border: 1px solid var(--line); box-shadow: 0 8px 32px rgba(93, 82, 75, 0.05); text-align: center; }
.cta h2 { margin-top: 0; }
.cta p { color: rgba(93, 82, 75, 0.8); }
footer { border-top: 1px solid var(--line); padding: 32px 0 40px; font-size: 14px; color: var(--brown-2); }
.faq p { margin: 10px 0 4px; color: var(--encre2); }
/* Encart final, calé sur .final de la landing */
.cta { margin: 64px 0 24px; padding: 40px 32px; border-radius: 22px; background: var(--a100); text-align: center; }
.cta h2 { margin-top: 0; font-weight: 300; font-size: clamp(28px, 4vw, 36px); line-height: 1.1; }
.cta p { color: var(--encre2); margin-bottom: 22px; }
.cta .btn { padding: 15px 24px; font-size: 15px; }
footer { border-top: 1px solid var(--trait); padding: 28px 0 40px; font: 400 13px/1.6 var(--sans); color: var(--doux); }
footer .wrap { display: flex; flex-wrap: wrap; gap: 14px 28px; align-items: center; justify-content: space-between; }
footer nav { display: flex; flex-wrap: wrap; gap: 6px 18px; }
footer nav a { color: var(--brown-2); }
@media (max-width: 600px) { body { font-size: 17px; } .lead { font-size: 19px; } .btn span.long { display: none; } table { font-size: 14px; } th, td { padding: 8px 6px; } }
footer a { color: inherit; text-decoration: none; }
footer a:hover { color: var(--encre); }
@media (max-width: 600px) {
body { font-size: 16px; }
main { padding-top: 40px; }
.lead { font-size: 18px; }
h2 { font-size: 26px; margin-top: 44px; }
h3 { font-size: 21px; }
.brand img { height: 20px; }
.btn span.long { display: none; }
table { font-size: 14px; }
th, td { padding: 10px 6px; }
th:last-child, td:last-child { padding-right: 0; }
th { font-size: 11px; letter-spacing: 0.04em; }
.faq summary { font-size: 19px; }
.cta { padding: 32px 20px; }
}
@media (prefers-reduced-motion: reduce) { .btn { transition: none; } }
@@ -3,7 +3,7 @@
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="theme-color" content="#FDF8EC" />
<meta name="theme-color" content="#FBFAF7" />
<title>Comment raconter l'histoire de sa famille : par où commencer, quoi demander, où le garder</title>
<meta name="description" content="Raconter l'histoire de sa famille sans être écrivain ni généalogiste : par qui commencer, les questions qui font parler, comment enregistrer, et où garder le tout pour que ça se transmette." />
<link rel="canonical" href="https://parenthese.io/raconter-histoire-de-famille/" />
@@ -17,6 +17,9 @@
<meta name="twitter:card" content="summary_large_image" />
<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
<link rel="apple-touch-icon" href="/apple-touch-icon.png" />
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link href="https://fonts.googleapis.com/css2?family=Newsreader:ital,opsz,wght@0,6..72,300;0,6..72,400;1,6..72,300&family=DM+Sans:opsz,wght@9..40,400;9..40,500;9..40,600&display=swap" rel="stylesheet" />
<link rel="stylesheet" href="/guides.css" />
<script type="application/ld+json">
{
@@ -48,8 +51,7 @@
<header class="top">
<div class="wrap">
<a class="brand" href="/" aria-label="Parenthèse, accueil">
<svg viewBox="0 0 400 400" fill="none" aria-hidden="true"><rect width="400" height="400" rx="59" fill="#F7F1E6"/><path d="M174.887 159.122C169.851 167.606 163.424 170.911 155.806 170.911C151.516 170.911 146.062 170.294 139.361 168.956L136.494 168.511C130.481 167.577 124.376 166.512 118.179 165.315C111.028 163.933 103.992 162.551 97.0728 161.169C89.662 160.051 83.4359 159.49 78.1617 159.49C69.1859 159.49 61.0961 161.278 54.0787 164.947C47.0981 168.596 41.4507 173.962 37.0058 180.803C28.1973 194.726 24 213.38 24 236.509V272H51.2117V237.548C51.2117 222.972 53.9416 212.085 58.96 204.553C61.3391 201.15 64.3726 198.736 68.0205 197.145C71.7017 195.54 76.2888 194.653 81.9743 194.653C86.8306 194.653 92.1966 195.123 98.0908 196.096C104.072 197.473 110.278 198.85 116.708 200.225C123.508 201.63 130.268 202.852 137.031 203.902C144.293 205.343 151.478 206.074 158.579 206.074C164.902 206.074 170.875 204.335 176.414 201.175C181.975 198.003 186.682 193.552 190.634 188.003C194.375 182.751 197.378 176.456 199.706 169.182C202.04 176.425 205.273 182.755 209.461 188.131C218.173 199.364 228.964 206.074 242.115 206.074C248.993 206.074 255.953 205.342 262.986 203.9C269.977 202.849 276.746 201.626 283.292 200.225C289.729 198.848 295.941 197.47 301.929 196.091C307.578 195.123 312.823 194.653 317.68 194.653C323.365 194.653 327.952 195.54 331.633 197.145C335.285 198.738 338.321 201.156 340.701 204.565C345.714 212.097 348.441 222.98 348.441 237.548V272H376V236.509C376 214.043 371.791 195.592 363.04 181.394L362.599 180.706C358.225 174.002 352.689 168.723 345.867 165.094C338.785 161.328 330.596 159.49 321.492 159.49C316.218 159.49 309.992 160.051 302.877 161.117C295.867 162.555 288.96 163.935 281.821 165.315C274.739 166.683 267.776 167.88 260.934 168.904C253.938 170.294 248.485 170.911 244.194 170.911C236.556 170.911 230.009 167.586 224.748 159.09C219.607 150.411 216.658 138.373 216.205 122.739L216.096 119H183.904L183.796 122.739C183.341 138.378 180.276 150.405 174.92 159.068Z" fill="#9A734C"/></svg>
<span>Parenthèse</span>
<img src="/logo.svg" alt="" width="166" height="22" />
</a>
<a class="btn" href="https://app.parenthese.io/?account=register&amp;source=guide-histoire">Créer mon arbre</a>
</div>