/* Effets signature de l'accueil ([psu_word_photos], [psu_services_list]) — voir signature.js. */

.entry-content > .psu-words3.alignfull,
.entry-content > .psu-svc.alignfull,
.psu-words3.alignfull,
.psu-svc.alignfull {
	width: 100vw !important;
	max-width: none !important;
	margin: 0 calc(50% - 50vw) !important;
}

/* ================================================================ mots remplis de photos */

.psu-words3 {
	position: relative;
	padding: clamp(60px, 8vw, 120px) 0;
}

.psu-words3__sticky {
	position: relative;
	display: grid;
	justify-items: center;
	gap: 0;
	overflow: hidden;
}

.psu-words3__word {
	margin: 0 !important;
	/* Place pour les jambages (g, p) : le remplissage photo ne couvre que la boîte du mot. */
	padding: .06em .04em .16em;
	font-size: clamp(64px, 16.5vw, 250px) !important;
	font-weight: 700;
	line-height: .95 !important;
	letter-spacing: -.045em;
	white-space: nowrap;
	color: transparent !important;
	background-size: cover;
	background-position: var(--focus, 50% 50%);
	-webkit-background-clip: text;
	background-clip: text;
}

/* Mots en couleur unie, sans photo dans les lettres (2026-11-09). */
.psu-words3__word--plain {
	color: var(--psu-text) !important;
	background: none;
	-webkit-background-clip: border-box;
	background-clip: border-box;
}

.psu-words3--hero .psu-words3__word--plain {
	color: rgb(250, 243, 234) !important;
	text-shadow: 0 2px 18px rgba(42, 29, 20, .45);
}

/* Voiles flous qui passent devant / derrière, comme des nuages (profondeur). */
.psu-words3__veil {
	position: absolute;
	z-index: 0;
	width: 55vw;
	height: 55vw;
	max-width: 760px;
	max-height: 760px;
	border-radius: 50%;
	background: radial-gradient(circle, color-mix(in srgb, var(--psu-accent) 30%, transparent) 0%, transparent 65%);
	filter: blur(40px);
	opacity: .55;
	pointer-events: none;
}

.psu-words3__veil--a { left: -14vw; top: 5%; }
.psu-words3__veil--b { right: -16vw; top: 30%; background: radial-gradient(circle, color-mix(in srgb, var(--psu-text) 14%, transparent) 0%, transparent 65%); }
.psu-words3__veil--c { z-index: 2; left: 25%; bottom: -30%; width: 70vw; height: 30vw; background: radial-gradient(ellipse, color-mix(in srgb, var(--psu-bg) 85%, transparent) 0%, transparent 70%); filter: blur(30px); opacity: .9; }

.psu-words3__word,
.psu-words3__caption {
	position: relative;
	z-index: 1;
}

.psu-words3__caption {
	margin: 28px 0 0 !important;
	font-size: 12px;
	font-weight: 500;
	letter-spacing: .3em;
	text-transform: uppercase;
	color: var(--psu-accent) !important;
}

/* Mode animé : section haute, contenu collant, un mot à la fois. */
.psu-words3.is-live {
	height: 330vh;
	padding: 0;
}

.psu-words3.is-live .psu-words3__sticky {
	position: sticky;
	top: 0;
	height: 100vh;
	height: 100svh;
	align-content: center;
}

.psu-words3.is-live .psu-words3__word {
	position: absolute;
	top: 50%;
	left: 50%;
	opacity: 0;
	transform: translate(-50%, -50%);
	will-change: transform, opacity, filter, background-position;
}

.psu-words3.is-live .psu-words3__caption {
	position: absolute;
	bottom: 12vh;
}

.psu-words3.is-live .psu-words3__veil {
	will-change: transform;
}

/* ================================================================ liste des prestations */

.psu-svc {
	padding: clamp(72px, 9vw, 140px) var(--psu-gutter, 24px);
}

.psu-svc__head,
.psu-svc__list {
	max-width: 1200px;
	margin-left: auto !important;
	margin-right: auto !important;
}

.psu-svc__head {
	margin-bottom: clamp(24px, 3vw, 44px);
}

.psu-svc__kicker {
	margin: 0 0 12px !important;
	font-size: 12px;
	font-weight: 500;
	letter-spacing: .24em;
	text-transform: uppercase;
	color: var(--psu-accent) !important;
}

.entry-content .psu-svc h2.psu-svc__title,
.psu-svc__title {
	margin: 0 !important;
	font-size: clamp(30px, 4vw, 52px);
	font-weight: 600;
	letter-spacing: -.018em;
	color: var(--psu-text) !important;
}

.psu-svc__list {
	padding: 0 !important;
	list-style: none !important;
	border-top: 1px solid var(--psu-line);
}

.psu-svc__item {
	margin: 0 !important;
	padding: 0 !important;
	list-style: none !important;
	border-bottom: 1px solid var(--psu-line);
}

.psu-svc__item::before,
.psu-svc__item::marker {
	display: none !important;
	content: none !important;
}

.entry-content .psu-svc a.psu-svc__row,
.psu-svc__row {
	position: relative;
	display: grid;
	grid-template-columns: 60px minmax(0, 1fr) minmax(0, 260px) 50px;
	align-items: center;
	gap: 24px;
	min-height: clamp(130px, 15vw, 210px);
	padding: 0 clamp(16px, 2vw, 28px);
	overflow: hidden;
	border-radius: 24px;
	color: var(--psu-text) !important;
	text-decoration: none !important;
	background: none !important;
	isolation: isolate;
}

/* Photo de la ligne : bande arrondie qui s'ouvre depuis le centre quand la ligne est active. */
.psu-svc__img {
	position: absolute;
	inset: 0;
	z-index: -1;
	overflow: hidden;
	border-radius: 24px;
	clip-path: inset(50% 0 50% 0 round 24px);
	transition: clip-path 1s cubic-bezier(.22, .61, .36, 1);
}

