/* =====================================================================
   LOU GERS — « Notre histoire » : récit en cinq chapitres (direction artistique, oct. 2026)
   Chargée uniquement par notre-histoire/index.html, après refonte.css.
   Palette du site uniquement (site.css) : noir chaud, crème, ivoire, or, or doux, cuivre.
   Polices du site uniquement : Cormorant Garamond (titres) et Jost (texte).
   Animations : seulement si histoire.js est actif ET sans « réduire les animations ».
   Réversible : restaurer la sauvegarde lou-gers-site_avant-histoire-refonte-DA_2026-10-19.zip.
   ===================================================================== */

/* Ancres (sommaire, fil d'or) : arrêt sous l'en-tête fixe. Repris ici pour que la page ne dépende pas
   de la section 8 de refonte.css (fichier partagé non republié avec cette page). */
html { scroll-padding-top: calc(var(--header-h) + env(safe-area-inset-top) + 1.25rem); }

.hx { overflow-x: clip; }
.hx em { font-style: italic; font-weight: 400; }

/* ---------- Éléments communs ---------- */
.hx-label {
  display: flex; align-items: center; gap: .9rem;
  font-size: .76rem; letter-spacing: .3em; text-transform: uppercase; color: var(--gold-soft);
}
.hx-label span { font-family: var(--serif); font-size: 1.25rem; letter-spacing: .04em; color: var(--gold); }
.hx-label::after { content: ""; width: 3rem; height: 1px; background: var(--gold); opacity: .6; transform-origin: left center; }
.hx-label--center { justify-content: center; }
.hx-label--center::before { content: ""; width: 3rem; height: 1px; background: var(--gold); opacity: .6; transform-origin: right center; }

.hx-title {
  margin-top: 1.1rem; max-width: 15ch;
  font-family: var(--serif); font-weight: 500; font-size: clamp(2.5rem, 1.25rem + 4.4vw, 5.6rem);
  line-height: 1.02; letter-spacing: -.005em; color: var(--ivory); text-wrap: balance;
  scroll-margin-top: 6.75rem;
}
.hx-title em { color: var(--gold-soft); }

/* Grands numéros gravés au trait doré (décor) */
.hx-giant {
  position: absolute; z-index: -1; top: clamp(1.5rem, 4vw, 3rem);
  left: max(calc(var(--gutter) - .06em), calc((100% - var(--max)) / 2 + var(--gutter) - .06em));
  font-family: var(--serif); font-weight: 400; font-size: clamp(8.5rem, 5rem + 15vw, 21rem); line-height: .8;
  color: rgba(210, 187, 134, .07); font-variant-numeric: lining-nums;
  pointer-events: none; user-select: none; will-change: transform;
}
@supports (-webkit-text-stroke: 1px black) {
  .hx-giant { color: transparent; -webkit-text-stroke: 1px rgba(210, 187, 134, .3); }
}
.hx-giant--right { left: auto; right: max(var(--gutter), calc((100% - var(--max)) / 2 + var(--gutter))); }

/* Chapitres : contenu aligné sur la grille du site, fonds possibles en pleine largeur */
.hx-ch {
  position: relative; isolation: isolate;
  padding: clamp(5rem, 10vw, 9rem) max(var(--gutter), calc((100% - var(--max)) / 2 + var(--gutter)));
}

/* ---------- Ouverture ---------- */
.hx-hero {
  position: relative; isolation: isolate; overflow: hidden; overflow: clip;
  display: flex; flex-direction: column; justify-content: flex-end;
  min-height: min(100svh, 54rem);
  padding: calc(var(--header-h) + env(safe-area-inset-top) + clamp(2.5rem, 6vw, 5rem)) max(var(--gutter), calc((100% - var(--max)) / 2 + var(--gutter))) clamp(2rem, 4vw, 3rem);
  background:
    radial-gradient(55% 60% at 80% 35%, rgba(210, 187, 134, .1), rgba(210, 187, 134, 0) 70%),
    linear-gradient(180deg, rgba(13, 14, 12, 0) 60%, var(--bg-2) 100%);
}
.hx-hero__lion {
  position: absolute; z-index: -1; right: -4vw; top: 52%; transform: translateY(-50%);
  width: min(62vw, 54rem); height: auto; aspect-ratio: 963 / 619; color: var(--gold); opacity: .08;
}
.hx-hero__inner { position: relative; }
.hx-hero .crumbs { margin-bottom: clamp(1.4rem, 3vw, 2.4rem); }
.hx-hero .eyebrow { font-size: .76rem; }
.hx-hero__title {
  margin-top: 1.2rem; max-width: 13ch;
  font-family: var(--serif); font-weight: 500; font-size: clamp(3rem, 1.2rem + 6.4vw, 7.4rem);
  line-height: .98; letter-spacing: -.01em; color: var(--ivory); text-wrap: balance;
}
.hx-hero__title em { display: block; color: var(--gold-soft); }
.hx-hero__lead {
  max-width: 32rem; margin-top: clamp(1.4rem, 2.6vw, 2rem);
  font-family: var(--serif); font-size: clamp(1.3rem, 1.1rem + .7vw, 1.7rem); line-height: 1.4; color: var(--cream);
}

