/* Les invitations empruntent la coupe du GR : un bloc lisible et une flèche
   dans son propre compartiment. La cible et son cadre ne se déplacent jamais;
   GSAP reste libre d'animer .button-inner comme avant. Charger après signature.css. */
.button,
.header-contact {
  --action-cut: 12px;
  --action-wing: 68px;
  --action-slant: 18px;
  --action-bg: var(--ink);
  --action-text: var(--paper);
  --action-rim: var(--ink);
  --action-wing-bg: var(--orange);
  --action-wing-text: var(--ink);
  --action-hover-bg: var(--orange);
  --action-hover-text: var(--ink);
  --action-hover-wing: var(--paper);
  --action-hover-wing-text: var(--ink);
  --action-focus: var(--ink);
  --action-ease: cubic-bezier(.23, 1, .32, 1);
  position: relative;
  isolation: isolate;
  max-width: 100%;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--action-text);
  box-shadow: none;
  font: 700 18px/1.15 var(--display);
  letter-spacing: -.035em;
  text-align: left;
  transition: color 180ms ease;
  touch-action: manipulation;
}

.button-orange {
  --action-bg: var(--orange);
  --action-text: var(--ink);
  --action-rim: var(--orange);
  --action-wing-bg: var(--ink);
  --action-wing-text: var(--orange);
  --action-hover-bg: var(--paper);
  --action-hover-wing: var(--orange);
}

/* Les fonds sont dessinés sur des calques internes. Le coin coupé ne rogne
   ni le focus ni la surface cliquable, qui garde son rectangle complet. */
.button::before,
.header-contact::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--action-bg);
  box-shadow: inset 0 0 0 1px var(--action-rim);
  clip-path: polygon(0 0, calc(100% - var(--action-cut)) 0,
    100% var(--action-cut), 100% 100%, 0 100%);
  pointer-events: none;
  transition: background-color 220ms ease;
}

.button::after,
.button:is(:hover, :focus-visible)::after,
.header-contact::after {
  content: '';
  position: absolute;
  inset: 0 0 0 auto;
  z-index: 0;
  width: var(--action-wing);
  height: auto;
  border: 0;
  background: var(--action-wing-bg);
  opacity: 1;
  transform: none;
  transform-origin: right center;
  clip-path: polygon(var(--action-slant) 0,
    calc(100% - var(--action-cut)) 0, 100% var(--action-cut),
    100% 100%, 0 100%);
  pointer-events: none;
  transition: background-color 220ms ease,
    transform 240ms var(--action-ease);
}

.button .button-inner {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  width: 100%;
  min-height: inherit;
  padding: 20px calc((var(--action-wing) - 32px) / 2) 20px 24px;
  font: inherit;
  letter-spacing: inherit;
}

.button .button-inner > :is(svg, span[aria-hidden], .button-arrow),
.header-contact > span[aria-hidden] {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  flex: 0 0 32px;
  width: 32px;
  height: 32px;
  margin: 0;
  color: var(--action-wing-text);
  font: 400 32px/1 var(--body);
  transform: none;
  transition: color 180ms ease, transform 180ms var(--action-ease);
}
.button .button-arrow svg {width: 32px;height: 32px}
.button svg {stroke-width: 1.6}

/* On retire les anciennes ombres et translations au même niveau de
   spécificité. Elles déplaçaient le bouton quand le pointeur entrait dessus. */
.hero-dark .hero-bottom .button-orange,
.hero-dark .hero-bottom .button-orange:is(:hover, :focus-visible),
.menu-dialog .button-orange,
.menu-dialog .button-orange:is(:hover, :focus-visible),
.footer.footer-dark .contact-submit,
.footer-dark .contact-submit:is(:hover, :focus-visible):not(:disabled) {
  background: transparent;
  box-shadow: none;
  transform: none;
  transition: color 180ms ease;
}
.header-contact:is(:hover, :focus-visible) {box-shadow: none}
.header-contact:is(:hover, :focus-visible) > span,
.footer-dark .contact-submit:is(:hover, :focus-visible) .button-inner > span[aria-hidden] {
  transform: none;
}

.hero-dark .hero-bottom .button-orange {
  --action-focus: var(--paper);
  font-size: 20px;
}
.menu-invitation .button {--action-focus: var(--paper)}
.menu-invitation .button .button-inner {font-size: 18px}

/* Le formulaire est sur encre : l'invitation orange reste prioritaire. */
.footer.footer-dark .contact-submit {
  --action-bg: var(--orange);
  --action-text: var(--ink);
  --action-rim: var(--orange);
  --action-wing-bg: var(--ink);
  --action-wing-text: var(--orange);
  --action-hover-bg: var(--paper);
  --action-hover-wing: var(--orange);
  --action-focus: var(--paper);
}
/* Les anciens boutons masquaient leur pseudo-élément décoratif.
   Le compartiment de flèche l’utilise désormais dans toutes les invitations. */
.hero-dark .button::after,
.menu-dialog .button::after,
.footer-dark .contact-submit::after {display: block}
.footer-dark .contact-submit:disabled {cursor: default}

/* Le petit bouton du header reprend le même dessin, sans concurrencer
   l'invitation du hero. La typographie reste assez grande pour être repérée. */
