/* =========================================================
   PLEIN SUD — Collection de Chalets d'Exception
   Feuille de style principale
   Palette : neige, pierre, anthracite, bois, sapin, bronze
   Typographies : Fraunces (display) / Jost (texte courant)
   ========================================================= */

:root {
  --snow: #f9f6f0;
  --stone: #efe8da;
  --stone-dark: #ded3bc;
  --charcoal: #22221f;
  --charcoal-soft: #34332d;
  --wood: #a07a52;
  --wood-dark: #6e5439;
  --pine: #3c4a3a;
  --pine-soft: #566854;
  --bronze: #b08d57;
  --bronze-light: #d3b785;
  --shadow-soft: 0 20px 60px -20px rgba(34, 34, 31, 0.35);
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

* { box-sizing: border-box; }

html { scroll-behavior: auto; } /* auto : le défilement lissé faussait l'arrivée sur les ancres #nid-perche / #chalet-3 */

body {
  margin: 0;
  background: var(--snow);
  color: var(--charcoal);
  font-family: "Jost", "Helvetica Neue", Arial, sans-serif;
  font-weight: 300;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, .font-display {
  font-family: "Fraunces", Georgia, serif;
  font-weight: 500;
  letter-spacing: 0.01em;
  line-height: 1.15;
}

.eyebrow {
  font-family: "Jost", sans-serif;
  text-transform: uppercase;
  letter-spacing: 0.28em;
  font-size: 0.72rem;
  font-weight: 500;
  color: var(--bronze);
}

.text-serif-italic {
  font-family: "Fraunces", Georgia, serif;
  font-style: italic;
  font-weight: 400;
}

/* Hide inactive language blocks (JS controls the "hidden" attribute) */
[data-lang] { }
[hidden] { display: none !important; }

/* ---------- Layout helpers ---------- */
.container-xl { max-width: 1320px; margin-inline: auto; padding-inline: 1.5rem; }
@media (min-width: 768px) { .container-xl { padding-inline: 2.5rem; } }

.section-pad { padding-block: clamp(3.5rem, 7vw, 7rem); }

/* ---------- Header ---------- */
#site-header {
  position: fixed;
  inset-inline: 0;
  top: 0;
  z-index: 100;
  transition: background-color 0.5s var(--ease), box-shadow 0.5s var(--ease), padding 0.4s var(--ease);
  padding-block: 1.6rem;
}
#site-header.is-scrolled {
  background: rgba(249, 246, 240, 0.92);
  backdrop-filter: blur(10px);
  box-shadow: 0 1px 0 rgba(34,34,31,0.08);
  padding-block: 0.9rem;
}
#site-header .nav-link { color: rgba(249,246,240,0.88); transition: color 0.4s var(--ease); }
#site-header.is-scrolled .nav-link,
#site-header.is-solid .nav-link { color: var(--charcoal-soft); }
#site-header .lang-btn { color: rgba(249,246,240,0.7); border-color: rgba(249,246,240,0.35); }
#site-header.is-scrolled .lang-btn,
#site-header.is-solid .lang-btn { color: var(--charcoal-soft); border-color: var(--stone-dark); }
#site-header .lang-btn.active-lang { color: var(--bronze); border-color: var(--bronze); }
#site-header .burger span { background: var(--snow); }
#site-header.is-scrolled .burger span,
#site-header.is-solid .burger span { background: var(--charcoal); }

/* ---------- Logo (remplace l'ancien wordmark texte "PLEIN SUD") ---------- */
/* Le logo est en couleurs fixes (marine + or), pas un texte dont on peut
   changer la couleur en CSS : sur fond sombre (héros transparent de
   l'accueil avant défilement, tiroir de nav mobile, pied de page — tous
   en charcoal), on lui ajoute une petite plaque claire derrière pour
   qu'il reste lisible. Une fois le header devenu "plein" (fond clair,
   au défilement ou sur les pages qui sont déjà en fond clair dès le
   départ), la plaque redevient transparente : le logo se pose alors
   directement sur le fond clair du header, sans double encadré. */
.brand-logo-plaque {
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  background: rgba(249, 246, 240, 0.94);
  box-shadow: 0 1px 6px rgba(34, 34, 31, 0.12);
  padding: 0.4rem 0.9rem;
  transition: background 0.4s var(--ease), box-shadow 0.4s var(--ease), padding 0.4s var(--ease);
}
#site-header.is-scrolled .brand-logo-plaque,
#site-header.is-solid .brand-logo-plaque {
  background: transparent;
  box-shadow: none;
  padding: 0;
}
.brand-logo {
  display: block;
  height: 3rem;
  width: auto;
  /* Garde-fou : jamais plus haut que la version pied de page, quel que
     soit le navigateur ou une règle CSS externe (ex. preflight Tailwind). */
  max-height: 3.72rem;
  max-width: none;
  object-fit: contain;
}
@media (min-width: 768px) {
  .brand-logo { height: 3.48rem; }
}
.brand-logo-lg {
  height: 3.72rem;
}

