/* =============================================================
   PULSEMYPORTFOLIO (PMP) — Feuille de style du site vitrine
   Palette fintech / patrimoine, dérivée des tokens de l'app PMP
   (accent #4a9eff, sémantiques gain/perte, wordmark argent).
   Système de composants hérité du site white-mastering / htm-site
   (structure éprouvée), reskin PMP.
   ============================================================= */

/* ---------- Variables ---------- */
:root {
  --bg:        #0e1420;   /* fond « terminal » nuit — fintech reposant */
  --bg-2:      #131a28;
  --bg-3:      #1a2234;
  --surface:   #141c2b;
  --line:      rgba(255,255,255,.08);
  --line-2:    rgba(255,255,255,.16);
  --text:      #e5edf5;   /* text principal (repris de l'app) */
  --muted:     #94a8bc;   /* text-muted argent */
  --muted-2:   #5d7a96;   /* text-subtle */
  --white:     #f3f7fc;
  --accent:    #7fbaff;   /* bleu clair — liens, hovers subtils */
  --accent-2:  #4a9eff;   /* BLEU PMP signature (brand-pulse) */
  --gain:      #22c55e;   /* vert hausse / succès */
  --loss:      #ef4444;   /* rouge baisse / danger */
  --warn:      #ff8c42;   /* orange alerte */

  /* Wordmark argent métallique (repris du splash de l'app) */
  --silver-1:  #e5edf5;
  --silver-2:  #94a8bc;
  --silver-3:  #5d7a96;

  --font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, Monaco, Consolas, monospace;

  --maxw: 1200px;
  --pad: clamp(20px, 5vw, 48px);
  --radius: 12px;
  --header-h: 76px;
  --ease: cubic-bezier(.22,.61,.36,1);
}

/* ---------- Reset / base ---------- */
* { box-sizing: border-box; }
* { margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; scrollbar-gutter: stable; }