.psu-svc__img img {
	width: 100% !important;
	height: 100% !important;
	max-width: none !important;
	object-fit: cover;
	transform: scale(1.12);
	transition: transform .9s cubic-bezier(.22, .61, .36, 1);
}

.psu-svc__img::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(90deg, rgba(10, 8, 7, .72) 0%, rgba(10, 8, 7, .25) 55%, rgba(10, 8, 7, .55) 100%);
}

.psu-svc__num {
	font-size: 13px;
	letter-spacing: .14em;
	color: var(--psu-muted);
	transition: color .6s;
}

.psu-svc__name {
	font-size: clamp(36px, 5.4vw, 84px);
	font-weight: 600;
	line-height: 1;
	letter-spacing: -.035em;
	white-space: nowrap;
	color: var(--psu-text);
	opacity: .28;
	transition: opacity .7s cubic-bezier(.22, .61, .36, 1), transform .9s cubic-bezier(.22, .61, .36, 1), color .6s;
}

.psu-svc__desc {
	font-size: 14px;
	line-height: 1.6;
	color: var(--psu-muted);
	opacity: 0;
	transform: translateY(8px);
	transition: opacity .7s, transform .8s cubic-bezier(.22, .61, .36, 1), color .6s;
}

.psu-svc__arrow {
	justify-self: end;
	font-size: 34px;
	color: var(--psu-accent);
	opacity: 0;
	transform: translateX(-16px);
	transition: opacity .6s, transform .8s cubic-bezier(.22, .61, .36, 1);
}

/* Ligne active (au défilement ou au survol). */
.psu-svc__row.is-on .psu-svc__img {
	clip-path: inset(0 0 0 0 round 24px);
}


.psu-svc__row.is-on .psu-svc__name {
	opacity: 1;
	color: #fff;
	transform: translateX(6px);
}

.psu-svc__row.is-on .psu-svc__num,
.psu-svc__row.is-on .psu-svc__desc {
	color: rgba(255, 255, 255, .85);
}

.psu-svc__row.is-on .psu-svc__desc,
.psu-svc__row.is-on .psu-svc__arrow {
	opacity: 1;
	transform: none;
}

.psu-svc__row:focus-visible {
	outline: 1px solid var(--psu-accent);
	outline-offset: 4px;
}

/* Sans JavaScript : toutes les lignes lisibles. */
.psu-svc:not(.is-live) .psu-svc__name {
	opacity: 1;
}

.psu-svc:not(.is-live) .psu-svc__desc {
	opacity: 1;
	transform: none;
}

@media (max-width: 780px) {
	.entry-content .psu-svc a.psu-svc__row,
	.psu-svc__row {
		grid-template-columns: 36px minmax(0, 1fr) 30px;
		gap: 12px;
		min-height: 120px;
	}

	.psu-svc__desc {
		grid-column: 2 / 4;
		grid-row: 2;
		margin-top: -14px;
		padding-bottom: 16px;
	}

	/* « Professionnels » (≈ 6,6 fois la taille du texte) tient dans sa colonne (Laura, 2026-11-01 : il était rogné). */
	.psu-svc__name {
		font-size: clamp(22px, calc(14vw - 24px), 44px);
	}

	.psu-svc__arrow {
		font-size: 24px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.psu-svc__img,
	.psu-svc__img img,
	.psu-svc__name,
	.psu-svc__desc,
	.psu-svc__arrow {
		transition: none !important;
	}
}

/* ================================================================ bannière + mots réunis (vidéo des vagues) */

.psu-words3--hero {
	padding: 0;
	background: #0a0807;
}

.psu-words3--hero .psu-words3__sticky {
	height: 100vh;
	height: 100svh;
	align-content: center;
}

.psu-words3__video {
	position: absolute;
	inset: 0;
	z-index: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Voile clair et transparent sur la vidéo, un peu plus dense quand le texte arrive. */
.psu-words3__shade {
	position: absolute;
	inset: 0;
	z-index: 0;
	/* Voile clair (2026-10-30, Laura : « opacité faible mais clair, genre blanc ou beige ») : le beige du site, qui éclaircit la vidéo. */
	background: #f4ece2;
	opacity: var(--shade, .18);
}

.psu-words3__hero {
	position: absolute;
	inset: 0;
	z-index: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: 0 var(--psu-gutter, 24px);
	text-align: center;
	color: #fff;
	will-change: transform, opacity, filter;
}

.entry-content .psu-words3 h1.psu-words3__h1,
.psu-words3__h1 {
	margin: 0 !important;
	font-size: clamp(40px, 6vw, 88px) !important;
	font-weight: 600;
	line-height: 1.05;
	letter-spacing: -.018em;
	color: #fff !important;
}

.psu-words3__rule {
	width: 80px;
	height: 1px;
	margin: 26px auto !important;
	border: 0;
	background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .6), transparent);
}

.psu-words3__lead {
	max-width: 640px;
	margin: 0 0 12px !important;
	font-size: clamp(16px, 1.5vw, 20px);
	color: #fff !important;
}

.psu-words3__motto {
	margin: 0 !important;
	color: rgba(255, 255, 255, .85) !important;
}

/* Sur la vidéo, les voiles restent clairs et dorés (pas la couleur du fond). */
.psu-words3--hero .psu-words3__veil--a,
.psu-words3--hero .psu-words3__veil--b {
	z-index: 0;
	opacity: .35;
}

.psu-words3--hero .psu-words3__caption {
	color: #f0dcb4 !important;
	text-shadow: 0 1px 12px rgba(42, 29, 20, .7), 0 0 2px rgba(42, 29, 20, .5);
	opacity: var(--caption, 1);
}

