/* Parkinson Tracker, site vitrine. Zéro JavaScript.
   Direction : papier chaud, cartes blanches, une carte héros noire, un seul accent (prune). */

/* Polices : affichées dès qu'elles arrivent (swap). En attendant, une police du système recalée sur
   les mesures de Geist (largeur, hauteur des lettres) : le texte ne saute pas au remplacement.
   Mesures relevées dans Chromium (controles/site02) : Geist est 2,5 % plus large qu'Arial. */
@font-face { font-family: "Geist"; src: url("/assets/fonts/Geist-Variable.ttf") format("truetype"); font-weight: 100 900; font-display: swap; }
@font-face { font-family: "Geist Mono"; src: url("/assets/fonts/GeistMono-Variable.ttf") format("truetype"); font-weight: 100 900; font-display: swap; }
@font-face { font-family: "Geist repli"; src: local("Arial"), local("ArialMT"), local("Helvetica"); size-adjust: 102.5%; ascent-override: 98%; descent-override: 28.8%; line-gap-override: 0%; }
@font-face { font-family: "Geist Mono repli"; src: local("Menlo"), local("Courier New"), local("CourierNewPSMT"); size-adjust: 99.7%; ascent-override: 100.8%; descent-override: 29.6%; line-gap-override: 0%; }

:root {
  color-scheme: light dark;
  --bg: #F5F1EA; --card: #FFFDF9; --ink: #1C1A1E; --text2: #544D4A;
  --hairline: rgba(28, 26, 30, 0.10);
  --hero: #161417; --hero-ink: #F2EFEA; --hero-text2: #C9C2C9; --hero-line: rgba(242, 239, 234, 0.14);
  /* L'accent : un seul jeton. Il ne colore que des repères, jamais du texte. */
  --accent: #B0397A; --accent-on-hero: #E06AA8;
  /* Même accent, version foncée : toujours posée sur une surface claire, dans les deux modes. */
  --accent-on-light: #B0397A;
  --font: "Geist", "Geist repli", system-ui, sans-serif; --mono: "Geist Mono", "Geist Mono repli", ui-monospace, monospace;
  --s1: 8px; --s2: 16px; --s3: 24px; --s4: 32px; --s5: 48px; --s6: 64px; --s7: 96px;
  --radius-card: 16px; --radius-hero: 24px; --page: 1200px; --read: 46rem; --gutter: var(--s3);
  /* L'unité des tailles de texte : la taille choisie par la personne dans son navigateur (16 px par
     défaut), plafonnée à 24 px ; au-delà, c'est le zoom qui agrandit. Tailles fluides : clamp(). */
  --rem: min(1rem, 24px);
  --fs-body: calc(var(--rem) * 1.25);
  --fs-meta: calc(var(--rem) * 1.125);
  --fs-store: calc(var(--rem) * 1.0625);
  /* Le minimum du titre grandit moins vite que le texte (16 px de base fixes) : 36 px par défaut comme
     avant, 46 px au lieu de 54 au plus grand texte, pour que la promesse et les boutiques tiennent. */
  --fs-h1: clamp(calc(var(--rem) * 1.25 + 16px), calc(var(--rem) * 1.25 + 3.4vw), calc(var(--rem) * 3.25));
  --fs-h2: clamp(calc(var(--rem) * 1.625), calc(var(--rem) * 1.2 + 1vw), calc(var(--rem) * 1.875));
  --fs-h3: calc(var(--rem) * 1.375);
  --fs-lede: clamp(calc(var(--rem) * 1.25), calc(var(--rem) * 1.1 + 0.4vw), calc(var(--rem) * 1.375));
  --fs-num: clamp(calc(var(--rem) * 3), calc(var(--rem) * 2 + 2.5vw), calc(var(--rem) * 4));
  --fs-zero: clamp(calc(var(--rem) * 5.5), calc(var(--rem) * 3 + 6vw), calc(var(--rem) * 8));
  --fs-mail: clamp(calc(var(--rem) * 1.25), calc(var(--rem) * 1.1 + 0.6vw), calc(var(--rem) * 1.5));
  --fs-statement: clamp(calc(var(--rem) * 2), calc(var(--rem) * 1.2 + 2.4vw), calc(var(--rem) * 2.75));
}
/* iPhone et iPad : la taille du texte suit le réglage d'iOS (Réglages › Accessibilité › Affichage et
   taille du texte). « Grand », le réglage par défaut, donne exactement les tailles ci-dessus ; au plus
   grand réglage, le texte grandit de moitié (plafond 24 px). Le Mac n'est pas concerné. */
