/* Styles du module js/admin (préfixe bo-, voir docs/DESIGN.md). Réutilise base.css : seulement ce qui manque ici.
   Épuré : pas d'ombre, pas de bordure, séparation par fonds gris. Rouge réservé au « + » de dépôt et aux barres de progression. */

/* ---------- Barre du haut ---------- */
.bo-topbar { max-width: var(--maxw); margin: 0 auto; padding-left: 20px; padding-right: 20px; }
.bo-topbar__nav { gap: 8px; }
.bo-navlink { font-family: var(--font-ui); font-size: 14px; color: var(--ink-2); text-decoration: none; padding: 8px 14px; border-radius: var(--radius-pill); }
.bo-navlink:hover { background: var(--grey-100); color: var(--ink); }

/* ---------- Connexion ---------- */
.bo-login { min-height: 100vh; min-height: 100dvh; display: grid; place-items: center; padding: 24px 16px; }
.bo-login__box { width: min(400px, 100%); gap: 24px; }
.bo-login__logo { margin-bottom: 24px; }
.bo-login__msg { padding: 14px 18px; border-radius: var(--radius-card); background: var(--grey-50); color: var(--ink); font-size: 14px; }

/* ---------- Accueil ---------- */
.bo-home { padding-top: 8px; padding-bottom: 80px; }
.bo-hero { padding: 28px; display: flex; flex-direction: column; gap: 20px; transition: background .15s; }
.bo-hero.is-over { background: linear-gradient(135deg, var(--grey-200), var(--grey-300)); }
.bo-modeseg { align-self: center; background: var(--paper); }
.bo-modeseg button[aria-pressed="true"] { background: var(--grad-navy); color: var(--on-accent); }
.bo-modeseg button { padding: 8px 18px; font-size: 14px; }
.bo-drop { min-height: 340px; background: var(--paper); gap: 12px; align-content: center; }
.bo-drop:hover, .bo-hero.is-over .bo-drop { background: var(--grey-50); }
.bo-drop .t-desc { max-width: 34ch; }
.bo-drop--sm { min-height: 180px; background: var(--grey-50); }
.bo-drop--sm:hover { background: var(--grey-100); }

.bo-sendgrid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 20px; align-items: start; }
.bo-sendgrid__files { background: var(--paper); border-radius: 28px; padding: 20px; }
.bo-sendgrid__opts { background: var(--paper); border-radius: 28px; padding: 24px; }
.bo-sendgrid__opts .input, .bo-sendgrid__opts .select, .bo-sendgrid__opts .textarea,
.bo-requestform .input, .bo-requestform .select, .bo-requestform .textarea { background: var(--grey-100); }
.bo-requestform { background: var(--paper); border-radius: 28px; padding: 28px; width: min(640px, 100%); align-self: center; }

.bo-files { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; max-height: 360px; overflow: auto; }
.bo-file { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 6px 8px; padding: 10px 8px 10px 14px; border-radius: 14px; background: var(--grey-50); }
.bo-file__main { display: flex; flex-direction: column; min-width: 0; }
.bo-file__name { font-size: 14px; }
.bo-file__bar { grid-column: 1 / -1; height: 4px; }
.bo-file.is-done .bo-file__state { color: var(--ok); }
.bo-file.is-failed .bo-file__state { color: var(--red-700); }
.bo-addmore { position: relative; display: inline-flex; align-items: center; gap: 10px; padding: 8px 4px; font-family: var(--font-ui); font-size: 13px; color: var(--ink-2); cursor: pointer; align-self: flex-start; }
.bo-addmore input { position: absolute; inset: 0; opacity: 0; cursor: pointer; width: 100%; }
.bo-addmore:hover { color: var(--ink); }
.bo-addmore__plus { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; background: var(--grad-red); color: var(--on-accent); }
.bo-addmore:focus-within { outline: 2px solid var(--focus); outline-offset: 2px; border-radius: 8px; }

