:root {
        --orange-dark:  #d16608;
      --orange: #CF721F;
      --orange-light: #F0BD84;
      --orange-lt :#f0bd844d;
      --green: #6D902D;
      --green-light: #BCDD62;
      --cream: #FDFBF7;
      --dark: #2D2A26;
      --sand: #E8E2D6;
      --warm-gray: #8A8279;
      --white: #FFFFFF;
      --beige: #F5F0E8;

       --topbar-height: 44px;
        --navbar-height: 96px;
    }

    
  /**********************/
  .side-menu {
      width: 300px;
      background: white;
      position: fixed;
      top: 0;
      height: 100%;
      padding: 25px;
      overflow-y: auto;
      transition: 0.3s ease;
      direction: ltr; 
      right: -350px;
      z-index: 5555;
  }

  /* Header */
  .side-menu-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 25px;
  }

  .side-menu-header h2 {
      color: #cf721f;
      font-size: 22px;
      margin: 0;
  }

  .close-btn {
      background: none;
      border: none;
      font-size: 1.7rem;
      cursor: pointer;
      color: #cf721f;
  }

  /* Items */
  .menu-item {
      margin-bottom: 12px;
      list-style: none;
  }

  .secteur-link {
      display: flex;
      align-items: center;
      cursor: pointer;
      gap: 12px;
      padding: 8px 5px;
  }

  .secteur-name {
      font-size: 15px;
      font-weight: 600;
      color: #333;
      margin: 0;
  }

  /* Icône du secteur */
  .secteur-icon-menu {
      width: 40px;
      height: 40px;
      border: 2px solid;
      border-radius: 5px;
      display: flex;
      justify-content: center;
      align-items: center;
      overflow: hidden;
  }

  .secteur-icon-menu img {
      width: 26px;
      height: 26px;
      object-fit: cover;
  }

  /* Flèche (LTR version → espace à gauche) */
  .arrow {
      margin-left: auto;
      transition: transform 0.3s;
  }

  .arrow.rotate {
      transform: rotate(180deg);
  }

  .side-menu-list {
      padding-left: 0rem;
  }

  /* Sous-menu (FR = padding-left) */
  .submenu {
      display: none;
      padding-left: 2.8rem;
      margin-top: 6px;
  }

  .submenu li {
      list-style: none;
  }

  .submenu li a {
      font-size: 14px;
      display: block;
      padding: 5px 10px;
      color: #000000;
      cursor: pointer;
  }

  .submenu li a:hover {
      color: #cf721f;
  }

  .form-control:focus{
      box-shadow: none !important;
  }


  .form-select:focus {
      border-color: var(--primary-color);
      outline: 0;
      box-shadow: none !important;
  }

  .product-btn-primary{
      background: white;
      color: var(--primary-color);
      border: 2px solid var(--primary-color) !important;
  }

  .product-btn-primary:hover{
      background: var(--primary-color);
      color: white;
      border: 2px solid var(--primary-color);
  }

  .rating-container {
      display: flex;
      justify-content: space-between;
      align-items: center;
  }

    .rating-btn-open {
        background: white;
        color: #084a50;
        border: 1px solid #084a50;
        padding: 9px 18px;
        border-radius: 50px;
        font-size: 13px;
        font-weight: 600;
        text-decoration: none;
        transition: all 0.3s;
        display: inline-flex;
        align-items: center;
        gap: 8px;
        cursor: pointer;
    }

    .rating-btn-open:hover {
        color: white;
        background: #084a50;
        border: 1px solid #084a50;
    }

  /* Responsive (mobile) */
  @media (max-width: 576px) {
      .rating-container {
          flex-direction: column;
          gap: 10px;
          text-align: center;
      }

      .rating-btn-open {
          width: 100%;
      }
  }


  .tab-link{
      color: #cf721f !important;
      font-weight: 600;
  }

  .tab-link .active{
      background: #cf721f !important;
      font-weight: 600;
      color: white !important;
  }


  @media (min-width: 768px) {
      .section-header{margin-top: 55px;} 
  }

    /**********************/
    .sub-menu-nav .dropdown-menu {
        display: none;
        opacity: 0;
        transform: translateY(10px);
        transition: all 0.3s ease;
        border: none;
        padding: 15px;
    }

    .sub-menu-nav:hover .dropdown-menu {
        display: block;
        opacity: 1;
        transform: translateY(0);
        width: 350px;
    }

    .dropdown-item-horizontal {
        display: flex;
        align-items: center;
        gap: 10px;
        padding: 10px 12px;
        border-radius: 8px;
        transition: 0.2s;
    }

    .dropdown-item-horizontal:hover {
        background: var(--orange-lt);
    }

    .dropdown-item-horizontal.active {
        background: var(--orange-lt);
    }

    .dropdown-item-horizontal .secteur-name {
        font-size: 14px;
        font-weight: 600;
        color: #333;
    }

    .dropdown-item-horizontal .secteur-icon-menu {
        width: 38px;
        height: 38px;
        border-radius: 6px;
    }