/* ============================================
   Page: Intérieurs — Riviera Noir
   Scoped to #interieurs-page
   ============================================ */

#interieurs-page {
  --interieurs-cream: #FFFDD0;
  --interieurs-midnight: #1A2A44;
  --interieurs-burgundy: #800020;
  --interieurs-walnut: #4A3728;
  --interieurs-border: rgba(74, 55, 40, 0.15);
  --interieurs-shadow: rgba(26, 42, 68, 0.08);
  --interieurs-shadow-hover: rgba(128, 0, 32, 0.15);
  --interieurs-radius-small: 0.25rem;
  --interieurs-radius-medium: 0.5rem;
  --interieurs-transition-fast: 150ms ease-in-out;
  --interieurs-transition-slow: 250ms ease-in-out;
  --interieurs-gap-section: 4rem;
  --interieurs-gap-card: 1.5rem;
  --interieurs-padding-section: 4rem;
  --interieurs-padding-mobile: 2rem;
  --interieurs-container: 75rem;
  --interieurs-container-wide: 90rem;
  --interieurs-text-measure: 65ch;
  --interieurs-text-measure-narrow: 55ch;
  --interieurs-text-measure-caption: 45ch;
}

/* --- Shared page-owned section rhythm --- */
#interieurs-page section {
  padding-block: var(--interieurs-padding-section);
}

#interieurs-page .eyebrow {
  color: var(--interieurs-burgundy);
}

#interieurs-page .section--dark .eyebrow {
  color: var(--interieurs-cream);
}

#interieurs-page img {
  display: block;
  max-width: 100%;
  height: auto;
}

#interieurs-page figure {
  margin: 0;
}

#interieurs-page figure img {
  border: 1px solid var(--interieurs-border);
  box-shadow: 0 2px 8px var(--interieurs-shadow);
}

#interieurs-page figure figcaption {
  font-size: 0.75rem;
  line-height: 1.4;
  color: var(--interieurs-walnut);
  margin-block-start: 0.5rem;
}

/* --- 1. Introduction --- */
.interieurs-intro {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 2rem;
  padding-block-start: 0;
}

.interieurs-intro__media {
  width: 100%;
  max-width: var(--interieurs-container-wide);
  margin-inline: auto;
}

.interieurs-intro__media img {
  width: 100%;
  height: auto;
  max-height: 80vh;
  object-fit: cover;
  object-position: center;
}

.interieurs-intro__content {
  width: 100%;
  max-width: var(--interieurs-container);
  margin-inline: auto;
  padding-inline: 2rem;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  align-items: flex-start;
}

.interieurs-intro__content h1 {
  font-size: clamp(2.25rem, 4vw, 3rem);
  line-height: 1.2;
  margin-block-end: 0;
}

.interieurs-intro__lead {
  font-size: clamp(1.25rem, 2vw, 1.5rem);
  line-height: 1.4;
  font-weight: 400;
  color: var(--interieurs-walnut);
  max-width: var(--interieurs-text-measure);
  margin-block-end: 0;
}

.interieurs-intro__content p:not(.eyebrow):not(.interieurs-intro__lead) {
  max-width: var(--interieurs-text-measure);
  margin-block-end: 0;
}

/* --- 2. Salle principale --- */
.interieurs-salle {
  display: grid;
  grid-template-columns: minmax(0, 6fr) minmax(0, 6fr);
  gap: 3rem;
  align-items: center;
  max-width: var(--interieurs-container);
  margin-inline: auto;
  padding-inline: 2rem;
}

.interieurs-salle__content {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  align-items: flex-start;
}

.interieurs-salle__content h2 {
  margin-block-end: 0;
}

.interieurs-salle__content p {
  max-width: var(--interieurs-text-measure);
  margin-block-end: 0;
}

.interieurs-salle__media {
  min-width: 0;
  width: 100%;
  transform: translateY(1.5rem);
}

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

/* --- 3. Salon de jeux --- */
.interieurs-jeux {
  background-color: var(--interieurs-midnight);
  color: var(--interieurs-cream);
}

.interieurs-jeux__inner {
  display: grid;
  grid-template-columns: minmax(0, 6fr) minmax(0, 6fr);
  gap: 3rem;
  align-items: center;
  max-width: var(--interieurs-container);
  margin-inline: auto;
  padding-inline: 2rem;
}

.interieurs-jeux__media {
  min-width: 0;
  width: 100%;
}

.interieurs-jeux__media img {
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  object-position: center;
  border-color: rgba(255, 253, 208, 0.15);
}

