/* ===========================================================
   Argos — page statique (HTML + CSS, aucun build).
   Mise en page : présentation à gauche | barre verticale | don à droite.
   =========================================================== */

/* Police monospace hébergée localement (adresse Monero + pseudo).
   Aucune dépendance externe : fonctionne hors-ligne et en file://. */
@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("assets/fonts/ibm-plex-mono-500.woff2") format("woff2");
}
@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("assets/fonts/ibm-plex-mono-600.woff2") format("woff2");
}

:root {
  --bg: #000;
  --surface: #000;
  --text: #e8eaed;
  --muted: #9aa0a8;
  --dim: #6b7280;
  --border: #2a2e37;
  --xmr: #ffffff;
  --ok: #4ade80;
  --radius: 16px;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  /* Typographie fluide : remplace l'ancien JS d'auto-ajustement.
     Tout le reste est en rem/em -> la page grandit d'un bloc avec l'écran
     (15px sur portable, ~19px en 1080p, 24px max en 4K). */
  font-size: clamp(15px, 0.55vw + 8px, 24px);
  -webkit-text-size-adjust: 100%;
}

body {
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  background: var(--bg);
  color: var(--text);
  font-family: "Segoe UI", system-ui, -apple-system, sans-serif;
  line-height: 1.55;
}

#stage {
  flex: 1;
  display: flex;
  align-items: center;
  /* "safe" : quand le guide est déplié et que le contenu dépasse la fenêtre,
     l'alignement bascule sur le haut au lieu de rendre le début inatteignable
     au défilement. Ignoré par les navigateurs qui ne le connaissent pas. */
  align-items: safe center;
  justify-content: center;
  gap: clamp(1.5rem, 4vw, 4rem);
  padding: clamp(2rem, 5vh, 4rem) clamp(1.25rem, 5vw, 4rem);
}

/* ---------- Colonne de gauche ---------- */
main {
  flex: 0 1 46ch;
  min-width: 0;
}

.avatar {
  width: 6.5rem;
  height: 6.5rem;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid var(--border);
  display: block;
  margin-bottom: 0.85rem;
}

h1 {
  font-size: clamp(1.6rem, 1.2rem + 1vw, 2.1rem);
  line-height: 1.2;
  margin-bottom: 1rem;
}

h1 .handle {
  font-family: "IBM Plex Mono", ui-monospace, Consolas, monospace;
  font-size: 0.46em;
  font-weight: 500;
  color: var(--dim);
  letter-spacing: 0.01em;
  margin-left: 0.5em;
  vertical-align: middle;
  white-space: nowrap;
}

.intro p {
  color: var(--muted);
  margin-bottom: 0.9rem;
}

.intro .tagline {
  color: var(--text);
  font-weight: 600;
}

/* ---------- Liens (icônes seules) ---------- */
.links {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  margin-top: 1.5rem;
}

.link {
  display: inline-flex;
  border-radius: 8px;
  transition:
    transform 0.15s ease,
    opacity 0.15s ease;
}

.link:hover {
  transform: translateY(-3px);
  opacity: 0.85;
}

.link svg {
  width: 2.4rem;
  height: 2.4rem;
  display: block;
}

/* Avertissement sous les icônes : volontairement effacé (petit et gris) pour
   informer sans attirer l'oeil avant la présentation elle-même. */
.disclaimer {
  margin-top: 1.05rem;
  font-size: 0.76rem;
  line-height: 1.5;
  color: var(--dim);
}

/* ---------- Barre verticale de séparation ---------- */
.divider {
  flex: none;
  align-self: stretch;
  width: 1px;
  background: var(--border);
  margin-block: 2vh;
}

/* ---------- Colonne de droite : don Monero ----------
   .pane-don n'existe que pour le mobile (volet plein écran). display:contents
   la retire complètement de la mise en page sur grand écran : .side et .legal
   redeviennent enfants directs de #stage, exactement comme sans enveloppe. */
.pane-don {
  display: contents;
}

.side {
  flex: 0 1 21rem;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 1.5rem 1.35rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  /* État de repos : contour gris, halo à zéro. Le halo est déclaré (au lieu
     de "none") avec le même nombre d'ombres que l'état allumé, sinon
     l'interpolation saute au lieu de fondre. */
  box-shadow:
    0 0 0 0 rgba(255, 102, 0, 0),
    0 0 0 rgba(255, 102, 0, 0);
  /* Retour au gris : lent et doux. */
  transition:
    border-color 0.6s ease,
    box-shadow 0.6s ease;
}

