/* ==========================================================================
   Article du Journal Maison H Luxury — feuille portable (thème enfant Astra)
   Tout est préfixé .mh-article / mh- ; aucune règle ne touche le header ni le footer.
   Les sélecteurs commencent par « .mh-article » pour battre « .entry-content ul »,
   « .entry-content :where(h2) » etc. d'Astra sans multiplier les !important.
   ========================================================================== */

.mh-article {
  /* tokens du Journal (journal.css) */
  --mh-creme: #faf8f4;
  --mh-creme-clair: #fdfbf7;
  --mh-lin: #f2ebdd;            /* fond des panneaux : boutique, dressage */
  --mh-encre: #1a1814;
  --mh-brun: #3d3731;
  --mh-brun-doux: #6b6157;      /* 5,7:1 sur crème, 5,1:1 sur lin */
  --mh-or: #c8a24a;             /* filets et ornements seulement, jamais du texte sur crème */
  --mh-or-texte: #8a6d2c;       /* 4,6:1 sur crème : texte en petites capitales */
  --mh-or-trait: #946a0f;       /* trait du schéma : 4,6:1 sur crème clair */
  --mh-nuit: #201b16;
  --mh-flamme: #f4e8cf;
  /* les quatre tables : une teinte chacune, tirée de sa vaisselle (toutes AA sur crème) */
  --mh-sapin: #2f4b3c;          /* White Forest, 9:1 */
  --mh-rouge: #9a2b26;          /* Héritage Christmas, 7:1 */
  --mh-bonbon: #b3262f;         /* Ribbon, 6:1 */
  --mh-serif: "Playfair Display", Georgia, "Times New Roman", serif;
  --mh-sans: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --mh-gouttiere: clamp(1.25rem, 5vw, 4rem);
  /* hauteur d'un éventuel bandeau collant en haut d'écran (bandeau soldes du site) */
  --mh-entete: 0px;
  /* expo-out : l'objet arrive vite et se pose lentement, comme une assiette qu'on dépose */
  --mh-ease: cubic-bezier(.16, 1, .3, 1);
  --mh-teinte: var(--mh-or-texte);
  --mh-ruban: linear-gradient(var(--mh-teinte), var(--mh-teinte));

  display: block;
  background: var(--mh-creme);
  color: var(--mh-brun);
  font-family: var(--mh-sans);
  font-size: 1rem;
  line-height: 1.6;
  overflow-x: clip;               /* clip (et non hidden) : ne casse pas position: sticky */
  -webkit-font-smoothing: antialiased;
  interpolate-size: allow-keywords; /* ouverture fluide des <details> (Chrome 129+) */
}
.mh-article *,
.mh-article *::before,
.mh-article *::after { box-sizing: border-box; }
.mh-article img { max-width: 100%; display: block; }
.mh-article :where(h1, h2, h3, h4, p, ul, ol, figure, blockquote, table) { margin: 0; }
.mh-article :where(ul, ol) { padding: 0; }

html:has(.mh-article) { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html:has(.mh-article) { scroll-behavior: auto; } }

.mh-article .mh-sr {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ---------- Titres : le thème force Poppins/Cormorant + capitalize, on reprend la main ----------
   Chaque titre règle sa taille par --mh-taille ; une seule règle !important applique tout. */
.mh-article :is(h1, h2, h3, h4) {
  font-family: var(--mh-serif) !important;
  font-weight: 400 !important;
  font-size: var(--mh-taille, 2rem) !important;
  line-height: var(--mh-interligne, 1.1) !important;
  letter-spacing: var(--mh-approche, -.01em) !important;
  text-transform: none !important;
  color: var(--mh-couleur-titre, var(--mh-encre)) !important;
  text-wrap: balance;
}
.mh-article :is(h1, h2, h3, h4) :is(a, span) { font-family: inherit !important; text-transform: none !important; }
.mh-article .mh-principal { display: block; }
.mh-article .mh-sous { display: block; font-style: italic; }

/* ---------- Petites capitales du site ---------- */
.mh-article .mh-surtitre,
.mh-article .mh-astuce__label {
  font: 600 .6875rem/1.4 var(--mh-sans);
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--mh-or-texte);
}

/* ---------- Méta : date, durée (filet or entre les deux) ---------- */
.mh-article .mh-meta {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: .35rem .9rem;
  font: 500 .75rem/1.4 var(--mh-sans);
  letter-spacing: .04em;
  color: var(--mh-brun-doux);
}
.mh-article .mh-meta > * + *::before {
  content: ""; display: inline-block; vertical-align: middle;
  width: .7rem; height: 1px; margin-right: .9rem;
  background: var(--mh-or);
  transform: translateY(-.1em);
}

.mh-article .mh-legende {
  margin-top: .7rem;
  font-size: .8125rem; line-height: 1.45;
  color: var(--mh-brun-doux);
  text-wrap: pretty;
}

/* ---------- Liens ---------- */
.mh-article .mh-corps :is(p, li, td) a:not([class]) {
  color: var(--mh-encre);
  text-decoration: underline;
  text-decoration-color: var(--mh-or);
  text-decoration-thickness: 1px;
  text-underline-offset: .22em;
  transition: color .3s ease, text-decoration-thickness .3s ease;
}
.mh-article .mh-corps :is(p, li, td) a:not([class]):hover { color: var(--mh-or-texte); text-decoration-thickness: 2px; }
.mh-article a:focus-visible,
.mh-article summary:focus-visible {
  outline: 2px solid var(--mh-or-texte);
  outline-offset: 4px;
  border-radius: 1px;
}

/* lien « ITINÉRAIRE → » du Journal */
.mh-article .mh-lien {
  display: inline-flex; align-items: center; gap: .9rem;
  padding: 0 0 .7rem;
  font: 600 .75rem/1 var(--mh-sans);
  letter-spacing: .22em; text-transform: uppercase;
  color: var(--mh-encre);
  text-decoration: none;
  background: linear-gradient(var(--mh-or), var(--mh-or)) 0 100% / 100% 1px no-repeat;
  transition: color .3s ease;
}
.mh-article .mh-fleche {
  width: 1.6rem; height: .75rem; flex: none;
  fill: none; stroke: currentColor; stroke-width: 1.2;
  transition: transform .6s var(--mh-ease);
}
.mh-article a.mh-lien:hover { color: var(--mh-or-texte); }
.mh-article a:is(.mh-lien, .mh-produit):is(:hover, :focus-visible) .mh-fleche { transform: translateX(.4rem); }

