/* ==========================================================
   Vesta Timeline
   Pour adapter à ton identité, surcharge ces variables
   dans le CSS additionnel de ton thème, par exemple :
   .vesta-timeline { --vt-accent: #ta-couleur; }
   ========================================================== */

.vesta-timeline {
	--vt-accent: #b5653a;          /* pastilles et années */
	--vt-line: rgba(0, 0, 0, 0.15); /* ligne verticale */
	--vt-muted: rgba(0, 0, 0, 0.6); /* intitulé de poste */
	--vt-gap: 2.25rem;              /* espace entre étapes */
	--vt-dot: 0.8rem;               /* taille des pastilles */
	--vt-indent: 2rem;              /* retrait du texte */

	position: relative;
	padding-left: var(--vt-indent);
	margin-block: 1.5rem 3rem;
}

/* Ligne verticale */
.vesta-timeline::before {
	content: "";
	position: absolute;
	left: calc(var(--vt-dot) / 2 - 1px);
	top: 0.4rem;
	bottom: 0.4rem;
	width: 2px;
	background: var(--vt-line);
}

/* Étape */
.vesta-timeline .vesta-timeline__item {
	position: relative;
	margin: 0 0 var(--vt-gap);
}

.vesta-timeline .vesta-timeline__item:last-child {
	margin-bottom: 0;
}

