/* =====================================================================
 * PREVIEW LIEUX V2 : "Visite privée"
 * Chapitres plein écran (100svh) avec scroll-snap, ken burns doux,
 * numérotation romaine, indicateur de progression latéral, reveals.
 *
 * Charte Ouverture (variables déjà définies dans newhome/styles.css) :
 *   --creme:#f6f1e9  --noir:#0a0908  --rouge:#8f1711  --or:#ebcf95
 *   Fonts : Playfair Display, Manrope, EB Garamond (chargées par le gabarit).
 *
 * IMPORTANT : ce fichier surcharge/étend uniquement les composants propres
 * à la preview lieux (préfixe .plx-). Il ne touche pas aux classes
 * partagées de newhome/styles.css (.hero, .nav, .footer, .btn, ...).
 * ===================================================================== */

:root{
  --plx-creme:#f6f1e9;
  --plx-creme-warm:#efe7d8;
  --plx-noir:#0a0908;
  --plx-rouge:#8f1711;
  --plx-or:#ebcf95;
  --plx-ivory:#faf6ee;
  --plx-ease: cubic-bezier(.2,.7,.15,1);
}

/* ---- Chrome : compenser la nav fixe ---- */
main.plx-main{
  background: var(--plx-noir);
  color: var(--plx-creme);
  overflow-x: hidden;
}

/* ============ HERO INTRO ============ */
.plx-intro{
  min-height: 62svh;
  padding: clamp(140px, 22svh, 220px) 6vw 8svh;
  background: var(--plx-creme);
  color: var(--plx-noir);
  display: grid;
  align-content: end;
  position: relative;
  overflow: hidden;
}
.plx-intro__eyebrow{
  font-family: Manrope, sans-serif;
  font-size: 12px;
  letter-spacing: .28em;
  text-transform: uppercase;
  color: var(--plx-rouge);
  margin: 0 0 24px;
  display: inline-flex;
  align-items: center;
  gap: 14px;
}
.plx-intro__eyebrow::before{
  content:"";
  width: 36px;
  height: 1px;
  background: var(--plx-rouge);
  display: inline-block;
}
.plx-intro__title{
  font-family: 'Playfair Display', serif;
  font-weight: 500;
  font-size: clamp(48px, 8.4vw, 128px);
  line-height: 1;
  letter-spacing: -.015em;
  margin: 0 0 28px;
  max-width: 14ch;
}
.plx-intro__title em{
  font-style: italic;
  color: var(--plx-rouge);
  font-weight: 500;
}
.plx-intro__lead{
  font-family: 'EB Garamond', serif;
  font-style: italic;
  font-size: clamp(19px, 1.8vw, 24px);
  line-height: 1.45;
  color: #3a3532;
  max-width: 46ch;
  margin: 0 0 40px;
}
.plx-intro__scrollcue{
  font-family: Manrope, sans-serif;
  font-size: 11px;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: #6a6360;
  display: inline-flex;
  align-items: center;
  gap: 12px;
}
.plx-intro__scrollcue::after{
  content:"";
  width: 1px;
  height: 42px;
  background: linear-gradient(to bottom, var(--plx-rouge), transparent);
  animation: plx-cue 2.4s var(--plx-ease) infinite;
  transform-origin: top;
}
@keyframes plx-cue{
  0%{ transform: scaleY(0); }
  40%{ transform: scaleY(1); }
  100%{ transform: scaleY(0); transform-origin: bottom; }
}

/* ============ RAIL DE CHAPITRES (scroll-snap) ============ */
.plx-rail{
  scroll-snap-type: y mandatory;
  scroll-behavior: smooth;
}

/* ============ CHAPITRE ============ */
.plx-ch{
  position: relative;
  min-height: 100svh;
  scroll-snap-align: start;
  scroll-snap-stop: always;
  overflow: hidden;
  isolation: isolate;
}

/* Image full bleed + ken burns */
.plx-ch__media{
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
}
.plx-ch__media img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  transform: scale(1.08);
  transition: transform 12s var(--plx-ease);
  will-change: transform;
}
.plx-ch.is-active .plx-ch__media img{
  transform: scale(1.16);
}

