/*
Theme Name: deux à trois
Author: Centis Menant
Description: Thème de blocs du blog parentalité « deux à trois ». Palette de jardin, typographies Cardo & Noto Sans, polices servies localement.
Requires at least: 6.7
Tested up to: 6.8
Requires PHP: 7.4
Version: 0.8.0
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: deux-a-trois
*/

/*
 * Les tokens vivent dans theme.json (couleurs sémantiques --wp--custom--*,
 * tailles, espacements, rayons, courbes de mouvement). Ce fichier ne contient
 * que ce que theme.json ne sait pas exprimer :
 *   1. Liens à soulignement révélé
 *   2. Micro-interactions (rebond boutons, survol cartes)
 *   3. Focus visible canonique
 *   4. Champs de formulaire
 *   5. Composants (tags de catégories, pagination en cercles, newsletter)
 *   6. Mode sombre (bascule data-theme)
 *   7. Accessibilité (reduced motion)
 */

/* ------------------------------------------------------------------
   0. BOX MODEL — WordPress n'applique pas border-box globalement ;
      sans ce reset, tout élément en width:100% + padding déborde de
      l'écran (scroll horizontal sur mobile)
   ------------------------------------------------------------------ */
html {
	box-sizing: border-box;
}

*,
*::before,
*::after {
	box-sizing: inherit;
}

/* Pas d'espace entre les sections racine (header, contenu, bandeaux,
   footer) : comme dans les maquettes, les bords « papier déchiré »
   mordent directement sur la section voisine. WordPress insère sinon
   un blockGap entre chaque bloc racine. */
body .wp-site-blocks > * + * {
	margin-block-start: 0;
}

/* La page occupe toujours au moins la hauteur de l'écran : le <main>
   absorbe l'espace libre, le footer reste en bas même sur les pages
   courtes (404, pages légales…). La hauteur de la barre d'administration
   (connecté) est soustraite, sinon la page déborde de 32px et devient
   scrollable pour rien. */
.wp-site-blocks {
	display: flex;
	flex-direction: column;
	min-height: calc(100vh - var(--wp-admin--admin-bar--height, 0px));
	min-height: calc(100svh - var(--wp-admin--admin-bar--height, 0px));
}

.wp-site-blocks > main {
	flex: 1;
}

/* Mesure de texte : largeur de lecture des intros et textes centrés */
.a23-measure {
	max-width: 480px;
	margin-left: auto;
	margin-right: auto;
}

/* ------------------------------------------------------------------
   1. LIENS — soulignement transparent révélé au survol
   ------------------------------------------------------------------ */
a:where(:not(.wp-element-button)),
.a23-featured__cta,
.a23-card-title,
.a23-card-title a,
.a23-artnav__title,
.a23-catcard__name {
	text-decoration: underline;
	text-decoration-color: transparent;
	text-underline-offset: 4px;
	transition: text-decoration-color var(--wp--custom--motion--duration) ease;
}

a:where(:not(.wp-element-button)):hover,
a:where(:not(.wp-element-button)):focus-visible,
.a23-featured:hover .a23-featured__cta,
.a23-featured:focus-visible .a23-featured__cta,
.a23-card:hover .a23-card-title,
.a23-card:focus-visible .a23-card-title,
.a23-artnav__link:hover .a23-artnav__title,
.a23-artnav__link:focus-visible .a23-artnav__title,
.a23-catcard:hover .a23-catcard__name,
.a23-catcard:focus-visible .a23-catcard__name {
	text-decoration-color: currentColor;
}

/* Les titres de cartes ne se soulignent pas, ils changent de couleur */
.wp-block-post-title a {
	text-decoration: none;
}

.wp-block-post-title a:hover {
	color: var(--wp--custom--color--accent);
}

/* ------------------------------------------------------------------
   2. MICRO-INTERACTIONS
   ------------------------------------------------------------------ */

/* Rebond au clic — tous les éléments cliquables « bouton » */
.wp-element-button,
.wp-block-button__link,
button,
input[type="submit"] {
	transition:
		background-color var(--wp--custom--motion--duration),
		color var(--wp--custom--motion--duration),
		border-color var(--wp--custom--motion--duration),
		box-shadow var(--wp--custom--motion--duration),
		transform 0.3s var(--wp--custom--motion--bounce);
}

.wp-element-button:active,
.wp-block-button__link:active,
button:active,
input[type="submit"]:active {
	transform: scale(0.9);
}

/* Grilles d'articles : 1 colonne sur mobile, 2 sur tablette
   (le layout grid de WordPress garde sinon ses 3-4 colonnes partout) */
@media (max-width: 599px) {
	.wp-block-post-template.is-layout-grid {
		grid-template-columns: 1fr !important;
	}
}

@media (min-width: 600px) and (max-width: 781px) {
	.wp-block-post-template.is-layout-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
	}
}

/* Survol des cartes d'articles : légère lévitation */
.wp-block-post-template .wp-block-post {
	transition: transform 0.3s var(--wp--custom--motion--ease);
}

.wp-block-post-template .wp-block-post:hover {
	transform: translateY(-4px);
}

/* Images de cartes : légèrement zoomées au repos, elles « se posent »
   au survol (effet inverse, comme les maquettes) */
.wp-block-post-featured-image img {
	transform: scale(1.03);
	transition: transform 0.4s var(--wp--custom--motion--ease);
}

.wp-block-post:hover .wp-block-post-featured-image img {
	transform: scale(1);
}

/* ------------------------------------------------------------------
   3. FOCUS VISIBLE — anneau canonique
   ------------------------------------------------------------------ */
:focus-visible {
	outline: none;
	/* Cœur plein 2px (≥3:1 sur tous les fonds) + halo doux : le halo seul
	   à 18 % était quasi invisible pour la navigation clavier. */
	box-shadow:
		0 0 0 2px var(--wp--custom--color--action),
		0 0 0 5px var(--wp--custom--color--focus-ring);
	border-radius: var(--wp--custom--radius--thumb);
}

/* .wp-element-button:focus-visible,
.wp-block-button__link:focus-visible,
input:focus-visible,
textarea:focus-visible {
	border-radius: inherit;
} */

/* ------------------------------------------------------------------
   4. CHAMPS DE FORMULAIRE — pilules sur les champs courts,
      rayon « carte » sur les zones de texte
   ------------------------------------------------------------------ */
input[type="text"],
input[type="email"],
input[type="search"],
input[type="url"],
.wp-block-search__input {
	font: inherit;
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--custom--color--ink);
	background: var(--wp--custom--color--card);
	border: 1px solid var(--wp--custom--color--border-strong);
	border-radius: var(--wp--custom--radius--pill);
	padding: 12px 18px;
	transition:
		border-color var(--wp--custom--motion--duration),
		box-shadow var(--wp--custom--motion--duration);
}

textarea {
	font: inherit;
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--custom--color--ink);
	background: var(--wp--custom--color--card);
	border: 1px solid var(--wp--custom--color--border-strong);
	border-radius: var(--wp--custom--radius--card);
	padding: 14px 18px;
	resize: vertical;
	transition:
		border-color var(--wp--custom--motion--duration),
		box-shadow var(--wp--custom--motion--duration);
}

input[type="text"]:focus,
input[type="email"]:focus,
input[type="search"]:focus,
input[type="url"]:focus,
.wp-block-search__input:focus,
textarea:focus {
	outline: none;
	border-color: var(--wp--custom--color--action);
	box-shadow: 0 0 0 3px var(--wp--custom--color--focus-ring);
}

::placeholder {
	color: var(--wp--custom--color--ink-faint);
}

input[type="checkbox"],
input[type="radio"] {
	accent-color: var(--wp--custom--color--action);
}

/* Bouton du bloc recherche : aligné sur le bouton standard */
.wp-block-search__button {
	border-radius: var(--wp--custom--radius--pill);
}

/* ------------------------------------------------------------------
   5. COMPOSANTS
   ------------------------------------------------------------------ */

/* Tags de catégories (bloc « Étiquettes/Catégories ») en pilules */
.wp-block-post-terms {
	display: inline-flex;
	flex-wrap: wrap;
	gap: 8px;
}

.wp-block-post-terms .wp-block-post-terms__separator {
	display: none;
}

.wp-block-post-terms a {
	display: inline-block;
	background: var(--wp--custom--color--surface-alt);
	color: var(--wp--custom--color--ink-soft);
	border: 1px solid var(--wp--custom--color--border);
	border-radius: var(--wp--custom--radius--pill);
	padding: 6px 13px;
	font-size: 12.5px;
	font-weight: 500;
	text-decoration: none;
	transition:
		border-color var(--wp--custom--motion--duration),
		color var(--wp--custom--motion--duration);
}

.wp-block-post-terms a:hover {
	border-color: var(--wp--custom--color--action);
	color: var(--wp--custom--color--accent);
}

/* Pagination en cercles */
.wp-block-query-pagination-numbers .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 38px;
	height: 38px;
	border: 1px solid var(--wp--custom--color--border);
	border-radius: var(--wp--custom--radius--pill);
	padding: 0 8px;
	text-decoration: none;
	transition:
		border-color var(--wp--custom--motion--duration),
		color var(--wp--custom--motion--duration);
}

.wp-block-query-pagination-numbers .page-numbers:hover {
	border-color: var(--wp--custom--color--action);
	color: var(--wp--custom--color--accent);
}

.wp-block-query-pagination-numbers .page-numbers.current {
	background: var(--wp--custom--color--button-bg);
	color: var(--wp--custom--color--button-text);
	border-color: var(--wp--custom--color--button-bg);
}

.wp-block-query-pagination-numbers .page-numbers.dots {
	border: none;
	color: var(--wp--custom--color--ink-faint);
}

.wp-block-query-pagination-previous,
.wp-block-query-pagination-next {
	display: inline-flex;
	align-items: center;
	height: 38px;
	border: 1px solid var(--wp--custom--color--border);
	border-radius: var(--wp--custom--radius--pill);
	padding: 0 18px;
	text-decoration: none;
	transition:
		border-color var(--wp--custom--motion--duration),
		color var(--wp--custom--motion--duration);
}

.wp-block-query-pagination-previous:hover,
.wp-block-query-pagination-next:hover {
	border-color: var(--wp--custom--color--action);
	color: var(--wp--custom--color--accent);
}

/* Composant recherche unifié (.a23-search) — header + menu mobile.
   Libellé loupe + « Rechercher… » centré au repos, glisse à gauche au
   focus ; croix et bouton d'envoi apparaissent à la saisie.
   Markup : template-parts/search-form.php · JS : assets/js/search.js */
.a23-search {
	position: relative;
	display: flex;
	flex: 1;
}

.a23-search input[type="search"] {
	flex: 1;
	min-width: 0;
	font-family: inherit;
	font-size: 13.5px;
	font-weight: 400;
	letter-spacing: normal;
	text-transform: none;
	color: var(--wp--custom--color--ink);
	padding: 11px 16px 11px 39px;
	border-radius: var(--wp--custom--radius--pill);
	border: 1px solid var(--wp--custom--color--border);
	background: var(--wp--custom--color--surface);
	outline: none;
	text-align: left;
	transition:
		border-color var(--wp--custom--motion--duration),
		box-shadow var(--wp--custom--motion--duration);
}

.a23-search.typing input[type="search"] {
	padding-right: 80px;
}

.a23-search input[type="search"]::-webkit-search-cancel-button {
	-webkit-appearance: none;
	appearance: none;
	display: none;
}

.a23-search input[type="search"]:focus {
	border-color: var(--wp--custom--color--action);
	box-shadow: 0 0 0 3px var(--wp--custom--color--focus-ring);
}

.a23-search__ph {
	position: absolute;
	inset: 0;
	pointer-events: none;
}

.a23-search__ph-inner {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	display: flex;
	align-items: center;
	gap: 8px;
	white-space: nowrap;
	color: var(--wp--custom--color--ink-soft);
	opacity: 0.7;
	font-family: inherit;
	font-size: 13.5px;
	transition:
		left 0.38s var(--wp--custom--motion--slide),
		transform 0.38s var(--wp--custom--motion--slide);
}

.a23-search.active .a23-search__ph-inner,
.a23-search.typing .a23-search__ph-inner {
	left: 16px;
	transform: translate(0, -50%);
}

.a23-search__ph svg {
	flex: none;
}

.a23-search__ph-word {
	transition: opacity var(--wp--custom--motion--duration);
}

.a23-search.typing .a23-search__ph-word {
	opacity: 0;
}

.a23-search__go,
.a23-search__clear {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	display: flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	border: none;
	border-radius: var(--wp--custom--radius--pill);
	cursor: pointer;
	padding: 0;
	flex: none;
	opacity: 0;
	pointer-events: none;
	transition:
		opacity 0.3s,
		color var(--wp--custom--motion--duration),
		background-color var(--wp--custom--motion--duration),
		transform 0.3s var(--wp--custom--motion--bounce);
}

.a23-search__go {
	right: 5px;
	background: var(--wp--custom--color--action);
	color: #FFFFFF;
}

body[data-theme="dark"] .a23-search__go {
	color: #0F351E;
}

.a23-search__clear {
	right: 42px;
	background: transparent;
	color: var(--wp--custom--color--ink-soft);
}

.a23-search__clear:hover {
	color: var(--wp--custom--color--ink);
}

.a23-search.typing .a23-search__go,
.a23-search.typing .a23-search__clear {
	opacity: 1;
	pointer-events: auto;
}

.a23-search__go:active,
.a23-search__clear:active {
	transform: translateY(-50%) scale(0.86);
}

/* Formulaire newsletter (patterns « newsletter » et « newsletter inline ») */
.a23-nl-form {
	display: flex;
	gap: 12px;
	justify-content: center;
	flex-wrap: wrap;
	max-width: 440px;
	margin-inline: auto;
}

.a23-nl-form input[type="email"] {
	flex: 1;
	min-width: 200px;
}

.a23-nl-form .wp-element-button {
	background: var(--wp--custom--color--action);
	color: var(--wp--preset--color--blanc);
	border: none;
	font-weight: 600;
	font-size: var(--wp--preset--font-size--small);
	padding: 12px 24px;
	border-radius: var(--wp--custom--radius--pill);
	cursor: pointer;
}

.a23-nl-form .wp-element-button:hover {
	background: var(--wp--custom--color--button-hover);
}

.a23-nl-form--start {
	justify-content: flex-start;
	margin-inline: 0;
}

@media (max-width: 767px) {
	.a23-nl-form {
		flex-direction: column;
	}

	.a23-nl-form input[type="email"],
	.a23-nl-form .wp-element-button {
		width: 100%;
	}
}

