/* Page Appuyez-nous : règles propres à la page.
   Aucune couleur en dur : jetons --cl-* seulement. Grilles en rem (zoom à 200 %). */

/* 1. Héros sans photo à 360 px : titre de 36 px sur deux lignes, chapo resserré */
@media (max-width: 480px) {
  .appuyez__hero .cl-hero__titre { font-size: 2.25rem; letter-spacing: 0.01em; }
  .appuyez__hero .cl-hero__chapo { margin-bottom: var(--cl-espace-3); }
}

/* 1 bis. Impact : une colonne de cartes sous 1024 px (maquette : une colonne à 768 px) */
@media (max-width: 1023.98px) {
  #impact .cl-impact__grille { grid-template-columns: minmax(0, 1fr); max-width: var(--cl-conteneur-texte); }
}

/* 2. Paragraphes d'introduction centrés sous un titre de section */
.appuyez__intro {
  max-width: var(--cl-conteneur-texte);
  margin: calc(-1 * var(--cl-espace-4)) auto var(--cl-espace-4);
  text-align: center;
}
.appuyez__intro p { margin-inline: auto; }
@media (max-width: 767.98px) {
  .appuyez__intro { margin-top: calc(-1 * var(--cl-espace-3)); }
}

/* 3. Pieds de section centrés (lien ou boutons) */
.appuyez__pied {
  margin-top: var(--cl-espace-4);
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: var(--cl-espace-2) var(--cl-espace-4);
}

/* 4. Don : mention de démonstration sous la liste des mentions ; à 360 px,
   « Don mensuel » tient sur une ligne */
.appuyez__demo { margin-top: var(--cl-espace-1b); }
@media (max-width: 480px) {
  #don .cl-don__choix { padding-inline: var(--cl-espace-1); }
}
/* Montants : trois colonnes en rem au-dessus de 480 px, une seule au zoom à 200 % */
@media (min-width: 480.02px) {
  #don .cl-don__bascules--montants { grid-template-columns: repeat(auto-fit, minmax(min(100%, 9rem), 1fr)); }
}

/* 5. Bénévolat : texte et photo à gauche (5fr), formulaire à droite (7fr) à partir de 1024 px ;
   en dessous, ordre du DOM : texte, formulaire, photo */
.appuyez__benevolat {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--cl-espace-4);
  max-width: var(--cl-conteneur-etroit);
  margin-inline: auto;
}
@media (min-width: 1024px) {
  .appuyez__benevolat {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    grid-template-rows: auto 1fr;
    column-gap: var(--cl-espace-5);
    align-items: start;
  }
  .appuyez__benevolat-texte { grid-column: 1; grid-row: 1; }
  .appuyez__benevolat-photo { grid-column: 1; grid-row: 2; }
  .appuyez__form { grid-column: 2; grid-row: 1 / span 2; }
}
.appuyez__benevolat-texte .cl-titre-section { margin-bottom: var(--cl-espace-4); }
.appuyez__roles { margin-top: var(--cl-espace-3); list-style: none; }
.appuyez__roles li {
  position: relative;
  padding: var(--cl-espace-1) 0 var(--cl-espace-1) var(--cl-espace-4);
  font-size: var(--cl-taille-carte);
  line-height: 1.75rem;
}
.appuyez__roles li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 1.375rem;
  width: 1.5rem;
  height: 1px;
  background: var(--cl-or);
}
.appuyez__benevolat-photo img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; background: var(--cl-gris-clair); }

/* 6. Bénévolat : carte de formulaire crème sur blanc */
.appuyez__form {
  display: grid;
  gap: var(--cl-espace-3);
  padding: var(--cl-espace-4);
  background: var(--cl-fond-carte);
}
.appuyez__form .cl-form__demo { margin-top: 0; }
@media (max-width: 480px) {
  .appuyez__form { padding: var(--cl-espace-3); }
}

/* 7. Commandites : introduction en crème, actions centrées */
.appuyez__commandites .cl-titre-section__intro { color: var(--cl-creme-texte); }
.appuyez__commandites .cl-personnes { margin-top: var(--cl-espace-4); }
.appuyez__tel,
.appuyez__insecable { white-space: nowrap; }

/* 8. Partenaires : grilles de logos en rem ; partenaire fondateur seul et centré */
#partenaires .cl-partenaires__liste { grid-template-columns: repeat(auto-fit, minmax(min(100%, 8.75rem), 1fr)); }
#partenaires .appuyez__fondateur { grid-template-columns: minmax(0, 1fr); }
.appuyez__merci { margin: calc(-1 * var(--cl-espace-4)) auto var(--cl-espace-5); text-align: center; }
@media (max-width: 767.98px) {
  .appuyez__merci { margin-top: calc(-1 * var(--cl-espace-3)); margin-bottom: var(--cl-espace-4); }
}
@media (max-width: 480px) {
  #partenaires .cl-partenaires__liste { grid-template-columns: repeat(auto-fit, minmax(min(100%, 7.5rem), 1fr)); }
}

/* 9. D'autres façons d'aider : trois colonnes dès 768 px ; deux liens empilés dans le troisième bloc */
#aider .cl-etapes { grid-template-columns: repeat(auto-fit, minmax(min(12.5rem, 100%), 1fr)); }
.appuyez__liens { display: flex; flex-direction: column; align-items: flex-start; margin-top: auto; }