/*
Theme Name:   MP Portfolio
Theme URI:    https://martinepoulain-photo.fr
Description:  Thème enfant de Twenty Twenty-Five pour le portfolio photographique de Martine Poulain. Fond blanc cassé chaud, titres Fraunces, texte Inter, accent turquoise.
Author:       Martine Poulain
Template:     twentytwentyfive
Version:      1.8.4
Requires at least: 6.7
Tested up to: 6.9
Requires PHP: 8.0
License:      GNU General Public License v2 or later
License URI:  http://www.gnu.org/licenses/gpl-2.0.html
Text Domain:  mp-portfolio-theme
*/

/* Dernière modification de ce fichier : 18/09/2026 */

/* ---------------------------------------------------------------------------
   1. Galerie en mosaïque
   ---------------------------------------------------------------------------
   Style de bloc « Mosaïque » ajouté au bloc Galerie (voir functions.php).
   Utilise les colonnes CSS : les images conservent leurs proportions,
   aucun rognage. Trois colonnes en écran large, deux en tablette,
   une seule sur mobile.
*/
/* Deux dispositions de galerie sont proposées, au choix dans le panneau
   Styles du bloc Galerie.

   « Mosaïque » (colonnes) est le réglage recommandé pour ce fonds, très
   majoritairement horizontal : chaque colonne est indépendante, une photo
   verticale n'affecte donc pas la taille des autres.

   « Rangées » (justifiées) remplit chaque ligne de bord à bord à hauteur
   constante. Plus spectaculaire, mais une verticale impose sa hauteur à toute
   la rangée et écrase les horizontales qui l'accompagnent. À réserver aux
   séries de formats homogènes.

   Dans les deux cas, la classe est répétée dans le sélecteur pour dépasser la
   spécificité du bloc natif, dont le « :not(#individual-image) » vaut celle
   d'un identifiant. */

/* --- Disposition 1 : colonnes ------------------------------------------- */

.wp-block-gallery.has-nested-images.is-style-mp-mosaique.is-style-mp-mosaique {
	/* Valeur par défaut, remplacée ci-dessous par le réglage « Colonnes »
	   du bloc Galerie, que WordPress traduit en classe columns-N. */
	--mp-colonnes: 3;

	display: block !important;
	column-count: var(--mp-colonnes);
	column-gap: 10px;
}

.wp-block-gallery.has-nested-images.is-style-mp-mosaique.is-style-mp-mosaique.columns-1 {
	--mp-colonnes: 1;
}

.wp-block-gallery.has-nested-images.is-style-mp-mosaique.is-style-mp-mosaique.columns-2 {
	--mp-colonnes: 2;
}

.wp-block-gallery.has-nested-images.is-style-mp-mosaique.is-style-mp-mosaique.columns-3 {
	--mp-colonnes: 3;
}

.wp-block-gallery.has-nested-images.is-style-mp-mosaique.is-style-mp-mosaique.columns-4 {
	--mp-colonnes: 4;
}

.wp-block-gallery.has-nested-images.is-style-mp-mosaique.is-style-mp-mosaique.columns-5 {
	--mp-colonnes: 5;
}

.wp-block-gallery.has-nested-images.is-style-mp-mosaique.is-style-mp-mosaique.columns-6 {
	--mp-colonnes: 6;
}

.wp-block-gallery.has-nested-images.is-style-mp-mosaique.is-style-mp-mosaique.columns-7 {
	--mp-colonnes: 7;
}

.wp-block-gallery.has-nested-images.is-style-mp-mosaique.is-style-mp-mosaique.columns-8 {
	--mp-colonnes: 8;
}

.wp-block-gallery.has-nested-images.is-style-mp-mosaique.is-style-mp-mosaique figure.wp-block-image,
.wp-block-gallery.has-nested-images.is-style-mp-mosaique.is-style-mp-mosaique figure.wp-block-image:not( #individual-image ) {
	display: block !important;
	width: 100% !important;
	max-width: 100% !important;
	flex: none !important;
	margin: 0 0 10px !important;
	break-inside: avoid;
	page-break-inside: avoid;
}

