h1{
text-align: center;
margin-top: 60px;
margin-bottom: 60px;
font-size: 2.4rem;
color: var(--text);
font-family: 'Montserrat', sans-serif;
font-weight: 900;
}

main p{
font-size: 1.4em;
width: 75%;
}

main p:hover{
  color:#FF7A59;
  opacity: 0.6;
}

footer {
  margin-top: 80px;
}


/* commence le système de réponse avec slide descendant */
.question {
  cursor: pointer;
  padding: 10px;
  margin: 0 0 10px 20px;
  font-weight: bold;
}

/* réponse : on anime height + padding pour une transition douce */
.reponse {
  max-height: 0;
  overflow: hidden;
  padding: 0 10px 0 30px;
  margin: 0 0 10px 20px;
  width: 90%;
  font-size: 1.2em;
  border-left: 2px solid #ddd;
  transition:
    max-height 600ms cubic-bezier(.25,.8,.25,1),
    padding 400ms cubic-bezier(.25,.8,.25,1),
    border-color 200ms linear;
}

.reponse.ouvert {
  max-height: 800px; /* valeur arbitraire plus grande que la plus longue réponse */
  padding: 10px 10px 10px 30px;
  border-color: #999;
  transition:
    max-height 1200ms cubic-bezier(.4,0,.2,1),
    padding 400ms cubic-bezier(.4,0,.2,1),
    border-color 200ms linear;
}

.reponse a{
  text-decoration: none;
  color:var(--accent);
}

/* fin du système slide descendant */

/* effet glow lors de l'ouverture de la question depuis autre page pour bien reperer la question */
.question.auto-focus {
  background: rgba(255, 122, 89, 0.08);
  border-radius: 8px;
  transition: background 0.8s ease;
}

.question.auto-focus {
  animation: fadeHighlight 5s ease forwards;
}

@keyframes fadeHighlight {
  0% { background: rgba(255, 122, 89, 0.15); }
  100% { background: transparent; }
}