/* mimoslabs.com — une seule feuille, sans dépendance.

   La palette, les polices et le monogramme sont ceux du site d'origine
   (piste A, « Arches ») : papier, sable, encre, pierre, or ; Jost et IBM Plex Mono.

   Une seule structure pour toutes les pages : la RANGÉE. Un repère à gauche
   (une étiquette en capitales, à chasse fixe), le contenu à droite ; sur un
   téléphone, l'un au-dessus de l'autre. Chaque rangée s'ouvre sur un filet de
   2 px, sauf la première de la page. Les composants qui vont dedans sont les
   mêmes partout : carte, points numérotés, liste à puces, définitions,
   capture, questions. */

@font-face {
  font-family: "Jost";
  src: url("polices/jost-400-700.woff2") format("woff2");
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "IBM Plex Mono";
  src: url("polices/ibm-plex-mono-400.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "IBM Plex Mono";
  src: url("polices/ibm-plex-mono-500.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

/* ── Les deux thèmes ─────────────────────────────────────────────────────── */
/* Contrastes mesurés (WCAG) : pierre sur papier 4,7:1 ; commentaire sur sable
   5,4:1 ; or-texte sur papier 5:1. En clair, l'or (#a9761a) ne porte jamais
   de petit texte : il souligne, il ponctue. */
:root {
  --papier: #f3f1ec;
  --sable: #e4ddcf;
  --encre: #121311;
  --pierre: #6f6b62;
  --or: #a9761a;
  --or-texte: #8a5f12;
  --commentaire: #5a564e;
  --filet: rgba(18, 19, 17, 0.16);
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="clair"]) {
    --papier: #121311;
    --sable: #1e1c18;
    --encre: #f3f1ec;
    --pierre: #a39e93;
    --or: #d4a24a;
    --or-texte: #d4a24a;
    --commentaire: #a39e93;
    --filet: rgba(243, 241, 236, 0.18);
    color-scheme: dark;
  }
}
:root[data-theme="sombre"] {
  --papier: #121311;
  --sable: #1e1c18;
  --encre: #f3f1ec;
  --pierre: #a39e93;
  --or: #d4a24a;
  --or-texte: #d4a24a;
  --commentaire: #a39e93;
  --filet: rgba(243, 241, 236, 0.18);
  color-scheme: dark;
}

/* ── Les rôles, l'échelle, les mesures ───────────────────────────────────── */
:root {
  /* Le texte secondaire : pierre sur le papier, commentaire sur le sable (une
     carte redéfinit --doux). --autre est « l'autre fond » : sable sur le
     papier, papier sur le sable. */
  --doux: var(--pierre);
  --autre: var(--sable);

  --sans: "Jost", "Futura", "Avenir Next", system-ui, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;

  /* L'échelle des tailles. */
  --t-titre: clamp(40px, 5.6vw, 84px);
  --t-intertitre: clamp(28px, 3.3vw, 46px);
  --t-sous-titre: clamp(20px, 1.7vw, 24px);
  --t-chapeau: clamp(18px, 1.55vw, 21px);
  --t-corps: 17px;
  --t-petit: 15px;

  /* Les mesures : la page, sa marge, la colonne des repères, les écarts. */
  --largeur: 1240px;
  --marge: clamp(16px, 4vw, 56px);
  --colonne: clamp(168px, 19vw, 252px);
  --gouttiere: clamp(20px, 3vw, 48px);
  --respiration: clamp(56px, 8vw, 112px);
  --ecart: clamp(24px, 3vw, 40px);
  --rayon: 20px;
}

/* ── La base ─────────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html {
  background: var(--papier);
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 20px;
}
body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--papier);
  color: var(--encre);
  font-family: var(--sans);
  font-size: var(--t-corps);
  line-height: 1.6;
  transition: background-color 0.25s, color 0.25s;
}
main { flex: 1 0 auto; }
h1, h2, h3, p, ul, ol, dl, dd, figure, blockquote, address { margin: 0; }
ul, ol { padding: 0; }
address { font-style: normal; }
img, svg { display: block; max-width: 100%; }
img { height: auto; }
strong, b { font-weight: 600; }
a { color: inherit; text-decoration-color: var(--or); text-decoration-thickness: 1.5px; text-underline-offset: 4px; }
a:hover { text-decoration-color: currentColor; }
:focus-visible { outline: 2px solid var(--encre); outline-offset: 3px; border-radius: 4px; }
[hidden] { display: none !important; }
code, kbd { font-family: var(--mono); font-size: 0.88em; overflow-wrap: anywhere; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  body { transition: none; }
}

/* Ce qu'un lecteur d'écran lit et qu'on ne voit pas. */
.vh {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.aller-au-contenu {
  position: absolute; left: 12px; top: -64px; z-index: 10;
  background: var(--encre); color: var(--papier); padding: 10px 16px; border-radius: 999px;
  font-size: 15px; font-weight: 500; text-decoration: none;
}
.aller-au-contenu:focus { top: 12px; }

/* ── La page, et la rangée ───────────────────────────────────────────────── */
.conteneur {
  width: 100%;
  max-width: calc(var(--largeur) + 2 * var(--marge));
  margin-inline: auto;
  padding-inline: var(--marge);
}
main.conteneur { padding-top: clamp(28px, 5vw, 72px); }
main.conteneur > * + * { margin-top: var(--respiration); }

.rangee {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 16px var(--gouttiere);
}
.rangee--filet { border-top: 2px solid var(--encre); padding-top: 22px; }
.rangee__repere { display: grid; gap: 12px; align-content: start; justify-items: start; }
.corps { min-width: 0; display: grid; gap: var(--ecart); align-content: start; }
@media (min-width: 860px) {
  .rangee { grid-template-columns: var(--colonne) minmax(0, 1fr); }
  .rangee > .corps { grid-column: 2; }
}

/* Une suite de rangées serrées (le manifeste, le journal) : un filet chacune,
   pas de grand blanc entre elles. */
.suite { display: grid; }
.suite > .rangee { padding-block: 22px clamp(28px, 3.4vw, 44px); }
.suite > .rangee:last-child { padding-bottom: 0; }

/* L'en-tête d'une rangée : son titre, et ce qui le précise. */
.tete { display: grid; gap: 18px; max-width: 50rem; }

/* ── Les textes ──────────────────────────────────────────────────────────── */
.repere {
  font-family: var(--mono); font-size: 12px; line-height: 1.5;
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--doux);
}
.titre {
  font-size: var(--t-titre); line-height: 0.98; font-weight: 700; letter-spacing: -0.035em;
  text-wrap: balance;
}
.titre--accueil { font-size: clamp(46px, 7.6vw, 116px); line-height: 0.94; }
.intertitre {
  font-size: var(--t-intertitre); line-height: 1.06; font-weight: 700; letter-spacing: -0.025em;
  text-wrap: balance;
}
.sous-titre { font-size: var(--t-sous-titre); line-height: 1.2; font-weight: 700; letter-spacing: -0.015em; }
.chapeau { max-width: 44ch; font-size: var(--t-chapeau); line-height: 1.5; color: var(--doux); text-wrap: pretty; }
.chapeau strong, .chapeau b { color: var(--encre); font-weight: 500; }
.texte { max-width: 64ch; }
.texte > * + * { margin-top: 1em; }
.texte p, .texte li { text-wrap: pretty; }
.texte ul { list-style: none; display: grid; gap: 10px; }
.texte ul > li { position: relative; padding-left: 22px; }
.texte ul > li::before {
  content: ""; position: absolute; left: 2px; top: 0.66em;
  width: 8px; height: 8px; border-radius: 999px; background: var(--or);
}
.petit { font-size: var(--t-petit); line-height: 1.5; }
.doux { color: var(--doux); }
.mono { font-family: var(--mono); }
.fleche { font-family: var(--mono); font-weight: 400; }

.etiquette {
  display: inline-block; font-size: 13px; font-weight: 500; line-height: 1.4;
  border: 1.5px solid currentColor; border-radius: 999px; padding: 3px 12px;
}
.puce { display: inline-block; flex: none; width: 8px; height: 8px; border-radius: 999px; background: var(--or); }

/* Une commande à taper : une ligne reste une ligne ; trop longue pour l'écran,
   elle défile dans son cadre (et le cadre prend le focus clavier). */
.commande {
  margin: 0; padding: 12px 16px; border-radius: 12px; max-width: 100%;
  background: var(--autre); color: var(--encre);
  font-family: var(--mono); font-size: 14px; line-height: 1.6;
  white-space: pre; overflow-x: auto;
}
.commande code { font-size: inherit; overflow-wrap: normal; }

/* ── Les boutons et les liens ────────────────────────────────────────────── */
.actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 12px; }
.bouton {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 46px; padding: 0 22px; border: 0; border-radius: 999px;
  font: inherit; font-size: 15px; font-weight: 500; line-height: 1.15; text-align: center;
  text-decoration: none; cursor: pointer; color: inherit; background: transparent;
}
.bouton--plein { background: var(--encre); color: var(--papier); }
.bouton--plein:hover { background: var(--pierre); }
.bouton--filet { box-shadow: inset 0 0 0 2px var(--encre); }
.bouton--filet:hover { background: var(--autre); }
.lien {
  font-weight: 500;
  text-decoration: underline; text-decoration-thickness: 2px; text-decoration-color: var(--or); text-underline-offset: 6px;
}
.lien:hover { text-decoration-color: currentColor; }

