/* Up Megamenu — Neowood skin (Figma "Menu 2026"). */

#st_header {
  --font-family-26: "Avenir 2026", "Avenir", Arial, Helvetica, sans-serif;
  --up-nw-navy: var(--color-navy-26, #182A39);
  --up-nw-teal: var(--color-turquoise-26, #10A9B6);
  --up-nw-light: var(--color-light-blue-26, #F1F7FA);
  --up-nw-line: #D9D9D9;
}

/* Main nav: full header height so panels start right under it */
@media (min-width: 992px) {
  #st_header .up-menu {
    align-self: stretch;
  }

  #st_header .up-menu__list {
    align-self: stretch;
    align-items: stretch;
    gap: 52px;
  }

  #st_header .up-menu__item {
    display: flex;
  }

  #st_header .up-menu__link {
    gap: 10px;
    padding: 0;
    font-family: var(--font-family-26);
    font-size: 20px;
    font-weight: 400;
    line-height: 100%;
    letter-spacing: 0;
    color: var(--up-nw-navy);
  }

  #st_header .up-menu__item.is-active > .up-menu__link,
  #st_header .up-menu__link:hover {
    color: var(--up-nw-teal);
  }
}

/* Filled triangle after the label, flipped when open */
#st_header .up-menu__caret {
  order: 0;
  width: 0;
  height: 0;
  border: 0;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 6px solid currentColor;
  transform: none;
}

#st_header .up-menu__item.is-active .up-menu__caret {
  transform: rotate(180deg);
}

/* Panel: transparent full-width layer, the visible box is the inner one */
@media (min-width: 992px) {
  #st_header .up-menu-panel {
    overflow-y: auto;
    overscroll-behavior: contain;
    background: transparent;
    box-shadow: none;
    pointer-events: none;
  }

  #st_header .up-menu-panel__inner {
    max-width: 1247px;
    /* Centered, but never starts right of the first entry (285px - 34px padding) on very wide screens */
    margin: 0 auto 0 clamp(0px, (100% - 1247px) / 2, 251px);
    padding: 26px 40px 34px 34px;
    background: #fff;
    border: .5px solid #D9D9D9;
    border-top: 0;
    border-radius: 0 0 20px 20px;
    box-shadow: 0 12px 30px rgba(24, 42, 57, .12);
    pointer-events: auto;
  }
}

/* Section titles: teal caps with a short underline */
#st_header .up-menu-panel__title,
#st_header .up-menu-panel__tiles-title {
  display: block;
  position: relative;
  margin: 0 0 24px;
  padding: 0 0 10px;
  border: 0;
  font-family: var(--font-family-26);
  /* !important: custom.css forces every h3 */
  font-size: 16px !important;
  font-weight: 700 !important;
  line-height: 100%;
  letter-spacing: 0;
  text-transform: uppercase !important;
  color: var(--up-nw-teal);
}

#st_header .up-menu-panel__title::after,
#st_header .up-menu-panel__tiles-title::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 45px;
  height: 2px;
  background: var(--up-nw-teal);
}

/* Product grid: 5 columns of 215px */
@media (min-width: 992px) {
  #st_header .up-menu-panel__grid {
    grid-template-columns: repeat(5, minmax(0, 215px));
    gap: 32px 25px;
  }
}

#st_header .up-menu-panel__img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  margin: 0 0 18px;
  border-radius: 6px;
}

/* Cell title and sub-entries: bold, chevron with hanging indent, badge on the right */
#st_header .up-menu-panel__cell-title,
#st_header .up-menu-panel__sublist a {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin: 0;
  padding: 0;
  font-family: var(--font-family-26);
  font-size: 16px;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: 0;
  color: var(--up-nw-navy);
}

#st_header .up-menu-panel__cell-title::before,
#st_header .up-menu-panel__sublist a::before {
  content: "";
  flex: 0 0 auto;
  width: 6px;
  height: 6px;
  /* Centered on the first line (line-height 1.2) */
  margin: calc(.6em - 3px) 2px 0 0;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(-45deg);
}

#st_header .up-menu-panel__cell-title:hover,
#st_header .up-menu-panel__sublist a:hover {
  color: var(--up-nw-teal);
}

#st_header .up-menu-panel__sublist {
  margin: 12px 0 0;
}

#st_header .up-menu-panel__sublist li + li {
  margin-top: 12px;
}

#st_header .up-menu-panel__desc {
  margin: 14px 0 0;
  font-family: var(--font-family-26);
  font-size: 14px;
  font-weight: 350;
  line-height: 1.4;
  letter-spacing: 0;
  text-align: justify;
  color: var(--up-nw-navy);
  opacity: 1;
}

