/* /src/don-style.css */
/* Spécifique à la page Don — repose sur apropos-style.css */

/* Conteneur */
.container{ width:100%; max-width:1200px; margin:0px auto 30px; padding:0 16px; }
.layout{ display:flex; flex-wrap:wrap; align-items:flex-start; gap:var(--gap); }
.card{
  background:var(--surface); border:1px solid var(--border); border-radius:var(--radius);
  padding:20px 22px; box-shadow:var(--shadow); transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}

.card:focus-within{ border-color:var(--ring); box-shadow: var(--shadow), 0 0 0 6px var(--ring); }

.text-column{ flex:1 1 560px; min-width:300px; display:flex; flex-direction:column; gap:var(--gap); order:1; }


/* Typo contenu */
.prose p{ margin:0; font-size: clamp(16px, 1.6vw, 18px); }
.prose p + p{ margin-top:14px; }

/* Sidebar droite (empile plusieurs cartes) */
.sidebar{
  flex:0 0 340px; width:340px; display:flex; flex-direction:column; gap:var(--gap); order:2; align-self:flex-start;
}
.sidebar .card{ width:100%; }
.sidebar .contact{ flex:initial; width:100%; }

@media (max-width:900px){
  .text-column{ flex:1 1 100%; width:100%; order:1; }
  .sidebar{ flex:1 1 100%; width:100%; order:2; }
  .sidebar .card{ width:100%; }
}

.don-grid{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--gap);
  margin-top: var(--gap);
}
@media (max-width: 900px){
  .don-grid{ grid-template-columns: 1fr; }
}

.don-card{
  display: grid;
  gap: 16px;
  justify-items: center; /* centre horizontalement */
  text-align: center;    /* centre le texte */
  align-content: start;  /* force l’ancrage en haut, évite l’espacement vertical */
  background: color-mix(in srgb, var(--primary-weak) 65%, var(--surface) 35%);
}
.don-title{ margin: 0 0 4px 0; }

.don-partner{ display:grid; gap: 10px; }

/* Bouton logo "donné" */
.img-btn{
  display:inline-grid; place-items:center; text-decoration:none; user-select:none; cursor:pointer;
  border:1px solid var(--border); border-radius: var(--radius-sm);
  background: #ffffff;
  box-shadow: var(--shadow);
  padding: 14px 16px; min-width: 10px;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease, filter .18s ease;
}
.img-btn:hover{ transform: translateY(-2px); filter: brightness(1.02); }
.img-btn:focus{ outline:none; border-color: var(--ring); box-shadow: var(--shadow), 0 0 0 6px var(--ring); }

.img-btn img{
  display:block; 
  max-width: 120px;   /* ajuste selon ton design */
  width: 100%;
  height: auto;
}