/*
Theme Name:  Calinac
Description: Thème bloc sur mesure pour une association de protection des NAC.
             Léger, accessible, sans dépendance externe ni étape de compilation.
Version:     1.6.0
Requires at least: 6.5
Tested up to: 7.0
Requires PHP: 8.1
Text Domain: calinac
*/

/* L'essentiel du style vit dans theme.json. Ce fichier ne contient que ce
   que theme.json ne sait pas exprimer. */

/* Focus visible et cohérent partout : indispensable pour la navigation au
   clavier, et souvent le premier point d'échec d'un thème. */
:where(a, button, input, select, textarea, [tabindex]):focus-visible {
	outline: 3px solid var(--wp--preset--color--principale-sombre);
	outline-offset: 2px;
	border-radius: 2px;
}

/* Lien d'évitement : permet d'accéder au contenu sans parcourir tout le menu. */
.calinac-evitement {
	position: absolute;
	inset-inline-start: -9999px;
	z-index: 999;
	padding: 0.75rem 1.25rem;
	background: var(--wp--preset--color--principale-sombre);
	color: #fff;
	text-decoration: none;
}

.calinac-evitement:focus {
	inset-inline-start: 1rem;
	inset-block-start: 1rem;
}

/* ---------- En-tête ----------
   Fixé en haut de la fenêtre pendant le défilement : sur un site où l'on
   parcourt de longues listes d'animaux, garder la navigation et le bouton de
   don sous la main évite de remonter toute la page. */
header.wp-block-template-part {
	position: sticky;
	inset-block-start: 0;
	z-index: 100;
	box-shadow: 0 1px 12px rgb(0 0 0 / 5%);
}

/* Sur l'accueil, le bandeau doit toucher l'en-tête. WordPress insère un
   espacement entre les blocs de premier niveau : l'en-tête étant le premier
   enfant, le `main` qui suit hérite d'une marge haute. On l'annule ici. */
.calinac-accueil {
	margin-block-start: 0;
}

/* La barre d'administration de WordPress occupe déjà le haut de la fenêtre :
   sans ce décalage, elle recouvrirait l'en-tête pour les personnes connectées. */
.admin-bar header.wp-block-template-part {
	inset-block-start: 32px;
}

/* En dessous de 783 px, la barre d'administration passe en 46 px et n'est plus
   fixe : l'en-tête reprend alors le haut de la fenêtre. */
@media (max-width: 782px) {
	.admin-bar header.wp-block-template-part {
		inset-block-start: 0;
	}
}

/* ---------- Disposition de l'en-tête ----------
   Sept entrées aux libellés longs (91 caractères en tout), un logo et un bouton
   de don sur une seule rangée : la largeur de contenu du site (72 rem) n'y
   suffit pas. L'en-tête déborde donc volontairement du gabarit courant. */
.calinac-entete {
	max-width: 84rem;
	margin-inline: auto;
	gap: 1.5rem;
}

/* Le logo ne se comprime jamais : c'est la navigation qui cède en premier.
   La largeur suit la fenêtre entre deux bornes, plutôt que d'être figée. */
.calinac-logo {
	margin: 0;
	line-height: 0;
	flex-shrink: 0;
}

.calinac-logo img {
	display: block;
	width: clamp(8.5rem, 13vw, 11.5rem);
	height: auto;
}

.calinac-entete__droite {
	gap: 1.5rem;
	flex-shrink: 1;
	min-width: 0;
}

/* Aucun libellé ne doit se couper en deux lignes. */
.calinac-entete .wp-block-navigation__container {
	flex-wrap: nowrap;
	gap: 0.9rem;
}

.calinac-entete .wp-block-navigation-item__content {
	white-space: nowrap;
	font-size: 1.1rem;
}

.calinac-entete .wp-block-button__link {
	white-space: nowrap;
	font-size: 1.1rem;
	padding-inline: 1.3rem;
}

/* Le bloc Navigation de WordPress ne bascule en menu déroulant qu'en dessous
   de 600 px. C'est bien trop bas ici : la rangée complète réclame environ
   1330 px (900 px de libellés + logo + bouton + écarts). Sous ce seuil, elle se
   tasserait ou déborderait, `nowrap` interdisant le retour à la ligne. On
   avance donc le basculement, en reprenant la mécanique de classes du bloc
   natif. */
@media (max-width: 1330px) {
	.calinac-entete .wp-block-navigation__responsive-container-open:not(.always-shown) {
		display: flex;
	}

	.calinac-entete .wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) {
		display: none;
	}

	.calinac-entete .wp-block-navigation__responsive-container.is-menu-open {
		display: flex;
	}
}

/* Sous 480 px, le bouton de don laisse la place au logo et au burger ; il reste
   accessible dans le menu déroulant et sur la page d'accueil. */
@media (max-width: 480px) {
	.calinac-entete .wp-block-buttons {
		display: none;
	}
}

/* Le menu principal ne doit pas se transformer en pavé illisible sur mobile ;
   le bloc navigation gère l'ouverture, on soigne surtout la lisibilité. */
.wp-block-navigation {
	font-weight: 500;
}

.wp-block-navigation a:where(:not(.wp-element-button)) {
	text-decoration: none;
}

.wp-block-navigation a:where(:not(.wp-element-button)):hover {
	text-decoration: underline;
}

/* Images de contenu : jamais de débordement horizontal. */
img,
video {
	max-width: 100%;
	height: auto;
}

/* Tableaux (tarifs d'adoption) lisibles sur petit écran. */
.wp-block-table {
	overflow-x: auto;
}

.wp-block-table table {
	border-collapse: collapse;
	width: 100%;
}

.wp-block-table th,
.wp-block-table td {
	padding: 0.7rem 0.9rem;
	border: 1px solid var(--wp--preset--color--bordure);
	text-align: start;
}

.wp-block-table thead th {
	background: var(--wp--preset--color--fond-doux);
}

/* Confort de lecture des textes longs (conditions d'adoption). */
.entry-content p {
	max-width: 68ch;
}

/* ---------- Pied de page ----------
   Les liens sont regroupés par intention — adopter, soutenir, écrire — plutôt
   qu'en inventaire de toutes les pages. Un visiteur arrive avec un besoin, pas
   avec l'envie de parcourir un sommaire. */

.calinac-pied {
	display: grid;
	grid-template-columns: minmax(0, 1.4fr) repeat(3, minmax(0, 1fr));
	gap: 2.5rem 3rem;
}

.calinac-pied__identite .wp-block-site-title {
	margin-block: 0 0.5rem;
}

.calinac-pied__identite .wp-block-site-title a {
	text-decoration: none;
	color: var(--wp--preset--color--texte);
}

.calinac-pied__identite .wp-block-site-title a:hover {
	text-decoration: underline;
}

.calinac-pied__identite .wp-block-social-links {
	margin-block-start: 1.25rem;
}

.calinac-pied__titre {
	margin-block: 0 0.85rem;
	font-size: 1rem;
	font-weight: 700;
	letter-spacing: 0;
}

/* Pas de puces : dans un pied de page, elles alourdissent sans rien apporter,
   la colonne titrée suffit à signaler le groupe. */
.calinac-pied__liens {
	margin: 0;
	padding: 0;
	list-style: none;
	display: flex;
	flex-direction: column;
	gap: 0.55rem;
}

.calinac-pied__liens a {
	font-size: 0.94rem;
	text-decoration: none;
	color: var(--wp--preset--color--texte);
}

.calinac-pied__liens a:hover {
	text-decoration: underline;
	color: var(--wp--preset--color--principale-sombre);
}

.calinac-pied__note {
	margin-block: 1rem 0;
	font-size: 0.82rem;
	color: var(--wp--preset--color--texte-doux);
}

@media (max-width: 900px) {
	.calinac-pied {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 2.25rem;
	}

	.calinac-pied__identite {
		grid-column: 1 / -1;
	}
}

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

/* ---------- Halos colorés d'ambiance ----------
   UNE SEULE couche, dimensionnée sur la hauteur totale de la page et non sur
   chaque section. C'est ce qui évite les coupures : des halos posés section par
   section sont rognés à chaque bordure, et le raccord se voit.

   La couche est en `absolute` dans `.wp-site-blocks`, dont elle épouse toute la
   hauteur : les pourcentages verticaux des dégradés se répartissent donc sur la
   page entière, et l'ensemble défile avec le contenu.

   Des dégradés radiaux plutôt qu'un `filter: blur()` : le rendu est aussi doux
   et ne coûte rien, là où un flou sur de grandes surfaces fait travailler le
   processeur graphique à chaque défilement. */
.wp-site-blocks {
	position: relative;
}

.wp-site-blocks::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	pointer-events: none;

	/* Chaque tache garde sa couleur pleine jusqu'à 32 % de son rayon avant de se
	   dissiper : sans ce plateau, un dégradé radial pâlit dès son centre et le
	   résultat est presque invisible sur un fond clair. */
	background:
		radial-gradient(30rem 30rem at -2% 8%, rgb(204 225 218 / 90%) 0 32%, transparent 72%),
		radial-gradient(24rem 24rem at 101% 18%, rgb(241 222 229 / 62%) 0 32%, transparent 72%),
		radial-gradient(28rem 28rem at -1% 32%, rgb(105 157 149 / 45%) 0 32%, transparent 72%),
		radial-gradient(23rem 23rem at 102% 44%, rgb(204 225 218 / 85%) 0 32%, transparent 72%),
		radial-gradient(27rem 27rem at -2% 57%, rgb(241 222 229 / 50%) 0 32%, transparent 72%),
		radial-gradient(25rem 25rem at 101% 69%, rgb(105 157 149 / 42%) 0 32%, transparent 72%),
		radial-gradient(29rem 29rem at -1% 82%, rgb(204 225 218 / 88%) 0 32%, transparent 72%),
		radial-gradient(22rem 22rem at 102% 93%, rgb(241 222 229 / 55%) 0 32%, transparent 72%);
}

/* Le bandeau et le pied de page portent leur propre fond : ils masquent la
   nappe là où elle n'a pas lieu d'être, sans qu'aucune exception soit à écrire. */

/* ---------- Bandeau d'accueil ----------
   L'image a son sujet à droite et une étendue d'herbe à gauche : le texte se
   loge donc dans cette zone libre, et non au centre où il masquerait les
   lapins. Le cadrage `background-position` maintient le sujet visible quelle
   que soit la largeur de la fenêtre. */