#st_header .up-menu-panel .up-menu-badge {
  flex: 0 0 auto;
  margin: 1px 0 0 auto;
  padding: 2px 9px;
  font-size: 9px;
  font-weight: 400;
  line-height: 14px;
  letter-spacing: .04em;
  border-radius: 3px;
  background-color: var(--up-nw-teal);
}

/* "Vous accompagner" tiles: 3 columns split by a centered vertical line */
#st_header .up-menu-panel__section--blocks {
  margin-top: 32px;
  padding-top: 0;
  border-top: 0;
}

#st_header .up-menu-panel__section--blocks .up-menu-panel__tiles-title {
  margin-bottom: 33px;
}

@media (min-width: 992px) {
  #st_header .up-menu-panel__tiles {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0 120px;
  }

  #st_header .up-menu-tile + .up-menu-tile::before {
    content: "";
    position: absolute;
    top: 50%;
    left: -60px;
    width: 1px;
    height: 68px;
    margin-top: -34px;
    background: var(--up-nw-line);
  }
}

#st_header .up-menu-tile {
  position: relative;
  align-items: center;
  gap: 31px;
  color: var(--up-nw-navy);
}

#st_header .up-menu-tile__icon,
#st_header .up-menu-tile__icon--image {
  width: 68px;
  height: 68px;
  background: var(--up-nw-light);
}

#st_header .up-menu-tile__icon--image img {
  width: 40px !important;
  height: 40px !important;
  object-fit: contain;
}

#st_header .up-menu-tile__title {
  margin: 0 0 6px;
  font-family: var(--font-family-26);
  font-size: 14px;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: 0;
}

#st_header .up-menu-tile__desc {
  font-family: var(--font-family-26);
  font-size: 14px;
  font-weight: 350;
  line-height: 1.4;
  letter-spacing: 0;
  opacity: 1;
}

#st_header .up-menu-tile:hover .up-menu-tile__title {
  color: var(--up-nw-teal);
}

/* Mobile drawer: Figma "iPhone 16 & 17 Pro - 1" (402px), values in px from the frame */
#side_stmobilemenu {
  width: 100%;
  max-width: 100%;
  background: #fff;
  font-family: "Avenir 2026", "Avenir", Arial, Helvetica, sans-serif;
  font-size: 14px;
  line-height: 17px;
  color: #000;
}

#side_stmobilemenu a {
  color: #000;
  text-decoration: none;
}

#side_stmobilemenu .up-mobile-header {
  display: flex;
  align-items: center;
  gap: 14px;
  height: 44px;
  padding: 0 15px;
  background: #182A39;
  border: 0;
}

.up-mobile-header__logo {
  margin-right: auto;
  line-height: 0;
}

.up-mobile-header__logo img {
  width: 105px;
  height: auto;
}

#side_stmobilemenu .up-mobile-header__icon {
  display: flex;
  line-height: 0;
}

.up-mobile-header__icon img {
  width: 18px;
  height: 18px;
}

.up-mobile-header__icon--menu img {
  width: 20px;
  height: 20px;
}

.up-mobile-account,
.up-mobile-resources ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

/* Connexion at 68, Compte Pro at 98, line at 133 */
#side_stmobilemenu .up-mobile-account {
  margin: 0 15px;
  padding: 24px 0 18px;
  border-bottom: .5px solid #E5E5E5;
}

.up-mobile-account li + li {
  margin-top: 13px;
}

#side_stmobilemenu .up-mobile-account a {
  position: relative;
  display: block;
  padding-left: 42px;
  font-weight: 700;
}

.up-mobile-account img {
  position: absolute;
  top: 0;
  left: 19px;
  width: 16px;
  height: 15px;
}

.up-mobile-account li + li img {
  top: -1px;
  left: 18px;
  width: 18px;
  height: 17px;
}

/* OUTLET at 145, line at 173 */
#side_stmobilemenu .up-mobile-outlet {
  display: block;
  margin: 0 15px;
  padding: 12px 22px 11px;
  border-bottom: .5px solid #E5E5E5;
  font-weight: 700;
  text-transform: uppercase;
  color: #EF1115;
}

/* First level rows: 14px above the label, 9px below, 0.5px line */
.up-mobile-menu > .up-mobile-item {
  margin: 0 15px;
  border-bottom: .5px solid #E5E5E5;
}

.up-mobile-menu > .up-mobile-item > .up-mobile-row {
  position: relative;
  border: 0;
}

#side_stmobilemenu .up-mobile-menu > .up-mobile-item > .up-mobile-row .up-mobile-link {
  display: block;
  padding: 14px 22px 9px;
  font-weight: 700;
  line-height: 17px;
  text-transform: uppercase;
}

.up-mobile-menu > .up-mobile-item > .up-mobile-row > .up-mobile-toggle {
  position: absolute;
  inset: 0;
  width: auto;
  border: 0;
}

