@import "tailwindcss";

/* ================================
   Variables globales
   ================================ */

:root {
  --accent: #7c3aed;
  --accent-hover: #6d28d9;
}

/* ================================
   Article Wikipedia (HTML externe - ne peut pas être tailwindifié)
   ================================ */

.article-container {
  max-width: 700px;
  margin: 0 auto;
  padding: 28px 20px 80px;
  background: #fff;
  color: #202122;
  min-height: 100%;
}

.article-title {
  font-size: clamp(24px, 5vw, 32px);
  font-weight: 800;
  line-height: 1.2;
  margin-bottom: 4px;
  color: #000;
  border-bottom: 1px solid #a2a9b1;
  padding-bottom: 4px;
}

.wiki-link { color: #3366cc; text-decoration: none; cursor: pointer; }
.wiki-link:hover { text-decoration: underline; color: #0645ad; }

.article-content p { margin: 0 0 0.8em; line-height: 1.75; font-size: 15px; color: #202122; }
.article-content h2 { font-size: 22px; font-weight: normal; font-family: "Linux Libertine","Georgia",serif; border-bottom: 1px solid #a2a9b1; padding-bottom: 3px; margin: 20px 0 8px; color: #000; }
.article-content h3 { font-size: 17px; font-weight: bold; margin: 16px 0 6px; color: #000; }
.article-content h4 { font-size: 15px; font-weight: bold; margin: 12px 0 4px; }
.article-content ul, .article-content ol { padding-left: 28px; margin: 0 0 0.8em; }
.article-content li { margin-bottom: 4px; font-size: 15px; line-height: 1.6; }
.article-content b, .article-content strong { font-weight: bold; }
.article-content i, .article-content em { font-style: italic; }
.article-content figure { margin: 12px 0 16px; max-width: 100%; }
.article-content figure img { max-width: 100%; height: auto; border-radius: 4px; display: block; }
.article-content figcaption, .article-content .thumbcaption, .article-content .mw-file-description { font-size: 12px; color: #555; margin-top: 4px; font-style: italic; }
.article-content .thumb, .article-content .thumbinner { float: none !important; display: block; margin: 12px 0; max-width: 100%; }
.article-content .pcs-collapse-table-container { float: right; clear: right; margin: 0 0 16px 20px; max-width: 280px; width: 100%; font-size: 13px; }
.article-content .pcs-collapse-table-collapsed-container { display: none; }
.article-content .infobox, .article-content .infobox_v3 { width: 100% !important; max-width: 280px; border: 1px solid #a2a9b1; border-collapse: collapse; background: #f8f9fa; font-size: 13px; line-height: 1.5; }
.article-content .infobox td, .article-content .infobox th, .article-content .infobox_v3 td, .article-content .infobox_v3 th { padding: 4px 8px; border: 1px solid #a2a9b1; vertical-align: top; color: #202122; }
.article-content .infobox th, .article-content .infobox_v3 th, .article-content .entete { background: #eaecf0; font-weight: bold; text-align: center; }
.article-content .infobox img, .article-content .infobox_v3 img { max-width: 100%; height: auto; }
.article-content .toc, .article-content #toc { display: inline-block; background: #f8f9fa; border: 1px solid #a2a9b1; padding: 10px 16px; margin: 0 0 16px; font-size: 13px; min-width: 180px; }
.article-content .toc h2, .article-content #toc h2 { font-size: 14px; font-weight: bold; border: none; margin: 0 0 6px; padding: 0; }
.article-content .toc ul, .article-content #toc ul { margin: 0; padding-left: 16px; list-style: none; }
.article-content .toc li, .article-content #toc li { margin: 2px 0; font-size: 13px; }
.article-content .pcs-edit-section-header,
.article-content [style*="display:none"],
.article-content .noprint { display: none !important; }

@media (max-width: 500px) {
  .article-content .pcs-collapse-table-container { float: none; max-width: 100%; margin: 0 0 16px; }
  .article-content .infobox, .article-content .infobox_v3 { max-width: 100%; }
}

/* ================================
   Animations
   ================================ */

@keyframes fadeIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.5; } }
@keyframes countPop { from { transform: scale(1.3); opacity: 0.7; } to { transform: scale(1); opacity: 1; } }

.animate-fade-in { animation: fadeIn 200ms ease; }
.animate-count-pop { animation: countPop 0.3s ease; }
.animate-pulse-slow { animation: pulse 2s infinite; }
.spinner {
  width: 20px; height: 20px;
  border: 2px solid #2e2e2e;
  border-top-color: #7c3aed;
  border-radius: 50%;
  flex-shrink: 0;
  animation: spin 0.7s linear infinite;
}