/**
 * Advanced Photo Suite — la peau du site : fond sombre et image de fond.
 *
 * Le site passe sur un gris sombre. Ce n'est pas un goût d'époque : le sujet
 * de chaque page est une photographie, et un fond clair lui vole de la lumière
 * — l'œil compare ce qu'il voit au blanc le plus proche, et une image posée
 * sur du crème paraît toujours plus terne qu'elle n'est. Le sombre rend aux
 * images leur éclat et laisse l'entête blanche se poser partout de la même
 * façon, sans bandeau.
 *
 * Conséquence obligée, et elle n'est pas un détail : tout le texte du site
 * doit passer au clair. C'est l'essentiel de ce fichier.
 */

:root {
	/*
	 * Noir profond, mais pas noir pur : une pointe de chaleur (11, 10, 9) que
	 * l'œil ne nomme pas et qui empêche les photographies — elles tirent vers
	 * le brun et l'ocre — de jurer sur un fond bleuté. Ces valeurs commandent
	 * tout le fichier : c'est ici qu'on ajuste.
	 *
	 * La composante est aussi donnée en canaux séparés, parce que le dégradé
	 * de l'image de fond a besoin de la MÊME couleur à des opacités variables.
	 * Écrite deux fois, elle finissait par diverger — le dégradé s'est fondu
	 * un temps vers un gris que la page n'avait plus.
	 */
	--aps-fond-rgb: 11 10 9;
	--aps-fond: rgb(var(--aps-fond-rgb));
	--aps-fond-creux: #171615;   /* les surfaces en retrait : encadrés, champs */
	--aps-encre: #ece9e4;        /* le texte courant */
	--aps-encre-douce: #a8a29a;  /* les mentions secondaires */
	--aps-filet: rgba(255, 255, 255, .14);
}

/* ------------------------------------------------------------------------- */
/* Le fond                                                                    */
/* ------------------------------------------------------------------------- */

/*
 * Le fond sombre est posé sur `html` et non sur `body` : l'image de fond d'une
 * page occupe un pseudo-élément du body, qu'un fond opaque sur le body même
 * recouvrirait. Le body doit donc rester transparent.
 *
 * `!important` : le thème pose sa couleur de fond dans les styles globaux, sur
 * `body` lui-même, avec une spécificité que rien d'ordinaire ne bat.
 */
html { background-color: var(--aps-fond); }

body {
	background-color: transparent !important;
	color: var(--aps-encre);
}

/* ------------------------------------------------------------------------- */
/* L'image à la une, devenue fond de page                                     */
/* ------------------------------------------------------------------------- */

/*
 * Deux couches superposées, toutes deux FIXÉES à la fenêtre : l'image, puis le
 * dégradé qui la fond vers le bas dans le gris du site.
 *
 * `position: fixed` sur un pseudo-élément plutôt que `background-attachment:
 * fixed` — qui donne le même effet en une ligne, mais que Safari sur iOS
 * ignore depuis toujours : l'image y saute au défilement. Le pseudo-élément
 * fixé, lui, tient partout.
 *
 * C'est cette fixité qui fait l'effet demandé : l'image ne bouge pas, le
 * contenu file par-dessus, et la page paraît glisser sur la photographie.
 */
body.aps-fond-photo { position: relative; }

body.aps-fond-photo::before,
body.aps-fond-photo::after {
	content: "";
	z-index: -1;
	pointer-events: none;
}

/*
 * L'image, FIXÉE à la fenêtre : elle ne bouge pas, le contenu file par-dessus,
 * et la page paraît glisser sur la photographie.
 */
body.aps-fond-photo::before {
	position: fixed;
	inset: 0;
	background-image: var(--aps-fond-photo);
	background-size: cover;
	/*
	 * Calée en haut : c'est là que se trouve le sujet d'un portrait, et c'est
	 * la partie qu'on voit avant tout défilement.
	 */
	background-position: center top;
	background-repeat: no-repeat;
}