/* ── Le monogramme ───────────────────────────────────────────────────────── */
.monogramme .trait { fill: none; stroke: currentColor; }
.monogramme .rainure { fill: none; stroke: var(--papier); }
.monogramme .point { fill: var(--or); }

/* ── L'en-tête ───────────────────────────────────────────────────────────── */
.entete { padding-block: 18px 6px; }
.entete__ligne {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  grid-template-areas: "marque outils" "nav nav";
  align-items: center;
  gap: 10px 16px;
}
.marque {
  justify-self: start;
  display: inline-flex; align-items: center; gap: 10px;
  font-size: 19px; font-weight: 600; letter-spacing: -0.01em; line-height: 1; text-decoration: none;
}
.marque .monogramme { width: 36px; height: 22.5px; }
.entete__ligne > .marque { grid-area: marque; }
.entete__nav { grid-area: nav; }
.entete__liens { display: flex; flex-wrap: wrap; gap: 0 clamp(18px, 2.4vw, 32px); list-style: none; font-size: 15px; }
.entete__liens a {
  display: inline-block; padding-block: 8px;
  text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 6px;
  text-decoration-color: transparent;
}
.entete__liens a:hover { text-decoration-color: var(--pierre); }
.entete__liens a[aria-current="page"] { text-decoration-color: var(--or); }
.entete__outils { grid-area: outils; justify-self: end; display: flex; align-items: center; gap: 6px; }
.compte {
  display: inline-flex; align-items: center; min-height: 36px; padding: 0 14px;
  border: 1.5px solid currentColor; border-radius: 999px;
  font-size: 14px; font-weight: 500; line-height: 1; text-decoration: none; white-space: nowrap;
}
.compte:hover { background: var(--autre); }
.theme {
  display: inline-flex; align-items: center; gap: 7px; min-height: 36px; padding: 0 10px;
  font: inherit; font-size: 14px; font-weight: 500; line-height: 1; color: inherit;
  background: transparent; border: 0; border-radius: 999px; cursor: pointer;
}
.theme:hover { background: var(--autre); }
.theme svg { width: 16px; height: 16px; }
.theme circle { fill: none; stroke: currentColor; stroke-width: 1.5; }
.theme path { fill: currentColor; }
@media (max-width: 419px) {
  .theme [data-libelle] {
    position: absolute; width: 1px; height: 1px; margin: -1px;
    overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
  }
}
@media (min-width: 860px) {
  .entete { padding-block: 24px 8px; }
  .entete__ligne {
    grid-template-columns: var(--colonne) minmax(0, 1fr) auto;
    grid-template-areas: "marque nav outils";
    column-gap: var(--gouttiere);
  }
}

