/* ============================================================
   Darelmed V2 — Master Stylesheet
   Contains:
     0. Fixed-header clearance
     1. Promo Slider
     2. Categories Hero Slider
     3. Section Vitrine + Product Card
   ============================================================ */


/* ============================================================
   0. FIXED-HEADER CLEARANCE
   The header is position:fixed (~100px tall). header.php sets
   body{padding-top:80px}, but WordPress' global-styles inline CSS
   (loaded after it) resets body{padding:0}, so the header ends up
   overlapping the first section on every page. This stylesheet loads
   after global-styles, so re-declaring the top padding here wins and
   leaves a clear gap below the header.
   ============================================================ */
body { padding-top: 108px; }
@media (max-width: 768px) { body { padding-top: 92px; } }


/* ============================================================
   1. PROMO SLIDER
   ============================================================ */

.promo-slider-section {
    width: 100%;
    padding: 0 20px;
    box-sizing: border-box;
    max-width: 1240px;
    margin: 0 auto 40px;
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.7s ease, transform 0.7s ease;
}

.promo-slider {
    position: relative;
    width: 100%;
    aspect-ratio: 1240 / 300;
    overflow: hidden;
    border-radius: 12px;
}

.promo-slide {
    position: absolute;
    inset: 0;
    opacity: 0;
    transition: opacity 0.6s ease;
    pointer-events: none;
    z-index: 0;
}

.promo-slide.active {
    opacity: 1;
    pointer-events: auto;
    z-index: 1;
}

.promo-slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.promo-slider-dots {
    position: absolute;
    bottom: 12px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 8px;
    z-index: 10;
}

.promo-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    border: none;
    background: rgba(255,255,255,0.5);
    cursor: pointer;
    transition: background 0.3s;
    padding: 0;
}

.promo-dot.active {
    background: #fff;
}


/* ============================================================
   1b. OFFRE SPÉCIALE (special offer banner) — matches Figma
   ============================================================ */

.dm-offre-section {
    width: 100%;
    max-width: 1240px;
    margin: 0 auto 40px;
    padding: 0 20px;
    box-sizing: border-box;
    opacity: 0;
    transform: translateY(20px);
    transition: opacity .7s ease, transform .7s ease;
}
.dm-offre-section.is-visible { opacity: 1; transform: translateY(0); }

/* Simple auto-rotating image banner: pre-designed images fade, one button each.
   The banner shape is hardcoded to the Figma frame (1240 × 303.5) so the height
   never depends on the uploaded image — slides stack and fade, cropped to fill. */
.dm-offre {
    position: relative;
    aspect-ratio: 1240 / 303.5;
    background: transparent;
    border-radius: 18px;
    overflow: hidden;
}
.dm-offre__slide {
    position: absolute;
    inset: 0;
    opacity: 0;
    visibility: hidden;
    transition: opacity .6s ease;
}
.dm-offre__slide.is-active { opacity: 1; visibility: visible; }
.dm-offre__img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Whole-banner click target: covers the slide, sits under the button + dots */
.dm-offre__link {
    position: absolute;
    inset: 0;
    z-index: 2;
    display: block;
    text-decoration: none;
}

