/*
 * mf-folco — ce que ni le cœur ni le socle ne savent faire.
 *
 * Chaque règle dit pourquoi elle existe. Classes préfixées `mfo-`, aucune
 * primitive du socle redéfinie (ARCHITECTURE du socle, règle 8).
 * Chargée après `mf-main` en façade, et déclarée à l'éditeur (§13.1).
 */

/* ------------------------------------------------------------------
   Captures des réalisations
   ------------------------------------------------------------------

   Les captures sont des pages entières, en portrait (450 × 919). Une carte
   les montre en 3:4 : `core/post-featured-image` sait recadrer (aspectRatio,
   `object-fit: cover`) mais pas choisir le point focal, et il centre. On veut
   le haut de page — l'en-tête et le premier écran du site livré. */
.mfo-capture img {
	object-position: top;
}

/* ------------------------------------------------------------------
   Parallaxe de l'image d'une Bannière
   ------------------------------------------------------------------

   Le mode `mf-parallax--bg` du socle déplace un `background-image` CSS. Une
   Bannière (`core/cover`) porte son image dans un <img> : rien ne bouge. Le
   socle prévoit ce cas avec `mf-parallax--custom` — il mesure et fournit
   `--mf-parallax-bg-y` (borné pour ne jamais découvrir un bord), l'enfant
   l'applique. Ici : à l'`object-position` de l'image, ou de la vidéo de fond
   (hero sur ordinateur). Posée sur toutes les Bannières à image du site.
   Usage : `mf-parallax mf-parallax--custom mfo-parallax-cover` sur la Bannière.
   Garde `:where()` à poids nul : rien ne bouge sans le script (éditeur, sans
   JS) ; mouvement réduit géré par le socle (décalage ramené à zéro). */
:where(.mf-parallax-ready) .mfo-parallax-cover > :is(.wp-block-cover__image-background, .wp-block-cover__video-background) {
	object-position: 50% var(--mf-parallax-bg-y);
}

/* ------------------------------------------------------------------
   Forme orange derrière un visuel
   ------------------------------------------------------------------

   Reprise du « nectar_animated_shape » de Salient : une forme organique de
   l'orange de marque, derrière l'image de « Qui suis-je ? », qui grandit quand
   la colonne apparaît. Décorative : un pseudo-élément, rien dans le balisage.
   Posée sur un enfant de `mf-reveal-stagger` (ou sur un `mf-reveal`), elle
   suit la classe `is-visible` du script du socle ; sans lui, elle est là,
   immobile. */
.mfo-forme {
	position: relative;
	isolation: isolate;
}

.mfo-forme::before {
	content: "";
	position: absolute;
	z-index: -1;
	inset: 4% 2% -6% 16%;
	background: var(--wp--preset--color--accent-primary-light);
	border-radius: 62% 38% 46% 54% / 55% 48% 52% 45%;
}

:where(.mf-reveal-ready) .mfo-forme::before {
	opacity: 0;
	scale: 0.4;
	transition:
		opacity 0.6s ease 0.2s,
		scale 1.1s var(--wp--custom--reveal--easing) 0.2s;
}

:where(.mf-reveal-ready) .mfo-forme.is-visible::before {
	opacity: 1;
	scale: 1;
}

@media (prefers-reduced-motion: reduce) {
	.mfo-forme::before {
		transition: none;
	}
}

/* ------------------------------------------------------------------
   Bouton « Secondaire »
   ------------------------------------------------------------------

   Variante de bloc de l'enfant (functions.php), à côté du bouton principal
   réglé dans theme.json (orange vif, texte blanc). Les variantes du socle ne
   conviennent pas au contenu de ce site : `mf-dark` est le petit CTA d'en-tête
   (12,5 px), `outline` un filet gris d'1 px. Plutôt que de redéfinir ces
   primitives (règle 8), une variante à soi.

   Même boîte que le bouton principal (padding et taille de theme.json) : le
   filet est un `box-shadow` inset, qui n'ajoute rien aux dimensions, et les
   deux boutons côte à côte ont la même hauteur. Au survol, il se remplit. Sur
   fond sombre (bande sombre, Bannière sombre), il passe en blanc. */
.wp-block-button.is-style-mfo-secondaire > .wp-block-button__link {
	background: transparent;
	color: var(--wp--preset--color--accent-primary);
	box-shadow: inset 0 0 0 2px currentcolor;
	transition: background-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
}

