/* ============================================================
   Un bon clavier — style du site
   Couleurs tirées de l'app (ClavinoTheme.swift) :
   vert branding #49B260 ; fond = ce vert à 12 % sur blanc,
   le même que les pastilles du clavier.
   Deux ambiances : accueil plein écran, pages de contenu.
   ============================================================ */

:root {
  --vert: #49b260;
  --vert-fonce: #1e6b35;
  --encre: #16351f;
  --fond: #e9f6ec;
  --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;
}

::selection { background: var(--vert); 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(22, 53, 31, 0.45),
    0 24px 48px -24px rgba(22, 53, 31, 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(22, 53, 31, 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;
  background: var(--vert);
  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;
  box-shadow: 0 14px 30px -10px rgba(73, 178, 96, 0.55);
  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(73, 178, 96, 0.65);
}

/* 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 — « Bientôt. » / « Soon. ».
   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;
}

.pied a {
  color: var(--vert);
  opacity: 0.75;
  text-decoration: none;
}

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

.pied .point { opacity: 0.4; }

.pied .copyright { opacity: 0.55; 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. */
.pied .langue {
  padding: 3px 9px;
  border: 1.5px solid currentColor;
  border-radius: 999px;
  font-weight: 700;
  letter-spacing: 0.02em;
  opacity: 0.6;
}

.pied .langue:hover,
.pied .langue:focus-visible {
  opacity: 1;
  text-decoration: none;
  background: rgba(73, 178, 96, 0.12);
}

/* ---------- 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-fonce);
  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);
  border-top: 1px solid rgba(73, 178, 96, 0.25);
  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);
  border-top: 1px solid rgba(73, 178, 96, 0.25);
}

.note-politique {
  font-size: 14px;
  color: #6b7f70;
  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(22, 53, 31, 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);
  opacity: 0.55;
  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-fonce);
  font-size: clamp(26px, 4vw, 34px);
  letter-spacing: -0.02em;
  margin-bottom: 6px;
}

.page-contenu .date-maj {
  color: #6b7f70;
  font-size: 14px;
  margin-bottom: 26px;
}

.page-contenu h2 {
  color: var(--vert-fonce);
  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-fonce);
  font-weight: 600;
}

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

/* ---------- Page « bientôt » (cible du code QR) ---------- */

.bientot {
  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(22, 53, 31, 0.35);
}

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

.bientot-detail {
  font-size: clamp(15px, 1.7vw, 17px);
  font-weight: 600;
  line-height: 1.6;
  color: var(--vert-fonce);
  opacity: 0.75;
  max-width: 42ch;
}

/* 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. */
.bientot .retour {
  margin: 6px 0 0;
}