:root{
  --brand-green: #4caf3f;
  --brand-green-dark: #3d9433;
  --margin-step: 2px;
}
body{
  background: #f4f6f5;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}
.text_surligne {
  background: lightgreen;
  color:darkgreen;
  font-weight:bold;
  border-radius: 4px;
}
.text_rouge {
  background: lightpink;
  color:red;
  font-weight:bold;
  border-radius: 4px;
}

.donation-card{
  max-width: 420px;
  margin: 40px auto;
  background: #fff;
  border-radius: 14px;
  box-shadow: 0 2px 10px rgba(0,0,0,0.06);
  padding: 24px;
  position: relative;
  overflow: hidden;
}

/* ---------- Steps / onglets ---------- */
.step{
  display: none;
}
.step.active{
  display: block;
  border: 2px solid var(--brand-green);
  color: var(--brand-green);
  padding: 4px;
  border-radius: 12px

}

.secure-header{
  text-align: center;
  color: #333;
  font-weight: 600;
  font-size: 1rem;
  margin-bottom: 20px;
}
.secure-header i{
  color: var(--brand-green);
  margin-right: 6px;
}

/* Step header (chevron / title / close) used on step 2 */
.step-header{
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 20px;
}
.step-header .step-nav-btn{
  background: none;
  border: none;
  padding: 4px;
  color: #333;
  font-size: 1.2rem;
  line-height: 1;
  cursor: pointer;
}
.step-header .step-title{
  font-weight: 600;
  font-size: 1.05rem;
  color: #222;
}

/* Toggle: Don ponctuel / Don mensuel */
.btn-toggle-group{
  display: flex;
  gap: 10px;
  margin-bottom: 20px;
}
.btn-toggle{
  flex: 1;
  border-radius: 50px;
  padding: 8px 10px;
  font-weight: 600;
  font-size: 0.95rem;
}
.btn-toggle-active{
  background-color: var(--brand-green) !important;
  border-color: var(--brand-green)!important;
  color: #fff !important;
}
.btn-toggle-inactive{
  background-color: #fff !important;
  border: 1px solid var(--brand-green)!important;
  color: var(--brand-green)!important;
}
.btn-primary:disabled {
  opacity: 0.5;
  background-color: #6c757d !important;
  border-color: #6c757d;
}

/* Amount grid */
.amount-grid{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-bottom: 16px;
}
.amount-btn{
  background: #fff;
  border: 1px solid #d9dcdb;
  border-radius: 10px;
  padding: 14px 10px;
  font-size: 1.15rem;
  font-weight: 500;
  color: #333;
}
.amount-btn:hover{
  border-color: var(--brand-green);
}
.amount-btn.selected{
  border: 2px solid var(--brand-green);
  color: var(--brand-green);
  font-weight: 700;
}
.amount-full{
  font-weight: 700;
}

/* Custom amount input */
.custom-amount-wrap{
  position: relative;
  margin-bottom: 18px;
}
.custom-amount-input{
  border: 1px solid #d9dcdb;
  border-radius: 10px;
  padding: 12px 40px 12px 14px;
  width: 100%;
  font-size: 1rem;
}
.custom-amount-input:focus{
  outline: none;
  border-color: var(--brand-green);
  box-shadow: 0 0 0 0.15rem rgba(76,175,63,0.15);
}
.custom-amount-label{
  position: absolute;
  top: -9px;
  left: 12px;
  background: #fff;
  padding: 0 4px;
  font-size: 0.75rem;
  color: #888;
}
.custom-amount-suffix{
  position: absolute;
  right: 14px;
  top: 50%;
  transform: translateY(-50%);
  color: #666;
}
.custom-amount-input.is-invalid{
  border-color: #d32f2f;
}
.custom-amount-input.is-invalid:focus{
  border-color: #d32f2f;
  box-shadow: 0 0 0 0.15rem rgba(211,47,47,0.15);
}
.amount-error{
  display: none;
  align-items: center;
  gap: 6px;
  color: #d32f2f;
  font-size: 0.85rem;
  margin-top: -12px;
  margin-bottom: 16px;
}

/* Info box (step 1) */
.info-box{
  background: #fdf6e3;
  border-radius: 10px;
  padding: 14px 16px;
  font-size: 0.85rem;
  color: #555;
  margin-bottom: 20px;
  line-height: 1.4;
}
.info-box strong{
  color: #333;
}
.info-box .bulb{
  margin-right: 4px;
}

/* Footer */
.donation-footer{
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.total-amount{
  font-size: 1.6rem;
  font-weight: 700;
  color: #222;
}
.btn-donate{
  background-color: var(--brand-green) !important ;
  border-color: var(--brand-green) ! important ;
  color: #fff !important;
  border-radius: 50px;
  padding: 10px 24px;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.btn-donate:hover{
  background-color: var(--brand-green-dark) !important;
  border-color: var(--brand-green-dark) !important;
  color: #fff !important;;
}
.btn-donate:disabled{
  background-color: #b9c2bd;
  border-color: #b9c2bd;
  cursor: not-allowed;
}

/* ---------- Step 2 : Vos informations ---------- */
.account-box{
  background: #eef3f6;
  border-radius: 10px;
  padding: 14px 16px;
  font-size: 0.85rem;
  color: #444;
  margin-bottom: 18px;
  line-height: 1.4;
}
.account-box a{
  color: var(--brand-green-dark);
  font-weight: 700;
  text-decoration: underline;
}

.required-note{
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.8rem;
  color: #555;
  margin-bottom: 18px;
}
.required-note i{
  color: var(--brand-green);
}

.form-floating{
  margin-bottom: 14px;
}
.form-floating > .form-control{
  border: 1px solid #d9dcdb;
  border-radius: 10px;
  padding: 1rem 0.9rem;
}
.form-floating > .form-control:focus{
  outline: none;
  border-color: var(--brand-green);
  box-shadow: 0 0 0 0.15rem rgba(76,175,63,0.15);
}
.form-floating > .form-control.is-invalid{
  border-color: #d32f2f;
}
.form-floating > label{
  color: #888;
  padding: 1rem 0.9rem;
}
.form-floating > .form-control:focus ~ label,
.form-floating > .form-control:not(:placeholder-shown) ~ label{
  color: #888;
}
/* Slight shaded background on the email field, matching the reference screenshot */
#infos_email{
  background-color: #f4f5f5;
}

.field-error{
  display: none;
  align-items: center;
  gap: 6px;
  color: #d32f2f;
  font-size: 0.8rem;
  margin: -8px 0 12px 4px;
}
.field-error.visible{
  display: flex;
}

.form-check{
  margin-bottom: 20px;
}
.form-check-input:checked{
  background-color: var(--brand-green);
  border-color: var(--brand-green);
}
.form-check-label{
  font-size: 0.9rem;
  color: #333;
}

.btn-continue{
  background-color: var(--brand-green);
  border-color: var(--brand-green);
  color: #fff;
  border-radius: 50px;
  padding: 12px 24px;
  font-weight: 600;
  width: 100%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}
.btn-continue:hover{
  background-color: var(--brand-green-dark);
  border-color: var(--brand-green-dark);
  color: #fff;
}
.btn-continue:disabled{
  background-color: #b9c2bd;
  border-color: #b9c2bd;
  cursor: not-allowed;
}

/* Footer "Propulsé par HelloAsso" */
.powered-by{
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin-top: 18px;
  font-size: 0.8rem;
  color: #888;
}
.powered-by .ha-logo{
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-weight: 700;
  color: #333;
}
.ha-dots{
  display: inline-grid;
  grid-template-columns: 1fr 1fr;
  gap: 2px;
  width: 14px;
  height: 14px;
}
.ha-dots span{
  width: 6px;
  height: 6px;
  border-radius: 50%;
}
.ha-dots span:nth-child(1){ background:#e2574c; }
.ha-dots span:nth-child(2){ background:#f5a623; }
.ha-dots span:nth-child(3){ background:#4caf3f; }
.ha-dots span:nth-child(4){ background:#2e9ce6; }
/* ==========================================================================
   Ajouts ponctuels (à terme, à déplacer dans helloasso.css) :
   - retour visuel vert sur un champ une fois sa valeur validée (utilisé
     notamment par le champ "Date de naissance", voir don.js) ;
   - légère mise en forme du <select> Pays de l'étape 3, qui réutilise
     par ailleurs les classes .form-floating / .form-control existantes.
   ========================================================================== */
   .form-control.is-valid {
    border-color: #28a745 !important;
  }
  .form-control.is-valid:focus {
    box-shadow: 0 0 0 0.2rem rgba(40, 167, 69, 0.25);
  }
  select.form-control {
    cursor: pointer;
  }
  .vcode {
    max-width:22px;
    text-align:center;
    background-color:ivory;
      color:darkslategray;
      margin-bottom:10px;
  
  }
  
  .today {
    background-color:rgb(17, 14, 214);
    color:white;
  }