/* Voile dégradé pour lisibilité (bas + gauche) */
.plx-ch__veil{
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(180deg,
      rgba(10,9,8,.10) 0%,
      rgba(10,9,8,.15) 45%,
      rgba(10,9,8,.72) 92%,
      rgba(10,9,8,.85) 100%),
    linear-gradient(90deg,
      rgba(10,9,8,.55) 0%,
      rgba(10,9,8,.20) 44%,
      rgba(10,9,8,0) 70%);
  pointer-events: none;
}

/* Grain léger */
.plx-ch__grain{
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  opacity: .06;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='120'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix type='matrix' values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 0.6 0'/></filter><rect width='120' height='120' filter='url(%23n)' opacity='.6'/></svg>");
  background-size: 240px;
}

/* Contenu chapitre : colonne à gauche, aligné en bas */
.plx-ch__content{
  position: relative;
  z-index: 3;
  min-height: 100svh;
  display: grid;
  grid-template-rows: 1fr auto;
  padding: clamp(120px, 16svh, 180px) 8vw clamp(56px, 10svh, 108px) 8vw;
  color: var(--plx-creme);
}
.plx-ch__inner{
  align-self: end;
  max-width: 780px;
  display: grid;
  gap: 22px;
}

/* Numéro romain (I, II, III) */
.plx-ch__num{
  font-family: 'Playfair Display', serif;
  font-style: italic;
  font-weight: 400;
  font-size: clamp(18px, 1.4vw, 22px);
  letter-spacing: .18em;
  color: var(--plx-or);
  display: inline-flex;
  align-items: center;
  gap: 16px;
  opacity: 0;
  transform: translateY(14px);
  transition: opacity .9s var(--plx-ease), transform .9s var(--plx-ease);
}
.plx-ch__num::before{
  content:"";
  width: 44px;
  height: 1px;
  background: var(--plx-or);
  display: inline-block;
  opacity: .8;
}
.plx-ch__num::after{
  content:" · Chapitre";
  font-style: normal;
  font-family: Manrope, sans-serif;
  font-size: 11px;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: rgba(246,241,233,.55);
  margin-left: 10px;
}

/* Titre du lieu */
.plx-ch__title{
  font-family: 'Playfair Display', serif;
  font-weight: 500;
  font-size: clamp(46px, 7.4vw, 118px);
  line-height: .96;
  letter-spacing: -.018em;
  margin: 0;
  color: var(--plx-creme);
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 1s var(--plx-ease) .12s, transform 1s var(--plx-ease) .12s;
}
.plx-ch__title em{
  font-style: italic;
  color: var(--plx-or);
  font-weight: 500;
}

/* Métadonnées en petites capitales */
.plx-ch__meta{
  font-family: Manrope, sans-serif;
  font-weight: 500;
  font-size: 11.5px;
  letter-spacing: .26em;
  text-transform: uppercase;
  color: rgba(246,241,233,.78);
  display: flex;
  flex-wrap: wrap;
  gap: 10px 22px;
  align-items: center;
  opacity: 0;
  transform: translateY(14px);
  transition: opacity .9s var(--plx-ease) .24s, transform .9s var(--plx-ease) .24s;
}
.plx-ch__meta > span{ position: relative; }
.plx-ch__meta > span + span::before{
  content:"·";
  color: var(--plx-or);
  margin-right: 22px;
  margin-left: -18px;
  font-weight: 700;
  letter-spacing: 0;
}

/* Description */
.plx-ch__desc{
  font-family: 'EB Garamond', serif;
  font-size: clamp(18px, 1.5vw, 22px);
  line-height: 1.55;
  color: rgba(246,241,233,.92);
  max-width: 56ch;
  margin: 6px 0 0;
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 1s var(--plx-ease) .36s, transform 1s var(--plx-ease) .36s;
}

