/* =========================================================================
   PADC RD Congo — Theme frontend v2
   -------------------------------------------------------------------------
   Charge APRES bootstrap.min.css et style.css : ce fichier a donc le
   dernier mot sur les conflits.

   Il contient trois familles de regles :
     1. Les jetons de design (variables) et la coque : topbar, navbar, footer.
     2. Les classes ORPHELINES du projet — .page-banner, .page-section,
        .title-section, .subhead, .fg-white... — utilisees dans les vues
        mais definies nulle part. Les styler ici habille d'un coup les
        pages Zones, Expertises, Partenaires, Comptes et Rapports.
     3. La modernisation legere des classes maison deja definies dans
        style.css (.projets_all_1, .card_accordion1, .decore_bar...).
   ========================================================================= */

/* ============================ 1. JETONS ================================= */
:root {
  --padc-green: #15803d;
  --padc-green-dark: #116632;
  --padc-green-soft: #dcfce7;
  --padc-ink: #1e293b;
  --padc-muted: #64748b;
  --padc-surface: #f8f9fa;
  --padc-radius: 1rem;
  --padc-shadow: 0 .125rem .75rem rgba(15, 23, 42, .07);
  --padc-shadow-lg: 0 .75rem 2rem rgba(15, 23, 42, .10);
}

body {
  font-family: 'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  color: var(--padc-ink);
  background-color: #fff;
}

h1, h2, h3, h4, h5 { font-weight: 800; letter-spacing: -.02em; }

.text-padc    { color: var(--padc-green) !important; }
.bg-padc      { background-color: var(--padc-green) !important; }
.bg-padc-soft { background-color: var(--padc-green-soft) !important; }
.bg-surface   { background-color: var(--padc-surface) !important; }
.text-muted-2 { color: var(--padc-muted) !important; }

.btn-padc {
  background-color: var(--padc-green);
  border-color: var(--padc-green);
  color: #fff;
  font-weight: 600;
}
.btn-padc:hover, .btn-padc:focus {
  background-color: var(--padc-green-dark);
  border-color: var(--padc-green-dark);
  color: #fff;
}
.btn-outline-padc {
  border-color: var(--padc-green);
  color: var(--padc-green);
  font-weight: 600;
}
.btn-outline-padc:hover, .btn-outline-padc:focus {
  background-color: var(--padc-green);
  color: #fff;
}

.badge-soft {
  background-color: var(--padc-green-soft);
  color: var(--padc-green-dark);
  font-weight: 600;
}

.section-eyebrow {
  text-transform: uppercase;
  letter-spacing: .09em;
  font-size: .8rem;
  font-weight: 700;
  color: var(--padc-green);
}

