/* =====================================================================
   PLATEFORME DE DONS — FEUILLE DE STYLE PRINCIPALE
   Palette : vert émeraude institutionnel + bleu de confiance + or discret
   Typographies : Plus Jakarta Sans (titres) / Inter (texte courant)
   ===================================================================== */

:root {
  --couleur-primaire: #0B5D3B;
  --couleur-primaire-fonce: #073D27;
  --couleur-primaire-claire: #E7F0EA;
  --couleur-secondaire: #0E4A9E;
  --couleur-accent: #C89B3C;
  --couleur-fond: #F7F8F6;
  --couleur-surface: #FFFFFF;
  --couleur-texte: #16241D;
  --couleur-texte-attenue: #55645C;
  --couleur-bordure: #E1E6E1;
  --couleur-danger: #B3261E;
  --couleur-succes: #1E7B4D;
  --couleur-alerte: #92660C;

  --police-titres: 'Plus Jakarta Sans', system-ui, sans-serif;
  --police-texte: 'Inter', system-ui, sans-serif;

  --rayon-carte: 10px;
  --rayon-bouton: 7px;
  --ombre-legere: 0 1px 2px rgba(20, 30, 24, 0.06), 0 1px 6px rgba(20, 30, 24, 0.04);
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  font-family: var(--police-texte);
  color: var(--couleur-texte);
  background: var(--couleur-fond);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--police-titres);
  font-weight: 700;
  color: var(--couleur-texte);
  line-height: 1.25;
}

a { color: var(--couleur-primaire); text-decoration: none; }
a:hover { color: var(--couleur-primaire-fonce); }

p { max-width: 68ch; }
.text-muted-light { color: var(--couleur-texte-attenue); }

:focus-visible {
  outline: 2px solid var(--couleur-secondaire);
  outline-offset: 2px;
}

/* ---------------------------------------------------------------------
   Bandeau d'annonce
   --------------------------------------------------------------------- */
.bandeau-annonce {
  background: var(--couleur-primaire-fonce);
  color: #fff;
  font-size: 0.92rem;
}
.bandeau-annonce--alerte { background: var(--couleur-alerte); }
.bandeau-annonce--urgent { background: var(--couleur-danger); }

/* ---------------------------------------------------------------------
   En-tête / navigation
   --------------------------------------------------------------------- */
.site-header {
  background: var(--couleur-surface);
  border-bottom: 1px solid var(--couleur-bordure);
  position: sticky;
  top: 0;
  z-index: 1030;
}
.navbar { padding: 0.85rem 0; }
.navbar-brand {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-family: var(--police-titres);
  font-weight: 800;
  font-size: 1.25rem;
  color: var(--couleur-texte);
}
.navbar-nav .nav-link {
  font-weight: 500;
  color: var(--couleur-texte);
  padding: 0.5rem 0.9rem !important;
}
.navbar-nav .nav-link:hover { color: var(--couleur-primaire); }

