/* Cadres de boutons personnalisés — uniquement sur les pages ciblées. */

/* Accueil : les boîtes cliquables partagent une hauteur; les deux cadres restent sur une ligne jusqu'au breakpoint mobile. */
.home-page .hero .hero-cat-actions {
  align-items: center !important;
  gap: 24px !important;
  width: max-content !important;
  max-width: 100% !important;
}
.home-page .hero .hero-cat-button {
  box-sizing: border-box !important;
  width: 168px !important;
  height: 108px !important;
  min-height: 108px !important;
  flex: 0 0 168px !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: visible !important;
  background: none !important;
  border: 0 !important;
  box-shadow: none !important;
}
.home-page .hero .hero-cat-art { display: none !important; }
.home-page .hero .hero-cat-button::before {
  content: "";
  position: absolute;
  z-index: 0;
  left: 0;
  width: 168px;
  height: 95px;
  background-repeat: no-repeat;
  background-position: center;
  background-size: 100% 100%;
  pointer-events: none;
}
.home-page .hero .hero-cat-reserve::before {
  top: 0;
  background-image: url("/home-backgrounds/button-frames/home-hero-reserve-cat.png");
}
.home-page .hero .hero-cat-quote::before {
  top: 13px;
  background-image: url("/home-backgrounds/button-frames/home-hero-devis-cat.png");
}
.home-page .hero .hero-cat-label {
  z-index: 1 !important;
  top: 70px !important;
  left: 50% !important;
  width: max-content !important;
  height: 22px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  transform: translate(-50%, -50%) !important;
  color: #263e60 !important;
  text-shadow: none !important;
}
.home-page .hero .hero-cat-reserve .hero-cat-label {
  top: 65px !important;
}
.home-page .hero .hero-cat-button:focus-visible {
  outline: 2px solid #263e60 !important;
  outline-offset: 3px !important;
}

/* Accueil : galerie, image entière à ses proportions d'origine; libellé au centre du panneau crème. */
.home-page .gallery-action .art-link-gallery {
  box-sizing: border-box !important;
  position: relative !important;
  width: min(300px, calc(100vw - 32px)) !important;
  height: auto !important;
  min-height: 0 !important;
  aspect-ratio: 1672 / 941 !important;
  overflow: visible !important;
  background: none !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
}
.home-page .gallery-action .art-link-gallery::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background: url("/home-backgrounds/button-frames/home-gallery-snake.png") center / 100% 100% no-repeat;
  pointer-events: none;
}
.home-page .gallery-action .art-link-gallery .art-link-media { display: none !important; }
.home-page .gallery-action .art-link-gallery .art-link-label {
  position: absolute !important;
  z-index: 1 !important;
  left: 48.8% !important;
  top: 66% !important;
  width: 82% !important;
  height: 30px !important;
  max-width: none !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 !important;
  transform: translate(-50%, -50%) !important;
  color: #263e60 !important;
  font-size: clamp(10px, 3.2vw, 13px) !important;
  line-height: 1.15 !important;
  text-align: center !important;
  white-space: normal !important;
  overflow-wrap: anywhere !important;
}
.home-page .gallery-action .art-link-gallery:focus-visible {
  outline: 2px solid #263e60 !important;
  outline-offset: 3px !important;
}

/* Accueil : le cadre Réserver se cale sur le centre de la boîte du bouton téléphone déjà publié. */
.home-page .first-cta .final-pet-actions {
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  align-items: flex-start !important;
  justify-content: center !important;
  gap: 30px !important;
  width: max-content !important;
  max-width: 100% !important;
  margin-inline: auto !important;
}
.home-page .first-cta .final-pet-reserve .final-pet-art { display: none !important; }
.home-page .first-cta .final-pet-reserve::before {
  content: "";
  position: absolute;
  z-index: 0;
  top: -7px;
  left: 0;
  width: 210px;
  height: 118.13px;
  background: url("/home-backgrounds/button-frames/home-final-reserve-dog.png") center / 100% 100% no-repeat;
  pointer-events: none;
}
.home-page .first-cta .final-pet-label {
  z-index: 1 !important;
  top: 80.4px !important;
  left: 50% !important;
  color: #263e60 !important;
  text-shadow: none !important;
}
.home-page .first-cta .final-pet-button:focus-visible {
  outline: 2px solid #fffaf1 !important;
  outline-offset: 3px !important;
}

/* Règles partagées par les cinq boutons de pages publiques : panneau image sans étirer l'illustration. */
:is(
  main#main-content .public-reference-page a.button.pink-button[href="/contact?objet=urgence"],
  body:has(.portrait-story) .split-feature:has(.a-propos-editable-art-slot--hand) > div > a.button.button-primary[href="/contact"],
  main#main-content .public-reference-page .first-cta > a.button.pink-button[href="/contact?objet=zone"],
  main#main-content .public-reference-page .reviews-section .review-call-to-action > button.button.button-primary,
  main#main-content .public-reference-page .contact-layout form.contact-form > button.button.button-primary
) {
  box-sizing: border-box !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  height: auto !important;
  min-height: 0 !important;
  max-width: 100% !important;
  aspect-ratio: 1672 / 941 !important;
  padding-bottom: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  color: #263e60 !important;
  font-size: 15px !important;
  font-weight: 600 !important;
  line-height: 1.2 !important;
  text-align: center !important;
  text-decoration: none !important;
  text-shadow: none !important;
  white-space: nowrap !important;
  background-color: transparent !important;
  background-image: var(--ff-frame-image) !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  background-size: 100% 100% !important;
}
:is(
  main#main-content .public-reference-page a.button.pink-button[href="/contact?objet=urgence"],
  body:has(.portrait-story) .split-feature:has(.a-propos-editable-art-slot--hand) > div > a.button.button-primary[href="/contact"],
  main#main-content .public-reference-page .first-cta > a.button.pink-button[href="/contact?objet=zone"],
  main#main-content .public-reference-page .reviews-section .review-call-to-action > button.button.button-primary,
  main#main-content .public-reference-page .contact-layout form.contact-form > button.button.button-primary
):is(:hover, :focus-visible) {
  background-color: transparent !important;
  background-image: var(--ff-frame-image) !important;
  filter: brightness(1.02);
}
:is(
  main#main-content .public-reference-page a.button.pink-button[href="/contact?objet=urgence"],
  body:has(.portrait-story) .split-feature:has(.a-propos-editable-art-slot--hand) > div > a.button.button-primary[href="/contact"],
  main#main-content .public-reference-page .first-cta > a.button.pink-button[href="/contact?objet=zone"],
  main#main-content .public-reference-page .reviews-section .review-call-to-action > button.button.button-primary,
  main#main-content .public-reference-page .contact-layout form.contact-form > button.button.button-primary
):focus-visible {
  outline: 3px solid #f7d48a !important;
  outline-offset: 4px !important;
}

