/* ═══════════════════════════════════════════════════════════════════════════
   B&B Bordeaux Saint Michel — site.css v2.1
   Design system "maison d'hôtes haut de gamme"
   Auto-hébergé (RGPD) — polices Fraunces + Inter
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── TOKENS ─────────────────────────────────────────────────────────────── */
:root {
  --pierre:        #F7F2E9;
  --pierre-2:      #EFE6D6;
  /* Bordeaux ACTUEL (sombre) : --bordeaux:#611B2E ; --bordeaux-deep:#46101F */
  --bordeaux:      #611B2E;
  --bordeaux-deep: #46101F;
  --or:            #EEB50A;
  --or-deep:       #B9871A;
  --encre:         #2B2420;
  --mute:          #6E6256;
  --line:          rgba(43, 36, 32, .14);
  --radius:        4px;
  --max-w:         1140px;
  --nav-h:         124px;
  --pad-x:         clamp(1rem, 4vw, 2.5rem);
  --section-gap:   clamp(3rem, 6vw, 5rem);
}

/* ── POLICES AUTO-HÉBERGÉES ─────────────────────────────────────────────── */

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

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

/* ── RESET ───────────────────────────────────────────────────────────────── */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  background: var(--pierre);
  color: var(--encre);
  font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size: 17px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

a { color: inherit; }

/* ── UTILITAIRES ─────────────────────────────────────────────────────────── */
.container {
  max-width: var(--max-w);
  margin-inline: auto;
  padding-inline: var(--pad-x);
}

.eyebrow {
  font-family: 'Inter', sans-serif;
  font-size: .75rem;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--or);
  display: block;
  margin-bottom: .75rem;
}

.filet-or {
  border-top: 1.5px solid var(--or);
  opacity: .45;
}

/* ── NAVIGATION STICKY ──────────────────────────────────────────────────── */
.site-nav {
  position: sticky;
  top: 0;
  z-index: 100;
  height: var(--nav-h);
  background: rgba(247, 242, 233, .94);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--line);
}

.site-nav__inner {
  max-width: var(--max-w);
  margin-inline: auto;
  padding-inline: var(--pad-x);
  height: 100%;
  display: flex;
  align-items: center;
  gap: 1.75rem;
}

/* ── Logo nav ── */
.site-nav__brand {
  display: flex;
  align-items: center;
  gap: .75rem;
  text-decoration: none;
  flex-shrink: 0;
}

.brand-logo-icon {
  height: 86px;
  width: auto;
  display: block;
  flex-shrink: 0;
  object-fit: contain;
}

.site-nav__name {
  font-family: 'Fraunces', serif;
  font-weight: 600;
  font-size: 1.325rem;
  color: var(--bordeaux);
  line-height: 1.2;
  letter-spacing: .01em;
}

.site-nav__links {
  display: flex;
  align-items: center;
  gap: .2rem;
  list-style: none;
  margin-left: auto;
}

.site-nav__links a {
  font-size: .9rem;
  font-weight: 500;
  color: var(--encre);
  text-decoration: none;
  padding: .35rem .7rem;
  border-radius: var(--radius);
  white-space: nowrap;
  transition: color .15s, background .15s;
}

.site-nav__links a:hover,
.site-nav__links a[aria-current="page"] {
  color: var(--bordeaux);
  background: var(--pierre-2);
}

.site-nav__lang {
  display: flex;
  gap: .15rem;
  font-size: .8125rem;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  flex-shrink: 0;
  margin-left: 1.55rem;
}

.site-nav__lang a {
  text-decoration: none;
  color: var(--mute);
  padding: .2rem .45rem;
  border-radius: 3px;
  transition: color .15s;
  display: inline-flex;
  align-items: center;
  gap: .25rem;
}

.lang-flag {
  font-size: 1rem;
  line-height: 1;
}

.site-nav__lang a:hover,
.site-nav__lang a[aria-current="true"] {
  color: var(--bordeaux);
}

.site-nav__cta {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  background: var(--or);
  color: var(--bordeaux-deep);
  font-size: .9rem;
  font-weight: 600;
  padding: .6rem 1.25rem;
  border-radius: var(--radius);
  text-decoration: none;
  white-space: nowrap;
  transition: background .15s;
}

.site-nav__cta:hover {
  background: var(--or-deep);
}

/* Mobile-only CTA inside dropdown — hidden on desktop */
.site-nav__cta-mobile-wrap {
  display: none;
}

/* Hamburger (mobile) */
.site-nav__toggle {
  display: none;
  background: none;
  border: none;
  cursor: pointer;
  padding: .4rem;
  margin-left: auto;
  color: var(--encre);
}

.site-nav__toggle svg {
  display: block;
  width: 26px;
  height: 26px;
  stroke: currentColor;
  stroke-width: 2;
  fill: none;
}

/* ── HERO ────────────────────────────────────────────────────────────────── */
.hero {
  background: var(--pierre);
  padding-block: clamp(3rem, 8vw, 6rem);
  overflow: hidden;
}

.hero__inner {
  max-width: var(--max-w);
  margin-inline: auto;
  padding-inline: var(--pad-x);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2rem, 4vw, 4rem);
  align-items: center;
}

.hero__h1 {
  font-family: 'Fraunces', serif;
  font-weight: 600;
  font-size: clamp(2rem, 4.5vw, 3.25rem);
  line-height: 1.15;
  color: var(--bordeaux);
  margin-bottom: 1.25rem;
  letter-spacing: -.01em;
}

.hero__h1 em {
  font-style: italic;
  font-weight: 400;
  color: var(--bordeaux-deep);
}

.hero__lede {
  font-size: 1.0625rem;
  color: var(--mute);
  margin-bottom: 2rem;
  line-height: 1.7;
  max-width: 44ch;
}

.hero__actions {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
}

.btn-primary {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  background: var(--or);
  color: var(--bordeaux-deep);
  font-size: .9375rem;
  font-weight: 600;
  padding: .8rem 1.6rem;
  border-radius: var(--radius);
  text-decoration: none;
  transition: background .15s;
}

.btn-primary:hover {
  background: var(--or-deep);
}

.btn-outline {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  background: transparent;
  color: var(--bordeaux);
  font-size: .9375rem;
  font-weight: 500;
  padding: .8rem 1.6rem;
  border-radius: var(--radius);
  border: 1.5px solid var(--bordeaux);
  text-decoration: none;
  transition: background .15s, color .15s;
}

.btn-outline:hover {
  background: var(--bordeaux);
  color: var(--pierre);
}

.hero__visual {
  position: relative;
}

.hero__img-wrap {
  border: 2px solid var(--or);
  border-radius: calc(var(--radius) + 2px);
  overflow: hidden;
  aspect-ratio: 4 / 3;
  background: var(--pierre-2);
}

.hero__img-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.hero__img-placeholder {
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, var(--pierre-2) 0%, var(--bordeaux) 100%);
  opacity: .35;
}

/* ── MAISON SECTION (section 2 : texte XVIIe + stats intégrées) ─────────── */
.maison-section {}

.maison-section__inner {
  display: block;
}

.maison-section__text {}


.maison-section__body {
  font-size: 1.0625rem;
  color: var(--encre);
  line-height: 1.75;
  max-width: 48ch;
}

/* Stats band en mode inline (dans maison-section) */
.stats-band--inline {
  background: var(--bordeaux);
  border-radius: calc(var(--radius) + 2px);
  padding: 2rem 1.5rem;
}

.stats-band--inline .stats-band__inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem 1rem;
  padding: 0;
}

.stats-band--inline .stats-band__item {
  text-align: center;
  padding: .25rem .5rem;
}

/* ── STATS BAND (standalone — conservé pour autres usages) ──────────────── */
.stats-band {
  background: var(--bordeaux);
  color: var(--pierre);
  padding-block: 1.5rem;
}

.stats-band__inner {
  max-width: var(--max-w);
  margin-inline: auto;
  padding-inline: var(--pad-x);
  display: flex;
  justify-content: space-around;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
}

.stats-band__item {
  text-align: center;
  padding: .5rem 1rem;
}

.stats-band__value {
  font-family: 'Fraunces', serif;
  font-weight: 700;
  font-size: 1.625rem;
  color: var(--or);
  display: block;
  line-height: 1.1;
  margin-bottom: .25rem;
}

.stats-band__label {
  font-size: .8125rem;
  font-weight: 500;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--pierre-2);
}

/* ── SECTIONS ────────────────────────────────────────────────────────────── */
.section {
  padding-block: var(--section-gap);
}

.section--alt {
  background: var(--pierre-2);
}

.section--dark {
  background: var(--bordeaux);
  color: var(--pierre);
}

.section__inner {
  max-width: var(--max-w);
  margin-inline: auto;
  padding-inline: var(--pad-x);
}

.section__header {
  margin-bottom: clamp(1.5rem, 3vw, 2.5rem);
}

.section__title {
  font-family: 'Fraunces', serif;
  font-weight: 600;
  font-size: clamp(1.5rem, 3vw, 2.25rem);
  color: var(--bordeaux);
  line-height: 1.2;
  margin-bottom: .5rem;
}

.section--dark .section__title {
  color: var(--pierre);
}

.section__sub {
  font-size: 1.0625rem;
  color: var(--mute);
  max-width: 54ch;
}

.section--dark .section__sub {
  color: var(--pierre-2);
}

/* ── STUDIO GRID ────────────────────────────────────────────────────────── */
.studio-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.5rem;
}

.studio-card {
  background: var(--pierre);
  border: 1px solid var(--line);
  border-radius: calc(var(--radius) + 2px);
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  display: flex;
  flex-direction: column;
  transition: box-shadow .2s, transform .2s;
}

.studio-card:hover {
  box-shadow: 0 6px 24px rgba(43, 36, 32, .1);
  transform: translateY(-2px);
}

.studio-card__img {
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--pierre-2);
  flex-shrink: 0;
}

.studio-card__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .4s ease;
}

.studio-card:hover .studio-card__img img {
  transform: scale(1.03);
}

.studio-card__body {
  padding: 1.25rem 1.5rem 1.5rem;
  flex: 1;
  display: flex;
  flex-direction: column;
}

.studio-card__name {
  font-family: 'Fraunces', serif;
  font-weight: 600;
  font-size: 1.25rem;
  color: var(--bordeaux);
  margin-bottom: .25rem;
}

.studio-card__meta {
  font-size: .8125rem;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--or-deep);
  margin-bottom: .75rem;
}

.studio-card__desc {
  font-size: .9375rem;
  color: var(--mute);
  line-height: 1.55;
  flex: 1;
  margin-bottom: 1rem;
}

.studio-card__link {
  font-size: .875rem;
  font-weight: 600;
  color: var(--bordeaux);
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  text-decoration: none;
  transition: gap .15s;
}

.studio-card:hover .studio-card__link {
  gap: .55rem;
}

/* ── SERVICES GRID (icônes SVG) ─────────────────────────────────────────── */
.services-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: rgba(247, 242, 233, .12);
  border: 1px solid rgba(247, 242, 233, .12);
  border-radius: calc(var(--radius) + 2px);
  overflow: hidden;
}

/* Tuiles cliquables (bagages, vin…) : le <a> est l'élément de grille, il
   s'étire déjà sur toute la largeur ET la hauteur de sa case (stretch grille
   par défaut sur les deux axes). Mais son enfant .service-item ne suivait
   pas en hauteur (hauteur = son seul contenu) — un liseré du fond de la
   grille apparaissait sous ces cases quand une case voisine de la même
   ligne était plus haute (10/09/2026, corrigé une 1re fois avec
   `display:flex` sur le <a> — CASSÉ LA LARGEUR : un flex-container en ligne
   ne fait pas grandir son enfant sur l'axe principal par défaut, seulement
   sur l'axe croisé — corrigé une 2e fois ci-dessous, en visant directement
   .service-item plutôt que son parent). */
.service-item {
  background: rgba(255, 255, 255, .04);
  padding: 2rem 1.5rem;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .75rem;
  height: 100%;
  transition: background .15s;
}

.service-item:hover {
  background: rgba(255, 255, 255, .09);
}

/* Icône SVG ligne */
.svc-icon {
  width: 36px;
  height: 36px;
  display: block;
  color: var(--or);
  flex-shrink: 0;
}

