/* ============================================
   Les Traiteurs Engagés - Custom Styles
   ============================================ */

/* --- Font Faces --- */
@font-face {
  font-family: 'Marianne';
  src: url('./assets/fonts/Marianne-Regular.woff2') format('woff2'),
       url('./assets/fonts/Marianne-Regular.woff') format('woff');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Marianne';
  src: url('./assets/fonts/Marianne-Bold.woff2') format('woff2'),
       url('./assets/fonts/Marianne-Bold.woff') format('woff');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Fraunces';
  src: url('./assets/fonts/Fraunces-Variable.ttf') format('truetype');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Fraunces';
  src: url('./assets/fonts/Fraunces-Variable.ttf') format('truetype');
  font-weight: 100 900;
  font-style: italic;
  font-display: swap;
}

/* --- Base --- */
html {
  scroll-behavior: smooth;
}

body {
  font-family: 'Marianne', Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.font-fraunces {
  font-family: 'Fraunces', Georgia, serif;
}

.font-fraunces-italic {
  font-family: 'Fraunces', Georgia, serif;
  font-style: italic;
}

/* --- Section "Comment ça fonctionne" timeline --- */

/*
 * Desktop SVG: 330 × 794
 * Mobile SVG:  265 × 933
 *
 * The SVG is displayed at its natural aspect ratio inside a
 * fixed-width wrapper. Steps are absolutely positioned so that
 * each marker sits right on top of the S-curve at the correct
 * inflection point, matching the Figma mockup.
 */

.steps-container {
  position: relative;
  width: 100%;
  max-width: 800px;
  margin: 0 auto;
}

/* The SVG image — centered, natural ratio */
.steps-path-wrapper {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none;
}

.steps-path-wrapper img {
  display: block;
  height: 100%;
  width: auto;
  position: absolute;
  left: 50%;
  top: 0;
  transform: translateX(-50%);
}

/* The positioning grid — same height as the SVG thanks to aspect-ratio */
.steps-grid {
  position: relative;
  z-index: 1;
  aspect-ratio: 800 / 800;
}

/* --- Step blocks --- */
.step-abs {
  position: absolute;
  z-index: 1;
  display: flex;
  align-items: flex-start;
  gap: 12px;
}

.step-text {
  max-width: 230px;
}

.step-marker {
  width: 104px;
  height: 104px;
  flex-shrink: 0;
  object-fit: contain;
}

@media (min-width: 640px) {
  .step-marker {
    width: 120px;
    height: 120px;
  }
}

/* ============================================================
   Desktop (sm+)
   The SVG occupies roughly the center 42% of the 800px container.
   left edge of SVG ≈ 29%, right edge ≈ 71%.
   Path inflection points (in container %):
     Top-right curve peak:   ~62%, y ~15%
     Left curve trough:      ~36%, y ~42%
     Right curve peak:       ~62%, y ~66%
     Bottom-left:            ~40%, y ~88%
   ============================================================ */
@media (min-width: 640px) {
  .steps-grid {
    aspect-ratio: 800 / 800;
  }

  /* Step 1: top-right curve. Marker on the curve, text to its right */
  .step-1 {
    top: -5%;
    left: 24%;
    flex-direction: row;
  }
  .step-1 .step-text { text-align: left; }

  /* Step 2: left curve. Text to the left, marker on the curve */
  .step-2 {
    top: 26%;
    right: 23%;
    left: auto;
    flex-direction: row-reverse;
  }
  .step-2 .step-text { text-align: right; }

  /* Step 3: right curve (lower). Marker on curve, text to its right */
  .step-3 {
    top: 60%;
    left: 23%;
    flex-direction: row;
  }
  .step-3 .step-text { text-align: left; }

  /* Step 4: bottom-left. Text to the left, marker on the curve */
  .step-4 {
    top: 94%;
    right: 24%;
    left: auto;
    flex-direction: row-reverse;
  }
  .step-4 .step-text { text-align: right; }
}

/* ============================================================
   Mobile (<640px)
   The mobile SVG (265×933) is taller and narrower.
   Steps are stacked vertically with column layout.
   ============================================================ */
@media (max-width: 639px) {
  .steps-path-wrapper {
    display: none;
  }

  .steps-container {
    max-width: 400px;
  }

  .steps-grid {
    aspect-ratio: auto;
    display: flex;
    flex-direction: column;
    gap: 2.5rem;
  }

  .step-abs {
    position: static;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 0.75rem;
  }

  .step-text {
    max-width: 280px;
    text-align: center;
  }
}

/* --- Badge "Lancement" --- */
.badge-launch {
  display: inline-block;
  border: 1.5px solid white;
  border-radius: 8px;
  padding: 0.4rem 1.25rem;
  font-size: 0.875rem;
  font-weight: 400;
  color: white;
  letter-spacing: 0.02em;
}

/* --- Feature preview cards --- */
/* (Now using Tailwind grid directly in HTML) */

/* --- Decorative underline for "Comment ça fonctionne" title --- */
.title-deco {
  position: relative;
  display: inline-block;
}

.title-deco::before {
  content: '';
  display: block;
  width: 50px;
  height: 50px;
  margin: 0 auto 0.5rem;
  rotate: 40deg;
  background: url('./assets/images/deco-brush-strokes.webp') no-repeat center;
  background-size: contain;
}

@media (min-width: 640px) {
  .title-deco::before {
    display: none;
  }
  .title-deco::after {
    content: '';
    display: block;
    position: absolute;
    bottom: 40px;
    right: -60px;
    width: 80px;
    height: 80px;
    rotate: 40deg;
    background: url('./assets/images/deco-brush-strokes.webp') no-repeat center;
    background-size: contain;
  }
}

/* --- Button hover effects (bounce) --- */

.btn-primary,
.btn-outline {
  transition: box-shadow 0.3s ease;
}


/* --- Mobile nav toggle --- */
.nav-mobile-menu {
  display: none;
}

@media (max-width: 768px) {
  .nav-desktop-links {
    display: none;
  }
  .nav-mobile-menu {
    display: block;
  }
}

@media (min-width: 769px) {
  .nav-mobile-menu {
    display: none;
  }
}

/* --- Smooth fade-in on scroll (optional enhancement) --- */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.animate-fade-in {
  animation: fadeInUp 0.6s ease-out forwards;
}