/* =========================================================
   ART & SUN — Menu mobile / menu contextuel
   Version 2.1.1
   ========================================================= */

:root {
  --artsun-popup-top: 0px;
  --artsun-menu-bg: linear-gradient(180deg, #fffdf7 0%, #faf7ec 48%, #f1ead6 100%);
  --artsun-menu-icon: #4a3a2a;
  --artsun-menu-border: rgba(137, 118, 73, .22);
}

/* HAMBURGER DU BANDEAU CONTEXTUEL — toutes largeurs */
.artsun-context-header .ct-header-trigger,
.artsun-context-header [data-id="trigger"],
.artsun-context-header button[class*="trigger"] {
  min-width: 46px !important;
  min-height: 46px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  border: 1px solid rgba(137, 118, 73, .38) !important;
  border-radius: 8px !important;
  background: var(--artsun-menu-bg) !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, .11) !important;
}

.artsun-context-header .ct-header-trigger svg,
.artsun-context-header [data-id="trigger"] svg,
.artsun-context-header button[class*="trigger"] svg {
  width: 27px !important;
  height: 27px !important;
  color: var(--artsun-menu-icon) !important;
  fill: currentColor !important;
  stroke-width: 2.2 !important;
}

/* HAMBURGER DU HEADER NORMAL — écran étroit seulement */
@media (max-width: 999px) {
  [data-device="mobile"] .ct-header-trigger,
  [data-device="mobile"] [data-id="trigger"],
  header [data-device="mobile"] button[class*="trigger"] {
    min-width: 46px !important;
    min-height: 46px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border: 1px solid rgba(137, 118, 73, .38) !important;
    border-radius: 8px !important;
    background: var(--artsun-menu-bg) !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, .11) !important;
  }

  [data-device="mobile"] .ct-header-trigger svg,
  [data-device="mobile"] [data-id="trigger"] svg,
  header [data-device="mobile"] button[class*="trigger"] svg {
    width: 27px !important;
    height: 27px !important;
    color: var(--artsun-menu-icon) !important;
    fill: currentColor !important;
    stroke-width: 2.2 !important;
  }
}

/* POPUP — commence exactement sous le bandeau ou le header déclencheur */
.ct-drawer-canvas[data-location="end"] {
  background: linear-gradient(
    to bottom,
    transparent 0,
    transparent var(--artsun-popup-top),
    rgba(38, 31, 25, .18) var(--artsun-popup-top),
    rgba(38, 31, 25, .18) 100%
  ) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

#offcanvas,
#offcanvas.ct-panel,
.ct-drawer-canvas[data-location="end"] #offcanvas {
  width: min(430px, calc(100vw - 34px)) !important;
  max-width: min(430px, calc(100vw - 34px)) !important;
  height: calc(100dvh - var(--artsun-popup-top) - 12px) !important;
  max-height: calc(100dvh - var(--artsun-popup-top) - 12px) !important;
  top: var(--artsun-popup-top) !important;
  right: 12px !important;
  bottom: 12px !important;
  border: 1px solid var(--artsun-menu-border) !important;
  border-radius: 0 0 14px 14px !important;
  overflow: hidden !important;
  background: var(--artsun-menu-bg) !important;
  box-shadow: -7px 7px 28px rgba(0, 0, 0, .22) !important;
}

.ct-drawer-canvas[data-location="end"] > .ct-panel {
  width: min(430px, calc(100vw - 34px)) !important;
  max-width: min(430px, calc(100vw - 34px)) !important;
  height: calc(100dvh - var(--artsun-popup-top) - 12px) !important;
  max-height: calc(100dvh - var(--artsun-popup-top) - 12px) !important;
  margin: var(--artsun-popup-top) 12px 12px auto !important;
  border: 1px solid var(--artsun-menu-border) !important;
  border-radius: 0 0 14px 14px !important;
  overflow: hidden !important;
  background: var(--artsun-menu-bg) !important;
  box-shadow: -7px 7px 28px rgba(0, 0, 0, .22) !important;
}

#offcanvas .ct-panel-inner,
#offcanvas .ct-panel-content,
.ct-drawer-canvas[data-location="end"] #offcanvas .ct-panel-inner,
.ct-drawer-canvas[data-location="end"] #offcanvas .ct-panel-content {
  background: transparent !important;
}


/* APPEL DEPUIS LE BANDEAU CONTEXTUEL
   Le panneau reste impérativement aligné à droite, sous le bandeau. */
html.artsun-menu-from-context .ct-drawer-canvas[data-location="end"] {
  justify-content: flex-end !important;
  align-items: flex-start !important;
}

html.artsun-menu-from-context #offcanvas,
html.artsun-menu-from-context #offcanvas.ct-panel,
html.artsun-menu-from-context .ct-drawer-canvas[data-location="end"] #offcanvas {
  left: auto !important;
  right: 12px !important;
  margin-left: auto !important;
  margin-right: 0 !important;
  transform-origin: top right !important;
}

