/* ============================================================
   Darelmed V2 — Site Stylesheet (global chrome + pages)
   Loaded site-wide. Design tokens match the home page:
   Zalando Sans Expanded (headings) + Zalando Sans Expanded (body),
   Red #EC2227, Navy #003974, Card #F2F2F2, content max 1240.
   ============================================================ */

:root{
  --dm-red:#EC2227; --dm-red-dark:#c91b1f;
  --dm-navy:#003974; --dm-navy-dark:#002a57;
  --dm-ink:#111; --dm-text:#5E5E5E; --dm-muted:#8C9299;
  --dm-card:#F2F2F2; --dm-line:#E6E6E6; --dm-dark-btn:#3E3E3E;
  --dm-green:#35A619;
  --dm-max:1240px;
  --dm-font-head:'Zalando Sans Expanded',sans-serif;
  --dm-font-body:'Zalando Sans Expanded',sans-serif;
}

.dmv2-main{display:block;min-height:40vh;}
.dm-container{max-width:var(--dm-max);margin:0 auto;padding:0 20px;box-sizing:border-box;}

/* ---- Page hero (title band) ---- */
.dm-page-hero{max-width:var(--dm-max);margin:0 auto;padding:32px 20px 8px;box-sizing:border-box;text-align:center;}
.dm-page-hero h1{font-family:var(--dm-font-head);font-weight:400;font-size:clamp(30px,5vw,52px);line-height:1.1;color:var(--dm-navy);text-transform:uppercase;letter-spacing:-.5px;margin:0;}
.dm-page-hero p{font-family:var(--dm-font-body);font-size:clamp(14px,1.6vw,17px);color:var(--dm-text);max-width:640px;margin:12px auto 0;line-height:1.55;}