/* CTA : lien "Découvrir" */
.plx-ch__cta{
  margin-top: 12px;
  font-family: Manrope, sans-serif;
  font-weight: 500;
  font-size: 13px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--plx-creme);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 14px;
  padding-bottom: 8px;
  border-bottom: 1px solid rgba(235,207,149,.55);
  transition: color .3s var(--plx-ease), border-color .3s var(--plx-ease), gap .3s var(--plx-ease);
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 1s var(--plx-ease) .48s, transform 1s var(--plx-ease) .48s,
              color .3s var(--plx-ease), border-color .3s var(--plx-ease), gap .3s var(--plx-ease);
  align-self: start;
  width: fit-content;
}
.plx-ch__cta:hover, .plx-ch__cta:focus-visible{
  color: var(--plx-or);
  border-color: var(--plx-or);
  gap: 22px;
}
.plx-ch__cta .arrow{
  font-family: 'Playfair Display', serif;
  font-size: 18px;
  transition: transform .3s var(--plx-ease);
}
.plx-ch__cta:hover .arrow{ transform: translateX(4px); }

/* Reveal quand le chapitre est actif */
.plx-ch.is-active .plx-ch__num,
.plx-ch.is-active .plx-ch__title,
.plx-ch.is-active .plx-ch__meta,
.plx-ch.is-active .plx-ch__desc,
.plx-ch.is-active .plx-ch__cta{
  opacity: 1;
  transform: translateY(0);
}

/* Bandeau bas de chapitre : label discret "Chapitre suivant" */
.plx-ch__next{
  position: absolute;
  right: 6vw;
  bottom: clamp(28px, 4svh, 44px);
  z-index: 4;
  font-family: Manrope, sans-serif;
  font-size: 10.5px;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: rgba(246,241,233,.55);
  display: inline-flex;
  align-items: center;
  gap: 12px;
  opacity: 0;
  transition: opacity .8s var(--plx-ease) .8s;
}
.plx-ch.is-active .plx-ch__next{ opacity: 1; }
.plx-ch:last-of-type .plx-ch__next{ display: none; }
.plx-ch__next::after{
  content:"";
  width: 1px;
  height: 26px;
  background: linear-gradient(to bottom, rgba(246,241,233,.55), transparent);
}

/* ============ INDICATEUR DE PROGRESSION VERTICAL ============ */
.plx-progress{
  position: fixed;
  top: 50%;
  right: clamp(18px, 3vw, 42px);
  transform: translateY(-50%);
  z-index: 40;
  display: grid;
  gap: 22px;
  padding: 22px 8px;
  pointer-events: auto;
}
.plx-progress__dot{
  appearance: none;
  border: 0;
  background: transparent;
  cursor: pointer;
  padding: 6px 0;
  display: flex;
  align-items: center;
  gap: 14px;
  font-family: Manrope, sans-serif;
  font-size: 10px;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: rgba(246,241,233,.45);
  transition: color .35s var(--plx-ease);
}
.plx-progress__dot::before{
  content:"";
  width: 22px;
  height: 1px;
  background: currentColor;
  transition: width .35s var(--plx-ease), background .35s var(--plx-ease);
}
.plx-progress__dot:hover{ color: rgba(246,241,233,.85); }
.plx-progress__dot.is-active{
  color: var(--plx-or);
}
.plx-progress__dot.is-active::before{
  width: 42px;
  background: var(--plx-or);
}
.plx-progress__label{
  opacity: 0;
  transform: translateX(-6px);
  transition: opacity .35s var(--plx-ease), transform .35s var(--plx-ease);
}
.plx-progress__dot.is-active .plx-progress__label,
.plx-progress__dot:hover .plx-progress__label{
  opacity: 1;
  transform: translateX(0);
}
/* Cache la progression tant que la nav est visible (intro) */
.plx-progress.is-hidden{ opacity: 0; pointer-events: none; }
.plx-progress{ transition: opacity .5s var(--plx-ease); }

