/* Terrasse page styles — scoped to #terrasse-main */

#terrasse-main {
  --terrasse-intro-measure: 65ch;
  --terrasse-ambiance-measure: 70ch;
  --terrasse-architecture-measure: 60ch;
  --terrasse-culinary-measure: 75ch;
  --terrasse-poker-measure: 65ch;
  --terrasse-social-measure: 70ch;
  --terrasse-practical-measure: 75ch;
  --terrasse-cta-measure: 60ch;
}

#terrasse-main .terrasse-kicker {
  color: var(--color-graphite);
  letter-spacing: 0.08em;
  margin-block-end: var(--space-sm);
}

/* Introduction */
.terrasse-intro {
  background-color: var(--color-paper);
}

.terrasse-intro__grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: var(--grid-gutter);
  align-items: start;
}

.terrasse-intro__content {
  grid-column: 1 / span 5;
  min-width: 0;
}

.terrasse-intro__content h1 {
  max-width: var(--terrasse-intro-measure);
}

.terrasse-intro__lead {
  max-width: var(--terrasse-intro-measure);
}

.terrasse-intro__space {
  grid-column: 6 / span 7;
  min-height: 2rem;
}

/* Ambiance et lumière */
.terrasse-ambiance {
  background-color: var(--color-sand);
}

.terrasse-ambiance__figure {
  margin-block-end: var(--space-xl);
}

.terrasse-ambiance__figure img {
  width: 100%;
  height: auto;
  display: block;
  margin-inline: auto;
  max-width: calc(100% - (2 * var(--image-full-margin)));
}

.terrasse-ambiance__figure figcaption {
  max-width: calc(100% - (2 * var(--image-full-margin)));
  margin-inline: auto;
  margin-block-start: var(--space-xs);
}

.terrasse-ambiance__grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: var(--grid-gutter);
  align-items: start;
}

.terrasse-ambiance__text {
  grid-column: 1 / span 4;
  min-width: 0;
}

.terrasse-ambiance__text h2,
.terrasse-ambiance__text p {
  max-width: var(--terrasse-ambiance-measure);
}

.terrasse-ambiance__quote {
  max-width: var(--terrasse-ambiance-measure);
  margin-block-start: var(--space-lg);
  padding-inline-start: var(--space-lg);
  border-inline-start: 2px solid var(--color-verveine);
  font-family: var(--font-heading);
  font-size: var(--text-body-large);
  line-height: var(--leading-body-large);
  color: var(--color-midnight);
  text-align: center;
  margin-inline: auto;
}

.terrasse-ambiance__details {
  grid-column: 5 / span 8;
  min-width: 0;
}

.terrasse-ambiance__details h3,
.terrasse-ambiance__details p,
.terrasse-ambiance__list {
  max-width: var(--terrasse-ambiance-measure);
}

.terrasse-ambiance__list {
  list-style: none;
  padding-inline-start: 0;
  display: grid;
  gap: var(--space-sm);
}

.terrasse-ambiance__list li {
  position: relative;
  padding-inline-start: var(--space-lg);
}

.terrasse-ambiance__list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 0.5rem;
  height: 0.5rem;
  background-color: var(--color-verveine);
  border-radius: 50%;
}

/* Architecture et design */
.terrasse-architecture {
  background-color: var(--color-paper);
}

.terrasse-architecture__grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: var(--grid-gutter);
  align-items: start;
}

.terrasse-architecture__main {
  grid-column: 1 / span 5;
  min-width: 0;
  border-inline-end: 1px solid rgba(58, 63, 68, 0.15);
  padding-inline-end: var(--space-lg);
}

.terrasse-architecture__main h2,
.terrasse-architecture__main p {
  max-width: var(--terrasse-architecture-measure);
}

.terrasse-architecture__secondary {
  grid-column: 6 / span 7;
  min-width: 0;
  padding-inline-start: var(--space-lg);
}

.terrasse-architecture__figure {
  margin-block-end: var(--space-lg);
}

.terrasse-architecture__figure img {
  width: 100%;
  height: auto;
  display: block;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  max-width: 100%;
}

.terrasse-architecture__figure figcaption {
  margin-block-start: var(--space-xs);
}

.terrasse-architecture__secondary h3,
.terrasse-architecture__secondary p,
.terrasse-architecture__list {
  max-width: var(--terrasse-architecture-measure);
}

.terrasse-architecture__list {
  list-style: none;
  padding-inline-start: 0;
  display: grid;
  gap: var(--space-sm);
}

.terrasse-architecture__list li {
  position: relative;
  padding-inline-start: var(--space-lg);
}

