/*
 * style.css
 * Tibalo
 *
 * Created by Kévin Naudin on 20/10/2026.
 *
 * Legal and support pages. Tokens from design/project/poche26.css (V2 "Poche").
 */

@font-face{font-family:Spectral;src:url(fonts/Spectral-Light.woff2) format("woff2");font-weight:300;font-style:normal;font-display:swap}
@font-face{font-family:Spectral;src:url(fonts/Spectral-Regular.woff2) format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:Spectral;src:url(fonts/Spectral-Italic.woff2) format("woff2");font-weight:400;font-style:italic;font-display:swap}
@font-face{font-family:"IBM Plex Mono";src:url(fonts/IBMPlexMono-Medium.woff2) format("woff2");font-weight:500;font-style:normal;font-display:swap}

:root{
  color-scheme:light dark;
  --bg:#F8F3EA;--sf:#F0E8DA;--ink:#1C1915;--ink2:#6A604F;--rule:#E3D9C7;--acc:#B0341C;--link:#2D4A63;--todo:#FCE7A6;
}
@media (prefers-color-scheme:dark){
  :root{--bg:#12100D;--sf:#1C1814;--ink:#EFE7D8;--ink2:#A99D89;--rule:#2E281F;--acc:#EC8A62;--link:#93B4D0;--todo:#4A3B12}
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font:400 18px/1.6 Spectral,Georgia,serif;hyphens:auto;overflow-wrap:break-word}

.skip{position:absolute;left:-9999px}
.skip:focus{left:16px;top:16px;padding:8px 12px;background:var(--ink);color:var(--bg);z-index:1}

header,main,footer{max-width:42rem;margin:0 auto;padding:0 16px}
header{display:flex;align-items:center;justify-content:space-between;gap:12px;padding-top:20px;padding-bottom:20px;border-bottom:1px solid var(--rule)}
.brand{display:inline-flex;align-items:center;gap:10px;color:var(--ink);text-decoration:none;font:300 26px/1 Spectral,Georgia,serif;letter-spacing:-.01em}
.brand img{width:40px;height:40px;border-radius:10px;background:#F8F3EA}
.lang{display:inline-flex;align-items:center;min-height:48px;font:500 12px/1 "IBM Plex Mono",ui-monospace,monospace;letter-spacing:.1em;text-transform:uppercase;color:var(--ink2)}

main{padding-top:32px;padding-bottom:48px}
.eb{font:500 12px/1.3 "IBM Plex Mono",ui-monospace,monospace;letter-spacing:.14em;text-transform:uppercase;color:var(--ink2);margin:0 0 12px}
h1{font:300 clamp(32px,8vw,44px)/1.08 Spectral,Georgia,serif;letter-spacing:-.015em;margin:0 0 12px}
h2{font:400 24px/1.2 Spectral,Georgia,serif;margin:2.2em 0 .5em;padding-top:.8em;border-top:1px solid var(--rule)}
h3{font:400 italic 20px/1.3 Spectral,Georgia,serif;margin:1.6em 0 .3em}
.lede{color:var(--ink2);font-size:19px;margin:0 0 8px}
.date{font:500 12px/1.4 "IBM Plex Mono",ui-monospace,monospace;letter-spacing:.06em;color:var(--ink2);margin:16px 0 0}
p,ul,ol{margin:0 0 1em}
li{margin:0 0 .4em}
strong{font-weight:400;color:var(--acc)}
a{color:var(--link);text-decoration-thickness:1px;text-underline-offset:3px}
a:focus-visible,summary:focus-visible{outline:2px solid var(--acc);outline-offset:3px;border-radius:2px}

.table{overflow-x:auto;margin:0 0 1em}
table{width:100%;border-collapse:collapse;font-size:16px;line-height:1.45}
th,td{text-align:left;vertical-align:top;padding:10px 12px 10px 0;border-bottom:1px solid var(--rule)}
th{font:500 12px/1.3 "IBM Plex Mono",ui-monospace,monospace;letter-spacing:.08em;text-transform:uppercase;color:var(--ink2);hyphens:manual}
td:first-child{hyphens:manual}
/* Phones: each row becomes a stacked block, first cell as its title. */
@media (max-width:600px){
  table,tbody,tr,td{display:block}
  thead{position:absolute;left:-9999px}
  tr{padding:12px 0;border-bottom:1px solid var(--rule)}
  td{padding:0 0 4px;border:0}
  td:first-child{font-style:italic;font-size:18px;padding-bottom:6px}
  td[data-label]:not(:first-child)::before{content:attr(data-label);display:block;font:500 11px/1.6 "IBM Plex Mono",ui-monospace,monospace;letter-spacing:.08em;text-transform:uppercase;color:var(--ink2)}
}

.note{background:var(--sf);border-left:3px solid var(--acc);padding:14px 16px;margin:0 0 1em;border-radius:0 6px 6px 0}
.note p:last-child{margin:0}
.todo{background:var(--todo);color:inherit;padding:0 .2em;border-radius:3px;font-size:.9em;hyphens:manual}

details{border-top:1px solid var(--rule);padding:4px 0}
details:last-of-type{border-bottom:1px solid var(--rule)}
summary{cursor:pointer;min-height:48px;display:flex;align-items:center;font-size:20px;list-style:none}
summary::-webkit-details-marker{display:none}
summary::after{content:"+";margin-left:auto;padding-left:12px;color:var(--acc);font-size:24px}
details[open] summary::after{content:"\2212"}

.toc{list-style:none;padding:0;margin:24px 0 0}
.toc li{margin:0;border-top:1px solid var(--rule)}
.toc li:last-child{border-bottom:1px solid var(--rule)}
.toc a{display:flex;min-height:56px;align-items:center;justify-content:space-between;color:var(--ink);text-decoration:none;font-size:20px}
.toc a::after{content:"\2192";color:var(--acc)}

footer{padding-top:24px;padding-bottom:40px;border-top:1px solid var(--rule);color:var(--ink2);font-size:15px}
footer nav ul{list-style:none;padding:0;display:flex;flex-wrap:wrap;gap:4px 20px}
footer nav a{display:inline-block;padding:10px 0;color:var(--ink2)}

@media (prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}