/* ============ BANDE CTA DE FIN ============ */
.plx-outro{
  scroll-snap-align: start;
  background: var(--plx-creme);
  color: var(--plx-noir);
  padding: clamp(80px, 14svh, 140px) 8vw clamp(64px, 10svh, 108px);
  display: grid;
  place-items: center;
  text-align: center;
  min-height: 78svh;
}
.plx-outro__inner{ max-width: 780px; display: grid; gap: 28px; justify-items: center; }
.plx-outro__eyebrow{
  font-family: Manrope, sans-serif;
  font-size: 12px;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--plx-rouge);
  display: inline-flex;
  align-items: center;
  gap: 14px;
}
.plx-outro__eyebrow::before,
.plx-outro__eyebrow::after{
  content:"";
  width: 34px;
  height: 1px;
  background: var(--plx-rouge);
}
.plx-outro__title{
  font-family: 'Playfair Display', serif;
  font-weight: 500;
  font-size: clamp(34px, 4.6vw, 62px);
  line-height: 1.08;
  letter-spacing: -.01em;
  margin: 0;
  max-width: 22ch;
}
.plx-outro__title em{ font-style: italic; color: var(--plx-rouge); }
.plx-outro__btn{
  display: inline-flex;
  align-items: center;
  gap: 14px;
  padding: 18px 34px;
  border: 1px solid var(--plx-noir);
  background: var(--plx-noir);
  color: var(--plx-creme);
  font-family: Manrope, sans-serif;
  font-size: 13px;
  letter-spacing: .22em;
  text-transform: uppercase;
  text-decoration: none;
  transition: background .3s var(--plx-ease), color .3s var(--plx-ease), gap .3s var(--plx-ease);
  margin-top: 4px;
}
.plx-outro__btn:hover{ background: var(--plx-rouge); border-color: var(--plx-rouge); color: var(--plx-creme); gap: 22px; }
.plx-outro__club{
  margin-top: 28px;
  padding-top: 28px;
  border-top: 1px solid rgba(10,9,8,.14);
  font-family: 'EB Garamond', serif;
  font-style: italic;
  font-size: 17px;
  line-height: 1.55;
  color: #3a3532;
  max-width: 52ch;
}
.plx-outro__club a{
  color: var(--plx-rouge);
  text-decoration: none;
  border-bottom: 1px solid rgba(143,23,17,.4);
  padding-bottom: 2px;
  transition: border-color .25s var(--plx-ease);
}
.plx-outro__club a:hover{ border-color: var(--plx-rouge); }

/* ============ RESPONSIVE ============ */
@media (max-width: 900px){
  /* Snap non bloquant en mobile : laisse le scroll libre */
  .plx-rail{ scroll-snap-type: none; }
  .plx-ch{ min-height: 92svh; scroll-snap-align: none; }
  .plx-ch__content{
    padding: clamp(96px, 12svh, 140px) 6vw clamp(56px, 8svh, 96px) 6vw;
  }
  .plx-progress{ display: none; }
  .plx-ch__next{ display: none; }
  .plx-intro{ padding: clamp(110px, 18svh, 160px) 6vw 6svh; min-height: 56svh; }
  .plx-ch__meta{
    gap: 8px 16px;
    font-size: 10.5px;
    letter-spacing: .22em;
  }
  .plx-ch__meta > span + span::before{
    margin-right: 14px;
    margin-left: -12px;
  }
  .plx-outro{ padding: 80px 6vw 80px; min-height: auto; }
}

@media (max-width: 560px){
  .plx-ch__title{ font-size: clamp(38px, 12vw, 66px); }
  .plx-intro__title{ font-size: clamp(40px, 14vw, 76px); }
  .plx-ch__desc{ font-size: 17px; }
}

@media (prefers-reduced-motion: reduce){
  .plx-rail{ scroll-snap-type: none; }
  .plx-ch__media img{ transition: none; transform: none; }
  .plx-ch.is-active .plx-ch__media img{ transform: none; }
  .plx-ch__num, .plx-ch__title, .plx-ch__meta, .plx-ch__desc, .plx-ch__cta{
    opacity: 1; transform: none; transition: none;
  }
  .plx-intro__scrollcue::after{ animation: none; }
}