/*
Theme Name: Visua
Theme URI: http://localhost:8881
Author: Visua
Description: Thème sur mesure du studio Visua : design graphique, création web, impression et réseaux sociaux.
Version: 1.5.1
Requires at least: 6.9
Tested up to: 7.1
Requires PHP: 8.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: visua
*/

/* ---------- Base ---------- */

:root {
	--visua-filet: rgba(226, 238, 250, 0.18);
	--visua-filet-sombre: #2a3036;
	--visua-voile: rgba(226, 238, 250, 0.01);
	/* Cartes (réalisations, offres, étapes, formulaire) : fond éclairci, bordure et relief nets sur le noir */
	--visua-carte: linear-gradient(165deg, rgba(226, 238, 250, 0.075) 0%, rgba(226, 238, 250, 0.03) 45%, rgba(226, 238, 250, 0.018) 100%);
	--visua-carte-bord: rgba(226, 238, 250, 0.17);
	--visua-carte-ombre: inset 0 1px 0 rgba(255, 255, 255, 0.07), 0 30px 60px -30px rgba(0, 0, 0, 0.9);
	--visua-attenue: rgba(226, 238, 250, 0.55);
	--visua-diagonale: clamp(56px, 14.7vw, 212px);
	--visua-ressort: cubic-bezier(0.23, 1, 0.32, 1);
	--visua-fleche-droite: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12h15M13 6l6 6-6 6'/%3E%3C/svg%3E");
}

html {
	scroll-behavior: smooth;
}

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

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

figure.wp-block-image {
	margin: 0;
}

h1, h2, h3 {
	text-wrap: balance;
	hyphens: none;
}

::selection {
	background: #f0147c;
	color: #fff;
}

:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
	outline: 2px solid #19c3f5;
	outline-offset: 3px;
	border-radius: 4px;
}

.wp-site-blocks > main,
.wp-site-blocks > footer {
	margin-block-start: 0;
}

/*
 * Conteneurs mis en page par ce CSS (groupes en layout « default ») : on retire l'espacement
 * automatique de Gutenberg sur leurs enfants directs. « body » donne juste ce qu'il faut de
 * spécificité pour passer devant :root :where(.is-layout-flow) > * + *, sans écraser les marges
 * déclarées plus bas par les composants (qui sont plus spécifiques).
 */
body .visua-header__barre > *,
body .visua-hero__grille > *,
body .visua-bandeau > *,
body .visua-offres > *,
body .visua-offre > *,
body .visua-etapes > *,
body .visua-etape > *,
body .visua-projet > *,
body .visua-projet__contenu > *,
body .visua-contact > *,
body .visua-footer__appel > *,
body .visua-footer__ligne > *,
body .visua-footer__bas > * {
	margin-block: 0;
}

/* Mots en dégradé : l'italique d'un titre (format natif <em>, donc éditable) */
.wp-block-heading em,
.wp-block-post-title em,
.visua-degrade {
	font-style: italic;
	background: var(--wp--preset--gradient--visua);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
	-webkit-text-fill-color: transparent;
	padding-inline-end: 0.08em;
	margin-inline-end: -0.04em;
}

/* Flèche ↗ (masque CSS, aucune balise SVG dans le contenu) */
/*
 * Signature des titres : le V du logo, en couleurs (la classe garde son nom historique
 * « visua-fleche », utilisée dans le contenu des pages).
 */
.visua-fleche::before {
	content: "";
	display: inline-block;
	flex: none;
	background: url(assets/images/logo-visua-v.svg) no-repeat center / contain;
}

/*
 * Boutons : flèche horizontale après le texte. Deux flèches dans le même masque : au survol, la
 * première sort par la droite pendant que la seconde entre par la gauche (le masque ne peint que
 * dans sa boîte, rien ne déborde).
 */
.wp-block-button .wp-block-button__link::before {
	content: "";
	order: 2;
	display: inline-block;
	flex: none;
	width: 0.95em;
	height: 0.95em;
	background: currentColor;
	-webkit-mask-image: var(--visua-fleche-droite), var(--visua-fleche-droite);
	mask-image: var(--visua-fleche-droite), var(--visua-fleche-droite);
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-size: 100% 100%;
	mask-size: 100% 100%;
	-webkit-mask-position: 0 0, -0.95em 0;
	mask-position: 0 0, -0.95em 0;
	transition: -webkit-mask-position 0.45s var(--visua-ressort), mask-position 0.45s var(--visua-ressort);
}

.wp-block-button .wp-block-button__link:is(:hover, :focus-visible)::before {
	-webkit-mask-position: 0.95em 0, 0 0;
	mask-position: 0.95em 0, 0 0;
}

.visua-fleche::before {
	width: 0.8em;
	height: 0.58em;
	margin-inline-end: 0.28em;
	vertical-align: 0.02em;
}