@media (max-width: 900px) {
	.wp-block-gallery.has-nested-images.is-style-mp-mosaique.is-style-mp-mosaique {
		/* min() plafonne sans jamais augmenter : une galerie réglée sur une
		   seule colonne en reste à une sur tablette. */
		column-count: min( 2, var(--mp-colonnes) ) !important;
		column-gap: 8px;
	}

	.wp-block-gallery.has-nested-images.is-style-mp-mosaique.is-style-mp-mosaique figure.wp-block-image {
		margin-bottom: 8px !important;
	}
}

@media (max-width: 600px) {
	.wp-block-gallery.has-nested-images.is-style-mp-mosaique.is-style-mp-mosaique {
		column-count: 1 !important;
	}
}

/* --- Disposition 2 : rangées justifiées --------------------------------- */

/* Le flex-basis et la croissance sont tous deux proportionnels au rapport
   largeur/hauteur (variable --mp-ratio, injectée au rendu par functions.php).
   Les photos d'une même rangée aboutissent donc à une hauteur identique.
   Aucune hauteur n'est imposée aux images : elle découle de la largeur, ce qui
   garantit qu'aucune photo n'est rognée.
   Le pseudo-élément ::after absorbe l'espace restant de la dernière rangée. */

.wp-block-gallery.has-nested-images.is-style-mp-rangees.is-style-mp-rangees {
	--mp-hauteur-rang: 260px;

	display: flex !important;
	flex-wrap: wrap;
	align-items: flex-start;
	gap: 10px;
}

.wp-block-gallery.has-nested-images.is-style-mp-rangees.is-style-mp-rangees::after {
	content: "";
	flex-grow: 999999;
	min-width: 0;
}

.wp-block-gallery.has-nested-images.is-style-mp-rangees.is-style-mp-rangees figure.wp-block-image,
.wp-block-gallery.has-nested-images.is-style-mp-rangees.is-style-mp-rangees figure.wp-block-image:not( #individual-image ) {
	display: block !important;
	width: auto !important;
	max-width: none !important;
	margin: 0 !important;
	flex-grow: var(--mp-ratio, 1.5) !important;
	flex-shrink: 1 !important;
	flex-basis: calc( var(--mp-ratio, 1.5) * var(--mp-hauteur-rang) ) !important;
}

@media (max-width: 900px) {
	.wp-block-gallery.has-nested-images.is-style-mp-rangees.is-style-mp-rangees {
		--mp-hauteur-rang: 180px;
		gap: 8px;
	}
}

@media (max-width: 600px) {
	.wp-block-gallery.has-nested-images.is-style-mp-rangees.is-style-mp-rangees {
		--mp-hauteur-rang: 130px;
		gap: 6px;
	}
}

/* --- Règles communes aux deux dispositions ------------------------------ */

.wp-block-gallery.has-nested-images.is-style-mp-mosaique.is-style-mp-mosaique figure.wp-block-image > a,
.wp-block-gallery.has-nested-images.is-style-mp-mosaique.is-style-mp-mosaique figure.wp-block-image > div,
.wp-block-gallery.has-nested-images.is-style-mp-rangees.is-style-mp-rangees figure.wp-block-image > a,
.wp-block-gallery.has-nested-images.is-style-mp-rangees.is-style-mp-rangees figure.wp-block-image > div {
	display: block !important;
	width: 100% !important;
	height: auto !important;
	margin: 0 !important;
}

.wp-block-gallery.has-nested-images.is-style-mp-mosaique.is-style-mp-mosaique figure.wp-block-image img,
.wp-block-gallery.has-nested-images.is-style-mp-rangees.is-style-mp-rangees figure.wp-block-image img {
	display: block !important;
	width: 100% !important;
	height: auto !important;
	max-width: none !important;
	object-fit: fill !important;
	vertical-align: bottom;
}