.hero-accent {
  width: 84px; height: 6px; border-radius: 999px;
  background: linear-gradient(90deg, var(--padc-green), #4ade80);
}

/* ============================ COQUE : TOPBAR ============================ */
.padc-topbar {
  background-color: var(--padc-ink);
  color: #cbd5e1;
  font-size: .875rem;
}
.padc-topbar a { color: #cbd5e1; text-decoration: none; }
.padc-topbar a:hover { color: #fff; }

/* ============================ COQUE : NAVBAR ===========================
   style.css impose .navbar { position: fixed; overflow: hidden;
   background-color: rgb(234,91,91) }. On neutralise ces trois regles ici,
   sur la navbar du site public uniquement.                                */
.navbar.padc-navbar {
  position: sticky;
  top: 0;
  overflow: visible;
  background-color: #fff !important;
  border-bottom: 1px solid #eef2f6;
  box-shadow: var(--padc-shadow);
  z-index: 1030;
}
.padc-navbar .navbar-brand img { height: 46px; width: auto; }
.padc-navbar .nav-link {
  color: var(--padc-ink);
  font-weight: 600;
  padding-inline: 1rem;
}
.padc-navbar .nav-link:hover,
.padc-navbar .nav-link.active { color: var(--padc-green); }
.padc-navbar .navbar-toggler { border: 0; }
.padc-navbar .navbar-toggler:focus { box-shadow: none; }

/* ============================ COQUE : FOOTER =========================== */
.padc-footer {
  background-color: var(--padc-ink);
  color: #cbd5e1;
  border-top: 5px solid var(--padc-green);
}
.padc-footer h5 { color: #fff; font-size: 1.05rem; }
.padc-footer a { color: #cbd5e1; text-decoration: none; }
.padc-footer a:hover { color: #fff; text-decoration: underline; }
.padc-footer .social a {
  width: 40px; height: 40px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background-color: rgba(255, 255, 255, .08);
  color: #cbd5e1;
}
.padc-footer .social a:hover { background-color: var(--padc-green); color: #fff; }

/* ================== 2. CLASSES ORPHELINES DU PROJET ====================
   Utilisees dans les vues, jamais definies jusqu'ici.                    */

/* Banniere de haut de page (zones, expertises, partenaires, comptes...) */
.page-banner {
  position: relative;
  background-color: var(--padc-green-soft);
  background-size: cover;
  background-position: center;
  min-height: 260px;
  display: flex;
  align-items: center;
  padding-block: 3rem;
}
.page-banner.overlay-dark::before,
.overlay-dark::before {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(90deg, rgba(15, 23, 42, .78), rgba(15, 23, 42, .55));
}
.page-banner > * { position: relative; z-index: 1; }
.page-banner h1 { font-size: clamp(1.8rem, 3.6vw, 2.6rem); margin-bottom: 0; }

.page-banner .breadcrumb { margin-bottom: .5rem; }
.page-banner .breadcrumb a { color: #d7f5e2; text-decoration: none; }
.page-banner .breadcrumb a:hover { color: #fff; }
.page-banner .breadcrumb-item + .breadcrumb-item::before { color: #94a3b8; }
.page-banner .breadcrumb-item.active { color: #fff; }

/* ---- Reparation de la grille -------------------------------------------
   .head_bg_all et .projets_all s'intercalent entre un .row et ses .col-*.
   N'etant pas flex, ils faisaient s'empiler les colonnes au lieu de les
   repartir : c'est ce qui mettait les cartes de /blogs sur une seule
   colonne etroite. On les rend flex, les gouttieres Bootstrap heritees
   du .row parent continuent de fonctionner.                              */
   Le :has() est indispensable : .projets_all sert aussi de conteneur a
   l'accordeon de /nos-rapports-padc, ou passer en flex mettait les
   panneaux cote a cote au lieu de les empiler. On ne passe en flex que
   si l'element contient bien des colonnes. */
.head_bg_all,
.projets_all:has(> [class*="col-"]) {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
}

/* .container1_1 portait padding-top: 120px et une image de fond de 1,3 Mo
   pour compenser l'ancienne navbar en position fixed. La navbar etant
   desormais sticky (donc dans le flux), cette compensation ne laissait
   qu'un grand vide en haut de page. On neutralise ; c'est .head_bg_all
   qui joue le role de banniere. */
.container1_1 {
  background-image: none;
  padding-top: 0;
  padding-bottom: 0;
}

/* Banniere de page, utilisee par blogs/all, rapports/all, contact...
   Fil d'ariane et titre sur la meme ligne : la banniere reste compacte et
   la page demarre plus haut. Le second selecteur couvre les vues ou un
   .col-sm-12 s'intercale entre .head_bg_all et le contenu. */
.head_bg_all {
  padding: 1.75rem 2rem;
  background: linear-gradient(120deg, var(--padc-green-soft), #f0fdf4);
  border-radius: var(--padc-radius);
  margin-block: 1.75rem;
  align-items: baseline;
  column-gap: 1.25rem;
  row-gap: .25rem;
}
.head_bg_all > [class*="col-"] {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  column-gap: 1.25rem;
  row-gap: .25rem;
  width: 100%;
}
.head_bg_all p {
  text-transform: uppercase;
  letter-spacing: .09em;
  font-size: .8rem;
  font-weight: 700;
  color: var(--padc-green);
  margin-bottom: 0;
  order: 2;
}
.head_bg_all h4 {
  font-size: clamp(1.4rem, 2.8vw, 2rem);
  margin-bottom: 0;
  color: var(--padc-ink);
  order: 1;
}

/* Sections generiques */
.page-section { padding-block: 4rem; }
.page-section.bg-light-gray { background-color: var(--padc-surface); }

.title-section {
  font-size: clamp(1.6rem, 3.2vw, 2.25rem);
  margin-bottom: .75rem;
}
.title-section + .subhead,
.subhead {
  color: var(--padc-muted);
  max-width: 44rem;
  margin-inline: auto;
  margin-bottom: 2rem;
}

/* Utilitaires de couleur du theme d'origine */
.fg-white { color: #fff !important; }
.fg-grey  { color: var(--padc-muted) !important; }
.fg-green { color: var(--padc-green) !important; }

/* Conteneur absent de style.css (blogs/all, rapports/all) */
.container6 { padding-block: 2rem 4rem; }

/* ---- Page Contact -------------------------------------------------------
   .container_form_all n'etait defini nulle part : le formulaire etait nu. */
.container1_contact { padding-block: 1rem 4rem; }

.container_form_all {
  background-color: #fff;
  border-radius: var(--padc-radius);
  box-shadow: var(--padc-shadow);
  padding: 2rem;
}
.container_form_all .form-label {
  font-size: .875rem;
  font-weight: 600;
  color: var(--padc-ink);
  margin-bottom: .35rem;
}
/* style.css impose background-color: rgb(222,255,222) via
   ".container_form_all form input" et "... form textarea" : d'ou les champs
   vert pale. On revient a du blanc, plus lisible sur la carte blanche. */
.container_form_all form input,
.container_form_all form textarea,
.container_form_all .form-control {
  background-color: #fff !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: .65rem;
  padding: .7rem .9rem !important;
  font-size: .95rem;
}
.container_form_all .form-control:focus {
  border-color: var(--padc-green) !important;
  box-shadow: 0 0 0 .2rem rgba(21, 128, 61, .12);
}
.container_form_all textarea.form-control { min-height: 150px; }

/* style.css impose ".container_form_all button { width:200px; height:45px }".
   Le libelle et l'icone ne tenaient pas dans cette boite : le texte passait
   a la ligne et debordait du bouton. On laisse le bouton se dimensionner. */
.container_form_all button[type="submit"] {
  width: auto !important;
  height: auto !important;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .4rem;
  background-color: var(--padc-green);
  border: 0;
  color: #fff;
}
.container_form_all button[type="submit"]:hover {
  background-color: var(--padc-green-dark);
}

/* ---- Carte de coordonnees (colonne gauche) ----
   L'ancien .plus_info-all_1 avait height:100% alors qu'un titre le
   precedait dans la meme colonne : la carte depassait donc la hauteur de
   la rangee et mordait sur le pied de page. On dimensionne au contenu. */
.contact-card {
  background-color: var(--padc-green-soft);
  border-radius: var(--padc-radius);
  padding: 1.5rem;
}
.contact-line {
  display: flex;
  align-items: flex-start;
  gap: .85rem;
}
.contact-line + .contact-line {
  margin-top: 1.1rem;
  padding-top: 1.1rem;
  border-top: 1px solid rgba(21, 128, 61, .15);
}
.contact-icon {
  flex: 0 0 auto;
  width: 42px; height: 42px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: .75rem;
  background-color: #fff;
  color: var(--padc-green);
  font-size: 1.1rem;
}
.contact-label {
  display: block;
  font-size: .75rem;
  text-transform: uppercase;
  letter-spacing: .06em;
  font-weight: 700;
  color: var(--padc-green-dark);
  margin-bottom: .15rem;
}
.contact-line a,
.contact-line span:not(.contact-label):not(.contact-icon) {
  color: var(--padc-ink);
  font-size: .95rem;
  text-decoration: none;
  word-break: break-word;
}
.contact-line a:hover { color: var(--padc-green); text-decoration: underline; }

/* Cartes de listing generiques */
.portfolio,
.team-wrap,
.post-card {
  background-color: #fff;
  border: 0;
  border-radius: var(--padc-radius);
  box-shadow: var(--padc-shadow);
  overflow: hidden;
  height: 100%;
  transition: transform .25s ease, box-shadow .25s ease;
}
.portfolio:hover,
.team-wrap:hover,
.post-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--padc-shadow-lg);
}
.portfolio img,
.team-wrap img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; }

.post-title,
.team-content h5 {
  font-size: 1.05rem;
  line-height: 1.4;
  margin-bottom: .5rem;
}
.post-title a { color: var(--padc-ink); text-decoration: none; }
.post-title a:hover { color: var(--padc-green); }

.author, .author-info { display: flex; align-items: center; gap: .6rem; }
.author-name { font-weight: 600; font-size: .875rem; color: var(--padc-ink); }
.avatar {
  width: 40px; height: 40px; border-radius: 50%;
  object-fit: cover; flex: 0 0 auto;
}
.entry-footer {
  border-top: 1px solid #eef2f6;
  padding-top: .85rem;
  margin-top: .85rem;
  font-size: .85rem;
  color: var(--padc-muted);
}

.social-button a,
.social-mini-button a {
  display: inline-flex; align-items: center; justify-content: center;
  width: 36px; height: 36px; border-radius: 50%;
  background-color: var(--padc-green-soft);
  color: var(--padc-green);
  margin-right: .35rem;
  text-decoration: none;
}
.social-button a:hover,
.social-mini-button a:hover { background-color: var(--padc-green); color: #fff; }

/* ============ 3. MODERNISATION DES CLASSES MAISON EXISTANTES =========== */

/* Cartes de projets (home, blogs/all) */
.projets_all_1 {
  background-color: #fff;
  border-radius: var(--padc-radius);
  box-shadow: var(--padc-shadow);
  overflow: hidden;
  height: 100%;
  display: flex;
  flex-direction: column;
  transition: transform .25s ease, box-shadow .25s ease;
}
.projets_all_1:hover {
  transform: translateY(-4px);
  box-shadow: var(--padc-shadow-lg);
}
/* style.css imposait margin-bottom: 80px : une fois la grille reparee,
   l'ecart entre les rangees devenait demesure. */
.projets_all_1 { margin-bottom: 1.5rem !important; }
/* height="250em" en attribut HTML est invalide ; on cadre par le CSS. */
.projets_all_1 img {
  width: 100%;
  height: auto !important;
  aspect-ratio: 16 / 10;
  object-fit: cover;
}
.projets_all_1 h3 {
  font-size: 1.02rem;
  line-height: 1.45;
  padding: 0 1rem;
  margin-top: .5rem;
  color: var(--padc-ink);
}
.projets_all_dateandequipe p {
  font-size: .82rem;
  color: var(--padc-muted);
  padding: .85rem 1rem 0;
  margin-bottom: 0;
  display: flex;
  justify-content: space-between;
  gap: .75rem;
}
.projets_all_dateandequipe i { margin-right: .35rem; color: var(--padc-green); }

.main_button_project { margin-top: auto; padding: 1rem; }
.main_button_project .read-more-btn,
.read-more-btn {
  background-color: var(--padc-green);
  border: 0;
  border-radius: 999px;
  padding: .5rem 1.25rem;
  transition: background-color .25s ease;
}
.read-more-btn:hover { background-color: var(--padc-green-dark); }
.read-more-btn a { color: #fff; text-decoration: none; font-weight: 600; font-size: .9rem; }

/* Accordeon FAQ */
.card_accordion1 {
  border: 0 !important;
  border-radius: var(--padc-radius) !important;
  box-shadow: var(--padc-shadow);
  margin-bottom: 1rem;
  overflow: hidden;
}
.card_accordion1 .card-header { background-color: #fff; border-bottom: 0; }
.card_accordion1 a { color: var(--padc-green); font-weight: 700; }

/* Barres decoratives : on aligne sur le degrade du theme */
.decore_bar, .decore_bar2, .decore_bar_mission, .decore_bar_mission2 {
  background-image: linear-gradient(90deg, var(--padc-green), #4ade80);
}

/* Cartes de mission */
.mission-row1 p, .mission-row2 p {
  border-radius: var(--padc-radius);
  box-shadow: var(--padc-shadow);
  font-size: .9rem;
  color: var(--padc-muted);
  transition: transform .25s ease, box-shadow .25s ease;
}
.mission-row1 p:hover, .mission-row2 p:hover {
  transform: translateY(-4px);
  box-shadow: var(--padc-shadow-lg);
}

/* Pastille d'icone reutilisable */
.icon-badge {
  width: 56px; height: 56px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 1rem;
  background-color: var(--padc-green-soft);
  color: var(--padc-green);
  font-size: 1.6rem;
}

/* Carte generique du theme */
.card-padc {
  border: 0;
  border-radius: var(--padc-radius);
  background-color: #fff;
  transition: transform .25s ease, box-shadow .25s ease;
}
.card-padc:hover {
  transform: translateY(-4px);
  box-shadow: var(--padc-shadow-lg) !important;
}

/* ======================= CARROUSEL DU HERO ============================= */
.hero {
  background:
    radial-gradient(1100px 420px at 12% -10%, var(--padc-green-soft) 0%, transparent 60%),
    #fff;
  padding-block: 4.5rem;
}
.hero h1 { font-size: clamp(2rem, 4.4vw, 3.35rem); line-height: 1.12; }
.hero-img { aspect-ratio: 4 / 3; object-fit: cover; width: 100%; }

#heroCarousel .carousel-item::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(15, 23, 42, .72) 0%, rgba(15, 23, 42, 0) 45%);
  pointer-events: none;
}
#heroCarousel .carousel-caption { z-index: 2; left: 8%; right: 8%; bottom: 1.5rem; }
#heroCarousel .carousel-indicators [data-bs-target] {
  width: 10px; height: 10px; border-radius: 50%; border: 0; opacity: .6;
}
#heroCarousel .carousel-indicators .active { opacity: 1; background-color: #4ade80; }
#heroCarousel .carousel-control-prev-icon,
#heroCarousel .carousel-control-next-icon {
  background-color: rgba(15, 23, 42, .45);
  border-radius: 50%;
  padding: 1.25rem;
  background-size: 45%;
}

/* ======================= BANDEAU PARTENAIRES =========================== */
.partner-logo {
  max-height: 64px; width: auto; max-width: 100%;
  transition: transform .25s ease;
}
.partner-logo:hover { transform: scale(1.06); }
.partner-tile {
  background-color: #fff;
  border-radius: var(--padc-radius);
  padding: 1.25rem 1rem;
  min-height: 110px;
  display: flex; align-items: center; justify-content: center;
  box-shadow: var(--padc-shadow);
}

/* La piste contient la liste DEUX fois ; la translater de -50 % rend la
   boucle invisible. */
.partners-marquee {
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}
.partners-track {
  display: flex;
  width: max-content;
  gap: 1.5rem;
  animation: partners-scroll 40s linear infinite;
}
.partners-marquee:hover .partners-track { animation-play-state: paused; }
.partners-track .partner-tile { flex: 0 0 auto; width: 210px; }

@keyframes partners-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* ======================= CHIFFRES CLES ================================= */
.stats { background-color: var(--padc-green); color: #fff; }
.stats .stat-value { font-size: clamp(1.9rem, 3.4vw, 2.75rem); font-weight: 800; line-height: 1; }
.stats .stat-label { color: #d7f5e2; font-size: .95rem; }
.stats .stat-item + .stat-item { border-left: 1px solid rgba(255, 255, 255, .18); }
@media (max-width: 767.98px) {
  .stats .stat-item + .stat-item { border-left: 0; }
}

/* ======================= PROJETS (home) =============================== */
.project-img { aspect-ratio: 16 / 10; object-fit: cover; width: 100%; }
.project-title {
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical;
  overflow: hidden; min-height: 4.5rem;
}
.link-padc { color: var(--padc-green); font-weight: 600; text-decoration: none; }
.link-padc:hover { text-decoration: underline; }

/* Resume borne a 3 lignes : sans cela les cartes d'une meme rangee
   prenaient des hauteurs tres inegales selon la longueur du texte. */
.project-excerpt {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ---- Page de detail d'un projet ---- */
.article-cover {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}
.article-body {
  font-size: 1.05rem;
  line-height: 1.75;
  color: #334155;
}
.article-body p { margin-bottom: 1.15rem; }
.article-body img {
  max-width: 100%;
  height: auto;
  border-radius: var(--padc-radius);
  margin-block: 1.5rem;
}
.article-body h1, .article-body h2, .article-body h3,
.article-body h4, .article-body h5 {
  font-size: 1.25rem;
  margin-top: 2rem;
  margin-bottom: .75rem;
  color: var(--padc-ink);
}
.article-body ul, .article-body ol { padding-left: 1.25rem; margin-bottom: 1.15rem; }
.article-body a { color: var(--padc-green); }
/* Le contenu vient d'un editeur WYSIWYG : on neutralise les polices et
   tailles imposees en ligne, qui casseraient la mise en page. */
.article-body font,
.article-body span { font-family: inherit !important; font-size: inherit !important; }

/* ---- Ligne de telechargement d'un rapport ---- */
.report-row {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
}
.report-icon {
  flex: 0 0 auto;
  width: 44px; height: 44px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: .75rem;
  background-color: var(--padc-green-soft);
  color: var(--padc-green);
  font-size: 1.25rem;
}

/* Boutons d'accordeon : fond blanc, chevron vert */
.accordion-button {
  background-color: #fff;
  color: var(--padc-ink);
}
.accordion-button:not(.collapsed) {
  background-color: var(--padc-green-soft);
  color: var(--padc-green-dark);
  box-shadow: none;
}
.accordion-button:focus {
  box-shadow: 0 0 0 .2rem rgba(21, 128, 61, .12);
  border-color: transparent;
}

.section { padding-block: 4.5rem; }

/* ============ CONTENU ISSU DE L'EDITEUR WYSIWYG =======================
   Les champs faqs.description et apropos.apropos contiennent du HTML
   d'editeur : font-family "Times New Roman", color #0000FF, balises
   <font>, tailles en dur. Sans neutralisation, ce balisage ecrase la
   typographie du theme. On force l'heritage tout en laissant vivre les
   listes, les gras et les badges.                                        */
.faq-body,
.faq-body * {
  font-family: inherit !important;
  font-size: inherit !important;
  line-height: inherit !important;
}
.faq-body font,
.faq-body span:not(.badge) { color: inherit !important; }
.faq-body h1, .faq-body h2, .faq-body h3,
.faq-body h4, .faq-body h5, .faq-body h6 {
  font-size: 1rem !important;
  font-weight: 600;
  color: var(--padc-ink) !important;
  margin-bottom: .35rem;
}
.faq-body ul, .faq-body ol { padding-left: 1.25rem; }
.faq-body p:last-child { margin-bottom: 0; }
.faq-body .badge { color: #fff !important; }

/* ======================= ACCESSIBILITE ================================= */
@media (prefers-reduced-motion: reduce) {
  .card-padc, .partner-logo, .projets_all_1, .portfolio, .team-wrap {
    transition: none;
  }
  .card-padc:hover, .projets_all_1:hover, .portfolio:hover, .team-wrap:hover {
    transform: none;
  }
  .partners-track {
    animation: none;
    flex-wrap: wrap;
    width: 100%;
    justify-content: center;
  }
  .partners-marquee { -webkit-mask-image: none; mask-image: none; }
  .partners-track > *:nth-child(n+9) { display: none; }
}