/* Le V entre en pivotant quand le titre apparaît au défilement. */
.js .visua-apparait.visua-fleche::before {
	opacity: 0;
	transform: scale(0.6) rotate(-14deg);
	transition: opacity 0.5s ease 0.15s, transform 0.8s var(--visua-ressort) 0.15s;
}

.js .visua-apparait.visua-fleche.is-visible::before {
	opacity: 1;
	transform: none;
}

.visua-chapo {
	font-size: var(--wp--preset--font-size--x-large);
	line-height: 1.5;
	max-width: 30em;
}

.visua-chapo em {
	font-style: italic;
}

.visua-attenue {
	color: var(--visua-attenue);
}

/* ---------- Boutons ---------- */

/*
 * Survol des boutons, signature Visua : le dégradé glisse, un reflet lumineux balaie le bouton
 * en diagonale, le bouton se soulève avec un halo aux couleurs du logo et la flèche avance.
 */
.wp-block-button .wp-block-button__link {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	background-size: 220% 100%;
	background-position: 0% 50%;
	transition:
		background-position 0.7s var(--visua-ressort),
		transform 0.35s var(--visua-ressort),
		box-shadow 0.35s var(--visua-ressort);
}

.wp-block-button .wp-block-button__link::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: linear-gradient(110deg, transparent 25%, rgba(255, 255, 255, 0.55) 50%, transparent 75%);
	transform: translateX(-130%);
	transition: transform 0.8s var(--visua-ressort);
}

.wp-block-button .wp-block-button__link:is(:hover, :focus-visible) {
	background-position: 100% 50%;
	transform: translateY(-2px);
	box-shadow: 0 12px 28px -12px rgba(240, 20, 124, 0.7), 0 6px 18px -10px rgba(25, 195, 245, 0.6);
}

.wp-block-button .wp-block-button__link:is(:hover, :focus-visible)::after {
	transform: translateX(130%);
}

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

.wp-site-blocks > header.wp-block-template-part {
	position: sticky;
	top: 0;
	z-index: 100;
}

body.admin-bar .wp-site-blocks > header.wp-block-template-part {
	top: var(--wp-admin--admin-bar--height, 32px);
}

/* L'en-tête flotte sur le hero (transparent), puis se voile au défilement. */
.wp-site-blocks > header.wp-block-template-part + main {
	margin-block-start: -4rem;
}

/*
 * Le voile flouté vit sur un pseudo-élément : un backdrop-filter posé sur l'en-tête lui-même
 * deviendrait le bloc conteneur du menu mobile (position: fixed) et l'enfermerait dans la barre.
 */
.visua-header {
	position: relative;
	isolation: isolate;
}

.visua-header::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: rgba(6, 5, 4, 0.75);
	-webkit-backdrop-filter: blur(14px);
	backdrop-filter: blur(14px);
	opacity: 0;
	transition: opacity 0.3s ease;
}

.is-scrolled .visua-header::before {
	opacity: 1;
}

.visua-header__barre {
	display: flex;
	align-items: center;
	gap: clamp(1rem, 3vw, 2.5rem);
	min-height: 4rem;
}

.visua-header__barre > .wp-block-navigation {
	flex: 1;
}

.visua-header .wp-block-site-logo {
	flex: none;
	line-height: 0;
}

/*
 * Menu : un point (qui devient le dégradé du logo au survol) et un texte qui défile, remplacé par
 * sa copie en blanc. Seul le texte est découpé (overflow sur l'étiquette) : le point et son halo
 * restent entiers.
 */
.visua-header .wp-block-navigation-item__content {
	display: inline-flex;
	align-items: center;
	gap: 0.55rem;
	padding: 0;
	line-height: 1.5;
	text-decoration: none;
	transition: color 0.2s var(--visua-ressort);
}

.visua-header .wp-block-navigation-item__content::before {
	content: "";
	flex: none;
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: currentColor;
	opacity: 0.5;
	transform: scale(0.75);
	transition: transform 0.4s var(--visua-ressort), opacity 0.2s var(--visua-ressort), box-shadow 0.3s var(--visua-ressort);
}

/*
 * L'étiquette fait exactement une ligne et découpe son propre contenu. La copie ambre (ombre
 * portée) attend une ligne au-dessus ; au survol, un retrait haut d'une ligne fait descendre le
 * texte blanc hors champ et entrer la copie.
 */
.visua-header .wp-block-navigation-item__label {
	display: inline-block;
	box-sizing: border-box;
	height: 1.5em;
	line-height: 1.5;
	overflow: hidden;
	vertical-align: top;
	text-shadow: 0 -1.5em 0 var(--wp--preset--color--ambre);
	transition: padding-top 0.45s var(--visua-ressort);
}

.visua-header .wp-block-navigation .wp-block-navigation-item__content:is(:hover, :focus-visible) .wp-block-navigation-item__label {
	padding-top: 1.5em;
}

