/* ═══════════════════════════════════════════════════════════════
   BUYVIRTUALCARDS — chrome du site, héros, objet-carte, sections
   ═══════════════════════════════════════════════════════════════ */

/* ── En-tête ─────────────────────────────────────────────────── */

.site-header {
  position: sticky;
  inset-block-start: 0;
  z-index: var(--z-header);
  background: color-mix(in srgb, var(--surface) 88%, transparent);
  backdrop-filter: saturate(1.3) blur(12px);
  -webkit-backdrop-filter: saturate(1.3) blur(12px);
  border-block-end: var(--hair) solid transparent;
  transition: border-color var(--d-base) var(--ease-out), background-color var(--d-base) var(--ease-out);
}
.site-header[data-stuck] {
  border-block-end-color: var(--line);
  background: color-mix(in srgb, var(--surface) 96%, transparent);
}
.site-header__in {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s5);
  block-size: var(--header-h);
}

/* Logotype : monogramme gravé dans un octogone + le mot en Didone. */
.logo {
  display: inline-flex;
  align-items: center;
  gap: var(--s3);
  text-decoration: none;
  color: var(--fg);
  flex: none;
}
.logo__mark {
  inline-size: 1.7rem; block-size: 1.7rem;
  flex: none;
  color: var(--accent);
  transition: transform var(--d-slow) var(--ease-press);
}
.logo:hover .logo__mark { transform: rotate(45deg); }
.logo__word {
  font-family: var(--font-title);
  font-size: 1.32rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  line-height: 1;
  text-transform: uppercase;
}

.nav { display: flex; align-items: center; gap: var(--s5); }
.nav__link {
  position: relative;
  padding-block: var(--s2);
  font-size: var(--t-2xs);
  font-weight: 600;
  letter-spacing: var(--tr-caps);
  text-transform: uppercase;
  color: var(--fg-muted);
  text-decoration: none;
  transition: color var(--d-fast) var(--ease-out);
}
.nav__link::after {
  content: "";
  position: absolute;
  inset-inline: 0;
  inset-block-end: 0;
  block-size: var(--hair);
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: inline-end;
  transition: transform var(--d-base) var(--ease-out);
}
.nav__link:hover { color: var(--fg); }
.nav__link:hover::after { transform: scaleX(1); transform-origin: inline-start; }
.nav__link[data-current] { color: var(--fg); }
.nav__link[data-current]::after { transform: scaleX(1); background: var(--accent); }

.nav-toggle {
  display: none;
  inline-size: 2.2rem; block-size: 2.2rem;
  place-items: center;
  border: var(--hair) solid var(--line);
}
.nav-toggle span, .nav-toggle span::before, .nav-toggle span::after {
  content: "";
  display: block;
  inline-size: 14px; block-size: 1px;
  background: var(--fg);
  transition: transform var(--d-base) var(--ease-out), opacity var(--d-fast) linear;
}
.nav-toggle span::before { transform: translateY(-5px); }
.nav-toggle span::after  { transform: translateY(4px); }
.nav-toggle[aria-expanded="true"] span { background: transparent; }
.nav-toggle[aria-expanded="true"] span::before { transform: rotate(45deg); }
.nav-toggle[aria-expanded="true"] span::after  { transform: rotate(-45deg) translateY(0); }

@media (max-width: 68rem) {
  .nav-toggle { display: grid; }
  .nav {
    position: fixed;
    inset: calc(var(--header-h) + var(--band-h)) 0 auto 0;
    z-index: var(--z-drawer);
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: var(--s4) var(--gutter) var(--s7);
    background: var(--surface);
    border-block-end: 1px solid var(--accent-deep);
    box-shadow: var(--sh-lg);
    clip-path: inset(0 0 100% 0);
    transition: clip-path var(--d-base) var(--ease-out);
    max-block-size: calc(100svh - var(--header-h) - var(--band-h));
    overflow-y: auto;
  }
  .nav[data-open] { clip-path: inset(0 0 0 0); }
  .nav__link {
    padding: var(--s4) 0;
    border-block-end: var(--hair) solid var(--line-faint);
    font-size: var(--t-sm);
  }
  .nav__link::after { display: none; }
  .nav__cta { margin-block-start: var(--s5); display: grid; gap: var(--s2); }
  .nav__cta .btn { inline-size: 100%; }
}
@media (min-width: 68.001rem) {
  .nav__cta { display: contents; }
}

