/* ════════════════════════════════════════════════════════
   Domaine de la Boissière — pages en slides plein écran
   Partagé par pressoir.html, pool-house.html, etc.
   Dépend des variables de shared.css.
   ════════════════════════════════════════════════════════ */

html, body { height: 100%; overflow: hidden; }
body { background: var(--vert); color: var(--ivoire); }

/* ══════════════════════════════════════
   PANNEAUX
══════════════════════════════════════ */
.pane {
  position: fixed; inset: 0;
  height: 100vh; height: 100lvh; overflow: hidden;
  display: flex; align-items: center;
  transform: translateY(100%);
  transition: transform 0.95s cubic-bezier(.77,0,.18,1);
  will-change: transform;
  background: var(--vert);
}
.pane.active { transform: translateY(0); }
.pane.above  { transform: translateY(-6%); }
.pane:first-of-type { transform: translateY(0); }
.pane.alt { background: var(--vert-m); }
/* les z-index sont posés par slides.js, dans l'ordre du document */

.pane-inner {
  /* Aligné à gauche comme .slide-content sur l'accueil (padding 0 64px, pas
     de centrage) : un bloc centré à 1340px démarrait à ~354px du bord sur un
     écran large, alors que l'accueil démarre à 64px. */
  width: 100%; max-width: none; margin: 0;
  padding: 0 64px;
  max-height: calc(100vh - 168px); max-height: calc(100dvh - 168px); overflow-y: auto; scrollbar-width: none;
}
.pane-inner::-webkit-scrollbar { display: none; }

/* deux colonnes : le texte à gauche, les renseignements à droite.
   Sans ça un panneau de texte laisse la moitié droite de l'écran vide. */
.pane-inner.split {
  display: grid; grid-template-columns: 1.15fr 0.85fr;
  gap: 76px; align-items: center;
  max-width: 1340px; /* largeur de lecture, mais calée à gauche */
}

/* ── PANNEAU PHOTO ── */
.pane.photo { align-items: flex-end; }
.pane-bg { position: absolute; inset: 0; background-size: cover; background-position: center; }
.pane-veil {
  position: absolute; inset: 0;
  background: linear-gradient(to bottom, rgba(0,0,0,0.14) 0%, rgba(0,0,0,0) 34%, rgba(23,20,18,0.80) 100%);
}
.pane.photo .pane-inner {
  position: relative; z-index: 2;
  padding-bottom: 78px; max-height: none; overflow: visible;
}
/* fond en fondu enchaîné : plusieurs .pane-bg empilés dans le même
   panneau, animés en décalé par slides.js (classe .on) */
.pane-bg.fade { opacity: 0; transition: opacity 1.6s ease-in-out; }
.pane-bg.fade.on { opacity: 1; }

/* crédit photo — sous la légende, aligné sur le titre.
   Pas en bas à droite : la pagination y est déjà. */
.ph-credit {
  display: block; margin-top: 18px;
  font-size: 9px; letter-spacing: 0.14em; text-transform: uppercase;
  font-weight: 700; color: rgba(255,255,255,0.32);
}

.ph-tag {
  font-size: 10px; letter-spacing: 0.24em; text-transform: uppercase;
  font-weight: 700; color: rgba(255,255,255,0.5); margin-bottom: 16px;
}
.ph-cap {
  font-family: 'Newsreader', serif; font-weight: 300;
  font-size: clamp(34px, 4.4vw, 66px); line-height: 1;
  letter-spacing: -0.025em; color: #fff; margin-left: -5px;
}
.ph-cap em { font-style: italic; color: rgba(255,255,255,0.72); }

/* ── PANNEAU GALERIE ── */
.pane.gal { align-items: center; }
.gal-inner { width: 100%; max-width: 1480px; margin: 0; padding: 0 64px; }
.gal-head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 24px; margin-bottom: 18px; flex-wrap: wrap;
}
.gal-head h3 { font-family: 'Newsreader', serif; font-weight: 300; font-size: 26px; color: var(--ivoire); }
.gal-head span {
  font-size: 10px; letter-spacing: 0.2em; text-transform: uppercase;
  font-weight: 700; color: rgba(244,239,231,0.38);
}
/* mosaïque 5 photos : une grande à gauche, quatre en damier à droite */
.gal-grid {
  display: grid; grid-template-columns: 1.7fr 1fr 1fr; grid-template-rows: 1fr 1fr;
  gap: 10px; height: min(74vh, 700px);
}
.gal-grid figure { overflow: hidden; margin: 0; background: rgba(0,0,0,0.2); }
.gal-grid figure:first-child { grid-row: 1 / 3; }
.gal-grid img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  transform: scale(1.03); transition: transform 1.2s cubic-bezier(.22,.68,0,1.1);
}
.gal-grid figure:hover img { transform: scale(1); }
/* variantes quand la librairie n'a pas cinq vues */
.gal-grid.g4 { grid-template-columns: 1.6fr 1fr 1fr; }
.gal-grid.g4 figure:nth-child(4) { grid-column: 2 / 4; }
.gal-grid.g3 { grid-template-columns: 1.6fr 1fr; }
/* six vues : damier régulier, pas de grande à gauche */
.gal-grid.g6 { grid-template-columns: repeat(3, 1fr); }
.gal-grid.g6 figure:first-child { grid-row: auto; }
.gal-grid.g2 { grid-template-columns: 1fr 1fr; grid-template-rows: 1fr; }
.gal-grid.g2 figure:first-child { grid-row: auto; }