.visua-header .wp-block-navigation .wp-block-navigation-item__content:is(:hover, :focus-visible, [aria-current="page"])::before {
	background: var(--wp--preset--gradient--visua);
	opacity: 1;
	transform: scale(1.35);
	box-shadow: 0 0 10px rgba(240, 20, 124, 0.55);
}

/*
 * Le bloc Navigation impose « color: inherit » sur ses liens avec un sélecteur (0,3,0) : la couleur
 * de repos se pose donc sur le conteneur, et l'état actif passe par un sélecteur plus spécifique.
 */
.visua-header .wp-block-navigation {
	color: var(--wp--preset--color--blanc);
}

.visua-header .wp-block-navigation .wp-block-navigation-item__content:is(:hover, :focus-visible),
.visua-header .wp-block-navigation .wp-block-navigation-item__content[aria-current="page"] {
	color: var(--wp--preset--color--ambre);
}

.wp-block-navigation.visua-nav .wp-block-navigation__responsive-container.is-menu-open {
	background-color: #060504 !important;
	color: var(--wp--preset--color--blanc) !important;
	padding: 1.5rem clamp(1.125rem, 4vw, 2.5rem);
}

.wp-block-navigation.visua-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
	font-size: var(--wp--preset--font-size--xx-large);
	color: var(--wp--preset--color--blanc);
	gap: 0.9rem;
}

/* Panneau mobile : pas de défilement du texte (écran tactile), un point plus grand. */
.wp-block-navigation.visua-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__label {
	text-shadow: none;
	height: auto;
	padding-top: 0;
	overflow: visible;
}

.wp-block-navigation.visua-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content::before {
	width: 10px;
	height: 10px;
}

.wp-block-navigation.visua-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content:is(:hover, :focus-visible, [aria-current="page"]) {
	color: var(--wp--preset--color--ambre);
}

.wp-block-navigation.visua-nav .wp-block-navigation__responsive-container-open {
	margin-inline-start: auto;
	color: var(--wp--preset--color--blanc);
}

/* Le menu tient sur une ligne : entre 600 et 960 px (tablette), le bouton s'efface (le lien Contact reste). */
.visua-header .wp-block-navigation .wp-block-navigation__container {
	flex-wrap: nowrap;
	white-space: nowrap;
}

@media (max-width: 959px) {
	.visua-header .visua-header__cta {
		display: none;
	}

	.visua-header .wp-block-navigation .wp-block-navigation__container {
		gap: 1.4rem;
	}
}

@media (max-width: 599px) {
	.visua-header .visua-header__cta {
		display: none;
	}
}

/* ---------- Hero ---------- */

.visua-hero {
	position: relative;
	isolation: isolate;
	overflow: hidden;
}

.visua-hero::before {
	content: "";
	position: absolute;
	inset: -10% -20% -10% -20%;
	z-index: -1;
	pointer-events: none;
	background:
		radial-gradient(28% 40% at 10% 90%, rgba(240, 20, 124, 0.55), transparent 70%),
		radial-gradient(26% 38% at 34% 100%, rgba(155, 107, 255, 0.6), transparent 70%),
		radial-gradient(24% 34% at 86% 30%, rgba(255, 138, 31, 0.34), transparent 70%),
		radial-gradient(22% 30% at 70% -4%, rgba(25, 195, 245, 0.28), transparent 70%);
	filter: blur(24px);
	animation: visua-lueur 14s ease-in-out infinite alternate;
}

.visua-hero--accueil {
	/* Les objets 3D ont leur propre bande sous le texte : jamais de chevauchement. */
	--objets-l: min(30vw, 440px, 42vh);
	--objets-h: calc(var(--objets-l) * 0.5625);
	--objets-bas: calc(var(--visua-diagonale) * 0.3);
	min-height: 100vh;
	display: flex;
	align-items: center;
	padding-bottom: calc(var(--objets-bas) + var(--objets-h) + 1rem) !important;
}

/* Champ de couleur qui baigne tout le hero, comme la vidéo de la référence */
.visua-hero--accueil::before {
	inset: -5% -10% 0 -10%;
	background:
		linear-gradient(180deg, rgba(6, 5, 4, 0.4) 0%, transparent 28%),
		radial-gradient(48% 62% at 14% 72%, rgba(240, 20, 124, 0.85), transparent 70%),
		radial-gradient(46% 64% at 44% 62%, rgba(155, 107, 255, 0.72), transparent 72%),
		radial-gradient(36% 52% at 84% 42%, rgba(123, 59, 234, 0.6), transparent 70%),
		radial-gradient(30% 36% at 62% 96%, rgba(255, 138, 31, 0.5), transparent 70%);
	filter: blur(28px);
}

