/* =====================================================================
   OXYGÈNE — Modernisation des sections + montée en puissance du VERT
   Chargé après oxygene-brand.css. Ne touche pas au HTML : style seul.
   Concept : "Respiration verte" — rythme vert/blanc/dark, cartes
   modernes, duo-ton vert+orange, ambiances organiques.
   ===================================================================== */

:root {
  --oxy-green: #098547;
  --oxy-green-deep: #06623a;
  --oxy-green-soft: #f1f8f4;
  --oxy-green-tint: #eaf4ee;
  --oxy-green-line: rgba(9, 133, 71, 0.16);
  --oxy-orange: #f8a73c;
}

/* ---------------------------------------------------------------------
   1. LABELS DE SECTION (eyebrow) → pastille verte duo-ton
   Ajoute du vert sur CHAQUE titre de section du site.
   --------------------------------------------------------------------- */
.sec-heading .sub-title {
  background: var(--oxy-green-soft);
  border: 1.5px solid var(--oxy-green-line);
  border-radius: 30px;
  padding: 7px 18px 7px 26px !important;
  color: var(--oxy-green-deep);
}
.sec-heading .sub-title::before {
  width: 7px;
  height: 7px;
  inset-inline-start: 12px;
  background-color: var(--oxy-green);
}
.sec-heading .sub-title::after {
  display: none;
}

/* Petit accent vert sous les grands titres de section */
.sec-heading .sec-title {
  position: relative;
}

/* ---------------------------------------------------------------------
   2. CARTES STATISTIQUES (impact) → cartes blanches modernes,
   accent vert en haut, ombre douce, survol qui bascule en orange.
   --------------------------------------------------------------------- */
.h8-feature-item.style-4 {
  background-color: #ffffff !important;
  border-radius: 20px !important;
  border: 1px solid var(--oxy-green-line) !important;
  border-top: 3px solid var(--oxy-green) !important;
  box-shadow: 0 12px 30px rgba(37, 33, 32, 0.06);
  padding: 34px 32px !important;
}
.h8-feature-item.style-4:hover {
  transform: translateY(-6px);
  box-shadow: 0 20px 46px rgba(9, 133, 71, 0.16);
  border-top-color: var(--oxy-orange) !important;
}
/* Le chiffre reste orange, on ajoute un petit tiret vert sous le titre */
.h8-feature-item.style-4 .feature-content .title {
  position: relative;
  padding-bottom: 12px;
}
.h8-feature-item.style-4 .feature-content .title::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 34px;
  height: 3px;
  border-radius: 3px;
  background: var(--oxy-green);
}

/* ---------------------------------------------------------------------
   3. RYTHME DES FONDS — alternance verte / claire / sombre
   --------------------------------------------------------------------- */

