/* ==========================================================================
   HEADER DEELUXE W26 - widget Creative Elements "dlx-header" (module io_home_w26)
   Feuille chargée par le modèle d'en-tête CE : /img/cms/home-w26-2/css/header-w26.css
   Portée : .dlx-header uniquement, plus l'habillage du menu du module ets_megamenu
   qui est rendu à l'intérieur. Aucun fichier du thème n'est modifié.

   Version consolidée du 23/09/2026 (après les retours d'Iskander). Plan :
     1. Base, variables, bandeau
     2. Barre : logo, icônes, langues, recherche
     3. Navigation (markup ets_megamenu) et couleurs des entrées
     4. Panneaux de méga-menu (ordinateur)
     5. États : transparent sur le hero / crème (scroll, panneau ou recherche ouverts)
     6. Mobile et tablette : barre 62px, tiroir
     7. Mouvement réduit

   Les !important sont tous motivés par le thème (sélecteurs d'identifiant #header, a{font-size:.875rem},
   svg{fill:currentColor}, p{margin:0}) ou par le module ets_megamenu (fond blanc, colonnes à 25 %,
   panneaux en visibility:hidden). Chacun est commenté.
   ========================================================================== */

@font-face {
  font-family: "DLX Instrument Sans";
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url("/img/cms/home-w26-2/fonts/instrument-sans-latin-var.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* -------------------------------------------------------------------------
   1. Base
   ------------------------------------------------------------------------- */
.dlx-header {
  --dlx-h-ink: #1A1512;
  --dlx-h-cream: #FAF8F5;
  --dlx-h-line: #E7E0D6;
  --dlx-h-accent: #8A5A2E;
  --dlx-h-accent-over: #E3BE90;   /* Bagagerie sur le hero : brun clair lisible sur le voile */
  --dlx-h-outlet: #9C3B23;
  --dlx-h-outlet-over: #F0B9A4;   /* Outlet sur le hero */
  --dlx-h-lang-off: #A4998D;
  --dlx-h-link: #4A423A;
  --dlx-h-sans: "DLX Instrument Sans", "Helvetica Neue", Arial, sans-serif;
  --dlx-h-bar: 82px;
  position: relative;
  z-index: 1000;
  box-sizing: border-box;
  background: var(--dlx-h-cream);
  color: var(--dlx-h-ink);
  font-family: var(--dlx-h-sans);
  transition: background-color .25s ease, color .25s ease;
}
.dlx-header *,
.dlx-header *::before,
.dlx-header *::after {
  box-sizing: border-box;
}
.dlx-header .dlx-sr-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

/* Bandeau supérieur (mdgc_topbanner) */
.dlx-header__banner {
  min-height: 34px;
  background: var(--dlx-h-cream);
  color: var(--dlx-h-ink);
  font-size: 12px;
  text-align: center;
}
.dlx-header__banner:empty {
  display: none;
}

/* -------------------------------------------------------------------------
   2. Barre : logo à gauche, nav au centre de l'espace restant, icônes à droite
   ------------------------------------------------------------------------- */
.dlx-header .dlx-header__bar {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 24px;
  height: var(--dlx-h-bar);
  padding: 0 36px;
  border-bottom: 1px solid transparent;
  transition: border-color .25s ease, box-shadow .25s ease;
}
.dlx-header .dlx-header__logo {
  display: inline-flex;
  justify-self: start;
  color: inherit !important; /* le thème colore les liens du header par identifiant */
}
.dlx-header__logo-svg {
  display: block;
  width: auto;
  height: 28px;
}
.dlx-header__logo-svg path,
.dlx-header__logo-svg polygon {
  fill: currentColor; /* blanc sur le hero, encre en crème */
}
.dlx-header__burger {
  display: none;
}

/* Icônes : police icomoon du thème (mêmes glyphes que l'en-tête actuel), 22px.
   Le thème force svg{fill:currentColor}, d'où le choix de la police plutôt que des SVG au trait. */
.dlx-header .dlx-header__tools {
  display: flex;
  align-items: center;
  justify-self: end;
  gap: 20px;
}
.dlx-header .dlx-header__icon {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 24px;
  height: 24px;
  padding: 0;
  border: 0;
  background: none;
  color: inherit !important;
  cursor: pointer;
}
.dlx-header .dlx-header__glyph {
  display: inline-block;
  font-size: 22px;
  line-height: 1;
  color: inherit;
}
.dlx-header__badge {
  position: absolute;
  top: -6px;
  right: -9px;
  min-width: 15px;
  height: 15px;
  padding: 0 4px;
  border-radius: 999px;
  background: var(--dlx-h-ink);
  color: var(--dlx-h-cream);
  font-size: 9.5px;
  font-weight: 700;
  line-height: 15px;
  text-align: center;
}

/* Langues EN / FR : même taille pour le lien et la langue courante
   (le thème force a{font-size:.875rem}, donc EN sortait en 14px et FR en 12px) */
.dlx-header .dlx-header__langs {
  display: flex;
  align-items: baseline;
  gap: 7px;
  margin: 0 0 0 8px;
  padding-left: 14px;
  border-left: 1px solid var(--dlx-h-line);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .08em;
  line-height: 1;
}
.dlx-header .dlx-header__langs .dlx-header__lang {
  display: inline-block;
  color: var(--dlx-h-lang-off);
  font-family: var(--dlx-h-sans) !important;
  font-size: 12px !important;
  font-weight: 600;
  line-height: 1;
  text-decoration: none;
}
.dlx-header .dlx-header__langs .dlx-header__lang.is-current {
  color: inherit;
}

/* Recherche déroulante (champ maison, le bloc du thème est masqué par le JS) */
.dlx-header__search {
  border-top: 1px solid var(--dlx-h-line);
  background: var(--dlx-h-cream);
}
.dlx-header__search-inner {
  display: flex;
  align-items: center;
  gap: 10px;
  max-width: 720px;
  margin: 0 auto;
  padding: 16px 36px;
}
.dlx-header__search input[type="text"],
.dlx-header__search input[type="search"] {
  width: 100%;
  height: 44px;
  padding: 0 18px;
  border: 1px solid var(--dlx-h-line);
  border-radius: 999px;
  background: #fff;
  font-family: var(--dlx-h-sans);
  font-size: 14px;
}
.dlx-header .dlx-header__search-submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: var(--dlx-h-ink);
  color: var(--dlx-h-cream);
  cursor: pointer;
}
.dlx-header .dlx-header__search-submit .dlx-header__glyph {
  font-size: 18px;
}

/* -------------------------------------------------------------------------
   3. Navigation : markup du module ets_megamenu, habillé ici
   ------------------------------------------------------------------------- */
/* position statique : le panneau doit se caler sur la largeur du header, pas sur la nav.
   !important : le thème positionne les <nav> du header et les conteneurs du module par identifiant. */
.dlx-header .dlx-header__nav {
  position: static !important;
  min-width: 0;
}
.dlx-header .ets_mm_megamenu,
.dlx-header .ets_mm_megamenu_content,
.dlx-header .ets_mm_megamenu_content_content,
.dlx-header .ets_mm_megamenu .container,
.dlx-header .mm_menus_ul,
.dlx-header .mm_menus_li {
  position: static !important;
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 0;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}
.dlx-header .mm_menus_ul {
  display: flex;
  flex-wrap: nowrap;
  justify-content: center;
  gap: clamp(14px, 2.2vw, 34px);
  list-style: none;
}
/* Les entrées gardent leur largeur naturelle (le groupe ci-dessus les mettait à 100 % : elles s'étalaient
   sur toute la barre sur grand écran) */
.dlx-header .mm_menus_ul > .mm_menus_li {
  flex: 0 0 auto;
  width: auto;
}
@media (min-width: 1200px) {
  /* Chaque entrée occupe toute la hauteur de la barre : le survol reste actif pendant que la souris descend
     du libellé vers le panneau (sinon il se coupait dans les 33px sous le texte et le panneau se refermait) */
  .dlx-header .mm_menus_ul > .mm_menus_li {
    display: flex;
    align-items: center;
    height: var(--dlx-h-bar);
  }
  .dlx-header .mm_menus_ul > .mm_menus_li > a.ets_mm_url {
    align-self: center;
  }
}
.dlx-header .mm_menus_li > a.ets_mm_url {
  position: relative;
  display: inline-block;
  padding: 0;
  background: transparent !important;
  color: inherit !important; /* le thème colore le menu par identifiant */
  font-family: var(--dlx-h-sans);
  font-size: 12.5px;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: .1em;
  text-transform: uppercase;
  text-decoration: none !important;
  white-space: nowrap;
}
.dlx-header .mm_menus_li .mm_arrow,
.dlx-header .mm_menus_li .arrow,
.dlx-header .mm_menu_content_title::before,
.dlx-header .mm_menu_content_title::after {
  display: none !important; /* flèches et filet décoratif du module */
}
/* Le module ajoute une barre "MENU / RETOUR" et un bloc réservé au tiroir : jamais affichés tels quels */
.dlx-header .ybc-menu-toggle,
.dlx-header .close_menu,
.dlx-header .mm_menus_li.close_menu {
  display: none !important;
}

/* Couleurs de la maquette (état crème). La classe dlx-nav-item--<libellé> est posée par le widget
   (sales = Outlet en anglais, luggages = Bagagerie). Placées après la règle color:inherit ci-dessus. */
.dlx-header .dlx-nav-item--outlet > a.ets_mm_url,
.dlx-header .dlx-nav-item--sales > a.ets_mm_url {
  color: var(--dlx-h-outlet) !important;
}
.dlx-header .dlx-nav-item--bagagerie > a.ets_mm_url,
.dlx-header .dlx-nav-item--luggages > a.ets_mm_url {
  color: var(--dlx-h-accent) !important;
}

@media (min-width: 1200px) {
  /* Soulignement qui se déploie de gauche à droite */
  .dlx-header .mm_menus_li > a.ets_mm_url::after {
    content: "";
    position: absolute;
    right: 100%;
    bottom: -6px;
    left: 0;
    height: 1.5px;
    background: currentColor;
    transition: right .28s ease;
  }
  .dlx-header .mm_menus_li:hover > a.ets_mm_url::after,
  .dlx-header .mm_menus_li:focus-within > a.ets_mm_url::after {
    right: 0;
  }
  /* Entrée survolée en état crème : accent (Outlet garde son rouge) */
  .dlx-header.is-stuck .mm_menus_li:not(.dlx-nav-item--outlet):not(.dlx-nav-item--sales):hover > a.ets_mm_url,
  .dlx-header.is-stuck .mm_menus_li:not(.dlx-nav-item--outlet):not(.dlx-nav-item--sales):focus-within > a.ets_mm_url,
  .dlx-header.is-panel-open .mm_menus_li:not(.dlx-nav-item--outlet):not(.dlx-nav-item--sales):hover > a.ets_mm_url,
  .dlx-header.is-panel-open .mm_menus_li:not(.dlx-nav-item--outlet):not(.dlx-nav-item--sales):focus-within > a.ets_mm_url {
    color: var(--dlx-h-accent) !important;
  }
  /* Bloc du module réservé au mobile (réseaux sociaux) et pastilles d'univers : pas sur ordinateur */
  .dlx-header .mm_menus_li.footer_menu_li,
  .dlx-header__pills,
  .dlx-header__drawer-foot {
    display: none;
  }
}

/* -------------------------------------------------------------------------
   4. Panneaux de méga-menu (ordinateur)
   ------------------------------------------------------------------------- */
@media (min-width: 1200px) {
  /* Panneau pleine largeur, même crème que la barre (le module impose un fond blanc et une position
     relative à la nav avec des sélecteurs plus forts) */
  .dlx-header .mm_menus_li > .mm_columns_ul,
  .dlx-header .mm_columns_ul {
    position: absolute;
    top: 100%;
    left: 0 !important;
    display: flex !important;
    align-items: stretch;
    justify-content: center;
    gap: 20px;
    width: 100% !important;
    max-width: none !important;
    padding: 34px 36px 40px;
    border-top: 1px solid var(--dlx-h-line);
    border-bottom: 1px solid var(--dlx-h-line);
    background: var(--dlx-h-cream) !important;
    box-shadow: 0 12px 24px rgba(26, 21, 18, .06);
  }
  /* Colonnes du module : 345px maximum, centrées, comme le méga-menu actuel (le module fige 25 %) */
  .dlx-header .mm_columns_ul > .mm_columns_li {
    flex: 0 1 345px;
    float: none;
    width: auto !important;
    max-width: none !important;
    min-width: 0;
    margin: 0 !important;
    padding: 0 !important;
    border: 0;
  }
  /* Colonne laissée vide dans le module (New) : elle décalait les tuiles */
  .dlx-header .mm_columns_ul > .mm_columns_li:not(:has(.ets_mm_block)) {
    display: none;
  }
  .dlx-header .mm_columns_ul > .mm_columns_li > .mm_blocks_ul {
    display: block;
    margin: 0;
    padding: 0;
    list-style: none;
  }
  .dlx-header .mm_blocks_ul .mm_blocks_li {
    margin: 0;
    padding: 0;
    border: 0;
    background: none;
    list-style: none;
  }
  .dlx-header .ets_mm_block {
    position: relative;
    margin: 0;
  }
  .dlx-header .ets_mm_block_content .clearfix {
    display: none;
  }

  /* Tuile image : carré entier (pas de hauteur imposée, donc pas de recadrage), coins 12px,
     libellé centré en bas sur un dégradé, sans le filet du module */
  .dlx-header .mm_block_type_image .ets_mm_block_content > a,
  .dlx-header .mm_block_type_image .mm_img_content {
    position: relative;
    display: block;
    overflow: hidden;
    border-radius: 12px;
    background: transparent !important;
    text-decoration: none !important;
  }
  .dlx-header .mm_block_type_image .ets_mm_block_content img {
    position: relative;
    z-index: 0;
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    transition: transform .8s ease;
  }
  .dlx-header .mm_block_type_image .ets_mm_block_content a:hover img {
    transform: scale(1.04);
  }
  .dlx-header .mm_block_type_image .ets_mm_block_content > a::after {
    content: "";
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 1;
    height: 45%;
    pointer-events: none;
    background: linear-gradient(rgba(20, 14, 10, 0), rgba(20, 14, 10, .55));
  }
  .dlx-header .mm_block_type_image > .h4,
  .dlx-header .mm_block_type_image > h4 {
    position: absolute;
    right: 0;
    bottom: 16px;
    left: 0;
    z-index: 2;
    width: auto;
    margin: 0;
    padding: 0 !important;
    border: 0 !important;
    color: #fff;
    font-family: var(--dlx-h-sans) !important;
    font-size: 12.5px !important;
    font-weight: 600;
    letter-spacing: .12em;
    text-align: center;
    text-transform: uppercase;
    pointer-events: none;
  }
  .dlx-header .mm_block_type_image > .h4 a {
    color: inherit;
  }

  /* Colonne de liens (La marque) : 260px, entrées empilées, sur-titre comme la maquette */
  .dlx-header .mm_columns_ul > .mm_columns_li:has(.mm_block_type_cms),
  .dlx-header .mm_columns_ul > .mm_columns_li:has(.mm_block_type_html) {
    flex: 0 0 260px;
    padding-right: 20px !important;
  }
  .dlx-header .mm_columns_li:has(.mm_block_type_cms) > .mm_blocks_ul,
  .dlx-header .mm_columns_li:has(.mm_block_type_html) > .mm_blocks_ul {
    display: flex;
    flex-direction: column;
    gap: 11px;
  }
  .dlx-header .mm_columns_li:has(.mm_block_type_cms) > .mm_blocks_ul::before,
  .dlx-header .mm_columns_li:has(.mm_block_type_html) > .mm_blocks_ul::before {
    content: "Notre univers";
    display: block;
    margin: 4px 0 6px;
    color: var(--dlx-h-ink);
    font-size: 12.5px;
    font-weight: 600;
    letter-spacing: .12em;
    text-transform: uppercase;
  }
  .dlx-header[data-dlx-lang="en"] .mm_columns_li:has(.mm_block_type_cms) > .mm_blocks_ul::before,
  .dlx-header[data-dlx-lang="en"] .mm_columns_li:has(.mm_block_type_html) > .mm_blocks_ul::before {
    content: "Our world";
  }
  .dlx-header .mm_block_type_cms,
  .dlx-header .mm_block_type_html {
    position: static;
  }
  .dlx-header .mm_block_type_cms .ets_mm_block_content ul,
  .dlx-header .mm_block_type_html .ets_mm_block_content ul {
    margin: 0;
    padding: 0;
    list-style: none;
  }
  .dlx-header .mm_block_type_cms .ets_mm_block_content a,
  .dlx-header .mm_block_type_html .ets_mm_block_content a {
    display: inline;
    color: var(--dlx-h-link);
    font-family: var(--dlx-h-sans);
    font-size: 13.5px !important;
    font-weight: 400;
    line-height: 1.5;
    text-decoration: none;
    white-space: nowrap;
  }
  .dlx-header .mm_block_type_html .ets_mm_block_content b,
  .dlx-header .mm_block_type_html .ets_mm_block_content strong {
    font-size: inherit;
    font-weight: 400;
  }
  .dlx-header .mm_block_type_cms .ets_mm_block_content a:hover,
  .dlx-header .mm_block_type_html .ets_mm_block_content a:hover {
    color: var(--dlx-h-accent);
  }
}

/* -------------------------------------------------------------------------
   5. États
   ------------------------------------------------------------------------- */
/* 5a. Transparent par-dessus le hero (pages listées dans transparent_controllers), tant que rien n'est
   ouvert : voile dégradé, logo et libellés blancs, ombres de texte */
.dlx-header--over:not(.is-stuck):not(.is-panel-open):not(.is-search-open) {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  background: transparent;
  color: #fff;
}
.dlx-header--over:not(.is-stuck):not(.is-panel-open):not(.is-search-open) .dlx-header__bar::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  height: 260px;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(20, 14, 10, .52) 0%, rgba(20, 14, 10, .46) 16%, rgba(20, 14, 10, .18) 30%, rgba(20, 14, 10, 0) 52%);
}
.dlx-header--over:not(.is-stuck):not(.is-panel-open):not(.is-search-open) .dlx-header__bar > * {
  position: relative; /* au-dessus du voile */
}
.dlx-header--over:not(.is-stuck):not(.is-panel-open):not(.is-search-open) .mm_menus_li > a.ets_mm_url,
.dlx-header--over:not(.is-stuck):not(.is-panel-open):not(.is-search-open) .dlx-header__glyph {
  text-shadow: 0 1px 3px rgba(20, 14, 10, .55);
}
.dlx-header--over:not(.is-stuck):not(.is-panel-open):not(.is-search-open) .dlx-header__logo-svg {
  filter: drop-shadow(0 1px 3px rgba(20, 14, 10, .45));
}
.dlx-header--over:not(.is-stuck):not(.is-panel-open):not(.is-search-open) .dlx-header__badge {
  background: #fff;
  color: var(--dlx-h-ink);
}
.dlx-header--over:not(.is-stuck):not(.is-panel-open):not(.is-search-open) .dlx-header__langs {
  border-left-color: rgba(255, 255, 255, .45);
}
.dlx-header--over:not(.is-stuck):not(.is-panel-open):not(.is-search-open) .dlx-header__langs .dlx-header__lang {
  color: rgba(255, 255, 255, .72);
}
.dlx-header--over:not(.is-stuck):not(.is-panel-open):not(.is-search-open) .dlx-header__langs .dlx-header__lang.is-current {
  color: #fff;
}
/* Outlet et Bagagerie en variantes claires sur le hero */
.dlx-header--over:not(.is-stuck):not(.is-panel-open):not(.is-search-open) .dlx-nav-item--outlet > a.ets_mm_url,
.dlx-header--over:not(.is-stuck):not(.is-panel-open):not(.is-search-open) .dlx-nav-item--sales > a.ets_mm_url {
  color: var(--dlx-h-outlet-over) !important;
}
.dlx-header--over:not(.is-stuck):not(.is-panel-open):not(.is-search-open) .dlx-nav-item--bagagerie > a.ets_mm_url,
.dlx-header--over:not(.is-stuck):not(.is-panel-open):not(.is-search-open) .dlx-nav-item--luggages > a.ets_mm_url {
  color: var(--dlx-h-accent-over) !important;
}