/* Sommaire */
.hx-toc { position: relative; display: grid; margin-top: clamp(2.6rem, 6vw, 4.5rem); border-top: 1px solid rgba(210, 187, 134, .35); }
.hx-toc a {
  position: relative; display: flex; align-items: baseline; gap: 1rem; min-height: 3.2rem; padding: .85rem 0;
  border-bottom: 1px solid var(--line); text-decoration: none; color: var(--text);
  transition: color .4s var(--ease);
}
.hx-toc__n { font-family: var(--serif); font-size: 1.5rem; line-height: 1; color: var(--gold); transition: transform .4s var(--ease); }
.hx-toc__t { font-size: .76rem; letter-spacing: .24em; text-transform: uppercase; }
.hx-toc a::after {
  content: ""; position: absolute; left: 0; bottom: -1px; width: 100%; height: 1px; background: var(--gold-soft);
  transform: scaleX(0); transform-origin: left center; transition: transform .5s var(--ease);
}
.hx-toc a:hover, .hx-toc a:focus-visible { color: var(--ivory); }
.hx-toc a:hover::after, .hx-toc a:focus-visible::after { transform: scaleX(1); }
.hx-toc a:hover .hx-toc__n { transform: translateY(-3px); }
@media (min-width: 900px) {
  .hx-toc { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .hx-toc a { flex-direction: column; gap: .7rem; padding: 1.3rem 1.2rem 1.3rem 0; border-bottom: 0; }
  .hx-toc li + li a { padding-left: 1.2rem; border-left: 1px solid var(--line); }
  .hx-toc a::after { bottom: auto; top: -1px; }
  .hx-toc__n { font-size: 2.1rem; }
}

/* ---------- Fil d'or : barre des chapitres (mobile, tablette) ---------- */
.hx-story { position: relative; }
.hx-rail {
  position: sticky; top: calc(var(--header-h) + env(safe-area-inset-top)); z-index: 15;
  height: 3.25rem; margin-bottom: -3.25rem;
  padding: 0 var(--gutter);
  background: rgba(13, 14, 12, .94); border-bottom: 1px solid var(--line);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  transition: opacity .4s var(--ease), visibility .4s, background-color .4s var(--ease);
}
.hx-rail-ready .hx-rail:not(.is-on) { opacity: 0; visibility: hidden; }
.hx-rail__list { display: flex; align-items: stretch; height: 100%; }
.hx-rail__list a {
  display: flex; align-items: center; gap: .6rem; height: 100%; min-width: 2.6rem; padding: 0 .3rem;
  text-decoration: none; color: var(--muted); transition: color .3s var(--ease);
}
.hx-rail__n { font-family: var(--serif); font-size: 1.2rem; }
.hx-rail__t { display: none; font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; white-space: nowrap; }
.hx-rail__list a[aria-current="step"] { color: var(--gold-soft); padding-right: .8rem; }
.hx-rail__list a[aria-current="step"] .hx-rail__n { color: var(--gold); }
.hx-rail__list a:hover { color: var(--ivory); }
@media (min-width: 360px) { .hx-rail__list a[aria-current="step"] .hx-rail__t { display: inline; } }
.hx-rail__bar { position: absolute; left: 0; right: 0; bottom: -1px; height: 1px; }
.hx-rail__bar span {
  display: block; width: 100%; height: 100%; background: var(--gold);
  transform: scaleX(var(--hx-p, 0)); transform-origin: left center;
}

/* Grand écran : rail vertical discret dans la marge gauche */
@media (min-width: 1400px) {
  .hx-rail {
    top: calc(50svh - 7.5rem); height: 0; margin: 0; padding: 0;
    background: none; border: 0; -webkit-backdrop-filter: none; backdrop-filter: none;
  }
  .hx-rail__list {
    position: absolute; left: 3rem; top: 0;
    flex-direction: column; gap: .35rem; height: auto;
  }
  .hx-rail__list a { position: relative; height: 2.75rem; min-width: 2.75rem; justify-content: center; padding: 0; }
  .hx-rail__n { font-size: 1.05rem; }
  .hx-rail__list a .hx-rail__t,
  .hx-rail__list a[aria-current="step"] .hx-rail__t {
    display: block; position: absolute; left: 100%; top: 50%; margin-left: .4rem; padding: .35rem .6rem;
    background: rgba(13, 14, 12, .94); border: 1px solid var(--line); color: var(--cream);
    opacity: 0; visibility: hidden; transform: translate(-4px, -50%); pointer-events: none;
    transition: opacity .3s var(--ease), transform .3s var(--ease), visibility .3s;
  }
  .hx-rail__list a:hover .hx-rail__t, .hx-rail__list a:focus-visible .hx-rail__t { opacity: 1; visibility: visible; transform: translate(0, -50%); }
  .hx-rail__list a[aria-current="step"]::before {
    content: ""; position: absolute; left: -.55rem; top: 50%; width: 5px; height: 5px; margin-top: -2.5px;
    border-radius: 50%; background: var(--gold);
  }
  .hx-rail__bar {
    left: 3rem; right: auto; bottom: auto; top: 0;
    width: 1px; height: 15.5rem; margin-left: -.55rem; background: var(--line);
  }
  .hx-rail__bar span { transform: scaleY(var(--hx-p, 0)); transform-origin: center top; }
  /* Sur le chapitre clair (04), le rail passe en sombre */
  .hx-rail.on-light .hx-rail__list a { color: rgba(13, 14, 12, .55); }
  .hx-rail.on-light .hx-rail__list a[aria-current="step"] .hx-rail__n { color: var(--bg); }
  .hx-rail.on-light .hx-rail__bar { background: rgba(13, 14, 12, .18); }
  .hx-title { scroll-margin-top: 2.5rem; }
}

/* ---------- 01 — La famille ---------- */
.hx-family__head { position: relative; padding-top: clamp(5.5rem, 3rem + 10vw, 12rem); }
.hx-family__text { margin-top: clamp(2rem, 4vw, 2.6rem); max-width: 38rem; }
.hx-family__text p { font-size: 1.06rem; line-height: 1.75; color: rgba(245, 241, 232, .86); }
.hx-family__text p + p, .hx-family__text .hx-trio + p { margin-top: 1.1rem; }
.hx-lettrine { font-family: var(--serif); font-size: clamp(1.3rem, 1.15rem + .6vw, 1.6rem) !important; line-height: 1.45 !important; color: var(--cream) !important; }
.hx-family__text em { color: var(--gold-soft); }
.hx-lettrine::first-letter {
  float: left; margin: .08em .14em 0 0;
  font-family: var(--serif); font-weight: 500; font-size: 3.6em; line-height: .78; color: var(--gold);
}
.hx-trio { display: flex; flex-wrap: wrap; gap: .4rem 0; margin: 1.4rem 0 1.5rem; padding: 1.1rem 0; border-top: 1px solid rgba(210, 187, 134, .3); border-bottom: 1px solid rgba(210, 187, 134, .3); }
.hx-trio li { display: inline-flex; align-items: center; font-family: var(--serif); font-style: italic; font-size: clamp(1.25rem, 1.1rem + .6vw, 1.55rem); color: var(--ivory); }
.hx-trio li + li::before { content: ""; width: 5px; height: 5px; margin: 0 1rem; background: var(--gold); transform: rotate(45deg); }
@media (min-width: 960px) {
  .hx-family { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); column-gap: clamp(3rem, 7vw, 8rem); align-items: end; }
  .hx-family__text { margin-top: 0; padding-bottom: .4rem; }
}