.dm-offre__btn {
    position: absolute;
    left: clamp(18px, 4%, 56px);
    bottom: clamp(16px, 8%, 44px);
    z-index: 3;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 15px 28px;
    background: #EC2227;
    color: #fff;
    font-family: 'Zalando Sans Expanded', sans-serif;
    font-weight: 600;
    font-size: 14px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    text-decoration: none;
    border-radius: 15px;
    transition: background .2s ease, transform .2s ease;
}
.dm-offre__btn:hover { background: #cf1d22; }
.dm-offre__btn svg { transition: transform .2s ease; }
.dm-cta-arrow { flex-shrink: 0; }
.dm-offre__btn:hover svg { transform: translateX(4px); }

.dm-offre__dots {
    position: absolute;
    right: clamp(16px, 3%, 40px);
    bottom: clamp(14px, 6%, 34px);
    z-index: 4;
    display: flex;
    gap: 8px;
}
.dm-offre__dot {
    width: 10px;
    height: 10px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: rgba(255,255,255,.55);
    cursor: pointer;
    transition: background .2s ease, transform .2s ease;
}
.dm-offre__dot:hover { background: rgba(255,255,255,.8); }
.dm-offre__dot.is-active { background: #fff; transform: scale(1.25); }

/* Tablet: the button scales fluidly with the shrinking banner */
@media (max-width: 1024px) and (min-width: 641px) {
    .dm-offre__btn {
        font-size: clamp(10px, 1.5vw, 14px);
        padding: clamp(9px, 1.3vw, 15px) clamp(16px, 2.6vw, 28px);
        gap: clamp(6px, 0.9vw, 10px);
        letter-spacing: 0.05em;
    }
    .dm-offre__btn svg { width: clamp(16px, 2vw, 22px); height: auto; }
}

/* Mobile: no button overlaid on the banner */
@media (max-width: 640px) {
    .dm-offre__btn { display: none; }
}


/* ============================================================
   2. CATEGORIES HERO SLIDER
   ============================================================ */


.dmv2-hero-section {
  width: 100%;
  height: auto;
  display: flex;
  flex-direction: column;
  padding-top: 2rem;
  box-sizing: border-box;
  overflow: hidden;
}

.dmv2-slider-viewport {
  width: 100%;
  flex: 1;
  min-height: 0;
  overflow-x: scroll;
  overflow-y: hidden;
  scrollbar-width: none;
  -ms-overflow-style: none;
  display: flex;
  align-items: stretch;
}
.dmv2-slider-viewport::-webkit-scrollbar { display: none; }

.dmv2-slider-track {
  display: flex;
  gap: 16px;
  /* No padding-right: WebKit/Blink drop trailing padding from a horizontal
     flex scroller's scroll width, so it never shows at the end. The ::after
     spacer below reinstates a 40px right gap that IS counted while scrolling. */
  padding: 0 0 20px 40px;
  cursor: default;
  user-select: none;
  align-items: stretch;
  height: 100%;
  min-width: 100%;
}
/* Trailing spacer = 40px right gap. 24px + the 16px flex gap before it = 40px,
   matching the 40px padding-left so both sides clear the viewport equally. */
.dmv2-slider-track::after {
  content: "";
  flex: 0 0 24px;
}
.dmv2-slider-track.is-dragging { cursor: grabbing; }

.dmv2-card-wrapper {
  flex: 0 0 auto;
  height: calc(75vh - 74px);
  width: calc((75vh - 74px) * (380 / 580));
  container-type: size;
  container-name: card;
}

.dmv2-category-card {
  --card-accent: #FFBB01;
  width: 100%;
  height: 100%;
  padding: 5cqw 5cqw;
  background: #F2F2F2;
  border-radius: 4cqw;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: stretch;
  box-sizing: border-box;
}

.dmv2-card-header {
  height: 30cqh;
  min-height: 30cqh;
  max-height: 30cqh;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  gap: 1.5cqw;
}

.dmv2-card-title {
  font-family: 'Zalando Sans Expanded', sans-serif;
  font-size: 8cqw;
  font-weight: 500;
  line-height: 1.2;
  color: var(--card-accent, #111);
  letter-spacing: -0.3px;
  flex-shrink: 0;
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  font-optical-sizing: auto;
  font-variation-settings: "wdth" 100;
}

.dmv2-card-desc {
  font-family: 'Zalando Sans Expanded', sans-serif;
  font-size: max(3.5cqw, 14px);
  font-weight: 400;
  color: #5E5E5E;
  line-height: 1.55;
  word-wrap: break-word;
  flex: 1;
  min-height: 0;
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
}

.dmv2-card-image-wrap {
  flex: 1;
  min-height: 0;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  overflow: hidden;
  margin: 3cqw 0;
}
.dmv2-card-image-wrap img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  object-position: bottom center;
  display: block;
  pointer-events: none;
}

.dmv2-card-footer {
  display: flex;
  justify-content: flex-end;
  padding-bottom: 3cqw;
  flex-shrink: 0;
}

.dmv2-card-btn {
  width: 14cqw;
  height: 14cqw;
  min-width: 14cqw;
  /* Figma tinted style: light accent circle + accent-coloured arrow */
  background: color-mix(in srgb, var(--card-accent) 16%, #fff);
  border-radius: 100px;
  border: 1px solid color-mix(in srgb, var(--card-accent) 30%, #fff);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  overflow: hidden;
  gap: 0;
  text-decoration: none;
  padding: 0;
  transition: width 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
  white-space: nowrap;
  box-sizing: content-box;
}
.dmv2-card-btn:hover {
  width: 37cqw;
  gap: 2.5cqw;
}

.dmv2-card-btn-icon {
  width: 5cqw;
  height: 5cqw;
  min-width: 5cqw;
  flex-shrink: 0;
  transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}
/* Accent-colour the arrow (overrides the inline fill="black") */
.dmv2-card-btn-icon path { fill: var(--card-accent); }
.dmv2-card-btn:hover .dmv2-card-btn-icon { transform: rotate(45deg); }

.dmv2-card-btn-label {
  font-family: 'Zalando Sans Expanded', sans-serif;
  font-size: 3.8cqw;
  font-weight: 600;
  color: var(--card-accent);
  opacity: 0;
  width: 0;
  max-width: 0;
  overflow: hidden;
  transition: opacity 0.3s ease 0.15s, width 0.4s ease, max-width 0.4s ease;
  white-space: nowrap;
  display: block;
}
.dmv2-card-btn:hover .dmv2-card-btn-label {
  opacity: 1;
  width: auto;
  max-width: 28cqw;
}

.dmv2-slider-nav {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
  padding: 24px 2.5rem;
}

.dmv2-nav-btn {
  background: #F2F2F2;
  border: none;
  border-radius: 100px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  padding: 10px 20px;
  transition: background 0.2s ease;
}
.dmv2-nav-btn:hover { background: #D4D4D4; }
.dmv2-nav-btn svg { width: auto; height: auto; flex-shrink: 0; }
.dmv2-nav-btn--prev svg { transform: rotate(180deg); }

@media (max-width: 1024px) {
  .dmv2-hero-section { padding-top: 2rem; }
  .dmv2-slider-track { padding: 0 24px 20px 24px; gap: 14px; }
  /* Smaller, bounded cards on tablet (was 65vh ≈ 665px, too big) */
  .dmv2-card-wrapper { --dmv2-card-h: clamp(320px, 50vh, 460px); height: var(--dmv2-card-h); width: calc(var(--dmv2-card-h) * (380 / 580)); }
  .dmv2-slider-nav { display: none; }
}
@media (max-width: 768px) {
  .dmv2-hero-section { padding-top: 1.5rem; }
  .dmv2-slider-track { padding: 0 16px 16px 16px; gap: 12px; }
  .dmv2-card-wrapper { --dmv2-card-h: clamp(300px, 50vh, 420px); height: var(--dmv2-card-h); width: calc(var(--dmv2-card-h) * (380 / 580)); }
  .dmv2-slider-nav { display: none; }
}
@media (max-width: 480px) {
  .dmv2-hero-section { padding-top: 1rem; }
  .dmv2-slider-track { padding: 0 12px 12px 12px; gap: 10px; }
  .dmv2-card-wrapper { height: clamp(370px, 70vh, 470px); width: 85vw; }
  .dmv2-slider-nav { display: none; }
}


/* ============================================================
   2b. CATEGORIES PAGE — responsive grid of category cards
       (grid-laid-out sibling of the home .dmv2-category-card look)
   ============================================================ */

.dm-catgrid-crumb { padding-left: 0; padding-right: 0; margin-bottom: 4px; }

/* Constrain to the same rhythm as other sections, centred. */
.dmv2-main .dm-container { max-width: 1400px; }
.dm-catgrid-crumb + .dm-sec-head { margin-top: 8px; }

.dm-catgrid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  margin: 0 auto 56px;
  padding: 0;
  align-items: stretch;
}

.dm-catgrid-card {
  --card-accent: #FFBB01;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  background: #F2F2F2;
  border-radius: 22px;
  padding: 26px 24px;
  box-sizing: border-box;
  min-height: 360px;
  height: 100%;
  transition: transform .28s ease, box-shadow .28s ease;
}
.dm-catgrid-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 40px rgba(0, 0, 0, .10);
}

.dm-catgrid-header {
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex-shrink: 0;
}

.dm-catgrid-title {
  margin: 0;
  font-family: 'Zalando Sans Expanded', sans-serif;
  font-size: clamp(20px, 1.4vw, 24px);
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: -0.3px;
  color: var(--card-accent, #111);
  font-optical-sizing: auto;
  font-variation-settings: "wdth" 100;
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.dm-catgrid-desc {
  margin: 0;
  font-family: 'Zalando Sans Expanded', sans-serif;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.55;
  color: #5E5E5E;
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
}

.dm-catgrid-image-wrap {
  flex: 1;
  min-height: 120px;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  overflow: hidden;
  margin: 18px 0;
}
.dm-catgrid-image-wrap img {
  max-width: 100%;
  max-height: 180px;
  width: auto;
  height: auto;
  object-fit: contain;
  object-position: bottom center;
  display: block;
}

.dm-catgrid-footer {
  display: flex;
  justify-content: flex-end;
  flex-shrink: 0;
}

/* Expanding pill button — same tinted-accent Figma style as the home card. */
.dm-catgrid-btn {
  height: 46px;
  min-width: 46px;
  padding: 0;
  background: color-mix(in srgb, var(--card-accent) 16%, #fff);
  border: 1px solid color-mix(in srgb, var(--card-accent) 30%, #fff);
  border-radius: 100px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  overflow: hidden;
  text-decoration: none;
  white-space: nowrap;
  box-sizing: border-box;
  color: var(--card-accent);
  transition: min-width .4s cubic-bezier(.34, 1.56, .64, 1), padding .4s cubic-bezier(.34, 1.56, .64, 1), gap .4s ease;
}
.dm-catgrid-card:hover .dm-catgrid-btn,
.dm-catgrid-btn:hover,
.dm-catgrid-btn:focus-visible {
  min-width: 150px;
  padding: 0 20px;
  gap: 10px;
}

.dm-catgrid-btn .dm-cta-arrow {
  width: 20px;
  height: auto;
  flex-shrink: 0;
  color: var(--card-accent);
  transition: transform .4s cubic-bezier(.34, 1.56, .64, 1);
}
.dm-catgrid-card:hover .dm-catgrid-btn .dm-cta-arrow,
.dm-catgrid-btn:hover .dm-cta-arrow { transform: translateX(2px); }

.dm-catgrid-btn-label {
  font-family: 'Zalando Sans Expanded', sans-serif;
  font-size: 13px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .02em;
  color: var(--card-accent);
  opacity: 0;
  max-width: 0;
  overflow: hidden;
  white-space: nowrap;
  transition: opacity .3s ease .1s, max-width .4s ease;
}
.dm-catgrid-card:hover .dm-catgrid-btn-label,
.dm-catgrid-btn:hover .dm-catgrid-btn-label,
.dm-catgrid-btn:focus-visible .dm-catgrid-btn-label {
  opacity: 1;
  max-width: 120px;
}

@media (max-width: 1200px) {
  .dm-catgrid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 900px) {
  .dm-catgrid { grid-template-columns: repeat(2, 1fr); gap: 18px; }
}
@media (max-width: 560px) {
  .dm-catgrid { grid-template-columns: 1fr; }
  .dm-catgrid-card { min-height: 320px; }
}

/* Staggered entrance: cards start hidden ONLY when JS opts in by adding
   .is-animating on the grid (JS bails out under reduced-motion / no
   IntersectionObserver, leaving cards fully visible). */
.dm-reveal-cats.is-animating .dm-catgrid-card {
  opacity: 0;
  transform: translateY(28px);
}
.dm-reveal-cats.is-animating .dm-catgrid-card.is-visible {
  opacity: 1;
  transform: translateY(0);
  transition: opacity .55s ease, transform .55s ease;
}


/* ============================================================
   3. SECTION VITRINE + PRODUCT CARD
   ============================================================ */

.vitrine-section {
    width: 100%;
    max-width: 1920px;
    margin: 0 auto;
    padding: 20px 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 32px;
    box-sizing: border-box;
}

.vitrine-section .vitrine-header {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0px;
    text-align: center;
    max-width: 628px;
    width: 100%;
    padding: 0 20px;
}
.vitrine-section .vitrine-title {
    margin: 0 !important;
    font-family: 'Zalando Sans Expanded', sans-serif !important;
    font-weight: 400 !important;
    font-size: clamp(28px, 4vw, 40px) !important;
    line-height: 1.15 !important;
    color: #003974 !important;
    text-transform: uppercase !important;
}
.vitrine-section .vitrine-desc {
    margin: 0 !important;
    font-family: 'Zalando Sans Expanded', sans-serif !important;
    font-weight: 400 !important;
    font-size: clamp(16px, 1.8vw, 20px) !important;
    line-height: 1.56 !important;
    color: #666 !important;
}

.vitrine-section .vitrine-slider-wrap {
    width: 100%;
    position: relative;
}

.vitrine-section .vitrine-slider {
    display: flex !important;
    gap: clamp(12px, 1.7vw, 20px) !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;        /* horizontal-only: never scroll/clip vertically */
    overscroll-behavior-x: contain !important;
    scroll-snap-type: x mandatory !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: none !important;
    padding: 4px 20px !important;
    scroll-padding-left: 20px !important;
}
.vitrine-section .vitrine-slider::-webkit-scrollbar { display: none; }

/* Fade masks — only on screens wider than 1920px */
@media (min-width: 1921px) {
    .vitrine-section .vitrine-slider-wrap::before,
    .vitrine-section .vitrine-slider-wrap::after {
        content: '';
        position: absolute;
        top: 0;
        width: 120px;
        height: 100%;
        z-index: 2;
        pointer-events: none;
    }
    .vitrine-section .vitrine-slider-wrap::before {
        left: 0;
        background: linear-gradient(to right, #ffffff, transparent);
    }
    .vitrine-section .vitrine-slider-wrap::after {
        right: 0;
        background: linear-gradient(to left, #ffffff, transparent);
    }
    .vitrine-section .vitrine-slider {
        padding: 4px 120px !important;
    }
}

.dm-pcards .product-card {
    flex: 0 0 clamp(265px, calc((100vw - 3 * 20px - 80px) / 4), 296px) !important;
    width: clamp(265px, calc((100vw - 3 * 20px - 80px) / 4), 296px) !important;
    background: #F2F2F2 !important;
    border: 1px solid #E5E5E5 !important;
    border-radius: 20px !important;
    padding: 10px !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
    position: relative !important;
    scroll-snap-align: start !important;
    box-sizing: border-box !important;
    margin: 0 !important;
}

.dm-pcards .product-card .product-badge {
    position: absolute !important;
    top: clamp(14px, 4.7%, 20px) !important;
    right: clamp(14px, 4.7%, 20px) !important;
    z-index: 3 !important;
    height: 28px !important;
    width: 28px !important;
    min-width: 28px !important;
    border-radius: 100px !important;
    font-family: 'Zalando Sans Expanded', sans-serif !important;
    font-style: normal !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.04em !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: default !important;
    transform-origin: right center !important;
    transition:
        width     0.6s cubic-bezier(0.34, 1.56, 0.64, 1),
        transform 0.6s cubic-bezier(0.34, 1.56, 0.64, 1),
        padding   0.6s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
}
.dm-pcards .product-card .product-badge.collapsing {
    transition:
        width     0.6s cubic-bezier(0.22, 1.2, 0.36, 1),
        transform 0.6s cubic-bezier(0.22, 1.2, 0.36, 1),
        padding   0.6s cubic-bezier(0.22, 1.2, 0.36, 1) !important;
}
.dm-pcards .product-card .product-badge.expanded {
    width: auto !important;
    padding: 0 14px !important;
    transform: scaleY(1.08) !important;
}
.dm-pcards .product-badge span {
    max-width: 160px !important;
    opacity: 0 !important;
    overflow: hidden !important;
    white-space: nowrap !important;
    display: inline-block !important;
    font-family: 'Zalando Sans Expanded', sans-serif !important;
    font-style: normal !important;
    transition: opacity 0.2s ease !important;
}
.dm-pcards .product-badge.expanded span {
    opacity: 1 !important;
    transition: opacity 0.25s ease 0.4s !important;
}
.dm-pcards .badge-nouvel-arrivage { background: #003974 !important; color: #fff !important; }
.dm-pcards .badge-nouveau         { background: #EC2227 !important; color: #fff !important; }

.dm-pcards .product-image-frame {
    width: 100% !important;
    aspect-ratio: 1 / 1 !important;
    background: #fff !important;
    border: 1px solid #E6E6E6 !important;
    border-radius: 10px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    overflow: hidden !important;
    padding: 0 !important;
    flex-shrink: 0 !important;
    box-sizing: border-box !important;
}
.dm-pcards .product-image-frame img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;   /* fill the whole square */
    display: block !important;
}

.dm-pcards .product-card .product-title {
    font-family: 'Zalando Sans Expanded', sans-serif !important;
    font-size: clamp(18px, 4.7%, 20px) !important;
    font-weight: 500 !important;
    color: #111 !important;
    line-height: 1.35 !important;
    word-break: break-word !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    margin: 0 !important;
    padding: 0 !important;
    flex-grow: 1 !important;
}

.dm-pcards .product-card > div {
    align-self: flex-start !important;
    display: table !important;
    width: auto !important;
    flex-shrink: 1 !important;
    flex-grow: 0 !important;
}

.dm-pcards .product-category {
    display: inline-flex !important;
    align-items: center !important;
    padding: 5px clamp(8px, 2.7%, 10px) !important;
    border-radius: 100px !important;
    /* Figma text style: Zalando Sans Expanded SemiBold, 12px, uppercase */
    font-family: 'Zalando Sans Expanded', sans-serif !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    line-height: 1.49 !important;
    text-transform: uppercase !important;
    letter-spacing: 0 !important;
    text-decoration: none !important;
    cursor: pointer !important;
    max-width: 165px !important;
    width: fit-content !important;
    overflow: hidden !important;
    position: relative !important;
    isolation: isolate !important;
    /* Figma tinted pill: light bg + subtle border, coloured text */
    background: color-mix(in srgb, var(--pill-bg, #cccccc) 14%, #fff) !important;
    border: 1px solid color-mix(in srgb, var(--pill-bg, #cccccc) 30%, #fff) !important;
    transition: filter 0.18s ease, transform 0.12s ease !important;
}
.dm-pcards .product-category:hover  { filter: brightness(0.96) !important; }
.dm-pcards .product-category:active { transform: scale(0.97) !important; }
/* Placeholder pill shown when a product has no category (matches Figma) */
.dm-pcards .product-category--empty {
    width: clamp(120px, 55%, 172px) !important;
    height: 28px !important;
    background: #ECECEC !important;
    border: 1px solid #E5E5E5 !important;
    cursor: default !important;
    pointer-events: none !important;
}

.dm-pcards .cat-marquee-track,
.dm-pcards .cat-text {
    color: var(--pill-bg, #6F6F6F) !important;
    mix-blend-mode: multiply !important;
}
/* Edge fade masks removed per request — the category text no longer fades at
   the left/right sides of the pill. */

.dm-pcards .cat-marquee-track { display: flex !important; white-space: nowrap !important; }
.dm-pcards .cat-text { display: inline-block !important; white-space: nowrap !important; }

@keyframes marquee-loop {
    0%   { transform: translateX(0); }
    100% { transform: translateX(var(--marquee-dist, -100px)); }
}

.dm-pcards .product-card .product-cta {
    width: 100% !important;
    height: 44px !important;
    background: #3E3E3E !important;
    border: none !important;
    border-radius: 15px !important;
    color: #fff !important;
    font-family: 'Zalando Sans Expanded', sans-serif !important;
    font-size: clamp(12px, 3.9%, 15px) !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.08em !important;
    cursor: pointer !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    padding: 0 clamp(16px, 5.4%, 22px) !important;
    transition: background 0.18s ease, transform 0.12s ease !important;
    text-decoration: none !important;
    box-sizing: border-box !important;
}
.dm-pcards .product-card .product-cta:hover  { background: #222 !important; }
.dm-pcards .product-card .product-cta:active { transform: scale(0.97) !important; }

/* Whole card is clickable → product page (stretched title link covers the card).
   The category pill and the "Demander un devis" button sit above the overlay so
   they stay independently clickable. */
.dm-pcards .product-title-link {
    display: block !important;
    flex: 1 1 auto !important;
    min-width: 0 !important;
    text-decoration: none !important;
}
.dm-pcards .product-title-link::after {
    content: "" !important;
    position: absolute !important;
    inset: 0 !important;
    z-index: 1 !important;
    border-radius: 20px !important;
}
.dm-pcards .product-card .product-category { z-index: 2 !important; }        /* already position:relative */
.dm-pcards .product-card .product-cta { position: relative !important; z-index: 2 !important; }

@media (max-width: 640px) {
    .dm-pcards .product-card {
        flex: 0 0 80vw !important;
        width: 80vw !important;
    }
    .vitrine-section .vitrine-slider {
        scroll-padding-left: 5vw !important;
        padding: 4px 5vw !important;
    }
}
@media (min-width: 641px) and (max-width: 1024px) {
    .dm-pcards .product-card {
        flex: 0 0 calc((100vw - 20px - 40px) / 2) !important;
        width: calc((100vw - 20px - 40px) / 2) !important;
    }
}

.vitrine-section .vitrine-nav {
    display: grid !important;
    grid-template-columns: 1fr auto 1fr !important;
    align-items: center !important;
    padding: 16px 40px 0 !important;
    width: 100% !important;
    box-sizing: border-box !important;
}
.vitrine-section .vitrine-nav-arrows {
    grid-column: 3 !important;          /* arrows aligned to the right */
    grid-row: 1 !important;             /* keep on the same line as the button */
    display: flex !important;
    justify-content: flex-end !important;
    gap: 12px !important;
}
.vitrine-section .vitrine-nav-center {
    grid-column: 2 !important;          /* red button centered in the slider */
    grid-row: 1 !important;
    display: flex !important;
    justify-content: center !important;
}
.vitrine-section .vitrine-nav-btn {
    background: #F2F2F2;
    border: none;
    border-radius: 100px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    padding: 10px 20px;
    transition: background 0.2s ease;
}
.vitrine-section .vitrine-nav-btn:hover { background: #D4D4D4; }
.vitrine-section .vitrine-nav-btn--prev svg { transform: rotate(180deg); }

@media (max-width: 1024px) {
    .vitrine-section .vitrine-nav {
        display: none !important;
    }
}
.vitrine-section .vitrine-cta-wrap {
    display: flex !important;
    justify-content: flex-end !important;
    padding: 8px 40px 0 !important;
    width: 100% !important;
    box-sizing: border-box !important;
}
.vitrine-section .vitrine-cta-all {
    display: inline-flex !important;
    align-items: center !important;
    gap: 12px !important;
    background: #E3282F !important;
    color: #fff !important;
    font-family: 'Zalando Sans Expanded', sans-serif !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    text-decoration: none !important;
    text-transform: uppercase !important;
    padding: 16px 24px !important;
    border-radius: 15px !important;
    transition: background 0.2s ease, padding 0.3s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
    letter-spacing: 0.04em !important;
    white-space: nowrap !important;
    cursor: pointer !important;
}
.vitrine-section .vitrine-cta-all:hover {
    background: #c0191f !important;
}
.vitrine-section .vitrine-cta-all svg {
    width: 22px !important;
    height: 16px !important;
    flex-shrink: 0 !important;
    transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
}
.vitrine-section .vitrine-cta-all:hover svg {
    transform: translateX(6px) !important;
}

/* ============================================================
   4. HOME SECTIONS — Découvrez / Autres Produits / About /
      Partenaires / Contact  (match Figma home node 294-2320)
   ============================================================ */

/* Shared reveal-on-scroll.
   NOTE: .dm-prow-section (Autres Produits) is intentionally NOT in this list —
   it uses a per-card staggered entrance in site.js instead (like the vitrine),
   so its wrapper must stay visible; hiding it here would trap the cards inside
   an opacity:0 parent. */
.dm-decouvrez-section, .dm-about-section,
.dm-partners-section, .dm-contacth-section {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity .7s ease, transform .7s ease;
}
.dm-decouvrez-section.is-visible,
.dm-about-section.is-visible, .dm-partners-section.is-visible,
.dm-contacth-section.is-visible { opacity: 1; transform: translateY(0); }

/* Shared centred section header (NOUVEL ARRIVAGE / AUTRES PRODUITS / NOUS CONTACTER) */
.dm-sec-head { text-align: center; max-width: 720px; margin: 0 auto 34px; }
.dm-sec-head__title {
    margin: 0;
    font-family: 'Zalando Sans Expanded', sans-serif;
    font-weight: 400;
    font-size: clamp(28px, 4vw, 40px);
    line-height: 1.15;
    text-transform: uppercase;
    color: #003974;
}
.dm-sec-head__desc { margin: 0; font-family: 'Zalando Sans Expanded', sans-serif; font-size: 16px; line-height: 1.5; color: #767676; }

/* ---- Découvrez — navy container + white angled mask (Figma exact) ---- */
.dm-decouvrez-section {
    max-width: 1400px;
    margin: 0 auto 40px;
    padding: 0 20px;
    box-sizing: border-box;
}
.dm-decouvrez {
    position: relative;
    width: 100%;
    aspect-ratio: 1400 / 659;
    container-type: inline-size;   /* button/text scale with the card width (cqw) */
}
/* Navy + white mask are one SVG that fills the card; radius scales with size. */
.dm-decouvrez__svg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    display: block;
}
.dm-decouvrez__svg--tall { display: none; }

/* Content layer (holds button, and later the text + dots) */
.dm-decouvrez__content {
    position: absolute;
    left: 0; top: 0;
    width: 50%;           /* left navy area, before the slant */
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;   /* text at top, button at bottom */
    align-items: flex-start;          /* left-aligned */
    padding: 4% 3% 3.7%;
    box-sizing: border-box;
    z-index: 2;
    font-size: 1cqw;             /* base scale unit = 1% of card width (14px @ 1400) */
    color: #fff;
}
.dm-dec-eyebrow {
    margin: 0 0 1.15em;
    font-family: 'Zalando Sans Expanded', sans-serif;
    font-weight: 800;
    font-size: 4.36em;           /* 61px @ 1400 */
    line-height: 1.13;
    text-transform: uppercase;
    letter-spacing: -0.01em;
}
.dm-dec-title {
    margin: 0;
    font-family: 'Zalando Sans Expanded', sans-serif;
    font-weight: 600;
    font-size: 2.006em;          /* 28px @ 1400 */
    line-height: 1.15;
    text-transform: uppercase;
}
.dm-dec-desc {
    margin: 0.9em 0 0;
    max-width: 34em;
    font-family: 'Zalando Sans Expanded', sans-serif;
    font-weight: 400;
    font-size: 1.231em;          /* 17px @ 1400 */
    line-height: 1.4;
    color: #cfe0f2;
}
.dm-dec-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.85em;
    padding: 1.2em 2.3em;       /* same ratio as the offre "VOIR LE PRODUIT" button */
    background: #EC2227;
    color: #fff;
    font-family: 'Zalando Sans Expanded', sans-serif;
    font-weight: 600;
    font-size: 1.15em;          /* scales with card via the cqw base */
    letter-spacing: 0.05em;
    text-transform: uppercase;
    text-decoration: none;
    border-radius: 15px;
    white-space: nowrap;
    transition: background .2s ease;
}
.dm-dec-btn svg { width: 2em; height: 1.44em; }
.dm-dec-btn:hover { background: #cf1d22; }
.dm-dec-btn svg { transition: transform .2s ease; }
.dm-dec-btn:hover svg { transform: translateX(4px); }

/* Actions row: button + pagination dots */
.dm-dec-actions {
    display: flex;
    align-items: center;
    gap: 2.36em;                 /* 33px @ 1400 */
}
.dm-dec-dots {
    display: flex;
    align-items: center;
    gap: 0.36em;
}
.dm-dec-dot {
    width: 0.82em;               /* 11.5px @ 1400 */
    height: 0.82em;
    border-radius: 50%;
    background: #fff;
    flex: none;
    padding: 0;
    border: none;
    cursor: pointer;
    transition: width .2s ease, height .2s ease, background .2s ease;
}
.dm-dec-dot.is-active {
    width: 1.083em;              /* 15.16px @ 1400 — active dot bigger + red */
    height: 1.083em;
    background: #E3282F;
}

/* Slide image inside the white mask (swaps per slide).
   The media layer is clipped to the white shape so the image never spills
   onto the navy — the clip-path follows the mask's angled edge. */
.dm-dec-media {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    clip-path: polygon(60% 0, 100% 0, 100% 100%, 47% 100%);   /* wide: angled LEFT edge */
}
.dm-dec-img {
    position: absolute;
    top: 50%;
    right: 4%;
    transform: translateY(-50%);
    width: 40%;
    max-width: 540px;
    max-height: 86%;
    height: auto;
    object-fit: contain;
    transition: opacity .28s ease;
}
/* Fade used by the carousel when swapping slides */
.dm-dec-swap { transition: opacity .28s ease; }
.dm-dec-swap.is-fading, .dm-dec-img.is-fading { opacity: 0; }

/* Prev / next arrow pills under the card */
.dm-dec-arrows {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    margin-top: 18px;
}
.dm-dec-arrow {
    width: 102px;
    height: 40px;
    border-radius: 999px;
    background: #F2F2F2;
    border: 1px solid #E5E5E5;
    color: #5E5E5E;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background .2s ease, color .2s ease, border-color .2s ease;
}
.dm-dec-arrow:hover { background: #D4D4D4; color: #5E5E5E; border-color: #D4D4D4; }
.dm-dec-arrow svg { width: 46px; height: auto; }

/* Mobile: portrait card, mask angled on TOP, sitting at the bottom. */
@media (max-width: 640px) {
    .dm-decouvrez { aspect-ratio: 663.48 / 1167.05; }
    .dm-decouvrez__svg--wide { display: none; }
    .dm-decouvrez__svg--tall { display: block; }
    /* content packs from the top so the dots+button row stays above the mask */
    .dm-decouvrez__content {
        width: 100%;
        height: auto;
        justify-content: flex-start;
        align-items: flex-start;  /* text left-aligned */
        padding: 6% 5% 0;
        font-size: 2.6cqw;      /* larger base so the description is readable on phones */
    }
    .dm-dec-eyebrow { margin-bottom: 0.3em; font-size: 2.7em; }            /* smaller → frees vertical space */
    .dm-dec-title   { font-size: 1.4em; margin-bottom: 0.15em; }           /* smaller product name */
    /* Clamp the description so it never runs into the white mask / button below.
       Uses max-height (≈3 lines) instead of -webkit-line-clamp because WordPress
       forces display:flow-root here, which disables line-clamp. */
    .dm-dec-desc    { max-width: none; font-size: 1.35em; line-height: 1.4;
                      max-height: 4.2em; overflow: hidden; }
    .dm-dec-actions { width: 100%; justify-content: space-between; margin-top: 0.9em; }
    .dm-dec-dots { order: 1; }               /* dots on the left */
    .dm-dec-btn  { order: 2; }               /* button on the right */
    /* image sits in the white area at the bottom, clipped to the top slant */
    .dm-dec-media { clip-path: polygon(5% 34%, 97% 49%, 100% 100%, 0 100%); }
    .dm-dec-img { top: auto; bottom: 5%; right: auto; left: 50%; transform: translateX(-50%); width: 74%; max-width: 340px; max-height: 46%; }
    .dm-dec-arrows { display: none; }        /* dots handle nav on mobile */
}

/* ---- Autres Produits — full-width slider (shares .dm-pcards card styles) ---- */
.dm-autres-section { width: 100%; max-width: 1920px; margin: 0 auto; padding: 20px 0 40px; box-sizing: border-box; }
.dm-autres-section .dm-sec-head { padding: 0 20px; }
.dm-autres-slider {
    display: flex;
    gap: clamp(12px, 1.7vw, 20px);
    overflow-x: auto;
    overflow-y: hidden;        /* horizontal-only: never scroll/clip vertically */
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding: 4px 20px;
    scroll-padding-left: 20px;
}
.dm-autres-slider::-webkit-scrollbar { display: none; }
/* nav row (arrows + Voir tous) kept within the content width */
.dm-autres-nav {
    display: grid;                          /* red button centered, arrows to the right */
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 16px;
    margin-top: 18px;
    padding: 0 20px;
    box-sizing: border-box;
}
.dm-autres-arrows { grid-column: 3; grid-row: 1; display: flex; gap: 12px; justify-content: flex-end; }
.dm-prow-all {
    grid-column: 2; grid-row: 1; justify-self: center;   /* centered in the slider, same line as arrows */
    display: inline-flex; align-items: center; gap: 10px;
    padding: 14px 26px; background: #EC2227; color: #fff;
    font-family: 'Zalando Sans Expanded', sans-serif; font-weight: 600; font-size: 13px;
    letter-spacing: .06em; text-transform: uppercase; text-decoration: none; border-radius: 15px;
    transition: background .2s ease;
}
.dm-prow-all:hover { background: #cf1d22; }
.dm-prow-all svg { width: 22px; height: 16px; transition: transform .2s ease; }
.dm-prow-all:hover svg { transform: translateX(4px); }
@media (max-width: 640px) {
    .dm-autres-nav { padding: 0 20px; flex-wrap: wrap; }
    .dm-autres-arrows { display: none; }   /* swipe to scroll on mobile */
}

/* ---- About (DARELMED) ---- */
.dm-about-section { max-width: 1155px; margin: 20px auto 44px; padding: 20px; box-sizing: border-box; text-align: center; }
.dm-about__logo { margin-bottom: 30px; }
.dm-about__logo .dm-brand-logo { width: clamp(230px, 30vw, 340px); height: auto; }
.dm-about__text {
    margin: 0 auto 30px; max-width: 1155px;
    font-family: 'Zalando Sans Expanded', sans-serif; font-size: 16px; line-height: 1.7;
    color: #5E5E5E; text-align: justify;
}
.dm-about__btn {
    display: inline-flex; align-items: center; gap: 10px;
    padding: 18px 40px; background: #EC2227; color: #fff;
    font-family: 'Zalando Sans Expanded', sans-serif; font-weight: 600; font-size: 14px;
    letter-spacing: .06em; text-transform: uppercase; text-decoration: none; border-radius: 15px;
    transition: background .2s ease;
}
.dm-about__btn:hover { background: #cf1d22; }
.dm-about__btn svg { transition: transform .2s ease; }
.dm-about__btn:hover svg { transform: translateX(4px); }

/* ---- Partenaires ---- */
.dm-partners-section { max-width: 1240px; margin: 0 auto 44px; padding: 0 20px; box-sizing: border-box; }
.dm-partners { background: #FAFAFA; border: 1px solid #F0F0F0; border-radius: 22px; padding: 34px 30px 40px; text-align: center; }
.dm-partners__title {
    margin: 0; font-family: 'Zalando Sans Expanded', sans-serif; font-weight: 400;
    font-size: clamp(24px, 3vw, 34px); text-transform: uppercase; color: #003974;
}
.dm-partners__desc { margin: 0 auto 28px; max-width: 1100px; font-family: 'Zalando Sans Expanded', sans-serif; font-size: 15px; line-height: 1.55; color: #767676; }
.dm-partners__viewport { width: 100%; overflow: hidden; }
.dm-partners__row { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: clamp(24px, 5vw, 64px); }
/* Auto-scroll marquee (added by JS when there are >5 logos, or when they overflow one row) */
.dm-partners__viewport.is-marquee .dm-partners__row {
    flex-wrap: nowrap;
    justify-content: flex-start;
    width: max-content;
    will-change: transform;
    animation: dm-partners-marquee var(--dm-marquee-dur, 30s) linear infinite;
}
.dm-partners__viewport.is-marquee:hover .dm-partners__row { animation-play-state: paused; }
@keyframes dm-partners-marquee {
    from { transform: translateX(0); }
    to   { transform: translateX(calc(-1 * var(--dm-shift, 0px))); }
}
.dm-partners__item { flex: 0 0 auto; display: flex; align-items: center; justify-content: center; height: 66px; }
.dm-partners__item img { max-height: 66px; max-width: 150px; width: auto; height: auto; object-fit: contain; filter: grayscale(15%); transition: filter .2s ease, transform .2s ease; }
.dm-partners__item img:hover { filter: grayscale(0); transform: scale(1.04); }
/* Blend white logo backgrounds into the card (mix-blend-mode: multiply) */
.dm-partners__viewport.is-multiply .dm-partners__item img { mix-blend-mode: multiply; filter: none; }
/* mix-blend-mode needs a backdrop WITHIN the transformed marquee row, otherwise
   the blend breaks on tablet/mobile where the auto-scroll marquee (transform)
   creates a new stacking context. Give the row the card's background so white
   logo backgrounds blend away on every breakpoint, not just desktop. */
.dm-partners__viewport.is-multiply .dm-partners__row { background: #FAFAFA; }
@media (prefers-reduced-motion: reduce) {
    .dm-partners__viewport.is-marquee .dm-partners__row { animation: none; }
}

/* ---- Nous Contacter (home) ---- */
.dm-contacth-section { max-width: 1240px; margin: 10px auto 50px; padding: 0 20px; box-sizing: border-box; }
.dm-contacth__cards { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: center; gap: 40px clamp(48px, 7vw, 88px); }
/* Figma: label + value stacked, red pill button below & right-aligned under the value */
.dm-contacth__card { display: flex; flex-direction: column; align-items: flex-start; gap: 18px; }
.dm-contacth__label { margin: 0 0 2px; font-family: 'Zalando Sans Expanded', sans-serif; font-weight: 600; font-size: 20px; color: #003974; }
.dm-contacth__value { margin: 0; font-family: 'Zalando Sans Expanded', sans-serif; font-size: 20px; font-weight: 400; color: #111; }
.dm-contacth__btn {
    align-self: flex-end; flex-shrink: 0; border: none; cursor: pointer;
    padding: 13px 28px; background: #EC2227; color: #fff;
    font-family: 'Zalando Sans Expanded', sans-serif; font-weight: 500; font-size: 17px;
    letter-spacing: .04em; text-transform: uppercase; text-decoration: none;
    border-radius: 15px; transition: background .2s ease;
}
.dm-contacth__btn:hover { background: #cf1d22; }
@media (max-width: 620px) {
    .dm-contacth__cards { gap: 28px; }
    .dm-contacth__card { width: 100%; }
}

/* ---- Bottom-of-page nav: "Revenir en haut" + "Continuer vers produits" ---- */
.dm-pagenav-section { width: 100%; max-width: 1920px; margin: 0 auto; padding: 20px 20px 44px; box-sizing: border-box; }
.dm-pagenav { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.dm-pagenav__btn {
    display: inline-flex; align-items: center; gap: 10px;
    padding: 15px 26px; background: #EC2227; color: #fff;
    border: 1px solid rgba(248, 202, 202, 0.8); cursor: pointer;
    font-family: 'Zalando Sans Expanded', sans-serif; font-weight: 600; font-size: 15px;
    letter-spacing: .04em; text-transform: uppercase; text-decoration: none;
    border-radius: 15px; transition: background .2s ease, transform .12s ease;
}
.dm-pagenav__btn:hover  { background: #cf1d22; }
.dm-pagenav__btn:active { transform: scale(0.98); }
.dm-pagenav__up { display: inline-flex; }
.dm-pagenav__up .dm-cta-arrow { transform: rotate(-90deg); }   /* the arrow points up */
@media (max-width: 820px) {
    .dm-pagenav { flex-direction: column; gap: 12px; align-items: center; }
}

/* Main red CTA buttons (voir tous / en savoir plus / revenir en haut /
   continuer vers produits): consistent height AND a consistent side "hug".
   They size to their own label (content width) with the SAME 28px side
   padding as the offre & contact buttons — so the gap between the text and
   the edges is identical on every button (no "one long, one small"). */
.dm-pagenav__btn,
.dm-prow-all,
.vitrine-section .vitrine-cta-all,
.dm-about__btn {
    width: auto !important;
    max-width: 100% !important;
    height: 54px !important;
    padding: 0 28px !important;
    justify-content: center !important;
    box-sizing: border-box !important;
}


/* ============================================================
   CATEGORIES PAGE — one block per category (Figma "Cat …")
   header + [ principal card + 3 random products ] + Afficher tout
   ============================================================ */
.dm-catpage { max-width: 1440px; margin: 0 auto; padding: 6px 40px 40px; box-sizing: border-box; }

/* Page header — "Nos Catégories" + intro. Left-aligned to sit above the blocks,
   sized a step larger than the block titles. (Font is Zalando via .dm-catpage *.) */
.dm-catpage__head { margin: 4px 0 46px; }
.dm-catpage__title { margin: 0; font-weight: 700; font-size: clamp(32px, 4.5vw, 46px); line-height: 1.1; color: #003974; }
.dm-catpage__intro { margin: 10px 0 0; font-size: clamp(15px, 1.6vw, 17px); line-height: 1.55; color: #767676; max-width: 620px; }

.dm-catblock { margin: 0 0 58px; }
.dm-catblock__head { margin: 0 0 22px; }
.dm-catblock__title {
    margin: 0; font-family: 'Zalando Sans Expanded', sans-serif; font-weight: 600;
    font-size: clamp(24px, 3vw, 34px); color: #003974; line-height: 1.15;
}
.dm-catblock__desc { margin: 0; font-family: 'Zalando Sans Expanded', sans-serif; font-size: 15px; line-height: 1.5; color: #767676; max-height: 3em; overflow: hidden; } /* ≤2 lines */

/* Row: principal card + 3 product cards (equal height via stretch) */
.dm-catblock__row {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
    align-items: stretch;
}

/* ---- Principal category card (accent) — matches the home card language ---- */
.dm-catcard {
    background: #F2F2F2;
    border-radius: 20px;
    padding: 20px;
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    min-height: 0;
}
.dm-catcard__head { flex-shrink: 0; }
.dm-catcard__title {
    margin: 0; font-family: 'Zalando Sans Expanded', sans-serif; font-weight: 600;
    font-size: 22px; line-height: 1.15; text-transform: uppercase; color: var(--card-accent);
}
.dm-catcard__desc { margin: 8px 0 0; font-family: 'Zalando Sans Expanded', sans-serif; font-size: 14px; line-height: 1.45; color: #5E5E5E; max-height: 4.35em; overflow: hidden; } /* ≈3 lines — keeps the card from growing too tall */
.dm-catcard__img { flex: 1; min-height: 0; display: flex; align-items: flex-end; justify-content: center; margin: 16px 0; }
.dm-catcard__img img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; display: block; }
.dm-catcard__foot { display: flex; justify-content: flex-end; flex-shrink: 0; }

/* Button (Figma 421-1704): the accent pill is ALWAYS open (full width). The
   light inner sits as a 60px circle at the right (2px inset) and, on card hover,
   expands right→left to fill the accent area (2px frame all round), revealing
   the "Explorer" label — like the home category cards. */
.dm-catcard__btn {
    width: 190px; max-width: 100%;
    height: 64px;
    background: var(--card-accent);      /* the "blue" — always open */
    border-radius: 100px;
    padding: 2px;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: flex-end;           /* light inner pinned to the right */
    overflow: hidden;
    text-decoration: none;
}
.dm-catcard__inner {
    height: 60px; width: 60px;           /* resting: 60px circle, 2px from every edge */
    border-radius: 100px;
    background: color-mix(in srgb, var(--card-accent) 24%, #fff);
    display: flex; align-items: center; justify-content: center;  /* arrow centred like home */
    gap: 0; overflow: hidden;
    transition: width .45s cubic-bezier(0.34, 1.56, 0.64, 1), gap .45s cubic-bezier(0.34, 1.56, 0.64, 1);
}
/* Arrow centred at rest; "Explorer" label hidden until the button expands. */
.dm-catcard__arrow { width: 24px; height: 24px; display: block; flex-shrink: 0; transition: transform .4s cubic-bezier(0.34, 1.56, 0.64, 1); }
.dm-catcard__arrow path { stroke: var(--card-accent); }
.dm-catcard__label {
    opacity: 0; max-width: 0; overflow: hidden; white-space: nowrap;
    color: var(--card-accent);
    font-weight: 600; font-size: 14px; text-transform: uppercase; letter-spacing: .04em;
    transition: opacity .3s ease .1s, max-width .4s ease;
}
/* Desktop (real hover / keyboard) expands the button. On touch the slide
   gesture in site.js drives it, so these must NOT fire on a sticky tap-hover. */
@media (hover: hover) {
    .dm-catcard:hover .dm-catcard__inner,
    .dm-catcard__btn:focus-visible .dm-catcard__inner { width: 100%; gap: 12px; }
    .dm-catcard:hover .dm-catcard__arrow,
    .dm-catcard__btn:focus-visible .dm-catcard__arrow { transform: rotate(45deg); }
    .dm-catcard:hover .dm-catcard__label,
    .dm-catcard__btn:focus-visible .dm-catcard__label { opacity: 1; max-width: 130px; }
}

/* ---- Afficher tout — accent button, brand arrow slides on hover ---- */
.dm-catblock__foot { display: flex; justify-content: flex-end; margin-top: 22px; }
.dm-catblock__all {
    display: inline-flex; align-items: center; gap: 12px;
    height: 46px; padding: 0 26px;
    background: var(--card-accent); color: #fff;
    border-radius: 15px;
    font-family: 'Zalando Sans Expanded', sans-serif; font-weight: 600; font-size: 13px;
    letter-spacing: .05em; text-transform: uppercase; text-decoration: none;
    transition: filter .2s ease;
}
.dm-catblock__all:hover { filter: brightness(0.93); }
.dm-catblock__all .dm-cta-arrow { flex-shrink: 0; transition: transform .2s ease; }
.dm-catblock__all:hover .dm-cta-arrow { transform: translateX(4px); }

/* Product cards here match the /produits cards exactly: a fixed SQUARE image, the
   button pinned to the bottom, and equal-height cards (grid stretch) so images,
   titles and buttons all line up. The principal category card keeps the Figma
   335×480 proportion. */
.dm-catblock__row > .dm-catcard { aspect-ratio: 335 / 480; overflow: hidden; }
.dm-catblock__row > .dm-pcard { height: 100%; }
.dm-catpage .dm-pcard__img { flex: 0 0 auto; aspect-ratio: 1 / 1; height: auto; }
.dm-catpage .dm-pcard__title-link { flex: 0 0 auto; display: block; }
.dm-catpage .dm-pcard__cat { margin-top: auto; }
.dm-catpage a.dm-pcard__cat { max-width: 165px; width: fit-content; }

/* Responsive */
@media (max-width: 1024px) {
    .dm-catpage { padding: 6px 20px 32px; }
    .dm-catblock__row { grid-template-columns: repeat(2, 1fr); gap: 18px; }
    .dm-catblock { margin-bottom: 44px; }
}
/* iPad Mini / small tablet: category card + a SINGLE product card (2-up),
   so the block isn't one oversized full-width card. Keep the 335/480 ratio. */
@media (min-width: 641px) and (max-width: 768px) {
    /* keep only the first product; drop the 2nd & 3rd */
    .dm-catblock__row .dm-pcard ~ .dm-pcard { display: none !important; }
    .dm-catblock__all { width: 100%; justify-content: center; }
    /* slide-to-explore bar (see site.js) — compact */
    .dm-catcard__btn { width: 100%; max-width: 120px; height: 50px; }
    .dm-catcard__inner { width: 46px; height: 46px; }
    .dm-catcard__arrow { width: 20px; height: 20px; }
}
/* Phone: show ONLY the category cards — hide every product card */
@media (max-width: 640px) {
    .dm-catblock .dm-pcard { display: none !important; }
    /* One centred card, capped so it never balloons on wide "phone-class"
       screens (Surface Duo 540px, foldables, landscape). Keeping the home
       335/480 ratio bounds the height automatically once the width is capped. */
    .dm-catblock__row { grid-template-columns: 1fr; justify-items: center; }
    .dm-catblock__row > .dm-catcard {
        width: 100%;
        max-width: 360px;
        aspect-ratio: 335 / 480;
        min-height: 0;
    }
    /* "Afficher tout" is capped + centred to line up with the card above it */
    .dm-catblock__foot { justify-content: center; }
    .dm-catblock__all { width: 100%; max-width: 360px; justify-content: center; }
    /* slide-to-explore bar (see site.js) — compact */
    .dm-catcard__btn { width: 100%; max-width: 120px; height: 50px; }
    .dm-catcard__inner { width: 46px; height: 46px; }
    .dm-catcard__arrow { width: 20px; height: 20px; }
}