/* =====================================================
   ALLO NATUREL — THEME CUSTOM
   PrestaShop 9.1 / Hummingbird 2.0
   ===================================================== */

:root {
  --an-green: #0D4C46;
  --an-green-dark: #083D38;
  --an-green-light: #E5EDEB;
  --an-orange: #FFA149;
  --an-cream: #F5F2EC;
  --an-line: #E5E0D5;
  --an-white: #FFFFFF;
  --an-grey: #58716D;
}


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

.an-header {
  position: sticky;
  top: 0;
  z-index: 1000;
  background: var(--an-white);
  color: var(--an-green);
}


/* =====================================================
   BANDEAU SUPERIEUR
   ===================================================== */

.an-announce {
  min-height: 38px;
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: stretch;
  background: var(--an-cream);
}

.an-announce__message {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 8px 25px;
  font-size: 12px;
  color: var(--an-green);
}

.an-announce__help {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 0 25px;
  background: var(--an-green);
  color: #fff !important;
  text-decoration: none;
  font-size: 12px;
}

.an-announce__help:hover {
  background: var(--an-green-dark);
  color: #fff !important;
}


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

.an-header__main {
  background: #fff;
  border-bottom: 1px solid var(--an-line);
}

.an-header__grid {
  width: 100%;
  max-width: 1360px;
  margin: 0 auto;

  display: grid;

  grid-template-columns:
    260px
    minmax(300px, 1fr)
    auto
    auto;

  grid-template-areas:
    "logo search account cart"
    "menu menu menu menu";

  align-items: center;

  column-gap: 28px;

  padding: 18px 32px 0;
}


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

.an-header__logo {
  grid-area: logo;
}

.an-header__logo a {
  display: block;
}

.an-header__logo img {
  display: block;
  width: 250px;
  max-width: 100%;
  max-height: 108px;
  object-fit: contain;
}


/* =====================================================
   RECHERCHE
   ===================================================== */

.an-header__search {
  grid-area: search;
  min-width: 0;
}

.an-header__search #_desktop_ps_searchbar {
  display: block !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
}

.an-header__search .ps-searchbar {
  width: 100% !important;
}

.an-header__search .ps-searchbar__form {
  position: relative;

  display: flex;
  align-items: center;

  width: 100%;

  padding: 4px 8px 4px 18px;

  background: #fff;

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

.an-header__search .ps-searchbar__input {
  min-height: 42px;

  background: transparent !important;

  border: 0 !important;
  box-shadow: none !important;
}

.an-header__search .ps-searchbar__input:focus {
  border: 0 !important;
  box-shadow: none !important;
}


/* =====================================================
   COMPTE + PANIER
   ===================================================== */

.an-header__account {
  grid-area: account;
}

.an-header__cart {
  grid-area: cart;
}

.an-header__account .header-block__action-btn,
.an-header__cart .header-block__action-btn {
  color: var(--an-green) !important;
  text-decoration: none !important;
}

.an-header__account .header-block__icon,
.an-header__cart .header-block__icon {
  width: 38px;
  height: 38px;

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

  background: var(--an-green-light);

  border-radius: 50%;

  color: var(--an-green);
}

.an-header__cart .header-block__badge {
  background: var(--an-orange) !important;
  color: var(--an-green-dark) !important;
}


/* =====================================================
   MENU PRINCIPAL
   ===================================================== */

.an-header__menu {
  grid-area: menu;

  position: static;

  width: 100%;

  margin-top: 16px;

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

.an-header__menu .ps-mainmenu {
  width: 100% !important;
  max-width: none !important;
  padding: 0 !important;
}

.an-header__menu .ps-mainmenu__tree {
  display: flex !important;
  align-items: center;

  gap: 38px;

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

  list-style: none;
}

.an-header__menu .ps-mainmenu__tree-link {
  position: relative;

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

  padding: 16px 0 !important;

  color: var(--an-green) !important;

  font-size: 13px !important;
  font-weight: 600 !important;
  line-height: 1.2;

  text-decoration: none !important;
}

.an-header__menu .ps-mainmenu__tree-link::after {
  content: "";

  position: absolute;
  left: 0;
  right: 0;
  bottom: 5px;

  height: 2px;

  background: var(--an-orange);

  transform: scaleX(0);
  transform-origin: left;

  transition: transform .18s ease;
}

.an-header__menu .ps-mainmenu__tree-item:hover
.ps-mainmenu__tree-link::after {
  transform: scaleX(1);
}



/* =====================================================
   MEGA MENU — MAQUETTE CLAUDE
   ===================================================== */

@media (min-width: 1200px) {

  /* Le menu doit pouvoir s'étendre sur toute la largeur */
  .an-header__menu,
.an-header__menu .ps-mainmenu--desktop,
.an-header__menu .ps-mainmenu__desktop,
.an-header__menu .ps-mainmenu__tree,
.an-header__menu .ps-mainmenu__tree-item {
  position: static !important;
}
/* Le menu mobile ne doit jamais occuper de place dans le header */
#mobileMenu.ps-mainmenu--mobile.offcanvas {
  position: fixed !important;
}

  /* ================================================
     PANNEAU PRINCIPAL
     ================================================ */

  #header .an-mega {
    left: 0 !important;
    right: 0 !important;

    width: 100vw !important;

    padding: 0 !important;

    background: #ffffff !important;

    border-top: 1px solid #eee8df !important;
    border-bottom: 1px solid #eee8df !important;

    box-shadow:
      0 20px 50px rgba(13, 76, 70, 0.06) !important;
  }


  .an-mega__container {
    width: calc(100% - 80px);
    max-width: 1615px;

    margin: 0 auto;

    display: grid;

    grid-template-columns:
      minmax(0, 1.25fr)
      minmax(560px, .95fr);

    gap: 72px;

    padding: 40px 0 42px;
  }


  /* ================================================
     COLONNE PRODUITS
     ================================================ */

  .an-mega__products {
    min-width: 0;
  }

  .an-mega__eyebrow {
    margin-bottom: 24px;

    font-family: "Geist", sans-serif;
    font-size: 15px;
    font-weight: 500;
    line-height: 1.3;

    color: #0D4C46;
  }


  .an-mega__categories {
    display: grid;

    grid-template-columns:
      repeat(2, minmax(0, 1fr));

    column-gap: clamp(10px, 1vw, 16px);
    row-gap: 8px;
  }


  .an-mega__category {
    min-width: 0;
  }


  /* Titres comme dans Claude */

  .an-mega__category-title {
    display: inline-block;

    margin-bottom: 5px;

    font-family: "Bagrile", "Instrument Serif", Georgia, serif !important;

    font-size: 28px;
    font-weight: 400;
    line-height: 1.05;

    color: #0D4C46 !important;

    text-decoration: none !important;
  }

  .an-mega__category-title:hover {
    color: #0D4C46 !important;
    opacity: .72;
  }


  /* Liens catégories */

  .an-mega__category-links {
    margin: 0 !important;
    padding: 0 !important;

    list-style: none !important;
  }

  .an-mega__category-links li {
    margin: 0 0 3px !important;
    padding: 0 !important;
  }

  .an-mega__category-links a {
    font-family: "Geist", sans-serif;

    font-size: 15px;
    font-weight: 400;
    line-height: 1.45;

    color: #075B56 !important;

    text-decoration: none !important;

    transition:
      opacity .15s ease,
      color .15s ease;
  }

  .an-mega__category-links a:hover {
    color: #0D4C46 !important;
    opacity: .65;
  }


  /* ================================================
     PANNEAU BESOINS
     ================================================ */

  .an-mega__needs {
    align-self: start;

    min-height: 500px;

    padding: 34px 34px 35px;

    background: #F5F2EC;

    border-radius: 16px;
  }


  .an-mega__needs-title {
    margin-bottom: 30px;

    font-family: "Geist", sans-serif;

    font-size: 15px;
    font-weight: 500;
    line-height: 1.3;

    color: #0D4C46;
  }


  .an-mega__needs-grid {
    display: grid;

    grid-template-columns:
      repeat(3, minmax(0, 1fr));

    column-gap: 34px;
    row-gap: 17px;
  }


  .an-mega__needs-grid span {
    display: block;

    font-family: "Geist", sans-serif;

    font-size: 15px;
    font-weight: 400;
    line-height: 1.35;

    color: #075B56;
  }


  /* ================================================
     BOUTON DIAGNOSTIC
     ================================================ */

  .an-mega__diagnostic {
    margin-top: 26px;

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

    gap: 15px;

    min-height: 40px;

    padding: 8px 18px;

    background: transparent;

    border: 1px solid #DED8CE;
    border-radius: 999px;

    font-family: "Geist", sans-serif;

    font-size: 14px;
    font-weight: 500;

    color: #0D4C46;

    cursor: pointer;

    transition:
      background .15s ease,
      border-color .15s ease;
  }


  .an-mega__diagnostic:hover {
    background: #fff;
    border-color: #CFC7BB;
  }


  .an-mega__diagnostic span {
    font-size: 17px;
    line-height: 1;
  }

}


/* =====================================================
   PETIT DESKTOP
   ===================================================== */

@media (min-width: 1200px) and (max-width: 1450px) {

  .an-mega__container {
    width: calc(100% - 64px);

    grid-template-columns:
      minmax(0, 1.1fr)
      minmax(500px, .9fr);

    gap: 45px;
  }

  .an-mega__categories {
    column-gap: 10px;
    row-gap: 6px;
  }

  .an-mega__needs-grid {
    column-gap: 25px;
  }

  .an-mega__category-title {
    font-size: 25px;
  }

  .an-mega__category-links a,
  .an-mega__needs-grid span {
    font-size: 14px;
  }

}
/* =====================================================
   HEADER — PROPORTIONS MAQUETTE CLAUDE
   ===================================================== */

@media (min-width: 1200px) {

  .an-header__grid {
    max-width: 1580px !important;
    grid-template-columns:
      320px
      minmax(420px, 1fr)
      auto
      auto !important;

    column-gap: 34px !important;

    padding:
      20px 0
      0 !important;
  }

  .an-header__logo img {
    width: 300px !important;
    max-height: 125px !important;
  }

  .an-header__search .ps-searchbar__form {
    min-height: 58px !important;
  }

  .an-header__search .ps-searchbar__input {
    min-height: 48px !important;
    font-size: 15px !important;
  }

  .an-header__account .header-block__icon,
  .an-header__cart .header-block__icon {
    width: 44px !important;
    height: 44px !important;
  }

  .an-header__menu {
    margin-top: 18px !important;
  }

  .an-header__menu .ps-mainmenu__tree {
    gap: 54px !important;
  }

  .an-header__menu .ps-mainmenu__tree-link {
    padding: 18px 0 !important;
    font-size: 15px !important;
  }

}

/* =====================================================
   HEADER — NAVIGATION ET COMPORTEMENT AU SCROLL
   ===================================================== */

.an-header .an-announce {
  max-height: 48px;
  overflow: hidden;
  will-change: max-height, opacity, transform;
  transition:
    max-height .2s cubic-bezier(.22, 1, .36, 1),
    opacity .12s ease,
    transform .2s cubic-bezier(.22, 1, .36, 1);
}

.an-header .an-header__menu {
  max-height: 96px;
  overflow: visible;
  will-change: max-height, opacity, transform;
  transition:
    max-height .2s cubic-bezier(.22, 1, .36, 1),
    margin-top .2s cubic-bezier(.22, 1, .36, 1),
    opacity .12s ease,
    transform .2s cubic-bezier(.22, 1, .36, 1);
}

.an-header .an-header__grid {
  transition: padding .2s cubic-bezier(.22, 1, .36, 1);
}

.an-header--compact .an-announce {
  min-height: 0;
  max-height: 0;
  opacity: 0;
  pointer-events: none;
  transform: translateY(-8px);
}

.an-header__menu .an-menu-item--direct > .submenu,
.an-header__menu .an-menu-item--direct > .ps-mainmenu__tree-dropdown-toggle,
.an-header__menu .an-menu-item--direct > .ps-mainmenu__tree-item-wrapper
  .ps-mainmenu__tree-dropdown-toggle {
  display: none !important;
}

.an-header--compact .an-header__menu {
  max-height: 0;
  margin-top: 0 !important;
  border-top-width: 0;
  opacity: 0;
  overflow: hidden;
  pointer-events: none;
  transform: translateY(-8px);
}

/* Pas d'encadré après un clic souris. Le repère clavier reste visible. */
.an-header a:focus:not(:focus-visible),
.an-header button:focus:not(:focus-visible),
.an-header input:focus:not(:focus-visible) {
  outline: 0 !important;
  box-shadow: none !important;
}

.an-header__menu .ps-mainmenu__tree-link:active {
  background: transparent !important;
  border-color: transparent !important;
  outline: 0 !important;
  box-shadow: none !important;
}

.an-header a:focus-visible,
.an-header button:focus-visible,
.an-header input:focus-visible {
  outline: 2px solid var(--an-orange) !important;
  outline-offset: 3px;
  box-shadow: none !important;
}

@media (min-width: 1200px) {
  .an-header--compact .an-header__grid {
    padding-top: 12px !important;
    padding-bottom: 12px !important;
  }
}

@media (max-width: 767px) {
  .an-header__logo img {
    width: 190px !important;
    max-height: 82px !important;
  }

  .an-header--compact .an-header__grid {
    padding-top: 10px !important;
    padding-bottom: 10px !important;
  }
}

/* =====================================================
   MÉGA-MENU — TYPOGRAPHIE ET ESPACEMENTS (CORRECTION)
   Placé en fin de fichier pour primer sur les règles initiales.
   ===================================================== */
@media (min-width: 1200px) {
  html body #header .an-mega .an-mega__container {
    gap: 30px !important;
    padding-top: 20px !important;
    padding-bottom: 22px !important;
  }

  html body #header .an-mega .an-mega__eyebrow {
    margin-bottom: 10px !important;
  }

  html body #header .an-mega .an-mega__categories {
    column-gap: 10px !important;
    row-gap: 6px !important;
  }

  html body #header .an-mega .an-mega__category {
    margin: 0 !important;
    padding: 0 !important;
  }

  html body #header .an-mega .an-mega__category-title {
    margin: 0 0 5px !important;
    font-family: "Bagrile", "Instrument Serif", Georgia, serif !important;
    font-weight: 400 !important;
    line-height: 1.05 !important;
  }

  html body #header .an-mega .an-mega__category-links li {
    margin: 0 0 3px !important;
    padding: 0 !important;
  }

  html body #header .an-mega .an-mega__category-links a {
    line-height: 1.25 !important;
  }

  html body #header .an-mega .an-mega__needs {
    min-height: 0 !important;
    padding: 20px !important;
  }

  html body #header .an-mega .an-mega__needs-title {
    margin-bottom: 12px !important;
  }

  html body #header .an-mega .an-mega__needs-grid {
    column-gap: 16px !important;
    row-gap: 8px !important;
  }

  html body #header .an-mega .an-mega__diagnostic {
    margin-top: 12px !important;
  }
}

