/*
 * Styles KazAnimal.
 *
 * Toutes les classes sont préfixées « kazanimal- » afin de ne jamais entrer en
 * conflit avec le thème actif. Conception mobile d'abord ; les couleurs de
 * statut sont toujours doublées d'un texte explicite.
 */

.kazanimal {
	/*
	 * Le système visuel tient en une quinzaine de variables. Un thème, un thème
	 * enfant ou le réglage d'apparence peuvent les redéfinir ; rien d'autre
	 * n'est à surcharger pour changer l'allure du plugin.
	 *
	 * La typographie n'y figure pas : elle est héritée du thème, délibérément.
	 * Un plugin qui impose sa police à un site en casse l'unité, et charger une
	 * fonte distante pour quelques écrans serait payer cher un détail.
	 */
	--kazanimal-gap: 1rem;
	--kazanimal-radius: 14px;
	--kazanimal-radius-sm: 8px;

	/*
	 * Les boutons ont leur propre rayon, en pilule. Réutiliser le rayon général
	 * arrondirait du même coup les cartes, les champs et les encarts, qui n'ont
	 * rien demandé — et le réglage « Rayon » de l'onglet Apparence continue de
	 * piloter ceux-là seuls.
	 */
	--kazanimal-button-radius: 25px;

	/*
	 * Orange : les actions, la chaleur, l'identité.
	 *
	 * Ce sont les couleurs exactes de la marque, appliquées sur décision de
	 * Bamby du 8 septembre 2026. Elles sont sous le seuil WCAG AA : du blanc
	 * sur cet orange donne 2,70:1, et 4,00:1 sur le bleu-vert de survol, là où
	 * il en faut 4,5. L'écart est assumé, pas ignoré : deux sorties conformes
	 * existent si l'on revient dessus — texte #1a1512 sur l'orange exact
	 * (6,69:1), ou #b85c00 / #02818a avec du texte blanc (4,60 et 4,66:1).
	 */
	--kazanimal-primary: #f97902;
	--kazanimal-primary-dark: #9e350a;
	--kazanimal-primary-soft: #fdf1ea;
	--kazanimal-primary-contrast: #ffffff;

	/*
	 * Survol des boutons : un bleu-vert qui tranche, et non un simple
	 * assombrissement de l'orange. Une variable distincte est indispensable —
	 * « primary-dark » sert aussi de couleur de texte dans le menu, et il est
	 * recalculé automatiquement dès qu'on change la couleur principale dans
	 * l'onglet Apparence, ce qui effacerait ce survol.
	 */
	--kazanimal-primary-hover: #038d96;
	--kazanimal-primary-hover-contrast: #ffffff;

	/* Bleu-vert profond : les liens et les états de focus. */
	--kazanimal-accent: #0f6b7b;
	--kazanimal-accent-contrast: #ffffff;

	/* Encre des titres et des commandes, plus sombre que le texte courant. */
	--kazanimal-ink: #12354a;

	--kazanimal-text: inherit;
	--kazanimal-muted: #5b6572;
	--kazanimal-border: #e2e5ea;
	--kazanimal-surface: #ffffff;
	--kazanimal-surface-alt: #fbf9f7;
	--kazanimal-shadow: 0 1px 2px rgba(23, 20, 18, 0.05), 0 6px 16px -10px rgba(23, 20, 18, 0.28);

	/*
	 * Les trois couleurs de statut portent du sens et ne sont donc pas
	 * réglables. Elles sont partout doublées d'un libellé écrit : la couleur
	 * seule ne dit jamais si un animal est perdu ou trouvé.
	 */
	--kazanimal-lost: #b3261e;
	--kazanimal-lost-soft: #fdeceb;
	--kazanimal-found: #1f6b3a;
	--kazanimal-found-soft: #e9f4ed;
	--kazanimal-stray: #8a5a00;
	--kazanimal-stray-soft: #fdf3e0;
	--kazanimal-breeding: #7c4dcc;
	--kazanimal-breeding-soft: #f1ebfb;
	--kazanimal-adoption-soft: #e2f2f4;
	--kazanimal-resolved: #1f6b3a;

	/*
	 * Le dégradé du titre d'accueil, du bleu marine au turquoise. Trois teintes
	 * plutôt qu'un vrai dégradé : le titre tient en trois lignes, et chacune en
	 * prend une.
	 */
	--kazanimal-hero-title-start: #12354a;
	--kazanimal-hero-title-mid: #0a616f;
	--kazanimal-hero-title-end: #038d96;

	box-sizing: border-box;
	color: var(--kazanimal-text);
	margin: 0 auto;
	max-width: 72rem;
	padding: var(--kazanimal-gap);
	width: 100%;
}

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

.kazanimal-sr-only {
	border: 0;
	clip: rect(0 0 0 0);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute;
	white-space: nowrap;
	width: 1px;
}

.kazanimal :focus-visible {
	outline: 3px solid var(--kazanimal-accent);
	outline-offset: 2px;
}

/*
 * Tous les titres du plugin partagent la mise en forme du titre de l'espace
 * utilisateur : même encre, même échelle, même graisse. Un titre changeait
 * autrefois d'aspect selon la page qui le portait.
 */
.kazanimal-title {
	color: var(--kazanimal-ink);
	font-size: clamp(1.9rem, 1.1rem + 2.4vw, 2.8rem);
	font-weight: 700;
	line-height: 1.15;
	margin: 0 0 0.5rem;
}

/*
 * Un titre de deux mots se lit en deux couleurs, comme « KazAnimal » : le
 * premier prend l'accent, le second l'orange de la marque. Au-delà de deux
 * mots le titre reste d'une seule encre — la lecture y perdrait.
 */
.kazanimal-title__first {
	color: var(--kazanimal-accent);
}

.kazanimal-title__second {
	color: var(--kazanimal-primary);
}

.kazanimal-count,
.kazanimal-help {
	color: var(--kazanimal-muted);
	display: block;
	font-size: 0.875rem;
	margin: 0.25rem 0;
}

.kazanimal-empty {
	background: var(--kazanimal-surface-alt);
	border-radius: var(--kazanimal-radius);
	padding: 1.5rem;
	text-align: center;
}

/* Navigation par type et espace utilisateur */

.kazanimal-tabs,
.kazanimal-account-nav ul {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	list-style: none;
	margin: 0 0 var(--kazanimal-gap);
	padding: 0;
}

.kazanimal-tab,
.kazanimal-account-nav__link {
	align-items: center;
	border: 1px solid var(--kazanimal-border);
	border-radius: 999px;
	display: inline-flex;
	/* 44 px : la navigation est un contrôle principal, pas une décoration. */
	min-height: 2.75rem;
	padding: 0.4rem 0.9rem;
	text-decoration: none;
	white-space: normal;
}

.kazanimal-tab--current,
.kazanimal-account-nav__link--current {
	background: var(--kazanimal-accent);
	border-color: var(--kazanimal-accent);
	color: var(--kazanimal-accent-contrast);
}

/* Boutons et liens d'action */

/*
 * Les sélecteurs de ces trois contrôles sont qualifiés par leur élément —
 * button, a, input — et non par la seule classe. Ce n'est pas de la
 * verbosité : la réinitialisation de certains thèmes cible « button,
 * [type="submit"] » avec la même spécificité que « .kazanimal-button », si
 * bien que c'est l'ordre de chargement qui départage. Hello Elementor charge
 * son reset après les extensions et imposait ainsi white-space: nowrap, ce qui
 * faisait déborder un libellé long de 233 px à 360 px de large. Ajouter
 * l'élément porte la spécificité à 0-1-1 et rend le résultat indépendant de
 * l'ordre, sans recourir à !important.
 */
button.kazanimal-button,
a.kazanimal-button,
input.kazanimal-button,
.kazanimal-button {
	align-items: center;
	background: var(--kazanimal-primary);
	border: 1px solid var(--kazanimal-primary);
	border-radius: var(--kazanimal-button-radius);
	color: var(--kazanimal-primary-contrast);
	cursor: pointer;
	display: inline-flex;
	font-size: 1rem;
	justify-content: center;
	line-height: 1.3;
	/* 44 px : cible tactile confortable sur les écrans les plus étroits. */
	min-height: 2.75rem;
	/*
	 * Un libellé long — « M'avertir par courriel lorsqu'un nouveau partenaire
	 * correspond à mes critères » — doit revenir à la ligne plutôt que pousser
	 * la page à déborder horizontalement à 360 px.
	 */
	max-width: 100%;
	padding: 0.6rem 1rem;
	text-align: center;
	text-decoration: none;
	/*
	 * Le thème actif impose white-space: nowrap à ses boutons. Le plugin ne peut
	 * pas en dépendre : un libellé long ferait alors déborder la page à 360 px.
	 */
	white-space: normal;
}

.kazanimal-button--secondary {
	background: var(--kazanimal-surface);
	border-color: var(--kazanimal-border);
	color: var(--kazanimal-accent);
}

.kazanimal-button--danger {
	background: #e95d68;
	border-color: var(--kazanimal-lost);
	color: #ffffff;
}

button.kazanimal-link,
a.kazanimal-link,
.kazanimal-link {
	align-items: center;
	background: none;
	border: 0;
	color: var(--kazanimal-accent);
	cursor: pointer;
	display: inline-flex;
	font-size: 0.9rem;
	/* 44 px : cible tactile minimale, alignée sur celle des boutons. */
	min-height: 2.75rem;
	padding: 0.25rem 0;
	text-decoration: underline;
}

.kazanimal-link--danger {
	color: var(--kazanimal-lost);
}

.kazanimal-choices {
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
}

/* Grilles et cartes */

.kazanimal-grid {
	display: grid;
	gap: var(--kazanimal-gap);
	grid-template-columns: 1fr;
}

/* La carte d'un animal, reprise de la maquette fournie le 12 septembre 2026.
 *
 * La police vient du site : Poppins figure en tête de la pile, et le plugin
 * n'en charge aucune — c'est la règle depuis l'étape 9. Sur un site qui ne l'a
 * pas, la pile système prend le relais sans que rien ne se casse. « inherit »
 * n'a pas sa place dans une pile de polices : la déclaration entière serait
 * invalide, et la carte retomberait sur la police du thème sans prévenir.
 */
.kazanimal-card {
	--kazanimal-card-font: "Poppins", var(--kazanimal-font, system-ui, -apple-system, "Segoe UI", roboto, sans-serif);

	background: var(--kazanimal-surface);
	border: 1px solid var(--kazanimal-border);
	border-radius: 20px;
	box-shadow: var(--kazanimal-shadow);
	display: flex;
	flex-direction: column;
	font-family: var(--kazanimal-card-font);
	overflow: hidden;
	padding: 0.6rem;
}

/* La photo est posée dans la carte, pas collée à ses bords : la maquette lui
   laisse une marge blanche tout autour, et ses coins sont arrondis à part. */

.kazanimal-card__media {
	border-radius: 14px;
	overflow: hidden;
	position: relative;
}

/* Annonce adoptée, dans « Mes signalements » d'un refuge.

   Le ruban est posé sur la carte, qui masque déjà ce qui déborde : il traverse
   le coin en diagonale sans élargir la mise en page. La carte porte aussi la
   classe, ce qui permet de la distinguer au premier coup d'œil. */

.kazanimal-card--adopted {
	position: relative;
}

.kazanimal-ribbon {
	background: #e0218a;
	color: #ffffff;
	font-size: 0.8125rem;
	font-weight: 700;
	left: -3.25rem;
	letter-spacing: 0.02em;
	margin: 0;
	padding: 0.35rem 3.5rem;
	pointer-events: none;
	position: absolute;
	text-align: center;
	text-transform: uppercase;
	top: 1.4rem;
	transform: rotate(-45deg);
	z-index: 2;
}

/* Constat d'adoption, à la place des actions.

   Ni bouton ni lien : rien ne s'ouvre, rien ne se soumet. L'apparence reprend
   celle d'un bouton secondaire pour rester dans le dessin des cartes, mais le
   curseur ne change pas au survol — une forme cliquable qui ne réagit pas
   déçoit plus qu'elle n'informe. */