.nav-link { position: relative; font-size: 0.92rem; letter-spacing: 0.02em; }
.nav-link::after {
  content: "";
  position: absolute; left: 0; right: 100%; bottom: -4px;
  height: 1px; background: currentColor;
  transition: right 0.35s var(--ease);
}
.nav-link:hover::after, .nav-link.is-active::after { right: 0; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.6rem;
  padding: 0.95rem 2.1rem;
  font-size: 0.85rem; letter-spacing: 0.14em; text-transform: uppercase;
  border: 1px solid transparent;
  transition: all 0.4s var(--ease);
  white-space: nowrap;
}
.btn-primary { background: var(--bronze); color: var(--snow); border-color: var(--bronze); }
.btn-primary:hover { background: transparent; color: var(--bronze); border-color: var(--bronze); }
.btn-ghost { background: transparent; color: var(--snow); border-color: rgba(249,246,240,0.55); }
.btn-ghost:hover { background: var(--snow); color: var(--charcoal); border-color: var(--snow); }
.btn-dark { background: var(--charcoal); color: var(--snow); border-color: var(--charcoal); }
.btn-dark:hover { background: transparent; color: var(--charcoal); }
.btn-outline-dark { background: transparent; color: var(--charcoal); border-color: var(--charcoal-soft); }
.btn-outline-dark:hover { background: var(--charcoal); color: var(--snow); }
.btn[disabled], .btn.is-disabled {
  opacity: 0.45; pointer-events: none; cursor: default;
}

