/* =============================================
   POMMECAN BIJOUX — Header
   Desktop : [logo gauche] [nav centre] [icônes droite]
   Mobile  : [burger gauche] [logo centré] [panier droite]
   ============================================= */

/* ── Shell ── */
.pom-header {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: var(--z-header);
  background-color: var(--pom-cream);
  transition: background-color var(--pom-transition),
              box-shadow var(--pom-transition);
}

body.page-index .pom-header {
  background-color: transparent;
}

.pom-header--sticky {
  background-color: rgba(242, 237, 232, 0.97);
  box-shadow: 0 1px 20px rgba(26, 26, 26, 0.06);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

/* ── Inner grid : 3 colonnes ── */
.pom-header__inner {
  display: grid;
  grid-template-columns: minmax(160px, 1fr) auto minmax(160px, 1fr);
  align-items: center;
  height: 70px;
  position: relative;
  transition: height var(--pom-transition);
}

.pom-header--sticky .pom-header__inner {
  height: 58px;
}

/* ── GAUCHE : burger (mobile) + logo ── */
.pom-header__left {
  grid-column: 1;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 0.25rem;
}

/* ── CENTRE : navigation ── */
.pom-header__nav {
  grid-column: 2;
  display: none;
}

/* ── DROITE : icônes ── */
.pom-header__right {
  grid-column: 3;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.25rem;
}

/* ── Logo ── */
.pom-header__logo {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  z-index: 1;
}

.pom-header__logo img {
  height: 50px;
  width: auto;
  transition: height var(--pom-transition);
  display: block;
}

.pom-header--sticky .pom-header__logo img {
  height: 28px;
}

.pom-header__logo-text {
  font-size: 1.1rem;
  font-weight: 300;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--pom-black);
  white-space: nowrap;
}

/* ── Boutons icônes ── */
.pom-header__action-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  color: var(--pom-black);
  transition: color var(--pom-transition);
  position: relative;
  flex-shrink: 0;
}

.pom-header__action-btn:hover {
  color: var(--pom-gold);
}

.pom-header__action-btn svg {
  width: 20px;
  height: 20px;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.5;
}

/* Icônes desktop uniquement (recherche + compte) — cachées mobile */
.pom-header__action-btn--desktop {
  display: none;
}

/* Badge panier */
.pom-header__cart-count {
  position: absolute;
  top: 4px; right: 4px;
  width: 16px; height: 16px;
  border-radius: 50%;
  background-color: var(--pom-gold);
  color: var(--pom-white);
  font-size: 10px;
  font-weight: 500;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  transition: transform 0.2s ease;
}

.pom-header__cart-count--hidden {
  display: none;
}

/* ── Burger mobile ── */
.pom-header__burger {
  display: flex;
  flex-direction: column;
  gap: 5px;
  width: 40px; height: 40px;
  justify-content: center;
  align-items: center;
  padding: 8px;
  flex-shrink: 0;
}

.pom-header__burger-line {
  display: block;
  width: 22px; height: 1px;
  background-color: var(--pom-black);
  transition: transform var(--pom-transition), opacity var(--pom-transition);
  transform-origin: center;
}

.pom-header--open .pom-header__burger-line:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.pom-header--open .pom-header__burger-line:nth-child(2) { opacity: 0; }
.pom-header--open .pom-header__burger-line:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

/* ── Nav desktop ── */
.pom-nav__list {
  display: flex;
  align-items: center;
  gap: var(--pom-space-lg);
  list-style: none;
  padding: 0; margin: 0;
}

.pom-header__nav ul {
  display: flex;
  align-items: center;
  gap: var(--pom-space-lg);
  list-style: none;
  padding: 0; margin: 0;
}

.pom-nav__item {
  position: relative;
}

.pom-header__nav li {
  position: relative;
}

.pom-nav__link,
.pom-header__nav a {
  display: block;
  font-size: 0.72rem;
  font-weight: 400;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--pom-black);
  padding-block: var(--pom-space-sm);
  transition: color var(--pom-transition);
  white-space: nowrap;
}