.service-item__name {
  font-size: .9375rem;
  font-weight: 500;
  color: var(--pierre);
  line-height: 1.3;
}

.service-item__detail {
  font-size: .8125rem;
  color: var(--pierre-2);
  margin-top: -.25rem;
}

/* ── QUARTIER SECTION ───────────────────────────────────────────────────── */
.quartier-section {}

.quartier-section__body {
  font-size: 1.0625rem;
  color: var(--encre);
  line-height: 1.75;
  max-width: 46ch;
  margin-bottom: 2rem;
}

/* Liste de distances */
.quartier-dist {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: .6rem;
}

.quartier-dist__item {
  display: flex;
  align-items: baseline;
  gap: .75rem;
}

.quartier-dist__time {
  font-family: 'Fraunces', serif;
  font-weight: 700;
  font-size: 1rem;
  color: var(--or-deep);
  min-width: 4rem;
  flex-shrink: 0;
}

.quartier-dist__label {
  font-size: .9375rem;
  color: var(--mute);
}

/* ── PAGE HEADER (pages intérieures) ────────────────────────────────────── */
.page-header {
  background: var(--pierre-2);
  padding-block: clamp(2.5rem, 5vw, 4rem);
  border-bottom: 1px solid var(--line);
}

.page-header__inner {
  max-width: var(--max-w);
  margin-inline: auto;
  padding-inline: var(--pad-x);
}

.page-header__h1 {
  font-family: 'Fraunces', serif;
  font-weight: 600;
  font-size: clamp(1.75rem, 4vw, 2.75rem);
  color: var(--bordeaux);
  line-height: 1.18;
  margin-bottom: .75rem;
}

.page-header__sub {
  font-size: 1.0625rem;
  color: var(--mute);
  max-width: 52ch;
}

/* ── STUDIO PAGE HEADER ─────────────────────────────────────────────────── */
.studio-header {
  background: var(--bordeaux);
  color: var(--pierre);
  padding-block: clamp(2.5rem, 5vw, 4rem);
}

.studio-header__inner {
  max-width: var(--max-w);
  margin-inline: auto;
  padding-inline: var(--pad-x);
}

.studio-header__name {
  font-family: 'Fraunces', serif;
  font-weight: 700;
  font-size: clamp(2rem, 4vw, 3rem);
  color: var(--or);
  margin-bottom: .75rem;
}

.studio-header__chips {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  margin-top: .75rem;
}

.chip {
  background: rgba(247, 242, 233, .15);
  border: 1px solid rgba(247, 242, 233, .25);
  color: var(--pierre);
  font-size: .8125rem;
  font-weight: 500;
  padding: .25rem .75rem;
  border-radius: 999px;
}

/* ── CONTENT ZONE ────────────────────────────────────────────────────────── */
.content-zone {
  max-width: var(--max-w);
  margin-inline: auto;
  padding-inline: var(--pad-x);
  padding-block: var(--section-gap);
}

.content-zone h2,
.content-zone h3,
.content-zone h4 {
  font-family: 'Fraunces', serif;
  font-weight: 600;
  color: var(--bordeaux);
  margin-top: 2.25rem;
  margin-bottom: .75rem;
  line-height: 1.25;
}

.content-zone h2 { font-size: clamp(1.375rem, 2.5vw, 1.875rem); }
.content-zone h3 { font-size: 1.25rem; }
.content-zone h4 { font-size: 1.0625rem; }

.content-zone p {
  margin-bottom: 1.1rem;
  color: var(--encre);
  max-width: 66ch;
}

.content-zone ul,
.content-zone ol {
  padding-left: 1.5rem;
  margin-bottom: 1.1rem;
}

.content-zone li {
  margin-bottom: .4rem;
  color: var(--encre);
}

.content-zone a {
  color: var(--bordeaux);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.content-zone a:hover {
  color: var(--bordeaux-deep);
}

.content-zone strong {
  font-weight: 600;
  color: var(--encre);
}

.content-zone img {
  border-radius: calc(var(--radius) + 2px);
  margin-block: 1.5rem;
  max-width: 100%;
  border: 1px solid var(--line);
}

/* ── EDITORIAL CONTENT — pages texte colonne (decouvrez/autour/faq) ─────── */
/* Classe additionnelle sur .content-zone. Specificite (0,2,0) — ecrase les  */
/* valeurs communes sans !important. NE PAS appliquer a quartier/vins/studios. */
.editorial-content.content-zone {
  max-width: 700px;
  padding-block-start: clamp(1.5rem, 3vw, 2.5rem);
}

/* ── LEGAL CONTENT — CGV / Politique de confidentialité ─────────────────── */
/* Classe additionnelle sur .content-zone pour les pages legales uniquement.  */
/* Ne touche pas .content-zone partagee — specificite (0,2,0) sur toutes les  */
/* regles ci-dessous pour ecraser les valeurs communes sans !important.        */
.legal-content.content-zone {
  max-width: 720px;
  padding-block: clamp(1.75rem, 3.5vw, 2.75rem);
}
/* ── WINE PAGE — colonne de contenu maîtrisée ────────────────────────── */
/* Specificite (0,2,0) — ecrase max-width:1140px du base content-zone.    */
/* NE PAS appliquer a d'autres pages (quartier, studios, decouvrez, etc.) */
.wine-content.content-zone {
  max-width: 900px;
}

/* h2 = separateur de grande section (CGV / Politique de conf.) */
.legal-content h2 {
  font-size: clamp(1.2rem, 2.2vw, 1.5rem);
  font-weight: 700;
  margin-top: 3.25rem;
  margin-bottom: .9rem;
  padding-bottom: .5rem;
  border-bottom: 1.5px solid rgba(97, 27, 46, .18);
}
/* h3 = titre d'article — Fraunces bordeaux bien marque */
.legal-content h3 {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--bordeaux);
  margin-top: 1.75rem;
  margin-bottom: .45rem;
}
/* h4 = sous-section intermediaire — Inter encre, semi-bold */
.legal-content h4 {
  font-family: 'Inter', system-ui, sans-serif;
  font-size: .9375rem;
  font-weight: 600;
  color: var(--encre);
  margin-top: 1.1rem;
  margin-bottom: .35rem;
}
/* Paragraphes et listes : pas de limite 66ch (conteneur deja a 720px) */
.legal-content p,
.legal-content ul,
.legal-content ol {
  max-width: 100%;
}

/* ── DECOUVREZ-BORDEAUX — boutons itinéraires et lieux cliquables ─────────── */
/* Spécificité (0,1,0) + !important bat .content-zone a (0,1,1) sur color/decoration */
.discover-btn {
  display: inline-block;
  padding: 0.55rem 1.4rem;
  background: #8B2035;
  color: #FFF !important;
  border-radius: 4px;
  font-family: system-ui, sans-serif;
  font-weight: 600;
  font-size: 0.92rem;
  text-decoration: none !important;
  transition: background 0.18s, transform 0.1s;
  margin: 0.5rem 0 1.5rem;
}

.discover-btn:hover {
  background: #6B1828;
  color: #FFF !important;
  text-decoration: none !important;
  transform: translateY(-1px);
}

/* ── VINS — bouton Commander ───────────────────────────────────────────────── */
.wine-btn {
  display: inline-block;
  padding: 0.55rem 1.6rem;
  background: var(--or);
  color: var(--bordeaux-deep) !important;
  border-radius: 4px;
  font-weight: 600;
  font-size: 0.92rem;
  text-decoration: none !important;
  transition: background 0.18s;
  margin: 0.75rem 0 1.25rem;
}
.wine-btn:hover {
  background: var(--or-deep);
  color: var(--bordeaux-deep) !important;
  text-decoration: none !important;
}

.discover-list {
  list-style: none;
  padding-left: 0;
  margin: 0.5rem 0 1.25rem;
}

/* Spécificité (0,2,0) — bat .content-zone ul (0,1,1) qui forcerait padding-left: 1.5rem */
.content-zone .discover-list {
  padding-left: 0;
}

.discover-list li {
  padding: 0.55rem 0;
}

.discover-list li:last-child {
  padding-bottom: 0;
}

.discover-list a {
  color: var(--bordeaux);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.discover-list a:hover {
  color: var(--bordeaux-deep);
}

/* ── AMENITY GRID (icônes SVG, page studio) ─────────────────────────────── */
.amenity-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: .75rem 2.5rem;
  margin-bottom: 2rem;
}

.amenity-item {
  display: flex;
  align-items: flex-start;
  gap: .625rem;
  font-size: .9375rem;
  color: var(--encre);
  line-height: 1.4;
}

.amenity-item__icon {
  flex-shrink: 0;
  width: 1.25rem;
  height: 1.25rem;
  color: var(--bordeaux);
  margin-top: .1rem;
}

/* ── AMENITY CARD (carte englobante des équipements — page studio) ────────── */
.amenity-card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: calc(var(--radius) + 2px);
  padding: 1.75rem 2rem;
  box-shadow: 0 1px 8px rgba(43, 36, 32, .06);
  margin-bottom: 2rem;
}

/* ── PHOTO CAROUSEL ──────────────────────────────────────────────────────── */
.photo-carousel {
  position: relative;
  overflow: hidden;
  border-radius: calc(var(--radius) + 2px);
  margin-block: 2rem;
  border: 1px solid var(--line);
  background: var(--pierre-2);
}

.photo-carousel__track {
  display: flex;
  transition: transform .4s cubic-bezier(.4, 0, .2, 1);
}

.photo-carousel__slide {
  min-width: 100%;
}

.photo-carousel__slide img {
  width: 100%;
  height: auto;
  max-height: 70vh;
  object-fit: cover;
  display: block;
  border: none;
  border-radius: 0;
  margin: 0;
}

.photo-carousel__btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(247, 242, 233, .88);
  color: var(--bordeaux);
  border: none;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
  box-shadow: 0 1px 4px rgba(0, 0, 0, .18);
  transition: background .2s;
}

.photo-carousel__btn:hover {
  background: rgba(247, 242, 233, 1);
}

.photo-carousel__btn--prev { left: .75rem; }
.photo-carousel__btn--next { right: .75rem; }

.photo-carousel__dots {
  position: absolute;
  bottom: .75rem;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: .375rem;
  z-index: 2;
}

.photo-carousel__dot {
  width: .5rem;
  height: .5rem;
  border-radius: 50%;
  background: rgba(247, 242, 233, .55);
  border: none;
  cursor: pointer;
  padding: 0;
  transition: background .2s;
}

.photo-carousel__dot.active {
  background: var(--pierre);
}

/* ── FAQ ─────────────────────────────────────────────────────────────────── */
.faq-list {
  list-style: none;
  border-top: 1px solid var(--line);
}

.faq-item {
  border-bottom: 1px solid var(--line);
}

.faq-item__q {
  font-family: 'Fraunces', serif;
  font-weight: 600;
  font-size: 1.0625rem;
  color: var(--bordeaux);
  padding: 1.25rem 0;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 1rem;
  list-style: none;
}

.faq-item__q::-webkit-details-marker { display: none; }

.faq-item__icon {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--pierre-2);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-size: .875rem;
  color: var(--bordeaux);
  transition: background .15s;
}

details[open] .faq-item__icon {
  background: var(--bordeaux);
  color: var(--pierre);
}

.faq-item__a {
  padding-bottom: 1.25rem;
  color: var(--mute);
  line-height: 1.7;
  max-width: 62ch;
}

dl.faq dt {
  font-family: 'Fraunces', serif;
  font-weight: 600;
  font-size: 1.0625rem;
  color: var(--bordeaux);
  padding: 1.25rem 0 .5rem;
  border-top: 1px solid var(--line);
}

dl.faq dd {
  margin: 0 0 1rem;
  color: var(--mute);
  line-height: 1.7;
  padding-bottom: .75rem;
  border-bottom: 1px solid var(--line);
}

/* ── BLOG GRID ───────────────────────────────────────────────────────────── */
.blog-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 1.5rem;
}

.blog-card {
  background: var(--pierre);
  border: 1px solid var(--line);
  border-radius: calc(var(--radius) + 2px);
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  display: flex;
  flex-direction: column;
  transition: box-shadow .2s, transform .2s;
}

