/* ============================================================
   Tunnel de don www.parti-reconquete.fr/don
   Blocs et animations du tunnel soutien.ericzemmour.fr (theme.css + don.js du
   tunnel par défaut), habillés avec la charte de la maquette 2026 :
   fond photo + dégradé bleu et en-tête (logo, « Je donne pour la Reconquête »)
   de la maquette, France22 / Proxima Nova, bleu #2060bc, bleu nuit #103366,
   rouge #ef3030, angles vifs. Squelette de scroll du thème préservé (min-height,
   état .scrolled, styles inline posés par don.js sur les pastilles).
   ============================================================ */

:root {
	--bleu: #2060bc;
	--bleu-clair: #4a86e0;
	--bleu-nuit: #103366;
	--rouge: #ef3030;
	--rouge-fonce: #c81f1f;
	--encre: #0c1830;
	--ease-expo: cubic-bezier(.16, 1, .3, 1);
}

@font-face { font-family: "france22"; src: url("../fonts/France22_Bold.otf") format("opentype"); font-weight: 400 900; font-display: swap; }
@font-face { font-family: "proxima"; src: url("../fonts/ProximaNova_Regular.otf") format("opentype"); font-weight: 400; font-display: swap; }
@font-face { font-family: "proxima"; src: url("../fonts/ProximaNova_Semibold.otf") format("opentype"); font-weight: 600; font-display: swap; }
@font-face { font-family: "proxima"; src: url("../fonts/ProximaNova_Bold.otf") format("opentype"); font-weight: 700; font-display: swap; }
@font-face { font-family: "proxima"; src: url("../fonts/ProximaNova_Extrabold.otf") format("opentype"); font-weight: 800 900; font-display: swap; }

/* ---------- Base ---------- */
body#don { background: var(--bleu-nuit) !important; overflow-x: hidden; color: var(--encre); }
body#don, body#don input, body#don select, body#don textarea, body#don button,
body#don span, body#don p, body#don label, body#don a, body#don li, body#don strong {
	font-family: "proxima", "Arial Narrow", Arial, sans-serif;
}
body#don h1, body#don h2, body#don h3, body#don h4 { font-family: "france22", "Arial Narrow", Arial, sans-serif; }
body#don .rouge { color: var(--rouge) !important; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }

/* ---------- Fond et en-tête de la maquette ---------- */
#don-fond { position: fixed; inset: 0; z-index: -2; overflow: hidden; background: var(--bleu); }
#don-fond img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 35%; }
#don-fond::after {
	content: ""; position: absolute; inset: 0;
	background: linear-gradient(to bottom, #2060bc7a, rgba(16, 51, 102, .55), #2060bcd1);
}
#don-fond span {
	position: absolute; right: -4rem; top: 28%; z-index: 1;
	font-family: "france22", sans-serif; font-size: 26rem; line-height: 1; color: rgba(255, 255, 255, .04);
	pointer-events: none; user-select: none;
}
#don-tricolore {
	position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: 10;
	background: linear-gradient(90deg, var(--bleu) 0 33.33%, #fff 33.33% 66.66%, var(--rouge) 66.66%);
}
body#don header#don-entete { background: transparent; height: auto; width: 100%; padding: 40px 20px 10px; text-align: center; }
#don-entete .titre { display: block; width: 100%; max-width: 34rem; height: auto; margin: 0 auto; }
@media (min-width: 640px) {
	body#don header#don-entete { padding-top: 48px; }
}

/* ---------- Conteneur : le fond reste visible autour des blocs ---------- */
body#don #the-container { max-width: 760px; position: relative; }
body#don #container-montant { padding-top: 48px; }
body#don #container-montant, body#don #container-montant-bis, body#don #container-moyens,
body#don #container-infos { align-items: stretch !important; }

/* ---------- Titres de bloc ---------- */
body#don h2 {
	color: #fff; text-transform: uppercase; letter-spacing: .01em; line-height: 1;
	font-size: clamp(1.5rem, 4vw, 2.4rem); margin-bottom: 18px;
}
body#don h2 > .rouge:first-child { display: none; }  /* numéros d'étape masqués */

/* ---------- Cartes blanches ---------- */
body#don .subcont, body#don #donation_form {
	background: #fff !important;
	color: var(--encre) !important;
	border: 1px solid rgba(74, 134, 224, .4);
	border-radius: 0 !important;
	box-shadow: 0 30px 70px -30px rgba(8, 18, 40, .65) !important;
	padding: 24px 16px !important;
}
@media (min-width: 768px) {
	body#don .subcont, body#don #donation_form { padding: 36px !important; }
}