/* Légendes en surimpression, en bas de l'image.

   Placement absolu plutôt qu'en flux sous la photo : en disposition
   « Rangées », la largeur de chaque figure découle du seul rapport
   largeur/hauteur de l'image. Une légende en flux ajouterait une hauteur
   variable — une ou deux lignes selon le texte — et les photos d'une même
   rangée n'auraient plus la même hauteur, ce qui est justement la raison
   d'être de cette disposition.

   Le dégradé assure la lisibilité aussi bien sur un ciel clair que sur un
   fond sombre. Une image sans légende ne produit aucun bandeau : WordPress
   n'écrit alors pas de figcaption dans le HTML.

   Le texte alternatif reste à renseigner : il est distinct de la légende et
   c'est lui que lisent les lecteurs d'écran. */

.wp-block-gallery.has-nested-images.is-style-mp-mosaique.is-style-mp-mosaique figure.wp-block-image,
.wp-block-gallery.has-nested-images.is-style-mp-rangees.is-style-mp-rangees figure.wp-block-image {
	position: relative;
	overflow: hidden;
}

.wp-block-gallery.has-nested-images.is-style-mp-mosaique.is-style-mp-mosaique figure.wp-block-image figcaption,
.wp-block-gallery.has-nested-images.is-style-mp-rangees.is-style-mp-rangees figure.wp-block-image figcaption {
	display: block !important;
	position: absolute !important;
	right: 0 !important;
	bottom: 0 !important;
	left: 0 !important;
	box-sizing: border-box;
	max-height: 100%;
	margin: 0 !important;
	padding: 2.4em 0.9em 0.7em !important;
	overflow: hidden;
	background: linear-gradient(
		to top,
		rgba( 0, 0, 0, 0.62 ) 0%,
		rgba( 0, 0, 0, 0.30 ) 45%,
		rgba( 0, 0, 0, 0 ) 100%
	) !important;
	color: #fff !important;
	font-family: var(--wp--preset--font-family--texte);
	font-size: 0.75rem !important;
	font-style: normal;
	line-height: 1.45;
	text-align: left !important;
	text-shadow: 0 1px 2px rgba( 0, 0, 0, 0.5 );
}

/* Un lien dans une légende hériterait du turquoise foncé, illisible sur le
   dégradé sombre. */
.wp-block-gallery.has-nested-images.is-style-mp-mosaique.is-style-mp-mosaique figure.wp-block-image figcaption a,
.wp-block-gallery.has-nested-images.is-style-mp-rangees.is-style-mp-rangees figure.wp-block-image figcaption a {
	color: #fff !important;
	text-decoration: underline;
	text-underline-offset: 0.2em;
}

@media (max-width: 600px) {
	.wp-block-gallery.has-nested-images.is-style-mp-mosaique.is-style-mp-mosaique figure.wp-block-image figcaption,
	.wp-block-gallery.has-nested-images.is-style-mp-rangees.is-style-mp-rangees figure.wp-block-image figcaption {
		padding: 2em 0.7em 0.55em !important;
		font-size: 0.6875rem !important;
	}
}

/* ---------------------------------------------------------------------------
   2. Grille des projets
   ---------------------------------------------------------------------------
   Applique une transition discrète sur les vignettes des archives.
   Aucun effet de zoom : sur une photo, le mouvement distrait.
*/
.mp-grille-projets .wp-block-post-featured-image img {
	transition: opacity 220ms ease;
}

.mp-grille-projets .wp-block-post:hover .wp-block-post-featured-image img {
	opacity: 0.82;
}

/* Les titres de projet sont des liens : sans cette règle, ils héritent
   de la couleur des liens et s'affichent en turquoise. */
.mp-grille-projets .wp-block-post-title a,
.mp-grille-projets .wp-block-post-title a:visited {
	color: var(--wp--preset--color--contrast);
	text-decoration: none;
}

.mp-grille-projets .wp-block-post-title a:hover {
	color: var(--wp--preset--color--accent-fonce);
	text-decoration: underline;
	text-underline-offset: 0.25em;
}

/* Même correction pour les surtitres de genre et de contexte, soulignés
   par défaut parce que ce sont eux aussi des liens. */
.mp-surtitre a,
.mp-surtitre a:visited,
.wp-block-post-terms.mp-surtitre a {
	text-decoration: none;
}

.mp-surtitre a:hover {
	text-decoration: underline;
	text-underline-offset: 0.25em;
}

