/**
 * Page « Comment donner » — styles repris de la maquette, chargés UNIQUEMENT sur le
 * gabarit template-comment-donner.php (voir inc/enqueue.php). Tout est scopé sous
 * « .comment-donner-page » : les classes partagées (.wrap, .kick, .sec-title, .hl,
 * .reveal, .hr) sont redéfinies ici pour rester isolées des autres pages. La police
 * « Anton » vient de style.css (@font-face, globale).
 *
 * @package medecins-du-monde
 */

/* Reset box-sizing scopé au contenu de la page (au lieu du « * » global de la maquette). */
.comment-donner-page,
.comment-donner-page *,
.comment-donner-page *::before,
.comment-donner-page *::after {
  box-sizing: border-box;
}

.comment-donner-page {
  font-family: 'Open Sans', sans-serif;
  color: #1d1a55;
  background: #fff;
  line-height: 1.4;
  -webkit-font-smoothing: antialiased;
}
.comment-donner-page h1,
.comment-donner-page h2,
.comment-donner-page h3,
.comment-donner-page h4 {
  margin: 0;
  font-weight: 400;
}
.comment-donner-page p {
  margin: 0;
}
.comment-donner-page a {
  text-decoration: none;
  color: inherit;
}
.comment-donner-page ul {
  margin: 0;
  padding: 0;
  list-style: none;
}
/* Gouttières calquées sur celles de la barre de navigation (voir « nav » dans style.css) :
   26px au-delà de 1280px, 10px en dessous, 1.8057vw au-delà de 1700px. Les sections de la
   page s'alignent ainsi sur le logo et le bouton « Faire un don ». Suivre les points de
   rupture de l'en-tête (1279 / 1700), pas ceux de cette page (940 / 640). */
.comment-donner-page .wrap {
  padding: 0 26px;
}

/* ===== ÉLÉMENTS PARTAGÉS ===== */
.comment-donner-page .sec-title {
  font-family: 'Anton', sans-serif;
  text-transform: uppercase;
  font-size: clamp(28px, 3.4vw, 46px);
  line-height: 1.18;
  letter-spacing: -0.01em;
  color: #1d1a55;
}
.comment-donner-page .sec-title .hl {
  background: linear-gradient(#bddfec, #bddfec) no-repeat;
  background-size: 100% 1.19em;
  background-position: 0 0.12em;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}
/* Sur-titre de section : petit trait orange suivi du libellé. */
.comment-donner-page .kick {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
  font-family: 'Anton', sans-serif;
  text-transform: uppercase;
  font-size: 14px;
  letter-spacing: 0.08em;
  color: #e9511c;
}
.comment-donner-page .kick::before {
  content: '';
  width: 22px;
  height: 2px;
  border-radius: 2px;
  background: #e9511c;
}

/* Apparition : .hr au chargement (hero), .reveal au défilement (voir comment-donner.js). */
@keyframes cd-rise {
  from { opacity: 0; transform: translateY(24px); }
  to { opacity: 1; transform: none; }
}
.comment-donner-page .hr {
  animation: cd-rise 0.7s cubic-bezier(0.22, 0.61, 0.36, 1) both;
}
.comment-donner-page .hr2 { animation-delay: 0.12s; }
.comment-donner-page .hr3 { animation-delay: 0.22s; }
.comment-donner-page .reveal {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 0.7s cubic-bezier(0.22, 0.61, 0.36, 1), transform 0.7s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.comment-donner-page .reveal.in {
  opacity: 1;
  transform: none;
}

/* Jauge de progression de lecture, collée en haut de la fenêtre. */
.comment-donner-page .cd-progress {
  position: fixed;
  top: 0;
  left: 0;
  width: 0;
  height: 4px;
  background: #e9511c;
  z-index: 3000;
}

/* ===== HERO ===== */
/* L'en-tête du thème est en position:fixed (146px au-delà de 1279px) : le hero dégage
   cette hauteur pour conserver les 72px de respiration de la maquette. */
.comment-donner-page .dm-hero {
  position: relative;
  overflow: hidden;
  background: #055da8;
  color: #fff;
}
.comment-donner-page .dm-hero .wrap {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: 60px;
  align-items: center;
  padding-top: 218px;
  padding-bottom: 72px;
}
.comment-donner-page .dm-hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin-bottom: 26px;
  padding: 8px 16px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 50px;
  background: rgba(255, 255, 255, 0.12);
  font-size: 14px;
  font-weight: 600;
  color: #eaf3fb;
}
.comment-donner-page .dm-hero-badge .pulse {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #00e0c0;
  animation: cd-pulse 1.6s ease-in-out infinite;
}
@keyframes cd-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.35; }
}
.comment-donner-page .dm-hero h1 {
  margin-bottom: 24px;
  font-family: 'Anton', sans-serif;
  text-transform: uppercase;
  font-size: clamp(46px, 6vw, 92px);
  /* 1.1 et pas moins : sous 1, la cédille de « FAÇONS » vient toucher la ligne suivante. */
  line-height: 1.1;
  letter-spacing: -0.01em;
}
.comment-donner-page .dm-hero h1 .hl {
  color: #bddfec;
}
.comment-donner-page .dm-lead {
  max-width: 500px;
  font-size: 18px;
  line-height: 1.7;
  color: #dbe8f5;
}

