.intro > :not(.intro-peaks) { grid-column: 1; }

/* Silhouette des pics de Ua Pou dessinée à main levée, posée sur le bas de la bande sombre (marge négative
   = padding bas de .intro). */
.intro-peaks {
  grid-column: 2;
  grid-row: 1 / span 2;
  align-self: end;
  display: block;
  overflow: visible;
  margin-bottom: -56px;
}

.intro-peaks-line {
  fill: none;
  stroke: var(--cream);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

@media (prefers-reduced-motion: no-preference) {
  .intro-peaks-mountains { animation: intro-peaks-draw 1.4s ease-in-out 0.8s both; }
}

/* Le trait se dessine de gauche à droite (pathLength="1" sur les chemins). */
@keyframes intro-peaks-draw {
  from { stroke-dashoffset: 1; }
}

/* La maison : texte et caractéristiques à gauche, deux polaroids qui se chevauchent à droite. */
.house {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  align-items: center;
  gap: 72px;
}

.polaroid {
  margin: 0;
  padding: 12px 12px 48px;
  background: var(--white);
  box-shadow: 0 18px 40px rgba(var(--shadow-tint), 0.18), 0 2px 6px rgba(var(--shadow-tint), 0.08);
}

.polaroid img {
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

.house-photos {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
}

/* Le jardin (2e du DOM, donc dessus) est placé en haut : il couvre le coin de la photo de la chambre,
   pas sa légende. */
.house-photos .polaroid:nth-child(1) {
  grid-row: 2;
  grid-column: 1 / 10;
  margin-top: -16%;
  transform: rotate(-2.5deg);
}

.house-photos .polaroid:nth-child(2) {
  grid-row: 1;
  grid-column: 5 / 13;
  transform: rotate(3deg);
}

.house-text p:not(.eyebrow) {
  max-width: 62ch;
  margin: 0 0 20px;
  line-height: 1.7;
  opacity: 0.88;
  text-wrap: pretty;
}

.house .link-underline { border-bottom-color: var(--green-leaf); }

/* Même entrée que l'accueil de la page d'accueil : texte depuis la gauche, polaroids par la droite. */
@media (scripting: enabled) and (prefers-reduced-motion: no-preference) {
  .house-text > * {
    animation: slide-from-left 0.7s cubic-bezier(0.22, 1, 0.36, 1) calc(var(--reveal-step) * 0.1s) both paused;
  }

  .house-photos .polaroid {
    animation: polaroid-from-right 0.9s cubic-bezier(0.34, 1.4, 0.64, 1) calc(0.3s + var(--reveal-step) * 0.15s) backwards paused;
  }

  .house-text > :nth-child(1),
  .house-photos .polaroid:nth-child(1) { --reveal-step: 0; }
  .house-text > :nth-child(2),
  .house-photos .polaroid:nth-child(2) { --reveal-step: 1; }
  .house-text > :nth-child(3) { --reveal-step: 2; }
  .house-text > :nth-child(4) { --reveal-step: 3; }
  .house-text > :nth-child(5) { --reveal-step: 4; }
  .house-text > :nth-child(6) { --reveal-step: 5; }

  .house.is-visible .house-text > *,
  .house.is-visible .polaroid { animation-play-state: running; }
}

@keyframes slide-from-left { from { opacity: 0; transform: translateX(-32px); } }
@keyframes polaroid-from-right { from { opacity: 0; transform: translateX(48px) rotate(8deg); } }

.facts {
  margin: 32px 0 28px;
  border-top: 1px solid rgba(var(--shadow-tint), 0.15);
}

.facts div {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  padding: 12px 0;
  border-bottom: 1px solid rgba(var(--shadow-tint), 0.15);
}

.facts dt { font-size: 0.95rem; }

.facts dd {
  margin: 0;
  font-family: var(--font-hand);
  font-size: 1.15rem;
  text-align: right;
  color: var(--green-leaf);
}

/* Rates : une carte crème façon ticket sur fond sombre, calculateur en haut, grille des tarifs en bas. */
.rates { background: var(--green-dark); }

/* overflow: hidden coupe la moitié extérieure des encoches, qui se verrait sur l'ombre de la carte. */
.rates-card {
  overflow: hidden;
  padding: 40px;
  border-radius: 8px;
  background: var(--cream);
  color: var(--green-dark);
  box-shadow: 0 30px 60px rgba(var(--shadow-tint), 0.55), 0 4px 10px rgba(var(--shadow-tint), 0.3);
}

/* Calculateur : total du séjour selon le nombre de voyageurs et de nuits (JS). */
.rates-calculator {
  display: grid;
  grid-template-columns: 1fr auto minmax(220px, 0.8fr);
  align-items: center;
  gap: 24px 48px;
}

.rates-title {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(2.2rem, 4vw, 2.8rem);
  line-height: 1.05;
  letter-spacing: -0.015em;
}

.rates-calculator-title {
  margin: 4px 0 0;
  font-family: var(--font-hand);
  font-size: 1.15rem;
  color: var(--green-leaf);
}

@media (scripting: none) {
  .rates-calculator-title,
  .rates-calculator-fields,
  .rates-calculator-result { display: none; }
}

.rates-calculator-fields {
  display: flex;
  gap: 32px;
}

.rates-calculator-field label {
  display: block;
  margin-bottom: 8px;
  font-size: 0.7rem;
  letter-spacing: 0.2em;
  text-align: center;
  text-transform: uppercase;
  color: rgba(var(--shadow-tint), 0.65);
}

.rates-stepper {
  display: flex;
  align-items: center;
  gap: 12px;
}

.rates-stepper button {
  width: 36px;
  height: 36px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  box-shadow: inset 0 0 0 1px rgba(var(--shadow-tint), 0.3);
  color: inherit;
  font: 500 1.1rem var(--font-body);
  cursor: pointer;
  transition: background-color 0.2s, transform 0.2s;
}

.rates-stepper button:hover { background: rgba(var(--shadow-tint), 0.05); }
.rates-stepper button:active { transform: scale(0.94); }

.rates-stepper input {
  width: 2.5ch;
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  font: 1.6rem var(--font-display);
  text-align: center;
  appearance: textfield;
}

.rates-stepper input::-webkit-inner-spin-button,
.rates-stepper input::-webkit-outer-spin-button { appearance: none; }

.rates-stepper input:focus-visible {
  border-radius: 4px;
  outline: 2px solid var(--green-mint);
  outline-offset: 2px;
}

.rates-calculator-result {
  display: grid;
  justify-items: end;
  gap: 6px;
  margin: 0;
  padding: 24px 28px;
  border-radius: 8px;
  background: var(--green-dark);
  color: var(--cream);
}

.rates-calculator-total {
  font-family: var(--font-display);
  font-size: clamp(2.2rem, 4vw, 2.8rem);
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.rates-calculator-euros {
  font-size: 0.8rem;
  color: rgba(253, 246, 234, 0.6);
  font-variant-numeric: tabular-nums;
}

.rates-calculator-detail {
  font-family: var(--font-hand);
  font-size: 1rem;
  color: var(--green-mint);
}

/* Le filet du haut est une ligne de perforation, avec une encoche ronde de chaque côté de la carte
   (cercles de la couleur du fond, centrés sur le bord de la carte). */
.rates-list {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  margin: 32px 0 0;
  padding-top: 24px;
  border-top: 2px dashed rgba(var(--shadow-tint), 0.22);
}

.rates-list::before,
.rates-list::after {
  content: "";
  position: absolute;
  top: -15px;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--green-dark);
}

.rates-list::before { left: -54px; }
.rates-list::after { right: -54px; }

.rates-list div {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  padding: 0 24px;
}

.rates-list div:first-child { padding-left: 0; }
.rates-list div:last-child { padding-right: 0; }
.rates-list div + div { border-left: 1px solid rgba(var(--shadow-tint), 0.12); }

.rates-list dt { font-size: 0.95rem; }

.rates-list dt small {
  display: block;
  font-size: 0.8rem;
  color: rgba(var(--shadow-tint), 0.65);
}

.rates-list dd {
  margin: 0;
  font-family: var(--font-display);
  font-size: 1.35rem;
  line-height: 1.1;
  text-align: right;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.rates-list dd span {
  display: block;
  font-family: var(--font-hand);
  font-size: 0.9rem;
  color: var(--green-leaf);
}

/* Amenities */
.amenities-groups {
  margin-top: 48px;
  border-top: 1px solid rgba(var(--shadow-tint), 0.15);
}

.amenities-group {
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: 24px;
  padding: 22px 0;
  border-bottom: 1px solid rgba(var(--shadow-tint), 0.15);
}

.amenities-group h3 {
  margin: 0;
  padding-top: 4px;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 1.25rem;
  line-height: 1.2;
}

.amenities-group ul,
.amenities-missing ul {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.amenities-group li,
.amenities-missing li {
  padding: 6px 14px;
  border: 1px solid rgba(var(--shadow-tint), 0.1);
  border-radius: 999px;
  background: var(--white);
  font-size: 0.9rem;
  line-height: 1.5;
}

.amenities-group li small,
.amenities-missing li small {
  font-size: 0.8rem;
  color: rgba(var(--shadow-tint), 0.65);
}

.amenities-group li small::before,
.amenities-missing li small::before { content: " · "; }

.amenities-missing {
  margin-top: 40px;
  padding: 28px 32px 32px;
  border: 1px solid rgba(var(--shadow-tint), 0.15);
  border-radius: 8px;
}

.amenities-missing h3 {
  margin: 0 0 4px;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 1.35rem;
}

.amenities-missing p {
  margin: 0 0 16px;
  font-size: 0.95rem;
  color: rgba(var(--shadow-tint), 0.7);
}

.amenities-missing li {
  border-style: dashed;
  border-color: rgba(var(--shadow-tint), 0.3);
  background: none;
}

/* Responsive */
@media (max-width: 860px) {
  .intro-peaks { display: none; }

  .house {
    grid-template-columns: 1fr;
    gap: 40px;
  }

  .house-photos {
    width: 100%;
    max-width: 480px;
    margin: 0 auto;
  }

  .rates-card { padding: 28px 20px; }

  .rates-list::before { left: -34px; }
  .rates-list::after { right: -34px; }

  .rates-calculator { grid-template-columns: 1fr; }

  .rates-calculator-fields { justify-content: space-between; }

  .rates-list {
    grid-template-columns: 1fr;
    padding-top: 0;
  }

  .rates-list div,
  .rates-list div:first-child,
  .rates-list div:last-child { padding: 16px 0; }

  .rates-list div + div {
    border-left: 0;
    border-top: 1px solid rgba(var(--shadow-tint), 0.12);
  }

  .amenities-missing { padding: 24px 20px 28px; }

  .amenities-group {
    grid-template-columns: 1fr;
    gap: 12px;
  }
}