/* ============================================================
   Webvance — Grand écran (1440px+)
   Corrige le bug d'affichage sur écrans PC larges :
   - Le container max-width de 1152px est trop étroit, le contenu
     est tassé au centre avec beaucoup de vide à droite/gauche.
   - Les tailles de police plafonnent trop bas et paraissent
     minuscules par rapport au viewport.
   Solution : on monte progressivement --max-w, --pad-x et les
   font-sizes selon la largeur de l'écran.
   ============================================================ */

/* ----- 1440px+ : laptops 14"-16" haute résolution, écrans 1080p -- */
@media (min-width: 1440px) {
  :root {
    --max-w: 1280px;
    --max-w-narrow: 840px;
    --pad-x: 56px;
  }

  .hero-title    { font-size: clamp(2.5rem, 5vw, 4.75rem); }
  .section-title { font-size: clamp(2.25rem, 4.2vw, 4.25rem); }
  .contact-title { font-size: clamp(3.25rem, 6vw, 5rem); }
  .hero-sub      { font-size: clamp(1.05rem, 1.4vw, 1.35rem); }
}

/* ----- 1680px+ : écrans 27" 1440p, MBP 16" Retina ---------------- */
@media (min-width: 1680px) {
  :root {
    --max-w: 1440px;
    --max-w-narrow: 920px;
    --pad-x: 72px;
  }

  .hero-title    { font-size: clamp(3rem, 5vw, 5.5rem); }
  .section-title { font-size: clamp(2.5rem, 4.2vw, 5rem); }
  .contact-title { font-size: clamp(3.5rem, 6vw, 5.75rem); }
  .hero-sub      { font-size: clamp(1.125rem, 1.4vw, 1.5rem); }

  .stat-value    { font-size: clamp(2.25rem, 3.5vw, 3.25rem); }
}

/* ----- 1920px+ : moniteurs Full HD larges, 27" 1440p ------------- */
@media (min-width: 1920px) {
  :root {
    --max-w: 1600px;
    --max-w-narrow: 1000px;
    --pad-x: 96px;
  }

  .hero-title    { font-size: clamp(3.5rem, 5vw, 6.25rem); }
  .section-title { font-size: clamp(2.75rem, 4.2vw, 5.5rem); }
  .contact-title { font-size: clamp(3.75rem, 6vw, 6.5rem); }
  .hero-sub      { font-size: clamp(1.25rem, 1.5vw, 1.625rem); }
  .stat-value    { font-size: clamp(2.5rem, 3.5vw, 3.75rem); }

  /* Padding hero plus généreux pour aérer le contenu */
  .hero { padding-top: 208px; padding-bottom: 96px; }
  .hero-stats { margin-top: 120px; padding-top: 56px; }
}

/* ----- 2400px+ : 4K, écrans ultra-larges ------------------------- */
@media (min-width: 2400px) {
  :root {
    --max-w: 1800px;
    --max-w-narrow: 1100px;
    --pad-x: 128px;
  }

  .hero-title    { font-size: clamp(4rem, 5vw, 7.5rem); }
  .section-title { font-size: clamp(3rem, 4.2vw, 6.5rem); }
  .contact-title { font-size: clamp(4rem, 6vw, 7.5rem); }
  .hero-sub      { font-size: clamp(1.375rem, 1.5vw, 1.875rem); }
  .stat-value    { font-size: clamp(2.75rem, 3.5vw, 4.5rem); }

  .hero         { padding-top: 240px; padding-bottom: 120px; }
  .hero-stats   { margin-top: 144px; padding-top: 64px; }
  .section      { padding-top: 144px; padding-bottom: 144px; }
}