/**
 * Page Don (template page-tpl-don.php)
 * Reference visuelle : .claude/refs/page-don/maquette-page-don-crop.png
 * Mobile-first. Prefixe BEM « don- ». Charge uniquement sur ce template.
 */

/* ── Polices ─────────────────────────────────────────────────── */
@font-face {
  font-family: "Source Sans Pro";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/source-sans-pro-400.woff2") format("woff2");
}
@font-face {
  font-family: "Source Sans Pro";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../fonts/source-sans-pro-600.woff2") format("woff2");
}
@font-face {
  font-family: "Source Sans Pro";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../fonts/source-sans-pro-700.woff2") format("woff2");
}

/* ── Tokens ──────────────────────────────────────────────────── */
.don-page {
  --don-red: #e52729;
  --don-red-dark: #c41e20;
  --don-grey: #cdcccc;
  --don-grey-light: #f2f2f2;
  --don-band: #eaeaea;
  --don-ink: #000;
  --don-white: #fff;
  --don-radius: 15px;
  --don-container: 1470px;
  --don-gutter: 20px;

  font-family: "Source Sans Pro", "Source Sans 3", Arial, Helvetica, sans-serif;
  color: var(--don-ink);
  overflow-x: clip; /* garde-fou : les encadres virement/question debordent volontairement */
}

.don-page *,
.don-page *::before,
.don-page *::after {
  box-sizing: border-box;
}

/* Le kit Elementor cible .elementor-kit-165222 h2 (specificite 0-1-1) et impose
   sa police et sa couleur. On repasse par-dessus en scopant sous .don-page,
   ce qui donne la meme specificite mais une position plus tardive dans la
   cascade ; les titres restent des balises h1/h2/h3 sans classe utilitaire. */
.don-page h1,
.don-page h2,
.don-page h3,
.don-page p,
.don-page ul {
  margin: 0;
  color: var(--don-ink);
  font-family: inherit;
}

.don-page a {
  color: inherit;
}

.don-page button {
  font-family: inherit;
  text-transform: none;
}

.don-page ul {
  padding: 0;
  list-style: none;
}

.don-page img,
.don-page svg {
  max-width: 100%;
}

.don-container {
  width: 100%;
  max-width: var(--don-container);
  margin-inline: auto;
  padding-inline: var(--don-gutter);
}

/* Mot souligne par le trait rouge dessine (line.svg) */
/* Trait dessine sous un mot. inline-block (et non inline) : en inline le fond
   se cale sur la boite de ligne entiere et le trait derive a droite quand le
   mot termine la ligne. Le SVG mesure 231x22, on borne sa hauteur. */
.don-underline {
  display: inline-block;
  padding-bottom: 0.18em;
  background-image: url("../includes/don/assets/line.svg");
  background-repeat: no-repeat;
  background-position: bottom center;
  background-size: 100% 7px;
}
/* Variante blanche pour les cartes rouges : texte 15px, trait plus fin. */
.don-underline--blanc {
  padding-bottom: 0.12em;
  background-image: url("../includes/don/assets/line-blanc.svg");
  background-size: 100% 3px;
}

/* Bouton pilule rouge */
.don-page .don-btn,
.don-page a.don-btn,
.don-page button.don-btn {
  display: inline-block;
  padding: 10px 30px;
  border: 0;
  border-radius: 50px;
  background: var(--don-red);
  color: var(--don-white);
  font: inherit;
  font-weight: 500;
  line-height: 1.4;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.25s ease;
}
.don-page .don-btn:hover,
.don-page .don-btn:focus-visible {
  background: var(--don-red-dark);
  color: var(--don-white);
}

.don-page :focus-visible {
  outline: 2px solid var(--don-red);
  outline-offset: 2px;
}

/* ── Bandeau ─────────────────────────────────────────────────── */
.don-hero {
  padding: 40px 0 30px;
  background: var(--don-band);
}
.don-hero__eyebrow {
  padding-left: 10px;
  border-left: 3px solid var(--don-red);
  font-size: 16px;
  font-weight: 700;
  line-height: 1.2;
  text-transform: uppercase;
}
.don-page .don-hero__title {
  margin-top: 12px;
  font-size: 25px;
  font-weight: 700;
  line-height: 1.3;
}

