/* vision.css - styles for Vision & Organisation page */

:root{
    --vision-hero-bg:#2f3439;
    --vision-hero-text:#f7f9fb;
    --vision-text-color:#f7f9fb;
    --vision-card-bg: rgba(255,255,255,0.04);
    --vision-card-text: rgba(255,255,255,0.95);
    --vision-chip-bg: rgba(255,255,255,0.06);
    --vision-accent: #0d6efd;
    --vision-muted: rgba(255,255,255,0.75);
}

.vision-hero{padding:calc(var(--header-height,80px) + 40px) 0 3rem;background:var(--vision-hero-bg);color:var(--vision-hero-text);text-align:center;border-bottom:1px solid rgba(0,0,0,0.12)}
.vision-hero .lead{opacity:.95;color:var(--vision-muted)}

.visions{padding:4rem 0}
.section-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:1.25rem}
.section-header h2{margin:0;font-weight:700;font-size:1.5rem}
.section-count{font-size:.95rem;color:var(--section-count-color,#fff);background:rgba(0,0,0,0.08);padding:.25rem .5rem;border-radius:.5rem}

/* allow sections to offset from fixed header using this variable (set by JS) */
:root{--header-height:80px}
.vision-section{scroll-margin-top:calc(var(--header-height) + 20px)}

/* Category backgrounds */
.section-vision{background:linear-gradient(90deg,#07275f 0%, #08306b 100%);color:#fff;padding:2rem;border-radius:12px;margin-bottom:2rem}
.section-mission{background:linear-gradient(90deg,#021028 0%, #04224a 100%);color:#fff;padding:2rem;border-radius:12px;margin-bottom:2rem}
.section-objectif{background:linear-gradient(90deg,#6b0f1a 0%, #4d0b13 100%);color:#fff;padding:2rem;border-radius:12px;margin-bottom:2rem}
.section-valeur{background:linear-gradient(90deg,#6b7280 0%, #4b5157 100%);color:#fff;padding:2rem;border-radius:12px;margin-bottom:2rem}
.section-organisation{background:#ffffff;color:#071026;padding:2rem;border-radius:12px;margin-bottom:2rem}
.section-organigramme{background:linear-gradient(90deg,#0b3d91 0%, #021034 100%);color:#fff;padding:2rem;border-radius:12px;margin-bottom:2rem}
.section-autre{background:#f7f7f9;color:#071026;padding:2rem;border-radius:12px;margin-bottom:2rem}

/* Cards */
.vision-card{transition:transform .45s cubic-bezier(.2,.9,.3,1), box-shadow .45s cubic-bezier(.2,.9,.3,1)}
.vision-card .card-inner{background:var(--vision-card-bg);border-radius:14px;padding:1.4rem;height:100%;display:flex;flex-direction:column;justify-content:space-between;box-shadow:0 10px 28px rgba(2,6,23,0.12);backdrop-filter: blur(4px)}
.section-organisation .vision-card .card-inner{background:linear-gradient(180deg,#ffffff,#fbfdff);box-shadow:0 6px 18px rgba(3,10,20,0.04)}
.vision-card:hover{transform:translateY(-10px);box-shadow:0 22px 50px rgba(2,6,23,0.2)}
.card-top h3{font-size:1.05rem;margin-bottom:.4rem}
.card-top .meta{display:flex;justify-content:space-between;align-items:center;font-size:.85rem;color:rgba(255,255,255,0.95)}
.section-organisation .card-top .meta{color:rgba(7,16,38,.6)}
.card-body p{color:var(--vision-card-text);margin:0}
.section-organisation .card-body p{color:rgba(7,16,38,.9)}
.card-file{margin-top:.75rem}
.card-footer{margin-top:1rem;display:flex;justify-content:flex-end}
.read-more{color:inherit;text-decoration:underline}

/* Modal content */
.modal-body{white-space:pre-wrap}

/* Fade-up reveal (works with assets/js/app.js) */
.fade-up{opacity:0;transform:translateY(24px);transition:all .8s cubic-bezier(.2,.8,.2,1)}
.fade-up.show{opacity:1;transform:none}

@media (max-width:768px){
    .section-header{flex-direction:column;align-items:flex-start;gap:.5rem}
    .card-top .meta{font-size:.8rem}
}

/* --- Modern additions --- */
.vision-hero .featured-card{background:linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0.02));padding:1rem;border-radius:12px;min-height:140px;display:flex;flex-direction:column;justify-content:center}
.featured-category{font-size:.8rem;color:var(--vision-muted);opacity:0.95;margin-bottom:.35rem}
.featured-title{font-size:1.05rem;margin:0 0 .35rem;color:var(--vision-hero-text)}
.featured-excerpt{font-size:.9rem;color:var(--vision-card-text)}

.vision-tabs .nav-link{border-radius:999px;background:var(--vision-accent);color:#ffffff;padding:.45rem .85rem;margin-right:.45rem;border:1px solid rgba(255,255,255,0.06)}
.vision-tabs .nav-link:hover{filter:brightness(.95)}
.vision-tabs .nav-link.active{background:linear-gradient(90deg,var(--vision-active, #198754), rgba(25,135,84,0.85));border-color:transparent;color:#ffffff}

.chip{display:inline-block;padding:.25rem .6rem;border-radius:999px;font-size:.78rem;background:var(--vision-chip-bg);margin-bottom:.6rem;color:var(--vision-card-text)}

.card-actions{display:flex;justify-content:flex-end;gap:.5rem;margin-top:1rem}
.card-actions .btn{font-size:.85rem}

/* Smaller card inner on mobile */
@media (max-width:576px){
    .featured-title{font-size:1rem}
    .vision-hero .featured-card{min-height:120px}
}

/* Subtle divider between sections */
.visions{border-top:1px solid rgba(0,0,0,0.04);padding-top:3rem}

.carousel-control-prev-icon,
.carousel-control-next-icon{filter:drop-shadow(0 6px 18px rgba(2,6,23,0.2))}

/* Ensure hero text is always visible */
.vision-hero .lead,
.vision-hero p.text-muted{color:#ffffff !important;opacity:.95}

/* Ensure card content inherits color */
.vision-card .card-inner h3,
.vision-card .card-inner p,
.vision-card .card-inner .meta,
.vision-card .card-inner .chip{color:inherit}

/* Category-specific high-contrast styles */
.vision-card[data-category="Vision"] .card-inner{
    background:linear-gradient(180deg,#001026 0%, #001f3a 100%); /* darker, more saturated night-blue */
    color:#ffffff;
}
.vision-card[data-category="Vision"] .card-inner .chip{
    background:rgba(255,255,255,0.06);
    color:#ffffff;
}
.vision-card[data-category="Vision"] .card-actions .btn{
    color:#ffffff;border:1px solid rgba(255,255,255,0.18);background:transparent;padding:.35rem .6rem;border-radius:.45rem
}
.vision-card[data-category="Vision"] .card-actions .btn:hover{background:rgba(255,255,255,0.06)}

.vision-card[data-category="Mission"] .card-inner{
    background:linear-gradient(180deg,#083826 0%, #0b4f34 100%); /* deep green/teal for white text */
    color:#ffffff;
}
.vision-card[data-category="Mission"] .card-inner .chip{
    background:rgba(255,255,255,0.03);
    color:#ffffff;
}
.vision-card[data-category="Mission"] .card-actions .btn{
    color:#ffffff;border:1px solid rgba(255,255,255,0.12);background:transparent;padding:.35rem .6rem;border-radius:.45rem
}
.vision-card[data-category="Mission"] .card-actions .btn:hover{background:rgba(255,255,255,0.04)}

/* Ensure nav badges are visible on dark backgrounds */
.vision-tabs .nav-link .badge{background:rgba(255,255,255,0.12);color:#ffffff}
.vision-tabs .nav-link.active .badge{background:rgba(255,255,255,0.22);color:#ffffff}

/* Make small buttons inside cards visible (outline light) */
.vision-card .card-actions .btn.btn-outline-primary, .vision-card .card-actions .btn.btn-outline-light{
    border-color:rgba(255,255,255,0.14);color:#fff;background:transparent
}

/* Carousel slide themes: Vision (night-blue), Mission (deep green), others (accent purple) */
.carousel-item[data-cat="Vision"] .featured-card{
    background:linear-gradient(180deg,#001026 0%, #001f3a 100%);
    color:#ffffff;
    border-radius:12px;padding:1rem;
}
.carousel-item[data-cat="Mission"] .featured-card{
    background:linear-gradient(180deg,#073a2a 0%, #0b5a3f 100%);
    color:#ffffff;border-radius:12px;padding:1rem;
}
.carousel-item:not([data-cat="Vision"]):not([data-cat="Mission"]) .featured-card{
    background:linear-gradient(90deg,#283593 0%, #6a1b9a 100%);
    color:#ffffff;border-radius:12px;padding:1rem;
}

.featured-card{transition:transform .4s ease, box-shadow .4s ease}
.carousel-item.active .featured-card{transform:translateY(-4px);box-shadow:0 18px 40px rgba(2,6,23,0.18)}