/*
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;
	/* « clip » plutot que « hidden » : les deux empechent le debordement
	   horizontal, mais « hidden » fait du body un conteneur de defilement, et
	   position: sticky cesse alors de fonctionner pour tout ce qu'il contient.
	   C'est ce qui empechait le panneau de la boutique de rester en vue. */
	overflow-x: clip;
}

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;
}

/* ============================================================
   Boutique solidaire
   ============================================================ */

/* Les photos viennent d'HelloAsso en 300x300 : des colonnes plus etroites
   que pour les animaux evitent de les agrandir au-dela de leur definition. */
.card-grid-produits {
	grid-template-columns: repeat(auto-fill, minmax(215px, 1fr));
	gap: clamp(1rem, 2vw, 1.5rem);
	/* Hauteur commune par rangee : laissees a leur taille naturelle, les
	   cartes formaient un escalier, un titre sur deux lignes suffisant a
	   decaler sa voisine. Le blanc en pied d'une carte breve coute moins
	   que cette irregularite. */
	align-items: stretch;
}

/* Catalogue a gauche, panneau de commande a droite. La colonne laterale
   s'arrete avec le catalogue : le panneau collant n'a donc jamais l'occasion
   de descendre dans le pied de page. */
.boutique-colonnes {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 280px;
	gap: clamp(1.5rem, 3vw, 2.6rem);
	/* Pas d'align-items: start ici. La colonne laterale doit s'etirer sur
	   toute la hauteur du catalogue : c'est cette hauteur qui donne au
	   panneau collant la course dont il a besoin. Bornee a son contenu, la
	   colonne ne lui laissait rien a parcourir, et il defilait avec le reste. */
}

.boutique-groupe + .boutique-groupe { margin-top: clamp(1.8rem, 4vw, 2.8rem); }

.boutique-panneau {
	position: sticky;
	/* L'en-tete du site est lui-meme collant : on se pose juste dessous. */
	top: calc(56px + 1.2rem);
	text-align: center;
	background: linear-gradient(170deg, var(--rose-clair) 0%, var(--blanc) 78%);
	border: 1px solid var(--rose);
	border-radius: var(--radius);
	padding: 1.5rem 1.35rem 1.4rem;
	box-shadow: 0 10px 30px rgba(194, 69, 111, .10);
}

/* La pastille donne un point d'entree au regard : sans elle, le panneau
   n'etait qu'un paragraphe encadre de plus. */
.boutique-panneau-icone {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.9rem;
	height: 2.9rem;
	margin-bottom: .75rem;
	border-radius: 50%;
	background: var(--framboise);
	color: var(--blanc);
	box-shadow: 0 6px 16px rgba(194, 69, 111, .32);
}

.boutique-panneau-icone .ico-panier { width: 17px; height: 17px; }

.boutique-panneau h2 {
	font-size: 1.18rem;
	margin: 0 0 .45rem;
	color: var(--encre);
}

.boutique-panneau-texte {
	font-size: .87rem;
	line-height: 1.55;
	color: var(--encre-douce);
	margin: 0 0 1.1rem;
}

.boutique-panneau strong { color: var(--framboise); }

/* Trois lignes de reassurance, alignees a gauche : une liste se lit mal
   centree, meme dans un bloc qui l'est. */
.boutique-garanties {
	list-style: none;
	margin: 0 0 1.25rem;
	padding: 1rem 0 0;
	border-top: 1px solid rgba(194, 69, 111, .18);
	text-align: left;
	display: grid;
	gap: .5rem;
}

.boutique-garanties li {
	position: relative;
	padding-left: 1.5rem;
	font-size: .8rem;
	line-height: 1.4;
	color: var(--encre-douce);
}

.boutique-garanties li::before {
	content: "";
	position: absolute;
	left: 0;
	top: .18em;
	width: .95em;
	height: .95em;
	border-radius: 50%;
	background: var(--succes-clair);
	/* La coche est tracee au trait plutot qu'ecrite : un caractere « ✓ »
	   change de dessin d'une police a l'autre, et parfois de largeur. */
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M3 6.2l2 2 4-4.4' fill='none' stroke='%2335785d' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: center;
	background-size: .8em;
}

