/* assets/css/feed.css */

#feed footer { margin-top:10px; }

* {box-sizing: border-box}

:root { --range-w:80%; --range-h:36px; --range-track-h:10px; --range-thumb:56px; --range-fill:rgba(255,255,255,.85); --range-rest:rgba(255,255,255,.14); --range-border:rgba(255,255,255,.18); --range-shadow:0 10px 26px rgba(0,0,0,.45); }

.range-wrap { position:relative; width:var(--range-w); height:var(--range-h); }
.range-wrap input[type="range"] { position:relative; z-index:2; -webkit-appearance:none; appearance:none; width:100%; height:var(--range-h); background:transparent; padding:0; margin:0; -webkit-tap-highlight-color:transparent; --val:50%; pointer-events:none; }
.range-wrap input[type="range"]:focus { outline:none; }
.range-wrap input[type="range"]::-webkit-slider-runnable-track { height:var(--range-track-h); border-radius:999px; background:var(--range-rest); background-image:linear-gradient(90deg,var(--range-fill),var(--range-fill)); background-size:var(--val) 100%; background-repeat:no-repeat; border:0; box-shadow:inset 0 0 0 1px var(--range-border); overflow:hidden; pointer-events:none; }
.range-wrap input[type="range"]::-moz-range-track { height:var(--range-track-h); border-radius:999px; background:var(--range-rest); border:1px solid var(--range-border); pointer-events:none; }
.range-wrap input[type="range"]::-moz-range-progress { height:var(--range-track-h); border-radius:999px; background:var(--range-fill); pointer-events:none; }
.range-wrap input[type="range"]::-webkit-slider-thumb { -webkit-appearance:none; appearance:none; width:var(--range-thumb); height:var(--range-thumb); border-radius:999px; background:transparent; border:0; opacity:0; margin-top:calc((var(--range-track-h) - var(--range-thumb))/2); box-shadow:none; pointer-events:auto; touch-action:none; }
.range-wrap input[type="range"]::-moz-range-thumb { width:var(--range-thumb); height:var(--range-thumb); border-radius:999px; background:transparent; border:0; opacity:0; box-shadow:none; pointer-events:auto; touch-action:none; }
.range-thumb { position:absolute; top:50%; left:0; z-index:3; width:var(--range-thumb); height:var(--range-thumb); transform:translate3d(0,-50%,0); object-fit:contain; filter:drop-shadow(var(--range-shadow)); pointer-events:none; }

html { height:100dvh; overflow:hidden; }
body { height:100dvh; overflow:hidden; margin:0; font-family:Arial,Helvetica,sans-serif; background:#111; color:#fff; }
.wrap { height:100dvh; display:flex; align-items:center; justify-content:center; }
.card { width:100vw; height:100dvh; position:relative; overflow:hidden; }
.layout { height:100%; display:flex; flex-direction:column; }
.left { display:flex; align-items:center; justify-content:center; }
.imgbox { position:relative; width:100%; max-width:420px; aspect-ratio:3/4; border-radius:28px; overflow:hidden; }
.imgbox img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center; transform:translate3d(0,0,0); will-change:transform; }
.right { display:flex; align-items:center; justify-content:center; padding:0 16px; }
.controls { width:100%; max-width:420px; display:grid; grid-template-columns:1fr; gap:12px; margin-top:12px }
.row { position:relative; display:flex; align-items:center; justify-content:center; }

#notations { position:relative; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:10px; min-height:120px; pointer-events:none; }
.score-badge { display:inline-flex; align-items:center; justify-content:center; gap:8px; white-space:nowrap; line-height:1; font-variant-numeric:tabular-nums; background:rgba(0,0,0,.6); border-radius:100px; padding:10px 16px; font-size:34px; opacity:0; pointer-events:none; transition:opacity .12s ease; }
.score-badge.is-show { opacity:1; }

.score-consensus { position:relative; display:inline-flex; align-items:center; justify-content:center; gap:4px; white-space:nowrap; line-height:1; font-variant-numeric:tabular-nums; background:rgba(0,0,0,.6); border-radius:100px; padding:6px 10px; font-size:13px; overflow:hidden; opacity:0; transform:translateY(4px); pointer-events:none; transition:opacity 200ms ease, transform 200ms ease; }
.score-consensus.is-visible { opacity:1; transform:translateY(0); pointer-events:auto; }