.blog-card:hover {
  box-shadow: 0 6px 24px rgba(43, 36, 32, .1);
  transform: translateY(-2px);
}

.blog-card__img {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  flex-shrink: 0;
}

.blog-card__body {
  padding: 1.25rem 1.5rem 1.5rem;
  flex: 1;
  display: flex;
  flex-direction: column;
}

.blog-card__title {
  font-family: 'Fraunces', serif;
  font-weight: 600;
  font-size: 1.0625rem;
  color: var(--bordeaux);
  line-height: 1.3;
  margin-bottom: .5rem;
  flex: 1;
}

.blog-card__date {
  font-size: .8125rem;
  color: var(--mute);
  letter-spacing: .02em;
  margin-top: .75rem;
}

.blog-card__link {
  font-size: .875rem;
  font-weight: 600;
  color: var(--bordeaux);
  margin-top: 1rem;
  display: inline-flex;
  align-items: center;
  gap: .35rem;
}

.blog-card__link::after {
  content: '→';
  transition: transform .15s;
}

.blog-card:hover .blog-card__link::after {
  transform: translateX(3px);
}

/* ── ARTICLE BLOG ────────────────────────────────────────────────────────── */
.article-header {
  background: var(--pierre-2);
  padding-block: clamp(2rem, 4vw, 3.5rem);
  border-bottom: 1px solid var(--line);
}

.article-header__inner {
  max-width: 800px;
  margin-inline: auto;
  padding-inline: var(--pad-x);
}

.article-header__h1 {
  font-family: 'Fraunces', serif;
  font-weight: 700;
  font-size: clamp(1.625rem, 3.5vw, 2.5rem);
  color: var(--bordeaux);
  line-height: 1.18;
  margin-bottom: .75rem;
}

.article-header__date {
  font-size: .875rem;
  color: var(--mute);
  font-weight: 500;
}

.article-body {
  max-width: 800px;
  margin-inline: auto;
  padding-inline: var(--pad-x);
  padding-block: var(--section-gap);
}

.article-body p {
  margin-bottom: 1.15rem;
  line-height: 1.75;
  color: var(--encre);
}

.article-body h2 {
  font-family: 'Fraunces', serif;
  font-weight: 600;
  font-size: 1.5rem;
  color: var(--bordeaux);
  margin-top: 2.5rem;
  margin-bottom: .75rem;
}

.article-body h3 {
  font-family: 'Fraunces', serif;
  font-weight: 600;
  font-size: 1.25rem;
  color: var(--bordeaux);
  margin-top: 2rem;
  margin-bottom: .5rem;
}

.article-body ul,
.article-body ol {
  padding-left: 1.5rem;
  margin-bottom: 1.1rem;
}

.article-body li { margin-bottom: .4rem; }

.article-body a {
  color: var(--bordeaux);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.article-body img {
  border-radius: calc(var(--radius) + 2px);
  margin-block: 2rem;
  border: 1px solid var(--line);
  width: 100%;
}

.article-body strong { font-weight: 600; }

/* ── FOOTER ─────────────────────────────────────────────────────────────── */
.site-footer {
  background: var(--bordeaux-deep);
  color: var(--pierre-2);
  padding-block: 3.5rem 2rem;
  margin-top: 0;
}

.site-footer__inner {
  max-width: var(--max-w);
  margin-inline: auto;
  padding-inline: var(--pad-x);
}

.site-footer__top {
  display: grid;
  grid-template-columns: 1.2fr 1.8fr 1fr;
  gap: 2.5rem;
  padding-bottom: 2.5rem;
}

.site-footer__brand-block {}

/* ── Logo footer ── */
.site-footer__brand {
  display: block;
  text-decoration: none;
  margin-bottom: 1.25rem;
}

.brand-logo-wordmark {
  height: 120px;
  width: auto;
  display: block;
  object-fit: contain;
  object-position: left center;
}

.site-footer__address {
  font-size: .875rem;
  color: var(--pierre-2);
  line-height: 1.6;
  font-style: normal;
}

.site-footer__nav {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem 2rem;
  align-content: start;
}

.site-footer__nav-title {
  font-size: .75rem;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--or);
  margin-bottom: .75rem;
}

.site-footer__nav-links {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: .4rem;
}

.site-footer__nav-links a {
  font-size: .875rem;
  color: var(--pierre-2);
  text-decoration: none;
  transition: color .15s;
}

.site-footer__nav-links a:hover {
  color: var(--pierre);
}

/* ── Bloc CTA "Réserver en direct" ── */
.site-footer__cta-block {
  border-left: 1px solid rgba(247, 242, 233, .15);
  padding-left: 2rem;
}

.site-footer__cta-headline {
  font-family: 'Fraunces', serif;
  font-size: 1.1875rem;
  font-weight: 600;
  color: var(--pierre);
  margin-bottom: .4rem;
  line-height: 1.25;
}

.site-footer__cta-sub {
  font-size: .8125rem;
  color: var(--pierre-2);
  line-height: 1.5;
  margin-bottom: 1.25rem;
}

.site-footer__cta-btn {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  background: var(--or);
  color: var(--bordeaux-deep);
  font-size: .9375rem;
  font-weight: 600;
  padding: .7rem 1.4rem;
  border-radius: var(--radius);
  text-decoration: none;
  transition: background .15s;
  white-space: nowrap;
}

.site-footer__cta-btn:hover {
  background: var(--or-deep);
}

/* ── Filet + bas ── */
.site-footer__filet {
  margin-block: 0;
}

.site-footer__bottom {
  padding-top: 1.5rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
}

.site-footer__copy {
  font-size: .8125rem;
  color: var(--mute);
}

.site-footer__langs {
  display: flex;
  gap: .5rem;
}

.site-footer__langs a {
  font-size: .8125rem;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--mute);
  text-decoration: none;
  padding: .2rem .45rem;
  border-radius: 3px;
  transition: color .15s;
}

.site-footer__langs a:hover {
  color: var(--pierre);
}

.site-footer__legal {
  font-size: .8125rem;
  color: var(--mute);
  text-decoration: none;
}
.site-footer__legal:hover {
  color: var(--pierre);
}

/* ── RESPONSIVE ─────────────────────────────────────────────────────────── */
@media (max-width: 1024px) {
  .site-footer__top {
    grid-template-columns: 1fr 1fr;
  }

  .site-footer__cta-block {
    grid-column: 1 / -1;
    border-left: none;
    padding-left: 0;
    border-top: 1px solid rgba(247, 242, 233, .15);
    padding-top: 2rem;
    display: grid;
    grid-template-columns: 1fr auto;
    gap: .5rem 2rem;
    align-items: center;
  }

  .site-footer__cta-headline {
    margin-bottom: .2rem;
  }

  .site-footer__cta-btn {
    grid-column: 2;
    grid-row: 1 / 3;
  }
}

@media (max-width: 900px) {
  .hero__inner {
    grid-template-columns: 1fr;
  }

  .hero__visual {
    order: -1;
  }

  .hero__img-wrap {
    max-width: 520px;
    margin-inline: auto;
  }

  .studio-grid {
    grid-template-columns: 1fr;
  }

  .maison-section__inner {
    grid-template-columns: 1fr;
  }

  .stats-band--inline .stats-band__inner {
    grid-template-columns: repeat(4, 1fr);
  }

  .services-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 768px) {
  .site-footer__top {
    grid-template-columns: 1fr;
  }

  .site-footer__cta-block {
    grid-column: auto;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 1rem;
  }

  .site-footer__cta-btn {
    grid-column: auto;
    grid-row: auto;
  }
}

@media (max-width: 680px) {
  :root { --nav-h: 74px; }

  .site-nav__links,
  .site-nav__cta {
    display: none;
  }

  .site-nav__toggle {
    display: block;
  }

  .site-nav__name {
    font-size: .9375rem;
  }

  .brand-logo-icon {
    height: 54px;
  }

  .brand-logo-wordmark {
    height: 72px;
  }

  .site-nav.is-open .site-nav__links {
    display: flex;
    flex-direction: column;
    position: fixed;
    top: var(--nav-h);
    left: 0;
    right: 0;
    background: var(--pierre);
    padding: 1.5rem var(--pad-x);
    box-shadow: 0 8px 24px rgba(43, 36, 32, .12);
    border-bottom: 1px solid var(--line);
    gap: .1rem;
  }

  .site-nav.is-open .site-nav__lang {
    display: flex;
    justify-content: center;
    padding: .75rem 0 .5rem;
    gap: .5rem;
    margin-left: 0;
  }

  .site-nav.is-open .site-nav__cta-mobile-wrap {
    display: block;
    padding-top: .75rem;
  }

  .site-nav.is-open .site-nav__cta--mobile {
    display: inline-flex;
    width: 100%;
    justify-content: center;
  }

  .stats-band--inline .stats-band__inner {
    grid-template-columns: repeat(2, 1fr);
  }

  .services-grid {
    grid-template-columns: 1fr;
  }

  .site-footer__nav {
    grid-template-columns: 1fr;
  }

  .site-footer__bottom {
    flex-direction: column;
    align-items: flex-start;
  }

  .amenity-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 420px) {
  .hero__actions {
    flex-direction: column;
  }

  .btn-primary,
  .btn-outline {
    width: 100%;
    justify-content: center;
  }
}

/* ── DROPDOWN NAV ─────────────────────────────────────────────────────────── */
.nav-dropdown {
  position: relative;
}

.nav-dropdown__toggle {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  background: none;
  border: none;
  cursor: pointer;
  font-size: .9rem;
  font-weight: 500;
  font-family: inherit;
  color: var(--encre);
  padding: .35rem .7rem;
  border-radius: var(--radius);
  white-space: nowrap;
  transition: color .15s, background .15s;
}

.nav-dropdown__toggle:hover,
.nav-dropdown--active .nav-dropdown__toggle {
  color: var(--bordeaux);
  background: var(--pierre-2);
}

.nav-dropdown__chevron {
  width: 10px;
  height: 6px;
  flex-shrink: 0;
  transition: transform .2s;
}

.nav-dropdown.is-open .nav-dropdown__chevron {
  transform: rotate(180deg);
}

.nav-dropdown__menu {
  display: none;
  position: absolute;
  top: calc(100% + .4rem);
  left: 0;
  min-width: 220px;
  background: var(--pierre);
  border: 1px solid var(--line);
  border-radius: calc(var(--radius) + 2px);
  box-shadow: 0 6px 20px rgba(43, 36, 32, .1);
  list-style: none;
  padding: .4rem 0;
  z-index: 150;
}

.nav-dropdown.is-open .nav-dropdown__menu {
  display: block;
}

.nav-dropdown__menu a {
  display: block;
  padding: .55rem 1.1rem;
  font-size: .875rem;
  font-weight: 500;
  color: var(--encre);
  text-decoration: none;
  transition: color .15s, background .15s;
  white-space: nowrap;
}

.nav-dropdown__menu a:hover,
.nav-dropdown__menu a[aria-current="page"] {
  background: var(--pierre-2);
  color: var(--bordeaux);
}

/* Mobile: dropdown as inline accordion inside hamburger menu */
@media (max-width: 680px) {
  .nav-dropdown__menu {
    position: static;
    border: none;
    border-radius: 0;
    box-shadow: none;
    background: var(--pierre-2);
    padding: 0;
    margin: .2rem 0 .2rem .75rem;
    display: none !important;
  }

  .nav-dropdown.is-open .nav-dropdown__menu {
    display: block !important;
  }

  .nav-dropdown__toggle {
    width: 100%;
    justify-content: space-between;
    padding: .5rem .75rem;
    border-radius: var(--radius);
  }

  .nav-dropdown__menu a {
    padding: .45rem .75rem;
    font-size: .875rem;
  }
}

/* Desktop hover: ouvre le sous-menu au survol (souris fine uniquement, jamais tactile) */
@media (hover: hover) and (pointer: fine) {
  .nav-dropdown:hover .nav-dropdown__menu {
    display: block;
  }
  .nav-dropdown:hover .nav-dropdown__chevron {
    transform: rotate(180deg);
  }
  /* Pont transparent qui comble le trou de 0.4rem entre le bouton et le menu.
     Sans ça, la souris quitte .nav-dropdown en traversant le gap → hover perdu → menu clignote. */
  .nav-dropdown__menu::before {
    content: '';
    position: absolute;
    top: -.4rem;
    left: 0;
    right: 0;
    height: .4rem;
  }
}