/* Écrans portables moins hauts : le contenu reste visible sans être coupé. */
@media (min-width: 1200px) and (max-height: 800px) {
  html body #header .an-mega .an-mega__container {
    gap: 22px !important;
    padding-top: 10px !important;
    padding-bottom: 12px !important;
  }

  html body #header .an-mega .an-mega__eyebrow {
    margin-bottom: 5px !important;
    font-size: 13px !important;
  }

  html body #header .an-mega .an-mega__categories {
    column-gap: 8px !important;
    row-gap: 4px !important;
  }

  html body #header .an-mega .an-mega__category-title {
    margin-bottom: 3px !important;
    font-size: 21px !important;
  }

  html body #header .an-mega .an-mega__category-links li {
    margin-bottom: 1px !important;
  }

  html body #header .an-mega .an-mega__category-links a,
  html body #header .an-mega .an-mega__needs-grid span {
    font-size: 12px !important;
    line-height: 1.18 !important;
  }

  html body #header .an-mega .an-mega__needs {
    min-height: 0 !important;
    padding: 12px 14px !important;
  }

  html body #header .an-mega .an-mega__needs-title {
    margin-bottom: 6px !important;
    font-size: 13px !important;
  }

  html body #header .an-mega .an-mega__needs-grid {
    column-gap: 10px !important;
    row-gap: 4px !important;
  }

  html body #header .an-mega .an-mega__diagnostic {
    min-height: 32px !important;
    margin-top: 7px !important;
    padding: 5px 13px !important;
    font-size: 12px !important;
  }
}

/* =====================================================
   COMPTE / PANIER — STYLE CLAUDE
   ===================================================== */

@media (min-width: 768px) {

  .an-account-box,
  .an-cart-box {
    display: flex;
    align-items: center;
    gap: 12px;
    white-space: nowrap;
  }

  .an-account-box__icon,
  .an-cart-box__icon {
    position: relative;

    width: 44px;
    height: 44px;

    flex: 0 0 44px;

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

    border-radius: 50%;

    background: #edf3f1;

    color: var(--an-green) !important;

    text-decoration: none !important;
  }

  .an-account-box__icon .material-icons,
  .an-cart-box__icon .material-icons {
    font-size: 21px;
  }

  .an-account-box__content,
  .an-cart-box__content {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
  }

  .an-account-box__title,
  .an-cart-box__title {
    color: #063f3b !important;

    font-family: "Geist", sans-serif;

    font-size: 15px;
    font-weight: 500;
    line-height: 1.2;

    text-decoration: none !important;
  }

  .an-account-box__subtitle {
    color: #81938f !important;

    font-family: "Geist", sans-serif;

    font-size: 13px;
    font-weight: 400;

    text-decoration: none !important;
  }

  .an-cart-box__subtitle {
    color: var(--an-orange);

    font-family: "Geist", sans-serif;

    font-size: 13px;
    font-weight: 400;
  }

  .an-cart-box__badge {
    position: absolute;

    top: -5px;
    right: -4px;

    min-width: 20px;
    height: 20px;

    padding: 0 5px;

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

    border-radius: 999px;

    background: var(--an-orange);
    color: #073f3a;

    font-size: 12px;
    font-weight: 600;
  }

}

/* =====================================================
   RECHERCHE LIVE — ALLO NATUREL
   ===================================================== */

.an-header__search {
  position: relative;
  z-index: 1500;
}

.an-live-search {
  position: relative;
  width: 100%;
}


/* BARRE */

.an-live-search__form {
  width: 100%;

  min-height: 58px;

  display: flex;
  align-items: center;

  position: relative;

  padding:
    4px
    6px
    4px
    24px;

  background: #fff;

  border: 1px solid #ded8ce;
  border-radius: 999px;

  transition:
    border-color .15s ease,
    box-shadow .15s ease;
}

.an-live-search__form:focus-within {
  border-color: #b9c9c5;

  box-shadow:
    0 0 0 3px rgba(13, 76, 70, .05);
}


/* INPUT */

.an-live-search__input {
  width: 100%;

  min-width: 0;
  height: 48px;

  padding: 0 86px 0 0 !important;

  background: transparent !important;

  border: 0 !important;
  outline: 0 !important;

  box-shadow: none !important;

  font-family: "Geist", sans-serif;

  font-size: 15px;

  color: #0d4c46;
}

.an-live-search__input::placeholder {
  color: #758d88;
  opacity: 1;
}


/* CROIX */

.an-live-search__clear {
  position: absolute;

  right: 68px;
  top: 50%;

  transform: translateY(-50%);

  width: 32px;
  height: 32px;

  padding: 0;

  background: transparent;

  border: 0;

  color: #52716c;

  font-size: 26px;
  line-height: 1;

  cursor: pointer;
}

.an-live-search__clear[hidden] {
  display: none !important;
}


/* BOUTON RECHERCHE */

.an-live-search__submit {
  position: absolute;

  right: 6px;
  top: 50%;

  transform: translateY(-50%);

  width: 48px;
  height: 48px;

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

  padding: 0;

  background: #07574f;

  border: 0;
  border-radius: 50%;

  color: #fff;

  cursor: pointer;
}

.an-live-search__submit:hover {
  background: #063f3b;
}

.an-live-search__submit .material-icons {
  font-size: 23px;
}


/* =====================================================
   PANNEAU DE RÉSULTATS
   ===================================================== */

.an-live-search__results {
  position: absolute;

  top: calc(100% + 10px);
  left: 0;

  z-index: 9999;

  width: 100%;

  max-height: 620px;

  overflow-y: auto;

  padding: 24px;

  background: #fff;

  border: 1px solid #ded8ce;
  border-radius: 18px;

  box-shadow:
    0 20px 45px rgba(13, 76, 70, .14);
}

.an-live-search__results[hidden] {
  display: none !important;
}


/* GROUPE */

.an-search-group + .an-search-group {
  margin-top: 26px;
}

.an-search-group__title {
  margin-bottom: 10px;

  font-family: "Geist", sans-serif;

  font-size: 11px;
  font-weight: 500;

  letter-spacing: .13em;

  color: #7b9691;
}


/* RÉSULTAT */

.an-search-result {
  display: flex;
  flex-direction: column;

  gap: 3px;

  padding: 9px 0;

  color: #0d4c46 !important;

  text-decoration: none !important;
}

.an-search-result:hover
.an-search-result__name {
  color: #ff9b43;
}

.an-search-result__name {
  font-family: "Geist", sans-serif;

  font-size: 15px;
  font-weight: 500;

  line-height: 1.3;

  color: #0d4c46;

  transition: color .15s ease;
}

.an-search-result__meta {
  font-family: "Geist", sans-serif;

  font-size: 12px;
  font-weight: 400;

  color: #7b9691;
}


/* CHARGEMENT / VIDE */

.an-search-loading,
.an-search-empty {
  padding: 12px 0;

  font-family: "Geist", sans-serif;

  font-size: 14px;

  color: #7b9691;
}


/* VOIR TOUT */

.an-search-all {
  margin-top: 20px;

  padding-top: 16px;

  display: flex;
  align-items: center;
  justify-content: space-between;

  border-top: 1px solid #eee9e1;

  color: #0d4c46 !important;

  font-family: "Geist", sans-serif;

  font-size: 13px;
  font-weight: 600;

  text-decoration: none !important;
}


/* Masque l'ancien autocomplete natif */
.searchbar-autocomplete,
.ui-autocomplete.searchbar-autocomplete {
  display: none !important;
}


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

@media (max-width: 767px) {

  .an-live-search__results {
    position: fixed;

    top: 90px;
    left: 12px;
    right: 12px;

    width: auto;

    max-height:
      calc(100vh - 110px);
  }

}

/* =========================================================
   ALLO NATUREL — FOOTER GLOBAL
   À ajouter dans /themes/allonaturel/assets/css/custom.css
   ========================================================= */

.an-footer {
  --an-footer-green: #07574f;
  --an-footer-muted: #6f8b87;
  --an-footer-bg: #f5f2ec;
  --an-footer-line: #ded8ce;

  width: 100%;
  padding: 64px 0 28px;
  background: var(--an-footer-bg);
  color: var(--an-footer-green);
  font-family: "Geist", Arial, sans-serif;
}

.an-footer__container {
  width: min(1580px, calc(100% - 70px));
  margin: 0 auto;
}

.an-footer__grid {
  display: grid;
  grid-template-columns: minmax(230px, .95fr) minmax(0, 3.4fr);
  gap: clamp(54px, 6vw, 110px);
  align-items: start;
}

.an-footer__brand-title {
  margin: 0 0 20px;
  font-family: "Bagrile", "Instrument Serif", Georgia, serif !important;
  font-size: 31px;
  font-weight: 400;
  line-height: 1;
  color: var(--an-footer-green);
}

.an-footer__brand-text {
  max-width: 300px;
  margin: 0;
  font-size: 13px;
  line-height: 1.65;
  color: var(--an-footer-green);
}

.an-footer__badges {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  max-width: 310px;
  margin-top: 23px;
}

.an-footer__badges span {
  display: inline-flex;
  align-items: center;
  min-height: 29px;
  padding: 0 12px;
  border: 1px solid rgba(7, 87, 79, .10);
  border-radius: 999px;
  background: rgba(255,255,255,.22);
  font-size: 10px;
  letter-spacing: .02em;
  color: var(--an-footer-green);
}

.an-footer__nav {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(28px, 4vw, 70px);
}

.an-footer__column {
  min-width: 0;
}

.an-footer__column summary {
  list-style: none;
  margin: 0 0 20px;
  cursor: default;
  font-size: 10px;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--an-footer-green);
}

.an-footer__column summary::-webkit-details-marker {
  display: none;
}

.an-footer__column ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.an-footer__column li + li {
  margin-top: 12px;
}

.an-footer__column a {
  font-size: 13px;
  line-height: 1.35;
  color: var(--an-footer-green) !important;
  text-decoration: none !important;
  transition: color .16s ease, opacity .16s ease;
}

.an-footer__column a span {
  color: var(--an-footer-muted);
}

.an-footer__column a:hover {
  color: #ff9b43 !important;
}

.an-footer__bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 30px;
  margin-top: 58px;
  padding-top: 27px;
  border-top: 1px solid var(--an-footer-line);
}

.an-footer__bottom p {
  margin: 0;
  font-size: 10px;
  line-height: 1.5;
  color: #78918d;
}

.an-footer__legal {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0;
}

.an-footer__legal a {
  position: relative;
  padding-left: 14px;
  margin-left: 10px;
  font-size: 10px;
  color: #78918d !important;
  text-decoration: none !important;
}

.an-footer__legal a::before {
  content: "·";
  position: absolute;
  left: 3px;
  color: #9aaba8;
}

.an-footer__legal a:first-child {
  margin-left: 0;
  padding-left: 0;
}

.an-footer__legal a:first-child::before {
  display: none;
}

.an-footer__legal a:hover {
  color: var(--an-footer-green) !important;
}

/* Tablette */
@media (max-width: 1199px) {
  .an-footer__container {
    width: calc(100% - 50px);
  }

  .an-footer__grid {
    grid-template-columns: 1fr;
    gap: 45px;
  }

  .an-footer__brand {
    max-width: 620px;
  }

  .an-footer__nav {
    gap: 36px;
  }
}

/* Mobile */
@media (max-width: 767px) {
  .an-footer {
    padding: 48px 0 24px;
  }

  .an-footer__container {
    width: calc(100% - 36px);
  }

  .an-footer__nav {
    grid-template-columns: 1fr;
    gap: 0;
    border-top: 1px solid var(--an-footer-line);
  }

  .an-footer__column {
    border-bottom: 1px solid var(--an-footer-line);
  }

  .an-footer__column[open] {
    padding-bottom: 18px;
  }

  .an-footer__column summary {
    position: relative;
    margin: 0;
    padding: 18px 32px 18px 0;
    cursor: pointer;
  }

  .an-footer__column summary::after {
    content: "+";
    position: absolute;
    right: 2px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 20px;
    font-weight: 300;
  }

  .an-footer__column[open] summary::after {
    content: "−";
  }

  .an-footer__column ul {
    padding-right: 20px;
  }

  .an-footer__bottom {
    align-items: flex-start;
    flex-direction: column;
    margin-top: 36px;
    gap: 18px;
  }

  .an-footer__legal {
    gap: 8px 0;
  }
}

/* À ajouter dans /themes/allonaturel/assets/css/custom.css */

.an-announce__messages {
  position: relative;
  min-width: 0;
  height: 38px;
  overflow: hidden;
}

.an-announce__track {
  width: 100%;
  display: flex;
  flex-direction: column;
  transition: transform .5s cubic-bezier(.22, 1, .36, 1);
  will-change: transform;
}