@supports (font: -apple-system-body) and (-webkit-touch-callout: none) {
  html { font: -apple-system-body; }
  :root { --rem: min(calc(1rem * 16 / 17), 24px); }
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0B0A0C; --card: #141216; --ink: #F2EFEA; --text2: #CFC8CF;
    --hairline: rgba(242, 239, 234, 0.12);
    --hero: #1E1B21; --hero-line: rgba(242, 239, 234, 0.16);
    --accent: #E06AA8;
  }
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--ink); font: 400 var(--fs-body)/1.6 var(--font); font-feature-settings: "tnum" 1; overflow-wrap: break-word; }
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-underline-offset: 0.18em; text-decoration-thickness: 1px; }
a:focus-visible, summary:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; border-radius: 8px; }
/* Les bords : encoche et Dynamic Island en paysage (viewport-fit=cover dans la page). */
.wrap { max-width: var(--page); margin-left: auto; margin-right: auto;
  padding-left: max(var(--gutter), env(safe-area-inset-left)); padding-right: max(var(--gutter), env(safe-area-inset-right)); }
.skip { position: absolute; left: -9999px; }
.skip { min-height: 48px; display: inline-flex; align-items: center; }
.skip:focus { left: max(var(--s2), env(safe-area-inset-left)); top: var(--s2); background: var(--card); padding: 0 var(--s2); z-index: 10; border-radius: 8px; }

h1, h2, h3 { font-weight: 500; margin: 0; overflow-wrap: break-word; }
h1 { font-size: var(--fs-h1); line-height: 1.08; letter-spacing: -0.02em; }
h2 { font-size: var(--fs-h2); line-height: 1.2; letter-spacing: -0.01em; }
h3 { font-size: var(--fs-h3); line-height: 1.35; }
p { margin: 0; }
/* Retours à la ligne : titres équilibrés (pas de mot seul sur la dernière ligne), paragraphes soignés. */
h1, h2, h3, summary, .lede { text-wrap: balance; }
p, li, dd, dt, figcaption { text-wrap: pretty; }
/* Une adresse e-mail ou une URL se coupe n'importe où en dernier recours, sans tiret ajouté. */
a[href^="mailto:"], .url { overflow-wrap: anywhere; hyphens: manual; -webkit-hyphens: manual; }
.muted { color: var(--text2); }
.meta { font: 400 var(--fs-meta)/1.45 var(--mono); color: var(--text2); }
.kicker { display: flex; align-items: center; gap: 12px; }
.kicker::before { content: ""; width: 12px; height: 12px; background: var(--accent); flex: none; border-radius: 2px; }

/* En-tête */
.top { border-bottom: 1px solid var(--hairline); position: relative; z-index: 5; background: var(--bg); }
.top .wrap { display: flex; align-items: center; justify-content: space-between; gap: var(--s3); min-height: 80px; }
.logo { display: inline-flex; align-items: center; min-height: 48px; flex: 0 1 auto; min-width: 0; }
.logo img { max-width: 100%; }
.logo img { height: 44px; width: auto; }
.nav { display: flex; align-items: center; gap: var(--s1); }
.nav a { display: inline-flex; align-items: center; min-height: 48px; padding: 0 12px; text-decoration: none; border-radius: 8px; }
.nav a:hover, .nav a[aria-current="page"] { text-decoration: underline; }
.langs { display: flex; gap: 4px; font: 400 var(--fs-meta) var(--mono); }
.langs a { min-width: 48px; justify-content: center; padding: 0 8px; }
.menu { display: none; }
.menu summary { list-style: none; min-height: 48px; display: inline-flex; align-items: center; padding: 0 var(--s2); border: 1px solid var(--hairline); border-radius: 999px; cursor: pointer; }
.menu summary::-webkit-details-marker { display: none; }
.menu-panel { display: none; gap: 4px; position: absolute; left: 0; right: 0; top: 100%; padding: var(--s1) max(var(--s2), env(safe-area-inset-right)) var(--s3) max(var(--s2), env(safe-area-inset-left)); background: var(--bg); border-bottom: 1px solid var(--hairline); }
.menu[open] .menu-panel { display: grid; }
.menu-panel a { min-height: 48px; display: flex; align-items: center; text-decoration: none; }

