/* ===== Corps de la page ===== */
html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  background: black;
  font-family: gigi, sans-serif;
  box-sizing: border-box;
}

body {
  display: flex;
  flex-direction: column; /* menu en haut + article en dessous */
  min-height: 100vh;
}

/* Menu */
header {
  width: 100%;
  /* styles du menu ici */
}

/* Article central (remplace container) */
article {
  flex: 1; /* prend tout l'espace restant sous le menu */
  display: flex;
  justify-content: center; /* centre horizontalement */
  align-items: center;     /* centre verticalement */
  padding: 20px;
  box-sizing: border-box;
}

/* Contenu interne de l'article */
article > .content {
  width: 100%;
  max-width: 900px; /* largeur max sur grands écrans */
  background: #008B8B;
  border-radius: 16px;
  padding: 20px;
  font-weight: bold;
  color: #111;
  display: flex;
  flex-direction: column;
  gap: 20px;
  box-shadow: 0 6px 18px rgba(20,30,50,0.1);
}

/* Section ou carte */
.card {
  background: #008B8B;
  border-radius: 12px;
  box-shadow: 0 6px 18px rgba(20,30,50,0.06);
  padding: 18px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* Formulaire */
input[type="text"],
textarea {
  width: 100%;
  padding: 10px;
  border: 1px solid #e3e7ef;
  border-radius: 8px;
  font-size: 1rem;
  background: #FFFAF0;
  box-sizing: border-box;
}

textarea {
  min-height: 120px;
  resize: vertical;
}

/* Bouton */
button {
  background: black;
  color: #fff;
  border: none;
  padding: 10px 14px;
  border-radius: 10px;
  font-weight: 600;
  cursor: pointer;
  align-self: flex-start;
}

/* Messages */
.errors {
  background: #ffecec;
  border: 1px solid #f5c2c2;
  padding: 10px;
  border-radius: 8px;
  color: #7a1a1a;
}

.success {
  background: #e9f7ef;
  border: 1px solid #bde7c8;
  padding: 10px;
  border-radius: 8px;
  color: #125f2c;
}

/* Commentaires */
.comment {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.name {
  font-weight: 700;
}

.timestamp {
  font-size: 0.85rem;
  color: #fff;
}

.rating {
  color: #f39c12;
}

/* ===== Responsive ===== */
@media (max-width: 1024px) {
  article {
    padding: 18px;
  }

  article > .content {
    padding: 18px;
  }

  .card {
    padding: 14px;
  }

  button {
    align-self: stretch;
  }
}

@media (max-width: 768px) {
  article > .content {
    width: 95%;
    padding: 15px;
  }

  input[type="text"],
  textarea {
    font-size: 0.95rem;
  }

  button {
    font-size: 0.95rem;
    padding: 10px;
  }
}

@media (max-width: 480px) {
  article > .content {
    width: 100%;
    padding: 10px;
  }

  .card {
    padding: 12px;
  }

  input[type="text"],
  textarea {
    font-size: 0.9rem;
  }

  button {
    font-size: 0.9rem;
    padding: 8px;
  }

  .comment {
    font-size: 0.9rem;
  }
}