/* ============================================================
   Monclar Studio — UI polish (couche additive, non destructive)
   Objectif : boutons/CTA plus vivants et cohérents, desktop ET mobile.
   Ne change ni couleurs de marque, ni layout.
   Chargé APRÈS les autres CSS. Réversible (retirer le <link>).
   ============================================================ */
:root{
  --ui-ease:cubic-bezier(.22,1,.36,1);
  --ui-shadow-gold:0 10px 24px -10px rgba(139,106,32,.55);
  --ui-shadow-teal:0 10px 24px -10px rgba(44,95,95,.55);
  --ui-shadow-rest-gold:0 6px 16px -10px rgba(139,106,32,.45);
  --ui-shadow-rest-teal:0 6px 16px -10px rgba(44,95,95,.4);
}

/* --- transition commune à tous les CTA (GPU-friendly) --- */
.btn,.btn-primary,.btn-contact,.nav-cta,.container-scroll-cta,
.methode-cta,.equipe-cta,.faq-cta-box .btn,.shc-visual-cta,
.hero-tagline-btn,.hero-tagline-cta,.mi-cta,.mi-cta-tiktok,
.fondation-sticky-cta,.magnetic-cta{
  transition:transform .28s var(--ui-ease),
             box-shadow .32s var(--ui-ease),
             background-color .3s var(--ui-ease),
             color .3s var(--ui-ease),
             border-color .3s var(--ui-ease) !important;
  will-change:transform;
  cursor:pointer;
  -webkit-tap-highlight-color:transparent; /* pas de flash gris au tap mobile */
}

/* --- légère profondeur AU REPOS sur les boutons pleins :
       visible aussi sur mobile (pas besoin de survol) --- */
.btn-primary,.hero-tagline-btn{ box-shadow:var(--ui-shadow-rest-teal); }
.btn-contact,.nav-cta,.container-scroll-cta,
.methode-cta,.equipe-cta,.fondation-sticky-cta{ box-shadow:var(--ui-shadow-rest-gold); }

/* --- retour physique AU TAP / clic (fonctionne sur mobile) --- */
.btn:active,.btn-primary:active,.btn-contact:active,.nav-cta:active,
.container-scroll-cta:active,.methode-cta:active,.equipe-cta:active,
.shc-visual-cta:active,.hero-tagline-btn:active,.hero-tagline-cta:active,
.mi-cta:active,.fondation-sticky-cta:active,.magnetic-cta:active{
  transform:translateY(0) scale(.97);
}

/* --- flèche/soulignement animé des liens texte (au tap aussi) --- */
.svc-cta{ position:relative;display:inline-flex;align-items:center;gap:.5rem; }
.svc-cta::before{
  content:"";position:absolute;left:0;bottom:-2px;height:1px;width:100%;
  background:currentColor;transform:scaleX(0);transform-origin:right;
  transition:transform .35s var(--ui-ease);
}

/* --- focus clavier cohérent (accessibilité) --- */
.btn:focus-visible,.btn-primary:focus-visible,.btn-contact:focus-visible,
.nav-cta:focus-visible,.container-scroll-cta:focus-visible,
.methode-cta:focus-visible,.equipe-cta:focus-visible,.svc-cta:focus-visible,
.shc-visual-cta:focus-visible,.hero-tagline-btn:focus-visible{
  outline:2px solid #8B6A20;outline-offset:3px;
  box-shadow:0 0 0 4px rgba(139,106,32,.22) !important;border-radius:999px;
}

/* ============================================================
   Effets de SURVOL : réservés aux appareils avec vrai survol
   (souris) → sur mobile, aucun état « collé » après un tap.
   ============================================================ */
@media (hover:hover) and (pointer:fine){
  .btn:hover,.btn-primary:hover,.btn-contact:hover,.nav-cta:hover,
  .container-scroll-cta:hover,.methode-cta:hover,.equipe-cta:hover,
  .shc-visual-cta:hover,.hero-tagline-btn:hover,.hero-tagline-cta:hover,
  .mi-cta:hover,.fondation-sticky-cta:hover,.magnetic-cta:hover{
    transform:translateY(-2px);
  }
  .btn-primary:hover,.hero-tagline-btn:hover{ box-shadow:var(--ui-shadow-teal) !important; }
  .btn-contact:hover,.nav-cta:hover,.container-scroll-cta:hover,
  .methode-cta:hover,.equipe-cta:hover,.fondation-sticky-cta:hover{
    box-shadow:var(--ui-shadow-gold) !important;
  }
  /* brillance qui balaie les boutons pilule dorés */
  .container-scroll-cta,.btn-contact,.nav-cta{ position:relative;overflow:hidden; }
  .container-scroll-cta::after,.btn-contact::after,.nav-cta::after{
    content:"";position:absolute;inset:0;pointer-events:none;
    background:linear-gradient(115deg,transparent 35%,rgba(255,255,255,.28) 50%,transparent 65%);
    transform:translateX(-120%);transition:transform .6s var(--ui-ease);
  }
  .container-scroll-cta:hover::after,.btn-contact:hover::after,.nav-cta:hover::after{
    transform:translateX(120%);
  }
  .svc-cta:hover::before{ transform:scaleX(1);transform-origin:left; }
}

/* --- respect de « réduire les animations » --- */
@media (prefers-reduced-motion:reduce){
  .btn,.btn-primary,.btn-contact,.nav-cta,.container-scroll-cta,
  .methode-cta,.equipe-cta,.shc-visual-cta,.hero-tagline-btn,
  .mi-cta,.fondation-sticky-cta,.magnetic-cta{ transition:background-color .2s,color .2s !important; }
  .btn-primary:active,.btn-contact:active,.nav-cta:active,
  .container-scroll-cta:active{ transform:none; }
}