/* ============================================================
   app.css — GLUE de l'app membre (pleine page, mobile-first)
   S'appuie sur le design system refonte.css (tokens --wine/--gold/
   --teal/--cream, composants .post .stories .tabbar .badge .btn .chip).
   Ici : passage du "mock téléphone" des maquettes à un vrai rendu
   plein écran + branchements réels (images, likes, commentaires).
   Accessibilité : cibles >= 44px, focus visibles, reduced-motion.
   ============================================================ */

/* Conteneur app : colonne centrée, place pour la nav basse fixe */
.app{max-width:600px;margin:0 auto;background:var(--cream-50);min-height:100vh;
  padding-bottom:calc(64px + env(safe-area-inset-bottom));position:relative}
.app-topbar{position:sticky;top:0;z-index:40;display:flex;align-items:center;gap:10px;
  padding:10px 15px;background:rgba(250,247,242,.92);backdrop-filter:blur(12px);
  border-bottom:1px solid var(--line-2)}
.app-topbar .word{font-family:var(--serif);font-size:19px;flex:1}
.app-topbar .word b{color:var(--wine-700)}
.app-topbar .word i{font-style:normal;color:var(--ink-400);font-size:10px;letter-spacing:.18em;
  text-transform:uppercase;display:block;margin-top:-2px}
.app-topbar a.tlink{color:var(--ink-700);min-width:44px;min-height:44px;display:grid;place-items:center}

/* Le sélecteur de langue existant (blog.css) reste utilisable */
.app .i18n-pick{transform:scale(.92);transform-origin:right center}

/* Onglets « À la une / Récents » */
.feed-tabs{display:flex;gap:8px;padding:12px 15px 4px;position:sticky;top:52px;z-index:30;
  background:var(--cream-50)}
.feed-tabs a{flex:1;text-align:center;padding:10px;border-radius:var(--r-pill);font:600 13.5px/1 var(--sans);
  color:var(--ink-500);background:var(--paper);border:1px solid var(--line);min-height:44px;
  display:flex;align-items:center;justify-content:center}
.feed-tabs a.on{background:var(--wine-700);color:#fff;border-color:var(--wine-700)}

/* Bandeau de chips (collections / pays) */
.app .chips{padding:12px 15px}

/* Carte publication : vrai média */
.post-media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.post-media.tall{aspect-ratio:4/5}
.post-act form{display:contents}
.post-act button.act{background:none;border:0;padding:0;min-width:44px;min-height:44px;
  display:grid;place-items:center;color:var(--ink-900)}
.post-act button.act svg{width:25px;height:25px}
.post-act .liked svg,.post-act button.act.on svg{color:var(--like);fill:var(--like)}
.post-act a.act{min-width:44px;min-height:44px;display:grid;place-items:center;color:var(--ink-900)}
.post-meta .cap a,.post-meta .cap .tag{color:var(--teal-600);font-weight:600}
.post-h a{display:flex;align-items:center;gap:10px;flex:1;min-width:0}
.post-h .follow{margin-left:auto}
.btn.mini{padding:7px 13px;font-size:12.5px;min-height:36px}

/* Pastille produit -> boutique */
.post-media .prodtag{text-decoration:none;color:var(--ink-900)}
.post-media .prodtag .sw{display:grid;place-items:center;background:var(--grad-gold);color:var(--wine-800);font-weight:700}

/* Carte d'amorçage honnête (état « peu de contenu ») */
.seed-card{margin:14px 15px;border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--sh-2);
  background:var(--paper);border:1px solid var(--line)}
