/* ============================================================
   RETEX — Système visuel
   Direction : chaleureux & ludique. Vrais post-its texturés,
   couleurs vives, papier/liège. Clair + sombre.
   ============================================================ */

/* ---- Fonts ---- */
/* Bricolage Grotesque (display/UI), Plus Jakarta Sans (texte),
   Caveat (option manuscrite des post-its) */

:root {
  /* Brand accent — surchargé par le tweak couleur */
  --brand: #F0563B;
  --brand-ink: #ffffff;
  --brand-soft: color-mix(in oklab, var(--brand) 14%, transparent);

  /* Police des post-its — surchargée par le tweak style */
  --postit-font: "Caveat", "Bricolage Grotesque", cursive;
  --postit-size: 1.32rem;
  --postit-line: 1.28;
  --postit-weight: 600;

  /* Rayon / ombres */
  --r-sm: 8px;
  --r-md: 14px;
  --r-lg: 22px;
  --r-xl: 30px;

  --ease: cubic-bezier(.32,.72,.32,1);

  font-synthesis-weight: none;
}

/* ---- THÈME CLAIR ---- */
:root,
[data-theme="light"] {
  --bg: #efe7d8;
  --bg-grain: #e7dcc8;
  --board: #f6efe2;
  --surface: #fffdf8;
  --surface-2: #f4ecdd;
  --ink: #2a2620;
  --ink-2: #5b5346;
  --muted: #8c8270;
  --line: rgba(42,38,32,.12);
  --line-strong: rgba(42,38,32,.22);
  --shadow-postit: 0 1px 1px rgba(60,46,20,.10), 0 8px 18px -6px rgba(60,46,20,.28);
  --shadow-postit-hover: 0 2px 2px rgba(60,46,20,.12), 0 22px 40px -10px rgba(60,46,20,.40);
  --shadow-card: 0 1px 0 rgba(255,255,255,.7) inset, 0 18px 50px -22px rgba(40,30,10,.45);
  --tape: rgba(255,255,255,.55);
  --header-bg: rgba(246,239,226,.82);
}

/* ---- THÈME SOMBRE ---- */
[data-theme="dark"] {
  --bg: #1b1813;
  --bg-grain: #221e17;
  --board: #211d16;
  --surface: #2b261d;
  --surface-2: #332d22;
  --ink: #f4ecdc;
  --ink-2: #cabfa8;
  --muted: #968b76;
  --line: rgba(244,236,220,.12);
  --line-strong: rgba(244,236,220,.22);
  --shadow-postit: 0 1px 1px rgba(0,0,0,.4), 0 10px 22px -6px rgba(0,0,0,.6);
  --shadow-postit-hover: 0 2px 3px rgba(0,0,0,.5), 0 26px 48px -10px rgba(0,0,0,.7);
  --shadow-card: 0 1px 0 rgba(255,255,255,.05) inset, 0 22px 60px -22px rgba(0,0,0,.7);
  --tape: rgba(255,255,255,.10);
  --header-bg: rgba(33,29,22,.84);
}

/* ============================================================
   Base
   ============================================================ */
* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }
body {
  font-family: "Plus Jakarta Sans", ui-sans-serif, system-ui, sans-serif;
  color: var(--ink);
  background-color: var(--bg);
  /* Texture papier/liège : grain feutré multi-radial */
  background-image:
    radial-gradient(circle at 20% 15%, color-mix(in oklab, var(--bg-grain) 70%, transparent) 0 1px, transparent 1.6px),
    radial-gradient(circle at 70% 60%, color-mix(in oklab, var(--bg-grain) 60%, transparent) 0 1px, transparent 1.6px),
    radial-gradient(circle at 45% 85%, color-mix(in oklab, var(--bg-grain) 65%, transparent) 0 1px, transparent 1.6px);
  background-size: 26px 26px, 34px 34px, 30px 30px;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow: hidden;
}

h1,h2,h3,h4 {
  font-family: "Bricolage Grotesque", ui-sans-serif, sans-serif;
  font-weight: 700;
  margin: 0;
  letter-spacing: -.01em;
}

button { font-family: inherit; }
::selection { background: var(--brand-soft); }

/* App fills the viewport, no body scroll */
#root { height: 100%; }
.app { height: 100%; display: flex; flex-direction: column; }

/* ============================================================
   Boutons
   ============================================================ */
.btn {
  display: inline-flex; align-items: center; gap: .5em;
  border: none; cursor: pointer;
  font-family: "Bricolage Grotesque", sans-serif;
  font-weight: 600; font-size: .94rem;
  padding: .62em 1.05em; border-radius: 999px;
  background: var(--surface); color: var(--ink);
  box-shadow: 0 0 0 1px var(--line) inset, 0 1px 2px rgba(0,0,0,.06);
  transition: transform .14s var(--ease), box-shadow .14s var(--ease), background .14s;
  white-space: nowrap;
}
.btn:hover { transform: translateY(-1px); box-shadow: 0 0 0 1px var(--line-strong) inset, 0 6px 16px -6px rgba(0,0,0,.3); }
.btn:active { transform: translateY(0); }
.btn--primary { background: var(--brand); color: var(--brand-ink); box-shadow: 0 6px 18px -6px color-mix(in oklab, var(--brand) 70%, transparent); }
.btn--primary:hover { box-shadow: 0 10px 26px -8px color-mix(in oklab, var(--brand) 75%, transparent); }
.btn--ghost { background: transparent; box-shadow: none; }
.btn--ghost:hover { background: color-mix(in oklab, var(--ink) 7%, transparent); box-shadow: none; }
.btn--sm { font-size: .82rem; padding: .48em .8em; }
.btn--lg { font-size: 1.05rem; padding: .8em 1.4em; }
.btn:disabled { opacity: .45; cursor: not-allowed; transform: none; }