/* ── PLACE LIST (restaurants, bars, shops — page quartier) ───────────────── */
.place-list {
  list-style: none;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: .75rem 1.5rem;
  margin-bottom: 2rem;
}

.place-item {
  padding: .875rem 1rem;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: calc(var(--radius) + 2px);
}

.place-item__name {
  font-weight: 600;
  font-size: .9375rem;
  color: var(--bordeaux);
  margin-bottom: .2rem;
  line-height: 1.3;
}

.place-item__addr {
  font-size: .8125rem;
  color: var(--or-deep);
  font-weight: 500;
  margin-bottom: .2rem;
  letter-spacing: .02em;
}

.place-item__walk {
  font-size: .75rem;
  color: var(--mute);
  margin-bottom: .3rem;
  letter-spacing: .01em;
}

.place-item__desc {
  font-size: .875rem;
  color: var(--mute);
  line-height: 1.55;
  margin: 0;
}

/* ── TRANSPORT LOGOS (page quartier) ─────────────────────────────────────── */
.transport-logos {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem;
  margin-top: 1.5rem;
  margin-bottom: 2rem;
}

.transport-card {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1rem 1.25rem;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: calc(var(--radius) + 2px);
}

.transport-card img {
  height: 44px;
  width: 80px;
  object-fit: contain;
  object-position: left center;
  flex-shrink: 0;
  border: none;
  border-radius: 0;
  margin: 0;
}

.transport-card__info {
  display: flex;
  flex-direction: column;
  gap: .1rem;
}

.transport-card__name {
  font-weight: 600;
  font-size: .9rem;
  color: var(--encre);
  line-height: 1.3;
}

.transport-card__desc {
  font-size: .8125rem;
  color: var(--mute);
}

.transport-card__link {
  font-size: .8125rem;
  color: var(--bordeaux);
  text-decoration: none;
  margin-top: .15rem;
}

.transport-card__link:hover {
  text-decoration: underline;
}

@media (max-width: 680px) {
  .place-list {
    grid-template-columns: 1fr;
  }

  .transport-logos {
    grid-template-columns: 1fr;
  }
}

/* ── ACCESSIBILITÉ ───────────────────────────────────────────────────────── */
:focus-visible {
  outline: 2.5px solid var(--or);
  outline-offset: 3px;
  border-radius: 2px;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ── SKIP LINK ───────────────────────────────────────────────────────────── */
.skip-link {
  position: absolute;
  top: -100%;
  left: 1rem;
  background: var(--bordeaux);
  color: var(--pierre);
  padding: .5rem 1rem;
  font-weight: 600;
  font-size: .875rem;
  border-radius: var(--radius);
  z-index: 200;
  text-decoration: none;
}

.skip-link:focus {
  top: 1rem;
}


/* ═══════════════════════════════════════════════════════════════════════════
   HOME v2 — NOUVELLES SECTIONS (ajout 2026-06-25)
   Hero photo HD · Réservation directe · Recette · Avis clients
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── HERO PHOTO BACKGROUND ───────────────────────────────────────────────── */
/* HERO image — options (décommenter celle voulue) :
   04_studio_coin_salon_bureau.jpg
   04_studio_coin_salon_bureau_1920.jpg  <-- ACTIVE (Lot C : 1920px q82, 381 KB)
   01_hero_accueil_1920x1080.jpg (a du texte incrusté, éviter) */
/* Pour changer : remplacer l'URL ci-dessous + mettre à jour le commentaire dans gen_core_v2.py */
.hero--photo {
  background:
    linear-gradient(rgba(43, 16, 31, .52), rgba(43, 16, 31, .48)),
    url('/assets/img/wix/04_studio_coin_salon_bureau_1920.jpg') center/cover no-repeat;
  padding-block: clamp(6rem, 16vw, 11rem);
}

.hero--photo .hero__inner {
  grid-template-columns: 1fr;
  max-width: 780px;
}

.hero--photo .hero__h1 {
  color: #fff;
}

.hero--photo .hero__lede {
  color: rgba(247, 242, 233, .9);
  max-width: 54ch;
}

.hero--photo .eyebrow--light {
  color: var(--or);
  display: block;
  margin-bottom: .75rem;
}

.hero--photo .btn-outline,
.hero--photo .btn-outline--light {
  border-color: rgba(247, 242, 233, .75);
  color: var(--pierre);
}

.hero--photo .btn-outline:hover,
.hero--photo .btn-outline--light:hover {
  background: rgba(247, 242, 233, .12);
  color: #fff;
  border-color: var(--pierre);
}

/* ── STUDIO CARD — highlights line (nouveau champ) ──────────────────────── */
.studio-card__highlights {
  font-size: .8125rem;
  color: var(--bordeaux);
  margin-bottom: .25rem;
  font-weight: 500;
}

/* ── RÉSERVATION DIRECTE ─────────────────────────────────────────────────── */
.direct-section {
  background: var(--bordeaux-deep);
  color: var(--pierre);
  padding-block: var(--section-gap);
}

.direct-section__header {
  margin-bottom: 2rem;
}

.direct-section__eyebrow {
  display: block;
  font-size: .75rem;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--or);
  margin-bottom: .75rem;
}

.direct-section__title {
  font-family: 'Fraunces', serif;
  font-weight: 600;
  font-size: clamp(1.625rem, 3.5vw, 2.5rem);
  color: #fff;
  line-height: 1.15;
  margin-bottom: .75rem;
}

.direct-section__sub {
  font-size: 1.0625rem;
  color: var(--pierre-2);
  max-width: 52ch;
}

/* Lien secondaire vers la page « Disponibilités et tarifs » (fond bordeaux) */
.direct-section__dispo {
  margin-top: .9rem;
}

.direct-section__dispo a {
  color: var(--or);
  text-decoration: underline;
  text-underline-offset: 3px;
  font-size: .9375rem;
}

.direct-section__dispo a:hover {
  color: #fff;
}

.direct-args {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.25rem;
  margin-bottom: 2rem;
}

.direct-arg {
  background: rgba(255, 255, 255, .07);
  border: 1px solid rgba(255, 255, 255, .1);
  border-radius: calc(var(--radius) + 2px);
  padding: 1.5rem 1.25rem;
  text-align: center;
}

.direct-arg__icon {
  color: var(--or);
  margin-bottom: .75rem;
}

.direct-arg svg {
  width: 36px;
  height: 36px;
  display: inline-block;
}

.direct-arg__label {
  font-weight: 600;
  font-size: .9375rem;
  color: #fff;
  margin-bottom: .375rem;
}

.direct-arg__detail {
  font-size: .8125rem;
  color: var(--pierre-2);
  line-height: 1.5;
}

.annulation-bloc {
  background: rgba(238, 181, 10, .1);
  border-left: 3px solid var(--or);
  border-radius: 0 var(--radius) var(--radius) 0;
  padding: 1.25rem 1.5rem;
  margin-bottom: 1.75rem;
}

.annulation-bloc__title {
  font-weight: 600;
  color: var(--or);
  margin-bottom: .375rem;
}

.annulation-bloc__text {
  font-size: .9375rem;
  color: var(--pierre-2);
  line-height: 1.65;
}

.tarifs-inline {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
  margin-bottom: 2rem;
  align-items: center;
}

.tarifs-inline__label {
  font-size: .9375rem;
  color: var(--pierre-2);
  font-style: italic;
}

.tarif-pill {
  background: var(--or);
  color: var(--bordeaux-deep);
  font-weight: 700;
  font-size: .9375rem;
  padding: .4rem 1rem;
  border-radius: 99px;
}

.tarif-pill em {
  font-style: normal;
  font-weight: 400;
  font-size: .8125rem;
}

/* ── RECETTE DU SÉJOUR RÉUSSI ────────────────────────────────────────────── */
.recette-section {
  background: var(--pierre);
}

.recette-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 2rem 3rem;
  margin-top: 1.5rem;
}

.recette-item {
  display: flex;
  gap: 1.25rem;
  align-items: flex-start;
}

.recette-item__num {
  font-family: 'Fraunces', serif;
  font-size: 2.75rem;
  font-weight: 700;
  color: var(--or);
  line-height: 1;
  flex-shrink: 0;
  min-width: 2.5rem;
}

.recette-item__title {
  font-weight: 600;
  font-size: 1rem;
  color: var(--bordeaux);
  margin-bottom: .375rem;
}

.recette-item__text {
  font-size: .9375rem;
  color: var(--mute);
  line-height: 1.65;
}

/* ── AVIS CLIENTS ────────────────────────────────────────────────────────── */
/* Photo section : 02_section_principale_2000.jpg (Lot C : 2000px q82, 209 KB) */
.avis-section {
  position: relative;
  background:
    linear-gradient(rgba(43, 16, 31, .72), rgba(43, 16, 31, .72)),
    url('/assets/img/wix/02_section_principale_2000.jpg') center/cover no-repeat;
  padding-block: var(--section-gap);
  color: var(--pierre);
}

.avis-section .section__title {
  color: #fff;
}

.avis-section .section__sub {
  color: var(--pierre-2);
}

.avis-cards {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1rem;
  margin-bottom: 2rem;
}

.avis-card {
  background: rgba(247, 242, 233, .96);
  border-radius: calc(var(--radius) + 2px);
  padding: 1.375rem 1.25rem;
  display: flex;
  flex-direction: column;
  gap: .75rem;
}

.avis-card__stars {
  color: var(--or);
  font-size: 1rem;
  letter-spacing: .08em;
}

.avis-card__quote {
  font-size: .875rem;
  color: var(--encre);
  line-height: 1.65;
  flex: 1;
}

.avis-card__footer {
  display: flex;
  flex-direction: column;
  gap: .125rem;
}

.avis-card__author {
  font-size: .8125rem;
  font-weight: 600;
  color: var(--mute);
  text-transform: uppercase;
  letter-spacing: .05em;
}

.avis-card__date {
  font-size: .75rem;
  color: var(--mute);
  margin: 0;
}

.avis-card__google {
  display: flex;
  align-items: center;
  gap: .375rem;
  font-size: .6875rem;
  color: var(--mute);
  opacity: .7;
  margin-top: .25rem;
}

.avis-card__google-g {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
}

.avis-cta {
  text-align: center;
}

.avis-cta a {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  background: transparent;
  color: var(--pierre);
  border: 1.5px solid rgba(247, 242, 233, .6);
  padding: .8rem 1.75rem;
  border-radius: var(--radius);
  font-weight: 500;
  font-size: .9375rem;
  text-decoration: none;
  transition: background .15s, border-color .15s;
}

.avis-cta a:hover {
  background: rgba(247, 242, 233, .1);
  border-color: var(--pierre);
}

