/* ==========================================================================
   SEJOUR (sejour.html) — template "sejour", cf maquette Figma node 303:1754.
   Classes prefixees "sj-" pour ne pas toucher aux anciennes classes de
   sejour.html (.intro, .section, .espace-row-*, etc.) qui restent en CSS
   mais ne sont plus utilisees (a nettoyer plus tard, cf rationalisation
   prevue en fin de projet).
   ========================================================================== */

/* --------------------------------------------------------------------------
   NAV — .site-nav__inner reste identique a about.html (logo a gauche,
   liens ferres a droite, rien d'ajoute). Le bouton "Reserver un sejour"
   est un enfant a part de .site-nav (pas de .site-nav__inner), positionne
   en absolute au meme endroit que les liens (meme padding que .site-nav) :
   au repos il est invisible, et remplace logo+liens (qui disparaissent en
   hauteur ET en opacite) une fois qu'on a scrolle au-dela du bouton
   equivalent du TITLE (cf sejour.js, IntersectionObserver sur #titleCta
   -> classe "show-cta" sur la nav). Les deux occupent donc la meme
   position, l'un remplace l'autre au lieu de s'ajouter cote a cote. */

.site-nav__cta {
  position: absolute;
  top: var(--top-padding);
  right: var(--top-padding);
  background: var(--color-black);
  color: var(--color-white) !important;
  font-size: 0.875rem; /* 14px */
  padding: 0.3125rem 0.75rem; /* 5px 12px, reduit pour une barre scrollee moins haute */
  border-radius: 0.25rem;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease, top 0.25s ease;
}

.site-nav__cta::after {
  display: none; /* pas de soulignement au survol sur ce bouton */
}

.site-nav.show-cta {
  background: rgba(255, 255, 255, 0.55); /* blanc transparent + flou (verre depoli) au lieu d'un blanc plein */
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px); /* Safari */
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
  padding-bottom: 0.5rem; /* 8px, reduit vs 0.75rem */
  transition: background 0.25s ease, border-color 0.25s ease;
}

.site-nav.show-cta .site-nav__cta {
  top: 0.8125rem; /* centre verticalement le bouton dans la barre reduite
     (mesure live : hauteur barre 55.5px, bouton 28.5px -> ~13.5px de
     chaque cote) */
  opacity: 1;
  pointer-events: auto;
}

/* Au scroll (show-cta), on enleve toute la nav (logo + liens) : il ne
   reste que le bouton Reserver, a la meme place. */
.site-nav__logo,
.site-nav__links {
  max-height: 5rem;
  padding-bottom: 0.3em; /* laisse la place au soulignement (bottom:-0.1em
     sur les liens) : sans ca, l'overflow:hidden ci-dessous le coupe */
  overflow: hidden;
  transition: opacity 0.25s ease, max-height 0.25s ease;
}

.site-nav.show-cta .site-nav__logo,
.site-nav.show-cta .site-nav__links {
  opacity: 0;
  max-height: 0;
  pointer-events: none;
}

.site-nav.show-cta .site-nav__inner {
  align-items: center;
  min-height: 1.625rem; /* 26px, ajuste au nouveau bouton (reduit) : le
     bouton (absolute) ne compte pas dans la hauteur de la nav une fois
     logo/liens reduits a 0 — sans ca, le filet du bas traverse le bouton
     au lieu de passer dessous. */
}

/* ==========================================================================
   TITLE
   ========================================================================== */

.sj-title {
  padding: 3.75rem 3rem 4.375rem; /* 60px haut (plus de blanc), 70px bas
     (decolle le bouton Reserver de la hero juste en-dessous) */
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 1rem; /* 16px */
}

.sj-title__h1 {
  font-family: Helvetica, Arial, sans-serif; /* meme famille que .offer-title__h1
     (massage/naturopathie) et .about-title : sans ce reglage, le H1 heritait
     de --font-sans (Helvetica Now Display) et tranchait avec les 2 autres pages */
  font-weight: 400;
  font-size: 6.875rem; /* 110px */
  line-height: 1;
  text-transform: uppercase;
  align-self: flex-start;
}

.sj-title__subtitle {
  font-size: 0.8rem; /* aligne sur .offer-title__subtitle (massage/naturopathie) */
  text-transform: uppercase;
  align-self: flex-start;
  margin-bottom: 1.5rem;
  max-width: 30%; /* desktop : retour a la ligne automatique, reinitialise en mobile plus bas */
}