/* Barre de défilement toujours visible (ne disparaît pas) */
html { scrollbar-width: auto; scrollbar-color: #2a3448 #0b111b; }
::-webkit-scrollbar { width: 13px; height: 13px; }
::-webkit-scrollbar-track { background: #0b111b; }
::-webkit-scrollbar-thumb { background: #263042; border-radius: 8px; border: 3px solid #0b111b; }
::-webkit-scrollbar-thumb:hover { background: #33405a; }
body {
  font-family: var(--font-sans);
  background: var(--bg);
  color: var(--text);
  line-height: 1.65;
  font-weight: 400;
  letter-spacing: .01em;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img { max-width: 100%; display: block; height: auto; }
a { color: inherit; text-decoration: none; transition: color .25s var(--ease); }
ul { list-style: none; }
h1,h2,h3,h4 { font-weight: 600; line-height: 1.12; letter-spacing: -.01em; color: var(--white); }

/* ---------- Layout helpers ---------- */
.container { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--pad); }
.section { padding-block: clamp(64px, 10vw, 130px); }
.section--tight { padding-block: clamp(48px, 7vw, 90px); }
.center { text-align: center; }
.narrow { max-width: 760px; margin-inline: auto; }
section[id] { scroll-margin-top: 88px; }

.eyebrow {
  display: inline-block;
  font-size: .72rem;
  letter-spacing: .28em;
  text-transform: uppercase;
  color: var(--accent-2);
  margin-bottom: 18px;
  font-weight: 600;
  font-family: var(--font-mono);
}
.section-title { font-size: clamp(1.9rem, 4.5vw, 3.1rem); line-height: 1.05; margin-bottom: 22px; }
.lead { color: var(--muted); font-size: 1.08rem; max-width: 62ch; }
p + p { margin-top: 1.1em; }

/* Highlight d'accroche (dans les titres) */
.hl { color: var(--accent-2); }
.mono { font-family: var(--font-mono); }
.up { color: var(--gain); } .down { color: var(--loss); }

/* ---------- Header ---------- */
.site-header {
  position: fixed; inset: 0 0 auto 0; z-index: 1000;
  height: var(--header-h);
  display: flex; align-items: center;
  transition: background .4s var(--ease), border-color .4s var(--ease), backdrop-filter .4s var(--ease);
  border-bottom: 1px solid transparent;
}
.site-header.scrolled {
  background: rgba(10,14,22,.82);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  border-bottom-color: var(--line);
}
.header-inner {
  width: 100%; max-width: var(--maxw); margin-inline: auto;
  padding-inline: var(--pad);
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
}
.brand { display: flex; align-items: center; gap: 13px; flex-shrink: 0; }
.brand img { width: 40px; height: 40px; border-radius: 10px; object-fit: contain; border: 1px solid var(--line-2); background: #0a1628; }
.brand-name { display: flex; flex-direction: column; line-height: 1; }
.brand-name b {
  font-size: .96rem; letter-spacing: .04em; font-weight: 700;
  /* Wordmark argent métallique — écho au splash de l'app */
  color: var(--silver-1);
  background: linear-gradient(180deg, #e5edf5 0%, #94a8bc 46%, #5d7a96 56%, #d1d9e5 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}
.brand-name span { font-size: .58rem; letter-spacing: .26em; color: var(--muted); text-transform: uppercase; margin-top: 6px; }

/* ---------- Navigation ---------- */
.nav { display: flex; align-items: center; gap: 4px; }
.nav > li { position: relative; }
.nav a.navlink, .nav .navlink {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 14px 16px;
  font-size: .86rem; letter-spacing: .02em; color: var(--muted);
  font-weight: 500; cursor: pointer; white-space: nowrap;
}
/* Menu horizontal resserré juste au-dessus du point de bascule du burger.
   Borne haute portée à 1320 px : en français les libellés sont plus longs
   qu'en anglais et l'en-tête n'avait plus de marge. */
@media (max-width: 1320px) and (min-width: 1061px) {
  .nav a.navlink, .nav .navlink { padding: 14px 12px; font-size: .82rem; }
  .header-inner { gap: 12px; }
}
.nav a.navlink:hover, .nav .navlink:hover, .nav .navlink.active { color: var(--white); }

/* Bouton d'en-tête. Présent sur les 46 pages, y compris les deux accueils depuis
   le 2026-08-24, pour que l'en-tête se distribue à l'identique partout.
   ⚠️ EXCEPTION VOULUE, validée par Nicolas le 2026-08-24, à NE PAS « harmoniser » :
   sur `telecharger.html`, `pro.html` et leurs versions EN, le libellé et la cible
   sont contextuels (« Voir les liens » → #downloads, « Voir l'offre » → #tarif).
   Un bouton « Télécharger » sur la page de téléchargement serait un lien mort. */
.header-cta {
  border: 1px solid var(--line-2); padding: 10px 20px; border-radius: 100px;
  font-size: .78rem; letter-spacing: .06em; color: var(--white); font-weight: 500;
  white-space: nowrap; flex-shrink: 0;
  transition: background .3s var(--ease), border-color .3s var(--ease), color .3s var(--ease);
}
.header-cta:hover { background: var(--accent-2); color: #06101f; border-color: var(--accent-2); }

/* Sélecteur de langue */
.lang-switch { display: flex; align-items: center; gap: 7px; flex-shrink: 0; }
.lang-switch a { font-size: .74rem; letter-spacing: .08em; font-weight: 600; color: var(--muted); padding: 6px 3px; transition: color .25s var(--ease); }
.lang-switch a:hover, .lang-switch a.active { color: var(--white); }
.lang-switch__sep { color: var(--line-2); font-size: .74rem; }
@media (max-width: 640px) { .lang-switch a { font-size: .7rem; } }

/* Burger */
.burger { display: none; width: 44px; height: 44px; position: relative; background: none; border: 0; cursor: pointer; }
.burger span { position: absolute; left: 10px; right: 10px; height: 1.6px; background: var(--white); transition: transform .35s var(--ease), opacity .2s var(--ease); }
.burger span:nth-child(1){ top: 15px; } .burger span:nth-child(2){ top: 21px; } .burger span:nth-child(3){ top: 27px; }
body.menu-open .burger span:nth-child(1){ transform: translateY(6px) rotate(45deg); }
body.menu-open .burger span:nth-child(2){ opacity: 0; }
body.menu-open .burger span:nth-child(3){ transform: translateY(-6px) rotate(-45deg); }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 15px 30px; border-radius: 100px;
  font-size: .84rem; font-weight: 600; letter-spacing: .04em;
  border: 1px solid transparent; cursor: pointer;
  transition: transform .3s var(--ease), background .3s var(--ease), border-color .3s var(--ease), color .3s var(--ease), box-shadow .3s var(--ease);
}
.btn svg { width: 15px; height: 15px; }
.btn--primary { background: linear-gradient(135deg, #4a9eff, #2f7fe0); color: #06101f; box-shadow: 0 8px 24px -10px rgba(74,158,255,.65); }
.btn--primary:hover { transform: translateY(-2px); background: linear-gradient(135deg, #63acff, #3d8bec); box-shadow: 0 12px 30px -10px rgba(74,158,255,.8); }
.btn--ghost { border-color: var(--line-2); color: var(--white); }
.btn--ghost:hover { border-color: var(--white); background: rgba(255,255,255,.05); transform: translateY(-2px); }
.btn-row { display: flex; flex-wrap: wrap; gap: 14px; }

.arrow-link { display: inline-flex; align-items: center; gap: 9px; font-size: .84rem; letter-spacing: .04em; color: var(--white); font-weight: 500; }
.arrow-link svg { width: 16px; height: 16px; transition: transform .3s var(--ease); }
.arrow-link:hover svg { transform: translateX(5px); }
.arrow-link:hover { color: var(--accent); }

/* ---------- Hero « produit » ---------- */
.hero { position: relative; overflow: hidden; }
/* Fond abstrait « suivi d'actions » (SVG) : bandeau en haut du hero, fondu
   vers le fond de page pour préserver la lisibilité du texte. */
.hero__bg { position: absolute; inset: 0 0 auto 0; z-index: 0; overflow: hidden; pointer-events: none; }
.hero__bg img { width: 100%; height: auto; display: block; opacity: .9; }
.hero__bg::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(14,20,32,.30) 0%, rgba(14,20,32,.08) 28%, rgba(14,20,32,.55) 72%, var(--bg) 100%);
}
.hero--product {
  display: block; text-align: center;
  padding-top: calc(var(--header-h) + clamp(56px, 10vw, 110px));
  padding-bottom: clamp(40px, 7vw, 90px);
}
.hero--product::before {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    radial-gradient(90% 60% at 50% -8%, rgba(74,158,255,.18), transparent 60%),
    radial-gradient(55% 42% at 84% 6%, rgba(255,140,66,.10), transparent 58%);
}
.hero--product .container { position: relative; z-index: 2; }
.hero h1 { font-size: clamp(2.5rem, 6.5vw, 4.6rem); line-height: 1.02; letter-spacing: -.02em; max-width: 20ch; margin-inline: auto; }
.hero .lead { margin-inline: auto; margin-top: 24px; font-size: clamp(1rem,2.2vw,1.18rem); color: #c3d0de; }
.hero--product .btn-row { justify-content: center; margin-top: 34px; }

/* Page hero (pages intérieures).
   Reprend le fond de l'accueil pour que les pages intérieures ne soient pas plus
   ternes que la page d'entrée : le bandeau SVG « suivi d'actions » en `::after`,
   plus le même double dégradé radial (bleu et orange) qu'utilise
   `.hero--product`. Le SVG est appelé depuis la FEUILLE DE STYLE, donc son
   chemin est valable quelle que soit la profondeur de la page : aucune des 44
   pages intérieures n'a eu à être modifiée. Le fondu vers `--bg` reprend celui
   de `.hero__bg::after` et préserve la lisibilité du texte. */
.page-hero { position: relative; padding-top: calc(var(--header-h) + clamp(60px,11vw,120px)); padding-bottom: clamp(40px,7vw,80px); overflow: hidden; }
.page-hero::after {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background-image:
    linear-gradient(180deg, rgba(14,20,32,.30) 0%, rgba(14,20,32,.20) 16%, rgba(14,20,32,.74) 44%, var(--bg) 62%),
    url("../images/hero-bg.svg");
  background-repeat: no-repeat, no-repeat;
  background-position: top center, top center;
  background-size: 100% 100%, 100% auto;
}
.page-hero::before {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    radial-gradient(88% 62% at 50% -14%, rgba(74,158,255,.16), transparent 60%),
    radial-gradient(52% 40% at 86% 4%, rgba(255,140,66,.09), transparent 58%);
}
/* En portrait, le bandeau SVG est proportionnellement plus COURT (sa hauteur suit
   la largeur) alors que le texte commence à peu près à la même hauteur absolue :
   les chandeliers, qui occupent le bas de l'image, retombaient donc pile sur le
   fil d'Ariane, illisible. Renforcer le voile ne suffisait pas, le problème étant
   une position et non une opacité. L'image est donc remontée de 78 px, ce qui
   fait passer sa partie dense derrière l'en-tête et rend au texte un fond net. */
@media (max-width: 760px) {
  .page-hero::after {
    background-image:
      linear-gradient(180deg, rgba(14,20,32,.46) 0%, rgba(14,20,32,.42) 22%, rgba(14,20,32,.86) 52%, var(--bg) 68%),
      url("../images/hero-bg.svg");
    background-position: top center, top -78px center;
  }
}
.page-hero .container { position: relative; z-index: 2; }
/* Héros scindé (page Guides) : le texte à gauche, une figure à droite. La figure
   est DÉCORATIVE et sans texte, donc identique en FR et en EN. Sous 980 px elle
   passe dessous, et sous 760 px elle disparaît : à cette largeur le bandeau SVG
   de fond suffit, et l'empiler ferait descendre l'index d'un écran entier. */
.page-hero--split .container {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .82fr);
  gap: clamp(28px, 5vw, 64px); align-items: center;
}
.page-hero--split .hero-copy { min-width: 0; }
.hero-fig { min-width: 0; }
.hero-fig svg { display: block; width: 100%; height: auto; }
/* Sur une FICHE, le titre est long là où celui du hub tient en un mot : la
   colonne de texte prend donc bien plus de place, et la vignette est bornée pour
   rester un ornement. Elle est agrandie par rapport à la miniature du hub, mais
   c'est le MÊME balisage, repris tel quel : les deux surfaces ne peuvent pas
   diverger. */
/* Sur une fiche, la vignette partage sa rangée avec le SEUL titre. Le chapô est
   posé sur la rangée du dessous, en `1 / -1` : sinon il héritait de la colonne
   étroite et tout le héros paraissait tassé à gauche (retour de Nicolas).
   Piste de la vignette en pixels et non en `fr` : à `.4fr` elle mangeait 490 px
   de titre, qui passait de deux à trois lignes. */
.page-hero--fiche .container { grid-template-columns: minmax(0, 1fr) 260px; row-gap: 20px; }
.page-hero--fiche .hero-head { grid-area: 1 / 1; min-width: 0; }
.page-hero--fiche .hero-fig { grid-area: 1 / 2; }
.page-hero--fiche .hero-copy { grid-area: 2 / 1 / 3 / -1; min-width: 0; }
/* ⚠️ La borne et le calage vont sur le SVG, PAS sur son conteneur : une marge
   `auto` sur un élément de grille désactive l'étirement par défaut, la boîte
   retombait alors sur la largeur intrinsèque du SVG, soit ZÉRO (mesuré) — figure
   invisible alors que sa piste faisait bien 297 px. */
.hero-fig--fiche svg { max-width: 260px; margin-inline-start: auto; }
@media (max-width: 980px) {
  .page-hero--split .container { grid-template-columns: 1fr; }
  /* Une seule colonne : les placements explicites ci-dessus n'ont plus de sens et
     créeraient une colonne implicite. */
  .page-hero--fiche .hero-head, .page-hero--fiche .hero-fig, .page-hero--fiche .hero-copy {
    grid-area: auto;
  }
}
@media (max-width: 760px) { .page-hero--split .hero-fig { display: none; } }
.page-hero h1 { font-size: clamp(2.3rem, 6vw, 4.2rem); margin-bottom: 18px; }
.breadcrumb { font-size: .74rem; letter-spacing: .16em; text-transform: uppercase; color: var(--muted-2); margin-bottom: 22px; font-family: var(--font-mono); }
.breadcrumb a:hover { color: var(--accent); }

/* ---------- Fenêtre d'app (chrome minimal + capture) ---------- */
.appframe {
  margin: clamp(40px, 6vw, 68px) auto 0; max-width: 1080px;
  border: 1px solid var(--line-2); border-radius: 14px; overflow: hidden;
  background: var(--bg-2);
  box-shadow: 0 40px 120px -40px rgba(0,0,0,.9), 0 0 0 1px rgba(74,158,255,.06),
              0 0 90px -30px rgba(74,158,255,.35);
}
.appframe__bar { display: flex; align-items: center; gap: 8px; padding: 11px 16px; border-bottom: 1px solid var(--line); background: linear-gradient(180deg, var(--bg-3), var(--bg-2)); }
.appframe__bar i { width: 11px; height: 11px; border-radius: 50%; background: #33384a; }
.appframe__bar i:nth-child(1){ background:#ff5f57; } .appframe__bar i:nth-child(2){ background:#febc2e; } .appframe__bar i:nth-child(3){ background:#28c840; }
.appframe__bar span { margin-left: 10px; font-size: .72rem; letter-spacing: .08em; color: var(--muted-2); font-family: var(--font-mono); }
.appframe img { width: 100%; display: block; }
/* Vidéos du site (hero en boucle, visite guidée) : même cadre que les
   captures. `background` évite un flash clair avant la 1re image. */
/* ⚠️ `height: auto` OBLIGATOIRE. Les attributs width/height de la balise
   valent 1440×900 ; sans cette règle, le CSS n'écrase que la largeur et
   la hauteur reste bloquée à 900 px, ce qui ÉTIRE la vidéo verticalement
   (mesuré : 1078×900 au lieu de 1078×674). Les `img` ne montrent pas le
   défaut, le navigateur leur déduisant un ratio de leurs attributs. */
.appframe video { width: 100%; height: auto; display: block; background: var(--bg-2); }
.appframe--flush { margin-top: 0; }
.shot-cap { margin-top: 12px; font-size: .78rem; letter-spacing: .02em; color: var(--muted-2); text-align: center; }

/* ---------- Split (image + texte) ---------- */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 6vw, 80px); align-items: center; }
.split--reverse .split__media { order: 2; }
.split__media { position: relative; }
.split__body h2 { font-size: clamp(1.6rem, 3.6vw, 2.5rem); margin-bottom: 20px; }
.split__body p { color: var(--muted); }
.split__body .btn-row, .split__body .arrow-link, .split__body .tags { margin-top: 28px; }

/* Colonne média empilée */
.media-stack { display: grid; gap: 16px; }
.mini-photo { border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.mini-photo img { width: 100%; display: block; }
.mini-photo figcaption { padding: 10px 14px; font-size: .78rem; color: var(--muted); background: var(--bg-2); border-top: 1px solid var(--line); }

/* ---------- Piliers (grille de cartes) ---------- */
.pillars { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 16px; }
.pillar {
  position: relative; display: block; padding: 26px 24px 28px; border: 1px solid var(--line);
  border-radius: var(--radius); background: linear-gradient(180deg, var(--bg-2), var(--bg));
  transition: transform .4s var(--ease), border-color .4s var(--ease);
  color: inherit; text-decoration: none;
}
.pillar:hover { transform: translateY(-4px); border-color: var(--line-2); }
.pillar:focus-visible { outline: 2px solid var(--accent-2); outline-offset: 3px; }
.pillar--final { border-color: rgba(74,158,255,.45); background: linear-gradient(180deg, rgba(74,158,255,.09), var(--bg)); }
.pillar .num { font-size: .7rem; letter-spacing: .18em; color: var(--accent-2); font-weight: 600; font-family: var(--font-mono); }
.pillar h3 { font-size: 1.1rem; margin: 12px 0 8px; }
.pillar p { font-size: .88rem; color: var(--muted); }
.pillar .ico { width: 30px; height: 30px; color: var(--accent-2); margin-bottom: 14px; }
.pillar .ico svg { width: 100%; height: 100%; }
@media (max-width: 900px) { .pillars { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .pillars { grid-template-columns: 1fr; } }

/* ---------- Étapes « comment ça marche » ---------- */
.steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px; }
.step { position: relative; padding: 28px 24px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--bg-2); }
.step__num { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--line-2); font-family: var(--font-mono); font-size: .9rem; font-weight: 600; color: var(--accent-2); margin-bottom: 16px; }
.step h3 { font-size: 1.08rem; margin-bottom: 8px; }
.step p { font-size: .9rem; color: var(--muted); }

/* ---------- Chiffres clés ---------- */
.specs { display: grid; grid-template-columns: repeat(auto-fit,minmax(200px,1fr)); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.spec { background: var(--bg-2); padding: 30px 26px; }
.spec b { display: block; font-family: var(--font-mono); font-size: 1.9rem; color: var(--white); font-weight: 600; letter-spacing: -.02em; margin-bottom: 6px; }
.spec span { font-size: .82rem; letter-spacing: .02em; color: var(--muted); }

/* ---------- Callout / disclaimer ---------- */
.callout { border: 1px solid var(--line); border-left: 2px solid var(--accent-2); border-radius: var(--radius); padding: clamp(24px,4vw,40px); background: linear-gradient(180deg, var(--bg-2), var(--bg)); }
.callout h3 { font-size: 1.3rem; margin-bottom: 12px; }
.callout p { color: var(--muted); }
.callout--warn { border-left-color: var(--warn); }
.callout--gain { border-left-color: var(--gain); }

/* Encadré de définition dans les guides : variante compacte du `.callout`, pour
   poser un terme au fil du texte sans interrompre la lecture. Le titre devient une
   étiquette discrète (« DÉFINITION ») plutôt qu'un vrai intertitre, parce que le
   terme défini se lit dans le corps. */
.prose .callout--def { padding: 18px 20px; margin: 1.6em 0; }
.prose .callout--def h3 { font-size: .74rem; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); margin-bottom: 8px; font-weight: 600; }
.prose .callout--def p { color: var(--text); }
.prose .callout--def p:last-child { margin-bottom: 0; }

/* Notes de version (page de téléchargement) — data/release-notes.json rendu par
   js/release-notes.js. Porté de htm-site (2026-09-01). Depuis le retrait des
   emojis, une puce ronde ouvre chaque item ; le badge « Pro » orange reprend le
   marqueur du changelog de l'application (même signal des deux côtés). */
.relnote-list { display: grid; gap: 14px; margin-top: 20px; list-style: none; padding-left: 0; }
.relnote-list li { position: relative; font-size: .95rem; line-height: 1.7; max-width: 68ch; padding-left: 22px; color: var(--text); }
.relnote-list li::before {
  content: "";
  position: absolute;
  left: 4px;
  top: .72em;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent-2);
}
.relnote-list li.is-pro::before { background: var(--warn); }
.relnote-pro {
  display: inline-block;
  margin-right: 8px;
  padding: 2px 7px;
  border-radius: 8px;
  font-size: .68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .05em;
  vertical-align: 1px;
  background: var(--warn);
  color: #241206;
}

/* Bandeau « Nouveautés » de l'accueil (pilule orange) — porté d'htm-site
   (.whatsnew). Signale la dernière version disponible. Le numéro (.js-app-version)
   est injecté par js/release-notes.js depuis data/release-notes.json (jamais figé
   dans le HTML). Orange = couleur --warn, cohérent avec le badge « Pro ». */
.whatsnew { display: inline-flex; align-items: center; flex-wrap: wrap; justify-content: center; gap: 8px 10px; margin-top: 22px; padding: 8px 16px 8px 14px; border: 1px solid rgba(255,140,66,.35); border-radius: 100px; background: rgba(255,140,66,.08); text-align: left; }
.whatsnew__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--warn); box-shadow: 0 0 0 4px rgba(255,140,66,.16); flex: 0 0 auto; }
.whatsnew__tag { text-transform: uppercase; letter-spacing: .12em; font-size: .64rem; font-weight: 700; color: #ffa866; }
.whatsnew__text { font-size: .84rem; color: var(--muted); }
.whatsnew__text b { color: var(--text); font-weight: 600; }

/* Listes des plans sur la page Pro : MÊMES bulles colorées que les notes de
   version (relnote-list) — puce BLEUE = Standard, puce ORANGE = Pro (retour
   Nicolas 2026-09-03). Même géométrie de puce que .relnote-list li::before. */
.plan-list { list-style: none; padding-left: 0; }
.plan-list li { position: relative; padding-left: 22px; }
.plan-list li::before {
  content: "";
  position: absolute;
  left: 4px;
  top: .72em;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent-2);
}
.plan-list--pro li::before { background: var(--warn); }

/* Cartes de fiche du hub des guides. La liste était faite de liens soulignés au
   fil du texte : peu lisible à parcourir, et daté. Chaque entrée devient un bloc
   entièrement cliquable, dans l'idiome de `.os-card` (bordure, fond `--bg-2`,
   soulèvement au survol). Le soulignement de `.prose a` est neutralisé ICI
   seulement : dans le corps des fiches il reste, c'est le seul indice de lien
   qui ne dépende pas de la couleur. */
.tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 20px; }
.tag { font-size: .74rem; letter-spacing: .03em; color: var(--accent); border: 1px solid var(--line-2); border-radius: 100px; padding: 6px 14px; }
.tag--muted { color: var(--muted); }

/* ---------- Multi-plateforme ---------- */
.platform { display: grid; grid-template-columns: .8fr 1.2fr; gap: clamp(30px, 6vw, 70px); align-items: center; }
.platform__phone { display: flex; justify-content: center; }
.platform__phone img { width: min(260px, 70%); border: 1px solid var(--line-2); border-radius: 22px; box-shadow: 0 30px 80px -30px rgba(0,0,0,.9), 0 0 70px -30px rgba(74,158,255,.35); }
@media (max-width: 820px) { .platform { grid-template-columns: 1fr; } .platform__phone { order: 1; } }

/* ---------- Cartes de téléchargement (plateformes) ---------- */
.os-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 18px; }
.os-card {
  display: flex; flex-direction: column; align-items: flex-start;
  padding: 28px 26px 26px; border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--bg-2); transition: transform .4s var(--ease), border-color .4s var(--ease);
}
.os-card:hover { transform: translateY(-4px); border-color: var(--accent-2); }
.os-card .ico { width: 34px; height: 34px; color: var(--white); margin-bottom: 16px; }
.os-card .ico svg { width: 100%; height: 100%; }
.os-card h3 { font-size: 1.2rem; margin-bottom: 4px; }
.os-card .meta { font-size: .8rem; color: var(--muted-2); margin-bottom: 18px; font-family: var(--font-mono); }
.os-card .btn { margin-top: auto; }
.os-card .note { font-size: .76rem; color: var(--muted-2); margin-top: 12px; line-height: 1.5; }
/* Lien .exe sous le bouton Store : plus VISIBLE (accent bleu, souligné, gras),
   comme htm-site — le Store reste l'action principale, mais l'installeur direct
   ne doit pas se noyer dans la note (retour Nicolas 2026-09-02). */
.os-card .note a { color: var(--accent-2); text-decoration: underline; text-underline-offset: 2px; font-weight: 600; }
.os-card .note a:hover { color: var(--accent); }
@media (max-width: 820px) { .os-cards { grid-template-columns: 1fr; } }

/* ---------- Trustline (puces sous le hero) ---------- */
.trustline { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 22px; margin-top: 26px; }
.trustline span { display: inline-flex; align-items: center; gap: 8px; font-size: .82rem; color: var(--muted); letter-spacing: .02em; }
.trustline span::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--accent-2); box-shadow: 0 0 0 4px rgba(74,158,255,.12); }

