/* ============================================================
   Un bon clavier — style du site
   Couleurs tirées de l'app (ClavinoTheme.swift).
   Deux ambiances : accueil plein écran, pages de contenu.
   ============================================================ */

/* LE VERT DE MARQUE — changé le 2026-08-09, en même temps que l'app.

   L'ancien, #49B260, ne portait pas le texte blanc : 2,69:1 quand le minimum
   lisible est 4,5:1. Sur ce site le défaut allait plus loin que dans l'app,
   parce que `body { color: var(--vert) }` : TOUT le texte de l'accueil était
   écrit dans ce vert sur le fond pâle, soit 2,41:1 — sous le seuil de 3:1
   réservé au GROS texte. Mesuré avant correction : 14 des 19 couples
   couleur/fond du site échouaient, le pire à 1,60:1 (le copyright).

   🧭 LE DÉFAUT EST L'ENCRE, comme dans l'app. Le vert profond ne sert QUE
   d'aplat plein sous du texte blanc (`--vert-surface`). Partout ailleurs —
   texte, lien, icône, trait, bordure, halo — c'est `--vert`. Ce sens compte :
   un oubli côté encre reste lisible, l'inverse non.

   ⚠️ Il n'y a plus de `--vert-fonce`. Il valait #1E6B35, un SECOND vert de
   marque à côté du vrai, pour le même rôle (titres, liens) — exactement la
   dérive que le changement de l'app a corrigée. Comme l'encre vaut désormais
   6,00:1 sur blanc, il n'apportait plus rien. Ne pas le réintroduire : la
   hiérarchie se porte à la taille et à la graisse, pas à un vert de plus.

   ⚠️ La TEINTE a bougé, pas seulement la clarté : 133° → 118°. Tout ce qui
   dérive du vert (fond pâle, encre sombre, gris secondaire, ombres) a donc été
   transposé. Un dérivé resté à 133° donnerait un émeraude à côté d'un gazon —
   visible sur les grandes surfaces, invisible sur les petites, et impossible
   à retrouver plus tard. */

:root {
  /* L'ENCRE — le défaut. Textes, liens, pictos, traits, bordures, halos.
     6,00:1 sur blanc, 5,05:1 sur le fond pâle. */
  --vert: #237220;

  /* L'APLAT PLEIN, sous du texte BLANC uniquement (la pastille, ::selection).
     Blanc dessus = 6,00:1. Même valeur que l'encre en apparence claire — le
     dédoublement n'existe qu'en sombre, que ce site n'a pas. */
  --vert-surface: #237220;

  /* Le noir-vert des textes longs. C'est l'ancien #16351F transposé à la
     nouvelle teinte, à saturation et clarté identiques. 13,49:1 sur blanc. */
  --encre: #173516;

  /* Le fond pâle du site = le vert de marque à 12 % sur blanc, exactement
     comme avant (l'ancien #E9F6EC était #49B260 à 12 %). Recalculé plutôt que
     conservé : un fond à 133° sous une encre à 118° aurait mis les deux
     familles de vert côte à côte sur la plus grande surface de la page. */
  --fond: #e5eee4;

  /* Le gris-vert de retrait (date de mise à jour, note sous un titre).
     L'ancien #6B7F70 ne valait que 4,29:1 : assombri de 2 points de clarté et
     transposé à 118°, il passe à 4,66:1. */
  --gris: #677966;

  --blanc: #ffffff;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  /* La police de l'app, à l'identique. L'animation d'ouverture écrit
     « Un bon clavier » en `.system(size: 40, weight: .bold)` — la police
     standard d'Apple (SF Pro), PAS la version arrondie. Le site utilisait
     `ui-rounded` : les lettres du site et celles du clip ne se ressemblaient
     pas (relevé par Elliott, 2026-07-16). `system-ui` rend exactement ce que
     `.system()` rend côté app. Ne pas remettre `ui-rounded`. */
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
    Roboto, sans-serif;
  background: var(--fond);
  color: var(--vert);
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  -webkit-font-smoothing: antialiased;
}