/* ---------- Placeholder photography (no external images) ---------- */
.ph {
  position: relative; overflow: hidden; isolation: isolate;
  background: linear-gradient(160deg, var(--charcoal) 0%, var(--pine) 55%, var(--wood-dark) 100%);
}
.ph::before {
  content: "";
  position: absolute; inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 800 500' preserveAspectRatio='none'%3E%3Cpolygon fill='rgba(255,255,255,0.06)' points='0,500 0,320 120,220 230,300 340,150 430,260 520,120 650,270 760,190 800,260 800,500'/%3E%3Cpolygon fill='rgba(255,255,255,0.09)' points='0,500 0,400 160,300 300,380 460,260 620,360 800,300 800,500'/%3E%3C/svg%3E");
  background-size: cover; background-position: bottom;
  opacity: 0.9;
}
.ph::after {
  content: "";
  position: absolute; inset: 0;
  background: radial-gradient(120% 90% at 50% 0%, rgba(255,255,255,0.10), rgba(0,0,0,0) 60%);
  mix-blend-mode: overlay;
}
.ph-2 { background: linear-gradient(160deg, #2c2a28 0%, #6e5439 60%, #b08d57 130%); }
.ph-3 { background: linear-gradient(160deg, #1f2a22 0%, #3c4a3a 55%, #7c8f74 140%); }
.ph-4 { background: linear-gradient(160deg, #262523 0%, #4a4137 60%, #a07a52 140%); }
.ph-tag {
  position: absolute; z-index: 2; left: 1.1rem; bottom: 1.1rem;
  font-size: 0.68rem; letter-spacing: 0.14em; text-transform: uppercase;
  color: rgba(249,246,240,0.75);
  border: 1px solid rgba(249,246,240,0.35);
  padding: 0.35rem 0.7rem;
  backdrop-filter: blur(2px);
}

/* ---------- Reveal on scroll ---------- */
.reveal { opacity: 0; transform: translateY(28px); transition: opacity 0.9s var(--ease), transform 0.9s var(--ease); }
.reveal.is-visible { opacity: 1; transform: translateY(0); }

/* Variante « glissement latéral » : la section entre depuis l'extérieur de
   l'écran (gauche ou droite) au lieu du léger flottement vertical de
   .reveal. Utilisée par les sections plein écran de region.php ; s'appuie
   sur le même observer (initReveal() ajoute .is-visible à tout .reveal). */
.reveal-from-left  { opacity: 0; transform: translateX(-90px); transition: opacity 1s var(--ease), transform 1s var(--ease); }
.reveal-from-right { opacity: 0; transform: translateX(90px);  transition: opacity 1s var(--ease), transform 1s var(--ease); }
.reveal-from-left.is-visible,
.reveal-from-right.is-visible { opacity: 1; transform: translateX(0); }
@media (prefers-reduced-motion: reduce) {
  .reveal-from-left, .reveal-from-right { transition: opacity 0.4s linear; transform: none; }
}

/* ---------- Divider ---------- */
.divider-bronze { width: 64px; height: 1px; background: var(--bronze); }

/* ---------- Mobile nav ---------- */
#mobile-nav {
  position: fixed; inset: 0; z-index: 90;
  background: var(--charcoal);
  transform: translateY(-100%);
  transition: transform 0.55s var(--ease);
}
#mobile-nav.is-open { transform: translateY(0); }

/* ---------- Cards ---------- */
.chalet-card { transition: transform 0.5s var(--ease), box-shadow 0.5s var(--ease); }
.chalet-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-soft); }

.partner-card { border: 1px solid var(--stone-dark); transition: border-color 0.35s var(--ease), background 0.35s var(--ease); }
.partner-card:hover { border-color: var(--bronze); background: var(--stone); }

/* Language switch */
.lang-switch { display: flex; align-items: center; gap: 0.35rem; }
.lang-btn {
  font-size: 0.72rem; letter-spacing: 0.08em;
  border: 1px solid; padding: 0.15rem 0.5rem;
  background: transparent; cursor: pointer;
  transition: all 0.3s var(--ease);
}

/* Scrollbar-free anchor offset for sticky header */
section[id] { scroll-margin-top: 96px; }

/* ---------- Lightbox (zoom photo galeries chalets) ---------- */
.lightbox-trigger { cursor: zoom-in; position: relative; }
.lightbox-trigger::after {
  content: "";
  position: absolute; inset: 0;
  background: rgba(34, 34, 31, 0);
  transition: background 0.3s var(--ease);
  pointer-events: none;
}
.lightbox-trigger:hover::after { background: rgba(34, 34, 31, 0.15); }

body.lightbox-locked { overflow: hidden; }

.lightbox-overlay {
  position: fixed; inset: 0; z-index: 200;
  background: rgba(17, 17, 15, 0.94);
  display: flex; align-items: center; justify-content: center;
  padding: 4vh 4vw;
  opacity: 0; visibility: hidden;
  transition: opacity 0.35s var(--ease);
}
.lightbox-overlay.is-open { opacity: 1; visibility: visible; }

.lightbox-img {
  max-width: 100%; max-height: 84vh;
  box-shadow: var(--shadow-soft);
  object-fit: contain;
}

.lightbox-caption {
  position: absolute; left: 0; right: 0; bottom: 2.5vh;
  padding: 0 72px; text-align: center;
  color: var(--snow); font-size: 0.95rem; line-height: 1.4;
}
.lightbox-caption:empty { display: none; }

.gallery-cat-title { grid-column: 1 / -1; margin: 0.5rem 0 0; }

.lightbox-close, .lightbox-nav {
  position: absolute;
  background: transparent;
  border: 1px solid rgba(249, 246, 240, 0.35);
  color: var(--snow);
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: all 0.3s var(--ease);
}
.lightbox-close:hover, .lightbox-nav:hover { background: var(--snow); color: var(--charcoal); border-color: var(--snow); }

.lightbox-close {
  top: 20px; right: 20px;
  width: 44px; height: 44px;
  font-size: 1.6rem; line-height: 1;
}

.lightbox-nav {
  top: 50%; transform: translateY(-50%);
  width: 52px; height: 52px;
  font-size: 2rem; line-height: 1;
  border-radius: 50%;
}
.lightbox-prev { left: 16px; }
.lightbox-next { right: 16px; }

@media (max-width: 640px) {
  .lightbox-nav { width: 42px; height: 42px; font-size: 1.6rem; }
  .lightbox-close { width: 38px; height: 38px; font-size: 1.35rem; }
}

/* ---------- Page mentions légales / confidentialité ---------- */
.legal-prose h2 {
  font-size: clamp(1.6rem, 3vw, 2.1rem);
  margin: 0 0 1.2rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--stone-dark);
}
.legal-prose h3 {
  font-family: "Jost", sans-serif;
  font-size: 0.8rem; font-weight: 500;
  text-transform: uppercase; letter-spacing: 0.18em;
  color: var(--bronze);
  margin: 1.8rem 0 0.6rem;
}
.legal-prose p, .legal-prose li { color: var(--charcoal-soft); font-size: 0.95rem; }
.legal-prose p { margin: 0 0 0.9rem; }
.legal-prose ul { margin: 0 0 1rem; padding-left: 1.1rem; list-style: disc; }
.legal-prose li { margin-bottom: 0.35rem; }
.legal-prose a { text-decoration: underline; text-underline-offset: 2px; }
.legal-prose a:hover { color: var(--bronze); }
.legal-prose strong { font-weight: 500; color: var(--charcoal); }
/* Informations à compléter par le propriétaire : bien visibles tant
   qu'elles ne sont pas remplies. Retirer la classe une fois complété. */
.legal-todo {
  background: #fde7c7; color: #8a4b00;
  padding: 0 0.3rem; border-radius: 3px; font-weight: 500;
}

/* ---------- Liens légaux du pied de page ---------- */
.footer-legal { display: flex; flex-wrap: wrap; gap: 0.3rem 1.1rem; }
.footer-legal a, .footer-legal button {
  background: none; border: 0; padding: 0; color: inherit; font: inherit;
  cursor: pointer; text-decoration: underline; text-underline-offset: 2px;
  transition: color 0.3s var(--ease);
}
.footer-legal a:hover, .footer-legal button:hover { color: var(--bronze); }

/* ---------- Bandeau cookies ---------- */
.cookie-banner {
  position: fixed; z-index: 150;
  left: 1rem; right: 1rem; bottom: 1rem;
  max-width: 44rem; margin-inline: auto;
  background: var(--snow);
  border: 1px solid var(--stone-dark);
  box-shadow: var(--shadow-soft);
  animation: cookie-in 0.5s var(--ease);
}
@keyframes cookie-in { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: none; } }
.cookie-banner__inner { padding: 1.4rem 1.5rem; max-height: 80vh; overflow-y: auto; }
.cookie-banner__text { font-size: 0.88rem; color: var(--charcoal-soft); margin: 0 0 1rem; }
.cookie-banner__actions { display: flex; flex-wrap: wrap; gap: 0.6rem; }
.cookie-banner__actions .btn { flex: 1 1 auto; padding: 0.75rem 1.2rem; font-size: 0.74rem; }
.cookie-banner__cats { border-top: 1px solid var(--stone-dark); margin-bottom: 1rem; }
.cookie-cat {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: 0.75rem 0; border-bottom: 1px solid var(--stone-dark); cursor: pointer;
}
.cookie-cat__text { display: flex; flex-direction: column; font-size: 0.82rem; color: var(--charcoal-soft); }
.cookie-cat__text strong { font-weight: 500; color: var(--charcoal); }
.cookie-cat__always { font-size: 0.7rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--pine-soft); white-space: nowrap; }
.cookie-cat__toggle { width: 1.1rem; height: 1.1rem; accent-color: var(--bronze); flex-shrink: 0; cursor: pointer; }
@media (max-width: 640px) {
  .cookie-banner { left: 0; right: 0; bottom: 0; }
  .cookie-banner__actions .btn { flex-basis: 100%; }
}