/* Bouton secondaire (variation outline de WordPress) : bordure 1.5px,
   padding compensé pour égaler la hauteur du bouton primaire */
.wp-block-button.is-style-outline .wp-block-button__link {
	border: 1.5px solid var(--wp--custom--color--ink);
	color: var(--wp--custom--color--ink);
	background: transparent;
	padding: 11.5px 24.5px;
}

.wp-block-button.is-style-outline .wp-block-button__link:hover {
	background: var(--wp--custom--color--ink);
	color: var(--wp--custom--color--surface);
}

/* Liste des catégories (bloc « Catégories ») en pilules centrées */
.a23-cats {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 8px;
	list-style: none;
	padding: 0;
	margin: 0;
}

.a23-cats li {
	margin: 0;
}

.a23-cats a {
	display: inline-block;
	background: var(--wp--custom--color--surface-alt);
	color: var(--wp--custom--color--ink-soft);
	border: 1px solid var(--wp--custom--color--border);
	border-radius: var(--wp--custom--radius--pill);
	padding: 6px 13px;
	font-size: 12.5px;
	font-weight: 500;
	text-decoration: none;
	transition:
		border-color var(--wp--custom--motion--duration),
		color var(--wp--custom--motion--duration);
}

.a23-cats a:hover {
	border-color: var(--wp--custom--color--action);
	color: var(--wp--custom--color--accent);
}

/* Fil d'Ariane de l'en-tête de catégorie (« Le blog / Catégorie ») */
.a23-cat-crumb {
	text-align: center;
	font-size: 13px;
	color: var(--wp--custom--color--ink-faint);
}

.a23-cat-crumb a {
	color: var(--wp--custom--color--ink-muted);
	text-decoration: none;
	transition: color var(--wp--custom--motion--duration);
}

.a23-cat-crumb a:hover {
	color: var(--wp--custom--color--accent);
}

/* Note d'aide sous les résultats de recherche */
.a23-search-note {
	text-align: center;
	font-size: 14px;
	color: var(--wp--custom--color--ink-muted);
	margin-top: var(--wp--preset--spacing--50);
}

.a23-search-note a {
	color: var(--wp--custom--color--accent);
	text-decoration: underline;
	text-underline-offset: 2px;
}

/* Sous-titre du bandeau de recherche (« N articles et M créations ») */
.a23-search-sub {
	text-align: center;
	font-size: 15px;
	color: var(--wp--custom--color--ink-muted);
	margin: 10px 0 0;
}

/* Onglets de filtre par type (Tous / Articles / Créations) */
.a23-search-tabs {
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	gap: 8px;
}

/* Sections de résultats (« Dans le blog », « Dans les créations ») */
.a23-search-section + .a23-search-section {
	margin-top: var(--wp--preset--spacing--50);
}

/* Terme recherché surligné dans les titres et extraits des résultats */
.a23-mark {
	background: var(--wp--custom--color--tint-strong);
	border-radius: 4px;
	padding: 0 3px;
	color: inherit;
}

/* Partage d'article : rangée centrée + pastilles rondes
   (transposé de responsive/article.html ; la variante verticale de
   l'aside réutilise .a23-share__btns) */
.a23-share {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-wrap: wrap;
	gap: 14px;
	width: 100%;
	/* padding (et non margin) : le reset racine du thème
	   (.wp-site-blocks > * + *) remet à zéro les margin-top des
	   sections de premier niveau */
	padding: 40px 24px 0;
}

.a23-share__label {
	font-size: 13px;
	color: var(--wp--custom--color--ink-faint);
}

.a23-share__btns {
	display: flex;
	gap: 10px;
}

.a23-share__btn {
	width: 38px;
	height: 38px;
	flex: none;
	display: flex;
	align-items: center;
	justify-content: center;
	border: 1px solid var(--wp--custom--color--border);
	border-radius: var(--wp--custom--radius--pill);
	color: var(--wp--custom--color--ink-soft);
	text-decoration: none;
	transition:
		border-color var(--wp--custom--motion--duration),
		color var(--wp--custom--motion--duration);
}

.a23-share__btn:hover {
	border-color: var(--wp--custom--color--action);
	color: var(--wp--custom--color--accent);
}

/* Commentaires : bulles, badge « Auteurs », formulaire en panneau
   révélé par le bouton « Ajouter un commentaire » (article.js).
   Transposé de responsive/article.html. */
.a23-comments {
	/* padding-bottom : espace sous le bouton/formulaire avant la
	   navigation (le margin-top de .a23-artnav est tué par le reset) */
	padding: 40px 24px 64px;
}

.a23-comments .wp-block-comments-title {
	font-size: 26px;
	margin-bottom: 24px;
}

.wp-block-comment-template {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 16px;
	margin-bottom: 40px;
}

.wp-block-comment-template li {
	list-style: none;
}

.wp-block-comment-template li > .wp-block-group {
	background: var(--wp--custom--color--card);
	border: 1px solid var(--wp--custom--color--border);
	border-radius: var(--wp--custom--radius--panel);
	padding: 20px;
}

/* réponses : indentées, bulle sur fond sable */
.wp-block-comment-template li > * {
	margin: 4px 0 0;
}

/* réponses : indentées, bulle sur fond sable */
.wp-block-comment-template li > ol {
	padding: 0 0 0 24px;
	list-style: none;
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.wp-block-comment-template li li > .wp-block-group {
	background: var(--wp--custom--color--surface-alt);
}

.wp-block-comment-author-name {
	display: flex;
	align-items: center;
	font-size: 14.5px;
	font-weight: 700;
	color: var(--wp--custom--color--ink);
}

/* badge « Auteurs » sur les commentaires laissés par l'auteur du billet */
.wp-block-comment-template li.bypostauthor > .wp-block-group .wp-block-comment-author-name::after {
	content: "Auteurs";
	font-size: 10.5px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--wp--custom--color--accent);
	background: var(--wp--custom--color--tint-strong);
	padding: 3px 9px;
	border-radius: var(--wp--custom--radius--pill);
	margin-left: 10px;
}

.wp-block-comment-date {
	font-size: 12.5px;
	color: var(--wp--custom--color--ink-faint);
}

.wp-block-comment-content {
	font-size: 14.5px;
	line-height: 1.65;
	color: var(--wp--custom--color--ink-soft);
}

.wp-block-comment-content p {
	margin: 0 0 12px;
}

.wp-block-comment-content p:last-child {
	margin-bottom: 0;
}

.comment-reply-link {
	font-size: 13px;
	font-weight: 600;
}

/* bouton « Ajouter un commentaire » (injecté par article.js) —
   sélecteur doublé : il doit l'emporter sur .a23-btn-outline,
   défini plus loin dans la feuille */
.a23-comments__add.a23-comments__add {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	width: 100%;
	margin: 0 auto ;
	cursor: pointer;
	font-family: inherit;
}

.a23-comments--collapsed .wp-block-post-comments-form {
	display: none;
}

@keyframes a23CmtIn {
	from {
		opacity: 0;
		transform: translateY(10px);
	}

	to {
		opacity: 1;
		transform: translateY(0);
	}
}

.wp-block-post-comments-form.a23-cmt-in {
	animation: a23CmtIn 0.5s var(--wp--custom--motion--ease) both;
}

/* formulaire en panneau */
.wp-block-post-comments-form {
	background: var(--wp--custom--color--card);
	border: 1px solid var(--wp--custom--color--border);
	border-radius: var(--wp--custom--radius--panel);
	padding: 36px 40px;
	margin-top: 44px;
}

.wp-block-post-comments-form .comment-reply-title {
	font-size: 21px;
	margin: 0 0 8px;
}

.wp-block-post-comments-form .comment-notes {
	font-size: 13px;
	color: var(--wp--custom--color--ink-faint);
	margin: 0;
}

.wp-block-post-comments-form .comment-form {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 14px;
	margin: 0;
}

.wp-block-post-comments-form .comment-form > p {
	margin: 0;
}

.wp-block-post-comments-form .comment-notes,
.wp-block-post-comments-form .logged-in-as,
.wp-block-post-comments-form .must-log-in,
.wp-block-post-comments-form .comment-form-comment,
.wp-block-post-comments-form .comment-form-cookies-consent,
.wp-block-post-comments-form .form-submit {
	grid-column: 1 / -1;
}

/* champs identifiés par leur placeholder (libellés masqués par article.js) */
.wp-block-post-comments-form label.a23-visually-hidden {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
}

.wp-block-post-comments-form textarea,
.wp-block-post-comments-form input[type="text"],
.wp-block-post-comments-form input[type="email"],
.wp-block-post-comments-form input[type="url"] {
	width: 100%;
}

.wp-block-post-comments-form textarea {
	min-height: 110px;
}

.wp-block-post-comments-form .comment-form-cookies-consent {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	font-size: 13px;
	color: var(--wp--custom--color--ink-muted);
	margin: 4px 0 8px;
}

.wp-block-post-comments-form .comment-form-cookies-consent input {
	margin-top: 3px;
	accent-color: var(--wp--custom--color--action);
}

.wp-block-post-comments-form input[type="submit"] {
	background: var(--wp--custom--color--button-bg);
	color: var(--wp--custom--color--button-text);
	border: none;
	border-radius: var(--wp--custom--radius--pill);
	padding: 13px 26px;
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
	cursor: pointer;
}

.wp-block-post-comments-form input[type="submit"]:hover {
	background: var(--wp--custom--color--button-hover);
}

/* Pastille du nuancier (page design system) */
.a23-swatch {
	width: 100%;
	height: 64px;
	border-radius: var(--wp--custom--radius--card);
	border: 1px solid var(--wp--custom--color--border);
}

/* ------------------------------------------------------------------
   6. MODE SOMBRE — bascule via l'attribut data-theme="dark" sur <body>
      (le JS de bascule arrive avec le header en phase 3 ;
      testable dès maintenant en posant l'attribut à la main)
   ------------------------------------------------------------------ */
body[data-theme="dark"] {
	--wp--custom--color--surface: #141F17;
	--wp--custom--color--card: #1C2A21;
	--wp--custom--color--surface-alt: #233327;
	--wp--custom--color--hero: #0F1811;
	--wp--custom--color--tint: #1D3226;
	--wp--custom--color--tint-strong: #2A4635;
	--wp--custom--color--ink: #F1EEDF;
	--wp--custom--color--ink-soft: #C6D0C4;
	--wp--custom--color--ink-muted: #98A695;
	--wp--custom--color--ink-faint: #8D9A84;
	--wp--custom--color--accent: #7FCB9F;
	--wp--custom--color--action-text: #2CB271;
	--wp--custom--color--border: #2E4033;
	--wp--custom--color--border-strong: #3E5142;
	--wp--custom--color--button-bg: #167945;
	--wp--custom--color--button-hover: #178049;
	--wp--custom--color--newsletter-bg: #16633A;
	--wp--custom--color--newsletter-text: #C6D0C4;
	--wp--custom--color--cat-ocre: #D9B96A;
	--wp--custom--color--cat-terracotta: #E0906B;
	color-scheme: dark;
}

/* Fondu de bascule clair/sombre : la classe est posée par header.js
   pendant ~400ms au moment du changement de thème. Elle couvre les
   pseudo-éléments (bords « papier déchiré ») que `*` n'attrape pas,
   et fonctionne dans les deux sens. Les éléments qui ont leur propre
   transition (rebond des boutons…) la conservent, leur sélecteur
   étant plus spécifique. */
body.a23-theme-fade,
body.a23-theme-fade *,
body.a23-theme-fade *::before,
body.a23-theme-fade *::after {
	transition:
		background-color var(--wp--custom--motion--duration),
		color var(--wp--custom--motion--duration),
		border-color var(--wp--custom--motion--duration),
		fill var(--wp--custom--motion--duration),
		stroke var(--wp--custom--motion--duration),
		filter var(--wp--custom--motion--duration);
}

/* ------------------------------------------------------------------
   8. HEADER — transposé de maquettes/wordpress-header.html
      sur les tokens sémantiques (mode sombre automatique)
   ------------------------------------------------------------------ */
.dat-header {
	position: relative;
	width: 100%;
	background: var(--wp--custom--color--surface);
	transition:
		background-color var(--wp--custom--motion--duration),
		color var(--wp--custom--motion--duration),
		border-color var(--wp--custom--motion--duration);
}

/* bord bas « papier déchiré » — suit la couleur de fond, donc le thème */
.dat-header::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	top: calc(100% - 1px);
	height: 8px;
	z-index: 4;
	pointer-events: none;
	background-color: var(--wp--custom--color--surface);
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='430' height='6' viewBox='0 0 430 6'%3E%3Cpath d='M377.08 0.327751C394.59 3.00449 409.516 5.40054 430 5.99951H150H0L26.2348 2.38635L70.2717 3.88635C71.3693 3.53491 74.1644 2.6894 78.3313 1.52348C82.1237 0.462354 86.6213 0.332815 90.8108 0.8052C104.829 2.38577 134.505 5.03481 150 5.99951L208.004 2.38636C214.563 0.886364 271.717 2.38636 279.213 3.88636C286.709 5.38636 326.061 2.38636 334.493 2.38636C341.328 2.38636 355.547 2.05794 365.181 0.602541C369.056 0.017234 373.209 -0.263977 377.08 0.327751Z' fill='%23000'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='430' height='6' viewBox='0 0 430 6'%3E%3Cpath d='M377.08 0.327751C394.59 3.00449 409.516 5.40054 430 5.99951H150H0L26.2348 2.38635L70.2717 3.88635C71.3693 3.53491 74.1644 2.6894 78.3313 1.52348C82.1237 0.462354 86.6213 0.332815 90.8108 0.8052C104.829 2.38577 134.505 5.03481 150 5.99951L208.004 2.38636C214.563 0.886364 271.717 2.38636 279.213 3.88636C286.709 5.38636 326.061 2.38636 334.493 2.38636C341.328 2.38636 355.547 2.05794 365.181 0.602541C369.056 0.017234 373.209 -0.263977 377.08 0.327751Z' fill='%23000'/%3E%3C/svg%3E");
	-webkit-mask-repeat: repeat-x;
	mask-repeat: repeat-x;
	-webkit-mask-size: 430px 8px;
	mask-size: 430px 8px;
	transform: scaleY(-1);
}

.dat-header__inner {
	max-width: 1920px;
	margin: 0 auto;
	width: 100%;
	padding: 20px 56px;
	gap: 24px;
}

.dat-header a {
	text-decoration: none;
}

.dat-header__logo {
	display: flex;
	align-items: center;
	gap: 11px;
	color: inherit;
	flex: none;
}

.dat-header__logo img {
	width: 28px;
	height: 28px;
	display: block;
}

