/**
 * Amélimón — styles du site public.
 *
 * Les couleurs, tailles et polices viennent de theme.json (variables
 * --wp--preset--*). Ce fichier ne contient que ce que theme.json ne sait pas
 * exprimer : la mise en page de l'en-tête, les blocs dynamiques du thème et
 * les animations.
 */

/* -------------------------------------------------------------------------
 * Bases
 * ---------------------------------------------------------------------- */

:root {
	--amelimon-header-height: 80px;
	--amelimon-transition: all 0.25s cubic-bezier(0.165, 0.84, 0.44, 1);
}

html {
	scroll-behavior: smooth;
	/* L'en-tête est fixe : les ancres ne doivent pas se glisser dessous. */
	scroll-padding-top: calc(var(--amelimon-header-height) + 20px);
}

@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}

	*,
	*::before,
	*::after {
		animation-duration: 0.001ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.001ms !important;
	}
}

body {
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	overflow-x: hidden;
}

img,
video {
	max-width: 100%;
	height: auto;
}

.screen-reader-text {
	border: 0;
	clip-path: inset(50%);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute;
	white-space: nowrap;
	width: 1px;
}

.screen-reader-text:focus {
	background: var(--wp--preset--color--base);
	clip-path: none;
	color: var(--wp--preset--color--ink);
	display: block;
	font-size: 14px;
	height: auto;
	left: 5px;
	padding: 15px 23px;
	top: 5px;
	width: auto;
	z-index: 100000;
}

a {
	transition: var(--amelimon-transition);
}

/* -------------------------------------------------------------------------
 * En-tête
 * ---------------------------------------------------------------------- */

/* Le site d'origine encadre la page de deux bandes blanches de 60 px (ses
   « site bars ») : l'en-tête garde toute la largeur mais rentre son contenu,
   le corps et le pied de page sont décalés par des marges. En dessous de
   1025 px l'original passe pleine largeur, on fait pareil. */
@media (min-width: 1025px) {
	.wp-site-blocks > main,
	.wp-site-blocks > footer {
		margin-left: 60px;
		margin-right: 60px;
	}

	.amelimon-header {
		padding-left: 60px;
		padding-right: 60px;
	}
}

/* Le collant se pose sur l'enveloppe de la partie de gabarit, pas sur la barre
   elle-même : un élément « sticky » ne colle que dans la boîte de son parent,
   et ce parent-là ne fait que la hauteur de la barre — elle repartait donc
   avec la page. Sur .wp-site-blocks, la boîte est celle de toute la page. */
.wp-site-blocks > header {
	position: sticky;
	top: 0;
	z-index: 101;
}

.amelimon-header {
	align-items: center;
	background: var(--wp--preset--color--base);
	display: flex;
	justify-content: space-between;
	left: 0;
	min-height: var(--amelimon-header-height);
	padding: 15px 20px;
	width: 100%;
	z-index: 101;
}

.amelimon-header .wp-block-site-logo img {
	max-height: 50px;
	width: auto;
}

/* Reprend la barre du site d'origine : Sora 16 px, gras, capitales, noir, et
   le jaune de la marque au survol, amené par la même courbe d'accélération. */
.amelimon-header .wp-block-navigation {
	font-family: var(--wp--preset--font-family--sora);
	font-size: 16px;
	font-weight: 700;
	line-height: 1;
	text-transform: uppercase;
}

/* Le bloc Navigation du cœur pose « color: inherit » sur ses liens : sans
   viser sa propre classe, la barre reprenait le noir du corps de texte au lieu
   de l'encre #151515 du site d'origine. */
.amelimon-header .wp-block-navigation a.wp-block-navigation-item__content {
	color: var(--wp--preset--color--ink);
	padding: 10px 0;
	text-decoration: none;
	transition: var(--amelimon-transition);
}

.amelimon-header .wp-block-navigation a:hover,
.amelimon-header .wp-block-navigation a:focus-visible,
.amelimon-header .wp-block-navigation .current-menu-item > a,
.amelimon-header .wp-block-navigation .current-menu-ancestor > a {
	color: var(--wp--preset--color--accent);
}

/* Sous-menu déroulant : fond noir, liens blancs de 12 px, comme l'original. */
.amelimon-header .wp-block-navigation .wp-block-navigation__submenu-container {
	background: var(--wp--preset--color--base);
	border: 0;
	font-family: var(--wp--preset--font-family--body);
	font-weight: 400;
	line-height: 1.6;
	min-width: 200px;
	padding: 17px 25px;
	text-align: left;
	text-transform: none;
	transition: none;
}

.amelimon-header .wp-block-navigation .wp-block-navigation__submenu-container a {
	color: #909090;
	display: block;
	font-family: var(--wp--preset--font-family--body);
	font-size: 12px;
	font-weight: 400;
	line-height: 2;
	opacity: 0;
	padding: 0;
	text-transform: uppercase;
	transform: translateX(10px);
	transition: var(--amelimon-transition);
}

/* Les liens entrent en glissant de 10 px vers la gauche, comme sur l'original. */
.amelimon-header .wp-block-navigation li:hover > .wp-block-navigation__submenu-container a,
.amelimon-header .wp-block-navigation li:focus-within > .wp-block-navigation__submenu-container a {
	opacity: 1;
	transform: translateX(0);
}

.amelimon-header .wp-block-navigation .wp-block-navigation__submenu-container a:hover,
.amelimon-header .wp-block-navigation .wp-block-navigation__submenu-container a:focus-visible {
	color: var(--wp--preset--color--accent);
}

