/* Crypto Masternode Monitor — site public (GitLab Pages). Feuille unique.
 *
 * Une page ne porte qu'une langue (le générateur produit un fichier par langue),
 * il n'y a donc plus de règles de masquage `lang-XX` comme dans la première
 * version du site.
 *
 * Palette dérivée de celle de l'application : vert d'accent, fond neutre,
 * thème clair/sombre. Le sélecteur manuel (`data-theme`) prime toujours sur la
 * préférence système, dans les deux sens. */

:root {
  --accent: #12a85b;
  --accent-strong: #0d8f4c;
  --bg: #f4f7f5;
  --panel: #ffffff;
  --panel-2: #eef3f0;
  --border: #dae6df;
  --text: #12241b;
  --muted: #5a6f64;
  --code-bg: #eef3f0;
  --warn: #b2600a;
  --warn-bg: #fff6e9;
  --danger: #b3261e;
  --danger-bg: #fdf0ef;
  --shadow: 0 1px 2px rgba(16, 40, 28, 0.06), 0 8px 24px rgba(16, 40, 28, 0.06);
  --radius: 14px;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #08110c;
    --panel: #10221a;
    --panel-2: #0d1c15;
    --border: #1f3a2c;
    --text: #dfeee6;
    --muted: #93b0a2;
    --code-bg: #0c1a13;
    --warn: #f0b567;
    --warn-bg: #1e1708;
    --danger: #f2938c;
    --danger-bg: #22100e;
    --shadow: none;
  }
}

:root[data-theme='light'] {
  --bg: #f4f7f5; --panel: #ffffff; --panel-2: #eef3f0; --border: #dae6df;
  --text: #12241b; --muted: #5a6f64; --code-bg: #eef3f0;
  --warn: #b2600a; --warn-bg: #fff6e9; --danger: #b3261e; --danger-bg: #fdf0ef;
  --shadow: 0 1px 2px rgba(16, 40, 28, .06), 0 8px 24px rgba(16, 40, 28, .06);
}
:root[data-theme='dark'] {
  --bg: #08110c; --panel: #10221a; --panel-2: #0d1c15; --border: #1f3a2c;
  --text: #dfeee6; --muted: #93b0a2; --code-bg: #0c1a13;
  --warn: #f0b567; --warn-bg: #1e1708; --danger: #f2938c; --danger-bg: #22100e;
  --shadow: none;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { transition: none !important; }
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Ubuntu,
    Cantarell, 'Helvetica Neue', Arial, sans-serif;
  line-height: 1.65;
  font-size: 17px;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }
a:focus-visible,
button:focus-visible,
select:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; }

img { max-width: 100%; height: auto; }

.wrap { max-width: 860px; margin: 0 auto; padding: 0 20px; }

/* Lien d'évitement : masqué tant qu'il n'a pas le focus clavier. */
.skip {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--panel); color: var(--text);
  padding: 10px 16px; border: 1px solid var(--accent); border-radius: 0 0 10px 0;
}
.skip:focus { left: 0; }

/* ---------------------------------------------------------- barre du haut */

.topbar {
  position: sticky; top: 0; z-index: 10;
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter: saturate(1.4) blur(8px);
  border-bottom: 1px solid var(--border);
}
.topbar-inner {
  display: flex; align-items: center; gap: 12px;
  min-height: 60px; padding-top: 8px; padding-bottom: 8px;
  flex-wrap: wrap;
}
.brand { display: inline-flex; align-items: center; gap: 10px; font-weight: 650; color: var(--text); }
.brand:hover { text-decoration: none; }
.brand img { width: 32px; height: 32px; border-radius: 8px; display: block; }
.brand small { display: block; font-weight: 500; font-size: 12px; color: var(--muted); letter-spacing: .02em; }

/* Navigation : elle défile horizontalement plutôt que de passer à la ligne —
   sur un téléphone, six entrées sur trois lignes repousseraient le contenu
   sous le pli à chaque page. */