.an-announce__message {
  height: 38px;
  min-height: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 25px;
  font-size: 12px;
  line-height: 1.25;
  color: var(--an-green);
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

@media (prefers-reduced-motion: reduce) {
  .an-announce__track {
    transition: none;
  }
}

/* Bouton WhatsApp du bandeau supérieur */
html body .an-announce .an-announce__help,
html body .an-announce .an-announce__help:link,
html body .an-announce .an-announce__help:visited,
html body .an-announce .an-announce__help:hover,
html body .an-announce .an-announce__help:focus,
html body .an-announce .an-announce__help:active {
  color: #fff !important;
  text-decoration: none !important;
}

html body .an-announce .an-announce__help .material-icons {
  color: #fff !important;
}

/* ============================================================
   ALLO NATUREL — HEADER + MENU MOBILE
   Référence maquette mobile transmise le 01/09/2026
   À ajouter EN FIN de /themes/allonaturel/assets/css/custom.css
   ============================================================ */

/* Éléments réservés au mobile */
.an-header__search-toggle,
.an-mobile-bottom-nav {
  display: none;
}

@media (max-width: 767px) {

  /* ----------------------------------------------------------
     BARRE PROMOTIONNELLE HAUTE
     ---------------------------------------------------------- */

  .an-announce {
    display: block !important;
    min-height: 22px !important;
    max-height: 22px !important;
    height: 22px !important;
    overflow: hidden !important;
    background: #0d4c46 !important;
  }

  .an-announce__help {
    display: none !important;
  }

  .an-announce__messages {
    width: 100% !important;
    height: 22px !important;
    min-height: 22px !important;
    overflow: hidden !important;
  }

  .an-announce__track {
    width: 100%;
  }

  .an-announce__message {
    width: 100% !important;
    min-height: 22px !important;
    height: 22px !important;
    padding: 0 10px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    overflow: hidden;
    color: #fff !important;
    -webkit-text-fill-color: #fff !important;
    font-family: "Geist", Arial, sans-serif !important;
    font-size: 9px !important;
    font-weight: 500 !important;
    line-height: 22px !important;
    text-align: center !important;
    white-space: nowrap !important;
    text-overflow: ellipsis !important;
  }


  /* ----------------------------------------------------------
     HEADER PRINCIPAL MOBILE
     burger | logo | recherche | panier
     ---------------------------------------------------------- */

  .an-header {
    background: #fff !important;
  }

  .an-header__main {
    background: #fff !important;
    border-bottom: 1px solid #eee9df !important;
  }

  .an-header__grid {
    width: 100% !important;
    max-width: none !important;
    min-height: 54px !important;
    margin: 0 !important;
    padding: 7px 12px !important;
    display: grid !important;
    grid-template-columns: 38px minmax(0, 1fr) 34px 38px !important;
    grid-template-areas:
      "menu logo searchtoggle cart"
      "search search search search" !important;
    column-gap: 5px !important;
    row-gap: 7px !important;
    align-items: center !important;
  }

  /* Le compact desktop ne doit pas masquer le burger sur mobile */
  .an-header--compact .an-header__menu {
    max-height: none !important;
    margin-top: 0 !important;
    border-top-width: 0 !important;
    opacity: 1 !important;
    overflow: visible !important;
    pointer-events: auto !important;
    transform: none !important;
  }

  .an-header--compact .an-announce {
    min-height: 22px !important;
    max-height: 22px !important;
    opacity: 1 !important;
    pointer-events: auto !important;
    transform: none !important;
  }

  /* Burger */
  .an-header__menu {
    grid-area: menu !important;
    position: static !important;
    width: 38px !important;
    min-width: 38px !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    overflow: visible !important;
  }

  .an-header__menu .ps-mainmenu,
  .an-header__menu .ps-mainmenu--desktop {
    width: 38px !important;
    min-width: 38px !important;
    max-width: 38px !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  .an-header__menu .ps-mainmenu__mobile-toggle {
    width: 38px !important;
    height: 38px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  .an-header__menu .menu-toggle {
    width: 38px !important;
    height: 38px !important;
    min-width: 38px !important;
    margin: 0 !important;
    padding: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border: 0 !important;
    background: transparent !important;
    color: #0d4c46 !important;
    box-shadow: none !important;
  }

  .an-header__menu .menu-toggle .material-icons {
    color: #0d4c46 !important;
    -webkit-text-fill-color: #0d4c46 !important;
    font-size: 21px !important;
  }

  /* Logo */
  .an-header__logo {
    grid-area: logo !important;
    justify-self: center !important;
    align-self: center !important;
    min-width: 0 !important;
  }

  .an-header__logo a {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  .an-header__logo img {
    display: block !important;
    width: 72px !important;
    max-width: 72px !important;
    max-height: 38px !important;
    height: auto !important;
    margin: 0 auto !important;
    object-fit: contain !important;
  }

  /* Recherche : icône dans le header */
  .an-header__search-toggle {
    grid-area: searchtoggle !important;
    width: 34px !important;
    height: 34px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    justify-self: end !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    color: #0d4c46 !important;
    box-shadow: none !important;
  }

  .an-header__search-toggle .material-icons {
    color: #0d4c46 !important;
    -webkit-text-fill-color: #0d4c46 !important;
    font-size: 18px !important;
  }

  /* Compte desktop masqué en haut sur mobile */
  .an-header__account {
    display: none !important;
  }

  /* Panier haut */
  .an-header__cart {
    grid-area: cart !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    width: 38px !important;
    min-width: 38px !important;
    margin: 0 !important;
  }

  .an-header__cart .an-cart-box,
  .an-header__cart .header-block,
  .an-header__cart .blockcart,
  .an-header__cart > div {
    width: 38px !important;
    min-width: 38px !important;
    margin: 0 !important;
  }

  .an-header__cart .an-cart-box__content,
  .an-header__cart .header-block__content,
  .an-header__cart .cart-products-count + span,
  .an-header__cart .hidden-sm-down {
    display: none !important;
  }

  .an-header__cart .an-cart-box__icon,
  .an-header__cart .header-block__icon,
  .an-header__cart .header-block__action-btn {
    position: relative !important;
    width: 34px !important;
    height: 34px !important;
    min-width: 34px !important;
    margin: 0 !important;
    padding: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: transparent !important;
    color: #0d4c46 !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
  }

  .an-header__cart .material-icons {
    color: #0d4c46 !important;
    -webkit-text-fill-color: #0d4c46 !important;
    font-size: 19px !important;
  }

  .an-header__cart .header-block__badge,
  .an-header__cart .an-cart-box__badge {
    background: #ffa149 !important;
    color: #0d4c46 !important;
  }

  /* Champ de recherche : fermé par défaut */
  .an-header__search {
    grid-area: search !important;
    display: none !important;
    width: 100% !important;
    min-width: 0 !important;
    padding: 0 0 3px !important;
    z-index: 1500 !important;
  }

  .an-header--search-open .an-header__search {
    display: block !important;
  }

  .an-header--search-open .an-header__grid {
    padding-bottom: 9px !important;
  }

  .an-header__search .an-live-search,
  .an-header__search .ps-searchbar,
  .an-header__search form {
    width: 100% !important;
    margin: 0 !important;
  }

  .an-header__search .an-live-search__form,
  .an-header__search .ps-searchbar__form {
    min-height: 40px !important;
    border-radius: 999px !important;
  }


  /* ----------------------------------------------------------
     OFFCANVAS MENU
     ---------------------------------------------------------- */

  #mobileMenu.ps-mainmenu--mobile.offcanvas {
    --bs-offcanvas-width: min(68vw, 300px);
    width: min(68vw, 300px) !important;
    min-width: 218px !important;
    max-width: 300px !important;
    height: 100dvh !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
    background: #fff !important;
    border: 0 !important;
    box-shadow: 14px 0 40px rgba(13, 76, 70, .10) !important;
    color: #0d4c46 !important;
  }

  .offcanvas-backdrop.show {
    opacity: 1 !important;
    background: rgba(63, 111, 104, .42) !important;
  }

  #mobileMenu .an-mobile-menu-header {
    flex: 0 0 52px !important;
    min-height: 52px !important;
    padding: 0 14px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    border-bottom: 1px solid #e9e4da !important;
    background: #fff !important;
  }

  #mobileMenu .an-mobile-menu-heading {
    min-width: 0;
    display: flex;
    align-items: center;
  }

  #mobileMenu .an-mobile-menu-title {
    margin: 0 !important;
    color: #0d4c46 !important;
    font-family: "Bagrile", "Instrument Serif", Georgia, serif !important;
    font-size: 20px !important;
    font-weight: 400 !important;
    line-height: 1 !important;
  }

  #mobileMenu .an-mobile-menu-heading:has(.js-back-button:not(.d-none)) .an-mobile-menu-title {
    display: none !important;
  }

  #mobileMenu .ps-mainmenu__back-button .btn {
    min-height: 34px !important;
    margin: 0 !important;
    padding: 0 !important;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    color: #0d4c46 !important;
    text-decoration: none !important;
    font-size: 12px !important;
  }

  #mobileMenu .ps-mainmenu__back-button .btn.d-none {
    display: none !important;
  }

  #mobileMenu .ps-mainmenu__back-button .material-icons {
    font-size: 18px !important;
    color: #0d4c46 !important;
  }

  #mobileMenu .btn-close {
    width: 30px !important;
    height: 30px !important;
    margin: 0 !important;
    padding: 0 !important;
    opacity: 1 !important;
    background-size: 10px 10px !important;
    box-shadow: none !important;
  }

  #mobileMenu .ps-mainmenu__mobile {
    position: relative !important;
    flex: 1 1 auto !important;
    min-height: 0 !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    background: #fff !important;
  }

  /* neutralisation des largeurs natives Hummingbird */
  #mobileMenu .menu {
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
    background: #fff !important;
  }

  #mobileMenu .menu--current {
    display: block !important;
    left: 0 !important;
  }

  #mobileMenu .menu__list {
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
  }

  /* Onglets Nos produits / Vos besoins */
  #mobileMenu .an-mobile-menu-tabs {
    width: 100%;
    height: 40px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    border-bottom: 1px solid #e7e2d8;
    background: #fff;
  }

  #mobileMenu .an-mobile-menu-tabs__item {
    position: relative;
    height: 40px;
    padding: 0 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #8aa09c !important;
    font-family: "Geist", Arial, sans-serif !important;
    font-size: 10px !important;
    font-weight: 500 !important;
    line-height: 1 !important;
    text-decoration: none !important;
  }

  #mobileMenu .an-mobile-menu-tabs__item.is-active {
    color: #0d4c46 !important;
  }

  #mobileMenu .an-mobile-menu-tabs__item.is-active::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -1px;
    height: 2px;
    background: #0d4c46;
  }

  /* Catégories */
  #mobileMenu .an-mobile-menu-products {
    padding: 5px 0 4px !important;
  }

  #mobileMenu .an-mobile-menu-products > li,
  #mobileMenu .menu--child .menu__list > li:not(.menu__title) {
    position: relative;
    min-height: 42px;
    margin: 0 !important;
    padding: 0 12px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 4px;
    border: 0 !important;
    background: #fff !important;
  }

  #mobileMenu .menu__link {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    padding: 11px 0 !important;
    color: #0d4c46 !important;
    -webkit-text-fill-color: #0d4c46 !important;
    font-family: "Geist", Arial, sans-serif !important;
    font-size: 11px !important;
    font-weight: 400 !important;
    line-height: 1.25 !important;
    text-decoration: none !important;
  }

  #mobileMenu .menu__toggle-child {
    flex: 0 0 28px !important;
    width: 28px !important;
    height: 28px !important;
    margin: 0 !important;
    padding: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    color: #86a19d !important;
    text-decoration: none !important;
    box-shadow: none !important;
  }

  #mobileMenu .menu__toggle-child .material-icons {
    color: #86a19d !important;
    -webkit-text-fill-color: #86a19d !important;
    font-size: 15px !important;
  }

  /* Liens Tout le catalogue / Conseils / Ambassadeurs */
  #mobileMenu .an-mobile-menu-secondary {
    margin-top: 2px;
    padding: 7px 12px 10px;
    border-top: 1px solid #e7e2d8;
  }

  #mobileMenu .an-mobile-menu-secondary__link {
    display: block !important;
    padding: 10px 0 !important;
    color: #0d4c46 !important;
    -webkit-text-fill-color: #0d4c46 !important;
    font-family: "Geist", Arial, sans-serif !important;
    font-size: 11px !important;
    font-weight: 400 !important;
    line-height: 1.2 !important;
    text-decoration: none !important;
  }

  /* Écrans des sous-catégories */
  #mobileMenu .menu--child {
    min-height: 100%;
    padding: 0 !important;
  }

  #mobileMenu .menu__title {
    min-height: 46px !important;
    margin: 0 !important;
    padding: 13px 12px 10px !important;
    display: flex !important;
    align-items: center !important;
    color: #0d4c46 !important;
    font-family: "Bagrile", "Instrument Serif", Georgia, serif !important;
    font-size: 17px !important;
    font-weight: 400 !important;
    line-height: 1.1 !important;
    border-bottom: 1px solid #eee9df !important;
  }


  /* ----------------------------------------------------------
     BAS FIXE DU MENU : CONNEXION + TÉLÉPHONE
     ---------------------------------------------------------- */

  #mobileMenu .an-mobile-menu-footer {
    flex: 0 0 auto !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 9px 11px 10px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 7px !important;
    background: #fff !important;
    border-top: 1px solid #e7e2d8 !important;
  }

  #mobileMenu .an-mobile-menu-login {
    min-height: 34px;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 5px;
    padding: 0 12px !important;
    border: 1px solid #ddd7cd !important;
    border-radius: 999px !important;
    background: #fff !important;
    color: #0d4c46 !important;
    -webkit-text-fill-color: #0d4c46 !important;
    font-family: "Geist", Arial, sans-serif !important;
    font-size: 10px !important;
    font-weight: 600 !important;
    text-decoration: none !important;
  }

  #mobileMenu .an-mobile-menu-login .material-icons {
    display: none !important;
  }

  #mobileMenu .an-mobile-menu-phone {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 5px;
    color: #58716d !important;
    -webkit-text-fill-color: #58716d !important;
    font-family: "Geist", Arial, sans-serif !important;
    font-size: 8px !important;
    line-height: 1.2 !important;
    text-align: center !important;
    text-decoration: underline !important;
  }

  #mobileMenu .an-mobile-menu-phone .material-icons {
    color: #74a39d !important;
    -webkit-text-fill-color: #74a39d !important;
    font-size: 12px !important;
  }


  /* ----------------------------------------------------------
     BARRE BASSE FIXE DU SITE
     ---------------------------------------------------------- */

  .an-mobile-bottom-nav {
    position: fixed !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    z-index: 1040 !important;
    width: 100% !important;
    height: calc(58px + env(safe-area-inset-bottom)) !important;
    padding: 5px 5px env(safe-area-inset-bottom) !important;
    display: grid !important;
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
    align-items: stretch !important;
    background: rgba(255,255,255,.98) !important;
    border-top: 1px solid #e7e2d8 !important;
    box-shadow: 0 -7px 22px rgba(13, 76, 70, .06) !important;
  }

  .an-mobile-bottom-nav__item {
    position: relative !important;
    min-width: 0 !important;
    min-height: 48px !important;
    margin: 0 !important;
    padding: 3px 1px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 2px !important;
    border: 0 !important;
    background: transparent !important;
    color: #78908c !important;
    -webkit-text-fill-color: #78908c !important;
    font-family: "Geist", Arial, sans-serif !important;
    font-size: 8px !important;
    font-weight: 400 !important;
    line-height: 1 !important;
    text-decoration: none !important;
    box-shadow: none !important;
  }

  .an-mobile-bottom-nav__item .material-icons {
    color: #78908c !important;
    -webkit-text-fill-color: #78908c !important;
    font-size: 17px !important;
  }

  .an-mobile-bottom-nav__item:first-child,
  .an-mobile-bottom-nav__item:first-child .material-icons {
    color: #0d4c46 !important;
    -webkit-text-fill-color: #0d4c46 !important;
  }

  .an-mobile-bottom-nav__item--cart .material-icons {
    color: #0d4c46 !important;
    -webkit-text-fill-color: #0d4c46 !important;
  }

  .an-mobile-bottom-nav__badge {
    position: absolute !important;
    top: 0 !important;
    left: 50% !important;
    transform: translateX(7px) !important;
    min-width: 14px !important;
    height: 14px !important;
    padding: 0 3px !important;
    border-radius: 999px !important;
    background: #ffa149 !important;
    color: #0d4c46 !important;
    -webkit-text-fill-color: #0d4c46 !important;
    font-size: 8px !important;
    font-weight: 700 !important;
    line-height: 14px !important;
    text-align: center !important;
  }

  body {
    padding-bottom: calc(58px + env(safe-area-inset-bottom)) !important;
  }
}