/* ---------- Teintes des quatre tables ---------- */
.mh-article .mh-teinte-foret { --mh-teinte: var(--mh-sapin); }
.mh-article .mh-teinte-or { --mh-teinte: var(--mh-or-texte); }
.mh-article .mh-teinte-antan { --mh-teinte: var(--mh-rouge); }
.mh-article .mh-teinte-bonbon {
  --mh-teinte: var(--mh-bonbon);
  /* Ribbon : le ruban devient un sucre d'orge */
  --mh-ruban: repeating-linear-gradient(-45deg, var(--mh-bonbon) 0 5px, var(--mh-creme-clair) 5px 10px);
}
.mh-article :is(.mh-teinte-foret, .mh-teinte-or, .mh-teinte-antan) { --mh-ruban: linear-gradient(var(--mh-teinte), var(--mh-teinte)); }

/* ==========================================================================
   1. Ouverture (gabarit)
   ========================================================================== */
.mh-article .mh-ouverture {
  display: flex;
  flex-direction: column;
  padding: clamp(1.75rem, 6vw, 3rem) var(--mh-gouttiere) 0;
}
/* mobile : le bloc texte s'efface pour que l'image passe entre la date et le chapô */
.mh-article .mh-ouverture__texte { display: contents; }
.mh-article .mh-ouverture__titre {
  --mh-taille: clamp(2.55rem, 1.6rem + 4.3vw, 4.6rem);
  --mh-interligne: 1;
  --mh-approche: -.025em;
  margin: .9rem 0 1.15rem;
}
.mh-article .mh-ouverture__titre .mh-sous {
  margin-top: .5em;
  font-size: .5em;
  line-height: 1.22;
  letter-spacing: -.005em;
  color: var(--mh-brun);
  max-width: 24ch;
}
.mh-article .mh-ouverture__media {
  order: 2;
  margin: 1.75rem calc(var(--mh-gouttiere) * -1) 0;
}
.mh-article .mh-ouverture__media .mh-legende { padding: 0 var(--mh-gouttiere); }
.mh-article .mh-ouverture__cadre {
  aspect-ratio: 1;
  overflow: hidden;
  background: var(--mh-lin);
}
.mh-article .mh-ouverture__cadre img {
  width: 100%; height: 100%;
  object-fit: cover;
  transform: scale(var(--mh-zoom, 1));
  transition: transform 1.8s var(--mh-ease);
}
.mh-article .mh-chapo {
  order: 3;
  margin-top: 1.9rem;
  font-family: var(--mh-serif);
  font-size: clamp(1.1875rem, 1.05rem + .5vw, 1.375rem);
  line-height: 1.55;
  color: var(--mh-encre);
  text-wrap: pretty;
}

@media (min-width: 64rem) {
  .mh-article .mh-ouverture {
    display: grid;
    /* image collée au bord droit de l'écran, texte calé sur la colonne de lecture */
    grid-template-columns:
      [bord-start] minmax(var(--mh-gouttiere), 1fr)
      [texte-start] minmax(0, 33rem) [texte-end]
      clamp(2.5rem, 5vw, 6rem)
      [media-start] minmax(0, 52rem) [media-end];
    align-items: center;
    padding: clamp(2rem, 4vw, 3.5rem) 0 0;
  }
  .mh-article .mh-ouverture__texte { display: block; grid-column: texte; padding-bottom: 2.5rem; }
  .mh-article .mh-ouverture__media { grid-column: media; margin: 0; }
  .mh-article .mh-chapo { font-size: 1.25rem; margin-top: 1.6rem; }
  .mh-article .mh-ouverture__cadre {
    aspect-ratio: auto;
    height: clamp(30rem, calc(100svh - 11rem), 50rem);
  }
  .mh-article .mh-ouverture__media .mh-legende { padding: 0 var(--mh-gouttiere) 0 0; }
}

/* ==========================================================================
   2. Corps : grille de lecture nommée. Tout enfant direct se pose sur « texte » ;
   les composants choisissent « large », « marge » ou « plein » (pleine largeur).
   ========================================================================== */
.mh-article .mh-corps {
  display: grid;
  grid-template-columns:
    [plein-start] var(--mh-gouttiere)
    [large-start texte-start marge-start] minmax(0, 1fr)
    [texte-end marge-end large-end] var(--mh-gouttiere) [plein-end];
  padding-bottom: clamp(4rem, 10vw, 7rem);
  font-size: 1.0625rem;
  line-height: 1.75;
}
@media (min-width: 48rem) {
  .mh-article .mh-corps {
    grid-template-columns:
      [plein-start] minmax(var(--mh-gouttiere), 1fr)
      [large-start] minmax(0, 4rem)
      [texte-start marge-start] minmax(0, 38rem) [texte-end marge-end]
      minmax(0, 4rem) [large-end]
      minmax(var(--mh-gouttiere), 1fr) [plein-end];
  }
}
@media (min-width: 64rem) {
  .mh-article .mh-corps {
    /* colonne de lecture décalée à gauche, marge à droite pour les astuces et légendes */
    grid-template-columns:
      [plein-start] minmax(var(--mh-gouttiere), 1fr)
      [large-start] minmax(0, 8rem)
      [texte-start] minmax(0, 40rem) [texte-end]
      minmax(2rem, 4rem)
      [marge-start] minmax(0, 15rem) [marge-end large-end]
      minmax(var(--mh-gouttiere), 1fr) [plein-end];
  }
}
.mh-article .mh-corps > * { grid-column: texte; }
.mh-article .mh-corps > p,
.mh-article .mh-corps > ul,
.mh-article .mh-table__texte > p + p { margin-top: 1.15em; text-wrap: pretty; }
.mh-article .mh-corps > h2 {
  --mh-taille: clamp(1.85rem, 1.3rem + 2.3vw, 3rem);
  --mh-interligne: 1.1;
  margin-top: clamp(4.5rem, 10vw, 7.5rem);
  max-width: 22ch;
}
.mh-article .mh-corps > h2 + p { margin-top: 1.4rem; }