.pom-nav__link::after,
.pom-header__nav > ul > li > a::after {
  content: '';
  display: block;
  height: 1px;
  background-color: var(--pom-gold);
  transform: scaleX(0);
  transition: transform var(--pom-transition);
  transform-origin: left;
  margin-top: 2px;
}

.pom-nav__link:hover,
.pom-header__nav a:hover {
  color: var(--pom-gold);
}

.pom-nav__link:hover::after,
.pom-nav__item--active .pom-nav__link::after,
.pom-header__nav > ul > li > a:hover::after,
.pom-header__nav > ul > li.current > a::after {
  transform: scaleX(1);
}

/* Dropdown */
.pom-nav__dropdown,
.pom-header__nav ul ul {
  position: absolute;
  top: calc(100% + 12px);
  left: 50%;
  transform: translateX(-50%) translateY(-8px);
  min-width: 200px;
  background-color: var(--pom-white);
  box-shadow: 0 8px 30px rgba(26, 26, 26, 0.1);
  padding: var(--pom-space-md) 0;
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--pom-transition), transform var(--pom-transition), visibility var(--pom-transition);
  border-top: 2px solid var(--pom-gold);
  flex-direction: column;
  gap: 0;
  z-index: 100;
}

.pom-nav__item:hover .pom-nav__dropdown,
.pom-header__nav li:hover ul {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
}

.pom-nav__dropdown-link,
.pom-header__nav ul ul a {
  display: block;
  padding: 0.5rem 1.5rem;
  font-size: 0.7rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--pom-grey);
  transition: color var(--pom-transition), background-color var(--pom-transition);
  white-space: nowrap;
}

.pom-nav__dropdown-link:hover,
.pom-header__nav ul ul a:hover {
  color: var(--pom-gold);
  background-color: var(--pom-cream);
}

/* ── Desktop breakpoint ── */
@media (min-width: 1024px) {
  .pom-header__inner {
    height: 80px;
  }
  .pom-header--sticky .pom-header__inner {
    height: 64px;
  }

  /* Afficher le nav */
  .pom-header__nav {
    display: flex;
    align-items: center;
    justify-content: center;
  }

  /* Cacher burger */
  .pom-header__burger {
    display: none;
  }

  /* Afficher icônes desktop */
  .pom-header__action-btn--desktop {
    display: flex;
  }

  /* Logo : quitter l'absolu, rester dans la colonne gauche */
  .pom-header__logo {
    position: static;
    transform: none;
  }
  .pom-header__logo img {
    height: 40px;
  }
  .pom-header--sticky .pom-header__logo img {
    height: 32px;
  }
}

/* ── Spacer ── */
.pom-header-spacer {
  height: 70px;
}

@media (min-width: 1024px) {
  .pom-header-spacer {
    height: 80px;
  }
}

/* ── Tiroir navigation mobile ── */
.pom-nav-drawer {
  position: fixed;
  top: 0; left: 0;
  width: 100%; height: 100%;
  background-color: var(--pom-cream);
  z-index: calc(var(--z-header) - 1);
  transform: translateX(-100%);
  transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  padding: 100px var(--pom-space-xl) var(--pom-space-xl);
  display: flex;
  flex-direction: column;
  overflow-y: auto;
}

.pom-nav-drawer--open {
  transform: translateX(0);
}

.pom-nav-drawer__menu {
  display: flex;
  flex-direction: column;
  gap: 0;
  list-style: none;
  padding: 0; margin: 0;
}

.pom-nav-drawer__link {
  display: block;
  font-size: 1.5rem;
  font-weight: 300;
  letter-spacing: 0.04em;
  color: var(--pom-black);
  padding-block: 0.75rem;
  border-bottom: 1px solid var(--pom-grey-light);
  transition: color var(--pom-transition);
}

.pom-nav-drawer__link:hover {
  color: var(--pom-gold);
}

.pom-nav-drawer__link--sm {
  font-size: 1rem;
}

.pom-nav-drawer__footer {
  margin-top: auto;
  padding-top: 2rem;
  border-top: 1px solid var(--pom-grey-light);
  display: flex;
  flex-direction: column;
  gap: 0;
}

/* ── ps_mainmenu — HTML généré automatiquement ── */
.pom-header__nav #_desktop_top_menu,
.pom-header__nav .top-menu {
  display: flex;
  align-items: center;
  gap: 2rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

.pom-header__nav .top-menu a.dropdown-item,
.pom-header__nav .top-menu a {
  font-family: 'DM Sans', sans-serif;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: #0D1B1E;
  text-decoration: none;
  white-space: nowrap;
}

.pom-header__nav .top-menu a:hover {
  color: #1B6B77;
}

/* ── Sélecteurs langue / devise ── */
.pom-header__right .language-selector,
.pom-header__right .currency-selector {
  font-family: 'DM Sans', sans-serif;
  font-size: 11px;
  color: #0D1B1E;
}

/* ── Masquer éléments Classic non désirés ── */

/* Barre de recherche Classic dans la nav */
.pom-header__nav #search_widget,
.pom-header__nav .search-widget {
  display: none !important;
}

/* Contactez-nous Classic dans header right */
.pom-header__right #_desktop_contact_link,
.pom-header__right .blockcart,
.pom-header__right .user-info,
.pom-header__right #blockcart-wrapper,
.pom-header__right .block-contact {
  display: none !important;
}

/* Garder uniquement nos icônes custom */
.pom-header__right .pom-header__icons {
  display: flex !important;
}

/* ── Logo ── */
.pom-header__logo-link {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  z-index: 1;
}

@media (min-width: 1024px) {
  .pom-header__logo-link {
    position: static;
    transform: none;
  }
}

.pom-header__logo {
  height: 36px;
  width: auto;
  display: block;
}

.pom-header--sticky .pom-header__logo {
  height: 28px;
}

.pom-header__logo-text {
  font-family: 'DM Sans', sans-serif;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 4px;
  text-transform: uppercase;
  color: #0D1B1E;
  white-space: nowrap;
}

/* ── Langue / devise : dropdown propre ── */
.pom-header__lang-currency {
  display: flex;
  align-items: center;
  gap: 1rem;
  font-family: 'DM Sans', sans-serif;
  font-size: 10px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: #0D1B1E;
}

.pom-header__lang-currency ul {
  display: none !important;
  position: absolute;
  top: 100%;
  left: 0;
  background: #fff;
  border: 1px solid #EFF6F7;
  list-style: none;
  padding: 0.5rem 0;
  margin: 0;
  z-index: 999;
  min-width: 80px;
}

.pom-header__lang-currency li:hover > ul,
.pom-header__lang-currency .expand:hover ul {
  display: block !important;
}

.pom-header__lang-currency li {
  position: relative;
  cursor: pointer;
  padding: 0.3rem 1rem;
}

.pom-header__lang-currency a {
  color: #0D1B1E;
  text-decoration: none;
  font-size: 10px;
  letter-spacing: 1px;
}

.pom-header__lang-currency a:hover {
  color: #1B6B77;
}

.pom-header__lang-currency .language-selector-wrapper::after {
  content: '|';
  margin-left: 1rem;
  color: #EFF6F7;
}

.pom-header__right > *:not(.pom-header__icons):not(.pom-header__lang-currency) {
  display: none !important;
}

/* ── Correction 3 : icônes wrapper ── */
.pom-header__icons {
  display: flex !important;
  align-items: center;
  gap: 1.5rem;
}

.pom-header__icon-btn {
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  color: #0D1B1E;
  display: flex;
  align-items: center;
}

/* ── Masquer injections PS8 non désirées ── */
.pom-header__right > *:not(.pom-header__icons) {
  display: none !important;
}
.pom-header__nav #search_widget {
  display: none !important;
}

/* ── Sous-menu simple (structure réelle ps_mainmenu) ──
   li.category > div.popover.sub-menu > ul.top-menu[data-depth="1"]
   ─────────────────────────────────────────────────────────────── */

.pom-header__nav .top-menu > li {
  position: relative;
}