/* En dehors du mobile : aucune incidence sur le desktop */
@media (min-width: 768px) {
  .an-header__search-toggle,
  .an-mobile-bottom-nav {
    display: none !important;
  }
}

/* ============================================================
   V2 — OFFCANVAS MOBILE PLEINE LARGEUR + BAS TOUJOURS VISIBLE
   ============================================================ */
@media (max-width: 767px) {

  /* Le menu occupe tout l'écran mobile. */
  html body #mobileMenu.ps-mainmenu--mobile.offcanvas {
    --bs-offcanvas-width: 100vw !important;
    width: 100vw !important;
    min-width: 100vw !important;
    max-width: 100vw !important;
    height: 100dvh !important;
    max-height: 100dvh !important;
    z-index: 3000 !important;
    overflow: hidden !important;
    box-shadow: none !important;
  }

  /* Le fond assombri reste sous le panneau. */
  html body .offcanvas-backdrop {
    z-index: 2990 !important;
  }

  /* Structure verticale : header / contenu scrollable / footer visible. */
  html body #mobileMenu .an-mobile-menu-header {
    flex: 0 0 54px !important;
  }

  html body #mobileMenu .ps-mainmenu__mobile {
    flex: 1 1 0 !important;
    min-height: 0 !important;
    height: auto !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    overscroll-behavior: contain !important;
    -webkit-overflow-scrolling: touch !important;
    padding-bottom: 8px !important;
  }

  /* Le bloc connexion/téléphone ne peut plus être masqué sous la barre basse. */
  html body #mobileMenu .an-mobile-menu-footer {
    position: relative !important;
    z-index: 3 !important;
    flex: 0 0 auto !important;
    width: 100% !important;
    padding: 10px 16px calc(12px + env(safe-area-inset-bottom)) !important;
    background: #fff !important;
    box-shadow: 0 -5px 18px rgba(13, 76, 70, .05) !important;
  }

  /* Lorsque le menu est ouvert, la navigation basse du site disparaît. */
  body:has(#mobileMenu.show) .an-mobile-bottom-nav,
  body:has(#mobileMenu.showing) .an-mobile-bottom-nav {
    display: none !important;
  }

  /* Sécurité supplémentaire si :has() n'est pas appliqué : le menu passe au-dessus. */
  #mobileMenu.show ~ .an-mobile-bottom-nav,
  #mobileMenu.showing ~ .an-mobile-bottom-nav {
    z-index: 1 !important;
  }

  /* Le contenu du menu utilise réellement toute la largeur disponible. */
  html body #mobileMenu .menu,
  html body #mobileMenu .menu__list,
  html body #mobileMenu .an-mobile-menu-tabs,
  html body #mobileMenu .an-mobile-menu-secondary {
    width: 100% !important;
    max-width: none !important;
  }

  /* Un peu plus d'air maintenant que le panneau est pleine largeur. */
  html body #mobileMenu .an-mobile-menu-products > li,
  html body #mobileMenu .menu--child .menu__list > li:not(.menu__title) {
    padding-left: 20px !important;
    padding-right: 18px !important;
  }

  html body #mobileMenu .an-mobile-menu-secondary {
    padding-left: 20px !important;
    padding-right: 20px !important;
  }
}

/* =====================================================
   FOOTER MENU MOBILE
   ===================================================== */

.an-mobile-menu__footer {
  position: sticky;
  bottom: 0;
  z-index: 5;

  margin-top: auto;
  padding: 10px 14px calc(12px + env(safe-area-inset-bottom));
  background: #fff;
  border-top: 1px solid #e8e2d8;
}

.an-mobile-menu__login {
  display: flex;
  align-items: center;
  justify-content: center;

  min-height: 42px;
  padding: 0 18px;
  border: 1px solid #e4ddd2;
  border-radius: 999px;
  background: #fff;

  color: #0d4c46 !important;
  text-decoration: none !important;
  font-size: 13px;
  font-weight: 600;
  line-height: 1;
}

.an-mobile-menu__login:hover,
.an-mobile-menu__login:focus,
.an-mobile-menu__login:active,
.an-mobile-menu__login:visited {
  color: #0d4c46 !important;
  text-decoration: none !important;
  box-shadow: none !important;
}

.an-mobile-menu__contact {
  margin-top: 10px;

  display: inline-flex;
  align-items: center;
  gap: 6px;

  color: #6f8d88 !important;
  text-decoration: underline !important;
  text-underline-offset: 2px;
  font-size: 10px;
  line-height: 1.3;
}

.an-mobile-menu__contact:hover,
.an-mobile-menu__contact:focus,
.an-mobile-menu__contact:active,
.an-mobile-menu__contact:visited {
  color: #6f8d88 !important;
}

.an-mobile-menu__contact .material-icons {
  font-size: 13px;
  color: #6f8d88 !important;
  line-height: 1;
  flex-shrink: 0;
}

/* ============================================================
   ALLO NATUREL — RESTAURATION BARRE BASSE MOBILE
   À ajouter EN FIN de :
   /themes/allonaturel/assets/css/custom.css
   ============================================================ */

/* Cachée par défaut hors mobile */
.an-mobile-bottom-nav {
  display: none;
}