/* Carte « Faire un don » posée dans le hero (fond bruité, comme le formulaire Contact). */
.comment-donner-page .dm-card {
  height: fit-content;
  padding: 36px 30px 26px;
  border-radius: 8px;
  background-color: #055da8;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.7' numOctaves='2' stitchTiles='stitch' result='t'/%3E%3CfeColorMatrix in='t' type='matrix' values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1 0 0 0 0'/%3E%3CfeComponentTransfer%3E%3CfeFuncA type='linear' slope='2.5'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.25'/%3E%3C/svg%3E");
  animation: cd-rise 0.8s cubic-bezier(0.22, 0.61, 0.36, 1) 0.28s both;
}
.comment-donner-page .dm-card h4 {
  margin: 0 0 8px;
  font-family: 'Anton', sans-serif;
  text-transform: uppercase;
  font-size: 30px;
  line-height: 1.05;
  color: #fff;
}
.comment-donner-page .dm-card .dc-intro {
  margin-bottom: 22px;
  font-size: 14px;
  line-height: 1.6;
  color: #dbe8f5;
}
.comment-donner-page .dm-opt {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.comment-donner-page .dm-opt a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 18px 20px;
  border-radius: 8px;
  background: #fff;
  font-size: 15px;
  font-weight: 700;
  color: #055da8;
  transition: background-color 0.25s ease, transform 0.25s ease;
}
.comment-donner-page .dm-opt a:hover {
  background: #bddfec;
  transform: translateX(4px);
}
.comment-donner-page .dm-opt a .oa {
  display: grid;
  place-items: center;
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  border-radius: 100%;
  background: #055da8;
}
.comment-donner-page .dm-opt a .oa img {
  width: 14px;
}
/* Formulaire de don intégré à la carte. Un iframe servi par un autre domaine ne peut pas
   mesurer son contenu : sa hauteur est réservée ici, depuis le back-office (--dm-frame-h,
   posée en style sur .dm-frame). Le fond blanc évite le flash bleu du hero avant que le
   formulaire ne se peigne.

   Le formulaire de la plateforme arrivant avec son propre cadre blanc, la carte s'efface
   derrière lui plutôt que de l'enfermer dans un second encadrement bleu — même parti que la
   carte de don de la page campagne (.cp-don-card--frame). */
.comment-donner-page .dm-card--frame {
  padding: 0;
  background: none;
  border-radius: 0;
}
.comment-donner-page .dm-frame {
  overflow: hidden;
  border-radius: 8px;
  background: #fff;
}
.comment-donner-page .dm-frame iframe {
  display: block;
  width: 100%;
  height: var(--dm-frame-h, 620px);
  border: 0;
}
.comment-donner-page .dm-secure {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 18px;
  font-size: 14px;
  line-height: 1.4;
  color: #fff;
}
.comment-donner-page .dm-secure svg {
  flex-shrink: 0;
  width: 14px;
  height: 14px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.9;
}
.comment-donner-page .dm-card--frame .dm-secure {
  justify-content: center;
  gap: 6px;
  margin-top: 20px;
  font-size: 11px;
  line-height: 15px;
}
.comment-donner-page .dm-card--frame .dm-secure svg {
  width: 11px;
  height: 11px;
}

/* ===== BANDEAU ===== */
.comment-donner-page .dm-band {
  padding: 22px 0;
  overflow: hidden;
  background: #00af9c;
  color: #fff;
}
.comment-donner-page .dm-band .wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 28px;
  text-align: center;
}
.comment-donner-page .dm-band .bk {
  font-family: 'Anton', sans-serif;
  text-transform: uppercase;
  font-size: clamp(16px, 1.8vw, 22px);
  letter-spacing: 0.01em;
}
.comment-donner-page .dm-band .dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.6);
}

/* ===== AVANTAGES ===== */
.comment-donner-page .dm-adv {
  padding: 84px 0 24px;
}
.comment-donner-page .adv-split {
  display: grid;
  grid-template-columns: 0.72fr 1fr 330px;
  gap: 44px;
  align-items: start;
}
/* « adv-lead », PAS « adv-aside » : « .adv-aside » figure dans les listes de filtres
   cosmétiques d'AdBlock / AdGuard (règle générique ##.adv-aside), qui le masquent en
   display:none sur tous les sites — la colonne disparaissait chez les visiteurs
   équipés d'un bloqueur. Éviter aussi « ad », « ads », « advert », « banner ».

   Chaque bloc tient sa colonne : le placement automatique ferait glisser les lignes
   dans la colonne du chapeau dès que celui-ci n'est pas saisi (voir avantages.php). */
