/* ============================================================
   NAHOMI'S MARKET — V9.1
   DESIGN OFFICIEL
   Vert forêt • Or • Crème • Blanc
============================================================ */


/* ============================================================
   1. VARIABLES
============================================================ */

:root {
  --nm-green: #123f32;
  --nm-green-dark: #092d24;
  --nm-green-deep: #06251d;
  --nm-green-soft: #eaf2ee;

  --nm-gold: #c79b45;
  --nm-gold-dark: #a77a29;
  --nm-gold-soft: #f4ead5;

  --nm-cream: #faf8f3;
  --nm-soft: #f6f5f1;
  --nm-white: #ffffff;

  --nm-ink: #1c2924;
  --nm-muted: #6d756f;
  --nm-line: #e5e5df;

  --nm-shadow:
    0 16px 42px rgba(8, 49, 38, .09);

  --nm-shadow-hover:
    0 22px 50px rgba(8, 49, 38, .15);

  /* Compatibilité ancien CSS */
  --navy: var(--nm-green);
  --red: var(--nm-gold-dark);
  --ink: var(--nm-ink);
  --muted: var(--nm-muted);
  --bg: var(--nm-soft);
  --line: var(--nm-line);
}


/* ============================================================
   2. GLOBAL
============================================================ */

* {
  box-sizing: border-box;
}


html,
body {
  max-width: 100%;
  overflow-x: hidden;
}


body {
  margin: 0;

  background: #fff;

  color: var(--nm-ink);
}


img {
  max-width: 100%;
  height: auto;
}


/*
   IMPORTANT :
   Le site était auparavant limité à environ 1160px.
   On élargit maintenant le contenu pour se rapprocher
   de la maquette professionnelle.
*/

.wrap {
  width: min(1540px, 94%) !important;

  margin-left: auto;
  margin-right: auto;
}


/* ============================================================
   3. BARRE D'ANNONCE
============================================================ */

.nmAnnouncement {
  background: var(--nm-green-deep);

  color: #fff;

  font-size: 13px;
}


.nmAnnouncementInner {
  min-height: 40px;

  display: flex;

  align-items: center;

  justify-content: space-between;

  gap: 20px;
}


.nmAnnouncement a {
  color: #f4dca9;

  text-decoration: none;

  font-weight: 700;
}


.nmAnnouncement a:hover {
  text-decoration: underline;
}


/* ============================================================
   4. HEADER PRINCIPAL
============================================================ */

header {
  position: sticky;

  top: 0;

  z-index: 100;

  background:
    rgba(255, 255, 255, .98) !important;

  border-bottom:
    1px solid #e9e7e1 !important;

  box-shadow:
    0 5px 18px rgba(9, 45, 36, .05);
}


/* BARRE */

header .nav,
.nmMainNav {
  min-height: 94px !important;

  display: flex !important;

  align-items: center !important;

  justify-content: flex-start !important;

  gap: 30px !important;
}


/* ============================================================
   5. LOGO
============================================================ */

header .brand,
.nmBrand {
  flex: 0 0 255px !important;

  width: 255px !important;

  display: flex !important;

  align-items: center !important;

  text-decoration: none !important;

  color: var(--nm-green) !important;
}


header .brand img,
.nmBrandLogo {
  display: block !important;

  width: 255px !important;
  height: 78px !important;

  max-width: 255px !important;
  max-height: 78px !important;

  object-fit: contain !important;

  object-position: left center !important;
}


/* ============================================================
   6. NAVIGATION DESKTOP
============================================================ */

header nav {
  margin-left: auto !important;

  display: flex !important;

  align-items: center !important;

  gap: 24px !important;
}


header nav a {
  position: relative;

  padding: 9px 0 !important;

  color: var(--nm-ink) !important;

  text-decoration: none !important;

  font-size: 15px !important;

  font-weight: 700 !important;

  white-space: nowrap;

  transition:
    color .2s ease;
}


header nav a:hover {
  color: var(--nm-green) !important;
}


header nav a.active {
  color: var(--nm-green) !important;
}


header nav a.active::after {
  content: "";

  position: absolute;

  left: 0;
  right: 0;

  bottom: -10px;

  height: 2px;

  border-radius: 10px;

  background: var(--nm-gold);
}


/* ============================================================
   7. LANGUE
============================================================ */

header #lang {
  width: 66px !important;

  min-width: 66px !important;

  height: 44px !important;

  padding: 0 10px !important;

  background: #fff !important;

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

  border:
    1px solid #dedfd9 !important;

  border-radius: 12px !important;
}


/* ============================================================
   8. COMPTE
============================================================ */

header .guest-link {
  min-height: auto !important;

  padding: 8px 4px !important;

  background: transparent !important;

  border: 0 !important;

  box-shadow: none !important;

  color: var(--nm-ink) !important;

  border-radius: 0 !important;
}


/* ============================================================
   9. PANIER DESKTOP
============================================================ */

header .cart-link {
  flex: 0 0 48px;

  width: 48px !important;
  height: 48px !important;

  min-height: 48px !important;

  padding: 0 !important;

  display: inline-flex !important;

  align-items: center !important;

  justify-content: center !important;

  background:
    var(--nm-green) !important;

  color: #fff !important;

  border: 0 !important;

  border-radius: 50% !important;

  box-shadow:
    0 8px 20px rgba(18, 63, 50, .18);
}


/*
   Le deuxième panier est uniquement pour téléphone.
*/

.mobile-cart-link {
  display: none !important;
}


/* ============================================================
   10. HAMBURGER
============================================================ */

header .hamb,
.hamb {
  display: none;

  border: 0;

  background:
    var(--nm-green) !important;

  color: #fff !important;

  padding: 10px 13px;

  border-radius: 10px;

  cursor: pointer;
}


/* ============================================================
   11. BOUTONS GÉNÉRAUX
============================================================ */

.dark,
.red,
.ghost,
.light,
.nmBtnPrimary,
.nmBtnSecondary,
.nmBtnOutline {
  min-height: 46px;

  display: inline-flex;

  align-items: center;

  justify-content: center;

  gap: 8px;

  padding: 12px 20px;

  border-radius: 999px;

  font-weight: 800;

  cursor: pointer;

  text-decoration: none;

  transition:
    transform .2s ease,
    box-shadow .2s ease,
    background .2s ease;
}


