/* ==========================================================================
   Synth · Dons — modules [synth_don] (carte, encadre, compact)
   DA du site en ligne : fond blanc, filets noirs, ombres franches, cyan pour
   le focus et l'état actif, or pour la sélection, Coolvetica + IBM Plex Mono.
   Toutes les couleurs passent par les variables ci-dessous.
   ========================================================================== */

:root {
	--sd-black: #000;
	--sd-white: #fff;
	--sd-ink: #2f323d;
	--sd-muted: #5d6170;
	--sd-line: #dee2e6;
	--sd-dash: #b8bcc6;
	--sd-stripe: #f4f5f7;
	--sd-cyan: #00ffe0;
	--sd-cyan-focus: #00e6cc;
	--sd-cyan-ink: #008f80;
	--sd-orange: #eb7f36;
	--sd-amber: #ebb436;
	--sd-yellow: #ede005;
	--sd-gold: #f4be43;
	--sd-gold-hl: #ffbc49;
	--sd-cream: #feecbc;
	--sd-err: #b3261e;
	--sd-shadow: 4px 4px 0 -1px var(--sd-black);
	--sd-shadow-fav: 5px 5px 0 0 var(--sd-orange), 10px 10px 0 0 var(--sd-amber), 15px 15px 0 0 var(--sd-yellow);
	--sd-title: coolvetica, "Coolvetica", sans-serif;
	--sd-mono: "ibmplex-regular", "IBM Plex Mono", ui-monospace, monospace;
	--sd-mono-b: "ibmplex-bold", "IBM Plex Mono", ui-monospace, monospace;
	--sd-ease: cubic-bezier(.68, -.35, .27, 1.35);
}

/* --------------------------------------------------------------------------
   Base commune
   -------------------------------------------------------------------------- */

.sdon {
	--t: 34px;          /* taille du curseur */
	--sd-track: 6px;    /* épaisseur du rail */
	--sd-thumb-b: 3px;  /* bordure du curseur */
	display: flex;
	flex-direction: column;
	margin: 1.25rem 0 0;
	font-family: var(--sd-mono);
	color: var(--sd-black);
	background: transparent;
}
.sdon *,
.sdon *::before,
.sdon *::after { box-sizing: border-box; }
.sdon [hidden] { display: none !important; }
.sdon p { margin: 0; }

/* Le thème Caards encadre, arrondit et élargit (width:150 %) boutons et champs :
   on neutralise ces propriétés sur nos seuls éléments, avec une spécificité suffisante. */
.sdon .sdon__opt,
.sdon .sdon__chip,
.sdon .sdon__rng,
.sdon .sdon__input,
.sdon--encadre .sdon__submit,
.sdon--compact .sdon__submit {
	-webkit-appearance: none;
	appearance: none;
	margin: 0;
	min-width: 0 !important;
	max-width: none !important;
	border-radius: 0 !important;
	text-transform: none;
	letter-spacing: normal;
}

/* Périodicité : bandeau à pastille glissante */
.sdon__freq {
	position: relative;
	display: flex;
	gap: 3px;
	padding: 3px 0;
	background: var(--sd-white);
}
.sdon__thumb {
	position: absolute;
	top: 3px;
	bottom: 3px;
	left: 0;
	width: 0;
	background: var(--sd-black);
	box-shadow: inset 0 -4px 0 var(--sd-cyan-focus);
	pointer-events: none;
	opacity: 0;
	transition: transform .45s var(--sd-ease), width .45s var(--sd-ease);
}
.sdon__freq.is-ready .sdon__thumb { opacity: 1; }
.sdon .sdon__opt {
	position: relative;
	z-index: 1;
	flex: 1 1 0;
	padding: .42rem .2rem !important;
	border: 0 !important;
	background: transparent !important;
	box-shadow: none !important;
	font: 600 12px/1.2 var(--sd-mono-b);
	letter-spacing: .05em;
	text-transform: uppercase;
	white-space: nowrap;
	color: var(--sd-black) !important;
	cursor: pointer;
	transition: color .3s ease .08s;
}
.sdon .sdon__opt[aria-pressed="true"] { color: var(--sd-white) !important; }
.sdon .sdon__opt:not([aria-pressed="true"]):hover { color: var(--sd-cyan-ink) !important; }
.sdon .sdon__opt:focus-visible { outline: 3px solid var(--sd-cyan-focus); outline-offset: -3px; }
/* Sans script (pastille non placée) : fond noir direct sur l'option active */
.sdon__freq:not(.is-ready) .sdon__opt[aria-pressed="true"] { background: var(--sd-black) !important; }

