/* Client Feedback — couche de remarques. Couleurs et polices : variables --cfb-*, avec repli neutre.
 * À redéfinir sur :root pour épouser la charte du site : --cfb-ink, --cfb-bg, --cfb-accent, --cfb-accent-2,
 * --cfb-muted, --cfb-soft, --cfb-font-text. */
.sr-ui { font: 15px/1.45 var(--cfb-font-text, system-ui, sans-serif); color: var(--cfb-ink, #111); }
.sr-ui kbd { display: inline-block; min-width: 20px; padding: 1px 6px; border: 1px solid currentColor; border-radius: 4px; font: 12px/18px var(--cfb-font-text, system-ui, sans-serif); text-align: center; opacity: .85; }
.sr-ui button { font: inherit; cursor: pointer; }

.sr-pill { position: fixed; right: 16px; bottom: 16px; z-index: 100004; display: inline-flex; align-items: center; gap: 10px; min-height: 44px; padding: 0 8px 0 16px; border: 0; border-radius: 999px; background: var(--cfb-accent-2, #596044); color: var(--cfb-bg, #fff); font-size: 14px !important; letter-spacing: .04em; box-shadow: 0 0 0 1px rgba(255, 255, 255, .5); }
.sr-pill:hover, .sr-pill:focus-visible { background: var(--cfb-ink, #111); }
.sr-pill-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--cfb-soft, #e4d6c2); }
.sr-pill-count { min-width: 28px; height: 28px; padding: 0 8px; border-radius: 999px; background: var(--cfb-bg, #fff); color: var(--cfb-ink, #111); font-size: 13px; line-height: 28px; text-align: center; }
.sr-pill:focus-visible, .sr-panel button:focus-visible, .sr-composer :focus-visible, .sr-selbtn:focus-visible, .sr-pin:focus-visible { outline: 2px solid var(--cfb-accent, #b45a3c); outline-offset: 2px; }

.sr-selbtn { position: fixed; z-index: 100008; display: inline-flex; align-items: center; gap: 8px; min-height: 36px; padding: 0 10px 0 14px; border: 0; border-radius: 999px; background: var(--cfb-ink, #111); color: var(--cfb-bg, #fff); font-size: 13px !important; }
.sr-selbtn kbd { border-color: rgba(255, 255, 255, .6); }

.sr-pins { position: fixed; inset: 0 auto auto 0; z-index: 100003; width: 0; height: 0; }
.sr-nopins .sr-pins { display: none; }
.sr-pin { position: absolute; top: -14px; left: -14px; width: 28px; height: 28px; padding: 0; border: 2px solid var(--cfb-bg, #fff); border-radius: 50% 50% 50% 4px; background: var(--cfb-accent-2, #596044); color: var(--cfb-bg, #fff); font-size: 12px !important; line-height: 24px; text-align: center; box-shadow: 0 0 0 1px rgba(17, 17, 17, .35), 0 3px 10px rgba(17, 17, 17, .4); will-change: transform; }
.sr-pin.is-active, .sr-pin:hover { background: var(--cfb-accent, #b45a3c); }

.sr-panel { position: fixed; right: 16px; bottom: 72px; z-index: 100004; display: flex; flex-direction: column; width: min(360px, calc(100vw - 32px)); max-height: min(70vh, 620px); padding: 18px 18px 8px; border-radius: 10px; background: var(--cfb-bg, #fff); box-shadow: 0 0 0 1px rgba(17, 17, 17, .12), 0 18px 40px rgba(17, 17, 17, .14); }
.sr-panel[hidden] { display: none; }
.sr-panel-head { display: flex; align-items: center; justify-content: space-between; }
.sr-panel h2 { margin: 0; font: 26px/1 var(--cfb-font-display, Georgia, serif); color: var(--cfb-ink, #111); }
.sr-x { width: 40px; height: 40px; border: 0; background: transparent; font-size: 26px !important; color: var(--cfb-ink, #111); }
.sr-help { margin: 8px 0 12px; color: var(--cfb-muted, #77736d); font-size: 14px; }
.sr-help kbd { color: var(--cfb-ink, #111); }
.sr-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; padding-bottom: 12px; border-bottom: 1px solid rgba(17, 17, 17, .12); }
.sr-pick { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 14px; border: 1px solid var(--cfb-ink, #111); border-radius: 999px; background: transparent; color: var(--cfb-ink, #111); font-size: 13px !important; }
.sr-pick:hover { background: var(--cfb-ink, #111); color: var(--cfb-bg, #fff); }
.sr-toggle { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--cfb-ink, #111); }
.sr-toggle input { width: 18px; height: 18px; accent-color: var(--cfb-accent-2, #596044); }
.sr-list { list-style: none; margin: 0; padding: 4px 0 0; overflow: auto; counter-reset: sr; }
.sr-list li { position: relative; padding: 12px 0 12px 36px; border-bottom: 1px solid rgba(17, 17, 17, .08); counter-increment: sr; }
.sr-list li::before { content: counter(sr); position: absolute; left: 0; top: 12px; width: 24px; height: 24px; border-radius: 50% 50% 50% 4px; background: var(--cfb-accent-2, #596044); color: var(--cfb-bg, #fff); font-size: 12px; line-height: 24px; text-align: center; }
.sr-list li.is-active::before { background: var(--cfb-accent, #b45a3c); }
.sr-list li.sr-empty { padding-left: 0; color: var(--cfb-muted, #77736d); }
.sr-list li.sr-empty::before { display: none; }
.sr-meta { margin: 0; font-size: 13px; color: var(--cfb-muted, #77736d); }
.sr-meta strong { color: var(--cfb-ink, #111); font-weight: 400; }
.sr-list blockquote, .sr-composer blockquote { margin: 6px 0; padding: 2px 0 2px 10px; border-left: 3px solid var(--cfb-accent-2, #596044); color: var(--cfb-muted, #77736d); font-size: 14px; font-style: normal; }
.sr-text { margin: 4px 0 6px; white-space: pre-wrap; }
.sr-go { min-height: 32px; padding: 0; border: 0; border-bottom: 1px solid currentColor; background: transparent; color: var(--cfb-accent-2, #596044); font-size: 13px !important; }

.sr-composer { position: fixed; z-index: 100008; display: grid; gap: 10px; width: 320px; max-width: calc(100vw - 24px); padding: 16px; border-radius: 10px; background: var(--cfb-bg, #fff); box-shadow: 0 0 0 1px rgba(17, 17, 17, .14), 0 18px 40px rgba(17, 17, 17, .18); }
.sr-on { margin: 0; color: var(--cfb-accent-2, #596044); font-size: 12px; letter-spacing: .12em; text-transform: uppercase; }
.sr-lbl { display: grid; gap: 4px; font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--cfb-accent-2, #596044); }
.sr-composer textarea, .sr-composer input { width: 100%; padding: 10px 12px; border: 1px solid rgba(17, 17, 17, .25); border-radius: 6px; background: var(--cfb-bg, #fff); color: var(--cfb-ink, #111); font: 16px/1.4 var(--cfb-font-text, system-ui, sans-serif); text-transform: none; letter-spacing: 0; resize: vertical; }
.sr-composer .sr-hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.sr-row { display: flex; justify-content: flex-end; gap: 8px; }
.sr-cancel, .sr-send { min-height: 40px; padding: 0 18px; border-radius: 999px; font-size: 13px !important; letter-spacing: .08em; text-transform: uppercase; }
.sr-cancel { border: 1px solid rgba(17, 17, 17, .3); background: transparent; color: var(--cfb-ink, #111); }
.sr-send { border: 0; background: var(--cfb-accent-2, #596044); color: var(--cfb-bg, #fff); }
.sr-send:hover { background: var(--cfb-ink, #111); }
.sr-send:disabled { opacity: .6; cursor: progress; }
.sr-kb { margin: 0; font-size: 12px; color: var(--cfb-muted, #77736d); }

.sr-toast { position: fixed; left: 50%; bottom: 16px; z-index: 100008; margin: 0; padding: 10px 18px; border-radius: 999px; background: var(--cfb-ink, #111); color: var(--cfb-bg, #fff); font-size: 14px; transform: translate(-50%, 140%); opacity: 0; transition: transform .35s ease, opacity .35s ease; pointer-events: none; }
.sr-toast.is-on { transform: translate(-50%, 0); opacity: 1; }
@media (prefers-reduced-motion: reduce) { .sr-toast { transition: none; } }

html.sr-picking, html.sr-picking * { cursor: crosshair !important; }
.sr-hover { outline: 2px dashed var(--cfb-accent-2, #596044) !important; outline-offset: 3px; }
@media (max-width: 767px) {
    .sr-pill { right: 12px; bottom: 12px; }
    .sr-panel { right: 12px; bottom: 64px; }
    .sr-kb { display: none; }
}
@media print { .sr-ui { display: none; } }

/* Le thème stylise blockquote (fond orange) et les boutons (fond au focus) : on reprend la main dans la couche. */
.sr-ui [hidden] { display: none !important; }
.sr-ui blockquote { background: none !important; box-shadow: none !important; border-radius: 0 !important; font-family: var(--cfb-font-text, system-ui, sans-serif) !important; line-height: 1.45 !important; quotes: none; }
.sr-ui blockquote::before, .sr-ui blockquote::after { content: none !important; }
.sr-pin, .sr-pin:focus { background: var(--cfb-accent-2, #596044) !important; color: var(--cfb-bg, #fff) !important; }
.sr-pin.is-active, .sr-pin:hover { background: var(--cfb-accent, #b45a3c) !important; }
@media (max-width: 767px) {
    .lm-badge { max-width: calc(100vw - 170px); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
}
.sr-done {
	margin-left: 8px;
	padding: 6px 10px;
	border: 1px solid currentColor;
	border-radius: 999px;
	background: none;
	color: inherit;
	font: inherit;
	font-size: 12px;
	cursor: pointer;
}
.sr-done:hover { background: rgb(0 0 0 / 6%); }
.sr-list li.is-done { opacity: 0.55; }
.sr-list li.is-done .sr-text { text-decoration: line-through; }
.sr-pin.is-done { filter: grayscale(1); opacity: 0.5; }
.sr-hide-done .sr-list li.is-done, .sr-hide-done .sr-pin.is-done { display: none; }