#nextbar { position:absolute; inset:0; border-radius:inherit; overflow:hidden; z-index:-1; opacity:0; transform:translateY(4px); pointer-events:none; transition:opacity 150ms ease, transform 150ms ease; }
#nextbar.is-visible { opacity:1; transform:translateY(0); }
#nextbarFill { width:100%; height:100%; background:rgba(0,0,0,1); transform:scaleX(0); transform-origin:left center; border-radius:100px 0 0 100px; }
.score-consensus > *:not(#nextbar) { position:relative; z-index:2; }

/* Upload (sans style de bouton : géré par btn.css) */
.upload-row { gap:10px; }
#uploadInput.is-locked { opacity:.45; pointer-events:none; }
#uploadInput.is-locked::before { content:""; width:14px; height:14px; background:url("/assets/lock_outline_24dp_FFF.svg") no-repeat center/contain; }
.upload-hint { font-size:12px; opacity:.75; }

@media (max-width:1023px) {
	.imgbox { margin-top:5vw !important; }
	#notations { margin-top:-150px; gap:8px; min-height:110px; }
	#nextbar { width:140px; }
	.left { aspect-ratio:3/4; width:calc(100% - 10vw); margin:0 auto; }
	input[type="range"] { height:54px; }
	input[type="range"]::-webkit-slider-thumb { width:34px; height:34px; margin-top:-13px; }
	input[type="range"]::-moz-range-thumb { width:34px; height:34px; }
}

@media (min-width:1024px) {
	#nextbarFill { background:rgba(255,255,255,.25); }
	.card { width:min(1400px,96vw); height:100dvh; border-radius:16px; }
	.layout { flex-direction:row; }
	.left { width:50%; aspect-ratio:auto; }
	.right { width:50%; background:transparent; padding:24px; }
	.controls { max-width:520px; }
	.imgbox { max-width:520px; }
	.score-badge { opacity:1; }
}

.range-wrap.is-fire { filter:drop-shadow(0 0 12px rgba(255,120,0,.8)); }
.range-wrap.is-fire .range-thumb { animation:firePulse 600ms ease-in-out infinite alternate; }

@keyframes firePulse {
	from { transform:translate3d(0,-50%,0) scale(1); }
	to { transform:translate3d(0,-50%,0) scale(1.08); }
}

/* Share overlay (sans style de bouton : géré par btn.css) */
.share-overlay { position:fixed; inset:0; width:100vw; height:100vh; z-index:20000; display:flex; align-items:center; justify-content:center; background:#111; padding:26px; }
.share-overlay-inner { width:100%; max-width:560px; text-align:center; display:flex; flex-direction:column; gap:14px; margin-top:-48px;}
.share-overlay-title { font-size:26px; font-weight:900; letter-spacing:.2px; }
.share-overlay-title small { position:relative; top:5px; font-size:16px; }
.share-overlay-text { line-height:1.4; opacity:.62; font-size:16px; font-style:italic; word-break:break-word; }
.share-overlay-cta { margin-top:6px; align-self:center; }
.share-overlay-sign { position:absolute; left:50%; bottom:36px; transform:translateX(-50%); opacity:.7; font-size:13px; letter-spacing:.2px; white-space:nowrap; }
.share-overlay-sign a {color:#fff;text-decoration:none}
.share-overlay .share-overlay-actions { display:flex; gap:10px; flex-wrap:wrap; justify-content:center; }

@media (max-width:520px) {
	.share-overlay .btn, .share-overlay a.btn { width:80%; max-width:360px; }
}
/* CONTENEUR */
.imgbox {
	position: relative;
	overflow: hidden;
	/* fond gris animé */
	background: linear-gradient(
		100deg,
		rgba(255,255,255,0) 40%,
		rgba(255,255,255,.05) 50%,
		rgba(255,255,255,0) 60%
	);
	background-size: 200% 100%;
	animation: imgbox_shimmer 7s ease-in-out infinite;
}


@keyframes imgbox_shimmer {
	0%   { background-position: 300% 0; }
	100% { background-position: -300% 0; }
}

.range-wrap {width:70%}
.range-wrap::before, .range-wrap::after { position:absolute; top:50%; transform:translateY(-40%);; 
font-size:12px; opacity:.3; font-variant-numeric:tabular-nums; line-height:1; user-select:none; pointer-events:none; }
.range-wrap::before { content:"0"; left:-16px; }
.range-wrap::after { content:"100"; right:-28px; }
.range-wrap input[type="range"] {width:100%}

/* iPhone/Safari : empêcher le bouton (a.btn) de “prendre” une largeur chelou */
.upload-row { display:flex; align-items:center; justify-content:center; gap:10px; flex-wrap:wrap; }
.upload-row #uploadInput { flex:0 0 auto; width:auto !important; min-width:0; -webkit-appearance:none; }
.upload-row #uploadHint { flex:0 0 auto; }

/* si votre .btn a un width:100% en mobile, ça le neutralise uniquement ici */
.upload-row a.btn { width:auto !important; display:inline-flex; }

/* =========================
   YOUR RESULT – TITRE + 2 CARDS
   ========================= */

#yourResult {
	margin: 18px auto 0;
	max-width: 420px;
	text-align: center;
	color: #fff;
}

#yourResult .yr-title {
	font-size: 13px;
	letter-spacing: .04em;
	text-transform: uppercase;
	opacity: .65;
	margin-bottom: 12px;
}

/* grid */
#yourResult .yr-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 14px;
}