.sdon__note {
	padding: 7px 16px;
	border-bottom: 1px dashed var(--sd-line);
	font-size: 11px;
	line-height: 1.4;
	text-align: center;
	color: var(--sd-muted);
}

.sdon__row {
	display: flex;
	flex-direction: column;
	padding: 16px 0 0;
}

/* Curseur à crans (input range natif, utilisable au clavier) */
.sdon__pick[data-mode="regular"] { margin: 4px 0 0; }
.sdon__labs {
	position: relative;
	height: 24px;
	margin-bottom: 8px;
}
.sdon__lab {
	position: absolute;
	top: 0;
	left: calc(var(--t) / 2 + (100% - var(--t)) * var(--p, 0));
	transform: translateX(-50%);
	padding: 3px 4px;
	font: 400 17px/1 var(--sd-title);
	white-space: nowrap;
	color: var(--sd-black);
	cursor: pointer;
	transition: background-color .2s;
}
.sdon__lab[data-on] { background: var(--sd-gold); }

.sdon .sdon__rng {
	display: block;
	width: 100% !important;
	max-width: 100% !important;
	height: var(--t);
	padding: 0 !important;
	border: 0 !important;
	background: transparent !important;
	box-shadow: none !important;
	cursor: pointer;
}
.sdon .sdon__rng:focus-visible { outline: 3px solid var(--sd-cyan-focus) !important; outline-offset: 4px; }
.sdon__rng::-webkit-slider-runnable-track { height: var(--sd-track); background: var(--sd-black); border: 0; border-radius: 0; }
.sdon__rng::-moz-range-track { height: var(--sd-track); background: var(--sd-black); border: 0; border-radius: 0; }
.sdon__rng::-webkit-slider-thumb {
	-webkit-appearance: none;
	box-sizing: border-box;
	width: var(--t);
	height: var(--t);
	margin-top: calc((var(--sd-track) - var(--t)) / 2);
	background: var(--sd-white);
	border: var(--sd-thumb-b) solid var(--sd-black);
	border-radius: 0;
	box-shadow: var(--sd-thumb-b) var(--sd-thumb-b) 0 0 var(--sd-black);
	transition: background-color .2s;
}
.sdon__rng::-moz-range-thumb {
	box-sizing: border-box;
	width: var(--t);
	height: var(--t);
	background: var(--sd-white);
	border: var(--sd-thumb-b) solid var(--sd-black);
	border-radius: 0;
	box-shadow: var(--sd-thumb-b) var(--sd-thumb-b) 0 0 var(--sd-black);
	transition: background-color .2s;
}
.sdon__rng:active::-webkit-slider-thumb { background: var(--sd-gold); }
.sdon__rng:active::-moz-range-thumb { background: var(--sd-gold); }

/* Don ponctuel : montants suggérés + montant libre */
.sdon__once {
	display: flex;
	flex-direction: column;
	gap: .6rem;
}
.sdon__lbl {
	font: 600 12px/1.3 var(--sd-mono-b);
	letter-spacing: .04em;
	text-transform: uppercase;
}
.sdon__chips {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}
.sdon .sdon__chip {
	flex: 1 1 0;
	padding: .5rem .3rem !important;
	border: 1px solid var(--sd-black) !important;
	background: var(--sd-white) !important;
	box-shadow: none !important;
	font: 400 19px/1.1 var(--sd-title);
	color: var(--sd-black) !important;
	cursor: pointer;
	transition: background-color .2s;
}
.sdon .sdon__chip:hover { background: var(--sd-cream) !important; }
.sdon .sdon__chip[aria-pressed="true"] { background: var(--sd-gold) !important; }
.sdon .sdon__chip:focus-visible { outline: 3px solid var(--sd-cyan-focus); outline-offset: 2px; }

.sdon__libre {
	display: flex;
	align-items: stretch;
	margin: 0;
	border: 1px solid var(--sd-black);
	background: var(--sd-white);
}
.sdon__libre:focus-within { outline: 3px solid var(--sd-cyan-focus); outline-offset: 2px; }
.sdon .sdon__input {
	flex: 1 1 0;
	width: auto !important;
	padding: .6rem 1rem !important;
	border: 0 !important;
	background: transparent !important;
	box-shadow: none !important;
	outline: none;
	font: 400 18px/1.2 var(--sd-mono);
	color: var(--sd-black);
	-moz-appearance: textfield;
}
.sdon__input::-webkit-outer-spin-button,
.sdon__input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.sdon__euro {
	display: flex;
	align-items: center;
	padding: 0 1rem;
	background: var(--sd-black);
	color: var(--sd-white);
	font: 400 18px/1 var(--sd-mono);
}