/*
 * Le dégradé, lui, suit le DOCUMENT et non la fenêtre. La distinction fait
 * tout : fixé comme l'image, il aurait gardé la même intensité à chaque
 * hauteur de la page, et le texte serait retombé sur un détail clair de la
 * photographie à chaque écran parcouru. Attaché au document, il s'épaissit à
 * mesure qu'on descend — l'image se donne en haut, puis s'efface dans le gris.
 *
 * Les arrêts sont en `vh` et non en pourcentage : ils doivent se compter en
 * écrans parcourus, pas en fraction d'une page dont on ignore la longueur. Sur
 * une page de trois écrans, un arrêt à 78 % aurait laissé l'image visible
 * jusqu'aux deux tiers.
 */
body.aps-fond-photo::after {
	position: absolute;
	inset: 0;
	background: linear-gradient(
		180deg,
		rgb(var(--aps-fond-rgb) / 0) 0,
		rgb(var(--aps-fond-rgb) / .55) 45vh,
		var(--aps-fond) 110vh
	);
}

/*
 * L'image à la une ne se montre plus DANS le flux : elle est le fond. La
 * laisser afficher la ferait paraître deux fois sur la même page.
 *
 * Les GALERIES font exception à cette règle CSS : leur titre peut vivre dans
 * la figure de l'image à la une, qu'on ne peut donc pas masquer d'un bloc.
 * C'est le rendu de la galerie qui s'en charge, en PHP, et qui ressort le
 * titre seul — voir `Gallery\Front`.
 */
body.aps-fond-photo:not(.aps-gallery-page) .wp-block-post-featured-image { display: none; }

/*
 * Le haut d'une galerie respire moins.
 *
 * Le thème pose 70 px de marge sur `<main>` en STYLE EN LIGNE — aucun
 * sélecteur ne les bat — et le titre en ajoutait 25. Avec l'entête, cela
 * faisait 165 px de vide mesurés entre le menu et le titre : sur une galerie
 * dont le sujet est la photographie, c'est autant de moins à voir sans
 * défiler.
 *
 * Réservé aux galeries et aux prestations : une page de texte, elle, gagne à
 * cette respiration.
 */
body:is(.aps-gallery-page, .single-aps_prestation) main {
	margin-block-start: clamp(1rem, 2.5vh, 1.75rem) !important;
}

body:is(.aps-gallery-page, .single-aps_prestation) .wp-block-post-title,
body.aps-gallery-page .aps-titre-sur-fond {
	margin-block-start: 0 !important;
}

/*
 * Le titre d'une prestation, aligné sur celui d'une page.
 *
 * Le thème rend le titre d'un contenu « single » plus petit et fer à gauche,
 * et celui d'une page plus grand et centré — mesuré : 20,6 px justifié contre
 * 30,6 px centré. Une prestation se lit comme une page, pas comme un billet de
 * blog : elle prend donc la présentation de la page.
 */
body.single-aps_prestation .wp-block-post-title {
	text-align: center;
	font-size: var(--wp--preset--font-size--x-large, 1.9rem);
}

/*
 * Le titre d'une galerie, sorti de son enveloppe.
 *
 * Il gardait jusqu'ici sa place au centre d'un tirage incliné, d'où sa
 * position absolue et sa contre-inclinaison. Sans tirage, il redevient un
 * titre ordinaire dans le flux — mais il garde sa plaque de verre fumé, qui
 * reste justifiée : il est toujours posé sur une photographie, celle du fond,
 * et le dégradé est encore transparent à cette hauteur de page.
 */
