/* ELIUM Trendz — portail client */

@font-face {
	font-family: 'Articulat CF';
	src: url('fonts/ArticulatCF-Bold.woff2') format('woff2'),
		url('fonts/ArticulatCF-Bold.woff') format('woff');
	font-weight: 700;
	font-style: normal;
	font-display: swap;
}

:root {
	--tz-pink: #e164e1;
	--tz-pink-pale: #f0b4f0;
	--tz-purple: #3200af;
	--tz-black: #111;
	--tz-white: #fff;
	--tz-green: #00bc1f;
	--tz-gradient: linear-gradient(165deg, var(--tz-pink), var(--tz-purple));
	--tz-font: 'Articulat CF', 'ArticulatCF', system-ui, -apple-system, sans-serif;
	--tz-script: 'mister-brown', cursive;
	--tz-shadow: 0 24px 80px rgba(17, 17, 17, .12);
	--tz-radius-wrap: 40px;
	--tz-header-h: 80px;
}

*, *::before, *::after { box-sizing: border-box; }

html, body { margin: 0; padding: 0; }

.tz-body {
	min-height: 100vh;
	background: var(--tz-white);
	color: var(--tz-black);
	font-family: var(--tz-font);
	font-weight: 700;
	-webkit-font-smoothing: antialiased;
}

.tz-gradient { background: var(--tz-gradient); }

.tz-script {
	font-family: var(--tz-script);
	font-weight: 400;
	font-style: normal;
	font-size: 60px;
	line-height: 1;
	color: var(--tz-pink);
	text-transform: lowercase;
}

/* ---------- Boutons ---------- */
.tz-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 12px;
	border: 0;
	border-radius: 999px;
	padding: 14px 32px;
	background: var(--tz-gradient);
	color: var(--tz-white);
	font-family: var(--tz-font);
	font-size: 13px;
	font-weight: 700;
	letter-spacing: .04em;
	text-transform: uppercase;
	text-decoration: none;
	cursor: pointer;
	transition: transform .18s ease, box-shadow .18s ease, opacity .18s ease;
	box-shadow: 0 8px 24px rgba(50, 0, 175, .22);
}
.tz-btn:hover { transform: translateY(-1px); box-shadow: 0 12px 28px rgba(50, 0, 175, .28); }
.tz-btn:disabled { cursor: not-allowed; transform: none; box-shadow: none; }
#tz-select-submit:disabled {
	opacity: 1;
	background: var(--tz-pink-pale);
	color: var(--tz-white);
}
#tz-select-submit:disabled:hover { transform: none; box-shadow: none; }
#tz-select-submit:not(:disabled) { background: var(--tz-gradient); }
#tz-select-submit.is-ready {
	background: linear-gradient(165deg, var(--tz-pink) 0%, var(--tz-purple) 42%, var(--tz-pink) 84%, var(--tz-purple) 100%);
	background-size: 240% 240%;
	animation:
		tzSelectGradientShift 3s ease-in-out infinite,
		tzSelectReadyFloat 1.9s ease-in-out infinite;
}
#tz-select-submit.is-ready.is-ready-shake {
	animation:
		tzSelectReadyShake 1.9s ease-in-out,
		tzSelectGradientShift 3s ease-in-out infinite,
		tzSelectReadyFloat 1.9s ease-in-out infinite;
}
@keyframes tzSelectReadyShake {
	0%, 100% { rotate: 0deg; }
	8% { rotate: -2.5deg; }
	16% { rotate: 2.5deg; }
	24% { rotate: -2deg; }
	32% { rotate: 2deg; }
	40% { rotate: -1.5deg; }
	50% { rotate: 1.5deg; }
	60% { rotate: -1deg; }
	70% { rotate: 1deg; }
	80% { rotate: -0.5deg; }
	90% { rotate: 0.5deg; }
}
@keyframes tzSelectReadyFloat {
	0%, 100% { translate: 0 0; }
	50% { translate: 0 -5px; }
}
@keyframes tzSelectGradientShift {
	0%, 100% { background-position: 0% 50%; }
	50% { background-position: 100% 50%; }
}
.tz-btn--block { width: 100%; max-width: 220px; margin-top: 16px; }
.tz-btn--sm { padding: 10px 20px; font-size: 11px; margin-top: 12px; }
.tz-btn--float {
	padding: 10px 18px 10px 10px;
}
.tz-btn--float:hover { transform: translateY(-1px); box-shadow: 0 12px 28px rgba(50, 0, 175, .28); }
#tz-select-submit.is-ready:hover { animation: none; transform: translateY(-1px); box-shadow: 0 12px 28px rgba(50, 0, 175, .28); }
.tz-btn--float:disabled:hover { transform: none; box-shadow: none; }
.tz-btn__count {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 30px;
	height: 30px;
	padding: 0 8px;
	border-radius: 999px;
	background: var(--tz-white);
	color: var(--tz-black);
	font-size: 13px;
}
.tz-btn__label { padding-right: 8px; }