.sj-title__cta {
  background: var(--color-black);
  color: var(--color-white);
  font-size: 0.875rem; /* 14px */
  padding: 0.4375rem 0.75rem;
  border-radius: 0.25rem;
}

.sj-title__cta::after {
  display: none;
}

/* ==========================================================================
   HERO
   ========================================================================== */

.sj-hero {
  padding: 0 3rem;
  display: flex;
  justify-content: center;
}

.sj-hero img {
  width: 100%;
  max-width: 86.5625rem; /* 1385px */
  height: 40.8125rem; /* 653px */
  object-fit: cover;
}

/* ==========================================================================
   MAIN — rythme general entre sections
   ========================================================================== */

.sj-main {
  padding: 4.375rem 3rem; /* 70px haut/bas, marge generale */
  display: flex;
  flex-direction: column;
  gap: 6.875rem; /* 110px, cf --margin-betweensection maquette */
}

/* ==========================================================================
   INTRO
   ========================================================================== */

.sj-intro {
  display: flex;
  gap: 9.0625rem; /* 145px */
}

.sj-intro__left,
.sj-intro__right {
  flex: 1;
  min-width: 0;
}

.sj-intro__left p {
  font-size: 3.25rem; /* 52px */
  line-height: 3.5rem; /* 56px */
  max-width: 37.3125rem; /* 597px */
}

.sj-intro__right p {
  font-size: 1.25rem; /* 20px */
  line-height: 1.5rem; /* 24px */
  max-width: 35.5rem; /* 568px */
  margin-bottom: 1.5rem;
}

.sj-intro__right p:last-child {
  margin-bottom: 0;
}

/* ==========================================================================
   SERVICES — liste avec filets de separation
   ========================================================================== */

.sj-services h2 {
  font-size: 3.25rem; /* 52px */
  line-height: 2rem;
  text-transform: uppercase;
  font-weight: 400;
  margin-bottom: 3.75rem; /* 60px, cf --margin-insection */
}

.sj-services__list li {
  font-size: 1.5rem; /* 18px, reduit vs maquette pour alleger la liste */
  line-height: 0.75rem; /* 28px */
  padding: 1rem 0; /* espace autour du filet */
  border-top: 1px solid var(--color-black);
}

.sj-services__list li:last-child {
  border-bottom: 1px solid var(--color-black);
}

/* ==========================================================================
   GALERIE — 4 blocs photo alternes, en collage a positions absolues fideles
   au node Figma (303:1754, sous-sections 303:1843/303:1874/307:1888/307:1955).
   Chaque type a une hauteur fixe (le point bas des images) et 3 images
   positionnees en absolute (left/top/width/height, converti px/16 = rem),
   pour reproduire le decalage/chevauchement exact de la maquette plutot
   qu'un simple empilement en colonnes. .sj-gallery__col reste en HTML pour
   la structure/lisibilite mais n'est plus stylee en desktop : les enfants
   .sj-gallery__img se positionnent directement par rapport a .sj-gallery.
   ========================================================================== */

.sj-gallery {
  position: relative;
}

.sj-gallery__img {
  position: absolute;
}

.sj-gallery__img img,
.sj-gallery__img video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Type A — section 1378x1196 (node 303:1843) */
.sj-gallery--a { height: 74.75rem; }
.sj-a1 { left: 0;         top: 0;          width: 34rem;      height: 44.6875rem; }
.sj-a2 { left: 12.6875rem; top: 57.5625rem; width: 34.25rem;   height: 17.1875rem; }
.sj-a3 { left: 57.8125rem; top: 30.5rem;    width: 28.3125rem; height: 36.125rem; }

/* Type B — section 1378x1397 (node 303:1874) */
.sj-gallery--b { height: 87.3125rem; }
.sj-b1 { left: 0;          top: 0;            width: 34.25rem;   height: 39.625rem; }
.sj-b2 { left: 22.375rem;  top: 48.1875rem;   width: 24.5625rem; height: 39.125rem; }
.sj-b3 { left: 58.8125rem; top: 27.78125rem;  width: 27.3125rem; height: 33.6875rem; }

/* Type C — section 1378x1540 (node 307:1888) */
.sj-gallery--c { height: 96.25rem; }
.sj-c1 { left: 0;          top: 0;          width: 19.75rem;   height: 26.3125rem; }
.sj-c2 { left: 14.25rem;   top: 38.1875rem; width: 20.3125rem; height: 25.375rem; }
.sj-c3 { left: 41.125rem;  top: 15.625rem;  width: 36.3125rem; height: 19.8125rem; }
.sj-c4 { left: 38.3125rem; top: 47.6875rem; width: 33.25rem;  height: 41.25rem; }