/* Objets 3D brillants en bas à gauche (les capsules de la référence) : illustration vectorielle */
.visua-hero--accueil::after {
	content: "";
	position: absolute;
	z-index: -1;
	pointer-events: none;
	left: clamp(-2rem, -1.5vw, 0rem);
	bottom: var(--objets-bas);
	width: var(--objets-l);
	height: var(--objets-h);
	background: url(assets/images/objets-3d.svg) no-repeat left bottom / contain;
	animation: visua-flotte-doux 9s ease-in-out infinite;
}

@keyframes visua-flotte-doux {
	0%, 100% { translate: 0 0; }
	50% { translate: 0 -12px; }
}

@media (max-width: 781px) {
	.visua-hero--accueil {
		--objets-l: 62vw;
	}
}

.visua-hero--accueil > * {
	width: 100%;
}

.visua-hero__grille {
	display: grid;
	grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
	align-items: center;
	gap: 2rem;
}

body .visua-hero__texte > * + * {
	margin-block-start: 2rem;
}

/* Texte de présentation (À propos) : paragraphes rapprochés et largeur de lecture confortable. */
body .visua-hero__texte > p:not(.visua-chapo) {
	max-width: 36em;
	color: rgba(226, 238, 250, 0.85);
}

body .visua-hero__texte > p:not(.visua-chapo) + p {
	margin-block-start: 1rem;
}

.visua-hero__texte h1 {
	margin: 0;
}

/* L'objet central : le V du logo, qui déborde à droite */
.visua-hero__objet {
	position: relative;
	margin: 0;
}

.visua-hero__objet img {
	display: block;
	width: min(130%, 600px, 72vh);
	max-width: none;
	transform: translateX(8%);
	filter: drop-shadow(0 40px 90px rgba(240, 20, 124, 0.45)) drop-shadow(0 10px 40px rgba(25, 195, 245, 0.25));
	animation: visua-flotte 8s ease-in-out infinite;
}

/* Portrait (À propos) : liseré dégradé du logo, coins arrondis, halo coloré */
.wp-block-image.visua-portrait {
	position: relative;
	margin: 0;
	padding: 2px;
	border-radius: 26px;
	background: var(--wp--preset--gradient--visua);
	box-shadow:
		0 30px 80px -30px rgba(240, 20, 124, 0.55),
		0 20px 60px -30px rgba(25, 195, 245, 0.45);
	max-width: 520px;
	justify-self: end;
}

.wp-block-image.visua-portrait img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: 24px;
}

@media (max-width: 781px) {
	.wp-block-image.visua-portrait {
		order: -1;
		justify-self: stretch;
		max-width: none;
	}
}

@keyframes visua-flotte {
	0%, 100% { translate: 0 0; rotate: -4deg; }
	50% { translate: 0 -22px; rotate: 3deg; }
}

@keyframes visua-lueur {
	from { transform: translate3d(0, 0, 0) scale(1); }
	to { transform: translate3d(2%, -3%, 0) scale(1.06); }
}

@media (max-width: 781px) {
	.visua-hero__grille {
		grid-template-columns: 1fr;
	}

	.visua-hero__objet {
		order: -1;
	}

	.visua-hero__objet img {
		width: 62%;
		margin-inline: auto;
		transform: none;
	}
}

/* Page intérieure : hero plus court */
.visua-hero--page > * + * {
	margin-block-start: 1.5rem;
}

/* ---------- Section en diagonale (chevauche le hero, comme la référence) ---------- */

.wp-block-group.visua-diagonale {
	position: relative;
	z-index: 1;
	margin-block-start: calc(-1 * var(--visua-diagonale)) !important;
	padding-top: calc(var(--visua-diagonale) + var(--wp--preset--spacing--60)) !important;
	background: var(--wp--preset--color--noir);
	clip-path: polygon(0 var(--visua-diagonale), 100% 0, 100% 100%, 0 100%);
}

/* ---------- Bandeau défilant des expertises ---------- */

.visua-bandeau {
	overflow: hidden;
	-webkit-mask: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
	mask: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}

/* Le texte est écrit deux fois : un défilement de -50 % boucle sans à-coup. */
.visua-bandeau p {
	display: flex;
	align-items: center;
	gap: 0.4em;
	width: max-content;
	margin: 0;
	padding-inline-end: 0.4em;
	white-space: nowrap;
	font-size: var(--wp--preset--font-size--giant);
	line-height: 1.3;
	text-transform: uppercase;
	color: var(--wp--preset--color--ardoise);
	animation: visua-defile 45s linear infinite;
}

.visua-bandeau p em {
	font-style: normal;
	color: transparent;
	-webkit-text-stroke: 1.5px rgba(226, 238, 250, 0.55);
}

.visua-bandeau p strong {
	font-weight: inherit;
	background: var(--wp--preset--gradient--visua);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
	-webkit-text-fill-color: transparent;
}