.mainnav {
  order: 3; flex: 1 0 100%;
  display: flex; gap: 4px;
  overflow-x: auto; scrollbar-width: none;
  margin: 0 -20px; padding: 0 20px 2px;
}
.mainnav::-webkit-scrollbar { display: none; }
.mainnav a {
  white-space: nowrap; color: var(--muted);
  font-size: 14px; font-weight: 600;
  padding: 6px 10px; border-radius: 8px;
}
.mainnav a:hover { text-decoration: none; color: var(--text); background: var(--panel-2); }
.mainnav a.is-current { color: var(--accent); background: color-mix(in srgb, var(--accent) 12%, transparent); }

.topbar-actions { margin-left: auto; display: flex; align-items: center; gap: 8px; }

.theme-toggle {
  appearance: none; cursor: pointer;
  background: var(--panel); color: var(--text);
  border: 1px solid var(--border); border-radius: 10px;
  width: 38px; height: 38px; font-size: 16px; line-height: 1;
  display: inline-flex; align-items: center; justify-content: center;
}
.theme-toggle:hover { border-color: var(--accent); }

.lang-select {
  appearance: none; cursor: pointer;
  background: var(--panel); color: var(--text);
  border: 1px solid var(--border); border-radius: 10px;
  height: 38px; min-width: 44px; max-width: 140px; padding: 0 26px 0 10px;
  font-size: 13px; font-weight: 650; line-height: 1;
  /* Flèche dessinée en CSS : sa teinte suit --muted, donc pas d'image par thème. */
  background-image: linear-gradient(45deg, transparent 50%, var(--muted) 50%),
    linear-gradient(135deg, var(--muted) 50%, transparent 50%);
  background-position: right 12px top 50%, right 8px top 50%;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
}
.lang-select:hover { border-color: var(--accent); }

@media (min-width: 900px) {
  .mainnav { order: 0; flex: 1 1 auto; margin: 0; padding: 0; overflow: visible; }
  .topbar-actions { margin-left: 0; }
}

/* ------------------------------------------------------------- accueil */

.hero { padding: 56px 0 8px; text-align: center; }
.hero-inner { display: flex; flex-direction: column; align-items: center; }
.hero-logo { width: 88px; height: 88px; border-radius: 22px; box-shadow: var(--shadow); }
.hero h1 {
  font-size: clamp(30px, 5.4vw, 46px); line-height: 1.1;
  margin: 22px 0 12px; letter-spacing: -0.025em; text-wrap: balance; max-width: 16ch;
}
.hero .lead { font-size: 19px; color: var(--muted); margin: 0 0 26px; max-width: 58ch; text-wrap: pretty; }

.hero-tags { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin: 22px 0 0; padding: 0; }
.hero-tags span {
  font-size: 13px; font-weight: 600; color: var(--muted);
  background: var(--panel-2); border: 1px solid var(--border);
  border-radius: 999px; padding: 4px 12px;
}
.networks {
  margin: 18px 0 0; font-size: 14px; font-weight: 600; color: var(--accent);
  max-width: 60ch; line-height: 1.8;
}

/* Badges de telechargement.
 *
 * Ce sont les illustrations officielles des deux magasins, livrees dans les
 * sept langues (site/assets/badges/) : on ne les redessine pas, on ne les
 * recolore pas et on ne les deforme pas — les deux chartes de marque
 * l'interdisent, et c'est ce qui les rend reconnaissables d'un coup d'oeil. Le
 * generateur ecrit leurs dimensions dans le HTML : la taille ne depend donc
 * pas de cette feuille, comme pour les QR de la page de dons.
 *
 * L'ecart entre les badges vaut au moins le quart de leur hauteur (44 / 4 =
 * 11 px), l'espace de respiration exige par les deux chartes. Il est rendu ici
 * parce que le vide transparent qui l'assurait dans les PNG de Google a ete
 * retire pour que les deux illustrations s'alignent.
 *
 * L'etat « bientot » n'est pas un lien : il ne doit ni recevoir le focus ni
 * promettre une page qui n'existe pas. Il n'emprunte surtout pas le badge d'un
 * magasin — les deux chartes le reservent a une application reellement
 * publiee. */
