/* =========================================
   1. SECTION PORTFOLIO (Succès Clients)
   ========================================= */

/* Badge "Succès Clients" en haut à gauche */
.bg-success.bg-opacity-10 {
    background-color: rgba(61, 220, 137, 0.1) !important; /* Ton Vert Mint léger */
}
.text-success {
    color: #3ddc89 !important; /* Ton Vert Mint */
}

/* Cartes Portfolio */
.portfolio-card {
    background: #fff;
    border-radius: 20px;
    border: 1px solid rgba(0, 0, 0, 0.05);
    overflow: hidden;
    height: 100%;
    transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.02);
}

.portfolio-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 20px 40px rgba(37, 99, 235, 0.1); /* Ombre Bleue légère */
    border-color: #2563eb; /* Bordure Bleue au survol */
}

.portfolio-img-wrapper {
    position: relative;
    height: 240px;
    overflow: hidden;
}

.portfolio-img-wrapper img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s ease;
}

.portfolio-card:hover .portfolio-img-wrapper img {
    transform: scale(1.08);
}

.portfolio-badge {
    position: absolute;
    bottom: 16px;
    left: 16px;
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(4px);
    padding: 8px 16px;
    border-radius: 50px;
    font-size: 0.75rem;
    font-weight: 700;
    color: #2563eb; /* Bleu Reactiv */
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    z-index: 2;
}

.portfolio-content {
    background: #fff;
    position: relative;
    z-index: 3;
}

/* Flèche "Voir le cas" */
.portfolio-content .fa-arrow-right.text-success {
    color: #2563eb !important; /* Je remplace le vert par ton bleu */
}

/* =========================================
   2. SECTION CTA (15 Minutes Chrono)
   ========================================= */

.cta-wrapper {
    /* Dégradé Reactiv (Bleu vers Violet) au lieu du Noir plat */
    background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%) !important;
    position: relative;
    z-index: 1;
}

/* Pulse Circles */
.pulse-circle {
    background: rgba(37, 99, 235, 0.1); /* Bleu transparent */
    position: absolute;
    border-radius: 50%;
    z-index: 0;
    animation: pulse-animation 4s infinite ease-in-out;
}
.pc-1 { width: 500px; height: 500px; top: -150px; right: -150px; }
.pc-2 { width: 300px; height: 300px; bottom: -50px; left: -50px; animation-delay: 2s; }

@keyframes pulse-animation {
    0% { transform: scale(1); opacity: 0.5; }
    50% { transform: scale(1.1); opacity: 0.8; }
    100% { transform: scale(1); opacity: 0.5; }
}

/* Texte "15 Minutes Chrono" */
.text-success.fw-bold.text-uppercase {
    color: #3ddc89 !important; /* Vert Mint pour le kicker */
}

/* Bouton Vert CTA -> Bouton Bleu Reactiv */
.btn-success {
    background-color: #2563eb !important;
    border-color: #2563eb !important;
    color: #fff !important;
}
.btn-success:hover {
    background-color: #1e40af !important; /* Bleu plus foncé */
    transform: translateY(-2px);
}

/* Carte Expert */
.expert-card {
    transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
    border: 1px solid rgba(0,0,0,0.05);
}
@media (min-width: 992px) {
    .transform-rotate { transform: rotate(4deg) translateY(20px); }
    .cta-wrapper:hover .expert-card { transform: rotate(0deg) translateY(0) scale(1.02); }
}

.chat-bubble {
    position: relative;
    border-left: 3px solid #2563eb; /* Barre bleue */
}
.chat-bubble::after {
    content: ''; position: absolute; top: -8px; left: 20px; width: 0; height: 0;
    border-left: 8px solid transparent; border-right: 8px solid transparent; border-bottom: 8px solid #f8f9fa;
}

/* Dispo "point vert" (On garde le vert ici car c'est un status) */
.text-success.fw-bold { color: #3ddc89 !important; }


/* =========================================
   3. SECTION FOOTER
   ========================================= */

.footer-section {
    background-color: #fff;
    font-family: 'Plus Jakarta Sans', sans-serif;
}

/* Icône Marque */
.brand-icon-footer {
    width: 42px; height: 42px;
    background: linear-gradient(135deg, #2563eb 0%, #5956e9 100%); /* Dégradé Bleu/Violet */
    color: #fff;
    border-radius: 12px;
    display: flex; align-items: center; justify-content: center;
    font-size: 1.1rem;
    box-shadow: 0 4px 10px rgba(37, 99, 235, 0.25);
}

/* Liens Sociaux */
.social-links a {
    width: 38px; height: 38px;
    display: flex; align-items: center; justify-content: center;
    border-radius: 50%;
    background-color: #f1f5f9;
    color: #64748b;
    text-decoration: none;
    transition: all 0.3s ease;
}
.social-links a:hover {
    background-color: #2563eb; /* Bleu au survol */
    color: #fff;
    transform: translateY(-3px);
}

/* Liens Footer */
.footer-links li { margin-bottom: 10px; }
.footer-links a {
    color: #64748b;
    text-decoration: none;
    font-size: 0.95rem;
    transition: all 0.2s ease;
    display: inline-block;
}
.footer-links a:hover {
    color: #2563eb; /* Bleu au survol */
    transform: translateX(4px);
}

/* Carte Contact Footer */
.contact-card {
    background-color: #f8fafc !important; /* Bleu gris très clair */
    border: 1px solid #e2e8f0;
}
.contact-card .fas.fa-envelope, 
.contact-card .fas.fa-phone {
    color: #2563eb !important; /* Icônes en bleu */
}

/* Bouton Contact Footer */
.contact-card .btn-outline-dark {
    color: #2563eb;
    border-color: #2563eb;
}
.contact-card .btn-outline-dark:hover {
    background-color: #2563eb;
    color: #fff;
}