/* ══════════════════════════════════════
   HEADER
══════════════════════════════════════ */
header {
  background: transparent;
  backdrop-filter: none !important; -webkit-backdrop-filter: none !important;
  border-bottom: 1px solid transparent;
}
.h-inner {
  width: 100%; max-width: none; margin: 0;
  padding: 0 64px; height: 72px;
  display: flex; align-items: center; justify-content: space-between; gap: 32px;
}
.h-logo { height: 38px; width: auto; filter: brightness(0) invert(1); }
.h-nav > li > a { color: var(--ivoire); opacity: 0.5; }
.h-nav > li > a:hover, .h-nav > li > a.active { opacity: 1; }
/* sélecteur de langue : la langue courante en plein, l'autre cliquable */
.h-cta { background: var(--ivoire); color: var(--encre); }
.h-cta:hover { background: var(--celadon); color: var(--ivoire); opacity: 1; }

/* ══════════════════════════════════════
   TYPO
══════════════════════════════════════ */
.eyebrow { color: var(--celadon); margin-bottom: 20px; }
.mid-title {
  font-family: 'Newsreader', serif; font-weight: 300;
  font-size: clamp(32px, 3.9vw, 58px); line-height: 1;
  letter-spacing: -0.02em; color: var(--ivoire); margin-left: -4px;
}
.mid-title em { font-style: italic; color: var(--rose); }
.lede { margin-top: 26px; font-size: 16px; line-height: 1.8; color: var(--muted-l); }
.lede strong { color: var(--ivoire); font-weight: 600; }
.note { margin-top: 24px; font-size: 13px; line-height: 1.75; color: rgba(244,239,231,0.45); }

/* renseignements — par défaut en bandeau sous le texte… */
.specs {
  display: grid; gap: 22px 32px;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  margin-top: 32px; padding-top: 24px;
  border-top: 1px solid rgba(244,239,231,0.12);
}
/* …et en colonne de droite quand le panneau est en deux colonnes */
.split .specs {
  grid-template-columns: 1fr; gap: 22px;
  margin-top: 0; padding-top: 0; border-top: none;
  border-left: 1px solid rgba(244,239,231,0.14);
  padding-left: 40px;
}
.spec dt {
  font-size: 9px; letter-spacing: 0.2em; text-transform: uppercase;
  font-weight: 700; color: rgba(244,239,231,0.4); margin-bottom: 6px;
}
.spec dd { font-size: 14px; line-height: 1.5; color: var(--ivoire); }

/* ── listes d'adresses (page Autour) ── */
.adresses { display: grid; grid-template-columns: 1fr 1fr; gap: 26px 46px; margin-top: 30px; }
.adresse { border-top: 1px solid rgba(244,239,231,0.14); padding-top: 14px; }
.adresse h3 {
  font-family: 'Newsreader', serif; font-weight: 400; font-size: 20px;
  color: var(--ivoire); margin-bottom: 6px;
}
.adresse p { font-size: 13.5px; line-height: 1.6; color: var(--muted-l); }
.adresse .meta {
  margin-top: 8px; font-size: 11px; letter-spacing: 0.08em;
  color: rgba(244,239,231,0.42); line-height: 1.8;
}
.adresse .meta a { border-bottom: 1px solid rgba(244,239,231,0.24); transition: color 0.25s, border-color 0.25s; }
.adresse .meta a:hover { color: var(--ivoire); border-color: var(--celadon); }
.adresse .tarif { color: var(--rose); font-weight: 600; }

/* ── liste simple à puces tiret ── */
.tirets { margin-top: 22px; display: flex; flex-direction: column; gap: 8px; list-style: none; }
.tirets li {
  display: grid; grid-template-columns: 14px 1fr; gap: 12px;
  font-size: 14.5px; line-height: 1.6; color: var(--muted-l);
}
.tirets li::before { content: '—'; color: var(--rose); opacity: 0.7; }

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

