@agence-zef/astro 0.4.1 → 0.5.0

package/components/Accordion.astro

@@ -0,0 +1,61 @@
+---
+/**
+ * Accordéon natif (`<details>` / `<summary>`), sans JavaScript ni style imposé : classes
+ * `zef-accordion`, `zef-accordion__item`, `__summary`, `__content`, habillées par
+ * `@agence-zef/astro/styles.css` (ouverture animée) ou par le CSS du site.
+ *
+ * Deux usages : `items` (une liste du CMS : `{ summary, html }` ou `{ summary, text }`), ou
+ * des `<AccordionItem>` en contenu. `exclusive` : un seul élément ouvert à la fois (attribut
+ * `name` natif). `faq` : ajoute les données structurées FAQPage pour Google (avec `items`).
+ */
+import RichText from "./RichText.astro";
+
+type Item = { summary: string; html?: string | null; text?: string | null; open?: boolean };
+
+interface Props {
+	items?: Item[];
+	exclusive?: boolean;
+	faq?: boolean;
+	/** Nom du groupe exclusif, à reprendre dans les `<AccordionItem name>` en contenu. */
+	name?: string;
+	class?: string;
+}
+
+const { items, exclusive = false, faq = false, class: className } = Astro.props;
+const name =
+	Astro.props.name ?? (exclusive ? `zef-acc-${Math.random().toString(36).slice(2, 8)}` : undefined);
+const strip = (html: string) =>
+	html
+		.replace(/<[^>]*>/g, " ")
+		.replace(/\s+/g, " ")
+		.trim();
+const faqData =
+	faq && items?.length
+		? {
+				"@context": "https://schema.org",
+				"@type": "FAQPage",
+				mainEntity: items
+					.filter((i) => i.summary)
+					.map((i) => ({
+						"@type": "Question",
+						name: i.summary,
+						acceptedAnswer: { "@type": "Answer", text: i.text ?? strip(i.html ?? "") },
+					})),
+			}
+		: null;
+---
+
+<div class:list={["zef-accordion", className]}>
+	{
+		items?.map((item) => (
+			<details class="zef-accordion__item" name={name} open={item.open}>
+				<summary class="zef-accordion__summary">{item.summary}</summary>
+				<div class="zef-accordion__content">
+					{item.html ? <RichText html={item.html} /> : item.text ? <p>{item.text}</p> : null}
+				</div>
+			</details>
+		))
+	}
+	<slot />
+</div>
+{faqData && <script type="application/ld+json" is:inline set:html={JSON.stringify(faqData).replace(/</g, "\\u003c")} />}

package/components/AccordionItem.astro

@@ -0,0 +1,23 @@
+---
+/**
+ * Élément d'accordéon (`<details>`), à mettre dans `<Accordion>` ou seul. Titre : `summary`, ou
+ * le contenu du slot `summary` (icône, mise en forme). `name` : groupe exclusif (un seul ouvert).
+ */
+interface Props {
+	summary?: string;
+	name?: string;
+	open?: boolean;
+	class?: string;
+}
+
+const { summary, name, open = false, class: className } = Astro.props;
+---
+
+<details class:list={["zef-accordion__item", className]} name={name} open={open}>
+	<summary class="zef-accordion__summary">
+		{Astro.slots.has("summary") ? <slot name="summary" /> : summary}
+	</summary>
+	<div class="zef-accordion__content">
+		<slot />
+	</div>
+</details>

package/components/Checkbox.astro

@@ -0,0 +1,20 @@
+---
+/**
+ * Case à cocher (ou bouton radio avec `type="radio"`) avec son libellé, classe `zef-check`.
+ * Le libellé : `label`, ou le contenu (lien vers les conditions, mise en forme).
+ */
+import type { HTMLAttributes } from "astro/types";
+
+type Props = Omit<HTMLAttributes<"input">, "class" | "type"> & {
+	label?: string;
+	type?: "checkbox" | "radio";
+	class?: string;
+};
+
+const { label, type = "checkbox", class: className, ...rest } = Astro.props;
+---
+
+<label class:list={["zef-check", className]}>
+	<input {...rest} type={type} />
+	<span>{Astro.slots.has("default") ? <slot /> : label}</span>
+</label>

package/components/Dialog.astro