/* Le bloc Navigation ne bascule en menu burger qu'à 600 px. Avec six entrées
   plus la marque et le sélecteur de langue, l'en-tête se coupait en deux bien
   avant : on resserre d'abord le menu, puis on avance le passage au burger à
   1024 px en reprenant les deux règles que le cœur applique à 600 px. */
@media (max-width: 1180px) {
	.amelimon-header .wp-block-navigation.is-layout-flex {
		font-size: 12px;
		gap: 16px;
	}
}

@media (max-width: 1023px) {
	.amelimon-header .wp-block-navigation__responsive-container-open:not(.always-shown) {
		display: flex;
	}

	.amelimon-header .wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) {
		display: none;
	}
}

/* -------------------------------------------------------------------------
 * Sélecteur de langue
 * ---------------------------------------------------------------------- */

/* Marque de l'en-tête : le logo rond, le nom et la baseline côte à côte, comme
   le lockup « Amélimón • Video Mapping, 2D Animation & Illustration » du site
   d'origine. La baseline tombe la première quand la barre devient étroite. */
.amelimon-brand {
	align-items: center;
	flex-wrap: nowrap;
	min-width: 0;
}

.amelimon-brand .wp-block-site-logo {
	line-height: 0;
}

.amelimon-brand__name,
.amelimon-brand__name a {
	color: var(--wp--preset--color--ink);
	font-size: 22px;
	font-weight: 700;
	line-height: 1.2;
	text-decoration: none;
	white-space: nowrap;
}

.amelimon-brand__tagline {
	color: var(--wp--preset--color--ink);
	font-size: 16px;
	font-weight: 400;
	line-height: 1.2;
	margin: 0;
	white-space: nowrap;
}

@media (max-width: 1180px) {
	.amelimon-brand__tagline {
		display: none;
	}
}

@media (max-width: 600px) {
	.amelimon-brand__name,
	.amelimon-brand__name a {
		font-size: 14px;
	}
}

.amelimon-lang {
	display: flex;
	gap: 10px;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.05em;
}

.amelimon-lang a {
	color: var(--wp--preset--color--ink-soft);
	text-decoration: none;
}

.amelimon-lang a:hover,
.amelimon-lang a.is-active {
	color: var(--wp--preset--color--ink);
}

.amelimon-lang a.is-active {
	text-decoration: underline;
	text-underline-offset: 4px;
}

.amelimon-lang__select {
	border: 1px solid currentColor;
	border-radius: 23px;
	background: transparent;
	color: inherit;
	cursor: pointer;
	font: inherit;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.05em;
	padding: 6px 10px;
}

.amelimon-lang--select {
	display: flex;
}

/* Liste déroulante à drapeaux. Le survol et le focus suffisent à l'ouvrir :
   le JavaScript n'ajoute que le clic, pour le tactile. */
.amelimon-lang--dropdown {
	display: block;
	position: relative;
}

.amelimon-lang__toggle {
	align-items: center;
	background: none;
	border: 0;
	color: var(--wp--preset--color--ink);
	cursor: pointer;
	display: flex;
	font: inherit;
	font-size: 13px;
	font-weight: 700;
	gap: 6px;
	letter-spacing: 0.05em;
	padding: 6px 2px;
}

.amelimon-lang__flag {
	border: 1px solid rgba(21, 21, 21, 0.12);
	display: block;
	height: 14px;
	object-fit: cover;
	width: 20px;
}

.amelimon-lang__caret {
	transition: var(--amelimon-transition);
}

.amelimon-lang--dropdown.is-open .amelimon-lang__caret {
	transform: rotate(180deg);
}

.amelimon-lang__menu {
	background: var(--wp--preset--color--contrast);
	list-style: none;
	margin: 0;
	min-width: 170px;
	opacity: 0;
	padding: 12px 0;
	position: absolute;
	right: 0;
	top: 100%;
	transform: translateY(-6px);
	transition: var(--amelimon-transition);
	visibility: hidden;
	z-index: 120;
}

.amelimon-lang--dropdown:hover .amelimon-lang__menu,
.amelimon-lang--dropdown:focus-within .amelimon-lang__menu,
.amelimon-lang--dropdown.is-open .amelimon-lang__menu {
	opacity: 1;
	transform: translateY(0);
	visibility: visible;
}

.amelimon-lang__menu a {
	align-items: center;
	color: var(--wp--preset--color--base);
	display: flex;
	font-size: 12px;
	gap: 10px;
	line-height: 2;
	padding: 2px 20px;
	text-decoration: none;
	transition: var(--amelimon-transition);
	white-space: nowrap;
}

.amelimon-lang__menu a:hover,
.amelimon-lang__menu a:focus-visible,
.amelimon-lang__menu a.is-active {
	color: var(--wp--preset--color--accent);
}

/* -------------------------------------------------------------------------
 * Fil d'Ariane
 * ---------------------------------------------------------------------- */

.amelimon-breadcrumb__list {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	list-style: none;
	margin: 0;
	padding: 0;
	font-size: 13px;
	color: var(--wp--preset--color--ink-soft);
}

.amelimon-breadcrumb__item + .amelimon-breadcrumb__item::before {
	content: "/";
	margin-right: 8px;
	opacity: 0.5;
}

.amelimon-breadcrumb a {
	color: inherit;
	text-decoration: none;
}

.amelimon-breadcrumb a:hover {
	text-decoration: underline;
}

/* -------------------------------------------------------------------------
 * Bandeau vidéo
 * ---------------------------------------------------------------------- */

/* Pas de width fixe : le bloc est en pleine largeur (alignfull), et WordPress
   la lui donne par des marges négatives. Un width:100% se calculerait, lui, sur
   la largeur déjà rognée du conteneur, et laissait une bande blanche à droite. */
