/* DESIGN MAGAZINE, buttons system 2 « Éditorial » on the whole site (validated by Romain 02/10 01 h 50,
   maquettes_QC/14-boutons/planche-2.html). Everything is scoped by the body class .dbt (inc/design-boutons.php; the
   prefix db- belongs to design-brunelia), and this sheet is the LAST of the head: same specificity wins by order.
   The values are the ones already posed by the T1 packages (design-fiche-t1.css, design-collection.css,
   design-guide.css, design-accueil.css): merchant black, padding-left 1.2rem, name in <em> serif italic mustard 1.1em,
   arrow on a mustard block (#c2931c on hover); secondary paper + 1 px anthracite + mustard line under on hover;
   arrow links underlined mustard 2 px, 44 px tall; focus ring 3 px mustard; corners 4 px. Those packages keep their
   own rules (their selectors are stronger or !important): this sheet brings the rest of the site to the same look.
   The 6 rules: 44 px target at least (52 px for the main action on phones); ONE line (nowrap, the short label takes
   over under 430 px); never wider than its container; full width on phones when the button is the action of its
   block; ONE merchant style; common states (hover, focus, active, disabled). */

/* ---------- Common base and states ---------- */
.dbt .bouton, .dbt .dz-bouton, .dbt .im-cta, .dbt .dbt-m {
  min-height: 44px; max-width: 100%; border-radius: 4px; white-space: nowrap; text-transform: none; letter-spacing: 0.005em;
  -webkit-tap-highlight-color: transparent; transition: background-color 0.18s ease, border-color 0.18s ease, color 0.18s ease, box-shadow 0.18s ease, transform 0.12s ease;
}
.dbt :is(.bouton, .dz-bouton, .im-cta, .dbt-m, .lien-fleche, .coeur, .outil, .epingle, .im-epingle, .coloris__pastille, .carte__pastille-couleur, .tiroir__pastille, .acc-pastille, .info__bouton, .inspi-planche__tuile):focus-visible {
  outline: 3px solid var(--moutarde); outline-offset: 2px;
}
.dbt :is(.bouton, .dz-bouton, .im-cta, .dbt-m):active { transform: scale(0.98); }
.dbt :is(.bouton, .dz-bouton, .im-cta, .dbt-m):is([disabled], [aria-disabled="true"]) {
  cursor: not-allowed; transform: none; background: var(--platre); border-color: var(--platre); color: #9a9c99; box-shadow: none;
}
.dbt :is(.bouton, .dz-bouton, .im-cta, .dbt-m)[aria-busy="true"] { cursor: progress; }

