/* ================================================================
   RUSH SCHOOL — RESPONSIVE CSS v1.0
   Mobile-first approach
   Breakpoints :
     xs  : 0–479px      (petits mobiles)
     sm  : 480–767px    (mobiles normaux / grands)
     md  : 768–1023px   (tablette portrait)
     lg  : 1024–1279px  (tablette paysage / petit desktop)
     xl  : 1280px+      (desktop)
   ================================================================ */

/* ================================================================
   1. BASE MOBILE — ajustements généraux
   ================================================================ */

/* Container padding serré sur mobile */
.container {
  padding-left: 1.25rem;
  padding-right: 1.25rem;
}

/* Titres : taille minimale garantie */
h1, h2, h3 { overflow-wrap: break-word; }

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

/* ================================================================
   2. HEADER — mobile first
   ================================================================ */

/* Mobile : logo petit, burger visible, nav cachée, CTA visible mais compact */
.header-bar {
  height: 3.75rem;
  border-radius: 0.875rem;
}
.header-logo { padding: 0 1rem; }
.header-logo img { height: 1.75rem; }
.header-nav { display: none; }
.header-burger { display: flex; width: 3.75rem; }
.header-cta {
  display: flex;
  padding: 0 1rem;
  font-size: 0.75rem;
  letter-spacing: 0.03em;
}

/* Tablette ≥ 768px */
@media (min-width: 768px) {
  .header-bar { height: 4.5rem; border-radius: 1rem; }
  .header-logo { padding: 0 1.5rem; }
  .header-logo img { height: 2.25rem; }
  .header-burger { width: 4.5rem; }
  .header-cta { padding: 0 2rem; font-size: 0.8125rem; }
}

/* Desktop ≥ 1024px : nav visible, burger caché */
@media (min-width: 1024px) {
  .header-bar { height: 5rem; }
  .header-nav { display: flex; }
  .header-burger { display: none !important; }
  .header-logo { padding: 0 1.75rem; }
  .header-logo img { height: 2.5rem; }
  .header-cta { padding: 0 2.5rem; font-size: 0.875rem; }
}

/* Header scroll shrink */
.rush-header.is-scrolled .header-bar {
  box-shadow: 0 4px 24px rgba(0,0,0,0.18);
}

/* ================================================================
   3. MEGA MENU — mobile first
   ================================================================ */
.mega-menu-inner { padding: 1.5rem 1.25rem 3rem; }
.mega-menu-header { margin-bottom: 2.5rem; }
.mega-menu-logo img { height: 1.875rem; }

.mega-menu-nav {
  grid-template-columns: 1fr;
  gap: 0.75rem;
}
.mega-menu-link .label { font-size: 1.5rem; }
.mega-menu-info {
  grid-template-columns: 1fr;
  gap: 1.25rem;
  margin-top: 2.5rem;
}

/* Tablette ≥ 768px */
@media (min-width: 768px) {
  .mega-menu-inner { padding: 2rem 2rem 4rem; }
  .mega-menu-header { margin-bottom: 3rem; }
  .mega-menu-nav { grid-template-columns: repeat(2, 1fr); gap: 1rem 2.5rem; }
  .mega-menu-link .label { font-size: 2rem; }
  .mega-menu-info { grid-template-columns: repeat(3, 1fr); margin-top: 3rem; }
}

/* Desktop ≥ 1024px */
@media (min-width: 1024px) {
  .mega-menu-inner { padding: 2.5rem 3rem 5rem; }
  .mega-menu-header { margin-bottom: 4rem; }
  .mega-menu-link .label { font-size: 2.5rem; }
}

/* ================================================================
   4. HERO — mobile first
   ================================================================ */
.rush-hero { min-height: 100svh; }

.hero-content {
  padding: 8rem 0 4rem;
}

.hero-eyebrow-1,
.hero-eyebrow-2 {
  font-size: 0.65rem;
  letter-spacing: 0.18em;
}
.hero-eyebrow-1 { margin-bottom: 1.25rem; }
.hero-eyebrow-2 { margin-bottom: 1rem; }

.hero-title {
  font-size: clamp(2.5rem, 10vw, 4rem);
  margin-bottom: 1.25rem;
}

