/* ==========================================================================
   Martagon — feuille de style unique du magazine
   Direction : « Concept suisse, bien-être & vitalité »
   Palette nommée : crème chaleureuse · gris brume · bleu alpin · vert sauge
                    · prune doux  (aucune autre couleur d'accent)
   Préfixe de classes : hb-
   ========================================================================== */

/* --- 1. Polices auto-hébergées (OFL) ------------------------------------ */

@font-face {
  font-family: 'Literata';
  src: url('/assets/fonts/literata-lat-var.woff2') format('woff2');
  font-weight: 200 900;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191,
    U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Literata';
  src: url('/assets/fonts/literata-latx-var.woff2') format('woff2');
  font-weight: 200 900;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Literata';
  src: url('/assets/fonts/literata-lat-var-it.woff2') format('woff2');
  font-weight: 200 900;
  font-style: italic;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122;
}
@font-face {
  font-family: 'Literata';
  src: url('/assets/fonts/literata-latx-var-it.woff2') format('woff2');
  font-weight: 200 900;
  font-style: italic;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Atkinson';
  src: url('/assets/fonts/atkinson-lat-400.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2212, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Atkinson';
  src: url('/assets/fonts/atkinson-latx-400.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Atkinson';
  src: url('/assets/fonts/atkinson-lat-700.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2212, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Atkinson';
  src: url('/assets/fonts/atkinson-latx-700.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Atkinson';
  src: url('/assets/fonts/atkinson-lat-400-it.woff2') format('woff2');
  font-weight: 400;
  font-style: italic;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC,
    U+2000-206F, U+2074, U+20AC, U+2122;
}
@font-face {
  font-family: 'Atkinson';
  src: url('/assets/fonts/atkinson-latx-400-it.woff2') format('woff2');
  font-weight: 400;
  font-style: italic;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+1E00-1E9F, U+2C60-2C7F;
}

/* --- 2. Jetons ---------------------------------------------------------- */

:root {
  /* Crème chaleureuse */
  --hb-creme: #faf7f2;
  --hb-creme-2: #f3eee7;
  --hb-blanc: #ffffff;

  /* Gris brume */
  --hb-brume: #e4e0da;
  --hb-brume-2: #efebe5;

  /* Encre */
  --hb-encre: #2a2422; /* 14,3:1 sur crème */
  --hb-encre-2: #524b45; /* 8,0:1 sur creme, 7,4:1 sur creme-2 — AAA */

  /* Prune doux — accent unique */
  --hb-prune: #6e2a4a; /* 9,5:1 — AAA */
  --hb-prune-fonce: #55203a;
  --hb-prune-clair: #f4eaee;
  --hb-prune-bord: #e3d0d8;

  /* Bleu alpin */
  --hb-alpin: #5e7e9b; /* décor uniquement */
  --hb-alpin-txt: #35506a; /* 7,7:1 — AAA */
  --hb-alpin-clair: #ebf1f5;

  /* Vert sauge */
  --hb-sauge: #7f9a74; /* décor uniquement */
  --hb-sauge-txt: #3d5037; /* 7,6:1 sur sauge clair — AAA */
  --hb-sauge-clair: #eef2ea;

  /* Typographie */
  --hb-serif: 'Literata', Charter, 'Bitstream Charter', Georgia, 'Times New Roman', serif;
  --hb-sans: 'Atkinson', 'Segoe UI', system-ui, -apple-system, Arial, sans-serif;
  --hb-corps: 1.1875rem; /* 19 px */
  --hb-inter: 1.75;
  --hb-mesure: 35rem;

  /* Trame spatiale */
  --hb-e1: 0.25rem;
  --hb-e2: 0.5rem;
  --hb-e3: 0.75rem;
  --hb-e4: 1rem;
  --hb-e5: 1.25rem;
  --hb-e6: 1.5rem;
  --hb-e8: 2rem;
  --hb-e10: 2.5rem;
  --hb-e12: 3rem;
  --hb-e16: 4rem;
  --hb-e20: 5rem;
  --hb-e24: 6rem;

  /* Angles doux — jamais de pastille pleine sur un bouton */
  --hb-rayon-s: 8px;
  --hb-rayon: 12px;
  --hb-rayon-l: 18px;
  --hb-rond: 999px;

  --hb-gouttiere: clamp(1.25rem, 5vw, 4.5rem);
  --hb-largeur: 78rem;

  /* Courbes — jamais ease-in sur une entrée */
  --hb-sortie: cubic-bezier(0.23, 1, 0.32, 1);
  --hb-duo: cubic-bezier(0.77, 0, 0.175, 1);

  /* Profondeur : ombres basses et larges, jamais dures */
  --hb-ombre-1: 0 1px 2px rgba(42, 36, 34, 0.04), 0 6px 16px rgba(42, 36, 34, 0.05);
  --hb-ombre-2: 0 2px 6px rgba(42, 36, 34, 0.05), 0 16px 40px rgba(42, 36, 34, 0.08);
  --hb-ombre-3: 0 4px 10px rgba(42, 36, 34, 0.06), 0 28px 64px rgba(42, 36, 34, 0.11);
}

/* --- 3. Socle ----------------------------------------------------------- */

*,
*::before,
*::after {
  box-sizing: border-box;
}

/* Le masquage par attribut prime sur toute règle de display. */
[hidden] {
  display: none !important;
}

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 7rem;
}

body {
  margin: 0;
  background: var(--hb-creme);
  color: var(--hb-encre);
  font-family: var(--hb-sans);
  font-size: var(--hb-corps);
  line-height: var(--hb-inter);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img,
picture,
svg,
video {
  max-width: 100%;
  height: auto;
  display: block;
}

a {
  color: var(--hb-prune);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
}
a:hover {
  color: var(--hb-prune-fonce);
}

:focus-visible {
  outline: 3px solid var(--hb-alpin-txt);
  outline-offset: 3px;
  border-radius: 4px;
}

hr {
  border: 0;
  border-top: 1px solid var(--hb-brume);
  margin: var(--hb-e12) 0;
}

/* Tracking spécifique à la taille : serré en grand, neutre en petit */
h1,
h2,
h3,
h4 {
  font-family: var(--hb-serif);
  font-weight: 600;
  color: var(--hb-encre);
  margin: 0 0 var(--hb-e4);
  font-optical-sizing: auto;
  text-wrap: balance;
}
h1 {
  font-size: clamp(2.3rem, 1.4rem + 3.6vw, 4.1rem);
  line-height: 1.06;
  letter-spacing: -0.025em;
  font-weight: 700;
}
h2 {
  font-size: clamp(1.65rem, 1.2rem + 1.9vw, 2.5rem);
  line-height: 1.18;
  letter-spacing: -0.017em;
}
h3 {
  font-size: clamp(1.24rem, 1.06rem + 0.75vw, 1.55rem);
  line-height: 1.3;
  letter-spacing: -0.008em;
}
h4 {
  font-size: 1.12rem;
  line-height: 1.4;
  letter-spacing: 0;
}

p,
li {
  max-width: var(--hb-mesure);
}
p {
  margin: 0 0 var(--hb-e6);
}

strong,
b {
  font-weight: 700;
}

.hb-invisible {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.hb-evitement {
  position: absolute;
  left: var(--hb-e4);
  top: -100px;
  z-index: 200;
  background: var(--hb-encre);
  color: var(--hb-creme);
  padding: var(--hb-e3) var(--hb-e6);
  border-radius: var(--hb-rayon-s);
  font-weight: 700;
  text-decoration: none;
  transition: top 200ms var(--hb-sortie);
}
.hb-evitement:focus {
  top: var(--hb-e4);
  color: var(--hb-creme);
}

.hb-enveloppe {
  width: 100%;
  max-width: var(--hb-largeur);
  margin-inline: auto;
  padding-inline: var(--hb-gouttiere);
}

/* --- 4. En-tête : matière translucide, contenu qui défile dessous ------- */

.hb-entete {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(250, 247, 242, 0.86);
  backdrop-filter: blur(18px) saturate(160%);
  -webkit-backdrop-filter: blur(18px) saturate(160%);
  border-bottom: 1px solid var(--hb-brume);
}

.hb-entete__rang {
  display: flex;
  align-items: center;
  gap: var(--hb-e5);
  min-height: 4.75rem;
}

.hb-marque {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  font-family: var(--hb-serif);
  font-size: 1.6rem;
  font-weight: 700;
  letter-spacing: -0.022em;
  color: var(--hb-encre);
  text-decoration: none;
  flex: 0 0 auto;
  padding: var(--hb-e2) 0;
}
.hb-marque:hover {
  color: var(--hb-prune);
}
.hb-marque__signe {
  width: 2rem;
  height: 2rem;
  flex: 0 0 auto;
  color: var(--hb-encre);
  transition: color 200ms ease;
}
.hb-marque:hover .hb-marque__signe {
  color: var(--hb-prune);
}

.hb-nav {
  flex: 1 1 auto;
  min-width: 0;
}
.hb-nav__liste {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 2px;
  margin: 0;
  padding: 0;
  justify-content: center;
}
.hb-nav__liste li {
  max-width: none;
}
.hb-nav__lien {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 var(--hb-e3);
  font-size: 0.98rem;
  color: var(--hb-encre-2);
  text-decoration: none;
  border-radius: var(--hb-rayon-s);
  white-space: nowrap;
  transition: color 180ms ease, background-color 180ms ease;
}
.hb-nav__lien:hover {
  color: var(--hb-prune);
  background: var(--hb-prune-clair);
}
.hb-nav__lien[aria-current='page'] {
  color: var(--hb-prune);
  font-weight: 700;
}

.hb-entete__fin {
  display: flex;
  align-items: center;
  gap: var(--hb-e2);
  flex: 0 0 auto;
}

/* Sélecteur de langue */
.hb-langues {
  display: flex;
  align-items: center;
  gap: 2px;
  border: 1px solid var(--hb-brume);
  border-radius: var(--hb-rayon-s);
  padding: 3px;
  background: var(--hb-blanc);
}
.hb-langues a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 38px;
  padding: 0 var(--hb-e2);
  font-size: 0.84rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--hb-encre-2);
  text-decoration: none;
  border-radius: 5px;
  transition: color 180ms ease, background-color 180ms ease;
}
.hb-langues a:hover {
  background: var(--hb-creme-2);
  color: var(--hb-encre);
}
.hb-langues a[aria-current='true'] {
  background: var(--hb-encre);
  color: var(--hb-creme);
}

/* --- 5. Boutons --------------------------------------------------------- */

.hb-bouton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--hb-e2);
  min-height: 50px;
  padding: 0 var(--hb-e6);
  font-family: var(--hb-sans);
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  border: 1px solid transparent;
  border-radius: var(--hb-rayon-s);
  cursor: pointer;
  transition: transform 150ms var(--hb-sortie), background-color 200ms ease,
    color 200ms ease, border-color 200ms ease, box-shadow 200ms ease;
}
.hb-bouton:active {
  transform: scale(0.975);
}
.hb-bouton--plein {
  background: var(--hb-prune);
  color: var(--hb-blanc);
  box-shadow: 0 1px 2px rgba(85, 32, 58, 0.2);
}
.hb-bouton--plein:hover {
  background: var(--hb-prune-fonce);
  color: var(--hb-blanc);
  box-shadow: 0 2px 10px rgba(85, 32, 58, 0.24);
}
.hb-bouton--clair {
  background: var(--hb-blanc);
  color: var(--hb-encre);
  border-color: var(--hb-brume);
  box-shadow: var(--hb-ombre-1);
}
.hb-bouton--clair:hover {
  background: var(--hb-blanc);
  color: var(--hb-prune);
  border-color: var(--hb-prune-bord);
}
.hb-bouton--contour {
  background: transparent;
  color: var(--hb-encre);
  border-color: var(--hb-encre);
}
.hb-bouton--contour:hover {
  background: var(--hb-encre);
  color: var(--hb-creme);
}
.hb-bouton--fin {
  min-height: 44px;
  padding: 0 var(--hb-e4);
  font-size: 0.95rem;
}

/* Bouton d'en-tête (« S'abonner » de la maquette) */
.hb-entete .hb-bouton {
  min-height: 44px;
  padding: 0 var(--hb-e5);
  font-size: 0.95rem;
}

/* --- 6. Recherche ------------------------------------------------------- */

.hb-loupe {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--hb-rayon-s);
  color: var(--hb-encre-2);
  cursor: pointer;
  transition: background-color 180ms ease, color 180ms ease,
    transform 150ms var(--hb-sortie);
}
.hb-loupe:hover {
  background: var(--hb-creme-2);
  color: var(--hb-prune);
}
.hb-loupe:active {
  transform: scale(0.94);
}