.amelimon-hero {
	background: var(--wp--preset--color--contrast);
	height: var(--amelimon-hero-height, 100vh);
	overflow: hidden;
	position: relative;
}

.amelimon-hero__video,
.amelimon-hero__poster,
.amelimon-hero__frame {
	height: 100%;
	left: 0;
	object-fit: cover;
	position: absolute;
	top: 0;
	width: 100%;
	border: 0;
}

.amelimon-hero__facade {
	cursor: pointer;
	height: 100%;
	position: relative;
	width: 100%;
}

.amelimon-hero__play {
	background: none;
	border: 0;
	color: var(--wp--preset--color--ink);
	cursor: pointer;
	left: 50%;
	padding: 0;
	position: absolute;
	top: 50%;
	transform: translate(-50%, -50%);
	transition: var(--amelimon-transition);
}

.amelimon-hero__play:hover,
.amelimon-hero__play:focus-visible {
	color: var(--wp--preset--color--accent);
	transform: translate(-50%, -50%) scale(1.08);
}

/* Mode « immédiat » : l'affiche occupe le cadre derrière l'iframe le temps que
   le lecteur démarre, plutôt qu'un rectangle noir. */
.amelimon-hero__poster--behind {
	z-index: 0;
}

.amelimon-hero__frame {
	z-index: 1;
}

/* Une fois le lecteur injecté, la façade s'efface. */
.amelimon-hero.is-playing .amelimon-hero__play,
.amelimon-hero.is-playing .amelimon-hero__poster {
	display: none;
}

/* -------------------------------------------------------------------------
 * Grille portfolio
 * ---------------------------------------------------------------------- */

.amelimon-portfolio__filter {
	display: flex;
	flex-wrap: wrap;
	gap: 20px;
	justify-content: center;
	padding: 30px 20px;
}

/* Le filtre du site d'origine : capitales de 18 px en graisse normale, à demi
   effacées, qu'un gros trait jaune vient surligner. */
.amelimon-portfolio__filter-btn {
	background: none;
	border: 0;
	color: #333;
	cursor: pointer;
	font-family: var(--wp--preset--font-family--sora);
	font-size: 15px;
	font-weight: 400;
	line-height: 1.6;
	opacity: 0.5;
	padding: 0;
	position: relative;
	text-transform: uppercase;
	transition: var(--amelimon-transition);
	z-index: 1;
}

/* Le trait part de la gauche et se déploie : c'est la mise à l'échelle
   horizontale qui s'anime, pas la largeur, donc rien n'est recalculé. Il passe
   derrière le texte (z-index négatif) et le traverse au tiers bas. */
.amelimon-portfolio__filter-btn::before {
	background: var(--wp--preset--color--accent);
	content: '';
	height: 6px;
	left: 0;
	position: absolute;
	top: 60%;
	transform: scale(0, 1);
	transform-origin: left center;
	transition: transform 0.25s cubic-bezier(0.165, 0.84, 0.44, 1);
	width: 100%;
	will-change: transform;
	z-index: -1;
}

/* Le nombre de projets, en exposant, comme sur l'original. */
.amelimon-portfolio__filter-btn[data-count]::after {
	content: attr(data-count);
	font-size: 12px;
	font-weight: 400;
	margin-left: 5px;
	vertical-align: super;
}

.amelimon-portfolio__filter-btn:hover,
.amelimon-portfolio__filter-btn:focus-visible,
.amelimon-portfolio__filter-btn.is-active {
	opacity: 1;
}

.amelimon-portfolio__filter-btn:hover::before,
.amelimon-portfolio__filter-btn:focus-visible::before,
.amelimon-portfolio__filter-btn.is-active::before {
	transform: scale(1, 1);
}

.amelimon-portfolio__select {
	display: none;
	width: 100%;
	padding: 10px;
	font: inherit;
	font-size: 16px;
	margin-bottom: 20px;
}

.amelimon-portfolio__grid {
	display: grid;
	gap: 4px;
	grid-template-columns: repeat(var(--amelimon-portfolio-cols, 4), 1fr);
	list-style: none;
	margin: 0;
	padding: 0;
}

.amelimon-portfolio--cols-1 { --amelimon-portfolio-cols: 1; }
.amelimon-portfolio--cols-2 { --amelimon-portfolio-cols: 2; }
.amelimon-portfolio--cols-3 { --amelimon-portfolio-cols: 3; }
.amelimon-portfolio--cols-4 { --amelimon-portfolio-cols: 4; }
.amelimon-portfolio--cols-5 { --amelimon-portfolio-cols: 5; }
.amelimon-portfolio--cols-6 { --amelimon-portfolio-cols: 6; }

.amelimon-portfolio__item[hidden] {
	display: none;
}

.amelimon-portfolio__link {
	display: block;
	position: relative;
	overflow: hidden;
	text-decoration: none;
}

/* WordPress ne recadre pas une image plus petite que la taille demandée : la
   vignette sort alors en 760×600 au lieu de 760×700 et la rangée se décale.
   Le rapport est donc imposé ici, comme sur la grille régulière d'origine. */
.amelimon-portfolio__media {
	aspect-ratio: 760 / 700;
	margin: 0;
	overflow: hidden;
}

.amelimon-portfolio__media img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.6s cubic-bezier(0.165, 0.84, 0.44, 1);
}

.amelimon-portfolio__link:hover .amelimon-portfolio__media img {
	transform: scale(1.05);
}

