/* HOME « Couverture » (design-mag-accueil 02/10, proposition A validated by Romain 02/10 03 h 25) and the brand band as
   an « Intermède » (bandeau C, validated 03 h 40), front page only. v4 (07 h 51): pictures always whole, square corners,
   « Éditorial » buttons, guides and Explorer in the collection T1 language, the same head on every section.
   Mockup: design-mag/protos/accueil-a-v4.html. Scoped by .ha (wrapper of the home in front-page.php). */
.ha { --ha-gap: clamp(1.2rem, 2.6vw, 2.6rem); --ha-sec: clamp(3rem, 7vw, 5.5rem); }
.ha .enveloppe { max-width: 78rem; }

/* ---------------- COVER (first screen) ---------------- */
.ha .une.ha-couverture { min-height: 0; padding: clamp(0.9rem, 2vw, 1.6rem) 0 0; background: var(--platre); border-bottom: 0; }
.ha .une.ha-couverture .une__grille { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--ha-gap); row-gap: 0; align-items: start; }
.ha .une__texte { grid-column: 1 / 7; grid-row: 1; padding: 0; display: grid; align-content: start; }
.ha .une__visuel.vitrine { grid-column: 7 / 13; grid-row: 1 / span 2; }
.ha .ha-chiffres { grid-column: 1 / 7; grid-row: 2; align-self: end; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; margin: 1.6rem 0 0; padding: 0; }
.ha .ha-chiffres .chiffre { padding: 0.7rem 0.8rem 0 0; border-top: 1px solid var(--anthracite); }
.ha .ha-chiffres .chiffre + .chiffre { padding-left: 0.8rem; }
.ha .ha-chiffres .chiffre__valeur { font-size: clamp(1.7rem, 1.2rem + 1.2vw, 2.4rem); }
.ha .ha-chiffres .chiffre__label { margin-top: 0.35rem; font-size: 0.76rem; line-height: 1.3; }
.ha-edition { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0.3rem 1.2rem; margin: 0 0 clamp(1rem, 2.2vw, 1.6rem); padding-bottom: 0.6rem; border-bottom: 1px solid var(--anthracite); font: 600 0.7rem/1.2 var(--sans); letter-spacing: 0.12em; text-transform: uppercase; color: var(--anthracite); }
.ha-edition span:last-child { color: var(--feutre); }
.ha .une.ha-couverture .une__requete { margin: 0 0 0.9rem; font: 600 0.7rem/1.2 var(--sans); letter-spacing: 0.12em; text-transform: uppercase; color: var(--bleu); }
.ha .une.ha-couverture .une__requete::after { color: var(--feutre); font-weight: 500; }
.ha .une.ha-couverture .une__titre { margin: 0 0 1rem; font-family: var(--serif); font-weight: 400; font-size: clamp(2.6rem, 0.9rem + 3.9vw, 4.7rem); line-height: 0.95; letter-spacing: -0.045em; }
.ha .une__titre > span:nth-child(3) { font-style: italic; font-weight: 300; }
.ha .une.ha-couverture .une__chapeau { max-width: 31rem; margin: 0 0 1.3rem; font: 400 clamp(1.02rem, 0.95rem + 0.3vw, 1.16rem)/1.5 var(--serif); color: var(--anthracite); }
/* The tool, a flat card under a 2 px rule: question and value on one line, slider, result and button on one line */
.ha .une.ha-couverture .place { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; column-gap: 1rem; max-width: 33rem; margin: 0; padding: 0.95rem 1.15rem 1.05rem; background: var(--blanc); border: 0; border-top: 2px solid var(--anthracite); border-radius: 0 0 4px 4px; box-shadow: none; }
.ha .place label { grid-column: 1; margin: 0; font: 600 0.72rem/1.2 var(--sans); letter-spacing: 0.12em; text-transform: uppercase; color: var(--bleu); }
.ha .place__mesure { grid-column: 2; grid-row: 1; justify-self: end; font: 300 2.2rem/1 var(--serif); letter-spacing: -0.03em; color: var(--anthracite); }
.ha .place__mesure small { font: 500 0.8rem/1 var(--sans); letter-spacing: 0; color: var(--feutre); }
.ha .place input[type="range"] { grid-column: 1 / -1; margin: 0.55rem 0 0.35rem; }
.ha .place__resultat { grid-column: 1; margin: 0; font: 500 0.88rem/1.35 var(--sans); color: var(--feutre); }
.ha .place__envoyer { grid-column: 2; justify-self: end; display: inline-flex; align-items: center; gap: 0.45rem; min-height: 44px; padding: 0 1.15rem; border-radius: 999px; background: var(--anthracite); color: var(--blanc); font: 600 0.9rem/1.1 var(--sans); text-decoration: none; white-space: nowrap; transition: background-color 0.2s ease, color 0.2s ease; }
.ha .place__envoyer::after { content: "\2192"; }
.ha .place__envoyer:hover, .ha .place__envoyer:focus-visible { background: var(--moutarde); color: var(--anthracite); }
.ha .place__envoyer.lien-fleche { background-image: none; text-decoration: none; }
/* The vitrine: picture bounded so the cover stays one screen, caption under a thin rule */
.ha .vitrine { gap: 0.6rem; }
.ha .vitrine__scene { aspect-ratio: auto; height: clamp(15rem, calc(100svh - 19.5rem), 38rem); border-radius: 4px; background: #ececec; }
.ha .vitrine__photo { object-position: 50% 55%; }
.ha .vitrine__note { top: 0.9rem; right: 0.9rem; width: 58px; height: 58px; font: 400 1.35rem/1 var(--serif); box-shadow: none; }
.ha .vitrine__mesure .cote { font-size: 0.78rem; }
.ha .vitrine__legende { grid-template-columns: minmax(0, 1fr) auto; align-items: baseline; column-gap: 1rem; padding-top: 0.55rem; border-top: 1px solid var(--trait); }
.ha .vitrine__surtitre { grid-column: 1 / -1; font: 600 0.68rem/1.2 var(--sans); letter-spacing: 0.12em; text-transform: uppercase; color: var(--bleu); }
.ha .vitrine__legende a { font: 400 1.3rem/1.15 var(--serif); letter-spacing: -0.01em; }
.ha .vitrine__chiffres { font: 500 0.86rem/1 var(--sans); }
/* The brand band closes the cover (validated 01/10 18 h 15), thinner */
/* The brand band as an « Intermède » (bandeau C, validated by Romain 02/10 03 h 40): out of the cover, right after
   « Au sommaire », large slow serif names between two full-width rules, its title in bronze laid on the top rule. Same
   links, same scroll (paused on hover, still with reduced motion). */
.ha-intermede { overflow: hidden; margin-top: calc(var(--ha-sec) - 0.6rem); padding-top: 0.6rem; }
.ha-intermede .bandeau-marques { position: relative; margin: 0; padding: clamp(1.1rem, 2.4vw, 1.7rem) 0; overflow: visible; background: none; color: var(--anthracite); border-block: 1px solid var(--anthracite); }
.ha-intermede .bandeau-marques::before { content: attr(aria-label); position: absolute; left: 50%; top: 0; z-index: 2; transform: translate(-50%, -50%); padding: 0 0.9rem; background: var(--platre); font: 600 0.68rem/1.2 var(--sans); letter-spacing: 0.12em; text-transform: uppercase; color: var(--bleu); white-space: nowrap; }
.ha-intermede .bandeau-marques__piste { animation-duration: 80s; }
.ha-intermede .bandeau-marques__liste li { padding: 0 clamp(1.2rem, 2.4vw, 2.2rem); }
.ha-intermede .bandeau-marques__liste li::after { content: ""; width: 6px; height: 6px; border: 0; border-radius: 50%; background: var(--moutarde); transform: translate(50%, -50%); }
.ha-intermede .bandeau-marques__liste a, .ha-intermede .bandeau-marques__liste span { font: 300 clamp(2rem, 1.3rem + 2.6vw, 3.6rem)/1.05 var(--serif); letter-spacing: -0.03em; color: var(--anthracite); text-decoration: none; }
.ha-intermede .bandeau-marques__liste li:nth-child(even) a, .ha-intermede .bandeau-marques__liste li:nth-child(even) span { font-style: italic; }
.ha-intermede .bandeau-marques__liste span { color: var(--feutre); }
.ha-intermede .bandeau-marques__liste a:hover, .ha-intermede .bandeau-marques__liste a:focus-visible { color: var(--bleu-2); }
@media (max-width: 700px) { .ha-intermede .bandeau-marques::before { font-size: 0.62rem; letter-spacing: 0.1em; } }
@media (prefers-reduced-motion: reduce) { .ha-intermede .bandeau-marques { overflow-x: auto; } }

/* ---------------- Section heads, everywhere the same ---------------- */
.ha > section.bloc, .ha > .ha-sommaire, .ha > section.chiffres { padding-block: var(--ha-sec) 0; }
.ha .rubrique, .ha .une-guides__entete { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 0.4rem 2rem; max-width: none; margin: 0 0 clamp(1.4rem, 3vw, 2.2rem); padding: 0.9rem 0 0; border: 0; border-top: 2px solid var(--anthracite); }
.ha .rubrique h2, .ha .une-guides__entete h2, .ha .methode__intro h2, .ha .mur__texte h2, .ha-sommaire__titre h2 { margin: 0; font: 400 clamp(2rem, 1.3rem + 2.2vw, 3.3rem)/1.02 var(--serif); letter-spacing: -0.028em; text-wrap: balance; }
.ha .rubrique > a, .ha .rubrique > p { justify-self: end; margin: 0; font: 600 0.88rem/1.3 var(--sans); color: var(--anthracite); text-decoration: underline; text-decoration-color: var(--moutarde); text-decoration-thickness: 2px; text-underline-offset: 0.3em; }
.ha .rubrique > p { text-decoration: none; color: var(--feutre); font-weight: 500; }
.ha .une-guides__entete { grid-template-columns: minmax(0, 1fr) minmax(0, 0.8fr); }
.ha .une-guides__surtitre, .ha .mur__surtitre { grid-column: 1 / -1; font: 600 0.72rem/1.2 var(--sans); letter-spacing: 0.12em; color: var(--bleu); }
.ha .une-guides__surtitre::before { display: none; }
.ha .une-guides__chapeau { grid-column: 2; grid-row: 2; justify-self: end; max-width: 30rem; font: 400 0.98rem/1.55 var(--serif); color: var(--feutre); }

/* ---------------- Au sommaire ---------------- */
.ha-sommaire__titre { display: block; margin: 0 0 1.6rem; padding-top: 0.9rem; border-top: 2px solid var(--anthracite); }
.ha-sommaire__titre h2 em { font-weight: 300; }
.ha-rubriques { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--ha-gap); }
.ha-rubrique a { display: grid; grid-template-rows: auto auto 1fr auto; gap: 0.75rem; height: 100%; color: var(--anthracite); text-decoration: none; }
.ha-rubrique__n { display: flex; align-items: baseline; gap: 0.6rem; font: 600 0.7rem/1 var(--sans); letter-spacing: 0.12em; text-transform: uppercase; color: var(--bleu); }
.ha-rubrique__n b { font: 300 2.8rem/0.8 var(--serif); letter-spacing: -0.05em; color: var(--anthracite); }
.ha-rubrique__photo { display: block; overflow: hidden; aspect-ratio: 4 / 5; border-radius: 4px; background: var(--platre-2); }
.ha-rubrique__photo img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.9s cubic-bezier(0.2, 0.7, 0.1, 1); }
.ha-rubrique a:hover .ha-rubrique__photo img { transform: scale(1.04); }
.ha-rubrique__titre { font: 400 1.4rem/1.15 var(--serif); letter-spacing: -0.01em; text-wrap: balance; }
.ha-rubrique a:hover .ha-rubrique__titre { text-decoration: underline; text-decoration-color: var(--moutarde); text-decoration-thickness: 1.5px; text-underline-offset: 0.15em; }
.ha-rubrique__chiffre { padding-top: 0.55rem; border-top: 1px solid var(--trait); font: 500 0.82rem/1.35 var(--sans); color: var(--feutre); }
.ha-rubrique__chiffre b { color: var(--anthracite); font-weight: 650; }