.nmBtnPrimary,
.red {
  background:
    var(--nm-green) !important;

  color: #fff !important;

  border:
    1px solid var(--nm-green) !important;

  box-shadow:
    0 10px 24px rgba(18, 63, 50, .16);
}


.nmBtnPrimary:hover,
.red:hover {
  background:
    var(--nm-green-dark) !important;

  transform:
    translateY(-2px);
}


.nmBtnSecondary,
.light {
  background: #fff;

  color: var(--nm-green);

  border:
    1px solid #d9ded9;
}


.nmBtnSecondary:hover {
  border-color:
    var(--nm-gold);

  transform:
    translateY(-2px);
}


.nmBtnOutline {
  background: transparent;

  color: var(--nm-green);

  border:
    1px solid var(--nm-green);
}


.nmBtnOutline:hover {
  background:
    var(--nm-green);

  color: #fff;
}


/* ============================================================
   12. HERO ACCUEIL
============================================================ */

.nmHero {
  position: relative;

  overflow: hidden;

  padding:
    78px 0 80px !important;

  background:
    radial-gradient(
      circle at 10% 80%,
      rgba(199, 155, 69, .08),
      transparent 24%
    ),
    radial-gradient(
      circle at 95% 10%,
      rgba(199, 155, 69, .12),
      transparent 25%
    ),
    linear-gradient(
      135deg,
      #ffffff 0%,
      #fcfaf5 58%,
      #f4f4ec 100%
    );
}


.nmHero::after {
  content: "";

  position: absolute;

  width: 430px;
  height: 430px;

  right: -230px;
  top: -230px;

  border-radius: 50%;

  background:
    rgba(199, 155, 69, .07);

  pointer-events: none;
}


.nmHeroGrid {
  position: relative;

  z-index: 2;

  display: grid !important;

  grid-template-columns:
    minmax(0, 1.04fr)
    minmax(560px, .96fr) !important;

  gap: 72px !important;

  align-items: center;
}


.nmHeroContent {
  max-width: 780px !important;
}


.nmEyebrow {
  display: inline-block;

  margin-bottom: 14px;

  color:
    var(--nm-gold-dark);

  font-size: 12px;

  font-weight: 900;

  letter-spacing: 2.2px;
}


.nmHero h1 {
  margin: 0;

  max-width: 780px !important;

  color:
    var(--nm-green-deep);

  font-family:
    Georgia,
    "Times New Roman",
    serif;

  font-size:
    clamp(58px, 5.5vw, 90px) !important;

  line-height: .94 !important;

  letter-spacing: -3px;
}


.nmHero h1 em {
  display: block;

  margin-top: 6px;

  color:
    var(--nm-gold-dark);

  font-style: normal;
}


.nmHeroContent > p {
  max-width: 700px !important;

  margin:
    27px 0 0;

  color:
    var(--nm-muted);

  font-size:
    18px !important;

  line-height: 1.7;
}


.nmHeroActions {
  display: flex;

  flex-wrap: wrap;

  gap: 14px;

  margin-top: 31px;
}


.nmHeroActions .nmBtnPrimary {
  min-width: 220px;
}


.nmHeroMiniTrust {
  display: flex;

  flex-wrap: wrap;

  gap: 26px;

  margin-top: 30px;

  color:
    var(--nm-muted);

  font-size: 13px;
}


.nmHeroMiniTrust > div {
  display: flex;

  align-items: center;

  gap: 8px;
}


.nmHeroMiniTrust strong {
  width: 21px;
  height: 21px;

  display: grid;

  place-items: center;

  border-radius: 50%;

  background:
    var(--nm-green-soft);

  color:
    var(--nm-green);

  font-size: 11px;
}


/* ============================================================
   13. PHOTOS DU HERO
============================================================ */

.nmHeroGallery {
  display: grid;

  grid-template-columns:
    1fr 1fr;

  grid-template-rows:
    265px 265px !important;

  gap: 16px !important;
}


.nmHeroPhoto {
  position: relative;

  overflow: hidden;

  display: block;

  border-radius: 23px;

  background: #ddd;

  box-shadow:
    0 18px 45px
    rgba(8, 48, 37, .14);
}


.nmHeroPhotoLarge {
  grid-row:
    1 / 3;
}


.nmHeroPhoto img {
  width: 100%;
  height: 100%;

  display: block;

  object-fit: cover;

  transition:
    transform .5s ease;
}


.nmHeroPhoto::after {
  content: "";

  position: absolute;

  inset: 0;

  background:
    linear-gradient(
      to top,
      rgba(5, 35, 27, .80),
      rgba(5, 35, 27, 0)
      67%
    );
}


.nmHeroPhoto:hover img {
  transform:
    scale(1.04);
}


.nmHeroPhoto > span {
  position: absolute;

  z-index: 3;

  left: 22px;
  right: 22px;
  bottom: 21px;

  color: #fff;
}


.nmHeroPhoto small {
  display: block;

  margin-bottom: 5px;

  color:
    #f0d49c;

  font-size: 10px;

  font-weight: 900;

  letter-spacing: 1.4px;
}


.nmHeroPhoto b {
  font-family:
    Georgia,
    serif;

  font-size: 28px;
}


/* ============================================================
   14. AVANTAGES
============================================================ */

.nmBenefits {
  background:
    var(--nm-green);

  color: #fff;
}


.nmBenefitsGrid {
  display: grid;

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

  min-height: 106px;
}


.nmBenefit {
  display: flex;

  align-items: center;

  gap: 14px;

  padding:
    22px 20px;

  border-right:
    1px solid
    rgba(255,255,255,.13);
}


.nmBenefit:last-child {
  border-right: 0;
}


.nmBenefitIcon {
  flex: 0 0 43px;

  width: 43px;
  height: 43px;

  display: grid;

  place-items: center;

  border-radius: 50%;

  background:
    rgba(255,255,255,.10);

  color:
    #e7c67f;

  font-size: 20px;

  font-weight: 900;
}


.nmBenefit b,
.nmBenefit small {
  display: block;
}


.nmBenefit b {
  margin-bottom: 3px;

  font-size: 14px;
}


.nmBenefit small {
  color:
    #cddbd5;

  line-height: 1.4;
}


/* ============================================================
   15. SECTIONS
============================================================ */

.nmSection {
  padding:
    80px 0;
}


.nmSectionHeader {
  display: flex;

  justify-content:
    space-between;

  align-items: end;

  gap: 30px;

  margin-bottom: 34px;
}