.boutique-panneau .btn {
	width: 100%;
	justify-content: center;
	box-shadow: 0 8px 20px rgba(194, 69, 111, .28);
}

.boutique-panneau .btn .ico-panier { width: 16px; height: 16px; margin-right: .5rem; vertical-align: -.18em; }

/* Sous 900 px la colonne laterale n'a plus la place : le panneau passe en
   tete, ou il dit d'emblee ou se fera la commande, et cesse d'etre collant. */
@media (max-width: 900px) {
	.boutique-colonnes { grid-template-columns: 1fr; }
	.boutique-aside { order: -1; }
	.boutique-panneau { position: static; }
	.boutique-panneau .btn { width: auto; }
}

.boutique-categorie {
	font-size: clamp(1.1rem, 2vw, 1.35rem);
	margin-bottom: 1.2rem;
	padding-bottom: .55rem;
	border-bottom: 1px solid var(--gris-clair);
	color: var(--encre);
}

.card.produit {
	padding: 0;
	overflow: hidden;
	gap: 0;
	transition: transform .22s ease, box-shadow .22s ease;
}

@media (hover: hover) {
	.card.produit:hover {
		transform: translateY(-3px);
		box-shadow: 0 12px 28px rgba(46, 42, 44, .12);
	}
	.card.produit:hover .produit-photo img { transform: scale(1.04); }
}

.produit-photo {
	position: relative;
	aspect-ratio: 1;
	background: var(--rose-pale);
	overflow: hidden;
}

.produit-photo img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform .35s ease;
}

/* Le prix est pose sur la photo, et non a la suite du texte. Sous une
   description de longueur libre, il retombait a une hauteur differente dans
   chaque carte : aucune regle d'alignement ne pouvait y remedier tant qu'il
   dependait du nombre de lignes au-dessus. Ici sa position ne depend plus de
   rien, et la grille se lit d'un coup d'oeil. */
.produit-etiquette {
	position: absolute;
	right: .55rem;
	bottom: .55rem;
	background: var(--blanc);
	color: var(--framboise);
	font-weight: 700;
	font-size: .95rem;
	line-height: 1;
	padding: .42em .7em;
	border-radius: var(--radius-s);
	box-shadow: 0 2px 10px rgba(46, 42, 44, .18);
}

.produit-etiquette-consulter,
.produit-etiquette-epuise {
	font-size: .78rem;
	font-weight: 600;
}

.produit-etiquette-epuise {
	background: var(--encre);
	color: var(--blanc);
	left: .55rem;
	right: auto;
	top: .55rem;
	bottom: auto;
}

.produit-corps {
	padding: .85rem 1rem 1.05rem;
	display: flex;
	flex-direction: column;
	flex: 1;
}

/* Deux lignes reservees : « Porte-cle Les Pas Tout Nettes » en occupe deux
   quand ses voisines n'en prennent qu'une, et sans cette reserve les
   descriptions demarraient a des hauteurs differentes dans une meme rangee. */
.produit-titre {
	font-size: .97rem;
	line-height: 1.3;
	margin: 0 0 .3rem;
	min-height: 2.6em;
	color: var(--encre);
}

.produit-desc {
	margin: 0;
	font-size: .82rem;
	line-height: 1.45;
	color: var(--encre-douce);
}

/* Ce qui reste a choisir au moment de la commande. Detache du reste par un
   filet : c'est une consigne, pas une description. */
.produit-options {
	margin: .55rem 0 0;
	/* Toujours en pied de carte : c'est la derniere chose a lire. */
	margin-top: auto;
	padding-top: .5rem;
	border-top: 1px dashed var(--gris-clair);
	font-size: .76rem;
	line-height: 1.35;
	color: var(--beige-fonce);
}

