/* Styles de base */
body {
    margin: 0;
    padding: 0;
    min-height: 100vh;
    background-color: white;
    font-family: 'Poppins', sans-serif;
    cursor: url('./media/baton.png') 20 20, auto;
    overflow: hidden;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

/* Conteneur des stats */
.stats-container {
    position: fixed;
    top: 30px;
    left: 0;
    right: 0;
    display: flex;
    justify-content: center;
    z-index: 100;
}

.total-hits {
    display: flex;
    align-items: center;
    gap: 20px;
    font-size: 32px;
    font-weight: 600;
    color: #333;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.counter-label {
    font-size: 0.9em;
    color: #666;
    animation: policeRoll 20s infinite;
    padding-right: 10px;
}

/* Style pour le /??? */
.goal {
    color: #666;
    font-size: 0.9em;
    margin-left: 5px;
}

@keyframes policeRoll {
    0% { content: "🚓"; }
    33% { content: "🚔"; }
    66% { content: "🚨"; }
    100% { content: "🚓"; }
}

.online-counter {
    position: fixed;
    bottom: 20px;
    right: 20px;
    background: rgba(255, 255, 255, 0.9);
    padding: 8px 15px;
    border-radius: 20px;
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

.online-icon {
    width: 16px;
    height: 16px;
    object-fit: contain;
}

.online-dot {
    fill: #4CAF50;
    animation: pulse 2s infinite;
}

.online-ring {
    stroke: #4CAF50;
    opacity: 0.3;
}

/* Zone de l'œuf */
main {
    height: 90vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 20px;
    margin-top: -5vh;
}

.game-title {
    text-align: center;
}

.title-text {
    font-size: 24px;
    font-weight: 600;
    color: #333;
}

/* Emoji en colère */
.angry-emoji {
    font-size: 30px;
    margin-left: 10px;
    display: inline-block;
    animation: angryEmoji 2s infinite;
}

#clickable-zone {
    position: relative;
    cursor: url('./media/baton.png') 20 20, auto;
    width: 180px;
    height: 180px;
    display: flex;
    justify-content: center;
    align-items: center;
}

#egg-image {
    width: 100%;
    height: 100%;
    object-fit: contain;
    transition: transform 0.1s;
}

.hit-effect {
    position: absolute;
    display: none;
    font-size: 50px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    pointer-events: none;
    animation: hitEffect 0.5s forwards;
}

.click-instruction {
    position: absolute;
    bottom: -30px;
    left: 50%;
    transform: translateX(-50%);
    text-align: center;
    color: #666;
    font-style: italic;
    width: 100%;
    white-space: nowrap;
}

/* Animations */
@keyframes pulse {
    0% { opacity: 1; }
    50% { opacity: 0.6; }
    100% { opacity: 1; }
}

@keyframes angryEmoji {
    0% { 
        transform: scale(1) rotate(0deg);
    }
    10% {
        transform: scale(1.2) rotate(-10deg);
    }
    20% {
        transform: scale(1.2) rotate(10deg);
    }
    30% {
        transform: scale(1.2) rotate(-10deg);
    }
    40% {
        transform: scale(1) rotate(0deg);
    }
    50% {
        transform: translateY(0);
    }
    60% {
        transform: translateY(-5px);
    }
    70% {
        transform: translateY(0);
    }
    80% {
        transform: translateY(-5px);
    }
    90% {
        transform: translateY(0);
    }
    100% {
        transform: scale(1) rotate(0deg);
    }
}

/* Animation quand on frappe l'œuf */
#egg-image.hit {
    animation: shake 0.5s, squish 0.5s;
}

@keyframes shake {
    0%, 100% { transform: translateX(0) rotate(0deg); }
    25% { transform: translateX(-10px) rotate(-5deg); }
    75% { transform: translateX(10px) rotate(5deg); }
}

@keyframes squish {
    50% { transform: scale(0.8, 1.2); }
}

/* Animation de l'effet de coup */
@keyframes hitEffect {
    0% {
        transform: translate(-50%, -50%) scale(0);
        opacity: 1;
    }
    100% {
        transform: translate(-50%, -50%) scale(2);
        opacity: 0;
    }
}

/* Effets spéciaux secrets */
.special-message {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 32px;
    z-index: 1000;
    animation: floatUp 2s forwards;
}