.stores { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 11px 14px; }
.store-badge { display: inline-block; border-radius: 9px; transition: transform .12s ease; }
.store-badge img { display: block; height: 44px; width: auto; }
.store-badge:hover { transform: translateY(-2px); }
.store-badge:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }
.store-soon {
  display: inline-flex; flex-direction: column; justify-content: center;
  min-height: 44px; padding: 6px 18px; border-radius: 11px;
  background: var(--panel); color: var(--muted); border: 1px solid var(--border);
  font-weight: 650; font-size: 15px; line-height: 1.25; text-align: left; cursor: default;
}
.store-soon small { font-size: 11px; font-weight: 500; opacity: .85; }
@media (prefers-reduced-motion: reduce) {
  .store-badge { transition: none; }
  .store-badge:hover { transform: none; }
}

/* Captures : une colonne sur téléphone, trois ensuite. */
.shots { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin: 44px auto; }
.shots figure { margin: 0; }
.shots img {
  width: 100%; border-radius: 16px;
  border: 1px solid var(--border); box-shadow: var(--shadow); display: block;
}
@media (max-width: 620px) { .shots { grid-template-columns: 1fr; max-width: 340px; } }

.section-title { font-size: clamp(22px, 3.4vw, 28px); letter-spacing: -0.02em; margin: 56px 0 8px; text-wrap: balance; }
.section-lead { color: var(--muted); margin: 0 0 24px; max-width: 62ch; }

.features { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px; margin: 24px 0; }
.feature {
  padding: 20px; border-radius: var(--radius);
  background: var(--panel); border: 1px solid var(--border); box-shadow: var(--shadow);
}
.feature h3 { margin: 0 0 6px; font-size: 17px; }
.feature p { margin: 0; color: var(--muted); font-size: 15px; }

/* Bande « vie privée » : un aplat pleine largeur, pour marquer une pause
   visuelle entre deux blocs de cartes. */
.band {
  background: var(--panel-2);
  border-top: 1px solid var(--border); border-bottom: 1px solid var(--border);
  margin: 56px 0; padding: 8px 0 40px;
}
.band .section-title { margin-top: 40px; }
.band-note { color: var(--muted); font-size: 15px; margin: 18px 0 0; max-width: 62ch; }

.facts { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 24px 0 0; }
@media (max-width: 620px) { .facts { grid-template-columns: 1fr; } }
.fact {
  padding: 14px 16px; border-radius: 12px;
  background: var(--panel); border: 1px solid var(--border); font-size: 15px;
}
.fact b { color: var(--text); }

.steps { list-style: none; counter-reset: step; padding: 0; margin: 24px 0; display: grid; gap: 16px; }
.steps li {
  counter-increment: step; position: relative;
  padding: 18px 20px 18px 62px; border-radius: var(--radius);
  background: var(--panel); border: 1px solid var(--border);
}
.steps li::before {
  content: counter(step);
  position: absolute; left: 18px; top: 18px;
  width: 30px; height: 30px; border-radius: 50%;
  background: color-mix(in srgb, var(--accent) 15%, transparent);
  color: var(--accent); font-weight: 700; font-size: 15px;
  display: flex; align-items: center; justify-content: center;
}
.steps h3 { margin: 0 0 4px; font-size: 17px; }
.steps p { margin: 0; color: var(--muted); font-size: 15px; }

.btn {
  display: inline-block; padding: 11px 20px; border-radius: 11px;
  background: var(--accent); color: #fff; font-weight: 650; font-size: 15px;
}
.btn:hover { text-decoration: none; background: var(--accent-strong); }
.btn-quiet { background: var(--panel); color: var(--text); border: 1px solid var(--border); }
.btn-quiet:hover { background: var(--panel-2); border-color: var(--accent); }
.btn-lg { padding: 14px 26px; font-size: 16px; border-radius: 12px; }

