/* ============================================================
   FUSION — RESPONSIVE.CSS
============================================================ */

@media (min-width: 992px) {
  .mobile-menu { display: none; }
}

@media (max-width: 1399px) {
  .nav-links { gap: 30px; }
  .nav-right { gap: 30px; }
  .clients-light-grid { gap: 16px 30px; }
}

@media (max-width: 1199px) {
  .exp-row { padding: 70px 0; }
}

/* ══════════════ TABLETTE + MOBILE (≤ 991px) ══════════════ */
@media (max-width: 991px) {
  .container { padding-left: 24px; padding-right: 24px; }

  /* ── Barre du haut : logo | FR/EN | ON-OFF | burger ── */
  #navbar { padding: 16px 0; }
  #navbar.scrolled { padding: 12px 0; }
  .nav-logo img, #navbar.scrolled .nav-logo img { height: 42px; }
  .nav-links { display: none; }
  .nav-right { gap: 18px; position: relative; z-index: 1001; }
  .nav-lang { font-size: 13px; gap: 5px; }
  .btn-onoff { width: 74px; height: 34px; padding: 3px; }
  .btn-onoff .knob { width: 28px; height: 28px; font-size: 9px; }
  .btn-onoff .off { right: 11px; font-size: 9px; }
  .navbar-toggler-custom { display: block; }

  /* ── Titres de section ── */
  .sec-line { width: 120px; margin-bottom: 26px; }

  /* ── Bandeaux des pages internes ── */
  .page-hero { height: clamp(220px, 46vw, 340px); }
  .page-hero h1 { padding-top: 56px; font-size: clamp(19px, 4.6vw, 30px); text-align: center; padding-left: 16px; padding-right: 16px; }

  /* ── Footer ── */
  .footer { padding: 60px 0 26px; }
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 34px 20px; }
  .footer-grid > div:first-child { grid-column: 1 / -1; }
  .footer-cta { margin-bottom: 28px; }
  .footer-col.is-center, .footer-col.is-right { text-align: left; }
  .footer-col.is-right { grid-column: 1 / -1; }
  .footer-social { justify-content: flex-start; }
  .footer-bottom { margin-top: 40px; }

  /* ── Home ── */
  .home-evolving { padding: 90px 0 60px; }
  .home-evolving .btn-f { margin-top: 24px; }
  .home-evolving-visual { margin: 44px auto 0; max-width: 380px; }
  .home-stats { padding: 20px 0 70px; }
  .home-stats-numbers { margin: 30px 0 0; max-width: none; }
  .home-expertise { padding: 20px 0 70px; }
  .home-expertise-row { margin-top: 40px; }
  .home-expertise-aside { text-align: left; margin-top: 40px; }
  .home-expertise-aside .sec-sub br { display: none; }
  .home-expertise-aside .sec-text { margin-top: 18px; }
  .aside-line { margin: 34px 0 0; }
  .owl-carousel .owl-dots { justify-content: flex-start; }
  .home-trust { padding: 70px 0 60px; }
  #clientsCarousel { margin-top: 40px; }
  .home-cases { padding: 80px 0 70px; }
  .home-cases-grid { grid-template-columns: 1fr; margin-top: 40px; }
  .home-case { padding: 30px 0 34px; border-right: 0 !important; border-bottom: 1px solid #262626; }
  .home-cases-cta { margin-top: 40px; }

  /* ── Expertise ── */
  .exp-intro { padding: 60px 0 40px; }
  .exp-explore { padding: 20px 0 10px; }
  .exp-details { padding: 10px 0; }
  .exp-row, .exp-row.is-reverse { flex-direction: column; align-items: stretch; gap: 30px; padding: 50px 0; }
  .exp-row-text, .exp-row-img { flex: none; }
  .exp-row-img { max-width: 520px; width: 100%; margin: 0 auto; }
  .exp-row-head { margin-bottom: 20px; }
  .exp-row-tagline { margin-bottom: 18px; }
  .exp-row-desc { margin-bottom: 24px; }
  .exp-approach { padding: 60px 0 80px; }
  .exp-approach-box { padding: 32px 24px; margin-top: 36px; }
  .exp-approach-tagline { margin-top: 50px; }
  .exp-blocks { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: 44px; gap: 18px; }

  /* ── À propos ── */
  .about-intro { padding: 60px 0 70px; }
  .about-stats { grid-template-columns: repeat(2, 1fr); gap: 18px; margin-top: 50px; }
  .about-evolution, .about-dna { padding: 20px 0 70px; }
  .about-timeline { grid-template-columns: 1fr; gap: 16px; margin-top: 40px; }
  .about-values { grid-template-columns: 1fr; gap: 18px; margin-top: 36px; }
  .about-clients { padding: 20px 0 80px; }
  .about-clients-text { margin-bottom: 40px; }
  .clients-light-grid { grid-template-columns: repeat(3, 1fr); gap: 12px; }

  /* ── Réalisations ── */
  .real-intro { padding: 60px 0 50px; }
  .real-intro-title { margin-bottom: 30px; }
  .real-intro-text { max-width: none; }
  .real-intro-right { margin-top: 34px; }
  .real-intro-right p { margin-bottom: 20px; }
  .real-grid-section { padding: 50px 0 80px; }
  .real-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px 20px; }

  /* ── Contact ── */
  .contact-top { padding: 110px 0 36px; }
  .contact-talk { padding: 50px 0 60px; }
  .contact-talk-sub { margin-bottom: 34px; }
  .contact-choices { gap: 14px; }
  .choice-btn { padding: 16px 14px; }
  .contact-main { padding: 70px 0 60px; }
  .contact-infos { margin: 44px auto 56px; gap: 14px; }
  .form-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
  .col-nom, .col-prenom, .col-ent, .col-marque { grid-column: span 1; }
  .col-email, .col-tel, .col-full { grid-column: 1 / -1; }
  .btn-submit { margin-top: 36px; }
  .contact-careers { padding: 50px 0 80px; }
  .careers-row { flex-direction: column; }
  .careers-sub { margin-bottom: 20px; }

  /* ── Mentions légales ── */
  .legal-top { padding: 120px 0 30px; }
  .legal-content { padding-bottom: 80px; }

  /* ── Écran tactile : pas de survol → images directement en couleur ── */
  @media (hover: none) {
    .home-case-img img, .real-card-img img { filter: none; }
  }
}