/* Zone navigation : accueille la nav, la loupe et la barre de recherche —
   centrée entre le logo et la bascule, comme la maquette */
.dat-header__nav-zone {
	position: relative;
	gap: 32px;
	flex: 1;
	justify-content: center;
}

/* Liens du bloc Navigation : capitales espacées de la maquette */
.dat-header__menu {
	font-size: 13px;
	font-weight: 500;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.dat-header__menu .wp-block-navigation-item__content {
	color: var(--wp--custom--color--ink-soft);
	transition: color var(--wp--custom--motion--duration);
}

.dat-header__menu .wp-block-navigation-item__content:hover,
.dat-header__menu .wp-block-navigation-item__content[aria-current="page"] {
	color: var(--wp--custom--color--ink);
}

/* Soulignement esquissé (trait SVG injecté par header.js) */
.dat-header .nav-link {
	position: relative;
	display: inline-block;
	padding-top: 7px;
	padding-bottom: 7px;
}

.dat-header .nav-underline {
	position: absolute;
	left: -3px;
	bottom: 0;
	width: calc(100% + 6px);
	height: 9px;
	overflow: visible;
	pointer-events: none;
}

.dat-header .nav-underline path {
	fill: none;
	stroke-width: 2.4;
	stroke-linecap: round;
	stroke-linejoin: round;
	stroke: var(--wp--custom--color--ink-muted);
	stroke-dasharray: 1;
	stroke-dashoffset: 1;
}

.dat-header .nav-link--active .nav-underline path {
	stroke: var(--wp--custom--color--action);
	stroke-dashoffset: 0;
}

.dat-header .nav-link:not(.nav-link--active) .nav-underline {
	clip-path: inset(0 100% 0 0);
	transition: clip-path 0.45s cubic-bezier(0.65, 0, 0.35, 1);
}

.dat-header .nav-link:not(.nav-link--active) .nav-underline path {
	stroke-dashoffset: 0;
}

@keyframes a23-nav-sketch {
	to {
		stroke-dashoffset: 0;
	}
}

/* Loupe et boutons ronds du header */
.dat-header__search,
.dat-header__btn {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	border-radius: var(--wp--custom--radius--pill);
	color: var(--wp--custom--color--ink-soft);
	background: none;
	border: none;
	padding: 0;
	cursor: pointer;
	flex: none;
	transition:
		border-color var(--wp--custom--motion--duration),
		color var(--wp--custom--motion--duration),
		background-color var(--wp--custom--motion--duration),
		opacity var(--wp--custom--motion--duration),
		transform 0.3s var(--wp--custom--motion--bounce);
}

.dat-header__btn {
	border: 1px solid var(--wp--custom--color--border);
}

.dat-header__search:hover,
.dat-header__btn:hover {
	border-color: var(--wp--custom--color--action);
	color: var(--wp--custom--color--accent);
}

.dat-header__search:active,
.dat-header__btn:active {
	transform: scale(0.88);
}

/* Bascule lune/soleil : icône selon le thème actif */
.dat-header__iconwrap {
	position: relative;
	width: 16px;
	height: 16px;
	display: block;
	flex: none;
}

.dat-header__iconwrap svg {
	position: absolute;
	left: 0;
	top: 0;
}

.dat-header__moon {
	display: block;
}

.dat-header__sun {
	display: none;
}

body[data-theme="dark"] .dat-header__moon {
	display: none;
}

body[data-theme="dark"] .dat-header__sun {
	display: block;
}

/* Recherche escamotable : remplace la navigation en fondu */
.dat-header.searching .dat-header__menu,
.dat-header.searching .dat-header__search {
	opacity: 0;
	pointer-events: none;
}

.dat-header__menu {
	transition: opacity var(--wp--custom--motion--duration);
	gap: 32px;
}

.dat-header__searchbar {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 100%;
	max-width: 600px;
	display: flex;
	align-items: center;
	gap: 12px;
	opacity: 0;
	pointer-events: none;
	transition: opacity var(--wp--custom--motion--duration);
}

.dat-header.searching .dat-header__searchbar {
	opacity: 1;
	pointer-events: auto;
}

.dat-header__searchbar .a23-search {
	flex: 1;
}

.dat-header__searchbar-back {
	flex: none;
	cursor: pointer;
	background: transparent;
	border: 1px solid var(--wp--custom--color--border);
	border-radius: var(--wp--custom--radius--pill);
	width: 36px;
	height: 36px;
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--wp--custom--color--ink-soft);
	padding: 0;
	transition:
		border-color var(--wp--custom--motion--duration),
		color var(--wp--custom--motion--duration),
		transform 0.3s var(--wp--custom--motion--bounce);
}

.dat-header__searchbar-back:hover {
	border-color: var(--wp--custom--color--action);
	color: var(--wp--custom--color--accent);
}

.dat-header__searchbar-back:active {
	transform: scale(0.88);
}

.dat-header__actions {
	display: flex;
	align-items: center;
	gap: 18px;
}

/* Breakpoints du header (mêmes conventions que les maquettes) */
@media (min-width: 1536px) {
	.dat-header__inner {
		padding-left: 80px;
		padding-right: 80px;
	}
}

@media (max-width: 1023px) {
	.dat-header__inner {
		padding: 18px 32px;
	}
}

@media (max-width: 767px) {
	.dat-header__inner {
		padding: 14px 18px;
	}

	/* Sous 768px, la navigation et la recherche du header disparaissent :
	   le menu mobile flottant (.dat-menu) prend le relais. Le sélecteur
	   renforcé bat `.wp-block-navigation:not(.is-vertical)` du cœur
	   (spécificité 0,2,0), qui rétablissait le burger natif sous 600px. */
	.dat-header .dat-header__menu.wp-block-navigation,
	.dat-header__menu,
	.dat-header__search,
	.dat-header__searchbar {
		display: none;
	}

	.dat-header__actions {
		gap: 12px;
	}
}

/* ------------------------------------------------------------------
   8 bis. MENU MOBILE FLOTTANT — transposé de maquettes/wordpress-menu.html
   Bouton « Menu » fixe en bas de l'écran (<768px) + tiroir qui se
   déroule depuis le bas (recherche en bas du panneau, liens au-dessus)
   ------------------------------------------------------------------ */
.dat-menu {
	display: none;
}

@media (max-width: 767px) {
	.dat-menu {
		display: block;
	}
}

/* verrou de défilement quand le tiroir est ouvert (posé par le JS) */
body.dat-menu-lock {
	overflow: hidden;
}

/* overlay noir 25 % derrière le tiroir */
.dat-menu__overlay {
	position: fixed;
	inset: 0;
	z-index: 998;
	background: #000000;
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.35s;
}

.dat-menu.open .dat-menu__overlay {
	opacity: 0.25;
	pointer-events: auto;
}

.dat-menu__dock {
	pointer-events: none;
}

/* bouton fixe : centré, à 24px du bas, au-dessus du tiroir */
.dat-menu__btn {
	position: fixed;
	left: 50%;
	bottom: calc(24px + env(safe-area-inset-bottom));
	transform: translateX(-50%);
	z-index: 1000;
	pointer-events: auto;
	cursor: pointer;
	display: flex;
	align-items: center;
	gap: 9px;
	height: 48px;
	padding: 0 22px;
	border: none;
	border-radius: var(--wp--custom--radius--pill);
	background: var(--wp--custom--color--button-bg);
	color: var(--wp--custom--color--button-text);
	font-family: inherit;
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	box-shadow: 0 6px 24px rgba(15, 53, 30, 0.28);
	transition:
		transform 0.3s var(--wp--custom--motion--bounce),
		background-color var(--wp--custom--motion--duration),
		color var(--wp--custom--motion--duration);
}

.dat-menu__btn:active {
	transform: translateX(-50%) scale(0.92);
}

/* burger → croix (morph progressif) */
.dat-menu__btn svg path {
	transition: transform 0.35s var(--wp--custom--motion--ease), opacity 0.2s;
	transform-origin: 12px 12px;
}

.dat-menu.open .dat-menu__btn-l1 {
	transform: rotate(45deg) translateY(6px);
}

.dat-menu.open .dat-menu__btn-l2 {
	opacity: 0;
}

.dat-menu.open .dat-menu__btn-l3 {
	transform: rotate(-45deg) translateY(-6px);
}

/* tiroir : glisse depuis le bas, sous le bouton fixe */
.dat-menu__panel {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 999;
	pointer-events: auto;
	width: 100%;
	max-height: 80vh;
	overflow: auto;
	background: var(--wp--custom--color--surface);
	border-top: 1px solid var(--wp--custom--color--border);
	border-radius: 20px 20px 0 0;
	padding: 14px 22px calc(96px + env(safe-area-inset-bottom));
	display: flex;
	flex-direction: column;
	transform: translateY(100%);
	transition: transform 0.45s var(--wp--custom--motion--slide);
}

.dat-menu.open .dat-menu__panel {
	transform: translateY(0);
}

.dat-menu__panel a {
	text-decoration: none;
	color: var(--wp--custom--color--ink);
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	padding: 13px 0;
	text-align: center;
	transition: color var(--wp--custom--motion--duration);
}

.dat-menu__panel a:hover,
.dat-menu__link--active {
	color: var(--wp--custom--color--accent);
}

.dat-menu__panel .a23-search {
	margin-top: 10px;
}

/* ------------------------------------------------------------------
   9. FOOTER — transposé de maquettes/wordpress-footer.html
   ------------------------------------------------------------------ */
.dat-footer {
	position: relative;
	width: 100%;
	padding: 40px;
	background: var(--wp--custom--color--hero);
	border-top: 1px solid var(--wp--custom--color--border);
	transition:
		background-color var(--wp--custom--motion--duration),
		color var(--wp--custom--motion--duration),
		border-color var(--wp--custom--motion--duration);
}

/* Le fond reste pleine largeur ; le contenu se centre, plafonné à 1920px */
.dat-footer__inner {
	max-width: 1920px;
	margin: 0 auto;
	width: 100%;
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 40px;
	flex-wrap: wrap;
}

/* bord haut « papier déchiré » — pointe vers le haut */
.dat-footer::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: calc(100% - 1px);
	height: 8px;
	z-index: 4;
	pointer-events: none;
	background-color: var(--wp--custom--color--hero);
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='430' height='6' viewBox='0 0 430 6'%3E%3Cpath d='M377.08 0.327751C394.59 3.00449 409.516 5.40054 430 5.99951H150H0L26.2348 2.38635L70.2717 3.88635C71.3693 3.53491 74.1644 2.6894 78.3313 1.52348C82.1237 0.462354 86.6213 0.332815 90.8108 0.8052C104.829 2.38577 134.505 5.03481 150 5.99951L208.004 2.38636C214.563 0.886364 271.717 2.38636 279.213 3.88636C286.709 5.38636 326.061 2.38636 334.493 2.38636C341.328 2.38636 355.547 2.05794 365.181 0.602541C369.056 0.017234 373.209 -0.263977 377.08 0.327751Z' fill='%23000'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='430' height='6' viewBox='0 0 430 6'%3E%3Cpath d='M377.08 0.327751C394.59 3.00449 409.516 5.40054 430 5.99951H150H0L26.2348 2.38635L70.2717 3.88635C71.3693 3.53491 74.1644 2.6894 78.3313 1.52348C82.1237 0.462354 86.6213 0.332815 90.8108 0.8052C104.829 2.38577 134.505 5.03481 150 5.99951L208.004 2.38636C214.563 0.886364 271.717 2.38636 279.213 3.88636C286.709 5.38636 326.061 2.38636 334.493 2.38636C341.328 2.38636 355.547 2.05794 365.181 0.602541C369.056 0.017234 373.209 -0.263977 377.08 0.327751Z' fill='%23000'/%3E%3C/svg%3E");
	-webkit-mask-repeat: repeat-x;
	mask-repeat: repeat-x;
	-webkit-mask-size: 430px 8px;
	mask-size: 430px 8px;
}

.dat-footer__brand {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 16px;
	padding: 24px;
}

.dat-footer__logo {
	height: 60px;
	width: auto;
	transition: filter var(--wp--custom--motion--duration);
}

body[data-theme="dark"] .dat-footer__logo {
	filter: brightness(0) invert(1);
}

.dat-footer__baseline {
	font-size: 13.5px;
	line-height: 1.6;
	color: var(--wp--custom--color--ink-muted);
	margin: 0;
	max-width: 200px;
}

.dat-footer__nav {
	display: flex;
	gap: 40px;
	flex-wrap: wrap;
}

.dat-footer__col {
	display: flex;
	flex-direction: column;
	gap: 9px;
	font-size: 13.5px;
	color: var(--wp--custom--color--ink-muted);
	padding: 24px;
}

.dat-footer__title {
	font-size: 11px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--wp--custom--color--ink-faint);
	margin-bottom: 4px;
}

.dat-footer__col a {
	color: var(--wp--custom--color--ink-muted);
	transition: all var(--wp--custom--motion--duration);
}

.dat-footer__col a:hover,
.dat-footer__col a:focus-visible {
	color: var(--wp--custom--color--ink);
}

.dat-footer__copyright {
	font-size: 12.5px;
	color: var(--wp--custom--color--ink-faint);
	padding: 24px;
}

@media (max-width: 767px) {
	.dat-footer__inner {
		flex-direction: column;
		align-items: flex-start;
		gap: 28px;
	}

	.dat-footer__brand {
		width: 100%;
		align-items: center;
	}

	.dat-footer__baseline {
		text-align: center;
	}

	.dat-footer__nav {
		width: 100%;
		justify-content: center;
	}

	.dat-footer__col {
		align-items: center;
		padding-top: 0;
		padding-bottom: 0;
		margin: 8px 0;
	}

	.dat-footer__copyright {
		width: 100%;
		text-align: center;
	}
}

/* ------------------------------------------------------------------
   10. SECTIONS DE L'ACCUEIL — transposées de maquettes/responsive/accueil.html
   ------------------------------------------------------------------ */

/* Bouton secondaire en HTML libre (hero, encart duo) */
.a23-btn-outline {
	display: inline-block;
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
	text-decoration: none;
	background: transparent;
	border: 1.5px solid var(--wp--custom--color--ink);
	color: var(--wp--custom--color--ink);
	padding: 11.5px 24.5px;
	border-radius: var(--wp--custom--radius--pill);
	white-space: nowrap;
	transition:
		background-color var(--wp--custom--motion--duration),
		color var(--wp--custom--motion--duration),
		transform 0.3s var(--wp--custom--motion--bounce);
}

.a23-btn-outline:hover {
	background: var(--wp--custom--color--ink);
	color: var(--wp--custom--color--surface);
}

.a23-btn-outline:active {
	transform: scale(0.9);
}