.wp-block-button.is-style-mfo-secondaire > .wp-block-button__link:hover,
.wp-block-button.is-style-mfo-secondaire > .wp-block-button__link:focus-visible,
.wp-block-button.is-style-mfo-secondaire > .wp-block-button__link[aria-current="page"] {
	background: var(--wp--preset--color--accent-primary);
	color: var(--wp--preset--color--bg-surface);
	box-shadow: inset 0 0 0 2px var(--wp--preset--color--accent-primary);
}

:where(.has-bg-dark-background-color, .wp-block-cover:not(.is-light)) .wp-block-button.is-style-mfo-secondaire > .wp-block-button__link:not(:hover):not(:focus-visible) {
	color: var(--wp--preset--color--text-title-dark);
}

/* Bouton principal : léger soulèvement au survol, en plus du changement de fond
   de theme.json. `translate`, qui se compose avec un éventuel `transform`. */
.wp-block-button__link {
	transition: background-color 0.2s ease, color 0.2s ease, translate 0.2s ease;
}

.wp-block-button__link:hover {
	translate: 0 -2px;
}

@media (prefers-reduced-motion: reduce) {
	.wp-block-button__link:hover {
		translate: none;
	}
}

/* ------------------------------------------------------------------
   Pied de page
   ------------------------------------------------------------------

   Le socle colore tout lien posé sur un fond sombre en orange
   (`.has-bg-dark-background-color a`) : sur quatre colonnes de liens, le pied
   de page devient une nappe orange. Ici, les listes restent claires et
   s'allument en orange au survol ; l'orange garde son rôle de signal. Portée
   limitée à la classe du pied de page, `.mfo-pied`. */
.mfo-pied .mf-footer__list a,
.mfo-pied .wp-block-group:last-child a {
	color: var(--wp--preset--color--text-list-dark);
	transition: color 0.2s ease;
}

.mfo-pied .mf-footer__list a:hover,
.mfo-pied .mf-footer__list a:focus-visible,
.mfo-pied .wp-block-group:last-child a:hover,
.mfo-pied .wp-block-group:last-child a:focus-visible {
	color: var(--wp--preset--color--accent-primary-light);
}

.mfo-pied .mf-footer__list li + li {
	margin-block-start: var(--wp--preset--spacing--30);
}

/* Icônes des réseaux : discrètes, orange au survol. */
.mfo-pied .wp-block-social-link a {
	transition: color 0.2s ease;
}

.mfo-pied .wp-block-social-link:hover a {
	color: var(--wp--preset--color--accent-primary-light);
}

/* ------------------------------------------------------------------
   « Vitrine » — le langage de l'image de partage
   ------------------------------------------------------------------

   Repris de docs/image-partage (validé par Mathieu le 27/10/2026) : fond sombre,
   grande forme orange organique à droite, halo orange en bas à gauche, et des
   captures de sites en cadres blancs inclinés, ombrés. Trois classes :

   - `mfo-vitrine` (sur une bande sombre) : la forme et le halo, en pseudo-
     éléments derrière le contenu (`isolation` : ils restent au-dessus du fond
     de la bande, sous son contenu).
   - `mfo-captures` (sur un Groupe de trois Images) : l'éventail du bandeau.
   - `mfo-cadres` (sur un Modèle de publication) : les cartes de réalisations
     encadrées, légèrement inclinées, qui se redressent au survol.

   Décoratif seulement : aucun texte, aucun lien n'en dépend. */
.mfo-vitrine {
	position: relative;
	isolation: isolate;
	overflow: hidden;
}

.mfo-vitrine::before {
	content: "";
	position: absolute;
	z-index: -1;
	inline-size: min(58vw, 780px);
	aspect-ratio: 1;
	inset-inline-end: max(-14vw, -200px);
	inset-block-start: 12%;
	background: var(--wp--preset--color--accent-primary-light);
	border-radius: 62% 38% 46% 54% / 55% 48% 52% 45%;
}

.mfo-vitrine::after {
	content: "";
	position: absolute;
	z-index: -1;
	inset: 0;
	background: radial-gradient(70% 60% at 0% 100%, color-mix(in srgb, var(--wp--preset--color--accent-primary) 20%, transparent), transparent 62%);
	pointer-events: none;
}

