/*
Theme Name: Les Pas Tout Nettes
Theme URI: https://les-pas-tout-nettes.fr
Author: Les Pas Tout Nettes
Description: Site vitrine de l'association de protection animale Les Pas Tout Nettes (Thionville, 57).
Version: 1.0.0
Requires at least: 6.5
Tested up to: 6.9
Requires PHP: 8.0
License: GNU General Public License v2 or later
Text Domain: lpn
*/

/* ===========================================================================
   1. Jetons
   ======================================================================== */

:root {
	--rose: #f2cee0;
	--rose-clair: #fbeef4;
	--rose-pale: #fdf6f9;
	--framboise: #c2456f;
	--framboise-fonce: #9b2f53;
	--beige: #e4c2b2;
	--beige-clair: #f8ece5;
	--beige-fonce: #a9704f;
	--gris: #cacaca;
	--gris-clair: #ece9ea;
	--creme: #fdf9f6;
	--encre: #2e2a2c;
	--encre-douce: #6b6165;
	--succes: #35785d;
	--succes-clair: #e3f2ea;
	--alerte: #b85220;
	--alerte-clair: #fbeade;
	--blanc: #ffffff;

	--radius-s: 12px;
	--radius: 20px;
	--radius-l: 32px;
	--radius-full: 999px;

	--ombre-s: 0 4px 12px rgba(46, 42, 44, .06);
	--ombre: 0 14px 34px rgba(155, 47, 83, .10);
	--ombre-l: 0 26px 60px rgba(155, 47, 83, .16);

	--shell: 1180px;
	--gap: clamp(1.25rem, 3vw, 2.5rem);

	--police-titre: "Fredoka", "Trebuchet MS", sans-serif;
	--police-texte: "Nunito Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

/* ===========================================================================
   2. Base
   ======================================================================== */

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

html { scroll-behavior: smooth; }

body {
	margin: 0;
	font-family: var(--police-texte);
	font-size: 17px;
	line-height: 1.65;
	color: var(--encre);
	background: var(--creme);
	-webkit-font-smoothing: antialiased;
	overflow-x: hidden;
}

h1, h2, h3, h4 {
	font-family: var(--police-titre);
	font-weight: 600;
	line-height: 1.15;
	color: var(--encre);
	margin: 0 0 .6em;
	letter-spacing: -.01em;
}

h1 { font-size: clamp(2.1rem, 1.4rem + 3vw, 3.4rem); }
h2 { font-size: clamp(1.6rem, 1.1rem + 2vw, 2.4rem); }
h3 { font-size: clamp(1.2rem, 1rem + .8vw, 1.5rem); }
h4 { font-size: 1.08rem; }

p { margin: 0 0 1.1em; }
p:last-child { margin-bottom: 0; }

a { color: var(--framboise); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--framboise-fonce); }

img { max-width: 100%; height: auto; display: block; }

ul, ol { padding-left: 1.2em; }

hr { border: 0; border-top: 1px solid var(--gris-clair); margin: 2.5rem 0; }

strong { font-weight: 700; }

:focus-visible {
	outline: 3px solid var(--framboise);
	outline-offset: 3px;
	border-radius: 4px;
}

.skip-link {
	position: absolute;
	left: -9999px;
	top: 0;
	background: var(--framboise);
	color: #fff;
	padding: 12px 20px;
	z-index: 999;
	border-radius: 0 0 var(--radius-s) 0;
}
.skip-link:focus { left: 0; color: #fff; }

.shell {
	width: min(var(--shell), 92vw);
	margin-inline: auto;
}

.shell-narrow {
	width: min(760px, 92vw);
	margin-inline: auto;
}

.section { padding: clamp(3rem, 6vw, 5.5rem) 0; }
.section-tight { padding: clamp(2rem, 4vw, 3.5rem) 0; }
.section-rose { background: var(--rose-pale); }
.section-beige { background: var(--beige-clair); }

.section-head {
	max-width: 640px;
	margin: 0 0 clamp(1.8rem, 3vw, 2.8rem);
}

.section-head.is-centered {
	margin-inline: auto;
	text-align: center;
}

.section-head p {
	color: var(--encre-douce);
	font-size: 1.06rem;
	margin: 0;
}

.eyebrow {
	display: inline-block;
	font-family: var(--police-titre);
	font-size: .82rem;
	font-weight: 600;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--framboise-fonce);
	background: var(--rose-clair);
	padding: 5px 14px;
	border-radius: var(--radius-full);
	margin-bottom: 1rem;
}

.lead { font-size: 1.15rem; color: var(--encre-douce); }

/* ===========================================================================
   3. Boutons
   ======================================================================== */

.btn, .lpn-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: .5em;
	padding: .78em 1.6em;
	border-radius: var(--radius-full);
	font-family: var(--police-titre);
	font-weight: 500;
	font-size: 1rem;
	line-height: 1.2;
	border: 2px solid transparent;
	cursor: pointer;
	text-decoration: none;
	transition: transform .18s ease, box-shadow .18s ease, background .18s ease, color .18s ease;
}

.btn-primary, .lpn-btn-primary {
	background: var(--framboise);
	color: #fff;
	box-shadow: 0 10px 24px rgba(194, 69, 111, .26);
}
.btn-primary:hover, .lpn-btn-primary:hover {
	background: var(--framboise-fonce);
	color: #fff;
	transform: translateY(-2px);
	box-shadow: 0 14px 30px rgba(155, 47, 83, .32);
}

.btn-ghost, .lpn-btn-ghost {
	background: transparent;
	border-color: var(--framboise);
	color: var(--framboise);
}
.btn-ghost:hover, .lpn-btn-ghost:hover {
	background: var(--rose-clair);
	color: var(--framboise-fonce);
	transform: translateY(-2px);
}

.btn-soft {
	background: var(--blanc);
	color: var(--encre);
	border-color: var(--gris-clair);
	box-shadow: var(--ombre-s);
}
.btn-soft:hover { border-color: var(--rose); color: var(--framboise); transform: translateY(-2px); }

.btn-small { padding: .5em 1.1em; font-size: .92rem; }
.btn-block { width: 100%; }

.btn[disabled], .btn.is-disabled {
	opacity: .55;
	pointer-events: none;
}

/* L'attribut hidden vient de la feuille du navigateur : la moindre regle de
   classe donnant un display le neutralise en silence, et l'element reste
   visible alors que le code le croit cache. On lui rend son autorite une fois
   pour toutes, plutot que de rattraper le coup element par element. */
[hidden] {
	display: none !important;
}

.actions { display: flex; flex-wrap: wrap; gap: .8rem; }
.actions-center { justify-content: center; }

/* ===========================================================================
   4. En-tete
   ======================================================================== */

.site-header {
	position: sticky;
	top: 0;
	z-index: 60;
	background: rgba(253, 249, 246, .92);
	backdrop-filter: blur(14px);
	border-bottom: 1px solid rgba(46, 42, 44, .06);
}

/* Trois zones : marque à gauche, navigation centrée, appel au don à droite.
   La grille garantit que la navigation reste centrée dans la page, quelle que
   soit la largeur de la marque ou du bouton. */
.header-inner {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr) auto;
	align-items: center;
	gap: 1rem;
	padding: .55rem 0;
}

.brand {
	display: flex;
	align-items: center;
	gap: .7rem;
	text-decoration: none;
	color: inherit;
	flex-shrink: 0;
}

.brand-logo { width: 58px; height: auto; }

.brand-text { display: flex; flex-direction: column; }

.brand-name {
	font-family: var(--police-titre);
	font-weight: 600;
	font-size: 1.05rem;
	line-height: 1.1;
	color: var(--encre);
}

