/* ============================= */
/* HEADER - GRHTLD */
/* ============================= */

:root {
  --bg: #F4F1EA;
  --surface: #FFFFFF;
  --ink: #14110D;
  --ink-2: #3B362D;
  --line: #DDD6C6;

  --navy: #1F3565;
  --navy-dk: #152545;
  --gold: #D9A536;
  --gold-soft: #F4E2B8;

  --serif: "Source Serif 4", "Times New Roman", serif;
  --sans: "Plus Jakarta Sans", system-ui, -apple-system, sans-serif;

  --ease: cubic-bezier(.22, .8, .28, 1);

  --moto-height: 32px;
  --header-height: 96px;
}

/* ============================= */
/* GLOBAL */
/* ============================= */

html,
body {
  overflow-x: clip !important;
}

body {
  padding-top: 0 !important;
}

/* ============================= */
/* MOTO STRIP */
/* visible seulement en haut de page */
/* ============================= */

.moto_strip {
  position: relative !important;
  top: auto !important;
  left: auto !important;
  z-index: 1002 !important;

  width: 100% !important;
  height: var(--moto-height) !important;
  min-height: var(--moto-height) !important;

  padding: 0 16px !important;
  box-sizing: border-box !important;

  display: flex !important;
  align-items: center !important;
  justify-content: center !important;

  background: var(--navy) !important;
  color: var(--gold-soft) !important;

  font-family: var(--sans) !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  letter-spacing: .12em !important;
  text-transform: uppercase !important;
  line-height: 1 !important;

  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

.moto_strip em {
  font-family: var(--serif) !important;
  font-style: italic !important;
  color: var(--gold) !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  font-size: 14px !important;
  font-weight: 400 !important;
  margin: 0 4px !important;
}

/* ============================= */
/* HEADER GLOBAL */
/* ============================= */

.header {
  position: fixed !important;

  /* Au chargement, le header est sous le motto strip */
  top: var(--moto-height) !important;
  left: 0 !important;
  z-index: 1001 !important;

  width: 100% !important;
  height: var(--header-height) !important;
  min-height: var(--header-height) !important;

  background: rgba(244, 241, 234, .94) !important;
  border-bottom: 1px solid rgba(221, 214, 198, .75) !important;

  backdrop-filter: blur(10px) !important;
  -webkit-backdrop-filter: blur(10px) !important;

  transition:
    top .25s var(--ease),
    background .25s var(--ease),
    box-shadow .25s var(--ease),
    border-color .25s var(--ease) !important;
}

/* Au scroll, le header remonte en haut */
.header.scrolling,
.header.is-scrolled {
  top: 0 !important;
  background: rgba(244, 241, 234, .98) !important;
  box-shadow: 0 12px 40px rgba(20, 17, 13, .08) !important;
}

/* ============================= */
/* COMPENSATION DU HEADER FIXED */
/* ============================= */

/*
  La moto_strip est dans le flux.
  Le header est fixed.
  Donc on compense seulement la hauteur du header.
*/

main {
  padding-top: var(--header-height) !important;
}

/* Si smooth scroll est actif */
#smooth-wrapper {
  padding-top: var(--header-height) !important;
}

/* Évite double espace si main est dans smooth-wrapper */
#smooth-wrapper main {
  padding-top: 0 !important;
}

/* ============================= */
/* STRUCTURE HEADER */
/* ============================= */

.header .header__main,
.header .header__main.container {
  max-width: 1280px !important;
  width: 100% !important;

  height: var(--header-height) !important;
  min-height: var(--header-height) !important;

  margin: 0 auto !important;
  padding: 0 32px !important;

  display: grid !important;
  grid-template-columns: 210px minmax(0, 1fr) auto !important;
  align-items: center !important;
  gap: 32px !important;

  box-sizing: border-box !important;
}

/* ============================= */
/* LOGO */
/* ============================= */

.header .header__logo {
  width: 210px !important;
  height: 76px !important;
  min-width: 210px !important;
  min-height: 76px !important;

  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;

  margin: 0 !important;
  padding: 0 !important;
  line-height: 0 !important;

  text-decoration: none !important;
  position: relative !important;
  z-index: 10 !important;
}

.header .header__logo img {
  width: 210px !important;
  height: 76px !important;
  max-width: 210px !important;
  max-height: 76px !important;

  display: block !important;
  object-fit: contain !important;
  object-position: center left !important;

  margin: 0 !important;
  padding: 0 !important;

  transition:
    opacity .2s var(--ease),
    filter .2s var(--ease) !important;
}