/* Un article epuise reste visible : il dit ce que l'association propose
   d'habitude, et reviendra. Mais il ne doit pas attirer l'oeil.
   Le noir et blanc franc se lit mieux qu'un gris delave : a 40 %
   d'opacite, l'article n'etait plus reconnaissable, et une vignette qu'on
   ne distingue plus ne renseigne personne. */
.produit-epuise .produit-photo img { opacity: .7; filter: grayscale(1); }
.produit-epuise .produit-titre,
.produit-epuise .produit-desc { color: var(--encre-douce); }
.card.produit-epuise:hover { transform: none; box-shadow: var(--ombre-s); }
.produit-epuise:hover .produit-photo img { transform: none; }

/* Le prix d'un article epuise : toujours la, mais barre. */
.produit-etiquette-barree {
	color: var(--encre-douce);
	text-decoration: line-through;
	text-decoration-thickness: 1.5px;
	box-shadow: 0 2px 8px rgba(46, 42, 44, .12);
}

.boutique-appel {
	background: var(--rose-clair);
	border-radius: var(--radius);
	padding: clamp(1.6rem, 4vw, 2.6rem);
	text-align: center;
}

.boutique-appel h2 { margin-bottom: .6rem; }

.boutique-appel p {
	max-width: 46rem;
	margin-inline: auto;
}

.boutique-note {
	margin-top: .9rem;
	font-size: .86rem;
	color: var(--encre-douce);
}

.btn-large {
	font-size: 1.05rem;
	padding: .9em 2.2em;
}

@media (max-width: 480px) {
	.card-grid-produits { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
	.produit-corps { padding: .7rem .8rem .9rem; }
	.produit-titre { font-size: .9rem; }
}


/* Rappel de bas de catalogue, sur petit ecran seulement : c'est la que le
   panneau, passe en tete, se trouve hors de vue. */
.boutique-rappel { display: none; }

@media (max-width: 900px) {
	.boutique-rappel {
		display: block;
		margin: 2rem 0 0;
		text-align: center;
	}
}

/* Images trop eloignees du cadre : montrees entieres plutot que rognees.
   Une banniere ou une affiche versee dans une vignette carree n'en laisserait
   voir qu'une bande centrale agrandie, illisible. Elle occupe ici moins de
   place, mais on la lit — ce qui est tout l'objet d'une illustration.

   « scale-down » et non « contain » : contain remplit le cadre au mieux, quitte
   a agrandir. Une capture de 600 px de large etiree sur mille devient floue —
   on aurait remplace un recadrage brutal par un grossissement sale. scale-down
   reduit si besoin et ne grossit jamais au-dela de la definition d'origine. */
.photo-entiere img {
	object-fit: scale-down;
	background: var(--rose-pale);
	padding: .5rem;
}

/* Le leger zoom au survol supposait un debordement a absorber : sur une image
   deja entiere, il ne ferait que la rogner. */
.photo-entiere img { transform: none !important; }

/* Une image seule sur une fiche n'a pas a tenir dans un 4/3 : le cadre prend
   sa hauteur. Dans une grille au contraire, le format se conserve — les
   vignettes d'une meme rangee doivent s'aligner, et un peu de fond autour
   coute moins qu'un escalier. */
.galerie-principale.photo-entiere {
	aspect-ratio: auto;
	background: var(--rose-pale);
}

.galerie-principale.photo-entiere img {
	/* Le retrait doit depasser 0,3 fois le rayon du cadre, sinon l'arrondi
	   mord les angles de l'image : un rayon de 32 px en exige 9,4, et les 8 px
	   du reglage general n'y suffisaient pas. Deux pixels rognes dans chaque
	   coin — assez peu pour qu'on hesite a le nommer, assez pour qu'on le voie
	   sur une capture d'ecran aux bords nets. */
	padding: .85rem;
	/* Hors du cadre impose, l'image reprend ses dimensions propres et se
	   centre. Elle ne s'etire pas pour remplir la colonne. */
	width: auto;
	max-width: 100%;
	height: auto;
	max-height: 60vh;
	margin-inline: auto;
}