.hb-recherche {
  border-top: 1px solid var(--hb-brume);
  background: var(--hb-creme);
}
.hb-recherche[hidden] {
  display: none !important;
}
.hb-recherche__boite {
  padding-block: var(--hb-e5) var(--hb-e6);
}
.hb-recherche__champ {
  display: flex;
  align-items: center;
  gap: var(--hb-e3);
  background: var(--hb-blanc);
  border: 1px solid var(--hb-brume);
  border-radius: var(--hb-rayon);
  padding: 0 var(--hb-e4);
  box-shadow: var(--hb-ombre-1);
}
.hb-recherche__champ svg {
  color: var(--hb-encre-2);
  flex: 0 0 auto;
}
.hb-recherche input {
  flex: 1 1 auto;
  min-width: 0;
  min-height: 52px;
  border: 0;
  background: transparent;
  font-family: var(--hb-sans);
  font-size: 1.05rem;
  color: var(--hb-encre);
}
.hb-recherche input:focus {
  outline: none;
}
.hb-recherche__champ:focus-within {
  border-color: var(--hb-prune-bord);
  box-shadow: 0 0 0 3px var(--hb-prune-clair);
}
.hb-resultats {
  list-style: none;
  margin: var(--hb-e4) 0 0;
  padding: 0;
  display: grid;
  gap: var(--hb-e2);
}
.hb-resultats li {
  max-width: none;
}
.hb-resultats a {
  display: block;
  padding: var(--hb-e3) var(--hb-e4);
  min-height: 44px;
  background: var(--hb-blanc);
  border: 1px solid var(--hb-brume);
  border-radius: var(--hb-rayon-s);
  text-decoration: none;
  color: var(--hb-encre);
  transition: border-color 180ms ease, background-color 180ms ease;
}
.hb-resultats a:hover {
  border-color: var(--hb-prune-bord);
  background: var(--hb-prune-clair);
}
.hb-resultats strong {
  display: block;
  font-family: var(--hb-serif);
  font-size: 1.02rem;
  font-weight: 600;
  line-height: 1.35;
}
.hb-resultats small {
  display: block;
  font-size: 0.88rem;
  color: var(--hb-encre-2);
  line-height: 1.5;
  margin-top: 2px;
}
.hb-recherche__vide {
  margin: var(--hb-e4) 0 0;
  color: var(--hb-encre-2);
  font-size: 0.98rem;
}

/* --- 7. Hero ------------------------------------------------------------ */

