/* =========================
           MAIN WRAPPER
        ========================= */
  #main {
      padding: 32px 22px;
  }

  /* =========================
           HERO SECTION (radius + overlay)
        ========================= */
  #main .home-section {
      border-radius: 25px;
      position: relative;
      overflow: hidden;
  }

  #main .home-section:before {
      border-radius: 25px;
      content: "";
      position: absolute;
      inset: 0;
      background: linear-gradient(180deg,
              rgba(5, 23, 33, 0.75) 0%,
              rgba(5, 23, 33, 0.20) 100%);
      z-index: 0;
  }

  /* =========================
           THEME VARIABLES (TOPBAR)
        ========================= */
  .theme-glass {
      --glx-max: 1240px;
      --glx-topbar-bg: #ffffff;
      --glx-topbar-text: rgba(0, 0, 0, .72);
      --glx-topbar-border: rgba(0, 0, 0, .08);
  }

  /* =========================
           TOPBAR
        ========================= */
  .theme-glass .glx-topbar {
      background: var(--glx-topbar-bg);
      padding: 2px 16px;
      font-family: "DM Sans", sans-serif;
      font-size: 13px;
      line-height: 1;
  }

  .theme-glass .glx-topbar__inner {
      max-width: 800px;
      margin: 0 auto;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 14px;
  }

  .theme-glass .glx-topbar__social {
      display: flex;
      align-items: center;
      gap: 10px;
  }

  .theme-glass .glx-topbar__social a {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 28px;
      height: 28px;
      border-radius: 999px;
      color: rgba(0, 0, 0, .70);
      text-decoration: none;
      transition: transform .15s ease, background .15s ease, color .15s ease;
  }

  .theme-glass .glx-topbar__social a:hover {
      transform: translateY(-1px);
      background: rgba(0, 0, 0, .05);
      color: rgba(0, 0, 0, .90);
  }

  .theme-glass .glx-topbar__info {
      display: flex;
      align-items: center;
      gap: 18px;
      color: var(--glx-topbar-text);
      white-space: nowrap;
  }

  .theme-glass .glx-topbar__item {
      display: inline-flex;
      align-items: center;
      gap: 8px;
  }

  .theme-glass .glx-topbar__link {
      color: var(--glx-topbar-text);
      text-decoration: none;
  }

  .theme-glass .glx-topbar__link:hover {
      text-decoration: underline;
  }

  .theme-glass .glx-topbar i {
      font-size: 14px;
      line-height: 1;
      opacity: .95;
  }

  @media (max-width: 768px) {
     
      /* show icon */
      .iconsearch {
          display: inline-block;
      }

      .nav-logo-wrap {
          /* left: 40px; */
          margin-left: 25%;
      }
  }

  /* Position tweak (as you had) */
  .nav-logo-wrap {
      left: 40px;
      /* margin-left: 37%; */
  }

  .mobile-nav-icon {
      margin-right: 20% !important;
  }

  /* =========================
           NAV COLORS (scroll)
        ========================= */
  .theme-glass .c-w {
      color: #fff;
  }

  .theme-glass .c-b {
      color: #111;
  }

  /* Before scroll => WHITE */
  .theme-glass .main-nav:not(.body-scrolled) .inner-nav>ul>li>a {
      color: #fff !important;
  }

  .theme-glass .main-nav:not(.body-scrolled) .inner-nav>ul>li>a i {
      color: #fff !important;
  }

  /* After scroll => BLACK */
  .theme-glass .main-nav.body-scrolled .inner-nav>ul>li>a {
      color: #111 !important;
  }

  .theme-glass .main-nav.body-scrolled .inner-nav>ul>li>a i {
      color: #111 !important;
  }

  /* Hover */
  .theme-glass .main-nav:not(.body-scrolled) .inner-nav>ul>li>a:hover,
  .theme-glass .main-nav.body-scrolled .inner-nav>ul>li>a:hover {
      opacity: .85;
  }

  /* =========================
           LOGO SWITCH (scroll)
        ========================= */
  .theme-glass .logo img {
      display: none;
  }

  .theme-glass .main-nav:not(.body-scrolled) .logo-white {
      display: block;
  }

  .theme-glass .main-nav.body-scrolled .logo-dark {
      display: block;
  }

  /* =========================
           NAV RIGHT (CTA) + button styles
        ========================= */
  .nav-right {
      position: absolute;
      right: 40px;
      top: 0;
      height: 100%;
      display: flex;
      align-items: center;
  }

  .btn-r {
      background: #D02E28 !important;
      color: #fff !important;
  }

  .btn-w {
      color: #D02E28 !important;
  }


  /* =========================
        HERO CONTENT
        ========================= */

  .hero-impact-content {
      max-width: 1100px;
      margin: 0 auto;
      display: flex;
      flex-direction: column;
      align-items: center;
  }

  .hero-title {
      color: #fff;
      font-size: clamp(44px, 6vw, 82px);
      font-weight: 900;
      /* text-transform: uppercase; */
      line-height: 0.95;
      margin-bottom: 70px;
      transform: rotate(-5deg);
      text-shadow: 0 20px 40px rgba(0, 0, 0, .45);
      text-align: center;
  }

  /* Search box */
  .search-card {
      background: #fff;
      border-radius: 12px;
      max-width: 720px;
      box-shadow: 0 25px 60px rgba(0, 0, 0, .35);
      overflow: hidden;
  }

  .tabs {
      display: flex;
      gap: 10px;
      padding: 14px 18px 0;
  }

  .tab {
      border: none;
      background: transparent;
      font-weight: 700;
      font-size: 14px;
      color: #999;
      padding: 8px 12px;
      cursor: pointer;
  }

  .tab.is-active {
      color: #D02E28;
      border-bottom: 2px solid #D02E28;
  }

  .search-row {
      display: flex;
      gap: 12px;
      padding: 16px 18px 20px;
  }

  .search-input {
      flex: 1;
      height: 50px;
      border-radius: 8px;
      border: 1px solid #ddd;
      padding: 0 16px;
      font-size: 14px;
  }

  .search-btn {
      background: #D02E28;
      color: #fff;
      border: none;
      border-radius: 8px;
      padding: 0 26px;
      font-weight: 700;
      cursor: pointer;
  }

  /* Mobile */
  @media (max-width: 768px) {
      .hero-title {
          transform: rotate(-3deg);
      }

      .search-row {
          flex-direction: column;
      }

      .search-btn {
          width: 100%;
          height: 48px;
      }

      /* show icon */
      .iconsearch {
          display: inline-block;
      }
  }



  /* ===== WRAP centered like original ===== */
  .search-wrap {
      position: relative;
      width: 100%;
      max-width: 1520px;
      /* comme l’original */
      margin: 0 auto;
  }

  /* ===== Floating tabs: smaller + attached ===== */
  .tabs-floating {
      position: absolute;
      top: -37px;
      left: 50%;
      transform: translateX(-50%);
      display: inline-flex;
      background: #efefef;
      border-radius: 10px 10px 0 0;
      padding: 3px;
      box-shadow: 0 10px 20px rgba(0, 0, 0, .18);
      z-index: 10;
  }

  /* tabs sizing like original */
  .tabs-floating .tab {
      border: 0;
      background: transparent;
      padding: 9px 18px;
      font-size: 13px;
      font-weight: 700;
      color: #8f8f8f;

      cursor: pointer;
      line-height: 1;
  }

  .iconsearch {
      display: none;
  }

  /* active tab */
  .tabs-floating .tab.is-active {
      background: #fff;
      color: #D02E28;
      /* box-shadow: 0 6px 14px rgba(0,0,0,.12); */
      margin-bottom: -2px;
      margin-top: -2px;
      margin-left: -2px;
      border-top-left-radius: 10px;
  }

  /* ===== Card: less height + correct padding ===== */
  .search-card {
      background: #fff;
      border-radius: 14px;
      box-shadow: 0 22px 55px rgba(0, 0, 0, .28);
      padding: 5px 20px 0px;
      width: 70%;
      margin: 0 auto !important;
  }

  /* row align like original */
  .search-row {
      display: flex;
      align-items: center;
      gap: 14px;
  }

  /* input like original */
  .search-input {
      flex: 1;
      height: 48px;
      border-radius: 10px;
      border: 1px solid #e6e6e6;
      padding: 0 18px;
      font-size: 14px;
      color: #333;
      outline: none;
  }

  /* button like original: less tall */
  .search-btn {
      height: 48px;
      border: 0;
      border-radius: 10px;
      padding: 0 28px;
      background: #D02E28;
      color: #fff;
      font-weight: 800;
      font-size: 16px;
      cursor: pointer;
  }

  /* optional focus */
  .search-input:focus {
      border-color: rgba(208, 46, 40, .35);
      box-shadow: 0 0 0 4px rgba(208, 46, 40, .12);
  }

  /* ===== mobile ===== */
  @media (max-width: 640px) {
      .search-wrap {
          max-width: 92%;
      }

      .search-row {
          flex-direction: column;
          align-items: stretch;
      }

      .search-btn {
          width: 100%;
      }

      /* show icon */
      .iconsearch {
          display: inline-block;
      }

      .tabs-floating {
          top: -12px;
          transform: translateX(-50%) scale(.95);
      }
  }



  @media (max-width: 640px) {

      /* hide text */
      .search-btn .btn-text {
          display: none;
      }

      /* show icon */
      .iconsearch {
          display: inline-block;
      }

      /* button becomes icon button */
      .search-btn {
          width: 44px;
          min-width: 44px;
          height: 44px;
          padding: 0;
          border-radius: 10px;
      }

      .search-btn .btn-text {
          display: none;
      }

      /* show icon */
      .iconsearch {
          display: inline-block;
          font-size: 18px;
          color: #fff;
      }

      /* make button square */
      .search-btn {
          width: 44px;
          min-width: 44px;
          height: 44px;
          padding: 0;
          border-radius: 10px;
          display: flex;
          align-items: center;
          justify-content: center;
      }

      /* wrapper */
      .search-wrap {
          max-width: 100%;
          padding: 0 12px;
      }

      /* tabs */
      .tabs-floating {
          top: -19px;
          padding: 2px;
      }

      .tabs-floating .tab.is-active {

          border-radius: 10px 10px 0 0;




      }

      .tabs-floating .tab {
          padding: 8px 14px;
          font-size: 12px;
      }

      /* card */
      .search-card {
          width: 97%;
          padding: 0px;
          border-radius: 14px;
          margin-top: 8% !important;
      }

      /* FORCE INLINE ROW (clé du rendu) */
      .search-row {
          flex-direction: row !important;
          gap: 10px;
      }

      /* input */
      .search-input {
          height: 44px;
          font-size: 13px;
          border-radius: 10px;
      }

      /* bouton icône */
      .search-btn {
          width: 44px;
          min-width: 44px;
          height: 44px;
          padding: 0;
          border-radius: 10px;
          /* font-size: 0; */
          /* cache le texte */
          position: relative;
      }

      .search-btn::before {

          font-size: 18px;
          line-height: 1;
          color: #fff;
      }


      /* ===== Search button icon logic ===== */
      .search-btn {
          display: inline-flex;
          align-items: center;
          justify-content: center;
          gap: 8px;
      }

      /* icon hidden by default (desktop) */
      .iconsearch {
          /* display: none; */
          font-size: 18px;
          line-height: 1;
      }


  }


  /* =========================
   NAV RIGHT – SEARCH + CTA
========================= */

  .nav-right {
      position: absolute;
      right: 40px;
      top: 0;
      height: 100%;
      display: flex;
      align-items: center;
      gap: 16px;
      /* espace entre loupe et bouton */
  }

  /* lien loupe */
  .nav-search-link {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      text-decoration: none;
      cursor: pointer;
  }

  /* icône loupe */
  .nav-search-link i {
      font-size: 18px;
      color: #fff;
      transition: opacity .2s ease, transform .2s ease;
  }

  /* hover léger */
  .nav-search-link:hover i {
      opacity: .75;
      transform: translateY(-1px);
  }

  /* =========================
   AFTER SCROLL (NOIR)
========================= */
  .theme-glass .main-nav.body-scrolled .nav-search-link i {
      color: #111;
  }