/* ── RESPONSIVE — nouvelles sections ─────────────────────────────────────── */
@media (max-width: 1024px) {
  .direct-args {
    grid-template-columns: 1fr 1fr;
  }

  .avis-cards {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 768px) {
  .hero--photo .hero__inner {
    max-width: 100%;
  }

  .direct-args {
    grid-template-columns: 1fr;
  }

  .recette-grid {
    grid-template-columns: 1fr;
  }

  .avis-cards {
    grid-template-columns: 1fr;
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero--photo {
    background-attachment: scroll;
  }
}

/* ── WINE PAGE ──────────────────────────────────────────────────────────── */
.wine-intro-contact {
  font-size: 0.9375rem;
  font-style: italic;
  color: var(--mute);
  margin-top: 0.75rem;
}
.wine-intro-band {
  width: 100%;
  padding-block: 1.5rem 1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 2rem;
  flex-wrap: wrap;
  margin-bottom: 0.5rem;
}
.wine-intro-img {
  border: none !important;
  margin: 0 !important;
  flex-shrink: 0;
}
.wine-intro-img--vendange {
  max-height: 90px;
  width: auto;
  object-fit: contain;
  border-radius: var(--radius);
}
.wine-intro-img--logo {
  max-height: 90px;
  width: auto;
  object-fit: contain;
  mix-blend-mode: multiply;
}
@media (max-width: 640px) {
  .wine-intro-band {
    flex-direction: column;
    align-items: center;
    gap: 1.25rem;
  }
  .wine-intro-img--vendange {
    max-height: 160px;
    width: 100%;
    object-fit: cover;
  }
  .wine-intro-img--logo {
    max-height: 90px;
  }
}
.wine-card__note {
  padding: 0.25rem 0 0.25rem 0.75rem;
  border-left: 2px solid rgba(97, 27, 46, .35);
  margin-block: 0.5rem;
  font-style: italic;
  color: var(--mute);
}
.wine-card__detail {
  font-size: 0.9rem;
  color: var(--mute);
  margin-bottom: 0.3rem;
}
.wine-card__price {
  font-weight: 600;
  font-size: 1.05rem;
  color: var(--bordeaux);
  margin-bottom: 0.5rem;
}
.wine-sold-out {
  display: inline-block;
  color: #c0392b;
  font-weight: 700;
  font-size: 0.95rem;
  margin-block: 0.5rem;
  padding: 0.2rem 0.6rem;
  background: rgba(192, 57, 43, 0.08);
  border-radius: var(--radius);
}
.wine-vivino-img {
  max-width: 160px;
  max-height: 55px;
  object-fit: contain;
  border: none !important;
  margin: 0.25rem 0 0.5rem !important;
  display: block;
}
.wine-order-table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 1.5rem;
  font-size: 0.95rem;
}
.wine-order-table th {
  text-align: left;
  padding: 0.12rem 0.45rem;
  border-bottom: 2px solid var(--line);
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--mute);
}
.wine-order-table td {
  padding: 0.18rem 0.45rem;
  border-bottom: 1px solid var(--line);
  vertical-align: middle;
  line-height: 1.25;
}
.wine-order-table tr:last-child td { border-bottom: none; }
.wine-order-table .wine-btn {
  padding: 0.25rem 0.9rem;
  font-size: 0.82rem;
  margin: 0;
}

/* ── WINE CARD 2-COLUMN LAYOUT ───────────────────────────────────────────── */
.wine-card {
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: 2rem;
  align-items: center;
  margin-block: 2rem;
  padding: 1.5rem 0;
}
.wine-card + .wine-card {
  border-top: 1px solid var(--line);
}
.wine-card--no-img {
  grid-template-columns: 1fr;
}
.wine-card__img-col {
  display: flex;
  align-items: center;
  justify-content: center;
}
.wine-card__img-col img {
  width: auto;
  max-width: 180px;
  max-height: 280px;
  object-fit: contain;
  margin: 0 auto !important;
  display: block;
  border: none !important;
  background: transparent;
}
.wine-card__body {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}
.wine-card__body h2 {
  margin-top: 0.25rem;
  margin-bottom: 0.25rem;
}
.wine-card__body p {
  margin-top: 0.25rem;
  margin-bottom: 0.25rem;
}
.wine-card__body .wine-btn {
  margin-top: 0.75rem;
  align-self: flex-start;
}
.wine-vivino-link {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: 0.5rem;
  text-decoration: none;
  color: inherit;
}
.wine-vivino-link:hover .wine-vivino-label {
  text-decoration: underline;
}
.wine-vivino-label {
  font-size: 0.85rem;
  color: var(--mute);
  font-style: italic;
}
.wine-region-section {
  background: var(--pierre);
  border-radius: calc(var(--radius) + 2px);
  padding: 1.25rem 1.5rem;
  margin-block: 2rem 1.5rem;
}
.wine-region-title {
  font-size: 1.3rem;
  font-weight: 700;
  color: var(--encre);
  border-left: 3px solid var(--bordeaux);
  padding-left: 0.75rem;
  margin: 0 0 0.35rem;
}
.wine-region-section .wine-region-desc {
  font-size: 0.93rem;
  color: var(--mute);
  margin: 0;
  max-width: 100%;
}
.wine-family-title {
  font-size: 2rem;
  font-weight: 800;
  color: var(--encre);
  margin-top: 3rem;
  margin-bottom: 0.5rem;
}
.wine-family-title::before {
  content: '';
  display: block;
  width: 2.5rem;
  height: 3px;
  background: var(--or);
  border-radius: 2px;
  margin-bottom: 0.65rem;
}
@media (max-width: 640px) {
  .wine-card {
    grid-template-columns: 1fr;
  }
  .wine-card__img-col {
    display: flex;
    justify-content: center;
  }
  .wine-card__img-col img {
    max-width: 160px;
    max-height: 220px;
  }
}

/* ── NOTE DE VÉRIFICATION — pages de faits (FAQ, quartier, préparez) ─────── */
/* Utilitaire discret, pas un composant : une seule ligne en fin de <main>,   */
/* juste avant le pied de page. Aucune classe utilitaire de ce type           */
/* n'existait — voir PREVIEW_DECISIONS.md § « Date de vérification ».         */
.verified-note {
  max-width: 1140px;
  margin-inline: auto;
  padding-inline: var(--pad-x);
  padding-block-end: clamp(1.5rem, 3vw, 2.5rem);
  font-size: .8125rem;
  color: var(--mute);
}

/* ── DISPONIBILITES ET TARIFS — page regeneree chaque nuit ───────────────── */
/* Classe additionnelle sur .content-zone. Ne touche aucune autre page.       */
.dispo-content.content-zone {
  max-width: 900px;
}

.dispo-updated {
  font-size: 0.9375rem;
  color: var(--mute);
  margin-bottom: 2rem;
}

.dispo-table-wrap {
  overflow-x: auto;
  margin-top: 1rem;
}

.dispo-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9375rem;
}

.dispo-table th {
  text-align: left;
  padding: 0.5rem 0.6rem;
  border-bottom: 2px solid var(--line);
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--mute);
  white-space: nowrap;
}

.dispo-table td {
  padding: 0.6rem;
  border-bottom: 1px solid var(--line);
  vertical-align: middle;
  line-height: 1.35;
  color: var(--encre);
}

.dispo-table tr:last-child td { border-bottom: none; }

.dispo-minstay {
  font-size: 0.8125rem;
  color: var(--mute);
}

.dispo-link {
  display: inline-block;
  white-space: nowrap;
  font-weight: 600;
}

.dispo-compare {
  margin-top: 1rem;
  font-size: 0.9375rem;
  color: var(--mute);
}

.dispo-discounts {
  margin-bottom: 2rem;
  font-size: 0.9375rem;
  color: var(--encre);
}

.dispo-full {
  margin-top: 1rem;
  color: var(--encre);
}

.dispo-footnote {
  margin-top: 3rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--line);
  font-size: 0.875rem;
  color: var(--mute);
}

@media (max-width: 640px) {
  .dispo-table thead { display: none; }
  .dispo-table, .dispo-table tbody, .dispo-table tr, .dispo-table td { display: block; width: 100%; }
  .dispo-table tr {
    border-bottom: 1px solid var(--line);
    padding-block: 0.6rem;
  }
  .dispo-table tr:last-child { border-bottom: none; }
  .dispo-table td {
    border-bottom: none;
    padding: 0.15rem 0;
  }
  .dispo-table td::before {
    content: attr(data-label) " ";
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--mute);
    display: block;
  }
}

/* ── MARK: panier-signature-20260912 — bloc panier (accueil) + note studios ── */
.panier-section__inner { max-width: 720px; margin: 0 auto; text-align: center; }
.panier-section__body { margin: 0.75rem auto 1.5rem; line-height: 1.7; }
.panier-photo { margin: 1.5rem auto 1.75rem; }
.panier-photo img { display: block; width: 100%; max-height: 720px; object-fit: cover; object-position: center; border-radius: 2px; }
.panier-quote {
  margin: 0 auto; padding: 1rem 1.5rem; max-width: 560px;
  border-left: 3px solid currentColor; text-align: left; font-style: italic;
}
.panier-quote p { margin: 0; }
.panier-quote__src { margin-top: 0.5rem; font-style: normal; font-size: 0.85rem; opacity: 0.7; }
.studio-header__note { margin-top: 0.6rem; font-size: 0.9rem; opacity: 0.85; }


/* ═══ LIFTING-20260925 — couche de modernisation validée par Greg le 25/09/2026 (source : MacBdx travail/bsm-lifting/site-apercu/assets/css/site-lifting.css). Retour arrière : site.css.avant-lifting-20260925 ═══ */
/* ══════════════════════════════════════════════════════════════════════════
   site-lifting.css — lot 1
   Couche de surcharge CSS, chargée APRÈS site.css. Ne modifie aucune classe
   de structure ni de contenu : uniquement rayons, ombres, boutons, nav,
   titres, cartes, halos, pastilles, accordéon FAQ, apparitions au défilement.
   Valeurs reprises telles quelles de /apercu-lifting.html (charte validée).
   ══════════════════════════════════════════════════════════════════════════ */

:root {
  /* Rayons : le --radius existant (4px) est utilisé partout via
     calc(var(--radius) + 2px) — on l'augmente pour obtenir des cartes à
     ~16px sans toucher un seul sélecteur du fichier de base. */
  --radius: 14px;
  --r-s: 10px;
  --r-m: 18px;
  --r-l: 28px;
  --shadow-1: 0 1px 2px rgba(43,36,32,.06), 0 6px 20px -8px rgba(43,36,32,.18);
  --shadow-2: 0 2px 4px rgba(43,36,32,.06), 0 24px 48px -16px rgba(70,16,31,.35);
  --ease: cubic-bezier(.2,.7,.2,1);
}

/* ── 1. Rayons génériques sur les blocs qui n'utilisent pas --radius ──────── */
.avis-card,
.faq-item,
.discover-btn,
.wine-btn {
  border-radius: var(--r-m);
}

/* ── 2. Boutons en pilule + ombre dorée + flèche qui glisse ──────────────── */
.btn-primary,
.btn-outline,
.site-nav__cta,
.wine-btn,
.discover-btn,
.avis-cta a {
  border-radius: 999px;
  transition: transform .3s var(--ease), box-shadow .3s var(--ease), background .3s var(--ease), border-color .3s var(--ease), color .3s var(--ease);
}

.btn-primary,
.site-nav__cta,
.wine-btn {
  box-shadow: 0 10px 26px -10px rgba(238,181,10,.65);
}

.btn-primary:hover,
.site-nav__cta:hover,
.wine-btn:hover {
  transform: translateY(-2px) translateX(1px);
  box-shadow: 0 16px 34px -10px rgba(238,181,10,.75);
}

.btn-outline:hover {
  transform: translateY(-2px);
}

/* Bouton contour en verre dépoli sur fond photo (hero--photo, avis-section) */
.hero--photo .btn-outline,
.hero--photo .btn-outline--light,
.avis-cta a {
  backdrop-filter: blur(6px) saturate(1.2);
  -webkit-backdrop-filter: blur(6px) saturate(1.2);
  background: rgba(255,255,255,.06);
}

.hero--photo .btn-outline:hover,
.hero--photo .btn-outline--light:hover,
.avis-cta a:hover {
  background: rgba(255,255,255,.16);
}

/* ── 3. Navigation : barre flottante arrondie, verre dépoli clair ─────────── */
.site-nav {
  background: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border-bottom: none;
  height: auto;
  padding: 14px var(--pad-x) 8px; /* léger espace sous le menu, commun à toutes les pages */
}

.site-nav__inner {
  height: auto;
  max-width: calc(var(--max-w) - 1rem);
  padding: .65rem .75rem .65rem 1.1rem;
  border-radius: 999px;
  background: rgba(247,242,233,.86);
  backdrop-filter: blur(14px) saturate(1.3);
  -webkit-backdrop-filter: blur(14px) saturate(1.3);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-1);
  /* Défaut préexistant en production (mesuré, pas introduit par ce lot) : le
     contenu de la nav (logo + liens + FR/EN/ES + bouton) est plus large que
     .site-nav__inner à toutes les largeurs desktop testées — 1024/1280/1440 —
     ce qui produit un vrai débordement horizontal de la PAGE en production
     (document.documentElement.scrollWidth > innerWidth), simplement invisible
     car le fond de la barre est uni sur toute la largeur. Le fond en pilule
     de ce lot rend le débordement visible (le bouton semble sortir de la
     pilule). Resserré ci-dessous pour que tout rentre dans la pilule. */
  gap: 1.1rem;
}