.interieurs-jeux__content {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  align-items: flex-start;
}

.interieurs-jeux__content h2 {
  color: var(--interieurs-cream);
  margin-block-end: 0;
}

.interieurs-jeux__content p {
  max-width: var(--interieurs-text-measure);
  margin-block-end: 0;
}

.interieurs-jeux__list {
  list-style: none;
  padding-inline-start: 0;
  margin-block-end: 0;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  max-width: var(--interieurs-text-measure);
}

.interieurs-jeux__list li {
  position: relative;
  padding-inline-start: 1.5rem;
  line-height: 1.6;
}

.interieurs-jeux__list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.6em;
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background-color: var(--interieurs-burgundy);
}

/* --- 4. Bar --- */
.interieurs-bar {
  display: grid;
  grid-template-columns: minmax(0, 6fr) minmax(0, 6fr);
  gap: 3rem;
  align-items: center;
  max-width: var(--interieurs-container);
  margin-inline: auto;
  padding-inline: 2rem;
}

.interieurs-bar__media {
  min-width: 0;
  width: 100%;
}

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

.interieurs-bar__content {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  align-items: flex-start;
}

.interieurs-bar__content h2 {
  margin-block-end: 0;
}

.interieurs-bar__content p {
  max-width: var(--interieurs-text-measure);
  margin-block-end: 0;
}

.interieurs-bar__list {
  list-style: none;
  padding-inline-start: 0;
  margin-block-end: 0;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  max-width: var(--interieurs-text-measure);
}

.interieurs-bar__list li {
  position: relative;
  padding-inline-start: 1.5rem;
  line-height: 1.6;
}

.interieurs-bar__list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.6em;
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background-color: var(--interieurs-burgundy);
}

/* --- 5. Salons privés --- */
.interieurs-salons {
  display: grid;
  grid-template-columns: minmax(0, 6fr) minmax(0, 6fr);
  gap: 3rem;
  align-items: center;
  max-width: var(--interieurs-container);
  margin-inline: auto;
  padding-inline: 2rem;
}

.interieurs-salons__content {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  align-items: flex-start;
}

.interieurs-salons__content h2 {
  margin-block-end: 0;
}

.interieurs-salons__content p {
  max-width: var(--interieurs-text-measure);
  margin-block-end: 0;
}

.interieurs-salons__list {
  list-style: none;
  padding-inline-start: 0;
  margin-block-end: 0;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  max-width: var(--interieurs-text-measure);
}

.interieurs-salons__list li {
  position: relative;
  padding-inline-start: 1.5rem;
  line-height: 1.6;
}

.interieurs-salons__list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.6em;
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background-color: var(--interieurs-burgundy);
}

.interieurs-salons__media {
  min-width: 0;
  width: 100%;
}

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

/* --- 6. Matériaux et détails --- */
.interieurs-materiaux {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 2rem;
  max-width: var(--interieurs-container);
  margin-inline: auto;
  padding-inline: 2rem;
}

.interieurs-materiaux__media {
  width: 100%;
  max-width: var(--interieurs-container-wide);
  margin-inline: auto;
}

.interieurs-materiaux__media img {
  width: 100%;
  height: auto;
  max-height: 70vh;
  object-fit: cover;
  object-position: center;
  aspect-ratio: 1 / 1;
}

.interieurs-materiaux__content {
  width: 100%;
  max-width: calc(var(--interieurs-container) * 0.6667);
  margin-inline-start: auto;
  margin-inline-end: 0;
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  align-items: flex-start;
}

.interieurs-materiaux__content h2 {
  margin-block-end: 0;
}

.interieurs-materiaux__content p {
  max-width: var(--interieurs-text-measure);
  margin-block-end: 0;
}

.interieurs-materiaux__list {
  list-style: none;
  padding-inline-start: 0;
  margin-block-end: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem 2rem;
  max-width: var(--interieurs-text-measure);
}

.interieurs-materiaux__list li {
  position: relative;
  padding-inline-start: 1.5rem;
  line-height: 1.6;
}

.interieurs-materiaux__list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.6em;
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background-color: var(--interieurs-burgundy);
}

/* --- 7. Éclairage --- */
.interieurs-eclairage {
  display: grid;
  grid-template-columns: minmax(0, 6fr) minmax(0, 6fr);
  gap: 3rem;
  align-items: center;
  max-width: var(--interieurs-container);
  margin-inline: auto;
  padding-inline: 2rem;
}

.interieurs-eclairage__media {
  min-width: 0;
  width: 100%;
}

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