.terrasse-architecture__list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 0.5rem;
  height: 0.5rem;
  background-color: var(--color-verveine);
  border-radius: 50%;
}

/* Expériences culinaires */
.terrasse-culinary {
  background-color: var(--color-paper-soft);
}

.terrasse-culinary__header {
  margin-block-end: var(--space-xl);
}

.terrasse-culinary__header h2 {
  max-width: var(--terrasse-culinary-measure);
}

.terrasse-culinary__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--grid-gutter);
}

.terrasse-culinary__card {
  background-color: var(--color-paper-soft);
  border: 1px solid rgba(58, 63, 68, 0.25);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-card);
  padding: var(--space-lg);
  min-width: 0;
  transition: box-shadow var(--transition-fast);
}

.terrasse-culinary__card:hover {
  box-shadow: var(--shadow-elevated);
}

.terrasse-culinary__card h3 {
  margin-block-end: var(--space-sm);
}

.terrasse-culinary__card p {
  max-width: var(--terrasse-culinary-measure);
}

/* Lien avec le poker offline */
.terrasse-poker {
  background-color: var(--color-sand);
}

.terrasse-poker__grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: var(--grid-gutter);
  align-items: stretch;
}

.terrasse-poker__text {
  grid-column: 1 / span 6;
  min-width: 0;
  border-inline-end: 2px solid var(--color-verveine);
  padding-inline-end: var(--space-lg);
}

.terrasse-poker__text h2,
.terrasse-poker__text p {
  max-width: var(--terrasse-poker-measure);
}

.terrasse-poker__callout {
  grid-column: 7 / span 6;
  min-width: 0;
  background-color: var(--color-midnight);
  color: var(--color-paper);
  padding: var(--space-xl);
  border-radius: var(--radius-none);
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.terrasse-poker__callout h3,
.terrasse-poker__callout p {
  color: var(--color-paper);
}

.terrasse-poker__callout h3 {
  margin-block-end: var(--space-md);
}

.terrasse-poker__callout p {
  max-width: var(--terrasse-poker-measure);
}

/* Témoignages et ambiance sociale */
.terrasse-social {
  background-color: var(--color-paper);
}

.terrasse-social__container {
  max-width: 800px;
  margin-inline: auto;
  text-align: center;
}

.terrasse-social__quote {
  font-family: var(--font-heading);
  font-size: var(--text-h2);
  line-height: var(--leading-h2);
  color: var(--color-midnight);
  border: none;
  padding-inline: var(--space-xl);
  margin-block-end: var(--space-xl);
  position: relative;
}

.terrasse-social__quote::before,
.terrasse-social__quote::after {
  content: "";
  display: block;
  width: 3rem;
  height: 1px;
  background-color: rgba(58, 63, 68, 0.25);
  margin-inline: auto;
}

.terrasse-social__quote::before {
  margin-block-end: var(--space-lg);
}

.terrasse-social__quote::after {
  margin-block-start: var(--space-lg);
}

.terrasse-social__text {
  text-align: start;
}

.terrasse-social__text h2,
.terrasse-social__text h3,
.terrasse-social__text p,
.terrasse-social__list {
  max-width: var(--terrasse-social-measure);
  margin-inline: auto;
}

.terrasse-social__list {
  list-style: none;
  padding-inline-start: 0;
  display: grid;
  gap: var(--space-sm);
}

.terrasse-social__list li {
  position: relative;
  padding-inline-start: var(--space-lg);
}

.terrasse-social__list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 0.5rem;
  height: 0.5rem;
  background-color: var(--color-verveine);
  border-radius: 50%;
}

/* Informations pratiques */
.terrasse-practical {
  background-color: var(--color-paper-soft);
  border: 1px solid rgba(58, 63, 68, 0.15);
}

.terrasse-practical__grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: var(--grid-gutter);
  align-items: start;
}

.terrasse-practical__contacts {
  grid-column: 1 / span 5;
  min-width: 0;
}

.terrasse-practical__contacts h2,
.terrasse-practical__contacts p,
.terrasse-practical__contact-list {
  max-width: var(--terrasse-practical-measure);
}

.terrasse-practical__contact-list {
  list-style: none;
  padding-inline-start: 0;
  display: grid;
  gap: var(--space-sm);
}

.terrasse-practical__contact-list li {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs);
}

.terrasse-practical__contact-list span {
  font-weight: 600;
  color: var(--color-midnight);
}

.terrasse-practical__conditions {
  grid-column: 6 / span 7;
  min-width: 0;
  padding-inline-start: var(--space-lg);
}