.visua-bandeau:hover p {
	animation-play-state: paused;
}

@keyframes visua-defile {
	to { transform: translateX(-50%); }
}

.visua-signature {
	text-align: center;
	font-size: var(--wp--preset--font-size--x-large);
	line-height: 1.5;
}

.visua-footer__signature em {
	font-style: normal;
}

.visua-signature {
	background: var(--wp--preset--gradient--visua);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
	-webkit-text-fill-color: transparent;
}

/* ---------- Titres de section ---------- */

.visua-titre-centre {
	text-align: center;
}

.visua-titre-centre + p {
	text-align: center;
	font-size: var(--wp--preset--font-size--large);
	max-width: 28em;
	margin-inline: auto;
}

/* ---------- Réalisations ---------- */

.visua-filtres {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
}

.visua-filtre {
	display: inline-flex;
	align-items: baseline;
	gap: 0.3em;
	padding: 0.65rem 1.25rem;
	border-radius: 8px;
	border: 1px solid var(--visua-filet);
	color: var(--visua-attenue);
	font-size: var(--wp--preset--font-size--small);
	line-height: 1.5;
	text-decoration: none;
	transition: color 0.2s ease, border-color 0.2s ease;
}

.visua-filtre sup {
	font-size: 0.75em;
}

.visua-filtre:hover {
	color: var(--wp--preset--color--ambre);
	border-color: rgba(255, 198, 92, 0.45);
}

.visua-filtre.is-active {
	background: var(--wp--preset--gradient--visua);
	border-color: transparent;
	color: var(--wp--preset--color--encre);
}

.visua-projets .wp-block-post-template {
	display: grid;
	grid-template-columns: repeat(12, minmax(0, 1fr));
	gap: 2rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.visua-projets .wp-block-post-template > li {
	grid-column: span 6;
	margin: 0;
}

/* Grille asymétrique : large + étroite, puis étroite + large */
.visua-projets .wp-block-post-template > li:nth-child(4n + 1),
.visua-projets .wp-block-post-template > li:nth-child(4n + 4) {
	grid-column: span 8;
}

.visua-projets .wp-block-post-template > li:nth-child(4n + 2),
.visua-projets .wp-block-post-template > li:nth-child(4n + 3) {
	grid-column: span 4;
}

.visua-projets .wp-block-post-template > li.is-hidden {
	display: none;
}

@media (max-width: 781px) {
	.visua-projets .wp-block-post-template > li:nth-child(n) {
		grid-column: 1 / -1;
	}
}

.visua-projet {
	position: relative;
	height: 100%;
	display: flex;
	flex-direction: column;
	border: 1px solid var(--visua-carte-bord);
	border-radius: 40px;
	overflow: hidden;
	background: var(--visua-carte);
	box-shadow: var(--visua-carte-ombre);
	transition: border-color 0.3s ease, transform 0.45s var(--visua-ressort), box-shadow 0.45s var(--visua-ressort);
}

.visua-projet:hover {
	border-color: rgba(255, 198, 92, 0.55);
	transform: translateY(-4px);
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 40px 70px -35px rgba(0, 0, 0, 0.95), 0 20px 60px -40px rgba(255, 198, 92, 0.35);
}

.visua-projet .wp-block-post-featured-image {
	margin: 0;
	height: clamp(240px, 28vw, 400px);
	border-radius: 40px;
	overflow: hidden;
}

.visua-projet .wp-block-post-featured-image a {
	display: block;
	height: 100%;
}

.visua-projet .wp-block-post-featured-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.7s cubic-bezier(0.2, 0.7, 0.2, 1);
}

.visua-projet:hover .wp-block-post-featured-image img {
	transform: scale(1.04);
}

.visua-projet__contenu {
	flex: 1;
	display: flex;
	flex-direction: column;
	gap: 1rem;
	padding: clamp(1.5rem, 3.4vw, 3rem);
}

.visua-projet__contenu > * {
	margin: 0;
}

.visua-projet .wp-block-post-title {
	font-size: var(--wp--preset--font-size--xx-large);
	line-height: 1.4;
}

.visua-projet .wp-block-post-title a {
	text-decoration: none;
}

/* Toute la carte est cliquable */
.visua-projet .wp-block-post-title a::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 0;
}

.visua-projet .wp-block-post-excerpt__excerpt {
	margin: 0;
}

.visua-etiquettes {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin-top: auto !important;
	position: relative;
	z-index: 1;
}

.visua-etiquettes .wp-block-post-terms__separator {
	display: none;
}

.visua-etiquettes a {
	display: inline-block;
	padding: 0.2rem 0.5rem;
	border-radius: 4px;
	border: 1px solid rgba(226, 238, 250, 0.14);
	background: rgba(226, 238, 250, 0.08);
	color: var(--wp--preset--color--gris);
	font-size: var(--wp--preset--font-size--x-small);
	font-style: italic;
	line-height: 1.5;
	text-transform: uppercase;
	text-decoration: none;
}