/* liste des idées : chaque puce prend la teinte de sa table */
.mh-article .mh-teintes { list-style: none; }
.mh-article .mh-teintes li { position: relative; padding: .3rem 0 .3rem 1.75rem; }
.mh-article .mh-teintes li::before {
  content: ""; position: absolute; left: 0; top: .95em;
  width: .7rem; height: .7rem; border-radius: 50%;
  background: var(--mh-puce);
}
.mh-article .mh-teintes li:nth-child(1) { --mh-puce: var(--mh-sapin); }
.mh-article .mh-teintes li:nth-child(2) { --mh-puce: var(--mh-or); }
.mh-article .mh-teintes li:nth-child(3) { --mh-puce: var(--mh-rouge); }
.mh-article .mh-teintes li:nth-child(4) { --mh-puce: repeating-linear-gradient(-45deg, var(--mh-bonbon) 0 2px, var(--mh-creme-clair) 2px 4px); }

/* ==========================================================================
   3. Quiz « Quel Noël êtes-vous ? » : quatre marque-places posés sur leur photo
   ========================================================================== */
.mh-article .mh-quiz {
  grid-column: plein;
  display: grid;
  grid-template-columns: subgrid;
  margin-top: clamp(3.5rem, 9vw, 6rem);
}
.mh-article .mh-quiz > * { grid-column: large; }
.mh-article .mh-quiz__titre {
  font-family: var(--mh-serif);
  font-style: italic;
  font-size: clamp(1.75rem, 1.2rem + 2.4vw, 2.75rem);
  line-height: 1.1;
  color: var(--mh-encre);
}
.mh-article .mh-quiz__cartes {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.75rem .75rem;
  margin-top: 1.5rem;
}
@media (min-width: 48rem) {
  .mh-article .mh-quiz__cartes { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; }
}
@media (min-width: 64rem) {
  .mh-article .mh-quiz__cartes { gap: 1.5rem; margin-top: 2rem; }
}
.mh-article .mh-quiz__carte {
  display: flex; flex-direction: column;
  height: 100%;
  color: inherit;
  text-decoration: none;
}
.mh-article .mh-quiz__photo {
  display: block;
  aspect-ratio: 1;
  overflow: hidden;
  background: var(--mh-lin);
}
.mh-article .mh-quiz__photo img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 1.2s var(--mh-ease);
}
/* le marque-place : carton crème, double filet or, ruban à la teinte de la table */
.mh-article .mh-quiz__etiquette {
  position: relative;
  flex: 1;
  display: flex; flex-direction: column; align-items: center; justify-content: space-between;
  gap: .55rem;
  margin: -1.75rem .5rem 0;
  padding: 1.05rem .6rem .85rem;
  background: var(--mh-ruban) 0 0 / 100% 4px no-repeat, var(--mh-creme-clair);
  outline: 1px solid rgb(200 162 74 / .55);
  outline-offset: -6px;
  box-shadow: 0 10px 24px -18px rgb(26 24 20 / .45);
  text-align: center;
  transition: transform .7s var(--mh-ease), box-shadow .7s var(--mh-ease);
}
.mh-article .mh-quiz__gout {
  font-family: var(--mh-serif);
  font-size: clamp(1.0625rem, .95rem + .55vw, 1.3rem);
  line-height: 1.15;
  color: var(--mh-encre);
  text-wrap: balance;
}
.mh-article .mh-quiz__plutot {
  display: block;
  margin-bottom: .35rem;
  font: 600 .625rem/1.2 var(--mh-sans);
  letter-spacing: .24em; text-transform: uppercase;
  color: var(--mh-teinte);
}
.mh-article .mh-quiz__vers {
  display: block;
  font: italic 400 .875rem/1.3 var(--mh-serif);
  color: var(--mh-teinte);
  text-wrap: balance;
}
/* flèche en ligne : elle suit le dernier mot quand le nom passe sur deux lignes */
.mh-article .mh-fleche-bas {
  display: inline-block; vertical-align: -.12em;
  margin-left: .3em;
  width: .6rem; height: .8rem;
  fill: none; stroke: currentColor; stroke-width: 1.3;
  transition: transform .6s var(--mh-ease);
}
@media (hover: hover) and (pointer: fine) {
  .mh-article .mh-quiz__carte:hover .mh-quiz__photo img { transform: scale(1.06); }
  .mh-article .mh-quiz__carte:hover .mh-quiz__etiquette { transform: translateY(-.35rem); box-shadow: 0 18px 30px -18px rgb(26 24 20 / .5); }
}
.mh-article .mh-quiz__carte:is(:hover, :focus-visible) .mh-fleche-bas { transform: translateY(.25rem); }

/* ==========================================================================
   4. Les quatre tables
   ========================================================================== */
.mh-article .mh-table {
  grid-column: plein;
  display: grid;
  grid-template-columns: subgrid;
  margin-top: clamp(3.5rem, 9vw, 7rem);
}
.mh-article .mh-corps > h2 + .mh-table { margin-top: clamp(2rem, 5vw, 3.5rem); }
.mh-article .mh-table > * { grid-column: texte; }
.mh-article .mh-table__tete .mh-surtitre { color: var(--mh-teinte); }
.mh-article .mh-table__titre {
  --mh-taille: clamp(2.1rem, 1.4rem + 3vw, 3.6rem);
  --mh-interligne: 1.02;
  --mh-approche: -.02em;
  margin-top: .6rem;
  scroll-margin-top: calc(var(--mh-entete) + 3.5rem);
}
.mh-article .mh-table__titre .mh-sous {
  margin-top: .12em;
  font-size: .62em;
  color: var(--mh-teinte);
}
/* arrivée depuis le quiz : un filet se trace sous le nom de la collection */
.mh-article .mh-table__titre .mh-sous {
  width: fit-content;
  background: var(--mh-ruban) 0 100% / 0 2px no-repeat;
  padding-bottom: .12em;
  transition: background-size 1.4s var(--mh-ease) .35s;
}
.mh-article .mh-table__titre:target .mh-sous { background-size: 100% 2px; }

