/* ==========================================================================
   contact.css — Très simple : un titre, quatre boutons, un grand Polaroid
   ========================================================================== */
.contact {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: clamp(40px, 7vw, 110px);
  align-items: center;
  min-height: calc(100svh - var(--header-h) - 120px);
  padding-block: clamp(40px, 6vw, 80px);
}
.contact .display { margin-bottom: 1.5rem; max-width: 9em; }
.contact .lead { margin-bottom: 2.4rem; }

.contact-links { display: grid; gap: 12px; max-width: 400px; }
.contact-link {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.95rem 1.2rem;
  border: 1.5px solid var(--ink);
  text-decoration: none;
  font-weight: 500;
  transition: background-color 0.3s ease, color 0.3s ease, rotate 0.3s ease, translate 0.3s ease;
}
.contact-link:hover { background: var(--paper); color: var(--paper-ink); border-color: var(--paper); rotate: -0.8deg; translate: 4px 0; }
.contact-link.is-unset { border-style: dashed; opacity: 0.55; cursor: not-allowed; }
.contact-link.is-unset:hover { background: transparent; color: var(--ink); border-color: var(--ink); rotate: 0deg; translate: 0 0; }

.contact__photo { position: relative; max-width: 440px; width: 100%; margin-left: auto; }
.contact__heart { top: -26px; left: -22px; --rot: -12deg; }
.contact__sparkle { bottom: 90px; right: -34px; --rot: 8deg; width: clamp(30px, 3.6vw, 44px); }

@media (max-width: 900px) {
  .contact { grid-template-columns: 1fr; min-height: 0; }
  .contact__photo { margin: 20px auto 0; max-width: 340px; }
}
@media (max-width: 640px) {
  .contact-links { max-width: none; }
  .contact__photo { max-width: 290px; }
}

/* ==========================================================================
   Avis (formulaire + liste)
   ========================================================================== */
.reviews {
  padding-block: clamp(40px, 6vw, 80px);
  border-top: 1.5px solid var(--line);
}
.reviews__head { max-width: 640px; margin-bottom: clamp(28px, 4vw, 44px); }
.reviews__head h2 { font-family: var(--font-title); font-size: clamp(1.6rem, 2.6vw, 2.2rem); margin-bottom: 0.6rem; }
.reviews__head .lead { margin-bottom: 0; }

/* --- Formulaire --- */
.reviews__form {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px 24px;
  max-width: 640px;
  padding: clamp(24px, 3vw, 34px);
  margin-bottom: clamp(40px, 5vw, 60px);
  --sheet-bg: var(--paper);
  border-radius: 4px;
  rotate: -0.4deg;
}
.reviews__row { display: flex; flex-direction: column; gap: 6px; }
.reviews__row--full { grid-column: 1 / -1; }
.reviews__row label {
  font-family: var(--font-hand);
  font-size: 1.15rem;
  color: var(--paper-ink);
}
.reviews__row input,
.reviews__row select,
.reviews__row textarea {
  font-family: var(--font-body);
  font-size: 0.95rem;
  color: var(--paper-ink);
  background: rgba(255, 255, 255, 0.4);
  border: 1.5px solid var(--paper-ink-soft);
  border-radius: 3px;
  padding: 0.6rem 0.75rem;
  resize: vertical;
}
.reviews__row input:focus,
.reviews__row select:focus,
.reviews__row textarea:focus {
  outline: none;
  border-color: var(--accent-deep);
}
/* Piège anti-bot : invisible pour les humains, visible pour les robots */
.reviews__hp {
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}
.reviews__form .btn { grid-column: 1 / -1; justify-self: start; margin-top: 6px; }
.reviews__status {
  grid-column: 1 / -1;
  font-family: var(--font-hand);
  font-size: 1.05rem;
  color: var(--paper-ink-soft);
  min-height: 1.2em;
  margin: 0;
}

/* Le bouton du formulaire d'avis est sur fond papier clair : on force les
   couleurs "encre papier" au lieu des couleurs "encre page" (invisibles ici). */
.reviews__form .btn {
  border-color: var(--paper-ink);
  color: var(--paper-ink);
  background: transparent;
}
.reviews__form .btn:hover {
  background: var(--paper-ink);
  color: var(--paper);
}

/* --- Liste des avis --- */
.reviews__list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 20px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.review-card {
  border: 1.5px solid var(--ink);
  border-radius: 4px;
  padding: 1.1rem 1.2rem;
  display: flex;
  flex-direction: column;
  gap: 8px;
  transition: translate 0.25s ease, box-shadow 0.25s ease;
}
.review-card:hover { translate: 0 -3px; box-shadow: 4px 6px 0 var(--accent-deep); }
.review-card__stars { color: var(--accent); font-size: 1rem; letter-spacing: 2px; }
.review-card__message { font-size: 0.95rem; line-height: 1.5; color: var(--ink); }
.review-card__name { font-family: var(--font-hand); font-size: 1.2rem; color: var(--ink-soft); margin-top: auto; }
.review-card--empty { color: var(--ink-soft); font-style: italic; border-style: dashed; }

@media (max-width: 640px) {
  .reviews__form { grid-template-columns: 1fr; rotate: 0deg; }
  .reviews__list { grid-template-columns: 1fr; }
}