/*--------------------------------------------------------------
# TYPOGRAPHIE FLUIDE & RESPONSIVE — YouDrive
# Utilise clamp(min, fluide, max) pour que les textes
# s'adaptent automatiquement à TOUTES les tailles d'écran
# sans avoir besoin de dizaines de media queries.
--------------------------------------------------------------*/

/* ============================================================
   1. BASE — body & paragraphes
   ============================================================ */
body {
  font-size: clamp(0.875rem, 0.82rem + 0.28vw, 1rem);
  line-height: 1.65;
}

/* ============================================================
   2. TITRES GLOBAUX — h1 → h6
   ============================================================ */
h1 { font-size: clamp(1.6rem,  1.1rem + 2.5vw, 3rem);   }
h2 { font-size: clamp(1.3rem,  0.9rem + 2vw,   2rem);   }
h3 { font-size: clamp(1.1rem,  0.85rem + 1.3vw, 1.75rem); }
h4 { font-size: clamp(1rem,    0.88rem + 0.6vw, 1.25rem); }
h5 { font-size: clamp(0.9rem,  0.85rem + 0.25vw, 1rem); }
h6 { font-size: clamp(0.85rem, 0.82rem + 0.15vw, 0.95rem); }

/* ============================================================
   3. HERO SECTION
   ============================================================ */
/* Padding-top géré dans la section 4 avec !important */

/* Grand titre "Ou Réservez en ligne" */
.hero .hero-content h1 {
  font-size: clamp(1.7rem, 1.2rem + 2.6vw, 3.5rem);
  line-height: 1.2;
}

/* Sous-titre "Votre Chauffeur par excellence…" */
.hero .hero-content h3 {
  font-size: clamp(0.95rem, 0.75rem + 1vw, 1.35rem);
  line-height: 1.5;
  font-weight: 500;
}

/* Badge "YouDrive" */
.hero .company-badge {
  font-size: clamp(0.8rem, 0.72rem + 0.4vw, 0.95rem);
}

/* Stats row */
.hero .stat-item .stat-content h4 {
  font-size: clamp(0.9rem, 0.78rem + 0.6vw, 1.1rem);
}
.hero .stat-item .stat-content p {
  font-size: clamp(0.78rem, 0.72rem + 0.3vw, 0.875rem);
}

@media (max-width: 575px) {
  .hero .stat-item {
    padding: 1rem;
    gap: 0.75rem;
  }
  .hero .stat-item .stat-icon {
    width: 48px;
    height: 48px;
  }
  .hero .stat-item .stat-icon i {
    font-size: 1.1rem;
  }
  .hero .stats-row {
    margin-top: 2.5rem;
  }
  /* Boutons hero côte à côte → colonne sur très petit écran */
  .hero .hero-buttons {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
  }
  .hero .hero-buttons .btn {
    width: 100%;
    text-align: center;
    margin: 0 !important;
  }
}

/* ============================================================
   4. SECTION TITLES
   ============================================================ */

/* Toutes les sections SAUF le hero (qui a son propre padding-top pour passer sous le header fixe) */
section:not(.hero),
.section:not(.hero) {
  padding: clamp(40px, 6vw, 60px) 0;
}

/* Hero : padding-top fixe à 160px minimum, jamais écrasé */
.hero {
  padding-top: 160px !important;
  padding-bottom: clamp(40px, 6vw, 60px);
}

.section-title {
  padding-bottom: clamp(30px, 5vw, 60px);
}

.section-title h2 {
  font-size: clamp(1.35rem, 1rem + 1.7vw, 2rem);
  margin-bottom: 12px;
  padding-bottom: 16px;
}

.section-title p {
  font-size: clamp(0.875rem, 0.82rem + 0.28vw, 1rem);
}

/* ============================================================
   5. ABOUT SECTION
   ============================================================ */
.about .about-title {
  font-size: clamp(1.25rem, 0.9rem + 1.75vw, 1.9rem);
}

.about .about-description {
  font-size: clamp(0.875rem, 0.82rem + 0.28vw, 1rem);
}

.about .feature-list li {
  font-size: clamp(0.85rem, 0.8rem + 0.25vw, 1rem);
}

/* Badge experience — trop grand sur mobile */
.about .image-wrapper .experience-badge h3 {
  font-size: clamp(1.6rem, 1.2rem + 2vw, 2.5rem);
}

@media (max-width: 575px) {
  .about .image-wrapper .experience-badge {
    min-width: unset;
    width: 100%;
    padding: 1rem;
  }
  .about .info-wrapper .row {
    flex-direction: column;
    gap: 1rem;
  }
}

/* ============================================================
   6. FEATURES (Véhicules)
   ============================================================ */
.features .tab-pane h3 {
  font-size: clamp(1.1rem, 0.8rem + 1.5vw, 2rem);
}

.features .tab-pane p,
.features .tab-pane li {
  font-size: clamp(0.875rem, 0.82rem + 0.28vw, 1rem);
}

/* Onglets — trop gros sur mobile */
.features .nav-link h4 {
  font-size: clamp(0.75rem, 0.65rem + 0.5vw, 0.95rem);
}

@media (max-width: 480px) {
  .features .nav-tabs {
    flex-wrap: wrap;
    border-radius: 0.75rem;
    padding: 4px;
    gap: 4px;
  }
  .features .nav-item {
    flex: 1;
    padding: 0;
  }
  .features .nav-link {
    padding: 8px 10px;
    justify-content: center;
  }
}

/* ============================================================
   7. SECTION RÉSERVATION
   ============================================================ */
/* Titre principal */
#reserver h2 {
  font-size: clamp(1.3rem, 0.9rem + 2vw, 2.2rem) !important;
}

/* Stepper — labels et cercles sur mobile */
@media (max-width: 480px) {
  .resa-stepper {
    gap: 2px;
  }
  .resa-step-circle {
    width: 36px;
    height: 36px;
    font-size: 0.9rem;
  }
  .resa-step-label {
    font-size: 0.65rem;
  }
  .resa-step-line {
    max-width: 40px;
  }
  .resa-card {
    padding: 1.25rem 1rem;
  }
  .resa-panel-title {
    font-size: 1rem;
  }
  .resa-price-value {
    font-size: clamp(1.6rem, 1.2rem + 2vw, 2.5rem);
  }
  .resa-summary-row {
    flex-direction: column;
    align-items: flex-start;
  }
  .resa-summary-arrow { display: none; }
  .resa-info-row {
    gap: 0.75rem;
  }
}

.call-to-action .container {
  padding: clamp(2rem, 5vw, 4rem) clamp(1rem, 4vw, 2rem);
}

/* ============================================================
   8. TESTIMONIALS
   ============================================================ */
.testimonial-item h3 {
  font-size: clamp(1rem, 0.88rem + 0.6vw, 1.2rem);
}

.testimonial-item p {
  font-size: clamp(0.875rem, 0.82rem + 0.28vw, 1rem);
}

/* ============================================================
   9. CONTACT SECTION
   ============================================================ */
.contact .info-box h3 {
  font-size: clamp(1.1rem, 0.9rem + 1vw, 1.5rem);
}

.contact .info-item h4 {
  font-size: clamp(0.9rem, 0.82rem + 0.4vw, 1.05rem);
}

.contact .info-item p {
  font-size: clamp(0.8rem, 0.76rem + 0.2vw, 0.9rem);
}

.contact .contact-form h3 {
  font-size: clamp(1.1rem, 0.9rem + 1vw, 1.5rem);
}

/* ============================================================
   10. NAVBAR
   ============================================================ */
.header .sitename {
  font-size: clamp(1.2rem, 1rem + 1vw, 1.6rem);
}

.navmenu a {
  font-size: clamp(0.875rem, 0.82rem + 0.28vw, 0.95rem);
}

/* ============================================================
   11. FOOTER
   ============================================================ */
.footer .copyright {
  font-size: clamp(0.78rem, 0.72rem + 0.3vw, 0.875rem);
  text-align: center;
  padding: 16px 0;
}

/* ============================================================
   12. CORRECTIONS GLOBALES MOBILE
   ============================================================ */
@media (max-width: 575px) {
  /* Éviter tout débordement horizontal */
  section,
  .section {
    overflow-x: hidden;
  }

  /* Inputs & selects dans les formulaires */
  .form-control,
  .form-select,
  .resa-input {
    font-size: 1rem; /* évite le zoom auto sur iOS (< 16px = zoom) */
  }

  /* Boutons pleine largeur */
  .btn-getstarted {
    font-size: 0.85rem;
    padding: 8px 18px;
  }

  /* Contact form */
  .contact-form .btn {
    width: 100%;
  }

  /* Testimonials : 1 colonne */
  #testimonials .row.g-5 {
    --bs-gutter-y: 1.5rem;
  }
}

@media (max-width: 400px) {
  /* Très petits écrans (iPhone SE, etc.) */
  .container,
  .container-fluid {
    padding-left: 14px;
    padding-right: 14px;
  }

  .resa-mini-recap {
    font-size: 0.78rem;
  }
}