/* ── Introduction ────────────────────────────────────────────── */
.don-intro {
  margin-top: 30px;
}
.don-page .don-intro__title {
  font-size: 32px;
  font-weight: 600;
  line-height: 1.15;
  text-align: center;
}

.don-tabs {
  display: flex;
  justify-content: center;
  width: fit-content;
  max-width: 100%;
  margin: 45px auto 20px;
  border-radius: 50px;
  background: var(--don-grey);
  /* Ancre #don-choix (liens directs, QR codes) : on garde de la place pour le
     coeur pose au-dessus de l'onglet actif, le header colle et la barre
     d'administration WordPress. */
  scroll-margin-top: calc(var(--don-header-offset, 0px) + var(--don-admin-offset, 0px) + 60px);
}
/* Les onglets sont des liens (une adresse par volet). */
.don-page .don-tabs__tab {
  position: relative;
  display: inline-block;
  padding: 8px 20px;
  border: 0;
  border-radius: 50px;
  text-decoration: none;
  /* L'onglet inactif laisse voir le gris de la barre (comme sur la maquette).
     Son texte n'est pas blanc comme sur le fichier d'origine : blanc sur
     #CDCCCC donne 1,6:1, sous le minimum lisible. Ce gris fonce garde
     l'aspect « en retrait » tout en restant lisible (#555 : 4,65:1 ;
     #595959 ne donnait que 4,37:1, sous le seuil AA de 4,5:1). */
  background: transparent;
  color: #555;
  font: inherit;
  font-size: 16px;
  font-weight: 400;
  line-height: 1.45;
  text-transform: uppercase;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color 0.3s ease-in-out;
}
.don-page .don-tabs__tab:not(.is-active):hover,
.don-page .don-tabs__tab:not(.is-active):focus-visible {
  color: var(--don-ink);
}
/* Mobile : les libelles NL (« EENMALIGE SCHENKING », « MAANDELIJKSE
   SCHENKING ») font 429 px a eux deux, plus que l'ecran (350 px utiles a
   390 px) ; sans retour a la ligne, ils etaient coupes au bord (le clip de
   .don-page masquait le debordement). On autorise deux lignes. */
@media (max-width: 767px) {
  .don-page .don-tabs__tab {
    flex: 0 1 auto;
    min-width: 0;
    padding: 8px 14px;
    white-space: normal;
    text-align: center;
  }
}
.don-page .don-tabs__tab.is-active {
  background: var(--don-red);
  color: var(--don-white);
}
/* Coeur pose au-dessus de l'onglet actif */
.don-page .don-tabs__tab.is-active::before {
  content: "";
  position: absolute;
  top: -34px;
  left: 50%;
  width: 40px;
  height: 38px;
  transform: translateX(-50%);
  background-image: url("../includes/don/assets/heart.svg");
  background-repeat: no-repeat;
  background-size: contain;
}

.don-intro__fiscal {
  display: flex;
  flex-direction: column;
  gap: 9px;
  margin-top: 25px;
  text-align: center;
}
.don-intro__fiscal-line {
  font-size: 16px;
  line-height: 1.4;
}
.don-intro__fiscal-line--1 { font-weight: 700; }
.don-intro__fiscal-line--2 { font-weight: 500; }
.don-intro__fiscal-line--3 {
  font-size: 18px;
  font-weight: 500;
  color: var(--don-red);
}

