/* Les Hautes Dunes — démonstration « effets au défilement » (ZataLabs, V7.7).
   Trois scènes collées à l'écran : un mot-fenêtre qui s'ouvre sur le
   paysage, un texte qui s'allume mot à mot, un volet qui s'ouvre. */

:root {
  --sable: #f3e6d3;
  --sable-2: #ead8bf;
  --terre: #b25f3e;
  --terre-fonce: #8c4328;
  --encre: #2a1a12;
  --doux: #6f5646;
  --nuit: #0e1330;
  --affiche: "Anton", "Impact", "Arial Narrow", sans-serif;
  --sans: "Instrument Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --ease: cubic-bezier(.22, 1, .36, 1);
  --mot-y: 50%;       /* hauteur du mot-fenêtre (lue aussi par le script) */
  --mot-taille: min(27vw, 44vh);
}
@media (max-width: 640px) { :root { --mot-y: 63%; --mot-taille: min(29vw, 40vh); } }

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--sable); color: var(--encre); font: 400 1.0625rem/1.6 var(--sans); -webkit-font-smoothing: antialiased; }
h1, h2, h3 { font-family: var(--affiche); font-weight: 400; line-height: 1; margin: 0; text-transform: uppercase; letter-spacing: .01em; }
em { font-style: normal; color: var(--terre); }
a { color: inherit; }
:focus-visible { outline: 2px solid var(--terre); outline-offset: 3px; border-radius: 4px; }
.evitement { position: absolute; left: -999px; top: .5rem; z-index: 50; padding: .6rem 1rem; background: var(--encre); color: var(--sable); border-radius: 8px; }
.evitement:focus { left: .5rem; }
.surtitre { margin: 0 0 1rem; font: 600 .75rem/1.3 var(--sans); letter-spacing: .2em; text-transform: uppercase; color: var(--terre); }

/* ---------- En-tête ---------- */
.entete { position: absolute; z-index: 10; left: 0; right: 0; display: flex; align-items: center; gap: 1.5rem; padding: 1.1rem clamp(1rem, 4vw, 3rem); }
.logo { font: 400 1.35rem/1 var(--affiche); text-transform: uppercase; letter-spacing: .04em; text-decoration: none; }
.entete__nav { display: flex; gap: 1.6rem; margin-left: auto; }
.entete__nav a { text-decoration: none; font-size: .92rem; font-weight: 500; }
.entete__appel { padding: .5rem 1.1rem; border-radius: 999px; background: var(--encre); color: var(--sable); text-decoration: none; font-size: .9rem; font-weight: 500; }
@media (max-width: 640px) { .entete__nav { display: none; } .entete__appel { margin-left: auto; } }

