.fond-grimoire-echos {
  background-image: url("../images/fonds/fond_grimoire_echos.webp");
  background-size: cover;          /* L’image couvre tout l’écran */
  background-position: center;     /* Centrée */
  background-attachment: fixed;    /* Reste fixe pendant le scroll */
  background-repeat: no-repeat;    /* Pas de répétition */
  color: #fff;                     /* Texte en blanc pour contraster */
}

/* ----------------- Article Hero ----------------- */
.texte-grimoire-echos .hero {
  background: rgba(10, 5, 15, 0.6);
  border: 2px solid rgba(207, 169, 77, 0.8);
  border-radius: 12px;
  padding: 2rem 2.5rem;
  box-shadow: 0 0 30px rgba(207, 169, 77, 0.5), 0 10px 20px rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(5px);
  position: relative;
  overflow: hidden;
}

.texte-grimoire-echos .hero::before {
  content: "";
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: radial-gradient(circle at center, rgba(255, 215, 0, 0.1) 0%, transparent 70%);
  transform: rotate(25deg);
  pointer-events: none;
}

.texte-grimoire-echos .hero h1 {
  font-family: 'Cinzel', serif;
  font-size: 2.5rem;
  color: #f3e8c0;
  text-shadow: 0 0 10px rgba(207, 169, 77, 0.7);
  margin-bottom: 1rem;
}

.texte-grimoire-echos .hero p {
  font-family: 'Cormorant Garamond', serif;
  font-size: 1.1rem;
  line-height: 1.7;
  color: #e6d7a3;
  text-shadow: 0 0 6px rgba(0,0,0,0.4);
}

.texte-grimoire-echos .hero:hover {
  box-shadow: 0 0 40px rgba(207, 169, 77, 0.7), 0 15px 30px rgba(0, 0, 0, 0.6);
  transform: translateY(-2px);
  transition: all 0.3s ease;
}

/* ----------------- Conteneur principal Grimoire ----------------- */
.grimoire-echos-container {
  display: flex;
  flex-direction: column;
  gap: 2rem;
  margin-top: 2rem;
  padding-bottom: 5rem; /* <-- espace pour que le bouton ne touche pas le footer */
}

.echos-form-section button {
  align-self: flex-start;
  padding: 0.6rem 1.8rem;
  background-color: #cfa94d;
  border: 2px solid #f3e8c0;
  border-radius: 8px;
  color: #111;
  font-weight: bold;
  font-family: 'Cinzel', serif;
  cursor: pointer;
  text-shadow: 0 0 5px rgba(207,169,77,0.6);
  transition: all 0.3s ease;
}

.echos-form-section button:hover {
  background-color: #e5d29d;
  box-shadow: 0 0 15px rgba(207,169,77,0.7), 0 5px 10px rgba(0,0,0,0.5);
  transform: translateY(-2px);
}


/* ----------------- Liste des échos ----------------- */
.echos-list {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  max-height: 400px;
  overflow-y: auto;
  padding: 1rem;
  background: rgba(10, 5, 15, 0.5);
  border-radius: 10px;
  box-shadow: inset 0 0 20px rgba(0,0,0,0.5);
}

.echos-list div {
  padding: 0.75rem 1rem;
  background: rgba(255,255,255,0.05);
  border-left: 3px solid #cfa94d;
  border-radius: 4px;
  font-family: 'Cormorant Garamond', serif;
  font-size: 1rem;
  color: #fff;
  text-shadow: 0 0 4px rgba(0,0,0,0.4);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.echos-list div:hover {
  transform: translateX(4px);
  box-shadow: 0 0 15px rgba(207, 169, 77, 0.5);
}

/* Scrollbar custom */
.echos-list::-webkit-scrollbar {
  width: 8px;
}
.echos-list::-webkit-scrollbar-thumb {
  background: rgba(207,169,77,0.6);
  border-radius: 4px;
}
.echos-list::-webkit-scrollbar-track {
  background: rgba(0,0,0,0.2);
}

/* ----------------- Formulaire ----------------- */
.echos-form-section {
  background: rgba(10, 5, 15, 0.6);
  border: 2px solid rgba(207, 169, 77, 0.8);
  border-radius: 10px;
  padding: 1.5rem 2rem;
  box-shadow: 0 0 25px rgba(207, 169, 77, 0.5), 0 8px 15px rgba(0,0,0,0.5);
}

.echos-form-section h2 {
  font-family: 'Cinzel', serif;
  font-size: 1.8rem;
  color: #f3e8c0;
  text-shadow: 0 0 8px rgba(207, 169, 77, 0.7);
  margin-bottom: 1rem;
}

.echos-form-section form {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.echos-form-section input,
.echos-form-section textarea {
  padding: 0.75rem;
  border-radius: 6px;
  border: none;
  background: rgba(255,255,255,0.1);
  color: #fff;
  font-family: 'Cormorant Garamond', serif;
  font-size: 1rem;
  resize: vertical;
}

.echos-form-section input::placeholder,
.echos-form-section textarea::placeholder {
  color: #ccc;
}

.echos-form-section button {
  align-self: flex-start;
  padding: 0.5rem 1.5rem;
  background-color: #cfa94d;
  border: none;
  border-radius: 6px;
  color: #111;
  font-weight: bold;
  cursor: pointer;
  transition: all 0.2s ease;
}

.echos-form-section button:hover {
  background-color: #e5d29d;
  transform: translateY(-2px);
}