/* Topo · visionneuse des fichiers et remarques sur les livrables (viewer.js), commune à l'admin et à l'espace client.
   Fond noir d'encre dans les deux interfaces, citrus en accent ; couleurs propres, indépendantes du thème de la page. */
/* Visionneuse des fichiers (viewer.js, d'après le composant « visionneuse » du skill site-web) */
html.vw-open, html.vw-open body { overflow: hidden; }
.vw { position: fixed; inset: 0; z-index: 1000; background: #121212; display: grid; grid-template-rows: auto 1fr; gap: 14px;
  padding: calc(env(safe-area-inset-top, 0px) + 14px) 72px calc(env(safe-area-inset-bottom, 0px) + 20px); color: #EDE7DA; }
.vw[hidden] { display: none !important; }
.vw-top { display: flex; align-items: center; gap: 16px; min-width: 0; }
.vw-count { font-size: 14px; font-variant-numeric: tabular-nums; flex: 0 0 auto; }
.vw-name { flex: 1; min-width: 0; font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vw-dl { color: #EDE7DA; font-size: 14px; font-weight: 600; text-decoration: underline; flex: 0 0 auto; }
.vw-stage { min-height: 0; display: grid; place-items: center; }
.vw-img { max-width: 100%; max-height: calc(100dvh - 110px); object-fit: contain; background: #fff; }
.vw-doc { width: min(1100px, 100%); height: 100%; border: 0; background: #fff; }
.vw-video { max-width: 100%; max-height: calc(100dvh - 110px); background: #000; }
.vw-file { display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center; background: #F2EEE3; color: #121212; padding: 32px 40px; max-width: 420px; }
.vw-ext { width: 72px; height: 72px; display: grid; place-items: center; background: #E9E3D5; font-weight: 800; font-size: 14px; }
.vw-size { color: #5E5850; font-size: 14px; }
.vw-btn { width: 44px; height: 44px; border: 1.5px solid #EDE7DA; background: transparent; color: #EDE7DA; font: 500 20px/1 var(--font); cursor: pointer; display: grid; place-items: center; border-radius: 2px; flex: 0 0 auto; }
.vw-btn:hover, .vw-btn:focus-visible { background: #EDE7DA; color: #121212; outline: none; }
.vw-prev, .vw-next { position: absolute; top: 50%; transform: translateY(-50%); }
.vw-prev { left: 14px; }
.vw-next { right: 14px; }
@media (max-width: 640px) {
  .vw { padding-inline: 12px; padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 76px); }
  .vw-prev, .vw-next { top: auto; bottom: calc(env(safe-area-inset-bottom, 0px) + 16px); transform: none; }
  .vw-prev { left: calc(50% - 56px); } .vw-next { right: calc(50% - 56px); }
  .vw-dl { display: none; }
}

.vw-file .a-btn, .vw-file .btn { background: #121212; color: #DDF73A; border: 0; padding: 12px 18px; font-weight: 700; text-decoration: none; }

/* ---- Remarques : document à gauche, panneau à droite */
.vw.has-notes { grid-template-columns: minmax(0, 1fr) 360px; grid-template-rows: auto minmax(0, 1fr); column-gap: 18px; padding-right: 18px; }
.vw.has-notes .vw-top { grid-column: 1 / -1; }
.vw.has-notes .vw-next { right: 392px; }
.vw-stage { position: relative; }
.vw-doc-wrap { display: flex; flex-direction: column; align-items: center; gap: 10px; max-width: 100%; max-height: 100%; }
.vw-frame { position: relative; line-height: 0; max-width: 100%; }
.vw-frame.is-adding { cursor: crosshair; }
.vw-media { display: block; max-width: 100%; max-height: calc(100dvh - 120px); background: #fff; }
video.vw-media { background: #000; }
.vw-frame.is-adding video.vw-media { pointer-events: none; }
.has-notes .vw-media { max-height: calc(100dvh - 150px); }
.vw-pins { position: absolute; inset: 0; pointer-events: none; }
.vw-pin { position: absolute; width: 18px; height: 18px; margin: -9px 0 0 -9px; border-radius: 50%; border: 1.5px solid #121212; background: #DDF73A; color: #121212;
  font: 800 9.5px/15px var(--font, Archivo, sans-serif); text-align: center; padding: 0; cursor: pointer; pointer-events: auto;
  box-shadow: 0 0 0 1.5px rgba(255, 255, 255, .9), 0 2px 6px rgba(0, 0, 0, .28); transition: transform .12s ease; }
.vw-pin:hover, .vw-pin.is-on { transform: scale(1.12); }
.vw-pin.is-on { box-shadow: 0 0 0 2px #121212, 0 2px 6px rgba(0, 0, 0, .3); }
.vw-pin.is-resolved { background: #121212; color: #DDF73A; border-color: #DDF73A; }
.vw-pin.is-draft { animation: vw-pulse 1.1s ease-in-out infinite; pointer-events: none; }
@keyframes vw-pulse { 50% { transform: scale(1.15); } }
@media (prefers-reduced-motion: reduce) { .vw-pin.is-draft { animation: none; } }
/* Frise des moments (vidéo) et pages (PDF) */
.vw-marks { position: relative; width: 100%; height: 22px; border-top: 2px solid rgba(237, 231, 218, .25); }
.vw-marks:empty { display: none; }
.vw-mark { position: absolute; top: 3px; width: 20px; height: 18px; margin-left: -10px; border: 0; border-radius: 2px; background: #DDF73A; color: #121212;
  font: 800 10px/18px var(--font, Archivo, sans-serif); padding: 0; cursor: pointer; }
.vw-mark.is-resolved { background: #EDE7DA; opacity: .7; }
.vw-mark.is-on { outline: 2px solid #fff; outline-offset: 1px; }
.vw-pager { display: flex; align-items: center; gap: 12px; font-size: 14px; font-variant-numeric: tabular-nums; }
.vw-page-btn { width: 36px; height: 32px; border: 1.5px solid #EDE7DA; background: transparent; color: #EDE7DA; cursor: pointer; border-radius: 2px; font-size: 16px; }
.vw-page-btn:disabled { opacity: .3; cursor: default; }
.vw-page-btn:not(:disabled):hover { background: #EDE7DA; color: #121212; }

/* Panneau */
.vw-side { min-height: 0; display: flex; flex-direction: column; background: #1B1B1A; color: #F2EEE3; border-top: 3px solid #DDF73A; }
.vw-side[hidden] { display: none !important; }
.vw-side-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 14px 16px 10px; }
.vw-side-title { margin: 0; font: 800 17px/1 var(--font, Archivo, sans-serif); font-stretch: 85%; text-transform: uppercase; letter-spacing: .01em; color: #F2EEE3; }
.vw-add { border: 0; background: #DDF73A; color: #121212; font: 700 13px/1 var(--font, Archivo, sans-serif); padding: 9px 12px; cursor: pointer; border-radius: 2px; }
.vw-add.is-on { background: transparent; color: #DDF73A; box-shadow: inset 0 0 0 1.5px #DDF73A; }
.vw-hint { margin: 0 16px 10px; padding: 8px 10px; background: rgba(221, 247, 58, .12); color: #DDF73A; font-size: 13px; line-height: 1.4; }
.vw-hint[hidden] { display: none; }
.vw-side-body { flex: 1; min-height: 0; overflow-y: auto; padding: 0 16px 16px; }
.vw-empty { color: #A9A398; font-size: 14px; margin: 6px 0; }
.vw-notes { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.vw-note { background: #262624; border-left: 3px solid #DDF73A; }
.vw-note.is-resolved { border-left-color: #5E5A54; }
.vw-note.is-on { background: #2F2F2C; box-shadow: inset 0 0 0 1px rgba(221, 247, 58, .5); }
.vw-note-head { display: flex; align-items: center; gap: 9px; width: 100%; padding: 10px 12px 4px; border: 0; background: none; color: inherit; text-align: left; cursor: pointer; font: inherit; }
.vw-note-n { flex: 0 0 auto; width: 22px; height: 22px; border-radius: 50%; background: #DDF73A; color: #121212; font: 800 11px/22px var(--font, Archivo, sans-serif); text-align: center; }
.is-resolved .vw-note-n { background: #121212; color: #DDF73A; box-shadow: inset 0 0 0 1.5px #DDF73A; }
.vw-note-meta { flex: 1; min-width: 0; font-size: 12px; color: #A9A398; margin: 0; }
.vw-note-meta b { color: #F2EEE3; font-weight: 700; }
.vw-note-state { flex: 0 0 auto; font-size: 10.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: #DDF73A; }
.is-resolved .vw-note-state { color: #A9A398; }
.vw-note-text { margin: 0; padding: 2px 12px 10px 43px; font-size: 14px; line-height: 1.45; white-space: pre-wrap; overflow-wrap: anywhere; }
.vw-reply { margin: 0 12px 8px 43px; padding: 8px 10px; background: #1B1B1A; }
.vw-reply .vw-note-text { padding: 2px 0 0; }
.vw-reply.from-agency { border-left: 2px solid #DDF73A; }
.vw-note-acts { padding: 0 12px 12px 43px; display: flex; flex-direction: column; gap: 8px; align-items: flex-start; }
.vw-form { display: flex; flex-direction: column; gap: 8px; width: 100%; }
.vw-form textarea { width: 100%; box-sizing: border-box; font: 14px/1.45 var(--font, Archivo, sans-serif); padding: 9px 10px; border: 1px solid #4A4842; background: #121212; color: #F2EEE3; border-radius: 2px; resize: vertical; }
.vw-form textarea:focus { outline: none; border-color: #DDF73A; }
.vw-draft { background: #262624; padding: 12px; border-left: 3px solid #DDF73A; margin-bottom: 10px; }
.vw-form-row { display: flex; gap: 8px; justify-content: flex-end; }
.vw-send { border: 0; background: #DDF73A; color: #121212; font: 700 13px/1 var(--font, Archivo, sans-serif); padding: 10px 14px; cursor: pointer; border-radius: 2px; align-self: flex-end; }
.vw-cancel, .vw-resolve { border: 1.5px solid #6E6A63; background: transparent; color: #F2EEE3; font: 600 13px/1 var(--font, Archivo, sans-serif); padding: 8px 12px; cursor: pointer; border-radius: 2px; }
.vw-resolve:hover, .vw-cancel:hover { border-color: #F2EEE3; }
.vw-send:disabled, .vw-resolve:disabled { opacity: .5; cursor: default; }
.vw-check { display: flex; gap: 8px; align-items: center; font-size: 13px; color: #CFC6B8; }
.vw-check input { accent-color: #DDF73A; }
@media (max-width: 900px) {
  .vw.has-notes { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 58vh) minmax(0, 1fr); padding-right: 12px; }
  .vw.has-notes .vw-next { right: calc(50% - 56px); }
  .has-notes .vw-media { max-height: calc(58vh - 60px); }
}

/* Fil des échanges : une remarque posée sur un livrable (capture, numéro, fichier) */
.note-ref { display: inline-flex; align-items: center; gap: 10px; margin: 6px 0 4px; padding: 6px 10px 6px 6px; border: 1px solid rgba(18, 18, 18, .16); background: rgba(18, 18, 18, .03);
  text-decoration: none; color: inherit; font-size: 13px; max-width: 100%; }
.note-ref:hover { border-color: currentColor; }
.note-ref img { width: 72px; height: 48px; object-fit: cover; display: block; background: #E9E3D5; }
.note-ref-n { flex: 0 0 auto; width: 22px; height: 22px; border-radius: 50%; background: #DDF73A; color: #121212; border: 1.5px solid #121212; font: 800 11px/19px var(--font, Archivo, sans-serif); text-align: center; }
.note-ref-label { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.note-ref-go { flex: 0 0 auto; font-size: 12px; text-decoration: underline; opacity: .75; }

/* Zoom (images, PDF) : la scène défile quand le document dépasse */
.vw-stage.is-zoomed { overflow: auto; place-items: start center; }
.vw-stage.is-zoomed .vw-doc-wrap { max-height: none; }
.vw-zoom-n { min-width: 46px; text-align: center; font-size: 13px; font-variant-numeric: tabular-nums; }
.vw-sep { width: 1px; height: 20px; background: rgba(237, 231, 218, .25); margin: 0 4px; }
.vw-pager .vw-page-btn:last-child { width: auto; padding: 0 10px; font: 600 13px/1 var(--font, Archivo, sans-serif); }
/* Barre des pages et du zoom : fixée en bas de la zone du document, hors du défilement */
.has-notes .vw-stage { padding-bottom: 54px; }
.vw > .vw-pager { position: absolute; bottom: calc(env(safe-area-inset-bottom, 0px) + 12px); left: 72px; right: 396px; width: fit-content; margin: 0 auto;
  background: #121212; padding: 6px 10px; z-index: 3; box-shadow: 0 0 0 1px rgba(237, 231, 218, .12); }
@media (max-width: 900px) { .vw > .vw-pager { left: 12px; right: 12px; bottom: auto; top: calc(58vh + 20px); } }

/* Dessin sur le document (outils de Balise) */
.vw-draw { position: absolute; left: 0; top: 0; pointer-events: none; touch-action: none; }
.vw-frame.is-drawing .vw-draw { pointer-events: auto; cursor: crosshair; }
.vw-frame.is-drawing .vw-pins { opacity: .55; }
.vw-draw-toggle { align-self: flex-start; border: 1.5px dashed #DDF73A; background: transparent; color: #DDF73A; font: 600 13px/1 var(--font, Archivo, sans-serif); padding: 8px 11px; cursor: pointer; border-radius: 2px; }
.vw-draw-toggle.is-on { border-style: solid; background: #DDF73A; color: #121212; }
.vw-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 5px; }
.vw-tool { width: 32px; height: 32px; border: 1.5px solid #4A4842; background: #121212; color: #F2EEE3; font: 600 15px/1 var(--font, Archivo, sans-serif); cursor: pointer; border-radius: 2px; padding: 0; }
.vw-tool.is-on { border-color: #DDF73A; color: #DDF73A; }
.vw-tool:disabled { opacity: .35; cursor: default; }
.vw-color { width: 24px; height: 24px; border-radius: 50%; border: 2px solid #4A4842; background: var(--c); cursor: pointer; padding: 0; }
.vw-color.is-on { border-color: #F2EEE3; box-shadow: 0 0 0 2px #121212, 0 0 0 4px #F2EEE3; }
.vw-hint-s { margin: 0; font-size: 12px; color: #A9A398; }
.note-ref-env { color: var(--muted); font-weight: 400; }

/* Remarques sur les livrables, regroupées par support (admin/_note_groups.php, agence et espace client) */
/* Traité : le vert des étapes validées (frise de l'agence, sinon celle du client) */
:root { --ng-done: var(--ph-validated, var(--st-validated, #4ADE80)); }
.note-groups { display: flex; flex-direction: column; gap: 14px; margin-top: 12px; }
.ng { border: 1px solid var(--line); background: var(--paper); }
.ng-head { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-bottom: 1px solid var(--line); flex-wrap: wrap; }
.ng-thumb { width: 54px; height: 40px; object-fit: cover; flex: none; background: var(--soft); display: grid; place-items: center; font-size: 11px; font-weight: 700; color: var(--muted); }
.ng-title { flex: 1; min-width: 160px; display: flex; flex-direction: column; gap: 2px; }
.ng-title b { word-break: break-word; }
.ng-count { font-size: 12.5px; color: var(--warn); font-weight: 600; }
.ng.is-done .ng-count { color: var(--ng-done); }
.ng-acts { display: flex; gap: 8px; flex-wrap: wrap; }
.ng-acts form { margin: 0; }
.ng-btn { display: inline-flex; align-items: center; gap: 4px; padding: 6px 12px; border: 1px solid var(--line-strong, var(--line-mid)); background: transparent; color: inherit;
  font: inherit; font-size: 13px; font-weight: 600; text-decoration: none; cursor: pointer; }
.ng-btn:hover { border-color: currentColor; }
.ng-btn.primary { background: #121212; color: #F2EEE3; border-color: #121212; }
.ng-list { list-style: none; margin: 0; padding: 0; }
.ng-row + .ng-row { border-top: 1px solid var(--line); }
.ng-line { display: flex; align-items: flex-start; gap: 10px; padding: 10px 14px; }
/* Numéro, état et ✓ alignés sur la première ligne (le texte de la remarque) */
.ng-line > .ng-num, .ng-line > .ng-state, .ng-line > .ng-check-form { margin-top: 2px; }
.ng-num { flex: none; width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; font-size: 11.5px; font-weight: 800; text-decoration: none;
  background: #DDF73A; color: #121212; border: 2px solid #121212; }
.ng-row.is-resolved .ng-num { background: var(--ng-done); color: #fff; border-color: var(--ng-done); }
.ng-open { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; background: none; border: 0; padding: 4px 0; font: inherit; color: inherit; text-align: left; cursor: pointer; }
.ng-text { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 500; }
.ng-row.is-open .ng-text { white-space: normal; }
.ng-sub { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; min-width: 0; }
.ng-where { font-size: 12px; font-weight: 700; color: var(--muted); max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ng-target { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; font-weight: 600;
  color: var(--fg, #121212); background: var(--soft); padding: 1px 7px; }
.ng-row.is-open .ng-target { white-space: normal; }
.ng-meta { font-size: 12px; color: var(--muted); }
.ng-state { flex: none; font-size: 11.5px; font-weight: 700; padding: 3px 8px; white-space: nowrap; }
.ng-state.is-waiting { background: rgba(180, 83, 12, .12); color: var(--warn); }
.ng-state.is-resolved { background: var(--ng-done); color: #fff; }
.ng-state.is-agency { background: var(--soft); color: var(--muted); }
.ng-check-form { margin: 0; flex: none; }
.ng-check { width: 28px; height: 28px; display: grid; place-items: center; border: 1px solid var(--line-strong, var(--line-mid)); background: transparent; color: var(--muted); cursor: pointer; font-weight: 800; }
.ng-check:hover { border-color: var(--ng-done); color: var(--ng-done); }
.ng-check.on { background: var(--ng-done); border-color: var(--ng-done); color: #fff; }
.ng-row.is-resolved .ng-text { color: var(--muted); }
.ng-body { display: flex; gap: 14px; padding: 4px 14px 14px 48px; }
.ng-body[hidden] { display: none; }
.ng-snap { flex: none; }
.ng-snap img { width: 220px; max-width: 40vw; display: block; border: 1px solid var(--line); }
.ng-detail { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 8px; }
.ng-full { margin: 0; white-space: pre-wrap; }
.ng-reply { border-left: 2px solid var(--line); padding-left: 10px; }
.ng-reply p { margin: 0; }
.ng-reply .ng-meta { white-space: normal; }
.ng-reply-form textarea { width: 100%; }
.ng-reply-foot { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; justify-content: flex-end; margin-top: 6px; }
.ng-reply-foot .check { font-size: 13px; display: flex; align-items: center; gap: 6px; margin-right: auto; }
@media (max-width: 720px) {
  .ng-line { flex-wrap: wrap; }
  .ng-open { flex-basis: calc(100% - 40px); flex-direction: column; gap: 2px; }
  .ng-text { white-space: normal; }
  .ng-body { flex-direction: column; padding-left: 14px; }
  .ng-snap img { max-width: 100%; width: 100%; }
}
.ng-row.is-open .ng-full { display: none; }

/* « Voir » une remarque de site : le site aux dimensions de l'écran de la personne, réduit pour tenir */
.sf { position: fixed; inset: 0; z-index: 1100; background: #1c1c1c; display: flex; flex-direction: column; color: #F2EEE3; }
.sf-on, .sf-on body { overflow: hidden; }
.sf-bar { display: flex; align-items: center; gap: 14px; padding: 10px 16px; background: #121212; border-bottom: 1px solid rgba(242,238,227,.15); font-size: 14px; }
.sf-title { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sf-scale { font-size: 12px; opacity: .7; }
.sf-tab { color: #DDF73A; font-size: 13px; }
.sf-x { background: none; border: 0; color: inherit; font-size: 26px; line-height: 1; cursor: pointer; padding: 0 4px; }
.sf-stage { flex: 1; min-height: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; padding: 16px; overflow: hidden; }
.sf-frame { position: relative; flex: none; box-shadow: 0 20px 60px rgba(0,0,0,.5); background: #fff; }
.sf-screen { position: absolute; left: 0; top: 0; transform-origin: 0 0; }
.sf-screen iframe { width: 100%; height: 100%; border: 0; display: block; background: #fff; }
.sf-help { margin: 0; font-size: 12px; opacity: .6; text-align: center; }
/* Support replié : seulement son en-tête ; « Voir les remarques » le déplie */
.ng-list[hidden] { display: none; }
.ng:not(.is-open) .ng-head { border-bottom: 0; }
.ng-title { cursor: pointer; }
.ng-fold i { font-style: normal; display: inline-block; transition: transform .15s; }
.ng.is-open .ng-fold i { transform: rotate(180deg); }
.ng-fold-off, .ng.is-open .ng-fold-on { display: none; }
.ng.is-open .ng-fold-off { display: inline; }
/* Avancement d'un support : remarques du client traitées sur le total */
.ng-count { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.ng-badge { display: inline-block; min-width: 38px; padding: 2px 8px; text-align: center; font-size: 12.5px; font-weight: 800; font-variant-numeric: tabular-nums;
  background: #DDF73A; color: #121212; border: 1px solid #121212; }
.ng-badge.is-done { background: var(--ng-done); color: #fff; border-color: var(--ng-done); }
.ng-agency-n { color: var(--muted); font-weight: 400; }
.ng-badge.is-agency { background: var(--soft); color: var(--fg, #121212); border-color: var(--line-strong, var(--line-mid)); font-weight: 600; }
.ng-agency-n { display: inline-flex; align-items: center; gap: 6px; }