/* ---------- Scènes collées ---------- */
.masque { position: relative; height: 320vh; height: 320svh; }
.manifeste { position: relative; height: 260vh; height: 260svh; }
.volet { position: relative; height: 220vh; height: 220svh; }
.ecran { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; }
.ecran__image { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.masque .ecran__image { transform: scale(1.25); transform-origin: 50% 92%; will-change: transform; }
.ecran__ombre { position: absolute; inset: 0; background: linear-gradient(180deg, transparent 35%, rgb(42 26 18 / .55)); opacity: 0; }

/* Le mot-fenêtre. Pas de will-change : le navigateur redessine le texte à
   chaque échelle, il reste net jusqu'au bout. */
.cache { position: absolute; inset: 0; width: 100%; height: 100%; display: block; transform-origin: 50% 50%; }
.cache__aplat { fill: var(--sable); }
.cache__mot { font-family: var(--affiche); font-size: var(--mot-taille); letter-spacing: .01em; }
.cache__mesure { fill: none; }
.cache__haut, .cache__bas { position: absolute; left: 0; right: 0; margin: 0; text-align: center; color: var(--encre); }
.cache__haut { top: calc(var(--mot-y) - var(--mot-taille) * .5 - 2.6rem); padding: 0 1rem; font-weight: 500; letter-spacing: .06em; }
.cache__bas { bottom: 1.6rem; display: flex; flex-direction: column; align-items: center; gap: .5rem; font-size: .75rem; letter-spacing: .2em; text-transform: uppercase; color: var(--doux); }
.cache__bas span { position: relative; width: 1px; height: 2.4rem; background: rgb(42 26 18 / .2); overflow: hidden; }
.cache__bas span::after { content: ""; position: absolute; left: 0; top: -40%; width: 1px; height: 40%; background: var(--terre); animation: indice 2.2s var(--ease) infinite; }
@keyframes indice { to { top: 100%; } }

.legende { position: absolute; left: clamp(1.2rem, 6vw, 5rem); right: 1.2rem; bottom: clamp(2rem, 9vh, 6rem); max-width: 40rem; color: #fff8ee; opacity: 0; }
.legende h1 { font-size: clamp(3rem, 8.5vw, 7.4rem); text-shadow: 0 4px 40px rgb(42 26 18 / .35); }
.legende p { max-width: 28rem; margin: 1.2rem 0 0; font-size: clamp(1rem, 1.6vw, 1.15rem); text-shadow: 0 1px 12px rgb(42 26 18 / .6); }

/* Le manifeste */
.ecran--nuit { background: var(--nuit); }
.ecran--nuit::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgb(14 19 48 / .2), rgb(14 19 48 / .55)); }
.manifeste__texte { position: absolute; inset: 0; z-index: 1; display: flex; flex-direction: column; justify-content: center; padding: 0 clamp(1.2rem, 8vw, 8rem); }
.manifeste__texte .surtitre { color: #e5b98d; font-family: var(--sans); text-transform: uppercase; }
.manifeste__phrase { max-width: 58rem; margin: 0; font: 500 clamp(1.6rem, 3.9vw, 3.4rem)/1.2 var(--sans); letter-spacing: -.01em; color: #fff; }
.manifeste__phrase .mot { opacity: .16; transition: opacity .35s ease; }
.manifeste__phrase .mot.is-allume { opacity: 1; }

/* Le volet */
.ecran--volet { background: var(--sable); }
.volet__cadre { position: absolute; inset: 0; clip-path: inset(22% 34% 22% 34% round 999px 999px 24px 24px); will-change: clip-path; }
.volet__texte { position: absolute; left: clamp(1.2rem, 6vw, 5rem); bottom: clamp(2rem, 8vh, 5rem); max-width: 26rem; padding: 1.6rem 1.8rem; border-radius: 18px; background: var(--sable); box-shadow: 0 20px 60px rgb(42 26 18 / .25); opacity: 0; transform: translateY(1.5rem); }
.volet__texte h2 { font-size: clamp(2rem, 4.5vw, 3.2rem); margin-bottom: .8rem; }
.volet__texte p:last-child { margin: 0; color: var(--doux); }

/* ---------- Sections classiques ---------- */
.enveloppe { max-width: 72rem; margin: 0 auto; padding: 0 clamp(1.2rem, 5vw, 3rem); }
.enveloppe--etroite { max-width: 44rem; }
.chambres, .disponibilites { padding: clamp(4.5rem, 11vw, 8rem) 0; }
.chambres h2, .disponibilites h2 { font-size: clamp(2.4rem, 6vw, 4.6rem); margin-bottom: 2.5rem; }
.cartes { display: grid; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); gap: 1.4rem; margin: 0; padding: 0; list-style: none; }
.carte { padding: 0 0 1.4rem; border-radius: 20px; background: #fbf4ea; overflow: hidden; box-shadow: 0 1px 0 rgb(42 26 18 / .06); }
.carte h3, .carte p { margin-left: 1.4rem; margin-right: 1.4rem; }
.carte h3 { font-size: 1.7rem; margin-top: 1.3rem; margin-bottom: .5rem; }
.carte p { margin-top: 0; color: var(--doux); }
.carte__prix { margin-bottom: 0; color: var(--encre) !important; }
.carte__prix strong { font: 400 1.5rem var(--affiche); color: var(--terre); margin-right: .3rem; }
.carte__visuel { display: block; aspect-ratio: 16 / 10; background-size: cover; background-position: center; }
.carte__visuel--levant { background-image: linear-gradient(180deg, rgb(255 240 220 / .0), rgb(255 240 220 / .25)), url("dunes-jour.svg?v=770"); background-position: 70% 60%; }
.carte__visuel--couchant { background-image: url("patio.svg?v=770"); background-position: 85% 60%; }
.carte__visuel--etoiles { background-image: url("dunes-nuit.svg?v=770"); background-position: 25% 30%; }

.disponibilites { background: var(--sable-2); }
.formulaire__grille { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .9rem; }
.formulaire label { display: grid; gap: .4rem; font-size: .85rem; font-weight: 600; color: var(--doux); }
.formulaire input, .formulaire select { width: 100%; min-width: 0; padding: .8rem .9rem; border: 1px solid rgb(42 26 18 / .18); border-radius: 12px; background: #fbf4ea; color: var(--encre); font: inherit; font-size: 1rem; }
.formulaire input[aria-invalid="true"] { border-color: #c0392b; }
.formulaire__total { margin: 1.4rem 0; color: var(--doux); }
.formulaire__total strong { font: 400 1.8rem var(--affiche); color: var(--encre); margin-left: .4rem; }
.formulaire button { padding: .95rem 1.6rem; border: 0; border-radius: 999px; background: var(--terre); color: #fff; font: 600 1rem var(--sans); cursor: pointer; }
.formulaire button:hover { background: var(--terre-fonce); }
.formulaire__message { min-height: 1.5em; margin: 1rem 0 0; color: var(--terre-fonce); font-weight: 500; }
.formulaire__message.is-erreur { color: #c0392b; }
@media (max-width: 640px) { .formulaire__grille { grid-template-columns: 1fr 1fr; } .formulaire__grille label:first-child { grid-column: 1 / -1; } }

.pied { padding: 2rem 1.2rem 2.5rem; text-align: center; font-size: .85rem; color: var(--doux); }

/* Animations réduites : pas de scène collée ; l'image s'affiche avec son
   titre, le texte est allumé, le volet grand ouvert. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .masque, .manifeste, .volet { height: auto; }
  .ecran { position: relative; }
  .masque .ecran__image { transform: none; }
  .cache, .cache__haut, .cache__bas { display: none; }
  .ecran__ombre, .legende { opacity: 1; }
  .manifeste__phrase .mot { opacity: 1; }
  .volet__cadre { clip-path: none; }
  .volet__texte { opacity: 1; transform: none; }
}