/* Page-owned styles for restauration-de-groupe */

.section--intro .container {
  max-width: 1180px;
}

.section--intro .display {
  margin-block-end: var(--space-lg);
}

.section--intro .body-large {
  max-width: 75ch;
  margin-block-end: var(--space-md);
}

.section--intro p:not(.body-large) {
  max-width: 75ch;
  margin-block-end: var(--space-md);
}

.intro-separator {
  margin-block-start: var(--space-lg);
  margin-block-end: 0;
  border-top: 1px solid var(--color-brun-15);
}

/* Espaces */
.spaces-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-lg);
  margin-block-start: var(--space-lg);
}

.space-card {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

.space-card h3 {
  margin-block-end: 0;
}

.space-card p,
.space-card ul {
  margin-block-end: 0;
}

.space-card ul {
  padding-inline-start: var(--space-lg);
}

/* Formules */
.section--formules {
  background-color: var(--color-vert-bouteille);
  color: var(--color-craie);
}

.section--formules h2 {
  color: var(--color-craie);
}

.formules-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-lg);
  margin-block-start: var(--space-lg);
}

.formule-block {
  min-width: 0;
  background-color: transparent;
  border-inline-start: 4px solid var(--color-moutarde);
  border-radius: 0;
  padding: var(--space-md);
  color: var(--color-craie);
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.formule-block--poker {
  border-inline-start-color: var(--color-brique);
}

.formule-block h3 {
  color: var(--color-craie);
  margin-block-end: 0;
}

.formule-block p,
.formule-block ul {
  margin-block-end: 0;
}

.formule-block ul {
  padding-inline-start: var(--space-lg);
}

/* Menus */
.menus-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-lg);
  margin-block-start: var(--space-lg);
}

.menu-list {
  min-width: 0;
}

.menu-list h3 {
  margin-block-end: var(--space-sm);
}

.menu-list p {
  margin-block-end: var(--space-sm);
}

.dish-list {
  list-style: none;
  padding-inline-start: 0;
  margin-block-end: var(--space-sm);
}

.dish-list li {
  display: flex;
  align-items: baseline;
  gap: var(--space-xs);
  padding-block: var(--space-xs);
  border-bottom: 1px solid var(--color-brun-15);
}

.dish-list li:last-child {
  border-bottom: none;
}

.dish-name {
  font-family: var(--font-heading);
  font-weight: 600;
  color: var(--color-brun-profond);
  white-space: nowrap;
}

.dish-dots {
  flex: 1 1 auto;
  border-bottom: 2px dotted var(--color-brun-30);
  min-width: 20px;
  align-self: flex-end;
  margin-block-end: 4px;
}

.dish-price {
  font-variant-numeric: tabular-nums;
  color: var(--color-brun-profond);
  text-align: right;
  white-space: normal;
  overflow-wrap: break-word;
}

/* Boissons */
.section--boissons {
  background-color: var(--color-brun-profond);
  color: var(--color-craie);
}

.section--boissons h2 {
  color: var(--color-craie);
}

.boissons-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-lg);
  margin-block-start: var(--space-lg);
}

.boisson-block {
  min-width: 0;
}

.boisson-block h3 {
  color: var(--color-craie);
  margin-block-end: var(--space-sm);
}

.boisson-block p,
.boisson-block ul {
  margin-block-end: 0;
}

.boisson-block ul {
  padding-inline-start: var(--space-lg);
}

/* Poker */
.section--poker {
  background-color: var(--color-brique);
  color: var(--color-craie);
}

.section--poker h2 {
  color: var(--color-craie);
}

.poker-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-lg);
  margin-block-start: var(--space-lg);
}

.poker-block {
  min-width: 0;
}

.poker-block h3 {
  color: var(--color-craie);
  margin-block-end: var(--space-sm);
}

.poker-block p,
.poker-block ul {
  margin-block-end: 0;
}

.poker-block ul {
  padding-inline-start: var(--space-lg);
}

/* Organisation */
.organisation-grid {
  display: grid;
  grid-template-columns: 3fr 2fr;
  gap: var(--space-lg);
  margin-block-start: var(--space-lg);
}

.organisation-steps,
.organisation-personnalisation {
  min-width: 0;
}

.organisation-steps h3,
.organisation-personnalisation h3 {
  margin-block-end: var(--space-sm);
}

.organisation-steps p,
.organisation-personnalisation p,
.organisation-steps ul,
.organisation-personnalisation ul {
  margin-block-end: 0;
}

