/* Ruban commun aux exemples : rappelle que le site est fictif et ramène au portfolio. */
.sk-ruban { position: fixed; left: 16px; bottom: 16px; z-index: 999; display: flex; align-items: center; gap: 10px; padding: 9px 16px 9px 10px; border-radius: 999px; background: rgba(14, 12, 22, 0.88); color: #fff; font: 600 14px/1.2 system-ui, sans-serif; text-decoration: none; box-shadow: 0 8px 30px rgba(0, 0, 0, 0.35); backdrop-filter: blur(8px); transition: transform 0.2s; }
.sk-ruban:hover { transform: translateY(-2px); }
.sk-ruban img { width: 26px; height: 26px; border-radius: 50%; }
.sk-ruban small { display: block; font-weight: 400; opacity: 0.7; }
@media (max-width: 600px) { .sk-ruban { left: 10px; right: 10px; bottom: 10px; justify-content: center; } }
#sk-toast { position: fixed; left: 50%; bottom: 80px; z-index: 1000; max-width: min(460px, 100% - 32px); padding: 12px 18px; border-radius: 14px; background: rgba(14, 12, 22, 0.94); color: #fff; font: 600 15px/1.4 system-ui, sans-serif; text-align: center; box-shadow: 0 12px 40px rgba(0, 0, 0, 0.35); transform: translate(-50%, 20px); opacity: 0; pointer-events: none; transition: 0.25s; }
#sk-toast.on { transform: translate(-50%, 0); opacity: 1; }