/* =====================================================================
   LOU GERS — finitions (phase 2, oct. 2026)
   Chargée APRÈS site.css / accueil-maj.css / pages-maj.css.
   Retouches ciblées : aucune nouvelle couleur, aucune nouvelle police.
   Pour revenir en arrière : retirer le <link> vers ce fichier.
   ===================================================================== */

/* ---------- Accueil : héros ---------- */
.hero__facts {
  display: flex; flex-wrap: wrap; gap: .6rem 1.6rem;
  margin-top: 2.2rem; padding-top: 1.4rem;
  border-top: 1px solid var(--line);
  max-width: 36rem;
}
.hero__facts li {
  display: inline-flex; align-items: center; gap: .7rem;
  font-size: .7rem; letter-spacing: .2em; text-transform: uppercase; color: var(--cream);
}
.hero__facts li::before { content: ""; width: 6px; height: 6px; transform: rotate(45deg); background: var(--gold); flex: none; }
@media (min-width: 700px) {
  .hero__facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; max-width: 38rem; }
  .hero__facts li { align-items: flex-start; line-height: 1.55; letter-spacing: .18em; }
  .hero__facts li::before { margin-top: .42em; }
  .hero__facts li + li { padding-left: 1.2rem; border-left: 1px solid rgba(210, 187, 134, .3); }
  .hero__facts li:not(:last-child) { padding-right: 1.2rem; }
}
.hero__lead { text-wrap: balance; }
@media (max-width: 699px) {
  .hero__facts { flex-direction: column; gap: .55rem; margin-top: 1.8rem; }
}

/* ---------- Accueil : bandeau Terroir gersois ---------- */
.terroir__inner {
  position: relative; text-align: center;
  padding: clamp(3rem, 7vw, 5.5rem) clamp(1.4rem, 5vw, 5rem);
  border-top: 1px solid rgba(210, 187, 134, .28); border-bottom: 1px solid rgba(210, 187, 134, .28);
  background: radial-gradient(70% 90% at 50% 0%, rgba(210, 187, 134, .10), rgba(210, 187, 134, 0) 70%);
}
.terroir .eyebrow { justify-content: center; }
.terroir .eyebrow::after { content: ""; width: 2rem; height: 1px; background: currentColor; opacity: .7; }
.terroir__text { max-width: 40rem; margin: 1.4rem auto 0; font-family: var(--serif); font-size: clamp(1.2rem, 1.05rem + .5vw, 1.45rem); line-height: 1.5; color: var(--cream); text-wrap: pretty; }
.terroir__list { display: grid; gap: 1.4rem; max-width: 60rem; margin: clamp(2.2rem, 4vw, 3rem) auto clamp(2rem, 4vw, 2.6rem); }
.terroir__list li { font-size: .98rem; color: var(--text); }
.terroir__list span { display: block; margin-bottom: .45rem; font-size: .66rem; letter-spacing: .26em; text-transform: uppercase; color: var(--gold-soft); }
@media (min-width: 800px) {
  .terroir__list { grid-template-columns: repeat(3, 1fr); gap: 0; }
  .terroir__list li { padding: 0 1.6rem; }
  .terroir__list li + li { border-left: 1px solid var(--line); }
}

/* ---------- Accueil : piliers plus compacts sur mobile ---------- */
@media (max-width: 899px) {
  .pillars { margin-top: 3.5rem; }
  .pillar { padding: 1.5rem 0 1.6rem; }
  .pillar__num { margin-bottom: .6rem; }
  .pillar__title { font-size: 1.35rem; }
}

/* ---------- Cartes bouteilles : repères aromatiques ---------- */
.bottle__notes {
  margin-top: -.4rem; margin-bottom: 1.1rem;
  font-size: .64rem; letter-spacing: .2em; text-transform: uppercase; color: var(--gold-soft);
}
.bottle__desc + .bottle__notes { margin-top: -.5rem; }
/* Le lien « Découvrir » reste en bas de carte ; description et repères restent groupés */
.bottle__link > .bottle__desc { flex: none; }
.bottle__link > .more { margin-top: auto; }

/* Mention non cliquable (article à paraître) : pas de flèche, ton discret */
.post > span.more { color: var(--muted); }
.post > span.more::after { content: none; }
.bottle__link:hover .bottle__name { color: var(--cream); }
.bottle__name { transition: color .3s var(--ease); }
.range__also {
  margin-top: clamp(2.5rem, 5vw, 3.5rem); padding-top: 1.4rem;
  border-top: 1px solid var(--line);
  display: flex; flex-wrap: wrap; align-items: baseline; gap: .6rem 1.6rem;
}
.range__also span { font-size: .7rem; letter-spacing: .26em; text-transform: uppercase; color: var(--muted); }
.range__also a { font-family: var(--serif); font-size: 1.3rem; color: var(--cream); text-decoration: none; transition: color .3s var(--ease); }
.range__also a:hover { color: var(--gold-soft); }

