/* ============================================
   RESPONSIVE DESIGN - Hervé Vidal Magnétisme
   Breakpoints alignés sur Bootstrap 5
   xl >=1200 | lg >=992 | md >=768 | sm >=576
   ============================================ */

/* ===== LARGE DESKTOP (≥1200px) ===== */
@media (min-width:1200px){
  .hero-content h1{font-size:4.6rem}
  .py-6{padding-top:7rem;padding-bottom:7rem}
}

/* ===== DESKTOP (992px - 1199px) ===== */
@media (max-width:1199.98px){
  .hero-content h1{font-size:3.6rem}
  .section-title{font-size:2.4rem}
}

/* ===== TABLET (768px - 991px) ===== */
@media (max-width:991.98px){
  .py-6{padding-top:4.5rem;padding-bottom:4.5rem}
  .hero-bg{min-height:90vh;padding:7rem 1rem 4rem}
  .hero-content h1{font-size:2.8rem}
  .hero-content .lead{font-size:1.05rem}
  .hero-stats .num{font-size:2rem}
  .section-title{font-size:2.1rem}
  .quote-red{font-size:1.15rem}
  .t-num{width:50px;height:50px;font-size:1.3rem}
  .timeline::before{left:24px}
  .navbar-hv{padding:.7rem 0 !important;}
  .navbar-hv .navbar-collapse{
    background:rgba(11,11,11,.96);
    padding:1rem;margin-top:.7rem;border-radius:12px;
  }
  .navbar-hv .navbar-cta{
    display:block;width:100%;margin:.8rem 0 0;text-align:center;
  }
  .cta-bg{background-attachment:scroll;padding:5rem 1rem}
}

/* ===== MOBILE LARGE (≤767px) ===== */
@media (max-width:767.98px){
  body{line-height:1.6 !important;}
  .py-6{padding-top:3.5rem;padding-bottom:3.5rem;}

  /* Hero */
  .hero-bg{min-height:80vh;padding:6rem 1rem 3rem}
  .hero-content h1{font-size:2.2rem;line-height:1.1}
  .hero-content .lead{font-size:1rem}
  .eyebrow{font-size:.7rem;letter-spacing:.2em}
  .hero-stats{margin-top:2rem}
  .hero-stats .col{margin-bottom:1.2rem}
  .hero-stats .num{font-size:1.8rem}
  .hero-stats .lbl{font-size:.7rem}

  /* Buttons full width sur mobile */
  .btn-hv,.btn-outline-light{
    display:block !important;width:100%;margin-bottom:.7rem;
    padding:.8rem 1.4rem !important;font-size:.95rem !important;
  }

  /* Sections */
  .section-title{font-size:1.7rem;margin-bottom:1.2rem}
  h2,h3{font-size:1.5rem}
  h4{font-size:1.2rem}

  /* Mini cards & modalités */
  .mini-card,.modalite{padding:1.5rem 1.2rem}
  .mini-card i,.modalite i{font-size:1.7rem}

  .capable-item{padding:1rem}

  /* Quote */
  .quote-red{font-size:1.05rem;padding:.8rem 1rem}

  /* Timeline */
  .timeline::before{left:22px}
  .t-step{gap:1rem;margin-bottom:2rem}
  .t-num{width:44px;height:44px;font-size:1.1rem;box-shadow:0 0 0 4px rgba(200,16,46,.15)}
  .t-body h4{font-size:1.15rem}

  /* CTA */
  .cta-bg{padding:4rem 1rem;background-attachment:scroll}

  /* Footer */
  .footer-hv h6{margin-top:1.5rem}

  /* Images responsive */
  img{max-width:100%;height:auto}
}

/* ===== MOBILE SMALL (≤480px) ===== */
@media (max-width:480px){
  .hero-bg{min-height:75vh;padding:5rem .8rem 2.5rem}
  .hero-content h1{font-size:1.85rem}
  .hero-content .lead{font-size:.95rem}
  .section-title{font-size:1.5rem}
  .navbar-hv .navbar-brand{font-size:1.05rem}
  .brand-mark{width:30px;height:30px;font-size:.75rem}
  .mini-card,.modalite{padding:1.25rem 1rem}
  .t-num{width:40px;height:40px;font-size:1rem}
  .timeline::before{left:20px}
}

/* ===== ORIENTATION PAYSAGE MOBILE ===== */
@media (max-width:900px) and (orientation:landscape){
  .hero-bg{min-height:120vh;padding:5rem 1rem 3rem}
}

/* ===== ACCESSIBILITÉ : préfère réduire les animations ===== */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.01ms!important;
    transition-duration:.01ms!important;
  }
  .btn-hv:hover,.mini-card:hover,.modalite:hover,.capable-item:hover{transform:none}
}

/* ===== PRINT ===== */
@media print{
  .navbar-hv,.cta-bg,.footer-hv,.btn-hv,.btn-outline-light{display:none!important}
  .hero-bg,.section-dark{background:#fff!important;color:#000!important;min-height:auto}
  .hero-overlay,.cta-overlay{display:none}
  *{color:#000!important}
}

/* ============ HERO E-LEARNING responsive ============ */
@media (max-width:991.98px){
  .hero-elearning{min-height:auto;padding:7rem 1rem 3.5rem;text-align:center}
  .hero-elearning .hero-trust{justify-content:center}
  .hero-elearning .d-flex{justify-content:center}
  .hero-card{margin-top:2.5rem;text-align:left}
  .hero-elearning-overlay{background:linear-gradient(180deg,rgba(10,10,10,.92) 0%,rgba(10,10,10,.85) 100%)}
}
@media (max-width:575.98px){
  .hero-elearning{padding:6rem .9rem 2.5rem}
  .hero-card{padding:1.4rem}
  .hero-card-header h3{font-size:1.25rem}
  .hero-card-list li{padding:.7rem 0}
  .hero-card-list li i{font-size:1.2rem}
}
@media screen and (min-width: 320px) and (max-width: 575px){
  .row {
        margin: 0 auto !important;
    }
    .row>* {
        padding: 0 !important;
    }
}