/* ---------- Login ---------- */
.tz-login-shell {
	min-height: 100vh;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: 24px;
	gap: 28px;
}
.tz-login-card {
	width: min(520px, 100%);
	min-height: 220px;
	border-radius: var(--tz-radius-wrap);
	padding: 32px;
	box-shadow: var(--tz-shadow);
	display: flex;
	align-items: center;
	justify-content: center;
}
.tz-login-brand { width: min(280px, 70vw); display: block; }
.tz-login-form-wrap { width: min(380px, 100%); }
.tz-login-form label { display: block; margin-bottom: 14px; font-size: 12px; text-transform: uppercase; letter-spacing: .06em; }
.tz-login-form input {
	width: 100%;
	margin-top: 6px;
	padding: 14px 16px;
	border: 1px solid rgba(0,0,0,.12);
	border-radius: 14px;
	font-size: 15px;
	font-family: inherit;
}
.tz-login-form .tz-btn { width: 100%; margin-top: 8px; }

/* ---------- Shell / wrapper ---------- */
.tz-shell {
	min-height: 100vh;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 24px;
	position: relative;
}
.tz-wrap {
	width: 80%;
	max-width: 1200px;
	height: 80vh;
	background: var(--tz-white);
	border-radius: var(--tz-radius-wrap);
	box-shadow: var(--tz-shadow);
	display: flex;
	flex-direction: column;
	overflow: hidden;
	position: relative;
}

/* ---------- Header ---------- */
.tz-header {
	height: var(--tz-header-h);
	flex-shrink: 0;
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	align-items: center;
	padding: 0 20px;
	position: relative;
	z-index: 30;
}
.tz-header__left { justify-self: start; }
.tz-header__center { justify-self: center; text-align: center; }
.tz-header__right { justify-self: end; display: flex; align-items: center; gap: 12px; position: relative; }
.tz-header__elium { width: 40px; height: 40px; display: block; }
.tz-header__brand { width: 145px; display: block; margin: 0 auto; }
.tz-admin-switch select {
	background: rgba(255,255,255,.15);
	border: 1px solid rgba(255,255,255,.35);
	color: #fff;
	border-radius: 999px;
	padding: 8px 12px;
	font-size: 12px;
	max-width: 160px;
}

.tz-profile {
	width: 40px;
	height: 40px;
	border: 0;
	border-radius: 50%;
	background: var(--tz-white);
	padding: 0;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: transform .15s ease;
}
.tz-profile:hover { transform: scale(1.04); }
.tz-profile__burger { width: 18px; height: auto; display: block; }
.tz-profile__close { width: 15px; height: 15px; }
.tz-profile.is-open .tz-profile__burger { display: none; }
.tz-profile.is-open .tz-profile__close { display: block !important; }