.visua-etiquettes a:hover {
	color: var(--wp--preset--color--ambre);
}

/* Page projet */
.visua-projet-hero .wp-block-post-featured-image img {
	border-radius: 40px;
}

.single-projet .wp-block-post-content h2 {
	font-size: var(--wp--preset--font-size--xx-large);
	margin-top: var(--wp--preset--spacing--60);
}

/* Captures d'écran des sites réalisés */
.single-projet .wp-block-image.visua-capture {
	margin-block: var(--wp--preset--spacing--40);
}

.single-projet .wp-block-image.visua-capture img {
	width: 100%;
	border-radius: 16px;
	border: 1px solid var(--visua-filet);
	box-shadow: 0 30px 60px -30px rgba(0, 0, 0, 0.8);
}

.single-projet .visua-captures-mobile {
	max-width: 640px;
	margin-inline: auto;
	gap: var(--wp--preset--spacing--40);
}

.single-projet .wp-block-image.visua-capture--mobile img {
	border-radius: 28px;
}

/* Montages vidéo : texte à gauche, vidéo portrait à droite dans un liseré dégradé */
.visua-video-duo {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 400px);
	gap: var(--wp--preset--spacing--50);
	align-items: center;
	margin-block: var(--wp--preset--spacing--60);
}

.visua-video-duo > *,
.single-projet .wp-block-post-content .visua-video-duo__texte > h2:first-child {
	margin-block: 0;
}

.wp-block-video.visua-video {
	margin: 0;
	padding: 2px;
	border-radius: 26px;
	background: var(--wp--preset--gradient--visua);
	box-shadow: 0 30px 80px -30px rgba(240, 20, 124, 0.5), 0 20px 60px -30px rgba(25, 195, 245, 0.4);
}

.wp-block-video.visua-video video {
	display: block;
	width: 100%;
	height: auto;
	border-radius: 24px;
	background: var(--wp--preset--color--noir);
}

@media (max-width: 781px) {
	.visua-video-duo {
		grid-template-columns: minmax(0, 1fr);
	}

	.wp-block-video.visua-video {
		justify-self: center;
		width: 100%;
		max-width: 420px;
	}
}

.visua-projet-nav {
	border-top: 1px solid var(--visua-filet-sombre);
	padding-top: var(--wp--preset--spacing--40);
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: 1rem;
}

.visua-projet-nav a {
	text-decoration: none;
}

/* ---------- Offres ---------- */

.visua-offres {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr));
	gap: 2rem;
}

.visua-offre {
	display: flex;
	flex-direction: column;
	padding: 2rem;
	border: 1px solid var(--visua-carte-bord);
	border-radius: 16px;
	background: var(--visua-carte);
	box-shadow: var(--visua-carte-ombre);
	-webkit-backdrop-filter: blur(6px);
	backdrop-filter: blur(6px);
}

.visua-offre > * {
	margin: 0;
}

.visua-offre .visua-offre__nom {
	font-size: 1.5rem;
	line-height: 1.5;
	text-transform: uppercase;
	background: var(--wp--preset--gradient--visua);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
	-webkit-text-fill-color: transparent;
	align-self: flex-start;
}

.visua-offre .visua-offre__accroche {
	margin-bottom: 2.5rem;
}

.visua-offre .visua-offre__mention {
	color: var(--wp--preset--color--gris);
}

.visua-offre .visua-offre__prix {
	font-size: var(--wp--preset--font-size--huge);
	line-height: 1.1;
	margin-bottom: 2rem;
}

.visua-offre .wp-block-buttons {
	margin-bottom: 2.5rem;
}

.visua-offre .wp-block-button,
.visua-offre .wp-block-button__link {
	width: 100%;
}

.visua-offre .visua-offre__rubrique {
	font-size: var(--wp--preset--font-size--large);
	margin-bottom: 0.75rem;
}

.visua-offre .visua-offre__rubrique ~ .visua-offre__rubrique {
	margin-top: 2rem;
}

.visua-offre ul {
	padding-left: 1.2em;
}

.visua-offre li + li {
	margin-top: 0.35rem;
}

/* ---------- Méthode (mêmes cartes que les offres) ---------- */

.visua-etapes {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
	gap: 2rem;
}

/* Cinq outils sur une ligne en grand écran. */
.visua-etapes.visua-outils {
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr));
	gap: 1.5rem;
}

.visua-etape {
	padding: 2rem;
	border: 1px solid var(--visua-carte-bord);
	border-radius: 16px;
	background: var(--visua-carte);
	box-shadow: var(--visua-carte-ombre);
}

body .visua-etape > * + * {
	margin-top: 0.75rem;
}

