/* Bouton « Soutenir » à pièce qui se retourne (style Buy Me a Coffee).
   Balisage : voir assets/support-coin.js. */

.coin-btn{
  --coin-a:var(--accent2,#FFB36B); --coin-b:var(--accent,#FF6A00);
  display:inline-flex; align-items:center; gap:14px;
  padding:10px 24px 10px 12px;
  border-radius:999px;
  background:var(--surface2,#1A1A1E);
  border:1px solid var(--line2,rgba(255,255,255,.12));
  color:var(--text,#fff);
  font:600 15px/1 'Inter',system-ui,sans-serif;
  cursor:pointer;
  transition:border-color .15s, transform .15s, box-shadow .15s;
  -webkit-tap-highlight-color:transparent;
}
.coin-btn:hover{
  border-color:var(--accent,#FF6A00);
  transform:translateY(-1px);
  box-shadow:0 8px 28px color-mix(in srgb, var(--accent,#FF6A00) 20%, transparent);
}
.coin-btn:focus-visible{outline:2px solid var(--accent,#FF6A00); outline-offset:3px}
.coin-btn[aria-busy="true"]{cursor:progress}

.coin-wrap{display:block; width:42px; height:42px; perspective:360px; flex:none}
.coin{
  position:relative; display:block; width:100%; height:100%;
  transform-style:preserve-3d;
  transition:transform .25s ease;
}
/* Un petit coup d'œil au survol : la pièce se penche avant de se retourner. */
.coin-btn:hover .coin:not([style]){transform:rotateY(24deg) rotateX(8deg)}

.coin-face{
  position:absolute; inset:0; border-radius:50%;
  display:grid; place-items:center;
  font-size:19px; line-height:1; color:var(--on-accent,#150A03);
  background:radial-gradient(circle at 32% 28%, var(--coin-a), var(--coin-b) 70%);
  box-shadow:inset 0 0 0 3px rgba(255,255,255,.28), inset 0 0 0 5px rgba(150,60,0,.28), 0 3px 10px color-mix(in srgb, var(--accent,#FF6A00) 38%, transparent);
  -webkit-backface-visibility:hidden; backface-visibility:hidden;
}
.coin-back{transform:rotateY(180deg)}

/* « hidden » doit l'emporter sur le display des classes ci-dessus. */
[data-support][hidden]{display:none !important}

.support-cta{display:flex; justify-content:center; margin-top:28px}

@media (prefers-reduced-motion:reduce){
  .coin,.coin-btn{transition:none}
  .coin-btn:hover .coin:not([style]){transform:none}
}