.brand-baseline {
	font-size: .72rem;
	color: var(--encre-douce);
	letter-spacing: .01em;
	white-space: nowrap;
}

.site-nav {
	display: flex;
	align-items: center;
	justify-content: center;
	min-width: 0;
}

.site-nav ul {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-wrap: nowrap;
	gap: .1rem;
	list-style: none;
	margin: 0;
	padding: 0;
}

.site-nav a {
	display: block;
	padding: .42rem .55rem;
	border-radius: var(--radius-full);
	font-weight: 600;
	font-size: .84rem;
	line-height: 1.3;
	white-space: nowrap;
	color: var(--encre);
	text-decoration: none;
	transition: background .18s ease, color .18s ease;
}

.site-nav a:hover,
.site-nav .current-menu-item > a,
.site-nav .current_page_item > a {
	background: var(--rose-clair);
	color: var(--framboise-fonce);
}

.header-don {
	padding: .58em 1.05em;
	font-size: .88rem;
	white-space: nowrap;
	justify-self: end;
}

.brand-logo { flex: none; }

.nav-toggle {
	display: none;
	align-items: center;
	gap: .5rem;
	background: var(--blanc);
	border: 1px solid var(--gris-clair);
	border-radius: var(--radius-full);
	padding: .5rem .9rem;
	font-family: var(--police-titre);
	font-weight: 500;
	color: var(--encre);
	cursor: pointer;
}

.nav-toggle-bars { display: grid; gap: 4px; }
.nav-toggle-bars span {
	display: block;
	width: 18px;
	height: 2px;
	background: var(--encre);
	border-radius: 2px;
	transition: transform .2s ease, opacity .2s ease;
}

.nav-toggle[aria-expanded="true"] .nav-toggle-bars span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle-bars span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] .nav-toggle-bars span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

@media (max-width: 1200px) {
	/* Le panneau recouvre la barre : sans cela le bouton disparait dessous et
	   il ne reste plus rien pour refermer. Au-dessus, il se change en croix —
	   l'animation existe deja plus haut — et sert de bouton de fermeture. */
	.nav-toggle {
		display: inline-flex;
		position: relative;
		z-index: 80;
	}

	/* Le flou d'arriere-plan fait de l'en-tete le bloc conteneur de ses
	   descendants en position fixed : le panneau de navigation se retrouvait
	   confine dans la barre de 64 px au lieu de couvrir l'ecran. Sur mobile
	   l'en-tete est de toute facon presque opaque, on troque le flou contre un
	   fond plein. */
	.site-header {
		backdrop-filter: none;
		background: var(--creme);
	}

	.site-nav {
		position: fixed;
		inset: 0 0 0 auto;
		width: min(360px, 88vw);
		flex-direction: column;
		align-items: stretch;
		justify-content: flex-start;
		gap: 0;
		padding: 5.5rem 1.5rem 2rem;
		background: var(--blanc);
		box-shadow: var(--ombre-l);
		transform: translateX(100%);
		/* Hors ecran, le menu ne doit pas rester dans l'ordre de tabulation :
		   la visibilite s'eteint une fois la glissade terminee. */
		visibility: hidden;
		transition: transform .28s ease, visibility 0s linear .28s;
		overflow-y: auto;
		overscroll-behavior: contain;
		z-index: 70;
	}

	.site-nav.is-open {
		transform: translateX(0);
		visibility: visible;
		transition: transform .28s ease;
	}

	.header-inner { grid-template-columns: minmax(0, 1fr) auto; }

	.site-nav ul {
		flex-direction: column;
		align-items: stretch;
		flex-wrap: wrap;
		gap: .2rem;
	}

	.site-nav a { padding: .85rem 1rem; font-size: 1.05rem; white-space: normal; }

	/* Sur mobile, le bouton flottant assure déjà l'appel au don. */
	.header-don { display: none; }

	body.nav-open { overflow: hidden; }

	/* L'en-tete est un contexte d'empilement a z-index 60 : un voile a 65 se
	   posait par-dessus, donc par-dessus le panneau et le bouton de fermeture.
	   En passant dessous, il assombrit la page sans jamais bloquer le menu. */
	body.nav-open::after {
		content: "";
		position: fixed;
		inset: 0;
		background: rgba(46, 42, 44, .45);
		z-index: 55;
	}
}

/* ===========================================================================
   5. Accueil
   ======================================================================== */

.hero {
	position: relative;
	padding: clamp(2.5rem, 6vw, 5rem) 0 clamp(3rem, 6vw, 5rem);
	background:
		radial-gradient(ellipse 70% 60% at 12% 0%, rgba(242, 206, 224, .55), transparent 60%),
		radial-gradient(ellipse 60% 50% at 90% 10%, rgba(228, 194, 178, .45), transparent 62%),
		var(--creme);
	overflow: hidden;
}

.hero::after {
	content: "";
	position: absolute;
	inset: 0;
	background-image: url("assets/pattes.svg");
	background-size: 260px;
	opacity: .28;
	pointer-events: none;
}

.hero-inner {
	position: relative;
	z-index: 1;
	display: grid;
	grid-template-columns: 1.1fr .9fr;
	gap: clamp(2rem, 5vw, 4rem);
	align-items: center;
}

.hero h1 { margin-bottom: .4em; }

.hero h1 .accent { color: var(--framboise); }

.hero-lead {
	font-size: clamp(1.05rem, .98rem + .35vw, 1.25rem);
	color: var(--encre-douce);
	max-width: 46ch;
	margin-bottom: 1.8rem;
}

.hero-visual {
	position: relative;
	border-radius: var(--radius-l);
	overflow: hidden;
	box-shadow: var(--ombre-l);
	aspect-ratio: 4 / 3;
	background: var(--rose-clair);
}

.hero-visual img { width: 100%; height: 100%; object-fit: cover; }

.hero-visual-empty {
	display: grid;
	place-items: center;
	height: 100%;
	color: var(--framboise);
	font-family: var(--police-titre);
	text-align: center;
	padding: 2rem;
}

@media (max-width: 900px) {
	.hero-inner { grid-template-columns: 1fr; }
	.hero-visual { order: -1; aspect-ratio: 16 / 10; }
}

/* Carrousel de photos de l'association */
.carrousel {
	position: relative;
	width: 100%;
	height: 100%;
}

.carrousel-vues {
	position: relative;
	width: 100%;
	height: 100%;
}

.carrousel-vue {
	position: absolute;
	inset: 0;
	margin: 0;
	opacity: 0;
	visibility: hidden;
	transition: opacity .7s ease;
}

.carrousel-vue.is-active {
	opacity: 1;
	visibility: visible;
}

.carrousel-vue img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.carrousel-legende {
	position: absolute;
	inset: auto 0 0 0;
	padding: 2.2rem 1.2rem .9rem;
	background: linear-gradient(to top, rgba(46, 42, 44, .78), transparent);
	color: #fff;
	font-size: .92rem;
	line-height: 1.4;
}

/* Sans JavaScript, seule la première photo s'affiche : les commandes seraient
   sans effet, on ne les montre donc pas. */
.carrousel-fleche,
.carrousel-puces { display: none; }

.js .carrousel-fleche {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	display: grid;
	place-items: center;
	width: 44px;
	height: 44px;
	border: 0;
	border-radius: 50%;
	background: rgba(255, 255, 255, .92);
	color: var(--encre);
	font-size: 1.7rem;
	line-height: 1;
	cursor: pointer;
	box-shadow: var(--ombre-s);
	transition: background .18s ease, transform .18s ease;
}

.js .carrousel-fleche:hover {
	background: #fff;
	transform: translateY(-50%) scale(1.06);
}

.js .carrousel-prec { left: .8rem; }
.js .carrousel-suiv { right: .8rem; }

