/* Styles généraux */
body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    color: #333;
}

/* Hero section */
.hero-section {
    background: linear-gradient(rgba(0, 123, 255, 0.7), rgba(0, 123, 255, 0.9)), url('../img/hero-bg.jpg');
    background-size: cover;
    background-position: center;
    padding: 120px 0;
    margin-bottom: 30px;
    height: 500px; /* Hauteur fixe pour accommoder la carte Windy */
}

/* Ombre pour le texte dans le hero section */
.text-shadow {
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.7);
}

/* Feature icons */
.feature-icon {
    height: 70px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Navbar styles */
.navbar {
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}

.navbar-brand {
    font-weight: bold;
    font-size: 1.5rem;
}

/* Cards hover effect */
.card {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 20px rgba(0,0,0,0.1) !important;
}

/* Buttons styling */
.btn {
    border-radius: 30px;
    padding: 8px 25px;
    font-weight: 500;
}

/* Footer styling */
footer a {
    text-decoration: none;
    transition: opacity 0.2s;
}

footer a:hover {
    opacity: 0.8;
}

/* Ruban défilant de mots scientifiques - Nouvelle implémentation */
.tech-ticker-container {
    width: 100%;
    overflow: hidden;
    background-color: #f8f9fa;
    padding: 10px 0;
    border-top: 1px solid rgba(0, 0, 0, 0.1);
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
    position: relative;
    height: 40px;
}

/* Nouvelle implémentation du ticker avec animation garantie */
.tech-ticker {
    position: absolute;
    white-space: nowrap;
    will-change: transform;
    /* Animation de 240 secondes comme recommandé */
    animation: tickerScroll 240s linear infinite;
}

.tech-ticker span {
    display: inline-block;
    padding: 0 15px;
    margin: 0 5px;
    color: #0d6efd;
    font-weight: 500;
    font-size: 1rem;
    transition: transform 0.3s ease, color 0.3s ease;
    border-right: 1px solid rgba(13, 110, 253, 0.2);
}

/* Style pour le dernier élément */
.tech-ticker span:last-child {
    border-right: none;
}

/* Effet de survol */
.tech-ticker span:hover {
    transform: scale(1.1);
    color: #dc3545;
    cursor: default;
}

/* Styles du ruban défilant - version 240 secondes */
.tech-ticker {
    white-space: nowrap;
    display: inline-block;
    animation: moveTicker 240s linear infinite;
    padding: 5px 0;
    position: relative;
    left: 0;
    will-change: transform;
}

/* Animation de défilement qui commence à gauche */
@keyframes moveTicker {
    0% { transform: translateX(0); }
    100% { transform: translateX(-100%); }
}

.tech-ticker-container {
    width: 100%;
    overflow: hidden;
    background-color: #f8f9fa;
    padding: 10px 0;
    border-top: 1px solid rgba(0, 0, 0, 0.1);
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

.ticker-marquee {
    padding: 10px 0;
}

.ticker-item {
    display: inline-block;
    padding: 5px 15px;
    margin: 0 8px;
    color: #0d6efd;
    font-weight: 500;
    font-size: 1.05rem;
    transition: all 0.3s ease;
    border-right: 1px solid rgba(13, 110, 253, 0.2);
    position: relative;
    letter-spacing: 0.3px;
}

.ticker-item:last-child {
    border-right: none;
}

.ticker-item:hover {
    transform: scale(1.15);
    color: #dc3545;
    cursor: pointer;
    text-shadow: 0 0 1px rgba(220, 53, 69, 0.3);
    font-weight: 600;
}

/* Style pour le séparateur entre les termes */
.ticker-separator {
    display: inline-block;
    color: rgba(13, 110, 253, 0.6);
    font-weight: normal;
    vertical-align: middle;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .hero-section {
        padding: 80px 0;
    }
    .hero-section h1 {
        font-size: 2.5rem;
    }
}