.comment-donner-page .adv-lead { grid-column: 1; }
.comment-donner-page .adv-rows { grid-column: 2; }
.comment-donner-page .adv-media { grid-column: 3; }
.comment-donner-page .adv-split--no-lead {
  grid-template-columns: 1fr 330px;
}
.comment-donner-page .adv-split--no-lead .adv-rows { grid-column: 1; }
.comment-donner-page .adv-split--no-lead .adv-media { grid-column: 2; }
.comment-donner-page .adv-split--no-rows {
  grid-template-columns: minmax(0, 480px);
}
.comment-donner-page .adv-lead {
  position: sticky;
  top: 110px;
}
.comment-donner-page .adv-lead p {
  max-width: 340px;
  margin-top: 16px;
  font-size: 16px;
  line-height: 1.7;
  color: #5b6172;
}
.comment-donner-page .adv-rows {
  display: flex;
  flex-direction: column;
}
.comment-donner-page .adv-row {
  display: flex;
  gap: 24px;
  align-items: flex-start;
  padding: 26px 4px;
  border-top: 1px solid #e6ecf5;
  transition: padding-left 0.4s cubic-bezier(0.22, 0.61, 0.36, 1), background-color 0.4s ease;
}
.comment-donner-page .adv-row:last-child {
  border-bottom: 1px solid #e6ecf5;
}
.comment-donner-page .adv-row:hover,
.comment-donner-page .adv-row.act {
  padding-left: 16px;
  background: #f7fafd;
}
.comment-donner-page .adv-tx h3 {
  margin-bottom: 8px;
  font-family: 'Anton', sans-serif;
  text-transform: uppercase;
  font-size: clamp(20px, 1.8vw, 25px);
  line-height: 1.05;
  color: #1d1a55;
}
.comment-donner-page .adv-tx p {
  font-size: 15px;
  line-height: 1.6;
  color: #5b6172;
}
/* Colonne d'illustration : une seule photo visible à la fois, synchronisée avec la ligne
   survolée / la plus proche du centre de l'écran (voir comment-donner.js). */
.comment-donner-page .adv-media {
  position: sticky;
  top: 110px;
  aspect-ratio: 4 / 5;
  border-radius: 14px;
  overflow: hidden;
  background: #e6ecf5;
}
.comment-donner-page .adv-shot {
  position: absolute;
  inset: 0;
  opacity: 0;
  transform: scale(1.06);
  transition: opacity 0.6s cubic-bezier(0.22, 0.61, 0.36, 1), transform 0.9s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.comment-donner-page .adv-shot.on {
  opacity: 1;
  transform: scale(1);
}
.comment-donner-page .adv-shot img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* Repli tablette/mobile : la photo revient sous le texte de sa propre ligne. */
.comment-donner-page .adv-ph {
  display: none;
}

/* ===== FAÇONS DE DONNER ===== */
.comment-donner-page .dm-ways {
  padding: 48px 0 48px;
}
.comment-donner-page .ways-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
  margin-top: 34px;
}
.comment-donner-page .way-card {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 38px 36px;
  border: 1px solid #e2e9f2;
  border-radius: 16px;
  transition: transform 0.35s cubic-bezier(0.22, 0.61, 0.36, 1), border-color 0.3s ease;
}
.comment-donner-page .way-card:hover {
  transform: translateY(-6px);
  border-color: #bddfec;
}
.comment-donner-page .way-card.feat {
  border-color: #1d1a55;
  background: #1d1a55;
  color: #fff;
}
.comment-donner-page .way-k {
  margin-bottom: 14px;
  font-family: 'Anton', sans-serif;
  text-transform: uppercase;
  font-size: 14px;
  letter-spacing: 0.06em;
  color: #e9511c;
}
.comment-donner-page .way-card.feat .way-k {
  color: #ff7a45;
}
.comment-donner-page .way-card h3 {
  margin-bottom: 12px;
  font-family: 'Anton', sans-serif;
  text-transform: uppercase;
  font-size: clamp(22px, 2.2vw, 28px);
  line-height: 1;
  color: #1d1a55;
}
.comment-donner-page .way-card.feat h3 {
  color: #fff;
}
.comment-donner-page .way-card > p {
  margin-bottom: 20px;
  font-size: 15px;
  line-height: 1.65;
  color: #5b6078;
}
.comment-donner-page .way-card.feat > p {
  color: #c4cde3;
}
.comment-donner-page .way-list {
  display: flex;
  flex-direction: column;
  gap: 11px;
  margin: 0 0 26px;
}
.comment-donner-page .way-list li {
  position: relative;
  padding-left: 22px;
  font-size: 14px;
  line-height: 1.55;
  color: #3a3a52;
}
.comment-donner-page .way-card.feat .way-list li {
  color: #dbe8f5;
}
.comment-donner-page .way-list li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 9px;
  width: 10px;
  height: 2px;
  border-radius: 2px;
  background: #e9511c;
}
.comment-donner-page .way-link {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  align-self: flex-start;
  margin-top: auto;
  padding-bottom: 3px;
  border-bottom: 2px solid #055da8;
  font-family: 'Anton', sans-serif;
  text-transform: uppercase;
  font-size: 14px;
  letter-spacing: 0.03em;
  color: #055da8;
  transition: color 0.25s ease, border-color 0.25s ease;
}
.comment-donner-page .way-link:hover {
  color: #e9511c;
  border-color: #e9511c;
}
.comment-donner-page .way-card.feat .way-link {
  color: #bddfec;
  border-color: #bddfec;
}
.comment-donner-page .way-card.feat .way-link:hover {
  color: #fff;
  border-color: #fff;
}
/* Carte pleine largeur, en fin de grille. */
.comment-donner-page .way-card.wide {
  grid-column: 1 / -1;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: 40px;
}
.comment-donner-page .way-card.wide .wide-tx {
  max-width: 640px;
}

