/* ===========================================================
   Herba Rêve — App (Sanctuaire / Déposer / Atlas)
   Shell partagé : sidebar, topbar, cartes, chips, boutons.
   S'appuie sur shared/dream.css (reset, grain, starfield…).
   =========================================================== */
:root{
  --font-display:'Spectral',Georgia,serif;
  --font-body:'Mulish',system-ui,sans-serif;
  --font-script:'Petit Formal Script',cursive;
  --night-0:#070510; --night-1:#0c0918; --night-2:#140e24; --night-3:#1d1430;
  --panel:#150e26; --panel-2:#100a1e;
  --mauve:#8b7fa6; --lavender:#c8bce8; --reve:#b59ad8; --reve-2:#d9c7f0;
  --sage:#93a88f; --cream:#f4ede6; --cream-dim:#b3a7c2;
  --gold:#d486b4; --gold-2:#f6cfe2; --ink:#23121f;
  --line:rgba(212,134,180,.16); --line-2:rgba(255,255,255,.08);
  --ok:#7fc99a; --grain-opacity:.045;
  --side-w:262px;
  /* alias palette app v9 (app) — même langage des deux côtés */
  --bg-0:#070510; --bg-1:#0c0918; --bg-2:#140e24;
  --pink:#eaa6cc; --pink-2:#f6cfe2; --pink-deep:#d486b4; --pink-ink:#23121f;
  --pink-grad:linear-gradient(135deg,#f6cfe2,#e0a0c8);
  --magenta:#d77fb2; --lav:#c8bce8;
  --c-heart:#ec5d82; --c-star:#ecca84; --c-comment:#ab8ae6; --c-echo:#5fd3cd; --c-blue:#7fb0e0;
}
body{ background:var(--night-0); color:var(--cream); }

/* ---------- app shell ---------- */
.app{ display:grid; grid-template-columns:var(--side-w) 1fr; min-height:100vh; }
.app.no-side{ grid-template-columns:1fr; }

/* ---------- sidebar ---------- */
.side{ position:sticky; top:0; height:100vh; overflow-y:auto; border-right:1px solid var(--line); background:linear-gradient(180deg,var(--night-1),var(--night-0)); padding:22px 18px 26px; display:flex; flex-direction:column; gap:8px; scrollbar-width:thin; scrollbar-color:rgba(212,134,180,.3) transparent; }
.side::-webkit-scrollbar{ width:6px; } .side::-webkit-scrollbar-thumb{ background:rgba(212,134,180,.3); border-radius:4px; }
.side .brand{ display:flex; align-items:center; gap:12px; padding:4px 8px 18px; }
.side .brand .logo-badge{ width:46px; height:46px; flex:none; display:grid; place-items:center; }
.side .brand .logo-badge img{ width:46px; height:46px; object-fit:contain; filter:drop-shadow(0 2px 9px rgba(246,207,226,.4)); }
.side .brand b{ font-family:var(--font-display); font-weight:500; font-size:16.5px; line-height:1.1; }
.side .brand small{ display:block; font-size:8.5px; letter-spacing:.26em; text-transform:uppercase; color:var(--gold); margin-top:4px; font-family:var(--font-body); }
.side .grp{ font-family:var(--font-body); font-size:10px; letter-spacing:.2em; text-transform:uppercase; color:var(--mauve); padding:16px 12px 8px; }
.nav-i{ display:flex; align-items:center; gap:13px; padding:11px 13px; border-radius:11px; color:var(--cream-dim); font-family:var(--font-body); font-size:14px; transition:.25s; cursor:pointer; position:relative; }
.nav-i svg{ width:19px; height:19px; flex:none; color:var(--gold); opacity:.85; transition:.25s; }
.nav-i:hover{ background:rgba(255,255,255,.04); color:var(--cream); }
.nav-i.active{ background:linear-gradient(100deg,rgba(212,134,180,.16),rgba(212,134,180,.04)); color:var(--gold-2); box-shadow:inset 0 0 0 1px rgba(212,134,180,.3); }
.nav-i.active::before{ content:""; position:absolute; left:-18px; top:50%; transform:translateY(-50%); width:3px; height:22px; border-radius:0 3px 3px 0; background:var(--gold-2); }
.nav-i .count{ margin-left:auto; font-size:11px; color:var(--mauve); background:rgba(255,255,255,.05); border-radius:999px; padding:2px 8px; }

.side-card{ margin-top:auto; border:1px solid var(--line); border-radius:16px; padding:22px 18px; text-align:center; background:rgba(255,255,255,.02); position:relative; overflow:hidden; }
.side-card .moon{ width:34px; color:var(--gold-2); margin:0 auto 12px; opacity:.92; }
.side-card h4{ font-family:var(--font-display); font-weight:400; font-size:18px; margin-bottom:7px; }
.side-card p{ font-size:12.5px; color:var(--cream-dim); line-height:1.55; }
.side-card .star-deco{ position:absolute; inset:0; pointer-events:none; }

.side .profile{ display:flex; align-items:center; gap:11px; padding:10px 8px 2px; border-top:1px solid var(--line-2); margin-top:14px; }
.side .profile .ava{ width:38px; height:38px; border-radius:50%; object-fit:cover; border:1px solid rgba(212,134,180,.5); }
.side .profile b{ font-size:13.5px; font-family:var(--font-body); font-weight:600; }
.side .profile small{ display:block; font-size:11px; color:var(--gold-2); margin-top:1px; }

/* ---------- main ---------- */
.main{ min-width:0; position:relative; }
.topbar{ display:flex; align-items:center; justify-content:space-between; gap:18px; padding:20px clamp(20px,3.4vw,46px); position:sticky; top:0; z-index:40; background:rgba(7,5,16,.72); -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px); border-bottom:1px solid var(--line); }
.topbar .tb-r{ display:flex; align-items:center; gap:16px; }
.iconbtn{ width:42px; height:42px; border-radius:50%; border:1px solid var(--line); display:grid; place-items:center; color:var(--cream-dim); transition:.25s; position:relative; }
.iconbtn:hover{ color:var(--gold-2); border-color:rgba(212,134,180,.5); }
.iconbtn svg{ width:18px; height:18px; }
.iconbtn .dot{ position:absolute; top:9px; right:10px; width:7px; height:7px; border-radius:50%; background:var(--gold-2); box-shadow:0 0 0 2px var(--night-0); }
.who-chip{ display:flex; align-items:center; gap:10px; padding:6px 8px 6px 6px; border-radius:999px; border:1px solid var(--line); cursor:pointer; transition:.25s; }
.who-chip:hover{ border-color:rgba(212,134,180,.5); }
.who-chip img{ width:32px; height:32px; border-radius:50%; object-fit:cover; }
.who-chip b{ font-size:13px; font-family:var(--font-body); font-weight:600; }
.who-chip svg{ width:14px; height:14px; color:var(--cream-dim); }