.btns { display: flex; flex-wrap: wrap; gap: 16px; margin-top: 34px; }
.btn {
  display: inline-block; border-radius: 999px; padding: 14px 32px;
  font-size: 11px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase;
  transition: background 0.3s, border-color 0.3s, color 0.3s;
}
.btn-solid { background: var(--ivoire); color: var(--encre); border: 1px solid var(--ivoire); }
.btn-solid:hover { background: var(--celadon); border-color: var(--celadon); color: var(--ivoire); }
.btn-ghost { border: 1px solid rgba(244,239,231,0.4); color: var(--ivoire); }
.btn-ghost:hover { background: rgba(244,239,231,0.1); border-color: var(--ivoire); }

/* ══════════════════════════════════════
   CHROME — points, compteur, mentions
══════════════════════════════════════ */
.p-dots {
  position: fixed; right: 34px; top: 50%; transform: translateY(-50%);
  z-index: 100; display: flex; flex-direction: column; gap: 9px;
}
.p-dots button {
  width: 5px; height: 5px; border-radius: 50%; padding: 0;
  background: rgba(244,239,231,0.22); border: none; cursor: none;
  transition: background 0.35s, transform 0.35s;
}
.p-dots button.on { background: var(--rose); transform: scale(1.6); }
.p-count {
  position: fixed; bottom: 32px; right: 64px; z-index: 100;
  font-size: 10px; letter-spacing: 0.2em; font-weight: 700; color: rgba(244,239,231,0.38);
}
.p-count b { color: var(--ivoire); }
.legal-bar {
  position: fixed; left: 64px; bottom: 32px; z-index: 100;
  display: flex; align-items: center; gap: 18px;
}
.legal-bar a {
  font-size: 9px; letter-spacing: 0.16em; text-transform: uppercase;
  font-weight: 700; color: rgba(244,239,231,0.26);
  white-space: nowrap; transition: color 0.35s;
}
.legal-bar a:hover { color: rgba(244,239,231,0.8); }

/* ══════════════════════════════════════
   RESPONSIVE
══════════════════════════════════════ */
@media (max-width: 1100px) {
  .pane-inner.split { grid-template-columns: 1fr; gap: 34px; }
  .split .specs {
    border-left: none; padding-left: 0;
    border-top: 1px solid rgba(244,239,231,0.14); padding-top: 24px;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 20px 32px;
  }
  .gal-grid { height: min(62vh, 520px); }
}
@media (max-width: 760px) {
  .pane-inner { padding: 0 24px; max-height: calc(100vh - 148px); max-height: calc(100dvh - 148px); }
  .gal-inner  { padding: 0 24px; }
  .pane.photo .pane-inner { padding-bottom: 66px; }
  .h-inner { padding: 0 24px; }
  .h-nav, .p-dots { display: none; }
  .gal-grid, .gal-grid.g4, .gal-grid.g3 {
    grid-template-columns: 1fr 1fr; grid-template-rows: 1.5fr 1fr 1fr;
    height: min(58vh, 460px);
  }
  .gal-grid figure:first-child { grid-row: auto; grid-column: 1 / 3; }
  .gal-grid.g4 figure:nth-child(4) { grid-column: auto; }
  .legal-bar { left: 24px; bottom: 20px; gap: 11px; }
  .legal-bar a { font-size: 8px; letter-spacing: 0.1em; }
  .p-count { right: 24px; bottom: 20px; }
}

/* le burger prend la couleur du header de cette page */
.h-burger { color: var(--ivoire); }

/* Sous 900 px la barre légale tombe sur le texte des panneaux.
   Les liens sont repris dans le menu mobile par shared.js. */
@media (max-width: 900px) {
  .legal-bar { display: none; }
}

@media (max-width: 900px) {
  .pane.photo .pane-inner {
    padding-bottom: calc(76px + env(safe-area-inset-bottom, 0px));
  }
}

/* ── SÉLECTEUR DE LANGUE ──
   La couleur de base était à 50 % d'opacité ET le lien inactif en
   ajoutait 50 % : 25 % au total, illisible sur photo. Pleine couleur
   désormais, l'inactif à 65 %, et une ombre portée pour tenir sur
   les fonds clairs. */
.h-lang {
  color: var(--ivoire);
  font-size: 11px; letter-spacing: 0.1em; font-weight: 700;
  text-shadow: 0 1px 4px rgba(0,0,0,0.5);
}
.h-lang .on { opacity: 1; }
.h-lang a {
  color: inherit; opacity: 0.65; border: none;
  padding-bottom: 2px; border-bottom: 1px solid transparent;
  transition: opacity 0.3s, border-color 0.3s;
}
.h-lang a:hover { opacity: 1; border-bottom-color: currentColor; }

/* ── AUCUNE BANDE CLAIRE SOUS LES PANNEAUX ──
   Le site est fait de panneaux en position fixed. Sur iOS, la barre
   de Safari décale toujours légèrement la zone visible : le moindre
   pixel non couvert laissait voir le fond crème du body. En vert
   foncé, ce décalage devient invisible. */
html, body { background: #2F3E36 !important; }