/*!
 * Esprit Loups – Widget de don.
 * Isolation stricte : TOUTES les regles sont prefixees `.el-don-` (aucune
 * classe generique type .button/.container/.modal — bonus #58) et
 * scopees sous `.el-don-root`, pour ne jamais entrer en collision avec le
 * theme WordPress actif ni en subir les styles globaux (CATEGORIE 1).
 * Style "Liquid Glass" (iOS) : backdrop-filter blur+saturate, fonds
 * translucides, bordures fines, ombres multi-couches, adaptatif clair/sombre.
 */

.el-don-root,
.el-don-root * ,
.el-don-root *::before,
.el-don-root *::after {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	line-height: 1.4;
	-webkit-tap-highlight-color: transparent;
}

.el-don-root {
	/* Jetons de design — redefinis sous prefers-color-scheme et [data-el-don-theme]. */
	--el-don-glass-bg: rgba(255, 255, 255, 0.1);
	--el-don-glass-bg-strong: rgba(255, 255, 255, 0.22);
	--el-don-glass-border: rgba(255, 255, 255, 0.2);
	--el-don-text: #1c1c1e;
	--el-don-text-muted: rgba(28, 28, 30, 0.64);
	--el-don-accent: #2f6f4f; /* vert "esprit loups" */
	--el-don-accent-contrast: #ffffff;
	--el-don-danger: #d64545;
	--el-don-backdrop: rgba(20, 24, 22, 0.55);
	--el-don-radius: 22px;
	--el-don-shadow:
		0 1px 1px rgba(0, 0, 0, 0.04),
		0 8px 24px rgba(0, 0, 0, 0.12),
		0 24px 48px rgba(0, 0, 0, 0.16);

	position: relative;
	color: var(--el-don-text);
}

@media (prefers-color-scheme: dark) {
	.el-don-root:not([data-el-don-theme="light"]) {
		--el-don-glass-bg: rgba(30, 32, 31, 0.45);
		--el-don-glass-bg-strong: rgba(40, 42, 41, 0.6);
		--el-don-glass-border: rgba(255, 255, 255, 0.14);
		--el-don-text: #f2f2f3;
		--el-don-text-muted: rgba(242, 242, 243, 0.68);
		--el-don-backdrop: rgba(6, 8, 7, 0.7);
	}
}

.el-don-root[data-el-don-theme="dark"] {
	--el-don-glass-bg: rgba(30, 32, 31, 0.45);
	--el-don-glass-bg-strong: rgba(40, 42, 41, 0.6);
	--el-don-glass-border: rgba(255, 255, 255, 0.14);
	--el-don-text: #f2f2f3;
	--el-don-text-muted: rgba(242, 242, 243, 0.68);
	--el-don-backdrop: rgba(6, 8, 7, 0.7);
}

/* --- Bouton declencheur (rendu inline dans la page, hors modale) --- */
.el-don-trigger {
	display: inline-flex;
	align-items: center;
	gap: 0.5em;
	border: 1px solid var(--el-don-glass-border);
	border-radius: 999px;
	padding: 0.85em 1.6em;
	background: var(--el-don-accent);
	color: var(--el-don-accent-contrast);
	font-weight: 600;
	font-size: 1rem;
	cursor: pointer;
	box-shadow: var(--el-don-shadow);
	transition: transform 0.15s ease;
}
.el-don-trigger:hover { transform: translateY(-1px); }
.el-don-trigger:active { transform: translateY(0) scale(0.98); }
.el-don-trigger.el-don-pulse { animation: el-don-pulse 2.4s ease-in-out infinite; } /* bonus #45 */

@keyframes el-don-pulse {
	0%, 100% { box-shadow: var(--el-don-shadow), 0 0 0 0 rgba(47, 111, 79, 0.5); }
	50% { box-shadow: var(--el-don-shadow), 0 0 0 10px rgba(47, 111, 79, 0); }
}

/* --- Overlay + modale --- */
.el-don-overlay {
	position: fixed;
	inset: 0;
	z-index: 100000;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 1rem;
	background: var(--el-don-backdrop);
	backdrop-filter: blur(6px);
	-webkit-backdrop-filter: blur(6px);
	opacity: 0;
	transition: opacity 0.22s ease;
}
.el-don-overlay[data-el-don-open="true"] { opacity: 1; }
.el-don-overlay[hidden] { display: none; }

