/* Couleurs & Variables */
:root {
    --accent-blue: #3b82f6;
    --dark-bg: #000000;
    --light-gray: #f9fafb;
    --text-gray: #4b5563;
}

/* Hero Section */
.hero_section {
    padding: 100px 5%;
    text-align: center;
    background: radial-gradient(circle at center, #111 0%, #000 100%);
    color: white;
}

.hero_section h1 {
    font-size: 3rem;
    max-width: 900px;
    margin: 0 auto 20px;
    line-height: 1.2;
}

.blue_text { color: var(--accent-blue); }

.hero_section p {
    font-size: 1.2rem;
    color: #9ca3af;
    max-width: 600px;
    margin: 0 auto 40px;
}

/* Boutons */
.hero_btns { display: flex; justify-content: center; gap: 20px; }
.btn_primary { background: var(--accent-blue); color: white; padding: 12px 30px; border-radius: 6px; font-weight: 600; }
.btn_secondary { border: 1px solid #333; color: white; padding: 12px 30px; border-radius: 6px; }

/* Grille de présentation */
.presentation_section { padding: 80px 5%; background: var(--light-gray); }
.presentation_grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 30px;
    max-width: 1200px;
    margin: 0 auto;
}

.present_card {
    background: white;
    padding: 40px;
    border-radius: 12px;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease;
    text-align: center;
}

.present_card:hover { transform: translateY(-10px); }

.present_card i {
    font-size: 2.5rem;
    color: var(--accent-blue);
    margin-bottom: 20px;
}

.present_card h3 { margin-bottom: 15px; font-size: 1.5rem; color: #111; }
.present_card p { color: var(--text-gray); line-height: 1.6; }