/* Aucun voile sur la photo : elle est servie telle quelle. Le texte est posé
   sur le fond crème, à gauche — 14:1 sur le titre et 8:1 sur le chapô, au lieu
   de dépendre de la luminosité du ciel derrière. */
.hb-hero {
  position: relative;
  background: var(--hb-creme);
  color: var(--hb-encre);
  overflow: hidden;
}
.hb-hero__fond {
  position: absolute;
  inset: 0 0 0 auto;
  width: 50%;
  z-index: 0;
}
.hb-hero__fond img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Le couple occupe le tiers droit de la photo : on décale le cadrage pour
     le garder dans la moitié visible. */
  object-position: 64% 55%;
}
/* Raccord doux entre le crème et la photo — un fondu, pas un assombrissement. */
.hb-hero__fond::before {
  content: '';
  position: absolute;
  inset: 0 auto 0 0;
  width: 4.5rem;
  z-index: 1;
  background: linear-gradient(to right, var(--hb-creme), rgba(250, 247, 242, 0));
}
.hb-hero__contenu {
  position: relative;
  z-index: 1;
  padding-block: clamp(3.5rem, 9vw, 7.5rem) clamp(5rem, 11vw, 9rem);
}
/* Les enfants restent dans la moitie gauche, jamais sous la photo. */
.hb-hero h1 {
  font-size: clamp(2.1rem, 1.2rem + 2.6vw, 3.4rem);
  max-width: min(28rem, 38vw);
  margin-bottom: var(--hb-e6);
}
.hb-hero__chapo {
  font-size: clamp(1.08rem, 1rem + 0.4vw, 1.22rem);
  line-height: 1.65;
  color: var(--hb-encre-2);
  max-width: min(27rem, 36vw);
  margin-bottom: var(--hb-e8);
}

/* Sous 62rem : la photo repasse au-dessus du texte, en pleine largeur. */
@media (max-width: 61.99rem) {
  .hb-hero {
    display: flex;
    flex-direction: column;
  }
  .hb-hero__fond {
    position: static;
    width: 100%;
    aspect-ratio: 16 / 10;
    order: -1;
  }
  .hb-hero__fond::before {
    display: none;
  }
  .hb-hero__fond img {
    object-position: 64% 50%;
  }
  .hb-hero__contenu {
    padding-block: var(--hb-e10) clamp(4rem, 12vw, 6rem);
  }
  .hb-hero h1,
  .hb-hero__chapo,
  .hb-hero__actions {
    max-width: none;
  }
}
.hb-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--hb-e3);
  max-width: min(28rem, 38vw);
}

/* --- 8. Bandeau de promesses (chevauche le hero) ----------------------- */

.hb-promesses {
  position: relative;
  margin-top: -3.75rem;
  z-index: 2;
}
.hb-promesses__carte {
  background: var(--hb-blanc);
  border: 1px solid var(--hb-brume);
  border-radius: var(--hb-rayon-l);
  box-shadow: var(--hb-ombre-3);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr));
  overflow: hidden;
}
.hb-promesse {
  padding: var(--hb-e10) var(--hb-e6);
  border-inline-start: 1px solid var(--hb-brume);
  text-align: center;
}
.hb-promesse:first-child {
  border-inline-start: 0;
}
.hb-promesse__pastille {
  width: 3rem;
  height: 3rem;
  margin: 0 auto var(--hb-e4);
  display: grid;
  place-items: center;
  border: 1px solid var(--hb-brume);
  border-radius: var(--hb-rond);
  color: var(--hb-prune);
  background: var(--hb-creme);
}
.hb-promesse__pastille svg {
  width: 1.35rem;
  height: 1.35rem;
}
.hb-promesse__titre {
  font-family: var(--hb-serif);
  font-size: 1.05rem;
  font-weight: 600;
  line-height: 1.4;
  color: var(--hb-encre);
  margin: 0 0 var(--hb-e2);
}
.hb-promesse p {
  font-size: 0.92rem;
  line-height: 1.6;
  color: var(--hb-encre-2);
  margin: 0 auto;
  max-width: 15rem;
}

/* --- 9. Sections -------------------------------------------------------- */

.hb-section {
  padding-block: clamp(3.25rem, 7vw, var(--hb-e24));
}
.hb-section--creme {
  background: var(--hb-creme-2);
}
.hb-section--sauge {
  background: var(--hb-sauge-clair);
}

.hb-tete {
  margin-bottom: var(--hb-e12);
  max-width: 46rem;
}
.hb-tete p {
  font-size: 1.06rem;
  color: var(--hb-encre-2);
  margin-bottom: 0;
}
.hb-tete--filet {
  border-top: 2px solid var(--hb-encre);
  padding-top: var(--hb-e6);
}

/* --- 10. Cartes thématiques (image + dégradé) -------------------------- */

.hb-thematiques {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
  gap: var(--hb-e6);
}

.hb-vignette {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: 22rem;
  padding: var(--hb-e6);
  border-radius: var(--hb-rayon);
  overflow: hidden;
  isolation: isolate;
  background: var(--hb-encre);
  color: var(--hb-blanc);
  text-decoration: none;
  box-shadow: var(--hb-ombre-1);
  transition: transform 280ms var(--hb-sortie), box-shadow 280ms var(--hb-sortie);
}
.hb-vignette img {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 520ms var(--hb-sortie);
}
.hb-vignette::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(
    to top,
    rgba(20, 16, 14, 0.92) 0%,
    rgba(20, 16, 14, 0.66) 40%,
    rgba(20, 16, 14, 0.1) 100%
  );
}
.hb-vignette h3 {
  color: var(--hb-blanc);
  font-size: 1.3rem;
  margin-bottom: var(--hb-e1);
  padding-inline-end: 3rem;
}
.hb-vignette p {
  font-size: 0.94rem;
  line-height: 1.5;
  color: #ece5de;
  margin: 0;
  padding-inline-end: 3rem;
}
.hb-fleche-ronde {
  position: absolute;
  right: var(--hb-e6);
  bottom: var(--hb-e6);
  width: 2.75rem;
  height: 2.75rem;
  display: grid;
  place-items: center;
  border-radius: var(--hb-rond);
  background: rgba(255, 255, 255, 0.18);
  border: 1px solid rgba(255, 255, 255, 0.45);
  transition: background-color 240ms ease, transform 240ms var(--hb-sortie);
}
.hb-fleche-ronde svg {
  width: 1.05rem;
  height: 1.05rem;
  color: #fff;
}

@media (hover: hover) and (pointer: fine) {
  .hb-vignette:hover {
    transform: translateY(-4px);
    box-shadow: var(--hb-ombre-2);
  }
  .hb-vignette:hover img {
    transform: scale(1.05);
  }
  .hb-vignette:hover .hb-fleche-ronde {
    background: var(--hb-prune);
    border-color: var(--hb-prune);
    transform: translateX(3px);
  }
}
.hb-vignette:active {
  transform: scale(0.995);
}

/* --- 11. Rangées de guides --------------------------------------------- */

.hb-rangees {
  display: grid;
  gap: var(--hb-e4);
  max-width: none;
}

