/* ══════════════════════════════════════════
   Y'AKANGA MÉDIA – icons.css
   Icônes professionnelles & effets visuels
   ══════════════════════════════════════════ */

/* ── Icônes avec cercle coloré (usage général) ── */
.icon-circle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px; height: 40px;
  border-radius: 50%;
  font-size: 1rem;
  transition: transform .25s ease, box-shadow .25s ease;
  flex-shrink: 0;
}
.icon-circle:hover { transform: scale(1.12); box-shadow: 0 4px 16px rgba(0,0,0,.2); }
.icon-circle.green  { background: #2d5a1b; color: #fff; }
.icon-circle.brown  { background: #8b4513; color: #fff; }
.icon-circle.yellow { background: #f5c518; color: #1a1a1a; }
.icon-circle.red    { background: #e74c3c; color: #fff; }
.icon-circle.blue   { background: #2980b9; color: #fff; }
.icon-circle.dark   { background: #1a1a1a; color: #fff; }
.icon-circle.light  { background: #f4f4f4; color: #2d5a1b; border: 1px solid #e0e0e0; }

/* ── Icônes avec fond carré arrondi ── */
.icon-box {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px; height: 42px;
  border-radius: 10px;
  font-size: 1.05rem;
  transition: transform .25s ease, box-shadow .25s ease;
  flex-shrink: 0;
}
.icon-box:hover { transform: translateY(-2px); box-shadow: 0 6px 18px rgba(0,0,0,.18); }
.icon-box.green  { background: linear-gradient(135deg, #2d5a1b, #3d7a22); color: #fff; }
.icon-box.brown  { background: linear-gradient(135deg, #8b4513, #a0522d); color: #fff; }
.icon-box.yellow { background: linear-gradient(135deg, #f5c518, #e6b800); color: #1a1a1a; }
.icon-box.red    { background: linear-gradient(135deg, #e74c3c, #c0392b); color: #fff; }
.icon-box.blue   { background: linear-gradient(135deg, #2980b9, #1a6fa8); color: #fff; }

/* ── Réseaux sociaux – cercles officiels ── */
.header-socials a {
  width: 34px; height: 34px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: .88rem;
  transition: transform .25s ease, box-shadow .25s ease;
  box-shadow: 0 2px 6px rgba(0,0,0,.15);
}
.header-socials a:hover { transform: scale(1.15); box-shadow: 0 4px 14px rgba(0,0,0,.25); }
.header-socials a[aria-label="Facebook"]  { background: #1877f2; color: #fff; }
.header-socials a[aria-label="YouTube"]   { background: #ff0000; color: #fff; }
.header-socials a[aria-label="Instagram"] { background: linear-gradient(45deg,#f09433,#e6683c,#dc2743,#cc2366,#bc1888); color: #fff; }

/* ── Boutons Suivez-nous ── */
.follow-btn {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 16px;
  border-radius: 8px;
  font-size: .83rem; font-weight: 700;
  color: #fff;
  transition: transform .2s ease, box-shadow .2s ease, opacity .2s ease;
  box-shadow: 0 2px 8px rgba(0,0,0,.15);
}
.follow-btn:hover { transform: translateX(4px); box-shadow: 0 4px 14px rgba(0,0,0,.22); color: #fff; opacity: 1; }
.follow-btn i { font-size: 1.1rem; width: 22px; text-align: center; }
.follow-btn.fb { background: linear-gradient(135deg,#1877f2,#0d65e0); }
.follow-btn.yt { background: linear-gradient(135deg,#ff0000,#cc0000); }
.follow-btn.ig { background: linear-gradient(45deg,#f09433,#e6683c,#dc2743,#cc2366,#bc1888); }

/* ── Boutons de partage ── */
.share-btn {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 8px 16px;
  border-radius: 20px;
  font-size: .78rem; font-weight: 700;
  color: #fff; border: none; cursor: pointer;
  transition: transform .2s ease, box-shadow .2s ease;
  box-shadow: 0 2px 6px rgba(0,0,0,.15);
}
.share-btn:hover { transform: translateY(-2px); box-shadow: 0 5px 15px rgba(0,0,0,.25); opacity: 1; }
.share-btn i { font-size: .95rem; }
.share-btn.fb { background: linear-gradient(135deg,#1877f2,#0d65e0); }
.share-btn.wa { background: linear-gradient(135deg,#25d366,#1da851); }
.share-btn.tw { background: linear-gradient(135deg,#1a1a1a,#333); }

/* ── Titres de section avec icône ── */
.section-heading { display: flex; align-items: center; gap: 0; margin-bottom: 20px; }
.section-heading span {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: 'Merriweather', Georgia, serif;
  font-size: 1.05rem; font-weight: 900;
  text-transform: uppercase; letter-spacing: .05em;
  padding: 8px 18px 8px 14px;
  border-radius: 4px;
}
.section-heading span i {
  display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 30px;
  border-radius: 50%;
  font-size: .85rem;
  background: rgba(255,255,255,.25);
  flex-shrink: 0;
}
.sh-green span  { background: #2d5a1b; color: #fff; }
.sh-brown span  { background: #8b4513; color: #fff; }
.sh-yellow span { background: #f5c518; color: #1a1a1a; }
.sh-red span    { background: #e74c3c; color: #fff; }
.sh-dark span   { background: #1a1a1a; color: #fff; }

/* ── Widget title ── */
.widget-title {
  display: flex; align-items: center; gap: 10px;
  font-family: 'Merriweather', Georgia, serif;
  font-size: .85rem; font-weight: 900;
  text-transform: uppercase; letter-spacing: .06em;
  color: #fff; background: #1a3a0f;
  margin: -18px -16px 16px;
  padding: 12px 16px;
  border-radius: 6px 6px 0 0;
}
.widget-title i {
  display: inline-flex; align-items: center; justify-content: center;
  width: 26px; height: 26px;
  border-radius: 50%;
  background: rgba(255,255,255,.2);
  font-size: .78rem;
  flex-shrink: 0;
}

/* ── Bouton principal ── */
.btn-primary {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 10px 24px;
  background: linear-gradient(135deg, #2d5a1b, #3d7a22);
  color: #fff; border: none;
  border-radius: 20px;
  font-size: .83rem; font-weight: 700;
  cursor: pointer;
  text-transform: uppercase; letter-spacing: .05em;
  transition: transform .2s ease, box-shadow .2s ease;
  box-shadow: 0 3px 10px rgba(45,90,27,.35);
}
.btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(45,90,27,.45);
  color: #fff;
}

/* ── Bouton voir plus ── */
.see-more-btn {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 9px 20px;
  background: linear-gradient(135deg, #2d5a1b, #3d7a22);
  color: #fff;
  font-size: .78rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .04em;
  border-radius: 20px;
  transition: transform .2s ease, box-shadow .2s ease;
  box-shadow: 0 2px 8px rgba(45,90,27,.3);
}
.see-more-btn:hover { transform: translateY(-2px); box-shadow: 0 5px 16px rgba(45,90,27,.4); color: #fff; }
.see-more-btn.brown { background: linear-gradient(135deg, #8b4513, #a0522d); box-shadow: 0 2px 8px rgba(139,69,19,.3); }
.see-more-btn.brown:hover { box-shadow: 0 5px 16px rgba(139,69,19,.4); }

/* ── Icônes méta articles (date, vues, commentaires) ── */
.article-meta-bar i,
.card-meta i,
.article-meta i {
  color: #2d5a1b;
  font-size: .82rem;
}

/* ── Icônes admin dans les boutons ── */
.btn-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 32px; height: 32px;
  border-radius: 8px;
  font-size: .85rem;
  background: #f4f4f4;
  color: #555;
  transition: transform .2s ease, background .2s ease, box-shadow .2s ease;
  box-shadow: 0 1px 4px rgba(0,0,0,.1);
}
.btn-icon:hover { transform: scale(1.1); box-shadow: 0 3px 10px rgba(0,0,0,.18); }
.btn-icon.btn-blue   { background: #eaf2fb; color: #2980b9; }
.btn-icon.btn-blue:hover { background: #2980b9; color: #fff; }
.btn-icon.btn-red    { background: #fdecea; color: #e74c3c; }
.btn-icon.btn-red:hover { background: #e74c3c; color: #fff; }
.btn-icon.btn-yellow { background: #fef9e7; color: #e6b800; }
.btn-icon.btn-yellow:hover { background: #f5c518; color: #1a1a1a; }
.btn-icon.btn-green  { background: #eafaea; color: #2d5a1b; }
.btn-icon.btn-green:hover { background: #2d5a1b; color: #fff; }

/* ── Footer icônes sociaux ── */
.footer-socials a {
  display: inline-flex; align-items: center; justify-content: center;
  width: 36px; height: 36px;
  border-radius: 50%;
  font-size: .9rem;
  color: #fff;
  transition: transform .25s ease, box-shadow .25s ease;
  box-shadow: 0 2px 6px rgba(0,0,0,.2);
}
.footer-socials a:hover { transform: scale(1.15); box-shadow: 0 4px 14px rgba(0,0,0,.3); color: #fff; }
.footer-socials a[aria-label="Facebook"]  { background: #1877f2; }
.footer-socials a[aria-label="YouTube"]   { background: #ff0000; }
.footer-socials a[aria-label="Instagram"] { background: linear-gradient(45deg,#f09433,#e6683c,#dc2743,#cc2366,#bc1888); }

/* ── Alerte / messages flash ── */
.alert { display: flex; align-items: center; gap: 10px; }
.alert i { font-size: 1.1rem; flex-shrink: 0; }
.alert-success i { color: #2d5a1b; }
.alert-error   i { color: #e74c3c; }