/* Note des zones d'illustration à remplacer */
.a23-placeholder-note {
	font-family: monospace;
	font-size: 12px;
	color: #B07A55;
	text-align: center;
	padding: 0 16px;
}

/* En-tête de section : titre à gauche, lien d'action à droite */
.a23-section-head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 16px;
	margin-bottom: var(--wp--preset--spacing--40);
}

.a23-section-head h2 {
	margin: 0;
}

.a23-section-head__link {
	font-size: 13px;
	font-weight: 600;
	color: var(--wp--custom--color--accent);
	white-space: nowrap;
}

.a23-section-head__link--icon {
	display: inline-flex;
	align-items: center;
	gap: 8px;
}

/* HERO : texte à gauche, illustration bord à bord à droite */
.a23-hero {
	width: 100%;
	background: var(--wp--custom--color--hero);
	display: grid;
	grid-template-columns: 1fr 1.1fr;
	align-items: center;
}

.a23-hero__copy {
	padding: 72px 56px 72px 72px;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--wp--preset--spacing--40);
}

.a23-hero__eyebrow {
	font-size: var(--wp--preset--font-size--x-small);
	font-weight: 500;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--wp--custom--color--accent);
}

.a23-hero__title {
	font-family: var(--wp--preset--font-family--cardo);
	font-weight: 700;
	font-size: var(--wp--preset--font-size--huge);
	line-height: 1.15;
	letter-spacing: -0.015em;
	color: var(--wp--custom--color--ink);
	margin: 0;
	max-width: 560px;
}

.a23-hero__text {
	font-size: 17px;
	line-height: 1.8;
	color: var(--wp--custom--color--ink-soft);
	margin: 0;
	max-width: 480px;
}

.a23-hero__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 14px;
	margin-top: 8px;
}

.a23-hero__art {
	height: 100%;
	min-height: 520px;
	background: var(--wp--custom--placeholder--peche);
	border-left: 1px solid var(--wp--custom--color--border);
	display: flex;
	align-items: center;
	justify-content: center;
}

/* Méta de carte : « catégorie · date » en vert accent */
.a23-card-meta {
	font-size: 11.5px;
	font-weight: 600;
	color: var(--wp--custom--color--accent);
	margin: 0;
}

.a23-card-title,
.a23-card-title a {
	font-family: var(--wp--preset--font-family--cardo);
	font-weight: 700;
	font-size: 20px;
	line-height: 1.35;
	color: var(--wp--custom--color--ink);
}

/* Cartes catégories « Explorer par thème » */
.a23-catgrid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 22px;
}

.a23-catcard {
	display: flex;
	flex-direction: column;
	gap: 8px;
	text-decoration: transparent;
	border-radius: var(--wp--custom--radius--panel);
	padding: var(--wp--custom--spacing--panel);
	transition: transform 0.3s var(--wp--custom--motion--ease);
}

.a23-catcard:hover,
.a23-catcard:focus-visible {
transform: translateY(-4px);
}

.a23-catcard__name {
	font-family: var(--wp--preset--font-family--cardo);
	font-weight: 700;
	font-size: 20px;
	color: var(--wp--custom--color--ink);
}

.a23-catcard__desc {
	font-size: 13.5px;
	line-height: 1.6;
	color: var(--wp--custom--color--ink-muted);
}

.a23-catcard__count {
	font-size: var(--wp--preset--font-size--x-small);
	font-weight: 600;
}

/* En sombre, les fonds pastel clairs deviendraient criards :
   les cartes catégories reprennent le fond « carte » */
body[data-theme="dark"] .a23-catcard {
	background: var(--wp--custom--color--card) !important;
}

body[data-theme="dark"] .a23-catcard__name {
	color: var(--wp--custom--color--ink);
}

/* Encart duo « Nous, c'est Camille & Thomas » */
.a23-duo {
	background: var(--wp--custom--color--card);
	border: 1px solid var(--wp--custom--color--border);
	border-radius: var(--wp--custom--radius--panel);
	padding: 44px 48px;
	display: grid;
	grid-template-columns: auto 1fr auto;
	gap: 32px;
	align-items: center;
}

.a23-duo__avatars {
	display: flex;
}

.a23-duo__avatar {
	width: 72px;
	height: 72px;
	border-radius: var(--wp--custom--radius--pill);
	display: flex;
	align-items: center;
	justify-content: center;
	font-family: var(--wp--preset--font-family--cardo);
	font-weight: 700;
	font-size: 22px;
	border: 3px solid var(--wp--custom--color--card);
}

.a23-duo__avatar--c {
	background: var(--wp--preset--color--miel);
	color: #5A4310;
}

.a23-duo__avatar--t {
	background: var(--wp--preset--color--sauge);
	color: #1E4A2E;
	margin-left: -16px;
}

.a23-duo__title {
	font-family: var(--wp--preset--font-family--cardo);
	font-weight: 700;
	font-size: 21px;
	line-height: 1.35;
	color: var(--wp--custom--color--ink);
	margin-bottom: 8px;
}

.a23-duo__text {
	font-size: 14.5px;
	line-height: 1.65;
	color: var(--wp--custom--color--ink-muted);
	margin: 0;
	max-width: 560px;
}

/* Grille Instagram */
.a23-ig {
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	gap: 14px;
}

.a23-ig__tile {
	display: block;
	aspect-ratio: 1;
	border-radius: var(--wp--custom--radius--card);
	border: 1px solid var(--wp--custom--color--border);
	text-decoration: none;
}

.a23-ig__caption {
	font-size: 13px;
	color: var(--wp--custom--color--ink-faint);
	margin: 14px 0 0;
	text-align: center;
}

/* Ornement de fin de page */
.a23-ornament {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 18px;
	width: 100%;
	color: var(--wp--custom--color--accent);
	padding: var(--wp--preset--spacing--60) 0 var(--wp--preset--spacing--50);
}

.a23-ornament__line {
	width: 64px;
	height: 1px;
	background: var(--wp--custom--color--border-strong);
}

/* Newsletter : bandeau forêt, blobs organiques animés, formulaire en ligne */
.a23-nl {
	background: var(--wp--custom--color--newsletter-bg);
	padding: 64px;
	text-align: center;
	width: 100%;
	position: relative;
	overflow: hidden;
}

.a23-nl__blob {
	position: absolute;
	pointer-events: none;
}

.a23-nl__blob--a {
	left: -60px;
	top: -70px;
	width: 280px;
	height: 280px;
	opacity: 0.22;
	animation: a23-nl-drift-a 22s ease-in-out infinite alternate;
}

.a23-nl__blob--b {
	right: -70px;
	bottom: -90px;
	width: 320px;
	height: 320px;
	opacity: 0.16;
	animation: a23-nl-drift-b 26s ease-in-out infinite alternate;
}

@keyframes a23-nl-drift-a {
	0% { transform: translate(0, 0) rotate(0deg) scale(1); }
	50% { transform: translate(14px, 10px) rotate(8deg) scale(1.06); }
	100% { transform: translate(-8px, 6px) rotate(-6deg) scale(0.97); }
}

@keyframes a23-nl-drift-b {
	0% { transform: translate(0, 0) rotate(0deg) scale(1); }
	50% { transform: translate(-16px, -10px) rotate(-9deg) scale(1.05); }
	100% { transform: translate(10px, -6px) rotate(7deg) scale(0.96); }
}

.a23-nl__title {
	position: relative;
	font-family: var(--wp--preset--font-family--cardo);
	font-weight: 700;
	font-size: 32px;
	line-height: 1.15;
	color: var(--wp--custom--color--button-text);
	margin: 0 0 12px;
}

.a23-nl__text {
	position: relative;
	font-size: 15px;
	line-height: 1.6;
	color: var(--wp--custom--color--newsletter-text);
	margin: 0 auto 28px;
	max-width: 460px;
}

.a23-nl__form {
	position: relative;
	display: flex;
	gap: 12px;
	justify-content: center;
	align-items: center;
	max-width: 420px;
	margin: 0 auto;
}

.a23-nl__input {
	flex: 1;
	min-width: 0;
	font-family: inherit;
	font-size: 15px;
	color: var(--wp--custom--color--ink);
	padding: 13px 18px;
	border-radius: var(--wp--custom--radius--pill);
	border: none;
	background: var(--wp--custom--color--button-text);
	outline: none;
}

body[data-theme="dark"] .a23-nl__input {
	color: #0F351E;
}

.a23-nl__input::placeholder {
	color: #8A9385;
}

.a23-nl__input:focus {
	box-shadow: 0 0 0 3px var(--wp--custom--color--focus-ring);
}

.a23-nl__btn {
	font-family: inherit;
	cursor: pointer;
	border: none;
	background: var(--wp--custom--color--action);
	color: #FFFFFF;
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
	padding: 13px 24px;
	border-radius: var(--wp--custom--radius--pill);
	white-space: nowrap;
}

.a23-nl__btn:hover {
	background: var(--wp--preset--color--sauge);
	color: #0F351E;
}

/* ---- Responsive des sections d'accueil (breakpoints des maquettes) ---- */
@media (max-width: 1023px) {
	.a23-catgrid {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 767px) {
	.mob-center,
	.a23-section-head h2 {
		text-align: center;
	}

	.a23-section-head {
		flex-direction: column;
		align-items: center;
		gap: 8px;
	}

	.a23-hero {
		grid-template-columns: 1fr;
	}

	.a23-hero__copy {
		padding: 48px 24px;
		align-items: center;
		text-align: center;
	}

	.a23-hero__actions {
		justify-content: center;
	}

	.a23-hero__art {
		min-height: 300px;
		border-left: none;
		border-top: 1px solid var(--wp--custom--color--border);
	}

	.a23-catgrid {
		grid-template-columns: 1fr;
	}

	.a23-duo {
		grid-template-columns: 1fr;
		justify-items: center;
		text-align: center;
		padding: 32px 24px;
	}

	/* Les tuiles Instagram défilent horizontalement */
	.a23-ig {
		display: flex;
		overflow-x: auto;
		scroll-snap-type: x mandatory;
		padding-bottom: 8px;
	}

	.a23-ig__tile {
		flex: 0 0 38%;
		scroll-snap-align: start;
	}

	.a23-nl {
		padding: 56px 24px;
	}

	.a23-nl__title {
		font-size: 26px;
	}

	.a23-nl__text {
		font-size: 14.5px;
		margin-bottom: 24px;
	}

	.a23-nl__form {
		flex-direction: column;
		align-items: stretch;
		gap: 16px;
		max-width: none;
		width: 100%;
	}

	.a23-nl__input,
	.a23-nl__btn {
		width: 100%;
	}
}

/* ------------------------------------------------------------------
   11. PAGE BLOG — transposée de maquettes/responsive/blog.html
   ------------------------------------------------------------------ */

/* Bandeau : titre, compteur, filtres (padding bas généreux : l'article
   à la une remonte dessus de 24px) */
.a23-blog-head {
	width: 100%;
	background: var(--wp--custom--color--hero);
	text-align: center;
	padding: 56px 56px 80px;
}

.a23-blog-head__title {
	font-family: var(--wp--preset--font-family--cardo);
	font-weight: 700;
	font-size: var(--wp--preset--font-size--xx-large);
	line-height: 1.15;
	letter-spacing: -0.015em;
	color: var(--wp--custom--color--ink);
	margin: 0 0 16px;
}

.a23-blog-head__lead {
	font-size: 15px;
	color: var(--wp--custom--color--ink-muted);
	margin: 0 0 28px;
}

.a23-blog-head__filters {
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	gap: 8px;
}

/* Tag pilule canonique — 12.5px, taille unique du design system */
.a23-tag {
	display: inline-block;
	font-size: 12.5px;
	color: var(--wp--custom--color--ink-soft);
	text-decoration: none;
	background: var(--wp--custom--color--surface-alt);
	border: 1px solid var(--wp--custom--color--border);
	padding: 6px 13px;
	border-radius: var(--wp--custom--radius--pill);
	transition:
		border-color var(--wp--custom--motion--duration),
		color var(--wp--custom--motion--duration),
		background-color var(--wp--custom--motion--duration);
}

.a23-tag:hover {
	border-color: var(--wp--custom--color--action);
	color: var(--wp--custom--color--accent);
}

.a23-tag--active {
	font-weight: 600;
	color: var(--wp--custom--color--button-text);
	background: var(--wp--custom--color--button-bg);
	border-color: var(--wp--custom--color--button-bg);
}

.a23-tag--active:hover {
	color: var(--wp--custom--color--button-text);
	border-color: var(--wp--custom--color--button-bg);
}

/* Article à la une : grande carte horizontale qui remonte sur le bandeau */
.a23-featured-wrap {
	max-width: 1320px;
	width: 100%;
	margin: 0 auto;
	margin-block-start: -24px !important;
	padding: 0 20px;
}

/* Pages 2+ du blog : l'article à la une disparaît (garde is_paged), on
   resserre l'espace bandeau → grille pour retrouver le rythme de la page 1. */
body.blog.paged main {
	padding-top: var(--wp--preset--spacing--40) !important;
}

.a23-featured {
	display: flex;
	text-decoration: none;
	background: var(--wp--custom--color--card);
	border: 1px solid var(--wp--custom--color--border);
	border-radius: var(--wp--custom--radius--panel);
	overflow: hidden;
}

.a23-featured__frame {
	position: relative;
	overflow: hidden;
	aspect-ratio: 16/9;
	border-right: 1px solid var(--wp--custom--color--border);
	flex: 1.2;
	min-width: 0;
}

.a23-featured__img {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--wp--custom--placeholder--peche);
	transform: scale(1.03);
	transition: transform 0.4s var(--wp--custom--motion--ease);
}

.a23-featured:hover .a23-featured__img {
	transform: scale(1);
}

.a23-featured__img img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.a23-featured__body {
	flex: 1;
	min-width: 0;
	padding: 44px 48px;
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 16px;
}

.a23-featured__meta {
	display: flex;
	align-items: center;
	gap: 10px;
}

.a23-featured__badge {
	font-size: 10.5px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--wp--custom--color--accent);
	background: var(--wp--custom--color--tint-strong);
	padding: 3px 9px;
	border-radius: var(--wp--custom--radius--pill);
}

.a23-featured__cat {
	font-size: 11.5px;
	font-weight: 600;
	color: var(--wp--custom--color--accent);
}

.a23-featured__title {
	font-family: var(--wp--preset--font-family--cardo);
	font-weight: 700;
	font-size: var(--wp--preset--font-size--x-large);
	line-height: 1.25;
	color: var(--wp--custom--color--ink);
}

.a23-featured__excerpt {
	font-size: 14.5px;
	line-height: 1.65;
	color: var(--wp--custom--color--ink-muted);
	margin: 0;
}