.kazanimal-adopted {
	align-items: center;
	background: var(--kazanimal-primary-soft, #fdf1ea);
	border: 1px solid #e0218a;
	border-radius: var(--kazanimal-button-radius, 25px);
	color: #b81a70;
	display: flex;
	font-size: 0.875rem;
	font-weight: 600;
	gap: 0.4rem;
	justify-content: center;
	margin: 0 0 0.6rem;
	min-height: 2.375rem;
	padding: 0.35rem 0.85rem;
	text-align: center;
}

.kazanimal-adopted .kazanimal-icon {
	color: #e0218a;
	flex: 0 0 auto;
}

/* Trois actions par carte : un peu moins hautes, pour que la carte reste lisible
   d'un regard. La cible garde 38 px, au-dessus du minimum de 24 px que demande
   WCAG AA pour un contrôle. */

.kazanimal .kazanimal-card__actions--compact button.kazanimal-button,
.kazanimal .kazanimal-card__actions--compact a.kazanimal-button,
.kazanimal .kazanimal-card__actions--compact input.kazanimal-button,
.kazanimal-card__actions--compact button.kazanimal-button,
.kazanimal-card__actions--compact a.kazanimal-button,
.kazanimal-card__actions--compact input.kazanimal-button,
.kazanimal-card__actions--compact .kazanimal-button {
	font-size: 0.875rem;
	min-height: 2.375rem;
	padding: 0.35rem 0.85rem;
}

.kazanimal-card__image {
	aspect-ratio: 4 / 3;
	display: block;
	height: auto;
	object-fit: cover;
	width: 100%;
}

.kazanimal-card__image--empty {
	background: repeating-linear-gradient(45deg, #eef1f4, #eef1f4 10px, #e4e8ed 10px, #e4e8ed 20px);
}

.kazanimal-card__body {
	display: flex;
	flex-direction: column;
	gap: 0.4rem;
	padding: 0.9rem;
}

/* Le nom de l'animal, en gros et dans le bleu-vert de la maquette. C'est le
   premier mot que l'œil cherche : un chien perdu se reconnaît à son nom avant
   de se reconnaître à sa race. */

.kazanimal-card__title {
	font-family: var(--kazanimal-card-font);
	font-size: 1.5rem;
	font-weight: 700;
	line-height: 1.2;
	margin: 0;
}

.kazanimal .kazanimal-card__title a {
	color: var(--kazanimal-accent);
	text-decoration: none;
}

.kazanimal .kazanimal-card__title a:hover,
.kazanimal .kazanimal-card__title a:focus-visible {
	text-decoration: underline;
}

/* Les caractéristiques : chacune derrière son pictogramme, séparées par un
   point. Le point est dessiné par la règle plutôt qu'écrit dans le gabarit —
   il n'a rien à dire à un lecteur d'écran, et il ne doit pas traîner en fin de
   ligne quand une caractéristique manque. */

.kazanimal-card__meta,
.kazanimal-card__place {
	color: var(--kazanimal-ink);
	font-size: 0.95rem;
	margin: 0;
}

.kazanimal-card__traits {
	align-items: center;
	display: flex;
	flex-wrap: wrap;
	gap: 0.35rem 0.75rem;
}

.kazanimal-card__trait {
	align-items: center;
	display: inline-flex;
	gap: 0.35rem;
}

.kazanimal-card__trait .kazanimal-icon {
	color: var(--kazanimal-accent);
	flex: 0 0 auto;
}

/* Les deux actions de la maquette : ouvrir l'annonce, ou la garder de côté.
   Elles partagent la ligne à parts égales et se replient l'une sous l'autre
   quand la carte est trop étroite pour les deux. */

.kazanimal-card__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin: 0.6rem 0 0;
}

/* Chacune prend la moitié de la ligne tant que son libellé y tient d'un seul
   tenant ; sinon elles passent l'une sous l'autre, pleine largeur. Couper
   « Voir l'annonce » en deux lignes ferait deux boutons de hauteurs
   différentes, ce que la maquette ne montre nulle part. */

.kazanimal-card__actions > * {
	flex: 1 1 10.5rem;
	justify-content: center;
	text-align: center;
	white-space: nowrap;
}

.kazanimal a.kazanimal-card__open,
a.kazanimal-card__open {
	align-items: center;
	display: inline-flex;
	gap: 0.4rem;
	text-decoration: none;
}

/* Le bouton des favoris passe en pastille contournée, comme sur la maquette :
   même hauteur et même arrondi que le bouton orange, mais fond transparent —
   c'est l'action secondaire. */

.kazanimal-card .kazanimal-favorite {
	border-color: var(--kazanimal-accent);
	border-radius: var(--kazanimal-button-radius, 25px);
	font-size: 0.95rem;
	font-weight: 600;
}

/* Statuts : la couleur est toujours accompagnée d'un texte */

.kazanimal-status {
	border-radius: 999px;
	display: inline-block;
	font-size: 0.8rem;
	font-weight: 700;
	letter-spacing: 0.02em;
	margin: 0;
	padding: 0.2rem 0.7rem;
	text-transform: uppercase;
}

.kazanimal-card__media .kazanimal-status {
	left: 0.6rem;
	position: absolute;
	top: 0.6rem;
}

.kazanimal-status--lost {
	background: #e95d68;
	color: #ffffff;
}

.kazanimal-status--found {
	background: #038c96;
	color: #ffffff;
}

.kazanimal-status--stray {
	background: #f97902;
	color: #ffffff;
}

/*
 * L'étiquette des refuges : un ton propre, ni celui d'un animal perdu ni celui
 * d'un errant. Blanc sur ce fond donne 3,44:1 — sous le seuil WCAG AA pour un
 * texte ordinaire, mais l'étiquette est en gras et en capitales, ce qui la
 * place dans la catégorie des grands textes, où 3:1 suffit.
 */
.kazanimal-status--adoption {
	background: #0699a5;
	color: #ffffff;
}

.kazanimal-status--resolved,
.kazanimal-status--home {
	background: var(--kazanimal-resolved);
	color: #ffffff;
}

.kazanimal-status--archived,
.kazanimal-status--deceased {
	background: #4a4a4a;
	color: #ffffff;
}

.kazanimal-section {
	border-top: 1px solid var(--kazanimal-border);
	margin-top: 1.5rem;
	padding-top: 1rem;
}

.kazanimal-facts {
	display: grid;
	gap: 0.35rem 1rem;
	grid-template-columns: 1fr;
	margin: 0;
}

.kazanimal-facts dt {
	color: var(--kazanimal-muted);
	font-size: 0.85rem;
}

.kazanimal-facts dd {
	margin: 0 0 0.5rem;
}

.kazanimal-flags {
	list-style: none;
	margin: 0.75rem 0 0;
	padding: 0;
}

.kazanimal-flag {
	background: #fff4e5;
	border-left: 4px solid var(--kazanimal-stray);
	margin-bottom: 0.4rem;
	padding: 0.4rem 0.6rem;
}

.kazanimal-gallery {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	list-style: none;
	margin: 1rem 0 0;
	padding: 0;
}

.kazanimal-gallery img {
	border-radius: 6px;
	height: auto;
	max-width: 120px;
}

.kazanimal-gallery--editable li {
	border: 1px solid var(--kazanimal-border);
	border-radius: var(--kazanimal-radius);
	padding: 0.5rem;
	text-align: center;
}

.kazanimal-share__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
}

/* Formulaires */

.kazanimal-form fieldset {
	border: 1px solid var(--kazanimal-border);
	border-radius: var(--kazanimal-radius);
	margin: 0 0 1rem;
	padding: 1rem;
}

.kazanimal-form legend {
	font-weight: 700;
	padding: 0 0.4rem;
}

.kazanimal-field {
	margin: 0 0 0.9rem;
}

.kazanimal-field label {
	display: block;
	font-weight: 600;
	margin-bottom: 0.25rem;
}

.kazanimal-field input[type="text"],
.kazanimal-field input[type="email"],
.kazanimal-field input[type="tel"],
.kazanimal-field input[type="date"],
.kazanimal-field input[type="time"],
.kazanimal-field input[type="number"],
.kazanimal-field input[type="file"],
.kazanimal-field input[type="search"],
.kazanimal-field select,
.kazanimal-field textarea {
	border: 1px solid var(--kazanimal-border);
	border-radius: 6px;
	font: inherit;
	/* 44 px : cible tactile confortable sur les écrans les plus étroits. */
	min-height: 2.75rem;
	padding: 0.5rem;
	width: 100%;
}

/* Liste déroulante doublée d'une recherche : le champ « Couleur ».
 *
 * La liste native reste dans la page, c'est elle qui part au serveur. Elle
 * n'est pas masquée par « display: none » : un champ obligatoire invalide et
 * masqué de cette façon empêche l'envoi du formulaire sans que le navigateur
 * puisse montrer où est le problème. Réduite à un point transparent, elle garde
 * sa place et son message d'erreur reste montré au bon endroit.
 */

.kazanimal-combo {
	position: relative;
}

.kazanimal-combo__native {
	bottom: 0;
	height: 1px;
	left: 0;
	opacity: 0;
	pointer-events: none;
	position: absolute;
	width: 1px;
}

.kazanimal .kazanimal-combo__input:focus {
	border-color: var(--kazanimal-accent);
	outline: 2px solid var(--kazanimal-accent);
	outline-offset: 1px;
}

.kazanimal-combo__list {
	background: var(--kazanimal-surface);
	border: 1px solid var(--kazanimal-border);
	border-radius: 6px;
	box-shadow: var(--kazanimal-shadow);
	list-style: none;
	margin: 0.25rem 0 0;
	/* Une dizaine d'entrées visibles : au-delà, la liste couvre le formulaire. */
	max-height: 16rem;
	overflow-y: auto;
	padding: 0.25rem;
	position: absolute;
	width: 100%;
	z-index: 20;
}

.kazanimal-combo__option {
	border-radius: 4px;
	cursor: pointer;
	/* 44 px de haut : la même cible au doigt que les autres contrôles. */
	padding: 0.75rem 0.6rem;
}

.kazanimal-combo__option[aria-selected="true"] {
	background: var(--kazanimal-accent);
	color: var(--kazanimal-accent-contrast);
}

.kazanimal-combo__option:hover {
	background: var(--kazanimal-primary);
	color: var(--kazanimal-primary-contrast);
}

.kazanimal-combo__empty {
	color: var(--kazanimal-muted);
	font-size: 0.9rem;
	margin: 0.35rem 0 0;
}

.kazanimal-field--checkbox {
	align-items: flex-start;
	display: flex;
	gap: 0.5rem;
}

.kazanimal-field--checkbox label {
	font-weight: 400;
	margin: 0;
}

.kazanimal-field--checkbox input {
	margin-top: 0.2rem;
}

.kazanimal-field--actions {
	align-items: center;
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
}

.kazanimal-filters fieldset {
	border: 1px solid var(--kazanimal-border);
	border-radius: var(--kazanimal-radius);
	display: grid;
	gap: 0.75rem;
	grid-template-columns: 1fr;
	margin: 0 0 var(--kazanimal-gap);
	padding: 1rem;
}

/* Messages */

.kazanimal-notice {
	border-left: 4px solid var(--kazanimal-accent);
	border-radius: 6px;
	margin: 0 0 1rem;
	padding: 0.75rem 1rem;
}

.kazanimal-notice--success {
	background: #edf7f0;
	border-left-color: var(--kazanimal-found);
}

.kazanimal-notice--error {
	background: #fdeeed;
	border-left-color: var(--kazanimal-lost);
}

.kazanimal-notice__message {
	margin: 0;
}

.kazanimal-notice__fields {
	margin: 0.5rem 0 0;
	padding-left: 1.2rem;
}

/* Observations */

.kazanimal-timeline {
	list-style: none;
	margin: 1rem 0 0;
	padding: 0;
}

.kazanimal-timeline__item {
	border-left: 3px solid var(--kazanimal-accent);
	margin-bottom: 1rem;
	padding: 0 0 0.5rem 1rem;
}

.kazanimal-timeline__date {
	font-weight: 700;
	margin: 0;
}

.kazanimal-timeline__place,
.kazanimal-timeline__coords {
	color: var(--kazanimal-muted);
	font-size: 0.9rem;
	margin: 0.2rem 0;
}

.kazanimal-timeline__photo {
	border-radius: 6px;
	height: auto;
	margin-top: 0.5rem;
	max-width: 220px;
}

/* Tuiles du tableau de bord */

.kazanimal-tile {
	border: 1px solid var(--kazanimal-border);
	border-radius: var(--kazanimal-radius);
	padding: 1rem;
}

.kazanimal-tile__count {
	font-size: 2rem;
	font-weight: 700;
	margin: 0.25rem 0;
}

/* Pagination */

.kazanimal-pagination {
	display: flex;
	flex-wrap: wrap;
	gap: 0.4rem;
	margin-top: 1.5rem;
}

.kazanimal-pagination__link,
.kazanimal-pagination__current {
	align-items: center;
	border: 1px solid var(--kazanimal-border);
	border-radius: 6px;
	display: inline-flex;
	justify-content: center;
	/* 44 px : les numéros de page sont des contrôles tactiles à part entière. */
	min-height: 2.75rem;
	min-width: 2.75rem;
	padding: 0.4rem 0.6rem;
	text-align: center;
	text-decoration: none;
}

.kazanimal-pagination__current {
	background: var(--kazanimal-accent);
	border-color: var(--kazanimal-accent);
	color: var(--kazanimal-accent-contrast);
}

/* Tablette */

@media (min-width: 48em) {
	.kazanimal-grid {
		grid-template-columns: repeat(2, 1fr);
	}

	.kazanimal-filters fieldset {
		grid-template-columns: repeat(2, 1fr);
	}

	.kazanimal-facts {
		grid-template-columns: 12rem 1fr;
	}

	.kazanimal-choices {
		flex-direction: row;
	}
}

/* Desktop */

@media (min-width: 64em) {
	.kazanimal-grid {
		grid-template-columns: repeat(3, 1fr);
	}

	.kazanimal-grid--tiles {
		grid-template-columns: repeat(2, 1fr);
	}

	.kazanimal-filters fieldset {
		grid-template-columns: repeat(5, 1fr);
	}

	.kazanimal-title {
		font-size: 2rem;
	}
}

/*
 * Phase 5 : favoris, messagerie, correspondances, alertes et notifications.
 *
 * Tous les contrôles respectent la cible tactile de 44 px, et aucun état n'est
 * signalé par la seule couleur : le cœur change de forme, les critères portent
 * un symbole, les états « lu / non lu » sont écrits en toutes lettres.
 */

button.kazanimal-favorite,
a.kazanimal-favorite,
.kazanimal-favorite {
	align-items: center;
	max-width: 100%;
	background: transparent;
	border: 1px solid var(--kazanimal-border);
	border-radius: var(--kazanimal-radius);
	color: var(--kazanimal-accent);
	cursor: pointer;
	display: inline-flex;
	font-size: 1rem;
	gap: 0.4rem;
	line-height: 1.3;
	/* 44 px : cible tactile minimale, alignée sur celle des boutons. */
	min-height: 2.75rem;
	padding: 0.5rem 0.9rem;
	text-decoration: none;
	white-space: normal;
}

.kazanimal-favorite--active {
	background: var(--kazanimal-accent);
	border-color: var(--kazanimal-accent);
	color: var(--kazanimal-accent-contrast);
}

.kazanimal-favorite__icon {
	font-size: 1.15rem;
	line-height: 1;
}

.kazanimal-favorite-form {
	margin: 0.5rem 0 0;
}

.kazanimal-badge {
	background: var(--kazanimal-accent);
	border-radius: 999px;
	color: var(--kazanimal-accent-contrast);
	display: inline-block;
	font-size: 0.8rem;
	line-height: 1.4;
	margin-left: 0.35rem;
	min-width: 1.5rem;
	padding: 0.1rem 0.45rem;
	text-align: center;
}

.kazanimal-conversations,
.kazanimal-notifications,
.kazanimal-list {
	list-style: none;
	margin: var(--kazanimal-gap) 0;
	padding: 0;
}

.kazanimal-conversation,
.kazanimal-notification,
.kazanimal-list__item {
	align-items: flex-start;
	border: 1px solid var(--kazanimal-border);
	border-radius: var(--kazanimal-radius);
	display: flex;
	flex-direction: column;
	gap: 0.35rem;
	margin-bottom: 0.6rem;
	padding: 0.75rem;
}

.kazanimal-conversation--unread,
.kazanimal-notification--unread {
	border-left: 4px solid var(--kazanimal-accent);
}

.kazanimal-conversation__link,
.kazanimal-notification__link {
	align-items: flex-start;
	color: inherit;
	display: flex;
	flex-direction: column;
	gap: 0.25rem;
	/* 44 px : la ligne entière est cliquable et reste une cible confortable. */
	min-height: 2.75rem;
	justify-content: center;
	text-decoration: none;
	width: 100%;
}