/* Prestations — petit poussin. */
main#main-content .public-reference-page a.button.pink-button[href="/contact?objet=urgence"] {
  --ff-frame-image: url("/home-backgrounds/button-frames/prestations-request-chick.png");
  width: min(240px, 100%) !important;
  margin: 24px 0 0 !important;
  padding: 60px 0 0 !important;
}

/* À propos — centrer la copie finale et le bouton, puis laisser la décoration vivre sous le contenu sur petits écrans. */
body:has(.portrait-story) .split-feature:has(.a-propos-editable-art-slot--hand) > div {
  text-align: center !important;
}
body:has(.portrait-story) .split-feature:has(.a-propos-editable-art-slot--hand) > div > p:not(.eyebrow) {
  width: min(100%, 720px) !important;
  margin-inline: auto !important;
}
body:has(.portrait-story) .split-feature:has(.a-propos-editable-art-slot--hand) > div > a.button.button-primary[href="/contact"] {
  --ff-frame-image: url("/home-backgrounds/button-frames/about-meet-poodle.png");
  width: min(260px, 100%) !important;
  margin: 24px auto 0 !important;
  padding: 67px 0 0 !important;
}

/* Zone — poisson, libellé centré sur le panneau crème. */
main#main-content .public-reference-page .first-cta > a.button.pink-button[href="/contact?objet=zone"] {
  --ff-frame-image: url("/home-backgrounds/button-frames/zone-study-fish.png");
  width: min(360px, 100%) !important;
  margin: 24px auto 0 !important;
  padding: min(43.5px, calc(12.05vw - 5.8px)) 0 0 52.6px !important;
}

/* Avis — caniche; la position dépend de la boîte du bouton, pas de la colonne parente. */
main#main-content .public-reference-page .reviews-section .review-call-to-action > button.button.button-primary {
  --ff-frame-image: url("/home-backgrounds/button-frames/reviews-poodle.png");
  width: min(280px, 100%) !important;
  margin: 0 0 0 auto !important;
  padding: 32px 0 0 !important;
}

/* Contact — gecko; le formulaire et son action restent intacts. */
main#main-content .public-reference-page .contact-layout form.contact-form > button.button.button-primary {
  --ff-frame-image: url("/home-backgrounds/button-frames/contact-gecko.png");
  width: min(360px, 100%) !important;
  margin: 20px auto 0 !important;
  padding: min(23px, 5.7vw) 34px 0 0 !important;
}

@media (max-width: 900px) {
  /* Le CTA final tient côte à côte sur tablette; l'art ne chevauche pas les panneaux. */
  .home-page .first-cta .final-pet-actions { gap: 24px !important; }
  body:has(.portrait-story) .split-feature:has(.a-propos-editable-art-slot--hand) > .a-propos-editable-art-slot--hand {
    position: relative !important;
    inset: auto !important;
    grid-column: 1 / -1;
    justify-self: center;
    width: clamp(100px, 18vw, 132px) !important;
    height: clamp(100px, 18vw, 132px) !important;
    margin: 12px auto 0 !important;
    opacity: .38 !important;
  }
}
@media (max-width: 620px) {
  .home-page .hero .hero-cat-actions {
    flex-direction: column !important;
    align-items: center !important;
    gap: 8px !important;
    width: 100% !important;
    padding-bottom: 0 !important;
  }
  .home-page .hero .hero-cat-button {
    height: 95px !important;
    min-height: 95px !important;
    flex-basis: 95px !important;
  }
  .home-page .hero .hero-cat-button::before { top: 0; }
  .home-page .hero .hero-cat-reserve .hero-cat-label { top: 65px !important; }
  .home-page .hero .hero-cat-quote .hero-cat-label { top: 57px !important; }
  .home-page .first-cta .final-pet-actions {
    flex-direction: column !important;
    align-items: center !important;
    gap: 12px !important;
    width: 100% !important;
    margin-top: 18px !important;
  }
  .home-page .first-cta .final-pet-button {
    height: 141px !important;
    flex-basis: 141px !important;
  }
  .home-page .first-cta .final-pet-phone { margin-top: 0 !important; }
  main#main-content .public-reference-page .reviews-section .review-call-to-action > button.button.button-primary {
    margin-inline: auto !important;
  }
  main#main-content .public-reference-page .first-cta > a.button.pink-button[href="/contact?objet=zone"] {
    padding-left: min(14.6%, 52.6px) !important;
  }
  main#main-content .public-reference-page .contact-layout form.contact-form > button.button.button-primary {
    padding-right: min(9.4%, 34px) !important;
  }
}