/* Base minimale des boutons DE VARIANT. position:relative : sans lui les ::before des effets se
   positionneraient sur la PAGE. display:inline-block : filet pour les 25 boutons (sur 43) qui ne declarent
   aucun display inline — un element inline donne un bloc conteneur erratique aux ::before. Les 18 qui en
   declarent un gardent le leur (le style inline gagne), et aucune couleur n'est revendiquee ici : le dessin
   du variant est intact, l'effet s'y ajoute. */
.hfx-fx{ position:relative; display:inline-block; }
.hfx-btn{
  position:relative; padding:9px 18px; border-radius:var(--fx-radius);
  font-size:14px; font-weight:500; font-family:inherit; cursor:pointer;
  display:inline-flex; align-items:center; gap:6px;
  border:1px solid var(--fx-border); background:var(--fx-surface); color:var(--fx-ink);
}
.hfx-card{
  position:relative; border-radius:12px;
  border:0.5px solid var(--fx-border); background:var(--fx-surface); color:var(--fx-body);
  display:flex; align-items:center; justify-content:center;
}

/* ---- BOUTONS ---- */
.hb-fill{ overflow:hidden; background:transparent; transition:color .3s; }
.hb-fill::before{ content:""; position:absolute; inset:0; background:var(--fx-ink); transform:scaleX(0); transform-origin:left; transition:transform .35s var(--ease-out); }
.hb-fill .hb-label{ position:relative; z-index:1; transition:color .3s; }
.hb-fill:hover .hb-label{ color:var(--fx-on-ink); }
.hb-fill:hover::before{ transform:scaleX(1); }

.hb-border{ background:transparent; border:none; }
.hb-border::before,.hb-border::after{ content:""; position:absolute; inset:0; border-radius:var(--fx-radius); border:1px solid var(--fx-accent-text); }
.hb-border::before{ border-width:1px 0; transform:scaleX(0); transform-origin:left; transition:transform .22s ease; }
.hb-border::after{ border-width:0 1px; transform:scaleY(0); transform-origin:top; transition:transform .22s ease .2s; }
.hb-border:hover::before{ transform:scaleX(1); }
.hb-border:hover::after{ transform:scaleY(1); }

.hb-swap{ padding:0; height:38px; overflow:hidden; align-items:stretch; }
.hb-swap .swap-inner{ display:flex; flex-direction:column; height:200%; transition:transform .32s var(--ease-out); }
.hb-swap .swap-inner span{ display:flex; align-items:center; height:50%; padding:0 18px; white-space:nowrap; }
.hb-swap .swap-inner span:last-child{ color:var(--fx-accent-text); }
.hb-swap:hover .swap-inner{ transform:translateY(-50%); }

.hb-shine{ overflow:hidden; background:var(--fx-ink); color:var(--fx-on-ink); border:none; }
.hb-shine::before{ content:""; position:absolute; top:0; left:-60%; width:45%; height:100%; background:linear-gradient(120deg,transparent,rgba(255,255,255,.55),transparent); transform:skewX(-20deg); transition:left .6s var(--ease-out); }
.hb-shine:hover::before{ left:130%; }

.hb-arrow .hfx-icon{ transform:translateX(-4px); opacity:0; width:0; transition:all .25s var(--ease-out); }
.hb-arrow:hover .hfx-icon{ transform:translateX(0); opacity:1; width:18px; }

.hb-grow{ transition:transform .25s var(--ease-out), letter-spacing .25s; }
.hb-grow:hover{ transform:scale(1.06); letter-spacing:.04em; }

.hb-uline{ background:transparent; border:none; }
.hb-uline::after{ content:""; position:absolute; left:50%; right:50%; bottom:3px; height:2px; background:var(--fx-accent-text); transition:left .3s,right .3s; }
.hb-uline:hover::after{ left:14px; right:14px; }

.hb-diag{ overflow:hidden; background:transparent; transition:color .3s; }
.hb-diag::before{ content:""; position:absolute; top:0; left:-15%; width:0; height:100%; background:var(--fx-accent); transform:skewX(-18deg); transition:width .4s var(--ease-out); }
.hb-diag .hb-label{ position:relative; z-index:1; transition:color .3s; }
.hb-diag:hover .hb-label{ color:var(--fx-on-accent); }
.hb-diag:hover::before{ width:135%; }