.cta { text-align: center; margin: 64px auto 24px; }
.cta h2 { font-size: clamp(24px, 4vw, 32px); letter-spacing: -0.02em; margin: 0 0 10px; text-wrap: balance; }
.cta p { color: var(--muted); max-width: 52ch; margin: 0 auto 24px; }

/* Grille des réseaux (accueil et page Réseaux). */
.netgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 12px; margin: 24px 0; }
.netcard {
  display: flex; flex-direction: column; gap: 4px;
  padding: 14px 16px; border-radius: 12px;
  background: var(--panel); border: 1px solid var(--border); color: var(--text);
  border-left: 4px solid var(--accent);
}
.netcard:hover { text-decoration: none; box-shadow: var(--shadow); }
.netcard-name { font-weight: 650; font-size: 16px; }
.netcard-meta { font-size: 12px; color: var(--muted); display: flex; align-items: center; gap: 6px; }

.tag {
  display: inline-block; font-size: 11px; font-weight: 700; letter-spacing: .02em;
  padding: 1px 8px; border-radius: 999px;
  background: var(--panel-2); border: 1px solid var(--border); color: var(--muted);
}
.tag-ok { color: var(--accent); border-color: color-mix(in srgb, var(--accent) 45%, var(--border)); }
.tag-warn { color: var(--warn); border-color: color-mix(in srgb, var(--warn) 45%, var(--border)); }

/* ------------------------------------------------ pages de documentation */

.doc { padding: 28px 0 10px; }
.doc h1 { font-size: clamp(26px, 4vw, 36px); letter-spacing: -0.025em; margin: 8px 0 4px; text-wrap: balance; }
.doc .meta { color: var(--muted); font-size: 14px; margin: 0 0 28px; }
.doc h2 { font-size: 22px; margin: 44px 0 10px; letter-spacing: -0.01em; scroll-margin-top: 76px; }
.doc h3 { font-size: 17px; margin: 26px 0 6px; scroll-margin-top: 76px; }
.doc p, .doc li { color: var(--text); }
.doc li { margin: 5px 0; }
.doc strong { font-weight: 650; }
.doc .section-lead { font-size: 18px; }
.updated-chip {
  display: inline-block; padding: 3px 10px; border-radius: 999px;
  background: var(--panel-2); border: 1px solid var(--border);
  font-size: 13px; color: var(--muted);
}

/* Sommaire de page : des puces horizontales, pas une colonne latérale —
   la mise en page reste à une seule colonne, y compris sur téléphone. */
.toc {
  display: flex; flex-wrap: wrap; gap: 8px;
  margin: 24px 0 8px; padding: 16px;
  background: var(--panel-2); border: 1px solid var(--border); border-radius: var(--radius);
}
.toc a {
  font-size: 14px; font-weight: 600; color: var(--muted);
  background: var(--panel); border: 1px solid var(--border);
  padding: 4px 12px; border-radius: 999px;
}
.toc a:hover { text-decoration: none; color: var(--accent); border-color: var(--accent); }

/* Captures insérées dans le corps d'une page de documentation. */
.shot-inline, .shot-pair { margin: 24px 0; }
.shot-inline img, .shot-pair img {
  border-radius: 14px; border: 1px solid var(--border); box-shadow: var(--shadow); display: block;
}
.shot-inline img { max-width: 300px; }
.shot-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; max-width: 620px; }
@media (max-width: 620px) { .shot-pair { grid-template-columns: 1fr; max-width: 300px; } }