.btn-primaire {
  background: var(--couleur-primaire);
  border: 1px solid var(--couleur-primaire);
  color: #fff;
  font-weight: 600;
  border-radius: var(--rayon-bouton);
  padding: 0.55rem 1.3rem;
}
.btn-primaire:hover { background: var(--couleur-primaire-fonce); border-color: var(--couleur-primaire-fonce); color: #fff; }

.btn-outline-primaire {
  background: transparent;
  border: 1px solid var(--couleur-primaire);
  color: var(--couleur-primaire);
  font-weight: 600;
  border-radius: var(--rayon-bouton);
  padding: 0.55rem 1.3rem;
}
.btn-outline-primaire:hover { background: var(--couleur-primaire-claire); color: var(--couleur-primaire-fonce); }

.btn-lien { color: var(--couleur-texte); font-weight: 600; padding: 0.55rem 0.9rem; }
.btn-compte { background: var(--couleur-fond); border: 1px solid var(--couleur-bordure); border-radius: 30px; padding: 0.35rem 0.9rem 0.35rem 0.35rem; display: flex; align-items: center; gap: 0.5rem; font-weight: 600; }
.avatar-mini { width: 30px; height: 30px; border-radius: 50%; object-fit: cover; }

/* ---------------------------------------------------------------------
   Section héros
   --------------------------------------------------------------------- */
.hero {
  padding: 4.5rem 0 3.5rem;
  background: linear-gradient(180deg, var(--couleur-primaire-claire) 0%, var(--couleur-fond) 100%);
  border-bottom: 1px solid var(--couleur-bordure);
}
.hero h1 {
  font-size: clamp(2.1rem, 3.6vw, 3.1rem);
  max-width: 16ch;
  margin-bottom: 1.1rem;
}
.hero .lead {
  font-size: 1.12rem;
  color: var(--couleur-texte-attenue);
  max-width: 52ch;
  margin-bottom: 2rem;
}
.hero-stats {
  display: flex;
  gap: 2.2rem;
  margin-top: 2.5rem;
  flex-wrap: wrap;
}
.hero-stats .stat-nombre {
  font-family: var(--police-titres);
  font-weight: 800;
  font-size: 1.6rem;
  color: var(--couleur-primaire-fonce);
  display: block;
}
.hero-stats .stat-label {
  font-size: 0.85rem;
  color: var(--couleur-texte-attenue);
}
.hero-visuel {
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid var(--couleur-bordure);
  box-shadow: var(--ombre-legere);
  aspect-ratio: 4/3;
  background: var(--couleur-surface) url('../img/placeholder-hero.jpg') center/cover no-repeat;
}

.recherche-rapide {
  background: var(--couleur-surface);
  border: 1px solid var(--couleur-bordure);
  border-radius: var(--rayon-carte);
  padding: 0.5rem;
  box-shadow: var(--ombre-legere);
  display: flex;
  gap: 0.5rem;
  max-width: 560px;
}
.recherche-rapide input { border: none; }
.recherche-rapide input:focus { box-shadow: none; }

/* ---------------------------------------------------------------------
   Secteurs
   --------------------------------------------------------------------- */
.section-titre-groupe { margin-bottom: 2.2rem; }
.section-titre-groupe .eyebrow {
  color: var(--couleur-primaire);
  font-weight: 700;
  font-size: 0.85rem;
  letter-spacing: 0.02em;
}
.section-titre-groupe h2 { font-size: clamp(1.6rem, 2.4vw, 2.1rem); margin-bottom: 0.4rem; }

.carte-secteur {
  background: var(--couleur-surface);
  border: 1px solid var(--couleur-bordure);
  border-radius: var(--rayon-carte);
  padding: 1.6rem;
  height: 100%;
  transition: border-color 0.18s ease, transform 0.18s ease;
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
}
.carte-secteur:hover { border-color: var(--couleur-primaire); transform: translateY(-3px); }
.carte-secteur .icone-secteur {
  width: 46px;
  height: 46px;
  border-radius: 9px;
  background: var(--couleur-primaire-claire);
  color: var(--couleur-primaire-fonce);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.35rem;
}
.carte-secteur h3 { font-size: 1.08rem; margin-bottom: 0; }
.carte-secteur p { font-size: 0.92rem; color: var(--couleur-texte-attenue); margin-bottom: 0; }

/* ---------------------------------------------------------------------
   Cartes de campagnes
   --------------------------------------------------------------------- */
.carte-campagne {
  background: var(--couleur-surface);
  border: 1px solid var(--couleur-bordure);
  border-radius: var(--rayon-carte);
  overflow: hidden;
  height: 100%;
  display: flex;
  flex-direction: column;
  transition: box-shadow 0.18s ease, transform 0.18s ease;
}
.carte-campagne:hover { box-shadow: var(--ombre-legere); transform: translateY(-2px); }
.carte-campagne .image-campagne {
  aspect-ratio: 16/10;
  background: #eef1ee center/cover no-repeat;
  position: relative;
}
.carte-campagne .badge-secteur {
  position: absolute;
  top: 0.75rem;
  left: 0.75rem;
  background: rgba(255,255,255,0.95);
  color: var(--couleur-primaire-fonce);
  font-size: 0.72rem;
  font-weight: 700;
  padding: 0.28rem 0.65rem;
  border-radius: 30px;
}
.carte-campagne .corps { padding: 1.15rem 1.25rem 1.4rem; display: flex; flex-direction: column; gap: 0.6rem; flex: 1; }
.carte-campagne h3 { font-size: 1.02rem; margin-bottom: 0; }
.carte-campagne h3 a { color: var(--couleur-texte); }
.carte-campagne .resume { font-size: 0.88rem; color: var(--couleur-texte-attenue); flex: 1; }

.barre-progression { height: 7px; background: var(--couleur-bordure); border-radius: 30px; overflow: hidden; }
.barre-progression .remplissage { height: 100%; background: var(--couleur-primaire); border-radius: 30px; }
.stats-campagne { display: flex; justify-content: space-between; font-size: 0.84rem; margin-top: 0.4rem; }
.stats-campagne .montant-collecte { font-weight: 700; color: var(--couleur-primaire-fonce); }

/* ---------------------------------------------------------------------
   Bloc statistiques / confiance
   --------------------------------------------------------------------- */
.bande-confiance {
  background: var(--couleur-primaire-fonce);
  color: #fff;
  padding: 3rem 0;
}
.bande-confiance .chiffre { font-family: var(--police-titres); font-weight: 800; font-size: 2.1rem; }
.bande-confiance .libelle { color: rgba(255,255,255,0.78); font-size: 0.9rem; }

/* ---------------------------------------------------------------------
   Logos partenaires
   --------------------------------------------------------------------- */
.bande-partenaires { padding: 2.6rem 0; border-top: 1px solid var(--couleur-bordure); border-bottom: 1px solid var(--couleur-bordure); background: var(--couleur-surface); }
.bande-partenaires img { max-height: 42px; width: auto; filter: grayscale(100%); opacity: 0.65; transition: opacity 0.15s ease, filter 0.15s ease; }
.bande-partenaires img:hover { filter: grayscale(0%); opacity: 1; }

/* ---------------------------------------------------------------------
   Actualités
   --------------------------------------------------------------------- */
.carte-actualite { border: 1px solid var(--couleur-bordure); border-radius: var(--rayon-carte); overflow: hidden; height: 100%; background: var(--couleur-surface); }
.carte-actualite .image-actualite { aspect-ratio: 16/9; background: #eef1ee center/cover no-repeat; }
.carte-actualite .corps { padding: 1.2rem; }
.carte-actualite .date-actualite { font-size: 0.78rem; color: var(--couleur-texte-attenue); text-transform: uppercase; letter-spacing: 0.03em; }

/* ---------------------------------------------------------------------
   Formulaires / authentification
   --------------------------------------------------------------------- */
.carte-formulaire {
  background: var(--couleur-surface);
  border: 1px solid var(--couleur-bordure);
  border-radius: var(--rayon-carte);
  padding: 2.2rem;
  max-width: 480px;
  margin: 3rem auto;
  box-shadow: var(--ombre-legere);
}
.carte-formulaire h1 { font-size: 1.5rem; margin-bottom: 0.3rem; }
.form-label { font-weight: 600; font-size: 0.92rem; }
.form-control, .form-select {
  border: 1px solid var(--couleur-bordure);
  border-radius: var(--rayon-bouton);
  padding: 0.6rem 0.85rem;
}
.form-control:focus, .form-select:focus {
  border-color: var(--couleur-primaire);
  box-shadow: 0 0 0 3px var(--couleur-primaire-claire);
}
.separateur-ou { display: flex; align-items: center; gap: 0.8rem; color: var(--couleur-texte-attenue); font-size: 0.85rem; margin: 1.3rem 0; }
.separateur-ou::before, .separateur-ou::after { content: ''; flex: 1; height: 1px; background: var(--couleur-bordure); }

.boutons-social { display: flex; flex-direction: column; gap: 0.6rem; }
.btn-social {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  border: 1px solid var(--couleur-bordure);
  border-radius: var(--rayon-bouton);
  padding: 0.6rem;
  font-weight: 600;
  background: var(--couleur-surface);
  color: var(--couleur-texte);
}
.btn-social:hover { background: var(--couleur-fond); }
.btn-social.facebook i { color: #1877F2; }
.btn-social.google i { color: #EA4335; }
.btn-social.instagram i { color: #C1327A; }
.btn-social.tiktok i { color: #010101; }

/* ---------------------------------------------------------------------
   Tableau de bord utilisateur
   --------------------------------------------------------------------- */
.mise-en-page-tableau { display: grid; grid-template-columns: 260px 1fr; gap: 2rem; padding: 2.5rem 0; }
.menu-lateral { background: var(--couleur-surface); border: 1px solid var(--couleur-bordure); border-radius: var(--rayon-carte); padding: 1.2rem; height: fit-content; }
.menu-lateral .nav-link { color: var(--couleur-texte); border-radius: 7px; padding: 0.6rem 0.8rem; font-weight: 500; font-size: 0.92rem; margin-bottom: 0.15rem; }
.menu-lateral .nav-link.active { background: var(--couleur-primaire-claire); color: var(--couleur-primaire-fonce); font-weight: 700; }
.menu-lateral .nav-link:hover { background: var(--couleur-fond); }

.carte-widget { background: var(--couleur-surface); border: 1px solid var(--couleur-bordure); border-radius: var(--rayon-carte); padding: 1.4rem; }
.carte-widget .valeur-widget { font-family: var(--police-titres); font-weight: 800; font-size: 1.7rem; }
.carte-widget .libelle-widget { color: var(--couleur-texte-attenue); font-size: 0.85rem; }

@media (max-width: 991px) {
  .mise-en-page-tableau { grid-template-columns: 1fr; }
}

/* ---------------------------------------------------------------------
   Zones d'image / téléversement
   --------------------------------------------------------------------- */
.zone-image {
  border: 1.5px dashed var(--couleur-bordure);
  border-radius: var(--rayon-carte);
  background: var(--couleur-fond);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 2rem;
  text-align: center;
  color: var(--couleur-texte-attenue);
  cursor: pointer;
}
.zone-image:hover { border-color: var(--couleur-primaire); }
.zone-image i { font-size: 1.8rem; margin-bottom: 0.5rem; color: var(--couleur-primaire); }

/* ---------------------------------------------------------------------
   Sélecteur de langue FR / EN
   --------------------------------------------------------------------- */
.selecteur-langue { position: relative; }
.btn-langue {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  border: 1px solid var(--couleur-bordure);
  background: var(--couleur-surface);
  color: var(--couleur-texte);
  border-radius: 30px;
  padding: 0.4rem 0.75rem;
  font-weight: 700;
  font-size: 0.82rem;
  line-height: 1;
}
.btn-langue:hover { border-color: var(--couleur-primaire); color: var(--couleur-primaire-fonce); }
.btn-langue i.bi-globe2 { font-size: 0.95rem; }
.btn-langue::after { margin-left: 0.15rem; vertical-align: 0.05em; }

.menu-langue { min-width: 190px; padding: 0.4rem; border: 1px solid var(--couleur-bordure); box-shadow: var(--ombre-legere); }
.menu-langue .option-langue {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  border-radius: 6px;
  padding: 0.55rem 0.7rem;
  font-weight: 500;
  font-size: 0.92rem;
}
.menu-langue .option-langue .drapeau { font-size: 1rem; }
.menu-langue .option-langue .coche-langue { display: none; margin-left: auto; color: var(--couleur-primaire); }
.menu-langue .option-langue.active .coche-langue { display: inline-block; }
.menu-langue .option-langue.active { background: var(--couleur-primaire-claire); color: var(--couleur-primaire-fonce); font-weight: 700; }
.menu-langue .option-langue:hover { background: var(--couleur-fond); }

/* Neutralise totalement l'apparence native de Google Translate,
   qui ne doit jamais être visible à l'écran. */
body { top: 0 !important; }
.goog-te-banner-frame,
.goog-te-balloon-frame,
.skiptranslate > iframe,
#goog-gt-tt,
.goog-tooltip,
.goog-tooltip:hover { display: none !important; visibility: hidden !important; }
.goog-text-highlight { background: none !important; box-shadow: none !important; }
#google_translate_element { display: none !important; }

@media (max-width: 991px) {
  .selecteur-langue { order: -1; }
}

/* ---------------------------------------------------------------------
   Pied de page
   --------------------------------------------------------------------- */
.site-footer { background: #0F1C15; color: rgba(255,255,255,0.85); padding: 3.5rem 0 0; margin-top: 4rem; }
.site-footer .brand-text { color: #fff; font-family: var(--police-titres); font-weight: 800; font-size: 1.2rem; display: flex; align-items: center; gap: 0.5rem; }
.site-footer h6 { color: #fff; font-size: 0.88rem; text-transform: uppercase; letter-spacing: 0.03em; margin-bottom: 1rem; }
.site-footer .liste-footer { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 0.55rem; }
.site-footer .liste-footer a { color: rgba(255,255,255,0.68); font-size: 0.9rem; }
.site-footer .liste-footer a:hover { color: #fff; }
.site-footer .text-muted-light { color: rgba(255,255,255,0.55); }
.footer-separateur { border-color: rgba(255,255,255,0.12); margin: 2.5rem 0 0; }
.reseaux-sociaux { display: flex; gap: 0.7rem; }
.reseaux-sociaux a {
  width: 36px; height: 36px; border-radius: 50%;
  border: 1px solid rgba(255,255,255,0.25);
  display: flex; align-items: center; justify-content: center;
  color: #fff;
}
.reseaux-sociaux a:hover { background: var(--couleur-primaire); border-color: var(--couleur-primaire); }

/* ---------------------------------------------------------------------
   Cookies & popup
   --------------------------------------------------------------------- */
.bandeau-cookies {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  background: var(--couleur-surface);
  border-top: 1px solid var(--couleur-bordure);
  box-shadow: 0 -4px 16px rgba(0,0,0,0.08);
  z-index: 1080;
}

/* ---------------------------------------------------------------------
   Partage social / QR
   --------------------------------------------------------------------- */
.partage-social { display: flex; gap: 0.5rem; flex-wrap: wrap; }
.partage-social a {
  width: 38px; height: 38px; border-radius: 50%;
  border: 1px solid var(--couleur-bordure);
  display: flex; align-items: center; justify-content: center;
  color: var(--couleur-texte);
}
.partage-social a:hover { background: var(--couleur-fond); }

/* ---------------------------------------------------------------------
   Divers
   --------------------------------------------------------------------- */
.badge-statut { font-size: 0.72rem; font-weight: 700; padding: 0.3rem 0.65rem; border-radius: 30px; text-transform: uppercase; letter-spacing: 0.02em; }
.badge-statut.actif, .badge-statut.valide, .badge-statut.reussi { background: #E4F5EA; color: var(--couleur-succes); }
.badge-statut.en_attente { background: #FCF3DA; color: var(--couleur-alerte); }
.badge-statut.suspendu, .badge-statut.rejete, .badge-statut.echoue { background: #FBE7E5; color: var(--couleur-danger); }

.section { padding: 4rem 0; }
.section-alt { background: var(--couleur-surface); border-top: 1px solid var(--couleur-bordure); border-bottom: 1px solid var(--couleur-bordure); }