/* ── Choix du don ────────────────────────────────────────────── */
.don-choix {
  margin-top: 30px;
}
.don-panel {
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.don-panel[hidden] {
  display: none;
}
/* Volet prepare hors ecran par js/don.js : mis en page a la largeur du volet
   visible pour que Stripe mesure ses champs, mais invisible et inerte. Le
   .don-page (overflow-x: clip) l'empeche de creer un defilement horizontal. */
.don-choix .don-container {
  position: relative;
}
.don-panel.don-panel--prechauffe {
  position: absolute;
  top: 0;
  left: -10000px;
  visibility: hidden;
  pointer-events: none;
}

.don-panel__cartes {
  display: grid;
  grid-template-columns: 1fr;
  gap: 15px;
}

.don-carte {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 15px;
  padding: 20px 15px;
  border-radius: 0 var(--don-radius) 0 0;
  background: var(--don-red);
  color: var(--don-white);
  text-align: center;
}
.don-page .don-carte__montant {
  display: grid;
  place-items: center;
  width: 92px;
  height: 92px;
  border: 2px solid var(--don-white);
  border-radius: 50%;
  background: var(--don-white);
  color: var(--don-red);
  font: inherit;
  font-size: 26px;
  font-weight: 700;
  letter-spacing: -0.1px;
  cursor: pointer;
  transition: background-color 0.25s ease, color 0.25s ease;
}
.don-page .don-carte__montant:hover,
.don-page .don-carte__montant[aria-pressed="true"] {
  background: var(--don-red);
  color: var(--don-white);
}
.don-page .don-carte__montant:focus-visible {
  outline: 2px solid var(--don-white);
  outline-offset: 3px;
}
/* Texte blanc sur la carte rouge (contraste 4,5:1). La couleur doit etre posee
   ici : le reset « .don-page p » (texte noir) l'emporterait sur le blanc
   herite de .don-carte. */
.don-page .don-carte__apres {
  font-size: 15px;
  font-weight: 700;
  line-height: 1.4;
  color: var(--don-white);
}
.don-page .don-carte__texte {
  font-size: 15px;
  font-weight: 600;
  line-height: 1.35;
  color: var(--don-white);
}
.don-carte__icone {
  display: block;
  margin-top: auto;
  color: var(--don-white);
}
.don-carte__icone svg {
  width: 75px;
  height: auto;
}
/* Contenu des cartes : en haut au repos ; quand le formulaire grandit
   (adresse completee, message d'erreur...) et pousse les cartes vers le bas,
   il suit et se centre en hauteur, puis ne remonte plus. js/don.js pose le
   decalage dans --don-centrage. Une translation, et non la mise en page, pour
   que le mouvement s'anime ; animation active (.is-anime) une fois la hauteur
   de repos de la carte connue. 300 ms, ease-out fort : le fond rouge a deja
   grandi, le contenu doit partir aussitot. */
.don-carte {
  position: relative;
}
.don-carte > * {
  translate: 0 var(--don-centrage, 0px);
}
.don-carte.is-anime > * {
  transition: translate 0.3s cubic-bezier(0.23, 1, 0.32, 1);
}
/* Le bouton de montant garde ses propres transitions de couleur. */
.don-page .don-carte.is-anime .don-carte__montant {
  transition: background-color 0.25s ease, color 0.25s ease, translate 0.3s cubic-bezier(0.23, 1, 0.32, 1);
}
@media (prefers-reduced-motion: reduce) {
  .don-carte.is-anime > * {
    transition: none;
  }
  .don-page .don-carte.is-anime .don-carte__montant {
    transition: background-color 0.25s ease, color 0.25s ease;
  }
}

.don-panel__form {
  padding: 15px 12px;
  border-radius: 0 var(--don-radius) 0 0;
  background: var(--don-grey);
}
/* Clic sur un montant (mobile, tablette) : js/don.js fait defiler jusqu'au
   formulaire ; il s'arrete sous le header colle au lieu de passer dessous. */
.don-page form.simpay-checkout-form {
  scroll-margin-top: calc(var(--don-header-offset, 0px) + var(--don-admin-offset, 0px) + 10px);
}

/* ── Formulaire WP Simple Pay ────────────────────────────────── */
.don-page .simpay-form-title,
.don-page .simpay-form-description,
.don-page .simpay-optional-indicator,
.don-page .simpay-styled .simpay-form-control legend {
  display: none;
}
.don-page .simpay-styled label {
  margin-bottom: 10px;
  /* Fond gris clair : le blanc d'origine etait illisible. */
  color: var(--don-ink);
}
/* Formulaire replie : il s'ouvre avec l'e-mail, le registre national et le
   montant ; nom et adresse, carte, case et bouton se deplient des que l'e-mail
   est saisi (js/don.js, classe .is-deplie). Repli par une grille a 0fr et non
   par display: none : les champs Stripe restent mis en page a la bonne largeur
   (masques, ils ressortaient trop courts). Sans JavaScript, .js-don-replie
   n'est pas posee et le formulaire s'affiche en entier. */
.don-page.js-don-replie .don-panel__form .simpay-conditional-field:is([data-field-type="address"], [data-field-type="card"], [data-field-type="checkbox"], [data-field-type="checkout_button"]) {
  display: grid;
  /* minmax(0, ...) : sans minimum automatique, la marge du champ ne laisse
     pas 10 px de vide par bloc replie. */
  grid-template-rows: minmax(0, 0fr);
  opacity: 0;
  visibility: hidden;
  transition: grid-template-rows 0.3s cubic-bezier(0.23, 1, 0.32, 1), opacity 0.3s cubic-bezier(0.23, 1, 0.32, 1), visibility 0s linear 0.3s;
}
.don-page.js-don-replie .don-panel__form .simpay-conditional-field:is([data-field-type="address"], [data-field-type="card"], [data-field-type="checkbox"], [data-field-type="checkout_button"]) > * {
  min-height: 0;
  overflow: hidden;
}
.don-page.js-don-replie .don-panel__form.is-deplie .simpay-conditional-field:is([data-field-type="address"], [data-field-type="card"], [data-field-type="checkbox"], [data-field-type="checkout_button"]) {
  grid-template-rows: minmax(0, 1fr);
  opacity: 1;
  visibility: visible;
  transition-delay: 0s;
}
/* Fin du depliement : plus de rognage (anneaux de focus, messages d'erreur
   sous les champs). La grille reste : la quitter ferait sauter les marges. */
.don-page.js-don-replie .don-panel__form.is-deplie-fini .simpay-conditional-field:is([data-field-type="address"], [data-field-type="card"], [data-field-type="checkbox"], [data-field-type="checkout_button"]) > * {
  overflow: visible;
}
/* Les totaux sont sur le fond gris du panneau : le blanc du plugin passait mal
   (contraste sous 2:1). On les met en noir, en gras pour le montant. */
.don-page .simpay-total-amount-label,
.don-page .simpay-total-amount-recurring-label,
.don-page .simpay-subtotal-amount-label {
  color: var(--don-ink);
  font-weight: 600;
}
.don-page .simpay-total-amount-value,
.don-page .simpay-total-amount-recurring-value,
.don-page .simpay-subtotal-amount-value {
  color: var(--don-ink);
  font-weight: 700;
}
/* Le plugin glisse aussi le montant dans le bouton (« Je donne <em>50,00€</em> ») :
   la, il garde la couleur du bouton (blanc sur rouge), pas le noir des totaux. */
.don-page .simpay-checkout-btn .simpay-total-amount-value {
  color: inherit;
}
.don-page .simpay-form-control {
  margin-bottom: 10px;
}
.don-page .simpay-form-control input,
.don-page .simpay-form-control select,
.don-page .simpay-currency-symbol {
  border: 0;
  box-shadow: none;
  color: var(--don-ink);
}
.don-page .simpay-form-control select,
.don-page .simpay-currency-symbol {
  color: var(--don-grey);
}
.don-page .simpay-styled .simpay-form-control input[type="text"]::placeholder,
.don-page .simpay-styled .simpay-form-control input[type="email"]::placeholder,
.don-page .simpay-styled .simpay-form-control input[type="tel"]::placeholder {
  color: #878787;
}
.don-page .simpay-styled .simpay-form-control .simpay-btn.simpay-checkout-btn:not(.stripe-button-el) {
  min-width: 150px;
  margin-inline: auto;
  border-radius: var(--don-radius);
  background-color: var(--don-red);
}
.don-page .simpay-address-state-container {
  display: none;
}

/* ── Virement ────────────────────────────────────────────────── */
.don-virement {
  margin-top: 40px;
}
.don-virement__box {
  padding: 25px var(--don-gutter);
  border-radius: 0 var(--don-radius) 0 0;
  background: var(--don-grey-light);
}
.don-virement__inner {
  max-width: 900px;
  margin-inline: auto;
  text-align: center;
}
.don-page .don-virement__titre {
  font-size: 22px;
  font-weight: 600;
  color: var(--don-red);
}
.don-virement__texte {
  margin-top: 12px;
  font-weight: 500;
  line-height: 1.4;
}
.don-virement__compte {
  margin-top: 18px;
  font-weight: 600;
  line-height: 1.35;
}

/* ── Une question ───────────────────────────────────────────── */
.don-question {
  margin-top: 20px;
}
.don-question__box {
  padding: 20px var(--don-gutter);
  border-radius: var(--don-radius) 0 0 0;
  background: var(--don-grey-light);
}
.don-question__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
}
.don-question__titre {
  font-size: 22px;
  font-weight: 600;
  color: var(--don-red);
}

