/*
 * PETFLOW CONNECT · la feuille de la vitrine, en thème CLAIR.
 *
 * ELLE REPREND LE DESSIN DE LA VITRINE PETFLOW et le pose sur blanc : photo en
 * 4/5, nom et race écrits SUR la photo dans un dégradé, capsule d'attente, et
 * au survol la photo qui zoome dans un cadre qui, lui, ne bouge pas.
 *
 * POURQUOI LE CADRE NE BOUGE PAS. La vitrine a écrit ce bloc trois fois. Une
 * carte qui monte de 3 px avec une ombre qui s'étire déborde sur sa voisine, et
 * la voisine, plus tard dans le DOM, la coupe d'un bord droit. Il ne reste donc
 * que le zoom de la photo, contenu dans un rectangle qui ne bouge jamais.
 *
 * ELLE N'IMPOSE TOUJOURS NI POLICE NI COULEUR DE TEXTE · une association
 * installe ça pour que ses animaux ressemblent à SON site. Ce qui est réglé ici
 * est ce qu'un thème ne peut pas deviner : la géométrie, le cadrage des photos,
 * et le contraste du texte posé SUR une image, qui ne peut pas hériter.
 */

/* `box-sizing` EST DÉCLARÉ ICI ET PAS SUPPOSÉ. La plupart des thèmes le posent
   globalement, et c'est exactement pour ça qu'on ne peut pas s'y fier : le jour
   où l'extension tombe sur celui qui ne le fait pas, chaque bordure et chaque
   marge intérieure s'AJOUTENT à la largeur, la grille déborde, et le défaut ne
   se voit que chez cette association là. Mesuré sur la maquette : la coque
   dépassait sa carte de deux pixels, ce qui écornait le bouton du bas.
   Portée limitée à nos éléments · reposer la règle sur tout le document depuis
   une extension serait s'autoriser à casser le thème de quelqu'un d'autre. */
.petflow,
.petflow *,
.petflow *::before,
.petflow *::after {
	box-sizing: border-box;
}

.petflow {
	--pf-rayon: 18px;
	--pf-bord: #e6e8ec;
	--pf-encre: #10151f;
	--pf-encre-2: #5b6472;
	--pf-accent: #2563eb;
	--pf-fond: #fff;
	--pf-vignette: 230px;
	--pf-ombre: 0 14px 34px -26px rgba(16, 21, 31, 0.65);
}

/* --- La barre de tri --- */

.petflow-barre {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px;
	margin-bottom: 22px;
}

.petflow-recherche {
	flex: 1 1 240px;
	min-width: 0;
	padding: 10px 14px;
	border: 1px solid var(--pf-bord);
	border-radius: 999px;
	background: var(--pf-fond);
	color: inherit;
	font: inherit;
	font-size: 0.95em;
	transition: border-color 0.15s, box-shadow 0.15s;
}

.petflow-recherche:focus {
	outline: none;
	border-color: var(--pf-accent);
	box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.14);
}

.petflow-puce {
	padding: 8px 15px;
	border: 1px solid var(--pf-bord);
	border-radius: 999px;
	background: var(--pf-fond);
	color: var(--pf-encre-2);
	font: inherit;
	font-size: 0.88em;
	cursor: pointer;
	transition: border-color 0.15s, color 0.15s, background 0.15s;
}

.petflow-puce:hover {
	border-color: var(--pf-accent);
	color: var(--pf-accent);
}

/* L'ÉTAT ACTIF EST UN APLAT, et son liseré prend la teinte du fond · un contour
   d'une autre couleur autour d'un aplat dessine un second bord que l'oeil lit
   comme un halo mal posé. Blanc sur #2563eb tient 5,2:1, là où le cyan de la
   marque tombe à 1,7:1 et devient illisible. */
.petflow-puce[aria-pressed="true"] {
	background: var(--pf-accent);
	border-color: var(--pf-accent);
	color: #fff;
	font-weight: 600;
}

/* L'ANNEAU DE FOCUS VISAIT UNE CLASSE QUI N'EXISTE PLUS · `.petflow-carte-lien`
   est le fossile d'un renommage vers `.petflow-cta`, et le renommage n'a pas
   suivi ici. Conséquence : la SEULE cible clavier de chaque carte n'a jamais
   reçu notre anneau, seulement un éclaircissement au survol. Trouvé par une
   revue adversariale, pas par l'oeil · le navigateur posait encore le sien,
   donc rien ne se voyait cassé. */