/* Le texte de présentation arrive à la fin (soft : invisible au départ, le script le fait venir). */
.psu-words3--hero.is-live .psu-words3__hero {
	opacity: 0;
}

.psu-words3--hero.is-live {
	--shade: .18;
}

/* Voile plus léger (2026-10-30) : le texte blanc garde une ombre douce pour rester lisible. */
.psu-words3--hero .psu-words3__hero {
	text-shadow: 0 2px 18px rgba(42, 29, 20, .55), 0 0 2px rgba(42, 29, 20, .25);
}

/* Animation jouée seule au chargement (2026-11-10) : la bannière fait un écran, plus de long défilement. */
.psu-words3--hero.is-live {
	height: auto;
}

/* Sans animation : la bannière seule, comme avant. */
.psu-words3--hero:not(.is-live) .psu-words3__word,
.psu-words3--hero:not(.is-live) .psu-words3__caption,
.psu-words3--hero:not(.is-live) .psu-words3__veil {
	display: none;
}

.psu-words3--hero:not(.is-live) .psu-words3__sticky {
	min-height: 100vh;
}

/* En attendant le script : la bannière a déjà sa forme animée (collante, même hauteur). Sans ça,
   Safari recréait la vidéo au démarrage du script et la montrait vide une demi-seconde (2026-11-09). */
.psu-anim .psu-words3--hero:not(.is-live) {
	height: auto;
}

.psu-anim .psu-words3--hero:not(.is-live) .psu-words3__sticky {
	position: sticky;
	top: 0;
}

/* En attendant le script (première visite) : déjà le premier grand mot, à sa place de départ. */
.psu-anim .psu-words3--hero:not(.is-live) .psu-words3__hero {
	visibility: hidden;
}

.psu-anim .psu-words3--hero:not(.is-live) .psu-words3__word[data-i="0"] {
	display: block;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}

.psu-anim .psu-words3--hero:not(.is-live) .psu-words3__caption {
	display: block;
	position: absolute;
	bottom: 12vh;
}

/* ================================================================ liste : la photo glisse avec la page */

.psu-svc__img img {
	position: absolute;
	left: 0;
	top: -14%;
	height: 128% !important;
	will-change: transform;
}

/* ================================================================ téléphone / écran tactile :
   pas de survol, donc les trois prestations s'affichent en entier en permanence (photo, nom,
   description, flèche), au lieu de s'allumer une à une au défilement. */

@media (hover: none), (max-width: 780px) {
	.psu-svc__list {
		display: grid;
		gap: 12px;
		border-top: 0;
	}

	.psu-svc__item {
		border-bottom: 0;
	}

	.entry-content .psu-svc a.psu-svc__row,
	.psu-svc__row {
		min-height: 150px;
		padding-top: 18px;
		padding-bottom: 18px;
	}

	.psu-svc__row .psu-svc__img {
		clip-path: inset(0 0 0 0 round 24px);
	}

	.psu-svc__row .psu-svc__name {
		opacity: 1;
		color: #fff;
		transform: none;
	}

	.psu-svc__row .psu-svc__num,
	.psu-svc__row .psu-svc__desc {
		color: rgba(255, 255, 255, .88);
	}

	.psu-svc__row .psu-svc__desc,
	.psu-svc__row .psu-svc__arrow {
		opacity: 1;
		transform: none;
	}
}

/* ================================================================ ordinateur / tablette : les trois
   prestations en panneaux verticaux côte à côte (demande de Laura). Les photos montent l'une après
   l'autre quand le bloc arrive à l'écran ; le panneau survolé s'élargit et dévoile sa description. */

@media (min-width: 781px) {
	.psu-svc__list {
		display: flex;
		gap: clamp(12px, 1.4vw, 20px);
		height: clamp(460px, 72vh, 700px);
		border-top: 0;
	}

	.psu-svc__item {
		flex: 1 1 0;
		min-width: 0;
		border-bottom: 0;
		transition: flex-grow .9s cubic-bezier(.22, .61, .36, 1);
	}

	.psu-svc__item:has(.is-on) {
		flex-grow: 1.7;
	}

	.entry-content .psu-svc a.psu-svc__row,
	.psu-svc__row {
		display: flex;
		flex-direction: column;
		justify-content: flex-end;
		align-items: flex-start;
		gap: 14px;
		text-align: left;
		height: 100%;
		min-height: 0;
		padding: clamp(22px, 2.4vw, 34px);
	}

	.psu-svc__img,
	.psu-svc__row.is-on .psu-svc__img {
		clip-path: inset(0 0 0 0 round 24px);
	}

	/* Photos en pleine couleur même sans survol (Laura, 2026-11-02 : avant, désaturées et assombries). */
	.psu-svc__img img {
		transition: transform .9s cubic-bezier(.22, .61, .36, 1);
	}

	.psu-svc__img::after {
		background: linear-gradient(180deg, rgba(10, 8, 7, .35) 0%, rgba(10, 8, 7, 0) 35%, rgba(10, 8, 7, .78) 100%);
	}

	.psu-svc__num {
		position: absolute;
		top: clamp(22px, 2.4vw, 34px);
		left: clamp(22px, 2.4vw, 34px);
		color: rgba(255, 255, 255, .8);
	}

	/* Taille calculée pour que « Professionnels » tienne même dans un panneau rétréci (quand un
	   autre panneau s'élargit au survol) ; avant : clamp(26px, 2.7vw, 44px), rogné (Laura, 2026-11-01). */
	.psu-svc__name,
	.psu-svc:not(.is-live) .psu-svc__name {
		font-size: clamp(20px, calc(3.2vw - 6px), 36px);
		white-space: normal;
		color: #fff;
		opacity: 1;
	}

	.psu-svc__row.is-on .psu-svc__name {
		transform: none;
	}

	/* Même hauteur réservée aux trois descriptions : les titres restent alignés quelle que soit la
	   longueur du texte (Laura, 2026-11-01 : « Voyage photo » était plus bas que les deux autres). */
	.psu-svc__desc {
		max-width: 34ch;
		min-height: calc(1.6em * 4);
		color: rgba(255, 255, 255, .88);
	}
}

