/**
 * Étapes Print — Menu principal
 *
 * Tout est préfixé .ep- et scopé sous .ep-menu : aucune règle ne peut affecter
 * le reste du site. Les couleurs reprennent les tokens de la maquette v2.
 *
 * La police n'est pas imposée : le menu hérite de celle du site.
 */

/* ------------------------------------------------------------------
   LES COULEURS DU MENU — c'est ici et nulle part ailleurs.
   Change une valeur, recharge la page, c'est fait.
   ------------------------------------------------------------------ */

.ep-menu {
  /* Vert de marque : liens actifs, survols, bloc « façons de commander ». */
  --ep-accent: #919870;
  --ep-accent-100: #f2f3ec;
  --ep-accent-200: #e6e8dc;
  --ep-accent-600: #6a7350;
  --ep-accent-800: #3f4630;

  /* Beige de marque : vignettes, encart nouveauté. */
  --ep-sand: #a8926f;
  --ep-sand-100: #faf7f2;
  --ep-sand-300: #dccfb8;

  /* Fonds et textes. Le rail est beige chaud, pas gris : c'est ce qui
     évitait le « noir sur gris ». */
  --ep-rail-bg: #f4f1ea;
  --ep-n300: #e2e2e2;
  --ep-n600: #6b6b6b;
  --ep-n900: #1c1f16;

  /* ==================================================================
     COULEUR DES LIBELLÉS DE LA BARRE DE NAVIGATION

     Deux réglages tout prêts. Un seul doit être actif à la fois.
     Pour basculer : mets le réglage A en commentaire et enlève les
     marques de commentaire autour du réglage B.
     ================================================================== */

  /* --- RÉGLAGE A : barre sur FOND BLANC (la maquette v2) — ACTIF --- */
  --ep-bar-text: #1c1f16;
  --ep-bar-text-hover: #6a7350;
  --ep-bar-cta: #8f7a58;
  --ep-bar-transform: none;

  /* --- RÉGLAGE B : barre sur FOND NOIR (l'ancien header) ---
  --ep-bar-text: #ffffff;
  --ep-bar-text-hover: #cdd3b4;
  --ep-bar-cta: #e3cda6;
  --ep-bar-transform: uppercase;
  */

  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* ==================================================================
   LA BARRE DE NAVIGATION

   Ce bloc reprend la main sur le conteneur d'Avada, repéré par
   ep-menu.js. Pour rendre la barre à Avada : supprime ce bloc, et
   repasse au réglage B des couleurs plus haut.
   ================================================================== */

.ep-bar-host,
.ep-bar-host > .fusion-builder-row,
.ep-bar-host .fusion-column-wrapper {
  background-color: #fff !important;
  background-image: none !important;
}

.ep-bar-host {
  border-bottom: 1px solid var(--ep-n300, #e2e2e2);
  box-shadow: none !important;
}

/* ---------- Barre principale ---------- */

.ep-menu .ep-li {
  position: static;
  margin: 0;
  padding: 0;
  list-style: none;
}

.ep-menu .ep-li--right {
  margin-left: auto;
}

.ep-menu .ep-a {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 14px 16px;
  border: 0;
  background: none;
  font: inherit;
  font-weight: 650;
  line-height: 1.2;
  letter-spacing: .02em;
  text-transform: var(--ep-bar-transform);
  color: var(--ep-bar-text) !important;
  text-decoration: none;
  cursor: pointer;
}

.ep-menu .ep-a:hover,
.ep-menu .ep-a:focus-visible {
  color: var(--ep-bar-text-hover) !important;
}

.ep-menu .ep-li--cta > .ep-a {
  color: var(--ep-bar-cta) !important;
}

.ep-menu .ep-li--right > .ep-a {
  font-weight: 500;
  color: var(--ep-n600) !important;
}

.ep-menu .ep-caret {
  width: 8px;
  height: 8px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: translateY(-2px) rotate(45deg);
  transition: transform .15s ease;
}

.ep-menu .ep-li--mega.is-open .ep-caret {
  transform: translateY(2px) rotate(-135deg);
}

.ep-menu .ep-li--mega.is-open > .ep-a {
  color: var(--ep-bar-text-hover) !important;
}

/* ---------- Le panneau ---------- */

/* Le panneau occupe toute la largeur de l'écran, quelle que soit la largeur
   du menu. --ep-panel-left et --ep-vw sont calculés par ep-menu.js : c'est ce
   qui permet de déborder proprement du conteneur sans barre de défilement
   horizontale (100vw compte la barre de défilement, pas nous). */
.ep-menu .ep-panel {
  position: absolute;
  z-index: 9999;
  top: 100%;
  left: var(--ep-panel-left, 0);
  right: auto;
  width: var(--ep-vw, 100%);
  display: none;
  background: #fff;
  border-top: 1px solid var(--ep-n300);
  box-shadow: 0 12px 32px rgba(0, 0, 0, .14);
}

.ep-menu .ep-li--mega.is-open > .ep-panel {
  display: block;
}

.ep-menu .ep-panel__inner {
  display: grid;
  grid-template-columns: 300px minmax(0, 1fr);
  min-height: 380px;
  max-width: 1680px;
  margin: 0 auto;
}

/* ---------- Rail de gauche ---------- */

.ep-menu .ep-rail {
  margin: 0;
  padding: 12px 0;
  list-style: none;
  background: var(--ep-rail-bg);
  border-right: 1px solid var(--ep-n300);
}

.ep-menu .ep-rail__li {
  margin: 0;
  list-style: none;
}

.ep-menu .ep-rail__btn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  width: 100%;
  padding: 11px 18px;
  border: 0;
  border-left: 3px solid transparent;
  background: none;
  font: inherit;
  font-size: .94em;
  text-align: left;
  color: var(--ep-n900);
  cursor: pointer;
  transition: background .12s ease, color .12s ease;
}

.ep-menu .ep-rail__btn::after {
  content: "";
  width: 6px;
  height: 6px;
  flex: none;
  border-right: 2px solid currentColor;
  border-top: 2px solid currentColor;
  transform: rotate(45deg);
  opacity: .35;
}

.ep-menu .ep-rail__btn:hover {
  background: var(--ep-accent-100);
}

.ep-menu .ep-rail__btn.is-active {
  background: #fff;
  border-left-color: var(--ep-accent-600);
  font-weight: 750;
  color: var(--ep-accent-800);
}

.ep-menu .ep-rail__btn.is-active::after {
  opacity: .9;
  color: var(--ep-accent-600);
}

/* ---------- Volets ---------- */

.ep-menu .ep-panes {
  min-width: 0;
}

.ep-menu .ep-pane {
  display: none;
  grid-template-columns: minmax(0, 1fr) 260px;
  gap: 28px;
  padding: 26px 28px;
}

.ep-menu .ep-pane.is-active {
  display: grid;
}

.ep-menu .ep-pane__main {
  min-width: 0;
}

.ep-menu .ep-pane__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 16px;
  margin-bottom: 6px;
}

