/* Torii — page de téléchargement.
   Palette reprise de l'application (src/style.css) : la page doit ressembler à ce qu'on
   va installer. Une seule feuille, aucune dépendance, aucune police distante. */

:root {
  --bg: #131019;
  --bg-grad: radial-gradient(1300px 800px at 78% -14%, #241c3d 0%, transparent 62%),
             radial-gradient(1000px 700px at -8% 4%, #1c1524 0%, transparent 58%);
  --surface: #1b1823;
  --surface-2: #232030;
  --border: rgba(255, 255, 255, 0.08);
  --border-strong: rgba(255, 255, 255, 0.15);
  --text: #ece9f3;
  --text-dim: #a39daf;
  --text-faint: #948fa1;      /* calibré pour tenir le contraste AA, comme dans l'app */
  --accent: #ff6b57;
  --accent-hover: #ff8069;
  --accent-ink: #1a0f0c;
  --accent-soft: rgba(255, 107, 87, 0.13);
  --radius: 18px;
  --font: "Segoe UI Variable Display", "Segoe UI", system-ui, -apple-system, sans-serif;
  --large: 1180px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--font);
  color: var(--text);
  background: var(--bg);
  background-image: var(--bg-grad);
  background-attachment: fixed;
  -webkit-font-smoothing: antialiased;
  line-height: 1.6;
}

img { max-width: 100%; height: auto; display: block; }
a { color: var(--accent); }
a:hover { color: var(--accent-hover); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 8px; }

h1, h2, h3 { letter-spacing: -0.025em; line-height: 1.12; }

/* --- En-tête : texte à gauche, capture qui déborde à droite -------------------
   La capture est volontairement coupée par le bord de l'écran : elle donne le format
   de l'application sans qu'on ait à la réduire en vignette illisible. */

.hero {
  max-width: var(--large);
  margin: 0 auto;
  padding: 76px 24px 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
  gap: 48px;
  align-items: center;
}
.mark {
  width: 88px; height: 88px; border-radius: 20px;
  box-shadow: 0 22px 55px -22px rgba(255, 107, 87, 0.6);
}
.hero h1 {
  margin: 26px 0 0;
  font-size: clamp(38px, 5.2vw, 58px);
  font-weight: 800;
}
.lead {
  margin: 20px 0 32px;
  font-size: clamp(15.5px, 1.5vw, 17.5px);
  color: var(--text-dim);
  max-width: 46ch;
}
.hero-image img {
  border: 1px solid var(--border-strong);
  border-radius: 14px;
  box-shadow: 0 50px 100px -40px rgba(0, 0, 0, 0.9);
}

.cta {
  display: inline-flex; align-items: center; gap: 11px;
  padding: 16px 32px; border-radius: 14px;
  background: var(--accent); color: var(--accent-ink);
  font-size: 16.5px; font-weight: 700; text-decoration: none;
  box-shadow: 0 16px 38px -14px var(--accent);
  transition: background 0.15s, transform 0.12s;
}
.cta:hover { background: var(--accent-hover); color: var(--accent-ink); transform: translateY(-1px); }
.cta svg { width: 20px; height: 20px; flex: none; }

.sous-cta {
  margin: 15px 0 0; font-size: 13.5px; color: var(--text-faint);
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px;
}
.discret { color: var(--text-dim); text-decoration: none; border-bottom: 1px solid var(--border-strong); }
.discret:hover { color: var(--text); }

/* --- Bandeau de chiffres ------------------------------------------------------ */

.bandeau {
  max-width: var(--large);
  margin: 84px auto 0;
  padding: 26px 24px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 24px;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}
.bandeau div { text-align: center; }
.bandeau strong {
  display: block; font-size: 27px; font-weight: 800; color: var(--accent);
  letter-spacing: -0.03em;
}
.bandeau span { font-size: 13px; color: var(--text-faint); }

/* --- Sections alternées ------------------------------------------------------- */

/* 🔑 Colonnes ÉGALES depuis que les visuels sont des dessins. Avec des captures, la
   colonne image était plus large — une copie d'écran rétrécie devient illisible. Mais
   `order` fait passer une section sur deux dans l'autre colonne : les dessins des
   sections inversées se retrouvaient 120 px plus étroits que les autres, et une série
   d'illustrations dont la taille change d'un cran sur deux ne se lit plus comme une
   série. Un dessin, lui, ne perd rien à 540 px. */
.section {
  max-width: var(--large);
  margin: 96px auto;
  padding: 0 24px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 52px;
  align-items: center;
}
/* Une section sur deux inverse l'ordre : sans ça, la page défile comme un formulaire. */
.section.inverse .section-texte { order: 2; }

.sur-titre {
  margin: 0 0 10px;
  font-size: 12px; font-weight: 700; letter-spacing: 0.09em; text-transform: uppercase;
  color: var(--accent);
}
.section h2 { margin: 0 0 16px; font-size: clamp(25px, 3vw, 33px); font-weight: 800; }
.section p { margin: 0 0 14px; color: var(--text-dim); font-size: 15.5px; }
.section .fin { margin-bottom: 0; }
.section em { color: var(--text); font-style: normal; font-weight: 600; }
.section strong { color: var(--text); }

.puces { margin: 18px 0 0; padding: 0; list-style: none; }
.puces li {
  position: relative; padding-left: 24px; margin-bottom: 9px;
  color: var(--text-dim); font-size: 14.5px;
}
.puces li::before {
  content: ""; position: absolute; left: 4px; top: 9px;
  width: 7px; height: 7px; border-radius: 50%; background: var(--accent);
}

/* --- Illustrations -------------------------------------------------------------
   🔑 CE QUI REMPLACE LES CAPTURES. Une copie d'écran par section coûtait cher pour ce
   qu'elle apportait : plus d'un mégaoctet à servir, une anonymisation des pseudonymes
   d'amis à refaire à chaque prise, et une image qui ment dès que l'interface bouge.
   Les dessins, eux, montrent l'IDÉE de la section — ils ne prétendent pas montrer le
   produit. La seule capture restante est celle de l'en-tête, et la démo fait le reste.

   Les sept dessins partagent ce jeu de classes : c'est ce qui les fait lire comme une
   famille plutôt que comme sept illustrations trouvées au hasard. Ils héritent des
   jetons de couleur, donc ils suivent le thème clair sans une règle de plus. */

.section-illu, .essai-illu { margin: 0; }

.illu-cadre {
  padding: 26px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background:
    radial-gradient(620px 360px at 74% 4%, var(--accent-soft) 0%, transparent 62%),
    var(--surface);
  overflow: hidden;
}
.illu { display: block; width: 100%; height: auto; }

.illu .cadre { fill: var(--surface-2); stroke: var(--border-strong); stroke-width: 1.5; }
/* ⚠️ `--surface-2` posé sur `--surface` ne se voit presque pas — c'est voulu dans
   l'application, où ces deux fonds ne se touchent jamais sur un aplat. Dans un dessin,
   ils se touchent partout : sans ce filet, les jaquettes et les vignettes disparaissent
   purement et simplement (constaté au rendu, en sombre comme en clair). */
.illu .doux { fill: var(--surface-2); stroke: var(--border-strong); stroke-width: 1; }
.illu .fin { fill: none; stroke: var(--border-strong); stroke-width: 1.5; }
.illu .trait {
  fill: none; stroke: var(--text-faint); stroke-width: 2;
  stroke-linecap: round; stroke-linejoin: round;
}
.illu .accent {
  fill: none; stroke: var(--accent); stroke-width: 2.2;
  stroke-linecap: round; stroke-linejoin: round;
}
.illu .plein { fill: var(--accent); }
.illu .encre { fill: var(--accent-ink); }
.illu .aire { fill: var(--accent); opacity: 0.13; }
/* Les « barres » tiennent lieu de texte : deux niveaux suffisent à hiérarchiser. */
.illu .barre { fill: var(--text-faint); opacity: 0.55; }
.illu .barre-faible { fill: var(--text-faint); opacity: 0.28; }
.illu text { fill: var(--text-faint); font-family: var(--font); font-weight: 700; }

/* Petite icône en tête des cartes « pourquoi » : même trait que les dessins. */
.ico-carte {
  display: block; width: 32px; height: 32px; margin: 0 0 15px;
  color: var(--accent);
  fill: none; stroke: currentColor; stroke-width: 1.8;
  stroke-linecap: round; stroke-linejoin: round;
}

/* --- Comparaison -------------------------------------------------------------- */

.comparaison {
  max-width: var(--large);
  margin: 110px auto;
  padding: 0 24px;
}
.comparaison h2 {
  margin: 0 0 12px; font-size: clamp(25px, 3vw, 33px); font-weight: 800; text-align: center;
}
.comparaison .intro {
  margin: 0 auto 40px; max-width: 62ch; text-align: center;
  color: var(--text-dim); font-size: 15.5px;
}
.grille-comparaison {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(275px, 1fr)); gap: 20px;
}
.grille-comparaison article {
  padding: 26px 24px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}
