/* HARMONISATION DE LA MARQUE (Romain 02/10: « l'agent harmonisation passera après l'audit complet et devra harmoniser
   sur toutes les plateformes, on vise la perfection »). The LAST sheet of the head (after correctifs-0210b.css), every
   rule scoped by the body class .hrm (inc/harmonisation.php, switch: option canape_hrm_off). It changes no layout of a
   validated maquette: it only brings the pages that drifted to the shared rules of the T1 art direction:
     1. no text under 12 px (the 12 incoherences of the responsive audit, item 1);
     2. ONE kicker (surtitre): Familjen Grotesk 600, 12 px, capitals, tracking 0.12em;
     3. titles: Source Serif 4, weight 400, on every page (the old Familjen 650 titles of the marque, Mag', contact,
        search, Ma sélection pages), the kicker-like small h2 excepted;
     4. ONE title size per family of page on phones and tablets: the tool pages (collection, guide, fiche, marque,
        comparatifs, duel, Mon projet, Mon salon, Ma sélection, données, recherche, contact) 28 px on a phone and 32 px
        on a tablet; the magazine covers (accueil, Mag', articles, Inspiration, pilier, confiance, légales, 404) keep
        their display size, the old articles take the size of the new article templates;
     5. the remaining buttons outside the Éditorial system (pills of the pilier, the duplicated arrow of Inspiration);
     6. the fiche details of the audit (duplicated « Format » title on phones, numbers kept on one line).
   Not touched (decisions of Romain pending or validated as they are): the lexique, the mustard flat areas of the
   « Nuit » chrome, the Brunelia footer link, the D3 infographics layout, the duel pages model A. */

/* ---------- 1. Kickers: one style everywhere (size, weight, case, tracking), each keeps its colour. Only true
   kickers are listed (the 12.8 px ones step down to 12, the 9.6 to 11.8 px ones step up); headings that only share
   a class name elsewhere are scoped to the page where they are a kicker. ---------- */
.hrm :is(.dk-surtitre, .dg-surtitre, .dzm-surtitre, .achat__surtitre, .dz-surtitre, .dzs-surtitre, .dzs-tete__sur,
  .dzc-surtitre, .dzc-une__sur, .dzm-podium__sur, .dzm-selection, .dzd-sur, .projet__surtitre, .spl-tete__sur,
  .qsn-surtitre, .db-surtitre, .mur__surtitre, .une-guide__surtitre, .une-guides__surtitre, .vitrine__surtitre,
  .ifg__surtitre, .inspi-bloc__sur, .im-label, .dl-suite__rubrique, .ha-rubrique__n, .calc > p.rubrique-simple,
  .quiz > p.rubrique-simple, .duel-options > p.rubrique-simple, .selection__surtitre, .guide-detail__surtitre,
  .mag-pilier__surtitre, .magx-outil__surtitre, .une-page__surtitre, .dc-colophon .avis-mag__encadre-titre,
  .dzo-surtitre, .pilier-etape__surtitre, p.sujet__rubrique, .essentiel__titre, .reperes__titre, .projet__bref-titre,
  .dzs-groupe, .dz-rail__label, .resume-ia__titre, .partage__titre, .dk-bulles__lib, .dzs-index__lib, .duel__pc-titre,
  .dzd-verdict__lab, .dg .guide-piliers__lib, .dz-souci__groupe) {
  font-family: var(--sans) !important; font-size: 0.75rem !important; font-weight: 600 !important;
  line-height: 1.25 !important; letter-spacing: 0.12em !important; text-transform: uppercase !important;
}
/* their inner parts (« · mis à jour le … », the rubric name) follow the kicker */
.hrm :is(.dk-surtitre, .dg-surtitre, .dzm-surtitre, .achat__surtitre, .dz-surtitre, .dzs-tete__sur, .dzd-sur,
  .projet__surtitre, .spl-tete__sur) :is(span, a, b) { font-size: inherit !important; letter-spacing: inherit !important; }

/* ---------- 2. No text under 12 px (audit responsive, item 1). The 12 px floor only ever RAISES a text: every
   selector below was measured under 12 px on every page where it exists (scripts/harmonisation/plancher.cjs
   checks that none of them is above 12 px anywhere before the pose). ---------- */
