@font-face { font-family: "Mazius"; src: url("fonts/mazius-display-400-italic.woff2") format("woff2"); font-style: italic; font-weight: 400; font-display: swap; }
@font-face { font-family: "Mazius"; src: url("fonts/mazius-display-400.woff2") format("woff2"); font-style: normal; font-weight: 400; font-display: swap; }
@font-face { font-family: "Ysabeau"; src: url("fonts/ysabeau-var.woff2") format("woff2"); font-style: normal; font-weight: 1 1000; font-display: swap; }

:root {
  --acajou: #8A3212;
  --acajou-p: #4A1C0D;
  --blanc: #FFFFFF;
  --laiton: #EDB56E;
  --mer: #3FA7C0;
  --b70: rgb(255 255 255 / .7);
  --b80: rgb(255 255 255 / .8);
  --vernis: inset 0 1px 0 rgb(255 255 255 / .18);
  --bord: 12px;
  --bord-g: max(var(--bord), env(safe-area-inset-left));
  --bord-d: max(var(--bord), env(safe-area-inset-right));
  --ph: 56px;
  --haut: calc(var(--demobar-offset, 0px) + max(var(--bord), env(safe-area-inset-top)));
  --d: "Mazius", "Didot", serif;
  --t: "Ysabeau", "Segoe UI", system-ui, sans-serif;
  --ease: cubic-bezier(.2, .8, .2, 1);
}
@media (min-width: 1024px) {
  :root { --bord: 28px; --ph: 64px; }
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0; background: var(--acajou-p); color: var(--blanc);
  font: 450 17px/1.5 var(--t); font-variant-numeric: lining-nums tabular-nums;
  -webkit-font-smoothing: antialiased; overflow-x: clip;
}
img, svg { display: block; max-width: 100%; }
button, input, select { font: inherit; color: inherit; }
button { background: none; border: 0; padding: 0; cursor: pointer; }
a { color: inherit; }
p, h1, h2, ul, ol, dl, dd, figure, fieldset { margin: 0; padding: 0; }
fieldset { border: 0; min-width: 0; }
ul, ol { list-style: none; }
[hidden] { display: none !important; }
html.fige, html.fige body { overflow: hidden; }
.num { font-variant-numeric: lining-nums tabular-nums; white-space: nowrap; }

:focus { outline: none; }
:focus-visible { outline: 2px solid var(--laiton); outline-offset: 3px; }

.evite {
  position: fixed; z-index: 60; left: var(--bord-g); top: calc(var(--haut) + var(--ph) + 8px);
  padding: 12px 18px; background: var(--blanc); color: var(--acajou-p); font-weight: 600; text-decoration: none;
  border-radius: 2px; transform: translateY(-300%);
}
.evite:focus-visible { transform: none; }

/* La plaque : acajou verni, un seul reflet, aucune ombre portée. */
.plaque {
  background: var(--acajou); color: var(--blanc); border-radius: 2px; box-shadow: var(--vernis);
  transition: background-color .25s, box-shadow .25s;
}
.plaque.action {
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--blanc); color: var(--acajou-p); font: 600 16px/1 var(--t); text-decoration: none; white-space: nowrap;
}
.plaque.action:active { transform: scale(.97); transition: transform .1s; }

.lib { font: 500 15px/1.3 var(--t); color: var(--laiton); }
.t-tiroir { font: 400 34px/1 var(--d); letter-spacing: 0; }
@media (min-width: 1024px) { .t-tiroir { font-size: 44px; } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; }
}