/* =========================================================
   fidflow-ui — base.css  ·  v5.0.0
   Tokens neutres + composants communs au groupe fidflow.
   Aucune couleur de marque : l'accent vient de brand-<marque>.css
   Inter + Roboto Mono, auto-hébergées (voir fonts/)
   ========================================================= */

/* ── Fontes ──────────────────────────────────────────────
   Auto-hébergées depuis la v2.0. Avant, un @import vers la CDN
   de fontes de Google : chaque page transmettait l'IP et le
   User-Agent du visiteur à Google, pour deux familles qu'on peut
   servir soi-même. Sur un site de fiduciaire, c'est un
   sous-traitant à déclarer en échange de rien.

   Inter et Roboto Mono sont sous SIL Open Font License 1.1 —
   fonts/LICENSE-Inter.txt et fonts/LICENSE-RobotoMono.txt.
   v3.11 : la chasse fixe passe de JetBrains Mono a Roboto Mono.
   Mesure sur 21 polices : irregularite du rythme (ecart de blanc
   entre M et I) 58 pour JetBrains, 35 pour Roboto ; profondeur des
   jambages 180 contre 203. Le perimetre du mono ne change pas — les
   48 regles gardent la chasse fixe, et les capitales restent. Le
   brief en comptait 47 : la 48e est le marqueur de .lp-list, posee
   par la v3.10 le meme jour.
   WOFF2 seul (support universel depuis 2020, ~30 % plus léger
   que WOFF). Sous-ensembles latin et latin-ext uniquement : les
   unicode-range font que le navigateur ne télécharge latin-ext
   que si la page contient un caractère qui l'exige. Une page
   française ne charge que latin, soit 5 fichiers, ~115 ko.

   Les chemins sont relatifs à cette feuille : le dossier fonts/
   se copie à côté de base.css, dans chaque site.  */