/* Économies de largeur pour faire rentrer logo + liens + langues + bouton
   dans la pilule (voir commentaire ci-dessus). Purement cosmétique, aucun
   contenu retiré : gap et paddings resserrés, drapeaux décoratifs masqués
   (le texte FR/EN/ES reste). */
.site-nav__links { gap: .05rem; }
.site-nav__links a { padding: .35rem .5rem; }
.site-nav__lang { margin-left: .9rem; gap: 0; }
.lang-flag { display: none; }

/* Le contenu desktop (liens + langues + bouton) ne rentre plus du tout dans
   la pilule sous ~1220px, même resserré (mesuré : à 1024px il manque encore
   ~180px). Sous ce seuil, bascule vers le menu compact existant (logo +
   bouton burger), au lieu de laisser déborder. Reprend le mécanisme du bloc
   `@media (max-width:680px)` de site.css (mêmes classes, même JS de bascule
   `.is-open`), simplement étendu à un seuil plus large ; positionnement du
   panneau en `absolute` (ancré sur `.site-nav`, déjà `position:sticky`) au
   lieu d'un `top` en pixels fixes, pour s'adapter à la hauteur réelle de la
   pilule à n'importe quelle largeur. */
@media (max-width: 1220px) {
  .site-nav__links,
  .site-nav__cta:not(.site-nav__cta--mobile) {
    display: none;
  }

  .site-nav__toggle {
    display: block;
  }

  .site-nav.is-open .site-nav__links {
    display: flex;
    flex-direction: column;
    position: absolute;
    top: 100%;
    left: var(--pad-x);
    right: var(--pad-x);
    margin-top: 10px;
    background: var(--pierre);
    padding: 1.5rem var(--pad-x);
    border-radius: var(--r-m);
    box-shadow: var(--shadow-2);
    border: 1px solid var(--line);
    gap: .1rem;
    z-index: 5;
  }

  .site-nav.is-open .site-nav__lang {
    display: flex;
    justify-content: center;
    padding: .75rem 0 .5rem;
    gap: .5rem;
    margin-left: 0;
  }

  .site-nav.is-open .site-nav__cta-mobile-wrap {
    display: block;
    padding-top: .75rem;
  }

  .site-nav.is-open .site-nav__cta--mobile {
    display: inline-flex;
    width: 100%;
    justify-content: center;
  }
}

.site-nav__links a {
  position: relative;
  background: transparent !important;
}

.site-nav__links a::after {
  content: "";
  position: absolute;
  left: .7rem;
  right: .7rem;
  bottom: -1px;
  height: 1.5px;
  background: var(--or);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .3s var(--ease);
}

.site-nav__links a:hover,
.site-nav__links a[aria-current="page"] {
  color: var(--bordeaux) !important;
}

.site-nav__links a:hover::after,
.site-nav__links a[aria-current="page"]::after {
  transform: scaleX(1);
}

.site-nav.is-open .site-nav__links {
  top: calc(var(--nav-h) + 10px);
  border-radius: var(--r-m);
  box-shadow: var(--shadow-2);
  left: var(--pad-x);
  right: var(--pad-x);
}

/* ── 4. Titres : Fraunces plus généreux, eyebrow avec trait or ───────────── */
.hero__h1,
.page-header__h1,
.studio-header__name,
.section__title {
  font-weight: 500;
  letter-spacing: -.015em;
}

.hero__h1 { font-size: clamp(2.4rem, 5.2vw, 4rem); }
.page-header__h1 { font-size: clamp(2rem, 4.4vw, 3rem); }
.section__title { font-size: clamp(1.7rem, 3.6vw, 2.6rem); }

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
}

.eyebrow::before {
  content: "";
  width: 22px;
  height: 1.5px;
  background: currentColor;
  flex-shrink: 0;
}

/* ── 5. Cartes : relèvement + ombre au survol, zoom lent des images ──────── */
.studio-card,
.blog-card,
.amenity-card {
  border-radius: var(--r-m);
  transition: transform .4s var(--ease), box-shadow .4s var(--ease);
}

.studio-card:hover,
.blog-card:hover {
  transform: translateY(-5px);
  box-shadow: var(--shadow-2);
}

.amenity-card:hover {
  box-shadow: var(--shadow-1);
}

.studio-card__img img,
.blog-card__img img {
  transition: transform 1s var(--ease);
}

.studio-card:hover .studio-card__img img,
.blog-card:hover .blog-card__img img {
  transform: scale(1.06);
}

.service-item {
  border-radius: var(--r-s);
  transition: background .3s var(--ease), transform .3s var(--ease);
}

.service-item:hover {
  transform: translateY(-3px);
}

/* ── 6. Sections sombres : halo doré discret dans un coin ────────────────── */
.section--dark,
.direct-section,
.studio-header,
.avis-section {
  position: relative;
  overflow: hidden;
}

.section--dark::before,
.direct-section::before,
.studio-header::before,
.avis-section::before {
  content: "";
  position: absolute;
  width: 620px;
  height: 620px;
  right: -220px;
  top: -260px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(238,181,10,.16), transparent 65%);
  pointer-events: none;
  z-index: 0;
}

.section--dark > *,
.direct-section > *,
.studio-header > *,
.avis-section > * {
  position: relative;
  z-index: 1;
}

/* ── 7. Pastilles / étiquettes déjà en pilule dans site.css (chip) ───────── */
.chip {
  transition: background .2s;
}

/* ── 8. Photos : coins arrondis, ombre sur les images principales ───────── */
.content-zone img,
.photo-carousel {
  border-radius: var(--r-m);
}

.hero__img-wrap {
  border-radius: var(--r-m);
  box-shadow: var(--shadow-2);
}

/* Défaut préexistant en production (confirmé identique sur bordeauxsaintmichel.com,
   pas introduit par ce lot) : `.photo-carousel__track` est un flex row dont la
   hauteur est fixée par la photo la PLUS HAUTE (une seule photo portrait par
   fiche studio, ex. 1600×2119, contre ~1600×1200 pour les autres) — quand la
   diapositive affichée est une photo paysage plus courte que cette hauteur,
   un grand vide de fond `--pierre-2` apparaît sous la photo (vérifié : bleu,
   rouge, jaune touchés ; blanc épargné, ses 5 photos sont toutes 4/3).
   Corrigé en imposant un cadre de rapport fixe + recadrage `object-fit:cover`
   (au lieu d'une hauteur qui dépend de la diapositive la plus haute) : chaque
   photo remplit exactement le cadre, plus de vide, quelle que soit la
   diapositive affichée. */
.photo-carousel {
  aspect-ratio: 4 / 3;
}

.photo-carousel__track,
.photo-carousel__slide {
  height: 100%;
}

.photo-carousel__slide img {
  height: 100%;
  max-height: none;
  object-fit: cover;
}

/* ── 9. Apparition douce au défilement (amélioration progressive) ───────── */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .studio-card,
    .blog-card,
    .avis-card,
    .service-item,
    .amenity-card,
    .faq-item {
      animation: rv-in linear both;
      animation-timeline: view();
      animation-range: entry 0% cover 30%;
    }

    @keyframes rv-in {
      from { opacity: 0; transform: translateY(22px); }
      to   { opacity: 1; transform: none; }
    }
  }
}

@media (prefers-reduced-motion: reduce) {
  .studio-card, .blog-card, .avis-card, .service-item, .amenity-card, .faq-item {
    animation: none !important;
  }
}

/* ── 10. Accordéon FAQ : cartes arrondies, séparation aérée, signe or ────── */
.faq-list {
  border-top: none;
  display: grid;
  gap: .85rem;
}

.faq-item {
  border-bottom: none;
  border: 1px solid var(--line);
  background: #fff;
  padding: 0 1.35rem;
  transition: box-shadow .3s var(--ease);
}

.faq-item:hover {
  box-shadow: var(--shadow-1);
}

.faq-item__q {
  padding: 1.35rem 0;
}

.faq-item__icon {
  background: transparent;
  border: 1.5px solid var(--or-deep);
  color: var(--or-deep);
  font-weight: 700;
}

details[open] .faq-item__icon {
  background: var(--or);
  border-color: var(--or);
  color: var(--bordeaux-deep);
}

.faq-item__a {
  padding-bottom: 1.35rem;
}

/* ── Défaut préexistant repéré au rendu (pas introduit par ce lot) : `.content-zone a`
   (0,1,1) bat `.btn-primary`/`.btn-outline` (0,1,0) → le bouton jaune se retrouve
   souligné dans les pages éditoriales (quel-studio-choisir, préparez-votre-séjour).
   Correctif ciblé, sans toucher .content-zone (interdit par la règle permanente). ── */
.content-zone .btn-primary,
.content-zone .btn-outline {
  text-decoration: none;
}

/* Même défaut préexistant sur la grille du blog : `blog.html` place
   `.blog-grid` dans `.content-zone`, et `.content-zone a` souligne alors le
   titre et « Lire l'article » de chaque `.blog-card` (le lien-carte entier). */
.content-zone .blog-card,
.content-zone .blog-card:hover {
  text-decoration: none;
}

/* ── Piège connu : jamais de display:flex sur l'<a>.service-item lui-même ─
   (ici c'est un <div>, le <a> parent hérite du stretch de grille — cf.
   commentaire de site.css ligne ~633). Ne pas toucher .services-grid. ──── */

/* ═══ fin LIFTING-20260925 ═══ */

/* ═══ LIFTING-ACCUEIL-20260925 — structure de l'accueil (lot 2, validée sur
   /apercu-lifting.html). Classes préfixées lift-/.lift-home : ne touche
   aucune autre page (grep : classes lift-* et body.lift-home-page absentes
   de toute page hors index). Réutilise les tokens du bloc LIFTING-20260925
   (--bordeaux, --or, --pierre, --r-*, --shadow-*, --ease, --max-w, --pad-x).
   Retour arrière : gen_core_v2.py.avant-lifting-accueil-20260925 (à créer
   par l'agent principal avant déploiement) + site.css.avant-lifting-20260925
   (état antérieur au lot 1, plus ancien). ═══ */

/* ── 0. Portée : tout le corps de l'accueil est enveloppé dans .lift-home ── */
.lift-home { overflow-x: hidden; }

/* ── 1. Nav transparente sur la photo du haut de page → claire au défilement,
   INDEX UNIQUEMENT (body.lift-home-page, posé par process() pour slug=index
   seulement ; aucune autre page ne porte cette classe). ─────────────────── */
body.lift-home-page .site-nav:not(.is-scrolled) .site-nav__inner {
  background: rgba(43, 20, 26, .28);
  border-color: rgba(255, 255, 255, .16);
  box-shadow: none;
}
body.lift-home-page .site-nav:not(.is-scrolled) .site-nav__brand,
body.lift-home-page .site-nav:not(.is-scrolled) .site-nav__name,
body.lift-home-page .site-nav:not(.is-scrolled) .site-nav__links a,
body.lift-home-page .site-nav:not(.is-scrolled) .site-nav__lang {
  color: #fff;
}
body.lift-home-page .site-nav__inner { transition: background .4s var(--ease), box-shadow .4s var(--ease); }
body.lift-home-page .site-nav__links a,
body.lift-home-page .site-nav__brand,
body.lift-home-page .site-nav__name,
body.lift-home-page .site-nav__lang { transition: color .4s var(--ease); }

/* ── 2. Hero : grille texte + carte flottante en verre ────────────────────── */
/* MARK: lifting-accueil-20260925-r2 — beat .hero--photo .hero__inner
   (grid-template-columns:1fr;max-width:780px), meme specificite (2
   classes), gagne par ordre (regle apres). */
/* MARK: lifting-accueil-20260925-r4 — le hero doit s'aligner sur le
   MEME conteneur que les autres sections (.section__inner : max-width:
   var(--max-w)), pas sur toute la largeur (max-width:none faisait
   demarrer le texte a ~40px du bord au lieu de ~170px comme le reste). */
