/* Styles pour les popups de résumé des liens extraits */

.extrait-popup {
   position: absolute;
   background: linear-gradient(135deg, #f3eed2 0%, #dfd5aa 100%);
   color: black;
   padding: 15px 20px;
   border-color: black;
   border-width: 1px;
   border-style: solid;
   border-radius: 12px;
   box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
   max-width: 350px;
   width: max-content;
   z-index: 100005;
   font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
   font-size: 14px;
   line-height: 1.6;
   opacity: 0;
   transform: translateY(-10px);
   transition:
      opacity 0.3s ease,
      transform 0.3s ease;
   pointer-events: none;
   backdrop-filter: blur(10px);
}

.extrait-popup.large {
   max-width: 650px;
}

.extrait-popup.visible {
   opacity: 1;
   transform: translateY(0);
   pointer-events: auto;
}

/* Flèche du popup */
.extrait-popup::after,
.extrait-popup::before {
   content: "";
   position: absolute;
   left: var(--arrow-left, 19px);
   width: 0;
   height: 0;
   border-left: 9px solid transparent;
   border-right: 9px solid transparent;
   z-index: -1;
}

/* Positionnement dynamique de la flèche */
/* Quand le popup est AU-DESSUS du lien (flèche en bas) */
.extrait-popup[style*="--arrow-position: bottom"]::after {
   bottom: -9px;
   border-top: 9px solid black;
   border-bottom: none;
}
.extrait-popup[style*="--arrow-position: bottom"]::before {
   bottom: -8px;
   border-top: 8px solid #dfd5aa;
   border-bottom: none;
   z-index: 0;
   left: calc(var(--arrow-left, 19px) + 1px);
}

/* Quand le popup est EN-DESSOUS du lien (flèche en haut) */
.extrait-popup[style*="--arrow-position: top"]::after {
   top: -9px;
   border-bottom: 9px solid black;
   border-top: none;
}
.extrait-popup[style*="--arrow-position: top"]::before {
   top: -8px;
   border-bottom: 8px solid #f3eed2;
   border-top: none;
   z-index: 0;
   left: calc(var(--arrow-left, 19px) + 1px);
}

.extrait-popup-content {
   max-height: 60vh;
   overflow-y: auto;
   padding-right: 10px;
}

/* Style de la scrollbar pour rester dans l'esthétique */
.extrait-popup-content::-webkit-scrollbar {
   width: 6px;
}
.extrait-popup-content::-webkit-scrollbar-thumb {
   background: rgba(0, 0, 0, 0.2);
   border-radius: 3px;
}

.extrait-popup-title {
   font-weight: 600;
   font-size: 15px;
   margin-bottom: 8px;
   padding-bottom: 8px;
   border-bottom: 1px solid rgba(255, 255, 255, 0.3);
}

.extrait-popup-content {
   font-size: 13px;
   line-height: 1.5;
}

/* Style pour les liens avec popup */
a[href*="extraits/"]:not(.analysis-link),
a[href*="podcast/"],
a.info-link {
   position: relative;
   text-decoration: underline;
   text-decoration-style: dotted;
   text-decoration-color: currentColor;
   transition: text-decoration-color 0.2s ease;
   cursor: help;
}

a[href*="extraits/"]:not(.analysis-link):hover,
a[href*="podcast/"]:hover,
a.info-link:hover {
   text-decoration-style: solid;
}