/* ==========================================================================
   Lou Gers — compléments des pages intérieures (sept. 2026)
   Chargée APRÈS site.css, uniquement sur les pages qui en ont besoin.
   Réutilise les variables et composants de site.css ; n'écrase rien d'autre.
   Sommaire : 1. Notre histoire · 2. Nos liqueurs (liste + fiches produit)
              3. Fiche technique · 4. Cocktails (galerie 5 colonnes)
              5. Fiche recette · 6. Contact · 7. Pages légales
   ========================================================================== */

/* ---------- 1. Notre histoire ---------- */

.story-page .prose--wide { gap: 1.35rem; }
.story-page .prose--wide p:first-child {
  font-family: var(--serif);
  font-size: clamp(1.3rem, 1.1rem + .6vw, 1.55rem);
  line-height: 1.45;
  color: var(--cream);
}
.story-page__ctas { display: flex; flex-wrap: wrap; gap: .9rem; margin-top: 2.6rem; }
@media (max-width: 699px) {
  .story-page__ctas .btn { width: 100%; }
}

/* ---------- 2a. Nos liqueurs : liste des six références ---------- */

.range__list--six .bottle__img { aspect-ratio: 2 / 3; }
.range__list--six .bottle__img img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; }
.range__list--six .bottle__img--ambiance img { object-position: 50% 22%; }
@media (min-width: 700px) {
  .range__list--six { grid-template-columns: repeat(3, 1fr); gap: 3.5rem clamp(1.4rem, 3vw, 3rem); }
}

/* ---------- 2b. Fiche produit ---------- */

.product {
  max-width: var(--max);
  margin: 0 auto;
  padding: calc(var(--header-h) + env(safe-area-inset-top) + clamp(2.2rem, 4.5vw, 3.5rem)) var(--gutter) 0;
}
.product__grid { display: grid; gap: clamp(2rem, 5vw, 5.5rem); align-items: center; }

.product__media { display: flex; justify-content: center; }
.product__img {
  display: block;
  width: 100%;
  max-width: 17rem;
  aspect-ratio: 2 / 3;
  overflow: hidden;
  background: var(--bg-2);
}
.product__img--tall { aspect-ratio: 941 / 1672; }
.product__img img { width: 100%; height: 100%; object-fit: cover; }

.product__title {
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(2.8rem, 1.8rem + 3.6vw, 5rem);
  line-height: 1;
  color: var(--ivory);
}
.product__tags {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  margin-top: 1.4rem;
}
.product__tags span {
  padding: .38rem .75rem;
  border: 1px solid rgba(210, 187, 134, .38);
  font-size: .66rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--gold-soft);
  white-space: nowrap;
}
.product__lead {
  max-width: 34rem;
  margin-top: 1.6rem;
  font-family: var(--serif);
  font-size: clamp(1.35rem, 1.15rem + .6vw, 1.65rem);
  line-height: 1.35;
  color: var(--cream);
}
.product__text { max-width: 34rem; margin-top: 1rem; font-size: 1.02rem; color: var(--text); }
.product__ctas { display: flex; flex-wrap: wrap; gap: .9rem; margin-top: 2.2rem; }
.product .aside-link { margin-top: 1.8rem; }

@media (min-width: 900px) {
  .product__grid { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); }
  .product__img {
    max-width: none;
    width: auto;
    height: min(calc(100svh - var(--header-h) - 6rem), 44rem);
    min-height: 26rem;
    margin: 0 auto;
  }
}
@media (max-width: 699px) {
  .product__ctas .btn { width: 100%; }
}

/* Autres références (bas de fiche) */
.others {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: .8rem 2rem;
  padding-top: 2rem;
  border-top: 1px solid var(--line);
}
.others__label { font-size: .7rem; letter-spacing: .26em; text-transform: uppercase; color: var(--muted); }
.others a {
  font-family: var(--serif);
  font-size: 1.3rem;
  color: var(--cream);
  text-decoration: none;
  transition: color .3s var(--ease);
}
.others a:hover { color: var(--gold-soft); }

/* ---------- 3. Fiche technique ---------- */

.spec {
  position: relative;
  padding: clamp(1.6rem, 4vw, 3.2rem);
  background:
    radial-gradient(110% 80% at 0% 0%, rgba(210, 187, 134, .09), rgba(210, 187, 134, 0) 60%),
    rgba(236, 227, 208, .02);
  border: 1px solid rgba(210, 187, 134, .3);
}
.spec::before {
  content: "";
  position: absolute;
  inset: 6px;
  border: 1px solid rgba(210, 187, 134, .1);
  pointer-events: none;
}
.spec > * { position: relative; }