.side h2 {
  font-size: 1.05rem;
  font-weight: 600;
  letter-spacing: 0.01em;
}

.side-sub {
  font-size: 0.82rem;
  color: var(--dim);
  margin-bottom: 1.1rem;
}

/* Fond blanc + marge intérieure : indispensable pour que le QR reste
   scannable sur un thème sombre. */
.qr {
  display: block;
  background: #fff;
  border-radius: 12px;
  padding: 8px;
  line-height: 0;
  transition: transform 0.15s ease;
}

.qr:hover {
  transform: scale(1.02);
}

.qr img {
  display: block;
  width: 100%;
  max-width: 12.5rem;
  height: auto;
  aspect-ratio: 1;
}

.qr-hint {
  font-size: 0.78rem;
  color: var(--dim);
  margin: 0.8rem 0 1rem;
  max-width: 26ch;
}

/* user-select:all -> un simple clic sélectionne l'adresse entière. */
.address {
  display: block;
  width: 100%;
  font-family: "IBM Plex Mono", ui-monospace, Consolas, monospace;
  font-size: 0.68rem;
  line-height: 1.6;
  color: var(--muted);
  word-break: break-all;
  text-align: left;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 0.6rem 0.7rem;
  margin-bottom: 0.75rem;
  cursor: text;
  -webkit-user-select: all;
  user-select: all;
}

.copy-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  width: 100%;
  font: inherit;
  font-size: 0.9rem;
  font-weight: 600;
  color: #ff9a4d;
  background: rgba(255, 102, 0, 0.12);
  border: 1px solid rgba(255, 102, 0, 0.38);
  border-radius: 10px;
  padding: 0.65rem 1rem;
  cursor: pointer;
  transition:
    background 0.15s ease,
    border-color 0.15s ease,
    color 0.15s ease;
}

.copy-btn:hover {
  background: rgba(255, 102, 0, 0.2);
  border-color: rgba(255, 102, 0, 0.6);
}

.copy-btn.copied {
  color: var(--ok);
  background: rgba(74, 222, 128, 0.12);
  border-color: rgba(74, 222, 128, 0.45);
}

.copy-btn svg {
  flex: none;
  width: 1.05em;
  height: 1.05em;
}

/* L'icône bascule copie -> coche selon l'état du bouton. */
.copy-btn .icon-check,
.copy-btn.copied .icon-copy {
  display: none;
}

.copy-btn.copied .icon-check {
  display: block;
}

/* Lien vers le guide (don.html). Une page séparée plutôt qu'un dépliant :
   le panneau garde exactement la même hauteur en toutes circonstances, donc
   la mise en page ne se décale jamais. */
.howto-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  width: 100%;
  margin-top: 0.95rem;
  padding: 0.6rem 0.75rem;
  border: 1px solid var(--border);
  border-radius: 10px;
  text-align: left;
  text-decoration: none;
  color: var(--muted);
  font-size: 0.8rem;
  font-weight: 600;
  line-height: 1.35;
  transition:
    color 0.15s ease,
    border-color 0.15s ease,
    background 0.15s ease;
}

.howto-link:hover {
  color: var(--text);
  border-color: #3a404b;
  background: rgba(255, 255, 255, 0.035);
}

.howto-link-sub {
  display: block;
  margin-top: 0.15rem;
  font-size: 0.74rem;
  font-weight: 400;
  color: var(--dim);
}

.howto-link svg {
  flex: none;
  width: 1.1em;
  height: 1.1em;
  transition: transform 0.15s ease;
}

.howto-link:hover svg {
  transform: translateX(2px);
}

/* Mise en évidence au clic sur l'icône Monero : montée rapide vers l'orange,
   maintien ~1,7 s (le retrait de la classe est piloté en JS), puis retour au
   gris sur la transition lente définie plus haut. Aucun mouvement, seulement
   couleur et halo -> confortable en « prefers-reduced-motion ».
   Une transition (et non des keyframes) rend le rejeu propre : recliquer
   pendant l'animation prolonge simplement l'état, sans redémarrage brutal. */
