/* ==========================================================================
   Douceur — couche de style commune à tout le site (demande de Laura : un site
   plus féminin, plus doux). Chargée après ui.css ; la retirer suffit à revenir
   au style précédent.
   - noir plus chaud (mode sombre), cartes et photos plus arrondies ;
   - titres un peu plus légers et moins serrés ;
   - un mot en italique dans un titre prend la teinte champagne ;
   - halos champagne très légers au survol, apparitions plus lentes.
   ========================================================================== */

/* Palette de Laura (2026-10-30) : ses couleurs préférées, marron, beige et doré. Le site s'ouvre
   en clair (beige), pied de page marron. Mode sombre : fond noir, écriture blanche, plus de doré
   (Laura, 2026-11-01) ; voir dark.css. */
html[data-psu-theme="light"] {
	--psu-bg: #f4ece2;
	--psu-surface: #fbf7f1;
	--psu-surface-2: #ece0d1;
	--psu-line: rgba(92, 64, 44, .14);
	--psu-line-strong: rgba(92, 64, 44, .3);
	--psu-text: #3b2a1f;
	--psu-muted: #7a6453;
	--psu-accent: #9a7334;
	--psu-glass: rgba(244, 236, 226, .8);
	--psu-btn-bg: rgba(92, 64, 44, .04);
	--psu-btn-solid: #5b3f2c;
	--psu-btn-solid-text: #f8f1e7;
	--psu-shadow: 0 18px 40px rgba(91, 63, 44, .14);
	--psu-gold: #b8914f;
}

:root:not([data-psu-theme="light"]) {
	/* Mode sombre : noir et blanc, sans doré (Laura, 2026-11-01 ; avant : bleu marine et doré). */
	--psu-bg: #000;
	--psu-surface: #111;
	--psu-surface-2: #1c1c1c;
	--psu-line: rgba(255, 255, 255, .14);
	--psu-line-strong: rgba(255, 255, 255, .32);
	--psu-text: #fff;
	--psu-muted: #b8b8b8;
	--psu-accent: #fff;
	--psu-glass: rgba(0, 0, 0, .78);
	--psu-btn-bg: rgba(255, 255, 255, .06);
	--psu-btn-solid: #fff;
	--psu-btn-solid-text: #000;
	--psu-shadow: 0 18px 40px rgba(0, 0, 0, .6);
	--psu-gold: #fff;
}

/* Photos et vidéos en fond : textes clairs, accent doré. */
.wp-block-cover:has(.wp-block-cover__image-background, .wp-block-cover__video-background) {
	--psu-accent: #e2c48d;
	--psu-btn-solid-text: #2a1d14;
	--psu-surface: #0a1830;
}

/* Sélecteur de langue et boutons pleins : marron au lieu du noir. */
html[data-psu-theme="light"] .headroom--not-top .psu-lang__pill {
	background: var(--psu-btn-solid);
}

html[data-psu-theme="light"] .headroom--not-top .psu-lang .psu-lang__opt:hover {
	color: var(--psu-btn-solid-text) !important;
}

.psu-lang a.psu-lang__opt.is-current,
.wp-block-button__link[href*="contact"]:hover,
.wp-block-button__link[href*="devis"]:hover,
div.wpforms-container-full .wpforms-form button[type=submit]:hover,
.psu-consent__btn--solid:hover {
	color: #2a1d14 !important;
}

:root {
	--psu-card-radius: 24px;
	--psu-soft-ease: cubic-bezier(.22, .61, .36, 1);
	--psu-soft-glow: 0 24px 60px -24px color-mix(in srgb, var(--psu-accent) 45%, transparent);
}

/* ---------------------------------------------------------------- titres */

/* Titres plus légers (2026-10-30 : le gras serré faisait « masculin »). */
.entry-content :is(h1, h2, h3, h4).wp-block-heading,
.entry-content .wp-block-cover :is(h1, h2) {
	font-weight: 500;
}

.entry-content :is(h1, h2, h3, h4) strong {
	font-weight: 600;
}

