/**
 * Styles des animaux et formulaires.
 *
 * Les couleurs sont lues depuis les variables du thème (theme.json) avec un
 * repli codé en dur : le plugin doit rester présentable même si le thème
 * change un jour.
 */

/* Teinte par défaut. Chaque section d'espèce, chaque carte et chaque pastille
   redéfinit --calinac-teinte : une seule variable pilote toute la couleur
   d'accent, ce qui évite d'écrire six variantes de chaque règle. */
.calinac-filtres,
.calinac-section,
.calinac-carte,
.calinac-espece {
	--calinac-teinte: var(--wp--preset--color--principale-sombre, #487D70);
}

/* Icônes SVG : dimensionnées par le contexte, jamais par leurs attributs. */
.calinac-icone {
	display: block;
	flex: none;
	width: 1.25em;
	height: 1.25em;
}

/* ---------- Filtres ----------
   Des liens, pas un formulaire : chaque combinaison a son URL, la page reste
   utilisable sans JavaScript et le référencement suit. */

.calinac-filtres {
	display: flex;
	flex-direction: column;
	gap: 1.25rem;
	margin-block: 2rem 3rem;
	padding: 1.5rem 1.6rem;
	border-radius: 20px;
	background: var(--wp--preset--color--fond-doux, #CCE1DA);
	border: 1px solid var(--wp--preset--color--bordure, #95C9BC);
}

.calinac-filtres__rangee {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.6rem 1rem;
}

.calinac-filtres__titre {
	flex: none;
	width: 7.5rem;
	margin: 0;
	font-size: 0.85rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.07em;
	color: var(--wp--preset--color--texte-doux, #656565);
}

.calinac-filtres__liste {
	display: flex;
	flex-wrap: wrap;
	gap: 0.6rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.calinac-filtres__liste > li {
	margin: 0;
}

.calinac-pastille {
	display: inline-flex;
	align-items: center;
	gap: 0.45rem;
	padding: 0.5rem 0.9rem;
	border-radius: 999px;
	border: 1px solid var(--wp--preset--color--bordure, #95C9BC);
	background: #FFFFFF;
	color: var(--wp--preset--color--texte, #333333);
	font-size: 0.95rem;
	font-weight: 600;
	line-height: 1.2;
	text-decoration: none;
	transition:
		transform 0.35s cubic-bezier(0.22, 1, 0.36, 1),
		box-shadow 0.35s ease,
		border-color 0.2s ease;
}

.calinac-pastille .calinac-icone {
	width: 1.45em;
	height: 1.45em;
	color: var(--calinac-teinte, #487D70);
}

.calinac-pastille:hover {
	transform: translateY(-3px);
	border-color: var(--calinac-teinte, #487D70);
	box-shadow: 0 6px 16px rgb(33 57 51 / 12%);
	color: var(--wp--preset--color--texte, #333333);
}

/* L'état actif se lit de trois façons : fond plein, coche dessinée, et
   aria-current pour les lecteurs d'écran. Jamais par la couleur seule. */
.calinac-pastille--active {
	background: var(--calinac-teinte, #487D70);
	border-color: var(--calinac-teinte, #487D70);
	color: #FFFFFF;
}

.calinac-pastille--active:hover {
	color: #FFFFFF;
}

.calinac-pastille--active .calinac-icone {
	color: #FFFFFF;
}

.calinac-pastille__compte {
	padding: 0.05rem 0.45rem;
	border-radius: 999px;
	background: var(--wp--preset--color--fond-doux, #CCE1DA);
	color: var(--wp--preset--color--principale-tres-sombre, #213933);
	font-size: 0.82rem;
	font-variant-numeric: tabular-nums;
}

.calinac-pastille--active .calinac-pastille__compte {
	background: rgb(255 255 255 / 22%);
	color: #FFFFFF;
}

.calinac-pastille:focus-visible {
	outline: 3px solid var(--wp--preset--color--principale-tres-sombre, #213933);
	outline-offset: 3px;
}

/* ---------- Sections par espèce ---------- */

.calinac-section {
	margin-block: 3.5rem;
}

.calinac-section__titre {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 0.5rem 0.9rem;
	margin-block: 0 1.25rem;
	font-size: clamp(1.9rem, 1.5rem + 1.5vw, 2.6rem);
	line-height: 1.15;
}

.calinac-section__pastille {
	display: grid;
	place-items: center;
	flex: none;
	width: 3.1rem;
	height: 3.1rem;
	border-radius: 18px;
	color: var(--calinac-teinte);
	background: color-mix(in srgb, var(--calinac-teinte) 12%, #FFFFFF);
}

.calinac-section__pastille .calinac-icone {
	width: 2rem;
	height: 2rem;
}

.calinac-section__compte {
	padding: 0.2rem 0.7rem;
	border-radius: 999px;
	background: var(--wp--preset--color--fond-doux, #CCE1DA);
	color: var(--wp--preset--color--principale-tres-sombre, #213933);
	font-size: 0.85rem;
	font-weight: 600;
	white-space: nowrap;
}

.calinac-section__chapo {
	/* Mesure exprimée en caractères et non en rem : elle suit la taille de la
	   police au lieu de se figer. 44rem donnait 56 caractères par ligne à 20 px,
	   d'où trois lignes courtes et un mot orphelin sur la dernière. */
	max-width: 68ch;
	text-wrap: pretty;
	margin-block: 0 1.5rem;
	color: var(--wp--preset--color--texte-doux, #656565);
}

/* Encart d'introduction : le texte de l'association à gauche, les conditions
   de vie exigées à droite. Les conditions sont volontairement présentées comme
   des données factuelles, pas comme un argumentaire. */
.calinac-intro {
	display: grid;
	grid-template-columns: 1.15fr 1fr;
	gap: 1.5rem 2.5rem;
	margin-block-end: 2.25rem;
	padding: 1.6rem 1.75rem;
	border-radius: 20px;
	background: #FFFFFF;
	border: 1px solid var(--wp--preset--color--bordure, #95C9BC);
	border-inline-start: 5px solid var(--calinac-teinte);
	box-shadow: 0 2px 4px rgb(33 57 51 / 4%), 0 12px 28px rgb(33 57 51 / 6%);
}

.calinac-intro__accroche {
	margin: 0;
	font-size: 1.05rem;
	line-height: 1.6;
}

.calinac-intro__conditions {
	display: grid;
	gap: 0.85rem;
	margin: 0;
}

.calinac-intro__conditions > div {
	display: grid;
	gap: 0.1rem;
}

.calinac-intro__conditions dt {
	font-size: 0.78rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: var(--wp--preset--color--texte-doux, #656565);
}

.calinac-intro__conditions dd {
	margin: 0;
	font-size: 0.97rem;
	font-weight: 600;
	color: var(--wp--preset--color--principale-tres-sombre, #213933);
}

/* ---------- Largeur et en-tête de la page d'archive ----------
   La page déborde un peu de la largeur « large » du thème (72 rem) : une grille
   de cartes respire mieux qu'une colonne de texte, et le gain suffit à faire
   tenir une carte de plus par rangée sur les écrans intermédiaires.

   Le titre et le chapeau reprennent une échelle plus proche du reste de la
   page : aux tailles prédéfinies du thème, ils écrasaient les cartes situées
   juste en dessous. */

/* Sélecteur volontairement lourd : WordPress impose la largeur « large » via
   `.is-layout-constrained > .alignwide`, de spécificité (0,2,0). Une classe
   seule (0,1,0) perd le départage quel que soit l'ordre de chargement — il faut
   donc passer au-dessus, ici (0,3,0). */
/* 84 rem : la même largeur que les sections de la page d'accueil. Les deux
   pages doivent tenir sur la même trame, sinon le contenu paraît se resserrer
   en passant de l'une à l'autre. */
.is-layout-constrained > .wp-block-group.calinac-archive__entete,
.is-layout-constrained > .wp-block-group.calinac-archive__corps {
	max-width: 84rem;
}

/* En-tête sur le modèle de « Nous aider » et « Nos conditions » : bande pleine
   largeur sur fond doux, contenu aligné à gauche, surtitre en petites
   capitales. Seule la forme est reprise ; les textes et les deux boutons
   (avec leur design vedette et contour) restent ceux de la page. */
.calinac-archive__bandeau {
	margin-block-end: var(--wp--preset--spacing--50);
	padding-block: var(--wp--preset--spacing--60) var(--wp--preset--spacing--50);
	padding-inline: var(--wp--preset--spacing--40);
	background: var(--wp--preset--color--accent, #F1DEE5);
	border-block-end: 1px solid var(--wp--preset--color--bordure, #95C9BC);
}

/* La bande va d'un bord à l'autre ; son contenu, lui, s'aligne sur la trame de
   84 rem, comme les cartes en dessous. La bande étant en disposition « par
   défaut », le groupe intérieur ne reçoit pas la contrainte automatiquement. */
.calinac-archive__bandeau > .calinac-archive__entete {
	max-width: 84rem;
	margin-inline: auto;
}

.calinac-archive__surtitre {
	margin-block: 0 0.6rem;
	font-size: 0.85rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.12em;
	color: var(--wp--preset--color--principale-sombre, #487D70);
}

.calinac-archive__entete .wp-block-query-title {
	margin-block: 0 0.9rem;
	font-size: clamp(2.5rem, 4vw, 3.4rem);
	line-height: 1.1;
	color: var(--wp--preset--color--principale-tres-sombre, #213933);
}

/* Le premier paragraphe, plus grand, joue le rôle de chapeau ; le second est en
   taille de lecture courante. Le contexte `.entry-content` est répété pour
   passer au-dessus de `.entry-content p { max-width: 68ch }` du thème. */
.entry-content .calinac-archive__entete p {
	max-width: 62ch;
}

.calinac-archive__intro {
	font-size: 1.3rem;
	line-height: 1.5;
}

.calinac-archive__entete .calinac-archive__boutons {
	margin-block-start: 1.75rem;
}

/* ---------- Bouton principal d'adoption ----------
   C'est l'action que toute la page prépare : il mérite de se distinguer des
   boutons courants, sans pour autant crier. Trois signaux discrets suffisent —
   un dégradé, un cœur, et une ombre teintée qui donne du relief. */

.calinac-cta .wp-block-button__link {
	display: inline-flex;
	align-items: center;
	gap: 0.6rem;
	padding: 0.85rem 1.9rem;
	font-size: 1.05rem;
	background-image: linear-gradient(
		135deg,
		var(--wp--preset--color--principale-sombre, #487D70) 0%,
		var(--wp--preset--color--principale-tres-sombre, #213933) 100%
	);
	/* L'ombre reprend le vert du bouton plutôt qu'un gris : une ombre neutre
	   sous un aplat coloré donne toujours un rendu terne. */
	box-shadow:
		0 2px 4px rgb(33 57 51 / 14%),
		0 10px 22px rgb(33 57 51 / 22%);
	transition:
		transform 0.3s cubic-bezier(0.22, 1, 0.36, 1),
		box-shadow 0.3s ease;
}

/* Cœur dessiné en SVG et posé en masque : il prend automatiquement la couleur
   du texte, donc reste juste s'il change un jour. */
.calinac-cta .wp-block-button__link::before {
	content: "";
	flex: 0 0 auto;
	width: 1.15em;
	height: 1.15em;
	background-color: currentColor;
	-webkit-mask: var(--calinac-coeur) center / contain no-repeat;
	mask: var(--calinac-coeur) center / contain no-repeat;
}

.calinac-cta {
	--calinac-coeur: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 20.7 3.9 12.6a5.1 5.1 0 0 1 0-7.2 5.1 5.1 0 0 1 7.2 0l.9.9.9-.9a5.1 5.1 0 0 1 7.2 0 5.1 5.1 0 0 1 0 7.2Z" fill="black"/></svg>');
}

.calinac-cta .wp-block-button__link:hover,
.calinac-cta .wp-block-button__link:focus-visible {
	transform: translateY(-3px);
	box-shadow:
		0 4px 8px rgb(33 57 51 / 16%),
		0 16px 34px rgb(33 57 51 / 28%);
}

/* Le cœur bat une fois au survol : un clin d'œil, pas une animation continue
   qui finirait par distraire. */
@media (hover: hover) {
	.calinac-cta .wp-block-button__link:hover::before {
		animation: calinac-battement 0.7s ease;
	}
}

@keyframes calinac-battement {
	0%, 100% { transform: scale(1); }
	28%      { transform: scale(1.22); }
	52%      { transform: scale(0.96); }
	76%      { transform: scale(1.1); }
}

@media (prefers-reduced-motion: reduce) {
	.calinac-cta .wp-block-button__link {
		transition: none;
	}

	.calinac-cta .wp-block-button__link:hover,
	.calinac-cta .wp-block-button__link:focus-visible {
		transform: none;
	}

	.calinac-cta .wp-block-button__link:hover::before {
		animation: none;
	}
}

/* Bouton secondaire : même réaction au survol que le principal — soulèvement et
   ombre — mais sans dégradé ni cœur, pour qu'il reste clairement au second
   plan. L'ombre est plus légère, en accord avec son contour ajouré. */
.calinac-cta-secondaire .wp-block-button__link {
	padding: 0.85rem 1.9rem;
	font-size: 1.05rem;
	transition:
		transform 0.3s cubic-bezier(0.22, 1, 0.36, 1),
		box-shadow 0.3s ease,
		background-color 0.3s ease;
}

.calinac-cta-secondaire .wp-block-button__link:hover,
.calinac-cta-secondaire .wp-block-button__link:focus-visible {
	transform: translateY(-3px);
	background-color: var(--wp--preset--color--fond-doux, #CCE1DA);
	box-shadow:
		0 2px 4px rgb(33 57 51 / 10%),
		0 10px 22px rgb(33 57 51 / 16%);
}

@media (prefers-reduced-motion: reduce) {
	.calinac-cta-secondaire .wp-block-button__link {
		transition: none;
	}

	.calinac-cta-secondaire .wp-block-button__link:hover,
	.calinac-cta-secondaire .wp-block-button__link:focus-visible {
		transform: none;
	}
}

/* ---------- Grille ---------- */

/* Trois cartes par rangée sur grand écran. Un nombre fixe plutôt qu'un
   `auto-fill` : sur 84 rem, le remplissage automatique en logeait cinq, trop
   étroites pour que la photo et le texte respirent. */
.calinac-grille {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 1.75rem;
	align-items: start;
	margin-block: 2rem;
}

@media (max-width: 1000px) {
	.calinac-grille {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 620px) {
	.calinac-grille {
		grid-template-columns: 1fr;
	}
}

/* Quinconce, comme sur la page d'accueil : une carte sur deux descend. Le
   décalage est statique, il ne coûte aucune animation et suffit à faire lire
   la grille comme un ensemble d'objets posés plutôt qu'un tableau. */
.calinac-grille > .calinac-carte:nth-child(2n) {
	margin-block-start: 2.25rem;
}

.calinac-carte {
	position: relative;
	display: flex;
	flex-direction: column;
	border-radius: 20px;
	background: #FFFFFF;
	border: 1px solid var(--wp--preset--color--bordure, #95C9BC);
	box-shadow: 0 2px 4px rgb(33 57 51 / 4%), 0 12px 28px rgb(33 57 51 / 7%);
	transition:
		transform 0.35s cubic-bezier(0.22, 1, 0.36, 1),
		box-shadow 0.35s ease;
}

.calinac-carte--lapin        { --calinac-teinte: #487D70; }
.calinac-carte--gerbille     { --calinac-teinte: #8C214A; }
.calinac-carte--hamster      { --calinac-teinte: #213933; }
.calinac-carte--cochon-dinde { --calinac-teinte: #CF3470; }
.calinac-carte--rat          { --calinac-teinte: #487D70; }
.calinac-carte--souris       { --calinac-teinte: #656565; }

.calinac-carte:hover,
.calinac-carte:focus-within {
	transform: translateY(-10px);
	box-shadow: 0 4px 8px rgb(33 57 51 / 6%), 0 24px 48px rgb(33 57 51 / 14%);
}

/* Filet coloré révélé au survol, comme sur les cartes de la page d'accueil. */
.calinac-carte::after {
	content: "";
	position: absolute;
	inset-block-start: 0;
	inset-inline: 1.75rem;
	height: 3px;
	border-radius: 0 0 3px 3px;
	background: var(--calinac-teinte);
	transform: scaleX(0);
	transition: transform 0.35s ease;
	z-index: 2;
}

.calinac-carte:hover::after,
.calinac-carte:focus-within::after {
	transform: scaleX(1);
}

.calinac-carte__media {
	position: relative;
	aspect-ratio: 4 / 3;
	border-radius: 19px 19px 0 0;
	overflow: hidden;
	background: var(--wp--preset--color--fond-doux, #CCE1DA);
}

.calinac-carte__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}

.calinac-carte:hover .calinac-carte__media img,
.calinac-carte:focus-within .calinac-carte__media img {
	transform: scale(1.04);
}

/* Sans photo, l'icône de l'espèce vaut mieux qu'un aplat gris : la carte
   garde une identité et le manque est annoncé en toutes lettres. */
.calinac-carte__media--vide {
	display: grid;
	place-content: center;
	justify-items: center;
	gap: 0.5rem;
	width: 100%;
	height: 100%;
	color: var(--calinac-teinte);
	background:
		radial-gradient(circle at 50% 40%, color-mix(in srgb, var(--calinac-teinte) 10%, transparent), transparent 65%),
		var(--wp--preset--color--fond-doux, #CCE1DA);
}

.calinac-carte__media--vide .calinac-icone {
	width: 3.5rem;
	height: 3.5rem;
	opacity: 0.55;
}

.calinac-carte__media-texte {
	font-size: 0.8rem;
	font-weight: 600;
	color: var(--wp--preset--color--texte-doux, #656565);
}

/* Les animaux adoptés restent visibles mais visuellement en retrait :
   ils racontent l'histoire de l'association sans parasiter la recherche. */
.calinac-carte--adopte .calinac-carte__media img {
	filter: saturate(0.55);
}

.calinac-carte__corps {
	display: flex;
	flex-direction: column;
	gap: 0.55rem;
	flex: 1;
	padding: 1.1rem 1.2rem 1.3rem;
}

.calinac-carte__espece {
	display: flex;
	align-items: center;
	gap: 0.35rem;
	margin: 0;
	color: var(--calinac-teinte);
	font-size: 0.82rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.06em;
}

.calinac-carte__nom {
	margin: 0;
	font-size: 1.3rem;
	line-height: 1.2;
}

/* Le lien couvre toute la carte : la cible de clic est généreuse, mais le
   texte du lien reste le nom de l'animal — ce qu'annonce un lecteur d'écran. */
.calinac-carte__lien {
	color: var(--wp--preset--color--principale-tres-sombre, #213933);
	text-decoration: none;
}

.calinac-carte__lien::before {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: 20px;
	z-index: 1;
}

.calinac-carte__lien:hover {
	text-decoration: underline;
	text-decoration-thickness: 2px;
	text-underline-offset: 3px;
}

.calinac-carte__lien:focus-visible {
	outline: none;
}

.calinac-carte:focus-within {
	outline: 3px solid var(--wp--preset--color--principale-tres-sombre, #213933);
	outline-offset: 3px;
}

/* « D'autres animaux attendent aussi » : le titre et sa grille sortent du même
   shortcode, donc hors de la mise en page par blocs — l'espacement que l'éditeur
   posait entre les deux se règle ici. */
.calinac-similaires__titre {
	margin: 0 0 1.6rem;
}

/* Repères : sexe, âge. Icône + libellé écrit, jamais l'icône seule. */
.calinac-reperes {
	display: flex;
	flex-wrap: wrap;
	gap: 0.4rem 0.5rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.calinac-repere {
	display: inline-flex;
	align-items: center;
	gap: 0.3rem;
	margin: 0;
	padding: 0.2rem 0.6rem 0.2rem 0.45rem;
	border-radius: 999px;
	background: var(--wp--preset--color--fond-doux, #CCE1DA);
	color: var(--wp--preset--color--principale-tres-sombre, #213933);
	font-size: 0.85rem;
	font-weight: 600;
}

.calinac-repere .calinac-icone {
	width: 1.05em;
	height: 1.05em;
}

/* Sexe : rose pour les femelles, bleu pour les mâles. Deux pastels hors palette,
   assumés — ce sont les couleurs que tout le monde lit sans y penser, et le
   repère est justement celui qu'on cherche en balayant une grille de fiches.
   La couleur ne porte jamais l'information à elle seule : l'icône et le mot
   écrit restent là, et le contraste du texte tient l'AA (6,8:1 et 6,7:1). */
.calinac-repere--femelle,
.calinac-carnet__sexe--femelle {
	background: #FBDCE8;
	color: #8C214A;
}

.calinac-repere--male,
.calinac-carnet__sexe--male {
	background: #DAE9F7;
	color: #17527D;
}

/* Duo ou trio : l'information la plus structurante pour un adoptant, puisque
   l'association ne sépare pas un groupe déjà formé. Elle mérite d'être vue. */
.calinac-carte__duo {
	display: flex;
	align-items: center;
	gap: 0.4rem;
	margin: 0;
	padding: 0.4rem 0.7rem;
	border-radius: 10px;
	background: color-mix(in srgb, var(--calinac-teinte) 10%, #FFFFFF);
	/* Le fond porte la teinte de l'espèce, le texte reste au vert très sombre :
	   le vert principal sur son propre fond teinté ne plafonne qu'à 4,4:1, sous
	   le seuil AA. La couleur de l'espèce reste lisible par le fond et l'icône. */
	color: var(--wp--preset--color--principale-tres-sombre, #213933);
	font-size: 0.88rem;
	font-weight: 700;
}

.calinac-carte__duo .calinac-icone {
	color: var(--calinac-teinte);
}

.calinac-carte__duo .calinac-icone {
	width: 1.2em;
	height: 1.2em;
}

.calinac-carte__extrait {
	margin: 0;
	font-size: 0.93rem;
	line-height: 1.5;
	color: var(--wp--preset--color--texte-doux, #656565);
}

.calinac-carte__action {
	display: flex;
	align-items: center;
	gap: 0.4rem;
	margin-block: auto 0;
	padding-block-start: 0.6rem;
	color: var(--calinac-teinte);
	font-size: 0.92rem;
	font-weight: 700;
}

.calinac-carte__fleche {
	transition: transform 0.3s ease;
}

.calinac-carte:hover .calinac-carte__fleche,
.calinac-carte:focus-within .calinac-carte__fleche {
	transform: translateX(5px);
}

/* ---------- Pastilles de statut ---------- */

.calinac-statut {
	position: absolute;
	inset-block-start: 0.75rem;
	inset-inline-start: 0.75rem;
	z-index: 2;
	padding: 0.25rem 0.7rem;
	border-radius: 999px;
	font-size: 0.78rem;
	font-weight: 700;
	letter-spacing: 0.01em;
	color: #FFFFFF;
	background: #656565;
}

/* Couleurs de la charte, toutes au-delà de 4.5:1 sur texte blanc.
   Le vert clair #95C9BC n'atteint que 3.06:1 : il est écarté ici. */
/* Sur la fiche, la pastille accompagne le nom au fil du texte au lieu de se
   poser par dessus une photo : elle reprend donc le flux normal. */
.calinac-statut--en-ligne {
	position: static;
	display: inline-block;
	white-space: nowrap;
}

.calinac-statut--disponible { background: #487D70; }
.calinac-statut--reserve    { background: #B06C87; }
.calinac-statut--adopte     { background: #656565; }

/* ---------- Encart d'espèce, sur la fiche ---------- */

.calinac-espece {
	margin-block: 2.5rem;
	padding: 1.75rem;
	border-radius: 20px;
	background: #FFFFFF;
	border: 1px solid var(--wp--preset--color--bordure, #95C9BC);
	border-inline-start: 5px solid var(--calinac-teinte);
	box-shadow: 0 2px 4px rgb(33 57 51 / 4%), 0 12px 28px rgb(33 57 51 / 6%);
}

.calinac-espece__manque {
	margin-block-end: 2rem;
	padding-block-end: 1.75rem;
	border-block-end: 1px solid var(--wp--preset--color--bordure, #95C9BC);
}

.calinac-espece__manque h2 {
	margin-block: 0 0.5rem;
	font-size: 1.35rem;
}

.calinac-espece__titre {
	display: flex;
	align-items: center;
	gap: 0.8rem;
	margin-block: 0 0.9rem;
	font-size: 1.35rem;
}

.calinac-espece__pastille {
	display: grid;
	place-items: center;
	flex: none;
	width: 2.8rem;
	height: 2.8rem;
	border-radius: 16px;
	color: var(--calinac-teinte);
	background: color-mix(in srgb, var(--calinac-teinte) 12%, #FFFFFF);
}

.calinac-espece__pastille .calinac-icone {
	width: 1.8rem;
	height: 1.8rem;
}

.calinac-espece__intro {
	margin-block: 0 1.25rem;
	color: var(--wp--preset--color--texte-doux, #656565);
}

.calinac-espece .calinac-intro__conditions {
	grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
	gap: 1.1rem 1.75rem;
}

.calinac-espece__lien {
	margin-block: 1.25rem 0;
	font-size: 0.95rem;
}

/* ---------- État vide ---------- */

.calinac-vide {
	display: grid;
	justify-items: center;
	gap: 0.6rem;
	margin-block: 2.5rem;
	padding: 3rem 1.75rem;
	text-align: center;
	border-radius: 20px;
	background: var(--wp--preset--color--fond-doux, #CCE1DA);
	border: 1px solid var(--wp--preset--color--bordure, #95C9BC);
}

.calinac-vide__icone {
	width: 3rem;
	height: 3rem;
	color: var(--wp--preset--color--principale-sombre, #487D70);
}

.calinac-vide h2 {
	margin: 0;
	font-size: 1.4rem;
}

.calinac-vide p {
	max-width: 34rem;
	margin: 0;
	color: var(--wp--preset--color--texte-doux, #656565);
}

.calinac-vide__actions {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	gap: 0.75rem 1.25rem;
	margin-block-start: 0.75rem;
}

.calinac-lien-doux {
	color: var(--wp--preset--color--principale-sombre, #487D70);
	font-weight: 600;
}

/* ---------- Boutons ---------- */

.calinac-bouton {
	display: inline-block;
	padding: 0.65rem 1.4rem;
	border: 0;
	border-radius: 999px;
	background: var(--wp--preset--color--principale-decor, #508B7C);
	color: #FFFFFF;
	font-size: 1rem;
	font-weight: 700;
	text-decoration: none;
	cursor: pointer;
	transition: filter 0.15s ease;
}

.calinac-bouton:hover {
	filter: brightness(1.08);
	color: #fff;
}

.calinac-bouton--large {
	padding: 0.85rem 2rem;
	font-size: 1.05rem;
}

/* ---------- Fiche animal ---------- */

.calinac-fiche__entete {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 0.75rem 1rem;
	margin-bottom: 1.5rem;
}

/* ---------- Tête de fiche : deux colonnes accordées ----------
   La photo et l'encart des caractéristiques doivent se lire comme deux
   colonnes d'un même bloc, et non comme deux éléments posés côte à côte. */

/* Même trame que l'archive et que la page d'accueil : 84 rem. Sans cela la
   fiche se resserrait au centre — dans une fenêtre de 1440 px, à peine 700 px
   utiles. Le piège : le groupe portait `alignwide` ET une disposition
   contrainte. La disposition contrainte plafonne les ENFANTS à `contentSize`
   (44 rem), si bien que le conteneur était bien large mais que tout son contenu
   restait écrasé au milieu. Le gabarit passe donc en disposition par défaut, et
   la largeur est fixée ici.
 *
   Le sélecteur double la classe d'un `.is-layout-constrained >` : WordPress
   impose sa largeur via `.is-layout-constrained > .alignwide`, de spécificité
   (0,2,0). Une classe seule (0,1,0) perdrait le départage quel que soit l'ordre
   de chargement des feuilles. */
.is-layout-constrained > .wp-block-group.calinac-fiche__corps {
	max-width: 84rem;
}

/* L'espèce et le nom coiffent les deux colonnes plutôt que d'occuper le haut de
   celle de droite. C'est ce qui permet à la photo et à l'encart de partir du
   même bord haut : tant que le titre restait dans la colonne, il l'enfonçait
   d'autant, et les deux blocs se lisaient comme juxtaposés plutôt qu'accordés. */
.calinac-fiche__entete {
	gap: 0.5rem 1rem;
	margin-block-end: 1.25rem;
}

/* Le titre porte de grosses marges par défaut, qui rouvriraient l'écart. */
.calinac-fiche__entete > .wp-block-post-title {
	margin-block: 0;
}

/* La colonne de droite s'étire déjà sur la hauteur de la photo : en faire une
   boîte flexible laisse l'encart occuper toute cette hauteur. */
.calinac-fiche__colonne {
	display: flex;
	flex-direction: column;
}

.calinac-fiche__photo .wp-block-image {
	margin: 0;
}

/* Format et coins repris du bloc « image mise en avant » qu'il remplace, pour
   que le passage à la visionneuse ne change rien à l'allure de la page. */
.calinac-fiche__photo .wp-block-image img {
	display: block;
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	border-radius: 14px;
}

.calinac-fiche__photo .wp-lightbox-container {
	display: block;
}

.calinac-fiche__photo .lightbox-trigger:focus-visible {
	outline: 3px solid var(--wp--preset--color--principale-sombre, #487D70);
	outline-offset: 2px;
}

.calinac-fiche__caracteristiques {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
	gap: 1.25rem;
	margin-block: 2rem;
	padding: 1.5rem;
	border-radius: 14px;
	background: var(--wp--preset--color--fond-doux, #CCE1DA);
	list-style: none;
}

/* Dans la colonne de droite, l'encart répond à la photo : mêmes bords haut et
   bas, même rayon de coins, bordure et ombre de la charte. Les caractéristiques
   se répartissent sur la hauteur disponible plutôt que de se tasser en haut. */
.calinac-fiche__colonne .calinac-fiche__caracteristiques {
	flex: 1;
	/* Une colonne pleine largeur, qui se lit comme une fiche signalétique. Sur
	   deux colonnes, les quatre à six repères se tassaient en haut à gauche d'un
	   encart devenu large, et les étiquettes revenaient à la ligne au milieu d'un
	   mot. Sur une colonne, chaque repère tient sur sa ligne, et même la fiche la
	   plus renseignée (six repères) reste dans la hauteur de la photo. */
	grid-template-columns: 1fr;
	align-content: space-evenly;
	gap: 1rem;
	margin-block: 0;
	border: 1px solid var(--wp--preset--color--bordure, #95C9BC);
	box-shadow: 0 1px 2px rgb(33 57 51 / 7%);
}

/* Un filet sépare les repères : sur un encart aussi haut que la photo, quatre
   lignes flottant dans le vide se lisaient mal. Le filet donne la trame d'une
   fiche signalétique et rattache chaque valeur à son étiquette. */
.calinac-fiche__colonne .calinac-fiche__caracteristiques > li + li {
	padding-block-start: 1rem;
	border-block-start: 1px solid var(--wp--preset--color--bordure, #95C9BC);
}

/* Sous le point de bascule des colonnes, l'encart passe sous la photo : plus
   rien à aligner, il reprend sa hauteur naturelle et son écart. */
@media (max-width: 781px) {
	.calinac-fiche__colonne .calinac-fiche__caracteristiques {
		flex: none;
		margin-block-start: 1.5rem;
	}
}

.calinac-fiche__caracteristiques > li {
	margin: 0;
}

.calinac-fiche__etiquette {
	display: block;
	font-size: 0.8rem;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	opacity: 0.7;
}

.calinac-fiche__valeur {
	font-size: 1.1rem;
	font-weight: 600;
}

.calinac-fiche__appel {
	margin-block: 2.5rem;
	padding: 1.75rem;
	border-radius: 14px;
	background: var(--wp--preset--color--fond-doux, #CCE1DA);
	text-align: center;
}

.calinac-fiche__appel p {
	margin-block-start: 0;
}

/* ---------- Formulaires ---------- */

.calinac-formulaire {
	max-width: 40rem;
	margin-block: 2rem;
}

.calinac-formulaire__champ {
	display: flex;
	flex-direction: column;
	gap: 0.35rem;
	margin-bottom: 1.5rem;
}

.calinac-formulaire__champ label {
	font-weight: 600;
}

.calinac-formulaire input[type="text"],
.calinac-formulaire input[type="email"],
.calinac-formulaire input[type="tel"],
.calinac-formulaire textarea {
	width: 100%;
	padding: 0.7rem 0.85rem;
	border: 1px solid rgb(0 0 0 / 22%);
	border-radius: 8px;
	font-family: inherit;
	font-size: 1rem;
}

.calinac-formulaire input:focus-visible,
.calinac-formulaire textarea:focus-visible,
.calinac-filtres select:focus-visible {
	outline: 3px solid var(--wp--preset--color--principale-sombre, #487D70);
	outline-offset: 2px;
}

.calinac-formulaire__animal {
	padding: 0.9rem 1.1rem;
	border-radius: 10px;
	background: var(--wp--preset--color--fond-doux, #CCE1DA);
}

.calinac-formulaire__consentement label {
	display: flex;
	gap: 0.6rem;
	align-items: flex-start;
	font-weight: 400;
	line-height: 1.5;
}

.calinac-aide {
	font-size: 0.88rem;
	opacity: 0.75;
}

.calinac-requis {
	color: #b3261e;
}

.calinac-message {
	padding: 1.1rem 1.3rem;
	margin-bottom: 1.75rem;
	border-radius: 10px;
	border-inline-start: 4px solid;
}

.calinac-message--succes {
	background: #e8f4ec;
	border-color: #1f7a4d;
}

.calinac-message--erreur {
	background: #fdecea;
	border-color: #b3261e;
}

.calinac-message p:last-child {
	margin-block-end: 0;
}

/* Champ piège : masqué visuellement sans display:none, que certains bots
   savent détecter et contourner. */
.calinac-pot-de-miel {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

/* ---------- Séparateur : le museau à moustaches ----------
   Purement décoratif. Il marque le passage d'une espèce à la suivante, encadré
   de deux filets qui s'effacent vers l'extérieur. */

.calinac-separateur {
	display: flex;
	align-items: center;
	gap: 1.25rem;
	margin-block: 4rem;
	color: var(--wp--preset--color--principale-tres-sombre, #213933);
}

.calinac-separateur__filet {
	flex: 1;
	height: 1px;
	background: var(--wp--preset--color--bordure, #95C9BC);
}

/* Les filets s'estompent en s'éloignant du museau : le trait ne bute pas
   sèchement sur le bord du contenu. */
.calinac-separateur__filet:first-child {
	background: linear-gradient(to right, transparent, var(--wp--preset--color--bordure, #95C9BC));
}

.calinac-separateur__filet:last-child {
	background: linear-gradient(to left, transparent, var(--wp--preset--color--bordure, #95C9BC));
}

.calinac-museau {
	flex: none;
	width: 5.5rem;
	height: 5.5rem;
}

/* Le nez est le seul aplat du jeu d'icônes : c'est ce qui donne au motif son
   air de tampon, et ce qui le distingue des icônes porteuses de sens. */
.calinac-museau__nez {
	fill: var(--wp--preset--color--accent, #F1DEE5);
}

@media (max-width: 680px) {
	.calinac-separateur {
		gap: 0.85rem;
		margin-block: 2.75rem;
	}

	.calinac-museau {
		width: 4.25rem;
		height: 4.25rem;
	}
}

/* ---------- Adaptation aux petits écrans ---------- */

@media (max-width: 900px) {
	/* L'encart d'introduction passe en colonne : à cette largeur, deux
	   colonnes rendraient les conditions de vie illisibles. */
	.calinac-intro {
		grid-template-columns: 1fr;
		gap: 1.25rem;
	}

	.calinac-intro__conditions {
		grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
		gap: 1rem 1.5rem;
	}
}

@media (max-width: 680px) {
	.calinac-filtres {
		padding: 1.25rem;
	}

	/* L'intitulé du filtre repasse au-dessus de ses pastilles : en pleine
	   largeur, les pastilles ont enfin la place de tenir sur peu de lignes. */
	.calinac-filtres__rangee {
		flex-direction: column;
		align-items: stretch;
		gap: 0.6rem;
	}

	.calinac-filtres__titre {
		width: auto;
	}

	.calinac-grille {
		grid-template-columns: 1fr;
		gap: 1.5rem;
	}

	/* Empilées sur une colonne, les cartes décalées ne créeraient que des
	   trous : le quinconce n'a de sens qu'à plusieurs colonnes. */
	.calinac-grille > .calinac-carte:nth-child(2n) {
		margin-block-start: 0;
	}

	.calinac-section {
		margin-block: 2.5rem;
	}

	.calinac-section__titre {
		gap: 0.5rem 0.7rem;
		font-size: 1.75rem;
	}

	.calinac-espece,
	.calinac-intro {
		padding: 1.25rem;
	}

	.calinac-vide {
		padding: 2.25rem 1.25rem;
	}
}

/* ---------- Mouvement ----------
   Tout le mouvement est neutralisé pour qui a demandé à ne pas en avoir. Le
   relief, les couleurs et le quinconce demeurent : la mise en page ne repose
   jamais sur l'animation, seulement sur elle pour la rétroaction au survol. */

@media (prefers-reduced-motion: reduce) {
	.calinac-carte,
	.calinac-carte::after,
	.calinac-carte__media img,
	.calinac-carte__fleche,
	.calinac-pastille {
		transition: none;
	}

	.calinac-carte:hover,
	.calinac-carte:focus-within,
	.calinac-pastille:hover {
		transform: none;
	}

	.calinac-carte:hover .calinac-carte__media img,
	.calinac-carte:focus-within .calinac-carte__media img,
	.calinac-carte:hover .calinac-carte__fleche,
	.calinac-carte:focus-within .calinac-carte__fleche {
		transform: none;
	}

	/* Le filet coloré reste un signal utile : on le montre d'emblée plutôt
	   que de le faire apparaître. */
	.calinac-carte:hover::after,
	.calinac-carte:focus-within::after {
		transform: scaleX(1);
	}
}
/* ---------- Carnet de santé ----------
   Remplace la grille 2×2 des caractéristiques. Le parti pris reprend les codes
   d'un carnet de santé animalier : un bandeau coloré en en-tête, puis des
   lignes étiquette/valeur séparées par des filets pointillés.

   L'intérêt n'est pas décoratif : une suite de lignes se parcourt beaucoup plus
   vite qu'un tableau à deux colonnes, où l'œil doit décider dans quel sens
   lire. Et le format s'étire naturellement selon le nombre d'informations
   disponibles, ce qui compte ici — les hamsters en ont trois, les lapins six. */

.calinac-carnet {
	overflow: hidden;
	border-radius: 18px;
	background: #FFFFFF;
	border: 1px solid var(--wp--preset--color--bordure, #95C9BC);
	box-shadow: 0 2px 4px rgb(33 57 51 / 4%), 0 12px 28px rgb(33 57 51 / 7%);
}

.calinac-carnet__entete {
	display: flex;
	align-items: center;
	gap: 0.6rem;
	margin: 0;
	padding: 0.85rem 1.25rem;
	background: var(--wp--preset--color--principale-sombre, #487D70);
	color: #FFFFFF;
	font-size: 0.82rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.08em;
}

.calinac-carnet__entete .calinac-icone {
	width: 1.1rem;
	height: 1.1rem;
}

.calinac-carnet__liste {
	margin: 0;
	padding: 0.4rem 1.25rem 0.9rem;
}

.calinac-carnet__ligne {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: 0.3rem 1.5rem;
	padding-block: 0.75rem;
	border-block-end: 1px dotted var(--wp--preset--color--bordure, #95C9BC);
}

.calinac-carnet__ligne:last-child {
	border-block-end: 0;
}

.calinac-carnet__etiquette {
	margin: 0;
	font-size: 0.78rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: var(--wp--preset--color--texte-doux, #656565);
}

.calinac-carnet__valeur {
	margin: 0;
	text-align: end;
	font-size: 1.02rem;
	font-weight: 600;
	color: var(--wp--preset--color--principale-tres-sombre, #213933);
}

/* Dans le carnet, la valeur est un texte aligné à droite : la pastille doit
   donc porter sa propre forme, là où le repère de la carte l'avait déjà. */
.calinac-carnet__sexe {
	display: inline-flex;
	align-items: center;
	gap: 0.3rem;
	padding: 0.15rem 0.65rem 0.15rem 0.5rem;
	border-radius: 999px;
	font-weight: 700;
}

.calinac-carnet__sexe .calinac-icone {
	width: 1.05em;
	height: 1.05em;
}

/* Une valeur absente ne doit pas s'afficher avec le même aplomb qu'une donnée
   vérifiée : elle passe en gris et en italique, sans gras. */
.calinac-carnet__valeur--vide {
	font-weight: 400;
	font-style: italic;
	color: var(--wp--preset--color--texte-doux, #656565);
}

/* Sur une colonne étroite, étiquette et valeur s'empilent plutôt que de se
   tasser l'une contre l'autre. */
@media (max-width: 420px) {
	.calinac-carnet__ligne {
		justify-content: flex-start;
	}

	.calinac-carnet__valeur {
		text-align: start;
	}
}

/* ---------- Espèce sans animal disponible ----------
   Bloc court et centré. Le cercle en pointillés emprunte au vocabulaire des
   emplacements vides : il dit « la place existe, elle attend » sans qu'aucun
   texte n'ait à l'expliquer. L'icône de l'espèce reste dedans, en teinte
   atténuée, pour que le bloc demeure identifiable au premier coup d'œil. */

.calinac-absence {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.9rem;
	padding: 2.75rem 1.5rem;
	text-align: center;
}

.calinac-absence__medaillon {
	display: grid;
	place-items: center;
	width: 5.5rem;
	height: 5.5rem;
	border-radius: 50%;
	border: 2px dashed color-mix(in srgb, var(--calinac-teinte) 45%, #FFFFFF);
	background: color-mix(in srgb, var(--calinac-teinte) 7%, #FFFFFF);
	color: color-mix(in srgb, var(--calinac-teinte) 65%, #FFFFFF);
}

.calinac-absence__medaillon .calinac-icone {
	width: 2.6rem;
	height: 2.6rem;
}

.calinac-absence__titre {
	margin: 0;
	font-size: 1.1rem;
	font-weight: 600;
	color: var(--wp--preset--color--texte, #333333);
}

.calinac-absence__action {
	margin: 0;
	font-size: 0.95rem;
}

.calinac-absence__action a {
	color: var(--wp--preset--color--principale-sombre, #487D70);
	font-weight: 600;
}



/* ---------- Encart d'espèce : reprise du design ----------
   L'encart était un simple cadre blanc à filet coloré, très proche du carnet
   situé juste au-dessus : deux blocs quasi identiques à quelques centimètres
   l'un de l'autre, sans hiérarchie. On le distingue ici par un bandeau teinté
   en tête et par des conditions présentées en tuiles plutôt qu'en liste. */

.calinac-espece {
	position: relative;
	padding: 0;
	overflow: hidden;
	border-inline-start: 1px solid var(--wp--preset--color--bordure, #95C9BC);
}

/* Bandeau d'en-tête : dégradé de la teinte de l'espèce, du plein vers le clair.
   C'est lui qui donne son identité à chaque espèce sans répéter sa couleur
   partout, ce qui deviendrait criard. */
.calinac-espece__titre {
	gap: 0.9rem;
	margin: 0;
	padding: 1.1rem 1.6rem;
	background: linear-gradient(
		100deg,
		var(--calinac-teinte) 0%,
		color-mix(in srgb, var(--calinac-teinte) 78%, #FFFFFF) 100%
	);
	color: #FFFFFF;
	font-size: 1.2rem;
}

/* Sur le bandeau, la pastille passe en verre dépoli plutôt qu'en aplat teinté :
   la teinte est déjà celle du fond. */
.calinac-espece__pastille {
	width: 2.5rem;
	height: 2.5rem;
	border-radius: 14px;
	color: #FFFFFF;
	background: rgb(255 255 255 / 20%);
}

.calinac-espece__pastille .calinac-icone {
	width: 1.6rem;
	height: 1.6rem;
}

.calinac-espece__intro {
	margin: 0;
	padding: 1.5rem 1.6rem 0;
}

/* Conditions en tuiles : chacune se lit d'un bloc, là où la liste précédente
   obligeait à balayer étiquette et valeur sur deux lignes distinctes. */
.calinac-espece .calinac-intro__conditions {
	grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
	gap: 0.9rem;
	padding: 1.25rem 1.6rem 0;
}

.calinac-espece .calinac-intro__conditions > div {
	gap: 0.3rem;
	padding: 0.9rem 1rem;
	border-radius: 14px;
	background: color-mix(in srgb, var(--calinac-teinte) 6%, #FFFFFF);
	border: 1px solid color-mix(in srgb, var(--calinac-teinte) 20%, #FFFFFF);
}

.calinac-espece .calinac-intro__conditions dt {
	color: color-mix(in srgb, var(--calinac-teinte) 75%, #333333);
}

.calinac-espece__lien {
	margin: 0;
	padding: 1.25rem 1.6rem 1.5rem;
}

.calinac-espece__manque {
	margin: 0;
	padding: 1.5rem 1.6rem;
	border-block-end: 0;
	background: color-mix(in srgb, var(--wp--preset--color--accent, #F1DEE5) 16%, #FFFFFF);
}



/* ---------- Encart d'espèce : filigrane et tuiles ----------
   L'icône de l'espèce, agrandie et très pâle, occupe le coin de l'encart. Elle
   ne porte aucune information — l'icône du bandeau la donne déjà — mais elle
   ancre le bloc et le distingue au premier coup d'œil du carnet blanc situé
   plus haut, ce qui manquait. */

.calinac-espece__intro {
	position: relative;
	z-index: 1;
}

.calinac-espece::after {
	content: "";
	position: absolute;
	inset-block-end: -3.5rem;
	inset-inline-end: -2.5rem;
	width: 16rem;
	height: 16rem;
	background: var(--calinac-filigrane) center / contain no-repeat;
	opacity: 0.055;
	pointer-events: none;
}

/* Étiquettes des conditions : l'icône précède le libellé, jamais à sa place. */
.calinac-espece .calinac-intro__conditions dt {
	display: flex;
	align-items: center;
	gap: 0.4rem;
}

.calinac-espece .calinac-intro__conditions dt .calinac-icone {
	width: 1.15rem;
	height: 1.15rem;
	color: var(--calinac-teinte);
}

.calinac-espece .calinac-intro__conditions > div {
	position: relative;
	z-index: 1;
	transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}

.calinac-espece .calinac-intro__conditions > div:hover {
	transform: translateY(-2px);
}

.calinac-espece__lien {
	position: relative;
	z-index: 1;
}

@media (prefers-reduced-motion: reduce) {
	.calinac-espece .calinac-intro__conditions > div {
		transition: none;
	}

	.calinac-espece .calinac-intro__conditions > div:hover {
		transform: none;
	}
}

/* ---------- Bouton-vedette de la fiche animal ----------
   Un panneau cliquable plutôt qu'un bouton agrandi. Il occupe seul le creux
   laissé par le carnet et doit trancher : toute la page est en cartes blanches
   sages, c'est lui qui porte l'action qu'elle prépare depuis le début.

   Trois effets se superposent — dégradé de fond, halo au cœur, reflet qui
   balaie — mais aucun n'est indispensable à la compréhension : sans eux, le
   lien reste un lien parfaitement lisible. */

.calinac-appel-vedette {
	position: relative;
	isolation: isolate;
	overflow: hidden;

	/* Disposition en rangée plutôt qu'en colonne : c'est ce qui divise vraiment
	   la hauteur par deux. Rogner les marges d'un empilement vertical aurait
	   seulement tassé les mêmes quatre éléments les uns sur les autres. */
	display: flex;
	flex-direction: row;
	align-items: center;
	gap: 0.9rem;

	flex: 0 1 auto;
	margin-block-start: 1.25rem;
	padding: 1rem 1.25rem;

	border-radius: 20px;
	background:
		radial-gradient(120% 90% at 50% 0%, color-mix(in srgb, var(--wp--preset--color--principale, #95C9BC) 55%, transparent), transparent 70%),
		linear-gradient(150deg,
			var(--wp--preset--color--principale-sombre, #487D70) 0%,
			var(--wp--preset--color--principale-tres-sombre, #213933) 100%);
	color: #FFFFFF;
	text-align: start;
	text-decoration: none;

	/* Ombre teintée du vert du panneau : une ombre grise sous un aplat coloré
	   donne toujours un rendu terne. */
	box-shadow:
		0 2px 6px rgb(33 57 51 / 18%),
		0 16px 34px rgb(33 57 51 / 26%);
	transition:
		transform 0.35s cubic-bezier(0.22, 1, 0.36, 1),
		box-shadow 0.35s ease;
}

.calinac-appel-vedette:hover,
.calinac-appel-vedette:focus-visible {
	transform: translateY(-4px);
	color: #FFFFFF;
	box-shadow:
		0 4px 10px rgb(33 57 51 / 22%),
		0 26px 52px rgb(33 57 51 / 34%);
}

/* Reflet oblique, au repos hors cadre à gauche. Il traverse le panneau au
   survol, puis disparaît : un seul passage, pas une boucle qui distrairait. */
.calinac-appel-vedette__reflet {
	position: absolute;
	inset-block: -60%;
	inset-inline-start: -70%;
	z-index: -1;
	width: 45%;
	background: linear-gradient(
		90deg,
		transparent,
		rgb(255 255 255 / 22%),
		transparent
	);
	transform: rotate(18deg);
	transition: inset-inline-start 0.65s cubic-bezier(0.4, 0, 0.2, 1);
}

.calinac-appel-vedette:hover .calinac-appel-vedette__reflet,
.calinac-appel-vedette:focus-visible .calinac-appel-vedette__reflet {
	inset-inline-start: 120%;
}

.calinac-appel-vedette__coeur {
	display: grid;
	place-items: center;
	flex: none;
	width: 2.4rem;
	height: 2.4rem;
	border-radius: 50%;
	background: rgb(255 255 255 / 14%);
	color: var(--wp--preset--color--accent, #F1DEE5);
	transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}

.calinac-appel-vedette__coeur svg {
	width: 1.3rem;
	height: 1.3rem;
}

.calinac-appel-vedette:hover .calinac-appel-vedette__coeur,
.calinac-appel-vedette:focus-visible .calinac-appel-vedette__coeur {
	transform: scale(1.1);
	animation: calinac-battement 0.75s ease;
}

.calinac-appel-vedette__titre {
	flex: 1 1 auto;
	font-size: 1.02rem;
	font-weight: 700;
	line-height: 1.2;
}

.calinac-appel-vedette__note {
	display: block;
	margin-block-start: 0.15rem;
	font-size: 0.8rem;
	font-weight: 400;
	opacity: 0.82;
}

.calinac-appel-vedette__fleche {
	flex: none;
	font-size: 1.25rem;
	transition: transform 0.3s ease;
}

.calinac-appel-vedette:hover .calinac-appel-vedette__fleche,
.calinac-appel-vedette:focus-visible .calinac-appel-vedette__fleche {
	transform: translateX(6px);
}

.calinac-appel-vedette:focus-visible {
	outline: 3px solid var(--wp--preset--color--principale-tres-sombre, #213933);
	outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
	.calinac-appel-vedette,
	.calinac-appel-vedette__reflet,
	.calinac-appel-vedette__coeur,
	.calinac-appel-vedette__fleche {
		transition: none;
	}

	.calinac-appel-vedette:hover,
	.calinac-appel-vedette:focus-visible {
		transform: none;
	}

	.calinac-appel-vedette:hover .calinac-appel-vedette__coeur,
	.calinac-appel-vedette:focus-visible .calinac-appel-vedette__coeur {
		transform: none;
		animation: none;
	}

	.calinac-appel-vedette:hover .calinac-appel-vedette__fleche,
	.calinac-appel-vedette:focus-visible .calinac-appel-vedette__fleche {
		transform: none;
	}
}

/* La colonne devient une pile flexible, sans quoi le bouton n'aurait aucune
   hauteur à occuper : c'est elle qui reçoit la hauteur de la rangée. */
.calinac-fiche__colonne {
	display: flex;
	flex-direction: column;
	height: 100%;
}

/* ---------- « Ce que demande… » en bandeau ----------
   Reprise du vocabulaire des volets de la page « Nous aider » : bande pleine
   largeur, fond teinté, deux colonnes propos/figure, respiration verticale
   généreuse. La carte flottante précédente lisait comme un aparté ; ces
   conditions ne sont pas un aparté, ce sont les règles de l'association. */

.calinac-espece {
	position: relative;
	/* Respiration franche de part et d'autre : c'est ce qui fait lire la bande
	   comme une rupture dans la page, et non comme un bloc de plus dans le fil.
	   La marge basse compte autant que la haute — sans elle, la bande se colle
	   à la section suivante et l'effet tombe. */
	margin-block: var(--wp--preset--spacing--60);
	padding-block: var(--wp--preset--spacing--60);
	padding-inline: var(--wp--preset--spacing--40);
	border: 0;
	border-radius: 0;
	box-shadow: none;
	background:
		linear-gradient(
			120deg,
			color-mix(in srgb, var(--calinac-teinte) 9%, #FFFFFF) 0%,
			color-mix(in srgb, var(--calinac-teinte) 4%, #FFFFFF) 100%
		);
}

/* Filets fins en haut et en bas : ils bornent la bande sans l'encadrer. */
.calinac-espece::before {
	content: "";
	position: absolute;
	inset-inline: 0;
	inset-block-start: 0;
	height: 3px;
	background: var(--calinac-teinte);
	opacity: 0.55;
}

/* Le contenu de la bande s'aligne sur la trame du site, alors que le fond,
   lui, va d'un bord à l'autre. */
.calinac-espece > * {
	max-width: 84rem;
	margin-inline: auto;
}

.calinac-espece__titre {
	padding: 0;
	background: none;
	color: var(--wp--preset--color--texte, #333333);
	font-size: clamp(1.35rem, 1.1rem + 1vw, 1.75rem);
}

.calinac-espece__pastille {
	width: 3rem;
	height: 3rem;
	border-radius: 16px;
	color: var(--calinac-teinte);
	background: color-mix(in srgb, var(--calinac-teinte) 14%, #FFFFFF);
}

.calinac-espece__pastille .calinac-icone {
	width: 1.9rem;
	height: 1.9rem;
}

/* Propos à gauche, conditions à droite, comme les volets de « Nous aider ». */
.calinac-espece__intro {
	padding: 0;
}

.calinac-espece .calinac-intro__conditions {
	padding: 0;
	margin-block-start: 1.5rem;
}

.calinac-espece .calinac-intro__conditions > div {
	background: #FFFFFF;
	border-color: color-mix(in srgb, var(--calinac-teinte) 22%, #FFFFFF);
	box-shadow: 0 1px 2px rgb(33 57 51 / 4%), 0 8px 20px rgb(33 57 51 / 6%);
}

.calinac-espece__lien {
	padding: 0;
	margin-block-start: 1.5rem;
}

.calinac-espece__manque {
	margin-block-end: 1.75rem;
	padding: 1.25rem 1.4rem;
	border-radius: 16px;
}

/* Le filigrane se cale sur le bord de la bande, pas sur celui d'une carte. */
.calinac-espece::after {
	inset-block-end: -4rem;
	inset-inline-end: 2%;
	width: 18rem;
	height: 18rem;
	opacity: 0.05;
}

@media (min-width: 900px) {
	/* Sur large écran, titre et propos d'un côté, conditions de l'autre. */
	.calinac-espece__intro {
		max-width: 84rem;
	}

	.calinac-espece .calinac-intro__conditions {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

/* ---------- Médaillons illustrés des espèces ----------
   Les illustrations fournies par l'association remplacent l'icône tracée dans
   les grands médaillons. Le fond teinté de la pastille disparaît : l'image
   porte déjà son propre cercle et son décor. */

.calinac-section__pastille:has(.calinac-medaillon),
.calinac-absence__medaillon:has(.calinac-medaillon) {
	background: none;
	border: 0;
	padding: 0;
}

.calinac-medaillon {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
}

.calinac-section__pastille .calinac-medaillon {
	width: 3.4rem;
	height: 3.4rem;
}

/* Dans le bloc d'absence, l'illustration porte l'essentiel du message : elle
   occupe donc largement la place, et le texte se rapproche d'elle pour former
   un ensemble plutôt que deux éléments empilés. */
.calinac-absence__medaillon .calinac-medaillon {
	width: 14rem;
	height: 14rem;
	/* L'espèce est absente : l'illustration s'efface un peu, sans disparaître. */
	opacity: 0.75;
}

.calinac-absence__medaillon:has(.calinac-medaillon) {
	width: auto;
	height: auto;
}

.calinac-absence:has(.calinac-medaillon) {
	gap: 0.2rem;
	padding-block: 2rem;
}

/* Titre du bloc d'absence, légèrement agrandi. */
.calinac-absence__titre {
	font-size: 1.25rem;
}