/* ---------- Pastilles de montant ---------- */
body#don .amount > span {
	background: var(--bleu) !important;   /* la sélection est posée en ligne par don.js (rouge + zoom) */
	border-radius: 2px !important;
	font-family: "france22", sans-serif !important;
	letter-spacing: .02em;
	box-shadow: 0 12px 26px -14px rgba(16, 51, 102, .7);
}
body#don .amount > span[style*="background-color"] { background: var(--rouge) !important; }
body#don .amount > span:hover { filter: brightness(1.08); }

body#don #free-amount input {
	background: var(--bleu-nuit) !important; border-radius: 2px !important;
	font-family: "france22", sans-serif !important; letter-spacing: .02em;
}
body#don #free-amount:after { font-family: "france22", sans-serif; }
body#don .reduc { color: var(--bleu-nuit) !important; font-weight: 700; margin: 0 auto; }
body#don .reduc .rouge { font-family: "france22", sans-serif; }

/* ---------- Boutons d'action (continuer, je donne, valider) ---------- */
body#don #continuer, body#don #jedonne, body#don #valider {
	background: var(--rouge) !important; border-radius: 2px !important;
	text-transform: uppercase; letter-spacing: .05em;
	box-shadow: 0 16px 34px -18px rgba(239, 48, 48, .9);
	transition: background .35s var(--ease-expo), transform .2s ease !important;
}
body#don #continuer:hover, body#don #jedonne:hover, body#don #valider:hover {
	background: var(--rouge-fonce) !important; transform: translateY(-2px);
}
body#don #continuer span, body#don #jedonne span { color: #fff !important; font-weight: 800; }
body#don #continuer .total, body#don #jedonne .total { font-family: "france22", sans-serif; }

body#don #jedonneplutot {
	background: var(--bleu) !important; border-radius: 2px !important;
	transition: background .35s var(--ease-expo) !important;
}
body#don #jedonneplutot:hover { background: var(--bleu-nuit) !important; }
body#don #jedonneplutot > span:first-of-type { text-transform: uppercase; letter-spacing: .04em; }

/* ---------- Moyens de paiement ---------- */
body#don #moyens #cb {
	background: var(--rouge) !important; border-radius: 2px !important;
	text-transform: uppercase; letter-spacing: .04em;
	box-shadow: 0 18px 40px -20px rgba(239, 48, 48, .9);
	transition: background .35s var(--ease-expo);
}
body#don #moyens #cb:hover { background: var(--rouge-fonce) !important; }
body#don #moyens #cb span { font-family: "france22", sans-serif; font-weight: 400; }
body#don #moyens #autre > div {
	background: var(--bleu) !important; border-radius: 2px !important;
	text-transform: uppercase; letter-spacing: .03em;
}
body#don #moyens #autre > div:hover { background: var(--bleu-nuit) !important; }
body#don #moyens #autre span { font-family: "france22", sans-serif; font-weight: 400; }
body#don #moyens .secure { color: var(--rouge) !important; }
body#don #moyens .secure path { fill: var(--rouge); }
body#don #moyens p { color: rgba(12, 24, 48, .6) !important; }

/* ---------- Formulaire ---------- */
body#don #container-infos label { font-weight: 700; text-transform: uppercase; letter-spacing: .03em; font-size: .85rem; color: rgba(12, 24, 48, .7); }
body#don #container-infos .form-check-label { text-transform: none; letter-spacing: 0; font-size: .9rem; font-weight: 400; color: rgba(12, 24, 48, .75); }
body#don .form-control {
	border: 2px solid rgba(74, 134, 224, .6) !important; border-radius: 0 !important;
	color: var(--encre); height: auto; padding: .7rem 1rem;
}
body#don .form-control:focus { border-color: var(--bleu) !important; box-shadow: none !important; }
body#don #container-infos .address .form-control { border-radius: 0 !important; margin-top: -2px; }
body#don .form-check-input { accent-color: var(--rouge); }
body#don #valider { font-family: "france22", sans-serif; font-weight: 400; }

/* ---------- Agissez avec nous ---------- */
body#don #agissez { margin-bottom: 80px; }
body#don #agissez .subcont { font-size: .95rem; color: rgba(12, 24, 48, .75) !important; }
body#don #agissez h4 { font-size: 1.1rem; text-transform: uppercase; }