/* Statut d'une référence (ex. fiche technique à venir) */
.badge {
  display: inline-block; padding: .3rem .65rem;
  border: 1px dashed rgba(210, 187, 134, .45);
  font-size: .6rem; letter-spacing: .2em; text-transform: uppercase; color: var(--gold-soft);
  white-space: nowrap;
}
.bottle .badge { align-self: flex-start; margin-bottom: 1rem; }

/* ---------- Accueil : bloc Professionnels / Particuliers ----------
   Le fond suit désormais exactement la grille (plus de vide au-dessus). */
.section.paths--lift {
  width: calc(100% - 2 * var(--gutter));
  max-width: calc(var(--max) - 2 * var(--gutter));
  margin-top: var(--section);
  padding: 0;
}
.paths--lift .paths__grid { border: 0; }
@media (min-width: 900px) {
  .paths--lift .path--pro .path__ctas { flex-direction: column; align-items: flex-start; }
  .paths--lift .path--pro .path__ctas .btn { width: min(100%, 23rem); }
}
.paths--lift .path__distri { display: inline-flex; }

/* ---------- Accueil : Instagram ----------
   Tant qu'aucune vraie photo n'est en place, on n'affiche pas les cases vides :
   la grille réapparaît d'elle-même dès qu'une <img> y est ajoutée. */
.insta__grid:not(:has(img)) { display: none; }
.insta__grid:not(:has(img)) ~ * { margin-top: 0; }
.insta .insta__head { margin-bottom: 0; padding: clamp(2.5rem, 5vw, 3.5rem) 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }

/* Les noms de fichiers techniques des emplacements photo ne s'affichent jamais au public */
.ph__slot { display: none; }

/* ---------- Bandeau de repères (Notre histoire) ---------- */
.keyfacts {
  display: grid; grid-template-columns: repeat(2, 1fr);
  margin: 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
}
.keyfacts > div { padding: 1.6rem 1rem 1.6rem 0; }
.keyfacts dt { font-family: var(--serif); font-size: clamp(1.9rem, 1.4rem + 1.6vw, 2.7rem); line-height: 1; color: var(--gold-soft); }
.keyfacts dd { margin: .6rem 0 0; font-size: .86rem; line-height: 1.5; color: var(--text); max-width: 15rem; }
@media (max-width: 699px) {
  .keyfacts > div:nth-child(odd) { padding-right: 1rem; border-right: 1px solid var(--line); }
  .keyfacts > div:nth-child(even) { padding-left: 1rem; }
  .keyfacts > div:nth-child(-n+2) { border-bottom: 1px solid var(--line); }
}
@media (min-width: 700px) {
  .keyfacts { grid-template-columns: repeat(4, 1fr); }
  .keyfacts > div { padding: 2rem 1.6rem; }
  .keyfacts > div:first-child { padding-left: 0; }
  .keyfacts > div + div { border-left: 1px solid var(--line); }
}

/* ---------- Chapitres éditoriaux (Notre histoire, fiches produits) ---------- */
.chapter .split__media picture.frame { max-width: 30rem; }
.chapter--reverse .split__media picture.frame { margin-left: auto; }
.chapter .prose { margin-top: 1.4rem; }
.chapter__num { display: block; margin-bottom: 1rem; font-family: var(--serif); font-size: 1rem; letter-spacing: .1em; color: var(--gold); }
@media (max-width: 899px) {
  .chapter .split__media picture.frame { max-width: none; aspect-ratio: 4 / 3; }
  .chapter .split__media picture.frame img { object-position: 50% 40%; }
  .chapter .split { gap: 2rem; }
}

/* Visuel logo : jamais rogné */
picture.frame--logo { background: #0d0e0c; outline: 1px solid rgba(210, 187, 134, .2); outline-offset: -1px; }
picture.frame--logo img { object-fit: contain; }
.story-page__ctas--center { justify-content: center; }

/* Citation éditoriale */
.quote {
  max-width: 46rem; margin: 0 auto; text-align: center;
  font-family: var(--serif); font-size: clamp(1.6rem, 1.2rem + 1.6vw, 2.4rem); line-height: 1.3; color: var(--cream);
  text-wrap: balance;
}
.quote::before, .quote::after { content: ""; display: block; width: 2.75rem; height: 1px; margin: 0 auto 1.6rem; background: var(--gold); opacity: .7; }
.quote::after { margin: 1.6rem auto 0; }

/* ---------- Moments de dégustation (Cocktails) ---------- */
.moments .pillars { margin-top: 0; }
.moments .pillar p + p { margin-top: .7rem; }
.moments .pillar a { color: var(--gold-soft); }

/* ---------- Fiche produit : cocktail associé ---------- */
.pairing {
  display: grid; gap: clamp(1.6rem, 4vw, 3.5rem); align-items: center;
  padding: clamp(1.6rem, 3vw, 2.4rem);
  border: 1px solid rgba(210, 187, 134, .28);
  background: radial-gradient(120% 90% at 0% 0%, rgba(210, 187, 134, .09), rgba(210, 187, 134, 0) 60%), rgba(239, 231, 214, .02);
}
.pairing__img { display: block; width: 100%; max-width: 15rem; aspect-ratio: 3 / 4; overflow: hidden; background: var(--bg-2); }
.pairing__img img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; }
.pairing .h2 { font-size: clamp(1.8rem, 1.3rem + 1.6vw, 2.6rem); }
.pairing p { max-width: 34rem; margin-top: 1rem; }
.pairing .btn { margin-top: 1.8rem; }
@media (min-width: 700px) { .pairing { grid-template-columns: 15rem 1fr; } }
@media (max-width: 699px) { .pairing__img { max-width: none; aspect-ratio: 4 / 3; } .pairing .btn { width: 100%; } }