.hb-corners{ background:transparent; border:none; }
.hb-corners::before,.hb-corners::after{ content:""; position:absolute; width:9px; height:9px; border:2px solid var(--fx-accent-text); opacity:0; transition:all .25s; }
.hb-corners::before{ top:2px; left:2px; border-width:2px 0 0 2px; transform:translate(4px,4px); }
.hb-corners::after{ bottom:2px; right:2px; border-width:0 2px 2px 0; transform:translate(-4px,-4px); }
.hb-corners:hover::before,.hb-corners:hover::after{ opacity:1; transform:translate(0,0); }

.hb-press{ background:var(--fx-accent); color:var(--fx-on-accent); border:none; box-shadow:0 4px 0 var(--fx-ink); transition:transform .12s, box-shadow .12s; }
.hb-press:hover{ transform:translateY(2px); box-shadow:0 2px 0 var(--fx-ink); }
.hb-press:active{ transform:translateY(4px); box-shadow:0 0 0 var(--fx-ink); }

.hb-spin .hfx-icon{ transition:transform .4s var(--ease-out); }
.hb-spin:hover .hfx-icon{ transform:rotate(180deg); }

.hb-textwipe{ background:transparent; }
.hb-textwipe .hb-label{ background:linear-gradient(90deg,var(--fx-accent-text) 50%,var(--fx-body) 50%); background-size:200% 100%; background-position:100% 0; -webkit-background-clip:text; background-clip:text; color:transparent; transition:background-position .35s ease; }
.hb-textwipe:hover .hb-label{ background-position:0 0; }

.hb-underbar{ background:transparent; border:none; border-radius:0; border-bottom:2px solid var(--fx-border); }
.hb-underbar::after{ content:""; position:absolute; left:0; bottom:-2px; height:2px; width:0; background:var(--fx-accent-text); transition:width .3s var(--ease-out); }
.hb-underbar:hover::after{ width:100%; }

.hb-glow{ background:var(--fx-accent); color:var(--fx-on-accent); border:none; transition:box-shadow .3s; }
.hb-glow:hover{ box-shadow:0 0 0 4px var(--fx-accent-soft), 0 6px 20px var(--fx-accent-soft); }

.hb-split{ overflow:hidden; background:transparent; }
.hb-split::before,.hb-split::after{ content:""; position:absolute; left:0; right:0; height:51%; background:var(--fx-ink); transition:transform .35s var(--ease-out); }
.hb-split::before{ top:0; transform:translateY(-100%); }
.hb-split::after{ bottom:0; transform:translateY(100%); }
.hb-split .hb-label{ position:relative; z-index:1; transition:color .2s .12s; }
.hb-split:hover::before,.hb-split:hover::after{ transform:translateY(0); }
.hb-split:hover .hb-label{ color:var(--fx-on-ink); }

/* ---- CARTES ---- */
.hx-spot{ overflow:hidden; }
.hx-spot::before{ content:""; position:absolute; inset:0; background:radial-gradient(170px circle at var(--mx,50%) var(--my,50%), var(--fx-accent-soft), transparent 60%); opacity:0; transition:opacity .3s; }
.hx-spot:hover::before{ opacity:1; }
.hx-spot .hx-content{ position:relative; z-index:1; }

.hx-grad::before{ content:""; position:absolute; inset:-1px; border-radius:13px; padding:1px; background:linear-gradient(120deg,var(--fx-accent-text),var(--fx-ink),var(--fx-accent-text)); background-size:200% 100%; -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0); -webkit-mask-composite:xor; mask-composite:exclude; opacity:0; transition:opacity .3s; animation:hx-move 3s linear infinite; }
.hx-grad:hover::before{ opacity:1; }
@keyframes hx-move{ to{ background-position:200% 0; } }

.hx-tilt{ transition:transform .15s ease-out; will-change:transform; }

.hx-lift{ transition:transform .25s var(--ease-out), box-shadow .25s var(--ease-out); }
.hx-lift:hover{ transform:translateY(-6px); box-shadow:0 12px 30px rgba(0,0,0,.12); }

.hx-zoom{ overflow:hidden; background:transparent; padding:0; }
.hx-zoom .hx-content{ width:100%; height:100%; display:flex; align-items:center; justify-content:center; background:var(--fx-accent-soft); color:var(--fx-accent-text); transition:transform .4s var(--ease-out); }
.hx-zoom:hover .hx-content{ transform:scale(1.09); }

.hx-fold{ overflow:hidden; }
.hx-fold::after{ content:""; position:absolute; top:0; right:0; border-style:solid; border-width:0 26px 26px 0; border-color:transparent var(--fx-accent-soft) transparent transparent; transition:border-width .3s var(--ease-out); }
.hx-fold:hover::after{ border-width:0 44px 44px 0; }