/* Écrase le collapse Bootstrap — caché par défaut */
.pom-header__nav .top-menu > li > .popover.sub-menu {
  display: none !important;
  position: absolute;
  top: 100%;
  left: 0;
  background: #FFFFFF;
  border-top: 2px solid #1B6B77;
  min-width: 220px;
  padding: 1.5rem 0;
  z-index: 1000;
  box-shadow: 0 8px 24px rgba(0,0,0,0.06);
}

/* Afficher au hover */
.pom-header__nav .top-menu > li:hover > .popover.sub-menu {
  display: block !important;
}

/* Reset de la ul intérieure */
.pom-header__nav .top-menu > li > .popover.sub-menu > ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: block !important;
  gap: 0;
}

/* Liens du sous-menu */
.pom-header__nav .top-menu[data-depth="1"] > li > a {
  display: block;
  font-family: 'DM Sans', sans-serif;
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 0.5px;
  color: #0D1B1E;
  text-decoration: none;
  padding: 0.6rem 2rem;
  transition: color 0.2s ease, padding-left 0.2s ease;
  white-space: nowrap;
  text-transform: none;
}

.pom-header__nav .top-menu[data-depth="1"] > li > a:hover {
  color: #1B6B77;
  padding-left: 2.5rem;
}

/* Séparateur avant le dernier item */
.pom-header__nav .top-menu[data-depth="1"] > li:last-child {
  border-top: 1px solid #EFF6F7;
  margin-top: 0.5rem;
  padding-top: 0.5rem;
}

.pom-header__nav .top-menu[data-depth="1"] > li:last-child > a {
  font-size: 11px;
  letter-spacing: 1px;
  text-decoration: underline;
  color: #7A9499;
}

.pom-header__nav .top-menu[data-depth="1"] > li:last-child > a:hover {
  color: #1B6B77;
}

/* Sous-sous-menu niveau 3 (div.collapse > ul[data-depth="2"]) */
.pom-header__nav .top-menu[data-depth="1"] > li {
  position: relative;
}

.pom-header__nav .top-menu[data-depth="1"] > li > .collapse {
  display: none !important;
  position: absolute;
  left: 100%;
  top: 0;
  background: #FFFFFF;
  border-top: 2px solid #1B6B77;
  min-width: 200px;
  padding: 1.5rem 0;
  box-shadow: 0 8px 24px rgba(0,0,0,0.06);
}

.pom-header__nav .top-menu[data-depth="1"] > li:hover > .collapse {
  display: block !important;
}

.pom-header__nav .top-menu[data-depth="2"] > li > a {
  display: block;
  font-family: 'DM Sans', sans-serif;
  font-size: 12px;
  font-weight: 400;
  color: #0D1B1E;
  text-decoration: none;
  padding: 0.6rem 2rem;
  white-space: nowrap;
  transition: color 0.2s ease, padding-left 0.2s ease;
}

.pom-header__nav .top-menu[data-depth="2"] > li > a:hover {
  color: #1B6B77;
  padding-left: 2.5rem;
}

/* Masquer les toggles mobile dans le desktop nav */
.pom-header__nav .navbar-toggler,
.pom-header__nav .collapse-icons {
  display: none !important;
}

/* Overlay désactivé */
.pom-nav-overlay {
  display: none !important;
}

/* ── Overlay de recherche ── */
/* Search overlay — même style desktop et mobile.
   ⚠️ top NON défini ici : le JS le pose en inline (header.offsetHeight →
   70/80px desktop, 60px mobile). Un `top:…!important` écraserait cet
   inline et désaligneraint l'overlay du bas du header sur desktop. */
.pom-search-overlay {
  position: fixed !important;
  left: 0 !important;
  right: 0 !important;
  background: #FFFFFF !important;
  border-bottom: 0.5px solid #EFF6F7 !important;
  z-index: 400 !important;
  padding: 1rem 2.5rem !important;
  box-shadow: 0 4px 20px rgba(13,27,30,0.06) !important;
  /* toggle ouverture/fermeture (conservé) */
  opacity: 0;
  pointer-events: none;
  transform: translateY(-6px);
  transition: opacity 0.25s ease, transform 0.25s ease;
}

