/**
 * AgaFun — socle de styles publics.
 *
 * Jetons de design, polices auto-hébergées et primitives partagées par tous
 * les blocs. Tout est préfixé « agf- », rien n'utilise !important.
 *
 * Les polices sont servies depuis ce plugin et non depuis Google Fonts : la
 * clientèle est européenne, et un appel à fonts.gstatic.com transmet l'adresse
 * IP du visiteur à un tiers sans base légale. C'est aussi une requête
 * externe de moins dans le chemin critique du rendu mobile.
 */

/* -------------------------------------------------------------------------- */
/* Polices                                                                     */
/* -------------------------------------------------------------------------- */

@font-face {
	font-family: 'AgaFun Display';
	font-style: normal;
	font-weight: 600 800;
	font-display: swap;
	src: url('../fonts/plus-jakarta-sans-latin.woff2') format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
	font-family: 'AgaFun Display';
	font-style: normal;
	font-weight: 600 800;
	font-display: swap;
	src: url('../fonts/plus-jakarta-sans-latin-ext.woff2') format('woff2');
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
	font-family: 'AgaFun Text';
	font-style: normal;
	font-weight: 400 700;
	font-display: swap;
	src: url('../fonts/inter-latin.woff2') format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
	font-family: 'AgaFun Text';
	font-style: normal;
	font-weight: 400 700;
	font-display: swap;
	src: url('../fonts/inter-latin-ext.woff2') format('woff2');
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/*
 * Sous-ensemble de Material Symbols Outlined limité aux icônes réellement
 * employées : 124 glyphes, 20 ko, contre 3,4 Mo pour la police complète.
 * Le nom de famille est propre au plugin afin de ne pas entrer en conflit
 * avec un thème qui chargerait déjà Material Symbols.
 */
@font-face {
	font-family: 'AgaFun Symbols';
	font-style: normal;
	font-weight: 400;
	font-display: block;
	src: url('../fonts/material-symbols-subset.woff2') format('woff2');
}

/* -------------------------------------------------------------------------- */
/* Jetons                                                                      */
/* -------------------------------------------------------------------------- */

:root {
	/* Couleurs, reprises des maquettes. */
	--agf-primary: #9f3c16;
	--agf-on-primary: #ffffff;
	--agf-primary-container: #bf542c;
	--agf-on-primary-container: #fffbff;
	--agf-primary-fixed: #ffdbcf;
	--agf-primary-fixed-dim: #ffb59c;
	--agf-on-primary-fixed: #390c00;
	--agf-on-primary-fixed-variant: #822801;

	--agf-secondary: #485f84;
	--agf-on-secondary: #ffffff;
	--agf-secondary-container: #bbd3fd;
	--agf-on-secondary-container: #445a7f;
	--agf-secondary-fixed: #d5e3ff;

	--agf-tertiary: #00685d;
	--agf-on-tertiary: #ffffff;
	--agf-tertiary-container: #008376;
	--agf-tertiary-fixed: #8cf5e4;

	--agf-surface: #f9f9f7;
	--agf-surface-dim: #dadad8;
	--agf-surface-container-lowest: #ffffff;
	--agf-surface-container-low: #f4f4f2;
	--agf-surface-container: #eeeeec;
	--agf-surface-container-high: #e8e8e6;
	--agf-surface-container-highest: #e2e3e1;

	--agf-on-surface: #1a1c1b;
	--agf-on-surface-variant: #57423b;
	--agf-inverse-surface: #2f3130;
	--agf-inverse-on-surface: #f1f1ef;

	--agf-outline: #8a726a;
	--agf-outline-variant: #dec0b7;

	--agf-error: #ba1a1a;
	--agf-on-error: #ffffff;
	--agf-error-container: #ffdad6;

	/* Or du désert : réservé aux notes et aux étoiles. */
	--agf-gold: #f4a261;

	/* Polices. */
	--agf-font-display: 'AgaFun Display', 'Plus Jakarta Sans', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
	--agf-font-text: 'AgaFun Text', 'Inter', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;

	/* Échelle typographique, reprise des maquettes. */
	--agf-text-display-hero: 800 36px/44px var(--agf-font-display);
	--agf-text-headline-lg: 700 28px/36px var(--agf-font-display);
	--agf-text-headline-md: 700 28px/36px var(--agf-font-display);
	--agf-text-headline-sm: 600 20px/28px var(--agf-font-display);
	--agf-text-title-md: 600 18px/24px var(--agf-font-display);
	--agf-text-label-lg: 700 15px/20px var(--agf-font-display);
	--agf-text-label-md: 600 13px/16px var(--agf-font-display);
	--agf-text-label-sm: 700 11px/14px var(--agf-font-display);
	--agf-text-price-lg: 800 26px/32px var(--agf-font-display);
	--agf-text-body-lg: 400 18px/28px var(--agf-font-text);
	--agf-text-body-md: 400 15px/24px var(--agf-font-text);
	--agf-text-body-sm: 400 13px/18px var(--agf-font-text);

	--agf-tracking-hero: -0.02em;
	--agf-tracking-headline: -0.01em;
	--agf-tracking-label-md: 0.02em;
	--agf-tracking-label-sm: 0.04em;
	--agf-tracking-price: -0.02em;

	/* Rayons. */
	--agf-radius-xs: 0.25rem;
	--agf-radius-sm: 0.5rem;
	--agf-radius-md: 0.75rem;
	--agf-radius-lg: 1rem;
	--agf-radius-full: 9999px;

	/* Espacements. */
	--agf-space-xs: 0.25rem;
	--agf-space-sm: 0.5rem;
	--agf-space-md: 1rem;
	--agf-space-lg: 1.5rem;
	--agf-space-xl: 2.5rem;
	--agf-gutter: 1rem;

	/*
	 * Ombres teintées : les maquettes remplacent le gris neutre par un mélange
	 * de bleu atlantique et de terre cuite. Les composantes viennent de
	 * --agf-secondary et --agf-primary.
	 */
	--agf-elevation-1: 0 2px 8px -1px rgba(72, 95, 132, 0.08), 0 1px 3px 0 rgba(159, 60, 22, 0.04);
	--agf-elevation-2: 0 12px 24px -4px rgba(72, 95, 132, 0.12), 0 4px 8px -2px rgba(159, 60, 22, 0.07);
	--agf-elevation-cta: 0 8px 20px -2px rgba(159, 60, 22, 0.32);

	--agf-transition: 200ms ease;
}

@media (min-width: 768px) {
	:root {
		--agf-text-display-hero: 800 56px/64px var(--agf-font-display);
		--agf-text-headline-lg: 700 40px/48px var(--agf-font-display);
		--agf-gutter: 1.5rem;
	}
}

/* -------------------------------------------------------------------------- */
/* Primitives                                                                  */
/* -------------------------------------------------------------------------- */

/*
 * Le plugin ne peut pas supposer que le thème pose un reset : sans cette
 * règle, un bouton de 44 px de haut en mesure 64 une fois ses marges
 * intérieures ajoutées, et toute la recette tactile tombe à côté.
 */
[class*='agf-'],
[class*='agf-'] * {
	box-sizing: border-box;
}

/*
 * La classe est doublée exprès. Un raccourci « font » posé par un sélecteur de
 * descendance — « .agf-bloc span { font: … } » — écraserait sinon la police des
 * icônes, qui s'afficheraient en toutes lettres. Le doublement suffit à passer
 * devant, sans recourir à !important.
 */
.agf-icon.agf-icon {
	font-family: 'AgaFun Symbols';
	font-weight: normal;
	font-style: normal;
	font-size: 1.125em;
	line-height: 1;
	letter-spacing: normal;
	text-transform: none;
	display: inline-block;
	flex: none;
	white-space: nowrap;
	word-wrap: normal;
	direction: ltr;
	font-feature-settings: 'liga';
	-webkit-font-smoothing: antialiased;
	font-variation-settings: 'FILL' 0;
}

/*
 * Le sous-ensemble embarqué est une police **statique** : l'axe FILL n'y existe
 * pas, et ce modificateur n'a donc aucun effet en l'état. Il est conservé pour
 * qu'un site qui remplacerait la police par la version variable retrouve les
 * icônes pleines sans toucher au balisage. Les étoiles de notation se
 * distinguent en attendant par la couleur, pas par le remplissage.
 */
.agf-icon--filled {
	font-variation-settings: 'FILL' 1;
}

.agf-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;
}