/* ── Sélecteur de langue ───────────────────────────────────────
   Quinze langues : une liste déroulante native serait illisible et
   un menu maison mal fait serait pire. On garde un <details> stylé,
   qui reste utilisable au clavier sans une ligne de JavaScript.     */

.lang { position: relative; flex: none; }
.lang > summary {
  display: inline-flex;
  align-items: center;
  gap: var(--s2);
  padding: 0.4em 0.6em;
  border: var(--hair) solid var(--line);
  font-size: var(--t-3xs);
  font-weight: 600;
  letter-spacing: var(--tr-caps);
  text-transform: uppercase;
  color: var(--fg-muted);
  cursor: pointer;
  list-style: none;
  transition: color var(--d-fast) var(--ease-out), border-color var(--d-fast) var(--ease-out);
}
.lang > summary::-webkit-details-marker { display: none; }
.lang > summary:hover { color: var(--accent); border-color: var(--line-accent); }
.lang > summary svg { inline-size: 0.85rem; block-size: 0.85rem; opacity: 0.7; }
.lang[open] > summary { color: var(--accent); border-color: var(--line-accent); }

.lang__menu {
  position: absolute;
  inset-block-start: calc(100% + 6px);
  inset-inline-end: 0;
  z-index: var(--z-drawer);
  inline-size: max-content;
  min-inline-size: 22rem;
  max-inline-size: min(30rem, 92vw);
  padding: var(--s3);
  background: var(--surface-raised);
  border: var(--hair) solid var(--line);
  box-shadow: var(--sh-lg);
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
}
.lang__opt {
  display: flex;
  align-items: baseline;
  gap: var(--s2);
  padding: 0.5em 0.7em;
  font-size: var(--t-sm);
  color: var(--fg-muted);
  text-decoration: none;
  transition: background-color var(--d-fast) linear, color var(--d-fast) linear;
}
.lang__opt:hover { background: var(--accent-wash); color: var(--fg); }
.lang__opt[aria-current="true"] { background: var(--ink); color: var(--surface); }
.lang__opt code {
  font-family: var(--font-serial);
  font-size: var(--t-3xs);
  opacity: 0.6;
  text-transform: uppercase;
}
@media (max-width: 40rem) {
  .lang__menu { grid-template-columns: minmax(0, 1fr); min-inline-size: 14rem; }
}

/* ── Objet-carte ───────────────────────────────────────────────
   La carte est traitée comme une vignette gravée : plaque verte
   profonde, guilloché cuivre, numéro de série à l'encre rouge.      */

.card-stage {
  position: relative;
  perspective: 1500px;
  display: grid;
  place-items: center;
  min-block-size: 20rem;
}

.card-object {
  --tx: 0deg; --ty: 0deg;
  position: relative;
  inline-size: min(25rem, 100%);
  aspect-ratio: 1.5858;              /* ISO/IEC 7810 ID-1 */
  border-radius: var(--r-card);
  transform: rotateX(var(--tx)) rotateY(var(--ty));
  transition: transform var(--d-slow) var(--ease-out);
  box-shadow: var(--sh-card);
  will-change: transform;
}
.card-object[data-tilting] { transition: transform 80ms linear; }