.cards { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin: 28px 0; }
@media (max-width: 620px) { .cards { grid-template-columns: 1fr; } }
.card {
  display: block; padding: 20px; border-radius: var(--radius);
  background: var(--panel); border: 1px solid var(--border); box-shadow: var(--shadow);
  color: var(--text);
}
.card:hover { text-decoration: none; border-color: var(--accent); }
.card h3 { margin: 0 0 6px; font-size: 18px; display: flex; align-items: center; gap: 8px; }
.card p { margin: 0; color: var(--muted); font-size: 15px; }
.card .arrow { color: var(--accent); }

/* Tableaux : toujours dans un conteneur qui défile — c'est le seul contenu
   du site qui peut dépasser la largeur d'un téléphone. */
.table-scroll { overflow-x: auto; margin: 20px 0; border: 1px solid var(--border); border-radius: 12px; }
table { border-collapse: collapse; width: 100%; font-size: 14.5px; }
th, td { text-align: left; padding: 10px 14px; border-bottom: 1px solid var(--border); vertical-align: top; }
thead th { background: var(--panel-2); font-weight: 650; white-space: nowrap; }
tbody th { font-weight: 650; white-space: nowrap; }
td.num { text-align: right; font-variant-numeric: tabular-nums; }
tr:last-child td, tr:last-child th { border-bottom: none; }

/* Pastille de couleur du réseau, dans la première colonne des tableaux. */
.dot {
  display: inline-block; width: 9px; height: 9px; border-radius: 50%;
  background: var(--dot, var(--accent)); margin-right: 8px; vertical-align: 1px;
}

code, .mono { font-family: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, monospace; font-size: 0.9em; }
code { background: var(--code-bg); padding: 2px 6px; border-radius: 6px; word-break: break-word; }
pre {
  background: var(--code-bg); border: 1px solid var(--border); border-radius: 12px;
  padding: 16px; overflow-x: auto; margin: 18px 0; line-height: 1.55;
}
pre code { background: none; padding: 0; word-break: normal; }

blockquote {
  margin: 18px 0; padding: 12px 16px;
  border-left: 3px solid var(--accent); border-radius: 0 10px 10px 0;
  background: var(--panel-2); color: var(--muted); font-size: 15px;
}
blockquote p { margin: 6px 0; }

.callout {
  margin: 24px 0; padding: 16px 18px; border-radius: 12px;
  background: color-mix(in srgb, var(--accent) 9%, var(--panel));
  border: 1px solid color-mix(in srgb, var(--accent) 35%, var(--border));
  border-left-width: 4px;
}
.callout strong { color: var(--text); }
.callout-warn { background: var(--warn-bg); border-color: color-mix(in srgb, var(--warn) 45%, var(--border)); }
.callout-danger { background: var(--danger-bg); border-color: color-mix(in srgb, var(--danger) 45%, var(--border)); }

hr { border: none; border-top: 1px solid var(--border); margin: 32px 0; }

/* ------------------------------------------------------------ pied de page */

footer {
  margin-top: 64px; border-top: 1px solid var(--border);
  padding: 32px 0 48px; color: var(--muted); font-size: 14px;
}
.foot-top { display: flex; flex-wrap: wrap; gap: 24px 40px; align-items: flex-start; }
.foot-brand { display: flex; align-items: center; gap: 10px; }
.foot-brand img { width: 28px; height: 28px; border-radius: 7px; }
.foot-brand b { display: block; color: var(--text); font-size: 15px; }
.foot-brand span { font-size: 13px; }
.foot-nav, .foot-langs { display: flex; flex-wrap: wrap; gap: 6px 18px; }
.foot-nav { flex: 1 1 320px; }
footer a { color: var(--muted); }
footer a:hover { color: var(--accent); }
.foot-langs a[aria-current='true'] { color: var(--accent); font-weight: 650; }
.foot-note { margin: 24px 0 6px; max-width: 72ch; font-size: 13px; }
.foot-copy { margin: 0; font-size: 13px; }

/* --------------------------------------------------------- soutien / dons */

/* Le bloc est **genere** par scripts/build-site.mjs a partir de
   src/core/donate.ts et des dictionnaires de l'app : ne rien ecrire en dur
   ici, ni adresse, ni libelle. */