.mh-article .mh-ambiance {
  grid-column: plein;
  display: grid;
  grid-template-columns: subgrid;
  margin-top: 1.6rem;
}
.mh-article .mh-ambiance__cadre {
  grid-column: plein;
  aspect-ratio: 1;
  overflow: hidden;
  background: var(--mh-lin);
}
.mh-article .mh-ambiance__cadre img {
  width: 100%; height: 100%;
  object-fit: cover;
}
.mh-article .mh-ambiance .mh-legende { grid-column: texte; }
.mh-article .mh-table__texte { margin-top: 1.75rem; }
.mh-article .mh-table__texte > p { text-wrap: pretty; }

@media (min-width: 48rem) {
  .mh-article .mh-ambiance__cadre { grid-column: large; aspect-ratio: 4 / 3; }
}
@media (min-width: 64rem) {
  .mh-article .mh-table__tete { grid-column: texte-start / large-end; }
  .mh-article .mh-ambiance { margin-top: 2.25rem; }
  .mh-article .mh-ambiance__cadre { aspect-ratio: 3 / 2; }
  /* l'image sort de la colonne et touche un bord de l'écran, à gauche puis à droite */
  .mh-article .mh-ambiance--gauche .mh-ambiance__cadre { grid-column: plein-start / texte-end; grid-row: 1; }
  .mh-article .mh-ambiance--gauche .mh-legende { grid-column: marge; grid-row: 1; align-self: end; margin: 0; }
  .mh-article .mh-ambiance--droite .mh-ambiance__cadre { grid-column: texte-start / plein-end; }
  .mh-article .mh-table__texte { grid-row: 3; margin-top: 2.5rem; }
  .mh-article .mh-table > .mh-astuce { grid-column: marge; grid-row: 3; align-self: start; margin-top: 2.75rem; }
  .mh-article .mh-table > .mh-produits { grid-row: 4; }
}

/* parallaxe interne des grandes photos, au fil du scroll, sans JS */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .mh-article .mh-ambiance__cadre img {
      scale: 1.1;
      animation: mh-parallaxe linear both;
      animation-timeline: view();
      animation-range: cover;
    }
  }
}
@keyframes mh-parallaxe {
  from { translate: 0 -4.5%; }
  to { translate: 0 4.5%; }
}

/* ---------- Astuce : un carton posé à côté du texte ---------- */
.mh-article .mh-astuce {
  margin-top: 2rem;
  padding: 1.5rem 1.35rem 1.4rem;
  background: var(--mh-ruban) 0 0 / 100% 4px no-repeat, var(--mh-creme-clair);
  outline: 1px solid rgb(200 162 74 / .5);
  outline-offset: -6px;
}
.mh-article .mh-astuce__label { color: var(--mh-teinte); }
.mh-article .mh-astuce__texte {
  margin-top: .55rem;
  font: italic 400 1.125rem/1.5 var(--mh-serif);
  color: var(--mh-encre);
  text-wrap: pretty;
}
.mh-article .mh-astuce__texte a {
  color: inherit;
  text-decoration: underline;
  text-decoration-color: var(--mh-or);
  text-underline-offset: .2em;
}
.mh-article .mh-astuce--photo { display: grid; gap: 1.1rem; }
.mh-article .mh-astuce__photo img { width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; }
.mh-article .mh-astuce__photo .mh-legende { margin-top: .5rem; }
@media (min-width: 30rem) and (max-width: 63.99rem) {
  .mh-article .mh-astuce--photo { grid-template-columns: minmax(0, 11rem) minmax(0, 1fr); align-items: center; }
}

/* ---------- Bande de vignettes produits ---------- */
.mh-article .mh-produits {
  grid-column: plein;
  list-style: none;
  display: flex;
  gap: .75rem;
  margin-top: 2rem;
  padding: 0 var(--mh-gouttiere) .5rem;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: var(--mh-gouttiere);
  scrollbar-width: none;
}
.mh-article .mh-produits::-webkit-scrollbar { display: none; }
.mh-article .mh-produits > li { flex: 0 0 min(60%, 15rem); scroll-snap-align: start; }
@media (min-width: 48rem) {
  .mh-article .mh-produits {
    grid-column: large;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1rem;
    padding: 0;
    overflow: visible;
  }
}
@media (min-width: 64rem) {
  .mh-article .mh-produits { grid-column: texte-start / marge-end; gap: 1.25rem; margin-top: 2.5rem; }
}
.mh-article .mh-produit {
  display: flex; flex-direction: column;
  height: 100%;
  padding: .75rem .75rem 1rem;
  background: #fff;
  color: var(--mh-encre);
  text-decoration: none;
  box-shadow: 0 0 0 1px rgb(200 162 74 / .22);
  transition: box-shadow .5s ease;
}
.mh-article .mh-produit__photo { display: block; aspect-ratio: 1; overflow: hidden; }
.mh-article .mh-produit__photo img {
  width: 100%; height: 100%;
  object-fit: contain;
  transform: scale(var(--mh-zoom-produit, 1.14));   /* les packshots ont ~15 % de blanc autour */
  transition: transform 1.1s var(--mh-ease);
}
.mh-article .mh-produit__nom {
  display: flex; align-items: flex-start; justify-content: space-between; gap: .75rem;
  margin-top: .8rem;
  font: 500 .875rem/1.4 var(--mh-sans);
  text-wrap: pretty;
}
.mh-article .mh-produit__nom .mh-fleche { margin-top: .3rem; color: var(--mh-or-trait); }
@media (hover: hover) and (pointer: fine) {
  .mh-article .mh-produit:hover { box-shadow: 0 0 0 1px var(--mh-or); }
  .mh-article .mh-produit:hover { --mh-zoom-produit: 1.2; }
}