.interieurs-eclairage__content {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  align-items: flex-start;
}

.interieurs-eclairage__content h2 {
  margin-block-end: 0;
}

.interieurs-eclairage__content p {
  max-width: var(--interieurs-text-measure);
  margin-block-end: 0;
}

.interieurs-eclairage__list {
  list-style: none;
  padding-inline-start: 0;
  margin-block-end: 0;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  max-width: var(--interieurs-text-measure);
}

.interieurs-eclairage__list li {
  position: relative;
  padding-inline-start: 1.5rem;
  line-height: 1.6;
}

.interieurs-eclairage__list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.6em;
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background-color: var(--interieurs-burgundy);
}

/* --- 8. Galerie --- */
.interieurs-galerie {
  max-width: var(--interieurs-container);
  margin-inline: auto;
  padding-inline: 2rem;
}

.interieurs-galerie__heading {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  align-items: flex-start;
  margin-block-end: 2.5rem;
}

.interieurs-galerie__heading h2 {
  margin-block-end: 0;
}

.interieurs-galerie__heading p {
  max-width: var(--interieurs-text-measure-narrow);
  margin-block-end: 0;
}

.interieurs-galerie__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.5rem;
}

.interieurs-galerie__item {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

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

.interieurs-galerie__item figcaption {
  text-align: center;
  max-width: var(--interieurs-text-measure-caption);
  margin-inline: auto;
}

/* --- 9. CTA --- */
.interieurs-cta {
  background-color: var(--interieurs-midnight);
  color: var(--interieurs-cream);
  text-align: center;
}

.interieurs-cta__content {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  align-items: center;
  max-width: calc(var(--interieurs-container) * 0.6667);
  margin-inline: auto;
  padding-inline: 2rem;
}

.interieurs-cta__content h2 {
  color: var(--interieurs-cream);
  margin-block-end: 0;
}

.interieurs-cta__content p {
  max-width: var(--interieurs-text-measure-narrow);
  margin-inline: auto;
  margin-block-end: 0;
}

.interieurs-cta__contact {
  font-size: 0.875rem;
  line-height: 1.5;
  opacity: 0.9;
}

.interieurs-cta__contact a {
  color: var(--interieurs-cream);
  text-underline-offset: 0.2em;
}

.interieurs-cta__contact a:hover {
  color: var(--interieurs-burgundy);
}

.interieurs-cta__button {
  margin-block-start: 0.5rem;
}

/* --- Responsive --- */
@media (max-width: 64rem) {
  .interieurs-salle,
  .interieurs-jeux__inner,
  .interieurs-bar,
  .interieurs-salons,
  .interieurs-eclairage {
    grid-template-columns: minmax(0, 1fr);
    gap: 2rem;
  }

  .interieurs-salle__media,
  .interieurs-jeux__media,
  .interieurs-bar__media,
  .interieurs-salons__media,
  .interieurs-eclairage__media {
    order: -1;
  }

  .interieurs-salle__media {
    transform: none;
  }

  .interieurs-materiaux__content {
    max-width: 100%;
    margin-inline: 0;
  }

  .interieurs-galerie__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 48rem) {
  #interieurs-page section {
    padding-block: var(--interieurs-padding-mobile);
  }

  .interieurs-intro {
    gap: 1.5rem;
  }

  .interieurs-intro__content,
  .interieurs-salle,
  .interieurs-jeux__inner,
  .interieurs-bar,
  .interieurs-salons,
  .interieurs-materiaux,
  .interieurs-eclairage,
  .interieurs-galerie,
  .interieurs-cta__content {
    padding-inline: 1.5rem;
  }

  .interieurs-intro__media img {
    max-height: 50vh;
  }

  .interieurs-materiaux__media img {
    max-height: 50vh;
  }

  .interieurs-materiaux__list {
    grid-template-columns: minmax(0, 1fr);
  }

  .interieurs-galerie__grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .interieurs-cta__button {
    width: 100%;
  }
}

@media (max-width: 30rem) {
  .interieurs-intro__content,
  .interieurs-salle,
  .interieurs-jeux__inner,
  .interieurs-bar,
  .interieurs-salons,
  .interieurs-materiaux,
  .interieurs-eclairage,
  .interieurs-galerie,
  .interieurs-cta__content {
    padding-inline: 1rem;
  }

  .interieurs-intro__lead {
    font-size: 1.125rem;
  }

  .interieurs-intro__content h1 {
    font-size: 2rem;
  }

  .interieurs-galerie__heading {
    gap: 0.75rem;
  }
}