/* ============================================================
   HENNEYBEAR LONDON — henneybear.blog
   Refonte "réseau social premium" — Direction artistique
   Feuille partagée (locale, zéro CDN). Maquettes statiques.
   ============================================================ */

:root{
  /* --- Bordeaux (identité London) --- */
  --wine-900:#3a0e16;
  --wine-800:#4a121c;
  --wine-700:#6e1d2b;   /* couleur primaire */
  --wine-600:#8a2436;
  --wine-500:#a12433;
  /* --- Or / champagne --- */
  --gold-600:#b8863b;
  --gold-500:#c79a4b;
  --gold-400:#e4c583;
  --gold-200:#efd9b8;
  /* --- Teal (accent frais, points/validé) --- */
  --teal-700:#175a56;
  --teal-600:#1f6f6b;
  --teal-100:#d7ece9;
  /* --- Crème / papier --- */
  --cream-50:#faf7f2;
  --cream-100:#f4eee4;
  --cream-200:#ece4d6;
  --paper:#ffffff;
  /* --- Encre / neutres --- */
  --ink-900:#221a17;
  --ink-700:#4a3f38;
  --ink-500:#6b5f57;
  --ink-400:#998b80;
  --ink-300:#c4b8ab;
  --line:#ece4d8;
  --line-2:#f2ebe0;
  /* --- Sémantique --- */
  --like:#e0405a;
  --ok:#1f6f6b;
  --warn:#c98a1e;
  --danger:#c0362c;
  /* --- Rayons --- */
  --r-xl:26px; --r-lg:20px; --r-md:14px; --r-sm:10px; --r-pill:999px;
  /* --- Ombres (douces, "app") --- */
  --sh-1:0 1px 2px rgba(58,14,22,.04), 0 1px 8px rgba(58,14,22,.05);
  --sh-2:0 4px 14px rgba(58,14,22,.07), 0 2px 4px rgba(58,14,22,.04);
  --sh-3:0 12px 34px rgba(58,14,22,.12);
  --sh-card:0 1px 0 var(--line), 0 8px 24px rgba(58,14,22,.06);
  /* --- Typo --- */
  --serif:"Iowan Old Style","Palatino Linotype",Palatino,Georgia,"Times New Roman",serif;
  --sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,"Helvetica Neue",sans-serif;
  --grad-wine:linear-gradient(135deg,#6e1d2b 0%,#4a121c 60%,#3a0e16 100%);
  --grad-gold:linear-gradient(135deg,#e4c583,#c79a4b);
  --grad-story:linear-gradient(135deg,#e4c583 0%,#c79a4b 30%,#a12433 65%,#6e1d2b 100%);
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;font-family:var(--sans);color:var(--ink-900);background:var(--cream-100);
  -webkit-font-smoothing:antialiased;line-height:1.45}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font-family:inherit;cursor:pointer}
h1,h2,h3,h4{margin:0;font-weight:700}
.serif{font-family:var(--serif)}
.muted{color:var(--ink-500)}
.tiny{font-size:11px}
.center{text-align:center}

/* ---------- "Photo" placeholders (dégradés premium, 0 image) ---------- */
.ph{position:relative;overflow:hidden;background:#e9dfce}
.ph::after{content:"";position:absolute;inset:0;
  background:radial-gradient(120% 80% at 20% 10%,rgba(255,255,255,.28),transparent 55%),
             radial-gradient(90% 60% at 90% 100%,rgba(0,0,0,.18),transparent 60%);
  mix-blend-mode:soft-light}
.ph-mark{position:absolute;right:10px;bottom:9px;font:600 10px/1 var(--sans);
  color:rgba(255,255,255,.72);letter-spacing:.16em;text-transform:uppercase;z-index:2;
  text-shadow:0 1px 2px rgba(0,0,0,.25)}
.ph1{background:linear-gradient(150deg,#7a2130,#4a121c 70%)}
.ph2{background:linear-gradient(150deg,#e7cf9a,#c79a4b 75%)}
.ph3{background:linear-gradient(160deg,#efe4d2,#c9b7a0)}
.ph4{background:linear-gradient(150deg,#2b6f6b,#124a47)}
.ph5{background:linear-gradient(150deg,#b7808a,#6e1d2b)}
.ph6{background:linear-gradient(160deg,#f6ede0,#d8c6ad)}
.ph7{background:linear-gradient(150deg,#3a2a3e,#6e1d2b)}
.ph8{background:linear-gradient(160deg,#e4c583,#a97e33)}
.ph9{background:linear-gradient(150deg,#8a2436,#3a0e16)}
.ph10{background:linear-gradient(160deg,#dfeae7,#9dc3bd)}
.ph11{background:linear-gradient(150deg,#c99,#7a2130)}
.ph12{background:linear-gradient(160deg,#efd9b8,#c79a4b)}
/* motif "grain" léger façon studio */
.ph.tex::before{content:"";position:absolute;inset:0;opacity:.10;z-index:1;
  background-image:radial-gradient(rgba(255,255,255,.6) .5px,transparent .6px);
  background-size:4px 4px}

/* ---------- Avatars ---------- */
.av{border-radius:50%;background:var(--grad-wine);color:#fff;display:grid;place-items:center;
  font-weight:700;flex:none;overflow:hidden;font-family:var(--serif)}
.av.g{background:var(--grad-gold);color:var(--wine-800)}
.av.t{background:linear-gradient(135deg,#2b6f6b,#124a47)}
.av-20{width:20px;height:20px;font-size:9px}
.av-32{width:32px;height:32px;font-size:12px}
.av-40{width:40px;height:40px;font-size:14px}
.av-56{width:56px;height:56px;font-size:19px}
.av-88{width:88px;height:88px;font-size:30px}

/* ---------- Badges de rôle ---------- */
.badge{display:inline-flex;align-items:center;gap:4px;font:600 10px/1 var(--sans);
  padding:3px 7px;border-radius:var(--r-pill);letter-spacing:.02em;vertical-align:middle}
.badge svg{width:11px;height:11px}
.b-officiel{background:var(--wine-700);color:#fff}
.b-ambass{background:var(--grad-gold);color:var(--wine-800)}
.b-membre{background:var(--cream-200);color:var(--ink-700)}
.b-teal{background:var(--teal-100);color:var(--teal-700)}
.dot{width:7px;height:7px;border-radius:50%;background:var(--gold-400);display:inline-block}

/* ---------- Boutons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:7px;border:0;
  border-radius:var(--r-pill);font:600 14px/1 var(--sans);padding:12px 18px;color:#fff;
  background:var(--grad-wine);box-shadow:var(--sh-2);transition:transform .12s,box-shadow .12s}
.btn:active{transform:translateY(1px)}
.btn.gold{background:var(--grad-gold);color:var(--wine-800)}
.btn.ghost{background:var(--paper);color:var(--wine-700);box-shadow:inset 0 0 0 1.5px var(--line)}
.btn.teal{background:linear-gradient(135deg,#2b6f6b,#175a56)}
.btn.sm{padding:8px 14px;font-size:13px}
.btn.block{width:100%}
.btn.lg{padding:15px 22px;font-size:15px}

/* ---------- Chips / hashtags ---------- */
.chips{display:flex;gap:8px;overflow-x:auto;padding:2px 0;scrollbar-width:none}
.chips::-webkit-scrollbar{display:none}
.chip{flex:none;background:var(--paper);border:1px solid var(--line);color:var(--ink-700);
  padding:8px 13px;border-radius:var(--r-pill);font:600 12.5px/1 var(--sans);white-space:nowrap}
.chip.on{background:var(--wine-700);color:#fff;border-color:var(--wine-700)}
.tag{color:var(--teal-600);font-weight:600}

/* ============================================================
   MOCK TÉLÉPHONE (pour les écrans app)
   ============================================================ */
.gallery-bg{min-height:100vh;background:
   radial-gradient(60% 40% at 50% 0%,#5a1723,transparent 60%),
   linear-gradient(160deg,#2c0b12,#1a070c 70%);padding:34px 16px 60px}
.stage-title{max-width:1200px;margin:0 auto 26px;color:#f4e3c4;text-align:center}
.stage-title .kk{font:600 11px/1 var(--sans);letter-spacing:.28em;text-transform:uppercase;color:var(--gold-400);opacity:.9}
.stage-title h1{font-family:var(--serif);font-size:30px;margin:9px 0 4px;color:#fff}
.stage-title p{color:#e7cfa0;opacity:.75;margin:0;font-size:14px}
.stage-grid{max-width:1200px;margin:0 auto;display:flex;flex-wrap:wrap;gap:40px 44px;justify-content:center}
.device-wrap{display:flex;flex-direction:column;align-items:center;gap:14px}
.device-cap{color:#e7cfa0;font-size:12.5px;text-align:center;max-width:300px;opacity:.85}
.device-cap b{color:#fff;font-weight:600;display:block;font-size:13.5px;font-family:var(--serif);letter-spacing:.02em}
.phone{width:322px;height:696px;background:#0c0708;border-radius:46px;padding:11px;
  box-shadow:0 40px 90px rgba(0,0,0,.5),0 0 0 2px rgba(228,197,131,.18),inset 0 0 0 1px rgba(255,255,255,.06);
  position:relative;flex:none}
.screen{width:100%;height:100%;background:var(--cream-50);border-radius:36px;overflow:hidden;position:relative;
  display:flex;flex-direction:column}
.notch{position:absolute;top:11px;left:50%;transform:translateX(-50%);width:112px;height:26px;
  background:#0c0708;border-radius:0 0 16px 16px;z-index:60}
.statusbar{height:40px;flex:none;display:flex;align-items:center;justify-content:space-between;
  padding:0 22px;font:600 12px/1 var(--sans);color:var(--ink-900);z-index:55;background:transparent}
.statusbar.onwine{color:#fff}
.sb-r{display:flex;gap:6px;align-items:center}
.sb-r svg{width:15px;height:15px}

/* Zone défilable de l'écran */
.scroll{flex:1;overflow-y:auto;overflow-x:hidden;-webkit-overflow-scrolling:touch}
.scroll::-webkit-scrollbar{width:0}

/* ---------- App topbar ---------- */
.app-top{position:sticky;top:0;z-index:40;display:flex;align-items:center;justify-content:space-between;
  padding:8px 15px 10px;background:rgba(250,247,242,.86);backdrop-filter:blur(12px);
  border-bottom:1px solid var(--line-2)}
.app-logo{display:flex;align-items:center;gap:8px}
.app-logo .word{font-family:var(--serif);font-size:19px;letter-spacing:.01em}
.app-logo .word b{color:var(--wine-700)}
.app-logo .word i{font-style:normal;color:var(--ink-400);font-size:11px;letter-spacing:.18em;
  text-transform:uppercase;display:block;margin-top:-2px}
.top-ic{display:flex;gap:14px;align-items:center;color:var(--ink-900)}
.top-ic svg{width:23px;height:23px}
.ic-badge{position:relative}
.ic-badge b{position:absolute;top:-5px;right:-6px;min-width:15px;height:15px;padding:0 3px;border-radius:9px;
  background:var(--like);color:#fff;font:700 9px/15px var(--sans);text-align:center}

/* ---------- Stories ---------- */
.stories{display:flex;gap:13px;padding:12px 15px;overflow-x:auto;scrollbar-width:none;background:var(--cream-50)}
.stories::-webkit-scrollbar{display:none}
.story{flex:none;width:62px;text-align:center}
.story .ring{width:62px;height:62px;border-radius:50%;padding:2.5px;background:var(--grad-story);
  display:grid;place-items:center}
.story.seen .ring{background:var(--cream-200)}
.story .inner{width:100%;height:100%;border-radius:50%;border:2.5px solid var(--cream-50);overflow:hidden;
  background:var(--grad-wine)}
.story .lbl{font-size:10.5px;color:var(--ink-700);margin-top:5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.story.me .ring{background:var(--cream-200)}
.story.me .plus{position:relative}
.story.me .plus::after{content:"+";position:absolute;right:-2px;bottom:12px;width:20px;height:20px;border-radius:50%;
  background:var(--wine-700);color:#fff;font:700 15px/17px var(--sans);text-align:center;border:2.5px solid var(--cream-50)}

/* ---------- Carte publication ---------- */
.post{background:var(--paper);margin:0 0 10px;box-shadow:var(--sh-1)}
.post-h{display:flex;align-items:center;gap:10px;padding:11px 13px}
.post-h .nm{font-weight:700;font-size:13.5px;display:flex;align-items:center;gap:6px}
.post-h .sub{font-size:11px;color:var(--ink-400)}
.post-h .more{margin-left:auto;color:var(--ink-400)}
.post-media{position:relative;width:100%;aspect-ratio:4/5;background:#eadfce}
.post-media.sq{aspect-ratio:1/1}
.post-media .vtag{position:absolute;top:11px;right:11px;background:rgba(0,0,0,.42);color:#fff;
  border-radius:var(--r-pill);padding:4px 9px;font:600 11px/1 var(--sans);display:flex;gap:5px;align-items:center;backdrop-filter:blur(4px)}
.post-media .prodtag{position:absolute;left:12px;bottom:12px;background:rgba(255,255,255,.94);
  border-radius:var(--r-pill);padding:6px 11px 6px 8px;display:flex;gap:7px;align-items:center;box-shadow:var(--sh-2)}
.post-media .prodtag .sw{width:22px;height:22px;border-radius:6px}
.post-media .prodtag .pt{font:600 11px/1.2 var(--sans)}
.post-media .prodtag .pt small{color:var(--ink-400);font-weight:600}
.post-act{display:flex;align-items:center;gap:18px;padding:11px 14px 4px;color:var(--ink-900)}
.post-act svg{width:25px;height:25px}
.post-act .liked{color:var(--like)}
.post-act .save{margin-left:auto}
.reacts{display:flex;align-items:center;gap:0;padding:2px 14px 0}
.reacts .rr{width:22px;height:22px;border-radius:50%;margin-left:-6px;border:2px solid var(--paper);
  display:grid;place-items:center;font-size:12px}
.reacts .rr:first-child{margin-left:0}
.re-love{background:#ffe0e6}.re-wow{background:#fff0d0}.re-fire{background:#ffe4cf}
.post-meta{padding:5px 14px 13px}
.post-meta .likes{font-weight:700;font-size:13px}
.post-meta .cap{font-size:13.5px;margin-top:4px}
.post-meta .cap b{font-weight:700}
.post-meta .cmt{color:var(--ink-400);font-size:12.5px;margin-top:6px}
.post-meta .time{color:var(--ink-300);font-size:10.5px;margin-top:7px;letter-spacing:.04em;text-transform:uppercase}

/* ---------- Bottom nav ---------- */
.tabbar{flex:none;display:flex;align-items:center;justify-content:space-around;
  padding:9px 8px calc(9px + env(safe-area-inset-bottom));background:rgba(255,255,255,.94);
  backdrop-filter:blur(14px);border-top:1px solid var(--line-2);z-index:45}
.tabbar a{color:var(--ink-400);display:grid;place-items:center;position:relative}
.tabbar a svg{width:26px;height:26px}
.tabbar a.on{color:var(--wine-700)}
.tab-pub{width:44px;height:44px;border-radius:15px;background:var(--grad-wine);color:#fff!important;
  box-shadow:var(--sh-2)}
.tab-pub svg{width:24px;height:24px}

/* ============================================================
   DESKTOP : Admin + Portail public
   ============================================================ */
.wrap{max-width:1180px;margin:0 auto;padding:0 22px}
.pagehead{background:var(--paper);border-bottom:1px solid var(--line);position:sticky;top:0;z-index:30}
.card{background:var(--paper);border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--sh-1)}
.grid{display:grid;gap:18px}
.kpi{padding:18px 20px}
.kpi .lab{font-size:12px;color:var(--ink-500);font-weight:600;letter-spacing:.02em}
.kpi .val{font-family:var(--serif);font-size:30px;margin-top:6px;color:var(--wine-800)}
.kpi .delta{font-size:11.5px;font-weight:600;margin-top:4px}
.kpi .delta.up{color:var(--teal-600)}.kpi .delta.flat{color:var(--ink-400)}

/* ============================================================
   ADMIN (back-office desktop)
   ============================================================ */
body.admin{background:var(--cream-100)}
.adm{display:grid;grid-template-columns:238px 1fr;min-height:100vh}
.side{background:var(--wine-900);color:#f3e4cd;padding:20px 14px;position:sticky;top:0;height:100vh;align-self:start}
.side .brand{display:flex;align-items:center;gap:9px;padding:4px 8px 18px;border-bottom:1px solid rgba(255,255,255,.1);margin-bottom:12px}
.side .brand .word{font-family:var(--serif);font-size:16px;color:#fff}
.side .brand .word i{display:block;font-style:normal;font-size:9px;letter-spacing:.2em;text-transform:uppercase;color:var(--gold-400)}
.side .sect{font:600 10px/1 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:rgba(243,228,205,.45);padding:16px 10px 7px}
.side a{display:flex;align-items:center;gap:10px;padding:10px 11px;border-radius:10px;color:#e9d8bf;font-size:13.5px;font-weight:500}
.side a svg{width:18px;height:18px;opacity:.85}
.side a .n{margin-left:auto;background:var(--wine-600);color:#fff;font:700 10px/1 var(--sans);padding:3px 7px;border-radius:9px}
.side a.on{background:linear-gradient(135deg,rgba(228,197,131,.22),rgba(228,197,131,.08));color:#fff;box-shadow:inset 0 0 0 1px rgba(228,197,131,.3)}
.side a:hover{background:rgba(255,255,255,.06)}
.main{padding:22px 26px 60px;min-width:0}
.adm-top{display:flex;align-items:center;gap:16px;margin-bottom:22px}
.adm-top h1{font-family:var(--serif);font-size:24px;color:var(--wine-800)}
.adm-top .sub{color:var(--ink-500);font-size:13px;margin-top:2px}
.adm-top .r{margin-left:auto;display:flex;gap:10px;align-items:center}
.adm-search{background:var(--paper);border:1px solid var(--line);border-radius:var(--r-pill);padding:9px 15px;color:var(--ink-400);font-size:13px;display:flex;gap:8px;align-items:center}
.adm-search svg{width:16px;height:16px}
.kgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-bottom:20px}
.panel{background:var(--paper);border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--sh-1)}
.panel-h{display:flex;align-items:center;gap:10px;padding:15px 18px;border-bottom:1px solid var(--line-2)}
.panel-h h3{font-size:14.5px;color:var(--ink-900)}
.panel-h .r{margin-left:auto;display:flex;gap:8px;align-items:center}
.panel-b{padding:16px 18px}
.pill{display:inline-flex;align-items:center;gap:5px;font:600 11px/1 var(--sans);padding:5px 9px;border-radius:var(--r-pill)}
.pill.wait{background:#fff2dc;color:#a2711a}
.pill.ok{background:var(--teal-100);color:var(--teal-700)}
.pill.no{background:#fbe0dd;color:var(--danger)}
.tbl{width:100%;border-collapse:collapse;font-size:13px}
.tbl th{text-align:left;font:600 11px/1 var(--sans);color:var(--ink-500);text-transform:uppercase;letter-spacing:.04em;padding:10px 14px;border-bottom:1px solid var(--line)}
.tbl td{padding:11px 14px;border-bottom:1px solid var(--line-2);vertical-align:middle}
.tbl tr:last-child td{border-bottom:0}
.tbl .u{display:flex;align-items:center;gap:9px}
.tbl .u b{font-weight:600}
.tbl .u span{color:var(--ink-400);font-size:11px}
.ab{border:0;border-radius:8px;padding:7px 11px;font:600 12px/1 var(--sans);cursor:pointer}
.ab.g{background:var(--teal-600);color:#fff}
.ab.r{background:#fbe0dd;color:var(--danger)}
.ab.n{background:var(--cream-100);color:var(--ink-700)}
.spark{display:flex;align-items:flex-end;gap:4px;height:64px}
.spark i{flex:1;background:linear-gradient(180deg,var(--gold-400),var(--wine-600));border-radius:3px 3px 0 0;min-height:6px}
.empty{text-align:center;padding:34px 18px;color:var(--ink-400)}
.empty svg{width:40px;height:40px;opacity:.4;margin-bottom:8px}
.toggle{width:40px;height:23px;border-radius:12px;background:var(--teal-600);position:relative;flex:none}
.toggle.off{background:var(--ink-300)}
.toggle::after{content:"";position:absolute;top:2.5px;left:2.5px;width:18px;height:18px;border-radius:50%;background:#fff;transition:.15s}
.toggle:not(.off)::after{left:19px}

/* ============================================================
   PORTAIL PUBLIC (desktop / responsive)
   ============================================================ */
body.pub{background:var(--cream-50)}
.pub-nav{position:sticky;top:0;z-index:40;background:rgba(250,247,242,.9);backdrop-filter:blur(12px);border-bottom:1px solid var(--line)}
.pub-nav .in{max-width:1180px;margin:0 auto;display:flex;align-items:center;gap:14px;padding:14px 22px}
.pub-nav .logo{display:flex;align-items:center;gap:9px}
.pub-nav .logo .word{font-family:var(--serif);font-size:20px}
.pub-nav .logo .word b{color:var(--wine-700)}
.pub-nav .logo .word i{font-style:normal;font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-400);display:block;margin-top:-3px}
.pub-nav .lk{display:flex;gap:22px;margin-left:26px;font-size:14px;color:var(--ink-700)}
.pub-nav .lk a{font-weight:500}
.pub-nav .r{margin-left:auto;display:flex;gap:10px;align-items:center}
.hero{position:relative;overflow:hidden;background:var(--grad-wine);color:#fff}
.hero .in{max-width:1180px;margin:0 auto;padding:64px 22px 72px;display:grid;grid-template-columns:1.05fr .95fr;gap:40px;align-items:center}
.hero .kk{font:600 12px/1 var(--sans);letter-spacing:.26em;text-transform:uppercase;color:var(--gold-400)}
.hero h1{font-family:var(--serif);font-size:52px;line-height:1.05;margin:16px 0 16px}
.hero p{font-size:16px;opacity:.9;max-width:440px;line-height:1.6}
.hero .cta{display:flex;gap:12px;margin-top:26px}
.hero::after{content:"";position:absolute;right:-80px;top:-80px;width:340px;height:340px;border-radius:50%;background:radial-gradient(circle,rgba(228,197,131,.28),transparent 68%)}
.sectw{max-width:1180px;margin:0 auto;padding:56px 22px}
.sec-k{font:600 12px/1 var(--sans);letter-spacing:.2em;text-transform:uppercase;color:var(--gold-600);text-align:center}
.sec-t{font-family:var(--serif);font-size:34px;color:var(--wine-800);text-align:center;margin:10px 0 6px}
.sec-s{text-align:center;color:var(--ink-500);max-width:560px;margin:0 auto 34px}
.pubfoot{background:var(--wine-900);color:#e9d8bf;padding:44px 22px 30px}