.a23-featured__cta {
	font-size: 13px;
	font-weight: 600;
	color: var(--wp--custom--color--accent);
}

/* Newsletter inline : bandeau compact vert forêt au fil de la grille */
.a23-nl-inline {
	background: var(--wp--custom--color--newsletter-bg);
	border-radius: var(--wp--custom--radius--band);
	padding: 34px 40px;
	margin-top: 48px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 28px;
	flex-wrap: wrap;
}

@media (max-width: 1024px) {
	.a23-nl-inline {
		flex-direction: column;
		align-items: flex-start;
	}
}

.a23-nl-inline__eyebrow {
	font-size: var(--wp--preset--font-size--x-small);
	font-weight: 500;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: #7FCB9F;
	margin-bottom: 6px;
}

.a23-nl-inline__title {
	font-family: var(--wp--preset--font-family--cardo);
	font-weight: 700;
	font-size: 24px;
	color: var(--wp--custom--color--button-text);
}

.a23-nl-inline__fields {
	display: flex;
	gap: 16px;
	flex: 1;
	min-width: 320px;
	max-width: 440px;
}

@media (max-width: 1024px) {
	.a23-nl-inline__fields {
		width: 100%;
		min-width: none;
		max-width: none;
	}
}

.a23-nl-inline__fields input {
	flex: 1;
	min-width: 0;
	font-family: inherit;
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--custom--color--ink);
	padding: 12px 16px;
	border-radius: var(--wp--custom--radius--pill);
	border: none;
	background: var(--wp--custom--color--button-text);
	outline: none;
}

body[data-theme="dark"] .a23-nl-inline__fields input {
	color: #0F351E;
}

.a23-nl-inline__fields input:focus {
	box-shadow: 0 0 0 3px var(--wp--custom--color--focus-ring);
}

.a23-nl-inline__fields button {
	font-family: inherit;
	cursor: pointer;
	border: none;
	background: var(--wp--custom--color--action);
	color: #FFFFFF;
	font-size: 13.5px;
	font-weight: 600;
	padding: 12px 22px;
	border-radius: var(--wp--custom--radius--pill);
	white-space: nowrap;
}

.a23-nl-inline__fields button:hover {
	background: var(--wp--preset--color--sauge);
	color: #0F351E;
}

/* Responsive de la page blog (breakpoints des maquettes) */
@media (max-width: 767px) {
	.a23-blog-head {
		padding: 40px 20px 64px;
	}

	.a23-blog-head__title {
		font-size: 36px;
		line-height: 1.35;
	}

	.a23-featured {
		flex-direction: column;
	}

	.a23-featured__frame {
		border-right: none;
		border-bottom: 1px solid var(--wp--custom--color--border);
	}

	.a23-featured__body {
		padding: 28px 24px;
	}

	.a23-nl-inline__fields {
		min-width: 0;
		width: 100%;
		max-width: none;
	}
}

/* ------------------------------------------------------------------
   12. PAGE ARTICLE — transposée de maquettes/responsive/article.html
   Hero split (fil d'Ariane / titre / méta + image), corps 640px avec
   aside sticky (partage vertical + sommaire), encadré à retenir,
   bio compacte, navigation précédent/suivant, articles associés.
   ------------------------------------------------------------------ */

/* En-tête d'article : fond crème, contenu calé à droite de la
   colonne gauche, image à droite (376px) */
.a23-art-head {
	width: 100%;
	background: var(--wp--custom--color--hero);
}

.a23-art-head__row {
	display: flex;
	align-items: center;
	width: 100%;
}

.a23-art-head__content {
	flex: 1 1 50%;
	min-width: 0;
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	padding: 40px 56px;
}

.a23-art-head__content > * {
	width: 100%;
	max-width: 640px;
}

.a23-art-head__crumb {
	font-size: 13px;
	color: var(--wp--custom--color--ink-faint);
	margin-bottom: 20px;
}

.a23-art-head__crumb a {
	color: var(--wp--custom--color--ink-faint);
	text-decoration: transparent;
}

.a23-art-head__crumb a:hover,
.a23-art-head__crumb a:focus-visible {
	color: var(--wp--custom--color--ink);
	transition: all var(--wp--custom--motion--duration);
}

.a23-art-head__crumb span {
	margin: 0 8px 0 4px;
}

.a23-art-head__crumb a.a23-art-head__crumb-cat {
	color: var(--wp--custom--color--accent);
	font-weight: 600;
}

.a23-art-head__title {
	font-family: var(--wp--preset--font-family--cardo);
	font-weight: 700;
	font-size: var(--wp--preset--font-size--xx-large);
	line-height: 1.15;
	letter-spacing: -0.015em;
	color: var(--wp--custom--color--ink);
	margin: 0 0 24px;
}

.a23-art-head__meta {
	display: flex;
	align-items: center;
	gap: 12px;
}

.a23-art-head__avatar {
	width: 34px;
	height: 34px;
	flex: none;
	border-radius: var(--wp--custom--radius--pill);
	object-fit: cover;
}

.a23-art-head__byline {
	font-size: 13.5px;
	color: var(--wp--custom--color--ink-muted);
}

.a23-art-head__byline span {
	color: var(--wp--custom--color--ink);
	font-weight: 600;
}

.a23-art-head__media {
	flex: 1 1 50%;
	min-width: 0;
	height: 376px;
	display: flex;
	align-items: center;
	justify-content: center;
	border: 1px solid var(--wp--custom--color--border);
	background: var(--wp--custom--placeholder--peche);
	overflow: hidden;
}

.a23-art-head__media img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Corps : colonne de lecture 640px + aside 320px.
   align-items:stretch (défaut) : l'aside s'étire sur la hauteur du
   contenu, ce qui laisse le sommaire collant rester épinglé pendant
   toute la lecture. */
main.a23-article {
	display: flex;
	gap: 56px;
	width: 100%;
	max-width: 1330px;
	margin-left: auto;
	margin-right: auto;
	padding-top: 48px;
}

main.a23-article > * {
	margin-block-start: 0;
}

.a23-article__col {
	flex: 1;
	min-width: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	padding-left: 20px;
	padding-right: 20px;
}

.a23-article__col > * {
	width: 100%;
	max-width: 640px;
	margin-block-start: 0;
}

/* prose : corps 17px/1.8, rythme de la maquette */
.a23-article .wp-block-post-content {
	font-size: 17px;
	line-height: 1.8;
	color: var(--wp--custom--color--ink-soft);
}

.a23-article .wp-block-post-content > h2 {
	margin-block-start: 32px;
}

.a23-article .wp-block-post-content > h2 + * {
	margin-block-start: 20px;
}

.a23-article .wp-block-post-content > h2:first-child {
	margin-block-start: 0;
}

.a23-article .wp-block-post-content > .wp-block-quote,
.a23-article .wp-block-post-content > .wp-block-image,
.a23-article .wp-block-post-content > .wp-block-gallery,
.a23-article .wp-block-post-content > .a23-callout,
.a23-article .wp-block-post-content > .wp-block-quote + *,
.a23-article .wp-block-post-content > .wp-block-image + *,
.a23-article .wp-block-post-content > .wp-block-gallery + *,
.a23-article .wp-block-post-content > .a23-callout + * {
	margin-block-start: 36px;
}

.a23-article .wp-block-post-content .wp-block-image img {
	width: 100%;
	height: auto;
	border-radius: var(--wp--custom--radius--panel);
	border: 1px solid var(--wp--custom--color--border);
}

.a23-article .wp-block-post-content figcaption {
	font-size: 13.5px;
	color: var(--wp--custom--color--ink-faint);
	text-align: center;
	margin-top: 12px;
	margin-bottom: 0;
}

/* étiquettes puis bio en fin de colonne */
.a23-article__tags.wp-block-post-terms {
	margin-block-start: 36px;
}

.a23-article__col .a23-bio {
	margin-block-start: 40px;
}

/* Encadré « à retenir » : panneau teinté, surtitre, liste à tirets */
.a23-callout {
	background: var(--wp--custom--color--tint);
	border-radius: var(--wp--custom--radius--panel);
	padding: 36px 40px;
}

.a23-callout__eyebrow {
	font-size: 12px;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--wp--custom--color--accent);
	margin: 0;
}

.a23-callout .a23-callout__list {
	list-style: none;
	margin: 16px 0 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 14px;
}

.a23-callout__list li {
	position: relative;
	padding-left: 26px;
	font-size: 15.5px;
	line-height: 1.5;
	color: var(--wp--custom--color--ink);
	margin: 0;
}

.a23-callout__list li::before {
	content: "—";
	position: absolute;
	left: 0;
	color: var(--wp--custom--color--accent);
	font-weight: 700;
}

/* Bio compacte des auteurs */
.a23-bio {
	background: var(--wp--custom--color--card);
	border: 1px solid var(--wp--custom--color--border);
	border-radius: var(--wp--custom--radius--panel);
	padding: 28px;
	display: flex;
	align-items: flex-start;
	gap: 18px;
}

.a23-bio__avatar {
	width: 48px;
	height: 48px;
	flex: none;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: var(--wp--custom--radius--pill);
	background: var(--wp--preset--color--abricot);
	color: #5A3320;
	font-family: var(--wp--preset--font-family--cardo);
	font-weight: 700;
	font-size: 16px;
}

.a23-bio__name {
	font-family: var(--wp--preset--font-family--cardo);
	font-weight: 700;
	font-size: 17px;
	color: var(--wp--custom--color--ink);
	margin-bottom: 6px;
}

.a23-bio__text {
	font-size: 14px;
	line-height: 1.6;
	color: var(--wp--custom--color--ink-muted);
	margin: 0;
}

/* Aside : partage vertical + sommaire collant (desktop uniquement) */
.a23-art-aside {
	width: 320px;
	flex: none;
	display: flex;
	flex-direction: column;
	gap: 40px;
	padding-left: 20px;
	padding-right: 20px;
}

.a23-art-aside__label {
	font-size: 12px;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--wp--custom--color--ink-faint);
	margin-bottom: 14px;
}

.a23-toc {
	position: sticky;
	top: 24px;
}

.a23-toc .a23-art-aside__label {
	margin-bottom: 18px;
}

.a23-toc__list {
	display: flex;
	flex-direction: column;
	gap: 14px;
}

.a23-toc__link {
	display: flex;
	align-items: center;
	gap: 10px;
	font-size: 14px;
	color: var(--wp--custom--color--ink-faint);
	text-decoration: none;
	transition: color var(--wp--custom--motion--duration);
}

.a23-toc__link::before {
	content: "";
	width: 8px;
	height: 8px;
	flex: none;
	border-radius: var(--wp--custom--radius--pill);
	border: 1px solid var(--wp--custom--color--border-strong);
	transition:
		background-color var(--wp--custom--motion--duration),
		border-color var(--wp--custom--motion--duration);
}

.a23-toc__link:hover {
	color: var(--wp--custom--color--accent);
}

.a23-toc__link.is-active {
	color: var(--wp--custom--color--accent);
	font-weight: 600;
}

.a23-toc__link.is-active::before {
	background: var(--wp--custom--color--action);
	border-color: var(--wp--custom--color--action);
}

/* Navigation article précédent / suivant */
.a23-artnav {
	width: 100%;
	margin-top: 64px;
	border-top: 1px solid var(--wp--custom--color--border);
	border-bottom: 1px solid var(--wp--custom--color--border);
	display: flex;
	justify-content: center;
}

.a23-artnav__inner {
	width: 100%;
	max-width: 1024px;
	display: flex;
	justify-content: space-between;
	align-items: stretch;
}

.a23-artnav__link {
	text-decoration: none;
	flex: 50% 0 0;
	padding: 40px 20px;
	align-content: center;
}

.a23-artnav__link--next {
	text-align: right;
}

.a23-artnav__label {
	font-size: 12px;
	font-weight: 500;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--wp--custom--color--ink-faint);
	margin-bottom: 8px;
}

.a23-artnav__title {
	font-family: var(--wp--preset--font-family--cardo);
	font-weight: 700;
	font-size: 20px;
	line-height: 1.35;
	color: var(--wp--custom--color--ink);
	transition: all var(--wp--custom--motion--duration);
}

.a23-artnav__link:hover .a23-artnav__title,
.a23-artnav__link:focus-visible .a23-artnav__title {
	color: var(--wp--custom--color--accent);
}

/* Composant réutilisable : grille de cartes d'articles compactes.
   Servi sous les articles (« Articles associés ») et disponible comme
   pattern deux-a-trois/cartes-articles pour d'autres pages. Le markup
   d'une carte est produit par deux_a_trois_article_card(). */
.a23-cards {
	display: grid;
	/* auto-fill + min 280px : le nombre de colonnes se réduit tout seul
	   quand la largeur diminue (jusqu'à 1 colonne), sans media query.
	   min(280px, 100%) évite tout débordement sous 280px. */
	grid-template-columns: repeat(auto-fill, minmax(min(304px, 100%), 1fr));
	gap: 28px 22px;
	width: 100%;
}

.a23-card {
	display: block;
	min-width: 0;
	text-decoration: none;
	transition: transform 0.3s var(--wp--custom--motion--ease);
}

.a23-card:hover {
	transform: translateY(-4px);
}

.a23-card__frame {
	height: 200px;
	border-radius: var(--wp--custom--radius--card);
	overflow: hidden;
	margin-bottom: 14px;
}

.a23-card__frame img,
.a23-card__ph {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.a23-card__frame img {
	transform: scale(1.03);
	transition: transform 0.4s var(--wp--custom--motion--ease);
}

.a23-card:hover .a23-card__frame img {
	transform: scale(1);
}

.a23-card .a23-card-meta {
	margin-bottom: 6px;
}

/* Variante avec extrait sous le titre (blog, catégories, recherche) */
.a23-card__excerpt {
	font-size: 13.5px;
	line-height: 1.6;
	color: var(--wp--custom--color--ink-muted);
	margin: 4px 0 0;
}

/* Pagination rendue par the_posts_pagination() — mêmes cercles que le
   bloc natif (voir .wp-block-query-pagination-*) */
.a23-pagination {
	margin-top: var(--wp--preset--spacing--60);
}

.a23-pagination .nav-links {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-wrap: wrap;
	gap: 8px;
}

.a23-pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 38px;
	height: 38px;
	font-size: 13.5px;
	border: 1px solid var(--wp--custom--color--border);
	border-radius: var(--wp--custom--radius--pill);
	padding: 0 8px;
	text-decoration: none;
	transition:
		border-color var(--wp--custom--motion--duration),
		color var(--wp--custom--motion--duration);
}