.petflow-puce:focus-visible,
.petflow-cta:focus-visible,
.petflow-bouton:focus-visible,
.petflow-retour a:focus-visible {
	outline: 2px solid var(--pf-accent);
	outline-offset: 2px;
}

/* --- La grille --- */

.petflow-grille {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(var(--pf-vignette), 1fr));
	gap: 22px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.petflow-carte {
	position: relative;
	margin: 0;
	padding: 0;
	list-style: none;
	border-radius: var(--pf-rayon);
	box-shadow: var(--pf-ombre);
}

/* LA COQUE QUI COUPE est un élément à part de la carte · le zoom de la photo ne
   tient que parce que quelque chose clippe, et ce quelque chose ne peut pas
   être la carte, dont l'ombre vit hors de sa boîte. */
.petflow-coque {
	display: flex;
	flex-direction: column;
	height: 100%;
	border: 1px solid var(--pf-bord);
	border-radius: inherit;
	background: var(--pf-fond);
	overflow: hidden;
}

/* TOUTE LA CARTE MÈNE À LA FICHE, par un lien étiré posé en superposition. Il
   est masqué aux lecteurs d'écran et hors tabulation parce qu'il DOUBLE le
   bouton « Voir la fiche », qui reste l'unique cible clavier · deux liens vers
   la même adresse feraient parcourir la grille deux fois. */
.petflow-lien-etire {
	position: absolute;
	inset: 0;
	z-index: 1;
	border-radius: inherit;
}

.petflow-cadre {
	position: relative;
	/* 4/5 · le PORTRAIT est le format d'une photo prise au téléphone, et c'est
	   le cadrage qui coupe le moins de museaux. */
	aspect-ratio: 4 / 5;
	overflow: hidden;
	background: #eef0f4;
}

.petflow-carte-photo {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.35s ease;
}

.petflow-carte:hover .petflow-carte-photo,
.petflow-carte:focus-within .petflow-carte-photo {
	transform: scale(1.05);
}

@media (hover: none) {
	.petflow-carte:hover .petflow-carte-photo {
		transform: none;
	}
}

.petflow-sans-photo {
	position: absolute;
	inset: 0;
	display: grid;
	place-items: center;
	color: #b9bfc9;
}

.petflow-sans-photo svg {
	width: 46px;
	height: 46px;
}

/* LE DÉGRADÉ N'EST PAS UN EFFET · c'est lui qui rend le nom lisible quel que
   soit ce qu'il y a sous lui. On ne choisit pas les photos. */
.petflow-voile {
	position: absolute;
	inset: 0;
	background: linear-gradient(
		180deg,
		rgba(7, 11, 20, 0.1) 0%,
		transparent 34%,
		transparent 54%,
		rgba(7, 11, 20, 0.94) 100%
	);
}

.petflow-titre-photo {
	position: absolute;
	left: 15px;
	right: 15px;
	bottom: 13px;
	color: #fff;
}

.petflow-carte-nom {
	display: block;
	font-size: 1.25em;
	font-weight: 700;
	line-height: 1.2;
}

