/* ==========================================================================
   mercipourtonnon — global site styles (loaded on every page via theme fonts)
   Ported from the original static site (input.css + index.html inline styles).
   Asset paths are root-relative: public/ is served at the site root.
   ========================================================================== */

/* Fallback fonts (Archivo Black for Bely Display, Space Grotesk for Neue Machina) */
@import url('https://fonts.googleapis.com/css2?family=Archivo+Black&family=Space+Grotesk:wght@300;400;500;600;700;800&display=swap');

/* Custom Fonts */
@font-face {
  font-family: "Bely Display";
  src: url("/fonts/BelyDisplay/BelyDisplay-Regular.eot");
  src: url("/fonts/BelyDisplay/BelyDisplay-Regular.eot?#iefix") format("embedded-opentype"),
       url("/fonts/BelyDisplay/BelyDisplay-Regular.woff2") format("woff2"),
       url("/fonts/BelyDisplay/BelyDisplay-Regular.woff") format("woff"),
       url("/fonts/BelyDisplay/BelyDisplay-Regular.svg#BelyDisplay") format("svg");
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Neue Machina";
  src: url("/fonts/NeueMachina/NeueMachina-Regular.otf") format("opentype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Neue Machina";
  src: url("/fonts/NeueMachina/NeueMachina-Light.otf") format("opentype");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Neue Machina";
  src: url("/fonts/NeueMachina/NeueMachina-Ultrabold.otf") format("opentype");
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}

/* Smooth anchor scrolling with offset for the fixed nav */
html {
  scroll-behavior: smooth;
}

section[id] {
  scroll-margin-top: 6rem;
}

/* Body text accessibility */
body {
  line-height: 1.7;
  color: #111827;
}

p {
  line-height: 1.7;
}

/* Display font helper (theme applies it to h1-h6; use this for spans/links) */
.title-font {
  font-family: "Bely Display", "Archivo Black", cursive;
  letter-spacing: 0.05em;
  text-transform: lowercase;
}

.hero-title {
  animation: fadeInUp 0.8s ease-out;
  line-height: 0.85;
}

.fade-in {
  animation: fadeIn 1s ease-out;
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

.gradient-text {
  background: linear-gradient(135deg, #ffaf00 0%, #f5004f 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(40px);
  opacity: 0.3;
  animation: float 20s infinite;
}

@keyframes float {
  0%,
  100% {
    transform: translate(0, 0) scale(1);
  }
  33% {
    transform: translate(30px, -30px) scale(1.1);
  }
  66% {
    transform: translate(-20px, 20px) scale(0.9);
  }
}

/* Team Cards Flip Effect (pure CSS hover) */
.perspective-1000 {
  perspective: 1000px;
}

.preserve-3d {
  transform-style: preserve-3d;
}

.backface-hidden {
  backface-visibility: hidden;
}

.rotate-y-180 {
  transform: rotateY(180deg);
}

.team-card:hover .team-card-inner,
.team-card.flipped .team-card-inner {
  transform: rotateY(180deg);
}

/* Wall of Love - Masonry Layout */
.wall-of-love {
  columns: 1;
  column-gap: 1.5rem;
}

@media (min-width: 640px) {
  .wall-of-love {
    columns: 2;
  }
}

@media (min-width: 1024px) {
  .wall-of-love {
    columns: 3;
  }
}

/* Testimonial Cards - masonry flow (scroll reveal handled by Sovrium
   interactions.scroll / scroll-animation.js) */
.testimonial-card {
  break-inside: avoid;
  margin-bottom: 1.5rem;
}

.flex-1 .testimonial-card {
  margin-bottom: 0;
}

/* Scroll-spy active states — these classes are added at runtime by site.js,
   so the Tailwind scanner never sees them; define them here explicitly. */
.\!text-orange {
  color: #ffaf00 !important;
}
.\!bg-orange-light {
  background-color: #fff8e6 !important;
}
.nav-link.border-b-2 {
  border-bottom-width: 2px;
}
.mobile-nav-link.border-l-4 {
  border-left-width: 4px;
}
.nav-link.border-orange,
.mobile-nav-link.border-orange {
  border-color: #ffaf00;
}

/* "Suis-nous" social buttons (original used inline JS hover handlers) */
.social-instagram {
  background: linear-gradient(135deg, #9333ea 0%, #ec4899 100%);
}
.social-instagram:hover {
  background: linear-gradient(135deg, #7c2cc4 0%, #d1347d 100%);
}
.social-facebook {
  background: #2563eb;
}
.social-facebook:hover {
  background: #1d4ed8;
}
.social-linkedin {
  background: #1e40af;
}
.social-linkedin:hover {
  background: #1e3a8a;
}

/* Brevo form integration — override sib-styles.css spacing */
.sib-form {
  font-family: inherit !important;
  line-height: inherit !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding: 2rem !important;
}
@media (min-width: 640px) {
  .sib-form {
    padding: 2.5rem !important;
  }
}
.sib-form #sib-container,
.sib-form .sib-form-container {
  padding: 0 !important;
}
.sib-form #sib-container {
  background-color: transparent !important;
  border: none !important;
}
.sib-form form .flex.flex-col {
  gap: 1.5rem !important;
}
.sib-form .sib-input,
.sib-form .sib-form-block {
  padding-left: 0 !important;
  padding-right: 0 !important;
  margin-bottom: 0 !important;
}
.sib-form .entry__label {
  margin-bottom: 4px !important;
  font-family: inherit !important;
}
.sib-form .input {
  padding: 12px 16px !important;
  height: auto !important;
  font-family: inherit !important;
  background-color: white !important;
  border: none !important;
  border-radius: 0.5rem !important;
}
.sib-form .entry__field {
  border: 1px solid #e5e7eb !important;
  border-radius: 0.5rem !important;
  overflow: hidden;
}
.sib-form-message-panel {
  display: none;
}
.sib-form-message-panel--active {
  display: block !important;
}
.sib-form-block__button-disabled {
  opacity: 0.6;
  cursor: not-allowed;
}
.sib-hide-loader-icon {
  display: none;
}
.input--hidden {
  display: none;
}
.entry_errored .input {
  border-color: #f5004f !important;
}
.entry__error--primary {
  display: none;
}
.entry_errored .entry__error--primary {
  display: block;
}

/* FAQ accordion — Sovrium's `type: button` ships a full design-system style
   (border, fixed height, centered content, shadow). The page YAML can't
   reliably override it (utility classes coexist rather than merge, and
   `!`-important utilities aren't emitted by the scanner), so reset the
   question trigger here and keep each question + answer as one coherent card. */
.faq-q {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 1rem;
  width: 100%;
  text-align: left;
  padding: 1.25rem !important;
  border: 0 !important;
  height: auto !important;
  background: transparent !important;
  box-shadow: none !important;
  transform: none !important;
  border-radius: 0 !important;
  font-weight: 700;
  font-size: 1.125rem;
  line-height: 1.6;
  color: #130077; /* bleu-fonce */
  cursor: pointer;
}
.faq-q:hover {
  background: transparent !important;
  box-shadow: none !important;
  transform: none !important;
}
.faq-chevron {
  color: #f5004f; /* pourpre */
  flex-shrink: 0;
  transition: transform 0.2s ease;
}
/* The toggle clears the answer's inline `display:none` when open, so an open
   card is one whose `.faq-answer` no longer carries a `display:none` style. */
.faq-card:has(.faq-answer:not([style*="none"])) .faq-chevron {
  transform: rotate(180deg);
}