.header .header__logo:hover img {
  opacity: .78 !important;
}

/* ============================= */
/* MENU CENTRAL DESKTOP */
/* ============================= */

.header .menu {
  width: 100% !important;
  height: var(--header-height) !important;
  min-width: 0 !important;

  display: flex !important;
  align-items: center !important;
  justify-content: center !important;

  margin: 0 !important;
  padding: 0 !important;

  position: static !important;
  transform: none !important;

  overflow: visible !important;
  background: transparent !important;
  border: 0 !important;
}

.header .menu__main {
  height: var(--header-height) !important;

  display: flex !important;
  align-items: center !important;
  justify-content: center !important;

  gap: 36px !important;

  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
}

.header .menu__main li {
  height: var(--header-height) !important;

  display: flex !important;
  align-items: center !important;

  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;

  position: relative !important;
}

.header .menu__main li::before,
.header .menu__main li::marker {
  display: none !important;
  content: none !important;
  border-bottom: 1px solid var(--gold);
}

.header .menu__main a,
.header .menu__main span {
  position: relative !important;

  height: 42px !important;

  display: inline-flex !important;
  align-items: center !important;

  padding: 0 !important;

  font-family: var(--sans) !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  line-height: 1 !important;

  color: var(--ink) !important;
  text-decoration: none !important;

  transition: color .2s var(--ease) !important;
}

.header .menu__main a::after {
  content: "" !important;
  position: absolute !important;

  left: 0 !important;
  bottom: 4px !important;

  width: 0 !important;
  height: 2px !important;

  background: var(--gold) !important;
  transition: width .25s var(--ease) !important;
}

.header .menu__main a:hover,
.header .menu__main span:hover {
  color: var(--navy) !important;
}

.header .menu__main a:hover::after {
  width: 100% !important;
}

/* ============================= */
/* MENU ACTIF WORDPRESS */
/* ============================= */

.header .menu__main li.current-menu-item > a,
.header .menu__main li.current_page_item > a,
.header .menu__main li.current-menu-ancestor > a,
.header .menu__main li.current_page_ancestor > a {
  color: var(--navy) !important;
}

.header .menu__main li.current-menu-item > a::after,
.header .menu__main li.current_page_item > a::after,
.header .menu__main li.current-menu-ancestor > a::after,
.header .menu__main li.current_page_ancestor > a::after {
  width: 100% !important;
}

/* ============================= */
/* SOUS-MENUS DESKTOP */
/* ============================= */

@media (min-width: 992px) {
  .header .menu__main > .menu-item {
    position: relative !important;
  }

  .header .menu__main > .menu-item > .sub-menu {
    position: absolute !important;

    top: calc(100% + 20px) !important;
    left: 50% !important;
    transform: translateX(-50%) translateY(10px) !important;

    min-width: 240px !important;

    margin: 0 !important;
    padding: 18px !important;

    background: var(--surface) !important;
    border: 1px solid var(--line) !important;
    border-radius: 12px !important;
    box-shadow: 0 24px 50px rgba(20, 17, 13, .12) !important;

    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;

    transition:
      opacity .2s var(--ease),
      transform .2s var(--ease),
      visibility .2s !important;

    z-index: 20 !important;
  }

  .header .menu__main > .menu-item:hover > .sub-menu {
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    transform: translateX(-50%) translateY(0) !important;
  }

  .header .menu__main > .menu-item > .sub-menu li {
    height: auto !important;
  }

  .header .menu__main > .menu-item > .sub-menu li:not(:last-child) {
    margin-bottom: 12px !important;
  }

  .header .menu__main > .menu-item > .sub-menu a {
    height: auto !important;
    font-size: 14px !important;
    color: var(--ink) !important;
    white-space: nowrap !important;
  }

  .header .menu__main > .menu-item > .sub-menu a::after {
    display: none !important;
  }

  .header .menu__main > .menu-item > .sub-menu a:hover {
    color: var(--navy) !important;
  }
}

/* ============================= */
/* CTA DESKTOP */
/* ============================= */

.header .header__cta {
  height: var(--header-height) !important;

  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;

  gap: 10px !important;

  margin: 0 !important;
  padding: 0 !important;

  flex-shrink: 0 !important;
  white-space: nowrap !important;
}