.hero-desc {
  font-size: 1rem;
  margin-bottom: 2rem;
  max-width: 28rem;
}

.hero-actions {
  flex-direction: column;
  align-items: flex-start;
  gap: 0.875rem;
}
.hero-actions .btn { width: 100%; justify-content: center; }

/* Tablette ≥ 640px : boutons côte à côte */
@media (min-width: 640px) {
  .hero-actions { flex-direction: row; }
  .hero-actions .btn { width: auto; }
  .hero-title { font-size: clamp(3rem, 8vw, 5rem); }
  .hero-desc { font-size: 1.0625rem; }
}

/* Tablette ≥ 768px */
@media (min-width: 768px) {
  .hero-content { padding: 10rem 0 5rem; }
  .hero-title { font-size: clamp(3.5rem, 7vw, 5.5rem); }
  .hero-desc { font-size: 1.125rem; max-width: 34rem; }
}

/* Desktop ≥ 1024px */
@media (min-width: 1024px) {
  .hero-content { padding: 12rem 0 6rem; }
  .hero-title { font-size: clamp(4rem, 6vw, 6rem); }
  .hero-desc { font-size: 1.25rem; max-width: 38rem; }
}

/* ================================================================
   5. BANDEAU RENTRÉE 2026 — mobile first
   ================================================================ */
.rentre-banner-inner {
  flex-direction: column;
  align-items: flex-start;
  gap: 0.875rem;
  padding: 1rem 0;
}
.rentre-text { font-size: 0.8rem; }
.rentre-cta { font-size: 0.75rem; padding: 0.45rem 1rem; }

/* ≥ 640px : tout sur une ligne */
@media (min-width: 640px) {
  .rentre-banner-inner {
    flex-direction: row;
    align-items: center;
    padding: 0.9rem 0;
  }
  .rentre-text { font-size: 0.85rem; }
}

/* ================================================================
   6. FORMATIONS — mobile first
   ================================================================ */
.rush-formations { padding: 4rem 0 5rem; }

.formations-grid {
  grid-template-columns: 1fr;
  gap: 1.25rem;
  margin-bottom: 2.5rem;
}
.formation-card { padding: 1.5rem; }
.formation-code { font-size: 1.5rem; }
.formation-name { font-size: 1rem; }

/* Tablette ≥ 640px : 2 colonnes */
@media (min-width: 640px) {
  .formations-grid { grid-template-columns: repeat(2, 1fr); gap: 1.5rem; }
  .formation-card { padding: 2rem; }
}

/* Desktop ≥ 1024px */
@media (min-width: 1024px) {
  .rush-formations { padding: 6rem 0 8rem; }
  .formations-grid { gap: 2rem; margin-bottom: 4rem; }
  .formation-card { padding: 2.5rem; }
  .formation-code { font-size: 1.75rem; }
}

/* ================================================================
   7. TÉMOIGNAGES — mobile first
   ================================================================ */
.rush-testimonials { padding: 4rem 0 5rem; }

.testimonials-grid {
  grid-template-columns: 1fr;
  gap: 1.25rem;
}
.testimonial-card { padding: 1.5rem; }
.testimonial-text { font-size: 1rem; }

/* Tablette ≥ 768px : 2 colonnes */
@media (min-width: 768px) {
  .testimonials-grid { grid-template-columns: repeat(2, 1fr); gap: 1.5rem; }
}

/* Desktop ≥ 1024px : 3 colonnes */
@media (min-width: 1024px) {
  .rush-testimonials { padding: 6rem 0 8rem; }
  .testimonials-grid { grid-template-columns: repeat(3, 1fr); gap: 2rem; }
  .testimonial-card { padding: 2rem; }
}

/* ================================================================
   8. FEATURES — mobile first
   ================================================================ */
.rush-features { padding: 4rem 0 5rem; }

.features-grid {
  grid-template-columns: 1fr;
  gap: 1rem;
}
.feature-card { padding: 1.5rem; }
.feature-title { font-size: 1rem; }

/* Tablette ≥ 580px : 2 colonnes */
@media (min-width: 580px) {
  .features-grid { grid-template-columns: repeat(2, 1fr); gap: 1.25rem; }
}