.hero--photo .lift-hero__inner {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
  gap: clamp(1.5rem, 4vw, 3rem);
  align-items: end;
  max-width: var(--max-w);
}
@media (max-width: 860px) {
  .hero--photo .lift-hero__inner { grid-template-columns: minmax(0, 1fr); }
}
.lift-hero__card {
  justify-self: end;
  width: min(340px, 100%);
  background: rgba(255, 255, 255, .1);
  backdrop-filter: blur(16px) saturate(1.3);
  -webkit-backdrop-filter: blur(16px) saturate(1.3);
  border: 1px solid rgba(255, 255, 255, .22);
  border-radius: var(--r-m);
  padding: 1.3rem 1.4rem;
  color: #fff;
}
.lift-hero__score { display: flex; align-items: baseline; gap: .5rem; margin: 0; }
.lift-hero__score strong {
  font-family: 'Fraunces', serif;
  font-size: 3rem;
  font-weight: 500;
  color: var(--or);
  line-height: 1;
}
.lift-hero__score span { opacity: .82; font-size: .95rem; }
.lift-hero__phrase { font-size: .9rem; margin-top: .4rem; opacity: .92; }
/* MARK: lifting-accueil-20260925-r2 — beat .hero__h1 em (base :
   color:var(--bordeaux-deep), illisible sur la photo) */
.lift-hero .hero__h1 em { color: var(--or); }
.lift-hero__checks {
  list-style: none;
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 1px solid rgba(255, 255, 255, .2);
  display: grid;
  gap: .5rem;
  font-size: .86rem;
}
.lift-hero__checks li { padding-left: 1.5rem; position: relative; }
.lift-hero__checks li::before {
  content: "\2713";
  color: var(--or);
  font-weight: 700;
  position: absolute;
  left: 0;
}
@media (max-width: 860px) {
  .lift-hero__inner { grid-template-columns: minmax(0, 1fr); }
  .lift-hero__card { justify-self: start; }
}

/* ── 3. Flèches de boutons qui glissent au survol ─────────────────────────── */
.arr { display: inline-block; transition: transform .3s var(--ease); }
a:hover > .arr,
a:hover .arr { transform: translateX(4px); }

/* ── 4. La maison : titre + texte + pastilles + mosaïque ──────────────────── */
.lift-maison__grid {
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  gap: clamp(2rem, 6vw, 5rem);
  align-items: center;
}
/* MARK: lifting-accueil-20260925-r2 — h2 sans classe .section__title :
   retombait sur Inter noir par defaut. Typo alignee sur .section__title. */
.lift-maison__h2 {
  font-family: 'Fraunces', serif;
  font-weight: 600;
  font-size: clamp(1.5rem, 3vw, 2.25rem);
  color: var(--bordeaux);
  line-height: 1.2;
  margin: 1rem 0 1.4rem;
}
.lift-maison__h2 em { font-style: italic; font-weight: 400; color: var(--or-deep); }
.lift-chips { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 1.8rem; }
.lift-chips .chip {
  font-size: .82rem;
  padding: .45rem .85rem;
  border-radius: 999px;
  background: #fff;
  border: 1px solid var(--line);
  color: var(--encre); /* corrige .chip de base (color:var(--pierre), pensé pour
                           fond sombre) : sans cette ligne, texte quasi invisible
                           sur le fond clair de .lift-chips (défaut vu en capture) */
}
.lift-mosaic {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  grid-template-rows: 220px 220px;
  gap: 14px;
}
.lift-mosaic__item {
  border-radius: var(--r-m);
  overflow: hidden;
  box-shadow: var(--shadow-1);
}
.lift-mosaic__item:first-child { grid-row: span 2; }
.lift-mosaic__item img,
.lift-mosaic__item picture img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 1.2s var(--ease);
}
.lift-mosaic__item:hover img { transform: scale(1.05); }
@media (max-width: 860px) {
  .lift-maison__grid { grid-template-columns: 1fr; }
  .lift-mosaic { grid-template-rows: 170px 170px; }
}

/* ── 5. La recette : grille bento ─────────────────────────────────────────── */
.lift-bento {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 16px;
}
.lift-tile {
  border-radius: var(--r-m);
  padding: 1.8rem;
  background: var(--pierre);
  border: 1px solid var(--line);
  position: relative;
  overflow: hidden;
  transition: transform .4s var(--ease), box-shadow .4s var(--ease);
}
.lift-tile:hover { transform: translateY(-4px); box-shadow: var(--shadow-2); }
/* MARK: lifting-accueil-20260925-r2 — beat .recette-item (base :
   display:flex, ligne unique num/titre/texte cote a cote). Empile. */
.lift-tile.recette-item { display: block; }
.lift-tile .recette-item__num { display: block; margin-bottom: .4rem; }
/* MARK: lifting-accueil-20260925-r4 — <h3> sans regle globale
   h1/h2/h3 dans site.css : retombait sur Inter (police du body). */
.lift-tile .recette-item__title { font-family: 'Fraunces', serif; font-weight: 500; font-size: 1.5rem; color: var(--bordeaux); margin: .6rem 0 .6rem; }
.lift-tile .recette-item__text { color: var(--mute); font-size: .95rem; }
.lift-tile--a { grid-column: span 4; background: var(--bordeaux); color: #f6ecdf; border: 0; }
.lift-tile--a .recette-item__title { font-family: 'Fraunces', serif; font-weight: 500; color: #fff; font-size: 1.9rem; margin-top: .6rem; }
.lift-tile--a .recette-item__text { color: rgba(246, 236, 223, .82); max-width: 52ch; }
/* MARK: lifting-accueil-20260925 — défaut vu en capture : le badge "9,5"
   posé en position:absolute chevauchait le texte quand le titre passait sur
   plusieurs lignes (tuile étroite). Corrigé en le sortant du flux absolu :
   ligne d'en-tête flex (numéro de tuile + badge), jamais de recouvrement
   quelle que soit la hauteur du titre/texte. */
.lift-tile--a__head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 1rem;
}
.lift-tile--a .big {
  font-family: 'Fraunces', serif;
  font-size: 3rem;
  color: var(--or);
  line-height: 1;
  text-align: right;
  flex: none;
}
.lift-tile--a .big small {
  display: block;
  font-size: .68rem;
  font-family: 'Inter', sans-serif;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: rgba(246, 236, 223, .7);
  text-align: right;
  margin-top: .2rem;
}
.lift-bento .tile--b { grid-column: span 2; }
.lift-bento .tile--c,
.lift-bento .tile--d { grid-column: span 3; }
@media (max-width: 860px) {
  .lift-bento { grid-template-columns: 1fr; }
  .lift-bento .tile { grid-column: auto !important; }
  .lift-tile--a .big small { text-align: left; }
}

/* ── 6. Services : lignes pastille + étiquette ────────────────────────────── */
/* MARK: lifting-accueil-20260925-r2 — beat .services-grid (base :
   fond translucide + bordure + gap 1px = liseres visibles derriere
   les lignes une fois le gap agrandi). */
.lift-svc-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  background: transparent;
  border: 0;
  border-radius: 0;
  overflow: visible;
}
.lift-svc { height: 100%; }
.lift-svc__link { display: block; height: 100%; }
.lift-svc__ic svg.svc-icon { width: 22px; height: 22px; }
.lift-svc__ic.lift-svc__ic--combo { width: auto; padding: 0 10px; border-radius: 20px; }
.lift-svc {
  display: flex;
  gap: 1rem;
  align-items: center;
  padding: 1.2rem 1.3rem;
  border-radius: var(--r-m);
  background: rgba(255, 255, 255, .06);
  border: 1px solid rgba(255, 255, 255, .12);
  transition: background .3s, transform .3s var(--ease);
  color: #fff;
}
.lift-svc:hover { background: rgba(255, 255, 255, .11); transform: translateY(-3px); }
.lift-svc__ic {
  flex: none;
  width: 48px;
  height: 48px;
  border-radius: 14px;
  display: grid;
  place-items: center;
  background: rgba(238, 181, 10, .16);
  color: var(--or);
}
.lift-svc__body { min-width: 0; }
.lift-svc__body b { display: block; font-weight: 600; }
.lift-svc__body span { font-size: .82rem; opacity: .75; }
.lift-svc__tag {
  margin-left: auto;
  flex: none;
  font-size: .7rem;
  padding: .25rem .6rem;
  border-radius: 999px;
  background: var(--or);
  color: var(--bordeaux-deep);
  font-weight: 700;
  white-space: nowrap;
}
.lift-svc__tag--opt { background: transparent; border: 1px solid rgba(255, 255, 255, .35); color: #fff; }
.lift-svc__link { text-decoration: none; color: inherit; display: block; }
@media (max-width: 960px) { .lift-svc-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) { .lift-svc-grid { grid-template-columns: 1fr; } }

/* ── 7. Panier : arche + avis flottant + 3 étapes ─────────────────────────── */
.lift-panier__grid {
  display: grid;
  grid-template-columns: .9fr 1fr;
  gap: clamp(2rem, 6vw, 5.5rem);
  align-items: center;
}
.lift-arch { position: relative; max-width: 440px; }
.lift-arch__figure {
  border-radius: 220px 220px var(--r-m) var(--r-m);
  overflow: hidden;
  box-shadow: var(--shadow-2);
  aspect-ratio: 3 / 4;
  margin: 0;
}
.lift-arch__figure img { width: 100%; height: 100%; object-fit: cover; }
.lift-arch__quote {
  position: absolute;
  left: -14%;
  bottom: -38px;
  width: min(270px, 78%);
  background: #fff;
  border-radius: var(--r-m);
  padding: 1.1rem 1.2rem;
  box-shadow: var(--shadow-2);
  font-size: .9rem;
  margin: 0;
}
.lift-arch__stars { color: var(--or); letter-spacing: 2px; font-size: .85rem; margin: 0; }
.lift-arch__quote p:not(.lift-arch__stars) {
  font-family: 'Fraunces', serif;
  font-style: italic;
  font-size: 1.02rem;
  line-height: 1.35;
  margin: .3rem 0 .5rem;
  color: var(--encre);
}
.lift-arch__quote .panier-quote__src { color: var(--mute); font-size: .75rem; }
/* MARK: lifting-accueil-20260925-r2 — beat .panier-section__inner
   (base : max-width:720px;margin:0 auto;text-align:center), remplace
   par une classe dediee alignee a gauche. */
.lift-panier__text { text-align: left; max-width: none; margin: 0; }
.lift-steps__body { display: block; }
.lift-steps {
  list-style: none;
  margin-top: 1.4rem;
  display: grid;
  gap: 1rem;
  counter-reset: lift-step;
  padding: 0;
}
.lift-steps li { display: flex; gap: 1rem; align-items: flex-start; counter-increment: lift-step; }
.lift-steps li::before {
  content: counter(lift-step);
  flex: none;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--bordeaux);
  color: var(--or);
  font-family: 'Fraunces', serif;
  font-size: .95rem;
}
.lift-steps b { display: block; color: var(--bordeaux); }
.lift-steps span { color: var(--mute); font-size: .93rem; }
@media (max-width: 860px) {
  .lift-panier__grid { grid-template-columns: 1fr; }
  .lift-arch { margin: 0 auto 2.5rem; }
  .lift-arch__quote { left: -4%; bottom: -30px; }
}

/* ── 8. Chiffres clés : carte claire ──────────────────────────────────────── */
/* MARK: lifting-accueil-20260925-r4 — marge verticale propre : la
   carte blanche touchait directement les sections voisines (aucun
   espace pierre, semblait coupee a la limite de section). */
.lift-stats { padding-block: clamp(2.5rem, 5vw, 4rem); }
.lift-stats__inner {
  border-radius: var(--r-l);
  box-shadow: var(--shadow-1);
  border: 1px solid var(--line);
  background: #fff;
}
/* MARK: lifting-accueil-20260925-r2 — beat .stats-band (base :
   background:var(--bordeaux);color:var(--pierre)) qui debordait
   derriere la carte, + libelles/valeurs recolores pour fond clair. */
.lift-stats { background: var(--pierre); color: inherit; }
.lift-stats .stats-band__value { color: var(--bordeaux); }
.lift-stats .stats-band__label { color: var(--mute); }