.header-contact {
  --action-wing: 48px;
  --action-cut: 10px;
  --action-slant: 13px;
  --action-rim: var(--paper);
  --action-focus: var(--paper);
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  min-width: 0;
  min-height: 48px;
  padding: 12px 12px 12px 18px;
  font-size: 15px;
  white-space: nowrap;
}
.header-contact > span[aria-hidden] {
  flex-basis: 24px;
  width: 24px;
  height: 24px;
  font-size: 24px;
}
html[data-header-theme=paper] .header-contact {
  --action-bg: var(--paper);
  --action-text: var(--ink);
  --action-rim: var(--ink);
  --action-focus: var(--ink);
}
html[data-header-theme=orange] .header-contact {
  --action-rim: var(--ink);
  --action-hover-bg: var(--paper);
  --action-hover-wing: var(--ink);
  --action-hover-wing-text: var(--paper);
  --action-focus: var(--ink);
  background: transparent;
  color: var(--action-text);
  border: 0;
}

/* Le clavier reçoit un état immédiat; le dessin de focus reste extérieur
   au fond découpé. La couleur seule ne signale jamais cette interaction. */
.button:focus-visible,
.header-contact:focus-visible,
.footer-dark .contact-submit:focus-visible {
  outline: 3px solid var(--action-focus);
  outline-offset: 5px;
  transition: none;
}
.button:focus-visible::before,
.header-contact:focus-visible::before {background: var(--action-hover-bg);transition: none}
.button:focus-visible,
.header-contact:focus-visible {color: var(--action-hover-text)}
.button:focus-visible::after,
.header-contact:focus-visible::after {background: var(--action-hover-wing);transition: none}
.button:focus-visible .button-inner > :is(svg, span[aria-hidden], .button-arrow),
.header-contact:focus-visible > span[aria-hidden] {color: var(--action-hover-wing-text);transition: none}

@media (hover: hover) and (pointer: fine) {
  .button:not(:disabled):hover,
  .header-contact:hover,
  html[data-header-theme=orange] .header-contact:hover {color: var(--action-hover-text)}
  .button:not(:disabled):hover::before,
  .header-contact:hover::before {background: var(--action-hover-bg)}
  .button:not(:disabled):hover::after,
  .header-contact:hover::after {
    background: var(--action-hover-wing);
    transform: scaleX(1.12);
  }
  .button:not(:disabled):hover .button-inner > :is(svg, span[aria-hidden], .button-arrow),
  .header-contact:hover > span[aria-hidden] {
    color: var(--action-hover-wing-text);
    transform: translate(3px, -3px);
  }
}

html[data-header-theme=orange] .header-contact:focus-visible {color: var(--action-hover-text)}

/* Retour tactile : seul le contenu accuse le clic, jamais le cadre. */
.button:not(:disabled):active .button-inner > :is(svg, span[aria-hidden], .button-arrow),
.header-contact:active > span[aria-hidden] {transform: translate(1px, -1px)}

@media (max-width: 760px) {
  .button {--action-wing: 60px;--action-slant: 16px;--action-cut: 10px;min-height: 62px;font-size: 16px}
  .button .button-inner {padding: 17px 14px 17px 20px;gap: 16px}
  .hero-dark .hero-bottom .button-orange {font-size: 17px}
  .menu-invitation .button .button-inner {font-size: 17px}
  .header-contact {
    --action-wing: 40px;
    --action-cut: 8px;
    --action-slant: 12px;
    min-height: 44px;
    padding: 11px 10px 11px 12px;
    gap: 12px;
    font-size: 13px;
  }
  .header-contact > span[aria-hidden] {flex-basis: 20px;width: 20px;height: 20px;font-size: 22px}
}
@media (max-width: 360px) {
  .header-contact {
    --action-wing: 34px;
    --action-cut: 7px;
    --action-slant: 10px;
    padding-inline: 8px;
    gap: 8px;
    font-size: 12px;
  }
  .header-contact > span[aria-hidden] {flex-basis: 18px;width: 18px;height: 18px;font-size: 20px}
}

@media (prefers-reduced-motion: reduce) {
  .button, .header-contact,
  .button::before, .button::after,
  .header-contact::before, .header-contact::after,
  .button .button-inner > :is(svg, span[aria-hidden], .button-arrow),
  .header-contact > span[aria-hidden] {transition: none!important}
  .button:is(:hover, :focus-visible)::after,
  .header-contact:is(:hover, :focus-visible)::after,
  .button:is(:hover, :focus-visible, :active) .button-inner > :is(svg, span[aria-hidden], .button-arrow),
  .header-contact:is(:hover, :focus-visible, :active) > span[aria-hidden] {transform: none!important}
}
html[data-motion=reduce] :is(.button, .header-contact),
html[data-motion=reduce] :is(.button, .header-contact)::before,
html[data-motion=reduce] :is(.button, .header-contact)::after,
html[data-motion=reduce] .button .button-inner > :is(svg, span[aria-hidden], .button-arrow),
html[data-motion=reduce] .header-contact > span[aria-hidden] {transition: none!important}
html[data-motion=reduce] .button:is(:hover, :focus-visible)::after,
html[data-motion=reduce] .header-contact:is(:hover, :focus-visible)::after,
html[data-motion=reduce] .button:is(:hover, :focus-visible, :active) .button-inner > :is(svg, span[aria-hidden], .button-arrow),
html[data-motion=reduce] .header-contact:is(:hover, :focus-visible, :active) > span[aria-hidden] {transform: none!important}