.side.flash {
  border-color: rgba(255, 102, 0, 0.85);
  box-shadow:
    0 0 0 4px rgba(255, 102, 0, 0.1),
    0 0 26px rgba(255, 102, 0, 0.22);
  /* Montée douce : un peu plus vive que la descente, mais bien fondue
     (ease-out -> arrivée en douceur sur l'orange). */
  transition-duration: 0.3s;
  transition-timing-function: ease-out;
}

/* Repli sans JavaScript (l'ancre #don sert alors de vrai saut d'ancre) :
   même effet en keyframes, qui se termine de lui-même sur le gris. */
@keyframes flash-don {
  0% {
    border-color: var(--border);
    box-shadow:
      0 0 0 0 rgba(255, 102, 0, 0),
      0 0 0 rgba(255, 102, 0, 0);
  }
  12%,
  72% {
    border-color: rgba(255, 102, 0, 0.85);
    box-shadow:
      0 0 0 4px rgba(255, 102, 0, 0.1),
      0 0 26px rgba(255, 102, 0, 0.22);
  }
  100% {
    border-color: var(--border);
    box-shadow:
      0 0 0 0 rgba(255, 102, 0, 0),
      0 0 0 rgba(255, 102, 0, 0);
  }
}

.side:target {
  animation: flash-don 2.5s ease-out;
}

/* ---------- Lien discret « Mentions légales » ----------
   Sur grand écran : ancré dans le coin bas-droite, hors du flux (fixed) pour ne
   pas perturber l'ajustement « tout tient sans scroll ». Sans largeur, il se
   réduit à son texte -> pas de zone invisible par-dessus le contenu. Repasse
   centré dans le flux en mobile (voir le media query plus bas). */
.legal {
  position: fixed;
  right: clamp(1rem, 2.5vw, 2.25rem);
  bottom: clamp(0.85rem, 2.5vh, 1.75rem);
  z-index: 5;
}

.legal a {
  color: var(--dim);
  text-decoration: none;
  font-size: 0.68rem;
  letter-spacing: 0.04em;
  transition: color 0.15s ease;
}

.legal a:hover {
  color: var(--muted);
}

/* ---------- Accessibilité ---------- */
:where(a, button):focus-visible {
  outline: 2px solid var(--xmr);
  outline-offset: 3px;
}

/* ---------- Écrans étroits : deux volets plein écran ----------
   Sur mobile la page devient deux « diapositives » qui s'enchaînent : la bio,
   puis le don. Le défilement s'aimante sur l'une ou l'autre, donc on ne voit
   jamais un demi-QR code en bas de l'écran. */
@media (max-width: 880px) {
  body {
    flex-direction: column;
  }

  #stage {
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    gap: 2rem;
    max-width: 34rem;
    margin: 0 auto;
    padding: 2.5rem 1.25rem 3rem;
  }

  main {
    flex: none;
  }

  .divider {
    align-self: auto;
    width: 100%;
    height: 1px;
    margin-block: 0;
  }

  .side {
    flex: none;
    align-self: center;
    width: 100%;
    max-width: 21rem;
  }

  .legal {
    position: static;
    text-align: center;
    padding: 0.5rem 1rem calc(1.75rem + env(safe-area-inset-bottom, 0px));
  }
}

/* ---------- Mobile « deux diapositives » ----------
   Ne s'active que s'il y a la hauteur nécessaire pour que chaque volet tienne
   vraiment en un écran. En dessous (téléphone en paysage), on garde l'empilement
   simple ci-dessus, qui défile normalement : mieux vaut un défilement honnête
   qu'un texte tassé à la limite du lisible.
   480px est le seuil mesuré : en dessous, même à la taille de police plancher,
   le volet don ne tient plus dans un écran. */