.js .carrousel-puces {
	position: absolute;
	inset: auto 0 .9rem 0;
	display: flex;
	justify-content: center;
	gap: .4rem;
	z-index: 2;
}

.carrousel-puce {
	width: 9px;
	height: 9px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: rgba(255, 255, 255, .55);
	cursor: pointer;
	transition: background .2s ease, transform .2s ease;
}

.carrousel-puce.is-active {
	background: #fff;
	transform: scale(1.35);
}

.carrousel-puce:focus-visible,
.carrousel-fleche:focus-visible {
	outline: 3px solid #fff;
	outline-offset: 2px;
}

@media (max-width: 560px) {
	.js .carrousel-fleche { width: 38px; height: 38px; font-size: 1.4rem; }
	.js .carrousel-prec { left: .4rem; }
	.js .carrousel-suiv { right: .4rem; }
}

/* Chiffres cles */
.stats {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
	gap: 1rem;
	margin-top: clamp(2rem, 4vw, 3rem);
	position: relative;
	z-index: 1;
}

.stat {
	background: var(--blanc);
	border-radius: var(--radius);
	padding: 1.4rem 1.5rem;
	box-shadow: var(--ombre-s);
	border: 1px solid rgba(242, 206, 224, .6);
}

.stat-value {
	display: block;
	font-family: var(--police-titre);
	font-size: 2.2rem;
	font-weight: 600;
	color: var(--framboise);
	line-height: 1;
}

.stat-label {
	display: block;
	margin-top: .35rem;
	font-size: .92rem;
	color: var(--encre-douce);
}

/* ===========================================================================
   6. Cartes animal
   ======================================================================== */

.animal-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(258px, 1fr));
	gap: clamp(1rem, 2.5vw, 1.75rem);
}

.animal-card {
	position: relative;
	background: var(--blanc);
	border-radius: var(--radius);
	overflow: hidden;
	box-shadow: var(--ombre-s);
	border: 1px solid rgba(46, 42, 44, .05);
	transition: transform .22s ease, box-shadow .22s ease;
	display: flex;
	flex-direction: column;
}

.animal-card:hover { transform: translateY(-5px); box-shadow: var(--ombre); }

.animal-card a { text-decoration: none; color: inherit; display: flex; flex-direction: column; height: 100%; }

.animal-photo {
	position: relative;
	aspect-ratio: 1 / 1;
	background: var(--rose-clair);
	overflow: hidden;
}

.animal-photo img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
.animal-card:hover .animal-photo img { transform: scale(1.05); }

.animal-photo-empty {
	display: grid;
	place-items: center;
	height: 100%;
	color: var(--framboise);
	font-family: var(--police-titre);
	font-size: .95rem;
	text-align: center;
	padding: 1rem;
}

.animal-badges {
	position: absolute;
	top: .7rem;
	left: .7rem;
	display: flex;
	flex-wrap: wrap;
	gap: .35rem;
	max-width: calc(100% - 1.4rem);
}

.badge {
	display: inline-flex;
	align-items: center;
	gap: .3em;
	padding: .28em .8em;
	border-radius: var(--radius-full);
	font-family: var(--police-titre);
	font-size: .76rem;
	font-weight: 500;
	background: var(--blanc);
	color: var(--encre);
	box-shadow: var(--ombre-s);
	white-space: nowrap;
}