.steps-list {
  list-style: none;
  padding-inline-start: 0;
  margin-block-end: var(--space-md);
  counter-reset: step;
}

.steps-list li {
  display: flex;
  align-items: flex-start;
  gap: var(--space-sm);
  padding-block: var(--space-xs);
}

.step-number {
  font-family: var(--font-heading);
  font-weight: 700;
  color: var(--color-moutarde);
  flex-shrink: 0;
  min-width: 24px;
  text-align: center;
}

.contact-details {
  background-color: var(--color-craie);
  border-inline-start: 4px solid var(--color-moutarde);
  padding: var(--space-md);
  margin-block-start: var(--space-md);
}

.contact-details p {
  margin-block-end: var(--space-xs);
}

.contact-details p:last-child {
  margin-block-end: 0;
}

/* Témoignages */
.section--temoignages {
  background-color: var(--color-vert-bouteille);
  color: var(--color-craie);
}

.section--temoignages h2 {
  color: var(--color-craie);
}

.temoignages-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-lg);
  margin-block-start: var(--space-lg);
}

.temoignage {
  min-width: 0;
  color: var(--color-craie);
  border-inline-start: 4px solid var(--color-moutarde);
  padding-inline-start: var(--space-lg);
  margin-block-end: 0;
}

.temoignage p {
  margin-block-end: var(--space-sm);
}

.quote-footer {
  font-family: var(--font-body);
  font-style: normal;
  font-size: var(--text-small);
  line-height: var(--leading-small);
  letter-spacing: var(--tracking-small);
  color: var(--color-craie);
  opacity: 0.8;
}

/* FAQ */
.faq-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  margin-block-start: var(--space-lg);
}

.faq-item {
  border: 1px solid var(--color-brun-15);
  border-radius: var(--radius-card);
  background-color: var(--color-oat);
  transition: background-color var(--transition-base);
}

.faq-item:hover {
  background-color: var(--color-craie);
}

.faq-question {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
  width: 100%;
  padding: var(--space-md);
  font-family: var(--font-heading);
  font-size: var(--text-h3);
  line-height: var(--leading-h3);
  font-weight: var(--weight-h3);
  color: var(--color-brun-profond);
  text-align: left;
  background: none;
  border: none;
  cursor: pointer;
  transition: color var(--transition-fast);
}

.faq-question:hover,
.faq-question:focus-visible {
  color: var(--color-mauve);
}

.faq-chevron {
  flex-shrink: 0;
  width: 12px;
  height: 12px;
  border-right: 2px solid var(--color-moutarde);
  border-bottom: 2px solid var(--color-moutarde);
  transform: rotate(45deg);
  transition: transform var(--transition-base);
}

.faq-item[data-open="true"] .faq-chevron {
  transform: rotate(225deg);
}

.faq-answer {
  padding: 0 var(--space-md) var(--space-md);
  color: var(--color-brun-profond);
}

.faq-answer p {
  margin-block-end: 0;
}

/* CTA */
.section--cta {
  background-color: var(--color-brun-profond);
  color: var(--color-craie);
}

.section--cta h2 {
  color: var(--color-craie);
}

.cta-content {
  max-width: 70%;
  margin-inline: auto;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-lg);
}

.cta-content .body-large {
  margin-block-end: 0;
}

.cta-contact {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
  text-align: center;
}

.cta-contact p {
  margin-block-end: 0;
}

.cta-button {
  margin-block-start: var(--space-sm);
}

/* Responsive */
@media (max-width: 1023px) {
  .spaces-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .space-card:last-child {
    grid-column: 1 / -1;
  }

  .organisation-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 767px) {
  .spaces-grid,
  .formules-grid,
  .menus-grid,
  .boissons-grid,
  .poker-grid,
  .temoignages-grid {
    grid-template-columns: 1fr;
  }

  .space-card:last-child {
    grid-column: auto;
  }

  .cta-content {
    max-width: 100%;
  }

  .cta-button {
    width: 100%;
  }

  .dish-list li {
    flex-wrap: wrap;
  }

  .dish-name {
    white-space: normal;
  }

  .dish-dots {
    display: none;
  }

  .dish-price {
    text-align: left;
    width: 100%;
  }
}

@media (max-width: 480px) {
  .section--intro .body-large,
  .section--intro p:not(.body-large) {
    max-width: 100%;
  }

  .cta-contact {
    text-align: left;
  }
}