@@ -0,0 +1,72 @@
+---
+/**
+ * Fenêtre modale native (`<dialog>`), sans style imposé : classes `zef-dialog`,
+ * `zef-dialog__panel`, `zef-dialog__close`, habillées par `@agence-zef/astro/styles.css`
+ * (variables `--zef-*`) ou par le CSS du site.
+ *
+ * Ouverture : n'importe quel élément avec `data-zef-open="<id>"` (bouton, lien). Fermeture :
+ * Échap, clic sur le voile, ou un élément `data-zef-close` dans la fenêtre. La page en dessous
+ * ne défile plus pendant l'ouverture ; animations d'ouverture et de fermeture via
+ * `[open]` / `[data-closing]`, coupées si le visiteur réduit les animations.
+ */
+interface Props {
+	id: string;
+	/** Titre lu par les lecteurs d'écran si la fenêtre n'a pas de titre visible. */
+	label?: string;
+	/** Bouton de fermeture en haut à droite (défaut : oui) et son libellé accessible. */
+	closeButton?: boolean;
+	closeLabel?: string;
+	class?: string;
+}
+
+const { id, label, closeButton = true, closeLabel = "Fermer", class: className } = Astro.props;
+---
+
+<dialog id={id} class:list={["zef-dialog", className]} aria-label={label} data-zef-dialog>
+	<div class="zef-dialog__panel">
+		{
+			closeButton && (
+				<button type="button" class="zef-dialog__close" data-zef-close aria-label={closeLabel}>
+					<svg width="20" height="20" viewBox="0 0 24 24" aria-hidden="true">
+						<path d="M18 6 6 18M6 6l12 12" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" />
+					</svg>
+				</button>
+			)
+		}
+		<slot />
+	</div>
+</dialog>
+
+<style is:global>
+	/* Comportement, pas habillage : la page ne défile plus derrière une fenêtre ouverte. */
+	html:has(dialog[data-zef-dialog][open]) {
+		overflow: hidden;
+	}
+</style>
+
+<script>
+	import { closeDialog } from "@agence-zef/astro/ui";
+
+	document.addEventListener("click", (event) => {
+		const target = event.target as Element;
+		const opener = target.closest<HTMLElement>("[data-zef-open]");
+		if (opener) {
+			const dialog = document.getElementById(opener.dataset.zefOpen ?? "");
+			if (dialog instanceof HTMLDialogElement) {
+				event.preventDefault();
+				dialog.showModal();
+			}
+			return;
+		}
+		const closer = target.closest("[data-zef-close]");
+		const dialog = (closer ?? target).closest("dialog[data-zef-dialog]");
+		// Un clic sur le voile atteint le <dialog> lui-même, pas son panneau.
+		if (dialog instanceof HTMLDialogElement && (closer || target === dialog)) closeDialog(dialog);
+	});
+	for (const dialog of document.querySelectorAll<HTMLDialogElement>("dialog[data-zef-dialog]")) {
+		dialog.addEventListener("cancel", (event) => {
+			event.preventDefault();
+			closeDialog(dialog);
+		});
+	}
+</script>

package/components/Field.astro

@@ -0,0 +1,27 @@
+---
+/**
+ * Champ de formulaire codé dans le site : libellé, contrôle (slot), aide et erreur, avec les
+ * classes partagées par tous les formulaires de `@agence-zef/astro` (`zef-field`, `zef-label`,
+ * `zef-help`, `zef-error`). `for` : identifiant du contrôle.
+ */
+interface Props {
+	label: string;
+	for?: string;
+	help?: string;
+	error?: string;
+	required?: boolean;
+	class?: string;
+}
+
+const { label, for: htmlFor, help, error, required = false, class: className } = Astro.props;
+---
+
+<div class:list={["zef-field", className]} data-invalid={error ? "" : undefined}>
+	<label class="zef-label" for={htmlFor}>
+		{label}
+		{required && <span class="zef-required" aria-hidden="true"> *</span>}
+	</label>
+	<slot />
+	{help && <p class="zef-help">{help}</p>}
+	<p class="zef-error" role="alert" hidden={!error}>{error}</p>
+</div>

package/components/Image.astro

@@ -10,18 +10,30 @@ import type { Media } from "@agence-zef/schema";
 interface Props {
 	media: Media | null;
 	class?: string;
-	/** `eager` pour l'image principale de la page. */
+	/** `eager` pour une image visible dès l'ouverture de la page. */
 	loading?: "lazy" | "eager";
+	/**
+	 * Image principale de la page (LCP, en général celle du hero) : chargée tout de suite et en
+	 * priorité (`fetchpriority="high"`). Une seule par page.
+	 */
+	priority?: boolean;
 	/** Largeur affichée (`(min-width: 48rem) 33vw, 100vw`) : active le `srcset`. */
 	sizes?: string;
 }
 