/* Pastille */
.vesta-timeline .vesta-timeline__item::before {
	content: "";
	position: absolute;
	left: calc(-1 * var(--vt-indent));
	top: 0.3em;
	width: var(--vt-dot);
	height: var(--vt-dot);
	border-radius: 50%;
	background: var(--vt-accent);
	box-shadow: 0 0 0 4px var(--wp--preset--color--base, #fff);
}

/* On neutralise les marges automatiques de Gutenberg à l’intérieur d’une étape */
.vesta-timeline .vesta-timeline__item > * {
	margin-block: 0 0.3rem;
}

.vesta-timeline .vesta-timeline__annee {
	color: var(--vt-accent);
	font-size: 0.8rem;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.vesta-timeline .vesta-timeline__titre {
	font-size: 1.2rem;
	line-height: 1.3;
	margin-bottom: 0.2rem;
}

.vesta-timeline .vesta-timeline__role {
	color: var(--vt-muted);
	font-style: italic;
}

.vesta-timeline .vesta-timeline__texte {
	line-height: 1.6;
	max-width: 60ch;
}

/* ---------- Logos des formations : cercle blanc posé sur la ligne ----------
   Une timeline qui contient au moins un logo élargit sa marge gauche ;
   une étape avec logo remplace sa pastille par le cercle. */
.vesta-timeline:has(.vesta-timeline__logo) {
	--vt-logo: 54px;
	--vt-axis: calc(var(--vt-logo) / 2);
	--vt-indent: calc(var(--vt-logo) + 22px);
}

.vesta-timeline:has(.vesta-timeline__logo)::before {
	left: calc(var(--vt-axis) - 1px);
}

.vesta-timeline:has(.vesta-timeline__logo) .vesta-timeline__item::before {
	left: calc(-1 * var(--vt-indent) + var(--vt-axis) - var(--vt-dot) / 2);
}

.vesta-timeline .vesta-timeline__item:has(> .vesta-timeline__logo img[src])::before {
	display: none;
}

/* Le cercle n’apparaît qu’une fois le logo choisi (dans l’éditeur, le cadre vide
   reste un emplacement normal pour pouvoir y déposer l’image). */
.vesta-timeline .vesta-timeline__logo:has(img[src]) {
	position: absolute;
	left: calc(-1 * var(--vt-indent));
	top: -6px;
	width: var(--vt-logo);
	height: var(--vt-logo);
	margin: 0 !important;
	border-radius: 50%;
	background: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
	box-shadow: 0 0 0 4px rgba(243, 230, 216, 0.08);
	z-index: 1;
}

.vesta-timeline .vesta-timeline__logo:has(img[src]) img {
	width: 72%;
	height: 72%;
	object-fit: contain;
}

.vesta-timeline .vesta-timeline__item:has(> .vesta-timeline__logo img[src]) {
	min-height: var(--vt-logo);
}

@media (max-width: 780px) {
	.vesta-timeline:has(.vesta-timeline__logo) { --vt-logo: 44px; }
}

/* Apparition au défilement (site uniquement, désactivée si le visiteur réduit les animations) */
html.vt-js .vesta-timeline .vesta-timeline__item {
	opacity: 0;
	transform: translateY(14px);
	transition: opacity 0.6s ease, transform 0.6s ease;
}

html.vt-js .vesta-timeline .vesta-timeline__item.is-visible {
	opacity: 1;
	transform: none;
}

@media (prefers-reduced-motion: reduce) {
	html.vt-js .vesta-timeline .vesta-timeline__item {
		opacity: 1;
		transform: none;
		transition: none;
	}
}


/* ==========================================================
   Timeline au défilement (vesta-scrolly)
   Couleurs reprises de la section Storybranding Visuel.
   À surcharger dans le CSS additionnel si besoin :
   .vesta-scrolly { --vs-bg: …; --vs-accent: …; }
   ========================================================== */

.vesta-scrolly {
	--vs-bg: #2a1b2a;       /* fond aubergine */
	--vs-accent: #e8501f;   /* orange : numéro, années, titres */
	--vs-gold: #d9a35a;     /* doré : intitulé de poste */
	--vs-text: #f3e6d8;     /* crème : texte courant */
	--vs-dim: 0.3;          /* opacité des étapes inactives */
	--vs-circle: #ffffff;   /* fond des cercles logo */
	--vs-size: 280px;       /* diamètre du cercle sur ordinateur */
	--vs-bp: 900px;         /* info : la mise en page 2 colonnes démarre à 900px */

	background: var(--vs-bg);
	color: var(--vs-text);
	padding: clamp(2.5rem, 6vw, 5rem) clamp(1rem, 5vw, 4rem);
}

.vesta-scrolly .vesta-scrolly__section {
	color: var(--vs-text);
	font-size: clamp(1.6rem, 3vw, 2.2rem);
	margin: 0 0 2.5rem;
}

/* Étape */
.vesta-scrolly .vesta-scrolly__item {
	margin: 0 0 3rem;
}

.vesta-scrolly .vesta-scrolly__item > * {
	margin-block: 0 0.4rem;
}

.vesta-scrolly .vesta-scrolly__media {
	margin: 0 0 1.25rem;
}

.vesta-scrolly .vesta-scrolly__media:has(img[src]) {
	width: 96px;
	height: 96px;
	border-radius: 50%;
	background: var(--vs-circle);
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
}

/* Logos : affichés en entier, centrés dans le cercle */
.vesta-scrolly .vesta-scrolly__media:has(img[src]) img {
	display: block;
	width: 72%;
	height: 72%;
	object-fit: contain;
}

.vesta-scrolly .vesta-scrolly__annee {
	color: var(--vs-accent);
	font-size: 0.85rem;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

.vesta-scrolly .vesta-scrolly__titre {
	color: var(--vs-accent);
	font-size: clamp(1.15rem, 2vw, 1.45rem);
	letter-spacing: 0.06em;
	line-height: 1.3;
	text-transform: uppercase;
}

.vesta-scrolly .vesta-scrolly__role {
	color: var(--vs-gold);
	font-style: italic;
	font-size: 1.05rem;
}

.vesta-scrolly .vesta-scrolly__texte {
	color: var(--vs-text);
	line-height: 1.75;
	max-width: 52ch;
}

/* Scène fixe (créée par le script, cachée sur mobile) */
.vesta-scrolly__stage {
	display: none;
}

@media (min-width: 900px) {
	.vesta-scrolly.vs-ready .vesta-scrolly__layout {
		display: grid;
		grid-template-columns: calc(var(--vs-size) + 20px) minmax(0, 560px);
		gap: 56px;
		align-items: start;
		justify-content: center;
		max-width: 1000px;
		margin-inline: auto;
	}

	.vesta-scrolly.vs-ready .vesta-scrolly__stage {
		display: block;
		position: sticky;
		top: 12vh;
	}

	.vesta-scrolly.vs-ready .vesta-scrolly__steps .vesta-scrolly__media {
		display: none;
	}

	.vesta-scrolly.vs-ready .vesta-scrolly__item {
		min-height: 62vh;
		display: flex;
		flex-direction: column;
		justify-content: center;
		margin: 0;
		opacity: var(--vs-dim);
		transition: opacity 0.5s ease;
	}

	.vesta-scrolly.vs-ready .vesta-scrolly__item.is-active {
		opacity: 1;
	}
}

.vesta-scrolly__num {
	color: var(--vs-accent);
	font-size: clamp(3.5rem, 7vw, 6rem);
	font-weight: 800;
	line-height: 1;
	margin: 0 0 1.25rem;
	font-variant-numeric: tabular-nums;
}

.vesta-scrolly__num span {
	color: var(--vs-text);
	opacity: 0.35;
	font-size: 0.35em;
	font-weight: 600;
	margin-left: 0.35em;
}

.vesta-scrolly__frame {
	position: relative;
	width: var(--vs-size);
	height: var(--vs-size);
	border-radius: 50%;
	overflow: hidden;
	background: var(--vs-circle);
	box-shadow: 0 0 0 8px rgba(243, 230, 216, 0.08); /* halo */
}

.vesta-scrolly__frame img {
	position: absolute;
	inset: 14%;
	width: 72%;
	height: 72%;
	object-fit: contain;
	opacity: 0;
	transform: scale(1.03);
	transition: opacity 0.6s ease, transform 0.9s ease;
}

.vesta-scrolly__frame img.is-active {
	opacity: 1;
	transform: none;
}

/* Repères des années sous l’image, comme les segments du pin */
.vesta-scrolly__dots {
	display: flex;
	gap: 0.5rem;
	margin-top: 1rem;
	padding: 0;
	list-style: none;
}

.vesta-scrolly__dots button {
	appearance: none;
	border: 0;
	padding: 0;
	cursor: pointer;
	height: 4px;
	width: 2.25rem;
	background: var(--vs-text);
	opacity: 0.25;
	transition: opacity 0.4s ease, background 0.4s ease;
}

.vesta-scrolly__dots button.is-active {
	background: var(--vs-accent);
	opacity: 1;
}

.vesta-scrolly__dots button:focus-visible {
	outline: 2px solid var(--vs-gold);
	outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
	.vesta-scrolly .vesta-scrolly__item,
	.vesta-scrolly__frame img,
	.vesta-scrolly__dots button {
		transition: none;
	}
}


/* ==========================================================
   Page CV complète (vesta-cv)
   Fond : transparent, pour laisser voir l’image de fond fixe
   posée sur le groupe « vesta-cv » dans WordPress.
   Variables à surcharger dans le CSS additionnel si besoin.
   ========================================================== */

@font-face {
	font-family: "Changa One";
	src: url("fonts/ChangaOne.ttf") format("truetype");
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}

.vesta-cv {
	--cv-accent: #e8501f;
	--cv-gold: #d9a35a;
	--cv-text: #f3e6d8;
	--cv-menu-bg: rgba(42, 27, 42, 0.92);
	--cv-line: rgba(243, 230, 216, 0.1);
	--cv-width: 1000px;
	--cv-title-font: "Changa One", sans-serif;
	--cv-menu-h: 64px;

	--cv-bg: #2a1b2a; /* couleur de secours, le temps que l’image charge */
	--cv-bg-image: url("https://vesta-brandstudio.com/wp-content/uploads/2026/05/background-violet-header-scaled.jpg");

	position: relative;
	isolation: isolate;
	clip-path: inset(0); /* l’image fixe reste limitée à la page CV */
	color: var(--cv-text);
	background-color: var(--cv-bg);
	margin-block: 0 !important;
	padding: 0 !important;
}

/* Image de fond fixe, plein écran, qui fonctionne aussi sur iPhone
   (où « background-attachment: fixed » est ignoré). */
.vesta-cv::before {
	content: "";
	position: fixed;
	inset: 0;
	z-index: -1;
	background: var(--cv-bg) var(--cv-bg-image) center / cover no-repeat;
	pointer-events: none;
}

.vesta-cv h1, .vesta-cv h2, .vesta-cv h3,
.vesta-cv .vesta-cv__nom {
	font-family: var(--cv-title-font);
	font-weight: 400;
	letter-spacing: 0.01em;
	color: var(--cv-text);
}

.vesta-cv .vesta-scrolly__num {
	font-family: var(--cv-title-font);
	font-weight: 400;
}

.vesta-cv .vesta-scrolly .vesta-scrolly__titre { color: var(--cv-accent); }

.vesta-cv a { color: inherit; }

/* ---------- Menu fixe ---------- */
.vesta-cv .vesta-cv__menu {
	position: sticky;
	top: var(--wp-admin--admin-bar--height, 0px);
	z-index: 50;
	display: flex;
	align-items: center;
	gap: 28px;
	margin: 0;
	padding: 12px max(24px, calc((100% - var(--cv-width)) / 2));
	background: var(--cv-menu-bg);
	-webkit-backdrop-filter: blur(6px);
	backdrop-filter: blur(6px);
	border-bottom: 1px solid var(--cv-line);
}

.vesta-cv .vesta-cv__menu > * { margin: 0; }

.vesta-cv .vesta-cv__nom {
	font-size: 1.25rem;
	white-space: nowrap;
}

.vesta-cv .vesta-cv__nav {
	flex: 1;
	display: flex;
	gap: 22px;
	overflow-x: auto;
	scrollbar-width: none;
	font-size: 0.9rem;
}

.vesta-cv .vesta-cv__nav::-webkit-scrollbar { display: none; }

.vesta-cv .vesta-cv__nav a {
	text-decoration: none;
	white-space: nowrap;
	opacity: 0.6;
	padding: 4px 0;
	border-bottom: 2px solid transparent;
	transition: opacity 0.3s ease, border-color 0.3s ease;
}

.vesta-cv .vesta-cv__nav a:hover,
.vesta-cv .vesta-cv__nav a.is-active {
	opacity: 1;
	border-color: var(--cv-accent);
}

/* ---------- Sections ---------- */
.vesta-cv .vesta-cv__section {
	max-width: var(--cv-width);
	margin: 0 auto !important;
	padding: clamp(3.5rem, 8vw, 5.5rem) 24px;
	scroll-margin-top: calc(var(--cv-menu-h) + var(--wp-admin--admin-bar--height, 0px));
}

.vesta-cv .vesta-cv__section + .vesta-cv__section {
	border-top: 1px solid var(--cv-line);
}

.vesta-cv h1 { font-size: clamp(2.8rem, 6vw, 4.5rem); line-height: 1.05; margin: 0 0 0.6rem; }
.vesta-cv h2 { font-size: clamp(1.8rem, 3.5vw, 2.4rem); line-height: 1.15; margin: 0 0 1.5rem; }

.vesta-cv .vesta-cv__kicker {
	color: var(--cv-accent);
	font-size: 0.8rem;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	margin: 0 0 0.6rem;
}

.vesta-cv .vesta-cv__accroche {
	color: var(--cv-gold);
	font-style: italic;
	font-size: 1.25rem;
	margin: 0 0 1.5rem;
}

.vesta-cv .vesta-cv__lead {
	font-size: 1.1rem;
	line-height: 1.75;
	max-width: 62ch;
}

/* ---------- Boutons ---------- */
.vesta-cv .wp-block-buttons { margin-top: 1.75rem; gap: 14px; }
.vesta-cv .vesta-cv__center { justify-content: center; }

.vesta-cv .wp-block-button__link {
	background: var(--cv-accent);
	color: #fff;
	border: 1px solid var(--cv-accent);
	border-radius: 999px;
	font-weight: 700;
	font-size: 0.9rem;
	padding: 0.7em 1.4em;
	text-decoration: none;
}

.vesta-cv .is-style-outline .wp-block-button__link {
	background: transparent;
	border-color: var(--cv-gold);
	color: var(--cv-gold);
}

.vesta-cv .vesta-cv__menu-btn { margin: 0; }

/* ---------- Présentation ---------- */
.vesta-cv .vesta-cv__hero { align-items: center; gap: 56px; margin: 0; }

.vesta-cv .vesta-cv__photo { margin: 0; }
.vesta-cv .vesta-cv__photo img {
	width: 100%;
	aspect-ratio: 4 / 5;
	object-fit: cover;
	border-radius: 4px;
}

.vesta-cv .vesta-cv__linkedin { margin-top: 1.1rem; font-size: 0.95rem; }
.vesta-cv .vesta-cv__linkedin a {
	color: var(--cv-gold);
	text-decoration: none;
	border-bottom: 1px solid rgba(217, 163, 90, 0.5);
}

/* ---------- Vesta ---------- */
.vesta-cv .vesta-cv__vlogo { margin: 0 0 1.4rem; }
.vesta-cv .vesta-cv__vlogo:has(img[src]) { width: 110px; }
.vesta-cv .vesta-cv__vlogo img {
	width: 110px;
	height: 110px;
	object-fit: contain;
}

.vesta-cv .vesta-cv__cards { gap: 20px; margin: 2rem 0 0; }
.vesta-cv .vesta-cv__cards > .wp-block-column {
	border: 1px solid rgba(243, 230, 216, 0.14);
	padding: 22px;
}
.vesta-cv .vesta-cv__cards h3 {
	color: var(--cv-accent);
	font-size: 1.1rem;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	margin: 0 0 0.5rem;
}
.vesta-cv .vesta-cv__cards p { font-size: 0.95rem; line-height: 1.65; margin: 0; }

/* ---------- Vesta : texte à gauche, logos clients à droite ---------- */
.vesta-cv .vesta-cv__vesta-cols { align-items: center; gap: 56px; margin: 0; }

.vesta-cv .vesta-cv__refs-label { margin-top: 1.75rem; }

.vesta-cv .vesta-cv__refs {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 34px 24px;
	align-items: center;
	margin: 0;
}

.vesta-cv .vesta-cv__refs > * { margin: 0; }

.vesta-cv .vesta-cv__ref:has(img[src]) {
	height: 56px;
	display: flex;
	align-items: center;
	justify-content: center;
}

.vesta-cv .vesta-cv__ref img {
	max-width: 100%;
	max-height: 56px;
	width: auto;
	height: auto;
	object-fit: contain;
}

/* Sur le site : chaque logo est recoloré en doré (PNG transparent ou SVG) */
.vesta-cv .vesta-cv__ref.is-gold {
	-webkit-mask: var(--vcv-ref) center / contain no-repeat;
	mask: var(--vcv-ref) center / contain no-repeat;
	background: var(--cv-gold);
}

.vesta-cv .vesta-cv__ref.is-gold img { opacity: 0; }

/* ---------- Parcours : la timeline se fond dans la page ---------- */
.vesta-cv .vesta-scrolly { background: transparent; padding: 0; }
.vesta-cv .vesta-scrolly .vesta-scrolly__section {
	font-family: var(--cv-title-font);
	font-weight: 400;
}
.vesta-cv .vesta-scrolly .vesta-scrolly__titre {
	font-family: var(--cv-title-font);
	font-weight: 400;
	font-size: clamp(1.25rem, 2.2vw, 1.55rem);
	letter-spacing: 0.02em;
}

/* ---------- Formations : couleurs adaptées au fond sombre ---------- */
.vesta-cv .vesta-timeline {
	--vt-accent: var(--cv-accent);
	--vt-line: rgba(243, 230, 216, 0.15);
	--vt-muted: var(--cv-gold);
}
.vesta-cv .vesta-timeline .vesta-timeline__item::before { box-shadow: none; }
.vesta-cv .vesta-timeline .vesta-timeline__titre {
	font-family: inherit;
	font-weight: 700;
	font-size: 1.05rem;
	color: var(--cv-text);
}
.vesta-cv .vesta-timeline-titre { margin-bottom: 1.5rem; }

/* ---------- Engagements : logo du tiers-lieu dans un cercle blanc ---------- */
.vesta-cv .vesta-cv__eng-cols { align-items: center; gap: 56px; margin: 0; }

.vesta-cv .vesta-cv__eng-logo:has(img[src]) {
	width: 220px;
	height: 220px;
	margin: 0 auto;
	border-radius: 50%;
	background: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
	box-shadow: 0 0 0 8px rgba(243, 230, 216, 0.08);
}

.vesta-cv .vesta-cv__eng-logo img {
	width: 72%;
	height: 72%;
	object-fit: contain;
}

/* ---------- Outils ---------- */
.vesta-cv .vesta-cv__tools {
	display: grid;
	grid-template-columns: repeat(5, minmax(0, 1fr));
	gap: 22px 16px;
	margin: 0 0 2.5rem;
}

.vesta-cv .vesta-cv__tools > * { margin: 0; }

/* Logos d’outils : la case blanche n’apparaît qu’une fois l’image choisie */
.vesta-cv .vesta-cv__tool-logo:has(img[src]) {
	width: 64px;
	height: 64px;
	margin: 0 auto !important;
	background: #fff;
	border-radius: 14px;
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
}
.vesta-cv .vesta-cv__tool-logo:has(img[src]) img {
	width: 70%;
	height: 70%;
	object-fit: contain;
}

.vesta-cv .vesta-cv__skills {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 16px 40px;
}
.vesta-cv .vesta-cv__skills > * { margin: 0; font-size: 0.95rem; }
.vesta-cv .vesta-cv__skills strong { color: var(--cv-gold); }

/* ---------- Style : mosaïque de collages ---------- */
.vesta-cv .vesta-cv__mosaic {
	display: grid;
	grid-template-columns: 2fr 1fr 1fr;
	grid-auto-rows: 200px;
	gap: 14px;
	margin: 2rem 0 1.2rem;
}
.vesta-cv .vesta-cv__mosaic > * { margin: 0; }
.vesta-cv .vesta-cv__mosaic > :first-child { grid-row: span 2; }
.vesta-cv .vesta-cv__collage img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.vesta-cv .vesta-cv__legende { font-size: 0.9rem; opacity: 0.7; }

/* ---------- Contact ---------- */
.vesta-cv .vesta-cv__contact { text-align: center; }
.vesta-cv .vesta-cv__contact h2 { max-width: 22ch; margin-inline: auto; }
.vesta-cv .vesta-cv__coords { font-size: 1.1rem; line-height: 1.8; }

/* Image pas encore choisie : masquée sur le site (jamais dans l’éditeur) */
.vesta-cv .is-vcv-empty { display: none !important; }

/* ---------- Mobile ---------- */
@media (max-width: 780px) {
	.vesta-cv .vesta-cv__menu {
		flex-wrap: wrap;
		gap: 10px 16px;
		padding: 10px 16px;
	}
	.vesta-cv .vesta-cv__nom { flex: 1; }
	.vesta-cv .vesta-cv__nav { order: 3; flex-basis: 100%; gap: 18px; }
	.vesta-cv .vesta-cv__section { padding-inline: 20px; }
	.vesta-cv .vesta-cv__hero .vesta-cv__photo { max-width: 220px; }
	.vesta-cv .vesta-cv__hero > .wp-block-column:last-child { order: -1; }
	.vesta-cv .vesta-cv__tools { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.vesta-cv .vesta-cv__fleche { display: inline-block; transform: rotate(90deg); }
	.vesta-cv .vesta-cv__refs { gap: 26px 18px; }
	.vesta-cv .vesta-cv__vesta-cols { gap: 8px; }
	.vesta-cv .vesta-cv__eng-logo:has(img[src]) { width: 130px; height: 130px; margin: 0; }
	.vesta-cv .vesta-cv__skills { grid-template-columns: 1fr; }
	.vesta-cv .vesta-cv__mosaic { grid-template-columns: 1fr 1fr; grid-auto-rows: 150px; }
	.vesta-cv .vesta-cv__mosaic > :first-child { grid-column: span 2; grid-row: span 2; }
}

@media (prefers-reduced-motion: no-preference) {
	html.vcv-smooth { scroll-behavior: smooth; }
}


/* ==========================================================
   Éditeur : emplacements d’image vides toujours lisibles
   (texte foncé sur carte blanche, quelle que soit la couleur de la page)
   ========================================================== */
.vesta-cv .components-placeholder,
.vesta-scrolly .components-placeholder,
.vesta-timeline .components-placeholder {
	color: #1e1e1e !important;
	background: #fff !important;
	border-radius: 6px;
	box-shadow: inset 0 0 0 1px #ccc;
}

.vesta-cv .components-placeholder .components-placeholder__label,
.vesta-cv .components-placeholder .components-placeholder__instructions,
.vesta-scrolly .components-placeholder .components-placeholder__label,
.vesta-timeline .components-placeholder .components-placeholder__label {
	color: #1e1e1e !important;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
	text-transform: none !important;
	letter-spacing: 0 !important;
}

/* Éditeur uniquement : consigne écrite dans chaque emplacement d’image vide */
.editor-styles-wrapper .vesta-cv .components-placeholder.has-illustration,
.editor-styles-wrapper .vesta-scrolly .components-placeholder.has-illustration,
.editor-styles-wrapper .vesta-timeline .components-placeholder.has-illustration {
	position: relative;
	min-height: 64px;
}

.editor-styles-wrapper .vesta-cv .components-placeholder.has-illustration .components-placeholder__illustration,
.editor-styles-wrapper .vesta-scrolly .components-placeholder.has-illustration .components-placeholder__illustration,
.editor-styles-wrapper .vesta-timeline .components-placeholder.has-illustration .components-placeholder__illustration {
	opacity: 0.35;
}

.editor-styles-wrapper .vesta-cv .components-placeholder.has-illustration::after,
.editor-styles-wrapper .vesta-scrolly .components-placeholder.has-illustration::after,
.editor-styles-wrapper .vesta-timeline .components-placeholder.has-illustration::after {
	content: "+ Clique ici pour ajouter l’image";
	position: absolute;
	inset: 0;
	z-index: 3;
	opacity: 1;
	border: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 6px;
	text-align: center;
	font: 600 13px/1.3 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
	color: #1e1e1e;
	background: transparent;
	pointer-events: none;
}

/* Emplacement sélectionné : on laisse la place aux boutons Téléverser / Médiathèque */
.editor-styles-wrapper .is-selected .components-placeholder.has-illustration::after,
.editor-styles-wrapper .is-selected .components-placeholder.has-illustration .components-placeholder__illustration {
	content: none;
	display: none;
}