/* Couverture d'un projet, imposée au format 16:9.

   La règle vise la classe de corps « single-mpp_projet » en plus de la classe
   du gabarit : elle reste donc valable même si le gabarit venait à être
   personnalisé depuis l'éditeur de site.

   Le rognage est visuel, centré : le fichier d'origine n'est pas modifié.
   Pour revenir à une couverture entière, supprimer ce bloc et retirer
   "aspectRatio":"16/9" du bloc post-featured-image dans
   templates/single-mpp_projet.html. */
.single-mpp_projet .wp-block-post-featured-image img,
.mp-couverture img {
	width: 100%;
	aspect-ratio: 16 / 9;
	object-fit: cover;
	object-position: center;
	border-radius: 20px;
}

/* ---------------------------------------------------------------------------
   3. En-tête
   --------------------------------------------------------------------------- */

/* Le symbole du logo devient illisible en dessous d'environ 80 px :
   les feuilles et le cercle fin se referment. On le maintient à 52 px
   minimum et on laisse le nom porter l'identification. */
.mp-logo img {
	display: block;
	height: auto;
}

.mp-navigation a {
	text-decoration: none;
}

.mp-navigation a:hover {
	color: var(--wp--preset--color--accent);
}

/* ---------------------------------------------------------------------------
   4. Filets et titres de section
   --------------------------------------------------------------------------- */
.mp-surtitre {
	text-transform: uppercase;
	letter-spacing: 0.14em;
}

/* ---------------------------------------------------------------------------
   5. Planche de photos d'un genre
   ---------------------------------------------------------------------------
   Rendue par le bloc mpp/planche de l'extension, sur /genre/animalier/ etc.
   Même principe que la mosaïque : colonnes indépendantes, aucun rognage.
   Chaque vignette renvoie vers le projet dont la photo provient.
*/

.mp-planche {
	column-count: 3;
	column-gap: 10px;
}

.mp-planche .mp-planche-photo {
	position: relative;
	display: block;
	width: 100%;
	margin: 0 0 10px;
	overflow: hidden;
	border-radius: 20px;
	break-inside: avoid;
	page-break-inside: avoid;
}

.mp-planche .mp-planche-photo > a {
	display: block;
}

.mp-planche .mp-planche-photo img {
	display: block;
	width: 100%;
	height: auto;
	vertical-align: bottom;
	transition: opacity 220ms ease;
}

.mp-planche .mp-planche-photo > a:hover img {
	opacity: 0.82;
}

/* Légendes en surimpression, comme dans les galeries de projet. */
.mp-planche .mp-planche-photo figcaption {
	position: absolute;
	right: 0;
	bottom: 0;
	left: 0;
	box-sizing: border-box;
	max-height: 100%;
	margin: 0;
	padding: 2.4em 0.9em 0.7em;
	overflow: hidden;
	background: linear-gradient(
		to top,
		rgba( 0, 0, 0, 0.62 ) 0%,
		rgba( 0, 0, 0, 0.30 ) 45%,
		rgba( 0, 0, 0, 0 ) 100%
	);
	color: #fff;
	font-family: var(--wp--preset--font-family--texte);
	font-size: 0.75rem;
	line-height: 1.45;
	text-align: left;
	text-shadow: 0 1px 2px rgba( 0, 0, 0, 0.5 );
	pointer-events: none;
}

@media (max-width: 900px) {
	.mp-planche {
		column-count: 2;
		column-gap: 8px;
	}

	.mp-planche .mp-planche-photo {
		margin-bottom: 8px;
	}
}

@media (max-width: 600px) {
	.mp-planche {
		column-count: 1;
	}

	.mp-planche .mp-planche-photo figcaption {
		padding: 2em 0.7em 0.55em;
		font-size: 0.6875rem;
	}
}

.mp-planche-vide {
	color: var(--wp--preset--color--contrast-2);
}

.mp-planche-pagination {
	margin-top: var(--wp--preset--spacing--60);
}

.mp-planche-pagination ul {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
	margin: 0;
	padding: 0;
	list-style: none;
	font-size: var(--wp--preset--font-size--petit);
}