-const { media, class: className, loading = "lazy", sizes } = Astro.props;
+const { media, class: className, priority = false, sizes } = Astro.props;
+const loading = priority ? "eager" : (Astro.props.loading ?? "lazy");
+const fetchpriority = priority ? "high" : undefined;
+// Proportions réservées même si le CSS du site force `width: auto` (pas de décalage au chargement).
+const style =
+	media?.width && media.height ? `aspect-ratio: ${media.width} / ${media.height}` : undefined;
 const OPTIMIZED = ["image/jpeg", "image/png", "image/webp", "image/avif"];
 const optimize = Boolean(
 	media?.width && media.height && media.mime && OPTIMIZED.includes(media.mime),
 );
-const STEPS = [480, 800, 1200, 1600, 2400];
+// Largeurs générées pour le `srcset` : assez serrées pour qu'un mobile ne télécharge pas une
+// image deux fois trop grande.
+const STEPS = [320, 480, 640, 800, 960, 1200, 1600, 2000, 2400];
 const widths =
 	sizes && media?.width
 		? [...STEPS.filter((w) => w < (media.width as number)), media.width]
@@ -37,10 +49,12 @@ const widths =
 				width={media.width as number}
 				height={media.height as number}
 				loading={loading}
-				decoding="async"
+				fetchpriority={fetchpriority}
+				decoding={priority ? "sync" : "async"}
 				sizes={sizes}
 				widths={widths}
 				class={className}
+				style={style}
 			/>
 		) : (
 			<img
@@ -49,9 +63,11 @@ const widths =
 				width={media.width}
 				height={media.height}
 				loading={loading}
-				decoding="async"
+				fetchpriority={fetchpriority}
+				decoding={priority ? "sync" : "async"}
 				sizes={sizes}
 				class={className}
+				style={style}
 			/>
 		))
 }

package/components/Input.astro

@@ -0,0 +1,49 @@
+---
+/**
+ * Zone de saisie (`<input>` ou `<textarea>` avec `multiline`), classe `zef-input`. Avec `label`,
+ * elle est rendue dans un `<Field>` (libellé, aide, erreur). Les autres attributs sont passés
+ * tels quels (`name`, `type`, `required`, `placeholder`, `autocomplete`…).
+ */
+import type { HTMLAttributes } from "astro/types";
+import Field from "./Field.astro";
+
+type Props = Omit<HTMLAttributes<"input">, "class"> & {
+	label?: string;
+	help?: string;
+	error?: string;
+	multiline?: boolean;
+	rows?: number;
+	class?: string;
+};
+
+const {
+	label,
+	help,
+	error,
+	multiline = false,
+	rows = 5,
+	class: className,
+	id: givenId,
+	...rest
+} = Astro.props;
+const id =
+	givenId ?? (label ? `zef-${rest.name ?? Math.random().toString(36).slice(2, 8)}` : undefined);
+const attrs = {
+	...rest,
+	id,
+	class: `zef-input${className ? ` ${className}` : ""}`,
+	"aria-invalid": error ? "true" : undefined,
+};
+---
+
+{
+	label ? (
+		<Field label={label} for={id} help={help} error={error} required={Boolean(rest.required)}>
+			{multiline ? <textarea {...(attrs as HTMLAttributes<"textarea">)} rows={rows}>{rest.value ?? ""}</textarea> : <input {...attrs} />}
+		</Field>
+	) : multiline ? (
+		<textarea {...(attrs as HTMLAttributes<"textarea">)} rows={rows}>{rest.value ?? ""}</textarea>
+	) : (
+		<input {...attrs} />
+	)
+}

package/components/Popover.astro

@@ -0,0 +1,21 @@
+---
+/**
+ * Popover natif (attribut `popover`), sans JavaScript ni style imposé : ouvert par un bouton
+ * `<button popovertarget="<id>">`, fermé au clic en dehors et par Échap. Placé sous son bouton
+ * par le positionnement d'ancre CSS (`styles.css`), au centre de l'écran en repli.
+ * Classe `zef-popover` ; `manual` : ne se ferme pas au clic en dehors.
+ */
+interface Props {
+	id: string;
+	manual?: boolean;
+	/** Position par rapport au bouton : en dessous (défaut), au-dessus, à droite, à gauche. */
+	placement?: "bottom" | "top" | "right" | "left";
+	class?: string;
+}
+
+const { id, manual = false, placement = "bottom", class: className } = Astro.props;
+---
+
+<div id={id} popover={manual ? "manual" : "auto"} class:list={["zef-popover", className]} data-placement={placement}>
+	<slot />
+</div>

package/components/Select.astro

