/* ==========================================================================
   PAGES — mise en page propre à chaque page (accueil, galeries, Rio San Juan, webmaster…)
   ========================================================================== */

/* ------------------------------------------------------------- GRANDE PHOTO D'EN-TÊTE */
.hero { position: relative; isolation: isolate; overflow: hidden; background: #0a1a3d; color: var(--white); }
.hero__media { position: absolute; inset: 0; z-index: -2; }
.hero__media picture { display: block; width: 100%; height: 100%; }
.hero__img { display: block; width: 100%; height: 100%; object-fit: cover; }

/* Accueil : photo + vidéo YouTube + flèche */
.hero--home { min-height: 835px; }
.hero__content { display: flex; flex-direction: column; align-items: center; padding: 38px var(--gutter) 0; }
.hero__title {
  margin: 0 0 22px;
  font-family: var(--font-display); font-weight: 700; font-size: clamp(20px, 2.2vw, 30px); line-height: 1.25; letter-spacing: .04em;
  text-align: center; text-transform: none;
  text-shadow: 0 2px 16px rgba(0, 0, 0, .75), 0 0 2px rgba(0, 0, 0, .6);
}
.hero__title-sub { display: inline; }
.hero__down {
  position: absolute; left: 50%; bottom: 186px; z-index: 2;
  width: 57px; height: 57px; margin-left: -28px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(0, 4, 85, .81) 62%, rgba(0, 0, 0, 0) 67%);
  animation: nudge 2.4s ease-in-out infinite;
}
.hero__down img { display: block; width: 57px; height: 57px; }
.hero__down:hover { animation-play-state: paused; }
@keyframes nudge { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(8px); } }

@media (max-width: 900px) {
  .hero--home { min-height: 0; padding-bottom: 130px; }
  .hero__content { padding-top: 28px; }
  .hero__down { bottom: 36px; }
  .hero__title-sub { display: block; font-size: .8em; margin-top: 4px; }
}

/* Pages « The House » : grande photo + titre */
.hero--photo { height: clamp(360px, 72vh, 835px); }
.hero__scrim { position: absolute; inset: 0; z-index: -1; background: linear-gradient(to top, rgba(0, 4, 85, .72) 0%, rgba(0, 4, 85, 0) 48%); }
.hero__page-title {
  position: absolute; left: 0; right: 0; bottom: clamp(24px, 5vw, 56px); margin: 0; padding: 0 var(--gutter);
  font-family: var(--font-display); font-weight: 700; font-size: clamp(30px, 5vw, 58px); line-height: 1.1; letter-spacing: .06em;
  text-align: center; text-shadow: 0 2px 18px rgba(0, 0, 0, .65);
}

/* ------------------------------------------------------------- ACCUEIL : chiffres clés */
.stats { padding: 81px var(--gutter) 54px; background: var(--white); }
.stats__list {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 40px;
  max-width: 1280px; margin: 0 auto; padding: 0; list-style: none;
}
.stat {
  padding: 28px 12px 30px;
  font-family: var(--font-display); font-weight: 700; font-size: 28px; line-height: 1.15; letter-spacing: 0;
  text-align: center; color: var(--navy-ink);
  background: var(--white);
  box-shadow: rgba(4, 8, 88, .2) 0 6px 18px 5px;
}
@media (max-width: 1100px) { .stats__list { grid-template-columns: repeat(2, 1fr); gap: 32px; max-width: 760px; } .stat { font-size: 25px; } }
@media (max-width: 560px)  { .stats { padding-top: 56px; } .stats__list { grid-template-columns: 1fr; gap: 26px; } .stat { font-size: 24px; } }

/* ------------------------------------------------------------- SECTION BLEUE À FEUILLES (carte + vidéo) */
.leaf-section {
  padding: clamp(72px, 14vw, 190px) 0 clamp(64px, 9vw, 120px);
  color: var(--white);
  background-color: var(--navy);
  background-image: url("../img/bg/tropical-bg-960.jpg");
  background-image: image-set(
    url("../img/bg/tropical-bg-1920.avif") type("image/avif"),
    url("../img/bg/tropical-bg-1920.webp") type("image/webp"),
    url("../img/bg/tropical-bg-960.jpg") type("image/jpeg"));
  background-size: cover;
  background-position: 50% 50%;
  background-blend-mode: screen;
}
.leaf-section--form    { padding-block: clamp(56px, 9vw, 130px) clamp(72px, 10vw, 140px); }
.leaf-section--message { padding-block: clamp(64px, 10vw, 150px); min-height: calc(100vh - var(--header-h) - 120px); display: grid; align-items: center; }
.leaf-section--message > .container { width: min(var(--container), 100% - 2 * var(--gutter)); }

/* ------------------------------------------------------------- ACCUEIL : points forts */
.features { padding: 84px var(--gutter); background: var(--white); }
.features__list {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 51px;
  max-width: 926px; margin: 0 auto; padding: 0; list-style: none;
}
.feature { text-align: center; }
.feature__icon { display: block; width: 41px; height: 41px; margin: 0 auto 14px; }
.feature__title { margin: 0; font-family: var(--font-display); font-weight: 700; font-size: 35px; line-height: 1.1; color: var(--navy-ink); }
@media (max-width: 860px) { .features { padding-block: 56px; } .features__list { grid-template-columns: 1fr; gap: 40px; } .feature__title { font-size: 29px; } }

/* ------------------------------------------------------------- RIO SAN JUAN */
.rio { padding: 54px var(--gutter) 54px; }
.rio__inner { max-width: 1080px; margin: 0 auto; }
.rio__title { margin: 27px 0 30px; font-family: var(--font-serif); font-weight: 400; font-size: 38px; line-height: 1.26; text-align: center; color: var(--white); }
.place { margin: 0; }
.place + .place { margin-top: 100px; }
.place picture { display: block; }
.place__img { display: block; width: 100%; height: auto; aspect-ratio: 1080 / 555; object-fit: cover; background: #0c2a4a; }
.place__caption {
  padding: 22px 16px;
  font-family: var(--font-serif); font-weight: 400; font-size: 33px; line-height: 1.3; letter-spacing: 6px; text-transform: uppercase; text-align: center;
  color: var(--white); background: #000;
}
@media (max-width: 760px) {
  .rio { padding-top: 32px; }
  .rio__title { font-size: 28px; margin-top: 12px; }
  .place + .place { margin-top: 56px; }
  .place__img { aspect-ratio: 4 / 3; }
  .place__caption { font-size: 18px; letter-spacing: 2.5px; padding: 16px 12px; }
}

/* ------------------------------------------------------------- PAGE LONGUE (confidentialité) */
.prose { padding: 72px var(--gutter) 90px; background: var(--white); }
.prose__inner { max-width: 720px; margin: 0 auto; font-size: 17px; line-height: 1.7; color: var(--text); }
.prose__title { margin: 0 0 6px; font-family: var(--font-display); font-weight: 700; font-size: clamp(30px, 5vw, 42px); line-height: 1.2; color: var(--navy); }
.prose__updated { margin: 0 0 36px; font-size: 14px; color: var(--muted); }
.prose h2 { margin: 36px 0 8px; font-family: var(--font-serif); font-weight: 400; font-size: 24px; line-height: 1.3; color: var(--navy); }
.prose a { color: var(--navy); text-underline-offset: 3px; }