.hx-cta{ overflow:hidden; }
.hx-cta .cta{ position:absolute; left:0; right:0; bottom:0; height:30px; background:var(--fx-ink); color:var(--fx-on-ink); display:flex; align-items:center; justify-content:center; font-size:12px; transform:translateY(100%); transition:transform .3s var(--ease-out); }
.hx-cta:hover .cta{ transform:translateY(0); }

.hx-overlay{ overflow:hidden; background:var(--fx-accent-soft); color:var(--fx-accent-text); }
.hx-overlay .veil{ position:absolute; inset:0; background:var(--fx-ink); color:var(--fx-on-ink); display:flex; align-items:center; justify-content:center; font-size:13px; opacity:0; transition:opacity .3s; }
.hx-overlay:hover .veil{ opacity:.92; }

.hx-bar{ justify-content:flex-start; padding-left:16px; overflow:hidden; transition:padding .25s; }
.hx-bar::before{ content:""; position:absolute; left:0; top:0; bottom:0; width:0; background:var(--fx-accent-text); transition:width .25s var(--ease-out); }
.hx-bar:hover{ padding-left:22px; }
.hx-bar:hover::before{ width:5px; }

.hx-bgshift{ background:linear-gradient(120deg,var(--fx-surface) 0%,var(--fx-accent-soft) 50%,var(--fx-surface) 100%); background-size:220% 100%; background-position:0 0; transition:background-position .5s ease; }
.hx-bgshift:hover{ background-position:100% 0; }

.hx-badge .bdg{ position:absolute; top:8px; right:8px; background:var(--fx-accent-soft); color:var(--fx-accent-text); font-size:11px; font-weight:500; padding:2px 8px; border-radius:20px; opacity:0; transform:translateY(-4px); transition:all .25s; }
.hx-badge:hover .bdg{ opacity:1; transform:translateY(0); }

.hx-flip{ border:none; background:transparent; perspective:700px; }
.hx-flip .flip-inner{ position:absolute; inset:0; transform-style:preserve-3d; transition:transform .5s var(--ease-out); }
.hx-flip:hover .flip-inner{ transform:rotateY(180deg); }
.hx-flip .flip-face{ position:absolute; inset:0; backface-visibility:hidden; border-radius:12px; display:flex; align-items:center; justify-content:center; border:0.5px solid var(--fx-border); }
.hx-flip .flip-front{ background:var(--fx-surface); color:var(--fx-body); }
.hx-flip .flip-back{ background:var(--fx-accent-soft); color:var(--fx-accent-text); transform:rotateY(180deg); }

.hx-scan{ overflow:hidden; }
.hx-scan::before{ content:""; position:absolute; left:0; right:0; top:0; height:2px; background:var(--fx-accent-text); opacity:0; }
.hx-scan:hover::before{ opacity:1; animation:hx-scan 1.2s ease-in-out infinite; }
@keyframes hx-scan{ 0%{ top:0; } 100%{ top:100%; } }

/* conic : ::after est un CACHE, il doit etre OPAQUE -> --fx-bg et non --fx-surface (translucide cote site,
   l'anneau passerait au travers et l'effet deviendrait un disque). */
.hx-conic{ overflow:hidden; background:var(--fx-bg); }
.hx-conic::before{ content:""; position:absolute; top:-30%; left:-30%; width:160%; height:160%; background:conic-gradient(var(--fx-accent-text),transparent 25% 75%,var(--fx-accent-text)); opacity:0; transition:opacity .3s; animation:hx-spin 2.5s linear infinite; }
.hx-conic::after{ content:""; position:absolute; inset:1.5px; background:var(--fx-bg); border-radius:11px; }
.hx-conic .hx-content{ position:relative; z-index:1; }
.hx-conic:hover::before{ opacity:1; }
@keyframes hx-spin{ to{ transform:rotate(360deg); } }

.hx-ripple{ overflow:hidden; }
.hx-ripple::before{ content:""; position:absolute; left:50%; top:50%; width:0; height:0; background:var(--fx-accent-soft); border-radius:50%; transform:translate(-50%,-50%); transition:width .5s ease, height .5s ease; }
.hx-ripple:hover::before{ width:300px; height:300px; }
.hx-ripple .hx-content{ position:relative; z-index:1; }

@media (prefers-reduced-motion: reduce){
  .hx-conic::before, .hx-scan::before, .hx-grad::before{ animation:none !important; }
  .hx-tilt{ transform:none !important; }
}