/* 5b. Crème collant à partir de 120px de défilement (classe posée par le JS) */
.dlx-header.is-stuck {
  position: sticky;
  top: 0;
  background: var(--dlx-h-cream);
  color: var(--dlx-h-ink);
}
.dlx-header.is-stuck .dlx-header__banner {
  display: none;
}
/* 5c. Sur le hero, panneau ou recherche ouverts : la barre passe en crème sans bouger */
.dlx-header--over.is-panel-open:not(.is-stuck),
.dlx-header--over.is-search-open:not(.is-stuck) {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  background: var(--dlx-h-cream);
  color: var(--dlx-h-ink);
}
.dlx-header.is-stuck .dlx-header__bar,
.dlx-header--over.is-panel-open:not(.is-stuck) .dlx-header__bar,
.dlx-header--over.is-search-open:not(.is-stuck) .dlx-header__bar {
  border-bottom-color: var(--dlx-h-line);
}
.dlx-header.is-stuck .dlx-header__bar {
  box-shadow: 0 2px 14px rgba(26, 21, 18, .07);
}

/* -------------------------------------------------------------------------
   6. Mobile et tablette (< 1200px) : barre 62px, tiroir de navigation
   ------------------------------------------------------------------------- */
@media (max-width: 1199.98px) {
  .dlx-header {
    --dlx-h-bar: 62px;
  }
  /* Barre : burger à gauche, logo au centre exact de l'écran (colonnes latérales égales),
     recherche / compte / panier à droite */
  .dlx-header .dlx-header__bar {
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    gap: 8px;
    padding: 0 14px;
  }
  .dlx-header .dlx-header__burger {
    display: inline-flex;
    justify-self: start;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    margin-left: -10px;
    padding: 0;
    border: 0;
    background: none;
    color: inherit;
    cursor: pointer;
  }
  .dlx-header__burger span[aria-hidden] {
    position: relative;
    display: block;
    width: 20px;
    height: 1.6px;
    background: currentColor;
  }
  .dlx-header__burger span[aria-hidden]::before,
  .dlx-header__burger span[aria-hidden]::after {
    content: "";
    position: absolute;
    left: 0;
    height: 1.6px;
    background: currentColor;
  }
  .dlx-header__burger span[aria-hidden]::before {
    top: -6px;
    width: 20px;
  }
  .dlx-header__burger span[aria-hidden]::after {
    top: 6px;
    width: 14px;
  }
  .dlx-header .dlx-header__logo {
    justify-self: center;
  }
  .dlx-header__logo-svg {
    height: 18px;
  }
  .dlx-header .dlx-header__tools {
    gap: 14px;
  }
  /* Boutique, favoris et langues passent dans le tiroir */
  .dlx-header .dlx-header__tools .dlx-header__icon:nth-child(2),
  .dlx-header .dlx-header__tools .dlx-header__icon:nth-child(3),
  .dlx-header .dlx-header__tools .dlx-header__langs {
    display: none;
  }
  .dlx-header__search-inner {
    padding: 12px 14px;
  }

  /* Tiroir : le menu du module glisse depuis la gauche.
     Hauteur explicite de la fenêtre (dvh, repli vh) : Safari iOS perd l'ancrage bottom:0 d'un élément
     fixe placé dans le #header fixe du thème, le tiroir s'arrêtait à mi-écran.
     !important : le thème positionne les <nav> du header par identifiant. */
  .dlx-header .dlx-header__nav {
    position: fixed !important;
    top: 0;
    left: 0;
    z-index: 1200;
    display: flex !important;
    flex-direction: column;
    width: min(88vw, 400px) !important;
    height: 100vh;
    height: 100dvh;
    max-height: 100dvh;
    padding: 18px 0 130px; /* marge basse : passer au-dessus de la barre d'achat fixe */
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    background: var(--dlx-h-cream);
    color: var(--dlx-h-ink);
    transform: translateX(-102%);
    transition: transform .25s ease;
  }
  .dlx-header.is-drawer-open .dlx-header__nav {
    transform: none;
    box-shadow: 0 0 40px rgba(26, 21, 18, .25);
  }
  .dlx-header.is-drawer-open::after {
    content: "";
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1100;
    width: 100vw;
    height: 100vh;
    height: 100dvh;
    background: rgba(26, 21, 18, .42);
  }
  /* Le conteneur du module est une colonne Bootstrap (col-3) : tout s'empile sur toute la largeur */
  .dlx-header .dlx-header__nav > * {
    flex: none;
    float: none !important;
    width: 100% !important;
    max-width: none !important;
  }
  /* Le module masque sa liste tant que son propre bouton mobile n'a pas été actionné */
  .dlx-header .ets_mm_megamenu,
  .dlx-header .ets_mm_megamenu_content,
  .dlx-header .ets_mm_megamenu_content_content,
  .dlx-header .mm_menus_ul {
    display: block !important;
    height: auto !important;
    visibility: visible !important;
    opacity: 1 !important;
    transform: none !important;
  }
  .dlx-header .mm_menus_ul {
    padding: 0 18px;
  }
  .dlx-header .mm_menus_li {
    display: block !important;
    border-bottom: 1px solid var(--dlx-h-line) !important;
  }
  .dlx-header .mm_menus_li:last-child,
  .dlx-header .mm_menus_li.footer_menu_li {
    border-bottom: 0 !important;
  }
  .dlx-header .mm_menus_li.footer_menu_li {
    padding: 16px 0 0;
  }

  /* Pastilles d'univers en tête du tiroir */
  .dlx-header .dlx-header__pills {
    display: flex;
    gap: 8px;
    margin: 0 0 18px;
    padding: 0 18px;
    list-style: none;
  }
  .dlx-header .dlx-header__pills a {
    display: inline-flex;
    align-items: center;
    min-height: 38px;
    padding: 0 16px;
    border: 1px solid var(--dlx-h-line);
    border-radius: 999px;
    color: var(--dlx-h-ink);
    font-size: 12.5px;
    font-weight: 600;
    letter-spacing: .08em;
    text-decoration: none;
    text-transform: uppercase;
  }

  /* Entrées : lignes de 56px, en encre, sans les ombres de l'état transparent (le tiroir est crème).
     Outlet rouge brique (la variante rose est réservée au hero), Bagagerie en encre.
     Les sélecteurs répètent l'état transparent pour l'emporter sur la section 5a. */
  .dlx-header .dlx-header__nav .mm_menus_li > a.ets_mm_url,
  .dlx-header--over:not(.is-stuck):not(.is-panel-open):not(.is-search-open) .dlx-header__nav .mm_menus_li > a.ets_mm_url {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 56px;
    padding-right: 56px;
    color: var(--dlx-h-ink) !important;
    text-shadow: none;
  }
  .dlx-header .dlx-header__nav .dlx-nav-item--outlet > a.ets_mm_url,
  .dlx-header .dlx-header__nav .dlx-nav-item--sales > a.ets_mm_url,
  .dlx-header--over:not(.is-stuck):not(.is-panel-open):not(.is-search-open) .dlx-header__nav .dlx-nav-item--outlet > a.ets_mm_url,
  .dlx-header--over:not(.is-stuck):not(.is-panel-open):not(.is-search-open) .dlx-header__nav .dlx-nav-item--sales > a.ets_mm_url {
    color: var(--dlx-h-outlet) !important;
  }
  .dlx-header .dlx-header__nav .dlx-nav-item--bagagerie > a.ets_mm_url,
  .dlx-header .dlx-header__nav .dlx-nav-item--luggages > a.ets_mm_url,
  .dlx-header--over:not(.is-stuck):not(.is-panel-open):not(.is-search-open) .dlx-header__nav .dlx-nav-item--bagagerie > a.ets_mm_url,
  .dlx-header--over:not(.is-stuck):not(.is-panel-open):not(.is-search-open) .dlx-header__nav .dlx-nav-item--luggages > a.ets_mm_url {
    color: var(--dlx-h-ink) !important;
  }
  .dlx-header .dlx-header__nav .dlx-header__glyph,
  .dlx-header--over:not(.is-stuck):not(.is-panel-open):not(.is-search-open) .dlx-header__nav .dlx-header__glyph {
    text-shadow: none;
  }
  /* Entrées à sous-menu : chevron et zone tactile de 56px à droite (elle ouvre et referme ; le libellé
     ouvre au premier appui et suit le lien au second, voir le JS) */
  .dlx-header .mm_menus_li.has-panel > a.ets_mm_url::before {
    content: "";
    position: absolute;
    top: 50%;
    right: 20px;
    width: 11px;
    height: 11px;
    margin-top: -7px;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(-45deg);
    transition: transform .2s ease;
  }
  .dlx-header .mm_menus_li.is-open > a.ets_mm_url::before {
    transform: rotate(45deg);
  }
  .dlx-header .mm_menus_li.has-panel > a.ets_mm_url::after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 56px;
    border-left: 1px solid var(--dlx-h-line);
  }

  /* Sous-menus : fermés par défaut, texte seul, une ligne de 48px par entrée */
  .dlx-header .mm_menus_li > .mm_columns_ul,
  .dlx-header .mm_columns_ul {
    display: none !important;
    position: static !important;
    width: auto !important;
    padding: 0 0 10px !important;
    border: 0;
    background: transparent !important;
    box-shadow: none;
  }
  .dlx-header .mm_menus_li.is-open > .mm_columns_ul {
    display: block !important;
    height: auto !important;
    visibility: visible !important;
    opacity: 1 !important;
    overflow: visible !important;
  }
  .dlx-header .mm_columns_li,
  .dlx-header .mm_blocks_ul,
  .dlx-header .mm_blocks_li,
  .dlx-header .ets_mm_block,
  .dlx-header .ets_mm_block_content {
    display: block !important;
    position: static !important;
    float: none;
    width: 100% !important;
    max-width: none !important;
    height: auto !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    background: none !important;
    visibility: visible !important;
    opacity: 1 !important;
    list-style: none;
  }
  .dlx-header .ets_mm_block {
    position: relative !important; /* zone tactile du lien des tuiles */
  }
  /* Tuiles image : le titre devient la ligne, le lien la zone tactile, les images disparaissent */
  .dlx-header .mm_block_type_image .mm_img_content,
  .dlx-header .mm_block_type_image img,
  .dlx-header .ets_mm_block_content .clearfix {
    display: none !important;
  }
  .dlx-header .mm_block_type_image > .h4,
  .dlx-header .mm_block_type_image > h4 {
    display: flex !important;
    align-items: center;
    min-height: 48px;
    margin: 0 !important;
    padding: 0 0 0 14px !important;
    border: 0 !important;
    border-top: 1px solid var(--dlx-h-line) !important;
    color: var(--dlx-h-link) !important;
    font-family: var(--dlx-h-sans) !important;
    font-size: 12.5px !important;
    font-weight: 600;
    letter-spacing: .12em;
    text-align: left !important;
    text-transform: uppercase;
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: none;
  }
  .dlx-header .mm_block_type_image .ets_mm_block_content > a {
    position: absolute;
    inset: 0;
    display: block;
    min-height: 0;
    border-radius: 0;
  }
  /* Blocs de liens (La marque) : pas de titre, une ligne par lien, et pas de doublon avec les tuiles image */
  .dlx-header .mm_columns_ul:has(.mm_block_type_cms) .mm_block_type_image,
  .dlx-header .mm_columns_ul:has(.mm_block_type_html) .mm_block_type_image,
  .dlx-header .mm_block_type_cms > .h4,
  .dlx-header .mm_block_type_html > .h4 {
    display: none !important;
  }
  .dlx-header .mm_block_type_cms .ets_mm_block_content ul,
  .dlx-header .mm_block_type_html .ets_mm_block_content ul {
    margin: 0;
    padding: 0;
    list-style: none;
  }
  .dlx-header .mm_block_type_cms .ets_mm_block_content li,
  .dlx-header .mm_block_type_html .ets_mm_block_content li {
    display: block;
    float: none;
    width: 100%;
    margin: 0;
    padding: 0;
  }
  .dlx-header .mm_block_type_cms .ets_mm_block_content a,
  .dlx-header .mm_block_type_html .ets_mm_block_content a {
    display: flex;
    align-items: center;
    width: 100%;
    min-height: 48px;
    padding-left: 14px;
    border-top: 1px solid var(--dlx-h-line);
    color: var(--dlx-h-link);
    font-family: var(--dlx-h-sans);
    font-size: 12.5px !important;
    font-weight: 600;
    letter-spacing: .12em;
    text-decoration: none;
    text-transform: uppercase;
  }
  .dlx-header .mm_block_type_html .ets_mm_block_content b,
  .dlx-header .mm_block_type_html .ets_mm_block_content strong {
    font-size: inherit;
    font-weight: 600;
  }

  /* Pied du tiroir : boutique, compte, favoris, puis pastilles de langue */
  .dlx-header .dlx-header__drawer-foot {
    display: block;
    margin-top: 8px;
    padding: 0 18px 24px;
  }
  .dlx-header .dlx-header__drawer-links {
    margin: 0 0 18px;
    padding: 0;
    list-style: none;
  }
  .dlx-header .dlx-header__drawer-links a {
    display: flex;
    align-items: center;
    gap: 14px;
    min-height: 52px;
    border-bottom: 1px solid var(--dlx-h-line);
    color: var(--dlx-h-ink);
    font-size: 13px;
    font-weight: 600;
    letter-spacing: .06em;
    text-decoration: none;
    text-transform: uppercase;
  }
  .dlx-header .dlx-header__drawer-links .dlx-header__glyph {
    font-size: 20px;
  }
  .dlx-header .dlx-header__lang-pills {
    display: flex;
    gap: 8px;
    margin: 0;
  }
  .dlx-header .dlx-header__lang-pills .dlx-header__lang {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 56px;
    min-height: 38px;
    padding: 0 16px;
    border: 1px solid var(--dlx-h-line);
    border-radius: 999px;
    color: var(--dlx-h-lang-off);
    font-family: var(--dlx-h-sans) !important;
    font-size: 12.5px !important;
    font-weight: 600;
    letter-spacing: .08em;
    text-decoration: none;
  }
  .dlx-header .dlx-header__lang-pills .dlx-header__lang.is-current {
    border-color: var(--dlx-h-ink);
    background: var(--dlx-h-ink);
    color: var(--dlx-h-cream);
  }
}

/* -------------------------------------------------------------------------
   7. Mouvement réduit
   ------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .dlx-header,
  .dlx-header .dlx-header__bar,
  .dlx-header .dlx-header__nav,
  .dlx-header .mm_menus_li > a.ets_mm_url::after,
  .dlx-header .mm_menus_li > a.ets_mm_url::before,
  .dlx-header .ets_mm_block_content img {
    transition: none;
  }
  .dlx-header .ets_mm_block_content a:hover img {
    transform: none;
  }
}