/* Desktop ≥ 1024px : 3 colonnes */
@media (min-width: 1024px) {
  .rush-features { padding: 6rem 0 8rem; }
  .features-grid { grid-template-columns: repeat(3, 1fr); gap: 1.5rem; }
  .feature-card { padding: 2rem; }
  .feature-title { font-size: 1.125rem; }
}

/* ================================================================
   9. PARTENAIRES — mobile first
   ================================================================ */
.rush-partners { padding: 2.5rem 0 3rem; }
.partners-header {
  flex-direction: column;
  gap: 0.25rem;
  margin-bottom: 1.25rem;
}
.partner-card { width: 7rem; height: 3.5rem; }

@media (min-width: 640px) {
  .partners-header {
    flex-direction: row;
    align-items: flex-end;
    justify-content: space-between;
    margin-bottom: 1.5rem;
  }
}

@media (min-width: 1024px) {
  .rush-partners { padding: 3rem 0 3.5rem; }
  .partner-card { width: 8rem; height: 4rem; }
}

/* ================================================================
   10. CTA SECTION — mobile first
   ================================================================ */
.rush-cta { padding: 4rem 0 5rem; }

.cta-title { font-size: clamp(1.875rem, 6vw, 3rem); }
.cta-desc { font-size: 1rem; }

.cta-actions {
  flex-direction: column;
  align-items: center;
  gap: 0.875rem;
}
.cta-actions .btn { width: 100%; max-width: 20rem; justify-content: center; }

@media (min-width: 480px) {
  .cta-actions {
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
  }
  .cta-actions .btn { width: auto; max-width: none; }
}

@media (min-width: 1024px) {
  .rush-cta { padding: 6rem 0 8rem; }
  .cta-title { font-size: clamp(2.25rem, 5vw, 4rem); }
  .cta-desc { font-size: 1.125rem; }
}

/* ================================================================
   11. FOOTER — mobile first
   ================================================================ */
.rush-footer { }

.footer-grid {
  grid-template-columns: 1fr;
  gap: 2rem;
  padding: 3rem 0;
}
.footer-logo-wrap img { height: 2.5rem; }

.footer-bottom {
  flex-direction: column;
  text-align: center;
  gap: 0.75rem;
  padding: 1.25rem 0;
}
.footer-bottom-links { gap: 1rem; }

/* Tablette ≥ 640px : 2 colonnes */
@media (min-width: 640px) {
  .footer-grid { grid-template-columns: repeat(2, 1fr); gap: 2.5rem; }
  .footer-bottom { flex-direction: row; justify-content: space-between; text-align: left; }
}

/* Desktop ≥ 1024px : 4 colonnes */
@media (min-width: 1024px) {
  .footer-grid { grid-template-columns: 2fr 1fr 1fr 1fr; gap: 3rem; padding: 4rem 0; }
  .footer-logo-wrap img { height: 3rem; }
}

/* ================================================================
   12. SECTIONS GÉNÉRALES (inner pages) — mobile first
   ================================================================ */
.page-section { padding: 4rem 0; }
.page-hero { padding: 8rem 0 4rem; }

.page-hero-title {
  font-size: clamp(2rem, 7vw, 3.5rem);
  max-width: 100%;
}
.page-hero-desc { font-size: 1rem; }

.section-title { font-size: clamp(1.75rem, 5vw, 3rem); }
.section-desc { font-size: 1rem; }
.section-header-center { margin-bottom: 2.5rem; }
.section-header-left { margin-bottom: 2.5rem; }

@media (min-width: 768px) {
  .page-section { padding: 5rem 0; }
  .page-hero { padding: 10rem 0 5rem; }
  .page-hero-title { font-size: clamp(2.5rem, 6vw, 4.5rem); }
  .page-hero-desc { font-size: 1.125rem; }
  .section-title { font-size: clamp(2rem, 4.5vw, 3.5rem); }
  .section-desc { font-size: 1.0625rem; }
  .section-header-center { margin-bottom: 3.5rem; }
  .section-header-left { margin-bottom: 3.5rem; }
}

@media (min-width: 1024px) {
  .page-section { padding: 7rem 0; }
  .page-hero { padding: 12rem 0 6rem; }
  .page-hero-split { grid-template-columns: 1fr 1fr; }
  .section-desc { font-size: 1.125rem; }
  .section-header-center { margin-bottom: 4.5rem; }
  .section-header-left { margin-bottom: 4rem; }
}