.header .cta {
  height: 42px !important;
  min-height: 42px !important;

  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;

  padding: 0 20px !important;
  margin: 0 !important;

  border-radius: 999px !important;
  border: 1px solid transparent !important;

  font-family: var(--sans) !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  line-height: 1 !important;

  text-decoration: none !important;
  white-space: nowrap !important;

  box-sizing: border-box !important;
  cursor: pointer !important;

  transition:
    background .25s var(--ease),
    color .25s var(--ease),
    border-color .25s var(--ease),
    transform .2s var(--ease) !important;
}

.header .cta::before,
.header .cta::after {
  display: none !important;
  content: none !important;
}

/* Contact */
.header .cta--ghost {
  color: var(--navy) !important;
  background: transparent !important;
  border-color: var(--navy) !important;
}

.header .cta--ghost:hover {
  color: #ffffff !important;
  background: var(--navy) !important;
  border-color: var(--navy) !important;
  transform: translateY(-1px) !important;
}

/* Adhérer */
.header .cta--primary {
  color: #ffffff !important;
  background: var(--navy) !important;
  border-color: var(--navy) !important;
}

.header .cta--primary:hover {
  color: #ffffff !important;
  background: var(--navy-dk) !important;
  border-color: var(--navy-dk) !important;
  transform: translateY(-1px) !important;
}

.header .cta--primary,
.header .cta--primary span,
.header .cta--primary strong,
.header .cta--primary * {
  color: #ffffff !important;
}

/* ============================= */
/* BURGER */
/* ============================= */

.header .menu_mobile {
  display: none;

  width: 44px;
  height: 44px;

  border: 1px solid var(--line);
  border-radius: 50%;

  background: var(--surface);

  align-items: center;
  justify-content: center;

  cursor: pointer;

  position: relative;
  z-index: 30;
}

.header .menu__toggle {
  display: block;

  width: 22px;
  height: 16px;

  object-fit: contain;
  cursor: pointer;
}

/* ============================= */
/* CTA DANS MENU BURGER */
/* ============================= */

.header .menu__mobile-cta {
  display: none !important;
}

/* ============================= */
/* TABLETTE / MOBILE */
/* ============================= */