.badge-urgent { background: var(--alerte); color: #fff; }
.badge-coeur { background: var(--framboise); color: #fff; }
.badge-a-l-adoption { background: var(--succes-clair); color: #266b50; }
.badge-adoption-en-cours { background: #fdeccd; color: #8a5b12; }
.badge-adopte { background: var(--succes); color: #fff; }
.badge-en-soins { background: var(--alerte-clair); color: #98431a; }
.badge-parrainage { background: var(--rose); color: var(--framboise-fonce); }

.animal-body { padding: 1.05rem 1.15rem 1.3rem; display: flex; flex-direction: column; gap: .45rem; flex: 1; }

.animal-name {
	font-family: var(--police-titre);
	font-size: 1.3rem;
	font-weight: 600;
	line-height: 1.1;
	margin: 0;
}

/* Le prénom et l'accroche occupent une hauteur fixe : sans cela, la rangée
   d'étiquettes démarre à une hauteur différente d'une vignette à l'autre. */
.animal-name {
	min-height: calc(1.3rem * 1.1);
}

.animal-accroche {
	font-size: .93rem;
	line-height: 1.5;
	color: var(--encre-douce);
	margin: 0;
	min-height: calc(.93rem * 1.5 * 2);
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	line-clamp: 2;
	overflow: hidden;
}

/* La zone d'étiquettes réserve deux rangées et les cale en haut : toutes les
   vignettes d'une même grille alignent alors leurs étiquettes. */
.animal-meta {
	display: flex;
	flex-wrap: wrap;
	align-content: flex-start;
	gap: .35rem;
	margin-top: auto;
	padding-top: .7rem;
	min-height: calc(2 * 1.6rem + .35rem + .7rem);
}

.chip {
	display: inline-flex;
	align-items: center;
	height: 1.6rem;
	padding: 0 .7em;
	border-radius: var(--radius-full);
	background: var(--rose-clair);
	color: var(--framboise-fonce);
	font-size: .78rem;
	font-weight: 600;
	white-space: nowrap;
}

.chip-neutral { background: var(--gris-clair); color: var(--encre-douce); }

/* Rangée d'étiquettes libre, sans hauteur réservée : actualités, événements. */
.meta-chips {
	display: flex;
	flex-wrap: wrap;
	gap: .35rem;
	margin: 0;
}

/* ===========================================================================
   7. Catalogue et filtres
   ======================================================================== */

.catalogue-layout {
	display: grid;
	grid-template-columns: 270px 1fr;
	gap: clamp(1.5rem, 3vw, 2.5rem);
	align-items: start;
}

@media (max-width: 900px) {
	.catalogue-layout { grid-template-columns: 1fr; }
}

.filtres {
	background: var(--blanc);
	border-radius: var(--radius);
	padding: 1.3rem;
	box-shadow: var(--ombre-s);
	border: 1px solid rgba(46, 42, 44, .05);
	position: sticky;
	top: 6rem;
}

.filtres-head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: .5rem;
	margin-bottom: .8rem;
}

.filtres-head h2 { font-size: 1.15rem; margin: 0; }

.filtre-groupe { border: 0; margin: 0 0 1.1rem; padding: 0; }

.filtre-groupe legend {
	font-family: var(--police-titre);
	font-weight: 500;
	font-size: .88rem;
	text-transform: uppercase;
	letter-spacing: .05em;
	color: var(--encre-douce);
	padding: 0;
	margin-bottom: .5rem;
}

.filtre-options { display: flex; flex-wrap: wrap; gap: .4rem; }

.filtre-option { position: relative; }

.filtre-option input {
	position: absolute;
	opacity: 0;
	width: 100%;
	height: 100%;
	inset: 0;
	cursor: pointer;
	margin: 0;
}

.filtre-option span {
	display: inline-block;
	padding: .35em .85em;
	border-radius: var(--radius-full);
	border: 1.5px solid var(--gris-clair);
	font-size: .87rem;
	font-weight: 600;
	color: var(--encre-douce);
	transition: all .16s ease;
}

.filtre-option input:checked + span {
	background: var(--framboise);
	border-color: var(--framboise);
	color: #fff;
}

.filtre-option input:focus-visible + span { outline: 3px solid var(--framboise); outline-offset: 2px; }

.filtres-actions { display: grid; gap: .5rem; margin-top: 1rem; }

.filtres-toggle { display: none; }

@media (max-width: 900px) {
	.filtres { position: static; }
	.filtres-toggle {
		display: inline-flex;
		width: 100%;
		justify-content: space-between;
		margin-bottom: 1rem;
	}
	.filtres-body.is-collapsed { display: none; }
}

.resultats-head {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: 1rem;
	margin-bottom: 1.2rem;
}

.resultats-count { color: var(--encre-douce); margin: 0; }
.resultats-count strong { color: var(--encre); font-size: 1.1rem; }

.etat-vide {
	background: var(--blanc);
	border-radius: var(--radius);
	padding: clamp(2rem, 5vw, 3.5rem);
	text-align: center;
	box-shadow: var(--ombre-s);
}

.etat-vide h3 { margin-bottom: .5rem; }
.etat-vide p { color: var(--encre-douce); max-width: 46ch; margin-inline: auto; }

/* Pagination */
.pagination {
	display: flex;
	justify-content: center;
	gap: .4rem;
	margin-top: 2.5rem;
	flex-wrap: wrap;
}

.pagination .page-numbers {
	display: grid;
	place-items: center;
	min-width: 44px;
	height: 44px;
	padding: 0 .6rem;
	border-radius: var(--radius-full);
	background: var(--blanc);
	border: 1px solid var(--gris-clair);
	font-weight: 700;
	text-decoration: none;
	color: var(--encre);
}

.pagination .page-numbers:hover { border-color: var(--rose); color: var(--framboise); }
.pagination .page-numbers.current { background: var(--framboise); border-color: var(--framboise); color: #fff; }

/* ===========================================================================
   8. Fiche animal
   ======================================================================== */

.fiche {
	display: grid;
	grid-template-columns: 1.05fr .95fr;
	gap: clamp(1.5rem, 4vw, 3.5rem);
	align-items: start;
}

@media (max-width: 940px) { .fiche { grid-template-columns: 1fr; } }

.galerie-principale {
	border-radius: var(--radius-l);
	overflow: hidden;
	background: var(--rose-clair);
	aspect-ratio: 4 / 3;
	box-shadow: var(--ombre);
}

.galerie-principale img { width: 100%; height: 100%; object-fit: cover; }

.galerie-vignettes {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(72px, 1fr));
	gap: .5rem;
	margin-top: .6rem;
}

.galerie-vignette {
	border: 0;
	padding: 0;
	background: none;
	border-radius: var(--radius-s);
	overflow: hidden;
	aspect-ratio: 1;
	cursor: pointer;
	box-shadow: var(--ombre-s);
	opacity: .72;
	transition: opacity .18s ease, transform .18s ease;
}

.galerie-vignette img { width: 100%; height: 100%; object-fit: cover; }
.galerie-vignette:hover { opacity: 1; transform: translateY(-2px); }
.galerie-vignette.is-active { opacity: 1; outline: 3px solid var(--framboise); outline-offset: 1px; }

.fiche-entete { margin-bottom: 1.2rem; }
.fiche-entete h1 { margin-bottom: .2em; }

.fiche-accroche {
	font-size: 1.15rem;
	color: var(--framboise);
	font-family: var(--police-titre);
	margin-bottom: 1rem;
}

.fiche-badges { display: flex; flex-wrap: wrap; gap: .4rem; margin-bottom: 1.2rem; }

.fiche-carte {
	background: var(--blanc);
	border-radius: var(--radius);
	padding: 1.4rem;
	box-shadow: var(--ombre-s);
	border: 1px solid rgba(46, 42, 44, .05);
	margin-bottom: 1.2rem;
}

.identite-liste {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
	gap: .9rem 1.2rem;
	margin: 0;
}

.identite-liste dt {
	font-size: .78rem;
	text-transform: uppercase;
	letter-spacing: .06em;
	color: var(--encre-douce);
	font-weight: 700;
}

.identite-liste dd {
	margin: .1rem 0 0;
	font-weight: 600;
	font-size: 1.02rem;
}

.sante-liste { list-style: none; padding: 0; margin: 0; display: grid; gap: .5rem; }

.sante-liste li {
	display: flex;
	align-items: center;
	gap: .6rem;
	font-size: .97rem;
}

.sante-puce {
	display: grid;
	place-items: center;
	width: 24px;
	height: 24px;
	border-radius: 50%;
	flex-shrink: 0;
	font-size: .8rem;
	font-weight: 700;
}

.sante-oui { background: var(--succes-clair); color: #266b50; }
.sante-non { background: var(--gris-clair); color: var(--encre-douce); }

.frais-bloc {
	background: linear-gradient(135deg, var(--rose-clair), var(--beige-clair));
	border-radius: var(--radius);
	padding: 1.3rem 1.4rem;
	margin-bottom: 1.2rem;
}

.frais-montant {
	font-family: var(--police-titre);
	font-size: 2rem;
	font-weight: 600;
	color: var(--framboise-fonce);
	line-height: 1;
}

.frais-detail { font-size: .9rem; color: var(--encre-douce); margin: .5rem 0 0; }

.fiche-actions { display: grid; gap: .6rem; margin-bottom: 1.2rem; }

/* Le libelle occupe sa propre ligne : sans lui dans la rangee, les quatre
   commandes tiennent alignees sur toute la largeur de la colonne. */
.partage { display: grid; gap: .55rem; font-size: .9rem; }

.partage-titre { font-weight: 700; color: var(--encre-douce); }

.partage-actions {
	display: flex;
	align-items: center;
	gap: .5rem;
	flex-wrap: wrap;
}
.partage a,
.partage-copier,
.partage-systeme {
	display: inline-flex;
	align-items: center;
	padding: .38em .8em;
	border-radius: var(--radius-full);
	background: var(--blanc);
	border: 1px solid var(--gris-clair);
	gap: .4em;
	text-decoration: none;
	font-family: inherit;
	font-size: inherit;
	color: var(--encre);
	cursor: pointer;
	font-weight: 600;
	color: var(--encre);
}
.partage a:hover,
.partage-copier:hover,
.partage-systeme:hover { border-color: var(--rose); color: var(--framboise); }

/* Les icones heritent de la couleur du texte : elles virent au framboise avec
   lui au survol, sans regle supplementaire. */
.icone-partage {
	width: 1.05em;
	height: 1.05em;
	flex: none;
	opacity: .75;
}

.partage a:hover .icone-partage,
.partage-copier:hover .icone-partage { opacity: 1; }

/* Tant que la feuille du systeme repond, les liens nommes sont superflus.
   Si elle echoue, le script retire la classe et ils reviennent. */
.partage.a-partage-systeme .partage-actions > a { display: none; }
.partage:not(.a-partage-systeme) .partage-systeme { display: none; }

.prose { font-size: 1.03rem; }
.prose h2 { margin-top: 2rem; }
.prose h3 { margin-top: 1.6rem; }
.prose ul { padding-left: 1.3em; }
.prose li { margin-bottom: .4em; }

/* Visionneuse */
.lightbox {
	position: fixed;
	inset: 0;
	z-index: 200;
	background: rgba(46, 42, 44, .93);
	display: none;
	place-items: center;
	padding: 4vh 4vw;
}

.lightbox.is-open { display: grid; }
.lightbox img { max-width: 100%; max-height: 92vh; border-radius: var(--radius); }

.lightbox-close {
	position: absolute;
	top: 1.2rem;
	right: 1.2rem;
	width: 46px;
	height: 46px;
	border-radius: 50%;
	border: 0;
	background: #fff;
	font-size: 1.4rem;
	cursor: pointer;
	line-height: 1;
}

/* ===========================================================================
   9. Cartes et blocs de contenu
   ======================================================================== */

.card-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));
	gap: clamp(1rem, 2.5vw, 1.75rem);
}

.card-grid-2 { grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); }

.card {
	background: var(--blanc);
	border-radius: var(--radius);
	padding: clamp(1.3rem, 2.5vw, 1.9rem);
	box-shadow: var(--ombre-s);
	border: 1px solid rgba(46, 42, 44, .05);
	display: flex;
	flex-direction: column;
	gap: .6rem;
}

.card h3 { margin: 0; }
.card p { color: var(--encre-douce); margin: 0; }
.card .btn { margin-top: auto; align-self: flex-start; }

.card-icone {
	display: grid;
	place-items: center;
	width: 52px;
	height: 52px;
	border-radius: var(--radius-s);
	background: var(--rose-clair);
	font-size: 1.5rem;
	margin-bottom: .3rem;
}

.card-accent { background: linear-gradient(140deg, var(--rose-clair), var(--blanc)); }

/* Etapes numerotees */
.etapes {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	gap: clamp(1rem, 2.5vw, 1.6rem);
	counter-reset: etape;
	list-style: none;
	padding: 0;
	margin: 0;
}

.etape {
	position: relative;
	background: var(--blanc);
	border-radius: var(--radius);
	padding: 2.4rem 1.4rem 1.4rem;
	box-shadow: var(--ombre-s);
	counter-increment: etape;
}

.etape::before {
	content: counter(etape);
	position: absolute;
	top: -18px;
	left: 1.4rem;
	width: 44px;
	height: 44px;
	display: grid;
	place-items: center;
	border-radius: 50%;
	background: var(--framboise);
	color: #fff;
	font-family: var(--police-titre);
	font-size: 1.25rem;
	font-weight: 600;
	box-shadow: 0 8px 18px rgba(194, 69, 111, .3);
}

.etape h3 { font-size: 1.1rem; margin-bottom: .4rem; }
.etape p { color: var(--encre-douce); font-size: .96rem; margin: 0; }

/* Accordeon */
.accordeon { display: grid; gap: .6rem; }

.accordeon-item {
	background: var(--blanc);
	border-radius: var(--radius-s);
	border: 1px solid var(--gris-clair);
	overflow: hidden;
}

.accordeon-item summary {
	padding: 1rem 1.2rem;
	font-family: var(--police-titre);
	font-weight: 500;
	cursor: pointer;
	list-style: none;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
}

.accordeon-item summary::-webkit-details-marker { display: none; }

.accordeon-item summary::after {
	content: "+";
	font-size: 1.4rem;
	color: var(--framboise);
	flex-shrink: 0;
	line-height: 1;
}

.accordeon-item[open] summary::after { content: "\2212"; }
.accordeon-item[open] summary { background: var(--rose-pale); }

.accordeon-contenu { padding: 0 1.2rem 1.2rem; color: var(--encre-douce); font-size: .98rem; }
.accordeon-contenu p:last-child { margin-bottom: 0; }

.accordeon-ref {
	display: block;
	margin-top: .6rem;
	padding: .7rem .9rem;
	background: var(--beige-clair);
	border-radius: var(--radius-s);
	font-size: .88rem;
	color: var(--beige-fonce);
}

/* Grille tarifaire */
.tarifs {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
	gap: 1rem;
}

.tarif {
	background: var(--rose-pale);
	border-radius: var(--radius);
	padding: 1.3rem;
	text-align: center;
	border: 1px solid rgba(242, 206, 224, .8);
}

.tarif-titre {
	display: inline-block;
	background: var(--gris-clair);
	border-radius: var(--radius-full);
	padding: .3em 1.2em;
	font-family: var(--police-titre);
	font-size: 1.15rem;
	font-weight: 600;
	margin-bottom: .5rem;
}

.tarif-condition { font-size: .85rem; color: var(--encre-douce); margin: 0 0 .5rem; }

.tarif-prix {
	font-family: var(--police-titre);
	font-size: 1.9rem;
	font-weight: 600;
	color: var(--framboise-fonce);
	line-height: 1;
	margin-bottom: .6rem;
}

.tarif-inclus { list-style: none; padding: 0; margin: 0; font-size: .9rem; color: var(--encre-douce); }
.tarif-inclus li { margin-bottom: .2rem; }

.tarif-notes { margin-top: 1.4rem; font-size: .9rem; color: var(--encre-douce); }

/* Barre de progression de collecte */
.collecte {
	background: var(--blanc);
	border-radius: var(--radius-l);
	overflow: hidden;
	box-shadow: var(--ombre);
	display: grid;
	grid-template-columns: minmax(0, 380px) 1fr;
}

@media (max-width: 800px) { .collecte { grid-template-columns: 1fr; } }

/* Sans photo, la colonne de gauche laisserait un bloc vide : on la retire. */
.collecte-sans-photo { grid-template-columns: 1fr; }

.collecte-photo { background: var(--rose-clair); }
.collecte-photo img { width: 100%; height: 100%; object-fit: cover; min-height: 220px; }
.collecte-corps { padding: clamp(1.4rem, 3vw, 2.2rem); display: flex; flex-direction: column; gap: .8rem; }

.jauge {
	height: 14px;
	border-radius: var(--radius-full);
	background: var(--gris-clair);
	overflow: hidden;
}

.jauge-barre {
	display: block;
	height: 100%;
	border-radius: var(--radius-full);
	background: linear-gradient(90deg, var(--framboise), var(--beige-fonce));
	transition: width .6s ease;
}

.jauge-legende {
	display: flex;
	justify-content: space-between;
	font-size: .92rem;
	color: var(--encre-douce);
}

.jauge-legende strong { color: var(--framboise-fonce); font-size: 1.05rem; }

/* Temoignages */
.temoignage {
	background: var(--blanc);
	border-radius: var(--radius);
	padding: 1.5rem;
	box-shadow: var(--ombre-s);
	display: flex;
	flex-direction: column;
	gap: .9rem;
}

.temoignage-photo {
	width: 100%;
	aspect-ratio: 4 / 3;
	border-radius: var(--radius-s);
	overflow: hidden;
	background: var(--rose-clair);
}

.temoignage-photo img { width: 100%; height: 100%; object-fit: cover; }

.temoignage blockquote {
	margin: 0;
	font-size: 1rem;
	color: var(--encre-douce);
	font-style: italic;
	position: relative;
	padding-left: 1.1rem;
	border-left: 3px solid var(--rose);
}

.temoignage blockquote p { margin: 0 0 .7em; }
.temoignage blockquote p:last-child { margin-bottom: 0; }

/* Sans JavaScript, l'avis s'affiche en entier : la troncature n'est qu'un
   confort de lecture, jamais une perte d'information. */
.js .avis {
	display: -webkit-box;
	-webkit-line-clamp: 4;
	-webkit-box-orient: vertical;
	line-clamp: 4;
	overflow: hidden;
}

.js .avis.is-open {
	display: block;
	-webkit-line-clamp: none;
	line-clamp: none;
	overflow: visible;
}

.avis-plus {
	align-self: flex-start;
	margin-top: -.2rem;
	padding: .2rem 0;
	border: 0;
	background: none;
	font-family: var(--police-titre);
	font-weight: 500;
	font-size: .9rem;
	color: var(--framboise);
	cursor: pointer;
	text-decoration: underline;
	text-underline-offset: 3px;
}

.avis-plus:hover { color: var(--framboise-fonce); }

/* Les avis n'ont pas tous la même longueur : l'identité de l'animal se cale
   en bas de la vignette pour rester alignée d'une carte à l'autre. */
.temoignage-identite {
	margin-top: auto;
	padding-top: .2rem;
}

.temoignage-nom { font-family: var(--police-titre); font-weight: 600; font-size: 1.08rem; }
.temoignage-date { font-size: .85rem; color: var(--encre-douce); }

/* Documents */
.doc-liste { display: grid; gap: .7rem; list-style: none; padding: 0; margin: 0; }

.doc-item {
	display: flex;
	align-items: center;
	gap: 1rem;
	background: var(--blanc);
	border: 1px solid var(--gris-clair);
	border-radius: var(--radius-s);
	padding: 1rem 1.2rem;
	transition: border-color .18s ease, transform .18s ease;
}

.doc-item:hover { border-color: var(--rose); transform: translateX(3px); }

.doc-icone {
	display: grid;
	place-items: center;
	width: 42px;
	height: 42px;
	border-radius: var(--radius-s);
	background: var(--rose-clair);
	color: var(--framboise);
	font-size: .72rem;
	font-weight: 800;
	flex-shrink: 0;
}

.doc-nom { font-weight: 700; text-decoration: none; color: var(--encre); }
.doc-nom:hover { color: var(--framboise); }
.doc-meta { font-size: .87rem; color: var(--encre-douce); margin: .15rem 0 0; }

/* Bloc soutien */
.soutien-liste { display: grid; gap: 1rem; }

.soutien-item {
	display: grid;
	grid-template-columns: auto 1fr auto;
	gap: 1rem;
	align-items: center;
	background: var(--blanc);
	border-radius: var(--radius);
	padding: 1.2rem 1.4rem;
	box-shadow: var(--ombre-s);
}

@media (max-width: 640px) {
	.soutien-item { grid-template-columns: 1fr; text-align: left; }
	.soutien-item .btn { justify-self: start; }
}

.soutien-emoji { font-size: 1.8rem; line-height: 1; }
.soutien-item h3 { margin: 0 0 .2rem; font-size: 1.12rem; }
.soutien-item p { margin: 0; color: var(--encre-douce); font-size: .95rem; }

.iban-bloc {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: .8rem;
	background: var(--beige-clair);
	border-radius: var(--radius-s);
	padding: .9rem 1.1rem;
	margin-top: .8rem;
}

.iban-valeur {
	font-family: ui-monospace, "SFMono-Regular", Menlo, monospace;
	font-size: 1rem;
	letter-spacing: .04em;
	word-break: break-all;
}

/* Retour de copie : la pastille se dessine, le libelle monte en place. Sans ce
   mouvement, le texte apparaissait d'un coup et passait inapercu. */
.copie-ok {
	display: inline-flex;
	align-items: center;
	gap: .4rem;
	color: var(--succes);
	font-weight: 700;
	font-size: .9rem;
	animation: copie-entree .34s cubic-bezier(.2, .8, .3, 1.2) both;
}

.copie-ok::before {
	content: "\2713";
	display: grid;
	place-items: center;
	width: 1.25em;
	height: 1.25em;
	border-radius: 50%;
	background: var(--succes);
	color: #fff;
	font-size: .8em;
	line-height: 1;
	animation: copie-pastille .42s .05s cubic-bezier(.2, .8, .3, 1.4) both;
}

.copie-ok.est-echec { color: var(--framboise-fonce); }
.copie-ok.est-echec::before { content: "\0021"; background: var(--framboise); }

@keyframes copie-entree {
	from { opacity: 0; transform: translateY(.45rem); }
	to   { opacity: 1; transform: none; }
}

@keyframes copie-pastille {
	0%   { transform: scale(0); }
	65%  { transform: scale(1.3); }
	100% { transform: scale(1); }
}

/* Le bouton accuse reception d'une breve pression. */
.btn.est-copie { animation: copie-pression .45s ease; }

@keyframes copie-pression {
	0%   { transform: none; }
	35%  { transform: scale(.93); }
	100% { transform: none; }
}

/* Paliers Teaming */
.paliers { display: grid; gap: .6rem; list-style: none; padding: 0; margin: 1rem 0 0; }

.palier {
	display: grid;
	grid-template-columns: 96px 1fr;
	gap: 1rem;
	align-items: center;
	background: var(--rose-pale);
	border-radius: var(--radius-s);
	padding: .8rem 1rem;
}

.palier-nombre { font-family: var(--police-titre); font-weight: 600; color: var(--framboise); }

/* Bureau */
.bureau-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 1.4rem; }

.membre {
	background: var(--blanc);
	border-radius: var(--radius);
	padding: 1.6rem;
	box-shadow: var(--ombre-s);
}

.membre-nom { font-family: var(--police-titre); font-size: 1.3rem; font-weight: 600; margin: 0; }
.membre-role { color: var(--framboise); font-weight: 700; font-size: .92rem; margin: 0 0 .8rem; }
.membre blockquote { margin: 0; font-style: italic; color: var(--encre-douce); border-left: 3px solid var(--rose); padding-left: 1rem; }

/* Bandeau final */
.band-cta {
	background: linear-gradient(135deg, var(--rose) 0%, var(--beige) 100%);
	padding: clamp(2.5rem, 5vw, 4rem) 0;
}

.band-cta-inner {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 1.5rem;
}

.band-cta h2 { margin-bottom: .3em; color: var(--framboise-fonce); }
.band-cta p { margin: 0; color: var(--encre); max-width: 48ch; }
.band-cta-actions { display: flex; flex-wrap: wrap; gap: .8rem; }
.band-cta .btn-ghost { border-color: var(--framboise-fonce); color: var(--framboise-fonce); }
.band-cta .btn-ghost:hover { background: rgba(255, 255, 255, .5); }

/* ===========================================================================
   10. Pied de page
   ======================================================================== */

.site-footer {
	background: var(--encre);
	color: rgba(255, 255, 255, .78);
	padding: clamp(2.5rem, 5vw, 4rem) 0 1.5rem;
	font-size: .95rem;
}

.footer-grid {
	display: grid;
	grid-template-columns: 1.4fr 1fr 1fr 1.1fr;
	gap: clamp(1.5rem, 3vw, 2.5rem);
}

@media (max-width: 880px) { .footer-grid { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); } }