.hb-rangee {
  position: relative;
  display: grid;
  grid-template-columns: 12rem 1fr 2.75rem;
  gap: var(--hb-e6);
  align-items: center;
  background: var(--hb-blanc);
  border: 1px solid var(--hb-brume);
  border-radius: var(--hb-rayon);
  padding: var(--hb-e5);
  transition: border-color 220ms ease, box-shadow 220ms var(--hb-sortie),
    transform 220ms var(--hb-sortie);
}
.hb-rangee__image {
  border-radius: var(--hb-rayon-s);
  overflow: hidden;
  background: var(--hb-creme-2);
  aspect-ratio: 4 / 3;
}
.hb-rangee__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.hb-rangee h3 {
  margin-bottom: var(--hb-e2);
}
.hb-rangee h3 a {
  color: var(--hb-encre);
  text-decoration: none;
}
.hb-rangee h3 a::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: var(--hb-rayon);
}
.hb-rangee p {
  font-size: 1rem;
  line-height: 1.62;
  color: var(--hb-encre-2);
  margin-bottom: var(--hb-e3);
  max-width: 40rem;
}
.hb-rangee__meta {
  font-size: 0.9rem;
  color: var(--hb-encre-2);
  display: flex;
  flex-wrap: wrap;
  gap: var(--hb-e2);
  align-items: center;
  margin-bottom: 0;
}
.hb-rangee__fleche {
  width: 2.75rem;
  height: 2.75rem;
  display: grid;
  place-items: center;
  border-radius: var(--hb-rond);
  border: 1px solid var(--hb-brume);
  color: var(--hb-prune);
  transition: background-color 220ms ease, border-color 220ms ease,
    color 220ms ease, transform 220ms var(--hb-sortie);
}
.hb-rangee__fleche svg {
  width: 1.05rem;
  height: 1.05rem;
}
@media (hover: hover) and (pointer: fine) {
  .hb-rangee:hover {
    border-color: var(--hb-prune-bord);
    box-shadow: var(--hb-ombre-2);
    transform: translateY(-2px);
  }
  .hb-rangee:hover .hb-rangee__fleche {
    background: var(--hb-prune);
    border-color: var(--hb-prune);
    color: #fff;
    transform: translateX(3px);
  }
}

/* --- 12. Cartes de magazine -------------------------------------------- */

.hb-grille-cartes {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 16.5rem), 1fr));
  gap: var(--hb-e6);
}

.hb-carte {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--hb-blanc);
  border: 1px solid var(--hb-brume);
  border-radius: var(--hb-rayon);
  overflow: hidden;
  transition: border-color 220ms ease, box-shadow 240ms var(--hb-sortie),
    transform 240ms var(--hb-sortie);
}
.hb-carte__image {
  aspect-ratio: 3 / 2;
  background: var(--hb-creme-2);
  overflow: hidden;
}
.hb-carte__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 520ms var(--hb-sortie);
}
.hb-carte__corps {
  padding: var(--hb-e6);
  display: flex;
  flex-direction: column;
  gap: var(--hb-e3);
  flex: 1 1 auto;
}
.hb-carte h2,
.hb-carte h3 {
  font-size: 1.16rem;
  line-height: 1.34;
  letter-spacing: -0.006em;
  margin: 0;
}
.hb-carte h2 a,
.hb-carte h3 a {
  color: var(--hb-encre);
  text-decoration: none;
}
.hb-carte h2 a::after,
.hb-carte h3 a::after {
  content: '';
  position: absolute;
  inset: 0;
}
.hb-carte p {
  font-size: 0.96rem;
  line-height: 1.6;
  color: var(--hb-encre-2);
  margin: 0;
}
.hb-carte__meta {
  margin-top: auto;
  font-size: 0.86rem;
  color: var(--hb-encre-2);
}
@media (hover: hover) and (pointer: fine) {
  .hb-carte:hover {
    border-color: var(--hb-prune-bord);
    box-shadow: var(--hb-ombre-2);
    transform: translateY(-3px);
  }
  .hb-carte:hover .hb-carte__image img {
    transform: scale(1.05);
  }
}

/* Pastilles de rubrique */
.hb-pastille {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  padding: 0.26rem 0.7rem;
  font-family: var(--hb-sans);
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  border-radius: var(--hb-rond);
  background: var(--hb-prune-clair);
  color: var(--hb-prune);
  text-decoration: none;
  max-width: none;
}
.hb-pastille--sauge {
  background: var(--hb-sauge-clair);
  color: var(--hb-sauge-txt);
}
.hb-pastille--alpin {
  background: var(--hb-alpin-clair);
  color: var(--hb-alpin-txt);
}

/* Filtres — pastilles pleines, à la différence des boutons */
.hb-filtres {
  display: flex;
  flex-wrap: wrap;
  gap: var(--hb-e2);
  margin-bottom: var(--hb-e8);
  padding: 0;
  list-style: none;
  max-width: none;
}
.hb-filtres li {
  max-width: none;
}
.hb-filtre {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 var(--hb-e5);
  font-family: var(--hb-sans);
  font-size: 0.94rem;
  font-weight: 700;
  color: var(--hb-encre-2);
  background: var(--hb-blanc);
  border: 1px solid var(--hb-brume);
  border-radius: var(--hb-rond);
  cursor: pointer;
  transition: background-color 200ms ease, color 200ms ease,
    border-color 200ms ease, transform 150ms var(--hb-sortie);
}
.hb-filtre:hover {
  border-color: var(--hb-prune-bord);
  color: var(--hb-prune);
}
.hb-filtre:active {
  transform: scale(0.97);
}
.hb-filtre[aria-pressed='true'] {
  background: var(--hb-prune);
  border-color: var(--hb-prune);
  color: var(--hb-blanc);
}

.hb-centre {
  display: flex;
  justify-content: center;
  margin-top: var(--hb-e10);
}

/* --- 13. Barre d'appel « avis personnalisé » --------------------------- */

.hb-barre {
  display: grid;
  grid-template-columns: 3.25rem 1fr;
  gap: var(--hb-e5);
  align-items: center;
  background: var(--hb-blanc);
  border: 1px solid var(--hb-brume);
  border-radius: var(--hb-rayon);
  padding: var(--hb-e6);
  margin-top: var(--hb-e10);
  max-width: none;
  box-shadow: var(--hb-ombre-1);
}
@media (min-width: 44rem) {
  .hb-barre {
    grid-template-columns: 3.25rem 1fr auto;
  }
}
.hb-barre__pastille {
  width: 3.25rem;
  height: 3.25rem;
  display: grid;
  place-items: center;
  border-radius: var(--hb-rond);
  background: var(--hb-sauge-clair);
  color: var(--hb-sauge-txt);
}
.hb-barre__pastille svg {
  width: 1.5rem;
  height: 1.5rem;
}
.hb-barre h2,
.hb-barre h3 {
  font-size: 1.16rem;
  margin: 0 0 var(--hb-e1);
  border: 0;
  padding: 0;
}
.hb-barre p {
  margin: 0;
  font-size: 0.98rem;
  color: var(--hb-encre-2);
  max-width: 42rem;
}

/* --- 14. Lettre Martagon ------------------------------------------------ */

.hb-lettre {
  background: var(--hb-prune-clair);
  border: 1px solid var(--hb-prune-bord);
  border-radius: var(--hb-rayon-l);
  padding: clamp(1.75rem, 4vw, var(--hb-e12));
  display: grid;
  gap: var(--hb-e6);
  align-items: center;
  max-width: none;
}
@media (min-width: 48rem) {
  .hb-lettre {
    /* Deux colonnes EGALES et fixes, pas « 1fr auto ».
       Avec « auto », la colonne du formulaire se dimensionnait sur son contenu
       le plus large — la phrase de consentement. Le meme bloc se decoupait donc
       differemment dans chaque langue : champ de 289 px en francais, 311 en
       allemand, 260 en italien. La largeur d'une saisie d'adresse ne doit pas
       dependre de la longueur d'une phrase voisine.
       minmax(0, 1fr) et non 1fr : sans le minimum a zero, un contenu
       insecable (une adresse longue, une URL) fait deborder la colonne. */
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--hb-e12);
    /* Les deux colonnes commencent en haut : le titre du bloc et le libelle du
       champ se repondent alors sur la meme ligne d'horizon. Centre, le texte
       flottait au milieu d'une colonne deux fois plus haute que lui. */
    align-items: start;
  }
}
.hb-lettre h2 {
  margin: 0 0 var(--hb-e2);
  border: 0;
  padding: 0;
  font-size: clamp(1.4rem, 1.2rem + 0.9vw, 1.85rem);
}
.hb-lettre p {
  margin: 0;
  color: var(--hb-encre-2);
  max-width: 34rem;
}
.hb-lettre .hb-bouton {
  white-space: nowrap;
}