.grille-comparaison h3 { margin: 0 0 9px; font-size: 16.5px; font-weight: 700; }
.grille-comparaison p { margin: 0; font-size: 14.5px; color: var(--text-dim); }

/* --- FAQ ---------------------------------------------------------------------- */

.faq { max-width: 800px; margin: 110px auto; padding: 0 24px; }
.faq h2 {
  margin: 0 0 32px; font-size: clamp(25px, 3vw, 33px); font-weight: 800; text-align: center;
}
.faq details {
  border-bottom: 1px solid var(--border);
  padding: 4px 0;
}
.faq summary {
  padding: 17px 34px 17px 0; position: relative;
  font-size: 15.5px; font-weight: 600; cursor: pointer; list-style: none;
}
.faq summary::-webkit-details-marker { display: none; }
/* Le chevron pivote : sans repère visuel, on ne devine pas que la ligne s'ouvre. */
.faq summary::after {
  content: ""; position: absolute; right: 6px; top: 50%;
  width: 9px; height: 9px; margin-top: -6px;
  border-right: 2px solid var(--text-faint); border-bottom: 2px solid var(--text-faint);
  transform: rotate(45deg); transition: transform 0.18s;
}
.faq details[open] summary::after { transform: rotate(-135deg); margin-top: -2px; }
.faq details p { margin: 0 0 18px; color: var(--text-dim); font-size: 14.5px; }
.faq strong { color: var(--text); }