.wrap{ padding:30px clamp(20px,3.4vw,46px) 70px; }

/* ---------- buttons ---------- */
.btn{ display:inline-flex; align-items:center; justify-content:center; gap:9px; font-family:var(--font-body); font-size:13px; letter-spacing:.06em; font-weight:600; padding:13px 24px; border-radius:999px; transition:.35s cubic-bezier(.16,.7,.3,1); cursor:pointer; white-space:nowrap; }
.btn svg{ width:16px; height:16px; }
.btn-gold{ background:linear-gradient(135deg,var(--gold-2),var(--gold)); color:var(--ink); box-shadow:0 10px 28px -12px rgba(246,207,226,.8); text-transform:uppercase; letter-spacing:.08em; }
.btn-gold:hover{ transform:translateY(-2px); box-shadow:0 16px 36px -14px rgba(246,207,226,.95); }
.btn-ghost{ border:1px solid rgba(212,134,180,.45); color:var(--gold-2); }
.btn-ghost:hover{ background:rgba(212,134,180,.1); }
.btn-soft{ background:rgba(255,255,255,.05); border:1px solid var(--line); color:var(--cream); }
.btn-soft:hover{ background:rgba(255,255,255,.09); }

/* ---------- page heading ---------- */
.page-h{ position:relative; margin-bottom:26px; }
.page-h h1{ font-family:var(--font-display); font-weight:300; font-size:clamp(34px,4.2vw,52px); line-height:1; display:flex; align-items:center; gap:14px; }
.page-h h1 em{ font-style:normal; font-family:var(--font-script); color:var(--gold-2); }
.page-h h1 .st{ width:24px; height:24px; color:var(--gold-2); }
.page-h p{ margin-top:12px; color:var(--cream-dim); font-size:16px; max-width:60ch; }