@media (max-width: 880px) and (min-height: 480px) {
  /* L'aimantation ne vise que l'accueil (html.home), pas les autres pages. */
  html.home {
    scroll-snap-type: y mandatory;
  }

  /* Plus de marge ni d'écart ici : chaque volet gère son propre cadrage, sinon
     la somme dépasserait les deux hauteurs d'écran. */
  #stage {
    gap: 0;
    max-width: none;
    margin: 0;
    padding: 0;
  }

  /* Un volet = exactement une hauteur d'écran. 100dvh suit la fenêtre réellement
     visible : avec svh le volet serait trop court dès que la barre d'adresse se
     masque, et on reverrait un bout du volet suivant — précisément ce qu'on veut
     éviter. scroll-snap-stop empêche de sauter un volet d'un geste trop ample. */
  main,
  .pane-don {
    min-height: 100vh;
    min-height: 100dvh;
    scroll-snap-align: start;
    scroll-snap-stop: always;
    padding: 2rem 1.25rem;
  }

  main {
    display: flex;
    flex-direction: column;
    justify-content: center;
    width: 100%;
    max-width: 34rem;
    margin-inline: auto;
  }

  .pane-don {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative; /* ancre le lien légal en bas du volet */
  }

  /* Une barre de séparation n'a plus de sens entre deux écrans distincts. */
  .divider {
    display: none;
  }

  .legal {
    position: absolute;
    left: 0;
    right: 0;
    bottom: calc(0.9rem + env(safe-area-inset-bottom, 0px));
    padding: 0;
    text-align: center;
  }
}

@media (max-width: 420px) {
  .links {
    gap: 1.25rem;
  }
  .link svg {
    width: 2.15rem;
    height: 2.15rem;
  }
}

/* ===========================================================
   don.html — guide « faire un don en Monero »
   Colonne unique et lisible ; réutilise .qr, .address et .copy-btn
   déjà définis pour le panneau de la page d'accueil.
   =========================================================== */
/* Page mentions légales : `margin:auto` dans le body flex la centre sur les deux
   axes, quel que soit le sens du flex. Combinée à l'ajustement JS, elle tient
   toujours en un seul écran, sans défilement. */
/* Rythme resserré : .guide était calibré pour un long guide qui défile. Ici il
   n'y a que trois courts paragraphes à faire tenir dans un écran, donc on réduit
   les respirations verticales plutôt que de rapetisser le texte. */
.legal-page .guide {
  margin: auto;
  padding-block: clamp(1rem, 3vh, 2rem);
}

.legal-page .guide-head {
  margin-top: 1.25rem;
}

.legal-page .guide h1 {
  font-size: clamp(1.5rem, 1.1rem + 1.2vw, 2rem);
  margin-bottom: 0.5rem;
}

.legal-page .guide section {
  margin-top: 1.35rem;
}

.legal-page .guide h2 {
  margin-bottom: 0.45rem;
}

.legal-page .guide p {
  margin-bottom: 0.5rem;
}

.guide {
  width: 100%;
  max-width: 42rem;
  margin: 0 auto;
  padding: clamp(1.75rem, 4vh, 3rem) clamp(1.25rem, 5vw, 2rem)
    clamp(3rem, 8vh, 5rem);
}

.back {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.82rem;
  color: var(--dim);
  text-decoration: none;
  transition: color 0.15s ease;
}

.back:hover {
  color: var(--text);
}

.back svg {
  width: 1em;
  height: 1em;
  transition: transform 0.15s ease;
}

.back:hover svg {
  transform: translateX(-2px);
}

.back-bottom {
  margin-top: 3rem;
  padding-top: 1.75rem;
  border-top: 1px solid var(--border);
  width: 100%;
}

.guide-head {
  margin-top: 1.75rem;
}

.guide h1 {
  font-size: clamp(1.75rem, 1.2rem + 1.6vw, 2.4rem);
  line-height: 1.15;
  margin-bottom: 0.85rem;
}

.lede {
  font-size: 1.02rem;
  color: var(--muted);
}

/* Encadré de synthèse : ce que quelqu'un de pressé doit retenir. */
.tldr {
  margin-top: 2rem;
  padding: 1rem 1.15rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}

.tldr-title {
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #ff9a4d;
  margin-bottom: 0.45rem;
}

.tldr p:last-child {
  color: var(--muted);
  font-size: 0.94rem;
}

.guide section {
  margin-top: 2.75rem;
}

.guide h2 {
  font-size: 1.3rem;
  line-height: 1.25;
  margin-bottom: 0.9rem;
}

.guide h3 {
  font-size: 1rem;
  margin: 1.75rem 0 0.6rem;
}

.guide p {
  color: var(--muted);
  margin-bottom: 0.9rem;
}

