:root{--ink:#15171a;--muted:#7a8089;--line:#e7e9ee;--bg:#f5f6f8;--accent:#2b2f36;--ok:#2c7a3f;--err:#b03636}
*{box-sizing:border-box;margin:0;padding:0}
body{font-family:'Inter',system-ui,Arial,sans-serif;background:var(--bg);color:var(--ink);font-size:14px;line-height:1.5}
a{color:inherit;text-decoration:none}
input,textarea,select,button{font-family:inherit;font-size:14px}

/* login */
.login-body{display:flex;align-items:center;justify-content:center;min-height:100vh}
.login-card{background:#fff;border:1px solid var(--line);border-radius:8px;padding:36px;width:340px;display:flex;flex-direction:column;gap:16px;box-shadow:0 20px 50px rgba(0,0,0,.06)}
.login-card h1{font-size:1.3rem;text-align:center}
.login-card label{display:flex;flex-direction:column;gap:6px;font-size:.8rem;color:var(--muted)}
.login-card input{padding:11px 12px;border:1px solid var(--line);border-radius:6px}

/* shell */
.a-shell{display:flex;min-height:100vh}
.a-side{width:240px;background:#fff;border-right:1px solid var(--line);display:flex;flex-direction:column;position:sticky;top:0;height:100vh}
.a-brand{padding:22px 22px;font-weight:700;font-size:1.1rem;border-bottom:1px solid var(--line)}
.a-brand small{display:block;font-weight:500;color:var(--muted);font-size:.7rem;text-transform:uppercase;letter-spacing:.15em;margin-top:3px}
.a-side nav{display:flex;flex-direction:column;padding:12px 0;flex:1}
.a-side nav a{padding:11px 22px;color:var(--muted);border-left:3px solid transparent}
.a-side nav a:hover{color:var(--ink);background:#fafbfc}
.a-side nav a.on{color:var(--ink);border-left-color:var(--ink);font-weight:600;background:#f7f8fa}
.a-side-foot{padding:16px 22px;border-top:1px solid var(--line);display:flex;flex-direction:column;gap:8px;font-size:.82rem;color:var(--muted)}
.a-main{flex:1;padding:32px 44px;max-width:1180px}

/* mise en page catégories : table large + formulaire à droite */
.cat-layout{display:grid;grid-template-columns:minmax(0,1fr) 360px;gap:40px;align-items:start}
.a-tablewrap{overflow-x:auto}
.cat-layout .a-table td.a-row{white-space:nowrap}
@media(max-width:980px){.cat-layout{grid-template-columns:1fr;gap:24px}}

.a-flash{background:#eef7f0;border:1px solid #bfe0c8;color:var(--ok);padding:12px 16px;border-radius:6px;margin-bottom:20px}
.a-alert{padding:10px 14px;border-radius:6px;font-size:.85rem}
.a-alert.error{background:#fbedee;border:1px solid #e7c0c4;color:var(--err)}

.a-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:24px}
.a-head h1{font-size:1.5rem}
h2.a-h2{font-size:1.1rem;margin:26px 0 12px}

.a-btn{display:inline-flex;align-items:center;gap:6px;padding:10px 18px;border:1px solid var(--ink);border-radius:6px;background:#fff;cursor:pointer;transition:.2s}
.a-btn.primary{background:var(--ink);color:#fff}
.a-btn.primary:hover{opacity:.85}
.a-btn.small{padding:6px 12px;font-size:.8rem}
.a-btn.danger{border-color:var(--err);color:var(--err)}
.a-btn.danger:hover{background:var(--err);color:#fff}
.a-btn.ghost{border-color:var(--line);color:var(--muted)}

/* cards / tables */
.a-card{background:#fff;border:1px solid var(--line);border-radius:8px;padding:24px;margin-bottom:20px}
.a-table{width:100%;border-collapse:collapse;background:#fff;border:1px solid var(--line);border-radius:8px;overflow:hidden}
.a-table th,.a-table td{text-align:left;padding:12px 16px;border-bottom:1px solid var(--line);vertical-align:middle}
.a-table th{background:#fafbfc;font-size:.72rem;text-transform:uppercase;letter-spacing:.08em;color:var(--muted)}
.a-table tr:last-child td{border-bottom:none}
.a-thumb{width:54px;height:54px;object-fit:cover;border-radius:4px;background:#eee}
.badge{font-size:.7rem;padding:3px 9px;border-radius:20px;background:#eef0f3;color:var(--muted)}
.badge.on{background:#e7f5ec;color:var(--ok)}
.badge.off{background:#f3e9e9;color:var(--err)}

/* forms */
.a-form{display:flex;flex-direction:column;gap:18px}
.a-grid2{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.a-field{display:flex;flex-direction:column;gap:6px}
.a-field label{font-size:.75rem;text-transform:uppercase;letter-spacing:.06em;color:var(--muted)}
.a-field input,.a-field textarea,.a-field select{padding:10px 12px;border:1px solid var(--line);border-radius:6px;background:#fff}
.a-field textarea{resize:vertical;min-height:90px}
.a-row{display:flex;gap:12px;align-items:center}
.a-actions{display:flex;gap:12px;align-items:center;margin-top:8px}
.a-check{display:flex;align-items:center;gap:8px;color:var(--ink);text-transform:none;letter-spacing:0}
.a-check input{width:auto}

/* media manager */
.media-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:14px;margin-top:8px}
.media-item{border:1px solid var(--line);border-radius:6px;overflow:hidden;background:#fff}
.media-item .m-vis{aspect-ratio:1/1;background:#f1f1f1;display:flex;align-items:center;justify-content:center}
.media-item .m-vis img,.media-item .m-vis video{width:100%;height:100%;object-fit:cover}
.media-item .m-bar{display:flex;justify-content:space-between;align-items:center;padding:7px 9px;gap:6px}
.media-item.cover{outline:2px solid var(--ink)}
.m-cover-tag{font-size:.66rem;background:var(--ink);color:#fff;padding:2px 7px;border-radius:10px}
.inline{display:inline}
.muted{color:var(--muted)}
.dash-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.dash-card{background:#fff;border:1px solid var(--line);border-radius:8px;padding:22px}
.dash-card .n{font-size:2rem;font-weight:700;font-family:'Syne',sans-serif}
.dash-card .l{color:var(--muted);font-size:.85rem;margin-top:4px}
@media(max-width:820px){.a-side{width:64px}.a-brand,.a-side nav a,.a-side-foot{font-size:0}.a-grid2{grid-template-columns:1fr}.dash-grid{grid-template-columns:1fr 1fr}}

/* mise en page catégories */
.cat-layout{display:grid;grid-template-columns:minmax(0,1fr) 360px;gap:40px;align-items:start}
.a-tablewrap{overflow-x:auto}
.cat-layout .a-table td.a-row{white-space:nowrap}
@media(max-width:980px){.cat-layout{grid-template-columns:1fr;gap:24px}}

/* onglets réorganisation */
.arrange-tabs{display:flex;flex-wrap:wrap;gap:8px;border-bottom:1px solid var(--line);padding-bottom:0;margin-bottom:6px}
.arrange-tabs .tab{padding:9px 16px;font-size:.85rem;color:var(--muted);border-bottom:2px solid transparent;margin-bottom:-1px}
.arrange-tabs .tab:hover{color:var(--ink)}
.arrange-tabs .tab.on{color:var(--ink);font-weight:600;border-bottom-color:var(--ink)}
.arrange-tabs .tab-add{border:1px dashed var(--line);border-radius:6px;background:#fafbfc;color:var(--muted);cursor:pointer;margin:2px 0 4px 6px;padding:6px 12px}
.arrange-tabs .tab-add:hover{color:var(--ink);border-color:var(--ink)}
.arrange-tabs.subtabs{margin-top:10px;border-bottom:none;align-items:center}
.subtabs-label{font-size:.72rem;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);margin-right:4px}
.tab-featured{color:#b8860b!important}
.tab-featured.on{border-bottom-color:#b8860b!important;color:#9a6f08!important}
.sc-star{position:absolute;bottom:6px;right:6px;border:none;background:rgba(0,0,0,.5);color:#fff;border-radius:50%;width:30px;height:30px;font-size:1rem;cursor:pointer;line-height:1;display:flex;align-items:center;justify-content:center;transition:.15s}
.sc-star:hover{background:rgba(0,0,0,.75)}
.sc-star.on{background:#f4b400;color:#fff}

/* menu contextuel (clic droit) */
.ctx-menu{position:absolute;z-index:300;background:#fff;border:1px solid var(--line);border-radius:8px;box-shadow:0 16px 40px rgba(0,0,0,.18);padding:5px;min-width:200px}
.ctx-menu[hidden]{display:none}
.ctx-del{display:block;width:100%;text-align:left;border:none;background:none;padding:9px 12px;border-radius:6px;cursor:pointer;font-size:.85rem;color:var(--err)}
.ctx-del:hover{background:#fbedee}

/* personnalisation : alignement drag & drop */
.align-dnd{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;max-width:560px}
.align-cell{border:1px dashed var(--line);border-radius:8px;min-height:64px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;cursor:pointer;transition:.15s}
.align-cell.over{border-color:var(--ink);background:#f5f6f8}
.align-label{font-size:.7rem;text-transform:uppercase;letter-spacing:.06em;color:var(--muted)}
.align-chip{background:var(--ink);color:#fff;border-radius:6px;padding:4px 14px;font-size:1.1rem;cursor:grab;line-height:1}
.align-chip:active{cursor:grabbing}
.font-pick{font-size:1rem}

/* grille triable (drag & drop) — vignettes compactes */
.sort-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(118px,1fr));gap:12px;margin-top:8px}
.sort-card{background:#fff;border:1px solid var(--line);border-radius:7px;overflow:hidden;cursor:grab;user-select:none;-webkit-user-select:none;transition:box-shadow .15s}
.sort-card:hover{box-shadow:0 4px 14px rgba(0,0,0,.10)}
.sort-card:active{cursor:grabbing}
.sc-media{position:relative;aspect-ratio:1/1;background:#f1f1f1}
.sc-media img,.sc-media video{width:100%;height:100%;object-fit:cover;display:block;pointer-events:none}
.sc-empty{width:100%;height:100%;background:linear-gradient(135deg,#f0f0f0,#e3e3e3)}
.sc-handle{position:absolute;top:5px;left:5px;background:rgba(0,0,0,.5);color:#fff;border-radius:5px;font-size:.7rem;padding:1px 6px;letter-spacing:1px}
.sc-hidden{position:absolute;top:5px;right:5px;background:var(--err);color:#fff;border-radius:5px;font-size:.58rem;padding:2px 5px;text-transform:uppercase}
.sc-title{padding:6px 8px;font-size:.72rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--muted)}
.sc-move{display:flex;gap:5px;padding:0 6px 7px;justify-content:space-between}
.sc-mbtn{flex:1;border:1px solid var(--line);background:#fafbfc;border-radius:5px;font-size:.66rem;padding:4px 2px;cursor:pointer;color:var(--ink)}
.sc-mbtn:hover{background:var(--ink);color:#fff;border-color:var(--ink)}
/* états SortableJS */
.sort-ghost{opacity:.35}
.sort-chosen{box-shadow:0 0 0 2px var(--ink) inset}
.sort-drag{box-shadow:0 18px 40px rgba(0,0,0,.28)!important;opacity:.97!important}

/* page Bio : éditeur */
.bio-tabs{display:flex;gap:8px;border-bottom:1px solid var(--line);margin:8px 0 0}
.bio-tabs .bt{padding:10px 18px;font-size:.85rem;color:var(--muted);border:none;border-bottom:2px solid transparent;margin-bottom:-1px;background:none;cursor:pointer}
.bio-tabs .bt:hover{color:var(--ink)}
.bio-tabs .bt.on{color:var(--ink);font-weight:600;border-bottom-color:var(--ink)}
.bio-emoji{display:flex;flex-wrap:wrap;align-items:center;gap:4px;padding:12px 0}
.emoji-btn{border:1px solid var(--line);background:#fff;border-radius:6px;font-size:1.05rem;line-height:1;padding:5px 7px;cursor:pointer}
.emoji-btn:hover{background:#f3f4f6}
.bio-pane .ql-container{min-height:320px;font-size:15px}
.bio-pane .ql-editor{min-height:320px}
.bio-preview-box{border:1px solid var(--line);border-radius:6px;padding:28px;line-height:1.7}
.bio-preview-box h1,.bio-preview-box h2,.bio-preview-box h3{font-family:'Syne',sans-serif;margin:.6em 0 .3em}
.bio-preview-box img{max-width:100%;height:auto;margin:10px 0}

/* œil mot de passe */
.pw-wrap{position:relative;display:block}
.pw-wrap input{width:100%;padding-right:40px!important}
.pw-eye{position:absolute;top:50%;right:8px;transform:translateY(-50%);border:none;background:none;cursor:pointer;font-size:1rem;opacity:.5;line-height:1;padding:2px}
.pw-eye:hover,.pw-eye.on{opacity:1}

/* menu déroulant "déplacer vers page" (Réorganiser) */
.sc-pagesel{width:100%;border:1px solid var(--line);background:#fafbfc;border-radius:5px;font-size:.66rem;padding:5px 4px;cursor:pointer;color:var(--ink)}
.sc-pagesel:hover{border-color:var(--ink)}

/* fenêtre d'édition rapide */
.aw-modal{position:fixed;inset:0;z-index:200;background:rgba(15,17,20,.55);display:flex;align-items:flex-start;justify-content:center;padding:40px 16px;overflow:auto}
.aw-modal[hidden]{display:none}
.aw-modal-box{background:#fff;border-radius:10px;padding:28px;width:100%;max-width:640px;position:relative;box-shadow:0 30px 70px rgba(0,0,0,.3)}
.aw-close{position:absolute;top:12px;right:16px;border:none;background:none;font-size:1.6rem;cursor:pointer;color:var(--muted);line-height:1}
.aw-close:hover{color:var(--ink)}
.aw-status{font-size:.85rem}

/* menus rapides dans la liste Œuvres */
.qf{margin:0}
.qsel{padding:7px 10px;border:1px solid var(--line);border-radius:6px;background:#fff;font-size:.82rem;max-width:170px;cursor:pointer}
.qsel:hover{border-color:var(--ink)}
.qsel:disabled{background:#f5f6f8;color:var(--muted);cursor:not-allowed}

/* pagination admin */
.a-pagination{display:flex;justify-content:center;align-items:center;gap:6px;margin-top:28px;flex-wrap:wrap}
.a-pagination .pg{min-width:36px;height:36px;display:flex;align-items:center;justify-content:center;border:1px solid var(--line);border-radius:6px;font-size:.85rem;color:var(--ink)}
.a-pagination .pg:hover{border-color:var(--ink)}
.a-pagination .pg.active{background:var(--ink);color:#fff;border-color:var(--ink)}
.a-pagination .pg-dots{color:var(--muted);padding:0 2px}

/* toast d'enregistrement */
.save-toast{position:fixed;bottom:24px;left:50%;transform:translateX(-50%) translateY(20px);background:var(--ink);color:#fff;padding:11px 22px;border-radius:30px;font-size:.85rem;opacity:0;pointer-events:none;transition:.25s;z-index:1000}
.save-toast.show{opacity:1;transform:translateX(-50%) translateY(0)}