/* La forme passe derrière les cartes, pas derrière le texte : sur une bande à
   texte centré (Réalisations), elle descend vers le bas. */
.mfo-vitrine:not(.mf-hero)::before {
	inset-block-start: 38%;
	inline-size: min(70vw, 900px);
}

/* Cadre commun : bordure blanche, coins 18 px, ombre portée. */
.mfo-captures > .wp-block-image img,
.mfo-cadres .wp-block-post-featured-image {
	border: 6px solid var(--wp--preset--color--bg-surface);
	border-radius: 18px;
	box-shadow: 0 30px 60px -20px rgb(0 0 0 / 0.55);
	overflow: hidden;
}

/* Un seul arrondi : celui du cadre. Le socle arrondit aussi l'image
   (`main .wp-block-post-featured-image img`, radius.floating) et le lien qui
   découpe le zoom (`.is-style-mf-hover-zoom > a`) : à l'intérieur d'un cadre
   de 6 px, ces rayons ne suivent pas le contour intérieur (18 − 6 = 12 px) et
   dessinent un second arrondi décalé. Sous les classes de l'enfant, on les
   ramène à 0 : c'est l'`overflow: hidden` du cadre qui découpe l'image et son
   zoom, au rayon intérieur exact. Les primitives du socle ne changent pas
   ailleurs (règle 8). */
.mfo-cadres .wp-block-post-featured-image.is-style-mf-hover-zoom > a,
.mfo-cadres .wp-block-post-featured-image.is-style-mf-hover-zoom:not(:has(> a)),
.mfo-cadres .wp-block-post-featured-image img,
.mfo-capture.wp-block-post-featured-image img {
	border-radius: 0;
}

/* Éventail du bandeau : trois captures superposées. Les proportions sont
   celles de l'image de partage ; tout est en pourcentage de la colonne, donc
   l'éventail se réduit avec elle. */
.mfo-captures {
	position: relative;
	min-block-size: clamp(320px, 38vw, 520px);
}

.mfo-captures > .wp-block-image {
	position: absolute;
	inline-size: 42%;
	margin: 0;
}

.mfo-captures > .wp-block-image img {
	display: block;
	inline-size: 100%;
	block-size: auto;
	aspect-ratio: 23 / 34;
	object-fit: cover;
	object-position: top;
}

.mfo-captures > :nth-child(1) {
	inset-inline-start: 0;
	inset-block-start: 14%;
	rotate: -7deg;
}

.mfo-captures > :nth-child(2) {
	z-index: 2;
	inset-inline-start: 29%;
	inset-block-start: 0;
	inline-size: 46%;
	rotate: 3deg;
}

.mfo-captures > :nth-child(3) {
	inset-inline-end: 0;
	inset-block-start: 20%;
	rotate: 9deg;
}

/* Cartes de réalisations : une inclinaison par colonne, comme l'éventail, qui
   s'annule au survol (la carte se redresse et monte ; le zoom de l'image vient
   du socle). `rotate` et `translate` : propriétés individuelles, elles se
   composent avec le `transform` de l'apparition au lieu de le remplacer. */
.mfo-cadres .wp-block-post-featured-image {
	transition: rotate 0.45s ease, translate 0.45s ease, box-shadow 0.45s ease;
}

.mfo-cadres > li:nth-child(3n + 1) .wp-block-post-featured-image {
	rotate: -2deg;
}

.mfo-cadres > li:nth-child(3n + 2) .wp-block-post-featured-image {
	rotate: 1.5deg;
}

.mfo-cadres > li:nth-child(3n) .wp-block-post-featured-image {
	rotate: -1deg;
}

.mfo-cadres > li:hover .wp-block-post-featured-image,
.mfo-cadres > li:focus-within .wp-block-post-featured-image {
	rotate: 0deg;
	translate: 0 -8px;
	box-shadow: 0 40px 70px -24px rgb(0 0 0 / 0.6);
}

/* Sur fond clair, l'ombre et le cadre suffisent : ombre plus douce. */
:where(:not(.has-bg-dark-background-color)) > .wp-block-query .mfo-cadres .wp-block-post-featured-image {
	box-shadow: 0 24px 48px -22px rgb(0 0 0 / 0.35);
}

@media (prefers-reduced-motion: reduce) {
	.mfo-cadres .wp-block-post-featured-image {
		transition: none;
	}
}