.tz-menu[hidden] { display: none !important; }
.tz-menu:not([hidden]) { display: flex; }
.tz-menu {
	position: absolute;
	top: calc(100% + 12px);
	right: 0;
	min-width: 220px;
	background: var(--tz-white);
	border-radius: 18px;
	box-shadow: 0 16px 48px rgba(0,0,0,.14);
	padding: 10px;
	flex-direction: column;
	gap: 4px;
	animation: tzMenuIn .22s ease;
}
@keyframes tzMenuIn {
	from { opacity: 0; transform: translateY(-8px); }
	to { opacity: 1; transform: translateY(0); }
}
.tz-menu__head {
	padding: 10px 14px 12px;
	font-size: 13px;
	font-weight: 700;
	line-height: 1.3;
	color: var(--tz-black);
	border-bottom: 1px solid rgba(0, 0, 0, .08);
	margin-bottom: 4px;
}
.tz-menu__item {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 12px 14px;
	border-radius: 12px;
	color: var(--tz-black);
	text-decoration: none;
	font-size: 12px;
	letter-spacing: .05em;
	transition: background .15s ease;
}
.tz-menu__item img { width: 22px; height: 22px; flex-shrink: 0; }
.tz-menu__item:hover { background: rgba(225, 100, 225, .12); }
.tz-menu__item.is-active {
	background: var(--tz-gradient);
	color: var(--tz-white);
}
.tz-menu__item.is-active img { filter: brightness(0) invert(1); }

/* ---------- Main ---------- */
.tz-main {
	flex: 1;
	min-height: 0;
	overflow: auto;
	padding: 28px 85px 40px;
	position: relative;
	scroll-behavior: smooth;
}

.tz-flash {
	padding: 12px 16px;
	border-radius: 14px;
	margin-bottom: 18px;
	font-size: 14px;
}
.tz-flash--ok { background: rgba(0, 188, 31, .12); color: #067a18; }
.tz-flash--err { background: rgba(225, 80, 80, .12); color: #a01818; }

.tz-empty-state, .tz-empty-msg {
	text-align: center;
	color: rgba(0,0,0,.55);
	padding: 40px 20px;
}

.tz-footer {
	text-align: center;
	font-size: 10px;
	font-weight: 600;
	color: rgba(0, 0, 0, .38);
	letter-spacing: .02em;
}
.tz-footer__copy { display: block; }
.tz-footer__links {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 6px 14px;
	margin-top: 6px;
}
.tz-footer__links a {
	color: inherit;
	text-decoration: none;
}
.tz-footer__links a:hover,
.tz-footer__links a:focus-visible {
	text-decoration: underline;
}
.tz-footer--out {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 10vh;
	padding: 0 20px;
	pointer-events: auto;
}
.tz-footer--in {
	display: none;
}
.tz-wrap:has(.tz-scroll-fade) .tz-footer--in,
.tz-wrap:has(.tz-float-submit) .tz-footer--in {
	margin-bottom: 20px;
}
body[data-onboarded="0"] .tz-footer {
	display: none;
}

/* ---------- Page sélection ---------- */
.tz-page--select { text-align: center; }
.tz-hero-title {
	font-size: clamp(18px, 2.2vw, 26px);
	line-height: 1.15;
	text-transform: uppercase;
	margin: 0;
	letter-spacing: .02em;
}
.tz-hero-title em,
.tz-hero-title .tz-script {
	font-style: normal;
	vertical-align: baseline;
}
.tz-hero-sub {
	font-size: 14px;
	font-weight: 700;
	opacity: .65;
	margin: 0 0 50px;
	text-transform: lowercase;
}
.tz-validated-msg { margin-top: 0; margin-bottom: 28px; }

.tz-grid {
	--tz-card-h: 250px;
	--tz-card-w: calc(var(--tz-card-h) * 9 / 16);
	--tz-grid-gap: 45px;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--tz-grid-gap);
	margin-top: 8px;
	max-width: 100%;
}
.tz-wrap:has(.tz-float-submit) .tz-grid--select {
	padding-bottom: 120px;
}
.tz-wrap:has(.tz-float-submit) .tz-main {
	padding-bottom: 24px;
}
.tz-wrap:has(.tz-float-submit) .tz-page--select {
	min-height: 100%;
	box-sizing: border-box;
}
.tz-wrap:has(.tz-scroll-fade) .tz-page--done {
	padding-bottom: 120px;
}
.tz-wrap:has(.tz-scroll-fade) .tz-main {
	position: relative;
	z-index: 1;
	padding-bottom: 24px;
}
.tz-scroll-fade,
.tz-float-submit {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 140px;
	z-index: 40;
	pointer-events: none;
}
.tz-scroll-fade {
	background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 1) 100%);
}
.tz-float-submit {
	display: flex;
	justify-content: center;
	align-items: flex-end;
	padding: 0 24px max(22px, env(safe-area-inset-bottom, 0px));
}
.tz-float-submit::before {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 1) 100%);
	border-radius: 0 0 var(--tz-radius-wrap) var(--tz-radius-wrap);
	pointer-events: none;
}
.tz-float-submit .tz-btn--float {
	pointer-events: auto;
	position: relative;
	z-index: 1;
}

