/* layout.css */
html,body{height:100%; background:var(--bg); color:var(--text); font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; }

.main-container{
    min-height:100vh; display:flex; align-items:stretch;
}

.sidebar{
    width:280px; background:var(--surface); border-right:1px solid var(--border);
    padding:var(--space-6); position:sticky; top:0; height:100vh; overflow:auto;
}

.content{
    flex:1; padding:clamp(16px, 2vw, 28px);
}

.header{
    /*display:flex;*/
    /*align-items:center; justify-content:space-between;*/
    margin-bottom:var(--space-6);
}

.header .title{
    font-size:var(--fs-24); font-weight:800; letter-spacing:.2px;
}

.grid-2col{
    display:grid; gap:var(--space-4);
    grid-template-columns: 1.4fr .6fr;
}
@media (max-width: 1100px){ .grid-2col{ grid-template-columns: 1fr; } }


/* Quand le mode licorne est actif, on masque le curseur natif */
body.unicorn-active {
    cursor: none;
}

/* La "licorne" qui remplace le curseur */
.unicorn-cursor {
    position: fixed;
    left: 0;
    top: 0;
    transform: translate(-50%, -50%);
    pointer-events: none;
    z-index: 9999;
    font-size: 32px; /* tu peux augmenter si tu veux une grosse licorne */
    user-select: none;
}

/* Paillettes de la licorne */
.unicorn-sparkle {
    position: fixed;
    left: 0;
    top: 0;
    transform: translate(-50%, -50%);
    pointer-events: none;
    z-index: 9998;
    border-radius: 50%;
    background: radial-gradient(circle, #fff 0%, #ffddff 40%, rgba(255, 0, 255, 0) 70%);
    opacity: 0.9;
    animation: unicorn-spark 600ms ease-out forwards;
}

/* Animation des paillettes (grossissent et disparaissent) */
@keyframes unicorn-spark {
    0% {
        transform: translate(-50%, -50%) scale(0.3);
        opacity: 1;
    }
    70% {
        opacity: 0.9;
    }
    100% {
        transform: translate(-50%, -50%) scale(1.8);
        opacity: 0;
    }
}