/* ============================================================================
   Vakans Lespwa — landing campagne (bandeau + cartes + image/texte).
   CSP-safe (fichier externe). Palette ICCI.
   ========================================================================== */

/* --- Bandeau (image pleine largeur) --- */
.vakans-banner { background: #f7f3ea; padding: 26px 0 6px; }
.vakans-banner .container { max-width: 1200px; margin: 0 auto; padding: 0 20px; }
.vakans-banner img {
  width: 100%;
  display: block;
  border-radius: 18px;
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.16);
}

/* --- Corps --- */
.vakans-content { background: #f7f3ea; padding: 36px 20px 72px; }
.vakans-content .container { max-width: 980px; margin: 0 auto; }
.vakans-intro {
  font-size: 1.28rem;
  line-height: 1.6;
  color: #15553f;
  font-weight: 500;
  margin-bottom: 8px;
}
.vakans-content h2 { color: #15553f; margin: 42px 0 15px; font-size: 2rem; }
.vakans-content p, .vakans-content li { font-size: 1.08rem; color: #263238; }
.vakans-content p + p { margin-top: 14px; }

/* --- Image + texte --- */
.vakans-split {
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  gap: clamp(28px, 5vw, 48px);
  align-items: center;
  margin-top: 26px;
}
.vakans-split__text h2 { margin-top: 0; }
.vakans-split__media { margin: 0; }
.vakans-split__media img {
  width: 100%;
  height: clamp(280px, 38vw, 400px);
  object-fit: cover;
  border-radius: 18px;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.14);
  display: block;
}

/* --- Carte « message » --- */
.vakans-message {
  background: #fff;
  border-left: 7px solid #c94f1a;
  padding: 26px 28px;
  margin: 38px 0;
  border-radius: 14px;
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.08);
}
.vakans-message p { color: #15553f; font-size: 1.3rem; line-height: 1.5; margin: 0; }

/* --- Cartes « ce que le projet offre » --- */
.vakans-offre {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
  margin-top: 12px;
}
.vakans-offre__item {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  background: #fff;
  border: 1px solid #ece7d8;
  border-radius: 14px;
  padding: 18px 20px;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.05);
  transition: transform .15s ease, box-shadow .15s ease;
}
.vakans-offre__item:hover { transform: translateY(-3px); box-shadow: 0 12px 26px rgba(0, 0, 0, 0.10); }
.vakans-offre__icon {
  flex: none;
  width: 38px; height: 38px;
  border-radius: 50%;
  background: rgba(21, 85, 63, 0.10);
  color: #15553f;
  display: grid; place-items: center;
}
.vakans-offre__item p { margin: 0; font-size: 1rem; }

/* --- Carte CTA --- */
.vakans-cta {
  background: linear-gradient(135deg, #15553f, #0f3f2f);
  color: #fff;
  padding: 38px;
  border-radius: 18px;
  margin-top: 42px;
  text-align: center;
}
.vakans-cta h3 { font-size: 2rem; margin-bottom: 12px; }
.vakans-cta p { color: #fff; }
.vakans-cta p + p { margin-top: 10px; }
.vakans-cta a { color: #ffd28a; font-weight: bold; text-decoration: none; }
.vakans-cta a:hover { text-decoration: underline; }

/* --- Bloc « don = kit » mis en évidence --- */
.vakans-don {
  display: flex;
  align-items: center;
  gap: clamp(18px, 3vw, 34px);
  background: linear-gradient(135deg, #e05a10 0%, #d29b36 100%);
  color: #fff;
  border-radius: 18px;
  padding: clamp(24px, 3.5vw, 38px);
  margin: 40px 0;
  box-shadow: 0 16px 38px rgba(201, 79, 26, 0.30);
}
.vakans-don__amount {
  flex: none;
  font-family: var(--font-title, Georgia, serif);
  font-weight: 800;
  font-size: clamp(2.7rem, 8vw, 4.2rem);
  line-height: 0.85;
  text-align: center;
  padding-right: clamp(18px, 3vw, 32px);
  border-right: 2px solid rgba(255, 255, 255, 0.35);
}
.vakans-don__amount span {
  display: block;
  font-size: 1rem;
  letter-spacing: 0.16em;
  font-weight: 700;
  opacity: 0.92;
  margin-top: 6px;
}
.vakans-don__eq {
  font-family: var(--font-title, Georgia, serif);
  font-size: clamp(1.3rem, 3.2vw, 1.85rem);
  font-weight: 700;
  line-height: 1.25;
  margin: 0 0 8px;
  color: #fff;
}
.vakans-don__text p { color: #fff; margin: 0; }
.vakans-don__text p + p { margin-top: 8px; }

/* --- Responsive --- */
@media (max-width: 820px) {
  .vakans-split { grid-template-columns: 1fr; }
  .vakans-split__media { order: -1; }
  .vakans-offre { grid-template-columns: 1fr; }
}
@media (max-width: 768px) {
  .vakans-banner { padding: 12px 0 4px; }
  .vakans-banner .container { padding: 0 12px; }
  .vakans-banner img { border-radius: 12px; }
  .vakans-content { padding: 28px 18px 52px; }
  .vakans-content h2 { font-size: 1.55rem; }
  .vakans-cta { padding: 26px 18px; border-radius: 12px; }
  .vakans-cta h3 { font-size: 1.5rem; }
  .vakans-don { flex-direction: column; text-align: center; gap: 14px; }
  .vakans-don__amount { border-right: 0; border-bottom: 2px solid rgba(255, 255, 255, 0.35); padding: 0 0 14px; }
}