/* ==========================================================================
   5. Dressage : le schéma se pose pièce par pièce pendant la lecture
   ========================================================================== */
.mh-article .mh-dressage {
  grid-column: plein;
  display: grid;
  grid-template-columns: subgrid;
  margin-top: clamp(5rem, 12vw, 9rem);
  padding: clamp(3.5rem, 9vw, 6.5rem) 0 clamp(3.5rem, 9vw, 6rem);
  background: var(--mh-lin);
}
.mh-article .mh-dressage > * { grid-column: texte; }
.mh-article .mh-dressage > h2 {
  --mh-taille: clamp(1.85rem, 1.3rem + 2.3vw, 3rem);
  max-width: 20ch;
}
.mh-article .mh-dressage > h2 + p { margin-top: 1.4rem; }
.mh-article .mh-dressage__scene { margin-top: 1.5rem; }
.mh-article .mh-dressage__plan {
  position: sticky;
  top: var(--mh-entete);
  z-index: 2;
  padding: .75rem 0;
  background: var(--mh-lin);
}
.mh-article .mh-dressage__plan::after {
  content: ""; position: absolute; left: 0; right: 0; top: 100%;
  height: 1.5rem;
  background: linear-gradient(var(--mh-lin), rgb(242 235 221 / 0));
  pointer-events: none;
}
.mh-article .mh-couvert {
  display: block;
  width: 100%;
  height: auto;
  max-height: 44svh;
  margin-inline: auto;
}
.mh-article .mh-etapes {
  list-style: none;
  padding-bottom: 22svh;   /* laisse la dernière étape monter jusqu'à la ligne de lecture */
}
.mh-article .mh-etapes > li {
  position: relative;
  padding: 1.05rem 0 1.05rem 3.1rem;
  border-top: 1px solid rgb(148 106 15 / .28);
  text-wrap: pretty;
}
.mh-article .mh-etapes > li::before {
  content: attr(data-etape);
  position: absolute; left: 0; top: 1.05rem;
  display: grid; place-items: center;
  width: 2.05rem; height: 2.05rem;
  border: 1px solid var(--mh-or-trait);
  border-radius: 50%;
  background: var(--mh-creme-clair);
  font: 600 .8125rem/1 var(--mh-sans);
  color: var(--mh-encre);
  transition: background-color .45s ease, color .45s ease, transform .6s var(--mh-ease);
}
.mh-article .mh-etapes__piece {
  font-family: var(--mh-serif);
  font-size: 1.1875rem;
  color: var(--mh-encre);
}
.mh-article .mh-etapes > li:is(.is-actif, .is-survol)::before {
  background: var(--mh-or-trait);
  color: var(--mh-creme-clair);
  transform: scale(1.08);
}
.mh-article .mh-dressage__suite { margin-top: 1.5rem; }
.mh-article .mh-dressage a:not([class]) {
  color: var(--mh-encre);
  text-decoration: underline; text-decoration-color: var(--mh-or-trait);
  text-underline-offset: .22em;
}

@media (min-width: 64rem) {
  .mh-article .mh-dressage > h2 { grid-column: texte-start / large-end; }
  .mh-article .mh-dressage__scene {
    grid-column: large;
    display: grid;
    grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
    gap: clamp(2.5rem, 5vw, 5rem);
    align-items: start;
    margin-top: 2.5rem;
  }
  .mh-article .mh-dressage__plan {
    /* centré dans la hauteur d'écran : le schéma mesure ~33rem de haut à cette largeur */
    top: calc(var(--mh-entete) + max(2rem, (100svh - var(--mh-entete) - 33rem) / 2));
    padding: 0;
  }
  .mh-article .mh-dressage__plan::after { display: none; }
  .mh-article .mh-couvert { max-height: calc(100svh - var(--mh-entete) - 4rem); }
  .mh-article .mh-etapes { padding: 0; }
  .mh-article .mh-etapes > li { padding-block: 1.4rem; }
  .mh-article .mh-etapes > li::before { top: 1.4rem; }
  .mh-article .mh-dressage__suite { grid-column: texte; margin-top: 2.5rem; }
}