/* ---------- Pop-up « Informations & règlement » (chalets.html) ---------- */
.infos-overlay {
  position: fixed; inset: 0; z-index: 210;
  background: rgba(17, 17, 15, 0.78);
  -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px);
  display: flex; align-items: center; justify-content: center;
  padding: 4vh 4vw;
  opacity: 0; visibility: hidden;
  transition: opacity 0.35s var(--ease), visibility 0.35s var(--ease);
}
.infos-overlay.is-open { opacity: 1; visibility: visible; }

.infos-panel {
  position: relative;
  width: 100%; max-width: 44rem; max-height: 88vh;
  overflow-y: auto;
  background: var(--snow); color: var(--charcoal);
  border-top: 3px solid var(--bronze);
  box-shadow: var(--shadow-soft);
  outline: none;
  transform: translateY(18px);
  transition: transform 0.45s var(--ease);
}
.infos-overlay.is-open .infos-panel { transform: translateY(0); }

.infos-photo { display: block; width: 100%; height: auto; max-height: 60vh; object-fit: contain; }
.infos-photo[hidden] { display: none; }

.infos-body { padding: 2.25rem 2.5rem 2.5rem; }
.infos-title { font-size: 2rem; line-height: 1.15; margin: 0.6rem 0 1.5rem; padding-bottom: 1.25rem; border-bottom: 1px solid var(--stone-dark); }
.infos-text { white-space: pre-line; line-height: 1.8; font-size: 0.98rem; font-weight: 300; color: var(--charcoal-soft); }
.infos-text[hidden] { display: none; }

.infos-close {
  position: absolute; top: 14px; right: 14px; z-index: 2;
  width: 42px; height: 42px;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.6rem; line-height: 1;
  background: rgba(249, 246, 240, 0.92); color: var(--charcoal);
  border: 1px solid var(--stone-dark);
  cursor: pointer;
  transition: all 0.3s var(--ease);
}
.infos-close:hover { background: var(--charcoal); color: var(--snow); border-color: var(--charcoal); }

@media (max-width: 640px) {
  .infos-overlay { padding: 2vh 3vw; }
  .infos-panel { max-height: 94vh; }
  .infos-photo { max-height: 45vh; }
  .infos-body { padding: 1.5rem 1.25rem 1.75rem; }
  .infos-title { font-size: 1.6rem; }
}