/* Le formulaire occupe la seconde colonne a partir de 48rem, comme le bouton
   qu'il remplace. En dessous il passe sous le texte, en pleine largeur. */
.hb-lettre__form {
  display: grid;
  gap: var(--hb-e4);
  /* Plus de min-width : c'est la grille du bloc qui decide de la largeur,
     desormais de facon identique dans les trois langues. */
}
/* Le mot d'introduction ne depasse pas la longueur de ligne confortable du
   site, meme si sa colonne est plus large. */
.hb-lettre__mot p {
  max-width: 32rem;
}
.hb-lettre__form .hb-bouton {
  justify-self: start;
}

/* Piege a robots. Surtout PAS display:none ni visibility:hidden : les robots
   qui valent la peine d'etre arretes ignorent les deux. On le sort de l'ecran
   en le laissant dans le rendu. aria-hidden et tabindex=-1 (poses dans le
   HTML) le retirent du parcours clavier et de l'arbre d'accessibilite —
   autrement c'est le lecteur d'ecran qu'on piegerait */
.hb-piege {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.hb-champ {
  display: grid;
  gap: var(--hb-e2);
}
.hb-champ__nom {
  font-weight: 600;
  font-size: 0.98rem;
  color: var(--hb-encre);
}
.hb-champ__saisie {
  font: inherit;
  color: var(--hb-encre);
  background: var(--hb-creme);
  border: 1px solid var(--hb-prune-bord);
  border-radius: var(--hb-rayon-s);
  /* 52px de haut : au-dessus du plancher de 44px, parce qu'une main agee vise
     moins bien qu'un pouce de vingt ans. */
  padding: 0.85rem 1rem;
  min-height: 52px;
  width: 100%;
}
.hb-champ__saisie::placeholder {
  color: var(--hb-encre-2);
  opacity: 0.75;
}
.hb-champ__saisie:focus-visible {
  outline: 3px solid var(--hb-prune);
  outline-offset: 2px;
}

/* La case et son texte forment une seule cible : tout le bloc est cliquable
   parce que c'est un vrai <label>. Ne jamais remplacer par un role=button. */
.hb-consent {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--hb-e3);
  align-items: start;
  font-size: 0.95rem;
  color: var(--hb-encre-2);
  cursor: pointer;
  min-height: 44px;
}
.hb-consent input {
  width: 24px;
  height: 24px;
  margin: 0;
  accent-color: var(--hb-prune);
  flex: none;
}
.hb-consent input:focus-visible {
  outline: 3px solid var(--hb-prune);
  outline-offset: 2px;
}

/* Conteneur Turnstile : vide au rendu, rempli au premier contact avec le
   champ. Sans hauteur reservee, l'arrivee du widget pousserait le bouton vers
   le bas au moment ou le lecteur s'appreterait a cliquer. */
.hb-lettre__verif:not(:empty) {
  min-height: 65px;
}

.hb-lettre__etat {
  margin: 0;
  font-size: 0.95rem;
  min-height: 1.5em;          /* la zone ne pousse rien en apparaissant */
  color: var(--hb-encre-2);
}
.hb-lettre__etat[data-erreur="oui"] {
  color: var(--hb-prune);
  font-weight: 600;
}


/* --- 15. Fil d'Ariane --------------------------------------------------- */

.hb-ariane {
  padding-block: var(--hb-e6) 0;
  font-size: 0.92rem;
}
.hb-ariane ol {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--hb-e2);
  margin: 0;
  padding: 0;
}
.hb-ariane li {
  max-width: none;
  color: var(--hb-encre-2);
  display: flex;
  align-items: center;
  gap: var(--hb-e2);
}
.hb-ariane li + li::before {
  content: '›';
  color: #b7ae9f;
  font-size: 1.1rem;
  line-height: 1;
}
.hb-ariane a {
  color: var(--hb-encre-2);
  text-decoration: none;
  border-bottom: 1px solid transparent;
}
.hb-ariane a:hover {
  color: var(--hb-prune);
  border-bottom-color: currentColor;
}
.hb-ariane [aria-current='page'] {
  color: var(--hb-encre);
}

/* --- 16. Article -------------------------------------------------------- */

.hb-article {
  padding-block: var(--hb-e8) var(--hb-e20);
}
.hb-article__tete {
  max-width: 48rem;
  margin-bottom: var(--hb-e8);
}
.hb-article__tete h1 {
  margin-block: var(--hb-e4) var(--hb-e6);
}
.hb-signature {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--hb-e2) var(--hb-e4);
  font-size: 0.94rem;
  color: var(--hb-encre-2);
  padding-top: var(--hb-e4);
  border-top: 1px solid var(--hb-brume);
  max-width: none;
}
.hb-signature b {
  color: var(--hb-encre);
}
.hb-signature__point {
  color: #c3bbae;
}

.hb-illustration {
  margin: 0 0 var(--hb-e12);
  border-radius: var(--hb-rayon);
  overflow: hidden;
  background: var(--hb-creme-2);
  border: 1px solid var(--hb-brume);
}
.hb-illustration img {
  width: 100%;
}
.hb-illustration figcaption {
  font-size: 0.88rem;
  color: var(--hb-encre-2);
  padding: var(--hb-e3) var(--hb-e5);
  background: var(--hb-blanc);
  border-top: 1px solid var(--hb-brume);
  max-width: none;
}

.hb-disposition {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--hb-e12);
}
@media (min-width: 64rem) {
  .hb-disposition {
    grid-template-columns: minmax(0, 1fr) 19.5rem;
    gap: var(--hb-e16);
    align-items: start;
  }
}

.hb-corps > * {
  max-width: var(--hb-mesure);
}
.hb-corps h2 {
  margin-top: var(--hb-e12);
  padding-top: var(--hb-e5);
  border-top: 2px solid var(--hb-encre);
  scroll-margin-top: 7.5rem;
}
.hb-corps h2:first-child {
  margin-top: 0;
}
.hb-corps h3 {
  margin-top: var(--hb-e8);
  color: var(--hb-prune);
}
.hb-corps ul,
.hb-corps ol {
  margin: 0 0 var(--hb-e6);
  padding-inline-start: 1.4rem;
}
.hb-corps li {
  margin-bottom: var(--hb-e3);
}
.hb-corps li::marker {
  color: var(--hb-prune);
}
.hb-corps > ul,
.hb-corps > ol {
  max-width: calc(var(--hb-mesure) + 1.4rem);
}

.hb-chapo {
  font-family: var(--hb-serif);
  font-size: 1.18rem;
  line-height: 1.66;
  background: var(--hb-blanc);
  border: 1px solid var(--hb-brume);
  border-inline-start: 4px solid var(--hb-prune);
  border-radius: var(--hb-rayon);
  padding: var(--hb-e6);
  margin-bottom: var(--hb-e8);
  max-width: none !important;
  box-shadow: var(--hb-ombre-1);
}
.hb-chapo p:last-child {
  margin-bottom: 0;
}