@media (max-width: 767px) {

  .an-mobile-bottom-nav {
    position: fixed !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    z-index: 1040 !important;

    width: 100% !important;
    height: calc(58px + env(safe-area-inset-bottom)) !important;

    padding: 5px 5px env(safe-area-inset-bottom) !important;

    display: grid !important;
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
    align-items: stretch !important;

    background: rgba(255, 255, 255, .98) !important;
    border-top: 1px solid #e7e2d8 !important;
    box-shadow: 0 -7px 22px rgba(13, 76, 70, .06) !important;
  }

  .an-mobile-bottom-nav__item {
    position: relative !important;

    min-width: 0 !important;
    min-height: 48px !important;

    margin: 0 !important;
    padding: 3px 1px !important;

    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 2px !important;

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

    color: #78908c !important;
    -webkit-text-fill-color: #78908c !important;

    font-family: "Geist", Arial, sans-serif !important;
    font-size: 8px !important;
    font-weight: 400 !important;
    line-height: 1 !important;

    text-decoration: none !important;
    appearance: none !important;
    -webkit-appearance: none !important;
  }

  .an-mobile-bottom-nav__item .material-icons {
    color: #78908c !important;
    -webkit-text-fill-color: #78908c !important;
    font-size: 17px !important;
    line-height: 1 !important;
  }

  .an-mobile-bottom-nav__item:first-child,
  .an-mobile-bottom-nav__item:first-child .material-icons {
    color: #0d4c46 !important;
    -webkit-text-fill-color: #0d4c46 !important;
  }

  .an-mobile-bottom-nav__item--cart .material-icons {
    color: #0d4c46 !important;
    -webkit-text-fill-color: #0d4c46 !important;
  }

  .an-mobile-bottom-nav__badge {
    position: absolute !important;
    top: 0 !important;
    left: 50% !important;

    transform: translateX(7px) !important;

    min-width: 14px !important;
    height: 14px !important;
    padding: 0 3px !important;

    border-radius: 999px !important;

    background: #ffa149 !important;

    color: #0d4c46 !important;
    -webkit-text-fill-color: #0d4c46 !important;

    font-size: 8px !important;
    font-weight: 700 !important;
    line-height: 14px !important;
    text-align: center !important;
  }

  /* Réserve la place de la barre afin qu'elle ne masque pas le footer. */
  body {
    padding-bottom: calc(58px + env(safe-area-inset-bottom)) !important;
  }

  /* La barre basse disparaît pendant l'ouverture du menu mobile. */
  body:has(#mobileMenu.show) .an-mobile-bottom-nav,
  body:has(#mobileMenu.showing) .an-mobile-bottom-nav {
    display: none !important;
  }
}

/* Sécurité : jamais affichée tablette / desktop */
@media (min-width: 768px) {
  .an-mobile-bottom-nav {
    display: none !important;
  }
}

/* =====================================================
   MEGA MENU — COULEUR DES LIENS "BESOINS"
   ===================================================== */

.an-mega__needs-grid a,
.an-mega__needs-grid a:visited,
.an-mega__needs-grid a:active {
  color: #075B56 !important;
  -webkit-text-fill-color: #075B56 !important;
  text-decoration: none !important;
}

.an-mega__needs-grid a:hover,
.an-mega__needs-grid a:focus {
  color: #0D4C46 !important;
  -webkit-text-fill-color: #0D4C46 !important;
  text-decoration: none !important;
  opacity: .7;
}

/* ==========================================================
   ALLO NATUREL — HEADER COMPACT AU SCROLL
   À ajouter à la FIN de /themes/allonaturel/assets/css/custom.css
   Desktop uniquement
   ========================================================== */

@media (min-width: 1200px) {

  .an-header--compact {
    box-shadow: 0 8px 26px rgba(7, 87, 79, .08);
  }

  .an-header--compact .an-header__main {
    border-bottom: 1px solid rgba(7, 87, 79, .10);
  }

  /* Une seule ligne : logo / menu / recherche / compte / panier */
  .an-header--compact .an-header__grid {
    max-width: 1120px !important;

    grid-template-columns:
      48px
      auto
      minmax(340px, 1fr)
      auto
      auto !important;

    grid-template-areas:
      "logo menu search account cart" !important;

    align-items: center !important;

    column-gap: 18px !important;

    padding:
      6px
      0 !important;
  }

  /* Le bandeau supérieur disparaît */
  .an-header--compact .an-announce {
    min-height: 0 !important;
    max-height: 0 !important;

    opacity: 0 !important;

    pointer-events: none !important;

    transform: translateY(-8px) !important;
  }

  /* Logo compact */
  .an-header--compact .an-header__logo {
    width: 48px !important;
    min-width: 48px !important;
  }

  .an-header--compact .an-header__logo a {
    width: 48px !important;
    height: 42px !important;

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

    overflow: hidden !important;
  }

  .an-header--compact .an-header__logo img {
    width: 44px !important;
    height: 40px !important;
    max-width: 44px !important;
    max-height: 40px !important;

    object-fit: contain !important;
  }

  /* Le menu reste visible dans le header compact */
  .an-header--compact .an-header__menu {
    grid-area: menu !important;

    position: static !important;

    width: auto !important;
    max-width: none !important;

    max-height: none !important;

    margin:
      0 !important;

    border-top: 0 !important;

    opacity: 1 !important;

    overflow: visible !important;

    pointer-events: auto !important;

    transform: none !important;
  }

  .an-header--compact .an-header__menu .ps-mainmenu {
    width: auto !important;
    max-width: none !important;
  }

  .an-header--compact .an-header__menu .ps-mainmenu__tree {
    display: flex !important;

    align-items: center !important;

    flex-wrap: nowrap !important;

    gap: 26px !important;

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

  .an-header--compact .an-header__menu .ps-mainmenu__tree-link {
    padding:
      10px
      0 !important;

    font-family:
      "Geist",
      Arial,
      sans-serif !important;

    font-size: 10px !important;
    font-weight: 600 !important;
    line-height: 1 !important;

    letter-spacing: .07em !important;

    text-transform: uppercase !important;

    white-space: nowrap !important;

    color: #07574f !important;
  }

  /* Pour coller à la maquette : Conseils reste disponible
     dans le header normal, mais disparaît dans le compact. */
  .an-header--compact
  .an-header__menu
  .ps-mainmenu__tree
  > li:nth-child(4) {
    display: none !important;
  }

  /* Recherche compacte */
  .an-header--compact .an-header__search {
    min-width: 0 !important;
  }

  .an-header--compact .an-header__search .ps-searchbar__form {
    min-height: 34px !important;

    padding:
      2px
      4px
      2px
      13px !important;

    border-radius: 999px !important;
  }

  .an-header--compact .an-header__search .ps-searchbar__input {
    min-height: 28px !important;

    font-size: 10.5px !important;
    line-height: 1.2 !important;
  }

  .an-header--compact
  .an-header__search
  button[type="submit"] {
    width: 30px !important;
    min-width: 30px !important;
    height: 30px !important;
    min-height: 30px !important;

    padding: 0 !important;

    border-radius: 50% !important;
  }

  /* Compte + panier plus petits */
  .an-header--compact .an-account-box,
  .an-header--compact .an-cart-box {
    gap: 7px !important;
  }

  .an-header--compact .an-account-box__icon,
  .an-header--compact .an-cart-box__icon {
    width: 30px !important;
    height: 30px !important;

    flex:
      0
      0
      30px !important;
  }

  .an-header--compact .an-account-box__icon .material-icons,
  .an-header--compact .an-cart-box__icon .material-icons {
    font-size: 16px !important;
  }

  .an-header--compact .an-account-box__title,
  .an-header--compact .an-cart-box__title {
    font-size: 10px !important;
    line-height: 1.1 !important;
  }

  .an-header--compact .an-account-box__subtitle,
  .an-header--compact .an-cart-box__subtitle {
    margin-top: 1px !important;

    font-size: 8.5px !important;
    line-height: 1.1 !important;
  }

  .an-header--compact .an-cart-box__badge {
    top: -6px !important;
    right: -5px !important;

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

    padding:
      0
      4px !important;

    font-size: 9px !important;
  }

  /* Le méga-menu continue de s'ouvrir sous le header compact */
  .an-header--compact .an-mega,
  .an-header--compact .submenu {
    z-index: 1100 !important;
  }
}

/* Allo Naturel — personnalisation affichée directement dans le panier */
body#cart .an-cart-customization-inline,
.page-cart .an-cart-customization-inline {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin: 2px 0 4px;
  font-size: 13px;
  line-height: 1.4;
  color: #07574f;
}

body#cart .an-cart-customization-inline__label,
.page-cart .an-cart-customization-inline__label {
  font-weight: 700;
}

body#cart .an-cart-customization-inline__value,
.page-cart .an-cart-customization-inline__value {
  font-weight: 500;
}

/* Allo Naturel — goûts visibles sur toutes les surfaces panier */
.an-cart-customizations-inline {
  margin-top: 4px;
  font-size: 12px;
  line-height: 1.45;
  color: #07574f;
}

.an-cart-customization-inline {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin: 2px 0;
}

.an-cart-customization-inline__label {
  font-weight: 700;
}

.an-cart-customization-inline__value {
  font-weight: 500;
}

.an-mini-cart-attributes {
  margin-top: 4px;
  font-size: 12px;
  color: #07574f;
}

.an-mini-cart-attribute {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

.an-mini-cart-attribute__label {
  font-weight: 700;
}

/* ==========================================================
   ALLO NATUREL — PAGE CONFIRMATION DE COMMANDE
   PrestaShop 9 / Hummingbird
   Scope strict : order-confirmation uniquement
   ========================================================== */

body#order-confirmation,
body.page-order-confirmation {
  --an-oc-green: #07574f;
  --an-oc-green-dark: #064740;
  --an-oc-green-soft: #e8f3ef;
  --an-oc-cream: #f7f4ee;
  --an-oc-cream-2: #fbfaf7;
  --an-oc-text: #234b46;
  --an-oc-muted: #768c88;
  --an-oc-line: #ded8ce;
  --an-oc-radius: 18px;
  --an-oc-shadow: 0 14px 38px rgba(7, 87, 79, .06);

  background: #fff;
  color: var(--an-oc-text);
}

/* ----------------------------------------------------------
   CONTENEUR GÉNÉRAL
   ---------------------------------------------------------- */

body#order-confirmation #center-column,
body.page-order-confirmation #center-column {
  width: min(1180px, calc(100% - 40px));
  margin: 0 auto;
  padding-top: 34px;
  padding-bottom: 70px;
}

body#order-confirmation .breadcrumb,
body.page-order-confirmation .breadcrumb {
  margin-bottom: 24px;
  font-size: 15px;
  color: var(--an-oc-muted);
}

/* ----------------------------------------------------------
   BLOC CONFIRMATION
   ---------------------------------------------------------- */

body#order-confirmation .alert.alert-success,
body.page-order-confirmation .alert.alert-success {
  position: relative;
  margin: 0 0 22px;
  padding: 28px 32px 28px 86px;
  border: 1px solid #bfdad1;
  border-radius: var(--an-oc-radius);
  background: var(--an-oc-green-soft);
  color: var(--an-oc-green-dark);
  box-shadow: none;
}

body#order-confirmation .alert.alert-success::before,
body.page-order-confirmation .alert.alert-success::before {
  content: "✓";
  position: absolute;
  top: 26px;
  left: 28px;

  width: 40px;
  height: 40px;

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

  border-radius: 50%;
  background: var(--an-oc-green);
  color: #fff;

  font-family: Arial, sans-serif;
  font-size: 21px;
  font-weight: 700;
  line-height: 1;
}

body#order-confirmation .alert.alert-success .page-title-section,
body.page-order-confirmation .alert.alert-success .page-title-section {
  margin: 0 0 8px !important;
}

body#order-confirmation .alert.alert-success h1,
body#order-confirmation .alert.alert-success .h1,
body.page-order-confirmation .alert.alert-success h1,
body.page-order-confirmation .alert.alert-success .h1 {
  margin: 0 !important;
  color: var(--an-oc-green-dark) !important;
  font-family: "Instrument Serif", Georgia, serif !important;
  font-size: clamp(34px, 4vw, 50px) !important;
  font-weight: 400 !important;
  line-height: .98 !important;
  letter-spacing: -.025em;
}

body#order-confirmation .alert.alert-success p,
body.page-order-confirmation .alert.alert-success p {
  margin: 0;
  color: #456b66;
  font-size: 14px;
  line-height: 1.55;
}

body#order-confirmation .alert.alert-success hr,
body.page-order-confirmation .alert.alert-success hr {
  margin: 18px 0 14px;
  border-color: #bfdad1 !important;
  opacity: 1;
}

body#order-confirmation .alert.alert-success a,
body.page-order-confirmation .alert.alert-success a {
  color: var(--an-oc-green) !important;
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* ----------------------------------------------------------
   CARTES GÉNÉRALES : paiement / détails / compte
   ---------------------------------------------------------- */

body#order-confirmation #content > .card,
body#order-confirmation .order-confirmation__details.card,
body#order-confirmation .order-confirmation__account-transformation,
body.page-order-confirmation #content > .card,
body.page-order-confirmation .order-confirmation__details.card,
body.page-order-confirmation .order-confirmation__account-transformation {
  border: 1px solid var(--an-oc-line) !important;
  border-radius: var(--an-oc-radius) !important;
  background: #fff !important;
  box-shadow: var(--an-oc-shadow) !important;
}

body#order-confirmation .card-body,
body.page-order-confirmation .card-body {
  padding: 26px 30px;
}

body#order-confirmation .card h2,
body#order-confirmation .card .h2,
body.page-order-confirmation .card h2,
body.page-order-confirmation .card .h2 {
  margin: 0 0 18px;
  color: var(--an-oc-green-dark);
  font-family: "Instrument Serif", Georgia, serif;
  font-size: 30px;
  font-weight: 400;
  line-height: 1.05;
}

/* Bloc retour paiement fourni par le module */
body#order-confirmation #content > div:not(.alert):not(.order-confirmation__details):has(h2),
body.page-order-confirmation #content > div:not(.alert):not(.order-confirmation__details):has(h2) {
  border-radius: var(--an-oc-radius);
}

/* ----------------------------------------------------------
   LISTE RÉFÉRENCE / PAIEMENT / LIVRAISON
   ---------------------------------------------------------- */

body#order-confirmation .order-confirmation__details-list,
body.page-order-confirmation .order-confirmation__details-list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px 22px;
  margin: 0 0 22px;
  padding: 18px 20px;
  list-style: none;
  border: 1px solid #ebe5dc;
  border-radius: 14px;
  background: var(--an-oc-cream-2);
}

body#order-confirmation .order-confirmation__details-list li,
body.page-order-confirmation .order-confirmation__details-list li {
  margin: 0;
  color: #587470;
  font-size: 13px;
  line-height: 1.45;
}

/* ----------------------------------------------------------
   TABLE COMMANDE
   ---------------------------------------------------------- */

body#order-confirmation .order-confirmation__table,
body.page-order-confirmation .order-confirmation__table {
  margin-top: 2px;
}

body#order-confirmation .order-confirmation__products,
body.page-order-confirmation .order-confirmation__products {
  display: flex;
  flex-direction: column;
  gap: 0;
}

body#order-confirmation .order-confirmation__product,
body.page-order-confirmation .order-confirmation__product {
  display: grid;
  grid-template-columns: 88px minmax(0, 1fr);
  gap: 18px;
  padding: 22px 0;
  border-bottom: 1px solid #ebe5dc;
}

body#order-confirmation .order-confirmation__product:first-child,
body.page-order-confirmation .order-confirmation__product:first-child {
  padding-top: 4px;
}

body#order-confirmation .order-confirmation__product-image,
body.page-order-confirmation .order-confirmation__product-image {
  width: 88px;
}

body#order-confirmation .order-confirmation__product-img,
body.page-order-confirmation .order-confirmation__product-img {
  width: 88px !important;
  height: 88px !important;
  object-fit: contain;
  padding: 7px;
  border: 1px solid #ebe5dc;
  border-radius: 14px;
  background: var(--an-oc-cream-2);
}

body#order-confirmation .order-confirmation__product-content,
body.page-order-confirmation .order-confirmation__product-content {
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 18px;
  align-items: start;
}

body#order-confirmation .order-confirmation__product-title,
body.page-order-confirmation .order-confirmation__product-title {
  margin: 0 0 7px;
  color: var(--an-oc-green-dark);
  font-size: 15px;
  font-weight: 700;
  line-height: 1.35;
}

body#order-confirmation .order-confirmation__product-attributes,
body.page-order-confirmation .order-confirmation__product-attributes {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 14px;
  margin-bottom: 5px;
}

body#order-confirmation .order-confirmation__product-attribute,
body.page-order-confirmation .order-confirmation__product-attribute {
  color: #627b77;
  font-size: 13px;
}

body#order-confirmation .order-confirmation__product-attribute .label,
body.page-order-confirmation .order-confirmation__product-attribute .label {
  font-weight: 600;
}

body#order-confirmation .order-confirmation__product-reference,
body.page-order-confirmation .order-confirmation__product-reference {
  margin: 4px 0;
  color: #91a09d;
  font-size: 11px;
}

body#order-confirmation .order-confirmation__product-price,
body.page-order-confirmation .order-confirmation__product-price {
  margin-top: 4px;
  color: #627b77;
  font-size: 12px;
}

/* Goûts : ton override product-customization-modal.tpl les affiche déjà */
body#order-confirmation .an-cart-customization-inline,
body.page-order-confirmation .an-cart-customization-inline {
  margin: 5px 0 2px !important;
  color: var(--an-oc-green) !important;
  font-size: 13px !important;
  line-height: 1.45 !important;
}

body#order-confirmation .an-cart-customization-inline__label,
body.page-order-confirmation .an-cart-customization-inline__label {
  font-weight: 700 !important;
}

/* Le détail est déjà lisible : pas besoin du bouton bleu "Personnalisé" */
body#order-confirmation .product-customization-modal__content > button,
body.page-order-confirmation .product-customization-modal__content > button {
  display: none !important;
}

body#order-confirmation .order-confirmation__product-total,
body.page-order-confirmation .order-confirmation__product-total {
  color: var(--an-oc-green-dark);
  font-size: 15px;
  font-weight: 700;
  white-space: nowrap;
}

/* ----------------------------------------------------------
   SOUS-TOTAL / LIVRAISON / TOTAL
   ---------------------------------------------------------- */

body#order-confirmation .order-confirmation__table > hr,
body.page-order-confirmation .order-confirmation__table > hr {
  margin: 22px 0;
  border-color: var(--an-oc-line);
  opacity: 1;
}

body#order-confirmation .order-confirmation__subtotals,
body.page-order-confirmation .order-confirmation__subtotals {
  display: grid;
  gap: 10px;
}

body#order-confirmation .order-confirmation__line,
body.page-order-confirmation .order-confirmation__line {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 20px;
  color: #627b77;
  font-size: 13px;
}

body#order-confirmation .order-confirmation__totals,
body.page-order-confirmation .order-confirmation__totals {
  padding: 18px 20px;
  border-radius: 14px;
  background: var(--an-oc-cream);
}

body#order-confirmation .order-confirmation__totals .order-confirmation__line,
body.page-order-confirmation .order-confirmation__totals .order-confirmation__line {
  color: var(--an-oc-green-dark);
}

body#order-confirmation .order-confirmation__line--bold .order-confirmation__line-label,
body.page-order-confirmation .order-confirmation__line--bold .order-confirmation__line-label {
  font-weight: 700;
}

body#order-confirmation .order-confirmation__line--bold .order-confirmation__line-value,
body.page-order-confirmation .order-confirmation__line--bold .order-confirmation__line-value {
  color: var(--an-oc-green-dark);
  font-family: "Instrument Serif", Georgia, serif;
  font-size: 30px;
  font-weight: 400;
}

/* ----------------------------------------------------------
   CRÉATION DE COMPTE
   ---------------------------------------------------------- */

body#order-confirmation .order-confirmation__account-transformation,
body.page-order-confirmation .order-confirmation__account-transformation {
  margin-top: 22px !important;
  padding: 28px 30px !important;
  background: var(--an-oc-cream) !important;
}

body#order-confirmation .order-confirmation__account-transformation h2,
body#order-confirmation .order-confirmation__account-transformation h3,
body.page-order-confirmation .order-confirmation__account-transformation h2,
body.page-order-confirmation .order-confirmation__account-transformation h3 {
  color: var(--an-oc-green-dark) !important;
  font-family: "Instrument Serif", Georgia, serif !important;
  font-size: 30px !important;
  font-weight: 400 !important;
  line-height: 1.05 !important;
}

body#order-confirmation .order-confirmation__account-transformation ul,
body.page-order-confirmation .order-confirmation__account-transformation ul {
  margin-bottom: 20px;
  color: #587470;
}

body#order-confirmation .order-confirmation__account-transformation .form-control,
body.page-order-confirmation .order-confirmation__account-transformation .form-control {
  min-height: 48px;
  border: 1px solid #d7d1c7 !important;
  border-radius: 999px !important;
  background: #fff !important;
  box-shadow: none !important;
}

body#order-confirmation .order-confirmation__account-transformation .form-control:focus,
body.page-order-confirmation .order-confirmation__account-transformation .form-control:focus {
  border-color: var(--an-oc-green) !important;
  box-shadow: 0 0 0 3px rgba(7, 87, 79, .08) !important;
}

body#order-confirmation .order-confirmation__account-transformation .btn,
body.page-order-confirmation .order-confirmation__account-transformation .btn {
  min-height: 46px;
  padding: 0 24px;
  border: 1px solid var(--an-oc-green) !important;
  border-radius: 999px !important;
  background: var(--an-oc-green) !important;
  color: #fff !important;
  font-size: 13px;
  font-weight: 650;
  box-shadow: none !important;
}

body#order-confirmation .order-confirmation__account-transformation .btn:hover,
body.page-order-confirmation .order-confirmation__account-transformation .btn:hover {
  background: var(--an-oc-green-dark) !important;
  border-color: var(--an-oc-green-dark) !important;
}

/* ----------------------------------------------------------
   LIENS / BOUTONS GÉNÉRAUX
   ---------------------------------------------------------- */

body#order-confirmation #content a:not(.btn),
body.page-order-confirmation #content a:not(.btn) {
  color: var(--an-oc-green);
}

/* ----------------------------------------------------------
   RESPONSIVE
   ---------------------------------------------------------- */

