/* ─── Variables ─── */
:root {
    --cap-navy:   #045cb4;
    --cap-orange: #e87b2e;
    --cap-light:  #FFFFFF;
    --cap-muted:  #6b7280;
    --cap-darklight: #6b6b70;
}

html { scroll-behavior: smooth; }
body { font-family: 'Segoe UI', Arial, sans-serif; color: #2d2d2d; }
section {
    color: var(--cap-darklight);
    padding: 40px 0;
    margin-top: 0 !important;
}
.section-alt { background-color: var(--cap-light); }

/* ─── Titres ─── */
.section-title {
    font-size: 2rem;
    font-weight: 700;
    color: var(--cap-navy);
    text-align: center;
}
/*.section-title::before { content: '- '; color: var(--cap-navy); }*/
/*.section-title::after  { content: ' -'; color: var(--cap-navy); }*/
.section-divider {
    width: 60px; height: 3px;
    background: var(--cap-navy);
    margin: 0.75rem auto 2.5rem;
    border-radius: 2px;
}

/* ─── Navbar ─── */
.navbar { box-shadow: 0 1px 10px rgba(0,0,0,.08); }
.navbar-brand img { height: 52px; }
.nav-link {
    font-weight: 500;
    color: var(--cap-darklight) !important;
    position: relative;
}
.nav-link::after {
    content: '';
    position: absolute; bottom: 0; left: 0;
    width: 0; height: 2px;
    background: var(--cap-navy);
    transition: width .25s;
}
.nav-link:hover { color: var(--cap-navy) !important; }
.nav-link:hover::after,
.nav-link.active::after { width: 100%; }
.nav-link.active { color: var(--cap-navy) !important; }

section[id] {
    scroll-margin-top: 40px;
}

/* ─── Boutons ─── */
.btn-cap {
    padding: .5rem 2rem;
    font-weight: 600;
    border-radius: 6px;
    transition: background .2s, transform .15s;
}
.btn-cap-primary  { background: var(--cap-navy); color: #fff; border: none; }
.btn-cap-primary:hover { background: color-mix(in srgb, var(--cap-navy) 85%, black); color: #fff; }
.btn-cap-outline  { border: 1px solid var(--cap-navy); color: var(--cap-navy); background: transparent; }
.btn-cap-outline:hover { background: var(--cap-navy); color: #fff; }

/* ─── Hero ─── */
#hero {
    margin-top: 0 !important;
}
.hero-badge {
    display: inline-block;
    font-size: .78rem; font-weight: bold;
    font-family: "Roboto", sans-serif;
    text-transform: uppercase; letter-spacing: .08em;
    color: var(--cap-navy);
}
.hero-title { font-size: 1.5rem; font-weight: 500; color: var(--cap-darklight); line-height: 1.2; }
.hero-lead   { font-size: 1.1rem; color: var(--cap-muted); }
.hero-photo  {
    border-radius: 16px;
    box-shadow: 0 8px 32px rgba(0,0,0,.12);
    width: 100%; object-fit: cover; max-height: 480px;
}

/* ─── Phase cards (bilan) ─── */
.phase-card {
    border-top: 3px solid var(--cap-orange);
    border-radius: 8px;
    background: #fff;
    box-shadow: 0 2px 12px rgba(0,0,0,.06);
    padding: 1.5rem; text-align: center;
}
.phase-number {
    width: 44px; height: 44px;
    background: var(--cap-orange); color: #fff;
    font-weight: 700; font-size: 1.2rem;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    margin: 0 auto 1rem;
}
.phase-card h5 { color: var(--cap-navy); font-weight: 700; }

/* ─── Raisons (bilan) ─── */
.raison-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: .9rem;
    padding: 1.5rem 1.2rem;
    border-radius: 8px;
    background: var(--cap-navy);
    box-shadow: 0 1px 8px rgba(0,0,0,.05);
    color: var(--cap-light);
    font-weight: 500;
}
.raison-icon { font-size: 2rem; color: var(--cap-orange); flex-shrink: 0; }

/* ─── Piliers VAE ─── */
.vae-pillar {
    background: #fff; border-radius: 8px;
    box-shadow: 1px 1px 5px rgba(0,0,0,.5);
    padding: 1.5rem;
    border-left: 4px solid var(--cap-navy);
}
.vae-pillar h6 {
    color: var(--cap-navy);
    font-weight: 700;
    font-size: 1rem;
}

/* ─── Bloc histoire ─── */
.story-block {
    background: var(--cap-navy); color: #fff;
    border-radius: 12px; padding: 2rem;
}
.story-block .highlight { color: var(--cap-orange); font-weight: 700; }

.cap-quote {
    border-left: 4px solid var(--cap-orange);
    padding: .8rem 1.2rem;
    margin: 1.2rem 0;
    background: #fff8f3;
    color: var(--cap-navy);
    font-style: italic;
    border-radius: 0 6px 6px 0;
}

/* ─── Formules recrutement ─── */
.formula-card {
    background: #fff; border-radius: 10px;
    box-shadow: 0 2px 14px rgba(0,0,0,.07);
    border-top: 4px solid var(--cap-navy);
    padding: 1.5rem 1.4rem; height: 100%;
    transition: transform .2s, box-shadow .2s;
}
.formula-card:hover { transform: translateY(-4px); box-shadow: 0 6px 24px rgba(0,0,0,.12); }
.formula-card.featured { border-top-color: var(--cap-orange); }
.formula-card h5 { color: var(--cap-navy); font-weight: 700; font-size: 1rem; }
.formula-subtitle { font-size: .85rem; color: var(--cap-muted); margin-bottom: 1rem; }
.formula-card ul { padding-left: 1.1rem; }
.formula-card ul li { font-size: .9rem; margin-bottom: .4rem; }

/* ─── Missions ─── */
.mission-card {
    background: #fff;
    border: 1px solid rgba(0,0,0,.07);
    border-radius: 10px;
    padding: 1.5rem;
    box-shadow: 0 2px 12px rgba(0,0,0,.04);
}
.mission-icon-circle {
    width: 44px; height: 44px;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
}
.mission-list {
    list-style: none;
    padding: 0; margin: 0;
    display: flex; flex-direction: column; gap: 10px;
}
.mission-list li {
    display: flex; gap: 10px; align-items: flex-start;
    font-size: .93rem; color: var(--cap-darklight); line-height: 1.55;
}
.mission-list li::before {
    content: '';
    width: 6px; height: 6px;
    border-radius: 50%;
    background: var(--cap-navy);
    flex-shrink: 0;
    margin-top: 6px;
}

/* ─── Témoignages ─── */
.testimonial-card {
    background: #fff; border-radius: 10px;
    box-shadow: 0 2px 12px rgba(0,0,0,.07);
    padding: 1.75rem; height: 100%;
}
.quote { font-size: 2.5rem; color: var(--cap-orange); line-height: 1; }
.testimonial-avatar {
    width: 52px; height: 52px; border-radius: 50%; object-fit: cover;
}

/* ─── Contact ─── */
#contact { background: var(--cap-navy); color: #fff; }
#contact .section-title { color: #fff; }
#contact .section-title::before,
#contact .section-title::after { color: var(--cap-orange); }
#contact .form-control,
#contact .form-select {
    background: rgba(255,255,255,.08);
    border: 1px solid rgba(255,255,255,.2);
    color: #fff; border-radius: 6px;
}
#contact .form-control::placeholder { color: rgba(255,255,255,.4); }
#contact .form-control:focus,
#contact .form-select:focus {
    background: rgba(255,255,255,.13);
    border-color: var(--cap-orange);
    box-shadow: 0 0 0 3px rgba(232,123,46,.25);
    color: #fff;
}
#contact .form-label { color: rgba(255,255,255,.8); font-size: .9rem; }
#contact .form-select option { color: #2d2d2d; background: #fff; }

/* ─── Footer ─── */
footer {
    background: #0f2540; color: rgba(255,255,255,.55);
    font-size: .875rem; padding: 1.5rem 0; text-align: center;
}
footer a { color: var(--cap-orange); }

/* ─── Logos financement ─── */
.logo-financement { max-height: 180px; filter: grayscale(.3); }

/* ─── Responsive ─── */
@media (max-width: 991px) { section { padding: 60px 0; } .hero-title { font-size: 1.9rem; } }
@media (max-width: 767px) { .hero-title { font-size: 1.6rem; } section { padding: 48px 0; } }


.text-color-main { color: var(--cap-navy); }