/* Pastille générique : badge, durée, lieu, catégorie. */
.agf-pill {
	display: inline-flex;
	align-items: center;
	gap: var(--agf-space-xs);
	border-radius: var(--agf-radius-full);
	padding: 0.25rem 0.625rem;
	font: var(--agf-text-label-sm);
	letter-spacing: var(--agf-tracking-label-sm);
	white-space: nowrap;
}

.agf-pill--square {
	border-radius: var(--agf-radius-xs);
	padding: 0.125rem 0.5rem;
}

/* Bouton principal, dégradé terre cuite des maquettes. */
/*
 * Texte réservé aux lecteurs d'écran. Le nom de classe est celui de WordPress,
 * volontairement : la plupart des thèmes le définissent déjà, et le redéfinir
 * à l'identique évite qu'un bloc du plugin devienne illisible sur un thème qui
 * ne le ferait pas.
 */
.screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

.screen-reader-text:focus {
	position: fixed;
	top: var(--agf-space-sm);
	left: var(--agf-space-sm);
	z-index: 100000;
	width: auto;
	height: auto;
	margin: 0;
	padding: var(--agf-space-sm) var(--agf-space-md);
	clip: auto;
	clip-path: none;
	border-radius: var(--agf-radius-sm);
	background: var(--agf-surface-container-lowest);
	color: var(--agf-on-surface);
	box-shadow: var(--agf-elevation-cta);
}

