@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
  html, body, * {
    font-family: 'DM Sans', sans-serif;
  }
}

/* Animations d'apparition au scroll (composant Reveal) */
.reveal {
  opacity: 0;
  transition: opacity 0.9s cubic-bezier(0.16, 1, 0.3, 1),
    transform 0.9s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: opacity, transform;
}
.reveal-up {
  transform: translateY(44px);
}
.reveal-down {
  transform: translateY(-44px);
}
.reveal-left {
  transform: translateX(-56px);
}
.reveal-right {
  transform: translateX(56px);
}
.reveal-fade {
  transform: none;
}
.reveal.is-visible {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}

@media (prefers-reduced-motion: reduce) {
  .reveal {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}

/* Masque la barre de défilement horizontale (carrousels) */
.no-scrollbar {
  -ms-overflow-style: none;
  scrollbar-width: none;
}
.no-scrollbar::-webkit-scrollbar {
  display: none;
}

/* Keypoints & callout rich HTML content (ul/li, strong, em) */
.keypoints-content ul,
.keypoints-content ol {
  padding-left: 1.25rem;
  margin-bottom: 0.25rem;
  list-style: none;
}
.keypoints-content ul li {
  position: relative;
  padding-left: 0.25rem;
  margin-bottom: 0.35rem;
}
.keypoints-content ul li::before {
  content: '';
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background-color: #C69A46;
  position: absolute;
  left: -1rem;
  top: 0.55em;
  flex-shrink: 0;
}

/* CTA & boutons : taille de police d'origine conservée (exclus de l'augmentation globale +0.2rem) */
:is(button, a[class*="bg-[#C69A46]"], a[class*="bg-gray-900"], a[class*="bg-[#1a2e2e]"]).text-xs,
:is(button, a[class*="bg-[#C69A46]"], a[class*="bg-gray-900"], a[class*="bg-[#1a2e2e]"]) .text-xs {
  font-size: 0.75rem !important;
  line-height: 1rem !important;
}
:is(button, a[class*="bg-[#C69A46]"], a[class*="bg-gray-900"], a[class*="bg-[#1a2e2e]"]).text-sm,
:is(button, a[class*="bg-[#C69A46]"], a[class*="bg-gray-900"], a[class*="bg-[#1a2e2e]"]) .text-sm {
  font-size: 0.875rem !important;
  line-height: 1.25rem !important;
}
:is(button, a[class*="bg-[#C69A46]"], a[class*="bg-gray-900"], a[class*="bg-[#1a2e2e]"]).text-base,
:is(button, a[class*="bg-[#C69A46]"], a[class*="bg-gray-900"], a[class*="bg-[#1a2e2e]"]) .text-base {
  font-size: 1rem !important;
  line-height: 1.5rem !important;
}
:is(button, a[class*="bg-[#C69A46]"], a[class*="bg-gray-900"], a[class*="bg-[#1a2e2e]"]).text-lg,
:is(button, a[class*="bg-[#C69A46]"], a[class*="bg-gray-900"], a[class*="bg-[#1a2e2e]"]) .text-lg {
  font-size: 1.125rem !important;
  line-height: 1.75rem !important;
}
:is(button, a[class*="bg-[#C69A46]"], a[class*="bg-gray-900"], a[class*="bg-[#1a2e2e]"]).text-xl,
:is(button, a[class*="bg-[#C69A46]"], a[class*="bg-gray-900"], a[class*="bg-[#1a2e2e]"]) .text-xl {
  font-size: 1.25rem !important;
  line-height: 1.75rem !important;
}
:is(button, a[class*="bg-[#C69A46]"], a[class*="bg-gray-900"], a[class*="bg-[#1a2e2e]"]).text-2xl,
:is(button, a[class*="bg-[#C69A46]"], a[class*="bg-gray-900"], a[class*="bg-[#1a2e2e]"]) .text-2xl {
  font-size: 1.5rem !important;
  line-height: 2rem !important;
}
:is(button, a[class*="bg-[#C69A46]"], a[class*="bg-gray-900"], a[class*="bg-[#1a2e2e]"]).text-3xl,
:is(button, a[class*="bg-[#C69A46]"], a[class*="bg-gray-900"], a[class*="bg-[#1a2e2e]"]) .text-3xl {
  font-size: 1.875rem !important;
  line-height: 2.25rem !important;
}

/* Champ anti-spam (honeypot) : masqué sans style inline ni classe utilitaire évidente */
.form-guard {
  position: absolute;
  left: -9999px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
}

/* Page "Ouverture de compte bancaire" : typographie un peu plus compacte sur mobile (~10%) */
@media (max-width: 767px) {
  .compte-bancaire-page.compte-bancaire-page .text-xs {
    font-size: 0.86rem !important;
    line-height: 1.15rem !important;
  }
  .compte-bancaire-page.compte-bancaire-page .text-sm {
    font-size: 0.97rem !important;
    line-height: 1.35rem !important;
  }
  .compte-bancaire-page.compte-bancaire-page .text-base {
    font-size: 1.08rem !important;
    line-height: 1.6rem !important;
  }
  .compte-bancaire-page.compte-bancaire-page .text-lg {
    font-size: 1.19rem !important;
    line-height: 1.8rem !important;
  }
  .compte-bancaire-page.compte-bancaire-page .text-xl {
    font-size: 1.31rem !important;
    line-height: 1.8rem !important;
  }
  .compte-bancaire-page.compte-bancaire-page .text-2xl {
    font-size: 1.53rem !important;
    line-height: 2rem !important;
  }
  .compte-bancaire-page.compte-bancaire-page .text-3xl {
    font-size: 1.87rem !important;
    line-height: 2.25rem !important;
  }
  .compte-bancaire-page.compte-bancaire-page .text-4xl {
    font-size: 2.2rem !important;
    line-height: 2.5rem !important;
  }
  .compte-bancaire-page.compte-bancaire-page .text-5xl {
    font-size: 2.88rem !important;
    line-height: 1.05 !important;
  }
}