.spec__head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1rem 2rem;
  padding-bottom: 1.6rem;
  margin-bottom: clamp(1.6rem, 3vw, 2.4rem);
  border-bottom: 1px solid rgba(210, 187, 134, .22);
}
.spec__head .eyebrow { margin-bottom: .9rem; }
.spec__title { font-size: clamp(1.9rem, 1.4rem + 1.8vw, 2.8rem); }
.spec__dl { padding: .4rem 0; }

.spec__grid { display: grid; gap: 2.2rem clamp(2rem, 5vw, 4.5rem); }
@media (min-width: 900px) {
  .spec__grid { grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); }
}

.spec__facts { margin: 0; border-top: 1px solid var(--line); }
.spec__facts > div {
  display: grid;
  grid-template-columns: 8.5rem 1fr;
  gap: 1rem;
  align-items: baseline;
  padding: .85rem 0;
  border-bottom: 1px solid var(--line);
}
.spec__facts dt { font-size: .66rem; letter-spacing: .24em; text-transform: uppercase; color: var(--gold-soft); }
.spec__facts dd { margin: 0; font-family: var(--serif); font-size: 1.2rem; line-height: 1.3; color: var(--ivory); }

.spec__text { display: grid; gap: 1.8rem; }
.spec__h {
  display: flex;
  align-items: center;
  gap: .9rem;
  margin-bottom: .75rem;
  font-family: var(--sans);
  font-size: .7rem;
  font-weight: 400;
  letter-spacing: .26em;
  text-transform: uppercase;
  color: var(--gold-soft);
}
.spec__h::after { content: ""; flex: 1; height: 1px; background: linear-gradient(90deg, rgba(210, 187, 134, .4), rgba(210, 187, 134, 0)); }
.spec__block p { max-width: 42rem; font-size: 1rem; color: var(--text); }
.spec__block p + p { margin-top: .8rem; }
.spec__profile { margin: 0; display: grid; gap: .7rem; }
.spec__profile > div { display: grid; grid-template-columns: 5.5rem 1fr; gap: 1rem; align-items: baseline; }
.spec__profile dt { font-family: var(--serif); font-size: 1.1rem; color: var(--cream); }
.spec__profile dd { margin: 0; font-size: 1rem; color: var(--text); }
.spec__recipe strong { font-weight: 400; color: var(--cream); }
.spec__source { margin-top: 1.8rem; font-size: .8rem; color: var(--muted); }

.spec--pending { text-align: left; }
.spec--pending .spec__pending {
  font-family: var(--serif);
  font-size: clamp(1.3rem, 1.1rem + .6vw, 1.6rem);
  line-height: 1.4;
  color: var(--cream);
}
.spec--pending .spec__pending + p { margin-top: .8rem; color: var(--muted); }

@media (max-width: 699px) {
  .spec__facts > div { grid-template-columns: 1fr; gap: .25rem; }
  .spec__profile > div { grid-template-columns: 1fr; gap: .15rem; }
  .spec__head { flex-direction: column; align-items: flex-start; }
}

/* ---------- 4. Cocktails : 5 propositions visibles d'un coup d'œil ---------- */

.page-head--compact { padding-top: calc(var(--header-h) + env(safe-area-inset-top) + clamp(1.8rem, 3.5vw, 2.6rem)); }
.page-head--compact .eyebrow { margin-bottom: 1rem; }
.page-head--compact .page-head__title { font-size: clamp(2.4rem, 1.5rem + 3vw, 4rem); }
.page-head--compact .page-head__lead { margin-top: .9rem; font-size: 1.25rem; }
.gallery--five.section--tight { padding-top: clamp(1.6rem, 3vw, 2.2rem); }
.gallery--five .filter { margin-bottom: clamp(1.4rem, 2.5vw, 1.8rem); padding-bottom: .7rem; }