.el-don-modal {
	position: relative;
	width: 100%;
	max-width: 480px;
	max-height: min(88vh, 720px);
	display: flex;
	flex-direction: column;
	overflow: hidden;
	border-radius: var(--el-don-radius);
	border: 1px solid var(--el-don-glass-border);
	background: var(--el-don-glass-bg);
	backdrop-filter: blur(25px) saturate(180%);
	-webkit-backdrop-filter: blur(25px) saturate(180%);
	box-shadow: var(--el-don-shadow);
	transform: scale(0.92) translateY(12px);
	opacity: 0;
	transition: transform 0.28s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.22s ease;
}

.el-don-overlay[data-el-don-open="true"] .el-don-modal {
	transform: scale(1) translateY(0);
	opacity: 1;
}

.el-don-modal__header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.5rem;
	padding: 1.1rem 1.25rem;
	border-bottom: 1px solid var(--el-don-glass-border);
}
.el-don-modal__title { font-size: 1.05rem; font-weight: 700; }

.el-don-modal__close {
	appearance: none;
	border: 0;
	background: var(--el-don-glass-bg-strong);
	color: var(--el-don-text);
	width: 2rem;
	height: 2rem;
	border-radius: 50%;
	cursor: pointer;
	font-size: 1rem;
	line-height: 1;
}

.el-don-progress {
	display: flex;
	gap: 0.35rem;
	padding: 0 1.25rem;
	margin-top: 0.85rem;
}

.el-don-progress__dot {
	flex: 1;
	height: 4px;
	border-radius: 999px;
	background: var(--el-don-glass-border);
	overflow: hidden;
}

.el-don-progress__dot::after {
	content: "";
	display: block;
	height: 100%;
	width: 0%;
	background: var(--el-don-accent);
	transition: width 0.3s ease;
}

.el-don-progress__dot[data-el-don-state="done"]::after,
.el-don-progress__dot[data-el-don-state="active"]::after { width: 100%; }

.el-don-modal__body {
	flex: 1;
	overflow-y: auto;
	padding: 1.25rem;
	position: relative;
}

.el-don-step {
	display: none;
	will-change: transform, opacity;
}

.el-don-step[data-el-don-active="true"] {
	display: block;
	animation: el-don-step-in 0.32s ease;
}

@keyframes el-don-step-in {
	from { opacity: 0; transform: translateX(16px); }
	to { opacity: 1; transform: translateX(0); }
}

.el-don-step__title { font-size: 1.15rem; font-weight: 700; margin-bottom: 0.35rem; }
.el-don-step__subtitle { font-size: 0.9rem; color: var(--el-don-text-muted); margin-bottom: 1rem; }

/* --- Etape 1 : montant --- */
.el-don-amount-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 0.6rem;
	margin-bottom: 0.9rem;
}

.el-don-amount-btn {
	appearance: none;
	border: 1px solid var(--el-don-glass-border);
	background: var(--el-don-glass-bg-strong);
	color: var(--el-don-text);
	border-radius: 14px;
	padding: 0.9rem 0.4rem;
	font-size: 1.05rem;
	font-weight: 700;
	cursor: pointer;
	transform: scale(1);
	transition: transform 0.18s cubic-bezier(0.34, 1.56, 0.64, 1), background 0.15s ease, border-color 0.15s ease;
}

.el-don-amount-btn[data-el-don-selected="true"] {
	border-color: var(--el-don-accent);
	background: color-mix(in srgb, var(--el-don-accent) 22%, var(--el-don-glass-bg-strong));
	transform: scale(1.06); /* "ressort" — combine a la keyframe au clic, voir don-widget.js */
}

.el-don-amount-custom {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	border: 1px solid var(--el-don-glass-border);
	background: var(--el-don-glass-bg-strong);
	border-radius: 14px;
	padding: 0.7rem 0.9rem;
}

.el-don-amount-custom input {
	flex: 1;
	border: 0;
	background: transparent;
	color: var(--el-don-text);
	font-size: 1.05rem;
	font-weight: 600;
	outline: none;
}