/* Encadrés */
.hb-encadre {
  background: var(--hb-blanc);
  border: 1px solid var(--hb-brume);
  border-inline-start: 4px solid var(--hb-sauge);
  border-radius: var(--hb-rayon);
  padding: var(--hb-e6);
  margin: var(--hb-e8) 0;
  max-width: none !important;
}
.hb-encadre__titre {
  display: flex;
  align-items: center;
  gap: var(--hb-e2);
  font-family: var(--hb-sans);
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--hb-sauge-txt);
  margin-bottom: var(--hb-e3);
  max-width: none;
}
.hb-encadre__titre svg {
  width: 1.05rem;
  height: 1.05rem;
  flex: 0 0 auto;
}
.hb-encadre h3 {
  margin-top: 0;
  font-size: 1.16rem;
  color: var(--hb-encre);
}
.hb-encadre p:last-child,
.hb-encadre ul:last-child {
  margin-bottom: 0;
}
.hb-encadre--conseil {
  border-inline-start-color: var(--hb-sauge);
  background: var(--hb-sauge-clair);
}
.hb-encadre--conseil .hb-encadre__titre {
  color: var(--hb-sauge-txt);
}
.hb-encadre--savoir {
  border-inline-start-color: var(--hb-alpin);
  background: var(--hb-alpin-clair);
}
.hb-encadre--savoir .hb-encadre__titre {
  color: var(--hb-alpin-txt);
}
.hb-encadre--perspective {
  border-inline-start-color: var(--hb-prune);
  background: var(--hb-prune-clair);
}
.hb-encadre--perspective .hb-encadre__titre {
  color: var(--hb-prune);
}

/* Chiffres-clés */
.hb-chiffres {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 11rem), 1fr));
  gap: 1px;
  background: var(--hb-brume);
  border: 1px solid var(--hb-brume);
  border-radius: var(--hb-rayon);
  overflow: hidden;
  margin: var(--hb-e8) 0;
  max-width: none !important;
}
.hb-chiffre {
  background: var(--hb-blanc);
  padding: var(--hb-e6);
}
.hb-chiffre__valeur {
  display: block;
  font-family: var(--hb-serif);
  font-size: clamp(1.95rem, 1.5rem + 1.5vw, 2.7rem);
  font-weight: 700;
  line-height: 1.02;
  letter-spacing: -0.032em;
  color: var(--hb-prune);
  margin-bottom: var(--hb-e2);
}
.hb-chiffre__label {
  display: block;
  font-size: 0.96rem;
  line-height: 1.5;
  color: var(--hb-encre);
  max-width: none;
}
.hb-chiffre__note {
  display: block;
  font-size: 0.84rem;
  color: var(--hb-encre-2);
  margin-top: var(--hb-e2);
  line-height: 1.55;
  max-width: none;
}

/* Tableaux */
.hb-tableau-boite {
  overflow-x: auto;
  margin: var(--hb-e8) 0;
  border: 1px solid var(--hb-brume);
  border-radius: var(--hb-rayon);
  background: var(--hb-blanc);
  max-width: none !important;
}
.hb-tableau {
  width: 100%;
  min-width: 34rem;
  border-collapse: collapse;
  font-size: 0.98rem;
}
.hb-tableau caption {
  text-align: start;
  font-size: 0.86rem;
  font-weight: 700;
  color: var(--hb-encre-2);
  padding: var(--hb-e5) var(--hb-e5) 0;
}
.hb-tableau th,
.hb-tableau td {
  text-align: start;
  padding: var(--hb-e3) var(--hb-e5);
  border-bottom: 1px solid var(--hb-brume);
  vertical-align: top;
  line-height: 1.58;
}
.hb-tableau thead th {
  font-family: var(--hb-sans);
  font-size: 0.85rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--hb-encre);
  background: var(--hb-creme-2);
  border-bottom: 2px solid var(--hb-encre);
}
.hb-tableau tbody tr:last-child th,
.hb-tableau tbody tr:last-child td {
  border-bottom: 0;
}
.hb-tableau tbody th {
  font-weight: 700;
}