/* card */
#yourResult .yr-card {
	padding: 16px 14px 14px;

	background:
		linear-gradient(135deg, rgba(255,255,255,0.08), rgba(255,255,255,0)),
		#141414;

	border-radius: 16px;
	border: 1px solid rgba(255,255,255,0.08);

	box-shadow:
		0 10px 28px rgba(0,0,0,0.45),
		inset 0 1px 0 rgba(255,255,255,0.05);

	backdrop-filter: blur(6px);
	-webkit-backdrop-filter: blur(6px);

	animation: yrCardIn 420ms cubic-bezier(.22,1,.36,1);
}

@keyframes yrCardIn {
	from { opacity: 0; transform: translateY(8px) scale(.98); }
	to { opacity: 1; transform: translateY(0) scale(1); }
}

#yourResult .yr-card-title {
	font-size: 12px;
	letter-spacing: .04em;
	text-transform: uppercase;
	opacity: .7;
	margin-bottom: 10px;
}

#yourResult .yr-card-value {
	display: inline-flex;
	align-items: baseline;
	gap: 6px;
}

#yourResult .yr-card-value strong {
	font-size: 30px;
	font-weight: 800;
	line-height: 1;
}

#yourResult .yr-unit {
	font-size: 14px;
	font-weight: 700;
	opacity: .65;
}

/* couleurs */
#yourResult .yr-card--consensus {
	background:
		radial-gradient(120% 120% at 100% 0%, rgba(255,120,120,0.18), transparent 60%),
		linear-gradient(135deg, rgba(255,255,255,0.08), rgba(255,255,255,0)),
		#141414;
}

#yourResult .yr-card--you {
	background:
		radial-gradient(120% 120% at 0% 0%, rgba(180,200,255,0.16), transparent 60%),
		linear-gradient(135deg, rgba(255,255,255,0.08), rgba(255,255,255,0)),
		#141414;
}

#yourConsensusPct { color: #ffb3b3; }
#yourScorePct { color: #ffffff; }

/* phrase de positionnement */
#yourResult .yr-label {
	margin-top: 14px;
	font-size: 15px;
	font-weight: 700;
	line-height: 1.3;

	background: linear-gradient(90deg, #ff2dff, #1c00ff);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}

/* responsive */
@media (max-width: 420px) {
	#yourResult {
		max-width: 100%;
	}
	#yourResult .yr-grid {
		gap: 12px;
	}
	#yourResult .yr-card-value strong {
		font-size: 28px;
	}
}


.range-thumb {
	position: absolute;
	top: 50%;
	left: 0;
	width: 40px;
	height: 40px;
	transform: translate3d(0,-50%,0);
	pointer-events: none;
	border-radius: 100px;

	background: url('/assets/rnage-humb.jpg') center/contain no-repeat;
}


/* =========================
   ROND VERT – DÉJÀ VOTÉ
========================= */

.range-thumb.is-valid {
	display: flex;
	align-items: center;
	justify-content: center;

	width: 40px;
	height: 40px;

	background: #18b46b;
	background-image: none;
	border-radius: 999px;

	color: #fff;
	font-weight: 900;
	font-size: 12px;
	line-height: 1;
}


/* =========================
   COCHE – APRÈS VOTE (TEMPORAIRE)
========================= */

.range-thumb.is-check {
	width: 40px;
	height: 40px;

	background: #18b46b url('/assets/check_24dp_FFF.svg') center/16px 16px no-repeat;
	border-radius: 999px;
}


/* =========================
   MODE FIRE – FLAMME
========================= */

.range-thumb.is-fire {
	display: flex;
	align-items: center;
	justify-content: center;

	width: 52px;
	height: 52px;
	margin-top:-12px;

	background: url('/assets/range-fire.webp') center/contain no-repeat !important;
	border-radius: 0 !important;
}


/* =========================
   TEXTE DANS LE THUMB (COMMUN)
========================= */

.range-thumb .thumb-value {
	font-weight: 900;
	line-height: 1;
	pointer-events: none;
}


/* =========================
   TEXTE – ROND VERT
========================= */

.range-thumb.is-valid .thumb-value {
	color: #fff;
	font-size: 12px;
	transform: none;
}


/* =========================
   TEXTE – FLAMME (AJUSTABLE)
========================= */

.range-thumb.is-fire .thumb-value {
	color: #000;
	font-size: 12px;
	transform: translateY(12px);
}


/* ✅ 1) CSS : il faut que le thumb puisse animer LEFT quand on “snap” */
.range-thumb {
	transition: none;
	will-change: left;
}

.range-wrap.is-dragging .range-thumb {
	transition: none;
}

.range-wrap.is-snapping .range-thumb {
	transition: left 140ms ease;
}