/* Couche UI commune : elle unifie les composants existants sans modifier leur HTML métier. */
:root {
  --bem-green: #147a45;
  --bem-green-dark: #0b4e2c;
  --bem-green-soft: #eaf6ee;
  --bem-ink: #183127;
  --bem-muted: #5f7067;
  --bem-line: rgba(20, 122, 69, .14);
  --bem-radius: 18px;
  --bem-shadow: 0 14px 38px rgba(14, 61, 34, .10);
}

body { color: var(--bem-ink); line-height: 1.6; }
img { max-width: 100%; }
/* Les animations AOS masquaient des sections entières pendant la navigation mobile. */
[data-aos] { opacity: 1 !important; transform: none !important; transition: none !important; }

a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible {
  outline: 3px solid rgba(20, 122, 69, .36);
  outline-offset: 3px;
}

.section { padding: clamp(3.5rem, 7vw, 6.5rem) 0; }
.section-title { max-width: 760px; margin: 0 auto; padding: 0 0 clamp(2rem, 4vw, 3.5rem); }
.section-title h2 { font-size: clamp(1.8rem, 3vw, 2.7rem); line-height: 1.16; letter-spacing: -.025em; }
.section-title p { color: var(--bem-muted); font-size: clamp(1rem, 1.5vw, 1.125rem); }

/* Bandeaux institutionnels constants : les photos sources restent utilisées dans les contenus,
   mais ne concurrencent plus les titres ni les breadcrumbs. */