.footer-col h3 {
	color: #fff;
	font-size: 1rem;
	margin-bottom: .8rem;
}

.footer-col ul { list-style: none; padding: 0; margin: 0; display: grid; gap: .45rem; }
.footer-col a { color: rgba(255, 255, 255, .78); text-decoration: none; }
.footer-col a:hover { color: var(--rose); text-decoration: underline; }

.footer-logo {
	width: 130px;
	margin-bottom: 1rem;
	background: rgba(255, 255, 255, .95);
	border-radius: var(--radius-s);
	padding: .5rem;
}

.footer-brand p { color: rgba(255, 255, 255, .68); }

.social-list { display: flex !important; flex-direction: row; gap: .5rem !important; flex-wrap: wrap; margin-top: 1rem !important; }

.social-list a {
	display: inline-block;
	padding: .35em .95em;
	border-radius: var(--radius-full);
	background: rgba(255, 255, 255, .12);
	font-weight: 600;
	font-size: .88rem;
}

.social-list a:hover { background: var(--framboise); color: #fff; text-decoration: none; }

.footer-legal-ids { margin-top: 1rem; font-size: .82rem; color: rgba(255, 255, 255, .5); }

.footer-bottom {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: 1rem;
	margin-top: 2.5rem;
	padding-top: 1.2rem;
	border-top: 1px solid rgba(255, 255, 255, .12);
	font-size: .85rem;
	color: rgba(255, 255, 255, .5);
}

.footer-bottom p { margin: 0; }
.footer-bottom a { color: rgba(255, 255, 255, .5); }

/* Bouton flottant mobile */
.don-flottant {
	position: fixed;
	right: 1rem;
	bottom: 1rem;
	z-index: 55;
	display: none;
	align-items: center;
	gap: .4rem;
	padding: .8em 1.4em;
	border-radius: var(--radius-full);
	background: var(--framboise);
	color: #fff;
	font-family: var(--police-titre);
	font-weight: 500;
	text-decoration: none;
	box-shadow: 0 12px 28px rgba(155, 47, 83, .4);
}

@media (max-width: 1200px) {
	.don-flottant { display: inline-flex; }
	body.nav-open .don-flottant { display: none; }
}

/* ===========================================================================
   11. Formulaires
   ======================================================================== */

.lpn-form-wrap {
	background: var(--blanc);
	border-radius: var(--radius-l);
	padding: clamp(1.4rem, 3.5vw, 2.6rem);
	box-shadow: var(--ombre);
	border: 1px solid rgba(46, 42, 44, .05);
}

.lpn-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.lpn-alert {
	border-radius: var(--radius);
	padding: 1.2rem 1.4rem;
	margin-bottom: 1.4rem;
}

.lpn-alert p { margin: 0 0 .5rem; }
.lpn-alert p:last-child { margin-bottom: 0; }
.lpn-alert-success { background: var(--succes-clair); color: #235c44; }
.lpn-alert-error { background: #fbe4de; color: #98341c; }
.lpn-alert-note { font-size: .9rem; opacity: .85; }

.lpn-steps-nav {
	display: flex;
	flex-wrap: wrap;
	gap: .4rem;
	list-style: none;
	padding: 0;
	margin: 0 0 1rem;
	counter-reset: none;
}

.lpn-step-dot {
	display: flex;
	align-items: center;
	gap: .45rem;
	padding: .35em .9em;
	border-radius: var(--radius-full);
	background: var(--gris-clair);
	font-size: .85rem;
	font-weight: 600;
	color: var(--encre-douce);
	transition: background .2s ease, color .2s ease;
}

.lpn-step-dot.is-active { background: var(--framboise); color: #fff; }
.lpn-step-dot.is-done { background: var(--succes-clair); color: #266b50; }

.lpn-step-num {
	display: grid;
	place-items: center;
	width: 20px;
	height: 20px;
	border-radius: 50%;
	background: rgba(255, 255, 255, .55);
	font-size: .74rem;
	font-weight: 800;
}

.lpn-step-dot.is-active .lpn-step-num { background: rgba(255, 255, 255, .3); }

@media (max-width: 700px) {
	.lpn-step-label { display: none; }
	.lpn-step-dot { padding: .4em; }
}

.lpn-progress {
	height: 6px;
	border-radius: var(--radius-full);
	background: var(--gris-clair);
	overflow: hidden;
	margin-bottom: 1.8rem;
}

.lpn-progress-bar {
	display: block;
	height: 100%;
	background: var(--framboise);
	border-radius: var(--radius-full);
	transition: width .3s ease;
}

.lpn-step {
	border: 0;
	padding: 0;
	margin: 0 0 1.5rem;
}

.lpn-form-steps .lpn-step { display: none; }
.lpn-form-steps .lpn-step.is-active { display: block; }

/* Sans JavaScript, toutes les etapes restent visibles. */
.no-js .lpn-form-steps .lpn-step { display: block; }
.no-js .lpn-steps-nav,
.no-js .lpn-progress,
.no-js .lpn-next,
.no-js .lpn-prev { display: none; }
.no-js .lpn-submit { display: inline-flex !important; }

.lpn-step-title {
	font-family: var(--police-titre);
	font-size: 1.4rem;
	font-weight: 600;
	padding: 0;
	margin-bottom: 1.2rem;
	color: var(--framboise-fonce);
}

.lpn-field { margin-bottom: 1.4rem; }

.lpn-label {
	display: block;
	font-weight: 700;
	font-size: 1rem;
	margin-bottom: .4rem;
	padding: 0;
}

.lpn-req { color: var(--framboise); }

.lpn-help {
	font-size: .88rem;
	color: var(--encre-douce);
	margin: -.15rem 0 .5rem;
}

.lpn-field-note {
	background: var(--rose-pale);
	border-left: 3px solid var(--rose);
	padding: .8rem 1rem;
	border-radius: 0 var(--radius-s) var(--radius-s) 0;
	font-size: .93rem;
	color: var(--encre-douce);
	margin-bottom: 1.2rem;
}

.lpn-group { border: 0; padding: 0; margin: 0; }

.lpn-form input[type="text"],
.lpn-form input[type="email"],
.lpn-form input[type="tel"],
.lpn-form input[type="date"],
.lpn-form input[type="number"],
.lpn-form input[type="url"],
.lpn-form select,
.lpn-form textarea {
	width: 100%;
	padding: .75rem .95rem;
	border: 1.5px solid var(--gris-clair);
	border-radius: var(--radius-s);
	background: var(--blanc);
	font-family: inherit;
	font-size: 1rem;
	color: var(--encre);
	transition: border-color .16s ease, box-shadow .16s ease;
}

.lpn-form textarea { resize: vertical; min-height: 100px; }

.lpn-form input:focus,
.lpn-form select:focus,
.lpn-form textarea:focus {
	outline: none;
	border-color: var(--framboise);
	box-shadow: 0 0 0 3px rgba(194, 69, 111, .14);
}

.lpn-options { display: flex; flex-wrap: wrap; gap: .5rem; }

.lpn-option {
	position: relative;
	display: inline-flex;
}

.lpn-option input {
	position: absolute;
	inset: 0;
	opacity: 0;
	cursor: pointer;
	margin: 0;
	width: 100%;
	height: 100%;
}

.lpn-option span {
	display: inline-block;
	padding: .55em 1.1em;
	border-radius: var(--radius-full);
	border: 1.5px solid var(--gris-clair);
	background: var(--blanc);
	font-weight: 600;
	font-size: .95rem;
	transition: all .16s ease;
}

.lpn-option input:checked + span {
	background: var(--framboise);
	border-color: var(--framboise);
	color: #fff;
}

.lpn-option input:focus-visible + span { outline: 3px solid var(--framboise); outline-offset: 2px; }

.lpn-consent {
	display: flex;
	align-items: flex-start;
	gap: .7rem;
	background: var(--rose-pale);
	padding: 1rem 1.2rem;
	border-radius: var(--radius-s);
	font-size: .92rem;
	color: var(--encre-douce);
	cursor: pointer;
}

.lpn-consent input { margin-top: .25rem; width: 18px; height: 18px; flex-shrink: 0; accent-color: var(--framboise); }

.lpn-field.has-error input,
.lpn-field.has-error select,
.lpn-field.has-error textarea { border-color: #c0392b; }

.lpn-error {
	color: #b03020;
	font-size: .88rem;
	font-weight: 600;
	margin: .4rem 0 0;
}

.lpn-step .cf-turnstile {
	margin-top: 1.6rem;
}

.lpn-form-actions {
	display: flex;
	flex-wrap: wrap;
	gap: .7rem;
	align-items: center;
	margin-top: 1.6rem;
	padding-top: 1.4rem;
	border-top: 1px solid var(--gris-clair);
}

.lpn-form-actions .lpn-next,
.lpn-form-actions .lpn-submit { margin-left: auto; }

.lpn-pdf-lien {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: .8rem;
	background: var(--beige-clair);
	border-radius: var(--radius);
	padding: 1rem 1.3rem;
	margin-bottom: 1.5rem;
	font-size: .95rem;
}

.lpn-brouillon {
	display: none;
	align-items: center;
	gap: .5rem;
	font-size: .87rem;
	color: var(--succes);
	font-weight: 600;
}

.lpn-brouillon.is-visible { display: inline-flex; }

/* ===========================================================================
   12. Utilitaires et animations
   ======================================================================== */

.reveal {
	opacity: 0;
	transform: translateY(18px);
	transition: opacity .6s ease, transform .6s ease;
}

.reveal.is-visible { opacity: 1; transform: none; }

.no-js .reveal { opacity: 1; transform: none; }

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

.text-center { text-align: center; }
.mt-2 { margin-top: 2rem; }
.mb-2 { margin-bottom: 2rem; }

.fil-ariane {
	font-size: .87rem;
	color: var(--encre-douce);
	padding: 1rem 0 0;
}

.fil-ariane a { color: var(--encre-douce); }
.fil-ariane a:hover { color: var(--framboise); }
.fil-ariane span { margin: 0 .4rem; opacity: .5; }

.page-entete {
	padding: clamp(2rem, 4vw, 3.2rem) 0 clamp(1.5rem, 3vw, 2.4rem);
	background:
		radial-gradient(ellipse 60% 80% at 8% 0%, rgba(242, 206, 224, .5), transparent 62%),
		var(--creme);
}

.page-entete h1 { margin-bottom: .3em; }
.page-entete .lead { max-width: 58ch; margin: 0; }

@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after {
		animation-duration: .01ms !important;
		transition-duration: .01ms !important;
		scroll-behavior: auto !important;
	}
	.reveal { opacity: 1; transform: none; }
}

/* ===========================================================================
   13. Impression
   ======================================================================== */

@media print {
	.site-header, .site-footer, .band-cta, .don-flottant, .filtres, .fiche-actions, .partage { display: none !important; }
	body { background: #fff; font-size: 12pt; }
	.shell { width: 100%; }
}

/* ===========================================================================
   14. Compléments
   ======================================================================== */

.site-main {
	display: block;
	min-height: 40vh;
}

.fiche-galerie,
.fiche-infos {
	min-width: 0;
}

.fiche-galerie {
	position: sticky;
	top: 6rem;
}

@media (max-width: 940px) {
	.fiche-galerie { position: static; }
}

.filtres-reset {
	font-size: .85rem;
	font-weight: 700;
	color: var(--framboise);
	text-decoration: underline;
	white-space: nowrap;
}

.footer-contact {
	word-break: break-word;
}

.nav-toggle-text {
	font-size: .92rem;
}

/* Le menu généré par WordPress porte la classe « menu » : mêmes règles que
   le menu de secours, pour qu'aucune des deux variantes ne dérive. */
.site-nav ul.menu {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-wrap: nowrap;
	gap: .1rem;
	list-style: none;
	margin: 0;
	padding: 0;
}

@media (max-width: 1200px) {
	.site-nav ul.menu {
		flex-direction: column;
		align-items: stretch;
		flex-wrap: wrap;
	}
}

/* ===========================================================================
   15. Adoptions réussies, en bas du catalogue
   ======================================================================== */

.reussites-entete {
	display: flex;
	flex-wrap: wrap;
	align-items: end;
	justify-content: space-between;
	gap: 1.2rem;
	margin-bottom: clamp(1.4rem, 3vw, 2.2rem);
}

.reussites-entete h2 { margin-bottom: .3em; }
.reussites-entete p { margin: 0; color: var(--encre-douce); max-width: 52ch; }

.reussites {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
	gap: clamp(.8rem, 2vw, 1.4rem);
	list-style: none;
	margin: 0;
	padding: 0;
}

.reussite a {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: .35rem;
	text-align: center;
	text-decoration: none;
	color: inherit;
}

.reussite-photo {
	position: relative;
	display: block;
	width: 100%;
	aspect-ratio: 1;
	border-radius: 50%;
	overflow: hidden;
	background: var(--rose-clair);
	box-shadow: var(--ombre-s);
	border: 3px solid var(--blanc);
	transition: transform .22s ease, box-shadow .22s ease;
}

.reussite-photo img { width: 100%; height: 100%; object-fit: cover; }

.reussite a:hover .reussite-photo {
	transform: translateY(-4px);
	box-shadow: var(--ombre);
}

.reussite-coeur {
	position: absolute;
	right: 6%;
	bottom: 6%;
	display: grid;
	place-items: center;
	width: 28px;
	height: 28px;
	border-radius: 50%;
	background: var(--succes);
	color: #fff;
	font-size: .85rem;
	line-height: 1;
}

.reussite-nom {
	font-family: var(--police-titre);
	font-weight: 600;
	font-size: 1.02rem;
	margin-top: .2rem;
}

.reussite-date {
	font-size: .82rem;
	color: var(--encre-douce);
}

/* Signature du concepteur, discrète mais présente sur chaque page. */
.footer-signature a {
	color: rgba(255, 255, 255, .72);
	text-decoration: none;
	border-bottom: 1px solid rgba(242, 206, 224, .4);
	transition: color .18s ease, border-color .18s ease;
}

.footer-signature a:hover {
	color: var(--rose);
	border-bottom-color: var(--rose);
}

/* Pastille du rechargement automatique — visible des seuls administrateurs,
   le temps de confirmer que la nouvelle feuille est bien prise en compte. */
.lpn-rechargement-avis {
	position: fixed;
	left: 1rem;
	bottom: 1rem;
	z-index: 200;
	background: var(--encre);
	color: var(--blanc);
	font-size: .82rem;
	font-weight: 600;
	padding: .5em 1em;
	border-radius: var(--radius-full);
	box-shadow: var(--ombre-l);
	opacity: 0;
	transform: translateY(.5rem);
	transition: opacity .2s ease, transform .2s ease;
	pointer-events: none;
}

.lpn-rechargement-avis.est-visible { opacity: 1; transform: none; }

/* L'adresse du siege ne figure plus qu'ici : l'association craint des depots
   devant sa porte, et n'a pas a l'afficher en plein corps de page. */
.footer-adresse {
	font-size: .88rem;
	line-height: 1.6;
	color: var(--encre-douce);
	margin: .6rem 0 0;
}

/* Les trois niveaux d'adhesion. L'association leur a donne des noms, ils
   meritent mieux qu'une ligne de texte. */
.cotisations {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
	gap: .9rem;
	list-style: none;
	padding: 0;
	margin: 0 0 2rem;
}

.cotisation {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: .15rem;
	background: var(--blanc);
	border: 1px solid var(--ligne);
	border-radius: var(--radius-m, 16px);
	padding: 1.2rem 1rem;
	box-shadow: var(--ombre-s);
	margin: 0;
}

.cotisation-nom {
	font-family: var(--police-titre);
	font-weight: 600;
	font-size: 1.05rem;
	color: var(--framboise-fonce);
}

.cotisation-prix {
	font-family: var(--police-titre);
	font-weight: 600;
	font-size: 1.9rem;
	line-height: 1.1;
	color: var(--encre);
}

.cotisation-mention {
	font-size: .84rem;
	color: var(--encre-douce);
}

/* Un numero d'identification se lit chiffre par chiffre : le chasse fixe evite
   de confondre un 1 et un l. Quinze chiffres tiennent tout juste dans une
   colonne de 140 px, d'ou le passage en pleine largeur : coupe en deux, un
   numero devient illisible et impossible a recopier. */
/* Le numero I-CAD est une mention obligatoire, pas une caracteristique de
   l'animal : place dans la grille, il occupait une ligne entiere et laissait
   l'autre moitie vide. Il devient une note de bas de carte, separee par un
   filet, ou sa longueur ne gene personne. */
.identite-legal {
	margin: 1rem 0 0;
	padding-top: .8rem;
	border-top: 1px solid var(--ligne-douce);
	font-size: .78rem;
	text-transform: uppercase;
	letter-spacing: .06em;
	color: var(--encre-douce);
	font-weight: 700;
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: .1rem .6rem;
}

.identite-puce {
	font-family: ui-monospace, "SFMono-Regular", Menlo, monospace;
	font-size: .95rem;
	font-weight: 600;
	letter-spacing: .01em;
	text-transform: none;
	color: var(--encre);
	white-space: nowrap;
	overflow-wrap: normal;
	word-break: normal;
}