@font-face { font-family: "Brygada 1918"; src: url("polices/brygada.woff2") format("woff2"); font-weight: 400 700; font-display: swap; }
@font-face { font-family: "Brygada 1918"; src: url("polices/brygada-italique.woff2") format("woff2"); font-weight: 400 700; font-style: italic; font-display: swap; }
@font-face { font-family: "Rubik"; src: url("polices/rubik.woff2") format("woff2"); font-weight: 400 600; font-display: swap; }

:root {
  --nuit: #16223a;
  --nuit-2: #23365a;
  --sable: #f5f0e6;
  --blanc: #ffffff;
  --turquoise: #22b3ae;
  --turquoise-fonce: #0e7470;
  --turquoise-pale: #d9f1ef;
  --bois: #d7b676;
  --bois-fonce: #b8955a;
  --bois-pale: #f0e3c6;
  --or: #d4ae5c;
  --encre: #1b2131;
  --gris: #4a5266;
  --titres: "Brygada 1918", Georgia, serif;
  --texte: "Rubik", system-ui, sans-serif;
  --gouttiere: 20px;
  --rayon: 22px;
  --sms: "";
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  margin: 0;
  background: var(--sable);
  color: var(--encre);
  font: 400 17px/1.6 var(--texte);
  overflow-x: hidden;
}
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
h1, h2, h3 { font-family: var(--titres); font-weight: 600; line-height: 1.12; margin: 0; letter-spacing: -0.01em; text-wrap: balance; }
h1 em, h2 em { font-style: italic; font-weight: 500; color: var(--turquoise-fonce); }
p { margin: 0; }
blockquote { margin: 0; }
cite { font-style: normal; }
section { position: relative; }