.guide b {
  color: var(--text);
  font-weight: 600;
}

.guide a:not(.back):not(.copy-btn) {
  color: #ff9a4d;
  text-decoration: none;
  border-bottom: 1px solid rgba(255, 154, 77, 0.4);
}

.guide a:not(.back):not(.copy-btn):hover {
  border-bottom-color: currentColor;
}

/* ---- Étapes ---- */
.step {
  border-top: 1px solid var(--border);
  padding-top: 1.85rem;
}

.step-num {
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #ff9a4d;
  margin-bottom: 0.3rem;
}

.step-time {
  font-size: 0.82rem;
  color: var(--dim);
  margin-top: -0.5rem;
  margin-bottom: 1.25rem;
}

/* ---- Listes ---- */
.guide ul,
.guide ol {
  margin-bottom: 1.1rem;
  padding-left: 0;
  list-style: none;
}

.facts li,
.steps-inline li {
  position: relative;
  color: var(--muted);
  margin-bottom: 0.7rem;
  line-height: 1.55;
}

.facts li {
  padding-left: 1.1rem;
}

.facts li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.62em;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--dim);
}

/* Étapes numérotées : la pastille orange sert de repère visuel. */
.steps-inline {
  counter-reset: substep;
}

.steps-inline li {
  counter-increment: substep;
  padding-left: 2.15rem;
  min-height: 1.55rem;
}

.steps-inline li::before {
  content: counter(substep);
  position: absolute;
  left: 0;
  top: 0.05em;
  display: grid;
  place-items: center;
  width: 1.55rem;
  height: 1.55rem;
  border-radius: 50%;
  font-size: 0.78rem;
  font-weight: 600;
  color: #ff9a4d;
  background: rgba(255, 102, 0, 0.12);
  border: 1px solid rgba(255, 102, 0, 0.3);
}

/* ---- Choix de portefeuilles ---- */
.wallets {
  display: grid;
  gap: 0.75rem;
}

.wallets li {
  padding: 0.85rem 1rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
}

.wallets a {
  font-weight: 600;
  font-size: 1rem;
}

.wallet-meta {
  display: block;
  margin-top: 0.15rem;
  font-family: "IBM Plex Mono", ui-monospace, Consolas, monospace;
  font-size: 0.7rem;
  color: var(--dim);
}

.wallet-desc {
  display: block;
  margin-top: 0.5rem;
  font-size: 0.9rem;
  line-height: 1.55;
  color: var(--muted);
}

/* ---- Définitions et FAQ ---- */
.terms dt,
.faq dt {
  font-weight: 600;
  color: var(--text);
  margin-top: 1.25rem;
}

.terms dt:first-child,
.faq dt:first-child {
  margin-top: 0;
}

.terms dd,
.faq dd {
  margin-top: 0.35rem;
  color: var(--muted);
  line-height: 1.6;
}

/* ---- Encadrés ---- */
.callout {
  margin: 1.35rem 0;
  padding: 0.95rem 1.1rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-left: 3px solid var(--border);
  border-radius: 0 12px 12px 0;
}

.callout-warn {
  border-left-color: var(--xmr);
  background: rgba(255, 102, 0, 0.06);
}

.callout-title {
  font-weight: 600;
  color: var(--text);
  margin-bottom: 0.4rem;
}

.callout p:last-child {
  margin-bottom: 0;
}

.note {
  font-size: 0.9rem;
  color: var(--dim);
}

/* ---- Bloc d'adresse en bas de guide ---- */
.donation {
  display: flex;
  align-items: flex-start;
  gap: 1.5rem;
  padding: 1.35rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}

/* Largeur explicite : dans un conteneur flex, un img en width:100% n'a pas de
   référence pour se dimensionner et le QR s'effondrerait. */
.donation .qr {
  flex: none;
}

.donation .qr img {
  width: 12.5rem;
}

.donation-side {
  flex: 1;
  min-width: 0;
}

.donation .address {
  font-size: 0.72rem;
}

.donation-hint {
  margin: 0.7rem 0 0;
  font-size: 0.8rem;
  color: var(--dim);
}

.closing {
  margin-top: 1.5rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--border);
  font-size: 0.94rem;
}

@media (max-width: 560px) {
  .donation {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }
  .donation .address {
    text-align: left;
  }
}