/* Survol d'une vignette, relevé sur le site d'origine : un voile blanc à 90 %
   couvre l'image, et le titre puis la catégorie remontent de 50 px en
   apparaissant. Le voile et les textes ont leur propre durée — 1 s pour le
   fond, 0,25 s pour le texte — ce qui donne le décalage qu'on voit là-bas. */
.amelimon-portfolio__caption {
	align-items: center;
	background: rgba(255, 255, 255, 0.9);
	display: flex;
	flex-direction: column;
	inset: 0;
	justify-content: center;
	opacity: 0;
	padding: 20px;
	position: absolute;
	text-align: center;
	transition: opacity 1s cubic-bezier(0.165, 0.84, 0.44, 1);
}

.amelimon-portfolio__link:hover .amelimon-portfolio__caption,
.amelimon-portfolio__link:focus-visible .amelimon-portfolio__caption {
	opacity: 1;
}

.amelimon-portfolio__title,
.amelimon-portfolio__cats {
	opacity: 0;
	transform: translateY(50px);
	transition: var(--amelimon-transition);
}

.amelimon-portfolio__link:hover .amelimon-portfolio__title,
.amelimon-portfolio__link:hover .amelimon-portfolio__cats,
.amelimon-portfolio__link:focus-visible .amelimon-portfolio__title,
.amelimon-portfolio__link:focus-visible .amelimon-portfolio__cats {
	opacity: 1;
	transform: translateY(0);
}

.amelimon-portfolio__title {
	color: var(--wp--preset--color--ink);
	font-family: var(--wp--preset--font-family--sora);
	font-size: 34px;
	font-weight: 600;
	letter-spacing: 1.7px;
	line-height: 1.1;
	margin: 0 0 6px;
	text-transform: uppercase;
}

.amelimon-portfolio__cats {
	color: var(--wp--preset--color--ink);
	font-family: var(--wp--preset--font-family--body);
	font-size: 12px;
	letter-spacing: normal;
	line-height: 1.4;
	margin: 0;
	text-transform: uppercase;
}

/* -------------------------------------------------------------------------
 * Grille de services
 * ---------------------------------------------------------------------- */

.amelimon-services {
	display: grid;
	gap: 10px;
	grid-template-columns: repeat(var(--amelimon-services-cols, 5), 1fr);
	list-style: none;
	margin: 0;
	padding: 0;
}

.amelimon-services--cols-1 { --amelimon-services-cols: 1; }
.amelimon-services--cols-2 { --amelimon-services-cols: 2; }
.amelimon-services--cols-3 { --amelimon-services-cols: 3; }
.amelimon-services--cols-4 { --amelimon-services-cols: 4; }
.amelimon-services--cols-5 { --amelimon-services-cols: 5; }
.amelimon-services--cols-6 { --amelimon-services-cols: 6; }

/* Sur le site d'origine, l'intitulé occupe un pavé jaune et l'image vient
   dessous, collée. La hauteur du pavé se cale sur la carte la plus haute pour
   que les images s'alignent d'une colonne à l'autre. */
.amelimon-services__item {
	display: flex;
}

.amelimon-services__link {
	display: grid;
	grid-template-rows: auto 1fr;
	height: 100%;
	text-decoration: none;
	width: 100%;
}

.amelimon-services__media {
	margin: 0;
	overflow: hidden;
}

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

.amelimon-services__title {
	align-items: center;
	background: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--ink);
	display: flex;
	flex-direction: column;
	font-family: var(--wp--preset--font-family--sora);
	font-size: 18px;
	font-weight: 600;
	justify-content: center;
	letter-spacing: normal;
	line-height: 1.3;
	margin: 0;
	min-height: 100px;
	padding: 30px 20px 20px;
	text-align: center;
	text-transform: uppercase;
	transition: var(--amelimon-transition);
}

.amelimon-services__link:hover .amelimon-services__title {
	background: var(--wp--preset--color--accent-3);
}

.amelimon-services__subtitle {
	display: block;
	font-weight: 400;
}

/* -------------------------------------------------------------------------
 * Logos clients
 * ---------------------------------------------------------------------- */

.amelimon-clients__viewport {
	overflow: hidden;
	/* Les logos se fondent sur les bords plutôt que d'être coupés net. */
	mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
	-webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}

.amelimon-clients__track {
	animation: amelimon-marquee var(--amelimon-marquee-duration, 40s) linear infinite;
	display: flex;
	gap: 60px;
	list-style: none;
	margin: 0;
	padding: 0;
	width: max-content;
}

.amelimon-clients:hover .amelimon-clients__track {
	animation-play-state: paused;
}

.amelimon-clients__item {
	align-items: center;
	display: flex;
	flex: 0 0 auto;
	justify-content: center;
}

.amelimon-clients__item img {
	height: 70px;
	object-fit: contain;
	width: auto;
}

.amelimon-clients--grayscale .amelimon-clients__item img {
	filter: grayscale(1);
	opacity: 0.7;
	transition: var(--amelimon-transition);
}

.amelimon-clients--grayscale .amelimon-clients__item:hover img {
	filter: none;
	opacity: 1;
}

@keyframes amelimon-marquee {
	from { transform: translateX(0); }
	/* La piste est dupliquée : à -50 % on est revenu au point de départ. */
	to { transform: translateX(-50%); }
}

@media (prefers-reduced-motion: reduce) {
	.amelimon-clients__track {
		animation: none;
		flex-wrap: wrap;
		justify-content: center;
		width: 100%;
	}

	.amelimon-clients__item[aria-hidden="true"] {
		display: none;
	}
}

/* -------------------------------------------------------------------------
 * Témoignages
 * ---------------------------------------------------------------------- */

