/* ══════════════════════════════════════════════════════════════════════════
   NOUVEAU BACKOFFICE — /admin
   La charte du site vitrine (wr.css) : Montserrat, fond #FBFCFE, violet
   #8A63C1. Chaque univers n'a qu'une couleur d'accent, posée sur le point
   du menu, l'onglet actif, le sur-titre et les puces — jamais sur des
   aplats entiers.
   ══════════════════════════════════════════════════════════════════════ */
:root{
  --bg:#FBFCFE;--bg2:#F4F6FB;--card:#FFFFFF;--line:#EEF1F7;--line2:#E5E9F0;
  --ink:#1E1B2E;--ink2:#374151;--muted:#6B7280;--muted2:#9CA3AF;
  --violet:#8A63C1;--violet-dark:#6B47A6;--violet-soft:#F2EDFA;--violet-softer:#F8F4FD;
  --wp:#2F6FED;--wp-dark:#1D4ED8;--wp-soft:#E8F0FE;
  --hn:#0E9F8A;--hn-dark:#0B6E5C;--hn-soft:#DFF4EE;
  --ex:#4B5563;--ex-soft:#F4F6FB;
  --ok:#10B981;--ok-soft:#D1FAE5;--ok-fg:#047857;--warn:#F59E0B;--warn-soft:#FEF3C7;--warn-fg:#B45309;
  --danger:#EF4444;--danger-soft:#FEE2E2;--danger-fg:#B91C1C;--info-soft:#DBEAFE;--info-fg:#1E40AF;
  --shadow:0 1px 2px rgba(30,27,46,.04),0 4px 16px rgba(30,27,46,.04);
}
*{box-sizing:border-box}
html,body{margin:0;min-height:100%;background:var(--bg)}
body{font-family:'Montserrat',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;color:var(--ink);font-size:14px;line-height:1.5}
a{color:var(--violet-dark);text-decoration:none}a:hover{color:var(--violet)}
code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:12px;background:var(--bg2);padding:1px 6px;border-radius:6px}
svg.i{width:16px;height:16px;flex:none;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}