.icon-btn {
  display: inline-grid; place-items: center;
  width: 38px; height: 38px; border-radius: 50%;
  border: none; cursor: pointer; color: var(--ink);
  background: transparent;
  transition: background .14s, transform .14s var(--ease);
}
.icon-btn:hover { background: color-mix(in oklab, var(--ink) 9%, transparent); }
.icon-btn:active { transform: scale(.94); }

/* ============================================================
   Avatars
   ============================================================ */
.avatar {
  --sz: 34px;
  width: var(--sz); height: var(--sz);
  border-radius: 50%; flex: 0 0 auto;
  display: grid; place-items: center;
  font-family: "Bricolage Grotesque", sans-serif;
  font-weight: 700; font-size: calc(var(--sz) * .4);
  color: #fff; user-select: none;
  box-shadow: 0 0 0 2px var(--surface), 0 2px 5px rgba(0,0,0,.2);
}
.avatar--admin::after {
  content: "★"; position: absolute; font-size: 11px;
}

/* ============================================================
   Surfaces / cards
   ============================================================ */
.card {
  background: var(--surface);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-card);
}

/* Scrollbars discrets */
.scroll { scrollbar-width: thin; scrollbar-color: var(--line-strong) transparent; }
.scroll::-webkit-scrollbar { width: 10px; height: 10px; }
.scroll::-webkit-scrollbar-thumb { background: var(--line-strong); border-radius: 999px; border: 3px solid transparent; background-clip: content-box; }
.scroll::-webkit-scrollbar-track { background: transparent; }

/* ============================================================
   Post-it
   ============================================================ */