.kazanimal-conversation__with,
.kazanimal-notification__title {
	font-weight: 600;
}

.kazanimal-conversation__context,
.kazanimal-conversation__excerpt,
.kazanimal-conversation__date,
.kazanimal-notification__date,
.kazanimal-notification__state,
.kazanimal-list__meta {
	color: var(--kazanimal-muted);
	font-size: 0.9rem;
}

.kazanimal-thread {
	list-style: none;
	margin: var(--kazanimal-gap) 0;
	padding: 0;
}

.kazanimal-message {
	border: 1px solid var(--kazanimal-border);
	border-radius: var(--kazanimal-radius);
	margin-bottom: 0.6rem;
	/* Aucune largeur fixe : à 360 px le fil reste lisible et ne déborde pas. */
	max-width: 100%;
	padding: 0.7rem 0.85rem;
}

.kazanimal-message--mine {
	background: rgba(18, 101, 122, 0.06);
	border-color: var(--kazanimal-accent);
}

.kazanimal-message__meta {
	color: var(--kazanimal-muted);
	display: flex;
	flex-wrap: wrap;
	font-size: 0.85rem;
	gap: 0.5rem;
	margin: 0 0 0.3rem;
}

.kazanimal-message__body {
	margin: 0;
	overflow-wrap: anywhere;
}

.kazanimal-reply {
	margin-top: var(--kazanimal-gap);
}

.kazanimal-score {
	margin: 0.5rem 0;
}

.kazanimal-score__value {
	font-size: 1.15rem;
}

.kazanimal-criteria {
	list-style: none;
	margin: 0.5rem 0;
	padding: 0;
}

.kazanimal-criteria__item {
	display: flex;
	flex-wrap: wrap;
	gap: 0.4rem;
	font-size: 0.9rem;
	padding: 0.15rem 0;
}

.kazanimal-criteria__item--unmet {
	color: var(--kazanimal-muted);
}

.kazanimal-criteria__score {
	color: var(--kazanimal-muted);
}

.kazanimal-inline-form {
	display: inline-block;
	margin: 0.35rem 0.35rem 0.35rem 0;
	max-width: 100%;
}

.kazanimal-section--moderation {
	border-top: 1px solid var(--kazanimal-border);
	margin-top: var(--kazanimal-gap);
	padding-top: var(--kazanimal-gap);
}

@media (min-width: 48em) {
	.kazanimal-conversation__link {
		align-items: center;
		flex-direction: row;
		flex-wrap: wrap;
		gap: 0.75rem;
	}

	.kazanimal-list__item {
		align-items: center;
		flex-direction: row;
		flex-wrap: wrap;
		gap: 0.75rem;
	}

	.kazanimal-message {
		max-width: 85%;
	}

	.kazanimal-message--mine {
		margin-left: auto;
	}
}

@media (prefers-reduced-motion: reduce) {
	.kazanimal * {
		animation: none !important;
		transition: none !important;
	}
}

/*
 * Pages WordPress (0.7.0).
 *
 * Les vues insérées dans une page par le bloc ou le code court partagent le
 * conteneur .kazanimal-view, qui ne fait qu'isoler le rendu : la mise en forme
 * reste celle des gabarits, identique à celle des URL dynamiques.
 */

.kazanimal-steps {
	line-height: 1.6;
	margin: 0 0 1rem;
	padding-left: 1.25rem;
}

.kazanimal-steps li + li {
	margin-top: 0.5rem;
}

.kazanimal-form-links {
	display: flex;
	flex-wrap: wrap;
	gap: 1rem;
	margin-top: 1rem;
}

.kazanimal-note {
	color: #4a5568;
	display: block;
	font-size: 0.875rem;
	margin-top: 0.25rem;
}

/*
 * Le tableau déborde de son conteneur en dessous d'environ 40em. Plutôt que de
 * réduire indéfiniment les colonnes, il défile horizontalement dans sa propre
 * boîte : la page, elle, ne défile jamais latéralement.
 */
.kazanimal-table-wrap {
	-webkit-overflow-scrolling: touch;
	max-width: 100%;
	overflow-x: auto;
}

.kazanimal-table {
	border-collapse: collapse;
	min-width: 34rem;
	width: 100%;
}

.kazanimal-table th,
.kazanimal-table td {
	border-bottom: 1px solid #e2e8f0;
	padding: 0.6rem 0.75rem;
	text-align: left;
	vertical-align: top;
}

.kazanimal-table thead th {
	font-size: 0.875rem;
	letter-spacing: 0.02em;
	text-transform: uppercase;
}

/*
 * Sur les écrans étroits, un tableau encapsulé devient une pile de fiches :
 * chaque cellule porte alors son intitulé, repris de son attribut data-label.
 */
@media (max-width: 39.99em) {
	.kazanimal-table-wrap .kazanimal-table {
		min-width: 0;
	}

	.kazanimal-table-wrap .kazanimal-table thead {
		clip: rect(0 0 0 0);
		clip-path: inset(50%);
		height: 1px;
		overflow: hidden;
		position: absolute;
		white-space: nowrap;
		width: 1px;
	}

	.kazanimal-table-wrap .kazanimal-table tr {
		border: 1px solid #e2e8f0;
		border-radius: 6px;
		display: block;
		margin-bottom: 0.75rem;
		padding: 0.5rem 0.75rem;
	}

	.kazanimal-table-wrap .kazanimal-table td {
		border: 0;
		display: flex;
		gap: 0.75rem;
		justify-content: space-between;
		padding: 0.35rem 0;
	}

	.kazanimal-table-wrap .kazanimal-table td::before {
		content: attr(data-label);
		flex: 0 0 45%;
		font-weight: 600;
	}
}

/* =========================================================================
 * Accueil, menu et en-tête (0.8.0).
 *
 * Tout ce qui suit ne s'applique qu'à l'accueil et aux composants de
 * navigation du plugin. Les classes restent préfixées, aucune ne cible un
 * élément du thème.
 * ========================================================================= */

/* Pictogrammes ---------------------------------------------------------- */

.kazanimal-icon {
	flex: 0 0 auto;
	vertical-align: middle;
}

/*
 * Les libellés de boutons et de liens sont accompagnés d'un pictogramme :
 * l'espacement est posé une fois ici plutôt que dans chaque composant.
 */
.kazanimal-button .kazanimal-icon,
.kazanimal-link .kazanimal-icon {
	margin-right: 0.5rem;
}

/* Introduction ---------------------------------------------------------- */

.kazanimal-hero {
	display: grid;
	gap: 1.5rem;
	grid-template-columns: 1fr;
	padding: 0.5rem 0 1.5rem;
}

.kazanimal-hero__eyebrow {
	align-items: center;
	color: var(--kazanimal-primary);
	display: inline-flex;
	font-size: 0.8rem;
	font-weight: 700;
	gap: 0.35rem;
	letter-spacing: 0.08em;
	margin: 0 0 0.75rem;
	text-transform: uppercase;
}

.kazanimal-hero__title {
	/*
	 * clamp() plutôt qu'un jeu de media queries : le titre suit la largeur
	 * disponible sans jamais dépasser la ligne à 360 px, ni paraître timide sur
	 * un grand écran.
	 */
	font-size: clamp(1.75rem, 1.15rem + 2.6vw, 2.75rem);
	line-height: 1.15;
	margin: 0 0 0.75rem;
}

/*
 * Le titre de la maquette : trois lignes, un dégradé du bleu marine au
 * turquoise d'une ligne à l'autre, et le suffixe « -les. » en orange.
 *
 * Le dégradé est posé teinte par teinte plutôt qu'avec « background-clip:
 * text » : celui-ci aurait emporté les suffixes avec lui, or ils portent une
 * autre couleur. Les trois lignes sont forcées parce que la maquette les
 * montre ainsi ; « text-wrap: balance » les redistribuerait.
 */
.kazanimal-hero__title-line {
	display: block;
}

.kazanimal-hero__title-line--1 .kazanimal-hero__title-verb {
	color: var(--kazanimal-hero-title-start);
}

.kazanimal-hero__title-line--2 .kazanimal-hero__title-verb {
	color: var(--kazanimal-hero-title-mid);
}

.kazanimal-hero__title-line--3 .kazanimal-hero__title-verb {
	color: var(--kazanimal-hero-title-end);
}

/*
 * L'orange de la marque, sous le seuil WCAG AA même à cette taille — l'écart
 * est celui déjà assumé pour les boutons, en tête de cette feuille. Le titre
 * n'est pas la seule voie vers l'information : la phrase qui le suit dit la
 * même chose en toutes lettres.
 */
.kazanimal-hero__title-suffix {
	color: var(--kazanimal-primary);
}

.kazanimal-hero__lead {
	font-size: 1.05rem;
	line-height: 1.6;
	margin: 0 0 0.5rem;
	max-width: 44ch;
}

.kazanimal-hero__reassure {
	color: var(--kazanimal-muted);
	margin: 0 0 1.25rem;
}

.kazanimal-hero__actions {
	display: flex;
	flex-direction: column;
	gap: 0.6rem;
}

/*
 * Les trois raccourcis reprennent la couleur de leur statut : c'est le seul
 * endroit du plugin où un bouton n'est pas orange, parce qu'ici la couleur
 * distingue trois actions de même importance. Le libellé, lui, dit toujours de
 * quoi il s'agit.
 */
.kazanimal-hero__actions .kazanimal-button--lost {
	background: #e95d68;
	border-color: var(--kazanimal-lost);
}

.kazanimal-hero__actions .kazanimal-button--found {
	background: #038c96;
	border-color: var(--kazanimal-found);
}

.kazanimal-hero__actions .kazanimal-button--stray {
	background: #f97902;
	border-color: var(--kazanimal-stray);
}

.kazanimal-hero__actions .kazanimal-button {
	justify-content: flex-start;
	text-align: left;
}

/*
 * La composition de droite est purement décorative : trois cartes chiffrées,
 * dessinées en CSS. Aucune image n'est chargée, et donc rien ne vient d'un
 * serveur tiers.
 */

/*
 * La composition de droite est purement décorative : trois cartes chiffrées,
 * dessinées en CSS. Aucune image n'est chargée, et donc rien ne vient d'un
 * serveur tiers.
 */
/* Photo d'en-tête : elle est décorative, le texte porte tout le sens. */

.kazanimal-hero__media {
	align-items: center;
	display: flex;
	justify-content: center;
}

.kazanimal-hero__photo {
	height: auto;
	max-width: 100%;
	/*
	 * Le fichier porte un fond clair plutôt qu'une transparence : le mélange
	 * multiplicatif l'efface sur le fond de la page, sans retoucher l'image.
	 */
	mix-blend-mode: multiply;
	width: 100%;
}

/* Compteurs du jour : une pastille, un nombre, un mot. */

.kazanimal-hero__counters {
	display: grid;
	gap: 0.6rem;
}

.kazanimal-hero__counter {
	align-items: center;
	background: var(--kazanimal-surface-alt);
	border-radius: 999px;
	display: flex;
	gap: 0.6rem;
	margin: 0;
	padding: 0.5rem 1rem 0.5rem 0.5rem;
}

/*
 * Chaque compteur mène à sa liste. Hello Elementor souligne tout lien de
 * contenu par « .page-content a » (0-1-1) et charge après les extensions :
 * qualifier par le conteneur et l'élément (0-2-1) reprend la main sans
 * « !important », même remède que pour les boutons. L'encre passe par une
 * variable, seule façon de garder une couleur par type sans répéter la règle.
 */
.kazanimal a.kazanimal-hero__counter {
	color: var(--kazanimal-counter-ink, inherit);
	text-decoration: none;
}

.kazanimal a.kazanimal-hero__counter:hover .kazanimal-hero__counter-label,
.kazanimal a.kazanimal-hero__counter:focus-visible .kazanimal-hero__counter-label {
	text-decoration: underline;
}

.kazanimal-hero__counter-icon {
	align-items: center;
	background: #ffffff;
	border-radius: 50%;
	display: inline-flex;
	flex: 0 0 auto;
	height: 2rem;
	justify-content: center;
	width: 2rem;
}

.kazanimal-hero__counter-value {
	font-size: 1.35rem;
	font-weight: 700;
	line-height: 1;
}

/*
 * Le libellé tient sur une seule ligne : coupé en deux, le compteur perd sa
 * silhouette de pastille et sa hauteur change d'un compteur à l'autre. Le plus
 * long — « animaux à adopter » — reste sous la largeur d'un écran de 320 px,
 * pastille et nombre compris.
 */
.kazanimal-hero__counter-label {
	color: var(--kazanimal-muted);
	font-size: 0.85rem;
	line-height: 1.2;
	white-space: nowrap;
}

.kazanimal-hero__counter--lost {
	--kazanimal-counter-ink: var(--kazanimal-lost);

	background: var(--kazanimal-lost-soft);
	color: var(--kazanimal-lost);
}

.kazanimal-hero__counter--found {
	--kazanimal-counter-ink: var(--kazanimal-found);

	background: var(--kazanimal-found-soft);
	color: var(--kazanimal-found);
}

.kazanimal-hero__counter--stray {
	--kazanimal-counter-ink: var(--kazanimal-stray);

	background: var(--kazanimal-stray-soft);
	color: var(--kazanimal-stray);
}

/*
 * Les refuges n'ont pas de couleur de statut : leur teinte est celle des
 * étiquettes d'adoption, le bleu-vert. L'encre est celle de l'accent plutôt que
 * le #0699a5 de l'étiquette, qui donnerait 2,9:1 sur ce fond très clair là où un
 * texte courant en demande 4,5.
 */
.kazanimal-hero__counter--shelter {
	--kazanimal-counter-ink: var(--kazanimal-accent);

	background: var(--kazanimal-adoption-soft);
	color: var(--kazanimal-accent);
}

/* Accueil : les deux listes récentes, puis la carte et l'appel aux saillies.

   Chaque paire tient sur une bande. Sous 64 em, les colonnes se replient l'une
   sous l'autre : deux listes de trois cartes côte à côte deviendraient
   illisibles bien avant. */

.kazanimal-recent,
.kazanimal-map-row {
	display: grid;
	gap: var(--kazanimal-gap);
	grid-template-columns: 1fr;
}