/* ---------- À propos (cartes auteur / contributeur) ---------- */
.people { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
.person {
  border: 1px solid var(--line); border-radius: var(--radius); background: var(--bg-2);
  padding: clamp(26px, 3.5vw, 38px);
  transition: transform .4s var(--ease), border-color .4s var(--ease);
}
.person:hover { transform: translateY(-4px); border-color: var(--line-2); }
.person__media { width: 100%; aspect-ratio: 16/10; object-fit: cover; object-position: center 28%; border-radius: var(--radius); margin-bottom: 22px; border: 1px solid var(--line); display: block; }

/* Vignettes d'identité : PETITES et non agrandissables.
   Le fichier source est volontairement un timbre-poste (~330 px de côté),
   affiché en rond de 72 px. Aucun lien n'entoure l'image, donc rien à
   ouvrir en grand, et il n'y a pas de version haute résolution à aller
   chercher. Même traitement que le site White Mastering.
   Faute de photo, on affiche un MONOGRAMME dessiné en CSS plutôt qu'un
   portrait pris ailleurs. */
.person__head { display: flex; align-items: center; gap: 16px; margin-bottom: 18px; }
.person__head > div { min-width: 0; }
.person__head .person__role { margin-bottom: 6px; }
.person__head h3 { margin-bottom: 2px; }
.person__head .person__title { margin-bottom: 0; }
.person__avatar {
  flex-shrink: 0; width: 72px; height: 72px; border-radius: 50%;
  object-fit: cover; object-position: center top; display: block;
  border: 1px solid var(--line-2); background: var(--bg);
}
.person__avatar--mono {
  display: grid; place-items: center;
  font-family: var(--font-mono); font-size: 1.02rem; letter-spacing: .06em;
  color: var(--accent-2); background: rgba(74,158,255,.10);
}
.person__role { font-size: .68rem; letter-spacing: .2em; text-transform: uppercase; color: var(--accent-2); margin-bottom: 12px; font-family: var(--font-mono); }
.person h3 { font-size: 1.4rem; margin-bottom: 4px; }
.person__title { font-size: .82rem; color: var(--muted-2); margin-bottom: 14px; letter-spacing: .02em; }
.person p { color: var(--muted); font-size: .94rem; margin-bottom: 18px; }
.person .arrow-link { font-size: .82rem; }
.about-note { max-width: 780px; margin: 38px auto 0; text-align: center; font-size: .9rem; color: var(--muted-2); }
@media (max-width: 760px) { .people { grid-template-columns: 1fr; } }

/* ---------- CTA band ---------- */
.cta-band { position: relative; overflow: hidden; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); background: var(--bg-2); }
.cta-band::before {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: radial-gradient(80% 130% at 50% 50%, rgba(74,158,255,.16), transparent 62%);
}
.cta-band .container { position: relative; z-index: 2; text-align: center; }
.cta-band h2 { font-size: clamp(1.9rem,5vw,3.4rem); margin-bottom: 18px; }