/* Panneaux plus étroits : le texte des Professionnels passe sur 5 lignes. */
@media (min-width: 781px) and (max-width: 1100px) {
	.psu-svc__desc {
		min-height: calc(1.6em * 5);
	}
}

@media (min-width: 781px) and (max-width: 820px) {
	.psu-svc__desc {
		min-height: calc(1.6em * 6);
	}
}

@media (min-width: 781px) {

	.psu-svc__arrow {
		position: absolute;
		top: clamp(18px, 2vw, 28px);
		right: clamp(22px, 2.4vw, 34px);
	}

	/* Arrivée à l'écran : chaque photo monte depuis le bas, l'une après l'autre. */
	.psu-svc.is-live:not(.is-in) .psu-svc__img {
		clip-path: inset(100% 0 0 0 round 24px);
	}

	.psu-svc.is-live:not(.is-in) .psu-svc__name,
	.psu-svc.is-live:not(.is-in) .psu-svc__num {
		opacity: 0;
		transform: translateY(24px);
	}

	.psu-svc.is-live .psu-svc__num {
		transition: opacity .7s, transform .9s cubic-bezier(.22, .61, .36, 1), color .6s;
	}

	.psu-svc.is-live .psu-svc__item:nth-child(2) .psu-svc__img,
	.psu-svc.is-live .psu-svc__item:nth-child(2) .psu-svc__name,
	.psu-svc.is-live .psu-svc__item:nth-child(2) .psu-svc__num {
		transition-delay: .15s;
	}

	.psu-svc.is-live .psu-svc__item:nth-child(3) .psu-svc__img,
	.psu-svc.is-live .psu-svc__item:nth-child(3) .psu-svc__name,
	.psu-svc.is-live .psu-svc__item:nth-child(3) .psu-svc__num {
		transition-delay: .3s;
	}

	.psu-svc.is-live .psu-svc__img {
		transition: clip-path 1.2s cubic-bezier(.22, .61, .36, 1);
	}

	.psu-svc:not(.is-live) .psu-svc__arrow {
		opacity: 1;
		transform: none;
	}

	/* Une fois arrivé, le survol réagit sans attendre. */
	.psu-svc.is-live.is-settled .psu-svc__item .psu-svc__img,
	.psu-svc.is-live.is-settled .psu-svc__item .psu-svc__name,
	.psu-svc.is-live.is-settled .psu-svc__item .psu-svc__num {
		transition-delay: 0s;
	}
}

/* Prestations (2026-11-03) : plus de numéros 01 / 02 / 03 ; flèche blanche quel que soit le thème,
   en bas à droite de chaque tuile. */
.psu-svc .psu-svc__arrow {
	position: absolute;
	top: auto;
	right: clamp(18px, 2.4vw, 34px);
	bottom: clamp(14px, 2vw, 28px);
	color: #fff;
	line-height: 1;
}

@media (max-width: 780px) {
	.entry-content .psu-svc a.psu-svc__row,
	.psu-svc__row {
		grid-template-columns: minmax(0, 1fr);
	}

	.psu-svc__desc {
		grid-column: 1;
		padding-right: 40px;
	}
}

/* Tablette (pas de survol) : les trois panneaux restent entièrement allumés. */
@media (hover: none) and (min-width: 781px) {
	.psu-svc__img img {
		filter: none;
	}
}

/* ================================================================ barre de menu sur la vidéo :
   transparente (textes blancs) tant que le bloc des vagues est sous elle ; son fond n'apparaît
   qu'au bloc suivant (ui.css le met dès qu'on quitte le haut de la page). */

html.psu-over-hero .site-header .navbar,
html.psu-over-hero .headroom--not-top .navbar,
html.psu-over-hero .has-header-video.inspiro-front-page .headroom--not-top .navbar,
html.psu-over-hero .has-header-image.inspiro-front-page .headroom--not-top .navbar {
	background: transparent !important;
	-webkit-backdrop-filter: none !important;
	backdrop-filter: none !important;
	box-shadow: none !important;
}

html.psu-over-hero[data-psu-theme="light"] .headroom--not-top .site-title,
html.psu-over-hero[data-psu-theme="light"] .headroom--not-top .site-title *,
html.psu-over-hero[data-psu-theme="light"] .headroom--not-top .navbar-nav > li > a,
html.psu-over-hero[data-psu-theme="light"] .headroom--not-top .navbar-nav > li > a .svg-icon,
html.psu-over-hero[data-psu-theme="light"] .headroom--not-top .psu-theme-toggle {
	color: #fff !important;
	fill: #fff !important;
}

html.psu-over-hero[data-psu-theme="light"] .headroom--not-top .navbar-toggle .icon-bar {
	background: #fff !important;
}

html.psu-over-hero[data-psu-theme="light"] .headroom--not-top .psu-lang__opt:not(.is-current) {
	color: #fff !important;
}

html.psu-over-hero[data-psu-theme="light"] .headroom--not-top .psu-lang,
html.psu-over-hero[data-psu-theme="light"] .headroom--not-top .psu-theme-toggle {
	border-color: rgba(255, 255, 255, .35) !important;
}

/* ================================================================ les deux portfolios en « portes » */

.entry-content > .psu-doors.alignfull,
.entry-content .psu-doors.alignfull,
.psu-doors.alignfull {
	width: 100vw !important;
	max-width: none !important;
	margin: 0 calc(50% - 50vw) !important;
}

.psu-doors {
	padding: clamp(40px, 6vw, 96px) var(--psu-gutter, 24px);
}