@font-face {
  font-family: 'Inter'; font-style: normal; font-weight: 300; font-display: swap;
  src: url(fonts/inter-latin-ext-300-normal.woff2) format('woff2');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face {
  font-family: 'Inter'; font-style: normal; font-weight: 300; font-display: swap;
  src: url(fonts/inter-latin-300-normal.woff2) format('woff2');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face {
  font-family: 'Inter'; font-style: normal; font-weight: 400; font-display: swap;
  src: url(fonts/inter-latin-ext-400-normal.woff2) format('woff2');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face {
  font-family: 'Inter'; font-style: normal; font-weight: 400; font-display: swap;
  src: url(fonts/inter-latin-400-normal.woff2) format('woff2');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face {
  font-family: 'Inter'; font-style: normal; font-weight: 500; font-display: swap;
  src: url(fonts/inter-latin-ext-500-normal.woff2) format('woff2');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face {
  font-family: 'Inter'; font-style: normal; font-weight: 500; font-display: swap;
  src: url(fonts/inter-latin-500-normal.woff2) format('woff2');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face {
  font-family: 'Roboto Mono'; font-style: normal; font-weight: 400; font-display: swap;
  src: url(fonts/roboto-mono-latin-ext-400-normal.woff2) format('woff2');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face {
  font-family: 'Roboto Mono'; font-style: normal; font-weight: 400; font-display: swap;
  src: url(fonts/roboto-mono-latin-400-normal.woff2) format('woff2');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face {
  font-family: 'Roboto Mono'; font-style: normal; font-weight: 500; font-display: swap;
  src: url(fonts/roboto-mono-latin-ext-500-normal.woff2) format('woff2');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face {
  font-family: 'Roboto Mono'; font-style: normal; font-weight: 500; font-display: swap;
  src: url(fonts/roboto-mono-latin-500-normal.woff2) format('woff2');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

:root {
  --ink:      #111111;
  --paper:    #f7f5f0;
  /* v3.4 : --paper-2 n'est plus employe nulle part depuis la suppression de
     l'alternance. Il reste declare, calibre et dans la famille — disponible
     pour une troisieme surface si un composant en demande une. S'il n'en
     vient pas, c'est une ligne a retirer. */
  --paper-2:  #eae8e3; /* v3.0 : L* 93.4 -> 92.0. L'alternance de sections
                          etait a 1.08:1, invisible. La teinte reste a 94.3
                          et la chroma a 2.66 — c'est la CLARTE qui rend
                          perceptible, pas la saturation : la maquette
                          proposait #ebe8e1 (C 3.75) pour exactement le meme
                          1.12:1. Sortir de la famille ne payait rien.
                          v1.5.1 : etait #eeecea, teinte 74.9, lisait gris. */
  --line:     #d1cfca; /* v3.0 : L* 87.4 -> 83.1, soit 1.27:1 -> 1.43:1. Les
                          filets structurent au lieu de decorer. Teinte 94.3,
                          chroma 2.72 : meme raisonnement que --paper-2. */
  /* v3.0 : le corps de texte quitte --muted. Celui-ci etait a 4,96:1 sur
     --paper — elegant sur trois lignes, fatigant sur quatre cents mots, et
     AA passe de 0,46 point seulement. --body est ACHROMATIQUE comme --ink et
     --muted : la maquette proposait #3f3f3d, a chroma 1,30 et teinte 109,9°,
     soit exactement le « entre les deux » que ce fichier interdit. L'ecart de
     contraste entre les deux est de 0,02 point. */
  --body:     #3f3f3f; /* 9,67:1 sur --paper */
  --muted:    #6a6a6a; /* legendes, metadonnees, second niveau */
  --white:    #ffffff;
  /* Texte et filets posés sur un aplat --accent.
     -muted et -faint dépendent de la clarté de l'accent : chaque brand-*.css les redéfinit. */
  --on-accent:        #ffffff;
  --on-accent-muted:  rgba(255,255,255,0.62);
  --on-accent-faint:  rgba(255,255,255,0.35);
  --on-accent-line:   rgba(255,255,255,0.18);
  /* Texte et filets posés sur un aplat --ink (footer).
     --ink est commun à toutes les marques : ces quatre tokens restent ici,
     contrairement aux --on-accent-* que chaque brand-*.css redéfinit.
     Valeurs identiques à celles en place avant la v1.5 — on les nomme. */
  --on-ink:           #ffffff;
  --on-ink-muted:     rgba(255,255,255,0.60);
  --on-ink-faint:     rgba(255,255,255,0.45);
  --on-ink-line:      rgba(255,255,255,0.06);
  /* v2.1 : le rouge d'avertissement existait en dur dans .lp-note.is-warn.
     Il est nommé le jour où un deuxième composant en a besoin (.field). */
  --warn:     #a14b4b;
  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', sans-serif;
  --font-mono: 'Roboto Mono', 'Courier New', monospace;
  --section-pad: 6rem 3rem;
  --max-w: 1100px;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; scroll-padding-top: 56px; /* hauteur de nav */ }
body {
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  font-weight: 400;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
a { color: inherit; text-decoration: none; }
/* Références légales dans le fil du texte : mono, pas un extrait de code.
   0.9em compense l'encombrement optique des monospaces. */
code { font-family: var(--font-mono); font-size: 0.9em; }

/* ── Nav ─────────────────────────────────────────────── */
/* v1.2 : classe et non sélecteur d'élément, pour qu'un second <nav>
   sémantique n'hérite pas de la barre collante. Toute page reprenant
   base.css doit porter class="site-nav" sur son <nav>. */
.site-nav {
  position: sticky; top: 0; z-index: 100;
  background: var(--paper);
  border-bottom: 1px solid var(--line);
  padding: 0 3rem;
  display: flex; align-items: center; justify-content: space-between;
  height: 56px;
}
.nav-logo {
  display: flex; align-items: center; gap: 0.5rem;
  font-family: var(--font-mono); font-size: 0.78rem;
  letter-spacing: 0.06em; font-weight: 500;
}
.nav-logo .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); }
.nav-links { display: flex; align-items: center; gap: 2rem; list-style: none; }
.nav-links a {
  font-family: var(--font-mono); font-size: 0.75rem;
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--muted); transition: color 0.15s;
}
.nav-links a:hover { color: var(--ink); }
.nav-right { display: flex; align-items: center; gap: 1.25rem; }
.nav-lang { display: flex; align-items: center; gap: 0.5rem; }
.nav-lang a {
  font-family: var(--font-mono); font-size: 0.75rem;
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--muted); transition: color 0.15s;
}
.nav-lang a:hover, .nav-lang a.active { color: var(--ink); }
.nav-lang .sep { color: var(--line); }
.btn-nav {
  display: inline-flex; align-items: center; gap: 0.35rem;
  background: var(--accent); color: var(--on-accent);
  padding: 0.45rem 1rem;
  font-family: var(--font-mono); font-size: 0.75rem;
  letter-spacing: 0.08em; text-transform: uppercase;
  transition: background 0.15s;
}
.btn-nav:hover { background: var(--accent-h); }
.hamburger { display: none; flex-direction: column; gap: 5px; cursor: pointer; background: none; border: none; padding: 4px; }
.hamburger span { display: block; width: 20px; height: 1px; background: var(--ink); transition: all 0.2s; }

/* ── Hero ────────────────────────────────────────────── */
#hero {
  padding: 7rem 3rem 6rem;
  max-width: var(--max-w); margin: 0 auto;
  border-bottom: 1px solid var(--line);
}
.hero-label {
  font-family: var(--font-mono); font-size: 0.7rem;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--muted); margin-bottom: 2.5rem;
  display: flex; align-items: center; gap: 0.75rem;
}
.hero-label::before { content: ''; display: block; width: 20px; height: 1px; background: var(--accent); }
.hero-h1 {
  font-family: var(--font-body); font-weight: 300;
  font-size: clamp(2.6rem, 5.6vw, 4.1rem);
  line-height: 1.06; letter-spacing: -0.032em;
  max-width: 18ch; margin-bottom: 1.75rem;
}
.hero-h1 strong { font-weight: 500; color: var(--accent); }
.hero-sub {
  font-size: 1rem; line-height: 1.75;
  max-width: 52ch; color: var(--body); margin-bottom: 3rem;
}
.hero-bottom { display: flex; align-items: center; gap: 2.5rem; flex-wrap: wrap; }
.hero-pricing { display: flex; align-items: center; gap: 2rem; }
.hero-price { display: flex; flex-direction: column; gap: 0.1rem; }
.hero-price-label { font-family: var(--font-mono); font-size: 0.75rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); }
.hero-price-val { font-family: var(--font-mono); font-size: 0.875rem; font-weight: 500; color: var(--ink); }
.hero-price-sep { width: 1px; height: 28px; background: var(--line); }

/* ── Buttons ─────────────────────────────────────────── */
.btn-primary {
  display: inline-flex; align-items: center; gap: 0.4rem;
  background: var(--accent); color: var(--on-accent);
  padding: 0.72rem 1.4rem;
  font-family: var(--font-mono); font-size: 0.75rem;
  letter-spacing: 0.08em; text-transform: uppercase;
  transition: background 0.15s; white-space: nowrap;
}
.btn-primary:hover { background: var(--accent-h); }
.btn-ghost {
  display: inline-flex; align-items: center; gap: 0.4rem;
  color: var(--muted);
  font-family: var(--font-mono); font-size: 0.75rem;
  letter-spacing: 0.08em; text-transform: uppercase;
  border-bottom: 1px solid var(--line); padding-bottom: 2px;
  transition: color 0.15s, border-color 0.15s; white-space: nowrap;
}
.btn-ghost:hover { color: var(--ink); border-color: var(--ink); }

/* ── Ticker ──────────────────────────────────────────── */
.ticker {
  background: var(--accent);
  overflow: hidden;
  padding: 0.55rem 0;
  width: 100%;
}
.ticker-track {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  white-space: nowrap;
  width: max-content;
  animation: ticker-scroll 40s linear infinite;
}
.ticker-track:hover { animation-play-state: paused; }
@keyframes ticker-scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.ticker-item {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
  gap: 1rem;
  padding: 0 2rem;
  font-family: var(--font-mono); font-size: 0.75rem;
  letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--on-accent-muted); white-space: nowrap;
}
.ticker-item strong { color: var(--on-accent); font-weight: 500; }
.ticker-sep { width: 3px; height: 3px; border-radius: 50%; background: var(--on-accent-faint); flex-shrink: 0; }

/* ── Section base ────────────────────────────────────── */
/* v3.4 — PLUS D'ALTERNANCE. Une seule surface : --paper, partout.
   L'alternance portait le rythme du site a une epoque ou rien d'autre ne le
   portait. Depuis que la hierarchie typographique (v3.0, h2 a 40px) et
   l'aplat accent du CTA final le portent, elle fait double emploi — et le
   decalage entre deux beiges se voyait pour ne rien dire.
   Ce qui separe les sections : le filet haut, a 1.43:1 depuis la v3.0, et
   96px de respiration de chaque cote. Le trait suffit.
   Historique, pour ne pas refaire le chemin : l'alternance opposait --paper
   a --white (1.09:1, invisible), a ete corrigee en --paper-2 <-> --white
   (1.22:1, v3.2), puis supprimee.

   SUITE — pourquoi nth-child(even) disparait puis reparait.
   La DA d'aout 2026 reintroduit une alternance, mais pas la meme : --white
   contre --paper (1.09:1... mais entre blanc pur et beige, la ou l'ancienne
   opposait deux beiges entre eux). C'est une decision, pas un retour en
   arriere : ce qui avait ete supprime, c'est le decalage beige/beige, qui
   se lisait comme un defaut d'impression. Blanc franc contre beige franc se
   lit comme deux surfaces voulues.
   Condition de lisibilite, mesuree sur vatflow.ch ou le procede fonctionne :
   les sections y font 835 a 1334px de haut. A cette hauteur, l'oeil ne
   compare pas deux fonds cote a cote, il change de piece. Sur des sections
   courtes, le meme ecart redevient un decalage. Si une section descend sous
   ~600px, ne pas l'alterner. */
.section-wrap { border-top: 1px solid var(--line); padding: var(--section-pad); background: var(--paper); }

/* ── v3.5 — ALTERNANCE BLANC/BEIGE ───────────────────────────────────
   Le hero est beige ; les sections alternent blanc, beige, blanc. Le hero
   compte comme premier <section> du flux, d'ou nth-of-type(odd) pour le
   beige : hero=1, puis 3, 5...
   EXCLUSION : .page-legal, posee sur les quatre pages legales (fr+en).
   Mesure sur conditions-d-utilisation : neuf sections de 361 a 464px.
   Alternees, elles font une zebrure — un tableau, pas un rythme.
   Le critere n'est pas la hauteur d'une section : 25 des 42 sections du
   site sont sous 600px et alternent tres bien. C'est le nombre de sections
   courtes d'affilee. Une regle qui compte les sections ne sait pas separer
   mentions-legales (4 sections courtes) de comptabilite (4 sections
   longues) : d'ou une classe posee sur la page, explicite plutot
   qu'automatique. */
.section-wrap { background: var(--white); }
.section-wrap:nth-of-type(odd) { background: var(--paper); }
.page-legal .section-wrap { background: var(--paper); }
.inner { max-width: var(--max-w); margin: 0 auto; }
.section-meta { display: flex; align-items: center; gap: 0.75rem; margin-bottom: 3rem; }
/* v3.1 : quand un .section-header suit, la rangee meta n'est plus le titre
   mais son sur-titre — elle se rapproche. Selecteur :has() plutot qu'une
   marge negative, et le cas isole (pages legales) garde ses 3rem. */
.section-meta:has(+ .section-header) { margin-bottom: 1.25rem; }
/* v3.3 — LE FILET NE PROMET PLUS UNE COLONNE VIDE.
   Il tracait la pleine mesure de .inner, 1100px, au-dessus d'un texte de
   650 : il annoncait une colonne que rien ne remplissait, et posait un
   troisieme bord droit dans la page.
   Sur une section qui ne contient QUE de la prose, il se cale sur 760px —
   la largeur de .lp-note, pour que le filet et l'encadre partagent le meme
   bord et que la prose s'inscrive dedans.
   Le :not(:has()) rend la regle auto-entretenue : ajoutez une grille ou un
   tableau dans la section, le filet reprend la pleine largeur sans qu'on y
   pense. La liste ci-dessous est celle des composants plus larges que 760px. */
.section-wrap:not(:has(
  .services-grid, .docs-grid, .process-table, .lp-row3, .lp-myths,
  .pricing-grid, .obligation-grid, .faq-list, .threshold-card,
  .lp-mesh, .ticker
)) :is(.section-meta, .section-header) { max-width: 760px; }
/* .section-header est cape a 34ch, soit ~850px a 40px de corps : plus large
   que le filet. Dans une section de prose il se cale sur la meme mesure —
   un titre ne doit pas depasser le trait qui ouvre sa section. Sur les
   sections a grille, il garde ses 34ch. */
.section-num { font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--accent); font-weight: 500; }
.section-title-label { font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); }
.section-sep { flex: 1; height: 1px; background: var(--line); }
.section-header {
  font-family: var(--font-body); font-weight: 300;
  font-size: clamp(1.75rem, 3.2vw, 2.5rem);
  line-height: 1.18; letter-spacing: -0.022em;
  max-width: 34ch; margin-bottom: 3rem;
}

/* ── 01 Obligation ───────────────────────────────────── */
.obligation-grid { display: grid; grid-template-columns: 1fr 300px; gap: 5rem; align-items: start; }
.obligation-text p { font-size: 1rem; line-height: 1.72; color: var(--body); margin-bottom: 1.25rem; max-width: 65ch; }
.obligation-text p strong { color: var(--ink); font-weight: 500; }
.threshold-card {
  border: 1px solid var(--line);
  padding: 2rem; position: sticky; top: 72px;
  background: var(--white);
}
.threshold-label { font-family: var(--font-mono); font-size: 0.875rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); margin-bottom: 0.75rem; display: block; }
.threshold-amount { font-family: var(--font-mono); font-weight: 500; font-size: clamp(2.25rem, 4vw, 3.5rem); letter-spacing: -0.03em; line-height: 1; color: var(--accent); margin-bottom: 0.75rem; }
.threshold-desc { font-size: 1rem; line-height: 1.7; color: var(--body); border-top: 1px solid var(--line); padding-top: 1rem; margin-top: 1rem; }