/* ===== TÉMOIGNAGE ===== */
.comment-donner-page .dm-story {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: stretch;
}
.comment-donner-page .story-quote {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  overflow: hidden;
  padding: 72px 56px;
  background: #055da8;
  color: #fff;
}
/* Filigrane : le logo MdM, débordant du coin haut droit. */
.comment-donner-page .story-mark {
  position: absolute;
  top: -90px;
  right: -70px;
  width: 280px;
  height: 280px;
  opacity: 0.12;
  pointer-events: none;
}
.comment-donner-page .story-quote .qk {
  position: relative;
  margin-bottom: 22px;
  font-family: 'Anton', sans-serif;
  text-transform: uppercase;
  font-size: 14px;
  letter-spacing: 0.1em;
  color: #bddfec;
}
.comment-donner-page .story-quote blockquote {
  position: relative;
  margin: 0;
  font-family: 'Anton', sans-serif;
  text-transform: uppercase;
  font-size: clamp(26px, 3vw, 42px);
  line-height: 1.04;
  letter-spacing: -0.01em;
}
.comment-donner-page .story-temoi {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  overflow: hidden;
  padding: 72px 56px;
  background: #eef6fb;
}
.comment-donner-page .temoi-label {
  margin-bottom: 20px;
  font-family: 'Anton', sans-serif;
  text-transform: uppercase;
  font-size: 14px;
  letter-spacing: 0.08em;
  color: #e9511c;
}
.comment-donner-page .story-temoi blockquote {
  margin: 0 0 22px;
  font-size: 22px;
  font-style: italic;
  line-height: 1.5;
  color: #1d1a55;
}
.comment-donner-page .temoi-who {
  display: flex;
  align-items: center;
  gap: 14px;
}
.comment-donner-page .temoi-av {
  position: relative;
  flex-shrink: 0;
  width: 52px;
  height: 52px;
  border-radius: 100%;
  overflow: hidden;
  background: #cbd9e8;
}
.comment-donner-page .temoi-av img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.comment-donner-page .temoi-auth {
  font-size: 15px;
  font-weight: 700;
  color: #1d1a55;
}
.comment-donner-page .temoi-role {
  margin-top: 2px;
  font-size: 14px;
  font-weight: 600;
  color: #8a90ad;
}

/* ===== FAQ ===== */
.comment-donner-page .dm-faq {
  padding: 84px 0;
}
.comment-donner-page .faq-list {
  display: flex;
  flex-direction: column;
  margin-top: 8px;
  border-top: 1px solid #dbe8f2;
}
.comment-donner-page .faq-item {
  border-bottom: 1px solid #dbe8f2;
  transition: background-color 0.25s ease;
}
.comment-donner-page .faq-item:hover,
.comment-donner-page .faq-item.open {
  background: #f7fafd;
}
/* La ligne de question est un <button> : ouverture au clavier et état annoncé aux
   lecteurs d'écran (aria-expanded), sans surcharge visuelle. */