/* ── 9. Studios : pastille couleur + capacité sur la photo ────────────────── */
.lift-studio__img { position: relative; }
.lift-studio__pax {
  position: absolute;
  left: 12px;
  top: 12px;
  background: rgba(255, 255, 255, .92);
  backdrop-filter: blur(6px);
  border-radius: 999px;
  font-size: .75rem;
  font-weight: 600;
  padding: .3rem .7rem;
}
.lift-dot {
  display: inline-block;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  margin-right: .5rem;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .15);
  vertical-align: middle;
}
.lift-studio__go { display: inline-flex; align-items: center; gap: .4rem; }
/* MARK: lifting-accueil-20260925-r3 — beat .studio-grid (base :
   repeat(2,1fr) fixe) : 4 colonnes comme l'apercu, degrade ensuite. */
.lift-studio-grid { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 1000px) { .lift-studio-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .lift-studio-grid { grid-template-columns: 1fr; } }

/* ── 10. Avis : carrousel horizontal ───────────────────────────────────────── */
.lift-avis__rail {
  display: flex;
  gap: 18px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding: 4px var(--pad-x) 20px;
  margin: 0 calc(-1 * var(--pad-x));
  scrollbar-width: none;
}
.lift-avis__rail::-webkit-scrollbar { display: none; }
.lift-avis__rail .avis-card { scroll-snap-align: start; flex: 0 0 min(360px, 85%); }
.lift-avis__nav { display: flex; gap: .5rem; }
.lift-avis__btn {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid var(--line);
  background: #fff;
  cursor: pointer;
  font-size: 1.1rem;
  color: var(--bordeaux);
  transition: background .3s, color .3s;
}
.lift-avis__btn:hover { background: var(--bordeaux); color: #fff; }

/* ── 11. Réserver en direct : carte unique ────────────────────────────────── */
/* MARK: lifting-accueil-20260925-r2 — .direct-section (base) est deja
   bordeaux-deep plein cadre + halo dore ::before : neutralise pour que
   SEULE .lift-direct__card soit la carte (comme l'apercu), sinon carte
   dans carte + halo qui deborde du coin. */
.lift-direct.direct-section { background: transparent; color: inherit; }
.lift-direct.direct-section::before { display: none; }
.lift-direct__card {
  background: var(--bordeaux-deep);
  color: #fff;
  border-radius: var(--r-l);
  padding: clamp(2rem, 5vw, 4rem);
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 3rem;
}
.lift-direct__card .direct-section__title,
.lift-direct__card .direct-section__eyebrow { color: #fff; }
.lift-direct__card .direct-section__eyebrow { color: var(--or); }
.lift-direct__card .direct-section__sub { opacity: .85; }
.lift-direct__card .direct-section__dispo a { color: #fff; opacity: .8; }
.lift-direct__card .annulation-bloc {
  background: rgba(255, 255, 255, .06);
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: var(--r-s);
  padding: 1rem 1.1rem;
  margin-top: 1rem;
}
/* MARK: lifting-accueil-20260925-r4 — beat .direct-args (base :
   grid-template-columns:repeat(3,1fr)) : lignes empilees, icone a
   gauche + titre/detail a droite, comme les .arg de l'apercu. */
.lift-direct__args { grid-template-columns: 1fr; gap: .75rem; }
.lift-direct__card .direct-arg {
  background: rgba(255, 255, 255, .06);
  border: 1px solid rgba(255, 255, 255, .1);
  display: flex;
  align-items: center;
  gap: 1rem;
  text-align: left;
  padding: 1rem 1.1rem;
}
.lift-direct__card .direct-arg__icon { margin-bottom: 0; flex: none; }
.lift-direct__card .direct-arg__label,
.lift-direct__card .direct-arg__detail { text-align: left; }
/* Pastilles de tarif : libelle sur sa ligne, pastilles cote a cote
   sur la ligne suivante (au lieu d'un flex-wrap qui melangeait tout). */
.lift-direct__card .tarifs-inline {
  flex-direction: column;
  align-items: flex-start;
  gap: .6rem;
}
.lift-direct__card .tarifs-inline__label { font-style: normal; }
.lift-tarifs-pills { display: flex; gap: .5rem; flex-wrap: wrap; align-items: center; }
@media (max-width: 860px) {
  .lift-direct__card { grid-template-columns: 1fr; }
}

/* ── FIX-NAV-ACCUEIL-20260926 — barre transparente illisible (signalé par Greg le 26/09) :
   fond trop clair sous texte blanc, liens du menu déroulant blancs sur fond crème,
   « Accueil » (page courante) resté bordeaux sur fond sombre. ── */
body.lift-home-page .site-nav:not(.is-scrolled) .site-nav__inner {
  background: rgba(43, 20, 26, .62);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}
/* le bordeaux « !important » du lien courant/survolé (l. ~2860) est illisible sur fond sombre */
body.lift-home-page .site-nav:not(.is-scrolled) .site-nav__links > li > a[aria-current="page"],
body.lift-home-page .site-nav:not(.is-scrolled) .site-nav__links > li > a:hover,
body.lift-home-page .site-nav:not(.is-scrolled) .nav-dropdown__toggle {
  color: #fff !important;
}
/* logo noir (brand-icon-t.png, fond transparent) passé en blanc tant que la barre est sombre */
body.lift-home-page .site-nav:not(.is-scrolled) .brand-logo-icon {
  filter: invert(1) brightness(1.15);
  transition: filter .4s var(--ease);
}
body.lift-home-page .site-nav:not(.is-scrolled) .nav-dropdown__menu a {
  color: var(--encre, #2b2622);
}
body.lift-home-page .site-nav:not(.is-scrolled) .nav-dropdown__menu a:hover {
  color: var(--bordeaux, #611B2E);
}
/* menu compact (≤ 1220 px) : le panneau ouvert est crème → textes foncés, lien courant bordeaux */
@media (max-width: 1220px) {
  body.lift-home-page .site-nav.is-open:not(.is-scrolled) .site-nav__links a,
  body.lift-home-page .site-nav.is-open:not(.is-scrolled) .site-nav__lang a,
  body.lift-home-page .site-nav.is-open:not(.is-scrolled) .nav-dropdown__toggle {
    color: var(--encre, #2b2622) !important;
  }
  body.lift-home-page .site-nav.is-open:not(.is-scrolled) .site-nav__links > li > a[aria-current="page"] {
    color: var(--bordeaux, #611B2E) !important;
  }
}
/* ═══ fin LIFTING-ACCUEIL-20260925 ═══ */

/* ═══ FIX-MENU-TABLETTE-20260926 — entre 681 et 1220 px, le menu compact (panneau
   « burger ») garde le sous-menu « Découvrir » en popover absolu : il recouvre
   Vins / Blog / FAQ. Même rendu que sous 680 px : sous-menu dans le flux. Toutes pages. ═══ */
@media (min-width: 681px) and (max-width: 1220px) {
  .site-nav.is-open .nav-dropdown__menu {
    position: static;
    border: none;
    border-radius: var(--radius);
    box-shadow: none;
    background: var(--pierre-2);
    margin: .2rem 0;
  }
  .site-nav.is-open .nav-dropdown__menu::before { display: none; }
}
/* ═══ fin FIX-MENU-TABLETTE-20260926 ═══ */


/* ═══ FIX-MOBILE-20260927 — corrections rendu mobile (iPhone 13, 390 px) ═══ */

/* Point 2 — Accueil, carte « chiffres clés » : touchait les bords de l'écran
   (0 px de marge) alors que les autres cartes de la page ont ~16 px (--pad-x).
   `.stats-band__inner` porte deja `padding-inline: var(--pad-x)` (espace
   interne aux items), mais c'est la carte (fond blanc/ombre/bordure) elle-meme
   qui touchait l'ecran : il lui manquait une marge exterieure. Grille 2x2
   homogene au lieu de 2 items en ligne puis 2 empiles centres (flex-wrap). */
@media (max-width: 640px) {
  .lift-stats__inner {
    margin-inline: var(--pad-x);
  }
  .lift-stats .stats-band__inner {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    justify-items: center;
    gap: 1.5rem 1rem;
  }
}

/* Point 3 — Accueil, « Réserver en direct » : les 3 argumentaires sont en
   flex-row (icone, titre, texte comme 3 items a plat) : le titre se casse sur
   plusieurs lignes faute de place. Sur mobile : icone a gauche, titre puis
   texte empiles a droite (grille 2 colonnes, icone sur les 2 lignes). */
@media (max-width: 640px) {
  .lift-direct__card .direct-arg {
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: start;
    column-gap: 1rem;
    row-gap: .2rem;
  }
  .lift-direct__card .direct-arg__icon {
    grid-column: 1;
    grid-row: 1 / 3;
    align-self: center;
  }
  .lift-direct__card .direct-arg__label {
    grid-column: 2;
    grid-row: 1;
    margin-bottom: 0;
  }
  .lift-direct__card .direct-arg__detail {
    grid-column: 2;
    grid-row: 2;
  }
}

/* Point 4 — Page Blog : grand vide entre la photo et le titre de chaque carte.
   Deux causes cumulees (mesurees en sandbox, ~100 px avant / ~20 px apres) :
   1) `.blog-card__title` est un <h2>, et `.content-zone h2` (pense pour les
      titres de corps de texte editorial) lui impose `margin-top: 2.25rem`.
   2) `.content-zone img` (pense pour les images de corps de texte editorial)
      impose `margin-block: 1.5rem` a TOUT <img>, y compris `.blog-card__img`
      (la vignette de la carte) : 24 px de marge sous la photo.
   Le h2 est le premier element du corps de carte (`.blog-card__body`,
   flex-column) : les deux marges s'additionnent en vide entre l'image et le
   titre. On neutralise les deux, uniquement pour ces elements de carte, sans
   toucher `.content-zone h2`/`.content-zone img` (partages avec les vraies
   pages editoriales). Reste : le `padding-top: 1.25rem` (20px) de
   `.blog-card__body`, un espacement normal. */
.content-zone .blog-card__title {
  margin-top: 0;
}

.content-zone .blog-card__img {
  margin-block: 0;
}

/* Point 6 — Carrousels studio : les points de pagination blancs sont quasi
   invisibles sur une photo claire. Fond semi-opaque derriere les points +
   liseré sombre sur chaque point, sans changer le comportement (memes
   elements, meme JS). */
.photo-carousel__dots {
  padding: .3rem .5rem;
  background: rgba(0, 0, 0, .32);
  border-radius: 999px;
}

.photo-carousel__dot {
  box-shadow: 0 0 0 1px rgba(0, 0, 0, .35);
}

.photo-carousel__dot.active {
  box-shadow: 0 0 0 1px rgba(0, 0, 0, .35), 0 1px 3px rgba(0, 0, 0, .45);
}

/* Point 8 — Filet de securite : dans le corps de texte des pages de contenu
   (`.content-zone`, pages editoriales generees) et des articles de blog
   (`.article-body`, jamais regeneres mais partagent ce CSS), une longue URL
   ou un mot sans espace ne doit jamais elargir la page sur mobile. Cible le
   conteneur de contenu, pas tout le site. */
.content-zone,
.article-body {
  overflow-wrap: anywhere;
}

/* ═══ fin FIX-MOBILE-20260927 ═══ */

/* FIX-NAV-LANG-ANCIEN-20260927 — 17 articles EN/ES portent l ancien bandeau où le sélecteur
   de langue est un <div> hors du menu : sur mobile il repoussait le bouton menu hors écran
   (page à 490 px). On le masque dans le bandeau ; le choix de langue reste en pied de page. */
@media (max-width: 1220px) {
  .site-nav__inner > div.site-nav__lang { display: none; }
}

/* ═══ lien-carte-20260927 — lien "voir sur la carte 3D" (page quartier) ═══
   a { color: inherit; } (ligne 124) rend les liens noirs sur fond blanc :
   règle dédiée avec couleur explicite pour rester visible. */
.lien-carte {
  color: var(--bordeaux) !important;
  text-decoration: none !important;
  font-weight: 600;
}
.lien-carte:hover, .lien-carte:focus { text-decoration: underline !important; }
/* ═══ fin lien-carte-20260927 ═══ */