@media (max-width: 991px) {
  body#order-confirmation #center-column,
  body.page-order-confirmation #center-column {
    width: min(100% - 28px, 860px);
    padding-top: 24px;
    padding-bottom: 50px;
  }

  body#order-confirmation .order-confirmation__details-list,
  body.page-order-confirmation .order-confirmation__details-list {
    grid-template-columns: 1fr;
    gap: 7px;
  }
}

@media (max-width: 767px) {
  body#order-confirmation .alert.alert-success,
  body.page-order-confirmation .alert.alert-success {
    padding: 22px 20px 22px 68px;
    border-radius: 15px;
  }

  body#order-confirmation .alert.alert-success::before,
  body.page-order-confirmation .alert.alert-success::before {
    top: 22px;
    left: 18px;
    width: 34px;
    height: 34px;
    font-size: 18px;
  }

  body#order-confirmation .alert.alert-success h1,
  body.page-order-confirmation .alert.alert-success h1 {
    font-size: 34px !important;
  }

  body#order-confirmation .card-body,
  body.page-order-confirmation .card-body {
    padding: 21px 18px;
  }

  body#order-confirmation .order-confirmation__product,
  body.page-order-confirmation .order-confirmation__product {
    grid-template-columns: 68px minmax(0, 1fr);
    gap: 13px;
    padding: 18px 0;
  }

  body#order-confirmation .order-confirmation__product-image,
  body.page-order-confirmation .order-confirmation__product-image,
  body#order-confirmation .order-confirmation__product-img,
  body.page-order-confirmation .order-confirmation__product-img {
    width: 68px !important;
    height: 68px !important;
  }

  body#order-confirmation .order-confirmation__product-content,
  body.page-order-confirmation .order-confirmation__product-content {
    grid-template-columns: 1fr;
    gap: 8px;
  }

  body#order-confirmation .order-confirmation__product-prices,
  body.page-order-confirmation .order-confirmation__product-prices {
    justify-self: start;
  }

  body#order-confirmation .order-confirmation__line--bold .order-confirmation__line-value,
  body.page-order-confirmation .order-confirmation__line--bold .order-confirmation__line-value {
    font-size: 26px;
  }

  body#order-confirmation .order-confirmation__account-transformation,
  body.page-order-confirmation .order-confirmation__account-transformation {
    padding: 22px 18px !important;
  }
}

/* =====================================================
   CORRECTION HEADER SUR LES FICHES PRODUIT
   Empêche le CSS produit de recolorer les éléments du header
   ===================================================== */

/* Bouton de recherche + loupe */
body#product .an-header .an-live-search__submit,
body#product .an-header .an-live-search__submit .material-icons,
body#product .an-header .an-live-search__submit .icon,
body#product .an-header .an-live-search__submit i {
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
}

/* SVG éventuel de la recherche */
body#product .an-header .an-live-search__submit svg {
    color: #ffffff !important;
    fill: #ffffff !important;
    stroke: #ffffff !important;
}

/* Bandeau "Une question ?" */
body#product .an-announce__help,
body#product .an-announce__help *,
body#product .an-announce__help:link,
body#product .an-announce__help:visited,
body#product .an-announce__help:hover,
body#product .an-announce__help:focus,
body#product .an-announce__help:active {
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
}

/* SVG éventuel dans "Une question ?" */
body#product .an-announce__help svg {
    color: #ffffff !important;
    fill: #ffffff !important;
    stroke: #ffffff !important;
}

/* =====================================================
   ALLO NATUREL — PAGE CONNEXION
   PrestaShop 9.1 / Hummingbird
   ===================================================== */

/* Fond général */
body#authentication #wrapper,
body#authentication main {
    background: #f5f2ec;
}

/* Zone centrale */
body#authentication .container--limited-sm {
    max-width: 620px !important;
}

/* Espace autour du contenu */
body#authentication #center-column {
    padding-top: 55px;
    padding-bottom: 70px;
}

/* Titre Connexion */
body#authentication .page-header {
    text-align: center;
    margin-bottom: 28px;
}

body#authentication .page-header h1,
body#authentication h1 {
    margin-bottom: 0;

    font-family: "Bagrile", "Instrument Serif", Georgia, serif !important;
    font-size: 42px;
    font-weight: 400;
    line-height: 1.1;

    color: #0d4c46;
}

/* Carte principale */
body#authentication .login {
    padding: 34px 40px 38px;

    background: #ffffff;

    border: 1px solid #e5e0d5;
    border-radius: 20px;

    box-shadow:
        0 18px 50px rgba(13, 76, 70, 0.07);
}

/* Suppression du trait gris natif */
body#authentication .login > hr {
    margin: 30px 0 26px;

    border: 0;
    border-top: 1px solid #eee9e1;

    opacity: 1;
}

/* Labels */
body#authentication .login label,
body#authentication .login .form-control-label {
    margin-bottom: 8px;

    font-family: "Geist", Arial, sans-serif;
    font-size: 13px;
    font-weight: 600;

    color: #0d4c46;
}

/* Espacement entre les champs */
body#authentication .login .form-group,
body#authentication .login .mb-3 {
    margin-bottom: 20px !important;
}

/* Champs */
body#authentication .login .form-control {
    min-height: 50px;

    padding: 0 16px;

    background: #ffffff !important;

    border: 1px solid #ded8ce !important;
    border-radius: 10px;

    box-shadow: none !important;

    font-family: "Geist", Arial, sans-serif;
    font-size: 14px;

    color: #0d4c46;
}

/* Focus */
body#authentication .login .form-control:focus {
    border-color: #0d4c46 !important;

    box-shadow:
        0 0 0 3px rgba(13, 76, 70, 0.08) !important;
}

/* Champ mot de passe + bouton œil */
body#authentication .login .input-group .form-control {
    border-radius: 10px 0 0 10px;
}

/* Bouton afficher le mot de passe */
body#authentication .login .input-group .btn,
body#authentication .login button[data-action="show-password"],
body#authentication .login button[data-ps-action="show-password"] {
    min-width: 50px;

    background: #edf3f1 !important;

    border: 1px solid #ded8ce !important;
    border-left: 0 !important;
    border-radius: 0 10px 10px 0 !important;

    color: #0d4c46 !important;

    box-shadow: none !important;
}

body#authentication .login .input-group .btn .material-icons,
body#authentication .login button[data-action="show-password"] .material-icons,
body#authentication .login button[data-ps-action="show-password"] .material-icons {
    color: #0d4c46 !important;
}

/* Mot de passe oublié */
body#authentication .forgot-password {
    margin-top: -3px;
    margin-bottom: 22px;
}

body#authentication .forgot-password a {
    font-size: 13px;
    font-weight: 500;

    color: #58716d !important;

    text-decoration: none !important;
}

body#authentication .forgot-password a:hover {
    color: #ffa149 !important;
}

/* Footer du formulaire */
body#authentication #login-form .form-footer {
    display: flex;
    justify-content: flex-end;

    margin-top: 4px;
}

/* Bouton Connexion */
body#authentication #submit-login {
    min-height: 48px;

    padding: 0 28px;

    background: #0d4c46 !important;

    border: 1px solid #0d4c46 !important;
    border-radius: 999px !important;

    font-family: "Geist", Arial, sans-serif;
    font-size: 14px;
    font-weight: 600;

    color: #ffffff !important;

    box-shadow: none !important;

    transition:
        background .18s ease,
        transform .18s ease;
}

body#authentication #submit-login:hover {
    background: #083d38 !important;
    border-color: #083d38 !important;

    transform: translateY(-1px);
}

/* Bloc création de compte */
body#authentication .login__register-prompt {
    text-align: center;
}

body#authentication .login__register-prompt h2 {
    margin: 0 0 14px;

    font-family: "Geist", Arial, sans-serif;
    font-size: 14px !important;
    font-weight: 600;

    color: #0d4c46;
}

/* Bouton Créer votre compte */
body#authentication .login__register-prompt .btn-outline-primary {
    min-height: 48px;

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

    background: transparent !important;

    border: 1px solid #0d4c46 !important;
    border-radius: 999px !important;

    font-size: 14px;
    font-weight: 600;

    color: #0d4c46 !important;

    transition:
        background .18s ease,
        color .18s ease;
}

body#authentication .login__register-prompt .btn-outline-primary:hover {
    background: #0d4c46 !important;

    color: #ffffff !important;
}

/* Astérisque requis */
body#authentication .login .required,
body#authentication .login label .required {
    color: #ffa149 !important;
}

/* Breadcrumb légèrement plus discret */
body#authentication .breadcrumb {
    font-size: 15px;
}

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

@media (max-width: 767px) {

    body#authentication #center-column {
        padding-top: 30px;
        padding-bottom: 45px;
    }

    body#authentication .login {
        padding: 26px 20px 28px;

        border-radius: 16px;
    }

    body#authentication .page-header h1,
    body#authentication h1 {
        font-size: 34px;
    }

    body#authentication #submit-login {
        width: 100%;
    }

    body#authentication #login-form .form-footer {
        display: block;
    }
}

/* =====================================================
   ALLO NATUREL — DESCRIPTION SUPPLÉMENTAIRE CATÉGORIE
   ===================================================== */

body#category .category__additional-description {
    width: 100%;
    max-width: 1180px;

    margin: 80px auto 40px;
    padding: 55px 65px;

    background: #f5f2ec;

    border-radius: 18px;

    font-family: "Geist", Arial, sans-serif;
    color: #355f5a;
}

/* Paragraphes */
body#category .category__additional-description p {
    max-width: 950px;

    margin: 0 0 20px;

    font-size: 15px;
    font-weight: 400;
    line-height: 1.75;

    color: #58716d;
}

/* Premier paragraphe légèrement plus mis en avant */
body#category .category__additional-description > p:first-child {
    font-size: 17px;
    line-height: 1.7;

    color: #0d4c46;
}

/* H2 */
body#category .category__additional-description h2 {
    margin: 48px 0 18px;

    font-family: "Bagrile", "Instrument Serif", Georgia, serif !important;
    font-size: 34px;
    font-weight: 400;
    line-height: 1.08;

    color: #0d4c46;
}

body#category .category__additional-description h2:first-child {
    margin-top: 0;
}

/* H3 */
body#category .category__additional-description h3 {
    margin: 32px 0 12px;

    font-family: "Geist", Arial, sans-serif;
    font-size: 18px;
    font-weight: 600;
    line-height: 1.3;

    color: #0d4c46;
}

/* Listes */
body#category .category__additional-description ul,
body#category .category__additional-description ol {
    max-width: 900px;

    margin: 18px 0 26px;
    padding-left: 0;

    list-style: none;
}

body#category .category__additional-description li {
    position: relative;

    margin-bottom: 10px;
    padding-left: 24px;

    font-size: 15px;
    line-height: 1.6;

    color: #58716d;
}

body#category .category__additional-description ul li::before {
    content: "";

    position: absolute;
    left: 2px;
    top: .7em;

    width: 6px;
    height: 6px;

    background: #ffa149;

    border-radius: 50%;
}

/* Liens */
body#category .category__additional-description a {
    color: #0d4c46 !important;
    font-weight: 600;
    text-decoration: underline;
    text-decoration-color: rgba(13, 76, 70, .3);
    text-underline-offset: 3px;
}

body#category .category__additional-description a:hover {
    color: #ffa149 !important;
}

/* Gras */
body#category .category__additional-description strong {
    color: #0d4c46;
    font-weight: 600;
}

/* Images éventuelles */
body#category .category__additional-description img {
    max-width: 100%;
    height: auto;

    margin: 25px 0;

    border-radius: 14px;
}

/* Trait subtil entre grandes sections */
body#category .category__additional-description h2:not(:first-child) {
    padding-top: 38px;

    border-top: 1px solid rgba(13, 76, 70, .10);
}

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

@media (max-width: 767px) {

    body#category .category__additional-description {
        margin: 50px auto 25px;

        padding: 32px 22px;

        border-radius: 14px;
    }

    body#category .category__additional-description h2 {
        margin-top: 36px;

        font-size: 28px;
    }

    body#category .category__additional-description h3 {
        font-size: 17px;
    }

    body#category .category__additional-description p,
    body#category .category__additional-description li {
        font-size: 14px;
    }

    body#category .category__additional-description > p:first-child {
        font-size: 15px;
    }
}

/* =====================================================
   MOBILE — CORRECTION HEADER + BREADCRUMB CONSEILS
   ===================================================== */

@media (max-width: 767px) {

  /* --------------------------------------------------
     1. UN SEUL LOGO DANS LE HEADER
     -------------------------------------------------- */

  /* Le favicon compact est réservé au desktop au scroll */
  .an-header .an-header__logo .an-logo--compact {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    width: 0 !important;
    height: 0 !important;
  }

  /* Logo Allo Naturel normal */
  .an-header .an-header__logo .an-logo--default {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    visibility: visible !important;
    opacity: 1 !important;
  }

  .an-header .an-header__logo .an-logo--default img,
  .an-header .an-header__logo .an-logo--default picture img {
    display: block !important;

    width: 90px !important;
    max-width: 90px !important;
    height: auto !important;
    max-height: 44px !important;

    margin: 0 auto !important;
    object-fit: contain !important;
  }


  /* --------------------------------------------------
     2. SUPPRESSION DU BANDEAU "ACCUEIL"
     SUR LES PAGES CONSEILS
     -------------------------------------------------- */

  body[id^="module-allonaturelcontent-"] .breadcrumb {
    display: none !important;
  }

}

/* ==========================================================
   ALLO NATUREL — PAGE PANIER
   PrestaShop 9.1 / Hummingbird
   ========================================================== */

body#cart,
body.page-cart {
  background: #f8f6f1;
}


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

body#cart .columns-container,
body.page-cart .columns-container {
  max-width: 1280px;
  padding-top: 36px;
  padding-bottom: 60px;
}


/* ==========================================================
   TITRE
   ========================================================== */

body#cart .page-title-section,
body.page-cart .page-title-section {
  margin-bottom: 24px;
}

body#cart .page-title-section h1,
body#cart h1,
body.page-cart .page-title-section h1,
body.page-cart h1 {
  margin: 0;

  color: #07574f;

  font-family: "Bagrile", "Instrument Serif", Georgia, serif;
  font-size: clamp(32px, 4vw, 48px);
  font-weight: 400;
  line-height: 1.05;
}


/* ==========================================================
   GRILLE PRINCIPALE
   ========================================================== */