.hrm :is(.ft-lab, .ft-date, .ft-larg__l, .ft-ia, .note-globale__label, .achat__notice, .passe__note, .repere-choix,
  .repere__sur, .dk-bulle__n, .dk-col figcaption, .dk-col figcaption b, .dzm-tuile figcaption, .dzm-tuile figcaption b,
  .duel-tuile__meta, .duel__limite > span, .dzd-releve, .duel-tableau__avantage small, .dzs-sujet__rub, .dzs-index a sup,
  .dzs-tete__cnt small, .calc__lib, .calc__modes > legend, .calc__cote > legend, .salon__type > legend,
  .filtre-duels__label, .dg .situations__n, .dg .guide-carte__chiffres span, .dg-n span, .mini__nom small,
  .mini-barres__lib small, .ia-somm__nom small, .ia-somm__note i, .ha-edition span,
  .dl-404__form label, .dc-sommaire > p, .dl-sommaire > p, .dzo-cahiers a span, .qsn-renvois a span, .qsn-sous span,
  .qsn-bio b, .qsn-disque, .pcote__rl, .pcote__cote label, .mesures__infos h3, .sel-maillage h3, .note-barre__repere span,
  .barre-achat__note small, .passe summary small, .passe__champ small, .db-mention, .mur__mention, .dz-sommaire__n,
  .dz-etape__n, .dz-bref strong, .pied__titre, .encart-produit .repere-choix, .fiche-technique th,
  .pilule .num) {
  font-size: 0.75rem !important;
}
/* labels whose size grows with the screen: the floor on phones and tablets only */
@media (max-width: 1023px) {
  .hrm :is(.dk-chiffres dt, .dzm-chiffres dt, .dzc-chiffres dt, .dk-chiffres dt .num, .dzm-chiffres dt .num,
    .dg .guide-detail__repere dt, .fiche .logistique__ligne dt, .note-globale__tete, .dk dd small, .dk-bulle__nom, .collection.dk .onglets__label) { font-size: 0.75rem !important; }
}
/* table heads of the collection, duel and fiche tables (« Rang », « Critère ») */
.hrm main :is(.essentiel__tableau, .duel-tableau) thead th { font-size: 0.75rem !important; }
/* the stronger rules of the packages (fiche T1, Brunelia encart): the same floor with their own weight */
.hrm .fiche.ft .achat__surtitre, .hrm .fiche.ft .achat__surtitre span, .hrm .db-encart .db-encart__texte .db-surtitre { font-size: 0.75rem !important; letter-spacing: 0.12em !important; }
.hrm summary:has(> .dz-sommaire__n) > span:not([class]) { font-size: 0.75rem !important; }
/* the rest of the inventory, each scoped to the pages where it was measured under 12 px (plancher.cjs) */
.hrm :is(.dk-chiffres dt, .dzm-chiffres dt, .dk-chiffres dt .num, .dzm-chiffres dt .num, .dg .guide-detail__repere dt,
  .fiche .logistique__ligne dt, .collection.dk .onglets__label, .collection .filtre > legend,
  .dk td small, .dk td small a, th .ici, .dz-corps table th, .guide .situations__n,
  .dz-corps .encart-selection__titre, .dc-colophon thead th, .dc-colophon th small, .dc-colophon a > b.num,
  .dzs li a small, .im-mast > p:not(.im-mast-h), .im-c1 figcaption, .im-defiler, .im-nu-vert, .ia-vignettes a) {
  font-size: 0.75rem !important;
}
.hrm .dc-colophon .avis-mag__surtitre { font-size: 0.75rem !important; letter-spacing: 0.12em !important; }
body.hrm main .db-encart .db-encart__texte .db-surtitre { font-size: 0.75rem !important; }
@media (max-width: 640px) { .hrm .prix-situe > span:not(.info) { font-size: 0.75rem !important; } }

/* ---------- 3. Titles in Source Serif 4 on every page ----------
   a) everywhere, at the lowest weight of specificity (body + main + tag): every validated package rule that sets its
      own family, weight or tracking (pilier and légales in 300, articles, Inspiration, Le Mag') keeps winning;
   b) the old templates that set Familjen Grotesk 650 themselves (marque, guide des marques, guide marocain, old
      articles, Ma sélection, recherche, contact, plan du site, the long texts and FAQ of these pages): explicitly. */