/* ---- Breadcrumb ---- */
.dm-breadcrumb{max-width:var(--dm-max);margin:0 auto;padding:14px 20px;box-sizing:border-box;font-family:var(--dm-font-body);font-size:13px;color:var(--dm-muted);}
.dm-breadcrumb a{color:var(--dm-text);text-decoration:none;}
.dm-breadcrumb a:hover{color:var(--dm-red);}
.dm-breadcrumb .sep{margin:0 6px;color:#bbb;}

/* ---- Buttons ---- */
.dm-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;font-family:var(--dm-font-body);font-weight:600;font-size:13px;text-transform:uppercase;letter-spacing:.04em;text-decoration:none;border:none;border-radius:100px;padding:13px 24px;cursor:pointer;transition:background .2s,transform .12s,filter .2s;white-space:nowrap;}
.dm-btn:active{transform:scale(.97);}
.dm-btn--red{background:var(--dm-red);color:#fff;}
.dm-btn--red:hover{background:var(--dm-red-dark);}
.dm-btn--navy{background:var(--dm-navy);color:#fff;}
.dm-btn--navy:hover{background:var(--dm-navy-dark);}
.dm-btn--dark{background:var(--dm-dark-btn);color:#fff;}
.dm-btn--dark:hover{background:#222;}
.dm-btn--outline{background:transparent;border:1.5px solid var(--dm-navy);color:var(--dm-navy);}
.dm-btn--outline:hover{background:var(--dm-navy);color:#fff;}
.dm-btn--ghost{background:#F2F2F2;color:#333;}
.dm-btn--ghost:hover{background:#e4e4e4;}
.dm-btn--green{background:var(--dm-green);color:#fff;}
.dm-btn--green:hover{filter:brightness(.93);}

/* ---- Section heading ---- */
.dm-section-head{text-align:center;max-width:640px;margin:0 auto 28px;padding:0 20px;}
.dm-section-head h2{font-family:var(--dm-font-head);font-weight:400;font-size:clamp(26px,4vw,40px);line-height:1.15;color:var(--dm-navy);text-transform:uppercase;margin:0;}
.dm-section-head p{font-family:var(--dm-font-body);font-size:clamp(15px,1.8vw,19px);color:#666;margin:6px 0 0;line-height:1.55;}

/* ---- Grid product cards (archive/search) ---- */
/* Column count follows the CONTENT width (so it accounts for the 300px filter):
   3 cards while they stay wide enough for an ~18px title, then 2, then 1.
   Cards resize proportionally (typography in cqw), so they never look cramped. */
.dm-archive-content{container-type:inline-size;}
.dm-products-grid{display:grid;grid-template-columns:1fr;gap:20px;transition:opacity .3s ease-in-out;}
.dm-products-grid.is-swapping{opacity:0;}
@media(prefers-reduced-motion:reduce){.dm-products-grid{transition:none;}}
@container (min-width:560px){.dm-products-grid{grid-template-columns:repeat(2,1fr);}}
@container (min-width:1000px){.dm-products-grid{grid-template-columns:repeat(3,1fr);}}

/* Search results grid: product cards centered, max 4 per row. Cards keep a fixed
   width (never stretched), so rows wrap 4→3→2→1 as the viewport narrows and each
   row — including a partial last row — stays centred. */
.dm-search{max-width:1280px;margin:0 auto;padding:0 20px;box-sizing:border-box;}
.dm-search-grid{display:flex;flex-wrap:wrap;justify-content:center;align-items:stretch;gap:20px;}
.dm-search-grid .dm-pcard{flex:0 0 auto;width:290px;max-width:100%;}
/* Equal-height cards (align-items:stretch) + push the category pill and the CTA
   to the bottom so every "Demander un devis" button lines up — same as the grid. */
.dm-search-grid .dm-pcard__cat{margin-top:auto;}
/* Zalando everywhere on the search page (same as the Produits page). */
.dm-search-page, .dm-search-page * { font-family: 'Zalando Sans Expanded', sans-serif !important; }

/* 404 page: Zalando everywhere + rounded-square buttons (red + outline kept,
   just pill → 15px radius like the home buttons). */
.dm-404-page, .dm-404-page * { font-family: 'Zalando Sans Expanded', sans-serif !important; }
.dm-404-page .dm-btn { border-radius: 15px; }

.dm-pcard{background:var(--dm-card);border:1px solid #E5E5E5;border-radius:20px;padding:10px;display:flex;flex-direction:column;gap:10px;position:relative;box-sizing:border-box;container-type:inline-size;}
/* Collapsed dot at rest → expands on hover to reveal the label (like the home cards) */
.dm-pcard__badge{position:absolute;top:18px;right:18px;z-index:3;height:26px;width:26px;padding:0;border-radius:100px;font-family:var(--dm-font-body);font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.04em;display:flex;align-items:center;justify-content:center;overflow:hidden;white-space:nowrap;box-sizing:border-box;color:#fff;transition:width .55s cubic-bezier(0.34,1.56,0.64,1),padding .55s cubic-bezier(0.34,1.56,0.64,1);}
.dm-pcard__badge.is-open{width:auto;padding:0 12px;}
.dm-pcard__badge>span{opacity:0;transition:opacity .2s ease;}
.dm-pcard__badge.is-open>span{opacity:1;transition:opacity .25s ease .25s;}
.dm-pcard__badge--nouvel_arrivage{background:var(--dm-navy);}
.dm-pcard__badge--nouveau{background:var(--dm-red);}
.dm-pcard__img{width:100%;aspect-ratio:1/1;background:#fff;border:1px solid #E6E6E6;border-radius:10px;display:flex;align-items:center;justify-content:center;overflow:hidden;padding:0;box-sizing:border-box;}
.dm-pcard__img img{width:100%;height:100%;object-fit:cover;display:block;}
.dm-pcard__title{font-family:var(--dm-font-body);font-size:clamp(18px,5.5cqw,21px);font-weight:500;color:#111;line-height:1.35;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;margin:0;flex-grow:1;}
.dm-pcard__cat{align-self:flex-start;display:inline-flex;align-items:center;padding:4px 11px;border-radius:100px;font-family:'Zalando Sans Expanded',var(--dm-font-body),sans-serif;font-size:clamp(10px,3cqw,12px);font-weight:600;line-height:1.5;text-transform:uppercase;letter-spacing:0;text-decoration:none;max-width:180px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;background:color-mix(in srgb, var(--dm-cat, #cccccc) 14%, #fff);border:1px solid color-mix(in srgb, var(--dm-cat, #cccccc) 30%, #fff);}
.dm-pcard__cat span{color:var(--dm-cat, #6F6F6F);mix-blend-mode:multiply;}
.dm-pcard__cat--empty{width:150px;max-width:100%;height:28px;background:#ECECEC;border:1px solid #E5E5E5;cursor:default;pointer-events:none;}
.dm-pcard__cta{width:100%;height:clamp(44px,12cqw,52px);background:#3E3E3E;border:none;border-radius:15px;color:#fff;font-family:'Zalando Sans Expanded',var(--dm-font-body),sans-serif;font-size:clamp(13px,3.8cqw,15px);font-weight:600;text-transform:uppercase;letter-spacing:.04em;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:8px;transition:background .18s;text-decoration:none;}
.dm-pcard__cta:hover{background:#222;}
.dm-pcard__cta--red{background:var(--dm-red);}
.dm-pcard__cta--red:hover{background:var(--dm-red-dark);}
/* 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-pcard__title-link{display:block;text-decoration:none;}
.dm-pcard__title-link::after{content:"";position:absolute;inset:0;z-index:1;border-radius:20px;}
.dm-pcard__cat{position:relative;z-index:2;}
.dm-pcard__cta{position:relative;z-index:2;}
/* Products grid: pin the pill + CTA to the bottom so every card's button lines up
   regardless of title length (1-line vs 2-line), matching the home cards. */
.dm-products-grid .dm-pcard{height:100%;}
.dm-products-grid .dm-pcard__cat{margin-top:auto;}

/* ---- Products page entrance animations ----
   Hero + filters fade-up on load (pure CSS); product cards reveal with a
   staggered fade-up as they enter the viewport. The card hidden state is
   JS-gated (.dm-anim added by products-filter.js) so cards stay visible with
   JS disabled. .dm-pcard has no hover transform, so this can't fight :hover. */
@keyframes dmProdIn{from{opacity:0;transform:translateY(24px);}to{opacity:1;transform:none;}}
.dm-products-page .dm-page-hero{animation:dmProdIn .55s cubic-bezier(.22,.61,.36,1) both;}
@media(min-width:981px){.dm-products-page .dm-filters{animation:dmProdIn .6s cubic-bezier(.22,.61,.36,1) .1s both;}}
#dm-products-grid.dm-anim .dm-pcard{opacity:0;transform:translateY(26px);transition:opacity .5s cubic-bezier(.22,.61,.36,1),transform .5s cubic-bezier(.22,.61,.36,1);}
#dm-products-grid.dm-anim .dm-pcard.is-in{opacity:1;transform:none;}
@media(prefers-reduced-motion:reduce){
  .dm-products-page .dm-page-hero,.dm-products-page .dm-filters{animation:none;}
  #dm-products-grid.dm-anim .dm-pcard{opacity:1;transform:none;transition:none;}
}

/* ---- Pagination ---- */
.dm-pagination{display:flex;justify-content:center;gap:8px;margin:40px 0;font-family:var(--dm-font-body);}
.dm-pagination .page-numbers{display:inline-flex;align-items:center;justify-content:center;min-width:40px;height:40px;padding:0 12px;border-radius:100px;background:#F2F2F2;color:#333;text-decoration:none;font-weight:600;font-size:14px;}
.dm-pagination .page-numbers.current{background:var(--dm-navy);color:#fff;}
.dm-pagination .page-numbers:hover{background:#e0e0e0;}
.dm-pagination .page-numbers.current:hover{background:var(--dm-navy);}

/* ---- Empty state ---- */
.dm-empty{text-align:center;padding:60px 20px;color:var(--dm-text);font-family:var(--dm-font-body);}

/* ---- Footer ---- */
.dmv2-footer{background:var(--dm-navy);color:#fff;width:100%;padding:56px 20px 24px;box-sizing:border-box;margin-top:64px;font-family:var(--dm-font-body);}
/* Footer typography → Zalando Sans Expanded everywhere. */
.dmv2-footer, .dmv2-footer * { font-family: 'Zalando Sans Expanded', sans-serif !important; }
.dmv2-footer-inner{max-width:var(--dm-max);margin:0 auto;}
.dmv2-footer-top{display:grid;grid-template-columns:1.6fr .9fr 1fr 1.4fr;gap:40px;align-items:start;}
.dmv2-footer-brand{display:flex;flex-direction:column;gap:18px;}
.dmv2-footer-logo svg{width:190px;height:auto;}
.dmv2-footer-tagline{color:#B9CBDE;font-size:13px;line-height:1.6;max-width:340px;margin:0;}
.dmv2-footer-socials{display:flex;gap:10px;}
.dmv2-social{width:36px;height:36px;border-radius:50%;background:#0b4f92;display:flex;align-items:center;justify-content:center;transition:background .2s;}
.dmv2-social:hover{background:var(--dm-red);}
.dmv2-footer-col{display:flex;flex-direction:column;gap:12px;}
.dmv2-footer-col h4,.dmv2-footer-newsletter h4{font-family:var(--dm-font-head);font-weight:500;font-size:15px;text-transform:uppercase;letter-spacing:.5px;color:#fff;margin:0 0 4px;}
.dmv2-footer-col a{color:#B9CBDE;text-decoration:none;font-size:13.5px;transition:color .2s;width:fit-content;}
.dmv2-footer-col a:hover{color:#fff;}
.dmv2-footer-newsletter p{color:#B9CBDE;font-size:12.5px;line-height:1.6;margin:0 0 14px;}
.dmv2-newsletter-form{display:flex;background:#fff;border-radius:12px;padding:5px 5px 5px 16px;align-items:center;max-width:420px;}
.dmv2-newsletter-form input{flex:1;border:none;outline:none;background:transparent;font-family:var(--dm-font-body);font-size:13px;color:#333;min-width:0;}
.dmv2-newsletter-form button{background:var(--dm-red);color:#fff;border:none;border-radius:8px;padding:11px 20px;font-family:var(--dm-font-body);font-weight:600;font-size:12.5px;cursor:pointer;transition:background .2s;white-space:nowrap;}
.dmv2-newsletter-form button:hover{background:var(--dm-red-dark);}
.dmv2-newsletter-msg{font-size:12px;margin-top:8px;min-height:16px;}
.dmv2-footer-divider{height:1px;background:#0f4f8c;margin:40px 0 20px;}
/* 3 columns (1fr auto 1fr) so the Tradix logo sits at the PAGE centre, independent
   of the copyright/legal widths (not space-between'd between them). */
.dmv2-footer-bottom{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:16px;color:#B9CBDE;font-size:12.5px;}
.dmv2-footer-copy{justify-self:start;}
.dmv2-footer-credit{justify-self:center;display:inline-flex;line-height:0;}
.dmv2-footer-tradix{height:40px;width:auto;display:block;}
.dmv2-footer-legal{justify-self:end;display:flex;gap:18px;}
.dmv2-footer-legal a{color:#B9CBDE;text-decoration:none;}
.dmv2-footer-legal a:hover{color:#fff;}
/* Tablet + mobile: everything centered in one column */
@media (max-width:900px){
  .dmv2-footer{text-align:center;}
  .dmv2-footer-top{grid-template-columns:1fr;gap:34px;justify-items:center;}
  .dmv2-footer-brand{align-items:center;text-align:center;}
  .dmv2-footer-tagline{max-width:460px;margin:0 auto;}
  .dmv2-footer-socials{justify-content:center;}
  .dmv2-footer-col{align-items:center;text-align:center;}
  .dmv2-footer-col a{width:auto;}
  .dmv2-footer-newsletter{text-align:center;width:100%;max-width:480px;}
  .dmv2-newsletter-form{margin:0 auto;}
  .dmv2-footer-bottom{grid-template-columns:1fr;justify-items:center;text-align:center;gap:16px;}
  .dmv2-footer-copy,.dmv2-footer-credit,.dmv2-footer-legal{justify-self:center;}
  .dmv2-footer-legal{flex-wrap:wrap;justify-content:center;gap:8px 18px;}
}
@media (max-width:560px){
  .dmv2-footer{padding:44px 18px 22px;}
  .dmv2-footer-top{gap:28px;}
}

/* ---- Prose (generic page content) ---- */
.dm-prose{max-width:860px;font-family:var(--dm-font-body);color:#333;font-size:16px;line-height:1.7;padding-top:24px;padding-bottom:24px;}
.dm-prose h2{font-family:var(--dm-font-head);color:var(--dm-navy);font-size:22px;font-weight:500;margin:32px 0 10px;}
.dm-prose h3{font-family:var(--dm-font-head);color:var(--dm-navy);font-size:18px;font-weight:500;margin:24px 0 8px;}
.dm-prose p{margin:0 0 16px;}
.dm-prose ul,.dm-prose ol{margin:0 0 16px;padding-left:22px;}
.dm-prose li{margin:6px 0;}
.dm-prose a{color:var(--dm-red);text-decoration:underline;}
.dm-prose strong{color:#111;}
.dm-prose img{max-width:100%;height:auto;border-radius:10px;}

/* ---- Single product (Figma 135-110) ---- */
.dm-btn--dark{background:#3D3D3D;color:#fff;}
.dm-btn--dark:hover{background:#2b2b2b;}

/* Single product page uses Zalando Sans Expanded (the theme default head font is
   Zalando Sans Expanded); scoped to .dm-sp so header/footer/related cards are untouched. */
.dm-sp{padding-bottom:8px;--dm-font-head:'Zalando Sans Expanded',sans-serif;}
/* One shared container for hero + description + related so their widths match.
   Full 1240 at wide screens; responsive side padding only once the viewport can no
   longer center it (so nothing touches the screen edge on narrow screens). */
.dm-sp-wrap{max-width:1240px;margin:0 auto;padding:0;box-sizing:border-box;}
@media(max-width:1320px){.dm-sp-wrap{padding-left:clamp(16px,4vw,40px);padding-right:clamp(16px,4vw,40px);}}

/* Hero: two columns kept the same height (horizontal padding comes from the wrap) */
.dm-sp-hero{display:flex;gap:clamp(24px,4vw,48px);align-items:stretch;padding-top:clamp(24px,4vw,48px);padding-bottom:clamp(24px,4vw,48px);}
@media(max-width:900px){.dm-sp-hero{flex-direction:column;}}

/* Gallery — square principal image drives the height; thumbnails (left) are
   absolutely placed and scroll within that height when there are many. */
/* Gallery sizes to the square (never stretches taller than it), so the thumb rail
   always aligns with the image. The left gutter is only reserved when thumbs exist. */
.dm-sp-gallery{position:relative;align-self:flex-start;flex:0 0 auto;width:clamp(320px,44vw,560px);box-sizing:border-box;}
.dm-sp-gallery:has(.dm-sp-thumbs){padding-left:calc(clamp(58px,6vw,84px) + 14px);}
.dm-sp-thumbs{position:absolute;left:0;top:0;bottom:0;width:clamp(58px,6vw,84px);display:flex;flex-direction:column;gap:12px;overflow-y:auto;overflow-x:hidden;scrollbar-width:thin;scrollbar-color:#c7ccd4 transparent;}
.dm-sp-thumbs::-webkit-scrollbar{width:6px;}
.dm-sp-thumbs::-webkit-scrollbar-thumb{background:#c7ccd4;border-radius:10px;}
.dm-sp-thumbs::-webkit-scrollbar-track{background:transparent;}
.dm-sp-thumb{width:100%;aspect-ratio:1/1;flex:0 0 auto;border-radius:10px;background:#fff;border:1px solid #D9D9D9;padding:0;cursor:pointer;overflow:hidden;transition:border-color .18s;box-sizing:border-box;}
.dm-sp-thumb:hover{border-color:#b7bbc2;}
.dm-sp-thumb.active{border:2px solid var(--dm-red);}
.dm-sp-thumb img{width:100%;height:100%;object-fit:cover;display:block;}
.dm-sp-main{width:100%;aspect-ratio:1/1;background:#fff;border:1px solid #E6E6E6;border-radius:16px;overflow:hidden;display:flex;align-items:center;justify-content:center;padding:0;box-sizing:border-box;cursor:zoom-in;}
.dm-sp-main img{width:100%;height:100%;object-fit:cover;display:block;}

/* Full-screen image lightbox (click the principal image to open) */
.dm-sp-lightbox{position:fixed;inset:0;z-index:3000;display:none;align-items:center;justify-content:center;padding:clamp(16px,5vw,60px);background:rgba(10,15,25,.92);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);cursor:zoom-out;opacity:0;transition:opacity .2s ease;}
.dm-sp-lightbox.open{display:flex;opacity:1;}
.dm-sp-lightbox__img{max-width:100%;max-height:100%;object-fit:contain;background:#fff;border-radius:10px;padding:clamp(10px,2vw,26px);box-sizing:border-box;box-shadow:0 24px 70px rgba(0,0,0,.5);cursor:default;}
.dm-sp-lightbox__close{position:absolute;top:clamp(14px,3vw,28px);right:clamp(14px,3vw,28px);width:44px;height:44px;border:none;border-radius:50%;background:rgba(255,255,255,.14);color:#fff;font-size:26px;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background .18s ease;}
.dm-sp-lightbox__close:hover{background:rgba(255,255,255,.3);}
/* Mobile: stack the image, then a horizontal scrollable thumb row below it */
@media(max-width:900px){
  /* Stack: image on top (capped so it doesn't dominate on tablets), thumbs as a
     horizontal scrollable row below it. */
  .dm-sp-gallery{width:100%;max-width:480px;margin-left:auto;margin-right:auto;display:flex;flex-direction:column;}
  .dm-sp-gallery:has(.dm-sp-thumbs){padding-left:0;}
  .dm-sp-main{order:1;}
  .dm-sp-thumbs{position:static;order:2;flex-direction:row;width:auto;top:auto;bottom:auto;left:auto;gap:10px;margin-top:12px;overflow-x:auto;overflow-y:hidden;scrollbar-width:none;}
  .dm-sp-thumbs::-webkit-scrollbar{display:none;}
  .dm-sp-thumb{width:clamp(58px,16vw,84px);}
}
/* Phones: stack the two action buttons full-width (they don't fit side by side) */
@media(max-width:560px){
  .dm-sp-actions{flex-direction:column;align-items:stretch;gap:10px;}
  .dm-sp-actions .dm-share{width:100%;}
  .dm-sp-actions .dm-share .dm-btn,
  .dm-sp-actions > .dm-btn{width:100%;}
  .dm-share-menu{left:0;right:0;}
}

/* Details column — matches the gallery height; actions pinned bottom */
.dm-sp-details{flex:1 1 0;min-width:0;display:flex;flex-direction:column;gap:20px;}
.dm-sp-head{display:flex;flex-direction:column;gap:5px;flex:0 0 auto;}
.dm-sp-title{font-family:var(--dm-font-head);font-weight:700;font-size:clamp(24px,3vw,36px);line-height:1.12;color:var(--dm-navy);margin:0;}
.dm-sp-excerpt{font-family:var(--dm-font-head);font-weight:400;color:#5E5E5E;font-size:clamp(14px,1.1vw,16px);line-height:1.5;margin:0;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;}

/* Meta row (between description and files): category pill + certification icons */
.dm-sp-meta{display:flex;align-items:center;flex-wrap:wrap;gap:10px;flex:0 0 auto;}
.dm-sp-cat{display:inline-flex;align-items:center;padding:6px 15px;border-radius:100px;font-family:var(--dm-font-head);font-size:12px;font-weight:600;text-transform:uppercase;letter-spacing:.02em;text-decoration:none;background:color-mix(in srgb,var(--pill,#ccc) 14%,#fff);border:1px solid color-mix(in srgb,var(--pill,#ccc) 30%,#fff);transition:filter .18s ease;}
.dm-sp-cat:hover{filter:brightness(.97);}
.dm-sp-cat span{color:var(--pill,#6F6F6F);mix-blend-mode:multiply;}
.dm-sp-cert{display:inline-flex;align-items:center;justify-content:center;}
.dm-sp-cert img{height:42px;width:auto;max-width:100%;object-fit:contain;display:block;}

/* Files box — fills the middle; the list scrolls when files overflow */
/* Hugs its content; can shrink + scroll (grid overflow) only when the column runs
   out of room. The bottom actions keep pinned via margin-top:auto, so any slack
   sits between the files box and the buttons rather than inflating the box. */
.dm-sp-files{background:#F2F2F2;border-radius:16px;padding:10px;flex:0 1 auto;min-height:0;display:flex;flex-direction:column;gap:12px;overflow:hidden;box-sizing:border-box;}
.dm-sp-files__head{font-family:var(--dm-font-head);font-weight:700;font-size:14px;color:var(--dm-navy);text-transform:uppercase;letter-spacing:.02em;flex:0 0 auto;}
.dm-sp-files__grid{flex:1 1 auto;min-height:0;overflow-y:auto;overflow-x:hidden;display:grid;grid-template-columns:1fr 1fr;gap:12px;align-content:start;padding-right:4px;scrollbar-width:thin;}
@media(max-width:520px){.dm-sp-files__grid{grid-template-columns:1fr;}}
/* Fixed-width pill (grid cell); the title never wraps and marquee-scrolls on hover */
.dm-sp-file{display:flex;align-items:center;gap:10px;background:#fff;border-radius:100px;padding:6px;text-decoration:none;overflow:hidden;min-width:0;}
.dm-sp-file__badge{flex:0 0 auto;width:34px;height:34px;border-radius:100px;display:flex;align-items:center;justify-content:center;color:#fff;font-family:var(--dm-font-head);font-weight:700;font-size:9px;line-height:1;text-align:center;letter-spacing:.02em;}
/* File carries a certificate → show its icon instead of the coloured type badge */
.dm-sp-file__badge--cert{background:transparent;}
.dm-sp-file__badge--cert img{width:34px;height:34px;object-fit:contain;display:block;}
.dm-sp-file__name{flex:1 1 auto;min-width:0;overflow:hidden;}
.dm-sp-file__track{display:inline-block;white-space:nowrap;will-change:transform;}
.dm-sp-file__text{font-family:var(--dm-font-head);font-weight:600;font-size:12px;color:#333;white-space:nowrap;}
.dm-sp-file__dl{flex:0 0 auto;width:30px;height:30px;border-radius:100px;background:#F2F2F5;color:#5E5E5E;display:flex;align-items:center;justify-content:center;transition:background .18s;}
.dm-sp-file:hover .dm-sp-file__dl{background:#e7e7ec;}

/* Actions row (bottom-aligned) */
.dm-sp-actions{display:flex;align-items:center;justify-content:space-between;gap:12px;flex:0 0 auto;margin-top:auto;flex-wrap:wrap;}
.dm-sp-actions .dm-btn{padding:14px 26px;font-size:14px;border-radius:15px;}

/* Share dropdown (opens above the button) */
.dm-share{position:relative;}
.dm-share-menu{position:absolute;bottom:calc(100% + 8px);left:0;background:#fff;border-radius:12px;box-shadow:0 8px 30px rgba(0,0,0,.16);padding:6px;display:none;flex-direction:column;min-width:170px;z-index:30;}
.dm-share.open .dm-share-menu{display:flex;}
.dm-share-menu a{padding:9px 14px;border-radius:8px;text-decoration:none;color:#333;font-family:var(--dm-font-body);font-size:13.5px;}
.dm-share-menu a:hover{background:#F2F2F2;}

/* Description box */
.dm-sp-desc-wrap{margin-top:8px;}
.dm-sp-desc{background:#F2F2F2;border-radius:16px;padding:clamp(20px,3vw,28px) clamp(20px,3.5vw,32px);}
.dm-sp-desc__title{font-family:var(--dm-font-head);font-weight:700;font-size:clamp(18px,2.4vw,22px);color:var(--dm-navy);text-transform:uppercase;margin:0 0 12px;}
.dm-sp-desc__body{font-family:var(--dm-font-head);font-weight:400;color:#5E5E5E;font-size:16px;line-height:1.6;max-height:180px;overflow:hidden;position:relative;transition:max-height .4s ease;}
.dm-sp-desc__body.expanded{max-height:4000px;}
.dm-sp-desc__body:not(.expanded)::after{content:'';position:absolute;bottom:0;left:0;right:0;height:64px;background:linear-gradient(transparent,#F2F2F2);pointer-events:none;}
.dm-sp-desc__body p{margin:0 0 14px;}
.dm-sp-desc__body p:last-child{margin-bottom:0;}
.dm-sp-desc__body ul,.dm-sp-desc__body ol{margin:0 0 14px;padding-left:22px;}
.dm-sp-desc__body ul{list-style:disc;}
.dm-sp-desc__body ol{list-style:decimal;}
.dm-sp-desc__body li{margin:5px 0;padding-left:2px;}
.dm-sp-desc__body li::marker{color:var(--dm-navy);}
.dm-sp-desc__body h3,.dm-sp-desc__body h4{font-family:var(--dm-font-head);font-weight:700;color:var(--dm-navy);font-size:16px;line-height:1.35;margin:18px 0 8px;}
.dm-sp-desc__body h3:first-child,.dm-sp-desc__body h4:first-child{margin-top:0;}
.dm-sp-desc__body strong{font-weight:600;color:#3d3d3d;}
.dm-sp-desc__foot{display:flex;justify-content:flex-end;margin-top:14px;}
.dm-sp-voirplus{display:inline-flex;align-items:center;gap:6px;background:#E6E6E6;color:#3D3D3D;border:none;border-radius:15px;padding:10px 15px;font-family:var(--dm-font-head);font-weight:500;font-size:14px;text-transform:uppercase;letter-spacing:.02em;cursor:pointer;transition:background .18s ease;}
.dm-sp-voirplus:hover{background:#d6d6d6;}
.dm-sp-voirplus__arrow{display:inline-flex;align-items:center;transform:rotate(90deg);transition:transform .25s ease;}
.dm-sp-voirplus.is-open .dm-sp-voirplus__arrow{transform:rotate(-90deg);}
.dm-sp-voirplus__arrow svg{width:16px;height:auto;display:block;}

/* Produits connexes — home-style slider */
.dm-sp-related{padding:clamp(28px,4vw,44px) 0 clamp(40px,6vw,60px);overflow-x:clip;}
.dm-sp-related__top{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;margin-bottom:4px;}
.dm-sp-related__title{font-family:var(--dm-font-head);font-weight:700;font-size:clamp(24px,3.2vw,32px);color:var(--dm-navy);margin:0;}
.dm-sp-related__desc{font-family:var(--dm-font-body);color:#5E5E5E;font-size:16px;margin:4px 0 0;}
.dm-sp-related__arrows{display:flex;gap:12px;flex:0 0 auto;}
@media(max-width:640px){.dm-sp-related__arrows{display:none;}}
/* Confined to the content width — NO full-bleed — so exactly N cards fit with
   nothing peeking/cut off at the edge. The arrows page by a full set of N cards,
   so one click swaps the whole visible group at once. */
.dm-sp-related__slider{display:flex;gap:20px;overflow-x:auto;overflow-y:hidden;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;scrollbar-width:none;padding:24px 0 6px;}
.dm-sp-related__slider::-webkit-scrollbar{display:none;}
/* Exactly N cards fully visible (4 desktop / 3 / 2 / 1), no partial card.
   Overrides the home card's fixed width (site.css loads after darelmed-v2.css so
   this wins). Card width is set by JS from the CONTENT width so N cards fill it. */
.dm-sp-related__slider .product-card{scroll-snap-align:start;flex:0 0 var(--rel-card-w,290px)!important;width:var(--rel-card-w,290px)!important;min-width:0!important;}

/* ---- Products archive + filters ---- */
.dm-archive{display:grid;grid-template-columns:300px 1fr;gap:32px;align-items:start;padding-top:8px;}
/* Tablet range: the 300px filter leaves too little room, so 2 cards won't fit
   (Surface Pro 912, iPad Pro 1024). Narrow the sidebar so 2 cards still fit. */
@media(min-width:901px) and (max-width:1200px){.dm-archive{grid-template-columns:240px 1fr;gap:20px;}}
@media(max-width:900px){.dm-archive{grid-template-columns:1fr;}}
/* Products page: Zalando everywhere + 0-gap hero (heading ↔ description) */
.dm-products-page, .dm-products-page * { font-family: 'Zalando Sans Expanded', sans-serif !important; }
.dm-products-page .dm-page-hero p { margin-top: 4px; }
/* Tighter products hero — less gap between header, heading and description */
.dm-products-page .dm-page-hero{padding-top:14px;padding-bottom:2px;}
.dm-products-page .dm-page-hero h1{line-height:1.04;}
/* Wider than the default 1400 so a big screen fits 3 comfortable cards (else it drops to 2) */
.dm-products-page .dm-page-hero, .dm-products-page .dm-archive { max-width: 1600px; }

/* ===== Products filter sidebar — Figma "Filters" (164:404) ===== */
/* Sticky panel capped at the viewport height; the category list scrolls inside.
   (max-height means it still hugs its content when short — e.g. all collapsed.) */
.dm-filters{background:#F2F2F2;border-radius:16px;padding:10px;position:sticky;top:10px;display:flex;flex-direction:column;max-height:calc(100vh - 20px);box-sizing:border-box;}
.dm-filters-form{display:flex;flex-direction:column;gap:16px;min-height:0;flex:1 1 auto;}
.dm-filters-head,.dm-filter-search,.dm-filter-badges{flex:0 0 auto;}
/* badge pills on one line — scroll horizontally, never wrap (may clip at the edge) */
/* Full-bleed to the frame edge: negative margins cancel the frame's 10px padding
   so pills clip at the frame border (not 10px inside it); inner padding keeps the
   first pill aligned with the rest of the content. */
.dm-filter-badges{display:flex;gap:8px;overflow-x:auto;overflow-y:hidden;flex-wrap:nowrap;scrollbar-width:none;-ms-overflow-style:none;margin-left:-10px;margin-right:-10px;padding-left:10px;padding-right:10px;}
.dm-filter-badges::-webkit-scrollbar{display:none;}
.dm-filters-head{display:flex;align-items:center;justify-content:space-between;font-family:'Zalando Sans Expanded',var(--dm-font-head),sans-serif;font-weight:600;font-size:19px;text-transform:uppercase;color:var(--dm-navy);letter-spacing:.02em;}
.dm-filters-close{display:none;background:none;border:none;font-size:20px;cursor:pointer;color:#666;}
.dm-filters-head-actions{display:flex;align-items:center;gap:4px;}
.dm-filters-reset{display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;padding:0;background:none;border:none;cursor:pointer;color:#8C9299;border-radius:8px;transition:color .15s,background .15s;}
.dm-filters-reset:hover{color:var(--dm-red);background:rgba(0,0,0,.05);}
.dm-filters-reset svg{width:18px;height:18px;}

/* Search */
.dm-filter-search{display:flex;align-items:center;gap:10px;background:#fff;border:1px solid #e0e3e8;border-radius:100px;padding:0 16px;height:42px;}
.dm-filter-search__icon{display:flex;align-items:center;justify-content:center;flex-shrink:0;color:#999ea8;}
.dm-filter-search__icon svg{width:18px;height:18px;}
.dm-filter-search input{flex:1;min-width:0;height:100%;border:none;background:none;outline:none;font-family:'Zalando Sans Expanded',var(--dm-font-body),sans-serif;font-size:14px;color:#333;}
.dm-filter-search input::placeholder{color:#999ea8;font-family:'Zalando Sans Expanded',var(--dm-font-body),sans-serif;}

/* NOUVEAUX red toggle pill (white → red when checked) */
/* Grey chip by default; fills with the badge's own colour when selected. No checkbox. */
.dm-newpill{display:inline-flex;align-items:center;justify-content:center;cursor:pointer;flex:0 0 auto;width:fit-content;white-space:nowrap;background:#e3e5e9;border:1px solid transparent;border-radius:100px;padding:9px 16px;font-family:'Zalando Sans Expanded',var(--dm-font-head),sans-serif;font-weight:600;font-size:13px;text-transform:uppercase;color:#5b6068;transition:background .18s,color .18s,border-color .18s;}
.dm-newpill input{position:absolute;opacity:0;width:0;height:0;}
.dm-newpill--nouveau.is-on,.dm-newpill--nouveau:has(input:checked){background:var(--dm-red);border-color:var(--dm-red);color:#fff;}
.dm-newpill--arrivage.is-on,.dm-newpill--arrivage:has(input:checked){background:var(--dm-navy);border-color:var(--dm-navy);color:#fff;}

/* Category accordion groups — this list scrolls inside the sticky panel */
.dm-filters-cats{display:flex;flex-direction:column;gap:10px;flex:1 1 auto;min-height:0;overflow-y:auto;overflow-x:hidden;padding-right:4px;margin-right:-4px;}
.dm-fgroup{display:flex;flex-direction:column;}
/* header row: clicking it (anywhere but the checkbox) toggles the accordion */
.dm-fgroup__head{display:flex;align-items:center;gap:10px;background:#fff;border:1px solid #e0e3e8;border-radius:10px;padding:13px 14px;cursor:pointer;user-select:none;transition:background .15s ease,border-color .15s ease;}
@media(hover:hover){.dm-fgroup__head:hover{background:#eaebef;border-color:#d9dce2;}}
.dm-fgroup__head:focus-visible{outline:2px solid var(--dm-navy);outline-offset:2px;}
/* the checkbox control is the ONLY selectable part of the header */
.dm-fcheck__control{display:inline-flex;align-items:center;flex-shrink:0;cursor:pointer;position:relative;}
.dm-fcheck__control input{position:absolute;opacity:0;width:0;height:0;}
/* shared checkbox box (parent control + sub-item labels) */
.dm-fcheck__box{width:20px;height:20px;border-radius:5px;border:1.5px solid #b8bdc4;background:#fff;flex-shrink:0;display:inline-flex;align-items:center;justify-content:center;transition:all .15s;box-sizing:border-box;}
.dm-fcheck__control input:checked + .dm-fcheck__box,
.dm-fcheck input:checked + .dm-fcheck__box{background:var(--dm-red);border-color:var(--dm-red);}
.dm-fcheck__control input:checked + .dm-fcheck__box::after,
.dm-fcheck input:checked + .dm-fcheck__box::after{content:'';width:5px;height:9px;border:solid #fff;border-width:0 2px 2px 0;transform:rotate(45deg);margin-top:-2px;}
.dm-fgroup__name{flex:1;min-width:0;font-family:'Zalando Sans Expanded',var(--dm-font-head),sans-serif;font-weight:700;font-size:13px;color:#262626;line-height:1.2;}
.dm-fgroup__chevron-btn{display:flex;align-items:center;justify-content:center;width:22px;height:22px;flex-shrink:0;color:#7a7f87;}
.dm-fgroup__chevron{width:16px;height:16px;transition:transform .25s ease;}
.dm-fgroup.is-open .dm-fgroup__chevron{transform:rotate(180deg);}
.dm-fgroup__children{display:none;flex-direction:column;gap:12px;padding:10px 0 2px 8px;}
.dm-fgroup.is-open .dm-fgroup__children{display:flex;}
/* sub-item rows: the whole label is clickable (selects the sub) */
.dm-fcheck{display:flex;align-items:center;gap:10px;cursor:pointer;position:relative;font-family:var(--dm-font-body);}
.dm-fcheck input{position:absolute;opacity:0;width:0;height:0;}
.dm-fcheck--sub .dm-fcheck__label{flex:1;min-width:0;font-family:var(--dm-font-body);font-weight:400;font-size:14px;color:#4d5259;line-height:1.3;}

/* infinite-scroll loader + sentinel */
.dm-products-loader{display:none;justify-content:center;padding:26px 0;}
.dm-products-loader.is-active{display:flex;}
.dm-spinner{width:26px;height:26px;border-radius:50%;border:3px solid #e0e3e8;border-top-color:var(--dm-navy);animation:dm-spin .7s linear infinite;}
@keyframes dm-spin{to{transform:rotate(360deg);}}
#dm-products-sentinel{height:1px;}
.dm-archive-content{min-width:0;}
.dm-filters-overlay{display:none;}

/* Compact red round filter FAB — mobile only, fixed in the bottom-right corner */
.dm-filter-fab{display:none;position:fixed;bottom:18px;right:18px;z-index:1150;width:52px;height:52px;padding:0;border:none;border-radius:50%;background:var(--dm-red);color:#fff;cursor:pointer;align-items:center;justify-content:center;box-shadow:0 6px 18px rgba(0,0,0,.22);transition:opacity .25s ease,transform .25s ease;}
.dm-filter-fab:active{transform:scale(.94);}
.dm-filter-fab.is-hidden{opacity:0;transform:scale(.8);pointer-events:none;}

/* Action bar — "Réinitialiser" + "Filtrer", pinned at the bottom of the mobile sheet (mobile only) */
.dm-filters-apply{display:none;flex:0 0 auto;gap:10px;padding:12px 0 14px;background:#F2F2F2;}
.dm-filters-apply-btn,.dm-filters-apply-reset{flex:1 1 0;height:52px;border-radius:15px;font-family:'Zalando Sans Expanded',var(--dm-font-head),sans-serif;font-weight:600;text-transform:uppercase;letter-spacing:.03em;cursor:pointer;transition:background .2s,border-color .2s,color .2s,transform .12s;}
.dm-filters-apply-btn{border:none;background:var(--dm-navy);color:#fff;font-size:14px;}
.dm-filters-apply-btn:hover{background:var(--dm-navy-dark);}
.dm-filters-apply-reset{border:1.5px solid #D5D8DE;background:#fff;color:#5b6068;font-size:13px;}
.dm-filters-apply-reset:hover{border-color:var(--dm-red);color:var(--dm-red);}
.dm-filters-apply-btn:active,.dm-filters-apply-reset:active{transform:scale(.98);}

@media(max-width:900px){
  /* Bottom sheet: slides up from the bottom; header/search/pills fixed, list
     scrolls, "Filtrer" pinned at the bottom. */
  .dm-filters{position:fixed;left:0;right:0;bottom:0;top:auto;width:100%;max-width:540px;margin:0 auto;height:88vh;max-height:88vh;z-index:1200;border-radius:20px 20px 0 0;padding:16px 16px 0;transform:translateY(100%);transition:transform .35s cubic-bezier(.4,0,.2,1);overflow:hidden;display:flex;flex-direction:column;box-shadow:0 -8px 30px rgba(0,0,0,.18);}
  .dm-filters.open{transform:translateY(0);}
  .dm-filters-form{flex:1 1 auto;min-height:0;display:flex;flex-direction:column;gap:14px;}
  .dm-filters-head,.dm-filter-search,.dm-filter-badges{flex:0 0 auto;}
  /* Full-bleed to the sheet edge — sheet padding is 16px here, not 10px. */
  .dm-filter-badges{margin-left:-16px;margin-right:-16px;padding-left:16px;padding-right:16px;}
  .dm-filters-cats{flex:1 1 auto;min-height:0;overflow-y:auto;overflow-x:hidden;}
  .dm-filters-close{display:block;}
  .dm-filters-reset{display:none;} /* redundant on mobile — reset lives in the bottom bar */
  .dm-filter-fab{display:flex;}
  .dm-filters-apply{display:flex;}
  .dm-filters-overlay.open{display:block;position:fixed;inset:0;background:rgba(0,0,0,.4);z-index:1100;}
}

/* ---- Newsletter section ---- */
.dm-newsletter-sec{max-width:var(--dm-max);margin:56px auto 0;padding:0 20px;box-sizing:border-box;}
.dm-newsletter-card{background:var(--dm-navy);border-radius:20px;padding:40px;display:flex;align-items:center;justify-content:space-between;gap:32px;flex-wrap:wrap;}
.dm-newsletter-card h3{font-family:var(--dm-font-head);font-weight:400;font-size:clamp(22px,3vw,30px);color:#fff;text-transform:uppercase;margin:0 0 6px;}
.dm-newsletter-card p{font-family:var(--dm-font-body);color:#B9CBDE;font-size:14px;margin:0;max-width:420px;}
.dm-newsletter-card .dmv2-newsletter-form{flex:1;min-width:280px;max-width:460px;}
.dm-newsletter-card .dmv2-newsletter-msg{color:#B9CBDE;}

/* ---- Modal (devis popup) ---- */
/* The MODAL is the scroll container (block flow) — a flex-centered card can't be
   scrolled to its top when taller than the viewport, so the whole modal scrolls
   instead. The overlay is fixed so it always covers the viewport. */
.dm-modal{position:fixed;inset:0;z-index:2000;display:none;overflow-y:auto;overflow-x:hidden;-webkit-overflow-scrolling:touch;padding:24px;box-sizing:border-box;}
.dm-modal.open{display:flex;align-items:flex-start;justify-content:center;}
.dm-modal-overlay{position:fixed;inset:0;background:rgba(6,20,40,.55);backdrop-filter:blur(2px);}
/* margin:auto centres the card when it fits, and lets the modal scroll when it
   doesn't (no flex-centering cut-off). */
.dm-modal-card{position:relative;margin:auto;background:#fff;border-radius:20px;width:100%;max-width:620px;box-shadow:0 20px 70px rgba(0,0,0,.3);animation:dmModalIn .28s cubic-bezier(.34,1.56,.64,1);}
@keyframes dmModalIn{from{opacity:0;transform:translateY(20px) scale(.97);}to{opacity:1;transform:none;}}
.dm-modal-head{display:flex;align-items:center;justify-content:space-between;padding:20px 24px;border-bottom:1px solid #eee;position:sticky;top:0;background:#fff;border-radius:20px 20px 0 0;z-index:2;}
.dm-modal-head h3{font-family:var(--dm-font-head);font-weight:500;font-size:20px;color:var(--dm-navy);text-transform:uppercase;margin:0;}
.dm-modal-x{background:none;border:none;font-size:20px;color:#888;cursor:pointer;line-height:1;padding:4px;}
.dm-modal-x:hover{color:#333;}
.dm-modal-body{padding:22px 24px 26px;}
.dm-devis-form{display:flex;flex-direction:column;gap:14px;}
.dm-devis-product{display:flex;align-items:center;justify-content:space-between;gap:16px;background:#F2F2F2;border-radius:12px;padding:14px 16px;flex-wrap:wrap;}
.dm-devis-product-name{font-family:var(--dm-font-body);font-weight:600;color:#111;font-size:15px;}
.dm-qty{display:inline-flex;align-items:center;background:#fff;border-radius:100px;overflow:hidden;}
.dm-qty-btn{width:38px;height:38px;border:none;background:#fff;font-size:18px;cursor:pointer;color:#333;}
.dm-qty-btn:hover{background:#eee;}
.dm-qty-input{width:44px;text-align:center;border:none;font-family:var(--dm-font-body);font-weight:600;font-size:15px;background:transparent;}
.dm-field-row{display:grid;grid-template-columns:1fr 1fr;gap:14px;}
@media(max-width:520px){.dm-field-row{grid-template-columns:1fr;}}
.dm-field{display:flex;flex-direction:column;gap:6px;}
.dm-field label{font-family:var(--dm-font-body);font-size:12.5px;font-weight:600;color:#333;}
.dm-field input,.dm-field textarea{font-family:var(--dm-font-body);font-size:14px;border:1px solid #E0E0E0;border-radius:10px;padding:11px 13px;background:#FAFAFA;outline:none;transition:border-color .2s;color:#222;}
.dm-field input:focus,.dm-field textarea:focus{border-color:var(--dm-navy);}
.dm-field textarea{resize:vertical;}
.dm-devis-submit{width:100%;margin-top:4px;}
.dm-devis-error{color:#c0191f;font-family:var(--dm-font-body);font-size:13px;min-height:0;}
.dm-devis-error.show{margin-top:-4px;}
.dm-devis-success{text-align:center;padding:20px 10px;display:flex;flex-direction:column;align-items:center;gap:8px;}
.dm-devis-success-icon{width:72px;height:72px;border-radius:50%;background:#E7F6E4;display:flex;align-items:center;justify-content:center;}
.dm-devis-success h4{font-family:var(--dm-font-head);font-weight:500;font-size:22px;color:var(--dm-navy);margin:6px 0 0;}
.dm-devis-success-msg{font-family:var(--dm-font-body);color:var(--dm-text);font-size:14.5px;line-height:1.55;max-width:400px;margin:0;}
.dm-devis-ref{font-family:var(--dm-font-body);font-size:13px;color:#333;background:#F2F2F2;padding:6px 14px;border-radius:100px;margin:4px 0 8px;}
body.dm-modal-open{overflow:hidden;}

/* ---- Category grid (/categories) ---- */
.dm-cat-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;}
@media(max-width:900px){.dm-cat-grid{grid-template-columns:repeat(2,1fr);}}
@media(max-width:560px){.dm-cat-grid{grid-template-columns:1fr;}}
.dm-cat-card{--accent:#FFBB01;display:flex;flex-direction:column;background:#F2F2F2;border-radius:22px;padding:26px 24px;text-decoration:none;min-height:340px;box-sizing:border-box;transition:transform .25s ease,box-shadow .25s ease;}
.dm-cat-card:hover{transform:translateY(-4px);box-shadow:0 14px 34px rgba(0,0,0,.1);}
.dm-cat-card-head{display:flex;flex-direction:column;gap:8px;}
.dm-cat-card-title{font-family:var(--dm-font-head);font-weight:300;font-size:26px;line-height:1.15;color:#111;margin:0;letter-spacing:-.3px;}
.dm-cat-card-desc{font-family:var(--dm-font-body);font-size:13.5px;color:var(--dm-text);line-height:1.55;margin:0;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;}
.dm-cat-card-img{flex:1;min-height:120px;display:flex;align-items:flex-end;justify-content:center;padding:18px 0;overflow:hidden;}
.dm-cat-card-img img{max-width:100%;max-height:170px;width:auto;object-fit:contain;object-position:bottom center;}
.dm-cat-card-foot{display:flex;align-items:center;justify-content:space-between;margin-top:auto;}
.dm-cat-card-count{font-family:var(--dm-font-body);font-size:13px;font-weight:500;color:#666;}
.dm-cat-card-btn{width:44px;height:44px;border-radius:100px;background:var(--accent);display:inline-flex;align-items:center;justify-content:center;transition:transform .3s cubic-bezier(.34,1.56,.64,1);}
.dm-cat-card:hover .dm-cat-card-btn{transform:translateX(4px) rotate(-2deg);}

/* ---- FAQ page (Figma node 143:392) ---- */
.dm-faq-wrap{max-width:1040px;margin:0 auto;padding:0 20px 72px;box-sizing:border-box;}
.dm-faq-page .dm-faq-hero{max-width:none;margin:0;padding:36px 0 6px;text-align:left;}
.dm-faq-page .dm-faq-hero h1{font-weight:700;text-transform:none;letter-spacing:-.01em;font-size:clamp(34px,5vw,50px);}
.dm-faq-page .dm-faq-hero p{margin:10px 0 0;max-width:720px;}
.dm-faq{display:flex;flex-direction:column;gap:16px;margin:28px 0 8px;}
.dm-faq-item{background:#F1F3F5;border-radius:14px;overflow:hidden;transition:background .3s ease;}
.dm-faq-item.open{background:#EDEFF2;}
.dm-faq-q{width:100%;display:flex;align-items:center;justify-content:space-between;gap:16px;background:none;border:none;padding:20px 26px;cursor:pointer;font-family:var(--dm-font-body);font-weight:600;font-size:16px;color:var(--dm-navy);text-align:left;}
/* red +/- toggle (two bars; the vertical one rotates away on open → minus) */
.dm-faq-toggle{position:relative;width:20px;height:20px;flex:0 0 auto;}
.dm-faq-toggle::before,.dm-faq-toggle::after{content:"";position:absolute;background:var(--dm-red);border-radius:2px;transition:transform .35s cubic-bezier(.4,0,.2,1),opacity .3s ease;}
.dm-faq-toggle::before{left:50%;top:1px;width:2.6px;height:18px;transform:translateX(-50%);}
.dm-faq-toggle::after{top:50%;left:1px;height:2.6px;width:18px;transform:translateY(-50%);}
.dm-faq-item.open .dm-faq-toggle::before{opacity:0;transform:translateX(-50%) rotate(90deg);}
/* Smooth open/close — grid 0fr→1fr animates to the answer's REAL height
   (no fixed max-height guess, so no easing jump and a clean close). */
.dm-faq-a{display:grid;grid-template-rows:0fr;transition:grid-template-rows .4s cubic-bezier(.4,0,.2,1);}
.dm-faq-item.open .dm-faq-a{grid-template-rows:1fr;}
.dm-faq-a-inner{overflow:hidden;min-height:0;padding:0 26px;opacity:0;transform:translateY(-4px);transition:opacity .3s ease,transform .3s ease,padding .4s cubic-bezier(.4,0,.2,1);font-family:var(--dm-font-body);font-size:14.5px;line-height:1.7;color:var(--dm-text);}
.dm-faq-item.open .dm-faq-a-inner{opacity:1;transform:none;padding:2px 26px 22px;}
.dm-faq-a-inner p{margin:0 0 10px;}
.dm-faq-a-inner p:last-child{margin-bottom:0;}
@media(max-width:600px){
  .dm-faq-q{padding:16px 18px;font-size:15px;}
  .dm-faq-a-inner{padding:0 18px;}
  .dm-faq-item.open .dm-faq-a-inner{padding:2px 18px 18px;}
}
@media(prefers-reduced-motion:reduce){
  .dm-faq-a,.dm-faq-a-inner,.dm-faq-toggle::before,.dm-faq-toggle::after,.dm-faq-item{transition:none;}
}

/* ---- Contact ---- */
.dm-contact{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:start;padding-top:8px;}
@media(max-width:860px){.dm-contact{grid-template-columns:1fr;}}
.dm-contact-h{font-family:var(--dm-font-head);font-weight:400;font-size:clamp(22px,3vw,28px);color:var(--dm-navy);text-transform:uppercase;margin:0 0 18px;}
.dm-contact-col{display:flex;flex-direction:column;gap:14px;}
.dm-contact-item{display:flex;align-items:center;gap:14px;background:#F2F2F2;border-radius:14px;padding:14px 16px;}
.dm-contact-ico{width:44px;height:44px;border-radius:50%;display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.dm-contact-txt{flex:1;display:flex;flex-direction:column;gap:2px;min-width:0;}
.dm-contact-label{font-family:var(--dm-font-body);font-size:12px;font-weight:600;color:var(--dm-navy);text-transform:uppercase;letter-spacing:.03em;}
.dm-contact-val{font-family:var(--dm-font-body);font-size:15px;font-weight:500;color:#111;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.dm-contact-item .dm-btn{flex-shrink:0;padding:10px 18px;font-size:12px;}
.dm-addr-card{background:#F2F2F2;border-radius:16px;padding:18px;display:flex;flex-direction:column;gap:12px;margin-bottom:16px;}
.dm-addr-head{display:flex;align-items:center;gap:10px;font-family:var(--dm-font-head);color:var(--dm-navy);font-size:17px;text-transform:uppercase;}
.dm-addr-text{font-family:var(--dm-font-body);color:var(--dm-text);font-size:14px;line-height:1.5;margin:0;}
.dm-addr-map{border-radius:12px;overflow:hidden;aspect-ratio:16/9;background:#e3e8ef;}
.dm-addr-map iframe{width:100%;height:100%;border:0;display:block;}

/* ---- Contact page: mobile ---- */
@media(max-width:560px){
  .dm-contact{gap:26px;}
  .dm-contact-h{margin-bottom:14px;}
  /* Each contact card: icon + label/number on top row, the action button full-width below */
  .dm-contact-item{flex-wrap:wrap;padding:14px;gap:12px;}
  .dm-contact-ico{width:40px;height:40px;}
  .dm-contact-txt{flex:1 1 auto;min-width:0;}
  .dm-contact-val{white-space:normal;word-break:break-word;font-size:16px;}   /* show the full number, no ellipsis */
  .dm-contact-item .dm-btn{flex:1 1 100%;justify-content:center;margin-top:2px;padding:12px 18px;font-size:13px;}
  .dm-addr-card{padding:16px;}
  .dm-addr-head{font-size:15px;}
  .dm-addr-dir{width:100%;}
}

/* ============================================================
   Cookie consent — banner + preferences modal (Figma 316:453 / 316:471)
   Font: Zalando Sans Expanded (titles/buttons) + Zalando Sans Expanded (body)
   ============================================================ */

/* Shared buttons — rounded-10 rectangles, Zalando Sans Expanded SemiBold 13.5 */
.dm-cc-btn{font-family:'Zalando Sans Expanded',sans-serif;font-weight:600;font-size:13.5px;line-height:1;border-radius:10px;padding:12px 20px;cursor:pointer;border:1px solid transparent;background:none;white-space:nowrap;transition:background .18s ease,color .18s ease,border-color .18s ease;}
.dm-cc-btn--ghost{border-color:#e5e8ed;color:#6b7380;background:#fff;}
.dm-cc-btn--ghost:hover{background:#f5f7fa;}
.dm-cc-btn--grey{background:#e6e6e6;color:#5e5e5e;}
.dm-cc-btn--grey:hover{background:#dadada;}
.dm-cc-btn--red{background:#ec2227;color:#fff;}
.dm-cc-btn--red:hover{background:#cf1d22;}

/* ---- Banner ---- */
.dm-cookie{
  position:fixed;left:20px;right:20px;bottom:20px;max-width:720px;margin:0 auto;
  background:#fff;border:1px solid #e5e8ed;box-shadow:0 10px 15px rgba(13,26,51,.16);
  border-radius:18px;padding:24px 26px;display:flex;flex-direction:column;gap:16px;
  z-index:1600;font-family:'Zalando Sans Expanded',sans-serif;
  transform:translateY(160%);opacity:0;visibility:hidden;
  transition:transform .45s cubic-bezier(.2,.9,.3,1),opacity .35s ease,visibility 0s linear .45s;
}
.dm-cookie.is-open{transform:translateY(0);opacity:1;visibility:visible;transition:transform .45s cubic-bezier(.2,.9,.3,1),opacity .35s ease;}
.dm-cookie__top{display:flex;gap:16px;align-items:flex-start;width:100%;}
.dm-cookie__icon{flex-shrink:0;width:48px;height:48px;border-radius:100px;display:flex;align-items:center;justify-content:center;background:#e5f0fc;color:#003974;}
.dm-cookie__body{flex:1;min-width:0;display:flex;flex-direction:column;gap:6px;}
.dm-cookie__title{margin:0;font-family:'Zalando Sans Expanded',sans-serif;font-weight:700;font-size:17px;color:#1a1f29;}
.dm-cookie__text{margin:0;font-family:'Zalando Sans Expanded',sans-serif;font-weight:400;font-size:13px;line-height:19px;color:#6b7380;}
.dm-cookie__link{align-self:flex-start;font-family:'Zalando Sans Expanded',sans-serif;font-weight:600;font-size:12.5px;color:#003974;text-decoration:none;}
.dm-cookie__link:hover{text-decoration:underline;}
.dm-cookie__actions{display:flex;align-items:center;justify-content:space-between;width:100%;gap:12px;}
.dm-cookie__actions-r{display:flex;gap:12px;}

/* ---- Preferences modal ---- */
.dm-cc-modal{position:fixed;inset:0;z-index:1700;display:flex;align-items:flex-start;justify-content:center;overflow-y:auto;overflow-x:hidden;padding:20px;box-sizing:border-box;opacity:0;visibility:hidden;transition:opacity .3s ease,visibility 0s linear .3s;}
.dm-cc-modal.is-open{opacity:1;visibility:visible;transition:opacity .3s ease;}
.dm-cc-modal__overlay{position:fixed;inset:0;background:rgba(13,26,51,.5);}
.dm-cc-modal__box{position:relative;margin:auto;background:#fff;border:1px solid #e5e8ed;border-radius:18px;width:100%;max-width:580px;box-shadow:0 30px 80px rgba(13,26,51,.35);font-family:'Zalando Sans Expanded',sans-serif;transform:translateY(16px) scale(.98);transition:transform .3s cubic-bezier(.2,.9,.3,1);}
.dm-cc-modal.is-open .dm-cc-modal__box{transform:none;}
.dm-cc-modal__head{display:flex;align-items:center;justify-content:space-between;padding:20px 22px 18px 26px;}
.dm-cc-modal__head-l{display:flex;align-items:center;gap:12px;}
.dm-cc-modal__icon{width:40px;height:40px;border-radius:100px;background:#e5f0fc;color:#003974;display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.dm-cc-modal__title{margin:0;font-family:'Zalando Sans Expanded',sans-serif;font-weight:700;font-size:18px;color:#1a1f29;}
.dm-cc-modal__x{background:none;border:none;padding:6px;cursor:pointer;color:#6b7380;display:flex;line-height:0;}
.dm-cc-modal__x:hover{color:#1a1f29;}
.dm-cc-divider{height:1px;background:#e5e8ed;width:100%;}
.dm-cc-modal__body{display:flex;flex-direction:column;gap:12px;padding:18px 26px;}
.dm-cc-intro{margin:0;font-family:'Zalando Sans Expanded',sans-serif;font-weight:400;font-size:12.5px;line-height:18px;color:#8c949e;}
.dm-cc-cat{display:flex;gap:13px;align-items:flex-start;background:#fafafc;border:1px solid #e5e8ed;border-radius:12px;padding:13px 14px;}
.dm-cc-cat__ic{width:36px;height:36px;border-radius:100px;background:#f2f5fa;display:flex;align-items:center;justify-content:center;flex-shrink:0;color:#003974;}
.dm-cc-cat__body{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px;}
.dm-cc-cat__titlerow{display:flex;align-items:center;gap:8px;}
.dm-cc-cat__title{margin:0;font-family:'Zalando Sans Expanded',sans-serif;font-weight:600;font-size:14px;color:#1a1f29;}
.dm-cc-pill{font-family:'Zalando Sans Expanded',sans-serif;font-weight:600;font-size:10.5px;color:#6b7380;background:#e5ebf0;padding:3px 8px;border-radius:6px;}
.dm-cc-cat__desc{margin:0;font-family:'Zalando Sans Expanded',sans-serif;font-weight:400;font-size:12px;line-height:17px;color:#8c949e;}
.dm-cc-cat__toggle{flex-shrink:0;padding-top:2px;}
/* toggle switch — 42x24, red when on, grey off, muted-blue when locked */
.dm-cc-switch{position:relative;width:42px;height:24px;display:inline-block;cursor:pointer;}
.dm-cc-switch input{position:absolute;opacity:0;width:100%;height:100%;margin:0;cursor:pointer;}
.dm-cc-switch span{position:absolute;inset:0;background:#cbd2dc;border-radius:100px;transition:background .2s;}
.dm-cc-switch span::after{content:"";position:absolute;top:3px;left:3px;width:18px;height:18px;background:#fff;border-radius:50%;transition:transform .2s;box-shadow:0 1px 2px rgba(0,0,0,.25);}
.dm-cc-switch input:checked + span{background:#003974;}   /* analytics / marketing ON = navy */
.dm-cc-switch input:checked + span::after{transform:translateX(18px);}
.dm-cc-switch--locked{cursor:not-allowed;}
.dm-cc-switch--locked input:checked + span{background:#1F9954;}   /* necessary = green */
.dm-cc-modal__foot{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:16px 26px 18px;}
.dm-cc-modal__foot-r{display:flex;gap:12px;}

@media (max-width:600px){
  .dm-cookie{padding:20px;left:14px;right:14px;bottom:14px;}
  .dm-cookie__actions{flex-direction:column;align-items:stretch;}
  .dm-cookie__actions-r{width:100%;flex-direction:column;}   /* stack Tout refuser / Tout accepter so neither clips */
  .dm-cc-btn{flex:1;min-width:0;text-align:center;}
  .dm-cc-modal__foot{flex-direction:column;align-items:stretch;}
  .dm-cc-modal__foot-r{width:100%;flex-direction:column;}   /* stack Enregistrer mes choix / Tout accepter */
}

/* ============================================================
   HOME PAGE TYPOGRAPHY → Zalando Sans Expanded (matches Figma)
   Figma uses Zalando Sans Expanded for every text style on the
   home page (headings, body, badges, buttons). Scoped to
   body.home .dmv2-main so it only affects the home page content
   — other pages reuse .dmv2-main, and the global header/footer
   sit outside it. Existing sizes & weights are preserved.
   ============================================================ */
body.home .dmv2-main,
body.home .dmv2-main *,
body.home .dmv2-main .dm-pcards *,
body.home .dmv2-main .dm-pcards .product-card * {
    font-family: 'Zalando Sans Expanded', sans-serif !important;
}

/* Consistent weights across the home page: every section header is SemiBold (600),
   every body/description is Regular (400). (Product-card names stay Medium.) */
body.home .dm-sec-head__title,
body.home .dm-partners__title,
body.home .vitrine-section .vitrine-title,
body.home .dm-dec-eyebrow,
body.home .dm-dec-title {
    font-weight: 600 !important;
}
/* Category-hero titles read too heavy at SemiBold → Medium */
body.home .dmv2-card-title { font-weight: 500 !important; }
body.home .dm-sec-head__desc,
body.home .dm-partners__desc,
body.home .dm-dec-desc,
body.home .dm-about__text,
body.home .dmv2-card-desc {
    font-weight: 400 !important;
}

/* ── Categories page — same brand font (Zalando Sans Expanded) as the home,
   so its cards/headers read identically instead of falling back. ── */
.dm-catpage, .dm-catpage * {
    font-family: 'Zalando Sans Expanded', sans-serif !important;
}
.dm-catpage .dm-catblock__title { font-weight: 500 !important; }
.dm-catpage .dm-catcard__title  { font-weight: 500 !important; }
.dm-catpage .dm-catblock__desc,
.dm-catpage .dm-catcard__desc   { font-weight: 400 !important; }

/* Categories page hero → "Nos Produits" style: centered, big navy uppercase
   heading + centered grey description. (Font is already Zalando via the rule
   above; here we match the products hero's alignment, weight, size, uppercase.) */
.dm-catpage__head  { text-align: center; }
.dm-catpage__title { font-weight: 400; font-size: clamp(30px,5vw,52px); text-transform: uppercase; letter-spacing: -.5px; }
.dm-catpage__intro { max-width: 640px; margin: 0 auto; text-align: center; }

/* ==========================================================================
   À Propos page — ported 1:1 from Darelmed v1 (all scoped under .dm-apropos)
   ========================================================================== */
/* Typography matches v2's other pages: Zalando Sans Expanded for headings
   (same override the single-product page uses; theme default is Bricolage). */
.dm-apropos{--dm-font-head:'Zalando Sans Expanded',sans-serif;font-family:var(--dm-font-head);color:#0c0c0c;}
.dm-apropos .container{width:100%;max-width:1150px;margin:0 auto;padding:0 15px;box-sizing:border-box;}
.dm-apropos figure{margin:0;}
.dm-apropos .wp-block-image img{max-width:100%;height:auto;display:block;}
.dm-apropos .mt-0{margin-top:0 !important;}
.dm-apropos .mt-3{margin-top:3rem !important;}
.dm-apropos .text-center{text-align:center !important;}
.dm-apropos .text-justify{text-align:justify;}
.dm-apropos h2,.dm-apropos h3{font-family:var(--dm-font-head);font-weight:700;color:var(--dm-navy);line-height:1.2;margin:0 0 15px;}
.dm-apropos .h4{font-size:clamp(20px,2.6vw,26px);}

/* Page hero — "Nos Produits" style (shared .dm-page-hero base, no grey band):
   big navy uppercase Zalando heading + tight grey description. Reused on the
   Catégories and À Propos pages via this modifier. */
.dm-page-hero--zalando h1,
.dm-page-hero--zalando p{font-family:'Zalando Sans Expanded',sans-serif;}
.dm-page-hero--zalando p{margin-top:0;}

/* Content wrapper — full width; only the inner .container constrains the text */
.dm-apropos .main-content{width:100%;}
.dm-apropos .post-content{width:100%;margin:40px 0 20px;}
.dm-apropos .post-content p{margin:0 0 15px;font-weight:400;font-size:16px;line-height:1.7;color:#333;}
.dm-apropos .w-img-100,.dm-apropos .w-img-100 img{width:100%;}
.dm-apropos .w-img-100{margin-bottom:36px;}/* gap between hero image and "QUI SOMMES NOUS?" */
.dm-apropos .post-content img{object-fit:cover;}

/* Two-column block */
.dm-apropos .wp-block-columns{display:flex;gap:32px;align-items:flex-start;}
.dm-apropos .wp-block-column{flex:1 1 0;min-width:0;}

/* Blue divider bar with the logo mark */
.dm-apropos .home-page-hero-hr{margin-top:70px;width:100%;height:50px;background-color:#003873;text-align:center;}
.dm-apropos .home-page-hero-hr img{width:100px;top:-25px;position:relative;display:inline-block;}

/* Partners marquee (v1 was JS-driven; here it's a self-contained CSS loop) */
.dm-apropos .section-our-partners{padding:55px 0 80px;}
.dm-apropos .section-our-partners h2{font-size:clamp(20px,2.6vw,26px);}
.dm-apropos .partner-marquee{margin-top:60px;overflow:hidden;width:100%;
  -webkit-mask:linear-gradient(90deg,transparent,#fff 8%,#fff 92%,transparent);
          mask:linear-gradient(90deg,transparent,#fff 8%,#fff 92%,transparent);}
.dm-apropos .partner-marquee-track{display:flex;align-items:center;width:max-content;gap:70px;animation:dm-partner-scroll 28s linear infinite;}
.dm-apropos .partner-marquee:hover .partner-marquee-track{animation-play-state:paused;}
.dm-apropos .partner-marquee-item{flex:0 0 auto;}
.dm-apropos .partner-marquee-item img{height:45px;width:auto;max-width:180px;object-fit:contain;display:block;}
@keyframes dm-partner-scroll{from{transform:translateX(0);}to{transform:translateX(-50%);}}

/* Responsive */
@media(max-width:900px){
  .dm-apropos .wp-block-columns{flex-direction:column;gap:24px;}
}
@media(max-width:768px){
  .dm-apropos .home-page-hero-hr{height:30px;margin-top:50px;}
  .dm-apropos .home-page-hero-hr img{width:70px;top:-16px;}
  .dm-apropos .post-content{margin:30px 0 10px;}
  .dm-apropos .partner-marquee-item img{height:38px;}
}

/* Nous Contacter block on the À Propos page → everything in Zalando to match the
   rest of the page (its own classes hardcode Bricolage/Zalando Sans Expanded, so we override
   the title, description, labels, values AND the buttons all at once). */
.dm-apropos-contact .dm-sec-head__title,
.dm-apropos-contact .dm-sec-head__desc,
.dm-apropos-contact .dm-contacth__label,
.dm-apropos-contact .dm-contacth__value,
.dm-apropos-contact .dm-contacth__btn{font-family:'Zalando Sans Expanded',sans-serif;}
.dm-apropos-contact .dm-sec-head__title{font-weight:700;}

/* ==========================================================================
   Newsletter card (Figma 448:1577) — page section + footer-triggered modal
   ========================================================================== */
.dm-nl-section{width:100%;max-width:1240px;margin:56px auto 56px;padding:0 20px;box-sizing:border-box;}
.dm-nl-card{max-width:760px;margin:0 auto;background:var(--dm-navy);border-radius:24px;padding:20px;box-sizing:border-box;
  display:flex;flex-direction:column;gap:28px;font-family:'Zalando Sans Expanded',sans-serif;}
.dm-nl-head{display:flex;flex-direction:column;gap:8px;}
.dm-nl-title{margin:0;font-family:'Zalando Sans Expanded',sans-serif;font-weight:700;font-size:clamp(20px,2.4vw,24px);line-height:1.25;color:#fff;}
.dm-nl-sub{margin:0;font-family:'Zalando Sans Expanded',sans-serif;font-weight:400;font-size:14px;line-height:20px;color:#B8CCE5;}

.dm-nl-form{display:flex;flex-direction:column;gap:16px;}
.dm-nl-row{display:flex;gap:16px;}
.dm-nl-field{flex:1 1 0;min-width:0;display:flex;flex-direction:column;gap:8px;}
.dm-nl-label{font-family:'Zalando Sans Expanded',sans-serif;font-weight:500;font-size:12px;color:#B8CCE5;}
.dm-nl-req{color:#EC2227;}
.dm-nl-input{width:100%;height:48px;box-sizing:border-box;background:#fff;border:1.5px solid transparent;border-radius:10px;padding:0 16px;
  font-family:'Zalando Sans Expanded',sans-serif;font-size:14px;color:#1a1a1a;outline:none;transition:border-color .15s,box-shadow .15s;}
.dm-nl-input::placeholder{color:#8C949E;}
.dm-nl-input:focus{border-color:#EC2227;}
.dm-nl-input.is-invalid{border-color:#EC2227;box-shadow:0 0 0 3px rgba(236,34,39,.18);}

/* Wilaya — custom design-system dropdown (not the native browser select) */
.dm-nl-select{position:relative;}
.dm-nl-select__btn{width:100%;height:48px;box-sizing:border-box;background:#fff;border:1.5px solid transparent;border-radius:10px;padding:0 14px 0 16px;display:flex;align-items:center;justify-content:space-between;gap:10px;cursor:pointer;font-family:'Zalando Sans Expanded',sans-serif;font-size:14px;color:#1a1a1a;text-align:left;transition:border-color .15s,box-shadow .15s;}
.dm-nl-select__btn svg{width:18px;height:18px;color:#8C949E;flex-shrink:0;transition:transform .18s;}
.dm-nl-select.is-open .dm-nl-select__btn{border-color:#EC2227;}
.dm-nl-select.is-open .dm-nl-select__btn svg{transform:rotate(180deg);}
.dm-nl-select__val{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.dm-nl-select__val.is-placeholder{color:#8C949E;}
.dm-nl-select__menu{position:absolute;left:0;right:0;top:calc(100% + 6px);z-index:30;background:#fff;border:1px solid #e5e8ed;border-radius:12px;box-shadow:0 12px 30px rgba(13,26,51,.22);padding:6px;max-height:260px;overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;touch-action:pan-y;}
.dm-nl-select__menu[hidden]{display:none;}
.dm-nl-select__opt{display:block;width:100%;text-align:left;border:none;background:none;padding:9px 12px;border-radius:8px;cursor:pointer;font-family:'Zalando Sans Expanded',sans-serif;font-size:13.5px;color:#1a1f29;transition:background .12s;}
.dm-nl-select__opt:hover{background:#F2F5FA;}
.dm-nl-select__opt.is-active{background:#003974;color:#fff;}

/* Consent */
.dm-nl-consent{display:flex;align-items:center;gap:10px;cursor:pointer;}
.dm-nl-check{width:0;height:0;opacity:0;margin:0;position:absolute;}
.dm-nl-check-box{flex:0 0 auto;width:20px;height:20px;border:1.5px solid rgba(255,255,255,.6);border-radius:5px;display:flex;align-items:center;justify-content:center;transition:background .15s,border-color .15s;}
.dm-nl-check:checked + .dm-nl-check-box{background:#EC2227;border-color:#EC2227;}
.dm-nl-check:checked + .dm-nl-check-box::after{content:"";width:5px;height:9px;border:solid #fff;border-width:0 2px 2px 0;transform:rotate(45deg) translateY(-1px);}
.dm-nl-check:focus-visible + .dm-nl-check-box{box-shadow:0 0 0 3px rgba(255,255,255,.28);}
.dm-nl-consent-text{font-family:'Zalando Sans Expanded',sans-serif;font-weight:400;font-size:12px;line-height:18px;color:rgba(184,204,229,.85);}
.dm-nl-consent-text a{color:#fff;text-decoration:underline;}

/* Button + message */
.dm-nl-submit{width:100%;height:52px;background:#EC2227;border:none;border-radius:12px;color:#fff;cursor:pointer;
  font-family:'Zalando Sans Expanded',sans-serif;font-weight:600;font-size:15px;letter-spacing:.3px;transition:background .18s,opacity .18s;}
.dm-nl-submit:hover{background:var(--dm-red-dark);}
.dm-nl-submit:disabled{opacity:.6;cursor:default;}
.dm-nl-msg{min-height:16px;font-family:'Zalando Sans Expanded',sans-serif;font-size:13px;line-height:1.4;}
.dm-nl-msg:empty{display:none;}   /* no phantom space below the button until a status message appears — bottom padding = sides */

/* Modal wrapper */
.dm-nl-modal{position:fixed;inset:0;z-index:1200;display:none;overflow-y:auto;overflow-x:hidden;-webkit-overflow-scrolling:touch;padding:24px;box-sizing:border-box;}
.dm-nl-modal.is-open{display:flex;align-items:flex-start;justify-content:center;}
.dm-nl-modal__overlay{position:fixed;inset:0;background:rgba(0,18,42,.55);-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);}
.dm-nl-modal__dialog{position:relative;width:100%;max-width:600px;margin:auto;}
.dm-nl-modal__dialog .dm-nl-card{max-width:none;margin:0;}
.dm-nl-modal__dialog .dm-nl-head{padding-right:34px;}
.dm-nl-modal__x{position:absolute;top:14px;right:14px;z-index:2;width:34px;height:34px;border:none;border-radius:10px;background:rgba(255,255,255,.16);color:#fff;font-size:18px;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background .18s;}
.dm-nl-modal__x:hover{background:rgba(255,255,255,.28);}

@media (max-width:560px){
  .dm-nl-row{flex-direction:column;}
}

/* ==========================================================================
   Contact page — match Figma (Page · Contact 144:458): Zalando everywhere,
   left-aligned title-case hero, title-case headings, rounded-square buttons
   with icons, and an "Itinéraire" button under each address.
   ========================================================================== */
.dm-contact-page, .dm-contact-page * { font-family: 'Zalando Sans Expanded', sans-serif !important; }
/* Hero: left-aligned, bold, title-case (not centered/uppercase) */
.dm-contact-page .dm-page-hero{text-align:left;}
.dm-contact-page .dm-page-hero h1{font-weight:700;text-transform:none;letter-spacing:-.01em;}
.dm-contact-page .dm-page-hero p{margin-left:0;margin-right:0;max-width:620px;}
/* Section headings ("Coordonnées", "Nos adresses") */
.dm-contact-page .dm-contact-h{font-weight:700;text-transform:none;font-size:clamp(20px,2.4vw,26px);}
/* Contact items */
.dm-contact-page .dm-contact-label{text-transform:none;font-size:13px;font-weight:600;letter-spacing:0;}
.dm-contact-page .dm-contact-val{font-weight:500;}
/* Address card head */
.dm-contact-page .dm-addr-head{text-transform:none;font-weight:700;font-size:18px;}
/* Buttons → rounded-square, title-case (our design language) */
.dm-contact-page .dm-btn{border-radius:10px;text-transform:none;letter-spacing:0;}
.dm-contact-page .dm-contact-item .dm-btn{font-size:13px;}
.dm-contact-page .dm-addr-dir{align-self:flex-start;margin-top:2px;}

/* Legal / generic doc pages (Mentions légales, Confidentialité) → Zalando + centered prose */
.dm-doc-page, .dm-doc-page * { font-family: 'Zalando Sans Expanded', sans-serif !important; }
.dm-doc-page .dm-prose{margin-left:auto;margin-right:auto;}
.dm-doc-page .dm-prose h2{font-weight:700;}
.dm-doc-page .dm-prose h3{font-weight:600;}

/* ==========================================================================
   Devis · Multi-produits popup (Figma 456:1606)
   ========================================================================== */
.dm-devis{font-family:'Zalando Sans Expanded',sans-serif;}
.dm-devis .dm-modal-card{max-width:600px;border-radius:24px;padding:0;}
/* The success/form states toggle via the `hidden` attribute — author display
   rules would otherwise override it, so make `hidden` win here. */
.dm-devis-success[hidden],.dm-devis-wrap[hidden]{display:none !important;}
.dm-devis-x{position:absolute;top:16px;right:16px;z-index:3;width:30px;height:30px;border:none;background:transparent;color:#5E5E5E;font-size:22px;line-height:1;cursor:pointer;border-radius:50%;display:flex;align-items:center;justify-content:center;transition:background .15s,color .15s;}
.dm-devis-x:hover{background:#f0f0f0;color:#111;}
.dm-devis-wrap{display:flex;flex-direction:column;gap:22px;padding:24px;}
.dm-devis-header{display:flex;flex-direction:column;gap:6px;}
.dm-devis-header h3{font-family:'Zalando Sans Expanded',sans-serif;font-weight:700;font-size:22px;color:var(--dm-navy);text-transform:none;margin:0;line-height:1.2;padding-right:34px;}
.dm-devis-header p{font-size:14px;line-height:20px;color:#5E5E5E;margin:0;}

.dm-devis-products-sec{display:flex;flex-direction:column;gap:10px;}
.dm-devis-products-label{font-weight:600;font-size:13px;color:var(--dm-navy);}
.dm-devis-products{display:flex;flex-direction:column;gap:10px;}
.dm-devis-noproduct{font-size:13px;color:#8C949E;margin:0;}

.dm-devis-row{display:flex;align-items:center;gap:12px;background:#F4F5F7;border-radius:12px;padding:10px 12px 10px 10px;}
.dm-devis-row__thumb{flex:0 0 auto;width:44px;height:44px;border-radius:8px;background:#fff;border:1px solid #E6E6E6;overflow:hidden;display:flex;align-items:center;justify-content:center;}
.dm-devis-row__thumb img{width:100%;height:100%;object-fit:cover;display:block;}
.dm-devis-row__info{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;gap:2px;}
.dm-devis-row__name{font-weight:500;font-size:13px;color:#111;line-height:1.3;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;}
.dm-devis-row__cat{font-size:11px;color:#5E5E5E;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.dm-devis-row__qty{flex:0 0 auto;display:inline-flex;align-items:center;gap:10px;height:32px;padding:0 10px;background:#fff;border:1px solid #E0E0E0;border-radius:8px;}
.dm-devis-q{border:none;background:transparent;color:var(--dm-navy);font-size:16px;font-weight:600;line-height:1;cursor:pointer;padding:0;width:14px;}
.dm-devis-row__qv{font-size:13px;font-weight:600;color:#111;min-width:12px;text-align:center;}
.dm-devis-row__rm{flex:0 0 auto;border:none;background:transparent;cursor:pointer;padding:2px;display:flex;align-items:center;}

.dm-devis-addbtn{width:100%;height:46px;display:flex;align-items:center;justify-content:center;gap:8px;background:rgba(0,57,116,.04);border:1.5px dashed rgba(0,57,116,.45);border-radius:12px;color:var(--dm-navy);font-family:inherit;font-weight:600;font-size:13px;cursor:pointer;transition:background .15s;}
.dm-devis-addbtn:hover{background:rgba(0,57,116,.08);}
.dm-devis-addbtn__plus{font-size:17px;line-height:1;}
.dm-devis-search{margin-top:8px;border:1px solid #E6E6E6;border-radius:12px;overflow:hidden;}
.dm-devis-search__field{display:flex;align-items:center;gap:8px;padding:0 14px;height:44px;border-bottom:1px solid #EEE;}
.dm-devis-search__input{flex:1;min-width:0;border:none;outline:none;background:transparent;font-family:inherit;font-size:14px;color:#222;}
.dm-devis-results{max-height:240px;overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;}
.dm-devis-result__add svg{display:block;}
.dm-devis-result{width:100%;display:flex;align-items:center;gap:10px;padding:9px 14px;background:transparent;border:none;border-bottom:1px solid #F2F2F2;cursor:pointer;text-align:left;font-family:inherit;}
.dm-devis-result:hover{background:#F7F8FA;}
.dm-devis-result__thumb{flex:0 0 auto;width:36px;height:36px;border-radius:6px;background:#fff;border:1px solid #E6E6E6;overflow:hidden;}
.dm-devis-result__thumb img{width:100%;height:100%;object-fit:cover;display:block;}
.dm-devis-result__info{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px;}
.dm-devis-result__name{font-size:13px;font-weight:500;color:#111;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.dm-devis-result__cat{font-size:11px;color:#5E5E5E;}
.dm-devis-result__add{flex:0 0 auto;width:24px;height:24px;border-radius:50%;background:var(--dm-navy);color:#fff;display:flex;align-items:center;justify-content:center;font-size:15px;line-height:1;}
.dm-devis-result.is-in .dm-devis-result__add{background:var(--dm-green);}
.dm-devis-noresult{padding:14px;margin:0;font-size:13px;color:#8C949E;text-align:center;}

.dm-devis-form{display:flex;flex-direction:column;gap:14px;}
.dm-devis .dm-field label{font-family:inherit;font-size:12px;font-weight:500;color:var(--dm-navy);}
.dm-devis .dm-req{color:var(--dm-red);}
.dm-devis .dm-field input,.dm-devis .dm-field textarea{font-family:inherit;font-size:14px;border:1.5px solid #E0E0E0;border-radius:10px;padding:12px 14px;background:#fff;color:#222;}
.dm-devis .dm-field input:focus,.dm-devis .dm-field textarea:focus{border-color:var(--dm-navy);}
.dm-devis-submit{width:100%;height:50px;background:var(--dm-red);border:none;border-radius:12px;color:#fff;font-family:inherit;font-weight:600;font-size:15px;letter-spacing:.3px;cursor:pointer;transition:background .18s;}
.dm-devis-submit:hover{background:var(--dm-red-dark);}
.dm-devis-submit:disabled{opacity:.6;cursor:default;}
.dm-devis .dm-devis-error{color:#c0191f;font-size:13px;display:none;margin:-2px 0;}
.dm-devis .dm-devis-error.show{display:block;}
.dm-devis .dm-devis-success{padding:40px 28px 32px;}

/* Product picker popup (opened from "Ajouter un produit") */
.dm-picker{z-index:2100;}
.dm-picker .dm-picker__card{max-width:520px;max-height:82vh;display:flex;flex-direction:column;padding:0;overflow:hidden;}
.dm-picker__head{flex:0 0 auto;display:flex;align-items:center;justify-content:space-between;padding:20px 22px;border-bottom:1px solid #EEE;}
.dm-picker__head h3{font-family:'Zalando Sans Expanded',sans-serif;font-weight:700;font-size:19px;color:var(--dm-navy);margin:0;}
.dm-picker__x{border:none;background:transparent;font-size:22px;color:#5E5E5E;cursor:pointer;line-height:1;padding:2px;}
.dm-picker__x:hover{color:#111;}
.dm-picker__search{flex:0 0 auto;display:flex;align-items:center;gap:10px;padding:12px 22px;border-bottom:1px solid #F0F0F0;}
.dm-picker__search input{flex:1;min-width:0;border:none;outline:none;background:transparent;font-family:'Zalando Sans Expanded',sans-serif;font-size:14px;color:#222;}
/* flex:1 + min-height:0 makes THIS the scroll region — reliable inside a flex column */
.dm-picker__results{flex:1 1 auto;min-height:0;overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;}
.dm-picker__results .dm-devis-result{padding:10px 22px;}
.dm-picker__foot{flex:0 0 auto;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 22px;border-top:1px solid #EEE;}
.dm-picker__count{font-family:'Zalando Sans Expanded',sans-serif;font-size:13px;color:#5E5E5E;}
.dm-picker__done{background:var(--dm-navy);color:#fff;border:none;border-radius:10px;padding:11px 24px;font-family:'Zalando Sans Expanded',sans-serif;font-weight:600;font-size:14px;cursor:pointer;transition:background .18s;}
.dm-picker__done:hover{background:var(--dm-navy-dark);}