/* ---------------- Figures, a magazine line ---------------- */
.ha .chiffres { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; }
.ha .chiffre { padding: 1rem 1.4rem 0.2rem 0; background: none; border: 0; border-top: 2px solid var(--anthracite); border-radius: 0; box-shadow: none; }
.ha .chiffre + .chiffre { padding-left: 1.4rem; border-left: 1px solid var(--trait); }
.ha .chiffre__valeur { display: block; font: 300 clamp(2.6rem, 1.8rem + 2.6vw, 4.2rem)/0.9 var(--serif); letter-spacing: -0.05em; color: var(--anthracite); }
.ha .chiffre__label { display: block; margin-top: 0.5rem; font: 500 0.84rem/1.35 var(--sans); color: var(--feutre); }

/* ---------------- The best sofas: ranked lines ---------------- */
.ha .top-canapes { gap: 0; border-top: 0; }
.ha .top-canapes__ligne { grid-template-columns: 4.2rem 9.5rem minmax(0, 1fr) auto; gap: 1.2rem; padding: 1rem 0; border: 0; border-bottom: 1px solid var(--trait); border-radius: 0; background: none; box-shadow: none; }
.ha .top-canapes__ligne:hover { transform: none; background: none; }
.ha .top-canapes__ligne--un { border: 0; border-bottom: 1px solid var(--trait); background: none; }
.ha .top-canapes__rang { font: 300 3.2rem/0.85 var(--serif); letter-spacing: -0.04em; color: var(--anthracite); text-align: left; }
.ha .top-canapes__ligne--un .top-canapes__rang { color: var(--bleu); }
.ha .top-canapes__photo { border-radius: 4px; }
.ha .top-canapes__texte h3 { font: 400 1.35rem/1.15 var(--serif); letter-spacing: -0.01em; }
.ha .top-canapes__note { font-family: var(--serif); font-weight: 300; }