.el-don-toggle-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.75rem;
	margin-top: 0.9rem;
	padding: 0.75rem 0.9rem;
	border: 1px solid var(--el-don-glass-border);
	background: var(--el-don-glass-bg-strong);
	border-radius: 14px;
	font-size: 0.9rem;
}

/* --- Etape 2 : formulaire --- */
.el-don-field { margin-bottom: 0.85rem; }

.el-don-field label {
	display: block;
	font-size: 0.82rem;
	font-weight: 600;
	color: var(--el-don-text-muted);
	margin-bottom: 0.3rem;
}

.el-don-input {
	width: 100%;
	border: 1px solid var(--el-don-glass-border);
	background: var(--el-don-glass-bg-strong);
	color: var(--el-don-text);
	border-radius: 12px;
	padding: 0.75rem 0.85rem;
	font-size: 0.98rem;
	outline: none;
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.el-don-input:focus { border-color: var(--el-don-accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--el-don-accent) 25%, transparent); }
.el-don-input[data-el-don-invalid="true"] { border-color: var(--el-don-danger); }

.el-don-field__error {
	display: none;
	color: var(--el-don-danger);
	font-size: 0.78rem;
	margin-top: 0.3rem;
}
.el-don-field__error[data-el-don-visible="true"] { display: block; }

/* --- Etape 3 : calendrier --- */
.el-don-calendar__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 0.6rem;
	font-weight: 700;
}

.el-don-calendar__nav {
	appearance: none;
	border: 1px solid var(--el-don-glass-border);
	background: var(--el-don-glass-bg-strong);
	color: var(--el-don-text);
	width: 1.9rem;
	height: 1.9rem;
	border-radius: 50%;
	cursor: pointer;
}

.el-don-calendar__grid {
	display: grid;
	grid-template-columns: repeat(7, 1fr);
	gap: 0.25rem;
	text-align: center;
	font-size: 0.85rem;
}
.el-don-calendar__dow { color: var(--el-don-text-muted); font-size: 0.72rem; padding-bottom: 0.3rem; }

.el-don-calendar__day {
	appearance: none;
	border: 1px solid transparent;
	background: transparent;
	color: var(--el-don-text);
	border-radius: 10px;
	padding: 0.5rem 0;
	cursor: pointer;
}
.el-don-calendar__day:disabled { color: var(--el-don-text-muted); opacity: 0.35; cursor: not-allowed; }

.el-don-calendar__day[data-el-don-selected="true"] {
	background: var(--el-don-accent);
	color: var(--el-don-accent-contrast);
	font-weight: 700;
}

/* --- Etape 4 : signature --- */
.el-don-signature-wrap {
	border: 1px dashed var(--el-don-glass-border);
	border-radius: 14px;
	background: rgba(255, 255, 255, 0.5);
	overflow: hidden;
}

.el-don-root[data-el-don-theme="dark"] .el-don-signature-wrap {
	background: rgba(255, 255, 255, 0.08);
}

@media (prefers-color-scheme: dark) {
	.el-don-root:not([data-el-don-theme="light"]) .el-don-signature-wrap {
		background: rgba(255, 255, 255, 0.08);
	}
}
.el-don-signature-canvas { display: block; width: 100%; height: 180px; touch-action: none; }

.el-don-signature-clear {
	margin-top: 0.6rem;
	appearance: none;
	border: 1px solid var(--el-don-glass-border);
	background: transparent;
	color: var(--el-don-text-muted);
	border-radius: 10px;
	padding: 0.4rem 0.8rem;
	font-size: 0.82rem;
	cursor: pointer;
}

/* --- Etape 5 : paiement --- */

/*
 * Le contenu de cette etape n'est pas le notre : SumUp y injecte son
 * iframe, et la banque du donateur y affiche son ecran
 * d'authentification 3-D Secure, dont nous ne maitrisons ni la largeur
 * ni la hauteur. On lui laisse donc toute la place disponible plutot
 * que de l'enfermer dans la colonne etroite du formulaire de don.
 */
.el-don-modal[data-el-don-wide="true"] {
	max-width: 680px;
}

.el-don-sumup-mount {
	min-height: 420px;
	width: 100%;
}

