@font-face { font-family: "Jost"; src: url("../fonts/jost-200-300-400.woff2") format("woff2"); font-weight: 200 400; font-display: swap; }
@font-face { font-family: "Cormorant Garamond"; src: url("../fonts/cormorant-garamond.woff2") format("woff2"); font-weight: 300 700; font-display: swap; }
@font-face { font-family: "Cormorant Garamond"; src: url("../fonts/cormorant-garamond-italique.woff2") format("woff2"); font-weight: 300 700; font-style: italic; font-display: swap; }

:root {
  --creme: #F7F3EA; --ivoire: #FDFBF6; --encre: #414737; --kaki: #6B7355;
  --beige: #E3D8C2; --or: #BE9C5E; --gris: #8C8878;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html { background: var(--creme); }
body { background: var(--creme); color: var(--encre); font-family: "Cormorant Garamond", Garamond, Georgia, serif; font-weight: 400; font-size: 1.22rem; line-height: 1.6; -webkit-font-smoothing: antialiased; }
a { color: inherit; text-decoration-color: var(--beige); text-underline-offset: .2em; }
a:hover { text-decoration-color: var(--or); }
:focus-visible { outline: 1px solid var(--or); outline-offset: 3px; }

.logo { font-family: "Jost", sans-serif; font-weight: 300; letter-spacing: .4em; margin-right: -.4em; color: var(--kaki); font-size: clamp(1.3rem, 3.2vw, 2.1rem); }
.logo.petit { font-size: .8rem; }

/* ------------------------------------------------ la visite */
.visite { position: relative; height: 1400vh; }
.scene { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; background: var(--creme); }
#film { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }

/* Chapitres : à la manière des palaces, texte centré en ivoire sur l'image,
   posé sur un léger dégradé sombre qui ne monte pas plus haut que le tiers inférieur. */
.chapitre {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 30vh 16px calc(9vh + env(safe-area-inset-bottom));
  text-align: center; color: var(--ivoire); pointer-events: none;
  background: linear-gradient(to top, rgba(26,28,20,.8) 0%, rgba(26,28,20,.52) 45%, rgba(26,28,20,0) 100%);
  text-shadow: 0 1px 22px rgba(20,22,16,.35);
  opacity: 0; transform: translateY(16px);
  transition: opacity 1.1s ease, transform 1.6s cubic-bezier(.2,.7,.1,1);
}
.chapitre.visible { opacity: 1; transform: none; }
.sur { font-family: "Jost", sans-serif; font-weight: 300; font-size: clamp(.7rem, .9vw, .8rem); letter-spacing: .34em; text-transform: uppercase; }
.chapitre .sur { color: rgba(253,251,246,.82); margin-bottom: 1.4rem; }
.chapitre .sur::after { content: ""; display: block; width: 36px; height: 1px; background: var(--or); margin: 1.1rem auto 0; }
.chapitre h2 { font-family: "Cormorant Garamond", serif; font-weight: 300; font-size: clamp(2.5rem, 5.6vw, 5.4rem); line-height: 1.02; letter-spacing: -.005em; max-width: 16ch; margin: 0 auto; text-wrap: balance; }
.chapitre h2 em { font-style: italic; font-weight: 300; }
.chapitre p:not(.sur) { max-width: 34rem; margin: 1.5rem auto 0; font-size: clamp(1.1rem, 1.45vw, 1.35rem); line-height: 1.55; color: rgba(253,251,246,.92); text-wrap: pretty; }

.chapitre-ouverture { top: 0; bottom: auto; padding: calc(10vh + env(safe-area-inset-top)) 16px 18vh; color: var(--kaki); text-shadow: none;
  background: linear-gradient(to bottom, rgba(247,243,234,.55) 0%, rgba(247,243,234,0) 100%); }
.chapitre-ouverture p.logo { color: var(--kaki); font-size: clamp(1.4rem, 3.4vw, 2.4rem); margin: 0; max-width: none; line-height: 1.6; }
.chapitre-ouverture p.accroche { margin: 1.3rem auto 0; font-family: "Jost", sans-serif; font-weight: 300; font-size: clamp(.72rem, 1vw, .85rem); letter-spacing: .3em; line-height: 2.1; text-transform: uppercase; color: var(--encre); max-width: none; }

.indice { position: absolute; left: 0; right: 0; bottom: calc(3vh + env(safe-area-inset-bottom)); text-align: center; font-family: "Jost", sans-serif; font-weight: 300; font-size: .72rem; letter-spacing: .25em; text-transform: uppercase; color: var(--gris); transition: opacity .6s; }
.indice.cache { opacity: 0; }

/* ------------------------------------------------ après la visite */
.suite { padding: 16vh 16px 10vh; }
.colonne { max-width: 34rem; margin: 0 auto; }
.colonne + .colonne { margin-top: 14vh; }
.suite { text-align: center; }
.suite .sur { color: var(--kaki); margin-bottom: 1.2rem; }
.suite h2 { font-family: "Cormorant Garamond", serif; font-weight: 300; color: var(--encre); font-size: clamp(2.2rem, 4.4vw, 3.4rem); line-height: 1.05; margin-bottom: 1.6rem; }
.suite h2::after { content: ""; display: block; width: 36px; height: 1px; background: var(--or); margin: 1.4rem auto 0; }
.introduction { text-align: left; }
.suite p + p { margin-top: 1rem; }

.introduction { display: grid; gap: 1.4rem; }
.introduction label { display: grid; gap: .3rem; font-family: "Jost", sans-serif; font-weight: 300; font-size: .72rem; letter-spacing: .08em; text-transform: uppercase; color: var(--gris); }
.introduction label span { font-size: .8em; }
.introduction input, .introduction textarea {
  font-family: "Cormorant Garamond", serif; font-weight: 400; font-size: 1.25rem; text-transform: none; letter-spacing: 0; color: var(--encre);
  background: transparent; border: 0; border-bottom: 1px solid var(--beige); padding: .3rem 0; border-radius: 0; resize: vertical;
}
.introduction input:focus, .introduction textarea:focus { outline: none; border-bottom-color: var(--or); }
.introduction button {
  justify-self: center; margin-top: 1rem; font-family: "Jost", sans-serif; font-weight: 300; font-size: .74rem; letter-spacing: .25em; text-transform: uppercase;
  color: var(--kaki); background: transparent; border: 0; border-bottom: 1px solid var(--or); padding: .4rem 0; cursor: pointer;
}
.retour-form { min-height: 1.6em; color: var(--kaki); }
.direct { margin-top: 2.4rem; color: var(--gris); }

.pied { text-align: center; padding: 8vh 16px calc(6vh + env(safe-area-inset-bottom)); display: grid; gap: .8rem; justify-items: center; }
.pied a { font-family: "Jost", sans-serif; font-weight: 300; font-size: .75rem; letter-spacing: .08em; color: var(--gris); }

@media (prefers-reduced-motion: reduce) { .chapitre { transition: opacity .3s; transform: none; } }

.piege { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }