/* ============================================================================
   style-guestbook.css — Livre d'or Altawayama
   ----------------------------------------------------------------------------
   Charge uniquement sur la page livre-dor.php (et composants guestbook-form /
   guestbook-list). Extrait de style.css pour alleger le CSS des autres pages.
   ============================================================================ */

.guestbook-container {
  max-width: 900px;
  margin: 40px auto;
  background: #fffefa;
  border: 1px solid #e0dcd3;
  padding: 15px 30px;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.05);
}

.guestbook-container h2, .guestbook-container h3 {
  text-align: center;
  color:#d5900d;
  font-family:'BeauRivage', Georgia, serif;
  font-size:2.000em;
  margin-bottom: 0px;
  margin-top:0;
  line-height:normal;
}

.guestbook-form label {
  display: block;
  margin-bottom: 3px;
  color: #444;
  font-weight: 400;
}

.guestbook-form input[type="text"],
.guestbook-form input[type="number"],
.guestbook-form textarea {
  width: 100%;
  padding: 10px;
  margin-top: 0;
  border: 1px solid #bbb;
  border-radius: 4px;
  margin-bottom: 5px;
  font-size: 1.200em;
  transition: border-color 0.3s ease;
}

.guestbook-form input:focus,
.guestbook-form textarea:focus {
  border-color: var(--c_hex_c4422e);
  outline: none;
}

.guestbook-form textarea {
  resize: vertical;
}

.guestbook-form button {
  background-color: var(--c_hex_c4422e);
  color: var(--c_hex_fff);
  font-weight: 400;
  font-size: 1em;
  padding: 8px 16px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  display: block;
  margin: 0 auto;
  transition: background-color 0.3s ease;
}

.guestbook-form button:hover {
  background-color: #a8321a;
}

.guestbook-success {
  background-color: #e9fce6;
  border: 1px solid #8bc34a;
  color: #33691e;
  padding: 12px 20px;
  margin-bottom: 20px;
  border-radius: 4px;
  font-weight: bold;
  animation: fadeIn 1s ease-in;
  text-align: center;
}

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(-10px); }
  to { opacity: 1; transform: translateY(0); }
}

.guest-title {
  color:#d5900d;
  font-family:'BeauRivage', Georgia, serif;
  font-size:1.900em;
  margin-bottom: 10px;
}

.guestbook-error {
  background-color: #ffecec;
  border: 1px solid #f44336;
  color: #b71c1c;
  padding: 12px 20px;
  margin-bottom: 20px;
  border-radius: 4px;
  font-weight: bold;
  animation: fadeIn 0.5s ease-in;
  text-align: center;
}

.guestbook-separator {
  text-align: center;
  color: #bbb;
  font-size: 1.2em;
  margin: 25px 0;
  letter-spacing: 2px;
}

.guestbook-meta {
  display: flex;
  align-items: center;
  margin-bottom: 8px;
}

.guestbook-header-line {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  width: 100%;
  margin-bottom: 5px;
}

.guestbook-avatar {
  width: 42px;
  height: 42px;
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  background-color: #ccc;
  color: white;
  font-weight: bold;
  font-size: 1.1em;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 12px;
  box-shadow: 0 0 4px rgba(0,0,0,0.1);
  text-transform: uppercase;
  line-height: 1;
}

.guestbook-name {
  font-weight: bold;
  color: #333;
}

.guestbook-date {
  font-size: 0.9em;
  color: #777;
  white-space: nowrap;
}

#toggle-preview {
  background-color: var(--c_hex_71a78b);
  color: white;
  border: none;
  border-radius: 6px;
  padding: 6px 10px;
  font-size: 1em;
  cursor: pointer;
  box-shadow: 0 3px 6px rgba(0,0,0,0.1);
  transition: background 0.3s ease, transform 0.2s ease;
}

#toggle-preview:hover {
  background-color: #5C8971;
  transform: scale(1.00);
}

#toggle-preview:focus {
  outline: none;
  box-shadow: 0 0 0 2px rgba(196,66,46,0.5);
}