/* Section impact/feature : ambiance vert très doux (les cartes blanches ressortent) */
.tj-feature-section {
  background: linear-gradient(180deg, #ffffff 0%, var(--oxy-green-tint) 100%);
}

/* Section initiatives/services : voile vert subtil + halo organique */
.tj-service-section {
  position: relative;
  background: linear-gradient(180deg, var(--oxy-green-soft) 0%, #ffffff 60%);
  overflow: hidden;
}
.tj-service-section::before {
  content: "";
  position: absolute;
  top: -120px;
  inset-inline-end: -140px;
  width: 460px;
  height: 460px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(9, 133, 71, 0.10) 0%, rgba(9, 133, 71, 0) 70%);
  pointer-events: none;
  z-index: 0;
}
.tj-service-section .container {
  position: relative;
  z-index: 1;
}

/* ---------------------------------------------------------------------
   4. CARTE BILAN → dégradé désormais à dominante VERTE (vert → orange)
   --------------------------------------------------------------------- */
.tj-bilan-section {
  background: var(--oxy-green-soft);
}
.tj-bilan-card {
  background: linear-gradient(135deg, var(--oxy-green) 0%, var(--oxy-green-deep) 45%, #b06a2b 82%, var(--oxy-orange) 100%) !important;
  box-shadow: 0 24px 60px rgba(9, 133, 71, 0.22);
}
/* Badge du bilan : verre dépoli plus net */
.tj-bilan-badge {
  background: rgba(255, 255, 255, 0.16) !important;
  border: 1px solid rgba(255, 255, 255, 0.28);
}

/* ---------------------------------------------------------------------
   5. CTA NEWSLETTER → bloc VERT photographique (au lieu de l'orange plein)
   --------------------------------------------------------------------- */
.h4-cta-section {
  background-color: var(--oxy-green-deep) !important;
}
.h4-cta-section .thumb::before {
  background: linear-gradient(180deg, rgba(9, 133, 71, 0) 0%, var(--oxy-green-deep) 100%) !important;
}
.h4-cta-section .thumb img {
  opacity: 0.16;
}

/* ---------------------------------------------------------------------
   6. BANDE PARTENAIRES → bande VERTE distinctive (les cartes blanches ressortent)
   --------------------------------------------------------------------- */
.tj-partners-marquee-section {
  background: linear-gradient(120deg, var(--oxy-green-deep) 0%, var(--oxy-green) 100%) !important;
}
.partners-label {
  color: #ffffff !important;
}
.partners-subtitle {
  color: rgba(255, 255, 255, 0.85) !important;
}
.partners-divider-title .divider-line {
  background: rgba(255, 255, 255, 0.5) !important;
}
.partner-card {
  box-shadow: 0 8px 22px rgba(6, 98, 58, 0.18);
}

/* ---------------------------------------------------------------------
   7. DÉTAILS MODERNES — coins plus doux + survol sur les cartes de contenu
   --------------------------------------------------------------------- */
.tj-blog-item,
.tj-blog-item .blog-thumb,
.tj-blog-item .blog-thumb img {
  border-radius: 18px;
}
.tj-blog-item {
  transition: transform 0.35s ease, box-shadow 0.35s ease;
}
.tj-blog-item:hover {
  transform: translateY(-6px);
  box-shadow: 0 22px 48px rgba(9, 133, 71, 0.14);
}
/* Catégories / tags de blog en vert */
.tj-blog-item .blog-meta .category,
.tj-blog-item .post-cat,
.tj-blog-item .tj-blog-tag a {
  color: #ffffff !important;
  background: var(--oxy-green) !important;
}

/* =====================================================================
   OXYGÈNE — Étape 2 : signatures distinctives par section (accueil)
   ===================================================================== */

/* ---- HERO : fine barre organique vert→orange en pied de hero ---- */
.tj-hero-slider.style-1 { position: relative; }
.tj-hero-slider.style-1::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 5px;
  background: linear-gradient(90deg, var(--oxy-green) 0%, var(--oxy-green) 45%, var(--oxy-orange) 55%, var(--oxy-orange) 100%);
  z-index: 5;
}

/* ---- ADN : accordéon plus vert et plus marqué à l'ouverture ---- */
.tj-adn-section .adn-item {
  border-radius: 14px;
  padding-inline: 8px;
  transition: background .35s ease, box-shadow .35s ease;
}
.tj-adn-section .adn-item.active {
  background: rgba(9, 133, 71, 0.14);
  box-shadow: inset 4px 0 0 var(--oxy-green);
}
.tj-adn-section .adn-item.active .adn-num,
.tj-adn-section .adn-header:hover .adn-num {
  color: #2ec26f !important;            /* vert lumineux sur fond sombre */
}
.tj-adn-section .adn-cat {
  color: var(--oxy-orange) !important;  /* duo-ton : catégorie orange */
}
.tj-adn-section .adn-item.active .adn-btn {
  background: var(--oxy-green) !important;
  border-color: var(--oxy-green) !important;
  color: #fff !important;
}

/* ---- BRAZZA : pastille de localisation verte ---- */
.tj-brazza-location,
.tj-brazza-content .location {
  color: #fff;
}

/* =====================================================================
   OXYGÈNE — Pages internes : bannière d'en-tête modernisée + accents
   S'applique à TOUTES les pages (about, formations, contact, blog...).
   ===================================================================== */

/* ---- Bannière : voile vert diagonal (au lieu du gris sombre) ---- */
.tj-page-header::before {
  background: linear-gradient(120deg, rgba(6,98,58,0.94) 0%, rgba(9,133,71,0.60) 46%, rgba(37,33,32,0.78) 100%) !important;
}
/* fine barre organique vert→orange en pied de bannière */
.tj-page-header::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 5px;
  background: linear-gradient(90deg, var(--oxy-green) 0%, var(--oxy-green) 50%, var(--oxy-orange) 50%, var(--oxy-orange) 100%);
  z-index: 3;
}
/* petit trait orange sous le titre de page */
.tj-page-header-content .tj-page-title {
  position: relative;
}
.tj-page-header-content .tj-page-title::after {
  content: "";
  display: block;
  width: 66px;
  height: 4px;
  border-radius: 4px;
  background: var(--oxy-orange);
  margin: 20px auto 0;
}
.tj-page-header-content.text-start .tj-page-title::after,
.tj-page-header-content:not(.text-center) .tj-page-title::after {
  margin-inline: 0;
}

