/* Blog : mise en page seulement. Couleurs, polices et composants viennent de /site.css. */
.nl.on{color:var(--ink)}
body{min-height:100svh;display:flex;flex-direction:column}
main{padding-top:68px;flex:1 0 auto}
.b-hd{padding:clamp(56px,7vw,110px) 0 0}
.b-hd h1,.b-ph h1{font-family:var(--disp);font-size:clamp(32px,3.6vw,54px);font-weight:500;letter-spacing:-.045em;line-height:1.04}
.b-hd h1 em{font-style:normal;color:var(--grey)}
.b-hd p{color:var(--body);font-size:clamp(16px,1.25vw,19px);font-weight:300;line-height:1.55;margin-top:14px;max-width:62ch}
.b-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.b-grid .ucc{min-height:220px}
.b-hd .b-empty{max-width:none;margin-top:0;color:var(--body);font-size:16px;font-weight:300;padding:40px 0;border-top:1px solid var(--line)}
@media (max-width:1100px){.b-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:600px){.b-grid{grid-template-columns:1fr}}

/* billet */
.b-post{padding:clamp(48px,6vw,96px) 0 0}
.b-ph,.prose{max-width:720px;margin:0 auto}
.b-back{display:inline-block;margin-bottom:28px}.b-back:hover{color:var(--ink)}
.b-ph h1{font-size:clamp(34px,4vw,58px);line-height:1.04}
.b-lead{color:var(--body);font-size:clamp(18px,1.5vw,21px);font-weight:300;line-height:1.5;margin-top:20px}
.b-date{margin-top:24px;padding-bottom:32px;border-bottom:1px solid var(--line)}
.b-draft{position:sticky;top:68px;z-index:5;background:var(--acc-soft);color:var(--acc-t);font-size:14px;text-align:center;padding:10px var(--gut)}
.b-draft a{text-decoration:underline}
.b-cta{margin-top:clamp(64px,7vw,110px)}.b-cta .me-cta{max-width:720px;margin:0 auto}

/* corps des billets : la même feuille sert à l'éditeur */
.prose{color:var(--ink2);font-size:17.5px;font-weight:300;line-height:1.7;padding-top:36px}
.prose>*+*{margin-top:1.1em}
.prose>:first-child{margin-top:0}
.prose h2{font-family:var(--disp);font-size:clamp(24px,2.2vw,32px);font-weight:500;letter-spacing:-.035em;line-height:1.15;color:var(--ink);margin-top:1.9em}
.prose h3{font-family:var(--disp);font-size:21px;font-weight:500;letter-spacing:-.02em;line-height:1.25;color:var(--ink);margin-top:1.6em}
.prose h2+*,.prose h3+*{margin-top:.6em}
.prose strong{font-weight:500;color:var(--ink)}
.prose a{color:var(--acc-t);text-decoration:underline;text-underline-offset:3px}
.prose ul,.prose ol{padding-left:1.3em}.prose li+li{margin-top:.35em}
.prose ul li::marker{color:var(--acc)}.prose ol li::marker{font-family:var(--mono);font-size:.8em;color:var(--acc-t)}
.prose blockquote{border-left:2px solid var(--acc);padding:2px 0 2px 22px;font-family:var(--disp);font-size:21px;font-weight:400;letter-spacing:-.015em;line-height:1.45;color:var(--ink)}
.prose img{display:block;max-width:100%;height:auto;border-radius:12px;border:1px solid var(--line);margin:1.6em auto}
.prose p:has(>img:only-child){margin-top:0}
.prose hr{border:0;border-top:1px solid var(--line);margin:2.4em 0}