/* --- Appel final -------------------------------------------------------------- */

.final {
  max-width: 720px; margin: 0 auto; padding: 74px 24px 96px; text-align: center;
}
.final h2 { margin: 0 0 12px; font-size: clamp(25px, 3vw, 34px); font-weight: 800; }
.final p { margin: 0 0 28px; color: var(--text-dim); font-size: 15.5px; }
.final .note { margin: 20px 0 0; font-size: 12.5px; color: var(--text-faint); }
.final strong { color: var(--text-dim); }

/* --- Pied --------------------------------------------------------------------- */

footer {
  border-top: 1px solid var(--border);
  padding: 34px 24px 48px;
  display: flex; flex-direction: column; align-items: center; gap: 12px; text-align: center;
}
.mark-mini { width: 28px; height: 28px; border-radius: 7px; opacity: 0.9; }
footer p { margin: 0; font-size: 13.5px; color: var(--text-faint); }
footer nav { display: flex; flex-wrap: wrap; gap: 20px; justify-content: center; }
footer nav a { font-size: 13.5px; color: var(--text-dim); text-decoration: none; }
footer nav a:hover { color: var(--text); text-decoration: underline; }

/* --- Écrans étroits ------------------------------------------------------------
   En dessous de 900 px, tout passe en une colonne — et `order` est remis à plat,
   sinon une section inversée afficherait son image AVANT son titre. */