/* ---------- Prose (pages article / légales) ---------- */
.prose { max-width: 760px; }
.prose p { color: #bfccda; font-size: 1.06rem; margin-bottom: 1.25em; }
.prose h2 { font-size: clamp(1.5rem,3.2vw,2.1rem); margin: 1.6em 0 .6em; }
.prose h3 { font-size: 1.25rem; margin: 1.4em 0 .5em; color: var(--white); }
.prose strong { color: var(--white); font-weight: 600; }
.prose code { font-family: var(--font-mono); font-size: .88em; background: var(--bg-3); border: 1px solid var(--line); border-radius: 5px; padding: 1px 6px; color: var(--accent); }
.prose ul.bullets { margin: 1em 0 1.4em; }
.prose ul.bullets li { position: relative; padding-left: 22px; margin-bottom: .55em; color: #bfccda; }
.prose ul.bullets li::before { content:""; position: absolute; left: 0; top: .7em; width: 6px; height: 6px; border-radius: 50%; background: var(--accent-2); }
/* ---------- Tableaux de données des fiches ----------
   Avant le 2026-08-21 : chaque cellule était entièrement encadrée (grille de
   boîtes), et l'enveloppe de défilement était un `style="overflow-x:auto"` en
   ligne. Allégé en filets horizontaux, en-têtes en petites capitales reprenant
   la typo des `h4` du pied de page, et `tr.row-key` pour la ligne qui porte la
   conclusion (même motif que la bordure gauche du `.callout`). */
.prose .table-wrap { overflow-x: auto; margin: 1.5em 0 1.8em; border: 1px solid var(--line); border-radius: var(--radius); background: var(--bg-2); }
.prose table { width: 100%; border-collapse: collapse; font-size: .95rem; }
.prose thead th { padding: 13px 16px; text-align: left; font-size: .7rem; letter-spacing: .14em; text-transform: uppercase; font-weight: 500; color: var(--muted-2); background: var(--bg-3); border-bottom: 1px solid var(--line-2); white-space: nowrap; }
.prose tbody td { padding: 12px 16px; border-bottom: 1px solid var(--line); color: var(--muted); vertical-align: top; }
.prose tbody tr:last-child td { border-bottom: 0; }
.prose tbody tr:hover td { background: rgba(74,158,255,.05); }
.prose tbody td:first-child { color: var(--white); }
.prose td.num { font-variant-numeric: tabular-nums; white-space: nowrap; }
.prose tbody tr.row-key td { background: rgba(74,158,255,.07); }
.prose tbody tr.row-key td:first-child { box-shadow: inset 2px 0 0 var(--accent-2); }
.prose tbody tr.row-key strong { color: var(--accent-2); }

/* ---------- Schémas des fiches ----------
   SVG en ligne : pas de requête réseau, couleurs issues des variables du thème,
   texte sélectionnable et traduisible. Scopé sur `.fig-diagram` et NON sur
   `.prose figure`, pour ne pas écraser d'éventuelles captures d'écran. */
.prose .fig-diagram { margin: 1.8em 0 2em; border: 1px solid var(--line); border-radius: var(--radius); background: var(--bg-2); overflow: hidden; }
.prose .fig-diagram .fig-scroll { overflow-x: auto; }
.prose .fig-diagram svg { display: block; width: 100%; height: auto; }
.prose .fig-diagram figcaption { padding: 12px 16px; font-size: .78rem; letter-spacing: .04em; color: var(--muted); border-top: 1px solid var(--line); }
.prose .fig-diagram figcaption strong { color: var(--white); font-weight: 600; }
/* Sous 720 px, un schéma réduit à la largeur de l'écran ramène ses libellés à
   ~5 px : le dessin garde sa largeur naturelle et se fait balayer, la légende
   restant, elle, à la largeur du bloc. */
@media (max-width: 720px) {
  .prose .fig-diagram svg { width: 700px; max-width: none; }
}
.diagram { font-family: var(--font-sans); }
.diagram .d-lbl { fill: var(--muted); font-size: 11px; letter-spacing: .04em; }
.diagram .d-val { fill: var(--white); font-size: 12px; font-weight: 600; font-variant-numeric: tabular-nums; }
.diagram .d-key { fill: var(--accent-2); font-size: 12px; font-weight: 600; font-variant-numeric: tabular-nums; }
.diagram .d-hint { fill: var(--muted-2); font-size: 10px; letter-spacing: .04em; }
.diagram .d-axis { stroke: var(--line); stroke-width: 1; fill: none; }
.diagram .d-cote { stroke: var(--muted-2); stroke-width: 1; fill: none; }
.diagram .d-dim { stroke: var(--accent-2); stroke-width: 1; fill: none; }
.diagram .d-line { stroke: var(--accent-2); stroke-width: 1.8; fill: none; }
.diagram .d-line-soft { stroke: var(--accent-2); stroke-width: 1.4; fill: none; opacity: .45; }
.diagram .d-line-warn { stroke: var(--warn); stroke-width: 1.8; fill: none; }
.diagram .d-box { fill: var(--bg-3); stroke: var(--line-2); stroke-width: 1; }
.diagram .d-fill { fill: var(--accent-2); opacity: .22; }
.diagram .d-fill-2 { fill: var(--muted-2); opacity: .3; }
.diagram .d-fill-warn { fill: var(--warn); opacity: .22; }
.diagram .d-fill-gain { fill: var(--gain); opacity: .25; }
.diagram .d-fill-loss { fill: var(--loss); opacity: .25; }
.diagram .d-dot { fill: var(--accent-2); }
.diagram .d-dot-warn { fill: var(--warn); }
.prose blockquote { border-left: 2px solid var(--accent-2); background: var(--bg-2); border-radius: var(--radius); padding: 16px 20px; margin: 1.2em 0; color: var(--muted); }
.prose-note { margin-top: 22px; padding: 16px 18px; border-left: 2px solid var(--warn); background: var(--bg-2); border-radius: var(--radius); font-size: .9rem; color: var(--muted); }

/* Liens externes + liens de prose */
/* Liens en pleine prose. Aucun soulignement au repos (décision Nicolas,
   2026-08-24). Conséquence mesurée : la couleur ne peut PAS être le seul indice
   de lien ici, parce que le bleu et le texte de prose ont presque la même
   luminance (1,13:1, là où WCAG 1.4.1 demande 3:1) et qu'aucune teinte ne peut
   atteindre ce rapport sur ce fond sombre. D'où un second indice non coloré, la
   GRAISSE : 600 contre 400 pour le texte courant. Le soulignement revient au
   survol et au focus clavier, comme retour d'interaction et non comme décor.
   Teinte prise sur `--accent`, que le thème destine explicitement aux liens et
   qui contraste mieux sur le fond (9,10:1) que `--accent-2` (6,69:1). */
a.exlink, .prose a {
  color: var(--accent);
  font-weight: 600;
  text-decoration: none;
  transition: color .25s var(--ease);
}
a.exlink:hover, .prose a:hover,
a.exlink:focus-visible, .prose a:focus-visible {
  color: var(--white);
  text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px;
}
/* Les cartes du hub définissent la graisse de chacun de leurs éléments : la règle
   ci-dessus ne doit pas alourdir leur texte descriptif. */
@media (prefers-reduced-motion: reduce) { a.exlink, .prose a { transition: none; } }

/* ---------- Index des guides (page Guides) ---------------------------------
   Refonte 2026-08-25 : les cartes en grille sont devenues un INDEX filtrable par
   thème. Trois choix qui méritent d'être écrits :

   1. AUCUNE NUMÉROTATION, ni sur les lignes ni sur les chips (arbitrage de
      Nicolas, 2026-08-25 : la vignette et le titre suffisent). Une première
      version numérotait par compteur CSS : ne pas la réintroduire sans demander,
      un numéro suggère un classement qui n'existe pas.
   2. Le FILTRE est une commodité. Les 12 fiches sont dans le HTML et visibles
      sans JavaScript ; c'est la barre de chips qui est masquée par défaut et
      révélée par le script, jamais le contenu.
   3. Les VIGNETTES ne portent aucun texte. Un seul jeu de figures sert le FR et
      l'EN (pas de dérive de traduction), et les deux défauts classiques des
      figures faites main tombent : collision d'étiquettes et séparateur
      décimal à localiser. ⚠️ Chaque vignette est REPRISE TELLE QUELLE dans le
      héros de sa fiche (`.hero-fig--fiche`) : le hub et la fiche se répondent, et
      le balisage étant le même, ils ne peuvent pas diverger.
   -------------------------------------------------------------------------- */
.u-sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.guide-filters { display: flex; flex-wrap: wrap; gap: 10px; margin: 0 0 30px; }
.guide-chip {
  display: inline-flex; align-items: center; gap: 9px;
  font: 500 .74rem/1 var(--font-sans); letter-spacing: .08em; text-transform: uppercase;
  color: var(--muted); background: transparent;
  border: 1px solid var(--line-2); border-radius: 100px;
  padding: 12px 18px; cursor: pointer;
  transition: color .3s var(--ease), border-color .3s var(--ease), background-color .3s var(--ease);
}
.guide-chip:hover { color: var(--white); border-color: var(--accent-2); }
.guide-chip--on { color: var(--white); border-color: var(--accent-2); background: rgba(74,158,255,.13); }

.guide-count { font-size: .78rem; color: var(--muted-2); margin: -18px 0 22px; }

.guide-index { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.guide-item { margin: 0; border-bottom: 1px solid var(--line); }
.guide-item[hidden] { display: none; }
.guide-row {
  display: grid; grid-template-columns: 152px minmax(0, 1fr);
  gap: clamp(16px, 3vw, 32px); align-items: center;
  padding: clamp(20px, 2.6vw, 28px) clamp(6px, 1.2vw, 14px);
  color: inherit; text-decoration: none; border-radius: var(--radius);
  transition: background-color .35s var(--ease);
}
.guide-row:hover, .guide-row:focus-visible { background: var(--bg-2); }
.guide-row__fig svg { display: block; width: 100%; height: auto; }
.guide-row__body { display: flex; flex-direction: column; gap: 9px; min-width: 0; }
.guide-row__title {
  font-size: clamp(1.02rem, 1.5vw, 1.16rem); font-weight: 600;
  color: var(--white); line-height: 1.34; letter-spacing: -.011em;
}
.guide-row__desc { font-size: .875rem; color: var(--muted); line-height: 1.62; }
.guide-row__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; margin-top: 3px; }
.guide-row__tags { display: flex; flex-wrap: wrap; gap: 8px; }
.guide-row__tag {
  font: 500 .68rem/1 var(--font-sans); letter-spacing: .07em; text-transform: uppercase;
  color: var(--muted-2); background: var(--bg-2);
  border: 1px solid var(--line); border-radius: 6px; padding: 7px 10px;
}
.guide-row__go {
  margin-left: auto; display: inline-flex; align-items: center; gap: 7px; white-space: nowrap;
  font: 500 .72rem/1 var(--font-sans); letter-spacing: .09em; text-transform: uppercase;
  color: var(--muted-2); transition: color .3s var(--ease);
}
.guide-row__go svg { width: 14px; height: 14px; transition: transform .3s var(--ease); }
.guide-row:hover .guide-row__go, .guide-row:focus-visible .guide-row__go { color: var(--accent-2); }
.guide-row:hover .guide-row__go svg { transform: translateX(4px); }

.guide-more { font-size: .875rem; color: var(--muted); line-height: 1.62; margin: 26px 0 0; max-width: 70ch; }
.guide-note {
  display: flex; gap: 14px; align-items: flex-start; margin-top: 26px; padding: 18px 20px;
  border: 1px solid var(--line); border-radius: var(--radius); background: var(--bg-2);
}
.guide-note svg { flex: 0 0 auto; width: 18px; height: 18px; color: var(--muted-2); margin-top: 2px; }
.guide-note p { margin: 0; font-size: .85rem; color: var(--muted); line-height: 1.6; }

/* Le libellé du lien passe sous la vignette avant que les titres ne se hachent.
   ⚠️ Piste de la vignette en LARGEUR FIXE, jamais `auto` : le corps de texte est
   posé sur `grid-column: 1 / -1`, et le max-content d'un élément qui traverse
   plusieurs pistes se répartit sur celles-ci — une piste `auto` gonflait alors à
   223 px (mesuré) et poussait la vignette au bord droit.
   ⚠️ Et il faut DEUX pistes, la seconde souple : avec une seule, `1 / -1` ne
   couvre que cette piste et le corps de texte hérite de la largeur de la
   vignette (84 px mesurés en portrait, texte haché mot par mot). */
@media (max-width: 900px) {
  .guide-row { grid-template-columns: 112px minmax(0, 1fr); row-gap: 14px; }
  .guide-row__body { grid-column: 1 / -1; }
  .guide-row__go { margin-left: 0; }
}
/* Sept chips se replient sur quatre lignes en portrait et repoussent l'index
   sous l'horizon. Une seule ligne qui défile, débordant jusqu'aux bords de
   l'écran pour que le geste soit évident, et 44 px de haut pour le doigt. */
@media (max-width: 760px) {
  .guide-filters {
    flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch;
    scrollbar-width: none; margin-inline: calc(var(--pad) * -1);
    padding-inline: var(--pad); scroll-padding-inline: var(--pad);
  }
  .guide-filters::-webkit-scrollbar { display: none; }
  .guide-chip { flex: 0 0 auto; padding: 15px 18px; }
}
@media (max-width: 420px) {
  .guide-row { grid-template-columns: 84px minmax(0, 1fr); }
  .guide-row__tag { padding: 6px 8px; }
}
@media (prefers-reduced-motion: reduce) {
  .guide-row, .guide-chip, .guide-row__go, .guide-row__go svg { transition: none; }
  .guide-row:hover .guide-row__go svg { transform: none; }
}

/* ---------- Micro-typographie des blocs de texte -------------------------
   Posé le 2026-08-25 à la place d'une justification, écartée après essai : le
   navigateur justifie ligne par ligne, en glouton, sans l'optimisation du
   paragraphe entier que fait un logiciel de mise en page. Le résultat était des
   espaces visiblement étirées dès la première ligne d'une fiche, aggravées par
   nos blocs insécables (« 110 459 € d'écart », « 30 ans »), et le critère WCAG
   1.4.8 demande de toute façon de ne pas justifier.

   Ces deux propriétés donnent le confort recherché sans rien étirer. Elles sont
   IGNORÉES par les navigateurs qui ne les connaissent pas : rien à prévoir en
   repli, le texte reste simplement coupé comme avant.

   ⚠️ `balance` est réservé aux blocs COURTS (les moteurs cessent de l'appliquer
   au-delà de quelques lignes) : titres seulement. Sur un paragraphe, c'est
   `pretty` qu'il faut, qui vise la dernière ligne, pas l'égalité des lignes. */
.prose p, .prose li, .lead, .guide-row__desc, .guide-note p, .guide-more {
  text-wrap: pretty;
}
h1, h2, h3, .section-title, .guide-row__title {
  text-wrap: balance;
}

/* ---------- Footer ---------- */
.site-footer { border-top: 1px solid var(--line); background: var(--bg-2); padding-block: clamp(50px,7vw,80px) 30px; }
.footer-top { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 40px; }
.footer-brand .brand { margin-bottom: 18px; }
.footer-brand p { color: var(--muted); font-size: .9rem; max-width: 36ch; }
.footer-col h4 { font-size: .74rem; letter-spacing: .14em; text-transform: uppercase; color: var(--muted-2); margin-bottom: 18px; font-weight: 500; }
.footer-col ul li { margin-bottom: 11px; }
.footer-col a { color: var(--muted); font-size: .9rem; }
.footer-col a:hover { color: var(--white); }
.footer-note { margin-top: 40px; padding-top: 24px; border-top: 1px solid var(--line); font-size: .82rem; color: var(--muted-2); max-width: 78ch; }
.footer-bottom { margin-top: 40px; padding-top: 24px; border-top: 1px solid var(--line); display: flex; flex-wrap: wrap; gap: 14px; justify-content: space-between; align-items: center; }
.footer-bottom p { font-size: .78rem; color: var(--muted-2); }
.social { display: flex; gap: 12px; }
.social a { width: 38px; height: 38px; display: grid; place-items: center; border: 1px solid var(--line); border-radius: 50%; color: var(--muted); transition: color .3s, border-color .3s; }
.social a:hover { color: var(--white); border-color: var(--line-2); }
.social svg { width: 17px; height: 17px; }

/* ---------- Reveal animation ---------- */
.reveal { opacity: 0; transform: translateY(26px); transition: opacity .9s var(--ease), transform .9s var(--ease); }
.reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; transition: none; } html { scroll-behavior: auto; } }