.agf-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--agf-space-xs);
	min-height: 44px;
	padding: 0.625rem 1rem;
	border: 0;
	border-radius: var(--agf-radius-sm);
	font: var(--agf-text-label-md);
	letter-spacing: var(--agf-tracking-label-md);
	text-decoration: none;
	cursor: pointer;
	transition: background-color var(--agf-transition), box-shadow var(--agf-transition), transform var(--agf-transition);
}

.agf-btn--primary {
	background-image: linear-gradient(135deg, var(--agf-primary-container), var(--agf-primary));
	background-color: var(--agf-primary);
	color: var(--agf-on-primary);
	box-shadow: var(--agf-elevation-cta);
}

.agf-btn--primary:hover,
.agf-btn--primary:focus-visible {
	background-color: var(--agf-primary-container);
	color: var(--agf-on-primary);
}

.agf-btn--primary:active {
	transform: scale(0.98);
}

.agf-btn--ghost {
	background-color: transparent;
	border: 1px solid var(--agf-outline-variant);
	color: var(--agf-primary);
}

.agf-btn--ghost:hover,
.agf-btn--ghost:focus-visible {
	background-color: var(--agf-surface-container);
	border-color: var(--agf-primary);
	color: var(--agf-primary);
}

.agf-btn--ghost:active {
	transform: scale(0.98);
}

.agf-btn:focus-visible {
	outline: 2px solid var(--agf-primary);
	outline-offset: 2px;
}

/* Note et nombre d'avis. */
.agf-rating {
	display: inline-flex;
	align-items: center;
	gap: 0.1875rem;
	font: var(--agf-text-label-sm);
	letter-spacing: var(--agf-tracking-label-sm);
	color: var(--agf-on-surface);
	white-space: nowrap;
}

.agf-rating__star {
	color: var(--agf-gold);
	font-size: 15px;
}

.agf-rating__score {
	font-weight: 700;
}

.agf-rating__count {
	color: var(--agf-on-surface-variant);
	font-weight: 400;
}

@media (prefers-reduced-motion: reduce) {
	.agf-btn,
	.agf-icon {
		transition: none;
	}
}
