/* Le bouton « crochets » — partagé par la vitrine, les pages de phoss.tech et l'application.
   Inspiré de uiverse.io/Navarog21/loud-bird-67 (demande de Johann du 28.09.2026). Au repos, un
   anneau en relief entoure la pilule mais n'en montre que les deux bouts, comme des crochets ; au
   survol, au focus clavier ou sous le doigt, l'anneau se referme et une lueur monte.
   L'original masque la bordure avec des rectangles couleur du fond : ici, un masque CSS animé,
   valable sur n'importe quel fond. Dans l'application, l'effet ne vit qu'en thème sombre ; le
   thème clair garde ses pilules noires, et le bouton métal son anneau tournant, seul. La couleur
   suit le fond : jaune Lex sur le noir, noir sur le jaune. */

@property --crochet-bras { syntax: "<length-percentage>"; inherits: false; initial-value: 0px; }

:root[data-theme="sombre"] .btn-primaire:not(.btn-metal), .bouton--fin, .bouton--fort, .barre__prix {
  --crochet-couleur: var(--accent);
  position: relative;
}
.bouton--fin, .barre--inverse .barre__prix { --crochet-couleur: var(--accent-encre); }
/* Un relief sur du noir vire au gris : le crochet noir reste plein. Un bouton désactivé n'invite à rien. */
.bouton--fin::after, .barre--inverse .barre__prix::after { border-style: solid; }
.bouton--fort:disabled::after { display: none; }

:root[data-theme="sombre"] .btn-primaire:not(.btn-metal)::after, .bouton--fin::after, .bouton--fort::after, .barre__prix::after {
  content: ""; position: absolute; inset: -5px; border-radius: inherit; pointer-events: none;
  border: 3px ridge var(--crochet-couleur);
  --crochet-bras: 1.1em;
  -webkit-mask: linear-gradient(90deg, #000 0 var(--crochet-bras), transparent var(--crochet-bras) calc(100% - var(--crochet-bras)), #000 calc(100% - var(--crochet-bras)));
  mask: linear-gradient(90deg, #000 0 var(--crochet-bras), transparent var(--crochet-bras) calc(100% - var(--crochet-bras)), #000 calc(100% - var(--crochet-bras)));
  box-shadow: inset 0 0 0 transparent;
  transition: --crochet-bras 0.5s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.5s ease;
}

:root[data-theme="sombre"] .btn-primaire:not(.btn-metal):not(.desactive):is(:hover, :focus-visible, :active)::after,
.bouton--fin:is(:hover, :focus-visible, :active)::after,
.bouton--fort:not(:disabled):is(:hover, :focus-visible, :active)::after,
.barre__prix:is(:hover, :focus-visible, :active)::after {
  --crochet-bras: 51%;
  box-shadow: inset 0 0 12px color-mix(in srgb, var(--crochet-couleur) 55%, transparent);
}
:root[data-theme="sombre"] .btn-primaire:not(.btn-metal):not(.desactive):is(:hover, :focus-visible, :active),
.bouton--fin:is(:hover, :focus-visible, :active),
.bouton--fort:not(:disabled):is(:hover, :focus-visible, :active),
.barre__prix:is(:hover, :focus-visible, :active) {
  box-shadow: 0 0 24px -6px color-mix(in srgb, var(--crochet-couleur) 70%, transparent);
}

@media (prefers-reduced-motion: reduce) {
  :root[data-theme="sombre"] .btn-primaire:not(.btn-metal)::after, .bouton--fin::after, .bouton--fort::after, .barre__prix::after { transition: none; }
}