/* La hauteur suit le format réel de la photo (3:1). Auparavant elle était fixée
   indépendamment : sur écran large, le conteneur devenait plus allongé que
   l'image et `cover` la rognait en haut et en bas. En calant le rapport, la
   photo s'affiche entière quelle que soit la largeur. */
.calinac-hero {
	position: relative;
	display: flex;
	align-items: center;

	/* La classe `alignfull` seule ne suffit pas : le bandeau reste en retrait de
	   la marge intérieure de la page. On l'annule par une marge négative de la
	   même valeur — en variable CSS plutôt qu'en `100vw`, qui déborderait de la
	   largeur de la barre de défilement sur les systèmes qui l'affichent. */
	margin-inline:
		calc(-1 * var(--wp--style--root--padding-left))
		calc(-1 * var(--wp--style--root--padding-right));

	/* Aucun plafond de hauteur : le rapport 3:1 de la photo gouverne seul, donc
	   l'image s'affiche entière et le bandeau gagne en hauteur avec la largeur
	   de la fenêtre. */
	aspect-ratio: 2172 / 724;
	min-height: 21rem;
	/* Marge haute et basse resserrée : le contenu est centré verticalement, elle
	   ne joue donc qu'au moment où il touche les bords — c'est-à-dire aux
	   largeurs les plus étroites de la présentation côte à côte, celles où
	   chaque dizaine de pixels décide si les boutons tiennent dans le cadre. */
	padding-block: var(--wp--preset--spacing--40);
	padding-inline: var(--wp--preset--spacing--40);
	background-image: url("assets/bandeau.webp");
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
}

/* L'aplat sur lequel se pose le texte fait partie de l'image, et le quadrillage
   le sépare franchement des photos : il n'y a plus de couture à fondre, donc
   plus de voile à poser. Le pseudo-élément reste déclaré parce qu'il sert
   ailleurs : sous 1400 px, c'est lui qui porte la bande de photos posée en
   tête de la présentation empilée. */
.calinac-hero::before {
	content: "";
	position: absolute;
	inset: 0;
	background: none;
}

/* Le bloc de texte occupe l'aplat de l'image, et rien d'autre.
   Il suivait auparavant un conteneur centré de 84 rem, dont le bord gauche
   s'éloigne du bord de la fenêtre à mesure que celle-ci s'élargit — alors que
   l'aplat, lui, garde une part constante de la largeur. Les deux repères
   divergeaient donc : au-delà d'environ 1 850 px, le texte était poussé plus
   vite vers la droite que l'aplat ne grandissait, et les lignes les plus
   longues du titre finissaient sur les photos (+71 px mesurés à 2 560 px), où
   un texte foncé devient illisible.
   Caler la colonne sur l'aplat supprime la divergence : la part est la même à
   toute largeur. Le 40 % reprend la mesure faite sur `bandeau.webp`, où les
   photos commencent à 40,5 % — le reste tient lieu de gouttière. */
.calinac-hero__contenu {
	position: relative;
	z-index: 1;
	width: 40%;
	padding-inline: clamp(0.75rem, 1.5vw, 2rem);
}

/* Les lignes restent bornées pour ne pas s'étirer sur un grand moniteur, et se
   centrent désormais dans l'aplat plutôt que de se caler sur son bord gauche. */
.calinac-hero__contenu > * {
	max-width: 32rem;
	margin-inline: auto;
	text-align: center;
}

/* Sur l'aplat vert d'eau, le titre prend le framboise de la charte — celui du
   logo et du bouton de don — et le sous-titre le gris du corps de texte. Les
   deux passent AA largement : 6,3:1 pour le framboise, 9,2:1 pour le gris. */