/* ---------- 02 — Le Gers ---------- */
.hx-gers {
  overflow: hidden; overflow: clip; text-align: center;
  background: radial-gradient(60% 70% at 50% 50%, rgba(210, 187, 134, .08), rgba(210, 187, 134, 0) 70%), var(--bg-2);
  border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
}
.hx-gers::before, .hx-gers::after {
  content: ""; position: absolute; left: 50%; width: 1px; height: clamp(2.5rem, 6vw, 4.5rem); background: linear-gradient(var(--gold), rgba(213, 162, 73, 0));
}
.hx-gers::before { top: 0; }
.hx-gers::after { bottom: 0; transform: rotate(180deg); }
.hx-gers__word {
  position: absolute; z-index: -1; left: 50%; top: 50%; transform: translate(-50%, var(--hx-ty, -50%));
  font-family: var(--serif); font-weight: 500; font-size: clamp(5.5rem, 25vw, 25rem); line-height: 1;
  letter-spacing: .04em; text-transform: uppercase; white-space: nowrap;
  color: rgba(210, 187, 134, .05); pointer-events: none; user-select: none;
}
@supports (-webkit-text-stroke: 1px black) { .hx-gers__word { color: transparent; -webkit-text-stroke: 1px rgba(210, 187, 134, .2); } }
.hx-gers__inner { position: relative; max-width: 50rem; margin: 0 auto; }
.hx-gers .hx-title { margin-left: auto; margin-right: auto; }
.hx-gers__places { margin-top: 1.4rem; font-size: .78rem; letter-spacing: .3em; text-transform: uppercase; color: var(--gold-soft); }
.hx-gers__places span { margin: 0 .6rem; color: var(--gold); }
.hx-gers__quote { margin: clamp(2rem, 4vw, 2.8rem) auto 0; max-width: 34rem; }
.hx-gers__quote p {
  font-family: var(--serif); font-style: italic; font-size: clamp(1.7rem, 1.1rem + 2.4vw, 3rem); line-height: 1.22; color: var(--ivory); text-wrap: balance;
}
.hx-gers__quote::before { content: "“"; display: block; height: .5em; font-family: var(--serif); font-size: 4rem; line-height: 1; color: var(--gold); }
.hx-gers__text { max-width: 30rem; margin: clamp(1.6rem, 3vw, 2.2rem) auto 0; font-size: 1.06rem; line-height: 1.7; color: rgba(245, 241, 232, .86); }