.up-mobile-menu > .up-mobile-item > .up-mobile-row > .up-mobile-toggle::before,
.up-mobile-menu > .up-mobile-item > .up-mobile-row > .up-mobile-toggle::after {
  display: none;
}

/* Open entry: #F1F7FA card, 370px wide, 5px radius, 8px under the line above, 19px above the next line */
.up-mobile-menu > .up-mobile-item.is-open {
  margin: 8px 15px 19px 17px;
  padding-bottom: 20px;
  background: #F1F7FA;
  border: 0;
  border-radius: 5px;
}

.up-mobile-menu > .up-mobile-item.is-open + .up-mobile-item {
  border-top: .5px solid #E5E5E5;
}

#side_stmobilemenu .up-mobile-menu > .up-mobile-item.is-open > .up-mobile-row .up-mobile-link {
  padding: 19px 20px 0;
  color: #10A9B6;
}

/* Sub entries: 13px under the title, 27px apart, chevron 5x8 stroke 2 at 21px from the card edge */
.up-mobile-sub {
  padding: 13px 0 0;
}

.up-mobile-sub .up-mobile-row {
  position: relative;
  border: 0;
}

.up-mobile-sub > .up-mobile-item + .up-mobile-item {
  margin-top: 10px;
}

#side_stmobilemenu .up-mobile-sub .up-mobile-link {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 40px 0 30px;
  font-weight: 400;
  line-height: 17px;
}

.up-mobile-sub .up-mobile-sub {
  padding-top: 10px;
}

/* Third level (e.g. Sensation Access® under Sensation UltraProtect®) always shown */
.up-mobile-sub--nested {
  display: block;
}

.up-mobile-sub .up-mobile-item:not(.has-children) > .up-mobile-row .up-mobile-link::after,
.up-mobile-tiles a::after,
.up-mobile-sub .up-mobile-toggle::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 20px;
  left: auto;
  width: 9px;
  height: 12px;
  margin: -6px 0 0;
  border: 0;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='9' height='12' viewBox='0 0 9 12'%3E%3Cpath d='M1.5 1.5l5.5 4.5-5.5 4.5' fill='none' stroke='%23000' stroke-width='2.2'/%3E%3C/svg%3E") no-repeat;
  transform: none;
  transition: transform .2s ease;
}

.up-mobile-sub .up-mobile-toggle {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 40px;
  padding: 0;
  border: 0;
  background: transparent;
}

.up-mobile-sub .up-mobile-toggle::before {
  display: none;
}

.up-mobile-sub .up-mobile-item.is-open > .up-mobile-row .up-mobile-toggle::after {
  transform: rotate(90deg);
}

/* "Vous accompagner": 32px under the last entry, links 21px apart */
.up-mobile-tiles-title {
  display: none;
  margin: 32px 20px 0;
  font-weight: 700;
  line-height: 17px;
  text-transform: uppercase;
}

.up-mobile-item.is-open > .up-mobile-tiles-title {
  display: block;
}

.up-mobile-tiles {
  padding: 11px 0 0;
}

.up-mobile-tiles li + li {
  margin-top: 4px;
}

#side_stmobilemenu .up-mobile-tiles a {
  position: relative;
  display: block;
  padding: 0 40px 0 31px;
  font-size: 14px;
  line-height: 17px;
}

.up-mobile-tiles img,
.up-mobile-tiles i {
  display: none;
}

/* Ressources: 14px under the last line, links 20px apart */
.up-mobile-resources {
  margin: 0 15px;
  padding: 14px 22px 0;
}

.up-mobile-resources__title {
  margin: 0 0 6px;
  font-weight: 700;
  line-height: 17px;
  text-transform: uppercase;
}

.up-mobile-resources li + li {
  margin-top: 3px;
}

#side_stmobilemenu .up-mobile-resources a {
  display: block;
  line-height: 17px;
}

/* Buttons: 332x32, 22px under the last link, 9px apart */
.up-mobile-cta {
  padding: 22px 35px 30px;
}

#side_stmobilemenu .up-mobile-cta .extra-menu-buttons {
  flex-direction: column;
  gap: 9px;
  margin: 0;
  padding: 0;
}

.up-mobile-cta li {
  margin: 0 !important;
}

#side_stmobilemenu .up-mobile-cta .btn {
  display: block !important;
  height: 32px;
  padding: 0;
  /* !important: custom.css forces a transparent border on every .btn */
  border: 1.5px solid #10A9B6 !important;
  border-radius: 5px;
  font-size: 14px;
  font-weight: 400;
  line-height: 29px;
  text-align: center;
  text-transform: uppercase;
  background: #10A9B6;
  color: #fff;
}

#side_stmobilemenu .up-mobile-cta .btn-primary {
  background: #fff;
  color: #10A9B6;
}