@@ -0,0 +1,55 @@
+---
+/**
+ * Liste déroulante native, classe `zef-select`. Options : `options` (`{ value: label }` ou
+ * `[{ value, label }]`) ou `<option>` en contenu. Avec `label`, rendue dans un `<Field>`.
+ */
+import type { HTMLAttributes } from "astro/types";
+import Field from "./Field.astro";
+
+type Option = { value: string; label: string };
+type Props = Omit<HTMLAttributes<"select">, "class"> & {
+	label?: string;
+	help?: string;
+	error?: string;
+	options?: Record<string, string> | Option[];
+	/** Première option vide (« Choisir… »). */
+	placeholder?: string;
+	value?: string;
+	class?: string;
+};
+
+const {
+	label,
+	help,
+	error,
+	options,
+	placeholder,
+	value,
+	class: className,
+	id: givenId,
+	...rest
+} = Astro.props;
+const id =
+	givenId ?? (label ? `zef-${rest.name ?? Math.random().toString(36).slice(2, 8)}` : undefined);
+const list: Option[] = Array.isArray(options)
+	? options
+	: Object.entries(options ?? {}).map(([v, l]) => ({ value: v, label: l }));
+---
+
+{
+	label ? (
+		<Field label={label} for={id} help={help} error={error} required={Boolean(rest.required)}>
+			<select {...rest} id={id} class:list={["zef-select", className]} aria-invalid={error ? "true" : undefined}>
+				{placeholder !== undefined && <option value="">{placeholder}</option>}
+				{list.map((o) => <option value={o.value} selected={o.value === value}>{o.label}</option>)}
+				<slot />
+			</select>
+		</Field>
+	) : (
+		<select {...rest} id={id} class:list={["zef-select", className]} aria-invalid={error ? "true" : undefined}>
+			{placeholder !== undefined && <option value="">{placeholder}</option>}
+			{list.map((o) => <option value={o.value} selected={o.value === value}>{o.label}</option>)}
+			<slot />
+		</select>
+	)
+}

package/dist/index.js

@@ -84,6 +84,12 @@ export default function zef(options = {}) {
                         ]),
                     },
                 });
+                // Performance : le CSS (quelques Ko par page) est écrit dans la page plutôt que chargé à
+                // part, ce qui retire une requête bloquante du premier affichage. Un site peut choisir
+                // « never » dans son `astro.config`.
+                if (config.build.inlineStylesheets === "auto") {
+                    updateConfig({ build: { inlineStylesheets: "always" } });
+                }
                 addWatchFile(join(root, ".env"));
                 const layout = join(root, options.layout ?? "src/layouts/Page.astro");
                 const configFile = join(root, "zef.config.ts");

package/dist/seo.d.ts

