/* DESIGN COLLECTION (v2-A validated 01/10 + audit of 01 h 30). Compact editorial opening with the 3 figures, filters in a
   column and a 4-per-row grid, the 3 recommendations as cards 1 to 3 (N°1 / N°2 / N°3, role badge, one reason line,
   1 px mustard rule), ranks and badges hidden as soon as a filter or another sort is on (.dk-filtre, filtres.js).
   Scoped by .dk (parts/collection.php). No :has(), no backdrop-filter. Prefix dk-. Tokens = main.css. */

.dk { --dk-col: 78rem; }
.dk .enveloppe { max-width: var(--dk-col); }

/* ---------- Compact opening ---------- */
.dk .collection__tete { padding-bottom: 0; }
.dk .collection__titraille { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); align-items: end; gap: 0.7rem clamp(1.6rem, 4vw, 3.4rem); padding: clamp(0.4rem, 1.6vw, 1.2rem) 0 1rem; }
.dk-titre { grid-column: 1; grid-row: 1 / span 3; display: grid; gap: 0.6rem; align-self: end; }
.dk .collection__titraille > .chapeau, .dk .collection__titraille > .chapeau__suite, .dk-chiffres { grid-column: 2; }
.dk .collection__titraille > .chapeau { padding-top: 0.7rem; border-top: 2px solid var(--anthracite); }
.dk-surtitre { margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 0.3rem 0.7rem; font: 600 0.72rem/1.2 var(--sans); letter-spacing: 0.12em; text-transform: uppercase; color: var(--bleu); }
.dk-surtitre span { color: var(--feutre); letter-spacing: 0.04em; text-transform: none; font-weight: 500; }
.dk-surtitre span::before { content: ""; display: inline-block; width: 1.2rem; height: 1px; margin: 0 0.55rem 0.25em 0; background: currentColor; vertical-align: middle; }
.dk .dk-titre h1 { margin: 0; font: 400 clamp(1.9rem, 0.9rem + 2.5vw, 3.1rem)/1.0 var(--serif); letter-spacing: -0.03em; text-wrap: balance; }
.dk .collection__titraille .chapeau { font: 400 0.98rem/1.5 var(--serif); max-width: none; color: var(--anthracite); }
.dk .collection__titraille .chapeau:not(.est-deplie) { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.dk .collection__titraille .chapeau:not(.est-deplie) p { display: inline; margin: 0; }
.dk .collection__titraille .chapeau__suite { display: inline-flex; justify-self: start; min-height: 0; margin-top: -0.3rem; padding: 0; border: 0; background: none; color: var(--anthracite); font: 600 0.82rem/1.3 var(--sans); text-decoration: underline; text-decoration-color: var(--moutarde); text-decoration-thickness: 2px; text-underline-offset: 0.25em; cursor: pointer; }
.dk-chiffres { display: grid; grid-template-columns: auto auto minmax(0, 1fr); gap: 0 1.2rem; margin: 0; padding-top: 0.6rem; border-top: 1px solid var(--trait); color: var(--feutre); font: 400 0.78rem/1.3 var(--sans); }
.dk-chiffres > span { display: block; min-width: 0; }
.dk-chiffres strong { display: block; margin: 0 0 0.2rem; font: 300 1.9rem/0.95 var(--serif); letter-spacing: -0.035em; color: var(--anthracite); }
.dk-chiffres strong .num { font: inherit; }
.dk .vignettes-nav { gap: 0; padding: 0; margin-top: 0.2rem; border-top: 1px solid var(--trait); scrollbar-width: none; }
.dk .vignettes-nav::-webkit-scrollbar { display: none; }
.dk .vignettes-nav a { width: auto; flex: none; grid-template-columns: 30px auto; align-items: center; gap: 0.5rem; padding: 0.55rem 1rem 0.55rem 0; font: 500 0.82rem/1.2 var(--sans); white-space: nowrap; }
.dk .vignettes-nav a + a { padding-left: 1rem; border-left: 1px solid var(--trait); }
.dk .vignettes-nav img, .dk .vignettes-nav__vide { width: 30px; height: 30px; }
.dk .marque-bandeau { padding: 0; margin: 0; }

/* ---------- Bar, filters in a column, 4 per row ---------- */
.dk .catalogue { padding-top: 0.6rem; }
.dk .catalogue__barre { align-items: center; padding-top: 0.8rem; border-top: 1px solid var(--trait); }
.dk .catalogue__corps { grid-template-columns: 210px minmax(0, 1fr); gap: 2rem; }
.dk .filtre legend { font: 600 0.7rem/1.2 var(--sans); letter-spacing: 0.1em; text-transform: uppercase; color: var(--feutre); }
.dk .filtre__option { padding: 0.18rem 0; font-size: 0.86rem; }
.dk .grille-produits { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.8rem 1rem; }
.dk .carte { gap: 0.4rem; }
.dk .carte__photo { border-radius: 3px; }
.dk .carte__titre { font: 600 0.92rem/1.25 var(--sans); }
.dk .carte__entete { font-size: 0.78rem; }
.dk .carte__prix { font-size: 0.98rem; }
.dk .carte__note { font-size: 0.8rem; }
.dk .carte__cote { font-size: 0.72rem; }
.dk .repere-choix { font-size: 0.65rem; padding: 0.25rem 0.5rem; }
.dk .classement__tete h2, .dk .notes-collection h2, .dk .dimensions-selection h2, .dk .guides-collection h2, .dk .famille h2, .dk .journal-maj h2 { font: 400 clamp(1.8rem, 1.3rem + 1.4vw, 2.6rem)/1.05 var(--serif); letter-spacing: -0.025em; }

/* ---------- The 3 recommendations, cards 1 to 3 ---------- */
.dk-ligne { margin: 0 0 0.9rem; font: 400 0.82rem/1.4 var(--sans); color: var(--feutre); }
.dk-ligne a { color: var(--anthracite); text-decoration-color: var(--moutarde); text-underline-offset: 0.2em; }
.dk .dk-reco { box-shadow: inset 0 0 0 1px var(--moutarde); border-radius: 4px; padding: 0.45rem 0.45rem 0.6rem; }
.dk .dk-reco .carte__pastille { display: none; }
.dk-rang { position: absolute; top: 0.85rem; right: 0.85rem; z-index: 2; display: grid; place-items: center; min-width: 40px; height: 40px; padding: 0 0.45rem; border-radius: 999px; background: var(--foret); color: var(--moutarde); font: 700 0.86rem/1 var(--sans); font-variant-numeric: tabular-nums; }
.dk .dk-reco .repere-choix { top: 0.85rem; left: 0.85rem; }
.dk-raison { margin: 0; font: 400 0.84rem/1.3 var(--serif); color: var(--anthracite); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
/* A filter or another sort: the grid answers, no rank and no badge any more */
.dk.dk-filtre .dk-rang, .dk.dk-filtre .dk-raison, .dk.dk-filtre .repere-choix, .dk.dk-filtre .dk-ligne { display: none; }
.dk.dk-filtre .dk-reco { box-shadow: none; padding: 0; }
.dk.dk-filtre .dk-reco .carte__pastille { display: grid; }
.dk.dk-filtre .carte.dk-premier .carte__pastille { display: none; }
.dk.dk-filtre .carte.dk-premier::before { content: "Le mieux noté de ces résultats"; position: absolute; top: 0.7rem; left: 0.7rem; z-index: 2; padding: 0.25rem 0.5rem; border-radius: 999px; background: var(--moutarde); color: var(--anthracite); font: 600 0.65rem/1 var(--sans); }

/* No empty reserved row above the grid when no filter is active */
.dk .filtres-actifs.est-vide { display: none; }

/* Phone: the width as a pill (opens the slider) */
.dk-place { display: none; }

@media (max-width: 1180px) { .dk .grille-produits { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 900px) {
  .dk .collection__titraille { grid-template-columns: minmax(0, 1fr); gap: 0.55rem; padding-bottom: 0.6rem; }
  .dk-titre, .dk .collection__titraille > .chapeau, .dk .collection__titraille > .chapeau__suite, .dk-chiffres { grid-column: 1; grid-row: auto; }
  .dk .catalogue__corps { grid-template-columns: minmax(0, 1fr); }
  .dk .grille-produits { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.4rem 0.8rem; }
  .dk-raison { -webkit-line-clamp: 2; font-size: 0.76rem; line-height: 1.25; }
  .dk-rang { top: 0.6rem; right: 0.6rem; min-width: 34px; height: 34px; font-size: 0.78rem; }
  .dk .dk-reco .repere-choix { top: 0.6rem; left: 0.6rem; }
  .dk .projet-invite { display: none !important; }
  .dk-place { display: inline-flex; align-items: center; gap: 0.3rem; min-height: 40px; padding: 0 0.95rem; border: 1px solid var(--trait); border-radius: 999px; background: var(--blanc); color: var(--anthracite); font: 600 0.88rem/1 var(--sans); cursor: pointer; }
  .dk-place[aria-expanded="true"] { border-color: var(--anthracite); }
  .dk .place--compacte { display: none; }
  .dk .place--compacte.dk-ouvert { display: block; flex-basis: 100%; }
  /* one row: width pill, sort, then the total; no reserved empty row for the active filters */
  .dk .catalogue__barre { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 0.6rem; padding: 0.6rem 0 0.6rem; margin-bottom: 0.8rem; }
  .dk .catalogue__outils { display: contents; }
  .dk .catalogue__outils .tri { order: 2; }
  .dk-place { order: 1; }
  .dk .place--compacte.dk-ouvert { order: 3; }
  .dk .catalogue__total { order: 4; flex-basis: 100%; margin: 0; }
  .dk .filtres-actifs { margin-bottom: 0.6rem; }
  .dk-ligne { margin-bottom: 0.6rem; }
  /* the breadcrumb on one line */
  .dk .ariane { margin-block: 0.8rem 0.6rem; }
  .dk .ariane ol { flex-wrap: nowrap; overflow: hidden; }
  .dk .ariane li { white-space: nowrap; }
  .dk .ariane li:last-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
}
@media (max-width: 600px) {
  .dk .dk-titre h1 { font-size: 1.75rem; }
  .dk-chiffres { gap: 0 0.9rem; font-size: 0.72rem; }
  .dk-chiffres strong { font-size: 1.45rem; }
  .dk .collection__titraille .chapeau:not(.est-deplie) { -webkit-line-clamp: 2; }
}
@media (max-width: 380px) { .dk-chiffres strong { font-size: 1.3rem; } }