.a23-pagination .page-numbers:hover {
	border-color: var(--wp--custom--color--action);
	color: var(--wp--custom--color--accent);
}

.a23-pagination .page-numbers.current {
	background: var(--wp--custom--color--button-bg);
	color: var(--wp--custom--color--button-text);
	border-color: var(--wp--custom--color--button-bg);
}

.a23-pagination .page-numbers.dots {
	border: none;
	color: var(--wp--custom--color--ink-faint);
}

.a23-pagination .prev.page-numbers,
.a23-pagination .next.page-numbers {
	min-width: 0;
	padding: 0 18px;
}

/* Section « Articles associés » : enveloppe centrée autour de la grille */
.a23-rel {
	width: 100%;
	padding: 64px 20px;
	display: flex;
	flex-direction: column;
	align-items: center;
}

.a23-rel__title {
	text-align: center;
	margin: 0 0 24px;
}

.a23-rel .a23-cards {
	max-width: 1024px;
}

/* Responsive article — tablette (768-1023) : hero empilé centré,
   aside masquée, colonne pleine largeur */
@media (max-width: 1023px) {
	.a23-art-aside {
		display: none;
	}

	.a23-art-head__row {
		flex-direction: column;
		gap: 36px;
	}

	.a23-art-head__content {
		width: 100%;
		align-items: center;
		text-align: center;
		padding: 40px 32px 0;
	}

	.a23-art-head__meta {
		justify-content: center;
	}

	.a23-art-head__byline {
		text-align: left;
	}

	.a23-art-head__media {
		width: 100%;
		flex: none;
		height: 320px;
	}

	main.a23-article {
		flex-direction: column;
		gap: 36px;
	}

	.a23-article__col {
		width: 100%;
	}
}

/* Responsive article — mobile (<768) */
@media (max-width: 767px) {
	.a23-art-head__row {
		gap: 0;
	}

	.a23-art-head__content {
		padding: 40px 20px;
	}

	.a23-art-head__meta {
		flex-direction: column;
	}

	.a23-art-head__media {
		height: 220px;
	}

	main.a23-article {
		padding-top: 40px;
	}

	.a23-share {
		flex-direction: column;
		gap: 14px;
	}

	.a23-comments {
		padding: 40px 18px 64px;
	}

	.a23-comments .wp-block-comments-title {
		text-align: center;
	}

	.wp-block-comment-template li > ol {
		padding-left: 0;
	}

	.wp-block-post-comments-form {
		padding: 24px 20px;
	}

	.wp-block-post-comments-form .comment-form {
		grid-template-columns: 1fr;
	}

	.a23-callout {
		padding: 24px 20px;
	}

	.a23-bio {
		display: block;
		position: relative;
		padding-top: 44px;
	}

	.a23-bio__avatar {
		position: absolute;
		left: 28px;
		top: -24px;
	}

	.a23-artnav__title {
		display: none;
	}

	.a23-artnav__label {
		margin-bottom: 0;
	}
}

/* ------------------------------------------------------------------
   13. PAGE À PROPOS — transposée de maquettes/responsive/apropos.html
   Hero avatars chevauchés, portraits duo, citation, frise trois dates,
   valeurs, CTA et formulaire de contact révélé (assets/js/apropos.js).
   ------------------------------------------------------------------ */

.a23-about-hero {
	width: 100%;
	background: var(--wp--custom--color--hero);
	padding: 72px 56px;
	text-align: center;
}

.a23-about-hero__avatars {
	display: flex;
	justify-content: center;
	margin-bottom: 24px;
}

/* Réutilise les avatars du duo (miel/sauge), en plus grand et cerclés
   du fond crème du hero */
.a23-about-hero .a23-duo__avatar {
	width: 88px;
	height: 88px;
	font-size: 28px;
	border: 4px solid var(--wp--custom--color--hero);
}

.a23-about-hero .a23-duo__avatar--t {
	margin-left: -20px;
}

.a23-about-hero__title {
	font-family: var(--wp--preset--font-family--cardo);
	font-weight: 700;
	font-size: 44px;
	line-height: 1.15;
	letter-spacing: -0.015em;
	color: var(--wp--custom--color--ink);
	margin: 0 0 20px;
}

.a23-about-hero__lead {
	font-size: 17px;
	line-height: 1.8;
	color: var(--wp--custom--color--ink-soft);
	margin: 0 auto;
	max-width: 620px;
}

/* Enveloppe large commune (portraits, citation, valeurs) */
.a23-about-wrap {
	width: 100%;
	max-width: 1160px;
	margin: 0 auto;
}

/* Portraits du duo */
.a23-about-portraits {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 28px;
	padding: 72px 24px 0;
}

.a23-portrait {
	background: var(--wp--custom--color--card);
	border: 1px solid var(--wp--custom--color--border);
	border-radius: var(--wp--custom--radius--panel);
	overflow: hidden;
}

.a23-portrait__media {
	aspect-ratio: 16 / 9;
	border-bottom: 1px solid var(--wp--custom--color--border);
	display: flex;
	align-items: center;
	justify-content: center;
}

.a23-portrait__media--camille {
	background: repeating-linear-gradient(135deg, #FBEAD9, #FBEAD9 14px, #F6E0CB 14px, #F6E0CB 28px);
}

.a23-portrait__media--thomas {
	background: repeating-linear-gradient(115deg, #F6EFD8, #F6EFD8 14px, #EFE6C9 14px, #EFE6C9 28px);
}

.a23-portrait__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.a23-portrait__body {
	padding: 32px 36px;
}

.a23-portrait__name {
	font-family: var(--wp--preset--font-family--cardo);
	font-weight: 700;
	font-size: 24px;
	color: var(--wp--custom--color--ink);
	margin: 0 0 4px;
}

.a23-portrait__role {
	font-size: 12px;
	font-weight: 500;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--wp--custom--color--accent);
	margin-bottom: 14px;
}

.a23-portrait__text {
	font-size: 14.5px;
	line-height: 1.65;
	color: var(--wp--custom--color--ink-muted);
	margin: 0;
}

/* Citation centrale */
.a23-about-quote {
	padding: 64px 24px 0;
}

.a23-about-quote blockquote {
	font-family: var(--wp--preset--font-family--cardo);
	font-style: italic;
	font-size: 30px;
	line-height: 1.45;
	color: var(--wp--custom--color--accent);
	margin: 0 auto;
	padding: 0;
	border: none;
	text-align: center;
	max-width: 760px;
}

.a23-about-quote__cite {
	font-family: var(--wp--preset--font-family--cardo);
	font-style: italic;
	font-size: 16px;
	color: var(--wp--custom--color--ink-faint);
	text-align: center;
	margin: 18px 0 0;
}

/* Frise « Notre histoire, en trois dates » */
.a23-about-story {
	width: 100%;
	max-width: 760px;
	margin: 0 auto;
	padding: 64px 24px 0;
}

.a23-about-story__title {
	font-family: var(--wp--preset--font-family--cardo);
	font-weight: 700;
	font-size: 28px;
	line-height: 1.25;
	color: var(--wp--custom--color--ink);
	margin: 0 0 20px;
}

.a23-about-story__row {
	display: grid;
	grid-template-columns: 120px 1fr;
	gap: 24px;
	padding: 22px 0;
	border-bottom: 1px solid var(--wp--custom--color--border);
}

.a23-about-story__row:last-child {
	border-bottom: none;
}

.a23-about-story__date {
	font-family: var(--wp--preset--font-family--cardo);
	font-weight: 700;
	font-size: 21px;
	color: var(--wp--custom--color--accent);
}

.a23-about-story__text {
	font-size: 14.5px;
	line-height: 1.65;
	color: var(--wp--custom--color--ink-muted);
	margin: 0;
}

/* Trois valeurs */
.a23-about-values {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 22px;
	padding: 64px 24px 0;
}

.a23-value {
	border: 1px solid var(--wp--custom--color--border);
	border-radius: var(--wp--custom--radius--panel);
	padding: 30px 32px;
}

.a23-value--brume {
	background: var(--wp--custom--color--tint);
}

.a23-value--sable {
	background: var(--wp--custom--color--surface-alt);
}

.a23-value--peche {
	background: var(--wp--custom--color--peach);
}

.a23-value__title {
	font-family: var(--wp--preset--font-family--cardo);
	font-weight: 700;
	font-size: 20px;
	color: var(--wp--custom--color--ink);
	margin: 0 0 8px;
}

.a23-value__text {
	font-size: 13.5px;
	line-height: 1.6;
	color: var(--wp--custom--color--ink-muted);
	margin: 0;
}

/* Le fond pêche ne bascule pas en sombre : textes fixes, comme la
   maquette, pour garder le contraste */
.a23-value--peche .a23-value__title {
	color: #0F351E;
}

.a23-value--peche .a23-value__text {
	color: #5E6B5E;
}

/* CTA « Lire nos articles » / « Nous écrire » */
.a23-about-cta {
	display: flex;
	gap: 14px;
	justify-content: center;
	flex-wrap: wrap;
	padding: 64px 24px 40px;
}

.a23-about-cta__primary,
.a23-about-cta__outline {
	display: inline-block;
	font-size: 14px;
	font-weight: 600;
	text-decoration: none;
	border-radius: var(--wp--custom--radius--pill);
	cursor: pointer;
	transition:
		background-color var(--wp--custom--motion--duration),
		color var(--wp--custom--motion--duration),
		border-color var(--wp--custom--motion--duration),
		transform 0.3s var(--wp--custom--motion--bounce);
}

.a23-about-cta__primary:active,
.a23-about-cta__outline:active {
	transform: scale(0.9);
}

.a23-about-cta__primary {
	background: var(--wp--custom--color--button-bg);
	color: var(--wp--custom--color--button-text);
	border: none;
	padding: 13px 26px;
}

.a23-about-cta__primary:hover {
	background: var(--wp--custom--color--button-hover);
}

.a23-about-cta__outline {
	background: transparent;
	border: 1.5px solid var(--wp--custom--color--ink);
	color: var(--wp--custom--color--ink);
	padding: 12px 25px;
}

.a23-about-cta__outline:hover {
	background: var(--wp--custom--color--ink);
	color: var(--wp--custom--color--surface);
}

/* Formulaire de contact révélé au clic sur « Nous écrire ».
   Les champs héritent des styles globaux (§ 4) — décision
   d'uniformisation : pilules sur les champs courts, rayon carte sur la
   zone de texte. */
.a23-contact {
	width: 100%;
	max-width: 760px;
	margin: 0 auto;
	padding: 0 24px 72px;
}

.a23-contact--in {
	animation: a23CfIn 0.5s var(--wp--custom--motion--ease) both;
}

@keyframes a23CfIn {
	from {
		opacity: 0;
		transform: translateY(10px);
	}

	to {
		opacity: 1;
		transform: translateY(0);
	}
}

.a23-contact__card {
	background: var(--wp--custom--color--card);
	border: 1px solid var(--wp--custom--color--border);
	border-radius: var(--wp--custom--radius--panel);
	padding: 36px 40px;
}

.a23-contact__title {
	font-family: var(--wp--preset--font-family--cardo);
	font-weight: 700;
	font-size: 24px;
	line-height: 1.25;
	color: var(--wp--custom--color--ink);
	margin: 0 0 6px;
}

.a23-contact__lead {
	font-size: 14px;
	line-height: 1.6;
	color: var(--wp--custom--color--ink-muted);
	margin: 0 0 22px;
}

.a23-contact__row {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 14px;
}

/* Vaut pour le repli ET pour le rendu Contact Form 7 dans la carte */
.a23-contact__card input[type="text"],
.a23-contact__card input[type="email"],
.a23-contact__card textarea {
	width: 100%;
	margin-bottom: 14px;
}

.a23-contact__card textarea {
	margin-bottom: 18px;
}

.a23-contact__card .wpcf7 p {
	margin: 0;
}

.a23-contact__card input[type="submit"] {
	background: var(--wp--custom--color--button-bg);
	color: var(--wp--custom--color--button-text);
	border: none;
	border-radius: var(--wp--custom--radius--pill);
	font-size: 14px;
	font-weight: 600;
	padding: 13px 28px;
	cursor: pointer;
}

.a23-contact__card input[type="submit"]:hover {
	background: var(--wp--custom--color--button-hover);
}

.a23-contact__admin-note {
	font-size: 12.5px;
	line-height: 1.5;
	color: var(--wp--custom--color--cat-terracotta);
	background: var(--wp--custom--color--peach);
	border-radius: var(--wp--custom--radius--thumb);
	padding: 10px 14px;
	margin: 16px 0 0;
}

/* Retours de Contact Form 7 : on remplace l'encadré bordé par défaut par
   un panneau teinté arrondi avec pastille icône, calqué sur la bannière
   « Boutique en création » de la page Créations (.a23-crea-note__panel).
   Rien n'est affiché tant qu'aucun message n'est posé (:empty / init). */
.a23-contact__card .wpcf7-response-output {
	margin: 22px 0 0;
	border: 0;
	border-radius: var(--wp--custom--radius--panel);
	padding: 16px 20px;
	font-size: 14px;
	line-height: 1.55;
	display: flex;
	align-items: center;
	gap: 12px;
	color: var(--wp--custom--color--ink-soft);
}

.a23-contact__card .wpcf7-response-output:empty,
.a23-contact__card form.init .wpcf7-response-output {
	display: none;
}

.a23-contact__card .wpcf7-response-output::before {
	content: "";
	flex: none;
	width: 20px;
	height: 20px;
	background-repeat: no-repeat;
	background-position: center;
	background-size: contain;
}

/* Envoi réussi : brume + coche verte (comme l'icône de la bannière) */
.a23-contact__card form.sent .wpcf7-response-output {
	background: var(--wp--custom--color--tint);
}

.a23-contact__card form.sent .wpcf7-response-output::before {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%2320A060' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='m8 12 2.6 2.6L16 9'/%3E%3C/svg%3E");
}

/* Champs incomplets, envoi échoué ou spam : pêche + alerte terracotta */
.a23-contact__card form.invalid .wpcf7-response-output,
.a23-contact__card form.unaccepted .wpcf7-response-output,
.a23-contact__card form.payment-required .wpcf7-response-output,
.a23-contact__card form.spam .wpcf7-response-output,
.a23-contact__card form.failed .wpcf7-response-output,
.a23-contact__card form.aborted .wpcf7-response-output {
	background: var(--wp--custom--color--peach);
	color: var(--wp--custom--color--cat-terracotta);
}

.a23-contact__card form.invalid .wpcf7-response-output::before,
.a23-contact__card form.unaccepted .wpcf7-response-output::before,
.a23-contact__card form.payment-required .wpcf7-response-output::before,
.a23-contact__card form.spam .wpcf7-response-output::before,
.a23-contact__card form.failed .wpcf7-response-output::before,
.a23-contact__card form.aborted .wpcf7-response-output::before {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%239E5632' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 8v4.5'/%3E%3Cpath d='M12 16h.01'/%3E%3C/svg%3E");
}

/* Astuces de validation sous les champs, et champs en erreur */
.a23-contact__card .wpcf7-not-valid-tip {
	font-size: 12.5px;
	line-height: 1.5;
	color: var(--wp--custom--color--cat-terracotta);
	margin-top: 5px;
}

.a23-contact__card .wpcf7-form-control.wpcf7-not-valid {
	border-color: var(--wp--custom--color--cat-terracotta);
}

/* Indicateur d'envoi : discret, aligné au fil du bouton */
.a23-contact__card .wpcf7-spinner {
	margin: 0 0 0 12px;
}

/* Responsive À propos — mobile */
@media (max-width: 767px) {
	.a23-about-hero {
		padding: 56px 24px;
	}

	.a23-about-hero__title {
		font-size: 32px;
	}

	.a23-about-portraits {
		grid-template-columns: 1fr;
		padding-top: 48px;
	}

	.a23-portrait__body {
		padding: 26px 22px;
	}

	.a23-about-quote blockquote {
		font-size: 24px;
	}

	.a23-about-story__row {
		grid-template-columns: 1fr;
		gap: 4px;
	}

	.a23-about-values {
		grid-template-columns: 1fr;
	}

	.a23-contact__card {
		padding: 26px 22px;
	}

	.a23-contact__row {
		grid-template-columns: 1fr;
	}
}

/* ------------------------------------------------------------------
   14. PAGES LÉGALES — transposées de responsive/cgu.html,
   confidentialite.html et mentions.html : bandeau crème (titre +
   date de modification réelle), corps de lecture 720px en 15px/1.8.
   ------------------------------------------------------------------ */

.a23-legal-head {
	width: 100%;
	background: var(--wp--custom--color--hero);
	padding: 56px 24px;
	text-align: center;
}

.a23-legal-head__title {
	font-family: var(--wp--preset--font-family--cardo);
	font-weight: 700;
	font-size: 38px;
	line-height: 1.15;
	letter-spacing: -0.015em;
	color: var(--wp--custom--color--ink);
	margin: 0 0 10px;
}

.a23-legal-head__date {
	font-size: 13.5px;
	color: var(--wp--custom--color--ink-faint);
	margin: 0;
}

main.a23-legal {
	padding: 56px 0 72px;
}

.a23-legal .wp-block-post-content {
	font-size: 15px;
	line-height: 1.8;
	color: var(--wp--custom--color--ink-soft);
}

.a23-legal .wp-block-post-content h2 {
	font-family: var(--wp--preset--font-family--cardo);
	font-weight: 700;
	font-size: 22px;
	line-height: 1.3;
	color: var(--wp--custom--color--ink);
	margin: 0 0 14px;
}

.a23-legal .wp-block-post-content p {
	margin: 0 0 32px;
}

.a23-legal .wp-block-post-content p:last-child {
	margin-bottom: 0;
}

/* ------------------------------------------------------------------
   15. CRÉATIONS — transposées de maquettes/responsive/creations.html
   et fiche-produit.html : intro crème + note « boutique en création »,
   grille de cartes produit, réassurance, bandeau Etsy ; fiche produit
   (galerie + lightbox pilotées par creation.js, formats, personnalisation,
   commande Etsy), « Vous aimerez aussi », état « épuisée » avec
   formulaire d'alerte de retour.
   ------------------------------------------------------------------ */

/* Conteneur commun des sections (1160px, padding latéral maquette) */
.a23-crea-section {
	max-width: 1160px;
	width: 100%;
	margin: 0 auto;
	padding: 48px 24px 0;
}

.a23-crea-section--reassurance {
	padding-top: 64px;
}

.a23-crea-section--etsy {
	padding: 64px 24px 72px;
}

.a23-crea-section--liees {
	padding: 72px 24px;
}

/* Intro : bandeau crème centré */
.a23-crea-intro {
	width: 100%;
	background: var(--wp--custom--color--hero);
	text-align: center;
	padding: 64px 56px 80px;
}

.a23-crea-intro__eyebrow {
	font-size: 12px;
	font-weight: 500;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--wp--custom--color--accent);
	margin-bottom: 16px;
}