/* Pages de texte (confidentialité, aide, mentions) */
.doc { padding-top: var(--s6); }
.doc-head { display: grid; gap: var(--s2); max-width: var(--read); margin-bottom: var(--s5); }
.doc-body { max-width: var(--read); }
.doc-body h2 { margin: var(--s6) 0 var(--s2); }
.doc-body h3 { margin: var(--s4) 0 var(--s1); }
.doc-body p + p, .doc-body p + ul, .doc-body ul + p { margin-top: var(--s2); }
.doc-body ul { margin: var(--s2) 0 0; padding-left: 1.2em; display: grid; gap: var(--s1); }
.doc-body strong { font-weight: 500; }
.summary { background: var(--hero); color: var(--hero-ink); border: 1px solid var(--hero-line); border-radius: var(--radius-hero); padding: var(--s4); display: grid; gap: var(--s2); }
.summary .kicker::before { background: var(--accent-on-hero); }
.summary ul { margin: 0; padding-left: 1.2em; display: grid; gap: var(--s1); }
.toc { margin: var(--s4) 0 0; padding: 0; list-style: none; display: grid; gap: 2px; }
.toc a { display: inline-flex; min-height: 48px; min-width: 48px; justify-content: center; align-items: center; }

/* Aide : questions en accordéon natif, ouvrables au clavier, sans JavaScript */
.faq { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s2); max-width: var(--read); }
.faq details { background: var(--card); border: 1px solid var(--hairline); border-radius: var(--radius-card); }
.faq summary { list-style: none; cursor: pointer; min-height: 64px; display: flex; align-items: center; justify-content: space-between; gap: var(--s2); padding: var(--s2) var(--s3); font-weight: 500; }
.faq summary::-webkit-details-marker { display: none; }
/* La question dans son propre élément : Safari la laisse alors passer à la ligne (sinon un mot insécable la bloque). */
.faq summary .q { flex: 1 1 auto; min-width: 0; }
.faq summary::after { content: "+"; font: 300 calc(var(--rem) * 1.75)/1 var(--font); color: var(--text2); flex: none; }
/* Arrivée depuis la pastille Android : la question visée est repérée par le trait de l'accent. */
.faq details:target { border-color: var(--accent); box-shadow: inset 4px 0 0 var(--accent); }
.faq details[open] summary::after { content: "−"; }
.faq .answer { padding: 0 var(--s3) var(--s3); display: grid; gap: var(--s2); }
.faq .answer ul, .faq .answer ol { margin: 0; padding-left: 1.2em; display: grid; gap: var(--s1); }
.contact { margin-top: var(--s6); max-width: var(--read); background: var(--card); border: 1px solid var(--hairline); border-radius: var(--radius-card); padding: var(--s4); display: grid; gap: var(--s2); }
.mail { font: 500 var(--fs-mail)/1.3 var(--font); overflow-wrap: anywhere; }
/* Liens seuls sur leur ligne : une vraie cible de 48 px. */
.mail a, a.solo, .privacy-band > p > a, .defs dd > a:only-child { display: inline-flex; align-items: center; min-height: 48px; }

/* Pied de page */
.foot { margin-top: var(--s7); border-top: 1px solid var(--hairline); padding: var(--s6) 0 calc(var(--s5) + env(safe-area-inset-bottom)); }
.foot-grid { display: grid; grid-template-columns: 2fr 1fr; gap: var(--s5); }
.not-doing { max-width: 56ch; display: grid; gap: var(--s2); }
.not-doing h2 { font-size: calc(var(--rem) * 1.5); }
.foot-links { display: grid; gap: 4px; align-content: start; }
.foot-links a { min-height: 48px; display: flex; align-items: center; }
.legal { margin-top: var(--s5); }


/* Accueil */
.lede { font-size: var(--fs-lede); color: var(--text2); max-width: 36ch; }
.num { font-weight: 300; font-size: var(--fs-num); line-height: 1; letter-spacing: -0.02em; }
.actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2); }
.pill { display: inline-flex; align-items: center; gap: 12px; min-height: 60px; padding: 0 var(--s3); background: var(--ink); color: var(--bg); border-radius: 999px; text-decoration: none; font-weight: 500; }
.pill::before { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--accent-on-hero); flex: none; }
.pill:hover { text-decoration: underline; }
@media (prefers-color-scheme: dark) { .pill::before { background: var(--accent); } }
/* Les boutiques : le badge officiel d'Apple (53 px de haut) et, à côté, une pastille au même gabarit
   (hauteur, coins, filet gris du badge noir d'Apple). Sans badge Google Play tant qu'il n'y a pas de fiche. */