body:where(.hrm:not(.page-id-23104)) main h1:where(:not(.dzs-tete__h1)),
body:where(.hrm:not(.page-id-23104)) main h2:where(:not([class*="surtitre"], .essentiel__titre, .reperes__titre, .projet__bref-titre, .dzs-groupe, .achat__h2, .duel__nom, .db-titre, [class*="ifg"])) {
  font-family: var(--serif); font-weight: 400;
}
.hrm :is(.avis-marque, .marques-guide, .guide-maroc) .guide-q__une h1, .hrm .guide__titraille > h1,
.hrm .selection__titraille > h1, .hrm .resultats > h1, .hrm .mag__titre,
.hrm:not(.page-id-23104) .page-standard:not(.dl-legal) > .page-standard__tete > h1 {
  font-family: var(--serif) !important; font-weight: 400 !important; letter-spacing: -0.02em !important;
}
.hrm:not(.page-id-23104) main :is(.rubrique, .avis-coeur__texte, .avis-faq__tete, .avis-mag__texte, .famille__corps,
  .faq, .lecture, .pilier-verdict__tete, .texte-long, .bulles-marque, .resultats__bloc, .pilier-bloc,
  .onglets__panneau, .sel-approfondi, .sel-faq, .selection, .page-standard, .enveloppe) > h2:not([class*="surtitre"]):not(.essentiel__titre):not(.reperes__titre):not(.projet__bref-titre):not(.dzs-groupe):not(.db-titre),
.hrm main summary > h2 {
  font-family: var(--serif) !important; font-weight: 400 !important; letter-spacing: -0.015em;
}
.hrm .dzp-manuel h2 { font-weight: 300 !important; }

/* ---------- 4. One title size per family of page, phones and tablets ---------- */
@media (max-width: 640px) {
  .hrm:not(.page-id-23104) main :is(.dk-titre h1, .dg .guide-q__une h1, .achat__titre, .collection__titraille h1,
    .avis-marque .guide-q__une h1, .marques-guide .guide-q__une h1, .guide-maroc .guide-q__une h1,
    .liste-articles__tete h1, .duel__titre, .projet__tete h1, .selection__titraille h1, .dzo-couv h1,
    .resultats > h1, .page-standard:not(.dl-legal) > .page-standard__tete > h1) {
    font-size: 1.75rem !important; line-height: 1.1 !important;
  }
  /* the old articles take the size of the 4 new article templates (.dz-titre) */
  .hrm .guide__titraille > h1 { font-size: 2.4rem !important; line-height: 1.02 !important; letter-spacing: -0.03em; }
}
@media (min-width: 641px) and (max-width: 1023px) {
  .hrm:not(.page-id-23104) main :is(.dk-titre h1, .dg .guide-q__une h1, .achat__titre, .collection__titraille h1,
    .avis-marque .guide-q__une h1, .marques-guide .guide-q__une h1, .guide-maroc .guide-q__une h1,
    .liste-articles__tete h1, .duel__titre, .projet__tete h1, .selection__titraille h1, .dzo-couv h1,
    .resultats > h1, .page-standard:not(.dl-legal) > .page-standard__tete > h1) {
    font-size: 2rem !important; line-height: 1.08 !important;
  }
  .hrm .guide__titraille > h1 { font-size: clamp(2.4rem, 1.2rem + 3.9vw, 4.6rem) !important; line-height: 1.0 !important; letter-spacing: -0.032em; }
}
@media (min-width: 1024px) {
  .hrm .guide__titraille > h1 { font-size: clamp(2.4rem, 1.2rem + 3.9vw, 4.6rem); line-height: 1.0; letter-spacing: -0.032em; }
}