/* Type D — section 1378x1298 (node 307:1955) */
.sj-gallery--d { height: 81.125rem; }
.sj-d1 { left: 0;          top: 0;      width: 24.875rem;  height: 33.4375rem; }
.sj-d2 { left: 16.75rem;   top: 42rem;  width: 30.1875rem; height: 39.125rem; }
.sj-d3 { left: 58.8125rem; top: 11.25rem; width: 27.3125rem; height: 33.6875rem; }

/* GALERIE MOBILE — images mobile dediees (cf media/mobile/sejours),
   cachee par defaut : affichee uniquement sous 768px (cf media query plus
   bas), en remplacement des galeries A/B/C/D + double ci-dessus. */
.sj-mobile-gallery {
  display: none;
}

/* ==========================================================================
   EXPLICATION — texte seul, aligne comme la colonne de droite de l'intro
   ========================================================================== */

.sj-explication {
  display: flex;
  justify-content: flex-end;
}

.sj-explication p {
  font-size: 1.25rem;
  line-height: 1.5rem;
  max-width: 35.5rem; /* 568px, meme largeur que .sj-intro__right */
}

/* ==========================================================================
   DOUBLE — image superposee (effet du a la maquette, deux calques memes
   dimensions/position)
   ========================================================================== */

.sj-double {
  display: flex;
  justify-content: center;
}

.sj-double__box {
  position: relative;
  width: 27.75rem; /* 444px */
  height: 37rem;   /* 592px */
}

.sj-double__box img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ==========================================================================
   PLAN
   ========================================================================== */

.sj-plan {
  display: flex;
  justify-content: center;
}

.sj-plan img {
  width: 100%;
  max-width: 66.6875rem; /* 1067px */
}

/* ==========================================================================
   MAP (mobile uniquement, image dediee : media/mobile/sejours/map-mobile.png)
   ========================================================================== */

.sj-map {
  display: none;
}

/* ==========================================================================
   BOOK LINK — mega-lien "RESERVER"
   ========================================================================== */

.sj-book-link {
  display: flex;
  justify-content: center;
}

.sj-book-link a {
  font-size: 4.5rem; /* 72px, reduit vs maquette (110px) */
  font-weight: 500;
  text-transform: uppercase;
  /* pas de text-decoration : le soulignement au survol est gere par le
     ::after global (a:not(.site-nav__logo):not(.site-nav__cta)) dans
     style.css, cf regle "js" mentionnee par l'utilisateur */
}

/* ==========================================================================
   RESPONSIVE (< 768px) — cf maquette Figma mobile dediee (node 322-2593) :
   TITLE + CTA + HERO + INTRO + SERVICES puis toutes les galeries (A/B/C/D,
   simple empilement), l'EXPLICATION cuisine entre les galeries, le DOUBLE,
   et le PLAN en tout dernier avant le lien RESERVER.
   ========================================================================== */

