/**
 * Advanced Photo Suite — planches tarifaires et pages de prestation.
 *
 * Les cartes reprennent la matière du reste du site : plaque de verre fumé sur
 * le fond sombre, liseré discret, et le prix comme seul point d'appui fort.
 * C'est ce qu'on vient chercher sur une planche tarifaire ; tout le reste se
 * lit après.
 */

:root {
	/*
	 * Une seule teinte pour tout ce qui relève de l'offre — bandeau, prix,
	 * avantages, gains du récapitulatif. Deux valeurs, parce qu'un fond et un
	 * texte n'ont pas les mêmes besoins : l'ambre soutenu porte du blanc, sa
	 * version claire se lit sur le noir du site.
	 */
	--aps-offre: #b45309;
	--aps-offre-clair: #e8ae63;
}

.aps-planche { margin-block: clamp(1.5rem, 4vh, 3rem); }

.aps-planche-intro {
	max-width: 46rem;
	margin-inline: auto;
	margin-block-end: clamp(1.5rem, 4vh, 2.5rem);
	text-align: center;
	text-wrap: pretty;
}

/*
 * Le nombre de colonnes par paliers, et non par `auto-fit`.
 *
 * `auto-fit` avec une largeur minimale paraissait plus souple, mais il rendait
 * le réglage imprévisible : sur un conteneur de 850 px, une planche réglée à
 * trois colonnes en donnait deux, parce qu'il manquait trente pixels. Le
 * photographe règle trois colonnes, il veut trois colonnes — le repli tient
 * alors à la largeur de l'écran, qui est une raison compréhensible, et non à
 * une arithmétique invisible.
 */
.aps-planche-grille {
	display: grid;
	grid-template-columns: 1fr;
	gap: clamp(1rem, 2.5vw, 2rem);
	margin-inline: auto;
}

@media (min-width: 40rem) {
	.aps-planche-grille {
		grid-template-columns: repeat(min(var(--aps-planche-cols, 3), 2), 1fr);
	}
}

@media (min-width: 60rem) {
	.aps-planche-grille {
		grid-template-columns: repeat(var(--aps-planche-cols, 3), 1fr);
	}
}

.aps-presta-carte {
	position: relative;
	display: flex;
	border-radius: 2px;
	overflow: hidden;

	/* La plaque de verre fumé, comme le menu et la bande des filtres. */
	background: rgba(14, 12, 10, 0.3);
	-webkit-backdrop-filter: blur(16px) saturate(0.85);
	backdrop-filter: blur(16px) saturate(0.85);
	box-shadow:
		inset 0 1px 0 rgba(255, 255, 255, 0.14),
		0 18px 50px -22px rgba(0, 0, 0, 0.55);
	transition: transform 240ms ease, box-shadow 240ms ease;
}

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
	.aps-presta-carte { background: rgba(14, 12, 10, 0.58); }
}

.aps-presta-carte:hover,
.aps-presta-carte:focus-within {
	transform: translateY(-3px);
	box-shadow:
		inset 0 1px 0 rgba(255, 255, 255, 0.2),
		0 26px 60px -22px rgba(0, 0, 0, 0.7);
}

/* Une carte qui porte une offre se signale par son arête, pas par sa couleur. */
.aps-presta-carte.a-une-offre {
	box-shadow:
		inset 0 0 0 1px rgba(232, 174, 99, 0.55),
		inset 0 1px 0 rgba(255, 255, 255, 0.14),
		0 18px 50px -22px rgba(0, 0, 0, 0.55);
}

/*
 * Toute la carte est cliquable : le lien enveloppe le contenu plutôt que de se
 * limiter à un bouton. Une carte de tarif est une cible, pas un paragraphe.
 */
.aps-presta-lien {
	display: flex;
	flex-direction: column;
	width: 100%;
	color: inherit !important;
	text-decoration: none;
}

.aps-presta-bandeau {
	position: absolute;
	inset-block-start: 0;
	inset-inline-end: 0;
	z-index: 2;
	padding: .3em .9em;
	background: var(--aps-offre);
	color: #fff;
	font-size: .72rem;
	letter-spacing: .08em;
	text-transform: uppercase;
}

.aps-presta-bandeau.est-seul {
	position: static;
	display: inline-block;
	margin-block-end: .8rem;
	border-radius: 2px;
}

.aps-presta-vignette img {
	display: block;
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
}

.aps-presta-corps {
	display: flex;
	flex-direction: column;
	gap: .6rem;
	padding: clamp(1.1rem, 2.4vw, 1.7rem);
}

.aps-presta-titre { margin: 0; font-size: clamp(1.25rem, 2.4vw, 1.6rem); }

.aps-presta-accroche { margin: 0; opacity: .82; text-wrap: pretty; }

.aps-presta-prix {
	margin: .2rem 0 0;
	display: flex;
	align-items: baseline;
	flex-wrap: wrap;
	gap: .4em;
}

