:root {
			--bg: #f6f9ff;
			--ink: #0d1633;
			--muted: #5a6787;
			--line: #e6ecfb;
			--radius: 16px;
			--barBg: rgba(240, 244, 255, .9);
			--barLine: #e2e8ff;
			--apps-grid-min: 180px;
			--apps-grid-gap: 14px;
			--app-card-logo-size: 84%;
			--app-card-size: var(--apps-grid-min);
			--more-gap: 18px;
			--more-panel-width: 0px;
		}

		* {
			box-sizing: border-box
		}

		html,
		body {
			height: 100%
		}

		body {
			margin: 0;
			font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
			color: var(--ink);
			background:
				radial-gradient(80% 60% at 10% 10%, #bfe3ff33 0%, transparent 60%),
				radial-gradient(80% 60% at 90% 20%, #e2d3ff33 0%, transparent 60%),
				linear-gradient(#f9fbff, #eff4ff);
			overflow-x: hidden;
			display: flex;
			flex-direction: column;
			min-height: 100vh;
		}

		/* -------- TOP BAR (identique partout) -------- */
		.topbar {
			position: sticky;
			top: 0;
			z-index: 100;
			backdrop-filter: saturate(130%) blur(8px);
			background: var(--barBg);
			border-bottom: 1px solid var(--barLine)
		}

		.topbar-inner {
			max-width: 1280px;
			margin: 0 auto;
			padding: 10px 16px;
			display: grid;
			grid-template-columns: auto 1fr auto;
			gap: 14px;
			align-items: center;
		}
		/* La topbar suit la largeur du bloc apps pour rester cohérente
		   sur grands écrans / écrans ultrawide. */
		@media (min-width: 1700px) {
			.topbar-inner { max-width: 1600px; }
		}
		@media (min-width: 2100px) {
			.topbar-inner { max-width: 2000px; }
		}
		@media (min-width: 2600px) {
			.topbar-inner { max-width: 2500px; }
		}
		@media (min-width: 3000px) {
			.topbar-inner { max-width: 2900px; }
		}

		.who {
			font-size: 14px;
			font-weight: 700;
			color: #22315f;
			white-space: nowrap
		}

		/* Centre : pré-login (lien plus petit et moins gras que .who) */
		.prelogin {
			display: flex;
			align-items: center;
			gap: 8px;
			height: 28px;
			color: #364777;
			white-space: nowrap;
			font-size: 13px;
			font-weight: 400
		}

		.prelogin a {
			color: #1a2454;
			font-size: 13px;
			font-weight: 600;
			text-decoration: none
		}

		.prelogin a:hover {
			text-decoration: underline
		}

		/* Centre : ticker (après login) — un message à la fois */
		.ticker {
			position: relative;
			overflow: hidden;
			height: 28px
		}

		.vpane {
			display: grid;
			grid-auto-rows: 28px;
			transform: translateY(0)
		}

		.vpane.sliding {
			transition: transform .7s ease
		}

		.vmsg {
			display: flex;
			align-items: center;
			gap: 8px;
			padding: 0 4px;
			color: #364777;
			text-decoration: none;
			font-size: 14px;
			white-space: nowrap;
			font-weight: 400;
		}

		.vmsg:hover {
			text-decoration: underline
		}

		.badge {
			font-size: 11px;
			padding: 3px 7px;
			border-radius: 999px;
			background: #eaf0ff;
			border: 1px solid #dbe5ff;
			color: #29417a
		}

		/* Déconnexion (caché avant login) */
		.logout {
			padding: 8px 12px;
			border-radius: 10px;
			border: 1px solid #d5def7;
			background: #fff;
			color: #1a2454;
			font-weight: 700;
			cursor: pointer;
			box-shadow: none;
			transition: background .2s ease, transform .12s ease;
			display: none;
		}

		.logout.show {
			display: inline-block
		}

		.logout:hover {
			background: #f2f6ff;
			transform: translateY(-1px)
		}

		.admin-btn {
			padding: 6px 10px;
			border-radius: 8px;
			font-size: 12px;
			font-weight: 800;
			letter-spacing: .5px;
			background: #dc2626;
			border: 1px solid #dc2626;
			color: #fff;
			cursor: pointer;
			display: none;
			box-shadow: 0 1px 3px rgba(0, 0, 0, .15);
			text-transform: uppercase;
			line-height: 1.1;
		}

		.admin-btn:hover {
			background: #b91c1c
		}

		/* -------- MODAL IMPERSONATE (Switch Account) -------- */
		.impersonate-overlay {
			position: fixed;
			inset: 0;
			background: rgba(13, 22, 51, 0.7);
			backdrop-filter: blur(4px);
			z-index: 10000;
			display: none;
			align-items: center;
			justify-content: center;
			animation: fadeIn 0.2s ease;
		}
		.impersonate-overlay.show {
			display: flex;
		}
		.impersonate-modal {
			background: #fff;
			border-radius: 16px;
			box-shadow: 0 20px 60px rgba(0,0,0,0.3);
			width: 90%;
			max-width: 420px;
			max-height: 80vh;
			display: flex;
			flex-direction: column;
			animation: slideUp 0.25s ease;
		}
		@keyframes slideUp {
			from { opacity: 0; transform: translateY(30px); }
			to { opacity: 1; transform: translateY(0); }
		}
		@keyframes fadeIn {
			from { opacity: 0; }
			to { opacity: 1; }
		}
		.impersonate-header {
			padding: 16px 20px;
			border-bottom: 1px solid #e6ecfb;
			display: flex;
			align-items: center;
			justify-content: space-between;
		}
		.impersonate-header h3 {
			margin: 0;
			font-size: 16px;
			font-weight: 700;
			color: #0d1633;
		}
		.impersonate-close {
			background: none;
			border: none;
			font-size: 22px;
			color: #5a6787;
			cursor: pointer;
			padding: 4px;
			line-height: 1;
		}
		.impersonate-close:hover {
			color: #dc2626;
		}
		.impersonate-search-wrap {
			padding: 16px 20px 8px;
		}
		.impersonate-search {
			width: 100%;
			padding: 12px 14px;
			border: 1px solid #d5def7;
			border-radius: 10px;
			font-size: 14px;
			outline: none;
			transition: border-color 0.2s;
		}
		.impersonate-search:focus {
			border-color: #7aa2ff;
			box-shadow: 0 0 0 3px rgba(122,162,255,0.15);
		}
		.impersonate-list {
			flex: 1;
			overflow-y: auto;
			padding: 8px 12px 16px;
			max-height: 350px;
		}
		.impersonate-user {
			display: flex;
			align-items: center;
			gap: 12px;
			padding: 10px 12px;
			border-radius: 10px;
			cursor: pointer;
			transition: background 0.15s;
		}
		.impersonate-user:hover {
			background: #f0f4ff;
		}
		.impersonate-user-avatar {
			width: 36px;
			height: 36px;
			border-radius: 50%;
			background: linear-gradient(135deg, #7aa2ff, #a78bfa);
			display: flex;
			align-items: center;
			justify-content: center;
			font-weight: 700;
			color: #fff;
			font-size: 14px;
			text-transform: uppercase;
		}
		.impersonate-user-info {
			flex: 1;
		}
		.impersonate-user-name {
			font-weight: 600;
			color: #0d1633;
			font-size: 14px;
		}
		.impersonate-user-role {
			font-size: 12px;
			color: #5a6787;
		}
		.impersonate-user-role.admin {
			color: #dc2626;
			font-weight: 600;
		}
		.impersonate-loading {
			text-align: center;
			padding: 30px;
			color: #5a6787;
		}
		.impersonate-empty {
			text-align: center;
			padding: 30px;
			color: #5a6787;
			font-size: 14px;
		}

		/* -------- MODAL PRÉFÉRENCES & PARAMÈTRES UTILISATEUR -------- */
		.prefs-overlay {
			position: fixed; inset: 0;
			background: rgba(13, 22, 51, 0.7);
			backdrop-filter: blur(4px);
			z-index: 10000;
			display: none;
			align-items: center; justify-content: center;
			animation: fadeIn 0.2s ease;
			padding: 24px;
		}
		.prefs-overlay.show { display: flex; }
		.prefs-modal {
			background: #fff;
			border-radius: 16px;
			box-shadow: 0 20px 60px rgba(0,0,0,0.3);
			width: 100%;
			max-width: 720px;
			max-height: 88vh;
			display: flex;
			flex-direction: column;
			animation: slideUp 0.25s ease;
		}
		.prefs-header {
			padding: 16px 22px;
			border-bottom: 1px solid #e6ecfb;
			display: flex;
			align-items: center;
			justify-content: space-between;
			background: linear-gradient(135deg, #eef3ff 0%, #dbeafe 100%);
			border-radius: 16px 16px 0 0;
		}
		.prefs-header h3 { margin: 0; font-size: 16px; font-weight: 700; color: #1e3a8a; display: flex; align-items: center; gap: 8px; }
		.prefs-close {
			background: none; border: none; font-size: 24px; line-height: 1;
			color: #5a6787; cursor: pointer; padding: 4px 8px; border-radius: 6px;
		}
		.prefs-close:hover { color: #dc2626; background: #fee2e2; }
		.prefs-tabs {
			display: flex; gap: 2px; padding: 8px 12px 0;
			background: #fafbff;
			border-bottom: 1px solid #e6ecfb;
			overflow-x: auto;
			scrollbar-width: thin;
			flex-shrink: 0;
			position: sticky;
			top: 0;
			z-index: 5;
		}
		.prefs-header { flex-shrink: 0; position: sticky; top: 0; z-index: 6; }
		.prefs-tab {
			padding: 10px 14px;
			border: none;
			background: transparent;
			color: #5a6787;
			font: inherit;
			font-size: 13px;
			font-weight: 600;
			border-radius: 8px 8px 0 0;
			cursor: pointer;
			white-space: nowrap;
			transition: background 0.15s, color 0.15s;
			display: flex; align-items: center; gap: 6px;
			flex-shrink: 0;
		}
		.prefs-tab:hover { background: #eef3ff; color: #1e3a8a; }
		.prefs-tab.active {
			background: #fff;
			color: #1e3a8a;
			border-bottom: 2px solid #3862ff;
		}
		.prefs-body {
			flex: 1;
			overflow-y: auto;
			padding: 22px;
		}
		.prefs-panel { display: none; }
		.prefs-panel.active { display: block; }
		.prefs-panel h4 { margin: 0 0 8px; font-size: 14px; color: #0d1633; }
		.prefs-panel p.muted { margin: 0 0 14px; font-size: 12.5px; color: #5a6787; line-height: 1.5; }
		.prefs-row { display: flex; gap: 12px; align-items: flex-start; padding: 12px 0; border-bottom: 1px solid #f0f3fa; }
		.prefs-row:last-child { border-bottom: none; }
		.prefs-row-label { flex: 1; }
		.prefs-row-label strong { display: block; font-size: 13.5px; color: #0d1633; font-weight: 600; }
		.prefs-row-label small { display: block; font-size: 11.5px; color: #5a6787; margin-top: 2px; line-height: 1.4; }
		.prefs-toggle {
			position: relative; width: 40px; height: 22px; flex-shrink: 0;
			background: #d5def7; border-radius: 999px; cursor: pointer;
			transition: background 0.2s;
		}
		.prefs-toggle::after {
			content: ''; position: absolute; top: 2px; left: 2px;
			width: 18px; height: 18px; border-radius: 50%;
			background: #fff; transition: transform 0.2s;
			box-shadow: 0 1px 3px rgba(0,0,0,0.15);
		}
		.prefs-toggle input { position: absolute; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
		.prefs-toggle input:checked ~ .prefs-toggle-bg,
		.prefs-toggle:has(input:checked) { background: #3862ff; }
		.prefs-toggle:has(input:checked)::after { transform: translateX(18px); }
		.prefs-empty {
			text-align: center; padding: 30px 20px;
			color: #5a6787; font-size: 13.5px;
			background: #fafbff; border: 1px dashed #d5def7; border-radius: 12px;
		}
		.prefs-input, .prefs-select {
			width: 100%; padding: 9px 12px;
			border: 1px solid #d5def7; border-radius: 9px;
			font: inherit; font-size: 13.5px;
			background: #fff; color: #0d1633;
			margin-top: 6px;
		}
		.prefs-input:focus, .prefs-select:focus { outline: none; border-color: #3862ff; box-shadow: 0 0 0 3px rgba(56,98,255,0.15); }
		.prefs-btn {
			display: inline-flex; align-items: center; gap: 6px;
			padding: 8px 14px; border-radius: 9px; font-size: 13px; font-weight: 600;
			border: 1px solid #d5def7; background: #fff; color: #0d1633;
			cursor: pointer; transition: background 0.15s, border-color 0.15s;
		}
		.prefs-btn:hover { background: #eef3ff; }
		.prefs-btn.primary { background: #3862ff; border-color: #3862ff; color: #fff; }
		.prefs-btn.primary:hover { background: #1e40af; }
		.prefs-2fa-badge {
			display: inline-flex; align-items: center;
			padding: 2px 8px; border-radius: 999px;
			font-size: 10.5px; font-weight: 700;
			text-transform: uppercase; letter-spacing: 0.04em;
			margin-left: 6px; vertical-align: 1px;
		}
		.prefs-2fa-badge--on { background: #d4f5e5; color: #0a6b3a; }
		.prefs-2fa-badge--off { background: #fde8e8; color: #991b1b; }
		.prefs-2fa-badge--loading { background: #f1f5f9; color: #475569; }
		.prefs-appbar-preview {
			background: linear-gradient(180deg,#0f172a,#1e293b);
			border-radius: 14px;
			padding: 14px;
			margin-bottom: 18px;
			box-shadow: 0 4px 14px rgba(15,23,42,0.18);
			border: 1px solid rgba(255,255,255,0.04);
		}
		.prefs-appbar-preview-label {
			font-size: 10.5px;
			text-transform: uppercase;
			letter-spacing: 0.08em;
			font-weight: 700;
			color: #94a3b8;
			margin-bottom: 8px;
			display: flex;
			align-items: center;
			gap: 6px;
		}
		.prefs-appbar-preview-label::before {
			content: '●';
			color: #22c55e;
			animation: prefsPreviewPulse 1.6s ease-in-out infinite;
		}
		@keyframes prefsPreviewPulse {
			0%,100% { opacity: 1; transform: scale(1); }
			50% { opacity: 0.4; transform: scale(0.85); }
		}
		.prefs-appbar-preview-bar {
			height: 44px;
			border-radius: 10px;
			background: linear-gradient(180deg,rgba(15,23,42,.97),rgba(15,23,42,.85));
			border: 1px solid rgba(255,255,255,0.06);
			display: flex;
			align-items: center;
			gap: 6px;
			padding: 0 10px;
			overflow-x: auto;
			overflow-y: hidden;
			scrollbar-width: thin;
			color: #e2e8f0;
		}
		.prefs-appbar-preview-bar::-webkit-scrollbar { height: 4px; }
		.prefs-appbar-preview-bar::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.15); border-radius: 4px; }
		.prefs-appbar-preview-pill {
			display: inline-flex;
			align-items: center;
			gap: 6px;
			padding: 4px 10px;
			border-radius: 999px;
			background: rgba(255,255,255,0.08);
			font-size: 11.5px;
			font-weight: 500;
			color: #e2e8f0;
			white-space: nowrap;
			flex-shrink: 0;
			border: 1px solid rgba(255,255,255,0.06);
			transition: background 0.15s, transform 0.15s;
		}
		.prefs-appbar-preview-pill img,
		.prefs-appbar-preview-pill .prefs-appbar-preview-pill-fallback {
			width: 18px; height: 18px; border-radius: 4px; object-fit: cover;
			background: #475569; color:#fff; display:flex; align-items:center; justify-content:center;
			font-size: 10px; font-weight:700;
		}
		.prefs-appbar-preview-empty {
			width: 100%;
			text-align: center;
			color: #94a3b8;
			font-size: 12px;
			font-style: italic;
		}
		.prefs-appbar-preview-bar.is-disabled {
			background: repeating-linear-gradient(45deg,
				rgba(127,29,29,.25), rgba(127,29,29,.25) 8px,
				rgba(15,23,42,.85) 8px, rgba(15,23,42,.85) 16px);
		}
		.prefs-appbar-preview-bar.is-disabled .prefs-appbar-preview-empty {
			color: #fca5a5;
			font-weight: 600;
			font-style: normal;
		}
		.prefs-appbar-preview-hint {
			display:block;
			color: #94a3b8;
			font-size: 11px;
			margin-top: 8px;
		}
		@media (max-width: 600px) {
			.prefs-tabs { padding: 6px 8px 0; }
			.prefs-tab { padding: 9px 10px; font-size: 12px; }
			.prefs-body { padding: 16px; }
		}

		/* -------- HERO : logo + login -------- */
		.hero {
			min-height: calc(100vh - 72px);
			display: flex;
			flex-direction: column;
			align-items: center;
			gap: 0;
			padding: 0;
		}

		.hero.compact {
			min-height: auto;
			padding: 0
		}

		header.logoTop {
			display: flex;
			align-items: center;
			justify-content: center;
			padding: 0;
			max-width: min(780px, 92vw);
			margin: 1cm auto 0;
			overflow: visible;
		}
		/* Logo plus grand sur grands écrans pour rester proportionné à la grille
		   d'apps élargie (apps-area / topbar-inner).
		   Sur ultrawide (≥ 4500 px, 5120×1440) on grossit aussi le ratio interne
		   pour que le logo réel atteigne ~1200 px de large. */
		@media (min-width: 2600px) {
			header.logoTop { max-width: 1000px; }
		}
		@media (min-width: 4500px) {
			header.logoTop { max-width: 1600px; }
			header.logoTop .logo-flip-container { width: 75%; }
		}

		/* -------- Logo Flip 3D avec délai 1s -------- */
		.logo-flip-container {
			width: 58.8%;
			perspective: 1200px;
			cursor: pointer;
		}

		.logo-flip-inner {
			position: relative;
			width: 100%;
			transform-style: preserve-3d;
			transition: transform 0s ease-in-out;
		}

		.logo-flip-container:hover .logo-flip-inner {
			transition: transform 0.8s cubic-bezier(.4, 0, .2, 1);
			transition-delay: 1s;
			transform: rotateY(180deg);
		}

		.logo-flip-container:not(:hover) .logo-flip-inner {
			transition: transform 0.6s cubic-bezier(.4, 0, .2, 1);
			transition-delay: 0s;
		}

		.logo-face {
			width: 100%;
			backface-visibility: hidden;
			-webkit-backface-visibility: hidden;
		}

		.logo-face img {
			width: 100%;
			height: auto;
			max-height: none;
			display: block;
			object-fit: contain;
			object-position: center;
			transition: transform .45s cubic-bezier(.22, 1, .36, 1);
			transform-origin: center;
		}

		.logo-face-front {
			position: relative;
		}

		.logo-face-back {
			position: absolute;
			top: 0;
			left: 0;
			right: 0;
			bottom: 0;
			width: 100%;
			height: 100%;
			display: flex;
			align-items: center;
			justify-content: center;
			transform: rotateY(180deg);
		}

		.logo-face-back img {
			max-width: 100%;
			max-height: 100%;
			width: auto;
			height: auto;
			object-fit: contain;
		}

		.logo-face-back img {
			filter: drop-shadow(0 0 20px rgba(100, 180, 255, 0.4));
		}

		/* -------- Carte login (ombres ultra-légères) -------- */
		#auth.card {
			width: min(760px, 92vw);
			display: grid;
			place-items: center;
			background: rgba(255, 255, 255, .78);
			backdrop-filter: saturate(120%) blur(8px);
			border: 1px solid var(--line);
			border-radius: calc(var(--radius)+6px);
			box-shadow: 0 1px 5px rgba(20, 40, 100, .05);
			padding: 26px;
			transform-origin: 50% 0;
			transition: opacity .5s ease, transform .5s cubic-bezier(.2, .7, .2, 1), filter .5s ease;
		}

		form.auth-form {
			display: grid;
			gap: 14px;
			width: min(440px, 100%)
		}

		.field {
			display: grid;
			gap: 6px
		}

		.field label {
			font-size: 12px;
			color: #6b7694
		}

		.input {
			padding: 12px 14px;
			border-radius: 12px;
			border: 1px solid #dbe2f3;
			background: #fbfcff;
			color: #0e1836;
			outline: none
		}

		.input:focus {
			border-color: #7aa2ff;
			box-shadow: 0 0 0 4px #7aa2ff33
		}

		.row {
			display: flex;
			justify-content: space-between;
			align-items: center;
			gap: 10px
		}

		.auth-form[data-hidden="true"] {
			display: none
		}

		.btn {
			display: inline-flex;
			align-items: center;
			justify-content: center;
			gap: 8px;
			cursor: pointer;
			padding: 12px 16px;
			border-radius: 12px;
			font-weight: 800;
			color: #1a2454;
			background: #eef3ff;
			border: 1px solid #d5def7;
			box-shadow: 0 1px 3px rgba(20, 40, 100, .05);
			transition: transform .12s ease, background .2s ease, box-shadow .2s ease;
		}

		.btn:hover {
			transform: translateY(-1px);
			background: #e6ecff;
			box-shadow: 0 2px 6px rgba(20, 40, 100, .08)
		}

		.btn[disabled] {
			opacity: .6;
			cursor: not-allowed;
			transform: none
		}

		.hint {
			font-size: 12px;
			color: #6b7694
		}

		.error {
			display: none;
			color: #e02424;
			font-size: 13px
		}

		/* ── 2FA Panel ──────────────────────────────────── */
		#twoFactorPanel {
			display: none;
			animation: fadeSlideIn .35s ease;
		}
		#twoFactorPanel.visible {
			display: grid;
			gap: 16px;
		}
		.tfa-header {
			display: flex;
			align-items: center;
			gap: 12px;
			margin-bottom: 4px;
		}
		.tfa-header svg {
			width: 32px;
			height: 32px;
			flex-shrink: 0;
		}
		.tfa-header h3 {
			margin: 0;
			font-size: 16px;
			font-weight: 700;
			color: var(--ink);
		}
		.tfa-header p {
			margin: 2px 0 0;
			font-size: 12px;
			color: var(--muted);
		}
		.tfa-code-input {
			text-align: center;
			font-size: 28px;
			font-weight: 700;
			letter-spacing: 8px;
			padding: 14px 20px;
			border-radius: 14px;
			border: 2px solid #dbe2f3;
			background: #fbfcff;
			color: #0e1836;
			outline: none;
			font-family: 'Inter', monospace;
			transition: border-color .2s, box-shadow .2s;
		}
		.tfa-code-input:focus {
			border-color: #7aa2ff;
			box-shadow: 0 0 0 4px #7aa2ff33;
		}
		.tfa-code-input.error {
			display: block;
			border-color: #e02424;
			box-shadow: 0 0 0 4px #e0242422;
			animation: shake .4s ease;
		}
		.tfa-actions {
			display: flex;
			justify-content: space-between;
			align-items: center;
			gap: 10px;
		}
		.tfa-back {
			background: none;
			border: none;
			color: var(--muted);
			cursor: pointer;
			font-size: 12px;
			padding: 6px 0;
			text-decoration: underline;
		}
		.tfa-back:hover { color: var(--ink); }
		.tfa-error {
			display: none;
			color: #e02424;
			font-size: 13px;
			text-align: center;
		}
		.tfa-timer {
			font-size: 11px;
			color: var(--muted);
			text-align: center;
		}
		@keyframes fadeSlideIn {
			from { opacity: 0; transform: translateY(12px); }
			to { opacity: 1; transform: translateY(0); }
		}
		@keyframes shake {
			0%, 100% { transform: translateX(0); }
			20% { transform: translateX(-6px); }
			40% { transform: translateX(6px); }
			60% { transform: translateX(-4px); }
			80% { transform: translateX(4px); }
		}

		.success {
			display: none;
			color: #166534;
			font-size: 13px;
			font-weight: 600;
			background: #dcfce7;
			border: 1px solid #86efac;
			border-radius: 10px;
			padding: 10px 12px
		}

		.captcha-root {
			margin: 6px 0 2px;
			display: none
		}

		.captcha-root.active {
			display: block
		}

		.captcha-root .captcha-placeholder {
			height: 60px;
			border: 1px dashed #d5def7;
			border-radius: 10px;
			background: #f7f9ff;
			display: flex;
			align-items: center;
			justify-content: center;
			color: #6b7694;
			font-size: 12px
		}

		.captcha-hint {
			font-size: 11px;
			color: #7b88a8
		}

		.hint-link {
			background: none;
			border: none;
			padding: 0;
			color: #3b5bcc;
			font-weight: 700;
			cursor: pointer;
			text-decoration: underline;
			font-family: inherit;
			font-size: inherit
		}

		.hint-link:hover {
			color: #253e96
		}

		.hint-link:focus {
			outline: 2px solid #7aa2ff55;
			outline-offset: 2px
		}

		.diag-panel {
			margin-top: 12px;
			padding: 12px;
			border-radius: 10px;
			border: 1px solid #ccd6f5;
			background: #f7f9ff;
			display: flex;
			flex-direction: column;
			gap: 8px;
			box-shadow: 0 1px 3px rgba(20, 40, 100, .05);
		}

		.diag-panel[hidden] {
			display: none
		}

		.diag-panel.visible {
			animation: diagFade .28s ease
		}

		.diag-reveal {
			margin-top: 6px;
			background: none;
			border: none;
			padding: 0;
			color: #5566a3;
			font-size: 12px;
			font-weight: 600;
			cursor: pointer;
			text-decoration: underline dotted #aab4df;
			align-self: flex-start
		}

		.diag-reveal:hover {
			color: #2f3f7d
		}

		.diag-reveal:focus {
			outline: 2px solid #7aa2ff44;
			outline-offset: 2px
		}

		.diag-reveal[hidden] {
			display: none
		}

		.diag-header {
			display: flex;
			align-items: center;
			justify-content: space-between;
			font-size: 12px;
			color: #1a2454;
		}

		.diag-actions {
			display: flex;
			align-items: center;
			gap: 8px;
		}

		.diag-copy {
			padding: 6px 10px;
			border-radius: 8px;
			border: 1px solid #ced7f6;
			background: #fff;
			color: #1a2454;
			font-size: 11px;
			font-weight: 700;
			cursor: pointer;
		}

		.diag-copy:hover {
			background: #eef3ff
		}

		.diag-close {
			padding: 6px 10px;
			border-radius: 8px;
			border: 1px solid #ced7f6;
			background: #f5f7ff;
			color: #1a2454;
			font-size: 11px;
			font-weight: 600;
			cursor: pointer;
		}

		.diag-close:hover {
			background: #e5ecff
		}

		.diag-close:focus {
			outline: 2px solid #7aa2ff55;
			outline-offset: 2px
		}

		.diag-text {
			margin: 0;
			padding: 10px;
			border-radius: 8px;
			background: #fff;
			border: 1px solid #dbe2f3;
			font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
			font-size: 11px;
			line-height: 1.4;
			max-height: 200px;
			overflow: auto;
			white-space: pre-wrap;
			word-break: break-word;
		}

		/* Disparition du login */
		.leave {
			opacity: 0;
			transform: perspective(900px) rotateX(7deg) translateY(-14px) scale(.98);
			filter: blur(4px)
		}

		/* -------- APPS : grand bloc grisé -------- */
		#apps {
			display: none;
			margin-top: 30px;
		}

		#apps.active {
			display: block
		}

		.apps-area {
			/* Sur écran standard : plafond 1280px. Sur grand écran on élargit
			   progressivement le bloc d'apps pour exploiter la place dispo —
			   spécialement utile sur les moniteurs ultrawide / incurvés (3048px+). */
			width: min(1280px, 94vw);
			margin: 0 auto 36px;
			display: flex;
			align-items: stretch;
			gap: var(--more-gap);
			position: relative;
			z-index: 0;
		}
		@media (min-width: 1700px) {
			.apps-area { width: min(1600px, 94vw); }
		}
		@media (min-width: 2100px) {
			.apps-area { width: min(2000px, 93vw); }
		}
		@media (min-width: 2600px) {
			.apps-area { width: min(2500px, 92vw); }
		}
		@media (min-width: 3000px) {
			.apps-area { width: min(2900px, 92vw); }
		}

		.apps-area::before {
			content: '';
			position: absolute;
			top: -130px;
			left: -14px;
			right: -14px;
			bottom: -14px;
			border-radius: 34px;
			border: 2px solid rgba(0, 93, 255, .4);
			background: linear-gradient(135deg, rgba(0, 93, 255, .12), rgba(0, 168, 255, .08));
			box-shadow: 0 18px 46px rgba(0, 69, 255, .18);
			pointer-events: none;
			z-index: -1;
		}

		.apps-body {
			flex: 1 1 auto;
			position: relative;
			background:
				radial-gradient(at 20% 20%, rgba(109, 198, 255, .35), transparent 48%),
				radial-gradient(at 80% 0%, rgba(255, 171, 255, .22), transparent 36%),
				linear-gradient(140deg, #1e5bff 0%, #4850ff 35%, #8c32ff 70%, #b026ff 100%);
			border: 1px solid rgba(13, 33, 84, .2);
			border-radius: 22px;
			padding: 14px 18px 18px;
			box-shadow: 0 12px 24px rgba(0, 69, 255, .22);
			display: flex;
			flex-direction: column;
			gap: 0;
			overflow: hidden;
			transition: background 1.2s cubic-bezier(.4, 0, .2, 1),
				box-shadow 1.2s cubic-bezier(.4, 0, .2, 1),
				border-color 1.2s ease;
		}

		/* Mode SpaceProd : déclenché par JS quand le flip révèle le logo SpaceProd,
		   OU par défaut quand on est sur le domaine spaceprod.fr (body.theme-spaceprod).
		   Bascule le fond du bloc apps vers une ambiance spatiale bleu profond → cyan. */
		body.spaceprod-mode .apps-body,
		body.theme-spaceprod .apps-body {
			background:
				/* Halo turquoise clair en haut-DROITE (couleur la plus claire) */
				radial-gradient(at 82% 0%, rgba(165, 243, 252, .55), transparent 42%),
				radial-gradient(at 95% 18%, rgba(103, 232, 249, .35), transparent 32%),
				/* Halo bleu clair en haut-gauche */
				radial-gradient(at 18% 18%, rgba(96, 165, 250, .55), transparent 50%),
				/* Halo bleu profond en bas pour la profondeur */
				radial-gradient(at 50% 100%, rgba(37, 99, 235, .35), transparent 55%),
				/* Gradient de base bleu pur */
				linear-gradient(140deg, #050b3d 0%, #0a1c8c 22%, #1e40af 48%, #2563eb 75%, #3b82f6 100%);
			border-color: rgba(37, 99, 235, .45);
			box-shadow: 0 16px 38px rgba(30, 64, 175, .5);
		}

		/* Quelques étoiles scintillantes dans l'overlay quand SpaceProd est actif (ou domaine spaceprod.fr) */
		body.spaceprod-mode .apps-body::after,
		body.theme-spaceprod .apps-body::after {
			content: '';
			position: absolute;
			inset: 0;
			pointer-events: none;
			z-index: 0;
			background-image:
				radial-gradient(1.5px 1.5px at 12% 24%, rgba(255,255,255,.85), transparent 50%),
				radial-gradient(1px 1px at 78% 18%, rgba(255,255,255,.7), transparent 50%),
				radial-gradient(2px 2px at 35% 65%, rgba(255,255,255,.9), transparent 50%),
				radial-gradient(1px 1px at 88% 72%, rgba(255,255,255,.75), transparent 50%),
				radial-gradient(1.5px 1.5px at 22% 88%, rgba(255,255,255,.65), transparent 50%),
				radial-gradient(1px 1px at 60% 30%, rgba(255,255,255,.6), transparent 50%),
				radial-gradient(2px 2px at 92% 50%, rgba(255,255,255,.8), transparent 50%),
				radial-gradient(1px 1px at 8% 55%, rgba(255,255,255,.5), transparent 50%);
			animation: stars-twinkle 4s ease-in-out infinite alternate;
			opacity: 0;
			transition: opacity 1.2s ease;
		}
		body.spaceprod-mode .apps-body::after,
		body.theme-spaceprod .apps-body::after { opacity: 1 }
		@keyframes stars-twinkle {
			from { opacity: .55 }
			to { opacity: 1 }
		}

		.apps-body::before {
			content: '';
			position: absolute;
			inset: 0;
			border-radius: inherit;
			background: linear-gradient(120deg, rgba(255, 255, 255, .14), rgba(255, 255, 255, 0));
			opacity: .6;
			pointer-events: none;
			mix-blend-mode: screen;
		}

		.apps-layout {
			flex: 1 1 auto;
			display: flex;
			position: relative;
		}

		.apps-grid-wrapper {
			flex: 1 1 auto;
			min-width: 0;
		}

		.more-apps-shell {
			flex: 0 0 auto;
			display: flex;
			align-items: stretch;
			gap: var(--more-gap);
		}

		.more-apps-toggle {
			width: 46px;
			min-width: 46px;
			border-radius: 18px;
			border: 1px solid #d5def7;
			background: #ffffffd9;
			backdrop-filter: saturate(120%) blur(6px);
			box-shadow: 0 6px 20px rgba(30, 45, 90, .12);
			color: #1a2454;
			font-weight: 800;
			display: flex;
			align-items: center;
			justify-content: center;
			writing-mode: vertical-rl;
			text-orientation: mixed;
			cursor: pointer;
			transition: all .24s ease;
			position: relative;
			overflow: hidden;
		}

		.more-apps-toggle:hover {
			background: #f4f7ff;
			border-color: #b7c4f4;
			transform: translateX(2px);
		}

		.more-apps-toggle:focus {
			outline: 3px solid #7aa2ff66;
			outline-offset: 3px;
		}

		.apps-area[data-more-open="true"] .more-apps-toggle {
			background: #1f35a44f;
			border-color: #1f35a4;
			color: #fff;
		}

		.more-apps-toggle .notif {
			position: absolute;
			top: 6px;
			right: 6px;
			width: 18px;
			height: 18px;
			border-radius: 999px;
			background: #e11d48;
			color: #fff;
			font-size: 11px;
			font-weight: 700;
			display: flex;
			align-items: center;
			justify-content: center;
			box-shadow: 0 2px 6px rgba(225, 29, 72, .35);
		}

		.more-apps-panel {
			display: none;
			flex-direction: column;
			gap: 18px;
			width: min(420px, calc(100vw - 40px));
			max-width: 420px;
			background: linear-gradient(180deg, #ffffff, #f5f7ff);
			border-radius: 20px;
			border: 1px solid #d5def7;
			box-shadow: 0 16px 36px rgba(22, 37, 80, .22);
			padding: 20px 20px 22px;
		}

		.apps-area[data-more-open="true"] .more-apps-panel {
			display: flex;
		}

		.more-apps-header {
			display: flex;
			align-items: flex-start;
			justify-content: space-between;
			gap: 14px;
		}

		.more-apps-header h3 {
			margin: 0;
			font-size: 18px;
			font-weight: 800;
			color: #1a2454;
		}

		.more-apps-header p {
			margin: 2px 0 0 0;
			font-size: 12px;
			color: #5a6787;
		}

		.more-apps-close {
			background: none;
			border: none;
			color: #5a6787;
			font-size: 24px;
			line-height: 1;
			cursor: pointer;
			padding: 0;
			transition: color .2s ease;
		}

		.more-apps-close:hover {
			color: #253e96;
		}

		.more-apps-categories {
			display: flex;
			flex-direction: column;
			gap: 16px;
			overflow: auto;
			padding: 12px 10px 18px 10px;
		}

		.more-apps-category {
			display: flex;
			flex-direction: column;
			gap: 10px;
		}

		.more-apps-category h4 {
			margin: 0;
			font-size: 13px;
			font-weight: 800;
			letter-spacing: .04em;
			color: #33416b;
			text-transform: uppercase;
		}

		.more-apps-list {
			display: flex;
			flex-direction: column;
			gap: 12px;
		}

		.more-app-card {
			width: 100%;
			max-width: 375px;
			height: 100px;
			align-self: flex-start;
			margin: 0 6px;
			padding: 12px 16px;
			border-radius: 16px;
			background: #ffffff;
			border: 1px solid rgba(63, 83, 255, .12);
			box-shadow: 0 6px 18px rgba(20, 40, 100, .14);
			cursor: grab;
			transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
		}

		.more-app-card:focus-visible {
			outline: 3px solid #7aa2ff55;
			outline-offset: 3px;
		}

		.more-app-card:hover {
			box-shadow: 0 10px 24px rgba(17, 37, 85, .18);
			border-color: rgba(63, 83, 255, .28);
		}

		.more-app-card-logo {
			width: 58px;
			height: 58px;
			border-radius: 14px;
			flex: 0 0 auto;
			overflow: hidden;
			background: #f3f6ff;
			display: flex;
			align-items: center;
			justify-content: center;
		}

		.more-app-card-logo img {
			width: 74%;
			height: 74%;
			object-fit: contain;
		}

		.more-app-card-body {
			flex: 1 1 auto;
			min-width: 0;
			display: flex;
			flex-direction: column;
			gap: 6px;
			justify-content: center;
		}

		.more-app-card-title {
			font-size: 15px;
			font-weight: 800;
			color: #1a2454;
			white-space: nowrap;
			overflow: hidden;
			text-overflow: ellipsis;
		}

		.more-app-card-desc {
			font-size: 12px;
			color: #4f5d82;
			line-height: 1.35;
			max-height: 36px;
			overflow: hidden;
			text-overflow: ellipsis;
		}

		.more-app-card-tags {
			display: flex;
			align-items: center;
			gap: 6px;
			flex-wrap: wrap;
			font-size: 10px;
			color: #4c5d8b;
		}

		.more-apps-panel .app {
			transform: none;
			opacity: 1;
			position: relative;
			box-shadow: 0 10px 24px rgba(17, 37, 85, .16);
			border: 1px solid rgba(63, 83, 255, .16);
		}

		.more-apps-panel .app:hover {
			box-shadow: 0 16px 34px rgba(40, 60, 120, .22);
		}

		.bank-files {
			width: min(1280px, 94vw);
			margin: 40px auto 80px;
			position: relative;
		}

		/* Glow effect behind card */
		.bank-files::before {
			content: '';
			position: absolute;
			inset: -20px;
			border-radius: 40px;
			background:
				radial-gradient(circle at 30% 20%, rgba(99, 102, 241, .25), transparent 50%),
				radial-gradient(circle at 70% 80%, rgba(168, 85, 247, .2), transparent 50%);
			filter: blur(40px);
			opacity: 0.6;
			pointer-events: none;
			z-index: -1;
		}

		.bank-files-card {
			background:
				linear-gradient(135deg, rgba(255, 255, 255, 0.95), rgba(248, 250, 255, 0.92));
			backdrop-filter: saturate(180%) blur(20px);
			border: 1px solid rgba(99, 102, 241, .2);
			border-radius: 28px;
			box-shadow:
				0 20px 60px rgba(99, 102, 241, .15),
				0 8px 24px rgba(0, 0, 0, .08),
				inset 0 1px 0 rgba(255, 255, 255, .8);
			padding: 32px 36px;
			transition: all .4s cubic-bezier(.2, .7, .2, 1);
			position: relative;
			overflow: hidden;
			cursor: pointer;
		}

		/* Subtle gradient overlay */
		.bank-files-card::before {
			content: '';
			position: absolute;
			inset: 0;
			background: linear-gradient(135deg, rgba(99, 102, 241, .08) 0%, transparent 50%, rgba(168, 85, 247, .06) 100%);
			pointer-events: none;
			opacity: 0.5;
		}

		.bank-files-card[data-open="true"] {
			box-shadow:
				0 24px 70px rgba(99, 102, 241, .22),
				0 12px 32px rgba(0, 0, 0, .12),
				inset 0 1px 0 rgba(255, 255, 255, .9);
			transform: translateY(-2px);
		}

		.bank-files-header {
			display: flex;
			align-items: center;
			justify-content: space-between;
			gap: 20px;
			position: relative;
			z-index: 1;
		}

		.bank-files-header-content {
			display: flex;
			align-items: center;
			gap: 16px;
			flex: 1;
			min-width: 0;
		}

		.bank-files-header h3 {
			margin: 0;
			font-size: 22px;
			font-weight: 900;
			background: linear-gradient(135deg, #4f46e5 0%, #7c3aed 50%, #a855f7 100%);
			-webkit-background-clip: text;
			-webkit-text-fill-color: transparent;
			background-clip: text;
			letter-spacing: 0.5px;
			white-space: nowrap;
			position: relative;
			display: flex;
			align-items: center;
			gap: 12px;
		}

		.bank-files-header h3 img {
			width: 32px;
			height: 32px;
			object-fit: contain;
			filter: drop-shadow(0 2px 8px rgba(99, 102, 241, .3));
		}

		.bank-files-header p {
			margin: 0;
			font-size: 13px;
			color: #64748b;
			font-weight: 500;
			white-space: nowrap;
			overflow: hidden;
			text-overflow: ellipsis;
		}

		/* Reduce padding when closed */
		.bank-files-card:not([data-open="true"]) {
			padding: 20px 28px;
		}

		.bank-files-toggle {
			border: none;
			background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
			color: #fff;
			font-weight: 700;
			padding: 12px 24px;
			border-radius: 999px;
			cursor: pointer;
			transition: all .3s cubic-bezier(.2, .7, .2, 1);
			box-shadow:
				0 4px 14px rgba(99, 102, 241, .35),
				inset 0 1px 0 rgba(255, 255, 255, .2);
			position: relative;
			overflow: hidden;
		}

		/* Shine effect on hover */
		.bank-files-toggle::before {
			content: '';
			position: absolute;
			top: 0;
			left: -100%;
			width: 100%;
			height: 100%;
			background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .3), transparent);
			transition: left .6s ease;
		}

		.bank-files-toggle:hover {
			background: linear-gradient(135deg, #4f46e5 0%, #7c3aed 100%);
			box-shadow:
				0 6px 20px rgba(99, 102, 241, .45),
				inset 0 1px 0 rgba(255, 255, 255, .3);
			transform: translateY(-2px);
		}

		.bank-files-toggle:hover::before {
			left: 100%;
		}

		.bank-files-toggle:active {
			transform: translateY(0);
		}

		.bank-files-body {
			margin-top: 28px;
			display: none;
			position: relative;
			z-index: 1;
		}

		.bank-files-body[data-open="true"] {
			display: block;
			animation: bankBodySlide .4s cubic-bezier(.2, .7, .2, 1);
		}

		@keyframes bankBodySlide {
			from {
				opacity: 0;
				transform: translateY(-10px)
			}

			to {
				opacity: 1;
				transform: translateY(0)
			}
		}

		.bank-files-tools {
			display: flex;
			align-items: center;
			justify-content: space-between;
			gap: 16px;
			flex-wrap: wrap;
			margin-bottom: 24px;
		}

		.bank-search {
			position: relative;
			display: flex;
			align-items: center;
			flex: 1 1 260px;
		}

		.bank-search span.icon {
			position: absolute;
			left: 14px;
			font-size: 16px;
			z-index: 1;
		}

		.bank-search input {
			width: 100%;
			padding: 12px 16px 12px 42px;
			border-radius: 16px;
			border: 2px solid rgba(99, 102, 241, .15);
			background: rgba(255, 255, 255, .9);
			backdrop-filter: blur(8px);
			color: #1e293b;
			font-weight: 500;
			transition: all .3s ease;
			box-shadow: 0 2px 8px rgba(0, 0, 0, .04);
		}

		.bank-search input:focus {
			outline: none;
			border-color: #6366f1;
			box-shadow:
				0 0 0 4px rgba(99, 102, 241, .15),
				0 4px 16px rgba(99, 102, 241, .2);
			background: #fff;
		}

		.bank-refresh {
			border: none;
			border-radius: 14px;
			padding: 12px 20px;
			font-weight: 700;
			background: linear-gradient(135deg, #f1f5f9 0%, #e2e8f0 100%);
			color: #4f46e5;
			cursor: pointer;
			transition: all .25s ease;
			box-shadow: 0 2px 8px rgba(0, 0, 0, .06);
		}

		.bank-refresh:hover {
			background: linear-gradient(135deg, #e2e8f0 0%, #cbd5e1 100%);
			box-shadow: 0 4px 12px rgba(0, 0, 0, .1);
			transform: translateY(-1px);
		}

		.bank-refresh:active {
			transform: translateY(0);
		}

		.bank-files-empty {
			padding: 32px;
			background:
				linear-gradient(135deg, rgba(99, 102, 241, .05), rgba(168, 85, 247, .03));
			border-radius: 20px;
			border: 2px dashed rgba(99, 102, 241, .25);
			text-align: center;
			font-size: 14px;
			color: #64748b;
			font-weight: 500;
		}

		.bank-files-empty[hidden] {
			display: none;
		}

		.bank-files-grid {
			display: grid;
			gap: 20px;
			grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
		}

		.bank-file-card {
			background: linear-gradient(135deg, #ffffff 0%, #fafbff 100%);
			border-radius: 20px;
			padding: 20px;
			border: 1px solid rgba(99, 102, 241, .12);
			box-shadow:
				0 8px 24px rgba(99, 102, 241, .08),
				0 2px 8px rgba(0, 0, 0, .04);
			display: grid;
			gap: 12px;
			transition: all .3s cubic-bezier(.2, .7, .2, 1);
			position: relative;
			overflow: hidden;
		}

		/* Gradient accent on left edge */
		.bank-file-card::before {
			content: '';
			position: absolute;
			left: 0;
			top: 0;
			bottom: 0;
			width: 4px;
			background: linear-gradient(180deg, #6366f1, #a855f7);
			opacity: 0;
			transition: opacity .3s ease;
		}

		.bank-file-card:hover {
			transform: translateY(-4px);
			box-shadow:
				0 16px 40px rgba(99, 102, 241, .16),
				0 4px 16px rgba(0, 0, 0, .08);
			border-color: rgba(99, 102, 241, .25);
		}

		.bank-file-card:hover::before {
			opacity: 1;
		}

		.bank-file-top {
			display: flex;
			align-items: center;
			justify-content: space-between;
			gap: 12px;
		}

		.bank-file-name {
			font-size: 15px;
			font-weight: 700;
			color: #1e293b;
			max-width: 70%;
			text-overflow: ellipsis;
			overflow: hidden;
			white-space: nowrap;
		}

		.bank-file-meta {
			font-size: 12px;
			color: #64748b;
			font-weight: 500;
		}

		.bank-file-actions {
			display: flex;
			gap: 10px;
			flex-wrap: wrap;
		}

		.bank-file-actions button {
			border: none;
			border-radius: 12px;
			padding: 8px 14px;
			font-size: 13px;
			font-weight: 600;
			cursor: pointer;
			background: linear-gradient(135deg, #f1f5f9 0%, #e2e8f0 100%);
			color: #4f46e5;
			transition: all .2s ease;
			box-shadow: 0 2px 6px rgba(0, 0, 0, .05);
		}

		.bank-file-actions button:hover {
			background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
			color: #fff;
			box-shadow: 0 4px 12px rgba(99, 102, 241, .3);
			transform: translateY(-1px);
		}

		.bank-file-actions button:active {
			transform: translateY(0);
		}

		.more-apps-empty {
			font-size: 13px;
			color: #5a6787;
			background: #f4f6ff;
			border: 1px dashed #cbd5f5;
			border-radius: 14px;
			padding: 14px 16px;
			text-align: center;
		}

		@media (max-width: 1080px) {
			.apps-area {
				flex-direction: column;
				gap: 16px;
			}

			.more-apps-shell {
				flex-direction: column;
				align-items: stretch;
			}

			.more-apps-toggle {
				width: 100%;
				min-width: 0;
				height: 48px;
				writing-mode: horizontal-tb;
				text-orientation: initial;
			}

			.apps-area[data-more-open="true"] .more-apps-panel {
				width: 100%;
				max-width: none;
			}
		}

		/* Controls wrapper above apps */
		.apps-controls {
			width: min(1280px, 94vw);
			margin: 0 auto 12px;
			position: relative;
			z-index: 600;
			display: flex;
			align-items: flex-start;
			gap: var(--more-gap);
		}
		/* La barre recherche+filtres suit la largeur de .apps-area / .topbar-inner
		   pour rester proportionnée aux blocs apps sur grands écrans / ultrawide. */
		@media (min-width: 1700px) {
			.apps-controls { width: min(1600px, 94vw); }
		}
		@media (min-width: 2100px) {
			.apps-controls { width: min(2000px, 93vw); }
		}
		@media (min-width: 2600px) {
			.apps-controls { width: min(2500px, 92vw); }
		}
		@media (min-width: 3000px) {
			.apps-controls { width: min(2900px, 92vw); }
		}
		@media (min-width: 4500px) {
			/* Ultrawide ≥4500 (typique 5120×1440) — réduit pour ne pas être trop étalé. */
			.apps-controls { width: min(3500px, 90vw); }
			.apps-area { width: min(3500px, 90vw); }
			.topbar-inner { max-width: 3500px; }
		}

		/* Écran incurvé 5120×1440 : tuiles d'apps à 80% (Bastien). On override les
		   variables CSS plutôt qu'un zoom/scale global, qui resterait safe pour les
		   clics/drags (cf. memory feedback_css_zoom_banned.md). */
		@media (min-width: 5000px) {
			:root {
				--apps-grid-min: 144px;       /* 180 × 0.8 */
				--apps-grid-gap: 11px;        /* 14 × 0.8 */
				--app-card-size: 144px;       /* aligne fallback explicitement */
			}
		}

		.apps-controls-main {
			flex: 1 1 auto;
			min-width: 0;
			position: relative;
		}

		.apps-controls-main .search-card {
			height: 100%;
			width: 100%;
		}

		.search-card {
			position: relative;
			overflow: visible;
			z-index: 1;
			background: rgba(255, 255, 255, .86);
			backdrop-filter: saturate(120%) blur(6px);
			border: 1px solid var(--line);
			border-radius: 20px;
			padding: 8px 12px;
			box-shadow: 0 1px 5px rgba(20, 40, 100, .05);
		}

		/* === Barre d'icônes inclinée style "PREMIER SUR LA PROD" === */
		.skyprod-action-bar {
			position: absolute;
			right: 40px;
			bottom: calc(100% - 5px);
			display: inline-flex;
			align-items: center;
			gap: 14px;
			padding: 12px 26px;
			background: linear-gradient(90deg, #3a8bff 0%, #6a5cff 55%, #8a4bff 100%);
			transform: skewX(-12deg);
			border-radius: 6px;
			box-shadow: 0 10px 24px rgba(80, 90, 200, 0.4), 0 2px 6px rgba(0, 0, 0, 0.18);
			z-index: 0;
			transition: background 0.6s cubic-bezier(.4, 0, .2, 1), box-shadow 0.6s ease;
		}

		body.theme-skyprod .skyprod-action-bar {
			background: linear-gradient(90deg, #3a8bff 0%, #6a5cff 55%, #8a4bff 100%);
			box-shadow: 0 10px 24px rgba(80, 90, 200, 0.4), 0 2px 6px rgba(0, 0, 0, 0.18);
		}

		body.theme-spaceprod .skyprod-action-bar {
			background: linear-gradient(90deg, #1ec4e5 0%, #1e88f5 50%, #2d5fff 100%);
			box-shadow: 0 10px 24px rgba(30, 120, 255, 0.4), 0 2px 6px rgba(0, 0, 0, 0.18);
		}

		/* Synchronisation avec le flip 3D du logo : quand spaceprod-mode est actif,
		   on bascule sur les couleurs du logo opposé (révélé par le flip). */
		body.theme-skyprod.spaceprod-mode .skyprod-action-bar {
			background: linear-gradient(90deg, #1ec4e5 0%, #1e88f5 50%, #2d5fff 100%);
			box-shadow: 0 10px 24px rgba(30, 120, 255, 0.4), 0 2px 6px rgba(0, 0, 0, 0.18);
		}

		body.theme-spaceprod.spaceprod-mode .skyprod-action-bar {
			background: linear-gradient(90deg, #3a8bff 0%, #6a5cff 55%, #8a4bff 100%);
			box-shadow: 0 10px 24px rgba(80, 90, 200, 0.4), 0 2px 6px rgba(0, 0, 0, 0.18);
		}

		.skyprod-action-bar > * {
			transform: skewX(12deg);
		}

		.sp-icon-btn {
			position: relative;
			width: 38px;
			height: 38px;
			display: inline-flex;
			align-items: center;
			justify-content: center;
			background: rgba(255, 255, 255, 0.18);
			border: 1px solid rgba(255, 255, 255, 0.35);
			border-radius: 10px;
			color: #fff;
			cursor: pointer;
			transition: background 0.2s ease, transform 0.2s ease;
			padding: 0;
		}

		.sp-profile-btn {
			padding: 0 !important;
			overflow: hidden;
		}
		.sp-profile-avatar {
			width: 100%; height: 100%;
			display: flex; align-items: center; justify-content: center;
			background: linear-gradient(135deg, #3862ff, #8b5cf6);
			color: #fff;
			border-radius: 10px;
			transform: skewX(-12deg);
			overflow: hidden;
		}
		.sp-profile-avatar img {
			width: 100%; height: 100%; object-fit: cover; border-radius: 0;
		}
		.sp-profile-initials {
			font-weight: 700;
			font-size: 14px;
			letter-spacing: 0.02em;
		}
		.sp-icon-btn:hover {
			background: rgba(255, 255, 255, 0.35);
			transform: skewX(12deg) translateY(-1px);
		}

		@keyframes sp-bounce {
			0%, 100%   { transform: skewX(12deg) translateY(0); }
			20%        { transform: skewX(12deg) translateY(-6px); }
			40%        { transform: skewX(12deg) translateY(0); }
			55%        { transform: skewX(12deg) translateY(-3px); }
			70%        { transform: skewX(12deg) translateY(0); }
		}

		.sp-icon-btn.has-unread {
			animation: sp-bounce 1.6s cubic-bezier(.4, 0, .2, 1) infinite;
		}

		.sp-icon-btn.has-unread:hover {
			animation: none;
		}

		.sp-icon-btn svg {
			width: 19px;
			height: 19px;
		}

		.sp-badge {
			position: absolute;
			top: -5px;
			right: -5px;
			min-width: 17px;
			height: 17px;
			padding: 0 4px;
			background: #ff3b5c;
			color: #fff;
			font-size: 10px;
			font-weight: 700;
			border-radius: 999px;
			display: inline-flex;
			align-items: center;
			justify-content: center;
			border: 2px solid #6a5cff;
			line-height: 1;
			transition: border-color 0.6s ease;
		}

		/* Le selector .sp-badge ci-dessus impose display:inline-flex et écrasait
		   l'attribut HTML `hidden` (qui applique display:none avec une spécificité
		   plus faible). On force le masquage explicite pour que le badge unread
		   de la messagerie disparaisse vraiment quand tout est lu. */
		.sp-badge[hidden] {
			display: none !important;
		}

		body.theme-spaceprod .sp-badge {
			border-color: #1ea0ff;
		}

		body.theme-skyprod.spaceprod-mode .sp-badge {
			border-color: #1ea0ff;
		}

		body.theme-spaceprod.spaceprod-mode .sp-badge {
			border-color: #6a5cff;
		}

		.sp-badge--dot {
			min-width: 11px;
			height: 11px;
			padding: 0;
			top: -3px;
			right: -3px;
		}

		@media (max-width: 768px) {
			.skyprod-action-bar {
				right: 16px;
				padding: 8px 18px;
				gap: 10px;
			}

			.sp-icon-btn {
				width: 32px;
				height: 32px;
			}

			.sp-icon-btn svg {
				width: 16px;
				height: 16px;
			}
		}


		/* Toolbar (search) */
		.apps-toolbar {
			display: grid;
			grid-template-columns: 1fr max-content;
			align-items: center;
			gap: 10px;
			margin: 0;
		}

		.apps-toolbar .search {
			position: relative;
			display: flex;
			align-items: center;
			flex: 1 1 auto;
		}

		.apps-toolbar .menu {
			display: flex;
			align-items: center;
			justify-content: flex-end;
		}

		.apps-toolbar .search input {
			flex: 1 1 auto;
			min-width: 0;
			padding: 10px 12px 10px 34px;
			border-radius: 12px;
			border: 1px solid #d5def7;
			background: #fff;
			color: #0e1836;
			outline: none;
			font: inherit;
		}

		.search input:focus {
			border-color: #7aa2ff;
			box-shadow: 0 0 0 4px #7aa2ff33
		}

		.search .icon {
			position: absolute;
			left: 8px;
			color: #6b7694;
			font-size: 14px
		}

		/* Tag bar */
		.tag-filter-bar {
			max-height: 0;
			opacity: 0;
			overflow: hidden;
			transform: translateY(-8px);
			transition: max-height .28s cubic-bezier(.2, .7, .2, 1), opacity .24s ease, transform .28s ease;
			pointer-events: none;
			margin-top: 0;
		}

		.tag-filter-bar[data-visible="true"] {
			max-height: 180px;
			opacity: 1;
			transform: translateY(0);
			pointer-events: auto;
			margin-top: 12px;
		}

		.tag-filters {
			display: flex;
			align-items: center;
			gap: 8px;
			flex-wrap: wrap;
			margin: 0;
			padding: 4px 0;
		}

		.tag-btn {
			padding: 6px 12px;
			border-radius: 18px;
			border: 1px solid #d5def7;
			background: #fff;
			color: #5a6787;
			font-size: 12px;
			font-weight: 600;
			cursor: pointer;
			transition: all 0.2s ease;
			white-space: nowrap;
			display: inline-flex;
			align-items: center;
			gap: 4px;
		}

		.tag-btn:hover {
			background: #f2f6ff;
			border-color: #7aa2ff;
			color: #1a2454
		}

		.tag-btn.active {
			background: #7aa2ff;
			border-color: #7aa2ff;
			color: #fff;
			box-shadow: 0 2px 6px rgba(122, 162, 255, 0.3)
		}

		.tag-btn.active:hover {
			background: #6d94ff
		}

		.tag-btn-divider {
			width: 1px;
			height: 24px;
			margin: 0 10px;
			background: rgba(80, 100, 150, 0.15);
			align-self: center;
		}

		.tag-btn-group {
			display: flex;
			flex-wrap: wrap;
			gap: 8px;
			align-items: center;
		}

		.tag-btn-group .tag-btn {
			margin: 0;
		}

		.tag-btn-new {
			background: #f6f8ff;
			border-color: #bcc9ff;
			color: #2741c3;
			font-weight: 600;
		}

		.tag-btn-new:hover {
			background: #e8edff;
			border-color: #2741c3;
			color: #1a2454;
		}

		.tag-btn .tag-count {
			display: inline-flex;
			align-items: center;
			justify-content: center;
			min-width: 18px;
			height: 18px;
			padding: 0 5px;
			margin-left: 4px;
			border-radius: 999px;
			background: rgba(80, 100, 150, .12);
			color: inherit;
			font-size: 10.5px;
			font-weight: 700;
			line-height: 1;
			opacity: .85;
		}
		.tag-btn.active .tag-count {
			background: rgba(255, 255, 255, .25);
			color: #fff;
			opacity: 1;
		}
		.tag-btn[data-tag-count="0"] .tag-count {
			opacity: .45;
		}

		.menu-toggle {
			display: flex;
			align-items: center;
			gap: 8px;
			font-size: 12px;
			color: #0e1836;
			cursor: pointer;
		}

		.menu-toggle input {
			width: 16px;
			height: 16px;
			margin: 0;
		}

		/* Toolbar menu */
		.menu {
			position: relative;
			justify-self: end;
		}

		.menu-btn {
			padding: 8px 12px;
			border-radius: 10px;
			border: 1px solid #d5def7;
			background: #fff;
			color: #1a2454;
			font-weight: 800;
			cursor: pointer;
			display: flex;
			align-items: center;
			justify-content: center;
			width: 42px;
			height: 40px;
			font-size: 20px;
			line-height: 1;
		}

		.menu-btn:hover {
			background: #f2f6ff
		}

		.dropdown {
			position: absolute;
			right: 0;
			top: 40px;
			background: #fff;
			border: 1px solid #dbe2f3;
			border-radius: 12px;
			box-shadow: 0 8px 24px rgba(20, 40, 100, .12);
			min-width: 260px;
			z-index: 1600;
			display: none
		}

		.dropdown.open {
			display: block
		}

		.dropdown .item {
			display: block;
			width: 100%;
			text-align: left;
			padding: 10px 12px;
			background: none;
			border: 0;
			font: inherit;
			color: #0e1836;
			cursor: pointer
		}

		.dropdown .item:hover {
			background: #eef3ff
		}

		/* slider aesthetic inside dropdown */
		#snapRadiusRange {
			width: 100%
		}

		#snapRadiusRange {
			appearance: none;
			-webkit-appearance: none;
			height: 6px;
			border-radius: 999px;
			background: #e6ecfb;
			outline: none
		}

		#snapRadiusRange::-webkit-slider-thumb {
			-webkit-appearance: none;
			width: 16px;
			height: 16px;
			border-radius: 50%;
			background: #6d8aff;
			border: 1px solid #5f79e8;
			cursor: pointer
		}

		#snapRadiusRange::-moz-range-thumb {
			width: 16px;
			height: 16px;
			border: none;
			border-radius: 50%;
			background: #6d8aff;
			cursor: pointer
		}

		.apps-zoom-controls {
			display: grid;
			gap: 6px;
			cursor: default;
			background: none !important;
		}

		.apps-zoom-label {
			font-size: 12px;
			color: #6b7694;
			font-weight: 600;
		}

		.apps-zoom-buttons {
			display: inline-flex;
			align-items: center;
			gap: 8px;
		}

		.apps-zoom-btn {
			width: 32px;
			height: 32px;
			border-radius: 10px;
			border: 1px solid #d5def7;
			background: #fff;
			color: #1a2454;
			font-weight: 700;
			font-size: 16px;
			line-height: 1;
			cursor: pointer;
			transition: background .12s ease, transform .12s ease, border-color .12s ease;
		}

		.apps-zoom-btn:disabled {
			opacity: .45;
			cursor: not-allowed;
		}

		.apps-zoom-btn:not(:disabled):hover {
			background: #f2f6ff;
			border-color: #b7c4f4;
		}

		.apps-zoom-btn:not(:disabled):active {
			transform: translateY(1px);
		}

		.apps-zoom-value {
			min-width: 48px;
			text-align: center;
			font-size: 12px;
			font-weight: 700;
			color: #33416b;
		}

		.apps-grid {
			display: grid;
			gap: var(--apps-grid-gap, 18px);
			grid-template-columns: repeat(auto-fill, minmax(var(--apps-grid-min, 220px), 1fr));
			position: relative;
			z-index: 200;
			-webkit-user-select: none;
			-ms-user-select: none;
			user-select: none;
			-webkit-touch-callout: none;
		}

		/* Reorder mode visuals */
		.apps-grid.reorder-mode .app {
			cursor: grab
		}

		.apps-grid.reorder-mode {
			touch-action: none
		}

		.app.dragging {
			opacity: .9;
			box-shadow: 0 8px 26px rgba(20, 40, 100, .22);
			border-color: #c7d3ff
		}

		.app.placeholder {
			outline: 3px dashed #7a8bff;
			outline-offset: -6px;
			background: #f3f6ff;
			filter: none !important;
			opacity: 1 !important
		}

		/* Visual pulse when placeholder relocates */
		.app.placeholder.pulse {
			animation: slotPulse 240ms cubic-bezier(.2, .7, .2, 1)
		}

		@keyframes slotPulse {
			0% {
				transform: scale(.92);
				box-shadow: 0 0 0 0 rgba(98, 130, 255, 0)
			}

			55% {
				transform: scale(1.08);
				box-shadow: 0 12px 32px rgba(98, 130, 255, .26)
			}

			100% {
				transform: scale(1);
				box-shadow: 0 6px 16px rgba(98, 130, 255, .16)
			}
		}

		/* Micro-bounce on the dragged card when slot changes */
		.app.dragging.drag-bounce {
			animation: dragBounce 190ms cubic-bezier(.2, .7, .2, 1)
		}

		@keyframes dragBounce {
			0% {
				transform: translateY(0) scale(1)
			}

			45% {
				transform: translateY(-4px) scale(1.06)
			}

			100% {
				transform: translateY(0) scale(1)
			}
		}

		/* Ghost slot overlay that follows target slot */
		.ghost-slot {
			position: fixed;
			left: 0;
			top: 0;
			width: 0;
			height: 0;
			border: 3px solid #3f53ff;
			border-radius: 14px;
			background: rgba(98, 130, 255, .16);
			pointer-events: none;
			z-index: 1100;
			opacity: 0;
			box-shadow: 0 12px 34px rgba(63, 83, 255, .28);
			transition: transform 140ms cubic-bezier(.2, .7, .2, 1), width 140ms, height 140ms, opacity 120ms
		}

		.ghost-slot.show {
			opacity: 1
		}

		@media (max-width: 900px) {
			.apps-grid {
				grid-template-columns: repeat(auto-fill, minmax(calc(var(--apps-grid-min, 220px) * 0.82), 1fr));
			}
		}

		@media (max-width: 600px) {
			.apps-grid {
				grid-template-columns: repeat(auto-fill, minmax(calc(var(--apps-grid-min, 220px) * 0.68), 1fr));
			}
		}

		@media (max-width: 420px) {
			.apps-grid {
				grid-template-columns: repeat(auto-fill, minmax(calc(var(--apps-grid-min, 220px) * 0.59), 1fr));
			}
		}

		/* --- Carte logo (flip 3D) --- */
		.app {
			position: relative;
			isolation: isolate;
			background: linear-gradient(180deg, #ffffff, #fafbff);
			border: 1px solid var(--line);
			border-radius: 18px;
			box-shadow: 0 1px 5px rgba(20, 40, 100, .08);
			cursor: pointer;
			overflow: hidden;
			z-index: 210;
			-webkit-user-select: none;
			-ms-user-select: none;
			user-select: none;
			-webkit-touch-callout: none;
			display: grid;
			place-items: center;
			aspect-ratio: 1/1;
			transform: translateY(24px) scale(.96);
			opacity: 0;
			transition: transform .5s cubic-bezier(.2, .7, .2, 1), opacity .5s ease, box-shadow .25s ease, border-color .25s ease;
			perspective: 1000px;
		}

		.app.app-highlight {
			box-shadow: 0 0 0 3px rgba(59, 130, 246, .45), 0 18px 32px rgba(30, 58, 138, .25);
			border-color: rgba(59, 130, 246, .7);
			outline: 3px solid rgba(59, 130, 246, .35);
			outline-offset: 0;
		}

		.app.app-highlight::after {
			content: '';
			position: absolute;
			inset: -4px;
			border-radius: inherit;
			box-shadow: 0 0 0 0 rgba(59, 130, 246, .32);
			animation: appHighlightPulse 1.6s ease-out forwards;
			pointer-events: none;
		}

		@keyframes appHighlightPulse {
			0% {
				box-shadow: 0 0 0 0 rgba(59, 130, 246, .35);
			}

			60% {
				box-shadow: 0 0 0 14px rgba(59, 130, 246, 0);
			}

			100% {
				box-shadow: 0 0 0 24px rgba(59, 130, 246, 0);
			}
		}

		.app.folder-card {
			--folder-card-size: var(--app-card-size, var(--apps-grid-min, 180px));
			--folder-padding: clamp(12px, calc(var(--folder-card-size) * 0.12), 22px);
			--folder-gap: clamp(10px, calc(var(--folder-card-size) * 0.08), 18px);
			position: relative;
			display: grid;
			grid-template-rows: auto 1fr;
			align-content: start;
			gap: var(--folder-gap);
			padding: var(--folder-padding);
			background: linear-gradient(180deg, var(--folder-bg-start, #ffffff), var(--folder-bg-end, #f6f8ff));
			overflow: hidden;
			aspect-ratio: 1 / 1;
			min-height: auto;
			transition: padding .2s ease, box-shadow .25s ease, transform .3s ease;
			--folder-accent-soft: var(--folder-accent-soft, #dbe4ff);
		}

		.app.folder-card::before {
			content: '📁';
			position: absolute;
			top: 55%;
			left: 50%;
			transform: translate(-50%, -50%);
			font-size: clamp(72px, calc(var(--folder-card-size) * 0.72), 168px);
			color: var(--folder-accent-glow, rgba(125, 140, 255, .18));
			pointer-events: none;
			z-index: 0;
		}

		.folder-header {
			position: relative;
			z-index: 1;
			display: flex;
			align-items: center;
			justify-content: flex-end;
			gap: 10px;
			width: 100%;
			min-height: 32px;
		}

		.folder-header-remote {
			justify-content: space-between;
		}

		.folder-count {
			font-size: 12px;
			font-weight: 700;
			letter-spacing: .3px;
			color: var(--folder-count-color, #5b6aa4);
			padding: 4px 12px;
			border-radius: 999px;
			border: 1px solid var(--folder-accent-soft, #d5def7);
			background: var(--folder-count-bg, rgba(255, 255, 255, .88));
			cursor: pointer;
			transition: transform .12s ease, box-shadow .12s ease;
		}

		.folder-count:focus {
			outline: 3px solid rgba(122, 162, 255, .35);
			outline-offset: 2px;
		}

		.folder-count:hover {
			transform: translateY(-1px);
			box-shadow: 0 4px 12px rgba(31, 52, 120, .16);
		}

		.folder-body {
			position: relative;
			z-index: 1;
			width: 100%;
			display: grid;
			gap: clamp(8px, calc(var(--folder-card-size) * 0.06), 16px);
			align-items: center;
			justify-items: center;
			text-align: center;
			padding: clamp(10px, calc(var(--folder-card-size) * 0.07), 16px) clamp(4px, calc(var(--folder-card-size) * 0.04), 10px);
		}

		.folder-info {
			display: grid;
			gap: clamp(8px, calc(var(--folder-card-size) * 0.06), 18px);
			justify-items: center;
			align-content: start;
		}

		.folder-hero-icon {
			width: clamp(54px, calc(var(--folder-card-size) * 0.34), 108px);
			height: clamp(40px, calc(var(--folder-card-size) * 0.26), 76px);
			background-image: var(--folder-hero-img, none);
			background-repeat: no-repeat;
			background-size: contain;
			background-position: center;
			display: grid;
			place-items: center;
			position: relative;
		}

		.folder-hero-glyph {
			font-size: clamp(28px, calc(var(--folder-card-size) * 0.22), 44px);
			line-height: 1;
			display: flex;
			align-items: center;
			justify-content: center;
			pointer-events: none;
			filter: drop-shadow(0 6px 18px rgba(16, 27, 63, .16));
			transition: transform .2s ease, opacity .2s ease;
		}

		.folder-icon-default .folder-hero-glyph {
			font-size: clamp(24px, calc(var(--folder-card-size) * 0.19), 36px);
			opacity: .88;
		}

		.folder-icon-custom .folder-hero-glyph {
			font-size: clamp(30px, calc(var(--folder-card-size) * 0.24), 48px);
			opacity: 1;
		}

		.folder-icon-empty .folder-hero-glyph {
			opacity: 0;
			filter: none;
		}

		.folder-title-hidden .folder-name-big {
			display: none;
		}

		.folder-modal-title-toggle {
			margin-top: 16px;
			display: grid;
			gap: 6px;
		}

		.folder-modal-checkbox {
			display: flex;
			align-items: center;
			gap: 10px;
			font-weight: 600;
			color: #1a2454;
			cursor: pointer;
		}

		.folder-modal-checkbox input {
			width: 18px;
			height: 18px;
			accent-color: #1d4ed8;
			cursor: pointer;
		}

		.folder-modal-title-hint {
			margin: 0;
			font-size: 12px;
			color: #5c6ba0;
		}

		.app.folder-card:hover .folder-hero-glyph {
			transform: translateY(-3px);
		}

		.folder-info-remote {
			justify-items: flex-start;
			text-align: left;
			width: 100%;
		}

		.folder-name-big {
			font-size: clamp(16px, calc(var(--folder-card-size) * 0.14), 24px);
			font-weight: 800;
			color: var(--folder-text-color, #101b3f);
			line-height: 1.2;
			word-break: break-word;
			text-shadow: 0 2px 8px rgba(16, 27, 63, .14);
		}

		.folder-remote-meta {
			font-size: 12px;
			font-weight: 600;
			color: #54618f;
			letter-spacing: .2px;
			display: block;
			max-width: 100%;
			white-space: nowrap;
			overflow: hidden;
			text-overflow: ellipsis;
		}

		.folder-settings-btn {
			width: 34px;
			height: 34px;
			border-radius: 12px;
			border: 1px solid var(--folder-accent-soft, #d5def7);
			background: rgba(255, 255, 255, .92);
			color: #203266;
			display: grid;
			place-items: center;
			font-size: 16px;
			font-weight: 700;
			cursor: pointer;
			transition: transform .12s ease, box-shadow .12s ease, background .12s ease;
		}

		.folder-settings-btn:hover {
			transform: translateY(-1px);
			box-shadow: 0 6px 16px rgba(32, 50, 102, .18);
			background: #eef3ff;
		}

		.folder-remote-status-pill {
			display: inline-flex;
			align-items: center;
			gap: 8px;
			border-radius: 999px;
			padding: 6px 12px;
			font-size: 12px;
			font-weight: 700;
			letter-spacing: .3px;
			background: #e9f0ff;
			color: #2d3a68;
		}

		.folder-remote-status-pill[data-status="connected"] {
			background: #dcfce7;
			color: #166534;
		}

		.folder-remote-status-pill[data-status="error"] {
			background: #fee2e2;
			color: #9f1239;
		}

		.folder-remote-status-pill[data-status="pending"] {
			background: #fef3c7;
			color: #92400e;
		}

		.folder-remote-status-pill[data-status="unverified"] {
			background: #e0f2fe;
			color: #075985;
		}

		.folder-remote-status-pill[data-status="vpn-required"] {
			background: #fae8ff;
			color: #86198f;
		}

		.folder-remote-status-pill[data-status="vpn-passphrase"] {
			background: #fce7f3;
			color: #9d174d;
		}

		.folder-remote-status-pill[data-status="credentials-missing"] {
			background: #fee2e2;
			color: #b91c1c;
		}

		.app.folder-card.folder-expanded {
			overflow: visible;
			padding: 22px 24px;
			grid-column: 1 / -1;
			box-shadow: 0 14px 36px rgba(24, 42, 104, .22);
			aspect-ratio: auto;
			min-height: unset;
		}

		.app.folder-card.folder-expanded::before {
			opacity: 0;
		}

		.app.folder-card.folder-expanded .folder-body {
			grid-template-columns: minmax(200px, 260px) 1fr;
			align-items: start;
			justify-items: stretch;
			gap: 24px;
			text-align: left;
		}

		.app.folder-card.folder-expanded .folder-info {
			justify-items: flex-start;
			gap: 18px;
		}

		.app.folder-card.folder-expanded .folder-hero-icon {
			width: 96px;
			height: 72px;
		}

		.app.folder-card.folder-expanded .folder-name-big {
			margin-bottom: 8px;
			font-size: clamp(22px, 2.6vw, 28px);
			text-align: left;
		}

		.folder-expanded-content {
			display: grid;
			gap: 18px;
			align-content: start;
		}

		.folder-expanded-grid {
			display: grid;
			width: 100%;
			gap: 16px;
			grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
			align-content: start;
		}

		@media (max-width:720px) {
			.folder-expanded-grid {
				grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
			}
		}

		.folder-expanded-grid .app {
			transform: none;
			opacity: 1;
			width: 100%;
			margin: 0;
			position: relative;
		}

		.folder-expanded-grid .app::before {
			opacity: 0;
		}

		.folder-expanded-grid .app.show {
			transform: none;
			opacity: 1;
		}

		.folder-expanded-grid .app .info-btn {
			opacity: 1;
		}

		@media (max-width:1024px) {
			.app.folder-card.folder-expanded {
				grid-template-rows: auto 1fr;
			}

			.app.folder-card.folder-expanded .folder-body {
				grid-template-columns: 1fr;
				text-align: center;
			}

			.app.folder-card.folder-expanded .folder-info {
				justify-items: center;
				text-align: center;
			}

			.app.folder-card.folder-expanded .folder-name-big {
				text-align: center;
			}
		}

		@media (max-width:720px) {
			.app.folder-card.folder-expanded {
				padding: 20px 18px;
			}
		}

		.folder-app-chip {
			display: flex;
			align-items: center;
			justify-content: center;
			padding: 10px;
			border-radius: 14px;
			border: 1px solid #dbe2f3;
			background: rgba(255, 255, 255, .84);
			box-shadow: 0 1px 4px rgba(15, 30, 70, .05);
			cursor: pointer;
			transition: transform .15s ease, box-shadow .15s ease;
		}

		.folder-app-chip:hover {
			transform: translateY(-2px);
			box-shadow: 0 4px 12px rgba(20, 40, 100, .12);
		}

		.folder-app-chip:focus {
			outline: 3px solid #7aa2ff66;
			outline-offset: 2px;
		}

		.folder-app-chip img {
			width: 38px;
			height: 38px;
			border-radius: 12px;
			object-fit: contain;
			background: #eef2ff;
			padding: 6px;
		}

		.folder-more {
			display: flex;
			align-items: center;
			justify-content: center;
			padding: 10px;
			border-radius: 14px;
			border: 1px dashed #d5def7;
			color: #6374a4;
			font-size: 12px;
			font-weight: 700;
			background: rgba(246, 248, 255, .76);
		}

		.folder-empty {
			border: 1px dashed #c7d3ff;
			border-radius: 16px;
			padding: 14px 10px;
			font-size: 13px;
			font-weight: 600;
			color: #6070a3;
			background: rgba(237, 241, 255, .66);
			display: flex;
			align-items: center;
			justify-content: center;
			text-align: center;
		}

		.folder-hover {
			box-shadow: 0 8px 22px rgba(80, 102, 255, .26) !important;
			border-color: #95a7ff !important;
		}

		.app.show {
			transform: none;
			opacity: 1
		}

		.app:hover {
			box-shadow: 0 4px 12px rgba(20, 40, 100, .12);
			border-color: #cfd9ff
		}

		.flip {
			position: relative;
			width: 90%;
			height: 90%;
			transform-style: preserve-3d;
			transition: transform .6s cubic-bezier(.2, .7, .2, 1);
		}

		.app:hover .flip {
			transform: rotateY(180deg)
		}

		.face {
			position: absolute;
			inset: 0;
			display: grid;
			place-items: center;
			backface-visibility: hidden;
			border-radius: 12px
		}

		.face img {
			width: var(--app-card-logo-size, 90%);
			height: var(--app-card-logo-size, 90%);
			object-fit: contain;
			pointer-events: none;
			-webkit-user-drag: none
		}

		@media (max-width: 600px) {
			.face img {
				width: calc(var(--app-card-logo-size, 90%) + 2%);
				height: calc(var(--app-card-logo-size, 90%) + 2%);
			}
		}

		@media (max-width: 420px) {
			.face img {
				width: calc(var(--app-card-logo-size, 90%) + 4%);
				height: calc(var(--app-card-logo-size, 90%) + 4%);
			}
		}

		.back {
			transform: rotateY(180deg)
		}

		.app::before {
			content: "";
			position: absolute;
			inset: 0;
			background: radial-gradient(130px 130px at 50% 50%, #7aa2ff22, transparent 70%),
				radial-gradient(150px 150px at 50% 50%, #9d7aff14, transparent 72%);
			opacity: 0;
			transition: opacity .35s ease
		}

		.app:hover::before {
			opacity: 1
		}

		.app.folder-card:hover::before {
			opacity: 0
		}

		.app.app-hidden {
			opacity: .6;
			filter: saturate(.35) contrast(.85);
			box-shadow: 0 1px 4px rgba(20, 40, 100, .05);
		}

		.apps-grid[data-show-hidden="true"] .app.app-hidden {
			cursor: default;
		}

		/* Apps en veille (dormant) - style grisé */
		.app.app-dormant {
			opacity: .5;
			filter: grayscale(80%) contrast(.9);
			box-shadow: 0 1px 4px rgba(20, 40, 100, .05);
			border: 2px dashed #9ca3af;
		}
		.app.app-dormant:hover {
			opacity: .7;
			filter: grayscale(50%) contrast(.95);
		}
		.app-dormant-indicator {
			position: absolute;
			left: 50%;
			top: 8px;
			transform: translateX(-50%);
			background: #6b7280;
			color: #fff;
			font-size: 10px;
			font-weight: 700;
			padding: 3px 8px;
			border-radius: 8px;
			text-transform: uppercase;
			letter-spacing: .5px;
			z-index: 10;
			pointer-events: none;
		}

		.app-hidden-indicator {
			position: absolute;
			left: 12px;
			bottom: 12px;
			padding: 5px 9px;
			border-radius: 999px;
			background: rgba(16, 27, 63, .86);
			color: #fff;
			font-size: 11px;
			font-weight: 700;
			letter-spacing: .3px;
			box-shadow: 0 6px 18px rgba(16, 27, 63, .22);
			pointer-events: none;
			opacity: 0;
			transform: translateY(6px);
			transition: opacity .2s ease, transform .2s ease;
		}

		.app-hidden-indicator[data-visible="true"] {
			opacity: 1;
			transform: translateY(0);
		}

		/* ========== Applications privées ========== */
		.app-private-indicator {
			position: absolute;
			top: 8px;
			right: 8px;
			padding: 4px 11px;
			border-radius: 999px;
			background: linear-gradient(135deg, #fecaca 0%, #fca5a5 100%);
			color: #991b1b;
			border: 1px solid #f87171;
			font-size: 12px;
			font-weight: 800;
			letter-spacing: .3px;
			box-shadow: 0 2px 8px rgba(220, 38, 38, .35);
			pointer-events: none;
			z-index: 10;
			opacity: 1;
			display: inline-block !important;
		}
		.app-limited-indicator {
			position: absolute;
			bottom: 6px;
			left: 6px;
			background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
			color: #92400e;
			border: 1px solid #fcd34d;
			padding: 2px 8px;
			border-radius: 999px;
			font-size: 10px;
			font-weight: 800;
			letter-spacing: .02em;
			box-shadow: 0 1px 4px rgba(146, 64, 14, .18);
			z-index: 4;
			white-space: nowrap;
			pointer-events: auto;
			cursor: help;
		}
		.app.app-limited::before {
			content: '';
			position: absolute;
			inset: 0;
			border-radius: inherit;
			border: 2px dashed rgba(245, 158, 11, .4);
			pointer-events: none;
			z-index: 1;
		}
		/* ═══ Panneau billing intégré (remplace la grille apps) ═══ */
		#billingPanel { width: 100%; max-width: 100%; margin: 0; padding: 0; box-sizing: border-box }
		#billingPanel[hidden] { display: none !important }
		.bp-topbar { display: flex; align-items: center; gap: 14px; margin-bottom: 18px; padding: 14px 0; border-bottom: 1px solid #e1e7fb }
		.bp-topbar h2 { margin: 0; font-size: 18px; color: #1d4ed8 }
		.bp-back { background: #fff; border: 1px solid #cdd6f5; color: #1d4ed8; padding: 7px 14px; border-radius: 10px; font-weight: 600; cursor: pointer; font-size: 13px }
		.bp-back:hover { background: #eff6ff }
		.bp-current { background: #fff; border: 1px solid #e1e7fb; border-radius: 18px; padding: 22px 26px; box-shadow: 0 1px 4px rgba(20,40,100,.06); margin-bottom: 22px }
		.bp-current h3 { margin: 0 0 10px; font-size: 16px }
		.bp-current .bp-plan-name { font-size: 24px; font-weight: 800; color: #1d4ed8; margin-right: 10px }
		.bp-current .bp-status { display: inline-flex; padding: 3px 12px; border-radius: 999px; font-size: 11.5px; font-weight: 700; text-transform: uppercase }
		.bp-status.active { background: #dcfce7; color: #15803d }
		.bp-status.trialing { background: #dbeafe; color: #1d4ed8 }
		.bp-status.cancelling { background: #fef3c7; color: #92400e }
		.bp-status.cancelled, .bp-status.payment_failed { background: #fee2e2; color: #b91c1c }
		.bp-status.manual { background: #f1f5f9; color: #475569 }
		.bp-current p { color: #586287; font-size: 13.5px; line-height: 1.5; margin: 8px 0 }
		.bp-current .bp-actions { display: flex; gap: 8px; margin-top: 14px; flex-wrap: wrap }
		.bp-btn { display: inline-flex; align-items: center; gap: 6px; padding: 9px 18px; border-radius: 10px; font-weight: 700; font-size: 13px; cursor: pointer; border: 1px solid #cdd6f5; background: #fff; color: #1a2454; transition: all .15s; font-family: inherit }
		.bp-btn.primary { background: #3b82f6; border-color: #3b82f6; color: #fff }
		.bp-btn.primary:hover { background: #1d4ed8 }
		.bp-btn.danger { background: #fff; color: #dc2626; border-color: #dc2626 }
		.bp-btn.danger:hover { background: #fef2f2 }
		.bp-btn:hover:not(.primary):not(.danger) { background: #f0f5ff }
		.bp-btn:disabled { opacity: .5; cursor: not-allowed }
		.bp-period-toggle { display: inline-flex; background: #fff; border: 1px solid #e1e7fb; border-radius: 999px; padding: 3px; margin-bottom: 18px; gap: 2px }
		.bp-period-toggle button { border: none; background: transparent; color: #586287; padding: 8px 18px; border-radius: 999px; font: inherit; font-weight: 700; font-size: 13px; cursor: pointer }
		.bp-period-toggle button.active { background: #3b82f6; color: #fff }
		.bp-savings { margin-left: 8px; background: #16a34a; color: #fff; font-size: 10.5px; padding: 2px 8px; border-radius: 999px; font-weight: 800 }
		.bp-plans-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px }
		.bp-plan-card { background: #fff; border: 2px solid #e1e7fb; border-radius: 18px; padding: 22px 22px 18px; position: relative; transition: transform .15s, box-shadow .15s, border-color .15s }
		.bp-plan-card:hover { transform: translateY(-3px); box-shadow: 0 12px 30px rgba(20,40,100,.12) }
		.bp-plan-card.featured { border-color: #3b82f6; box-shadow: 0 6px 22px rgba(59,130,246,.18) }
		.bp-plan-card.is-current { border-color: #16a34a; background: linear-gradient(180deg, #f0fdf4 0%, #fff 100%) }
		.bp-plan-card.is-current::before { content: "✓ Plan actuel"; position: absolute; top: -11px; left: 18px; background: #16a34a; color: #fff; padding: 3px 12px; border-radius: 999px; font-size: 11px; font-weight: 800 }
		.bp-plan-card .bp-plan-badge { display: inline-block; font-size: 10.5px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: #fff; padding: 3px 10px; border-radius: 999px; background: #94a3b8; margin-bottom: 8px }
		.bp-plan-card h3 { margin: 0 0 4px; font-size: 22px; font-weight: 800; color: #1a2454 }
		.bp-plan-card .bp-price { font-size: 32px; font-weight: 800; color: #1a2454; margin: 8px 0 2px }
		.bp-plan-card .bp-price .bp-currency { font-size: 16px; font-weight: 600; color: #586287; margin-right: 2px }
		.bp-plan-card .bp-price-period { color: #586287; font-size: 12px; margin-bottom: 8px }
		.bp-plan-card .bp-desc { font-size: 13px; color: #586287; line-height: 1.45; margin: 8px 0 14px; min-height: 48px }
		.bp-plan-card ul { padding-left: 18px; margin: 0 0 14px; font-size: 12.5px; color: #1a2454 }
		.bp-plan-card ul li { margin-bottom: 4px }
		.bp-plan-card .bp-trial { font-size: 11.5px; color: #16a34a; font-weight: 700; margin-bottom: 10px }
		.bp-plan-card button.bp-choose { width: 100%; padding: 11px 14px; border-radius: 12px; border: none; background: #3b82f6; color: #fff; font-weight: 800; cursor: pointer; font-size: 13.5px; transition: background .15s; font-family: inherit }
		.bp-plan-card button.bp-choose:hover { background: #1d4ed8 }
		.bp-plan-card button.bp-choose.disabled { background: #cbd5e1; color: #64748b; cursor: not-allowed }

		.bp-custom-block { background: #fff; border: 2px solid #06b6d4; border-radius: 18px; margin-top: 22px; overflow: hidden }
		.bp-custom-block summary { list-style: none; cursor: pointer; padding: 18px 22px; display: flex; align-items: center; justify-content: space-between; gap: 12px; background: linear-gradient(135deg, #ecfeff, #cffafe); user-select: none }
		.bp-custom-block summary::-webkit-details-marker { display: none }
		.bp-custom-block summary span:first-child { color: #0e7490; font-size: 14.5px }
		.bp-toggle-icon { font-size: 18px; color: #06b6d4; transition: transform .2s }
		.bp-custom-block[open] .bp-toggle-icon { transform: rotate(180deg) }
		.bp-custom-body { padding: 18px 22px 22px }
		.bp-help { font-size: 12px; color: #586287; line-height: 1.45 }
		.bp-custom-toolbar { display: flex; align-items: center; gap: 12px; margin: 10px 0; flex-wrap: wrap }
		.bp-custom-toolbar input[type="search"] { flex: 1; min-width: 220px; padding: 9px 12px; border: 1px solid #e1e7fb; border-radius: 10px; font: inherit; background: #fbfcff; font-family: inherit }
		.bp-custom-toolbar input:focus { outline: none; border-color: #06b6d4; box-shadow: 0 0 0 3px rgba(6,182,212,.18) }
		.bp-custom-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 10px; padding: 6px; max-height: 480px; overflow-y: auto; border: 1px dashed #cfd8f7; border-radius: 14px; background: #f8faff }
		.bp-app-card { background: #fff; border: 2px solid #e1e7fb; border-radius: 12px; padding: 10px; cursor: pointer; transition: border-color .15s, transform .12s, box-shadow .15s; display: flex; flex-direction: column; gap: 6px; position: relative; user-select: none }
		.bp-app-card:hover { border-color: #06b6d4; transform: translateY(-2px); box-shadow: 0 4px 12px rgba(6,182,212,.18) }
		.bp-app-card.selected { border-color: #06b6d4; background: linear-gradient(180deg, #ecfeff, #fff); box-shadow: 0 4px 14px rgba(6,182,212,.28) }
		.bp-app-card.selected::before { content: "✓"; position: absolute; top: 6px; right: 8px; background: #06b6d4; color: #fff; width: 22px; height: 22px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 13px }
		.bp-app-card .bp-app-row { display: flex; align-items: center; gap: 8px }
		.bp-app-card img, .bp-app-card .bp-app-fallback { width: 36px; height: 36px; border-radius: 8px; object-fit: contain; background: #f0f3ff; padding: 4px; flex-shrink: 0 }
		.bp-app-card .bp-app-fallback { display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 16px }
		.bp-app-card .bp-app-name { font-size: 12.5px; font-weight: 700; color: #1a2454; line-height: 1.3; flex: 1; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical }
		.bp-app-card .bp-app-price { font-size: 13.5px; font-weight: 800; color: #0e7490; text-align: right; padding-top: 4px; border-top: 1px solid #e1e7fb }
		.bp-app-card .bp-app-price small { color: #586287; font-weight: 500; font-size: 10.5px }
		.bp-custom-summary { display: flex; align-items: center; gap: 14px; padding: 14px 18px; margin-top: 14px; background: linear-gradient(135deg, #f0fdfa, #ecfeff); border: 1px solid #67e8f9; border-radius: 14px; flex-wrap: wrap }
		.bp-custom-summary .bp-summary-left { color: #586287; font-size: 13.5px }
		.bp-custom-summary .bp-summary-left strong { color: #1a2454; font-size: 16px }
		.bp-custom-summary .bp-summary-right { margin-left: auto; text-align: right }
		.bp-custom-summary .bp-total-label { color: #586287; font-size: 11px; display: block }
		.bp-custom-summary .bp-total-amount { font-size: 24px; font-weight: 800; color: #0e7490 }
		.bp-custom-summary button.primary { background: #06b6d4; border-color: #06b6d4; padding: 11px 20px; font-size: 13.5px }
		.bp-custom-summary button.primary:hover { background: #0e7490; border-color: #0e7490 }

		.bp-discount { background: #fff; border: 1px solid #e1e7fb; border-radius: 14px; padding: 14px 18px; margin-top: 18px; display: flex; align-items: center; gap: 12px; flex-wrap: wrap }
		.bp-discount input { padding: 9px 12px; border: 1px solid #e1e7fb; border-radius: 10px; font: inherit; max-width: 220px; flex: 1; font-family: inherit }
		.bp-discount input:focus { outline: none; border-color: #3b82f6; box-shadow: 0 0 0 3px rgba(59,130,246,.18) }
		.bp-discount span { font-size: 12px; font-weight: 600; color: #16a34a }
		.bp-alert { background: #dcfce7; border: 1px solid #86efac; color: #14532d; padding: 12px 16px; border-radius: 12px; margin-bottom: 18px; font-size: 13px }
		body.billing-mode #appsGrid, body.billing-mode .apps-controls, body.billing-mode #tagFilterBar, body.billing-mode #planLimitedBanner { display: none !important }
		/* Neutralise le fond bleu/violet de .apps-body en mode billing pour un rendu propre */
		body.billing-mode .apps-body { background: #f4f6fb !important; border-color: transparent !important; box-shadow: 0 1px 4px rgba(20,40,100,.05) !important; padding: 24px 18px !important; }
		body.billing-mode .apps-body::before { display: none !important }
		body.billing-mode .apps-layout { display: block }
		body.billing-mode .more-apps-shell { display: none !important }
		body.billing-mode .apps-grid-wrapper { display: none }

		#planLimitedBanner {
			display: none;
			margin: 12px auto 0;
			max-width: 920px;
			background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
			border: 1.5px solid #fcd34d;
			color: #78350f;
			padding: 12px 18px;
			border-radius: 14px;
			font-size: 13.5px;
			line-height: 1.45;
			display: flex;
			align-items: center;
			gap: 12px;
			box-shadow: 0 2px 12px rgba(146, 64, 14, .12);
		}
		#planLimitedBanner.visible { display: flex; }
		#planLimitedBanner .banner-icon { font-size: 22px; line-height: 1; flex-shrink: 0 }
		#planLimitedBanner .banner-content { flex: 1; min-width: 0 }
		#planLimitedBanner strong { color: #5a2a05 }
		#planLimitedBanner a.upgrade-link {
			background: #f59e0b;
			color: #fff;
			padding: 7px 14px;
			border-radius: 999px;
			font-weight: 700;
			text-decoration: none;
			font-size: 12px;
			white-space: nowrap;
		}
		#planLimitedBanner a.upgrade-link:hover { background: #d97706 }

		.app-private-indicator[data-visible="true"] {
			opacity: 1;
			transform: translateY(0);
		}
		article.app.app-private {
			border: 2px solid rgba(248, 113, 113, .40);
			box-shadow: 0 0 14px rgba(248, 113, 113, .12);
		}
		/* Sur une app privée, la vignette "Privé" remplace le (i) info — on cache donc le bouton info */
		article.app.app-private .info-btn { display: none !important; }

		/* ========== Applications CACHÉES (admin only) ========== */
		.app-cached-indicator {
			position: absolute;
			top: 8px;
			right: 8px;
			padding: 4px 11px;
			border-radius: 999px;
			background: linear-gradient(135deg, #4b5563 0%, #1f2937 100%);
			color: #f9fafb;
			border: 1px solid #374151;
			font-size: 12px;
			font-weight: 800;
			letter-spacing: .3px;
			box-shadow: 0 2px 8px rgba(17, 24, 39, .35);
			pointer-events: none;
			z-index: 10;
			text-transform: uppercase;
			display: inline-block !important;
		}
		article.app.app-cached {
			border: 2px dashed rgba(75, 85, 99, .55);
			box-shadow: 0 0 14px rgba(31, 41, 55, .15);
			opacity: .92;
		}
		article.app.app-cached .info-btn { display: none !important; }

		/* Dialog PIN applications privées */
		.private-pin-overlay {
			position: fixed;
			inset: 0;
			z-index: 100000;
			background: rgba(0, 0, 0, .55);
			display: flex;
			align-items: center;
			justify-content: center;
			opacity: 0;
			transition: opacity .25s ease;
			backdrop-filter: blur(4px);
		}
		.private-pin-overlay.open {
			opacity: 1;
		}
		.private-pin-overlay.closing {
			opacity: 0;
		}
		.private-pin-dialog {
			background: #fff;
			border-radius: 18px;
			padding: 36px 32px 28px;
			box-shadow: 0 24px 64px rgba(0, 0, 0, .18), 0 4px 12px rgba(0, 0, 0, .10);
			min-width: 340px;
			max-width: 420px;
			text-align: center;
			transform: scale(.94) translateY(12px);
			transition: transform .25s ease;
		}
		.private-pin-overlay.open .private-pin-dialog {
			transform: scale(1) translateY(0);
		}
		.private-pin-icon {
			font-size: 40px;
			margin-bottom: 8px;
		}
		.private-pin-dialog h3 {
			margin: 0 0 8px;
			font-size: 20px;
			font-weight: 700;
			color: #1e293b;
		}
		.private-pin-dialog p {
			margin: 0 0 20px;
			font-size: 14px;
			color: #64748b;
			line-height: 1.5;
		}
		.private-pin-input-row {
			margin-bottom: 12px;
		}
		.private-pin-input {
			width: 100%;
			padding: 12px 16px;
			border: 2px solid #e2e8f0;
			border-radius: 10px;
			font-size: 16px;
			text-align: center;
			letter-spacing: 4px;
			outline: none;
			transition: border-color .2s;
			box-sizing: border-box;
		}
		.private-pin-input:focus {
			border-color: #7c3aed;
		}
		.private-pin-input.error {
			border-color: #ef4444;
			animation: pinShake .4s ease;
		}
		@keyframes pinShake {
			0%, 100% { transform: translateX(0); }
			25% { transform: translateX(-6px); }
			50% { transform: translateX(6px); }
			75% { transform: translateX(-3px); }
		}
		.private-pin-error {
			color: #ef4444;
			font-size: 13px;
			margin-bottom: 12px;
			font-weight: 600;
		}
		.private-pin-actions {
			display: flex;
			gap: 10px;
			justify-content: center;
			margin-top: 8px;
		}
		.private-pin-btn {
			padding: 10px 24px;
			border-radius: 10px;
			font-size: 14px;
			font-weight: 600;
			border: none;
			cursor: pointer;
			transition: background .2s, transform .1s;
		}
		.private-pin-btn:active {
			transform: scale(.97);
		}
		.private-pin-btn.cancel {
			background: #f1f5f9;
			color: #475569;
		}
		.private-pin-btn.cancel:hover {
			background: #e2e8f0;
		}
		.private-pin-btn.submit {
			background: #7c3aed;
			color: #fff;
		}
		.private-pin-btn.submit:hover {
			background: #6d28d9;
		}
		.private-pin-btn.submit:disabled {
			background: #a78bfa;
			cursor: wait;
		}

		/* Bouton info discret en haut à droite */
		.info-btn {
			position: absolute;
			top: 8px;
			right: 8px;
			z-index: 2;
			width: 26px;
			height: 26px;
			border-radius: 999px;
			background: rgba(255, 255, 255, .92);
			border: 1px solid #d5def7;
			color: #22315f;
			display: grid;
			place-items: center;
			font-weight: 800;
			font-size: 14px;
			box-shadow: 0 1px 2px rgba(20, 40, 100, .06);
			cursor: pointer;
			opacity: .0;
			transform: translateY(-4px);
			transition: opacity .2s ease, transform .2s ease, background .2s ease;
		}

		.app:hover .info-btn,
		.app:focus-within .info-btn {
			opacity: 1;
			transform: none
		}

		.info-btn:hover {
			background: #eef3ff
		}

		.app-fav-btn {
			position: absolute;
			top: 8px;
			left: 8px;
			z-index: 3;
			width: 28px;
			height: 28px;
			border-radius: 999px;
			background: rgba(255, 255, 255, .94);
			border: 1px solid #d5def7;
			color: #94a3b8;
			display: grid;
			place-items: center;
			font-size: 16px;
			line-height: 1;
			cursor: pointer;
			opacity: 0;
			transform: translateY(-4px);
			transition: opacity .2s ease, transform .15s ease, color .15s ease, background .2s ease, box-shadow .2s ease;
			box-shadow: 0 1px 3px rgba(20, 40, 100, .1);
		}

		.app:hover .app-fav-btn,
		.app:focus-within .app-fav-btn {
			opacity: 1;
			transform: none;
		}

		.app-fav-btn:hover {
			color: #f59e0b;
			transform: scale(1.12);
			background: #fff8e6;
		}

		.app-fav-btn.is-favorite {
			opacity: 1;
			transform: none;
			color: #f59e0b;
			border-color: #fbbf24;
			background: #fffbeb;
			box-shadow: 0 2px 8px rgba(245, 158, 11, .35);
		}

		@media (hover: none), (max-width: 980px) {
			.app-fav-btn { opacity: 1; transform: none; }
		}

		/* Afficher l'info-btn en permanence sur mobile/tablette */
		@media (hover: none),
		(max-width: 980px) {
			.info-btn {
				opacity: 1;
				transform: none
			}
		}

		/* Pastilles Nouveau / MAJ */
		.badge-flag {
			position: absolute;
			left: 8px;
			top: 8px;
			z-index: 2;
			font-size: 11px;
			font-weight: 800;
			letter-spacing: .3px;
			padding: 4px 8px;
			border-radius: 999px;
			color: #0a1028;
			background: #def7ec;
			border: 1px solid #b7f0e0;
			/* greenish for NEW */
			box-shadow: 0 1px 2px rgba(20, 40, 100, .06);
		}

		.badge-flag.maj {
			background: #fdf3d7;
			border-color: #f7e0a3;
		}

		/* amber for updated */
		.badge-flag.beta {
			background: #fef3c7;
			border-color: #fed7aa;
			color: #92400e;
		}

		/* orange for beta */
		.app-link-icon {
			position: absolute;
			top: 12px;
			left: 12px;
			width: 32px;
			height: 32px;
			border-radius: 12px;
			background: linear-gradient(135deg, rgba(59, 130, 246, .12), rgba(29, 78, 216, .18));
			border: 1px solid rgba(59, 130, 246, .25);
			color: #1d4ed8;
			display: flex;
			align-items: center;
			justify-content: center;
			font-size: 17px;
			font-weight: 700;
			box-shadow: 0 6px 16px rgba(30, 58, 138, .18);
			backdrop-filter: blur(6px);
			z-index: 4;
			pointer-events: none;
		}

		/* Modal description overlay */
		.modal-overlay {
			position: fixed;
			inset: 0;
			background: rgba(13, 22, 51, .45);
			backdrop-filter: blur(3px);
			display: none;
			align-items: center;
			justify-content: center;
			/* z-index relevé : la modale doit passer au-dessus de la topbar (1000),
			   de la search-card / tag-filter-bar et de tout élément stacked à l'intérieur
			   de .apps-area (qui crée un stacking context isolé avec z-index:0). */
			z-index: 9500
		}

		.modal-overlay.open {
			display: flex
		}

		.modal {
			position: relative;
			width: min(900px, 92vw);
			max-height: 86vh;
			overflow: auto;
			background: rgba(255, 255, 255, .98);
			border: 1px solid #dbe2f3;
			border-radius: 18px;
			box-shadow: 0 12px 50px -16px rgba(14, 25, 60, .45)
		}

		.modal-body {
			padding: 18px
		}

		.modal h3 {
			margin: 0 0 10px;
			font-weight: 800
		}

		.modal-close {
			position: absolute;
			top: 8px;
			right: 10px;
			width: 34px;
			height: 34px;
			border-radius: 999px;
			border: 1px solid #d5def7;
			background: #fff;
			color: #22315f;
			cursor: pointer;
			display: grid;
			place-items: center;
			font-weight: 800
		}

		.modal-close:hover {
			background: #eef3ff
		}

		.apps-context-menu {
			position: fixed;
			min-width: 220px;
			background: rgba(255, 255, 255, .98);
			border: 1px solid #dbe2f3;
			border-radius: 14px;
			box-shadow: 0 14px 40px rgba(13, 22, 51, .18);
			padding: 6px 0;
			display: none;
			z-index: 2800;
			backdrop-filter: saturate(120%) blur(6px);
		}

		.apps-context-menu.open {
			display: block;
		}

		.apps-context-menu button {
			width: 100%;
			padding: 10px 16px;
			background: none;
			border: 0;
			text-align: left;
			font-size: 13px;
			color: #1a2454;
			font-weight: 600;
			cursor: pointer;
			display: flex;
			align-items: center;
			gap: 10px;
			transition: background .15s ease;
		}

		.apps-context-menu button:hover {
			background: #eef3ff;
		}

		.apps-context-menu button.danger {
			color: #c2272d;
		}

		.apps-context-menu .menu-separator {
			margin: 6px 0;
			border-top: 1px solid #e6ecfb;
		}

		.folder-modal-overlay,
		.folder-dialog-overlay {
			position: fixed;
			inset: 0;
			background: rgba(12, 20, 40, .45);
			backdrop-filter: blur(6px);
			display: none;
			align-items: center;
			justify-content: center;
			z-index: 2700;
		}

		.folder-modal-overlay.open,
		.folder-dialog-overlay.open {
			display: flex;
		}

		.folder-modal {
			width: min(720px, 92vw);
			max-height: 82vh;
			overflow: auto;
			background: rgba(255, 255, 255, .98);
			border-radius: 18px;
			border: 1px solid #dbe2f3;
			box-shadow: 0 20px 64px rgba(12, 22, 51, .25);
			padding: 22px;
			display: grid;
			gap: 18px;
		}

		.folder-modal header {
			display: flex;
			align-items: center;
			justify-content: space-between;
			gap: 14px;
		}

		.folder-modal h3 {
			margin: 0;
			font-size: 20px;
			font-weight: 800;
			color: #101b3f;
		}

		.folder-modal-actions {
			display: flex;
			gap: 10px;
		}

		.folder-modal-btn {
			padding: 10px 14px;
			border-radius: 12px;
			border: 1px solid #d5def7;
			background: #f2f6ff;
			color: #1a2454;
			font-weight: 600;
			cursor: pointer;
		}

		.folder-modal-btn:hover {
			background: #e6ecff;
		}

		.folder-modal-close {
			width: 34px;
			height: 34px;
			border-radius: 999px;
			border: 1px solid #d5def7;
			background: #fff;
			color: #22315f;
			font-weight: 800;
			cursor: pointer;
		}

		.folder-modal-close:hover {
			background: #eef3ff;
		}

		.folder-modal-content {
			display: grid;
			gap: 14px;
		}

		.folder-modal-apps {
			display: grid;
			gap: 12px;
		}

		.folder-modal-section {
			display: grid;
			gap: 12px;
		}

		.folder-modal-section h4 {
			margin: 0;
			font-size: 13px;
			letter-spacing: .5px;
			text-transform: uppercase;
			color: #5c6ba0;
		}

		.folder-modal-colors {
			display: flex;
			flex-wrap: wrap;
			gap: 16px;
		}

		.folder-modal-color-wrapper {
			display: grid;
			gap: 6px;
			justify-items: center;
			font-size: 12px;
			font-weight: 600;
			color: #46537d;
			cursor: pointer;
		}

		.folder-modal-color {
			width: 48px;
			height: 48px;
			border-radius: 16px;
			border: 2px solid transparent;
			cursor: pointer;
			position: relative;
			background: var(--color-sample, #dbe4ff);
			box-shadow: 0 4px 12px rgba(30, 40, 60, .12);
			transition: transform .12s ease, box-shadow .12s ease, border .12s ease;
		}

		.folder-modal-color:hover {
			transform: translateY(-2px);
			box-shadow: 0 6px 18px rgba(30, 40, 60, .18);
		}

		.folder-modal-color:focus {
			outline: 3px solid rgba(122, 162, 255, .35);
			outline-offset: 3px;
		}

		.folder-modal-color.active {
			border-color: #1d4ed8;
			box-shadow: 0 6px 20px rgba(30, 40, 60, .2);
		}

		.folder-modal-color::after {
			content: '';
			position: absolute;
			inset: 8px;
			border-radius: 10px;
			border: 2px solid rgba(255, 255, 255, .55);
			opacity: 0;
			transition: opacity .12s ease;
		}

		.folder-modal-appearance {
			display: grid;
			gap: 18px;
		}

		@media (min-width: 760px) {
			.folder-modal-appearance {
				grid-template-columns: 1fr 1fr;
				align-items: start;
			}
		}

		.folder-modal-icons-wrapper {
			display: grid;
			gap: 10px;
		}

		.folder-modal-icons-header {
			font-size: 12px;
			letter-spacing: .5px;
			text-transform: uppercase;
			font-weight: 700;
			color: #5c6ba0;
		}

		.folder-modal-icons {
			display: flex;
			flex-wrap: wrap;
			gap: 12px;
		}

		.folder-modal-icon {
			display: inline-flex;
			align-items: center;
			gap: 8px;
			padding: 10px 14px;
			border-radius: 12px;
			border: 1px solid #d5def7;
			background: rgba(255, 255, 255, .95);
			color: #1a2454;
			font-weight: 600;
			cursor: pointer;
			box-shadow: 0 2px 6px rgba(30, 40, 60, .08);
			transition: transform .12s ease, box-shadow .12s ease, border .12s ease;
		}

		.folder-modal-icon:hover {
			transform: translateY(-2px);
			box-shadow: 0 8px 18px rgba(30, 40, 60, .16);
		}

		.folder-modal-icon:focus {
			outline: 3px solid rgba(122, 162, 255, .35);
			outline-offset: 3px;
		}

		.folder-modal-icon.active {
			border-color: #1d4ed8;
			box-shadow: 0 10px 24px rgba(29, 78, 216, .22);
		}

		.folder-modal-icon-emoji {
			font-size: 20px;
			line-height: 1;
		}

		.folder-modal-icon-label {
			font-size: 12px;
			font-weight: 600;
			color: #46537d;
		}

		.folder-modal-custom-icon {
			display: grid;
			gap: 8px;
			padding: 12px;
			border-radius: 14px;
			border: 1px dashed #d5def7;
			background: #f6f8ff;
			transition: border-color .12s ease, box-shadow .12s ease, background .12s ease;
		}

		.folder-modal-custom-icon.active {
			border-color: #1d4ed8;
			background: #eef3ff;
			box-shadow: 0 6px 18px rgba(29, 78, 216, .16);
		}

		.folder-modal-custom-icon label {
			font-size: 12px;
			font-weight: 600;
			color: #46537d;
			letter-spacing: .2px;
		}

		.folder-modal-custom-row {
			display: flex;
			gap: 10px;
			align-items: center;
			flex-wrap: wrap;
		}

		.folder-modal-custom-row input {
			width: 80px;
			text-align: center;
			font-size: 24px;
			padding: 10px 12px;
			border-radius: 12px;
			border: 1px solid #cfd7f2;
			background: #fff;
			color: #101b3f;
			transition: border .12s ease, box-shadow .12s ease;
		}

		.folder-modal-custom-row input:focus {
			border-color: #8aa2ff;
			box-shadow: 0 0 0 4px rgba(122, 162, 255, .25);
			outline: none;
		}

		.folder-modal-custom-row button {
			padding: 10px 16px;
			border-radius: 12px;
			border: 1px solid #d5def7;
			background: #fff;
			color: #1a2454;
			font-weight: 700;
			cursor: pointer;
			transition: transform .12s ease, box-shadow .12s ease, background .12s ease;
		}

		.folder-modal-custom-row button:hover {
			transform: translateY(-1px);
			background: #eef3ff;
			box-shadow: 0 6px 16px rgba(30, 40, 60, .12);
		}

		.folder-modal-heroes {
			display: grid;
			gap: 12px;
			grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
		}

		.folder-modal-hero-option {
			display: grid;
			gap: 8px;
			padding: 12px;
			border-radius: 14px;
			border: 1px solid #d5def7;
			background: #f6f8ff;
			cursor: pointer;
			text-align: left;
			transition: transform .12s ease, box-shadow .12s ease, border .12s ease;
		}

		.folder-modal-hero-option:hover {
			transform: translateY(-1px);
			box-shadow: 0 8px 18px rgba(30, 40, 60, .14);
		}

		.folder-modal-hero-option:focus {
			outline: 3px solid rgba(122, 162, 255, .35);
			outline-offset: 3px;
		}

		.folder-modal-hero-option.active {
			border-color: #1d4ed8;
			box-shadow: 0 10px 24px rgba(29, 78, 216, .18);
			background: #eef3ff;
		}

		.folder-modal-hero-preview {
			aspect-ratio: 4/3;
			border-radius: 12px;
			background: linear-gradient(45deg, #dbe4ff, #eef2ff);
			background-size: cover;
			background-position: center;
			position: relative;
			overflow: hidden;
			box-shadow: 0 4px 14px rgba(24, 36, 74, .12);
		}

		.folder-modal-hero-preview::before {
			content: '';
			position: absolute;
			inset: 0;
			background-image: linear-gradient(45deg, rgba(255, 255, 255, .08) 25%, transparent 25%), linear-gradient(-45deg, rgba(255, 255, 255, .08) 25%, transparent 25%), linear-gradient(45deg, transparent 75%, rgba(255, 255, 255, .08) 75%), linear-gradient(-45deg, transparent 75%, rgba(255, 255, 255, .08) 75%);
			background-size: 18px 18px;
			opacity: .4;
			pointer-events: none;
		}

		.folder-modal-hero-option.active .folder-modal-hero-preview::before {
			opacity: .25;
		}

		.folder-modal-hero-label {
			font-size: 12px;
			font-weight: 700;
			color: #46537d;
		}

		.folder-modal-hero-upload {
			display: grid;
			gap: 12px;
		}

		.folder-modal-dropzone {
			position: relative;
			display: grid;
			place-items: center;
			padding: 18px;
			border: 1px dashed #cfd7f2;
			border-radius: 16px;
			background: rgba(255, 255, 255, .9);
			cursor: pointer;
			transition: border .12s ease, box-shadow .12s ease, background .12s ease;
			text-align: center;
		}

		.folder-modal-dropzone input[type="file"] {
			position: absolute;
			inset: 0;
			opacity: 0;
			cursor: pointer;
		}

		.folder-modal-dropzone:hover,
		.folder-modal-dropzone.drag-active {
			border-color: #1d4ed8;
			background: #eef3ff;
			box-shadow: 0 8px 20px rgba(29, 78, 216, .14);
		}

		.folder-modal-dropzone.has-file {
			border-color: #10b981;
			background: #ecfdf5;
		}

		.folder-modal-dropzone-content {
			display: grid;
			gap: 8px;
			width: 100%;
		}

		.folder-modal-dropzone-preview {
			display: none;
			width: 100%;
			aspect-ratio: 4/3;
			border-radius: 12px;
			overflow: hidden;
			background: #f4f7ff;
			border: 1px solid rgba(17, 24, 56, .08);
		}

		.folder-modal-dropzone.has-file .folder-modal-dropzone-preview {
			display: block;
		}

		.folder-modal-dropzone-preview img {
			width: 100%;
			height: 100%;
			object-fit: cover;
			display: block;
			background: #f4f7ff;
		}

		.folder-modal-dropzone-adjust {
			display: none;
			justify-self: center;
			padding: 6px 14px;
			border-radius: 999px;
			border: 1px solid #d5def7;
			background: #fff;
			color: #1a2454;
			font-size: 13px;
			font-weight: 600;
			cursor: pointer;
			transition: transform .12s ease, box-shadow .12s ease, background .12s ease;
		}

		.folder-modal-dropzone.supports-adjust .folder-modal-dropzone-adjust {
			display: inline-flex;
		}

		.folder-modal-dropzone-adjust:hover {
			transform: translateY(-1px);
			background: #eef3ff;
			box-shadow: 0 4px 12px rgba(30, 40, 60, .12);
		}

		.folder-modal-dropzone-title {
			font-weight: 700;
			color: #162553;
		}

		.folder-modal-dropzone-subtitle {
			font-size: 12px;
			color: #5c6ba0;
		}

		.folder-modal-dropzone-button {
			justify-self: center;
			padding: 8px 16px;
			border-radius: 999px;
			border: 1px solid #d5def7;
			background: #fff;
			color: #1a2454;
			font-weight: 600;
			cursor: pointer;
			transition: transform .12s ease, box-shadow .12s ease, background .12s ease;
		}

		.folder-modal-dropzone-button:hover {
			transform: translateY(-1px);
			background: #eef3ff;
			box-shadow: 0 6px 16px rgba(30, 40, 60, .12);
		}

		.folder-modal-hero-editor {
			display: none;
			gap: 14px;
			border-radius: 16px;
			border: 1px solid #d5def7;
			background: #f9fbff;
			padding: 16px;
		}

		.folder-modal-hero-editor[data-visible="true"] {
			display: grid;
		}

		.folder-modal-hero-canvas-wrap {
			position: relative;
			border-radius: 14px;
			overflow: hidden;
			background-image: linear-gradient(45deg, #f3f4f6 25%, transparent 25%), linear-gradient(-45deg, #f3f4f6 25%, transparent 25%), linear-gradient(45deg, transparent 75%, #f3f4f6 75%), linear-gradient(-45deg, transparent 75%, #f3f4f6 75%);
			background-size: 20px 20px;
			background-position: 0 0, 0 10px, 10px -10px, -10px 0;
		}

		.folder-modal-hero-canvas-wrap canvas {
			display: block;
			width: 100%;
			height: auto;
		}

		.folder-modal-hero-controls {
			display: grid;
			gap: 12px;
		}

		.folder-modal-range {
			display: grid;
			grid-template-columns: 1fr auto;
			gap: 10px;
			align-items: center;
		}

		.folder-modal-range input[type="range"] {
			width: 100%;
		}

		.folder-modal-range-value {
			font-size: 12px;
			font-weight: 700;
			color: #3b4b7a;
			min-width: 48px;
			text-align: right;
		}

		.folder-modal-hero-background {
			display: flex;
			flex-wrap: wrap;
			gap: 12px;
			align-items: center;
			padding: 10px 12px;
			border-radius: 12px;
			background: #eef3ff;
			color: #26407a;
			font-size: 12px;
			font-weight: 600;
		}

		.folder-modal-hero-background label {
			display: flex;
			align-items: center;
			gap: 6px;
			cursor: pointer;
		}

		.folder-modal-hero-background input[type="color"] {
			width: 48px;
			height: 28px;
			border-radius: 8px;
			border: 1px solid #cfd7f2;
			padding: 0;
			background: #fff;
			cursor: pointer;
		}

		.folder-modal-hero-actions {
			display: flex;
			flex-wrap: wrap;
			gap: 12px;
			align-items: center;
			justify-content: flex-end;
		}

		.folder-modal-hero-actions .ghost {
			border: 1px solid #d5def7;
			background: #fff;
			color: #1a2454;
			padding: 10px 16px;
			border-radius: 12px;
			font-weight: 600;
			cursor: pointer;
			transition: transform .12s ease, box-shadow .12s ease, background .12s ease;
		}

		.folder-modal-hero-actions .ghost:hover {
			transform: translateY(-1px);
			background: #eef3ff;
			box-shadow: 0 6px 16px rgba(30, 40, 60, .12);
		}

		.folder-modal-hero-actions .primary {
			padding: 10px 18px;
			border-radius: 12px;
			border: none;
			background: #1d4ed8;
			color: #fff;
			font-weight: 700;
			cursor: pointer;
			transition: transform .12s ease, box-shadow .12s ease, background .12s ease;
		}

		.folder-modal-hero-actions .primary:disabled {
			opacity: .5;
			cursor: not-allowed;
			box-shadow: none;
			transform: none;
		}

		.folder-modal-hero-actions .primary:not(:disabled):hover {
			transform: translateY(-1px);
			box-shadow: 0 12px 24px rgba(29, 78, 216, .2);
		}

		.folder-modal-hero-error {
			display: none;
			padding: 10px 12px;
			border-radius: 12px;
			border: 1px solid #fecaca;
			background: #fee2e2;
			color: #9f1239;
			font-size: 12px;
			font-weight: 600;
		}

		.folder-modal-hero-error[data-visible="true"] {
			display: block;
		}

		.folder-modal-icon-hint {
			margin: 0;
			font-size: 12px;
			color: #5b6aa4;
		}

		.folder-modal-color.active::after {
			opacity: 1;
		}

		.folder-modal-color-name {
			font-size: 12px;
			font-weight: 700;
			color: #354166;
			text-transform: uppercase;
			letter-spacing: .4px;
		}

		.folder-modal-empty {
			padding: 20px;
			border-radius: 16px;
			border: 1px dashed #ccd6f8;
			background: #f5f7ff;
			color: #5f6da0;
			text-align: center;
			font-weight: 600;
		}

		.folder-modal-app-row {
			display: flex;
			align-items: center;
			justify-content: space-between;
			gap: 12px;
			padding: 12px 14px;
			border-radius: 14px;
			border: 1px solid #dbe2f3;
			background: rgba(255, 255, 255, .9);
			box-shadow: 0 1px 4px rgba(14, 26, 60, .06);
		}

		.folder-modal-app-row img {
			width: 38px;
			height: 38px;
			border-radius: 12px;
			background: #eef2ff;
			padding: 6px;
			object-fit: contain;
		}

		.folder-modal-app-info {
			display: flex;
			align-items: center;
			gap: 12px;
			font-weight: 600;
			color: #162553;
		}

		.folder-modal-remove {
			border: 1px solid #f5c0c4;
			background: #ffe9eb;
			color: #b91c1c;
			border-radius: 10px;
			padding: 8px 12px;
			font-weight: 600;
			cursor: pointer;
		}

		.folder-modal-remove:hover {
			background: #ffd7db;
		}

		.folder-dialog {
			width: min(420px, 92vw);
			background: rgba(255, 255, 255, .98);
			border-radius: 16px;
			border: 1px solid #dbe2f3;
			box-shadow: 0 16px 48px rgba(12, 22, 51, .28);
			padding: 22px;
			display: grid;
			gap: 14px;
		}

		.folder-dialog h4 {
			margin: 0;
			font-weight: 800;
			font-size: 18px;
			color: #12204a;
		}

		.folder-dialog label {
			font-size: 12px;
			color: #5b6aa4;
			font-weight: 600;
		}

		.folder-dialog input {
			padding: 12px 14px;
			border-radius: 12px;
			border: 1px solid #dbe2f3;
			background: #fbfcff;
			color: #0e1836;
			font-size: 14px;
		}

		.folder-dialog input:focus {
			border-color: #7aa2ff;
			box-shadow: 0 0 0 4px #7aa2ff33;
			outline: none;
		}

		.folder-dialog-actions {
			display: flex;
			justify-content: flex-end;
			gap: 10px;
		}

		.folder-dialog-cancel {
			border: 1px solid #d5def7;
			background: #fff;
			color: #1a2454;
			font-weight: 600;
			border-radius: 10px;
			padding: 10px 14px;
			cursor: pointer;
		}

		.folder-dialog-cancel:hover {
			background: #eef3ff;
		}

		.folder-dialog-submit {
			border: 1px solid #7aa2ff;
			background: #7aa2ff;
			color: #fff;
			font-weight: 700;
			border-radius: 10px;
			padding: 10px 16px;
			cursor: pointer;
		}

		.folder-dialog-submit:hover {
			background: #6d8aff;
		}

		.remote-folder-overlay {
			position: fixed;
			inset: 0;
			background: rgba(11, 18, 40, .35);
			backdrop-filter: blur(6px);
			display: none;
			align-items: center;
			justify-content: center;
			z-index: 2600;
			padding: 24px;
		}

		.remote-folder-overlay.open {
			display: flex;
		}

		.remote-folder-dialog {
			width: min(720px, 96vw);
			background: rgba(255, 255, 255, .98);
			border-radius: 20px;
			border: 1px solid #dbe2f3;
			box-shadow: 0 32px 64px rgba(14, 28, 70, .3);
			display: grid;
			grid-template-rows: auto 1fr auto;
			max-height: 92vh;
		}

		.remote-folder-header {
			padding: 22px 26px 12px;
			border-bottom: 1px solid #e4ebff;
			display: grid;
			gap: 10px;
			position: relative;
		}

		.remote-folder-header h3 {
			margin: 0;
			font-size: 20px;
			font-weight: 800;
			color: #101c42;
		}

		.remote-folder-subtitle {
			font-size: 13px;
			color: #5a6892;
			margin: 0;
		}

		.remote-folder-close {
			position: absolute;
			top: 18px;
			right: 18px;
			width: 34px;
			height: 34px;
			border-radius: 12px;
			border: 1px solid #d5def7;
			background: #fff;
			color: #2d3c73;
			font-weight: 700;
			font-size: 16px;
			cursor: pointer;
			display: grid;
			place-items: center;
		}

		.remote-folder-close:hover {
			background: #eef3ff;
		}

		.remote-folder-body {
			padding: 22px 26px;
			overflow: auto;
			display: grid;
			gap: 18px;
			align-content: start;
		}

		.remote-folder-section {
			display: grid;
			gap: 12px;
			background: #f8faff;
			border: 1px solid #e4ebff;
			border-radius: 16px;
			padding: 18px;
		}

		.remote-folder-section h4 {
			margin: 0;
			font-size: 14px;
			font-weight: 800;
			letter-spacing: .3px;
			text-transform: uppercase;
			color: #364777;
		}

		.remote-folder-grid {
			display: grid;
			gap: 12px;
			grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
		}

		.remote-folder-input,
		.remote-folder-textarea,
		.remote-folder-select {
			width: 100%;
			border: 1px solid #ccd6f2;
			border-radius: 12px;
			padding: 12px 14px;
			background: #fff;
			color: #102047;
			font-size: 14px;
			transition: border .2s ease, box-shadow .2s ease;
		}

		.remote-folder-input:focus,
		.remote-folder-textarea:focus,
		.remote-folder-select:focus {
			border-color: #7aa2ff;
			box-shadow: 0 0 0 4px #7aa2ff33;
			outline: none;
		}

		.remote-folder-textarea {
			min-height: 120px;
			resize: vertical;
		}

		.remote-folder-label {
			display: grid;
			gap: 6px;
			font-size: 13px;
			font-weight: 600;
			color: #405080;
		}

		.remote-folder-hint {
			font-size: 12px;
			color: #6675a0;
			margin: 0;
		}

		.remote-folder-inline {
			display: grid;
			gap: 18px;
			background: linear-gradient(135deg, rgba(248, 250, 255, .82), rgba(242, 245, 255, .94));
			border: 1px solid #dfe7ff;
			border-radius: 18px;
			padding: 18px;
			position: relative;
			overflow: hidden;
		}

		.remote-folder-inline[data-uploading="true"] {
			border-color: #9caeff;
			box-shadow: 0 0 0 3px rgba(112, 136, 255, .22);
		}

		.remote-folder-inline-header {
			display: flex;
			flex-wrap: wrap;
			gap: 14px;
			justify-content: space-between;
			align-items: center;
			font-size: 12px;
			color: #425184;
		}

		.remote-folder-summary {
			font-weight: 600;
			display: flex;
			flex-wrap: wrap;
			gap: 8px;
			align-items: center;
		}

		.remote-folder-summary::before {
			content: '🌐';
			font-size: 16px;
			filter: drop-shadow(0 1px 1px rgba(24, 36, 88, .1));
		}

		.remote-folder-actions {
			display: flex;
			gap: 10px;
			align-items: center;
		}

		.remote-folder-refresh {
			border-radius: 12px;
			border: 1px solid #c7d5ff;
			background: #fff;
			color: #203266;
			padding: 8px 14px;
			font-weight: 700;
			font-size: 12px;
			letter-spacing: .3px;
			cursor: pointer;
			transition: transform .12s ease, box-shadow .12s ease, background .12s ease;
		}

		.remote-folder-refresh:hover {
			background: #eef4ff;
			box-shadow: 0 6px 16px rgba(25, 43, 96, .16);
			transform: translateY(-1px);
		}

		.remote-folder-refresh:disabled {
			opacity: .6;
			cursor: default;
			transform: none;
			box-shadow: none;
		}

		.remote-folder-inline-body {
			display: grid;
			gap: 12px;
			min-height: 120px;
			position: relative;
		}

		.remote-folder-breadcrumbs-wrap {
			display: flex;
			flex-wrap: wrap;
			gap: 8px;
			align-items: center;
		}

		.remote-folder-breadcrumbs-wrap[data-visible="false"] {
			display: none;
		}

		.remote-folder-breadcrumbs {
			display: flex;
			flex-wrap: wrap;
			gap: 6px;
			align-items: center;
			font-size: 12px;
			color: #2b3f75;
			font-weight: 600;
			padding: 6px 0;
		}

		.remote-folder-breadcrumbs button {
			border: none;
			background: transparent;
			color: #2b3f75;
			font-weight: 700;
			cursor: pointer;
			padding: 4px 8px;
			border-radius: 10px;
			transition: background .15s ease;
		}

		.remote-folder-breadcrumbs button:hover {
			background: rgba(76, 102, 191, .12);
		}

		.remote-folder-breadcrumbs span {
			padding: 4px 0;
		}

		.remote-folder-breadcrumb-sep {
			opacity: .6;
			font-size: 11px;
		}

		.remote-folder-back {
			border: 1px solid #c7d5ff;
			background: #fff;
			color: #1f2d63;
			font-size: 12px;
			font-weight: 700;
			padding: 6px 12px;
			border-radius: 10px;
			cursor: pointer;
			transition: background .15s ease, box-shadow .15s ease;
		}

		.remote-folder-back:hover {
			background: #eef3ff;
			box-shadow: 0 4px 10px rgba(31, 45, 99, .18);
		}

		.remote-folder-back[disabled] {
			opacity: .5;
			cursor: default;
			box-shadow: none;
			background: #fff;
		}

		.remote-folder-content-area {
			display: grid;
			gap: 12px;
			min-height: 120px;
		}

		.remote-folder-search {
			display: flex;
			gap: 8px;
			align-items: center;
			border: 1px solid #cfd9ff;
			border-radius: 12px;
			padding: 6px 10px;
			background: #fff;
		}

		.remote-folder-search input {
			flex: 1;
			border: none;
			font-size: 13px;
			color: #15204d;
			outline: none;
		}

		.remote-folder-search button {
			border: none;
			background: transparent;
			color: #4f6dff;
			font-weight: 700;
			cursor: pointer;
		}

		.remote-folder-search button[disabled] {
			opacity: .4;
			cursor: default;
		}

		.remote-folder-list {
			display: grid;
			gap: 2px;
			background: #fff;
			border: 1px solid #dbe5ff;
			border-radius: 14px;
			overflow: hidden;
		}

		.remote-folder-row {
			display: grid;
			grid-template-columns: minmax(140px, 1fr) minmax(96px, 120px) minmax(120px, 160px) minmax(140px, 200px);
			gap: 0;
			align-items: center;
			padding: 10px 14px;
			font-size: 13px;
			color: #203266;
			background: rgba(255, 255, 255, .9);
		}

		.remote-folder-row:nth-child(even) {
			background: rgba(244, 247, 255, .9);
		}

		.remote-folder-row[data-entry-type="folder"] .remote-folder-cell-name::before {
			content: '📁';
			margin-right: 8px;
		}

		.remote-folder-row[data-entry-type="file"] .remote-folder-cell-name::before {
			content: '📄';
			margin-right: 8px;
		}

		.remote-folder-row.is-clickable {
			cursor: pointer;
		}

		.remote-folder-row.is-clickable:hover {
			background: rgba(232, 240, 255, .92);
		}

		.remote-folder-row-header {
			background: #edf2ff;
			font-weight: 800;
			text-transform: uppercase;
			letter-spacing: .4px;
			font-size: 12px;
			color: #3a4a7d;
		}

		.remote-folder-row-header .remote-folder-cell-name::before {
			content: '';
			margin: 0;
		}

		.remote-folder-cell {
			display: flex;
			align-items: center;
			white-space: nowrap;
			overflow: hidden;
			text-overflow: ellipsis;
		}

		.remote-folder-cell-actions {
			justify-content: flex-end;
			gap: 8px;
		}

		.remote-folder-cell-actions button {
			border: 1px solid #c7d5ff;
			border-radius: 10px;
			background: #fff;
			color: #1f2d63;
			padding: 6px 12px;
			font-size: 12px;
			font-weight: 600;
			cursor: pointer;
			transition: background .12s ease, box-shadow .12s ease, transform .12s ease;
		}

		.remote-folder-cell-actions button:hover {
			background: #edf2ff;
			box-shadow: 0 4px 12px rgba(24, 38, 96, .18);
			transform: translateY(-1px);
		}

		.remote-folder-cell-actions button:disabled {
			opacity: .5;
			cursor: default;
			transform: none;
			box-shadow: none;
		}

		.remote-folder-cell-name {
			justify-content: flex-start;
			gap: 6px;
			font-weight: 600;
		}

		.remote-folder-cell-size {
			justify-content: flex-end;
			font-variant-numeric: tabular-nums;
		}

		.remote-folder-cell-modified {
			justify-content: flex-end;
			font-size: 12px;
			color: #596691;
		}

		.remote-folder-loading,
		.remote-folder-empty,
		.remote-folder-error {
			display: grid;
			gap: 6px;
			align-items: center;
			justify-items: center;
			text-align: center;
			padding: 24px;
			border-radius: 16px;
			border: 1px dashed #c9d8ff;
			background: rgba(237, 242, 255, .6);
			color: #314072;
			font-size: 13px;
			font-weight: 600;
		}

		.remote-folder-loading {
			grid-auto-flow: column;
			justify-content: center;
			gap: 12px;
			font-weight: 700;
		}

		.remote-folder-spinner {
			width: 22px;
			height: 22px;
			border-radius: 50%;
			border: 3px solid #c8d6ff;
			border-top-color: #5f7bff;
			animation: remoteSpin .9s linear infinite;
		}

		@keyframes remoteSpin {
			to {
				transform: rotate(360deg);
			}
		}

		.remote-folder-empty strong {
			font-size: 15px;
			font-weight: 800;
		}

		.remote-folder-error strong {
			color: #9f1239;
			font-weight: 800;
		}

		.remote-folder-error .remote-folder-refresh {
			margin-top: 8px;
		}

		.remote-folder-notice {
			padding: 10px 14px;
			font-size: 12px;
			color: #56638f;
			background: #f4f7ff;
			text-align: center;
		}

		.remote-folder-inline[data-loading="true"]::after {
			content: '';
			position: absolute;
			inset: 0;
			background: linear-gradient(120deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, .4) 45%, rgba(255, 255, 255, 0) 100%);
			animation: remoteShimmer 2s ease infinite;
			pointer-events: none;
		}

		.remote-folder-drop-overlay {
			position: absolute;
			inset: 12px;
			display: none;
			pointer-events: none;
			background: rgba(112, 136, 255, .14);
			border: 2px dashed rgba(112, 136, 255, .6);
			border-radius: 14px;
			align-items: center;
			justify-content: center;
			text-align: center;
			gap: 8px;
			color: #24346c;
			font-weight: 600;
			z-index: 4;
			padding: 28px;
			transition: background .2s ease, border-color .2s ease, color .2s ease;
		}

		.remote-folder-drop-overlay.show {
			display: flex;
		}

		.remote-folder-drop-overlay.uploading {
			background: rgba(48, 66, 134, .86);
			border-color: rgba(255, 255, 255, .7);
			color: #fff;
			pointer-events: auto;
		}

		.remote-folder-drop-overlay.uploading .remote-drop-content {
			pointer-events: none;
		}

		.remote-folder-drop-overlay.uploading .remote-drop-actions {
			pointer-events: auto;
		}

		.remote-folder-drop-overlay.error {
			background: rgba(220, 68, 68, .88);
			border-color: rgba(255, 255, 255, .78);
			color: #fff;
		}

		.remote-folder-drop-overlay.success {
			background: rgba(76, 198, 183, .85);
			border-color: rgba(255, 255, 255, .74);
			color: #fff;
		}

		.remote-drop-progress {
			width: 100%;
			max-width: 340px;
			height: 6px;
			border-radius: 999px;
			background: rgba(255, 255, 255, .22);
			overflow: hidden;
			margin-top: 4px;
			display: none;
			position: relative;
		}

		.remote-folder-drop-overlay:not(.uploading):not(.success) .remote-drop-progress {
			background: rgba(48, 66, 134, .18);
		}

		.remote-drop-progress.is-visible {
			display: block;
		}

		.remote-drop-progress-bar {
			height: 100%;
			width: 0;
			background: linear-gradient(90deg, rgba(255, 255, 255, .8) 0%, rgba(255, 255, 255, .4) 100%);
			border-radius: inherit;
			transition: width .35s ease-out;
			transform-origin: left center;
		}

		.remote-drop-progress-bar.is-indeterminate {
			width: 100%;
			background: linear-gradient(90deg, rgba(255, 255, 255, .65) 0%, rgba(255, 255, 255, .2) 50%, rgba(255, 255, 255, .65) 100%);
			animation: remoteDropProgressIndeterminate 1.4s linear infinite;
		}

		@keyframes remoteDropProgressIndeterminate {
			0% {
				transform: translateX(-60%);
			}

			50% {
				transform: translateX(0%);
			}

			100% {
				transform: translateX(60%);
			}
		}

		.remote-drop-content {
			display: grid;
			gap: 6px;
			pointer-events: none;
		}

		.remote-drop-icon {
			font-size: 32px;
			line-height: 1.1;
		}

		.remote-drop-title {
			font-size: 15px;
			font-weight: 700;
		}

		.remote-drop-hint {
			font-size: 13px;
			font-weight: 400;
			opacity: .85;
		}

		.remote-drop-actions {
			display: flex;
			gap: 12px;
			justify-content: center;
			pointer-events: auto;
			margin-top: 12px;
			flex-wrap: wrap;
		}

		.remote-drop-actions button {
			padding: 10px 16px;
			border-radius: 12px;
			border: 1px solid rgba(255, 255, 255, .65);
			background: rgba(255, 255, 255, .92);
			color: #203160;
			font-weight: 600;
			cursor: pointer;
			transition: background .2s ease, color .2s ease, border-color .2s ease;
		}

		.remote-drop-actions button:hover {
			background: #fff;
			color: #0f235f;
			border-color: #fff;
		}

		.remote-folder-drop-overlay.uploading .remote-drop-actions button {
			background: rgba(255, 255, 255, .1);
			border-color: rgba(255, 255, 255, .6);
			color: #fff;
		}

		.remote-folder-drop-overlay.uploading .remote-drop-actions button:hover {
			background: rgba(255, 255, 255, .2);
		}

		.remote-folder-drop-overlay.success .remote-drop-actions {
			display: none;
		}

		@keyframes remoteShimmer {
			0% {
				transform: translateX(-120%);
			}

			100% {
				transform: translateX(120%);
			}
		}

		.remote-folder-upload {
			border: 1px dashed #c7d3ff;
			background: #f3f6ff;
			border-radius: 14px;
			padding: 16px;
			display: grid;
			gap: 12px;
			align-content: start;
			transition: border .2s ease, background .2s ease;
		}

		.remote-folder-upload.drag {
			border-color: #4f6dff;
			background: #eef2ff;
		}

		.remote-folder-upload-actions {
			display: flex;
			flex-wrap: wrap;
			gap: 10px;
		}

		.remote-folder-chip {
			display: inline-flex;
			align-items: center;
			gap: 8px;
			padding: 8px 12px;
			border-radius: 999px;
			background: #e6ecff;
			color: #2b3c72;
			font-size: 12px;
			font-weight: 700;
		}

		.remote-folder-upload button {
			border: 1px solid #7aa2ff;
			background: #fff;
			color: #1d2f62;
			font-weight: 600;
			border-radius: 10px;
			padding: 8px 12px;
			cursor: pointer;
		}

		.remote-folder-upload button.primary {
			background: #4f6dff;
			color: #fff;
			border-color: #4f6dff;
		}

		.remote-folder-upload button:hover {
			transform: translateY(-1px);
			box-shadow: 0 6px 16px rgba(79, 109, 255, .2);
		}

		.remote-folder-passphrase-controls {
			display: flex;
			flex-wrap: wrap;
			gap: 10px;
			align-items: center;
		}

		.remote-folder-passphrase-controls button {
			border: 1px solid #7aa2ff;
			background: #fff;
			color: #1d2f62;
			font-weight: 600;
			border-radius: 10px;
			padding: 8px 12px;
			cursor: pointer;
		}

		.remote-folder-passphrase-controls button:hover {
			transform: translateY(-1px);
			box-shadow: 0 6px 16px rgba(79, 109, 255, .2);
		}

		.remote-folder-advanced {
			display: grid;
			gap: 12px;
		}

		.remote-folder-advanced-toggle {
			display: inline-flex;
			align-items: center;
			gap: 10px;
			font-size: 13px;
			font-weight: 700;
			color: #2b3f75;
			cursor: pointer;
			user-select: none;
		}

		.remote-folder-advanced-toggle input {
			width: 18px;
			height: 18px;
			cursor: pointer;
		}

		.remote-folder-advanced-body {
			display: none;
			gap: 10px;
			border: 1px dashed #c7d5ff;
			border-radius: 14px;
			background: #f6f8ff;
			padding: 14px 16px;
			transition: opacity .2s ease;
			opacity: 0;
		}

		.remote-folder-advanced-body.is-open {
			display: grid;
			opacity: 1;
		}

		.remote-folder-checkbox {
			display: flex;
			align-items: flex-start;
			gap: 10px;
			font-size: 13px;
			font-weight: 600;
			color: #304070;
		}

		.remote-folder-checkbox input {
			margin-top: 2px;
			width: 18px;
			height: 18px;
			cursor: pointer;
		}

		.remote-folder-advanced-body .remote-folder-hint {
			margin: 0;
		}

		.remote-folder-advanced-body .remote-folder-hint[data-enabled="true"] {
			color: #203266;
			font-weight: 600;
		}

		.remote-folder-passphrase-controls button[disabled] {
			opacity: 0.55;
			cursor: not-allowed;
			transform: none;
			box-shadow: none;
		}

		.remote-folder-passphrase-controls button[data-hidden="true"] {
			display: none;
		}

		.remote-folder-passphrase-status {
			font-size: 12px;
			color: #6675a0;
		}

		.remote-folder-shared {
			display: grid;
			gap: 8px;
			padding: 12px;
			border: 1px dashed #c7d5ff;
			border-radius: 12px;
			background: #f2f5ff;
		}

		.remote-folder-shared[data-visible="false"] {
			display: none;
		}

		.remote-folder-shared-row {
			display: flex;
			gap: 12px;
			flex-wrap: wrap;
			align-items: flex-end;
		}

		.remote-folder-text-button {
			border: none;
			background: none;
			color: #3a5adf;
			font-weight: 600;
			cursor: pointer;
			padding: 8px 12px;
			border-radius: 10px;
			font-size: 13px;
		}

		.remote-folder-text-button:hover:not([disabled]) {
			background: rgba(58, 90, 223, 0.08);
		}

		.remote-folder-text-button[disabled] {
			opacity: .5;
			cursor: not-allowed;
		}

		.remote-folder-text-button.danger {
			color: #c2272d;
		}

		.remote-folder-text-button.danger:hover:not([disabled]) {
			background: rgba(194, 39, 45, 0.12);
		}

		#remoteFolderVpnProfileInfo[data-visible="false"] {
			display: none;
		}

		.remote-folder-status {
			display: inline-flex;
			align-items: center;
			gap: 8px;
			font-size: 12px;
			font-weight: 700;
			color: #31527a;
			background: #e9f0ff;
			border-radius: 999px;
			padding: 6px 10px;
			width: max-content;
		}

		.remote-folder-status[data-status="error"] {
			background: #fee2e2;
			color: #9f1239;
		}

		.remote-folder-status[data-status="connected"] {
			background: #dcfce7;
			color: #166534;
		}

		.remote-folder-error {
			display: none;
			border-radius: 12px;
			padding: 10px 14px;
			background: #fee2e2;
			color: #9f1239;
			font-size: 13px;
			font-weight: 600;
		}

		.remote-folder-actions {
			padding: 16px 26px 22px;
			border-top: 1px solid #e4ebff;
			display: flex;
			justify-content: flex-end;
			gap: 12px;
			background: #f9faff;
			border-radius: 0 0 20px 20px;
		}

		.remote-folder-actions button {
			border-radius: 12px;
			padding: 11px 18px;
			font-weight: 700;
			border: 1px solid #d5def7;
			background: #fff;
			color: #1a2454;
			cursor: pointer;
		}

		.remote-folder-actions button.primary {
			background: #4f6dff;
			border-color: #4f6dff;
			color: #fff;
			box-shadow: 0 10px 22px rgba(79, 109, 255, .24);
		}

		.remote-folder-actions button:disabled {
			opacity: .6;
			cursor: not-allowed;
			box-shadow: none;
			transform: none !important;
		}

		/* --- État désactivé (pas d’accès) --- */
		.app.disabled {
			filter: grayscale(100%);
			opacity: .55;
			cursor: not-allowed;
		}

		.app.disabled:hover {
			box-shadow: 0 1px 5px rgba(20, 40, 100, .08);
			border-color: var(--line)
		}

		.app.disabled .flip {
			transform: none !important
		}

		.app.disabled:hover .flip {
			transform: none !important
		}

		.app.disabled::before {
			opacity: 0 !important
		}

		/* Bandeau descriptif (SANS logo + SANS "mise à jour") */
		.reveal {
			width: 100%;
			margin: 18px 0 0;
			border-radius: 18px;
			border: 1px solid var(--line);
			background: rgba(255, 255, 255, .88);
			backdrop-filter: saturate(130%) blur(10px);
			box-shadow: 0 3px 10px rgba(20, 40, 100, .10);
			overflow: hidden;
			max-height: 0;
			opacity: 0;
			transform: translateY(6px);
			transition: max-height .6s cubic-bezier(.2, .7, .2, 1), opacity .3s ease, transform .5s cubic-bezier(.2, .7, .2, 1);
		}

		.reveal.open {
			max-height: 560px;
			opacity: 1;
			transform: none
		}

		.reveal-inner {
			display: grid;
			grid-template-columns: 1.2fr 1fr;
			gap: 18px;
			padding: 18px
		}

		.rev-title {
			margin: 0 0 8px;
			font-weight: 800
		}

		.rev-desc {
			margin: 0 0 14px;
			color: #6b7694
		}

		.rev-features {
			display: flex;
			flex-wrap: wrap;
			gap: 8px
		}

		.pill {
			font-size: 12px;
			padding: 8px 10px;
			border-radius: 999px;
			background: #f1f4ff;
			border: 1px solid #dde5ff
		}

		.rev-actions {
			margin-top: 22px
		}

		/* plus d’espace au dessus du bouton */
		.btn-go {
			padding: 13px 18px;
			border-radius: 12px;
			border: 1px solid #d5def7;
			font-weight: 800;
			color: #0a1028;
			cursor: pointer;
			background: #eaf0ff;
			text-decoration: none !important;
			display: inline-flex;
			align-items: center;
			justify-content: center;
			box-shadow: 0 1px 3px rgba(20, 40, 100, .06);
		}

		.btn-go:hover {
			background: #e2e9ff;
			text-decoration: none !important
		}

		.btn-disabled {
			padding: 13px 18px;
			border-radius: 12px;
			border: 1px dashed #d7dbea;
			background: #f3f5fb;
			color: #7a86a8;
			cursor: not-allowed;
			pointer-events: none;
			display: inline-flex;
			text-decoration: none !important;
		}

		.rev-media {
			border-radius: 14px;
			overflow: hidden;
			border: 1px solid #e5ebff;
			background: #000
		}

		.rev-media iframe {
			width: 100%;
			aspect-ratio: 16/9;
			display: block;
			border: 0
		}

		/* -------- FOOTER (liens simples) -------- */
		.site-footer {
			margin-top: auto;
			background: rgba(240, 244, 255, .6);
			border-top: 1px solid var(--line)
		}

	.footer-inner {
		max-width: 1280px;
		margin: 0 auto;
		padding: 18px 16px;
		display: none;
		flex-wrap: wrap;
		gap: 14px;
		justify-content: center
	}

		.footer-inner a {
			color: #2a3a70;
			text-decoration: underline;
			font-size: 14px
		}

	.footer-inner a:hover {
		text-decoration: none
	}

	.footer-inner.visible {
		display: flex
	}

		/* -------- PAGES LÉGALES (modales Mentions & CGU) -------- */
		.legal-modal-overlay {
			position: fixed;
			inset: 0;
			background: rgba(13, 22, 51, .5);
			backdrop-filter: blur(4px);
			display: none;
			align-items: flex-start;
			justify-content: center;
			z-index: 2600;
			overflow-y: auto;
			padding: 40px 16px;
		}

		.legal-modal-overlay.open {
			display: flex;
		}

		.legal-modal {
			position: relative;
			width: min(900px, 100%);
			background: rgba(255, 255, 255, .99);
			border: 1px solid #dbe2f3;
			border-radius: 20px;
			box-shadow: 0 16px 60px -16px rgba(14, 25, 60, .5);
			margin: auto;
		}

		.legal-modal-header {
			position: sticky;
			top: 0;
			background: rgba(255, 255, 255, .97);
			backdrop-filter: blur(8px);
			padding: 20px 24px 16px;
			border-bottom: 1px solid #e6ecfb;
			border-radius: 20px 20px 0 0;
			display: flex;
			align-items: center;
			justify-content: space-between;
			z-index: 1;
		}

		.legal-modal-header h1 {
			margin: 0;
			font-size: 22px;
			font-weight: 800;
			color: #0d1633;
		}

		.legal-modal-close {
			width: 38px;
			height: 38px;
			border-radius: 999px;
			border: 1px solid #d5def7;
			background: #fff;
			color: #22315f;
			cursor: pointer;
			display: grid;
			place-items: center;
			font-size: 18px;
			font-weight: 800;
			transition: background .15s ease, transform .12s ease;
		}

		.legal-modal-close:hover {
			background: #eef3ff;
			transform: scale(1.05);
		}

		.legal-modal-body {
			padding: 24px 28px 40px;
			line-height: 1.7;
			color: #1a2454;
		}

		.legal-modal-body .legal-update {
			font-size: 13px;
			color: #5a6787;
			margin-bottom: 28px;
			padding-bottom: 16px;
			border-bottom: 1px solid #e6ecfb;
		}

		.legal-modal-body h2 {
			font-size: 17px;
			font-weight: 700;
			color: #0d1633;
			margin: 32px 0 12px;
			padding-top: 16px;
			border-top: 1px solid #eef3ff;
		}

		.legal-modal-body h2:first-of-type {
			margin-top: 0;
			border-top: none;
			padding-top: 0;
		}

		.legal-modal-body h3 {
			font-size: 15px;
			font-weight: 600;
			color: #22315f;
			margin: 20px 0 8px;
		}

		.legal-modal-body p {
			margin: 0 0 14px;
			font-size: 14px;
		}

		.legal-modal-body ul {
			margin: 0 0 16px;
			padding-left: 22px;
		}

		.legal-modal-body li {
			margin-bottom: 6px;
			font-size: 14px;
		}

		.legal-modal-body strong {
			font-weight: 700;
			color: #0d1633;
		}

		.legal-modal-body a {
			color: #2563eb;
			text-decoration: underline;
		}

		.legal-modal-body a:hover {
			text-decoration: none;
		}

		.legal-modal-body .legal-contact {
			background: #f4f7ff;
			padding: 16px 20px;
			border-radius: 12px;
			margin: 16px 0;
			border: 1px solid #e2e8ff;
		}

		.legal-modal-body .legal-contact p {
			margin: 4px 0;
		}

		@media (max-width: 640px) {
			.legal-modal-overlay {
				padding: 20px 10px;
			}
			.legal-modal {
				border-radius: 16px;
			}
			.legal-modal-header {
				padding: 16px 18px 12px;
				border-radius: 16px 16px 0 0;
			}
			.legal-modal-header h1 {
				font-size: 18px;
			}
			.legal-modal-body {
				padding: 18px 18px 32px;
			}
			.legal-modal-body h2 {
				font-size: 15px;
			}
		}

		/* -------- Support chat -------- */
		.support-notif {
			position: fixed;
			right: 24px;
			bottom: 24px;
			display: inline-flex;
			align-items: center;
			justify-content: center;
			width: 64px;
			height: 64px;
			border-radius: 22px;
			border: 1px solid #cbd4f8;
			background: rgba(255, 255, 255, .95);
			box-shadow: 0 16px 36px rgba(13, 22, 51, .18);
			color: #1a2150;
			font-weight: 600;
			cursor: pointer;
			z-index: 2400;
			opacity: 1;
			pointer-events: auto;
			transition: transform .2s ease, box-shadow .2s ease, background .2s ease, opacity .25s ease;
		}

		.support-notif[aria-hidden="true"] {
			opacity: 0;
			pointer-events: none;
			transform: translateY(8px);
		}

		.support-notif:focus {
			outline: 3px solid #7aa2ff66;
			outline-offset: 4px;
		}

		.support-notif:hover {
			transform: translateY(-2px);
			box-shadow: 0 20px 42px rgba(13, 22, 51, .24);
		}

		.support-notif .messenger-icon {
			position: relative;
			width: 48px;
			height: 48px;
			border-radius: 16px;
			background: linear-gradient(135deg, #5562ff, #7f8dff);
			display: grid;
			place-items: center;
			color: #fff;
			font-size: 24px;
			font-weight: 700;
			box-shadow: 0 10px 24px rgba(85, 98, 255, .4);
			transition: transform .2s ease;
		}

		.support-notif:hover .messenger-icon {
			transform: scale(1.05);
		}

		.support-notif .indicator {
			position: absolute;
			top: -6px;
			right: -6px;
			width: 22px;
			height: 22px;
			border-radius: 50%;
			background: #ef4444;
			color: #fff;
			display: flex;
			align-items: center;
			justify-content: center;
			font-size: 12px;
			font-weight: 700;
			box-shadow: 0 4px 12px rgba(239, 68, 68, .45);
			transition: transform .2s ease, opacity .2s ease;
		}

		.support-notif:not(.show) .indicator {
			transform: scale(.4);
			opacity: 0;
			box-shadow: none;
		}
		.support-notif .indicator.bounce {
			animation: notifBounce .6s ease;
		}
		@keyframes notifBounce {
			0% { transform: scale(1); }
			30% { transform: scale(1.35); }
			50% { transform: scale(.9); }
			70% { transform: scale(1.15); }
			100% { transform: scale(1); }
		}

		.support-chat {
			position: fixed;
			inset: 0;
			display: flex;
			justify-content: center;
			align-items: center;
			pointer-events: none;
			opacity: 0;
			transition: opacity .25s ease;
			z-index: 2500;
		}

		.support-chat.open {
			pointer-events: auto;
			opacity: 1;
		}

		.support-chat-backdrop {
			position: absolute;
			inset: 0;
			background: rgba(13, 22, 51, .28);
			backdrop-filter: blur(6px);
		}

		.support-chat-shell {
			position: relative;
			width: min(1020px, 96vw);
			height: calc(100vh - 80px);
			margin: 0 32px;
			border-radius: 26px;
			display: grid;
			grid-template-rows: auto minmax(0,1fr);
			overflow: hidden;
			background: rgba(249, 251, 255, .97);
			border: 1px solid #dbe2f3;
			box-shadow: 0 22px 60px rgba(15, 34, 85, .32);
			z-index: 1;
		}

		.support-chat-header {
			display: flex;
			align-items: center;
			justify-content: space-between;
			gap: 14px;
			padding: 14px 20px;
			border-bottom: 1px solid #dbe2f3;
			background: linear-gradient(180deg, rgba(255, 255, 255, .96), rgba(240, 244, 255, .92));
			flex-wrap: wrap;
		}

		.support-chat-titleblock {
			min-width: 0;
			flex: 1 1 220px;
		}

		.support-chat-title {
			font-size: 18px;
			font-weight: 800;
			margin: 0;
			color: #0f1a38;
		}

		.support-chat-sub {
			margin-top: 2px;
			font-size: 12px;
			color: #5e6c92;
			line-height: 1.35;
		}

		.support-pinned-topbar {
			display: flex;
			gap: 8px;
			flex-wrap: wrap;
			align-items: center;
			justify-content: center;
			flex: 1 1 auto;
		}

		.support-pinned-topbar:empty { display: none; }

		.support-pinned-pill {
			display: inline-flex;
			align-items: center;
			gap: 7px;
			padding: 7px 12px;
			border-radius: 999px;
			border: 1.5px solid transparent;
			background: #fff;
			cursor: pointer;
			font-size: 12.5px;
			font-weight: 700;
			color: #1b2b5b;
			transition: transform .12s ease, box-shadow .15s ease, border-color .15s ease, background .15s ease;
			max-width: 100%;
			white-space: nowrap;
		}

		.support-pinned-pill:hover {
			transform: translateY(-1px);
		}

		.support-pinned-pill .pill-label {
			overflow: hidden;
			text-overflow: ellipsis;
			max-width: 220px;
		}

		.support-pinned-pill .pill-icon {
			font-size: 14px;
			line-height: 1;
		}

		.support-pinned-pill .pill-badge {
			background: #ef4444;
			color: #fff;
			font-size: 10.5px;
			font-weight: 800;
			padding: 1px 7px;
			border-radius: 999px;
		}

		.support-pinned-pill.pin-support {
			border-color: #f97316;
			background: linear-gradient(135deg, #fff7ed 0%, #ffedd5 100%);
			color: #9a3412;
		}

		.support-pinned-pill.pin-support:hover { box-shadow: 0 4px 14px rgba(249, 115, 22, .25); }
		.support-pinned-pill.pin-support.active {
			background: #f97316;
			color: #fff;
			border-color: #ea580c;
			box-shadow: 0 4px 14px rgba(249, 115, 22, .4);
		}

		.support-pinned-pill.pin-ai {
			border-color: #8b5cf6;
			background: linear-gradient(135deg, #f5f3ff 0%, #ede9fe 100%);
			color: #4c1d95;
		}

		.support-pinned-pill.pin-ai:hover { box-shadow: 0 4px 14px rgba(139, 92, 246, .25); }
		.support-pinned-pill.pin-ai.active {
			background: #8b5cf6;
			color: #fff;
			border-color: #7c3aed;
			box-shadow: 0 4px 14px rgba(139, 92, 246, .4);
		}

		.support-chat-actions {
			display: flex;
			gap: 8px;
			align-items: center;
			flex-wrap: wrap;
		}

		.support-pill-btn {
			padding: 9px 14px;
			border-radius: 999px;
			border: 1px solid #cdd6f5;
			background: #ffffff;
			color: #1b2b5b;
			font-size: 13px;
			font-weight: 700;
			cursor: pointer;
		}

		.support-pill-btn:hover {
			background: #eff3ff
		}

		.support-admin-ticket-btn {
			background: #f97316 !important;
			border-color: #ea580c !important;
			color: #fff !important;
			box-shadow: 0 2px 10px rgba(249, 115, 22, .35);
		}

		.support-admin-ticket-btn:hover {
			background: #ea580c !important;
		}

		.support-close-btn {
			position: absolute;
			top: 6px;
			right: 6px;
			z-index: 20;
			width: 30px;
			height: 30px;
			border-radius: 50%;
			border: 1px solid #cdd6f5;
			background: #fff;
			font-size: 14px;
			font-weight: 700;
			color: #3a4a7a;
			cursor: pointer;
			display: flex;
			align-items: center;
			justify-content: center;
			line-height: 1;
			box-shadow: 0 2px 8px rgba(15, 34, 85, .12);
		}
		.support-close-btn:hover {
			background: #f4f6ff;
			border-color: #a5b4fc;
			transform: scale(1.05);
		}
		.support-close-btn:active { transform: scale(.97); }
		/* Petit padding-right sur la zone d'actions du header pour éviter
		   que les boutons (Traiter le ticket, etc.) ne passent sous la croix
		   de fermeture désormais positionnée plus près du coin. */
		.support-chat-actions {
			padding-right: 34px;
		}

		.support-chat-columns {
			display: grid;
			grid-template-columns: 320px minmax(0,1fr);
			overflow: hidden;
		}

		.support-thread-pane {
			display: grid;
			grid-template-rows: auto auto auto minmax(0,1fr);
			border-right: 1px solid #e1e7fb;
			background: #f8faff;
			overflow: hidden;
		}

		.support-new-thread-wrap {
			padding: 12px 12px 0;
		}

		.support-new-thread-btn {
			width: 100%;
			padding: 10px 14px;
			border-radius: 12px;
			border: 1px solid #4f6dff;
			background: linear-gradient(135deg, #6d8aff 0%, #4f6dff 100%);
			color: #fff;
			font-size: 13px;
			font-weight: 700;
			cursor: pointer;
			display: flex;
			align-items: center;
			justify-content: center;
			gap: 6px;
			box-shadow: 0 2px 10px rgba(79, 109, 255, .25);
			transition: transform .12s ease, box-shadow .15s ease;
		}
		.support-new-thread-btn:hover {
			background: linear-gradient(135deg, #5a7aff 0%, #3f5de8 100%);
			transform: translateY(-1px);
			box-shadow: 0 4px 14px rgba(79, 109, 255, .35);
		}
		.support-new-thread-btn .plus { font-size: 16px; line-height: 1; }

		.support-collab-tip {
			margin: 12px 12px 0;
			padding: 10px 12px;
			border-radius: 12px;
			background: linear-gradient(135deg, #eef4ff 0%, #e0eaff 100%);
			border: 1px solid #c7d6ff;
			color: #1a3577;
			font-size: 12.5px;
			line-height: 1.45;
			cursor: pointer;
			transition: transform .12s ease, box-shadow .15s ease, border-color .15s ease;
			display: grid;
			gap: 4px;
		}

		.support-collab-tip:hover {
			border-color: #7aa2ff;
			box-shadow: 0 3px 12px rgba(122, 162, 255, .25);
			transform: translateY(-1px);
		}

		.support-collab-tip .tip-title {
			font-weight: 700;
			color: #1a3577;
			display: flex;
			align-items: center;
			gap: 6px;
		}

		.support-collab-tip .tip-text {
			color: #3d4f88;
		}

		.support-collab-tip kbd {
			background: #fff;
			border: 1px solid #c7d6ff;
			border-bottom-width: 2px;
			border-radius: 5px;
			padding: 1px 5px;
			font-size: 11px;
			font-family: inherit;
			color: #1a3577;
		}

		.support-thread-search {
			padding: 16px;
			border-bottom: 1px solid #e1e7fb
		}

		.support-thread-search input {
			width: 100%;
			padding: 10px 12px;
			border-radius: 12px;
			border: 1px solid #cfd8f7;
			background: #fff;
			font-size: 13px;
		}

		.support-thread-search input:focus {
			border-color: #7aa2ff;
			outline: none;
			box-shadow: 0 0 0 4px #7aa2ff33;
		}

		.support-thread-list {
			overflow-y: auto;
			-webkit-overflow-scrolling: touch;
			padding: 12px 8px 24px;
			display: grid;
			align-content: start;
			gap: 8px;
		}

		.support-thread-item {
			padding: 10px 12px;
			border-radius: 14px;
			border: 1px solid transparent;
			background: #fff;
			box-shadow: 0 1px 3px rgba(15, 34, 85, .08);
			cursor: pointer;
			display: grid;
			gap: 4px;
			transition: border-color .15s ease, box-shadow .15s ease, background .15s ease, transform .12s ease;
		}

		.support-thread-item:hover {
			border-color: #bfcafd;
			transform: translateX(2px);
		}

		.support-thread-item.active {
			border-color: #6f85ff;
			box-shadow: 0 3px 12px rgba(111, 133, 255, .26);
		}

		.support-thread-item.pinned-support {
			border: 2px solid #f97316;
			background: linear-gradient(135deg, #fff7ed 0%, #ffedd5 100%);
			box-shadow: 0 3px 14px rgba(249, 115, 22, .22);
			padding-left: 14px;
			position: relative;
		}

		.support-thread-item.pinned-support::before {
			content: "📌";
			position: absolute;
			top: 6px;
			right: 10px;
			font-size: 12px;
			opacity: .7;
		}

		.support-thread-item.pinned-support:hover {
			border-color: #ea580c;
			transform: translateX(2px);
			box-shadow: 0 4px 16px rgba(234, 88, 12, .28);
		}

		.support-thread-item.pinned-support.active {
			border-color: #ea580c;
			box-shadow: 0 4px 18px rgba(234, 88, 12, .35);
		}

		.support-thread-item.pinned-support .title {
			color: #9a3412;
		}

		.support-thread-item.pinned-support .pinned-tag {
			display: inline-block;
			background: #f97316;
			color: #fff;
			font-size: 10px;
			font-weight: 700;
			letter-spacing: .04em;
			text-transform: uppercase;
			padding: 2px 6px;
			border-radius: 6px;
			margin-right: 6px;
			vertical-align: 1px;
		}

		.support-thread-item.pinned-support .help-line {
			color: #9a3412;
			font-size: 12px;
			font-weight: 600;
			background: rgba(249, 115, 22, .12);
			padding: 4px 8px;
			border-radius: 8px;
			margin-top: 2px;
			display: flex;
			align-items: center;
			gap: 4px;
		}

		.support-thread-item.pinned-ai {
			border: 2px solid #8b5cf6;
			background: linear-gradient(135deg, #f5f3ff 0%, #ede9fe 100%);
			box-shadow: 0 3px 14px rgba(139, 92, 246, .22);
			padding-left: 14px;
			position: relative;
		}

		.support-thread-item.pinned-ai::before {
			content: "🤖";
			position: absolute;
			top: 6px;
			right: 10px;
			font-size: 12px;
			opacity: .7;
		}

		.support-thread-item.pinned-ai:hover {
			border-color: #7c3aed;
			transform: translateX(2px);
			box-shadow: 0 4px 16px rgba(124, 58, 237, .28);
		}

		.support-thread-item.pinned-ai.active {
			border-color: #7c3aed;
			box-shadow: 0 4px 18px rgba(124, 58, 237, .35);
		}

		.support-thread-item.pinned-ai .title {
			color: #4c1d95;
		}

		.support-thread-item.pinned-ai .pinned-tag-ai {
			background: #8b5cf6;
		}

		.support-thread-item.pinned-ai .help-line-ai {
			color: #4c1d95;
			background: rgba(139, 92, 246, .14);
		}

		.support-thread-item.editing {
			border-color: #5f7bff;
			box-shadow: 0 3px 14px rgba(95, 123, 255, .28);
			background: #f3f6ff;
			cursor: default;
		}

		.support-thread-item .title {
			font-weight: 700;
			color: #122050;
			display: flex;
			justify-content: space-between;
			gap: 8px;
			align-items: center;
		}

		.support-thread-item .badge {
			background: #ef4444;
			color: #fff;
			border-radius: 999px;
			padding: 2px 8px;
			font-size: 11px;
		}

		.support-thread-item .excerpt {
			font-size: 13px;
			color: #586287;
			display: -webkit-box;
			-webkit-line-clamp: 2;
			-webkit-box-orient: vertical;
			overflow: hidden;
			line-height: 1.4;
			max-height: 2.8em;
		}

		.support-thread-item .meta {
			display: flex;
			gap: 10px;
			font-size: 11px;
			color: #7a86a9;
			overflow: hidden;
			white-space: nowrap;
			text-overflow: ellipsis;
		}

		.support-thread-item .thread-edit-input {
			width: 100%;
			padding: 10px 12px;
			border-radius: 10px;
			border: 1px solid #c5d3ff;
			font: 600 14px/1.4 Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
		}

		.support-thread-item .thread-edit-input:focus {
			outline: 3px solid #7aa2ff33;
			border-color: #7aa2ff;
		}

		.support-thread-item .thread-edit-actions {
			display: flex;
			gap: 8px;
			margin-top: 8px;
		}

		.support-thread-item .thread-edit-actions button {
			border-radius: 10px;
			border: 1px solid #d5def7;
			background: #fff;
			font-weight: 700;
			color: #1a2454;
			padding: 7px 12px;
			cursor: pointer;
			transition: background .2s ease, transform .12s ease;
		}

		.support-thread-item .thread-edit-actions button:hover {
			background: #eef3ff;
			transform: translateY(-1px);
		}

		.support-thread-item .thread-edit-actions button.primary {
			background: #4f6dff;
			border-color: #4f6dff;
			color: #fff;
			box-shadow: 0 3px 12px rgba(79, 109, 255, .32);
		}

		.support-thread-item .thread-edit-actions button.primary:hover {
			background: #445fe6;
		}

		.support-chat-main {
			display: grid;
			grid-template-rows: minmax(0,1fr) auto;
			overflow: hidden;
		}

		.support-messages {
			overflow-y: auto;
			-webkit-overflow-scrolling: touch;
			overflow-x: hidden;
			padding: 24px 24px 32px;
			background: #fafbff;
		}
		.support-messages > * + * {
			margin-top: 10px;
		}

		.support-message .text.collapsed {
			max-height: 200px;
			overflow: hidden;
			-webkit-mask-image: linear-gradient(to bottom, #000 60%, transparent 100%);
			mask-image: linear-gradient(to bottom, #000 60%, transparent 100%);
		}
		.support-msg-expand {
			display: inline-flex;
			align-items: center;
			gap: 4px;
			margin-top: 6px;
			padding: 5px 12px;
			border-radius: 999px;
			border: 1px solid #cdd6f5;
			background: #f5f8ff;
			color: #4f6dff;
			font-size: 12px;
			font-weight: 700;
			cursor: pointer;
		}
		.support-msg-expand:hover { background: #e8eeff; }
		.support-msg-expand .arrow {
			display: inline-block;
			transition: transform .2s ease;
			font-size: 10px;
		}
		.support-msg-expand.expanded .arrow { transform: rotate(180deg); }

		.support-empty {
			text-align: center;
			color: #7984a5;
			font-size: 14px;
			padding: 60px 20px;
		}
		.support-no-thread {
			text-align: center;
			color: #8592b5;
			font-size: 15px;
			padding: 80px 20px;
		}
		.support-no-thread .nt-icon { font-size: 48px; margin-bottom: 16px; opacity: .45; }
		.support-no-thread .nt-title { font-weight: 700; font-size: 17px; color: #3a4a7a; margin-bottom: 6px; }

		.support-welcome-banner {
			margin: 6px 0 14px;
			padding: 14px 16px;
			border-radius: 14px;
			background: linear-gradient(135deg, #fff7ed 0%, #ffedd5 100%);
			border: 1px solid #fdba74;
			color: #7c2d12;
			font-size: 13px;
			line-height: 1.5;
			display: flex;
			gap: 12px;
			align-items: flex-start;
			box-shadow: 0 2px 10px rgba(249, 115, 22, .12);
		}
		.support-welcome-banner .swb-icon {
			font-size: 22px;
			line-height: 1;
			flex-shrink: 0;
			margin-top: 1px;
		}
		.support-welcome-banner .swb-body { flex: 1; min-width: 0; }
		.support-welcome-banner .swb-title {
			font-weight: 800;
			font-size: 14px;
			color: #9a3412;
			margin-bottom: 4px;
		}
		.support-welcome-banner .swb-text { color: #7c2d12; }
		.support-welcome-banner .swb-text strong { color: #9a3412; }

		.support-welcome-banner.swb-ai {
			background: linear-gradient(135deg, #eef2ff 0%, #e0e7ff 100%);
			border-color: #a5b4fc;
			color: #312e81;
			box-shadow: 0 2px 10px rgba(99, 102, 241, .12);
		}
		.support-welcome-banner.swb-ai .swb-title { color: #3730a3; }
		.support-welcome-banner.swb-ai .swb-text { color: #312e81; }
		.support-welcome-banner.swb-ai .swb-text strong { color: #3730a3; }

		/* Bandeau d'accueil pour le thread Support Technique & Commercial */
		.support-welcome-banner {
			margin: 6px 0 14px;
			padding: 14px 16px;
			border-radius: 14px;
			background: linear-gradient(135deg, #fff7ed 0%, #ffedd5 100%);
			border: 1px solid #fdba74;
			color: #7c2d12;
			font-size: 13px;
			line-height: 1.5;
			display: flex;
			gap: 12px;
			align-items: flex-start;
			box-shadow: 0 2px 10px rgba(249, 115, 22, .12);
		}
		.support-welcome-banner .swb-icon {
			font-size: 22px;
			line-height: 1;
			flex-shrink: 0;
			margin-top: 1px;
		}
		.support-welcome-banner .swb-body { flex: 1; min-width: 0; }
		.support-welcome-banner .swb-title {
			font-weight: 800;
			font-size: 14px;
			color: #9a3412;
			margin-bottom: 4px;
		}
		.support-welcome-banner .swb-text { color: #7c2d12; }
		.support-welcome-banner .swb-text strong { color: #9a3412; }

		.support-welcome-banner.swb-ai {
			background: linear-gradient(135deg, #eef2ff 0%, #e0e7ff 100%);
			border-color: #a5b4fc;
			color: #312e81;
			box-shadow: 0 2px 10px rgba(99, 102, 241, .12);
		}
		.support-welcome-banner.swb-ai .swb-title { color: #3730a3; }
		.support-welcome-banner.swb-ai .swb-text { color: #312e81; }
		.support-welcome-banner.swb-ai .swb-text strong { color: #3730a3; }

		.support-welcome-banner {
			margin: 6px 0 14px;
			padding: 14px 16px;
			border-radius: 14px;
			background: linear-gradient(135deg, #fff7ed 0%, #ffedd5 100%);
			border: 1px solid #fdba74;
			color: #7c2d12;
			font-size: 13px;
			line-height: 1.5;
			display: flex;
			gap: 12px;
			align-items: flex-start;
			box-shadow: 0 2px 10px rgba(249, 115, 22, .12);
		}
		.support-welcome-banner .swb-icon {
			font-size: 22px;
			line-height: 1;
			flex-shrink: 0;
			margin-top: 1px;
		}
		.support-welcome-banner .swb-body { flex: 1; min-width: 0; }
		.support-welcome-banner .swb-title {
			font-weight: 800;
			font-size: 14px;
			color: #9a3412;
			margin-bottom: 4px;
		}
		.support-welcome-banner .swb-text { color: #7c2d12; }
		.support-welcome-banner .swb-text strong { color: #9a3412; }

		.support-welcome-banner.swb-ai {
			background: linear-gradient(135deg, #eef2ff 0%, #e0e7ff 100%);
			border-color: #a5b4fc;
			color: #312e81;
			box-shadow: 0 2px 10px rgba(99, 102, 241, .12);
		}
		.support-welcome-banner.swb-ai .swb-title { color: #3730a3; }
		.support-welcome-banner.swb-ai .swb-text { color: #312e81; }
		.support-welcome-banner.swb-ai .swb-text strong { color: #3730a3; }

		/* Bandeau d'accueil pour le thread Support Technique & Commercial */
		.support-welcome-banner {
			margin: 6px 0 14px;
			padding: 14px 16px;
			border-radius: 14px;
			background: linear-gradient(135deg, #fff7ed 0%, #ffedd5 100%);
			border: 1px solid #fdba74;
			color: #7c2d12;
			font-size: 13px;
			line-height: 1.5;
			display: flex;
			gap: 12px;
			align-items: flex-start;
			box-shadow: 0 2px 10px rgba(249, 115, 22, .12);
		}
		.support-welcome-banner .swb-icon {
			font-size: 22px;
			line-height: 1;
			flex-shrink: 0;
			margin-top: 1px;
		}
		.support-welcome-banner .swb-body { flex: 1; min-width: 0; }
		.support-welcome-banner .swb-title {
			font-weight: 800;
			font-size: 14px;
			color: #9a3412;
			margin-bottom: 4px;
		}
		.support-welcome-banner .swb-text { color: #7c2d12; }
		.support-welcome-banner .swb-text strong { color: #9a3412; }

		/* Variante pour l'Assistant IA Skyprod */
		.support-welcome-banner.swb-ai {
			background: linear-gradient(135deg, #eef2ff 0%, #e0e7ff 100%);
			border-color: #a5b4fc;
			color: #312e81;
			box-shadow: 0 2px 10px rgba(99, 102, 241, .12);
		}
		.support-welcome-banner.swb-ai .swb-title { color: #3730a3; }
		.support-welcome-banner.swb-ai .swb-text { color: #312e81; }
		.support-welcome-banner.swb-ai .swb-text strong { color: #3730a3; }

		/* ---- Date separators ---- */
		.support-date-sep {
			display: flex; align-items: center; gap: 12px;
			padding: 8px 0 4px; color: #8592b5;
			font-size: 12px; font-weight: 600; user-select: none;
		}
		.support-date-sep::before, .support-date-sep::after {
			content: ''; flex: 1; height: 1px; background: #dde4f5;
		}

		/* ---- Scroll-to-bottom FAB ---- */
		.support-scroll-bottom {
			position: absolute; bottom: 80px; right: 24px;
			width: 38px; height: 38px; border-radius: 50%;
			background: #fff; border: 1px solid #cdd6f5;
			box-shadow: 0 4px 16px rgba(15,34,85,.18);
			display: flex; align-items: center; justify-content: center;
			font-size: 18px; color: #4f6dff; cursor: pointer;
			opacity: 0; pointer-events: none;
			transition: opacity .2s ease, transform .2s ease;
			z-index: 5;
		}
		.support-scroll-bottom.visible {
			opacity: 1; pointer-events: auto;
		}
		.support-scroll-bottom:hover {
			transform: translateY(-2px); box-shadow: 0 6px 20px rgba(15,34,85,.24);
		}
		.support-scroll-bottom .fab-badge {
			position: absolute; top: -4px; right: -4px;
			min-width: 18px; height: 18px; border-radius: 9px;
			background: #ef4444; color: #fff; font-size: 10px; font-weight: 700;
			display: flex; align-items: center; justify-content: center;
			padding: 0 4px;
		}

		.support-context-menu {
			position: fixed;
			display: none;
			z-index: 2600;
			min-width: 180px;
			background: #fff;
			border: 1px solid #d5def7;
			border-radius: 12px;
			box-shadow: 0 16px 36px rgba(13, 22, 51, .22);
			overflow: hidden;
		}

		.support-context-menu.show {
			display: block
		}

		.support-context-menu button {
			width: 100%;
			border: 0;
			background: transparent;
			padding: 10px 14px;
			text-align: left;
			font: 600 13px/1 Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
			color: #152350;
			cursor: pointer;
			transition: background .2s ease;
		}

		.support-context-menu button:hover {
			background: #eef3ff
		}

		.support-message {
			max-width: 72%;
			border-radius: 18px;
			padding: 10px 16px 8px;
			background: #fff;
			border: 1px solid #dce3f6;
			box-shadow: 0 1px 4px rgba(15, 34, 85, .06);
			position: relative;
			display: flex;
			flex-direction: column;
			gap: 2px;
			animation: supportMsgIn .2s ease;
		}
		@keyframes supportMsgIn {
			from { opacity: 0; transform: translateY(6px); }
			to { opacity: 1; transform: translateY(0); }
		}

		.support-message .sender {
			display: flex; align-items: center; gap: 8px;
			font-size: 12px; font-weight: 700;
			color: #405187; margin-bottom: 2px;
		}
		.support-message .sender .avatar {
			width: 24px; height: 24px; border-radius: 50%;
			background: linear-gradient(135deg, #7f8dff, #5562ff);
			color: #fff; display: flex; align-items: center; justify-content: center;
			font-size: 11px; font-weight: 800; flex-shrink: 0;
		}

		.support-message .text {
			font-size: 14px;
			line-height: 1.55;
			color: #142044;
			word-break: break-word;
			white-space: pre-wrap;
		}
		.support-message .text a {
			color: #4f6dff;
			text-decoration: underline;
			text-decoration-color: rgba(79,109,255,.3);
		}
		.support-message .text a:hover { text-decoration-color: #4f6dff; }

		.support-message .time {
			font-size: 11px;
			color: #7f8aaa;
			margin-top: 2px;
			text-align: right;
			display: flex;
			align-items: center;
			justify-content: flex-end;
			gap: 6px;
		}
		.support-message .read-check {
			font-size: 13px;
			line-height: 1;
		}
		.support-message .read-check.read { color: #4f6dff; }
		.support-message .read-check.sent { color: #a0aac4; }

		.support-message.me {
			margin-left: auto;
			background: linear-gradient(135deg, #e9f1ff, #dde8ff);
			border-color: #c5d8ff;
		}

		.support-message.me .time {
			color: #5568a0
		}

		.support-message .edited-label {
			font-size: 11px;
			color: #6b7694;
			margin-left: 6px
		}

		.support-message.editing {
			background: #f3f6ff;
			border: 1px solid #d7def7;
			border-radius: 14px;
			padding: 12px;
		}

		.support-message textarea.edit-input {
			width: 100%;
			min-height: 90px;
			border-radius: 10px;
			border: 1px solid #cdd6f6;
			padding: 8px 10px;
			font: inherit;
			resize: vertical;
			box-shadow: 0 1px 3px rgba(20, 40, 100, .05);
		}

		.support-message textarea.edit-input:focus {
			outline: 3px solid #7aa2ff33;
			border-color: #7aa2ff
		}

		.support-message .edit-actions {
			display: flex;
			gap: 8px;
			margin-top: 10px
		}

		.support-message .edit-actions button {
			border-radius: 10px;
			border: 1px solid #d5def7;
			background: #fff;
			color: #1a2454;
			font-weight: 700;
			padding: 8px 14px;
			cursor: pointer;
			transition: background .2s ease, transform .12s ease;
		}

		.support-message .edit-actions button:hover {
			background: #eef3ff;
			transform: translateY(-1px)
		}

		.support-message .edit-actions button.primary {
			background: #4f6dff;
			color: #fff;
			border-color: #4f6dff;
			box-shadow: 0 4px 14px rgba(79, 109, 255, .32);
		}

		.support-message .edit-actions button.primary:hover {
			background: #445fe6
		}

		.support-reactions {
			display: flex;
			flex-wrap: wrap;
			gap: 4px;
			margin-top: 6px;
			align-items: center;
		}
		.support-reactions .r-pill {
			display: inline-flex;
			align-items: center;
			gap: 4px;
			padding: 2px 8px;
			background: #f1f4ff;
			border: 1px solid #d7def7;
			border-radius: 12px;
			font-size: 12px;
			color: #1a2454;
			cursor: pointer;
			user-select: none;
			line-height: 1;
			transition: background .15s ease, transform .12s ease;
		}
		.support-reactions .r-pill:hover {
			background: #e3eaff;
			transform: translateY(-1px);
		}
		.support-reactions .r-pill.mine {
			background: #dfe7ff;
			border-color: #7aa2ff;
			color: #1c349f;
		}
		.support-reactions .r-pill .r-emoji { font-size: 14px; }
		.support-reactions .r-pill .r-count { font-weight: 700; min-width: 8px; text-align: center; }
		.support-reactions .r-add {
			border: 1px dashed #c8d2ee;
			background: transparent;
			color: #6b7694;
			border-radius: 12px;
			padding: 2px 8px;
			font-size: 14px;
			cursor: pointer;
			line-height: 1;
			transition: background .15s ease, color .15s ease, border-color .15s ease;
		}
		.support-reactions .r-add:hover {
			background: #f1f4ff;
			color: #4f6dff;
			border-color: #4f6dff;
			border-style: solid;
		}
		.support-reaction-picker {
			position: absolute;
			z-index: 9999;
			background: #fff;
			border: 1px solid #d7def7;
			border-radius: 12px;
			box-shadow: 0 8px 28px rgba(20, 40, 100, .18);
			padding: 8px;
			display: grid;
			grid-template-columns: repeat(8, 1fr);
			gap: 4px;
			min-width: 250px;
		}
		.support-reaction-picker button {
			background: transparent;
			border: 0;
			padding: 6px;
			font-size: 18px;
			cursor: pointer;
			border-radius: 8px;
			line-height: 1;
			transition: background .12s ease, transform .12s ease;
		}
		.support-reaction-picker button:hover {
			background: #f1f4ff;
			transform: scale(1.15);
		}

		.support-attachments {
			display: flex;
			flex-wrap: wrap;
			gap: 8px;
			margin-top: 10px;
		}

		.support-attachment-card {
			display: inline-flex;
			align-items: center;
			gap: 6px;
			padding: 8px 10px;
			border-radius: 10px;
			border: 1px solid #cfd8f7;
			background: #fff;
			text-decoration: none;
			font-size: 13px;
			color: #2b3a6f;
			cursor: pointer;
			transition: border-color 0.15s ease, box-shadow 0.15s ease;
			font-family: inherit;
		}

		button.support-attachment-card {
			padding: 4px;
			line-height: 0;
		}

		.support-attachment-card:hover {
			border-color: #6366f1;
			box-shadow: 0 4px 14px rgba(99, 102, 241, 0.18);
		}

		.support-attachment-card img {
			max-width: 150px;
			border-radius: 8px
		}

		/* ── Lightbox image messagerie ── */
		.sp-imglightbox {
			position: fixed;
			inset: 0;
			background: rgba(8, 12, 28, 0.85);
			z-index: 100000;
			display: none;
			align-items: center;
			justify-content: center;
			padding: 28px;
			backdrop-filter: blur(6px);
		}

		.sp-imglightbox.show {
			display: flex;
		}

		.sp-imglightbox-img {
			max-width: min(94vw, 1600px);
			max-height: 88vh;
			width: auto;
			height: auto;
			border-radius: 12px;
			box-shadow: 0 30px 80px rgba(0, 0, 0, 0.4);
			background: #1e293b;
			object-fit: contain;
		}

		.sp-imglightbox-toolbar {
			position: absolute;
			top: 16px;
			right: 16px;
			display: flex;
			align-items: center;
			gap: 8px;
			padding: 6px 10px;
			background: rgba(15, 23, 42, 0.7);
			border-radius: 10px;
			color: #f1f5f9;
			font-size: 13px;
			backdrop-filter: blur(6px);
		}

		.sp-imglightbox-title {
			max-width: 280px;
			overflow: hidden;
			text-overflow: ellipsis;
			white-space: nowrap;
			padding-right: 8px;
			border-right: 1px solid rgba(255, 255, 255, 0.15);
		}

		.sp-imglightbox-btn {
			display: inline-flex;
			align-items: center;
			justify-content: center;
			min-width: 32px;
			height: 32px;
			padding: 0 8px;
			border-radius: 7px;
			background: rgba(255, 255, 255, 0.08);
			border: 1px solid rgba(255, 255, 255, 0.12);
			color: #f1f5f9;
			cursor: pointer;
			font-size: 16px;
			font-weight: 700;
			text-decoration: none;
			transition: background 0.15s ease;
		}

		.sp-imglightbox-btn:hover {
			background: rgba(255, 255, 255, 0.18);
		}

		.support-attachment-media {
			display: flex;
			flex-direction: column;
			gap: 4px;
			max-width: 320px;
		}
		.support-attachment-media video {
			max-width: 320px;
			max-height: 240px;
			border-radius: 10px;
			background: #000;
			display: block;
		}
		.support-attachment-media audio {
			width: 280px;
			max-width: 100%;
			display: block;
		}
		.support-attachment-media .att-meta {
			font-size: 11px;
			color: #6b7694;
			display: flex;
			justify-content: space-between;
			gap: 8px;
		}
		.support-attachment-media .att-meta a {
			color: #4f6dff;
			text-decoration: none;
		}
		.support-attachment-media .att-meta a:hover { text-decoration: underline; }

		/* ---- Skyshare link preview (iMessage-style) ---- */
		.skyshare-preview {
			display: flex; align-items: stretch;
			margin-top: 8px; max-width: 360px; width: 100%;
			border-radius: 12px; overflow: hidden;
			border: 1px solid #cfd8f7; background: #fff;
			text-decoration: none; color: #2b3a6f;
			font-size: 13px;
			transition: transform .12s ease, box-shadow .12s ease;
		}
		.skyshare-preview:hover { transform: translateY(-1px); box-shadow: 0 4px 14px rgba(79,109,255,.18); }
		.skyshare-preview .ssp-thumb {
			width: 76px; min-width: 76px;
			background: linear-gradient(135deg, #6d8aff, #4f6dff);
			display: flex; align-items: center; justify-content: center;
			color: #fff; font-size: 30px;
			background-size: cover; background-position: center;
		}
		.skyshare-preview.image .ssp-thumb { color: transparent; }
		.skyshare-preview .ssp-body {
			padding: 10px 12px; display: flex; flex-direction: column;
			justify-content: center; gap: 2px; min-width: 0; flex: 1;
		}
		.skyshare-preview .ssp-tag {
			font-size: 10px; color: #4f6dff; font-weight: 700;
			text-transform: uppercase; letter-spacing: .6px;
		}
		.skyshare-preview .ssp-name {
			font-weight: 600; color: #1f2a55;
			white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
		}
		.skyshare-preview .ssp-meta {
			font-size: 12px; color: #6b7a9e;
			white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
		}
		.skyshare-preview.error .ssp-thumb { background: #aab1c5; }
		.skyshare-preview.loading .ssp-name { color: #8b9cc4; }
		.support-message.me .skyshare-preview { background: #fff; border-color: #b7c5fb; }

		/* ---- SkyClips clip preview (inline player + waveform) ---- */
		.skyclips-preview {
			display: flex; flex-direction: column; gap: 8px;
			margin-top: 8px; max-width: 360px; width: 100%;
			padding: 10px 12px;
			border-radius: 12px; border: 1px solid #cfd8f7; background: #fff;
			color: #2b3a6f; font-size: 13px;
		}
		.skyclips-preview .scp-head {
			display: flex; align-items: center; gap: 10px; min-width: 0;
		}
		.skyclips-preview .scp-play {
			width: 36px; height: 36px; border-radius: 50%;
			border: none; cursor: pointer;
			background: linear-gradient(135deg, #6d8aff, #4f6dff);
			color: #fff; font-size: 14px; line-height: 1;
			display: flex; align-items: center; justify-content: center;
			flex-shrink: 0;
			transition: transform .12s ease, box-shadow .12s ease;
		}
		.skyclips-preview .scp-play:hover:not(:disabled) {
			transform: scale(1.05); box-shadow: 0 4px 12px rgba(79,109,255,.35);
		}
		.skyclips-preview .scp-play:disabled { opacity: .5; cursor: not-allowed; }
		.skyclips-preview .scp-info {
			display: flex; flex-direction: column; gap: 1px; min-width: 0; flex: 1;
		}
		.skyclips-preview .scp-tag {
			font-size: 10px; color: #4f6dff; font-weight: 700;
			text-transform: uppercase; letter-spacing: .6px;
		}
		.skyclips-preview .scp-title {
			font-weight: 600; color: #1f2a55;
			white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
		}
		.skyclips-preview .scp-meta { font-size: 12px; color: #6b7a9e; }
		.skyclips-preview .scp-open {
			width: 28px; height: 28px; border-radius: 8px;
			display: flex; align-items: center; justify-content: center;
			text-decoration: none; color: #6b7a9e; font-size: 14px;
			background: #f1f4ff; flex-shrink: 0;
		}
		.skyclips-preview .scp-open:hover { background: #e1e8ff; color: #4f6dff; }
		.skyclips-preview .scp-wave {
			width: 100%; height: 40px; display: block;
		}
		.skyclips-preview .scp-bar { fill: #c2cdf2; }
		.skyclips-preview.playing .scp-bar { fill: #aab9ed; }
		.skyclips-preview .scp-progress {
			fill: rgba(79,109,255,.28);
			pointer-events: none;
		}
		.skyclips-preview.loading .scp-title { color: #8b9cc4; }
		.skyclips-preview.error { border-color: #f0c3c3; }
		.skyclips-preview.error .scp-tag { color: #c0392b; }
		.support-message.me .skyclips-preview { background: #fff; border-color: #b7c5fb; }

		/* ---- Typing indicator ---- */
		.support-typing {
			display: none; align-items: center; gap: 8px;
			padding: 4px 16px 8px; font-size: 13px; color: #6b7a9e;
		}
		.support-typing.visible { display: flex; }
		.support-typing-dots { display: flex; gap: 3px; }
		.support-typing-dots span {
			width: 6px; height: 6px; border-radius: 50%;
			background: #8b9cc4; animation: typingBounce 1.4s infinite;
		}
		.support-typing-dots span:nth-child(2) { animation-delay: .2s; }
		.support-typing-dots span:nth-child(3) { animation-delay: .4s; }
		@keyframes typingBounce {
			0%, 60%, 100% { transform: translateY(0); opacity: .4; }
			30% { transform: translateY(-5px); opacity: 1; }
		}

		/* ---- Reply quote bar ---- */
		.support-reply-bar {
			display: none; align-items: center; gap: 10px;
			padding: 10px 14px; margin-bottom: 2px;
			background: #f0f4ff; border-left: 3px solid #6d8aff;
			border-radius: 0 10px 10px 0; font-size: 13px; color: #2d3c72;
		}
		.support-reply-bar.visible { display: flex; }
		.support-reply-bar .reply-sender { font-weight: 700; color: #4f6dff; }
		.support-reply-bar .reply-text {
			flex: 1; overflow: hidden; white-space: nowrap;
			text-overflow: ellipsis; color: #5a6a94;
		}
		.support-reply-bar .reply-close {
			width: 24px; height: 24px; border-radius: 50%;
			border: none; background: transparent; cursor: pointer;
			font-size: 16px; color: #7a86a9; display: flex;
			align-items: center; justify-content: center;
		}
		.support-reply-bar .reply-close:hover { background: #dde4f5; }

		/* ---- Reply quote inside message bubble ---- */
		.support-message .reply-quote {
			background: rgba(79,109,255,.08); border-left: 3px solid #6d8aff;
			border-radius: 0 8px 8px 0; padding: 6px 10px; margin-bottom: 6px;
			font-size: 12px; cursor: pointer;
		}
		.support-message .reply-quote .rq-sender { font-weight: 700; color: #4f6dff; }
		.support-message .reply-quote .rq-text { color: #5a6a94; margin-top: 2px;
			overflow: hidden; white-space: nowrap; text-overflow: ellipsis; max-width: 260px; }

		/* ---- Emoji picker ---- */
		.support-emoji-btn {
			width: 42px; height: 42px; border-radius: 12px;
			border: 1px solid #cfd8f7; background: #f5f7ff;
			display: flex; align-items: center; justify-content: center;
			font-size: 20px; cursor: pointer; transition: background .15s;
			flex-shrink: 0;
		}
		.support-emoji-btn:hover { background: #e8eeff; }
		.support-emoji-picker {
			position: absolute; bottom: 100%; left: 60px;
			width: 320px; max-height: 340px;
			background: #fff; border: 1px solid #dbe2f3;
			border-radius: 16px; box-shadow: 0 12px 36px rgba(15,34,85,.22);
			display: none; flex-direction: column; z-index: 10;
			overflow: hidden;
		}
		.support-emoji-picker.visible { display: flex; }
		.support-emoji-picker-tabs {
			display: flex; border-bottom: 1px solid #e6ecfb;
			padding: 6px 8px 0; gap: 2px; flex-shrink: 0;
		}
		.support-emoji-picker-tabs button {
			flex: 1; padding: 8px 4px; border: none; background: transparent;
			font-size: 18px; cursor: pointer; border-radius: 10px 10px 0 0;
			transition: background .15s;
		}
		.support-emoji-picker-tabs button:hover { background: #f0f4ff; }
		.support-emoji-picker-tabs button.active { background: #e8eeff; }
		.support-emoji-picker-grid {
			flex: 1; overflow-y: auto; padding: 8px;
			display: grid; grid-template-columns: repeat(8, 1fr);
			gap: 2px; align-content: start;
		}
		.support-emoji-picker-grid button {
			padding: 6px; border: none; background: transparent;
			font-size: 22px; cursor: pointer; border-radius: 8px;
			transition: background .12s, transform .12s;
			line-height: 1;
		}
		.support-emoji-picker-grid button:hover {
			background: #eef2ff; transform: scale(1.2);
		}

		/* ---- Toast notification ---- */
		.support-toast {
			position: absolute; top: 12px; left: 50%; transform: translateX(-50%) translateY(-60px);
			background: #1a2150; color: #fff; padding: 8px 18px;
			border-radius: 999px; font-size: 13px; font-weight: 600;
			box-shadow: 0 8px 24px rgba(13,22,51,.3);
			opacity: 0; pointer-events: none; transition: transform .3s ease, opacity .3s ease;
			z-index: 10; white-space: nowrap; cursor: pointer;
		}
		.support-toast.visible {
			opacity: 1; transform: translateX(-50%) translateY(0); pointer-events: auto;
		}

		/* ─────────────────────────────────────────────────────────────────────
		   Portal push notifications : toast bas-droite + panneau dropdown
		   ─────────────────────────────────────────────────────────────────── */
		.portal-toast-stack {
			position: fixed;
			right: 24px;
			bottom: 24px;
			display: flex;
			flex-direction: column-reverse;
			gap: 12px;
			z-index: 5000;
			pointer-events: none;
		}
		.portal-toast {
			pointer-events: auto;
			background: linear-gradient(135deg, #1f2a5e, #2c3a7a);
			color: #fff;
			border-radius: 16px;
			box-shadow: 0 18px 42px rgba(13, 22, 51, .32), 0 0 0 1px rgba(255,255,255,.05) inset;
			padding: 14px 18px 14px 14px;
			max-width: 360px;
			min-width: 280px;
			display: flex;
			gap: 12px;
			align-items: flex-start;
			transform: translateY(40px);
			opacity: 0;
			transition: transform .45s cubic-bezier(.2,.85,.3,1.05), opacity .35s ease;
			cursor: pointer;
			position: relative;
			overflow: hidden;
		}
		.portal-toast::before {
			content: "";
			position: absolute; left: 0; top: 0; bottom: 0;
			width: 4px;
			background: linear-gradient(180deg, #7aa2ff, #b18bff);
		}
		.portal-toast.visible { transform: translateY(0); opacity: 1; }
		.portal-toast.leaving { opacity: 0; transform: translateY(-8px); }
		.portal-toast-icon {
			width: 38px; height: 38px;
			border-radius: 12px;
			background: rgba(255,255,255,.12);
			display: grid; place-items: center;
			font-size: 20px;
			flex-shrink: 0;
		}
		.portal-toast-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
		.portal-toast-title { font-size: 13.5px; font-weight: 700; line-height: 1.25; }
		.portal-toast-msg {
			font-size: 12.5px; opacity: .85; line-height: 1.4;
			white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
		}
		.portal-toast-close {
			position: absolute; top: 6px; right: 8px;
			background: none; border: none; color: rgba(255,255,255,.7);
			cursor: pointer; padding: 4px 6px; font-size: 14px;
			border-radius: 8px;
		}
		.portal-toast-close:hover { background: rgba(255,255,255,.1); color: #fff; }

		.notif-panel {
			position: fixed;
			top: 78px;
			right: 24px;
			width: min(380px, calc(100vw - 32px));
			max-height: min(560px, calc(100vh - 110px));
			background: #fff;
			border-radius: 18px;
			box-shadow: 0 22px 50px rgba(13,22,51,.22), 0 0 0 1px rgba(80,100,180,.08);
			z-index: 4500;
			display: flex;
			flex-direction: column;
			transform: translateY(-8px) scale(.97);
			opacity: 0;
			pointer-events: none;
			transition: opacity .18s ease, transform .22s ease;
		}
		.notif-panel.open {
			opacity: 1; pointer-events: auto;
			transform: translateY(0) scale(1);
		}
		.notif-panel-arrow {
			position: absolute;
			top: -7px;
			right: 88px;
			width: 14px; height: 14px;
			background: #fff;
			transform: rotate(45deg);
			box-shadow: -1px -1px 0 rgba(80,100,180,.08);
		}
		.notif-panel-header {
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 14px 18px 10px;
			border-bottom: 1px solid #ecf0fb;
		}
		.notif-panel-header h3 { margin: 0; font-size: 15px; color: #1b2150; font-weight: 700; }
		.notif-panel-action {
			background: none; border: none; color: #5562ff;
			font-size: 12px; font-weight: 600; cursor: pointer;
			padding: 4px 8px; border-radius: 8px;
		}
		.notif-panel-action:hover { background: #eef1ff; }
		.notif-panel-list {
			overflow-y: auto;
			flex: 1;
			padding: 6px 8px 10px;
		}
		.notif-panel-empty {
			padding: 36px 18px;
			text-align: center;
			color: #6b76a2;
			font-size: 13px;
		}
		.notif-item {
			display: flex;
			gap: 10px;
			padding: 10px 12px;
			border-radius: 12px;
			cursor: pointer;
			transition: background .15s ease;
			position: relative;
		}
		.notif-item:hover { background: #f4f6fd; }
		.notif-item.unread { background: #eef1ff; }
		.notif-item.unread::after {
			content: "";
			position: absolute; left: 4px; top: 50%;
			transform: translateY(-50%);
			width: 6px; height: 6px;
			border-radius: 50%;
			background: #5562ff;
		}
		.notif-item-icon {
			width: 36px; height: 36px;
			border-radius: 10px;
			background: linear-gradient(135deg, #6776ff, #9b87ff);
			color: #fff;
			display: grid; place-items: center;
			font-size: 17px;
			flex-shrink: 0;
		}
		.notif-item-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
		.notif-item-title { font-size: 13px; font-weight: 700; color: #1b2150; line-height: 1.25; }
		.notif-item-msg { font-size: 12px; color: #4a558a; line-height: 1.35; }
		.notif-item-time { font-size: 11px; color: #8590bb; margin-top: 4px; }

		@media (max-width: 640px) {
			.portal-toast-stack { right: 12px; bottom: 12px; left: 12px; }
			.portal-toast { max-width: 100%; min-width: 0; }
			.notif-panel { right: 12px; top: 70px; }
			.notif-panel-arrow { right: 64px; }
		}

		.support-compose {
			padding: 16px 24px;
			border-top: 1px solid #dbe2f3;
			background: #fff;
			display: grid;
			gap: 12px;
			position: relative;
			border-radius: 0 0 26px 26px;
			transition: background .2s ease, border-color .2s ease, box-shadow .2s ease;
			border: 1px solid transparent;
		}

		.support-compose.drag-over {
			border-color: #6d8aff;
			box-shadow: 0 0 0 4px rgba(109, 138, 255, .12);
			background: linear-gradient(180deg, rgba(239, 244, 255, .92), rgba(255, 255, 255, .98));
		}

		.support-upload-list {
			display: flex;
			flex-wrap: wrap;
			gap: 8px;
		}

		.support-upload-chip {
			display: inline-flex;
			align-items: center;
			gap: 8px;
			padding: 6px 10px;
			border-radius: 10px;
			border: 1px solid #cbd4f5;
			background: #eef2ff;
			font-size: 12px;
			color: #2d3c72;
		}

		.support-upload-chip .remove {
			cursor: pointer;
			font-weight: 700;
		}

		.support-compose-row {
			display: flex;
			align-items: flex-end;
			gap: 12px;
		}

		.support-drop-hint {
			position: absolute;
			inset: 12px;
			display: none;
			align-items: center;
			justify-content: center;
			border-radius: 16px;
			background: rgba(255, 255, 255, .92);
			color: #1b2b5b;
			font-weight: 700;
			font-size: 14px;
			pointer-events: none;
			box-shadow: 0 12px 24px rgba(15, 34, 85, .18);
			z-index: 10;
		}

		.support-compose.drag-over .support-drop-hint {
			display: flex;
		}

		#supportMessageInput {
			flex: 1;
			min-height: 44px;
			max-height: 140px;
			padding: 10px 14px;
			border-radius: 14px;
			resize: none;
			line-height: 1.45;
			border: 1px solid #cfd8f7;
			resize: vertical;
			font: inherit;
		}

		#supportMessageInput:focus {
			border-color: #7aa2ff;
			outline: none;
			box-shadow: 0 0 0 4px #7aa2ff33;
		}

		.support-file-btn {
			width: 42px;
			height: 42px;
			border-radius: 12px;
			border: 1px solid #cfd8f7;
			background: #f5f7ff;
			display: flex;
			align-items: center;
			justify-content: center;
			font-size: 20px;
			cursor: pointer;
		}

		#supportSendBtn {
			padding: 10px 20px;
			border-radius: 14px;
			border: 1px solid #6d8aff;
			background: linear-gradient(135deg, #6d8aff, #5562ff);
			box-shadow: 0 4px 12px rgba(85,98,255,.25);
			transition: opacity .2s ease, transform .12s ease, box-shadow .2s ease;
			color: #fff;
			font-weight: 700;
			cursor: pointer;
		}

		#supportSendBtn:disabled {
			opacity: .5;
			cursor: not-allowed
		}

		.support-roster {
			position: absolute;
			left: 16px;
			top: 132px;
			width: min(300px, 80vw);
			max-height: calc(92vh - 160px);
			background: #fff;
			border-radius: 20px;
			border: 1px solid #dbe2f3;
			box-shadow: 0 20px 40px rgba(15, 34, 85, .28);
			padding: 18px;
			display: flex;
			flex-direction: column;
			gap: 12px;
			z-index: 4;
			transform: translateY(16px) scale(.96);
			opacity: 0;
			pointer-events: none;
			transition: transform .2s ease, opacity .2s ease;
		}

		.support-roster.show {
			transform: translateY(0) scale(1);
			opacity: 1;
			pointer-events: auto;
		}

		.support-roster-header {
			display: flex;
			align-items: center;
			justify-content: space-between;
		}

		.support-roster-header h3 {
			margin: 0;
			font-size: 16px;
			font-weight: 800;
			color: #15224b;
		}

		.support-roster-header button {
			width: 30px;
			height: 30px;
			border-radius: 50%;
			border: 1px solid #ccd5f5;
			background: #f8faff;
			font-size: 16px;
			cursor: pointer;
			color: #485684;
		}

		.support-roster-list {
			flex: 1;
			overflow: auto;
			display: grid;
			gap: 6px;
			padding-right: 4px;
		}

		.support-roster-search {
			margin: 8px 0;
			display: flex;
			gap: 8px;
		}

		.support-roster-search input {
			flex: 1;
			min-width: 0;
			padding: 9px 12px;
			border-radius: 12px;
			border: 1px solid #ccd5f5;
			background: #fff;
			font-size: 13px;
			transition: border-color .2s ease, box-shadow .2s ease;
		}

		.support-roster-search input:focus {
			border-color: #7aa2ff;
			outline: none;
			box-shadow: 0 0 0 4px #7aa2ff33;
		}

		.support-roster-search input.valid {
			border-color: #16a34a;
			box-shadow: 0 0 0 3px rgba(22, 163, 74, .18);
		}

		.support-roster-search input.invalid {
			border-color: #dc2626;
			box-shadow: 0 0 0 3px rgba(220, 38, 38, .18);
		}

		.support-roster-add-btn {
			padding: 9px 14px;
			border-radius: 12px;
			border: 1px solid #6d8aff;
			background: #6d8aff;
			color: #fff;
			font-weight: 700;
			font-size: 13px;
			cursor: pointer;
			transition: background .15s ease, transform .12s ease, opacity .15s ease;
		}

		.support-roster-add-btn:hover:not(:disabled) {
			background: #5a78ee;
			transform: translateY(-1px);
		}

		.support-roster-add-btn:disabled {
			opacity: .45;
			cursor: not-allowed;
		}

		.support-roster-validation {
			min-height: 22px;
			margin: 4px 0 8px;
			font-size: 12.5px;
			font-weight: 600;
			display: flex;
			align-items: center;
			gap: 6px;
		}

		.support-roster-validation.valid { color: #15803d; }
		.support-roster-validation.invalid { color: #b91c1c; }
		.support-roster-validation.neutral { color: #7a86a9; font-weight: 500; }

		.support-roster-chips {
			display: flex;
			flex-wrap: wrap;
			gap: 6px;
			margin: 4px 0 12px;
			min-height: 32px;
			padding: 8px;
			border-radius: 12px;
			background: #f7f9ff;
			border: 1px dashed #c5d1f4;
		}

		.support-roster-chips:empty::before {
			content: "Aucun destinataire ajouté pour le moment.";
			color: #8790b5;
			font-size: 12px;
			font-style: italic;
		}

		.support-roster-chip {
			display: inline-flex;
			align-items: center;
			gap: 6px;
			padding: 5px 8px 5px 10px;
			border-radius: 999px;
			background: #e8efff;
			border: 1px solid #b9c8f5;
			color: #1c2c5f;
			font-size: 12.5px;
			font-weight: 600;
			max-width: 100%;
		}

		.support-roster-chip .chip-label {
			overflow: hidden;
			text-overflow: ellipsis;
			white-space: nowrap;
			max-width: 220px;
		}

		.support-roster-chip .chip-remove {
			border: none;
			background: transparent;
			color: #4a5fb1;
			cursor: pointer;
			font-size: 14px;
			line-height: 1;
			padding: 0 2px;
		}

		.support-roster-chip .chip-remove:hover {
			color: #b91c1c;
		}

		.support-roster-empty {
			padding: 12px;
			background: #f5f7ff;
			color: #5e6c92;
			border-radius: 12px;
			font-size: 13px;
			text-align: center;
		}

		.support-roster-add {
			margin-top: 8px;
			padding: 9px 12px;
			border-radius: 12px;
			border: 1px dashed #9aa6d9;
			background: #fff;
			color: #273464;
			font-size: 13px;
			font-weight: 600;
			cursor: pointer;
			transition: border-color .2s ease, box-shadow .2s ease, transform .15s ease;
		}

		.support-roster-add:hover {
			border-color: #6d8aff;
			box-shadow: 0 6px 18px rgba(109, 138, 255, .18);
			transform: translateY(-1px);
		}

		.support-roster-subject {
			width: 100%;
			margin-top: 8px;
			margin-bottom: 6px;
			padding: 10px 12px;
			border-radius: 12px;
			border: 1px solid #ccd5f5;
			background: #f7f9ff;
			font-size: 13px;
			color: #1f2a54;
			transition: border-color .2s ease, box-shadow .2s ease;
		}

		.support-roster-subject:focus {
			border-color: #7aa2ff;
			outline: none;
			box-shadow: 0 0 0 4px #7aa2ff33;
			background: #fff;
		}

		.support-roster-label {
			display: block;
			margin-top: 12px;
			margin-bottom: 4px;
			font-size: 12px;
			color: #54619a;
			font-weight: 600;
			letter-spacing: .02em;
		}

		.support-roster-item {
			display: flex;
			align-items: center;
			justify-content: space-between;
			gap: 8px;
			padding: 8px 10px;
			border-radius: 12px;
			border: 1px solid #d5def7;
			cursor: pointer;
			background: #f9fbff;
			font-size: 13px;
			color: #2d3c72;
		}

		.support-roster-item input {
			margin-right: 6px
		}

		.support-roster-item.selected {
			border-color: #6d8aff;
			background: #eef2ff;
		}

		.support-roster-item.custom {
			border-style: dashed;
			border-color: #b5c2f2;
			background: #f1f4ff;
		}

		.support-roster-item.custom.selected {
			border-style: solid;
			border-color: #6d8aff;
		}

		.support-roster-submit {
			padding: 11px 16px;
			border-radius: 12px;
			border: 1px solid #6d8aff;
			background: #6d8aff;
			color: #fff;
			font-weight: 700;
			cursor: pointer;
		}

		@media (max-width:900px) {
			.support-chat-shell { margin: 0 16px }
			.support-chat-columns { grid-template-columns: 260px minmax(0,1fr) }
		}
		@media (max-width:720px) {
			.support-chat-shell { width: 95vw; margin: 0; height: calc(100vh - 48px); border-radius: 20px }
			.support-chat-columns { grid-template-columns: 1fr; grid-template-rows: auto minmax(0,1fr) }
			.support-thread-pane { border-right: 0; border-bottom: 1px solid #e1e7fb; max-height: 180px }
			.support-message { max-width: 85% }
			.support-roster { position: fixed; right: 50%; top: auto; bottom: 32px; transform: translate(50%, 16px) scale(.96); width: min(420px, 92vw) }
			.support-roster.show { transform: translate(50%, 0) scale(1) }
			.support-notif { right: 16px; bottom: 16px }
		}
		@media (max-width:540px) {
			.support-chat-shell { width: 100vw; height: 100vh; margin: 0; border-radius: 0 }
			.support-chat-header { padding: 14px 16px }
			.support-chat-columns { grid-template-columns: 1fr; grid-template-rows: auto minmax(0,1fr) }
			.support-thread-pane { max-height: 160px }
			.support-message { max-width: 90% }
			.support-compose { padding: 10px 12px }
			.support-notif { right: 12px; bottom: 12px }
		}

		@media (max-width:1000px) {
			.reveal-inner {
				grid-template-columns: 1fr;
				gap: 12px
			}

			.who {
				font-weight: 700
			}
		}

		/* Animation du loader */
		@keyframes spin {
			0% {
				transform: rotate(0deg);
			}

			100% {
				transform: rotate(360deg);
			}
		}

		@keyframes diagFade {
			from {
				opacity: 0;
				transform: translateY(-6px);
			}

			to {
				opacity: 1;
				transform: translateY(0);
			}
		}

		/* ========== MOBILE OPTIMIZATIONS - COMPLETE REWRITE ========== */
		/* iPhone and mobile devices - aggressive overrides */
		@media screen and (max-width: 768px) {
			/* === GLOBAL MOBILE === */
			html, body {
				font-size: 14px;
				overflow-x: hidden;
				-webkit-text-size-adjust: 100%;
			}
			
			* {
				-webkit-tap-highlight-color: rgba(100, 130, 200, 0.3);
			}
			
			/* === TOPBAR MOBILE === */
			.topbar {
				position: fixed !important;
				top: 0;
				left: 0;
				right: 0;
				z-index: 1000;
			}
			
			.topbar-inner {
				padding: 10px 12px !important;
				gap: 8px !important;
				grid-template-columns: 1fr auto !important;
				max-width: 100% !important;
			}
			
			.who {
				font-size: 13px !important;
				max-width: 200px;
				overflow: hidden;
				text-overflow: ellipsis;
				white-space: nowrap;
			}
			
			.ticker, .prelogin, .vpane {
				display: none !important;
			}
			
			.actions {
				display: none !important;
			}
			
			/* Body padding for fixed topbar */
			body {
				padding-top: 56px !important;
			}
			
			/* === HERO / LOGIN SECTION === */
			.hero {
				padding: 20px 12px !important;
				min-height: auto !important;
			}
			
			.logoTop {
				max-width: 200px !important;
				margin: 0 auto 16px !important;
			}
			
			.logo-flip-container {
				max-width: 180px !important;
				margin: 0 auto !important;
			}
			
			/* Login card */
			.card, #auth {
				width: calc(100vw - 24px) !important;
				max-width: 400px !important;
				margin: 0 auto !important;
				padding: 24px 20px !important;
				border-radius: 20px !important;
			}
			
			.field {
				margin-bottom: 18px !important;
			}
			
			.field label {
				font-size: 14px !important;
				margin-bottom: 8px !important;
				display: block !important;
			}
			
			.input, input[type="text"], input[type="password"], input[type="email"] {
				font-size: 16px !important; /* CRITICAL: Prevents iOS zoom */
				padding: 16px 14px !important;
				min-height: 52px !important;
				border-radius: 12px !important;
				width: 100% !important;
				box-sizing: border-box !important;
			}
			
			.btn, button[type="submit"] {
				font-size: 16px !important;
				padding: 16px 24px !important;
				min-height: 52px !important;
				width: 100% !important;
				border-radius: 12px !important;
				margin-top: 8px !important;
			}
			
			.row {
				flex-direction: column !important;
				gap: 12px !important;
			}
			
			.hint {
				font-size: 14px !important;
			}
			
			/* === APPS SECTION === */
			.apps-section, #appsSection {
				padding: 12px 8px !important;
			}
			
			.apps-controls {
				width: 100% !important;
				padding: 0 8px !important;
				margin-bottom: 12px !important;
				flex-direction: column !important;
				gap: 10px !important;
			}
			
			.apps-controls-main {
				width: 100% !important;
			}
			
			.search-card {
				border-radius: 14px !important;
				width: 100% !important;
			}
			
			.search-card input, #appSearch {
				font-size: 16px !important;
				padding: 14px 16px 14px 44px !important;
				min-height: 50px !important;
			}
			
			/* Apps grid - 2 columns on mobile */
			.apps-grid {
				display: grid !important;
				grid-template-columns: repeat(2, 1fr) !important;
				gap: 12px !important;
				padding: 8px !important;
				width: 100% !important;
			}
			
			/* App cards */
			.app {
				width: 100% !important;
				aspect-ratio: 1/1 !important;
				border-radius: 16px !important;
				min-height: 120px !important;
			}
			
			.app-label {
				font-size: 11px !important;
				padding: 8px 6px !important;
				line-height: 1.2 !important;
			}
			
			.app .logo-wrap img {
				max-width: 70% !important;
				max-height: 70% !important;
			}
			
			/* Info button always visible */
			.info-btn {
				opacity: 1 !important;
				width: 36px !important;
				height: 36px !important;
				font-size: 16px !important;
			}
			
			/* === FOLDERS === */
			.app.folder-card {
				aspect-ratio: auto !important;
				min-height: auto !important;
			}
			
			.app.folder-card.folder-expanded {
				grid-column: 1 / -1 !important;
				padding: 16px !important;
			}
			
			.folder-expanded-grid {
				grid-template-columns: repeat(2, 1fr) !important;
				gap: 10px !important;
			}
			
			.folder-name-big {
				font-size: 18px !important;
			}
			
			/* === MODALS === */
			.modal,
			.impersonate-modal,
			.custom-card-modal,
			.legal-modal,
			.reveal,
			.remote-folder-modal {
				position: fixed !important;
				top: 0 !important;
				left: 0 !important;
				right: 0 !important;
				bottom: 0 !important;
				width: 100vw !important;
				max-width: 100vw !important;
				height: 100vh !important;
				max-height: 100vh !important;
				border-radius: 0 !important;
				margin: 0 !important;
				overflow-y: auto !important;
				-webkit-overflow-scrolling: touch !important;
			}
			
			.modal-content, .impersonate-list {
				max-height: calc(100vh - 120px) !important;
				overflow-y: auto !important;
			}
			
			/* === CONTEXT MENU === */
			.context-menu {
				position: fixed !important;
				bottom: 0 !important;
				left: 0 !important;
				right: 0 !important;
				top: auto !important;
				max-width: 100vw !important;
				border-radius: 20px 20px 0 0 !important;
				padding-bottom: 30px !important;
			}
			
			.context-menu-item {
				padding: 16px 20px !important;
				font-size: 15px !important;
				min-height: 52px !important;
			}
			
			/* === REVEAL PANEL === */
			.reveal {
				width: 100vw !important;
				max-width: 100vw !important;
				padding: 20px !important;
			}
			
			.rev-title {
				font-size: 20px !important;
			}
			
			.rev-desc {
				font-size: 14px !important;
			}
			
			/* === MENU DROPDOWN === */
			.menu, .menu-dropdown, #appsMenu {
				position: fixed !important;
				bottom: 0 !important;
				left: 0 !important;
				right: 0 !important;
				top: auto !important;
				max-width: 100vw !important;
				max-height: 70vh !important;
				border-radius: 20px 20px 0 0 !important;
				padding: 20px !important;
				padding-bottom: 40px !important;
			}
			
			.menu-toggle, .menu-item {
				padding: 14px 16px !important;
				font-size: 15px !important;
				min-height: 50px !important;
			}
			
			/* === MORE APPS PANEL === */
			.more-apps-shell {
				flex-direction: column !important;
			}
			
			.more-apps-toggle {
				width: 100% !important;
				height: 48px !important;
				writing-mode: horizontal-tb !important;
			}
			
			.more-apps-panel {
				width: 100% !important;
				max-width: 100% !important;
			}
			
			/* === FOOTER === */
			.footer {
				padding: 20px 12px !important;
			}
			
			.footer-inner {
				flex-direction: column !important;
				gap: 16px !important;
				text-align: center !important;
			}
			
			/* === SCROLLBARS === */
			::-webkit-scrollbar {
				width: 4px !important;
				height: 4px !important;
			}
		}

		/* === SMALL PHONES (iPhone SE, iPhone Mini) === */
		@media screen and (max-width: 375px) {
			.who {
				font-size: 11px !important;
				max-width: 140px !important;
			}
			
			.apps-grid {
				gap: 8px !important;
			}
			
			.app {
				min-height: 100px !important;
			}
			
			.app-label {
				font-size: 10px !important;
				padding: 6px 4px !important;
			}
			
			.card, #auth {
				padding: 20px 16px !important;
			}
			
			.logoTop {
				max-width: 160px !important;
			}
		}

		/* === LANDSCAPE MODE === */
		@media screen and (max-height: 500px) and (orientation: landscape) {
			body {
				padding-top: 44px !important;
			}
			
			.topbar-inner {
				padding: 6px 12px !important;
			}
			
			.hero {
				padding: 12px !important;
			}
			
			.logoTop {
				max-width: 100px !important;
				margin-bottom: 8px !important;
			}
			
			.card, #auth {
				padding: 16px !important;
			}
			
			.apps-grid {
				grid-template-columns: repeat(4, 1fr) !important;
			}
		}

		/* === TOUCH DEVICE INTERACTIONS === */
		@media (hover: none) and (pointer: coarse) {
			/* Disable hover effects */
			.app:hover {
				transform: none !important;
				box-shadow: 0 1px 5px rgba(20, 40, 100, .08) !important;
			}
			
			.app:active {
				transform: scale(0.95) !important;
				transition: transform 0.1s ease !important;
			}
			
			.btn:hover {
				transform: none !important;
			}
			
			.btn:active {
				transform: scale(0.98) !important;
				opacity: 0.9 !important;
			}
			
			.logout:hover, .admin-btn:hover {
				transform: none !important;
			}
			
			.menu-toggle:hover, .menu-item:hover {
				background: transparent !important;
			}
			
			.menu-toggle:active, .menu-item:active {
				background: rgba(99, 102, 241, 0.1) !important;
			}
			
			/* Always show info buttons on touch */
			.info-btn {
				opacity: 1 !important;
			}
		}

		/* === SAFE AREA FOR NOTCHED PHONES === */
		@supports (padding: env(safe-area-inset-top)) {
			.topbar {
				padding-top: env(safe-area-inset-top) !important;
			}
			
			body {
				padding-left: env(safe-area-inset-left) !important;
				padding-right: env(safe-area-inset-right) !important;
			}
			
			.context-menu, .menu-dropdown, #appsMenu {
				padding-bottom: calc(30px + env(safe-area-inset-bottom)) !important;
			}
			
			.footer {
				padding-bottom: calc(20px + env(safe-area-inset-bottom)) !important;
			}
		}

		/* Mobile hamburger menu */
		.mobile-menu-btn {
			display: none;
			width: 44px;
			height: 44px;
			padding: 10px;
			border: none;
			background: transparent;
			cursor: pointer;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			gap: 5px;
		}
		
		.mobile-menu-btn span {
			display: block;
			width: 22px;
			height: 2px;
			background: #22315f;
			border-radius: 2px;
			transition: transform 0.3s ease, opacity 0.3s ease;
		}
		
		.mobile-menu-btn.active span:nth-child(1) {
			transform: rotate(45deg) translate(5px, 5px);
		}
		
		.mobile-menu-btn.active span:nth-child(2) {
			opacity: 0;
		}
		
		.mobile-menu-btn.active span:nth-child(3) {
			transform: rotate(-45deg) translate(5px, -5px);
		}
		
		.mobile-nav {
			display: none;
			position: fixed;
			top: 56px;
			left: 0;
			right: 0;
			background: rgba(255, 255, 255, 0.98);
			backdrop-filter: blur(10px);
			border-bottom: 1px solid var(--barLine);
			padding: 16px;
			z-index: 99;
			flex-direction: column;
			gap: 12px;
			box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
		}
		
		.mobile-nav.show {
			display: flex;
		}
		
		.mobile-nav a,
		.mobile-nav button {
			display: flex;
			align-items: center;
			justify-content: center;
			gap: 8px;
			width: 100%;
			padding: 14px 16px;
			border-radius: 12px;
			font-size: 15px;
			font-weight: 600;
			text-decoration: none;
			border: 1px solid #dbe2f3;
			background: #fff;
			color: #22315f;
			cursor: pointer;
		}
		
		.mobile-nav a:hover,
		.mobile-nav button:hover {
			background: #f8faff;
		}
		
		.mobile-nav .admin-link {
			background: #dc2626;
			border-color: #dc2626;
			color: #fff;
		}
		
		@media (max-width: 768px) {
			.mobile-menu-btn {
				display: flex;
			}
			
			.actions {
				display: none !important;
			}
			
			.mobile-nav {
				top: 56px;
			}
		}

		/* === DÉCOUVRIR DES APPS — edge trigger + volet droit + modal ============ */
		/* === ASSISTANT IA — barre verticale full-height + volet chat ===========
		   Pattern repris de CollabProd : barre fine sur toute la hauteur,
		   cliquable pour ouvrir le panneau. Pas de texte vertical, juste une
		   icône qui se révèle au hover. */
		.aiassist-edge {
			position: fixed; left: 0; top: 0; bottom: 0;
			width: 22px;
			z-index: 1100;
			background: linear-gradient(180deg, #0f766e 0%, #6d28d9 100%);
			cursor: pointer; user-select: none;
			border: none; padding: 0;
			box-shadow: 4px 0 20px rgba(15, 118, 110, 0.18);
			transition: width 0.25s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.25s ease, opacity .2s;
			display: block;
			overflow: hidden;
		}
		.aiassist-edge .aiassist-edge-icon,
		.aiassist-edge .aiassist-edge-label { display: none; }
		.aiassist-edge:hover {
			width: 32px;
			box-shadow: 6px 0 28px rgba(15, 118, 110, 0.4);
		}
		body.aiassist-open .aiassist-edge {
			transform: translateX(min(420px, 92vw));
			opacity: 0.92; pointer-events: none;
		}
		.aiassist-panel {
			position: fixed; top: 0; left: 0; bottom: 0;
			width: min(420px, 92vw);
			background: #ffffff;
			border-right: 1px solid rgba(15, 23, 42, 0.08);
			box-shadow: 18px 0 38px rgba(15, 23, 42, 0.18);
			transform: translateX(-100%);
			transition: transform 0.28s cubic-bezier(0.4, 0, 0.2, 1);
			z-index: 1050; display: flex; flex-direction: column;
		}
		body.aiassist-open .aiassist-panel { transform: translateX(0); }
		.aiassist-header {
			padding: 16px 18px 12px; border-bottom: 1px solid #e5e7eb;
			display: flex; align-items: center; gap: 10px;
			background: linear-gradient(135deg, #ecfdf5 0%, #faf5ff 100%);
		}
		.aiassist-header h2 { margin: 0; font-size: 16px; color: #064e3b; flex: 1; }
		.aiassist-header .aiassist-close {
			background: transparent; border: none; font-size: 22px; color: #475569;
			cursor: pointer; line-height: 1;
		}
		.aiassist-messages {
			flex: 1; overflow-y: auto; padding: 14px 14px 20px;
			display: flex; flex-direction: column; gap: 10px;
			scrollbar-width: thin;
		}
		.aiassist-msg {
			max-width: 86%; padding: 9px 14px;
			border-radius: 14px; font-size: 13.5px; line-height: 1.45;
			white-space: pre-wrap; word-wrap: break-word;
		}
		.aiassist-msg.bot {
			background: #ecfdf5; color: #064e3b;
			border: 1px solid #a7f3d0;
			align-self: flex-start; border-bottom-left-radius: 4px;
		}
		.aiassist-msg.user {
			background: linear-gradient(135deg, #2563eb, #1d4ed8); color: #fff;
			align-self: flex-end; border-bottom-right-radius: 4px;
		}
		.aiassist-msg.bot.typing { font-style: italic; opacity: 0.7; }
		.aiassist-msg .meta {
			display: block; font-size: 10px; opacity: 0.6; margin-top: 3px;
			letter-spacing: 0.04em; text-transform: uppercase;
		}
		.aiassist-quickactions {
			display: flex; flex-wrap: wrap; gap: 6px;
			padding: 0 14px 8px;
		}
		.aiassist-quickaction {
			padding: 5px 10px; border-radius: 999px;
			background: #f1f5f9; border: 1px solid #e5e7eb;
			color: #334155; font-size: 11px; cursor: pointer;
			transition: background 0.12s, border-color 0.12s;
		}
		.aiassist-quickaction:hover { background: #e0e7ff; border-color: #93c5fd; }
		.aiassist-input-row {
			border-top: 1px solid #e5e7eb;
			padding: 10px 12px 12px;
			display: flex; gap: 8px; align-items: flex-end;
			background: #fafafa;
		}
		.aiassist-input-row textarea {
			flex: 1; resize: none; min-height: 38px; max-height: 140px;
			padding: 9px 12px; border-radius: 10px;
			border: 1px solid #e5e7eb; background: #fff;
			font: inherit; font-size: 13.5px; line-height: 1.4;
			outline: none;
		}
		.aiassist-input-row textarea:focus { border-color: #2563eb; }
		.aiassist-input-row button {
			padding: 9px 16px; border-radius: 10px; border: none;
			background: linear-gradient(135deg, #0f766e, #1d4ed8);
			color: #fff; font: inherit; font-weight: 700; cursor: pointer;
			transition: opacity 0.12s;
		}
		.aiassist-input-row button:disabled { opacity: 0.5; cursor: not-allowed; }
		.aiassist-banner {
			padding: 8px 14px; font-size: 11.5px; color: #475569;
			background: #f8fafc; border-bottom: 1px solid #e5e7eb;
			line-height: 1.35;
		}

		.discover-edge {
			position: fixed; top: 50%; right: 0; transform: translateY(-50%);
			z-index: 1100;
			/* Caché par défaut ; révélé par JS après vérification que le user n'est
			   pas SKYROCK (les comptes SKYROCK ne voient pas le volet Découvrir). */
			display: none;
			display: flex; align-items: center; gap: 8px;
			padding: 14px 10px 14px 12px;
			background: linear-gradient(135deg, #1d4ed8, #6d28d9);
			color: #fff; font-weight: 700; letter-spacing: 0.04em;
			border-radius: 12px 0 0 12px;
			cursor: pointer; user-select: none;
			box-shadow: -6px 6px 22px rgba(29, 78, 216, 0.35);
			writing-mode: vertical-rl; text-orientation: mixed;
			transition: transform 0.25s ease, box-shadow 0.25s ease, opacity 0.2s;
		}
		.discover-edge.visible {
			display: flex;
		}
		.discover-edge:hover {
			transform: translateY(-50%) translateX(-4px);
			box-shadow: -8px 8px 26px rgba(29, 78, 216, 0.5);
		}
		.discover-edge .discover-edge-icon { font-size: 14px; }
		body.discover-open .discover-edge { transform: translateY(-50%) translateX(min(440px, 92vw)); opacity: 0.85; }

		.discover-panel {
			position: fixed; top: 0; right: 0; bottom: 0;
			width: min(440px, 92vw);
			background: #ffffff; border-left: 1px solid rgba(15, 23, 42, 0.08);
			box-shadow: -18px 0 38px rgba(15, 23, 42, 0.18);
			transform: translateX(100%); transition: transform 0.28s cubic-bezier(0.4, 0, 0.2, 1);
			/* Très haut z-index : doit dominer cards apps (210), barres d'action, modals
			   custom, ticker, etc. Sinon le drop pendant un drag « grille → volet »
			   est intercepté par un layer intermédiaire. */
			z-index: 9990;
			display: flex; flex-direction: column;
		}
		/* Pendant que le volet est ouvert : edge trigger non-clickable pour ne pas
		   intercepter le drag d'une app vers le volet. */
		body.discover-open .discover-edge { pointer-events: none; }
		/* Pendant qu'on drague une app vers le volet, on neutralise tout ce qui
		   se trouve devant les apps (action-bar absolute, ticker, etc.) pour éviter
		   que ça bloque le hit-test du drop. */
		body.discover-open .discover-panel.discover-drop-target { z-index: 9999; }
		/* Pendant un drag d'app, on désactive le hit-test des éléments qui peuvent
		   masquer le panneau de drop (action-bar du portail, ticker, topbar…) et
		   on garantit que le volet capte bien le dragover/drop. */
		body.app-dragging .skyprod-action-bar,
		body.app-dragging .topbar,
		body.app-dragging .more-apps-shell,
		body.app-dragging .apps-area::before {
			pointer-events: none !important;
		}
		body.app-dragging .discover-panel {
			z-index: 99999 !important;
			pointer-events: auto !important;
		}
		body.app-dragging .discover-panel * { pointer-events: auto; }
		body.discover-open .discover-panel { transform: translateX(0); }
		.discover-header {
			padding: 16px 18px 12px; border-bottom: 1px solid #e5e7eb;
			display: flex; align-items: center; gap: 10px;
			background: linear-gradient(135deg, #eff6ff 0%, #faf5ff 100%);
		}
		.discover-header h2 { margin: 0; font-size: 16px; color: #1e3a8a; flex: 1; }
		.discover-header .discover-close {
			background: transparent; border: none; font-size: 22px; color: #475569;
			cursor: pointer; line-height: 1;
		}
		.discover-search {
			padding: 10px 14px 6px;
			border-bottom: 1px solid #f1f5f9;
		}
		.discover-search input {
			width: 100%; padding: 8px 12px; border-radius: 10px;
			border: 1px solid #e5e7eb; font: inherit; font-size: 13px;
		}
		.discover-list {
			flex: 1; overflow-y: auto; padding: 8px 8px 16px;
			scrollbar-width: thin;
		}
		.discover-row {
			display: grid; grid-template-columns: 38px 1fr auto; gap: 10px;
			align-items: center;
			padding: 8px 10px; border-radius: 10px; cursor: pointer; user-select: none;
			border: 1px solid transparent;
			transition: background 0.12s, border-color 0.12s, transform 0.08s;
		}
		.discover-row:hover { background: #eff6ff; border-color: #bfdbfe; }
		.discover-row:active { transform: scale(0.98); }
		.discover-row[draggable="true"] { cursor: grab; }
		.discover-row.dragging { opacity: 0.5; }
		.discover-row .discover-logo {
			width: 38px; height: 38px; border-radius: 8px; background: #f8fafc;
			display: flex; align-items: center; justify-content: center; overflow: hidden;
			border: 1px solid #e5e7eb;
		}
		.discover-row .discover-logo img { width: 100%; height: 100%; object-fit: contain; padding: 4px; }
		.discover-row .discover-name { font-weight: 600; font-size: 13.5px; color: #0f172a; }
		.discover-row .discover-cat { font-size: 11px; color: #64748b; margin-top: 1px; }
		.discover-row .discover-status {
			font-size: 10px; padding: 2px 8px; border-radius: 999px; font-weight: 700;
			letter-spacing: 0.04em; white-space: nowrap;
		}
		.discover-row .discover-status.accessible { background: #dcfce7; color: #166534; }
		.discover-row .discover-status.locked { background: #fef3c7; color: #92400e; }
		.discover-empty { padding: 30px 14px; text-align: center; color: #94a3b8; font-size: 13px; }
		.discover-section {
			padding: 6px 12px 4px;
			font-size: 11px; text-transform: uppercase; letter-spacing: 0.08em;
			color: #64748b; font-weight: 700; margin-top: 8px;
		}
		.discover-section:first-child { margin-top: 0; }

		/* Modal de présentation d'une app */
		.discover-modal-bg {
			position: fixed; inset: 0; background: rgba(15, 23, 42, 0.45);
			display: none; align-items: center; justify-content: center;
			z-index: 1200; padding: 20px;
		}
		.discover-modal-bg.open { display: flex; }
		.discover-modal {
			background: #fff; border-radius: 18px; max-width: 540px; width: 100%;
			max-height: 88vh; overflow-y: auto;
			box-shadow: 0 32px 80px rgba(15, 23, 42, 0.35);
			animation: discoverIn 0.22s ease-out;
		}
		@keyframes discoverIn { from { opacity: 0; transform: translateY(20px) scale(0.96); } }
		.discover-modal-head {
			padding: 22px 24px 14px;
			background: linear-gradient(135deg, #eff6ff 0%, #faf5ff 100%);
			border-bottom: 1px solid #e5e7eb; border-radius: 18px 18px 0 0;
			display: flex; align-items: flex-start; gap: 14px;
		}
		.discover-modal-head .discover-modal-logo {
			width: 64px; height: 64px; border-radius: 12px;
			background: #fff; border: 1px solid #e5e7eb; padding: 6px;
			display: flex; align-items: center; justify-content: center;
		}
		.discover-modal-head img { width: 100%; height: 100%; object-fit: contain; }
		.discover-modal-head h3 { margin: 0; font-size: 19px; color: #0f172a; }
		.discover-modal-head .discover-modal-cat {
			font-size: 12px; color: #64748b; margin-top: 4px;
		}
		.discover-modal-close {
			margin-left: auto; background: transparent; border: none; color: #475569;
			font-size: 22px; cursor: pointer; line-height: 1;
		}
		.discover-modal-body { padding: 16px 24px 22px; color: #334155; font-size: 14px; line-height: 1.5; }
		.discover-modal-body .discover-desc { margin: 0 0 14px; white-space: pre-wrap; }
		.discover-modal-eligible {
			padding: 12px 14px; border-radius: 10px; background: #f0fdf4;
			border: 1px solid #bbf7d0; color: #166534; font-size: 13px;
		}
		.discover-modal-locked {
			padding: 12px 14px; border-radius: 10px; background: #fffbeb;
			border: 1px solid #fde68a; color: #92400e; font-size: 13px; margin-bottom: 12px;
		}
		.discover-modal-options {
			display: flex; flex-direction: column; gap: 8px; margin-top: 10px;
		}
		.discover-option {
			display: flex; align-items: center; gap: 12px;
			padding: 12px 14px; border: 1px solid #e5e7eb; border-radius: 12px;
			background: #fff; cursor: pointer;
			transition: border-color 0.12s, transform 0.08s;
		}
		.discover-option:hover { border-color: #3b82f6; }
		.discover-option .discover-opt-title { font-weight: 700; color: #0f172a; }
		.discover-option .discover-opt-sub { font-size: 12px; color: #64748b; }
		.discover-option .discover-opt-price {
			margin-left: auto; font-weight: 800; color: #1d4ed8;
		}
		.discover-modal-actions {
			padding: 14px 24px 22px; display: flex; gap: 10px; justify-content: flex-end;
		}
		.discover-btn {
			padding: 10px 18px; border-radius: 10px; border: 1px solid #e5e7eb;
			background: #fff; color: #0f172a; font: inherit; font-weight: 600; cursor: pointer;
		}
		.discover-btn:hover { background: #f1f5f9; }
		.discover-btn.primary {
			background: linear-gradient(135deg, #2563eb, #1d4ed8); color: #fff;
			border-color: #1d4ed8;
		}
		.discover-btn.primary:hover { background: linear-gradient(135deg, #1d4ed8, #1e40af); }
		.discover-btn[disabled] { opacity: 0.5; cursor: not-allowed; }

		/* Drag target highlight sur la zone .apps-grid */
		.apps-grid.discover-drop-target { outline: 3px dashed #2563eb; outline-offset: 4px;
			background: rgba(219, 234, 254, 0.35); border-radius: 18px; }

		/* Highlight du volet quand on drague une app depuis la grille principale */
		.discover-panel.discover-drop-target {
			background: linear-gradient(135deg, #fef2f2 0%, #fff1f2 100%);
			outline: 3px dashed #dc2626; outline-offset: -3px;
		}
		.discover-panel.discover-drop-target::after {
			content: '🗑 Lâche ici pour retirer de ton AppSpace';
			position: absolute; inset: 50% 0 auto 0; transform: translateY(-50%);
			text-align: center; font-weight: 700; color: #b91c1c; font-size: 16px;
			pointer-events: none; background: rgba(255,255,255,0.85); padding: 18px 12px;
			border-top: 1px solid #fecaca; border-bottom: 1px solid #fecaca;
		}
		.apps-grid .app.dragging { opacity: 0.5; transform: scale(0.96); }