/* ========================================
   Personnalisation Bootstrap
======================================== */

/* Couleurs personnalisées */
:root {
    /* Couleurs principales */
    --bs-primary: #ff3b30;
    --bs-primary-rgb: 255, 59, 48;
    --bs-warning: #ffc107;
    --bs-warning-rgb: 255, 193, 7;
}

/* Boutons */
.btn-primary {
    --bs-btn-bg: var(--bs-primary);
    --bs-btn-border-color: var(--bs-primary);
    --bs-btn-hover-bg: var(--color-primary-dark);
    --bs-btn-hover-border-color: var(--color-primary-dark);
}

.btn-outline-primary {
    --bs-btn-color: var(--bs-primary);
    --bs-btn-border-color: var(--bs-primary);
    --bs-btn-hover-bg: var(--bs-primary);
    --bs-btn-hover-border-color: var(--bs-primary);
}

/* Cards */
.card {
    --bs-card-border-color: var(--bs-gray-200);
    --bs-card-cap-bg: var(--bs-white);
}

/* Alertes */
.alert {
    --bs-alert-border-width: 1px;
    --bs-alert-border-left-width: 4px;
}

/* Badges */
.badge {
    --bs-badge-font-weight: 500;
}

.badge-primary {
    --bs-badge-bg: var(--bs-primary);
}

/* Tables */
.table {
    --bs-table-hover-bg: rgba(var(--bs-primary-rgb), 0.05);
}

/* Forms */
.form-control:focus {
    border-color: rgba(var(--bs-primary-rgb), 0.4);
    box-shadow: 0 0 0 0.25rem rgba(var(--bs-primary-rgb), 0.25);
}

/* Liens */
a {
    --bs-link-color: var(--bs-primary);
    --bs-link-hover-color: var(--color-primary-dark);
}

/* Pagination */
.pagination {
    --bs-pagination-active-bg: var(--bs-primary);
    --bs-pagination-active-border-color: var(--bs-primary);
}

/* Progress bars */
.progress {
    --bs-progress-bar-bg: var(--bs-primary);
}

/* List groups */
.list-group-item.active {
    background-color: var(--bs-primary);
    border-color: var(--bs-primary);
}

/* Dropdown */
.dropdown-item.active,
.dropdown-item:active {
    background-color: var(--bs-primary);
}

/* About page */
.about-section {
    margin-bottom: 4rem;
}

.about-timeline {
    position: relative;
    padding: 2rem 0;
}

.about-timeline-item {
    margin-bottom: 2rem;
    position: relative;
    padding-left: 3rem;
}

.about-timeline-icon {
    position: absolute;
    left: 0;
    width: 2rem;
    height: 2rem;
    background: var(--bs-primary);
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
}

.about-cta {
    background: linear-gradient(45deg, var(--bs-primary), var(--bs-primary-dark));
}

@media (max-width: 768px) {
    .about-timeline-item {
        padding-left: 2.5rem;
    }
}