/* FAQ */
.hb-faq {
  margin: var(--hb-e12) 0 0;
  max-width: none !important;
}
.hb-question {
  border-bottom: 1px solid var(--hb-brume);
}
.hb-question:first-of-type {
  border-top: 1px solid var(--hb-brume);
}
.hb-question > summary {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--hb-e4);
  min-height: 52px;
  padding: var(--hb-e5) 0;
  cursor: pointer;
  list-style: none;
  font-family: var(--hb-serif);
  font-size: 1.12rem;
  font-weight: 600;
  line-height: 1.42;
  color: var(--hb-encre);
  transition: color 180ms ease;
}
.hb-question > summary::-webkit-details-marker {
  display: none;
}
.hb-question > summary:hover {
  color: var(--hb-prune);
}
.hb-question__signe {
  flex: 0 0 auto;
  width: 1.6rem;
  height: 1.6rem;
  margin-top: 0.2rem;
  position: relative;
}
.hb-question__signe::before,
.hb-question__signe::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0.9rem;
  height: 2px;
  border-radius: 1px;
  background: var(--hb-prune);
  transform: translate(-50%, -50%);
  transition: transform 220ms var(--hb-sortie), opacity 220ms ease;
}
.hb-question__signe::after {
  transform: translate(-50%, -50%) rotate(90deg);
}
.hb-question[open] .hb-question__signe::after {
  transform: translate(-50%, -50%) rotate(0deg);
  opacity: 0;
}
.hb-question__reponse {
  padding-bottom: var(--hb-e5);
}
.hb-question__reponse p:last-child {
  margin-bottom: 0;
}
.hb-question[open] .hb-question__reponse {
  animation: hb-deplier 240ms var(--hb-sortie) both;
}
@keyframes hb-deplier {
  from {
    opacity: 0;
    transform: translateY(-5px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

/* Bibliographie */
.hb-biblio {
  margin-top: var(--hb-e12);
  padding-top: var(--hb-e6);
  border-top: 2px solid var(--hb-encre);
  max-width: none !important;
}
.hb-biblio ol {
  padding-inline-start: 1.4rem;
}
.hb-biblio li {
  font-size: 0.92rem;
  line-height: 1.62;
  color: var(--hb-encre-2);
  margin-bottom: var(--hb-e3);
  max-width: 48rem;
}
.hb-biblio cite {
  font-style: italic;
}
.hb-biblio a {
  word-break: break-word;
}

/* Avertissement */
.hb-avertissement {
  margin-top: var(--hb-e12);
  padding: var(--hb-e6);
  background: var(--hb-creme-2);
  border: 1px solid var(--hb-brume);
  border-radius: var(--hb-rayon);
  font-size: 0.94rem;
  line-height: 1.65;
  color: var(--hb-encre-2);
  max-width: none !important;
}
.hb-avertissement p {
  max-width: none;
  margin-bottom: 0;
}
.hb-avertissement b {
  color: var(--hb-encre);
}

/* --- 17. Rail latéral --------------------------------------------------- */

.hb-rail {
  display: flex;
  flex-direction: column;
  gap: var(--hb-e6);
}
@media (min-width: 64rem) {
  .hb-rail {
    position: sticky;
    top: 6.5rem;
    max-height: calc(100vh - 8.5rem);
    overflow-y: auto;
    overscroll-behavior: contain;
  }
}
.hb-rail__bloc {
  background: var(--hb-blanc);
  border: 1px solid var(--hb-brume);
  border-radius: var(--hb-rayon);
  padding: var(--hb-e6);
}
.hb-rail__titre {
  font-family: var(--hb-sans);
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--hb-encre-2);
  margin-bottom: var(--hb-e4);
  max-width: none;
}
.hb-sommaire ol {
  list-style: none;
  counter-reset: hb-som;
  margin: 0;
  padding: 0;
}
.hb-sommaire li {
  counter-increment: hb-som;
  margin: 0;
  max-width: none;
}
.hb-sommaire a {
  display: flex;
  gap: var(--hb-e3);
  padding: var(--hb-e2) 0 var(--hb-e2) var(--hb-e3);
  min-height: 44px;
  align-items: center;
  font-size: 0.95rem;
  line-height: 1.42;
  color: var(--hb-encre-2);
  text-decoration: none;
  border-inline-start: 2px solid transparent;
  margin-inline-start: -2px;
  transition: color 180ms ease, border-color 180ms ease;
}
.hb-sommaire a::before {
  content: counter(hb-som) '.';
  flex: 0 0 auto;
  font-variant-numeric: tabular-nums;
  font-size: 0.82rem;
  font-weight: 700;
  color: #b7ae9f;
}
.hb-sommaire a:hover {
  color: var(--hb-prune);
}
.hb-sommaire a[aria-current='true'] {
  color: var(--hb-prune);
  font-weight: 700;
  border-inline-start-color: var(--hb-prune);
}
.hb-sommaire a[aria-current='true']::before {
  color: var(--hb-prune);
}

.hb-rail__bloc--retenir {
  background: var(--hb-sauge-clair);
  border-color: #d6dfd0;
}
.hb-rail__bloc--retenir .hb-rail__titre {
  color: var(--hb-sauge-txt);
}
.hb-rail__bloc--retenir ul {
  margin: 0;
  padding-inline-start: 1.1rem;
}
.hb-rail__bloc--retenir li {
  font-size: 0.96rem;
  line-height: 1.6;
  margin-bottom: var(--hb-e3);
  max-width: none;
}
.hb-rail__bloc--retenir li:last-child {
  margin-bottom: 0;
}
.hb-rail__bloc--retenir li::marker {
  color: var(--hb-sauge-txt);
}

.hb-rail__bloc--avis {
  background: var(--hb-prune-clair);
  border-color: var(--hb-prune-bord);
}
.hb-rail__bloc--avis .hb-rail__titre {
  color: var(--hb-prune);
}
.hb-rail__bloc--avis p {
  font-size: 0.95rem;
  line-height: 1.6;
  color: var(--hb-encre-2);
  margin-bottom: var(--hb-e4);
  max-width: none;
}
.hb-rail__bloc--avis .hb-bouton {
  width: 100%;
}

/* Barre de progression de lecture */
.hb-progression {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 3px;
  z-index: 120;
  background: transparent;
  pointer-events: none;
}
.hb-progression__jauge {
  height: 100%;
  width: 100%;
  background: var(--hb-prune);
  transform: scaleX(0);
  transform-origin: left center;
}

/* --- 18. À lire aussi --------------------------------------------------- */

.hb-aussi {
  margin-top: var(--hb-e16);
  padding-top: var(--hb-e8);
  border-top: 2px solid var(--hb-encre);
  max-width: none !important;
}
.hb-aussi h2 {
  border: 0;
  padding-top: 0;
  margin-top: 0;
  font-size: 1.5rem;
}
.hb-aussi__liste {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
  gap: var(--hb-e4);
  list-style: none;
  margin: 0;
  padding: 0;
}
.hb-aussi__liste li {
  max-width: none;
  margin: 0;
}
.hb-aussi__lien {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--hb-e2);
  height: 100%;
  padding: var(--hb-e5);
  background: var(--hb-blanc);
  border: 1px solid var(--hb-brume);
  border-radius: var(--hb-rayon);
  text-decoration: none;
  color: var(--hb-encre);
  transition: border-color 220ms ease, box-shadow 220ms var(--hb-sortie),
    transform 220ms var(--hb-sortie);
}
.hb-aussi__lien span {
  font-family: var(--hb-serif);
  font-size: 1.06rem;
  font-weight: 600;
  line-height: 1.36;
}
.hb-aussi__lien small {
  font-size: 0.9rem;
  color: var(--hb-encre-2);
  line-height: 1.55;
}
@media (hover: hover) and (pointer: fine) {
  .hb-aussi__lien:hover {
    border-color: var(--hb-prune-bord);
    box-shadow: var(--hb-ombre-1);
    transform: translateY(-2px);
  }
}

/* --- 19. Appel vers le pilier ------------------------------------------ */

.hb-appel {
  display: grid;
  gap: var(--hb-e6);
  align-items: center;
  background: var(--hb-encre);
  color: var(--hb-creme);
  border-radius: var(--hb-rayon-l);
  padding: clamp(1.9rem, 4vw, var(--hb-e12));
  max-width: none;
}
@media (min-width: 48rem) {
  .hb-appel {
    grid-template-columns: 1fr auto;
    gap: var(--hb-e12);
  }
}
.hb-appel h2 {
  color: var(--hb-creme);
  margin-bottom: var(--hb-e3);
  border: 0;
  padding: 0;
}
.hb-appel p {
  color: #dcd4ca;
  margin: 0;
  max-width: 38rem;
}
.hb-appel .hb-bouton--plein {
  background: var(--hb-creme);
  color: var(--hb-encre);
  white-space: nowrap;
  box-shadow: none;
}
.hb-appel .hb-bouton--plein:hover {
  background: #fff;
  color: var(--hb-prune-fonce);
}

/* --- 20. Bandeau de marque (prune) ------------------------------------- */

.hb-bandeau {
  background: var(--hb-prune);
  color: var(--hb-blanc);
}
.hb-bandeau__rang {
  display: flex;
  align-items: center;
  gap: var(--hb-e5);
  padding-block: var(--hb-e8);
}
.hb-bandeau__signe {
  width: 2.75rem;
  height: 2.75rem;
  flex: 0 0 auto;
  color: rgba(255, 255, 255, 0.9);
}
.hb-bandeau p {
  margin: 0;
  font-family: var(--hb-serif);
  font-size: clamp(1.05rem, 0.95rem + 0.5vw, 1.28rem);
  line-height: 1.5;
  color: #fff;
  max-width: 44rem;
}

/* --- 21. Bande de confiance et pied ------------------------------------ */

.hb-confiance {
  border-top: 1px solid var(--hb-brume);
  border-bottom: 1px solid var(--hb-brume);
  background: var(--hb-creme-2);
}
.hb-confiance__liste {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
  gap: var(--hb-e6);
  list-style: none;
  margin: 0;
  padding-block: var(--hb-e8);
}
.hb-confiance__liste li {
  display: flex;
  align-items: center;
  gap: var(--hb-e4);
  font-size: 0.98rem;
  color: var(--hb-encre);
  max-width: none;
}
.hb-confiance__pastille {
  width: 2.5rem;
  height: 2.5rem;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  border-radius: var(--hb-rond);
  background: var(--hb-blanc);
  border: 1px solid var(--hb-brume);
  color: var(--hb-prune);
}
.hb-confiance__pastille svg {
  width: 1.2rem;
  height: 1.2rem;
}

.hb-pied {
  background: var(--hb-creme);
  padding-block: var(--hb-e16) var(--hb-e8);
}
.hb-pied__grille {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr));
  gap: var(--hb-e8);
  margin-bottom: var(--hb-e12);
}
.hb-pied__intro p {
  font-size: 0.96rem;
  line-height: 1.65;
  color: var(--hb-encre-2);
  margin-top: var(--hb-e4);
  max-width: 23rem;
}
.hb-pied h2 {
  font-family: var(--hb-sans);
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--hb-encre-2);
  margin-bottom: var(--hb-e3);
}
.hb-pied ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
.hb-pied li {
  max-width: none;
}
.hb-pied li a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-size: 0.98rem;
  color: var(--hb-encre-2);
  text-decoration: none;
}
.hb-pied li a:hover {
  color: var(--hb-prune);
  text-decoration: underline;
}
.hb-pied__bas {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--hb-e4);
  padding-top: var(--hb-e6);
  border-top: 1px solid var(--hb-brume);
  font-size: 0.9rem;
  color: var(--hb-encre-2);
}
.hb-pied__bas p {
  margin: 0;
  max-width: none;
}
.hb-pied__bas a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--hb-encre-2);
}
.hb-pied__bas a:hover {
  color: var(--hb-prune);
}

