/* ===== CS Feedback Visuel : front ===== */

:root {
	--fv-blue: #2563ff;
	--fv-grey: #6b7280;
	--fv-red: #dc2626;
	--fv-shadow: 0 8px 24px rgba(15, 23, 42, .18);
	--fv-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

/* ---- Boutons flottants ---- */
.fv-fab-wrap {
	position: fixed;
	right: 22px;
	bottom: 22px;
	z-index: 999990;
	display: flex;
	flex-direction: column;
	gap: 10px;
	font-family: var(--fv-font);
}

/* Rondeur et couleurs forcées : Hello Elementor (reset.css) écrase les styles
   des <button> (padding, min-height → ovale) et impose #c36 sur les liens. */
.fv-fab {
	width: 42px !important;
	height: 42px !important;
	min-width: 42px !important;
	min-height: 42px !important;
	max-width: 42px !important;
	max-height: 42px !important;
	padding: 0 !important;
	margin: 0 !important;
	line-height: 1 !important;
	box-sizing: border-box !important;
	aspect-ratio: 1 / 1;
	border-radius: 50% !important;
	border: none !important;
	cursor: pointer;
	background: var(--fv-blue) !important;
	color: #fff !important;
	font-size: 22px;
	line-height: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: var(--fv-shadow);
	transition: transform .15s ease, background .15s ease;
}
.fv-fab:hover { transform: scale(1.07); }
.fv-fab.fv-fab-list { background: #1e293b !important; font-size: 16px; }
.fv-fab.fv-fab-list svg { width: 16px; height: 16px; }
.fv-fab.fv-active { background: var(--fv-red) !important; }
.fv-fab .fv-badge {
	position: absolute;
	top: -5px;
	right: -5px;
	min-width: 17px;
	height: 17px;
	padding: 0 4px;
	border-radius: 9px !important;
	background: var(--fv-red);
	color: #fff;
	font-size: 12px;
	font-weight: 700;
	display: flex;
	align-items: center;
	justify-content: center;
}
.fv-fab { position: relative; }

/* ---- Switch afficher/masquer les points ---- */
.fv-toggle {
	position: relative;
	display: block !important;
	width: 36px !important;
	height: 20px !important;
	margin: 0 auto !important;
	padding: 0 !important;
	cursor: pointer;
}
.fv-toggle-input {
	position: absolute !important;
	opacity: 0 !important;
	width: 100% !important;
	height: 100% !important;
	margin: 0 !important;
	cursor: pointer;
}
.fv-toggle-slider {
	position: absolute;
	inset: 0;
	background: #94a3b8 !important;
	border-radius: 999px !important;
	box-shadow: var(--fv-shadow);
	transition: background .15s ease;
	pointer-events: none;
}
.fv-toggle-slider::before {
	content: '';
	position: absolute;
	width: 16px;
	height: 16px;
	left: 2px;
	top: 2px;
	background: #fff !important;
	border-radius: 50% !important;
	transition: transform .15s ease;
}
.fv-toggle-input:checked + .fv-toggle-slider { background: var(--fv-blue) !important; }
.fv-toggle-input:checked + .fv-toggle-slider::before { transform: translateX(16px); }

/* ---- Mode placement ---- */
body.fv-placing, body.fv-placing * { cursor: crosshair !important; }
.fv-highlight-box {
	position: absolute;
	pointer-events: none;
	z-index: 999985;
	border: 2px solid var(--fv-blue);
	border-radius: 4px;
	background: rgba(37, 99, 255, .08);
	transition: all .06s linear;
}
.fv-select-rect {
	position: absolute;
	pointer-events: none;
	z-index: 999986;
	border: 2px dashed var(--fv-blue);
	border-radius: 4px;
	background: rgba(37, 99, 255, .10);
}

/* ---- Marqueurs (goutte Figma : pointe en haut à gauche, arrondi vers le bas) ---- */
.fv-marker {
	position: absolute;
	z-index: 999980;
	width: 32px;
	height: 32px;
	border-radius: 2px 50% 50% 50%;
	background: var(--fv-blue);
	color: #fff;
	font-family: var(--fv-font);
	font-size: 13px;
	font-weight: 700;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	border: 2px solid #fff;
	box-shadow: var(--fv-shadow);
	transition: transform .12s ease;
}
.fv-marker:hover { transform: scale(1.15); }
.fv-marker.fv-imp-faible { background: var(--fv-grey); }
.fv-marker.fv-imp-urgente { background: var(--fv-red); }
.fv-marker.fv-pulse { animation: fv-pulse 1s ease 3; }
@keyframes fv-pulse {
	0% { box-shadow: 0 0 0 0 rgba(59, 91, 253, .55); }
	70% { box-shadow: 0 0 0 16px rgba(59, 91, 253, 0); }
	100% { box-shadow: 0 0 0 0 rgba(59, 91, 253, 0); }
}

/* ---- Popup de dépôt ---- */
.fv-popup {
	position: absolute;
	z-index: 999995;
	width: 320px;
	background: #fff;
	border-radius: 12px;
	box-shadow: var(--fv-shadow);
	font-family: var(--fv-font);
	font-size: 14px;
	color: #1e293b;
	padding: 16px;
	box-sizing: border-box;
}
.fv-popup * { box-sizing: border-box; font-family: var(--fv-font); }
.fv-popup h4 { margin: 0 0 10px; font-size: 15px; }
.fv-popup .fv-close {
	position: absolute;
	top: 10px;
	right: 12px;
	background: none;
	border: none;
	font-size: 18px;
	cursor: pointer;
	color: #94a3b8;
}
.fv-popup label { display: block; font-size: 12px; font-weight: 600; margin: 10px 0 4px; color: #475569; }
.fv-popup select,
.fv-popup input[type="text"],
.fv-popup textarea {
	width: 100%;
	border: 1px solid #e2e8f0;
	border-radius: 8px;
	padding: 8px 10px;
	font-size: 14px;
	background: #fff;
	color: #1e293b;
}
.fv-popup textarea { min-height: 80px; resize: vertical; }
.fv-popup .fv-hp { position: absolute; left: -9999px; opacity: 0; height: 0; overflow: hidden; }

.fv-popup .fv-actions { display: flex; align-items: center; gap: 10px; margin-top: 14px; }
.fv-attach-btn {
	border: 1px dashed #cbd5e1;
	background: #f8fafc;
	border-radius: 8px;
	width: 38px;
	height: 38px;
	font-size: 17px;
	cursor: pointer;
	color: #475569;
}
.fv-attach-name { font-size: 11px; color: #64748b; max-width: 110px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fv-submit {
	margin-left: auto;
	background: var(--fv-blue);
	color: #fff;
	border: none;
	border-radius: 8px;
	padding: 9px 18px;
	font-size: 14px;
	font-weight: 600;
	cursor: pointer;
}
.fv-submit:disabled { opacity: .55; cursor: wait; }
.fv-error { color: var(--fv-red); font-size: 12px; margin-top: 8px; display: none; }

/* ---- Panneau latéral droit ---- */
.fv-panel {
	position: fixed;
	top: 0;
	right: -400px;
	width: 380px;
	max-width: 92vw;
	height: 100vh;
	z-index: 999992;
	background: #f5f6f8;
	box-shadow: -8px 0 30px rgba(15, 23, 42, .22);
	font-family: var(--fv-font);
	font-size: 14px;
	color: #1e293b;
	display: flex;
	flex-direction: column;
	transition: right .22s ease;
}
.fv-panel.fv-open { right: 0; }
.fv-panel * { box-sizing: border-box; font-family: var(--fv-font); }

.fv-panel-head {
	background: #101828;
	color: #fff;
	padding: 16px 18px;
	display: flex;
	align-items: center;
	justify-content: space-between;
}
.fv-panel-head h3 { margin: 0; font-size: 16px; }
.fv-panel-close { background: none; border: none; color: #fff; font-size: 20px; cursor: pointer; }

.fv-panel-tools { padding: 12px 14px 8px; display: flex; gap: 8px; }
.fv-panel-tools select {
	flex: 1;
	border: 1px solid #e2e8f0;
	border-radius: 8px;
	padding: 7px 8px;
	font-size: 13px;
	background: #fff;
}

.fv-panel-list { flex: 1; overflow-y: auto; padding: 10px 14px 20px; }
.fv-empty { text-align: center; color: #64748b; padding: 30px 10px; }

.fv-card {
	background: #fff;
	border-radius: 12px;
	padding: 14px;
	margin-bottom: 12px;
	box-shadow: 0 1px 3px rgba(15, 23, 42, .07);
	cursor: pointer;
}
.fv-card-top { display: flex; align-items: center; gap: 10px; }
.fv-avatar {
	width: 38px;
	height: 38px;
	min-width: 38px;
	min-height: 38px;
	padding: 0;
	line-height: 1;
	aspect-ratio: 1 / 1;
	box-sizing: border-box;
	border-radius: 50%;
	background: var(--fv-blue);
	color: #fff;
	font-weight: 700;
	font-size: 15px;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
}
.fv-card-top .fv-who { flex: 1; min-width: 0; }
.fv-card-top .fv-who strong { display: block; font-size: 14px; }
.fv-card-top .fv-who em { font-style: normal; color: #94a3b8; font-size: 12px; }
.fv-count {
	background: #eef2f7;
	color: #475569;
	border-radius: 8px;
	padding: 4px 9px;
	font-size: 13px;
	font-weight: 600;
}
.fv-count.fv-has { background: var(--fv-blue); color: #fff; }
.fv-card-text { margin: 8px 0 0; color: #334155; }
.fv-card-tags { display: flex; gap: 6px; margin-top: 8px; flex-wrap: wrap; align-items: center; }
.fv-tag { font-size: 11px; font-weight: 600; padding: 3px 8px; border-radius: 6px; background: #eef2f7; color: #475569; }
.fv-tag.fv-status-resolu { background: #dcfce7; color: #15803d; }
.fv-tag.fv-status-en_cours { background: #fef3c7; color: #b45309; }
.fv-tag.fv-status-refuse { background: #fee2e2; color: #b91c1c; }

.fv-thread { margin-top: 10px; border-top: 1px solid #f1f5f9; padding-top: 10px; display: none; }
.fv-card.fv-expanded .fv-thread { display: block; }
.fv-thread .fv-msg { padding: 8px 10px; border-radius: 8px; background: #f8fafc; margin-bottom: 6px; }
.fv-thread .fv-msg.fv-msg-admin { background: #eef2ff; }
.fv-thread .fv-msg strong { font-size: 12px; }
.fv-thread .fv-msg em { font-style: normal; font-size: 11px; color: #94a3b8; margin-left: 6px; }
.fv-thread .fv-msg p { margin: 3px 0 0; font-size: 13px; }
.fv-thread-form { display: flex; gap: 6px; margin-top: 8px; }
.fv-thread-form input {
	flex: 1;
	border: 1px solid #e2e8f0;
	border-radius: 8px;
	padding: 7px 10px;
	font-size: 13px;
}
.fv-thread-form button {
	background: var(--fv-blue);
	color: #fff;
	border: none;
	border-radius: 8px;
	padding: 0 12px;
	cursor: pointer;
}
.fv-card-links { margin-top: 8px; font-size: 12px; }
.fv-card-links a, .fv-card-links button {
	color: var(--fv-blue);
	background: none;
	border: none;
	padding: 0;
	font-size: 12px;
	cursor: pointer;
	text-decoration: none;
	margin-right: 12px;
}
.fv-card-links .fv-del-own { color: var(--fv-red); }

/* ---- Neutralisation du reset Hello Elementor (#c36 sur les <a>) ----
   Catch-all : tout lien à l'intérieur de n'importe quel conteneur fv-. */
[class^="fv-"] a,
[class*=" fv-"] a,
[class^="fv-"] a:visited,
[class*=" fv-"] a:visited,
[class^="fv-"] a:hover,
[class*=" fv-"] a:hover,
[class^="fv-"] a:focus,
[class*=" fv-"] a:focus,
.fv-card-links button {
	color: var(--fv-blue) !important;
	text-decoration: none;
}
.fv-panel-head h3, .fv-panel-head button { color: #fff !important; }
.fv-marker, .fv-avatar, .fv-count.fv-has, .fv-submit, .fv-thread-form button { color: #fff !important; }

/* Bordures verrouillées : le thème applique aussi sa couleur accent aux bordures des <button>. */
.fv-popup button,
.fv-panel button,
.fv-fab-wrap button {
	border: none !important;
	box-shadow: none !important;
}
.fv-attach-btn { border: 1px dashed #cbd5e1 !important; }
.fv-fab { box-shadow: var(--fv-shadow) !important; }

/* Fonds verrouillés : le thème applique sa couleur accent au background des <button>. */
.fv-submit { background: var(--fv-blue) !important; }
.fv-thread-form button { background: var(--fv-blue) !important; }
.fv-attach-btn { background: #f8fafc !important; color: #475569 !important; }
.fv-popup .fv-close, .fv-panel-close { background: none !important; }
.fv-marker { background: var(--fv-blue) !important; }
.fv-marker.fv-imp-faible { background: var(--fv-grey) !important; }
.fv-marker.fv-imp-urgente { background: var(--fv-red) !important; }
.fv-fab .fv-badge { background: var(--fv-red) !important; color: #fff !important; }
.fv-avatar { background: var(--fv-blue) !important; }
.fv-count.fv-has { background: var(--fv-blue) !important; }
.fv-card-links .fv-del-own { color: var(--fv-red) !important; }
.fv-thread-form button,
.fv-submit,
.fv-panel-close,
.fv-popup .fv-close {
	border-radius: 8px !important;
}
.fv-avatar, .fv-dot { border-radius: 50% !important; }

/* ---- Tailles verrouillées : certains thèmes (accent framboise Elementor/Hello)
   imposent min-height, padding et fond aux <button> et champs de formulaire. ---- */
.fv-panel button,
.fv-popup button,
.fv-panel input,
.fv-panel textarea,
.fv-popup input,
.fv-popup textarea {
	min-height: 0 !important;
	min-width: 0 !important;
	height: auto !important;
	line-height: 1.4 !important;
	font-family: var(--fv-font) !important;
	font-weight: 400 !important;
	text-transform: none !important;
	letter-spacing: normal !important;
	box-sizing: border-box !important;
}

/* Popup : champs pleine largeur, textarea plus grand, boutons compacts, croix dans le coin.
   Spécificité .fv-popup .classe requise pour battre le verrou .fv-popup button ci-dessus. */
.fv-popup select,
.fv-popup input[type="text"],
.fv-popup textarea {
	width: 100% !important;
	max-width: 100% !important;
}
.fv-popup textarea { min-height: 110px !important; }
.fv-popup .fv-submit {
	padding: 8px 16px !important;
	font-size: 13px !important;
	font-weight: 600 !important;
	width: auto !important;
}
.fv-popup .fv-attach-btn {
	width: 34px !important;
	height: 34px !important;
	padding: 0 !important;
	font-size: 15px !important;
	line-height: 1 !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	flex: 0 0 auto !important;
}
.fv-popup .fv-close {
	position: absolute !important;
	top: 8px !important;
	right: 10px !important;
	width: 24px !important;
	height: 24px !important;
	padding: 0 !important;
	margin: 0 !important;
	font-size: 18px !important;
	line-height: 1 !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	background: none !important;
	color: #94a3b8 !important;
}

/* Champ Répondre + bouton envoyer : proportions classiques, même hauteur. */
.fv-thread-form input {
	width: auto !important;
	flex: 1 1 auto !important;
	padding: 7px 10px !important;
	font-size: 13px !important;
	background: #fff !important;
	border: 1px solid #e2e8f0 !important;
	border-radius: 8px !important;
}
.fv-thread-form button {
	flex: 0 0 auto !important;
	padding: 7px 12px !important;
	font-size: 13px !important;
}

/* Liens d'action des cartes : simples liens texte, jamais de fond ni de padding. */
.fv-card-links a,
.fv-card-links button,
.fv-card-links a:hover,
.fv-card-links button:hover,
.fv-card-links a:focus,
.fv-card-links button:focus {
	background: none !important;
	padding: 0 !important;
	margin: 0 12px 0 0 !important;
	font-size: 12px !important;
	display: inline-block !important;
	box-shadow: none !important;
	border: none !important;
	border-radius: 0 !important;
}

@media (max-width: 600px) {
	.fv-popup { width: calc(100vw - 30px); }
}