/* ---------- Le schéma SVG ---------- */
.mh-article .mh-couvert .mh-piece :is(rect, circle, ellipse, path) {
  fill: none;
  stroke: var(--mh-or-trait);
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: stroke-width .35s ease;
}
.mh-article .mh-couvert .mh-piece .mh-plein { fill: var(--mh-creme-clair); }
.mh-article .mh-couvert .mh-piece .mh-chemin { fill: #f7f0e2; }
.mh-article .mh-couvert .mh-piece .mh-baie { fill: var(--mh-rouge); stroke: none; }
.mh-article .mh-couvert .mh-flamme { fill: var(--mh-or); stroke: none; }
.mh-article .mh-couvert .mh-cote-texte { font: 500 13px var(--mh-sans); fill: var(--mh-brun); }
.mh-article .mh-couvert .mh-piece:is(.is-actif, .is-survol) :is(rect, circle, ellipse, path):not(.mh-baie) { stroke-width: 2.6; }
.mh-article .mh-couvert .mh-num circle {
  fill: var(--mh-creme-clair);
  stroke: var(--mh-or-trait);
  stroke-width: 1.4;
  transition: fill .45s ease;
}
.mh-article .mh-couvert .mh-num text {
  font: 600 14px var(--mh-sans);
  fill: var(--mh-encre);
  text-anchor: middle;
  dominant-baseline: central;
  transition: fill .45s ease;
}
.mh-article .mh-couvert .mh-num:is(.is-actif, .is-survol) circle { fill: var(--mh-or-trait); }
.mh-article .mh-couvert .mh-num:is(.is-actif, .is-survol) text { fill: var(--mh-creme-clair); }
@media (max-width: 47.99rem) {
  /* le schéma est réduit de moitié sur mobile : traits plus épais pour garder 1 px à l'écran */
  .mh-article .mh-couvert .mh-piece :is(rect, circle, ellipse, path) { stroke-width: 2.4; }
  .mh-article .mh-couvert .mh-piece:is(.is-actif, .is-survol) :is(rect, circle, ellipse, path):not(.mh-baie) { stroke-width: 3.6; }
  .mh-article .mh-couvert .mh-num circle { r: 17px; stroke-width: 2; }
  .mh-article .mh-couvert .mh-num text { font-size: 19px; }
  .mh-article .mh-couvert .mh-cote-texte { font-size: 18px; }
}

/* tracé progressif (activé par article.js ; sans JS, tout est dessiné) */
.mh-js .mh-article .mh-couvert .mh-piece :is(rect, circle, ellipse, path) {
  stroke-dasharray: 1 1;
  stroke-dashoffset: 1;
  fill-opacity: 0;
  transition: stroke-dashoffset 1.5s var(--mh-ease), fill-opacity .7s ease .45s, stroke-width .35s ease;
}
.mh-js .mh-article .mh-couvert .mh-piece :is(text, .mh-flamme) { opacity: 0; transition: opacity .6s ease .8s; }
.mh-js .mh-article .mh-couvert .mh-piece:is(.is-pose, .is-survol) :is(rect, circle, ellipse, path) { stroke-dashoffset: 0; fill-opacity: 1; }
.mh-js .mh-article .mh-couvert .mh-piece:is(.is-pose, .is-survol) :is(text, .mh-flamme) { opacity: 1; }
.mh-js .mh-article .mh-couvert .mh-num { opacity: .4; transition: opacity .5s ease; }
.mh-js .mh-article .mh-couvert .mh-num:is(.is-pose, .is-survol) { opacity: 1; }

/* ==========================================================================
   6. Tableau des nappes
   ========================================================================== */
.mh-article .mh-nappes { margin-top: 2rem; }
.mh-article .mh-nappes table {
  width: 100%;
  border: 0;
  border-collapse: collapse;
  font-size: .9375rem;
  line-height: 1.45;
}
.mh-article .mh-nappes :is(th, td) {
  border: 0;
  border-bottom: 1px solid rgb(200 162 74 / .45);
  padding: 1.15rem 1.25rem 1.15rem 0;
  text-align: left;
  vertical-align: middle;
  background: none;
}
.mh-article .mh-nappes thead th {
  padding-block: 0 .8rem;
  border-bottom-color: var(--mh-or);
  font: 600 .6875rem/1.4 var(--mh-sans);
  letter-spacing: .2em; text-transform: uppercase;
  color: var(--mh-brun-doux);
}
.mh-article .mh-nappes tbody th {
  font: 400 2.5rem/1 var(--mh-serif);
  color: var(--mh-encre);
}
.mh-article .mh-nappes tbody th.mh-nappes__mot { font-size: 1.25rem; line-height: 1.15; }
.mh-article .mh-nappes td { color: var(--mh-brun); }
.mh-article .mh-nappes td:nth-child(2) { white-space: nowrap; color: var(--mh-encre); font-weight: 500; }
/* la nappe dessinée à l'échelle : 1 cm = 0,32 unité */
.mh-article .mh-gabarit {
  display: inline-block; vertical-align: middle;
  width: 3.4rem; height: 2rem; margin-right: .8rem;
  fill: var(--mh-creme-clair);
  stroke: var(--mh-or-trait); stroke-width: 1.2;
}
@media (max-width: 35.99rem) {
  .mh-article .mh-nappes thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .mh-article .mh-nappes tr {
    display: grid;
    grid-template-columns: 4.6rem minmax(0, 1fr);
    column-gap: 1rem;
    padding: 1.1rem 0;
    border-bottom: 1px solid rgb(200 162 74 / .45);
  }
  .mh-article .mh-nappes :is(th, td) { display: block; border: 0; padding: 0; }
  .mh-article .mh-nappes tbody th { grid-row: span 2; align-self: start; }
  .mh-article .mh-nappes td + td { margin-top: .4rem; }
  .mh-article .mh-nappes td[data-label="Collections"]::before {
    content: attr(data-label);
    display: block;
    font: 600 .625rem/1.4 var(--mh-sans);
    letter-spacing: .2em; text-transform: uppercase;
    color: var(--mh-brun-doux);
  }
  .mh-article .mh-nappes td:nth-child(2) { white-space: normal; }
  .mh-article .mh-gabarit { display: block; margin: 0 0 .4rem; }
}

/* ==========================================================================
   7. Lumière : deux photos côte à côte, en quinconce
   ========================================================================== */
.mh-article .mh-duo {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .75rem;
  align-items: start;
  margin-top: 2.25rem;
}
.mh-article .mh-duo__item:nth-child(2) { margin-top: 2.75rem; }
.mh-article .mh-duo__lien { display: block; color: inherit; text-decoration: none; }
.mh-article .mh-duo__cadre { display: block; aspect-ratio: 1; overflow: hidden; background: var(--mh-lin); }
.mh-article .mh-duo__cadre img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.4s var(--mh-ease); }
.mh-article .mh-duo__lien .mh-legende { transition: color .3s ease; }
@media (hover: hover) and (pointer: fine) {
  .mh-article .mh-duo__lien:hover .mh-duo__cadre img { transform: scale(1.04); }
  .mh-article .mh-duo__lien:hover .mh-legende { color: var(--mh-encre); }
}
@media (min-width: 48rem) {
  .mh-article .mh-duo { grid-column: large; gap: 1.5rem; }
  .mh-article .mh-duo__item:nth-child(2) { margin-top: 4.5rem; }
}
@media (min-width: 64rem) {
  .mh-article .mh-duo { grid-column: texte-start / marge-end; gap: 2rem; margin-top: 3rem; }
}

/* ==========================================================================
   8. Champagne : le seul passage de nuit
   ========================================================================== */
