/* Page-owned styles for Bistro des Rives Contact page */

.contact-page {
  width: 100%;
  max-width: 100vw;
  overflow-x: hidden;
}

/* Hero Contact */
.contact-hero {
  background-color: var(--color-ivoire-chaud);
  padding-block: var(--space-4xl);
}

.contact-hero__inner {
  width: 100%;
  max-width: 720px;
  margin-inline: auto;
  padding-inline: var(--container-pad-mobile);
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-md);
}

.contact-hero__wave {
  width: 40px;
  height: 12px;
  color: var(--color-corail);
  flex: none;
}

.contact-hero__wave svg {
  width: 100%;
  height: 100%;
  display: block;
}

.contact-hero h1 {
  margin-block-end: 0;
}

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

/* Coordonnées directes */
.contact-direct {
  background-color: var(--color-ivoire-chaud);
  padding-block: var(--space-4xl);
}

.contact-direct__inner {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--container-pad-mobile);
  display: flex;
  flex-direction: column;
  gap: var(--space-xl);
}

.contact-direct__inner h2 {
  margin-block-end: 0;
}

.contact-direct__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-lg);
  min-width: 0;
}

.contact-card {
  background-color: var(--color-blanc-casse);
  border: 1px solid var(--color-bleu-mediterranee-20);
  border-radius: var(--radius-base);
  box-shadow: var(--shadow-soft);
  padding: var(--space-lg);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-sm);
  min-width: 0;
  transition: transform var(--transition-base), box-shadow var(--transition-base);
}

.contact-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-soft-hover);
}

.contact-card__icon {
  width: 2.5rem;
  height: 2.5rem;
  border-radius: var(--radius-circle);
  background-color: var(--color-corail);
  color: var(--color-encre);
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
}

.contact-card__icon svg {
  width: 1.25rem;
  height: 1.25rem;
}

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

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

.contact-card__link {
  font-weight: 600;
  color: var(--color-bleu-mediterranee);
  text-decoration: none;
  overflow-wrap: break-word;
  word-break: break-word;
}

.contact-card__link:hover {
  color: var(--color-corail);
  text-decoration: underline;
  text-decoration-color: var(--color-corail);
}

.contact-card__address {
  font-style: normal;
  line-height: var(--text-body-leading);
}

/* Horaires d'ouverture */
.contact-hours {
  background-color: var(--color-terracotta-clair);
  padding-block: var(--space-4xl);
}

.contact-hours__inner {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--container-pad-mobile);
  display: flex;
  flex-direction: column;
  gap: var(--space-xl);
}

.contact-hours__inner h2 {
  margin-block-end: 0;
}

.contact-hours__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-xl);
  min-width: 0;
}

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

.contact-hours__column h3 {
  margin-block-end: 0;
}

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

.contact-hours__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.contact-hours__list li {
  display: flex;
  flex-direction: column;
  gap: var(--space-2xs);
  padding-block: var(--space-xs);
  border-bottom: 1px solid var(--color-bleu-mediterranee-20);
}

.contact-hours__list li:last-child {
  border-bottom: none;
}

.contact-hours__day {
  font-weight: 600;
  color: var(--color-bleu-mediterranee);
}

.contact-hours__time {
  font-variant-numeric: tabular-nums;
}

/* Réservation et demandes spéciales */
.contact-booking {
  background-color: var(--color-ivoire-chaud);
  padding-block: var(--space-4xl);
}

.contact-booking__inner {
  width: 100%;
  max-width: 720px;
  margin-inline: auto;
  padding-inline: var(--container-pad-mobile);
  display: flex;
  flex-direction: column;
  gap: var(--space-xl);
  text-align: left;
}

.contact-booking__inner h2 {
  margin-block-end: 0;
}

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

.contact-booking__block h3 {
  margin-block-end: 0;
}

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

.contact-booking__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.contact-booking__list li {
  position: relative;
  padding-inline-start: var(--space-xl);
}

.contact-booking__list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.6em;
  width: 1.5rem;
  height: 0.5rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 8' preserveAspectRatio='none'%3E%3Cpath d='M1 4 Q 6 0, 12 4 T 23 4' fill='none' stroke='%23E86A5A' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-size: 100% 100%;
}

/* Accès et localisation */
.contact-access {
  background-color: var(--color-terracotta-clair);
  padding-block: var(--space-4xl);
}