.pom-search-overlay.is-open {
  opacity: 1;
  pointer-events: all;
  transform: translateY(0);
}

.pom-search-overlay__form {
  width: 100%;
}

.pom-search-overlay__inner {
  display: flex !important;
  align-items: center !important;
  gap: 1rem !important;
  max-width: 700px !important;
  margin: 0 auto !important;
}

.pom-search-overlay__icon {
  stroke: #7A9499 !important;
  flex-shrink: 0 !important;
}

.pom-search-overlay__input {
  flex: 1 !important;
  border: none !important;
  border-bottom: 0.5px solid #C5DDE0 !important;
  border-radius: 0 !important;
  outline: none !important;
  font-size: 16px !important;
  font-family: 'Cormorant Garamond', serif !important;
  font-weight: 300 !important;
  color: #0D1B1E !important;
  background: transparent !important;
  letter-spacing: 0.04em !important;
  padding: 8px 0 !important;
  transition: border-color 0.25s !important;
}

.pom-search-overlay__input:focus {
  border-bottom-color: #1B6B77 !important;
  outline: none !important;
}

.pom-search-overlay__input::placeholder {
  color: #C5DDE0 !important;
  font-style: italic !important;
}

.pom-search-overlay__close {
  background: transparent !important;
  border: none !important;
  cursor: pointer !important;
  padding: 4px !important;
  display: flex !important;
  align-items: center !important;
  flex-shrink: 0 !important;
}

.pom-search-overlay__close svg {
  stroke: #7A9499 !important;
  transition: stroke 0.25s !important;
}

.pom-search-overlay__close:hover svg {
  stroke: #1B6B77 !important;
}

/* Mobile — plein largeur */
@media (max-width: 768px) {
  .pom-search-overlay {
    padding: 1rem !important;
  }

  .pom-search-overlay__input {
    font-size: 15px !important;
  }
}

/* ── Lien Nouveautés header ── */
.pom-header__navlink {
  font-family: 'DM Sans', sans-serif;
  font-size: 13px;
  font-weight: 400;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: #0D1B1E;
  text-decoration: none;
  transition: color 0.2s;
  white-space: nowrap;
}

.pom-header__navlink:hover {
  color: #1B6B77;
}

/* Séparateur entre SHOP et NOUVEAUTÉS */
.pom-header__left {
  display: flex;
  align-items: center;
  gap: 24px;
}

/* Masquer NOUVEAUTÉS sur mobile
   si pas assez de place */
@media (max-width: 576px) {
  .pom-header__navlink {
    display: none;
  }
}

/* ============================================================
   ÉCLAT DE VIVIE — Logo typographique (header)
   ============================================================ */
.edv-logo-name {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 22px;
  font-weight: 400;
  letter-spacing: 0.18em;
  color: #0D1B1E;
  text-decoration: none;
  display: block;
  line-height: 1;
}
.edv-logo-tagline {
  font-size: 8px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: #1B6B77;
  display: block;
  margin-top: 3px;
}
/* Masquer l'image logo PS si présente */
.pom-header__logo img { display: none; }

/* BUG 1 — Logo texte : nom + tagline empilés, centrés, une ligne chacun */
.pom-header__logo-link {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 0;
}
.edv-logo-name {
  white-space: nowrap;
  display: block;
  line-height: 1;
}
.edv-logo-tagline {
  display: block;
  text-align: center;
  white-space: nowrap;
  margin-top: 3px;
}