.card-object__face {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  overflow: hidden;
  display: grid;
  grid-template-rows: auto 1fr auto;
  padding: clamp(var(--s4), 4.6%, var(--s5));
  color: #ffffff;
  background: linear-gradient(140deg, #4b48ff 0%, #2b28c4 52%, #1a1880 100%);
  isolation: isolate;
  /* La typographie suit la largeur de la carte, pas celle du viewport. */
  container-type: inline-size;
}

.card-object__guilloche { position: absolute; inset: 0; z-index: -2; color: rgba(255, 255, 255, 0.7); }
.card-object__guilloche svg { inline-size: 100%; block-size: 100%; }

/* Reflet de dorure à chaud sur le liseré cuivre. */
.card-object__foil {
  position: absolute;
  inset: -40%;
  z-index: -1;
  background: linear-gradient(
    66deg,
    transparent 36%,
    rgba(210, 160, 113, 0.06) 44%,
    rgba(255, 232, 196, 0.26) 49%,
    rgba(255, 245, 220, 0.42) 50.5%,
    rgba(255, 232, 196, 0.26) 52%,
    rgba(210, 160, 113, 0.06) 57%,
    transparent 64%
  );
  transform: translateX(-62%);
  animation: foil-sweep 7.5s var(--ease-in-out) infinite;
  pointer-events: none;
}
@keyframes foil-sweep {
  0%, 66%   { transform: translateX(-64%); }
  94%, 100% { transform: translateX(64%); }
}

/* Liseré intérieur gravé, comme le cadre d'une vignette. */
.card-object__face::after {
  content: "";
  position: absolute;
  inset: 5px;
  border: 0.5px solid rgba(210, 160, 113, 0.42);
  border-radius: calc(var(--r-card) - 4px);
  pointer-events: none;
}

.card-object__top { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--s4); }
.card-object__brand {
  display: flex;
  align-items: center;
  gap: 0.42rem;
  font-family: var(--font-title);
  font-size: clamp(0.9rem, 4.4cqw, 1.2rem);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.card-object__brand svg { inline-size: 1.05em; block-size: 1.05em; color: #d2a071; }
.card-object__class {
  font-size: 0.46rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: #d2a071;
  border: 0.5px solid rgba(210, 160, 113, 0.55);
  padding: 0.3em 0.5em;
  text-align: center;
}

.card-object__mid { display: flex; align-items: center; gap: var(--s4); }

/* Puce EMV — gravée, pas photographiée. */
.chip-emv {
  inline-size: clamp(2rem, 9.5%, 2.8rem);
  aspect-ratio: 1.32;
  border-radius: 3px;
  background: linear-gradient(135deg, #d9c088 0%, #a8853a 30%, #f0e0b4 52%, #97803f 74%, #cbb078 100%);
  position: relative;
  flex: none;
  box-shadow: inset 0 0 0 0.5px rgba(0, 0, 0, 0.3);
}
.chip-emv::before {
  content: "";
  position: absolute;
  inset-inline: 0;
  inset-block-start: 50%;
  block-size: 0.5px;
  background: rgba(6, 35, 27, 0.5);
  box-shadow: 0 -7px 0 rgba(6, 35, 27, 0.5), 0 7px 0 rgba(6, 35, 27, 0.5);
}
.chip-emv::after {
  content: "";
  position: absolute;
  inset: 14% 33%;
  border: 0.5px solid rgba(6, 35, 27, 0.5);
  border-radius: 1px;
}

.card-object__wave { inline-size: 0.95rem; color: rgba(239, 233, 218, 0.6); flex: none; }

.card-object__pan {
  font-family: var(--font-serial);
  font-size: clamp(0.85rem, 4.2cqw, 1.12rem);
  letter-spacing: 0.1em;
  font-variant-numeric: tabular-nums;
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.4);
}

.card-object__bottom { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--s3); }
.card-object__field { display: grid; gap: 0.24rem; }
.card-object__field dt {
  font-size: 0.42rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(239, 233, 218, 0.44);
}
.card-object__field dd {
  font-family: var(--font-serial);
  font-size: clamp(0.62rem, 3cqw, 0.76rem);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  font-variant-numeric: tabular-nums;
}
/* Numéro de série de la vignette — à l'encre rouge, comme il se doit. */
.card-object__serial {
  position: absolute;
  inset-block-start: 43%;
  inset-inline-end: 5.5%;
  font-family: var(--font-serial);
  font-size: 0.44rem;
  letter-spacing: 0.16em;
  color: #e0705f;
  writing-mode: vertical-rl;
  opacity: 0.85;
}

/* Marque réseau générique — à remplacer par celle du réseau réel
   une fois le partenaire émetteur contractualisé. */
.netmark { display: flex; align-items: center; opacity: 0.9; }
.netmark i {
  display: block;
  inline-size: 1.25rem; block-size: 1.25rem;
  border-radius: 50%;
  border: 0.5px solid rgba(239, 233, 218, 0.5);
  background: rgba(210, 160, 113, 0.55);
}
.netmark i + i { background: rgba(224, 112, 95, 0.5); margin-inline-start: -0.58rem; }

/* Les trois régions se distinguent par la VALEUR, jamais par une
   seconde couleur de marque : l'euro porte l'indigo d'accent, le
   dollar descend vers un bleu de nuit, le dollar de Hong Kong vers un
   ardoise vert. Trois teintes vives auraient donné trois marques. */
.card-object--usd .card-object__face { background: linear-gradient(140deg, #16324f 0%, #0d1117 60%, #0d1117 100%); }
.card-object--hkd .card-object__face { background: linear-gradient(140deg, #10403c 0%, #0a2724 58%, #071614 100%); }

/* Pile de vignettes. */
.card-fan { position: relative; display: grid; place-items: center; }
.card-fan .card-object { grid-area: 1 / 1; transition: transform var(--d-slow) var(--ease-out); }
.card-fan .card-object:nth-child(1) { transform: translate(-9%, -7%) rotate(-5.5deg) scale(0.93); z-index: 1; }
.card-fan .card-object:nth-child(2) { z-index: 3; }
.card-fan .card-object:nth-child(3) { transform: translate(9%, 8%) rotate(5.5deg) scale(0.93); z-index: 2; }
.card-fan:hover .card-object:nth-child(1) { transform: translate(-16%, -11%) rotate(-9deg) scale(0.93); }
.card-fan:hover .card-object:nth-child(3) { transform: translate(16%, 12%) rotate(9deg) scale(0.93); }

/* ── Rubriques ─────────────────────────────────────────────────
   Un « article » du registre : filet en tête qui s'encre au survol. */

.rubric {
  position: relative;
  padding-block: var(--s6) var(--s5);
  border-block-start: 1px solid var(--line);
}
.rubric::after {
  content: "";
  position: absolute;
  inset-block-start: -1px;
  inset-inline-start: 0;
  inline-size: 0;
  block-size: 1px;
  background: var(--accent);
  transition: inline-size var(--d-slow) var(--ease-out);
}
.rubric:hover::after { inline-size: 100%; }
.rubric__n {
  font-family: var(--font-serial);
  font-size: var(--t-3xs);
  color: var(--accent);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-variant-numeric: tabular-nums;
}
.rubric__t { margin-block-start: var(--s3); font-family: var(--font-title); font-size: var(--t-lg); font-weight: 600; }
.rubric__d { margin-block-start: var(--s2); color: var(--fg-muted); font-size: var(--t-base); }

/* ── Étapes numérotées ─────────────────────────────────────── */

.steps { counter-reset: step; }
.step {
  position: relative;
  display: grid;
  grid-template-columns: 5rem minmax(0, 1fr);
  gap: var(--s5);
  padding-block: var(--s7);
  border-block-start: var(--hair) solid var(--line);
}
.step::before {
  counter-increment: step;
  content: counter(step, decimal-leading-zero);
  font-family: var(--font-title);
  font-size: var(--t-2xl);
  line-height: 0.9;
  color: transparent;
  -webkit-text-stroke: 0.6px var(--line-accent);
  font-variant-numeric: lining-nums tabular-nums;
  transition: color var(--d-slow) var(--ease-out);
}
.step:hover::before { color: var(--accent-wash); }
.step__t { font-family: var(--font-title); font-size: var(--t-xl); font-weight: 600; }
.step__d { margin-block-start: var(--s3); color: var(--fg-muted); max-inline-size: var(--measure); }
@media (max-width: 44rem) {
  .step { grid-template-columns: minmax(0, 1fr); gap: var(--s3); }
}

/* ── Chronologie ───────────────────────────────────────────── */

.timeline { position: relative; padding-inline-start: var(--s6); }
.timeline::before {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  inset-block: 0.5rem;
  inline-size: var(--hair);
  background: var(--line);
}
.timeline__progress {
  position: absolute;
  inset-inline-start: 0;
  inset-block-start: 0.5rem;
  inline-size: 1px;
  block-size: var(--p, 0%);
  background: var(--accent);
  transition: block-size 120ms linear;
}
.timeline__item { position: relative; padding-block: var(--s5); }
.timeline__item::before {
  content: "";
  position: absolute;
  inset-inline-start: calc(-1 * var(--s6) - 3px);
  inset-block-start: calc(var(--s5) + 0.5rem);
  inline-size: 7px; block-size: 7px;
  background: var(--surface);
  border: 1px solid var(--line);
  transform: rotate(45deg);
  transition: background-color var(--d-base) var(--ease-out), border-color var(--d-base) var(--ease-out);
}
.timeline__item[data-active]::before { background: var(--accent); border-color: var(--accent); }

/* ── Coupures tarifaires ───────────────────────────────────────
   Chaque formule est une coupure : valeur faciale en Didone, liseré
   gravé, et pour la formule mise en avant, la plaque encrée.        */

.notes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
/* ── Usages ────────────────────────────────────────────────────
   Une carte virtuelle ne se vend pas sur ses caractéristiques mais sur
   ce qu'elle débloque : payer une régie publicitaire, isoler un
   abonnement, ne pas laisser un numéro réutilisable chez un marchand.
   D'où le numéro d'ordre en tête, comme une rubrique de catalogue.    */
.usage {
  position: relative;
  padding-block-start: var(--s5);
  border-block-start: var(--hair) solid var(--line);
}
.usage__n {
  font-family: var(--font-mono);
  font-size: var(--t-3xs);
  letter-spacing: var(--tr-caps);
  color: var(--accent);
  margin-block-end: var(--s3);
}
/* Les noms de services sont des faits, pas des partenariats : on les
   pose en petit, en monospace, comme une note de bas de registre. */
.usage__names {
  margin-block-start: var(--s4);
  font-family: var(--font-mono);
  font-size: var(--t-2xs);
  line-height: 1.6;
  color: var(--fg-faint);
}

/* ── Valeur faciale ─────────────────────────────────────────────
   Le tarif tient en un seul nombre. On le traite comme la coupure d'un
   billet : chiffre gravé au centre, guilloché derrière, et autour la
   liste de ce qui ne coûte rien. Il n'y a pas de grille de formules à
   comparer — c'est précisément le propos.                             */
.tariff {
  position: relative;
  display: grid;
  justify-items: center;
  text-align: center;
  gap: var(--s3);
  padding: clamp(var(--s7), 6vw, var(--s10)) var(--s5);
  overflow: hidden;
  isolation: isolate;
}
.tariff__rosette {
  position: absolute;
  inset-block-start: 50%;
  inset-inline-start: 50%;
  translate: -50% -50%;
  inline-size: min(30rem, 92%);
  aspect-ratio: 1;
  z-index: -1;
  color: var(--line-accent);
  opacity: 0.28;
}
.tariff__label {
  font-size: var(--t-3xs);
  font-weight: 600;
  letter-spacing: var(--tr-caps);
  text-transform: uppercase;
  color: var(--accent);
}
.tariff__figure {
  font-family: var(--font-title);
  /* Assez grand pour se lire de loin, assez borné pour qu'un « 1,5 % »
     et un « ١٫٥٪ » tiennent tous deux sur une ligne. */
  font-size: clamp(3.5rem, 11vw, 8rem);
  font-weight: 700;
  line-height: 0.9;
  font-variant-numeric: lining-nums tabular-nums;
}
.tariff__note {
  max-inline-size: 34rem;
  font-size: var(--t-sm);
  color: var(--fg-muted);
}
.tariff__free {
  list-style: none;
  padding: 0;
  margin-block-start: var(--s6);
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--s3) var(--s5);
  font-size: var(--t-xs);
  letter-spacing: var(--tr-caps);
  text-transform: uppercase;
  color: var(--fg-faint);
}
.tariff__free li {
  position: relative;
  padding-inline-start: var(--s5);
}
.tariff__free li::before {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  inset-block-start: 0.4em;
  inline-size: 5px;
  block-size: 5px;
  border: var(--hair) solid var(--accent);
  transform: rotate(45deg);
}

.note-card {
  position: relative;
  padding: var(--s7) var(--s5) var(--s6);
  border: var(--hair) solid var(--line);
  margin-inline-start: calc(-1 * var(--hair));
  background: var(--surface-raised);
  overflow: hidden;
  isolation: isolate;
  transition: background-color var(--d-base) var(--ease-out);
}
.note-card:first-child { margin-inline-start: 0; }
.note-card__rosette {
  position: absolute;
  inset-block-start: -20%;
  inset-inline-end: -25%;
  inline-size: 18rem;
  aspect-ratio: 1;
  z-index: -1;
  color: var(--line-accent);
  opacity: 0.3;
  pointer-events: none;
}
.note-card[data-featured] {
  background: var(--ink-deep);
  color: #efe9da;
  border-color: var(--ink-deep);
  z-index: 2;
  box-shadow: var(--sh-lg);
}
.note-card[data-featured] .note-card__d,
.note-card[data-featured] .note-card__list li { color: #a9bdb2; }
.note-card[data-featured] .note-card__rosette { color: rgba(210, 160, 113, 0.5); opacity: 0.5; }
.note-card[data-featured] .btn { --btn-line: var(--accent-light); --btn-fg: var(--accent-light); --btn-fill: var(--accent-light); --btn-hover-fg: var(--ink-deep); }

.note-card__flag {
  position: absolute;
  inset-block-start: 0;
  inset-inline-end: var(--s5);
  background: var(--serial);
  color: #efe9da;
  font-size: var(--t-3xs);
  font-weight: 600;
  letter-spacing: var(--tr-caps);
  text-transform: uppercase;
  padding: 0.35em 0.7em;
}
.note-card__n { font-size: var(--t-3xs); font-weight: 600; letter-spacing: var(--tr-caps); text-transform: uppercase; color: var(--accent); }
.note-card__p {
  margin-block-start: var(--s4);
  font-family: var(--font-title);
  font-size: var(--t-3xl);
  font-weight: 700;
  line-height: 0.9;
  font-variant-numeric: lining-nums tabular-nums;
}
.note-card__p small { font-family: var(--font-text); font-size: var(--t-2xs); font-weight: 600; letter-spacing: var(--tr-caps); text-transform: uppercase; color: var(--fg-faint); }
.note-card__d { margin-block-start: var(--s3); font-size: var(--t-sm); color: var(--fg-muted); min-block-size: 3rem; }
.note-card__list { list-style: none; padding: 0; margin-block-start: var(--s5); display: grid; gap: var(--s3); font-size: var(--t-sm); }
.note-card__list li { position: relative; padding-inline-start: var(--s5); color: var(--fg-muted); }
.note-card__list li::before {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  inset-block-start: 0.55em;
  inline-size: 5px; block-size: 5px;
  border: var(--hair) solid var(--accent);
  transform: rotate(45deg);
}
@media (max-width: 62rem) {
  .notes { grid-template-columns: minmax(0, 1fr); }
  .note-card { margin-inline-start: 0; margin-block-start: calc(-1 * var(--hair)); }
  .note-card:first-child { margin-block-start: 0; }
}

/* ── Réseaux ─────────────────────────────────────────────────── */

.chains { display: flex; flex-wrap: wrap; gap: var(--s2); }
.chain {
  display: inline-flex;
  align-items: center;
  gap: var(--s2);
  padding: 0.4em 0.7em;
  border: var(--hair) solid var(--line);
  background: var(--surface-raised);
  font-family: var(--font-serial);
  font-size: var(--t-xs);
  color: var(--fg-muted);
  transition: border-color var(--d-fast) var(--ease-out), transform var(--d-fast) var(--ease-out);
}
.chain:hover { border-color: var(--line-accent); transform: translateY(-1px); }
.chain b {
  inline-size: 1.3rem; block-size: 1.3rem;
  display: grid;
  place-items: center;
  border-radius: 50%;
  font-size: 0.55rem;
  font-weight: 700;
  color: #efe9da;
  letter-spacing: 0;
  flex: none;
}

/* ── Pied de page ─────────────────────────────────────────────── */

.site-footer { border-block-start: 1px solid var(--line); margin-block-start: var(--s9); }

.site-footer__mega {
  font-family: var(--font-title);
  font-size: clamp(3rem, 15vw, 13rem);
  font-weight: 700;
  line-height: 0.84;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: transparent;
  -webkit-text-stroke: 1px var(--line-soft);
  user-select: none;
  padding-block: var(--s8) var(--s5);
  overflow: hidden;
  text-align: center;
}

.site-footer__cols {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) repeat(3, minmax(0, 1fr));
  gap: var(--s6);
  padding-block-end: var(--s8);
}
.site-footer h3 {
  font-size: var(--t-3xs);
  font-weight: 600;
  letter-spacing: var(--tr-caps);
  text-transform: uppercase;
  color: var(--fg-faint);
  margin-block-end: var(--s4);
}
.site-footer ul { list-style: none; padding: 0; display: grid; gap: var(--s3); }
.site-footer a {
  font-size: var(--t-sm);
  color: var(--fg-muted);
  text-decoration: none;
  transition: color var(--d-fast) var(--ease-out), padding-inline-start var(--d-fast) var(--ease-out);
}
.site-footer a:hover { color: var(--accent); padding-inline-start: 3px; }

.site-footer__legal {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--s4);
  padding-block: var(--s5);
  border-block-start: var(--hair) solid var(--line);
  font-family: var(--font-serial);
  font-size: var(--t-3xs);
  color: var(--fg-faint);
}
@media (max-width: 62rem) { .site-footer__cols { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 40rem) { .site-footer__cols { grid-template-columns: minmax(0, 1fr); } }

.disclosure {
  padding-block: var(--s5);
  border-block-start: var(--hair) solid var(--line);
  font-size: var(--t-xs);
  line-height: 1.68;
  color: var(--fg-faint);
  max-inline-size: 62rem;
}
.disclosure strong { color: var(--fg-muted); }

/* ── Halo au curseur, sur plaque sombre ───────────────────────── */
.lamp { position: relative; isolation: isolate; }
.lamp::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: 0;
  background: radial-gradient(24rem circle at var(--mx, 50%) var(--my, 50%), rgba(210, 160, 113, 0.13), transparent 70%);
  transition: opacity var(--d-slow) var(--ease-out);
}
.lamp:hover::before { opacity: 1; }

/* ── Page 404 ─────────────────────────────────────────────────── */
.oops__code {
  font-family: var(--font-title);
  font-size: clamp(6rem, 26vw, 20rem);
  line-height: 0.8;
  color: transparent;
  -webkit-text-stroke: 1.5px var(--line-accent);
  font-variant-numeric: lining-nums;
}

/* État actif de la navigation — piloté par [data-nav] sur <body> et
   des sélecteurs d'attribut. Aucune logique de gabarit, aucun script :
   le build pose l'attribut, le CSS fait le reste. */
body[data-nav="cards"]    .nav__link[data-navlink="cards"],
body[data-nav="how"]      .nav__link[data-navlink="how"],
body[data-nav="pricing"]  .nav__link[data-navlink="pricing"],
body[data-nav="security"] .nav__link[data-navlink="security"],
body[data-nav="faq"]      .nav__link[data-navlink="faq"] {
  color: var(--fg);
}
body[data-nav="cards"]    .nav__link[data-navlink="cards"]::after,
body[data-nav="how"]      .nav__link[data-navlink="how"]::after,
body[data-nav="pricing"]  .nav__link[data-navlink="pricing"]::after,
body[data-nav="security"] .nav__link[data-navlink="security"]::after,
body[data-nav="faq"]      .nav__link[data-navlink="faq"]::after {
  transform: scaleX(1);
}

/* Lien courant de la barre latérale de l'espace client. */
body[data-nav="dash"]     .side__link[data-appnav="dash"],
body[data-nav="cards"]    .side__link[data-appnav="cards"],
body[data-nav="topup"]    .side__link[data-appnav="topup"],
body[data-nav="entries"]  .side__link[data-appnav="entries"],
body[data-nav="settings"] .side__link[data-appnav="settings"],
body[data-nav="verify"]   .side__link[data-appnav="verify"] {
  background: var(--ink);
  color: var(--surface);
  border-inline-start-color: var(--accent);
}