/* ══════════════ MOBILE (≤ 575px) ══════════════ */
@media (max-width: 575px) {
  .container { padding-left: 20px; padding-right: 20px; }
  .nav-logo img, #navbar.scrolled .nav-logo img { height: 36px; }
  .nav-right { gap: 14px; }

  /* Hero : chaque ligne du titre tient sur une seule ligne */
  .home-hero { min-height: 520px; }
  .home-hero-overline { font-size: 5.4vw; }
  .home-hero-title { font-size: calc((100vw - 48px) / 24.6); line-height: 1.3; }

  /* Chiffres clés : 3 colonnes compactes */
  .home-stats-numbers { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .home-stats .stat-card { padding: 18px 4px 10px; }
  .home-stats .f-num { font-size: 9vw; gap: 4px; }
  .home-stats .f-num-label { font-size: 11px; margin-top: 10px; }

  .exp-card { min-height: 280px; }

  /* Carrousel expertise : 1 carte + aperçu de la suivante à droite */
  .home-expertise { overflow: hidden; }
  #expCarousel { width: 84%; }
  #expCarousel .owl-stage-outer { overflow: visible; }

  /* Pastilles d'expertise : une seule ligne qui défile horizontalement */
  .exp-pills {
    flex-wrap: nowrap; justify-content: flex-start;
    overflow-x: auto; scroll-snap-type: x mandatory;
    margin: 0 -20px; padding: 4px 20px 12px;
    scrollbar-width: none;
  }
  .exp-pills::-webkit-scrollbar { display: none; }
  .exp-pill { flex: none; scroll-snap-align: start; white-space: nowrap; }

  .exp-blocks { grid-template-columns: 1fr; }

  .about-stats { gap: 12px; }
  .about-stat { padding: 30px 10px 24px; }
  .tl-card { align-items: flex-start; padding: 24px 20px; gap: 16px; }
  .tl-icon { width: 52px; height: 52px; }
  .value-card { padding: 34px 22px; min-height: 0; }
  .clients-light-grid { grid-template-columns: repeat(2, 1fr); }

  .real-grid { grid-template-columns: minmax(0, 1fr); gap: 36px; }

  .form-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .col-nom, .col-prenom { grid-column: 1 / -1; }
  .col-ent, .col-marque { grid-column: span 1; }
  .f-field, .f-radio { min-height: 60px; padding: 0 16px; }
  .f-field span, .f-radio span { font-size: 13px; }
  .f-radio i { width: 22px; height: 22px; }
  .info-pill { padding: 14px 20px; font-size: 15px; }
  .info-pill img { width: 28px; height: 28px; }

  .f-lightbox { padding: 70px 12px; }
  .f-lightbox-nav { top: auto; bottom: 18px; transform: none; }
}

/* Très petits écrans (≤ 360px) */
@media (max-width: 360px) {
  .nav-right { gap: 10px; }
  .btn-onoff { width: 64px; height: 30px; }
  .btn-onoff .knob { width: 24px; height: 24px; font-size: 8px; }
  .btn-onoff .off { right: 8px; font-size: 8px; }
}