.stores { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.stores li { display: flex; max-width: 100%; }
.badge { display: inline-flex; align-items: center; min-height: 53px; }
.badge img { height: 53px; width: auto; }
.store-soon { display: inline-flex; align-items: center; gap: 10px; min-height: 53px; max-width: 100%; padding: 6px 18px; border: 1px solid #A6A6A6; border-radius: 11px;
  font: 500 var(--fs-store)/1.25 var(--font); color: inherit; text-decoration: none; }
a.store-soon:hover { text-decoration: underline; }
.store-icon { flex: none; }
/* Bandeau noir de l'accueil : la seule grande surface sombre en mode clair */
.hero-band { background: var(--hero); color: var(--hero-ink); border-bottom: 1px solid var(--hero-line); }
.hero-band .meta, .hero-band .lede, .hero-band .note { color: var(--hero-text2); }
.hero-band a:focus-visible { outline-color: var(--hero-ink); }
.hero-band .pill { background: var(--hero-ink); color: var(--hero); }
.hero-band .pill::before { background: var(--accent-on-light); }
.hero { display: grid; grid-template-columns: 1.15fr 1fr; gap: var(--s5); align-items: center; padding-top: var(--s6); padding-bottom: var(--s6); }
.hero-text { display: grid; gap: var(--s3); }
/* Grand écran : l'accroche reste sous le titre, puis les boutiques et « Voir le rapport ». Sous 861 px
   (téléphone, fenêtre étroite, zoom), l'ordre de la page s'applique : les boutiques juste sous la promesse. */
@media (min-width: 861px) { .hero-text > .stores, .hero-text > .actions, .hero-text > .actions ~ * { order: 1; } }
.hero-card { background: var(--hero); color: var(--hero-ink); border: 1px solid var(--hero-line); border-radius: var(--radius-hero); }
.hero-visual { margin: 0; display: grid; gap: var(--s2); justify-items: center; }
.hero-visual .phone { width: min(320px, 100%); }
.hero-card .note { color: var(--hero-text2); }
.phone { border-radius: 36px; border: 1px solid var(--hero-line); }
.note { font: 400 var(--fs-meta)/1.4 var(--mono); color: var(--text2); }
.card { background: var(--card); border: 1px solid var(--hairline); border-radius: var(--radius-card); }
.band { padding-top: var(--s7); }
.band > h2 { margin-bottom: var(--s4); }
.benefit-list { list-style: none; margin: 0; padding: 0; display: grid; }
.benefit-list li { display: grid; grid-template-columns: calc(var(--rem) * 7.5) minmax(0, 1fr); gap: var(--s3); padding: var(--s4) 0; border-top: 1px solid var(--hairline); align-items: baseline; }
.benefit-list li > div { display: grid; gap: var(--s1); max-width: 60ch; }
/* Comment ça marche : un iPhone seul par étape, centré, beaucoup d'air */
.steps { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s7); }
.step { display: grid; justify-items: center; gap: var(--s4); text-align: center; }
.step-text { display: grid; gap: var(--s1); max-width: 36rem; }
.step-shot { margin: 0; display: grid; gap: var(--s2); justify-items: center; }
.step-shot .phone { width: min(300px, 72vw); box-shadow: 0 32px 64px -24px rgba(28, 26, 30, 0.35), 0 8px 24px rgba(28, 26, 30, 0.08); }
@media (prefers-color-scheme: dark) { .step-shot .phone { box-shadow: none; } }

/* Confiance : trois zéros, grands et fins. Ni compteur animé, ni pourcentage. */
.trust { display: grid; gap: var(--s4); }
.zeros { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s4); }
.zeros li { display: grid; gap: var(--s1); border-top: 1px solid var(--hairline); padding-top: var(--s3); }
.zero { font-weight: 300; font-size: var(--fs-zero); line-height: 0.9; letter-spacing: -0.04em; }
.zero-label { font-size: var(--fs-lede); }
.trust-text { max-width: 44rem; }

/* Le symbole du bandeau : la courbe se trace, puis le point s'allume */
.mark { display: block; width: 96px; height: auto; overflow: visible; }
.mark-line { fill: none; stroke: var(--hero-ink); stroke-width: 5.2; stroke-linecap: butt; stroke-dasharray: 1; stroke-dashoffset: 0; }
.mark-start, .mark-end { fill: var(--hero-ink); }
.mark-halo { fill: var(--accent-on-hero); opacity: 0.55; }
@media (prefers-reduced-motion: no-preference) {
  .mark-line { animation: mark-trace 1.5s cubic-bezier(0.22, 1, 0.36, 1) 0.15s both; }
  .mark-end { animation: mark-light 0.45s ease-out 1.55s both; }
  .mark-halo { animation: mark-light 0.9s ease-out 1.6s both; }
}
@keyframes mark-trace { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes mark-light { from { opacity: 0; } }
.report { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s5); align-items: center; }
.report-text { display: grid; gap: var(--s3); }
.facts { margin: 0; padding-left: 1.2em; display: grid; gap: var(--s1); }
.report-figure { margin: 0; padding: var(--s2); display: grid; gap: var(--s2); }
.report-figure img { border-radius: 8px; }
.privacy-band { display: grid; gap: var(--s3); }
.statement { font-weight: 300; font-size: var(--fs-statement); line-height: 1.2; letter-spacing: -0.01em; max-width: 24ch; }
.privacy-points { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--s1) var(--s4); }
.privacy-points li::before { content: ""; display: inline-block; width: 10px; height: 10px; background: var(--accent); border-radius: 2px; margin-right: 10px; }