/* ---------------- Cards of the other sections: flat, ruled ---------------- */
.ha .acc-fil__grille > li, .ha .forme, .ha .acc-pastille, .ha .situations__liste a, .ha .carte, .ha .une-page, .ha .budget, .ha [class*="marque-carte"] {
  border-radius: 4px; box-shadow: none;
}
.ha .acc-fil__grille > li { background: var(--blanc); border: 0; border-top: 2px solid var(--anthracite); border-radius: 0 0 4px 4px; }
.ha .une-guide__photo, .ha .sujet__photo, .ha .acc-pastille__img { border-radius: 4px; }
.ha .une-guide__titre, .ha .sujet__titre, .ha .une-page__titre { font-family: var(--serif); font-weight: 400; letter-spacing: -0.01em; }
.ha .une-guide--une .une-guide__titre { font-size: clamp(1.6rem, 1.1rem + 1.4vw, 2.3rem); }
.ha .une-guide__num { border-radius: 0; background: var(--blanc); font: 300 1.1rem/1 var(--serif); }
.ha .une-guide--une .une-guide__num { background: var(--moutarde); }
/* Dark bands keep their colour, with the same heads */
/* Coloured blocks (Romain 02/10 03 h 25: « attention aux bordures qui se touchent »): real inner margins at the bottom too,
   so the links of « Explorer », the portrait and the criteria cards of the method never touch the edge of their block. */