.petflow-carte-race {
	display: block;
	margin-top: 2px;
	font-size: 0.78em;
	line-height: 1.35;
	color: rgba(255, 255, 255, 0.78);
	/* UNE SEULE LIGNE · « Berger belge (Malinois, Tervueren, Groenendael,
	   Laekenois) » prenait trois lignes et décalait toute la rangée. */
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

/* --- La pastille de statut, sur la photo --- */

/* ELLE GARDE SON FOND SOMBRE même en thème clair · elle est posée SUR une
   photo, jamais sur le fond de la page, et c'est ce fond translucide qui la
   rend lisible sur une photo claire comme sur une sombre. Le TRACÉ remplace la
   pastille de couleur qui la précédait : un point ne dit rien à qui ne
   distingue pas le vert de l'ambre, et un statut est ce qu'on lit en premier. */
.petflow-statut {
	position: absolute;
	top: 11px;
	left: 11px;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 5px 11px;
	border-radius: 999px;
	font-size: 0.72em;
	font-weight: 600;
	line-height: 1;
	background: rgba(11, 17, 32, 0.72);
	backdrop-filter: blur(6px);
	-webkit-backdrop-filter: blur(6px);
	color: var(--pf-statut, #34d399);
	border: 1px solid color-mix(in srgb, var(--pf-statut, #34d399) 40%, transparent);
}

.petflow-statut svg {
	width: 11px;
	height: 11px;
	flex: none;
}

.petflow-statut[data-statut="reserve"] {
	--pf-statut: #ffb020;
}

/* `flex: 1` N'EST PAS UN AJUSTEMENT · c'est lui qui fait que les boutons
   « Voir la fiche » s'alignent d'une carte à l'autre. La grille étire déjà
   toutes les cartes d'une rangée à la même hauteur, et le bouton porte
   `margin-top: auto` pour se coller en bas · mais sans cette ligne, le corps
   s'arrête à la hauteur de son contenu, il n'y a plus d'espace à distribuer, et
   la carte dont les capsules tiennent sur UNE ligne pose son bouton trente
   pixels plus haut que sa voisine. Mesuré sur la maquette. */
.petflow-carte-corps {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	padding: 12px 14px 14px;
}

/* --- La capsule d'attente --- */

/* EN APLAT ET NON EN TEINTE, à la différence de ses voisines · c'est ce qui la
   sort de la ligne des capsules descriptives. Une seule couleur pleine par
   carte, celle-là. Le libellé est BLANC, et c'est lui qui a fixé les teintes :
   sur les tons vifs de la palette (#FFB020, #FB9333, #F87171) un blanc tombe
   entre 1,8 et 2,8:1. Les trois retenus sont mesurés à 3,3, 3,4 et 3,5:1.
   Bornes INCLUSIVES en haut · 60 est le premier ton, 120 le deuxième. */
.petflow-attente {
	align-self: flex-start;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin-bottom: 10px;
	padding: 7px 12px;
	border-radius: 999px;
	font-size: 0.7em;
	font-weight: 600;
	line-height: 1;
	white-space: nowrap;
	color: #fff;
	background: #bb852a;
}

/* LE CENTRAGE VERTICAL SE JOUE ICI, et pas dans la marge intérieure.
   Mesuré sur la carte : le nombre se posait à 2 px du haut et 3,7 px du bas, et
   il DÉBORDAIT la marge de 4 px. La cause n'est pas l'espace, c'est la hauteur
   de ligne · la capsule est en `line-height: 1` sur un corps de 11,2 px, donc sa
   boîte de ligne fait 11,2 px, quand le nombre en 1,22em en demande 13,7. Le
   flux centrait donc une boîte plus PETITE que ce qu'elle contient, et les
   glyphes en sortaient par le haut.
   La phrase devient une boîte flex alignée sur la LIGNE DE BASE · c'est
   typographiquement juste (« 686 » et « jours d'attente » posent sur le même
   pied), et la boîte prend alors la hauteur de son plus grand enfant, donc le
   centrage du parent porte enfin sur ce qu'on voit. */
.petflow-attente > span {
	display: inline-flex;
	align-items: baseline;
	gap: 0.32em;
}

.petflow-attente[data-niveau="2"] { background: #d2703f; }
.petflow-attente[data-niveau="3"] { background: #d96559; }

.petflow-attente svg {
	width: 12px;
	height: 12px;
	flex: none;
}

/* LE NOMBRE PORTE LA GRAISSE · c'est lui qu'on lit, pas le mot « jours ».
   Les chiffres sont tabulaires pour qu'une colonne de cartes ne danse pas. */
.petflow-attente strong {
	font-weight: 900;
	font-size: 1.22em;
	line-height: 1;
	letter-spacing: -0.01em;
	/* Chiffres à chasse fixe · sans eux, une colonne de cartes danse d'un
	   « 1104 » à un « 21 », les chiffres n'ayant pas tous la même largeur. */
	font-variant-numeric: tabular-nums;
}

/* --- Les capsules descriptives --- */

/* L'ÂGE, LE SEXE ET L'ESPÈCE en capsules et non sur une ligne de texte · trois
   faits séparés par des points médians se LISENT en une phrase, alors qu'on les
   PARCOURT. En capsule, ils se comparent d'une carte à l'autre sans être lus.
   Chacune n'apparaît que si la donnée existe : une capsule vide se lirait comme
   une donnée perdue.

   DEUX VARIABLES ET PAS UNE, à la différence de la vitrine · sur fond sombre,
   la teinte sert à la fois d'encre et de fond. Sur blanc, les teintes claires
   de la palette (#9DA9BE, #7DE7FF) tombent sous 2,5:1 en encre. Le FOND garde
   donc la teinte d'origine, et l'ENCRE prend sa cousine foncée. */
.petflow-caps {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin-bottom: 12px;
}

.petflow-cap {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	padding: 4px 10px;
	border-radius: 999px;
	font-size: 0.72em;
	font-weight: 600;
	line-height: 1;
	white-space: nowrap;
	color: var(--pf-encre-cap, #5b6472);
	background: color-mix(in srgb, var(--pf-teinte, #9da9be) 14%, transparent);
	border: 1px solid color-mix(in srgb, var(--pf-teinte, #9da9be) 34%, transparent);
}

.petflow-cap svg {
	width: 12px;
	height: 12px;
	flex: none;
}

.petflow-cap[data-sexe="female"] {
	--pf-teinte: #ff89af;
	--pf-encre-cap: #b04a6d;
}

.petflow-cap[data-sexe="male"] {
	--pf-teinte: #38bdf8;
	--pf-encre-cap: #1c6f92;
}

/* --- Le bouton de la carte --- */

/* IL PORTE LE DÉGRADÉ DE LA MARQUE ET UNE PATTE, UNE SEULE. Sur une vitrine,
   ouvrir une fiche EST le geste attendu de la carte. L'icône ne dit PAS
   l'espèce · à 15 px un chien et un lapin ne se distinguent pas, et l'espèce
   est déjà écrite deux fois sur la carte.
   Il remonte AU DESSUS du lien étiré : recouvert, il perdrait son survol et son
   anneau de focus, alors qu'il reste la seule cible du clavier. */
/* LE BOUTON DE MARQUE, ÉCRIT UNE FOIS. Il vivait en deux exemplaires
   (`.petflow-cta` sur la carte, `.petflow-bouton` sur la fiche) qui ne
   différaient que par la taille · même dégradé, même rayon, même survol, même
   bloc d'icône. Deux écritures d'une couleur de marque divergent au premier
   ajustement, et c'est celle qu'on ne regarde pas qui reste en arrière. */
.petflow-cta,
.petflow-bouton {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	border: 0;
	border-radius: 999px;
	background: linear-gradient(120deg, #ff5d8f, #a855f7);
	color: #fff;
	font-weight: 700;
	text-decoration: none;
	transition: filter 0.15s ease;
}

.petflow-cta:hover,
.petflow-cta:focus-visible,
.petflow-bouton:hover,
.petflow-bouton:focus-visible {
	filter: brightness(1.08);
	color: #fff;
}

.petflow-cta svg,
.petflow-bouton svg {
	flex: none;
}

/* CE QUI DIFFÈRE VRAIMENT · la carte le veut pleine largeur et collé en bas,
   la fiche le veut à sa taille. `margin-top: auto` est ce qui aligne les
   boutons d'une rangée de cartes, et il exige que le corps prenne la hauteur
   restante (voir `.petflow-carte-corps`). */
.petflow-cta {
	position: relative;
	z-index: 2;
	margin-top: auto;
	justify-content: center;
	width: 100%;
	padding: 9px 16px;
	font-size: 0.86em;
}

.petflow-cta svg {
	width: 15px;
	height: 15px;
}

/* --- La fiche --- */

.petflow-retour {
	margin: 0 0 16px;
	font-size: 0.92em;
}

.petflow-retour a {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	color: var(--pf-encre-2);
	text-decoration: none;
}

.petflow-retour a:hover {
	color: var(--pf-accent);
}

.petflow-retour svg {
	width: 14px;
	height: 14px;
}

.petflow-fiche-tete {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px;
	margin-bottom: 18px;
}

.petflow-fiche-nom {
	margin: 0;
	font-size: 2em;
	line-height: 1.15;
}

/* SUR LA FICHE, LA PASTILLE DE STATUT N'EST PLUS SUR UNE PHOTO · elle se pose à
   côté du nom, donc son fond sombre translucide n'a plus rien à traverser. Elle
   passe en teinte claire, comme les capsules descriptives, et garde son tracé. */
.petflow-fiche-tete .petflow-statut {
	position: static;
	background: color-mix(in srgb, var(--pf-statut, #34d399) 14%, transparent);
	border-color: color-mix(in srgb, var(--pf-statut, #34d399) 34%, transparent);
	backdrop-filter: none;
	-webkit-backdrop-filter: none;
	color: var(--pf-statut-encre, #0f7a53);
	font-size: 0.78em;
	padding: 6px 13px;
}

.petflow-fiche-tete .petflow-statut svg {
	width: 13px;
	height: 13px;
}

.petflow-fiche-tete .petflow-statut[data-statut="reserve"] {
	--pf-statut: #ffb020;
	--pf-statut-encre: #8a5a00;
}

/* LA CAPSULE LONGUE dit la phrase entière · la carte prenait la forme courte
   parce qu'elle n'a pas la place, la fiche l'a.

   `align-self: center` DÉFAIT CELUI DE LA CARTE, et c'est une correction, pas un
   goût. Sur la carte, `align-self: flex-start` est ce qui empêche la capsule de
   s'étirer sur toute la largeur d'une colonne · ici la tête est une ligne
   HORIZONTALE, donc le même mot cale la capsule en HAUT de la ligne pendant que
   le nom et la pastille de statut, eux, se centrent. Mesuré sur la fiche : le
   nom et « À l'adoption » avaient leur centre à 42,4 px, la capsule d'attente au
   39,9, et les 2,5 px d'écart se lisaient comme un défaut d'alignement. La ligne
   fait 36,8 px (la hauteur du nom), la capsule 31,8 · c'est exactement la moitié
   de la différence. */
.petflow-fiche-tete .petflow-attente {
	align-self: center;
	margin-bottom: 0;
	font-size: 0.8em;
	padding: 8px 15px;
	gap: 9px;
}

.petflow-fiche-tete .petflow-attente svg {
	width: 15px;
	height: 15px;
}

/* SUR LA FICHE, les capsules descriptives respirent un peu plus · elles ne sont
   plus serrées dans une vignette de 230 px, et elles portent une donnée de plus
   (la race, qui sur la carte est déjà écrite sous le nom). */
.petflow-caps--fiche {
	margin-bottom: 22px;
}

.petflow-caps--fiche .petflow-cap {
	font-size: 0.8em;
	padding: 6px 13px;
}

.petflow-caps--fiche .petflow-cap svg {
	width: 13px;
	height: 13px;
}

.petflow-photos {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
	gap: 14px;
	margin-bottom: 26px;
}

.petflow-photo {
	display: block;
	width: 100%;
	aspect-ratio: 4 / 5;
	object-fit: cover;
	border-radius: var(--pf-rayon);
	border: 1px solid var(--pf-bord);
}

/* LA GRILLE DES FAITS · deux colonnes, séparées par UNE gouttière d'un pixel
   qui laisse voir le fond. C'est ce qui donne le trait de séparation sans avoir
   à poser une bordure sur chaque case et à se demander laquelle porte laquelle
   quand une case manque. */
.petflow-faits {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 1px;
	margin: 0 0 26px;
	padding: 0;
	list-style: none;
	background: var(--pf-bord);
	border: 1px solid var(--pf-bord);
	border-radius: 14px;
	overflow: hidden;
}

/* UN NOMBRE IMPAIR DE FAITS laisse une case vide en bas à droite, qui se lit
   comme une donnée manquante et non comme la fin de la liste. Le dernier prend
   donc toute la ligne · la règle ne compte pas jusqu'à un nombre, elle vaut
   pour tous. */
.petflow-fait:last-child:nth-child(odd) {
	grid-column: 1 / -1;
}

.petflow-fait {
	display: flex;
	align-items: center;
	gap: 11px;
	margin: 0;
	padding: 13px 14px;
	background: var(--pf-fond);
}

/* LA PASTILLE D'ICÔNE · carré à bords arrondis, la teinte portée par
   `currentColor` pour que le TRAIT et l'APLAT soient toujours la même couleur,
   sans jamais écrire deux valeurs qui pourraient diverger.

   TROIS TEINTES, PAS SEPT, et c'est ce qui en fait une structure plutôt qu'un
   arc-en-ciel : le gabarit (l'arrivée), la santé (la stérilisation), les
   ententes. Le lecteur voit trois familles avant de lire le premier mot. Sept
   teintes n'auraient rien groupé et seraient entrées en concurrence avec le
   vert et le rouge des VALEURS, qui eux veulent dire quelque chose.

   LES TROIS SONT PLUS FONCÉES QUE SUR LA VITRINE · le cyan, le violet et
   l'ambre de la palette sont réglés pour un fond sombre et tombent sous 3:1 sur
   du blanc. Ce sont les mêmes familles, descendues d'un cran. */
.petflow-factico {
	flex: none;
	width: 30px;
	height: 30px;
	border-radius: 9px;
	display: grid;
	place-items: center;
	background: color-mix(in srgb, currentColor 15%, transparent);
}

.petflow-factico svg {
	width: 16px;
	height: 16px;
}

.petflow-factico[data-famille="profil"] { color: #0e8fb8; }
.petflow-factico[data-famille="sante"] { color: #7c3aed; }
.petflow-factico[data-famille="entente"] { color: #b5730b; }

.petflow-fait-libelle {
	display: block;
	font-size: 0.72em;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: var(--pf-encre-2);
}

.petflow-fait-valeur {
	display: flex;
	align-items: center;
	gap: 6px;
	margin-top: 3px;
	font-size: 0.95em;
	font-weight: 600;
	line-height: 1.3;
}

.petflow-fait-valeur svg {
	width: 14px;
	height: 14px;
	flex: none;
}

/* LE VERT ET LE ROUGE DISENT LA VALEUR, pas la famille · « non renseigné » n'est
   NI l'un NI l'autre et reste gris, parce que le confondre avec « non » ferait
   dire à la fiche quelque chose que l'association n'a jamais saisi. */
.petflow-fait-valeur[data-reponse="oui"] { color: #0f7a53; }
.petflow-fait-valeur[data-reponse="non"] { color: #c0492a; }
.petflow-fait-valeur[data-reponse="nc"] { color: #8b929c; font-weight: 500; }

.petflow-section {
	margin: 0 0 12px;
	font-size: 1.1em;
	font-weight: 700;
}

/* BORNÉE EN LARGEUR, et c'est une règle de lecture et pas de goût · au delà
   d'environ 70 caractères, l'oeil rate la ligne suivante en revenant à la
   marge. La borne est en `ch`, donc elle suit la police du thème plutôt qu'un
   nombre de pixels qui ne veut rien dire d'une fonte à l'autre. */
.petflow-description {
	max-width: 68ch;
	margin-bottom: 28px;
	line-height: 1.65;
	color: var(--pf-encre-2);
}

/* LA SEULE CHOSE QU'ON RÈGLE SUR UN LIEN DE L'HISTOIRE EST SA COUPE, et c'est
   volontairement tout. La couleur, le soulignement et le survol appartiennent au
   thème · un lien posé dans le contenu d'une page hérite de ce que
   l'association a choisi pour tous les siens, et lui en imposer un autre ferait
   du bloc une pièce rapportée. Ce qu'un thème ne peut PAS deviner, en revanche,
   c'est que ce texte contient des adresses écrites à la main, dont le LIBELLÉ
   est l'adresse entière : sans cette ligne, une adresse de cent caractères sans
   espace ne se coupe nulle part, déborde son paragraphe et pousse une barre de
   défilement horizontale sur toute la page, sur mobile d'abord. */
.petflow-description a {
	overflow-wrap: anywhere;
}

.petflow-adopter {
	margin: 0;
}

.petflow-bouton {
	gap: 9px;
	padding: 13px 26px;
}

.petflow-bouton svg {
	width: 17px;
	height: 17px;
}

.petflow-vide,
.petflow-avis {
	color: var(--pf-encre-2);
	font-style: italic;
}

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

	.petflow-carte-corps {
		padding: 10px 11px 12px;
	}

	.petflow-faits {
		grid-template-columns: minmax(0, 1fr);
	}
}