/* Grands noms de l'accueil (prestations, portes) : même légèreté. */
.psu-svc__name,
.psu-svc__title,
.psu-door__title {
	font-weight: 500 !important;
}

/* Titres de section : un peu moins serrés qu'avant (-0,03em). */
.entry-content > .wp-block-group > :is(h1, h2).wp-block-heading:first-child,
.entry-content > :is(h1, h2).wp-block-heading,
.entry-content .wp-block-group > h2.wp-block-heading.has-text-align-center,
.entry-content .wp-block-cover :is(h1, h2) {
	letter-spacing: -.018em;
}

/* Un mot mis en italique dans un titre (Gutenberg) : italique classique, teinte champagne. */
.entry-content :is(h1, h2, h3, h4) em,
.site-footer :is(h1, h2, h3) em {
	font-style: italic;
	color: var(--psu-accent);
}

.entry-content .wp-block-cover :is(h1, h2) em {
	color: inherit;
}

/* ---------------------------------------------------------------- photos et cartes */

/* Photos du contenu : coins arrondis (sauf pleine largeur, ronds et images de cartes). */
.entry-content .wp-block-image:not(.alignfull):not(.psu-portrait) > img:not([style*="border-radius: 50"]),
.entry-content .wp-block-image:not(.alignfull):not(.psu-portrait) > a > img:not([style*="border-radius: 50"]) {
	border-radius: 20px;
}

.entry-content .wp-block-column:has(> :is(.wp-block-image, .wp-block-video):first-child + .wp-block-heading) > .wp-block-image:first-child img {
	border-radius: 0;
}

/* Vidéos du contenu (aperçus portfolio, carrousels…) : mêmes coins que les photos. Le cadre est arrondi
   lui aussi, sinon Safari laisse parfois la vidéo à angles droits. */
.entry-content .wp-block-video:not(.alignfull):not(.alignwide) {
	overflow: hidden;
	border-radius: 20px;
	isolation: isolate;
	-webkit-mask-image: -webkit-radial-gradient(white, black);
}

.entry-content .wp-block-video:not(.alignfull):not(.alignwide) video {
	display: block;
	border-radius: 20px !important;
	object-fit: cover !important;
}

/* Sauf en haut d'une carte (image + titre + texte) : la carte arrondit déjà ses coins. */
.entry-content .wp-block-column:has(> .wp-block-video:first-child + .wp-block-heading) > .wp-block-video:first-child,
.entry-content .wp-block-column:has(> .wp-block-video:first-child + .wp-block-heading) > .wp-block-video:first-child video {
	border-radius: 0 !important;
	-webkit-mask-image: none;
}

/* Grandes cartes « Mes services » de l'accueil (couvertures en grille). */
.entry-content .pattern_multiple_covers .wp-block-cover {
	border-radius: 28px;
	overflow: hidden;
	transition: box-shadow .8s var(--psu-soft-ease), transform .8s var(--psu-soft-ease);
}

.entry-content .pattern_multiple_covers .wp-block-cover:hover {
	box-shadow: var(--psu-soft-glow);
	transform: translateY(-3px);
}

/* Cartes (image + titre + texte) : halo champagne très léger au survol. */
.entry-content .wp-block-column:has(> :is(.wp-block-image, .wp-block-video):first-child + .wp-block-heading),
.entry-content .wp-block-column:has(> .wp-block-heading:first-child + :is(.wp-block-image, .wp-block-video)) {
	transition: border-color .6s var(--psu-soft-ease), box-shadow .8s var(--psu-soft-ease), transform .8s var(--psu-soft-ease);
}

.entry-content .wp-block-column:has(> :is(.wp-block-image, .wp-block-video):first-child + .wp-block-heading):hover,
.entry-content .wp-block-column:has(> .wp-block-heading:first-child + :is(.wp-block-image, .wp-block-video)):hover {
	border-color: color-mix(in srgb, var(--psu-accent) 40%, transparent);
	box-shadow: var(--psu-soft-glow);
}

/* Photos : léger zoom lent au survol. */
.entry-content .wp-block-image img {
	transition: transform 1.4s var(--psu-soft-ease), filter .8s var(--psu-soft-ease);
}

