@font-face { font-family: Figtree; src: url(/fonts/figtree-latin-400-normal.woff2) format('woff2'); font-weight: 400; font-display: swap; }
@font-face { font-family: Figtree; src: url(/fonts/figtree-latin-500-normal.woff2) format('woff2'); font-weight: 500; font-display: swap; }
@font-face { font-family: Figtree; src: url(/fonts/figtree-latin-600-normal.woff2) format('woff2'); font-weight: 600; font-display: swap; }
@font-face { font-family: Figtree; src: url(/fonts/figtree-latin-700-normal.woff2) format('woff2'); font-weight: 700; font-display: swap; }
@font-face { font-family: Figtree; src: url(/fonts/figtree-latin-800-normal.woff2) format('woff2'); font-weight: 800 900; font-display: swap; }
@font-face { font-family: Figtree; src: url(/fonts/figtree-latin-ext-400-normal.woff2) format('woff2'); font-weight: 400; font-display: swap; unicode-range: U+0100-024F, U+1E00-1EFF, U+20A0-20CF; }
@font-face { font-family: Serif; src: url(/fonts/instrument-serif-latin-400-italic.woff2) format('woff2'); font-style: italic; font-weight: 400; font-display: swap; }

:root {
  --rose: #FF0082;
  --cyan: #00C2FF;
  --jaune: #FFB906;
  --encre: #1E2028;
  --encre-2: #4A4E5A;
  --gris: #6B7080;
  --trait: #E8E9EC;
  --fond: #FFFFFF;
  --fond-2: #F6F7F8;
  --ombre: 0 10px 30px rgba(20, 22, 30, .10), 0 2px 6px rgba(20, 22, 30, .06);
  --ombre-forte: 0 24px 60px rgba(20, 22, 30, .18), 0 4px 12px rgba(20, 22, 30, .08);
  --r: 18px;
  color-scheme: light;
}
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; }
body { font-family: Figtree, system-ui, sans-serif; font-size: 16px; line-height: 1.45; color: var(--encre); background: var(--fond); -webkit-font-smoothing: antialiased; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
a { color: inherit; }
:focus-visible { outline: 3px solid var(--cyan); outline-offset: 2px; border-radius: 8px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .001s !important; transition-duration: .001s !important; } }

/* Toasts */
#toasts { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); z-index: 90; display: grid; gap: 8px; width: min(560px, calc(100vw - 32px)); pointer-events: none; }
.toast { pointer-events: auto; display: flex; align-items: center; gap: 12px; justify-content: space-between; background: var(--encre); color: #fff; padding: 13px 16px; border-radius: 16px; box-shadow: var(--ombre-forte); opacity: 0; transform: translateY(14px) scale(.98); transition: .35s cubic-bezier(.2, .9, .3, 1.2); font-weight: 500; }
.toast.visible { opacity: 1; transform: none; }
.toast button { background: #fff; color: var(--encre); border: 0; border-radius: 999px; padding: 8px 14px; font-weight: 700; white-space: nowrap; min-height: 36px; }

/* Confettis jaunes */
.confettis { position: fixed; inset: 0; pointer-events: none; z-index: 95; overflow: hidden; }
.confettis i { position: absolute; top: -20px; width: 10px; height: 6px; background: var(--jaune); border-radius: 2px; animation: tombe linear forwards; }
@keyframes tombe { to { transform: translateY(110vh) rotate(720deg); opacity: .9; } }