/* ── Merci ───────────────────────────────────────────────────── */
.don-merci {
  margin: 50px 0 60px;
}
.don-merci .don-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 30px;
}
.don-page .don-merci__titre {
  font-size: 32px;
  font-weight: 600;
  text-align: center;
}
.don-merci__coeur {
  width: 70px;
  height: auto;
}
.don-merci__logos {
  display: flex;
  flex-direction: column;
  gap: 0;
  width: 100%;
  border-radius: 0 var(--don-radius) 0 0;
  overflow: hidden;
}
.don-merci__logo {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  padding: 20px;
  background: var(--don-grey-light);
  text-align: center;
}
.don-merci__logo:nth-child(even) {
  background: var(--don-band);
}
.don-merci__logo img {
  width: auto;
  max-width: 200px;
  height: auto;
}
.don-merci__logo-texte {
  font-size: 15px;
  line-height: 1.45;
}
.don-video {
  width: 100%;
  max-width: 800px;
  aspect-ratio: 16 / 9;
}
.don-video iframe {
  width: 100%;
  height: 100%;
  border: 0;
}
/* Facade : vignette + bouton lecture, remplacee par l'iframe au clic. */
.don-video__facade {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: var(--don-ink);
}
/* aspect-ratio sur l'image elle-meme : avec height:100 %, sa hauteur
   minimale restait celle de la vignette (4:3, bandes noires) sous 840 px,
   et la boite sautait en 16:9 au clic. */
