/* élection.fr : bandeau animé vers le quiz « À quel candidat ressemblent vos idées ? »
   Utilisé sur les pages Actualités, la FAQ et les pages de résultats électoraux. */
.qcta { position: relative; display: flex; align-items: center; gap: 14px; overflow: hidden; margin: 22px 0; padding: 14px 16px; border-radius: 14px; text-decoration: none !important; color: #fff; background: linear-gradient(120deg, #0f1830, #24396b 50%, #3a1f4f); background-size: 220% 220%; animation: qctaBg 9s ease-in-out infinite alternate; box-shadow: 0 12px 28px -16px rgba(15,24,48,0.85); transition: transform 0.2s, box-shadow 0.2s; font-family: inherit; line-height: 1.3; }
.qcta:hover { transform: translateY(-2px); box-shadow: 0 18px 34px -16px rgba(15,24,48,0.95); }
.qcta::before { content: ""; position: absolute; width: 160px; height: 160px; right: -40px; top: -80px; border-radius: 50%; background: #f39c12; filter: blur(42px); opacity: 0.35; animation: qctaOrb 6s ease-in-out infinite alternate; pointer-events: none; }
.qcta::after { content: ""; position: absolute; top: 0; bottom: 0; left: -40%; width: 30%; background: linear-gradient(90deg, transparent, rgba(255,255,255,0.12), transparent); transform: skewX(-20deg); animation: qctaSweep 5s ease-in-out infinite; pointer-events: none; }
.qcta-bars { position: relative; flex: 0 0 auto; display: flex; align-items: flex-end; gap: 4px; width: 46px; height: 46px; padding: 8px 9px; border-radius: 12px; background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.14); box-sizing: border-box; }
.qcta-bars i { display: block; flex: 1; border-radius: 3px 3px 1px 1px; transform-origin: bottom; animation: qctaBar 2.4s ease-in-out infinite; }
.qcta-bars i:nth-child(1) { height: 100%; background: linear-gradient(#ffd27a, #f39c12); }
.qcta-bars i:nth-child(2) { height: 70%; background: linear-gradient(#ff9a7a, #ff5f5f); animation-delay: -0.8s; }
.qcta-bars i:nth-child(3) { height: 85%; background: linear-gradient(#b9a2ff, #7b5cff); animation-delay: -1.6s; }
.qcta-txt { position: relative; flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.qcta-tag { align-self: flex-start; font-size: 0.6rem; font-weight: 800; letter-spacing: 1.3px; text-transform: uppercase; color: #ffbf47; }
.qcta-title { font-size: 1rem; font-weight: 900; color: #fff; }
.qcta-title em { font-style: normal; background: linear-gradient(90deg, #ffbf47, #ff7a59, #b07bff, #ffbf47); background-size: 300% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; animation: qctaShine 6s linear infinite; }
.qcta-sub { font-size: 0.76rem; color: #c9d4ea; }
.qcta-go { position: relative; flex: 0 0 auto; display: inline-flex; align-items: center; gap: 6px; padding: 9px 14px; border-radius: 10px; font-size: 0.82rem; font-weight: 800; color: #1a1205; background: linear-gradient(135deg, #ffbf47, #f39c12); animation: qctaPulse 2.6s ease-in-out infinite; white-space: nowrap; }
.qcta-go b { display: inline-block; animation: qctaArrow 1.4s ease-in-out infinite; }
@keyframes qctaBg { from { background-position: 0% 50%; } to { background-position: 100% 50%; } }
@keyframes qctaOrb { from { transform: translate(0, 0); } to { transform: translate(-60px, 40px); } }
@keyframes qctaSweep { 0%, 60% { left: -40%; } 100% { left: 130%; } }
@keyframes qctaBar { 0%, 100% { transform: scaleY(1); } 50% { transform: scaleY(0.45); } }
@keyframes qctaShine { to { background-position: 300% 0; } }
@keyframes qctaPulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(243,156,18,0.55); } 50% { box-shadow: 0 0 0 7px rgba(243,156,18,0); } }
@keyframes qctaArrow { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(4px); } }
@media (max-width: 560px) {
  .qcta { flex-wrap: wrap; }
  .qcta-txt { flex-basis: calc(100% - 60px); }
  .qcta-go { margin-left: 60px; }
}
@media (prefers-reduced-motion: reduce) {
  .qcta, .qcta::before, .qcta::after, .qcta-bars i, .qcta-title em, .qcta-go, .qcta-go b { animation: none; }
}