.comment-donner-page .faq-head {
  display: flex;
  align-items: center;
  gap: 18px;
  width: 100%;
  padding: 22px 8px;
  border: 0;
  background: none;
  font-family: inherit;
  text-align: left;
  cursor: pointer;
}
.comment-donner-page .faq-q {
  flex: 1;
  font-size: clamp(16px, 1.5vw, 19px);
  font-weight: 700;
  line-height: 1.3;
  color: #1d1a55;
}
.comment-donner-page .faq-ar {
  display: grid;
  place-items: center;
  flex-shrink: 0;
  width: 30px;
  height: 30px;
  border: 1px solid #cfe0ef;
  border-radius: 100%;
  background: #fff;
  color: #055da8;
  transition: transform 0.3s ease, background-color 0.25s ease, color 0.25s ease, border-color 0.25s ease;
}
.comment-donner-page .faq-item.open .faq-ar {
  transform: rotate(45deg);
  border-color: #055da8;
  background: #055da8;
  color: #fff;
}
.comment-donner-page .faq-ar svg {
  width: 14px;
  height: 14px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.4;
}
.comment-donner-page .faq-ans {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.35s ease;
}
.comment-donner-page .faq-ans-in {
  max-width: 900px;
  padding: 0 8px 24px;
  font-size: 15px;
  line-height: 1.7;
  color: #5b6078;
}

/* ===== APPEL FINAL ===== */
.comment-donner-page .dm-final {
  padding: 0;
}
/* Les sections ne portent pas de marge : c'est la FAQ, avec ses 84px de fond clair, qui
   sépare le témoignage de l'appel final. Masquée au back-office, elle laisserait les deux
   blocs bleus collés l'un à l'autre — l'appel reprend alors cette respiration à son compte.
   Le sélecteur ne vise que ce cas : la page qui garde sa FAQ ne bouge pas. */
.comment-donner-page .dm-story + .dm-final,
.comment-donner-page .dm-ways + .dm-final {
  padding-top: 84px;
}
.comment-donner-page .final-card {
  position: relative;
  overflow: hidden;
  padding: 72px 40px;
  border-radius: 24px;
  background: #055da8;
  text-align: center;
  color: #fff;
}
.comment-donner-page .final-card .fk {
  position: relative;
  margin-bottom: 16px;
  font-family: 'Anton', sans-serif;
  text-transform: uppercase;
  font-size: 14px;
  letter-spacing: 0.1em;
  color: #bddfec;
}
.comment-donner-page .final-card h2 {
  position: relative;
  margin-bottom: 28px;
  font-family: 'Anton', sans-serif;
  text-transform: uppercase;
  font-size: clamp(30px, 4vw, 58px);
  line-height: 0.95;
}
.comment-donner-page .final-card h2 .hl {
  color: #bddfec;
}
.comment-donner-page .final-card .fcta {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 16px 32px;
  border-radius: 6px;
  background: #e9511c;
  font-family: 'Anton', sans-serif;
  text-transform: uppercase;
  font-size: 16px;
  letter-spacing: 0.03em;
  color: #fff;
  transition: background-color 0.3s ease;
}
.comment-donner-page .final-card .fcta:hover {
  background: #d1440f;
}
.comment-donner-page .final-card .fcta img {
  width: 15px;
  transition: transform 0.3s ease;
}
.comment-donner-page .final-card .fcta:hover img {
  transform: translateX(4px);
}

/* ===== RESPONSIVE ===== */
/* Sous 1280px l'en-tête fixe mesure 101px (contre 146px au-delà) : le hero dégage
   la hauteur de l'en-tête, puis 34px de respiration. */