/* Du blanc se pose dessus : c'est un aplat, pas de l'encre. */
::selection { background: var(--vert-surface); color: #fff; }

/* ---------- En-tête commun ---------- */

.entete {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: clamp(18px, 3vh, 30px) clamp(20px, 4vw, 44px);
}

.wordmark {
  font-size: clamp(19px, 2vw, 23px);
  font-weight: 800;
  letter-spacing: -0.015em;
  color: var(--vert);
  text-decoration: none;
}

/* ---------- Accueil : la scène ---------- */

/* La scène ne fait que centrer le groupe. C'est le GROUPE (iPhone + bloc QR)
   qui bouge, jamais la scène. */
.scene {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding-inline: clamp(20px, 3vw, 48px);
}

/* L'iPhone et le bloc QR, d'un seul tenant.

   MISE EN SCÈNE (Elliott, 2026-07-20) : à l'arrivée on ne voit QUE l'iPhone,
   pile au centre — le bloc QR a une largeur nulle, il n'occupe rien. Une demi-
   seconde après la fin du clip (soit 1,5 s après l'apparition du point), le
   bloc s'ouvre à droite et pousse l'iPhone vers la gauche.

   Le biais final : une fois le groupe complet, le centrer exactement mettrait
   l'iPhone nettement à gauche du centre de l'écran. Elliott le veut « plus de
   l'avant » — le groupe se pose donc légèrement à droite du centre, ce qui
   ramène l'iPhone près du centre optique sans coller le QR au bord. */
.groupe {
  --largeur-qr: clamp(212px, 15vw, 224px);
  /* Le plancher de 212px n'est pas esthétique : c'est la place minimale pour
     que « Coming soon to the App Store » tienne sur UNE ligne (texte mesuré à
     187px en 12,5px, marges intérieures 12px). À 200px il ne restait 1px de
     marge — mesuré le 2026-07-20. Baisser ce plancher casse l'anglais. */
  --ecart: clamp(40px, 5vw, 96px);
  --biais: clamp(16px, 2.5vw, 48px);

  display: flex;
  align-items: center;
  transition: transform 1.1s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.groupe.revele {
  transform: translateX(var(--biais));
}

/* L'iPhone, cadré comme dans le simulateur. Seul objet de la page : plus de
   titre au-dessus (2026-07-15), il prend toute la hauteur disponible, moins le
   pied de page. */
.phone {
  /* --h pilote TOUT le boîtier : coins, contour et boutons en dérivent par
     calcul. Un rayon figé (58px) valait 17 % de la largeur sur un grand iPhone
     mais 38 % sur un petit — les coins se rejoignaient et le téléphone devenait
     une gélule. Un vrai iPhone tient ~16 %, à toute taille.

     Aucun plancher de hauteur, volontairement : puisque le boîtier reste juste
     à n'importe quelle échelle, mieux vaut qu'il RÉTRÉCISSE pour tenir dans la
     fenêtre que d'imposer une taille minimale qui déborde et fait défiler. */
  /* Le terme en `vw` ne mord QUE sur une fenêtre étroite : l'iPhone rétrécit
     alors un peu au lieu d'écraser la colonne du QR. Sur un grand écran il n'a
     aucun effet — c'est le plafond en pixels qui commande. */
  /* L'iPhone est le sujet : il doit attirer l'œil AVANT le QR et la pastille
     (Elliott, 2026-07-20). D'où un plafond plus haut qu'avant (700 → 760) et
     moins de hauteur réservée au pied de page (158 → 140, qui en occupe ~73). */
  --h: min(86dvh, calc(100dvh - 140px), 760px, 64vw);
  --bordure: max(2px, calc(var(--h) * 0.0056));

  position: relative;
  flex: none;
  height: var(--h);
  width: fit-content;
  padding: calc(var(--h) * 0.014);
  background: #0b0b0c;
  border-radius: calc(var(--h) * 0.081);
  border: 2px solid #3a3a3d;
  box-shadow:
    0 60px 100px -40px rgba(23, 53, 22, 0.45),
    0 24px 48px -24px rgba(23, 53, 22, 0.3);
}

.phone .ecran {
  height: 100%;
  aspect-ratio: 1206 / 2622;
  border-radius: calc(var(--h) * 0.067);
  overflow: hidden;
  background: #fff;
}

.phone .ecran img,
.phone .ecran video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Boutons latéraux, comme sur le vrai appareil (épaisseur proportionnelle) */
.phone i {
  position: absolute;
  background: #2c2c2e;
  border-radius: calc(var(--bordure) / 2);
  width: var(--bordure);
}
.phone .b-action   { left: calc(-1 * var(--bordure));  top: 17%;   height: 4%;  }
.phone .b-volplus  { left: calc(-1 * var(--bordure));  top: 24%;   height: 7%;  }
.phone .b-volmoins { left: calc(-1 * var(--bordure));  top: 32.5%; height: 7%;  }
.phone .b-power    { right: calc(-1 * var(--bordure)); top: 26%;   height: 11%; }

/* Le bloc de droite s'ouvre en largeur. Animer la LARGEUR (et non un simple
   fondu) est ce qui pousse l'iPhone : tant qu'elle vaut 0, l'iPhone est seul et
   donc centré. `overflow: hidden` empêche le contenu de s'écraser pendant
   l'ouverture — la carte et la pastille gardent leur taille finale et se
   dévoilent de gauche à droite. */
.cote {
  width: 0;
  margin-left: 0;
  opacity: 0;
  overflow: hidden;
  transition:
    width 1.1s cubic-bezier(0.22, 0.61, 0.36, 1),
    margin-left 1.1s cubic-bezier(0.22, 0.61, 0.36, 1),
    opacity 0.8s ease 0.3s;
}

.groupe.revele .cote {
  width: var(--largeur-qr);
  margin-left: var(--ecart);
  opacity: 1;
}

/* Colonne, pas simple centrage de texte : la carte du QR et la pastille sont
   toutes deux `inline-block` et se plaçaient CÔTE À CÔTE (vu le 2026-07-16).
   L'empilement doit être explicite. */
/* Carte et pastille partagent la largeur du bloc : elles ne peuvent pas
   différer. Elle est FIGÉE (pas 100 %) pour que l'ouverture ne les écrase pas. */
.bloc-qr {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  width: var(--largeur-qr);
}

.carte-qr {
  background: var(--blanc);
  padding: 18px;
  border-radius: 26px;
  box-shadow: 0 20px 44px -18px rgba(23, 53, 22, 0.25);
  display: inline-block;
}

.carte-qr img {
  display: block;
  width: 100%;
  height: auto;
}

/* La pastille « Télécharger l'app ». Même objet des deux côtés (Elliott,
   2026-07-16) : sous le QR sur ordinateur, sous l'iPhone sur téléphone —
   là où le QR n'a pas de sens, on ne scanne pas son propre écran.
   Sous le QR elle est un cran plus petite : le QR reste le geste principal,
   la pastille est la porte de sortie pour qui n'a pas son téléphone en main. */
.pastille {
  display: inline-block;
  /* Le SEUL aplat plein du site : du blanc se pose dessus. 6,00:1. */
  background: var(--vert-surface);
  color: #fff;
  font-weight: 700;
  font-size: 17px;
  padding: 13px 36px;
  border-radius: 999px;
  text-decoration: none;
  /* Sans ça, la mention « (À venir) », qui est un bloc, se cale à GAUCHE sous
     le libellé au lieu d'être centrée avec lui. */
  text-align: center;
  line-height: 1.25;
  /* L'ombre colorée suit l'encre, à une opacité RECALCULÉE et non reprise :
     le vert ayant beaucoup foncé, garder 0,55 aurait alourdi l'ombre au lieu
     de la déplacer. 0,33 rend exactement la même clarté qu'avant sur le fond
     pâle. Même raisonnement pour le survol (0,65 → 0,38). */
  box-shadow: 0 14px 30px -10px rgba(35, 114, 32, 0.33);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.pastille:hover,
.pastille:focus-visible {
  transform: translateY(-1px);
  box-shadow: 0 18px 34px -10px rgba(35, 114, 32, 0.38);
}

/* La pastille prend EXACTEMENT la largeur de la carte QR : les deux ne font
   qu'un seul bloc. Avant, elle débordait de 85px de chaque côté en anglais et
   dessinait un T (relevé par Elliott, 2026-07-20). C'est pour ça que le
   libellé doit rester court DANS LES DEUX LANGUES — aujourd'hui « Télécharger
   sur l'App Store » / « Download on the App Store ».
   Un libellé long reviendrait à deux lignes ici. */
.pastille-qr {
  margin-top: 16px;
  font-size: 13.5px;
  /* Le libellé est long et ne doit JAMAIS passer à deux lignes (Elliott,
     2026-07-20) : `nowrap` l'interdit, la marge latérale est réduite au minimum,
     et l'anglais — 5 caractères de plus — descend d'un cran de corps. Vérifier
     à la MESURE après tout changement de libellé (scrollWidth vs clientWidth). */
  white-space: nowrap;
  padding: 12px 6px;
}

html[lang="en"] .pastille-qr { font-size: 12.5px; }

/* Sur ordinateur, c'est le QR qui parle ; la pastille mobile n'existe pas.
   Elle sert aussi sur tablette tactile, où elle occupe la place du QR : même
   traitement que la pastille de bureau, `nowrap` compris. */
.pastille-mobile {
  display: none;
  width: var(--largeur-qr);
  white-space: nowrap;
  font-size: 15px;
  padding: 13px 10px;
}

html[lang="en"] .pastille-mobile { font-size: 13.5px; }

/* ---------- Pied de page ---------- */

.pied {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 12px;
  padding: clamp(16px, 3vh, 28px) 20px;
  font-size: 14px;
  font-weight: 600;
}

/* ⚠️ PAS d'opacité sur ces liens, et c'est une correction, pas un oubli.
   Ils étaient à 0,75 (et le copyright à 0,55) pour rester discrets : ça les
   posait à 1,92:1 et 1,60:1 sur le fond pâle, les deux pires contrastes du
   site. Même à 0,85 le calcul ne passait pas. La discrétion est portée par la
   taille (14 px) et la place (le pied), plus par un voile. Le survol garde le
   soulignement, qui lui ne coûte rien en lisibilité. */
.pied a {
  color: var(--vert);
  text-decoration: none;
}

.pied a:hover { text-decoration: underline; }

/* Le point séparateur reste voilé : c'est un ornement, pas une information —
   aucun seuil ne s'y applique. Il gagne quand même en présence (1,77:1 contre
   1,40:1 avant), l'encre étant plus foncée que l'ancien vert. */
.pied .point { opacity: 0.4; }

.pied .copyright { color: var(--vert); font-weight: 600; }

/* Le passage à l'autre langue. Volontairement le dernier lien du pied : c'est
   une porte de secours pour qui tombe sur la mauvaise version, pas un geste
   du parcours principal. Le cadre le distingue des autres liens sans crier. */
/* ⚠️ L'opacité de 0,6 portait sur TOUT l'élément — donc sur le mot « EN »
   autant que sur son cadre : 2,45:1 pour un texte, 2,52:1 pour la bordure d'un
   contrôle. Le texte est désormais plein et seule la BORDURE est voilée, à
   0,75, le minimum mesuré qui lui fait passer les 3:1 exigés d'un contrôle. */
.pied .langue {
  padding: 3px 9px;
  border: 1.5px solid rgba(35, 114, 32, 0.75);
  border-radius: 999px;
  font-weight: 700;
  letter-spacing: 0.02em;
}

.pied .langue:hover,
.pied .langue:focus-visible {
  border-color: var(--vert);
  text-decoration: none;
  background: rgba(35, 114, 32, 0.07);
}

/* ---------- Mobile ---------- */

/* Empilement vertical : écran étroit ET assez haut, c'est-à-dire un vrai
   téléphone en portrait. Une fenêtre large mais basse (laptop pas plein
   écran, iPhone couché) garde la disposition en ligne : empiler y demanderait
   une hauteur qu'on n'a pas. */
@media (max-width: 820px) and (min-height: 600px) {
  .groupe {
    flex-direction: column;
    justify-content: center;
    gap: clamp(20px, 4dvh, 34px);
  }

  /* ⚠️ SPÉCIFICITÉ : une media query n'ajoute AUCUNE spécificité. Un simple
     `.groupe { transform: none }` ici PERD contre `.groupe.revele { transform }`
     déclaré plus haut — c'est ce qui décalait l'iPhone ET la pastille vers la
     droite après le point, et qui réappliquait une `margin-left` de 40px sous
     l'iPhone (défaut vu par Elliott sur son téléphone, 2026-07-20). Il faut
     donc répéter `.revele` dans le sélecteur. */
  .groupe,
  .groupe.revele { transform: none; }

  .cote,
  .groupe.revele .cote {
    width: auto;
    margin-left: 0;
    opacity: 1;
    overflow: visible;
    transition: none;
  }

  /* Sur téléphone la pastille est le seul geste possible : elle reprend une
     taille franche. L'anglais descend d'un cran — 5 caractères de plus, et il
     ne doit JAMAIS passer à deux lignes (Elliott, 2026-07-20). */
  .pastille-mobile {
    width: auto;
    font-size: 16px;
    padding: 15px 26px;
  }

  html[lang="en"] .pastille-mobile { font-size: 14.5px; }

  /* Seule --h change : coins, contour et boutons se recalculent tout seuls.
     On réserve 240px pour le bouton + le pied de page sous l'iPhone. */
  .phone {
    --h: min(64dvh, calc(100dvh - 240px), 620px);
  }
}

/* Le QR s'adresse à qui est devant un ordinateur ; sur un appareil tactile on
   ne scanne pas son propre écran, donc bouton. Le critère principal est le
   pointeur (un iPhone couché reste tactile, un petit hublot sur Mac reste une
   souris), avec la largeur en filet de sécurité : si jamais la détection du
   tactile échouait sur un appareil, un écran de moins de 560px reçoit quand
   même le bouton — jamais un QR inscannable. */
@media (hover: none) and (pointer: coarse), (max-width: 560px) {
  .bloc-qr { display: none; }
  .pastille-mobile { display: inline-block; }

  /* SANS code QR, il n'y a rien à révéler : la mise en scène est retirée.
     Elle couvre ici le téléphone en PAYSAGE, que la règle d'empilement
     ci-dessus ne voit pas (elle exige 600px de haut).
     ⚠️ `.revele` doit être répété : une media query n'ajoute aucune
     spécificité, un simple `.groupe` perdrait contre `.groupe.revele`. */
  .groupe,
  .groupe.revele { transform: none; }

  .cote,
  .groupe.revele .cote {
    width: auto;
    margin-left: 0;
    opacity: 1;
    overflow: visible;
    transition: none;
  }
}

@media (max-width: 820px) {
  .pied { font-size: 13px; }
  .pied .mot-long { display: none; }
}

/* ---------- Explication « chiffrement et confidentialité » ----------

   Vit dans la carte de confidentialite.html / en/privacy.html, AVANT la
   politique verbatim. Cible des liens EN DUR de l'app : les ancres
   `#chiffrement` (FR) et `#encryption` (EN) NE PEUVENT PAS CHANGER — l'accueil
   y redirige aussi. Qui lit ça vient d'une demande d'autorisation qui
   l'inquiète : ton factuel, court, jargon replié dans le <details>. */

.faq { scroll-margin-top: clamp(16px, 4vh, 32px); }

.faq h3 {
  font-size: clamp(16px, 1.8vw, 18px);
  font-weight: 700;
  color: var(--vert);
  margin-bottom: 6px;
}

.faq p {
  font-size: clamp(15px, 1.6vw, 16.5px);
  line-height: 1.65;
  margin-bottom: 0;
}

.faq .bloc + .bloc { margin-top: clamp(18px, 2.6vh, 26px); }

/* Le détail technique, replié : il rassure celui qui veut vérifier sans
   alourdir la lecture d'une minute. */
.faq details {
  margin-top: clamp(22px, 3vh, 30px);
  /* Filet de séparation, pas un contrôle : aucun seuil ne s'y applique. Son
     opacité est RECALCULÉE (0,25 → 0,16) pour rendre la même clarté qu'avant,
     l'encre ayant beaucoup foncé. */
  border-top: 1px solid rgba(35, 114, 32, 0.16);
  padding-top: 16px;
}

.faq summary {
  cursor: pointer;
  font-size: 15px;
  font-weight: 700;
  color: var(--vert);
  list-style: none;
}

.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: " +"; font-weight: 800; }
.faq details[open] summary::after { content: " –"; }

.faq details ul {
  margin: 14px 0 0 18px;
  font-size: 14.5px;
  line-height: 1.6;
  opacity: 0.85;
}

.faq details li { margin-bottom: 9px; }

.faq code {
  font-size: 0.92em;
  background: var(--fond);
  padding: 1px 5px;
  border-radius: 5px;
}

/* La politique verbatim, sous l'explication : une frontière nette entre « ce
   qu'on t'explique » et « le texte officiel, mot pour mot ». */
.titre-politique,
.titre-section {
  margin-top: clamp(34px, 5vh, 48px) !important;
  padding-top: clamp(24px, 3.5vh, 34px);
  /* Filet de séparation, pas un contrôle : aucun seuil ne s'y applique. Son
     opacité est RECALCULÉE (0,25 → 0,16) pour rendre la même clarté qu'avant,
     l'encre ayant beaucoup foncé. */
  border-top: 1px solid rgba(35, 114, 32, 0.16);
}

.note-politique {
  font-size: 14px;
  color: var(--gris);
  margin-top: -4px;
}

/* ---------- Accueil réduit (période de revue App Store) ----------

   Le nom, et rien d'autre. Ni iPhone, ni clip, ni QR, ni annonce : la vitrine
   complète est une carte à jouer au lancement, pas quelque chose à laisser
   fuiter pendant la revue (Elliott, 2026-07-20). Cette page existe surtout
   parce que les deux liens de l'onboarding pointent en dur sur la racine :
   sans elle, ils tomberaient dans le vide. */

.accueil-reduit {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

.marque-seule {
  font-size: clamp(30px, 6vw, 52px);
  font-weight: 800;
  letter-spacing: -0.03em;
  color: var(--vert);
}

/* Le point noir : la signature de l'animation d'ouverture. */
.marque-seule .point-noir { color: var(--encre); }

/* ---------- Pages de contenu (confidentialité, conditions, support) ---------- */

.page-contenu {
  width: min(720px, calc(100% - 40px));
  margin: 0 auto clamp(28px, 5vh, 56px);
  background: var(--blanc);
  border-radius: 28px;
  padding: clamp(26px, 5vw, 52px);
  color: var(--encre);
  box-shadow: 0 24px 60px -30px rgba(23, 53, 22, 0.25);
  line-height: 1.65;
}

/* Flèche de retour, en tête de carte. Le mot-symbole en haut à gauche ramène
   déjà à l'accueil, mais tout le monde n'a pas le réflexe de cliquer un nom
   (Elliott, 2026-07-16) : cette flèche dit explicitement « reviens en arrière ».
   Discrète au repos, elle s'affirme au survol.
   La marge négative l'aligne optiquement sur le bord du texte tout en gardant
   une cible de 44 px — le minimum tactile recommandé par Apple. */
.retour {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  margin: -10px 0 2px -13px;
  border-radius: 999px;
  color: var(--vert);
  /* 0,55 posait le chevron à 2,42:1 : c'est un CONTRÔLE, il lui faut 3:1.
     0,70 est le minimum mesuré qui les tient (3,23:1) sans le durcir. */
  opacity: 0.7;
  transition: opacity 0.15s ease, background-color 0.15s ease;
}

.retour:hover,
.retour:focus-visible {
  opacity: 1;
  background: var(--fond);
}

.retour svg {
  width: 19px;
  height: 19px;
  display: block;
}

.page-contenu h1 {
  color: var(--vert);
  font-size: clamp(26px, 4vw, 34px);
  letter-spacing: -0.02em;
  margin-bottom: 6px;
}

.page-contenu .date-maj {
  color: var(--gris);
  font-size: 14px;
  margin-bottom: 26px;
}

.page-contenu h2 {
  color: var(--vert);
  font-size: 20px;
  margin: 30px 0 10px;
}

.page-contenu h3 {
  color: var(--encre);
  font-size: 17px;
  margin: 22px 0 8px;
}

.page-contenu p { margin-bottom: 14px; }
.page-contenu ul { margin: 0 0 14px 22px; }
.page-contenu li { margin-bottom: 8px; }

.page-contenu a {
  color: var(--vert);
  font-weight: 600;
}

.page-contenu .encadre {
  background: var(--fond);
  border-radius: 18px;
  padding: 18px 20px;
  margin-bottom: 24px;
}

/* ---------- Page-relais du code QR (app/ et en/app/) ----------
   Elle annonçait « Bientôt sur l'App Store » jusqu'à la sortie de l'app le
   2026-08-12 ; depuis, elle redirige vers la fiche. Ce qui suit ne s'affiche
   donc qu'une fraction de seconde — ou pour de bon si la redirection est
   bloquée, d'où le lien manuel qui doit rester lisible. */

.relais {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  text-align: center;
  padding: 20px;
}

/* L'icône de l'app, en vrai, plutôt que son nom écrit (Elliott, 2026-07-16) :
   celui qui scanne le QR arrive ici sans être passé par l'accueil — l'icône lui
   dit chez qui il est, et c'est ce qu'il cherchera ensuite sur l'App Store.
   Le rayon de 22,4 % approche le « squircle » d'iOS ; le fichier source est
   l'icône carrée de l'app, qu'iOS arrondit lui-même à l'installation. */
.logo-app {
  width: clamp(76px, 9vw, 92px);
  height: auto;
  border-radius: 22.4%;
  box-shadow: 0 12px 28px -10px rgba(23, 53, 22, 0.35);
}

.relais h1 {
  font-size: clamp(30px, 5.5vw, 44px);
  letter-spacing: -0.025em;
  color: var(--vert);
  max-width: 15ch;
}

/* Le voile de 0,75 la posait à 3,32:1, sous le seuil d'un texte courant. Elle
   reste en retrait par sa taille et son poids, pas par une opacité. */
.relais-detail {
  font-size: clamp(15px, 1.7vw, 17px);
  font-weight: 600;
  line-height: 1.6;
  color: var(--vert);
  max-width: 42ch;
}

/* Le lien de secours : souligné, parce qu'il est de la même encre que la
   phrase qui le porte — sans le trait, rien ne dirait qu'il se clique. */
.relais-detail a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* La flèche de retour, sous l'annonce. Même chevron que sur les pages de
   contenu, mais centré et sans la marge négative qui l'alignait sur un bord
   de texte. */
.relais .retour {
  margin: 6px 0 0;
}