/* ================================================================
   13. GRILLES INNER PAGES — mobile first
   ================================================================ */

/* Grilles communes */
.teachers-grid,
.events-grid,
.advantages-grid,
.blog-grid,
.ambassadors-grid,
.stats-grid {
  grid-template-columns: 1fr;
  gap: 1.25rem;
}

/* ≥ 480px : 2 colonnes pour cartes compactes */
@media (min-width: 480px) {
  .stats-grid { grid-template-columns: repeat(2, 1fr); }
}

/* ≥ 580px : 2 colonnes pour grilles moyennes */
@media (min-width: 580px) {
  .advantages-grid { grid-template-columns: repeat(2, 1fr); }
  .ambassadors-grid { grid-template-columns: repeat(2, 1fr); }
  .blog-grid { grid-template-columns: repeat(2, 1fr); }
  .teachers-grid { grid-template-columns: repeat(2, 1fr); }
  .events-grid { grid-template-columns: repeat(2, 1fr); }
}

/* ≥ 1024px : 3 ou 4 colonnes */
@media (min-width: 1024px) {
  .stats-grid { grid-template-columns: repeat(4, 1fr); }
  .advantages-grid { grid-template-columns: repeat(3, 1fr); }
  .ambassadors-grid { grid-template-columns: repeat(3, 1fr); }
  .blog-grid { grid-template-columns: repeat(3, 1fr); }
  .teachers-grid { grid-template-columns: repeat(4, 1fr); }
  .events-grid { grid-template-columns: repeat(3, 1fr); }
}

/* ================================================================
   14. ALTERNANCE PAGE
   ================================================================ */
.alternance-split {
  display: grid;
  gap: 2.5rem;
}
@media (min-width: 1024px) {
  .alternance-split { grid-template-columns: 1fr 1fr; align-items: center; }
}

/* ================================================================
   15. JPO PAGE
   ================================================================ */
.jpo-layout {
  grid-template-columns: 1fr;
  gap: 2rem;
}
.jpo-form-wrap { padding: 1.5rem; }

@media (min-width: 768px) {
  .jpo-form-wrap { padding: 2rem; }
}
@media (min-width: 1024px) {
  .jpo-layout { grid-template-columns: 1fr 2fr; gap: 3rem; }
  .jpo-form-wrap { padding: 3rem; }
}

/* ================================================================
   16. CONTACT PAGE
   ================================================================ */
.contact-grid {
  grid-template-columns: 1fr;
  gap: 2rem;
}
.contact-form { padding: 1.5rem; gap: 1.25rem; }
.contact-form-row { grid-template-columns: 1fr; gap: 1rem; }