.ep-menu .ep-pane__t {
  margin: 0;
  font-size: 1.3em;
  font-weight: 800;
  line-height: 1.2;
}

.ep-menu .ep-pane__t a {
  color: inherit;
  text-decoration: none;
}

.ep-menu .ep-pane__t a:hover {
  text-decoration: underline;
}

.ep-menu .ep-pane__all {
  font-size: .85em;
  font-weight: 600;
  color: var(--ep-accent-600);
  text-decoration: underline;
  white-space: nowrap;
}

.ep-menu .ep-pane__desc {
  max-width: 62ch;
  margin: 0 0 18px;
  font-size: .86em;
  line-height: 1.5;
  color: var(--ep-n600);
}

/* ---------- Vignettes ---------- */

.ep-menu .ep-tiles {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(132px, 1fr));
  gap: 16px 14px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.ep-menu .ep-tile {
  margin: 0;
  list-style: none;
}

.ep-menu .ep-tile > a {
  display: flex;
  flex-direction: column;
  gap: 8px;
  color: inherit;
  text-decoration: none;
}

.ep-menu .ep-tile__img {
  display: block;
  overflow: hidden;
  aspect-ratio: 1 / 1;
  border: 1px solid var(--ep-n300);
  border-radius: 10px;
  background: var(--ep-sand-100);
}

.ep-menu .ep-tile__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.ep-menu .ep-tile__ph {
  display: block;
  width: 100%;
  height: 100%;
  background:
    repeating-linear-gradient(-45deg, var(--ep-sand-300) 0 6px, transparent 6px 12px);
  opacity: .5;
}

.ep-menu .ep-tile > a:hover .ep-tile__img {
  border-color: var(--ep-accent);
}

.ep-menu .ep-tile__lab {
  font-size: .85em;
  font-weight: 600;
  line-height: 1.3;
}

.ep-menu .ep-tile > a:hover .ep-tile__lab {
  color: var(--ep-accent-600);
}

/* ---------- Badges ---------- */