/*
 * NE PAS dimensionner les iframes de SumUp.
 *
 * Une version precedente forcait `min-height: 420px` et `width: 100%
 * !important` sur « tout iframe place dans la zone de montage », pour
 * tenter d'elargir l'ecran 3-D Secure. Cette tentative n'a jamais rien
 * corrige — et elle a fini par casser le formulaire de carte : SumUp
 * n'utilise pas un iframe unique, mais un par champ sensible (pratique
 * courante pour rester hors du perimetre PCI). Chaque champ heritait
 * donc d'une hauteur minimale de 420 px, et le seul « Nom sur la carte »
 * occupait tout le formulaire.
 *
 * La regle a retenir : les dimensions des champs appartiennent a SumUp,
 * qui les adapte deja a la largeur disponible. Notre role s'arrete a
 * reserver la place (voir .el-don-sumup-mount ci-dessus) et a elargir la
 * fenetre a l'etape 5.
 */

/*
 * Authentification 3-D Secure en cours (signalee par SumUp via
 * onAuthScreen). L'ecran vient de la banque du donateur, dans un
 * document d'une autre origine : sa largeur nous echappe totalement, et
 * aucune regle CSS d'ici ne peut l'atteindre. Tout ce que nous pouvons
 * faire, c'est lui accorder le maximum de hauteur et ne rien rogner de
 * notre cote.
 */
.el-don-sumup-mount[data-el-don-3ds="true"] {
	min-height: 560px;
	overflow: visible;
}

/*
 * Meme raison qu'au-dessus : on ne force plus la hauteur des iframes.
 * Seul le conteneur s'agrandit ; SumUp et la banque gerent le reste.
 */

.el-don-loader-wrap {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 0.75rem;
	padding: 2.5rem 1rem;
	color: var(--el-don-text-muted);
	font-size: 0.9rem;
}
.el-don-loader-svg { width: 40px; height: 40px; animation: el-don-spin 0.9s linear infinite; }

@keyframes el-don-spin { to { transform: rotate(360deg); } }

/* --- Etape 6 : succes --- */
.el-don-success { text-align: center; padding: 1rem 0; }

.el-don-success__icon {
	width: 64px; height: 64px; margin: 0 auto 1rem;
	border-radius: 50%;
	background: color-mix(in srgb, var(--el-don-accent) 18%, transparent);
	display: flex; align-items: center; justify-content: center;
}
.el-don-success__title { font-size: 1.2rem; font-weight: 800; margin-bottom: 0.4rem; }
.el-don-success__text { color: var(--el-don-text-muted); font-size: 0.92rem; margin-bottom: 1.4rem; }
.el-don-success .el-don-btn { display: inline-flex; align-items: center; justify-content: center; text-decoration: none; margin: 0 auto; max-width: 260px; }
.el-don-success [data-el-don-receipt-pending] { margin-top: 0.6rem; font-size: 0.8rem; }
.el-don-confetti-canvas { position: fixed; inset: 0; z-index: 100001; pointer-events: none; }

/* --- Boutons de navigation (communs) --- */
.el-don-actions {
	display: flex;
	gap: 0.6rem;
	padding: 1rem 1.25rem;
	border-top: 1px solid var(--el-don-glass-border);
}

.el-don-btn {
	flex: 1;
	appearance: none;
	border: 1px solid var(--el-don-glass-border);
	border-radius: 14px;
	padding: 0.8rem 1rem;
	font-size: 0.98rem;
	font-weight: 700;
	cursor: pointer;
	transition: transform 0.12s ease, opacity 0.12s ease;
}
.el-don-btn:active { transform: scale(0.98); }
.el-don-btn:disabled { opacity: 0.5; cursor: not-allowed; }
.el-don-btn--primary { background: var(--el-don-accent); color: var(--el-don-accent-contrast); border-color: transparent; }
.el-don-btn--ghost { background: var(--el-don-glass-bg-strong); color: var(--el-don-text); }

/* Conteneur large : ne deborde jamais horizontalement de son parent WP (theme quelconque). */
.el-don-root, .el-don-overlay, .el-don-modal { max-width: 100%; }

@media (max-width: 420px) {
	.el-don-amount-grid { grid-template-columns: repeat(2, 1fr); }
}