.shots.shots--five { grid-template-columns: 1fr; gap: 3rem; }
@media (min-width: 560px) {
  .shots.shots--five { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2.8rem 1.4rem; }
}
@media (min-width: 900px) {
  .shots.shots--five { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 3rem 1.6rem; }
}
@media (min-width: 1180px) {
  /* 5 colonnes ; la largeur de la grille suit la hauteur d'écran pour que
     les 5 cartes (photo + titre + lien) tiennent dans la fenêtre. */
  .shots.shots--five {
    grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 2rem 1.25rem;
    max-width: max(46rem, calc((100vh - 33.5rem) * 2.814 + 5rem));
    max-width: max(46rem, calc((100svh - 33.5rem) * 2.814 + 5rem));
    margin-inline: auto;
  }
  .shots--five .shot__name { margin-top: .85rem; font-size: 1.3rem; }
  .shots--five .shot__ref { margin: .3rem 0 .6rem; font-size: .6rem; letter-spacing: .22em; }
  .shots--five .shot__hover { padding: 2.4rem 1rem 1rem; font-size: .62rem; letter-spacing: .2em; }
  .shots--five .more { font-size: .64rem; letter-spacing: .2em; }
}

/* ---------- 5. Fiche recette (même esprit que la fiche Abricot Sour de l'accueil) ---------- */

.rc__lead {
  max-width: 36rem;
  margin-top: 1.2rem;
  font-size: 1.05rem;
  line-height: 1.6;
  color: var(--cream);
  opacity: .92;
}
.cocktail .rc__lead + .recipe__facts { margin-top: 1.6rem; }

.rc {
  position: relative;
  margin-top: 2rem;
  padding: 1.4rem 1.5rem 1.6rem;
  background:
    radial-gradient(120% 90% at 0% 0%, rgba(210, 187, 134, .12), rgba(210, 187, 134, 0) 60%),
    rgba(236, 227, 208, .025);
  border: 1px solid rgba(210, 187, 134, .3);
}
.rc::before {
  content: "";
  position: absolute;
  inset: 5px;
  border: 1px solid rgba(210, 187, 134, .1);
  pointer-events: none;
}
.rc > * { position: relative; }

.rc__label {
  display: flex;
  align-items: center;
  gap: .9rem;
  margin: 0 0 .9rem;
  font-size: .7rem;
  font-weight: 500;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--gold);
}
.rc__label::after { content: ""; flex: 1; height: 1px; background: linear-gradient(90deg, rgba(210, 187, 134, .45), rgba(210, 187, 134, 0)); }
.rc__ing + .rc__label, .rc__extra + .rc__label { margin-top: 1.5rem; }

/* Ingrédients — mobile : une ligne par ingrédient */
.rc__ing { display: grid; grid-template-columns: 1fr; gap: .5rem; }
.rc__ing li {
  display: flex;
  align-items: baseline;
  gap: .8rem;
  min-width: 0;
  padding: .6rem .8rem;
  background: rgba(236, 227, 208, .035);
  border-left: 2px solid rgba(213, 162, 73, .6);
}
.rc__qty {
  flex: none;
  width: 3.5rem;
  font-family: var(--serif);
  font-size: 1.7rem;
  line-height: 1;
  font-variant-numeric: lining-nums;
  font-feature-settings: "lnum" 1;
  color: var(--gold);
  white-space: nowrap;
}
.rc__qty abbr { font-size: .55em; letter-spacing: .06em; text-decoration: none; border: 0; }
.rc__name { min-width: 0; font-size: 1rem; line-height: 1.35; color: var(--ivory); }
.rc__nw { white-space: nowrap; }
.rc__link { color: var(--ivory); text-decoration: none; transition: color .2s; }
.rc__link .rc__nw { border-bottom: 1px solid rgba(210, 187, 134, .4); transition: border-color .2s; }
.rc__link .rc__cuvee { color: var(--gold-soft); }
.rc__link:hover { color: var(--gold-soft); }
.rc__link:hover .rc__nw { border-color: var(--gold-soft); }

/* Tablette / ordinateur : petites tuiles, quantité au-dessus */
@media (min-width: 640px) {
  .rc__ing { gap: .6rem; }
  .rc__ing--3, .rc__ing--6 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .rc__ing--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rc__ing li { flex-direction: column; gap: .45rem; padding: .85rem .9rem .95rem; }
  .rc__qty { width: auto; font-size: 1.9rem; }
}
/* Page recette en 2 colonnes (900–1279 px) : colonne de texte plus étroite,
   la recette à 6 ingrédients repasse sur 2 colonnes pour garder Alpha Organic Gin lisible */
@media (min-width: 900px) and (max-width: 1279px) {
  .rc__ing--6 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.rc__extra {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: .3rem 1rem;
  margin-top: .9rem;
  font-size: .95rem;
  color: var(--cream);
}
.rc__extra span {
  font-size: .64rem;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--gold-soft);
}