/* ---------------------------------------------------------------- boutons */

.wp-block-button__link:hover,
.wp-element-button:hover {
	box-shadow: 0 10px 34px -12px color-mix(in srgb, var(--psu-accent) 60%, transparent) !important;
}

/* ---------------------------------------------------------------- séparateurs */

/* Filet qui s'estompe aux deux bouts, teinte champagne. */
.entry-content hr.wp-block-separator:not(.wp-block-cover hr) {
	border: 0 !important;
	height: 1px !important;
	background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--psu-accent) 55%, transparent), transparent) !important;
	opacity: 1;
}

/* ---------------------------------------------------------------- apparitions au défilement */

.psu-js .psu-reveal {
	transform: translateY(22px);
	transition:
		opacity 1.2s var(--psu-soft-ease) var(--psu-delay, 0s),
		transform 1.4s var(--psu-soft-ease) var(--psu-delay, 0s);
}

.psu-js .psu-reveal-img img {
	transform: scale(1.07);
	transition: transform 2s var(--psu-soft-ease) var(--psu-delay, 0s);
}

@media (prefers-reduced-motion: reduce) {
	.entry-content .pattern_multiple_covers .wp-block-cover:hover {
		transform: none;
	}
}

/* ---------------------------------------------------------------- vagues en bas des bannières */

.psu-has-wave {
	position: relative;
}

/* La photo s'estompe vers le fond de la page, puis la vague (couleur du fond) termine la bannière :
   pas de couches translucides, pas de liseré, rien qui « salisse » l'image. */
.psu-wave {
	position: absolute;
	left: 0;
	right: 0;
	bottom: -1px;
	z-index: 2;
	height: clamp(80px, 10vw, 150px);
	pointer-events: none;
}

.psu-wave::before {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 100%;
	/* Fondu court (2026-10-30, l'ancien sur 280 % « floutait » trop la bannière) : il ne couvre que
	   la hauteur de la vague, juste assez pour qu'aucun filet de photo ne reste sous ses creux. */
	background: linear-gradient(to bottom, transparent 0%, color-mix(in srgb, var(--psu-bg) 35%, transparent) 45%, var(--psu-bg) 80%);
}

.psu-wave svg {
	position: relative;
	display: block;
	width: 100%;
	height: 100%;
}

.psu-wave__front {
	fill: var(--psu-bg);
}

/* Le texte du premier héros s'efface en rêve (piloté par soft.js). */
.entry-content > .wp-block-cover:first-child .wp-block-cover__inner-container {
	will-change: translate, opacity, filter;
}

/* Bannières qui s'ouvrent au défilement. */
.psu-open {
	will-change: clip-path;
}

/* Titres qui « sortent du flou », comme une mise au point. */
.psu-js :is(h1, h2, h3).psu-reveal {
	filter: blur(10px);
	transition:
		opacity 1.2s var(--psu-soft-ease) var(--psu-delay, 0s),
		transform 1.4s var(--psu-soft-ease) var(--psu-delay, 0s),
		filter 1.4s var(--psu-soft-ease) var(--psu-delay, 0s);
}

.psu-js :is(h1, h2, h3).psu-reveal.psu-in {
	filter: none;
}

/* Parallaxe : propriété « translate », indépendante des transformations des apparitions. */
.psu-px {
	will-change: translate;
}

/* Flèches tapées dans les textes, dessinées au lieu de l’emoji iPhone (ui.js, setupTextArrows). */
.psu-arrow{display:inline-flex;vertical-align:-0.12em;margin-left:0.1em}
.psu-arrow svg{width:0.9em;height:0.9em}

/* Téléphone et tablette : les images restent fixes (Laura, 2026-11-11 : elles « flottaient » au
   défilement). Elles apparaissent en fondu seulement, sans monter ni dézoomer. */
@media (hover: none) and (pointer: coarse) {
	.psu-js .psu-reveal-img,
	.psu-js .psu-reveal:has(img, video) {
		transform: none;
	}

	.psu-js .psu-reveal-img img {
		transform: none;
		transition: none;
	}
}