.visua-etape .visua-etape__numero {
	font-size: var(--wp--preset--font-size--xxx-large);
	line-height: 1.2;
	font-style: italic;
	background: var(--wp--preset--gradient--visua);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
	-webkit-text-fill-color: transparent;
	align-self: flex-start;
	display: inline-block;
}

.visua-etape h3 {
	font-size: var(--wp--preset--font-size--large);
	line-height: 1.4;
}

/* ---------- Contact ---------- */

.visua-contact {
	display: grid;
	grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
	gap: 2rem;
	align-items: start;
}

@media (max-width: 781px) {
	.visua-contact {
		grid-template-columns: 1fr;
	}
}

.visua-formulaire {
	padding: clamp(1.5rem, 3vw, 2.5rem);
	border: 1px solid var(--visua-carte-bord);
	border-radius: 16px;
	background: var(--visua-carte);
	box-shadow: var(--visua-carte-ombre);
}

.visua-formulaire .wpcf7-form p {
	margin: 0 0 1.25rem;
}

.visua-formulaire label {
	display: block;
	color: var(--wp--preset--color--gris);
}

.visua-formulaire .wpcf7-form-control-wrap {
	display: block;
	margin-top: 0.4rem;
}

.visua-formulaire input[type="text"],
.visua-formulaire input[type="email"],
.visua-formulaire input[type="tel"],
.visua-formulaire select,
.visua-formulaire textarea {
	display: block;
	width: 100%;
	box-sizing: border-box;
	padding: 0.75rem 1rem;
	border-radius: 8px;
	border: 1px solid var(--visua-filet);
	background: transparent;
	color: var(--wp--preset--color--blanc);
	font: inherit;
	transition: border-color 0.2s ease;
}

.visua-formulaire select option {
	background: #060504;
}

.visua-formulaire input:focus,
.visua-formulaire select:focus,
.visua-formulaire textarea:focus {
	outline: none;
	border-color: var(--wp--preset--color--blanc);
}

.visua-formulaire .wpcf7-acceptance label {
	display: flex;
	gap: 0.6em;
	align-items: flex-start;
	color: var(--visua-attenue);
	font-size: var(--wp--preset--font-size--small);
}

.visua-formulaire .wpcf7-acceptance input {
	margin-top: 0.25em;
	accent-color: #f0147c;
}

.visua-formulaire .wpcf7-list-item {
	margin: 0;
}

.visua-formulaire .wpcf7-submit {
	cursor: pointer;
	border: 0;
	border-radius: 8px;
	padding: 0.65rem 1rem;
	width: 100%;
	color: var(--wp--preset--color--encre);
	font: 600 0.9375rem / 1.5 var(--wp--preset--font-family--sora);
	/* Un <input> n'a pas de pseudo-élément : le reflet est un premier calque de fond. */
	background:
		linear-gradient(110deg, transparent 35%, rgba(255, 255, 255, 0.55) 50%, transparent 65%) -160% 0 / 60% 100% no-repeat,
		var(--wp--preset--gradient--visua) 0% 50% / 220% 100%;
	transition:
		background-position 0.8s var(--visua-ressort),
		transform 0.35s var(--visua-ressort),
		box-shadow 0.35s var(--visua-ressort);
}

.visua-formulaire .wpcf7-submit:is(:hover, :focus-visible) {
	background-position: 260% 0, 100% 50%;
	transform: translateY(-2px);
	box-shadow: 0 12px 28px -12px rgba(240, 20, 124, 0.7), 0 6px 18px -10px rgba(25, 195, 245, 0.6);
}

.visua-formulaire .wpcf7-spinner {
	display: none;
}

.visua-formulaire .wpcf7-not-valid-tip {
	color: #ff7bf6;
	font-size: var(--wp--preset--font-size--small);
	margin-top: 0.35rem;
}

.visua-formulaire .wpcf7 form .wpcf7-response-output {
	margin: 1rem 0 0;
	border-radius: 8px;
	padding: 0.75rem 1rem;
}

.visua-conseils ul {
	list-style: none;
	padding: 0;
	margin: 0;
}

.visua-conseils li {
	padding: 1rem 0;
	border-bottom: 1px solid var(--visua-filet-sombre);
	color: var(--wp--preset--color--gris);
}

.visua-conseils li strong {
	color: var(--wp--preset--color--blanc);
	font-weight: 500;
}

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

/* Filet dégradé en haut, encart d'appel, ligne (signature, liens, réseaux), puis le mot VISUA géant. */
.wp-block-group.visua-footer {
	position: relative;
	padding-top: var(--wp--preset--spacing--70);
}

.wp-block-group.visua-footer::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 1px;
	background: var(--wp--preset--gradient--visua);
	opacity: 0.6;
}