.nmSectionHeader h2 {
  margin: 0;

  color:
    var(--nm-green-deep);

  font-family:
    Georgia,
    "Times New Roman",
    serif;

  font-size:
    clamp(
      34px,
      4vw,
      48px
    );

  letter-spacing:
    -1.3px;
}


.nmSectionHeader p {
  margin:
    10px 0 0;

  color:
    var(--nm-muted);
}


.nmTextLink {
  color:
    var(--nm-green);

  text-decoration: none;

  font-weight: 800;

  white-space: nowrap;
}


.nmTextLink:hover {
  color:
    var(--nm-gold-dark);
}


/* ============================================================
   16. CATÉGORIES ACCUEIL
============================================================ */

.homeCategoryGrid {
  display: grid;

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

  gap: 20px;
}


.homeCategoryCard {
  display: block;

  overflow: hidden;

  position: relative;

  background: #fff;

  border:
    1px solid
    var(--nm-line);

  border-radius: 20px;

  text-decoration: none;

  color: inherit;

  box-shadow:
    0 10px 28px
    rgba(8,48,37,.06);

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

.homeCategoryCard[hidden],
.nmDiscoverCard[hidden] {
  display: none !important;
}


.homeCategoryCard:hover {
  transform:
    translateY(-5px);

  border-color:
    rgba(199,155,69,.55);

  box-shadow:
    var(--nm-shadow-hover);
}


.homeCategoryImage {
  width: 100%;

  height: 215px;

  overflow: hidden;

  background:
    #f2f2ed;
}


.homeCategoryImage img {
  width: 100%;
  height: 100%;

  display: block;

  object-fit: cover;

  transition:
    transform .45s ease;
}


.homeCategoryCard:hover
.homeCategoryImage img {
  transform:
    scale(1.045);
}


.homeCategoryInfo {
  padding:
    18px 19px 20px;
}


.homeCategoryInfo h3 {
  margin:
    0 0 7px;

  color:
    var(--nm-green);

  font-family:
    Georgia,
    serif;

  font-size: 22px;
}


.homeCategoryInfo span {
  color:
    var(--nm-muted);

  font-size: 13px;

  font-weight: 700;
}


.promotionCategory {
  background:
    linear-gradient(
      135deg,
      #fff,
      #fffaf0
    );
}


.promotionCategory
.homeCategoryInfo h3 {
  color:
    var(--nm-gold-dark);
}


/* ============================================================
   17. PRODUITS
============================================================ */

.nmProductsSection {
  background:
    var(--nm-cream);

  border-top:
    1px solid #efede8;

  border-bottom:
    1px solid #efede8;
}


.products {
  display: grid !important;

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

  gap: 24px !important;

  align-items: stretch;
}


.product {
  position: relative;

  display: flex;

  flex-direction: column;

  min-width: 0;

  height: 100%;

  overflow: hidden;

  background: #fff !important;

  border:
    1px solid
    #e7e5df !important;

  border-radius:
    20px !important;

  box-shadow:
    0 12px 30px
    rgba(8,48,37,.07) !important;

  transition:
    transform .25s ease,
    box-shadow .25s ease;
}


.product:hover {
  transform:
    translateY(-4px);

  box-shadow:
    var(--nm-shadow-hover)
    !important;
}


.productImage {
  display: block;

  flex: 0 0 auto;

  background: #fff;

  text-decoration: none;
}


.product .pic {
  position: relative;

  height:
    275px !important;

  overflow: hidden;

  display: flex !important;

  align-items: center;

  justify-content: center;

  padding: 22px;

  background: #fff !important;

  border-bottom:
    1px solid #f0eee8;
}


.product .pic img {
  position:
    static !important;

  inset: auto !important;

  display: block !important;

  width: 100% !important;
  height: 100% !important;

  max-width: 100% !important;
  max-height: 100% !important;

  object-fit:
    contain !important;

  object-position:
    center !important;

  background: #fff;
}


.product .pad {
  position:
    static !important;

  display: flex;

  flex-direction: column;

  flex: 1;

  padding:
    22px !important;

  background: #fff !important;
}


.product .pad > span {
  color:
    var(--nm-gold-dark)
    !important;

  font-size: 11px;

  font-weight: 900;

  letter-spacing: .8px;
}


.product .pad h3 {
  position:
    static !important;

  margin:
    9px 0;

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

  font-size: 20px;

  overflow-wrap: anywhere;
}


.product .pad p {
  position:
    static !important;

  min-height: 0;

  color:
    var(--nm-muted);

  line-height: 1.55;

  overflow-wrap: anywhere;
}


.product .price {
  position:
    static !important;

  margin-top:
    auto !important;

  padding-top: 17px;

  display: flex;

  justify-content:
    space-between;

  align-items: center;

  gap: 12px;
}


.product .price b {
  color:
    var(--nm-green-deep);

  font-size: 21px;
}


.product .price button,
.product .dark {
  background:
    var(--nm-green)
    !important;

  color: #fff !important;

  border: 0;

  border-radius:
    999px !important;

  padding:
    10px 15px;

  font-weight: 800;
}


.product .price button:hover {
  background:
    var(--nm-green-dark)
    !important;
}


.product .price button:disabled {
  background:
    #bbc0bd !important;
}


.oldPrice {
  color: #939893;

  text-decoration:
    line-through;

  display: block;
}


.statusText {
  display: block;

  color:
    var(--nm-gold-dark)
    !important;

  font-weight: 800;

  margin:
    8px 0;
}


.emptyState {
  grid-column:
    1 / -1;

  text-align: center;

  padding:
    55px 28px;

  color:
    var(--nm-muted);

  background: #fff;

  border:
    1px dashed
    #d9d8d2;

  border-radius: 18px;
}


/* ============================================================
   18. PROMOTION
============================================================ */

.nmPromoWrap {
  padding:
    82px 0;
}


.nmPromo {
  overflow: hidden;

  display: grid;

  grid-template-columns:
    1.05fr .95fr;

  min-height: 430px;

  border-radius: 28px;

  background:
    linear-gradient(
      135deg,
      var(--nm-green-deep),
      var(--nm-green)
    );

  box-shadow:
    0 24px 55px
    rgba(8,48,37,.17);
}


.nmPromoContent {
  padding: 58px;

  align-self: center;

  color: #fff;
}


.nmPromoContent > span {
  color: #e4c57d;

  font-size: 12px;

  font-weight: 900;

  letter-spacing: 1.7px;
}


.nmPromo h2 {
  margin:
    13px 0 18px;

  color: #fff;

  font-family:
    Georgia,
    serif;

  font-size:
    clamp(
      38px,
      5vw,
      54px
    );

  line-height: 1.03;
}


.nmPromo p {
  max-width: 480px;

  color: #d2dfd9;

  line-height: 1.7;
}


.nmPromoButton {
  display: inline-flex;

  margin-top: 17px;

  padding:
    13px 20px;

  border-radius: 999px;

  background:
    var(--nm-gold);

  color: #17271f;

  font-weight: 900;

  text-decoration: none;
}


.nmPromoButton:hover {
  background: #dab463;
}


.nmPromoVisual {
  min-height: 430px;
}


.nmPromoVisual img {
  width: 100%;
  height: 100%;

  display: block;

  object-fit: cover;
}


/* ============================================================
   19. CARTES DÉCOUVERTE
============================================================ */

.nmDiscoverGrid {
  display: grid;

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

  gap: 24px;

  padding-bottom: 82px;
}


.nmDiscoverCard {
  position: relative;

  min-height: 400px;

  overflow: hidden;

  display: block;

  border-radius: 25px;

  text-decoration: none;

  color: #fff;

  box-shadow:
    var(--nm-shadow);
}


.nmDiscoverCard img {
  position: absolute;

  inset: 0;

  width: 100%;
  height: 100%;

  object-fit: cover;

  transition:
    transform .45s ease;
}


.nmDiscoverCard::after {
  content: "";

  position: absolute;

  inset: 0;

  background:
    linear-gradient(
      to top,
      rgba(5,34,27,.87),
      rgba(5,34,27,.04)
      70%
    );
}


.nmDiscoverCard:hover img {
  transform:
    scale(1.04);
}


.nmDiscoverCard > div {
  position: absolute;

  z-index: 3;

  left: 32px;
  right: 32px;
  bottom: 30px;
}


.nmDiscoverCard span {
  color: #e5c57d;

  font-size: 11px;

  font-weight: 900;

  letter-spacing: 1.5px;
}


.nmDiscoverCard h3 {
  margin:
    7px 0;

  font-family:
    Georgia,
    serif;

  font-size: 35px;
}


.nmDiscoverCard p {
  margin:
    0 0 11px;

  color: #e6ebe8;
}


.nmDiscoverCard b {
  color: #f3d99d;
}


/* ============================================================
   20. AIDE
============================================================ */

.nmHelp {
  padding:
    62px 0;

  background: #f3efe5;

  border-top:
    1px solid #e7e1d5;
}


.nmHelpInner {
  display: flex;

  justify-content:
    space-between;

  align-items: center;

  gap: 30px;
}


.nmHelp h2 {
  margin:
    4px 0 10px;

  color:
    var(--nm-green-deep);

  font-family:
    Georgia,
    serif;

  font-size:
    clamp(
      30px,
      4vw,
      42px
    );
}


.nmHelp p {
  margin: 0;

  color:
    var(--nm-muted);
}


.nmHelpActions {
  display: flex;

  flex-wrap: wrap;

  gap: 10px;
}


/* ============================================================
   21. PAGES INTERNES
============================================================ */

.pageHero {
  padding:
    66px 0 54px !important;

  background:
    radial-gradient(
      circle at 80% 0%,
      rgba(199,155,69,.13),
      transparent 32%
    ),
    linear-gradient(
      135deg,
      #fff,
      #f3f7f4
    ) !important;

  border-bottom:
    1px solid #e5e9e5;
}


.pageHero h1 {
  margin:
    8px 0 !important;

  color:
    var(--nm-green-deep)
    !important;

  font-family:
    Georgia,
    serif;

  font-size:
    clamp(
      42px,
      5vw,
      62px
    ) !important;

  letter-spacing:
    -1.7px !important;
}


.pageHero p {
  max-width: 760px;

  color:
    var(--nm-muted)
    !important;
}


.pageContent {
  padding:
    55px 0 85px;

  min-height: 48vh;

  background: #fafaf8;
}


/* ============================================================
   22. CARTES / FORMULAIRES
============================================================ */

.infoCard,
.formCard,
.panelPublic {
  background: #fff !important;

  border:
    1px solid
    var(--nm-line)
    !important;

  border-radius:
    20px !important;

  box-shadow:
    var(--nm-shadow)
    !important;
}


.infoCard,
.formCard {
  padding: 30px;
}


.formCard {
  max-width: 650px;
}


.infoCard h2,
.formCard h2,
.panelPublic h2 {
  color:
    var(--nm-green)
    !important;
}


.formCard label {
  display: block;

  margin:
    14px 0 6px;

  font-weight: 700;
}


.toolbar {
  display: flex;

  gap: 12px;

  margin-bottom: 28px;
}


.formCard input,
.formCard select,
.formCard textarea,
.toolbar input,
.toolbar select,
.productDetail input {
  width: 100%;

  min-height: 48px;

  padding: 13px;

  background: #fdfdfb;

  border:
    1px solid
    #dfe1dc !important;

  border-radius: 10px;

  font: inherit;
}


.toolbar input {
  flex: 1;
}


.formCard input:focus,
.formCard select:focus,
.formCard textarea:focus,
.toolbar input:focus,
.toolbar select:focus {
  outline: none;

  border-color:
    var(--nm-gold)
    !important;

  box-shadow:
    0 0 0 3px
    rgba(199,155,69,.10);
}


/* ============================================================
   23. CATÉGORIES PAGE
============================================================ */

.categoryLinks {
  display: grid;

  grid-template-columns:
    repeat(
      4,
      1fr
    ) !important;

  gap: 20px !important;
}


.categoryLinks a {
  min-height:
    175px !important;

  display: flex;

  flex-direction: column;

  justify-content: center;

  align-items: center;

  text-align: center;

  background: #fff !important;

  border:
    1px solid
    var(--nm-line)
    !important;

  border-radius:
    20px !important;

  color: inherit;

  text-decoration: none;

  box-shadow:
    0 10px 30px
    rgba(8,48,37,.06);

  transition: .2s;
}


.categoryLinks a:hover {
  transform:
    translateY(-4px);

  border-color:
    var(--nm-gold)
    !important;

  box-shadow:
    var(--nm-shadow);
}


.categoryLinks b {
  margin-top: 12px;

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

  font-size:
    17px !important;
}


/* ============================================================
   24. FICHE PRODUIT
============================================================ */

.productDetail {
  display: grid;

  grid-template-columns:
    1fr 1fr;

  gap:
    55px !important;

  align-items:
    start !important;
}


.detailPic {
  min-height: 460px;

  padding: 24px;

  display: grid;

  place-items: center;

  background: #fff !important;

  border:
    1px solid
    var(--nm-line);

  border-radius: 22px;

  box-shadow:
    var(--nm-shadow);
}


.detailPic img {
  width: 100%;
  height: 100%;

  max-height: 450px;

  object-fit: contain;

  border-radius: 18px;
}


.productDetail h1 {
  color:
    var(--nm-green-deep)
    !important;

  font-family:
    Georgia,
    serif;

  font-size:
    clamp(
      34px,
      4vw,
      45px
    ) !important;
}


.productDetail input {
  width: 90px;

  display: block;

  margin:
    8px 0 15px;
}


.productDetail hr {
  border: 0;

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

  margin:
    25px 0;
}


.thumbs {
  display: flex;

  gap: 8px;

  flex-wrap: wrap;

  margin-top: 10px;
}


.thumbs button {
  padding: 3px;

  cursor: pointer;

  background: #fff;

  border:
    1px solid
    var(--nm-line);

  border-radius: 9px;
}


.thumbs button:hover {
  border-color:
    var(--nm-gold);
}


.thumbs img {
  width: 64px;
  height: 54px;

  object-fit: cover;

  border-radius: 6px;
}


/* ============================================================
   25. CHECKOUT
============================================================ */

.checkoutGrid {
  display: grid;

  grid-template-columns:
    minmax(0,1.2fr)
    minmax(320px,.8fr)
    !important;

  gap:
    34px !important;

  align-items: start;
}


.checkoutGrid .formCard,
.checkoutGrid .infoCard {
  max-width: none;

  padding:
    34px !important;
}


.checkoutSummaryCard {
  position: sticky;

  top: 115px;
}


.checkoutSteps {
  display: flex;

  align-items: center;

  justify-content: center;

  gap: 10px;

  margin-bottom: 30px;

  padding: 16px;

  background: #fff;

  border:
    1px solid
    var(--nm-line);

  border-radius: 15px;
}


.checkoutSteps i {
  width: 28px;
  height: 28px;

  display: grid;

  place-items: center;

  border-radius: 50%;

  background: #e8ebe8;

  font-style: normal;
}


.checkoutSteps .active {
  color:
    var(--nm-green);
}


.checkoutSteps .active i {
  background:
    var(--nm-green);

  color: #fff;
}


.orderSuccess {
  padding:
    24px !important;

  background:
    #edf7f1 !important;

  border:
    1px solid
    #cfe6d7 !important;

  color:
    #185a3e !important;
}


/* ============================================================
   26. PANIER
============================================================ */

.cartLine {
  display: grid;

  grid-template-columns:
    1fr 90px auto;

  gap: 15px;

  align-items: center;

  padding:
    16px 0;

  border-bottom:
    1px solid
    var(--nm-line);
}


.cartLine input {
  width: 75px;

  padding: 9px;

  border:
    1px solid
    var(--nm-line);

  border-radius: 8px;
}


.cartSummary {
  display: flex;

  justify-content:
    space-between;

  padding:
    22px 0;

  color:
    var(--nm-green-deep);

  font-size: 22px;
}


.cartProduct {
  display: flex;

  align-items: center;

  gap: 12px;
}


.cartProduct img {
  width: 60px;
  height: 60px;

  object-fit: cover;

  border-radius: 10px;
}


/* ============================================================
   27. SUIVI COMMANDE — NOUVEAU DESIGN UNIQUEMENT
============================================================ */

.trackingWrap {
  max-width: 980px !important;
  margin-left: auto;
  margin-right: auto;
}

.trackingSearchCard {
  max-width: 980px;
  margin: 0 auto;
  padding: 30px;
  background: #fff;
  border: 1px solid var(--nm-line);
  border-radius: 22px;
  box-shadow: var(--nm-shadow);
}

.trackingSearchCard .grid2 {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
}

.trackingSearchCard label {
  display: block;
  margin-bottom: 8px;
  color: var(--nm-green-dark);
  font-weight: 700;
}

.trackingSearchCard input {
  width: 100%;
  min-height: 52px;
  padding: 0 15px;
  border: 1px solid #d9ddd9;
  border-radius: 12px;
  background: #fff;
  font: inherit;
}

.trackingSearchCard input:focus {
  outline: none;
  border-color: var(--nm-gold);
  box-shadow: 0 0 0 3px rgba(199, 155, 69, .14);
}

.trackingSubmit {
  margin-top: 22px;
  min-height: 52px;
  padding: 0 26px;
  border: 0;
  border-radius: 999px;
  background: var(--nm-green);
  color: #fff;
  font-weight: 800;
  cursor: pointer;
}

.trackingSubmit:hover {
  background: var(--nm-green-dark);
}

.trackingResultCard {
  max-width: 980px;
  margin: 30px auto 0;
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

.trackingResultCard:not(.show) {
  display: none;
}

.nmOrderCard {
  background: #fff;
  border: 1px solid var(--nm-line);
  border-radius: 24px;
  padding: 30px;
  box-shadow: var(--nm-shadow);
}

.nmOrderHeader {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
  padding-bottom: 22px;
  border-bottom: 1px solid #eceeea;
}

.nmOrderLabel {
  display: inline-block;
  margin-bottom: 7px;
  color: var(--nm-gold-dark);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .14em;
}

.nmOrderHeader h2 {
  margin: 0;
  color: var(--nm-green-dark);
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(24px, 4vw, 34px);
}

.nmHeaderBadges {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 10px;
}

.nmStatusBadge,
.nmPaymentBadge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 38px;
  padding: 0 14px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 800;
}

.nmStatusBadge {
  background: var(--nm-gold-soft);
  color: var(--nm-green-dark);
}

.nmPaymentBadge {
  background: #e8f4ed;
  color: #167143;
}

.nmStatusBadge.cancelled {
  background: #fdecec;
  color: #a32222;
}

.nmProgressTitle {
  margin-top: 26px;
  margin-bottom: 18px;
  color: var(--nm-green-dark);
  font-size: 17px;
  font-weight: 800;
}

.nmTrackingProgress {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 0;
  position: relative;
  margin: 10px 0 30px;
}

.nmTrackStep {
  position: relative;
  text-align: center;
  padding: 0 8px;
}

.nmTrackStep::before,
.nmTrackStep::after {
  content: "";
  position: absolute;
  top: 20px;
  width: 50%;
  height: 3px;
  background: #e3e7e3;
  z-index: 0;
}

.nmTrackStep::before {
  left: 0;
}

.nmTrackStep::after {
  right: 0;
}

.nmTrackStep:first-child::before {
  display: none;
}

.nmTrackStep:last-child::after {
  display: none;
}

.nmTrackStep.done::before,
.nmTrackStep.done::after,
.nmTrackStep.current::before {
  background: var(--nm-green);
}

.nmStepCircle {
  position: relative;
  z-index: 2;
  width: 42px;
  height: 42px;
  margin: 0 auto 12px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fff;
  border: 3px solid #dfe5e1;
  color: #8a948e;
  font-weight: 900;
}

.nmTrackStep.done .nmStepCircle {
  background: var(--nm-green);
  border-color: var(--nm-green);
  color: #fff;
}

.nmTrackStep.current .nmStepCircle {
  background: var(--nm-gold);
  border-color: var(--nm-gold);
  color: #fff;
  box-shadow: 0 0 0 5px rgba(199, 155, 69, .16);
}

.nmStepText {
  color: #7a837d;
  font-size: 13px;
  line-height: 1.35;
  font-weight: 700;
}

.nmTrackStep.done .nmStepText,
.nmTrackStep.current .nmStepText {
  color: var(--nm-green-dark);
}

.nmOrderDetails {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  margin-top: 24px;
}

.nmDetail {
  min-height: 88px;
  padding: 17px 18px;
  border-radius: 16px;
  background: var(--nm-cream);
  border: 1px solid #ece9df;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 7px;
}

.nmDetail span {
  color: var(--nm-muted);
  font-size: 12px;
  font-weight: 700;
}

.nmDetail strong {
  color: var(--nm-green-dark);
  font-size: 16px;
  line-height: 1.35;
}

.nmPaid {
  color: #167143 !important;
}

.nmUnpaid {
  color: #a32222 !important;
}

.nmStatusMessage {
  display: flex;
  gap: 16px;
  align-items: flex-start;
  margin-top: 22px;
  padding: 20px;
  border-radius: 18px;
  background: var(--nm-green-soft);
  border: 1px solid #d8e6de;
}

.nmStatusMessageIcon {
  width: 46px;
  height: 46px;
  flex: 0 0 46px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fff;
  font-size: 22px;
}

.nmStatusMessage strong {
  display: block;
  margin-bottom: 6px;
  color: var(--nm-green-dark);
  font-size: 17px;
}

.nmStatusMessage p {
  margin: 0;
  color: #52615a;
  line-height: 1.6;
}

.nmCancelledBox {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  margin-top: 24px;
  padding: 20px;
  border-radius: 18px;
  background: #fff3f3;
  border: 1px solid #f1cccc;
}

.nmCancelledIcon {
  width: 46px;
  height: 46px;
  flex: 0 0 46px;
  border-radius: 50%;
  background: #a32222;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 26px;
  font-weight: 900;
}

.nmCancelledBox h3 {
  margin: 0 0 6px;
  color: #8d1d1d;
}

.nmCancelledBox p {
  margin: 0;
  color: #6f4a4a;
}

@media (max-width: 820px) {
  .trackingSearchCard .grid2 {
    grid-template-columns: 1fr;
  }

  .trackingSubmit {
    width: 100%;
  }

  .nmOrderHeader {
    flex-direction: column;
  }

  .nmHeaderBadges {
    justify-content: flex-start;
  }

  .nmTrackingProgress {
    grid-template-columns: 1fr;
    gap: 14px;
  }

  .nmTrackStep {
    display: grid;
    grid-template-columns: 46px 1fr;
    align-items: center;
    text-align: left;
    padding: 0;
  }

  .nmTrackStep::before,
  .nmTrackStep::after {
    display: none;
  }

  .nmStepCircle {
    margin: 0;
  }

  .nmStepText {
    padding-left: 10px;
  }

  .nmOrderDetails {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 520px) {
  .trackingSearchCard,
  .nmOrderCard {
    padding: 20px 16px;
    border-radius: 18px;
  }

  .nmOrderHeader h2 {
    font-size: 24px;
  }

  .nmStatusMessage {
    padding: 16px;
  }
}

/* ============================================================
   28. COMPTE CLIENT
============================================================ */

.accountDashboard {
  display: grid;

  grid-template-columns:
    255px 1fr !important;

  gap: 26px;
}


.accountSide {
  background: #fff;

  border:
    1px solid
    var(--nm-line);

  border-radius: 20px;

  padding: 16px;

  box-shadow:
    var(--nm-shadow);
}


.accountSide a {
  display: block;

  padding:
    12px 14px;

  border-radius: 10px;

  text-decoration: none;

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

  font-weight: 700;
}


.accountSide a.active {
  background:
    var(--nm-green-soft)
    !important;
}


.accountSide a.logout {
  color:
    #a54747 !important;
}


.accountStats {
  display: grid;

  grid-template-columns:
    repeat(
      3,
      1fr
    ) !important;

  gap: 16px;
}


.accountStat {
  padding: 24px;

  text-align: center;

  background: #fff;

  border:
    1px solid
    var(--nm-line);

  border-radius: 18px;

  box-shadow:
    0 8px 25px
    rgba(8,48,37,.05);
}


.accountStat b {
  color:
    var(--nm-green)
    !important;

  font-size:
    32px !important;
}


/* ============================================================
   29. AVIS PRODUITS
============================================================ */

.productReviewsSection {
  margin-top: 48px;

  padding-top: 32px;

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


.productRatingSummary {
  display: flex;

  align-items: center;

  gap: 12px;

  flex-wrap: wrap;

  margin-top: 12px;
}


#productAverageRating {
  color:
    var(--nm-green);

  font-size: 28px;

  font-weight: 700;
}


.productRatingStars,
.reviewStars {
  color:
    var(--nm-gold);

  font-size: 22px;

  letter-spacing: 2px;
}


#productReviewCount {
  color:
    var(--nm-muted);

  font-size: 14px;
}


.productReviewsList {
  display: grid;

  gap: 16px;

  margin-top: 20px;
}


.reviewCard {
  padding: 20px;

  background: #fff;

  border:
    1px solid
    var(--nm-line);

  border-radius: 14px;
}


.reviewCardTop {
  display: flex;

  justify-content:
    space-between;

  align-items:
    flex-start;

  gap: 16px;

  margin-bottom: 12px;
}


.verifiedPurchase {
  display: inline-flex;

  align-items: center;

  padding:
    6px 10px;

  border-radius: 999px;

  background:
    var(--nm-green-soft);

  color:
    var(--nm-green);

  font-size: 12px;

  font-weight: 700;
}


.reviewFormContainer {
  margin-top: 32px;

  padding: 24px;

  background:
    #faf9f6;

  border:
    1px solid
    var(--nm-line);

  border-radius: 14px;
}


.reviewStarsInput {
  display: flex;

  gap: 6px;

  margin:
    16px 0 20px;
}


.reviewStarsInput button {
  padding: 0;

  border: 0;

  background:
    transparent;

  color:
    var(--nm-gold);

  font-size: 34px;

  cursor: pointer;
}


.reviewFormContainer textarea {
  width: 100%;

  min-height: 120px;

  padding: 12px;

  border:
    1px solid #d8dad6;

  border-radius: 9px;

  resize: vertical;

  font: inherit;
}


/* ============================================================
   30. AUTH
============================================================ */

.authMessage {
  margin:
    10px 0;

  padding:
    10px 12px;

  border-radius: 9px;

  background:
    #fff1f1;

  color:
    #9b1c1c;
}


.authMessage:empty {
  display: none;
}


.authMessage.ok {
  background:
    var(--nm-green-soft);

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


/* ============================================================
   31. CHAT / DRAWER
============================================================ */

.drawer {
  background: #fff;
}


.chatHead {
  background:
    var(--nm-green)
    !important;

  color: #fff;
}


.chatBody {
  background:
    var(--nm-soft)
    !important;
}


.chatInput button {
  background:
    var(--nm-gold-dark)
    !important;

  color: #fff !important;
}


/* ============================================================
   32. FOOTER
============================================================ */

footer {
  padding:
    58px 0 !important;

  background:
    linear-gradient(
      135deg,
      #041e17,
      #0b392c
    ) !important;
}


.footer {
  display: grid !important;

  grid-template-columns:
    1.25fr .8fr 1fr
    !important;

  gap:
    42px !important;

  background:
    transparent !important;

  color: #fff;
}


.nmFooterBrand {
  display: flex;

  flex-direction: column;

  align-items: flex-start;
}


.nmFooterLogo {
  display: block;

  width:
    255px !important;

  max-width:
    100% !important;

  height: auto !important;

  object-fit: contain;

  background: #fff;

  padding: 7px;

  border-radius: 12px;

  margin-bottom: 16px;
}


.footer p {
  color:
    #bacbc4 !important;

  line-height: 1.65;
}


.footerTitle {
  margin-bottom: 13px;

  color: #e2c37e;

  font-size: 15px;

  font-weight: 900;
}


.footer a {
  display: block;

  margin:
    8px 0;

  color:
    #e4ece8 !important;

  text-decoration: none;
}


.footer a:hover {
  color:
    #e2c37e !important;
}


/* ============================================================
   33. UTILITAIRES
============================================================ */

.linkBtn {
  border: 0;

  background: none;

  padding:
    4px 0;

  cursor: pointer;

  color:
    var(--nm-gold-dark)
    !important;

  font-weight: 700;
}


.muted {
  color:
    var(--nm-muted);
}


.hidden {
  display:
    none !important;
}


.policyNav a {
  background:
    var(--nm-green-soft)
    !important;

  color:
    var(--nm-green)
    !important;
}


.valueCard {
  border:
    1px solid
    var(--nm-line)
    !important;

  box-shadow:
    0 8px 24px
    rgba(8,48,37,.05)
    !important;
}


.valueCard h3 {
  color:
    var(--nm-green)
    !important;
}


/* ============================================================
   34. TABLETTE LARGE
============================================================ */

@media (max-width: 1350px) {

  .wrap {
    width:
      min(1240px,94%)
      !important;
  }


  header .brand,
  .nmBrand {
    flex-basis:
      200px !important;

    width:
      200px !important;
  }


  header .brand img,
  .nmBrandLogo {
    width:
      200px !important;

    height:
      65px !important;

    max-width:
      200px !important;

    max-height:
      65px !important;
  }


  header nav {
    gap:
      15px !important;
  }


  header nav a {
    font-size:
      13px !important;
  }


  .nmHeroGrid {
    grid-template-columns:
      1fr 1fr !important;

    gap:
      45px !important;
  }


  .nmHero h1 {
    font-size:
      clamp(
        52px,
        5.5vw,
        76px
      ) !important;
  }

}


/* ============================================================
   35. TABLETTE
============================================================ */

@media (max-width: 1000px) {

  .nmHeroGrid {
    grid-template-columns:
      1fr !important;
  }


  .nmHeroContent {
    max-width:
      800px !important;
  }


  .nmHeroGallery {
    max-width: none;
  }


  .nmBenefitsGrid {
    grid-template-columns:
      repeat(2,1fr);
  }


  .nmBenefit:nth-child(2) {
    border-right: 0;
  }


  .homeCategoryGrid {
    grid-template-columns:
      repeat(
        2,
        minmax(0,1fr)
      );
  }


  .products {
    grid-template-columns:
      repeat(
        2,
        minmax(0,1fr)
      ) !important;
  }


  .categoryLinks {
    grid-template-columns:
      repeat(
        2,
        1fr
      ) !important;
  }

}


/* ============================================================
   36. MENU MOBILE
============================================================ */

@media (max-width: 850px) {

  header .nav,
  .nmMainNav {
    min-height:
      76px !important;

    position: relative;

    gap:
      12px !important;
  }


  header .brand,
  .nmBrand {
    flex:
      0 0 165px
      !important;

    width:
      165px !important;
  }


  header .brand img,
  .nmBrandLogo {
    width:
      165px !important;

    height:
      56px !important;

    max-width:
      165px !important;

    max-height:
      56px !important;
  }


  .hamb {
    display: block;
  }


  .mobile-cart-link {
    display:
      inline-flex !important;

    align-items: center;

    justify-content: center;

    width: 44px;
    height: 44px;

    margin-left: auto;

    background:
      var(--nm-green);

    color: #fff;

    border-radius: 50%;

    text-decoration: none;

    font-weight: 800;
  }


  header nav {
    display:
      none !important;

    position:
      absolute !important;

    top:
      76px !important;

    left: 0;
    right: 0;

    z-index: 200;

    margin:
      0 !important;

    padding:
      18px 4% !important;

    flex-direction:
      column !important;

    align-items:
      flex-start !important;

    gap:
      4px !important;

    background:
      var(--nm-green-deep)
      !important;

    border: 0 !important;

    box-shadow:
      0 18px 35px
      rgba(0,0,0,.16);
  }


  header nav.show {
    display:
      flex !important;
  }


  header nav a {
    width: 100%;

    padding:
      10px 0 !important;

    color:
      #fff !important;

    font-size:
      15px !important;
  }


  header nav a:hover,
  header nav a.active {
    color:
      #e5c57f !important;
  }


  header nav a.active::after {
    display: none;
  }


  header #lang {
    margin-top: 8px;
  }


  header .guest-link {
    color:
      #fff !important;
  }


  header .cart-link {
    display:
      none !important;
  }


  .checkoutGrid,
  .accountDashboard {
    grid-template-columns:
      1fr !important;
  }


  .checkoutSummaryCard {
    position: static;
  }


  .accountStats {
    grid-template-columns:
      1fr !important;
  }


  .accountSide {
    display: flex;

    overflow-x: auto;

    gap: 5px;
  }


  .accountSide a {
    white-space: nowrap;
  }


  .productDetail {
    grid-template-columns:
      1fr !important;
  }

}


/* ============================================================
   37. CELLULAIRE
============================================================ */

@media (max-width: 700px) {

  .wrap {
    width:
      92% !important;
  }


  .nmAnnouncementInner {
    justify-content: center;

    text-align: center;
  }


  .nmAnnouncementInner a {
    display: none;
  }


  header .brand,
  .nmBrand {
    flex-basis:
      145px !important;

    width:
      145px !important;
  }


  header .brand img,
  .nmBrandLogo {
    width:
      145px !important;

    height:
      52px !important;

    max-width:
      145px !important;

    max-height:
      52px !important;
  }


  .nmHero {
    padding:
      52px 0 56px
      !important;
  }


  .nmHeroGrid {
    gap:
      38px !important;
  }


  .nmHero h1 {
    font-size:
      clamp(
        42px,
        13vw,
        58px
      ) !important;

    letter-spacing:
      -2px;
  }


  .nmHeroContent > p {
    font-size:
      16px !important;
  }


  .nmHeroActions {
    flex-direction: column;
  }


  .nmHeroActions a {
    width: 100%;
  }


  .nmHeroMiniTrust {
    gap: 12px;
  }


  .nmHeroGallery {
    grid-template-columns:
      1fr 1fr;

    grid-template-rows:
      220px 150px
      !important;

    gap:
      9px !important;
  }


  .nmHeroPhoto {
    border-radius: 16px;
  }


  .nmHeroPhotoLarge {
    grid-column:
      1 / 3;

    grid-row: 1;
  }


  .nmHeroPhoto b {
    font-size: 20px;
  }


  .nmBenefitsGrid {
    grid-template-columns:
      1fr;
  }


  .nmBenefit {
    border-right: 0;

    border-bottom:
      1px solid
      rgba(255,255,255,.12);
  }


  .nmBenefit:last-child {
    border-bottom: 0;
  }


  .nmSection {
    padding:
      55px 0;
  }


  .nmSectionHeader {
    align-items:
      flex-start;

    flex-direction:
      column;

    margin-bottom: 24px;
  }


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

    gap: 11px;
  }


  .homeCategoryImage {
    height: 135px;
  }


  .homeCategoryInfo {
    padding: 13px;
  }


  .homeCategoryInfo h3 {
    font-size: 17px;
  }


  .homeCategoryInfo span {
    font-size: 11px;
  }


  .products {
    grid-template-columns:
      1fr !important;
  }


  .product .pic {
    height:
      275px !important;
  }


  .nmPromoWrap {
    padding:
      55px 0;
  }


  .nmPromo {
    grid-template-columns:
      1fr;
  }


  .nmPromoContent {
    padding:
      35px 26px;
  }


  .nmPromoVisual {
    min-height: 260px;
  }


  .nmDiscoverGrid {
    grid-template-columns:
      1fr;

    padding-bottom: 55px;
  }


  .nmDiscoverCard {
    min-height: 330px;
  }


  .nmDiscoverCard > div {
    left: 22px;
    right: 22px;
    bottom: 22px;
  }


  .nmDiscoverCard h3 {
    font-size: 29px;
  }


  .nmHelpInner {
    align-items:
      flex-start;

    flex-direction:
      column;
  }


  .nmHelpActions {
    width: 100%;
  }


  .nmHelpActions a {
    width: 100%;
  }


  .categoryLinks {
    grid-template-columns:
      1fr !important;
  }


  .footer {
    grid-template-columns:
      1fr !important;
  }


  .reviewCardTop {
    flex-direction: column;
  }


  .cartLine {
    grid-template-columns:
      1fr 70px;
  }


  .cartLine > b {
    grid-column:
      1 / -1;
  }

}