.aps-titre-sur-fond {
	position: static !important;
	transform: none !important;
	inset: auto !important;
	display: block;
	width: fit-content;
	max-width: min(92%, 40rem);
	margin-inline: auto;
	margin-block: clamp(1.4rem, 4vh, 3rem) clamp(1rem, 3vh, 2rem);
	pointer-events: auto;

	/*
	 * Pas de plaque de verre fumé ici, à la différence du titre posé sur une
	 * image « posée ». Elle y sert à détacher le texte d'une photographie
	 * livrée telle quelle ; sur le fond de page, le dégradé a déjà fait ce
	 * travail, et la plaque n'ajoutait qu'un rectangle de trop.
	 *
	 * La gravure du texte, elle, reste : ce n'est pas la plaque, c'est le
	 * dessin du titre.
	 */
	padding: 0 !important;
	background: none !important;
	-webkit-backdrop-filter: none !important;
	backdrop-filter: none !important;
	border-radius: 0 !important;
	box-shadow: none !important;
}

/*
 * Les blocs du thème repeignent leur propre fond clair par des classes de
 * préréglage. Laissés tels quels, ils découpent des rectangles crème au milieu
 * du sombre.
 */
.wp-site-blocks .has-base-background-color,
.wp-site-blocks .has-base-2-background-color,
.wp-site-blocks .wp-block-group.has-background:not(.aps-garde-fond) {
	background-color: transparent !important;
}

/* ------------------------------------------------------------------------- */
/* Le texte                                                                   */
/* ------------------------------------------------------------------------- */

/*
 * On reprend la couleur là où le thème l'impose — titres, paragraphes, listes,
 * citations — plutôt que d'un `*` général, qui emporterait aussi les éléments
 * que l'extension colore elle-même en connaissance de cause.
 */
.wp-site-blocks :is(h1, h2, h3, h4, h5, h6),
.wp-site-blocks :is(p, li, dd, dt, figcaption, blockquote, address),
.wp-site-blocks .wp-block-post-title,
.wp-site-blocks .wp-block-post-content,
.wp-site-blocks .has-contrast-color,
.wp-site-blocks .has-contrast-2-color,
.wp-site-blocks .has-contrast-3-color {
	color: var(--aps-encre) !important;
}

.wp-site-blocks :is(figcaption, .wp-block-post-date, .wp-element-caption) {
	color: var(--aps-encre-douce) !important;
}

/*
 * EXCEPTION, et elle est importante. Une carte de portfolio réglée en couleurs
 * personnalisées porte le fond ET le texte que le photographe a choisis dans
 * la Disposition — par exemple une carte blanche à texte ardoise. La règle
 * ci-dessus, avec son `!important`, y peignait le titre en clair : du blanc
 * cassé sur du blanc, illisible.
 *
 * `inherit` rend la main à la couleur de la carte. Le réglage de l'utilisateur
 * fait autorité sur notre habillage — c'est le sens de la règle qui veut que
 * la Disposition commande.
 */
.aps-portfolio[data-colors="custom"] .aps-portfolio-link,
.aps-portfolio[data-colors="custom"] .aps-portfolio-card :is(h1, h2, h3, h4, h5, h6, p, li, figcaption),
.aps-portfolio[data-colors="custom"] .aps-portfolio-card .aps-portfolio-title,
.aps-portfolio[data-colors="custom"] .aps-portfolio-card .aps-portfolio-meta {
	color: inherit !important;
}

/*
 * Même exception pour ce que le module Prestations colore en connaissance de
 * cause : la teinte d'offre porte une information — ceci est un gain — et la
 * règle générale ci-dessus la repeignait en encre ordinaire. Les avantages
 * d'une promotion redevenaient alors indiscernables du reste de la carte.
 */
.aps-presta-avantages li {
	color: inherit !important;
}

/*
 * Les liens dans le corps du texte : soulignés, sans couleur d'accent.
 *
 * `:not()` écarte les liens que l'extension habille elle-même — une carte de
 * portfolio est un lien qui enveloppe toute la carte, et lui imposer notre
 * encre claire la faisait hériter à tout son contenu, titre compris, par-dessus
 * les couleurs choisies dans la Disposition.
 */
.wp-site-blocks .wp-block-post-content a:not(.wp-element-button, .aps-portfolio-link, .aps-item-link, [class*="aps-"]) {
	color: var(--aps-encre);
	text-decoration-color: var(--aps-encre-douce);
	text-underline-offset: .18em;
}