.mp-planche-pagination a {
	text-decoration: none;
}

.mp-planche-pagination a:hover {
	text-decoration: underline;
	text-underline-offset: 0.25em;
}

.mp-planche-pagination .current {
	color: var(--wp--preset--color--contrast-3);
}

@media (prefers-reduced-motion: reduce) {
	.mp-planche .mp-planche-photo img {
		transition: none;
	}
}

/* ---------------------------------------------------------------------------
   6. Accessibilité
   ---------------------------------------------------------------------------
   Contour de focus visible au clavier. Le thème parent en fournit un,
   mais il disparaît sur les liens d'image.
*/
a:focus-visible,
button:focus-visible {
	outline: 2px solid var(--wp--preset--color--accent);
	outline-offset: 3px;
}

/* Respect de la préférence système « réduire les animations ». */
@media (prefers-reduced-motion: reduce) {
	.mp-grille-projets .wp-block-post-featured-image img {
		transition: none;
	}
}

/* ---------------------------------------------------------------------------
   7. Tuiles de genre — page d'accueil
   ---------------------------------------------------------------------------
   Blocs Bannière (core/cover) placés dans deux blocs Colonnes portant la
   classe mp-genres.

   Le voile uniforme de la Bannière est supprimé : il ternit la photo sur toute
   sa surface pour ne servir qu'au libellé. Un dégradé localisé en bas de tuile
   le remplace, comme dans les galeries et les planches de genre.

   Le lien est étiré sur toute la tuile plutôt que sur le seul mot : une tuile
   de 400 px de haut dont dix caractères sont cliquables est une cible pauvre,
   au doigt comme à la souris. Conséquence : tout autre texte présent dans le
   paragraphe passerait sous le lien. Ces tuiles ne contiennent que leur
   libellé. */

.mp-genres .wp-block-cover {
	position: relative;
	overflow: hidden;
}

/* Voile uniforme retiré. */
.mp-genres .wp-block-cover .wp-block-cover__background {
	display: none !important;
}

/* Le conteneur interne cesse d'être positionné : la tuile devient le bloc
   conteneur du lien étiré ci-dessous. */
.mp-genres .wp-block-cover .wp-block-cover__inner-container {
	position: static;
}

.mp-genres .wp-block-cover .wp-block-cover__inner-container p {
	margin: 0;
}

.mp-genres .wp-block-cover .wp-block-cover__inner-container a,
.mp-genres .wp-block-cover .wp-block-cover__inner-container a:visited {
	position: absolute;
	inset: 0;
	z-index: 2;
	display: flex;
	align-items: flex-end;
	justify-content: flex-start;
	box-sizing: border-box;
	padding: 0.9em;
	background: linear-gradient(
		to top,
		rgba( 0, 0, 0, 0.62 ) 0%,
		rgba( 0, 0, 0, 0.30 ) 30%,
		rgba( 0, 0, 0, 0 ) 60%
	);
	color: #fff !important;
	font-family: var(--wp--preset--font-family--texte);
	font-size: 0.8125rem;
	font-weight: 500;
	letter-spacing: 0.14em;
	text-decoration: none !important;
	text-shadow: 0 1px 2px rgba( 0, 0, 0, 0.5 );
	text-transform: uppercase;
}

.mp-genres .wp-block-cover .wp-block-cover__image-background {
	transition: opacity 220ms ease;
}

.mp-genres .wp-block-cover:hover .wp-block-cover__image-background {
	opacity: 0.88;
}

@media (prefers-reduced-motion: reduce) {
	.mp-genres .wp-block-cover .wp-block-cover__image-background {
		transition: none;
	}
}

/* ---------------------------------------------------------------------------
   8. Photos de la page Portfolios
   ---------------------------------------------------------------------------
   Blocs Média-Texte natifs (wp-block-media-text__media). Règle générique sur
   la classe du bloc core : s'appliquera à tout autre Média-Texte ajouté
   ailleurs sur le site, pas seulement aux six blocs de cette page. */
.wp-block-media-text__media img {
	border-radius: 20px;
}