.ep-menu .ep-badge {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 6px;
  border-radius: 999px;
  background: var(--ep-accent-200);
  font-size: .72em;
  font-weight: 700;
  letter-spacing: .02em;
  color: var(--ep-accent-800);
  text-transform: uppercase;
  vertical-align: middle;
}

.ep-menu .ep-badge--nouveau {
  background: var(--ep-sand-300);
}

/* ---------- Colonne de droite ---------- */

.ep-menu .ep-aside {
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding-left: 24px;
  border-left: 1px solid var(--ep-n300);
}

.ep-menu .ep-aside__t,
.ep-menu .ep-ways__t {
  margin: 0 0 8px;
  font-size: .74em;
  font-weight: 700;
  letter-spacing: .06em;
  color: var(--ep-n600);
  text-transform: uppercase;
}

.ep-menu .ep-aside__list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.ep-menu .ep-aside__list li {
  margin: 0;
  padding: 7px 0;
  border-bottom: 1px solid var(--ep-n300);
  list-style: none;
}

.ep-menu .ep-aside__list a {
  font-size: .86em;
  color: inherit;
  text-decoration: none;
}

.ep-menu .ep-aside__list a:hover {
  color: var(--ep-accent-600);
  text-decoration: underline;
}

.ep-menu .ep-nouv {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 12px 14px;
  border-radius: 10px;
  background: var(--ep-sand-100);
  color: inherit;
  text-decoration: none;
}

.ep-menu .ep-nouv__tag {
  font-size: .72em;
  font-weight: 700;
  letter-spacing: .04em;
  color: var(--ep-sand);
  text-transform: uppercase;
}

.ep-menu .ep-nouv__lab {
  font-size: .88em;
  font-weight: 700;
  line-height: 1.3;
}

.ep-menu .ep-nouv:hover .ep-nouv__lab {
  text-decoration: underline;
}

/* ---------- 4 façons de commander ---------- */

.ep-menu .ep-ways {
  margin-top: auto;
  padding: 14px 16px;
  border-radius: 10px;
  background: var(--ep-accent-800);
  color: #fff;
}

.ep-menu .ep-ways__t {
  color: rgba(255, 255, 255, .65);
}

.ep-menu .ep-ways ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.ep-menu .ep-ways li {
  margin: 0;
  list-style: none;
  border-top: 1px solid rgba(255, 255, 255, .18);
}

.ep-menu .ep-ways li:first-child {
  border-top: 0;
}

.ep-menu .ep-ways a {
  display: flex;
  gap: 10px;
  padding: 8px 0;
  font-size: .85em;
  font-weight: 600;
  color: #fff;
  text-decoration: none;
}

.ep-menu .ep-ways a:hover {
  color: var(--ep-sand-300);
}

.ep-menu .ep-ways__n {
  opacity: .5;
  font-variant-numeric: tabular-nums;
}

/* ---------- Mobile et tablette ---------- */

@media (max-width: 1100px) {
  .ep-menu .ep-pane {
    grid-template-columns: minmax(0, 1fr);
  }

  .ep-menu .ep-aside {
    padding-left: 0;
    border-left: 0;
    border-top: 1px solid var(--ep-n300);
    padding-top: 18px;
  }
}

@media (max-width: 1310px) {
  .ep-menu {
    flex-direction: column;
    align-items: stretch;
  }

  .ep-menu .ep-li--right {
    margin-left: 0;
  }

  .ep-menu .ep-a {
    justify-content: space-between;
    padding: 14px 18px;
    border-bottom: 1px solid var(--ep-n300);
    width: 100%;
    color: var(--ep-n900);
  }

  .ep-menu .ep-li--cta > .ep-a {
    color: #9a6b3f;
  }

  .ep-menu .ep-li--right > .ep-a {
    color: var(--ep-n600);
  }

  .ep-menu .ep-panel {
    position: static;
    left: auto;
    width: auto;
    box-shadow: none;
    border-top: 0;
  }

  .ep-menu .ep-panel__inner {
    max-width: none;
  }

  .ep-menu .ep-panel__inner {
    grid-template-columns: minmax(0, 1fr);
    min-height: 0;
  }

  .ep-menu .ep-rail {
    padding: 0;
    background: none;
    border-right: 0;
  }

  .ep-menu .ep-rail__btn {
    padding: 13px 26px;
    border-left: 0;
    border-bottom: 1px solid var(--ep-n300);
  }

  .ep-menu .ep-rail__btn.is-active::after {
    transform: rotate(135deg);
  }

  /* Sur mobile, le volet actif s'affiche sous la liste des rubriques. */
  .ep-menu .ep-pane {
    padding: 18px 26px;
    background: var(--ep-sand-100);
  }

  .ep-menu .ep-tiles {
    grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
  }
}

