/* ===================== BASE : reset, typographie, utilitaires ===================== */
*,*::before,*::after{box-sizing:border-box}
html{height:100%;-webkit-text-size-adjust:100%}
body{margin:0;min-height:100%;background:var(--bg);color:var(--ink);font-family:var(--f-body);font-size:var(--t-14);line-height:1.5;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;font-feature-settings:"ss01"}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer;background:none;border:0;padding:0}
a{color:inherit}
img,svg{display:block;max-width:100%}
[hidden]{display:none!important}
::selection{background:rgba(226,51,42,.35)}
:focus-visible{outline:none;box-shadow:var(--ring);border-radius:var(--r-sm)}
h1,h2,h3,h4{margin:0;font-weight:700;text-wrap:balance}
p{margin:0}
table{border-collapse:collapse;width:100%}

/* Grain très léger sur tout le fond (texture papier de diner) */
body::before{content:"";position:fixed;inset:0;pointer-events:none;z-index:0;opacity:.035;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
:root[data-theme="light"] body::before{opacity:.05;mix-blend-mode:multiply}

/* Typographie */
.display{font-family:var(--f-display);font-weight:800;letter-spacing:.005em;line-height:.95;font-variant-numeric:tabular-nums}
.num{font-variant-numeric:tabular-nums}
.mono{font-family:var(--f-mono);font-size:.92em}
.eyebrow{font-size:var(--t-11);font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.muted{color:var(--muted)}
.faint{color:var(--faint)}
.t-12{font-size:var(--t-12)} .t-13{font-size:var(--t-13)} .t-16{font-size:var(--t-16)}
.b{font-weight:700}
.r{text-align:right}
.nowrap{white-space:nowrap}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.row{display:flex;align-items:center;gap:var(--s-2)}
.row-between{display:flex;align-items:center;justify-content:space-between;gap:var(--s-3)}
.wrap{flex-wrap:wrap}
.stack{display:grid;gap:var(--s-3)}
.grow{flex:1 1 auto;min-width:0}
.ico{width:18px;height:18px;flex:none;stroke:currentColor;fill:none;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.ico-sm{width:15px;height:15px}
.ico-lg{width:22px;height:22px}

/* Apparition des éléments (état final visible, animation facultative) */
@keyframes rise{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@keyframes pop{0%{transform:scale(.6);opacity:0}60%{transform:scale(1.12);opacity:1}100%{transform:scale(1)}}
@keyframes shimmer{from{background-position:-400px 0}to{background-position:400px 0}}
@keyframes drip{from{transform:scaleY(0)}to{transform:scaleY(1)}}
@keyframes pulse-dot{0%,100%{box-shadow:0 0 0 0 rgba(63,214,143,.5)}50%{box-shadow:0 0 0 5px rgba(63,214,143,0)}}
@keyframes spin{to{transform:rotate(360deg)}}
.anim-rise{animation:rise var(--d-3) var(--ease) both}
.stagger>*{animation:rise var(--d-3) var(--ease) both}
.stagger>*:nth-child(2){animation-delay:40ms}.stagger>*:nth-child(3){animation-delay:80ms}
.stagger>*:nth-child(4){animation-delay:120ms}.stagger>*:nth-child(5){animation-delay:160ms}
.stagger>*:nth-child(6){animation-delay:200ms}.stagger>*:nth-child(n+7){animation-delay:240ms}
@media (prefers-reduced-motion: reduce){ *{animation:none!important;transition:none!important} }