/* =========================================================================
   DES COMPAGNONS ONT ANNOTE TES ARCHIVES (2026-10-29), voir annotations.js
   Pose sous la carte de connexion du profil, meme habillage qu'elle.
   Tout est prefixe anno- : rien de generique, rien a partager.
   ========================================================================= */
[hidden]{display:none !important}

.anno-volet{
  margin:0 0 1rem;
  background:rgba(30,20,18,.5);
  border:1px solid rgba(168, 137, 90,.15);
  border-radius:3px;
  color:#ebe1cf;
}
/* La refonte « pj » retire les marges de la page : on s'aligne sur la carte. */
body.pj .anno-volet{ margin:10px 30px 4px }
.anno-volet[open]{ border-color:rgba(168, 137, 90,.35) }

.anno-sommaire{
  display:flex; align-items:center; gap:.6rem;
  padding:.75rem 1.2rem;
  cursor:pointer; list-style:none;
}
.anno-sommaire::-webkit-details-marker{ display:none }
.anno-titre{
  font-family:var(--font-title, inherit);
  font-size:.95rem; letter-spacing:.03em; color:#ebe1cf;
}
.anno-volet:not([open]) .anno-titre{ color:#a8895a }
.anno-pastille{
  display:inline-grid; place-items:center; min-width:1.45em; height:1.45em; padding:0 .3em;
  border-radius:999px; font:600 .72rem/1 Comfortaa, system-ui, sans-serif; color:#efe6d2;
  background:radial-gradient(circle at 35% 30%, #8a3a58, #62243c 60%, #3d1424);
  box-shadow:0 1px 3px rgba(0,0,0,.45), inset 0 -2px 3px rgba(0,0,0,.35);
  animation:anno-pastille 2.4s ease-in-out infinite;
}
@keyframes anno-pastille{ 0%,100%{ transform:scale(1) } 50%{ transform:scale(1.08) } }
.anno-fleche{ margin-left:auto; color:#a8895a; transition:transform .25s }
.anno-volet[open] .anno-fleche{ transform:rotate(180deg) }

.anno-contenu{ padding:0 1.2rem 1rem }
.anno-liste{ list-style:none; margin:0; padding:0; display:grid; gap:.25rem }
.anno-volet--replie .anno-item:nth-child(n+4){ display:none }

.anno-item{
  display:flex; gap:.8rem; align-items:flex-start;
  padding:.65rem .75rem;
  border-radius:3px;
  border-left:2px solid #a8895a;
  background:rgba(168, 137, 90,.06);
  transition:background .25s, opacity .25s;
  min-width:0;
}
.anno-item:hover{ background:rgba(168, 137, 90,.1) }
.anno-item--lu{ border-left-color:rgba(107, 90, 76,.4); background:transparent; opacity:.72 }
.anno-item--lu:hover{ opacity:1; background:rgba(168, 137, 90,.06) }

.anno-qui{ flex-shrink:0; line-height:0 }
.anno-avatar{
  width:38px; height:38px; border-radius:50%; object-fit:cover;
  border:2px solid rgba(168, 137, 90,.45);
}
.anno-item--lu .anno-avatar{ border-color:rgba(107, 90, 76,.45) }
.anno-avatar--vide{
  display:grid; place-items:center; background:#3a1a26; color:#a8895a;
  font-size:1rem; line-height:1;
}

.anno-corps{ flex:1; min-width:0 }
.anno-tete{ margin:0; font-size:.88rem; color:#a8895a; line-height:1.4 }
.anno-tete a{ color:#ebe1cf; text-decoration:none }
.anno-tete a:hover{ color:#a8895a }
.anno-tete .anno-lien{ font-style:italic }
.anno-date{ margin-left:.5rem; font-size:.75rem; color:#6b5a4c; white-space:nowrap }
.anno-citation{
  margin:.3rem 0 0; padding-left:.6rem;
  border-left:1px solid rgba(168, 137, 90,.4);
  font-size:.8rem; font-style:italic; color:#a8895a;
  overflow-wrap:anywhere;
}
.anno-extrait{
  display:block; margin-top:.3rem;
  font-size:.86rem; line-height:1.45; color:#ebe1cf; text-decoration:none;
  overflow-wrap:anywhere;
}
.anno-extrait:hover{ color:#f3e6d2 }

.anno-pied{ display:flex; flex-wrap:wrap; gap:.6rem; justify-content:flex-end; margin-top:.6rem }
.anno-pied:empty{ display:none }
.anno-btn{
  padding:.3rem .8rem; border-radius:3px; cursor:pointer;
  font:inherit; font-size:.78rem;
  color:#a8895a; background:transparent;
  border:1px solid rgba(168, 137, 90,.35);
  transition:color .25s, border-color .25s;
}
.anno-btn:hover{ color:#ebe1cf; border-color:#a8895a }

@media (max-width:600px){
  body.pj .anno-volet{ margin:10px 12px 4px }
  .anno-sommaire{ padding:.7rem .9rem }
  .anno-contenu{ padding:0 .9rem .9rem }
  .anno-date{ display:block; margin:0 }
}
@media (prefers-reduced-motion: reduce){
  .anno-pastille{ animation:none }
  .anno-fleche, .anno-item{ transition:none }
}