/* Pages secondaires */
.split { display: grid; grid-template-columns: 1.3fr 1fr; gap: var(--s5); align-items: start; }
.defs { margin: var(--s3) 0 0; display: grid; gap: var(--s3); }
.defs > div { padding-top: var(--s2); border-top: 1px solid var(--hairline); }
.defs dt { font-weight: 500; margin-bottom: 4px; }
.defs dd { margin: 0; }
.regulatory { margin-top: var(--s3); padding: var(--s3); border-left: 4px solid var(--accent); background: var(--card); border-radius: 0 var(--radius-card) var(--radius-card) 0; }
.story p { font-size: var(--fs-lede); }
.story p + p { margin-top: var(--s3); }
.story-photo { margin: 0 0 var(--s4); max-width: var(--read); }

@media (max-width: 360px) { .logo img { height: 36px; } }
/* Sur petit écran seulement (ou zoom fort) : un mot très long (« Datenschutzerklärung »,
   « Bewegungsstörungen ») se coupe selon la langue de la page (attribut lang). Sur grand écran,
   aucune césure : elle couperait des mots courts en fin de ligne. */
@media (max-width: 480px) {
  :lang(de) :is(h1, h2, h3, summary, p, li, dt, dd, figcaption, .zero-label) { hyphens: auto; -webkit-hyphens: auto;
    /* Seulement les mots longs (12 lettres et plus), 5 lettres au moins de chaque côté :
       « Datenschutz-erklärung » oui, « persona-le » non. */
    hyphenate-limit-chars: 12 5 5; }
  /* Safari ne connaît pas cette limite et couperait des mots courts (« som-meil ») : chez lui, la
     césure reste réservée à l'allemand, où sont les mots très longs (ailleurs, un trait d'union
     conditionnel dans le texte, comme « confiden­tialité »). */
  @supports (hyphenate-limit-chars: 12 5 5) { :is(h1, h2, h3, summary, p, li, dt, dd, figcaption, .zero-label) { hyphens: auto; hyphenate-limit-chars: 12 5 5; } }
  .meta, .note, .langs, :lang(de) :is(.meta, .note, .langs) { hyphens: none; -webkit-hyphens: none; }
}
/* Le nom de l'app : jamais de tiret dedans ; il ne se coupe (sans tiret) que s'il ne tient pas sur la ligne. */
.nom { hyphens: manual; -webkit-hyphens: manual; overflow-wrap: anywhere; }
.insec { white-space: nowrap; }

.doc-head > * { min-width: 0; }

@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }

@media (max-width: 860px) {
  .hero, .report, .split { grid-template-columns: 1fr; padding-top: var(--s4); }
  .hero { padding-bottom: var(--s5); }
  .hero-visual .phone { width: min(260px, 100%); }
  .band { padding-top: var(--s6); }
  .benefit-list li { grid-template-columns: 1fr; gap: var(--s1); }
  .steps { gap: var(--s6); }
  .zeros { grid-template-columns: 1fr; gap: var(--s2); }
  /* En ligne : le zéro, puis son libellé. Flex et non grille : Safari ne recalcule pas une colonne
     « auto » quand la taille du texte change après l'affichage (police arrivée, réglage d'iOS). */
  .zeros li { display: flex; align-items: baseline; gap: var(--s3); }
  .zero { flex: none; }
  .zero-label { min-width: 0; }
  .mark { width: 56px; }
  .hero-text { gap: var(--s2); }
  :root { --gutter: var(--s2); }
  .top .wrap { gap: var(--s2); }
  .nav-desktop { display: none; }
  .menu { display: block; }
  .doc { padding-top: var(--s4); }
  .summary, .contact { padding: var(--s3); }
  .faq summary { padding: var(--s2); }
  .faq .answer { padding: 0 var(--s2) var(--s2); }
  .foot-grid { grid-template-columns: 1fr; }
}

@media print {
  .top nav, .menu, .skip { display: none; }
  body { background: #fff; color: #000; }
  .summary { background: #fff; color: #000; border-color: #000; }
}