/* ---------- Cards ---------- */
.tz-card {
	position: relative;
	cursor: pointer;
	transition: transform .18s ease;
	flex: 0 0 auto;
	width: min(var(--tz-card-w), calc((100% - 4 * var(--tz-grid-gap, 45px)) / 5));
	max-width: var(--tz-card-w);
}
.tz-card:hover { transform: translateY(-3px); }
.tz-card__check { position: absolute; opacity: 0; pointer-events: none; width: 0; height: 0; }
.tz-card__media {
	aspect-ratio: 9 / 16;
	max-height: var(--tz-card-h, 250px);
	width: 100%;
	height: auto;
	border-radius: 14px;
	background: #eee center/cover no-repeat;
	position: relative;
	overflow: hidden;
	box-shadow: 0 8px 24px rgba(0,0,0,.08);
}
.tz-card__empty {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 12px;
	opacity: .45;
}
.tz-card__tick {
	position: absolute;
	right: 10px;
	bottom: 10px;
	width: 28px;
	height: 28px;
	z-index: 3;
}
.tz-card--select.is-selected .tz-card__media::after {
	content: '';
	position: absolute;
	inset: 0;
	background: rgba(0, 188, 31, .35);
	z-index: 2;
}
.tz-card--select.is-selected .tz-card__tick { display: block !important; }
.tz-card--in { animation: tzCardIn .45s ease both; }
@keyframes tzCardIn {
	from { opacity: 0; transform: translateY(14px); }
	to { opacity: 1; transform: translateY(0); }
}