/* ---------- Principal: anthracite, square, the arrow after the label (links) ---------- */
.dbt .bouton--marchand:not(.dbt-m), .dbt .dz-bouton:not(.dz-bouton--clair):not(.dbt-m), .dbt .im-cta:not(.im-cta--clair):not(.dbt-m), .dbt .inspi-planche__bouton {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; padding: 0 1.25rem; border: 1.5px solid var(--anthracite);
  background: var(--anthracite); color: var(--blanc); font: 600 0.95rem/1.15 var(--sans); box-shadow: none; text-decoration: none;
}
.dbt a.bouton--marchand:not(.dbt-m)::after, .dbt a.dz-bouton:not(.dz-bouton--clair):not(.dbt-m)::after, .dbt a.im-cta:not(.im-cta--clair):not(.dbt-m)::after, .dbt a.inspi-planche__bouton::after {
  content: "→"; margin-left: 0.1rem; transition: transform 0.2s ease;
}
.dbt :is(.bouton--marchand, .dz-bouton, .im-cta, .inspi-planche__bouton):not(.dbt-m):not(.dz-bouton--clair):not(.im-cta--clair):hover { background: #000; border-color: #000; color: var(--blanc); }
.dbt a:is(.bouton--marchand, .dz-bouton, .im-cta, .inspi-planche__bouton):not(.dbt-m):hover::after { transform: translateX(4px); }

/* ---------- Secondaire: paper, 1 px anthracite, a mustard line under on hover ---------- */
.dbt .bouton--discret:not(.dbt-m), .dbt .dz-bouton--clair:not(.dbt-m), .dbt .im-cta--clair:not(.dbt-m), .dbt .bouton--guide {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; padding: 0 1.15rem; border: 1px solid var(--anthracite);
  background: var(--blanc); color: var(--anthracite); font: 600 0.92rem/1.15 var(--sans); box-shadow: none; text-decoration: none;
}
.dbt :is(.bouton--discret, .dz-bouton--clair, .im-cta--clair, .bouton--guide):not(.dbt-m):hover { background: var(--blanc); color: var(--anthracite); border-color: var(--anthracite); box-shadow: inset 0 -3px 0 var(--moutarde); }
.dbt .bouton--guide[data-lien-test] { background: var(--blanc); border-color: var(--anthracite); color: var(--anthracite); }

/* ---------- ONE merchant style (fiche T1 A2 values): black, the merchant's name in <em> serif italic mustard,
   the arrow on a mustard block (the fiche's svg .cta__fleche, or « → » drawn here for .dbt-m--a) ---------- */
.dbt .dbt-m {
  display: inline-flex; align-items: stretch; justify-content: space-between; gap: 0; min-height: 48px; padding: 0 0 0 1.2rem;
  border: 0; border-radius: 4px; background: var(--anthracite); color: #fff; box-shadow: none; animation: none;
  font: 600 0.98rem/1.15 var(--sans); letter-spacing: 0.005em; text-transform: none; text-decoration: none; overflow: hidden;
}
.dbt .dbt-m::before { content: none; }
.dbt .dbt-m .cta__texte { display: block; align-self: center; min-width: 0; padding-right: 1rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font: inherit; letter-spacing: 0.005em; text-transform: none; }
.dbt .dbt-m .cta__chez { display: inline; color: #fff; font: inherit; letter-spacing: 0; opacity: 1; }
.dbt .dbt-m em { font: italic 400 1.1em/1 var(--serif); color: var(--moutarde); letter-spacing: 0; }
.dbt .dbt-m .dbt-l { white-space: pre; }
.dbt .dbt-m .cta__fleche { box-sizing: content-box; flex: none; align-self: stretch; width: 18px; height: auto; margin: 0; padding: 0 0.9rem; border-radius: 0; background: var(--moutarde); color: var(--anthracite); transform: none; transition: background-color 0.18s ease; }
.dbt .dbt-m--a::after { content: "→"; display: flex; align-items: center; flex: none; align-self: stretch; margin-left: auto; padding: 0 0.95rem; background: var(--moutarde); color: var(--anthracite); font: 600 1.05rem/1 var(--sans); transition: background-color 0.18s ease; }
.dbt .dbt-m:hover { background: #000; color: #fff; }
.dbt .dbt-m:hover .cta__fleche, .dbt .dbt-m--a:hover::after { background-color: #c2931c; }
/* « Voir le canapé chez X » becomes « Voir chez X » under 430 px or in a narrow block */
@media (max-width: 429px) { .dbt .dbt-m .dbt-l { display: none; } .dbt .dbt-nom-long .dbt-debut { display: none; } }
.dbt :is(.encart-produit, .tf__actions, .barre-achat, .carte, .ia-boutons) .dbt-m .dbt-l { display: none; }
/* a merchant button in a table or a card: the same button, 44 px */
.dbt :is(.carte, .comparer__col, .tableau-comparatif, .tf__actions) .dbt-m { min-height: 44px; font-size: 0.92rem; }

/* Ma sélection: its cards come from the REST answer (not through the page filter), same look by CSS alone */
.dbt .selection__marchand, .dbt .carte .carte__marchand:not(.dbt-m) { display: inline-flex; align-items: stretch; justify-content: space-between; gap: 0; min-height: 44px; max-width: 100%; padding: 0 0 0 1.2rem; border: 0; border-radius: 4px; background: var(--anthracite); color: #fff; box-shadow: none; font: 600 0.92rem/1.15 var(--sans); text-decoration: none; overflow: hidden; white-space: nowrap; letter-spacing: 0.005em; text-transform: none; }
.dbt .selection__marchand > span { display: inline-flex; align-items: center; gap: 0.3em; min-width: 0; padding-right: 0.9rem; overflow: hidden; text-overflow: ellipsis; }
.dbt .selection__marchand strong { font: italic 400 1.1em/1 var(--serif); color: var(--moutarde); }
.dbt .selection__marchand svg { box-sizing: content-box; flex: none; align-self: stretch; width: 16px; height: auto; padding: 0 0.9rem; background: var(--moutarde); color: var(--anthracite); }
.dbt :is(.selection__marchand, .carte .carte__marchand:not(.dbt-m)):hover { background: #000; color: #fff; }
.dbt .selection__marchand:hover svg { background: #c2931c; }

/* ---------- « On préfère » (fiches without affiliation, rule v2): a mustard rule on the left, never the merchant style ---------- */
.dbt .bouton--prefere {
  display: inline-flex; align-items: center; justify-content: space-between; gap: 0.6rem; min-height: 52px; padding: 0 0.9rem 0 1rem; border: 1px solid var(--trait); border-left: 4px solid var(--moutarde);
  border-radius: 4px; background: #fff; color: var(--anthracite); box-shadow: none; font: 600 0.92rem/1.15 var(--sans); text-transform: none; letter-spacing: 0.005em;
}
.dbt .bouton--prefere .cta__texte { display: inline-flex; flex-wrap: nowrap; align-items: baseline; gap: 0.35rem; min-width: 0; overflow: hidden; text-overflow: ellipsis; text-transform: none; letter-spacing: 0.005em; }
.dbt .bouton--prefere .cta__chez { display: inline; font: italic 400 1.05em/1 var(--serif); color: var(--bleu); letter-spacing: 0; }
.dbt .bouton--prefere .cta__fleche { width: 18px; height: 18px; padding: 0; border-radius: 0; background: none; color: var(--bleu); }
.dbt .bouton--prefere:hover { border-color: var(--anthracite); border-left-color: var(--moutarde); background: #fff; color: var(--anthracite); }

/* ---------- Arrow links (design-guide.css values): 44 px tall, mustard underline, the arrow never alone ---------- */
.dbt .lien-fleche:not(.dbt-m), .dbt .encart-produit__test, .dbt .une-plus__tout, .dbt .mega__tout {
  display: inline-flex; align-items: center; min-height: 44px; max-width: 100%; color: var(--anthracite);
  text-decoration: underline; text-decoration-color: var(--moutarde); text-decoration-thickness: 2px; text-underline-offset: 5px;
}
.dbt .lien-fleche:not(.dbt-m)::after { content: "\00a0→"; color: var(--bleu); white-space: nowrap; display: inline; }
.dbt .lien-fleche:not(.dbt-m):hover { color: var(--bleu); }
/* the « comparatifs » link of the pillar page was a black pill: the principal, square */
.dbt .dzp-manuel .pilier__comparatifs .lien-fleche { display: inline-flex; align-items: center; min-height: 44px; padding-block: 0; border-radius: 4px; text-decoration: none; }

/* ---------- Heart: 44 px target, square corners; selected = anthracite with a mustard heart ---------- */
.dbt .coeur { border-radius: 4px; }
.dbt .carte .coeur:not(.coeur--fiche):not(.coeur--barre) { width: 40px; height: 40px; }
.dbt .carte .coeur:not(.coeur--fiche):not(.coeur--barre)::before { content: ""; position: absolute; inset: -2px; }
.dbt .coeur[aria-pressed="true"] { background: var(--anthracite); color: var(--moutarde); box-shadow: none; }
.dbt .coeur[aria-pressed="true"]:hover { color: var(--moutarde); }
.dbt :is(.coeur--fiche, .achat__coeur .coeur, .barre-achat .coeur, .coeur--barre) { min-width: 44px; min-height: 44px; }

/* ---------- Pinterest « Enregistrer »: the official red, 44 px ---------- */
.dbt .epingle { min-height: 44px; padding: 0 0.95rem 0 0.75rem; border-radius: 999px; background: #e60023; color: #fff; font: 700 0.86rem/1 var(--sans); }
.dbt .epingle:hover { background: #ad081b; color: #fff; }
.dbt .im-epingle { min-height: 44px; }

/* ---------- Chips and filters: square corners, 44 px; the chosen one in anthracite with a mustard line ---------- */
.dbt :is(.tiroir__pastille, .acc-pastille) { min-height: 44px; border-radius: 4px; white-space: nowrap; }
/* fiche colour swatches: the fiche T1 A2 draws them 36 px in a tight row (validated); elsewhere 44 px */
.dbt .coloris__pastille:not(.ft1a2 *) { min-width: 44px; min-height: 44px; justify-content: center; }
.dbt .coloris__pastille[aria-pressed="true"] { box-shadow: inset 0 -3px 0 var(--moutarde); border-color: var(--anthracite); }
.dbt .filtre__option { min-height: 44px; }
/* Colour swatches of the cards: the drawn disc stays, the touch target is 44 px */
.dbt .carte__pastille-couleur { position: relative; }
.dbt .carte__pastille-couleur::before { content: ""; position: absolute; inset: -13px; }
/* The « i » of the notes: 22 px drawn, 44 px to touch */
.dbt .info__bouton { position: relative; }
.dbt .info__bouton.achat__methodo { min-height: 44px; }
.dbt .info__bouton::before { content: ""; position: absolute; inset: -11px; }

/* ---------- Tools as a list (fiches outside T1 A2: the T1 A2 line was validated as it is) ---------- */
.dbt .fiche:not(.ft1a2) .fiche-outils { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: none; grid-auto-flow: row; gap: 0 1.4rem; margin: 0.8rem 0 0.4rem; padding: 0; border-top: 1px solid var(--anthracite); border-bottom: 0; overflow: visible; }
.dbt .fiche:not(.ft1a2) .fiche-outils :is(.outil, .voir-chez-moi, .alerte-bouton) { flex-direction: row; align-items: center; justify-content: flex-start; gap: 0.7rem; width: 100%; min-height: 56px; padding: 0 0.2rem; border: 0; border-bottom: 1px solid var(--trait); border-radius: 0; background: none; box-shadow: none; color: var(--anthracite); font: 500 0.92rem/1.2 var(--sans); white-space: nowrap; text-align: left; align-self: stretch; }
.dbt .fiche:not(.ft1a2) .fiche-outils .voir-chez-moi__texte { display: block; text-align: left; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.dbt .fiche:not(.ft1a2) .fiche-outils .voir-chez-moi__texte small { display: none; }
.dbt .fiche:not(.ft1a2) .fiche-outils :is(.outil, .voir-chez-moi, .alerte-bouton) > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.dbt .fiche:not(.ft1a2) .fiche-outils :is(.outil, .voir-chez-moi, .alerte-bouton)::after { content: "›"; margin-left: auto; padding-left: 0.5rem; color: var(--feutre); font: 400 1.2rem/1 var(--sans); }
.dbt .fiche:not(.ft1a2) .fiche-outils :is(.outil, .voir-chez-moi, .alerte-bouton):hover { background: none; color: var(--anthracite); box-shadow: inset 0 -2px 0 var(--moutarde); }
.dbt .fiche:not(.ft1a2) .fiche-outils .outil--coeur[aria-pressed="true"] { background: var(--moutarde-voile); color: var(--anthracite); font-weight: 600; }
@media (max-width: 429px) { .dbt .fiche:not(.ft1a2) .fiche-outils { grid-template-columns: minmax(0, 1fr); } }

/* ---------- Short labels (« Ma sélection », « Par e-mail », « Prix et stock », « Questionnaire »...) ---------- */
.dbt .dbt-court { display: none; }
/* the fiche T1 A2 tool line forces « > * > span { display: inline !important } »: the short label is hidden there on
   wide screens and takes over under 430 px with the same weight (inventaire, finding 4: one line per tool) */
.dbt .fiche.ft1a2 .fiche-outils > * > .dbt-court, .dbt .ft1a2 .dbt-court { display: none !important; }
@media (max-width: 429px) {
  .dbt .fiche.ft1a2 .fiche-outils > .dbt-raccourci { font-size: 0 !important; }
  .dbt .fiche.ft1a2 .fiche-outils > .dbt-raccourci > .dbt-court { display: inline !important; font-size: 0.8rem !important; white-space: nowrap; }
}
@media (max-width: 429px) {
  .dbt .dbt-raccourci:not(.ft1a2 *) { font-size: 0; }
  .dbt .dbt-raccourci:not(.ft1a2 *) > :not(.dbt-court):not(svg):not(.icone) { display: none; }
  .dbt .dbt-raccourci:not(.ft1a2 *) .dbt-court { display: inline; font-size: 0.92rem; white-space: nowrap; }
}

/* ---------- Full width on phones when the button is the action of its block ---------- */
@media (max-width: 639px) {
  .dbt .cta-duo { display: grid; gap: 0.5rem; }
  .dbt .cta-duo .bouton, .dbt .cta-duo .dbt-m { width: 100%; min-height: 52px; }
  .dbt .encart-produit .dbt-m, .dbt .dz-rail .dz-bouton, .dbt .comparer__col .dbt-m { width: 100%; }
  .dbt .encart-produit .dbt-m { min-height: 52px; }
}

/* ---------- Fields (Romain 02/10 9 h 15: « l'harmonie sur TOUS les boutons », fields included): the secondary's
   frame, 4 px corners, 1 px anthracite, 44 px, paper; focus = the mustard line under + the 3 px mustard ring ---------- */
.dbt :is(.dz-outil__champ, .calc__champ, .mesure__champ, .champ, .recherche__champ) { min-height: 44px; border: 1px solid var(--anthracite); border-radius: 4px; background: #fff; box-shadow: none; }
.dbt :is(.dz-outil__champ, .calc__champ, .mesure__champ, .champ, .recherche__champ):focus-within { border-color: var(--anthracite); box-shadow: inset 0 -3px 0 var(--moutarde); }
.dbt :is(.dz-outil__champ, .calc__champ, .mesure__champ, .champ, .recherche__champ) input { border: 0; border-radius: 0; background: none; box-shadow: none; min-height: 42px; }
.dbt main :is(input[type="text"], input[type="email"], input[type="search"], input[type="number"], input[type="tel"], input:not([type]), select, textarea):not(:is(.dz-outil__champ, .calc__champ, .mesure__champ, .champ, .recherche__champ, .dl-404__champ, .comparateur__recherche) *) {
  min-height: 44px; border: 1px solid var(--anthracite); border-radius: 4px; background-color: #fff; box-shadow: none;
}
.dbt main textarea { min-height: 6rem; }
.dbt main :is(input, select, textarea):focus-visible { outline: 3px solid var(--moutarde); outline-offset: 2px; }
/* the Mag' article rail (« La sélection liée », « L'outil », Inspiration): the tool box loses its plaster card */
.dbt .dz-outil { padding: 0; background: none; border-radius: 0; }
.dbt .dz-rail .dz-bouton { width: 100%; }

/* ---------- Chips, toggles and filter pills everywhere (planche 2 « Pastille de filtre »): 4 px corners, 1 px rule,
   paper, 44 px; the chosen one anthracite with the mustard line under. Inventory: grep of the theme CSS (999px) and
   the scan « pilules » of captures.cjs on the rendered templates. ---------- */
.dbt :is(.pilule, .bulle-filtre, .puce, .comparateur__puce, .variantes__choix, .projet-barre__puce, .inspi-filtre__chip, .magx-puce, .resume-ia__lien, .mag-pilier__liens a, .dzp-pilule, .ia-cl-tri button, .ia-cl-tout, .dz-souci__choix :is(button, a), .en-onglets button, .filtre-duels__plus, .format-choix__bouton, .calc__mode > span, .quiz__reponse span, .duels-liens a, .resultats__selections a) {
  border-radius: 4px; min-height: 44px;
}
.dbt :is(.pilule, .bulle-filtre, .comparateur__puce, .variantes__choix, .projet-barre__puce, .inspi-filtre__chip, .magx-puce, .resume-ia__lien, .dzp-pilule, .ia-cl-tri button, .ia-cl-tout, .dz-souci__choix :is(button, a), .filtre-duels__plus):not([aria-pressed="true"]):not(.est-active):not(.variantes__choix--seule) {
  border: 1px solid var(--trait); background: #fff; color: var(--anthracite);
}
.dbt :is(.pilule, .bulle-filtre, .comparateur__puce, .variantes__choix, .projet-barre__puce, .inspi-filtre__chip, .magx-puce, .resume-ia__lien, .dzp-pilule, .ia-cl-tri button, .ia-cl-tout, .dz-souci__choix :is(button, a), .filtre-duels__plus):hover { border-color: var(--anthracite); }
.dbt :is(.pilule.est-active, .bulle-filtre[aria-pressed="true"], .comparateur__puce:has(input:checked), .variantes__choix[aria-pressed="true"], .variantes__choix--seule, .projet-barre__puce[aria-pressed="true"], .magx-puce[aria-pressed="true"], .dz-souci__choix button[aria-pressed="true"], .ia-cl-tri button[aria-pressed="true"], .puce:not(.puce--tout)) {
  background: var(--anthracite); border-color: var(--anthracite); color: #fff; box-shadow: inset 0 -3px 0 var(--moutarde);
}
.dbt .comparateur__mode { border-radius: 4px; }
.dbt .comparateur__mode button[aria-pressed="true"] { background: var(--anthracite); color: #fff; }
.dbt :is(.notes-faits__tag, .projet-badge, .projet__puces span, .projet__couleurs span) { border-radius: 4px; }
.dbt .ar-pastille { border-radius: 4px; min-height: 44px; }
.dbt .ar-pastille span { border-radius: 2px; }
/* the remaining pill-shaped principal buttons: the principal, square */
.dbt :is(.selection__action--principale, .format-choix__action, .actions-mobile__test, .actions-mobile__filtres, .dl-404__champ button, .dzp-manuel .pilier__comparatifs .lien-fleche) { border-radius: 4px; min-height: 44px; }
.dbt :is(.selection__action--principale, .format-choix__action):hover { background: #000; color: #fff; }
.dbt :is(.dl-404__champ, .duel-options__choix select, .comparateur__recherche input, .recherche input, .resultats__form input, .projet__saisie input, .projet__champ select) { border-radius: 4px; }
.dbt :is(.encart-selection, .guide-choix, .duel-options, .onglets--tuiles .onglets__onglet, .onglets--tuiles .onglets__panneau, .rappel-selection, .annonce-selection, .comparatifs .filtres-duels, .filtres-duels) { border-radius: 4px; }

/* ---------- Shortcut links, summaries, pagination, Mag' section pills, 404 (Romain 02/10 9 h 45: « harmonie boutons, on
   n'oublie pas »): the chip of the system ---------- */
.dbt :is(.dl-404__bulles a, .bulles a, .guide-q__sommaire a, .pilier-etape__phares a, .mag .rubrique-tuile, .pagination .page-numbers, .spl-barre__b) {
  min-height: 44px; border: 1px solid var(--trait); border-radius: 4px; background: #fff; color: var(--anthracite);
}
.dbt :is(.dl-404__bulles a, .bulles a, .guide-q__sommaire a, .pilier-etape__phares a, .mag .rubrique-tuile, .pagination a.page-numbers, .spl-barre__b):hover { border-color: var(--anthracite); background: #fff; color: var(--anthracite); }
.dbt :is(.pagination .page-numbers.current, .mag .rubrique-tuile[aria-current], .spl-barre__b--plein) { background: var(--anthracite); border-color: var(--anthracite); color: #fff; box-shadow: inset 0 -3px 0 var(--moutarde); }
.dbt .pagination .page-numbers { display: inline-flex; align-items: center; }
.dbt .repere__lien { border-radius: 4px; }
/* search bars (404, header dialog, Mag', Mon projet): the field of the system, its button the principal */
.dbt .dl-404__champ { padding: 0 0 0 1rem; border: 1px solid var(--anthracite); border-radius: 4px; overflow: hidden; }
.dbt .dl-404__champ:focus-within { outline: 3px solid var(--moutarde); outline-offset: 2px; box-shadow: inset 0 -3px 0 var(--moutarde); }
.dbt .dl-404__champ button { align-self: stretch; min-height: 46px; border-radius: 0; background: var(--anthracite); color: #fff; }
.dbt .dl-404__champ button:hover { background: #000; color: #fff; }
.dbt .recherche :is(input[type="search"], input[type="text"], input:not([type])) { min-height: 44px; border: 1px solid var(--anthracite); border-radius: 4px; }
.dbt .recherche .bouton { border-radius: 4px; }
/* header buttons (search, Mon projet, Ma sélection, menu): square corners like every other button */
.dbt .entete :is(.bouton-recherche, .entete-projet, .entete-selection, .bouton-menu, .nav-lien--phare) { border-radius: 4px; }
/* the remaining filled pills: the principal, square */
.dbt :is(.projet-invite__commencer, .dzp-manuel .pilier__sommaire a[href="#le-test"]) { min-height: 44px; border-radius: 4px; background: var(--anthracite); color: #fff; }
.dbt :is(.projet-invite__commencer, .dzp-manuel .pilier__sommaire a[href="#le-test"]):hover { background: #000; color: #fff; }

/* legal pages: the other legal pages and the summary (chips on phones) */
.dbt :is(.dl-autres a, .dl-sommaire a) { border-radius: 4px; }
@media (max-width: 900px) { .dbt .dl-sommaire a { min-height: 44px; } }
.dbt :is(.dl-autres a[aria-current="page"], .dl-sommaire a.dl-ici) { box-shadow: inset 0 -3px 0 var(--moutarde); }
/* arrow links in a narrow column: the label wraps inside its block, the arrow stays tied to the last word */
.dbt .lien-fleche:not(.dbt-m) { display: inline; min-height: 0; padding-block: 0.7rem; line-height: 1.6; box-decoration-break: clone; -webkit-box-decoration-break: clone; }
.dbt :is(.encart-produit__test, .une-plus__tout, .mega__tout) { min-height: 44px; }

/* ---------- Dark blocks (Romain 02/10 10 h 45, « totalement bugué sur les articles »): the Mag' block « Pour choisir
   votre canapé » (.mag-pilier), the brand « coup de coeur », the home explorer, the pillar comparatifs, the compare bar,
   the duel ring, the footer. Light ink, light rule, chips of auto height centred. ---------- */
.dbt :is(.mag-pilier, .avis-coeur, .une-explorer__outils, .pilier__comparatifs, .barre-comparer, .pied) .lien-fleche:not(.dbt-m) { color: var(--blanc); }
.dbt :is(.mag-pilier, .avis-coeur, .une-explorer__outils, .pilier__comparatifs, .barre-comparer, .pied) .lien-fleche:not(.dbt-m)::after { color: var(--moutarde); }
.dbt :is(.mag-pilier, .avis-coeur, .une-explorer__outils, .pilier__comparatifs, .barre-comparer, .pied) .lien-fleche:not(.dbt-m):hover { color: var(--moutarde); }
.dbt .dzp-manuel .pilier__comparatifs .lien-fleche { color: #fff; }
.dbt .mag-pilier__liens { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem; }
.dbt .mag-pilier__liens a { display: inline-flex; align-items: center; height: auto; min-height: 44px; padding: 0 0.85rem; border: 1px solid rgba(255, 255, 255, 0.35); border-radius: 4px; background: transparent; color: var(--blanc); line-height: 1.2; white-space: nowrap; }
.dbt .mag-pilier__liens a:hover { border-color: var(--blanc); background: transparent; color: var(--blanc); box-shadow: inset 0 -3px 0 var(--moutarde); }
.dbt :is(.mag-pilier, .avis-coeur, .barre-comparer, .pied) :is(.bouton--discret, .dz-bouton--clair, .im-cta--clair):not(.dbt-m) { background: transparent; color: var(--blanc); border-color: rgba(255, 255, 255, 0.45); }
.dbt :is(.mag-pilier, .avis-coeur, .barre-comparer, .pied) :is(.bouton--discret, .dz-bouton--clair, .im-cta--clair):not(.dbt-m):hover { background: transparent; color: var(--blanc); border-color: var(--blanc); box-shadow: inset 0 -3px 0 var(--moutarde); }

/* ---------- The questionnaire button (Romain 02/10 10 h 46: « ressortir très légèrement plus »): the secondary, with
   the stopwatch in mustard, paper a shade lighter and a very light drop shadow; the mustard line under on hover. One
   variant on collections, guides, Mon projet and the phone bar. ---------- */
.dbt :is(main, .collection, .dg) .bouton--guide[data-lien-test], .dbt .actions-mobile__test {
  background: #fff; border: 1px solid var(--anthracite); border-radius: 4px; color: var(--anthracite);
  box-shadow: 0 1px 0 rgba(37, 39, 43, 0.06), 0 8px 18px -12px rgba(37, 39, 43, 0.45);
}
.dbt :is(main, .collection, .dg) .bouton--guide[data-lien-test]::before { background: var(--moutarde); }
.dbt .actions-mobile__test svg { color: var(--moutarde); stroke: var(--moutarde); }
.dbt :is(main, .collection, .dg) .bouton--guide[data-lien-test]:is(:hover, :focus-visible), .dbt .actions-mobile__test:is(:hover, :focus-visible) {
  background: #fff; border-color: var(--anthracite); color: var(--anthracite);
  box-shadow: inset 0 -2px 0 var(--moutarde), 0 8px 18px -12px rgba(37, 39, 43, 0.45);
}

/* =================== Inspiration palmarès (articles .ia: « alterne », « défilé », « grand format ») ===================
   The pair of buttons under each sofa: the analysis link becomes the secondary, the merchant link THE merchant
   button (it was a white pill under a black one: the merchant looked secondary). The inserts follow the collection
   v2-A / guide T1 blocks: a 2 px anthracite rule on top, no rounded card, serif title, square tiles. */
.dbt .ia .ia-boutons { display: flex; flex-wrap: wrap; align-items: stretch; gap: 0.6rem; margin-top: 0.4rem; }
.dbt .ia .ia-boutons > a { min-height: 48px; }
.dbt .ia .ia-boutons > a.im-cta:not(.dbt-m) { display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; padding: 0 1.15rem; border: 1px solid var(--anthracite); border-radius: 4px; background: var(--blanc); color: var(--anthracite); box-shadow: none; font: 600 0.92rem/1.15 var(--sans); }
.dbt .ia .ia-boutons > a.im-cta:not(.dbt-m)::after { content: none; }
.dbt .ia .ia-boutons > a.im-cta:not(.dbt-m):hover { background: var(--blanc); color: var(--anthracite); border-color: var(--anthracite); box-shadow: inset 0 -3px 0 var(--moutarde); }
.dbt .ia .ia-boutons > .dbt-m { order: -1; }
@media (max-width: 639px) {
  .dbt .ia .ia-boutons { display: grid; grid-template-columns: minmax(0, 1fr); }
  .dbt .ia .ia-boutons > a { width: 100%; }
  .dbt .ia .ia-boutons > .dbt-m { min-height: 52px; }
  .dbt .ia .ia-boutons > a.im-cta:not(.dbt-m) { min-height: 44px; }
}
/* the Pinterest button on the photos: 44 px, the official pill */
.dbt .ia .im-epingle { min-height: 44px; padding: 0 1rem 0 0.75rem; border-radius: 999px; }
/* inserts of the palmarès (« La collection » planche, filter and list variants) */
.dbt .ia .inspi-bloc { border: 0; border-top: 2px solid var(--anthracite); border-radius: 0; background-color: transparent; background-image: none; padding-inline: 0; padding-bottom: 0; }
.dbt .ia--grandformat .inspi-bloc { padding-left: 0; }
@media (min-width: 861px) { .dbt .ia--grandformat .inspi-bloc { margin-left: calc(var(--gutter) + 4.5rem); } }
.dbt .ia .inspi-bloc__sur { font: 600 0.74rem/1.2 var(--sans); letter-spacing: 0.12em; text-transform: uppercase; color: var(--bleu); }
.dbt .ia .inspi-bloc__titre { font: 400 clamp(1.65rem, 1.15rem + 1.35vw, 2.4rem)/1.08 var(--serif); letter-spacing: -0.015em; text-wrap: balance; }
.dbt .ia .inspi-planche__tuile { border-radius: 4px; border-color: var(--trait); background: #fff; }
.dbt .ia .inspi-planche__tuile img { border-radius: 2px; }
.dbt .ia .inspi-planche__tuile:hover { transform: none; border-color: var(--anthracite); box-shadow: none; }
.dbt .ia .inspi-planche__tuile:hover .inspi-planche__nom { text-decoration: underline; text-decoration-color: var(--moutarde); text-decoration-thickness: 2px; text-underline-offset: 3px; }
@media (max-width: 860px) {
  .dbt .ia .inspi-planche__bouton { width: 100%; min-height: 52px; }
  /* 1 big tile + the 4 small ones in 2 rows of 2 (a 4th tile alone on its row is the one hidden) */
  .dbt .ia .inspi-planche__tuile--5 { display: grid; }
  .dbt .ia .inspi-planche__grille > .inspi-planche__tuile--4:last-child { display: none; }
}
/* the end of the article: conclusion, author, method and « Dans la même famille » on the same left edge */
.dbt .ia .ia-famille { grid-column: 3 / 13; }
.dbt .ia .ia-famille .famille { margin: 0; padding: 0; background: none; }
.dbt .ia .ia-famille .famille__corps { max-width: none; margin: 0; padding: 1rem 0 0; border-top: 2px solid var(--anthracite); border-radius: 0; background: none; }
.dbt .ia .ia-famille .rubrique-simple { margin: 0 0 0.8rem; font: 400 clamp(1.65rem, 1.15rem + 1.35vw, 2.4rem)/1.08 var(--serif); letter-spacing: -0.015em; }
@media (min-width: 640px) {
  .dbt .ia .ia-famille .famille__voir { padding-left: 10.5rem; }
  .dbt .ia .ia-famille .famille__voir .famille__etiquette { display: inline-block; width: 9.5rem; margin: 0 1rem 0 -10.5rem; }
}
@media (max-width: 860px) { .dbt .ia .ia-famille { grid-column: 1 / 13; } }
.dbt .ia .ia-methode summary { min-height: 44px; }

@media (prefers-reduced-motion: reduce) {
  .dbt :is(.bouton, .dz-bouton, .im-cta, .dbt-m, .dbt-m .cta__fleche, .inspi-planche__tuile) { transition: none; transform: none; }
  .dbt .dbt-m--a::after { transition: none; }
}