/* PAGE MARQUE « La couverture en bandeau » (5A1, Romain 02/10 01 h 40): band on top, podium after the filters.
   Only loaded on the main brand pages (inc/design-marque.php). Light: no picture in CSS, no font of its own. */
.collection.collection--dzm .collection__tete { display: grid; grid-template-columns: minmax(0, 1fr) 25.5rem; column-gap: 2.6rem; align-items: start; background: var(--platre); box-shadow: 0 0 0 100vmax var(--platre); clip-path: inset(0 -100vmax); padding-bottom: 1.1rem; margin-bottom: 1.2rem; }
.collection.collection--dzm .collection__tete > .ariane { grid-column: 1 / -1; margin: 0.8rem 0 0.5rem; }
.collection.collection--dzm .collection__titraille { grid-column: 1; grid-row: 2; display: block; padding: 0; }
/* design-collection (.dk) shares these pages: its opening grid and chapeau rule step aside on brand pages */
.collection.collection--dzm .collection__titraille > .chapeau, .collection.collection--dzm .collection__titraille > .chapeau__suite { grid-column: auto; border-top: 0; padding-top: 0; }
.collection.collection--dzm .collection__tete .vignettes-nav { border-top: 0; }
.dzm-surtitre { margin: 0 0 0.5rem; font: 600 0.7rem/1.2 var(--sans); letter-spacing: 0.12em; text-transform: uppercase; color: var(--feutre); }
.dzm-surtitre span { color: var(--bleu); }
.collection.collection--dzm .collection__titraille h1 { font: 400 clamp(1.9rem, 1.1rem + 1.6vw, 2.65rem)/1.04 var(--serif); letter-spacing: -0.028em; max-width: 21em; }
.dzm-mq { font-weight: 500; white-space: nowrap; }
.dzm-mq em { font-style: italic; font-weight: 300; color: var(--bleu); }
.collection.collection--dzm .collection__titraille .chapeau { margin-top: 0.5rem; max-width: 44rem; font: 400 1.02rem/1.55 var(--serif); color: #3c3e43; }
.collection.collection--dzm .collection__titraille .chapeau:not(.est-deplie) { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.collection.collection--dzm .collection__titraille .chapeau:not(.est-deplie) p { margin: 0; display: inline; }
.collection.collection--dzm .collection__titraille .chapeau strong { color: var(--anthracite); }
.collection.collection--dzm .chapeau__suite { display: inline; margin-top: 0.2rem; padding: 0.15rem 0; border: 0; background: none; color: var(--anthracite); font: 600 0.84rem/1.3 var(--sans); text-decoration: underline; text-decoration-color: var(--moutarde); text-decoration-thickness: 2px; text-underline-offset: 3px; cursor: pointer; }
.collection.collection--dzm .chapeau__suite[hidden] { display: none; }
.dzm-chiffres { grid-column: 1; grid-row: 3; display: flex; margin: 0.7rem 0 0; padding-top: 0.55rem; border-top: 1px solid var(--anthracite); }
.dzm-chiffres div { display: grid; padding-right: 1.6rem; }
.dzm-chiffres div + div { padding-left: 1.6rem; border-left: 1px solid var(--trait); }
.dzm-chiffres dd { margin: 0; font: 300 2rem/1 var(--serif); letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.dzm-chiffres dd small { font-size: 0.45em; color: var(--feutre); margin-left: 0.1em; }
.dzm-chiffres dt { font: 400 0.74rem/1.25 var(--sans); color: var(--feutre); max-width: 12rem; margin-top: 0.2rem; }
.dzm-collage { grid-column: 2; grid-row: 2 / span 2; align-self: stretch; position: relative; display: grid; grid-template-columns: 1fr 1.25fr 1fr; gap: 0.5rem; min-height: 15rem; }
.dzm-tuile { position: relative; margin: 0; overflow: hidden; border-radius: 4px; box-shadow: 0 18px 36px -24px rgba(37, 39, 43, 0.18); background: var(--platre-2); }
.dzm-tuile:nth-of-type(1) { margin-top: 1rem; }
.dzm-tuile:nth-of-type(3) { margin-bottom: 1rem; }
.dzm-tuile picture, .dzm-tuile img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.dzm-tuile--studio img { object-fit: contain; mix-blend-mode: multiply; }
.dzm-tuile figcaption { position: absolute; left: 0.45rem; right: 0.45rem; bottom: 0.4rem; color: #fff; font: 400 0.66rem/1.2 var(--sans); text-shadow: 0 1px 6px rgba(0, 0, 0, 0.6); }
.dzm-tuile--studio figcaption { color: var(--anthracite); text-shadow: none; }
.dzm-epingle { position: absolute; z-index: 2; top: 0.35rem; right: 0.35rem; display: inline-flex; align-items: center; gap: 0.3rem; background: #e60023; color: #fff; font: 700 0.68rem/1 var(--sans); padding: 0.38rem 0.6rem 0.38rem 0.42rem; border-radius: 999px; text-decoration: none; }
.dzm-epingle svg { width: 0.9rem; height: 0.9rem; fill: #fff; }
@media (hover: hover) { .dzm-epingle { opacity: 0; transition: opacity 0.25s; } .dzm-tuile:hover .dzm-epingle, .dzm-epingle:focus-visible { opacity: 1; } }
.collection.collection--dzm .collection__tete > .vignettes-nav { grid-column: 1 / -1; grid-row: 4; margin-top: 1.4rem; }
/* the old figures and chips of the band are now in the header (the guided choice dialog stays in its section) */
.collection.collection--dzm .marque-bandeau__chiffres, .collection.collection--dzm .marque-bandeau__puces { display: none; }
.collection.collection--dzm .marque-bandeau { padding: 0; margin: 0; }
/* podium, after the filters, before the grid */
.dzm-podium { margin: 0 0 0.4rem; }
.dzm-podium[hidden] { display: none; }
.dzm-podium__tete { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.2rem 1.4rem; margin-bottom: 0.7rem; }
.dzm-podium__sur { flex-basis: 100%; margin: 0; font: 600 0.7rem/1.2 var(--sans); letter-spacing: 0.12em; text-transform: uppercase; color: var(--feutre); }
.dzm-podium h2 { margin: 0; font: 400 clamp(1.9rem, 1.4rem + 1.2vw, 2.6rem)/1 var(--serif); letter-spacing: -0.02em; }
.dzm-podium h2 em { font-style: italic; font-weight: 300; }
.dzm-podium__sous { margin: 0; font-size: 0.85rem; color: var(--feutre); }
.dzm-podium__liste { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; align-items: end; }
.dzm-pod { position: relative; display: grid; gap: 0.45rem; align-content: start; }
.dzm-pod--1 { order: 2; } .dzm-pod--2 { order: 1; } .dzm-pod--3 { order: 3; }
.dzm-pod__n { position: absolute; z-index: 2; left: 0.6rem; top: 0.1rem; font: italic 300 4.2rem/1 var(--serif); color: var(--moutarde); pointer-events: none; }
.dzm-pod__photo { background: var(--platre); border-radius: var(--r-img, 12px); aspect-ratio: 4 / 3; overflow: hidden; display: grid; place-items: center; }
.dzm-pod__photo img { width: 100%; height: 100%; object-fit: contain; mix-blend-mode: multiply; }
.dzm-pod--1 .dzm-pod__photo { aspect-ratio: 4 / 3.4; }
.dzm-pod__nom { display: block; font: 400 1.35rem/1.1 var(--serif); color: var(--anthracite); text-decoration: none; }
.dzm-pod__nom::after { content: ""; position: absolute; inset: 0; }
.dzm-pod__raison { margin: 0.15rem 0 0; font-size: 0.84rem; color: var(--feutre); }
.dzm-pod__chiffres { margin: 0.15rem 0 0; font-size: 0.88rem; }
.dzm-pod__chiffres b { color: var(--bleu); font-size: 1.1rem; }
.dzm-selection { margin: 1.5rem 0 0.8rem; font: 600 0.7rem/1.2 var(--sans); letter-spacing: 0.12em; text-transform: uppercase; color: var(--bleu); }
@media (min-width: 1200px) { .collection.collection--dzm .grille-produits { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 2rem 1.1rem; } }
@media (max-width: 1100px) { .collection.collection--dzm .collection__tete { grid-template-columns: minmax(0, 1fr) 19rem; column-gap: 1.6rem; } }
@media (max-width: 860px) {
  .collection.collection--dzm .collection__tete { grid-template-columns: minmax(0, 1fr); padding-bottom: 0.9rem; margin-bottom: 0.4rem; }
  .collection.collection--dzm .collection__tete > .ariane { margin: 0.6rem 0 0.3rem; }
  .dzm-surtitre { font-size: 0.6rem; margin-bottom: 0.3rem; }
  .collection.collection--dzm .collection__titraille h1 { font-size: 1.55rem; line-height: 1.08; }
  .collection.collection--dzm .collection__titraille .chapeau { font-size: 0.92rem; margin-top: 0.35rem; }
  .dzm-chiffres { grid-row: auto; margin-top: 0.5rem; padding-top: 0.4rem; }
  .dzm-chiffres div { padding-right: 0.55rem; } .dzm-chiffres div + div { padding-left: 0.6rem; }
  .dzm-chiffres dd { font-size: 1.55rem; } .dzm-chiffres dt { font-size: 0.6rem; max-width: 7.2rem; }
  .dzm-collage { grid-column: 1; grid-row: auto; min-height: 0; height: 4.6rem; margin: 0.7rem 0 0.8rem; gap: 0.35rem; grid-template-columns: 1fr 1.3fr 1fr; }
  .dzm-tuile:nth-of-type(1), .dzm-tuile:nth-of-type(3) { margin: 0; }
  .dzm-epingle { display: none; } .dzm-tuile figcaption { font-size: 0.6rem; }   .collection.collection--dzm .collection__tete > .vignettes-nav { grid-row: auto; margin-top: 0.6rem; }
  .dzm-podium__liste { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; gap: 0.7rem; padding-bottom: 0.3rem; margin-inline: calc(var(--gutter) * -1); padding-inline: var(--gutter); scroll-padding-inline: var(--gutter); }
  .dzm-pod { flex: 0 0 72%; scroll-snap-align: start; order: 0 !important; }
  .dzm-pod__n { font-size: 3.3rem; } .dzm-pod__nom { font-size: 1.2rem; } .dzm-podium__sous { display: none; }
  .dzm-pod--1 .dzm-pod__photo { aspect-ratio: 4 / 3; }
  /* phone: the podium within the first screen (Romain 02/10): no breadcrumb line, no ruler under the slider, sort and
     total on one line, podium before the Mon projet banner */
  .collection.collection--dzm .collection__tete > .ariane { display: none; }
  .collection.collection--dzm .collection__tete { padding-top: 0.7rem; }
  .collection.collection--dzm .catalogue__barre .cote { display: none; }
  .collection.collection--dzm .catalogue__outils { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem 0.8rem; }
  .collection.collection--dzm .catalogue__total { margin: 0; font-size: 0.82rem; }
  .collection.collection--dzm .catalogue__corps > div { display: flex; flex-direction: column; }
  .collection.collection--dzm .catalogue__corps > div > * { min-width: 0; }
  .dzm-podium { order: -1; margin-top: 0.4rem; }
  .collection.collection--dzm .collection__titraille { grid-row: auto; }
  .collection.collection--dzm .collection__titraille .chapeau:not(.est-deplie) { max-height: calc(2 * 1.55em); }
  .collection.collection--dzm .tri select { min-height: 40px; }
  .collection.collection--dzm .catalogue__total { font-size: 0.76rem; }
}
@media (prefers-reduced-motion: reduce) { .dzm-epingle { transition: none; } }