/* ============================================================
   38. PETITS TÉLÉPHONES
============================================================ */

@media (max-width: 430px) {

  header .brand,
  .nmBrand {
    flex-basis:
      132px !important;

    width:
      132px !important;
  }


  header .brand img,
  .nmBrandLogo {
    width:
      132px !important;

    height:
      48px !important;

    max-width:
      132px !important;

    max-height:
      48px !important;
  }


  .nmHero h1 {
    font-size:
      42px !important;
  }


  .homeCategoryImage {
    height: 120px;
  }


  .homeCategoryInfo h3 {
    font-size: 16px;
  }

}

@media (max-width: 900px) {
  header .hamb,
  .hamb {
    display: block !important;
  }
}

/* Nahomi's Market — affichage promotionnel, sans impact sur les prix de commande */
.nmDiscountBadge{display:inline-flex;align-items:center;justify-content:center;background:#b42332;color:#fff;border-radius:6px;padding:4px 9px;font-size:.78rem;font-weight:800;line-height:1.25;margin:5px 0;white-space:nowrap}
.nmSalePrice{color:#b42332!important;font-weight:800;font-size:1.2em}
.nmSavings{display:block;color:#176a50;font-size:.82rem;font-weight:700;margin-top:3px}
.detailPrice .nmSalePrice{margin:4px 0 2px}
.detailPrice .nmDiscountBadge{margin-right:8px}