body#cart .cart-grid,
body.page-cart .cart-grid {
  --bs-gutter-x: 28px;
  align-items: flex-start;
}


/* ==========================================================
   COLONNE PRODUITS
   ========================================================== */

body#cart .cart-grid__products-details,
body.page-cart .cart-grid__products-details {
  padding: 22px;

  background: #fff;

  border: 1px solid #e7e1d7;
  border-radius: 22px;

  box-shadow: 0 10px 35px rgba(7, 87, 79, .05);
}


/* ==========================================================
   LIGNE PRODUIT
   ========================================================== */

body#cart .product-line,
body.page-cart .product-line {
  position: relative;

  display: grid;
  grid-template-columns: 120px minmax(0, 1fr);
  gap: 22px;

  margin: 0;
  padding: 22px 0;

  border: 0;
  border-bottom: 1px solid #eee9e1;

  background: transparent;
}

body#cart .product-line:first-child,
body.page-cart .product-line:first-child {
  padding-top: 0;
}

body#cart .product-line:last-child,
body.page-cart .product-line:last-child {
  padding-bottom: 0;
  border-bottom: 0;
}


/* ==========================================================
   IMAGE PRODUIT
   ========================================================== */

body#cart .product-line__image,
body.page-cart .product-line__image {
  width: 120px;
  height: 120px;

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

  overflow: hidden;

  background: #f7f4ee;

  border: 1px solid #ece6dc;
  border-radius: 16px;
}

body#cart .product-line__image a,
body.page-cart .product-line__image a {
  width: 100%;
  height: 100%;

  display: flex;
  align-items: center;
  justify-content: center;
}

body#cart .product-line__img,
body.page-cart .product-line__img {
  width: 100% !important;
  height: 100% !important;

  padding: 8px;

  object-fit: contain;
}


/* ==========================================================
   CONTENU PRODUIT
   ========================================================== */

body#cart .product-line__content,
body.page-cart .product-line__content {
  min-width: 0;

  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas:
    "left right"
    "actions actions";
  column-gap: 20px;
  row-gap: 10px;

  align-items: center;
}

body#cart .product-line__content-left,
body.page-cart .product-line__content-left {
  grid-area: left;
  min-width: 0;
}

body#cart .product-line__content-right,
body.page-cart .product-line__content-right {
  grid-area: right;

  display: flex;
  align-items: center;
  gap: 24px;
}

body#cart .product-line__actions,
body.page-cart .product-line__actions {
  grid-area: actions;
}


/* ==========================================================
   NOM DU PRODUIT
   ========================================================== */

body#cart .product-line__title,
body.page-cart .product-line__title {
  display: inline-block;

  margin-bottom: 8px;

  color: #07574f !important;

  font-family: "Geist", Arial, sans-serif;
  font-size: 16px;
  font-weight: 650;
  line-height: 1.3;

  text-decoration: none !important;
}

body#cart .product-line__title:hover,
body.page-cart .product-line__title:hover {
  color: #df6f28 !important;
}


/* ==========================================================
   ATTRIBUTS / PERSONNALISATIONS
   ========================================================== */

body#cart .product-line__item--info,
body#cart .product-line__item--small-info,
body.page-cart .product-line__item--info,
body.page-cart .product-line__item--small-info {
  margin-top: 3px;

  color: #78908c;

  font-size: 12px;
  line-height: 1.45;
}

body#cart .product-line__item-label,
body.page-cart .product-line__item-label {
  color: #536f6a;
  font-weight: 600;
}

body#cart .an-cart-customization-inline,
body.page-cart .an-cart-customization-inline {
  margin-top: 5px;

  color: #536f6a;

  font-size: 12px;
}

body#cart .an-cart-customization-inline__label,
body.page-cart .an-cart-customization-inline__label {
  font-weight: 650;
}

body#cart .an-cart-customization-inline__value,
body.page-cart .an-cart-customization-inline__value {
  font-weight: 400;
}


/* ==========================================================
   PRIX UNITAIRE
   ========================================================== */

body#cart .product-line__item--prices,
body.page-cart .product-line__item--prices {
  margin-top: 10px;
}

body#cart .product-line__item-price,
body.page-cart .product-line__item-price {
  color: #07574f;

  font-size: 14px;
  font-weight: 650;
}

body#cart .product-line__item-regular-price,
body.page-cart .product-line__item-regular-price {
  margin-left: 6px;

  color: #a5aaa8;

  font-size: 12px;
  text-decoration: line-through;
}


/* ==========================================================
   QUANTITÉ
   ========================================================== */

body#cart .product-line__quantity-button,
body.page-cart .product-line__quantity-button {
  margin: 0;
}

body#cart .quantity-button,
body.page-cart .quantity-button {
  border-radius: 999px;
}

body#cart .quantity-button input,
body#cart .js-cart-line-product-quantity,
body.page-cart .quantity-button input,
body.page-cart .js-cart-line-product-quantity {
  min-width: 54px;
  height: 40px;

  text-align: center;

  color: #07574f;

  background: #fff;

  border-color: #ded8ce !important;
  border-radius: 999px !important;

  font-weight: 600;

  box-shadow: none !important;
}


/* ==========================================================
   TOTAL PRODUIT
   ========================================================== */

body#cart .product-line__price,
body.page-cart .product-line__price {
  min-width: 80px;

  color: #07574f;

  font-family: "Geist", Arial, sans-serif;
  font-size: 17px;
  font-weight: 700;
  line-height: 1.2;

  text-align: right;
}


/* ==========================================================
   SUPPRIMER
   ========================================================== */

body#cart .product-line__actions .js-remove-from-cart,
body.page-cart .product-line__actions .js-remove-from-cart {
  display: inline-flex;
  align-items: center;

  padding: 0;

  color: #9b7770 !important;

  font-size: 11px;
  font-weight: 500;

  text-decoration: underline !important;
  text-underline-offset: 3px;
}

body#cart .product-line__actions .js-remove-from-cart:hover,
body.page-cart .product-line__actions .js-remove-from-cart:hover {
  color: #c74e36 !important;
}


/* ==========================================================
   CONTINUER MES ACHATS
   ========================================================== */

body#cart .cart__continue-shopping,
body.page-cart .cart__continue-shopping {
  margin-top: 20px;

  min-height: 44px;

  display: inline-flex;
  align-items: center;
  gap: 8px;

  padding: 0 20px;

  color: #07574f !important;

  background: #fff !important;

  border: 1px solid #07574f !important;
  border-radius: 999px !important;

  font-size: 13px;
  font-weight: 600;

  box-shadow: none !important;
}

body#cart .cart__continue-shopping:hover,
body.page-cart .cart__continue-shopping:hover {
  color: #fff !important;
  background: #07574f !important;
}


/* ==========================================================
   COLONNE RÉCAPITULATIF
   ========================================================== */

body#cart .cart-grid__aside-wrapper,
body.page-cart .cart-grid__aside-wrapper {
  position: sticky;
  top: 125px;

  padding: 26px;

  background: #fff;

  border: 1px solid #e7e1d7;
  border-radius: 22px;

  box-shadow: 0 10px 35px rgba(7, 87, 79, .07);
}

body#cart .cart-grid__aside-wrapper > h2,
body.page-cart .cart-grid__aside-wrapper > h2 {
  margin: 0 0 22px;

  color: #07574f;

  font-family: "Bagrile", "Instrument Serif", Georgia, serif;
  font-size: 25px;
  font-weight: 400;
  line-height: 1.1;
}


/* ==========================================================
   LIGNES RÉCAP
   ========================================================== */

body#cart .cart-summary__line,
body.page-cart .cart-summary__line {
  min-height: 36px;

  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;

  padding: 7px 0;

  color: #58716d;

  font-size: 13px;
}

body#cart .cart-summary__label,
body.page-cart .cart-summary__label {
  color: #657d79;
}

body#cart .cart-summary__value,
body.page-cart .cart-summary__value {
  color: #07574f;

  font-weight: 650;

  text-align: right;
}


/* ==========================================================
   TOTAL FINAL
   ========================================================== */

body#cart .cart-summary__totals,
body.page-cart .cart-summary__totals {
  margin-top: 4px;
}

body#cart .cart-summary__totals .cart-summary__line:last-of-type,
body.page-cart .cart-summary__totals .cart-summary__line:last-of-type {
  margin-top: 12px;
  padding-top: 18px;

  border-top: 1px solid #e7e1d7;
}

body#cart .cart-summary__totals .cart-summary__line:last-of-type
.cart-summary__label,
body.page-cart .cart-summary__totals .cart-summary__line:last-of-type
.cart-summary__label {
  color: #07574f;

  font-size: 15px;
  font-weight: 700;
}

body#cart .cart-summary__totals .cart-summary__line:last-of-type
.cart-summary__value,
body.page-cart .cart-summary__totals .cart-summary__line:last-of-type
.cart-summary__value {
  color: #07574f;

  font-size: 21px;
  font-weight: 750;
}


/* ==========================================================
   CODE PROMO
   ========================================================== */

body#cart [data-ps-ref="voucher-container"],
body.page-cart [data-ps-ref="voucher-container"] {
  margin-top: 16px;
}

body#cart [data-ps-ref="voucher-form"] input,
body.page-cart [data-ps-ref="voucher-form"] input {
  min-height: 42px;

  border: 1px solid #ded8ce !important;
  border-radius: 999px !important;

  box-shadow: none !important;
}


/* ==========================================================
   BOUTON COMMANDER
   ========================================================== */

body#cart .cart-summary__actions,
body.page-cart .cart-summary__actions {
  margin-top: 22px;
}

body#cart .cart-summary__actions .btn-primary,
body.page-cart .cart-summary__actions .btn-primary {
  width: 100%;
  min-height: 52px;

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

  padding: 0 24px;

  background: #07574f !important;
  color: #fff !important;

  border: 1px solid #07574f !important;
  border-radius: 999px !important;

  font-family: "Geist", Arial, sans-serif;
  font-size: 14px;
  font-weight: 650;

  box-shadow: none !important;

  transition:
    background .18s ease,
    transform .18s ease;
}

body#cart .cart-summary__actions .btn-primary:hover,
body.page-cart .cart-summary__actions .btn-primary:hover {
  background: #064740 !important;

  transform: translateY(-1px);
}


/* ==========================================================
   SÉPARATEURS DU RÉCAP
   ========================================================== */

body#cart .cart-grid__aside-wrapper > hr,
body.page-cart .cart-grid__aside-wrapper > hr {
  margin: 22px 0;

  border-color: #e7e1d7;

  opacity: 1;
}


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

@media (max-width: 991px) {

  body#cart .columns-container,
  body.page-cart .columns-container {
    padding-top: 22px;
    padding-bottom: 30px;
  }

  body#cart .cart-grid,
  body.page-cart .cart-grid {
    row-gap: 22px;
  }

  body#cart .cart-grid__aside-wrapper,
  body.page-cart .cart-grid__aside-wrapper {
    position: static;
  }
}


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

@media (max-width: 767px) {

  body#cart .columns-container,
  body.page-cart .columns-container {
    padding-left: 12px;
    padding-right: 12px;
  }

  body#cart .page-title-section,
  body.page-cart .page-title-section {
    margin-bottom: 16px;
  }

  body#cart .page-title-section h1,
  body#cart h1,
  body.page-cart .page-title-section h1,
  body.page-cart h1 {
    font-size: 30px;
  }

  body#cart .cart-grid__products-details,
  body.page-cart .cart-grid__products-details {
    padding: 15px;

    border-radius: 16px;
  }

  body#cart .product-line,
  body.page-cart .product-line {
    grid-template-columns: 82px minmax(0, 1fr);
    gap: 13px;

    padding: 16px 0;
  }

  body#cart .product-line__image,
  body.page-cart .product-line__image {
    width: 82px;
    height: 82px;

    border-radius: 12px;
  }

  body#cart .product-line__content,
  body.page-cart .product-line__content {
    display: block;
  }

  body#cart .product-line__title,
  body.page-cart .product-line__title {
    margin-bottom: 5px;

    font-size: 13px;
    line-height: 1.25;
  }

  body#cart .product-line__item--info,
  body#cart .product-line__item--small-info,
  body.page-cart .product-line__item--info,
  body.page-cart .product-line__item--small-info,
  body#cart .an-cart-customization-inline,
  body.page-cart .an-cart-customization-inline {
    font-size: 10px;
  }

  body#cart .product-line__item--prices,
  body.page-cart .product-line__item--prices {
    margin-top: 6px;
  }

  body#cart .product-line__content-right,
  body.page-cart .product-line__content-right {
    margin-top: 12px;

    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 10px;
  }

  body#cart .product-line__price,
  body.page-cart .product-line__price {
    min-width: auto;

    font-size: 15px;
  }

  body#cart .product-line__actions,
  body.page-cart .product-line__actions {
    margin-top: 8px;
  }

  body#cart .cart__continue-shopping,
  body.page-cart .cart__continue-shopping {
    width: 100%;

    justify-content: center;
  }

  body#cart .cart-grid__aside-wrapper,
  body.page-cart .cart-grid__aside-wrapper {
    padding: 20px;

    border-radius: 16px;
  }

  body#cart .cart-grid__aside-wrapper > h2,
  body.page-cart .cart-grid__aside-wrapper > h2 {
    font-size: 22px;
  }

  body#cart .cart-summary__actions .btn-primary,
  body.page-cart .cart-summary__actions .btn-primary {
    min-height: 50px;
  }
}

/* ==========================================================
   ALLO NATUREL — FILTRES CATÉGORIES
   PrestaShop 9.1 / Hummingbird
   ========================================================== */

body#category {
  --an-filter-green: #07574f;
  --an-filter-green-dark: #0d4c46;
  --an-filter-muted: #6f8984;
  --an-filter-soft: #98aaa6;
  --an-filter-line: #e3ddd3;
  --an-filter-bg: #f8f6f1;
}

/* En-tête personnalisé : "Affiner — X produits" */
body#category .an-filters-heading {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 5px;
  margin: 0 0 14px;
  padding: 0 0 13px;
  border-bottom: 1px solid var(--an-filter-line);
  font-family: "Geist", Arial, sans-serif;
  line-height: 1.2;
}

body#category .an-filters-heading strong {
  color: var(--an-filter-green-dark);
  font-size: 14px;
  font-weight: 700;
}

body#category .an-filters-heading span {
  color: var(--an-filter-muted);
  font-size: 12px;
  font-weight: 400;
}

/* ==========================================================
   DESKTOP / TABLETTE LARGE
   ========================================================== */