.tz-location-field input.is-error { outline: 2px solid #e164e1; }
.tz-card__hovervid {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	z-index: 1;
	pointer-events: none;
}
.tz-safari .tz-card__hovervid:not(.is-playing) {
	opacity: 0;
}
.tz-card__hovervid::-webkit-media-controls {
	display: none !important;
}
.tz-card__hovervid::-webkit-media-controls-start-playback-button,
.tz-card__hovervid::-webkit-media-controls-overlay-play-button {
	display: none !important;
	-webkit-appearance: none;
}

/* ---------- Page validée + shooting ---------- */
.tz-page--done { padding-bottom: 120px; }
.tz-thanks {
	text-align: center;
	margin-bottom: 28px;
	animation: tzFadeUp .5s ease;
}
.tz-thanks__title {
	margin: 0;
	font-size: 60px;
	line-height: 1;
}
.tz-thanks .tz-hero-sub {
	margin-bottom: 50px;
}
@keyframes tzFadeUp {
	from { opacity: 0; transform: translateY(12px); }
	to { opacity: 1; transform: translateY(0); }
}

.tz-shooting-panel {
	display: grid;
	grid-template-columns: 280px minmax(0, 420px);
	gap: 40px;
	align-items: start;
	justify-content: center;
	width: 100%;
	max-width: 860px;
	margin: 36px auto 0;
	padding-top: 28px;
	border-top: 1px solid rgba(0,0,0,.06);
}
.tz-shooting-panel__left {
	display: flex;
	flex-direction: column;
	align-items: center;
	width: 100%;
}
.tz-shooting-panel__right {
	min-width: 0;
}
.tz-calendar {
	background: var(--tz-white);
	border-radius: 20px;
	box-shadow: 0 12px 40px rgba(0,0,0,.08);
	padding: 18px;
	width: 100%;
}
.tz-calendar__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 14px;
	font-size: 14px;
	gap: 8px;
}
.tz-calendar__title {
	flex: 1;
	text-align: center;
	font-weight: 700;
	text-transform: lowercase;
}
.tz-calendar__nav {
	width: 28px;
	height: 28px;
	border: 0;
	border-radius: 50%;
	background: rgba(0,0,0,.06);
	color: var(--tz-black);
	font-size: 18px;
	line-height: 1;
	cursor: pointer;
	flex-shrink: 0;
}
.tz-calendar__nav:disabled {
	opacity: .35;
	cursor: default;
}
.tz-calendar__grid {
	display: grid;
	grid-template-columns: repeat(7, 1fr);
	gap: 4px;
	text-align: center;
	font-size: 12px;
}
.tz-calendar__dow { opacity: .45; font-size: 10px; padding-bottom: 6px; }
.tz-calendar__day {
	aspect-ratio: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
}
.tz-calendar__day.is-proposed {
	background: rgba(225, 100, 225, .12);
	color: var(--tz-black);
	font-weight: 700;
	cursor: pointer;
}
.tz-calendar__day.is-proposed--locked {
	cursor: default;
	opacity: .55;
}
.tz-calendar__day.is-proposed.is-selected {
	box-shadow: 0 0 0 2px var(--tz-pink);
}
.tz-calendar__day.is-validated {
	background: var(--tz-gradient);
	color: #fff;
	font-weight: 700;
}
.tz-calendar__day.is-muted { opacity: .25; }

.tz-btn--shoot-confirm {
	margin-top: 16px;
	width: 100%;
	max-width: 220px;
}
.tz-btn--shoot-confirm[hidden] {
	display: none !important;
}
.tz-shoot-empty {
	margin-top: 12px;
	font-size: 13px;
	opacity: .55;
	text-align: center;
}

.tz-shooting-title { margin: 0; }
.tz-shooting-lead { font-size: 15px; line-height: 1.45; margin: 10px 0 20px; max-width: 420px; }
.tz-shooting-date-label { font-size: 14px; margin-bottom: 16px; }
.tz-shoot-picked-date {
	font-size: 14px;
	margin: 0 0 14px;
	max-width: 480px;
	line-height: 1.45;
}
.tz-shoot-picked-date[hidden] { display: none; }
.tz-shoot-location-done {
	font-size: 14px;
	line-height: 1.45;
	margin: 0 0 16px;
	max-width: 480px;
}
.tz-shoot-location-done strong { font-weight: 700; }
.tz-location-label { display: block; font-size: 14px; margin-bottom: 10px; }
.tz-shoot-slots {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin-bottom: 18px;
	max-width: 480px;
}
.tz-shoot-slot {
	position: relative;
	flex: 1 1 160px;
	cursor: pointer;
}
.tz-shoot-slot input {
	position: absolute;
	opacity: 0;
	pointer-events: none;
}
.tz-shoot-slot__label {
	display: block;
	padding: 12px 16px;
	border-radius: 999px;
	background: var(--tz-white);
	box-shadow: 0 8px 24px rgba(0,0,0,.08);
	font-size: 14px;
	font-weight: 700;
	text-align: center;
	transition: background .15s ease, color .15s ease, box-shadow .15s ease;
}
.tz-shoot-slot input:checked + .tz-shoot-slot__label {
	background: var(--tz-gradient);
	color: var(--tz-white);
	box-shadow: 0 10px 28px rgba(50, 0, 175, .22);
}
.tz-shoot-slot input:focus-visible + .tz-shoot-slot__label {
	outline: 2px solid var(--tz-purple);
	outline-offset: 2px;
}
.tz-location-field {
	display: flex;
	align-items: center;
	gap: 10px;
	background: var(--tz-white);
	border-radius: 999px;
	box-shadow: 0 10px 32px rgba(0,0,0,.08);
	padding: 6px 8px 6px 22px;
	max-width: 480px;
}
.tz-location-field input {
	flex: 1;
	border: 0;
	background: transparent;
	font-family: inherit;
	font-size: 14px;
	font-weight: 700;
	outline: none;
	min-width: 0;
}
.tz-location-ok {
	width: 36px;
	height: 36px;
	border: 0;
	border-radius: 50%;
	background: var(--tz-gradient);
	color: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	padding: 0;
	font-size: 16px;
	line-height: 1;
	cursor: pointer;
}
.tz-location-ok:disabled {
	opacity: .35;
	cursor: not-allowed;
}
.tz-chip-ok {
	display: inline-block;
	margin-top: 12px;
	padding: 8px 16px;
	border-radius: 999px;
	background: rgba(0, 188, 31, .12);
	color: #067a18;
	font-size: 12px;
}