.postit {
  position: relative;
  padding: 18px 16px 16px;
  border-radius: 3px 3px 4px 4px;
  background: var(--pi, #ffe08a);
  color: #3a3220;
  box-shadow: var(--shadow-postit);
  font-family: var(--postit-font);
  font-size: var(--postit-size);
  line-height: var(--postit-line);
  font-weight: var(--postit-weight);
  transition: transform .16s var(--ease), box-shadow .16s var(--ease);
  cursor: default;
  word-break: break-word;
  /* léger dégradé pour le volume du papier */
  background-image: linear-gradient(150deg, rgba(255,255,255,.35), transparent 42%);
}
.postit::after {
  /* coin corné */
  content: ""; position: absolute; right: 0; bottom: 0;
  width: 0; height: 0;
  border-style: solid;
  border-width: 0 0 16px 16px;
  border-color: transparent transparent color-mix(in oklab, var(--pi) 72%, #000 14%) transparent;
  border-bottom-right-radius: 4px;
  filter: drop-shadow(-1px -1px 1px rgba(0,0,0,.08));
}
.postit__text { white-space: pre-wrap; }
.postit__foot { display: flex; align-items: center; gap: 7px; margin-top: 12px; }
.postit__author {
  font-family: "Plus Jakarta Sans", sans-serif;
  font-weight: 600; font-size: .72rem; color: rgba(40,34,18,.62);
  letter-spacing: .01em;
}
.postit__spacer { flex: 1; }

/* Bouton de vote */
.vote {
  display: inline-flex; align-items: center; gap: 4px;
  border: none; cursor: pointer;
  font-family: "Plus Jakarta Sans", sans-serif; font-weight: 700; font-size: .78rem;
  padding: 3px 9px 3px 7px; border-radius: 999px;
  background: rgba(58,50,32,.10); color: rgba(40,34,18,.78);
  transition: background .14s, transform .12s var(--ease);
}
.vote:hover { background: rgba(58,50,32,.18); }
.vote:active { transform: scale(.9); }
.vote[data-voted="1"] { background: #3a3220; color: #fff; }

/* tape pieces */
.postit__tape {
  position: absolute; top: -9px; left: 50%; transform: translateX(-50%) rotate(var(--tilt,-2deg));
  width: 58px; height: 20px;
  background: var(--tape);
  box-shadow: 0 1px 2px rgba(0,0,0,.12);
  border-left: 1px dashed rgba(255,255,255,.3);
  border-right: 1px dashed rgba(255,255,255,.3);
}

/* Post-it masqué (dos visible) */
.postit--hidden {
  background:
    repeating-linear-gradient(45deg, color-mix(in oklab, var(--pi) 88%, #000 6%) 0 9px, color-mix(in oklab, var(--pi) 80%, #000 12%) 9px 18px);
  color: transparent;
}
.postit--hidden .postit__text,
.postit--hidden .postit__author { visibility: hidden; }
.postit--hidden::before {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(circle at 50% 42%, rgba(255,255,255,.18), transparent 60%);
}
.postit--clickable { cursor: pointer; }
.postit--clickable:hover { transform: translateY(-3px) rotate(0deg) scale(1.015); box-shadow: var(--shadow-postit-hover); }

/* Animation de retournement à la révélation */
@keyframes flip-in {
  0% { transform: rotateY(78deg) scale(.96); opacity: .2; }
  100% { transform: rotateY(0) scale(1); opacity: 1; }
}
.postit--revealing { animation: flip-in .42s var(--ease) both; transform-origin: center; }

/* ============================================================
   Champs
   ============================================================ */
.field {
  width: 100%; border: none; outline: none;
  background: var(--surface); color: var(--ink);
  font-family: inherit; font-size: 1rem;
  padding: .8em 1em; border-radius: var(--r-md);
  box-shadow: 0 0 0 1.5px var(--line) inset;
  transition: box-shadow .15s;
}
.field:focus { box-shadow: 0 0 0 2px var(--brand) inset; }
.field::placeholder { color: var(--muted); }

/* ============================================================
   Pastilles / badges
   ============================================================ */
.chip {
  display: inline-flex; align-items: center; gap: .4em;
  font-size: .78rem; font-weight: 600;
  padding: .3em .7em; border-radius: 999px;
  background: color-mix(in oklab, var(--ink) 8%, transparent);
  color: var(--ink-2);
  white-space: nowrap;
}
.dot { width: 11px; height: 11px; border-radius: 50%; flex: 0 0 auto; }

/* ============================================================
   Modale
   ============================================================ */
.scrim {
  position: fixed; inset: 0; z-index: 200;
  background: color-mix(in oklab, #1a140a 55%, transparent);
  -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
  display: grid; place-items: center; padding: 24px;
  animation: fade .2s var(--ease);
}
@keyframes fade { from { opacity: 0; } }
@keyframes pop { from { opacity: 0; transform: translateY(14px) scale(.98); } }
.modal {
  width: min(720px, 100%); max-height: 88vh; overflow: auto;
  background: var(--surface); border-radius: var(--r-xl);
  box-shadow: 0 40px 120px -30px rgba(0,0,0,.6);
  animation: pop .26s var(--ease);
}

/* ============================================================
   Animations d'arrivée (notifications de join + confetti)
   ============================================================ */
@keyframes pop-bounce {
  0%   { transform: scale(0) rotate(-180deg); opacity: 0; }
  55%  { transform: scale(1.28) rotate(14deg); }
  78%  { transform: scale(.92) rotate(-6deg); }
  100% { transform: scale(1) rotate(0); opacity: 1; }
}
.avatar--fresh { animation: pop-bounce .8s var(--ease) both; }
.avatar--fresh::before {
  content: ""; position: absolute; inset: -4px;
  border-radius: 50%; pointer-events: none;
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--brand) 70%, transparent);
  animation: halo-fade 1.4s var(--ease) forwards;
}
@keyframes halo-fade {
  0%   { transform: scale(.6); opacity: 1; }
  100% { transform: scale(1.6); opacity: 0; }
}

@keyframes confetti-fall {
  0%   { transform: translate(0, -10px) rotate(0deg); opacity: 1; }
  20%  { opacity: 1; }
  100% { transform: translate(var(--dx, 0), 75vh) rotate(720deg); opacity: 0; }
}
.confetti-piece {
  position: fixed; top: -30px; pointer-events: none;
  font-size: 1.6rem; will-change: transform, opacity;
  animation: confetti-fall 2.2s cubic-bezier(.4,.2,.6,1) forwards;
}

@keyframes join-toast-in {
  0%   { transform: translateX(120%) rotate(6deg); opacity: 0; }
  55%  { transform: translateX(-8px) rotate(-2deg); opacity: 1; }
  78%  { transform: translateX(3px) rotate(1deg); }
  100% { transform: translateX(0) rotate(0); opacity: 1; }
}
@keyframes wiggle {
  0%, 100% { transform: rotate(0deg); }
  25%      { transform: rotate(-12deg); }
  75%      { transform: rotate(12deg); }
}
.join-toast {
  position: relative;
  background: var(--surface); color: var(--ink);
  border-radius: var(--r-lg);
  padding: 11px 16px 11px 12px;
  box-shadow: 0 14px 40px -10px rgba(0,0,0,.4), 0 0 0 1px var(--line) inset;
  display: flex; align-items: center; gap: 12px;
  font-family: "Bricolage Grotesque", sans-serif;
  animation: join-toast-in .55s var(--ease) both;
  min-width: 240px; max-width: 320px;
  pointer-events: auto;
}
.join-toast__emoji {
  font-size: 1.55rem; display: inline-block;
  animation: wiggle 1.3s ease-in-out infinite;
  transform-origin: 50% 70%;
}
.join-toast__name { font-weight: 700; font-size: 1rem; line-height: 1.1; }
.join-toast__line { font-size: .82rem; color: var(--muted); font-weight: 500; margin-top: 2px; }

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