@media (max-width: 1279px) {
  .comment-donner-page .dm-hero .wrap { padding-top: 135px; }
  .comment-donner-page .wrap { padding: 0 10px; }
}
@media (max-width: 940px) {
  .comment-donner-page .dm-hero .wrap { grid-template-columns: 1fr; gap: 40px; }
  /* En colonne, les photos passent sous chaque ligne : la respiration de bas de section
     n'a plus à compenser la colonne d'illustration, on resserre avec « Façons de donner ». */
  .comment-donner-page .dm-adv { padding: 84px 0 14px; }
  .comment-donner-page .dm-ways { padding-top: 24px; }
  .comment-donner-page .adv-split { display: flex; flex-direction: column; gap: 24px; align-items: stretch; }
  /* La colonne d'illustration disparaît : chaque ligne porte sa propre photo. */
  .comment-donner-page .adv-media { display: none; }
  .comment-donner-page .adv-lead { position: static; }
  .comment-donner-page .adv-row,
  .comment-donner-page .adv-row:hover,
  .comment-donner-page .adv-row.act { flex-direction: column; padding-left: 4px; background: transparent; }
  .comment-donner-page .adv-ph {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 10;
    margin-top: 8px;
    border-radius: 14px;
    overflow: hidden;
  }
  .comment-donner-page .adv-ph img { display: block; width: 100%; height: 100%; object-fit: cover; }
  .comment-donner-page .ways-grid { grid-template-columns: 1fr; }
  .comment-donner-page .way-card { padding: 28px 24px; }
  .comment-donner-page .way-card.wide { flex-direction: column; align-items: flex-start; gap: 22px; }
  .comment-donner-page .dm-story { grid-template-columns: 1fr; }
  .comment-donner-page .story-quote,
  .comment-donner-page .story-temoi { padding: 48px 30px; }
  /* Le témoignage empilé porte déjà 48px de fond coloré : la FAQ n'a pas besoin
     des 84px de bureau au-dessus de son intitulé. L'appel final, quand il prend sa place,
     suit la même mesure. */
  .comment-donner-page .dm-faq { padding-top: 40px; }
  .comment-donner-page .dm-story + .dm-final,
  .comment-donner-page .dm-ways + .dm-final { padding-top: 40px; }
  .comment-donner-page .story-temoi blockquote { font-size: 16px; line-height: 1.6; }
}
@media (max-width: 640px) {
  /* Pas de gouttière propre au mobile : les 10px de la barre de navigation, posés à 1279px,
     valent jusqu'en bas de l'échelle. */
  .comment-donner-page .dm-hero .wrap { padding-top: 153px; padding-bottom: 52px; }
  .comment-donner-page .dm-adv { padding: 52px 0 20px; }
  .comment-donner-page .dm-ways,
  .comment-donner-page .dm-faq { padding: 52px 0; }
  .comment-donner-page .dm-ways { padding-top: 32px; }
  .comment-donner-page .dm-story + .dm-final,
  .comment-donner-page .dm-ways + .dm-final { padding-top: 52px; }
  .comment-donner-page .dm-band { padding: 14px 0; }
  .comment-donner-page .dm-band .wrap { gap: 6px 10px; }
  .comment-donner-page .dm-band .bk { font-size: 12px; letter-spacing: 0; }
  .comment-donner-page .dm-band .dot { width: 5px; height: 5px; }
  .comment-donner-page .ways-grid {
    display: flex;
    grid-template-columns: none;
    gap: 14px;
    /* Pleine largeur : la marge négative annule la gouttière du « wrap » (10px), le padding
       la rétablit à l'intérieur du rail défilant. Les deux suivent la gouttière. */
    margin: 24px -10px 0;
    padding: 0 10px 8px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    -ms-overflow-style: none;
  }
  .comment-donner-page .ways-grid::-webkit-scrollbar { display: none; width: 0; height: 0; }
  .comment-donner-page .way-card { flex: 0 0 84%; scroll-snap-align: start; padding: 26px 22px; border-radius: 12px; }
  .comment-donner-page .way-card.wide { flex: 0 0 84%; }
  .comment-donner-page .way-card h3 { font-size: 22px; margin-bottom: 10px; }
  .comment-donner-page .way-card > p { font-size: 14.5px; margin-bottom: 16px; }
  .comment-donner-page .way-list { margin: 0 0 18px; gap: 9px; }
  .comment-donner-page .story-mark { display: none; }
  .comment-donner-page .faq-q { font-size: 16px; }
  .comment-donner-page .final-card { padding: 52px 24px; }
}
/* Au-delà de 1700px l'en-tête passe en unités relatives (voir style.css) : toute la page
   suit, chaque px de la mise en page valant 0.0694486429vw (1440px de référence), sinon
   le contenu se décalerait du logo à mesure que l'écran s'élargit. */
