/* CSS repris du design Yuna + styles de contenu (prose) pour glossaire/outils/articles */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600&display=swap');
body { font-family: 'Inter', sans-serif; background-color: #05080A; }
.no-scrollbar::-webkit-scrollbar { display: none; }
.no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }
@keyframes reveal { from { opacity: 0; transform: translateY(20px); filter: blur(8px); } to { opacity: 1; transform: translateY(0); filter: blur(0); } }
.reveal-on-scroll { animation: reveal 0.8s cubic-bezier(0.2, 0.8, 0.2, 1) both; animation-play-state: paused; }
.reveal-on-scroll.is-visible { animation-play-state: running; }
@keyframes pulse-ring { 0% { transform: scale(0.8); opacity: 0.8; } 50% { transform: scale(1.2); opacity: 0.4; } 100% { transform: scale(0.8); opacity: 0.8; } }
.marker-pulse { animation: pulse-ring 2s ease-in-out infinite; }
@keyframes marquee-scroll { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } }
.animate-marquee { display: flex; width: fit-content; animation: marquee-scroll 40s linear infinite; }
.group\/footer:hover .animate-marquee { animation-play-state: paused; }
@keyframes progress-loop { 0% { width: 0%; opacity: 0.5; } 20% { width: 10%; opacity: 1; } 100% { width: 100%; opacity: 0; } }

.font-geist { font-family: 'Geist', sans-serif !important; }

          .us-canvas canvas { width: 100% !important; height: 100% !important; display: block; transform: scale(1.2) translateX(8%); transform-origin: right center; }
        

/* Rendu du contenu WordPress (the_content) façon Yuna */
.prose-content{color:rgba(255,255,255,.8);line-height:1.75;font-size:1.02rem}
.prose-content h2{color:#fff;font-weight:600;font-size:1.6rem;margin:2.2rem 0 .9rem}
.prose-content h3{color:#fff;font-weight:600;font-size:1.25rem;margin:1.6rem 0 .6rem}
.prose-content p{margin:0 0 1rem}
.prose-content a{color:#c6f91f;text-decoration:underline;text-underline-offset:3px}
.prose-content ul,.prose-content ol{margin:0 0 1rem 1.25rem;display:flex;flex-direction:column;gap:.4rem}
.prose-content li{list-style:disc}
.prose-content table{width:100%;border-collapse:collapse;margin:1.2rem 0;font-size:.95rem}
.prose-content th,.prose-content td{border:1px solid rgba(255,255,255,.12);padding:.6rem .8rem;text-align:left}
.prose-content th{background:rgba(198,249,31,.08);color:#fff}
.prose-content code{background:rgba(255,255,255,.08);padding:.15rem .4rem;border-radius:.3rem;font-size:.9em}
.prose-content img{max-width:100%;height:auto;border-radius:.6rem}

/* --- FIABILITÉ : le contenu ne doit JAMAIS dépendre du JS pour être visible ---
   Le design masque les éléments .reveal-on-scroll (opacity:0, animation en pause) et
   les révèle via un IntersectionObserver au DOMContentLoaded. En WordPress les scripts
   du footer se chargent souvent APRÈS DOMContentLoaded -> l'observateur ne se crée pas
   -> hero invisible. On force donc l'animation à jouer au chargement (elle finit visible),
   avec repli sans animation pour prefers-reduced-motion. */
.reveal-on-scroll{animation-play-state:running !important}
/* GeneratePress met parfois les titres en capitales : on neutralise (les labels .uppercase de Tailwind restent, plus spécifiques) */
h1,h2,h3,h4{text-transform:none}
@media (prefers-reduced-motion:reduce){
  .reveal-on-scroll{animation:none !important;opacity:1 !important;transform:none !important;filter:none !important}
}

/* --- Sommaire (easy-table-of-contents) accordé au thème dark Yuna --- */
#ez-toc-container{
  background:#0B0F13 !important;border:1px solid rgba(255,255,255,.1) !important;
  border-radius:.75rem !important;box-shadow:none !important;padding:1.1rem 1.3rem !important;max-width:100% !important;
}
#ez-toc-container .ez-toc-title{color:#fff !important;font-weight:600 !important;font-family:inherit !important;text-transform:none !important;font-size:1rem !important}
#ez-toc-container nav a,#ez-toc-container a.ez-toc-link,#ez-toc-container .ez-toc-list a{color:rgba(255,255,255,.72) !important;text-decoration:none !important}
#ez-toc-container nav a:hover,#ez-toc-container a.ez-toc-link:hover,#ez-toc-container a.ez-toc-link.active{color:#c6f91f !important}
#ez-toc-container .ez-toc-list li{margin:.35rem 0 !important;line-height:1.5 !important}
#ez-toc-container.ez-toc-counter nav li::before,#ez-toc-container .ez-toc-counter{color:rgba(255,255,255,.45) !important}
#ez-toc-container .ez-toc-toggle{background:transparent !important;border:1px solid rgba(255,255,255,.18) !important;border-radius:.4rem !important}
#ez-toc-container .ez-toc-toggle svg{fill:#c6f91f !important;color:#c6f91f !important}