:root { --sb: env(safe-area-inset-bottom); }
         html, body {
         height: 100%;
         /* background-color: #0b0b0f; */
         color-scheme: dark;
         }
         /* laisse la place au contenu pour ne pas révéler le fond */
         /* #main{ padding-bottom: calc(80px + var(--sb)); }*/
         .brand-grad{background:linear-gradient(90deg,#7c3aed,#06b6d4);color:#fff}
         body::before{
         content:"";position:fixed;inset:-20% -10% auto;z-index:-1;height:55vh;
         background:radial-gradient(60% 60% at 20% 10%,rgba(124,58,237,.18),transparent 60%),
         radial-gradient(40% 40% at 90% 10%,rgba(6,182,212,.16),transparent 60%);
         filter:blur(40px);
         }
         *{scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.14) transparent}
         ::-webkit-scrollbar{width:1px;height:1px}
         ::-webkit-scrollbar-thumb{background:rgba(255,255,255,.14);border-radius:9999px}
         ::-webkit-scrollbar-track{background:transparent}
         turbo-progress-bar{background:linear-gradient(90deg,#7c3aed,#06b6d4);height:3px}
         .pop-enter{opacity:0;transform:scale(.98)}
         .pop-enter-active{opacity:1;transform:scale(1);transition:.12s ease}
         .pop-leave{opacity:1;transform:scale(1)}
         .pop-leave-active{opacity:0;transform:scale(.98);transition:.12s ease}
         :focus-visible{outline:2px solid rgba(255,255,255,.35);outline-offset:2px;border-radius:.6rem}
         .no-scrollbar::-webkit-scrollbar{display:none}
         .no-scrollbar{-ms-overflow-style:none;scrollbar-width:none}
         /* Mobile drawer: ouvert si data attr présent — écrase hidden / md:hidden */
         #mobileNav[data-open="1"] { display: block !important; }
         @media (min-width: 768px) {
         /* en desktop on re-force fermé */
         #mobileNav[data-open="1"] { display: none !important; }
         }
         #toast-stack {
         width: 100%;
         bottom: 80px;
         }
         body,html{scrollbar-width:none}
         /* Smooth & mobile-friendly */
         #catScroller {
         touch-action: pan-x;            /* le doigt reste un scroll horizontal, pas un “tap mangé” */
         -webkit-overflow-scrolling: touch;
         user-select: none;
         scroll-snap-type: x proximity;
         }
         #catScroller a { scroll-snap-align: start; }
         /* Motion-safe */
         @media (prefers-reduced-motion: no-preference) {
         .heart.pop { animation: fav-pop .28s ease-out; }
         @keyframes fav-pop {
         0% { transform: scale(.8); }
         60%{ transform: scale(1.15); }
         100%{ transform: scale(1); }
         }
         .burst { position:absolute; inset:0; pointer-events:none; }
         .burst i {
         position:absolute; left:50%; top:50%;
         width:6px; height:6px; border-radius:9999px;
         background: currentColor; opacity:0; transform: translate(-50%,-50%) scale(.6);
         }
         /* 6 étincelles autour du cœur */
         .burst i:nth-child(1){ --tx: -14px; --ty: -4px; }
         .burst i:nth-child(2){ --tx:  14px; --ty: -4px; }
         .burst i:nth-child(3){ --tx: -8px;  --ty: -14px;}
         .burst i:nth-child(4){ --tx:  8px;  --ty: -14px;}
         .burst i:nth-child(5){ --tx: -10px; --ty:  10px;}
         .burst i:nth-child(6){ --tx:  10px; --ty:  10px;}
         .burst.fire i {
         animation: spark .45s ease-out forwards;
         }
         @keyframes spark {
         0%   { opacity:0; transform: translate(-50%,-50%) scale(.6); }
         20%  { opacity:1; }
         100% { opacity:0; transform: translate(calc(-50% + var(--tx)), calc(-50% + var(--ty))) scale(0.1); }
         }
         }
         /* État rempli = rouge (gère via text-color du conteneur) */
         #favBtn[data-fav="1"] .heart { fill: currentColor; }
         #favBtn .heart { color: #ef4444; } /* rose-500 vibes */
  /* THEME VARS */
/*
  :root {
    --bg:#0b0f14;
    --card:#0e141b;
    --text:#e7edf5;
    --muted:#9aa4b2;
    --line:rgba(255,255,255,.08);
    --soft:rgba(255,255,255,.05);

    --grad-1:#6EE7F9; --grad-2:#A78BFA; --grad-3:#22D3EE;
  }
  html[data-theme="light"]{
    --bg:#f7f8fb;
    --card:#ffffff;
    --text:#0c1220;
    --muted:#6b7280;
    --line:rgba(15,23,42,.08);
    --soft:rgba(15,23,42,.04);
  }

  html{
    color:var(--text);
    background:
      radial-gradient(1200px 800px at 10% -10%, rgba(102,126,234,.08), transparent),
      radial-gradient(1000px 700px at 110% 10%, rgba(16,185,129,.06), transparent),
      var(--bg);
  }*/

  /* UTILITAIRES THEME-AWARE */
  .surface{ background:var(--card); }
  .soft-bg{ background:var(--soft); }
  .soft-border{ border:1px solid var(--line); }
  .muted{ color:var(--muted); }

  .glass{
    background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03));
    border:1px solid var(--line);
    backdrop-filter: blur(8px);
  }
  html[data-theme="light"] .glass{
    background: linear-gradient(180deg, rgba(0,0,0,.04), rgba(0,0,0,.02));
  }

  .chip{
    display:inline-flex; align-items:center; gap:.5rem;
    padding:.375rem .75rem; border-radius:9999px;
    background:var(--soft); border:1px solid var(--line);
    font-size:.9rem;
  }

  .h1-grad{
    background:linear-gradient(90deg,var(--grad-1),var(--grad-2),var(--grad-3));
    -webkit-background-clip:text; background-clip:text; color:transparent;
  }

  .no-scrollbar{ scrollbar-width:none; } .no-scrollbar::-webkit-scrollbar{ display:none; }