/* Custom CSS Properties & Variables */
:root {
    --dark-blue: #1A1F2E;
    --neon-green: #2ECC9A;
    --bg-color: #F7F5F0;
}

/* Global Styles */
body {
    font-family: 'Instrument Sans', sans-serif;
    background-color: var(--bg-color);
    color: var(--dark-blue);
    line-height: 1.6;
}

/* Base Utility Classes */
.bg-theme { background-color: var(--bg-color); }
.bg-dark-blue { background-color: var(--dark-blue); }
.bg-neon-green { background-color: var(--neon-green); }

.text-dark-blue { color: var(--dark-blue); }
.text-neon { color: var(--neon-green); }

.text-spacing { letter-spacing: 0.02em; }
.lh-custom { line-height: 1.3; }
.italic { font-style: oblique; }
.h-24 { height: 24px; }
.max-w-500 { max-width: 500px; }
.max-w-600 { max-width: 600px; }

/* Icon Utilities */
.icon-badge { width: auto; height: 20px; object-fit: contain; }
.icon-sm { width: 24px; height: 24px; object-fit: contain; }
.icon-md { width: 32px; height: 32px; object-fit: contain; }

/* Top Header */
.top-header { border-bottom: 1px solid rgba(0,0,0,0.05); }

/* Hero Section */
.hero-section { background-color: var(--dark-blue); }
.img-placeholder { width: 100%; height: 350px; background-size: cover; background-position: center; position: relative; }

/* Custom Badges */
.badge-custom {
    display: inline-block;
    padding: 0.5rem 1rem;
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 50px;
    font-size: 0.85rem;
    font-weight: 500;
    transition: all 0.2s ease;
}
.badge-custom:hover { background-color: rgba(255, 255, 255, 0.1); }
.badge-outline-neon {
    display: inline-block;
    border: 1px solid var(--neon-green);
    color: var(--neon-green);
    background-color: transparent;
    padding: 0.4rem 0.8rem;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
}

/* Information Cards */
.bg-idee-recue { background-color: #FCF5F5; }
.text-idee-recue { color: #8C3B3B; letter-spacing: 0.05em; }
.text-realite { color: #2B7A5F; letter-spacing: 0.05em; }
.card-solution { border: 1px solid var(--neon-green); border-radius: 0; }

/* Buttons & Shapes */
.btn-circle { width: 52px!important; height: 52px!important; min-width: 52px!important; border-radius: 50%; display: flex; align-items: center; justify-content: center; }
.avatar-circle { width: 48px; height: 48px; font-size: 1.1rem; }
.icon-square-neon {
    width: 48px;
    height: 48px;
    background-color: var(--neon-green);
    display: flex;
    align-items: center;
    justify-content: center;
}
.btn-arrow-light { background-color: #E6E8EA; transition: background-color 0.2s ease; }
.btn-arrow-light:hover { background-color: #D1D4D7!important; }
.btn-arrow-dark { background-color: var(--dark-blue); transition: background-color 0.2s ease; }
.btn-arrow-dark:hover { background-color: #121520!important; }
.btn-dark-blue-solid {
    background-color: var(--dark-blue)!important;
    color: white!important;
    border: none!important;
    border-radius: 0;
    transition: opacity 0.2s ease;
}
.btn-dark-blue-solid:hover { background-color: var(--dark-blue)!important; color: white!important; opacity: 0.9;border: none!important; }

/* Typography Extras */
.serif-italic {
    font-family: Georgia, 'Times New Roman', Times, serif;
    font-style: italic;
    font-weight: 500;
    line-height: 1.4;
}

/* Pagination Dots */
.dot-pagination { width: 10px; height: 10px; border-radius: 50%; display: inline-block; }
.dot-pagination.outline { border: 1px solid #6c757d; background-color: transparent; }
.dot-pagination.active { background-color: var(--neon-green); border: 1px solid var(--neon-green); }

/* Vertical Timeline */
.timeline-container { padding-left: 0; position: relative; }
.timeline-circle {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background-color: var(--neon-green);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2;
}
.timeline-line {
    position: absolute;
    top: 24px;
    bottom: 24px;
    left: 23px;
    width: 2px;
    background-color: rgba(46, 204, 154, 0.4);
    z-index: 1;
}

/* Links & Footer */
.link-custom { text-decoration: underline; text-underline-offset: 4px; }
.footer-link {
    color: var(--dark-blue);
    text-decoration: underline;
    text-underline-offset: 4px;
    text-decoration-thickness: 1px;
    font-size: 0.9rem;
    transition: opacity 0.2s ease;
}
.footer-link:hover { color: var(--dark-blue); opacity: 0.7; }

/* Mobile Optimization */
@media (max-width: 576px) {
    .trustpilot-widget {
        transform: scale(0.9);
        transform-origin: left center;
    }
    .top-header .d-flex { justify-content: center !important; }
}
/* Carousel Animation Utility */
.idea-carousel-track {
    transition: transform 0.4s ease-in-out;
}
/* Review Carousel Utilities */
.review-carousel-track {
    transition: transform 0.5s ease-in-out;
}

.dot-pagination {
    cursor: pointer;
    transition: background-color 0.3s ease, border-color 0.3s ease;
}