/* Encart d'appel */
.visua-footer__appel {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 1.5rem 3rem;
	padding: clamp(1.75rem, 4vw, 3.5rem);
	border-radius: 24px;
	border: 1px solid var(--visua-filet);
	background: rgba(226, 238, 250, 0.02);
}

.visua-footer__appel::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background:
		radial-gradient(40% 120% at 0% 100%, rgba(240, 20, 124, 0.28), transparent 70%),
		radial-gradient(35% 120% at 100% 0%, rgba(25, 195, 245, 0.2), transparent 70%);
}

.visua-footer__appel-texte {
	max-width: 40rem;
}

body .visua-footer__appel-texte > * {
	margin-block: 0;
}

body .visua-footer__appel-texte > * + * {
	margin-top: 0.75rem;
}

.visua-footer__appel-titre {
	font-size: var(--wp--preset--font-size--xxx-large);
	line-height: 1.15;
}

/* Ligne : signature, liens, réseaux */
.visua-footer__ligne {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 1.5rem 2.5rem;
	padding-block: var(--wp--preset--spacing--60);
}

.visua-footer__signature {
	font-size: var(--wp--preset--font-size--large);
	line-height: 1.4;
	max-width: 22rem;
}

.visua-footer__signature em {
	font-style: normal;
	background: var(--wp--preset--gradient--visua);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
	-webkit-text-fill-color: transparent;
}

.visua-footer__liens {
	list-style: none;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem 1.75rem;
	font-family: var(--wp--preset--font-family--sora);
	font-size: var(--wp--preset--font-size--small);
}

body .visua-footer__liens > li {
	margin: 0;
}

.visua-footer__liens a {
	display: inline-flex;
	align-items: center;
	gap: 0.45rem;
	color: var(--wp--preset--color--blanc);
	text-decoration: none;
	transition: color 0.2s var(--visua-ressort), translate 0.4s var(--visua-ressort);
}

/* Même point que le menu ; au survol le lien glisse légèrement vers la droite. */
.visua-footer__liens a::before {
	content: "";
	flex: none;
	width: 5px;
	height: 5px;
	border-radius: 50%;
	background: currentColor;
	opacity: 0.5;
	transition: transform 0.4s var(--visua-ressort), opacity 0.2s var(--visua-ressort);
}

.visua-footer__liens a:is(:hover, :focus-visible) {
	color: var(--wp--preset--color--ambre);
	translate: 3px 0;
}

.visua-footer__liens a:is(:hover, :focus-visible)::before {
	background: var(--wp--preset--gradient--visua);
	opacity: 1;
	transform: scale(1.4);
}

/* Réseaux : pastilles rondes cerclées, remplies du dégradé au survol (sélecteur plus fort que celui du bloc). */
.visua-footer .wp-block-social-links.visua-footer__reseaux {
	gap: 0.6rem;
	margin: 0;
}

.visua-footer .wp-block-social-links.visua-footer__reseaux .wp-social-link {
	background: transparent;
	color: var(--wp--preset--color--blanc);
	box-shadow: inset 0 0 0 1px var(--visua-filet);
	transition: background-color 0.3s var(--visua-ressort), box-shadow 0.3s var(--visua-ressort), transform 0.35s var(--visua-ressort);
}

.visua-footer .wp-block-social-links.visua-footer__reseaux .wp-social-link:hover {
	background: var(--wp--preset--gradient--visua);
	box-shadow: inset 0 0 0 1px transparent, 0 10px 22px -10px rgba(240, 20, 124, 0.7);
	transform: translateY(-3px);
}

.visua-footer .wp-block-social-links.visua-footer__reseaux .wp-social-link a {
	padding: 0.6em;
}

/* Barre du bas, précédée du mot VISUA géant en contour dégradé (décor) */
.visua-footer__bas {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: 0.5rem 2rem;
	padding-bottom: 1.75rem;
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--gris-fonce);
}

.visua-footer__bas::before {
	content: "";
	flex: 0 0 100%;
	aspect-ratio: 539 / 112;
	margin-bottom: var(--wp--preset--spacing--50);
	background: url(assets/images/visua-mot-contour.svg) no-repeat center / contain;
	opacity: 0.85;
}

.visua-footer__bas a {
	color: inherit;
	text-decoration: none;
	transition: color 0.2s var(--visua-ressort);
}

.visua-footer__bas a:hover {
	color: var(--wp--preset--color--ambre);
}

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

.js .visua-apparait {
	opacity: 0;
	transform: translateY(28px);
	transition: opacity 0.8s ease, transform 0.8s cubic-bezier(0.2, 0.7, 0.2, 1);
}

.js .visua-apparait.is-visible {
	opacity: 1;
	transform: none;
}

@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation: none !important;
		transition: none !important;
		scroll-behavior: auto !important;
	}

	.js .visua-apparait {
		opacity: 1;
		transform: none;
	}
}