/* ═══════════════════════════════════════════════════
   Couleurs officielles du logo HUMAN CARE FOR WORLD
   Vert globe + Noir texte + Blanc fond
   (Ne modifie pas la mise en page — couleurs uniquement)
   ═══════════════════════════════════════════════════ */

:root {
  /* Vert du logo (globe & mains) */
  --green: #28a745;
  --green-light: #34c759;
  --green-dark: #1e7e34;
  --green-deep: #157a32;
  --green-glow: rgba(40, 167, 69, 0.38);

  /* Noir du logo */
  --logo-black: #111111;
  --gray-900: #111111;
  --gray-800: #222222;

  /* Dérivés verts pour fonds légers */
  --off-white: #f9fcf9;
  --cream: #f8faf8;
  --gray-100: #f0f7f1;
  --gray-200: #dce9de;

  /* Bleus → teintes vertes (harmonie logo, sans changer la structure) */
  --blue: #1e7e34;
  --blue-light: #28a745;
  --blue-dark: #157a32;
}

/* Barre de progression — vert logo */
.scroll-progress {
  background: linear-gradient(90deg, var(--green-dark), var(--green), var(--green-light));
}

/* Header — filet vert logo */
.header {
  border-bottom-color: rgba(40, 167, 69, 0.12);
}

.nav__link::after {
  background: var(--green);
}

/* Boutons — vert logo */
.btn--primary,
.header .btn--primary {
  background: linear-gradient(135deg, var(--green) 0%, var(--green-dark) 100%);
  border-color: var(--green-dark);
  box-shadow: 0 6px 24px var(--green-glow);
}

.btn--primary:hover {
  background: linear-gradient(135deg, var(--green-dark) 0%, var(--green-deep) 100%);
}

.btn--secondary {
  background: linear-gradient(135deg, var(--green-dark) 0%, var(--green-deep) 100%);
  border-color: var(--green-deep);
}

.btn--outline {
  color: var(--green-dark);
  border-color: var(--green);
}

.btn--outline:hover {
  background: var(--green);
  border-color: var(--green);
}

/* Or → vert logo pour cohérence (même taille/rendu, autre teinte) */
.btn--gold {
  background: linear-gradient(135deg, var(--green-light) 0%, var(--green) 100%);
  color: var(--white);
  box-shadow: 0 8px 24px var(--green-glow);
}

.btn--gold:hover {
  color: var(--white);
  background: linear-gradient(135deg, var(--green) 0%, var(--green-dark) 100%);
}

/* Labels & titres accent */
.section-label {
  color: var(--green-dark);
  background: rgba(40, 167, 69, 0.1);
  border-color: rgba(40, 167, 69, 0.18);
}

.hero__title em,
.impact-item__number,
.carousel__tag {
  color: inherit;
}

.hero__title em {
  background: linear-gradient(135deg, var(--green-dark) 0%, var(--green) 50%, var(--green-light) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* Carrousel — overlay vert logo */
.carousel__overlay {
  background: linear-gradient(
    105deg,
    rgba(21, 122, 50, 0.9) 0%,
    rgba(30, 126, 52, 0.72) 50%,
    rgba(0, 0, 0, 0.2) 100%
  );
}

.carousel__progress {
  background: linear-gradient(90deg, var(--green-dark), var(--green), var(--green-light));
}

.carousel__btn:hover {
  background: var(--green);
  border-color: var(--green);
}

/* Piliers — couleurs par carte (premium.css) */
.pillar-card a:hover {
  color: #fff;
}

/* Cartes — accent vert */
.card::after,
.action-block::before {
  background: linear-gradient(90deg, var(--green-dark), var(--green));
}

/* Icônes — dégradé logo (animation dans premium.css) */
.card__icon,
.action-block__icon,
.engage-path__num {
  background: linear-gradient(135deg, var(--green-dark), var(--green));
}

.card__tag {
  color: var(--green-dark);
  background: rgba(40, 167, 69, 0.12);
}

.card:hover {
  border-color: rgba(40, 167, 69, 0.35);
}

/* Présidente — citation verte */
.president__quote {
  border-left-color: var(--green);
}

.president__photo-badge {
  color: var(--green-dark);
}

.president__trait {
  background: rgba(40, 167, 69, 0.08);
}

/* Impact strip — dégradé vert logo */
.impact-strip {
  background: linear-gradient(135deg, var(--green-dark) 0%, var(--green) 50%, var(--green-light) 100%);
}

/* Sections sombres */
.section--dark,
.testimonials,
.ticker {
  background: linear-gradient(135deg, var(--green-deep) 0%, var(--green-dark) 55%, #0d3d1f 100%);
}

.mega-cta {
  background: linear-gradient(135deg, var(--green-dark) 0%, var(--green) 60%, var(--green-light) 100%);
  box-shadow: var(--shadow-lg), 0 12px 40px var(--green-glow);
}

.cta-banner {
  background: linear-gradient(135deg, var(--green-deep) 0%, var(--green-dark) 100%);
}

/* Témoignages — étoiles vert clair */
.testimonial__stars {
  color: var(--green-light);
}

.testimonial__avatar {
  background: linear-gradient(135deg, var(--green-dark), var(--green));
}

/* Footer — accent vert au survol */
.footer__social a:hover {
  background: var(--green);
}

.footer__links a:hover {
  color: var(--green-light);
}

/* Timeline & vision */
.timeline-item {
  border-left-color: var(--green);
}

.timeline-item::before {
  background: var(--green);
}

.vision-list li::before {
  background: var(--green);
}

.value-item:hover {
  border-color: var(--green);
  background: rgba(40, 167, 69, 0.05);
}

/* Formulaire focus */
.form-group input:focus,
.form-group textarea:focus,
.form-group select:focus {
  border-color: var(--green);
  box-shadow: 0 0 0 3px rgba(40, 167, 69, 0.18);
}

/* Sticky CTA */
.sticky-cta {
  border-top-color: rgba(40, 167, 69, 0.25);
}

.sticky-cta__text strong {
  color: var(--green-light);
}

/* Page hero photo overlay — teinte verte légère */
.page-hero--photo::after {
  background: linear-gradient(
    to top,
    rgba(21, 122, 50, 0.75) 0%,
    rgba(30, 126, 52, 0.35) 60%,
    rgba(0, 0, 0, 0.15) 100%
  );
}

/* S'engager : overlay neutre (texte sous la bannière) — logos lisibles */
.engage-page .page-hero--photo::after {
  background: linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0.06) 0%,
    rgba(0, 0, 0, 0) 18%,
    rgba(0, 0, 0, 0) 100%
  );
  pointer-events: none;
}

/* Story quote */
.story-quote {
  background: linear-gradient(135deg, var(--green-deep), var(--green-dark));
}

.story-chapter h3 {
  color: var(--green-dark);
  border-bottom-color: var(--green);
}

/* Trust bar — icônes teintées */
.trust-item span {
  filter: none;
}