/* ── Le pied ─────────────────────────────────────────────────────────────── */
.pied { margin-top: var(--respiration); padding-bottom: 32px; }
.pied__haut {
  border-top: 2px solid var(--encre); padding-top: 24px;
  display: grid; grid-template-columns: minmax(0, 1fr); gap: 28px var(--gouttiere);
}
.pied__marque { display: grid; gap: 12px; align-content: start; justify-items: start; }
.pied__devise { font-family: var(--mono); font-size: 12px; letter-spacing: 0.06em; color: var(--doux); }
.pied__liens { display: grid; gap: 24px var(--gouttiere); grid-template-columns: repeat(auto-fit, minmax(min(100%, 150px), 1fr)); }
.pied__liens ul { list-style: none; display: grid; gap: 2px; align-content: start; font-size: var(--t-petit); }
.pied__liens a { display: inline-block; padding-block: 3px; text-decoration-color: transparent; }
.pied__liens a:hover, .pied__liens a[aria-current="page"] { text-decoration-color: var(--or); }
.pied__bas {
  margin-top: 28px; padding-top: 14px; border-top: 1.5px solid var(--filet);
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 24px;
  font-size: 14px; color: var(--doux);
}
@media (min-width: 860px) {
  .pied__haut { grid-template-columns: var(--colonne) minmax(0, 1fr); }
}