/* ── 02 Services ─────────────────────────────────────── */
.services-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  border: 1px solid var(--line);
  background: var(--white);
}
.service-card {
  padding: 2.25rem 2rem;
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background: var(--white);
  transition: background 0.15s;
}
.service-card:nth-child(2n) { border-right: none; }
.service-card:nth-child(3),
.service-card:nth-child(4) { border-bottom: none; }
/* v4.0 : le fond bascule au survol. Regle plus bas, avec sa raison. */
.service-num {
  font-family: var(--font-mono); font-size: 0.75rem;
  letter-spacing: 0.1em; color: var(--accent);
  margin-bottom: 1rem; font-weight: 500;
  display: block;
}
.service-title {
  font-family: var(--font-body); font-weight: 500;
  font-size: 1rem; margin-bottom: 0.65rem; color: var(--ink);
}
.service-desc { font-size: 1rem; line-height: 1.7; color: var(--muted); }

/* ── 03 Process ──────────────────────────────────────── */
.process-table { border: 1px solid var(--line); width: 100%; background: var(--white); }
.process-row {
  display: grid;
  grid-template-columns: 52px 190px 1fr 150px;
  align-items: start;
  border-bottom: 1px solid var(--line);
  transition: background 0.15s;
}
.process-row:last-child { border-bottom: none; }
/* v4.0 : le fond bascule au survol, comme les cartes. Regle plus bas. */
.process-row > * {
  padding: 1.5rem 1.5rem;
  border-right: 1px solid var(--line);
}
.process-row > *:last-child { border-right: none; }
.process-step-num {
  font-family: var(--font-mono); font-size: 0.75rem;
  font-weight: 500; color: var(--accent);
  padding-top: 1.5rem;
}
.process-step-name {
  font-family: var(--font-mono); font-size: 0.875rem;
  font-weight: 500; color: var(--ink);
  line-height: 1.4;
}
.process-step-desc { font-size: 1rem; line-height: 1.7; color: var(--body); }
.process-step-time {
  font-family: var(--font-mono); font-size: 0.8rem;
  letter-spacing: 0.03em; color: var(--muted);
  text-transform: uppercase; padding: 1.5rem 1rem;
  overflow-wrap: break-word;
}

/* ── Required docs ───────────────────────────────────── */
.section-sub {
  font-family: var(--font-mono); font-size: 0.875rem;
  letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--muted); margin: 2.5rem 0 1rem;
}
.docs-grid {
  display: grid; grid-template-columns: repeat(3, 1fr);
  border: 1px solid var(--line); background: var(--white);
}
.doc-item {
  padding: 1rem 1.25rem;
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  font-size: 1rem; color: var(--muted);
  display: flex; align-items: flex-start; gap: 0.5rem;
}
.doc-item:nth-child(3n) { border-right: none; }
.doc-item:nth-last-child(-n+3) { border-bottom: none; }
.doc-marker { font-family: var(--font-mono); font-size: 0.75rem; color: var(--accent); font-weight: 500; flex-shrink: 0; margin-top: 0.15em; }

/* ── 04 Pricing ──────────────────────────────────────── */
.pricing-note {
  font-family: var(--font-mono); font-size: 1rem;
  letter-spacing: 0.05em; color: var(--muted);
  margin-bottom: 2.5rem; line-height: 1.75; max-width: 60ch;
}
.pricing-grid {
  display: grid; grid-template-columns: 1fr 1fr;
  border: 1px solid var(--line);
}
.pricing-card { padding: 2.5rem; border-right: 1px solid var(--line); background: var(--white); }
.pricing-card:last-child { border-right: none; }
.pricing-card.featured { background: var(--accent); color: var(--on-accent); }
.pricing-tag {
  font-family: var(--font-mono); font-size: 0.75rem;
  letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--muted); margin-bottom: 1.5rem; display: block;
}
.pricing-card.featured .pricing-tag { color: var(--on-accent-muted); }
.pricing-name { font-family: var(--font-body); font-weight: 500; font-size: 0.95rem; margin-bottom: 0.3rem; }
.pricing-card.featured .pricing-name { color: var(--on-accent); }
.pricing-amount {
  font-family: var(--font-mono); font-weight: 500;
  font-size: clamp(1.75rem, 3vw, 2.75rem);
  letter-spacing: -0.03em; line-height: 1;
  margin: 1.1rem 0 0.3rem;
}
.pricing-card.featured .pricing-amount { color: var(--on-accent); }
.pricing-unit {
  font-family: var(--font-mono); font-size: 0.875rem;
  letter-spacing: 0.06em; color: var(--muted);
  margin-bottom: 1.5rem; text-transform: uppercase;
}
.pricing-card.featured .pricing-unit { color: var(--on-accent-muted); }
.pricing-divider { height: 1px; background: var(--line); margin: 1.5rem 0; }
.pricing-card.featured .pricing-divider { background: var(--on-accent-line); }
.pricing-features { list-style: none; display: flex; flex-direction: column; gap: 0.6rem; }
.pricing-features li {
  display: flex; align-items: flex-start; gap: 0.55rem;
  font-size: 1rem; line-height: 1.55; color: var(--muted);
}
.pricing-card.featured .pricing-features li { color: var(--on-accent-muted); }
.pricing-features li::before {
  content: '→'; font-family: var(--font-mono); font-size: 0.75rem;
  color: var(--accent); flex-shrink: 0; margin-top: 0.1em;
}
.pricing-card.featured .pricing-features li::before { color: var(--on-accent-faint); }
.pricing-cta {
  display: inline-flex; align-items: center; gap: 0.35rem;
  margin-top: 2rem; font-family: var(--font-mono); font-size: 0.75rem;
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--muted); border-bottom: 1px solid var(--line);
  padding-bottom: 2px; transition: color 0.15s, border-color 0.15s;
}
.pricing-cta:hover { color: var(--ink); border-color: var(--ink); }
.pricing-card.featured .pricing-cta { color: var(--on-accent-muted); border-color: var(--on-accent-line); }
.pricing-card.featured .pricing-cta:hover { color: var(--on-accent); border-color: var(--on-accent-muted); }

/* Pricing options (TDFN / Taux effectif) */
.pricing-options { display: flex; flex-direction: column; gap: 0; margin: 1.25rem 0; }
.pricing-option {
  display: flex; align-items: center; justify-content: space-between;
  padding: 1rem 0;
  border-bottom: 1px solid var(--on-accent-line);
  gap: 1rem;
}
.pricing-option:first-child { border-top: 1px solid var(--on-accent-line); }
.pricing-option-label { font-family: var(--font-mono); font-size: 0.875rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--on-accent-muted); }
.pricing-option-label small { display: block; font-size: 0.75rem; letter-spacing: 0.05em; color: var(--on-accent-muted); margin-top: 0.15rem; }
.pricing-option-val { font-family: var(--font-mono); font-weight: 500; font-size: 1.1rem; color: var(--on-accent); white-space: nowrap; letter-spacing: -0.01em; }
.pricing-option-val small { font-size: 0.75rem; font-weight: 400; color: var(--on-accent-muted); margin-left: 0.3rem; }
.pricing-volume-note { font-size: 0.75rem; color: var(--on-accent-muted); line-height: 1.5; margin-top: 0.75rem; }

/* ── FAQ ─────────────────────────────────────────────── */
.faq-list { border-top: 1px solid var(--line); max-width: 720px; }
details.faq-item { border-bottom: 1px solid var(--line); }
details.faq-item summary {
  display: flex; align-items: center; justify-content: space-between;
  padding: 1.3rem 0; cursor: pointer; list-style: none;
  font-size: 1rem; font-weight: 400; transition: color 0.15s; gap: 1rem;
}
details.faq-item summary::-webkit-details-marker { display: none; }
details.faq-item summary:hover { color: var(--accent); }
.faq-icon { font-family: var(--font-mono); font-size: 0.9rem; color: var(--muted); flex-shrink: 0; transition: transform 0.25s cubic-bezier(0.16,1,0.3,1), color 0.15s; }
details[open] .faq-icon { transform: rotate(45deg); color: var(--accent); }
.faq-answer { font-size: 1rem; line-height: 1.8; color: var(--body); padding-bottom: 1.3rem; max-width: 60ch; }
.faq-answer strong { color: var(--ink); font-weight: 500; }

/* ── Final CTA ───────────────────────────────────────── */
.cta-final-wrap { background: var(--accent); padding: 5rem 3rem; text-align: center; }
.cta-final-inner { max-width: var(--max-w); margin: 0 auto; display: flex; flex-direction: column; align-items: center; gap: 1.5rem; }
.cta-final-label { font-family: var(--font-mono); font-size: 0.75rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--on-accent-muted); }
.cta-final-heading { font-family: var(--font-body); font-weight: 300; font-size: clamp(1.4rem, 3vw, 2.25rem); letter-spacing: -0.02em; color: var(--on-accent); line-height: 1.25; }
.btn-white { display: inline-flex; align-items: center; gap: 0.4rem; background: var(--on-accent); color: var(--accent); padding: 0.72rem 1.4rem; font-family: var(--font-mono); font-size: 0.75rem; letter-spacing: 0.08em; text-transform: uppercase; transition: background 0.15s; }
.btn-white:hover { background: var(--paper); }