/* Effet arc-en-ciel */
.rainbow {
    animation: rainbowEffect 1s infinite !important;
}

/* Effet explosion */
.explosion {
    animation: explode 0.5s forwards !important;
}

/* Effet matrix */
.matrix {
    animation: matrixSpin 1s infinite !important;
    filter: brightness(1.2) hue-rotate(90deg);
}

/* Effet tremblement de terre */
.earthquake {
    animation: earthquakeShake 0.5s infinite !important;
}

/* Effet doré */
.golden {
    filter: sepia(1) hue-rotate(45deg) brightness(1.5) !important;
    animation: goldenPulse 1s infinite !important;
}

/* Effet nice */
.nice {
    animation: niceWiggle 0.5s infinite !important;
}

@keyframes floatUp {
    0% { transform: translate(-50%, -50%) scale(1); opacity: 1; }
    100% { transform: translate(-50%, -200%) scale(2); opacity: 0; }
}

@keyframes rainbowEffect {
    0% { filter: hue-rotate(0deg); }
    100% { filter: hue-rotate(360deg); }
}

@keyframes explode {
    0% { transform: scale(1); }
    50% { transform: scale(1.5); }
    100% { transform: scale(1); }
}

@keyframes matrixSpin {
    0% { transform: perspective(500px) rotateY(0deg); }
    100% { transform: perspective(500px) rotateY(360deg); }
}

@keyframes earthquakeShake {
    0%, 100% { transform: translate(0, 0); }
    25% { transform: translate(-15px, 15px); }
    50% { transform: translate(15px, -15px); }
    75% { transform: translate(-15px, -15px); }
}

@keyframes goldenPulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.1); }
}

@keyframes niceWiggle {
    0%, 100% { transform: rotate(0deg) scale(1); }
    25% { transform: rotate(-15deg) scale(1.1); }
    75% { transform: rotate(15deg) scale(1.1); }
}

/* Nouveaux effets spéciaux */
.dizzy {
    animation: dizzyEffect 1s infinite !important;
}

.bounce {
    animation: bounceEffect 0.5s infinite !important;
}

.glitch {
    animation: glitchEffect 0.5s infinite !important;
}

.spin {
    animation: spinEffect 0.5s infinite !important;
}

.dance {
    animation: danceEffect 1s infinite !important;
}

.neon {
    animation: neonEffect 1s infinite !important;
    filter: brightness(1.5) contrast(1.2) !important;
    box-shadow: 0 0 20px rgba(0, 255, 255, 0.8) !important;
}

.pixel {
    image-rendering: pixelated !important;
    animation: pixelEffect 1s infinite !important;
}

.ghost {
    animation: ghostEffect 2s infinite !important;
    opacity: 0.7 !important;
}

.ultimate {
    animation: ultimateEffect 0.5s infinite !important;
    filter: contrast(1.5) brightness(1.2) saturate(1.5) !important;
}

@keyframes dizzyEffect {
    0%, 100% { transform: rotate(0deg) scale(1); }
    25% { transform: rotate(45deg) scale(1.1); }
    50% { transform: rotate(-45deg) scale(0.9); }
    75% { transform: rotate(-90deg) scale(1.1); }
}

@keyframes bounceEffect {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-30px); }
}

@keyframes glitchEffect {
    0% { transform: translate(0); }
    20% { transform: translate(-5px, 5px); }
    40% { transform: translate(-5px, -5px); }
    60% { transform: translate(5px, 5px); }
    80% { transform: translate(5px, -5px); }
    100% { transform: translate(0); }
}