/* Calcul après réduction d'impôt, message d'erreur */
.sdon__hint {
	margin: .8rem 0 1rem !important;
	min-height: 1.45em;
	font-size: 13px;
	line-height: 1.45;
}
.sdon__hint.is-error { color: var(--sd-err); }

.sdon__more {
	margin: .8rem 0 0 !important;
	font-size: 12px;
	text-align: center;
}
.sdon__more a,
a.sdon__more {
	color: var(--sd-black);
	text-decoration: underline;
	text-decoration-color: var(--sd-orange);
	text-underline-offset: 3px;
}

/* --------------------------------------------------------------------------
   Variante « carte » : colonne de la bannière de l'accueil
   -------------------------------------------------------------------------- */

.sdon--carte .sdon__freq { padding: 0; background: transparent; }
.sdon--carte .sdon__thumb { top: 0; bottom: 0; }
.sdon--carte .sdon__row { padding: 18px 4px 0; }
.sdon--carte .sdon__pick[data-mode="regular"] { margin-bottom: 6px; }
.sdon--carte .sdon__chips { gap: 6px; }
.sdon--carte .sdon__chip {
	flex: 0 0 auto;
	padding: 5px 12px !important;
	font-size: 17px;
}
.sdon--carte .sdon__libre { border-width: 2px; }
.sdon--carte .sdon__input { padding: .6rem .9rem !important; font-size: 20px; }
.sdon--carte .sdon__hint { min-height: 2.9em; font-size: 12px; }
/* Bouton : celui de l'en-tête du site (blanc, filet noir, ombre or, décalage au survol) */
.sdon--carte .sdon__submit {
	display: block;
	width: 100%;
	margin: 0;
	padding: 14px 24px !important;
	border: 1px solid var(--sd-black) !important;
	border-radius: 0 !important;
	background: var(--sd-white) !important;
	color: var(--sd-black) !important;
	box-shadow: 4px 4px 0 -1px var(--sd-gold);
	font: 400 22px/1.1 var(--sd-title);
	text-transform: none;
	letter-spacing: normal;
	cursor: pointer;
	-webkit-appearance: none;
	appearance: none;
	transition: transform .15s ease-out, box-shadow .15s ease-out, background-color .25s;
}
.sdon--carte .sdon__submit:hover,
.sdon--carte .sdon__submit:focus-visible {
	background: var(--sd-cream) !important;
	transform: translate(3px, 3px);
	box-shadow: 0 0 0 -1px var(--sd-gold);
}
.sdon--carte .sdon__submit:focus-visible { outline: 3px solid var(--sd-cyan-focus); outline-offset: 4px; }
.sdon--carte .sdon__more { text-align: left; }
.sdon--carte .sdon__more a {
	text-decoration-color: var(--sd-cyan-focus);
	text-decoration-thickness: 2px;
}

/* --------------------------------------------------------------------------
   Variante « encadre » : fin d'article, sous le texte d'appel
   -------------------------------------------------------------------------- */

.sdon--encadre {
	margin-top: 1.5rem;
	padding-top: 1.25rem;
	border-top: 1px dashed var(--sd-black);
}
.sdon--encadre .sdon__note { border-top: 1px dashed var(--sd-line); }
.sdon--encadre .sdon__submit {
	display: block;
	width: 100%;
	padding: 14px 24px !important;
	border: 1px solid var(--sd-black) !important;
	background: var(--sd-white) !important;
	color: var(--sd-black) !important;
	box-shadow: 4px 4px 0 0 var(--sd-orange), 8px 8px 0 0 var(--sd-yellow);
	font: 400 21px/1.1 var(--sd-title);
	cursor: pointer;
	transition: transform .15s, box-shadow .15s, background-color .15s;
}
.sdon--encadre .sdon__submit:hover {
	background: var(--sd-amber) !important;
	transform: translate(3px, 3px);
	box-shadow: 2px 2px 0 0 var(--sd-orange), 4px 4px 0 0 var(--sd-yellow);
}
.sdon--encadre .sdon__submit:focus-visible { outline: 3px solid var(--sd-black); outline-offset: 4px; }

/* --------------------------------------------------------------------------
   Variante « compact » : encart dans le fil d'un article, barre latérale
   -------------------------------------------------------------------------- */