/* BUG 2 — Header blanc opaque (override du transparent homepage + du sticky crème/blur) */
.pom-header,
body.page-index .pom-header,
.pom-header--sticky,
.pom-header.is-scrolled {
  background-color: #FFFFFF !important;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
.pom-header--sticky,
.pom-header.is-scrolled {
  box-shadow: 0 1px 0 rgba(27, 107, 119, 0.1);
}

/* ── HEADER MOBILE : Shop (gauche) · logo centré absolu · icônes (droite) ── */
@media (max-width: 768px) {
  .pom-header__inner {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    height: 60px !important;
    padding: 0 1rem !important;
    position: relative !important;
  }

  /* Logo centré absolument dans le header (H + V) via translate(-50%,-50%).
     pointer-events:none → le bloc centré ne bloque pas les clics Shop/icônes ;
     seul le lien logo reste cliquable. */
  .pom-header__center {
    position: absolute !important;
    left: 50% !important;
    top: 50% !important;
    transform: translate(-50%, -50%) !important;
    text-align: center !important;
    pointer-events: none !important;
    flex: 0 0 auto !important;
  }
  .pom-header__center a { pointer-events: all !important; }

  /* ⚠️ CLÉ DU CENTRAGE VERTICAL : le logo est en position:absolute dans le
     thème (static seulement ≥1024px). On le remet EN FLUX pour qu'il occupe
     réellement le centre (sinon il n'est pas centré verticalement dedans). */
  .pom-header__logo,
  .pom-header__logo-link {
    position: static !important;
    transform: none !important;
    left: auto !important;
  }
  /* .pom-header__logo héritait une hauteur (36px) > contenu (27px) → le lien
     se collait en haut, logo 4px trop haut. On l'ajuste au contenu + centre. */
  .pom-header__logo {
    height: auto !important;
    min-height: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  /* SHOP à gauche */
  .pom-header__left {
    display: flex !important;
    align-items: center !important;
    z-index: 1 !important;
    flex-shrink: 0 !important;
  }

  /* Cache Nouveautés sur mobile */
  .pom-header__navlink { display: none !important; }

  /* Icônes à droite */
  .pom-header__right {
    display: flex !important;
    align-items: center !important;
    z-index: 1 !important;
    flex-shrink: 0 !important;
  }

  /* Taille logo adaptée mobile */
  .edv-logo-name {
    font-size: 14px !important;
    letter-spacing: 0.1em !important;
    white-space: nowrap !important;
    display: block !important;
    line-height: 1 !important;
  }
  .edv-logo-tagline {
    font-size: 6.5px !important;
    letter-spacing: 0.18em !important;
    display: block !important;
    margin-top: 2px !important;
  }

  /* Shop + icônes resserrés */
  .pom-header__shop     { font-size: 12px !important; padding: 0 !important; white-space: nowrap !important; }
  .pom-header__icons    { gap: 0.375rem !important; flex-wrap: nowrap !important; }
  .pom-header__icon-btn { padding: 3px !important; }

  /* Masque la loupe de recherche sur mobile (recherche dans le méga-menu) */
  #pom-search-toggle { display: none !important; }
}

/* ── Recherche mobile (dans le méga-menu, car la loupe header est masquée) ──
   Champ « filet » : pas de fond ni de cadre, juste un souligné.
   ⚠️ Le panneau du méga-menu est BLANC (.pom-shop__panels) : les couleurs
   sont donc en ink/muted, pas en blanc translucide. */
@media (max-width: 768px) {
  .pom-mobile-search {
    padding: 1rem 1.25rem !important;
    border-bottom: 0.5px solid #EFF6F7 !important;
  }

  .pom-mobile-search__form {
    display: flex !important;
    align-items: center !important;
    gap: 0.75rem !important;
    background: transparent !important;
    border: none !important;
    border-bottom: 0.5px solid #C5DDE0 !important;
    padding: 8px 0 !important;
  }

  .pom-mobile-search__input {
    flex: 1 !important;
    border: none !important;
    background: transparent !important;
    font-size: 14px !important;
    font-family: 'Cormorant Garamond', Georgia, serif !important;
    font-weight: 300 !important;
    color: #0D1B1E !important;
    outline: none !important;
    font-style: italic !important;
  }

  .pom-mobile-search__input::placeholder {
    color: #7A9499 !important;
    font-style: italic !important;
  }

  .pom-mobile-search__form svg {
    stroke: #7A9499 !important;
    flex-shrink: 0 !important;
  }
}

/* Cache sur desktop */
@media (min-width: 769px) {
  .pom-mobile-search {
    display: none !important;
  }
}