/* ── Footer ──────────────────────────────────────────── */
footer { background: var(--ink); color: var(--on-ink-faint); }
.footer-main { max-width: var(--max-w); margin: 0 auto; padding: 4rem 3rem 3.5rem; display: grid; grid-template-columns: 1.5fr repeat(4, 1fr); gap: 2rem; border-top: 1px solid var(--on-ink-line); }
.footer-logo { display: flex; align-items: center; gap: 0.5rem; color: var(--on-ink); font-family: var(--font-mono); font-size: 0.75rem; margin-bottom: 0.7rem; font-weight: 500; }
.footer-logo .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); }
.footer-tagline { font-size: 1rem; line-height: 1.65; color: rgba(255,255,255,0.55); max-width: 22ch; }
/* v1.5 — NON TOKENISÉ. 0.55 ne correspond à aucun des quatre niveaux --on-ink-*.
   Non arrondi au plus proche, faute de savoir si l'écart est intentionnel.
   Composant inutilisé sur fidflow ; en service sur vatflow. À trancher. */
.footer-col h3 { font-family: var(--font-mono); font-size: 0.75rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--on-ink-muted); margin-bottom: 0.9rem; } /* v1.5 : au même niveau que ses liens. La hiérarchie se fait par la casse mono.
   v5.0 : h4 -> h3. Le niveau 4 faisait sauter la hiérarchie sur toute page
   dont le <main> ne porte aucun h3 — six pages, dont les légales. Le défaut
   venait d'ici, pas des pages. Le rendu ne change pas : la règle a toujours
   été portée par .footer-col, jamais par le niveau de titre. */
/* v1.7 : quatrieme colonne, titree du nom de la marque. Meme exception
   de casse que .facts-head-name — « FIDFLOW » n'existe pas. */
.footer-col h3.is-brand { text-transform: none; letter-spacing: 0.06em; }
.footer-col ul { list-style: none; display: flex; flex-direction: column; gap: 0.5rem; }
.footer-col ul li a { font-size: 0.875rem; color: var(--on-ink-muted); transition: color 0.15s; }
.footer-col ul li a:hover { color: var(--on-ink); }
.footer-bottom { border-top: 1px solid var(--on-ink-line); max-width: var(--max-w); margin: 0 auto; padding: 1.2rem 3rem; display: flex; align-items: center; justify-content: space-between; }
.footer-bottom p { font-family: var(--font-mono); font-size: 0.75rem; letter-spacing: 0.08em; color: var(--on-ink-faint); }

/* ── Reveal ──────────────────────────────────────────── */
.reveal { opacity: 0; transform: translateY(12px); transition: opacity 0.45s ease, transform 0.45s ease; }
.reveal.visible { opacity: 1; transform: translateY(0); }

/* ── Responsive ──────────────────────────────────────── */
@media (max-width: 1024px) {
  .obligation-grid { grid-template-columns: 1fr; }
  .threshold-card { position: static; }
  .process-row { grid-template-columns: 40px 150px 1fr; }
  .process-step-time { display: none; }
  .footer-main { grid-template-columns: 1fr 1fr; gap: 2rem; }
  .docs-grid { grid-template-columns: 1fr 1fr; }
  .doc-item:nth-child(3n) { border-right: 1px solid var(--line); }
  .doc-item:nth-child(2n) { border-right: none; }
}
@media (max-width: 768px) {
  :root { --section-pad: 3.5rem 1.5rem; }
  .site-nav { padding: 0 1.5rem; }
  .nav-links { display: none; position: fixed; inset: 56px 0 0 0; background: var(--paper); flex-direction: column; gap: 0; padding: 1.5rem; border-top: 1px solid var(--line); z-index: 99; }
  .nav-links.open { display: flex; }
  .nav-links li { border-bottom: 1px solid var(--line); }
  .nav-links a { display: block; padding: 0.85rem 0; }
  .hamburger { display: flex; }
  .btn-nav { display: none; }
  #hero { padding: 4rem 1.5rem 3.5rem; }
  .services-grid { grid-template-columns: 1fr; }
  .service-card { border-right: none; }
  .service-card:nth-child(3) { border-bottom: 1px solid var(--line); }
  .service-card:nth-child(4) { border-bottom: none; }
  .process-row { grid-template-columns: 36px 1fr; }
  .process-step-name { display: none; }
  .pricing-grid { grid-template-columns: 1fr; }
  .pricing-card { border-right: none; border-bottom: 1px solid var(--line); }
  .pricing-card:last-child { border-bottom: none; }
  .footer-main { grid-template-columns: 1fr; padding: 3rem 1.5rem; }
  .footer-bottom { flex-direction: column; gap: 0.5rem; padding: 1.2rem 1.5rem; }
  .hero-bottom { flex-direction: column; align-items: flex-start; gap: 1.5rem; }
  .hero-pricing { flex-wrap: wrap; gap: 1.25rem; }
  .docs-grid { grid-template-columns: 1fr; }
  .doc-item { border-right: none !important; }
  .doc-item:last-child { border-bottom: none !important; }
  .cta-final-wrap { padding: 4rem 1.5rem; }
  .pricing-option { flex-direction: column; align-items: flex-start; gap: 0.35rem; }
}

/* =========================================================
   Landing pages SEO — bloc ADDITIF (ne modifie rien au-dessus)
   Partagé avec la home : classes préfixées .lp-* uniquement.
   ========================================================= */
.lp-chips { display:flex; flex-wrap:wrap; gap:0.6rem; margin-top:2rem; }
.lp-chip { font-family:var(--font-mono); font-size:0.75rem; letter-spacing:0.05em; color:var(--ink); border:1px solid var(--line); background:var(--white); padding:0.4rem 0.75rem; }
.lp-chip strong { color:var(--ink); font-weight:500; }

.lp-prose { font-size:1rem; line-height:1.72; color:var(--body); max-width:65ch; margin-bottom:1.25rem; }
.lp-prose strong { color:var(--ink); font-weight:500; }
.lp-prose a { color:var(--accent); }

/* idées fausses */
.lp-myths { border:1px solid var(--line); background:var(--white); }
.lp-myth { display:grid; grid-template-columns:1fr 1fr; }
.lp-myth > div { padding:1.5rem 1.75rem; border-bottom:1px solid var(--line); font-size:1rem; line-height:1.6; }
.lp-myth > div:first-child { border-right:1px solid var(--line); }
.lp-myth:last-child > div { border-bottom:none; }
.lp-myth .k { font-family:var(--font-mono); font-size:0.72rem; letter-spacing:0.08em; text-transform:uppercase; display:block; margin-bottom:0.5rem; }
.lp-myth-false { color:var(--ink); }
.lp-myth-false .k { color:var(--warn); }
.lp-myth-true { color:var(--ink); }
.lp-myth-true .k { color:var(--accent); }
.lp-myth strong { color:var(--ink); font-weight:500; }

/* note encadrée */
.lp-note { border:1px solid var(--line); border-left:2px solid var(--accent); background:var(--white); padding:1.5rem 1.75rem; max-width:760px; }
/* v1.4 : max-width ajouté. 760px = 65ch de mesure utile + le padding, soit
   la même longueur de ligne que .lp-prose. Sans elle, l'encadré s'étale sur
   toute la largeur de .inner (~110 caractères par ligne). */
.lp-note .k { font-family:var(--font-mono); font-size:0.75rem; letter-spacing:0.08em; text-transform:uppercase; color:var(--accent); margin-bottom:0.6rem; display:block; }
.lp-note p { font-size:1rem; line-height:1.75; color:var(--body); }
.lp-note p strong { color:var(--ink); font-weight:500; }
.lp-note a { color:var(--accent); }
.obligation-text a, .lp-prose a, .lp-more-item a, .doc-item a { color:var(--accent); text-decoration:underline; }
/* v1.5 : .doc-item ajouté — un lien dans une cellule de .docs-grid héritait
   du navigateur, donc invisible. Même traitement que la prose, rien de neuf. */
.lp-note a { text-decoration:underline; }

/* pour aller plus loin */
.lp-more { border-top:1px solid var(--line); max-width:760px; }
.lp-more-item { border-bottom:1px solid var(--line); padding:1.4rem 0; }
.lp-more-item h3 { font-family:var(--font-body); font-weight:500; font-size:1rem; margin-bottom:0.4rem; color:var(--ink); }
.lp-more-item p { font-size:1rem; line-height:1.75; color:var(--body); max-width:70ch; }
.lp-more-item p strong { color:var(--ink); font-weight:500; }

/* checklist documents (landings) — pleine lisibilité */
.lp-docs .doc-item { color:var(--ink); }