/* ── Les composants ──────────────────────────────────────────────────────── */

/* La carte : un fond de sable, des coins ronds. */
.carte {
  --doux: var(--commentaire);
  --autre: var(--papier);
  background: var(--sable); border-radius: var(--rayon);
  padding: clamp(20px, 2.4vw, 30px);
  display: grid; gap: 12px; align-content: start;
}
.grille { display: grid; gap: clamp(12px, 1.6vw, 18px); grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr)); }
.grille--large { grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); }

/* Les points : un numéro, un titre, une phrase. Les trois règles du labo, ce
   qui distingue Bank. */
.points {
  list-style: none; display: grid; gap: 28px var(--gouttiere);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr));
}
.point { display: grid; gap: 10px; align-content: start; padding-top: 14px; border-top: 1.5px solid var(--filet); }
.point__numero { font-family: var(--mono); font-size: 13px; color: var(--or-texte); }
.point p { max-width: 42ch; color: var(--doux); text-wrap: pretty; }

/* La liste à puces d'or. */
.puces { list-style: none; display: grid; border-top: 1.5px solid var(--filet); max-width: 64ch; }
.puces > li { display: flex; gap: 14px; padding: 12px 0; border-bottom: 1.5px solid var(--filet); }
.puces > li::before {
  content: ""; flex: none; width: 8px; height: 8px; margin-top: 0.62em;
  border-radius: 999px; background: var(--or);
}
.puces > li > span { min-width: 0; }

/* Les définitions : un terme à gauche, ce qu'il faut en savoir à droite. */
.definitions { display: grid; border-bottom: 1.5px solid var(--filet); }
.definitions > div { display: grid; gap: 8px var(--gouttiere); padding: 18px 0; border-top: 1.5px solid var(--filet); }
.definitions dt { font-size: 18px; font-weight: 600; line-height: 1.35; }
.definitions dd { max-width: 62ch; min-width: 0; }
.definitions dd > * + * { margin-top: 0.8em; }
@media (min-width: 720px) {
  .definitions > div { grid-template-columns: minmax(150px, 14rem) minmax(0, 1fr); }
}

/* Une capture d'écran, et sa légende. */
.capture { display: grid; gap: 10px; align-content: start; }
.capture img { width: 100%; border-radius: 14px; border: 1px solid var(--filet); background: var(--sable); }
.capture figcaption { font-size: 14px; line-height: 1.5; color: var(--doux); max-width: 64ch; }

/* Les questions. */
.questions { display: grid; border-bottom: 1.5px solid var(--filet); max-width: 52rem; }
.questions details { border-top: 1.5px solid var(--filet); }
.questions summary {
  display: flex; justify-content: space-between; align-items: baseline; gap: 16px;
  padding: 16px 0; cursor: pointer; list-style: none;
  font-size: 19px; font-weight: 600; line-height: 1.35;
}
.questions summary::-webkit-details-marker { display: none; }
/* Le signe est un dessin : « / "" » lui ôte son nom pour un lecteur d'écran
   (la première déclaration sert aux navigateurs qui ne la comprennent pas). */
.questions summary::after { content: "+"; content: "+" / ""; flex: none; font-family: var(--mono); font-weight: 400; color: var(--or-texte); }
.questions details[open] > summary::after { content: "−"; content: "−" / ""; }
.questions summary:hover { text-decoration: underline; text-decoration-color: var(--or); text-decoration-thickness: 2px; text-underline-offset: 6px; }
.questions .texte { padding-bottom: 20px; }

/* Ce qui reste à trancher avant publication : [À REMPLIR …], [À TRANCHER …],
   [PROVISOIRE …]. Un trou se voit : un cadre en tirets d'or, en chasse fixe.
   tests/verifier.py --avant-publication refuse le site tant qu'il en reste un. */
.trou {
  font-family: var(--mono); font-size: 0.84em; line-height: 1.55; color: var(--encre);
  background: var(--autre); border: 1.5px dashed var(--or); border-radius: 6px; padding: 1px 6px;
  -webkit-box-decoration-break: clone; box-decoration-break: clone;
}
p.trou, dd.trou, div.trou, li.trou { display: block; padding: 12px 14px; max-width: 64ch; }

/* Une annonce : ce qui a changé, à lire avant le reste. */
.annonce { border-left: 4px solid var(--encre); padding: 14px 18px; background: var(--autre); max-width: 64ch; }