.calinac-hero__contenu h1 {
	color: var(--wp--preset--color--secondaire, #8C214A);
	text-wrap: balance;
}

.calinac-hero__contenu p {
	color: var(--wp--preset--color--texte, #333333);
	text-wrap: balance;
}

/* Les blocs du bandeau ne portent volontairement aucune taille prédéfinie :
   WordPress les traduirait en classes `has-…-font-size` appliquées avec
   `!important`, qui l'emporteraient sur ces valeurs fluides. */
/* Tailles fluides bornées : la borne basse sert les petits écrans, la borne
   haute empêche le titre de devenir démesuré sur un grand moniteur, et la
   valeur en `vw` assure la transition continue entre les deux — sans palier
   brusque à un point de rupture. */
.calinac-hero__contenu h1 {
	margin-block-end: 0.8rem;
	font-family: var(--wp--preset--font-family--poppins);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.03em;
	font-size: clamp(2rem, 3.6vw, 3.4rem);
	line-height: 1.15;
}

.calinac-hero__contenu p {
	margin-block-end: 1.8rem;
	font-size: clamp(1.05rem, 1.4vw, 1.35rem);
	line-height: 1.5;
}

.calinac-hero__contenu .wp-block-button__link {
	font-size: clamp(0.95rem, 1.1vw, 1.1rem);
}

.calinac-hero__contenu .wp-block-buttons {
	justify-content: center;
}

/* Sous 1400 px, le format 3:1 ne se transpose plus : la fenêtre rétrécit plus
   vite que le texte, le titre gagne des lignes et les deux boutons finissent
   par passer l'un sous l'autre, pendant que le bandeau perd de la hauteur — le
   contenu sort du cadre. On empile donc, plutôt que de rogner le mur ou de
   tasser le texte : les photos en haut sur toute la largeur, le texte dessous
   sur l'aplat. Le seuil est haut parce que le mur de photos est large ; en
   contrepartie, un portable de 1280 px voit les seize photos de la bande en
   entier au lieu d'une moitié de mur. */
@media (max-width: 1400px) {
	.calinac-hero {
		display: flex;
		flex-direction: column;
		/* Le rapport et la hauteur imposés sur grand écran n'ont plus lieu d'être :
		   la hauteur suit maintenant le contenu empilé. */
		aspect-ratio: auto;
		min-height: 0;
		padding: 0;
		background: var(--wp--preset--color--principale-claire, #CCE1DA);
	}

	/* Le pseudo-élément, décoratif sur grand écran, devient ici le bloc image
	   posé en tête. Sa hauteur suit la largeur pour rester proche du format de
	   la bande (16 photos sur deux rangs, 3,2:1) : à format égal, `cover` ne
	   rogne rien et les deux rangs restent entiers. Sur téléphone la borne
	   basse reprend la main et la bande se recadre sur ses colonnes centrales,
	   ce qui montre moins de photos mais aucune coupée en deux. */
	.calinac-hero::before {
		content: "";
		position: static;
		display: block;
		width: 100%;
		height: clamp(11rem, 31vw, 25rem);
		background: url("assets/bandeau-mobile.webp") center / cover no-repeat;
	}

	.calinac-hero__contenu {
		width: auto;
		max-width: none;
		padding: 1.75rem 1.4rem 2.25rem;
		text-align: center;
	}

	.calinac-hero__contenu > * {
		max-width: none;
		margin-inline: 0;
	}

	.calinac-hero__contenu .wp-block-buttons {
		justify-content: center;
	}
}

/* ---------- Section « L'association » ----------
   Photo à gauche dans un cadre aux angles inégaux, légèrement inclinée, avec
   une forme colorée décalée derrière elle. Ce décalage est ce qui donne du
   relief : sans lui, une photo carrée posée à côté d'un texte reste plate. */

/* Fond transparent : les halos viennent de la nappe globale, qui traverse
   toutes les sections sans rupture. */
.calinac-asso {
	position: relative;
	padding-block: var(--wp--preset--spacing--60);
	padding-inline: var(--wp--preset--spacing--40);
}

.calinac-asso__grille {
	max-width: 72rem;
	margin-inline: auto;
	display: grid;
	grid-template-columns: minmax(0, 26rem) minmax(0, 1fr);
	gap: clamp(2.5rem, 6vw, 5rem);
	align-items: center;
}

.calinac-asso__media {
	position: relative;
	padding-block-end: 2rem;
}

/* Forme colorée derrière la photo, décalée vers le bas à gauche. */
.calinac-asso__media::before {
	content: "";
	position: absolute;
	inset-block: 2.5rem -0.5rem;
	inset-inline: -1.5rem 3.5rem;
	border-radius: 42% 58% 46% 54% / 52% 44% 56% 48%;
	background: var(--wp--preset--color--principale-claire);
	opacity: 0.75;
}

/* Semis de points, repris du vocabulaire graphique des cartes. */
.calinac-asso__media::after {
	content: "";
	position: absolute;
	inset-block-start: -1.25rem;
	inset-inline-end: -0.75rem;
	width: 7rem;
	height: 7rem;
	background-image: radial-gradient(var(--wp--preset--color--principale) 1.6px, transparent 1.6px);
	background-size: 13px 13px;
	opacity: 0.35;
}

.calinac-asso__photo {
	position: relative;
	z-index: 1;
	margin: 0;
	border-radius: 58% 42% 52% 48% / 46% 54% 46% 54%;
	overflow: hidden;
	transform: rotate(-2.5deg);
	box-shadow: 0 18px 42px rgb(33 57 51 / 16%);
	transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}

.calinac-asso__photo img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 1 / 1;
	object-fit: cover;
}

.calinac-asso__media:hover .calinac-asso__photo {
	transform: rotate(0deg) scale(1.02);
}

/* Pastille posée en chevauchement sur le bas de la photo : elle met en avant
   le point qui distingue vraiment l'association. */
.calinac-asso__pastille {
	position: absolute;
	z-index: 2;
	inset-block-end: 0;
	inset-inline-start: -1rem;
	max-width: 15rem;
	margin: 0;
	padding: 0.85rem 1.15rem;
	border-radius: 14px;
	background: #FFFFFF;
	border: 1px solid var(--wp--preset--color--bordure);
	box-shadow: 0 10px 26px rgb(33 57 51 / 12%);
	font-size: 0.88rem;
	line-height: 1.4;
	color: var(--wp--preset--color--texte-doux);
}

.calinac-asso__pastille-titre {
	display: block;
	font-weight: 700;
	font-size: 1rem;
	color: var(--wp--preset--color--secondaire);
}

.calinac-asso__texte h2 {
	margin-block-start: 0;
}

/* Espèces recueillies, en étiquettes plutôt qu'en liste à puces : plus
   compact, et cela donne un repère visuel immédiat. */
.calinac-asso__especes {
	display: flex;
	flex-wrap: wrap;
	gap: 0.55rem;
	margin-block: 1.5rem;
	padding: 0;
	list-style: none;
}

.calinac-asso__especes li {
	margin: 0;
	padding: 0.4rem 0.9rem;
	border-radius: 999px;
	background: var(--wp--preset--color--fond-doux);
	border: 1px solid var(--wp--preset--color--bordure);
	font-size: 0.9rem;
	font-weight: 600;
	color: var(--wp--preset--color--principale-sombre);
}

.calinac-asso__lien a {
	font-weight: 600;
	text-decoration: none;
}

.calinac-asso__lien a:hover {
	text-decoration: underline;
}

.calinac-asso__lien:hover .calinac-aide__fleche {
	transform: translateX(5px);
}

@media (max-width: 860px) {
	.calinac-asso__grille {
		grid-template-columns: 1fr;
		gap: 3rem;
	}

	.calinac-asso__media {
		max-width: 24rem;
		margin-inline: auto;
	}
}

@media (prefers-reduced-motion: reduce) {
	.calinac-asso__photo {
		transition: none;
	}

	.calinac-asso__media:hover .calinac-asso__photo {
		transform: rotate(-2.5deg);
	}
}

/* ---------- Section « Comment nous aider » ----------
   Quatre cartes décalées en quinconce, posées sur un fond dégradé. Le décalage
   vertical est statique : c'est lui qui donne l'impression de flottement, sans
   rien coûter en animation. Le mouvement n'intervient qu'au survol. */

/* Aucun fond ni halo propre : la section laisse passer la nappe globale, ce qui
   garantit la continuité des taches d'une section à l'autre. */
.calinac-aide {
	position: relative;
	margin-block-start: var(--wp--preset--spacing--60);
	padding-block: var(--wp--preset--spacing--60) 7rem;
	padding-inline: var(--wp--preset--spacing--40);
}

.calinac-aide__entete {
	position: relative;
	z-index: 1;
	margin-block-end: var(--wp--preset--spacing--50);
}

.calinac-aide__grille {
	position: relative;
	z-index: 1;
	max-width: 84rem;
	margin-inline: auto;
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 1.75rem;
	align-items: start;
}

.calinac-aide__carte {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 0.4rem;
	padding: 2rem 1.6rem 1.6rem;
	border-radius: 20px;
	background: #FFFFFF;
	border: 1px solid var(--wp--preset--color--bordure);
	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;
}

/* Quinconce : une carte sur deux descend, ce qui rompt l'alignement et donne
   son côté « posé en suspension » plutôt que « rangé dans un tableau ». */
.calinac-aide__carte:nth-child(2n) {
	margin-block-start: 2.75rem;
}

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

/* Pastille de l'icône. Chaque carte porte sa couleur, reprise de la palette. */
.calinac-aide__pastille {
	display: grid;
	place-items: center;
	width: 4.25rem;
	height: 4.25rem;
	margin-block-end: 0.9rem;
	border-radius: 20px;
	color: var(--calinac-teinte, var(--wp--preset--color--principale-sombre));
	background: color-mix(in srgb, var(--calinac-teinte, #487D70) 12%, #FFFFFF);
	transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}

.calinac-aide__pastille svg {
	width: 2.3rem;
	height: 2.5rem;
}

.calinac-aide__carte:hover .calinac-aide__pastille,
.calinac-aide__carte:focus-within .calinac-aide__pastille {
	transform: rotate(-6deg) scale(1.06);
}

.calinac-aide__carte--accueil { --calinac-teinte: #487D70; }
.calinac-aide__carte--don     { --calinac-teinte: #8C214A; }
.calinac-aide__carte--parrain { --calinac-teinte: #213933; }
/* #CF3470 : la charte ne fournit que des roses très clairs (#F1DEE5, #F3DEF1),
   inutilisables ici car la teinte sert aussi de couleur de lien sur la carte.
   Celle-ci est le bordeaux de la charte éclairci jusqu'à la limite AA, soit
   4,80:1 sur blanc, et reste distincte du bordeaux plein #8C214A. */
.calinac-aide__carte--adopter { --calinac-teinte: #CF3470; }

/* Filet coloré en haut de carte, révélé au survol. */
.calinac-aide__carte::before {
	content: "";
	position: absolute;
	inset-block-start: 0;
	inset-inline: 1.5rem;
	height: 3px;
	border-radius: 0 0 3px 3px;
	background: var(--calinac-teinte);
	transform: scaleX(0);
	transform-origin: center;
	transition: transform 0.35s ease;
}

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

.calinac-aide__carte h3 {
	margin-block: 0 0.2rem;
}

.calinac-aide__carte p {
	margin-block: 0;
	font-size: 0.97rem;
	color: var(--wp--preset--color--texte-doux);
}

.calinac-aide__action {
	margin-block-start: auto;
	padding-block-start: 1.1rem;
}

.calinac-aide__action a {
	color: var(--calinac-teinte);
	font-weight: 600;
	text-decoration: none;
}

.calinac-aide__action a:hover {
	text-decoration: underline;
}

/* La flèche avance au survol : un petit signal de direction, sans déplacer
   le texte qui l'accompagne. */
.calinac-aide__fleche {
	display: inline-block;
	margin-inline-start: 0.4rem;
	transition: transform 0.3s ease;
}

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

@media (max-width: 1100px) {
	.calinac-aide__grille {
		grid-template-columns: repeat(2, 1fr);
		gap: 1.5rem;
	}

	/* En deux colonnes, le quinconce doit décaler la 2e et la 4e seulement. */
	.calinac-aide__carte:nth-child(2n) {
		margin-block-start: 0;
	}

	.calinac-aide__carte:nth-child(2) {
		margin-block-start: 2.5rem;
	}
}

@media (max-width: 680px) {
	.calinac-aide {
		padding-block-end: var(--wp--preset--spacing--50);
	}

	.calinac-aide__grille {
		grid-template-columns: 1fr;
	}

	/* Empilées, les cartes décalées créeraient des trous : on remet à plat. */
	.calinac-aide__carte,
	.calinac-aide__carte:nth-child(2) {
		margin-block-start: 0;
	}
}

/* Aucun mouvement pour qui a demandé à ne pas en avoir : l'effet de relief
   passe alors uniquement par l'ombre et le filet coloré. */
@media (prefers-reduced-motion: reduce) {
	.calinac-aide__carte,
	.calinac-aide__pastille,
	.calinac-aide__fleche,
	.calinac-aide__carte::before {
		transition: none;
	}

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

	.calinac-aide__carte:hover .calinac-aide__pastille,
	.calinac-aide__carte:focus-within .calinac-aide__pastille {
		transform: none;
	}

	.calinac-aide__carte:hover .calinac-aide__fleche,
	.calinac-aide__carte:focus-within .calinac-aide__fleche {
		transform: none;
	}
}

/* ---------- Boutique HelloAsso ----------
   La boutique est servie par HelloAsso dans un cadre tiers. Trois contraintes
   pèsent sur cette section : on ne peut pas mesurer le contenu du cadre (autre
   domaine, donc aucun script de redimensionnement possible), le cadre peut être
   bloqué par le navigateur ou une extension, et il charge des traceurs tiers.
   D'où le repli et la mention qui l'accompagnent, qui font partie du bloc. */
.calinac-boutique {
	margin-block: var(--wp--preset--spacing--40);
}

.calinac-boutique__cadre {
	display: block;
	width: 100%;
	border: 1px solid var(--wp--preset--color--bordure);
	border-radius: 12px;
	background: var(--wp--preset--color--surface);
	box-shadow: 0 2px 14px rgb(33 57 51 / 7%);

	/* Hauteur adaptative sans JavaScript. La relation est inverse de celle
	   d'un `aspect-ratio` : plus la fenêtre est étroite, plus les produits
	   s'empilent en colonne, donc plus le cadre doit être haut. On décroît
	   donc la hauteur quand la largeur augmente.
	   ~1150 px sur mobile, ~750 px vers 1440 px (la valeur recommandée par
	   HelloAsso), plancher à 700 px sur très grand écran. */
	height: clamp(700px, 1400px - 45vw, 1150px);
}

/* Le repli est la seule issue pour qui voit le cadre bloqué : il doit rester
   lisible sans ressembler à une note de bas de page. */
.calinac-boutique__repli {
	margin-block-start: 1rem;
	padding: 0.75rem 1rem;
	border-inline-start: 3px solid var(--wp--preset--color--principale);
	border-radius: 4px;
	background: var(--wp--preset--color--fond-doux);
}

.calinac-boutique__confidentialite {
	margin-block-start: 0.75rem;
	color: var(--wp--preset--color--texte-doux);
	font-size: var(--wp--preset--font-size--small);
}

/* La boutique s'aligne sur la trame de la page « Animaux à l'adoption ».
   La largeur est portée par le gabarit `page-boutique.html`, dont les groupes
   sont en disposition « par défaut » : c'est la seule méthode fiable, un
   `max-width` sur un enfant ne pouvant pas le faire dépasser son parent.

   Sélecteur à trois classes : WordPress impose la largeur « large » via
   `.is-layout-constrained > .alignwide`, de spécificité (0,2,0). */
.is-layout-constrained > .wp-block-group.calinac-boutique__large {
	max-width: 84rem;
}


/* En-tête de la boutique sur le modèle des autres pages : bande pleine largeur
   sur fond doux, contenu aligné à gauche, surtitre en petites capitales. */
.calinac-boutique__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 s'aligne sur la trame de 84 rem,
   comme le cadre en dessous. La bande étant en disposition « par défaut », le
   groupe intérieur ne reçoit pas la contrainte automatiquement — d'où le
   max-width explicite, oublié une première fois. */
.calinac-boutique__bandeau > .calinac-boutique__large {
	max-width: 84rem;
	margin-inline: auto;
}

.calinac-boutique__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-boutique__intro {
	font-size: 1.3rem;
	line-height: 1.5;
}

/* Chapeaux à mesure de lecture ; `.entry-content` répété pour passer au-dessus
   du plafond `.entry-content p { max-width: 68ch }` du thème. */
.entry-content .calinac-boutique__bandeau p {
	max-width: 62ch;
}

/* Le cadre HelloAsso et son lien de repli occupent toute la largeur. */
.calinac-boutique__large .calinac-boutique {
	max-width: none;
}

.calinac-boutique__repli {
	border-inline-start: 0;
	border-radius: 12px;
	text-align: center;
}


/* ---------- Page « Nous aider » ----------
   La section « Comment nous aider ? » de l'accueil aligne quatre cartes
   identiques : elle sert de sommaire et renvoie ici. Reprendre la même grille
   sur cette page ne dirait rien de plus. Chaque façon d'aider reçoit donc un
   volet à elle, numéroté, avec sa figure propre — répartition, barre
   proportionnelle, échange, étiquettes de tarif. La parenté avec le reste du
   site tient au vocabulaire, pas à la recette : mêmes rayons de 20 px, mêmes
   ombres basses, mêmes petites capitales, mêmes icônes tracées à la main.

   Les fonds alternent volet par volet et la figure change de côté à chaque
   fois : c'est ce qui donne le rythme, sans qu'aucune animation ne soit
   nécessaire au repos. */

.calinac-soutien {
	--calinac-teinte: var(--wp--preset--color--principale-sombre);
	margin-block: 0;
}

/* La composition gère ses propres largeurs : le plafond de lecture posé par
   `.entry-content p` décalerait les textes des figures par rapport à leur
   cadre. On le neutralise ici, chaque bloc portant ensuite sa propre mesure. */
.calinac-soutien p {
	max-width: none;
}

/* Même gabarit que .calinac-conditions__centre : ces pages sont de même niveau
   et leurs contenus doivent s'aligner au pixel. L'ancienne valeur (76rem plus
   un padding) donnait 1216 px là où les autres pages donnent 1344 px, soit
   48 px de décalage de chaque côté, visible en passant d'une page à l'autre. */
.calinac-soutien__centre {
	width: min(84rem, 100% - 2 * 1.75rem);
	margin-inline: auto;
}

.calinac-soutien__hors-ecran {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

/* ---------- Chapeau ---------- */

.calinac-soutien__chapeau {
	padding-block: var(--wp--preset--spacing--60) var(--wp--preset--spacing--50);
	background: var(--wp--preset--color--accent);
	border-block-end: 1px solid var(--wp--preset--color--bordure);
}

.calinac-soutien__surtitre {
	margin-block: 0 0.6rem;
	font-size: 0.82rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	color: var(--wp--preset--color--principale-sombre);
}

.calinac-soutien__titre {
	margin-block: 0;
	/* Même échelle que le titre de « Animaux à l'adoption » : les deux pages
	   sont de même niveau dans le site, leurs titres ne doivent pas donner
	   l'impression d'une hiérarchie qui n'existe pas. */
	font-size: clamp(2.5rem, 4vw, 3.4rem);
	line-height: 1.1;
	letter-spacing: -0.02em;
	color: var(--wp--preset--color--principale-tres-sombre);
}

.calinac-soutien__intro {
	max-width: 56ch;
	margin-block: 0.8rem 0;
	font-size: 1.3rem;
	line-height: 1.5;
	color: var(--wp--preset--color--texte-doux);
}

/* Sommaire : quatre pastilles d'ancre. Elles annoncent la structure de la page
   d'un coup d'œil et servent de raccourci sur mobile, où les quatre volets
   représentent un long défilement. */
.calinac-soutien__sommaire ul {
	display: flex;
	flex-wrap: wrap;
	gap: 0.6rem;
	margin-block: 1.75rem 0;
	padding: 0;
	list-style: none;
}

.calinac-soutien__sommaire a {
	display: inline-flex;
	align-items: center;
	gap: 0.55rem;
	padding: 0.5rem 1.1rem 0.5rem 0.55rem;
	border-radius: 999px;
	border: 1px solid var(--wp--preset--color--bordure);
	background: #FFFFFF;
	color: var(--wp--preset--color--principale-tres-sombre);
	font-weight: 600;
	font-size: 0.95rem;
	text-decoration: none;
	transition: border-color 0.25s ease, transform 0.25s ease;
}

.calinac-soutien__sommaire a:hover {
	border-color: var(--wp--preset--color--principale-sombre);
	transform: translateY(-2px);
	text-decoration: underline;
}

/* Le rang numéroté est le fil conducteur de la page : on le retrouve à
   l'identique en tête de chaque volet. */
.calinac-soutien__rang {
	display: inline-grid;
	place-items: center;
	min-width: 1.9rem;
	height: 1.9rem;
	border-radius: 999px;
	background: var(--wp--preset--color--principale-sombre);
	color: #FFFFFF;
	font-size: 0.78rem;
	font-weight: 700;
	font-variant-numeric: tabular-nums;
}

/* ---------- Volets ---------- */

.calinac-soutien__volet {
	padding-block: var(--wp--preset--spacing--60);
	/* L'en-tête est collant : sans ce dégagement, une ancre du sommaire
	   amènerait le titre du volet sous la barre de navigation. */
	scroll-margin-top: 6rem;
}

.calinac-soutien__duo {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
	gap: clamp(2rem, 5vw, 4rem);
	align-items: center;
}

/* La figure change de côté d'un volet à l'autre. Sur les volets inversés, c'est
   le texte qui passe en second : l'ordre du balisage reste celui de la lecture,
   propos d'abord, illustration ensuite. */
.calinac-soutien__volet--don .calinac-soutien__propos,
.calinac-soutien__volet--adhesion .calinac-soutien__propos {
	order: 2;
}

.calinac-soutien__etiquette {
	display: flex;
	align-items: center;
	gap: 0.7rem;
	margin-block: 0 0.9rem;
	font-size: 0.8rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.09em;
	color: var(--wp--preset--color--texte-doux);
}

.calinac-soutien__etiquette .calinac-soutien__rang {
	background: var(--calinac-teinte);
}

.calinac-soutien__propos h2 {
	margin-block: 0 1rem;
	color: var(--wp--preset--color--principale-tres-sombre);
}

.calinac-soutien__propos p:not(.calinac-soutien__etiquette):not(.calinac-soutien__action) {
	max-width: 42ch;
	margin-block: 0 1rem;
	color: var(--wp--preset--color--texte);
}

.calinac-soutien__action {
	margin-block: 1.6rem 0;
}

.calinac-soutien__bouton {
	display: inline-block;
	padding: 0.7rem 1.6rem;
	border: 2px solid transparent;
	border-radius: 999px;
	background: var(--calinac-teinte);
	color: #FFFFFF;
	font-weight: 600;
	text-decoration: none;
	transition: filter 0.25s ease, transform 0.25s ease;
}

.calinac-soutien__bouton:hover {
	filter: brightness(1.12);
	transform: translateY(-2px);
	text-decoration: none;
}

/* Variante creuse : le parrainage passe par un courriel, pas par un paiement.
   Un bouton plein l'annoncerait comme une transaction. */
.calinac-soutien__bouton--fin {
	background: transparent;
	border-color: var(--calinac-teinte);
	color: var(--calinac-teinte);
}

.calinac-soutien__bouton--fin:hover {
	background: var(--calinac-teinte);
	color: #FFFFFF;
	filter: none;
}

/* ---------- Figures, socle commun ---------- */

.calinac-soutien__figure {
	margin: 0;
	padding: 1.75rem;
	border-radius: 20px;
	background: #FFFFFF;
	border: 1px solid var(--wp--preset--color--bordure);
	box-shadow:
		0 2px 4px rgb(33 57 51 / 4%),
		0 12px 28px rgb(33 57 51 / 7%);
}

/* La légende n'est pas un titre : elle nomme la figure en petites capitales,
   soulignée d'un filet à la teinte du volet. */
.calinac-soutien__figure figcaption {
	padding-block-end: 0.7rem;
	margin-block-end: 1.2rem;
	border-block-end: 2px solid var(--calinac-teinte);
	font-size: 0.78rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--wp--preset--color--texte-doux);
}

.calinac-soutien__colonnes {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 1.4rem;
}

/* Séparation en pointillés entre les deux colonnes : elle reprend le trait des
   lignes du carnet de santé, sur une fiche animal. */
.calinac-soutien__colonnes > * + * {
	padding-inline-start: 1.4rem;
	border-inline-start: 1px dotted var(--wp--preset--color--bordure);
}

.calinac-soutien__colonne-titre {
	margin-block: 0 0.8rem;
	font-size: 0.8rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: var(--wp--preset--color--principale-tres-sombre);
}

.calinac-soutien__liste {
	margin: 0;
	padding: 0;
	list-style: none;
	display: flex;
	flex-direction: column;
	gap: 0.65rem;
}

.calinac-soutien__liste li {
	display: flex;
	align-items: flex-start;
	gap: 0.6rem;
	font-size: 0.95rem;
	line-height: 1.35;
	color: var(--wp--preset--color--texte);
}

.calinac-soutien__puce {
	flex: none;
	width: 1.1rem;
	height: 1.35rem;
	color: var(--calinac-teinte);
}

.calinac-soutien__note {
	margin-block: 1.3rem 0;
	padding-block-start: 1rem;
	border-block-start: 1px dotted var(--wp--preset--color--bordure);
	font-size: 0.85rem;
	line-height: 1.45;
	color: var(--wp--preset--color--texte-doux);
}

/* ---------- 01 Familles d'accueil ---------- */

.calinac-soutien__volet--accueil {
	--calinac-teinte: var(--wp--preset--color--principale-sombre);
	background: var(--wp--preset--color--fond);
}

/* Ce qui reste à la charge de la famille ne doit pas se lire comme un refus :
   même graisse, même taille, seule l'icône change. */
.calinac-soutien__colonne--vous .calinac-soutien__puce {
	color: var(--wp--preset--color--texte-doux);
}

/* ---------- 02 Don ---------- */

/* Le seul volet sombre de la page. La rupture de fond fait le travail que
   ferait ailleurs un encadré « à retenir » : elle isole l'argument le plus
   fort — 66 % du don revient au donateur — sans avoir à le dire. */
/* Le fond de ce volet était en « bleu profond », une teinte dérivée absente de
   la charte. Le bordeaux la remplace : il est dans la charte, il porte le blanc
   à 8,64:1, et c'est déjà la couleur associée au don ailleurs sur le site. */
.calinac-soutien__volet--don {
	--calinac-teinte: var(--wp--preset--color--accent);
	background: var(--wp--preset--color--rose-moyen-fonce);
	color: #FFFFFF;
}

.calinac-soutien__volet--don .calinac-soutien__propos h2,
.calinac-soutien__volet--don .calinac-soutien__propos p:not(.calinac-soutien__etiquette):not(.calinac-soutien__action) {
	color: #FFFFFF;
}

.calinac-soutien__volet--don .calinac-soutien__propos strong {
	color: var(--wp--preset--color--principale-claire);
}

.calinac-soutien__volet--don .calinac-soutien__etiquette {
	color: var(--wp--preset--color--principale-claire);
}

.calinac-soutien__volet--don .calinac-soutien__etiquette .calinac-soutien__rang {
	background: var(--wp--preset--color--principale-claire);
	color: var(--wp--preset--color--principale-tres-sombre);
}

/* Le contour de focus par défaut est vert sombre : illisible sur ce fond. */
.calinac-soutien__volet--don :focus-visible {
	outline-color: var(--wp--preset--color--principale-claire);
}

.calinac-soutien__balance {
	background: rgb(255 255 255 / 6%);
	border-color: rgb(204 225 218 / 35%);
	box-shadow: none;
}

.calinac-soutien__balance figcaption {
	color: var(--wp--preset--color--principale-claire);
	border-block-end-color: rgb(204 225 218 / 45%);
}

/* La barre est une figure décorative : elle est masquée aux technologies
   d'assistance, les mêmes valeurs étant écrites en toutes lettres dans la
   légende qui suit. */
.calinac-soutien__barre {
	display: flex;
	overflow: hidden;
	height: 3.6rem;
	border-radius: 999px;
}

.calinac-soutien__part {
	display: grid;
	place-items: center;
	font-weight: 700;
	font-variant-numeric: tabular-nums;
}

/* Part reprise par l'impôt : hachurée. La distinction entre les deux parts ne
   repose donc pas seulement sur la couleur. */
.calinac-soutien__part--impot {
	flex: 66;
	background:
		repeating-linear-gradient(
			135deg,
			rgb(204 225 218 / 34%) 0 7px,
			rgb(204 225 218 / 12%) 7px 14px
		);
	color: var(--wp--preset--color--principale-claire);
}

/* Part réellement supportée par le donateur : pleine, c'est elle qu'on retient. */
.calinac-soutien__part--vous {
	flex: 34;
	background: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--principale-tres-sombre);
}

.calinac-soutien__legende {
	margin-block: 1.3rem 0;
	display: grid;
	gap: 0.55rem;
}

.calinac-soutien__legende > div {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: 0.3rem 1.5rem;
}

.calinac-soutien__legende dt {
	display: flex;
	align-items: center;
	gap: 0.6rem;
	font-size: 0.95rem;
	color: #FFFFFF;
}

.calinac-soutien__legende dd {
	margin: 0;
	font-weight: 700;
	font-variant-numeric: tabular-nums;
	color: var(--wp--preset--color--principale-claire);
}

.calinac-soutien__chiffre {
	font-size: 1.9rem;
	line-height: 1.1;
	color: var(--wp--preset--color--accent);
}

.calinac-soutien__temoin {
	flex: none;
	width: 1.1rem;
	height: 1.1rem;
	border-radius: 4px;
}

.calinac-soutien__temoin--impot {
	background:
		repeating-linear-gradient(
			135deg,
			rgb(204 225 218 / 70%) 0 4px,
			rgb(204 225 218 / 20%) 4px 8px
		);
}

.calinac-soutien__temoin--vous {
	background: var(--wp--preset--color--accent);
}

.calinac-soutien__balance .calinac-soutien__note {
	border-block-start-color: rgb(204 225 218 / 35%);
	color: var(--wp--preset--color--principale-claire);
}

.calinac-soutien__bouton--don {
	background: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--principale-tres-sombre);
}

/* ---------- 03 Parrainage ---------- */

.calinac-soutien__volet--parrainage {
	--calinac-teinte: var(--wp--preset--color--secondaire);
	background: var(--wp--preset--color--fond-doux);
}

/* ---------- 04 Adhésion ---------- */

.calinac-soutien__volet--adhesion {
	--calinac-teinte: var(--wp--preset--color--principale-tres-sombre);
	background: var(--wp--preset--color--fond);
	border-block-start: 1px solid var(--wp--preset--color--bordure);
}

.calinac-soutien__etiquettes {
	display: grid;
	gap: 1rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

/* Étiquette de tarif : la ligne pointillée et les deux crans dessinent un
   ticket détachable. Les crans sont deux dégradés radiaux de la couleur du
   fond, pas des images. */
.calinac-soutien__ticket {
	position: relative;
	display: flex;
	align-items: center;
	gap: 1.4rem;
	padding: 1.1rem 1.3rem;
	border-radius: 14px;
	background: var(--wp--preset--color--fond-doux);
	border: 1px solid var(--wp--preset--color--bordure);
}

.calinac-soutien__ticket::before,
.calinac-soutien__ticket::after {
	content: "";
	position: absolute;
	inset-inline-start: 7.1rem;
	width: 0.9rem;
	height: 0.9rem;
	border-radius: 50%;
	/* Couleur de la carte qui porte les étiquettes, pas celle de la page. */
	background: #FFFFFF;
	border: 1px solid var(--wp--preset--color--bordure);
}

.calinac-soutien__ticket::before {
	inset-block-start: -0.5rem;
	clip-path: inset(0.5rem 0 0 0);
}

.calinac-soutien__ticket::after {
	inset-block-end: -0.5rem;
	clip-path: inset(0 0 0.5rem 0);
}

.calinac-soutien__prix {
	position: relative;
	flex: none;
	width: 5.6rem;
	margin: 0;
	padding-inline-end: 1.4rem;
	border-inline-end: 2px dashed var(--wp--preset--color--bordure);
	font-size: 2.3rem;
	font-weight: 700;
	line-height: 1.1;
	letter-spacing: -0.02em;
	font-variant-numeric: tabular-nums;
	color: var(--calinac-teinte);
}

.calinac-soutien__ticket--reduit .calinac-soutien__prix {
	color: var(--wp--preset--color--principale-sombre);
}

.calinac-soutien__ticket-corps {
	min-width: 0;
}

.calinac-soutien__ticket-titre {
	margin: 0 0 0.15rem;
	font-weight: 700;
	color: var(--wp--preset--color--principale-tres-sombre);
}

.calinac-soutien__ticket-detail {
	margin: 0;
	font-size: 0.9rem;
	line-height: 1.35;
	color: var(--wp--preset--color--texte-doux);
}

/* ---------- Adaptations ---------- */

@media (max-width: 980px) {
	/* Une seule colonne : le propos passe systématiquement avant sa figure,
	   quel que soit le côté choisi sur grand écran. */
	.calinac-soutien__duo {
		grid-template-columns: 1fr;
		gap: 2.25rem;
	}

	.calinac-soutien__volet--don .calinac-soutien__propos,
	.calinac-soutien__volet--adhesion .calinac-soutien__propos {
		order: 0;
	}

	.calinac-soutien__propos p:not(.calinac-soutien__etiquette):not(.calinac-soutien__action) {
		max-width: 60ch;
	}
}

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

	/* Deux colonnes de 150 px tasseraient les libellés : elles s'empilent, et le
	   pointillé passe de vertical à horizontal. */
	.calinac-soutien__colonnes {
		grid-template-columns: 1fr;
		gap: 1.1rem;
	}

	.calinac-soutien__colonnes > * + * {
		padding-inline-start: 0;
		padding-block-start: 1.1rem;
		border-inline-start: 0;
		border-block-start: 1px dotted var(--wp--preset--color--bordure);
	}

	.calinac-soutien__barre {
		height: 3rem;
	}

	.calinac-soutien__ticket {
		gap: 1rem;
		padding: 1rem;
	}

	.calinac-soutien__prix {
		width: 4.6rem;
		padding-inline-end: 1rem;
		font-size: 2rem;
	}

	.calinac-soutien__ticket::before,
	.calinac-soutien__ticket::after {
		inset-inline-start: 5.6rem;
	}

	.calinac-soutien__sommaire a {
		font-size: 0.9rem;
	}
}

/* Aucun mouvement pour qui a demandé à ne pas en avoir : les états de survol
   restent signalés par le contraste et le soulignement. */
@media (prefers-reduced-motion: reduce) {
	.calinac-soutien__sommaire a,
	.calinac-soutien__bouton {
		transition: none;
	}

	.calinac-soutien__sommaire a:hover,
	.calinac-soutien__bouton:hover {
		transform: none;
	}
}

/* ---------- Page « Partenariats / Evènements » ----------
   Tout le style de l'agenda et des cartes de partenaires vit dans le plugin
   « Événements et partenaires », avec le balisage qu'il produit : le thème
   n'a rien à en savoir, et une refonte graphique ne casserait pas la page.

   Ne reste ici que la largeur de trame, qui relève du gabarit et de lui seul.
   La page s'aligne sur « Animaux à l'adoption » et « Boutique » : les cartes de
   partenaires se rangent par trois à cette largeur, contre deux à la largeur
   « large » par défaut du thème, avec une colonne vide au bout.

   Comme pour la boutique, la largeur est portée par les groupes du gabarit,
   en disposition « par défaut » : un `max-width` posé sur un enfant ne peut pas
   le faire dépasser son parent. Sélecteur à trois classes, car WordPress impose
   la largeur « large » via `.is-layout-constrained > .alignwide`, de
   spécificité (0,2,0). */
.is-layout-constrained > .wp-block-group.calinac-agenda__large {
	max-width: 84rem;
}


/* ---------- Page « Nos conditions » ----------
   La page la plus informative du site, et celle qu'on ne lit pas : on y vient
   vérifier une surface minimale ou un tarif, pour une espèce précise. Tout est
   donc organisé pour la consultation — un sommaire, une barre de repères vers
   les six espèces, et une fiche par espèce où vie sociale, habitat,
   alimentation et frais sont étiquetés séparément plutôt que fondus dans une
   phrase. Le tableau à trois colonnes qu'elle remplace tenait tout ça dans une
   seule cellule.

   Le vocabulaire est celui de « Nous aider » et des fiches animaux : volets
   pleine largeur alternés, numérotation en petites capitales, cartes blanches
   à rayon de 20 px, pastilles teintées par espèce. Les teintes viennent du
   référentiel du plugin et ne servent qu'à des éléments graphiques ou à des
   tracés d'icônes — jamais à porter seules une information.

   Note sur les images : cinq espèces sur six ont leur photo. Aucune photo de
   gerbille libre de droits ne tenait la comparaison avec les autres (fond de
   terrarium, lumière de lampe chauffante, sujets sauvages) ; plutôt qu'une
   image hors sujet, sa fiche affiche la pastille dessinée du référentiel. */

.calinac-conditions {
	--calinac-teinte: var(--wp--preset--color--principale-sombre);
	margin-block: 0;
}

/* La composition gère ses propres mesures : le plafond de lecture posé par
   `.entry-content p` décalerait les textes des fiches par rapport à leur
   cadre. On le neutralise, chaque bloc portant ensuite sa propre largeur. */
.calinac-conditions p {
	max-width: none;
}

/* Trame de 84 rem, comme « Animaux à l'adoption », « Nous aider » et
   « Boutique ». Les volets peignant des fonds pleine largeur, la mesure est
   portée ici et non par le gabarit.

   `width` plutôt que `max-width` + `padding` : la gouttière doit rester à
   l'extérieur des 84 rem, faute de quoi le bord des cartes tomberait 3,5 rem
   en deçà de celui des autres pages. La valeur est écrite en dur et non reprise
   du préréglage d'espacement, qui ne vaut pas 1,75 rem dans une `calc()`
   imbriquée — 84 rem est une trame, pas un espacement. */
.calinac-conditions__centre {
	width: min(84rem, 100% - 2 * 1.75rem);
	margin-inline: auto;
}

/* ---------- Chapeau ---------- */

.calinac-conditions__chapeau {
	padding-block: var(--wp--preset--spacing--60) var(--wp--preset--spacing--50);
	background: var(--wp--preset--color--accent);
	border-block-end: 1px solid var(--wp--preset--color--bordure);
}

.calinac-conditions__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);
}

/* Même taille de titre que les autres pages. Aucun attribut `fontSize` n'est
   posé sur le bloc : WordPress le traduirait en classe appliquée avec
   `!important`, qui écraserait cette règle. */
.calinac-conditions__titre {
	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);
}

.calinac-conditions__intro {
	max-width: 56ch;
	margin-block: 0;
	font-size: 1.3rem;
	line-height: 1.5;
	color: var(--wp--preset--color--texte-doux);
}

/* ---------- Sommaire des trois démarches ---------- */

.calinac-conditions__sommaire ul {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
	margin-block: 1.75rem 0;
	padding: 0;
	list-style: none;
}

.calinac-conditions__sommaire a {
	display: inline-flex;
	align-items: baseline;
	gap: 0.6rem;
	padding: 0.6rem 1.1rem;
	border-radius: 999px;
	background: #FFFFFF;
	border: 1px solid var(--wp--preset--color--bordure);
	color: var(--wp--preset--color--principale-tres-sombre);
	font-weight: 600;
	text-decoration: none;
	transition: transform 0.15s ease, border-color 0.15s ease;
}

.calinac-conditions__sommaire a:hover,
.calinac-conditions__sommaire a:focus-visible {
	transform: translateY(-2px);
	border-color: var(--wp--preset--color--principale-sombre);
	text-decoration: underline;
}

.calinac-conditions__rang {
	font-size: 0.8rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	color: var(--wp--preset--color--principale-sombre);
}

/* ---------- Volets ---------- */

.calinac-conditions__volet {
	padding-block: var(--wp--preset--spacing--60);
	/* L'en-tête est fixé en haut de la fenêtre : sans ce décalage, une ancre
	   déposerait le titre visé derrière la barre de navigation. */
	scroll-margin-top: 6rem;
}

.calinac-conditions__volet--adopter {
	background: var(--wp--preset--color--fond);
}

.calinac-conditions__etiquette {
	display: flex;
	align-items: baseline;
	gap: 0.6rem;
	margin-block: 0 0.5rem;
	font-size: 0.85rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.12em;
	color: var(--wp--preset--color--principale-sombre);
}

.calinac-conditions__volet h2 {
	margin-block: 0 1rem;
	font-size: clamp(1.7rem, 2.6vw, 2.3rem);
	color: var(--wp--preset--color--rose-moyen-fonce);
}

.calinac-conditions__propos {
	max-width: 62ch;
	margin-block: 0 2.5rem;
	color: var(--wp--preset--color--texte-doux);
}

.calinac-conditions__sous-titre {
	margin-block: 0 1.5rem;
	font-size: 1.35rem;
	color: var(--wp--preset--color--principale-tres-sombre);
}

.calinac-conditions__sous-titre--seul {
	margin-block-end: 0.6rem;
}

/* ---------- Le déroulement d'une adoption ----------
   Quatre étapes en chemin. La numérotation est portée par la liste ordonnée,
   pas par le décor : le trait de liaison est purement graphique et n'apparaît
   qu'à partir de deux colonnes. */

.calinac-conditions__parcours {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 1.25rem;
	margin: 0;
	padding: 0;
	list-style: none;
	counter-reset: none;
}

.calinac-conditions__etape {
	position: relative;
	padding: 1.5rem 1.35rem;
	border-radius: 20px;
	background: #FFFFFF;
	border: 1px solid var(--wp--preset--color--bordure);
	box-shadow: 0 2px 4px rgb(33 57 51 / 4%), 0 12px 28px rgb(33 57 51 / 6%);
}

/* Le trait qui relie une étape à la suivante. Décor seul, donc masqué : l'ordre
   est déjà donné par le balisage et par les jetons numérotés. */
.calinac-conditions__etape + .calinac-conditions__etape::before {
	content: "";
	position: absolute;
	inset-block-start: 2.6rem;
	inset-inline-start: calc(-1.25rem - 1px);
	width: 1.25rem;
	border-block-start: 2px dotted var(--wp--preset--color--bordure);
}

.calinac-conditions__jeton {
	display: grid;
	place-items: center;
	width: 2.4rem;
	height: 2.4rem;
	margin-block-end: 0.9rem;
	border-radius: 50%;
	background: var(--wp--preset--color--principale-sombre);
	color: #FFFFFF;
	font-weight: 700;
	font-size: 1.05rem;
}

.calinac-conditions__etape-titre {
	margin-block: 0 0.35rem;
	font-weight: 700;
	color: var(--wp--preset--color--principale-tres-sombre);
}

.calinac-conditions__etape-texte {
	margin-block: 0;
	font-size: 0.98rem;
	color: var(--wp--preset--color--texte-doux);
}

/* ---------- Référentiel des espèces ---------- */

.calinac-conditions__volet--especes {
	background: var(--wp--preset--color--fond-doux);
	border-block: 1px solid var(--wp--preset--color--bordure);
}

/* Barre de repères : l'accès direct à une espèce, que le tableau d'origine
   ne permettait pas. Chaque repère porte son icône dessinée ; la teinte de
   l'espèce ne colore que le tracé, le nom restant écrit en toutes lettres. */
.calinac-conditions__reperes ul {
	display: flex;
	flex-wrap: wrap;
	gap: 0.6rem;
	margin-block: 0 2.5rem;
	padding: 0;
	list-style: none;
}

.calinac-conditions__reperes a {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.5rem 1rem 0.5rem 0.6rem;
	border-radius: 999px;
	background: #FFFFFF;
	border: 1px solid var(--wp--preset--color--bordure);
	color: var(--wp--preset--color--principale-tres-sombre);
	font-weight: 600;
	font-size: 0.98rem;
	text-decoration: none;
	transition: transform 0.15s ease, border-color 0.15s ease;
}

.calinac-conditions__reperes a:hover,
.calinac-conditions__reperes a:focus-visible {
	transform: translateY(-2px);
	border-color: var(--calinac-teinte);
	text-decoration: underline;
}

.calinac-conditions__reperes .calinac-icone {
	width: 1.5rem;
	height: 1.5rem;
	color: var(--calinac-teinte);
}

/* ---------- Fiche d'une espèce ----------
   Trois colonnes à la trame de 84 rem. La fiche est une carte en colonne :
   photo, en-tête, carnet, puis les frais poussés en bas de carte pour que les
   six montants s'alignent d'une fiche à l'autre. */

.calinac-conditions__fiches {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(21rem, 1fr));
	gap: 1.75rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

/* Pas d'`overflow: hidden` ici, contrairement aux autres cartes du site : sur
   l'élément visé par une ancre, Chrome ignore alors son `scroll-margin-top` et
   dépose le haut de la fiche sous l'en-tête fixe. C'est la photo qui porte
   elle-même l'arrondi de ses deux coins hauts. */
.calinac-conditions__fiche {
	display: flex;
	flex-direction: column;
	border-radius: 20px;
	background: #FFFFFF;
	border: 1px solid var(--wp--preset--color--bordure);
	border-block-start: 5px solid var(--calinac-teinte);
	box-shadow: 0 2px 4px rgb(33 57 51 / 4%), 0 12px 28px rgb(33 57 51 / 6%);
	scroll-margin-top: 6rem;
}

.calinac-conditions__photo {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	background: var(--wp--preset--color--fond-doux);
	/* Rayon intérieur : les 20 px de la carte moins l'épaisseur du liseré. */
	border-start-start-radius: 15px;
	border-start-end-radius: 15px;
}

/* Faute de photo convenable, la pastille dessinée occupe le même cadre : la
   grille garde son rythme, sans image hors sujet. */
.calinac-conditions__photo--dessin {
	display: grid;
	place-items: center;
	background: color-mix(in srgb, var(--calinac-teinte) 10%, #FFFFFF);
	color: var(--calinac-teinte);
}

.calinac-conditions__photo--dessin .calinac-icone {
	width: 5.5rem;
	height: 5.5rem;
}

.calinac-conditions__fiche-corps {
	display: flex;
	flex-direction: column;
	flex: 1;
	padding: 1.35rem 1.5rem 1.5rem;
}

.calinac-conditions__fiche-entete {
	display: flex;
	align-items: center;
	gap: 0.8rem;
	margin-block-end: 1rem;
}

.calinac-conditions__fiche-entete h4 {
	margin: 0;
	font-size: 1.35rem;
	color: var(--wp--preset--color--principale-tres-sombre);
}

.calinac-conditions__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);
}

/* Version illustrée : le médaillon est déjà un disque détouré, il porte son
   propre fond. Le cadre teinté ferait doublon, on l'efface. */
.calinac-conditions__pastille--image {
	width: 3.4rem;
	height: 3.4rem;
	background: none;
	border-radius: 0;
}

.calinac-conditions__pastille--image .calinac-medaillon {
	width: 100%;
	height: 100%;
}

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

/* Le carnet. Les valeurs sont des phrases entières, parfois deux : étiquette
   au-dessus plutôt qu'en regard, contrairement au carnet des fiches animaux
   où les valeurs tiennent en trois mots. */
.calinac-conditions__carnet {
	margin: 0;
}

.calinac-conditions__ligne {
	padding-block: 0.7rem;
	border-block-end: 1px dotted var(--wp--preset--color--bordure);
}

.calinac-conditions__ligne:first-child {
	padding-block-start: 0;
}

.calinac-conditions__ligne dt {
	margin: 0 0 0.2rem;
	font-size: 0.76rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.07em;
	color: var(--wp--preset--color--texte-doux);
}

.calinac-conditions__ligne dd {
	margin: 0;
	font-size: 1rem;
	line-height: 1.45;
	color: var(--wp--preset--color--texte);
}

/* Les frais : ce qu'on vient chercher en priorité. Un montant par ligne, avec
   ce qu'il couvre en regard, plutôt qu'une suite séparée par des puces
   médianes qui se lit mal et se cherche encore plus mal. */
.calinac-conditions__tarifs {
	margin-block-start: auto;
	padding-block-start: 1.1rem;
}

.calinac-conditions__tarifs-titre {
	margin-block: 0 0.6rem;
	font-size: 0.76rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.07em;
	color: var(--wp--preset--color--texte-doux);
}

.calinac-conditions__tarifs ul {
	display: grid;
	gap: 0.35rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.calinac-conditions__tarifs li {
	display: flex;
	align-items: baseline;
	gap: 0.6rem;
	padding: 0.45rem 0.85rem;
	border-radius: 12px;
	background: var(--wp--preset--color--fond-doux);
}

.calinac-conditions__montant {
	flex: none;
	font-weight: 700;
	font-size: 1.1rem;
	color: var(--wp--preset--color--principale-tres-sombre);
	font-variant-numeric: tabular-nums;
}

.calinac-conditions__libelle {
	font-size: 0.95rem;
	color: var(--wp--preset--color--texte-doux);
}

.calinac-conditions__note {
	margin-block: 1.75rem 0;
	font-size: 0.98rem;
	color: var(--wp--preset--color--texte-doux);
}

.calinac-conditions__note--large {
	max-width: 62ch;
}

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

.calinac-conditions__action {
	margin-block: 1.75rem 0;
}

.calinac-conditions__bouton {
	display: inline-block;
	padding: 0.8rem 1.75rem;
	border-radius: 999px;
	background: var(--wp--preset--color--principale-sombre);
	color: #FFFFFF;
	font-weight: 600;
	text-decoration: none;
	transition: transform 0.15s ease, background-color 0.15s ease;
}

.calinac-conditions__bouton:hover,
.calinac-conditions__bouton:focus-visible {
	transform: translateY(-2px);
	background: var(--wp--preset--color--principale-tres-sombre);
	text-decoration: underline;
}

/* Sur fond sombre, le bouton s'inverse : blanc plein, texte vert très sombre. */
.calinac-conditions__bouton--clair {
	background: #FFFFFF;
	color: var(--wp--preset--color--principale-tres-sombre);
}

.calinac-conditions__bouton--clair:hover,
.calinac-conditions__bouton--clair:focus-visible {
	background: var(--wp--preset--color--principale-claire);
	color: var(--wp--preset--color--principale-tres-sombre);
}

/* ---------- Volets « famille d'accueil » et « nous confier » ---------- */

.calinac-conditions__duo {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 3rem;
	align-items: start;
}

.calinac-conditions__propos-bloc p {
	max-width: 52ch;
	color: var(--wp--preset--color--texte-doux);
}

.calinac-conditions__figure {
	padding: 1.75rem;
	border-radius: 20px;
	background: #FFFFFF;
	border: 1px solid var(--wp--preset--color--bordure);
	box-shadow: 0 2px 4px rgb(33 57 51 / 4%), 0 12px 28px rgb(33 57 51 / 6%);
}

.calinac-conditions__figure-titre {
	margin-block: 0 1rem;
	font-size: 0.8rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--wp--preset--color--texte-doux);
}

.calinac-conditions__liste {
	margin: 0;
	padding: 0;
	list-style: none;
}

.calinac-conditions__liste li {
	display: flex;
	align-items: flex-start;
	gap: 0.7rem;
	padding-block: 0.6rem;
	color: var(--wp--preset--color--texte);
}

/* Chaque sens a son propre tracé, jamais sa seule couleur : coche pour ce que
   l'association assume, gamelle pour ce qui reste à la famille, œil pour ce
   qui se fait sous surveillance. */
.calinac-conditions__puce {
	flex: none;
	width: 1.35rem;
	height: 1.35rem;
	margin-block-start: 0.15rem;
	color: var(--wp--preset--color--principale-sombre);
}

.calinac-conditions__liste + .calinac-conditions__liste .calinac-conditions__puce {
	color: var(--wp--preset--color--secondaire);
}

.calinac-conditions__adhesion,
.calinac-conditions__participations li {
	display: flex;
	align-items: baseline;
	gap: 0.6rem;
	padding: 0.6rem 0.9rem;
	border-radius: 12px;
	background: var(--wp--preset--color--fond-doux);
}

.calinac-conditions__adhesion {
	margin-block: 1.25rem 0;
}

.calinac-conditions__participations {
	display: grid;
	gap: 0.5rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

/* Le volet « famille d'accueil », seul sur fond sombre : c'est ce qui permet à
   l'association d'exister, et la rupture de couleur suffit à le dire. */
.calinac-conditions__volet--accueil {
	background: var(--wp--preset--color--rose-moyen-fonce);
	color: #FFFFFF;
}

.calinac-conditions__volet--accueil h2,
.calinac-conditions__volet--accueil .calinac-conditions__propos-bloc p {
	color: #FFFFFF;
}

.calinac-conditions__volet--accueil .calinac-conditions__etiquette,
.calinac-conditions__volet--accueil .calinac-conditions__rang {
	color: var(--wp--preset--color--principale-claire);
}

/* Les liens de texte passent en vert clair pour rester lisibles sur le fond
   sombre. Le bouton en est exclu explicitement : sans cette exception, il
   héritait de cette couleur sur son propre fond blanc — 1,4:1, illisible. */
.calinac-conditions__volet--accueil .calinac-conditions__propos-bloc a:not(.calinac-conditions__bouton) {
	color: var(--wp--preset--color--principale-claire);
}

/* Le liseré de focus vert sombre serait invisible sur ce fond. */
.calinac-conditions__volet--accueil :focus-visible {
	outline-color: var(--wp--preset--color--principale-claire);
}

.calinac-conditions__volet--confier {
	background: var(--wp--preset--color--fond);
}

/* L'irréversibilité est le point sur lequel l'association est le plus souvent
   recontactée : elle reçoit son propre bloc, avec un triangle dessiné — pas
   seulement une couleur — et un aplat très clair du rouge de la charte. */
.calinac-conditions__avertissement {
	display: flex;
	align-items: flex-start;
	gap: 0.7rem;
	margin-block: 1.25rem 0;
	padding: 0.9rem 1rem;
	border-radius: 12px;
	background: color-mix(in srgb, var(--wp--preset--color--accent) 30%, #FFFFFF);
	border-inline-start: 4px solid var(--wp--preset--color--secondaire);
	color: var(--wp--preset--color--texte);
	font-size: 0.98rem;
}

.calinac-conditions__avertissement .calinac-conditions__puce {
	color: var(--wp--preset--color--secondaire);
}

/* ---------- Adaptations ---------- */

@media (max-width: 1100px) {
	/* Le chemin en quatre colonnes tasse les libellés bien avant de manquer de
	   place : il passe en deux colonnes, et les traits de liaison disparaissent
	   plutôt que de relier des étapes qui ne se suivent plus visuellement. */
	.calinac-conditions__parcours {
		grid-template-columns: repeat(2, 1fr);
	}

	.calinac-conditions__etape + .calinac-conditions__etape::before {
		display: none;
	}
}

@media (max-width: 980px) {
	/* Une seule colonne : le propos passe toujours avant sa figure. */
	.calinac-conditions__duo {
		grid-template-columns: 1fr;
		gap: 2.25rem;
	}
}

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

	.calinac-conditions__figure,
	.calinac-conditions__etape {
		padding: 1.25rem;
	}

	.calinac-conditions__fiche-corps {
		padding: 1.15rem 1.25rem 1.35rem;
	}

	/* Les repères deviennent une bande défilable horizontalement plutôt qu'un
	   pavé de six pastilles qui repousserait la première fiche hors de l'écran. */
	.calinac-conditions__reperes ul {
		flex-wrap: nowrap;
		overflow-x: auto;
		padding-block-end: 0.5rem;
		scrollbar-width: thin;
	}

	.calinac-conditions__reperes li {
		flex: none;
	}

	.calinac-conditions__sommaire a {
		font-size: 0.95rem;
	}
}

/* Aucun mouvement pour qui a demandé à ne pas en avoir : les états de survol
   restent signalés par le contraste et le soulignement. */
@media (prefers-reduced-motion: reduce) {
	.calinac-conditions__sommaire a,
	.calinac-conditions__reperes a,
	.calinac-conditions__bouton {
		transition: none;
	}

	.calinac-conditions__sommaire a:hover,
	.calinac-conditions__sommaire a:focus-visible,
	.calinac-conditions__reperes a:hover,
	.calinac-conditions__reperes a:focus-visible,
	.calinac-conditions__bouton:hover,
	.calinac-conditions__bouton:focus-visible {
		transform: none;
	}
}

/* ---------- Bandeau de la page Partenariats / Evènements ----------
   La photo de hamster de l'ancien site, en tête de page. Le voile en dégradé
   part de la gauche, là où se pose le titre : un assombrissement uniforme
   ternirait toute la photo, alors que seul le fond du texte a besoin d'être
   assombri pour que le blanc reste lisible. Même principe que le bandeau
   d'accueil. */

.calinac-agenda__bandeau {
	position: relative;
	display: flex;
	align-items: flex-end;
	min-height: clamp(15rem, 26vw, 22rem);
	margin-block-end: var(--wp--preset--spacing--50);
	padding-block: var(--wp--preset--spacing--50);
	padding-inline: var(--wp--preset--spacing--40);

	/* Le gabarit place ce bloc dans un conteneur contraint : on annule la marge
	   intérieure de la page pour qu'il aille d'un bord à l'autre. */
	margin-inline:
		calc(-1 * var(--wp--style--root--padding-left))
		calc(-1 * var(--wp--style--root--padding-right));

	background-image: url("assets/evenements-bandeau.webp");
	background-size: cover;
	background-position: center 40%;
	background-repeat: no-repeat;
}

.calinac-agenda__bandeau::before {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(
		95deg,
		rgb(33 57 51 / 88%) 0%,
		rgb(33 57 51 / 70%) 32%,
		rgb(33 57 51 / 25%) 62%,
		rgb(33 57 51 / 0%) 82%
	);
}

.calinac-agenda__bandeau .calinac-agenda__large {
	position: relative;
	z-index: 1;
	width: 100%;
}

.calinac-agenda__bandeau .wp-block-post-title {
	margin: 0;
	color: #FFFFFF;
	text-shadow: 0 1px 12px rgb(33 57 51 / 45%);
}

/* Sous 900 px, la version allégée suffit et le voile devient presque plein :
   la colonne de texte occupe alors toute la largeur. */
@media (max-width: 900px) {
	.calinac-agenda__bandeau {
		background-image: url("assets/evenements-bandeau-mobile.webp");
		min-height: 13rem;
	}

	.calinac-agenda__bandeau::before {
		background: linear-gradient(
			175deg,
			rgb(33 57 51 / 55%) 0%,
			rgb(33 57 51 / 82%) 100%
		);
	}
}

/* Le titre du bandeau doit tomber sur la même verticale que le texte en
   dessous. La règle générale de largeur ne s'applique pas ici : elle cible les
   enfants d'un conteneur « contraint », or le bandeau est en disposition
   « par défaut » pour pouvoir aller d'un bord à l'autre. */
.calinac-agenda__bandeau > .wp-block-group.calinac-agenda__large {
	max-width: 84rem;
	margin-inline: auto;
}

/* Titre et chapeau de la boutique à l'échelle des autres pages. Le bloc de
   titre est rendu nativement : on le cible par son conteneur, et on évite tout
   attribut de taille dans le gabarit — WordPress les traduit en classes
   appliquées avec `!important`, qui l'emporteraient sur ces règles. */
.calinac-boutique__large .wp-block-post-title {
	font-size: clamp(2.5rem, 4vw, 3.4rem);
	line-height: 1.1;
	margin-block: 0 0.8rem;
	/* Cette page était la seule à laisser son titre hériter du gris de texte :
	   même encre que les autres, pour que les titres de même niveau se
	   ressemblent. */
	color: var(--wp--preset--color--principale-tres-sombre);
}



/* Icônes sociales dans le corps d'une page — la page Contact les met en avant,
   contrairement au pied de page où elles restent discrètes. La règle est donc
   limitée au contenu, pour ne pas grossir celles du pied. */
.entry-content .wp-block-social-links {
	gap: 0.75rem;
}

.entry-content .wp-block-social-link .wp-block-social-link-anchor {
	padding: 0;
}

.entry-content .wp-block-social-link svg {
	width: 2.6em;
	height: 2.6em;
}

/* ---------- Page Contact ----------
   Même trame et même échelle que les autres pages : titre centré, chapeau à
   1,3 rem, largeur de 84 rem. Le corps garde en revanche une mesure de lecture
   confortable et centrée — une adresse e-mail et deux paragraphes étalés sur
   1344 px seraient pénibles à lire. */

.is-layout-constrained > .wp-block-group.calinac-contact__corps {
	max-width: 84rem;
}

/* En-tête sur le modèle de « Nous aider », « Nos conditions » et de la page des
   animaux : bande pleine largeur sur fond doux, contenu aligné à gauche,
   surtitre en petites capitales. */
.calinac-contact__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 s'aligne sur la trame de 84 rem,
   comme la grille en dessous. La bande étant en disposition « par défaut », le
   groupe intérieur ne reçoit pas la contrainte automatiquement. */
.calinac-contact__bandeau > .calinac-contact__entete {
	max-width: 84rem;
	margin-inline: auto;
}

.calinac-contact__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-contact__entete .wp-block-post-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. `.entry-content` répété pour passer au-dessus du
   plafond `.entry-content p { max-width: 68ch }` du thème. */
.entry-content .calinac-contact__entete p {
	max-width: 62ch;
}

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

/* La grille occupe toute la largeur de la page. Coordonnées à gauche,
   formulaire à droite ; sous 780 px, WordPress empile déjà les colonnes. */
.calinac-contact__grille {
	text-align: start;
	/* La grille occupe toute la trame de 84 rem : sans cette largeur explicite,
	   elle s'alignait sur la mesure de lecture des paragraphes du dessus. */
	width: 100%;
	max-width: none;
}

.calinac-contact__infos {
	background: var(--wp--preset--color--fond-doux);
	border-radius: 18px;
	padding: 1.75rem 1.6rem;
}

.calinac-contact__infos h2 {
	margin-block: 0 0.4rem;
}

.calinac-contact__infos h2:not(:first-child) {
	margin-block-start: 1.75rem;
}

.calinac-contact__infos .wp-block-social-links {
	margin-block: 0.5rem 0;
}

/* ---------------------------------------------------------------------------
   Charte typographique 2026
   Titres et corps : Poppins. Sous-titres : Pacifico. Légendes : Farro.
   Pacifico est une anglaise : réservée aux sous-titres courts, jamais à un
   paragraphe entier, où elle deviendrait pénible à lire.
--------------------------------------------------------------------------- */

.calinac-hero__contenu > p:first-of-type,
.calinac-conditions__sous-titre {
	font-family: var(--wp--preset--font-family--pacifico);
	font-size: var(--wp--preset--font-size--x-large);
	font-weight: 400;
	line-height: 1.35;
	letter-spacing: 0;
}

.calinac-soutien__legende,
figcaption,
.wp-element-caption {
	font-family: var(--wp--preset--font-family--farro);
}


/* ---------------------------------------------------------------------------
   Page « Nous aider » : les titres de section sont des sous-titres, ils
   prennent donc Pacifico, qui les distingue du titre de la page.
--------------------------------------------------------------------------- */

.calinac-soutien__propos h2 {
	font-family: var(--wp--preset--font-family--pacifico);
	font-weight: 400;
	letter-spacing: 0;
	line-height: 1.3;
}

/* ---------------------------------------------------------------------------
   Page « Partenariats / Évènements » : même principe, tout passe en Pacifico
   sauf le titre de la page.
--------------------------------------------------------------------------- */

.calinac-ev-titre,
.calinac-ev-vide__titre,
.calinac-ev-breve__titre,
.calinac-pa-carte__nom {
	font-family: var(--wp--preset--font-family--pacifico);
	font-weight: 400;
	letter-spacing: 0;
	line-height: 1.35;
}

/* ---------------------------------------------------------------------------
   Page « Nos conditions » : les titres de volet en Poppins gras, en capitales.
   Le ciblage passe par le conteneur et non par l'identifiant : `titre-accueil`
   existe aussi sur « Nous aider », où il doit rester en Pacifico.
   Les capitales réclament un peu d'interlettrage — sans lui, les montantes se
   collent et le mot se lit moins bien qu'en bas-de-casse.
--------------------------------------------------------------------------- */

.calinac-conditions__volet h2 {
	font-family: var(--wp--preset--font-family--poppins);
	font-weight: 700;
	line-height: 1.2;
	font-size: clamp(1.6rem, 1.2rem + 1.4vw, 2.1rem);
}

/* Les « i » restent en bas-de-casse. Ils sont encadrés dans le gabarit plutôt
   que saisis en capitales : le texte du document reste « Adopter un animal »,
   donc lisible tel quel par un lecteur d'écran et par un moteur de recherche.
   Seul l'affichage change. */
.calinac-bdc {
	text-transform: lowercase;
}


/* ---------------------------------------------------------------------------
   Accueil : titres de section et de carte en Poppins gras capitales, « i » en
   bas-de-casse.
--------------------------------------------------------------------------- */

.calinac-asso h2,
.calinac-aide h2 {
	font-family: var(--wp--preset--font-family--poppins);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.03em;
	line-height: 1.2;
}

.calinac-asso h2,
.calinac-aide h2 {
	font-size: clamp(1.6rem, 1.2rem + 1.4vw, 2.1rem);
}

/* Les titres de carte portent `.has-large-font-size`, que WordPress applique
   avec `!important` : sans cette règle ils sortent à 36 px, au-dessus des
   33,6 px des titres de section qui les surplombent. */
.calinac-aide__carte h3.has-large-font-size {
	font-size: clamp(1.15rem, 0.95rem + 0.7vw, 1.45rem) !important;
	line-height: 1.25;
}


/* Les trois démarches qui ont leur propre formulaire, sur la page de contact.
   Présentées en liste plutôt qu'en phrase : on les parcourt du regard pour
   trouver la sienne, on ne les lit pas. */
.calinac-contact__demarches {
	margin-block: 0.9rem 1.2rem;
	padding-inline-start: 1.1rem;
}

.calinac-contact__demarches li {
	margin-block-end: 0.45rem;
}


/* ---------------------------------------------------------------------------
   Titres en capitales : la règle est posée sur `heading` dans theme.json, donc
   sur tous les titres du site. Deux exceptions ci-dessous.
--------------------------------------------------------------------------- */

/* 1. Les sous-titres en Pacifico gardent leur casse : une anglaise en capitales
      est illisible, ses lettres sont dessinées pour s'enchaîner. */
.calinac-hero__contenu > p:first-of-type,
.calinac-conditions__sous-titre,
.calinac-soutien__propos h2,
.calinac-ev-titre,
.calinac-ev-vide__titre,
.calinac-ev-breve__titre,
.calinac-pa-carte__nom {
	text-transform: none;
	letter-spacing: 0;
}

/* 2. Les « i » restent en bas-de-casse partout où ils sont encadrés. */
.calinac-bdc {
	text-transform: lowercase;
}