/* ============================================================
   Faire un don - page publique
   Bandeau, campagne en cours, panneau du montant et blocs de
   versement. Le même vocabulaire visuel que « Nos réalisations »
   (bandeau arrondi, photo en fondu, citation, pastilles).
   ============================================================ */

/* ===== Bandeau ===== */
.dn-hero{
  position:relative; overflow:hidden; border-radius:22px; border:1px solid var(--line);
  background:linear-gradient(103deg, var(--green-deep, #06441C) 0%, var(--green-deep-2, #0A5324) 48%, var(--green-deep-3, #12622F) 100%);
  padding:38px 40px; margin:22px 0 26px;
}
.dn-hero-photo{
  position:absolute; inset:0 0 0 auto; width:46%; z-index:0;
  /* La photo s efface en fondu - un masque, et non un voile de couleur :
     le fond est un degrade, un voile uni y laissait une bande visible. */
  -webkit-mask-image:linear-gradient(90deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.55) 30%, #000 68%);
  mask-image:linear-gradient(90deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.55) 30%, #000 68%);
}
.dn-hero-photo img{width:100%; height:100%; object-fit:cover;}
.dn-hero-texte{position:relative; z-index:1; max-width:60ch;}
.dn-accroche{
  font-family:var(--mono); font-size:0.72rem; letter-spacing:0.16em; text-transform:uppercase;
  color:#FFE3A0; margin-bottom:14px;
}
.dn-hero h1{
  font-family:var(--display); font-weight:800; font-size:clamp(2rem,4.4vw,3rem);
  color:#FFFFFF; line-height:1.1; letter-spacing:-0.02em; margin:0;
}
.dn-hero h1 em{font-style:normal; color:#FFE3A0;}
.dn-hero-sous{
  font-family:var(--display); font-weight:600; font-size:clamp(1.02rem,1.9vw,1.25rem);
  color:#FFE3A0; line-height:1.35; margin:14px 0 0; max-width:34ch;
}
.dn-hero-intro{color:rgba(255,255,255,0.86); font-size:0.98rem; margin:14px 0 0; max-width:52ch;}
.dn-hero-actions{display:flex; gap:12px; flex-wrap:wrap; margin-top:24px;}
.dn-btn{
  display:inline-flex; align-items:center; gap:9px; padding:13px 24px; border-radius:999px;
  font-family:var(--body); font-size:0.93rem; font-weight:700; border:1.5px solid transparent; cursor:pointer;
}
.dn-btn .ti{font-size:18px;}
.dn-btn-or{background:var(--gold); color:var(--green-deep, #06441C);}
.dn-btn-or:hover{opacity:0.9;}
.dn-btn-clair{background:rgba(255,255,255,0.13); border-color:rgba(255,255,255,0.32); color:#FFFFFF;}
.dn-btn-clair:hover{background:rgba(255,255,255,0.22); border-color:#FFFFFF; color:#FFFFFF;}
.dn-hero-citation{
  position:absolute; right:40px; bottom:34px; z-index:1; max-width:22ch; text-align:right;
  font-family:var(--display); font-style:italic; font-weight:600; color:#FFFFFF; line-height:1.4;
}
.dn-hero-citation::after{content:""; display:block; width:70px; height:3px; border-radius:3px; background:var(--gold); margin:10px 0 0 auto;}
@media(max-width:1180px){ .dn-hero-citation{display:none;} }
@media(max-width:820px){
  .dn-hero{padding:26px 22px;}
  .dn-hero-photo{display:none;}
}

/* ===== Deux colonnes ===== */
.dn-grille{display:grid; grid-template-columns:minmax(0,1fr); gap:22px; align-items:start;}
@media(min-width:1080px){ .dn-grille{grid-template-columns:minmax(0,1fr) 380px;} }
.dn-colonne{display:flex; flex-direction:column; gap:22px; min-width:0;}
.dn-aside{display:flex; flex-direction:column; gap:18px; min-width:0;}
@media(min-width:1080px){ .dn-aside{position:sticky; top:20px;} }
/* En une seule colonne, le panneau du montant se retrouverait apres le
   formulaire de declaration : il remonte juste sous le bandeau. */
@media(max-width:1079px){
  .dn-grille{display:flex; flex-direction:column; align-items:stretch;}
  .dn-aside{order:-1;}
}
@media(max-width:420px){
  .dn-sommes{gap:8px;}
  .dn-somme{padding:12px 4px; font-size:0.84rem;}
}

/* ===== Campagne en cours ===== */
.dn-camp{
  background:var(--surface); border:1px solid var(--line); border-radius:18px; padding:28px 30px; display:none;
}
.dn-camp-tete{display:flex; align-items:flex-start; gap:16px; margin-bottom:20px;}
.dn-camp-ic{
  width:56px; height:56px; flex:none; border-radius:50%; display:grid; place-items:center;
  background:var(--green-deep); color:var(--gold); font-size:26px;
}
.dn-camp-badge{
  font-family:var(--mono); font-size:0.68rem; letter-spacing:0.12em; text-transform:uppercase;
  color:var(--text-accent); margin-bottom:6px;
}
/* Ces deux lignes sont courtes et petites : l'or clair du site n'y suffit
   pas (3,78 sur blanc). Un or plus foncé passe à 5,09. */
.dn-accroche, .dn-camp-badge{color:#8A6209;}
:root[data-theme="dark"] .dn-accroche,
:root[data-theme="dark"] .dn-camp-badge{color:var(--text-accent);}
.dn-camp-titre{
  font-family:var(--display); font-weight:800; font-size:clamp(1.35rem,3vw,1.75rem);
  color:var(--text-heading); line-height:1.2; letter-spacing:-0.015em; margin:0;
}
.dn-camp-desc{color:var(--text-muted); font-size:0.95rem; margin:10px 0 0; max-width:62ch;}

.dn-jauge-chiffres{display:flex; justify-content:space-between; align-items:baseline; flex-wrap:wrap; gap:10px;}
.dn-jauge-collecte{font-family:var(--display); font-weight:700; font-size:1.3rem; color:var(--text-heading);}
.dn-jauge-collecte span{font-family:var(--display); font-style:italic; font-weight:600; font-size:0.95rem; color:var(--text-muted);}
.dn-jauge-objectif{font-size:0.88rem; color:var(--text-muted);}
.dn-jauge-piste{height:12px; border-radius:999px; background:var(--paper-alt); overflow:hidden; margin:12px 0 10px;}
.dn-jauge-part{height:100%; border-radius:999px; background:linear-gradient(90deg, var(--green), var(--green-deep)); transition:width .6s ease;}
:root[data-theme="dark"] .dn-jauge-part{background:linear-gradient(90deg, var(--green-soft, #7FD9A0), var(--green));}
.dn-jauge-bas{display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:10px; font-size:0.86rem;}
.dn-jauge-pourcent{color:var(--green); font-weight:700;}
:root[data-theme="dark"] .dn-jauge-pourcent{color:var(--green-soft, #7FD9A0);}
.dn-jauge-echeance{display:inline-flex; align-items:center; gap:7px; color:var(--text-muted);}

/* Où déposer son don pour cette campagne */
.dn-depots{margin-top:20px; padding-top:18px; border-top:1px solid var(--line);}
.dn-depots-titre{
  font-family:var(--mono); font-size:0.68rem; text-transform:uppercase; letter-spacing:0.08em;
  color:var(--text-muted); margin-bottom:10px;
}
.dn-depots-liste{display:flex; gap:12px; flex-wrap:wrap;}
.dn-depot{background:var(--paper-alt); border-radius:12px; padding:11px 16px; min-width:0;}
.dn-depot strong{display:block; font-size:0.76rem; font-weight:600; color:var(--text-muted);}
.dn-depot span{font-family:var(--mono); font-size:0.95rem; color:var(--text-heading); word-break:break-word;}
.dn-depots-titulaire{font-size:0.82rem; color:var(--text-muted); margin-top:10px;}

/* ===== À quoi sert votre don ===== */
.dn-usages{display:grid; grid-template-columns:repeat(auto-fit,minmax(170px,1fr)); gap:14px; margin-top:22px;}
.dn-usage{
  display:flex; align-items:center; gap:12px; padding:14px 16px;
  border:1px solid var(--line); border-radius:14px; background:var(--surface);
}
.dn-usage-ic{
  width:40px; height:40px; flex:none; border-radius:12px; display:grid; place-items:center;
  background:rgba(var(--green-rgb, 23,118,59),0.12); color:var(--green); font-size:20px;
}
:root[data-theme="dark"] .dn-usage-ic{color:var(--green-soft, #7FD9A0);}
.dn-usage-titre{font-family:var(--display); font-weight:700; font-size:0.94rem; color:var(--text-heading); line-height:1.2;}
.dn-usage-texte{font-size:0.8rem; color:var(--text-muted);}

/* ===== Témoignage ===== */
.dn-temoignage{
  display:flex; align-items:center; gap:18px; margin-top:22px; padding:20px 22px; border-radius:16px;
  background:linear-gradient(120deg, #F1F7F2 0%, var(--surface) 100%); border:1px solid var(--line);
}
:root[data-theme="dark"] .dn-temoignage{background:linear-gradient(120deg, rgba(var(--green-rgb, 23,118,59),0.14) 0%, var(--surface) 100%);}
.dn-temoignage img{width:86px; height:86px; flex:none; border-radius:14px; object-fit:cover;}
.dn-temoignage-texte{
  font-family:var(--display); font-style:italic; font-weight:600; font-size:1rem;
  color:var(--text-heading); line-height:1.45;
}
.dn-temoignage-auteur{font-size:0.82rem; color:var(--text-muted); margin-top:8px;}

/* ===== Panneau du montant ===== */
.dn-montant{background:var(--surface); border:1px solid var(--line); border-radius:18px; padding:24px 24px 22px;}
.dn-montant h2{font-family:var(--display); font-weight:700; font-size:1.15rem; color:var(--text-heading); margin:0 0 16px;}
.dn-sommes{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px;}
.dn-somme{
  padding:13px 8px; border-radius:12px; cursor:pointer; text-align:center;
  border:1.5px solid var(--line); background:var(--surface); color:var(--text-heading);
  font-family:var(--body); font-size:0.9rem; font-weight:700;
}
.dn-somme:hover{border-color:var(--green); color:var(--green);}
.dn-somme.actif{background:var(--green-deep); border-color:var(--green-deep); color:#FFFFFF;}
:root[data-theme="dark"] .dn-somme.actif{background:var(--green-soft, #7FD9A0); border-color:var(--green-soft, #7FD9A0); color:var(--green-deep, #06441C);}
.dn-libre{display:flex; align-items:stretch; margin-top:10px; border:1.5px solid var(--line); border-radius:12px; overflow:hidden;}
.dn-libre:focus-within{border-color:var(--green);}
.dn-libre-unite{
  display:grid; place-items:center; padding:0 14px; background:var(--paper-alt);
  font-family:var(--mono); font-size:0.82rem; color:var(--text-muted); border-right:1.5px solid var(--line);
}
.dn-libre input{
  flex:1; min-width:0; border:0; outline:none; padding:13px 14px; background:transparent;
  font-family:var(--body); font-size:0.95rem; color:var(--text-heading);
}
.dn-montant-btn{
  width:100%; margin-top:16px; padding:14px 20px; border:0; border-radius:999px; cursor:pointer;
  display:inline-flex; align-items:center; justify-content:center; gap:9px;
  background:var(--gold); color:var(--green-deep, #06441C); font-family:var(--body); font-size:0.98rem; font-weight:700;
}
.dn-montant-btn:hover{opacity:0.9;}
.dn-montant-note{
  display:flex; align-items:flex-start; gap:8px; margin-top:14px;
  font-size:0.78rem; color:var(--text-muted); line-height:1.45;
}
.dn-montant-note .ti{font-size:15px; flex:none; margin-top:1px;}

/* ===== Pourquoi donner ===== */
.dn-pourquoi{
  border-radius:18px; padding:24px; border:1px solid var(--line);
  background:linear-gradient(180deg, #F1F7F2 0%, var(--surface) 100%);
}
:root[data-theme="dark"] .dn-pourquoi{background:linear-gradient(180deg, rgba(var(--green-rgb, 23,118,59),0.14) 0%, var(--surface) 100%);}
.dn-pourquoi-ic{
  width:48px; height:48px; border-radius:14px; display:grid; place-items:center; margin-bottom:14px;
  background:rgba(var(--green-rgb, 23,118,59),0.14); color:var(--green); font-size:24px;
}
:root[data-theme="dark"] .dn-pourquoi-ic{color:var(--green-soft, #7FD9A0);}
.dn-pourquoi h2{font-family:var(--display); font-weight:700; font-size:1.05rem; color:var(--text-heading); margin:0 0 10px;}
.dn-pourquoi p{font-size:0.88rem; color:var(--text-muted); margin:0;}
.dn-pourquoi-lien{
  display:inline-flex; align-items:center; gap:8px; margin-top:14px;
  font-size:0.86rem; font-weight:600; color:var(--green); border-bottom:1px solid var(--gold); padding-bottom:2px;
}
:root[data-theme="dark"] .dn-pourquoi-lien{color:var(--green-soft, #7FD9A0);}

/* ===== En-tête de section ===== */
.dn-tete{display:flex; align-items:center; gap:13px; margin-bottom:4px;}
.dn-tete-ic{
  width:40px; height:40px; flex:none; border-radius:12px; display:grid; place-items:center;
  background:rgba(var(--green-rgb, 23,118,59),0.12); color:var(--green); font-size:19px;
}
:root[data-theme="dark"] .dn-tete-ic{color:var(--green-soft, #7FD9A0);}
.dn-tete-titre{font-family:var(--display); font-weight:700; font-size:1.2rem; color:var(--text-heading); line-height:1.2;}
.dn-tete-sous{font-size:0.86rem; color:var(--text-muted);}