/* ---------- Fiche cocktail : la liqueur + autres recettes ---------- */
.liq-note { margin-top: 2.4rem; padding-top: 1.6rem; border-top: 1px solid var(--line); }
.liq-note .liq-note__label { margin: 0; font-family: var(--sans); font-size: .7rem; line-height: 1.4; letter-spacing: .26em; text-transform: uppercase; color: var(--gold-soft); }
.liq-note p { margin-top: .7rem; max-width: 36rem; font-size: .98rem; }
.liq-note p a { color: var(--gold-soft); }

.cocktail__others { margin-top: clamp(3rem, 6vw, 4.5rem); }
.cocktail__others + .cocktail__back { margin-top: 1.4rem; padding-top: 0; border-top: 0; }

/* ---------- Blog : emplacements d'articles à paraître ---------- */
.posts--list .ph { background: radial-gradient(90% 70% at 50% 40%, var(--bg-3), var(--bg-2)); }
.posts--list .ph .ph__lion { opacity: .5; }

/* ---------- Lisibilité générale ---------- */
.prose--wide p { text-wrap: pretty; }
.page-head__lead { text-wrap: pretty; }
@media (max-width: 699px) {
  .prose--wide { font-size: 1rem; }
  .page-head__lead { font-size: 1.22rem; }
}

/* =====================================================================
   Phase 3 (12 oct. 2026) — parcours commercial et formulaires
   Mêmes couleurs, mêmes polices ; retirer ce bloc suffit à revenir en arrière.
   ===================================================================== */

/* Menu : « Professionnels » mis en avant sur ordinateur (cadre fin doré) */
@media (min-width: 1180px) {
  .nav__list .nav__pro a { padding: .5rem .85rem; border: 1px solid rgba(210, 187, 134, .45); color: var(--gold-soft); }
  .nav__list .nav__pro a::after { display: none; }
  .nav__list .nav__pro a:hover, .nav__list .nav__pro a[aria-current="page"] { border-color: var(--gold-soft); color: var(--ivory); }
}
/* Menu mobile : défilement possible quand l'écran est bas (téléphone à l'horizontale) */
@media (max-width: 1179px) {
  /* centrage par marges automatiques : reste centré, mais défile depuis le haut si le menu dépasse */
  .nav { overflow-y: auto; overscroll-behavior: contain; justify-content: flex-start; }
  .nav__list { margin-top: auto; }
  .nav__insta { margin-bottom: auto; align-self: flex-start; }
}

/* Gamme : colonnes toujours égales sur mobile (le badge « Fiche technique à venir »
   élargissait la carte Poire et faisait déborder la page sur petit écran) */
.range__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 700px) { .range__list, .range__list--six { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 700px) { .range__list--four { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .range__list--four { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.bottle .badge { white-space: normal; max-width: 100%; }

/* Formulaires : état neutre / erreur / mention « facultatif » */
.form__status { color: var(--gold-soft); }
.form__status.is-error { color: #e3b4a0; }
.field__opt { margin-left: .4rem; letter-spacing: .12em; text-transform: none; color: var(--muted); }

/* Page Professionnels */
.pro-head__alt { margin-top: 1.6rem; }
.terms__row--key dd { color: var(--gold-soft); }
.terms__links a { color: inherit; text-decoration: none; border-bottom: 1px solid rgba(210, 187, 134, .35); transition: color .3s var(--ease), border-color .3s var(--ease); }
.terms__links a:hover { color: var(--gold-soft); border-color: var(--gold-soft); }
.pro-why__img { display: block; background: var(--bg-2); }
.pro-why__img img { width: 100%; height: auto; }
.pro-why .h2 { margin-bottom: 0; }
.pro-steps { margin-top: 0; }
.form-wrap__min { margin-top: 1rem; color: var(--cream); }
.form-wrap__min strong { font-weight: 400; color: var(--gold-soft); }

/* Page Particuliers : être prévenu du lancement */
.notify-band { align-items: flex-start; }
.notify-band > div:first-child { max-width: 30rem; }
.notify-fallback, .notify { flex: 1 1 22rem; max-width: 34rem; }
.notify-fallback .band__text { margin: 0 0 1.4rem; }
.notify__form { display: grid; gap: 1.4rem; }
.notify .form__success { font-size: 1.3rem; }