.wp-site-blocks .wp-block-post-content a:not(.wp-element-button, .aps-portfolio-link, .aps-item-link, [class*="aps-"]):hover {
	text-decoration-color: var(--aps-encre);
}

/* Les filets du thème étaient dessinés pour du clair. */
.wp-site-blocks hr,
.wp-site-blocks .wp-block-separator {
	border-color: var(--aps-filet) !important;
	color: var(--aps-filet) !important;
}

/* ------------------------------------------------------------------------- */
/* Les boutons et les champs                                                  */
/* ------------------------------------------------------------------------- */

/*
 * Le bouton du thème est encre sur crème : sur fond sombre il disparaît. On
 * l'inverse — clair sur sombre — plutôt que de lui inventer une couleur.
 */
.wp-site-blocks .wp-element-button,
.wp-site-blocks .wp-block-button__link {
	background-color: var(--aps-encre) !important;
	color: var(--aps-fond) !important;
}

.wp-site-blocks .wp-element-button:hover,
.wp-site-blocks .wp-block-button__link:hover {
	background-color: #fff !important;
}

.wp-site-blocks .is-style-outline .wp-block-button__link {
	background-color: transparent !important;
	color: var(--aps-encre) !important;
	border-color: var(--aps-encre) !important;
}

.wp-site-blocks :is(input[type="text"], input[type="email"], input[type="password"],
                    input[type="search"], input[type="tel"], input[type="url"],
                    input[type="number"], select, textarea) {
	background-color: var(--aps-fond-creux);
	color: var(--aps-encre);
	border: 1px solid var(--aps-filet);
}

.wp-site-blocks ::placeholder { color: var(--aps-encre-douce); opacity: 1; }

/* ------------------------------------------------------------------------- */
/* Le pied de page                                                            */
/* ------------------------------------------------------------------------- */

/*
 * LE PIED DE PAGE NE REMONTE JAMAIS AU-DESSUS DU BAS DE LA FENÊTRE.
 *
 * Sur une page maigre — une galerie de deux photos, ou vide — le pied de page
 * s'arrêtait là où le contenu s'arrêtait, laissant du vide en dessous. Sur une
 * page à image de fond, ce vide montrait la photographie APRÈS la fin du
 * dégradé qui doit l'éteindre : on voyait la mécanique.
 *
 * `main` prend tout l'espace qui reste (`flex-grow: 1`) plutôt que le pied de
 * page une marge automatique : ainsi le pied garde la marge que le thème lui
 * donne quand la page est longue, au lieu de la voir écrasée par un `auto`.
 *
 * Le passage en colonne flex ne change aucun espacement ici : les marges du
 * thème sont toutes portées par le HAUT des blocs (70 px sur `main`, 19 px sur
 * le pied), aucune ne fusionne avec sa voisine. Mesuré avant de basculer.
 *
 * `dvh` et non `vh` : sur téléphone, la barre d'adresse se rétracte au
 * défilement et `vh` reste figé sur la hauteur sans barre.
 */
.wp-site-blocks {
	display: flex;
	flex-direction: column;
	/*
	 * La barre d'administration décale le document de sa propre hauteur : sans
	 * la retrancher, une pleine hauteur créait 32 px de défilement pour rien
	 * — visible de Stéphane connecté, pas de ses visiteurs. La variable vaut
	 * zéro quand la barre est absente.
	 */
	min-height: calc(100vh - var(--wp-admin--admin-bar--height, 0px));
	min-height: calc(100dvh - var(--wp-admin--admin-bar--height, 0px));
}

.wp-site-blocks > main { flex: 1 0 auto; }

/* L'entête et le pied gardent leur hauteur, quoi qu'il arrive au contenu. */
.wp-site-blocks > header,
.wp-site-blocks > footer { flex: 0 0 auto; }

.wp-site-blocks > footer {
	background-color: transparent !important;
	border-block-start: 1px solid var(--aps-filet);
}