.ha > section.une-explorer, .ha > section.methode { margin-top: var(--ha-sec); padding-block: var(--ha-sec); }
.ha > section.mur { margin-top: var(--ha-sec); padding-block: clamp(2.4rem, 5vw, 4rem); }
.ha > section.une-explorer + section, .ha > section.methode + section, .ha > section.mur + section { padding-top: var(--ha-sec); }
.ha .une-explorer .une-guides__entete, .ha .methode__intro { border-top-color: var(--moutarde); }
.ha .une-explorer h2, .ha .methode h2 { color: var(--blanc); }
.ha .methode__intro { padding-top: 0.9rem; border-top: 2px solid var(--moutarde); }
.ha .methode__intro .chapeau { font: 400 1.02rem/1.6 var(--serif); }
.ha .mur__texte h2 { margin-bottom: 0.8rem; }
.ha .faq summary { font: 400 1.15rem/1.35 var(--serif); }
.ha .une-faq__grille .une-guides__entete { grid-template-columns: minmax(0, 1fr); }
.ha > section.bloc:last-child { padding-bottom: var(--ha-sec); }

/* Sections end without a hairline; two-column blocks get smaller heads */
.ha .bloc, .ha .chiffres, .ha .bloc + .bloc { border-bottom: 0; border-top: 0; box-shadow: none; }
.ha .formes-budgets .rubrique, .ha .acc-raccourcis .rubrique { grid-template-columns: minmax(0, 1fr); }
.ha .formes-budgets .rubrique > a, .ha .acc-raccourcis .rubrique > a { justify-self: start; }
.ha .formes-budgets .rubrique h2, .ha .acc-raccourcis .rubrique h2 { font-size: clamp(1.7rem, 1.2rem + 1.3vw, 2.4rem); }
/* Shapes, sizes, brands, budgets: one family of flat white tiles */
.ha .forme, .ha .acc-pastille { background: var(--blanc); border: 0; border-radius: 4px; box-shadow: none; transition: background-color 0.2s ease; }
.ha .forme:hover, .ha .acc-pastille:hover { background: #fff; }
.ha .forme__nom, .ha .acc-pastille__nom { font-family: var(--serif); font-weight: 400; font-size: 1.05rem; }
.ha .budget { background: var(--blanc); color: var(--anthracite); border: 0; border-top: 2px solid var(--anthracite); border-radius: 0 0 4px 4px; box-shadow: none; }
.ha .budget:hover { background: var(--moutarde-voile); }
.ha .budget__chiffre { font: 300 clamp(2.2rem, 1.6rem + 1.6vw, 3rem)/1 var(--serif); letter-spacing: -0.04em; color: var(--anthracite); }
.ha .budget__chiffre small, .ha .budget__chiffre span { color: var(--bleu); }
.ha .budget__label { color: var(--feutre); font: 500 0.84rem/1.3 var(--sans); }

/* ---------------- Tablets ---------------- */
@media (max-width: 1000px) {
  .ha-rubriques { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 2.2rem; }
  .ha .chiffres { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ha .chiffre:nth-child(3) { padding-left: 0; border-left: 0; }
}
/* ---------------- Phones: the tool inside the first screen ---------------- */
@media (max-width: 900px) {
  .ha .une.ha-couverture .une__grille { grid-template-columns: minmax(0, 1fr); }
  .ha .une__texte, .ha .une__visuel.vitrine, .ha .ha-chiffres { grid-column: 1; grid-row: auto; }
  .ha .une__texte { order: 1; }
  .ha .une__visuel.vitrine { order: 3; }
  .ha .ha-chiffres { order: 4; margin-top: 1.4rem; }
  .ha .une__visuel.vitrine { margin-top: 1.6rem; }
  .ha .vitrine__scene { height: auto; aspect-ratio: 5 / 4; }
  .ha .une.ha-couverture .une__chapeau { display: none; }
  .ha .rubrique, .ha .une-guides__entete { grid-template-columns: minmax(0, 1fr); }
  .ha .rubrique > a, .ha .rubrique > p, .ha .une-guides__chapeau { grid-column: 1; grid-row: auto; justify-self: start; }
  .ha .top-canapes__ligne { grid-template-columns: 2.4rem 6.5rem minmax(0, 1fr); gap: 0.9rem; }
  .ha .top-canapes__rang { font-size: 2.3rem; }
  .ha .top-canapes__chiffres { grid-column: 3; }
}
@media (max-width: 600px) {
  .ha-edition { margin-bottom: 0.8rem; font-size: 0.64rem; }
  .ha-edition span:last-child { display: none; }
  .ha .une.ha-couverture .une__requete { margin-bottom: 0.6rem; font-size: 0.64rem; }
  .ha .une.ha-couverture .une__titre { margin-bottom: 0.9rem; font-size: clamp(2.35rem, 11.4vw, 3rem); }
  .ha .une.ha-couverture .place { grid-template-columns: minmax(0, 1fr) auto; padding: 0.85rem 0.95rem 0.95rem; }
  .ha .place__mesure { font-size: 1.9rem; }
  .ha .place label { font-size: 0.64rem; letter-spacing: 0.1em; }
  .ha .place__resultat { grid-column: 1 / -1; margin-bottom: 0.6rem; }
  .ha .place__envoyer { grid-column: 1 / -1; justify-self: stretch; justify-content: center; min-height: 48px; }
  .ha-rubriques { grid-template-columns: minmax(0, 1fr); row-gap: 0; }
  .ha-rubrique { border-bottom: 1px solid var(--trait); }
  .ha-rubrique a { grid-template-columns: 6.5rem minmax(0, 1fr); grid-template-rows: auto auto 1fr; column-gap: 1rem; row-gap: 0.4rem; padding: 1rem 0; }
  .ha-rubrique__n { grid-column: 2; grid-row: 1; }
  .ha-rubrique__n b { font-size: 1.6rem; }
  .ha-rubrique__photo { grid-column: 1; grid-row: 1 / span 3; aspect-ratio: 4 / 5; }
  .ha-rubrique__titre { grid-column: 2; font-size: 1.2rem; }
  .ha-rubrique__chiffre { grid-column: 2; padding-top: 0.3rem; border-top: 0; }
  .ha .ha-chiffres { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 1rem; }
  .ha .ha-chiffres .chiffre:nth-child(3) { padding-left: 0; border-left: 0; }
  .ha .top-canapes__texte h3 { font-size: 1.12rem; }
}
@media (prefers-reduced-motion: reduce) { .ha-rubrique__photo img, .ha .place__envoyer { transition: none; } }
.ha .situations__nom { line-height: 1.22; }

/* ================= v4 (Romain 02/10 07 h 51: « accueil nickel » mais : photos coupées, bouton pas Éditorial, guides et
   Explorer pas repris, « manque d'harmonie »). One rule set for the whole page: pictures always whole (object-fit
   contain in a frame of the picture's own ratio, plaster behind), square corners (3 px pictures and cards, 4 px buttons
   as the validated « Éditorial » system), the same head on every section (bronze small-caps kicker, serif H2, rule). */

/* 1. Pictures never cut: covers are 16:9, studio photos 4:3; the frame takes that ratio, the picture is contained. */
.ha :is(.vitrine__scene, .ha-rubrique__photo, .une-guide__photo, .une-page__photo, .sujet__photo, .carte__photo, .top-canapes__photo, .duel-semaine__cote, .acc-fil__vignette, .acc-pastille__img, .une-plus__liste a) img { object-fit: contain !important; object-position: 50% 50% !important; transform: none !important; }
.ha .vitrine__scene { height: auto; aspect-ratio: 4 / 3; background: #ececec; }
.ha .ha-rubrique__photo { aspect-ratio: 4 / 3; background: var(--platre-2); }
.ha :is(.une-guide__photo, .une-guide--une .une-guide__photo, .une-page__photo, .sujet__photo, .sujet--grand .sujet__photo) { aspect-ratio: 16 / 9; background: var(--platre-2); }
.ha .carte__photo, .ha .top-canapes__photo, .ha .duel-semaine__cote { background-color: #ececec; }

/* 2. Square corners everywhere (round badges of the note and the « ou » of the duel excepted) */
.ha :is(.vitrine__scene, .ha-rubrique__photo, .une-guide__photo, .une-page__photo, .une-page, .sujet__photo, .carte, .carte__photo, .top-canapes__photo, .duel-semaine__carte, .acc-fil__vignette, .acc-fil__vignette img, .acc-fil__grille > li, .acc-pastille, .acc-pastille__img, .forme, .budget, .une-guide, .une-guide--plus, .une-plus__liste img, .methode li, .faq details, .mur__affiches img, .situations__liste a) { border-radius: 3px; }

/* 3. Buttons in the « Éditorial » system (validated 02/10 01 h 50, as the collections): principal black, 44 px and more,
   one line, the arrow on a mustard block; secondary paper with a 1 px anthracite border, a mustard line on hover. */
.ha .une.ha-couverture .place__envoyer { display: inline-flex; align-items: stretch; justify-content: space-between; gap: 0; min-height: 48px; padding: 0 0 0 1.15rem; border: 0; border-radius: 4px; overflow: hidden; background: var(--anthracite); background-image: none; color: var(--blanc); font: 600 0.92rem/48px var(--sans); letter-spacing: 0.005em; white-space: nowrap; text-decoration: none; transition: background-color 0.18s ease; }
.ha .une.ha-couverture .place__envoyer::after { content: "\2192"; display: block; flex: none; margin-left: 1rem; padding: 0 0.95rem; background: var(--moutarde); color: var(--anthracite); font: 600 1.05rem/48px var(--sans); transition: background-color 0.18s ease; }
.ha .une.ha-couverture .place__envoyer:hover, .ha .une.ha-couverture .place__envoyer:focus-visible { background: #000; color: var(--blanc); }
.ha .une.ha-couverture .place__envoyer:hover::after { background: #c2931c; }
.ha .place__envoyer:focus-visible, .ha .bouton:focus-visible, .ha .une-explorer__outils a:focus-visible { outline: 3px solid var(--moutarde); outline-offset: 2px; }
.ha .bouton.bouton--discret { display: inline-flex; align-items: center; min-height: 44px; 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); text-decoration: none; transition: box-shadow 0.18s ease; }
.ha .bouton.bouton--discret:hover { background: var(--blanc); color: var(--anthracite); box-shadow: inset 0 -3px 0 var(--moutarde); }
.ha .une-guide--plus .une-plus__tout { align-self: flex-start; display: inline-flex; align-items: stretch; justify-content: space-between; gap: 0; width: auto; max-width: 100%; min-height: 48px; margin: 0; padding: 0 0 0 1.15rem; border: 0; border-radius: 4px; overflow: hidden; background: var(--anthracite); color: var(--blanc); font: 600 0.92rem/1.25 var(--sans); text-decoration: none; }
.ha .une-guide--plus .une-plus__tout > *, .ha .une-guide--plus .une-plus__tout { align-items: center; }
.ha .une-guide--plus .une-plus__tout::after { content: "\2192"; display: flex; align-items: center; align-self: stretch; flex: none; width: auto; height: auto; margin-left: 1rem; padding: 0 0.95rem; border-radius: 0; background: var(--moutarde); color: var(--anthracite); font: 600 1.05rem/1 var(--sans); transform: none; }
.ha .une-guide--plus .une-plus__tout:hover { background: #000; }
.ha .une-guide--plus .une-plus__tout:hover::after { background: #c2931c; transform: none; }

/* 4. The same head on every section: bronze small-caps kicker above the serif H2, under the 2 px rule */
.ha .rubrique::before, .ha-sommaire__titre::before, .ha .methode__intro::before { grid-column: 1 / -1; display: block; margin: 0 0 0.45rem; font: 600 0.72rem/1.2 var(--sans); letter-spacing: 0.12em; text-transform: uppercase; color: var(--bleu); }
.ha-sommaire__titre::before { content: "Les rubriques"; }
.ha .rubrique:has(+ .top-canapes)::before { content: "Le classement"; }
.ha .acc-fil .rubrique::before { content: "Le journal du site"; }
.ha .formes-budgets > div:first-child .rubrique::before { content: "Par forme"; }
.ha .formes-budgets > div:last-child .rubrique::before { content: "Par budget"; }
.ha .acc-raccourcis__grille > div:first-child .rubrique::before { content: "Par taille"; }
.ha .acc-raccourcis__grille > div:last-child .rubrique::before { content: "Par marque"; }
.ha .situations .rubrique::before { content: "Selon votre usage"; }
.ha .duel-semaine .rubrique::before { content: "Face à face"; }
.ha .rubrique:has(+ .defile)::before { content: "Nouveaux avis"; }
.ha .rubrique:has(+ .sujets)::before { content: "Le Mag'"; }
.ha .methode__intro::before { content: "Notre méthode"; color: var(--moutarde); }
.ha .une-guides__surtitre, .ha .mur__surtitre, .ha .une-faq .une-guides__surtitre { margin: 0 0 0.45rem; font: 600 0.72rem/1.2 var(--sans); letter-spacing: 0.12em; text-transform: uppercase; color: var(--bleu); }
.ha .une-explorer .une-guides__surtitre { color: var(--moutarde); }
.ha .mur__texte { padding-top: 0.9rem; border-top: 2px solid var(--anthracite); }
.ha .une-faq__grille .une-guides__entete, .ha .mur__texte { align-self: start; }

/* The duel: the same card as the rest, names under the pictures (no text over the photos), square note */
.ha .duel-semaine__carte { gap: 0 6px; padding: 0.6rem 0.6rem 0; background: var(--anthracite); }
.ha .duel-semaine__cote { display: flex; flex-direction: column; aspect-ratio: auto; overflow: visible; background: none; }
.ha .duel-semaine__cote img { aspect-ratio: 4 / 3; height: auto; background: #ececec; }
.ha .duel-semaine__cote::after { content: none; }
.ha .duel-semaine__nom { position: static; display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.3rem 0.6rem; padding: 0.85rem 1rem 0; font: 400 clamp(1.05rem, 0.9rem + 0.6vw, 1.4rem)/1.2 var(--serif); text-shadow: none; color: var(--blanc); }
.ha .duel-semaine__nom small { padding: 0.25rem 0.45rem; border-radius: 2px; font: 600 0.78rem/1 var(--sans); }
.ha .duel-semaine__ou { top: 0; margin-top: calc((100% - 6px - 1.2rem) * 0.1875 + 0.6rem); /* a margin in % is of the card width: middle of the 4:3 pictures */ width: 64px; height: 64px; font-size: 1.6rem; box-shadow: none; }
.ha .duel-semaine__action { padding: 0.9rem 1rem 1.1rem; font: 600 0.9rem/1.35 var(--sans); }
@media (max-width: 700px) { .ha .duel-semaine__ou { width: 46px; height: 46px; font-size: 1.15rem; } .ha .duel-semaine__nom { padding: 0.7rem 0.7rem 0; font-size: 1rem; } .ha .duel-semaine__action { padding: 0.8rem 0.7rem 1rem; } }

/* 5. « Se faire guider »: the collection T1 cards, 4 equal guides under a rule, thin serif numerals, whole covers,
   then the 5 other guides as a ruled index (no dark tile, no rounded box) */
.ha .une-guides__grille { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 2rem var(--ha-gap); }
.ha .une-guide, .ha .une-guide--une { grid-column: auto; grid-row: auto; display: flex; flex-direction: column; gap: 0.55rem; padding-top: 0.8rem; border-top: 1px solid var(--anthracite); background: none; }
.ha .une-guide__num, .ha .une-guide--une .une-guide__num { position: static; order: -1; min-width: 0; padding: 0; border-radius: 0; background: none; color: var(--anthracite); font: 300 2.4rem/0.9 var(--serif); letter-spacing: -0.04em; text-align: left; }
.ha .une-guide__photo { margin: 0.2rem 0 0.3rem; }
.ha .une-guide__surtitre { font: 600 0.68rem/1.2 var(--sans); letter-spacing: 0.12em; color: var(--bleu); }
.ha .une-guide__titre, .ha .une-guide--une .une-guide__titre { font: 400 1.3rem/1.15 var(--serif); letter-spacing: -0.01em; }
.ha .une-guide__texte, .ha .une-guide--une .une-guide__texte { font: 400 0.92rem/1.5 var(--serif); color: var(--feutre); }
.ha .une-guide:not(.une-guide--une) .une-guide__lire, .ha .une-guide__lire { display: inline-block; margin-top: auto; padding-top: 0.3rem; align-self: flex-start; }
.ha .une-guide--plus { grid-column: 1 / -1; padding: 1rem 0 0; border: 0; border-top: 2px solid var(--anthracite); background: none; color: var(--anthracite); box-shadow: none; }
.ha .une-guide--plus .une-guide__surtitre { color: var(--bleu); }
.ha .une-guide--plus .une-guide__titre { margin-bottom: 0.4rem; color: var(--anthracite); font-size: 1.45rem; }
.ha .une-plus__liste { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0 var(--ha-gap); margin: 0 0 1.2rem; padding: 0; list-style: none; }
.ha .une-plus__liste li { border: 0; border-top: 1px solid var(--trait); padding: 0.8rem 0 0; }
.ha .une-plus__liste a { display: grid; gap: 0.5rem; color: var(--anthracite); text-decoration: none; font: 400 1rem/1.25 var(--serif); }
.ha .une-plus__liste a img { width: 100%; height: auto; aspect-ratio: 16 / 9; background: var(--platre-2); }
.ha .une-plus__liste a:hover span { text-decoration: underline; text-decoration-color: var(--moutarde); text-decoration-thickness: 1.5px; text-underline-offset: 0.18em; }

/* 6. « Explorer » (dark band): the same cards, whole covers with square corners, the links as Éditorial buttons */
.ha .une-page { background: none; padding: 0; gap: 0.55rem; }
.ha .une-page__titre { font: 400 1.2rem/1.2 var(--serif); }
.ha .une-explorer__outils { display: flex; flex-wrap: wrap; gap: 0.6rem; margin-top: 2rem; padding: 1.2rem 0 0; border-top: 1px solid rgba(255, 255, 255, 0.25); list-style: none; }
.ha .une-explorer__outils a, .ha .une-explorer__outils a.lien-fleche { display: inline-flex; align-items: center; min-height: 44px; padding: 0 1rem; border: 1px solid rgba(255, 255, 255, 0.5); border-radius: 4px; background: none; background-image: none; color: var(--blanc); font: 600 0.88rem/1.2 var(--sans); text-decoration: none; transition: box-shadow 0.18s ease, border-color 0.18s ease; }
.ha .une-explorer__outils a::after { content: none; }
.ha .une-explorer__outils a:hover { border-color: var(--blanc); box-shadow: inset 0 -3px 0 var(--moutarde); color: var(--blanc); }

@media (max-width: 1000px) {
  .ha .une-guides__grille { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ha .une-plus__liste { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 1rem; }
}
@media (max-width: 600px) {
  .ha .une-guides__grille { grid-template-columns: minmax(0, 1fr); }
  .ha .une-plus__liste { grid-template-columns: minmax(0, 1fr); row-gap: 0; }
  .ha .une-plus__liste a { grid-template-columns: 6.5rem minmax(0, 1fr); align-items: center; }
  .ha .une.ha-couverture .place__envoyer { width: 100%; min-height: 52px; line-height: 52px; }
  .ha .une.ha-couverture .place__envoyer::after { line-height: 52px; }
  .ha .une-explorer__outils a { width: 100%; }
}
@media (prefers-reduced-motion: reduce) { .ha .place__envoyer, .ha .place__envoyer::after, .ha .bouton, .ha .une-explorer__outils a { transition: none; } }