.contact-access__inner {
  width: 100%;
  max-width: 720px;
  margin-inline: auto;
  padding-inline: var(--container-pad-mobile);
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  text-align: center;
  align-items: center;
}

.contact-access__inner h2 {
  margin-block-end: 0;
}

.contact-access__inner h3 {
  margin-block-end: 0;
}

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

.contact-access__list {
  list-style: disc;
  margin: 0;
  padding-inline-start: var(--space-lg);
  text-align: left;
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
}

.contact-access__list li {
  margin-block-end: 0;
}

.contact-access__list li::marker {
  color: var(--color-corail);
}

/* Formulaire de contact */
.contact-form-section {
  background-color: var(--color-ivoire-chaud);
  padding-block: var(--space-4xl);
}

.contact-form-section__inner {
  width: 100%;
  max-width: 600px;
  margin-inline: auto;
  padding-inline: var(--container-pad-mobile);
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
  text-align: center;
  align-items: center;
}

.contact-form-section__inner h2 {
  margin-block-end: 0;
}

.contact-form-section__inner > p {
  margin-block-end: 0;
}

.contact-form {
  width: 100%;
  background-color: var(--color-blanc-casse);
  border: 1px solid var(--color-terracotta-30);
  border-radius: var(--radius-base);
  box-shadow: var(--shadow-soft);
  padding: var(--space-xl);
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
  text-align: left;
}

.contact-form__field {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
  min-width: 0;
}

.contact-form__field label {
  margin-block-end: 0;
}

.contact-form__field input,
.contact-form__field textarea {
  width: 100%;
  min-width: 0;
}

.contact-form__error {
  color: var(--color-corail);
  font-size: var(--text-small-size);
  line-height: var(--text-small-leading);
  margin-block-end: 0;
}

.contact-form__note {
  font-size: var(--text-small-size);
  line-height: var(--text-small-leading);
  color: var(--color-gris-bleute);
  margin-block-end: 0;
}

.contact-form__submit {
  align-self: flex-start;
  min-width: 0;
}

/* Rappel : Poker Offline */
.contact-poker-reminder {
  background-color: var(--color-card-lounge);
  padding-block: var(--space-4xl);
}

.contact-poker-reminder__inner {
  width: 100%;
  max-width: 720px;
  margin-inline: auto;
  padding-inline: var(--container-pad-mobile);
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  text-align: center;
  align-items: center;
}

.contact-poker-reminder__inner h2 {
  margin-block-end: 0;
}

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

.contact-poker-reminder__offline {
  color: var(--color-corail);
}

/* Appel à l'action final */
.contact-final-cta {
  background-color: var(--color-ivoire-chaud);
  padding-block: var(--space-4xl);
}

.contact-final-cta__inner {
  width: 100%;
  max-width: 720px;
  margin-inline: auto;
  padding-inline: var(--container-pad-mobile);
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
  text-align: center;
  align-items: center;
}

.contact-final-cta__inner h2 {
  margin-block-end: 0;
}

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

.contact-final-cta__buttons {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  width: 100%;
  max-width: 400px;
}

.contact-final-cta__buttons .btn {
  width: 100%;
  min-width: 0;
}

/* Tablet */
@media (min-width: 640px) {
  .contact-direct__grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space-lg);
  }

  .contact-hours__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-xl);
  }

  .contact-final-cta__buttons {
    flex-direction: row;
    justify-content: center;
    max-width: none;
  }

  .contact-final-cta__buttons .btn {
    width: auto;
  }
}

/* Desktop */
@media (min-width: 1024px) {
  .contact-hero__inner,
  .contact-direct__inner,
  .contact-hours__inner,
  .contact-booking__inner,
  .contact-access__inner,
  .contact-form-section__inner,
  .contact-poker-reminder__inner,
  .contact-final-cta__inner {
    padding-inline: var(--container-pad-desktop);
  }

  .contact-hero {
    padding-block: var(--space-5xl);
  }

  .contact-direct,
  .contact-hours,
  .contact-booking,
  .contact-access,
  .contact-form-section,
  .contact-poker-reminder,
  .contact-final-cta {
    padding-block: var(--space-5xl);
  }

  .contact-direct__grid {
    gap: var(--space-xl);
  }

  .contact-hours__grid {
    gap: var(--space-2xl);
  }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .contact-card {
    transition: none;
  }

  .contact-card:hover {
    transform: none;
    box-shadow: var(--shadow-soft);
  }
}