/* --- 22. Pages de texte ------------------------------------------------- */

.hb-texte {
  padding-block: var(--hb-e8) var(--hb-e20);
}
.hb-texte h1 {
  margin-bottom: var(--hb-e8);
}
.hb-texte h2 {
  margin-top: var(--hb-e12);
  padding-top: var(--hb-e5);
  border-top: 2px solid var(--hb-encre);
  max-width: var(--hb-mesure);
}
.hb-texte h3 {
  margin-top: var(--hb-e8);
  color: var(--hb-prune);
}
.hb-texte ul,
.hb-texte ol {
  margin: 0 0 var(--hb-e6);
  padding-inline-start: 1.4rem;
}
.hb-texte li {
  margin-bottom: var(--hb-e3);
}
.hb-texte li::marker {
  color: var(--hb-prune);
}

.hb-etat-vide {
  padding: var(--hb-e12);
  text-align: center;
  border: 1px dashed var(--hb-brume);
  border-radius: var(--hb-rayon);
  background: var(--hb-blanc);
  color: var(--hb-encre-2);
  max-width: none;
}
.hb-etat-vide p {
  max-width: 30rem;
  margin-inline: auto;
  margin-bottom: 0;
}

/* --- 23. Adaptations étroites ------------------------------------------ */

.hb-bascule {
  display: none;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  background: transparent;
  border: 1px solid var(--hb-brume);
  border-radius: var(--hb-rayon-s);
  color: var(--hb-encre);
  cursor: pointer;
  transition: transform 150ms var(--hb-sortie), background-color 180ms ease;
}
.hb-bascule:active {
  transform: scale(0.95);
}
.hb-bascule svg {
  width: 1.4rem;
  height: 1.4rem;
}

@media (max-width: 63.99rem) {
  .hb-bascule {
    display: inline-flex;
  }
  .hb-nav {
    display: none;
    order: 10;
    flex: 1 0 100%;
    padding-bottom: var(--hb-e4);
  }
  .hb-nav[data-ouvert='true'] {
    display: block;
    animation: hb-entree-nav 240ms var(--hb-sortie) both;
  }
  .hb-entete__rang {
    flex-wrap: wrap;
    gap: var(--hb-e3);
  }
  .hb-nav__liste {
    flex-direction: column;
    justify-content: flex-start;
    gap: 0;
    border-top: 1px solid var(--hb-brume);
    padding-top: var(--hb-e2);
  }
  .hb-nav__lien {
    width: 100%;
    padding: 0 var(--hb-e3);
    font-size: 1.06rem;
  }
  .hb-entete__fin {
    margin-inline-start: auto;
  }
}

@keyframes hb-entree-nav {
  from {
    opacity: 0;
    transform: translateY(-6px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

/* Sous 34rem : l'en-tête ne tient plus sur une ligne. Le groupe de droite
   passe sous la marque et peut lui-même se replier — rien n'est masqué, et
   les cibles restent à 44 px. */
@media (max-width: 33.99rem) {
  .hb-entete__rang {
    row-gap: var(--hb-e3);
  }
  .hb-marque {
    font-size: 1.35rem;
  }
  .hb-marque__signe {
    width: 1.75rem;
    height: 1.75rem;
  }
  .hb-entete__fin {
    flex: 1 0 100%;
    flex-wrap: wrap;
    justify-content: flex-start;
    margin-inline-start: 0;
    row-gap: var(--hb-e2);
  }
  .hb-entete .hb-bouton {
    flex: 1 1 8rem;
  }
}

/* Sous 46rem : les thématiques passent en rangées, comme sur la maquette
   mobile — vignette à droite, texte à gauche. */
@media (max-width: 45.99rem) {
  :root {
    --hb-corps: 1.125rem;
  }
  .hb-thematiques {
    grid-template-columns: 1fr;
    gap: var(--hb-e3);
  }
  .hb-vignette {
    min-height: 0;
    display: grid;
    grid-template-columns: 1fr 6.5rem;
    align-items: center;
    gap: var(--hb-e4);
    padding: var(--hb-e4);
    background: var(--hb-blanc);
    color: var(--hb-encre);
    border: 1px solid var(--hb-brume);
    border-radius: var(--hb-rayon);
  }
  .hb-vignette img {
    position: static;
    z-index: auto;
    width: 100%;
    height: 5rem;
    border-radius: var(--hb-rayon-s);
    order: 2;
  }
  .hb-vignette::after {
    display: none;
  }
  .hb-vignette h3 {
    color: var(--hb-encre);
    font-size: 1.08rem;
    padding-inline-end: 0;
    margin-bottom: var(--hb-e1);
  }
  .hb-vignette p {
    color: var(--hb-encre-2);
    font-size: 0.9rem;
    padding-inline-end: 0;
  }
  .hb-vignette .hb-fleche-ronde {
    display: none;
  }

  .hb-rangee {
    grid-template-columns: 1fr;
    gap: var(--hb-e4);
  }
  .hb-rangee__image {
    aspect-ratio: 16 / 9;
  }
  .hb-rangee__fleche {
    display: none;
  }
  .hb-promesses {
    margin-top: -1.5rem;
  }
  .hb-promesse {
    border-inline-start: 0;
    border-top: 1px solid var(--hb-brume);
    padding-block: var(--hb-e6);
  }
  .hb-promesse:first-child {
    border-top: 0;
  }
  .hb-barre {
    grid-template-columns: 1fr;
  }
  .hb-bandeau__rang {
    flex-direction: column;
    align-items: flex-start;
    text-align: start;
  }
}

/* --- 24. Préférences utilisateur --------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .hb-vignette:hover,
  .hb-carte:hover,
  .hb-aussi__lien:hover,
  .hb-rangee:hover {
    transform: none;
  }
  .hb-vignette:hover img,
  .hb-carte:hover .hb-carte__image img {
    transform: none;
  }
}

@media (prefers-reduced-transparency: reduce) {
  .hb-entete {
    background: var(--hb-creme);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
}

@media (prefers-contrast: more) {
  :root {
    --hb-brume: #a49a8c;
    --hb-encre-2: #3a332f;
  }
  .hb-entete {
    background: var(--hb-creme);
    backdrop-filter: none;
  }
}

/* --- 25. Impression ----------------------------------------------------- */

@media print {
  .hb-entete,
  .hb-rail,
  .hb-progression,
  .hb-appel,
  .hb-aussi,
  .hb-confiance,
  .hb-bandeau,
  .hb-pied,
  .hb-filtres,
  .hb-recherche,
  .hb-lettre,
  .hb-barre {
    display: none !important;
  }
  body {
    background: #fff;
    font-size: 11pt;
  }
  .hb-disposition {
    display: block;
  }
  a[href^='http']::after {
    content: ' (' attr(href) ')';
    font-size: 9pt;
    color: #555;
  }
}

/* --- 26. Cibles tactiles — plancher final ------------------------------
   On n'y liste que les éléments qui ne déclarent pas déjà davantage :
   une règle tardive de 44 px rabaisserait un bouton défini à 50 px. */

.hb-nav__lien,
.hb-langues a,
.hb-filtre,
.hb-loupe,
.hb-pied li a,
.hb-sommaire a,
.hb-resultats a {
  min-height: 44px;
}