.a23-crea-intro__title {
	font-size: clamp(36px, 5vw, 44px);
	line-height: 1.15;
	margin: 0 0 20px;
}

.a23-crea-intro__lead {
	font-size: 17px;
	line-height: 1.8;
	color: var(--wp--custom--color--ink-soft);
	margin: 0 auto;
	max-width: 640px;
}

/* Note « boutique en création » : panneau brume qui chevauche l'intro */
.a23-crea-note {
	max-width: 1160px;
	width: 100%;
	margin: -24px auto 0;
	padding: 0 24px;
}

.a23-crea-note__panel {
	background: var(--wp--custom--color--tint);
	border-radius: var(--wp--custom--radius--panel);
	padding: 20px 28px;
	display: flex;
	align-items: center;
	gap: 16px;
}

.a23-crea-note__panel svg {
	flex: none;
}

.a23-crea-note__panel p {
	font-size: 14.5px;
	line-height: 1.6;
	color: var(--wp--custom--color--ink-soft);
	margin: 0;
}

.a23-crea-note__panel strong {
	color: var(--wp--custom--color--ink);
}

/* En-tête de la grille : titre + compteur de modèles */
.a23-crea-head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 16px;
	margin-bottom: var(--wp--preset--spacing--40);
}

.a23-crea-head h2 {
	margin: 0;
}

.a23-crea-head__count {
	font-size: 13px;
	color: var(--wp--custom--color--ink-faint);
}

/* Grille produits */
.a23-crea-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 28px;
}

/* Carte produit */
.a23-crea-card {
	display: flex;
	flex-direction: column;
	background: var(--wp--custom--color--card);
	border: 1px solid var(--wp--custom--color--border);
	border-radius: var(--wp--custom--radius--panel);
	overflow: hidden;
	transition: transform 0.3s var(--wp--custom--motion--ease);
}

.a23-crea-card:hover {
	transform: translateY(-4px);
}

.a23-crea-card__imglink {
	display: block;
	position: relative;
	text-decoration: none;
}

.a23-crea-card__frame {
	display: block;
	aspect-ratio: 1 / 1;
	max-height: 400px;
	width: 100%;
	overflow: hidden;
}

