/* =====================================================================
   RESET ET RÉGLAGES GLOBAUX
   ===================================================================== */
   * {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
  }
  
  /* Police par défaut Roboto */
  html {
    font-family: 'Roboto', sans-serif;
  }

  #wrapwrap > main {
    background-color: #F6FAFA;
  }

  #product_details {
    background-color: #F6FAFA;
  }

  #o_wsale_cta_wrapper.o_wsale_cta_wrapper_boxed {
    background-color: #FFFFFF;
  }

  .oe_product_cart .oe_product_image {
    background-color: #FFFFFF !important;
  }
  .o_carousel_product_card .oe_product_image {
    background-color: #F6FAFA !important;
  }
  
  /* =====================================================================
     MÉDIAS QUERIES : AJUSTEMENTS DES TAILLES EN FONCTION DE LA LARGEUR
     ===================================================================== */
  
   /* <= 1024px */
  @media (max-width: 991px) {
    .caapables-proportional-header, .caapables-logo, .caapables-header-grid, .caapables-menu-item, .caapables-menu-item a {
      display: none !important;
    }
  }

  /* <= 1024px */
  @media (min-width: 992px) and (max-width: 1024px) {
    .caapables-menu-item a {
      font-size: 12px;
      font-weight: 600;
      height: 40px;
      padding-top: 15px;
    }
  
    .caapables-proportional-header {
      height: calc(0.034965 * 100vw + 69.19px);
    }
  
    .caapables-logo {
      height: calc(0.034965 * 100vw + 65.19px);
    }
  }
  
  /* 1025px à 1365px */
  @media (min-width: 1025px) and (max-width: 1365px) {
    .caapables-menu-item a {
      font-size: 13px;
      font-weight: 600;
      height: 44px;
      padding-top: 15px;
    }
  
    .caapables-proportional-header {
      height: calc(0.1294 * 100vw + 6.22px);
    }
  
    .caapables-logo {
      height: calc(0.1294 * 100vw + 2.22px);
    }
  }
  
  /* >= 1366px */
  @media (min-width: 1366px) {
    .caapables-menu-item a {
      font-size: 15px;
      font-weight: 600;
      height: 48px;
      padding-top: 15px;
    }
  
    .caapables-proportional-header {
      height: calc(0.0913 * 100vw + 58.2px); /* calc supplémentaire présent dans le code d'origine */

    }
  
    .caapables-logo {
      height: calc(0.0913 * 100vw + 58.2px); /* calc supplémentaire présent dans le code d'origine */

    }

    .caapables-menu-icon svg {
      width: 18px !important;
      height: 18px !important;
    }
  }
  
  /* =====================================================================
     HEADER ET GRID
     ===================================================================== */

  
  .caapables-proportional-header {
    background-color: #fff; /* Fond pour visualiser la hauteur */
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
  }
  
  /* Grid à 8 colonnes :
     - La 1ère colonne (4fr) pour le logo
     - Les 7 suivantes (3fr chacune) pour les items du menu */
  .caapables-header-grid {
    display: grid;
    grid-template-columns: 4fr repeat(7, 3fr);
    width: 100%;
    height: 100%;
    padding: 0 2rem;
    column-gap: 5px;
    align-items: bottom;
    margin: 0;
  }
  
  /* =====================================================================
     LOGO
     ===================================================================== */
  .caapables-logo-container {
    display: flex;
    align-items: center;
    width: auto;
    height: 100%;
  }
  
  .caapables-logo {
    width: auto;
    margin: auto;
  }
  
  /* =====================================================================
     MENU
     ===================================================================== */
  .caapables-menu-item {
    display: flex;
    align-items: bottom;
    justify-content: center;
    text-align: center;
    padding: 0;
    margin-left: 0;
    cursor: pointer;
    transition: background 0.3s;
    vertical-align: bottom;
  }
  
  .caapables-menu-item a {
    display: block;
    text-decoration: none;
    color: #000;
    width: 100%;
    margin-top: auto;
    margin-bottom: 0;
    position: relative;
    bottom: 0;
    letter-spacing: 0.03rem;
    border-top-left-radius: 12px;
    border-top-right-radius: 12px;
    text-align: center;
    align-items: center;
  }
  
  /* Couleurs de fond pour les menus */
  .caapables-yellow {
    background-color: #fff1b2;
  }
  
  .caapables-lightblue {
    background-color: #e9f2f3;
  }
  
  .caapables-bluegreen {
    background-color: #7ec0c6;
  }
  
  /* Icônes dans le menu */
  .caapables-menu-icon {
    display: inline-block;
  }
  
  .caapables-menu-icon svg {
    width: 14px;
    height: 14px;
  }
  
  /* =====================================================================
     DROPDOWN ET SOUS-MENU
     ===================================================================== */
  .caapables-dropdown {
    position: relative; /* Permet de positionner le sous-menu en absolu */
  }
  
  /* Lien/bouton principal du dropdown */
  .caapables-dropdown-toggle {
    background-color: #ddd;
    padding: 0.5rem 1rem;
    border-radius: 4px;
    display: inline-block;
    text-decoration: none;
    color: #000;
  }
  
  /* Sous-menu (caché par défaut) */
  .caapables-submenu {
    display: none;
    position: absolute;
    top: 100%;
    left: calc(50% - 108px); /* Centrage horizontal */
    width: 220px;
    list-style: none;
    margin: 0;
    padding: 0;
    background-color: #fff;
    border: 2px solid #0795a8;
    border-radius: 4px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.15);
    border-bottom-right-radius: 20px;
    border-bottom-left-radius: 20px;
    z-index: 999;
  }
  
  /* Éléments du sous-menu */
  .caapables-submenu li a {
    display: block;
    padding: 1rem;
    text-decoration: none;
    color: #000;
    border-bottom: 1px solid #0795a8;
  }
  
  .caapables-submenu li:last-child a {
    border-bottom: none;
    border-bottom-right-radius: 10px;
  }
  
  /* Survol du sous-menu */
  .caapables-submenu li a:hover {
    color: #0778a8;
  }
  
  /* Affichage du sous-menu au survol */
  .caapables-dropdown:hover .caapables-submenu {
    display: block;
    animation: fadein 500ms;
  }
  
  /* Animation d'apparition */
  @keyframes fadein {
    from {
      opacity: 0;
    }
    to {
      opacity: 1;
    }
  }