/* ---------- Responsive ---------- */
@media (max-width: 940px) {
  .split { grid-template-columns: 1fr; }
  /* En pile mobile, la section « reverse » montre le texte AVANT son visuel. */
  .split--reverse .split__media { order: 1; }
  .split--reverse .split__body { order: 0; }
  .footer-top { grid-template-columns: 1fr 1fr; }
  .footer-brand { grid-column: 1 / -1; }
}
/* Bascule vers le menu burger. Portée de 860 à 1060 px : entre les deux, les
   cinq libellés français plus le bouton « Télécharger » ne tenaient pas et le
   bouton sortait de l'écran (mesuré : il finissait à 1031 px dans une fenêtre
   de 900 px). Les pages anglaises tenaient, d'où un défaut invisible en EN. */
@media (max-width: 1060px) {
  .burger { display: block; }
  .header-cta { display: none; }
  .nav {
    position: fixed; top: var(--header-h); left: 0; right: 0; bottom: auto;
    height: calc(100svh - var(--header-h)); z-index: 999;
    flex-direction: column; align-items: stretch; gap: 0;
    background: #0a0e16;
    padding: 14px var(--pad) 40px; overflow-y: auto;
    transform: translateX(100%); transition: transform .45s var(--ease);
  }
  body.menu-open .nav { transform: none; }
  body.menu-open { overflow: hidden; }
  .nav > li { border-bottom: 1px solid var(--line); }
  .nav a.navlink, .nav .navlink { padding: 18px 4px; font-size: 1.02rem; width: 100%; }
  .header-mobile-cta { display: block; margin-top: 20px; border-bottom: 0 !important; }
  .header-inner { gap: 12px; }
  .brand { flex-shrink: 1; min-width: 0; gap: 10px; }
  .brand-name { min-width: 0; }
  .brand-name b { font-size: .82rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .lang-switch, .burger { flex-shrink: 0; }
}
@media (min-width: 1061px) { .header-mobile-cta { display: none; } }
@media (max-width: 560px) {
  .footer-top { grid-template-columns: 1fr; }
}
@media (max-width: 400px) {
  .header-inner { gap: 7px; }
  .brand { gap: 8px; }
  .brand img { width: 34px; height: 34px; }
  .brand-name b { font-size: .72rem; letter-spacing: .02em; }
  .brand-name span { font-size: .48rem; letter-spacing: .16em; }
  .lang-switch { gap: 5px; }
  .lang-switch a, .lang-switch__sep { font-size: .66rem; }
}
/* Confort tactile : cibles de clic ≥ 40px sur écrans tactiles */
@media (hover: none) { .arrow-link, .footer-col a, .lang-switch a { min-height: 40px; } }