@layer reset, tokens, base, layout, components, utilities, pages;
@layer pages {
  .section--don { padding-block: 0 var(--space-section); }
  .don-layout { display: grid; gap: 1.5rem; align-items: start; }
  @media (min-width: 64em) { .don-layout { grid-template-columns: minmax(0, 1fr) 21.5rem; gap: clamp(1.5rem, 3vw, 2.75rem); } .don-aside { position: sticky; inset-block-start: calc(var(--header-h) + 1.25rem); } }
  .don-main { display: grid; gap: 1rem; min-inline-size: 0; }
  .bandeau-demo--perm { justify-content: center; text-align: center; }
  .montants-grille { display: grid; gap: 0.75rem; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  @media (min-width: 40em) { .montants-grille[data-n="3"] { grid-template-columns: repeat(3, minmax(0, 1fr)); } .montants-grille[data-n="4"] { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
  .montant-carte { position: relative; display: grid; gap: 0.4rem; align-content: start; min-block-size: 6.25rem; padding: 1rem; border: 2px solid var(--field-border); border-radius: var(--r-m); background: var(--surface); cursor: pointer; transition: transform var(--dur-hover) var(--ease-out), background var(--dur-state), box-shadow var(--dur-state); }
  .montant-carte input { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; margin: 0; opacity: 0; cursor: pointer; }
  .montant-carte__val { font: 800 var(--step-2)/1 var(--font-display); letter-spacing: -0.03em; }
  .montant-carte__eq { font: 400 0.88rem/1.35 var(--font-display); color: var(--text-2); }
  .montant-carte:hover { transform: translateY(-2px); border-color: var(--text); }
  .montant-carte:has(input:checked) { background: var(--sun); border-color: var(--edge); box-shadow: 0 3px 0 var(--edge); }
  .montant-carte:has(input:checked) .montant-carte__eq, .montant-carte:has(input:checked) .montant-carte__val { color: var(--on-sun); }
  .montant-carte:has(input:focus-visible) { outline: 3px solid var(--focus); outline-offset: 3px; }
  .duo--grand { inline-size: 100%; max-inline-size: 26rem; }
  .duo--grand .duo__opt span { padding-block: 0.7rem; font-size: 1.05rem; }
  .field__hint[hidden] { display: none; }
  .resultat-don { display: grid; gap: 0.75rem; padding: 1.15rem 1.35rem; border-radius: var(--r-m); background: var(--bg-alt); border-inline-start: 6px solid var(--sun); }
  .resultat-don p { display: flex; align-items: flex-start; gap: 0.6rem; font: 400 1.05rem/1.45 var(--font-display); }
  .resultat-don .ico { inline-size: 1.4rem; block-size: 1.4rem; flex: none; color: var(--link); margin-block-start: 0.1rem; }
  .resultat-don__pictos { flex-wrap: wrap; gap: 0.3rem; color: var(--link); min-block-size: 0; }
  .resultat-don__pictos:empty { display: none; }
  .resultat-don__pictos .ico { inline-size: 1.5rem; block-size: 1.5rem; margin: 0; }
  .resultat-don__pictos .fois { font: 750 1rem/1.5 var(--font-display); color: var(--text); align-self: center; margin-inline-start: 0.25rem; }
  .calc-fiscal summary { display: inline-flex; align-items: center; gap: 0.4rem; min-block-size: 2.75rem; font: 650 0.95rem/1.2 var(--font-display); color: var(--link); }
  .calc-fiscal summary .ico { inline-size: 1.15rem; block-size: 1.15rem; transition: transform var(--dur-hover); }
  .calc-fiscal[open] summary .ico { transform: rotate(180deg); }
  .calc-fiscal__corps { padding: 0.5rem 0 0.25rem; font: 400 0.98rem/1.55 var(--font-display); }
  .calc-fiscal__corps ul { padding-inline-start: 1.2rem; display: grid; gap: 0.5rem; }
  .hommage__champs { display: grid; gap: 1rem; margin-block-start: 0.75rem; padding: 1rem 1.25rem; border-inline-start: 4px solid var(--feuille); background: var(--bg); border-radius: 0 var(--r-m) var(--r-m) 0; }
  .checks { display: grid; gap: 0.25rem; }
  .moyens { gap: 0.6rem; }
  .moyen { position: relative; display: flex; align-items: center; gap: 1rem; padding: 1rem 1.25rem; border: 2px solid var(--field-border); border-radius: var(--r-m); background: var(--surface); cursor: pointer; transition: background var(--dur-state); }
  .moyen input { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; margin: 0; opacity: 0; cursor: pointer; }
  .moyen__ico { display: grid; place-items: center; flex: none; inline-size: 2.75rem; block-size: 2.75rem; border-radius: 50%; background: var(--leaf-bg); color: var(--link); }
  .moyen__txt { display: grid; gap: 0.1rem; font: 400 0.92rem/1.4 var(--font-display); color: var(--text-2); }
  .moyen__txt strong { font: 700 1.05rem/1.3 var(--font-display); color: var(--text); }
  .moyen:hover { border-color: var(--text); }
  .moyen:has(input:checked) { border-color: var(--text); background: var(--leaf-bg); box-shadow: inset 0 0 0 1px var(--text); }
  .moyen:has(input:focus-visible) { outline: 3px solid var(--focus); outline-offset: 3px; }
  .pay-bloc { display: grid; gap: 1rem; padding: 1.25rem; border: 2px solid var(--hairline); border-radius: var(--r-m); }
  .pay-bloc__t { font-size: 1.2rem; }
  .pay-bloc__t .muted { font: 500 0.9rem/1 var(--font-display); }
  .mandat { padding: 1rem 1.1rem; background: var(--bg-alt); border-radius: var(--r-s); font: 400 0.92rem/1.55 var(--font-display); color: var(--text-2); }
  .virement { display: grid; gap: 0.6rem; }
  .virement > div { display: grid; gap: 0.15rem 1rem; }
  @media (min-width: 40em) { .virement > div { grid-template-columns: 11rem 1fr; } }
  .virement dt { font: 650 0.85rem/1.4 var(--font-display); color: var(--text-2); }
  .virement dd { font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
  .momo-attente { display: grid; gap: 1rem; padding: 1.5rem; border: 2px dashed var(--text); border-radius: var(--r-m); background: var(--bg-alt); }
  .momo-attente__txt { font: 500 1.1rem/1.5 var(--font-display); }
  .momo-attente__timer strong { font: 800 3rem/1 var(--font-display); letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
  .momo-attente .message { margin: 0; flex-wrap: wrap; }
  .check--demo { padding: 0.5rem 0.75rem; border: 1px dashed var(--field-border); border-radius: var(--r-m); color: var(--text-2); }
  .erreur-paiement:focus { outline: 3px solid var(--focus); outline-offset: 3px; }
  .btn-spin { display: inline-block; inline-size: 1.1rem; block-size: 1.1rem; border: 3px solid currentColor; border-inline-end-color: transparent; border-radius: 50%; animation: spin 0.8s linear infinite; }
  @keyframes spin { to { transform: rotate(360deg); } }
  @media (prefers-reduced-motion: reduce) { .btn-spin { animation: none; border-inline-end-color: currentColor; border-radius: 4px; } }
  html[data-mouvement="reduit"] .btn-spin { animation: none; }
  .don-aside { display: grid; gap: 1rem; padding: 1.5rem; border: 2px solid var(--text); border-radius: var(--r-l); background: var(--surface); }
  .don-aside h2 { font-size: var(--step-1); }
  .don-aside__liste { display: grid; }
  .don-aside__liste > div { display: grid; gap: 0.15rem; padding-block: 0.65rem; border-block-start: 1px solid var(--hairline); }
  .don-aside__liste dt { font: 650 0.78rem/1.3 var(--font-display); letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-2); }
  .don-aside__liste dd { font: 750 1.15rem/1.3 var(--font-display); letter-spacing: -0.01em; }
  .don-aside__impact { padding: 0.75rem 1rem; border-radius: var(--r-m); background: var(--sun-pale); font: 600 1rem/1.4 var(--font-display); }
  .don-aside__contact { padding-block-start: 1rem; border-block-start: 1px solid var(--hairline); }
  .don-aside__contact h3 { font-size: 1rem; margin-block-end: 0.3rem; }
  .don-aside__contact p, .don-aside__secu { font: 400 0.92rem/1.5 var(--font-display); color: var(--text-2); }
  .don-aside__secu { display: flex; align-items: center; gap: 0.5rem; }
  .don-aside__secu .ico { inline-size: 1.2rem; block-size: 1.2rem; color: var(--link); flex: none; }
  .merci__impact { font: 700 var(--step-1)/1.35 var(--font-display); max-inline-size: 40ch; }
  .merci__ref { font: 500 1rem/1.4 var(--font-display); color: var(--text-2); }
  .merci__ref strong { color: var(--text); font-variant-numeric: tabular-nums; }
  .recu-wrap { max-inline-size: 100%; overflow-x: auto; }
  .recu { position: relative; max-inline-size: 44rem; padding: clamp(1rem, 3vw, 2rem); background: #fffdf7; color: #152318; border: 2px solid #152318; font: 400 0.95rem/1.5 var(--font-text); overflow: hidden; }
  .recu::before { content: "EXEMPLE SANS VALEUR FISCALE"; position: absolute; inset: 0; display: grid; place-items: center; text-align: center; rotate: -22deg; font: 800 clamp(1.4rem, 5vw, 2.6rem)/1.1 var(--font-display); letter-spacing: 0.02em; color: rgb(179 38 30 / 0.13); pointer-events: none; padding: 1rem; }
  .recu h3 { font: 800 1.1rem/1.25 var(--font-display); color: #152318; letter-spacing: -0.01em; margin-block-end: 0.75rem; }
  .recu__tag { display: inline-block; padding: 0.15rem 0.6rem; background: #b3261e; color: #fff; font: 700 0.75rem/1.4 var(--font-display); letter-spacing: 0.08em; text-transform: uppercase; margin-block-end: 0.6rem; }
  .recu dl { display: grid; gap: 0.6rem; margin-block: 1rem; }
  .recu dl > div { display: grid; gap: 0.1rem 1rem; padding-block-end: 0.5rem; border-block-end: 1px solid #d6cfba; }
  @media (min-width: 40em) { .recu dl > div { grid-template-columns: 12rem 1fr; } }
  .recu dt { font: 650 0.8rem/1.4 var(--font-display); letter-spacing: 0.06em; text-transform: uppercase; color: #4a5549; }
  .recu dd { font-weight: 600; overflow-wrap: anywhere; }
  .recu__sign { margin-block-start: 1.25rem; font-style: italic; }
  .recu__note { margin-block-start: 0.75rem; font: 400 0.82rem/1.45 var(--font-display); color: #4a5549; }
  .recu__echeance { margin-block-start: 1rem; padding: 0.75rem 1rem; background: #fdf0c4; font: 500 0.92rem/1.45 var(--font-display); }
  .afs { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr)); }
  .af { display: grid; gap: 0.6rem; align-content: start; padding: 1.5rem; border-radius: var(--r-l); background: var(--surface); border: 1px solid var(--hairline); box-shadow: var(--shadow-card); }
  .af__ico { display: grid; place-items: center; inline-size: 3rem; block-size: 3rem; border-radius: 50%; background: var(--leaf-bg); color: var(--link); }
  .af__ico .ico { inline-size: 1.5rem; block-size: 1.5rem; }
  .af p { font-size: 1rem; line-height: 1.55; color: var(--text-2); }
  .af__dl { display: grid; grid-template-columns: auto 1fr; gap: 0.25rem 0.75rem; font: 500 0.92rem/1.4 var(--font-display); padding: 0.6rem 0.8rem; background: var(--bg-alt); border-radius: var(--r-s); }
  .af__dl dt { color: var(--text-2); }
  .af__dl dd { font-variant-numeric: tabular-nums; overflow-wrap: anywhere; font-weight: 650; }
  .fisc { display: grid; gap: clamp(1.5rem, 4vw, 3rem); align-items: start; }
  @media (min-width: 64em) { .fisc { grid-template-columns: 1fr 1fr; } }
  .gerer { display: grid; gap: clamp(1.5rem, 4vw, 3rem); align-items: start; }
  @media (min-width: 56em) { .gerer { grid-template-columns: 0.85fr 1.15fr; } }
  .gerer__form { background: var(--surface); border: 2px solid var(--text); border-radius: var(--r-l); padding: clamp(1.1rem, 3vw, 2rem); }
  .gm-montant[hidden] { display: none; }
}

/* version anglaise : filigrane du reçu d’exemple */
html[lang="en"] .recu::before { content: "EXAMPLE WITH NO TAX VALUE"; }