@keyframes spinEffect {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

@keyframes danceEffect {
    0%, 100% { transform: translateY(0) rotate(0); }
    25% { transform: translateY(-10px) rotate(-5deg); }
    50% { transform: translateY(0) rotate(0); }
    75% { transform: translateY(-10px) rotate(5deg); }
}

@keyframes neonEffect {
    0%, 100% { filter: brightness(1.5) contrast(1.2); }
    50% { filter: brightness(1.8) contrast(1.4); }
}

@keyframes pixelEffect {
    0%, 100% { transform: scale(1); image-rendering: pixelated; }
    50% { transform: scale(1.1); image-rendering: pixelated; }
}

@keyframes ghostEffect {
    0%, 100% { transform: translateY(0) scale(1); opacity: 0.7; }
    50% { transform: translateY(-20px) scale(1.1); opacity: 0.3; }
}

@keyframes ultimateEffect {
    0% { transform: scale(1) rotate(0deg); filter: hue-rotate(0deg); }
    25% { transform: scale(1.2) rotate(90deg); filter: hue-rotate(90deg); }
    50% { transform: scale(1) rotate(180deg); filter: hue-rotate(180deg); }
    75% { transform: scale(1.2) rotate(270deg); filter: hue-rotate(270deg); }
    100% { transform: scale(1) rotate(360deg); filter: hue-rotate(360deg); }
}

/* Nouveaux effets épiques */
.superSaiyan {
    animation: superSaiyanEffect 0.5s infinite !important;
    filter: brightness(1.5) contrast(1.3) saturate(1.5) !important;
    box-shadow: 0 0 50px gold !important;
}

.thanos {
    animation: thanosEffect 2s infinite !important;
    filter: hue-rotate(270deg) brightness(1.2) !important;
}

.nuclear {
    animation: nuclearEffect 0.3s infinite !important;
    filter: brightness(2) sepia(1) hue-rotate(50deg) !important;
}

.galaxy {
    animation: galaxyEffect 3s infinite !important;
    filter: brightness(1.5) contrast(1.2) saturate(1.5) !important;
}

.blackHole {
    animation: blackHoleEffect 1s infinite !important;
    filter: invert(0.8) hue-rotate(180deg) !important;
}

.multiverse {
    animation: multiverseEffect 0.5s infinite !important;
    filter: brightness(1.5) saturate(2) !important;
}

.godMode {
    animation: godModeEffect 0.3s infinite !important;
    filter: brightness(2) contrast(1.5) !important;
    box-shadow: 0 0 100px white !important;
}

.ascended {
    animation: ascendedEffect 2s infinite !important;
    filter: brightness(1.8) saturate(1.5) sepia(0.3) !important;
}

.infinity {
    animation: infinityEffect 0.2s infinite !important;
    filter: contrast(2) brightness(2) saturate(2) !important;
}

@keyframes superSaiyanEffect {
    0%, 100% { transform: scale(1); filter: brightness(1.5); }
    50% { transform: scale(1.1); filter: brightness(2); }
}

@keyframes thanosEffect {
    0% { transform: scale(1) rotate(0deg); opacity: 1; }
    50% { transform: scale(1.2) rotate(180deg); opacity: 0.7; }
    100% { transform: scale(1) rotate(360deg); opacity: 1; }
}

@keyframes nuclearEffect {
    0% { transform: scale(1); filter: brightness(2); }
    50% { transform: scale(1.3); filter: brightness(3); }
    100% { transform: scale(1); filter: brightness(2); }
}

@keyframes galaxyEffect {
    0% { transform: rotate(0deg) scale(1); }
    50% { transform: rotate(180deg) scale(1.2); }
    100% { transform: rotate(360deg) scale(1); }
}

@keyframes blackHoleEffect {
    0% { transform: scale(1) rotate(0deg); }
    100% { transform: scale(0.5) rotate(360deg); }
}

@keyframes multiverseEffect {
    0% { transform: translateX(0) scale(1); }
    25% { transform: translateX(-10px) scale(1.2); }
    75% { transform: translateX(10px) scale(0.8); }
    100% { transform: translateX(0) scale(1); }
}

@keyframes godModeEffect {
    0% { transform: scale(1); filter: brightness(2); }
    50% { transform: scale(1.2); filter: brightness(3); }
    100% { transform: scale(1); filter: brightness(2); }
}

@keyframes ascendedEffect {
    0% { transform: translateY(0) scale(1); }
    50% { transform: translateY(-20px) scale(1.3); }
    100% { transform: translateY(0) scale(1); }
}

@keyframes infinityEffect {
    0% { transform: scale(1) rotate(0deg); filter: hue-rotate(0deg); }
    25% { transform: scale(1.3) rotate(90deg); filter: hue-rotate(90deg); }
    50% { transform: scale(1) rotate(180deg); filter: hue-rotate(180deg); }
    75% { transform: scale(1.3) rotate(270deg); filter: hue-rotate(270deg); }
    100% { transform: scale(1) rotate(360deg); filter: hue-rotate(360deg); }
}

/* Effets aléatoires */
.miniExplosion {
    animation: miniExplosionEffect 0.5s forwards !important;
}

.sparkle {
    animation: sparkleEffect 1s forwards !important;
    filter: brightness(1.5) contrast(1.2) !important;
}

.wobble {
    animation: wobbleEffect 0.5s forwards !important;
}

.flip {
    animation: flipEffect 0.5s forwards !important;
}

.shrink {
    animation: shrinkEffect 0.5s forwards !important;
}

.grow {
    animation: growEffect 0.5s forwards !important;
}

@keyframes miniExplosionEffect {
    0% { transform: scale(1); }
    50% { transform: scale(1.2); filter: brightness(1.5); }
    100% { transform: scale(1); }
}

@keyframes sparkleEffect {
    0% { filter: brightness(1) contrast(1); }
    50% { filter: brightness(1.5) contrast(1.2); }
    100% { filter: brightness(1) contrast(1); }
}

@keyframes wobbleEffect {
    0%, 100% { transform: rotate(0deg); }
    25% { transform: rotate(-20deg); }
    75% { transform: rotate(20deg); }
}

@keyframes flipEffect {
    0% { transform: rotateY(0deg); }
    100% { transform: rotateY(360deg); }
}

@keyframes shrinkEffect {
    0% { transform: scale(1); }
    50% { transform: scale(0.8); }
    100% { transform: scale(1); }
}

@keyframes growEffect {
    0% { transform: scale(1); }
    50% { transform: scale(1.3); }
    100% { transform: scale(1); }
}

/* Nouveaux effets aléatoires */
.jelly {
    animation: jellyEffect 0.5s forwards !important;
}

.twist {
    animation: twistEffect 0.5s forwards !important;
}

.pulse {
    animation: pulseEffect 0.5s forwards !important;
}

.swing {
    animation: swingEffect 0.7s forwards !important;
}

.tilt {
    animation: tiltEffect 0.5s forwards !important;
}

.squish {
    animation: squishEffect 0.3s forwards !important;
}

.stretch {
    animation: stretchEffect 0.3s forwards !important;
}

.spin3D {
    animation: spin3DEffect 0.8s forwards !important;
}

.wave {
    animation: waveEffect 0.6s forwards !important;
}

.blur {
    animation: blurEffect 0.5s forwards !important;
}

.colorShift {
    animation: colorShiftEffect 0.5s forwards !important;
}

.zigzag {
    animation: zigzagEffect 0.5s forwards !important;
}

.tornado {
    animation: tornadoEffect 0.8s forwards !important;
}

.disco {
    animation: discoEffect 0.5s forwards !important;
}

.ripple {
    animation: rippleEffect 0.6s forwards !important;
}

@keyframes jellyEffect {
    0%, 100% { transform: scale(1, 1); }
    25% { transform: scale(0.9, 1.1); }
    50% { transform: scale(1.1, 0.9); }
    75% { transform: scale(0.95, 1.05); }
}

@keyframes twistEffect {
    0% { transform: rotate(0deg) scale(1); }
    50% { transform: rotate(180deg) scale(0.8); }
    100% { transform: rotate(360deg) scale(1); }
}

@keyframes pulseEffect {
    0% { transform: scale(1); filter: brightness(1); }
    50% { transform: scale(1.2); filter: brightness(1.3); }
    100% { transform: scale(1); filter: brightness(1); }
}

@keyframes swingEffect {
    0%, 100% { transform: rotate(0deg); }
    25% { transform: rotate(-12deg); }
    75% { transform: rotate(12deg); }
}

@keyframes tiltEffect {
    0% { transform: skewX(0deg); }
    25% { transform: skewX(15deg); }
    75% { transform: skewX(-15deg); }
    100% { transform: skewX(0deg); }
}

@keyframes squishEffect {
    0%, 100% { transform: scaleX(1); }
    50% { transform: scaleX(0.7); }
}

@keyframes stretchEffect {
    0%, 100% { transform: scaleY(1); }
    50% { transform: scaleY(1.3); }
}

@keyframes spin3DEffect {
    0% { transform: perspective(500px) rotateY(0deg); }
    100% { transform: perspective(500px) rotateY(360deg); }
}

@keyframes waveEffect {
    0%, 100% { transform: skewY(0deg); }
    25% { transform: skewY(10deg); }
    75% { transform: skewY(-10deg); }
}

@keyframes blurEffect {
    0%, 100% { filter: blur(0); }
    50% { filter: blur(4px); }
}

@keyframes colorShiftEffect {
    0% { filter: hue-rotate(0deg); }
    100% { filter: hue-rotate(360deg); }
}

@keyframes zigzagEffect {
    0% { transform: translateX(0) translateY(0); }
    25% { transform: translateX(10px) translateY(-10px); }
    50% { transform: translateX(-10px) translateY(10px); }
    75% { transform: translateX(10px) translateY(-10px); }
    100% { transform: translateX(0) translateY(0); }
}

@keyframes tornadoEffect {
    0% { transform: rotate(0deg) scale(1); }
    50% { transform: rotate(720deg) scale(0.5); }
    100% { transform: rotate(1440deg) scale(1); }
}

@keyframes discoEffect {
    0% { filter: hue-rotate(0deg) brightness(1); }
    25% { filter: hue-rotate(90deg) brightness(1.2); }
    50% { filter: hue-rotate(180deg) brightness(1); }
    75% { filter: hue-rotate(270deg) brightness(1.2); }
    100% { filter: hue-rotate(360deg) brightness(1); }
}

@keyframes rippleEffect {
    0% { transform: scale(1); opacity: 1; }
    50% { transform: scale(1.3); opacity: 0.5; }
    100% { transform: scale(1); opacity: 1; }
}

/* Nouveaux effets aléatoires supplémentaires */
.cartoonPop {
    animation: cartoonPopEffect 0.5s forwards !important;
}

.rubberBand {
    animation: rubberBandEffect 0.8s forwards !important;
}

.heartBeat {
    animation: heartBeatEffect 0.6s forwards !important;
}

.jumpRope {
    animation: jumpRopeEffect 0.6s forwards !important;
}

.pinwheel {
    animation: pinwheelEffect 0.8s forwards !important;
}

.confetti {
    animation: confettiEffect 0.5s forwards !important;
    filter: hue-rotate(360deg) brightness(1.2) !important;
}

.trampoline {
    animation: trampolineEffect 0.8s forwards !important;
}

.slinky {
    animation: slinkyEffect 0.8s forwards !important;
}

.balloon {
    animation: balloonEffect 1s forwards !important;
}

.spring {
    animation: springEffect 0.4s forwards !important;
}

.rollOver {
    animation: rollOverEffect 0.6s forwards !important;
}

.wobbleWobble {
    animation: wobbleWobbleEffect 0.8s forwards !important;
}

@keyframes cartoonPopEffect {
    0% { transform: scale(1); }
    40% { transform: scale(1.4); }
    60% { transform: scale(0.8); }
    80% { transform: scale(1.2); }
    100% { transform: scale(1); }
}

@keyframes rubberBandEffect {
    0% { transform: scale(1); }
    30% { transform: scale(1.25, 0.75); }
    40% { transform: scale(0.75, 1.25); }
    50% { transform: scale(1.15, 0.85); }
    65% { transform: scale(0.95, 1.05); }
    75% { transform: scale(1.05, 0.95); }
    100% { transform: scale(1); }
}

@keyframes heartBeatEffect {
    0% { transform: scale(1); }
    14% { transform: scale(1.3); }
    28% { transform: scale(1); }
    42% { transform: scale(1.3); }
    70% { transform: scale(1); }
}

@keyframes jumpRopeEffect {
    0% { transform: translateY(0) scale(1, 1); }
    50% { transform: translateY(-30px) scale(0.9, 1.1); }
    100% { transform: translateY(0) scale(1, 1); }
}

@keyframes pinwheelEffect {
    0% { transform: rotate(0deg) scale(1); }
    50% { transform: rotate(720deg) scale(0.8); }
    100% { transform: rotate(1440deg) scale(1); }
}

@keyframes confettiEffect {
    0% { transform: rotate(0deg) scale(1); filter: hue-rotate(0deg); }
    100% { transform: rotate(360deg) scale(1.2); filter: hue-rotate(360deg); }
}

@keyframes trampolineEffect {
    0%, 100% { transform: translateY(0) scale(1, 1); }
    40% { transform: translateY(-40px) scale(0.8, 1.2); }
    60% { transform: translateY(-20px) scale(1.2, 0.8); }
}

@keyframes slinkyEffect {
    0% { transform: scaleY(1); }
    25% { transform: scaleY(0.5) translateY(20px); }
    50% { transform: scaleY(1.2) translateY(-20px); }
    75% { transform: scaleY(0.8) translateY(10px); }
    100% { transform: scaleY(1) translateY(0); }
}

@keyframes balloonEffect {
    0% { transform: translateY(0) rotate(0deg); }
    50% { transform: translateY(-30px) rotate(10deg); }
    75% { transform: translateY(-15px) rotate(-10deg); }
    100% { transform: translateY(0) rotate(0deg); }
}

@keyframes springEffect {
    0% { transform: scaleY(1); }
    25% { transform: scaleY(0.5); }
    50% { transform: scaleY(1.5); }
    75% { transform: scaleY(0.8); }
    100% { transform: scaleY(1); }
}

@keyframes rollOverEffect {
    0% { transform: rotate(0deg) translateX(0); }
    100% { transform: rotate(360deg) translateX(0); }
}

@keyframes wobbleWobbleEffect {
    0%, 100% { transform: translateX(0); }
    15% { transform: translateX(-25px) rotate(-5deg); }
    30% { transform: translateX(20px) rotate(3deg); }
    45% { transform: translateX(-15px) rotate(-3deg); }
    60% { transform: translateX(10px) rotate(2deg); }
    75% { transform: translateX(-5px) rotate(-1deg); }
}

/* Curseur spécial pour le clic */
.hitting {
    cursor: url('./media/baton-hit.png') 20 20, auto !important;
}

/* S'assurer que les images ne peuvent pas être glissées */
img {
    -webkit-user-drag: none;
    -khtml-user-drag: none;
    -moz-user-drag: none;
    -o-user-drag: none;
    user-drag: none;
    pointer-events: none;
}

/* Effet de spam */
.spam-mode {
    animation: spamEffect 0.2s infinite !important;
    filter: contrast(1.5) brightness(1.2) !important;
}

@keyframes spamEffect {
    0% { 
        transform: translate(0, 0) rotate(0deg) scale(1);
    }
    25% { 
        transform: translate(-5px, -5px) rotate(-5deg) scale(0.95);
    }
    50% { 
        transform: translate(5px, 5px) rotate(5deg) scale(1.05);
    }
    75% { 
        transform: translate(-5px, 5px) rotate(-5deg) scale(0.95);
    }
    100% { 
        transform: translate(0, 0) rotate(0deg) scale(1);
    }
}

/* Responsive design */
@media (max-width: 768px) {
    .game-title {
        font-size: 24px;
        margin: 20px 0;
    }

    .total-hits {
        font-size: 24px;
        flex-wrap: wrap;
        justify-content: center;
    }

    #clickable-zone {
        width: 150px;
        height: 150px;
    }

    .online-counter {
        bottom: 10px;
        right: 10px;
        font-size: 12px;
        padding: 6px 12px;
    }

    .counter-label {
        font-size: 0.8em;
    }

    main {
        margin-top: 0;
        height: 80vh;
    }

    .click-instruction {
        bottom: -25px;
        font-size: 0.9em;
    }
}

@media (max-width: 480px) {
    .game-title {
        font-size: 20px;
    }

    .total-hits {
        font-size: 20px;
    }

    .online-counter {
        font-size: 11px;
        padding: 5px 10px;
    }

    #clickable-zone {
        width: 120px;
        height: 120px;
    }

    .click-instruction {
        bottom: -22px;
        font-size: 0.8em;
    }
}

/* Footer avec les liens sociaux */
.social-footer {
    position: fixed;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 30px;
    align-items: center;
    padding: 10px 20px;
    background: rgba(255, 255, 255, 0.9);
    border-radius: 50px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    z-index: 100;
}

.social-link {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    color: #333;
    transition: transform 0.2s, color 0.2s;
}

.social-link:hover {
    transform: scale(1.2);
    color: #666;
}

.social-icon {
    width: 100%;
    height: 100%;
    fill: currentColor;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .social-footer {
        bottom: 15px;
        gap: 20px;
        padding: 8px 15px;
    }

    .social-link {
        width: 20px;
        height: 20px;
    }
}

@media (max-width: 480px) {
    .social-footer {
        bottom: 10px;
        gap: 15px;
        padding: 6px 12px;
    }

    .social-link {
        width: 18px;
        height: 18px;
    }
}