/* =========================================================
   Commentaires sous les cartes spectacles
   ========================================================= */
[data-grille] { align-items: start; } /* ouvrir un panneau n'étire pas les cartes voisines */

.spectacle__commentaires { border-top: 1px dashed var(--or-fonce); }
.commentaires__bouton {
  width: 100%; display: flex; justify-content: space-between; align-items: center; gap: 1rem;
  padding: .85rem 1.5rem; background: none; border: 0; cursor: pointer;
  color: var(--rouge); font-weight: 700; font-size: .98rem; text-align: left;
}
.commentaires__bouton:hover { background: rgba(139, 10, 26, .06); }
.commentaires__chevron {
  width: .6rem; height: .6rem; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
  transform: rotate(45deg); transition: transform var(--transition);
}
.commentaires__bouton[aria-expanded="true"] .commentaires__chevron { transform: rotate(-135deg); }

.commentaires__panneau { padding: 0 1.5rem 1.5rem; animation: deplier .25s ease; }
@keyframes deplier { from { opacity: 0; transform: translateY(-6px); } }

.commentaires__liste { list-style: none; padding: 0; display: grid; gap: .6rem; max-height: 320px; overflow-y: auto; margin-bottom: 1.25rem; }
.commentaires__info { font-style: italic; color: #5a3a2a; }
.commentaire { padding: .75rem .9rem; background: #fffaf0; border-left: 3px solid var(--or); border-radius: 0 6px 6px 0; }
.commentaire__entete { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .25rem .75rem; font-size: .9rem; }
.commentaire__pseudo { color: var(--rouge); }
.commentaire__entete time { color: #5a3a2a; font-style: italic; }
.commentaire__texte { margin: .3rem 0; overflow-wrap: anywhere; }
.commentaire__signaler { background: none; border: 0; padding: 0; font-size: .8rem; color: #6b5040; text-decoration: underline; cursor: pointer; }
.commentaire__signaler:disabled { text-decoration: none; cursor: default; }

.commentaires__formulaire { gap: .8rem; }
.commentaires__titre-form { font-family: var(--police-titre-2); font-weight: 700; color: var(--rouge); }
.commentaires__formulaire textarea { min-height: 100px; }
.commentaires__compteur, .commentaires__mention { font-size: .82rem; color: #5a3a2a; }
.commentaires__merci { padding: .6rem .8rem; background: #e7f4e4; border-left: 3px solid #3fae5a; color: #1f4d26; border-radius: 0 6px 6px 0; }
.commentaires__actions { display: flex; flex-wrap: wrap; gap: .5rem; }