/* maillage interne */
.lp-mesh { display:flex; flex-wrap:wrap; gap:0.6rem 1.5rem; align-items:center; margin-top:2.5rem; font-family:var(--font-mono); font-size:0.75rem; letter-spacing:0.06em; text-transform:uppercase; }
.lp-mesh a { color:var(--accent); }
.lp-mesh .lbl { color:var(--muted); }

/* diagnostic interactif */
.lp-diag { max-width:680px; }
.lp-dq { border:1px solid var(--line); background:var(--white); padding:1.5rem 1.75rem; margin-bottom:0.75rem; }
.lp-dq[hidden] { display:none; }
.lp-dq-label { font-size:1rem; margin-bottom:1rem; line-height:1.5; display:flex; gap:0.5rem; align-items:baseline; }
.lp-dq-label strong { font-weight:500; color:var(--ink); }
.lp-dq-n { font-family:var(--font-mono); font-size:0.75rem; color:var(--accent); flex-shrink:0; }
.lp-dq-opts { display:flex; flex-wrap:wrap; gap:0.5rem; }
.lp-dq-opts button { font-family:var(--font-mono); font-size:0.75rem; letter-spacing:0.05em; text-transform:uppercase; background:var(--white); color:var(--ink); border:1px solid var(--line); padding:0.55rem 1.1rem; cursor:pointer; transition:all 0.12s; }
.lp-dq-opts button:hover { border-color:var(--accent); color:var(--accent); }
.lp-dq-opts button.sel { background:var(--accent); color:var(--on-accent); border-color:var(--accent); }
.lp-verdict { margin-top:1.5rem; }
.lp-vbox { border:1px solid var(--line); border-left:3px solid var(--accent); background:var(--white); padding:1.75rem 2rem; }
.lp-vbox.is-out { border-left-color:#8a6d1f; }
.lp-vbox.is-no { border-left-color:var(--muted); }
.lp-vk { font-family:var(--font-mono); font-size:0.75rem; letter-spacing:0.1em; text-transform:uppercase; color:var(--accent); margin-bottom:0.6rem; }
.lp-vbox.is-out .lp-vk { color:#8a6d1f; }
.lp-vbox.is-no .lp-vk { color:var(--muted); }
.lp-vbox h3 { font-family:var(--font-body); font-weight:500; font-size:1.2rem; margin-bottom:0.6rem; }
.lp-vbox p { font-size:1rem; line-height:1.7; color:var(--body); margin-bottom:1rem; }
.lp-vbox .btn-primary { margin-top:0.25rem; }
.lp-diag-note { font-family:var(--font-mono); font-size:0.72rem; letter-spacing:0.05em; color:var(--muted); margin-top:1rem; }

@media (max-width:768px){
  .lp-myth { grid-template-columns:1fr; }
  .lp-myth > div:first-child { border-right:none; }
}

.lp-myths + .lp-prose { margin-top: 1.25rem; }

/* tableau 3 colonnes (landings) — restaure la disposition V-1 */
.lp-row3 { display:grid; grid-template-columns:repeat(3,1fr); border:1px solid var(--line); background:var(--white); }
.lp-row3 .lp-cell { padding:1.5rem 1.75rem; border-right:1px solid var(--line); }
.lp-row3 .lp-cell:last-child { border-right:none; }
.lp-cell .k { font-family:var(--font-mono); font-size:0.75rem; letter-spacing:0.06em; text-transform:uppercase; color:var(--accent); margin-bottom:0.6rem; display:block; }
.lp-cell p { font-size:1rem; line-height:1.6; color:var(--ink); }
@media (max-width:768px){ .lp-row3 { grid-template-columns:1fr; } .lp-row3 .lp-cell { border-right:none; border-bottom:1px solid var(--line); } .lp-row3 .lp-cell:last-child { border-bottom:none; } }

/* note d'avertissement (erreur potentielle) — rouge */
.lp-note.is-warn { border-left-color:var(--warn); }
.lp-note.is-warn .k { color:var(--warn); }

/* v3.4 : la cascade de contraste case/section est supprimee avec
   l'alternance. Toutes les sections etant sur --paper, les cases restent
   blanches partout — leur bord a 1.43:1 les detache, l'aplat n'y servait
   qu'a rattraper le blanc-sur-blanc des sections blanches, qui n'existent
   plus. Huit selecteurs en moins. */

/* Liens des cartes (home : contextuels « Entreprises » + Ressources) — remplace les styles inline */
.lp-card-link { display:inline-block; margin-top:0.6rem; font-size:0.82rem; font-weight:500; }

/* =========================================================
   v1.1 — Variantes de composants
   ========================================================= */

/* ── Grilles de services au-delà de 4 cartes ─────────────
   La règle de base traite exactement 4 cartes (2x2). Au-delà, il faut
   rétablir le filet des cartes 3 et 4 et le retirer sur la dernière rangée. */
/* --odd : dernière rangée à une carte (effectif impair >= 5).
   --even : dernière rangée à deux cartes (effectif pair >= 6).
   La règle porte sur la parité, pas sur un nombre — --5 et --6 sont
   conservés en alias depuis la v1.2, ne pas les retirer sans audit. */
.services-grid--odd .service-card:nth-child(3),
.services-grid--odd .service-card:nth-child(4),
.services-grid--5 .service-card:nth-child(3),
.services-grid--5 .service-card:nth-child(4),
.services-grid--even .service-card:nth-child(3),
.services-grid--even .service-card:nth-child(4),
.services-grid--6 .service-card:nth-child(3),
.services-grid--6 .service-card:nth-child(4) { border-bottom: 1px solid var(--line); }
.services-grid--odd .service-card:last-child,
.services-grid--5 .service-card:last-child { border-bottom: none; }
.services-grid--even .service-card:nth-last-child(-n+2),
.services-grid--6 .service-card:nth-last-child(-n+2) { border-bottom: none; }

/* ── Paragraphe de corps sur aplat --accent ──────────────
   Pendant de .lp-prose pour les blocs colorés. */
.prose-on-accent {
  font-size: 1rem; line-height: 1.75;
  color: var(--on-accent-muted); max-width: 62ch;
}

/* ── CTA final, variante neutre ──────────────────────────
   Même structure, sans aplat de marque. */
/* v3.2 : --paper, pas --paper-2. Depuis que les sections impaires sont en
   --paper-2, la bande se fondait dans celle qui la precede. Elle prend donc
   la troisieme valeur de la famille — celle du hero : les deux extremites de
   la page se repondent, et la bande se detache des deux fonds de section. */
.cta-final-wrap--neutral { background: var(--paper); border-top: 1px solid var(--line); }
.cta-final-wrap--neutral .cta-final-label { color: var(--muted); }
.cta-final-wrap--neutral .cta-final-heading { color: var(--ink); }
.cta-final-wrap--neutral .prose-on-accent { color: var(--muted); }

/* ── Process, variante 2 colonnes ────────────────────────
   La table de base est une grille 4 colonnes (num / nom / desc / durée).
   Ici : numéro + libellé seulement. */
.process-table--2col .process-row { grid-template-columns: 52px 1fr; }

@media (max-width: 1024px) {
  .process-table--2col .process-row { grid-template-columns: 40px 1fr; }
}
@media (max-width: 768px) {
  /* Grilles en 1 colonne : seule la dernière carte perd son filet. */
  .services-grid--odd .service-card,
  .services-grid--5 .service-card,
  .services-grid--even .service-card,
  .services-grid--6 .service-card { border-bottom: 1px solid var(--line); }
  .services-grid--odd .service-card:last-child,
  .services-grid--5 .service-card:last-child,
  .services-grid--even .service-card:last-child,
  .services-grid--6 .service-card:last-child { border-bottom: none; }

  .process-table--2col .process-row { grid-template-columns: 36px 1fr; }
}

/* =========================================================
   v1.2 — Espacement vertical
   Besoin unique : poser un bloc de prose après une grille ou un tableau
   bordé, qui n'ont pas de marge basse. Trois niveaux, alignés sur les
   valeurs déjà en usage dans ce fichier.
     mt-sm  1.25rem  = .lp-prose margin-bottom, .lp-myths + .lp-prose
     mt-md  1.5rem   = .lp-verdict margin-top, .pricing-divider
     mt-lg  2.5rem   = .lp-mesh margin-top, .section-sub, .hero-label
   ========================================================= */
.mt-sm { margin-top: 1.25rem; }
.mt-md { margin-top: 1.5rem; }
.mt-lg { margin-top: 2.5rem; }

/* =========================================================
   v1.3 — Correctifs
   ========================================================= */

/* A1. .cta-final-wrap centre son contenu ; un tableau de process n'a rien
   à y gagner — les numéros restent à gauche, les libellés fuyaient au
   centre. Seule la table bascule : titres, label et CTA restent centrés. */
.cta-final-wrap .process-table { text-align: left; }

/* A3. Entrée de navigation désactivée — un <a> sans href.
   Atténuée par rapport aux liens actifs (--muted), inerte au survol.
   --line est déjà le ton du non-interactif dans ce fichier (.nav-lang .sep). */
.site-nav a:not([href]),
.site-nav a:not([href]):hover {
  color: var(--line);
  cursor: default;
}
/* v1.6 : portee elargie de .nav-links a toute .site-nav — le selecteur
   couvre desormais aussi .nav-lang, ou une langue pas encore publiee
   est un <a> sans href. */

/* =========================================================
   v1.4 — Emphase et survol

   RÈGLE : l'accent ne couvre jamais un bloc de texte à lire.
   Il couvre le ticker, la carte de prix mise en avant et le CTA final.
   L'emphase d'un énoncé se fait par encadré (.lp-note), pas par aplat.
   Un aplat de section a existé sur fidflow jusqu'en v1.3 : il ne venait
   pas de la charte, il fatiguait la lecture, il est supprimé.
   ========================================================= */

/* SURVOL DES CARTES ET DES RANGEES — v4.0 : LE FOND BASCULE.
   .service-card et .process-row prennent --paper au survol, en 0.15s.

   Repris de vatflow, mesure en direct sur vatflow.ch/fr/ le 15.08.2026,
   souris posee sur la carte : fond releve rgb(247,245,240) = --paper.
     .service-card { transition: background 0.15s }
     .service-card:hover { background: var(--paper) }
     .process-row:hover  { background: var(--paper) }

   CETTE REGLE ANNULE LA v3.7. La v3.7 supprimait tout survol de carte
   (decision du 14.08.2026, prise sur sept variantes) ; la decision du
   15.08.2026 la renverse. Il n'y a plus de v3.7 a respecter : ce bloc
   la remplace, il ne l'amende pas.

   UNE SEULE VALEUR, PAS DEUX. vatflow a une seconde regle —
   .section-wrap:nth-child(2n) .service-card:hover { background: var(--white) }
   — parce qu'il teinte ses cartes selon la section : au survol la carte
   prend la couleur de sa section, elle s'y fond. fidflow a supprime cette
   teinture en v3.4, la carte est --white partout. Transposer la seconde
   regle donnerait, sur les sections blanches, une carte blanche qui passe
   au blanc : un survol invisible sur une section sur deux.
   Donc --paper au survol, partout. Sur section --paper la carte se fond,
   comme sur vatflow ; sur section --white elle se detache. Le geste reste
   visible dans les deux cas — c'est ce qu'on demande a un survol.

   Consequence, deja pesee en v3.7 et acceptee ici : rien ne distingue une
   carte cliquable (a.service-card) d'une carte de contenu
   (div.service-card), les deux reagissent. C'est le comportement vatflow.
   Rien ne se deplace : rien a neutraliser sous prefers-reduced-motion. */
.service-card:hover { background: var(--paper); }
.process-row:hover  { background: var(--paper); }

/* v4.1 — LE TITRE D'UNE CARTE CLIQUABLE PASSE A L'ACCENT.
   AMENDE la v4.0, ne l'annule pas : le fond --paper reste sur toutes
   les cartes, cliquables ou non. S'y ajoute, sur les seules cartes qui
   sont des liens, le titre en accent.
   Decision du 17.08.2026, variante V3 de la planche de survol.

   CE QUE CA REGLE. La v4.0 acceptait en connaissance de cause que rien
   ne distingue a.service-card de div.service-card. Le fond ne les
   distingue toujours pas — c'est le titre qui le fait. Le selecteur
   porte sur a.service-card : une carte de contenu garde son fond et
   rien d'autre.

   NE PAS transposer sur vatflow, qui garde son filet accent deploye et
   ne consomme pas cette feuille. Divergence assumee, pas un oubli.
   Rien ne se deplace : rien a neutraliser sous prefers-reduced-motion. */
a.service-card .service-title { transition: color 0.15s; }
a.service-card:hover .service-title { color: var(--accent); }

/* =========================================================
   v1.6 — Pied de page empilé

   .footer-bottom est une rangée en espace-entre : deux blocs, un à
   chaque bout. Au-delà de deux lignes — e-mail, mention légale, origine —
   il faut une colonne centrée.

   Cette mise en page existait déjà sur vatflow, mais par un attribut
   style inline sur l'élément : elle n'est jamais entrée dans le CSS, donc
   jamais dans l'extraction v1.0. vatflow perd son inline à sa bascule.
   ========================================================= */
.footer-bottom--stacked {
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 0.4rem;
}

/* =========================================================
   v2.1 — Formulaire
   Premier formulaire du groupe. Aucun sélecteur d'élément nu :
   tout est porté par .field, pour qu'un <input> hors formulaire
   (recherche, filtre) n'hérite de rien.
   Les blocs de réponse — succès, erreur serveur — réutilisent
   .lp-note et .lp-note.is-warn. Pas de composant de message.
   ========================================================= */

.form-grid { max-width: 760px; display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem; }
.field--full { grid-column: 1 / -1; }

.field { display: flex; flex-direction: column; gap: 0.45rem; }
.field > label {
  font-family: var(--font-mono); font-size: 0.75rem;
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted);
}
/* L'astérisque n'est pas une décoration : aria-hidden, le champ porte
   required. Un lecteur d'écran annonce l'obligation, pas une étoile. */
.field > label .req { color: var(--accent); margin-left: 0.2rem; }

.field input,
.field textarea {
  font-family: var(--font-body); font-size: 1rem; line-height: 1.6;
  color: var(--ink); background: var(--white);
  border: 1px solid var(--line); border-radius: 0;
  padding: 0.7rem 0.85rem; width: 100%;
  transition: border-color 0.15s;
  -webkit-appearance: none; appearance: none;
}
.field textarea { min-height: 9rem; resize: vertical; }
.field input:focus,
.field textarea:focus { outline: none; border-color: var(--accent); }
.field input::placeholder,
.field textarea::placeholder { color: var(--line); }

.field-error { font-size: 0.875rem; color: var(--warn); display: none; }
/* v2.1.1 — même emplacement, même gabarit, mais ce n'est pas une erreur :
   une attente, ou une action à terminer. Le rouge dirait au visiteur qu'il
   s'est trompé alors qu'il n'a rien fait de mal. */
.field-error.is-info { color: var(--muted); }
.field.is-invalid input,
.field.is-invalid textarea { border-color: var(--warn); }
.field.is-invalid .field-error { display: block; }

/* .btn-primary a été écrit pour un <a>. En <button> il faut neutraliser
   le chrome natif — sans ça, bordure système et coins arrondis. */
button.btn-primary { border: 0; cursor: pointer; }
button.btn-primary[disabled] { opacity: 0.5; cursor: default; }

.form-actions { max-width: 760px; display: flex; align-items: center; gap: 1.25rem; flex-wrap: wrap; margin-top: 1.5rem; }

@media (max-width: 640px) {
  .form-grid { grid-template-columns: 1fr; }
}

/* =========================================================
   v3.8 — Home fidflow : hero à deux colonnes, grille 3×3

   Deux composants et une variante de grille, tous nés de la home
   fidflow. Bloc additif : aucune règle au-dessus n'est modifiée.
   ========================================================= */

/* ── Hero à deux colonnes ────────────────────────────────
   #hero est une colonne unique. .hero--split ouvre une seconde
   colonne fixe à droite, destinée à une carte de faits. Le contenu
   courant du hero passe dans .hero-main ; .hero-label, .hero-h1,
   .hero-sub et .hero-bottom ne changent pas.
   RESERVE A LA HOME. Une landing repond a une question precise :
   elle ne presente pas la maison. La reserve porte sur le propos,
   pas sur le gabarit. Voir README, section Portee.
   Le titre ne change pas de gabarit : mesure a 1440px, .hero-h1 rend
   sur trois lignes en pleine largeur comme en colonne (le cap 18ch
   vaut 729px, la colonne 600px, la ligne la plus longue ~465px).
   Passe ~600px de ligne c'est la colonne qui mesurerait — le reglage
   se ferait alors sur la largeur de colonne, jamais par une taille
   de police locale. */
.hero--split {
  display: grid;
  grid-template-columns: 1fr 340px;
  gap: 4rem;
  align-items: start;
}

/* ── Carte de faits ──────────────────────────────────────
   Liste de définitions encadrée : un libellé à gauche, une valeur à
   droite, une sous-ligne facultative sous la valeur. Tient de deux à
   huit rangées ; au-delà, ce n'est plus une carte, c'est un tableau.
   Le plancher etait a quatre jusqu'au 17.08 : il supposait que la carte
   presente la maison. A deux rangees elle ne presente plus rien, elle
   atteste — c'est un autre propos, pas une carte incomplete.
   Ce n'est ni .threshold-card, qui pose UN chiffre en grand, ni
   .lp-row3, qui est horizontal. */
.facts-card { border: 1px solid var(--line); background: var(--white); }
.facts-head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 1rem; padding: 1rem 1.25rem;
  border-bottom: 1px solid var(--line);
  font-family: var(--font-mono); font-size: 0.7rem;
  letter-spacing: 0.14em; text-transform: uppercase;
}
/* La casse des marques ne se negocie pas : le mono de l'en-tete est en
   capitales, le nom de l'entite ne l'est pas. */