.seed-card .sc-media{aspect-ratio:16/10;background:var(--grad-wine);position:relative;display:grid;place-items:center;color:#fff}
.seed-card .sc-media .lgd{position:absolute;left:12px;top:12px}
.seed-card .sc-media .bear svg{width:70px;height:70px}
.seed-card .sc-body{padding:16px 17px 18px}
.seed-card h3{font-family:var(--serif);font-size:20px;color:var(--wine-800);margin-bottom:6px}
.seed-card p{color:var(--ink-500);font-size:14px;margin:0 0 14px}

/* Encart points (feed + profil) */
.points-bar{margin:12px 15px;border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--sh-2)}
.points-bar .in{background:var(--grad-wine);color:#fff;padding:15px 16px;display:flex;align-items:center;gap:13px}
.points-bar .ic{width:44px;height:44px;border-radius:13px;background:var(--grad-gold);display:grid;place-items:center;flex:none;color:var(--wine-800)}
.points-bar .ic svg{width:24px;height:24px}
.points-bar .t{flex:1}
.points-bar .t b{font-family:var(--serif);font-size:16px;font-weight:400}
.points-bar .t span{display:block;font-size:12px;opacity:.85;margin-top:2px}

/* Barre de navigation basse (fixe, pleine largeur) */
.tabbar{position:fixed;left:0;right:0;bottom:0;max-width:600px;margin:0 auto}
.tabbar a{min-width:48px;min-height:48px}
.tabbar a .lbl{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}

/* Détail publication : en-tête + fil + barre de saisie */
.dp-top{display:flex;align-items:center;gap:12px;padding:11px 14px;border-bottom:1px solid var(--line-2);
  background:var(--cream-50);position:sticky;top:0;z-index:40}
.dp-top .bk{min-width:44px;min-height:44px;display:grid;place-items:center;color:var(--ink-900)}
.dp-top .bk svg{width:22px;height:22px}
.dp-top .nm{font-weight:700;font-size:13.5px;display:flex;align-items:center;gap:6px}
.dp-top .sub{font-size:11px;color:var(--ink-400)}
.cmt-list{padding:6px 14px 12px}
.cmt-i{display:flex;gap:10px;padding:10px 0}
.cmt-i .bd{flex:1;min-width:0}
.cmt-i .bd .l1{font-size:13px;word-wrap:break-word}
.cmt-i .bd .l1 b{font-weight:700}
.cmt-i .bd .meta{font-size:11px;color:var(--ink-400);margin-top:4px;display:flex;gap:14px}
.cmt-empty{color:var(--ink-400);font-size:13px;padding:18px 14px;text-align:center}
.cmt-bar{position:fixed;left:0;right:0;bottom:0;max-width:600px;margin:0 auto;display:flex;align-items:center;gap:10px;
  padding:9px 12px calc(9px + env(safe-area-inset-bottom));border-top:1px solid var(--line-2);background:var(--paper)}
.cmt-bar input{flex:1;background:var(--cream-100);border:0;border-radius:var(--r-pill);padding:12px 15px;
  color:var(--ink-900);font-size:14px;min-height:44px}
.cmt-bar input:focus{outline:2px solid var(--gold-400)}
.cmt-bar button{background:none;border:0;color:var(--wine-700);font-weight:700;font-size:14px;min-height:44px;padding:0 6px}
.cmt-flash{margin:10px 14px 0;padding:10px 13px;border-radius:var(--r-md);font-size:13px;background:var(--teal-100);color:var(--teal-700)}
.cmt-flash.err{background:#fbe0dd;color:var(--danger)}
.app-detail{padding-bottom:calc(64px + env(safe-area-inset-bottom))}

/* Profil : en-tête + compteurs + grille */
.pf-head{padding:20px 16px 8px;text-align:center}
.pf-head .av-lg{margin:0 auto}
.pf-head h1{font-family:var(--serif);font-size:22px;color:var(--wine-800);margin-top:10px}
.pf-handle{color:var(--gold-600);font-weight:600;font-size:13px}
.pf-bio{color:var(--ink-500);font-size:13.5px;margin:8px auto 0;max-width:34ch}
.pf-stats{display:flex;justify-content:center;gap:26px;margin:16px 0 6px}
.pf-stats .s{text-align:center}
.pf-stats .s b{display:block;font-family:var(--serif);font-size:19px;color:var(--wine-800)}
.pf-stats .s span{font-size:11.5px;color:var(--ink-500)}
.pf-actions{display:flex;gap:10px;justify-content:center;padding:6px 16px 4px}
.pf-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:3px;padding:12px 3px 3px}
.pf-cell{position:relative;aspect-ratio:1/1;background:var(--cream-200);overflow:hidden}
.pf-cell img{width:100%;height:100%;object-fit:cover}
.pf-cell .st{position:absolute;left:5px;top:5px;font:600 9px/1 var(--sans);padding:3px 6px;border-radius:var(--r-pill);
  background:rgba(255,255,255,.9);color:var(--ink-700)}
.pf-cell .st.s-pending{background:#fff2dc;color:#a2711a}
.pf-cell .st.s-rejected{background:#fbe0dd;color:var(--danger)}
.pf-empty{grid-column:1/-1;text-align:center;color:var(--ink-400);padding:30px 16px}

/* Explorer : recherche */
.exp-search{padding:12px 15px 4px}
.exp-search form{display:flex;gap:8px}
.exp-search input{flex:1;background:var(--paper);border:1px solid var(--line);border-radius:var(--r-pill);
  padding:12px 15px;font-size:14px;min-height:44px}
.exp-search input:focus{outline:2px solid var(--gold-400)}
.exp-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:3px;padding:12px 3px 3px}
.exp-cell{position:relative;aspect-ratio:1/1;overflow:hidden;background:var(--cream-200)}
.exp-cell img{width:100%;height:100%;object-fit:cover}
.exp-empty{text-align:center;color:var(--ink-400);padding:34px 16px}

/* Sélecteur de langue compact dans la topbar app (autonome, sans blog.css) */
.app-topbar .i18n-pick{display:flex;gap:6px;align-items:center;margin:0}
.app-topbar .i18n-lbl{display:inline-flex;align-items:center;gap:3px;background:var(--paper);
  border:1px solid var(--line);border-radius:var(--r-pill);padding:4px 8px}
.app-topbar .i18n-lbl select{border:0;background:none;font:600 12px/1 var(--sans);color:var(--ink-700);max-width:80px}
.app-topbar .i18n-ic{font-size:12px}
.app-topbar .i18n-go{display:none}

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