/* ---- Fil d'Ariane en pilule moderne (verre dépoli) ---- */
.tj-page-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 22px;
  padding: 9px 22px;
  border-radius: 30px;
  background: rgba(255, 255, 255, 0.10);
  -webkit-backdrop-filter: blur(6px);
          backdrop-filter: blur(6px);
  border: 1px solid rgba(255, 255, 255, 0.18);
}
.tj-page-link a span,
.tj-page-link > span {
  color: rgba(255, 255, 255, 0.92);
}
.tj-page-link a:hover span {
  color: var(--oxy-orange);
}

/* ---- Icônes de service/feature : fond circulaire vert doux ---- */
.service-icon,
.feature-icon-box,
.tj-iconbox .icon {
  color: var(--oxy-green);
}

/* =====================================================================
   OXYGÈNE — Composants transverses (TOUT LE SITE) : accent vert + modernité
   Ces classes sont définies dans les <style> du <head> de chaque page ;
   cette feuille se charge après → elle fait autorité partout.
   ===================================================================== */

/* ---- CTA : tous les blocs orange pleins deviennent VERTS ---- */
.tj-cta-section {
  background-color: var(--oxy-green-deep) !important;
  background-image: linear-gradient(120deg, var(--oxy-green-deep) 0%, var(--oxy-green) 100%) !important;
}

/* ---- Cartes sur fond clair : liseré vert en haut + coins doux + survol vert ---- */
.act-campaign-card,
.formation-card,
.pk-logo-card,
.support-type-card,
.paiement-card,
.med-stat-card,
.vp-card,
.stat-card,
.contact-item {
  border-top: 3px solid var(--oxy-green) !important;
  border-radius: 18px !important;
}
.act-campaign-card:hover,
.formation-card:hover,
.pk-logo-card:hover,
.support-type-card:hover,
.vp-card:hover,
.stat-card:hover {
  box-shadow: 0 16px 42px rgba(9, 133, 71, 0.16) !important;
  transform: translateY(-5px) !important;
}

/* ---- Onglets Formations : état actif en vert ---- */
.formations-tab.active,
.formations-tab:hover {
  background: var(--oxy-green) !important;
  border-color: var(--oxy-green) !important;
  color: #fff !important;
}
.formations-grid-section {
  background: var(--oxy-green-soft) !important;
}

/* ---- Cartes sur fond sombre (missions, principes) : accents verts ---- */
.mission-card .mc-num {
  background: var(--oxy-green) !important;
}
.mission-card:hover {
  border-color: rgba(9, 133, 71, 0.45) !important;
}
.mission-bullets li::before {
  background: var(--oxy-green) !important;
}
.principe-card {
  border-top: 3px solid var(--oxy-green) !important;
  border-radius: 14px;
}
.pr-icon {
  background: linear-gradient(135deg, var(--oxy-green) 0%, #0bab5a 100%) !important;
}

/* ---- Petits éléments verts (badges date, tags, puces) ---- */
.act-card-date {
  background: rgba(9, 133, 71, 0.08) !important;
  color: var(--oxy-green-deep) !important;
  border-color: rgba(9, 133, 71, 0.22) !important;
}

/* ---- Sections claires génériques → soupçon de vert ---- */
.act-coming-section {
  background: var(--oxy-green-soft) !important;
}

/* ---- Cartes tableau de bord (admin/user) : entête vert ---- */
.dash-card,
.admin-card {
  border-radius: 16px !important;
}
.dash-card:hover,
.admin-card:hover {
  box-shadow: 0 14px 34px rgba(9, 133, 71, 0.12) !important;
}

/* ---------------------------------------------------------------------
   Figure de section (image dans chaque page de contenu) — placeholders
   à remplacer progressivement par les visuels définitifs.
   --------------------------------------------------------------------- */
.oxy-figure{
  max-width:1080px;margin:0 auto 46px;border-radius:20px;overflow:hidden;
  box-shadow:0 22px 55px -20px rgba(37,33,32,.22);
  border:1px solid rgba(9,133,71,.10);
}
.oxy-figure img{ width:100%;height:clamp(240px,40vw,460px);object-fit:cover;display:block; }