/* ============================================
   FONTS
   ============================================ */

@font-face {
  font-family: 'Palmore';
  src: url('/assets/fonts/palmore-light.woff2') format('woff2'),
       url('/assets/fonts/palmore-light.woff') format('woff');
  font-style: normal;
  font-display: swap;
}

/* ============================================
   VARIABLES
   ============================================ */

:root {
  /* Colors */
  --color-beige: #f9efea;
  --color-gold: #f4b822;
  --color-green: #0f4a2c;
--color-grey: rgba(20, 19, 19, 0.5);
  --color-blue: #bacad4;
  
  /* Fonts */
  --font-heading: 'Palmore', Georgia, serif;
  --font-body: 'bicyclette', sans-serif;
  
  /* Palmore sizes */
  --text-xl: 7rem;
  --text-lg: 4rem;
  --text-md: 1.5rem;
  
  /* Body sizes */
  --text-sm: 1rem;
  --text-xs: 0.85rem;
  
  /* Line heights */
  --lh-xl: 0.7;
  --lh-lg: 1;
  --lh-md: 1.2;
  --lh-sm: 1.6;
  --lh-xs: 1.5;
  
  /* Letter spacing */
  --ls-xl: -0.01em;
  --ls-lg: 0.05em;
  --ls-md: 0.05em;
  --ls-sm: 0em;
  --ls-xs: 0em;
  
  /* Transitions */
  --transition-fast: 0.2s ease;
  --transition-medium: 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  --transition-slow: 0.6s cubic-bezier(0.4, 0, 0.2, 1);
  
  /* Layout */
  --header-height: 130px;
  --section-max-height: calc(100vh - var(--header-height));
}

/* ============================================
   RESET & BASE
   ============================================ */

* { margin: 0; padding: 0; box-sizing: border-box; }

h1, h2, h3, h4, h5, h6 { font-weight: normal; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: var(--header-height);
  /* Enable touch scrolling for mobile */
  -webkit-overflow-scrolling: touch;
}

body {
  font-family: var(--font-heading);
  font-size: var(--text-md);
  line-height: var(--lh-md);
  letter-spacing: var(--ls-md);
  color: var(--color-grey);
  background: var(--color-beige);
  text-transform: uppercase;
  /* Enable touch scrolling on mobile */
  -webkit-overflow-scrolling: touch;
}

img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }

/* ============================================
   ESPACEMENT GLOBAL
   ============================================ */

/* Sections pleine largeur */
.programme,
.faq-section,
.contact-section {
  padding: 5rem 2rem;
}

/* Titres de sections */
h2 {
  margin-bottom: 2rem;
}

/* Media queries espacement */
@media (max-width: 768px) {
  .programme,
  .faq-section,
  .contact-section {
    padding: 4rem 1.5rem;
  }
}

/* ============================================
   TYPOGRAPHIE PALMORE
   ============================================ */

.text-xl {
  font-size: var(--text-xl);
  line-height: var(--lh-xl);
  letter-spacing: var(--ls-xl);
}

.text-lg {
  font-size: var(--text-lg);
  line-height: var(--lh-lg);
  letter-spacing: var(--ls-lg);
}

.text-md {
  font-size: var(--text-md);
  line-height: var(--lh-md);
  letter-spacing: var(--ls-md);
}

/* ============================================
   TYPOGRAPHIE BICYCLETTE
   ============================================ */

.text-sm,
.hero-text,
.programme-location,
.transport-content,
.split-text,
.gallery-text,
.contact-address,
.faq-answer,
.faq-panel-answer,
.faq-intro,
.faq-panel-intro,
.rsvp-intro,
.field input,
.field select,
.field textarea,
.field label,
.btn-link,
.rsvp-note {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  line-height: var(--lh-sm);
  letter-spacing: var(--ls-sm);
  text-transform: none;
}

.text-xs,
.footer-container {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  line-height: var(--lh-xs);
  letter-spacing: var(--ls-xs);
  text-transform: none;
}

/* ============================================
   ANIMATIONS
   ============================================ */

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

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

@keyframes slideInRight {
  from { opacity: 0; transform: translateX(50px); }
  to { opacity: 1; transform: translateX(0); }
}

/* ============================================
   RESPONSIVE
   ============================================ */

@media (max-width: 768px) {
  :root {
    --header-height: 110px;
    --text-xl: 3rem;
    --text-lg: 1.8rem;
    --text-md: 1.1rem;
    --text-sm: 0.9rem;
    --text-xs: 0.8rem;
  }
}