/* ============================================================
   Toy Center - Feuille de styles principale
   Encodage ISO-8859-1 - Desktop first (min 1024px)
   ============================================================ */

/* --- Custom properties (design tokens) --- */
:root {
  --clr:         #ED710D;
  --clr-dark:    #d4620b;
  --creme-light:    #faebd2;
  --creme-nav:      #FCCE9B;
  --encart-bg:      #fbeed6;
  --encart-border:  #f0dcae;
  --promo-red:      #d8392f;
  --text-main:      #5d5d5d;
  --text-dark:      #5d5d5d;
  --text-mid:       #6a6a6a;
  --text-light:     #9a9a9a;
  --text-nav:       #5d5d5d;
  --card-border:    #e6e6e6;
  --bs-border-color: #dee2e6;
  --card-hover-brd: #d9d9d9;
  --max-w:          1320px;
  --font-serif:     Georgia, 'Times New Roman', serif;
  --font-sans:      Verdana, Arial, sans-serif;
}

/* --- Police Androgyne --- */
@font-face {
  font-family: 'Androgyne';
  src: local('Androgyne'), url('font/Androgyne_TB.woff') format('woff');
  font-weight: normal;
  font-style: normal;
}

/* --- Reset minimal --- */
*, *::before, *::after { box-sizing: border-box; }
html { height: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: 1rem;
  color: var(--text-main);
  background: #fff;
  height: 100%;
  min-width: 1024px;
}
h1 { font-size: 2rem; }
h2 { font-size: 1.5rem; color: var(--text-dark); font-weight: normal; font-style: normal; }
a { color: #5d5d5d; text-decoration: none; }
/* Masque visuellement un element tout en le laissant lisible par Google et les lecteurs d'ecran */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
img { max-width: 100%; display: block; }
ul { margin: 0; padding: 0; list-style: none; }
button { cursor: pointer; }
input, select, button { font-family: var(--font-sans); font-size: 1rem; }

/* ============================================================
   WRAPPER FIXE (header + nav collés ensemble)
   ============================================================ */
.site-sticky {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 200;
}
/* Placeholder dans le flux - hauteur calée par JS au chargement */
.site-sticky-ph { display: block; }

/* ============================================================
   HEADER
   ============================================================ */
.site-header {
  background: linear-gradient(180deg, #d2d2d2 0%, #b3b3b3 55%, #9f9f9f 100%);
  border-bottom: 3px solid var(--clr);
  position: relative;
  z-index: 2;
}
.site-header__inner {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 0 20px;
  height: 160px;
  display: flex;
  align-items: center;
  gap: 26px;
  transition: height 0.8s ease-in-out;
}
.site-sticky--scrolled .site-header__inner {
  height: 75px;
}

/* Logo */
.site-logo {
  flex: 0 0 260px;   /* largeur fixe - ne bouge jamais horizontalement */
  width: 260px;
  display: flex;
  align-items: center;
  text-decoration: none;
  overflow: hidden;
}
.site-logo__img {
  display: block;
  width: auto;
  max-width: 260px;
  min-height: 68px;
  max-height: 129px;
  object-fit: contain;
  object-position: left center;
  transition: max-height 0.8s ease-in-out;
}
.site-sticky--scrolled .site-logo__img {
  max-height: 68px;
}
.site-logo__wordmark { line-height: 0.82; }
.site-logo__toy {
  display: block;
  font-weight: 700;
  font-size: 2.1rem;
  color: var(--clr);
}
.site-logo__center {
  display: block;
  font-weight: 400;
  font-size: 1.9rem;
  color: #f2f2f2;
  letter-spacing: 1px;
  margin-top: -2px;
}

/* Barre de recherche */
.site-search {
  flex: 1;
  display: flex;
  justify-content: center;
  position: relative;
}
.site-search__wrap {
  position: relative;
  width: 100%;
  max-width: 460px;
  display: flex;
}
.site-search__input {
  width: 100%;
  padding: .375rem 28px .375rem .75rem;
  line-height: 1.5;
  color: #212529;
  background-color: #fff;
  background-clip: padding-box;
  border: 1px solid #ced4da;
  border-radius: .375rem;
  font-size: 1rem;
  outline: none;
  box-shadow: 0 0 8px 0 #ccc;
}
.site-search__input::placeholder { color: #8a8a8a; }
.site-search__input:focus { border-color: var(--clr); box-shadow: 0 0 8px 0 var(--clr); }
.site-search__btn {
  position: absolute;
  right: calc(50% - 260px + 6px);
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  color: #8a8a8a;
  padding: 4px 8px;
  display: flex;
  align-items: center;
}
.site-search__clear {
  position: absolute;
  right: 4px;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  color: #8a8a8a;
  font-size: .85rem;
  line-height: 1;
  cursor: pointer;
  padding: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Icones header */
.site-header__icons {
  flex: none;
  display: flex;
  gap: 40px;
}
.hdr-icon {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  gap: 4px;
  color: var(--text-nav);
  font-size: 1rem;
  font-weight: 700;
  text-decoration: none;
}
.hdr-icon svg { display: block; }
.hdr-icon span:not(.panierbadge) {
  display: block;
  max-height: 20px;
  overflow: hidden;
  transition: opacity 0.8s ease-in-out, max-height 0.8s ease-in-out;
}
.site-sticky--scrolled .hdr-icon span:not(.dp):not(.panierbadge) {
  opacity: 0;
  max-height: 0;
}

/* Selecteur de langue */
.lang-switcher {
  position: relative;
}
.lang-switcher__current {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  cursor: pointer;
  color: var(--text-nav);
  font-weight: 700;
  text-decoration: none;
}
.lang-switcher__current span {
  display: block;
  max-height: 20px;
  overflow: hidden;
  transition: opacity 0.8s ease-in-out, max-height 0.8s ease-in-out;
}
.site-sticky--scrolled .lang-switcher__current span:not(.dp) { opacity: 0; max-height: 0; }
.lang-switcher__dropdown {
  display: none;
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  background: #fff;
  border: 1px solid #ddd;
  border-radius: 6px;
  box-shadow: 0 4px 14px rgba(0,0,0,0.15);
  padding: 8px 6px 6px;
  margin-top: 0;
  z-index: 9999;
  min-width: 44px;
}
.lang-switcher.open .lang-switcher__dropdown,
.univers-switcher.open .lang-switcher__dropdown { display: block; }
.lang-switcher__dropdown::before {
  content: '';
  position: absolute;
  top: -10px;
  left: 0;
  right: 0;
  height: 10px;
}
.lang-switcher__dropdown a {
  display: block;
  padding: 4px 6px;
  border-radius: 4px;
  text-align: center;
}

/* Popup univers */
.univers-switcher { position: relative; }
.univers-switcher__dropdown {
  min-width: 200px;
  text-align: left;
}
.univers-switcher__dropdown a {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 10px;
  text-align: left;
  white-space: nowrap;
}
.univers-switcher__dropdown a img { display: block; }

/* Sprite drapeaux */
.dp {
  display: inline-block;
  width: 27px;
  height: 20px;
  background-image: url('images/drapeaux.webp');
  border-radius: 3px;
  box-shadow: 0 0 2px 0 #000;
}
.dp-fr { background-position: -216px -80px; }
.dp-gb { background-position: -270px -80px; }
.dp-it { background-position: -216px -120px; }
.dp-de { background-position: -189px -60px; }
.dp-nl { background-position: -351px -180px; }
.dp-es { background-position: -54px -80px; }

.panierbadge {
  position: absolute;
  display: inline-block;
  top: -14px;
  right: -9px;
  width: 26px;
  height: 26px;
  line-height: 26px;
  font-size: 0.75rem;
  font-weight: bold;
  text-align: center;
  border-radius: 50%;
  background-color: rgb(237, 113, 13);
  visibility: visible;
  box-shadow: 0 0 3px 1px #FFF;
}

/* ============================================================
   NAVIGATION (onglets suspendus)
   ============================================================ */
.site-nav { background: transparent; position: relative; z-index: 1; }
.site-nav__inner {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 0 12px;
  display: flex;
  gap: 0;
  align-items: stretch;
  justify-content: center;
}
.nav-tab {
  flex: 1 1 auto;
  position: relative;
  top: -5px;
  text-align: center;
  height: 45px;
  line-height: 45px;
  margin: 0 4px;
  padding: 0 14px;
  border-radius: 0 0 8px 8px;
  box-shadow: 0 0 5px 1px #666;
  font-family: 'Androgyne', var(--font-serif);
  font-style: normal;
  font-weight: normal;
  font-size: clamp(0.5rem, 0.6rem + 0.5vw, 1.25rem);
  color: var(--text-nav);
  text-decoration: none;
  white-space: nowrap;
  display: block;
  cursor: pointer;
  transition: top 0.25s;
}
.nav-tab.tab-creme  { background: var(--creme-light); }
.nav-tab.tab-orange { background: var(--creme-nav); }

/* ============================================================
   CONTENU PRINCIPAL
   ============================================================ */
.site-main {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 0 20px;
  min-height: 480px;
}

/* ============================================================
   BANNIERE HERO
   ============================================================ */
.hero-banner {
  margin-top: 18px;
  border-radius: 16px;
  overflow: hidden;
  aspect-ratio: 1920 / 451;
  background: #fff;
  position: relative;
}
.hero-banner__slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 1s ease-in-out;
}
.hero-banner__slide.active { opacity: 1; z-index: 1; }
.hero-banner__slide a { display: block; width: 100%; height: 100%; }
.hero-banner__slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.hero-banner__placeholder {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 8px;
  background-image: repeating-linear-gradient(45deg, rgba(255,255,255,0.03) 0, rgba(255,255,255,0.03) 12px, transparent 12px, transparent 24px);
}
.hero-banner__dots {
  position: absolute;
  bottom: 12px;
  left: 0;
  right: 0;
  display: flex;
  justify-content: center;
  gap: 8px;
  z-index: 2;
}
.hero-banner__dot {
  width: 26px;
  height: 4px;
  border-radius: 2px;
  background: rgba(255,255,255,0.4);
  cursor: pointer;
}
.hero-banner__dot--active { background: #fff; }

/* ============================================================
   TITRE DE SECTION
   ============================================================ */
.section-title {
  display: flex;
  align-items: center;
  gap: 18px;
  margin: 34px 0 22px;
}
.section-title__line {
  flex: 1;
  height: 2px;
  background: var(--clr);
}
.section-title > .section-title__line:first-child { margin-left: 7%; }
.section-title > .section-title__line:last-child  { margin-right: 7%; }
.section-title__text {
  margin: 0;
  font-weight: 700;
  font-size: 1.45rem;
  color: #565250;
  white-space: nowrap;
}

/* ============================================================
   GRILLE PRODUITS
   ============================================================ */
.products-grid {
  display: grid;
  gap: 18px;
}
.products-grid--4col { grid-template-columns: repeat(4, 1fr); }
.products-grid--3col { grid-template-columns: repeat(3, 1fr); }

/* Carte produit */
.product-card {
  background: #fff;
  border: none;
  border-radius: 8px;
  padding: 14px 14px 33px;
  display: flex;
  flex-direction: column;
  gap: 0;
  cursor: pointer;
  position: relative;
  height: 430px;
  min-width: 0;
  transition: color 0.2s;
  text-decoration: none;
  color: #ccc;
  box-shadow: 0 0 10px 0;
}

.product-card__img-wrap {
  width: 100%;
  max-width: 250px;
  aspect-ratio: 1 / 1;
  align-self: center;
  flex-shrink: 0;
  position: relative;
  background: #fff;
  border-radius: 3px;
  overflow: hidden;
  margin-bottom: 10px;
}
.product-card__img-wrap img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.product-card__new-badge {
  position: absolute;
  top: 10px;
  left: 10px;
  background: var(--clr);
  color: #fff;
  font-size: 0.9rem;
  font-weight: 700;
  padding: 0 10px;
  border-radius: 6px;
  z-index: 2;
  height: 30px;
  display: flex;
  align-items: center;
}
.product-card__promo {
  position: absolute;
  top: 10px;
  right: 10px;
  background: #f92336;
  color: #fff;
  font-size: 0.9rem;
  font-weight: 700;
  padding: 0 10px;
  border-radius: 6px;
  z-index: 2;
  opacity: 0.9;
  height: 30px;
  display: flex;
  align-items: center;
}

.product-card__name {
  height: 85px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-size: 0.9rem;
  font-weight: 700;
  color: #5d5d5d;
  line-height: 1.35;
  margin-bottom: 8px;
}

.product-card__bottom {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 14px;
}
.product-card__bottom--between {
  justify-content: space-between;
}

.product-card__price {
  font-family: 'Androgyne', sans-serif;
  font-weight: normal;
  font-size: 1.1rem;
  color: var(--clr);
}
.product-card__addcart {
  display: block;
  background: none;
  border: none;
  padding: 0;
  margin: 0;
  cursor: pointer;
  line-height: 0;
}
.product-card__addcart img { display: block; }
.product-card__old-price {
  font-family: 'Androgyne', sans-serif;
  font-weight: normal;
  font-size: 1.1rem;
  color: #a3a3a3;
  text-decoration: line-through;
}

.product-card__info {
  position: absolute;
  bottom: 8px;
  left: 14px;
  line-height: 0;
}

/* Popover information produit */
.popover-box {
  display: none;
  position: fixed;
  z-index: 9997;
  background: #fff;
  border: 1px solid #d2d2d2;
  border-radius: 8px;
  box-shadow: 0 4px 16px rgba(0,0,0,0.18);
  overflow: hidden;
  max-width: 460px;
  min-width: 220px;
  pointer-events: none;
}
.popover-box__title {
  font-weight: 700;
  font-size: 0.95rem;
  color: #333;
  line-height: 1.3;
  background: #f0f0f0;
  padding: 10px 14px;
  border-bottom: 1px solid #d2d2d2;
}
.popover-box__body {
  font-size: 0.85rem;
  color: #5d5d5d;
  line-height: 1.5;
  padding: 10px 14px;
  white-space: pre-wrap;
  word-break: break-word;
}

/* ============================================================
   SECTION PRECOMMANDES
   ============================================================ */
.preco-section {
  display: flex;
  align-items: center;
  background: var(--creme-light);
  border-radius: 16px;
  padding: 24px 28px;
  margin: 36px 0;
  gap: 28px;
  overflow: hidden;
}
.preco-left {
  flex: 0 0 190px;
  min-width: 160px;
}
.preco-left__icon {
  display: block;
  width: 48px;
  height: 48px;
  margin-bottom: 25px;
}
.preco-left__sub {
  font-family: 'Androgyne', sans-serif;
  font-weight: normal;
  color: #5d5d5d;
  font-size: 1.05rem;
}
.preco-sep {
  width: 1px;
  align-self: stretch;
  background: var(--clr);
  border-radius: 2px;
  flex-shrink: 0;
  margin: 0 4px;
}
.preco-left__title {
  font-family: 'Androgyne', sans-serif;
  font-weight: normal;
  font-size: 1.4rem;
  color: var(--clr);
  text-transform: uppercase;
  line-height: 1.15;
  margin-top: 4px;
}
.preco-carousel {
  flex: 1;
  position: relative;
  overflow: hidden;
}
.preco-track {
  display: flex;
  gap: 36px;
  transition: transform 0.4s ease;
  will-change: transform;
}
.preco-card {
  flex: 0 0 calc((100% - 72px) / 3);
  text-decoration: none;
}
.preco-card__img {
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: 20px;
  overflow: hidden;
  background: #e8e8e8;
  border: 1px solid #5d5d5d;
}
.preco-card__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.preco-card__lien {
  display: block;
  text-align: center;
  font-family: 'Androgyne', sans-serif;
  font-weight: normal;
  font-size: 0.9rem;
  color: #5d5d5d;
  margin-top: 8px;
}
.preco-card__arr {
  font-family: 'Androgyne', sans-serif;
  color: var(--clr);
  font-size: 1.1rem;
}
.preco-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: #fff;
  border: 1px solid #d2d2d2;
  border-radius: 50%;
  width: 32px;
  height: 32px;
  font-size: 1.2rem;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 2px 6px rgba(0,0,0,0.12);
  color: #5d5d5d;
  z-index: 2;
}
.preco-nav--prev { left: -14px; }
.preco-nav--next { right: -14px; }

/* Lien "Voir tout" */
.voir-tout {
  text-align: right;
  margin: 24px 0 36px;
  font-size: 1rem;
  font-family: 'Androgyne', sans-serif;
  font-weight: normal;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: #5d5d5d;
  text-transform: uppercase;
  cursor: pointer;
  text-decoration: none;
  display: block;
}
.voir-tout__arr { color: var(--clr); font-size: 1.5rem; }

/* ============================================================
   PAGE LISTING - FILTRES
   ============================================================ */
.listing-layout {
  display: flex;
  gap: 24px;
  align-items: flex-start;
  margin-bottom: 40px;
}
.listing-h2 {
  text-align: center;
  font-weight: 400;
  font-size: 1.65rem;
  color: #565250;
  margin: 30px 0 26px;
}
.listing-intro {
  margin: -10px 0 28px;
  color: var(--text-mid);
  font-size: 0.95rem;
  line-height: 1.7;
  text-align: center;
}
.listing-suivants {
  margin: 40px 0 0;
  text-align: center;
}
.listing-suivants a {
  color: var(--clr);
  font-weight: 700;
}
.listing-intro__btn {
  padding: 0;
  border: none;
  background: none;
  color: var(--clr);
  font-size: inherit;
  font-weight: 700;
}

.filters {
  flex: none;
  width: 310px;
  background: #f8ecd3;
  border: 1px solid var(--encart-border);
  border-radius: 6px;
  padding: 18px;
}
.filters__header {
  display: flex;
  align-items: center;
  gap: 12px;
  background: #f8d09d;
  border-bottom: 1px solid #e7741f;
  color: #5d5d5d;
  font-weight: 700;
  font-size: 1rem;
  line-height: 1.4;
  margin: -18px -18px 20px;
  padding: 14px 18px;
  border-radius: 6px 6px 0 0;
}
.filters__icon-box {
  width: 30px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.filters__header .filters__icon-box {
  margin-right: 10px;
}
.filters__icon-box img {
  max-width: none;
}
.filters__label {
  display: flex;
  align-items: center;
  gap: 7px;
  color: #7a6f60;
  font-size: 1rem;
  margin: 0 0 6px;
}
.filters__select {
  width: 100%;
  background: #fff;
  border: 1px solid #e3d3ad;
  border-radius: 4px;
  padding: 9px 11px;
  font-size: 1rem;
  color: var(--text-mid);
  margin-bottom: 16px;
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
}
.filters__toggle-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
}
.filters__toggle-row span { font-size: 1rem; color: var(--text-main); }
.filters__sep { border: none; border-top: 1px solid #d1c8b5; margin: 0 0 14px; }

.toggle {
  width: 28px;
  height: 15px;
  border-radius: 8px;
  background: #cfcfcf;
  position: relative;
  flex: none;
  cursor: pointer;
  border: none;
  padding: 0;
  transition: background 0.2s;
}
.toggle::after {
  content: '';
  position: absolute;
  top: 2px;
  left: 2px;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: #fff;
  transition: left 0.2s;
}
.toggle--on { background: var(--clr); }
.toggle--on::after { left: 15px; }

.filters__prix-labels {
  display: flex;
  justify-content: space-between;
  font-size: 0.8rem;
  color: #9a8c74;
  margin-bottom: 4px;
}
.filters__prix-inputs {
  display: flex;
  gap: 10px;
  margin-bottom: 12px;
}
.filters__prix-input {
  width: 50%;
  border: 1px solid #e3d3ad;
  border-radius: 4px;
  padding: 7px;
  font-size: 0.8rem;
  color: var(--text-main);
  text-align: center;
}
.filters__prix-input::-webkit-inner-spin-button,
.filters__prix-input::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.filters__prix-input { -moz-appearance: textfield; }
.filters__slider {
  position: relative;
  height: 4px;
  background: #e3d3ad;
  border-radius: 2px;
  margin: 14px 4px 22px;
}
.filters__slider-fill {
  position: absolute;
  left: 0;
  right: 0;
  height: 4px;
  background: var(--clr);
  border-radius: 2px;
}
.filters__slider-thumb {
  position: absolute;
  top: -5px;
  cursor: ew-resize;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #fff;
  border: 2px solid var(--clr);
}
.filters__slider-thumb--min { left: -7px; }
.filters__slider-thumb--max { left: calc(100% - 7px); }
.filters__btn {
  display: block;
  width: 100%;
  background: var(--clr);
  color: #fff;
  border: none;
  border-radius: 4px;
  padding: 9px 16px;
  font-size: 1rem;
  font-weight: 700;
  cursor: pointer;
  text-align: center;
}
.filters__produits-count { color: #5d5d5d; font-weight: 700; }

/* Custom select dropdown */
.custom-select {
  position: relative;
  width: 180px;
  margin-left: auto;
  margin-bottom: 16px;
}
.custom-select__trigger {
  display: flex;
  align-items: stretch;
  background: #fff;
  border: 1px solid #e3d3ad;
  border-radius: 8px;
  cursor: pointer;
  user-select: none;
  height: 38px;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.custom-select--open .custom-select__trigger {
  border-color: var(--clr);
  box-shadow: 0 0 8px 0 var(--clr);
}
.custom-select__label {
  flex: 1;
  padding: 0 10px;
  font-size: 0.8rem;
  color: var(--text-mid);
  display: flex;
  align-items: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}
.custom-select__arrow {
  width: 34px;
  flex-shrink: 0;
  background: #fff;
  border-left: 1px solid #e3d3ad;
  border-radius: 0 8px 8px 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.custom-select__arrow::after {
  content: '';
  display: block;
  width: 0;
  height: 0;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-top: 6px solid #e7741f;
  margin-top: 3px;
}
.custom-select--open .custom-select__arrow::after {
  border-top: none;
  border-bottom: 6px solid #e7741f;
  margin-top: -3px;
}
.custom-select__dropdown {
  display: none;
  position: absolute;
  top: calc(100% + 3px);
  left: 0;
  min-width: 220px;
  background: #fff;
  border: 1px solid #e3d3ad;
  border-radius: 8px;
  box-shadow: 0 6px 20px rgba(0,0,0,0.13);
  z-index: 200;
}
.custom-select--open .custom-select__dropdown { display: block; }
.custom-select__option {
  padding: 9px 14px;
  font-size: 0.8rem;
  color: var(--text-main);
  cursor: pointer;
  border-bottom: 1px solid #f5ede0;
  line-height: 1.3;
}
.custom-select__option:last-child { border-bottom: none; }
.custom-select__option--active { font-weight: 700; color: var(--clr); }

.listing-grid { flex: 1; }

/* ============================================================
   PAGE FICHE PRODUIT
   ============================================================ */
.fiche-h1 {
  font-weight: 400;
  font-size: 2rem;
  color: #5d5d5d;
  text-align: center;
  padding: 16px 0 14px;
  margin: 8px 0 20px;
}
.fiche-layout {
  display: flex;
  gap: 38px;
  align-items: flex-start;
}
.fiche-gallery {
  flex: 0 0 50%;
  max-width: 50%;
}
.fiche-img-main {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
  overflow: hidden;
}
.fiche-img-main img { width: auto; max-width: 100%; height: auto; display: block; }
.fiche-promo-badge {
  position: absolute;
  top: 10px;
  left: 0;
  background-color: #f92336;
  color: #fff;
  font-size: 1rem;
  font-weight: 700;
  opacity: .9;
  line-height: 30px;
  width: 155px;
  text-align: center;
  border-radius: 0.375rem;
  padding: 8px;
  z-index: 2;
}
.fiche-thumbs {
  display: flex;
  gap: 10px;
  margin-top: 12px;
}
.fiche-thumb {
  width: 70px;
  height: 70px;
  border: 1px solid #e0e0e0;
  border-radius: 4px;
  cursor: pointer;
  overflow: hidden;
}
.fiche-thumb img { width: 100%; height: 100%; object-fit: cover; }
.fiche-thumb--active { border-color: var(--clr); }

.fiche-right { flex: 1; }

.fiche-encart {
  background: var(--creme-light);
  border: 1px solid var(--encart-border);
  border-radius: 6px;
  padding: 18px 20px;
  display: flex;
  align-items: center;
  gap: 0;
  margin-top: 16px;
}
.fiche-encart__prix {
  flex: 0 0 30%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding-right: 16px;
  text-align: center;
}
.fiche-encart__actions {
  flex: 1;
  min-width: 0;
  padding-left: 18px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.fiche-prix {
  font-family: 'Androgyne', sans-serif;
  font-weight: normal;
  font-size: 1.8rem;
  color: var(--text-dark);
  line-height: 1.1;
}
.fiche-prix-ancien {
  font-size: .8rem;
  color: var(--text-light);
  text-decoration: line-through;
  margin-top: 2px;
}
.fiche-prix-promo {
  font-size: .85rem;
  font-weight: 700;
  color: var(--promo-red);
  margin-top: 2px;
}
.fiche-qty-row {
  display: flex;
  align-items: center;
  gap: 10px;
}
.fiche-qty-label {
  font-size: .85rem;
  color: var(--text-light);
  white-space: nowrap;
}
.fiche-qty {
  display: flex;
  align-items: center;
  gap: 6px;
  background: #fff;
  border: 1px solid #e3d3ad;
  border-radius: 4px;
  padding: 4px 8px;
}
.fiche-qty input {
  width: 34px;
  border: none;
  text-align: center;
  font-size: 1rem;
  color: var(--text-main);
  outline: none;
}
.fiche-qty__arrows {
  display: flex;
  flex-direction: column;
  gap: 2px;
  color: #9a8c74;
  font-size: 1rem;
  line-height: 1;
}
.fiche-qty__arrows button {
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  color: #9a8c74;
  line-height: 1;
}
.btn-orange {
  background: var(--clr);
  color: #fff;
  border: none;
  border-radius: 4px;
  padding: 10px 18px;
  font-size: 1rem;
  font-weight: 700;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.fiche-dispo {
  flex-basis: 100%;
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 1rem;
  color: var(--text-mid);
  margin-top: 4px;
}
.fiche-dispo__dot {
  width: 10px;
  height: 10px;
  background: var(--clr);
  display: inline-block;
  flex: none;
}

.fiche-desc-short {
  font-size: 1rem;
  line-height: 1.6;
  color: var(--text-mid);
  margin: 18px 0 6px;
}
.fiche-voir-tout {
  font-size: 1rem;
  font-weight: normal;
  color: var(--clr);
  cursor: pointer;
  margin-bottom: 18px;
}

.fiche-chips {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  margin: 32px 0 20px;
}
.fiche-chip {
  display: flex;
  align-items: center;
  gap: 7px;
  background: #f8ecd3;
  border-radius: 8px;
  padding: 0 12px;
  height: 40px;
  font-size: .95rem;
  color: var(--text-dark);
  white-space: nowrap;
}
.fiche-chip img {
  width: auto;
  height: auto;
  max-width: none;
  display: block;
}
.fiche-anchors {
  display: flex;
  gap: 26px;
  margin-top: 20px;
  font-size: 1rem;
  color: var(--clr);
  font-weight: 700;
}
.fiche-anchors a { color: var(--clr); }

.fiche-hr {
  border: none;
  border-top: 1px solid var(--card-border);
  margin: 34px 0 24px;
}
.fiche-desc-h3 {
  font-weight: 400;
  font-size: 1.5rem;
  color: var(--text-dark);
  margin: 0 0 14px;
}
.fiche-desc-body {
  font-size: 1rem;
  line-height: 1.7;
  color: var(--text-mid);
  margin: 0 0 16px;
  max-width: 1000px;
}

/* ============================================================
   PANIER - STEPPER
   ============================================================ */
.breadcrumb {
  font-size: 1rem;
  color: #8a8a8a;
  margin: 18px 0 22px;
}
.breadcrumb a { cursor: pointer; color: #8a8a8a; }
.breadcrumb__sep { margin: 0 6px; }
.breadcrumb__current { color: var(--text-main); }

.stepper {
  display: flex;
  align-items: flex-start;
  max-width: 760px;
  margin: 0 auto 36px;
}
.stepper__step {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  flex: none;
  width: 90px;
}
.stepper__circle {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: #d6d6d6;
  color: #5d5d5d;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Androgyne', sans-serif;
  font-weight: normal;
  font-size: 1rem;
}
.stepper__circle--active { background: var(--clr); color: #fff; }
.stepper__circle--done { background: var(--clr); color: #fff; font-style: normal; font-weight: bold; }
.stepper__label {
  font-family: 'Androgyne', sans-serif;
  font-weight: normal;
  font-size: 1rem;
  color: #5d5d5d;
  text-align: center;
}
.stepper__label--active { color: var(--text-main); }
.stepper__label a { color: inherit; text-decoration: none; }
.stepper__line {
  flex: 1;
  height: 6px;
  background: #d6d6d6;
  /* colonne d'etape 90px, bulle 34px : 28px de vide de chaque cote, on veut 6px entre bulle et ligne */
  margin: 14px -22px 0;
}
.stepper__line--done { background: var(--clr); }

/* Cart layout */
.cart-layout {
  display: flex;
  gap: 30px;
  align-items: flex-start;
  margin-bottom: 40px;
}
.cart-layout--panier { gap: 36px; }
.cart-items { flex: 1; min-width: 0; }
.cart-items__header {
  text-align: right;
  font-size: .85rem;
  line-height: 1.2;
  color: #5d5d5d;
  padding: 1px 0 3px;
  margin: 0;
  border-bottom: 1px solid #d6d6d6;
}
.cart-item {
  display: flex;
  align-items: flex-start;
  padding: 16px 0;
}
.cart-item + .cart-item { border-top: 1px solid #d6d6d6; }
.cart-item__img {
  flex: none;
  width: 100px;
  height: 100px;
  margin-right: 68px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.cart-item__img img {
  display: block;
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
}
.cart-item__info { flex: 1; min-width: 0; padding-top: 2px; }
.cart-item__name {
  font-weight: 700;
  font-size: 1rem;
  line-height: 1.2;
  color: #5d5d5d;
}
.cart-item__name a,
.cart-item__unit {
  font-size: .9rem;
  color: #a3a3a3;
  margin-top: 5px;
}
.cart-item__old-price {
  margin-left: 8px;
  text-decoration: line-through;
}
.cart-item__side {
  flex: none;
  width: 143px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 13px;
}
.cart-item__qty {
  display: flex;
  align-items: center;
  gap: 3px;
}
.qty-btn {
  width: 20px;
  height: 20px;
  padding: 0;
  border: none;
  background: none;
  cursor: pointer;
  display: block;
}
.qty-btn img { display: block; width: 20px; height: 20px; }
.qty-input {
  box-sizing: border-box;
  width: 60px;
  height: 25px;
  padding: 0;
  text-align: center;
  border: 1px solid #cfd4da;
  border-radius: 4px;
  background: #fff;
  font-family: inherit;
  font-size: 1rem;
  color: #212529;
}
.cart-item__line-price {
  font-weight: 700;
  font-size: 1rem;
  line-height: 1.2;
  color: #5d5d5d;
}
.cart-item__remove {
  display: block;
  padding: 0;
  border: none;
  background: none;
  line-height: 0;
  cursor: pointer;
}
.cart-item__remove img { display: block; width: 22px; height: 25px; }

/* Encart resume commande */
.order-summary {
  flex: none;
  width: 300px;
  background: var(--encart-bg);
  border: 1px solid var(--encart-border);
  border-radius: 6px;
  padding: 22px;
}
.order-summary__line {
  font-size: 1.15rem;
  color: var(--text-main);
  margin-bottom: 10px;
}
.order-summary__note {
  font-size: 1rem;
  color: #9a8c74;
  line-height: 1.5;
  margin: 8px 0 18px;
}
.order-summary__total {
  font-size: 1.25rem;
  color: var(--text-main);
  margin-bottom: 18px;
}
.order-summary__total strong { color: var(--clr); font-weight: 700; }
.btn-commander {
  width: 100%;
  background: var(--clr);
  color: #fff;
  border: none;
  border-radius: 5px;
  padding: 13px;
  font-weight: 700;
  font-size: 1.15rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  text-decoration: none;
}

/* Panier vide */
.cart-empty {
  display: flex;
  align-items: center;
  margin-bottom: 40px;
}
.cart-empty__img {
  flex: none;
  width: 283px;
  display: flex;
  justify-content: flex-end;
  align-self: flex-start;
  margin-top: 13px;
}
.cart-empty__img img { display: block; width: 125px; height: auto; }
.cart-empty__msg {
  flex: 1;
  align-self: flex-start;
  margin-top: 26px;
  text-align: center;
}
.cart-empty__msg p {
  font-family: 'Androgyne', sans-serif;
  font-weight: normal;
  font-size: 1.4rem;
  line-height: 1.2;
  color: #9b9b9b;
  margin: 0 0 24px;
}
.cart-empty__msg p + p { margin-bottom: 28px; }
.cart-empty__btn {
  display: inline-block;
  background: #e7741f;
  color: #fff;
  font-family: 'Androgyne', sans-serif;
  font-weight: normal;
  font-size: 1.2rem;
  line-height: 23px;
  padding: 6px 12px;
  border-radius: 4px;
  text-decoration: none;
}
.order-summary--empty,
.order-summary--cart {
  background: #f8ecd3;
  border: none;
  border-radius: 8px;
  padding: 22px 22px 20px;
  text-align: center;
  font-family: 'Androgyne', sans-serif;
}
.order-summary--cart { padding-bottom: 40px; }
.order-summary--empty .order-summary__line,
.order-summary--cart .order-summary__line {
  line-height: 1.25;
  color: #5d5d5d;
}
.order-summary--empty .order-summary__line + .order-summary__line,
.order-summary--cart .order-summary__line + .order-summary__line { margin-bottom: 6px; }
.order-summary--empty .order-summary__note,
.order-summary--cart .order-summary__note {
  font-size: .8rem;
  line-height: 1.5;
  color: #5d5d5d;
  margin: 0 0 20px;
}
.order-summary--empty .order-summary__total,
.order-summary--cart .order-summary__total {
  font-size: 1.4rem;
  line-height: 1.2;
  color: #5d5d5d;
  margin: 0;
}
.order-summary--empty .order-summary__total strong,
.order-summary--cart .order-summary__total strong {
  color: #e7741f;
  font-weight: normal;
}
.order-summary--cart .btn-commander {
  width: 215px;
  height: 55px;
  margin: 28px auto 0;
  padding: 0 0 0 20px;
  justify-content: flex-start;
  border-radius: 8px;
  background: #e7741f;
  color: #fff;
  font-family: 'Androgyne', sans-serif;
  font-weight: normal;
  font-size: 1.2rem;
  gap: 13px;
}
.order-summary--cart .btn-commander img { display: block; width: 31px; height: 25px; }

/* ============================================================
   VALIDATION / CONFIRMATION DE COMMANDE
   ============================================================ */
.val-msg {
  padding: 18px 24px;
  border-radius: 6px;
  margin: 20px 0 28px;
  font-size: 1.1rem;
  line-height: 1.5;
}
.val-msg--ok {
  background: #f0f9f0;
  border: 2px solid #4caf50;
  color: #2e7d32;
}
.val-msg--err {
  background: #fff3f3;
  border: 2px solid #e53935;
  color: #b71c1c;
}
.val-table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 18px;
  border-top: 1px solid #d6d6d6;
}
.val-td {
  padding: 14px 12px;
  border-bottom: 1px solid #d6d6d6;
  vertical-align: middle;
  font-size: .95rem;
}
.val-td--img {
  width: 100px;
  padding-left: 0;
  padding-right: 68px;
}
.val-td--img img {
  display: block;
  max-width: 100px;
  max-height: 100px;
  width: auto;
  height: auto;
}
.val-td--prod { font-size: 1rem; color: var(--text-main); }
.val-td--prod a,
.val-td--img a { color: inherit; text-decoration: none; }
.val-td--qty,
.val-td--total {
  text-align: right;
  white-space: nowrap;
  font-weight: 700;
  color: var(--text-main);
}
.val-td--qty { padding-right: 40px; }
.val-prix-unit {
  font-size: .82rem;
  color: #888;
  margin-top: 3px;
  font-weight: 400;
}
.val-prix-old {
  margin-left: 6px;
  text-decoration: line-through;
}
.val-rib {
  background: #f8ecd3;
  border-radius: 6px;
  padding: 18px 24px;
  margin: 0 0 28px;
}
.val-rib__title {
  font-family: 'Androgyne', sans-serif;
  font-size: 1.2rem;
  color: var(--text-main);
  margin-bottom: 8px;
}
.val-rib p { font-size: .9rem; color: #5d5d5d; margin: 0 0 14px; }
.val-rib__table { border-collapse: collapse; }
.val-rib__table td {
  padding: 4px 12px 4px 0;
  font-size: .9rem;
  color: var(--text-main);
}
.val-rib__table td:first-child { color: #888; white-space: nowrap; }
.val-rib__table td:last-child { font-weight: 700; }
.order-summary__line--remise { color: #c62828; }
.order-summary__line--info   { color: #555; font-size: .8rem; margin-bottom: 0; }
.order-summary__info-block   { margin: 16px 0; }

.val-tel-overlay {
  display: none;
  position: fixed; inset: 0;
  background: rgba(0,0,0,.48);
  z-index: 900;
  align-items: center; justify-content: center;
  padding: 20px;
  box-sizing: border-box;
}
.val-tel-overlay.open { display: flex; }
.val-tel-modal {
  background: #fff; border-radius: 10px;
  width: 420px; max-width: calc(100vw - 24px);
  box-shadow: 0 10px 40px rgba(0,0,0,.28);
  padding: 26px 24px 24px;
  position: relative;
}
.val-tel-modal__close {
  position: absolute; top: 12px; right: 14px;
  background: none; border: none; font-size: 1.1rem;
  cursor: pointer; color: #aaa; padding: 2px 6px; line-height: 1;
}
.val-tel-modal h3 {
  margin: 0 0 10px;
  font-family: 'Androgyne', sans-serif;
  font-size: 1.2rem;
  color: var(--text-main);
}
.val-tel-modal p { font-size: .9rem; color: #5d5d5d; margin: 0 0 16px; }
.val-tel-modal input[type=tel] {
  width: 100%; padding: 10px 12px; border: 1px solid #ccc; border-radius: 5px;
  font-size: 1rem; box-sizing: border-box; margin-bottom: 14px;
}
.val-tel-modal__msg { font-size: .85rem; margin-bottom: 10px; }
.val-tel-modal__msg--err { color: #b71c1c; }

@media (max-width: 900px) {
  .cart-empty { flex-direction: column; gap: 24px; }
  .cart-empty__img { width: auto; margin-top: 0; align-self: center; justify-content: center; }
  .order-summary--empty,
  .order-summary--cart { width: 100%; }
  .cart-layout--panier { flex-direction: column; }
  .cart-item { flex-wrap: wrap; gap: 12px; }
  .cart-item__img { margin-right: 0; }
  .cart-item__side { width: 100%; flex-direction: row; justify-content: space-between; }
}

/* ============================================================
   LIVRAISON - ADRESSES & TRANSPORTEURS
   ============================================================ */
.liv-title {
  display: flex;
  align-items: center;
  gap: 14px;
  height: 25px;
  margin-bottom: 24px;
  font-size: 1rem;
  color: #5d5d5d;
}
.liv-title img { display: block; flex: none; }
.liv-title span { position: relative; top: -.5px; }
.liv-cards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 300px));
  gap: 28px;
  padding-left: 2px;
  margin-bottom: 24px;
}
.liv-cards--last { margin-bottom: 0; }
.liv-card {
  position: relative;
  box-sizing: border-box;
  background: #fff;
  border: 3px solid transparent;
  border-radius: 8px;
  box-shadow: 0 0 8px rgba(0,0,0,.19);
  text-align: center;
  cursor: pointer;
}
.liv-card[hidden] { display: none; }
.liv-card--selected { border-color: #e7741f; box-shadow: none; }
.liv-card__check {
  display: none;
  position: absolute;
  left: -13px;
  top: -16px;
  width: 30px;
  height: 30px;
  box-sizing: border-box;
  border: 3px solid #e7741f;
  border-radius: 50%;
  background: #fff;
  color: #e7741f;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  font-weight: bold;
  line-height: 1;
}
.liv-card--selected .liv-card__check { display: flex; }

/* Carte adresse */
.liv-adr {
  height: 230px;
  padding: 16px 12px 4px;
  display: flex;
  flex-direction: column;
}
.liv-adr__title {
  font-family: 'Androgyne', sans-serif;
  font-weight: normal;
  font-size: 1rem;
  line-height: 24px;
  color: #5d5d5d;
  margin-bottom: 8px;
}
.liv-adr__body {
  font-size: 1rem;
  line-height: 24px;
  color: #5d5d5d;
}
.liv-adr__actions {
  margin-top: auto;
  font-size: 1rem;
  line-height: 24px;
  color: #e7741f;
}
.liv-adr__actions form { display: inline; margin: 0; }
.liv-link {
  display: inline;
  padding: 0;
  border: none;
  background: none;
  font: inherit;
  color: #e7741f;
  cursor: pointer;
}
.liv-add {
  height: 230px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.liv-add img { display: block; width: 70px; height: 70px; }

/* Carte transporteur */
.liv-carrier {
  height: 195px;
  padding: 12px 4px 0;
}
.liv-carrier__img { display: block; width: 200px; height: 100px; margin: 0 auto 1px; }
.liv-card--retrait .liv-carrier__img { margin-bottom: 3.5px; }
.liv-card--retrait .liv-carrier__prix { margin-top: 10.5px; }
.liv-carrier__desc {
  font-size: .9rem;
  line-height: 21px;
  color: #5d5d5d;
}
.liv-carrier__prix {
  font-family: 'Androgyne', sans-serif;
  font-weight: normal;
  font-size: 1rem;
  line-height: 24px;
  color: #5d5d5d;
  margin-top: 9px;
}
@media (max-width: 1100px) {
  .liv-cards { grid-template-columns: repeat(auto-fill, minmax(260px, 300px)); }
}

/* Carte moyen de paiement */
.liv-pay {
  height: 180px;
  padding: 20px 12px 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
}
.liv-pay__img { display: block; max-width: 130px; max-height: 100px; width: auto; height: auto; margin: 0 auto 14px; }
.liv-pay__label {
  font-size: 1rem;
  line-height: 24px;
  color: #5d5d5d;
}

/* ============================================================
   FACTURATION - COUPON DE REDUCTION
   ============================================================ */
.coupon-row {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin: 0 0 6px;
}
.coupon-input {
  flex: none;
  width: 150px;
  height: 25px;
  box-sizing: border-box;
  appearance: none;
  padding: .375rem .75rem;
  line-height: 1.5;
  color: rgb(33, 37, 41);
  background-color: rgb(255, 255, 255);
  background-clip: padding-box;
  border-width: 1px;
  border-style: solid;
  border-color: rgb(206, 212, 218);
  border-image: none;
  border-radius: .375rem;
  font-family: 'Androgyne', sans-serif;
  font-weight: normal;
  font-size: .8rem;
  outline: none;
  box-shadow: 0 0 8px 0 #ccc;
}
.coupon-input::placeholder { color: #8a8a8a; }
.coupon-input:focus { border-color: var(--clr); box-shadow: 0 0 8px 0 var(--clr); }
.coupon-btn {
  flex: none;
  width: 25px;
  height: 25px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: 5px;
  background: #e7741f;
  color: #fff;
  font-family: 'Androgyne', sans-serif;
  font-size: 1.2rem;
  line-height: 1;
  font-weight: normal;
  cursor: pointer;
}
.coupon-msg {
  font-family: Verdana, sans-serif;
  font-size: .75rem;
  line-height: 1.4;
  text-align: center;
  min-height: 1px;
  margin-bottom: 6px;
}
.coupon-msg--err { color: #c0392b; }
.coupon-msg--ok { color: #2e7d32; }
.coupon-applied {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin: 0 0 12px;
}
.coupon-applied__text {
  font-family: 'Androgyne', sans-serif;
  font-weight: normal;
  font-size: .9rem;
  color: #5d5d5d;
}
.coupon-remove {
  flex: none;
  width: 14px;
  height: 14px;
  padding: 0;
  border: none;
  background: none;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.coupon-remove img {
  display: block;
  width: 14px;
  height: 14px;
  transform: rotate(45deg);
}

/* ============================================================
   FOOTER
   ============================================================ */
.site-footer { margin-top: 30px; }
.footer-main {
  background: linear-gradient(180deg, #e7e7e7 0%, #d3d3d3 100%);
  border-top: 3px solid var(--clr);
  border-bottom: 3px solid var(--clr);
}
.footer-main__inner {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 30px 20px;
}
.footer-badges {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  text-align: center;
}
.footer-badge__img {
  display: block;
  margin: 0 auto;
}
.footer-col__icon {
  flex-shrink: 0;
}
.footer-badge__title {
  font-weight: 700;
  color: #5f5f5f;
  font-size: 1rem;
  margin-top: 6px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.footer-badge__sub {
  font-weight: 700;
  color: var(--clr);
  font-size: 1rem;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.footer-sep {
  height: 1px;
  background: #bdbdbd;
  margin: 28px 0;
}
.footer-cols {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
.footer-col { text-align: center; }
.footer-col__wrap {
  display: inline-flex;
  flex-direction: column;
}
.footer-col__title {
  display: inline-flex;
  align-items: center;
  gap: 18px;
  font-weight: 700;
  color: #5f5f5f;
  font-size: 1rem;
}
.footer-col__title-text {
  border-bottom: 3px solid var(--clr);
  padding-bottom: 4px;
  white-space: nowrap;
}
.footer-col__list-wrap {
  display: inline-flex;
  padding-top: 12px;
  padding-left: 20px;
}
.footer-col__list {
  list-style: none;
  padding: 0;
  margin: 0;
  text-align: left;
}
.footer-col__list li {
  position: relative;
  padding-left: 22px;
  margin-bottom: 6px;
  line-height: 35px;
}
.footer-col__list li::before {
  content: '\2022';
  color: var(--clr);
  position: absolute;
  left: 0;
  font-size: 1.1rem;
  top: 8px;
  line-height: 1;
}
.footer-col__list a {
  font-size: 1rem;
  color: var(--text-mid);
  text-decoration: none;
}

.footer-legal {
  background: #fff;
  padding: 22px 20px;
  text-align: center;
}
.footer-legal__links {
  font-size: 1rem;
  color: #7a7a7a;
  margin-bottom: 10px;
}
.footer-legal__links a {
  color: #7a7a7a;
  text-decoration: none;
}
.footer-legal__sep { margin: 0 10px; }
.footer-legal__copy { font-size: 1rem; color: #9a9a9a; }
.footer-legal__copy a { color: inherit; text-decoration: none; }

/* ============================================================
   PAGES GENERIQUES (legal, contact, compte)
   ============================================================ */
.breadcrumb {
  font-size: 0.9rem;
  color: #5d5d5d;
  margin-bottom: 20px;
}
.breadcrumb a {
  color: #5d5d5d;
  text-decoration: none;
}
.breadcrumb__sep {
  font-family: 'Androgyne', sans-serif;
  font-weight: normal;
  color: var(--clr);
  font-size: 1.3rem;
  margin: 0 6px;
  vertical-align: middle;
  position: relative;
  top: -3px;
}
.page-content {
  max-width: 900px;
  margin: 30px auto;
  padding: 0 20px;
}
.page-content--wide {
  max-width: 1200px;
}
.page-content h1 {
  font-weight: 400;
  font-size: 1.75rem;
  color: var(--clr);
  border-bottom: 1px solid #ecd6a8;
  padding-bottom: 14px;
  margin-bottom: 24px;
}
.page-content h2 {
  font-size: 1.25rem;
  color: var(--clr);
  margin: 26px 0 12px;
}
.page-content p { line-height: 1.7; margin-bottom: 14px; }
.page-content ul { margin: 0 0 14px 24px; list-style: none; padding-left: 16px; }
.page-content li { line-height: 1.7; margin-bottom: 8px; position: relative; padding-left: 14px; }
.page-content li::before { content: '-'; position: absolute; left: 0; }
.page-content p + p { margin-top: 0; }

/* Contact page */
.contact-cols {
  display: flex;
  gap: 32px;
  align-items: flex-start;
  flex-wrap: wrap;
}
.contact-col-main {
  flex: 1 1 320px;
}
.contact-col-main h2 { margin-top: 0; }
.contact-col-side {
  flex: 0 1 520px;
  min-width: 320px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.contact-box {
  background: var(--encart-bg);
  border-radius: 6px;
  padding: 20px 22px;
}
.contact-box h2 {
  margin-top: 0;
  font-size: 1.15rem;
}
.contact-box address { font-style: normal; }
.contact-tel {
  font-size: 1.3rem;
  font-weight: 700;
  color: var(--clr);
  margin-bottom: 6px !important;
}
.contact-map {
  margin: 14px 0;
  border-radius: 4px;
  overflow: hidden;
}
@media (max-width: 640px) {
  .contact-cols { flex-direction: column; }
  .contact-col-side { flex: 1 1 auto; }
}

/* Table frais de port */
.fp-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.95rem;
  margin-top: 18px;
}
.fp-table th,
.fp-table td {
  padding: 10px 16px;
  border: 1px solid #e0e0e0;
  text-align: left;
}
.fp-table thead th {
  background: var(--clr);
  color: #fff;
  font-family: 'Androgyne', sans-serif;
  font-weight: normal;
  white-space: nowrap;
}
.fp-table thead th:first-child {
  background: #5d5d5d;
}
.fp-table tbody tr:nth-child(odd) td {
  background: #fafafa;
}
.fp-table th:not(:first-child),
.fp-table td:not(:first-child) {
  text-align: center;
}

/* Section carte Qui sommes-nous */
.qui-map {
  display: flex;
  gap: 20px;
  margin-top: 30px;
  align-items: stretch;
}
.qui-map__iframe {
  flex: 3;
  min-width: 0;
}
.qui-map__iframe iframe {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 400px;
  border: 0;
}
.qui-map__addr {
  flex: 1;
  background: #f9efd7;
  color: var(--text-dark);
  border-radius: 8px;
  padding: 20px;
  min-width: 200px;
}
.qui-map__addr a {
  color: var(--text-dark);
  text-decoration: underline;
}
.qui-map__addr address {
  font-style: normal;
  margin-bottom: 16px;
  line-height: 1.7;
}
.qui-map__addr-name {
  font-weight: 700;
}
.qui-map__hours-label {
  font-weight: 700;
  margin-top: 14px;
}
.qui-map__hours {
  line-height: 1.7;
}
.qui-map__domtom {
  font-size: 0.85rem;
  margin-top: 14px;
  opacity: 0.9;
}
@media (max-width: 700px) {
  .qui-map { flex-direction: column; }
  .qui-map__iframe iframe { min-height: 280px; }
}

/* ============================================================
   UTILITAIRES
   ============================================================ */
.text-orange { color: var(--clr); }
.text-center { text-align: center; }
.mt-20 { margin-top: 20px; }
.mb-20 { margin-bottom: 20px; }
.hidden { display: none !important; }



/* ============================================================
   Fiche produit - elements speciaux
   ============================================================ */

/* Ancre invisible avec offset header */
.anchor { display:block; visibility:hidden; position:relative; top:-130px; }


/* Box quantite */
.prd_add_qty_box { display:inline-flex; align-items:stretch; border:1px solid #ccc; border-radius:6px; overflow:hidden; }
.prd_add_qty { width:46px; border:none; text-align:center; font-size:1rem; padding:6px 2px; outline:none; background:#fff; -moz-appearance:textfield; }
.prd_add_qty::-webkit-inner-spin-button,.prd_add_qty::-webkit-outer-spin-button { -webkit-appearance:none; }
.prd_add_qty_plus,.prd_add_qty_moins { width:30px; background:#f0f0f0; display:flex; align-items:center; justify-content:center; cursor:pointer; font-size:1.1rem; user-select:none; padding:0 6px; }

/* Cartouche ajout au panier */
.fiche-addcart-box { background:#fcf6e9; border-radius:6px; padding:12px 16px; display:flex; flex-direction:column; gap:10px; }
.fiche-addcart-row { display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.fiche-qty-wrap { display:flex; align-items:center; }
.fiche-qty-input { width:70px; height:40px; border:1px solid #ccc; border-radius:4px; text-align:center; font-size:1rem; padding:0; outline:none; background:#fff; -moz-appearance:textfield; box-sizing:border-box; }
.fiche-qty-input::-webkit-inner-spin-button,.fiche-qty-input::-webkit-outer-spin-button { -webkit-appearance:none; }
.fiche-qty-icons { display:flex; flex-direction:column; margin-left:4px; gap:4px; }
.fiche-qty-icon-btn { background:none; border:none; padding:0 6px; cursor:pointer; display:flex; line-height:0; }
.fiche-qty-icon-btn img { width:18px; height:18px; display:block; }

/* Bouton ajouter au panier */
.prdbtn { display:inline-flex; align-items:center; gap:8px; padding:10px 20px; border-radius:6px; cursor:pointer; font-weight:700; font-size:.95rem; background-color:var(--color-univer,#ED710D); color:#fff; border:none; }
.prdbtn--disabled { background-color:#9a9a9a !important; cursor:default; }

/* Statut stock */
.prdstock { list-style:none; padding:0; margin:10px 0 0; }
.prdstock-item { display:flex; align-items:center; gap:6px; font-size:1rem; color:var(--text-dark); font-weight:normal; padding-left:15px; }
.prdstock-item::before { content:''; display:inline-block; width:11px; height:11px; border-radius:2px; background:var(--color-stock,#38a169); flex-shrink:0; }

/* Cartes carousel produits similaires */
.boxproduit { border:1px solid #e6e6e6; border-radius:.5rem; overflow:hidden; transition:box-shadow .2s,border-color .2s; background:#fff; }
.boxproduitdimg { height:150px; display:flex; align-items:center; justify-content:center; overflow:hidden; padding:8px; background:#fafafa; }
.boxproduitimg { max-width:100%; max-height:150px; object-fit:contain; transition:transform .2s; }
.boxproduittxt { font-size:.82rem; line-height:1.3; overflow:hidden; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; min-height:2.1em; color:var(--color-univer,#ED710D); }
.color01 { color:#ED710D !important; }
.boxproduitpri { font-size:.95rem; font-weight:700; color:#5d5d5d; padding:2px 12px 6px; }
.panierp { padding:6px 12px 10px; border-top:1px solid #f0f0f0; display:flex; justify-content:flex-end; }

/* Vignettes images multi fiche */
.fiche-thumbs-multi { display:flex; gap:8px; flex-wrap:wrap; margin-top:10px; justify-content:center; }
.fiche-thumb-multi {
  width:110px;
  height:110px;
  padding:.25rem;
  background-color:#fff;
  border:1px solid var(--bs-border-color);
  border-radius:.375rem;
  max-width:100%;
  cursor:pointer;
  overflow:hidden;
  display:flex;
  align-items:center;
  justify-content:center;
  flex-shrink:0;
}
.fiche-thumb-multi img { width:auto; max-width:100%; height:auto; max-height:100%; display:block; }

/* Table caracteristiques fiche */
.fiche-table { width:100%; border-collapse:collapse; font-size:1rem; font-family:Verdana, Arial, sans-serif; }
.fiche-table tr { border-bottom:1px solid #f0ecdf; }
.fiche-table tr:nth-child(odd) { background:#faf7f2; }
.fiche-table th { width:40%; padding:.55rem .75rem; font-weight:normal; color:var(--text-dark); text-align:left; vertical-align:top; }
.fiche-table td { padding:.55rem .75rem; color:var(--text-main); }
.fiche-langue { display:inline-flex; align-items:center; gap:6px; margin:2px 14px 2px 0; }
.fiche-langue .dp { width:22px; height:16px; background-size:352px 256px; }

/* Carousel produits similaires (sans Bootstrap) */
.fiche-car { position:relative; margin-top:26px; margin-bottom:20px; }
.fiche-car__track { overflow:hidden; }
.fiche-car__strip { display:flex; width:100%; will-change:transform; }
.fiche-car__grid { flex:0 0 100%; box-sizing:border-box; padding:15px; grid-template-columns:repeat(4,1fr); gap:14px; display:grid; }
.fiche-car__btn {
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  background:#fff;
  border:1px solid #ddd;
  border-radius:50%;
  width:36px;
  height:36px;
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  color:var(--clr);
  font-size:1.1rem;
  z-index:2;
  line-height:1;
  padding:0;
}
.fiche-car__btn--prev { left:-18px; }
.fiche-car__btn--next { right:-18px; }

/* Modal zoom image (sans Bootstrap) */
.fiche-zoom-backdrop {
  display:none;
  position:fixed;
  inset:0;
  background:rgba(0,0,0,.65);
  z-index:1055;
  align-items:center;
  justify-content:center;
}
.fiche-zoom-backdrop.open { display:flex; }
.fiche-zoom-box {
  background:#fff;
  border-radius:8px;
  max-width:840px;
  width:92%;
  position:relative;
  padding:1.5rem;
  text-align:center;
}
.fiche-zoom-close {
  position:absolute;
  top:.6rem;
  right:.8rem;
  z-index:2;
  width:2rem;
  height:2rem;
  display:flex;
  align-items:center;
  justify-content:center;
  background:none;
  border:none;
  color:var(--text-light);
  cursor:pointer;
  padding:0;
}
.fiche-zoom-track { overflow:hidden; width:100%; }
.fiche-zoom-strip { display:flex; width:300%; }
.fzs-slot { flex:0 0 33.3333%; display:flex; align-items:center; justify-content:center; }
.fzs-slot img { max-width:100%; max-height:72vh; object-fit:contain; display:block; }
.fiche-zoom-arrow {
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  background:rgba(255,255,255,.92);
  border:1px solid #ddd;
  border-radius:50%;
  width:40px;
  height:40px;
  font-size:1.4rem;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  z-index:5;
  line-height:1;
  padding:0;
  color:var(--text-dark);
}
.fiche-zoom-arrow--prev { left:.75rem; }
.fiche-zoom-arrow--next { right:.75rem; }

/* ============================================================
   PAGE SERIE (fiche famille)
   ============================================================ */
.fiche-serie-link {
  margin-left: 12px;
  font-size: 0.85rem;
  font-weight: 400;
  color: var(--clr);
  text-decoration: none;
}
.serie-top-grid {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: 40px;
  align-items: start;
  margin: 6px 0 18px;
}
.serie-top-left { min-width: 0; }
.serie-bio {
  color: var(--text-mid);
  line-height: 1.7;
  margin: 0 0 36px;
}
.serie-chiffre {
  display: flex;
  align-items: center;
  gap: 18px;
  margin: 0 0 10px;
  padding: 16px 20px;
  background: #fff;
  border: 1px solid #fcefd9;
  border-radius: 10px;
  color: var(--text-dark);
}
.serie-chiffre__icon {
  flex-shrink: 0;
  width: 96px;
  height: 96px;
  border-radius: 50%;
  background: #fcefd9;
  color: #c25a0c;
  display: flex;
  align-items: center;
  justify-content: center;
}
.serie-chiffre__text { line-height: 1.6; }
.serie-chiffre__text strong { color: var(--clr); }

.serie-top-right { display: flex; flex-direction: column; gap: 18px; }
.serie-infocard-outer {
  background: var(--encart-bg);
  border: 1px solid var(--encart-border);
  border-radius: 14px;
  padding: 20px;
}
.serie-count {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 8px 28px;
  margin-bottom: 18px;
}
.serie-count__item {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 4px 8px;
}
.serie-count__num {
  font-family: 'Androgyne', sans-serif;
  font-size: 1.4rem;
  color: var(--text-dark);
  line-height: 1;
}
.serie-count__label {
  color: var(--text-mid);
  font-size: 0.9rem;
}
.serie-infocard {
  background: #fff;
  border: 1px solid var(--card-border);
  border-radius: 10px;
  padding: 4px 20px;
}
.serie-infocard__row {
  display: flex;
  justify-content: flex-start;
  gap: 16px;
  padding: 12px 0;
  font-size: 0.9rem;
  color: var(--text-dark);
}
.serie-infocard__row + .serie-infocard__row { border-top: 1px solid var(--card-border); }
.serie-infocard__label { flex: 0 0 110px; color: var(--text-light); }
.serie-infocard a { color: var(--clr); text-decoration: underline; }
.serie-chips { margin: 0; justify-content: center; gap: 8px; }
.serie-chips .fiche-chip { gap: 5px; padding: 0 8px; font-size: 0.85rem; }
@media (max-width: 1024px) {
  .serie-top-grid { grid-template-columns: 1fr; }
}
.serie-archive-sub {
  color: var(--text-light);
  font-size: 0.9rem;
  margin: -8px 0 18px;
}
.serie-archive-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 14px;
}
.serie-archive-card {
  background: #fff;
  border: 1px solid var(--card-border);
  border-radius: 8px;
  padding: 10px;
  text-align: center;
  position: relative;
  display: block;
  text-decoration: none;
  color: inherit;
}
.serie-archive-card__img-wrap {
  width: 100%;
  aspect-ratio: 1 / 1;
  position: relative;
  margin-bottom: 8px;
  background: #fff;
}
.serie-archive-card__img-wrap img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.serie-archive-card__nom {
  font-size: 0.78rem;
  color: var(--text-mid);
  line-height: 1.3;
}
.serie-archive-card__badge {
  position: absolute;
  top: 6px;
  right: 6px;
  background: var(--text-light);
  color: #fff;
  font-size: 0.65rem;
  padding: 2px 6px;
  border-radius: 4px;
  text-transform: uppercase;
}
@media (max-width: 1024px) {
  .serie-archive-grid { grid-template-columns: repeat(3, 1fr); }
}

/* ============================================================
   PAGE 404
   ============================================================ */
.page-404 {
  max-width: 1100px;
  margin: 20px auto 40px;
  padding: 0 20px;
}
.page-404__visuel {
  position: relative;
  container-type: inline-size;
}
.page-404__visuel img {
  display: block;
  width: 100%;
  height: auto;
}
.page-404__texte {
  position: absolute;
  top: 38%;
  left: 62%;
  width: 26%;
  text-align: center;
}
.page-404__titre {
  margin: 0 0 1.6cqi;
  font-size: 4cqi;
  font-weight: 700;
  line-height: 1.1;
  color: #232733;
}
.page-404__sous-titre {
  margin: 0;
  font-size: clamp(13px, 1.5cqi, 19px);
  line-height: 1.35;
  color: #4b5060;
}
.page-404__sep {
  display: block;
  width: 8cqi;
  height: 2px;
  margin: 2.4cqi auto;
  background: var(--clr);
}
.page-404__info {
  margin: 0;
  font-size: clamp(12px, 1.1cqi, 15px);
  line-height: 1.5;
  color: #5d6270;
}
.page-404__btn {
  display: inline-block;
  margin-top: 2.4cqi;
  padding: 10px 18px;
  border-radius: 4px;
  background: var(--clr);
  color: #fff;
  font-size: 1rem;
  font-weight: 700;
  text-decoration: none;
}
@container (max-width: 700px) {
  .page-404__texte {
    position: static;
    width: auto;
    margin-top: 10px;
  }
  .page-404__titre { font-size: 2rem; margin-bottom: 10px; }
  .page-404__sep { width: 80px; margin: 16px auto; }
  .page-404__btn { margin-top: 18px; }
}