@media (min-width: 768px) {

  body#category #left-column {
    min-width: 0;
    padding-right: 26px;
  }

  body#category #search-filters,
  body#category #search_filters {
    width: 100%;
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
  }

  /* Les facettes réellement générées par ps_facetedsearch restent visibles. */
  body#category #search-filters .facet,
  body#category #search_filters .facet {
    display: block !important;
    margin: 0 !important;
    padding: 15px 0 !important;
    background: transparent !important;
    border: 0 !important;
    border-bottom: 1px solid var(--an-filter-line) !important;
    box-shadow: none !important;
  }

  body#category #search-filters .facet:first-child,
  body#category #search_filters .facet:first-child {
    padding-top: 0 !important;
  }

  body#category #search-filters .facet:last-child,
  body#category #search_filters .facet:last-child {
    border-bottom: 0 !important;
  }

  /* Titres : Prix, Catégories, Besoins, Conditionnement... */
  body#category .facet .facet-title,
  body#category .facet .h6,
  body#category .facet > p:first-child {
    margin: 0 0 10px !important;
    padding: 0 !important;
    color: var(--an-filter-green-dark) !important;
    font-family: "Geist", Arial, sans-serif !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    line-height: 1.25 !important;
    letter-spacing: .01em;
    text-transform: none !important;
  }

  body#category .facet ul,
  body#category .facet .facet-list {
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
  }

  body#category .facet li {
    margin: 0 !important;
    padding: 0 !important;
  }

  body#category .facet .facet-label {
    min-height: 30px;
    margin: 0 !important;
    padding: 3px 0 !important;
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    cursor: pointer;
  }

  body#category .facet .facet-label a,
  body#category .facet .facet-label > span:not(.custom-checkbox):not(.custom-radio):not(.color) {
    min-width: 0;
    color: #52706b !important;
    font-family: "Geist", Arial, sans-serif !important;
    font-size: 11px !important;
    font-weight: 400 !important;
    line-height: 1.3 !important;
    text-decoration: none !important;
  }

  body#category .facet .facet-label:hover a,
  body#category .facet .facet-label:hover > span {
    color: var(--an-filter-green) !important;
  }

  body#category .facet .magnitude {
    margin-left: auto !important;
    color: var(--an-filter-soft) !important;
    font-size: 9px !important;
    font-weight: 400 !important;
  }

  /* Checkbox / radio */
  body#category .facet input[type="checkbox"],
  body#category .facet input[type="radio"] {
    width: 15px !important;
    height: 15px !important;
    min-width: 15px !important;
    margin: 0 !important;
    accent-color: var(--an-filter-green);
  }

  body#category .facet .custom-checkbox,
  body#category .facet .custom-radio {
    flex: 0 0 auto;
    margin: 0 !important;
  }

  body#category .facet .facet-label.active a,
  body#category .facet .facet-label.active span,
  body#category .facet .facet-label:has(input:checked) a {
    color: var(--an-filter-green-dark) !important;
    font-weight: 600 !important;
  }

  /* Couleurs éventuelles */
  body#category .facet .color {
    width: 18px !important;
    height: 18px !important;
    min-width: 18px !important;
    border: 1px solid rgba(13, 76, 70, .15) !important;
    border-radius: 50% !important;
    box-shadow: none !important;
  }

  /* Filtre prix */
  body#category .facet .faceted-slider {
    margin-top: 2px !important;
  }

  body#category .facet .faceted-slider p {
    margin: 0 0 9px !important;
    color: var(--an-filter-muted) !important;
    font-size: 10px !important;
    line-height: 1.3 !important;
  }

  body#category .facet .ui-slider-horizontal {
    height: 4px !important;
    margin: 10px 6px 8px 2px !important;
    background: #dce5e2 !important;
    border: 0 !important;
    border-radius: 999px !important;
  }

  body#category .facet .ui-slider-range,
  body#category .facet .ui-widget-header {
    background: var(--an-filter-green) !important;
    border: 0 !important;
  }

  body#category .facet .ui-slider-handle {
    top: 50% !important;
    width: 12px !important;
    height: 12px !important;
    margin-top: -6px !important;
    margin-left: -6px !important;
    background: var(--an-filter-green) !important;
    border: 0 !important;
    border-radius: 50% !important;
    box-shadow: none !important;
    cursor: pointer !important;
  }

  /* Filtres actifs */
  body#category .active-search-filters,
  body#category .active_filters {
    margin: 0 0 14px !important;
    padding: 0 !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
  }

  body#category .active-search-filters:empty,
  body#category .active_filters:empty {
    display: none !important;
  }

  body#category .active-filter-title {
    display: none !important;
  }

  body#category .filter-block {
    display: inline-flex !important;
    align-items: center !important;
    gap: 5px !important;
    min-height: 28px;
    margin: 0 5px 5px 0 !important;
    padding: 4px 9px !important;
    color: var(--an-filter-green-dark) !important;
    background: #f4f7f6 !important;
    border: 1px solid #dce5e2 !important;
    border-radius: 999px !important;
    font-size: 10px !important;
    text-decoration: none !important;
  }

  body#category .js-search-filters-clear-all {
    margin-top: 8px !important;
    padding: 0 !important;
    color: var(--an-filter-muted) !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    font-size: 10px !important;
    text-decoration: underline !important;
    text-underline-offset: 2px;
  }
}

/* ==========================================================
   MOBILE — BOUTON + OFFCANVAS FILTRES
   ========================================================== */

@media (max-width: 767px) {

  body#category .an-filters-heading {
    margin-bottom: 10px;
    padding-bottom: 10px;
  }

  body#category #search_filter_toggler,
  body#category [data-bs-target="#offcanvas-faceted"] {
    min-height: 42px !important;
    padding: 0 16px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 7px !important;
    color: #fff !important;
    background: var(--an-filter-green) !important;
    border: 1px solid var(--an-filter-green) !important;
    border-radius: 999px !important;
    box-shadow: none !important;
    font-family: "Geist", Arial, sans-serif !important;
    font-size: 11px !important;
    font-weight: 600 !important;
  }

  body#category #offcanvas-faceted {
    --bs-offcanvas-width: min(90vw, 380px);
  }

  body#category #offcanvas-faceted .offcanvas-header {
    padding: 16px 18px !important;
    border-bottom: 1px solid var(--an-filter-line);
  }

  body#category #offcanvas-faceted .offcanvas-title {
    color: var(--an-filter-green-dark) !important;
    font-family: "Bagrile", "Instrument Serif", Georgia, serif !important;
    font-size: 24px !important;
    font-weight: 400 !important;
  }

  body#category #offcanvas-faceted .offcanvas-body {
    padding: 8px 18px 24px !important;
  }

  body#category #offcanvas-faceted .facet {
    margin: 0 !important;
    padding: 16px 0 !important;
    border-bottom: 1px solid var(--an-filter-line) !important;
  }
}

/* =====================================================
   ALLO NATUREL — UN SEUL LOGO AU SCROLL
   ===================================================== */

/* État normal */
.an-header .an-header__logo .an-logo--compact {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
}

.an-header .an-header__logo .an-logo--default {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
}


/* =====================================================
   DESKTOP — HEADER COMPACT APRÈS SCROLL
   ===================================================== */

@media (min-width: 1200px) {

  /* On supprime totalement le grand logo */
  .an-header--compact .an-header__logo .an-logo--default {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    width: 0 !important;
    height: 0 !important;
    max-width: 0 !important;
    max-height: 0 !important;
    overflow: hidden !important;
    position: absolute !important;
    pointer-events: none !important;
  }

  /* On conserve uniquement le logo rond */
  .an-header--compact .an-header__logo .an-logo--compact {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;

    width: 44px !important;
    height: 44px !important;
    max-width: 44px !important;
    max-height: 44px !important;

    position: static !important;
    margin: 0 auto !important;
  }

  .an-header--compact .an-header__logo .an-logo--compact img {
    display: block !important;

    width: 44px !important;
    height: 44px !important;
    max-width: 44px !important;
    max-height: 44px !important;

    object-fit: contain !important;
  }
}


/* =====================================================
   MOBILE / TABLETTE — JAMAIS DE LOGO COMPACT
   ===================================================== */

@media (max-width: 1199.98px) {

  .an-header .an-header__logo .an-logo--compact,
  .an-header--compact .an-header__logo .an-logo--compact {
    display: none !important;
  }

  .an-header .an-header__logo .an-logo--default,
  .an-header--compact .an-header__logo .an-logo--default {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
  }
}

/* ==========================================================
   ALLO NATUREL — LOGO HEADER COMPACT
   Un seul logo + emplacement fixe + aucun saut
   ========================================================== */

@media (min-width: 1200px) {

  /* Zone logo compacte fixe */
  .an-header--compact .an-header__logo {
    position: relative !important;

    width: 52px !important;
    min-width: 52px !important;
    max-width: 52px !important;

    height: 52px !important;
    min-height: 52px !important;
    max-height: 52px !important;

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

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

    overflow: hidden !important;
  }


  /* ==========================================
     ON SUPPRIME LES 2 LIENS DU LOGO PRINCIPAL
     ========================================== */

  .an-header--compact .an-header__logo > a,
  .an-header--compact .an-header__logo > a.navbar-brand,
  .an-header--compact .an-header__logo > a.navbar-brand.d-block {
    display: none !important;

    position: absolute !important;

    width: 0 !important;
    height: 0 !important;
    min-width: 0 !important;
    min-height: 0 !important;
    max-width: 0 !important;
    max-height: 0 !important;

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

    visibility: hidden !important;
    opacity: 0 !important;

    overflow: hidden !important;
    pointer-events: none !important;
  }


  /* Sécurité supplémentaire :
     le logo PrestaShop ne peut vraiment plus apparaître */
  .an-header--compact .an-header__logo img.logo,
  .an-header--compact .an-header__logo img.img-fluid:not(.an-logo--compact) {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
  }


  /* ==========================================
     LOGO ROND UNIQUE
     ========================================== */

  .an-header--compact .an-header__logo > img.an-logo--compact {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;

    position: absolute !important;

    top: 50% !important;
    left: 50% !important;

    width: 44px !important;
    height: 44px !important;

    min-width: 44px !important;
    min-height: 44px !important;
    max-width: 44px !important;
    max-height: 44px !important;

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

    transform: translate(-50%, -50%) !important;

    object-fit: contain !important;
  }
}


/* ==========================================================
   ÉTAT NORMAL
   ========================================================== */

@media (min-width: 1200px) {

  .an-header:not(.an-header--compact)
  .an-header__logo
  > img.an-logo--compact {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
  }

  .an-header:not(.an-header--compact)
  .an-header__logo
  > a.navbar-brand {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
  }
}

/* =====================================================
   PANIER OFFCANVAS — RETOURNER À MES ACHATS
   ===================================================== */

.an-cart-continue-shopping {
  width: 100%;
  min-height: 46px;

  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;

  margin-top: 10px;
  padding: 11px 18px;

  background: transparent;

  border: 1px solid #07574f;
  border-radius: 999px;

  color: #07574f;

  font-family: "Geist", Arial, sans-serif;
  font-size: 14px;
  font-weight: 600;
  line-height: 1;

  cursor: pointer;

  transition:
    background-color .18s ease,
    color .18s ease;
}

.an-cart-continue-shopping .material-icons {
  font-size: 18px;
  line-height: 1;
}

.an-cart-continue-shopping:hover,
.an-cart-continue-shopping:focus {
  background: #07574f;
  color: #fff;
}

.an-cart-continue-shopping:focus-visible {
  outline: 2px solid #ffa149;
  outline-offset: 2px;
}

/* Réassurance client — fond blanc */
.an-reassurance__item {
  background: #fff !important;
}

/* ==========================================================
   ALLO NATUREL — CONTENU CATÉGORIE EN TABS
   ========================================================== */

body#category .category__additional-description.an-category-tabs {
    width: 100%;
    max-width: 1180px;
    margin: 70px auto 45px;
    padding: 0;
    background: transparent;
    border-radius: 0;
}

.an-category-tabs__nav {
    display: flex;
    align-items: flex-end;
    gap: 8px;
    overflow-x: auto;
    margin: 0;
    padding: 0 4px;
    border-bottom: 1px solid rgba(7, 87, 79, .14);
    scrollbar-width: none;
}

.an-category-tabs__nav::-webkit-scrollbar {
    display: none;
}

.an-category-tabs__button {
    position: relative;
    flex: 0 0 auto;
    min-height: 52px;
    padding: 0 22px;
    border: 0;
    background: transparent;
    color: #708b87;
    font-family: "Geist", Arial, sans-serif;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: color .18s ease;
}

.an-category-tabs__button:hover {
    color: #07574f;
}

.an-category-tabs__button.is-active {
    color: #07574f;
}

.an-category-tabs__button.is-active::after {
    content: "";
    position: absolute;
    left: 22px;
    right: 22px;
    bottom: -1px;
    height: 3px;
    border-radius: 3px 3px 0 0;
    background: #ffa149;
}

.an-category-tabs__content {
    padding: 44px 52px 48px;
    background: #f7f4ee;
    border-radius: 0 0 18px 18px;
}

.an-category-tabs__panel {
    display: none;
}

.an-category-tabs__panel.is-active {
    display: block;
}

body#category
.an-category-tabs__panel > h2:first-child {
    margin-top: 0 !important;
    padding-top: 0 !important;
    border-top: 0 !important;
}

body#category
.an-category-tabs__panel h2 {
    margin: 0 0 22px !important;
    padding: 0 !important;
    border: 0 !important;
    font-size: 34px;
}

@media (max-width: 767px) {

    body#category .category__additional-description.an-category-tabs {
        margin: 45px auto 30px;
    }

    .an-category-tabs__nav {
        padding: 0;
    }

    .an-category-tabs__button {
        min-height: 47px;
        padding: 0 15px;
        font-size: 12px;
    }

    .an-category-tabs__button.is-active::after {
        left: 15px;
        right: 15px;
    }

    .an-category-tabs__content {
        padding: 30px 22px 34px;
        border-radius: 0 0 14px 14px;
    }

}

/* ==========================================================
   ALLO NATUREL — HEADER PETIT DESKTOP / ORDINATEUR PORTABLE
   Évite que le menu soit collé aux bords de l'écran
   ========================================================== */

@media (min-width: 1200px) and (max-width: 1599px) {

  .an-header__grid {
    width: calc(100% - 64px) !important;
    max-width: 1536px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

}