/* ---------- 03 — Les recettes ---------- */
.hx-recipe__head { position: relative; padding-top: clamp(4.5rem, 9vw, 9.5rem); }
@media (min-width: 900px) { .hx-recipe__head { padding-top: clamp(3rem, 6vw, 6rem); } }
.hx-recipe__lead { max-width: 34rem; margin-top: clamp(1.1rem, 2.2vw, 1.5rem); font-size: 1.06rem; line-height: 1.7; color: rgba(245, 241, 232, .86); }
.hx-formula { display: grid; gap: 2.6rem; margin-top: clamp(2.6rem, 5vw, 4rem); counter-reset: hx; }
.hx-formula li { position: relative; padding-top: 1.5rem; border-top: 1px solid rgba(210, 187, 134, .35); }
.hx-formula li + li::before {
  content: "+"; position: absolute; left: 50%; top: -2.15rem; transform: translateX(-50%);
  font-family: var(--serif); font-size: 2rem; line-height: 1; color: var(--gold);
}
.hx-formula__t { font-family: var(--serif); font-weight: 500; font-size: clamp(1.6rem, 1.3rem + 1vw, 2.2rem); line-height: 1.12; color: var(--ivory); }
.hx-formula p { margin-top: .7rem; max-width: 22rem; font-size: 1.02rem; line-height: 1.65; color: rgba(245, 241, 232, .86); }
@media (min-width: 900px) {
  .hx-formula { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 clamp(3rem, 6vw, 6rem); }
  .hx-formula li + li::before { left: calc(-1 * clamp(3rem, 6vw, 6rem) / 2); top: 1.2rem; }
}
.hx-five { margin-top: clamp(3.5rem, 7vw, 5.5rem); }
.hx-five__intro {
  display: flex; align-items: center; gap: 1.2rem;
  font-size: .78rem; letter-spacing: .28em; text-transform: uppercase; color: var(--gold-soft); text-align: center;
}
.hx-five__intro::before, .hx-five__intro::after { content: ""; flex: 1; height: 1px; background: rgba(210, 187, 134, .35); }
.hx-five__list { margin-top: 1.4rem; }
.hx-five__list a {
  position: relative; display: grid; gap: .25rem; padding: 1.1rem 0; border-bottom: 1px solid var(--line);
  text-decoration: none;
}
.hx-five__name { font-family: var(--serif); font-weight: 500; font-size: 1.75rem; line-height: 1.1; color: var(--ivory); transition: color .35s var(--ease); }
.hx-five__note { font-size: .95rem; line-height: 1.5; color: rgba(245, 241, 232, .74); }
.hx-five__list a::after { content: "→"; position: absolute; right: 0; top: 1.3rem; color: var(--gold-soft); transition: transform .35s var(--ease); }
.hx-five__list a:hover .hx-five__name, .hx-five__list a:focus-visible .hx-five__name { color: var(--gold-soft); }
.hx-five__list a:hover::after { transform: translateX(4px); }
@media (min-width: 900px) {
  .hx-five__list { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .hx-five__list a { height: 100%; align-content: start; padding: 1.6rem 1.4rem 2.6rem; border-bottom: 0; }
  .hx-five__list li + li a { border-left: 1px solid var(--line); }
  .hx-five__list li:first-child a { padding-left: 0; }
  .hx-five__list a::before {
    content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px; background: var(--gold-soft);
    transform: scaleX(0); transform-origin: left center; transition: transform .5s var(--ease);
  }
  .hx-five__list a:hover::before, .hx-five__list a:focus-visible::before { transform: scaleX(1); }
  .hx-five__list a::after { left: 1.4rem; right: auto; top: auto; bottom: 1rem; }
  .hx-five__list li:first-child a::after { left: 0; }
}

/* ---------- 04 — Le geste : chapitre en négatif, beige champagne « papier naturel » ---------- */
.hx-gesture {
  --hx-champagne: #d8caac;          /* beige champagne, plus chaud et moins lumineux que le crème */
  --hx-filet: rgba(184, 121, 74, .5); /* filets : cuivre du site, adouci */
  color: var(--bg); text-align: center;
  background:
    radial-gradient(65% 55% at 50% 42%, rgba(236, 227, 208, .4), rgba(236, 227, 208, 0) 72%),
    linear-gradient(180deg, #dbceb1 0%, var(--hx-champagne) 55%, #d3c4a4 100%);
}
.hx-ch.hx-gesture { padding-top: clamp(4rem, 7vw, 6.25rem); padding-bottom: clamp(4rem, 7vw, 6.25rem); }
.hx-gesture::before {
  content: ""; position: absolute; inset: clamp(.8rem, 2vw, 1.4rem); z-index: -1; pointer-events: none;
  border: 1px solid rgba(184, 121, 74, .6); outline: 1px solid rgba(184, 121, 74, .28); outline-offset: -6px;
}
/* Lion officiel en filigrane : derrière le texte, très faible opacité */
.hx-gesture__lion {
  position: absolute; z-index: -1; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: min(86%, 64rem); height: auto; aspect-ratio: 963 / 619;
  color: var(--bg); opacity: .05; pointer-events: none;
}
.hx-gesture__inner { position: relative; max-width: 62rem; margin: 0 auto; }
.hx-gesture .hx-label { color: var(--bg); }
.hx-gesture .hx-label span { color: var(--copper); }
.hx-gesture .hx-label::before, .hx-gesture .hx-label::after { background: var(--copper); opacity: .8; }
.hx-gesture .hx-title { margin-left: auto; margin-right: auto; max-width: 16ch; color: var(--bg); }
.hx-gesture .hx-title em { color: var(--bg); }
.hx-gesture .hx-title { max-width: 19ch; }
/* « artisanales » : italique souligné d'un fin filet doré */
.hx-gesture__key { padding-bottom: .04em; background: linear-gradient(var(--gold), var(--gold)) 0 94% / 100% 2px no-repeat; }
.hx-gesture__text { max-width: 40rem; margin: clamp(1.1rem, 2.4vw, 1.6rem) auto 0; font-family: var(--serif); font-size: clamp(1.25rem, 1.12rem + .5vw, 1.5rem); line-height: 1.5; color: rgba(13, 14, 12, .88); }

/* Les trois engagements : filets dorés, numéros cuivrés, intitulés en serif */
.hx-gesture__marks {
  position: relative; display: grid; max-width: 62rem; margin: clamp(2rem, 4vw, 2.8rem) auto 0;
  border-top: 1px solid var(--hx-filet); border-bottom: 1px solid var(--hx-filet);
}
.hx-gesture__marks::before {
  content: ""; position: absolute; left: 50%; top: -4.5px; width: 8px; height: 8px; margin-left: -4px;
  background: var(--hx-champagne); border: 1px solid var(--copper); transform: rotate(45deg);
}
.hx-gesture__marks li { display: flex; flex-direction: column; align-items: center; padding: 1.25rem .8rem 1.35rem; }
.hx-gesture__marks li + li { border-top: 1px solid rgba(184, 121, 74, .3); }
.hx-gesture__num { font-family: var(--serif); font-style: italic; font-size: 1.35rem; line-height: 1; color: var(--copper); }
.hx-gesture__num::after { content: ""; display: block; width: 1.6rem; height: 1px; margin: .7rem auto .75rem; background: var(--copper); opacity: .7; }
.hx-gesture__mark { font-family: var(--serif); font-weight: 500; font-size: clamp(1.45rem, 1.2rem + .7vw, 1.75rem); line-height: 1.15; color: var(--bg); text-wrap: balance; }
@media (min-width: 700px) {
  .hx-gesture__marks { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .hx-gesture__marks li { padding: 1.6rem 1rem 1.7rem; }
  .hx-gesture__marks li + li { border-top: 0; border-left: 1px solid rgba(184, 121, 74, .3); }
}
@media (max-width: 699px) {
  .hx-gesture__lion { width: 100%; top: 50%; }
}

/* ---------- 05 — La dégustation : trois arches ---------- */
.hx-serve { display: flex; flex-direction: column; }
.hx-serve__head { position: relative; order: 0; padding-top: clamp(5.5rem, 3rem + 10vw, 12rem); }
.hx-serve__lead { max-width: 34rem; margin-top: clamp(1.2rem, 2.4vw, 1.6rem); font-size: 1.06rem; line-height: 1.7; color: rgba(245, 241, 232, .86); }
.hx-arches { order: 2; display: grid; gap: 1rem; margin-top: clamp(2.6rem, 5vw, 4rem); }
.hx-arch {
  position: relative; display: flex; flex-direction: column; align-items: center; text-align: center;
  padding: clamp(3rem, 5vw, 4.2rem) 1.6rem 2.2rem;
  border: 1px solid rgba(210, 187, 134, .4); border-radius: 999px 999px 0 0;
  background: linear-gradient(180deg, rgba(210, 187, 134, .07), rgba(210, 187, 134, 0) 70%);
  transition: border-color .5s var(--ease), transform .5s var(--ease);
}
.hx-arch::before {
  content: ""; position: absolute; inset: .45rem .45rem 0; border: 1px solid rgba(210, 187, 134, .14); border-bottom: 0;
  border-radius: 999px 999px 0 0; pointer-events: none;
}
.hx-arch:hover { border-color: var(--gold-soft); transform: translateY(-4px); }
.hx-arch__moment { font-size: .76rem; letter-spacing: .26em; text-transform: uppercase; color: var(--gold-soft); }
.hx-arch__t { margin-top: .9rem; font-family: var(--serif); font-style: italic; font-weight: 400; font-size: clamp(2.1rem, 1.6rem + 1.4vw, 2.8rem); line-height: 1; color: var(--ivory); }
.hx-arch__t::after { content: ""; display: block; width: 2rem; height: 1px; margin: 1.1rem auto 0; background: var(--gold); opacity: .7; }
.hx-arch__text { margin-top: 1.1rem; max-width: 16rem; font-size: 1rem; line-height: 1.6; color: rgba(245, 241, 232, .86); }
.hx-arch__text a { color: var(--gold-soft); }
.hx-arch__text a:hover, .hx-arch__text a:focus-visible { color: var(--ivory); }
@media (min-width: 700px) { .hx-arches { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(1rem, 2vw, 1.6rem); } }

/* ---------- Conclusion ---------- */
.hx-end {
  position: relative; isolation: isolate; text-align: center;
  padding: clamp(4rem, 8vw, 7rem) var(--gutter) clamp(3rem, 5vw, 4rem);
  background: radial-gradient(45% 55% at 50% 40%, rgba(210, 187, 134, .1), rgba(210, 187, 134, 0) 70%);
}
.hx-end::before { content: ""; position: absolute; left: 50%; top: 0; width: 1px; height: clamp(2.5rem, 6vw, 4.5rem); background: linear-gradient(var(--gold), rgba(213, 162, 73, 0)); }
.hx-end__inner { max-width: 52rem; margin: 0 auto; }
.hx-end__lion { display: block; width: 5.4rem; height: 3.5rem; margin: 0 auto 1.6rem; color: var(--gold); }
.hx-end__quote {
  font-family: var(--serif); font-weight: 500; font-size: clamp(2.5rem, 1.3rem + 4.4vw, 5.4rem); line-height: 1.02; color: var(--ivory); text-wrap: balance;
}
.hx-end__quote em { display: block; color: var(--gold-soft); }
.hx-end__ctas { display: grid; gap: .9rem; margin-top: clamp(2.2rem, 4vw, 3rem); }
@media (min-width: 600px) { .hx-end__ctas { display: inline-grid; grid-template-columns: repeat(2, minmax(15rem, 1fr)); } }
.hx-end__more { margin-top: 1.2rem; }
.hx-end__more .more { min-height: 2.75rem; font-size: .76rem; }

/* ---------- Photos du shooting (à venir) : actives seulement si une <figure class="hx-media"> est ajoutée ---------- */
.hx-media { margin: clamp(2rem, 4vw, 3rem) 0 0; min-width: 0; }
.hx-media img { display: block; width: 100%; height: auto; object-fit: cover; background: var(--bg-2); }
.hx-family > .hx-media img { aspect-ratio: 3 / 4; }
.hx-recipe > .hx-media img, .hx-gesture > .hx-media img { aspect-ratio: 16 / 9; }
.hx-serve > .hx-media { order: 1; }
.hx-serve > .hx-media img { aspect-ratio: 21 / 9; }
.hx-gers > .hx-media { position: absolute; inset: 0; z-index: -2; margin: 0; }
.hx-gers > .hx-media img { height: 100%; opacity: .32; }
.hx-gers > .hx-media::after { content: ""; position: absolute; inset: 0; background: radial-gradient(70% 70% at 50% 50%, rgba(20, 21, 18, .55), var(--bg-2)); }
@media (min-width: 960px) {
  .hx-family:has(> .hx-media) { grid-template-columns: minmax(0, 4fr) minmax(0, 5fr) minmax(0, 3fr); }
  .hx-family > .hx-media { margin: 0; align-self: end; }
  .hx-gesture:has(> .hx-media) { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: clamp(2.5rem, 5vw, 5rem); align-items: center; text-align: left; }
  .hx-gesture:has(> .hx-media) .hx-label--center { justify-content: flex-start; }
  .hx-gesture:has(> .hx-media) .hx-label--center::before { display: none; }
  .hx-gesture:has(> .hx-media) .hx-title, .hx-gesture:has(> .hx-media) .hx-gesture__text { margin-left: 0; }
  .hx-gesture > .hx-media { margin: 0; }
  .hx-gesture > .hx-media img { aspect-ratio: 4 / 5; }
}

/* Mobile et tablette : le grand mot « Gers » se pose sous le texte, sans le recouvrir */
@media (max-width: 899px) {
  .hx-ch.hx-gers { padding-bottom: calc(26vw + 3rem); }
  .hx-gers__word { top: auto; bottom: 1.2rem; --hx-ty: 0; font-size: 32vw; }
  .hx-gers::after { display: none; }
}

/* ---------- Mobile : une vraie lecture verticale ---------- */
@media (max-width: 699px) {
  .hx-hero { min-height: auto; }
  /* Lion d'ouverture : entièrement visible (tête, queue, pattes), discret, dans l'angle supérieur droit,
     derrière le texte ; jamais coupé par le bord de l'écran */
  .hx-hero__lion { right: var(--gutter); top: calc(var(--header-h) + env(safe-area-inset-top) + 1.1rem); transform: none; width: min(56vw, 15rem); opacity: .07; }
  .hx-hero__title { font-size: clamp(2.4rem, 10.6vw, 3.1rem); }
  .hx-hero__lead { font-size: 1.24rem; }
  .hx-ch { padding-top: 5.2rem; padding-bottom: 4.2rem; }
  .hx-title { font-size: clamp(2rem, 8.6vw, 2.5rem); }
  .hx-giant { font-size: 7rem; top: 3.4rem; }
  /* Numéro affiché une seule fois : le grand numéro gravé suffit (le petit reste lu par les lecteurs d'écran) */
  .hx-ch:has(> .hx-giant) .hx-label span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .hx-family__head, .hx-recipe__head, .hx-serve__head { padding-top: 5.4rem; }
  .hx-trio { flex-direction: column; gap: .5rem; }
  .hx-trio li::before, .hx-trio li + li::before { content: ""; width: 5px; height: 5px; margin: 0 .9rem 0 0; background: var(--gold); transform: rotate(45deg); }
  .hx-gers__places { letter-spacing: .22em; }
  .hx-end__quote { font-size: clamp(2.3rem, 10vw, 2.9rem); }

  /* ---- Arches de dégustation : trois côte à côte, titre seul, description dans un panneau (histoire.js) ---- */
  .hx-serve-ready .hx-arches { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(.4rem, 2vw, .7rem); margin-top: 2.2rem; }
  .hx-serve-ready .hx-arch { justify-content: center; min-height: clamp(7.4rem, 34vw, 9.2rem); padding: 1.9rem .3rem 1.15rem; }
  .hx-serve-ready .hx-arch::before { inset: .3rem .3rem 0; }
  .hx-serve-ready .hx-arch:hover { transform: none; }
  .hx-serve-ready .hx-arch__moment, .hx-serve-ready .hx-arch__text { display: none; }
  .hx-serve-ready .hx-arch__t { margin-top: 0; font-size: clamp(1.05rem, 4.6vw, 1.35rem); line-height: 1.12; text-wrap: balance; }
  .hx-serve-ready .hx-arch__t::after { width: 1.1rem; margin-top: .7rem; transition: width .4s var(--ease), opacity .4s var(--ease); }
  /* Toute l'arche est la zone tactile (≥ 7 rem de haut) */
  .hx-serve-ready .hx-arch__btn { cursor: pointer; -webkit-tap-highlight-color: transparent; }
  .hx-serve-ready .hx-arch__btn::after { content: ""; position: absolute; inset: 0; border-radius: 999px 999px 0 0; }
  .hx-serve-ready .hx-arch__btn:focus-visible::after { outline: 1px solid var(--gold-soft); outline-offset: 3px; }
  /* État actif : bordure dorée accentuée, léger halo, filet élargi */
  .hx-serve-ready .hx-arch.is-active {
    border-color: var(--gold-soft);
    background: linear-gradient(180deg, rgba(210, 187, 134, .16), rgba(210, 187, 134, .02) 78%);
  }
  .hx-serve-ready .hx-arch.is-active::before { border-color: rgba(210, 187, 134, .3); }
  .hx-serve-ready .hx-arch.is-active .hx-arch__t::after { width: 1.8rem; opacity: 1; }
  .hx-serve-ready .hx-serve__hint { display: block; }
  .hx-serve-ready .hx-serve__panel:not([hidden]) { display: block; }
}

/* Indication et panneau de description : uniquement sur téléphone, avec JavaScript */
.hx-serve__hint, .hx-serve__panel { display: none; order: 3; }
.hx-serve__hint { margin-top: .9rem; font-size: .74rem; letter-spacing: .1em; text-transform: uppercase; text-align: center; color: var(--muted); text-wrap: balance; }
.hx-serve__panel {
  position: relative; margin-top: 1rem; padding: 1.25rem 1.2rem 1.35rem; text-align: center;
  border: 1px solid rgba(210, 187, 134, .4);
  background: linear-gradient(180deg, rgba(210, 187, 134, .08), rgba(210, 187, 134, .02));
}
/* Petite pointe dorée dirigée vers l'arche sélectionnée */
.hx-serve__panel::before {
  content: ""; position: absolute; top: -6px; left: var(--hx-caret, 50%); width: 10px; height: 10px; margin-left: -5px;
  background: var(--bg); border-top: 1px solid rgba(210, 187, 134, .55); border-left: 1px solid rgba(210, 187, 134, .55); transform: rotate(45deg);
}
.hx-serve__pmoment { font-size: .76rem; letter-spacing: .26em; text-transform: uppercase; color: var(--gold-soft); }
.hx-serve__ptitle { margin-top: .5rem; font-family: var(--serif); font-style: italic; font-size: 1.6rem; line-height: 1.1; color: var(--ivory); }
.hx-serve__ptext { margin-top: .55rem; font-size: 1rem; line-height: 1.6; color: rgba(245, 241, 232, .88); }
.hx-serve__ptext a { color: var(--gold-soft); }
.hx-serve__ptext a:hover, .hx-serve__ptext a:focus-visible { color: var(--ivory); }
/* Ordinateur : les arches restent des titres, sans comportement de bouton */
.hx-arch__btn { all: unset; }
.hx-arch__btn:focus-visible { outline: 1px solid var(--gold-soft); outline-offset: 3px; }
@media (prefers-reduced-motion: no-preference) {
  .hx-serve__panel.is-opening { animation: hx-panel .35s var(--ease) both; }
  @keyframes hx-panel { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
}

/* ---------- Apparition au défilement (classes posées par histoire.js) ---------- */
@media (prefers-reduced-motion: no-preference) {
  .hx-anim .hx-rv {
    opacity: 0; transform: translateY(26px);
    transition: opacity 1s var(--ease), transform 1.1s var(--ease);
    transition-delay: calc(var(--d, 0) * 90ms);
  }
  .hx-anim .hx-title.hx-rv { clip-path: inset(0 0 100% 0); transition-property: opacity, transform, clip-path; }
  .hx-anim .hx-label.hx-rv::after, .hx-anim .hx-label.hx-rv::before { transform: scaleX(0); transition: transform .9s var(--ease) .35s; }
  .hx-anim .hx-giant, .hx-anim .hx-gers__word { opacity: 0; transition: opacity 1.6s var(--ease); }
  .hx-anim .hx-gers__word { scale: .94; transition: opacity 1.6s var(--ease), scale 1.8s var(--ease); }
  .hx-anim .is-shown .hx-rv { opacity: 1; transform: none; }
  .hx-anim .is-shown .hx-title.hx-rv { clip-path: inset(0 0 -20% 0); }
  .hx-anim .is-shown .hx-label.hx-rv::after, .hx-anim .is-shown .hx-label.hx-rv::before { transform: none; }
  .hx-anim .is-shown .hx-giant { opacity: 1; }
  .hx-anim .hx-gesture__lion { opacity: 0; transition: opacity 1.8s var(--ease) .2s; }
  .hx-anim .is-shown .hx-gesture__lion { opacity: .05; }
  .hx-anim .is-shown .hx-gers__word { opacity: 1; scale: 1; }
  .hx-anim .is-instant .hx-rv, .hx-anim .is-instant .hx-giant, .hx-anim .is-instant .hx-gesture__lion, .hx-anim-init .hx-gesture__lion, .hx-anim .is-instant .hx-gers__word { transition: none !important; }
  .hx-anim-init .hx-rv, .hx-anim-init .hx-giant, .hx-anim-init .hx-gers__word, .hx-anim-init .hx-label::after, .hx-anim-init .hx-label::before { transition: none !important; }
}
@media (prefers-reduced-motion: reduce) {
  .hx-arch, .hx-toc a, .hx-toc__n, .hx-five__list a::before, .hx-rail { transition: none; }
  .hx-arch:hover { transform: none; }
}