/* Préparation 01 / 02 / 03 */
.rc__steps { display: grid; gap: .8rem; }
.rc__steps li { display: flex; gap: .8rem; align-items: baseline; }
.rc__num {
  flex: none;
  font-family: var(--serif);
  font-size: 1.3rem;
  line-height: 1;
  font-variant-numeric: lining-nums;
  font-feature-settings: "lnum" 1;
  color: var(--gold);
}
.rc__steps p { font-size: .95rem; line-height: 1.55; color: var(--text); }
@media (min-width: 1100px) {
  .rc__steps { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.3rem; }
}
@media (max-width: 380px) {
  .rc { padding: 1.1rem 1rem 1.2rem; }
  .rc::before { inset: 4px; }
  .rc__qty { width: 3.1rem; font-size: 1.5rem; }
  .rc__nw { white-space: normal; }
}

/* ---------- 6. Contact ---------- */

.contactform { display: grid; gap: 1.6rem 2rem; }
@media (min-width: 700px) {
  .contactform { grid-template-columns: 1fr 1fr; }
  .contactform .field--full { grid-column: 1 / -1; }
}
.contactform .field__opt { margin-left: .4rem; letter-spacing: .12em; text-transform: none; color: var(--muted); }
.contactform .form__status { color: var(--gold-soft); }
.contactform .form__status.is-error { color: #e3b4a0; }
.contact__note { margin-top: 1.4rem; font-size: .88rem; color: var(--muted); }
.contact__note a { color: var(--gold-soft); }
.contact__direct {
  margin-top: 2.4rem;
  padding-top: 1.6rem;
  border-top: 1px solid var(--line);
}
.contact__direct p:first-child { font-size: .68rem; letter-spacing: .26em; text-transform: uppercase; color: var(--gold-soft); }
.contact__mail {
  display: inline-block;
  margin-top: .6rem;
  font-family: var(--serif);
  font-size: clamp(1.35rem, 1.1rem + .8vw, 1.7rem);
  color: var(--ivory);
  text-decoration: none;
  border-bottom: 1px solid rgba(210, 187, 134, .45);
  overflow-wrap: anywhere;
  transition: color .3s, border-color .3s;
}
.contact__mail:hover { color: var(--gold-soft); border-color: var(--gold-soft); }
.contact__side { margin-top: 1rem; font-size: .92rem; color: var(--text); }
.contact__side a { color: var(--gold-soft); }

/* ---------- 7. Pages légales ---------- */

.legal > * { max-width: 50rem; }
.legal__updated { font-size: .8rem; color: var(--muted); }
.legal__block { padding: 2rem 0; border-bottom: 1px solid var(--line); }
.legal__block:first-of-type { padding-top: 1.4rem; }
.legal__block h2 {
  margin-bottom: 1rem;
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(1.5rem, 1.3rem + .7vw, 1.9rem);
  line-height: 1.2;
  color: var(--ivory);
}
.legal__block p, .legal__block li { font-size: 1rem; line-height: 1.7; color: var(--text); }
.legal__block p + p, .legal__block p + ul, .legal__block ul + p { margin-top: .8rem; }
.legal__block ul { display: grid; gap: .45rem; margin-top: .6rem; }
.legal__block ul li { position: relative; padding-left: 1.2rem; }
.legal__block ul li::before { content: ""; position: absolute; left: 0; top: .8em; width: .45rem; height: 1px; background: var(--gold-soft); }
.legal__block a { color: var(--gold-soft); overflow-wrap: anywhere; }
.legal__block strong { font-weight: 400; color: var(--cream); }
.legal__id { display: grid; gap: .1rem; margin: 0; padding: 1rem 1.2rem; border-left: 1px solid rgba(210, 187, 134, .5); background: rgba(236, 227, 208, .025); }
.legal__id div { display: grid; grid-template-columns: 11rem 1fr; gap: 1rem; padding: .35rem 0; }
.legal__id dt { font-size: .68rem; letter-spacing: .2em; text-transform: uppercase; color: var(--gold-soft); padding-top: .2rem; }
.legal__id dd { margin: 0; color: var(--ivory); overflow-wrap: anywhere; }
.legal .todo { font-size: .95rem; }
.legal__health {
  margin-top: 2.2rem;
  font-family: var(--serif);
  font-size: 1.3rem;
  line-height: 1.4;
  color: var(--cream);
}
@media (max-width: 699px) {
  .legal__id div { grid-template-columns: 1fr; gap: .1rem; }
}