/* administration */
.adm{padding:clamp(40px,5vw,72px) 0 40px}
.adm-hd{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;flex-wrap:wrap;margin-bottom:28px}
.adm-hd h1{font-family:var(--disp);font-size:clamp(28px,3vw,40px);font-weight:500;letter-spacing:-.04em}
.adm-hd .r{display:flex;align-items:center;gap:12px}
.adm-t{width:100%;border-collapse:collapse;font-size:15px}
.adm-t th{text-align:left;font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--body);font-weight:400;padding:10px 12px;border-bottom:1px solid var(--line)}
.adm-t td{padding:14px 12px;border-bottom:1px solid var(--line);vertical-align:middle}
.adm-t td a.t{font-weight:500}.adm-t td a.t:hover{color:var(--acc-t)}
.adm-t .d{color:var(--body);white-space:nowrap}
.pill{display:inline-block;font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;padding:3px 9px;border-radius:999px;background:var(--card);color:var(--body);border:1px solid var(--line)}
.pill.pub{background:var(--ink);color:#fff;border-color:var(--ink)}
.lnk{all:unset;cursor:pointer;color:var(--body);font-size:14px}.lnk:hover{color:var(--ink)}
.lnk.del:hover{color:#b3261e}
.note{border-radius:10px;padding:12px 16px;font-size:14.5px;margin-bottom:20px}
.note.err{background:#fdecea;color:#8c1d18}.note.ok{background:var(--card);color:var(--ink2);border:1px solid var(--line)}
.fld{display:block;margin-bottom:18px}
.fld>span{display:block;font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--body);margin-bottom:8px}
.fld input,.fld textarea{width:100%;font:inherit;font-size:15px;color:var(--ink);background:#fff;border:1px solid var(--line2);border-radius:8px;padding:11px 13px;outline:none;transition:border-color .2s}
.fld input:focus,.fld textarea:focus{border-color:var(--ink2)}
.fld textarea{resize:vertical;min-height:72px;line-height:1.5}
.fld .slug{display:flex;align-items:center;border:1px solid var(--line2);border-radius:8px;overflow:hidden}
.fld .slug b{font-weight:400;color:var(--body);background:var(--card);padding:11px 4px 11px 13px;font-size:15px;white-space:nowrap}
.fld .slug input{border:0;border-radius:0;padding-left:2px}
.fld input.ttl{font-family:var(--disp);font-size:28px;font-weight:500;letter-spacing:-.035em;padding:12px 14px}

/* connexion */
main:has(>.login){display:flex;flex-direction:column}
.login{flex:1;display:grid;place-items:center;padding:60px var(--gut)}
.login form{width:100%;max-width:380px}
.login h1{font-family:var(--disp);font-size:32px;font-weight:500;letter-spacing:-.04em;margin-bottom:26px}
.login .btn{width:100%;justify-content:center;margin-top:6px}

/* éditeur */
.ed-wrap{max-width:820px;margin:0 auto}
.ed-bar{position:sticky;top:68px;z-index:5;display:flex;flex-wrap:wrap;gap:2px;align-items:center;background:rgba(255,255,255,.95);backdrop-filter:blur(8px);border:1px solid var(--line2);border-radius:10px 10px 0 0;padding:6px}
.ed-bar button{all:unset;cursor:pointer;min-width:34px;height:32px;padding:0 8px;box-sizing:border-box;display:inline-grid;place-items:center;border-radius:6px;font-size:14px;color:var(--ink2)}
.ed-bar button:hover{background:var(--card)}.ed-bar button.on{background:var(--ink);color:#fff}
.ed-bar i.sep{width:1px;height:20px;background:var(--line2);margin:0 6px}
.ed-bar .b{font-weight:600}.ed-bar .i{font-style:italic;font-family:Georgia,serif}
.ed{border:1px solid var(--line2);border-top:0;border-radius:0 0 10px 10px;padding:8px 34px 40px;min-height:420px;outline:none}
.ed.prose{max-width:none;margin:0}
.ed:empty::before{content:attr(data-ph);color:var(--grey)}
.ed img.sel{outline:2px solid var(--acc);outline-offset:2px}
.ed-act{position:sticky;bottom:0;display:flex;align-items:center;gap:12px;flex-wrap:wrap;background:#fff;border-top:1px solid var(--line);padding:16px 0;margin-top:22px}
.ed-act .sp{margin-left:auto}
.ed-up{font-size:14px;color:var(--body)}
@media (max-width:900px){.adm-me{display:none}.ed{padding:4px 16px 32px}.adm-t th:nth-child(4),.adm-t td:nth-child(4){display:none}}

/* tags */
.b-hd .flt{margin-bottom:22px}
.ucc .ar{display:flex;justify-content:space-between;align-items:baseline}
.b-cd{font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--body)}
.b-empty a{color:var(--ink);text-decoration:underline;text-underline-offset:3px}
.b-date{display:flex;flex-wrap:wrap;gap:6px 18px}
.b-date a:hover b{color:var(--ink)}
.tg{margin:0;align-items:center}
.tg label{cursor:pointer}
.tg input[type=checkbox]{position:absolute;opacity:0;pointer-events:none}
.tg label span{display:inline-block;font-size:14px;color:var(--body);padding:7px 14px;border:1px solid var(--line2);border-radius:999px;transition:all .2s}
.tg label:hover span{color:var(--ink);border-color:var(--ink)}
.tg input:checked+span{background:var(--ink);border-color:var(--ink);color:#fff}
.tg input:focus-visible+span{outline:2px solid var(--acc);outline-offset:2px}
.fld .tg .tg-new{width:150px;border-radius:999px;padding:7px 14px;font-size:14px;border-style:dashed}