.facts-head-name { color: var(--accent); font-weight: 500; text-transform: none; letter-spacing: 0.06em; }
.facts-head-meta { color: var(--muted); }
.facts-row {
  display: grid; grid-template-columns: auto 1fr; gap: 1rem;
  align-items: baseline; padding: 0.85rem 1.25rem;
  border-bottom: 1px solid var(--line);
}
.facts-row:last-child { border-bottom: none; }
.facts-row dt {
  font-family: var(--font-mono); font-size: 0.7rem;
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted);
}
.facts-row dd { text-align: right; }
.facts-val { font-size: 0.9rem; line-height: 1.4; color: var(--ink); }
.facts-sub {
  display: block; font-size: 0.8rem; line-height: 1.5;
  color: var(--muted); margin-top: 0.25rem;
}

/* ── Grille de services en 3 colonnes ────────────────────
   Les variantes --odd / --even sont construites sur une parité à
   deux colonnes : leurs règles nth-child ne transposent pas. --3
   redéclare donc les deux filets pour toutes les cartes, puis les
   retire sur la dernière colonne et la dernière rangée.
   CONTRAINTE : effectif multiple de 3. nth-last-child(-n+3) coupe
   le filet bas des trois dernières cartes — sur une rangée
   incomplète, il couperait celui de la rangée précédente.
   Ne pas combiner avec --odd / --even : --3 les remplace. */