.a23-crea-card__frame img,
.a23-crea-card__ph {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.a23-crea-card__frame img {
	transform: scale(1.03);
	transition: transform 0.4s var(--wp--custom--motion--ease);
}

.a23-crea-card:hover .a23-crea-card__frame img {
	transform: scale(1);
}

/* Badge produit — pilule ; posée sur l'image dans les cartes */
.a23-crea-badge {
	display: inline-block;
	font-size: 10.5px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	padding: 3px 9px;
	border-radius: var(--wp--custom--radius--pill);
}

.a23-crea-card__imglink .a23-crea-badge,
.a23-crea-rel__frame .a23-crea-badge {
	position: absolute;
	top: 14px;
	left: 14px;
}

.a23-crea-badge--vert {
	color: var(--wp--custom--color--accent);
	background: var(--wp--custom--color--tint-strong);
}

.a23-crea-badge--ocre {
	color: var(--wp--custom--color--cat-ocre);
	background: var(--wp--custom--color--gold);
}

.a23-crea-badge--terracotta {
	color: var(--wp--custom--color--cat-terracotta);
	background: var(--wp--custom--color--peach);
}

.a23-crea-badge--etat {
	color: var(--wp--custom--color--ink-muted);
	background: var(--wp--custom--color--surface-alt);
	border: 1px solid var(--wp--custom--color--border);
}

/* Corps de carte */
.a23-crea-card__body {
	padding: 22px 24px 24px;
	flex: 1;
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.a23-crea-card__row {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 12px;
}

.a23-crea-card__title {
	font-family: var(--wp--preset--font-family--cardo);
	font-weight: 700;
	font-size: 20px;
	line-height: 1.35;
	color: var(--wp--custom--color--ink);
	text-decoration: none;
	transition: color var(--wp--custom--motion--duration);
}

.a23-crea-card__title:hover {
	color: var(--wp--custom--color--accent);
}

.a23-crea-card__price {
	font-size: 16px;
	font-weight: 700;
	color: var(--wp--custom--color--ink);
	white-space: nowrap;
}

.a23-crea-card__sub {
	font-size: 13px;
	color: var(--wp--custom--color--ink-faint);
}

.a23-crea-card__rating {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 12.5px;
	color: var(--wp--custom--color--ink-muted);
}

.a23-crea-card__stars,
.a23-fiche__stars {
	color: var(--wp--preset--color--miel);
	letter-spacing: 2px;
}

.a23-crea-card__cta {
	align-self: flex-start;
	margin-top: auto;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: 13.5px;
	font-weight: 600;
	text-decoration: none;
	color: var(--wp--custom--color--accent);
	transition: color var(--wp--custom--motion--duration);
}

.a23-crea-card__cta:hover {
	color: var(--wp--custom--color--action-text);
}

/* Réassurance : trois panneaux sable */
.a23-crea-trust {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 22px;
}

.a23-crea-trust__item {
	display: flex;
	align-items: flex-start;
	gap: 16px;
	background: var(--wp--custom--color--surface-alt);
	border: 1px solid var(--wp--custom--color--border);
	border-radius: var(--wp--custom--radius--panel);
	padding: 26px 28px;
}

.a23-crea-trust__item svg {
	flex: none;
	margin-top: 2px;
}

.a23-crea-trust__title {
	font-weight: 700;
	font-size: 14.5px;
	color: var(--wp--custom--color--ink);
	margin-bottom: 4px;
}

.a23-crea-trust__item p {
	font-size: 13.5px;
	line-height: 1.6;
	color: var(--wp--custom--color--ink-muted);
	margin: 0;
}

/* Bandeau final « Toute la boutique est sur Etsy » */
.a23-crea-band {
	background: var(--wp--custom--color--newsletter-bg);
	border-radius: var(--wp--custom--radius--band);
	padding: 48px 56px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 32px;
	flex-wrap: wrap;
}

.a23-crea-band__title {
	font-family: var(--wp--preset--font-family--cardo);
	font-weight: 700;
	font-size: 26px;
	color: var(--wp--custom--color--button-text);
	margin-bottom: 8px;
}

.a23-crea-band__text {
	font-size: 14.5px;
	line-height: 1.6;
	color: var(--wp--custom--color--newsletter-text);
	margin: 0;
	max-width: 520px;
}

.a23-crea-band__btn {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	font-size: 14px;
	font-weight: 600;
	text-decoration: none;
	background: var(--wp--custom--color--action);
	color: var(--wp--preset--color--blanc);
	padding: 14px 28px;
	border-radius: var(--wp--custom--radius--pill);
	white-space: nowrap;
	transition:
		background-color var(--wp--custom--motion--duration),
		color var(--wp--custom--motion--duration);
}

.a23-crea-band__btn:hover {
	background: var(--wp--preset--color--sauge);
	color: var(--wp--preset--color--foret);
}

/* Note visible des seuls admins (réglage manquant) */
.a23-crea-admin-note {
	margin: 10px 0 0;
	font-size: 12.5px;
	color: var(--wp--custom--color--cat-terracotta);
	text-align: center;
}

/* ---------------- Fiche produit ---------------- */

.a23-fiche {
	max-width: 1160px;
	width: 100%;
	margin: 0 auto;
	padding: 28px 24px 0;
}

.a23-fiche__crumb {
	font-size: 13px;
	color: var(--wp--custom--color--ink-faint);
	display: flex;
	gap: 8px;
	align-items: center;
	margin-bottom: 28px;
}

.a23-fiche__crumb a {
	color: var(--wp--custom--color--ink-muted);
	text-decoration: none;
	transition: color var(--wp--custom--motion--duration);
}

.a23-fiche__crumb a:hover {
	color: var(--wp--custom--color--accent);
}

.a23-fiche__crumb-current {
	color: var(--wp--custom--color--ink);
}

.a23-fiche__grid {
	display: grid;
	grid-template-columns: 1.05fr 1fr;
	gap: 52px;
	align-items: start;
}

/* Galerie : grande image (bouton lightbox) + vignettes */
.a23-fiche__gallery {
	display: flex;
	flex-direction: column;
	gap: 14px;
}

.a23-fiche__main {
	position: relative;
	display: block;
	width: 100%;
	aspect-ratio: 3 / 4;
	border-radius: var(--wp--custom--radius--panel);
	border: 1px solid var(--wp--custom--color--border);
	overflow: hidden;
	padding: 0;
	background: var(--wp--custom--color--surface-alt);
	cursor: zoom-in;
	transition: opacity 0.2s;
}

.a23-fiche__main img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.a23-fiche__main--ph {
	cursor: default;
}

.a23-fiche__thumbs {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 12px;
}

.a23-fiche__thumb {
	position: relative;
	aspect-ratio: 1;
	border-radius: var(--wp--custom--radius--thumb);
	border: 1px solid var(--wp--custom--color--border);
	overflow: hidden;
	padding: 0;
	background: var(--wp--custom--color--surface-alt);
	cursor: pointer;
}

.a23-fiche__thumb img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.a23-fiche__thumb.is-active {
	border: 2px solid var(--wp--custom--color--action);
}

.a23-fiche__thumb-more {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	background: rgba(15, 53, 30, 0.62);
	color: var(--wp--preset--color--ivoire);
	font-family: var(--wp--preset--font-family--cardo);
	font-weight: 700;
	font-size: 20px;
}

/* La grande image et les vignettes ne « rebondissent » pas au clic */
.a23-fiche__main:active,
.a23-fiche__thumb:active {
	transform: none;
}

/* Colonne infos */
.a23-fiche__info {
	display: flex;
	flex-direction: column;
	gap: 18px;
}

.a23-fiche__info > .a23-crea-badge {
	align-self: flex-start;
}

.a23-fiche__title {
	font-size: clamp(30px, 4.5vw, 38px);
	line-height: 1.15;
	margin: 0;
}

.a23-fiche__rating {
	display: flex;
	align-items: center;
	gap: 10px;
	font-size: 13px;
	color: var(--wp--custom--color--ink-muted);
}

.a23-fiche__stars {
	font-size: 15px;
}

.a23-fiche__priceline {
	display: flex;
	align-items: baseline;
	gap: 12px;
}

.a23-fiche__price {
	font-family: var(--wp--preset--font-family--cardo);
	font-weight: 700;
	font-size: 32px;
	color: var(--wp--custom--color--ink);
}

.a23-fiche__pricenote {
	font-size: 13px;
	color: var(--wp--custom--color--ink-faint);
}

.a23-fiche__desc {
	font-size: 15px;
	line-height: 1.75;
	color: var(--wp--custom--color--ink-soft);
}

.a23-fiche__desc p {
	margin: 0 0 12px;
}

.a23-fiche__desc p:last-child {
	margin-bottom: 0;
}

/* Formats en pilules (informative : le choix réel se fait sur Etsy) */
.a23-fiche__formats {
	margin-top: 8px;
}

.a23-fiche__label {
	font-size: 12px;
	font-weight: 500;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--wp--custom--color--ink-faint);
	margin-bottom: 10px;
}

.a23-fiche__pills {
	display: flex;
	gap: 8px;
	flex-wrap: wrap;
}

.a23-fiche__pill {
	font-size: 13px;
	color: var(--wp--custom--color--ink-soft);
	background: var(--wp--custom--color--surface-alt);
	border: 1px solid var(--wp--custom--color--border);
	padding: 9px 16px;
	border-radius: var(--wp--custom--radius--pill);
}

.a23-fiche__pill.is-active {
	font-weight: 600;
	color: var(--wp--custom--color--button-text);
	background: var(--wp--custom--color--button-bg);
	border-color: var(--wp--custom--color--button-bg);
}

/* Encart personnalisation (brume, crayon) */
.a23-fiche__perso {
	background: var(--wp--custom--color--tint);
	border-radius: var(--wp--custom--radius--card);
	padding: 16px 20px;
	display: flex;
	gap: 12px;
	align-items: flex-start;
}

.a23-fiche__perso svg {
	flex: none;
	margin-top: 1px;
}

.a23-fiche__perso p {
	font-size: 13.5px;
	line-height: 1.6;
	color: var(--wp--custom--color--ink-soft);
	margin: 0;
}

/* CTA « Commander sur Etsy » : bouton canonique en plus généreux */
.a23-fiche__cta {
	align-self: flex-start;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	font-size: 15px;
	padding: 16px 32px;
	margin-top: 8px;
	text-decoration: none;
}

/* Réassurance de la fiche */
.a23-fiche__trust {
	display: flex;
	flex-direction: column;
	gap: 8px;
	font-size: 13.5px;
	color: var(--wp--custom--color--ink-muted);
	border-top: 1px solid var(--wp--custom--color--border);
	padding-top: 18px;
}

.a23-fiche__trust > div {
	display: flex;
	gap: 10px;
	align-items: center;
}

.a23-fiche__trust svg {
	flex: none;
}

/* « Vous aimerez aussi » */
.a23-crea-liees__title {
	margin: 0 0 24px;
}

.a23-crea-liees {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 28px;
}

.a23-crea-rel {
	display: block;
	text-decoration: none;
	transition: transform 0.3s var(--wp--custom--motion--ease);
}

.a23-crea-rel:hover {
	transform: translateY(-4px);
}

.a23-crea-rel__frame {
	position: relative;
	display: block;
	aspect-ratio: 3 / 4;
	max-height: 280px;
	width: 100%;
	border-radius: var(--wp--custom--radius--card);
	overflow: hidden;
	border: 1px solid var(--wp--custom--color--border);
	margin-bottom: 14px;
}

.a23-crea-rel__frame img,
.a23-crea-rel__frame .a23-crea-card__ph {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.a23-crea-rel__frame img {
	transform: scale(1.03);
	transition: transform 0.4s var(--wp--custom--motion--ease);
}

.a23-crea-rel:hover .a23-crea-rel__frame img {
	transform: scale(1);
}

.a23-crea-rel__row {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 12px;
}

.a23-crea-rel__title {
	font-family: var(--wp--preset--font-family--cardo);
	font-weight: 700;
	font-size: 17px;
	color: var(--wp--custom--color--ink);
	text-decoration: underline;
	text-decoration-color: transparent;
	text-underline-offset: 3px;
	transition: text-decoration-color var(--wp--custom--motion--duration);
}

.a23-crea-rel:hover .a23-crea-rel__title {
	text-decoration-color: currentColor;
}

.a23-crea-rel__price {
	font-size: 14.5px;
	font-weight: 700;
	color: var(--wp--custom--color--ink);
	white-space: nowrap;
}

/* ---------------- État « épuisée » ---------------- */

/* Cartes : image passée en gris doux, prix atténué */
.a23-crea-card--indispo .a23-crea-card__frame img,
.a23-crea-card--indispo .a23-crea-card__frame .a23-crea-card__ph,
.a23-crea-card--indispo .a23-crea-rel__frame img,
.a23-crea-card--indispo .a23-crea-rel__frame .a23-crea-card__ph {
	filter: grayscale(0.85) opacity(0.75);
}

.a23-crea-card--indispo .a23-crea-card__price,
.a23-crea-card--indispo .a23-crea-rel__price {
	color: var(--wp--custom--color--ink-faint);
}

/* Fiche : image légèrement passée, prix atténué, formats neutralisés */
.a23-fiche--indispo .a23-fiche__main img {
	filter: grayscale(0.5) opacity(0.9);
}

.a23-fiche--indispo .a23-fiche__price {
	color: var(--wp--custom--color--ink-faint);
}

.a23-fiche--indispo .a23-fiche__pill {
	opacity: 0.55;
}

.a23-fiche--indispo .a23-fiche__pill.is-active {
	font-weight: 400;
	color: var(--wp--custom--color--ink-soft);
	background: var(--wp--custom--color--surface-alt);
	border-color: var(--wp--custom--color--border);
}

/* Alerte de retour en stock */
.a23-alerte {
	display: flex;
	flex-direction: column;
	gap: 14px;
}

.a23-alerte__note {
	background: var(--wp--custom--color--surface-alt);
	border: 1px dashed var(--wp--custom--color--border-strong);
	border-radius: var(--wp--custom--radius--card);
	padding: 16px 20px;
	display: flex;
	gap: 12px;
	align-items: flex-start;
}

.a23-alerte__note svg {
	flex: none;
	margin-top: 1px;
}

.a23-alerte__note p {
	font-size: 13.5px;
	line-height: 1.6;
	color: var(--wp--custom--color--ink-soft);
	margin: 0;
}

.a23-alerte__note strong {
	color: var(--wp--custom--color--ink);
}

.a23-alerte__hp {
	display: none;
}

.a23-alerte__row {
	display: flex;
	gap: 10px;
}

.a23-alerte__email {
	flex: 1;
	min-width: 0;
}

.a23-alerte__btn {
	flex: none;
	white-space: nowrap;
	cursor: pointer;
	border: none;
}

.a23-alerte__rgpd {
	font-size: 12px;
	color: var(--wp--custom--color--ink-faint);
	margin: 8px 0 0;
}

.a23-alerte__rgpd a {
	color: var(--wp--custom--color--ink-muted);
	text-decoration: underline;
	text-underline-offset: 2px;
}

.a23-alerte__msg {
	margin: 4px 0 0;
	font-size: 13.5px;
	font-weight: 600;
}

.a23-alerte__msg[data-statut="ok"],
.a23-alerte__msg[data-statut="deja"] {
	color: var(--wp--custom--color--accent);
}

.a23-alerte__msg[data-statut="invalide"],
.a23-alerte__msg[data-statut="erreur"] {
	color: var(--wp--custom--color--cat-terracotta);
}

.a23-alerte__form.is-envoi {
	opacity: 0.6;
	pointer-events: none;
}

/* ---------------- Lightbox de la galerie ---------------- */

.a23-lb {
	position: fixed;
	inset: 0;
	z-index: 1000;
	background: rgba(15, 25, 18, 0.93);
	display: none;
	flex-direction: column;
}

.a23-lb.is-open {
	display: flex;
}

.a23-lb__close {
	position: absolute;
	top: 20px;
	right: 20px;
	width: 44px;
	height: 44px;
	border-radius: var(--wp--custom--radius--pill);
	border: none;
	background: rgba(255, 253, 240, 0.12);
	color: var(--wp--preset--color--ivoire);
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	padding: 0;
	z-index: 2;
}

.a23-lb__stage {
	flex: 1;
	min-height: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 16px;
	padding: 64px 20px 20px;
}

.a23-lb__nav {
	flex: none;
	width: 48px;
	height: 48px;
	border-radius: var(--wp--custom--radius--pill);
	border: none;
	background: rgba(255, 253, 240, 0.12);
	color: var(--wp--preset--color--ivoire);
	font-size: 28px;
	line-height: 1;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0;
}

.a23-lb__main {
	min-width: 0;
	max-width: min(760px, 90vw);
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: opacity 0.2s;
}

.a23-lb__main img {
	max-width: 100%;
	max-height: 100%;
	width: auto;
	height: auto;
	object-fit: contain;
	border-radius: 16px;
	display: block;
}

.a23-lb__rail {
	display: flex;
	gap: 10px;
	justify-content: safe center;
	overflow-x: auto;
	padding: 20px;
	max-width: 760px;
	margin: 0 auto;
	width: 100%;
}

.a23-lb__dot {
	flex: none;
	width: 64px;
	height: 64px;
	border-radius: 10px;
	border: 2px solid transparent;
	overflow: hidden;
	cursor: pointer;
	padding: 0;
	background: none;
}

.a23-lb__dot img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.a23-lb__dot.is-active {
	border-color: #7FCB9F;
}

/* ---------------- Responsive créations ---------------- */

/* Tablette : grilles à 2 colonnes, vignettes à droite de la grande image */
@media (min-width: 768px) and (max-width: 1023px) {
	.a23-crea-grid,
	.a23-crea-trust {
		grid-template-columns: repeat(2, 1fr);
	}

	.a23-fiche__grid {
		gap: 24px;
	}

	.a23-fiche__gallery {
		flex-direction: row;
		align-items: stretch;
		gap: 12px;
	}

	.a23-fiche__gallery .a23-fiche__main {
		flex: 1 1 auto;
		aspect-ratio: auto;
		height: auto;
		align-self: stretch;
		min-width: 0;
	}

	.a23-fiche__gallery .a23-fiche__main:only-child {
		aspect-ratio: 3 / 4;
	}

	.a23-fiche__thumbs {
		display: flex;
		flex-direction: column;
		flex: 0 0 auto;
		width: 96px;
	}

	.a23-fiche__thumb {
		aspect-ratio: 1;
	}
}

/* Mobile */
@media (max-width: 767px) {
	.a23-crea-intro {
		padding: 40px 20px 64px;
	}

	.a23-crea-intro__title {
		line-height: 1.35;
	}

	.a23-crea-note {
		padding: 0 20px;
	}

	.a23-crea-note__panel {
		flex-direction: column;
		align-items: stretch;
		gap: 12px;
	}

	.a23-crea-section,
	.a23-fiche {
		padding-left: 20px;
		padding-right: 20px;
	}

	.a23-crea-section--etsy {
		padding-bottom: 64px;
	}

	.a23-crea-grid,
	.a23-crea-trust {
		grid-template-columns: 1fr;
	}

	.a23-crea-band {
		padding: 40px 28px;
	}

	.a23-fiche__grid {
		grid-template-columns: 1fr;
		gap: 24px;
	}

	.a23-fiche__crumb {
		justify-content: center;
		text-align: center;
	}

	.a23-fiche__main {
		aspect-ratio: auto;
		height: 320px;
	}

	.a23-fiche__thumbs {
		display: flex;
		justify-content: center;
		flex-wrap: nowrap;
		gap: 12px;
	}

	.a23-fiche__thumb {
		flex: 0 0 auto;
		width: 72px;
	}

	.a23-crea-liees {
		display: flex;
		flex-wrap: wrap;
	}

	.a23-crea-rel {
		flex: 1 1 240px;
		min-width: 240px;
	}

	.a23-lb__nav {
		display: none;
	}
}

@media (max-width: 480px) {
	.a23-alerte__row {
		flex-direction: column;
	}

	.a23-alerte__btn {
		width: 100%;
	}
}

/* Mode sombre : fonds pastel des badges rabattus sur la teinte sombre
   (même décision que les cartes catégories de l'accueil) */
body[data-theme="dark"] .a23-crea-badge--ocre,
body[data-theme="dark"] .a23-crea-badge--terracotta {
	background: var(--wp--custom--color--tint);
}

/* ------------------------------------------------------------------
   16. TRANSITIONS DE PAGE — navigation fluide sans rechargement (Swup)
   Le header, le footer et le menu mobile persistent ; seuls
   .a23-before (bandeaux et heros d'avant-contenu), <main> et
   .a23-after (sections d'après-contenu : newsletter, commentaires…)
   sont remplacés. Sortie : fondu rapide sur place. Entrée : fondu +
   montée douce sur la courbe « slide » du DS. Le kill-switch
   reduced-motion (section 7, ci-dessous) neutralise tout ;
   transitions.js n'attend alors aucune animation.
   Cycle des classes Swup sur <html> :
   is-changing (toute la visite) → is-leaving (sortie) → remplacement
   → is-rendering (entrée) ; is-animating porte l'état masqué.
   ------------------------------------------------------------------ */
html.is-changing .a23-before,
html.is-changing main,
html.is-changing .a23-after {
	transition:
		opacity var(--wp--custom--motion--page-in) var(--wp--custom--motion--ease),
		transform var(--wp--custom--motion--page-in) var(--wp--custom--motion--slide);
}

/* La sortie est plus rapide que l'entrée */
html.is-changing.is-leaving .a23-before,
html.is-changing.is-leaving main,
html.is-changing.is-leaving .a23-after {
	transition-duration: var(--wp--custom--motion--page-out);
}

/* État masqué : cible de la sortie et point de départ de l'entrée */
html.is-animating .a23-before,
html.is-animating main,
html.is-animating .a23-after {
	opacity: 0;
}

/* La montée ne joue qu'à l'entrée : le nouveau contenu part 14px plus
   bas (is-rendering) ; l'ancien s'était effacé sur place (is-leaving). */
html.is-animating.is-rendering .a23-before,
html.is-animating.is-rendering main,
html.is-animating.is-rendering .a23-after {
	transform: translateY(14px);
}

/* Barre de progression (plugin Swup) : n'apparaît que si la page met
   plus de 300 ms à arriver. Sous l'admin bar quand on est connecté. */
.swup-progress-bar {
	position: fixed;
	top: var(--wp-admin--admin-bar--height, 0px);
	left: 0;
	z-index: 1100;
	height: 3px;
	background: var(--wp--custom--color--action);
}

/* ------------------------------------------------------------------
   7. ACCESSIBILITÉ — mouvement réduit
   ------------------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation: none !important;
		transition: none !important;
	}
}