/* ---------- Contrat ---------- */
.tz-contract {
	display: grid;
	grid-template-columns: 1.2fr .8fr;
	gap: 32px;
	align-items: start;
}
.tz-contract__pdf {
	width: 100%;
}
.tz-contract__iframe {
	width: 100%;
	height: calc(80vh - var(--tz-header-h) - 96px);
	min-height: 360px;
	max-height: 680px;
	border: 0;
	border-radius: 16px;
	box-shadow: 0 8px 32px rgba(0,0,0,.08);
	display: block;
}
.tz-contract__info h2 { margin: 0; }
.tz-contract__info p { font-size: 14px; line-height: 1.55; font-weight: 700; opacity: .8; margin: 0 0 14px; }
.tz-contract__info h2 + p { margin-top: 10px; }
.tz-contract__meta { margin-top: 20px; margin-bottom: 0; }
.tz-page--contract { padding-bottom: 0; }

.tz-page--legal { max-width: 680px; margin: 0 auto; }
.tz-legal__title {
	margin: 0 0 28px;
	font-size: clamp(36px, 5vw, 52px);
	text-transform: lowercase;
}
.tz-legal__body { font-size: 14px; line-height: 1.6; font-weight: 700; opacity: .82; }
.tz-legal__section { margin-bottom: 22px; }
.tz-legal__section h2 {
	font-size: 13px;
	text-transform: uppercase;
	letter-spacing: .04em;
	margin: 0 0 8px;
	opacity: .65;
}
.tz-legal__section p { margin: 0; }
.tz-legal__back { margin-top: 32px; margin-bottom: 0; }
.tz-legal__back a { color: var(--tz-purple); text-decoration: none; }
.tz-legal__back a:hover { text-decoration: underline; }

/* ---------- Onboarding ---------- */
.tz-splash {
	position: fixed;
	inset: 0;
	z-index: 100;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	animation: tzSplashIn .6s ease;
}
.tz-splash[hidden],
.tz-splash.is-done {
	display: none !important;
}
.tz-splash.is-leaving {
	animation: tzSplashOut .5s ease forwards;
	pointer-events: none;
}
@keyframes tzSplashIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes tzSplashOut { to { opacity: 0; visibility: hidden; } }
.tz-splash-elium { width: 140px; margin-bottom: 32px; }
.tz-splash-brand { width: min(320px, 70vw); }