/* ── L'accueil ───────────────────────────────────────────────────────────── */
.heros__corps { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 36px clamp(28px, 4vw, 64px); }
.heros__texte { flex: 1.4 1 360px; min-width: 0; display: grid; gap: 26px; justify-items: start; }
.heros__texte .chapeau { max-width: 36ch; }
.heros__monogramme { flex: 1 1 220px; width: 100%; max-width: 400px; min-width: 0; height: auto; aspect-ratio: 48 / 30; }
@media (max-width: 599px) { .heros__monogramme { max-width: 220px; } }

.produit { display: grid; gap: var(--ecart); align-items: start; }
.produit__texte { display: grid; gap: 22px; justify-items: start; align-content: start; }
.produit__nom { font-size: clamp(56px, 7vw, 104px); line-height: 0.9; font-weight: 700; letter-spacing: -0.04em; }
.produit__devise { max-width: 24ch; font-size: var(--t-sous-titre); line-height: 1.25; font-weight: 600; letter-spacing: -0.015em; }
@media (min-width: 1080px) {
  .produit { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
}

.faits-cles { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; }
.faits-cles li { font-size: 14px; font-weight: 500; line-height: 1.3; border: 1.5px solid var(--filet); border-radius: 999px; padding: 6px 12px; }

.derniere-note { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px 28px; text-decoration: none; }
.derniere-note:hover .derniere-note__titre { text-decoration: underline; text-decoration-color: var(--or); text-decoration-thickness: 3px; text-underline-offset: 8px; }
.derniere-note__date { font-family: var(--mono); font-size: 14px; color: var(--doux); min-width: 64px; }
.derniere-note__titre { flex: 1 1 260px; font-size: var(--t-intertitre); line-height: 1.06; font-weight: 700; letter-spacing: -0.025em; }
.derniere-note__lire { font-size: var(--t-petit); font-weight: 500; }

/* ── Les pages intérieures ───────────────────────────────────────────────── */
/* Une entrée du manifeste ou du journal : le titre et le texte côte à côte
   quand il y a la place. */
.entree { display: grid; gap: 12px var(--gouttiere); align-items: baseline; }
.entree h2 { font-size: clamp(26px, 2.8vw, 40px); line-height: 1.06; font-weight: 700; letter-spacing: -0.025em; text-wrap: balance; }
.entree p { max-width: 46ch; font-size: 18px; line-height: 1.55; text-wrap: pretty; }
@media (min-width: 1080px) { .entree { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }

.conclusion { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 20px 32px; }
.conclusion p { max-width: 30ch; font-size: clamp(22px, 2.4vw, 34px); line-height: 1.15; font-weight: 700; letter-spacing: -0.02em; }

.adresse {
  font-size: clamp(26px, 3.6vw, 56px); line-height: 1.15; font-weight: 700; letter-spacing: -0.03em;
  text-decoration: underline; text-decoration-thickness: 3px; text-decoration-color: var(--or); text-underline-offset: 10px;
  overflow-wrap: anywhere;
}
.adresse:hover { text-decoration-color: currentColor; }

/* Un texte long (les mentions légales) : des intertitres sur filet. */
.document { display: grid; gap: 14px; max-width: 64ch; }
.document h2 {
  margin-top: 28px; padding-top: 16px; border-top: 1.5px solid var(--filet);
  font-size: 22px; line-height: 1.25; font-weight: 700; letter-spacing: -0.015em;
}
.document h2:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
.document .definitions { border-bottom: 0; }

/* ── Bank ────────────────────────────────────────────────────────────────── */
.bank-heros { display: grid; gap: var(--ecart); align-items: start; }
.bank-heros__texte { display: grid; gap: 24px; justify-items: start; align-content: start; }
@media (min-width: 1080px) { .bank-heros { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); } }

/* Un fait, tel que la banque le garde : l'exemple de l'en-tête. */
.fiche { gap: 16px; }
.fiche figcaption { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 12px; }
.fiche__fait { font-size: clamp(20px, 1.9vw, 24px); line-height: 1.3; font-weight: 600; letter-spacing: -0.015em; }
.fiche__champs { display: grid; border-top: 1.5px solid var(--filet); }
.fiche__champs > div { display: grid; grid-template-columns: 5.5rem minmax(0, 1fr); gap: 12px; padding: 9px 0; border-bottom: 1.5px solid var(--filet); }
.fiche__champs dt { font-family: var(--mono); font-size: 12px; line-height: 1.9; letter-spacing: 0.08em; text-transform: uppercase; color: var(--doux); }
.fiche__champs dd { font-size: var(--t-petit); line-height: 1.5; }
/* Le niveau de preuve : une pastille cerclée d'or. Le texte reste à l'encre :
   l'or sur le sable ne tient pas 4,5:1 en clair. */
.fiche__niveau {
  display: inline-block; margin-right: 4px; padding: 0 7px; border: 1.5px solid var(--or); border-radius: 999px;
  font-family: var(--mono); font-size: 12.5px; font-weight: 500; line-height: 1.5; color: var(--encre);
}

/* Le sommaire de la page : juste sous l'en-tête, sur un filet fin. */
main.conteneur > .sommaire { margin-top: clamp(36px, 5vw, 64px); }
.sommaire { border-top: 1.5px solid var(--filet); padding-top: 14px; }
.sommaire ul { list-style: none; display: flex; flex-wrap: wrap; gap: 2px 22px; font-size: var(--t-petit); }
.sommaire a { display: inline-block; padding-block: 5px; text-decoration-thickness: 2px; text-underline-offset: 5px; }

/* Un écran du produit : ce qu'il montre, puis sa capture. */
.ecran { display: grid; gap: 18px; }

/* Les systèmes (Windows, Linux, macOS) : des définitions, au titre plus grand. */
.systemes dt { font-size: var(--t-sous-titre); line-height: 1.2; font-weight: 700; letter-spacing: -0.015em; }

/* L'offre : les tiers, les éditions, les prix. Les blocs entre repères
   « offre:… » sont recopiés depuis bank/offre.json par outils/offre.py. */
.tiers { list-style: none; display: grid; gap: 12px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 600px) { .tiers { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.tiers .carte { height: 100%; }
.tier-nom { font-size: 22px; line-height: 1.15; font-weight: 700; letter-spacing: -0.015em; }

.editions { display: grid; gap: 12px var(--gouttiere); grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); }
.editions > div { display: grid; gap: 10px; align-content: start; padding-top: 12px; border-top: 2px solid var(--encre); }
.editions dt { font-family: var(--mono); font-size: 15px; font-weight: 500; }

.offres { display: grid; gap: var(--ecart); }
.offre { display: grid; gap: 14px; align-content: start; }
.offre__tete { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 14px 28px; }
.offre__nom { font-size: clamp(24px, 2.4vw, 32px); line-height: 1.1; font-weight: 700; letter-spacing: -0.02em; }
.offre > p { max-width: 60ch; }
.offre .prix { margin-top: 6px; }

.compteur { display: grid; gap: 8px; width: min(100%, 260px); }
.compteur p { font-size: var(--t-petit); line-height: 1.3; }
.compteur strong { margin-right: 4px; font-size: 30px; font-weight: 700; letter-spacing: -0.02em; }
.compteur svg { width: 100%; height: 6px; }
.compteur__piste { fill: var(--filet); }
.compteur__plein { fill: var(--or); }

.prix { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.prix th, .prix td { text-align: left; vertical-align: top; padding: 14px 12px 14px 0; border-top: 1.5px solid var(--filet); }
.prix th:last-child, .prix td:last-child { padding-right: 0; }
.prix thead th {
  padding-top: 0; border-top: 0;
  font-family: var(--mono); font-size: 12px; font-weight: 400; line-height: 1.5;
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--doux);
}
.prix tbody th { width: 34%; font-size: 17px; font-weight: 600; line-height: 1.3; }
.montant { display: block; font-size: clamp(21px, 2vw, 26px); line-height: 1.1; font-weight: 700; letter-spacing: -0.02em; }
/* Sous un prix founder, le prix public qui le suivra : « puis 59 € à la sortie
   publique ». Il se dit, il ne se barre pas — un prix barré annonce une
   réduction (code de la consommation, art. L112-1-1), et le prix public n'a
   jamais été pratiqué. tests/verifier.py refuse <s>, <del> et line-through. */
.ensuite { display: block; margin-top: 4px; font-size: 14px; line-height: 1.35; color: var(--doux); }
.achat { display: block; margin-top: 8px; }
.achat .bouton { min-height: 36px; padding: 0 16px; font-size: 14px; }
.bientot {
  display: inline-flex; align-items: center; min-height: 30px; padding: 0 12px;
  border: 1.5px dashed currentColor; border-radius: 999px;
  font-size: 13.5px; font-weight: 500; color: var(--doux);
}
@media (max-width: 479px) {
  .prix th, .prix td { padding-right: 8px; }
  .prix tbody th { font-size: 15.5px; }
}