.don-page .don-video__vignette {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}
.don-video__lecture {
  position: absolute;
  top: 50%;
  left: 50%;
  display: block;
  transform: translate(-50%, -50%);
  color: var(--don-red);
  transition: color 0.2s ease;
}
.don-video__lecture svg {
  display: block;
  width: 68px;
  height: 48px;
}
.don-video__facade:hover .don-video__lecture,
.don-video__facade:focus-visible .don-video__lecture {
  color: var(--don-red-dark);
}

/* ── Notre mission ──────────────────────────────────────────── */
.don-mission {
  margin-top: 50px;
}
.don-page .don-mission__titre {
  margin-bottom: 30px;
  font-size: 32px;
  font-weight: 600;
  text-align: center;
}
.don-mission__box {
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding: 20px;
  border-radius: 0 var(--don-radius) 0 0;
  background: var(--don-grey-light);
}
.don-mission__media img {
  display: block;
  width: 100%;
  height: auto;
}
.don-mission__texte {
  font-size: 16px;
  line-height: 1.55;
}
.don-mission__texte p {
  margin-bottom: 1em;
}
.don-mission__texte p:last-child {
  margin-bottom: 0;
}
.don-mission__texte strong {
  color: var(--don-red);
  font-weight: 700;
}
.don-mission__texte u {
  padding-bottom: 0.15em;
  background-image: url("../includes/don/assets/line.svg");
  background-repeat: no-repeat;
  background-position: bottom center;
  background-size: 100% auto;
  text-decoration: none;
}