@media (prefers-reduced-motion: reduce) {
  .ep-menu * {
    transition: none !important;
  }
}

/* ==================================================================
   LES ÉLÉMENTS DU HEADER
   Bandeau promo, téléphone, libellés Compte/Panier, barre de recherche.
   ================================================================== */

/* ---------- Bandeau promo ---------- */

.ep-promo {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  padding: 10px 44px 10px 20px;
  background: #3f4630;
  color: #fff;
  font-size: 14px;
  line-height: 1.35;
  text-align: center;
  position: relative;
}

.ep-promo[hidden] {
  display: none;
}

.ep-promo__txt {
  margin: 0;
  max-width: 80ch;
}

.ep-promo__x {
  position: absolute;
  top: 50%;
  right: 12px;
  transform: translateY(-50%);
  width: 32px;
  height: 32px;
  border: 0;
  border-radius: 50%;
  background: none;
  color: #fff;
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  opacity: .8;
}

.ep-promo__x:hover,
.ep-promo__x:focus-visible {
  background: rgba(255, 255, 255, .15);
  opacity: 1;
}

/* ---------- Téléphone et horaires ---------- */

.ep-tel {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 1px;
  margin: 0;
  padding: 0 18px 0 32px;
  list-style: none;
  text-align: right;
}

.ep-tel__num {
  font-size: 15px;
  font-weight: 700;
  line-height: 1.2;
  color: #1c1f16;
  text-decoration: none;
  white-space: nowrap;
}

.ep-tel__h {
  font-size: 12px;
  line-height: 1.2;
  color: #6b6b6b;
  text-decoration: underline;
  white-space: nowrap;
}

.ep-tel__num:hover,
.ep-tel__h:hover {
  color: #6a7350;
}

/* ---------- Libellés Compte et Panier ----------
   Avada les masque sur ordinateur avec .menu-text_no-desktop.
   On ne force l'affichage que sur grand écran : sur mobile, Avada
   les montre déjà et on le laisse faire. */

@media (min-width: 769px) {
  .awb-menu__main-a .menu-text.ep-shown-label {
    display: inline-block !important;
    margin-left: 7px;
    font-size: 14px;
    font-weight: 600;
    line-height: 1;
    vertical-align: middle;
  }

}

/* ---------- Barre de recherche ---------- */

@media (min-width: 769px) {
  .fusion-search-element .searchform,
  .fusion-search-element .fusion-search-form-content {
    max-width: none;
    width: 100%;
  }
}

/* ==================================================================
   MOBILE — lisibilité des éléments du header
   ================================================================== */

@media (max-width: 768px) {
  .ep-promo {
    gap: 10px;
    padding: 9px 40px 9px 14px;
    font-size: 13px;
  }

  .ep-promo__x {
    right: 6px;
    width: 30px;
    height: 30px;
  }

  /* Le numéro reste visible et appelable, les horaires passent à la trappe :
     sur un téléphone, on appelle, on ne lit pas les horaires. */
  .ep-tel {
    padding: 0 10px;
    text-align: left;
  }

  .ep-tel__h {
    display: none;
  }

  .ep-tel__num {
    font-size: 14px;
  }
}

@media (max-width: 560px) {
  .ep-promo {
    padding: 8px 36px 8px 12px;
    font-size: 12px;
    text-align: left;
  }

}

/* ==================================================================
   MOBILE — lisibilité du méga-menu
   ================================================================== */

@media (max-width: 1310px) {
  .ep-menu .ep-rail__btn {
    font-size: 15px;
    line-height: 1.35;
    padding: 15px 22px;
  }

  .ep-menu .ep-pane__t {
    font-size: 1.15em;
  }

  .ep-menu .ep-pane__desc {
    font-size: 14px;
  }

  .ep-menu .ep-tile__lab {
    font-size: 14px;
  }

  .ep-menu .ep-aside__list a,
  .ep-menu .ep-ways a {
    font-size: 15px;
  }

  /* Cibles tactiles : au moins 44 px de haut, recommandation Apple et Google. */
  .ep-menu .ep-aside__list li {
    padding: 11px 0;
  }

  .ep-menu .ep-ways a {
    padding: 11px 0;
  }
}

