/* Kiff ton site – Démo : barre de choix + aperçu dans un faux navigateur. */

.ktsdemo {
	--ktsdemo-a: var(--ktsdemo-accent, var(--wp--preset--color--primary, var(--ktsdemo-theme-accent, var(--e-global-color-primary, var(--ast-global-color-0, var(--global-palette1, #2b2e31))))));
	--ktsdemo-fg: var(--wp--preset--color--contrast, currentColor);
	--ktsdemo-line: color-mix(in srgb, var(--ktsdemo-fg) 16%, transparent);
	--ktsdemo-soft: color-mix(in srgb, var(--ktsdemo-fg) 7%, transparent);
	--ktsdemo-radius: 14px;
	--ktsdemo-h: min(78vh, 820px);
	box-sizing: border-box;
	width: 100%;
	max-width: 1400px;
	margin-inline: auto;
	color: var(--ktsdemo-fg);
	font-family: var(--wp--preset--font-family--body, inherit);
}
.ktsdemo *,
.ktsdemo *::before,
.ktsdemo *::after { box-sizing: border-box; }

/* Pleine largeur : calcul avec la largeur de la barre de défilement (--sbw posée par le script). */
.ktsdemo.ktsdemo--full {
	/* ~94 % de la fenêtre, centré. !important : beaucoup de thèmes imposent une largeur fixe (ex. 760 px) à tout le contenu de la page. */
	--ktsdemo-w: min(calc((100vw - var(--sbw, 0px)) * .94), 2000px);
	--ktsdemo-h: min(80vh, 900px);
	width: var(--ktsdemo-w) !important;
	max-width: none !important;
	margin-left: calc(50% - var(--ktsdemo-w) / 2) !important;
	margin-right: 0 !important;
	padding-inline: 0 !important;
}

/* ---- barre de choix (effet verre) ---- */
.ktsdemo-bar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 14px 24px;
	padding: 12px 14px;
	margin-bottom: 16px;
	border: 1px solid var(--ktsdemo-line);
	border-radius: var(--ktsdemo-radius);
	background: color-mix(in srgb, var(--ktsdemo-fg) 5%, transparent);
	-webkit-backdrop-filter: blur(14px) saturate(140%);
	backdrop-filter: blur(14px) saturate(140%);
}
.ktsdemo-group { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }

.ktsdemo button { font: inherit; color: inherit; cursor: pointer; }

/* thèmes */
.ktsdemo-theme {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 6px 14px 6px 6px;
	border: 1px solid var(--ktsdemo-line);
	border-radius: 999px;
	background: transparent;
	transition: background .15s, border-color .15s, box-shadow .15s;
}
.ktsdemo-theme:not(:has(.ktsdemo-theme__shot)) { padding-left: 14px; }
.ktsdemo-theme:hover { background: var(--ktsdemo-soft); }
.ktsdemo-theme[aria-pressed="true"] {
	border-color: var(--ktsdemo-a);
	background: color-mix(in srgb, var(--ktsdemo-a) 14%, transparent);
	box-shadow: 0 0 0 1px var(--ktsdemo-a) inset;
}
.ktsdemo-theme__shot { width: 38px; height: 28px; object-fit: cover; border-radius: 999px; }
.ktsdemo-theme__name { font-weight: 600; font-size: .95rem; white-space: nowrap; }

/* boutons segmentés */
.ktsdemo-seg {
	display: inline-flex;
	padding: 3px;
	border: 1px solid var(--ktsdemo-line);
	border-radius: 999px;
	background: var(--ktsdemo-soft);
}
.ktsdemo-seg__btn {
	padding: 6px 12px;
	border: 0;
	border-radius: 999px;
	background: transparent;
	font-size: .85rem;
	font-weight: 500;
	transition: background .15s;
}
.ktsdemo-seg__btn[aria-pressed="true"] {
	background: var(--ktsdemo-a);
	color: #fff;
}

/* pastilles de couleur */
.ktsdemo-swatches { display: inline-flex; align-items: center; gap: 8px; }
.ktsdemo-swatch {
	width: 24px;
	height: 24px;
	padding: 0;
	border: 2px solid transparent;
	border-radius: 50%;
	background: var(--c, transparent);
	outline: 1px solid var(--ktsdemo-line);
	outline-offset: 1px;
	transition: transform .12s;
}
.ktsdemo-swatch:hover { transform: scale(1.12); }
.ktsdemo-swatch[aria-pressed="true"] { border-color: var(--ktsdemo-fg); outline-color: var(--ktsdemo-fg); }
.ktsdemo-swatch--none {
	background: conic-gradient(from 45deg, #bbb, #eee, #bbb, #eee, #bbb);
}

.ktsdemo-icon-btn {
	display: inline-grid;
	place-items: center;
	width: 34px;
	height: 34px;
	padding: 0;
	border: 1px solid var(--ktsdemo-line);
	border-radius: 50%;
	background: transparent;
}
.ktsdemo-icon-btn:hover { background: var(--ktsdemo-soft); }

.ktsdemo button:focus-visible,
.ktsdemo a:focus-visible { outline: 2px solid var(--ktsdemo-a); outline-offset: 2px; }

/* ---- faux navigateur ---- */
.ktsdemo-stage { display: flex; justify-content: center; }
.ktsdemo-browser {
	width: 100%;
	overflow: hidden;
	border: 1px solid var(--ktsdemo-line);
	border-radius: var(--ktsdemo-radius);
	background: #fff;
	box-shadow: 0 18px 50px -20px rgba(0, 0, 0, .45);
	transition: width .3s ease;
}
.ktsdemo-stage[data-device="tablet"] .ktsdemo-browser { width: min(820px, 100%); }
.ktsdemo-stage[data-device="mobile"] .ktsdemo-browser { width: min(390px, 100%); }

.ktsdemo-chrome {
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 10px 14px;
	background: #eceef1;
	color: #4b5260;
	border-bottom: 1px solid rgba(0, 0, 0, .08);
	font-size: .8rem;
}
.ktsdemo-dots { display: inline-flex; gap: 6px; }
.ktsdemo-dots i { width: 10px; height: 10px; border-radius: 50%; background: #c8ccd3; }
.ktsdemo-address {
	flex: 1;
	min-width: 0;
	padding: 5px 12px;
	border-radius: 999px;
	background: #fff;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.ktsdemo-viewport { position: relative; height: var(--ktsdemo-h); background: #fff; }
.ktsdemo-frame { display: block; width: 100%; height: 100%; border: 0; background: #fff; }

.ktsdemo-loader {
	position: absolute;
	inset: 0 0 auto 0;
	height: 3px;
	overflow: hidden;
	opacity: 0;
	transition: opacity .2s;
	pointer-events: none;
}
.ktsdemo-loader span {
	display: block;
	width: 40%;
	height: 100%;
	background: var(--ktsdemo-a);
	animation: ktsdemo-slide 1s ease-in-out infinite;
}
.ktsdemo.is-loading .ktsdemo-loader { opacity: 1; }
@keyframes ktsdemo-slide { from { transform: translateX(-100%); } to { transform: translateX(260%); } }

/* plein écran : l'aperçu prend tout l'écran */
.ktsdemo-browser:fullscreen { width: 100%; border-radius: 0; display: flex; flex-direction: column; }
.ktsdemo-browser:fullscreen .ktsdemo-viewport { flex: 1; height: auto !important; }

/* ---- pied ---- */
.ktsdemo-foot {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 12px 20px;
	margin-top: 16px;
}
.ktsdemo-note { margin: 0; font-size: .9rem; opacity: .75; }
.ktsdemo-cta {
	display: inline-block;
	padding: 11px 22px;
	border-radius: 999px;
	background: var(--ktsdemo-a);
	color: #fff;
	font-weight: 600;
	text-decoration: none;
	transition: filter .15s, transform .15s;
}
.ktsdemo-cta:hover { filter: brightness(1.1); transform: translateY(-1px); }

.ktsdemo-empty { padding: 16px; border: 1px dashed var(--ktsdemo-line, #999); border-radius: 10px; }

@media (max-width: 720px) {
	.ktsdemo-devices { display: none; }
	.ktsdemo { --ktsdemo-h: 70vh; }
	.ktsdemo-bar { padding: 10px; }
	.ktsdemo-foot { flex-direction: column; align-items: stretch; text-align: center; }
}
@media (prefers-reduced-motion: reduce) {
	.ktsdemo-browser, .ktsdemo-loader span, .ktsdemo-cta, .ktsdemo-swatch { transition: none; animation: none; }
}

/* texte réservé aux lecteurs d'écran (au cas où le thème ne définit pas la classe) */
.ktsdemo .screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

.ktsdemo-warn {
	margin: 0 0 14px;
	padding: 12px 16px;
	border-radius: 10px;
	background: #fdf3dc;
	color: #6b4e0c;
	border: 1px solid #ecd9a6;
}
.ktsdemo-warn a { color: inherit; font-weight: 600; }


/* ---- page autonome (sans le thème du site) ---- */
body.ktsdemo-standalone {
	margin: 0;
	min-height: 100vh;
	/* Même mur que le site : bleu nuit en haut qui s'efface en gris nardo, une seule grille. */
	background:
		linear-gradient(rgba(255, 255, 255, .06) 1px, transparent 1px) 0 0 / 64px 64px,
		linear-gradient(90deg, rgba(255, 255, 255, .06) 1px, transparent 1px) 0 0 / 64px 64px,
		radial-gradient(60vw 50vh at 78% 0%, rgba(34, 92, 150, .55), transparent 72%),
		linear-gradient(180deg, #071323 0, #0c1d33 22%, #3b4656 62%, #5a626c 100%);
	color: #f1f3f7;
	font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
	-webkit-font-smoothing: antialiased;
}
.ktsdemo.ktsdemo--page {
	--ktsdemo-a: #8ec5f0; /* bleu du site */
	--ktsdemo-fg: #f1f3f7;
	--ktsdemo-h: min(80vh, 900px);
	width: min(100%, 2000px);
	margin: 0 auto;
	padding: 0 3vw 28px;
}
.ktsdemo--page .ktsdemo-head {
	position: sticky;
	top: 0;
	z-index: 20;
	padding: 12px 0 0;
	padding-bottom: 14px;
	margin-bottom: 0;
}
.ktsdemo--page .ktsdemo-bar { background: linear-gradient(135deg, rgba(14,34,58,.78), rgba(7,19,35,.6)); border-color: rgba(190,225,250,.25); margin-bottom: 0; }
.ktsdemo-top {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin-bottom: 10px;
}
.ktsdemo-top__title { font-size: .85rem; letter-spacing: .08em; text-transform: uppercase; opacity: .6; }
.ktsdemo-back {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 8px 16px 8px 10px;
	border: 1px solid var(--ktsdemo-line);
	border-radius: 999px;
	color: inherit;
	text-decoration: none;
	font-weight: 600;
	font-size: .95rem;
	background: var(--ktsdemo-soft);
	transition: background .15s, transform .15s;
}
.ktsdemo-back:hover { background: color-mix(in srgb, var(--ktsdemo-fg) 14%, transparent); transform: translateX(-2px); }
.ktsdemo-cta--small { padding: 8px 16px; font-size: .9rem; }
.ktsdemo--page .ktsdemo-foot { justify-content: center; text-align: center; }
@media (max-width: 800px) {
	.ktsdemo--page .ktsdemo-head { position: static; background: none; }
	.ktsdemo-top__title { display: none; }
}

/* Page autonome : la fenêtre est fixe (comme un navigateur), c'est le site de démo, dans le cadre, qui défile. */
html:has(body.ktsdemo-standalone) { height: 100%; overflow: hidden; }
body.ktsdemo-standalone { height: 100vh; height: 100dvh; overflow: hidden; }
.ktsdemo.ktsdemo--page {
	display: flex;
	flex-direction: column;
	height: 100vh;
	height: 100dvh;
	padding-bottom: 10px;
}
.ktsdemo--page .ktsdemo-head { position: static; flex: none; background: none; padding: 12px 0 12px; }
.ktsdemo--page .ktsdemo-bar { margin-bottom: 0; }
.ktsdemo--page .ktsdemo-stage { flex: 1 1 auto; min-height: 0; align-items: stretch; }
.ktsdemo--page .ktsdemo-browser { display: flex; flex-direction: column; height: 100%; }
.ktsdemo--page .ktsdemo-chrome { flex: none; }
.ktsdemo--page .ktsdemo-viewport { flex: 1 1 auto; min-height: 0; height: auto; }
.ktsdemo--page .ktsdemo-foot { flex: none; margin: 0; padding: 8px 0 0; }
.ktsdemo--page .ktsdemo-note { font-size: .8rem; }

/* Cadre plus large : marges latérales réduites */
.ktsdemo.ktsdemo--page { width: min(100%, 2600px); padding-left: 1vw; padding-right: 1vw; }

/* Largeur : on lève la limite de 1400 px de la mise en page de base. ~96 % de la fenêtre, centré. */
body.ktsdemo-standalone .ktsdemo.ktsdemo--page {
	width: 96vw !important;
	max-width: none !important;
	margin-left: auto !important;
	margin-right: auto !important;
	padding-left: 0 !important;
	padding-right: 0 !important;
}

/* Page autonome : bleu du site, texte foncé sur les éléments actifs */
.ktsdemo--page .ktsdemo-seg__btn[aria-pressed="true"], .ktsdemo--page .ktsdemo-cta { color: #0b2a47; }

/* ---- 1 · activité (hôtel, site vitrine…) puis 2 · style ---- */
.ktsdemo-row--sites {
	flex: 1 1 100%;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px 16px;
	padding-bottom: 12px;
	border-bottom: 1px solid var(--ktsdemo-line);
}
.ktsdemo-step {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-size: .78rem;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
	opacity: .8;
	white-space: nowrap;
}
.ktsdemo-step b {
	display: inline-grid;
	place-items: center;
	width: 22px;
	height: 22px;
	border-radius: 50%;
	background: var(--ktsdemo-a);
	color: #fff;
	font-size: .78rem;
	letter-spacing: 0;
}
.ktsdemo-step--themes { margin-right: -6px; }
.ktsdemo-site {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 8px 16px 8px 12px;
	border: 1px solid var(--ktsdemo-line);
	border-radius: 999px;
	background: transparent;
	font-weight: 600;
	font-size: .95rem;
	white-space: nowrap;
	transition: background .15s, border-color .15s, box-shadow .15s, transform .15s;
}
.ktsdemo-site svg { flex: none; opacity: .85; }
.ktsdemo-site:hover { background: var(--ktsdemo-soft); transform: translateY(-1px); }
.ktsdemo-site[aria-pressed="true"] {
	border-color: var(--ktsdemo-a);
	background: color-mix(in srgb, var(--ktsdemo-a) 14%, transparent);
	box-shadow: 0 0 0 1px var(--ktsdemo-a) inset;
}
.ktsdemo-site[aria-pressed="true"] svg { color: var(--ktsdemo-a); opacity: 1; }
@media (max-width: 640px) {
	.ktsdemo-site { padding: 7px 12px 7px 10px; font-size: .88rem; }
	.ktsdemo-row--sites { gap: 8px; }
}
.ktsdemo-step--themes + .ktsdemo-themes { margin-right: auto; }

/* ---- mobile : replier « Votre activité / Son style » ---- */
.ktsdemo-fold { display: none; }
@media (max-width: 720px) {
	.ktsdemo--page .ktsdemo-fold {
		display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%;
		margin: 0 0 8px; padding: 10px 14px; border: 1px solid rgba(190,225,250,.25); border-radius: 14px;
		background: linear-gradient(135deg, rgba(14,34,58,.78), rgba(7,19,35,.6)); color: #fff; text-align: left; font-weight: 600; font-size: .9rem;
	}
	.ktsdemo-fold__sum { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 500; opacity: .8; }
	.ktsdemo-fold svg { flex: none; transition: transform .25s; }
	.ktsdemo--page.is-folded .ktsdemo-fold svg { transform: rotate(180deg); }
	.ktsdemo--page .ktsdemo-bar { overflow: hidden; max-height: 900px; transition: max-height .3s ease, padding .3s ease, opacity .25s ease, border-width .3s; }
	.ktsdemo--page.is-folded .ktsdemo-bar { max-height: 0; padding-top: 0; padding-bottom: 0; opacity: 0; border-width: 0; }
}