@media (min-width: 64em) {
	.kazanimal-recent {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.kazanimal-map-row {
		align-items: start;
		grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
	}
}

/* Dans les colonnes de l'accueil, les cartes se resserrent un peu : trois par
   liste, dans moins de place. Elles gardent leurs deux boutons — décision du
   12 septembre 2026, qui remplace celle de l'étape 11 : une seule carte partout,
   la même qu'ailleurs. */

.kazanimal-recent .kazanimal-grid--cards {
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 0.6rem;
}

.kazanimal-recent .kazanimal-card__body,
.kazanimal-recent-block .kazanimal-card__body {
	padding: 0.7rem;
}

.kazanimal-recent .kazanimal-card__title,
.kazanimal-recent-block .kazanimal-card__title {
	font-size: 0.95rem;
}

.kazanimal-recent .kazanimal-card__meta,
.kazanimal-recent .kazanimal-card__place,
.kazanimal-recent-block .kazanimal-card__meta,
.kazanimal-recent-block .kazanimal-card__place {
	font-size: 0.78rem;
}

/* Les boutons y sont empilés et un cran plus petits : trois colonnes dans une
   demi-largeur laissent moins de 160 px par carte, où « Voir l'annonce » et
   « Ajouter aux favoris » ne tiennent pas côte à côte. Mesuré sur le site, pas
   supposé. */

.kazanimal-recent .kazanimal-card__actions,
.kazanimal-recent-block .kazanimal-card__actions {
	flex-direction: column;
	gap: 0.35rem;
}

/* « flex: 1 1 10.5rem » vise la largeur d'une ligne ; en colonne, cette base
   devient une hauteur et donnerait des boutons de 168 px de haut. */

.kazanimal-recent .kazanimal-card__actions > *,
.kazanimal-recent-block .kazanimal-card__actions > * {
	flex: 0 0 auto;
	font-size: 0.8rem;
	min-height: 2.25rem;
	padding: 0.35rem 0.6rem;
}

@media (max-width: 47.99em) {
	.kazanimal-recent .kazanimal-grid--cards {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

/* Dernière bande : engagements à gauche, raccourcis du compte à droite. */

.kazanimal-trust-row {
	display: grid;
	gap: var(--kazanimal-gap);
	grid-template-columns: 1fr;
}

.kazanimal-shortcuts__list {
	display: grid;
	gap: 0.4rem;
	list-style: none;
	margin: 0;
	padding: 0;
}

.kazanimal-shortcut {
	align-items: center;
	border-radius: var(--kazanimal-radius-sm);
	display: flex;
	gap: 0.7rem;
	padding: 0.6rem 0.5rem;
	text-decoration: none;
	transition: background-color 150ms ease;
}

.kazanimal-shortcut:hover,
.kazanimal-shortcut:focus-visible {
	background: var(--kazanimal-primary-soft);
}

.kazanimal-shortcut__icon {
	align-items: center;
	color: var(--kazanimal-accent);
	display: inline-flex;
	flex: 0 0 auto;
	justify-content: center;
}

.kazanimal-shortcut__text {
	display: grid;
	flex: 1 1 auto;
	gap: 0.1rem;
}

.kazanimal-shortcut__title {
	color: var(--kazanimal-ink);
	font-weight: 600;
}

.kazanimal-shortcut__desc {
	color: var(--kazanimal-muted);
	font-size: 0.85rem;
}

.kazanimal-shortcut__chevron {
	color: var(--kazanimal-muted);
	flex: 0 0 auto;
	font-size: 1.3rem;
	line-height: 1;
}

@media (min-width: 64em) {
	.kazanimal-trust-row {
		align-items: start;
		grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr);
	}
}

/* Sections -------------------------------------------------------------- */

.kazanimal-section__head {
	align-items: baseline;
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem 1rem;
	justify-content: space-between;
}

.kazanimal-section__title {
	align-items: center;
	display: flex;
	font-size: 1.3rem;
	gap: 0.5rem;
	line-height: 1.3;
	margin: 0 0 0.5rem;
}

.kazanimal-section__title .kazanimal-icon {
	color: var(--kazanimal-primary);
}

.kazanimal-section__lead {
	color: var(--kazanimal-muted);
	margin: 0 0 1rem;
	max-width: 60ch;
}

.kazanimal-section__more {
	white-space: nowrap;
}

/* Recherche rapide ------------------------------------------------------ */

.kazanimal-quick-search__form {
	background: var(--kazanimal-surface-alt);
	border: 1px solid var(--kazanimal-border);
	border-radius: var(--kazanimal-radius);
	display: grid;
	gap: 0.75rem;
	grid-template-columns: 1fr;
	padding: 1rem;
}

.kazanimal-quick-search__form .kazanimal-field {
	margin: 0;
}

/* Actions principales --------------------------------------------------- */

.kazanimal-actions {
	display: grid;
	gap: var(--kazanimal-gap);
	grid-template-columns: 1fr;
}

.kazanimal-action {
	background: var(--kazanimal-surface);
	border: 1px solid var(--kazanimal-border);
	border-radius: var(--kazanimal-radius);
	display: flex;
	flex-direction: column;
	gap: 0.4rem;
	padding: 1.1rem;
	position: relative;
	transition: box-shadow 180ms ease, transform 180ms ease;
}

/*
 * Un filet de couleur en haut de carte rappelle le statut concerné. Il est
 * décoratif : le titre de la carte dit déjà de quel signalement il s'agit.
 */
.kazanimal-action::before {
	background: var(--kazanimal-primary);
	border-radius: var(--kazanimal-radius) var(--kazanimal-radius) 0 0;
	content: "";
	height: 3px;
	left: 0;
	position: absolute;
	right: 0;
	top: 0;
}

.kazanimal-action--lost::before {
	background: #e95d68;
}

.kazanimal-action--found::before {
	background: #038c96;
}

.kazanimal-action--stray::before {
	background: #f97902;
}

/*
 * La saillie est la seule rubrique du site sans statut de signalement : elle
 * porte sa propre teinte, un violet qui ne se confond avec aucune des trois
 * autres.
 */
.kazanimal-action--breeding::before {
	background: var(--kazanimal-breeding, #7c4dcc);
}

.kazanimal-action:hover {
	box-shadow: var(--kazanimal-shadow);
	transform: translateY(-2px);
}

.kazanimal-action__icon {
	align-items: center;
	background: var(--kazanimal-primary-soft);
	border-radius: 999px;
	color: var(--kazanimal-primary);
	display: inline-flex;
	height: 2.75rem;
	justify-content: center;
	width: 2.75rem;
}

.kazanimal-action--lost .kazanimal-action__icon {
	background: var(--kazanimal-lost-soft);
	color: var(--kazanimal-lost);
}

.kazanimal-action--found .kazanimal-action__icon {
	background: var(--kazanimal-found-soft);
	color: var(--kazanimal-found);
}

.kazanimal-action--stray .kazanimal-action__icon {
	background: var(--kazanimal-stray-soft);
	color: var(--kazanimal-stray);
}

.kazanimal-action--breeding .kazanimal-action__icon {
	background: var(--kazanimal-breeding-soft, #f1ebfb);
	color: var(--kazanimal-breeding, #7c4dcc);
}

.kazanimal-action__title {
	font-size: 1.1rem;
	margin: 0.25rem 0 0;
}

.kazanimal-action__text {
	color: var(--kazanimal-muted);
	flex: 1 1 auto;
	margin: 0;
}

.kazanimal-action__link {
	align-self: flex-start;
	gap: 0.35rem;
}

/* Listes d'annonces ----------------------------------------------------- */

.kazanimal-grid--cards {
	grid-template-columns: 1fr;
}

.kazanimal-grid--cards .kazanimal-card {
	background: var(--kazanimal-surface);
	transition: box-shadow 180ms ease, transform 180ms ease;
}

.kazanimal-grid--cards .kazanimal-card:hover {
	box-shadow: var(--kazanimal-shadow);
	transform: translateY(-2px);
}

/* Aperçu cartographique ------------------------------------------------- */

.kazanimal-map--preview {
	border: 1px solid var(--kazanimal-border);
	border-radius: var(--kazanimal-radius);
	height: 320px;
	overflow: hidden;
}

/* Saillies -------------------------------------------------------------- */

.kazanimal-breeding-teaser {
	background: var(--kazanimal-primary-soft);
	border: 1px solid var(--kazanimal-border);
	border-radius: var(--kazanimal-radius);
	border-top: 0;
	margin-top: 1.5rem;
	padding: 1.25rem;
}

.kazanimal-breeding-teaser__points {
	display: grid;
	gap: 0.4rem;
	grid-template-columns: 1fr;
	list-style: none;
	margin: 0 0 1rem;
	padding: 0;
}

.kazanimal-breeding-teaser__points li {
	padding-left: 1.5rem;
	position: relative;
}

.kazanimal-breeding-teaser__points li::before {
	background: var(--kazanimal-primary);
	border-radius: 999px;
	content: "";
	height: 0.4rem;
	left: 0.4rem;
	position: absolute;
	top: 0.6rem;
	width: 0.4rem;
}

/* Étapes ---------------------------------------------------------------- */

.kazanimal-steps-section .kazanimal-steps {
	display: grid;
	gap: var(--kazanimal-gap);
	grid-template-columns: 1fr;
	list-style: none;
	margin: 0;
	padding: 0;
}

.kazanimal-step {
	background: var(--kazanimal-surface);
	border: 1px solid var(--kazanimal-border);
	border-radius: var(--kazanimal-radius);
	padding: 1rem;
}

.kazanimal-steps-section .kazanimal-step + .kazanimal-step {
	margin-top: 0;
}

.kazanimal-step__marker {
	align-items: center;
	background: var(--kazanimal-primary-soft);
	border-radius: 999px;
	color: var(--kazanimal-primary);
	display: inline-flex;
	height: 2.75rem;
	justify-content: center;
	margin-bottom: 0.5rem;
	position: relative;
	width: 2.75rem;
}

.kazanimal-step__number {
	background: var(--kazanimal-primary);
	border-radius: 999px;
	color: var(--kazanimal-primary-contrast);
	font-size: 0.7rem;
	font-weight: 700;
	height: 1.15rem;
	line-height: 1.15rem;
	position: absolute;
	right: -0.2rem;
	text-align: center;
	top: -0.2rem;
	width: 1.15rem;
}

.kazanimal-step__title {
	font-size: 1.05rem;
	margin: 0 0 0.25rem;
}

.kazanimal-step__text {
	color: var(--kazanimal-muted);
	margin: 0;
}

/* Alertes --------------------------------------------------------------- */

.kazanimal-alerts-teaser {
	align-items: center;
	background: var(--kazanimal-surface-alt);
	border: 1px solid var(--kazanimal-border);
	border-radius: var(--kazanimal-radius);
	border-top: 0;
	display: grid;
	gap: 0.75rem;
	grid-template-columns: 1fr;
	margin-top: 1.5rem;
	padding: 1.25rem;
}

.kazanimal-alerts-teaser__icon {
	align-items: center;
	background: var(--kazanimal-primary-soft);
	border-radius: 999px;
	color: var(--kazanimal-primary);
	display: inline-flex;
	height: 3rem;
	justify-content: center;
	width: 3rem;
}

.kazanimal-alerts-teaser__body .kazanimal-section__title {
	margin-bottom: 0.35rem;
}

.kazanimal-alerts-teaser__action {
	margin: 0;
}

/* Engagements ----------------------------------------------------------- */

.kazanimal-trust__list {
	display: grid;
	gap: 0.75rem;
	grid-template-columns: 1fr;
	list-style: none;
	margin: 0;
	padding: 0;
}

.kazanimal-trust__item {
	align-items: flex-start;
	display: flex;
	gap: 0.6rem;
}

.kazanimal-trust__icon {
	align-items: center;
	color: var(--kazanimal-primary);
	display: inline-flex;
	flex: 0 0 auto;
	height: 1.75rem;
	justify-content: center;
	width: 1.75rem;
}

.kazanimal-trust__text {
	color: var(--kazanimal-muted);
}

.kazanimal-trust__text strong {
	color: var(--kazanimal-text);
	display: block;
}

/* Appel final ----------------------------------------------------------- */

.kazanimal-final-cta {
	background: var(--kazanimal-primary-soft);
	border: 1px solid var(--kazanimal-border);
	border-radius: var(--kazanimal-radius);
	border-top: 0;
	margin-top: 1.5rem;
	padding: 1.75rem 1.25rem;
	text-align: center;
}

.kazanimal-final-cta__icon {
	align-items: center;
	background: var(--kazanimal-primary);
	border-radius: 999px;
	color: var(--kazanimal-primary-contrast);
	display: inline-flex;
	height: 3.5rem;
	justify-content: center;
	margin-bottom: 0.5rem;
	width: 3.5rem;
}

.kazanimal-final-cta__title {
	font-size: 1.5rem;
	margin: 0 0 0.35rem;
}

.kazanimal-final-cta__text {
	color: var(--kazanimal-muted);
	margin: 0 0 1rem;
}

.kazanimal-final-cta .kazanimal-choices {
	align-items: center;
	justify-content: center;
}

.kazanimal-final-cta__help {
	margin: 0.75rem 0 0;
}

/* Menu et en-tête ------------------------------------------------------- */

.kazanimal-menu ul {
	display: flex;
	flex-wrap: wrap;
	gap: 0.25rem 0.5rem;
	list-style: none;
	margin: 0;
	padding: 0;
}

.kazanimal-menu--vertical ul {
	flex-direction: column;
}

.kazanimal-menu li {
	margin: 0;
}

.kazanimal-menu a {
	align-items: center;
	border-radius: var(--kazanimal-radius-sm);
	display: inline-flex;
	/* 44 px : un lien de navigation est un contrôle principal. */
	min-height: 2.75rem;
	padding: 0.4rem 0.7rem;
	text-decoration: none;
	transition: background-color 150ms ease;
}

.kazanimal-menu a:hover,
.kazanimal-menu a:focus-visible {
	background: var(--kazanimal-primary-soft);
	color: var(--kazanimal-primary-dark);
}

.kazanimal-menu .current-menu-item > a {
	color: var(--kazanimal-primary-dark);
	font-weight: 700;
}

.kazanimal-header {
	align-items: center;
	border-bottom: 1px solid var(--kazanimal-border);
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem 1rem;
	justify-content: space-between;
	padding: 0.75rem 0;
}

.kazanimal-header__brand {
	align-items: center;
	color: inherit;
	display: inline-flex;
	font-size: 1.15rem;
	font-weight: 700;
	gap: 0.5rem;
	text-decoration: none;
}

.kazanimal-header__brand .kazanimal-icon {
	color: var(--kazanimal-primary);
}

.kazanimal-header__logo {
	display: block;
	height: auto;
	max-height: 3rem;
	width: auto;
}

.kazanimal-header__nav {
	flex: 1 1 100%;
}

.kazanimal-header__action {
	margin: 0;
}

/* Paliers responsive ---------------------------------------------------- */

@media (min-width: 30em) {
	.kazanimal-hero__actions {
		flex-direction: row;
		flex-wrap: wrap;
	}

	/*
	 * Les trois raccourcis tiennent sur une ligne : leur libellé passe sur deux
	 * lignes plutôt que d'étirer le bouton, comme sur la maquette.
	 */
	.kazanimal-hero__actions .kazanimal-button {
		flex: 1 1 0;
		line-height: 1.25;
		max-width: 12rem;
		min-height: 3.25rem;
		white-space: normal;
	}

	.kazanimal-choices {
		flex-direction: row;
		flex-wrap: wrap;
	}
}

@media (min-width: 48em) {
	.kazanimal-actions,
	.kazanimal-grid--cards,
	.kazanimal-steps-section .kazanimal-steps,
	.kazanimal-trust__list {
		grid-template-columns: repeat(2, 1fr);
	}

	.kazanimal-quick-search__form {
		align-items: end;
		grid-template-columns: repeat(2, 1fr);
	}

	.kazanimal-breeding-teaser__points {
		grid-template-columns: repeat(2, 1fr);
	}

	.kazanimal-alerts-teaser {
		grid-template-columns: auto 1fr auto;
	}

	.kazanimal-map--preview {
		height: 420px;
	}

	.kazanimal-header__nav {
		flex: 1 1 auto;
	}
}

@media (min-width: 64em) {
	/*
	 * Trois colonnes : le texte et ses raccourcis, la photo, puis les compteurs
	 * du jour. La photo prend la place qui reste, les compteurs gardent une
	 * largeur fixe pour que leurs nombres s'alignent.
	 */
	.kazanimal-hero {
		align-items: center;
		gap: 2rem;
		grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr) 15rem;
	}

	.kazanimal-hero__badge {
		flex-direction: row;
		gap: 0.75rem;
		justify-content: flex-start;
		padding: 0.85rem 1.1rem;
		text-align: left;
	}

	.kazanimal-hero__badge-label {
		color: var(--kazanimal-muted);
	}

	.kazanimal-actions,
	.kazanimal-grid--cards,
	.kazanimal-steps-section .kazanimal-steps {
		grid-template-columns: repeat(4, 1fr);
	}

	.kazanimal-trust__list {
		grid-template-columns: repeat(3, 1fr);
	}

	.kazanimal-quick-search__form {
		grid-template-columns: repeat(4, 1fr);
	}

	.kazanimal-map--preview {
		height: 450px;
	}
}

/* Préférences du visiteur ----------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
	.kazanimal-action,
	.kazanimal-grid--cards .kazanimal-card,
	.kazanimal-menu a {
		transition: none;
	}

	.kazanimal-action:hover,
	.kazanimal-grid--cards .kazanimal-card:hover {
		transform: none;
	}
}

/*
 * Prise en charge raisonnable des thèmes sombres : seules les surfaces et les
 * bordures sont réajustées, et la couleur du texte reste héritée. Les tuiles de
 * la carte ne sont jamais filtrées — inverser une carte la rend illisible et
 * fausse la lecture du relief.
 */
@media (prefers-color-scheme: dark) {
	.kazanimal {
		--kazanimal-accent: #5eead4;
		--kazanimal-adoption-soft: #17282c;
		--kazanimal-border: #3b4149;
		--kazanimal-found-soft: #1c2a22;
		--kazanimal-hero-title-end: #5eead4;
		--kazanimal-hero-title-mid: #9ad6de;
		--kazanimal-hero-title-start: #e7ecf1;
		--kazanimal-ink: #e7ecf1;
		--kazanimal-lost-soft: #2c1f1e;
		--kazanimal-muted: #a8b1bb;
		--kazanimal-primary: #f97316;
		--kazanimal-primary-contrast: #1a1512;
		--kazanimal-primary-dark: #fb923c;
		--kazanimal-primary-soft: #2a2320;
		--kazanimal-shadow: 0 1px 2px rgba(0, 0, 0, 0.4), 0 6px 16px -10px rgba(0, 0, 0, 0.7);
		--kazanimal-stray-soft: #2b2418;
		--kazanimal-surface: #22262b;
		--kazanimal-surface-alt: #1d2126;
	}

	.kazanimal-hero__badge--lost {
		color: #fca5a1;
	}

	.kazanimal-hero__badge--found {
		color: #86d9a6;
	}

	.kazanimal-hero__badge--stray {
		color: #e8c07a;
	}

	.kazanimal-card__image--empty {
		background: repeating-linear-gradient(45deg, #2a2f35, #2a2f35 10px, #23272c 10px, #23272c 20px);
	}
}

/*
 * Soulignement des contrôles : le même piège qu'en 0.6.1, sur une autre
 * propriété.
 *
 * Hello Elementor souligne les liens de contenu avec « .page-content a », de
 * spécificité 0-1-1 — exactement celle de « a.kazanimal-button ». À égalité,
 * c'est l'ordre de chargement qui tranche, et le thème charge après les
 * extensions : les libellés des boutons se retrouvaient soulignés.
 *
 * Qualifier par le conteneur porte la spécificité à 0-2-1 et rend le résultat
 * indépendant de l'ordre, sans recourir à !important. Les liens de texte du
 * plugin, eux, restent soulignés : c'est ce qui les signale comme des liens.
 */
.kazanimal a.kazanimal-button,
.kazanimal .kazanimal-menu a,
.kazanimal a.kazanimal-header__brand,
.kazanimal a.kazanimal-card__title,
.kazanimal .kazanimal-card__title a,
.kazanimal .kazanimal-tab,
.kazanimal .kazanimal-account-nav__link,
.kazanimal a.kazanimal-shortcut {
	text-decoration: none;
}

/*
 * Le survol couvre les trois formes du bouton. La règle ne visait auparavant
 * que « a.kazanimal-button » : un « button » ou un « input » ne changeait donc
 * pas d'aspect au survol, alors que la plupart des actions du plugin — envoyer
 * un formulaire, publier, payer — en sont précisément.
 */
.kazanimal button.kazanimal-button:hover,
.kazanimal button.kazanimal-button:focus-visible,
.kazanimal a.kazanimal-button:hover,
.kazanimal a.kazanimal-button:focus-visible,
.kazanimal input.kazanimal-button:hover,
.kazanimal input.kazanimal-button:focus-visible {
	background: var(--kazanimal-primary-hover);
	border-color: var(--kazanimal-primary-hover);
	color: var(--kazanimal-primary-hover-contrast);
}

.kazanimal .kazanimal-card__title a:hover,
.kazanimal .kazanimal-card__title a:focus-visible {
	text-decoration: underline;
}

/*
 * ---------------------------------------------------------------------------
 * Fiches détaillées : signalements et annonces de saillie
 * ---------------------------------------------------------------------------
 *
 * Tout est porté par « .kazanimal-single », que portent les deux fiches ; les
 * quelques blocs propres à la saillie gardent leur préfixe « breeding ».
 * Trois classes employées ici — card, facts, note — existaient déjà pour les
 * listes et les formulaires : les redéfinir globalement aurait changé des
 * écrans qui n'avaient rien demandé. Le contexte parent les spécialise sans
 * les toucher ailleurs.
 */
.kazanimal-single {
	/* Teinte des pastilles et des étiquettes : l'accent, très éclairci. */
	--kazanimal-detail-tint: #e8f3f5;
	/* Fond d'une ligne sur deux dans les tableaux de caractéristiques. */
	--kazanimal-detail-zebra: #f6f8f9;
	/* Encre des titres : plus sombre que le texte courant, comme la maquette. */
	--kazanimal-detail-ink: #12354a;
	/* Vert d'un point déclaré ; le rouge n'existe pas ici, rien n'est refusé. */
	--kazanimal-detail-yes: #1f9d55;

	color: var(--kazanimal-text);
	display: flex;
	flex-direction: column;
	gap: 1.5rem;
	margin: 0 auto;
	max-width: 68rem;
}

/* Fil d'Ariane ----------------------------------------------------------- */

.kazanimal-single .kazanimal-breadcrumb__list {
	display: flex;
	flex-wrap: wrap;
	font-size: 0.85rem;
	gap: 0.5rem;
	list-style: none;
	margin: 0;
	padding: 0;
}

.kazanimal-single .kazanimal-breadcrumb__list li + li::before {
	color: var(--kazanimal-muted);
	content: ">";
	margin-right: 0.5rem;
}

.kazanimal-single .kazanimal-breadcrumb__list a {
	color: var(--kazanimal-muted);
	text-decoration: none;
}

.kazanimal-single .kazanimal-breadcrumb__list a:hover,
.kazanimal-single .kazanimal-breadcrumb__list a:focus-visible {
	text-decoration: underline;
}

.kazanimal-single .kazanimal-breadcrumb__list [aria-current="page"] {
	color: var(--kazanimal-detail-ink);
	font-weight: 600;
}

/* Titre ------------------------------------------------------------------ */

.kazanimal-breeding__header,
.kazanimal-single__header {
	align-items: flex-start;
	display: flex;
	flex-wrap: wrap;
	gap: 1rem;
	justify-content: space-between;
}

.kazanimal-breeding__title-row,
.kazanimal-single__title-row {
	align-items: center;
	display: flex;
	gap: 0.75rem;
}

.kazanimal-single .kazanimal-title {
	color: var(--kazanimal-detail-ink);
	font-size: clamp(1.9rem, 1.2rem + 2vw, 2.6rem);
	line-height: 1.15;
	margin: 0;
}

.kazanimal-breeding__tagline,
.kazanimal-single__tagline {
	color: var(--kazanimal-muted);
	margin: 0.35rem 0 0;
}

.kazanimal-breeding__badge {
	background: var(--kazanimal-primary-soft);
	border-radius: 999px;
	color: var(--kazanimal-primary-dark);
	font-size: 0.8rem;
	font-weight: 600;
	margin-left: 0.5rem;
	padding: 0.15rem 0.6rem;
}

/*
 * La formule manuscrite est décorative : elle est masquée aux lecteurs d'écran
 * par le gabarit, et disparaît sous 60em où elle n'aurait plus de place.
 */
.kazanimal-breeding__flourish {
	align-items: center;
	color: var(--kazanimal-detail-ink);
	display: none;
	gap: 0.6rem;
	margin: 0;
}

.kazanimal-breeding__flourish-text {
	font-family: var(--kazanimal-script-font, cursive);
	font-size: 1.35rem;
	line-height: 1.25;
	max-width: 12em;
	text-align: right;
}

.kazanimal-breeding__flourish .kazanimal-icon {
	color: var(--kazanimal-accent);
	flex: none;
}

@media (min-width: 60em) {
	.kazanimal-breeding__flourish {
		display: flex;
	}
}

/* Haut de page : galerie et panneau -------------------------------------- */

.kazanimal-breeding__top,
.kazanimal-single__top {
	align-items: start;
	display: grid;
	gap: 1.5rem;
	grid-template-columns: 1fr;
}

@media (min-width: 60em) {
	.kazanimal-breeding__top,
	.kazanimal-single__top {
		grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
	}
}

/* Carrousel -------------------------------------------------------------- */

.kazanimal-carousel {
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
	min-width: 0;
}

.kazanimal-carousel__stage {
	border-radius: var(--kazanimal-radius);
	overflow: hidden;
	position: relative;
}

.kazanimal-carousel__slide {
	margin: 0;
}

.kazanimal-carousel__slide img {
	aspect-ratio: 4 / 3;
	display: block;
	height: auto;
	object-fit: cover;
	width: 100%;
}

.kazanimal-carousel--empty {
	background: var(--kazanimal-surface-alt);
	border: 1px dashed var(--kazanimal-border);
	border-radius: var(--kazanimal-radius);
	display: grid;
	min-height: 16rem;
	place-items: center;
}

.kazanimal-single button.kazanimal-carousel__arrow {
	align-items: center;
	background: var(--kazanimal-surface);
	border: 0;
	border-radius: 999px;
	box-shadow: var(--kazanimal-shadow);
	color: var(--kazanimal-detail-ink);
	cursor: pointer;
	display: flex;
	height: 2.25rem;
	justify-content: center;
	padding: 0;
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	width: 2.25rem;
}

.kazanimal-single button.kazanimal-carousel__arrow--previous {
	left: 0.75rem;
}

.kazanimal-single button.kazanimal-carousel__arrow--next {
	right: 0.75rem;
}

.kazanimal-carousel__counter {
	background: rgba(18, 53, 74, 0.72);
	border-radius: 999px;
	bottom: 0.75rem;
	color: #fff;
	font-size: 0.8rem;
	left: 0.75rem;
	margin: 0;
	padding: 0.15rem 0.6rem;
	position: absolute;
}

.kazanimal-carousel__thumbs {
	display: flex;
	gap: 0.6rem;
	list-style: none;
	margin: 0;
	overflow-x: auto;
	padding: 0;
}

.kazanimal-single a.kazanimal-carousel__thumb {
	border: 2px solid transparent;
	border-radius: 0.6rem;
	display: block;
	overflow: hidden;
	text-decoration: none;
}

.kazanimal-single a.kazanimal-carousel__thumb.is-current {
	border-color: var(--kazanimal-accent);
}

.kazanimal-carousel__thumb img {
	aspect-ratio: 4 / 3;
	display: block;
	height: auto;
	object-fit: cover;
	width: 5.5rem;
}

/* Cartes ----------------------------------------------------------------- */

.kazanimal-single .kazanimal-card {
	background: var(--kazanimal-surface);
	border: 1px solid var(--kazanimal-border);
	border-radius: var(--kazanimal-radius);
	box-shadow: var(--kazanimal-shadow);
	display: flex;
	flex-direction: column;
	gap: 0.9rem;
	overflow: visible;
	padding: 1.25rem;
}

.kazanimal-single .kazanimal-card__head {
	align-items: center;
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	justify-content: space-between;
}

.kazanimal-single .kazanimal-card__title {
	align-items: center;
	color: var(--kazanimal-detail-ink);
	display: flex;
	font-size: 1.15rem;
	gap: 0.55rem;
	margin: 0;
}

.kazanimal-single .kazanimal-card__icon {
	align-items: center;
	color: var(--kazanimal-accent);
	display: inline-flex;
	flex: none;
}

.kazanimal-chip {
	background: var(--kazanimal-detail-tint);
	border-radius: 999px;
	color: var(--kazanimal-accent);
	font-size: 0.85rem;
	font-weight: 600;
	margin: 0;
	padding: 0.2rem 0.7rem;
	white-space: nowrap;
}

.kazanimal-single .kazanimal-card p {
	margin: 0;
}

/* Tableaux de caractéristiques ------------------------------------------- */

.kazanimal-single .kazanimal-facts {
	display: flex;
	flex-direction: column;
	gap: 0;
	margin: 0;
}

.kazanimal-single .kazanimal-facts__row {
	align-items: center;
	border-radius: 0.5rem;
	display: grid;
	gap: 0.5rem 1rem;
	grid-template-columns: minmax(0, 1fr) auto;
	padding: 0.55rem 0.7rem;
}

.kazanimal-single .kazanimal-facts__row:nth-child(odd) {
	background: var(--kazanimal-detail-zebra);
}

.kazanimal-single .kazanimal-facts__label {
	align-items: center;
	color: var(--kazanimal-muted);
	display: flex;
	font-size: 0.92rem;
	gap: 0.6rem;
}

.kazanimal-facts__icon {
	align-items: center;
	background: var(--kazanimal-detail-tint);
	border-radius: 999px;
	color: var(--kazanimal-accent);
	display: inline-flex;
	flex: none;
	height: 2rem;
	justify-content: center;
	width: 2rem;
}

.kazanimal-single .kazanimal-facts__value {
	color: var(--kazanimal-detail-ink);
	font-weight: 600;
	margin: 0;
	text-align: right;
}

.kazanimal-facts__sub {
	color: var(--kazanimal-muted);
	display: block;
	font-size: 0.85rem;
	font-weight: 400;
}

/*
 * Dans les cartes, la valeur n'est pas repoussée à droite mais alignée sur une
 * colonne : les libellés y sont plus longs et le regard suivrait mal une
 * colonne en drapeau à droite.
 */
.kazanimal-single .kazanimal-facts--plain .kazanimal-facts__row {
	grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
}

.kazanimal-single .kazanimal-facts--plain .kazanimal-facts__value {
	text-align: left;
}

/* États déclarés --------------------------------------------------------- */

.kazanimal-state {
	align-items: center;
	color: var(--kazanimal-muted);
	display: inline-flex;
	gap: 0.4rem;
}

.kazanimal-state__mark {
	align-items: center;
	color: #b3bcc6;
	display: inline-flex;
	flex: none;
}

.kazanimal-state--yes {
	color: var(--kazanimal-detail-yes);
}

.kazanimal-state--yes .kazanimal-state__mark {
	color: var(--kazanimal-detail-yes);
}

/* Encart d'information --------------------------------------------------- */

.kazanimal-single .kazanimal-note {
	align-items: flex-start;
	background: #eef5fb;
	border-radius: var(--kazanimal-radius);
	color: var(--kazanimal-muted);
	display: flex;
	font-size: 0.875rem;
	gap: 0.6rem;
	margin: 0;
	padding: 0.9rem;
}

.kazanimal-note__icon {
	align-items: center;
	color: #3d7fb8;
	display: inline-flex;
	flex: none;
}

/* Grille des cartes ------------------------------------------------------ */

.kazanimal-breeding__grid {
	align-items: start;
	display: grid;
	gap: 1.5rem;
	grid-template-columns: 1fr;
}

@media (min-width: 60em) {
	.kazanimal-breeding__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

.kazanimal-breeding__column {
	display: flex;
	flex-direction: column;
	gap: 1.5rem;
	min-width: 0;
}

/* Panneau d'actions ------------------------------------------------------ */

.kazanimal-breeding__cta,
.kazanimal-single__cta {
	display: flex;
	flex-direction: column;
	gap: 0.6rem;
}

.kazanimal-single button.kazanimal-button--block,
.kazanimal-single a.kazanimal-button--block,
.kazanimal-single input.kazanimal-button--block {
	gap: 0.5rem;
	width: 100%;
}

.kazanimal-single button.kazanimal-button--outline,
.kazanimal-single a.kazanimal-button--outline {
	background: var(--kazanimal-surface);
	border-color: var(--kazanimal-accent);
	color: var(--kazanimal-accent);
}

.kazanimal-single button.kazanimal-button--outline:hover,
.kazanimal-single a.kazanimal-button--outline:hover,
.kazanimal-single button.kazanimal-button--outline:focus-visible,
.kazanimal-single a.kazanimal-button--outline:focus-visible {
	background: var(--kazanimal-detail-tint);
	border-color: var(--kazanimal-accent);
	color: var(--kazanimal-accent);
}

/* Favoris ---------------------------------------------------------------- */

.kazanimal-single .kazanimal-favorite-form--block {
	width: 100%;
}

.kazanimal-single button.kazanimal-favorite--block,
.kazanimal-single a.kazanimal-favorite--block {
	background: var(--kazanimal-surface-alt);
	border: 1px solid var(--kazanimal-border);
	border-radius: var(--kazanimal-button-radius);
	color: var(--kazanimal-muted);
	gap: 0.5rem;
	justify-content: center;
	min-height: 2.75rem;
	width: 100%;
}

.kazanimal-single button.kazanimal-favorite--compact,
.kazanimal-single a.kazanimal-favorite--compact {
	background: none;
	border: 0;
	color: var(--kazanimal-primary);
	flex: none;
	padding: 0.25rem;
}

.kazanimal-single .kazanimal-favorite--active {
	color: var(--kazanimal-primary);
}

/* Secteur ---------------------------------------------------------------- */

.kazanimal-sector {
	border-radius: var(--kazanimal-radius);
	overflow: hidden;
	position: relative;
}

.kazanimal-single .kazanimal-map--single {
	height: 16rem;
}

.kazanimal-sector__place {
	align-items: center;
	background: var(--kazanimal-surface);
	border-radius: 0.6rem;
	bottom: 0.75rem;
	box-shadow: var(--kazanimal-shadow);
	color: var(--kazanimal-accent);
	display: flex;
	font-size: 0.85rem;
	gap: 0.45rem;
	left: 0.75rem;
	margin: 0;
	padding: 0.45rem 0.7rem;
	position: absolute;
	/* Au-dessus des tuiles Leaflet, qui montent jusqu'à 400. */
	z-index: 500;
}

.kazanimal-sector__pin {
	align-items: center;
	color: var(--kazanimal-primary);
	display: inline-flex;
	flex: none;
}

.kazanimal-sector__region {
	color: var(--kazanimal-muted);
	display: block;
	font-size: 0.8rem;
}

/* Bloc de contact -------------------------------------------------------- */

.kazanimal-breeding__contact,
.kazanimal-single__contact {
	align-items: center;
	display: grid;
	gap: 1.25rem;
	grid-template-columns: 1fr;
}

@media (min-width: 60em) {
	.kazanimal-breeding__contact,
	.kazanimal-single__contact {
		grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr) auto;
	}
}

.kazanimal-breeding__contact-intro,
.kazanimal-single__contact-intro {
	align-items: flex-start;
	display: flex;
	gap: 0.9rem;
}

.kazanimal-breeding__contact-icon,
.kazanimal-single__contact-icon {
	align-items: center;
	background: var(--kazanimal-primary);
	border-radius: 999px;
	color: var(--kazanimal-primary-contrast);
	display: inline-flex;
	flex: none;
	height: 3.5rem;
	justify-content: center;
	width: 3.5rem;
}

.kazanimal-breeding__contact-actions,
.kazanimal-single__contact-actions {
	display: flex;
	flex-direction: column;
	gap: 0.6rem;
}

.kazanimal-share {
	display: flex;
	flex-wrap: wrap;
	gap: 0.6rem;
	margin: 0;
}

/*
 * Les deux boutons de partage portent la couleur de leur réseau : c'est ce que
 * l'œil y cherche. Le texte est blanc sur les deux, au-dessus de 4,5:1 dans un
 * cas comme dans l'autre.
 */
.kazanimal-single a.kazanimal-share__link {
	align-items: center;
	border-radius: var(--kazanimal-button-radius);
	color: #fff;
	display: inline-flex;
	flex: 1 1 auto;
	font-size: 0.85rem;
	gap: 0.4rem;
	justify-content: center;
	min-height: 2.25rem;
	padding: 0.35rem 0.8rem;
	text-decoration: none;
}

.kazanimal-single a.kazanimal-share__link--whatsapp {
	background: #128c47;
}

.kazanimal-single a.kazanimal-share__link--facebook {
	background: #1461b8;
}

.kazanimal-breeding__contact-back,
.kazanimal-single__contact-back {
	margin: 0;
}

.kazanimal-single .kazanimal-breeding__contact-back a,
.kazanimal-single .kazanimal-single__contact-back a {
	align-items: center;
	display: inline-flex;
	gap: 0.4rem;
}


/*
 * Le formulaire de message ferme la page : c'est la cible du bouton « Envoyer
 * un message » du panneau et du bloc de contact. Il reprend l'habillage des
 * cartes pour ne pas rester posé nu sous elles.
 */
.kazanimal-single .kazanimal-message-box {
	background: var(--kazanimal-surface);
	border: 1px solid var(--kazanimal-border);
	border-radius: var(--kazanimal-radius);
	box-shadow: var(--kazanimal-shadow);
	display: flex;
	flex-direction: column;
	gap: 0.9rem;
	padding: 1.25rem;
}

.kazanimal-single .kazanimal-message-box .kazanimal-section__title {
	color: var(--kazanimal-detail-ink);
	font-size: 1.15rem;
	margin: 0;
}

/*
 * Le bouton d'agrandissement de la carte. Il n'est utile qu'avec JavaScript et
 * qu'avec l'API plein écran : le gabarit le pose « hidden », le script ne le
 * montre que si le navigateur sait répondre.
 */
.kazanimal-single button.kazanimal-sector__expand {
	align-items: center;
	background: var(--kazanimal-surface);
	border: 0;
	border-radius: 0.4rem;
	box-shadow: var(--kazanimal-shadow);
	color: var(--kazanimal-detail-ink);
	cursor: pointer;
	display: flex;
	height: 2rem;
	justify-content: center;
	padding: 0;
	position: absolute;
	right: 0.75rem;
	top: 0.75rem;
	width: 2rem;
	/* Au-dessus des tuiles Leaflet, comme le repère de commune. */
	z-index: 500;
}

/*
 * Illustration du haut de fiche.
 *
 * L'image porte à la fois les formes pâles du fond et la formule manuscrite :
 * le gabarit n'ajoute la classe que si le fichier est réellement présent, et
 * masque alors la formule écrite en HTML — sans quoi les deux se
 * superposeraient. Elle est purement décorative, d'où background-image plutôt
 * qu'une balise img : rien à annoncer à un lecteur d'écran.
 *
 * La largeur est calée sur celle de l'article et la hauteur suit le ratio de
 * l'image, si bien que la formule reste à hauteur du titre quelle que soit la
 * largeur de la page.
 */
.kazanimal-breeding--illustrated {
	background-image: url("../images/background.webp");
	background-position: top center;
	background-repeat: no-repeat;
	background-size: 100% auto;
}

.kazanimal-breeding--illustrated .kazanimal-breeding__flourish {
	display: none;
}

/*
 * Sous 60em, la formule de l'image tomberait derrière le titre : le fond est
 * retiré, comme l'est déjà la formule en HTML à cette largeur.
 */
@media (max-width: 59.99em) {
	.kazanimal-breeding--illustrated {
		background-image: none;
	}
}

/*
 * Sur deux colonnes, la galerie s'étire jusqu'au bas du panneau plutôt que de
 * laisser un vide sous les vignettes : la photo occupe la hauteur restante et
 * les deux colonnes se terminent ensemble, comme sur la maquette. Le rapport
 * 4/3 ne s'applique donc plus qu'en une seule colonne, où rien n'impose de
 * hauteur à la galerie.
 */
@media (min-width: 60em) {
	.kazanimal-breeding__top,
	.kazanimal-single__top {
		align-items: stretch;
	}

	.kazanimal-breeding__top .kazanimal-carousel,
	.kazanimal-single__top .kazanimal-carousel {
		height: 100%;
	}

	.kazanimal-carousel__stage {
		display: flex;
		flex: 1;
		/* La photo ne descend jamais sous une taille où elle ne dirait plus rien. */
		min-height: 18rem;
	}

	.kazanimal-carousel__slide {
		flex: 1;
	}

	.kazanimal-carousel__slide img {
		aspect-ratio: auto;
		height: 100%;
	}
}

/*
 * Les cartes du corps de la fiche sont disposées en colonnes typographiques et
 * non en grille : une grille à deux colonnes laisse toujours un vide sous la
 * plus courte, et ce vide changeait de côté et de taille à chaque annonce,
 * selon la longueur des textes. Les colonnes, elles, s'équilibrent d'elles-mêmes.
 *
 * « break-inside: avoid » interdit qu'une carte soit coupée en deux d'une
 * colonne à l'autre, ce qui trancherait son ombre en plein milieu.
 */
.kazanimal-breeding__cards > .kazanimal-card,
.kazanimal-single__cards > .kazanimal-card {
	break-inside: avoid;
	/*
	 * L'écart vertical d'une colonne typographique se pose sur les éléments :
	 * « gap » n'y a pas cours.
	 */
	margin-bottom: 1.5rem;
}

@media (min-width: 60em) {
	.kazanimal-breeding__cards,
	.kazanimal-single__cards {
		column-gap: 1.5rem;
		columns: 2;
	}
}

/*
 * Le mode sombre ne redéfinit que les trois teintes locales : tout le reste
 * passe par les variables du plugin, déjà adaptées plus haut.
 */
@media (prefers-color-scheme: dark) {
	.kazanimal-single {
		--kazanimal-detail-tint: #1e3238;
		--kazanimal-detail-zebra: #262b31;
		--kazanimal-detail-ink: #e7ecf1;
	}

	.kazanimal-single .kazanimal-note {
		background: #1f2a34;
	}
}

/*
 * Propre à la fiche d'un signalement — perdu, trouvé ou errant.
 *
 * Tout le reste de la charte est partagé avec la fiche de saillie, ci-dessus.
 * Ne figurent ici que les quelques éléments que cette fiche a en plus.
 */

/* L'étiquette de statut prolonge la phrase d'accroche, sur la même ligne. */
.kazanimal-single__tagline {
	align-items: center;
	display: flex;
	flex-wrap: wrap;
	gap: 0.6rem;
}

/*
 * Le pictogramme de la carte « À savoir avant d'approcher » prend le rouge des
 * animaux perdus : une mise en garde ne se signale pas avec la couleur d'accent
 * qui sert partout ailleurs.
 */
.kazanimal-single .kazanimal-card__icon--alert {
	color: var(--kazanimal-lost);
}

/*
 * Les cartes annulent la marge de leurs paragraphes, et comptent sur leur
 * « gap ». Les champs de formulaire, eux, ne sont pas des enfants directs de la
 * carte : ils retrouvent ici l'espacement que la règle des cartes leur ôtait.
 */
.kazanimal-single .kazanimal-card p.kazanimal-field {
	margin: 0 0 0.9rem;
}

.kazanimal-single__manage-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 0.6rem;
}

/*
 * Sous 30 em, la ligne de caractéristiques passe en une seule colonne. À deux,
 * la valeur — « chat domestique à poil court » — prenait toute la largeur et
 * coupait le libellé en trois lignes d'un mot chacune.
 */
@media (max-width: 30em) {
	.kazanimal-single .kazanimal-facts__row {
		grid-template-columns: minmax(0, 1fr);
	}

	.kazanimal-single .kazanimal-facts__value {
		text-align: left;
	}
}

/*
 * ---------------------------------------------------------------------------
 * Tableau de bord de l'espace utilisateur
 * ---------------------------------------------------------------------------
 *
 * Tout est porté par « .kazanimal-dashboard ». Les classes tile, panel et
 * account-nav existaient déjà : le contexte parent les spécialise sans toucher
 * aux autres écrans de l'espace, qui les emploient encore.
 */
.kazanimal-dashboard {
	/* Teintes des pastilles de pictogramme, une par famille d'action. */
	--kazanimal-tone-teal: #e2f2f4;
	--kazanimal-tone-teal-ink: #0f6b7b;
	--kazanimal-tone-orange: #fdeee0;
	--kazanimal-tone-orange-ink: #d9660a;
	--kazanimal-tone-blue: #e4eefb;
	--kazanimal-tone-blue-ink: #2c6cc4;
	--kazanimal-tone-violet: #efe8fb;
	--kazanimal-tone-violet-ink: #6f4bc4;
	--kazanimal-tone-rose: #fde8ea;
	--kazanimal-tone-rose-ink: #c94a5c;
	--kazanimal-tone-green: #e3f3e8;
	--kazanimal-tone-green-ink: #2f8a4d;

	display: flex;
	flex-direction: column;
	gap: 1.5rem;
	margin: 0 auto;
	max-width: 82rem;
}

.kazanimal-tone--teal {
	background: var(--kazanimal-tone-teal);
	color: var(--kazanimal-tone-teal-ink);
}

.kazanimal-tone--orange {
	background: var(--kazanimal-tone-orange);
	color: var(--kazanimal-tone-orange-ink);
}

.kazanimal-tone--blue {
	background: var(--kazanimal-tone-blue);
	color: var(--kazanimal-tone-blue-ink);
}

.kazanimal-tone--violet {
	background: var(--kazanimal-tone-violet);
	color: var(--kazanimal-tone-violet-ink);
}

.kazanimal-tone--rose {
	background: var(--kazanimal-tone-rose);
	color: var(--kazanimal-tone-rose-ink);
}

.kazanimal-tone--green {
	background: var(--kazanimal-tone-green);
	color: var(--kazanimal-tone-green-ink);
}

/* Titre ------------------------------------------------------------------ */

.kazanimal-dashboard .kazanimal-dashboard__title {
	/* Le bandeau espace ses éléments lui-même. */
	margin: 0;
}

/*
 * Le nom de la marque garde ses deux couleurs, ici comme dans le logo. Les
 * deux moitiés sont deux éléments et non un dégradé : un lecteur d'écran doit
 * lire « KazAnimal » d'un trait.
 */
.kazanimal-wordmark__first {
	color: var(--kazanimal-accent);
}

.kazanimal-wordmark__second {
	color: var(--kazanimal-primary);
}

.kazanimal-dashboard__lead {
	color: var(--kazanimal-muted);
	margin: 0.35rem 0 0;
}

/* Navigation en pastilles de l'espace utilisateur ------------------------- */

/*
 * Ces règles ne sont pas réservées au tableau de bord : la barre est la même
 * sur les neuf pages de l'espace, et elle changerait d'allure d'un onglet à
 * l'autre si elle n'était habillée qu'ici. Elles priment sur la mise en forme
 * générique déclarée plus haut, qu'elles ne touchent pas — celle-ci sert
 * encore aux onglets des pages d'archive.
 */

.kazanimal .kazanimal-account-nav {
	background: var(--kazanimal-surface);
	border: 1px solid var(--kazanimal-border);
	border-radius: 999px;
	box-shadow: var(--kazanimal-shadow);
	/*
	 * Ailleurs que sur le tableau de bord, la barre n'est pas dans un conteneur
	 * à gouttière : sans cette marge elle toucherait le contenu qui la suit.
	 */
	margin-bottom: var(--kazanimal-gap);
	padding: 0.5rem;
}

.kazanimal-dashboard .kazanimal-account-nav {
	/* Le tableau de bord espace ses blocs lui-même. */
	margin-bottom: 0;
}

/*
 * La barre se replie plutôt que de défiler : une entrée poussée hors du cadre
 * par un thème plus étroit deviendrait invisible, et rien ne le signalerait.
 * Mieux vaut deux lignes qu'un onglet escamoté.
 */
.kazanimal .kazanimal-account-nav ul {
	display: flex;
	flex-wrap: wrap;
	gap: 0.3rem;
	list-style: none;
	margin: 0;
	/* Le contour de focus d'une pastille ne doit pas être rogné. */
	padding: 2px;
}

.kazanimal .kazanimal-account-nav__link {
	align-items: center;
	background: var(--kazanimal-surface);
	border: 1px solid var(--kazanimal-border);
	border-radius: 999px;
	/* L'encre des titres, et non le gris des textes secondaires : ce sont des
	   commandes, elles se lisent d'un coup d'œil. */
	color: var(--kazanimal-ink);
	display: inline-flex;
	/*
	 * Ces trois valeurs sont calculées, pas choisies à l'œil : les neuf
	 * libellés mesurent 881 px dans la police du site, et le conteneur du
	 * thème n'offre que 1 108 px utiles. À cette taille l'ensemble occupe
	 * 1 085 px et tient donc sur une seule ligne, pictogrammes compris.
	 */
	font-size: 0.72rem;
	gap: 0.3rem;
	padding: 0.55rem 0.45rem;
	text-decoration: none;
	white-space: nowrap;
}

.kazanimal .kazanimal-account-nav__link--current {
	background: var(--kazanimal-accent);
	border-color: var(--kazanimal-accent);
	color: var(--kazanimal-accent-contrast);
}

/*
 * Le pictogramme porte l'accent, jamais la couleur du texte : c'est lui qui
 * distingue une entrée d'une autre au premier regard. Sur l'entrée courante,
 * il repasse au blanc du libellé — le fond est alors plein.
 */
.kazanimal-account-nav__icon {
	align-items: center;
	color: var(--kazanimal-accent);
	display: inline-flex;
	flex: none;
}

.kazanimal-account-nav__link--current .kazanimal-account-nav__icon {
	color: inherit;
}

/* Compteurs -------------------------------------------------------------- */

.kazanimal-dashboard__tiles {
	display: grid;
	gap: 1.25rem;
	grid-template-columns: 1fr;
}

@media (min-width: 40em) {
	.kazanimal-dashboard__tiles {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (min-width: 64em) {
	.kazanimal-dashboard__tiles {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
}

.kazanimal-dashboard .kazanimal-tile {
	background: var(--kazanimal-surface);
	border: 1px solid var(--kazanimal-border);
	border-radius: var(--kazanimal-radius);
	box-shadow: var(--kazanimal-shadow);
	display: flex;
	flex-direction: column;
	gap: 0.35rem;
	padding: 1.25rem;
}

.kazanimal-tile__icon {
	align-items: center;
	border-radius: 999px;
	display: inline-flex;
	height: 3.25rem;
	justify-content: center;
	margin-bottom: 0.4rem;
	width: 3.25rem;
}

.kazanimal-dashboard .kazanimal-tile__title {
	color: var(--kazanimal-ink);
	font-size: 1.05rem;
	margin: 0;
}

.kazanimal-dashboard .kazanimal-tile__count {
	align-items: center;
	color: var(--kazanimal-ink);
	display: flex;
	font-size: 2.4rem;
	font-weight: 700;
	gap: 0.45rem;
	line-height: 1.05;
	margin: 0;
}

/*
 * Le point signale ce qui attend une lecture. Il double une information déjà
 * écrite juste en dessous — « 2 messages non lus » — et reste donc décoratif.
 */
.kazanimal-tile__dot {
	background: #d9342b;
	border-radius: 999px;
	display: inline-block;
	height: 0.5rem;
	width: 0.5rem;
}

.kazanimal-tile__note {
	color: var(--kazanimal-muted);
	font-size: 0.9rem;
	margin: 0 0 0.9rem;
}

.kazanimal-dashboard .kazanimal-tile .kazanimal-button {
	margin-top: auto;
}

/* Panneaux --------------------------------------------------------------- */

.kazanimal-panel {
	background: var(--kazanimal-surface);
	border: 1px solid var(--kazanimal-border);
	border-radius: var(--kazanimal-radius);
	box-shadow: var(--kazanimal-shadow);
	padding: 1.5rem;
}

.kazanimal-panel__title {
	color: var(--kazanimal-ink);
	font-size: 1.3rem;
	margin: 0;
}

.kazanimal-panel__lead {
	color: var(--kazanimal-muted);
	font-size: 0.9rem;
	margin: 0.25rem 0 1.25rem;
}

/* Actions rapides -------------------------------------------------------- */

.kazanimal-dashboard__actions {
	display: grid;
	gap: 1.25rem;
	grid-template-columns: 1fr;
}

@media (min-width: 62em) {
	.kazanimal-dashboard__actions {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

.kazanimal-quick {
	align-items: flex-start;
	background: var(--kazanimal-surface);
	border: 1px solid var(--kazanimal-border);
	border-radius: var(--kazanimal-radius);
	display: flex;
	gap: 1rem;
	padding: 1.15rem;
}

.kazanimal-quick__icon {
	align-items: center;
	border-radius: 999px;
	display: inline-flex;
	flex: none;
	height: 3.5rem;
	justify-content: center;
	width: 3.5rem;
}

.kazanimal-quick__body {
	display: flex;
	flex-direction: column;
	gap: 0.4rem;
	min-width: 0;
}

.kazanimal-dashboard .kazanimal-quick__title {
	color: var(--kazanimal-ink);
	font-size: 1.05rem;
	margin: 0;
}

.kazanimal-quick__note {
	color: var(--kazanimal-muted);
	font-size: 0.9rem;
	margin: 0 0 0.5rem;
}

.kazanimal-dashboard .kazanimal-quick .kazanimal-button {
	align-self: flex-start;
	gap: 0.4rem;
}

/* Raccourcis ------------------------------------------------------------- */

.kazanimal-dashboard__shortcuts {
	display: grid;
	gap: 1.25rem;
	grid-template-columns: 1fr;
}

@media (min-width: 62em) {
	.kazanimal-dashboard__shortcuts {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

.kazanimal-dashboard a.kazanimal-shortcut {
	align-items: center;
	background: var(--kazanimal-surface);
	border: 1px solid var(--kazanimal-border);
	border-radius: var(--kazanimal-radius);
	color: inherit;
	display: flex;
	gap: 0.9rem;
	padding: 1rem 1.15rem;
	text-decoration: none;
}

.kazanimal-dashboard a.kazanimal-shortcut:hover,
.kazanimal-dashboard a.kazanimal-shortcut:focus-visible {
	border-color: var(--kazanimal-accent);
}

.kazanimal-shortcut__icon {
	align-items: center;
	border-radius: 999px;
	display: inline-flex;
	flex: none;
	height: 2.75rem;
	justify-content: center;
	width: 2.75rem;
}

.kazanimal-shortcut__body {
	display: flex;
	flex: 1;
	flex-direction: column;
	gap: 0.15rem;
	min-width: 0;
}

.kazanimal-shortcut__title {
	color: var(--kazanimal-ink);
	font-weight: 600;
}

.kazanimal-shortcut__note {
	color: var(--kazanimal-muted);
	font-size: 0.85rem;
}

.kazanimal-shortcut__chevron {
	align-items: center;
	color: var(--kazanimal-muted);
	display: inline-flex;
	flex: none;
}

/*
 * Le mode sombre ne redéfinit que l'encre et les fonds de pastille : le reste
 * passe par les variables du plugin, déjà adaptées plus haut.
 */
@media (prefers-color-scheme: dark) {
	.kazanimal-dashboard {
		--kazanimal-tone-teal: #1e3238;
		--kazanimal-tone-orange: #33261a;
		--kazanimal-tone-blue: #1d2836;
		--kazanimal-tone-violet: #272038;
		--kazanimal-tone-rose: #351f24;
		--kazanimal-tone-green: #1d2f24;
	}
}

/* Disposition de l'en-tête d'une tuile : pastille à gauche, texte à droite. */
.kazanimal-tile__head {
	display: flex;
	gap: 0.9rem;
}

.kazanimal-tile__body {
	display: flex;
	flex-direction: column;
	gap: 0.15rem;
	min-width: 0;
}

/*
 * La barre d'onglets tient sur une seule ligne, comme la maquette. Plutôt que
 * de la laisser se replier — ce qui décalerait tout le reste de la page selon
 * la largeur — elle défile horizontalement quand la place manque vraiment.
 */

/*
 * Les libellés des boutons du tableau de bord sont longs — « Gérer mes
 * signalements », « Signaler un animal errant ». Une police légèrement réduite
 * les garde sur une ligne, comme sur la maquette, sans rétrécir les boutons du
 * reste du site.
 */
.kazanimal-dashboard a.kazanimal-button,
.kazanimal-dashboard button.kazanimal-button {
	font-size: 0.9rem;
	gap: 0.4rem;
	padding: 0.6rem 0.9rem;
}

/*
 * La barre d'onglets peut encore déborder sur un thème étroit : elle défile
 * alors, et sa propre barre de défilement est masquée — elle traverserait le
 * bas des pastilles. Le débordement reste perceptible : la dernière pastille
 * est visiblement coupée, et la barre se fait glisser au doigt comme à la
 * molette.
 */
/*
 * Le tableau de bord est plus large que les autres pages du plugin : ses neuf
 * onglets ne tiennent pas sur une ligne en 72rem. L'enveloppe s'élargit donc
 * pour lui seul. Si le thème contraint davantage — un conteneur Elementor à
 * 1140 px, par exemple — la barre défile, ce que la règle précédente prévoit.
 */
.kazanimal:has( > .kazanimal-dashboard ) {
	max-width: 82rem;
}

/*
 * Illustration de fond du tableau de bord. Le gabarit ne pose la classe que si
 * le fichier existe réellement : sans lui, la page garde le fond du thème.
 * L'image est purement décorative — les deux formules manuscrites qu'elle porte
 * sont des ornements, aucune information n'y est écrite.
 */
/*
 * L'illustration couvre toute la largeur de la fenêtre, et non la seule colonne
 * de contenu : elle est donc posée sur le corps du document, que le plugin
 * marque d'une classe sur ses propres pages. C'est la seule règle du plugin qui
 * vise le corps du document ; une page tierce n'est jamais marquée.
 *
 * L'image est calée sur la largeur et garde ses proportions ; l'aplat prend le
 * relais plus bas, une page étant presque toujours plus haute que l'image.
 */
body.kazanimal-body {
	background-color: #f2fbfc;
	background-image: url("../images/backround-text.webp");
	background-position: top center;
	background-repeat: no-repeat;
	background-size: 100% auto;
}

/*
 * ---------------------------------------------------------------------------
 * Page des refuges partenaires
 * ---------------------------------------------------------------------------
 *
 * Le moteur de recherche tient sur une ligne : quatre listes, un bouton et un
 * lien de remise à zéro. Il se replie en colonnes dès que la place manque,
 * plutôt que de comprimer les listes jusqu'à les rendre illisibles.
 */
.kazanimal-shelters {
	display: flex;
	flex-direction: column;
	gap: 1.5rem;
}

.kazanimal-shelters__filters {
	align-items: end;
	background: var(--kazanimal-surface);
	border: 1px solid var(--kazanimal-border);
	border-radius: var(--kazanimal-radius);
	display: grid;
	gap: 1rem;
	grid-template-columns: 1fr;
	padding: 1.25rem;
}

@media (min-width: 48em) {
	.kazanimal-shelters__filters {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (min-width: 68em) {
	.kazanimal-shelters__filters {
		/* Quatre listes de largeur égale, puis les commandes au plus juste. */
		grid-template-columns: repeat(4, minmax(0, 1fr)) auto;
	}
}

.kazanimal-shelters__filters .kazanimal-field {
	display: flex;
	flex-direction: column;
	gap: 0.35rem;
	margin: 0;
	min-width: 0;
}

.kazanimal-shelters__filters .kazanimal-label {
	color: var(--kazanimal-ink);
	font-size: 0.9rem;
	font-weight: 600;
}

.kazanimal-shelters__actions {
	align-items: center;
	display: flex;
	gap: 1rem;
	margin: 0;
}

.kazanimal-shelters .kazanimal-count {
	color: var(--kazanimal-muted);
	font-size: 0.95rem;
	margin: 0;
}

/*
 * ---------------------------------------------------------------------------
 * Signalements récents posés dans une page
 * ---------------------------------------------------------------------------
 *
 * Les codes courts « recent-lost » et « recent-found » servent les mêmes cartes
 * que l'accueil, sans le titre. Sur grand écran elles s'alignent en trois
 * colonnes ; sous 48 em elles deviennent une bande qui défile au doigt, une
 * carte par écran.
 *
 * Le carrousel n'est fait que de défilement et d'accrochage natifs : aucun
 * script n'est chargé, et le bloc reste utilisable sans JavaScript comme au
 * clavier — la bande garde son défilement propre, que les navigateurs rendent
 * focalisable.
 */
.kazanimal-recent-block__more {
	margin: 0 0 0.75rem;
	text-align: right;
}

.kazanimal-recent-block__strip {
	display: grid;
	gap: var(--kazanimal-gap);
	grid-template-columns: repeat(3, minmax(0, 1fr));
}

@media (max-width: 47.99em) {
	.kazanimal-recent-block__strip {
		-webkit-overflow-scrolling: touch;
		display: flex;
		/*
		 * La marge négative puis le rembourrage rendent à la bande la gouttière
		 * de la page : sans eux, la première carte serait collée au bord et la
		 * dernière n'aurait rien après elle.
		 */
		margin: 0 calc(var(--kazanimal-gap) * -1);
		overflow-x: auto;
		padding: 0 var(--kazanimal-gap) 0.5rem;
		scroll-padding: 0 var(--kazanimal-gap);
		scroll-snap-type: x mandatory;
	}

	.kazanimal-recent-block__strip > * {
		flex: 0 0 100%;
		scroll-snap-align: center;
	}
}

/* Carte seule, posée dans une page : le bloc du code court « map-preview ». */

.kazanimal-map-block__action {
	margin: 0.75rem 0 0;
}

/* Card actions: reuse the existing compact favorite control. */
.kazanimal-card .kazanimal-card__actions.kazanimal-card__actions--heart {
 display: flex !important;
 flex-direction: row !important;
 flex-wrap: nowrap !important;
 align-items: center;
 gap: 10px;
}
.kazanimal-card .kazanimal-card__actions--heart > .kazanimal-card__open {
 flex: 1 1 0% !important;
 width: auto;
 min-width: 0;
 white-space: normal;
 overflow-wrap: anywhere;
}
.kazanimal-card__actions--heart > .kazanimal-card__open > svg {
 flex-shrink: 0;
}
.kazanimal-card .kazanimal-card__actions--heart > .kazanimal-favorite-form {
 flex: 0 0 42px !important;
 width: 42px !important;
 max-width: 42px;
 min-width: 42px;
 min-height: 0;
 margin: 0;
 padding: 0;
}
.kazanimal-card .kazanimal-card__actions--heart .kazanimal-favorite--compact {
 box-sizing: border-box;
 flex: 0 0 42px;
 width: 42px;
 height: 42px;
 min-width: 42px;
 min-height: 42px;
 padding: 0;
 gap: 0;
 justify-content: center;
 border: 1px solid #038c96;
 border-radius: 50%;
 background: #fff;
 color: #038c96;
}
.kazanimal-card__actions--heart .kazanimal-favorite__label {
 position: absolute;
 width: 1px;
 height: 1px;
 padding: 0;
 margin: -1px;
 overflow: hidden;
 clip-path: inset(50%);
 white-space: nowrap;
 border: 0;
}
.kazanimal-card .kazanimal-card__actions--heart .kazanimal-favorite--compact:hover {
 background: #038c96;
 color: #fff;
}
.kazanimal-card .kazanimal-card__actions--heart .kazanimal-favorite--compact.kazanimal-favorite--active {
 background: #f97401;
 border-color: #f97401;
 color: #fff;
}
.kazanimal-card__actions--heart .kazanimal-favorite--active .kazanimal-favorite__icon path {
 fill: currentColor;
}

/* Compact text only on the found reports archive. */
:is(.kazanimal-card--found-archive, .kazanimal-card--lost-archive, .kazanimal-card--stray-archive) .kazanimal-card__title {
 min-width: 0;
 font-size: 1.1rem;
 line-height: 1.35;
 margin-bottom: 0.4rem;
}
:is(.kazanimal-card--found-archive, .kazanimal-card--lost-archive, .kazanimal-card--stray-archive) .kazanimal-card__title a {
 display: block;
 overflow: hidden;
 text-overflow: ellipsis;
 white-space: nowrap;
}
:is(.kazanimal-card--found-archive, .kazanimal-card--lost-archive, .kazanimal-card--stray-archive) .kazanimal-card__traits {
 margin: 0 0 0.3rem;
 gap: 0.25rem 0.4rem;
 font-size: 0.875rem;
 line-height: 1.45;
}
:is(.kazanimal-card--found-archive, .kazanimal-card--lost-archive, .kazanimal-card--stray-archive) .kazanimal-card__trait {
 min-width: 0;
 overflow-wrap: anywhere;
}
:is(.kazanimal-card--found-archive, .kazanimal-card--lost-archive, .kazanimal-card--stray-archive) .kazanimal-card__trait .kazanimal-icon {
 flex-shrink: 0;
}
:is(.kazanimal-card--found-archive, .kazanimal-card--lost-archive, .kazanimal-card--stray-archive) .kazanimal-card__place .kazanimal-card__trait + .kazanimal-card__trait::before {
 content: "·";
 color: var(--kazanimal-muted);
}

/* Essential information on breeding archive cards. */
.kazanimal-card--breeding .kazanimal-card__breeding-detail {
 display: flex;
 align-items: baseline;
 gap: 0.4rem;
 margin: 0 0 0.3rem;
 font-size: 0.875rem;
 line-height: 1.45;
}
.kazanimal-card--breeding .kazanimal-card__breeding-detail .kazanimal-icon {
 flex: 0 0 18px;
 align-self: flex-start;
 color: var(--kazanimal-accent);
}
.kazanimal-card--breeding .kazanimal-card__breeding-detail span {
 min-width: 0;
 overflow-wrap: anywhere;
}

/* Equal action widths on the owner's breeding announcements. */
.kazanimal-card__actions.kazanimal-breeding-owner-actions {
 display: grid;
 grid-template-columns: repeat(auto-fit, minmax(min(100%, 10.5rem), 1fr));
}
.kazanimal-breeding-owner-actions > form {
 margin: 0;
 min-width: 0;
}
.kazanimal .kazanimal-breeding-owner-actions .kazanimal-breeding-matched,
.kazanimal-breeding-owner-actions .kazanimal-breeding-matched {
 box-sizing: border-box;
 width: 100%;
 background: #038d96;
 border-color: #038d96;
 color: #fff;
 white-space: normal;
}

.kazanimal-breeding-archive-actions {
 display: flex;
 flex-flow: row nowrap;
 align-items: stretch;
 gap: 10px;
}
.kazanimal-breeding-archive-actions > .kazanimal-button {
 min-width: 0;
 flex: 0 1 auto;
 white-space: normal;
 text-align: center;
 overflow-wrap: anywhere;
}

/* Keep the adopted status beside the existing favorite control. */
.kazanimal-card .kazanimal-card__actions--heart > .kazanimal-adopted {
 flex: 1 1 0%;
 min-width: 0;
 margin: 0;
 overflow-wrap: anywhere;
}

a.kazanimal-card__media {
 display: block;
 text-decoration: none;
}
a.kazanimal-card__media:focus-visible {
 outline: 3px solid #038c96;
 outline-offset: 3px;
}

/* Two desktop columns on the breeding archive and animal map only. */
@media (min-width: 64em) {
 .kazanimal-explorer--breeding .kazanimal-explorer__results > .kazanimal-grid,
 .kazanimal-explorer--map .kazanimal-explorer__list > .kazanimal-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
 }
}
/* Shelter cards use the same type scale as the report archives. */
.kazanimal-shelters .kazanimal-card__title {
 font-size: 1.1rem;
 line-height: 1.35;
}
.kazanimal-shelters .kazanimal-card__meta,
.kazanimal-shelters .kazanimal-card__place {
 font-size: 0.875rem;
 line-height: 1.45;
}
.kazanimal-status--lost,
.kazanimal-status--found,
.kazanimal-status--stray {
 font-family: "Poppins", sans-serif;
 font-weight: 400;
}
/* Mobile account navigation: two balanced columns, matching the account tiles. */
@media (max-width: 47.99em) {
 .kazanimal .kazanimal-account-nav {
  border-radius: 20px;
  padding: 12px;
  background: #fff;
 }
 .kazanimal .kazanimal-account-nav ul {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  padding: 0;
 }
 .kazanimal .kazanimal-account-nav li {
  min-width: 0;
  margin: 0;
  padding: 0;
 }
 .kazanimal .kazanimal-account-nav li:last-child:nth-child(odd) {
  grid-column: 1 / -1;
  justify-self: center;
  width: calc((100% - 10px) / 2);
 }
 .kazanimal .kazanimal-account-nav__link {
  display: flex;
  box-sizing: border-box;
  position: relative;
  width: 100%;
  height: 100%;
  min-height: 62px;
  padding: 9px 8px;
  border-radius: 15px;
  border: 1px solid #e0edef;
  background: #f8fbfc;
  gap: 8px;
  font-family: "Poppins", sans-serif;
  font-size: 13px;
  font-weight: 400;
  line-height: 1.3;
  white-space: normal;
  overflow-wrap: anywhere;
 }
 .kazanimal .kazanimal-account-nav__icon {
  flex: 0 0 36px;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: #e1f3f5;
  color: #087581;
  justify-content: center;
 }
 .kazanimal .kazanimal-account-nav__icon svg {
  width: 22px;
  height: 22px;
 }
 .kazanimal .kazanimal-account-nav__link--current {
  background: #087581;
  border-color: #087581;
  color: #fff;
 }
 .kazanimal .kazanimal-account-nav__link--current .kazanimal-account-nav__icon {
  background: transparent;
  color: #fff;
 }
 .kazanimal .kazanimal-account-nav__link .kazanimal-badge {
  position: absolute;
  top: -5px;
  right: -3px;
 }
 .kazanimal .kazanimal-account-nav__link:focus-visible {
  outline: 3px solid #f97902;
  outline-offset: 2px;
 }
}
@media (max-width: 359px) {
 .kazanimal .kazanimal-account-nav { padding: 8px; }
 .kazanimal .kazanimal-account-nav__link { font-size: 12px; gap: 5px; padding: 8px 5px; }
 .kazanimal .kazanimal-account-nav__icon { flex-basis: 28px; width: 28px; height: 28px; }
}
.kazanimal-login-invitation-actions {
 display: flex;
 flex-wrap: nowrap;
 align-items: center;
 gap: 12px;
 margin: 18px 0;
}
.kazanimal-login-invitation-actions > .kazanimal-button {
 min-width: 0;
 text-align: center;
}
@media (max-width: 479px) {
 .kazanimal-login-invitation-actions > .kazanimal-button {
  flex: 1 1 0%;
  padding: 12px 8px;
 }
}