/* ── Nous aider autrement ───────────────────────────────────── */
.don-autrement {
  margin: 50px 0 60px;
}
.don-page .don-autrement__titre {
  margin-bottom: 30px;
  font-size: 32px;
  font-weight: 600;
  text-align: center;
}
.don-autrement__grille {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
}
.don-autre {
  display: flex;
  flex-direction: column;
  border-radius: 0 var(--don-radius) 0 0;
  overflow: hidden;
}
.don-autre__haut {
  display: flex;
  flex-direction: column;
  gap: 15px;
  padding: 20px;
  background: var(--don-band);
}
.don-page .don-autre__titre {
  font-size: 14px;
  font-weight: 600;
  line-height: 1.3;
  text-align: center;
  text-transform: uppercase;
}
.don-autre__image {
  display: block;
  width: 100%;
  height: 160px;
  object-fit: cover;
}
.don-autre__bas {
  display: flex;
  flex: 1;
  flex-direction: column;
  justify-content: space-between;
  gap: 20px;
  padding: 20px;
  background: var(--don-grey-light);
}
.don-autre__texte {
  font-size: 15px;
  line-height: 1.5;
}
.don-btn--carte {
  align-self: center;
}

/* ── Tablette ───────────────────────────────────────────────── */
@media (min-width: 768px) {
  /* Hauteur du header Elementor une fois colle (mesuree le 13/10/2026) :
     85 px en tablette ; en desktop 46 px, mais 92 px tant que le menu tient
     sur deux lignes (jusqu'a ~1085 px en NL) : on garde 92 px. Pas colle en
     mobile. Sert a l'ancre #don-choix et au defilement vers le formulaire. */
  .don-page {
    --don-header-offset: 85px;
  }
  .don-hero {
    padding: 60px 0 40px;
  }
  .don-page .don-hero__title {
    font-size: 38px;
  }
  .don-page .don-intro__title {
    font-size: 48px;
  }
  .don-page .don-tabs__tab {
    font-size: 18px;
    padding: 8px 35px;
  }
  .don-intro__fiscal-line {
    font-size: 18px;
  }
  .don-intro__fiscal-line--3 {
    font-size: 21px;
  }
  /* Lignes partagees (subgrid) : montant, mention fiscale, texte et icone
     restent alignes d'une carte a l'autre. La 5e ligne absorbe la hauteur en
     plus quand les cartes s'etirent a la hauteur du formulaire (desktop). */
  .don-panel__cartes {
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: auto auto auto auto 1fr;
    column-gap: 10px;
    row-gap: 0;
  }
  .don-carte {
    display: grid;
    grid-row: span 5;
    grid-template-rows: subgrid;
    justify-items: center;
    align-content: start;
    padding: 15px 10px;
  }
  .don-carte__montant { grid-row: 1; }
  .don-carte__apres   { grid-row: 2; }
  .don-carte__texte   { grid-row: 3; }
  .don-carte__icone   { grid-row: 4; }
  /* Tablette (formulaire sous les cartes) : meme colonne de 424 px qu'en
     desktop, centree ; le plugin borne le formulaire a 400 px sans le centrer,
     il restait 300 px de gris vide a droite. En desktop, la colonne de la
     grille fait deja 424 px : la regle y est neutre. */
  .don-panel__form {
    width: 100%;
    max-width: 424px;
    margin-inline: auto;
  }
  .don-carte__texte {
    min-height: 80px;
  }
  .don-page .don-merci__titre,
  .don-page .don-mission__titre,
  .don-page .don-autrement__titre {
    font-size: 48px;
  }
  .don-merci__logo {
    flex-direction: row;
    align-items: center;
    gap: 40px;
    padding: 20px 20px 20px 40px;
    text-align: left;
  }
  .don-question__inner {
    flex-direction: row;
    justify-content: flex-end;
    gap: 25px;
  }
  .don-mission__box {
    flex-direction: row;
    align-items: center;
    gap: 25px;
    padding: 30px;
  }
  .don-mission__media {
    flex: 0 0 38%;
  }
  .don-autrement__grille {
    grid-template-columns: repeat(2, 1fr);
    gap: 25px;
  }
}