@media (max-width: 991px) {
  :root {
    --moto-height: 30px;
    --header-height: 76px;
  }

  .moto_strip {
    font-size: 10.5px !important;
    letter-spacing: .06em !important;
    padding: 0 10px !important;
  }

  .moto_strip em {
    font-size: 12.5px !important;
  }

  .header .header__main,
  .header .header__main.container {
    grid-template-columns: minmax(0, 1fr) auto auto !important;

    padding: 0 16px !important;
    gap: 10px !important;
  }

  .header .header__logo {
    width: clamp(132px, 42vw, 170px) !important;
    height: auto !important;
    min-width: 0 !important;
    min-height: auto !important;
  }

  .header .header__logo img {
    width: clamp(132px, 42vw, 170px) !important;
    height: auto !important;
    max-width: clamp(132px, 42vw, 170px) !important;
    max-height: 58px !important;
  }

  .header .menu_mobile {
    display: inline-flex !important;
    grid-column: 3 !important;
    justify-self: end !important;
  }

  .header .header__cta {
    grid-column: 2 !important;
    height: var(--header-height) !important;

    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;

    gap: 8px !important;
  }

  .header .header__cta .cta--ghost {
    display: none !important;
  }

  .header .header__cta .cta--primary {
    display: inline-flex !important;

    height: 38px !important;
    min-height: 38px !important;

    padding: 0 15px !important;
    font-size: 13px !important;
  }

  .header .menu {
    position: fixed !important;

    top: var(--header-height) !important;
    left: 0 !important;

    width: 100% !important;
    height: calc(100dvh - var(--header-height)) !important;
    min-height: calc(100dvh - var(--header-height)) !important;

    background: var(--bg) !important;
    border-top: 1px solid var(--line) !important;

    padding: 34px 22px !important;

    transform: translateX(100%) !important;
    opacity: 0 !important;
    pointer-events: none !important;

    transition:
      transform .3s var(--ease),
      opacity .3s var(--ease) !important;

    z-index: 1000 !important;

    overflow-y: auto !important;
    box-sizing: border-box !important;

    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    justify-content: flex-start !important;
  }

  .header .menu.open {
    transform: translateX(0) !important;
    opacity: 1 !important;
    pointer-events: auto !important;
  }

  .header .menu__main {
    width: 100% !important;
    height: auto !important;

    flex-direction: column !important;
    align-items: flex-start !important;
    justify-content: flex-start !important;

    gap: 0 !important;
  }

  .header .menu__main li {
    width: 100% !important;
    height: auto !important;
    display: block !important;
  }

  .header .menu__main a,
  .header .menu__main span {
    width: 100% !important;
    height: auto !important;

    display: flex !important;
    align-items: center !important;

    padding: 18px 0 !important;

    font-family: var(--serif) !important;
    font-size: clamp(28px, 8vw, 42px) !important;
    font-weight: 400 !important;
    line-height: 1.05 !important;

    color: var(--ink) !important;

    border-bottom: 1px solid var(--line) !important;
  }

  .header .menu__main li:last-child > a {
    border-bottom: 0 !important;
  }

  .header .menu__main a::after {
    display: none !important;
  }

  .header .menu__main > .menu-item > .sub-menu {
    position: static !important;

    margin: 4px 0 14px !important;
    padding: 0 0 0 18px !important;

    border-left: 1px solid var(--line) !important;

    box-shadow: none !important;
    background: transparent !important;

    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
    pointer-events: auto !important;
  }

  .header .menu__main > .menu-item > .sub-menu a {
    padding: 10px 0 !important;

    font-family: var(--sans) !important;
    font-size: 16px !important;
    line-height: 1.4 !important;

    border-bottom: 0 !important;
  }

  .header .menu__mobile-cta {
    width: 100% !important;

    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;

    margin-top: 32px !important;
    padding-top: 28px !important;

    border-top: 1px solid var(--line) !important;
  }

  .header .menu__mobile-cta .cta {
    width: 100% !important;
    height: 48px !important;
    min-height: 48px !important;

    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;

    padding: 0 22px !important;

    border-radius: 999px !important;

    font-family: var(--sans) !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    line-height: 1 !important;

    text-decoration: none !important;
    white-space: nowrap !important;

    border: 1px solid transparent !important;
  }

  .header .menu__mobile-cta .cta--ghost {
    color: var(--navy) !important;
    background: transparent !important;
    border-color: var(--navy) !important;
  }

  .header .menu__mobile-cta .cta--ghost:hover {
    color: #ffffff !important;
    background: var(--navy) !important;
    border-color: var(--navy) !important;
  }

  .header .menu__mobile-cta .cta--primary {
    color: #ffffff !important;
    background: var(--navy) !important;
    border-color: var(--navy) !important;
  }

  .header .menu__mobile-cta .cta--primary,
  .header .menu__mobile-cta .cta--primary * {
    color: #ffffff !important;
  }

  .header .menu__mobile-cta .cta--primary:hover {
    color: #ffffff !important;
    background: var(--navy-dk) !important;
    border-color: var(--navy-dk) !important;
  }

  body:has(.header .menu.open) {
    overflow: hidden !important;
    max-height: 100vh !important;
  }

  body:has(.header .menu.open) main.dis_none,
  body:has(.header .menu.open) footer.dis_none {
    display: none !important;
  }
}

/* ============================= */
/* MOBILE */
/* ============================= */

@media (max-width: 600px) {
  :root {
    --moto-height: 30px;
    --header-height: 72px;
  }

  .header .header__main,
  .header .header__main.container {
    padding: 0 14px !important;
    gap: 8px !important;
  }

  .header .header__logo {
    width: clamp(126px, 40vw, 155px) !important;
  }

  .header .header__logo img {
    width: clamp(126px, 40vw, 155px) !important;
    max-width: clamp(126px, 40vw, 155px) !important;
    max-height: 52px !important;
  }

  .header .header__cta .cta--primary {
    height: 36px !important;
    min-height: 36px !important;

    padding: 0 13px !important;

    font-size: 12.5px !important;
  }

  .header .menu_mobile {
    width: 40px !important;
    height: 40px !important;
  }

  .header .menu {
    padding: 28px 20px !important;
  }

  .header .menu__main a,
  .header .menu__main span {
    font-size: clamp(26px, 8.5vw, 34px) !important;
  }
}

/* ============================= */
/* PETITS TÉLÉPHONES */
/* ============================= */

@media (max-width: 430px) {
  .header .header__main,
  .header .header__main.container {
    grid-template-columns: minmax(0, 1fr) auto auto !important;
  }

  .header .header__cta {
    grid-column: 2 !important;

    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;

    gap: 8px !important;
  }

  .header .header__cta .cta--ghost {
    display: none !important;
  }

  .header .header__cta .cta--primary {
    display: inline-flex !important;

    height: 38px !important;
    min-height: 38px !important;

    padding: 0 14px !important;

    font-size: 12px !important;
  }

  .header .header__cart {
    width: 38px !important;
    height: 38px !important;
    min-width: 38px !important;
  }

  .header .header__cart svg {
    width: 17px !important;
    height: 17px !important;
  }

  .header .menu_mobile {
    grid-column: 3 !important;
  }
}

