/* ── Tokens : tout dérive de 4 couleurs de marque (brand.css) ───────────────── */
:root{
  --font-ui:'Instrument Sans',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  --r-sm:6px; --r:10px; --r-lg:16px;
  --ease:cubic-bezier(.2,.7,.2,1);

  --bg:color-mix(in oklab,var(--brand-paper) 80%,white);
  --bg-deep:color-mix(in oklab,var(--brand-paper) 92%,var(--brand-ink));
  --surface:color-mix(in oklab,var(--brand-paper) 26%,white);
  --surface-2:color-mix(in oklab,var(--brand-paper) 62%,white);
  --line:color-mix(in oklab,var(--brand-ink) 12%,var(--brand-paper));
  --line-2:color-mix(in oklab,var(--brand-ink) 26%,var(--brand-paper));
  --text:var(--brand-ink);
  --text-2:color-mix(in oklab,var(--brand-ink) 72%,var(--brand-paper));
  --text-3:color-mix(in oklab,var(--brand-ink) 50%,var(--brand-paper));
  --accent:var(--brand-accent);
  --accent-2:var(--brand-secondary);
  --accent-text:color-mix(in oklab,var(--brand-accent) 58%,var(--brand-ink));
  --accent-soft:color-mix(in oklab,var(--brand-accent) 12%,var(--brand-paper));
  --on-accent:var(--brand-on-accent,#fff);
  --ink:var(--brand-ink);
  --hard:var(--brand-ink);
  --shadow-hard:3px 3px 0 var(--hard);
  --shadow-soft:0 1px 2px rgb(20 20 30/.06),0 10px 30px rgb(20 20 30/.10);
  --scrim:rgb(20 20 30/.42);
  --grain:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .075 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  color-scheme:light;
}
html[data-theme=dark]{
  --bg:color-mix(in oklab,var(--brand-ink) 78%,black);
  --bg-deep:color-mix(in oklab,var(--brand-ink) 62%,black);
  --surface:color-mix(in oklab,var(--brand-ink),white 6%);
  --surface-2:color-mix(in oklab,var(--brand-ink),white 11%);
  --line:color-mix(in oklab,var(--brand-ink),white 16%);
  --line-2:color-mix(in oklab,var(--brand-ink),white 30%);
  --text:color-mix(in oklab,var(--brand-paper) 92%,white);
  --text-2:color-mix(in oklab,var(--brand-paper) 70%,var(--brand-ink));
  --text-3:color-mix(in oklab,var(--brand-paper) 50%,var(--brand-ink));
  --accent:color-mix(in oklab,var(--brand-accent),white 6%);
  --accent-2:color-mix(in oklab,var(--brand-secondary),white 22%);
  --accent-text:color-mix(in oklab,var(--brand-accent) 68%,white);
  --accent-soft:color-mix(in oklab,var(--brand-accent) 20%,var(--brand-ink));
  --hard:rgb(0 0 0/.62);
  --scrim:rgb(0 0 0/.6);
  --shadow-soft:0 1px 2px rgb(0 0 0/.3),0 12px 36px rgb(0 0 0/.35);
  color-scheme:dark;
}

/* ── Base ───────────────────────────────────────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box}
html,body{height:100%;margin:0}
body{font:14px/1.45 var(--font-ui);color:var(--text);background:var(--bg);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow:hidden}
button{font:inherit;color:inherit;background:none;border:0;padding:0;margin:0;cursor:pointer;text-align:inherit}
input,textarea,select{font:inherit;color:inherit;margin:0}
a{color:var(--accent-text)}
::selection{background:color-mix(in oklab,var(--accent) 35%,transparent)}
:focus{outline:none}
:focus-visible{outline:2px solid var(--accent-2);outline-offset:2px;border-radius:4px}
[hidden]{display:none!important}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
svg.icon{width:1.2em;height:1.2em;flex:none;display:inline-block;vertical-align:-.2em;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
svg.icon.fill{fill:currentColor}
.display{font-family:var(--font-display);font-weight:600;letter-spacing:-.012em}
html[data-display=fraunces] .display{font-variation-settings:"SOFT" 70,"WONK" 1}
.muted{color:var(--text-3)}
kbd{font:600 11px/1 var(--font-ui);padding:3px 6px;border:1px solid var(--line-2);border-bottom-width:2px;border-radius:5px;background:var(--surface);color:var(--text-2)}

/* Scrollbars discrètes */
*{scrollbar-width:thin;scrollbar-color:var(--line-2) transparent}
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-thumb{background:var(--line-2);border-radius:99px;border:3px solid transparent;background-clip:content-box}

/* ── Éléments récurrents ────────────────────────────────────────────────────── */
/* Liseré "par avion" : rayures diagonales accent/secondaire */
.airmail{height:6px;background:repeating-linear-gradient(-45deg,var(--accent) 0 10px,var(--surface) 10px 16px,var(--accent-2) 16px 26px,var(--surface) 26px 32px)}

/* Timbre : carré dentelé, teinte dérivée de la marque, unique par expéditeur */
.stamp{--s:40px;width:var(--s);height:var(--s);flex:none;position:relative;display:grid;place-items:center;color:#fff;font-family:var(--font-display);font-weight:700;font-size:calc(var(--s)*.42);line-height:1;letter-spacing:0;
  background:var(--stamp,var(--accent));
  -webkit-mask:var(--perf);mask:var(--perf);-webkit-mask-size:100% 100%;mask-size:100% 100%}
html[data-display=fraunces] .stamp{font-variation-settings:"SOFT" 100,"WONK" 1}
.stamp::after{content:'';position:absolute;inset:14%;border:1.5px solid rgb(255 255 255/.5);border-radius:2px}
.stamp>span{position:relative;z-index:1;text-shadow:0 1px 0 rgb(0 0 0/.18)}
.stamp.out{--stamp:var(--ink);color:var(--brand-paper)}
.stamp.out::after{border-color:rgb(255 255 255/.35)}
:root{--perf:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40' preserveAspectRatio='none'%3E%3Cpath d='M0 0H4.4A2 2 0 0 0 8.4 0H12.4A2 2 0 0 0 16.4 0H20.4A2 2 0 0 0 24.4 0H28.4A2 2 0 0 0 32.4 0H36.4A2 2 0 0 0 40 0V3.6A2 2 0 0 0 40 7.6V11.6A2 2 0 0 0 40 15.6V19.6A2 2 0 0 0 40 23.6V27.6A2 2 0 0 0 40 31.6V35.6A2 2 0 0 0 40 40H35.6A2 2 0 0 0 31.6 40H27.6A2 2 0 0 0 23.6 40H19.6A2 2 0 0 0 15.6 40H11.6A2 2 0 0 0 7.6 40H3.6A2 2 0 0 0 0 40V36.4A2 2 0 0 0 0 32.4V28.4A2 2 0 0 0 0 24.4V20.4A2 2 0 0 0 0 16.4V12.4A2 2 0 0 0 0 8.4V4.4A2 2 0 0 0 0 0Z'/%3E%3C/svg%3E")}

/* Boutons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:38px;padding:0 16px;border-radius:var(--r-sm);font-weight:600;font-size:14px;border:1.5px solid var(--hard);background:var(--surface);color:var(--text);transition:transform .12s var(--ease),box-shadow .12s var(--ease),background .12s;white-space:nowrap;box-shadow:2px 2px 0 var(--hard)}
.btn:hover{transform:translate(-1px,-1px);box-shadow:3px 3px 0 var(--hard)}
.btn:active{transform:translate(1px,1px);box-shadow:0 0 0 var(--hard)}
.btn.primary{background:var(--accent);color:var(--on-accent)}
.btn.ghost{border-color:transparent;box-shadow:none;background:transparent}
.btn.ghost:hover{background:color-mix(in oklab,var(--text) 8%,transparent);transform:none;box-shadow:none}
.btn.danger{--hard:color-mix(in oklab,#b3261e 70%,var(--brand-ink));color:#b3261e}
html[data-theme=dark] .btn.danger{color:#ffb4ab}
.btn[disabled]{opacity:.55;pointer-events:none}
.btn.sm{height:32px;padding:0 12px;font-size:13px}
.iconbtn{display:inline-grid;place-items:center;width:34px;height:34px;border-radius:8px;color:var(--text-2);transition:background .12s,color .12s,transform .12s}
.iconbtn:hover{background:color-mix(in oklab,var(--text) 9%,transparent);color:var(--text)}
.iconbtn:active{transform:scale(.94)}
.iconbtn.on{color:var(--accent-text)}
.iconbtn .icon{font-size:18px}

/* Champs */
.field{display:grid;gap:6px}
.field>label,.label{font-size:12.5px;font-weight:600;color:var(--text-2)}
.input{width:100%;height:42px;padding:0 12px;border:1.5px solid var(--line-2);border-radius:var(--r-sm);background:var(--surface);transition:border-color .12s,box-shadow .12s}
.input:hover{border-color:var(--text-3)}
.input:focus{border-color:var(--hard);box-shadow:2px 2px 0 var(--hard);outline:none}
textarea.input{height:auto;padding:10px 12px;resize:vertical;line-height:1.5}

@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;scroll-behavior:auto!important}}