@media (min-width: 480px) {
  .contact-form-row { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 768px) {
  .contact-form { padding: 2rem; }
}
@media (min-width: 1024px) {
  .contact-grid { grid-template-columns: 1fr 380px; gap: 3rem; }
  .contact-form { padding: 2.5rem; gap: 1.5rem; }
}

/* ================================================================
   17. ASSISTANCE PAGE
   ================================================================ */
.assistance-split {
  display: grid;
  gap: 2rem;
}
@media (min-width: 1024px) {
  .assistance-split { grid-template-columns: 1fr 1fr; gap: 3rem; }
}

/* ================================================================
   18. BOUTONS — mobile ajustements
   ================================================================ */

/* Sur mobile XS, boutons full-width dans les actions */
@media (max-width: 479px) {
  .hero-actions .btn,
  .cta-actions .btn {
    width: 100%;
    justify-content: center;
  }
  .btn-xl { padding: 1rem 2rem; font-size: 0.9375rem; }
  .btn-lg { padding: 0.875rem 1.75rem; font-size: 0.9375rem; }
}

/* ================================================================
   19. PARCOURSUP — mobile first
   ================================================================ */
.parcoursup-inner { padding: 2rem; }
.parcoursup-title { font-size: clamp(1.75rem, 5vw, 3rem); }
.parcoursup-desc { font-size: 1rem; max-width: 100%; }

@media (min-width: 768px) {
  .parcoursup-inner { padding: 3rem; }
}
@media (min-width: 1024px) {
  .parcoursup-inner { padding: 5rem; }
  .parcoursup-content {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 3rem;
    align-items: center;
  }
  .parcoursup-steps { margin-top: 0; }
}

/* ================================================================
   20. FORMULAIRES GÉNÉRIQUES — mobile
   ================================================================ */
.form-grid-2 { grid-template-columns: 1fr; gap: 1rem; }
@media (min-width: 480px) {
  .form-grid-2 { grid-template-columns: repeat(2, 1fr); }
}

/* ================================================================
   21. STEPS — mobile first
   ================================================================ */
.step-card { padding: 1.25rem; gap: 1rem; }
.step-number { font-size: 2rem; }

@media (min-width: 768px) {
  .step-card { padding: 1.5rem; }
  .step-number { font-size: 2.5rem; }
}
@media (min-width: 1024px) {
  .step-card { padding: 2rem; gap: 1.5rem; }
  .step-number { font-size: 3rem; }
}

/* ================================================================
   22. CHAT POPUP — mobile
   ================================================================ */
#rush-chat-popup { bottom: 1rem; right: 1rem; }
.chat-card { width: min(18rem, calc(100vw - 2rem)); }

@media (min-width: 480px) {
  #rush-chat-popup { bottom: 1.25rem; right: 1.25rem; }
  .chat-card { width: 20rem; }
}

/* ================================================================
   23. PAGE HERO — sections intérieures
   ================================================================ */
.page-hero-split {
  display: grid;
  gap: 2.5rem;
  align-items: center;
}

/* ================================================================
   24. FORMATIONS PAGE (liste détaillée)
   ================================================================ */
.formation-card { padding: 1.5rem; }
.formation-header { grid-template-columns: 1fr; gap: 1.25rem; margin-bottom: 1.5rem; }
.formation-header-right { align-items: flex-start; }
.formation-code { font-size: 1.75rem; }
.formation-tabs-nav { gap: 0.2rem; }
.formation-tab-label { padding: 0.4rem 0.75rem; font-size: 0.8rem; }

@media (min-width: 640px) {
  .formation-card { padding: 2rem; }
  .formation-code { font-size: 2rem; }
}
@media (min-width: 1024px) {
  .formation-card { padding: 3rem; }
  .formation-header { grid-template-columns: 7fr 5fr; }
  .formation-header-right { align-items: flex-end; }
  .formation-code { font-size: 2.5rem; }
  .formation-tab-label { padding: 0.45rem 1rem; font-size: 0.875rem; }
}

/* ================================================================
   25. 404 PAGE
   ================================================================ */
.error-404 .rush-hero { min-height: 100svh; }

/* ================================================================
   26. TRANSITIONS — page
   ================================================================ */
/* Les panneaux restent full-screen sur tous les devices — pas de changement */

/* ================================================================
   27. SCROLL REVEAL — ajout class JS
   ================================================================ */
@keyframes fade-up-in {
  from { opacity: 0; transform: translateY(24px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ================================================================
   28. PRINT
   ================================================================ */
@media print {
  .rush-header,
  .mega-menu,
  #rush-page-transition,
  #rush-intro-overlay,
  #rush-chat-popup { display: none !important; }
  .rush-hero { min-height: 40vh; }
  body { font-size: 12pt; }
}

/* ================================================================
   29. AJUSTEMENTS PRÉCIS MOBILE XS (< 400px)
   ================================================================ */
@media (max-width: 399px) {
  .container { padding-left: 1rem; padding-right: 1rem; }
  .header-cta { padding: 0 0.75rem; font-size: 0.7rem; }
  .rentre-badge { display: none; } /* Simplifie le bandeau sur très petit écran */
  .mega-menu-link .label { font-size: 1.25rem; }
  .formation-code { font-size: 1.25rem; }
}

/* ================================================================
   30. TOUCH — amélioration zones cliquables
   ================================================================ */
@media (hover: none) and (pointer: coarse) {
  .btn { min-height: 44px; }
  .header-burger { min-width: 44px; }
  .hero-dot { min-width: 24px; min-height: 24px; }
  .mega-menu-link { padding: 0.5rem 0; }
  .footer-links a { padding: 0.25rem 0; display: inline-block; }
  .nav a { padding: 0.5rem 0.75rem; }
}