.services-grid--3 { grid-template-columns: repeat(3, 1fr); }
.services-grid--3 .service-card {
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.services-grid--3 .service-card:nth-child(3n) { border-right: none; }
.services-grid--3 .service-card:nth-last-child(-n+3) { border-bottom: none; }

@media (max-width: 1024px) {
  .hero--split { grid-template-columns: 1fr; gap: 2.5rem; }
  /* Empilee, la carte garde une largeur de carte : etiree sur 1000px,
     la liste de definitions se lit comme un tableau. */
  .hero--split .facts-card { max-width: 420px; }
  /* 3 colonnes sous 1024px donnent ~145px de contenu par carte.
     Retour à 2 colonnes, effectif 9 = parité impaire. */
  .services-grid--3 { grid-template-columns: 1fr 1fr; }
  .services-grid--3 .service-card:nth-child(3n) { border-right: 1px solid var(--line); }
  .services-grid--3 .service-card:nth-child(2n) { border-right: none; }
  .services-grid--3 .service-card:nth-last-child(-n+3) { border-bottom: 1px solid var(--line); }
  .services-grid--3 .service-card:last-child { border-bottom: none; }
}
@media (max-width: 768px) {
  .services-grid--3 { grid-template-columns: 1fr; }
  .services-grid--3 .service-card,
  .services-grid--3 .service-card:nth-child(2n),
  .services-grid--3 .service-card:nth-child(3n) { border-right: none; }
  .services-grid--3 .service-card:nth-last-child(-n+3) { border-bottom: 1px solid var(--line); }
  .services-grid--3 .service-card:last-child { border-bottom: none; }
}

/* =========================================================
   v6.0.1 — Le lien dans le texte est souligne en permanence

   CETTE SECTION ANNULE LA v3.9.

   La v3.9 retirait le souligne au repos et en faisait le signal
   de survol, par reprise du geste de vatflow. Elle notait que le
   souligne permanent etait le plus lisible des deux et appelait
   l'ecart « connu, pas un oubli ». L'ecart n'avait pas ete mesure.

   Mesure. Un lien non souligne n'est signale que par sa couleur.
   Pour qu'une couleur seule distingue un lien de son paragraphe,
   il faut 3:1 entre les deux. Contraste accent / texte courant :

     vatflow #1B2B4B sur --body #3f3f3f : 1,33:1
     fidflow #3A63D0 sur --body #3f3f3f : 1,94:1

   Aucune marque ne passe. fidflow n'atteint 3,48:1 que contre
   --ink, qui n'est pas la couleur du corps de texte. Sur fond, les
   deux accents sont excellents (12,90:1 et 5,42:1) : le defaut
   n'etait pas la lisibilite du lien, c'etait son reperage.

   Le geste de survol n'y repond pas : le curseur et le souligne
   n'apparaissent qu'apres avoir vise le lien, a la souris seule.
   Un lien doit se voir avant d'etre survole.

   Decision de Kevin du 14.09.2026, sur les contrastes ci-dessus.
   Il n'y a plus de v3.9 a respecter.

   PORTEE : les liens dans le texte, et eux seuls. Nav, pied et
   boutons gardent leur survol. .lp-card-link, qui vit dans une
   carte, reste hors de cette regle. Les liens de .footer-bottom
   n'ont de regle sur aucun des deux sites.

   Les regles de couleur et de souligne vivent plus haut dans cette
   feuille ; ce bloc n'existe que pour couvrir .lp-mesh, que la
   v3.9 avait ajoute a la liste, et pour porter le raisonnement.
   ========================================================= */
.obligation-text a, .lp-prose a, .lp-more-item a, .doc-item a,
.lp-note a, .lp-mesh a { color: var(--accent); text-decoration: underline; }

/* =========================================================
   v3.10 — Bande d'applications et enumerations

   Deux composants, poses le 11.09.2026 pour la page Odoo.
   Bloc ADDITIF : rien au-dessus n'est modifie.
   ========================================================= */

/* ── A. Bande d'applications ───────────────────────────────
   Dix tuiles icone + libelle. Pas de conteneur borde : les
   tuiles sont posees sur le fond de section, comme les cartes
   de .services-grid, et la grille ne porte aucun filet.

   CITATION, PAS PRIMITIVE. .app-tile porte les deux premiers
   border-radius non circulaires et la premiere box-shadow du
   fichier. C'est deliberement une citation du langage visuel
   d'Odoo — leur lanceur d'applications pose des glyphes sur
   des tuiles arrondies et ombrees — sur la seule page qui
   parle d'Odoo. La portee s'arrete a .app-tile : ces deux
   proprietes ne font pas precedent, aucun autre composant du
   fichier ne doit les reprendre en s'appuyant sur celui-ci.
   Partout ailleurs, l'angle reste vif et le relief se fait par
   le filet (--line), pas par l'ombre.

   Le libelle reste en Inter. Le perimetre du mono ne change
   pas (decision du 11.09) : un nom d'application est un nom
   propre, pas une etiquette de fonction. Le mono signale un
   appareil — .k, .lp-mesh, .section-num — et ces dix noms
   n'en sont pas un.  */

.app-grid {
  display: grid; grid-template-columns: repeat(5, 72px);
  justify-content: space-between;
  gap: 2.25rem 0; margin-top: 1.5rem; max-width: 760px;
}
/* 760px : meme mesure que .lp-note et .lp-more. La bande suit une
   ligne de .lp-prose, elle ne doit pas la deborder.

   LES COLONNES SONT DIMENSIONNEES SUR LA TUILE, PAS SUR LE CONTENU.
   C'est la seule facon d'avoir a la fois un bord gauche franc et un
   pas regulier. Les deux autres voies ont ete mesurees au navigateur,
   viewport 1100, et echouent chacune sur un des deux criteres :
     repeat(5, 1fr)                1re tuile a +30px de la prose,
                                   pas regulier (157 157 157 157)
     repeat(5, 1fr) + justify-
       items: start                1re tuile a +12px, et la cellule se
                                   retracte sur son libelle, donc pas
                                   irregulier (145 157 166 147)
     repeat(5, 72px) + space-
       between                     ecart 0, pas 172 172 172 172
   space-between distribue lui-meme l'espace horizontal : column-gap
   reste a 0, sinon les deux se cumulent. D'ou `gap: 2.25rem 0`.

   Consequence assumee : un libelle plus large que 72px passe sur deux
   lignes sous sa tuile. C'est le comportement du lanceur d'Odoo. Un
   libelle d'un seul mot, lui, ne peut pas se couper.

   Mesure au navigateur, Inter 400. LES VALEURS QUI SUIVENT DEPENDENT
   DE LA TAILLE DU LIBELLE — elles sont prises a 0.8rem, la taille que
   declare .app-name plus bas. Changer cette taille les invalide.
     Feuilles de temps  105px   coupe, deux lignes
     Rendez-vous         81px   coupe au trait d'union, deux lignes
     Comptabilite        75px   INSECABLE, deborde de 3px
     Depenses            60px   tient, 12px de marge
     les cinq autres    <60px   tiennent
   « Comptabilite » deborde donc de 1,5px de chaque cote, le centrage
   de la cellule repartissant les 3px. Sous 768px il tombe rangee 2
   colonne 1 : son bord gauche passe a 1,5px a gauche de la prose,
   c'est le seul endroit ou l'alignement de la bande cede. Assume : une
   legende centree sous une tuile se lit comme une legende, pas comme
   un desalignement. La contraindre a 72px imposerait hyphens ou
   overflow-wrap, donc « Compta-bilite » sur un nom d'application.
   0.95rem a ete essayee et ecartee le 11.09, mesuree cote a cote :
   elle porte trois cas limites au lieu d'un — « Comptabilite » a 91px
   (19 de debord), « Depenses » a 72px pile, « Employes » a 70px, soit
   2px de marge. A 0.8rem un seul libelle depasse et les autres gardent
   12px ou plus. Le retour a la ligne est le meme aux deux tailles :
   « Feuilles de temps » et « Rendez-vous » passent sur deux lignes
   dans les deux cas. 0.8rem ne coute donc rien et retire deux cas
   limites sur trois. */

.app-cell { display: flex; flex-direction: column; align-items: center; gap: 0.7rem; text-align: center; }
/* Centree : la colonne fait exactement la largeur de la tuile, donc
   le centrage ne deplace plus rien (mesure : ecart 0 dans les deux
   cas). Il ne joue que sur le libelle, qu'il centre sous sa tuile. */

.app-tile {
  width: 72px; height: 72px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  background: var(--white);
  border-radius: 14px;                        /* citation Odoo — voir ci-dessus */
  box-shadow: 0 2px 8px rgba(17,17,17,0.09);  /* citation Odoo — voir ci-dessus */
}

/* PREMIERE REGLE img DU FICHIER, et volontairement portee sur
   .app-grid img plutot que sur img nu. Une regle globale sur img
   toucherait les logos en <img> qu'un site du groupe pourrait
   poser demain, et le comportement par defaut n'a jamais gene
   jusqu'ici. On ne cadre que ce qu'on pose.
   object-fit: conges.png mesure 101x100 la ou les neuf autres
   font 100x100 — sans lui, ce fichier-la s'ecrase de 1 %. */
.app-grid img { width: 48px; height: 48px; object-fit: contain; display: block; }

.app-name { font-family: var(--font-body); font-size: 0.8rem; line-height: 1.35; color: var(--body); }

@media (max-width: 768px) {
  .app-grid { grid-template-columns: repeat(3, 72px); gap: 1.75rem 0; max-width: 336px; }
}

/* v3.14 — la bande a trois applications, et ce qui la suit.
   .app-grid--3 retombe sur la grille de la bande a cinq : meme pas
   de 172px, donc les trois tuiles tombent exactement sous les trois
   premieres du 01. 416 = 3 tuiles de 72 + 2 blancs de 100, et
   space-between produit ces 100 tout seul.
   336px avait ete essaye et ecarte : cette valeur vient de la regle
   mobile, ou le but est que la bande ne s'etale pas sur un ecran
   large. Sur desktop le but est l'inverse — que la seconde bande
   retombe sur la premiere. Le pas y tombait a 132 contre 172, et
   une seule colonne sur trois coincidait.
   La marge basse manquait : en 01 la bande finit sa section, donc
   rien ne la suivait jamais. Des qu'un paragraphe vient dessous,
   il se collait — 0px mesure, contre 20px entre deux .lp-prose.
   1.25rem est ce 20px, soit le margin-bottom de .lp-prose : la
   bande prend le rythme de la prose au lieu d'en inventer un.
   :not(:last-child) pour que le cas de la section 01, ou la bande
   est le dernier element, ne gagne pas une marge dont il n'a pas
   besoin. */
.app-grid--3 { grid-template-columns: repeat(3, 72px); max-width: 416px; }
@media (max-width: 768px) { .app-grid--3 { max-width: 336px; } }
/* Cette media query est APRES la regle ci-dessus, et non dans le bloc
   mobile plus haut : .app-grid--3 et .app-grid ont la meme specificite,
   donc c'est la derniere declaree qui gagne. Posee plus haut, elle etait
   morte — mesure : la bande de trois restait a 416px a 768 et 390px. */
.app-grid:not(:last-child) { margin-bottom: 1.25rem; }
/* Meme principe a trois colonnes. max-width: 336px et non 760 : sur
   la largeur pleine d'une tablette, space-between poserait 252px de
   blanc entre deux tuiles et la bande cesserait de se lire comme une
   bande. 336 = 3 tuiles + 2 fois 60px. En dessous de 384px de
   viewport, space-between resserre tout seul — mesure a 390, 360 et
   320 : pas de 132, 120 et 100, aucun debordement horizontal. */

/* ── B. Enumerations — article 1 ───────────────────────────
   UNE ENUMERATION NE SE MET PAS DANS UN CADRE.

   Corollaire de la regle v1.4 de ce fichier : .lp-note emphase
   un ENONCE, et lui donne la mesure de la prose pour qu'il se
   lise comme une phrase. Une liste d'items n'est pas un enonce.
   L'encadrer ne l'emphase pas, elle la transforme en bloc a
   traverser : le lecteur ne lit plus les items, il saute le
   cadre. L'amorce reste en .lp-prose, la liste vit a plat.

   Le marqueur est repris a l'identique de .pricing-features
   — meme glyphe, meme chasse, meme corps, meme accent. Deux
   composants, un seul geste.

   v3.12, 14.09 : le troisieme marqueur est aligne. .doc-marker
   passe du tiret a la fleche sur ses 48 items, et le site n'a plus
   qu'un marqueur de liste. Arbitre sur maquette, les trois
   composants cote a cote : la fleche est deja le marqueur de
   vatflow sur .lp-list et .pricing-features, donc le marqueur du
   groupe ; le tiret ne servait qu'a .docs-grid.
   Le glyphe de .doc-marker reste ecrit dans le HTML, la ou les
   deux autres sont generes en CSS. Le passer en ::before ferait
   un seul point de verite, mais base.css est partage avec vatflow
   dont les pages portent peut-etre le meme <span> : retirer la
   regle le casserait. Incoherence de mecanisme assumee, et la
   raison est ici pour qu'on ne la reouvre pas sans verifier
   vatflow d'abord.  */

.lp-list { list-style: none; max-width: 65ch; }
.lp-list li {
  display: flex; align-items: flex-start; gap: 0.55rem;
  font-size: 1rem; line-height: 1.55; color: var(--ink);
  margin-bottom: 0.6rem;
}
.lp-list li:last-child { margin-bottom: 0; }
.lp-list li::before {
  content: '→'; font-family: var(--font-mono); font-size: 0.75rem;
  color: var(--accent); flex-shrink: 0; margin-top: 0.1em;
}
/* .lp-list n'est pas un conteneur flex, contrairement a
   .pricing-features : column-count est ignore sur un flex, et
   le modificateur --2col en depend. L'espacement passe donc par
   margin-bottom sur le li, pas par gap. Meme rendu, autre voie. */

/* Modificateur deux colonnes. Flux VERTICAL : column-count
   remplit la premiere colonne avant la seconde, donc la lecture
   descend puis repart en haut — c'est l'ordre d'une liste, pas
   celui d'un tableau. Reserve aux listes de PLUS DE CINQ items :
   en dessous, deux colonnes font deux tas de trois, et le regard
   cherche une opposition qui n'existe pas. */
.lp-list--2col { max-width: 760px; column-count: 2; column-gap: 2.5rem; }
.lp-list--2col li { break-inside: avoid; }

@media (max-width: 768px) {
  .lp-list--2col { column-count: 1; max-width: 65ch; }
}

/* =========================================================
   v3.13 — La marque Odoo sur le site

   Fichier officiel tel que fourni par Odoo, assets/logo/odoo_logo.svg.
   Il est pose INLINE dans le HTML, et non en <img>, pour une seule
   raison : le fichier officiel porte 60 % de vide autour du dessin
   — encre reelle 621x196 dans un viewBox de 919x495. En <img> a
   hauteur de nav, le dessin visible tomberait a 11px. Le viewBox est
   donc recadre sur l'encre, 149 150 621 196. Les traces et les deux
   couleurs ne sont pas touches : la regle d'Odoo dit « Don't recreate
   the logo » et « only in the colors provided », et un recadrage de
   cadre n'est ni l'un ni l'autre. Hauteur minimale imposee : 20px —
   c'est exactement la hauteur dans la nav.

   PAS DE SURVOL. Les liens de la nav passent de --muted a --ink au
   survol ; celui-ci ne bouge pas. La couleur est celle d'une marque
   tierce, elle ne se module pas pour signaler un etat.

   Le badge « Community Member » a ete essaye et ecarte le 14.09 :
   sa deuxieme ligne occupe 23px sur les 300 du fichier, soit 7,7 %
   de sa hauteur. Il lui faudrait 120px de haut pour se lire, la nav
   en offre 56. Mesure sur maquette, cinq tailles cote a cote.
   ========================================================= */
.nav-odoo   { display: flex; align-items: center; line-height: 0; }
.facts-odoo { display: block; margin-left: auto; line-height: 0; }
/* block et non inline-block : en inline, la marque s'assoit sur la ligne
   de base du <dd>, dont la fonte fantome ajoute 7,6px sous elle — le logo
   se retrouvait a 13,6px du haut de la rangee et 21,2px du bas. En block,
   le <dd> n'a plus de contexte de ligne et sa hauteur est celle du dessin.
   margin-left: auto conserve l'alignement a droite que donnait le
   text-align de .facts-row dd. */
.facts-row:has(.facts-odoo) { align-items: center; }
/* .facts-row aligne ses deux colonnes sur la ligne de base, ce qui suppose
   du texte des deux cotes. Avec un dessin a droite, le <dd> n'a plus de
   ligne de base utile et le logo se posait a 13,6px du haut pour 18,5px du
   bas. Centre, la rangee retrouve ses 13,6px de part et d'autre — la valeur
   de son propre padding. :has() est deja employe plus haut dans ce fichier. */