/* Interactions de la direction B : couleurs de marque, sans mouvement continu. */
.direction-b {
  --action-ease: cubic-bezier(.22, 1, .36, 1);
}
.direction-b :is(.btn, .more-photos, .b-tabs button, .b-mobile-contact a) {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  transition: transform .32s var(--action-ease), box-shadow .32s var(--action-ease),
    background-color .28s ease, border-color .28s ease, color .28s ease;
}
.direction-b .btn::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -2;
  background: var(--orange);
  transform: translateX(-102%);
  transition: transform .42s var(--action-ease);
  pointer-events: none;
}
.direction-b .btn.dark::before { background: #3b3c36; }
.direction-b .btn > .b-cta-arrow,
.direction-b .b-tabs b,
.direction-b .b-hero-copy .text-link > span {
  display: inline-block;
  transition: transform .32s var(--action-ease);
}
.direction-b .b-emergency-call > svg { transform-origin: 50% 65%; }
.direction-b .text-link {
  position: relative;
  transition: border-color .18s ease;
}
.direction-b .text-link::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 2px;
  background: var(--orange);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .35s var(--action-ease);
  pointer-events: none;
}
.direction-b .b-action-wave {
  position: absolute;
  z-index: -1;
  border-radius: 50%;
  background: currentColor;
  pointer-events: none;
  opacity: 0;
}

@media (hover: hover) and (pointer: fine) {
  .direction-b .btn:hover {
    background: var(--yellow);
    color: var(--ink);
    transform: translate(-2px, -3px);
    box-shadow: 4px 5px 0 #242523;
  }
  .direction-b .btn.dark:hover {
    background: var(--ink);
    color: #fff;
    box-shadow: 4px 5px 0 var(--yellow);
  }
  .direction-b .b-emergency-call:hover { box-shadow: 4px 5px 0 #fff; }
  .direction-b .btn:hover::before { transform: translateX(0); }
  .direction-b .btn:hover > .b-cta-arrow {
    transform: translate(3px, -3px);
  }
  .direction-b .b-emergency-call:hover > svg { animation: b-phone-hello .5s ease; }
  .direction-b .text-link:hover::after { transform: scaleX(1); }
  .direction-b .b-hero-copy .text-link:hover > span { transform: translateY(4px); }
  .direction-b .more-photos:hover {
    background: var(--yellow);
    border-color: var(--yellow);
    color: var(--ink);
    transform: translateY(-3px);
    box-shadow: 0 4px 0 var(--orange);
  }
  .direction-b .b-tabs button:hover {
    box-shadow: inset 0 -4px var(--orange);
  }
  .direction-b .b-tabs button:not([aria-selected=true]):hover { background: #fff6b8; }
  .direction-b .b-tabs button:hover b { transform: translate(3px, -3px); }
}

.direction-b .btn:focus-visible::before { transform: translateX(0); }
.direction-b .text-link:focus-visible::after { transform: scaleX(1); }
.direction-b :is(.btn, .more-photos):active {
  transform: translateY(1px) scale(.98);
  box-shadow: none;
  transition-duration: .1s;
}
.direction-b .b-tabs button:active { box-shadow: inset 0 -5px var(--orange); }
.direction-b .b-mobile-contact a:active { background: var(--orange); color: var(--ink); }
.direction-b .b-mobile-contact .b-mobile-urgent:active { background: #3b3c36; color: var(--yellow); }

@keyframes b-phone-hello {
  0%, 100% { transform: rotate(0); }
  25% { transform: rotate(-12deg); }
  60% { transform: rotate(9deg); }
}

@media (prefers-reduced-motion: reduce) {
  .direction-b :is(.btn, .more-photos, .b-tabs button, .b-tabs b, .text-link > span, .btn > .b-cta-arrow) {
    transform: none !important;
  }
  .direction-b .b-action-wave { display: none; }
  .direction-b .btn::before { transition: none; }
  .direction-b .b-emergency-call > svg { animation: none; }
}