/* ============================= */
/* TRÈS PETITS TÉLÉPHONES */
/* ============================= */

@media (max-width: 360px) {
  .moto_strip {
    font-size: 9.5px !important;
    letter-spacing: .03em !important;
  }

  .header .header__logo {
    width: 132px !important;
  }

  .header .header__logo img {
    width: 132px !important;
    max-width: 132px !important;
  }

  .header .menu_mobile {
    width: 38px !important;
    height: 38px !important;
  }
}
/* ===================================================== */
/* FIX FINAL SANS JS - MOTO STRIP + NAVBAR STICKY */
/* ===================================================== */

/* Le bandeau bleu reste dans le flux normal */
.moto_strip {
  position: relative !important;
  top: auto !important;
  left: auto !important;
  z-index: 1002 !important;

  width: 100% !important;
  height: var(--moto-height) !important;
  min-height: var(--moto-height) !important;
}

/* La navbar est sous le bandeau au chargement,
   puis colle automatiquement en haut au scroll */
.header {
  position: sticky !important;
  top: 0 !important;
  left: auto !important;
  z-index: 1001 !important;

  width: 100% !important;
  height: var(--header-height) !important;
  min-height: var(--header-height) !important;
}

/* On annule les anciennes compensations du fixed */
main {
  padding-top: 0 !important;
}

#smooth-wrapper {
  padding-top: 0 !important;
}

#smooth-wrapper main {
  padding-top: 0 !important;
}

/* Les classes scroll ne doivent plus modifier le top */
.header.scrolling,
.header.is-scrolled,
body.nav-is-scrolled .header {
  top: 0 !important;
}

/* ===================================================== */
/* MENU BURGER AVEC HEADER STICKY */
/* ===================================================== */

@media (max-width: 991px) {
  .header {
    position: sticky !important;
    top: 0 !important;
  }

  .header .header__main,
  .header .header__main.container {
    position: relative !important;
  }

  .header .menu {
    position: absolute !important;

    top: 100% !important;
    left: 0 !important;

    width: 100vw !important;
    height: calc(100dvh - var(--header-height)) !important;
    min-height: calc(100dvh - var(--header-height)) !important;

    margin-left: calc(50% - 50vw) !important;

    background: var(--bg) !important;
    border-top: 1px solid var(--line) !important;

    padding: 34px 22px !important;

    transform: translateX(100%) !important;
    opacity: 0 !important;
    pointer-events: none !important;

    transition:
      transform .3s var(--ease),
      opacity .3s var(--ease) !important;

    z-index: 1000 !important;

    overflow-y: auto !important;
    box-sizing: border-box !important;

    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    justify-content: flex-start !important;
  }

  .header .menu.open {
    transform: translateX(0) !important;
    opacity: 1 !important;
    pointer-events: auto !important;
  }
}

/* ============================= */
/* ICÔNE PANIER HEADER */
/* ============================= */

.header .header__cta {
  gap: 10px !important;
}

.header .header__cart {
  position: relative !important;

  width: 42px !important;
  height: 42px !important;
  min-width: 42px !important;

  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;

  border: 1px solid var(--navy) !important;
  border-radius: 999px !important;

  background: transparent !important;
  color: var(--navy) !important;

  text-decoration: none !important;

  transition:
    background .25s var(--ease),
    color .25s var(--ease),
    border-color .25s var(--ease),
    transform .2s var(--ease) !important;
}

.header .header__cart svg {
  width: 19px !important;
  height: 19px !important;
  display: block !important;
  fill: currentColor !important;
}

.header .header__cart:hover {
  background: var(--navy) !important;
  color: #fff !important;
  border-color: var(--navy) !important;
  transform: translateY(-1px) !important;
}

.header .header__cart-count {
  position: absolute !important;
  top: -6px !important;
  right: -6px !important;

  min-width: 18px !important;
  height: 18px !important;
  padding: 0 5px !important;

  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;

  border-radius: 999px !important;

  background: var(--gold) !important;
  color: var(--navy-dk) !important;

  font-family: var(--sans) !important;
  font-size: 10px !important;
  font-weight: 800 !important;
  line-height: 1 !important;
}

@media (max-width: 991px) {
  .header .header__cart {
    width: 38px !important;
    height: 38px !important;
    min-width: 38px !important;
  }

  .header .header__cart svg {
    width: 17px !important;
    height: 17px !important;
  }
}