@import url('https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,500;12..96,700;12..96,800&family=Syncopate:wght@700&display=swap');

/* ====== Ocicat · thème « crème » (clair par défaut) + sombre chaleureux ====== */
html:root,
html:root[data-theme=light]{
  --bg:#FFF9E5; --bg-1:#FFFFFF; --bg-2:#FFF5D6; --bg-3:#F8E7A8;
  --border:rgba(124,54,11,.13); --border-hover:rgba(124,54,11,.28);
  --text:#3A2100; --text-2:#7A5B2E; --text-3:#A28A5E;
  --accent:#FFA400; --accent-light:#FFC31B; --accent-dark:#E27C00; --accent-glow:rgba(255,164,0,.16);
  --green:#1FAF6E; --green-bg:rgba(31,175,110,.13);
  --yellow:#E0A100; --yellow-bg:rgba(255,196,27,.22);
  --red:#E5484D; --red-bg:rgba(229,72,77,.10);
  --blue:#3B82E0; --blue-bg:rgba(59,130,224,.12);
  --radius:16px; --radius-sm:12px; --radius-lg:24px;
  --font-display:"Bricolage Grotesque","Syne",sans-serif; --font-body:"DM Sans",sans-serif;
  --shadow:0 6px 24px rgba(124,54,11,.08); --shadow-lg:0 12px 48px rgba(124,54,11,.16);
  --bubble-border:#FFE885;
}
html:root[data-theme=dark]{
  --bg:#1A120B; --bg-1:#241A11; --bg-2:#2E2218; --bg-3:#3D2D1E;
  --border:rgba(255,232,133,.10); --border-hover:rgba(255,232,133,.22);
  --text:#FFF4DC; --text-2:#CDB892; --text-3:#8F7C5C;
  --accent:#FFA400; --accent-glow:rgba(255,164,0,.18);
  --green:#2dd98a; --green-bg:rgba(45,217,138,.12);
  --yellow:#f5c542; --yellow-bg:rgba(245,197,66,.12);
  --red:#ff6b6b; --red-bg:rgba(255,107,107,.12);
  --shadow:0 6px 24px rgba(0,0,0,.4); --shadow-lg:0 12px 48px rgba(0,0,0,.6);
  --bubble-border:#7a5a12;
}
html,body,#root{background:var(--bg)}
h1{font-family:"Syncopate","Bricolage Grotesque",sans-serif!important;text-transform:uppercase;letter-spacing:.01em!important;font-size:clamp(18px,2.2vw,24px)!important;line-height:1.25!important}
h2,h3,h4,h5{font-family:var(--font-display);letter-spacing:-.01em}
/* cartes douces et arrondies */
div[style*="--radius-lg"]{box-shadow:0 2px 0 rgba(124,54,11,.04),0 8px 22px rgba(124,54,11,.05)}
:root[data-theme=dark] div[style*="--radius-lg"]{box-shadow:none}
input,textarea,select{border-radius:12px}
.spinner{border-top-color:var(--accent)}

/* ====== Mascotte guide ====== */
.afg{display:flex;align-items:flex-end;justify-content:flex-end;gap:2px;margin:0 0 14px;position:relative;animation:afgIn .5s cubic-bezier(.2,.8,.2,1) both}
.afg-bubble{position:relative;background:var(--bg-1);border:2.5px solid var(--bubble-border);border-radius:26px;padding:14px 38px 14px 20px;max-width:560px;margin-bottom:34px;box-shadow:0 10px 28px rgba(124,54,11,.10);font-family:"Bricolage Grotesque","DM Sans",sans-serif;font-weight:700;font-size:16.5px;line-height:1.35;color:var(--text)}
.afg-bubble:after{content:"";position:absolute;right:-11px;bottom:22px;width:18px;height:18px;background:var(--bg-1);border-right:2.5px solid var(--bubble-border);border-top:2.5px solid var(--bubble-border);transform:rotate(45deg) skew(8deg,8deg);border-radius:0 5px 0 0}
.afg-bubble small{display:block;font-weight:500;font-size:13.5px;color:var(--text-2);margin-top:4px;font-family:"DM Sans",sans-serif}
.afg-x{position:absolute;top:6px;right:9px;border:0;background:transparent;color:var(--text-3);font-size:17px;line-height:1;cursor:pointer;padding:2px 4px;border-radius:8px}
.afg-x:hover{background:var(--bg-2);color:var(--text)}
.afg-cat{height:132px;width:auto;flex-shrink:0;display:block;filter:drop-shadow(0 8px 10px rgba(124,54,11,.18));transform-origin:50% 100%;animation:afgBob 3.6s ease-in-out infinite}
.afg-mini{position:fixed;right:18px;bottom:18px;z-index:40;border:2.5px solid var(--bubble-border);background:var(--bg-1);border-radius:50%;width:62px;height:62px;padding:0;overflow:hidden;cursor:pointer;box-shadow:var(--shadow)}
.afg-mini img{width:100%;height:150%;object-fit:cover;object-position:50% 0}
@keyframes afgIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@keyframes afgBob{0%,100%{transform:rotate(0)}50%{transform:rotate(-1.6deg) translateY(-3px)}}
@media(max-width:760px){.afg{justify-content:flex-start}.afg-cat{height:92px}.afg-bubble{font-size:14.5px;padding:11px 30px 11px 14px;margin-bottom:22px;order:0}}
@media print{.afg,.afg-mini{display:none!important}}