/* ═══════════════════════════════════════════════════════════════════════════
   btcswap.io — feuille de style unique.
   Thème « salle de marché gravée » : encre profonde, filets d'un pixel,
   ambre Bitcoin désaturé, chiffres en mono tabulaire.

   [!] CSP `style-src 'self'` : aucun style en ligne nulle part dans le site.
       Tout ce qui est visuel est ici.
   [!] Les assets sont servis en `immutable, max-age=1 an` : toute modification
       de ce fichier EXIGE d'incrémenter ASSET_V dans inc/config.php.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Polices auto-hébergées (la CSP interdit tout hôte externe) ───────────── */
@font-face {
  font-family: 'Inter';
  src: url('/assets/fonts/inter-var.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'JetBrains Mono';
  src: url('/assets/fonts/jbmono-var.woff2') format('woff2');
  font-weight: 100 800;
  font-style: normal;
  font-display: swap;
}

/* ── Jetons ──────────────────────────────────────────────────────────────── */
:root {
  --ink-900: #06080c;
  --ink-850: #080b11;
  --ink-800: #0b0f16;
  --ink-750: #0e131c;
  --ink-700: #111722;
  --ink-650: #161d2a;
  --ink-600: #1b2331;

  --line:    rgba(255, 255, 255, .068);
  --line-2:  rgba(255, 255, 255, .115);
  --line-3:  rgba(255, 255, 255, .19);

  --txt:   #e9edf4;
  --txt-2: #98a3b6;
  --txt-3: #6a7588;

  --amber:    #ff9e2c;
  --amber-2:  #ffb75f;
  --amber-dk: #c96f06;
  --amber-in: #1b1103;
  --amber-gl: rgba(255, 158, 44, .16);

  --mint: #35d6a4;
  --red:  #ff6f6f;

  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 16px;
  --r-xl: 22px;

  --sh-card: 0 1px 0 rgba(255,255,255,.045) inset, 0 24px 60px -32px rgba(0,0,0,.9);
  --sh-lift: 0 1px 0 rgba(255,255,255,.06) inset, 0 40px 90px -36px rgba(0,0,0,.95);

  --ff: 'Inter', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --fm: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, Consolas, monospace;

  --wrap: 1320px;
  /* [!] La gouttière est une VARIABLE parce que deux choses doivent rester
     calées dessus : le padding de .wrap et le rivet hexagonal des coutures,
     qui se place par calcul et pas dans le flux. Deux valeurs en dur auraient
     divergé au premier changement de palier. */
  --gutter: 22px;
  --hdr-h: 68px;
}

/* ── Réinitialisation ────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--hdr-h) + 16px); }
body {
  font-family: var(--ff);
  font-size: 16px;
  line-height: 1.6;
  color: var(--txt);
  background: var(--ink-900);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-feature-settings: 'cv05' 1, 'ss03' 1;
  overflow-x: hidden;
}

/* Fond : deux halos très faibles + une trame gravée + un grain. */
body::before,
body::after { content: ''; position: fixed; inset: 0; pointer-events: none; z-index: -1; }
body::before {
  background:
    radial-gradient(900px 560px at 78% -8%, rgba(255,158,44,.085), transparent 62%),
    radial-gradient(760px 520px at 8% 4%,  rgba(60,110,220,.055), transparent 60%),
    linear-gradient(180deg, #080b11 0%, #06080c 42%, #05070b 100%);
}
/* Trame de fond HEXAGONALE, pas un quadrillage : c'est la forme du logo, celle
   des pastilles du tracé et celle du treillis de la vidéo. Une identité se
   reconnaît sur un détail recadré — encore faut-il que le détail soit le même
   partout.
   [!] La tuile omet volontairement l'arête verticale de gauche : elle est
       fournie par la tuile voisine. Sans ça, une colonne sur deux serait deux
       fois plus dense et le nid d'abeille aurait des nervures. */
body::after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='52' height='90' viewBox='0 0 52 90'%3E%3Cg fill='none' stroke='%23ffffff' stroke-opacity='.05' stroke-width='1'%3E%3Cpath d='M0 30 26 15 52 30 52 60 26 75 0 60'/%3E%3Cpath d='M26 0v15M26 75v15'/%3E%3C/g%3E%3C/svg%3E");
  background-size: 52px 90px;
  mask-image: radial-gradient(1200px 780px at 68% 4%, #000 0%, transparent 76%);
  -webkit-mask-image: radial-gradient(1200px 780px at 68% 4%, #000 0%, transparent 76%);
}

img, svg { display: block; max-width: 100%; }
button, input, select { font: inherit; color: inherit; }
button { background: none; border: 0; cursor: pointer; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; padding: 0; }
:focus-visible { outline: 2px solid var(--amber); outline-offset: 3px; border-radius: 4px; }
::selection { background: rgba(255,158,44,.28); color: #fff; }

/* ── Typographie ─────────────────────────────────────────────────────────── */
h1, h2, h3 { font-weight: 640; letter-spacing: -.028em; line-height: 1.1; }
h1 { font-size: clamp(2.25rem, 1.1rem + 3.9vw, 3.7rem); letter-spacing: -.038em; }
h2 { font-size: clamp(1.65rem, 1.05rem + 2.05vw, 2.45rem); letter-spacing: -.032em; }
h3 { font-size: 1.0625rem; letter-spacing: -.018em; }
p  { text-wrap: pretty; }
.mono, .amt, .tape-v, .pair-r b, .hexn-in {
  font-family: var(--fm);
  font-variant-numeric: tabular-nums;
  font-feature-settings: 'tnum' 1, 'zero' 1;
}
.muted { color: var(--txt-3); font-weight: 400; }
.hl { color: var(--amber); }

/* ── Mise en page ────────────────────────────────────────────────────────── */
.wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: var(--gutter); }

.skip {
  position: absolute; left: 12px; top: -60px; z-index: 200;
  background: var(--amber); color: var(--amber-in); font-weight: 620;
  padding: 10px 16px; border-radius: var(--r-sm); transition: top .18s;
}
.skip:focus { top: 12px; }

/* ── Pictogrammes ────────────────────────────────────────────────────────── */
.ic {
  width: 18px; height: 18px; flex: none;
  fill: none; stroke: currentColor; stroke-width: 1.6;
  stroke-linecap: round; stroke-linejoin: round;
}
.ic-lg { width: 22px; height: 22px; }
.ic-xs { width: 13px; height: 13px; opacity: .5; }

/* ── Marque ──────────────────────────────────────────────────────────────── */
/* Le logotype est UNE image (124 × 19 à l'échelle 1) : capitales de 18 px, rendues à cette
   taille EXACTE en ×1, ×2, ×3. On ne l'affiche à aucune autre hauteur : le navigateur
   rééchantillonnerait et les bords deviendraient flous sur un écran ordinaire. Pour une
   autre taille, régénérer les fichiers (dossier `btcswap-logo/source` du propriétaire). */
.brand { display: inline-flex; align-items: center; }
.brand-logo { height: 19px; width: auto; display: block; flex: none; }

/* ── Boutons ─────────────────────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 44px; padding: 0 18px; border-radius: var(--r-md);
  font-weight: 580; font-size: .9375rem; letter-spacing: -.012em;
  white-space: nowrap; transition: background .16s, border-color .16s, transform .16s, box-shadow .16s;
}
.btn .ic { width: 16px; height: 16px; stroke-width: 1.8; }
.btn-sm { height: 38px; padding: 0 14px; font-size: .875rem; }
.btn-lg { height: 50px; padding: 0 26px; font-size: 1rem; border-radius: var(--r-lg); }
.btn-block { width: 100%; }

.btn-pri {
  background: linear-gradient(180deg, var(--amber-2), var(--amber) 55%, #f08c14);
  color: var(--amber-in); font-weight: 650;
  box-shadow: 0 1px 0 rgba(255,255,255,.32) inset, 0 10px 26px -12px rgba(255,158,44,.68);
}
.btn-pri:hover { transform: translateY(-1px); box-shadow: 0 1px 0 rgba(255,255,255,.4) inset, 0 16px 34px -12px rgba(255,158,44,.8); }
.btn-pri:active { transform: translateY(0); }
.btn-pri .ic { transition: transform .18s; }
.btn-pri:hover .ic { transform: translateX(3px); }

.btn-ghost { border: 1px solid var(--line-2); color: var(--txt-2); background: rgba(255,255,255,.015); }
.btn-ghost:hover { border-color: var(--line-3); color: var(--txt); background: rgba(255,255,255,.04); }

.icon-btn {
  display: inline-grid; place-items: center; width: 36px; height: 36px;
  border-radius: 10px; color: var(--txt-2); transition: background .15s, color .15s;
}
.icon-btn:hover { background: rgba(255,255,255,.06); color: var(--txt); }

.linkish {
  color: var(--amber); font: inherit; padding: 0;
  border-bottom: 1px dashed rgba(255,158,44,.42);
}
.linkish:hover { color: var(--amber-2); border-bottom-color: var(--amber-2); }

/* ── Pastille « en direct » ──────────────────────────────────────────────── */
.live-dot {
  width: 7px; height: 7px; border-radius: 50%; background: var(--mint); flex: none;
  box-shadow: 0 0 0 0 rgba(53,214,164,.55);
  animation: pulse 2.6s cubic-bezier(.4,0,.6,1) infinite;
}
@keyframes pulse {
  0%   { box-shadow: 0 0 0 0 rgba(53,214,164,.5); }
  70%  { box-shadow: 0 0 0 7px rgba(53,214,164,0); }
  100% { box-shadow: 0 0 0 0 rgba(53,214,164,0); }
}

/* ═══════════════════════════ EN-TÊTE ════════════════════════════════════ */
.hdr {
  position: sticky; top: 0; z-index: 90;
  height: var(--hdr-h);
  background: rgba(6,8,12,.55);
  backdrop-filter: blur(16px) saturate(150%);
  -webkit-backdrop-filter: blur(16px) saturate(150%);
  border-bottom: 1px solid transparent;
  transition: background .2s, border-color .2s;
}
.hdr.is-stuck { background: rgba(6,8,12,.86); border-bottom-color: var(--line); }
.hdr-in { display: flex; align-items: center; gap: 28px; height: 100%; }

.nav { display: flex; align-items: center; gap: 2px; margin-right: auto; }
.nav a {
  position: relative; padding: 8px 12px; border-radius: var(--r-sm);
  font-size: .9063rem; font-weight: 480; color: var(--txt-2);
  transition: color .15s, background .15s;
}
.nav a:hover { color: var(--txt); background: rgba(255,255,255,.045); }

.hdr-end { display: flex; align-items: center; gap: 14px; }
.burger { display: none; }

/* ── Tiroir mobile ───────────────────────────────────────────────────────── */
/* Volet latéral au-delà de 760 px ; sur téléphone il devient une FEUILLE qui monte
   du bas (bloc MOBILE, en fin de feuille). Même contenu partout : des tuiles
   groupées (échanger, explorer), une liste (société), la ligne juridique. */
.drawer { position: fixed; inset: 0; z-index: 120; background: rgba(4,6,9,.72); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.drawer[hidden] { display: none; }
.drawer-sheet {
  position: absolute; inset: 0 0 auto auto; width: min(360px, 88vw); height: 100%;
  background: var(--ink-800); border-left: 1px solid var(--line);
  padding: 18px 20px 22px; display: flex; flex-direction: column; gap: 16px;
  overflow-y: auto; overscroll-behavior: contain;
  animation: slidein .22s cubic-bezier(.2,.8,.3,1);
}
@keyframes slidein { from { transform: translateX(22px); opacity: 0; } }
.drawer-grab { display: none; }
.drawer-top { display: flex; align-items: center; justify-content: space-between; }
.drawer-nav { display: flex; flex-direction: column; gap: 6px; }
.drawer-h { font-size: .6875rem; font-weight: 640; letter-spacing: .12em; text-transform: uppercase; color: var(--txt-3); margin: 8px 0 4px; }
.drawer-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.drawer-grid a {
  display: flex; align-items: center; gap: 10px; min-height: 50px; min-width: 0; padding: 8px 12px;
  border-radius: var(--r-md); border: 1px solid var(--line); background: rgba(255,255,255,.025);
  font-size: .9063rem; font-weight: 540; color: var(--txt); letter-spacing: -.01em;
  transition: background .14s, border-color .14s;
}
.drawer-grid a .ic { width: 18px; height: 18px; color: var(--amber); flex: none; }
.drawer-grid a span { min-width: 0; line-height: 1.2; }
.drawer-grid a:hover, .drawer-grid a:active { background: rgba(255,158,44,.08); border-color: rgba(255,158,44,.35); }
.drawer-list { display: flex; flex-direction: column; }
.drawer-list a {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  min-height: 46px; padding: 0 4px; border-bottom: 1px solid var(--line);
  font-size: .9375rem; color: var(--txt-2); transition: color .14s;
}
.drawer-list a:hover { color: var(--txt); }
.drawer-ch { width: 16px; height: 16px; color: var(--txt-3); transform: rotate(-90deg); }
.drawer-legal { display: flex; flex-wrap: wrap; gap: 0 18px; margin-top: 2px; font-size: .78125rem; }
.drawer-legal a { color: var(--txt-3); padding: 8px 0; }
.drawer-legal a:hover { color: var(--txt); }
.drawer-note { font-size: .8125rem; color: var(--txt-3); text-align: center; margin-top: auto; padding-top: 6px; }

/* ═══════════════════════════ ACCUEIL ════════════════════════════════════ */
/* [!] `overflow-x: clip` et non `hidden` : `hidden` ferait de .hero un
   conteneur de defilement, ce qui casserait le `position: sticky` de l'en-tete
   au-dessus. `clip` rogne le halo sans creer de boite de defilement. */
.hero {
  position: relative; overflow-x: clip; isolation: isolate;
  padding: clamp(26px, 3.2vw, 54px) 0 clamp(34px, 3.8vw, 62px);
}

/* ── Fond animé ────────────────────────────────────────────────────────────
   L'affiche est le FOND de .hero-bg, pas l'attribut `poster` de la vidéo :
   elle s'affiche tout de suite, sans JavaScript, et la vidéo apparaît en fondu
   par-dessus sans le moindre clignotement.
   [!] `?v=` à incrémenter si l'affiche est refaite : les images sont servies en
       immutable pour un an. */
/* [!] Le fond remonte SOUS l'en-tête (inset négatif en haut) : l'en-tête est
   translucide avec un flou d'arrière-plan, et il n'a rien à flouter si la vidéo
   s'arrête à sa base. `overflow-x: clip` sur .hero n'empêche pas ce débord
   vertical, contrairement à `hidden`. */
.hero-bg {
  position: absolute; inset: calc(var(--hdr-h) * -1) 0 0; z-index: -1; overflow: hidden;
  background: var(--ink-900) url('/assets/video/hero-poster.jpg?v=4') 60% 50% / cover no-repeat;
}
.hero-video {
  width: 100%; height: 100%;
  object-fit: cover; object-position: 60% 50%;
  opacity: 0; transition: opacity 1.1s ease;
}
.hero-video.is-on { opacity: 1; }
/* [!] La vidéo porte DÉJÀ son voile gauche→droite, son fondu bas et sa vignette,
   gravés à l'encodage. En reposer un ici l'éteignait complètement : on ne garde
   que le raccord vertical, qui fait disparaître la ligne de coupe entre le bas
   du héros et la couleur de page. Le travail horizontal est déjà fait. */
.hero-veil {
  position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg,
    rgba(6,8,12,.34) 0%, rgba(6,8,12,0) 16%, rgba(6,8,12,0) 58%, var(--ink-900) 100%);
}
/* [!] Zones nommees plutot qu'un simple deux-colonnes : sur mobile, le module
   d'echange doit remonter entre le titre et les arguments, sans que l'ordre du
   DOM (donc la lecture vocale) ait a etre tordu. */
.hero-in {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 486px);
  grid-template-rows: auto 1fr;
  grid-template-areas:
    "lead swap"
    "flow swap";
  column-gap: clamp(32px, 4vw, 66px);
  align-items: start;
}
.hero-lead { grid-area: lead; }
/* [!] SCOPÉ au héros, et pas `.swap` tout court : `grid-area: swap` nomme une
   zone qui n'existe que dans CETTE grille. Le même module posé dans une autre
   grille (la page de paire) cherchait des lignes nommées « swap », n'en
   trouvait pas, et se rangeait dans une colonne IMPLICITE : la colonne de
   gauche s'effondrait à 60 px et son contenu débordait par-dessus. Un sélecteur
   de placement doit toujours être lié à sa grille. */
.hero-in > .swap { grid-area: swap; }

/* [!] La colonne de gauche s'étire sur toute la hauteur de la rangée et le rail
   de prix est poussé en bas (`margin-top: auto`). Les deux colonnes sont donc
   affleurantes en haut ET en bas, quoi qu'il arrive — et la carte change de
   hauteur en cours de route (le compte à rebours du taux verrouillé lui ajoute
   une ligne). Aligner à la main aurait tenu le temps d'une capture. */
.hero-flow {
  grid-area: flow;
  align-self: stretch;
  display: flex; flex-direction: column;
}
/* [!] DEUX marges `auto` et pas une : le navigateur partage l'espace libre
   à parts égales entre toutes les marges auto d'un axe. Avec une seule, tout le
   vide s'accumulait sous le tracé — près de 100 px d'un coup, un trou. Avec
   deux, il respire de part et d'autre. Le `padding-top` garantit un minimum si
   la colonne se remplit un jour. */
.hero-flow > .route { margin-top: auto; padding-top: 14px; }
.hero-flow > .rail  { margin-top: auto; }

/* [!] Remontée optique. La boîte du titre et le bord haut de la carte sont au
   même y, mais une boîte de texte commence par du blanc : la hauteur de capitale
   tombait 11 px plus bas et le titre paraissait décalé. En `em`, la correction
   suit la taille du titre à tous les paliers. */
.hero h1 { margin-top: -.16em; margin-bottom: 18px; }

/* L'argument principal, en clair et en gros — pas une pastille de plus.
   Séparateurs hexagonaux : la forme du logo, des nœuds du tracé et du treillis
   de la vidéo. Une identité tient à ce qu'on répète. */
/* [!] Collé au chapô (12 px), pas flottant entre deux blocs. C'est la chute du
   paragraphe, pas une ligne de plus : séparé de 26 px, il n'appartenait à rien
   et ça se voyait. */
.claim {
  display: flex; flex-wrap: wrap; align-items: center; gap: 14px;
  margin-top: 12px;
  font-size: clamp(1.0625rem, .95rem + .42vw, 1.3125rem);
  font-weight: 660; letter-spacing: -.026em; color: var(--txt);
}
.claim span { white-space: nowrap; }
/* [!] 11 px minimum : sous cette taille l'hexagone se lit comme un point rond
   et le rappel de la forme du logo tombe à plat. */
.claim i {
  width: 11px; height: 12px; flex: none; background: var(--amber);
  clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
}
.lede { font-size: clamp(1rem, .95rem + .28vw, 1.1rem); color: var(--txt-2); max-width: 49ch; }
.lede em { font-style: normal; color: var(--txt); font-weight: 560; }

/* ── Le tracé ─────────────────────────────────────────────────────────── */
/* [!] Le tracé affleure les deux bords de la colonne, comme le titre, le chapô
   et le rail. Avec trois nœuds centrés dans des boîtes de même largeur, le
   premier hexagone rentrait de 21 px et le dernier s'arrêtait 33 px avant le
   bord : tout le reste était aligné, et cette seule ligne cassait la colonne.
   Premier nœud calé à gauche, dernier à droite, celui du milieu centré. */
.route {
  display: flex; align-items: flex-start; gap: 14px;
  margin: 34px 0 0;
}
.rt { display: flex; flex-direction: column; align-items: center; gap: 8px; flex: none; width: 100px; text-align: center; }
.route > .rt:first-child { align-items: flex-start; text-align: left; }
.route > .rt:last-child  { align-items: flex-end;  text-align: right; }
.rt b { font-size: .875rem; font-weight: 640; letter-spacing: -.012em; line-height: 1; }
.rt i { font-style: normal; font-size: .71875rem; color: var(--txt-3); line-height: 1.2; letter-spacing: -.004em; }

/* Pastille hexagonale : une bordure ne suit pas un `clip-path`, alors on
   superpose deux hexagones — l'extérieur ambré fait l'anneau. */
.hexb {
  width: 58px; height: 65px; display: grid; place-items: center; flex: none;
  clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
  background: rgba(255,158,44,.32);
  transition: background .25s;
}
.hexb-in {
  width: 52.5px; height: 58.8px; display: grid; place-items: center;
  clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
  background: linear-gradient(180deg, var(--ink-650), var(--ink-750));
}
.hexb-in img { width: 30px; height: 30px; border-radius: 50%; }
/* `filter: drop-shadow` et non `box-shadow` : une ombre de boîte serait rognée
   par le clip-path hexagonal et ne se verrait pas. */
.hexb-hot {
  background: linear-gradient(180deg, var(--amber-2), var(--amber-dk));
  filter: drop-shadow(0 0 11px rgba(255,158,44,.34));
}
.hexb-hot .hexb-in { background: linear-gradient(180deg, #241a0c, #14100a); }
.rt-mark { height: 28px; width: auto; display: block; }
.rt-desk b { color: var(--amber); }

/* Le segment et la valeur qui le parcourt. Les deux dots partent l'un après
   l'autre : un dépôt, puis un versement — pas deux flux simultanés. */
/* Pointillé plutôt qu'un trait plein : un chemin se lit, une règle se subit. */
/* Le segment PORTE son étape. Nus, les segments laissaient l'information partir
   dans une légende flottante sous le tracé — qui répétait en plus l'argument
   juste au-dessus. Annoté là où l'étape se produit, le schéma se suffit. */
.rt-seg {
  flex: 1 1 auto; min-width: 60px; padding-top: 8px;
  display: flex; flex-direction: column; align-items: center; gap: 7px;
}
.rt-lab {
  font-size: .71875rem; font-weight: 560; letter-spacing: .012em;
  color: var(--txt-2); white-space: nowrap;
}
.rt-line {
  position: relative; width: 100%; height: 2px;
  background-image: radial-gradient(circle, rgba(255,255,255,.34) 1px, transparent 1.2px);
  background-size: 7px 2px; background-repeat: repeat-x; background-position: center;
}
.rt-dot {
  position: absolute; top: -2px; left: 0; width: 5px; height: 5px; border-radius: 50%;
  background: var(--amber-2); box-shadow: 0 0 9px 1px rgba(255,158,44,.85);
  animation: travel 5.2s linear infinite;
}
.rt-dot-b { animation-delay: 2.6s; }
@keyframes travel {
  0%   { left: 0; opacity: 0; }
  4%   { opacity: 1; }
  44%  { opacity: 1; }
  50%  { left: 100%; opacity: 0; }
  100% { left: 100%; opacity: 0; }
}





/* Bandeau de prix : une barre pleine largeur sous les deux colonnes. Elle sert
   de socle a la composition et prouve d'un coup d'oeil que le site est vivant. */
/* Le rail porte le filet et l'espacement ; le bandeau et le bouton de pause y
   sont posés côte à côte. */
.rail {
  display: flex; align-items: center; gap: 14px;
  margin-top: clamp(24px, 2.6vw, 34px);
  padding-top: 20px; border-top: 1px solid var(--line);
}
.tape {
  flex: 1 1 auto; min-width: 0;
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px;
}

/* [!] Une animation de fond qui dure plus de cinq secondes doit pouvoir être
   arrêtée (WCAG 2.2.2). Le bouton reste masqué tant que la vidéo ne tourne pas :
   proposer une pause sur une image fixe n'aurait aucun sens. */
.motion {
  flex: none; display: grid; place-items: center;
  width: 36px; height: 36px; border-radius: 10px;
  border: 1px solid var(--line); color: var(--txt-3);
  background: rgba(255,255,255,.022);
  transition: color .15s, border-color .15s, background .15s;
}
.motion:hover { color: var(--txt); border-color: var(--line-3); background: rgba(255,255,255,.06); }
.motion[hidden] { display: none; }
.motion-i { grid-area: 1 / 1; width: 15px; height: 15px; }
.motion-play { fill: currentColor; stroke-width: 1; display: none; }
.motion[aria-pressed="true"] .motion-i { display: none; }
.motion[aria-pressed="true"] .motion-play { display: block; }
.tape-i {
  display: flex; align-items: baseline; gap: 7px; min-width: 0; overflow: hidden;
  padding: 9px 12px; border-radius: var(--r-sm);
  background: rgba(255,255,255,.028); border: 1px solid var(--line);
  transition: border-color .45s, background .45s;
}
.tape-t { font-size: .75rem; font-weight: 640; color: var(--txt-3); letter-spacing: .04em; }
.tape-v { font-size: .8438rem; font-weight: 500; color: var(--txt); }
.tape-q { font-size: .6875rem; color: var(--txt-3); letter-spacing: .03em; }
.tape-i.is-up .tape-v { color: var(--mint); }
.tape-i.is-dn .tape-v { color: var(--red); }
.tape-i.is-up { border-color: rgba(53,214,164,.34); background: rgba(53,214,164,.05); }
.tape-i.is-dn { border-color: rgba(255,111,111,.34); background: rgba(255,111,111,.05); }

/* ═══════════════════════════ MODULE D'ÉCHANGE ═══════════════════════════ */
.swap {
  position: relative;
  display: flex; flex-direction: column; gap: 8px;
  padding: 16px; border-radius: var(--r-xl);
  background: linear-gradient(176deg, #141b27 0%, #0d121b 46%, #0b1018 100%);
  border: 1px solid var(--line-2);
  box-shadow: var(--sh-lift);
}
/* Liseré ambré très fin sur l'arête haute : donne le relief « instrument ». */
.swap::before {
  content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: linear-gradient(180deg, rgba(255,158,44,.22), transparent 26%);
  -webkit-mask: linear-gradient(#000, #000) content-box, linear-gradient(#000, #000);
  mask: linear-gradient(#000, #000) content-box, linear-gradient(#000, #000);
  -webkit-mask-composite: xor; mask-composite: exclude;
  padding: 1px;
}
.swap-head { display: flex; flex-direction: column; gap: 9px; margin-bottom: 3px; }

.seg {
  display: grid; grid-template-columns: 1fr 1fr; gap: 3px; padding: 3px;
  background: rgba(0,0,0,.34); border: 1px solid var(--line); border-radius: var(--r-md);
}
.seg-b {
  height: 32px; border-radius: 9px; font-size: .875rem; font-weight: 540;
  color: var(--txt-3); transition: color .15s, background .15s, box-shadow .15s;
}
.seg-b:hover { color: var(--txt-2); }
.seg-b.is-on {
  color: var(--txt); background: var(--ink-650);
  box-shadow: 0 1px 0 rgba(255,255,255,.07) inset, 0 2px 8px -3px rgba(0,0,0,.7);
}
.seg-b[disabled] { opacity: .38; cursor: not-allowed; }
/* Hauteur réservée pour une ligne : les deux libellés tiennent sur une seule,
   et une hauteur fixe empêche la carte de sauter quand on change d'onglet. */
.swap-hint { font-size: .7813rem; color: var(--txt-3); line-height: 1.45; min-height: 1.45em; }

.field {
  padding: 12px 15px 10px; border-radius: var(--r-lg);
  background: rgba(0,0,0,.28); border: 1px solid var(--line);
  transition: border-color .16s, background .16s;
}
.field:focus-within { border-color: rgba(255,158,44,.42); background: rgba(0,0,0,.36); }
.field-lab { font-size: .75rem; font-weight: 520; color: var(--txt-3); letter-spacing: .012em; }
.field-row { display: flex; align-items: center; gap: 12px; margin-top: 5px; }
.amt {
  flex: 1 1 auto; min-width: 0; width: 100%;
  background: none; border: 0; padding: 0;
  font-size: clamp(1.375rem, 1.1rem + .9vw, 1.75rem); font-weight: 500;
  letter-spacing: -.028em; color: var(--txt);
}

/* ── Compteur ───────────────────────────────────────────────────────────
   Seuls les CHIFFRES QUI CHANGENT roulent. C'est là tout l'intérêt : l'œil est
   conduit exactement sur ce qui a bougé, au lieu d'avoir à comparer deux
   nombres. Un effet qui informe, pas un effet qui décore.
   [!] `overflow: hidden` sur le chiffre ferait sauter la ligne de base dans un
       conteneur en ligne : on joue sur l'opacité et la translation. */
.od { display: inline-flex; }
.od-d { display: inline-block; white-space: pre; }
.od-d.is-roll { animation: roll .44s cubic-bezier(.2,.85,.25,1) both; }
@keyframes roll {
  from { transform: translateY(-.42em); opacity: 0; }
  60%  { opacity: 1; }
  to   { transform: none; opacity: 1; }
}
/* Décalages prédéfinis : la CSP interdit `style="animation-delay"` en ligne,
   et un roulement de gauche à droite se lit bien mieux qu'un bloc qui bascule. */
.od-s1 { animation-delay: .03s } .od-s2 { animation-delay: .06s }
.od-s3 { animation-delay: .09s } .od-s4 { animation-delay: .12s }
.od-s5 { animation-delay: .15s } .od-s6 { animation-delay: .18s }
.od-s7 { animation-delay: .21s } .od-s8 { animation-delay: .24s }
.od-s9 { animation-delay: .27s }

/* Le tracé accuse le changement de paire : les pastilles respirent une fois. */
.route.is-redraw .hexb { animation: hexpop .42s cubic-bezier(.2,.9,.3,1); }
@keyframes hexpop {
  from { transform: scale(.82); opacity: .25; }
  to   { transform: none; opacity: 1; }
}
.amt:focus { outline: none; }
.amt::placeholder { color: var(--txt-3); }
.amt.is-out { color: var(--txt); opacity: .96; }
.amt.is-busy { opacity: .35; }
.field-to .amt { cursor: default; }
.field-meta { font-size: .75rem; color: var(--txt-3); margin-top: 6px; min-height: 1.25em; letter-spacing: -.004em; }

/* Bouton d'actif */
.asset {
  display: inline-flex; align-items: center; gap: 9px; flex: none;
  height: 44px; padding: 0 11px 0 9px; border-radius: var(--r-md);
  background: var(--ink-650); border: 1px solid var(--line-2);
  transition: border-color .15s, background .15s;
}
.asset:hover { border-color: var(--line-3); background: var(--ink-600); }
.asset-ic { width: 26px; height: 26px; border-radius: 50%; flex: none; }
.asset-mono {
  display: grid; place-items: center; background: var(--ink-600);
  font-size: .625rem; font-weight: 700; color: var(--txt-2); letter-spacing: -.02em;
}
.asset-txt { display: flex; flex-direction: column; align-items: flex-start; line-height: 1.12; }
.asset-t { font-size: .9375rem; font-weight: 620; letter-spacing: -.015em; }
.asset-w { font-size: .625rem; font-weight: 560; color: var(--amber); letter-spacing: .035em; text-transform: uppercase; }
.asset-ch { width: 15px; height: 15px; color: var(--txt-3); margin-left: 1px; }

/* Inverseur */
.flip {
  position: relative; z-index: 3; align-self: center;
  margin: -20px 0; display: grid; place-items: center;
  width: 40px; height: 40px; border-radius: 12px;
  background: var(--ink-700); border: 1px solid var(--line-2);
  color: var(--txt-2);
  box-shadow: 0 0 0 5px #0d121b, 0 6px 16px -8px rgba(0,0,0,.9);
  transition: color .16s, border-color .16s, transform .22s cubic-bezier(.3,1.4,.5,1);
}
.flip:hover { color: var(--amber); border-color: rgba(255,158,44,.4); transform: rotate(180deg); }
.flip .ic { width: 17px; height: 17px; }

/* Détail de la cotation */
.swap-detail {
  margin-top: 4px; padding: 10px 15px; border-radius: var(--r-md);
  background: rgba(255,255,255,.017); border: 1px solid var(--line);
  display: flex; flex-direction: column; gap: 7px;
}
.dt-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; font-size: .8125rem; }
.dt-row span { display: inline-flex; align-items: center; gap: 5px; color: var(--txt-3); }
.dt-row b { font-weight: 540; color: var(--txt-2); letter-spacing: -.008em; }
.dt-lock b { color: var(--amber); }
.dt-row[hidden] { display: none; }

.swap-err {
  padding: 10px 13px; border-radius: var(--r-md);
  background: rgba(255,111,111,.09); border: 1px solid rgba(255,111,111,.28);
  color: #ffb4b4; font-size: .8125rem; line-height: 1.45;
}
.swap-err[hidden] { display: none; }
.swap-err .linkish { color: #ffd0a0; border-bottom-color: rgba(255,208,160,.45); }

.swap-legal { font-size: .6875rem; color: var(--txt-3); text-align: center; line-height: 1.45; }
.swap-legal a { color: var(--txt-2); border-bottom: 1px solid var(--line-2); }
.swap-legal a:hover { color: var(--txt); }

/* ═══════════════════════════ BANDEAU DE CHIFFRES ════════════════════════ */
/* ═══════════════════════════ SECTIONS ═══════════════════════════════════ */
/* [!] Espacement resserré : à 89 px de chaque côté, deux sections étaient
   séparées par 178 px de noir — la page respirait surtout du vide, et les
   coutures se retrouvaient isolées au milieu de nulle part. */
.sec { position: relative; padding: clamp(42px, 4.2vw, 66px) 0; }
/* [!] La section qui suit immédiatement le héros respire moins en haut : c'est
   la suite du tracé, pas un nouveau chapitre. Et son titre affleure le pli, ce
   qui donne une raison de faire défiler. */
.sec-next { padding-top: clamp(32px, 2.8vw, 44px); }

/* ═══════════════════════════ LA COUTURE ═════════════════════════════════
   La séparation des sections est un élément de design à part entière, pas un
   `border-top`. Elle reprend le vocabulaire du site : un filet GRAVÉ (dégradé,
   donc sans bord franc aux extrémités de l'écran — un trait plein d'un bord à
   l'autre est ce qui faisait « page de formulaire ») et un RIVET hexagonal posé
   dessus, calé sur le bord gauche du contenu. Chaque couture se lit alors comme
   l'arrêt suivant sur le tracé du héros, pas comme une ligne de découpe.
   ═════════════════════════════════════════════════════════════════════════ */
.seam { position: relative; }
.seam::before {
  content: ''; position: absolute; inset: 0 0 auto 0; height: 1px; pointer-events: none;
  background: linear-gradient(90deg,
    transparent 0,
    rgba(255,255,255,.055) 5%,
    rgba(255,255,255,.115) 26%,
    rgba(255,255,255,.075) 68%,
    transparent 100%);
}
/* [!] Le rivet se positionne en `%` de la SECTION, pas en `vw` : `100vw` inclut
   la barre de défilement et le rivet se serait décalé de sa colonne dès qu'une
   barre apparaît. `max()` le garde dans la gouttière sur les petits écrans. */
.seam::after {
  content: ''; position: absolute; top: -7px; width: 13px; height: 15px; pointer-events: none;
  left: max(var(--gutter), calc((100% - var(--wrap)) / 2 + var(--gutter)));
  background: linear-gradient(180deg, var(--amber-2), var(--amber-dk));
  clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
  /* Deux ombres portées : un halo serré qui donne l'arête, un halo large qui
     fait « prendre la lumière » au filet autour du rivet. `drop-shadow` et pas
     `box-shadow` — une ombre de boîte serait rognée par le clip-path hexagonal. */
  filter: drop-shadow(0 0 5px rgba(255,158,44,.6)) drop-shadow(0 0 16px rgba(255,158,44,.22));
}

/* Les sections alternent non pas par un lavis plat, mais par une lumière tiède
   qui tombe du haut de la plaque — la même logique d'éclairage que le héros. */
.sec-alt {
  background:
    radial-gradient(130% 62% at 50% 0%, rgba(255,214,168,.030), transparent 68%),
    rgba(255,255,255,.009);
}
.sec-head { max-width: 60ch; margin-bottom: clamp(26px, 2.8vw, 42px); }
.kicker {
  font-size: .75rem; font-weight: 620; letter-spacing: .13em; text-transform: uppercase;
  color: var(--amber); margin-bottom: 12px;
}
.sec-sub { color: var(--txt-2); margin-top: 14px; font-size: 1.0313rem; }

/* ── Le trajet, déroulé ─────────────────────────────────────────────────
   Un rail continu, pas quatre cases dans une boîte : c'est le tracé du héros qui
   se poursuit. [!] `gap: 0` et le trait qui déborde du `padding-right` par une
   marge négative — avec un `gap`, le rail serait coupé entre chaque étape et
   l'effet de continuité tomberait. */
.steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; }
/* Variante à trois étapes (/about, /affiliate).
   [!] DÉFINIE ICI, à côté de `.steps`, et nulle part ailleurs. Elle vivait dans le
   bloc CSS de /exchange : réécrire ce bloc l'a emportée, et trois pages se sont
   retrouvées dans la grille à QUATRE colonnes, une colonne vide à droite — sans
   la moindre erreur à l'écran ni dans la console. Une règle partagée n'a rien à
   faire dans le bloc d'une page. Les paliers sont redits : même spécificité que
   `.steps`, donc c'est la position dans la feuille qui tranche. */
.steps-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.step { padding-right: 30px; position: relative; }
.step:last-child { padding-right: 0; }

.step-head { display: flex; align-items: center; gap: 10px; margin-bottom: 18px; }
.step-line {
  flex: 1 1 auto; height: 2px; margin-right: -30px;
  background-image: radial-gradient(circle, rgba(255,255,255,.26) 1px, transparent 1.2px);
  background-size: 7px 2px; background-repeat: repeat-x; background-position: center;
}

/* Même double hexagone que les nœuds du héros : une bordure ne suit pas un
   `clip-path`, l'extérieur ambré fait l'anneau. */
.hexn {
  width: 44px; height: 49px; flex: none; display: grid; place-items: center;
  clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
  background: rgba(255,158,44,.30);
}
.hexn-in {
  width: 39px; height: 43.5px; display: grid; place-items: center;
  clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
  background: var(--ink-800);
  font-size: .8125rem; font-weight: 640; color: var(--amber-2); letter-spacing: .02em;
}

/* [!] Qui agit. C'est l'information la plus utile de la section et elle se lit
   AVANT le texte : deux étapes « you », deux « automatic », en alternance. La
   promesse « pas de compte à créer » cesse d'être un slogan. */
.who {
  flex: none; font-size: .625rem; font-weight: 640; letter-spacing: .1em;
  text-transform: uppercase; padding: 4px 8px; border-radius: 5px;
}
.is-you  { color: var(--amber); background: rgba(255,158,44,.12); border: 1px solid rgba(255,158,44,.24); }
.is-auto { color: var(--txt-3); background: rgba(255,255,255,.035); border: 1px solid var(--line); }

.steps h3 { margin-bottom: 10px; }
.steps p { font-size: .875rem; color: var(--txt-3); line-height: 1.62; }
.steps p b { color: var(--txt-2); font-weight: 580; }

/* Cartes */
.duo { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; }
.card {
  padding: 26px 24px 24px; border-radius: var(--r-lg);
  background: linear-gradient(174deg, var(--ink-750), var(--ink-850));
  border: 1px solid var(--line); box-shadow: var(--sh-card);
  display: flex; flex-direction: column; gap: 13px;
}
.card-top { display: flex; align-items: center; gap: 11px; }
.card-top .ic { color: var(--amber); }
.card p { font-size: .9063rem; color: var(--txt-2); line-height: 1.62; }
.card-accent { border-color: rgba(255,158,44,.24); background: linear-gradient(174deg, #1a1710, var(--ink-850) 58%); }
.card-accent .card-top .ic { color: var(--amber-2); }
.card-foot { font-size: .8125rem !important; color: var(--txt-3) !important; padding-top: 13px; border-top: 1px solid var(--line); margin-top: auto; }

.ticks { display: flex; flex-direction: column; gap: 10px; }
.ticks li { display: flex; gap: 10px; align-items: flex-start; font-size: .875rem; color: var(--txt-2); line-height: 1.55; }
.ticks .ic { width: 16px; height: 16px; margin-top: 3px; color: var(--mint); stroke-width: 2; }
.ticks b { color: var(--txt); font-weight: 580; }


/* ════════════════════════ VIE PRIVÉE ══════════════════════════════════ */

/* Pastille hexagonale d'icône — même double hexagone que les nœuds du tracé et
   les numéros des étapes, en plus petit. Une bordure ne suit pas un `clip-path`,
   d'où la superposition. */
.hexi {
  width: 34px; height: 38px; flex: none; display: grid; place-items: center;
  clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
  background: rgba(255,158,44,.30);
}
.hexi-in {
  width: 30px; height: 33.5px; display: grid; place-items: center;
  clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
  background: linear-gradient(180deg, var(--ink-650), var(--ink-750));
}
.hexi-in .ic { width: 15px; height: 15px; color: var(--amber); }
.hexi-hot {
  background: linear-gradient(180deg, var(--amber-2), var(--amber-dk));
  filter: drop-shadow(0 0 10px rgba(255,158,44,.32));
}
.hexi-hot .hexi-in { background: linear-gradient(180deg, #241a0c, #14100a); }
.hexi-hot .ic { color: var(--amber-2); }

/* ═══════════════════ FOND ANIMÉ DE LA SECTION ═════════════════════════════
   Tout en CSS, pas une seconde vidéo : zéro octet supplémentaire, et `transform`
   comme `opacity` se composent sur le GPU — aucune mise en page recalculée.
   [!] L'`overflow` vit sur .glow-bg et PAS sur la section : la section porte le
       rivet de la couture en `::after` à `top: -7px`, un overflow sur elle
       l'aurait rogné. */
.sec-glow { position: relative; isolation: isolate; }
.glow-bg { position: absolute; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; }

/* 1. Le treillis, plus grand que la trame de page, qui dérive d'une maille
   entière — donc en boucle parfaitement continue. */
.glow-mesh {
  position: absolute; inset: -14%;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='104' height='180' viewBox='0 0 104 180'%3E%3Cg fill='none' stroke='%23ffffff' stroke-opacity='.085' stroke-width='1.1'%3E%3Cpath d='M0 60 52 30 104 60 104 120 52 150 0 120'/%3E%3Cpath d='M52 0v30M52 150v30'/%3E%3C/g%3E%3C/svg%3E");
  background-size: 104px 180px;
  mask-image: radial-gradient(74% 76% at 48% 42%, #000 0%, transparent 76%);
  -webkit-mask-image: radial-gradient(74% 76% at 48% 42%, #000 0%, transparent 76%);
  animation: mesh-drift 46s linear infinite;
  will-change: transform;
}
@keyframes mesh-drift { to { transform: translate3d(-104px, -180px, 0); } }

/* 2. L'onde : une bande de lumière inclinée qui traverse le treillis. C'est elle
   qui donne l'impression que le nid d'abeille s'allume au passage. */
.glow-wave {
  position: absolute; top: -60%; bottom: -60%; left: -70%; width: 62%;
  background: linear-gradient(90deg, transparent, rgba(255,158,44,.13), transparent);
  transform: rotate(13deg);
  animation: wave-pass 13s cubic-bezier(.45,.05,.55,.95) infinite;
  will-change: left;
}
@keyframes wave-pass { 0% { left: -70%; } 100% { left: 130%; } }

/* 3. Le halo, qui respire. */
.glow-orb {
  position: absolute; left: 50%; top: 4%; width: 900px; height: 520px;
  margin-left: -450px; max-width: 130%;
  background: radial-gradient(closest-side, rgba(255,158,44,.13), transparent 72%);
  animation: orb-breathe 11s ease-in-out infinite;
  will-change: transform, opacity;
}
@keyframes orb-breathe {
  0%, 100% { transform: scale(1);    opacity: .7; }
  50%      { transform: scale(1.14); opacity: 1; }
}

/* 4. Quelques hexagones qui flottent : de la profondeur, pas du remplissage. */
.glow-hx {
  position: absolute; display: block;
  clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
  background: linear-gradient(180deg, rgba(255,158,44,.17), rgba(255,158,44,.02));
  animation: hx-float 24s ease-in-out infinite;
  will-change: transform, opacity;
}
.hx-a { width: 88px;  height: 98px;  left: 5%;  top: 60%; animation-duration: 27s; }
.hx-b { width: 46px;  height: 51px;  left: 21%; top: 16%; animation-duration: 19s; animation-delay: -6s; }
.hx-c { width: 126px; height: 140px; left: 73%; top: 8%;  animation-duration: 33s; animation-delay: -13s; opacity: .62; }
.hx-d { width: 62px;  height: 69px;  left: 88%; top: 64%; animation-duration: 23s; animation-delay: -3s; }
.hx-e { width: 34px;  height: 38px;  left: 51%; top: 78%; animation-duration: 17s; animation-delay: -9s; }
@keyframes hx-float {
  0%, 100% { transform: translateY(0) rotate(0deg);      opacity: .5; }
  50%      { transform: translateY(-28px) rotate(7deg);  opacity: 1; }
}

/* [!] L'argument est un CHIFFRE, pas un paragraphe. Sur ce sujet, un mur de
   texte ressemble à une politique de confidentialité — la chose que personne ne
   lit et que personne ne croit. Trois zéros alignés se comprennent avant d'être
   lus ; sous chacun, la ligne de configuration qui le rend vrai. */
.zeros { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.zeros li {
  display: flex; flex-direction: column; align-items: center; gap: 13px;
  padding: 34px 24px 28px; border-radius: var(--r-lg); text-align: center;
  background: linear-gradient(174deg, var(--ink-750), var(--ink-850));
  border: 1px solid var(--line); box-shadow: var(--sh-card);
}
/* [!] L'affirmation d'abord, la preuve juste dessous. Un chiffre géant inversait
   la hiérarchie : l'œil tombait sur un « 0 » qui ne veut rien dire tant qu'on
   n'a pas lu l'étiquette. Et trois grandes cartes pour neuf mots coûtaient plus
   de 400 px de hauteur — ici tout tient dans une seule plaque. */
.plate {
  border: 1px solid var(--line-2); border-radius: var(--r-lg); overflow: hidden;
  background: linear-gradient(174deg, var(--ink-750), var(--ink-850));
  box-shadow: var(--sh-card);
}
.plate-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.plate-row li {
  display: flex; align-items: center; gap: 14px; min-width: 0;
  padding: 22px clamp(16px, 1.8vw, 26px);
  border-left: 1px solid var(--line);
}
.plate-row li:first-child { border-left: 0; }
.plate-txt { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.plate-txt b {
  font-size: clamp(1.0625rem, .95rem + .4vw, 1.25rem);
  font-weight: 650; letter-spacing: -.026em; color: var(--txt); line-height: 1.1;
}
.plate-txt code {
  font-family: var(--fm); font-size: .6875rem; letter-spacing: -.012em;
  color: var(--txt-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}




/* ════════════════════════ TYPES DE TAUX ═══════════════════════════════
   Un tableau, parce que c'est une comparaison : personne ne lit deux paragraphes
   pour choisir entre deux options, on veut les voir en regard ligne par ligne.
   Un vrai `<table>` avec `<th scope>` — accessible sans un attribut de plus. */
/* [!] Un TABLEAU DE MOTS a été essayé ici, puis écarté : scannable, mais « ultra
   vide » — des cellules de trois mots flottant dans du noir ne valent pas mieux
   qu'un mur de texte. Ce qui manquait n'était pas du décor mais de la SUBSTANCE :
   deux cotations réelles du même montant, et l'écart chiffré. */
.quotes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.qc {
  padding: 26px clamp(20px, 2.2vw, 30px) 22px;
  border-radius: var(--r-lg); border: 1px solid var(--line);
  background: linear-gradient(174deg, var(--ink-750), var(--ink-850));
  box-shadow: var(--sh-card);
}
/* La carte verrouillée est chaude : elle se distingue, sans être présentée comme
   la meilleure — c'est l'écart chiffré plus bas qui tranche, pas la couleur. */
.qc-hot {
  border-color: rgba(255,158,44,.26);
  background:
    radial-gradient(520px 200px at 8% 0%, rgba(255,158,44,.085), transparent 70%),
    linear-gradient(174deg, #1a1610, var(--ink-850) 62%);
}
.qc-top { display: flex; align-items: center; gap: 12px; margin-bottom: 20px; }
.qc-top h3 { font-size: 1.25rem; letter-spacing: -.028em; }
.qc-amt {
  font-family: var(--fm); font-variant-numeric: tabular-nums;
  font-size: clamp(1.75rem, 1.1rem + 2.2vw, 2.625rem);
  font-weight: 400; line-height: 1; letter-spacing: -.045em; color: var(--txt);
}
.qc-amt span {
  font-family: var(--ff); font-size: .4em; font-weight: 580;
  color: var(--txt-3); margin-left: 9px; letter-spacing: -.01em;
}
.qc-hot .qc-amt { color: var(--amber); }
.qc-sub { margin-top: 10px; font-size: .78125rem; color: var(--txt-3); }

.qc-rows { margin-top: 22px; border-top: 1px solid var(--line); }
.qc-rows > div {
  display: flex; align-items: baseline; justify-content: space-between; gap: 16px;
  padding: 11px 0; border-bottom: 1px solid var(--line);
}
.qc-rows > div:last-child { border-bottom: 0; padding-bottom: 0; }
.qc-rows dt { font-size: .78125rem; color: var(--txt-3); }
.qc-rows dd { margin: 0; font-size: .875rem; color: var(--txt-2); text-align: right; letter-spacing: -.012em; }
.qc-hot .qc-rows dd { color: var(--txt); }

/* L'écart chiffré : la ligne qui fait toute la section. */
.qc-delta {
  margin-top: 18px; padding: 18px clamp(18px, 2vw, 26px);
  display: flex; align-items: flex-start; gap: 14px;
  border-radius: var(--r-lg); border: 1px solid rgba(255,158,44,.22);
  background: rgba(255,158,44,.05);
  font-size: .9375rem; color: var(--txt-2); line-height: 1.6;
}
.qc-delta b { color: var(--txt); font-weight: 650; }

/* Paires */
/* [!] `minmax(0, 1fr)` et `min-width: 0`, pas `1fr` : le plancher implicite de
   `1fr` est le min-content, et le libellé insécable d'une paire au nom long
   (« Tether (TRC20) to Tether (Binance Smart Chain) ») élargissait la piste
   au-delà de l'écran. Le texte a déjà son ellipse ; il lui manquait le droit de
   rétrécir. */
.pairs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.pair {
  min-width: 0;
  display: flex; align-items: center; gap: 13px; text-align: left;
  padding: 16px 15px; border-radius: var(--r-md);
  background: var(--ink-850); border: 1px solid var(--line);
  transition: border-color .16s, background .16s, transform .16s;
}
.pair:hover { border-color: rgba(255,158,44,.34); background: var(--ink-750); transform: translateY(-2px); }
/* Chaque paire est une miniature du tracé : deux hexagones reliés par un
   pointillé, exactement le motif du héros à l'échelle d'une vignette. */
.pair-ics { display: flex; align-items: center; flex: none; }
.pair-hx {
  width: 36px; height: 40px; flex: none; display: grid; place-items: center;
  clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
  background: rgba(255,158,44,.30);
}
/* [!] DEUX spans imbriqués, comme .hexb et .hexi — pas un `::before` superposé.
   La variante `::before` + `grid-area: 1/1` recouvrait l'icône : les hexagones
   s'affichaient VIDES alors que les 16 images étaient bien chargées. Même motif
   partout sur le site, un seul comportement à connaître. */
.pair-hx-in {
  width: 31.5px; height: 35px; display: grid; place-items: center;
  clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
  background: var(--ink-800);
}
.pair-hx-in img { width: 24px; height: 24px; border-radius: 50%; }
.pair-link {
  width: 14px; height: 2px; flex: none; margin: 0 3px;
  background-image: radial-gradient(circle, rgba(255,255,255,.34) 1px, transparent 1.2px);
  background-size: 5px 2px; background-repeat: repeat-x; background-position: center;
}
.pair-txt { display: flex; flex-direction: column; gap: 3px; min-width: 0; flex: 1; }
.pair-n { display: flex; align-items: center; gap: 6px; font-size: .875rem; font-weight: 580; letter-spacing: -.015em; }
.chip {
  font-style: normal; font-size: .5625rem; font-weight: 620; letter-spacing: .05em;
  text-transform: uppercase; color: var(--amber);
  padding: 2px 5px; border-radius: 4px; background: rgba(255,158,44,.11);
}
.pair-r { font-size: .75rem; color: var(--txt-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pair-r b { font-weight: 500; color: var(--txt-2); }
.pair-go { color: var(--txt-3); opacity: 0; transform: translateX(-4px); transition: opacity .16s, transform .16s; }
.pair:hover .pair-go { opacity: 1; transform: none; color: var(--amber); }
.pairs-more { margin-top: 24px; display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }

/* FAQ — deux colonnes THÉMATIQUES et indépendantes.
   [!] Pas une grille d'items : dans `grid-template-columns: 1fr 1fr`, ouvrir une
   question fait grandir toute la RANGÉE et laisse un trou béant à côté. Deux
   conteneurs séparés — ouvrir à gauche ne bouge que la gauche.
   [!] Alignée à gauche comme tout le reste : c'était le seul bloc centré d'une
   page calée sur 82 px, et l'exception cassait le rythme sans rien apporter. */
.faq-cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px 22px; align-items: start; }
.faq-lab {
  margin-bottom: 12px; padding-bottom: 10px; border-bottom: 1px solid var(--line);
  font-size: .6875rem; font-weight: 640; letter-spacing: .12em;
  text-transform: uppercase; color: var(--txt-3);
}
.faq { border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; background: var(--ink-850); }
.faq details { border-bottom: 1px solid var(--line); }
.faq details:last-child { border-bottom: 0; }
.faq summary {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 16px 20px; cursor: pointer; list-style: none;
  font-size: .9375rem; font-weight: 540; letter-spacing: -.016em;
  transition: color .15s, background .15s;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary:hover { background: rgba(255,255,255,.022); }
/* Une question ouverte reste repérable d'un coup d'œil quand plusieurs le sont. */
.faq details[open] { background: rgba(255,158,44,.035); }
.faq-ch { color: var(--txt-3); transition: transform .22s; }
.faq details[open] summary { color: var(--amber); }
.faq details[open] .faq-ch { transform: rotate(180deg); color: var(--amber); }
.faq details > div { padding: 0 20px 18px; }
.faq p { font-size: .9063rem; color: var(--txt-2); line-height: 1.68; max-width: 68ch; }

/* Appel final */
.cta { position: relative; padding: clamp(40px, 4vw, 62px) 0; }
.cta-in {
  display: flex; align-items: center; justify-content: space-between; gap: 34px; flex-wrap: wrap;
  padding: clamp(28px, 3.4vw, 44px) clamp(24px, 3.4vw, 46px); border-radius: var(--r-xl);
  background:
    radial-gradient(520px 260px at 88% 120%, rgba(255,158,44,.13), transparent 70%),
    linear-gradient(170deg, var(--ink-750), var(--ink-850));
  border: 1px solid var(--line-2); box-shadow: var(--sh-card);
}
.cta-in p { color: var(--txt-2); margin-top: 9px; font-size: .9688rem; }

/* ═══════════════════════════ SÉLECTEUR D'ACTIFS ═════════════════════════ */
.pick { position: fixed; inset: 0; z-index: 140; background: rgba(4,6,9,.74); backdrop-filter: blur(7px); display: grid; place-items: center; padding: 20px; }
.pick[hidden] { display: none; }
.pick-sheet {
  width: min(470px, 100%); max-height: min(660px, 84vh);
  display: flex; flex-direction: column;
  background: var(--ink-800); border: 1px solid var(--line-2);
  border-radius: var(--r-xl); box-shadow: var(--sh-lift); overflow: hidden;
  animation: popin .2s cubic-bezier(.2,.8,.3,1);
}
@keyframes popin { from { transform: translateY(12px) scale(.985); opacity: 0; } }
.pick-head { display: flex; align-items: center; justify-content: space-between; padding: 16px 14px 14px 20px; border-bottom: 1px solid var(--line); }
.pick-head h2, .pick-head .pick-t { font-size: 1rem; letter-spacing: -.02em; }
.pick-search { position: relative; padding: 13px 16px; border-bottom: 1px solid var(--line); }
.pick-search .ic { position: absolute; left: 28px; top: 50%; margin-top: -9px; color: var(--txt-3); }
.pick-search input {
  width: 100%; height: 42px; padding: 0 14px 0 40px; border-radius: var(--r-md);
  background: rgba(0,0,0,.34); border: 1px solid var(--line); color: var(--txt); font-size: .9375rem;
}
.pick-search input:focus { outline: none; border-color: rgba(255,158,44,.42); }
.pick-search input::-webkit-search-cancel-button { filter: invert(.6); }
.pick-lab {
  padding: 13px 20px 7px; font-size: .6875rem; font-weight: 620;
  letter-spacing: .12em; text-transform: uppercase; color: var(--txt-3);
}
.pick-list { overflow-y: auto; padding: 0 10px 12px; scrollbar-width: thin; scrollbar-color: var(--ink-600) transparent; }
.pick-list::-webkit-scrollbar { width: 9px; }
.pick-list::-webkit-scrollbar-thumb { background: var(--ink-600); border-radius: 9px; border: 3px solid var(--ink-800); }
.pick-row {
  display: flex; align-items: center; gap: 12px; width: 100%; text-align: left;
  padding: 10px 11px; border-radius: var(--r-md); transition: background .12s;
}
.pick-row:hover, .pick-row.is-cur { background: rgba(255,255,255,.055); }
.pick-row img, .pick-row .asset-mono { width: 30px; height: 30px; border-radius: 50%; flex: none; }
.pick-row .pr-txt { display: flex; flex-direction: column; min-width: 0; flex: 1; line-height: 1.25; }
.pick-row .pr-t { font-size: .9063rem; font-weight: 600; letter-spacing: -.012em; display: flex; align-items: center; gap: 7px; }
.pick-row .pr-n { font-size: .75rem; color: var(--txt-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pick-row .pr-f { font-size: .625rem; font-weight: 600; letter-spacing: .04em; color: var(--txt-3); border: 1px solid var(--line-2); padding: 2px 5px; border-radius: 4px; }
.pick-empty { padding: 34px 20px 40px; text-align: center; font-size: .875rem; color: var(--txt-3); }
.pick-empty b { color: var(--txt-2); font-family: var(--fm); font-weight: 500; }

/* ═══════════════════════════ PIED DE PAGE ═══════════════════════════════ */
.ft { position: relative; background: rgba(0,0,0,.28); padding: clamp(48px, 5vw, 72px) 0 30px; }
.ft-top { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 2fr); gap: clamp(32px, 4vw, 70px); }
.ft-pitch { font-size: .875rem; color: var(--txt-3); line-height: 1.62; margin-top: 16px; max-width: 42ch; }
.status { display: inline-flex; align-items: center; gap: 8px; margin-top: 18px; font-size: .78125rem; color: var(--txt-2); }
.status-dot { width: 7px; height: 7px; border-radius: 50%; flex: none; background: var(--mint); box-shadow: 0 0 10px rgba(53,214,164,.6); }
.status.is-degraded .status-dot { background: var(--amber); box-shadow: 0 0 10px rgba(255,158,44,.6); }

.ft-cols { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 26px 22px; }
.ft-col h2, .ft-col .ft-h { font-size: .75rem; font-weight: 620; letter-spacing: .1em; text-transform: uppercase; color: var(--txt); margin-bottom: 15px; }
.ft-col ul { display: flex; flex-direction: column; gap: 10px; }
.ft-col a { font-size: .875rem; color: var(--txt-3); transition: color .14s; }
.ft-col a:hover { color: var(--amber); }

.ft-rule { height: 1px; background: var(--line); margin: clamp(34px, 3.6vw, 48px) 0 24px; }
.ft-bottom { display: flex; justify-content: space-between; gap: 26px; flex-wrap: wrap; font-size: .78125rem; color: var(--txt-3); }
.ft-risk { max-width: 68ch; line-height: 1.6; }

/* ═══════════════════════════ 404 ════════════════════════════════════════ */
.oops { display: grid; place-items: center; text-align: center; padding: clamp(70px, 10vw, 150px) 0; }
.oops .code {
  font-family: var(--fm); font-size: clamp(3.5rem, 2rem + 6vw, 6rem); font-weight: 300;
  letter-spacing: -.05em; color: var(--amber); line-height: 1; opacity: .9;
}
.oops h1 { margin: 18px 0 14px; font-size: clamp(1.5rem, 1.1rem + 1.6vw, 2.125rem); }
.oops p { color: var(--txt-2); max-width: 48ch; margin-inline: auto; }
.oops .btn { margin-top: 30px; }

/* ═══════════════════════════ ADAPTATIF ══════════════════════════════════ */
@media (max-width: 1080px) {
  /* [!] `minmax(0, 1fr)` et pas `1fr` : la borne basse implicite de `1fr` est
     `auto`, c'est-à-dire le min-content. Un libellé insécable du tracé suffisait
     alors à élargir la piste au-delà de l'écran et toute la colonne débordait. */
  .hero-in {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto;
    grid-template-areas: "lead" "swap" "flow";
  }
  .hero-in > .swap { max-width: 486px; width: 100%; margin-top: 36px; }
  /* Colonne non étirée : plus d'espace libre à partager, on repasse aux marges. */
  .hero-flow { display: block; }
  .hero-flow > .route { margin-top: 30px; padding-top: 0; }
  .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 38px; }
  .steps-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* Sur deux colonnes, le rail ne relie plus que l'intérieur d'une rangée : une
     ligne qui part dans le vide à droite de la seconde case ne relie rien. */
  .steps .step:nth-child(2n) .step-line { display: none; }
  .steps .step:nth-child(2n) { padding-right: 0; }
  .pairs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ft-top { grid-template-columns: 1fr; }
}
/* Entre 1081 et 1260 px la colonne de gauche se resserre et « USDT » ne tient
   plus à côté du prix. On retire le suffixe plutôt que de laisser le texte se
   faire tronquer : l'actif de cotation est le même pour les quatre, il est
   déductible. */
@media (min-width: 1081px) and (max-width: 1260px) {
  .tape-q { display: none; }
  .tape-i { padding-inline: 10px; }
}

/* [!] Le repli de la navigation a SON palier (1000 px), distinct du palier de
   mise en page (900 px) : la barre porte sept entrées depuis l'ajout des outils
   et des guides, et débordait entre 901 et 960 px. */
@media (max-width: 1000px) {
  .nav { display: none; }
  .burger { display: inline-grid; place-items: center; width: 40px; height: 40px; border-radius: 10px; color: var(--txt-2); border: 1px solid var(--line-2); }
  .burger:hover { color: var(--txt); background: rgba(255,255,255,.05); }
  .hdr-in { justify-content: space-between; }
  .hdr-end { margin-left: auto; }
}
@media (max-width: 900px) {
  /* `cover` rogne à l'horizontale sous cette largeur : on cadre sur la partie
     vivante de la vidéo, et on épaissit le voile pour garder le texte lisible
     par-dessus — le voile gravé dans la vidéo supposait le texte à gauche. */
  .hero-bg { background-position: 72% 50%; }
  .hero-video { object-position: 72% 50%; }
  .hero-veil {
    background: linear-gradient(180deg, rgba(6,8,12,.46) 0%, rgba(6,8,12,.32) 42%, rgba(6,8,12,.60) 78%, var(--ink-900) 100%);
  }

  .duo { grid-template-columns: 1fr; }
  /* Les deux groupes de la FAQ s'empilent, mais gardent leurs intitulés : ils
     restent la carte du contenu, même en colonne. */
  .faq-cols { grid-template-columns: minmax(0, 1fr); gap: 26px; }
  /* [!] Les deux cotations s'empilent : côte à côte sous 900 px, les montants
     seraient tronqués — et ce sont eux tout l'intérêt de la section. */
  .quotes { grid-template-columns: 1fr; }
  .plate-row li { flex-direction: column; align-items: flex-start; gap: 11px; padding: 20px 16px; }
  .ft-cols { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 30px 22px; }
}
@media (max-width: 640px) {
  :root { --hdr-h: 60px; --gutter: 16px; }
  .seam::after { width: 10px; height: 11px; top: -5px; }
  .hdr-end .btn-pri { display: none; }
  /* [!] Le module d'echange doit entrer dans le premier ecran : sur un 390x844
     le chapo tenait six lignes et le repoussait juste sous le pli. */
  .hero { padding-top: 26px; }
  .eyebrow { margin-bottom: 18px; }
  .hero h1 { margin-bottom: 16px; }
  .lede { font-size: 1rem; line-height: 1.55; }
  .swap { margin-top: 28px; }
  /* En colonne, le rail devient vertical et vit dans une GOUTTIÈRE à gauche.
     [!] Sans l'indentation, la ligne passait par-dessus le titre et le texte :
     l'hexagone est aligné sur le bord, donc son axe aussi. */
  .steps { grid-template-columns: minmax(0, 1fr); row-gap: 0; }
  .steps-3 { grid-template-columns: minmax(0, 1fr); }
  .step { padding: 0 0 30px 60px; }
  .step:last-child { padding-bottom: 0; }
  .step-head { min-height: 49px; margin-bottom: 10px; }
  /* [!] SCOPE aux etapes. En `.hexn` nu, la regle sortait de la section
     « comment ca marche » et allait coller au coin de toute autre carte
     qui reutilise la pastille numerotee — sur /exchange, les deux numeros
     de bloc se sont empiles hors du cadre. Une regle de POSITION doit
     toujours nommer le contexte qu'elle positionne. */
  .step .hexn { position: absolute; left: 0; top: 0; }
  .step-line { display: none; }
  .step:not(:last-child)::before {
    content: ''; position: absolute; left: 21px; top: 56px; bottom: 8px; width: 2px;
    background-image: radial-gradient(circle, rgba(255,255,255,.26) 1px, transparent 1.2px);
    background-size: 2px 7px; background-repeat: repeat-y; background-position: center;
  }
  .pairs { grid-template-columns: minmax(0, 1fr); }
  .swap { padding: 15px; border-radius: var(--r-lg); }
  .qc-delta { flex-direction: column; gap: 12px; }
  /* Les nœuds se dimensionnent sur leur contenu et les segments absorbent le
     reste : à largeur fixe, le tracé ne tenait pas sur 358 px. */
  .route { gap: 4px; margin-top: 22px; }
  .rt { width: auto; min-width: 0; }
  .rt b { font-size: .75rem; }
  .rt i { font-size: .625rem; }
  .hexb { width: 44px; height: 49px; }
  .hexb-in { width: 39px; height: 43.6px; }
  .hexb-in img { width: 22px; height: 22px; }
  .rt-mark { height: 21px; width: auto; }
  .rt-seg { flex: 1 1 0; min-width: 20px; gap: 5px; padding-top: 6px; }
  .rt-lab { font-size: .5625rem; }
  /* [!] Même raison qu'entre 1081 et 1260 px : le rail partage sa largeur avec le
     bouton de pause, chaque pastille tombe à ~149 px et « USDT » débordait. Les
     quatre valeurs sont cotées dans le même actif, le suffixe est déductible. */
  /* En colonne, les trois cellules s'empilent et le filet passe au-dessus. */
  .plate-row { grid-template-columns: minmax(0, 1fr); }
  .plate-row li {
    flex-direction: row; align-items: center; gap: 13px;
    border-left: 0; border-top: 1px solid var(--line); padding: 15px 16px;
  }
  .plate-row li:first-child { border-top: 0; }
  .tape { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tape-q { display: none; }
  .rail { align-items: flex-start; }
  .motion { margin-top: 2px; }
  .cta-in { flex-direction: column; align-items: flex-start; }
  .cta-in .btn { width: 100%; }
  .pick { padding: 0; place-items: end stretch; }
  .pick-sheet { max-height: 88vh; border-radius: var(--r-xl) var(--r-xl) 0 0; border-bottom: 0; animation: sheetup .24s cubic-bezier(.2,.8,.3,1); }
  @keyframes sheetup { from { transform: translateY(26px); opacity: 0; } }
  .ft-bottom { flex-direction: column; gap: 12px; }
}

/* Sans JavaScript, on masque ce qui ne peut pas fonctionner plutôt que de
   proposer des commandes mortes. */
.no-js .flip,
.no-js .asset-ch,
/* [!] Le bouton seulement, pas tout le paragraphe : il contient aussi un LIEN
   vers l'annuaire, qui lui fonctionne parfaitement sans JavaScript. */
.no-js .pairs-more button,
.no-js [data-api-run],
.no-js .adir-bar { display: none; }
.no-js .asset { pointer-events: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  /* Les points qui parcourent le tracé seraient figés à leur position de
     départ par la règle ci-dessous : on les retire franchement. */
  .rt-dot { display: none; }
  *, *::before, *::after {
    animation-duration: .001ms !important; animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   PAGES INTÉRIEURES
   [!] Aucune page intérieure ne rejoue le héros (vidéo, module, plein écran) :
       ce serait un deuxième premier écran et l'action de la page tomberait sous
       le pli. Elles gardent la trame hexagonale, les coutures et les pastilles —
       une identité se reconnaît à ce qui se répète, pas à ce qui se répète en
       entier.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Bandeau de tête ─────────────────────────────────────────────────────── */
.mast { position: relative; padding: clamp(26px, 3vw, 40px) 0 clamp(20px, 2.4vw, 32px); }
.mast-tight { padding-bottom: clamp(14px, 1.8vw, 24px); }
.mast-in { display: flex; flex-direction: column; align-items: flex-start; }
/* Remontée optique : une boîte de texte commence par du blanc, la hauteur de
   capitale tombe plus bas que le bord d'une boîte voisine au même y. */
.mast h1 {
  font-size: clamp(1.75rem, 1.15rem + 2.3vw, 2.875rem);
  line-height: 1.06; letter-spacing: -.038em; font-weight: 680;
  margin-top: -.14em;
}
.mast h1.is-bad { color: #ffc4a0; }
.mast-sub { color: var(--txt-2); margin-top: 14px; font-size: 1.0313rem; max-width: 64ch; }
.mast-sub b { color: var(--txt); font-weight: 580; }
.mast-sub a { color: var(--txt); border-bottom: 1px solid var(--line-3); }
.mast-sub a:hover { color: var(--amber); border-bottom-color: var(--amber); }

.mast-meta { display: flex; flex-wrap: wrap; gap: 14px clamp(24px, 3vw, 46px); margin-top: 28px; }
.mast-meta li { display: flex; flex-direction: column; gap: 3px; }
.mast-meta b {
  font-family: var(--fm); font-size: 1.1875rem; font-weight: 500;
  letter-spacing: -.028em; color: var(--txt); line-height: 1;
}
.mast-meta span { font-size: .71875rem; color: var(--txt-3); letter-spacing: .03em; }

/* ── Fil d'Ariane ────────────────────────────────────────────────────────── */
/* [!] `max-width: 100%` : dans un bandeau en colonne flex (`align-items:
   flex-start`), la largeur du fil est celle de son contenu, et son dernier
   élément est insécable — un titre de guide de 70 signes faisait déborder la
   page sur téléphone. Plafonné, le dernier élément s'abrège par son ellipse. */
.crumb { margin-bottom: 17px; max-width: 100%; min-width: 0; }
.crumb ol { display: flex; flex-wrap: wrap; align-items: center; gap: 9px; font-size: .78125rem; }
.crumb li { display: flex; align-items: center; gap: 9px; min-width: 0; }
/* Le séparateur est un hexagone de 5 px : la forme du logo jusque dans la
   ponctuation. */
.crumb li + li::before {
  content: ''; width: 5px; height: 5.6px; flex: none;
  clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
  background: var(--line-3);
}
.crumb a { color: var(--txt-3); transition: color .14s; }
.crumb a:hover { color: var(--amber); }
.crumb span { color: var(--txt-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ── Progression ─────────────────────────────────────────────────────────── */
.flow { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 0; margin: 2px 0 24px; }
.flow-s { display: flex; align-items: center; }
.flow-s + .flow-s::before {
  content: ''; width: clamp(14px, 2.6vw, 40px); height: 1px; margin: 0 clamp(8px, 1vw, 13px);
  background: var(--line-2); flex: none;
}
.flow-s > a, .flow-s > span { display: flex; align-items: center; gap: 9px; }
.flow-n {
  width: 25px; height: 28px; flex: none; display: grid; place-items: center;
  clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
  background: var(--line-2); transition: background .2s;
}
.flow-n-in {
  width: 21px; height: 23.5px; display: grid; place-items: center;
  clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
  background: var(--ink-800);
  font-family: var(--fm); font-size: .6875rem; font-weight: 500; color: var(--txt-3);
}
.flow-n-in .ic { width: 12px; height: 12px; stroke-width: 2.6; }
.flow-l { font-size: .8125rem; color: var(--txt-3); letter-spacing: -.008em; }
.flow-s.is-now .flow-n {
  background: linear-gradient(180deg, var(--amber-2), var(--amber-dk));
  filter: drop-shadow(0 0 9px rgba(255,158,44,.38));
}
.flow-s.is-now .flow-n-in { background: #14100a; color: var(--amber-2); }
.flow-s.is-now .flow-l { color: var(--txt); font-weight: 580; }
.flow-s.is-done .flow-n { background: rgba(255,158,44,.40); }
.flow-s.is-done .flow-n-in { background: var(--ink-750); color: var(--amber); }
.flow-s.is-done .flow-l { color: var(--txt-2); }
.flow-s a:hover .flow-l { color: var(--amber); }

/* Zone de repli pour la copie hors contexte sécurisé. Hors de l'écran mais
   SÉLECTIONNABLE : `display:none` et `visibility:hidden` empêcheraient la
   sélection, donc la copie. */
.sr-copy { position: fixed; top: -9999px; left: -9999px; width: 1px; height: 1px; opacity: 0; }
/* Retour visuel d'un bouton ordinaire qui vient de copier. */
.btn.is-ok { color: var(--mint); border-color: rgba(53,214,164,.5); background: rgba(53,214,164,.08); }
.btn.is-ok .ic { color: var(--mint); }

/* ── Champ recopiable ────────────────────────────────────────────────────── */
/* [!] Le bouton porte la valeur BRUTE dans `data-copy`. Copier ce qui est à
   l'écran copierait la mise en forme — et une adresse de dépôt fausse d'un
   caractère, ce sont des fonds perdus. */
.cpf {
  display: flex; align-items: stretch; border: 1px solid var(--line-2);
  border-radius: var(--r-md); background: rgba(0,0,0,.34); overflow: hidden;
  transition: border-color .16s;
}
.cpf:hover { border-color: var(--line-3); }
.cpf-v {
  flex: 1; min-width: 0; font-family: var(--fm); font-size: .8125rem; line-height: 1.55;
  padding: 11px 13px; color: var(--txt); word-break: break-all;
}
.cpf-b {
  flex: none; width: 46px; display: grid; place-items: center; position: relative;
  border-left: 1px solid var(--line-2); color: var(--txt-3);
  background: rgba(255,255,255,.022); transition: color .15s, background .15s;
}
.cpf-b:hover { color: var(--amber); background: rgba(255,158,44,.09); }
.cpf-ok {
  position: absolute; inset: 0; display: grid; place-items: center;
  background: var(--ink-750); color: var(--mint); opacity: 0; transition: opacity .14s;
}
.cpf-ok .ic { stroke-width: 2.4; }
.cpf-b.is-ok .cpf-ok { opacity: 1; }
.cpf-lg .cpf-v { font-size: .9375rem; padding: 15px 16px; letter-spacing: .004em; }
.cpf-sm .cpf-v { font-size: .71875rem; padding: 8px 11px; color: var(--txt-2); }
.cpf-sm .cpf-b { width: 38px; }

/* ═══════════════════════ PARCOURS D'ÉCHANGE — EN-TÊTE COMMUN ═══════════════
   /exchange et /order se suivent dans le même geste : même rangée pleine
   largeur, titre à gauche, progression à droite. Si la progression changeait
   de place entre l'étape 2 et l'étape 3, on croirait avoir changé de site.
   [!] Chaque `grid-area` est lié à SA grille (`.mast-app-in > …`). Trois fuites
   de sélecteur de placement en une journée ont suffi. */
.mast-app { padding: clamp(22px, 2.4vw, 32px) 0 clamp(14px, 1.6vw, 20px); }
.mast-app-in {
  display: grid; grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas: "crumb crumb" "title flow" "sub sub";
  align-items: center; column-gap: clamp(24px, 3vw, 48px);
}
.mast-app-in > .crumb    { grid-area: crumb; margin-bottom: 14px; }
.mast-app-in > h1        { grid-area: title; margin-top: 0; font-size: clamp(1.5rem, 1.08rem + 1.7vw, 2.25rem); text-wrap: balance; }
.mast-app-in > .flow     { grid-area: flow; margin: 0; justify-self: end; }
.mast-app-in > .mast-sub { grid-area: sub; margin-top: 10px; font-size: .9375rem; max-width: 72ch; }
.mast-app-in > .mast-sub em { font-style: normal; color: var(--txt); font-weight: 560; }

/* ═══════════════════════ /exchange — CONFIRMER ET ENVOYER ══════════════════
   [!] TROISIÈME VERSION. La 1re : deux colonnes « marketing », champ à 1 500 px
   sur mobile, « modifier » renvoyait à l'accueil. La 2e : une caisse de 640 px,
   juste sur le fond mais qui laissait les deux tiers d'un écran de bureau
   vides — refusée (« utilise toute la largeur du site »).
   Celle-ci : UN instrument pleine largeur à deux volets côte à côte — ① le swap
   (le module de l'accueil, littéralement), ② l'adresse et le bouton — plus un
   rail « ce qui se passe après le clic ». Sur un écran de bureau, tout le geste
   tient au-dessus du pli. Sur mobile, le volet ① se replie derrière une ligne
   de confirmation : c'est le CSS qui choisit selon la largeur, pas un script au
   chargement, qui ferait sauter la page.
   ═══════════════════════════════════════════════════════════════════════════ */
.sec-app { padding: clamp(22px, 2.2vw, 30px) 0 clamp(48px, 5vw, 76px); }

.xg2 {
  display: grid; grid-template-columns: minmax(0, 1fr) 300px;
  gap: clamp(24px, 2.6vw, 40px); align-items: start;
}

.xc {
  position: relative; min-width: 0;
  border-radius: var(--r-xl); overflow: hidden;
  background: linear-gradient(176deg, #141b27 0%, #0d121b 46%, #0b1018 100%);
  border: 1px solid var(--line-2);
  box-shadow: var(--sh-lift);
}
/* Même liseré ambré que le module de l'accueil : c'est le même instrument. */
.xc::before {
  content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  z-index: 2;
  background: linear-gradient(180deg, rgba(255,158,44,.22), transparent 26%);
  -webkit-mask: linear-gradient(#000, #000) content-box, linear-gradient(#000, #000);
  mask: linear-gradient(#000, #000) content-box, linear-gradient(#000, #000);
  -webkit-mask-composite: xor; mask-composite: exclude;
  padding: 1px;
}

/* En-tête : le tracé à l'échelle d'une vignette (deux hexagones, un pointillé),
   exactement le motif des paires de l'accueil, réseaux en toutes lettres. */
.xc-head {
  display: flex; align-items: center; gap: 14px;
  padding: 14px clamp(18px, 1.8vw, 26px); border-bottom: 1px solid var(--line);
  background: rgba(0,0,0,.22);
}
.xc-head-t { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.xc-head-t b { font-size: .9375rem; font-weight: 620; letter-spacing: -.016em; }
.xc-head-t i {
  font-style: normal; font-size: .71875rem; color: var(--txt-3);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.xc-head.is-redraw .pair-hx { animation: hexpop .42s cubic-bezier(.2,.9,.3,1); }
.xc-live {
  margin-left: auto; flex: none; display: inline-flex; align-items: center; gap: 7px;
  font-size: .75rem; color: var(--txt-3);
}

/* Les deux volets. Étirés à la même hauteur : le bouton se cale en bas du
   volet ② (`margin-top: auto`), à hauteur du bas du module — l'œil passe du
   dernier chiffre au bouton sans chercher. */
.xc-body { display: grid; grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr); }
.xc-col {
  display: flex; flex-direction: column; gap: 14px; min-width: 0;
  padding: clamp(18px, 1.8vw, 26px);
}
.xc-col-pay { border-left: 1px solid var(--line); background: rgba(0,0,0,.13); }

.xc-h { display: flex; align-items: center; gap: 11px; }
.xc-h h2 { font-size: 1rem; font-weight: 620; letter-spacing: -.02em; }
.xc-h .hexn { width: 29px; height: 32px; }
.xc-h .hexn-in { width: 25px; height: 28px; font-size: .75rem; }
.xc-h-note {
  margin-left: auto; font-size: .625rem; font-weight: 600; letter-spacing: .08em;
  text-transform: uppercase; color: var(--txt-3);
  border: 1px solid var(--line); border-radius: 5px; padding: 3px 7px;
}

.xc-editor { display: flex; flex-direction: column; gap: 12px; flex: 1 1 auto; }
/* Les deux volets finissent sur LA MÊME ligne : le bloc des frais se cale en
   bas du volet ① comme le bouton en bas du volet ②. Quand l'un des deux est
   plus long, le vide se glisse au milieu de l'autre au lieu de pendre dessous. */
.xc-editor > .swap-detail { margin-top: auto; }
/* [!] Les deux champs et l'inverseur forment leur propre pile à 8 px : le
   `margin: -20px 0` de `.flip` est calculé pour cet écart. */
.xc-amt { display: flex; flex-direction: column; gap: 8px; }
/* L'anneau de l'inverseur est peint à la couleur du fond de carte À CET ENDROIT
   du dégradé, pas à celle du module de l'accueil. */
.xc .flip { box-shadow: 0 0 0 5px #10151e, 0 6px 16px -8px rgba(0,0,0,.9); }
.xc .swap-head { margin-bottom: 0; }
.xc .swap-hint { min-height: 0; }
.xc-err { margin: 0; }

/* La ligne de confirmation — MOBILE seulement (voir l'adaptatif). C'est un
   MIROIR, jamais une seconde source : le module de cotation n'écrit qu'à la
   première correspondance de chaque sélecteur, donc dupliquer `data-out` aurait
   laissé cette ligne figée sur la valeur du serveur. */
.xc-sum {
  display: none; width: 100%; align-items: center; gap: 12px;
  padding: 14px 15px; text-align: left; transition: background .14s;
}
.xc-sum:hover { background: rgba(255,255,255,.022); }
.xc-sum .hexn { flex: none; width: 29px; height: 32px; }
.xc-sum .hexn-in { width: 25px; height: 28px; font-size: .75rem; }
.xc-sum-t { display: flex; flex-direction: column; gap: 3px; min-width: 0; flex: 1; }
.xc-sum-t > b {
  display: flex; align-items: baseline; gap: 7px; flex-wrap: wrap;
  font-size: .9375rem; font-weight: 560; letter-spacing: -.022em; color: var(--txt);
}
.xc-sum-t > b i { font-style: normal; font-weight: 400; color: var(--txt-3); }
.xc-sum-r {
  font-style: normal; font-size: .71875rem; color: var(--txt-3);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.xc-sum-e {
  display: inline-flex; align-items: center; gap: 5px; flex: none;
  font-size: .78125rem; color: var(--txt-2); transition: color .14s;
}
.xc-sum:hover .xc-sum-e { color: var(--amber); }

/* L'engagement : un rappel d'une ligne à l'endroit du clic, puis le bouton. */
.xc-go {
  margin-top: auto; padding-top: 16px; border-top: 1px solid var(--line);
  display: flex; flex-direction: column; gap: 12px;
}
.xc-recap {
  display: flex; align-items: center; justify-content: center; gap: 6px 10px; flex-wrap: wrap;
  font-size: .8125rem; color: var(--txt-3);
}
.xc-recap b { color: var(--txt); font-weight: 560; letter-spacing: -.016em; }
.xc-recap i { display: inline-grid; place-items: center; color: var(--txt-3); }
.xc-recap [hidden] { display: none; }
.xc-recap > span { white-space: nowrap; }
/* Un montant et son ticker ne se séparent jamais à la ligne. */
.nb { white-space: nowrap; }

/* Le rail : du texte sur le fond de page, PAS une carte — l'œil doit savoir
   tout de suite lequel des deux blocs est l'outil et lequel est la notice. */
.xc-rail { position: sticky; top: calc(var(--hdr-h) + 18px); min-width: 0; padding-top: 4px; }
.xc-rail .kicker { margin-bottom: 18px; }
.xc-next { display: flex; flex-direction: column; }
.xc-next li { position: relative; display: flex; gap: 13px; padding-bottom: 20px; min-width: 0; }
.xc-next li:last-child { padding-bottom: 0; }
.xc-next li:not(:last-child)::before {
  content: ''; position: absolute; left: 16px; top: 43px; bottom: 5px; width: 2px;
  background-image: radial-gradient(circle, rgba(255,255,255,.26) 1px, transparent 1.2px);
  background-size: 2px 7px; background-repeat: repeat-y; background-position: center;
}
.xc-next .hexn { width: 34px; height: 38px; }
.xc-next .hexn-in { width: 30px; height: 33.5px; font-size: .6875rem; }
.xc-next-t { display: flex; flex-direction: column; gap: 6px; min-width: 0; padding-top: 2px; }
.xc-next-h { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; }
.xc-next-h b { font-size: .875rem; font-weight: 620; letter-spacing: -.016em; }
.xc-next p { font-size: .8125rem; color: var(--txt-3); line-height: 1.58; }
.xc-next p b { color: var(--txt-2); font-weight: 580; }

.xc-trust {
  display: flex; flex-direction: column; gap: 10px;
  margin-top: 24px; padding-top: 20px; border-top: 1px solid var(--line);
}
.xc-trust li { display: flex; gap: 9px; align-items: flex-start; min-width: 0; font-size: .78125rem; color: var(--txt-3); line-height: 1.5; }
.xc-trust .ic { flex: none; width: 15px; height: 15px; margin-top: 2px; color: var(--txt-3); }
.xc-trust b { font-weight: 600; color: var(--txt-2); letter-spacing: -.01em; }
.xc-trust code { font-family: var(--fm); font-size: .6875rem; }

/* ── Avertissement de réseau ─────────────────────────────────────────────── */
/* Affiché UNIQUEMENT quand le réseau apprend quelque chose : sur un actif natif
   il serait du bruit, et le bruit désarme l'avertissement utile. */
.netwarn {
  display: flex; gap: 11px; align-items: flex-start;
  padding: 12px 14px; border-radius: var(--r-md);
  border: 1px solid rgba(255,158,44,.28); background: rgba(255,158,44,.07);
  font-size: .8125rem; line-height: 1.55; color: var(--txt-2);
}
.netwarn[hidden] { display: none; }
.netwarn .ic { flex: none; width: 18px; height: 18px; margin-top: 1px; color: var(--amber); }
.netwarn b { color: var(--txt); font-weight: 600; }

/* ── Champ d'adresse (aussi utilisé par /support et /affiliate) ───────────── */
.afield { display: flex; flex-direction: column; gap: 7px; }
.afield[hidden] { display: none; }
.afield-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.afield-lab {
  display: flex; align-items: center; gap: 9px; flex-wrap: wrap;
  font-size: .8125rem; font-weight: 560; color: var(--txt-2); letter-spacing: -.006em;
}
.afield-net {
  font-size: .625rem; font-weight: 640; letter-spacing: .05em; text-transform: uppercase;
  color: var(--amber); background: rgba(255,158,44,.12);
  border: 1px solid rgba(255,158,44,.26); padding: 2px 6px; border-radius: 4px;
}
.afield-net[hidden] { display: none; }
.afield-opt { font-size: .71875rem; font-weight: 400; color: var(--txt-3); letter-spacing: 0; }
.afield-clear { font-size: .75rem; flex: none; }
.afield-clear[hidden] { display: none; }
.afield-row { position: relative; display: flex; align-items: center; }
.afield-in {
  width: 100%; min-width: 0; height: 54px; padding: 0 50px 0 15px;
  border: 1px solid var(--line-2); border-radius: var(--r-md);
  background: rgba(0,0,0,.4); color: var(--txt);
  font-size: .9375rem; letter-spacing: .002em;
  transition: border-color .16s, background .16s;
}
.afield-in::placeholder { color: var(--txt-3); font-family: var(--ff); letter-spacing: -.008em; }
.afield-in:focus { outline: none; border-color: rgba(255,158,44,.5); background: rgba(0,0,0,.52); }

/* L'adresse de versement : un <textarea> qui GRANDIT. Une adresse Monero fait
   95 caractères ; dans un champ d'une ligne on n'en voit que le début, alors que
   c'est la FIN qu'un presse-papiers détourné modifie. `word-break: break-all`
   et police mono : l'adresse entière reste lisible, caractère par caractère.
   [!] La hauteur est posée par le script via le CSSOM (`el.style.height`), ce
   que la CSP `style-src 'self'` autorise — elle ne bloque que les attributs
   `style=""` du balisage. */
.afield-xl .afield-in { border-radius: var(--r-lg); }
.afield-row-ta { align-items: flex-start; }
.afield-ta {
  display: block; height: auto; min-height: 58px; padding: 17px 48px 17px 16px;
  line-height: 1.5; resize: none; overflow: hidden; word-break: break-all;
  font-family: var(--fm);
}
.no-js .afield-ta { min-height: 82px; }
.afield.has-paste .afield-ta { padding-right: 100px; }
.afield-paste {
  position: absolute; right: 10px; top: 11px; height: 36px; padding: 0 12px;
  display: inline-flex; align-items: center; gap: 6px;
  border-radius: 9px; border: 1px solid var(--line-2); background: var(--ink-650);
  color: var(--txt-2); font-size: .78125rem; font-weight: 560;
  transition: color .15s, border-color .15s, background .15s;
}
.afield-paste:hover { color: var(--amber); border-color: rgba(255,158,44,.4); background: var(--ink-600); }
.afield-paste[hidden] { display: none; }
.afield-paste .ic { opacity: 1; }

.afield-state {
  position: absolute; right: 14px; display: grid; place-items: center;
  width: 22px; height: 22px; pointer-events: none;
}
.afield-row-ta .afield-state { top: 18px; }
.afield-state > * { grid-area: 1 / 1; opacity: 0; transition: opacity .16s; }
.afield-spin {
  width: 16px; height: 16px; border-radius: 50%;
  border: 2px solid var(--line-3); border-top-color: var(--amber);
  animation: spin .7s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
.afield-yes { color: var(--mint); stroke-width: 2.4; }
.afield-no  { color: var(--red);  stroke-width: 2.4; }
.afield.is-busy .afield-spin { opacity: 1; }
.afield.is-ok   .afield-yes  { opacity: 1; }
.afield.is-bad  .afield-no   { opacity: 1; }
.afield.is-ok  .afield-in { border-color: rgba(53,214,164,.46); }
.afield.is-bad .afield-in { border-color: rgba(255,111,111,.5); background: rgba(255,111,111,.05); }
.afield-msg { font-size: .78125rem; color: var(--txt-3); line-height: 1.5; min-height: 1.5em; }
.afield.is-bad .afield-msg { color: #ffb3b3; }
.afield.is-ok  .afield-msg { color: var(--mint); }
.afield-msg.is-note { color: var(--txt-3); }
/* Les deux bouts de l'adresse validée : c'est ce qu'on compare avec son
   portefeuille, et ce qu'un presse-papiers détourné ne peut pas imiter. */
.afield-msg code {
  font-family: var(--fm); font-size: .95em; padding: 1px 5px; border-radius: 4px;
  color: #d9fff1; background: rgba(53,214,164,.13);
}
/* Refus à la soumission : le champ fait « non » de la tête. Un bouton qui ne
   fait rien quand on clique est la pire des réponses. */
@keyframes nudge {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(-6px); } 40% { transform: translateX(6px); }
  60% { transform: translateX(-3px); } 80% { transform: translateX(3px); }
}
.afield.is-nudge .afield-row { animation: nudge .36s ease; }

/* Pictogramme en tête du champ d'adresse : il le distingue des champs de
   montant au premier coup d'œil — « ici, un portefeuille ». */
.afield-lead {
  position: absolute; left: 15px; top: 19px; z-index: 1; pointer-events: none;
  display: grid; place-items: center; color: var(--txt-3); transition: color .16s;
}
.afield-lead .ic { width: 19px; height: 19px; }
.afield-row-ta .afield-ta { padding-left: 46px; }
.afield:focus-within .afield-lead { color: var(--amber); }
.afield.is-ok  .afield-lead { color: var(--mint); }
.afield.is-bad .afield-lead { color: var(--red); }
.afield-lab b { font-weight: 640; color: var(--txt); }

/* ── Remboursement : OUVERT sur grand écran, replié sur mobile ───────────────
   Sur un écran de bureau il y a la place, et chaque adresse de remboursement
   renseignée est un remboursement à la main en moins : le cacher derrière un
   clic n'économisait rien. C'est le CSS qui choisit selon la largeur (voir
   l'adaptatif) — pas de <details>, qu'on ne peut pas forcer ouvert sans script. */
.rf { display: flex; flex-direction: column; }
.rf-t { display: none; }
.rf-in { display: flex; }

/* ── Repli « adresse de remboursement » ──────────────────────────────────── */
.opt { border: 1px solid var(--line); border-radius: var(--r-md); background: rgba(255,255,255,.014); }
.opt summary {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 13px 15px; cursor: pointer; list-style: none;
  font-size: .8125rem; color: var(--txt-2); font-weight: 540;
}
.opt summary::-webkit-details-marker { display: none; }
.opt summary:hover { color: var(--txt); }
.opt summary > span { display: flex; align-items: center; gap: 10px; }
.opt summary .ic { width: 16px; height: 16px; color: var(--txt-3); }
.opt summary i { font-style: normal; font-weight: 400; color: var(--txt-3); font-size: .75rem; }
.opt[open] summary { color: var(--txt); border-bottom: 1px solid var(--line); }
.opt[open] .faq-ch { transform: rotate(180deg); }
.opt-in { padding: 14px 15px; display: flex; flex-direction: column; gap: 11px; }
.opt-why { font-size: .78125rem; color: var(--txt-3); line-height: 1.58; }

/* ── Erreur de création, mentions ────────────────────────────────────────── */
.pay-err {
  display: flex; gap: 11px; align-items: flex-start;
  padding: 12px 14px; border-radius: var(--r-md);
  border: 1px solid rgba(255,111,111,.34); background: rgba(255,111,111,.07);
  font-size: .8438rem; line-height: 1.55; color: #ffc9c9;
}
.pay-err[hidden] { display: none; }
.pay-err .ic { flex: none; width: 18px; height: 18px; margin-top: 2px; color: var(--red); }
.pay-legal { font-size: .71875rem; color: var(--txt-3); line-height: 1.6; text-align: center; }
.pay-legal a { color: var(--txt-2); border-bottom: 1px solid var(--line-2); }
.pay-legal a:hover { color: var(--txt); }

/* ── Adaptatif du parcours ───────────────────────────────────────────────── */
/* [!] L'ORDRE des paliers compte : 1240 avant 900, le second redéfinit le
   premier (même spécificité, c'est la position dans la feuille qui tranche). */
@media (max-width: 1240px) {
  /* Le rail passe SOUS l'instrument, en bande de trois. */
  .xg2 { grid-template-columns: minmax(0, 1fr); }
  .xc-rail { position: static; padding-top: 8px; }
  .xc-next { flex-direction: row; gap: clamp(18px, 2.4vw, 32px); }
  .xc-next li { flex: 1 1 0; padding-bottom: 0; }
  .xc-next li:not(:last-child)::before { display: none; }
  .xc-trust { flex-direction: row; flex-wrap: wrap; gap: 10px 30px; }
}
@media (max-width: 900px) {
  .mast-app-in { grid-template-columns: minmax(0, 1fr); grid-template-areas: "crumb" "flow" "title" "sub"; }
  .mast-app-in > .flow { justify-self: start; margin: 0 0 16px; }

  .xc-body { grid-template-columns: minmax(0, 1fr); }
  .xc-col-pay { border-left: 0; border-top: 1px solid var(--line); }
  .xc-live { display: none; }

  /* Le volet ① se replie derrière sa ligne de confirmation. */
  .xc-col-swap { padding: 0; gap: 0; }
  .xc-col-swap > .xc-h { display: none; }
  .xc-sum { display: flex; }
  .xc-editor { display: none; padding: 14px 15px 16px; border-top: 1px solid var(--line); }
  .xc-col-swap.is-open .xc-editor { display: flex; }
  .xc-col-swap.is-open .xc-sum-e .faq-ch { transform: rotate(180deg); }
  .xc-col-swap .xc-err { margin: 0 15px 14px; }
  /* Sans JavaScript, rien ne peut déplier : le module reste ouvert. */
  .no-js .xc-sum { display: none; }
  .no-js .xc-col-swap > .xc-h { display: flex; padding: 16px 15px 0; }
  .no-js .xc-editor { display: flex; border-top: 0; }

  /* Le remboursement se replie : même allure que les autres replis du site. */
  .rf { border: 1px solid var(--line); border-radius: var(--r-md); background: rgba(255,255,255,.014); }
  .rf-t {
    display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%;
    padding: 13px 15px; text-align: left; font-size: .8125rem; font-weight: 540; color: var(--txt-2);
  }
  .rf-t > span { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
  .rf-t .ic { width: 16px; height: 16px; color: var(--txt-3); }
  .rf-t i { font-style: normal; font-weight: 400; color: var(--txt-3); font-size: .75rem; }
  .rf-in { display: none; padding: 0 15px 14px; }
  .rf-in > .afield-lab { display: none; }
  .rf.is-open .rf-t { color: var(--txt); }
  .rf.is-open .rf-t .faq-ch { transform: rotate(180deg); }
  .rf.is-open .rf-in { display: flex; }
  .no-js .rf { border: 0; background: none; }
  .no-js .rf-t { display: none; }
  .no-js .rf-in { display: flex; padding: 0; }
  .no-js .rf-in > .afield-lab { display: flex; }

  .xc-next { flex-direction: column; gap: 0; }
  .xc-next li { flex: none; padding-bottom: 20px; }
  .xc-next li:last-child { padding-bottom: 0; }
  .xc-next li:not(:last-child)::before { display: block; }
  .xc-trust { flex-direction: column; gap: 10px; }
}
@media (max-width: 640px) {
  .xc-head { padding: 13px 15px; }
  .xc-col-pay { padding: 16px 15px; }
  /* Le rappel passe sur deux lignes nettes, sans flèche qui pend en bout de ligne. */
  .xc-recap { flex-direction: column; gap: 2px; }
  .xc-recap > i { display: none; }
}

/* ═══════════════════════ /order — L'ORDRE EN DIRECT ════════════════════════ */
.og {
  display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
  gap: clamp(22px, 2.6vw, 38px); align-items: start;
}
.ostage { display: flex; flex-direction: column; gap: 18px; min-width: 0; }

.dep {
  border: 1px solid var(--line-2); border-radius: var(--r-xl); overflow: hidden;
  background: linear-gradient(176deg, var(--ink-800), var(--ink-850) 62%);
  box-shadow: var(--sh-card);
}
.dep-head {
  display: flex; align-items: flex-end; justify-content: space-between; gap: 18px; flex-wrap: wrap;
  padding: clamp(20px, 2.2vw, 28px); border-bottom: 1px solid var(--line);
}
.dep-k { font-size: .71875rem; font-weight: 560; letter-spacing: .075em; text-transform: uppercase; color: var(--txt-3); }
.dep-k2 { margin-top: 16px; display: flex; align-items: center; gap: 7px; color: var(--amber); }
.dep-k2 .ic { opacity: 1; color: var(--amber); }
.dep-amt {
  display: flex; align-items: baseline; gap: 10px; margin-top: 8px;
  font-size: clamp(1.75rem, 1.2rem + 2.1vw, 2.625rem); font-weight: 500;
  letter-spacing: -.042em; color: var(--txt); line-height: 1;
}
.dep-amt span { font-size: .42em; font-weight: 550; letter-spacing: -.01em; color: var(--amber); }
.dep-net { margin-top: 9px; font-size: .8125rem; color: var(--txt-3); }
.dep-net b { color: var(--txt-2); font-weight: 580; }

.dep-grid {
  display: grid; grid-template-columns: auto minmax(0, 1fr);
  gap: clamp(20px, 2.4vw, 34px); padding: clamp(20px, 2.2vw, 28px);
}
.dep-qr { display: flex; flex-direction: column; align-items: center; gap: 11px; }
/* Le QR est produit par inc/qr.php et VÉRIFIÉ par qa/qrverify.sh (relecture par
   zbarimg). Fond blanc obligatoire : un QR en négatif n'est pas lu par tous les
   lecteurs, et ce n'est pas le bon endroit pour parier. */
.qr {
  width: 188px; height: 188px; border-radius: 10px; flex: none;
  box-shadow: 0 0 0 1px var(--line-2), 0 18px 42px -24px rgba(0,0,0,.95);
}
.dep-qr figcaption {
  display: flex; align-items: center; gap: 6px;
  font-size: .71875rem; color: var(--txt-3);
}
.dep-qr figcaption .ic { opacity: .7; }

.dep-addr { display: flex; flex-direction: column; gap: 9px; min-width: 0; }
.dep-xnote { font-size: .75rem; color: var(--txt-3); line-height: 1.55; }
.dep-rules { display: flex; flex-direction: column; gap: 11px; margin-top: 8px; }
.dep-rules li { display: flex; gap: 10px; align-items: flex-start; font-size: .8125rem; color: var(--txt-3); line-height: 1.58; }
.dep-rules .ic { flex: none; width: 15px; height: 15px; margin-top: 3px; color: var(--mint); stroke-width: 2.2; }
.dep-rules b { color: var(--txt-2); font-weight: 580; }

.dep-clock {
  display: flex; align-items: center; gap: 11px;
  padding: 14px clamp(20px, 2.2vw, 28px); border-top: 1px solid var(--line);
  background: rgba(255,158,44,.05);
  font-size: .8125rem; color: var(--txt-2); line-height: 1.5;
}
.dep-clock .ic { flex: none; color: var(--amber); }
.dep-clock b { font-size: 1rem; color: var(--amber); font-weight: 500; letter-spacing: -.02em; }
.dep-clock [hidden] { display: none; }
/* Fenêtre close : la couleur change avec le sens, sinon un message d'expiration
   en ambre se lit comme le compte à rebours qu'il remplace. */
.dep-clock.is-over { background: rgba(255,111,111,.07); color: #ffc9c9; }
.dep-clock.is-over .ic { color: var(--red); }

/* Fenêtre CLOSE alors que le moteur dit encore « waiting » : les instructions
   de dépôt s'effacent — « Send exactly 80 USDT », un QR et une adresse, c'est
   une invitation à envoyer vers un prix qui n'existe plus. À la place : le
   message, et le redémarrage en un clic. L'adresse reste consultable derrière
   un repli, pour qui a déjà envoyé. */
.dep.is-expired .dep-head,
.dep.is-expired .dep-grid { display: none; }
.dep.is-expired .dep-clock { border-top: 0; }
.dep-late {
  display: flex; flex-direction: column; align-items: flex-start; gap: 14px;
  padding: clamp(18px, 2vw, 26px); border-top: 1px solid var(--line);
}
.dep-late[hidden] { display: none; }
.dep-late .opt { width: 100%; }

/* État après dépôt */
.ostate {
  display: flex; flex-direction: column; align-items: flex-start; gap: 15px;
  padding: clamp(24px, 2.6vw, 36px); border-radius: var(--r-xl);
  border: 1px solid var(--line-2);
  background: linear-gradient(176deg, var(--ink-800), var(--ink-850) 62%);
  box-shadow: var(--sh-card);
}
.ostate-hx {
  width: 56px; height: 63px; flex: none; display: grid; place-items: center;
  clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
  background: rgba(255,158,44,.3);
}
.ostate-hx-in {
  width: 50px; height: 56.2px; display: grid; place-items: center;
  clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
  background: linear-gradient(180deg, var(--ink-650), var(--ink-750));
}
.ostate-hx-in .ic { color: var(--amber); }
.ostate.is-live .ostate-hx { animation: waitpulse 2.6s ease-in-out infinite; }
.ostate.is-done .ostate-hx { background: linear-gradient(180deg, var(--mint), #0f7d5c); filter: drop-shadow(0 0 13px rgba(53,214,164,.32)); }
.ostate.is-done .ostate-hx-in { background: linear-gradient(180deg, #0c1a16, #0a1210); }
.ostate.is-done .ostate-hx-in .ic { color: var(--mint); stroke-width: 2.2; }
.ostate.is-bad .ostate-hx { background: rgba(255,111,111,.34); }
.ostate.is-bad .ostate-hx-in .ic { color: var(--red); }
.ostate h2 { font-size: clamp(1.25rem, 1rem + 1vw, 1.625rem); letter-spacing: -.032em; }
.ostate-p { font-size: .9375rem; color: var(--txt-2); line-height: 1.66; max-width: 62ch; }
.ostate-p b { color: var(--txt); font-weight: 560; }
.ostate .btn { margin-top: 6px; }

.ohash { width: 100%; display: flex; flex-direction: column; gap: 12px; margin-top: 4px; }
.ohash > div { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.ohash dt { font-size: .71875rem; font-weight: 560; letter-spacing: .06em; text-transform: uppercase; color: var(--txt-3); }
.ohash dd { margin: 0; display: flex; align-items: center; gap: 12px; flex-wrap: wrap; min-width: 0; }
.ohash code {
  font-family: var(--fm); font-size: .75rem; color: var(--txt-2);
  word-break: break-all; padding: 7px 10px; border-radius: var(--r-sm);
  border: 1px solid var(--line); background: rgba(0,0,0,.3); min-width: 0; flex: 1;
}
.ohash a { display: inline-flex; align-items: center; gap: 6px; flex: none; font-size: .75rem; color: var(--txt-3); }
.ohash a:hover { color: var(--amber); }
.ohash-note { font-size: .71875rem; color: var(--txt-3); line-height: 1.55; }

/* Le reçu */
.keep {
  display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
  padding: 18px 20px; border-radius: var(--r-lg);
  border: 1px dashed var(--line-3); background: rgba(255,255,255,.018);
}
.keep-hx {
  width: 38px; height: 42px; flex: none; display: grid; place-items: center;
  clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
  background: rgba(255,158,44,.3);
}
.keep-hx-in {
  width: 33px; height: 37px; display: grid; place-items: center;
  clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
  background: var(--ink-800);
}
.keep-hx-in .ic { width: 16px; height: 16px; color: var(--amber); }
.keep-t { flex: 1; min-width: 200px; }
.keep-t b { font-size: .9375rem; font-weight: 600; letter-spacing: -.016em; }
.keep-t p { font-size: .8125rem; color: var(--txt-3); line-height: 1.55; margin-top: 4px; }

/* Carte d'ordre */
.ocard {
  position: sticky; top: calc(var(--hdr-h) + 18px);
  border: 1px solid var(--line-2); border-radius: var(--r-xl);
  background: linear-gradient(176deg, var(--ink-750), var(--ink-850) 60%);
  box-shadow: var(--sh-card); padding: clamp(18px, 2vw, 24px);
}
/* Suivi. Hexagones : la même forme que les nœuds du tracé et les numéros
   d'étape de l'accueil. */
.tline { display: flex; flex-direction: column; }
.tl { position: relative; display: flex; gap: 13px; padding-bottom: 18px; }
.tl:last-child { padding-bottom: 0; }
.tl::before {
  content: ''; position: absolute; left: 15px; top: 34px; bottom: 4px; width: 1px;
  background: var(--line-2);
}
.tl:last-child::before { display: none; }
.tl.is-done::before { background: rgba(255,158,44,.4); }
.tl-hx {
  width: 31px; height: 35px; flex: none; display: grid; place-items: center; z-index: 1;
  clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
  background: var(--line-2); transition: background .3s;
}
.tl-hx-in {
  width: 26px; height: 29.2px; display: grid; place-items: center;
  clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
  background: var(--ink-800);
  font-family: var(--fm); font-size: .6875rem; color: var(--txt-3);
}
.tl-hx-in > * { grid-area: 1 / 1; }
.tl-hx-in .ic { width: 13px; height: 13px; stroke-width: 2.6; opacity: 0; }
.tl-hx-in i { font-style: normal; }
.tl-t { display: flex; flex-direction: column; gap: 2px; min-width: 0; padding-top: 4px; }
.tl-t b { font-size: .875rem; font-weight: 600; letter-spacing: -.014em; color: var(--txt-3); }
.tl-t i { font-style: normal; font-size: .75rem; color: var(--txt-3); opacity: .8; line-height: 1.45; }
.tl.is-done .tl-hx { background: rgba(255,158,44,.42); }
.tl.is-done .tl-hx-in { background: var(--ink-750); color: transparent; }
.tl.is-done .tl-hx-in .ic { opacity: 1; color: var(--amber); }
.tl.is-done .tl-hx-in i { opacity: 0; }
.tl.is-done .tl-t b { color: var(--txt-2); }
.tl.is-now .tl-hx {
  background: linear-gradient(180deg, var(--amber-2), var(--amber-dk));
  filter: drop-shadow(0 0 10px rgba(255,158,44,.4));
  animation: nowpulse 2.2s ease-in-out infinite;
}
.tl.is-now .tl-hx-in { background: #14100a; color: var(--amber-2); }
.tl.is-now .tl-t b { color: var(--txt); }
.tl.is-now .tl-t i { color: var(--txt-2); opacity: 1; }
@keyframes nowpulse {
  0%, 100% { filter: drop-shadow(0 0 8px rgba(255,158,44,.34)); }
  50%      { filter: drop-shadow(0 0 16px rgba(255,158,44,.6)); }
}
.tl.is-off { opacity: .55; }

.ocard-rule { height: 1px; background: var(--line); margin: 20px 0 16px; }
.ofacts { display: flex; flex-direction: column; gap: 13px; }
.ofacts > div { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.ofacts dt { font-size: .6875rem; font-weight: 600; letter-spacing: .07em; text-transform: uppercase; color: var(--txt-3); }
.ofacts dt em { font-style: normal; font-weight: 400; letter-spacing: .03em; opacity: .75; }
.ofacts dd { margin: 0; min-width: 0; font-size: .9375rem; color: var(--txt); letter-spacing: -.016em; }
.ofacts dd i { display: block; font-style: normal; font-family: var(--ff); font-size: .71875rem; color: var(--txt-3); letter-spacing: 0; margin-top: 2px; }

.ocard-live {
  display: flex; align-items: center; gap: 9px; margin-top: 18px;
  padding-top: 15px; border-top: 1px solid var(--line);
  font-size: .75rem; color: var(--txt-3);
}
.ocard-help { margin-top: 10px; font-size: .75rem; color: var(--txt-3); }
.ocard-help a { color: var(--txt-2); border-bottom: 1px solid var(--line-2); }
.ocard-help a:hover { color: var(--amber); }

/* ═══════════════════════════ /track ═══════════════════════════════════════
   [!] DEUXIÈME VERSION. La première : un champ dans une colonne de 860 px, qui
   redirigeait à l'aveugle (identifiant mal recopié = atterrissage sur une 404),
   et une liste locale réduite à un identifiant et une heure.
   Celle-ci : pleine largeur — l'outil à gauche, le mode d'emploi à droite —,
   l'ordre vérifié SUR PLACE avant de quitter la page, et la liste « sur cet
   appareil » devenue un tableau de bord avec le statut en direct de chaque
   ordre : un historique, sans compte.
   ═══════════════════════════════════════════════════════════════════════════ */

/* Surface « instrument » : le dégradé et le liseré ambré du module d'échange.
   Le même objet, partout où le visiteur AGIT. */
.inst {
  position: relative; border-radius: var(--r-xl);
  background: linear-gradient(176deg, #141b27 0%, #0d121b 46%, #0b1018 100%);
  border: 1px solid var(--line-2); box-shadow: var(--sh-lift);
}
.inst::before {
  content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: linear-gradient(180deg, rgba(255,158,44,.22), transparent 26%);
  -webkit-mask: linear-gradient(#000, #000) content-box, linear-gradient(#000, #000);
  mask: linear-gradient(#000, #000) content-box, linear-gradient(#000, #000);
  -webkit-mask-composite: xor; mask-composite: exclude;
  padding: 1px;
}

.tkg {
  display: grid; grid-template-columns: minmax(0, 1fr) 360px;
  gap: clamp(24px, 2.8vw, 44px); align-items: start;
}
.tk-main { display: flex; flex-direction: column; gap: 20px; min-width: 0; }
.tk-card { padding: clamp(20px, 2.2vw, 28px); min-width: 0; }
.tk-recent {
  border-radius: var(--r-xl); border: 1px solid var(--line-2);
  background: linear-gradient(176deg, var(--ink-800), var(--ink-850) 62%);
  box-shadow: var(--sh-card);
}

.tk-h { display: flex; align-items: center; gap: 13px; min-width: 0; }
.tk-h h2 { font-size: 1.0625rem; font-weight: 620; letter-spacing: -.022em; }
.tk-h p { margin-top: 3px; font-size: .78125rem; color: var(--txt-3); line-height: 1.5; }
.tk-h code { font-family: var(--fm); font-size: .92em; color: var(--txt-2); }

/* Le champ */
.tk-row { position: relative; display: flex; gap: 11px; align-items: stretch; margin-top: 18px; }
.tk-field { position: relative; flex: 1; min-width: 0; display: flex; }
.tk-in {
  flex: 1; min-width: 0; height: 58px; padding: 0 16px 0 46px;
  border: 1px solid var(--line-2); border-radius: var(--r-lg);
  background: rgba(0,0,0,.4); color: var(--txt);
  font-size: 1rem; letter-spacing: .01em;
  transition: border-color .16s, background .16s;
}
.tk-field .tk-in { padding-left: 18px; }
.tk-field.has-paste .tk-in { padding-right: 100px; }
.tk-in::placeholder { color: var(--txt-3); font-family: var(--ff); letter-spacing: -.008em; }
.tk-in:focus { outline: none; border-color: rgba(255,158,44,.5); background: rgba(0,0,0,.52); }
.tk-row .btn { flex: none; height: 58px; padding: 0 24px; border-radius: var(--r-lg); }
.tk-go[disabled] { opacity: .7; cursor: progress; }
.tk-card.is-bad .tk-in { border-color: rgba(255,111,111,.5); background: rgba(255,111,111,.05); }
.tk-card.is-ok  .tk-in { border-color: rgba(53,214,164,.46); }
.tk-card.is-nudge .tk-row { animation: nudge .36s ease; }
.tk-msg { font-size: .8125rem; color: var(--txt-3); margin-top: 10px; min-height: 1.5em; line-height: 1.5; }
.tk-msg.is-bad { color: #ffb3b3; }
.tk-msg.is-ok { color: var(--mint); }
.tk-msg code {
  font-family: var(--fm); font-size: .95em; padding: 1px 5px; border-radius: 4px;
  color: var(--txt); background: rgba(255,255,255,.07);
}

/* Formulaire de recherche réemployé tel quel par /support. */
.tk-form {
  padding: clamp(22px, 2.4vw, 30px); border-radius: var(--r-xl);
  border: 1px solid var(--line-2);
  background: linear-gradient(176deg, var(--ink-800), var(--ink-850) 62%);
  box-shadow: var(--sh-card);
}
.tk-form .tk-row { margin-top: 0; }
.tk-lab { display: block; font-size: .8125rem; font-weight: 560; color: var(--txt-2); margin-bottom: 9px; }
.tk-pre { position: absolute; left: 15px; top: 0; bottom: 0; display: grid; place-items: center; color: var(--txt-3); pointer-events: none; }
.tk-form.is-bad .tk-in { border-color: rgba(255,111,111,.5); }

/* Sur cet appareil — le tableau de bord */
.no-js [data-recent] { display: none; }
.tk-recent-h { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.tk-recent-h .linkish { flex: none; font-size: .78125rem; margin-top: 4px; }
.tk-recent-h .linkish[hidden] { display: none; }
.tk-list { display: flex; flex-direction: column; gap: 8px; margin-top: 18px; }
.tk-list:empty { display: none; }
.tk-it { position: relative; display: flex; align-items: stretch; gap: 0; }
.tk-it-a {
  flex: 1; min-width: 0; display: grid; align-items: center; column-gap: 14px;
  grid-template-columns: auto minmax(0, 1fr) auto auto;
  padding: 12px 14px; border-radius: var(--r-md) 0 0 var(--r-md);
  border: 1px solid var(--line); border-right: 0; background: rgba(0,0,0,.26);
  transition: border-color .15s, background .15s;
}
.tk-it:hover .tk-it-a, .tk-it:hover .tk-it-x { border-color: rgba(255,158,44,.34); }
.tk-it-a:hover { background: rgba(255,158,44,.05); }
.tk-it-ics { display: flex; align-items: center; flex: none; min-width: 46px; }
.tk-it-ics img, .tk-it-ics span {
  width: 28px; height: 28px; border-radius: 50%; flex: none;
  box-shadow: 0 0 0 2px #0e141d; background: var(--ink-650);
}
.tk-it-ics > * + * { margin-left: -8px; }
/* L'actif ENVOYE au premier plan : c'est lui qu'on reconnait d'abord, et l'ordre
   de lecture (de gauche a droite) est aussi celui de l'echange. */
.tk-it-ics > :first-child { position: relative; z-index: 1; }
.tk-it-t { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.tk-it-t b { font-size: .9063rem; font-weight: 600; letter-spacing: -.016em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tk-it-t i { font-style: normal; font-family: var(--fm); font-size: .71875rem; color: var(--txt-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tk-it-ago { font-size: .71875rem; color: var(--txt-3); white-space: nowrap; min-width: 62px; text-align: right; }
.tk-it-x {
  flex: none; width: 40px; display: grid; place-items: center; color: var(--txt-3);
  border: 1px solid var(--line); border-radius: 0 var(--r-md) var(--r-md) 0; background: rgba(0,0,0,.26);
  transition: color .15s, background .15s, border-color .15s;
}
.tk-it-x:hover { color: var(--red); background: rgba(255,111,111,.08); }
.tk-it-x .ic { width: 14px; height: 14px; }

/* Pastille de statut. La couleur porte le sens avant le mot. */
.tk-st {
  display: inline-flex; align-items: center; gap: 7px; white-space: nowrap;
  font-size: .71875rem; font-weight: 600; letter-spacing: .01em;
  padding: 5px 10px; border-radius: 999px; border: 1px solid var(--line-2); color: var(--txt-3);
}
.tk-st::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex: none; }
.tk-st.is-wait { color: var(--amber); border-color: rgba(255,158,44,.34); background: rgba(255,158,44,.08); }
.tk-st.is-run  { color: var(--amber-2); border-color: rgba(255,158,44,.34); background: rgba(255,158,44,.08); }
.tk-st.is-run::before { animation: blink 1.4s ease-in-out infinite; }
.tk-st.is-done { color: var(--mint); border-color: rgba(53,214,164,.36); background: rgba(53,214,164,.08); }
.tk-st.is-dead { color: #ff9c9c; border-color: rgba(255,111,111,.3); background: rgba(255,111,111,.06); }
.tk-st.is-unk::before { animation: blink 1.4s ease-in-out infinite; }
@keyframes blink { 0%, 100% { opacity: 1; } 50% { opacity: .25; } }

.tk-empty {
  margin-top: 18px; padding: 20px; border-radius: var(--r-md);
  border: 1px dashed var(--line-2); display: flex; align-items: center; gap: 18px; flex-wrap: wrap;
}
.tk-empty[hidden] { display: none; }
.tk-empty p { flex: 1 1 320px; font-size: .8438rem; color: var(--txt-3); line-height: 1.6; }
.tk-empty b { color: var(--txt-2); font-weight: 600; }
.tk-recent-n {
  display: flex; align-items: flex-start; gap: 8px; margin-top: 16px;
  font-size: .71875rem; color: var(--txt-3); line-height: 1.55;
}
.tk-recent-n .ic { flex: none; margin-top: 2px; opacity: .7; }

/* Le rail */
.tk-rail { position: sticky; top: calc(var(--hdr-h) + 18px); min-width: 0; padding-top: 4px; }
.tk-rail .kicker { margin-bottom: 18px; }
.tk-facts { display: flex; flex-direction: column; gap: 18px; }
.tk-facts li { display: flex; gap: 13px; align-items: flex-start; min-width: 0; }
.tk-facts b { display: block; font-size: .875rem; font-weight: 620; letter-spacing: -.016em; }
.tk-facts p { margin-top: 4px; font-size: .8125rem; color: var(--txt-3); line-height: 1.58; }
.tk-lost {
  margin-top: 26px; padding: 18px; border-radius: var(--r-lg);
  border: 1px solid var(--line-2); background: rgba(255,255,255,.016);
}
.tk-lost-h { display: flex; align-items: center; gap: 9px; font-size: .875rem; font-weight: 620; letter-spacing: -.016em; }
.tk-lost-h .ic { color: var(--amber); }
.tk-lost ol { counter-reset: tl; display: flex; flex-direction: column; gap: 9px; margin-top: 13px; }
.tk-lost ol li {
  counter-increment: tl; position: relative; padding-left: 28px;
  font-size: .8125rem; color: var(--txt-2); line-height: 1.55;
}
.tk-lost ol li::before {
  content: counter(tl); position: absolute; left: 0; top: 1px;
  width: 19px; height: 19px; display: grid; place-items: center; border-radius: 6px;
  font-family: var(--fm); font-size: .6875rem; color: var(--amber-2);
  background: rgba(255,158,44,.1); border: 1px solid rgba(255,158,44,.24);
}
.tk-lost ol b { color: var(--txt); font-weight: 600; }
.tk-lost a { color: var(--amber); border-bottom: 1px solid rgba(255,158,44,.34); }
.tk-lost > p:last-child { margin-top: 13px; font-size: .75rem; color: var(--txt-3); line-height: 1.58; }

@media (max-width: 1080px) {
  .tkg { grid-template-columns: minmax(0, 1fr); }
  .tk-rail { position: static; }
  .tk-facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
}
@media (max-width: 760px) {
  .tk-facts { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  /* La ligne d'ordre passe sur deux rangées : l'identité, puis l'état. */
  .tk-it-a { grid-template-columns: auto minmax(0, 1fr) auto; row-gap: 9px; }
  /* [!] Le libelle de paire prend TOUTE la premiere rangee et peut passer a la
     ligne : tronque, il donnait « 60 USDT -> X… » — l'actif recu, la seule chose
     qui distingue deux ordres, etait justement ce qui sautait. */
  .tk-it-t { grid-column: 2 / 4; }
  .tk-it-t b { white-space: normal; }
  .tk-it-a .tk-st { grid-column: 2 / 3; grid-row: 2; justify-self: start; }
  .tk-it-ago { grid-column: 3; grid-row: 2; align-self: center; min-width: 0; }
}
@media (max-width: 640px) {
  .tk-recent-h { flex-direction: column; gap: 10px; }
}

/* ── Adaptatif des pages intérieures ─────────────────────────────────────── */
@media (max-width: 1080px) {
  .og { grid-template-columns: minmax(0, 1fr); }
  /* [!] La carte d'ordre ne remonte PAS : ce qu'on est venu chercher sur
     /order, c'est l'adresse de dépôt et le QR. La remonter « par symétrie »
     enterrerait l'action de la page sous un récapitulatif. */
  .ocard { position: static; }
}
@media (max-width: 900px) {
  .dep-grid { grid-template-columns: minmax(0, 1fr); }
  .dep-qr { align-items: flex-start; }
}
@media (max-width: 640px) {
  .flow-l { display: none; }
  .flow-s:where(.is-now) .flow-l { display: block; }
  .flow-s + .flow-s::before { width: 16px; margin: 0 8px; }
  /* Le tracé suit les règles du héros (.route en 640) : il rétrécit, il ne disparaît pas. */
  .tk-row { flex-direction: column; }
  .tk-row .btn { width: 100%; }
  .dep-head { flex-direction: column; align-items: flex-start; gap: 14px; }
  .qr { width: 100%; max-width: 220px; height: auto; aspect-ratio: 1; }
  .keep { flex-direction: column; align-items: flex-start; }
  .ohash code { flex: 1 1 100%; }
}

/* ═══════════════════════ /assets — L'ANNUAIRE ══════════════════════════════
   [!] DEUXIÈME VERSION. La première posait 1 283 cartes à la suite — 23 000 px
   sur un écran de bureau, ~77 000 px sur mobile — et la recherche arrivait
   après 900 px. Ici : la recherche d'abord (collante), un index A–Z, des lignes
   denses regroupées par lettre, et des groupes repliés sur mobile.
   ═══════════════════════════════════════════════════════════════════════════ */
.adir { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.arow a {
  display: flex; align-items: center; gap: 11px; min-width: 0; height: 100%;
  padding: 9px 12px; border-radius: var(--r-md);
  border: 1px solid var(--line); background: var(--ink-850);
  transition: border-color .15s, background .15s;
}
.arow a:hover { border-color: rgba(255,158,44,.36); background: var(--ink-750); }
.arow-ic { width: 26px; height: 26px; border-radius: 50%; flex: none; }
.arow-t { display: flex; flex-direction: column; min-width: 0; flex: 1; line-height: 1.22; }
.arow-t b { font-size: .8438rem; font-weight: 620; letter-spacing: -.016em; }
.arow-t i { font-style: normal; font-size: .6875rem; color: var(--txt-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.arow-tags { display: flex; align-items: center; gap: 5px; flex: none; }
.chip-fix { display: inline-grid; place-items: center; padding: 3px 5px; color: var(--amber); border-color: rgba(255,158,44,.3); }
.chip-fix .ic { opacity: 1; width: 11px; height: 11px; }
.arow[hidden] { display: none; }

/* La barre de recherche COLLE sous l'en-tête : sur mille lignes, un filtre qu'il
   faut remonter chercher n'est pas un filtre. */
.adir-bar {
  position: sticky; top: calc(var(--hdr-h) + 8px); z-index: 20;
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  padding: 10px 12px; border-radius: var(--r-lg);
  border: 1px solid var(--line-2); background: rgba(8,11,17,.94);
  backdrop-filter: blur(10px); box-shadow: 0 18px 40px -28px rgba(0,0,0,.95);
}
.adir-search { position: relative; flex: 1 1 300px; min-width: 0; }
.adir-search > .ic { position: absolute; left: 14px; top: 50%; margin-top: -10px; color: var(--txt-3); pointer-events: none; }
.adir-search input {
  width: 100%; height: 46px; padding: 0 44px 0 42px;
  border: 1px solid var(--line-2); border-radius: var(--r-md);
  background: rgba(0,0,0,.42); color: var(--txt); font-size: .9375rem;
  transition: border-color .16s;
}
.adir-search input:focus { outline: none; border-color: rgba(255,158,44,.5); }
.adir-search input::-webkit-search-cancel-button { filter: invert(.6); }
/* Le raccourci « / » — montré seulement là où il y a un clavier. */
.adir-kbd {
  position: absolute; right: 12px; top: 50%; margin-top: -11px;
  width: 22px; height: 22px; display: grid; place-items: center;
  font-family: var(--fm); font-size: .6875rem; color: var(--txt-3);
  border: 1px solid var(--line-2); border-radius: 6px; pointer-events: none;
}
.adir-search input:focus ~ .adir-kbd,
.adir-search input:not(:placeholder-shown) ~ .adir-kbd { display: none; }
.adir-sel { display: flex; align-items: center; gap: 9px; flex: none; }
.adir-sel > span { font-size: .75rem; color: var(--txt-3); }
.adir-sel select {
  height: 46px; max-width: 210px; padding: 0 10px;
  border: 1px solid var(--line-2); border-radius: var(--r-md);
  background: var(--ink-750); color: var(--txt); font-size: .8125rem;
}
.adir-chk { display: flex; align-items: center; gap: 8px; flex: none; cursor: pointer; font-size: .8125rem; color: var(--txt-2); }
.adir-chk span { display: inline-flex; align-items: center; gap: 5px; }
.adir-chk .ic { opacity: 1; color: var(--amber); }
.adir-chk input { width: 16px; height: 16px; accent-color: var(--amber); cursor: pointer; }
.adir-count { margin-left: auto; font-size: .75rem; color: var(--txt-3); font-family: var(--fm); flex: none; }
.adir-more { display: none; }

/* L'index A–Z. Une lettre sans résultat pendant un filtrage s'éteint. */
.adir-az { display: flex; flex-wrap: wrap; gap: 4px; margin: 14px 0 0; }
.adir-az a {
  min-width: 32px; height: 32px; padding: 0 6px; display: grid; place-items: center;
  border-radius: 8px; border: 1px solid var(--line);
  font-family: var(--fm); font-size: .75rem; color: var(--txt-2);
  transition: color .14s, border-color .14s, background .14s;
}
.adir-az a:hover { color: var(--amber); border-color: rgba(255,158,44,.4); background: rgba(255,158,44,.06); }
.adir-az a.is-off { opacity: .28; pointer-events: none; }

.adir-h { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin: 34px 0 14px; }
.adir-h h2 { font-size: 1.125rem; letter-spacing: -.026em; }
.adir-h p { display: inline-flex; align-items: center; gap: 6px; font-size: .75rem; color: var(--txt-3); }
.adir-h p .ic { opacity: 1; color: var(--amber); }
.adir-h2 { margin-top: 38px; }
.adir-intro[hidden], .adir-h[hidden] { display: none; }

/* Le noyau de paires, en liens explorables. */
.adir-pairs { display: flex; flex-wrap: wrap; gap: 8px; }
.adir-pairs a {
  display: inline-flex; align-items: center; gap: 7px; height: 34px; padding: 0 12px;
  border-radius: 999px; border: 1px solid var(--line); background: var(--ink-850);
  font-size: .78125rem; color: var(--txt-2); white-space: nowrap;
  transition: color .14s, border-color .14s;
}
.adir-pairs a i { font-style: normal; color: var(--txt-3); }
.adir-pairs a:hover { color: var(--amber); border-color: rgba(255,158,44,.4); }

/* Un groupe par lettre. [!] `content-visibility: auto` : le navigateur ne met en
   page que les groupes qui approchent de l'écran — c'est ce qui rend 1 283 lignes
   rendues par le serveur aussi légères qu'une page courte, sans une ligne de
   script. `contain-intrinsic-size: auto …` réserve une hauteur plausible, puis
   retient la vraie : la barre de défilement ne saute pas. */
.ag { content-visibility: auto; contain-intrinsic-size: auto 420px; scroll-margin-top: calc(var(--hdr-h) + 84px); }
.ag[hidden] { display: none; }
/* Rendu complet : après le premier saut de l'index (positions exactes), et sans
   JavaScript — là, rien ne peut corriger un saut d'ancre qui atterrit à côté. */
[data-adir-root].cv-off .ag, .no-js .ag { content-visibility: visible; }
.ag-h { margin: 26px 0 10px; font-size: 1rem; }
.ag-h button {
  display: flex; align-items: center; gap: 12px; width: 100%; text-align: left;
  cursor: default; padding: 0;
}
.ag-l {
  min-width: 34px; height: 34px; padding: 0 8px; display: grid; place-items: center;
  border-radius: 9px; background: rgba(255,158,44,.1); border: 1px solid rgba(255,158,44,.24);
  font-family: var(--fm); font-size: .875rem; font-weight: 600; color: var(--amber-2);
}
.ag-n { font-size: .75rem; font-weight: 400; color: var(--txt-3); letter-spacing: 0; }
.ag-h .faq-ch { display: none; margin-left: auto; color: var(--txt-3); }

.adir-empty { padding: 44px 20px; text-align: center; font-size: .875rem; color: var(--txt-3); }
.adir-empty[hidden] { display: none; }
.adir-empty b { color: var(--txt-2); font-family: var(--fm); font-weight: 500; }

/* ═══════════════════════ /swap/<paire> ═════════════════════════════════════ */
.prg {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 486px);
  gap: clamp(24px, 3vw, 54px); align-items: start;
}
.pr-info { display: flex; flex-direction: column; min-width: 0; }
.pr-info > .route { margin-top: 4px; }

.pr-facts {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px; margin-top: 34px;
  border: 1px solid var(--line-2); border-radius: var(--r-lg); overflow: hidden;
  background: var(--line);
}
.pr-facts > div { padding: 18px 20px; background: var(--ink-850); min-width: 0; }
.pr-facts dt { font-size: .6875rem; font-weight: 620; letter-spacing: .07em; text-transform: uppercase; color: var(--txt-3); }
.pr-facts dd {
  margin: 7px 0 0; font-size: 1.0625rem; font-weight: 560;
  letter-spacing: -.024em; color: var(--txt);
}
.pr-facts p { margin-top: 8px; font-size: .78125rem; color: var(--txt-3); line-height: 1.58; }

/* Le barème. Un VRAI tableau : c'est une comparaison ligne par ligne, et
   `<th scope>` le rend lisible au lecteur d'écran sans un attribut de plus. */
.ladder-wrap { border: 1px solid var(--line-2); border-radius: var(--r-lg); overflow: hidden; background: var(--ink-850); }
.ladder { width: 100%; border-collapse: collapse; }
.ladder th, .ladder td { padding: 15px clamp(14px, 1.6vw, 22px); text-align: right; }
.ladder thead th {
  font-size: .6875rem; font-weight: 620; letter-spacing: .07em; text-transform: uppercase;
  color: var(--txt-3); background: rgba(255,255,255,.022);
  border-bottom: 1px solid var(--line-2);
}
.ladder thead th:first-child, .ladder tbody th { text-align: left; }
.ladder tbody tr { border-bottom: 1px solid var(--line); }
.ladder tbody tr:last-child { border-bottom: 0; }
.ladder tbody th { font-size: .9375rem; font-weight: 500; color: var(--txt); letter-spacing: -.02em; }
.ladder tbody td { font-size: .875rem; color: var(--txt-2); letter-spacing: -.016em; }
.ladder .is-out { color: var(--txt); font-weight: 500; }
.ladder span { color: var(--txt-3); font-size: .78em; margin-left: 3px; }
.ladder .is-cost { color: var(--txt-3); font-family: var(--fm); font-size: .8125rem; }
.ladder .is-best { color: var(--mint); font-size: .75rem; letter-spacing: .01em; }
.ladder-note { margin-top: 14px; font-size: .75rem; color: var(--txt-3); line-height: 1.6; max-width: 76ch; }

/* ── « How to » : trois cartes PLEINE LARGEUR, reliées par le tracé ─────────
   La première version reprenait les colonnes de texte de l'accueil : trois
   paragraphes flottant dans 1 276 px, que rien ne distinguait d'une page à
   l'autre. Ici chaque étape est une carte qui porte, en pied, les CHIFFRES de
   la paire (minimum, format d'adresse, réseau, délai) : on balaie les trois
   pieds de carte et on sait tout, sans lire une phrase. Le pointillé et son
   point qui circule sont ceux du tracé du héros — l'identité, là où elle sert. */
.sec-head-row {
  max-width: none; display: flex; align-items: flex-end; justify-content: space-between;
  gap: 20px 32px; flex-wrap: wrap;
}
.sec-head-row > div { max-width: 60ch; }
.sec-head-row > .btn { flex: none; }

.howto { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 44px; }
.hw {
  position: relative; min-width: 0; display: flex; flex-direction: column; gap: 12px;
  padding: clamp(18px, 1.9vw, 26px); border-radius: var(--r-lg);
  border: 1px solid var(--line-2);
  background: linear-gradient(176deg, var(--ink-800), var(--ink-850) 62%);
  box-shadow: var(--sh-card);
}
.hw-end { border-color: rgba(255,158,44,.26); background: linear-gradient(174deg, #1a1710, var(--ink-850) 58%); }
.hw-top { display: flex; align-items: center; gap: 10px; margin-bottom: 2px; }
.hw h3 { font-size: 1.0938rem; letter-spacing: -.022em; line-height: 1.25; }
.hw > p { font-size: .875rem; color: var(--txt-3); line-height: 1.62; }
.hw > p b { color: var(--txt-2); font-weight: 580; }
.hw-spec {
  margin-top: auto; padding-top: 14px; border-top: 1px solid var(--line);
  display: flex; flex-direction: column; gap: 9px;
}
.hw-spec > div { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; min-width: 0; }
.hw-spec dt { flex: none; font-size: .6875rem; font-weight: 620; letter-spacing: .07em; text-transform: uppercase; color: var(--txt-3); }
.hw-spec dd { margin: 0; min-width: 0; text-align: right; font-size: .8125rem; color: var(--txt); letter-spacing: -.012em; }
/* Le lien entre deux cartes : le pointillé du tracé, à hauteur des hexagones, et
   le point ambré qui le parcourt — d'abord le dépôt, puis le versement. */
.hw:not(:last-child)::after {
  content: ''; position: absolute; left: 100%; top: calc(clamp(18px, 1.9vw, 26px) + 23px);
  width: 44px; height: 2px; margin-left: 1px;
  background-image: radial-gradient(circle, rgba(255,255,255,.34) 1px, transparent 1.2px);
  background-size: 7px 2px; background-repeat: repeat-x; background-position: center;
}
.hw:not(:last-child)::before {
  content: ''; position: absolute; left: 100%; top: calc(clamp(18px, 1.9vw, 26px) + 21.5px);
  width: 5px; height: 5px; border-radius: 50%; z-index: 1;
  background: var(--amber-2); box-shadow: 0 0 9px 1px rgba(255,158,44,.85);
  animation: hwdot 3.6s linear infinite;
}
.hw:nth-child(2)::before { animation-delay: 1.8s; }
@keyframes hwdot {
  0%   { transform: translateX(0); opacity: 0; }
  8%   { opacity: 1; }
  42%  { opacity: 1; }
  50%  { transform: translateX(40px); opacity: 0; }
  100% { transform: translateX(40px); opacity: 0; }
}

/* Fiches d'actifs */
.card-coin { width: 28px; height: 28px; border-radius: 50%; flex: none; }
.card p a, .card-foot a { color: var(--amber); border-bottom: 1px solid rgba(255,158,44,.34); }
.card p a:hover, .card-foot a:hover { color: var(--amber-2); border-bottom-color: var(--amber-2); }

/* Texte réservé aux lecteurs d'écran (légende de tableau, etc.). */
.sr-only {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

/* ── Adaptatif ───────────────────────────────────────────────────────────── */
@media (max-width: 1180px) {
  .adir { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .howto { gap: 28px; }
  .hw:not(:last-child)::after { width: 28px; }
  .hw:not(:last-child)::before { animation-name: hwdot-s; }
}
@keyframes hwdot-s {
  0%   { transform: translateX(0); opacity: 0; }
  8%   { opacity: 1; }
  42%  { opacity: 1; }
  50%  { transform: translateX(24px); opacity: 0; }
  100% { transform: translateX(24px); opacity: 0; }
}
@media (max-width: 1080px) {
  .prg { grid-template-columns: minmax(0, 1fr); }
  /* Le module remonte : c'est l'action de la page, elle ne doit pas être sous
     un écran de défilement. L'ordre du DOM reste celui de la lecture. */
  .prg > .swap { order: -1; max-width: 486px; width: 100%; }
  .pr-facts { margin-top: 30px; }
}
@media (max-width: 860px) {
  .adir { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* « How to » en colonne : le lien devient vertical, sous l'hexagone. */
  .howto { grid-template-columns: minmax(0, 1fr); gap: 26px; }
  .hw:not(:last-child)::after {
    left: calc(clamp(18px, 1.9vw, 26px) + 21px); top: 100%; width: 2px; height: 26px; margin: 0;
    background-image: radial-gradient(circle, rgba(255,255,255,.34) 1px, transparent 1.2px);
    background-size: 2px 7px; background-repeat: repeat-y;
  }
  .hw:not(:last-child)::before { display: none; }
}
@media (max-width: 640px) {
  .pr-facts { grid-template-columns: minmax(0, 1fr); }
  /* Un tableau de quatre colonnes ne rentre pas : il défile, dans SA boîte. */
  .ladder-wrap { overflow-x: auto; }
  .ladder { min-width: 470px; }

  /* L'annuaire sur mobile : la recherche seule reste collée ; les deux filtres
     passent dessous ; l'index A–Z s'efface (les groupes repliés EN tiennent
     lieu) ; chaque lettre devient une barre qu'on déplie. */
  .adir-bar { top: calc(var(--hdr-h) + 6px); padding: 8px; gap: 8px; }
  .adir-search { flex: 1 1 0; }
  .adir-kbd { display: none; }
  .adir-more {
    display: grid; place-items: center; flex: none; width: 46px; height: 46px;
    border-radius: var(--r-md); border: 1px solid var(--line-2); background: var(--ink-750);
    color: var(--txt-2);
  }
  .adir-bar.is-more .adir-more,
  .adir-bar.has-filter .adir-more { color: var(--amber); border-color: rgba(255,158,44,.45); }
  /* Les filtres : repliés tant qu'on ne les demande pas. Sans JavaScript, ouverts. */
  .adir-sel, .adir-chk { display: none; }
  .adir-bar.is-more .adir-sel, .adir-bar.is-more .adir-chk,
  .no-js .adir-sel, .no-js .adir-chk { display: flex; }
  .no-js .adir-more { display: none; }
  .adir-sel { flex: 1 1 0; min-width: 0; }
  .adir-sel > span { display: none; }
  .adir-sel select { width: 100%; max-width: none; height: 40px; }
  .adir-chk { height: 40px; }
  .adir-count { flex: 1 1 100%; margin: 0; text-align: right; display: none; }
  [data-adir-root].is-filtering .adir-count { display: block; }
  .adir-az { display: none; }

  /* Les paires populaires : UNE rangée qui défile, au lieu de 500 px de pastilles. */
  .adir-pairs {
    flex-wrap: nowrap; overflow-x: auto; margin-inline: calc(var(--gutter) * -1);
    padding: 0 var(--gutter) 6px; scrollbar-width: none;
  }
  .adir-pairs::-webkit-scrollbar { display: none; }
  .adir-pairs li { flex: none; }

  .adir-top { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .adir-top .arow-tags { display: none; }

  .ag { content-visibility: visible; contain-intrinsic-size: none; }
  .ag-h { margin: 8px 0 0; }
  .ag-h button {
    cursor: pointer; padding: 11px 12px; border-radius: var(--r-md);
    border: 1px solid var(--line); background: var(--ink-850);
  }
  .ag-h .faq-ch { display: block; transition: transform .2s; }
  .ag .adir { display: none; grid-template-columns: minmax(0, 1fr); margin-top: 8px; }
  .ag.is-open .adir { display: grid; }
  .ag.is-open .ag-h .faq-ch { transform: rotate(180deg); }
  /* Pendant un filtrage, tout ce qui reste est déplié : on cherche, on ne flâne plus. */
  [data-adir-root].is-filtering .ag .adir { display: grid; }
  [data-adir-root].is-filtering .ag-h .faq-ch { display: none; }
  /* Sans JavaScript rien ne peut déplier : tout reste ouvert. */
  .no-js .ag .adir { display: grid; }
  .no-js .ag-h .faq-ch { display: none; }
}

/* ═══════════════════════ DOCUMENTS (conditions, vie privée, LCB-FT, risques) ═
   Un document juridique ne se lit pas, il se CONSULTE : on cherche la clause
   qui concerne ce qui vient d'arriver. D'où un sommaire numéroté qui reste à
   l'écran, des sections numérotées visibles, et un pavé « en clair » qui dit la
   vérité du texte plutôt que d'en vendre une version aimable.
   ═══════════════════════════════════════════════════════════════════════════ */

.toc { position: sticky; top: calc(var(--hdr-h) + 20px); }
.toc-h {
  font-size: .6875rem; font-weight: 620; letter-spacing: .1em; text-transform: uppercase;
  color: var(--txt-3); margin-bottom: 14px;
}
.toc ol { display: flex; flex-direction: column; }
.toc a {
  display: flex; gap: 11px; padding: 7px 10px; border-radius: var(--r-sm);
  font-size: .8125rem; line-height: 1.4; color: var(--txt-3);
  border-left: 2px solid transparent; transition: color .14s, background .14s, border-color .14s;
}
.toc a span { font-family: var(--fm); font-size: .6875rem; color: var(--txt-3); opacity: .7; flex: none; padding-top: 1px; }
.toc a:hover { color: var(--txt); background: rgba(255,255,255,.035); border-left-color: var(--amber); }
.toc a:hover span { color: var(--amber); opacity: 1; }

.prose { min-width: 0; max-width: 74ch; }
.prose p { color: var(--txt-2); line-height: 1.72; font-size: .9375rem; }
.prose p + p { margin-top: 13px; }
/* [!] Un paragraphe APRÈS une liste ou un tableau : sans ceci il collait à la
   dernière puce (seul `p + p` avait une marge). Partagé avec les guides. */
.prose ul + p, .prose ol + p, .prose .dtable-wrap + p, .prose dl + p { margin-top: 15px; }
.prose b { color: var(--txt); font-weight: 600; }
.prose em { font-style: normal; color: var(--txt); font-weight: 500; }
.prose a { color: var(--amber); border-bottom: 1px solid rgba(255,158,44,.34); }
.prose a:hover { color: var(--amber-2); border-bottom-color: var(--amber-2); }
.prose code {
  font-family: var(--fm); font-size: .84em; color: var(--txt);
  background: rgba(255,255,255,.055); border: 1px solid var(--line);
  padding: 1px 5px; border-radius: 4px; white-space: nowrap;
}
.prose ul { display: flex; flex-direction: column; gap: 11px; margin-top: 14px; }
.prose ul li {
  position: relative; padding-left: 20px;
  color: var(--txt-2); line-height: 1.68; font-size: .9375rem;
}
/* Puce hexagonale : la forme du logo jusque dans une liste à puces. */
.prose ul li::before {
  content: ''; position: absolute; left: 2px; top: .62em;
  width: 7px; height: 8px;
  clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
  background: rgba(255,158,44,.55);
}

.pr-sec { padding-top: clamp(30px, 3.2vw, 46px); }
.pr-sec:first-of-type { padding-top: 0; }
.prose .tldr + .pr-sec { padding-top: clamp(30px, 3.2vw, 46px); }
.pr-sec h2 {
  display: flex; align-items: baseline; gap: 13px;
  font-size: clamp(1.125rem, .98rem + .55vw, 1.375rem);
  letter-spacing: -.028em; margin-bottom: 15px; scroll-margin-top: calc(var(--hdr-h) + 20px);
}
.pr-n {
  font-family: var(--fm); font-size: .75rem; font-weight: 500;
  color: var(--amber); flex: none; letter-spacing: 0;
}
.pr-sec { scroll-margin-top: calc(var(--hdr-h) + 20px); }

/* Encadré d'avertissement à l'intérieur d'un document. */
.pr-note {
  margin-top: 16px !important; padding: 13px 15px;
  border-left: 2px solid rgba(255,158,44,.5); border-radius: 0 var(--r-sm) var(--r-sm) 0;
  background: rgba(255,158,44,.06); font-size: .875rem !important; color: var(--txt-2) !important;
}

/* La preuve de configuration, en deux colonnes : la ligne, et ce qu'elle fait. */
.pr-conf { gap: 0 !important; margin-top: 16px !important;
  border: 1px solid var(--line-2); border-radius: var(--r-md); overflow: hidden; }
.pr-conf li {
  display: grid; grid-template-columns: minmax(0, auto) minmax(0, 1fr); gap: 16px;
  align-items: baseline; padding: 13px 15px !important;
  border-bottom: 1px solid var(--line); background: rgba(0,0,0,.24);
}
.pr-conf li:last-child { border-bottom: 0; }
.pr-conf li::before { display: none; }
.pr-conf code { white-space: nowrap; background: none; border: 0; padding: 0; color: var(--amber-2); }
.pr-conf span { font-size: .8125rem; color: var(--txt-3); line-height: 1.5; }

/* Le pavé « en clair ». C'est la seule partie qui sera lue : elle doit dire la
   vérité du document, y compris ce qui dérange. */
.tldr {
  padding: clamp(20px, 2.2vw, 26px); border-radius: var(--r-lg);
  border: 1px solid var(--line-2);
  background: linear-gradient(176deg, var(--ink-750), var(--ink-850) 62%);
  box-shadow: var(--sh-card);
}
.tldr-h {
  display: flex; align-items: center; gap: 9px; margin-bottom: 15px;
  font-size: .6875rem !important; font-weight: 640; letter-spacing: .1em;
  text-transform: uppercase; color: var(--txt) !important;
}
.tldr-h .ic { color: var(--amber); }
.tldr ul { margin-top: 0; gap: 12px; }
.tldr ul li { font-size: .9063rem; }
.tldr-f {
  margin-top: 17px !important; padding-top: 14px; border-top: 1px solid var(--line);
  font-size: .75rem !important; color: var(--txt-3) !important;
}
.doc-foot {
  margin-top: clamp(34px, 4vw, 54px) !important; padding-top: 20px;
  border-top: 1px solid var(--line);
  font-size: .8125rem !important; color: var(--txt-3) !important;
}

@media (max-width: 1080px) {
  /* Le sommaire se replie en bandeau : collant, il mangerait un tiers de
     l'écran sur un téléphone. */
  .toc { position: static; border: 1px solid var(--line); border-radius: var(--r-md); padding: 15px 16px; }
  .toc ol { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2px; }
  .prose { max-width: none; }
}
@media (max-width: 640px) {
  .toc ol { grid-template-columns: minmax(0, 1fr); }
  .pr-conf li { grid-template-columns: minmax(0, 1fr); gap: 5px; }
}

/* ═══════════════════════ PAGES SOCIÉTÉ ═════════════════════════════════════ */
.about-why { margin-top: 24px; }
.about-nums { gap: 18px clamp(28px, 4vw, 64px); margin-top: 0; }
.about-nums b { font-size: clamp(1.375rem, 1.1rem + 1.1vw, 1.875rem); }
.about-note { margin-top: 30px; font-size: .8125rem; color: var(--txt-3); line-height: 1.68; max-width: 80ch; }
.about-note em { font-style: normal; color: var(--txt-2); }

/* ── Colonne étroite des pages à formulaire ──────────────────────────────── */

.sform { display: flex; flex-direction: column; gap: 20px; }
.sform-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.sform-ta {
  height: auto; padding: 14px 16px; line-height: 1.6; resize: vertical;
  font-family: var(--ff); min-height: 150px;
}
.sform .btn { align-self: flex-start; }
.sform .pay-legal { text-align: left; }

/* Champ leurre. [!] Masqué par la FEUILLE, pas par un style en ligne : la CSP
   les interdit. Et `display:none` plutôt qu'un déplacement hors écran — un
   lecteur d'écran ne doit pas le rencontrer, `aria-hidden` seul ne suffit pas
   toujours pour un champ de saisie. */
.hpot { display: none; }

.sent {
  display: flex; flex-direction: column; align-items: flex-start; gap: 14px;
  padding: clamp(24px, 2.6vw, 34px); border-radius: var(--r-xl);
  border: 1px solid rgba(53,214,164,.3);
  background: linear-gradient(176deg, #0c1a16, var(--ink-850) 62%);
}
.sent .ostate-hx { background: linear-gradient(180deg, var(--mint), #0f7d5c); filter: drop-shadow(0 0 13px rgba(53,214,164,.3)); }
.sent .ostate-hx-in { background: linear-gradient(180deg, #0c1a16, #0a1210); }
.sent .ostate-hx-in .ic { color: var(--mint); stroke-width: 2.2; }
.sent h3 { font-size: 1.25rem; letter-spacing: -.028em; }
.sent p { font-size: .9375rem; color: var(--txt-2); line-height: 1.66; max-width: 60ch; }

.sp-trust { margin-top: 30px; padding-top: 24px; border-top: 1px solid var(--line); }
.sp-trust li { font-size: .8125rem; }

@media (max-width: 640px) {
  .sform-row { grid-template-columns: minmax(0, 1fr); }
}

/* [!] La contrainte de largeur porte sur les ENFANTS, jamais sur `.wrap`.
   Posee sur le conteneur, elle retrecit une boite qui est elle-meme centree
   (`margin-inline: auto` de .wrap) : le bloc se decale vers la droite et son
   bord gauche ne tombe plus sur celui du bandeau de tete ni de l'en-tete.
   Sur les enfants, la colonne reste calee a gauche de la page. */
.sp  > * { max-width: 820px; }
.tk  > * { max-width: 860px; }

/* ═══════════════════════════════════════════════════════════════════════════
   PAGES D'ACQUISITION — monnaies, outils, guides, no-KYC (audit du 19/09/2026)
   [!] Les composants de ce bloc sont PARTAGÉS entre ces pages (tableau de
       données, cartes de guide, grille de consignes, encadrés). Rien ici ne doit
       dépendre d'une seule page : le jour où l'une d'elles est refaite, les
       autres ne doivent pas bouger. Leçon de `.steps-3`.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Tableau de données ─────────────────────────────────────────────────────
   Le barème des pages de paire (`.ladder`) est un tableau de CHIFFRES, aligné à
   droite. Celui-ci porte du TEXTE : aligné à gauche, première colonne en titre
   de ligne. Sur téléphone il ne défile pas : chaque ligne devient une fiche,
   l'en-tête de colonne repris devant chaque valeur (`data-label`) — un tableau
   de six colonnes qu'on fait glisser du doigt, personne ne le lit. */
.dtable-wrap { border: 1px solid var(--line-2); border-radius: var(--r-lg); overflow: hidden; background: var(--ink-850); }
.dtable { width: 100%; border-collapse: collapse; }
.dtable th, .dtable td { padding: 14px clamp(12px, 1.4vw, 20px); text-align: left; vertical-align: middle; }
.dtable thead th {
  font-size: .6875rem; font-weight: 620; letter-spacing: .07em; text-transform: uppercase;
  color: var(--txt-3); background: rgba(255,255,255,.022); border-bottom: 1px solid var(--line-2);
  white-space: nowrap;
}
.dtable tbody tr { border-bottom: 1px solid var(--line); transition: background .14s; }
.dtable tbody tr:last-child { border-bottom: 0; }
.dtable tbody tr:hover { background: rgba(255,255,255,.018); }
.dtable tbody th { font-size: .9375rem; font-weight: 560; color: var(--txt); letter-spacing: -.018em; }
.dtable tbody th small { display: block; margin-top: 3px; font-size: .71875rem; font-weight: 450; color: var(--txt-3); letter-spacing: .01em; }
.dtable tbody td { font-size: .8438rem; color: var(--txt-2); line-height: 1.5; }
.dtable .num { font-family: var(--fm); font-variant-numeric: tabular-nums; letter-spacing: -.02em; color: var(--txt); white-space: nowrap; }
.dtable .num i { font-style: normal; color: var(--txt-3); font-size: .82em; margin-left: 2px; }
.dtable .num small { display: block; font-family: var(--ff); font-size: .6875rem; color: var(--txt-3); letter-spacing: 0; margin-top: 2px; }
.dt-net { display: inline-flex; align-items: center; gap: 7px; flex-wrap: wrap; }
.dt-dim { color: var(--txt-3); }
.dt-warn { color: var(--amber-2); font-weight: 600; }
.dt-best { color: var(--mint); }
.dt-act { text-align: right !important; white-space: nowrap; }
.dt-go {
  display: inline-flex; align-items: center; gap: 6px; padding: 7px 11px; border-radius: var(--r-sm);
  font-size: .78125rem; font-weight: 560; color: var(--txt-2);
  border: 1px solid var(--line-2); background: rgba(255,255,255,.015);
  transition: color .14s, border-color .14s, background .14s;
}
.dt-go .ic { width: 13px; height: 13px; stroke-width: 1.9; }
.dt-go:hover { color: var(--amber); border-color: rgba(255,158,44,.4); background: rgba(255,158,44,.05); }
.dtable-note { margin-top: 14px; font-size: .78125rem; color: var(--txt-3); line-height: 1.6; max-width: 84ch; }
.dtable-note a, .cx-note a { color: var(--amber); border-bottom: 1px solid rgba(255,158,44,.34); }
.dtable-note a:hover, .cx-note a:hover { color: var(--amber-2); border-bottom-color: var(--amber-2); }
.dtable tr.is-best { background: rgba(53,214,164,.035); }

@media (max-width: 760px) {
  .dtable thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .dtable, .dtable tbody, .dtable tr, .dtable th, .dtable td { display: block; }
  .dtable tbody tr { padding: 14px 16px 16px; }
  .dtable tbody th { padding: 0 0 10px; }
  .dtable tbody td {
    display: grid; grid-template-columns: 116px minmax(0, 1fr); gap: 12px;
    padding: 6px 0; border-top: 1px solid var(--line);
  }
  .dtable tbody td::before {
    content: attr(data-label); font-size: .6875rem; font-weight: 620; letter-spacing: .06em;
    text-transform: uppercase; color: var(--txt-3); padding-top: 2px;
  }
  .dtable tbody td.is-std { display: none; }
  .dtable tbody td.dt-act { display: block; padding-top: 12px; text-align: left !important; }
  .dtable tbody td.dt-act::before { display: none; }
  .dtable tbody td.dt-act:empty { display: none; }
  .dt-go { width: 100%; justify-content: center; height: 40px; }
}

.dtable .nw { white-space: nowrap; }

/* ── Bandeau DENSE : pages où un module d'échange suit le bandeau ────────────
   Le bouton du module doit rester au-dessus du pli (900 px) : le chapô tient sur
   une ligne, les chiffres se resserrent. Sur téléphone, trois chiffres suffisent
   — six repoussaient le module d'un demi-écran. */
.mast-dense { padding-bottom: clamp(14px, 1.6vw, 22px); }
.mast-dense .mast-sub { max-width: 96ch; margin-top: 12px; }
.mast-dense .mast-meta { margin-top: 20px; }
.mast-dense + .sec-next { padding-top: clamp(22px, 2vw, 30px); }
/* Bandeau en deux colonnes, sur la MÊME grille que `.prg` juste en dessous : les
   chiffres tombent exactement au-dessus du module. */
.mast-split .mast-in {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 486px);
  gap: 20px clamp(24px, 3vw, 54px); align-items: end;
}
.mast-split .mast-l { display: flex; flex-direction: column; align-items: flex-start; min-width: 0; }
.mast-split .mast-meta {
  margin-top: 0; padding: 0 2px 5px;
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px 20px;
}
.mast-split .mast-meta b { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 1080px) {
  .mast-split .mast-in { grid-template-columns: minmax(0, 1fr); }
  .mast-split .mast-meta { display: flex; padding: 0; gap: 14px clamp(24px, 3vw, 46px); }
}
@media (max-width: 700px) {
  .mast-dense .mast-meta li:nth-child(n+4) { display: none; }
  .mast-dense .mast-sub { font-size: .9375rem; }
}

/* ── Page de monnaie ─────────────────────────────────────────────────────── */
.coin-h1 { display: flex; align-items: center; gap: 16px; }
.coin-hx { margin-top: .14em; }   /* annule la remontée optique du h1 pour l'hexagone */

/* Les DEUX prix de la monnaie, côte à côte : ce qu'on en tire, ce qu'elle coûte.
   Des lignes cliquables qui chargent la paire dans le module voisin — c'est un
   tableau de bord, pas une liste de liens. */
.cx { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(16px, 1.8vw, 26px); }
.cx-col {
  min-width: 0; border: 1px solid var(--line-2); border-radius: var(--r-lg);
  background: linear-gradient(176deg, var(--ink-800), var(--ink-850) 62%);
  box-shadow: var(--sh-card); overflow: hidden;
}
.cx-h {
  display: flex; align-items: center; gap: 9px; padding: 17px 18px 0;
  font-size: 1.0313rem; letter-spacing: -.022em; line-height: 1.2;
}
.cx-ic { color: var(--amber); width: 16px; height: 16px; stroke-width: 1.9; }
.cx-sub { padding: 5px 18px 13px; font-size: .75rem; color: var(--txt-3); border-bottom: 1px solid var(--line); }
.cx-list { display: flex; flex-direction: column; }
.cx-list li + li { border-top: 1px solid var(--line); }
.cx-row {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto 16px; align-items: center; gap: 12px;
  padding: 10px 16px 10px 14px; transition: background .14s;
}
.cx-row:hover { background: rgba(255,158,44,.045); }
.cx-row .pair-hx { width: 32px; height: 36px; }
.cx-row .pair-hx-in { width: 28px; height: 31px; }
.cx-row .pair-hx-in img { width: 20px; height: 20px; }
.cx-n { display: flex; align-items: center; flex-wrap: wrap; gap: 0 6px; font-size: .875rem; font-weight: 580; letter-spacing: -.015em; min-width: 0; }
.cx-n small { flex-basis: 100%; font-size: .6875rem; font-weight: 450; color: var(--txt-3); letter-spacing: .005em; }
.cx-p { font-size: .875rem; color: var(--txt); letter-spacing: -.03em; text-align: right; white-space: nowrap; }
.cx-p i { font-style: normal; color: var(--txt-3); font-size: .78em; font-family: var(--ff); letter-spacing: 0; }
.cx-go { color: var(--txt-3); opacity: 0; transform: translateX(-4px); transition: opacity .14s, transform .14s; display: grid; }
.cx-go .ic { width: 15px; height: 15px; }
.cx-row:hover .cx-go, .cx-row:focus-visible .cx-go { opacity: 1; transform: none; color: var(--amber); }
.cx-note { margin-top: 16px; font-size: .78125rem; color: var(--txt-3); line-height: 1.62; max-width: 78ch; }
.cx-note b { color: var(--txt-2); font-weight: 580; }

/* ── Consignes : autant de colonnes que de consignes, sur TOUTE la largeur ── */
.tipg { display: grid; gap: clamp(14px, 1.6vw, 22px); grid-template-columns: repeat(4, minmax(0, 1fr)); }
.tipg-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.tipg-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.tip {
  min-width: 0; display: flex; flex-direction: column; gap: 10px; align-items: flex-start;
  padding: clamp(18px, 1.8vw, 24px); border-radius: var(--r-lg);
  border: 1px solid var(--line); background: var(--ink-850);
}
.tip .hexn { margin-bottom: 4px; }
.tip h3 { font-size: 1rem; letter-spacing: -.02em; line-height: 1.28; }
.tip p { font-size: .875rem; color: var(--txt-3); line-height: 1.64; }
.tip p b { color: var(--txt-2); font-weight: 580; }
.tip p a { color: var(--amber); border-bottom: 1px solid rgba(255,158,44,.34); }

/* ── Cartes de guide (sommaire des guides, pieds de page des autres pages) ── */
.gcards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(16px, 1.8vw, 24px); }
.gcard {
  min-width: 0; display: flex; flex-direction: column; border-radius: var(--r-lg); overflow: hidden;
  border: 1px solid var(--line-2); background: var(--ink-850); box-shadow: var(--sh-card);
  transition: border-color .16s, transform .16s;
}
.gcard:hover { border-color: rgba(255,158,44,.36); transform: translateY(-2px); }
.gcard-img { display: block; aspect-ratio: 16 / 9; overflow: hidden; background: var(--ink-800); border-bottom: 1px solid var(--line); }
.gcard-img img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s cubic-bezier(.2,.7,.3,1); }
.gcard:hover .gcard-img img { transform: scale(1.035); }
.gcard-b { display: flex; flex-direction: column; gap: 9px; padding: 18px 20px 20px; flex: 1; }
.gcard-meta { display: flex; align-items: center; gap: 9px; font-size: .71875rem; color: var(--txt-3); letter-spacing: .01em; }
.gcard-t { font-size: 1.0938rem; font-weight: 620; letter-spacing: -.024em; line-height: 1.26; color: var(--txt); }
.gcard-d { font-size: .8438rem; color: var(--txt-3); line-height: 1.6; }
.gcard-go { margin-top: auto; padding-top: 8px; display: inline-flex; align-items: center; gap: 7px; font-size: .8125rem; font-weight: 580; color: var(--amber); }
.gcard-go .ic { width: 14px; height: 14px; stroke-width: 1.9; transition: transform .18s; }
.gcard:hover .gcard-go .ic { transform: translateX(3px); }

/* ── Renvoi vers les autres monnaies ─────────────────────────────────────── */
.coinnav { margin-top: clamp(28px, 3vw, 44px); padding-top: 24px; border-top: 1px solid var(--line); }
.coinnav-h { font-size: .6875rem; font-weight: 640; letter-spacing: .12em; text-transform: uppercase; color: var(--txt-3); margin-bottom: 14px; }
.coinnav ul { display: flex; flex-wrap: wrap; gap: 8px; }
.coinnav a {
  display: inline-flex; align-items: center; gap: 8px; padding: 7px 12px 7px 9px; border-radius: 999px;
  font-size: .8125rem; font-weight: 520; color: var(--txt-2);
  border: 1px solid var(--line-2); background: rgba(255,255,255,.015);
  transition: color .14s, border-color .14s, background .14s;
}
.coinnav a img { width: 18px; height: 18px; border-radius: 50%; }
.coinnav a span { color: var(--txt-3); font-size: .71875rem; font-family: var(--fm); }
.coinnav a:hover { color: var(--txt); border-color: rgba(255,158,44,.4); background: rgba(255,158,44,.05); }

/* ── Sommaire des monnaies : une matrice 5 × 3 ───────────────────────────── */
.coing { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: clamp(12px, 1.3vw, 18px); }
.coinc {
  height: 100%; display: flex; flex-direction: column; gap: 14px; min-width: 0;
  padding: 18px 18px 15px; border-radius: var(--r-lg);
  border: 1px solid var(--line-2); background: linear-gradient(176deg, var(--ink-800), var(--ink-850) 62%);
  box-shadow: var(--sh-card); transition: border-color .16s, transform .16s;
}
.coinc:hover { border-color: rgba(255,158,44,.38); transform: translateY(-2px); }
.coinc-top { display: flex; align-items: center; gap: 12px; min-width: 0; }
.coinc .hexb { width: 46px; height: 52px; }
.coinc .hexb-in { width: 41px; height: 46px; }
.coinc .hexb-in img { width: 24px; height: 24px; }
.coinc-id { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.coinc-id b { font-size: .9688rem; font-weight: 620; letter-spacing: -.02em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.coinc-id i { font-style: normal; font-family: var(--fm); font-size: .71875rem; color: var(--txt-3); }
.coinc-p { font-size: 1.0625rem; letter-spacing: -.035em; color: var(--txt); white-space: nowrap; }
.coinc-p i { font-style: normal; font-family: var(--ff); font-size: .6875rem; letter-spacing: .01em; color: var(--txt-3); }
.coinc-f {
  margin-top: auto; padding-top: 12px; border-top: 1px solid var(--line);
  display: flex; align-items: center; gap: 6px 10px; flex-wrap: wrap; font-size: .71875rem; color: var(--txt-3);
}
.coinc-f span + span::before { content: '·'; margin-right: 10px; color: var(--line-3); }
.coinc-go { margin-left: auto; color: var(--txt-3); display: grid; transition: color .14s, transform .14s; }
.coinc-go::before { display: none; }
.coinc-go .ic { width: 15px; height: 15px; }
.coinc:hover .coinc-go { color: var(--amber); transform: translateX(3px); }

@media (max-width: 1180px) {
  .coing { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .tipg { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tipg-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 1080px) {
  .gcards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .gcards > .gcard:nth-child(3):last-child { grid-column: 1 / -1; flex-direction: row; }
  .gcards > .gcard:nth-child(3):last-child .gcard-img { flex: 0 0 42%; aspect-ratio: auto; border-bottom: 0; border-right: 1px solid var(--line); }
}
@media (max-width: 900px) {
  .coing { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .tipg-3 { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 700px) {
  .cx { grid-template-columns: minmax(0, 1fr); }
  .gcards { grid-template-columns: minmax(0, 1fr); }
  .gcards > .gcard:nth-child(3):last-child { flex-direction: column; }
  .gcards > .gcard:nth-child(3):last-child .gcard-img { flex: none; aspect-ratio: 16 / 9; border-right: 0; border-bottom: 1px solid var(--line); }
  .tipg, .tipg-2 { grid-template-columns: minmax(0, 1fr); }
  .coin-h1 { gap: 12px; }
  .coin-h1 .hexb { width: 46px; height: 52px; }
  .coin-h1 .hexb-in { width: 41px; height: 46px; }
  .coin-h1 .hexb-in img { width: 24px; height: 24px; }
}
@media (max-width: 640px) {
  .coing { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .coinc { padding: 15px 14px 13px; gap: 12px; }
  .coinc-p { font-size: .9688rem; }
  .coinc-f span:nth-child(2) { display: none; }
}

/* Pied de page à cinq colonnes : deux sur téléphone. */
@media (max-width: 640px) {
  .ft-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ── Pages-outils : l'outil à gauche, le mode d'emploi à droite ──────────────
   Même patron que /track et /exchange : une grande surface pour AGIR, un rail de
   texte posé sur le fond (pas une deuxième carte) pour comprendre. */
.toolg {
  display: grid; grid-template-columns: minmax(0, 1fr) 340px;
  gap: clamp(24px, 3vw, 52px); align-items: start;
}
.tool-main { min-width: 0; display: flex; flex-direction: column; gap: 16px; }
.tool-rail { position: sticky; top: calc(var(--hdr-h) + 18px); min-width: 0; padding-top: 4px; }
.rail-h { font-size: 1.0313rem; letter-spacing: -.022em; line-height: 1.3; margin-bottom: 18px; }
.rail-steps { counter-reset: rs; display: flex; flex-direction: column; gap: 15px; }
.rail-steps li {
  counter-increment: rs; position: relative; padding-left: 32px;
  font-size: .8438rem; color: var(--txt-3); line-height: 1.62;
}
.rail-steps li::before {
  content: counter(rs); position: absolute; left: 0; top: 1px;
  width: 21px; height: 21px; display: grid; place-items: center; border-radius: 6px;
  font-family: var(--fm); font-size: .6875rem; color: var(--amber-2);
  background: rgba(255,158,44,.1); border: 1px solid rgba(255,158,44,.24);
}
.rail-steps b { color: var(--txt); font-weight: 600; }
.rail-cta { display: flex; flex-direction: column; gap: 10px; margin-top: 24px; padding-top: 22px; border-top: 1px solid var(--line); }

/* Bascule d'actif : de VRAIS liens (une URL par actif), habillés en segment. */
.seg-links {
  justify-self: end; display: inline-flex; gap: 4px; padding: 4px; border-radius: var(--r-lg);
  border: 1px solid var(--line-2); background: rgba(0,0,0,.34);
}
.seg-links a {
  display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 16px; border-radius: 11px;
  font-size: .875rem; font-weight: 580; color: var(--txt-3); transition: color .14s, background .14s;
}
.seg-links a img { width: 20px; height: 20px; border-radius: 50%; }
.seg-links a:hover { color: var(--txt); background: rgba(255,255,255,.04); }
.seg-links a[aria-current] { color: var(--txt); background: var(--ink-650); box-shadow: 0 1px 0 rgba(255,255,255,.06) inset; }
.mast-split .seg-links { margin-bottom: 4px; }

/* Les trois chiffres qui répondent à la question avant le tableau. */
.feetop {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px;
  border: 1px solid var(--line-2); border-radius: var(--r-lg); overflow: hidden; background: var(--line);
}
.feetop li { display: flex; flex-direction: column; gap: 5px; padding: 16px 18px; background: var(--ink-850); min-width: 0; }
.feetop-l { font-size: .6875rem; font-weight: 620; letter-spacing: .07em; text-transform: uppercase; color: var(--txt-3); }
.feetop b { font-size: 1.125rem; font-weight: 620; letter-spacing: -.026em; color: var(--txt); }
.feetop li:first-child b { color: var(--mint); }
.feetop-v { font-size: .8125rem; color: var(--txt-2); letter-spacing: -.02em; }
.feetop-t .feetop-v { font-size: .75rem; color: var(--txt-3); letter-spacing: 0; }

.chip-ok { color: var(--mint); background: rgba(53,214,164,.12); }
.dtable-fees .num > span { display: flex; flex-direction: column; gap: 6px; align-items: flex-start; }
.dtable-fees .num small { margin-top: -3px; }
.fee-v { white-space: nowrap; }
/* Barre de grandeur en onze crans : la CSP interdit `style="width:…"`. */
.fbar { display: block; width: min(150px, 100%); height: 4px; border-radius: 2px; background: rgba(255,255,255,.06); overflow: hidden; }
.fbar i { display: block; height: 100%; border-radius: 2px; background: linear-gradient(90deg, var(--amber-dk), var(--amber)); }
.fbar-1 i { width: 10%; } .fbar-2 i { width: 20%; } .fbar-3 i { width: 30%; } .fbar-4 i { width: 40%; }
.fbar-5 i { width: 50%; } .fbar-6 i { width: 60%; } .fbar-7 i { width: 70%; } .fbar-8 i { width: 80%; }
.fbar-9 i { width: 90%; } .fbar-10 i { width: 100%; }
.is-best .fbar i { background: var(--mint); }
.dt-fmt { font-size: .8125rem !important; color: var(--txt) !important; letter-spacing: -.01em; }

/* ── Validateur d'adresse ────────────────────────────────────────────────── */
.av { padding: clamp(20px, 2.4vw, 30px); display: flex; flex-direction: column; gap: 22px; }
.av-step { min-width: 0; display: flex; flex-direction: column; gap: 9px; }
.av-n {
  width: 21px; height: 21px; flex: none; display: inline-grid; place-items: center; border-radius: 6px;
  font-family: var(--fm); font-size: .6875rem; font-weight: 600; color: var(--amber-2);
  background: rgba(255,158,44,.1); border: 1px solid rgba(255,158,44,.24);
}
.av-lab { display: flex; align-items: center; gap: 9px; font-size: .8125rem; font-weight: 560; color: var(--txt-2); }
.av-read b { color: var(--txt); font-weight: 600; }
.av-chips { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.av-chips[hidden] { display: none; }
.av-chips-l { font-size: .75rem; color: var(--txt-3); margin-right: 2px; }
.av-chip {
  height: 34px; padding: 0 13px; border-radius: 999px; font-size: .8125rem; font-weight: 560; color: var(--txt-2);
  border: 1px solid var(--line-2); background: rgba(255,255,255,.02);
  transition: color .14s, border-color .14s, background .14s;
}
.av-chip:hover { color: var(--txt); border-color: var(--line-3); }
.av-chip[aria-pressed="true"] { color: var(--amber-in); background: var(--amber); border-color: var(--amber); font-weight: 640; }
.av-pick { display: flex; gap: 11px; align-items: stretch; }
.av-sel { position: relative; flex: 1; min-width: 0; }
.av-sel select {
  width: 100%; height: 54px; padding: 0 44px 0 16px; border-radius: var(--r-md);
  border: 1px solid var(--line-2); background: rgba(0,0,0,.4); color: var(--txt);
  font: inherit; font-size: .9375rem; letter-spacing: -.008em; appearance: none; -webkit-appearance: none;
  text-overflow: ellipsis; cursor: pointer; transition: border-color .16s;
}
.av-sel select:focus { outline: none; border-color: rgba(255,158,44,.5); }
.av-sel select.is-nudge { animation: nudge .36s ease; border-color: rgba(255,158,44,.6); }
.av-sel option, .av-sel optgroup { background: #0e131c; color: var(--txt); }
.av-sel-ch { position: absolute; right: 15px; top: 18px; color: var(--txt-3); pointer-events: none; }
.av-go { height: 54px; flex: none; padding: 0 22px; }
.av-go[disabled] { opacity: .7; cursor: progress; }
.av-note {
  font-size: .78125rem; color: var(--txt-3); line-height: 1.58; padding-left: 12px;
  border-left: 2px solid rgba(255,158,44,.4);
}
.av-note[hidden] { display: none; }

.av-out {
  display: flex; gap: 16px; align-items: flex-start; padding: clamp(16px, 1.8vw, 22px);
  border-radius: var(--r-lg); border: 1px solid var(--line-2); background: rgba(0,0,0,.28);
}
.av-out[hidden] { display: none; }
.av-out-b { min-width: 0; display: flex; flex-direction: column; gap: 9px; }
.av-out h2 { font-size: 1.125rem; letter-spacing: -.026em; line-height: 1.25; }
.av-out p, .av-caveats li { font-size: .875rem; color: var(--txt-2); line-height: 1.62; }
.av-out b { color: var(--txt); font-weight: 600; }
.av-out code {
  font-family: var(--fm); font-size: .92em; padding: 1px 6px; border-radius: 4px;
  color: #d9fff1; background: rgba(53,214,164,.13); white-space: nowrap;
}
.av-caveats { display: flex; flex-direction: column; gap: 8px; padding-top: 10px; border-top: 1px solid var(--line); }
.av-caveats li { font-size: .8125rem; color: var(--txt-3); }
.av-acts { display: flex; flex-wrap: wrap; gap: 9px; padding-top: 4px; }
.av-out .ostate-hx { flex: none; }
.av-out.is-ok  { border-color: rgba(53,214,164,.34); background: linear-gradient(176deg, #0c1a16, rgba(0,0,0,.28) 70%); }
.av-out.is-ok .ostate-hx { background: linear-gradient(180deg, var(--mint), #0f7d5c); filter: drop-shadow(0 0 13px rgba(53,214,164,.3)); }
.av-out.is-ok .ostate-hx-in { background: linear-gradient(180deg, #0c1a16, #0a1210); }
.av-out.is-ok .ostate-hx-in .ic { color: var(--mint); stroke-width: 2.2; }
.av-out.is-bad { border-color: rgba(255,111,111,.34); background: linear-gradient(176deg, #1d1012, rgba(0,0,0,.28) 70%); }
.av-out.is-bad .ostate-hx { background: linear-gradient(180deg, var(--red), #8e2b2b); filter: drop-shadow(0 0 13px rgba(255,111,111,.26)); }
.av-out.is-bad .ostate-hx-in { background: linear-gradient(180deg, #1d1012, #120a0b); }
.av-out.is-bad .ostate-hx-in .ic { color: var(--red); stroke-width: 2.2; }
.av-out.is-bad code { color: #ffd9d9; background: rgba(255,111,111,.13); }
.av-priv { display: flex; align-items: flex-start; gap: 8px; font-size: .75rem; color: var(--txt-3); line-height: 1.58; padding: 0 4px; }
.av-priv .ic { flex: none; margin-top: 3px; opacity: .7; }
.av-priv b { color: var(--txt-2); font-weight: 580; }

@media (max-width: 1080px) {
  .toolg { grid-template-columns: minmax(0, 1fr); }
  .tool-rail { position: static; }
  .seg-links { justify-self: start; }
}
@media (max-width: 700px) {
  .feetop { grid-template-columns: minmax(0, 1fr); }
  .feetop li { flex-direction: row; align-items: baseline; flex-wrap: wrap; gap: 4px 10px; padding: 13px 16px; }
  .feetop-l { flex-basis: 100%; }
  .av-pick { flex-direction: column; }
  .av-go { width: 100%; }
  .av-out { flex-direction: column; gap: 12px; }
  .seg-links { width: 100%; }
  .seg-links a { flex: 1; justify-content: center; padding: 0 8px; }
  .fbar { width: 100%; }
}

/* ── Sommaire des outils ─────────────────────────────────────────────────── */
.toolcards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(16px, 1.8vw, 26px); }
.toolc {
  min-width: 0; display: flex; flex-direction: column; border-radius: var(--r-xl); overflow: hidden;
  border: 1px solid var(--line-2); background: linear-gradient(176deg, var(--ink-800), var(--ink-850) 62%);
  box-shadow: var(--sh-card); transition: border-color .16s, transform .16s;
}
.toolc:hover { border-color: rgba(255,158,44,.36); transform: translateY(-2px); }
.toolc-img { display: block; aspect-ratio: 21 / 9; overflow: hidden; border-bottom: 1px solid var(--line); background: var(--ink-800); }
.toolc-img img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s cubic-bezier(.2,.7,.3,1); }
.toolc:hover .toolc-img img { transform: scale(1.03); }
.toolc-b { display: flex; flex-direction: column; gap: 10px; padding: clamp(18px, 2vw, 26px); flex: 1; }
.toolc-t { font-size: clamp(1.25rem, 1.05rem + .7vw, 1.5rem); font-weight: 640; letter-spacing: -.03em; line-height: 1.2; color: var(--txt); }
a.toolc-t:hover { color: var(--amber-2); }
.toolc-d { font-size: .9063rem; color: var(--txt-3); line-height: 1.64; max-width: 58ch; }
.toolc-d em { font-style: normal; color: var(--txt-2); font-weight: 560; }
.toolc .gcard-go { padding-top: 10px; }
.toolc-links { margin-top: auto; padding-top: 12px; display: flex; flex-wrap: wrap; gap: 8px; }
.toolc-links a {
  display: inline-flex; align-items: center; gap: 7px; height: 38px; padding: 0 14px; border-radius: var(--r-md);
  font-size: .8125rem; font-weight: 580; color: var(--amber);
  border: 1px solid rgba(255,158,44,.3); background: rgba(255,158,44,.06);
  transition: background .14s, border-color .14s;
}
.toolc-links a .ic { width: 14px; height: 14px; stroke-width: 1.9; }
.toolc-links a:hover { background: rgba(255,158,44,.12); border-color: rgba(255,158,44,.5); }

.toolrow { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(12px, 1.4vw, 20px); margin-top: clamp(16px, 1.8vw, 26px); }
.toolrow a {
  height: 100%; display: flex; flex-direction: column; align-items: flex-start; gap: 9px; min-width: 0;
  padding: 20px; border-radius: var(--r-lg); border: 1px solid var(--line); background: var(--ink-850);
  transition: border-color .16s, background .16s;
}
.toolrow a:hover { border-color: rgba(255,158,44,.34); background: var(--ink-750); }
.toolrow b { font-size: .9688rem; font-weight: 620; letter-spacing: -.02em; margin-top: 4px; }
.toolrow p { font-size: .8125rem; color: var(--txt-3); line-height: 1.6; }

@media (max-width: 1080px) { .toolrow { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 760px) {
  .toolcards { grid-template-columns: minmax(0, 1fr); }
  .toolrow { grid-template-columns: minmax(0, 1fr); }
  .toolrow a { flex-direction: row; flex-wrap: wrap; align-items: center; gap: 4px 13px; padding: 16px; }
  .toolrow b { margin-top: 0; }
  .toolrow p { flex-basis: 100%; }
}

/* ── Page no-KYC ─────────────────────────────────────────────────────────── */
.pr-facts-top { margin-top: 0; }
.pr-facts a, .mast-meta a, .dtable td a { color: var(--amber); border-bottom: 1px solid rgba(255,158,44,.34); }
.pr-facts a:hover, .mast-meta a:hover, .dtable td a:hover { color: var(--amber-2); border-bottom-color: var(--amber-2); }

/* Image et texte côte à côte, sur toute la largeur. */
.split { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(28px, 4vw, 72px); align-items: center; }
.split-art { margin: 0; border-radius: var(--r-xl); overflow: hidden; border: 1px solid var(--line-2); box-shadow: var(--sh-lift); background: var(--ink-800); }
.split-art img { display: block; width: 100%; height: auto; }
.split-txt { min-width: 0; }
.split-txt h2 { max-width: 22ch; }
.limit { display: flex; flex-direction: column; gap: 22px; margin-top: clamp(24px, 2.6vw, 36px); }
.limit li { display: flex; gap: 16px; align-items: flex-start; }
.limit h3 { font-size: 1.0313rem; letter-spacing: -.02em; margin: 3px 0 6px; }
.limit p { font-size: .9063rem; color: var(--txt-3); line-height: 1.66; max-width: 62ch; }
.limit em { font-style: normal; color: var(--txt-2); font-weight: 560; }
.split-foot { margin-top: 26px; }

/* La grille de critères : la 3ᵉ colonne est la réponse, elle doit se lire seule. */
.dtable-check tbody th { width: 25%; font-size: .9063rem; line-height: 1.4; }
.dtable-check tbody td:last-child { width: 38%; color: var(--txt-2); }
.dtable-check tbody td:last-child b { font-weight: 640; }

/* ── Guides ──────────────────────────────────────────────────────────────── */
.ghead-in { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 440px); gap: 20px clamp(28px, 4vw, 70px); align-items: center; }
.ghead-l { display: flex; flex-direction: column; align-items: flex-start; min-width: 0; }
.ghead h1 { font-size: clamp(1.75rem, 1.1rem + 2vw, 2.625rem); max-width: 22ch; }
.ghead-art { margin: 0; border-radius: var(--r-xl); overflow: hidden; border: 1px solid var(--line-2); box-shadow: var(--sh-lift); background: var(--ink-800); }
.ghead-art img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; }
.gmeta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 18px; margin-top: 18px; font-size: .78125rem; color: var(--txt-3); }
/* [!] Seul l'auteur est en flex (pour la marque) : dans un flex, « Published » et
   sa date deviendraient deux éléments séparés par le `gap`, en plus de l'espace. */
.gmeta-by, .gmeta-live { display: inline-flex; align-items: center; gap: 7px; }
.gmeta b { color: var(--txt-2); font-weight: 600; }
.gmeta-mark { height: 16px; width: auto; }
.gmeta-live { color: var(--txt-2); }

.gdoc {
  display: grid; grid-template-columns: 218px minmax(0, 1fr) 300px;
  gap: clamp(26px, 3.2vw, 56px); align-items: start;
}
.gdoc .toc a.is-cur { color: var(--txt); border-left-color: var(--amber); background: rgba(255,158,44,.05); }
.gdoc .toc a.is-cur span { color: var(--amber); opacity: 1; }
.gprose { max-width: 76ch; }
.gprose h3 { font-size: 1.0313rem; letter-spacing: -.02em; margin: 24px 0 9px; color: var(--txt); }
.gprose .dtable-wrap { margin-top: 18px; }
.gprose .dtable tbody td { font-size: .8125rem; }
.gprose .dtable-note { margin-top: 10px; }
.gprose p + .gsteps, .gprose .gsteps + p { margin-top: 16px; }
/* Étapes numérotées : le même hexagone que partout, à l'échelle du texte. */
.gsteps { counter-reset: gs; display: flex; flex-direction: column; gap: 16px; margin-top: 16px; }
.gsteps > li { counter-increment: gs; position: relative; padding-left: 46px; color: var(--txt-2); line-height: 1.7; font-size: .9375rem; }
.gsteps > li::before {
  content: counter(gs, decimal-leading-zero); position: absolute; left: 0; top: 0;
  width: 32px; height: 36px; display: grid; place-items: center;
  clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
  background: rgba(255,158,44,.16); color: var(--amber-2);
  font-family: var(--fm); font-size: .6875rem; font-weight: 600;
}
.gsteps > li b:first-child { display: block; color: var(--txt); font-weight: 620; letter-spacing: -.014em; }
/* Chiffres du moment, dans le texte. */
.gfig {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 1px; margin-top: 18px;
  border: 1px solid var(--line-2); border-radius: var(--r-lg); overflow: hidden; background: var(--line);
}
.gfig > div { padding: 14px 16px; background: var(--ink-850); min-width: 0; }
.gfig dt { font-size: .6875rem; font-weight: 620; letter-spacing: .07em; text-transform: uppercase; color: var(--txt-3); }
.gfig dd { margin: 6px 0 0; font-family: var(--fm); font-size: 1rem; letter-spacing: -.03em; color: var(--txt); }
.gfig dd small { display: block; font-family: var(--ff); font-size: .6875rem; letter-spacing: 0; color: var(--txt-3); margin-top: 3px; }
.gfig-note { margin-top: 9px !important; font-size: .75rem !important; color: var(--txt-3) !important; }
.gfaq { margin-top: 4px; }
.gfaq p { max-width: none; }

/* Le rail : l'action, à côté du texte, jamais dedans. */
.grail { position: sticky; top: calc(var(--hdr-h) + 20px); min-width: 0; display: flex; flex-direction: column; gap: 18px; }
.grail-card { padding: 20px; display: flex; flex-direction: column; gap: 14px; }
.grail-k { display: flex; align-items: center; gap: 8px; font-size: .6875rem; font-weight: 640; letter-spacing: .1em; text-transform: uppercase; color: var(--mint); }
.grail-k::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: var(--mint); animation: pulse 2.6s cubic-bezier(.4,0,.6,1) infinite; }
.grail-pair { display: flex; align-items: center; gap: 12px; min-width: 0; }
.grail-pair b { font-size: .9688rem; font-weight: 620; letter-spacing: -.02em; line-height: 1.3; }
.grail-dl { display: flex; flex-direction: column; gap: 9px; padding: 13px 0; border-block: 1px solid var(--line); }
.grail-dl > div { display: flex; align-items: baseline; justify-content: space-between; gap: 14px; }
.grail-dl dt { font-size: .6875rem; font-weight: 620; letter-spacing: .07em; text-transform: uppercase; color: var(--txt-3); }
.grail-dl dd { margin: 0; font-size: .875rem; letter-spacing: -.03em; color: var(--txt-2); text-align: right; }
.grail-dl .is-out { color: var(--txt); font-weight: 500; }
.grail-n { font-size: .71875rem; color: var(--txt-3); line-height: 1.55; text-align: center; }
.grail-links { display: flex; flex-direction: column; gap: 2px; }
.grail-links a {
  display: flex; align-items: center; gap: 11px; padding: 11px 12px; border-radius: var(--r-md);
  font-size: .8438rem; font-weight: 520; color: var(--txt-2); transition: color .14s, background .14s;
}
.grail-links a .ic { color: var(--amber); width: 16px; height: 16px; }
.grail-links a:hover { color: var(--txt); background: rgba(255,255,255,.04); }

/* Sommaire des guides : un guide en avant, les autres en grille. */
.glead {
  display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); min-width: 0;
  border-radius: var(--r-xl); overflow: hidden; border: 1px solid var(--line-2);
  background: linear-gradient(176deg, var(--ink-800), var(--ink-850) 62%); box-shadow: var(--sh-lift);
  transition: border-color .16s, transform .16s;
}
.glead:hover { border-color: rgba(255,158,44,.38); transform: translateY(-2px); }
.glead-img { display: block; overflow: hidden; border-right: 1px solid var(--line); min-height: 100%; }
.glead-img img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s cubic-bezier(.2,.7,.3,1); }
.glead:hover .glead-img img { transform: scale(1.03); }
.glead-b { display: flex; flex-direction: column; justify-content: center; gap: 13px; padding: clamp(22px, 3vw, 46px); }
.glead-t { font-size: clamp(1.375rem, 1.05rem + 1.2vw, 1.9375rem); font-weight: 650; letter-spacing: -.034em; line-height: 1.16; color: var(--txt); }
.glead-d { font-size: .9375rem; color: var(--txt-3); line-height: 1.66; }
.gcards-gap { margin-top: clamp(16px, 1.8vw, 24px); }
.toolrow-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: 0; }

/* ── Arbre de décision (guide « mauvais réseau ») ─────────────────────────────
   Sans script, toutes les réponses se lisent l'une après l'autre. Avec, une
   seule est visible à la fois (`is-live` est posé par app.js). */
.tree { margin-top: 20px; padding: clamp(18px, 2.2vw, 28px); }
.tree-node + .tree-node { margin-top: 26px; padding-top: 26px; border-top: 1px solid var(--line); }
.tree.is-live .tree-node + .tree-node { margin-top: 0; padding-top: 0; border-top: 0; }
.tree-node[hidden] { display: none; }
.tree-k { font-size: .6875rem; font-weight: 640; letter-spacing: .1em; text-transform: uppercase; color: var(--amber); margin-bottom: 9px !important; }
.tree h3 { margin: 0 0 14px; font-size: 1.1875rem; letter-spacing: -.026em; line-height: 1.28; outline: none; }
.tree-opts { display: flex; flex-direction: column; gap: 9px; margin-top: 0 !important; }
.tree-opts li { padding: 0 !important; }
.tree-opts li::before { display: none !important; }
.tree-opts a {
  display: flex; align-items: center; gap: 13px; padding: 14px 16px; border-radius: var(--r-md);
  border: 1px solid var(--line-2) !important; background: rgba(0,0,0,.3); color: var(--txt) !important;
  font-size: .9063rem; font-weight: 540; line-height: 1.4; transition: border-color .14s, background .14s;
}
.tree-opts a small { display: block; margin-top: 3px; font-size: .78125rem; font-weight: 400; color: var(--txt-3); }
.tree-opts a .ic { flex: none; margin-left: auto; color: var(--txt-3); transition: color .14s, transform .14s; }
.tree-opts a:hover { border-color: rgba(255,158,44,.45) !important; background: rgba(255,158,44,.05); }
.tree-opts a:hover .ic { color: var(--amber); transform: translateX(3px); }
.tree-verdict {
  display: inline-flex; align-items: center; gap: 8px; margin-bottom: 12px; padding: 5px 11px; border-radius: 999px;
  font-size: .71875rem; font-weight: 640; letter-spacing: .02em; border: 1px solid var(--line-2); color: var(--txt-2);
}
.tree-verdict::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.tree-verdict.is-good { color: var(--mint); border-color: rgba(53,214,164,.36); background: rgba(53,214,164,.08); }
.tree-verdict.is-maybe { color: var(--amber-2); border-color: rgba(255,158,44,.36); background: rgba(255,158,44,.08); }
.tree-verdict.is-hard { color: #ff9c9c; border-color: rgba(255,111,111,.32); background: rgba(255,111,111,.06); }
.tree-nav { display: none; gap: 16px; margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--line); }
.tree.is-live .tree-nav { display: flex; }
.tree-nav [hidden] { display: none; }
.tree:not(.is-live) .tree-k-step { display: none; }

@media (max-width: 1180px) {
  .gdoc { grid-template-columns: minmax(0, 1fr) 290px; }
  .gdoc .toc { display: none; }
}
@media (max-width: 1080px) {
  .split { grid-template-columns: minmax(0, 1fr); }
  .split-art { max-width: 640px; }
  .ghead-in { grid-template-columns: minmax(0, 1fr); }
  .ghead-art { max-width: 560px; order: -1; }
}
@media (max-width: 900px) {
  .gdoc { grid-template-columns: minmax(0, 1fr); }
  .gdoc .toc { display: block; }
  /* Le rail passe SOUS l'article : on lit d'abord, on agit ensuite. */
  .grail { position: static; }
  .glead { grid-template-columns: minmax(0, 1fr); }
  .glead-img { border-right: 0; border-bottom: 1px solid var(--line); aspect-ratio: 16 / 9; min-height: 0; }
  .toolrow-2 { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 700px) {
  .ghead-art { display: none; }   /* l'image revient dans le partage social, pas au-dessus du titre sur un téléphone */
  .limit li { gap: 13px; }
  .gsteps > li { padding-left: 42px; }
}

/* Plusieurs boutons dans une tête de section en rangée. */
.sec-head-btns { display: flex; flex-wrap: wrap; gap: 10px; flex: none; }
.sec-head-row > .sec-head-btns { max-width: none; }

/* Retouches après revue des captures (19/09/2026). */
/* La lecture du format n'est PAS un message d'erreur : elle reste neutre quand le champ passe au rouge ou au vert. */
.afield.is-bad .av-read, .afield.is-ok .av-read { color: var(--txt-3); }
/* Le pictogramme et le libellé sur la même ligne. */
.tree-nav .linkish { display: inline-flex; align-items: center; gap: 6px; border-bottom: 0; }
.tree-nav .linkish:hover { color: var(--amber-2); }

/* ═══════════════════════ /api — LA RÉFÉRENCE EN TROIS VOLETS ═══════════════
   [!] TROISIÈME FORME. La précédente : une colonne de 940 px, six pavés empilés
   mêlant description, paramètres et réponse, sans sommaire — refusée (« l'UX est
   très mauvais »). Celle-ci est la forme que les développeurs connaissent :
   sommaire des points d'entrée | référence | console qui appelle pour de vrai.
   La console COLLE à côté de sa référence : on lit un champ, on le voit dans la
   réponse sans défiler.
   ═══════════════════════════════════════════════════════════════════════════ */

/* Pastille de méthode HTTP (sommaire, titres, consoles). */
.meth {
  flex: none; display: inline-grid; place-items: center; min-width: 42px; height: 21px; padding: 0 7px;
  border-radius: 5px; font-family: var(--fm); font-size: .625rem; font-weight: 600; letter-spacing: .06em;
}
.meth-get  { color: var(--mint);  background: rgba(53,214,164,.12); border: 1px solid rgba(53,214,164,.3); }
.meth-post { color: var(--amber); background: rgba(255,158,44,.12); border: 1px solid rgba(255,158,44,.32); }

/* ── Bandeau : le titre, et la preuve à côté ─────────────────────────────── */
.apihero-in {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 500px);
  gap: 24px clamp(28px, 4vw, 64px); align-items: center;
}
.apihero-l { display: flex; flex-direction: column; align-items: flex-start; min-width: 0; }
.apihero h1 { max-width: 17ch; }
.apihero .mast-sub { max-width: 62ch; }
.apibase { display: flex; align-items: center; gap: 12px; margin-top: 22px; max-width: 100%; }
.apibase-l { flex: none; font-size: .6875rem; font-weight: 620; letter-spacing: .1em; text-transform: uppercase; color: var(--txt-3); }
.apibase .cpf { min-width: min(320px, 100%); }
.apichips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.apichips li {
  display: inline-flex; align-items: center; gap: 7px; height: 30px; padding: 0 11px; border-radius: 999px;
  font-size: .75rem; font-weight: 520; color: var(--txt-2);
  border: 1px solid var(--line-2); background: rgba(255,255,255,.02);
}
.apichips .ic { width: 13px; height: 13px; color: var(--amber); stroke-width: 1.9; }

/* ── Les trois volets ────────────────────────────────────────────────────── */
.apig { display: grid; grid-template-columns: 196px minmax(0, 1fr); gap: clamp(24px, 3vw, 52px); align-items: start; }
.apimain { min-width: 0; display: flex; flex-direction: column; }

.apinav { position: sticky; top: calc(var(--hdr-h) + 20px); min-width: 0; }
.apinav ol { display: flex; flex-direction: column; gap: 1px; }
.apinav a {
  display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: var(--r-sm);
  border-left: 2px solid transparent; font-size: .8125rem; color: var(--txt-3);
  transition: color .14s, background .14s, border-color .14s;
}
.apinav a > span:last-child { font-family: var(--fm); letter-spacing: -.02em; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.apinav a > .ic + span { font-family: var(--ff); letter-spacing: -.008em; }
.apinav a > .ic { width: 15px; height: 15px; margin: 0 14px 0 13px; color: var(--txt-3); }
.apinav a:hover { color: var(--txt); background: rgba(255,255,255,.035); }
.apinav a.is-cur { color: var(--txt); border-left-color: var(--amber); background: rgba(255,158,44,.05); }
.apinav a.is-cur > .ic { color: var(--amber); }

/* Sections de texte (vue d'ensemble, erreurs, règles). */
.apisec { padding-bottom: clamp(30px, 3.4vw, 50px); scroll-margin-top: calc(var(--hdr-h) + 20px); }
.apisec + .apisec, .apie + .apisec { padding-top: clamp(30px, 3.4vw, 50px); border-top: 1px solid var(--line); }
.apisec h2 { font-size: clamp(1.375rem, 1.1rem + .9vw, 1.75rem); letter-spacing: -.032em; }
.apisec-sub { margin-top: 10px; color: var(--txt-2); font-size: .9375rem; line-height: 1.66; max-width: 78ch; }
.apisec-sub b { color: var(--txt); font-weight: 600; }
.apisec code, .apie-doc code {
  font-family: var(--fm); font-size: .84em; color: var(--txt);
  background: rgba(255,255,255,.055); border: 1px solid var(--line); padding: 1px 5px; border-radius: 4px;
}
.apisec .dtable-wrap { margin-top: 20px; }
.apisec .dtable th code { white-space: nowrap; }
.apirules { margin-top: 20px; }

/* L'intégration en cinq appels : le tracé du site, en cinq nœuds cliquables. */
.apiflow { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0; margin-top: 22px; }
.apiflow li { position: relative; min-width: 0; }
.apiflow li:not(:last-child)::after {
  content: ''; position: absolute; left: 44px; right: 0; top: 23px; height: 2px;
  background-image: radial-gradient(circle, rgba(255,255,255,.26) 1px, transparent 1.2px);
  background-size: 7px 2px; background-repeat: repeat-x; background-position: center;
}
.apiflow a { display: flex; flex-direction: column; align-items: flex-start; gap: 5px; padding-right: 18px; }
.apiflow .hexn { margin-bottom: 9px; position: relative; z-index: 1; transition: background .16s; }
.apiflow a:hover .hexn { background: var(--amber); }
.apiflow b { font-size: .9688rem; font-weight: 620; letter-spacing: -.02em; color: var(--txt); }
.apiflow code { background: none; border: 0; padding: 0; color: var(--amber-2); font-size: .75rem; }
.apiflow small { font-size: .78125rem; color: var(--txt-3); line-height: 1.5; }
.apiconv { margin-top: clamp(22px, 2.4vw, 32px); }

/* ── Un point d'entrée : la référence, et sa console à côté ──────────────── */
.apie {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 468px); gap: clamp(22px, 2.6vw, 44px);
  align-items: start; padding-block: clamp(30px, 3.4vw, 50px); border-top: 1px solid var(--line);
  scroll-margin-top: calc(var(--hdr-h) + 8px);
}
.apie-doc { min-width: 0; }
.apie-side { position: sticky; top: calc(var(--hdr-h) + 20px); min-width: 0; }
.apie-k { font-size: .6875rem; font-weight: 640; letter-spacing: .12em; text-transform: uppercase; color: var(--amber); margin-bottom: 10px; }
.apie-h { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; font-size: clamp(1.25rem, 1.05rem + .7vw, 1.5625rem); letter-spacing: -.03em; }
.apie-h code { font-size: 1em; background: none; border: 0; padding: 0; font-weight: 560; letter-spacing: -.035em; }
.apie-h .meth { height: 24px; min-width: 48px; font-size: .6875rem; }
.apie-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.apie-tags li {
  font-size: .6875rem; font-weight: 560; letter-spacing: .02em; color: var(--txt-3);
  padding: 3px 8px; border-radius: 5px; border: 1px solid var(--line-2); background: rgba(255,255,255,.02);
}
.apie-desc { margin-top: 16px; font-size: .9375rem; color: var(--txt-2); line-height: 1.7; max-width: 70ch; }
.apie-desc b, .apif dd b, .apie-note b { color: var(--txt); font-weight: 600; }
.apie-desc em, .apif dd em { font-style: normal; color: var(--txt); font-weight: 500; }
.apie-sh {
  margin: 26px 0 0; padding-bottom: 9px; border-bottom: 1px solid var(--line-2);
  font-size: .6875rem; font-weight: 640; letter-spacing: .12em; text-transform: uppercase; color: var(--txt-3);
}
.apie-none { margin-top: 12px; font-size: .875rem; color: var(--txt-3); }

/* Liste de champs : le nom et le type à gauche, le sens à droite. */
.apif > div {
  display: grid; grid-template-columns: minmax(0, 236px) minmax(0, 1fr); gap: 6px 20px;
  padding: 13px 0; border-bottom: 1px solid var(--line);
}
.apif > div:last-child { border-bottom: 0; }
.apif dt { display: flex; flex-wrap: wrap; align-items: baseline; gap: 5px 8px; min-width: 0; }
.apif dt code { color: var(--amber-2); background: none; border: 0; padding: 0; font-size: .8125rem; letter-spacing: -.02em; overflow-wrap: anywhere; }
.apif dt i { font-style: normal; font-family: var(--fm); font-size: .6875rem; color: var(--txt-3); }
.apif dt em {
  font-style: normal; font-size: .5938rem; font-weight: 640; letter-spacing: .08em; text-transform: uppercase;
  color: var(--amber); padding: 2px 5px; border-radius: 4px; background: rgba(255,158,44,.1);
}
.apif dt em.is-opt { color: var(--txt-3); background: rgba(255,255,255,.04); }
.apif dd { margin: 0; font-size: .8438rem; color: var(--txt-3); line-height: 1.62; }
.apie-note {
  display: flex; gap: 10px; align-items: flex-start; margin-top: 20px; padding: 13px 15px;
  border-left: 2px solid rgba(255,158,44,.5); border-radius: 0 var(--r-sm) var(--r-sm) 0;
  background: rgba(255,158,44,.06); font-size: .8438rem; color: var(--txt-2); line-height: 1.62;
}
.apie-note .ic { flex: none; width: 15px; height: 15px; margin-top: 3px; color: var(--amber); }
.apie-note a, .apisec a { color: var(--amber); border-bottom: 1px solid rgba(255,158,44,.34); }
.apie-note a:hover, .apisec a:hover { color: var(--amber-2); border-bottom-color: var(--amber-2); }
.apiflow a, .apiflow a:hover { border-bottom: 0; color: inherit; }

/* ── La console ──────────────────────────────────────────────────────────── */
.con { display: flex; flex-direction: column; min-width: 0; overflow: hidden; }
.con-bar { display: flex; align-items: center; gap: 10px; padding: 12px 12px 12px 14px; border-bottom: 1px solid var(--line); }
.con-url {
  flex: 1; min-width: 0; font-family: var(--fm); font-size: .78125rem; letter-spacing: -.02em; color: var(--txt);
  white-space: nowrap; overflow-x: auto; scrollbar-width: none; padding: 3px 0;
}
.con-url::-webkit-scrollbar { display: none; }
.con-run { flex: none; height: 34px; padding: 0 14px; }
.con-run .ic { width: 12px; height: 12px; stroke-width: 2.2; fill: currentColor; }
.con-run[disabled] { opacity: .7; cursor: progress; }
.no-js .con-run, .no-js .con-tab-js, .no-js .con-copy, .no-js .con-kbd { display: none; }

.con-params { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 12px; padding: 14px; border-bottom: 1px solid var(--line); background: rgba(0,0,0,.18); }
.con-p { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.con-p:has([data-con-p="address"]), .con-p:has([data-con-p="id"]), .con-p:has([data-con-p="refund"]) { grid-column: 1 / -1; }
.con-p > span { font-family: var(--fm); font-size: .6875rem; color: var(--txt-3); letter-spacing: -.01em; }
.con-p > span i { font-style: normal; color: var(--amber); margin-left: 2px; }
.con-p input, .con-p select {
  width: 100%; min-width: 0; height: 36px; padding: 0 10px; border-radius: var(--r-sm);
  border: 1px solid var(--line-2); background: rgba(0,0,0,.4); color: var(--txt);
  font-family: var(--fm); font-size: .78125rem; letter-spacing: -.02em; transition: border-color .15s;
}
.con-p select { appearance: none; -webkit-appearance: none; cursor: pointer; }
.con-p option { background: #0e131c; }
.con-p input::placeholder { color: var(--txt-3); font-family: var(--ff); letter-spacing: 0; }
.con-p input:focus, .con-p select:focus { outline: none; border-color: rgba(255,158,44,.5); }
.con-mine { grid-column: 1 / -1; justify-self: start; font-size: .75rem; }
.con-mine[hidden] { display: none; }

.con-tabs { display: flex; align-items: center; gap: 2px; padding: 8px 8px 0 10px; }
.con-tab {
  height: 30px; padding: 0 11px; border-radius: 7px 7px 0 0; font-size: .75rem; font-weight: 560; color: var(--txt-3);
  border-bottom: 2px solid transparent; transition: color .14s;
}
.con-tab:hover { color: var(--txt); }
.con-tab[aria-selected="true"] { color: var(--txt); border-bottom-color: var(--amber); }
.con-copy {
  position: relative; margin-left: auto; width: 30px; height: 30px; display: grid; place-items: center;
  border-radius: 7px; color: var(--txt-3); transition: color .14s, background .14s;
}
.con-copy:hover { color: var(--txt); background: rgba(255,255,255,.06); }
.con-copy .ic { width: 15px; height: 15px; }
.con-copy .cpf-ok { position: absolute; inset: 0; display: grid; place-items: center; opacity: 0; color: var(--mint); transition: opacity .15s; }
.con-copy.is-ok > .ic { opacity: 0; }
.con-copy.is-ok .cpf-ok { opacity: 1; }

.con-body { border-top: 1px solid var(--line); background: #05070b; min-width: 0; }
.con-out {
  margin: 0; padding: 14px 16px; min-height: 120px; max-height: min(460px, 56vh); overflow: auto;
  font-family: var(--fm); font-size: .75rem; line-height: 1.62; color: #b9c4d6; tab-size: 2;
  white-space: pre; scrollbar-width: thin; scrollbar-color: var(--ink-600) transparent;
}
.con-out code { font: inherit; color: inherit; background: none; border: 0; padding: 0; }
.con-out[hidden] { display: none; }
.con-out:focus-visible { outline: 2px solid rgba(255,158,44,.5); outline-offset: -2px; }
.con-out.is-bad { color: #ffb3b3; }
.con-out.is-busy { opacity: .45; transition: opacity .15s; }
.con-code { color: #d5dde9; white-space: pre-wrap; word-break: break-word; }
.con-open { color: var(--amber); border-bottom: 1px dashed rgba(255,158,44,.42); }
.con-hero .con-out { min-height: 0; max-height: 300px; }
.j-k { color: #8fb4ff; } .j-s { color: #9fe0c6; } .j-n { color: var(--amber-2); } .j-b { color: #e39cf0; } .j-c { color: var(--txt-3); font-style: italic; }

.con-meta {
  display: flex; flex-wrap: wrap; align-items: center; gap: 4px 14px; padding: 9px 16px; border-top: 1px solid var(--line);
  font-family: var(--fm); font-size: .6875rem; color: var(--txt-3); letter-spacing: -.01em; min-height: 36px;
}
.con-meta span + span::before { content: '·'; margin-right: 14px; color: var(--line-3); }
.con-ok { color: var(--mint); } .con-ko { color: #ff9c9c; }
.con-warn { display: inline-flex; align-items: center; gap: 7px; color: var(--amber-2); font-family: var(--ff); font-size: .75rem; }
.con-warn .ic { opacity: 1; }
@media (pointer: coarse) { .con-kbd { display: none; } }

/* ── Adaptatif ───────────────────────────────────────────────────────────── */
@media (max-width: 1240px) {
  .apie { grid-template-columns: minmax(0, 1fr) minmax(0, 420px); }
  .apif > div { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 1080px) {
  .apihero-in { grid-template-columns: minmax(0, 1fr); }
  .apig { grid-template-columns: minmax(0, 1fr); gap: 0; }
  /* Le sommaire devient une barre de pastilles qui défile et COLLE sous l'en-tête :
     sur une page de cette longueur, c'est le seul moyen de ne pas s'y perdre. */
  .apinav {
    top: var(--hdr-h); z-index: 20; margin: 0 calc(var(--gutter) * -1) 22px; padding: 9px var(--gutter);
    background: rgba(6,8,12,.9); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
    border-bottom: 1px solid var(--line);
  }
  .apinav .toc-h { display: none; }
  .apinav ol { flex-direction: row; gap: 6px; overflow-x: auto; scrollbar-width: none; }
  .apinav ol::-webkit-scrollbar { display: none; }
  .apinav li { flex: none; }
  .apinav a { border-left: 0; border: 1px solid var(--line-2); border-radius: 999px; padding: 6px 12px 6px 8px; }
  .apinav a > .ic { margin: 0 2px 0 4px; }
  .apinav a.is-cur { border-color: rgba(255,158,44,.5); }
  .apie, .apisec { scroll-margin-top: calc(var(--hdr-h) + 62px); }
}
@media (max-width: 900px) {
  .apie { grid-template-columns: minmax(0, 1fr); }
  .apie-side { position: static; }
  .apiflow { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .apiflow li:not(:last-child)::after { display: none; }
  .apiflow a { flex-direction: row; flex-wrap: wrap; align-items: center; gap: 4px 12px; padding-right: 0; }
  .apiflow .hexn { margin-bottom: 0; }
  .apiflow small { flex-basis: 100%; padding-left: 56px; margin-top: -8px; }
}
@media (max-width: 640px) {
  .apibase { flex-direction: column; align-items: flex-start; gap: 7px; width: 100%; }
  .apibase .cpf { width: 100%; }
  .con-params { grid-template-columns: minmax(0, 1fr); }
  .con-out { font-size: .71875rem; max-height: 380px; }
  .apiflow small { padding-left: 0; margin-top: 0; }
}

/* ═══════════════════════ DOCUMENTS JURIDIQUES — DEUXIÈME FORME ═════════════
   (conditions, vie privée, LCB-FT, risques — gabarit inc/doc.php)
   [!] La première forme : un sommaire et une colonne de 74 signes, 40 % de l'écran
   vide à droite. Refusée. Un document juridique se CONSULTE : les quatre documents
   à un clic, l'essentiel en cinq points pleine largeur, et À CÔTÉ de chaque clause
   sa traduction en une phrase. La colonne de droite se lit seule en une minute.
   [!] `.toc`, `.prose`, `.pr-n`, `.pr-note`, `.pr-conf` restent définis plus haut :
   ils sont PARTAGÉS avec les guides. Ce bloc ne contient que ce qui est propre aux
   documents (`.lg*`).
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Tête : le titre, les repères du document, les quatre onglets ─────────── */
.lgh-in { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 20px clamp(28px, 4vw, 72px); align-items: end; }
.lgh-l { display: flex; flex-direction: column; align-items: flex-start; min-width: 0; }
.lgh .mast-sub { max-width: 66ch; }
.lgh-meta { display: flex; flex-direction: column; gap: 12px; padding-bottom: 4px; min-width: 0; }
.lgh-meta li { display: flex; align-items: flex-start; gap: 11px; }
.lgh-meta li > .ic { flex: none; width: 16px; height: 16px; margin-top: 2px; color: var(--amber); }
.lgh-meta li > span { display: flex; flex-direction: column; gap: 2px; font-size: .75rem; color: var(--txt-3); line-height: 1.45; }
.lgh-meta b { font-size: .8438rem; font-weight: 600; color: var(--txt); letter-spacing: -.012em; }
.lgh-print { margin-top: 2px; }
.no-js .lgh-print { display: none; }

.lgtabs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin-top: clamp(22px, 2.4vw, 32px); }
.lgtabs a {
  display: flex; align-items: center; gap: 13px; min-width: 0; padding: 13px 15px; border-radius: var(--r-lg);
  border: 1px solid var(--line-2); background: rgba(255,255,255,.015);
  transition: border-color .15s, background .15s;
}
.lgtabs a:hover { border-color: var(--line-3); background: rgba(255,255,255,.035); }
.lgtabs a[aria-current] { border-color: rgba(255,158,44,.5); background: linear-gradient(176deg, #1a1710, rgba(255,158,44,.03) 70%); }
.lgtabs a[aria-current] .hexi { background: linear-gradient(180deg, var(--amber-2), var(--amber-dk)); }
.lgtabs-t { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.lgtabs-t b { font-size: .9063rem; font-weight: 620; letter-spacing: -.018em; color: var(--txt); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lgtabs-t small { font-size: .71875rem; color: var(--txt-3); line-height: 1.4; }

/* ── « In plain English » : cinq points sur toute la largeur ──────────────── */
.lgsum { padding: clamp(18px, 2vw, 26px); }
.lgsum-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px 28px; flex-wrap: wrap; padding-bottom: 16px; border-bottom: 1px solid var(--line); }
.lgsum-k { display: flex; align-items: center; gap: 9px; font-size: .6875rem; font-weight: 640; letter-spacing: .12em; text-transform: uppercase; color: var(--txt); }
.lgsum-k .ic { color: var(--amber); width: 16px; height: 16px; }
.lgsum-n { font-size: .75rem; color: var(--txt-3); line-height: 1.5; }
.lgsum-list { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0; margin-top: 18px; }
.lgsum-list li { display: flex; flex-direction: column; gap: 10px; padding: 0 clamp(12px, 1.4vw, 20px); border-left: 1px solid var(--line); min-width: 0; }
.lgsum-list li:first-child { padding-left: 0; border-left: 0; }
.lgsum-list li:last-child { padding-right: 0; }
.lgsum-i {
  width: 26px; height: 29px; flex: none; display: grid; place-items: center;
  clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
  background: rgba(255,158,44,.16); color: var(--amber-2); font-family: var(--fm); font-size: .6875rem; font-weight: 600;
}
.lgsum-list p { font-size: .8438rem; color: var(--txt-2); line-height: 1.62; }
.lgsum-list b { color: var(--txt); font-weight: 600; }
.lgsum-list a, .lg-ref { color: var(--amber); border-bottom: 1px solid rgba(255,158,44,.34); white-space: nowrap; }
.lgsum-list a:hover, .lg-ref:hover { color: var(--amber-2); border-bottom-color: var(--amber-2); }

/* ── Le document : sommaire | clause | « en bref » ────────────────────────── */
.lgdoc { display: grid; grid-template-columns: 208px minmax(0, 1fr); gap: clamp(26px, 3.4vw, 56px); align-items: start; margin-top: clamp(30px, 3.4vw, 48px); }
.lgtoc a.is-cur { color: var(--txt); border-left-color: var(--amber); background: rgba(255,158,44,.05); }
.lgtoc a.is-cur span { color: var(--amber); opacity: 1; }
.lgsecs { min-width: 0; }

/* Les intitulés des deux colonnes : dits UNE fois, en tête. */
.lgcols, .lgs { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 312px); column-gap: clamp(24px, 3vw, 48px); }
.lgcols { padding-bottom: 11px; border-bottom: 1px solid var(--line-2); }
.lgcols span { font-size: .6875rem; font-weight: 640; letter-spacing: .12em; text-transform: uppercase; color: var(--txt-3); }

.lgs { grid-template-areas: "h h" "b g"; row-gap: 14px; padding-block: clamp(26px, 2.8vw, 38px); border-bottom: 1px solid var(--line); scroll-margin-top: calc(var(--hdr-h) + 12px); }
.lgs:target { background: linear-gradient(90deg, rgba(255,158,44,.05), transparent 60%); }
.lgs-h { grid-area: h; display: flex; align-items: baseline; gap: 13px; min-width: 0; }
.lgs-h h2 { font-size: clamp(1.125rem, .98rem + .55vw, 1.375rem); letter-spacing: -.028em; line-height: 1.25; }
.lgs-h .pr-n { font-size: .78125rem; }
.lgs-link {
  position: relative; flex: none; align-self: center; width: 28px; height: 28px; display: grid; place-items: center;
  border-radius: 7px; color: var(--txt-3); opacity: 0; transition: opacity .15s, color .15s, background .15s;
}
.lgs-link .ic { width: 14px; height: 14px; }
.lgs:hover .lgs-link, .lgs-link:focus-visible, .lgs-link.is-ok { opacity: 1; }
.lgs-link:hover { color: var(--amber); background: rgba(255,158,44,.08); }
.lgs-link .cpf-ok { position: absolute; inset: 0; display: grid; place-items: center; opacity: 0; color: var(--mint); }
.lgs-link.is-ok > .ic { opacity: 0; }
.lgs-link.is-ok .cpf-ok { opacity: 1; }
@media (hover: none) { .lgs-link { opacity: .7; } }
.lgs-body { grid-area: b; max-width: none; }

/* La traduction de la clause. Elle COLLE : sur une longue clause, elle reste à
   hauteur d'œil pendant qu'on lit le détail. */
.lgs-gloss {
  grid-area: g; align-self: start; position: sticky; top: calc(var(--hdr-h) + 18px);
  padding: 14px 16px 15px; border-left: 2px solid rgba(255,158,44,.55); border-radius: 0 var(--r-md) var(--r-md) 0;
  background: rgba(255,158,44,.05);
}
.lgs-gloss-k { font-size: .625rem; font-weight: 640; letter-spacing: .12em; text-transform: uppercase; color: var(--amber); margin-bottom: 7px; }
.lgs-gloss p:last-child { font-size: .875rem; color: var(--txt); line-height: 1.62; letter-spacing: -.004em; }
.lgs-gloss a { color: var(--amber); border-bottom: 1px solid rgba(255,158,44,.34); }

/* Pied du document : la question, et le document suivant. */
.lgend { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 312px); gap: clamp(24px, 3vw, 48px); align-items: stretch; padding-top: clamp(26px, 2.8vw, 38px); }
.lgend-q { display: flex; gap: 14px; align-items: flex-start; }
.lgend-q p { font-size: .875rem; color: var(--txt-3); line-height: 1.64; max-width: 60ch; }
.lgend-q b { display: block; color: var(--txt); font-weight: 620; letter-spacing: -.014em; margin-bottom: 3px; }
.lgend-q a { color: var(--amber); border-bottom: 1px solid rgba(255,158,44,.34); }
.lgend-next {
  display: flex; flex-direction: column; gap: 4px; padding: 15px 17px; border-radius: var(--r-lg);
  border: 1px solid var(--line-2); background: rgba(255,255,255,.015); transition: border-color .15s, background .15s;
}
.lgend-next:hover { border-color: rgba(255,158,44,.42); background: rgba(255,158,44,.04); }
.lgend-next span { font-size: .625rem; font-weight: 640; letter-spacing: .12em; text-transform: uppercase; color: var(--txt-3); }
.lgend-next b { display: flex; align-items: center; gap: 8px; font-size: .9688rem; font-weight: 620; letter-spacing: -.02em; }
.lgend-next b .ic { width: 15px; height: 15px; color: var(--amber); transition: transform .18s; }
.lgend-next:hover b .ic { transform: translateX(3px); }
.lgend-next small { font-size: .75rem; color: var(--txt-3); line-height: 1.45; }

@media (max-width: 1180px) {
  .lgsum-list { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 22px; }
  .lgsum-list li:nth-child(4) { padding-left: 0; border-left: 0; }
  .lgcols, .lgs, .lgend { grid-template-columns: minmax(0, 1fr) minmax(0, 270px); }
}
@media (max-width: 1080px) {
  .lgh-in { grid-template-columns: minmax(0, 1fr); align-items: start; }
  .lgh-meta { flex-direction: row; flex-wrap: wrap; gap: 12px 28px; align-items: center; }
  .lgtabs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .lgdoc { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 860px) {
  /* Une colonne : la phrase « en bref » passe AVANT la clause — on sait ce que dit
     la section avant de décider de la lire. */
  .lgcols { display: none; }
  .lgs { grid-template-columns: minmax(0, 1fr); grid-template-areas: "h" "g" "b"; }
  .lgs-gloss { position: static; }
  .lgend { grid-template-columns: minmax(0, 1fr); }
  .lgsum-list { grid-template-columns: minmax(0, 1fr); row-gap: 0; }
  .lgsum-list li { flex-direction: row; gap: 13px; padding: 13px 0; border-left: 0; border-top: 1px solid var(--line); }
  .lgsum-list li:first-child { border-top: 0; padding-top: 0; }
  .lgsum-list li:last-child { padding-bottom: 0; }
}
@media (max-width: 640px) {
  /* Les quatre onglets : une rangée qui défile, l'intitulé seul. */
  .lgtabs { display: flex; gap: 8px; overflow-x: auto; margin-inline: calc(var(--gutter) * -1); padding: 0 var(--gutter) 4px; scrollbar-width: none; }
  .lgtabs::-webkit-scrollbar { display: none; }
  .lgtabs a { flex: none; padding: 9px 13px 9px 9px; gap: 9px; border-radius: 999px; }
  .lgtabs a .hexi { width: 26px; height: 29px; }
  .lgtabs a .hexi-in { width: 23px; height: 25.5px; }
  .lgtabs a .hexi .ic { width: 13px; height: 13px; }
  .lgtabs-t small { display: none; }
  .lgh-meta { flex-direction: column; align-items: flex-start; gap: 10px; }
  .lgh-print { display: none; }   /* sur téléphone, « imprimer » est dans le menu du navigateur */
}

/* ── Impression : un document juridique finit souvent en PDF ──────────────── */
@media print {
  .hdr, .ft, .drawer, .skip, .lgtabs, .lgtoc, .lgh-print, .lgs-link, .lgend, .lgcols, .crumb { display: none !important; }
  html, body { background: #fff !important; }
  body::before, body::after, .seam::before, .seam::after, .inst::before { display: none !important; }
  .lg, .lg * { color: #111 !important; background: none !important; box-shadow: none !important; text-shadow: none !important; }
  .lg .kicker, .lg .pr-n, .lg .lgs-gloss-k, .lg .lgsum-n { color: #555 !important; }
  .lg .mast, .lg .sec { padding: 0 !important; }
  .lg .wrap { max-width: none; padding: 0; }
  .lgh-in, .lgdoc { display: block; }
  .lgh-meta { margin-top: 10pt; }
  .lgh-meta .ic, .lgsum-k .ic { display: none; }
  .lgsum { border: 1px solid #999 !important; border-radius: 6pt; margin-top: 14pt; padding: 10pt; }
  .lgsum-list { display: block; }
  .lgsum-list li { display: flex; flex-direction: row; gap: 8pt; padding: 4pt 0; border: 0; }
  .lgsum-i { clip-path: none; background: none !important; width: auto; height: auto; }
  .lgs { display: block; padding: 12pt 0; border-bottom: 1px solid #ccc; break-inside: avoid; }
  .lgs-gloss { position: static; margin-top: 8pt; padding: 6pt 10pt; border-left: 2pt solid #999 !important; font-style: italic; }
  .lg a { border-bottom: 0 !important; text-decoration: underline; }
  .lg .prose ul li::before { background: #555 !important; }
  .lg code { border: 1px solid #ccc !important; }
}


/* ═══════════════════════════════════════════════════════════════════════════
   MOBILE — LE SITE COMME UNE APPLICATION (20/09/2026)
   Le bureau était jugé parfait ; ce bloc ne touche QUE les petits écrans, et il
   vient EN DERNIER : à spécificité égale c'est la position dans la feuille qui
   tranche, et tout ce qui précède peut être redit ici sans `!important`.
   Principes :
   · une barre d'ONGLETS fixe en bas (≤ 760 px) : Swap · Track · Assets · Guides ·
     Menu — cinq destinations sous le pouce, l'onglet courant décidé au rendu ;
   · le menu est une FEUILLE qui monte du bas, à tuiles groupées ;
   · sur l'accueil, le module vient JUSTE après le titre : l'outil d'abord ;
   · cibles tactiles ≥ 40 px, champs à 16 px (sinon iOS zoome), aucun texte
     sous 11 px, les affordances de survol montrées d'emblée (pas de survol au doigt) ;
   · les tableaux deviennent des fiches, les cartes de guides un carrousel à crans.
   [!] `env(safe-area-inset-bottom)` : la barre d'accueil des iPhone recouvrirait
       la barre d'onglets. `viewport-fit=cover` est posé dans <head>.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Bases tactiles (toutes largeurs, sans effet à la souris) ─────────────── */
* { -webkit-tap-highlight-color: transparent; }
a, button, summary, label, select, [role="button"] { touch-action: manipulation; }
@keyframes sheet-up { from { transform: translateY(28px); opacity: 0; } }

/* La barre d'onglets n'existe que sur téléphone. */
.tabbar { display: none; }

/* Au doigt, pas de survol : ce qui n'apparaissait qu'au survol est montré d'emblée,
   et les soulèvements sont retirés — ils restaient collés après un tap. */
@media (hover: none) {
  .pair-go, .cx-go { opacity: 1; transform: none; }
  .pair:hover, .gcard:hover, .coinc:hover, .toolc:hover, .glead:hover, .btn-pri:hover { transform: none; }
  .flip:hover { color: var(--txt-2); border-color: var(--line-2); transform: none; }
  .btn:active, .pair:active, .gcard:active, .coinc:active, .toolc:active, .glead:active,
  .arow a:active, .cx-row:active, .pick-row:active, .toolrow a:active, .lgtabs a:active,
  .drawer-grid a:active { transform: scale(.985); transition: transform .08s; }
  .btn-pri:active { box-shadow: 0 1px 0 rgba(255,255,255,.32) inset, 0 6px 16px -10px rgba(255,158,44,.6); }
}

/* ── ≤ 760 px : la coque d'application ───────────────────────────────────── */
@media (max-width: 760px) {
  :root { --tab-h: 60px; }
  /* Le pied de page ne doit pas finir SOUS la barre. */
  body { padding-bottom: calc(var(--tab-h) + env(safe-area-inset-bottom, 0px)); }

  .tabbar {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 100;
    display: grid; grid-template-columns: repeat(5, minmax(0, 1fr));
    height: calc(var(--tab-h) + env(safe-area-inset-bottom, 0px));
    padding: 0 env(safe-area-inset-right, 0px) env(safe-area-inset-bottom, 0px) env(safe-area-inset-left, 0px);
    background: rgba(6,8,12,.9);
    backdrop-filter: blur(18px) saturate(150%); -webkit-backdrop-filter: blur(18px) saturate(150%);
    border-top: 1px solid var(--line-2);
    box-shadow: 0 -18px 40px -30px rgba(0,0,0,.9);
  }
  .tab {
    position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px;
    min-width: 0; padding: 0; color: var(--txt-3);
    font-size: .6875rem; font-weight: 580; letter-spacing: .01em; line-height: 1;
    transition: color .15s;
  }
  .tab .tab-ic { width: 22px; height: 22px; stroke-width: 1.7; transition: transform .16s; }
  .tab:active .tab-ic { transform: scale(.9); }
  .tab.is-cur { color: var(--amber); }
  .tab.is-cur .tab-ic { stroke-width: 2; }
  /* Le repère de l'onglet courant : un trait ambré qui prolonge le filet du haut. */
  .tab.is-cur::before {
    content: ''; position: absolute; top: -1px; left: 50%; width: 28px; height: 2px; margin-left: -14px;
    border-radius: 0 0 2px 2px; background: var(--amber);
    box-shadow: 0 0 10px rgba(255,158,44,.55);
  }
  .tab[aria-expanded="true"] { color: var(--txt); }

  /* Le menu monte du bas, par-dessus la barre d'onglets. */
  .drawer { z-index: 130; background: rgba(4,6,9,.6); }
  .drawer-sheet {
    inset: auto 0 0 0; width: 100%; height: auto;
    max-height: calc(100vh - 28px); max-height: calc(100dvh - 28px);
    border-left: 0; border-top: 1px solid var(--line-2); border-radius: 20px 20px 0 0;
    padding: 8px 16px calc(16px + env(safe-area-inset-bottom, 0px));
    gap: 12px; box-shadow: 0 -30px 80px -20px rgba(0,0,0,.9);
    animation: sheet-up .28s cubic-bezier(.2,.8,.3,1);
  }
  .drawer-grab { display: block; width: 40px; height: 4px; border-radius: 2px; background: var(--line-3); margin: 2px auto 0; flex: none; }
  .drawer-top { padding-top: 2px; }
  .drawer-note { margin-top: 2px; }

  /* Le sélecteur d'actifs : même feuille, même poignée, même marge basse. */
  .pick-sheet .drawer-grab { display: block; margin: 8px auto 0; }
  .pick-sheet { padding-bottom: env(safe-area-inset-bottom, 0px); }
  .pick-head { padding: 8px 10px 10px 18px; }
  .pick-row { padding: 12px 11px; }
  .icon-btn, .motion { width: 40px; height: 40px; }

  /* Cibles tactiles : 40 px, le minimum pour un pouce. */
  .seg-b { height: 40px; }
  .btn-sm { height: 40px; }
  .amt { min-height: 40px; }
  .toc a { padding: 10px 10px; }
  .ft-col ul { gap: 0; }
  .ft-col a { display: block; padding: 9px 0; }
  .av-chip { height: 40px; }
  .apinav a { min-height: 40px; }
  .con-tab { height: 36px; }
  .con-copy { width: 36px; height: 36px; }
  .con-run { height: 40px; }
  .coinnav a { min-height: 40px; }
  .adir-pairs a { height: 40px; }
  .lgs-link { width: 36px; height: 36px; opacity: .7; }
  .lgh-print .btn { height: 40px; }
  .dt-go { height: 44px; }
  .crumb a { padding: 6px 0; margin: -6px 0; }
  .afield-clear, .tk-recent-h .linkish, .tree-nav .linkish { padding: 8px 0; margin: -8px 0; }
  .tk-it-x { width: 46px; }
  .cpf-b { min-width: 46px; }
  .adir-more { width: 46px; height: 46px; }

  /* Champs à 16 px : sous cette taille, iOS zoome sur le champ au focus et la page
     ne revient jamais tout à fait à sa place. */
  .afield-in, .tk-in, .pick-search input, .adir-search input, .adir-sel select,
  .av-sel select, .con-p input, .con-p select, .sform-ta { font-size: 1rem; }
  .con-p input, .con-p select { height: 40px; }
  .sform .btn { width: 100%; }
}

/* ── ≤ 640 px : chaque page, écran par écran ─────────────────────────────── */
@media (max-width: 640px) {
  :root { --hdr-h: 56px; }
  .burger { width: 44px; height: 44px; border: 0; background: rgba(255,255,255,.045); }

  /* Échelle typographique du téléphone. */
  h1 { font-size: 2rem; letter-spacing: -.034em; line-height: 1.08; }
  h2 { font-size: 1.5rem; letter-spacing: -.03em; }
  .mast h1 { font-size: 1.75rem; }
  .lede { font-size: .9688rem; line-height: 1.55; }
  .sec-sub, .mast-sub { font-size: .9375rem; margin-top: 10px; }
  .sec { padding: 34px 0; }
  .sec-next { padding-top: 26px; }
  .sec-head { margin-bottom: 20px; }
  .cta { padding: 34px 0; }
  .kicker { margin-bottom: 8px; }

  /* Plus rien sous 11 px. */
  .rt-lab { font-size: .6875rem; letter-spacing: .02em; }
  .rt b { font-size: .8125rem; }
  .rt i { font-size: .6875rem; }
  .who { font-size: .6875rem; letter-spacing: .08em; padding: 3px 7px; }
  .chip { font-size: .625rem; }
  .asset-w { font-size: .6875rem; }
  .swap-legal, .pay-legal { font-size: .75rem; }
  .plate-txt code { font-size: .75rem; }
  .field-meta { font-size: .78125rem; }
  .swap-hint { font-size: .8125rem; }
  .arow-t i, .coinc-id i, .coinc-f, .cx-n small, .cx-p i, .gcard-meta,
  .dtable .num i, .dtable .num small, .dtable tbody th small, .tk-it-t i, .tk-it-ago,
  .lgs-gloss-k, .lgend-next span, .meth, .flow-n-in, .ofacts dt, .dep-k,
  .grail-n, .ohash-note, .ocard-live, .ocard-help, .tk-recent-n, .dep-qr figcaption { font-size: .75rem; }

  /* ACCUEIL : le titre, la promesse, puis l'OUTIL — le chapô attend en dessous.
     `.hero-lead` s'efface (`display: contents`) : ses enfants prennent chacun une
     zone de la grille, sans toucher à l'ordre du balisage ni à la lecture vocale. */
  .hero { padding-top: 16px; padding-bottom: 30px; }
  .hero-in {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "h1" "claim" "swap" "lede" "flow";
    row-gap: 0;
  }
  .hero-lead { display: contents; }
  .hero-lead > h1 { grid-area: h1; margin: -.1em 0 12px; }
  .hero-lead > .claim { grid-area: claim; margin: 0; font-size: .9375rem; gap: 10px; }
  .claim i { width: 9px; height: 10px; }
  .hero-in > .swap { grid-area: swap; max-width: none; margin-top: 18px; }
  .hero-lead > .lede { grid-area: lede; margin-top: 24px; max-width: none; }
  .hero-flow { grid-area: flow; }
  .hero-flow > .route { margin-top: 24px; }
  .rail { margin-top: 22px; padding-top: 16px; }
  .swap { padding: 14px; gap: 8px; }
  .swap .btn-lg { height: 52px; }
  .swap-detail { padding: 9px 13px; }

  /* Bandeau des pages intérieures : plus serré, et les chiffres en RUBAN qui
     défile — quatre cases empilées coûtaient un demi-écran avant l'outil. */
  .mast { padding: 16px 0 16px; }
  .mast-tight, .mast-dense { padding-bottom: 12px; }
  .crumb { margin-bottom: 12px; }
  .crumb ol { font-size: .75rem; }
  .mast-meta, .mast-split .mast-meta {
    display: flex; flex-wrap: nowrap; gap: 0; overflow-x: auto; scrollbar-width: none;
    margin: 16px calc(var(--gutter) * -1) 0; padding: 0 var(--gutter) 6px;
  }
  .mast-meta::-webkit-scrollbar { display: none; }
  .mast-meta { align-self: stretch; min-width: 0; max-width: none; }
  .mast-meta li { flex: none; padding-right: 18px; margin-right: 18px; border-right: 1px solid var(--line); }
  .mast-meta li:last-child { padding-right: 0; margin-right: 0; border-right: 0; }
  .mast-meta b { font-size: 1.0625rem; white-space: nowrap; }
  .mast-meta span { font-size: .6875rem; white-space: nowrap; }
  .mast-dense .mast-meta li:nth-child(n+4) { display: flex; }
  .mast-dense .mast-sub { font-size: .9375rem; }
  .coin-h1 { gap: 10px; }
  .coin-h1 .hexb { width: 40px; height: 45px; }
  .coin-h1 .hexb-in { width: 36px; height: 40px; }
  .coin-h1 .hexb-in img { width: 21px; height: 21px; }

  /* Parcours d'échange (/exchange, /order) : la progression tient lieu de fil
     d'Ariane ; tout ce qui précède le champ se resserre pour que le bouton reste
     dans le premier écran malgré la barre d'onglets. */
  .mast-app { padding: 12px 0 8px; }
  .mast-app .crumb { display: none; }
  .mast-app-in > .flow { margin: 0 0 12px; }
  .mast-app-in > h1 { font-size: 1.375rem; }
  .mast-app-in > .mast-sub { font-size: .875rem; margin-top: 6px; }
  .sec-app { padding-top: 12px; }
  .xc-head { padding: 12px 14px; }
  .xc-col-pay { padding: 14px 14px 16px; gap: 12px; }
  .xc-sum { padding: 13px 14px; }
  .xc-go { padding-top: 14px; gap: 10px; }
  .xc-go .btn-lg { height: 52px; }
  .afield-ta { padding-top: 15px; padding-bottom: 15px; min-height: 54px; }
  .afield-lead { top: 17px; }
  .afield-row-ta .afield-state { top: 16px; }
  .xc-rail { padding-top: 10px; }

  /* /order : le QR au centre de la carte, à la taille d'un scan confortable. */
  .dep-head { padding: 16px 16px 14px; }
  .dep-grid { padding: 16px; gap: 16px; }
  .dep-qr { align-items: center; }
  .qr { max-width: 208px; }
  .dep-amt { font-size: 2rem; }
  .ocard { padding: 16px; }
  .keep { padding: 16px; gap: 12px; }
  .keep .btn { width: 100%; }
  .ostate { padding: 20px 16px; }

  /* /track */
  .tk-card { padding: 16px 14px 14px; }
  .tk-form { padding: 18px 16px; }

  /* Paires : rangées serrées, chevron visible. */
  .pairs { gap: 8px; }
  .pair { padding: 11px 12px; gap: 11px; }
  .pair-go { opacity: 1; transform: none; }
  .pairs-more { margin-top: 16px; }
  .pairs-more .btn { flex: 1 1 100%; }

  /* Guides : un CARROUSEL à crans (une carte et l'amorce de la suivante), au lieu
     de trois grandes cartes empilées sur 1 200 px. Le sommaire des guides garde
     une liste, compacte : l'image à gauche, le titre et deux lignes à droite. */
  .gcards {
    display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory;
    margin-inline: calc(var(--gutter) * -1); padding: 4px var(--gutter) 12px;
    scrollbar-width: none; -webkit-overflow-scrolling: touch;
  }
  .gcards::-webkit-scrollbar { display: none; }
  .gcards > .gcard { flex: 0 0 82%; scroll-snap-align: start; scroll-margin-left: var(--gutter); }
  .gcard-b { padding: 14px 16px 16px; }
  .gcards-gap .gcards { display: flex; flex-direction: column; gap: 10px; overflow: visible; margin-inline: 0; padding: 0; scroll-snap-type: none; }
  .gcards-gap .gcards > .gcard { flex: none; flex-direction: row; align-items: stretch; }
  .gcards-gap .gcard-img { flex: 0 0 36%; aspect-ratio: auto; border-bottom: 0; border-right: 1px solid var(--line); }
  .gcards-gap .gcard-b { padding: 11px 13px; gap: 4px; }
  .gcards-gap .gcard-t { font-size: .9375rem; line-height: 1.22; }
  .gcards-gap .gcard-d { font-size: .78125rem; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
  .gcards-gap .gcard-go { display: none; }
  .glead-b { padding: 18px 16px 20px; }

  /* Sommaire des monnaies : les noms longs passent à la ligne au lieu d'être tronqués. */
  .coinc-id b { white-space: normal; line-height: 1.15; }

  /* Barème des pages de paire : des FICHES, plus un tableau qui défile du doigt. */
  .ladder-wrap { overflow: visible; border: 0; background: none; border-radius: 0; }
  .ladder { min-width: 0; display: block; }
  .ladder thead { display: none; }
  .ladder tbody { display: flex; flex-direction: column; gap: 8px; }
  .ladder tbody tr {
    display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "send get" "rate cost";
    gap: 3px 12px; padding: 12px 14px; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--ink-850);
  }
  .ladder th, .ladder td { padding: 0; text-align: left; }
  .ladder tbody th { grid-area: send; font-size: .9375rem; }
  .ladder tbody td.is-out { grid-area: get; text-align: right; font-size: .9375rem; }
  .ladder tbody td:nth-child(3) { grid-area: rate; font-size: .75rem; color: var(--txt-3); }
  .ladder tbody td:nth-child(3)::before { content: 'rate '; font-family: var(--ff); }
  .ladder tbody td:last-child { grid-area: cost; text-align: right; font-size: .75rem; }

  /* Tableaux en fiches : l'intitulé repris devant chaque valeur reste lisible. */
  .dtable tbody td { grid-template-columns: 104px minmax(0, 1fr); gap: 10px; }
  .dtable tbody tr { padding: 13px 14px 14px; }

  /* Sections de l'accueil. */
  .qc { padding: 18px 16px 16px; }
  .qc-delta { padding: 14px 15px; }
  .plate-row li { padding: 13px 14px; }
  .faq summary { padding: 15px 16px; font-size: .9375rem; }
  .faq details > div { padding: 0 16px 16px; }
  .cta-in { padding: 24px 18px; gap: 18px; }
  .step { padding-left: 56px; padding-bottom: 26px; }
  .steps p { font-size: .875rem; }

  /* Pied de page : deux colonnes, des rangées à hauteur de doigt. */
  .ft { padding: 36px 0 22px; }
  .ft-cols { gap: 20px 18px; }
  .ft-pitch { font-size: .8438rem; }
  .ft-bottom { font-size: .75rem; }

  /* Outils, annuaire, API, juridique. */
  .adir-bar { top: calc(var(--hdr-h) + 6px); }
  .toolc-b { padding: 16px; }
  .av { padding: 16px 14px; gap: 18px; }
  .av-out { padding: 16px 14px; }
  .apihero .mast-sub { font-size: .9375rem; }
  .con-bar { padding: 10px 10px 10px 12px; }
  .apie { padding-block: 26px; }
  .lgsum { padding: 16px 14px; }
  .lgs { padding-block: 22px; }
  .lgs-gloss { padding: 12px 14px 13px; }
  .lgh-meta .lgh-print { display: flex; }
  .tree { padding: 16px 14px; }
  .toc { padding: 12px 10px; }
  .toc a { font-size: .875rem; }

  /* La 404 : le texte reste dans la gouttière. */
  .oops p { padding: 0 var(--gutter); }
}

/* ── Petits téléphones (≤ 380 px) : rien ne doit se tronquer ────────────────── */
@media (max-width: 380px) {
  :root { --gutter: 14px; }
  h1 { font-size: 1.8125rem; }
  .mast h1 { font-size: 1.625rem; }
  .tab { font-size: .625rem; }
  .asset { padding: 0 8px 0 7px; gap: 7px; }
  .amt { font-size: 1.375rem; }
  .drawer-grid { grid-template-columns: minmax(0, 1fr); }
}

/* ── Paysage sur téléphone : la barre d'onglets mangerait un tiers de l'écran ── */
@media (max-width: 900px) and (max-height: 460px) and (orientation: landscape) {
  .tabbar { display: none; }
  body { padding-bottom: 0; }
}

@media print {
  .tabbar { display: none !important; }
  body { padding-bottom: 0 !important; }
}

/* ================================================================
   AFFILIATE - le bureau partenaire (refonte du 20/09/2026)
   Meme grille que les pages de monnaie (.prg) : le trace + les faits a
   gauche, le module - ici la candidature - a droite, au-dessus du pli.
   Regles de PLACEMENT nommees sur leur contexte (.prg > .aff-app), jamais
   sur la classe seule.
   ================================================================ */
.aff-app { padding: clamp(22px, 2.4vw, 28px); display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.aff-app-h .kicker { margin-bottom: 8px; }
.aff-app-h h2 { font-size: clamp(1.25rem, 1.05rem + .7vw, 1.5rem); letter-spacing: -.03em; line-height: 1.15; }
.aff-app-h p { margin-top: 9px; font-size: .875rem; color: var(--txt-3); line-height: 1.6; }
.aff-app-h p b { color: var(--txt-2); font-weight: 580; }
.aff-app .sform { gap: 14px; }
.aff-app .sform .btn { align-self: stretch; width: 100%; }
.aff-app .sform-ta { min-height: 96px; }
.aff-app .pay-legal { text-align: left; }
.aff-app.sent h2 { font-size: 1.25rem; letter-spacing: -.028em; }

/* Le constructeur de lien */
.lb { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(20px, 2.6vw, 40px); padding: clamp(20px, 2.4vw, 30px); }
.lb-in { display: flex; flex-direction: column; gap: 18px; min-width: 0; }
.lb-in .btn { align-self: flex-start; }
.lb-out { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.lb-k { font-size: .6875rem; font-weight: 620; letter-spacing: .07em; text-transform: uppercase; color: var(--txt-3); }
.lb-k + .cpf { margin-bottom: 8px; }
.lb .cpf-v { white-space: normal; word-break: break-all; overflow: visible; text-overflow: clip; line-height: 1.5; }
.lb-acts { display: flex; flex-wrap: wrap; gap: 8px; padding-top: 2px; }
.lb-note { display: flex; gap: 8px; align-items: flex-start; font-size: .75rem; color: var(--txt-3); line-height: 1.58; padding-top: 6px; }
.lb-note .ic { flex: none; margin-top: 3px; opacity: .7; }

@media (max-width: 1080px) {
  /* Le module remonte : c'est l'action de la page (meme regle que .prg > .swap). */
  .prg > .aff-app { order: -1; max-width: 486px; width: 100%; }
}
@media (max-width: 860px) {
  .lb { grid-template-columns: minmax(0, 1fr); }
  .lb-out { padding-top: 18px; border-top: 1px solid var(--line); }
}
@media (max-width: 640px) {
  .aff-app { padding: 18px 16px; }
  .lb { padding: 16px; }
  .lb-in .btn, .lb-acts .btn { width: 100%; justify-content: center; }
}
.mast .aff-h1 { font-size: clamp(1.75rem, 1.2rem + 1.2vw, 2.25rem); }

/* /about : les faits en quatre colonnes (20/09/2026) */
.pr-facts.is-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); margin-top: 0; }
@media (max-width: 1080px) { .pr-facts.is-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .pr-facts.is-4 { grid-template-columns: minmax(0, 1fr); } }