.aps-presta-montant { font-size: clamp(1.7rem, 3.4vw, 2.4rem); line-height: 1; }
.aps-presta-prix.est-grand .aps-presta-montant { font-size: clamp(2.2rem, 5vw, 3.4rem); }
.aps-presta-prix del { opacity: .5; font-size: .95rem; }
.aps-presta-suffixe { opacity: .7; font-size: .9rem; }
/*
 * Le prix d'une offre prend la teinte du bandeau : c'est ce qui lie le
 * « −30 € » à l'étiquette qui l'annonce. Sans cela, le nouveau prix ne se
 * distinguait en rien d'un prix ordinaire, et l'offre ne se voyait que par son
 * bandeau, dans un coin.
 */
.aps-presta-prix.est-en-offre .aps-presta-montant { color: var(--aps-offre-clair) !important; }

/*
 * Le sélecteur passe par `.wp-site-blocks` non par goût, mais par nécessité
 * d'arithmétique : la règle de `pages.css` qui repeint les paragraphes est
 * `!important` ET plus spécifique (0,1,1 contre 0,1,0). Deux `!important` ne
 * se départagent que par la spécificité, et la classe seule perdait.
 */
.wp-site-blocks .aps-presta-promo-detail {
	margin: 0;
	color: var(--aps-offre-clair) !important;
	font-size: .85rem;
}

/* Les avantages de l'offre, dans la même teinte, avant le récapitulatif. */
.aps-presta-avantages {
	margin: .2rem 0 0;
	padding-inline-start: 1.1em;
	color: var(--aps-offre-clair);
	font-size: .92rem;
}

.aps-presta-avantages li { margin-block: .2em; }

/* Une valeur que l'offre améliore, dans le récapitulatif. */
/*
 * `!important`, et il est mérité : `pages.css` repeint tous les `dd` et `p` du
 * site en encre claire, avec `!important` lui aussi, pour que le texte tienne
 * sur le fond noir. Or cette teinte-ci porte une information — ceci est un
 * gain — et non un simple goût. Les avantages, eux, s'en tirent par héritage :
 * la couleur est posée sur leur liste, que les `li` reprennent.
 */
.aps-presta-resume dd.est-un-gain { color: var(--aps-offre-clair) !important; }
.aps-presta-resume dd del { opacity: .55; }

/*
 * Le récapitulatif en deux colonnes : le libellé à gauche, la valeur à droite.
 * Une liste de définitions plutôt qu'un tableau — c'est bien ce que c'est, et
 * un lecteur d'écran l'annonce comme tel.
 */
.aps-presta-resume {
	display: grid;
	grid-template-columns: auto 1fr;
	gap: .3em .9em;
	margin: .4rem 0 0;
	padding-block-start: .8rem;
	border-block-start: 1px solid rgba(255, 255, 255, .14);
	font-size: .92rem;
}

.aps-presta-resume dt { margin: 0; opacity: .68; }
.aps-presta-resume dd { margin: 0; text-align: end; }

.aps-presta-inclus {
	margin: .6rem 0 0;
	padding-inline-start: 1.1em;
	font-size: .92rem;
}

.aps-presta-inclus li { margin-block: .25em; }

.aps-presta-suite {
	margin-block-start: auto;
	padding-block-start: .9rem;
	font-size: .82rem;
	letter-spacing: .06em;
	text-transform: uppercase;
	opacity: .75;
}

.aps-presta-carte:hover .aps-presta-suite { opacity: 1; }

.aps-planche-notes {
	max-width: 46rem;
	margin: clamp(1.5rem, 4vh, 2.5rem) auto 0;
	padding-inline-start: 1.4em;
	font-size: .85rem;
	opacity: .72;
}

.aps-planche-vide {
	padding: 1.5rem;
	border: 1px dashed currentColor;
	opacity: .8;
	text-align: center;
}

/* --------------------------------------------------------------------------
   La page d'une prestation
   -------------------------------------------------------------------------- */

.aps-presta-fiche {
	margin-block-end: clamp(1.5rem, 4vh, 2.5rem);
	padding: clamp(1.2rem, 3vw, 2rem);
	border-radius: 2px;
	background: rgba(14, 12, 10, 0.3);
	-webkit-backdrop-filter: blur(16px) saturate(0.85);
	backdrop-filter: blur(16px) saturate(0.85);
	box-shadow:
		inset 0 1px 0 rgba(255, 255, 255, 0.14),
		0 18px 50px -22px rgba(0, 0, 0, 0.55);
}

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
	.aps-presta-fiche { background: rgba(14, 12, 10, 0.58); }
}

.aps-presta-exemples { margin-block-start: clamp(2rem, 6vh, 4rem); }

.aps-presta-planche-photos {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 15rem), 1fr));
	gap: clamp(.6rem, 1.5vw, 1.1rem);
}

.aps-presta-exemple { margin: 0; }

.aps-presta-exemple img {
	display: block;
	width: 100%;
	aspect-ratio: 3 / 2;
	object-fit: cover;
	border-radius: 2px;
}

@media (prefers-reduced-motion: reduce) {
	.aps-presta-carte { transition: none; }
	.aps-presta-carte:hover { transform: none; }
}