.sdon--compact {
	--t: 24px;
	--sd-track: 4px;
	--sd-thumb-b: 2px;
	container-type: inline-size;
	gap: 10px;
	max-width: 640px;
	margin: 1.5rem 0;
	padding: 16px 18px;
	background: var(--sd-white);
	border: 1px solid var(--sd-black);
	box-shadow: 4px 4px 0 0 var(--sd-orange), 8px 8px 0 0 var(--sd-amber), 12px 12px 0 0 var(--sd-yellow);
}
.sdon__head {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: 4px 12px;
}
.sdon__title { font: 400 22px/1.1 var(--sd-title); color: var(--sd-black); }
.sdon__tax {
	padding: 2px 5px;
	background: var(--sd-gold);
	font-size: 11px;
	letter-spacing: .04em;
	text-transform: uppercase;
	color: var(--sd-black);
}
.sdon--compact .sdon__freq {
	gap: 2px;
	padding: 2px;
	border: 1px solid var(--sd-black);
}
.sdon--compact .sdon__thumb { top: 2px; bottom: 2px; box-shadow: inset 0 -3px 0 var(--sd-cyan-focus); }
.sdon--compact .sdon__opt { padding: .3rem .2rem !important; font-size: 11px; }
.sdon--compact .sdon__row {
	flex-direction: row;
	flex-wrap: wrap;
	align-items: flex-end;
	gap: 12px 16px;
	padding: 0;
}
.sdon--compact .sdon__pick { flex: 1 1 220px; min-width: 0; margin: 0; }
.sdon--compact .sdon__labs { height: 20px; margin-bottom: 4px; }
.sdon--compact .sdon__lab { padding: 2px 3px; font-size: 15px; }
.sdon--compact .sdon__once { flex-direction: row; align-items: stretch; gap: 6px; }
.sdon--compact .sdon__chips { flex-wrap: nowrap; gap: 6px; }
.sdon--compact .sdon__chip { flex: 0 0 auto; padding: .35rem .55rem !important; font-size: 16px; }
.sdon--compact .sdon__libre { flex: 1 1 70px; min-width: 70px; }
.sdon--compact .sdon__input { padding: .35rem .5rem !important; font-size: 15px; }
.sdon--compact .sdon__euro { padding: 0 .5rem; font-size: 14px; }
.sdon--compact .sdon__submit {
	flex: 0 0 auto;
	padding: 10px 16px !important;
	border: 1px solid var(--sd-black) !important;
	background: var(--sd-black) !important;
	color: var(--sd-white) !important;
	box-shadow: 3px 3px 0 0 var(--sd-orange);
	font: 400 17px/1.1 var(--sd-title);
	white-space: nowrap;
	cursor: pointer;
	transition: transform .15s, box-shadow .15s, background-color .15s;
}
.sdon--compact .sdon__submit:hover {
	background: var(--sd-gold) !important;
	color: var(--sd-black) !important;
	transform: translate(2px, 2px);
	box-shadow: 1px 1px 0 0 var(--sd-orange);
}
.sdon--compact .sdon__submit:focus-visible { outline: 3px solid var(--sd-black); outline-offset: 3px; }
.sdon__foot {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: 4px 12px;
	font-size: 11px;
	line-height: 1.4;
	color: var(--sd-muted);
}
.sdon--compact .sdon__hint { margin: 0 !important; min-height: 1.4em; font-size: 11px; }
.sdon--compact a.sdon__more { margin: 0 !important; font-size: 11px; white-space: nowrap; }

/* Étroit (barre latérale, mobile) : le bouton passe sous le sélecteur */
@container (max-width: 440px) {
	.sdon--compact .sdon__submit { flex: 1 1 100%; }
}
@media (max-width: 480px) {
	.sdon--compact { padding: 14px; }
	.sdon--compact .sdon__submit { flex: 1 1 100%; }
}
@media (max-width: 600px) {
	.sdon--encadre .sdon__opt { font-size: 11px; letter-spacing: 0; }
	.sdon--encadre .sdon__lab { font-size: 15px; }
}

/* --------------------------------------------------------------------------
   [synth_don_home] : bannière de l'accueil, trois colonnes
   -------------------------------------------------------------------------- */