.psu-doors__grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: clamp(14px, 2vw, 28px);
	max-width: 1240px;
	margin: 0 auto;
}

.entry-content .psu-doors a.psu-door,
.psu-door {
	position: relative;
	display: flex;
	align-items: flex-end;
	aspect-ratio: 4 / 3;
	overflow: hidden;
	border: 1px solid var(--psu-line);
	border-radius: 28px;
	color: #fff !important;
	text-decoration: none !important;
	background: #0a0807 !important;
	isolation: isolate;
	transition: box-shadow .8s cubic-bezier(.22, .61, .36, 1), transform .8s cubic-bezier(.22, .61, .36, 1), border-color .6s;
}

.psu-door__media {
	position: absolute;
	inset: 0;
	z-index: -1;
}

.psu-door__media img,
.psu-door__media video {
	width: 100% !important;
	height: 100% !important;
	max-width: none !important;
	object-fit: cover;
	transform: scale(1.03);
	transition: transform 1.6s cubic-bezier(.22, .61, .36, 1);
}

/* Dégradé en bas pour que le titre se lise sur toutes les images. */
.psu-door::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: linear-gradient(to top, rgba(10, 8, 7, .78) 0%, rgba(10, 8, 7, .25) 45%, rgba(10, 8, 7, 0) 70%);
}

.psu-door__body {
	display: grid;
	gap: 6px;
	padding: clamp(22px, 3vw, 40px);
}

.psu-door__kicker {
	font-size: 12px;
	font-weight: 500;
	letter-spacing: .26em;
	text-transform: uppercase;
	color: #d8c3a0;
}

.psu-door__title {
	font-size: clamp(44px, 6vw, 92px);
	font-weight: 600;
	line-height: .95;
	letter-spacing: -.035em;
}

.psu-door__cta {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	margin-top: 10px;
	padding: 10px 18px;
	justify-self: start;
	border: 1px solid rgba(255, 255, 255, .45);
	border-radius: 999px;
	background: rgba(255, 255, 255, .08);
	-webkit-backdrop-filter: blur(10px);
	backdrop-filter: blur(10px);
	font-size: 15px;
	font-weight: 500;
	transition: background-color .5s, color .5s, border-color .5s;
}

.psu-door__cta i {
	font-style: normal;
	transition: transform .6s cubic-bezier(.22, .61, .36, 1);
}