@media (max-width: 768px) {
  .site-nav__right {
    gap: 1rem;
  }

  /* Sur desktop, sejour.js remplace la barre de liens par le bouton
     "Reserver un sejour" une fois le titre scrolle (classe "show-cta").
     Sur mobile on desactive ce remplacement : la barre de liens (fixed,
     cf style.css) reste affichee en permanence, comme sur les 3 autres
     pages (home/massage/naturo) -> sinon elle "disparaissait" au scroll,
     remplacee par un bouton qui heritait mal des anciennes regles absolute. */
  .site-nav__links {
    max-height: none; /* la regle desktop (5rem + overflow:hidden) rognait
       le bas de la barre, dont le padding-top est maintenant plus grand */
    overflow: visible;
  }

  .site-nav__logo {
    max-height: none; /* meme regle desktop (5rem + overflow:hidden) qui
       mangeait le bas du logo, agrandi depuis sur cette page (style.css) */
    overflow: visible;
  }

  .site-nav.show-cta {
    background: transparent; /* pas de fond/flou sur .site-nav : c'est
       .site-nav__links (fixed) qui porte son propre fond blanc */
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    border-bottom: none;
    padding-bottom: 0;
  }

  .site-nav.show-cta .site-nav__logo,
  .site-nav.show-cta .site-nav__links {
    opacity: 1;
    max-height: none;
    pointer-events: auto;
  }

  .site-nav.show-cta .site-nav__cta {
    opacity: 0;
    pointer-events: none;
  }

  .site-nav__cta {
    display: none; /* plus jamais affiche sur mobile : les liens restent visibles a la place */
  }

  .sj-title {
    align-items: flex-start;
    padding: 7.23rem 2.35rem 4.82rem; /* aligne sur .offer-title (massage/naturopathie), cf maquette node 322-2593 ; +5px vs le reste du site */
    gap: 0; /* ecarts geres via margin-bottom ci-dessous, aligne sur .offer-title */
  }

  .sj-title__h1 {
    font-size: 7.95rem; /* aligne sur .offer-title__h1 (massage/naturopathie) */
    line-height: 0.9;
    margin-bottom: 2.41rem;
  }

  .sj-title__subtitle {
    font-size: 1.5rem; /* 19px sur la maquette (603px de large) */
    margin-bottom: 12.05rem; /* aligne sur .offer-title__subtitle */
    max-width: none; /* annule le retour a la ligne desktop (1/5 de largeur) */
  }

  .sj-title__cta {
    font-size: 1.875rem; /* 24px sur la maquette */
    padding: 0.75rem 1rem;
    border-radius: 0.5rem;
  }

  .sj-hero {
    padding: 0 2.35rem; /* +5px vs le reste du site (1.75rem -> 2.35rem) */
  }

  .sj-hero img {
    width: 100%;
    height: auto;
    aspect-ratio: 1014 / 1400; /* image mobile dediee (00), un peu plus haute que les autres */
  }

  .sj-main {
    padding: 3rem 2.35rem; /* +5px vs le reste du site (1.75rem -> 2.35rem) */
    gap: 4rem;
  }

  .sj-intro {
    flex-direction: column;
    gap: 2rem;
  }

  .sj-intro__left {
    display: none; /* la maquette mobile n'a pas la phrase d'accroche 52px, seulement le texte d'intro */
  }

  .sj-intro__right p {
    font-size: 1.875rem; /* 20px sur la maquette */
    line-height: 1.3;
    max-width: none;
  }

  .sj-services h2 {
    font-size: 3.75rem; /* 52px sur la maquette */
    margin-bottom: 2.5rem;
  }

  .sj-services__list li {
    font-size: 1.875rem; /* 24px sur la maquette */
    line-height: 1.3;
    padding: 0.875rem 0;
  }

  /* Galeries desktop (A/B/C/D + explication + double) : remplacees sur
     mobile par .sj-mobile-gallery, qui utilise les images mobile dediees
     (cf media/mobile/sejours). */
  .sj-gallery,
  .sj-explication,
  .sj-double {
    display: none;
  }

  /* GALERIE MOBILE — simple empilement plein largeur, avec le texte
     cuisine insere au bon endroit (entre les images 2 et 3, cf maquette). */
  .sj-mobile-gallery {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
  }

  .sj-mobile-gallery img,
  .sj-mobile-gallery video {
    width: 100%;
    height: auto;
    aspect-ratio: 1014 / 1286;
    object-fit: cover;
  }

  .sj-mobile-gallery__text {
    font-size: 1.875rem; /* 24px sur la maquette */
    line-height: 1.3;
    padding: 1rem 0; /* petit espace avant/apres, en plus du gap de la galerie */
  }

  .sj-plan img {
    aspect-ratio: 1014 / 1286; /* image mobile dediee */
  }

  .sj-map {
    display: flex;
    padding: 0 2.35rem; /* meme marge que le reste du site mobile */
  }

  .sj-map img {
    width: 100%;
    height: auto;
    aspect-ratio: 1014 / 1000; /* image recadree de 3px en bas (filet gris/noir residuel de l'export) */
    object-fit: cover;
  }

  .sj-book-link a {
    font-size: 6rem; /* encore agrandi (etait 4rem) */
    font-weight: 700;
    text-align: center; /* centre "Composer un" / "séjour" l'un sous l'autre */
  }

  /* A 96px, "Composer un séjour" retombe sur 2 lignes sur mobile : le
     soulignement global (::after, en position absolute) ne peut souligner
     que le bloc entier. On le remplace ici par un background anime avec
     box-decoration-break: clone, qui suit chacune des 2 lignes independamment. */
  .sj-book-link a::after {
    display: none;
  }

  .sj-book-link a {
    -webkit-box-decoration-break: clone;
    box-decoration-break: clone;
    background-image: linear-gradient(currentColor, currentColor);
    background-repeat: no-repeat;
    background-position: left bottom;
    background-size: 0% 0.08em;
    transition: background-size 0.3s ease;
  }

  .sj-book-link a:hover,
  .sj-book-link a:focus-visible {
    background-size: 100% 0.08em;
  }
}