.mh-article .mh-soiree {
  grid-column: plein;
  margin-top: clamp(5rem, 12vw, 9rem);
  padding: clamp(3.5rem, 9vw, 7rem) 0;
  background: var(--mh-nuit);
  color: rgb(244 232 207 / .86);
}
.mh-article .mh-soiree__in {
  max-width: 72rem;
  margin: 0 auto;
  padding: 0 var(--mh-gouttiere);
  display: grid;
  gap: 2.25rem;
}
.mh-article .mh-soiree__media { margin-inline: calc(var(--mh-gouttiere) * -1); }
.mh-article .mh-soiree__cadre { aspect-ratio: 1; overflow: hidden; background: #2b2520; }
.mh-article .mh-soiree__cadre img { width: 100%; height: 100%; object-fit: cover; }
.mh-article .mh-soiree .mh-legende { padding: 0 var(--mh-gouttiere); color: rgb(244 232 207 / .7); }
.mh-article .mh-soiree h2 {
  --mh-taille: clamp(1.85rem, 1.3rem + 2.3vw, 3rem);
  --mh-couleur-titre: var(--mh-flamme);
}
.mh-article .mh-soiree__texte > p { margin-top: 1.4rem; font-size: 1.0625rem; line-height: 1.75; text-wrap: pretty; }
.mh-article .mh-corps .mh-soiree :is(p, li, td) a:not([class]) {
  color: var(--mh-flamme);
  text-decoration: underline; text-decoration-color: var(--mh-or);
  text-underline-offset: .22em;
}
.mh-article .mh-corps .mh-soiree :is(p, li, td) a:not([class]):hover { color: var(--mh-or); }
.mh-article .mh-soiree a:focus-visible { outline-color: var(--mh-or); }
.mh-article .mh-soiree .mh-produits {
  margin-inline: calc(var(--mh-gouttiere) * -1);
}
.mh-article .mh-soiree .mh-produit { box-shadow: none; }
@media (min-width: 48rem) {
  .mh-article .mh-soiree__media { margin: 0; }
  .mh-article .mh-soiree .mh-legende { padding: 0; }
  .mh-article .mh-soiree .mh-produits { margin-inline: 0; grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 34rem; }
}
@media (min-width: 64rem) {
  .mh-article .mh-soiree__in {
    grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
    gap: clamp(3rem, 6vw, 6rem);
    align-items: center;
  }
}

/* ==========================================================================
   9. Boutique (même bloc que le Journal)
   ========================================================================== */
.mh-article .mh-boutique {
  grid-column: plein;
  padding: clamp(3.5rem, 8vw, 6.5rem) 0 clamp(4rem, 9vw, 8rem);
  background: var(--mh-lin);
}
.mh-article .mh-boutique__in {
  max-width: 84rem;
  margin: 0 auto;
  padding: 0 var(--mh-gouttiere);
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 2.5rem;
}
.mh-article .mh-boutique .mh-surtitre { color: var(--mh-brun-doux); }
.mh-article .mh-boutique__titre {
  --mh-taille: clamp(2rem, 1.4rem + 2.4vw, 3.25rem);
  --mh-interligne: 1.08;
  --mh-approche: -.015em;
  margin: .8rem 0 1rem;
}
.mh-article .mh-boutique__texte > p:not([class]) { max-width: 34rem; text-wrap: pretty; }
.mh-article .mh-boutique__texte a:not([class]) { color: var(--mh-encre); text-decoration: underline; text-decoration-color: var(--mh-or-trait); text-underline-offset: .22em; }
.mh-article .mh-boutique__liens { display: flex; flex-wrap: wrap; gap: 1.25rem 2.25rem; margin-top: 2rem; }
.mh-article .mh-boutique__photos {
  list-style: none;
  display: flex;
  gap: .9rem;
  margin-inline: calc(var(--mh-gouttiere) * -1);
  padding: 0 var(--mh-gouttiere) .25rem;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: var(--mh-gouttiere);
  scrollbar-width: none;
}
.mh-article .mh-boutique__photos::-webkit-scrollbar { display: none; }
.mh-article .mh-boutique__photos > li { flex: 0 0 min(64%, 18rem); scroll-snap-align: start; }
.mh-article .mh-boutique__cadre { aspect-ratio: 9 / 16; overflow: hidden; background: #c9a092; }
.mh-article .mh-boutique__cadre img { width: 100%; height: 100%; object-fit: cover; }
@media (min-width: 48rem) {
  .mh-article .mh-boutique__photos {
    display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1.25rem; margin: 0; padding: 0; overflow: visible;
  }
  .mh-article .mh-boutique__photos > li:nth-child(2) { transform: translateY(3.5rem); }
  .mh-article .mh-boutique { padding-bottom: clamp(7rem, 12vw, 11rem); }
}
@media (min-width: 64rem) {
  .mh-article .mh-boutique__in {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: 2rem;
    align-items: center;
  }
  .mh-article .mh-boutique__texte { grid-column: 1 / 5; }
  .mh-article .mh-boutique__photos { grid-column: 6 / 13; }
}

/* ==========================================================================
   10. FAQ en accordéon
   ========================================================================== */
.mh-article .mh-faq { margin-top: clamp(4.5rem, 10vw, 7.5rem); }
.mh-article .mh-faq h2 {
  --mh-taille: clamp(1.85rem, 1.3rem + 2.3vw, 3rem);
  margin-bottom: 1.5rem;
}
.mh-article .mh-faq__item { border-top: 1px solid rgb(200 162 74 / .5); }
.mh-article .mh-faq__item:last-child { border-bottom: 1px solid rgb(200 162 74 / .5); }
.mh-article .mh-faq summary {
  display: flex; align-items: center; justify-content: space-between; gap: 1.5rem;
  padding: 1.3rem 0;
  cursor: pointer;
  list-style: none;
}
.mh-article .mh-faq summary::-webkit-details-marker { display: none; }
.mh-article .mh-faq__q {
  font: 400 clamp(1.125rem, 1rem + .5vw, 1.375rem)/1.3 var(--mh-serif);
  color: var(--mh-encre);
  transition: color .3s ease;
}
.mh-article .mh-faq summary:hover .mh-faq__q { color: var(--mh-or-texte); }
/* + qui devient − : deux filets or */
.mh-article .mh-faq__signe { position: relative; flex: none; width: 1rem; height: 1rem; }
.mh-article .mh-faq__signe::before,
.mh-article .mh-faq__signe::after {
  content: ""; position: absolute; left: 0; top: 50%;
  width: 100%; height: 1.5px; margin-top: -.75px;
  background: var(--mh-or-trait);
  transition: transform .5s var(--mh-ease);
}
.mh-article .mh-faq__signe::after { transform: rotate(90deg); }
.mh-article .mh-faq__item[open] .mh-faq__signe::after { transform: rotate(0deg); }
.mh-article .mh-faq__r { padding: 0 2.5rem 1.5rem 0; color: var(--mh-brun); text-wrap: pretty; }
.mh-article .mh-faq__item::details-content {
  block-size: 0;
  overflow: clip;
  transition: block-size .55s var(--mh-ease), content-visibility .55s allow-discrete;
}
.mh-article .mh-faq__item[open]::details-content { block-size: auto; }

/* ==========================================================================
   Mouvement (activé par article.js, jamais sans JS)
   ========================================================================== */
.mh-js .mh-article .mh-ouverture__cadre { --mh-zoom: 1.06; }
.mh-js .mh-article :is(.mh-ouverture .mh-surtitre, .mh-ouverture__titre, .mh-meta, .mh-chapo) {
  opacity: 0;
  transform: translateY(1rem);
  transition: opacity .9s ease, transform 1.2s var(--mh-ease);
}
.mh-js .mh-article .mh-ouverture__titre { transition-delay: .08s; }
.mh-js .mh-article .mh-meta { transition-delay: .2s; }
.mh-js .mh-article .mh-chapo { transition-delay: .3s; }
.mh-pret .mh-article .mh-ouverture__cadre { --mh-zoom: 1; }
.mh-pret .mh-article :is(.mh-ouverture .mh-surtitre, .mh-ouverture__titre, .mh-meta, .mh-chapo) { opacity: 1; transform: none; }

.mh-js .mh-article [data-mh-reveal]:not([data-mh-reveal="media"]) {
  opacity: 0;
  transform: translateY(1.5rem);
  transition: opacity .9s ease, transform 1.2s var(--mh-ease);
  transition-delay: var(--mh-delai, 0s);
}
/* image : le cadre est déjà là, la photo s'y déplie du haut vers le bas.
   Le masque est sur le cadre intérieur et non sur la figure observée (Chrome applique
   le clip-path de la cible à l'IntersectionObserver). */
.mh-js .mh-article [data-mh-reveal="media"] :is(.mh-ambiance__cadre, .mh-duo__cadre, .mh-soiree__cadre, .mh-boutique__cadre) {
  clip-path: inset(0 0 100% 0);
  transition: clip-path 1.35s var(--mh-ease) var(--mh-delai, 0s);
}
.mh-js .mh-article [data-mh-reveal].is-in { opacity: 1; transform: none; }
.mh-js .mh-article [data-mh-reveal="media"].is-in :is(.mh-ambiance__cadre, .mh-duo__cadre, .mh-soiree__cadre, .mh-boutique__cadre) { clip-path: inset(0); }

@media (prefers-reduced-motion: reduce) {
  .mh-article *,
  .mh-article *::before,
  .mh-article *::after { transition-duration: 0s !important; transition-delay: 0s !important; animation: none !important; }
  .mh-js .mh-article [data-mh-reveal],
  .mh-js .mh-article :is(.mh-ouverture .mh-surtitre, .mh-ouverture__titre, .mh-meta, .mh-chapo) { opacity: 1 !important; transform: none !important; }
  .mh-js .mh-article [data-mh-reveal] * { clip-path: none !important; }
  .mh-article, .mh-article * { --mh-zoom: 1 !important; }
  /* le schéma est entièrement dessiné ; seuls les numéros s'allument au fil de la lecture */
  .mh-js .mh-article .mh-couvert .mh-piece :is(rect, circle, ellipse, path) { stroke-dashoffset: 0 !important; fill-opacity: 1 !important; }
  .mh-js .mh-article .mh-couvert .mh-piece :is(text, .mh-flamme),
  .mh-js .mh-article .mh-couvert .mh-num { opacity: 1 !important; }
}

/* ==========================================================================
   Intégration Astra (articles qui contiennent .mh-article seulement)
   ========================================================================== */
body.single-post:has(.mh-article) #content > .ast-container { max-width: none; padding-left: 0; padding-right: 0; display: block; }
body.single-post:has(.mh-article) #content { padding-top: 0; padding-bottom: 0; }
body.single-post:has(.mh-article) #primary { margin: 0; padding: 0; }
body.single-post:has(.mh-article) .ast-article-single { padding: 0; margin: 0; background: none; }
body.single-post:has(.mh-article) .entry-content > .mh-article,
body.single-post:has(.mh-article) .entry-content { margin: 0; }

/* ── Réglages d'intégration (16/10/2026) ─────────────────────────── */
/* Bandeau soldes collant du site (.mh-soldes) : 69 px mobile, 47 px desktop mesurés le 16/10 */
body:has(.mh-soldes) .mh-article { --mh-entete: 69px; }
@media (min-width: 48rem) { body:has(.mh-soldes) .mh-article { --mh-entete: 47px; } }
/* Photo catalogue avec logo en haut à droite et numéro de page en bas : on les sort du cadre */
.mh-article .mh-ambiance--recadre .mh-ambiance__cadre { aspect-ratio: 5 / 4; }
.mh-article .mh-ambiance--recadre .mh-ambiance__cadre img { object-position: 50% 78%; }
@media (min-width: 48rem) { .mh-article .mh-ambiance--recadre .mh-ambiance__cadre { aspect-ratio: 4 / 3; } }
@media (min-width: 64rem) { .mh-article .mh-ambiance--recadre .mh-ambiance__cadre { aspect-ratio: 3 / 2; } }
.mh-article .mh-quiz__photo img.mh-recadre { scale: 1.3; transform-origin: 30% 72%; }
/* Bloc sombre : les paragraphes héritent du crème du bloc (la règle générale du corps les repeignait en brun) */
.mh-article .mh-corps .mh-soiree :is(p, li, td) { color: inherit; }