.psu-door:hover,
.psu-door:focus-visible {
	border-color: color-mix(in srgb, #d8c3a0 55%, transparent);
	box-shadow: 0 30px 70px -28px color-mix(in srgb, #d8c3a0 55%, transparent);
	transform: translateY(-4px);
	outline: none;
}

.psu-door:hover .psu-door__media img,
.psu-door:hover .psu-door__media video,
.psu-door:focus-visible .psu-door__media img,
.psu-door:focus-visible .psu-door__media video {
	transform: scale(1.08);
}

.psu-door:hover .psu-door__cta,
.psu-door:focus-visible .psu-door__cta {
	border-color: #f2f0ec;
	background: #f2f0ec;
	color: #0a0a0a;
}

.psu-door:hover .psu-door__cta i,
.psu-door:focus-visible .psu-door__cta i {
	transform: translateX(5px);
}

@media (max-width: 780px) {
	.psu-doors__grid {
		grid-template-columns: 1fr;
	}

	.entry-content .psu-doors a.psu-door,
	.psu-door {
		aspect-ratio: 4 / 3;
	}
}

@media (prefers-reduced-motion: reduce) {
	.psu-door,
	.psu-door__media img,
	.psu-door__media video {
		transition: none !important;
	}

	.psu-door:hover {
		transform: none;
	}
}

/* Version posée dans la bannière de la page Portfolio : deux cartes plus basses, sous le titre. */
.entry-content .psu-doors--banner,
.psu-doors--banner {
	width: 100%;
	max-width: 920px !important;
	margin: clamp(28px, 4vw, 48px) auto 0 !important;
	padding: 0;
}

.psu-doors--banner .psu-doors__grid {
	gap: clamp(12px, 1.6vw, 22px);
}

.entry-content .psu-doors--banner a.psu-door,
.psu-doors--banner .psu-door {
	aspect-ratio: 16 / 11;
	border-color: rgba(255, 255, 255, .28);
	border-radius: 24px;
	box-shadow: 0 24px 60px -30px rgba(0, 0, 0, .7);
	text-align: left;
}

.psu-doors--banner .psu-door__title {
	font-size: clamp(36px, 4.4vw, 62px);
}

.psu-doors--banner .psu-door__body {
	padding: clamp(18px, 2.4vw, 30px);
}

@media (max-width: 780px) {
	.entry-content .psu-doors--banner a.psu-door,
	.psu-doors--banner .psu-door {
		aspect-ratio: 16 / 10;
	}
}

/* ================================================================ bloc « Laura XAVIER » (psu-meet)
   Décor ajouté par psu_meet_render() autour des blocs Gutenberg, qui restent modifiables. */

.entry-content .psu-meet {
	position: relative;
	padding-top: clamp(40px, 6vw, 90px);
	padding-bottom: clamp(40px, 6vw, 90px);
	overflow-x: clip;
}

.entry-content .psu-meet > .wp-block-columns {
	position: relative;
	z-index: 1;
	align-items: center !important;
	gap: clamp(32px, 6vw, 96px);
}

/* ---------------------------------------------------------------- portrait */

.psu-meet__media {
	position: relative;
	display: grid;
	place-items: center;
	width: min(400px, 78vw);
	margin: 0 auto;
}

/* Portrait détouré (Laura, 2026-11-03 : « fond noir, il faut détourer Laura ») : Laura posée
   directement sur le fond de la page (noir en mode sombre, beige en clair), sans cadre, sans bande
   ni dégradé de fond ; seul le bas des jambes, coupé par le cadre de la photo, s'efface doucement.
   Photos détourées : médiathèque « laura-detouree-couleur » / « laura-detouree-nb ». */
.entry-content .psu-meet .psu-portrait {
	z-index: 2;
	grid-area: 1 / 1;
	width: 100% !important;
	max-width: none;
	aspect-ratio: auto;
	margin: 0 !important;
	overflow: visible;
	border-radius: 0;
	box-shadow: none;
}

.entry-content .psu-meet .psu-portrait img,
.entry-content .psu-meet .psu-portrait:hover img {
	position: static !important;
	width: 100% !important;
	height: auto !important;
	object-fit: contain;
	transform: none !important;
	border-radius: 0 !important;
	-webkit-mask-image: linear-gradient(180deg, #000 82%, transparent 100%);
	mask-image: linear-gradient(180deg, #000 82%, transparent 100%);
}

/* Apparition de la photo : simple fondu doux (pas de balayage). */
body .entry-content .psu-meet.is-live .psu-portrait,
body .entry-content .psu-meet.is-in .psu-portrait {
	clip-path: none;
	transition: opacity 1.6s ease;
}

body .entry-content > .wp-block-group.psu-meet.psu-meet > .wp-block-columns.wp-block-columns {
	max-width: 1180px !important;
	margin-left: auto !important;
	margin-right: auto !important;
	align-items: flex-end !important;
}

/* Photo grande, rapprochée du centre ; le texte reste centré verticalement à côté. */
body .entry-content .psu-meet .psu-meet__media {
	width: min(520px, 42vw);
	margin: 0 0 0 auto;
}

body .entry-content > .wp-block-group.psu-meet > .wp-block-columns > .wp-block-column:last-child {
	align-self: center;
}

@media (max-width: 780px) {
	body .entry-content .psu-meet .psu-meet__media {
		width: min(380px, 92%);
		margin: 0 auto;
	}
}

/* Mode sombre : portrait en noir et blanc (comme À propos) ; mode clair : en couleur. */
.entry-content .psu-meet .psu-portrait img.psu-portrait__dark {
	display: none;
}

:root:not([data-psu-theme="light"]) .entry-content .psu-meet .psu-portrait img.psu-portrait__dark {
	display: block;
}

:root:not([data-psu-theme="light"]) .entry-content .psu-meet .psu-portrait img.psu-portrait__light {
	display: none;
}

/* ---------------------------------------------------------------- textes */

.entry-content .psu-meet .wp-block-column:last-child {
	text-align: left;
}

.entry-content .psu-meet .wp-block-column:last-child > .wp-block-group {
	padding: 0 !important;
}

.entry-content .psu-meet .wp-block-column:last-child > .wp-block-group > * {
	margin-left: 0 !important;
	margin-right: 0 !important;
}

/* Le nom : grand et léger (taille réglable dans l'éditeur : pas de !important). */
.entry-content .psu-meet h2.wp-block-heading {
	margin: 0 0 18px !important;
	font-size: clamp(44px, 6vw, 84px);
	font-weight: 400;
	line-height: 1;
	letter-spacing: -.03em;
	text-align: left !important;
}

.entry-content .psu-meet h2.wp-block-heading + p {
	max-width: 30ch;
	margin: 0 !important;
	font-size: clamp(17px, 1.5vw, 20px);
	line-height: 1.6;
	text-align: left !important;
	color: var(--psu-muted);
}

.psu-meet__tags {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 26px 0 30px !important;
	padding: 0 !important;
	list-style: none !important;
}

.psu-meet__tags li {
	margin: 0 !important;
	padding: 7px 16px !important;
	border: 1px solid color-mix(in srgb, var(--psu-gold, var(--psu-accent)) 45%, transparent);
	border-radius: 999px;
	font-size: 13px;
	letter-spacing: .04em;
	color: var(--psu-text);
	background: color-mix(in srgb, var(--psu-gold, var(--psu-accent)) 8%, transparent);
	list-style: none !important;
	transition: background-color .5s, border-color .5s, transform .5s cubic-bezier(.22, .61, .36, 1);
}

.psu-meet__tags li::before {
	content: "";
	display: inline-block;
	width: 5px;
	height: 5px;
	margin: 0 7px 2px 0;
	border-radius: 50%;
	vertical-align: middle;
	background: var(--psu-gold, var(--psu-accent));
}

/* Les étiquettes ouvrent le portfolio sur le filtre correspondant. */
.entry-content .psu-meet__tags li:has(a) {
	padding: 0 !important;
}

.entry-content .psu-meet__tags a {
	display: block;
	padding: 7px 16px;
	border-radius: inherit;
	color: inherit !important;
	text-decoration: none !important;
	background: none !important;
}

.psu-meet__tags li:has(a)::before {
	display: none;
}

.psu-meet__tags a::before {
	content: "";
	display: inline-block;
	width: 5px;
	height: 5px;
	margin: 0 7px 2px 0;
	border-radius: 50%;
	vertical-align: middle;
	background: var(--psu-gold, var(--psu-accent));
}

.psu-meet__tags li:has(a:focus-visible) {
	outline: 2px solid var(--psu-gold, var(--psu-accent));
	outline-offset: 2px;
}

.psu-meet__tags li:hover {
	transform: translateY(-2px);
	border-color: var(--psu-gold, var(--psu-accent));
	background: color-mix(in srgb, var(--psu-gold, var(--psu-accent)) 16%, transparent);
}

.entry-content .psu-meet .wp-block-buttons {
	justify-content: flex-start !important;
}

/* ---------------------------------------------------------------- apparition (signature.js) */

.psu-meet.is-live .psu-portrait,
.psu-meet.is-live h2.wp-block-heading,
.psu-meet.is-live .psu-meet__tags li,
.psu-meet.is-live .wp-block-buttons {
	opacity: 0;
	transition: opacity 1.1s cubic-bezier(.22, .61, .36, 1), translate 1.2s cubic-bezier(.22, .61, .36, 1), scale 1.4s cubic-bezier(.22, .61, .36, 1), clip-path 1.4s cubic-bezier(.22, .61, .36, 1);
}

.psu-meet.is-live .psu-portrait { clip-path: inset(100% -40px -90px -40px); }
.psu-meet.is-live h2.wp-block-heading,
.psu-meet.is-live h2.wp-block-heading + p,
.psu-meet.is-live .psu-meet__tags li,
.psu-meet.is-live .wp-block-buttons { translate: 0 24px; }

.psu-meet.is-in .psu-portrait,
.psu-meet.is-in h2.wp-block-heading,
.psu-meet.is-in h2.wp-block-heading + p,
.psu-meet.is-in .psu-meet__tags li,
.psu-meet.is-in .wp-block-buttons {
	opacity: 1;
	translate: 0 0;
	scale: 1;
}

.psu-meet.is-in .psu-portrait { clip-path: inset(-40px -40px -90px -40px); }
.psu-meet.is-in h2.wp-block-heading { transition-delay: .3s; }
.psu-meet.is-in h2.wp-block-heading + p { transition-delay: .45s; }
.psu-meet.is-in .psu-meet__tags li { transition-delay: calc(.6s + var(--k) * .1s); }
.psu-meet.is-in .wp-block-buttons { transition-delay: 1s; }

@media (max-width: 780px) {
	.entry-content .psu-meet .wp-block-column:last-child,
	.entry-content .psu-meet h2.wp-block-heading,
	.entry-content .psu-meet h2.wp-block-heading + p {
		text-align: center !important;
	}

	.entry-content .psu-meet h2.wp-block-heading + p {
		margin: 0 auto !important;
	}

	.psu-meet__tags,
	.entry-content .psu-meet .wp-block-buttons {
		justify-content: center !important;
	}
}

/* Phrase sous le nom : les mots apparaissent l'un après l'autre, tout seuls (signature.js). */
.psu-meet.is-live .psu-meet__w {
	display: inline-block;
	opacity: 0;
	filter: blur(4px);
	translate: 0 .35em;
	transition: opacity .7s ease, filter .7s ease, translate .8s cubic-bezier(.22, .61, .36, 1);
	transition-delay: calc(.55s + var(--w) * .09s);
}

.psu-meet.is-in .psu-meet__w {
	opacity: 1;
	filter: none;
	translate: 0 0;
}

/* Titre final de la bannière d'accueil : ce sont les trois mots (remplis de photos) qui viennent se
   poser sur trois lignes ; le <h1> reste pour Google et les lecteurs d'écran et garde leur hauteur. */
.entry-content .psu-words3--hero.is-live h1.psu-words3__h1,
.psu-words3--hero.is-live .psu-words3__h1 {
	height: var(--stack-h, 300px);
	overflow: hidden;
	font-size: 0 !important;
	line-height: 0 !important;
	color: transparent !important;
}

.psu-words3--hero.is-live .psu-words3__rule {
	margin-top: 22px !important;
}

/* Version plus petite (« is-small ») : liens vers les portfolios sous « Bienvenue dans mon univers »
   (page À propos), même direction artistique que les portes de l'accueil. */
body .entry-content .psu-hello > section.psu-doors.psu-doors--banner.psu-doors--small,
.psu-doors--banner.psu-doors--small {
	max-width: 640px !important;
	margin-left: auto !important;
	margin-right: auto !important;
}

.entry-content .psu-doors--small a.psu-door,
.psu-doors--small .psu-door {
	aspect-ratio: 4 / 3;
	border-color: var(--psu-line);
	border-radius: 20px;
}

.psu-doors--small .psu-door__title {
	font-size: clamp(28px, 3vw, 40px);
}

.psu-doors--small .psu-door__body {
	gap: 4px;
	padding: clamp(14px, 1.8vw, 22px);
}

.psu-doors--small .psu-door__cta {
	margin-top: 6px;
	padding: 7px 14px;
	font-size: 13.5px;
}

@media (max-width: 780px) {
	.psu-doors--small .psu-doors__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.entry-content .psu-doors--small a.psu-door,
	.psu-doors--small .psu-door {
		aspect-ratio: 3 / 4;
	}

	.psu-doors--small .psu-door__cta {
		display: none;
	}
}

/* ================================================================ effets des grands mots (2026-11-09) */

.psu-fx {
	position: absolute;
	inset: 0;
	z-index: 2;
	overflow: hidden;
	pointer-events: none;
}

/* 1er mot : flash d'appareil photo, un seul éclair doux. */
.psu-fx__flash {
	position: absolute;
	inset: 0;
	background: radial-gradient(circle at 50% 48%, #fff 0%, rgba(255, 250, 240, .85) 35%, rgba(255, 250, 240, 0) 75%);
	opacity: 0;
}

[data-fx="0"] .psu-fx__flash {
	animation: psu-fx-flash 1.1s ease-out .25s both;
}

@keyframes psu-fx-flash {
	0% { opacity: 0; }
	7% { opacity: .95; }
	100% { opacity: 0; }
}

/* 2e mot : étoiles blanches qui scintillent autour du mot, tant qu'il est là. */
.psu-fx__stars {
	position: absolute;
	inset: 0;
	opacity: 0;
	transition: opacity .5s ease;
}

[data-fx="1"] .psu-fx__stars {
	opacity: 1;
}

.psu-fx__star {
	position: absolute;
	width: calc(clamp(22px, 3vw, 42px) * var(--s, 1));
	aspect-ratio: 1;
	filter: drop-shadow(0 0 6px rgba(255, 255, 255, .95));
	transform: scale(0);
}

.psu-fx__star::before {
	content: "";
	position: absolute;
	inset: 0;
	background: #fff;
	clip-path: polygon(50% 0, 60% 40%, 100% 50%, 60% 60%, 50% 100%, 40% 60%, 0 50%, 40% 40%);
}

[data-fx="1"] .psu-fx__star {
	animation: psu-fx-twinkle 1.8s ease-in-out var(--d, 0s) infinite;
}

@keyframes psu-fx-twinkle {
	0%, 100% { transform: scale(0) rotate(0); opacity: 0; }
	50% { transform: scale(1) rotate(45deg); opacity: 1; }
}

/* 3e mot : un avion traverse en montant, avec sa traînée. */
.psu-fx__plane {
	position: absolute;
	top: 34%;
	left: 0;
	width: clamp(34px, 4vw, 60px);
	opacity: 0;
}

.psu-fx__plane svg {
	display: block;
	width: 100%;
	fill: #fff8ec;
	transform: rotate(90deg);
	filter: drop-shadow(0 4px 10px rgba(42, 29, 20, .45));
}

.psu-fx__trail {
	position: absolute;
	top: 50%;
	right: 85%;
	width: 32vw;
	height: 3px;
	border-radius: 2px;
	background: linear-gradient(90deg, rgba(255, 248, 236, 0), rgba(255, 248, 236, .85));
	transform: translateY(-50%);
}

[data-fx="2"] .psu-fx__plane {
	animation: psu-fx-fly 2.8s cubic-bezier(.45, .05, .4, 1) .2s both;
}

@keyframes psu-fx-fly {
	0% { transform: translate(-14vw, 14vh) rotate(-9deg); opacity: 0; }
	10% { opacity: 1; }
	88% { opacity: 1; }
	100% { transform: translate(112vw, -12vh) rotate(-9deg); opacity: 0; }
}

/* Téléphone (2026-11-10, Laura : « on doit voir les photos ») : tuile plus haute, titre en bas sur un
   léger dégradé, sans la description (elle reste sur la page de chaque prestation). */
@media (max-width: 600px) {
	.entry-content .psu-svc a.psu-svc__row,
	.psu-svc__row {
		grid-template-columns: minmax(0, 1fr) auto;
		align-items: end;
		min-height: 200px;
		padding: 0 20px 18px;
	}

	.psu-svc__desc {
		display: none;
	}

	.psu-svc__name {
		grid-column: 1;
		grid-row: 1;
	}

	.psu-svc__arrow {
		grid-column: 2;
		grid-row: 1;
	}

	.psu-svc__img::after {
		background: linear-gradient(180deg, rgba(10, 8, 7, 0) 40%, rgba(10, 8, 7, .62) 100%);
	}
}

/* Téléphone (2026-11-10, Laura) : pastilles sous « Laura XAVIER » (Portraits, Mode, Mariages, Voyages)
   deux par deux, de même largeur, au lieu de 3 + 1. */
@media (max-width: 600px) {
	.psu-meet__tags {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		width: 100%;
		max-width: 320px;
		margin-inline: auto !important;
	}

	.psu-meet__tags li {
		text-align: center;
	}
}

/* ================================================================ accueil, animation version 2 (maquette ?anim=2, 2026-11-10)
   « Éditorial chic », tout en blanc (Laura : pas de doré) : obturateur + flash, mise au point + reflet,
   trajectoire de l'avion, puis rassemblement en titre. Animée par hero-v2.js (GSAP). */

/* Avant le départ : aucun mot affiché (sinon « Capturer. » apparaît puis disparaît). */
.psu-anim2 .psu-words3--hero:not(.is-v2) .psu-words3__word {
	visibility: hidden !important;
}

/* La présentation est affichée dès le chargement (pas d'apparition à la fin). */
.psu-anim2 .psu-words3--hero .psu-words3__hero {
	visibility: visible !important;
	opacity: 1 !important;
}

.psu-words3--hero.is-v2 .psu-fx {
	display: none;
}

.psu-words3--hero.is-v2 .psu-words3__word {
	display: block;
	white-space: nowrap;
	will-change: transform;
}

.psu-words3__word .psu-ch {
	display: inline-block;
	white-space: pre;
	will-change: transform, opacity, filter;
}

.psu-v2 {
	position: absolute;
	inset: 0;
	z-index: 3;
	overflow: hidden;
	pointer-events: none;
}

.psu-v2__flash {
	position: absolute;
	inset: 0;
	opacity: 0;
	background: radial-gradient(circle at 50% 50%, #fffdf8 0%, rgba(255, 253, 248, .85) 35%, rgba(255, 253, 248, .4) 100%);
}

.psu-v2__sky {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	overflow: visible;
}

.psu-v2__path {
	stroke: #fff;
	stroke-width: 2.25;
	stroke-linecap: round;
	opacity: 0;
	filter: drop-shadow(0 0 8px rgba(255, 255, 255, .8)) drop-shadow(0 1px 2px rgba(42, 29, 20, .45));
}

.psu-v2__plane {
	position: absolute;
	top: 0;
	left: 0;
	width: clamp(28px, 3vw, 44px);
	height: clamp(28px, 3vw, 44px);
	opacity: 0;
	color: #faf3ea;
	filter: drop-shadow(0 2px 8px rgba(42, 29, 20, .5));
}

.psu-v2__plane svg {
	display: block;
	width: 100%;
	height: 100%;
	fill: currentColor;
}

/* Portraits · Mariages · Voyages (bas de la bannière) : retirés dans la nouvelle animation
   (Laura, 2026-11-10). Le texte reste dans l'éditeur. */
.psu-anim2 .psu-words3--hero .psu-words3__caption,
.psu-words3--hero.is-v2 .psu-words3__caption {
	display: none !important;
}