/* ---------- La plaque (reprise de la plaque de l'entrée, avec ses quatre vis) ---------- */
.plaque {
  display: inline-flex; flex-direction: column; align-items: flex-start;
  margin-bottom: 18px; padding: 9px 18px 8px;
  background:
    radial-gradient(circle at 7px 7px, #8d97ab 0 1.6px, transparent 2.2px),
    radial-gradient(circle at calc(100% - 7px) 7px, #8d97ab 0 1.6px, transparent 2.2px),
    radial-gradient(circle at 7px calc(100% - 7px), #8d97ab 0 1.6px, transparent 2.2px),
    radial-gradient(circle at calc(100% - 7px) calc(100% - 7px), #8d97ab 0 1.6px, transparent 2.2px),
    var(--nuit);
  color: var(--blanc); border-radius: 4px;
  box-shadow: 0 8px 18px -12px rgba(10, 18, 34, .8);
  line-height: 1.1;
}
.plaque span { font-family: var(--titres); font-weight: 600; text-transform: uppercase; letter-spacing: .14em; font-size: 15px; }
.plaque em { font-family: var(--titres); font-style: italic; color: var(--or); font-size: 15px; margin-top: 3px; }
.plaque-claire {
  background:
    radial-gradient(circle at 7px 7px, #b9bfcb 0 1.6px, transparent 2.2px),
    radial-gradient(circle at calc(100% - 7px) 7px, #b9bfcb 0 1.6px, transparent 2.2px),
    radial-gradient(circle at 7px calc(100% - 7px), #b9bfcb 0 1.6px, transparent 2.2px),
    radial-gradient(circle at calc(100% - 7px) calc(100% - 7px), #b9bfcb 0 1.6px, transparent 2.2px),
    var(--blanc);
  color: var(--nuit);
}
.plaque-claire em { color: var(--turquoise-fonce); }
.js .apparait .plaque { transform: rotate(-4deg) translateY(-6px); opacity: 0; transition: transform .8s cubic-bezier(.3,1.4,.4,1) .15s, opacity .5s ease .15s; transform-origin: 20% 0; }
.js .apparait.vu .plaque { transform: none; opacity: 1; }

/* ---------- En-tête ---------- */
.entete {
  position: sticky; top: 0; z-index: 30;
  display: flex; align-items: center; gap: 10px;
  padding: 10px var(--gouttiere);
  background: var(--nuit);
  color: var(--blanc);
  border-bottom: 1px solid rgba(215, 182, 118, 0.35);
}
.marque { display: flex; flex-direction: column; text-decoration: none; line-height: 1; margin-right: auto; }
.marque-nom { font-family: var(--titres); font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; font-size: 18px; white-space: nowrap; }
.marque-sous { font-family: var(--titres); font-style: italic; color: var(--or); font-size: 15px; margin-top: 3px; }
.menu { display: none; }
.apercu {
  font-size: 11px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase;
  border: 1px solid var(--or); color: var(--or); border-radius: 999px; padding: 5px 10px;
}
.entete-tel {
  display: inline-flex; align-items: center; gap: 8px;
  min-height: 46px; padding: 0 16px; border-radius: 999px;
  background: var(--turquoise); color: var(--nuit); font-weight: 600; text-decoration: none; font-size: 16px;
}
.entete-tel svg { width: 18px; height: 18px; fill: currentColor; }
.entete-reserver { display: none; }
.tel-long { display: none; }
@media (min-width: 420px) { .tel-long { display: inline; } .tel-court { display: none; } }
@media (max-width: 389px) { .entete { gap: 8px; padding-left: 16px; padding-right: 16px; } .marque-nom { font-size: 16px; } .marque-sous { font-size: 14px; } .apercu { padding: 4px 8px; font-size: 10px; } .entete-tel { padding: 0 12px; } }

/* ---------- Boutons ---------- */
.actions { display: flex; flex-wrap: wrap; gap: 10px; }
.bouton {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 52px; padding: 0 18px; border-radius: 999px; white-space: nowrap;
  font-weight: 600; font-size: 17px; text-decoration: none; text-align: center;
  transition: transform .25s ease, background-color .25s ease, color .25s ease, box-shadow .25s ease;
}
.bouton:hover { transform: translateY(-2px); }
.bouton-turquoise { background: var(--turquoise); color: var(--nuit); box-shadow: 0 10px 22px -14px rgba(34,179,174,.9); }
.bouton-turquoise:hover { background: #3cc6c1; }
.bouton-ligne { border: 1.5px solid rgba(255,255,255,.75); color: var(--blanc); }
.bouton-ligne:hover { background: rgba(255,255,255,.1); }
.bouton-nuit { background: var(--nuit); color: var(--blanc); }
.bouton-nuit:hover { background: var(--nuit-2); }

/* ---------- Photos : coins arrondis et bloc décalé ---------- */
.photo { position: relative; margin: 0; }
.photo::before {
  content: ""; position: absolute; inset: 0;
  transform: translate(10px, 10px);
  border-radius: var(--rayon);
  background: var(--turquoise);
  transition: transform .9s cubic-bezier(.2,.7,.2,1) .1s;
}
.photo.photo-bois::before { background: var(--bois); }
.photo.photo-nuit::before { background: var(--nuit); }
.photo img {
  position: relative; width: 100%; aspect-ratio: 4 / 3; object-fit: cover;
  border-radius: var(--rayon);
  box-shadow: 0 14px 30px -18px rgba(10, 18, 34, .55);
}
.photo-portrait img { aspect-ratio: 3 / 4; }
.js .apparait .photo::before, .js .photo.apparait::before, .js .heros .photo::before { transform: translate(0, 0); }
.js .vu .photo::before, .js .photo.vu::before, .js .heros.vu .photo::before { transform: translate(10px, 10px); }

/* ---------- Haut de page ---------- */
.heros {
  background:
    linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px) 0 0 / 28px 28px,
    linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px) 0 0 / 28px 28px,
    var(--nuit);
  color: var(--blanc);
  padding: 18px var(--gouttiere) 34px;
  display: grid; gap: 22px;
  overflow: hidden;
}
.heros-lueur {
  position: absolute; width: 520px; height: 520px; left: 50%; top: 10%;
  margin-left: -260px; border-radius: 50%;
  background: radial-gradient(circle, rgba(34,179,174,.32), rgba(34,179,174,0) 65%);
  animation: lueur 14s ease-in-out infinite alternate;
  pointer-events: none;
}
@keyframes lueur { from { transform: translate(-60px, -20px) scale(.9); } to { transform: translate(60px, 60px) scale(1.1); } }
.heros-visuel, .heros-texte { position: relative; }
.heros-visuel { margin-right: 10px; }
.heros-photo img { aspect-ratio: 4 / 3; max-height: 46vh; min-height: 210px; }
.note-pastille {
  position: absolute; top: 12px; left: 12px;
  background: var(--blanc); color: var(--encre);
  border-radius: 999px; padding: 7px 14px; font-size: 15px;
  box-shadow: 0 6px 18px -8px rgba(0,0,0,.45);
}
.etoiles { color: #e3a92b; letter-spacing: 1px; }
.vignette-ronde {
  position: absolute; right: 2px; bottom: -22px; margin: 0;
  display: flex; flex-direction: column; align-items: center;
}
.vignette-ronde img {
  width: 104px; height: 104px; object-fit: cover; border-radius: 50%;
  border: 4px solid var(--bois); box-shadow: 0 10px 22px -10px rgba(0,0,0,.6);
}
.vignette-ronde figcaption {
  display: inline-block; margin-top: -10px; position: relative;
  background: var(--bois); color: var(--nuit); font-size: 12px; font-weight: 600;
  border-radius: 999px; padding: 3px 9px; white-space: nowrap;
}
.surtitre {
  font-size: 13px; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--or);
  margin-bottom: 10px;
}
.heros h1 { font-size: 30px; }
.heros h1 em { color: var(--or); }
.heros .actions { margin-top: 18px; }
.heros .actions .bouton { flex: 1 1 140px; }
.heros-sous { margin-top: 16px; color: rgba(255,255,255,.82); font-size: 16px; }
.heros-suite {
  display: inline-flex; align-items: center; gap: 8px; margin-top: 16px;
  color: var(--or); font-weight: 500; text-decoration: none; font-size: 16px;
}
.heros-suite span { display: inline-block; animation: descend 1.8s ease-in-out infinite; }
@keyframes descend { 50% { transform: translateY(5px); } }
@media (max-height: 700px) and (max-width: 600px) {
  .heros { padding-top: 12px; gap: 18px; }
  .heros-photo img { max-height: 36vh; min-height: 180px; }
  .vignette-ronde { bottom: -16px; }
  .vignette-ronde img { width: 84px; height: 84px; }
  .heros h1 { font-size: 27px; }
  .surtitre { margin-bottom: 6px; }
  .heros .actions { margin-top: 14px; }
}

/* ---------- Frise de mosaïque, posée carreau par carreau ---------- */
.mosaique {
  height: 18px;
  background:
    linear-gradient(90deg, transparent 0 16px, rgba(255,255,255,.55) 16px 18px) 0 0 / 18px 18px,
    linear-gradient(90deg, #1aa7a2 0 18px, #33c2bc 18px 36px, #0f8c88 36px 54px, #4fd0c9 54px 72px, #22b3ae 72px 90px, #129b96 90px 108px) 0 0 / 108px 18px;
  transform-origin: left center;
}
.js .mosaique { transform: scaleX(0); transition: transform 1.4s steps(22, end); }
.js .mosaique.vu { transform: scaleX(1); }

/* ---------- Tiges de bambou (le bois des lits) ---------- */
.bambou { position: absolute; top: 40px; width: 60px; height: calc(100% - 80px); pointer-events: none; opacity: .55; }
.bambou-gauche { left: -18px; }
.bambou-droite { right: -18px; }
.bambou path { fill: none; stroke: var(--bois); stroke-linecap: round; }
.bambou .tige { stroke-width: 9; }
.bambou .noeuds { stroke: var(--bois-fonce); stroke-width: 3; }
.bambou .feuille { fill: #8fb59a; stroke: none; }
.js .bambou .tige, .js .bambou .noeuds { stroke-dasharray: 700; stroke-dashoffset: 700; transition: stroke-dashoffset 2.2s ease; }
.js .bambou .feuille { opacity: 0; transition: opacity .8s ease 1.4s; }
.js .bambou.vu .tige, .js .bambou.vu .noeuds { stroke-dashoffset: 0; }
.js .bambou.vu .feuille { opacity: 1; }

/* ---------- Titres et paragraphes ---------- */
h2 { font-size: 30px; margin-bottom: 16px; }
h3 { font-size: 24px; margin-bottom: 18px; }

/* ---------- La maison ---------- */
.maison { padding: 64px var(--gouttiere); background: var(--sable); overflow: hidden; }
.maison-intro > p:not(.plaque) { color: var(--gris); }
.visite { display: grid; gap: 34px; margin-top: 40px; }
.visite-piece { margin: 0; }
.visite-piece .photo { margin-right: 10px; }
.visite-piece figcaption { margin-top: 20px; color: var(--gris); font-size: 16px; }
.visite-piece figcaption strong { display: block; font-family: var(--titres); font-size: 21px; color: var(--encre); font-weight: 600; }
.piece-num { font-family: var(--titres); font-style: italic; color: var(--turquoise-fonce); font-size: 15px; margin-right: 6px; }
.piece-2 { margin-left: 26px; }
.piece-3 { width: 72%; }
.visite { gap: 48px; }
.citation-etiquette {
  position: relative; margin: 0 6px 0 18px;
  background: var(--nuit); color: var(--blanc);
  padding: 18px 20px; border-radius: 16px;
  transform: rotate(-1.5deg);
  box-shadow: 0 16px 30px -18px rgba(10,18,34,.7);
}
.citation-etiquette p { font-family: var(--titres); font-style: italic; font-size: 19px; line-height: 1.35; }
.citation-etiquette cite { display: block; margin-top: 8px; font-size: 14px; color: var(--or); }

/* ---------- Les chambres : fond bois clair aux rainures de bambou ---------- */
.chambres {
  padding: 64px var(--gouttiere);
  background:
    repeating-linear-gradient(90deg, rgba(184,149,90,.09) 0 2px, transparent 2px 46px),
    linear-gradient(180deg, var(--bois-pale), #f7eedb);
  overflow: hidden;
}
.chambres-tete { max-width: 640px; position: relative; }
.chambres-tete > p:not(.plaque) { color: var(--gris); }
.bande {
  display: flex; gap: 18px; overflow-x: auto;
  margin: 34px calc(var(--gouttiere) * -1) 0; padding: 4px var(--gouttiere) 22px;
  scroll-snap-type: x proximity; scroll-padding: 0 var(--gouttiere);
  touch-action: pan-x pan-y; overscroll-behavior-x: contain;
  scrollbar-width: thin; scrollbar-color: var(--bois) transparent;
  position: relative;
}
.bande:focus-visible { outline: 2px solid var(--turquoise); outline-offset: -2px; }
.carte-chambre { flex: 0 0 86%; max-width: 440px; margin: 0; scroll-snap-align: start; }
.carte-chambre .photo { margin-right: 10px; }
.carte-chambre figcaption { margin-top: 20px; font-size: 16px; color: var(--encre); display: flex; gap: 10px; align-items: baseline; }
.carte-chambre figcaption span { font-family: var(--titres); font-style: italic; color: var(--turquoise-fonce); font-size: 20px; }
.relance { display: grid; gap: 26px; margin-top: 26px; position: relative; }
.citation-large { border-left: 3px solid var(--turquoise); padding-left: 18px; max-width: 720px; }
.citation-large p { font-family: var(--titres); font-size: 24px; line-height: 1.3; font-style: italic; }
.citation-large cite { display: block; margin-top: 8px; color: var(--gris); font-size: 15px; }
.relance-cta { background: var(--blanc); border-radius: 18px; padding: 20px; border: 1px solid var(--bois); }
.relance-cta p { margin-bottom: 14px; font-size: 17px; }
.relance-cta .bouton { width: 100%; }

/* ---------- Une journée : le fond suit l'heure ---------- */
.journee { background: linear-gradient(180deg, #f7eedb, #fbf3e1); }
.journee-tete { padding: 64px var(--gouttiere) 30px; }
.moments { position: relative; }
.fil { position: absolute; left: 22px; top: 0; bottom: 0; width: 3px; background: rgba(22,34,58,.12); z-index: 2; border-radius: 3px; }
.fil-trait { position: absolute; inset: 0; background: linear-gradient(180deg, var(--or), var(--turquoise) 55%, #f6e6b8); transform-origin: top; transform: scaleY(var(--p, 0)); border-radius: 3px; }
.moment { position: relative; padding: 48px var(--gouttiere) 56px 52px; overflow: hidden; }
.moment-heure {
  display: flex; align-items: center; gap: 10px;
  font-size: 13px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; margin-bottom: 12px;
}
.moment-astre { position: absolute; left: 13px; width: 21px; height: 21px; border-radius: 50%; z-index: 3; border: 3px solid currentColor; }
.moment h3 { position: relative; }
.moment-corps { display: grid; gap: 30px; position: relative; }
.moment-corps .photo { margin-right: 10px; }
.moment-texte { display: grid; gap: 14px; align-content: start; }
.moment-texte blockquote { border-radius: 16px; padding: 16px 18px; }
.moment-texte blockquote p { font-family: var(--titres); font-style: italic; font-size: 19px; line-height: 1.35; }
.moment-texte cite { display: block; margin-top: 6px; font-size: 14px; font-weight: 500; }
.moment-texte .bouton { justify-self: start; }

.moment-matin { background: linear-gradient(180deg, #fbf3e1, #f5e2b8); color: var(--encre); }
.moment-matin .moment-heure { color: #a67619; }
.moment-matin .moment-astre { background: #f4c84f; color: #e0a92a; box-shadow: 0 0 0 6px rgba(244,200,79,.25); }
.moment-matin blockquote { background: rgba(255,255,255,.7); }
.moment-matin cite { color: #a67619; }

.moment-jour { background: linear-gradient(180deg, #e6f3ea, #d6eee4); color: var(--encre); }
.moment-jour .moment-heure { color: #2f7a52; }
.moment-jour .moment-astre { background: #fff3c4; color: #f0b93a; }
.moment-jour blockquote { background: rgba(255,255,255,.75); }
.moment-jour cite { color: #2f7a52; }

.moment-retour { background: linear-gradient(180deg, #3cc4be, #1a9e99); color: var(--nuit); }
.moment-retour .moment-heure { color: var(--nuit); }
.moment-retour .moment-astre { background: #fff; color: var(--nuit); }
.moment-retour .moment-texte > p { color: var(--nuit); }
.moment-retour blockquote { background: rgba(255,255,255,.88); }
.moment-retour cite { color: var(--turquoise-fonce); }
.reflets { position: absolute; inset: 0; pointer-events: none; }
.reflets i {
  position: absolute; width: 260px; height: 110px; border-radius: 50%;
  background: radial-gradient(ellipse, rgba(255,255,255,.35), rgba(255,255,255,0) 70%);
  animation: reflet 9s ease-in-out infinite alternate;
}
.reflets i:nth-child(1) { left: -40px; top: 12%; }
.reflets i:nth-child(2) { right: -60px; top: 45%; animation-duration: 11s; }
.reflets i:nth-child(3) { left: 20%; bottom: 6%; animation-duration: 13s; }
@keyframes reflet { from { transform: translate(0, 0) scale(1); } to { transform: translate(40px, -18px) scale(1.15); } }

.moment-soir {
  background: linear-gradient(180deg, #23365a, var(--nuit) 60%);
  color: var(--blanc);
}
.ciel {
  position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(1.5px 1.5px at 12% 18%, #fff 50%, transparent 51%),
    radial-gradient(1.2px 1.2px at 30% 8%, #fff 50%, transparent 51%),
    radial-gradient(1.6px 1.6px at 55% 14%, #fff 50%, transparent 51%),
    radial-gradient(1.2px 1.2px at 78% 6%, #fff 50%, transparent 51%),
    radial-gradient(1.4px 1.4px at 90% 22%, #fff 50%, transparent 51%),
    radial-gradient(1.2px 1.2px at 66% 30%, #fff 50%, transparent 51%),
    radial-gradient(1.4px 1.4px at 42% 26%, #fff 50%, transparent 51%),
    radial-gradient(1.2px 1.2px at 20% 36%, #fff 50%, transparent 51%);
  animation: scintille 4s ease-in-out infinite alternate;
}
@keyframes scintille { from { opacity: .45; } to { opacity: 1; } }
.moment-soir .moment-heure { color: var(--or); }
.moment-soir .moment-astre { background: var(--nuit); color: var(--or); box-shadow: inset -6px -2px 0 0 var(--or); border-width: 2px; }
.moment-soir h3 { color: var(--blanc); }
.moment-soir blockquote { background: rgba(255,255,255,.08); border: 1px solid rgba(212,174,92,.4); }
.moment-soir cite { color: var(--or); }

/* ---------- Sur place : la mosaïque de la piscine ---------- */
.surplace {
  padding: 64px var(--gouttiere);
  background:
    linear-gradient(rgba(255,255,255,.5) 2px, transparent 2px) 0 0 / 24px 24px,
    linear-gradient(90deg, rgba(255,255,255,.5) 2px, transparent 2px) 0 0 / 24px 24px,
    conic-gradient(from 90deg at 50% 50%, #1aa7a2 25%, #2bbab4 0 50%, #149f9a 0 75%, #33c2bc 0) 0 0 / 48px 48px;
}
.surplace-carte {
  position: relative; background: var(--blanc); border-radius: 26px; padding: 30px 22px 70px;
  max-width: 880px; margin: 0 auto; box-shadow: 0 30px 60px -36px rgba(10,18,34,.7);
}
.equipements { list-style: none; padding: 0; margin: 10px 0 0; display: grid; grid-template-columns: 1fr 1fr; gap: 0 16px; }
.equipements li {
  display: flex; align-items: center; gap: 10px;
  padding: 12px 0; border-bottom: 1px solid rgba(215,182,118,.6);
  font-size: 16px; font-weight: 500; line-height: 1.3;
}
.equipements svg { flex: 0 0 30px; width: 30px; height: 30px; fill: none; stroke: var(--turquoise-fonce); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.vignette-bananes { right: 18px; bottom: -40px; }
.vignette-bananes img { border-color: var(--turquoise); }

/* ---------- Les alentours : panneaux de direction sur un poteau ---------- */
.alentours { padding: 90px var(--gouttiere) 64px; background: linear-gradient(180deg, #eaf2e6, #f5f0e6); overflow: hidden; }
.alentours-tete > p:not(.plaque) { color: var(--gris); }
.panneaux { list-style: none; padding: 0; margin: 36px auto 0; display: grid; gap: 14px; position: relative; max-width: 560px; }
.panneaux::before {
  content: ""; position: absolute; left: 50%; top: -24px; bottom: -40px; width: 14px; margin-left: -7px;
  background: repeating-linear-gradient(180deg, var(--bois) 0 70px, var(--bois-fonce) 70px 74px);
  border-radius: 7px;
}
.panneau {
  position: relative; background: var(--nuit); color: var(--blanc);
  padding: 14px 44px 14px 18px; margin-right: 8%;
  clip-path: polygon(0 0, calc(100% - 26px) 0, 100% 50%, calc(100% - 26px) 100%, 0 100%);
  border-radius: 4px 0 0 4px;
}
.panneau-g { margin: 0 0 0 8%; padding: 14px 18px 14px 44px; background: var(--turquoise-fonce); clip-path: polygon(26px 0, 100% 0, 100% 100%, 26px 100%, 0 50%); border-radius: 0 4px 4px 0; }
.panneau strong { display: block; font-family: var(--titres); text-transform: uppercase; letter-spacing: .1em; font-size: 17px; }
.panneau span { display: block; font-size: 15px; color: rgba(255,255,255,.82); }
.js .panneau.apparait { transform: translateX(-14px); }
.js .panneau-g.apparait { transform: translateX(14px); }
.js .panneau.apparait.vu { transform: none; }
.alentours-cta { position: relative; margin: 60px auto 0; max-width: 560px; text-align: center; background: var(--blanc); border-radius: 18px; padding: 22px 20px; border: 1px solid var(--bois); }
.alentours-cta p { margin-bottom: 14px; }

/* ---------- Les avis : carreaux pâles ---------- */
.avis {
  padding: 64px var(--gouttiere);
  background:
    linear-gradient(rgba(255,255,255,.7) 1px, transparent 1px) 0 0 / 32px 32px,
    linear-gradient(90deg, rgba(255,255,255,.7) 1px, transparent 1px) 0 0 / 32px 32px,
    var(--turquoise-pale);
}
.avis-tete { display: grid; gap: 22px; }
.note-grande { display: flex; align-items: center; gap: 16px; }
.note-chiffre { font-family: var(--titres); font-weight: 700; font-size: 92px; line-height: .9; color: var(--nuit); }
.note-detail { font-size: 16px; color: var(--encre); line-height: 1.5; }
.note-detail .etoiles { font-size: 20px; }
.citation-geante p { font-family: var(--titres); font-size: 30px; line-height: 1.15; font-weight: 600; color: var(--nuit); }
.citation-geante em { color: var(--turquoise-fonce); }
.citation-geante cite { display: block; margin-top: 10px; color: var(--gris); font-size: 15px; }
.bande-avis { margin-top: 30px; align-items: stretch; }
.carte-avis {
  flex: 0 0 76%; max-width: 330px; scroll-snap-align: start;
  border-radius: 18px; padding: 20px; display: flex; flex-direction: column; justify-content: space-between; gap: 14px;
}
.carte-avis p { font-size: 16px; line-height: 1.5; }
.carte-avis cite { font-weight: 600; font-size: 15px; }
.carte-avis cite::before { content: "★★★★★"; display: block; color: #e3a92b; font-weight: 400; letter-spacing: 1px; margin-bottom: 2px; }
.teinte-1 { background: var(--blanc); }
.teinte-2 { background: var(--nuit); color: var(--blanc); }
.teinte-2 cite { color: var(--or); }
.teinte-3 { background: var(--bois-pale); }
.carte-avis:nth-child(odd) { margin-top: 14px; }
.avis-glisser { font-size: 14px; color: var(--gris); margin-top: 2px; }
.avis-cta { margin-top: 30px; display: grid; gap: 14px; justify-items: start; }
.avis-cta p { font-family: var(--titres); font-size: 22px; line-height: 1.25; color: var(--nuit); }

/* ---------- Réserver en direct ---------- */
.direct {
  padding: 64px var(--gouttiere);
  background:
    radial-gradient(circle at 85% 10%, rgba(34,179,174,.25), transparent 45%),
    var(--nuit-2);
  color: var(--blanc);
}
.direct h2 em { color: var(--or); }
.raisons { list-style: none; padding: 0; margin: 26px 0 30px; display: grid; gap: 14px; counter-reset: none; }
.raisons li {
  position: relative; padding: 18px 18px 18px 70px; border-radius: 16px;
  background: rgba(255,255,255,.06); border: 1px solid rgba(212,174,92,.35);
  color: rgba(255,255,255,.85); font-size: 16px;
}
.raisons strong { display: block; color: var(--blanc); font-family: var(--titres); font-size: 20px; margin-bottom: 2px; }
.raison-num {
  position: absolute; left: 18px; top: 18px; width: 38px; height: 38px; border-radius: 50%;
  display: grid; place-items: center; background: var(--or); color: var(--nuit);
  font-family: var(--titres); font-weight: 700; font-size: 20px;
}
.direct .actions .bouton { flex: 1 1 140px; }

/* ---------- Accès : la palissade en bois et sa plaque ---------- */
.acces {
  padding: 56px var(--gouttiere) 0;
  background:
    linear-gradient(180deg, transparent 0 310px, var(--nuit) 310px),
    repeating-linear-gradient(90deg, #d9c39a 0 26px, #cdb385 26px 28px, #e2cfa8 28px 54px, #c9ad7c 54px 56px);
  color: var(--blanc);
}
.acces::after { content: ""; position: absolute; left: 0; right: 0; top: 292px; height: 18px; background: #1d3f8a; }
.acces-plaque {
  position: relative; z-index: 1; margin: 0 auto 0; max-width: 300px; text-align: center;
  padding: 20px 18px 16px; border-radius: 4px;
  background:
    radial-gradient(circle at 9px 9px, #8d97ab 0 2px, transparent 2.6px),
    radial-gradient(circle at calc(100% - 9px) 9px, #8d97ab 0 2px, transparent 2.6px),
    radial-gradient(circle at 9px calc(100% - 9px), #8d97ab 0 2px, transparent 2.6px),
    radial-gradient(circle at calc(100% - 9px) calc(100% - 9px), #8d97ab 0 2px, transparent 2.6px),
    #0f1626;
  box-shadow: 0 18px 30px -16px rgba(0,0,0,.7);
}
.acces-nom { font-family: var(--titres); font-weight: 600; text-transform: uppercase; letter-spacing: .1em; font-size: 30px; line-height: 1.05; }
.acces-sous { font-family: var(--titres); font-style: italic; color: var(--or); font-size: 22px; }
.acces-tel { font-size: 13px; color: rgba(255,255,255,.8); margin-top: 6px; }
.js .acces-plaque.apparait { transform: rotate(-3deg) translateY(-10px); }
.js .acces-plaque.apparait.vu { transform: rotate(-1deg); }
.acces-contenu { position: relative; z-index: 1; display: grid; gap: 40px; padding: 140px 0 64px; }
.acces h2 em { color: var(--or); }
.acces-texte > p:not(.plaque) { color: rgba(255,255,255,.82); }
.acces address { font-style: normal; margin: 20px 0 22px; padding-left: 16px; border-left: 3px solid var(--turquoise); line-height: 1.55; }
.acces .actions .bouton { flex: 1 1 140px; }
.acces .bouton-nuit { background: var(--nuit-2); border: 1.5px solid rgba(255,255,255,.5); }
.acces-photo { margin: 0; }
.acces-photo .photo { margin-right: 10px; }
.acces-photo .photo-nuit::before { background: var(--turquoise); }
.acces-photo figcaption { margin-top: 20px; font-size: 15px; color: rgba(255,255,255,.75); }

/* ---------- Réserver ---------- */
.reserver {
  padding: 64px var(--gouttiere);
  background:
    linear-gradient(90deg, transparent 0 16px, rgba(255,255,255,.55) 16px 18px) 0 0 / 18px 18px,
    linear-gradient(90deg, #1aa7a2 0 18px, #33c2bc 18px 36px, #0f8c88 36px 54px, #4fd0c9 54px 72px, #22b3ae 72px 90px, #129b96 90px 108px) 0 0 / 108px 18px,
    var(--sable);
  background-repeat: repeat-x, repeat-x, no-repeat;
  background-position: 0 0, 0 0, 0 0;
}
.reserver-carte {
  background: var(--blanc); border-radius: 26px; padding: 34px 22px; text-align: center;
  border: 1px solid var(--bois); max-width: 760px; margin: 0 auto;
  box-shadow: 0 24px 50px -36px rgba(10,18,34,.6);
}
.reserver-carte .plaque { align-items: center; }
.reserver-carte h2 { font-size: 27px; }
.reserver-carte > p:not(.plaque):not(.reserver-qui) { color: var(--gris); }
.reserver-tel { display: block; margin-top: 22px; font-family: var(--titres); font-weight: 700; font-size: 38px; color: var(--nuit); text-decoration: none; white-space: nowrap; }
.reserver-qui { font-family: var(--titres); font-style: italic; color: var(--turquoise-fonce); font-size: 19px; margin-top: 2px; }
.actions-centre { justify-content: center; margin-top: 22px; }
.actions-centre .bouton { flex: 1 1 140px; max-width: 260px; }

/* ---------- Pied ---------- */
.pied { background: var(--nuit); color: rgba(255,255,255,.8); padding: 40px var(--gouttiere) 36px; font-size: 15px; display: grid; gap: 10px; }
.pied-marque { color: var(--blanc); display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.pied a { color: var(--blanc); }
.pied-mention { font-size: 14px; color: rgba(255,255,255,.65); }

/* ---------- Barre d'appel collante (téléphone) ---------- */
.barre-appel {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
  display: grid; grid-template-columns: 1fr 1fr; gap: 10px;
  padding: 10px 14px calc(10px + env(safe-area-inset-bottom));
  background: var(--nuit); border-top: 1px solid rgba(215,182,118,.4);
}
.barre-appel a {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 50px; border-radius: 999px; font-weight: 600; text-decoration: none; font-size: 16px; white-space: nowrap;
}
.barre-appel svg { width: 18px; height: 18px; fill: currentColor; }
.barre-tel { background: var(--turquoise); color: var(--nuit); }
.barre-sms { border: 1.5px solid rgba(255,255,255,.75); color: var(--blanc); }
@media (max-width: 759px) { .pied { padding-bottom: calc(36px + 70px + env(safe-area-inset-bottom)); } }

/* ---------- Apparitions ---------- */
.js .apparait { opacity: 0; transform: translateY(26px); transition: opacity .8s ease, transform .9s cubic-bezier(.2,.7,.2,1); }
.js .apparait.vu { opacity: 1; transform: none; }
.js .heros-visuel, .js .heros-texte > * { opacity: 0; transform: translateY(18px); transition: opacity .8s ease, transform .9s cubic-bezier(.2,.7,.2,1); }
.js .heros.vu .heros-visuel, .js .heros.vu .heros-texte > * { opacity: 1; transform: none; }
.js .heros.vu .heros-texte > :nth-child(2) { transition-delay: .12s; }
.js .heros.vu .heros-texte > :nth-child(3) { transition-delay: .24s; }
.js .heros.vu .heros-texte > :nth-child(4) { transition-delay: .32s; }
.js .heros.vu .heros-texte > :nth-child(5) { transition-delay: .4s; }
@media (prefers-reduced-motion: reduce) {
  .js .apparait, .js .heros-visuel, .js .heros-texte > *, .js .mosaique, .js .apparait .plaque { opacity: 1 !important; transform: none !important; transition: none !important; }
  .photo::before { transition: none !important; transform: translate(10px, 10px) !important; }
  .heros-lueur, .reflets i, .ciel, .heros-suite span { animation: none !important; }
  .js .bambou .tige, .js .bambou .noeuds { stroke-dashoffset: 0; transition: none; }
  .js .bambou .feuille { opacity: 1; transition: none; }
}

/* ---------- Tablette et ordinateur ---------- */
@media (min-width: 760px) {
  :root { --gouttiere: 40px; }
  h2 { font-size: 40px; }
  h3 { font-size: 30px; }
  .barre-appel { display: none; }
  .entete { padding: 14px var(--gouttiere); }
  .marque-nom { font-size: 22px; }
  .carte-chambre { flex-basis: min(700px, 64%); max-width: none; }
  .bande-chambres { gap: 44px; }
  .carte-avis { flex-basis: 40%; }
  .moment { padding-left: 84px; }
  .fil { left: 40px; }
  .moment-astre { left: 31px; }
  .relance { grid-template-columns: 1fr 1fr; align-items: center; }
  .relance-cta .bouton { width: auto; }
  .raisons { grid-template-columns: repeat(3, 1fr); }
  .direct .actions .bouton { flex: 0 0 auto; min-width: 200px; }
}
@media (min-width: 960px) {
  :root { --gouttiere: max(48px, calc((100vw - 1180px) / 2)); }
  .menu { display: flex; gap: 22px; margin-right: 10px; }
  .menu a { text-decoration: none; color: rgba(255,255,255,.85); font-size: 15px; }
  .menu a:hover { color: var(--or); }
  .entete-reserver {
    display: inline-flex; align-items: center; min-height: 46px; padding: 0 18px; border-radius: 999px;
    background: var(--or); color: var(--nuit); font-weight: 600; text-decoration: none; font-size: 16px;
  }
  .heros { grid-template-columns: 1fr 1.05fr; align-items: center; gap: 64px; padding-top: 56px; padding-bottom: 80px; }
  .heros-texte { order: -1; }
  .heros h1 { font-size: 54px; }
  .heros-photo img { max-height: none; }
  .vignette-ronde { right: -20px; bottom: -34px; }
  .vignette-ronde img { width: 140px; height: 140px; }
  .heros-sous { font-size: 18px; }
  .heros .actions .bouton { flex: 0 0 auto; min-width: 190px; }
  .maison, .chambres, .avis, .reserver, .direct, .surplace { padding-top: 110px; padding-bottom: 110px; }
  .alentours { padding-top: 120px; padding-bottom: 110px; }
  .maison-intro { max-width: 760px; }
  .maison-intro > p:not(.plaque) { font-size: 18px; }
  .visite { grid-template-columns: repeat(12, 1fr); gap: 110px 32px; margin-top: 70px; align-items: start; }
  .piece-1 { grid-column: 1 / 9; grid-row: 1; }
  .piece-2 { grid-column: 5 / 13; grid-row: 2; margin: 0; }
  .piece-3 { grid-column: 1 / 5; grid-row: 2; width: auto; margin-top: 160px; }
  .citation-etiquette { grid-column: 9 / 13; grid-row: 1; align-self: end; margin: 0 0 120px 10px; }
  .journee-tete { padding: 110px var(--gouttiere) 50px; }
  .journee-tete h2 { max-width: 820px; }
  .moment { padding: 90px var(--gouttiere) 90px calc(var(--gouttiere) + 70px); }
  .fil { left: calc(var(--gouttiere) + 20px); }
  .moment-astre { left: calc(var(--gouttiere) + 11px); }
  .moment h3 { max-width: 760px; }
  .moment-corps { grid-template-columns: 460px 1fr; gap: 60px; align-items: center; }
  .moment-jour .moment-corps, .moment-soir .moment-corps { grid-template-columns: 1fr 460px; }
  .moment-jour .moment-corps .photo, .moment-soir .moment-corps .photo { order: 2; }
  .surplace-carte { padding: 56px 56px 60px; }
  .equipements { grid-template-columns: repeat(3, 1fr); gap: 0 30px; }
  .vignette-bananes { right: -30px; bottom: auto; top: -40px; }
  .alentours-tete { max-width: 760px; margin: 0 auto; text-align: center; }
  .alentours-tete .plaque { align-items: center; }
  .panneaux { max-width: 640px; }
  .avis-tete { grid-template-columns: auto 1fr; gap: 60px; align-items: center; }
  .note-chiffre { font-size: 140px; }
  .citation-geante p { font-size: 46px; }
  .carte-avis { flex-basis: 300px; }
  .avis-cta { grid-template-columns: 1fr auto; align-items: center; margin-top: 40px; }
  .direct-tete h2 { max-width: 860px; }
  .acces { padding-top: 70px; background:
    linear-gradient(180deg, transparent 0 380px, var(--nuit) 380px),
    repeating-linear-gradient(90deg, #d9c39a 0 26px, #cdb385 26px 28px, #e2cfa8 28px 54px, #c9ad7c 54px 56px); }
  .acces::after { top: 362px; }
  .acces-plaque { max-width: 380px; padding: 26px 24px 20px; }
  .acces-nom { font-size: 40px; }
  .acces-sous { font-size: 28px; }
  .acces-contenu { grid-template-columns: 1fr 1fr; gap: 80px; align-items: center; padding: 210px 0 110px; }
  .acces .actions .bouton { flex: 0 0 auto; min-width: 180px; }
  .reserver-carte { padding: 60px 50px; }
  .reserver-carte h2 { font-size: 40px; }
  .reserver-tel { font-size: 54px; }
  .pied { grid-template-columns: 1fr; text-align: center; justify-items: center; }
}

/* =====================================================================
   Modif du 20 octobre : des fonds qui ont de la matière et des décors animés
   tout au long de la page (transform et opacity seulement, arrêtés hors écran
   et sous mouvement réduit).
   ===================================================================== */
section, .moment { isolation: isolate; }
.journee, .avis, .direct, .acces, .reserver, .surplace { overflow: hidden; }
.fond-photo, .ombres, .vol, .aube, .caustiques, .bulles, .reflets, .ciel, .filante, .crete, .relief, .vapeur,
.nuages, .volcan, .houle, .acces-feuilles, .feuille-coin, .orchidee, .ventilateur { position: absolute; z-index: -1; pointer-events: none; }
.fond-photo { inset: 0; background-size: cover; background-position: center; }

/* Textures : grain de papier et toile de lin, faits ici */
.maison { background: url("img/grain.png"), url("img/lin.png"), var(--sable); }
.chambres { background: url("img/grain.png"), repeating-linear-gradient(90deg, rgba(184,149,90,.12) 0 2px, transparent 2px 46px), linear-gradient(180deg, var(--bois-pale), #f7eedb); }
.journee { background: url("img/grain.png"), linear-gradient(180deg, #f7eedb, #fbf3e1); }
.moment-matin { background: url("img/grain.png"), radial-gradient(circle at 88% 8%, rgba(244,200,79,.45), transparent 42%), linear-gradient(180deg, #fbf3e1, #f5e2b8); }
.moment-jour { background: url("img/grain.png"), linear-gradient(180deg, #e6f3ea, #d6eee4); }
.alentours { background: url("img/grain.png"), radial-gradient(ellipse at 20% 70%, rgba(47,122,82,.14), transparent 55%), linear-gradient(180deg, #e2efdf, #f1efe2); }
.reserver { background:
    linear-gradient(90deg, transparent 0 16px, rgba(255,255,255,.55) 16px 18px) 0 0 / 18px 18px repeat-x,
    linear-gradient(90deg, #1aa7a2 0 18px, #33c2bc 18px 36px, #0f8c88 36px 54px, #4fd0c9 54px 72px, #22b3ae 72px 90px, #129b96 90px 108px) 0 0 / 108px 18px repeat-x,
    url("img/grain.png"), url("img/lin.png"), var(--sable); }

/* Photos du lieu, floutées et voilées, en lumière de fond */
.fond-jardin { background-image: url("img/flou-jardin.webp"); opacity: .34; -webkit-mask-image: linear-gradient(180deg, #000 0, rgba(0,0,0,.6) 40%, transparent 80%); mask-image: linear-gradient(180deg, #000 0, rgba(0,0,0,.6) 40%, transparent 80%); }
.fond-voilages { background-image: url("img/flou-chambre-voilages.webp"); opacity: .3; -webkit-mask-image: linear-gradient(200deg, #000 10%, transparent 60%); mask-image: linear-gradient(200deg, #000 10%, transparent 60%); }
.fond-cascade { background-image: url("img/flou-cascade.webp"); opacity: .5; -webkit-mask-image: linear-gradient(180deg, #000 0, rgba(0,0,0,.55) 60%, transparent 95%); mask-image: linear-gradient(180deg, #000 0, rgba(0,0,0,.55) 60%, transparent 95%); }
.fond-piscine { background-image: url("img/flou-piscine-mer.webp"); opacity: .42; }
.avis { background: linear-gradient(rgba(255,255,255,.55) 1px, transparent 1px) 0 0 / 32px 32px, linear-gradient(90deg, rgba(255,255,255,.55) 1px, transparent 1px) 0 0 / 32px 32px, var(--turquoise-pale); }
.avis .fond-piscine { -webkit-mask-image: linear-gradient(180deg, #000, rgba(0,0,0,.35) 70%); mask-image: linear-gradient(180deg, #000, rgba(0,0,0,.35) 70%); }
.fond-couchant { background-image: url("img/flou-coucher-soleil.webp"); opacity: .4; -webkit-mask-image: linear-gradient(180deg, transparent, #000 45%); mask-image: linear-gradient(180deg, transparent, #000 45%); }
.fond-orchidees { background-image: url("img/flou-orchidees.webp"); opacity: .2; -webkit-mask-image: radial-gradient(ellipse at 50% 60%, #000 30%, transparent 75%); mask-image: radial-gradient(ellipse at 50% 60%, #000 30%, transparent 75%); }

/* Ombres de feuilles de bananier qui se balancent */
.ombres { inset: 0; }
.feuille-ombre { position: absolute; width: 230px; height: 480px; color: #2c4a3a; opacity: .09; transform-origin: 50% 100%; animation: balance 8s ease-in-out infinite alternate; }
.fo-1 { right: -70px; top: 30px; animation-duration: 9s; }
.fo-2 { left: -90px; top: 46%; width: 190px; height: 400px; animation-delay: -3s; }
.fo-3 { right: -40px; bottom: -60px; width: 170px; height: 360px; animation-duration: 7s; animation-delay: -5s; }
.ombres-avis .feuille-ombre { color: var(--turquoise-fonce); opacity: .12; }
.fo-4 { left: -80px; top: -40px; }
.fo-5 { right: -70px; bottom: -80px; width: 200px; height: 420px; animation-delay: -4s; }
@keyframes balance { from { transform: rotate(-5deg); } to { transform: rotate(5deg); } }

/* Paille-en-queue qui planent */
.vol { inset: 0; overflow: hidden; }
.oiseau { position: absolute; left: 0; width: 64px; height: 34px; color: #fff; opacity: .85; animation: planer 28s linear infinite; }
.oiseau use { transform-box: fill-box; transform-origin: center; animation: battre 1.8s ease-in-out infinite alternate; }
.oiseau-1 { top: 16%; }
.oiseau-2 { top: 34%; width: 44px; height: 24px; opacity: .6; animation-duration: 36s; animation-delay: -14s; }
.oiseau-3 { top: 22px; opacity: .95; animation-duration: 24s; animation-delay: -6s; }
@keyframes planer { from { transform: translate(-90px, 30px); } to { transform: translate(calc(100vw + 90px), -40px); } }
@keyframes battre { from { transform: scaleY(1); } to { transform: scaleY(.55); } }

/* Le ventilateur au plafond des chambres, vu d'en dessous */
.ventilateur { top: -54px; right: 6%; width: 150px; height: 150px; }
.ventilo-ombre { fill: rgba(184,149,90,.12); }
.ventilo-pales { fill: rgba(184,149,90,.55); transform-box: view-box; transform-origin: 50% 50%; animation: tourner 5s linear infinite; }
.ventilo-moyeu { fill: var(--bois-fonce); }
.ventilo-moyeu-centre { fill: var(--bois-pale); }
@keyframes tourner { to { transform: rotate(360deg); } }

/* L'aube derrière le titre de la journée */
.aube { left: 0; right: 0; top: 0; height: 640px; overflow: hidden; }
.aube-rayons { position: absolute; width: 1500px; height: 1500px; right: -750px; top: -750px; border-radius: 50%;
  background: repeating-conic-gradient(from 0deg, rgba(240,190,70,.2) 0 5deg, transparent 5deg 15deg);
  -webkit-mask-image: radial-gradient(circle, #000 8%, transparent 60%); mask-image: radial-gradient(circle, #000 8%, transparent 60%);
  animation: tourner 120s linear infinite; }

/* La vapeur du petit déjeuner */
.vapeur { right: 7%; top: 26px; width: 70px; height: 96px; }
.vapeur path { fill: none; stroke: #c48b1c; stroke-width: 3; stroke-linecap: round; opacity: 0; animation: fumer 4.5s ease-in-out infinite; }
.vapeur .v-2 { animation-delay: -1.5s; }
.vapeur .v-3 { animation-delay: -3s; }
@keyframes fumer { 0% { opacity: 0; transform: translateY(16px); } 40% { opacity: .45; } 100% { opacity: 0; transform: translateY(-18px); } }

/* Le relief du volcan derrière la journée */
.relief { left: 0; right: 0; bottom: 0; width: 100%; height: 200px; }
.relief path { fill: rgba(47,122,82,.08); }
.relief .relief-ligne { fill: none; stroke: rgba(47,122,82,.3); stroke-width: 1.5; }
.js .relief .relief-ligne { stroke-dasharray: 900; stroke-dashoffset: 900; transition: stroke-dashoffset 2.6s ease .3s; }
.js .moment.vu .relief .relief-ligne { stroke-dashoffset: 0; }

/* Au retour : les reflets de l'eau et les bulles du jacuzzi */
.reflets { inset: 0; }
.caustiques { inset: -30%; opacity: .5;
  background:
    radial-gradient(ellipse 34px 14px at 30% 40%, rgba(255,255,255,.45), transparent 70%),
    radial-gradient(ellipse 22px 10px at 70% 20%, rgba(255,255,255,.4), transparent 70%),
    radial-gradient(ellipse 40px 12px at 80% 75%, rgba(255,255,255,.35), transparent 70%),
    radial-gradient(ellipse 18px 8px at 15% 85%, rgba(255,255,255,.4), transparent 70%);
  background-size: 180px 140px;
  animation: onduler 14s ease-in-out infinite alternate; }
.caustiques-mosaique { opacity: .7; background-size: 220px 170px; }
@keyframes onduler { from { transform: translate(-40px, -20px) rotate(0deg); } to { transform: translate(40px, 30px) rotate(3deg); } }
.bulles { left: 0; right: 0; bottom: 0; height: 70%; }
.bulles i { position: absolute; bottom: -20px; width: 12px; height: 12px; border-radius: 50%; border: 1.5px solid rgba(255,255,255,.75); background: rgba(255,255,255,.12); opacity: 0; animation: monter 6s ease-in infinite; }
.bulles i:nth-child(1) { left: 8%; animation-delay: 0s; }
.bulles i:nth-child(2) { left: 18%; width: 8px; height: 8px; animation-delay: -1.2s; animation-duration: 5s; }
.bulles i:nth-child(3) { left: 46%; width: 16px; height: 16px; animation-delay: -2.6s; animation-duration: 7s; }
.bulles i:nth-child(4) { left: 64%; width: 9px; height: 9px; animation-delay: -3.4s; }
.bulles i:nth-child(5) { left: 78%; animation-delay: -4.4s; animation-duration: 6.5s; }
.bulles i:nth-child(6) { left: 90%; width: 7px; height: 7px; animation-delay: -.6s; animation-duration: 4.6s; }
.bulles i:nth-child(7) { left: 32%; width: 10px; height: 10px; animation-delay: -5.1s; }
@keyframes monter { 0% { opacity: 0; transform: translate(0, 0); } 15% { opacity: .9; } 85% { opacity: .5; } 100% { opacity: 0; transform: translate(14px, -360px); } }

/* Le soir : une étoile filante et la crête des montagnes */
.ciel { inset: 0; }
.filante { top: 12%; left: 62%; width: 130px; height: 2px; border-radius: 2px; background: linear-gradient(90deg, #fff, rgba(255,255,255,0)); opacity: 0; animation: filer 9s ease-out infinite 2s; }
@keyframes filer { 0%, 80% { opacity: 0; transform: rotate(-18deg) translateX(0); } 83% { opacity: 1; } 94%, 100% { opacity: 0; transform: rotate(-18deg) translateX(-320px); } }
.crete { left: 0; right: 0; bottom: 0; width: 100%; height: 90px; }
.crete path { fill: #0f1626; opacity: .75; }

/* Les alentours : les nuages et le volcan qui fume */
.nuages { inset: 0; overflow: hidden; }
.nuages i { position: absolute; left: 0; width: 280px; height: 70px; border-radius: 50%; background: radial-gradient(ellipse at 50% 60%, rgba(255,255,255,.85), rgba(255,255,255,0) 68%); animation: deriver 60s linear infinite; }
.nuages i:nth-child(1) { top: 40px; }
.nuages i:nth-child(2) { top: 140px; width: 200px; height: 54px; animation-duration: 80s; animation-delay: -30s; }
.nuages i:nth-child(3) { top: 300px; width: 340px; animation-duration: 95s; animation-delay: -60s; opacity: .7; }
@keyframes deriver { from { transform: translateX(-360px); } to { transform: translateX(calc(100vw + 40px)); } }
.volcan { left: 0; right: 0; bottom: 0; width: 100%; height: 220px; }
.volcan-fond { fill: rgba(14,116,112,.08); }
.volcan-trait { fill: none; stroke: rgba(14,116,112,.38); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.volcan-trait-2 { stroke: rgba(14,116,112,.22); }
.js .volcan .volcan-trait { stroke-dasharray: 1500; stroke-dashoffset: 1500; transition: stroke-dashoffset 3s ease; }
.js .volcan.vu .volcan-trait { stroke-dashoffset: 0; }
.volcan-fumee { fill: none; stroke: rgba(74,82,102,.4); stroke-width: 3; stroke-linecap: round; transform-box: fill-box; transform-origin: 50% 100%; animation: fumer 5s ease-in-out infinite; }

/* Réserver en direct : la houle dorée sous le couchant */
.houle { left: 0; right: 0; bottom: 0; height: 180px; overflow: hidden; }
.houle svg { position: absolute; left: 0; width: 200%; height: 36px; animation: houle 22s linear infinite; }
.houle path { fill: none; stroke: var(--or); stroke-width: 1.6; }
.houle-1 { bottom: 120px; opacity: .25; }
.houle .houle-2 { bottom: 70px; opacity: .35; animation-duration: 16s; animation-direction: reverse; }
.houle .houle-3 { bottom: 22px; opacity: .5; animation-duration: 12s; }
@keyframes houle { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* Venir : feuilles de bananier dans la nuit */
.acces-feuilles { left: 0; right: 0; bottom: 0; height: 70%; overflow: hidden; }
.feuille-nuit { position: absolute; bottom: -80px; width: 240px; height: 500px; color: var(--turquoise-fonce); opacity: .2; transform-origin: 50% 100%; animation: balance 9s ease-in-out infinite alternate; }
.fn-1 { left: -110px; }
.fn-2 { right: -110px; width: 200px; height: 420px; animation-delay: -4s; }

/* Réserver : bananiers aux coins et orchidées du jardin */
.feuille-coin { width: 200px; height: 420px; color: #2f7a52; opacity: .16; transform-origin: 50% 100%; animation: balance 8s ease-in-out infinite alternate; }
.fc-1 { left: -90px; top: 10px; }
.fc-2 { right: -90px; bottom: -110px; animation-delay: -3s; }
.orchidee { width: 74px; height: 74px; color: #9a5a86; opacity: .55; animation: bercer 6s ease-in-out infinite alternate; }
.or-1 { right: 6%; top: 34px; }
.or-2 { left: 5%; bottom: 40px; width: 58px; height: 58px; animation-delay: -2s; }
@keyframes bercer { from { transform: rotate(-8deg) translateY(0); } to { transform: rotate(8deg) translateY(-6px); } }

/* Flèches de la bande des chambres */
.fleches { display: flex; align-items: center; justify-content: center; gap: 18px; margin-top: 4px; }
.fleche { width: 52px; height: 52px; border-radius: 50%; border: 0; background: var(--nuit); display: grid; place-items: center; cursor: pointer; transition: transform .25s ease, background-color .25s ease, opacity .25s ease; }
.fleche:hover { background: var(--nuit-2); transform: translateY(-2px); }
.fleche:disabled { opacity: .35; cursor: default; transform: none; }
.fleche svg { width: 22px; height: 22px; fill: none; stroke: #fff; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.fleche:focus-visible { outline: 2px solid var(--turquoise); outline-offset: 3px; }
.fleches-compte { font-family: var(--titres); font-style: italic; font-size: 18px; color: var(--gris); min-width: 54px; text-align: center; }
.fleches-compte b { color: var(--turquoise-fonce); font-weight: 600; }
.bande-chambres .carte-chambre figcaption { font-size: 17px; }

/* Hors écran, les boucles s'arrêtent */
.js .hors .anim, .js .hors .anim use, .js .hors .anim path, .js .hors .anim i { animation-play-state: paused; }

@media (min-width: 960px) {
  .ventilateur { width: 230px; height: 230px; top: -80px; right: 9%; }
  .feuille-ombre { width: 300px; height: 620px; }
  .fo-2 { width: 240px; height: 500px; }
  .vapeur { width: 90px; height: 120px; right: 12%; top: 50px; }
  .relief { height: 280px; }
  .volcan { height: 320px; }
  .oiseau { width: 84px; height: 45px; }
  .orchidee { width: 110px; height: 110px; }
  .or-2 { width: 80px; height: 80px; left: 9%; }
  .feuille-coin { width: 280px; height: 580px; }
  .feuille-nuit { width: 320px; height: 660px; }
  .fleches { justify-content: flex-start; }
}
@media (prefers-reduced-motion: reduce) {
  .anim, .anim use, .anim path, .anim i, .vapeur path, .bulles i, .reflets i { animation: none !important; }
  .filante, .bulles { display: none; }
  .vapeur path { opacity: .35; }
  .js .relief .relief-ligne, .js .volcan .volcan-trait { stroke-dashoffset: 0; transition: none; }
}