/* ------------------------------------------------------------------------- */
/* La bande des filtres                                                       */
/* ------------------------------------------------------------------------- */

/*
 * Galeries et portfolios ont chacun leur classe — les deux blocs ont été
 * écrits séparément — mais la bande est le même objet et doit se présenter de
 * la même façon.
 *
 * PLUS DE PLAQUE : le bouton est ancré, les filtres sont cernés.
 *
 * La plaque de verre fumé se justifiait tant que la barre restait déployée :
 * il fallait un socle sous cinq ou six libellés. Depuis l'escamotage, elle
 * encadrait un seul bouton sur toute la largeur de la page.
 *
 * Ce qui reste en vue en permanence, c'est le BOUTON : lui seul reçoit un
 * fond, parce qu'il doit se donner comme cliquable sur n'importe quelle
 * photographie. Les filtres, eux, ne paraissent que le temps qu'on trie : les
 * poser sur un fond reviendrait à empiler des formes sur l'image pour un
 * moment bref.
 */
.aps-block-filters,
.aps-portfolio-filters {
	background: none;
	-webkit-backdrop-filter: none;
	backdrop-filter: none;
	box-shadow: none;
	padding-inline: 0;
}

/*
 * Le bouton ancré. Pas de flou d'arrière-plan : sur une surface de la taille
 * d'un mot il ne se voit pas, et il coûte cher à peindre. L'opacité fait le
 * travail seule.
 *
 * `opacity` passe à 1, sinon le fond serait atténué avec le texte ; le retrait
 * et le survol se jouent désormais sur la couleur du fond.
 */
.aps-block-filters .aps-filtres-bascule {
	background: rgba(10, 9, 8, 0.62);
	border-color: rgba(255, 255, 255, 0.28);
	box-shadow: 0 2px 14px rgba(0, 0, 0, 0.35);
	opacity: 1;
}

.aps-block-filters .aps-filtres-bascule:hover,
.aps-block-filters .aps-filtres-bascule[aria-expanded="true"] {
	background: rgba(10, 9, 8, 0.75);
	border-color: rgba(255, 255, 255, 0.4);
}

/*
 * Sans plaque, un filtre à 70 % d'opacité disparaît sur un ciel. Le retrait
 * des inactifs se joue sur un écart plus serré.
 */
.aps-block-filters .aps-filter,
.aps-portfolio-filters .aps-pf-filter { opacity: 0.82; }

.aps-block-filters .aps-filter[aria-pressed="true"],
.aps-portfolio-filters .aps-pf-filter[aria-pressed="true"] { opacity: 1; }

/*
 * Les libellés en blanc franc, et non dans l'encre du corps de texte : posés
 * à même une photographie, ils doivent tenir sans dépendre de ce qu'il y a
 * dessous.
 *
 * LE CERNE, et non une ombre portée. Quatre ombres denses et très serrées
 * dessinent un liseré sombre autour de chaque lettre ; un halo large et
 * discret les accompagne. L'ombre portée diffuse, elle, grise le blanc — c'est
 * la raison pour laquelle elle avait été écartée du reste du site. Le cerne
 * détache la lettre sans la salir.
 *
 * La gravure des titres ne convenait pas ici : calibrée en `em` pour des
 * titres de 3 rem, son creux devient invisible sur un libellé de 14 px.
 */
.aps-block-filters .aps-filter,
.aps-block-filters .aps-filtres-bascule,
.aps-portfolio-filters .aps-pf-filter {
	color: #fff !important;
	text-shadow:
		0 1px 1px rgba(0, 0, 0, .92),
		0 -1px 1px rgba(0, 0, 0, .6),
		1px 0 1px rgba(0, 0, 0, .6),
		-1px 0 1px rgba(0, 0, 0, .6),
		0 2px 14px rgba(0, 0, 0, .75);
}

/* Le bouton porte un fond : le cerne y ferait un texte sali pour rien. */
.aps-block-filters .aps-filtres-bascule { text-shadow: none; }