@media (max-width: 900px) {
  .hero, .section {
    grid-template-columns: 1fr;
    gap: 34px;
    text-align: left;
  }
  .hero { padding-top: 52px; }
  .section { margin: 68px auto; }
  .section.inverse .section-texte { order: 0; }
  .lead { max-width: none; }
}

/* --- Thème clair ---------------------------------------------------------------
   Mêmes jetons que l'application, accent plus profond pour que le blanc posé dessus
   reste lisible. */
@media (prefers-color-scheme: light) {
  :root {
    --bg: #f2f0f7;
    --bg-grad: radial-gradient(1300px 800px at 80% -14%, #e9e2f8 0%, transparent 60%),
               radial-gradient(900px 600px at -6% 4%, #f7ecec 0%, transparent 56%);
    --surface: #ffffff;
    --surface-2: #f7f5fb;
    --border: rgba(23, 17, 33, 0.1);
    --border-strong: rgba(23, 17, 33, 0.16);
    --text: #1a1626;
    --text-dim: #5f596d;
    --text-faint: #6e677d;
    --accent: #c63118;
    --accent-hover: #a82812;
    --accent-ink: #fff;
    --accent-soft: rgba(198, 49, 24, 0.1);
  }
  .hero-image img { box-shadow: 0 40px 90px -45px rgba(40, 20, 60, 0.45); }
}

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

/* --- Bouton secondaire : essayer plutôt que télécharger ------------------------ */

.essai { margin-top: 10px; }
.cta-secondaire {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 9px 16px; border-radius: 11px;
  border: 1px solid var(--border-strong);
  background: var(--surface);
  color: var(--text); font-size: 13.5px; font-weight: 600; text-decoration: none;
  transition: border-color 0.15s, background 0.15s, transform 0.12s;
}
.cta-secondaire:hover {
  color: var(--text); background: var(--surface-2);
  border-color: var(--accent); transform: translateY(-1px);
}
.cta-secondaire svg { width: 15px; height: 15px; flex: none; color: var(--accent); }
.sous-cta .dim { color: var(--text-faint); }

/* --- Bloc « essayer sans installer » ------------------------------------------
   Un encadré plein plutôt qu'une section de plus : à ce stade de la page, le visiteur
   a fini de lire et il faut une rupture visuelle, pas un septième paragraphe. */

.essai-libre {
  max-width: var(--large);
  margin: 110px auto 0;
  padding: 44px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  gap: 44px;
  align-items: center;
  border: 1px solid var(--border-strong);
  border-radius: 26px;
  background:
    radial-gradient(760px 420px at 88% 8%, var(--accent-soft) 0%, transparent 64%),
    var(--surface);
  overflow: hidden;
}
.essai-libre h2 { margin: 0 0 16px; font-size: clamp(25px, 3vw, 33px); font-weight: 800; }
.essai-libre p { margin: 0 0 14px; color: var(--text-dim); font-size: 15.5px; }
.essai-libre .fin { margin-bottom: 26px; }
.essai-libre em { color: var(--text); font-style: normal; font-weight: 600; }

/* Le dessin penche légèrement : posé bien droit dans un encadré lui-même bien droit,
   il se confondrait avec le fond. Ce petit décalage suffit à le détacher. */
.essai-illu .illu-cadre {
  background: var(--surface-2);
  border-color: var(--border-strong);
  transform: rotate(-1.4deg);
}

@media (max-width: 900px) {
  .essai-libre { grid-template-columns: 1fr; gap: 30px; padding: 30px 24px; margin-top: 68px; }
  .essai-illu .illu-cadre { transform: none; }
}

/* --- Mise en mouvement ---------------------------------------------------------
   🔑 L'état masqué est conditionné à la classe `js`, posée par un script en tête de
   page. Sans JavaScript — ou si le script échoue — aucune règle ne s'applique et la
   page reste entièrement lisible. Masquer d'abord et révéler ensuite, c'est prendre
   le risque d'une page blanche définitive au moindre pépin. */

.js .reveal {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 0.65s cubic-bezier(0.2, 0.7, 0.2, 1),
              transform 0.65s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.js .reveal.vu { opacity: 1; transform: none; }

/* Décalage en cascade à l'intérieur d'un même bloc : les puces et les cartes arrivent
   l'une après l'autre plutôt qu'en bloc, ce qui guide l'œil de haut en bas. */
.js .reveal.vu > * { animation: aParaitre 0.5s both; }
.js .reveal.vu > :nth-child(2) { animation-delay: 0.06s; }
.js .reveal.vu > :nth-child(3) { animation-delay: 0.12s; }
.js .reveal.vu > :nth-child(4) { animation-delay: 0.18s; }
.js .reveal.vu > :nth-child(5) { animation-delay: 0.24s; }
.js .reveal.vu > :nth-child(6) { animation-delay: 0.3s; }
@keyframes aParaitre { from { opacity: 0; transform: translateY(10px); } }

/* Entrée de l'en-tête, au chargement. Les images sont volontairement exclues :
   une capture qui glisse pendant que la police se charge donne une page qui tremble. */
.hero-texte > * { animation: monteEnTete 0.7s both cubic-bezier(0.2, 0.8, 0.2, 1); }
.hero-texte > :nth-child(2) { animation-delay: 0.08s; }
.hero-texte > :nth-child(3) { animation-delay: 0.16s; }
.hero-texte > :nth-child(4) { animation-delay: 0.24s; }
.hero-texte > :nth-child(5) { animation-delay: 0.32s; }
.hero-texte > :nth-child(6) { animation-delay: 0.4s; }
@keyframes monteEnTete { from { opacity: 0; transform: translateY(16px); } }

.hero-image img { animation: arriveCapture 0.9s 0.15s both cubic-bezier(0.2, 0.8, 0.2, 1); }
@keyframes arriveCapture { from { opacity: 0; transform: translateY(26px) scale(0.985); } }

/* La marque respire : un halo lent, seul mouvement permanent de la page. */
.mark { animation: souffle 7s 1.2s ease-in-out infinite; }
@keyframes souffle {
  0%, 100% { box-shadow: 0 22px 55px -22px rgba(255, 107, 87, 0.6); }
  50% { box-shadow: 0 26px 70px -22px rgba(255, 107, 87, 0.85); }
}

/* Les dessins se soulèvent au survol : ils deviennent des objets, pas des images. */
.illu-cadre {
  transition: transform 0.35s cubic-bezier(0.2, 0.7, 0.2, 1), border-color 0.35s;
}
.section-illu .illu-cadre:hover {
  transform: translateY(-6px);
  border-color: var(--border-strong);
}
.essai-illu .illu-cadre:hover { transform: rotate(-1.4deg) translateY(-6px); }

.grille-comparaison article {
  transition: transform 0.22s, border-color 0.22s, background 0.22s;
}
.grille-comparaison article:hover {
  transform: translateY(-3px);
  border-color: var(--border-strong);
  background: var(--surface-2);
}

.bandeau strong { transition: transform 0.25s; }
.bandeau div:hover strong { transform: scale(1.06); }

/* ⚠️ Filet de sécurité. La règle globale plus haut coupe transitions et animations en
   mouvement réduit ; sans ce rappel, tout ce qui est masqué au départ le resterait,
   faute de transition pour l'en révéler. On rend visible, sans mouvement. */
@media (prefers-reduced-motion: reduce) {
  .js .reveal, .js .reveal.vu > *, .hero-texte > *, .hero-image img {
    opacity: 1 !important;
    transform: none !important;
  }
}

/* --- Lien vers l'autre langue (accueil) ---------------------------------------
   L'accueil n'a pas de barre de navigation : le lien flotte en haut à droite, discret.
   🔑 `position: absolute` et pas `fixed` : il reste en haut de page au lieu de suivre
   le défilement, où il recouvrirait la capture et les sections. */
.bascule-langue {
  position: absolute;
  top: 20px;
  right: 24px;
  z-index: 2;
  padding: 6px 13px;
  border-radius: 999px;
  font-size: 0.88rem;
  font-weight: 600;
  text-decoration: none;
  color: var(--text-dim);
  background: var(--surface);
  border: 1px solid var(--border);
}
.bascule-langue:hover { color: var(--text); border-color: var(--border-strong); }

/* ============================================================================
   PAGES SECONDAIRES (/notes-de-version/, /steam/)
   ============================================================================

   L'accueil vend le produit ; ces pages-là répondent à une question précise. Elles
   n'ont donc ni capture qui déborde, ni dessins, ni mise en page sur deux colonnes :
   une colonne de texte lisible, et le bouton de téléchargement au bout.

   🔑 ELLES PARTAGENT CETTE FEUILLE, volontairement. Trois fichiers CSS pour trois
   pages, c'est trois endroits où la couleur d'accent peut diverger le jour où on la
   change. Tout ce qui suit est préfixé, rien ici ne touche à l'accueil. */

/* --- Barre de navigation des pages secondaires ------------------------------
   L'accueil n'en a pas : on y arrive par le haut, le logo est déjà dans l'en-tête.
   Sur une page interne, il faut un chemin de retour visible — sans quoi le seul
   moyen de revenir au téléchargement est le bouton « précédent » du navigateur. */
.barre-site {
  max-width: var(--large);
  margin: 0 auto;
  padding: 22px 24px;
  display: flex;
  align-items: center;
  gap: 14px;
}
.barre-site .marque {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--text);
  text-decoration: none;
  font-weight: 650;
  letter-spacing: -0.02em;
}
.barre-site .marque img { width: 30px; height: 30px; border-radius: 9px; }
.barre-site nav { margin-left: auto; display: flex; gap: 22px; align-items: center; }
.barre-site nav a {
  color: var(--text-dim);
  text-decoration: none;
  font-size: 0.95rem;
}
.barre-site nav a:hover { color: var(--text); }
.barre-site nav a.actif { color: var(--text); }

/* --- Colonne de lecture ------------------------------------------------------
   66 caractères par ligne environ : au-delà, l'œil perd le début de la ligne
   suivante. C'est la seule raison de cette largeur, bien plus étroite que --large. */
.page {
  max-width: 780px;
  margin: 0 auto;
  padding: 40px 24px 96px;
}
.page-entete { margin-bottom: 56px; }
.page-entete .sur-titre { margin-bottom: 10px; }
.page-entete h1 {
  font-size: clamp(2rem, 4.6vw, 3rem);
  margin: 0 0 18px;
}
.page-entete .chapeau {
  font-size: 1.16rem;
  color: var(--text-dim);
  margin: 0;
  max-width: 62ch;
}
.page h2 {
  font-size: 1.62rem;
  margin: 54px 0 14px;
}
.page h3 {
  font-size: 1.16rem;
  margin: 32px 0 10px;
}
.page p { color: var(--text-dim); margin: 0 0 16px; }
.page strong { color: var(--text); font-weight: 620; }
.page code {
  font-family: ui-monospace, "Cascadia Mono", Consolas, monospace;
  font-size: 0.9em;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 1px 6px;
}

/* --- Tableau (pages de plateforme) ------------------------------------------
   ⚠️ `overflow-x` sur l'enveloppe, pas sur le tableau : un tableau qui déborde
   pousse toute la page vers la droite sur un téléphone, et c'est le `body` entier
   qui se met à défiler de travers. */
.cadre-tableau { overflow-x: auto; margin: 0 0 22px; }
.page table {
  width: 100%;
  min-width: 460px;
  border-collapse: collapse;
  font-size: 0.97rem;
}
.page th, .page td {
  text-align: left;
  padding: 12px 14px;
  border-bottom: 1px solid var(--border);
  vertical-align: top;
}
.page th { color: var(--text); font-weight: 620; }
.page td { color: var(--text-dim); }
.page tr:last-child td { border-bottom: none; }

/* --- Notes de version --------------------------------------------------------
   Une version = un bloc. La pastille de version reste visible pendant qu'on lit la
   liste : sur une page de 35 versions, savoir où l'on est compte plus que le style. */
.notes { display: grid; gap: 18px; }
.note-version {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 26px 28px;
}
.note-version > header {
  display: flex;
  align-items: baseline;
  gap: 14px;
  flex-wrap: wrap;
  margin-bottom: 4px;
}
.note-version h2 {
  margin: 0;
  font-size: 1.34rem;
  scroll-margin-top: 24px;
}
.note-version h2 a { color: inherit; text-decoration: none; }
.note-version h2 a:hover { color: var(--accent); }
.note-version time { color: var(--text-faint); font-size: 0.92rem; }
.note-version .etiquette {
  background: var(--accent-soft);
  color: var(--accent);
  border-radius: 999px;
  padding: 3px 11px;
  font-size: 0.78rem;
  font-weight: 650;
  letter-spacing: 0.02em;
}
.note-version ul { margin: 14px 0 0; padding: 0; list-style: none; }
.note-version li {
  color: var(--text-dim);
  padding-left: 22px;
  position: relative;
  margin-bottom: 14px;
}
.note-version li:last-child { margin-bottom: 0; }
.note-version li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 0.62em;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--accent);
  opacity: 0.55;
}