html.artsun-menu-from-context .ct-drawer-canvas[data-location="end"] > .ct-panel {
  left: auto !important;
  right: auto !important;
  margin-top: var(--artsun-popup-top) !important;
  margin-right: 12px !important;
  margin-bottom: 12px !important;
  margin-left: auto !important;
  transform-origin: top right !important;
}

@media (max-width: 420px) {
  html.artsun-menu-from-context #offcanvas,
  html.artsun-menu-from-context #offcanvas.ct-panel,
  html.artsun-menu-from-context .ct-drawer-canvas[data-location="end"] #offcanvas {
    left: auto !important;
    right: 8px !important;
  }

  html.artsun-menu-from-context .ct-drawer-canvas[data-location="end"] > .ct-panel {
    margin-right: 8px !important;
    margin-left: auto !important;
  }
}

/* TYPOGRAPHIE ET COULEURS DU TEXTE
   Aucun réglage ici : elles restent entièrement gérées dans Blocksy. */

/* FERMETURE
   La croix interne du popup est masquée : le hamburger du bandeau/header
   reste visible au-dessus et sert de commande d’ouverture/fermeture. */
#offcanvas .ct-toggle-close,
#offcanvas button[aria-label*="fermer" i],
#offcanvas button[aria-label*="close" i],
.ct-drawer-canvas[data-location="end"] .ct-toggle-close,
.ct-drawer-canvas[data-location="end"] button[aria-label*="fermer" i],
.ct-drawer-canvas[data-location="end"] button[aria-label*="close" i] {
  display: none !important;
}

#offcanvas .ct-panel-content,
.ct-drawer-canvas[data-location="end"] #offcanvas .ct-panel-content {
  padding-top: 4px !important;
}

/* FLÈCHES D’OUVERTURE — contraste renforcé */
#offcanvas .mobile-menu .child-indicator,
#offcanvas .mobile-menu .ct-sub-menu-trigger,
#offcanvas .mobile-menu [class*="dropdown-toggle"],
#offcanvas .mobile-menu button[aria-expanded],
.ct-drawer-canvas[data-location="end"] .mobile-menu .child-indicator,
.ct-drawer-canvas[data-location="end"] .mobile-menu .ct-sub-menu-trigger,
.ct-drawer-canvas[data-location="end"] .mobile-menu [class*="dropdown-toggle"],
.ct-drawer-canvas[data-location="end"] .mobile-menu button[aria-expanded] {
  width: 31px !important;
  min-width: 31px !important;
  height: 31px !important;
  min-height: 31px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 !important;
  color: #4a2f1d !important;
  opacity: 1 !important;
  background: rgba(255, 253, 247, .76) !important;
  border: 1px solid rgba(110, 75, 38, .48) !important;
  border-radius: 6px !important;
  box-shadow: 0 1px 5px rgba(0, 0, 0, .10) !important;
}

#offcanvas .mobile-menu .child-indicator svg,
#offcanvas .mobile-menu .ct-sub-menu-trigger svg,
#offcanvas .mobile-menu [class*="dropdown-toggle"] svg,
#offcanvas .mobile-menu button[aria-expanded] svg,
.ct-drawer-canvas[data-location="end"] .mobile-menu .child-indicator svg,
.ct-drawer-canvas[data-location="end"] .mobile-menu .ct-sub-menu-trigger svg,
.ct-drawer-canvas[data-location="end"] .mobile-menu [class*="dropdown-toggle"] svg,
.ct-drawer-canvas[data-location="end"] .mobile-menu button[aria-expanded] svg {
  width: 15px !important;
  height: 15px !important;
  color: #4a2f1d !important;
  stroke: currentColor !important;
  stroke-width: 2.6 !important;
  fill: none !important;
  opacity: 1 !important;
}

/* Les flèches des branches ouvertes restent foncées ; seule la catégorie active
   conserve le brun-rouge dans son texte. */
#offcanvas .mobile-menu button[aria-expanded="true"],
.ct-drawer-canvas[data-location="end"] .mobile-menu button[aria-expanded="true"] {
  color: #7b3f22 !important;
  border-color: rgba(123, 63, 34, .62) !important;
}

@media (max-width: 420px) {
  #offcanvas,
  #offcanvas.ct-panel,
  .ct-drawer-canvas[data-location="end"] #offcanvas,
  .ct-drawer-canvas[data-location="end"] > .ct-panel {
    width: calc(100vw - 26px) !important;
    max-width: calc(100vw - 26px) !important;
    right: 8px !important;
    bottom: 8px !important;
    height: calc(100dvh - var(--artsun-popup-top) - 8px) !important;
    max-height: calc(100dvh - var(--artsun-popup-top) - 8px) !important;
    margin: var(--artsun-popup-top) 8px 8px auto !important;
    border-radius: 0 0 12px 12px !important;
  }
}