/* ── Coquille : celle du site (wr-site.css). Ici, seulement la cohabitation. ── */
body.bo-body{font-family:'Montserrat',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;color:var(--ink);font-size:14px;line-height:1.5;background:var(--bg)}
.bo-shell{min-height:calc(100vh - 68px - 420px)}
.content{display:flex;flex-direction:column;gap:22px;padding:8px 0 32px;min-width:0}
.bo-colonne .wr-side__toggle{display:none}
.sb-dot{width:8px;height:8px;border-radius:50%;display:inline-block;margin-right:8px;vertical-align:middle;position:relative;top:-1px}
svg.i{width:16px;height:16px;flex:none;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
/* Bouton ⌘K dans le header du site : la pilule blanche translucide du site. */
.wr-header .kbtn{height:38px;padding:0 10px;border-radius:999px;border:1px solid rgba(255,255,255,.95);background:rgba(255,255,255,.6);color:#5E5675;display:inline-flex;align-items:center;gap:8px;cursor:pointer;font:inherit}
.wr-header .kbtn:hover{background:#fff;color:#3B3355}
.wr-header .kbtn kbd{font-family:inherit;font-size:11px;font-weight:700;border:1px solid rgba(107,71,166,.18);border-radius:6px;padding:1px 5px}
.wr-header .wr-user{cursor:pointer;font:inherit}
.bo-menu__qui{padding:8px 12px 10px;border-bottom:1px solid var(--line);margin-bottom:6px}
.bo-menu__qui b{display:block;font-size:13px}.bo-menu__qui small{display:block;font-size:11.5px;color:var(--muted)}
.bo-header .wr-nav__link{white-space:nowrap}
@media (max-width:1500px){.bo-header .wr-head__dash{display:none}}
.wr-header .kbtn--txt{font-size:12.5px;font-weight:700;text-decoration:none}
@media (max-width:1200px){.bo-header .kbtn--txt span{display:none}}
@media (max-width:991px){.bo-header .kbtn,.bo-header .wr-user__name{display:none}}

/* ── Titres, boutons, onglets ──────────────────────────────────────────── */
.head{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;flex-wrap:wrap}
.head__actions{display:flex;gap:8px;flex-wrap:wrap}
.eyebrow{display:inline-flex;align-items:center;gap:7px;height:24px;padding:0 10px;border-radius:999px;font-size:10.5px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;background:var(--bg2);color:var(--ink2)}
.eyebrow i{width:7px;height:7px;border-radius:50%;background:currentColor;display:block}
.eyebrow.u-wr{background:var(--violet-soft);color:var(--violet-dark)}.eyebrow.u-wp{background:var(--wp-soft);color:var(--wp-dark)}.eyebrow.u-hn{background:var(--hn-soft);color:var(--hn-dark)}
.h1{margin:10px 0 0;font-size:28px;line-height:1.15;font-weight:800;letter-spacing:-.02em}
.h1 em{font-style:italic;font-weight:800;color:var(--violet)}
.h1 .n{color:var(--muted2);font-weight:600}
.lede{margin:6px 0 0;color:var(--muted);font-size:13.5px}
.btn{height:40px;padding:0 16px;border-radius:12px;border:1px solid transparent;background:var(--violet);color:#fff;font:inherit;font-size:13.5px;font-weight:700;display:inline-flex;align-items:center;gap:8px;cursor:pointer;text-decoration:none;white-space:nowrap}
.btn:hover{background:var(--violet-dark);color:#fff}
.btn--2{background:#fff;border-color:var(--line2);color:var(--ink2)}.btn--2:hover{background:var(--bg2);color:var(--ink)}
.btn--danger{background:#fff;border-color:#FECACA;color:var(--danger-fg)}.btn--danger:hover{background:#FEF2F2;color:var(--danger-fg)}
.btn--danger-solid{background:var(--danger);color:#fff}.btn--danger-solid:hover{background:#DC2626;color:#fff}
.btn--sm{height:32px;padding:0 11px;font-size:12.5px;border-radius:9px}
.btn--block{width:100%;justify-content:center}
.btn[disabled]{opacity:.5;cursor:default;pointer-events:none}
.btn svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.tabs{display:flex;gap:4px;padding:4px;background:var(--bg2);border-radius:14px;flex-wrap:wrap;align-self:flex-start}
.tab{height:36px;padding:0 14px;border-radius:10px;font-size:13px;font-weight:600;color:var(--muted);display:inline-flex;align-items:center;gap:8px;text-decoration:none;white-space:nowrap}
.tab i{width:8px;height:8px;border-radius:50%;display:block}
.tab:hover{color:var(--ink)}
.tab.is-on{background:#fff;color:var(--ink);box-shadow:var(--shadow);font-weight:700}
.crumbs{display:flex;align-items:center;gap:8px;font-size:12.5px;color:var(--muted);flex-wrap:wrap}
.crumbs a{font-weight:600}

/* ── Chiffres clés, grilles, cartes ────────────────────────────────────── */
.kpis{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
.kpi{background:var(--card);border:1px solid var(--line);border-radius:18px;padding:18px 20px;box-shadow:var(--shadow);display:flex;flex-direction:column;gap:6px;min-width:0}
.kpi__l{font-size:12px;font-weight:600;color:var(--muted)}
.kpi__v{font-size:30px;font-weight:800;letter-spacing:-.02em;line-height:1;font-variant-numeric:tabular-nums}
.kpi__d{font-size:12px;color:var(--muted);display:flex;align-items:center;gap:6px;margin-top:2px;flex-wrap:wrap}
.up{color:var(--ok-fg);font-weight:700}.down{color:var(--danger-fg);font-weight:700}
.grid2{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);gap:14px;align-items:start}
.grid2--even{grid-template-columns:1fr 1fr}
.grid3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.stack{display:flex;flex-direction:column;gap:14px;min-width:0}
.card{background:var(--card);border:1px solid var(--line);border-radius:18px;box-shadow:var(--shadow);min-width:0;color:inherit}
.card--u{padding:18px 20px;border-top:3px solid var(--violet);display:block}
.card--u.u-wp{border-top-color:var(--wp)}.card--u.u-hn{border-top-color:var(--hn)}
.card--u .mini{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:14px}
.card--u .mini strong{display:block;font-size:22px;font-weight:800;font-variant-numeric:tabular-nums}
.card--u .mini span{font-size:12px;color:var(--muted)}
.card__h{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:16px 20px 0;flex-wrap:wrap}
.card__t{margin:0;font-size:15px;font-weight:800;letter-spacing:-.01em}
.card__b{padding:14px 20px 18px}
.card__b+.card__b{border-top:1px solid var(--line)}
.link{font-size:12.5px;font-weight:700}
.row{display:flex;align-items:center;gap:12px;padding:11px 0;border-top:1px solid var(--line);color:inherit}
.row:first-child{border-top:0}
.row strong{display:block;font-size:13.5px}
.row .sub{font-size:12px;color:var(--muted)}
.row .grow{flex:1;min-width:0}
.legend{display:flex;gap:14px;font-size:12px;color:var(--muted);flex-wrap:wrap}
.legend i{display:inline-block;width:9px;height:9px;border-radius:2px;margin-right:5px;vertical-align:middle}
.chip{display:inline-flex;align-items:center;height:22px;padding:0 8px;border-radius:999px;font-size:11px;font-weight:700;white-space:nowrap}
.c-ok{background:var(--ok-soft);color:var(--ok-fg)}.c-warn{background:var(--warn-soft);color:var(--warn-fg)}.c-danger{background:var(--danger-soft);color:var(--danger-fg)}.c-info{background:var(--info-soft);color:var(--info-fg)}.c-wr{background:var(--violet-soft);color:var(--violet-dark)}.c-wp{background:var(--wp-soft);color:var(--wp-dark)}.c-hn{background:var(--hn-soft);color:var(--hn-dark)}.c-muted{background:var(--bg2);color:var(--muted)}
.avatar{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;font-size:12px;font-weight:700;flex:none;background:var(--violet-soft);color:var(--violet-dark)}
.avatar--lg{width:56px;height:56px;font-size:18px}
.avatar.u-wp{background:var(--wp-soft);color:var(--wp-dark)}.avatar.u-hn{background:var(--hn-soft);color:var(--hn-dark)}
.avatar.a-warn{background:var(--warn-soft);color:var(--warn-fg)}.avatar.a-danger{background:var(--danger-soft);color:var(--danger-fg)}.avatar.a-ok{background:var(--ok-soft);color:var(--ok-fg)}
.bars{display:flex;align-items:flex-end;gap:5px;height:150px;padding-top:8px}
.bars i{flex:1;border-radius:6px 6px 3px 3px;background:var(--violet-soft);display:block;min-width:0;min-height:2px;position:relative}
.bars i.hi{background:var(--violet)}
.bars i.u-wp{background:var(--wp)}.bars i.u-hn{background:var(--hn)}
.bars i:hover::after{content:attr(data-t);position:absolute;bottom:100%;left:50%;transform:translateX(-50%);margin-bottom:6px;background:var(--ink);color:#fff;font-size:11px;font-weight:600;padding:4px 8px;border-radius:7px;white-space:nowrap;z-index:2}
.bars .stack2{display:flex;flex-direction:column;justify-content:flex-end;flex:1;min-width:0;height:100%;gap:2px}
.bars .stack2 i{flex:none;width:100%}
.axis{display:flex;justify-content:space-between;font-size:11px;color:var(--muted2);margin-top:8px}
.hbars{display:flex;flex-direction:column;gap:10px}
.hbar{display:grid;grid-template-columns:120px minmax(0,1fr) 60px;align-items:center;gap:10px;font-size:12.5px}
.hbar .meter{height:10px}
.hbar .num{text-align:right}
.tablewrap{overflow-x:auto}
table.t{width:100%;border-collapse:collapse;font-size:13px}
.t th{text-align:left;font-size:11px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--muted2);padding:0 14px 10px;border-bottom:1px solid var(--line2);white-space:nowrap}
.t td{padding:12px 14px;border-bottom:1px solid var(--line);vertical-align:middle}
.t tr:last-child td{border-bottom:0}
.t tr:hover td{background:var(--violet-softer)}
.t .num{text-align:right;font-variant-numeric:tabular-nums}
.t .who{display:flex;align-items:center;gap:10px;min-width:0}
.t .who strong{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:260px}
.t .who span{display:block;font-size:12px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:260px}
.t .sub{font-size:12px;color:var(--muted)}
.t .empty{text-align:center;color:var(--muted);padding:28px 14px}
.check{width:18px;height:18px;border-radius:5px;border:1.5px solid #C9CFDA;background:#fff;display:inline-block;vertical-align:middle;margin:0;accent-color:var(--violet);cursor:pointer}
.filters{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.filters .sep{width:1px;height:22px;background:var(--line2);margin:0 4px}
.fchip{height:34px;padding:0 13px;border-radius:999px;border:1px solid var(--line2);background:#fff;font:inherit;font-size:12.5px;font-weight:600;color:var(--ink2);display:inline-flex;align-items:center;gap:6px;cursor:pointer;text-decoration:none}
.fchip:hover{background:var(--bg2);color:var(--ink)}
.fchip.is-on{background:var(--ink);border-color:var(--ink);color:#fff}
.fchip i{width:8px;height:8px;border-radius:50%;display:block}
.toolbar{display:flex;flex-direction:column;gap:12px}
.bulk{display:none;align-items:center;gap:8px;padding:10px 20px;background:var(--violet-softer);border-top:1px solid var(--line);border-bottom:1px solid var(--line);font-size:13px;flex-wrap:wrap}
.bulk.is-on{display:flex}
.bulk b{margin-right:auto}
.pager{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 20px 16px;border-top:1px solid var(--line);flex-wrap:wrap}
.pager__btns{display:flex;gap:6px;flex-wrap:wrap}
.meter{height:8px;border-radius:999px;background:var(--bg2);overflow:hidden}
.meter i{display:block;height:100%;border-radius:999px;background:var(--violet)}
.meter i.u-wp{background:var(--wp)}.meter i.u-hn{background:var(--hn)}.meter i.a-warn{background:var(--warn)}.meter i.a-danger{background:var(--danger)}
.field{display:flex;flex-direction:column;gap:6px;min-width:0}
.field+.field{margin-top:14px}
.label{font-size:12.5px;font-weight:600;color:var(--ink)}
.input{height:42px;border-radius:10px;border:1px solid var(--line2);background:#fff;padding:0 13px;font:inherit;font-size:14px;color:var(--ink);width:100%}
.input:focus{outline:2px solid var(--violet-soft);border-color:var(--violet)}
textarea.input{height:auto;padding:10px 13px;resize:vertical}
.note{font-size:12px;color:var(--muted)}
.dl{display:grid;grid-template-columns:150px minmax(0,1fr);gap:10px 16px;font-size:13.5px;margin:0}
.dl dt{color:var(--muted);margin:0}.dl dd{margin:0;font-weight:500;min-width:0;overflow-wrap:anywhere}
.danger-row{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:12px 0;border-top:1px solid var(--line)}
.danger-row:first-child{border-top:0}
.danger-row strong{display:block;font-size:13.5px}
.quota{display:flex;align-items:baseline;gap:6px}
.quota strong{font-size:22px;font-weight:800}

/* ── Alertes (flashes) ─────────────────────────────────────────────────── */
.flashes{display:flex;flex-direction:column;gap:8px}
.alert{padding:12px 16px;border-radius:12px;font-size:13.5px;font-weight:500;border:1px solid transparent}
.alert--success{background:var(--ok-soft);color:var(--ok-fg)}
.alert--danger,.alert--error{background:var(--danger-soft);color:var(--danger-fg)}
.alert--warning{background:var(--warn-soft);color:var(--warn-fg)}
.alert--info{background:var(--info-soft);color:var(--info-fg)}

/* ── Modale ─────────────────────────────────────────────────────────────── */
.modal{border:0;padding:0;background:transparent;max-width:100vw;max-height:100vh}
.modal::backdrop{background:rgba(30,27,46,.45);backdrop-filter:blur(2px)}
.modal__box{width:min(480px,calc(100vw - 32px));background:#fff;border-radius:22px;padding:26px 26px 22px;box-shadow:0 20px 60px rgba(30,27,46,.25);display:flex;flex-direction:column;gap:14px}
.modal__t{margin:0;font-size:19px;font-weight:800;letter-spacing:-.01em}
.modal__p{margin:0;font-size:13.5px;color:var(--ink2)}
.modal__actions{display:flex;justify-content:flex-end;gap:8px;margin-top:6px;flex-wrap:wrap}
.modal ul{margin:0;padding-left:18px;font-size:13px;color:var(--ink2)}

/* ── Palette ⌘K ─────────────────────────────────────────────────────────── */
.kbar{border:0;padding:0;background:transparent;max-width:100vw;max-height:100vh;margin:10vh auto 0}
.kbar::backdrop{background:rgba(30,27,46,.45);backdrop-filter:blur(2px)}
.kbar__box{width:min(640px,calc(100vw - 32px));background:#fff;border-radius:20px;box-shadow:0 20px 60px rgba(30,27,46,.25);overflow:hidden}
.kbar__in{display:flex;align-items:center;gap:10px;padding:14px 18px;border-bottom:1px solid var(--line)}
.kbar__in input{flex:1;border:0;outline:0;font:inherit;font-size:15px;color:var(--ink);background:transparent}
.kbar__list{max-height:60vh;overflow-y:auto;padding:8px}
.kbar__item{display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:12px;color:inherit}
.kbar__item:hover,.kbar__item.is-on{background:var(--violet-softer)}
.kbar__item .type{font-size:10.5px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--muted2);width:84px;flex:none}
.kbar__item b{display:block;font-size:13.5px}
.kbar__item small{display:block;font-size:12px;color:var(--muted)}
.kbar__empty{padding:22px;text-align:center;color:var(--muted);font-size:13px}

/* ── Connexion ─────────────────────────────────────────────────────────── */
.login{min-height:100vh;display:flex;flex-direction:column}
.login__corps{flex:1;display:flex;flex-wrap:wrap}
.login__form{flex:1 1 420px;min-width:0;display:flex;align-items:center;justify-content:center;padding:48px 24px}
.login__box{width:100%;max-width:420px;background:#fff;border:1px solid var(--line);border-radius:28px;padding:36px;box-shadow:var(--shadow);display:flex;flex-direction:column;gap:18px}
.login__side{flex:1 1 420px;min-width:0;background:linear-gradient(160deg,var(--violet-soft),var(--bg) 60%);border-left:1px solid var(--line);display:flex;flex-direction:column;justify-content:center;padding:56px 48px;gap:18px}
.login__side p{margin:0;font-size:30px;line-height:1.2;font-weight:800;letter-spacing:-.02em;max-width:520px}
.login__side p em{font-style:italic;color:var(--violet)}
.login__univ{display:flex;flex-direction:column;gap:10px;max-width:460px}
.login__univ div{display:flex;gap:12px;align-items:center;padding:14px 16px;background:#fff;border:1px solid var(--line);border-radius:16px}
.login__univ div>i{width:10px;height:36px;border-radius:6px;flex:none;display:block}
.login__univ strong{display:block;font-size:14px}
.login .h1{margin-top:6px;font-size:25px}
.login .remember{display:flex;align-items:center;justify-content:space-between;font-size:13px;gap:10px;flex-wrap:wrap}
.login .remember label{display:flex;align-items:center;gap:8px}

/* ── Responsive ────────────────────────────────────────────────────────── */
@media (max-width:1100px){.kpis{grid-template-columns:repeat(2,minmax(0,1fr))}.grid3{grid-template-columns:1fr}}
@media (max-width:900px){
  .grid2,.grid2--even{grid-template-columns:1fr}
  .content{padding:18px 16px 32px}.top{padding:0 16px}.dl{grid-template-columns:1fr}
  .login__side{padding:36px 24px}.login__side p{font-size:24px}
}

/* Les pages de /administration ont leurs propres marges : pas de double espacement. */
.bo-body .content>.bo-head,.bo-body .content>.bo-card{margin-top:0}

/* ── Groupes repliables de la colonne (l'étiquette du site devient un <summary>) ── */
.bo-pli__head{display:flex;align-items:center;gap:6px;cursor:pointer;list-style:none;user-select:none}
.bo-pli__head::-webkit-details-marker{display:none}
.bo-pli__head::marker{content:''}
.bo-pli__head:hover{color:var(--ink)}
.bo-pli__chev{width:14px;height:14px;margin-left:auto;flex:none;transition:transform .18s ease}
.bo-pli[open]>.bo-pli__head .bo-pli__chev{transform:rotate(180deg)}
.bo-pli.is-courant>.bo-pli__head{color:var(--violet-dark)}
.bo-pli__sous{font-size:10px;padding-top:10px;color:var(--muted2)}
.bo-pli__puce{width:5px;height:5px;border-radius:50%;background:currentColor;opacity:.35;flex:none;margin:0 6px 0 7px}
.wr-side__link.is-active .bo-pli__puce{opacity:1}
.bo-pli__qui{font-size:12px;color:var(--muted);padding:4px 12px 6px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