@@ -46,6 +46,8 @@ export type SeoInput = {
     type?: string;
     /** Données structurées en plus (article, évènement, FAQ…). */
     jsonLd?: Record<string, unknown> | Record<string, unknown>[];
+    /** Icône de l'onglet (`/favicon.svg`) ; à défaut, le logo du client dans le CMS. */
+    icon?: string | null;
 };
 export type SeoTags = {
     title: string;

package/dist/seo.js

@@ -73,6 +73,9 @@ export function seoTags(input) {
     if (image)
         add("name", "twitter:image", absolute(origin, image.url));
     const links = [{ rel: "canonical", href: canonical }];
+    const icon = input.icon ?? site.logo;
+    if (icon)
+        links.push({ rel: "icon", href: icon });
     const langs = Object.entries(alternates);
     if (langs.length > 1) {
         for (const [lang, href] of langs)

package/dist/ui.d.ts

@@ -0,0 +1,7 @@
+/** Ouvre une fenêtre `<Dialog>` par son identifiant. */
+export declare function openDialog(id: string): void;
+/**
+ * Ferme une fenêtre en laissant jouer son animation de sortie (`[data-closing]`), puis la
+ * ferme vraiment ; tout de suite si le visiteur réduit les animations ou sans animation CSS.
+ */
+export declare function closeDialog(target: HTMLDialogElement | string): void;

package/dist/ui.js

@@ -0,0 +1,33 @@
+/*
+ * Comportements des composants d'interface (`<Dialog>`, `<Accordion>`) partagés par leurs
+ * scripts : exportés pour qu'un site les déclenche lui-même.
+ */
+const reduced = () => window.matchMedia("(prefers-reduced-motion: reduce)").matches;
+/** Ouvre une fenêtre `<Dialog>` par son identifiant. */
+export function openDialog(id) {
+    const dialog = document.getElementById(id);
+    if (dialog instanceof HTMLDialogElement && !dialog.open)
+        dialog.showModal();
+}
+/**
+ * Ferme une fenêtre en laissant jouer son animation de sortie (`[data-closing]`), puis la
+ * ferme vraiment ; tout de suite si le visiteur réduit les animations ou sans animation CSS.
+ */
+export function closeDialog(target) {
+    const dialog = typeof target === "string" ? document.getElementById(target) : target;
+    if (!(dialog instanceof HTMLDialogElement) || !dialog.open || dialog.hasAttribute("data-closing"))
+        return;
+    const finish = () => {
+        dialog.removeAttribute("data-closing");
+        dialog.close();
+    };
+    if (reduced())
+        return finish();
+    dialog.setAttribute("data-closing", "");
+    const animated = getComputedStyle(dialog).animationName !== "none";
+    if (!animated)
+        return finish();
+    dialog.addEventListener("animationend", finish, { once: true });
+    // Filet : si l'animation ne se termine pas (onglet en arrière-plan), on ferme quand même.
+    setTimeout(() => dialog.hasAttribute("data-closing") && finish(), 400);
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@agence-zef/astro",
-  "version": "0.4.1",
+  "version": "0.5.0",
   "description": "Intégration Astro du CMS ZEF : routes, rendu des sections, aperçu, composants réutilisables sans style.",
   "license": "MIT",
   "type": "module",
@@ -50,11 +50,25 @@
     "./VideoPlayer.astro": "./components/VideoPlayer.astro",
     "./Subscriptions.astro": "./components/Subscriptions.astro",
     "./ReservedNotice.astro": "./components/ReservedNotice.astro",
-    "./routes/shop.ts": "./components/routes/shop.ts"
+    "./routes/shop.ts": "./components/routes/shop.ts",
+    "./Dialog.astro": "./components/Dialog.astro",
+    "./Accordion.astro": "./components/Accordion.astro",
+    "./AccordionItem.astro": "./components/AccordionItem.astro",
+    "./Popover.astro": "./components/Popover.astro",
+    "./Field.astro": "./components/Field.astro",
+    "./Input.astro": "./components/Input.astro",
+    "./Select.astro": "./components/Select.astro",
+    "./Checkbox.astro": "./components/Checkbox.astro",
+    "./styles.css": "./styles.css",
+    "./ui": {
+      "types": "./dist/ui.d.ts",
+      "import": "./dist/ui.js"
+    }
   },
   "files": [
     "dist",
-    "components"
+    "components",
+    "styles.css"
   ],
   "publishConfig": {
     "access": "public"
@@ -67,8 +81,8 @@
     "@types/node": "^24.0.0"
   },
   "dependencies": {
-    "@agence-zef/schema": "0.4.0",
-    "@agence-zef/sdk": "0.4.1"
+    "@agence-zef/schema": "0.5.0",
+    "@agence-zef/sdk": "0.5.0"
   },
   "homepage": "https://agence-zef.fr",
   "scripts": {

package/styles.css

@@ -0,0 +1,468 @@
+/*
+ * Habillage facultatif des composants de @agence-zef/astro : champs de formulaire (Form,
+ * AccountForm, Checkout, panier, Field / Input / Select / Checkbox), boutons, Dialog,
+ * Accordion, Popover, popups et bandeau cookies.
+ *
+ * - Importé une fois (`import "@agence-zef/astro/styles.css"` dans le gabarit).
+ * - Toutes les règles sont en `:where()` : aucune priorité, la moindre règle du site passe devant.
+ * - Tout se règle par les variables `--zef-*` ci-dessous, à redéfinir dans `:root` du site
+ *   (ex. `--zef-accent: var(--color-accent)`).
+ */
+
+:where(:root) {
+	--zef-font: inherit;
+	--zef-text: currentColor;
+	--zef-muted: color-mix(in srgb, currentColor 62%, transparent);
+	--zef-surface: #fff;
+	--zef-surface-muted: color-mix(in srgb, currentColor 5%, transparent);
+	--zef-border: color-mix(in srgb, currentColor 18%, transparent);
+	--zef-border-strong: color-mix(in srgb, currentColor 35%, transparent);
+	--zef-accent: #18181b;
+	--zef-on-accent: #fff;
+	--zef-danger: #c62828;
+	--zef-success: #2e7d32;
+	--zef-focus: 0 0 0 3px color-mix(in srgb, var(--zef-accent) 30%, transparent);
+	--zef-radius: 0.5rem;
+	--zef-radius-small: 0.25rem;
+	--zef-gap: 1rem;
+	--zef-input-height: 2.75rem;
+	--zef-input-padding: 0.75rem;
+	--zef-shadow: 0 12px 40px rgb(0 0 0 / 0.16);
+	--zef-backdrop: rgb(0 0 0 / 0.45);
+	--zef-dialog-width: 32rem;
+	--zef-popover-width: 18rem;
+	--zef-duration: 0.2s;
+}
+
+/* ---------- Formulaires ---------- */
+
+:where(.zef-account, .zef-checkout fieldset, .zef-cart-add) {
+	display: flex;
+	flex-direction: column;
+	gap: var(--zef-gap);
+	font-family: var(--zef-font);
+}
+/* Formulaire du CMS : champs en pleine largeur ou en demi-largeur (`data-width="half"`). */
+:where(.zef-form) {
+	display: flex;
+	flex-wrap: wrap;
+	gap: var(--zef-gap);
+	font-family: var(--zef-font);
+}
+:where(.zef-form) > :where(*) {
+	flex: 1 1 100%;
+}
+/* Champs masqués (logique conditionnelle, erreurs vides) : `hidden` l'emporte sur `display`. */
+:where(.zef-form, .zef-account, .zef-checkout, .zef-cart, .zef-cart-add, .zef-field)
+	:where([hidden]) {
+	/* biome-ignore lint/complexity/noImportantStyles: `hidden` doit gagner sur tout `display` du site. */
+	display: none !important;
+}
+:where(.zef-checkout fieldset) {
+	margin: 0;
+	padding: 0;
+	border: 0;
+}
+:where(.zef-checkout legend, .zef-form legend, .zef-account legend) {
+	margin-bottom: 0.5rem;
+	padding: 0;
+	font-weight: 600;
+}
+
+/* Champ : libellé au-dessus du contrôle. */
+:where(.zef-field, .zef-form__field, .zef-account__field, .zef-checkout fieldset > label) {
+	display: flex;
+	flex-direction: column;
+	gap: 0.375rem;
+	min-width: 0;
+}
+:where(
+	.zef-label,
+	.zef-form__label,
+	.zef-account__field > label:not(:has(input[type="checkbox"])),
+	.zef-checkout fieldset > label
+) {
+	font-weight: 600;
+	font-size: 0.9375rem;
+}
+:where(.zef-required) {
+	color: var(--zef-danger);
+}
+:where(.zef-form__field[data-width="half"]) {
+	flex: 1 1 calc(50% - var(--zef-gap) / 2);
+}
+
+/* Zones de saisie et listes. */
+:where(
+	.zef-input,
+	.zef-select,
+	:is(.zef-form, .zef-account, .zef-checkout, .zef-cart, .zef-cart-add, .zef-subscriptions)
+		:is(
+			input:not(
+				[type="checkbox"],
+				[type="radio"],
+				[type="hidden"],
+				[type="file"],
+				[type="submit"],
+				[type="button"]
+			),
+			select,
+			textarea
+		)
+) {
+	box-sizing: border-box;
+	width: 100%;
+	min-height: var(--zef-input-height);
+	padding: 0 var(--zef-input-padding);
+	border: 1px solid var(--zef-border-strong);
+	border-radius: var(--zef-radius);
+	background: var(--zef-surface);
+	color: inherit;
+	font: inherit;
+	transition:
+		border-color var(--zef-duration),
+		box-shadow var(--zef-duration);
+}
+:where(textarea.zef-input, :is(.zef-form, .zef-account, .zef-cart-add) textarea) {
+	min-height: 7.5rem;
+	padding-block: var(--zef-input-padding);
+	resize: vertical;
+}
+:where(
+	.zef-input,
+	.zef-select,
+	:is(.zef-form, .zef-account, .zef-checkout, .zef-cart, .zef-cart-add, .zef-subscriptions)
+		:is(input, select, textarea)
+):focus-visible {
+	border-color: var(--zef-accent);
+	outline: none;
+	box-shadow: var(--zef-focus);
+}
+:where(
+	.zef-input[aria-invalid="true"],
+	.zef-select[aria-invalid="true"],
+	[data-invalid] :is(input, select, textarea)
+) {
+	border-color: var(--zef-danger);
+}
+:where(
+	.zef-input,
+	.zef-select,
+	:is(.zef-form, .zef-account, .zef-checkout) :is(input, select, textarea)
+):disabled {
+	opacity: 0.55;
+	cursor: not-allowed;
+}
+:where(.zef-form input[type="file"]) {
+	font: inherit;
+}
+
+/* Cases à cocher et boutons radio. */
+:where(
+	.zef-check,
+	.zef-form__check,
+	.zef-account label:has(> input[type="checkbox"]),
+	.zef-checkout label:has(> input:is([type="checkbox"], [type="radio"])),
+	.zef-cart-add label:has(> input[type="radio"])
+) {
+	display: flex;
+	align-items: flex-start;
+	gap: 0.625rem;
+	font-weight: 400;
+	cursor: pointer;
+}
+:where(.zef-check, .zef-form__check, .zef-account, .zef-checkout, .zef-cart-add, .zef-cookies)
+	:where(input[type="checkbox"], input[type="radio"]) {
+	flex-shrink: 0;
+	width: 1.125rem;
+	height: 1.125rem;
+	margin: 0.125rem 0 0;
+	accent-color: var(--zef-accent);
+}
+:where(.zef-form__choices) {
+	display: flex;
+	flex-direction: column;
+	gap: 0.5rem;
+	margin: 0;
+	padding: 0;
+	border: 0;
+}
+
+/* Aide, erreurs, messages. */
+:where(.zef-help, .zef-account__help, .zef-account__optional, .zef-checkout__optional) {
+	color: var(--zef-muted);
+	font-size: 0.875rem;
+	font-weight: 400;
+}
+:where(.zef-error, .zef-form__error, .zef-account__error, .zef-checkout__error, .zef-cart__error) {
+	margin: 0;
+	color: var(--zef-danger);
+	font-size: 0.875rem;
+}
+:where(.zef-form__status, .zef-account__notice, .zef-checkout__notice, .zef-cart__warning) {
+	margin: 0;
+	padding: 0.75rem 1rem;
+	border-radius: var(--zef-radius);
+	background: var(--zef-surface-muted);
+}
+:where(.zef-account__success, .zef-cart__success, .zef-subscriptions__success, .zef-form__done) {
+	color: var(--zef-success);
+}
+
+/* ---------- Boutons ---------- */
+
+:where(
+	.zef-button,
+	.zef-form__submit,
+	.zef-account__submit,
+	.zef-checkout__submit,
+	.zef-cart__checkout,
+	.zef-cart-add button[type="submit"],
+	.zef-subscriptions__cancel
+) {
+	display: inline-flex;
+	align-items: center;
+	justify-content: center;
+	gap: 0.5rem;
+	min-height: var(--zef-input-height);
+	padding: 0 1.25rem;
+	border: 1px solid var(--zef-accent);
+	border-radius: var(--zef-radius);
+	background: var(--zef-accent);
+	color: var(--zef-on-accent);
+	font: inherit;
+	font-weight: 600;
+	text-decoration: none;
+	cursor: pointer;
+	transition:
+		filter var(--zef-duration),
+		opacity var(--zef-duration);
+}
+:where(.zef-button[data-variant="secondary"], .zef-subscriptions__cancel) {
+	background: transparent;
+	color: var(--zef-accent);
+}
+:where(
+	.zef-button,
+	.zef-form__submit,
+	.zef-account__submit,
+	.zef-checkout__submit,
+	.zef-cart__checkout
+):hover {
+	filter: brightness(1.12);
+}
+:where(.zef-button, .zef-form__submit, .zef-account__submit, .zef-checkout__submit):focus-visible {
+	outline: none;
+	box-shadow: var(--zef-focus);
+}
+:where(.zef-button, .zef-form__submit, .zef-account__submit, .zef-checkout__submit):disabled {
+	opacity: 0.55;
+	cursor: progress;
+}
+:where(.zef-form__submit, .zef-account__submit) {
+	align-self: flex-start;
+}
+
+/* ---------- Dialog et popups ---------- */
+
+:where(.zef-dialog, .zef-popup) {
+	box-sizing: border-box;
+	width: min(var(--zef-dialog-width), calc(100vw - 2rem));
+	max-height: calc(100dvh - 2rem);
+	padding: 0;
+	border: 0;
+	border-radius: calc(var(--zef-radius) * 1.5);
+	background: var(--zef-surface);
+	color: inherit;
+	box-shadow: var(--zef-shadow);
+	overflow: auto;
+}
+:where(.zef-dialog, .zef-popup)::backdrop {
+	background: var(--zef-backdrop);
+}
+:where(.zef-dialog__panel) {
+	position: relative;
+	padding: 2rem;
+}
+:where(.zef-dialog__close, .zef-popup__close) {
+	position: absolute;
+	top: 0.75rem;
+	right: 0.75rem;
+	display: grid;
+	place-items: center;
+	width: 2.25rem;
+	height: 2.25rem;
+	padding: 0;
+	border: 0;
+	border-radius: 999px;
+	background: transparent;
+	color: inherit;
+	cursor: pointer;
+}
+:where(.zef-dialog__close, .zef-popup__close):hover {
+	background: var(--zef-surface-muted);
+}
+@media (prefers-reduced-motion: no-preference) {
+	:where(.zef-dialog[open], .zef-popup[open]) {
+		animation: zef-dialog-in var(--zef-duration) cubic-bezier(0.16, 1, 0.3, 1);
+	}
+	:where(.zef-dialog[open])::backdrop {
+		animation: zef-fade-in var(--zef-duration) ease-out;
+	}
+	:where(.zef-dialog[data-closing]) {
+		animation: zef-dialog-out calc(var(--zef-duration) * 0.75) ease-in forwards;
+	}
+	:where(.zef-dialog[data-closing])::backdrop {
+		animation: zef-fade-out calc(var(--zef-duration) * 0.75) ease-in forwards;
+	}
+}
+@keyframes zef-dialog-in {
+	from {
+		opacity: 0;
+		transform: translateY(0.5rem) scale(0.98);
+	}
+}
+@keyframes zef-dialog-out {
+	to {
+		opacity: 0;
+		transform: translateY(0.5rem) scale(0.98);
+	}
+}
+@keyframes zef-fade-in {
+	from {
+		opacity: 0;
+	}
+}
+@keyframes zef-fade-out {
+	to {
+		opacity: 0;
+	}
+}
+
+/* ---------- Accordéon ---------- */
+
+:where(.zef-accordion) {
+	display: flex;
+	flex-direction: column;
+	border-top: 1px solid var(--zef-border);
+}
+:where(.zef-accordion__item) {
+	border-bottom: 1px solid var(--zef-border);
+	/* Hauteur animée (navigateurs récents) ; sinon ouverture instantanée. */
+	interpolate-size: allow-keywords;
+}
+:where(.zef-accordion__summary) {
+	display: flex;
+	align-items: center;
+	justify-content: space-between;
+	gap: 1rem;
+	padding: 1.125rem 0;
+	font-weight: 600;
+	list-style: none;
+	cursor: pointer;
+}
+:where(.zef-accordion__summary)::-webkit-details-marker {
+	display: none;
+}
+:where(.zef-accordion__summary)::after {
+	content: "";
+	flex-shrink: 0;
+	width: 0.5rem;
+	height: 0.5rem;
+	margin-right: 0.25rem;
+	border-right: 1.5px solid currentColor;
+	border-bottom: 1.5px solid currentColor;
+	transform: translateY(-25%) rotate(45deg);
+	transition: transform var(--zef-duration);
+}
+:where(.zef-accordion__item[open] > .zef-accordion__summary)::after {
+	transform: translateY(25%) rotate(-135deg);
+}
+:where(.zef-accordion__summary):focus-visible {
+	outline: none;
+	box-shadow: var(--zef-focus);
+	border-radius: var(--zef-radius-small);
+}
+:where(.zef-accordion__content) {
+	padding-bottom: 1.25rem;
+	color: var(--zef-muted);
+}
+:where(.zef-accordion__content) > :first-child {
+	margin-top: 0;
+}
+:where(.zef-accordion__content) > :last-child {
+	margin-bottom: 0;
+}
+@media (prefers-reduced-motion: no-preference) {
+	:where(.zef-accordion__item)::details-content {
+		block-size: 0;
+		overflow: hidden;
+		transition:
+			block-size var(--zef-duration) ease,
+			content-visibility var(--zef-duration) allow-discrete;
+	}
+	:where(.zef-accordion__item[open])::details-content {
+		block-size: auto;
+	}
+}
+
+/* ---------- Popover ---------- */
+
+:where(.zef-popover) {
+	box-sizing: border-box;
+	width: min(var(--zef-popover-width), calc(100vw - 2rem));
+	margin: 0;
+	padding: 1rem;
+	border: 1px solid var(--zef-border);
+	border-radius: var(--zef-radius);
+	background: var(--zef-surface);
+	color: inherit;
+	box-shadow: var(--zef-shadow);
+	/* Positionnement d'ancre : sous le bouton qui l'ouvre, retourné s'il manque de place. */
+	position-area: block-end span-inline-end;
+	position-try-fallbacks: flip-block, flip-inline;
+	margin-block: 0.375rem;
+}
+:where(.zef-popover[data-placement="top"]) {
+	position-area: block-start span-inline-end;
+}
+:where(.zef-popover[data-placement="right"]) {
+	position-area: inline-end span-block-end;
+	margin: 0 0.375rem;
+}
+:where(.zef-popover[data-placement="left"]) {
+	position-area: inline-start span-block-end;
+	margin: 0 0.375rem;
+}
+@supports not (position-area: block-end) {
+	:where(.zef-popover) {
+		margin: auto;
+	}
+}
+@media (prefers-reduced-motion: no-preference) {
+	:where(.zef-popover) {
+		transition:
+			opacity var(--zef-duration),
+			transform var(--zef-duration),
+			overlay var(--zef-duration) allow-discrete,
+			display var(--zef-duration) allow-discrete;
+		opacity: 0;
+		transform: translateY(-0.25rem);
+	}
+	:where(.zef-popover:popover-open) {
+		opacity: 1;
+		transform: none;
+	}
+	@starting-style {
+		:where(.zef-popover:popover-open) {
+			opacity: 0;
+			transform: translateY(-0.25rem);
+		}
+	}
+}
+
+@media (max-width: 40rem) {
+	:where(.zef-form__field[data-width="half"]) {
+		flex-basis: 100%;
+	}
+}