/* Dynaparts 2026-09-30 — menu du header.
   Mobile (< 768 px) : barre compacte, tiroir de menu, sélecteur de véhicule dépliable.
   Ordinateur (>= 992 px, souris) : listes déroulantes des rubriques du menu Leo.
   Contenu : header.tpl (menu Leo + catégories). Même principe que hubshop, couleurs dynaparts. */

.dp-mbar,
.dp-mbar-ph,
.dp-drawer { display: none; }
.vehicle-search-toggle { display: none; }
.vehicle-search-fields { display: contents; }
.dp-mm { display: none; }

@media (max-width: 767px) {

  /* ---------- Ancien header mobile masqué ---------- */
  #header .box-top-header,
  #header .topnav .box-bottom-header:not(#bordered),
  #header .navbar-toggle,
  #off-canvas-nav { display: none !important; }
  #header .topnav > .wrapper:first-child { display: none !important; }

  /* ---------- Bandeau livraison compact ---------- */
  #header .st-fsm-header .alert { margin: 0; padding: 6px 12px; }
  #header .st-fsm-header .st-fsm-text { font-size: 12px; line-height: 1.35; }

  /* ---------- Barre mobile ---------- */
  .dp-mbar-ph { display: block; height: 0; }
  .dp-mbar {
    position: relative;
    z-index: 1000;
    display: flex;
    align-items: center;
    gap: 2px;
    height: 60px;
    padding: 0 6px;
    background: #ffffff;
    border-bottom: 1px solid #e3e5e8;
  }
  .dp-mbar.is-fixed {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    box-shadow: 0 2px 12px rgba(40, 43, 47, .12);
  }
  .dp-mbar__btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 44px;
    height: 44px;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: #282b2f;
    cursor: pointer;
  }
  .dp-mbar__btn:hover,
  .dp-mbar__btn:focus { color: #e9271a; }
  .dp-mbar__logo { display: flex; flex: 1 1 auto; justify-content: center; min-width: 0; }
  .dp-mbar__logo img { display: block; width: auto; max-width: none; height: 34px; }
  .dp-mbar__count {
    position: absolute;
    top: 3px;
    right: 1px;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: 9px;
    background: #e9271a;
    color: #ffffff;
    font-size: 11px;
    font-weight: 700;
    line-height: 18px;
    text-align: center;
  }
  .dp-mbar__count.is-empty { display: none; }

  /* ---------- Tiroir de menu ---------- */
  html.dp-noscroll,
  html.dp-noscroll body { overflow: hidden; }
  .dp-drawer { display: block; position: fixed; inset: 0; z-index: 10050; }
  .dp-drawer[hidden] { display: none; }
  .dp-drawer__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(13, 18, 22, .55);
    opacity: 0;
    transition: opacity .25s ease;
  }
  .dp-drawer__panel {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    display: flex;
    flex-direction: column;
    width: 86vw;
    max-width: 330px;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    background: #ffffff;
    box-shadow: 8px 0 24px rgba(0, 0, 0, .18);
    transform: translateX(-102%);
    transition: transform .25s ease;
  }
  .dp-drawer.is-open .dp-drawer__backdrop { opacity: 1; }
  .dp-drawer.is-open .dp-drawer__panel { transform: none; }

  .dp-drawer__head {
    position: sticky;
    top: 0;
    z-index: 2;
    display: flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: space-between;
    height: 56px;
    padding: 0 6px 0 16px;
    background: #282b2f;
    color: #ffffff;
  }
  .dp-drawer__title {
    display: flex;
    align-items: center;
    gap: 10px;
    font-family: 'DP Saira', Verdana, Geneva, sans-serif;
    font-size: 20px;
    font-style: italic;
    font-weight: 800;
    text-transform: uppercase;
  }
  .dp-drawer__close {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-width: 44px;
    min-height: 44px;
    padding: 0 10px;
    border: 0;
    background: transparent;
    color: #ffffff;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
  }
  .dp-drawer__list,
  .dp-drawer__sub { margin: 0; padding: 0; list-style: none; }
  .dp-drawer__item { border-bottom: 1px solid #eceef0; }
  .dp-drawer__row { position: relative; display: flex; align-items: stretch; }
  .dp-drawer__link {
    display: flex;
    flex: 1 1 auto;
    align-items: center;
    min-width: 0;
    min-height: 52px;
    padding: 8px 12px 8px 16px;
    color: #282b2f;
    font-family: 'DP Saira', Verdana, Geneva, sans-serif;
    font-size: 17px;
    font-style: italic;
    font-weight: 800;
    line-height: 1.2;
    text-decoration: none;
    text-transform: uppercase;
  }
  .dp-drawer__link:hover,
  .dp-drawer__link:focus { color: #e9271a; text-decoration: none; }
  .dp-drawer__toggle {
    position: relative;
    flex-shrink: 0;
    width: 52px;
    margin: 0;
    padding: 0;
    border: 0;
    border-left: 1px solid #eceef0;
    background: transparent;
    cursor: pointer;
  }
  .dp-drawer__toggle::before,
  .dp-drawer__toggle::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    width: 14px;
    height: 2px;
    margin: -1px 0 0 -7px;
    background: #282b2f;
    transition: transform .2s ease, background .2s ease;
  }
  .dp-drawer__toggle::after { transform: rotate(90deg); }
  .dp-drawer__toggle[aria-expanded="true"]::before,
  .dp-drawer__toggle[aria-expanded="true"]::after { background: #e9271a; }
  .dp-drawer__toggle[aria-expanded="true"]::after { transform: rotate(0deg); }

  /* 2e niveau */
  .dp-drawer__sub { background: #ffffff; border-top: 1px solid #eceef0; }
  .dp-drawer__sub > li + li { border-top: 1px solid #f1f2f4; }
  .dp-drawer__row--2 .dp-drawer__toggle { width: 48px; }
  .dp-drawer__link--2 {
    min-height: 46px;
    padding: 10px 12px 10px 24px;
    font-family: inherit;
    font-size: 15px;
    font-style: normal;
    font-weight: 600;
    text-transform: none;
  }
  /* 3e niveau */
  .dp-drawer__sub--3 { background: #f6f7f8; }
  .dp-drawer__link--3 {
    min-height: 44px;
    padding: 10px 16px 10px 40px;
    font-family: inherit;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    text-transform: none;
  }

  /* Pied du tiroir */
  .dp-drawer__extra {
    display: flex;
    flex-direction: column;
    margin-top: auto;
    padding: 12px 16px 24px;
    border-top: 6px solid #eceef0;
  }
  .dp-drawer__extra-link {
    display: flex;
    align-items: center;
    min-height: 44px;
    color: #282b2f;
    font-size: 15px;
    font-weight: 600;
    text-decoration: none;
  }
  .dp-drawer__phone {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin-top: 10px;
    padding: 12px 14px;
    border-radius: 10px;
    background: #fdecea;
    color: #c41f13;
    text-decoration: none;
  }
  .dp-drawer__phone strong { font-size: 17px; }
  .dp-drawer__phone span { color: #4f545a; font-size: 12px; }
  .dp-drawer__lang { display: flex; gap: 8px; margin-top: 14px; }
  .dp-drawer__lang a {
    display: inline-flex;
    align-items: center;
    min-height: 40px;
    padding: 0 14px;
    border: 2px solid #cfd3d8;
    border-radius: 999px;
    color: #282b2f;
    font-size: 13px;
    font-weight: 700;
    text-decoration: none;
  }
  .dp-drawer__lang a[aria-current="true"] { border-color: #282b2f; background: #282b2f; color: #ffffff; }

  /* ---------- Sélecteur de véhicule compact ---------- */
  .vehicle-search-widget .vehicle-search-label { display: none !important; }
  .vehicle-search-widget .vehicle-search-toggle {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    min-height: 48px;
    margin: 0;
    padding: 0 16px;
    border: 1px solid rgba(255, 255, 255, .25);
    border-radius: 10px;
    background: transparent;
    color: #ffffff;
    font-size: 15px;
    font-weight: 700;
    text-transform: uppercase;
    cursor: pointer;
  }
  .vehicle-search-widget .vehicle-search-toggle .fa-car { font-size: 20px; }
  .vehicle-search-widget .vehicle-search-toggle__chev { margin-left: auto; transition: transform .2s; }
  .vehicle-search-widget.is-open .vehicle-search-toggle__chev { transform: rotate(180deg); }
  .vehicle-search-widget .vehicle-search-fields { display: none; }
  .vehicle-search-widget.is-open .vehicle-search-fields {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    align-self: stretch;
    gap: 8px;
    width: 100%;
    margin-top: 10px;
  }
  .vehicle-search-widget.is-open .vehicle-search-fields > .vehicle-select,
  .vehicle-search-widget.is-open .vehicle-search-fields > .vehicle-search-btn {
    width: 100% !important;
    max-width: none !important;
    min-height: 46px;
    margin: 0 !important;
  }

  /* ---------- Recherche par référence pleine largeur ---------- */
  #header #search_block_top { float: none; width: 100%; padding: 0 12px 12px; }
  #header #search_block_top #searchbox {
    display: flex;
    align-items: stretch;
    width: 100%;
    max-width: none;
    margin: 0;
  }
  #header #search_block_top #search_query_top {
    flex: 1 1 auto;
    width: auto;
    min-width: 0;
    height: 46px;
    margin: 0;
    padding: 0 14px;
    border: 0;
    border-radius: 10px 0 0 10px;
    background: #ffffff;
    color: #282b2f;
    font-size: 16px;
  }
  #header #search_block_top .btn[name="submit_search"] {
    position: static;
    flex: 0 0 52px;
    width: 52px;
    height: 46px;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 0 10px 10px 0;
    background: #e9271a;
    color: #ffffff;
    font-size: 18px;
    line-height: 46px;
  }
  #header #search_block_top .btn[name="submit_search"]:hover,
  #header #search_block_top .btn[name="submit_search"]:focus { background: #c41f13; }
}

/* ---------- Listes déroulantes ordinateur ---------- */
@media (min-width: 992px) and (hover: hover) {
  .dp-mm-on #header .left-bottom-header,
  .dp-mm-on #leo-top-menu .megamenu > li.dp-mm-parent { position: static; }
  #leo-top-menu .megamenu > li.dp-mm-parent > a .menu-title::after {
    content: "";
    display: inline-block;
    margin-left: 7px;
    vertical-align: 3px;
    border-top: 5px solid currentColor;
    border-right: 4px solid transparent;
    border-left: 4px solid transparent;
  }

  #header .dp-mm {
    display: block;
    position: absolute;
    top: 100%;
    left: 15px;
    right: 15px;
    z-index: 1001;
    padding: 26px 30px 18px;
    border-top: 3px solid #e9271a;
    background: #ffffff;
    box-shadow: 0 22px 40px rgba(13, 18, 22, .18);
    text-align: left;
    opacity: 0;
    visibility: hidden;
    transform: translateY(6px);
    transition: opacity .15s ease, transform .15s ease, visibility 0s linear .15s;
  }
  /* pont invisible entre la rubrique et le panneau (le survol ne se perd pas) */
  #header .dp-mm::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 100%;
    height: 18px;
  }
  #leo-top-menu .megamenu > li.dp-mm-parent:hover > .dp-mm,
  #leo-top-menu .megamenu > li.dp-mm-parent:focus-within > .dp-mm {
    opacity: 1;
    visibility: visible;
    transform: none;
    transition-delay: .08s, .08s, 0s;
  }
  #header .dp-mm__cols {
    max-height: calc(100vh - 260px);
    overflow-y: auto;
    column-count: 4;
    column-gap: 36px;
  }
  #header .dp-mm__group {
    -webkit-column-break-inside: avoid;
    break-inside: avoid;
    padding-bottom: 18px;
  }
  #header .dp-mm a {
    float: none;
    width: auto;
    height: auto;
    padding: 0;
    background: none;
    line-height: 1.35;
    text-decoration: none;
    white-space: normal;
  }
  #header .dp-mm a::before,
  #header .dp-mm a::after { display: none; }
  #header .dp-mm li {
    display: block;
    float: none;
    position: static;
    width: auto;
    margin: 0;
    padding: 0;
    border: 0;
  }
  #header .dp-mm .dp-mm__title {
    display: block;
    margin-bottom: 6px;
    color: #282b2f;
    font-family: 'DP Saira', Verdana, Geneva, sans-serif;
    font-size: 15px;
    font-style: italic;
    font-weight: 800;
    letter-spacing: .01em;
    text-transform: uppercase;
  }
  #header .dp-mm__list { margin: 0; padding: 0; list-style: none; }
  #header .dp-mm__list a {
    display: block;
    padding: 4px 0;
    color: #4f545a;
    font-size: 13px;
    font-weight: 400;
    text-transform: none;
  }
  /* rubrique à un seul niveau (ex. marques) : liste simple en colonnes */
  #header .dp-mm:not(.dp-mm--deep) .dp-mm__group { padding-bottom: 0; }
  #header .dp-mm:not(.dp-mm--deep) .dp-mm__title {
    margin: 0;
    padding: 7px 0;
    font-family: inherit;
    font-size: 13px;
    font-style: normal;
    font-weight: 700;
    letter-spacing: .03em;
  }
  #header .dp-mm .dp-mm__title:hover,
  #header .dp-mm .dp-mm__title:focus,
  #header .dp-mm__list a:hover,
  #header .dp-mm__list a:focus { color: #e9271a; }
  #header .dp-mm .dp-mm__all {
    display: block;
    margin-top: 8px;
    padding-top: 14px;
    border-top: 1px solid #eceef0;
    color: #e9271a;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .03em;
    text-transform: uppercase;
  }
  #header .dp-mm .dp-mm__all:hover,
  #header .dp-mm .dp-mm__all:focus { color: #c41f13; }
}