.donate-group { margin: 40px 0; }
.donate-list {
  list-style: none; margin: 22px 0 0; padding: 0;
  display: grid; gap: 18px;
  grid-template-columns: repeat(auto-fill, minmax(258px, 1fr));
}

/* Chaque carte porte la couleur de sa monnaie dans `--coin`, ecrite par le
   generateur : celle de `CHAIN_META` pour un reseau surveille, celle de la
   marque pour les autres. Elle ne peint que des aplats et des bordures, jamais
   du texte — plusieurs de ces couleurs sont bien trop claires pour cela. */
.donate-item {
  position: relative; overflow: hidden;
  display: flex; flex-direction: column; align-items: center; gap: 12px;
  padding: 20px 18px 18px;
  border: 1px solid var(--border); border-radius: var(--radius);
  background: var(--panel); box-shadow: var(--shadow); text-align: center;
  /* Voile tres pale de la couleur de la monnaie sous l'en-tete, pose dans le
     fond de la carte et non dans un pseudo-element : un `::after` en
     `z-index: -1` passerait DERRIERE le fond du parent, qui ne cree aucun
     contexte d'empilement. Le repli plat est ecrit juste au-dessus, pour les
     moteurs sans `color-mix`. */
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--coin, var(--accent)) 9%, var(--panel)) 0,
      var(--panel) 128px);
  transition: border-color .14s ease, transform .14s ease, box-shadow .14s ease;
}
/* Filet de couleur en tete de carte : c'est ce qui donne son identite a la
   monnaie sans rien peindre d'illisible. */
.donate-item::before {
  content: ''; position: absolute; inset: 0 0 auto; height: 3px;
  background: var(--coin, var(--accent));
}
.donate-item:hover {
  transform: translateY(-2px);
  border-color: color-mix(in srgb, var(--coin, var(--accent)) 45%, var(--border));
  box-shadow: 0 2px 4px rgba(16, 40, 28, .05), 0 14px 32px rgba(16, 40, 28, .10);
}

.donate-head { margin: 2px 0 0; display: flex; align-items: center; gap: 11px; }
.donate-name { display: flex; flex-direction: column; align-items: flex-start; line-height: 1.2; }
.donate-name strong { font-size: 17px; letter-spacing: -0.01em; }
.donate-sym {
  font-size: 11px; font-weight: 700; letter-spacing: .06em;
  color: var(--muted); text-transform: uppercase;
}

/* Tuile du logo : un aplat tres pale de la couleur de la monnaie, qui tient
   sur les deux themes. Le repli `--panel-2` sert aux navigateurs sans
   `color-mix` — la tuile y perd sa teinte, pas sa forme. */
.coin-tile {
  flex: none; display: inline-flex; align-items: center; justify-content: center;
  width: 46px; height: 46px; border-radius: 14px;
  background: var(--panel-2);
  background: color-mix(in srgb, var(--coin, var(--accent)) 13%, var(--panel));
  border: 1px solid var(--border);
  border-color: color-mix(in srgb, var(--coin, var(--accent)) 26%, var(--border));
}
.coin-mark { display: block; width: 34px; height: 34px; }

/* Le QR reste **sombre sur clair en toute circonstance**, theme sombre du site
   compris : un symbole inverse est refuse par une bonne part des appareils
   photo de telephones. La plaque blanche est donc dans le SVG lui-meme, et
   c'est voulu — c'est ce que fait n'importe quel portefeuille. */
/* La taille est ecrite dans le SVG lui-meme (scripts/siteQr.mjs) : ces regles
   ne font que l'encadrer sur un ecran etroit. Un `<svg>` sans width/height
   mesure 300 px par defaut — c'est ce qu'a montre la mise en ligne chez qui
   avait l'ancienne feuille en cache. La taille ne doit donc jamais dependre
   d'ici seul. */