.sdon-home {
	display: grid;
	grid-template-columns: minmax(0, .88fr) minmax(0, 1fr) minmax(0, 1.05fr);
	align-items: center;
	gap: 32px 40px;
	margin: 1.5rem 0 calc(1.5rem + 15px);
	padding: 44px;
	border: 1px solid var(--sd-black);
	background: var(--sd-white);
	box-shadow: var(--sd-shadow-fav);
	color: var(--sd-black);
	font-family: var(--sd-mono);
}
.sdon-home *,
.sdon-home *::before,
.sdon-home *::after { box-sizing: border-box; }
.sdon-home .sdon-home__img {
	display: block;
	width: 160px;
	max-width: 60%;
	height: auto;
	margin: 0 0 18px;
}
.sdon-home .sdon-home__title {
	margin: 0 0 18px;
	padding: 0;
	font: 400 clamp(24px, 2.35vw, 34px)/1.12 var(--sd-title);
	letter-spacing: -1px;
	color: var(--sd-black);
	text-transform: none;
}
.sdon-home .sdon-home__hl {
	margin: 0;
	font: 400 clamp(15px, 1.35vw, 18px)/1.55 var(--sd-mono);
	color: var(--sd-black);
}
.sdon-home .sdon-home__hl span {
	padding: 2px 4px;
	background: var(--sd-gold-hl);
	-webkit-box-decoration-break: clone;
	box-decoration-break: clone;
}
.sdon-home .sdon-home__sub {
	margin: 0 0 22px;
	padding: 0;
	font: 400 20px/1.2 var(--sd-title);
	letter-spacing: -.4px;
	color: var(--sd-black);
	text-transform: none;
}
.sdon-home .sdon-home__body { font-size: 15px; line-height: 1.75; }
.sdon-home .sdon-home__body p { margin: 0 0 1.4em; }
.sdon-home .sdon-home__body p:last-child { margin-bottom: 0; }
.sdon-home .sdon-home__body strong { font-family: var(--sd-mono-b); font-weight: 600; }
.sdon-home .sdon { margin: 0; }

@media (max-width: 1080px) {
	.sdon-home { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
	.sdon-home__form { grid-column: 1 / -1; }
}
@media (max-width: 781px) {
	.sdon-home { grid-template-columns: minmax(0, 1fr); gap: 0; padding: 28px 20px 30px; }
	.sdon-home .sdon-home__img { width: 120px; }
	.sdon-home .sdon-home__title { margin-bottom: 12px; }
	/* Parties séparées par un pointillé doux, avec de l'air de part et d'autre */
	.sdon-home > .sdon-home__txt,
	.sdon-home > .sdon-home__form {
		margin-top: 30px;
		padding-top: 30px;
		border-top: 1px dashed var(--sd-dash);
	}
	.sdon-home .sdon-home__sub { margin-bottom: 16px; }
}

/* --------------------------------------------------------------------------
   [synth_don_fin] : encadré de fin d'article
   -------------------------------------------------------------------------- */

.sdon-fin {
	margin: 2rem 0 calc(2rem + 15px);
	padding: 40px 44px 44px;
	border: 2px solid var(--sd-black);
	background: var(--sd-white);
	box-shadow: var(--sd-shadow-fav);
	color: var(--sd-black);
	font-family: var(--sd-mono);
}
.sdon-fin *,
.sdon-fin *::before,
.sdon-fin *::after { box-sizing: border-box; }
.sdon-fin .sdon-fin__title {
	display: flex;
	align-items: center;
	gap: 12px;
	margin: 0 0 10px;
	font: 400 clamp(30px, 4vw, 42px)/1.05 var(--sd-title);
	letter-spacing: -1px;
	color: var(--sd-black);
}
.sdon-fin .sdon-fin__img {
	flex: none;
	display: block;
	width: auto;
	height: 1.2em;
	margin: 0;
}
.sdon-fin .sdon-fin__badge {
	margin: 0 0 1.6em;
	font: 600 15px/1.5 var(--sd-mono-b);
	letter-spacing: .02em;
	text-transform: uppercase;
}
.sdon-fin .sdon-fin__badge span {
	padding: 3px 2px;
	background: var(--sd-amber);
	-webkit-box-decoration-break: clone;
	box-decoration-break: clone;
}
.sdon-fin .sdon-fin__body { font-size: 15.5px; line-height: 1.75; color: var(--sd-ink); }
.sdon-fin .sdon-fin__body p { margin: 0 0 1.4em; }
.sdon-fin .sdon-fin__body p:last-child { margin-bottom: 0; }
.sdon-fin .sdon-fin__body strong { font-family: var(--sd-mono-b); font-weight: 600; color: var(--sd-black); }
.sdon-fin .sdon--encadre { margin-top: 2rem; padding-top: 2.2rem; }

@media (max-width: 600px) {
	.sdon-fin { padding: 22px 18px 26px; }
}

/* --------------------------------------------------------------------------
   [synth_don_widget] : encart compact sans cadre, pour la barre latérale.
   Le cadre (filet, ombre) est celui du widget du thème : le module s'y fond.
   -------------------------------------------------------------------------- */

.sdon--compact.sdon--nu {
	max-width: none;
	margin: 0;
	padding: 0;
	border: 0;
	background: transparent;
	box-shadow: none;
}

@media (prefers-reduced-motion: reduce) {
	.sdon *,
	.sdon *::before,
	.sdon *::after { transition: none !important; }
}