/* Composants du plugin AABDAAN.
 *
 * Cette feuille est chargée sur toutes les pages du site, et non seulement sur
 * celles qui portent un shortcode. C'est délibéré : ces composants arrivent
 * aussi par des points d'accroche de WooCommerce — le compteur de ventes sur la
 * fiche produit, la règle des trois tiers sur la page de remerciement, les
 * médias sur un avis — et un chargement conditionnel obligerait à énumérer
 * chaque contexte. Il suffirait d'en oublier un pour qu'une zone s'affiche sans
 * style, ce qui est exactement le défaut qu'on a corrigé : la règle des trois
 * tiers et les associations sortaient nues, parce que leurs styles vivaient
 * dans la feuille du parcours, chargée seulement sur la page du parcours.
 *
 * Les variables reprennent les jetons du thème AABDAAN, avec une valeur de
 * repli pour que les composants restent présentables sous un autre thème.
 */

.aabdaan-thirds,
.aabdaan-projects,
.aabdaan-partners,
.aabdaan-invite-gate,
.aabdaan-invite-card,
.aabdaan-gift-card,
.aabdaan-balance,
.aabdaan-impact-note,
.aabdaan-winners,
.aabdaan-sales-count {
	--c-ink: var(--aabdaan-ink, #0e1f3c);
	--c-ink-deep: var(--aabdaan-ink-deep, #081428);
	--c-sand: var(--aabdaan-sand, #f2ece0);
	--c-sand-light: var(--aabdaan-sand-light, #faf5ec);
	--c-gold: var(--aabdaan-gold, #c69745);
	--c-gold-pale: var(--aabdaan-gold-pale, #e3cb98);
	--c-stone: var(--aabdaan-stone, #5a5142);
	--c-display: var(--aabdaan-font-display, Georgia, serif);
	--c-body: var(--aabdaan-font-body, system-ui, sans-serif);
	--c-hairline: 1px solid rgba(198, 151, 69, 0.28);
	--c-ease: cubic-bezier(0.4, 0, 0.2, 1);
}

/* ==========================================================================
   Les trois tiers
   ========================================================================== */

.aabdaan-thirds__intro {
	max-width: 44ch;
	color: var(--c-ink);
	font-family: var(--c-display);
	font-size: 1.45rem;
	line-height: 1.4;
}

.aabdaan-thirds__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
	gap: 2rem;
	margin-top: 2.5rem;
}

.aabdaan-third {
	padding-top: 1.25rem;
	border-top: 2px solid;
}

.aabdaan-third--ard { border-top-color: var(--aabdaan-ard, #7a5233); }
.aabdaan-third--bina { border-top-color: var(--aabdaan-bina, #2b5473); }
.aabdaan-third--dar { border-top-color: var(--aabdaan-dar, #33604a); }

.aabdaan-third__share {
	display: block;
	color: var(--c-gold);
	font-family: var(--c-display);
	font-size: 2.25rem;
	line-height: 1;
}

.aabdaan-third__tier {
	margin: 0.5rem 0 0.35rem;
	font-size: 1.5rem;
}

.aabdaan-third__brand {
	margin: 0 0 0.85rem;
	color: var(--c-stone);
	font-family: var(--c-body);
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
}

.aabdaan-third__text {
	margin: 0;
	color: var(--c-stone);
	font-size: 0.9375rem;
	line-height: 1.68;
}

/* ==========================================================================
   Projets humanitaires
   ========================================================================== */

.aabdaan-projects {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
	gap: 2rem;
	margin: 2.5rem 0;
}

.aabdaan-project {
	display: flex;
	flex-direction: column;
	gap: 1rem;
	padding: 1.75rem;
	background-color: var(--c-sand-light);
	border: var(--c-hairline);
	transition: border-color 280ms var(--c-ease), box-shadow 280ms var(--c-ease);
}

.aabdaan-project:hover {
	border-color: var(--c-gold);
	box-shadow: 0 18px 40px rgba(8, 20, 40, 0.07);
}

.aabdaan-project__title {
	margin: 0;
	font-family: var(--c-display);
	font-size: 1.375rem;
	line-height: 1.24;
}

.aabdaan-project__excerpt {
	flex-grow: 1;
	margin: 0;
	color: var(--c-stone);
	font-size: 0.9375rem;
	line-height: 1.66;
}

.aabdaan-project__bar {
	height: 2px;
	background-color: rgba(14, 31, 60, 0.1);
	overflow: hidden;
}

.aabdaan-project__bar span {
	display: block;
	height: 100%;
	background-color: var(--c-gold);
	transition: width 560ms var(--c-ease);
}

.aabdaan-project__count {
	color: var(--c-stone);
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
}

/* Le bouton hérite du gabarit de bouton du thème, taillé pour un appel à
   l'action de page. Sur une carte de 17 rem, il occupait toute la largeur et
   passait sur deux lignes : il pesait plus lourd que le projet lui-même. */
.aabdaan-project__vote {
	align-self: flex-start;
	padding: 0.75em 1.35em;
	font-size: 0.6875rem;
	letter-spacing: 0.1em;
}

.aabdaan-project__vote[disabled] {
	opacity: 0.4;
	cursor: not-allowed;
}

.aabdaan-project__feedback {
	font-size: 0.875rem;
	min-height: 1.2em;
}

.aabdaan-project__feedback--error {
	color: var(--aabdaan-terracotta, #a4553a);
}

.aabdaan-project__feedback--success {
	color: var(--aabdaan-olive, #4f6b4a);
}

/* Mention « j'aime » : un bouton discret, aligné à gauche, pas une barre
   pleine largeur qui rivalise avec le bouton de vote. */
.aabdaan-project__like {
	align-self: flex-start;
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	padding: 0.35rem 0.75rem;
	background: none;
	border: 1px solid rgba(14, 31, 60, 0.16);
	color: var(--c-stone);
	font-family: var(--c-body);
	font-size: 0.8125rem;
	font-weight: 500;
	letter-spacing: 0;
	text-transform: none;
	cursor: pointer;
	transition: all 280ms var(--c-ease);
}

.aabdaan-project__like:hover {
	border-color: var(--c-gold);
	color: var(--c-ink);
	background: none;
}

.aabdaan-project__like.is-liked {
	background-color: var(--c-gold);
	border-color: var(--c-gold);
	color: var(--c-ink-deep);
}

/* Solde de voix du client. */
.aabdaan-balance {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 0.6rem;
	margin-bottom: 2rem;
	padding: 1.25rem 1.5rem;
	background-color: var(--c-ink);
	color: var(--c-sand);
	font-size: 0.9375rem;
}

.aabdaan-balance strong {
	color: var(--c-gold);
	font-family: var(--c-display);
	font-size: 1.5rem;
}

/* Projets déjà financés. */
.aabdaan-winners {
	list-style: none;
	margin: 1.5rem 0;
	padding: 0;
	border-top: var(--c-hairline);
}

.aabdaan-winners li {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 0.75rem;
	padding: 1rem 0;
	border-bottom: 1px solid rgba(198, 151, 69, 0.18);
}

.aabdaan-winners__month {
	min-width: 9rem;
	color: var(--c-stone);
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

.aabdaan-winners__votes {
	margin-left: auto;
	color: var(--c-gold);
	font-family: var(--c-display);
	font-size: 1.125rem;
}

/* ==========================================================================
   Associations partenaires
   ========================================================================== */

.aabdaan-partners {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
	gap: 2rem;
	margin: 2.5rem 0;
}

.aabdaan-partner {
	padding-top: 1.25rem;
	border-top: 2px solid var(--aabdaan-dar, #33604a);
}

.aabdaan-partner__name {
	margin: 0 0 0.35rem;
	font-family: var(--c-display);
	font-size: 1.375rem;
}

.aabdaan-partner__country {
	margin: 0 0 0.85rem;
	color: var(--c-stone);
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
}

.aabdaan-partner__count {
	margin: 0;
	color: var(--c-ink);
	font-size: 0.9375rem;
}

.aabdaan-partners__empty {
	max-width: 60ch;
	margin: 2rem 0;
	padding-left: 1rem;
	border-left: 2px solid var(--aabdaan-dar, #33604a);
	color: var(--c-stone);
	font-size: 0.9375rem;
}

/* ==========================================================================
   Accès sur invitation
   ========================================================================== */

.aabdaan-invite-gate {
	max-width: 34rem;
	margin: 0 auto;
	padding: clamp(2rem, 5vw, 3.5rem);
	background-color: var(--c-ink);
	color: var(--c-sand);
	text-align: center;
}

.aabdaan-invite-gate h2 {
	margin-top: 0;
	color: var(--c-gold);
	font-family: var(--c-display);
	font-size: 1.75rem;
}

.aabdaan-invite-gate p {
	margin: 0 auto;
	max-width: 34ch;
	color: rgba(242, 236, 224, 0.8);
	font-size: 0.9375rem;
}

.aabdaan-invite-gate__form {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	justify-content: center;
	margin-top: 2rem;
}

.aabdaan-invite-gate__form input {
	flex: 1 1 12rem;
	padding: 0.85rem 1rem;
	background-color: #fff;
	border: 1px solid var(--c-gold);
	font-family: var(--c-body);
	font-size: 1rem;
	letter-spacing: 0.22em;
	text-align: center;
	text-transform: uppercase;
}

.aabdaan-invite-card {
	padding: 1.75rem;
	background-color: var(--c-sand-light);
	border: 1px solid var(--c-gold-pale);
	text-align: center;
}

.aabdaan-invite-card h3 {
	margin-top: 0;
	font-size: 0.75rem;
	font-family: var(--c-body);
	font-weight: 600;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--c-stone);
}

.aabdaan-invite-card__code {
	margin: 0.75rem 0;
	color: var(--c-ink);
	font-family: var(--c-display);
	font-size: 2.5rem;
	font-weight: 500;
	letter-spacing: 0.22em;
}

/* ==========================================================================
   Le polo offert
   ========================================================================== */

.aabdaan-gift-card {
	margin: 0 0 2rem;
	padding: 1.75rem;
	background-color: var(--aabdaan-bina-light, #dde7ef);
	border-left: 3px solid var(--aabdaan-bina, #2b5473);
}

.aabdaan-gift-card h3 {
	margin-top: 0;
	font-family: var(--c-display);
}

.aabdaan-gift-card blockquote {
	margin: 1rem 0 0;
	padding-left: 1rem;
	border-left: 2px solid var(--c-gold);
	font-family: var(--c-display);
	font-size: 1.125rem;
	font-style: italic;
}

.aabdaan-gift-form textarea,
.aabdaan-gift-form select,
.aabdaan-gift-form input[type="text"],
.aabdaan-gift-form input[type="tel"] {
	width: 100%;
	max-width: 32rem;
}

.aabdaan-gift-form label {
	display: block;
	margin-bottom: 0.3rem;
	font-size: 0.875rem;
	font-weight: 500;
}

.aabdaan-gift-form small {
	display: block;
	margin-top: 0.3rem;
	color: var(--c-stone);
	font-size: 0.75rem;
}

.aabdaan-optional {
	color: var(--c-stone);
	font-weight: 400;
}

.aabdaan-gift-form__privacy {
	max-width: 32rem;
	padding-left: 0.85rem;
	border-left: 2px solid var(--c-gold);
	color: var(--c-stone);
	font-size: 0.875rem;
}

/* ==========================================================================
   Compteur de ventes, précommande, stock
   ========================================================================== */

.aabdaan-sales-count {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	margin: 1rem 0;
	padding: 0.5rem 1rem;
	background-color: var(--c-sand-light);
	border-left: 2px solid var(--c-gold);
	color: var(--c-stone);
	font-size: 0.875rem;
}

.aabdaan-sales-count strong {
	color: var(--c-ink);
	font-weight: 600;
}

.aabdaan-preorder-badge {
	display: inline-block;
	margin-bottom: 1rem;
	padding: 0.4rem 0.9rem;
	background-color: var(--aabdaan-ink, #0e1f3c);
	color: var(--aabdaan-gold-pale, #e3cb98);
	font-size: 0.6875rem;
	font-weight: 600;
	letter-spacing: 0.16em;
	text-transform: uppercase;
}

.aabdaan-low-stock {
	color: var(--aabdaan-terracotta, #a4553a);
	font-size: 0.875rem;
	font-weight: 500;
}

/* Rappel de la règle des trois tiers après le paiement. */
.aabdaan-impact-note {
	margin: 2rem 0;
	padding: 1.75rem;
	background-color: var(--c-ink);
	color: var(--c-sand);
}

.aabdaan-impact-note p {
	margin: 0;
	font-size: 0.9375rem;
}

.aabdaan-impact-note strong {
	color: var(--c-gold);
	font-family: var(--c-display);
	font-size: 1.25rem;
}

/* ==========================================================================
   Médias envoyés par les clients
   ========================================================================== */

.aabdaan-review-media {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin-top: 1rem;
}

.aabdaan-review-media img,
.aabdaan-review-media video {
	width: 96px;
	height: 96px;
	object-fit: cover;
	border: 1px solid var(--c-gold-pale);
}

.aabdaan-review-upload {
	margin: 1rem 0;
}

.aabdaan-review-upload label {
	display: block;
	margin-bottom: 0.35rem;
	font-size: 0.875rem;
	font-weight: 500;
}

.aabdaan-review-upload small {
	display: block;
	margin-top: 0.3rem;
	color: var(--c-stone);
	font-size: 0.75rem;
}