<style>
.parchemin-prestige-container {
position: fixed;
bottom: 30px;
right: 30px;
z-index: 999999;
display: flex;
align-items: center;
justify-content: flex-end;
}
#papierMagique {
height: 55px;
width: 0;
background: #E6E6FA;
border-top: 4px double #C0C0C0;
border-bottom: 4px double #C0C0C0;
border-left: 12px solid #C0C0C0;
border-radius: 10px 0 0 10px;
display: flex;
align-items: center;
overflow: hidden;
transition: width 0.7s cubic-bezier(0.25, 1, 0.5, 1), opacity 0.5s;
opacity: 0;
margin-right: -35px;
box-shadow: -10px 10px 20px rgba(75, 0, 130, 0.2);
z-index: 5;
}
.parchemin-prestige-container.ouvert #papierMagique {
width: 600px;
opacity: 1;
}
.liens-zone {
display: flex;
align-items: center;
gap: 30px;
padding-left: 30px;
padding-right: 120px;
white-space: nowrap;
/* FONTS */
font-family: Verdana, Geneva, sans-serif;
}
.lien-magique {
color: #4B0082 !important;
text-decoration: none !important;
font-size: 13px; /* Verdana */
font-weight: bold;
transition: 0.3s;
}
.lien-magique:hover {
color: #DA70D6 !important;
transform: translateY(-2px);
}
#boutonSceau {
width: 70px;
height: 70px;
background: radial-gradient(circle, #4B0082, #1a0a33);
border: 2px solid #C0C0C0;
border-radius: 50%;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
z-index: 20;
box-shadow: 0 5px 15px rgba(0,0,0,0.6);
}
#boutonSceau::before {
content: '';
width: 22px;
height: 22px;
background: #C0C0C0;
clip-path: polygon(40% 0%, 40% 30%, 100% 30%, 100% 70%, 40% 70%, 40% 100%, 0% 50%);
transition: transform 0.6s ease, background 0.4s ease;
}
.parchemin-prestige-container.ouvert #boutonSceau::before {
transform: rotate(180deg);
background: #DA70D6;
}
</style>
<div class="parchemin-prestige-container" id="monParchemin">
<!-- © 2026 créé par Sorcière Corbeau en collaboration avec AI. -->
<div id="papierMagique">
<div class="liens-zone">
<a href="METTRE_VOTRE_URL_ICI" class="lien-magique"> ⭐Accueil</a>
<a href="METTRE_VOTRE_URL_ICI" class="lien-magique">⭐Astuces</a>
<a href="METTRE_VOTRE_URL_ICI" class="lien-magique">☕ Pause Café</a>
<a href="METTRE_VOTRE_URL_ICI" class="lien-magique">🌙 Contact</a>
</div>
</div>
<div id="boutonSceau" onclick="toggleMenu(event)"></div>
</div>
<script>
function toggleMenu(event) {
event.stopPropagation();
const p = document.getElementById('monParchemin');
p.classList.toggle('ouvert');
}
document.addEventListener('click', function(e) {
const container = document.getElementById('monParchemin');
if (container && !container.contains(e.target)) {
container.classList.remove('ouvert');
}
});
</script>