@media (max-width: 560px) {
  /* Deux vignettes par ligne : en dessous, les libellés deviennent illisibles. */
  .ep-menu .ep-tiles {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px 12px;
  }

  .ep-menu .ep-pane {
    padding: 16px 18px;
  }

  .ep-menu .ep-rail__btn {
    padding: 15px 18px;
  }

  .ep-menu .ep-pane__head {
    gap: 8px;
  }
}

/* ==================================================================
   LA LIGNE DU HEADER : ORDRE ET LARGEUR DES COLONNES

   Avada place ces colonnes en pourcentages fixes, ce qui fait passer le
   menu revendeurs à la ligne. Plutôt que de déplacer quoi que ce soit
   dans la page, on se contente de les remettre dans l'ordre voulu et de
   leur donner la largeur qu'il faut :

        recherche  |  revendeurs  |  compte · panier

   Rien n'est deplace : chaque element reste exactement ou Avada l'a mis.
   ================================================================== */

@media (min-width: 769px) {
  .ep-head-row {
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    overflow: visible !important;
    gap: 28px;
  }

  /* 1. La recherche absorbe toute la place restante.
        La base a 0 est indispensable : avec « auto », sa largeur de depart
        est celle du champ, elle refuse de se comprimer et recouvre ses voisines. */
  .ep-search-col {
    order: 1;
    flex: 1 1 0 !important;
    width: auto !important;
    max-width: none !important;
    min-width: 0 !important;
    overflow: visible !important;
  }

  .ep-search-col .fusion-column-wrapper,
  .ep-search-col .fusion-search-element,
  .ep-search-col .searchform,
  .ep-search-col .fusion-search-form-content {
    width: 100% !important;
    max-width: 100% !important;
  }

  .ep-search-col input[type="search"],
  .ep-search-col .fusion-search-field {
    min-width: 0 !important;
  }

  /* 2. Le menu revendeurs, puis 3. compte et panier :
        largeur du contenu, jamais comprimes. */
  .ep-icons-col { order: 2; }

  .ep-icons-col {
    flex: 0 0 auto !important;
    width: auto !important;
    max-width: none !important;
    min-width: min-content !important;
    overflow: visible !important;
  }

  /* Avada met les conteneurs internes en width:100% ; dans un parent
     auto-dimensionne, un pourcentage ne compte pas dans le calcul et la
     colonne tombe a zero — c'est ce qui faisait disparaitre l'icone. */
  .ep-icons-col .fusion-column-wrapper,
  .ep-icons-col .awb-menu {
    width: auto !important;
    min-width: min-content !important;
    overflow: visible !important;
  }

  /* Les icones restent sur une seule ligne, avec de l'air entre elles. */
  ul[id^="menu-interior-design-shop-menu"] {
    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 16px;
  }

  ul[id^="menu-interior-design-shop-menu"] > li {
    flex: 0 0 auto !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
    overflow: visible !important;
  }

  ul[id^="menu-interior-design-shop-menu"] .awb-menu__main-a {
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
    white-space: nowrap;
    overflow: visible !important;
  }
}




/* ==================================================================
   LE DEROULANT « NOS SERVICES »

   Il remplace l'icone carree d'Avada, qui etait coincee dans une colonne
   du header impossible a placer et dont personne ne devinait le contenu.
   Son ancienne colonne est masquee : le contenu vit maintenant dans le
   menu, ou nous le maitrisons entierement.
   ================================================================== */

.ep-reseller-col {
  display: none !important;
}

.ep-menu .ep-li--drop {
  position: relative;
}

.ep-menu .ep-panel--simple {
  left: 0;
  right: auto;
  width: auto;
  min-width: 300px;
  border-radius: 0 0 10px 10px;
}

.ep-menu .ep-drop {
  margin: 0;
  padding: 8px 0;
  list-style: none;
}

.ep-menu .ep-drop li {
  margin: 0;
  list-style: none;
}

.ep-menu .ep-drop a {
  display: block;
  padding: 10px 20px;
  font-size: .9em;
  line-height: 1.35;
  color: var(--ep-n900);
  text-decoration: none;
}

.ep-menu .ep-drop a:hover,
.ep-menu .ep-drop a:focus-visible {
  background: var(--ep-accent-100);
  color: var(--ep-accent-800);
}

@media (max-width: 1310px) {
  .ep-menu .ep-panel--simple {
    min-width: 0;
    border-radius: 0;
  }

  .ep-menu .ep-drop a {
    padding: 13px 26px;
    font-size: 1em;
    border-bottom: 1px solid var(--ep-n300);
    background: var(--ep-sand-100);
  }
}