/* Empaluna: shared base for the 10 proposals.
   Brand palette from the client's brand book; paper cream sampled from the dessert posters. */
:root {
  --dough: #E2AB52;   /* pâte dorée */
  --crust: #B56619;   /* bord cuit */
  --rust: #A55513;    /* brun rouille: 4.48:1 on cream -> large text and drawings only */
  --rust-ink: #8F470F;/* rust for small text: 5.7:1 on cream */
  --choc: #472006;    /* chocolat: body text (11.8:1 on cream) */
  --paper: #F4E9D8;   /* crème des affiches */
  --paper-hi: #FBF5EA;
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
  --serif: "Crimson Pro", "Iowan Old Style", "Palatino Linotype", Georgia, serif;
  color-scheme: light; /* paper sites: one light theme, the logo needs a light ground */
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: smooth; }
/* keyboard focus and anchor jumps stop above the presentation panel (none with ?clean) */
html { scroll-padding-bottom: 88px; }
html.is-clean { scroll-padding-bottom: 0; }
body { margin: 0; min-height: 100dvh; overflow-x: clip; text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; }
img, svg, video { display: block; max-width: 100%; }
img { height: auto; }
h1, h2, h3, h4, p, figure, ul, ol, dl, dd, blockquote { margin: 0; }
ul[role="list"], ol[role="list"] { list-style: none; padding: 0; }
a { color: inherit; }
button { font: inherit; color: inherit; }
:where(h1, h2, h3) { text-wrap: balance; }
:where(p, li, dd) { text-wrap: pretty; }

:focus-visible { outline: 3px solid var(--focus, var(--rust)); outline-offset: 3px; border-radius: 2px; }

.sr-only {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip-link {
  position: absolute; left: 12px; top: 12px; z-index: 1000; padding: 10px 14px;
  background: var(--paper-hi); color: var(--choc); font: 600 15px/1 system-ui, sans-serif;
  border: 2px solid var(--choc); border-radius: 6px; transform: translateY(-200%); opacity: 0;
  transition: transform 160ms var(--ease-out), opacity 160ms ease;
}
.skip-link:focus { transform: none; opacity: 1; }

/* "à confirmer": visible pencil note by default; variants restyle it */
.pending { font-style: italic; color: var(--rust); white-space: nowrap; }

/* ------------------------------------------------------------------
   Presentation panel: « ← 03 / 10 → » + « Toutes les propositions ».
   Neutral chrome (system font) so it never reads as part of a design.
   Hidden with ?clean. Bottom-left on desktop, compact bottom-right on phones.
   ------------------------------------------------------------------ */
.pnav {
  position: fixed; z-index: 900; left: 16px; bottom: max(16px, env(safe-area-inset-bottom));
  display: flex; align-items: center; gap: 2px; padding: 4px;
  font: 500 13px/1 system-ui, -apple-system, "Segoe UI", sans-serif; letter-spacing: 0;
  color: #2b1605; background: rgb(251 246 236 / 0.94);
  border: 1px solid rgb(71 32 6 / 0.18); border-radius: 999px;
  box-shadow: 0 6px 20px -8px rgb(71 32 6 / 0.35);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
}
.pnav a { display: inline-flex; align-items: center; justify-content: center; min-height: 36px; text-decoration: none; border-radius: 999px; transition: background-color 150ms ease, transform 120ms var(--ease-out); }
.pnav a:active { transform: scale(0.96); }
.pnav__arrow { width: 36px; font-size: 16px; }
.pnav__count { padding: 0 6px; font-variant-numeric: tabular-nums; }
.pnav__count b { font-weight: 700; }
.pnav__all { padding: 0 12px; margin-left: 4px; background: rgb(71 32 6 / 0.08); }
.pnav__all-short { display: none; }
@media (hover: hover) { .pnav a:hover { background: rgb(71 32 6 / 0.12); } }
.pnav a:focus-visible { outline: 2px solid #2b1605; outline-offset: 1px; }
@media (max-width: 640px) {
  .pnav { left: auto; right: 10px; bottom: max(10px, env(safe-area-inset-bottom)); font-size: 12px; opacity: 0.92; }
  .pnav a { min-height: 34px; }
  .pnav__arrow { width: 32px; }
  .pnav__count { padding: 0 2px; }
  .pnav__all { padding: 0 10px; }
  .pnav__all-long { display: none; }
  .pnav__all-short { display: inline; }
}
.is-clean .pnav { display: none; }
@media print { .pnav { display: none; } }

/* Reduced motion: everything static, final state shown. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important; animation-delay: 0ms !important;
    animation-iteration-count: 1 !important; transition-duration: 0.001ms !important;
  }
}