/* ══════════════════════════════════════════════════════
   Hair & Glow Caribbean — boutons et liens bien reconnaissables (25/10/2026)
   📌 Demande de Jenna : on doit voir tout de suite ce qui se clique, et le survol le met en valeur.
   📌 Le logo n'est jamais touché.
   📌 Chargé en dernier sur les pages publiques (après leur propre style).
   ══════════════════════════════════════════════════════ */

/* 1. Partout : tout ce qui se clique réagit au survol et au clavier */
a, button, summary, [role="button"], label[for] { cursor: pointer; }
.btn, .btn-next, .btn-back, .btn-submit, .btn-force-book, .menu-btn {
  transition: background-color .25s ease, color .25s ease, border-color .25s ease, box-shadow .25s ease, transform .25s ease !important;
}
.btn:not(:disabled):hover, .btn:not(:disabled):focus-visible,
.btn-next:not(:disabled):hover, .btn-back:not(:disabled):hover, .btn-submit:not(:disabled):hover, .btn-force-book:not(:disabled):hover,
.menu-btn:hover, .menu-btn:focus-visible {
  background-color: #000 !important; color: #fff !important; border-color: #000 !important;
  box-shadow: 0 6px 18px rgba(0, 0, 0, .16); transform: translateY(-1px);
}
.btn:disabled { cursor: default; }

/* Liens en toutes lettres (« Explore services », « See the full portfolio »…) : soulignés et fléchés */
.link {
  display: inline-flex; align-items: center; gap: .6em;
  color: #000 !important; border-bottom: 1px solid currentColor !important;
  transition: color .25s ease, gap .25s ease;
}
.link::after { content: "\2192"; font-family: inherit; letter-spacing: 0; transition: transform .25s ease; }
.link:hover, .link:focus-visible { color: #6E5A4C !important; }
.link:hover::after, .link:focus-visible::after { transform: translateX(4px); }

/* Menu du haut et pied de page : soulignement au survol (le logo n'est pas concerné) */
nav a:not(.btn):not(.logo) { transition: color .25s ease; text-underline-offset: 6px; }
nav a:not(.btn):not(.logo):hover, nav a:not(.btn):not(.logo):focus-visible { color: #6E5A4C; text-decoration: underline; }
footer a:not(.logo):hover, footer a:not(.logo):focus-visible { color: #000 !important; text-decoration: underline; text-underline-offset: 4px; }

/* Questions fréquentes : la question réagit au survol */
.faq summary { transition: color .25s ease; }
.faq summary:hover, .faq summary:focus-visible { color: #6E5A4C; }

/* Cartes de services cliquables (accueil) */
a.svc h3 { transition: color .25s ease; }
a.svc:hover h3, a.svc:focus-visible h3 { color: #000; text-decoration: underline; text-underline-offset: 6px; }
a.svc img { transition: opacity .3s ease; }
a.svc:hover img { opacity: .88; }

/* 2. Pages vitrine (accueil, pages mariage, villas, portfolio, partenaires) : le bouton principal est plein */
body.hgc-site .btn:not(.ghost) { background-color: #000; color: #fff; border-color: #000; }
body.hgc-site .btn:not(.ghost):not(:disabled):hover,
body.hgc-site .btn:not(.ghost):not(:disabled):focus-visible { background-color: #6E5A4C !important; border-color: #6E5A4C !important; color: #fff !important; }
/* Bandeau noir : bouton blanc, qui devient taupe au survol */
body.hgc-site .band .btn { background-color: #fff !important; color: #000 !important; border-color: #fff !important; }
body.hgc-site .band .btn:hover, body.hgc-site .band .btn:focus-visible { background-color: #6E5A4C !important; color: #fff !important; border-color: #6E5A4C !important; }

@media (prefers-reduced-motion: reduce) {
  .btn, .link, .link::after, .menu-btn { transition: none !important; transform: none !important; }
}