/* ── Desktop ────────────────────────────────────────────────── */
@media (min-width: 1025px) {
  .don-page {
    --don-header-offset: 92px;
  }
  .don-hero {
    padding: 60px 0 45px;
  }
  .don-hero__eyebrow {
    font-size: 18px;
  }
  .don-page .don-hero__title {
    font-size: 48px;
  }

  .don-intro {
    margin-top: 40px;
  }
  .don-page .don-intro__title {
    font-size: 65px;
  }
  .don-page .don-tabs__tab {
    padding: 8px 45px;
  }
  .don-page .don-tabs__tab.is-active::before {
    top: -40px;
    width: 50px;
    height: 47px;
  }
  .don-intro__fiscal-line--3 {
    font-size: 23px;
  }

  .don-choix {
    margin-top: 20px;
  }
  /* Colonne du formulaire a largeur fixe : le plugin borne le formulaire a
     400 px (.simpay-checkout-form--embedded.simpay-styled), plus 2 x 12 px
     de padding de .don-panel__form. En 71/29 % elle ne donnait 424 px qu'au
     dela de 1 490 px de fenetre, et le formulaire Stripe se tassait. */
  /* stretch : les cartes rouges prennent la hauteur du formulaire et la
     suivent quand Stripe l'agrandit (adresse completee, etc.). */
  .don-panel {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 424px;
    align-items: stretch;
    gap: 20px;
    padding-bottom: 60px;
  }
  .don-page .don-carte__montant {
    width: 100px;
    height: 100px;
  }

  /* Encadres qui touchent le bord de la fenetre */
  .don-virement {
    margin-top: 20px;
  }
  .don-virement__box {
    width: min(72%, calc(var(--don-container) * 0.72 + (100vw - var(--don-container)) / 2));
    padding: 25px var(--don-gutter) 25px calc((100vw - min(100vw, var(--don-container))) / 2 + var(--don-gutter));
  }
  .don-page .don-virement__titre {
    font-size: 26px;
  }
  .don-virement__texte,
  .don-virement__compte {
    font-size: 18px;
  }

  .don-question__box {
    width: 48%;
    margin-left: auto;
    padding: 20px calc((100vw - min(100vw, var(--don-container))) / 2 + 72px) 20px 30px;
  }
  .don-question__titre {
    font-size: 25px;
  }

  .don-merci {
    margin: 60px 0 120px;
  }
  .don-merci .don-container {
    gap: 45px;
  }
  .don-page .don-merci__titre,
  .don-page .don-mission__titre,
  .don-page .don-autrement__titre {
    font-size: 65px;
  }
  .don-merci__coeur {
    width: 100px;
  }
  .don-merci__logo {
    gap: 50px;
    padding: 20px 20px 20px 60px;
  }
  .don-merci__logo:nth-child(even) {
    padding-left: 92px;
  }

  .don-mission {
    margin-top: 60px;
  }
  .don-mission__box {
    padding: 41px;
  }

  .don-autrement {
    margin: 80px 0 80px;
  }
  .don-autrement__grille {
    grid-template-columns: repeat(5, 1fr);
    gap: 25px;
  }
  .don-autre__haut {
    min-height: 210px;
  }
  .don-autre__bas {
    min-height: 320px;
  }
}

/* Barre d'administration WordPress (connecte) : fixe en haut, 46 px de 601
   a 782 px, 32 px au-dela ; sous 601 px elle defile avec la page. */
@media (min-width: 601px) {
  .admin-bar .don-page {
    --don-admin-offset: 46px;
  }
}
@media (min-width: 783px) {
  .admin-bar .don-page {
    --don-admin-offset: 32px;
  }
}

/* ── Preferences utilisateur ────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .don-page * {
    transition-duration: 0.01ms !important;
  }
}