/* ---------- action cards (déposer/parler/transformer…) ---------- */
.actions{ display:grid; grid-template-columns:repeat(5,1fr); gap:14px; margin-bottom:30px; }
.act{ border:1px solid var(--line); border-radius:16px; background:linear-gradient(165deg,rgba(255,255,255,.035),rgba(255,255,255,.01)); padding:22px 18px; text-align:center; transition:.4s cubic-bezier(.16,.7,.3,1); cursor:pointer; position:relative; overflow:hidden; }
.act:hover{ transform:translateY(-5px); border-color:rgba(212,134,180,.5); box-shadow:0 22px 44px -26px #000; }
.act .ic{ width:52px; height:52px; margin:0 auto 14px; border-radius:50%; display:grid; place-items:center; color:var(--gold-2); background:radial-gradient(circle at 50% 38%,rgba(139,127,166,.4),rgba(20,14,36,.5)); border:1px solid rgba(212,134,180,.35); transition:.4s; }
.act:hover .ic{ transform:scale(1.08); box-shadow:0 0 26px -6px rgba(246,207,226,.5); }
.act .ic svg{ width:24px; height:24px; }
.act h3{ font-family:var(--font-body); font-weight:700; font-size:12.5px; letter-spacing:.05em; text-transform:uppercase; }
.act p{ font-size:12px; color:var(--cream-dim); margin-top:4px; }
.act.primary{ background:linear-gradient(165deg,rgba(212,134,180,.18),rgba(212,134,180,.04)); border-color:rgba(212,134,180,.45); }

/* ---------- filter chips ---------- */
.chips{ display:flex; align-items:center; gap:9px; flex-wrap:wrap; }
.chip{ font-family:var(--font-body); font-size:13px; padding:9px 18px; border-radius:999px; border:1px solid var(--line); color:var(--cream-dim); cursor:pointer; transition:.25s; }
.chip:hover{ color:var(--cream); }
.chip.on{ background:linear-gradient(135deg,var(--gold-2),var(--gold)); color:var(--ink); border-color:transparent; font-weight:600; }

.search{ display:flex; align-items:center; gap:10px; background:rgba(255,255,255,.04); border:1px solid var(--line); border-radius:999px; padding:10px 16px; min-width:230px; }
.search input{ background:none; border:0; outline:none; color:var(--cream); font-family:var(--font-body); font-size:14px; width:100%; }
.search input::placeholder{ color:var(--mauve); }
.search svg{ width:16px; height:16px; color:var(--cream-dim); }

/* ---------- dream thumbnails (gradient placeholders) ---------- */
.dthumb{ position:relative; border-radius:13px; overflow:hidden; background:var(--night-2); }
.dthumb img{ width:100%; height:100%; object-fit:cover; }
.dthumb .pl{ position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); width:44px; height:44px; border-radius:50%; background:rgba(13,9,25,.55); -webkit-backdrop-filter:blur(4px); backdrop-filter:blur(4px); border:1px solid rgba(246,207,226,.6); display:grid; place-items:center; color:var(--gold-2); transition:.3s; }
.dthumb .pl svg{ width:16px; height:16px; margin-left:2px; }
.dthumb:hover .pl{ transform:translate(-50%,-50%) scale(1.12); background:rgba(246,207,226,.9); color:var(--ink); }
.dthumb .dur{ position:absolute; left:10px; bottom:9px; font-family:var(--font-body); font-size:11px; color:var(--cream); background:rgba(13,9,25,.6); padding:2px 8px; border-radius:999px; }
/* thematic gradients */
.d-cloud{ background:radial-gradient(120% 90% at 60% 18%, #6a5a98, #2a2150 55%, #141a3a); }
.d-ocean{ background:radial-gradient(120% 90% at 50% 22%, #2f6f8f, #1b3a55 55%, #0e1f33); }
.d-forest{ background:radial-gradient(120% 90% at 55% 28%, #5a6b3f, #2c3a26 55%, #16210f); }
.d-castle{ background:radial-gradient(120% 90% at 55% 22%, #7a6aa0, #3a2f5a 55%, #1a1438); }
.d-corridor{ background:radial-gradient(120% 90% at 50% 30%, #6b4a6a, #36223a 55%, #1a1020); }
.d-stair{ background:radial-gradient(120% 90% at 55% 18%, #8a7ab0, #43386a 55%, #1d1840); }
.d-temple{ background:radial-gradient(120% 90% at 55% 22%, #9a7a4a, #4a3a26 55%, #23121f); }
.d-swing{ background:radial-gradient(120% 90% at 55% 20%, #5a6aa8, #2a3560 55%, #141a3a); }
.dthumb .moti{ position:absolute; inset:0; display:grid; place-items:center; color:rgba(246,207,226,.16); }
.dthumb .moti svg{ width:46%; height:46%; }

/* ---------- pills / status ---------- */
.pill{ display:inline-flex; align-items:center; gap:6px; font-family:var(--font-body); font-size:11px; padding:3px 10px; border-radius:999px; border:1px solid var(--line); color:var(--cream-dim); }
.pill.pub{ color:var(--ok); border-color:rgba(127,201,154,.4); }
.pill.priv{ color:var(--lavender); border-color:rgba(200,188,232,.4); }
.pill.conf{ color:var(--gold-2); border-color:rgba(246,207,226,.4); }
.tag{ font-family:var(--font-body); font-size:12px; padding:5px 11px; border-radius:999px; border:1px solid rgba(200,188,232,.3); color:var(--lavender); }

/* ---------- generic card ---------- */
.card{ border:1px solid var(--line); border-radius:18px; background:linear-gradient(165deg,rgba(255,255,255,.03),rgba(255,255,255,.008)); }

/* ---------- floating mic / cta ---------- */
.fab{ position:fixed; right:26px; bottom:26px; z-index:120; display:flex; align-items:center; gap:12px; padding:12px 22px 12px 14px; border-radius:999px; background:linear-gradient(135deg,var(--gold-2),var(--gold)); color:var(--ink); font-family:var(--font-body); font-weight:700; font-size:13px; letter-spacing:.04em; box-shadow:0 16px 40px -14px rgba(246,207,226,.8); cursor:pointer; transition:.35s cubic-bezier(.16,.7,.3,1); }
.fab:hover{ transform:translateY(-3px); }
.fab .mic{ width:38px; height:38px; border-radius:50%; background:rgba(22,18,42,.16); display:grid; place-items:center; }
.fab .mic svg{ width:19px; height:19px; }

@media(max-width:1080px){ .actions{ grid-template-columns:repeat(2,1fr); } }
@media(max-width:920px){
  .app{ grid-template-columns:1fr; }
  .side{ position:fixed; left:0; top:0; z-index:200; width:var(--side-w); transform:translateX(-104%); transition:transform .4s cubic-bezier(.16,.7,.3,1); }
  .side.open{ transform:none; }
  .menu-btn{ display:grid !important; }
}
.menu-btn{ display:none; }

/* ---------- mobile bottom tab bar ---------- */
.mtabbar{ display:none; }
@media(max-width:920px){
  .mtabbar{ position:fixed; left:0; right:0; bottom:0; z-index:180; display:flex; justify-content:space-around; padding:9px 6px calc(env(safe-area-inset-bottom,0px) + 12px); background:linear-gradient(0deg,rgba(8,11,28,.97),rgba(8,11,28,.78)); -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px); border-top:1px solid var(--line); }
  .mtabbar a{ display:flex; flex-direction:column; align-items:center; gap:4px; color:var(--mauve); font-family:var(--font-body); font-size:10px; transition:.25s; flex:1; }
  .mtabbar a svg{ width:22px; height:22px; }
  .mtabbar a.on{ color:var(--gold-2); }
  .wrap{ padding-bottom:96px !important; }
  .fab{ bottom:84px; }
  .fab.scroll-fab{ bottom:148px; }
}
@media (prefers-reduced-motion: reduce){ *{ scroll-behavior:auto; } }

/* ===========================================================
   Couche MOBILE (≤560px) — ajoutée 2026-06-27.
   Le shell était pensé desktop (1er breakpoint 860px). Ici on
   rend l'app utilisable sur téléphone (390px) : topbar tassée,
   grilles en 1–2 colonnes, FAB non chevauchantes, anti-débordement.
   =========================================================== */
@media (max-width:560px){
  html,body{ overflow-x:hidden; }
  /* Topbar : tout doit tenir, le chip ne doit pas être coupé */
  .topbar{ padding:12px 12px; gap:8px; }
  .topbar .tb-r{ gap:8px; }
  .who-chip b{ display:none; }            /* garde l'avatar, masque le nom */
  .who-chip{ padding:5px; flex:none; }
  .who-chip svg{ display:none; }
  /* la recherche doit pouvoir rétrécir, sinon elle pousse le chip hors écran */
  .topbar .search{ min-width:0; flex:1 1 auto; max-width:none; }
  .topbar .search input{ min-width:0; width:100%; }
  /* lune décorative du hero : masquée sur mobile (elle chevauchait le titre) */
  .hero-banner .moon{ display:none; }
  /* Grilles d'action : 2 colonnes confortables */
  .banner-acts{ grid-template-columns:repeat(2,1fr); gap:10px; }
  .bact{ width:auto; padding:16px 10px; gap:10px; }
  .bact .ic{ width:48px; height:48px; }
  .bact .ic svg{ width:23px; height:23px; }
  /* Lignes de rêve / stats : passent en 1 colonne (sinon débordent) */
  .dream{ grid-template-columns:1fr; gap:14px; padding:16px; }
  .stats{ grid-template-columns:1fr; gap:14px; }
  .kpis{ grid-template-columns:1fr 1fr; }
  /* FAB : « Parler mon rêve » = doublon de Déposer -> masqué sur mobile.
     « Scroll rêves » -> une seule pilule centrée, propre, au-dessus de la nav. */
  .fab:not(.scroll-fab){ display:none; }
  /* !important pour battre le style inline left:26px du proto */
  .fab.scroll-fab{ left:50% !important; right:auto !important; bottom:92px;
    transform:translateX(-50%); padding:11px 22px 11px 14px; font-size:13px; }
  .fab.scroll-fab .mic{ width:32px; height:32px; }
  /* Le contenu laisse de la place sous la nav + les FAB */
  .wrap, .app, .shell, main, .content{ padding-bottom:160px; }
  /* Zones tactiles minimales */
  .seg button, .tab, .chip{ min-height:40px; }
}