@charset "UTF-8";
/*
Fichier .JS
(Version) By sync - Boulette (V7.0.0)
*/

:root{
	--bg:#0f1720;
	--panel:#0b1220;
	--muted:#9aa7b2;
	--accent:#2f9eff;
	--glass: rgba(255,255,255,0.03);
	--radius:14px;
}

html, body{
	height:100%;
	margin:0;
	padding:0;
	font-family:Inter, "Segoe UI", Roboto, Arial, sans-serif;
	background:linear-gradient(180deg,var(--bg),#6666FF 120%);
	color:#e6eef6;
	-webkit-font-smoothing:antialiased;
	-moz-osx-font-smoothing:grayscale;
	-webkit-tap-highlight-color:transparent;
	overflow-x:hidden; /* correction iOS */
}

/* iOS FIX — on conserve tout mais on stabilise */
html, body{
	min-height:100svh; /* priorité iOS stable */
	user-select: none;
	-webkit-user-select: none;
	-ms-user-select: none;
	overscroll-behavior:none; /* bloque le voile */
}

body{
	display:flex;
	flex-direction:column;
	-webkit-overflow-scrolling:touch;
	padding:15px 0; /* remplace visuellement le margin iOS */
}

footer{
	margin-top:auto;
}

.container{
	max-width:1100px;
	margin-left:auto;
	margin-right:auto; /* suppression implicite du margin vertical */
	padding:20px;
	display:flex;
	flex-direction:column;
	gap:18px;
}

.header{
	display:flex;
	justify-content:space-between;
	align-items:center;
	gap:12px;
	padding:10px 14px;
	background:linear-gradient(90deg, rgba(255,255,255,0.02), transparent);
	border-radius:12px;
	box-shadow:0 6px 20px rgba(2,6,23,0.6), inset 0 1px 0 rgba(255,255,255,0.02);
}

.title{
	display:flex;
	flex-direction:column;
}

.title h1{
	font-size:18px;
	font-weight:600;
	margin:0;
	letter-spacing:0.2px;
}

.title p{
	margin:0;
	font-size:14px;
	color:var(--muted);
}

.panel{
	background:linear-gradient(180deg,var(--panel), rgba(20,28,38,0.9));
	border-radius:var(--radius);
	padding:18px;
	display:grid;
	grid-template-columns:1fr 340px;
	gap:18px;
	align-items:start;
}

@media (max-width:920px){
	.panel{
		grid-template-columns:1fr;
	}
}

.viewer{
	position:relative;
	border-radius:12px;
	overflow:hidden;
	background:var(--glass);
	display:flex;
	justify-content:center;
	align-items:center;
	min-height:250px;
	width:100%;
	height:350px;
}

video{
	width:100%;
	height:100%;
	object-fit:cover;
	position:absolute;
	top:-9999px;
	left:-9999px;
	opacity:0;
	transform-origin:center;
}

#liveCanvas,
#previewCanvas{
	border-radius:10px;
	display:block;
	width:100%;
	height:100%;
	object-fit:cover;
}

.overlayTopRight{
	position:absolute;
	right:12px;
	top:12px;
	display:flex;
	gap:8px;
	backdrop-filter:blur(6px);
}

.pill{
	background:rgba(0,0,0,0.35);
	border:1px solid rgba(255,255,255,0.04);
	color:var(--muted);
	padding:8px 10px;
	border-radius:999px;
	font-size:13px;
	display:inline-flex;
	align-items:center;
	gap:8px;
}

.controls{
	padding:12px;
	display:flex;
	flex-direction:column;
	gap:12px;
}

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

button,
.select{
	cursor:pointer;
	border:0;
	padding:10px 14px;
	border-radius:10px;
	font-size:13px;
	font-weight:600;
	transition:transform .12s ease, box-shadow .12s ease;
	background:transparent;
	color:var(--muted);
	border:1px solid rgba(255,255,255,0.04);
	backdrop-filter:blur(4px);
}

button:active{
	transform:translateY(1px);
}

button.primary{
	background:linear-gradient(90deg,var(--accent),#1f7be6);
	color:white;
	box-shadow:0 8px 30px rgba(47,158,255,0.12);
	border:1px solid rgba(255,255,255,0.04);
}

.row{
	display:flex;
	gap:10px;
	align-items:center;
}

.switch{
	display:inline-flex;
	align-items:center;
	gap:8px;
	font-size:12px;
	color:var(--muted);
}

.preview{
	display:flex;
	flex-direction:column;
	gap:10px;
	align-items:center;
}

.thumb{
	position:relative;
	width:100%;
	max-width:300px;
	height:185px;
	border-radius:10px;
	overflow:hidden;
	background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(0,0,0,0.15));
	display:flex;
	justify-content:center;
	align-items:center;
}

.thumb canvas{
	width:110%;
	height:100%;
	object-fit:cover;
	display:block;
}

.hint{
	font-size:13px;
	color:var(--muted);
	line-height:1.25;
	font-weight:bold;
	font-style:italic;
}

.footerNote{
	font-size:10px;
	color:var(--muted);
	text-align:center;
	padding-bottom:env(safe-area-inset-bottom); /* clé iOS */
}

.small{
	font-size:13px;
	color:var(--muted);
}

#captureCanvas{
	object-fit:cover;
	display:block;
	transform-origin:center;
}

/* Bordure rouge par défaut */
.select{
	border:1px solid red;
}

/* Quand l'élément est sélectionné */
.select:focus{
	outline:1px solid red;
	outline-offset:1px;
	border-color:blue;
}

/* FIN CSS */