.mcb-section .mcb-wrap .mcb-item-639fda2ff .title{text-align:center;font-size:56px;line-height:98.8px;font-weight:400;}.mcb-section .mcb-wrap .mcb-item-639fda2ff .title,.mcb-section .mcb-wrap .mcb-item-639fda2ff .title a{color:#FFFFFF;}.mcb-section .mcb-wrap-grid.mcb-wrap-1e862367b > .mcb-wrap-inner-1e862367b{grid-template-columns:repeat(3, 1fr);}section.mcb-section-e434466b6{background-image:url(https://www.dons.nd-galaure.fr/wp-content/uploads/2026/09/Image_Header_Dons.jpg#305);background-size:cover;background-position:top center;height:640px;padding-top:150px;}section.mcb-section-e434466b6 .mcb-background-overlay{opacity:1;background-image:linear-gradient(0deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.6) 100%);}section.mcb-section-e434466b6 .mfn-shape-divider-bottom svg{--mfn-shape-divider:#FFFFFF;width:145%;height:90px;}.mcb-section .mcb-wrap .mcb-item-7d87ea213 .mcb-column-inner-7d87ea213{background-image:<div class="dc-wrap">
  <div class="dc-cards">

    <div class="dc-card dc-card-don">
      <div class="dc-card-head">Mon don</div>
      <div class="dc-card-body">
        <div class="dc-freq-toggle">
          <button type="button" class="dc-freq-btn" data-freq="once">Je donne une fois</button>
          <button type="button" class="dc-freq-btn dc-active" data-freq="monthly">Je donne tous les mois</button>
        </div>
        <div class="dc-amounts">
          <button type="button" class="dc-amount-btn dc-active" data-amount="50">50</button>
          <button type="button" class="dc-amount-btn" data-amount="200">200</button>
          <button type="button" class="dc-amount-btn" data-amount="300">300</button>
        </div>
        <div class="dc-free-amount">
          <input type="text" inputmode="decimal" id="dcFreeAmount" placeholder="Montant libre">
          <button type="button" id="dcFreeAmountBtn" aria-label="Valider le montant libre">↻</button>
        </div>
        <label class="dc-checkbox">
          <input type="checkbox" id="dcOrgDonation">
          <span>Je fais un don au nom d'une organisation ou d'une société</span>
        </label>
        <div class="dc-info-box">
          Votre don ne vous coûte réellement que <strong id="dcCostAmount">17,00 €</strong> après réduction fiscale (réduction de <strong id="dcReductionAmount">33,00 €</strong> à hauteur de 66% de votre impôt sur le revenu).
        </div>
      </div>
    </div>

    <div class="dc-card dc-card-contact">
      <div class="dc-card-head">Mes coordonnées</div>
      <div class="dc-card-body">
        <label class="dc-checkbox dc-alumni-check">
          <input type="checkbox" id="dcAlumni">
          <span>Je suis un ancien élève</span>
        </label>
        <div class="dc-alumni-row" id="dcAlumniRow">
          <input type="text" placeholder="Année">
          <span class="dc-alumni-label">Votre dernière année à l'école</span>
        </div>
        <input type="text" placeholder="Raison sociale">
        <input type="text" placeholder="SIRET">
        <input type="email" placeholder="Mail">
        <div class="dc-row-2">
          <select aria-label="Civilité"><option value="">Civilité</option><option>Madame</option><option>Monsieur</option></select>
          <input type="text" placeholder="Prénom">
        </div>
        <input type="text" placeholder="Nom">
        <input type="text" placeholder="Adresse">
        <input type="text" placeholder="Complément d'adresse">
        <div class="dc-row-2">
          <input type="text" placeholder="Code postal">
          <input type="text" placeholder="Ville">
        </div>
        <div class="dc-row-2">
          <select aria-label="Pays"><option>France</option></select>
          <input type="tel" placeholder="Téléphone">
        </div>
        <p class="dc-note">Tous les champs sont obligatoires (ces informations sont indispensables pour bénéficier de votre réduction fiscale).</p>
        <div class="dc-info-box">À l'issue de votre don, votre reçu fiscal sera généré et envoyé automatiquement à votre adresse mail.</div>
      </div>
    </div>

    <div class="dc-card dc-card-payment">
      <div class="dc-card-head">Mon règlement</div>
      <div class="dc-card-body">
        <div class="dc-secure">
          <svg width="16" height="16" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M6 10V8a6 6 0 1112 0v2h1a1 1 0 011 1v9a1 1 0 01-1 1H5a1 1 0 01-1-1v-9a1 1 0 011-1h1zm2 0h8V8a4 4 0 10-8 0v2z" fill="#722683"/></svg>
          <span>Paiement 100% sécurisé</span>
        </div>
        <div class="dc-payment-label" id="dcPaymentLabel">Prélèvement automatique mensuel</div>
        <input type="text" placeholder="Votre numéro IBAN">
        <input type="text" placeholder="Votre code BIC">
        <label class="dc-checkbox" id="dcConfirmMonthlyRow">
          <input type="checkbox" id="dcConfirmMonthly">
          <span>Je confirme ma volonté de donner tous les mois</span>
        </label>
        <button type="button" class="dc-submit-btn" id="dcSubmitBtn">Je valide mon don de 50 euros par mois</button>
      </div>
    </div>

  </div>
</div>

<style>
.dc-wrap{position:relative;z-index:5;margin-top:-190px;padding:0 20px;max-width:1200px;margin-left:auto;margin-right:auto;font-family:inherit;}
.dc-cards{display:flex;gap:24px;align-items:flex-start;}
.dc-card{flex:1 1 0;background:#fff;border-radius:14px;box-shadow:0 10px 30px rgba(0,0,0,0.12);overflow:hidden;}
.dc-card-head{background:#722683;color:#fff;text-align:center;font-size:20px;font-weight:600;padding:16px 10px;}
.dc-card-body{padding:20px;display:flex;flex-direction:column;gap:12px;}
.dc-card input[type="text"],.dc-card input[type="email"],.dc-card input[type="tel"],.dc-card select{width:100%;box-sizing:border-box;padding:12px 14px;border:1px solid #ccc;font-size:15px;color:#333;border-radius:4px;background:#fff;}
.dc-card input::placeholder{color:#8a8a8a;}
.dc-freq-toggle{display:flex;gap:8px;}
.dc-freq-btn{flex:1;padding:10px 6px;border:1px solid #722683;background:#fff;color:#722683;border-radius:6px;font-size:13px;cursor:pointer;font-weight:600;line-height:1.3;transition:all .15s;}
.dc-freq-btn.dc-active{background:#722683;color:#fff;}
.dc-amounts{display:flex;gap:8px;}
.dc-amount-btn{flex:1;padding:12px 0;border:1px solid #722683;background:#fff;color:#722683;border-radius:6px;font-size:17px;font-weight:700;cursor:pointer;transition:all .15s;}
.dc-amount-btn.dc-active{background:#722683;color:#fff;}
.dc-free-amount{display:flex;gap:8px;}
.dc-free-amount input{flex:1;}
.dc-free-amount button{width:44px;flex-shrink:0;border:1px solid #722683;background:#fff;color:#722683;border-radius:6px;font-size:18px;cursor:pointer;}
.dc-checkbox{display:flex;align-items:flex-start;gap:8px;font-size:13px;color:#333;cursor:pointer;line-height:1.4;}
.dc-checkbox input{margin-top:3px;accent-color:#722683;flex-shrink:0;}
.dc-info-box{background:#f2ebf4;color:#511f5e;font-size:13px;line-height:1.5;padding:12px 14px;border-radius:6px;}
.dc-row-2{display:flex;gap:10px;}
.dc-row-2>*{flex:1;min-width:0;}
.dc-note{font-size:12px;color:#777;line-height:1.4;margin:0;}
.dc-alumni-row{display:none;gap:10px;align-items:center;}
.dc-alumni-row.dc-show{display:flex;}
.dc-alumni-row input{flex:0 0 90px;}
.dc-alumni-label{font-size:11px;color:#777;line-height:1.3;}
.dc-secure{display:flex;align-items:center;gap:8px;font-size:13px;color:#333;font-weight:600;}
.dc-payment-label{color:#722683;font-weight:700;font-size:14px;text-transform:uppercase;letter-spacing:.02em;}
.dc-submit-btn{margin-top:4px;background:#612770;color:#fff;border:none;border-radius:10px;padding:14px 20px;font-size:14px;font-weight:700;text-transform:uppercase;cursor:pointer;transition:background .15s;}
.dc-submit-btn:hover{background:#722683;}
@media (max-width:900px){
  .dc-wrap{margin-top:20px;}
  .dc-cards{flex-direction:column;}
}
</style>

<script>
(function(){
  var wrap = document.currentScript.closest('.dc-wrap') || document.querySelector('.dc-wrap');
  if(!wrap) return;
  var state = { amount: 50, freq: 'monthly', freeAmount: null };

  var freqBtns = wrap.querySelectorAll('.dc-freq-btn');
  var amountBtns = wrap.querySelectorAll('.dc-amount-btn');
  var freeInput = wrap.querySelector('#dcFreeAmount');
  var freeBtn = wrap.querySelector('#dcFreeAmountBtn');
  var costEl = wrap.querySelector('#dcCostAmount');
  var reductionEl = wrap.querySelector('#dcReductionAmount');
  var paymentLabel = wrap.querySelector('#dcPaymentLabel');
  var submitBtn = wrap.querySelector('#dcSubmitBtn');
  var confirmRow = wrap.querySelector('#dcConfirmMonthlyRow');
  var alumniCheck = wrap.querySelector('#dcAlumni');
  var alumniRow = wrap.querySelector('#dcAlumniRow');

  function fmt(n){
    return n.toLocaleString('fr-FR', {minimumFractionDigits:2, maximumFractionDigits:2}) + ' €';
  }

  function currentAmount(){
    return state.freeAmount != null ? state.freeAmount : state.amount;
  }

  function render(){
    var amount = currentAmount();
    var reduction = amount * 0.66;
    var cost = amount - reduction;
    if(costEl) costEl.textContent = fmt(cost);
    if(reductionEl) reductionEl.textContent = fmt(reduction);

    var freqLabel = state.freq === 'monthly' ? 'par mois' : 'une fois';
    var amountLabel = (amount % 1 === 0) ? amount.toFixed(0) : amount.toString().replace('.', ',');
    if(submitBtn) submitBtn.textContent = 'Je valide mon don de ' + amountLabel + ' euros ' + freqLabel;

    if(paymentLabel){
      paymentLabel.textContent = state.freq === 'monthly'
        ? 'Prélèvement automatique mensuel'
        : 'Paiement unique par carte bancaire';
    }
    if(confirmRow){
      confirmRow.style.display = state.freq === 'monthly' ? 'flex' : 'none';
    }
  }

  freqBtns.forEach(function(btn){
    btn.addEventListener('click', function(){
      freqBtns.forEach(function(b){ b.classList.remove('dc-active'); });
      btn.classList.add('dc-active');
      state.freq = btn.getAttribute('data-freq') === 'monthly' ? 'monthly' : 'once';
      render();
    });
  });

  amountBtns.forEach(function(btn){
    btn.addEventListener('click', function(){
      amountBtns.forEach(function(b){ b.classList.remove('dc-active'); });
      btn.classList.add('dc-active');
      state.amount = parseFloat(btn.getAttribute('data-amount'));
      state.freeAmount = null;
      if(freeInput) freeInput.value = '';
      render();
    });
  });

  if(freeInput){
    freeInput.addEventListener('input', function(){
      var val = parseFloat((freeInput.value || '').replace(',', '.'));
      if(!isNaN(val) && val > 0){
        amountBtns.forEach(function(b){ b.classList.remove('dc-active'); });
        state.freeAmount = val;
        render();
      }
    });
  }
  if(freeBtn){
    freeBtn.addEventListener('click', function(){
      if(freeInput) freeInput.focus();
    });
  }

  if(alumniCheck && alumniRow){
    alumniRow.classList.remove('dc-show');
    alumniCheck.addEventListener('change', function(){
      alumniRow.classList.toggle('dc-show', alumniCheck.checked);
    });
  }

  render();
})();
</script>
;}.mcb-section .mcb-wrap .mcb-item-7d87ea213{width:36%;}.mcb-section .mcb-wrap .mcb-item-f44bfc1fc{width:64%;}.mcb-section .mcb-wrap-grid.mcb-wrap-fff87d518 > .mcb-wrap-inner-fff87d518{grid-template-columns:repeat(3, 1fr);}.mcb-section .mcb-wrap .mcb-item-a6ce139de .title{text-align:center;}.mcb-section .mcb-wrap-grid.mcb-wrap-7086f1a4a > .mcb-wrap-inner-7086f1a4a{grid-template-columns:repeat(3, 1fr);}section.mcb-section-6ec816eba .mfn-shape-divider-bottom svg{--mfn-shape-divider:#F7F6F2;width:145%;height:90px;}section.mcb-section-6ec816eba{padding-top:80px;padding-bottom:80px;}.mcb-section .mcb-wrap .mcb-item-1ed14a9f2 .title{text-align:center;}.mcb-section .mcb-wrap-grid.mcb-wrap-18b6dae28 > .mcb-wrap-inner-18b6dae28{grid-template-columns:repeat(3, 1fr);}section.mcb-section-a8a8d04e6 .mfn-shape-divider-bottom svg{--mfn-shape-divider:#F7F6F2;width:145%;height:90px;}section.mcb-section-a8a8d04e6{background-color:#F7F6F2;padding-top:80px;padding-bottom:80px;}section.mcb-section-e45be1aed{padding-top:80px;padding-bottom:80px;background-color:#FCFCFC;}section.mcb-section-e45be1aed .mfn-shape-divider-bottom svg{--mfn-shape-divider:#f7f6f2;width:145%;height:90px;}section.mcb-section-e45be1aed .mfn-shape-divider-top svg{--mfn-shape-divider:#F7F6F2;width:145%;height:90px;}