.terrasse-practical__conditions h3,
.terrasse-practical__conditions p,
.terrasse-practical__list {
  max-width: var(--terrasse-practical-measure);
}

.terrasse-practical__list {
  list-style: none;
  padding-inline-start: 0;
  display: grid;
  gap: var(--space-sm);
}

.terrasse-practical__list li {
  position: relative;
  padding-inline-start: var(--space-lg);
}

.terrasse-practical__list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 0.5rem;
  height: 0.5rem;
  background-color: var(--color-verveine);
  border-radius: 50%;
}

/* Appel à l'action */
.terrasse-cta {
  background-color: var(--color-midnight);
  color: var(--color-paper);
}

.terrasse-cta__container {
  max-width: 600px;
  margin-inline: auto;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-lg);
}

.terrasse-cta__container h2,
.terrasse-cta__container p {
  color: var(--color-paper);
  max-width: var(--terrasse-cta-measure);
  margin-inline: auto;
}

.terrasse-cta__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-md);
  justify-content: center;
  align-items: center;
}

.terrasse-cta__secondary-link {
  color: var(--color-paper);
  text-decoration: underline;
  text-decoration-color: var(--color-verveine);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  transition: text-decoration-thickness var(--transition-fast), color var(--transition-fast);
}

.terrasse-cta__secondary-link:hover {
  color: var(--color-terracotta);
  text-decoration-thickness: 2px;
}

.terrasse-cta__note a {
  color: var(--color-paper);
  text-decoration: underline;
  text-decoration-color: var(--color-verveine);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  transition: text-decoration-thickness var(--transition-fast), color var(--transition-fast);
}

.terrasse-cta__note a:hover {
  color: var(--color-terracotta);
  text-decoration-thickness: 2px;
}

/* Tablet breakpoint */
@media (min-width: 768px) and (max-width: 1023px) {
  .terrasse-intro__content {
    grid-column: 1 / span 7;
  }

  .terrasse-intro__space {
    grid-column: 8 / span 5;
  }

  .terrasse-ambiance__text {
    grid-column: 1 / span 5;
  }

  .terrasse-ambiance__details {
    grid-column: 6 / span 7;
  }

  .terrasse-architecture__main {
    grid-column: 1 / span 6;
  }

  .terrasse-architecture__secondary {
    grid-column: 7 / span 6;
    padding-inline-start: var(--space-md);
  }

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

  .terrasse-culinary__card:last-child {
    grid-column: 1 / -1;
  }

  .terrasse-poker__text {
    grid-column: 1 / span 6;
  }

  .terrasse-poker__callout {
    grid-column: 7 / span 6;
  }

  .terrasse-practical__contacts {
    grid-column: 1 / span 6;
  }

  .terrasse-practical__conditions {
    grid-column: 7 / span 6;
    padding-inline-start: var(--space-md);
  }
}

/* Mobile breakpoint */
@media (max-width: 767px) {
  .terrasse-intro__grid,
  .terrasse-ambiance__grid,
  .terrasse-architecture__grid,
  .terrasse-poker__grid,
  .terrasse-practical__grid {
    grid-template-columns: 1fr;
    gap: var(--space-lg);
  }

  .terrasse-intro__content,
  .terrasse-intro__space,
  .terrasse-ambiance__text,
  .terrasse-ambiance__details,
  .terrasse-architecture__main,
  .terrasse-architecture__secondary,
  .terrasse-poker__text,
  .terrasse-poker__callout,
  .terrasse-practical__contacts,
  .terrasse-practical__conditions {
    grid-column: 1 / -1;
    padding-inline: 0;
    border-inline: none;
  }

  .terrasse-intro__space {
    display: none;
  }

  .terrasse-ambiance__figure img,
  .terrasse-ambiance__figure figcaption {
    max-width: 100%;
    margin-inline: 0;
  }

  .terrasse-culinary__grid {
    grid-template-columns: 1fr;
  }

  .terrasse-culinary__card:last-child {
    grid-column: auto;
  }

  .terrasse-social__quote {
    font-size: 1.75rem;
    line-height: 1.2;
    padding-inline: var(--space-md);
  }

  .terrasse-cta__actions {
    flex-direction: column;
    width: 100%;
  }

  .terrasse-cta__actions .btn,
  .terrasse-cta__secondary-link {
    width: 100%;
    justify-content: center;
  }
}

@media (prefers-reduced-motion: reduce) {
  .terrasse-culinary__card,
  .terrasse-cta__secondary-link,
  .terrasse-cta__note a {
    transition: none;
  }
}