.main > .page-title.dark-background {
  position: relative;
  overflow: hidden;
  min-height: 300px;
  display: grid;
  place-items: center;
  background-image: radial-gradient(circle at 10% 0%, rgba(92, 190, 117, .28), transparent 34%), linear-gradient(125deg, #092f1b, #12653a 58%, #0b4025) !important;
}
.main > .page-title.dark-background::before { background: rgba(3, 30, 16, .16); }
.main > .page-title.dark-background h1 { font-size: clamp(2.2rem, 5vw, 4rem); line-height: 1.1; letter-spacing: -.035em; text-wrap: balance; }
.main > .page-title.dark-background p { max-width: 720px; margin-inline: auto; font-size: clamp(1rem, 1.8vw, 1.15rem); }

/* Header desktop */
#header { min-height: 82px; padding: 10px 0; }
#header .logo img { max-height: 62px; width: auto; }
.social-links-header { right: 28px; top: 9px; gap: 13px; padding: 7px 10px; background: rgba(7, 32, 18, .32); backdrop-filter: blur(10px); }
.social-links-header a { width: 28px; height: 28px; display: inline-grid; place-items: center; font-size: 17px; border-radius: 50%; }
.social-links-header a:hover { color: #fff; background: var(--bem-green); }
@media (min-width: 1200px) {
  #header .container-xl { padding-right: 250px; }
  #header .navmenu a, #header .navmenu a:focus { font-size: 16px; padding: 16px 11px; }
}

/* Hero */
.hero.section { padding: 0; }
.hero .hero-container { min-height: min(760px, 92vh); padding: 170px 0 96px; }
.hero .hero-container .overlay { background: linear-gradient(90deg, rgba(4, 29, 16, .82), rgba(5, 30, 16, .52) 52%, rgba(4, 24, 13, .18)); }
.hero .hero-container .hero-content { max-width: 720px; }
.hero .hero-container .hero-content h1 { color: #fff; font-size: clamp(2.25rem, 5vw, 4.5rem); letter-spacing: -.04em; text-wrap: balance; text-shadow: 0 3px 22px rgba(0,0,0,.25); }
.hero .hero-container .hero-content .cta-buttons { flex-wrap: wrap; gap: 12px; }
.hero .hero-container .hero-content .cta-buttons a, .btn, .btn-donate, .contact .btn-submit {
  min-height: 48px; border-radius: 12px; padding: 12px 20px; font-weight: 700; letter-spacing: .01em;
}
.hero .hero-container .hero-content .cta-buttons .btn-primary { background: var(--bem-green); border-color: var(--bem-green); }
.hero .hero-container .hero-content .cta-buttons .btn-primary:hover { background: var(--bem-green-dark); border-color: var(--bem-green-dark); transform: translateY(-2px); }
.event-ticker, .event-ticker .container, .event-ticker .row { background: #fff !important; }
.btn-donate { font-size: .95rem !important; padding: 12px 22px !important; box-shadow: 0 10px 22px rgba(255, 65, 108, .24) !important; }

/* Cartes et images */
.about .mission-vision-row > [class*="col"], .featured-programs .isotope-container > [class*="col"] { display: flex; }
.about .mission-vision-row .value-card, .featured-programs .program-item, .contact .contact-info-box {
  width: 100%; border: 1px solid var(--bem-line); border-radius: var(--bem-radius); box-shadow: var(--bem-shadow);
}
.about .mission-vision-row .value-card { padding: 28px; display: flex; flex-direction: column; }
.about .mission-vision-row .value-card p, .about .mission-vision-row .value-card ol { margin-bottom: 22px; }
.about .mission-vision-row .cta-buttons { margin-top: auto; }
.about .mission-vision-row .cta-buttons .btn-primary { display: inline-flex; min-height: 44px; align-items: center; padding: 10px 16px; border-radius: 10px; }
.featured-programs .program-item { overflow: hidden; background: #fff; }
.featured-programs .program-item > .row { width: 100%; }
.featured-programs .program-image-wrapper { min-height: 100%; height: 100%; }
.featured-programs .program-image-wrapper img { width: 100%; height: 100%; min-height: 230px; object-fit: cover; }
.featured-programs .program-content { padding: 28px; min-height: 230px; }
.featured-programs .program-content h3 { font-size: 1.28rem; line-height: 1.28; }
.featured-programs .program-content p { color: var(--bem-muted); }
.featured-programs .program-btn { min-height: 44px; align-items: center; }
.about .image-stack { height: 440px; }

/* Formulaires, tableaux et pages métier */
.form-control, .form-select, textarea.form-control { min-height: 48px; border-radius: 12px; border-color: var(--bem-line); padding: 11px 14px; }
.form-control:focus, .form-select:focus { border-color: var(--bem-green); box-shadow: 0 0 0 .2rem rgba(20,122,69,.14); }
.contact .contact-info-box { min-height: 100%; padding: 24px; }
.contact .contact-form-wrapper { border-radius: 22px; box-shadow: var(--bem-shadow); }
.contact .map-section iframe { min-height: 360px; }
.opportunite-page .panel-card, .opportunite-page .detail-card { border-radius: var(--bem-radius); }
.opportunite-page .table-responsive { -webkit-overflow-scrolling: touch; }
.opportunite-page table.dataTable { min-width: 680px; }

/* Footer */
.footer { margin-top: 0; }
.footer .footer-top { padding-top: clamp(3rem, 6vw, 5rem); padding-bottom: 2.5rem; }
.footer .social-links a { width: 38px; height: 38px; display: inline-grid; place-items: center; }
.footer .footer-links ul a { display: inline-flex; min-height: 32px; align-items: center; }

/* Navigation, mobile first */
@media (max-width: 1199px) {
  .social-links-header { position: fixed; top: 0; left: 0; right: 0; height: 34px; z-index: 1002; justify-content: center; gap: 11px; padding: 3px 8px; border-radius: 0; background: rgba(7, 32, 18, .9); }
  .social-links-header a { width: 26px; height: 26px; font-size: 15px; }
  #header { top: 34px; min-height: 68px; padding: 8px 0; background: rgba(255,255,255,.96); box-shadow: 0 8px 24px rgba(5, 41, 21, .10); backdrop-filter: blur(14px); }
  body.scrolled #header { background: rgba(255,255,255,.96) !important; }
  #header .container-xl { padding-left: 16px; padding-right: 16px; }
  #header .logo img { max-height: 47px; }
  .mobile-nav-toggle { width: 44px; height: 44px; display: inline-grid; place-items: center; margin: 0; border: 1px solid var(--bem-line); border-radius: 12px; background: var(--bem-green-soft); color: var(--bem-green-dark) !important; font-size: 23px !important; line-height: 1 !important; }
  body.scrolled .mobile-nav-toggle { color: var(--bem-green-dark) !important; border-color: var(--bem-line); background: var(--bem-green-soft); }
  body.mobile-nav-active .mobile-nav-toggle { position: fixed; top: 46px; right: 16px; color: #fff !important; background: var(--bem-green); border-color: transparent; z-index: 100002; }
  body.mobile-nav-active .navmenu { background: rgba(4, 24, 13, .86) !important; }
  body.mobile-nav-active .navmenu>ul { inset: 102px 14px 16px !important; height: calc(100dvh - 118px) !important; border-radius: 18px !important; padding: 12px 0 !important; max-height: none !important; }
  body.mobile-nav-active .navmenu .dropdown ul { display: none !important; margin: 4px 12px 8px !important; padding: 5px 0 !important; border-radius: 12px; }
  body.mobile-nav-active .navmenu .dropdown>.dropdown-active { display: block !important; }
  body.mobile-nav-active .navmenu a, body.mobile-nav-active .navmenu a:focus { min-height: 48px; padding: 12px 20px; font-size: 16px; white-space: normal; }
  .hero .hero-container { min-height: 620px; padding: 178px 0 68px; }
  .hero .hero-container .hero-content { padding-right: 0; }
}

@media (max-width: 767px) {
  .section { padding: 3.5rem 0; }
  .section-title h2:before, .section-title h2:after { display: none; }
  .hero .hero-container { min-height: 610px; padding-top: 178px; align-items: flex-start; }
  .hero .hero-container .hero-content h1 { font-size: clamp(2rem, 9vw, 2.65rem); text-align: left; margin-bottom: 24px; }
  .hero .hero-container .hero-content .cta-buttons { flex-direction: column; align-items: stretch; }
  .hero .hero-container .hero-content .cta-buttons a { width: 100%; max-width: none; }
  .about .image-stack { height: 320px; margin-top: 1.5rem; }
  .about .mission-vision-row .value-card { padding: 24px; }
  .featured-programs .isotope-filters { justify-content: flex-start; flex-wrap: nowrap; overflow-x: auto; padding: 0 0 8px; margin-bottom: 24px; }
  .featured-programs .isotope-filters li { white-space: nowrap; flex: 0 0 auto; }
  .featured-programs .program-image-wrapper, .featured-programs .program-image-wrapper img { min-height: 210px; height: 210px; }
  .featured-programs .program-content { min-height: 0; padding: 22px; }
  .contact .contact-info-box { padding: 20px; }
  .contact .map-section iframe { min-height: 280px; }
  .contact .form-container-overlap { margin-top: -38px; }
  .opportunite-page .page-title.dark-background { margin: 0 0 22px; border-radius: 0 0 20px 20px; padding: 124px 0 42px; }
  .main > .page-title.dark-background { min-height: 320px; padding: 122px 18px 42px; }
  .main > .page-title.dark-background h1 { font-size: clamp(2rem, 9vw, 2.65rem); }
  .opportunite-page .panel-card, .opportunite-page .detail-card { padding: 20px 16px; border-radius: 16px; }
  .opportunite-page .dataTables_wrapper .dataTables_filter, .opportunite-page .dataTables_wrapper .dataTables_length { text-align: left; margin-bottom: 14px; }
  .opportunite-page .dataTables_wrapper .dataTables_filter input { width: min(100%, 230px); margin: 8px 0 0; }
  .opportunite-page .section-nav { display: grid; grid-template-columns: 1fr; gap: 8px; }
  .opportunite-page .tab-switch { width: 100%; min-height: 48px; }
  .footer .footer-top { text-align: left; }
  .footer .footer-newsletter .newsletter-form { display: flex; flex-direction: column; gap: 10px; background: transparent; padding: 0; }
  .footer .footer-newsletter .newsletter-form input[type=email], .footer .footer-newsletter .newsletter-form input[type=submit] { width: 100%; border-radius: 10px; min-height: 48px; }
}

@media (max-width: 359px) {
  #header .logo img { max-height: 41px; }
  .mobile-nav-toggle { width: 42px; height: 42px; }
  .hero .hero-container .hero-content h1 { font-size: 1.92rem; }
  .about .image-stack { height: 285px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; }
}