/* ---------- 5. Buttons outside the Éditorial system ---------- */
/* Inspiration: the label already ends with « → » and the system draws one: one arrow only */
.hrm a.im-cta > span[aria-hidden="true"]:last-child { display: none; }
/* Pilier « Le Manuel »: the last pills (resume / share, the jump to the test, the comparatifs link, the quiz answers) */
.hrm .dzp-manuel .dzp-pilule { border-radius: 4px; min-height: 44px; border-color: var(--anthracite); }
.hrm .dzp-manuel .pilier__sommaire a[href="#le-test"] { border-radius: 4px; min-height: 44px; display: inline-flex; align-items: center; background: var(--anthracite); color: #fff; }
.hrm .dzp-manuel .pilier__sommaire a[href="#le-test"]::after { content: "→"; margin-left: 0.5rem; color: var(--moutarde); }
.hrm .dzp-manuel .pilier__comparatifs .lien-fleche { border-radius: 4px; min-height: 44px; display: inline-flex; align-items: center; }
.hrm .dzp-manuel .quiz-selection .quiz__reponse span { border-radius: 4px; min-height: 44px; display: flex; align-items: center; }
.hrm .dzp-manuel .quiz-selection .quiz__resultat { border-radius: 4px; }

/* ---------- 6. Fiche details ---------- */
/* phones: the « Choisir mon format » card already says « Format, 3 formats au choix »: the title of the axes under it
   (« FORMAT 3 au choix ») repeated it (audit responsive, item 5) */
@media (max-width: 640px) {
  .hrm .fiche .achat:has(.format-choix) > .variantes > .variantes__titre:first-child { display: none !important; }
}
/* figures and their unit never split over 2 lines (« 1 299 € », « 2 500 € », « 244 cm ») */
.hrm :is(span.num, .cote__val, .ms-prix, span[data-v-prix]):not(:has(*)) { white-space: nowrap; }

/* ---------- 7. Pilier: the opening photo bleeds on both sides on a phone (audit responsive, item 7) ---------- */
@media (max-width: 760px) {
  .hrm .dzp-manuel .guide-q__visuel { width: calc(100% + 2 * var(--gutter)); max-width: none; }
  .hrm .dzp-manuel .guide-q__visuel, .hrm .dzp-manuel .guide-q__visuel :is(img, picture, .dzp-cadre) { border-radius: 0; }
}

/* ---------- 8. Horizontal scrollers: the same edge shadow everywhere, only while there is more to see (audit
   responsive, item 12; « scrolling shadows »: the covers move with the content, the shadows stay on the edges) ---------- */
@media (max-width: 1023px) {
  .hrm :is(.tableau-defile, .dzs-index) {
    background:
      linear-gradient(90deg, var(--platre) 30%, rgba(239, 238, 234, 0)) left center / 32px 100% no-repeat local,
      linear-gradient(270deg, var(--platre) 30%, rgba(239, 238, 234, 0)) right center / 32px 100% no-repeat local,
      radial-gradient(farthest-side at 0 50%, rgba(37, 39, 43, 0.16), rgba(37, 39, 43, 0)) left center / 12px 100% no-repeat scroll,
      radial-gradient(farthest-side at 100% 50%, rgba(37, 39, 43, 0.16), rgba(37, 39, 43, 0)) right center / 12px 100% no-repeat scroll;
  }
}

/* ---------- 9. Last controls outside the Éditorial system (inventory boutons-hors, 390 / 768 / 1024) ---------- */
/* comparator of the fiches: « ou / et » 26 px pills with a mustard fill -> square segmented control, 36 px, the
   pressed state in anthracite with the mustard line (the state of every Éditorial toggle) */
.hrm .comparateur__mode { border-radius: 4px; border-color: var(--anthracite); }
.hrm .comparateur__mode button { min-height: 36px; padding-inline: 0.8rem; }
.hrm .comparateur__mode button[aria-pressed="true"] { background: var(--anthracite); color: #fff; box-shadow: inset 0 -3px 0 var(--moutarde); }
.hrm .comparateur__propositions button { border-radius: 4px; }
.hrm .comparateur__propositions img { border-radius: 2px; }
/* « Choisir mon format » sheet: the system font (the button default was Arial) and square corners */
.hrm .format-feuille__choix { font-family: var(--sans); }
.hrm .format-feuille__choix[aria-pressed="true"] { border-radius: 4px; }
/* video consent: square like every secondary button */
.hrm .video-accord__lire { border-radius: 4px; }
/* comparatifs list: the jumps « Meilleurs canapés / Comparatifs » in the site sans (only the VS seal stays serif) */
.hrm .sel-saut { font-family: var(--sans); }
.hrm .sel-saut__vs { font-family: var(--serif); }
.hrm .sel-saut { font-weight: 600; }
/* variant choices of the fiche: 36 px at every width (they fell to 30 px on a 1024 tablet in landscape) */
.hrm .fiche .variantes__choix { min-height: 36px; }
/* home budgets on the smallest phones: « 1 500 » now stays on one line (no-break space), the figure a step smaller */
@media (max-width: 374px) { .hrm .ha .budget__chiffre { font-size: 1.8rem; } }
/* the colour swatches of a variant fiche go to a second line on the narrowest phones (320) instead of leaving the screen */
@media (max-width: 359px) { .hrm .fiche.ft1a2 .variantes__couleurs.coloris { flex-wrap: wrap !important; } }
/* fiche sticky bar on tablets (641 to 1023 px): name, note, gauge, « Notre note », « Prix constaté » and the price
   were squeezed on top of each other next to the merchant button; the gauge and the 2 small labels step aside */
@media (min-width: 641px) and (max-width: 1023px) {
  .hrm .barre-achat :is(.barre-achat__jauge, .barre-achat__label, .barre-achat__prix-bloc > small) { display: none; }
  .hrm .barre-achat__produit { min-width: 0; }
  .hrm .barre-achat__nom { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; white-space: normal; }
}