.bo-two { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.bo-switches { padding: 4px 0; }
.bo-block { display: block; }
.bo-actions { gap: 8px; padding-top: 4px; }
.bo-error { margin: 0; padding: 10px 14px; border-radius: var(--radius-field); background: var(--warn-bg); color: var(--warn); font-size: 14px; }

/* Mot de passe avec œil */
.bo-pwd { position: relative; }
.bo-pwd .input { padding-right: 48px; }
.bo-eye { position: absolute; right: 4px; top: 50%; transform: translateY(-50%); width: 40px; height: 36px; border: 0; background: none; border-radius: 10px; color: var(--ink-3); display: grid; place-items: center; cursor: pointer; }
.bo-eye:hover, .bo-eye.is-on { color: var(--ink); }

/* Interrupteur */
.bo-switchrow { display: flex; align-items: center; justify-content: space-between; gap: 12px; cursor: pointer; min-height: 36px; }
.bo-switch { appearance: none; -webkit-appearance: none; width: 42px; height: 24px; margin: 0; border-radius: var(--radius-pill); background: var(--grey-300); position: relative; cursor: pointer; flex: none; transition: background .15s; }
.bo-switch::after { content: ""; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: var(--paper); transition: transform .15s; }
.bo-switch:checked { background: var(--navy-500); }
.bo-switch:checked::after { transform: translateX(18px); }
.bo-switch:disabled { opacity: .5; }

/* Succès */
.bo-success { align-items: center; text-align: center; padding: 28px 8px; gap: 14px; }
.bo-success .t-desc { max-width: 46ch; }
.bo-success__check { width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center; background: var(--grad-navy); color: var(--on-accent); }
.bo-success .bo-copy { width: min(560px, 100%); background: var(--paper); }
.bo-success .bo-actions { justify-content: center; }
.bo-success .btn--ghost { background: var(--paper); }
.bo-success .btn--ghost:hover { background: var(--grey-50); }
.bo-again { color: var(--ink-2); }

/* Sections */
.bo-section { margin-top: 48px; }
.bo-section__head { margin-bottom: 16px; flex-wrap: wrap; gap: 12px; }
.bo-section__head--sub { margin-top: 28px; }
.bo-count { display: inline-grid; place-items: center; min-width: 26px; height: 26px; padding: 0 8px; margin-left: 10px; border-radius: var(--radius-pill); background: var(--grey-100); font-family: var(--font-ui); font-style: normal; font-weight: 400; font-size: 13px; color: var(--ink-2); vertical-align: middle; }
.bo-pad { padding: 40px 0; }
.bo-empty { background: var(--grey-50); border-radius: var(--radius-card); }
.bo-empty .t-accroche { margin-bottom: 6px; color: var(--ink); }
.bo-emptycard { padding: 32px 24px; border-radius: var(--radius-card); background: var(--grey-50); text-align: center; }
.bo-emptycard .t-accroche { margin-bottom: 6px; }

/* Liste des liens */
.bo-share { padding: 14px 18px 14px 14px; min-height: 72px; }
.bo-share.is-off .bo-share__title { color: var(--ink-2); }
.bo-kind { width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; background: var(--grey-100); color: var(--ink); flex: none; }
.bo-kind--request { background: var(--grad-navy); color: var(--on-accent); }
.bo-share__title, .bo-asset__title { font-family: var(--font-display); font-style: italic; font-weight: 600; font-size: 16px; }
.bo-share__tags, .bo-asset__tags { justify-content: flex-end; flex: none; max-width: 45%; }
.bo-share__when { flex: none; min-width: 76px; text-align: right; }
.bo-share .tag .icon, .bo-asset .tag .icon { width: 12px; height: 12px; }

/* ---------- Page d'un lien ---------- */
.bo-sharepage { padding-top: 4px; padding-bottom: 80px; }
.bo-sharehead { gap: 12px; }
.bo-back { display: inline-flex; align-items: center; gap: 6px; text-decoration: none; align-self: flex-start; padding: 4px 0; }
.bo-back:hover { color: var(--ink); }
.bo-title { outline: none; border-radius: 10px; padding: 2px 6px; margin: 0 -6px; cursor: text; overflow-wrap: anywhere; }
.bo-title:hover { background: var(--grey-50); }
.bo-title:focus { background: var(--grey-100); box-shadow: 0 0 0 2px var(--focus); }
.bo-client { margin-top: -4px; }
.bo-linkrow { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 8px; }
.bo-linkrow .bo-copy { min-width: 260px; }
.bo-headactions { gap: 8px; }

.bo-cols { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 40px; align-items: start; }
.bo-cols > .bo-section { margin-top: 40px; }
.bo-activity { margin-top: 40px; display: flex; flex-direction: column; gap: 12px; }
.bo-activity > .t-title { margin-bottom: 4px; }

.bo-asset { cursor: pointer; padding: 10px 12px 10px 10px; transition: background .12s; }
.bo-asset:hover { background: var(--grey-100); }
.bo-asset.is-over { background: var(--grey-200); outline: 2px dashed var(--ink-3); outline-offset: -4px; }
.bo-asset.is-off { cursor: default; opacity: .7; }
.bo-thumb .icon { color: var(--ink-2); }
.bo-hint { margin-top: 12px; }
.bo-archived { margin-top: 24px; }
.bo-archived summary { cursor: pointer; padding: 6px 0; }
.bo-archived .list { margin-top: 8px; }

.bo-tray { margin-top: 24px; padding: 18px 20px; border-radius: var(--radius-card); background: var(--grey-50); display: flex; flex-direction: column; gap: 12px; }
.bo-tray__item { display: flex; flex-direction: column; gap: 6px; }
.bo-tray__name { font-size: 14px; }

.bo-pagedrop { position: fixed; inset: 0; z-index: 900; background: rgba(246, 246, 245, .9); display: grid; place-items: center; padding: 24px; pointer-events: none; }
.bo-pagedrop__inner { display: grid; place-items: center; gap: 14px; width: min(640px, 100%); min-height: 260px; border-radius: var(--radius-panel); background: var(--grad-grey); outline: 2px dashed var(--ink-3); outline-offset: -12px; }

/* Activité */
.bo-actcard { padding: 18px 20px; border-radius: var(--radius-card); background: var(--grey-50); }
.bo-actlist { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 14px; }
.bo-decision { display: flex; flex-direction: column; gap: 4px; font-size: 14px; }
.bo-decision .row { align-items: baseline; gap: 8px; }
.bo-decision .dot { transform: translateY(-1px); }
.bo-dot--ok { background: var(--ok); }
.bo-dot--warn { background: var(--warn); }
.bo-quote { margin: 2px 0 0; padding: 8px 12px; border-radius: 10px; background: var(--paper); color: var(--ink); }
.bo-statement { margin: 0; }
.bo-guest { display: flex; align-items: center; gap: 12px; font-size: 14px; }
.bo-guest a { color: var(--ink-2); text-decoration: none; }
.bo-guest a:hover { color: var(--ink); text-decoration: underline; }
.bo-avatar { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: var(--grey-200); font-family: var(--font-display); font-style: italic; font-weight: 600; font-size: 14px; flex: none; }
.bo-guest__when { flex: none; }
.bo-events summary { cursor: pointer; }
.bo-events .bo-actlist { margin-top: 12px; gap: 8px; }
.bo-event { gap: 12px; }

/* Menu « … » */
.bo-menuwrap { position: relative; flex: none; }
.bo-menubtn { background: transparent; }
.bo-menubtn:hover, .bo-menubtn[aria-expanded="true"] { background: var(--grey-200); }
.bo-menu { position: absolute; right: 0; top: calc(100% + 6px); z-index: 50; min-width: 220px; padding: 6px; border-radius: var(--radius-card); background: var(--navy-900); color: var(--on-accent); display: flex; flex-direction: column; }
.bo-menu__item { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border: 0; border-radius: 10px; background: none; color: inherit; font-family: var(--font-ui); font-size: 14px; text-align: left; cursor: pointer; min-height: 40px; }
.bo-menu__item:hover, .bo-menu__item:focus-visible { background: rgba(255, 255, 255, .1); outline: none; }
.bo-menu__item--muted { color: #c9cfd6; }

/* Fenêtres */
.bo-modal__split { justify-content: space-between; align-items: center; }

/* ---------- Mobile ---------- */
@media (max-width: 960px) {
  .bo-cols { grid-template-columns: 1fr; gap: 0; }
  .bo-sendgrid { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .bo-topbar { padding: 16px; }
  .bo-hero { padding: 14px; gap: 14px; border-radius: 28px; }
  .bo-modeseg { align-self: stretch; }
  .bo-modeseg button { flex: 1; padding: 10px 6px; white-space: nowrap; font-size: 13px; }
  .bo-drop { min-height: 260px; padding: 24px 16px; }
  .bo-sendgrid__files, .bo-sendgrid__opts, .bo-requestform { padding: 18px; border-radius: 22px; }
  .bo-two { grid-template-columns: 1fr; }
  .bo-section { margin-top: 36px; }
  .bo-share { flex-wrap: wrap; row-gap: 8px; }
  .bo-share__main { flex: 1 1 0; }
  .bo-share__tags { order: 4; max-width: none; justify-content: flex-start; flex: 1 1 100%; padding-left: 58px; }
  .bo-share__tags:empty { display: none; }
  .bo-share__when { min-width: 0; }
  .bo-asset { flex-wrap: wrap; row-gap: 8px; }
  .bo-asset__main { flex: 1 1 0; }
  .bo-asset__tags { order: 5; max-width: none; justify-content: flex-start; flex: 1 1 100%; padding-left: 70px; }
  .bo-asset__tags:empty { display: none; }
  .bo-hide-sm { display: none; }
  .bo-linkrow .bo-copy { min-width: 0; flex-basis: 100%; }
  .bo-headactions { width: 100%; }
  .bo-headactions .btn:not(.btn--icon) { flex: 1; }
  .bo-modal__split { flex-direction: column-reverse; align-items: stretch; }
  .bo-modal__split .row { justify-content: flex-end; }
  .btn--sm.btn--icon { width: 40px; min-height: 40px; }
}