/* feedback.css · ajouts du 20/10/2026 · mode revue (bulles épinglées partagées avec Getup) et bulles « i ».
   Repris des styles .fb-* / .pin / .syncdot / .fb-alert du back-office COSmos, adaptés au wireframe gris
   (Arial, traits #c9c9c9, fonds #fff / #f3f3f3). Le bleu et l'orange restent réservés au calque de revue. */
:root{--fb-ink:#191919;--fb-muted:#626262;--fb-line:#c9c9c9;--fb-soft:#f3f3f3;--fb-accent:#1d4ed8;--fb-q:#b45309;--fb-ok:#047857;--fb-err:#b00020}

.fb-root{font:13px/1.5 Arial,Helvetica,sans-serif;color:var(--fb-ink);letter-spacing:normal;text-transform:none}
.fb-root *{box-sizing:border-box}
.fb-root b{font-weight:700}
.fb-root button{font:inherit;color:inherit;cursor:pointer;margin:0}
.fb-root button:focus-visible,.fb-root input:focus-visible,.fb-root textarea:focus-visible{outline:3px solid #777;outline-offset:2px}

/* calque des épingles : hauteur du document, posé sur le body */
.fb-layer{position:absolute;top:0;left:0;width:100%;height:100%;z-index:800;pointer-events:none}
.fb-layer>*{pointer-events:auto}
.fb-overlay{position:absolute;inset:0;cursor:crosshair;background:rgba(29,78,216,.05)}

/* épingles */
.fb-root .pin{position:absolute;z-index:850;width:26px;height:26px;margin:0;padding:0;border-radius:50% 50% 50% 0;transform:translate(-50%,-100%) rotate(-45deg);background:var(--fb-accent);border:2px solid #fff;box-shadow:2px 2px 0 rgba(0,0,0,.25);cursor:pointer;display:flex;align-items:center;justify-content:center}
.fb-root .pin:hover{background:#1e40af}
.fb-root .pin span{transform:rotate(45deg);color:#fff;font:700 11px/1 Arial,Helvetica,sans-serif;white-space:nowrap}
.fb-root .pin.q{background:var(--fb-q)}
.fb-root .pin.q:hover{background:#92400e}
.fb-root .pin.resolved{opacity:.35}
.fb-root .pin.open{box-shadow:0 0 0 2px #fff,0 0 0 4px var(--fb-ink)}
.fb-root .pin.draft{background:#fff;border:2px dashed var(--fb-accent);pointer-events:none;cursor:default}
.fb-root .pin.draft span{color:var(--fb-accent)}

/* bulle ouverte et formulaire de nouvelle bulle */
.fb-root .pinpop,.fb-root .pinform{position:absolute;z-index:870;width:290px;max-width:calc(100vw - 16px);background:#fff;border:1px solid var(--fb-ink);border-top:3px solid var(--fb-accent);padding:10px 12px;font-size:12.5px;line-height:1.5;box-shadow:4px 4px 0 rgba(0,0,0,.12);text-align:left}
.fb-pophead{display:flex;justify-content:space-between;align-items:flex-start;gap:6px;color:var(--fb-muted)}
.fb-pophead b{color:var(--fb-ink)}
.fb-text{margin-top:6px;white-space:pre-wrap;word-break:break-word;color:var(--fb-ink)}
.fb-root .fb-input{width:100%;margin-top:6px;display:block;font:inherit;font-size:12.5px;color:var(--fb-ink);background:#fff;border:1px solid var(--fb-line);padding:6px 8px}
.fb-root .fb-input:focus{border-color:var(--fb-ink)}
.fb-root textarea.fb-input{resize:vertical;min-height:46px}
.fb-segments{display:flex;gap:6px;flex-wrap:wrap;margin-top:6px}
.fb-root .fb-seg{border:1px solid var(--fb-ink);border-radius:99px;padding:4px 12px;font-size:12px;font-weight:400;color:var(--fb-muted);background:#fff}
.fb-root .fb-seg:hover{background:var(--fb-soft)}
.fb-root .fb-seg.on{background:var(--fb-ink);color:#fff;font-weight:700}
.fb-row{display:flex;gap:6px;flex-wrap:wrap;margin-top:8px}

/* boutons compacts du mode revue (le wireframe donne aux boutons un padding généreux) */
.fb-root .fb-btn{display:inline-block;border:1px solid var(--fb-ink);background:#fff;color:var(--fb-ink);padding:5px 10px;font-size:12px;font-weight:400;line-height:1.3;white-space:nowrap}
.fb-root .fb-btn:hover{background:#e9e9e9}
.fb-root .fb-btn.primary{background:var(--fb-ink);color:#fff;font-weight:700}
.fb-root .fb-btn.primary:hover{background:#444}
.fb-root .fb-x{border:0;background:none;padding:2px 6px;font-size:14px;line-height:1;color:var(--fb-muted);flex:none}
.fb-root .fb-x:hover{background:#e9e9e9;color:var(--fb-ink)}
.fb-import{position:relative;cursor:pointer}
.fb-import:focus-within{outline:3px solid #777;outline-offset:2px}

/* fils de discussion */
.fb-reply{display:block;margin-top:8px;padding:6px 8px 6px 10px;border-left:3px solid var(--fb-accent);background:var(--fb-soft);font-size:12px}
.fb-reply span{display:block;white-space:pre-wrap;word-break:break-word}
.fb-replyform{display:block;margin-top:8px;border-top:1px dashed var(--fb-line);padding-top:6px}
.fb-root .fb-replyform .fb-btn{margin-top:6px}

/* boutons flottants */
.fb-fabs{position:fixed;right:18px;bottom:18px;z-index:950;display:flex;flex-direction:column;gap:8px;align-items:flex-end}
.fb-root .fb-fab{border:2px solid var(--fb-accent);background:#fff;color:var(--fb-accent);padding:9px 14px;font-weight:700;font-size:13px;box-shadow:3px 3px 0 rgba(29,78,216,.2);white-space:nowrap}
.fb-root .fb-fab:hover{background:#eef2ff}
.fb-root .fb-fab.on{background:var(--fb-accent);color:#fff}
/* bouton rond compact des petits écrans (remplace les deux boutons longs sous 760 px) */
.fb-root .fb-fab-mini{display:none;position:relative;align-items:center;justify-content:center;width:52px;height:52px;padding:0;border-radius:50%;border:2px solid var(--fb-accent);background:#fff;color:var(--fb-accent);font-size:22px;line-height:1;box-shadow:3px 3px 0 rgba(29,78,216,.2)}
.fb-root .fb-fab-mini.on{background:var(--fb-accent);color:#fff}
.fb-badge{position:absolute;top:-6px;right:-6px;min-width:20px;height:20px;padding:0 5px;border-radius:10px;background:var(--fb-q);color:#fff;font:700 11px/20px Arial,Helvetica,sans-serif;text-align:center;box-shadow:0 0 0 2px #fff}
.fb-panel-add{padding:10px 16px 0}
.fb-root .fb-panel-add .fb-btn{width:100%;text-align:center;padding:8px 10px}

/* bandeaux : placement en cours, erreur serveur, aide de première visite */
.fb-banner{position:fixed;top:12px;left:50%;transform:translateX(-50%);z-index:960;max-width:calc(100vw - 24px);background:var(--fb-accent);color:#fff;padding:8px 16px;font-size:13px;text-align:center;box-shadow:3px 3px 0 rgba(0,0,0,.2)}
.fb-alert{position:fixed;top:12px;left:50%;transform:translateX(-50%);z-index:980;max-width:min(560px,calc(100vw - 32px));background:var(--fb-err);color:#fff;padding:10px 16px;font-size:12.5px;line-height:1.5;box-shadow:3px 3px 0 rgba(0,0,0,.25)}
.fb-root .fb-alert .fb-btn{margin-left:8px;background:#fff;color:var(--fb-err);border-color:#fff}
.fb-help{position:fixed;left:18px;bottom:18px;z-index:940;max-width:min(430px,calc(100vw - 36px));background:#fff;border:1px solid var(--fb-ink);border-left:3px solid var(--fb-accent);padding:10px 14px;font-size:12.5px;line-height:1.5;color:var(--fb-muted);box-shadow:3px 3px 0 rgba(0,0,0,.12)}
.fb-help b{color:var(--fb-ink)}
.fb-root .fb-help .fb-btn{margin-left:6px}

/* panneau latéral « Retours (n) » */
.fb-panel{position:fixed;top:0;right:0;bottom:0;width:370px;max-width:92vw;z-index:970;background:#fff;border-left:1px solid var(--fb-ink);display:flex;flex-direction:column;box-shadow:-4px 0 12px rgba(0,0,0,.08)}
.fb-ph{padding:12px 16px;border-bottom:1px solid var(--fb-ink);display:flex;justify-content:space-between;align-items:center;gap:8px;font-weight:700;font-size:14px}
.fb-list{flex:1;overflow:auto;padding:4px 16px 10px;background:#fff}
.fb-item{border:1px solid var(--fb-line);padding:10px 12px;margin-top:10px;font-size:12.5px;background:#fff}
.fb-item.resolved{opacity:.5}
.fb-itemhead{display:flex;justify-content:space-between;align-items:baseline;gap:8px;flex-wrap:wrap}
.fb-who{color:var(--fb-muted);font-size:11.5px;white-space:nowrap}
.fb-actions{display:flex;gap:8px;padding:12px 16px 8px;border-top:1px solid var(--fb-line);flex-wrap:wrap;background:var(--fb-soft)}
.fb-hint{font-size:11.5px;color:var(--fb-muted);margin-top:4px;line-height:1.5}
.fb-empty{margin:10px 0 0;padding:12px;background:var(--fb-soft)}
.fb-foot{padding:0 16px 12px;background:var(--fb-soft);margin:0}
.fb-stats{margin-top:6px}
.fb-warn{color:var(--fb-err);margin-top:4px}
.syncdot{font-size:10.5px;font-weight:600;margin-left:8px;color:var(--fb-q)}
.syncdot.shared{color:var(--fb-ok)}
.syncdot.error{color:var(--fb-err)}

/* bulles « i » pédagogiques (window.cosmosInfo) */
.info{position:relative;display:inline-flex;vertical-align:middle;margin:0 3px;letter-spacing:normal;text-transform:none}
.infobtn{width:16px;height:16px;border-radius:50%;border:1.5px solid var(--fb-accent);color:var(--fb-accent);background:#fff;font:italic 700 10px Georgia,serif;line-height:1;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;padding:0;margin:0;flex:none}
.infobtn:hover,.info.open .infobtn{background:var(--fb-accent);color:#fff}
.infobtn:focus-visible{outline:3px solid #777;outline-offset:2px}
.infopop{position:absolute;top:22px;left:50%;transform:translateX(-50%);z-index:900;background:#fff;border:2px solid var(--fb-accent);padding:10px 12px;font:400 12.5px/1.5 Arial,Helvetica,sans-serif;color:var(--fb-ink);box-shadow:4px 4px 0 rgba(29,78,216,.15);text-transform:none;letter-spacing:normal;white-space:normal;text-align:left;max-width:calc(100vw - 24px)}
.infopop[hidden]{display:none}
.infopop b{font-weight:700}

@media(max-width:760px){
  .fb-fabs{right:12px;bottom:12px}
  .fb-root .fb-fab{display:none}
  .fb-root .fb-fab-mini{display:flex}
  /* aide de première visite en haut de l'écran (elle se ferme au premier défilement ou clic) : le pied de page reste lisible */
  .fb-help{top:10px;bottom:auto;left:12px;right:12px;max-width:none}
  .fb-panel{width:100%;max-width:100vw;border-left:0}
}
@media print{.fb-root,.info{display:none}}