/* --- Renvoi vers le téléchargement, en fin de page secondaire ---------------- */
.rappel {
  margin-top: 64px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 34px 30px;
  text-align: center;
}
.rappel h2 { margin: 0 0 10px; font-size: 1.5rem; }
.rappel p { margin: 0 0 22px; }

/* ⚠️ Sur un téléphone, `margin-left: auto` pousse les trois liens contre le logo et les
   fait passer à la ligne au milieu d'un intitulé (« Avec / Steam »). La barre passe donc
   en deux rangs : la marque, puis la navigation sur toute la largeur. */
@media (max-width: 640px) {
  .barre-site {
    flex-wrap: wrap;
    gap: 10px;
    padding: 16px 20px;
  }
  .barre-site nav {
    margin-left: 0;
    width: 100%;
    gap: 18px;
    font-size: 0.9rem;
  }
  .note-version { padding: 22px 20px; }
  .page { padding: 24px 20px 72px; }
  .page-entete { margin-bottom: 40px; }
}

/* --- La démo ne se propose pas sur un téléphone --------------------------------
   La démo, c'est l'interface d'une application de bureau — barre latérale, grille de
   jaquettes, fiche sur deux colonnes — compilée pour le navigateur. Sur un écran de
   téléphone elle n'est pas « moins confortable », elle est inutilisable : l'ouvrir donne
   une mauvaise première impression du produit, exactement l'inverse de ce qu'on cherche.
   Mieux vaut ne rien proposer que proposer quelque chose qui déçoit.

   🔑 LES DEUX CONDITIONS SONT NÉCESSAIRES. La largeur seule masquerait la démo à qui
   travaille dans une fenêtre étroite sur un ordinateur — il lui suffit d'élargir, et la
   démo lui est parfaitement accessible. `pointer: coarse` seul laisserait passer les
   tablettes, où elle tient très bien. C'est la conjonction « doigt + petit écran » qui
   décrit un téléphone, dans les deux orientations (~390 px debout, ~850 px couché).

   ⚠️ EN FIN DE FEUILLE, ET PAS AILLEURS. `.essai-libre` porte `display: grid` à
   spécificité égale : placée plus haut, la règle était écrasée et la section restait
   affichée alors que les deux autres appels disparaissaient bien.

   Le contenu reste dans le HTML : les données structurées et l'indexation ne changent
   pas, seul l'affichage disparaît. */
@media (pointer: coarse) and (max-width: 900px) {
  .appel-demo { display: none; }
}