.tz-onboarding[hidden] { display: none !important; }
.tz-onboarding {
	position: fixed;
	inset: 0;
	z-index: 90;
	background: rgba(255,255,255,.97);
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: 24px;
	overflow: hidden;
}
.tz-onboarding__viewport {
	width: min(680px, 100%);
	overflow: hidden;
}
.tz-onboarding__track {
	display: flex;
	width: 300%;
	transition: transform .45s cubic-bezier(.4, 0, .2, 1);
}
.tz-onboarding__slide {
	width: 33.333%;
	flex-shrink: 0;
	padding: 0 24px;
	text-align: center;
	display: flex;
	flex-direction: column;
	align-items: center;
}
.tz-onboarding__next { margin-top: 28px; flex-shrink: 0; }
.tz-onboarding__visual {
	width: min(280px, 60vw);
	height: min(280px, 60vw);
	border-radius: 50%;
	background: var(--tz-gradient);
	display: flex;
	align-items: center;
	justify-content: center;
	margin-bottom: 28px;
	box-shadow: var(--tz-shadow);
}
.tz-onboarding__visual img { width: 45%; filter: brightness(0) invert(1); }
.tz-onboarding__slide h2 { margin: 0; }
.tz-onboarding__text {
	max-width: 420px;
	font-size: 15px;
	line-height: 1.5;
	opacity: .75;
	margin: 10px 0 0;
	font-weight: 700;
}
.tz-onboarding__dots {
	display: flex;
	gap: 8px;
	margin-top: 24px;
}
.tz-onboarding__dots span {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: rgba(0,0,0,.15);
	transition: background .2s ease, transform .2s ease;
}
.tz-onboarding__dots span.is-active { background: var(--tz-pink); transform: scale(1.2); }

.tz-onboarding--demo .tz-onboarding__track { width: 400%; }
.tz-onboarding--demo .tz-onboarding__slide { width: 25%; }
.tz-onboarding__slide--domains { justify-content: flex-start; padding-top: 8px; }
.tz-onboarding__slide--domains .tz-script { font-size: 48px; margin-bottom: 8px; }
.tz-domain-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
	gap: 12px;
	width: min(560px, 100%);
	margin-top: 20px;
	max-height: min(42vh, 320px);
	overflow-y: auto;
	padding: 4px;
}
.tz-domain-tile {
	border: 2px solid rgba(225, 100, 225, .35);
	border-radius: 16px;
	padding: 16px 12px;
	background: var(--tz-white);
	color: var(--tz-black);
	font: inherit;
	font-size: 13px;
	line-height: 1.3;
	cursor: pointer;
	transition: transform .12s ease, border-color .12s ease, box-shadow .12s ease;
	text-align: center;
	min-height: 72px;
	display: flex;
	align-items: center;
	justify-content: center;
}
.tz-domain-tile:hover {
	transform: translateY(-2px);
	border-color: var(--tz-pink);
	box-shadow: 0 8px 24px rgba(225, 100, 225, .25);
}

/* Masquer la page tant que l'onboarding n'est pas terminé (évite le flash « Mes trend »). */
body[data-onboarded="0"] .tz-main > :not(#tz-splash):not(#tz-onboarding) {
	visibility: hidden;
}

/* ---------- Lightbox ---------- */
.tz-modal {
	position: fixed;
	inset: 0;
	z-index: 200;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 20px;
}
.tz-modal[hidden] { display: none; }
.tz-modal-backdrop {
	position: absolute;
	inset: 0;
	background: rgba(0,0,0,.72);
	backdrop-filter: blur(4px);
}
.tz-modal-box {
	position: relative;
	width: min(920px, 100%);
	background: #fff;
	border-radius: 24px;
	overflow: hidden;
	display: grid;
	grid-template-columns: auto 1fr;
	max-height: 90vh;
	animation: tzModalIn .28s ease;
}
@keyframes tzModalIn {
	from { opacity: 0; transform: scale(.96); }
	to { opacity: 1; transform: scale(1); }
}
.tz-modal-close {
	position: absolute;
	top: 12px;
	right: 12px;
	z-index: 2;
	width: 44px;
	height: 44px;
	border: 0;
	border-radius: 50%;
	background: var(--tz-white);
	padding: 0;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: 0 4px 12px rgba(0,0,0,.15);
}
.tz-modal-close img { width: 15px; height: 15px; display: block; }
.tz-modal-media {
	background: #000;
	line-height: 0;
	overflow: hidden;
	height: 90vh;
	max-height: 90vh;
	width: calc(90vh * 9 / 16);
	max-width: min(calc(90vh * 9 / 16), 45vw);
	flex-shrink: 0;
}
.tz-modal-media video {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}
.tz-modal-info {
	padding: 24px;
	overflow: auto;
	display: flex;
	flex-direction: column;
	min-height: 0;
	max-height: 90vh;
}
.tz-modal-name { margin: 0 0 8px; font-size: 20px; text-transform: uppercase; }
.tz-modal-added { font-size: 13px; opacity: .55; margin: 0 0 12px; }
.tz-modal-remark { font-size: 14px; line-height: 1.45; margin-bottom: 12px; padding: 12px; background: rgba(225,100,225,.08); border-radius: 12px; }
.tz-modal-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 0; }
.tz-modal-tag { font-size: 12px; padding: 4px 10px; border-radius: 999px; background: rgba(0,0,0,.06); }
.tz-modal-actions {
	margin-top: auto;
	padding-top: 24px;
	display: flex;
	justify-content: center;
	width: 100%;
}
body.tz-modal-open { overflow: hidden; }