.amelimon-testimonials {
	position: relative;
	text-align: center;
}

.amelimon-testimonials__quote {
	border: 0;
	font-size: var(--wp--preset--font-size--large);
	margin: 0 auto;
	max-width: 760px;
	padding: 0 0 20px;
}

.amelimon-testimonials__quote p {
	margin: 0;
}

.amelimon-testimonials__author {
	align-items: center;
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.amelimon-testimonials__logo {
	height: 60px;
	object-fit: contain;
	width: auto;
}

.amelimon-testimonials__cite {
	font-size: 14px;
	font-style: normal;
	font-weight: 600;
	letter-spacing: 0.05em;
	text-transform: uppercase;
}

.amelimon-testimonials__role {
	color: var(--wp--preset--color--ink-soft);
	font-size: 13px;
}

/* Sans JavaScript, tous les témoignages restent lisibles à la suite. */
.amelimon-testimonials.is-enhanced .amelimon-testimonials__item {
	display: none;
}

.amelimon-testimonials.is-enhanced .amelimon-testimonials__item.is-active {
	display: block;
}

.amelimon-testimonials__dots {
	display: flex;
	gap: 8px;
	justify-content: center;
	margin-top: 24px;
}

.amelimon-testimonials__dot {
	background: transparent;
	border: 1px solid var(--wp--preset--color--ink);
	border-radius: 50%;
	cursor: pointer;
	height: 10px;
	padding: 0;
	width: 10px;
}

.amelimon-testimonials__dot.is-active {
	background: var(--wp--preset--color--ink);
}

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

/* Relevé sur amelimon.com : 16 px, interligne 1.6, gris clair — et non le
   blanc pur ni le 18 px du corps de texte. */
.amelimon-footer p {
	font-size: 16px;
	line-height: 1.6;
}

.amelimon-footer p a {
	color: inherit;
	font-size: inherit;
	text-decoration: none;
	transition: var(--amelimon-transition);
}

.amelimon-footer p a:hover,
.amelimon-footer p a:focus-visible {
	color: var(--wp--preset--color--accent);
}

/* -------------------------------------------------------------------------
 * Blog — liste, archives, recherche
 * ---------------------------------------------------------------------- */

/* Une rangée pleine largeur par article : l'image occupe le premier tiers,
   collée au bord, le texte le reste avec 88 px de marge. Les rangées alternent
   blanc et gris clair, comme sur le site d'origine. */
.amelimon-post-list {
	list-style: none;
	margin: 0;
	padding: 0;
}

.amelimon-post-row {
	display: grid;
	grid-template-columns: 33.33% 1fr;
}

.amelimon-post-list > li:nth-child(even) .amelimon-post-row {
	background-color: var(--wp--preset--color--base-3);
}

.amelimon-post-row__media {
	margin: 0;
	overflow: hidden;
}

.amelimon-post-row__media a {
	display: block;
	height: 100%;
}

.amelimon-post-row__media img {
	display: block;
	height: 100%;
	object-fit: cover;
	transition: var(--amelimon-transition);
	width: 100%;
}

.amelimon-post-row__media a:hover img,
.amelimon-post-row__media a:focus-visible img {
	opacity: 0.8;
	transform: scale(1.07);
}

.amelimon-post-row__body {
	align-self: center;
	padding: 88px;
}

@media (max-width: 900px) {
	.amelimon-post-row {
		grid-template-columns: 1fr;
	}

	.amelimon-post-row__body {
		padding: 40px 20px;
	}

	.amelimon-post-row__media img {
		aspect-ratio: 3 / 2;
	}
}

/* Titres : celui d'une carte est en 30 px maigre sans capitales — à l'inverse
   des titres de section — et celui d'un article ouvert monte à 40 px gras. */
.wp-block-post-title {
	font-size: 40px;
	font-weight: 700;
	letter-spacing: 0.05em;
	line-height: 1.1;
	text-transform: uppercase;
}

.wp-block-query .wp-block-post-title,
.wp-block-query .wp-block-post-title a {
	font-size: 30px;
	font-weight: 400;
	letter-spacing: normal;
	line-height: 1.15;
	text-transform: none;
}

.wp-block-post-title a {
	color: inherit;
	text-decoration: none;
	transition: var(--amelimon-transition);
}

.wp-block-post-title a:hover,
.wp-block-post-title a:focus-visible {
	color: var(--wp--preset--color--accent-3);
}

/* Ligne « date / catégories » : date en gris clair, catégories en gras. */
.amelimon-post-meta {
	align-items: baseline;
	color: var(--wp--preset--color--ink-soft);
	font-size: 14px;
	line-height: 1.1;
	margin: 0;
}

.amelimon-post-meta .wp-block-post-date,
.amelimon-post-meta__sep {
	color: #969696;
	margin: 0;
}

.amelimon-post-meta .wp-block-post-terms,
.amelimon-post-meta .wp-block-post-terms a,
.amelimon-post-meta strong {
	color: var(--wp--preset--color--ink);
	font-weight: 700;
	text-decoration: none;
	transition: var(--amelimon-transition);
}

.amelimon-post-meta .wp-block-post-terms a:hover,
.amelimon-post-meta .wp-block-post-terms a:focus-visible {
	color: var(--wp--preset--color--accent-3);
}

/* « Read More » : petit lien en capitales, souligné du trait jaune qui se
   déploie de la gauche — le même geste que le filtre du portfolio. */
.wp-block-post-excerpt__more-link {
	color: var(--wp--preset--color--ink);
	display: inline-block;
	font-family: var(--wp--preset--font-family--sora);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.08em;
	margin-top: 8px;
	position: relative;
	text-decoration: none;
	text-transform: uppercase;
	z-index: 1;
}

.wp-block-post-excerpt__more-link::before {
	background: var(--wp--preset--color--accent);
	bottom: 2px;
	content: '';
	height: 6px;
	left: 0;
	position: absolute;
	transform: scale(0, 1);
	transform-origin: left center;
	transition: transform 0.25s cubic-bezier(0.165, 0.84, 0.44, 1);
	width: 100%;
	z-index: -1;
}

.wp-block-post-excerpt__more-link:hover::before,
.wp-block-post-excerpt__more-link:focus-visible::before {
	transform: scale(1, 1);
}

/* Titre d'archive ou de recherche : reprend le filet jaune des sections. */
.amelimon-archive-title {
	font-size: var(--wp--preset--font-size--normal);
	margin-top: 40px;
}

.amelimon-search-form {
	margin: 20px auto 40px;
	max-width: 760px;
}

.amelimon-pagination a,
.amelimon-pagination .page-numbers {
	color: var(--wp--preset--color--ink);
	font-family: var(--wp--preset--font-family--sora);
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.05em;
	text-decoration: none;
	text-transform: uppercase;
}

.amelimon-pagination .page-numbers.current {
	color: var(--wp--preset--color--accent-3);
}

/* -------------------------------------------------------------------------
 * Blog — article
 * ---------------------------------------------------------------------- */

/* L'image à la une reste une bannière, mais bornée : en arrivant sur un
   article on doit voir l'image ET son titre sans avoir à faire défiler. */
.amelimon-article__cover {
	margin: 0;
	overflow: hidden;
}

.amelimon-article__cover img {
	display: block;
	height: clamp(260px, 46vh, 520px);
	object-fit: cover;
	width: 100%;
}

.amelimon-article__head {
	margin-inline: auto;
	max-width: var(--wp--style--global--content-size);
}

/* Le corps de texte : interligne aéré, images généreuses et légendes
   soignées — c'est un portfolio, les visuels doivent respirer. */
.amelimon-article__body {
	font-size: 18px;
	line-height: 1.7;
}

.amelimon-article__body > h2,
.amelimon-article__body > h3 {
	margin-top: 48px;
}

.amelimon-article__body figure {
	margin-block: 40px;
}

.amelimon-article__body figure img {
	display: block;
	width: 100%;
}

/* Légende : petite, en Sora capitales espacées, centrée, soulignée d'un court
   trait jaune — un cartel de galerie plutôt qu'une note de bas de page. */
.amelimon-article__body figcaption,
.amelimon-article__body .wp-element-caption {
	color: var(--wp--preset--color--ink-soft);
	font-family: var(--wp--preset--font-family--sora);
	font-size: 12px;
	font-weight: 500;
	letter-spacing: 0.08em;
	line-height: 1.5;
	margin-top: 14px;
	padding-top: 12px;
	position: relative;
	text-align: center;
	text-transform: uppercase;
}

.amelimon-article__body figcaption::before,
.amelimon-article__body .wp-element-caption::before {
	background: var(--wp--preset--color--accent);
	content: '';
	height: 3px;
	left: 50%;
	position: absolute;
	top: 0;
	transform: translateX(-50%);
	width: 40px;
}

/* Mots-clés en badges : pilule contournée, fond blanc ; au survol elle
   s'inverse en noir avec le texte jaune. */
.amelimon-tags {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	justify-content: flex-start;
	margin-inline: auto;
	max-width: var(--wp--style--global--content-size);
	text-align: left;
}

.amelimon-tags a {
	background: var(--wp--preset--color--base);
	border: 1px solid var(--wp--preset--color--ink);
	border-radius: 23px;
	color: var(--wp--preset--color--ink);
	display: inline-block;
	font-family: var(--wp--preset--font-family--sora);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.05em;
	line-height: 1;
	padding: 9px 16px;
	text-decoration: none;
	text-transform: uppercase;
	transition: var(--amelimon-transition);
}

.amelimon-tags a:hover,
.amelimon-tags a:focus-visible {
	background: var(--wp--preset--color--ink);
	border-color: var(--wp--preset--color--ink);
	color: var(--wp--preset--color--accent);
}

/* Article précédent / suivant : deux cellules sous un filet, l'intitulé en
   petites capitales grises et le titre en Sora — le titre passe au jaune au
   survol. La cellule « suivant » est alignée à droite. */
.amelimon-postnav {
	border-top: 1px solid var(--wp--preset--color--accent);
	display: grid;
	gap: 40px;
	grid-template-columns: 1fr 1fr;
	padding-top: 30px;
}

.amelimon-postnav__link {
	color: var(--wp--preset--color--ink);
	font-family: var(--wp--preset--font-family--sora);
}

.amelimon-postnav__link--next {
	text-align: right;
}

.amelimon-postnav__link .post-navigation-link__label {
	color: #969696;
	display: block;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.08em;
	margin-bottom: 8px;
	text-transform: uppercase;
}

.amelimon-postnav__link a {
	color: var(--wp--preset--color--ink);
	font-size: 22px;
	font-weight: 600;
	line-height: 1.25;
	text-decoration: none;
	transition: var(--amelimon-transition);
}

.amelimon-postnav__link a:hover,
.amelimon-postnav__link a:focus-visible {
	color: var(--wp--preset--color--accent-3);
}

@media (max-width: 640px) {
	.amelimon-postnav {
		grid-template-columns: 1fr;
	}

	.amelimon-postnav__link--next {
		text-align: left;
	}
}

/* Articles liés : trois cartes, image 3:2, ligne de méta et titre — la même
   grammaire que la liste du blog. */
.amelimon-related__grid {
	display: grid;
	gap: 30px;
	grid-template-columns: repeat(3, 1fr);
	list-style: none;
	margin: 40px 0 0;
	padding: 0;
}

@media (max-width: 900px) {
	.amelimon-related__grid {
		grid-template-columns: 1fr;
	}
}

.amelimon-related__link {
	color: var(--wp--preset--color--ink);
	display: block;
	text-decoration: none;
}

.amelimon-related__media {
	aspect-ratio: 3 / 2;
	margin: 0 0 16px;
	overflow: hidden;
}

.amelimon-related__media img {
	display: block;
	height: 100%;
	object-fit: cover;
	transition: var(--amelimon-transition);
	width: 100%;
}

.amelimon-related__link:hover .amelimon-related__media img,
.amelimon-related__link:focus-visible .amelimon-related__media img {
	opacity: 0.8;
	transform: scale(1.07);
}

.amelimon-related__meta {
	display: flex;
	gap: 8px;
	margin-bottom: 10px;
}

.amelimon-related__heading {
	font-size: 20px;
	font-weight: 600;
	letter-spacing: normal;
	line-height: 1.3;
	margin: 0;
	text-transform: none;
	transition: var(--amelimon-transition);
}

.amelimon-related__link:hover .amelimon-related__heading,
.amelimon-related__link:focus-visible .amelimon-related__heading {
	color: var(--wp--preset--color--accent-3);
}

.amelimon-comments {
	margin-inline: auto;
	max-width: var(--wp--style--global--content-size);
}

/* Liens « projet précédent / suivant » du portfolio : encre, sans soulignement. */
.wp-block-post-navigation-link,
.wp-block-post-navigation-link a {
	color: var(--wp--preset--color--ink);
	text-decoration: none;
	transition: var(--amelimon-transition);
}

.wp-block-post-navigation-link a:hover,
.wp-block-post-navigation-link a:focus-visible {
	color: var(--wp--preset--color--accent);
}

/* -------------------------------------------------------------------------
 * Survol des visuels cliquables
 * ---------------------------------------------------------------------- */

/* Sur le site d'origine, survoler une image cliquable l'agrandit de 7 % en
   s'assombrissant un peu. Le cadre, lui, ne bouge pas : c'est le conteneur qui
   masque le débordement, seule l'image est mise à l'échelle. */
.entry-content a:has(> img),
.entry-content a:has(> figure),
.entry-content figure:has(> a) ,
.amelimon-services__link,
.amelimon-portfolio__media {
	overflow: hidden;
}

.entry-content a > img,
.entry-content a > figure > img,
.entry-content figure > a > img,
.amelimon-services__media img,
.wp-block-image:has(> a) img {
	transition: var(--amelimon-transition);
}

.entry-content a:hover > img,
.entry-content a:hover > figure > img,
.entry-content figure > a:hover > img,
.amelimon-services__link:hover .amelimon-services__media img,
.wp-block-image:has(> a) a:hover img {
	opacity: 0.8;
	transform: scale(1.07);
}

@media (prefers-reduced-motion: reduce) {
	.entry-content a:hover > img,
	.entry-content a:hover > figure > img,
	.entry-content figure > a:hover > img,
	.amelimon-services__link:hover .amelimon-services__media img,
	.wp-block-image:has(> a) a:hover img {
		transform: none;
	}
}

/* -------------------------------------------------------------------------
 * Recherche de l'en-tête
 * ---------------------------------------------------------------------- */

/* Valeurs relevées sur amelimon.com : voile gris à 90 %, invite blanche de
   12 px en 600, champ de 40 px sans bordure ni fond, texte centré. */
.amelimon-search {
	display: flex;
}

.amelimon-search__toggle,
.amelimon-search__close {
	background: none;
	border: 0;
	color: var(--wp--preset--color--ink);
	cursor: pointer;
	display: flex;
	padding: 6px;
	transition: var(--amelimon-transition);
}

.amelimon-search__toggle:hover {
	color: var(--wp--preset--color--accent);
}

/* Le voile est masqué par l'attribut « hidden » ; sans cette règle, le
   display:flex de la classe l'emportait et il ne se fermait jamais. Le curseur
   devient une croix partout sauf sur le champ, pour dire qu'un clic referme. */
.amelimon-search__popup {
	align-items: center;
	background: rgba(65, 65, 65, 0.9);
	cursor: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="26" height="26" viewBox="0 0 26 26"><path d="M6 6l14 14M20 6L6 20" fill="none" stroke="white" stroke-width="2" stroke-linecap="round"/></svg>') 13 13, pointer;
	display: none;
	inset: 0;
	justify-content: center;
	position: fixed;
	text-align: center;
	z-index: 200;
}

.amelimon-search__popup:not([hidden]) {
	display: flex;
}

.amelimon-search__form,
.amelimon-search__field {
	cursor: auto;
}

.amelimon-search__close {
	color: var(--wp--preset--color--base);
	position: absolute;
	right: 24px;
	top: 24px;
}

.amelimon-search__close:hover {
	color: var(--wp--preset--color--accent);
}

.amelimon-search__inner {
	max-width: min(720px, 90vw);
	width: 100%;
}

.amelimon-search__hint {
	color: var(--wp--preset--color--base);
	font-family: var(--wp--preset--font-family--sora);
	font-size: 12px;
	font-weight: 600;
	margin: 0 0 10px;
	text-transform: uppercase;
}

.amelimon-search__field {
	background: none;
	border: 0;
	color: var(--wp--preset--color--base);
	font-family: var(--wp--preset--font-family--sora);
	font-size: 40px;
	font-weight: 600;
	max-width: 100%;
	padding: 0;
	text-align: center;
	text-transform: uppercase;
	width: 100%;
}

.amelimon-search__field::placeholder {
	color: var(--wp--preset--color--ink-soft);
}

.amelimon-search__field:focus-visible {
	outline: 0;
}

@media (max-width: 600px) {
	.amelimon-search__field {
		font-size: 24px;
	}
}

/* -------------------------------------------------------------------------
 * Formulaire de contact
 * ---------------------------------------------------------------------- */

/* Valeurs relevées sur le formulaire d'amelimon.com : tout est en Sora 700 de
   16 px, sur fond blanc sans bordure visible (la bordure est blanche elle
   aussi), et les intitulés sont en capitales. */
.amelimon-form__field {
	margin: 0 0 20px;
}

/* Nom et adresse e-mail partagent une rangée, comme sur l'original. */
.amelimon-form__row {
	display: grid;
	gap: 0 20px;
	grid-template-columns: 1fr 1fr;
}

@media (max-width: 640px) {
	.amelimon-form__row {
		grid-template-columns: 1fr;
	}
}

.amelimon-form__field label {
	color: var(--wp--preset--color--ink);
	display: block;
	font-family: var(--wp--preset--font-family--sora);
	font-size: 16px;
	font-weight: 700;
	line-height: 2;
	text-transform: uppercase;
}

.amelimon-form__field input,
.amelimon-form__field select,
.amelimon-form__field textarea {
	background: var(--wp--preset--color--base);
	border: 1px solid var(--wp--preset--color--base);
	border-radius: 0;
	box-sizing: border-box;
	color: var(--wp--preset--color--ink);
	display: block;
	font-family: var(--wp--preset--font-family--sora);
	font-size: 16px;
	font-weight: 700;
	line-height: 1;
	padding: 0 12px;
	width: 100%;
}

.amelimon-form__field input,
.amelimon-form__field textarea {
	transition: var(--amelimon-transition);
}

.amelimon-form__field select {
	color: var(--wp--preset--color--ink-strong);
}

.amelimon-form__field input,
.amelimon-form__field select {
	height: 42px;
}

.amelimon-form__field textarea {
	line-height: 1.2;
	min-height: 218px;
	padding: 12px;
	resize: vertical;
}

.amelimon-form__field input:focus-visible,
.amelimon-form__field select:focus-visible,
.amelimon-form__field textarea:focus-visible {
	outline: 2px solid var(--wp--preset--color--ink);
	outline-offset: 1px;
}

/* Pot de miel : hors écran plutôt que display:none, que certains robots repèrent. */
.amelimon-form__hp {
	height: 1px;
	left: -9999px;
	overflow: hidden;
	position: absolute;
	width: 1px;
}

/* Bouton d'envoi : une barre blanche pleine largeur, texte sombre en capitales
   — et non la pilule contournée des autres boutons du thème. */
.amelimon-form__submit {
	background: none;
	border: 1px solid var(--wp--preset--color--base);
	border-radius: 0;
	color: var(--wp--preset--color--ink-strong);
	cursor: pointer;
	font-family: var(--wp--preset--font-family--sora);
	font-size: 16px;
	font-weight: 700;
	height: 38px;
	letter-spacing: normal;
	line-height: 1;
	padding: 0 26px;
	text-transform: uppercase;
	transition: var(--amelimon-transition);
	width: 100%;
}

.amelimon-form__submit:hover {
	background: var(--wp--preset--color--ink);
	color: var(--wp--preset--color--base);
}

.amelimon-form__submit[disabled] {
	cursor: progress;
	opacity: 0.6;
}

.amelimon-form__status:empty {
	display: none;
}

.amelimon-form__status {
	font-weight: 600;
	margin-top: 16px;
}

.amelimon-form__status.is-error {
	color: #b3261e;
}

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

.amelimon-footer {
	background: var(--wp--preset--color--contrast);
}

.amelimon-footer a,
.amelimon-footer h2,
.amelimon-footer h3 {
	color: inherit;
}

.amelimon-footer a:hover {
	color: var(--wp--preset--color--accent);
}

/* -------------------------------------------------------------------------
 * Apparition au défilement
 * ---------------------------------------------------------------------- */

.amelimon-reveal {
	opacity: 0;
	transform: translateY(24px);
	transition: opacity 0.7s ease, transform 0.7s cubic-bezier(0.165, 0.84, 0.44, 1);
}

.amelimon-reveal.is-visible {
	opacity: 1;
	transform: none;
}

@media (prefers-reduced-motion: reduce) {
	.amelimon-reveal {
		opacity: 1;
		transform: none;
	}
}

/* -------------------------------------------------------------------------
 * Adaptatif
 * ---------------------------------------------------------------------- */

@media (max-width: 1024px) {
	.amelimon-portfolio__grid {
		grid-template-columns: repeat(2, 1fr);
	}

	.amelimon-services {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 768px) {
	:root {
		--amelimon-header-height: 60px;
	}

	.amelimon-portfolio__filter {
		display: none;
	}

	.amelimon-portfolio__select {
		display: block;
	}

	.amelimon-portfolio__grid,
	.amelimon-services {
		grid-template-columns: 1fr;
	}

	/* Sur tactile il n'y a pas de survol : la légende reste visible. */
	.amelimon-portfolio__caption {
		background: none;
		color: var(--wp--preset--color--ink);
		opacity: 1;
		position: static;
		padding: 12px 0 24px;
	}

	.amelimon-hero {
		height: 70vh;
	}
}