/* Homepage */
body, html { height: 100%; margin: 0; font-family: Arial, sans-serif; }
.bg-cover { background: url('https://cerveaumotive.com/build/images/tim-mossholder-UYQP_yjpp5Q-unsplash.jpg') center/cover no-repeat; min-height: 100vh; position: relative; color: white; }
.bg-overlay { position: absolute; inset: 0; background-color: rgba(60, 72, 88, 0.7); z-index: 1; }
.content { position: relative; z-index: 2; text-align: center; padding: 2rem; }
#quote-container { background-color: rgba(255,255,255,0.1); padding: 2rem; border-radius: 15px; box-shadow: 0 4px 12px rgba(0,0,0,0.3); width: 100%; margin-bottom: 3rem; }
#quote { font-size: 1.4rem; font-style: italic; }
#author { font-size: 1rem; color: #ddd; }
#avatar { width: 60px; height: 60px; border-radius: 50%; margin-top: 0.5rem; border:1px solid #ccc; }

.social-card { border-radius: 1rem; padding: 1rem; text-align: center; transition: transform 0.2s, background 0.2s; cursor: pointer; border: 1px solid lch(100 0 0 / 0.4); width: 100px; }
.social-card:hover { transform: translateY(-10px); }
.social-card i { font-size: 1.8rem; color: white; }
.social-number { font-weight: bold; font-size: 1.1rem; color: #fff; margin-top: 0.15rem; } 

/* Hover coloré semi-transparent selon le réseau */
.social-card:hover {
    transform: translateY(-10px);
}

/* Couleurs spécifiques pour chaque card correspondant à un réseau */
a.social-card[href*="threads.net"]:hover,
a.social-card[href*="threads.com"]:hover {
    background-color: rgba(10, 10, 10, 0.5); /* #4c5fd5 + 50% opacity */
}
a.social-card[href*="instagram.com"]:hover {
    background-color: rgba(225, 48, 108, 0.5); /* #E1306C + 50% opacity */
}
a.social-card[href*="facebook.com"]:hover {
    background-color: rgba(24, 119, 242, 0.5); /* #1877F2 + 50% opacity */
}
a.social-card[href*="x.com"]:hover, 
a.social-card[href*="twitter.com"]:hover {
    background-color: rgba(29, 161, 242, 0.5); /* #1DA1F2 + 50% opacity */
}

a:hover img#logo {
    -webkit-animation: vibrate-1 0.3s linear infinite both;
    animation: vibrate-1 0.3s linear infinite both;
    cursor: grab;
}
#logo {
    max-width: 150px;
    margin-bottom: 2rem;
}

@-webkit-keyframes vibrate-1 {
    0% {
        -webkit-transform: translate(0);
                transform: translate(0);
    }
    20% {
        -webkit-transform: translate(-2px, 2px);
                transform: translate(-2px, 2px);
    }
    40% {
        -webkit-transform: translate(-2px, -2px);
                transform: translate(-2px, -2px);
    }
    60% {
        -webkit-transform: translate(2px, 2px);
                transform: translate(2px, 2px);
    }
    80% {
        -webkit-transform: translate(2px, -2px);
                transform: translate(2px, -2px);
    }
    100% {
        -webkit-transform: translate(0);
                transform: translate(0);
    }
}
@keyframes vibrate-1 {
    0% {
        -webkit-transform: translate(0);
                transform: translate(0);
    }
    20% {
        -webkit-transform: translate(-2px, 2px);
                transform: translate(-2px, 2px);
    }
    40% {
        -webkit-transform: translate(-2px, -2px);
                transform: translate(-2px, -2px);
    }
    60% {
        -webkit-transform: translate(2px, 2px);
                transform: translate(2px, 2px);
    }
    80% {
        -webkit-transform: translate(2px, -2px);
                transform: translate(2px, -2px);
    }
    100% {
        -webkit-transform: translate(0);
                transform: translate(0);
    }
}