/* ===========================
   GLOBAL THEME & BASE STYLES
   =========================== */

:root{
  --bg:#ffffff; --fg:#2c2c2f; --muted:#6c7680; --accent:#a57c57; --soft:#84888c1a; --border:#c8ccd3;
  --maxw:820px; --radius:12px;
  --ctl-h:36px; --ctl-pad-x:12px; --inline-btn-h:36px; --icon-btn:32px;
}
:root.dark{ --bg:#1b1b1d; --fg:#e9e9ea; --muted:#b0b4b8; --accent:#a57c57; --soft:#ffffff12; --border:#2a2a2e; }

html,body{height:100%} html{color-scheme:light dark}
body{margin:0;font:16px/1.6 system-ui,-apple-system,Segoe UI,Roboto,"Helvetica Neue",Arial,"Noto Sans","Liberation Sans",sans-serif;background:var(--bg);color:var(--fg)}
.container{max-width:var(--maxw);margin:0 auto;padding:0 16px}
.container.narrow{max-width:560px}
main.container{padding-top:28px}

/* ===========================
   HEADER
   =========================== */
.site-header{position:sticky;top:0;backdrop-filter:blur(8px);background:color-mix(in oklab,var(--bg) 92%, transparent)}
.header-inner{display:flex;align-items:center;gap:12px;padding:12px 0}
.brand{color:var(--accent);text-decoration:none;font-weight:800;font-size:1.55rem}
.spacer{flex:1}

/* ===========================
   SEARCH (bulle unique)
   =========================== */
.search{width:260px;display:flex;justify-content:flex-end}
.search form{width:var(--ctl-h);height:var(--ctl-h);display:flex;align-items:center;gap:8px;border:1px solid var(--border);border-radius:999px;background:var(--bg);padding:0 8px 0 12px;overflow:hidden;transition:width .2s ease,border-color .15s ease}
.search form:hover{border-color:var(--accent)}
.search form.open{width:260px;border-color:var(--accent)}
.search form input{flex:1 1 auto;min-width:0;border:0;outline:0;background:transparent;color:var(--fg);height:1.25em;line-height:1.25;padding:0;margin-right:4px;opacity:0;width:0;transition:opacity .15s,width .15s}
.search form.open input{opacity:1;width:100%}
.search form button.icon{width:28px;height:28px;display:inline-grid;place-items:center;border:0;background:transparent;padding:0;cursor:pointer;border-radius:999px;font-size:16px;color:var(--fg)}
.search form button.icon:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

/* Theme toggle */
.theme-toggle{margin-left:8px;width:var(--ctl-h);height:var(--ctl-h);border:1px solid var(--border);border-radius:999px;background:var(--bg);color:inherit;padding:0 10px;cursor:pointer;transition:border-color .15s}
.theme-toggle:hover,.theme-toggle:focus{border-color:var(--accent);background:var(--bg)}

/* Links & text */
a{color:var(--accent);text-decoration:none;transition:text-decoration-color .15s}
a:hover,a:focus{text-decoration:underline}
.date{color:var(--muted);white-space:nowrap}

/* Lists & article headers */
ul.list{list-style:none;padding:0;margin:12px 0 0}
ul.list li{padding:10px 0;border-bottom:1px dashed var(--border)}
.post-header{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin:0 0 12px}
.post-title{margin:0;flex:1 1 auto}
.date-right{margin-left:16px;color:var(--muted);white-space:nowrap}
.content p{margin:0 0 1em}

/* Article nav (gauche/droite) */
.nav-article{display:flex;align-items:center;gap:12px;margin-top:16px}
.nav-article a:last-child{margin-left:auto}

/* ===========================
   BUTTONS
   =========================== */
.btn{display:inline-block;padding:8px 12px;border:1px solid var(--border);border-radius:10px;color:var(--fg);background:transparent;text-decoration:none !important;transition:background .2s,border-color .2s,color .2s}
.btn:hover,.btn:focus{border-color:var(--accent)}
.btn.secondary{background:transparent}
.btn.current{background:var(--accent);border-color:var(--accent);color:#fff}
.btn.small{padding:6px 10px;font-size:.92em}
.btn.xs{padding:4px 8px;font-size:.86em;border-radius:9px}
.btn.micro,.btn.icon{width:var(--icon-btn);height:var(--icon-btn);padding:0;display:inline-grid;place-items:center;font-size:16px}
.btn.danger{border-color:#b33;color:#b33}
.btn.danger:hover,.btn.danger:focus{border-color:#e04848;color:#e04848}

/* Form <button> neutres */
button:not(.theme-toggle){padding:8px 12px;border:1px solid var(--border);border-radius:10px;background:transparent;color:var(--fg);cursor:pointer;transition:background .2s,border-color .2s,color .2s}
button:not(.theme-toggle):hover,button:not(.theme-toggle):focus{border-color:var(--accent)}

/* CTA (Publier / Enregistrer) plus grands */
.btn-cta{padding:10px 18px;font-size:1.05rem;font-weight:800;border-color:var(--accent);background:var(--accent);color:#fff}
.btn-cta:hover,.btn-cta:focus{border-color:#8f6c4a;background:#8f6c4a;color:#fff}

/* ===========================
   FORMS & CARDS
   =========================== */
.card{border:1px solid var(--border);border-radius:var(--radius);padding:16px;background:color-mix(in oklab,var(--bg) 96%, transparent);margin:16px 0}
label{display:block;margin:10px 0}
input[type="text"],input[type="search"],input[type="password"],input[type="url"],textarea{width:100%;padding:10px var(--ctl-pad-x);border:1px solid var(--border);border-radius:10px;background:var(--bg);color:var(--fg);transition:border-color .2s;box-sizing:border-box;height:var(--ctl-h)}
textarea{height:auto;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,"Liberation Mono",monospace}
input:focus,textarea:focus{border-color:var(--accent);outline:none}

/* ===========================
   ADMIN LAYOUT
   =========================== */
.admin-topbar{display:flex;align-items:center;gap:12px;margin-bottom:8px}
.admin-topbar .tabs{display:flex;gap:8px;flex-wrap:wrap}
.page-title{display:flex;align-items:center;gap:12px;justify-content:space-between;margin-bottom:8px}
.page-title h1{margin:0}
.page-title .actions-right{margin-left:auto;display:flex;gap:8px;align-items:center}

/* Slug + date côte à côte (compacts) */
.meta-fields{display:grid;grid-template-columns:1.2fr .8fr;gap:12px;margin-top:12px}
.meta-fields label{margin:0;font-size:.92em}
.meta-fields input[type="text"]{font-size:.92em;height:var(--ctl-h)}

/* === Fusion des bordures (input + bouton) === */
.control-merge{display:flex;align-items:stretch}
.control-merge > input{flex:1 1 auto;border-right:none;border-radius:10px 0 0 10px}
.control-merge > .merge-btn{height:var(--inline-btn-h);padding:0 12px;border:1px solid var(--border);border-left:none;border-radius:0 10px 10px 0;background:transparent;color:var(--fg);cursor:pointer}
.control-merge > .merge-btn:hover,.control-merge > .merge-btn:focus{border-color:var(--accent)}

/* Admin list */
.admin-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.admin-list .rowline{display:flex;align-items:center;gap:12px;border:1px solid var(--border);border-radius:10px;padding:10px;background:color-mix(in oklab,var(--bg) 96%, transparent)}
.admin-list .row-main{flex:1 1 auto}
.admin-list .row-actions{display:flex;gap:6px;justify-content:flex-end}

/* Markdown toolbar */
.md-toolbar{display:flex;gap:6px;flex-wrap:wrap;margin:8px 0}
.md-toolbar .icon{min-width:32px;height:32px;display:inline-grid;place-items:center;border:1px solid var(--border);border-radius:8px;background:var(--bg);color:var(--fg);cursor:pointer}
.md-toolbar .icon:hover,.md-toolbar .icon:focus{border-color:var(--accent)}

/* Thumbs & media buttons (icônes égalisées et centrées) */
.thumbs{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:12px}
.thumb{border:1px solid var(--border);border-radius:10px;padding:8px}
.thumb img{width:100%;height:120px;object-fit:cover;border-radius:8px;display:block}
.thumb-actions{display:flex;gap:6px;margin:6px 0;justify-content:center}
.thumb-actions .btn{width:var(--icon-btn);height:var(--icon-btn);padding:0;font-size:16px;display:inline-grid;place-items:center}

/* Modal (image) */
.modal::backdrop{background:rgba(0,0,0,.35)}
.modal{border:0;padding:0;border-radius:12px;max-width:720px;width:calc(100% - 24px)}
.modal-inner{padding:16px;background:var(--bg);color:var(--fg);max-height:90vh;overflow:auto}
.modal-inner h3{margin:0 0 10px}
.tabbar{display:flex;gap:0;margin:10px 0}
.tabbar .tab{flex:1 1 0;padding:10px;text-align:center;border:1px solid var(--border);background:var(--bg);cursor:pointer;border-radius:8px 8px 0 0}
.tabbar .tab+.tab{border-left:none}
.tabbar .tab.active{border-color:var(--accent)}
.panel{border:1px solid var(--border);border-top:none;padding:12px;border-radius:0 0 10px 10px;background:color-mix(in oklab,var(--bg) 96%, transparent)}
.panel input[type="url"]{width:100%;box-sizing:border-box;margin:0 0 8px}
.modal-actions{display:flex;justify-content:flex-end;gap:8px;margin-top:10px}

/* Footer */
.site-footer{margin-top:40px;padding:20px 0}
.footer-nav{display:flex;gap:12px;justify-content:center;align-items:center;text-align:center}

/* Responsive */
@media (max-width:640px){
  .header-inner{padding:12px 12px}
  .container{padding:0 12px}
  .admin-list .rowline{flex-direction:column;align-items:flex-start}
  .admin-list .row-actions{width:100%;justify-content:flex-start}
  .meta-fields{grid-template-columns:1fr}
}