/* ------------------------------------------------------------------ */
/* Portail de gestion/annulation (CATEGORIE 3) — reutilise les memes    */
/* jetons de design que le widget, memes prefixes `el-don-`.            */
/* ------------------------------------------------------------------ */
.el-don-portal {
	max-width: 520px;
	margin: 0 auto;
	padding: 1.75rem;
	border-radius: var(--el-don-radius);
	border: 1px solid var(--el-don-glass-border);
	background: var(--el-don-glass-bg-strong);
	backdrop-filter: blur(25px) saturate(180%);
	-webkit-backdrop-filter: blur(25px) saturate(180%);
	box-shadow: var(--el-don-shadow);
}

.el-don-portal__screen { display: none; }
.el-don-portal__screen[data-el-don-active="true"] {
	display: block;
	animation: el-don-step-in 0.3s ease;
}

.el-don-portal__details { margin: 1.1rem 0 1.4rem; }
.el-don-portal__details > div {
	display: flex;
	justify-content: space-between;
	gap: 1rem;
	padding: 0.55rem 0;
	border-bottom: 1px solid var(--el-don-glass-border);
}
.el-don-portal__details dt { color: var(--el-don-text-muted); font-size: 0.88rem; }
.el-don-portal__details dd { font-weight: 700; font-size: 0.95rem; }

.el-don-portal__legal {
	margin: 0.75rem 0 1.25rem;
	font-size: 0.78rem;
	line-height: 1.5;
	color: var(--el-don-text-muted);
}

.el-don-portal .el-don-btn { width: 100%; margin-top: 0.6rem; }
.el-don-btn--danger { background: var(--el-don-danger); color: #fff; border-color: transparent; }

.el-don-portal--error { text-align: center; color: var(--el-don-danger); }

/*
 * Refus de paiement : affiche au-dessus du formulaire SumUp, dans une
 * zone que SumUp ne reconstruit pas. Le message vivait auparavant sous
 * l'iframe — donc hors ecran, et efface a chaque nouvelle tentative.
 */
.el-don-payment-error {
	margin: 0 0 14px;
	padding: 12px 14px;
	border: 1px solid #c0392b;
	border-left-width: 4px;
	border-radius: 6px;
	background: #fdf0ee;
	color: #922b21;
	font-size: 14px;
	line-height: 1.45;
}

.el-don-payment-error[hidden] {
	display: none;
}

/*
 * Ecran d'attente pendant la verification du paiement.
 *
 * Il remplace le formulaire de carte, il ne s'ajoute pas a cote. C'est
 * le point essentiel : tant que rien ne s'affichait, le donateur voyait
 * « Success » chez SumUp puis de nouveau le formulaire, et croyait
 * devoir ressaisir sa carte.
 */
/*
 * `display: flex` l'emporterait sur l'attribut `hidden`, dont la valeur
 * par defaut n'est qu'un `display: none` de la feuille du navigateur.
 * Sans cette ligne, l'ecran d'attente resterait visible en permanence,
 * y compris sous le formulaire de carte.
 */
.el-don-verify[hidden] {
	display: none;
}

.el-don-verify {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 14px;
	min-height: 320px;
	padding: 32px 20px;
	text-align: center;
}

.el-don-verify__ring {
	width: 46px;
	height: 46px;
	border: 3px solid rgba(47, 111, 79, 0.18);
	border-top-color: #2f6f4f;
	border-radius: 50%;
	animation: el-don-verify-spin 0.9s linear infinite;
}

@keyframes el-don-verify-spin {
	to { transform: rotate(360deg); }
}

.el-don-verify__text {
	font-size: 1.05rem;
	font-weight: 600;
}

.el-don-verify__hint {
	font-size: 0.85rem;
	opacity: 0.7;
	max-width: 30ch;
	line-height: 1.5;
}

/*
 * Sans animation, l'anneau serait fige et passerait pour un element
 * casse. On le remplace par une pulsation d'opacite, qui reste percue
 * comme une attente en cours.
 */
@media (prefers-reduced-motion: reduce) {
	.el-don-verify__ring {
		animation: el-don-verify-pulse 1.6s ease-in-out infinite;
		border-top-color: rgba(47, 111, 79, 0.18);
		background: #2f6f4f;
	}

	@keyframes el-don-verify-pulse {
		0%, 100% { opacity: 0.35; }
		50% { opacity: 1; }
	}
}