@media (min-width: 1700px) {
  .comment-donner-page .wrap {
    padding: 0 1.8057vw;
  }
  .comment-donner-page .sec-title {
    font-size: clamp(1.9446vw, 3.4vw, 3.1946vw);
  }
  .comment-donner-page .kick {
    gap: 0.6945vw;
    margin-bottom: 0.9723vw;
    font-size: 0.9723vw;
  }
  .comment-donner-page .kick::before {
    width: 1.5279vw;
    height: 0.1389vw;
    border-radius: 0.1389vw;
  }
  .comment-donner-page .reveal {
    transform: translateY(1.5279vw);
  }
  .comment-donner-page .cd-progress {
    height: 0.2778vw;
  }
  .comment-donner-page .dm-hero .wrap {
    gap: 4.1669vw;
    padding-top: 15.1398vw;
    padding-bottom: 5.0003vw;
  }
  .comment-donner-page .dm-hero-badge {
    gap: 0.625vw;
    margin-bottom: 1.8057vw;
    padding: 0.5556vw 1.1112vw;
    border: 0.0694vw solid rgba(255, 255, 255, 0.2);
    border-radius: 3.4724vw;
    font-size: 0.9723vw;
  }
  .comment-donner-page .dm-hero-badge .pulse {
    width: 0.625vw;
    height: 0.625vw;
  }
  .comment-donner-page .dm-hero h1 {
    margin-bottom: 1.6668vw;
    font-size: clamp(3.1946vw, 6vw, 6.3893vw);
  }
  .comment-donner-page .dm-lead {
    max-width: 34.7243vw;
    font-size: 1.2501vw;
  }
  .comment-donner-page .dm-card {
    padding: 2.5002vw 2.0835vw 1.8057vw;
    border-radius: 0.5556vw;
  }
  .comment-donner-page .dm-card--frame {
    padding: 0;
    border-radius: 0;
  }
  .comment-donner-page .dm-card h4 {
    margin: 0 0 0.5556vw;
    font-size: 2.0835vw;
  }
  .comment-donner-page .dm-card .dc-intro {
    margin-bottom: 1.5279vw;
    font-size: 0.9723vw;
  }
  .comment-donner-page .dm-opt {
    gap: 0.6945vw;
  }
  .comment-donner-page .dm-opt a {
    gap: 0.9723vw;
    padding: 1.2501vw 1.389vw;
    border-radius: 0.5556vw;
    font-size: 1.0417vw;
  }
  .comment-donner-page .dm-opt a:hover {
    transform: translateX(0.2778vw);
  }
  .comment-donner-page .dm-opt a .oa {
    width: 2.5002vw;
    height: 2.5002vw;
  }
  .comment-donner-page .dm-opt a .oa img {
    width: 0.9723vw;
  }
  .comment-donner-page .dm-frame {
    height: calc(var(--dm-frame-h, 620px) * var(--mdm-k));
    border-radius: 0.5556vw;
  }
  .comment-donner-page .dm-frame iframe {
    width: calc(100% / var(--mdm-k));
    transform: scale(var(--mdm-k));
    transform-origin: 0 0;
  }
  .comment-donner-page .dm-secure {
    gap: 0.5556vw;
    margin-top: 1.2501vw;
    font-size: 0.9723vw;
  }
  .comment-donner-page .dm-secure svg {
    width: 0.9723vw;
    height: 0.9723vw;
  }
  .comment-donner-page .dm-card--frame .dm-secure {
    gap: 0.4167vw;
    margin-top: 1.389vw;
    font-size: 0.7639vw;
    line-height: 1.0417vw;
  }
  .comment-donner-page .dm-card--frame .dm-secure svg {
    width: 0.7639vw;
    height: 0.7639vw;
  }
  .comment-donner-page .dm-band {
    padding: 1.5279vw 0;
  }
  .comment-donner-page .dm-band .wrap {
    gap: 1.9446vw;
  }
  .comment-donner-page .dm-band .bk {
    font-size: clamp(1.1112vw, 1.8vw, 1.5279vw);
  }
  .comment-donner-page .dm-band .dot {
    width: 0.5556vw;
    height: 0.5556vw;
  }
  .comment-donner-page .dm-adv {
    padding: 5.8337vw 0 1.6668vw;
  }
  .comment-donner-page .adv-split {
    grid-template-columns: 0.72fr 1fr 22.9181vw;
    gap: 3.0557vw;
  }
  .comment-donner-page .adv-split--no-lead {
    grid-template-columns: 1fr 22.9181vw;
  }
  .comment-donner-page .adv-split--no-rows {
    grid-template-columns: minmax(0, 33.3353vw);
  }
  .comment-donner-page .adv-lead {
    top: 7.6394vw;
  }
  .comment-donner-page .adv-lead p {
    max-width: 23.6125vw;
    margin-top: 1.1112vw;
    font-size: 1.1112vw;
  }
  .comment-donner-page .adv-row {
    gap: 1.6668vw;
    padding: 1.8057vw 0.2778vw;
    border-top: 0.0694vw solid #e6ecf5;
  }
  .comment-donner-page .adv-row:last-child {
    border-bottom: 0.0694vw solid #e6ecf5;
  }
  .comment-donner-page .adv-row:hover,
  .comment-donner-page .adv-row.act {
    padding-left: 1.1112vw;
  }
  .comment-donner-page .adv-tx h3 {
    margin-bottom: 0.5556vw;
    font-size: clamp(1.389vw, 1.8vw, 1.7362vw);
  }
  .comment-donner-page .adv-tx p {
    font-size: 1.0417vw;
  }
  .comment-donner-page .adv-media {
    top: 7.6394vw;
    border-radius: 0.9723vw;
  }
  .comment-donner-page .dm-ways {
    padding: 3.3335vw 0 3.3335vw;
  }
  .comment-donner-page .ways-grid {
    gap: 1.2501vw;
    margin-top: 2.3613vw;
  }
  .comment-donner-page .way-card {
    padding: 2.639vw 2.5002vw;
    border: 0.0694vw solid #e2e9f2;
    border-radius: 1.1112vw;
  }
  .comment-donner-page .way-card:hover {
    transform: translateY(-0.4167vw);
  }
  .comment-donner-page .way-k {
    margin-bottom: 0.9723vw;
    font-size: 0.9723vw;
  }
  .comment-donner-page .way-card h3 {
    margin-bottom: 0.8334vw;
    font-size: clamp(1.5279vw, 2.2vw, 1.9446vw);
  }
  .comment-donner-page .way-card > p {
    margin-bottom: 1.389vw;
    font-size: 1.0417vw;
  }
  .comment-donner-page .way-list {
    gap: 0.7639vw;
    margin: 0 0 1.8057vw;
  }
  .comment-donner-page .way-list li {
    padding-left: 1.5279vw;
    font-size: 0.9723vw;
  }
  .comment-donner-page .way-list li::before {
    top: 0.625vw;
    width: 0.6945vw;
    height: 0.1389vw;
    border-radius: 0.1389vw;
  }
  .comment-donner-page .way-link {
    gap: 0.6945vw;
    padding-bottom: 0.2083vw;
    border-bottom: 0.1389vw solid #055da8;
    font-size: 0.9723vw;
  }
  .comment-donner-page .way-card.wide {
    gap: 2.7779vw;
  }
  .comment-donner-page .way-card.wide .wide-tx {
    max-width: 44.4471vw;
  }
  .comment-donner-page .story-quote {
    padding: 5.0003vw 3.8891vw;
  }
  .comment-donner-page .story-mark {
    top: -6.2504vw;
    right: -4.8614vw;
    width: 19.4456vw;
    height: 19.4456vw;
  }
  .comment-donner-page .story-quote .qk {
    margin-bottom: 1.5279vw;
    font-size: 0.9723vw;
  }
  .comment-donner-page .story-quote blockquote {
    font-size: clamp(1.8057vw, 3vw, 2.9168vw);
  }
  .comment-donner-page .story-temoi {
    padding: 5.0003vw 3.8891vw;
  }
  .comment-donner-page .temoi-label {
    margin-bottom: 1.389vw;
    font-size: 0.9723vw;
  }
  .comment-donner-page .story-temoi blockquote {
    margin: 0 0 1.5279vw;
    font-size: 1.5279vw;
  }
  .comment-donner-page .temoi-who {
    gap: 0.9723vw;
  }
  .comment-donner-page .temoi-av {
    width: 3.6113vw;
    height: 3.6113vw;
  }
  .comment-donner-page .temoi-auth {
    font-size: 1.0417vw;
  }
  .comment-donner-page .temoi-role {
    margin-top: 0.1389vw;
    font-size: 0.9723vw;
  }
  .comment-donner-page .dm-faq {
    padding: 5.8337vw 0;
  }
  .comment-donner-page .dm-story + .dm-final,
  .comment-donner-page .dm-ways + .dm-final {
    padding-top: 5.8337vw;
  }
  .comment-donner-page .faq-list {
    margin-top: 0.5556vw;
    border-top: 0.0694vw solid #dbe8f2;
  }
  .comment-donner-page .faq-item {
    border-bottom: 0.0694vw solid #dbe8f2;
  }
  .comment-donner-page .faq-head {
    gap: 1.2501vw;
    padding: 1.5279vw 0.5556vw;
  }
  .comment-donner-page .faq-q {
    font-size: clamp(1.1112vw, 1.5vw, 1.3195vw);
  }
  .comment-donner-page .faq-ar {
    width: 2.0835vw;
    height: 2.0835vw;
    border: 0.0694vw solid #cfe0ef;
  }
  .comment-donner-page .faq-ar svg {
    width: 0.9723vw;
    height: 0.9723vw;
  }
  .comment-donner-page .faq-ans-in {
    max-width: 62.5038vw;
    padding: 0 0.5556vw 1.6668vw;
    font-size: 1.0417vw;
  }
  .comment-donner-page .final-card {
    padding: 5.0003vw 2.7779vw;
    border-radius: 1.6668vw;
  }
  .comment-donner-page .final-card .fk {
    margin-bottom: 1.1112vw;
    font-size: 0.9723vw;
  }
  .comment-donner-page .final-card h2 {
    margin-bottom: 1.9446vw;
    font-size: clamp(2.0835vw, 4vw, 4.028vw);
  }
  .comment-donner-page .final-card .fcta {
    gap: 0.8334vw;
    padding: 1.1112vw 2.2224vw;
    border-radius: 0.4167vw;
    font-size: 1.1112vw;
  }
  .comment-donner-page .final-card .fcta img {
    width: 1.0417vw;
  }
  .comment-donner-page .final-card .fcta:hover img {
    transform: translateX(0.2778vw);
  }
}
@media (prefers-reduced-motion: reduce) {
  .comment-donner-page .hr,
  .comment-donner-page .reveal,
  .comment-donner-page .dm-card { animation: none; opacity: 1; transform: none; transition: none; }
}