.qr {
  max-width: 100%; height: auto; display: block;
  border-radius: 8px; background: #fff;
}

/* La plaque blanche du QR : elle prolonge la marge claire du symbole pour que
   celui-ci ne touche jamais un fond sombre, et porte le liseré qui l'inscrit
   dans la carte. Le blanc est ici une contrainte de lecture, pas un choix de
   theme — voir le commentaire ci-dessus. */
.donate-qr {
  position: relative;
  display: inline-block; padding: 10px; border-radius: 14px;
  background: #fff; border: 1px solid var(--border);
  box-shadow: 0 1px 2px rgba(16, 40, 28, .06);
}
/* Deux equerres a l'oppose l'une de l'autre, dans la couleur de la monnaie :
   c'est le motif « visez ici » que tout le monde reconnait, et il tient
   entierement HORS du symbole. ⚠️ Rien ne doit jamais etre pose PAR-DESSUS un
   QR : l'encodeur est fige au niveau de correction M et rien dans le depot ne
   sait verifier qu'une matrice abimee se decode encore (voir CLAUDE.md). */
.donate-qr::before,
.donate-qr::after {
  content: ''; position: absolute; width: 13px; height: 13px;
  border: 2px solid var(--coin, var(--accent));
}
.donate-qr::before {
  top: -5px; left: -5px; border-right: 0; border-bottom: 0;
  border-radius: 6px 0 0 0;
}
.donate-qr::after {
  bottom: -5px; right: -5px; border-left: 0; border-top: 0;
  border-radius: 0 0 6px 0;
}

/* Le reseau a employer, pose contre l'adresse : c'est le seul renseignement
   qui change d'une carte a l'autre. L'avertissement, lui, est ecrit une fois
   au pied du groupe (`.donate-warn`) au lieu d'etre recopie sous chaque
   adresse, ou il disait sept fois la meme chose. */
.donate-net {
  margin: 0; display: inline-flex; align-items: center; gap: 7px;
  font-size: 12px; font-weight: 650; color: var(--muted);
}
.donate-net::before {
  content: ''; width: 8px; height: 8px; border-radius: 50%;
  background: var(--coin, var(--accent));
}

/* L'adresse est ecrite en entier et selectionnable : sans JavaScript, le
   bouton « copier » n'existe pas, mais la page reste utilisable. */
.donate-addr {
  display: block; width: 100%; padding: 9px 10px;
  border-radius: 9px; background: var(--code-bg);
  border: 1px solid var(--border);
  font-size: 11.5px; line-height: 1.55; word-break: break-all;
  -webkit-user-select: all; user-select: all;
}
.donate-copy { width: 100%; padding: 9px 14px; font-size: 14px; }
.donate-copy:hover { border-color: color-mix(in srgb, var(--coin, var(--accent)) 55%, var(--border)); }

/* Avertissement de page : ecrit UNE fois, juste avant la premiere adresse.
   Recopie sous chaque carte, il faisait sept paragraphes identiques que plus
   personne ne lisait. Ce qui reste au niveau de la carte est le reseau a
   employer (`.donate-net`), la seule chose qui change d'une adresse a l'autre.
   `.callout-warn` fait le fond et la bordure ; il ne reste ici que la mise en
   avant du texte lui-meme. */
.donate-warn { font-weight: 600; }

@media (prefers-reduced-motion: reduce) {
  .donate-item { transition: none; }
  .donate-item:hover { transform: none; }
}

/* ⚠️ Cette regle ne suffit PAS a cacher le bouton, et c'est le piege : `.btn`
   lui donne `display: inline-block`, qui l'emporte sur la regle `[hidden]` de
   la feuille du navigateur. Une feuille perimee en cache montrait donc un
   bouton que le script n'avait pas encore arme — un bouton mort, exactement ce
   qu'on voulait eviter. Le HTML porte pour cela un `style="display:none"` en
   ligne, que site.js retire ; celle-ci reste la ceinture. */
.donate-copy[hidden] { display: none; }