/* ---------- Mobile ---------- */
@media (max-width: 900px) {
	.tz-shooting-panel {
		grid-template-columns: 1fr;
		max-width: 320px;
		gap: 32px;
	}
	.tz-shooting-panel__right {
		order: 1;
	}
	.tz-shooting-panel__left {
		order: 2;
	}
	.tz-contract {
		grid-template-columns: 1fr;
		gap: 24px;
	}
	.tz-contract__iframe {
		height: min(50vh, 420px);
		min-height: 240px;
		max-height: none;
	}
	.tz-modal {
		align-items: flex-start;
		overflow-y: auto;
		-webkit-overflow-scrolling: touch;
		overscroll-behavior: contain;
		padding: 12px;
		padding-bottom: max(12px, env(safe-area-inset-bottom));
	}
	.tz-modal-box {
		grid-template-columns: 1fr;
		max-height: none;
		overflow: visible;
		width: 100%;
		margin: 0 auto;
	}
	.tz-modal-close {
		position: fixed;
		top: 16px;
		right: 16px;
		z-index: 201;
	}
	.tz-modal-media {
		width: min(100%, calc(50vh * 9 / 16));
		max-width: 100%;
		max-height: 50vh;
		height: auto;
		aspect-ratio: 9 / 16;
		margin: 0 auto;
	}
	.tz-modal-media video { width: 100%; height: 100%; object-fit: cover; }
	.tz-modal-info {
		max-height: none;
		overflow: visible;
	}
}

@media (max-width: 640px) {
	.tz-shell { padding: 0; }
	.tz-wrap {
		width: 100%;
		max-width: none;
		height: 100vh;
		border-radius: 0;
		box-shadow: none;
	}
	.tz-header {
		padding: 0 20px;
		height: 70px;
		--tz-header-h: 70px;
	}
	.tz-header__elium {
		width: 40px;
		height: 40px;
	}
	.tz-header__brand {
		width: 128px;
	}
	.tz-profile {
		width: 40px;
		height: 40px;
	}
	.tz-profile__burger { width: 16px; }
	.tz-main { padding: 20px 20px 32px; }
	.tz-wrap:has(.tz-float-submit) .tz-main { padding-bottom: 16px; }
	.tz-wrap:has(.tz-scroll-fade) .tz-main { padding-bottom: 16px; }
	.tz-float-submit::before { border-radius: 0; }
	.tz-page--contract { margin-bottom: -8px; }
	.tz-card {
		width: min(var(--tz-card-w), calc((100% - var(--tz-grid-gap, 45px)) / 2));
	}
	.tz-thanks__title { font-size: 42px; }
	.tz-script { font-size: 42px; }
	.tz-admin-switch { display: none; }
	.tz-footer--out { display: none; }
	.tz-footer--in {
		display: block;
		margin-top: 48px;
		padding: 0 20px 4px;
	}
}