/* ==========================================================================
   STREXO — redesign.css  (chargé APRÈS styles.css et ui-refresh.css)
   Accueil type Insta · Série type Duolingo · Messagerie type Messenger
   Profil type TikTok · Boutique cartes · Inventaire · Cadeaux · Réglages PC
   ========================================================================== */
:root{
  --r-blue:#2563eb; --r-violet:#7c3aed; --r-green:#58cc02; --r-green-d:#46a302;
  --r-orange:#ff9600; --r-orange-d:#d97d00; --r-line:#e7ebf2; --r-soft:#f3f5f9;
  --r-text:#0f172a; --r-mute:#64748b; --r-grad:linear-gradient(135deg,#2563eb,#7c3aed);
}

/* ---------- LAYOUT GLOBAL + FIX DÉCALAGE PC ---------- */
.content{max-width:none !important;width:100% !important;margin:0 !important;padding:18px 16px 40px !important}
#content{width:100%}
#content > *{width:min(100%,680px) !important;max-width:680px !important;margin-inline:auto !important}
#content > .pf{max-width:720px !important;width:min(100%,720px) !important}
#content > .home-page{max-width:1000px !important;width:min(100%,1000px) !important}
@media (min-width:861px){
  .content{padding-left:118px !important;padding-right:24px !important}   /* place pour la barre latérale */
  .app-header{padding-left:118px !important}
}
@media (max-width:860px){ .content{padding-bottom:calc(96px + env(safe-area-inset-bottom,0px)) !important} }

/* ---------- ACCUEIL (Instagram) ---------- */
.home-intro-v2{display:none !important}
.home-layout-v2{display:grid;grid-template-columns:minmax(0,470px) 280px;gap:32px;justify-content:center}
@media (max-width:980px){.home-layout-v2{grid-template-columns:minmax(0,1fr)}.home-side-v2{display:none}}
.home-stories-v2{background:none !important;border:0 !important;box-shadow:none !important;padding:0 !important;margin-bottom:6px}
.home-stories-v2 .home-section-head-v2,.feed-head-v2{display:none !important}
.story-track{display:flex;gap:14px;overflow-x:auto;padding:4px 2px 10px;scrollbar-width:none}
.story-track::-webkit-scrollbar{display:none}
.story-avatar-ring{background:conic-gradient(from 210deg,#f9ce34,#ee2a7b,#6228d7,#f9ce34) !important;padding:3px !important;border-radius:50%}
.story-avatar-ring.is-mine{background:var(--r-line) !important}
.story-avatar{border:3px solid #fff;border-radius:50%;overflow:hidden}
.story-label{font-size:12px;color:var(--r-text);max-width:68px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.feed-list-v2{display:flex;flex-direction:column;gap:0}
.feed-card{background:#fff !important;border:0 !important;border-bottom:1px solid var(--r-line) !important;border-radius:0 !important;box-shadow:none !important;padding:14px 0 10px !important}
.feed-card-head{padding:0 2px 10px}
.feed-card-pseudo{font-weight:700;font-size:14px}
.feed-media-wrap,.feed-media{border-radius:10px !important;overflow:hidden;background:#000}
.feed-media{width:100%;max-height:75vh;object-fit:cover}
.feed-card-actions{display:flex;gap:4px;padding:8px 0 2px}
.feed-action-btn{background:none !important;border:0 !important;box-shadow:none !important;padding:6px 10px !important;border-radius:999px}
.feed-like-btn.is-liked{color:#ef4444 !important}
.feed-card-caption{padding:0 2px;font-size:14px;line-height:1.45}
.home-side-card-v2{background:#fff;border:1px solid var(--r-line);border-radius:18px;padding:16px;margin-bottom:14px;box-shadow:none}

/* ---------- SÉRIE (Duolingo) ---------- */
.streak-page{display:flex;flex-direction:column;gap:18px}
.dl-top{display:flex;align-items:center;justify-content:space-between}
.dl-top h1{font-size:26px;font-weight:800;margin:0}
.dl-pill{display:inline-flex;align-items:center;gap:6px;font-weight:800;padding:8px 14px;border:2px solid var(--r-line);border-radius:14px;background:#fff}
.dl-hero{background:var(--r-orange);color:#fff;border-radius:22px;padding:22px;display:flex;align-items:center;justify-content:space-between;box-shadow:0 5px 0 var(--r-orange-d)}
.dl-hero strong{font-size:44px;line-height:1;font-weight:800;display:block}
.dl-hero span{font-weight:700;opacity:.95}
.dl-flame{font-size:64px;filter:drop-shadow(0 4px 0 rgba(0,0,0,.15));animation:dlBob 2.4s ease-in-out infinite}
@keyframes dlBob{50%{transform:translateY(-5px) scale(1.04)}}
.dl-path{display:flex;flex-direction:column;align-items:center;gap:18px;padding:8px 0 4px}
.dl-node{display:flex;flex-direction:column;align-items:center;gap:6px;position:relative}
.dl-node:nth-child(4n+2){transform:translateX(-46px)}
.dl-node:nth-child(4n+4){transform:translateX(46px)}
.dl-circle{width:76px;height:76px;border-radius:50%;display:grid;place-items:center;font-size:30px;font-weight:800;
  background:#e5e5e5;color:#afafaf;border:0;box-shadow:0 6px 0 #cfcfcf}
.dl-node.is-done .dl-circle{background:var(--r-green);color:#fff;box-shadow:0 6px 0 var(--r-green-d)}
.dl-node.is-next .dl-circle{background:var(--r-orange);color:#fff;box-shadow:0 6px 0 var(--r-orange-d);animation:dlPulse 1.6s infinite}
@keyframes dlPulse{50%{transform:scale(1.07)}}
.dl-label{font-size:13px;font-weight:800;color:var(--r-mute);display:flex;align-items:center;gap:4px}
.dl-label img{width:16px;height:16px}
.dl-claim{width:100%;border:0;cursor:pointer;background:var(--r-green);color:#fff;font:800 16px/1 var(--font-body);letter-spacing:.04em;text-transform:uppercase;
  padding:17px;border-radius:16px;box-shadow:0 5px 0 var(--r-green-d);transition:transform .08s,box-shadow .08s}
.dl-claim:active:not(:disabled){transform:translateY(4px);box-shadow:0 1px 0 var(--r-green-d)}
.dl-claim:disabled{background:#e5e5e5;color:#afafaf;box-shadow:0 5px 0 #cfcfcf;cursor:default}

/* ---------- MESSAGERIE (Messenger) ---------- */
.messages-hero{background:none !important;border:0 !important;box-shadow:none !important;padding:0 0 8px !important;display:flex;align-items:center;justify-content:space-between}
.messages-hero .eyebrow,.messages-hero p{display:none}
.messages-hero h1{font-size:28px;font-weight:800;margin:0}
.messages-hero-actions{display:flex;gap:8px;align-items:center}
.messages-hero-actions .btn{border-radius:999px;background:var(--r-soft) !important;color:var(--r-text) !important;border:0 !important;box-shadow:none !important;font-weight:700;padding:9px 14px}
.chat-list{display:flex;flex-direction:column;gap:2px}
.chat-list-row{display:flex;align-items:center;gap:12px;padding:10px 8px !important;border-radius:14px !important;background:none !important;border:0 !important;box-shadow:none !important;cursor:pointer;position:relative}
.chat-list-row:hover{background:var(--r-soft) !important}
.chat-avatar{width:56px !important;height:56px !important;border-radius:50% !important;object-fit:cover;flex:0 0 56px}
.chat-list-name{font-weight:700;font-size:15px;margin:0}
.chat-list-preview{font-size:13px;color:var(--r-mute);margin:2px 0 0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.chat-list-preview.is-unread{color:var(--r-text);font-weight:700}
.chat-list-main{flex:1;min-width:0}
.chat-list-side{display:flex;flex-direction:column;align-items:flex-end;gap:6px;font-size:12px;color:var(--r-mute)}
.chat-unread-dot{width:12px;height:12px;border-radius:50%;background:var(--r-blue)}
.chat-more-btn{background:none;border:0;color:var(--r-mute);font-size:20px;cursor:pointer;opacity:0;transition:.15s}
.chat-list-row:hover .chat-more-btn{opacity:1}
@media (hover:none){.chat-more-btn{opacity:1}}
/* conversation */
.conversation-head{display:flex;align-items:center;gap:10px}
.conversation-avatar{width:40px !important;height:40px !important;flex-basis:40px !important}
.conversation-name{font-weight:800}
.conversation-id{font-size:12px;color:var(--r-mute)}
.msg-thread{display:flex;flex-direction:column;gap:2px;padding:14px 4px;min-height:40vh;max-height:calc(100vh - 290px);overflow-y:auto}
.msg-row{display:flex;align-items:flex-end;gap:8px}
.msg-row.is-me{justify-content:flex-end}
.msg-bubble{max-width:75%;padding:9px 14px;border-radius:20px;font-size:15px;line-height:1.35;word-break:break-word}
.msg-row.is-other .msg-bubble{background:#eef0f4;color:var(--r-text);border-bottom-left-radius:6px}
.msg-row.is-me .msg-bubble{background:var(--r-grad);color:#fff;border-bottom-right-radius:6px}
.msg-meta{font-size:11px;color:var(--r-mute);margin:2px 6px}
.msg-form{display:flex;align-items:flex-end;gap:8px;padding:8px 0}
.msg-input-shell{flex:1;background:var(--r-soft);border-radius:24px;padding:4px 14px}
.msg-input-shell textarea{width:100%;background:none;border:0;outline:0;resize:none;font:15px/1.4 var(--font-body);padding:8px 0}
.msg-send-btn{width:44px;height:44px;border-radius:50%;border:0;background:var(--r-grad);color:#fff;display:grid;place-items:center;cursor:pointer}
.msg-send-btn svg{width:20px;height:20px}

/* ---------- PROFIL (TikTok) ---------- */
.pf{text-align:center}
.pf-banner{display:none !important}
.pf-head{display:flex !important;flex-direction:column;align-items:center;gap:10px;margin-top:10px}
.pf-avatar-wrap{transform:scale(1.25);margin:14px 0 8px}
.pf-name{font-size:20px;font-weight:800;justify-content:center}
.pf-id{color:var(--r-mute);font-size:14px}
.pf-bio{max-width:420px;margin:8px auto;color:var(--r-text)}
.profile-stats-row{display:flex;justify-content:center;gap:0;margin:14px 0}
.profile-stat{padding:0 22px;display:flex;flex-direction:column;align-items:center}
.profile-stat+.profile-stat{border-left:1px solid var(--r-line)}
.profile-stat-value{font-size:19px;font-weight:800}
.profile-stat-label{font-size:12px;color:var(--r-mute)}
.profile-actions-row{display:flex;justify-content:center;gap:8px;margin-bottom:10px}
.profile-actions-row .btn{border-radius:8px;min-width:130px;font-weight:700}
.profile-settings-btn{position:absolute;top:0;right:0;width:40px;height:40px;border-radius:50%;border:0;background:var(--r-soft);font-size:18px;cursor:pointer}
.pf{position:relative}
.profile-tabs{display:flex;border-bottom:1px solid var(--r-line);margin-top:8px}
.profile-tab{flex:1;background:none;border:0;border-bottom:2px solid transparent;padding:13px 0;font-weight:700;color:var(--r-mute);cursor:pointer}
.profile-tab.is-active{color:var(--r-text);border-bottom-color:var(--r-text)}

/* ---------- BOUTIQUE ---------- */
.shop-simple-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:6px}
.shop-simple-head h1{font-size:26px;font-weight:800;margin:0}
.shop-inline-balance{display:inline-flex;gap:6px;align-items:baseline;background:#fff7e0;color:#9a6700;border-radius:999px;padding:7px 14px;font-weight:800}
.shop-section{margin-top:22px}
.shop-section-head h2{font-size:17px;font-weight:800;margin:0 0 12px}
.shop-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px}
.shop-item{display:flex;flex-direction:column;background:#fff;border:1px solid var(--r-line);border-radius:20px;overflow:hidden;transition:transform .15s,box-shadow .15s}
.shop-item:hover{transform:translateY(-3px);box-shadow:0 14px 30px rgba(30,55,90,.1)}
.shop-item-icon{display:grid;place-items:center;min-height:118px;background:linear-gradient(160deg,#f4f7ff,#f3eefe)}
.shop-item-body{padding:10px 12px 0}
.shop-item-label{font-weight:700;font-size:14px;margin:0}
.shop-item-bottom{display:flex;flex-direction:column;gap:8px;padding:8px 12px 12px}
.shop-item-price{display:flex;align-items:center;gap:5px;font-weight:800;font-size:16px;margin:0;color:#b45309}
.shop-item-price span{font-size:12px;font-weight:600;color:var(--r-mute)}
.coin-icon{width:18px;height:18px;object-fit:contain}
.shop-item .btn{width:100%;border-radius:12px;font-weight:800}
.shop-item.is-unaffordable{opacity:.6}
.shop-empty{padding:22px;text-align:center;color:var(--r-mute);background:var(--r-soft);border-radius:16px}

/* ---------- INVENTAIRE + CADEAUX ---------- */
.inv-head,.gift-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:14px}
.inv-head h1,.gift-head h1{font-size:26px;font-weight:800;margin:0}
.inv-back{border:0;background:var(--r-soft);border-radius:999px;padding:9px 14px;font-weight:700;cursor:pointer}
.inv-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px}
.inv-card{background:#fff;border:1px solid var(--r-line);border-radius:20px;padding:12px;display:flex;flex-direction:column;gap:8px;text-align:center}
.inv-card.is-on{border-color:var(--r-blue);box-shadow:0 0 0 2px rgba(37,99,235,.15)}
.inv-prev{display:grid;place-items:center;min-height:90px;border-radius:14px;background:linear-gradient(160deg,#f4f7ff,#f3eefe)}
.inv-card strong{font-size:14px}
.inv-card small{color:var(--r-mute);font-size:12px}
.inv-card .btn{border-radius:12px;font-weight:700}
.inv-empty{text-align:center;padding:40px 16px;color:var(--r-mute);display:flex;flex-direction:column;gap:12px;align-items:center}
.gift-card{background:#fff;border:1px solid var(--r-line);border-radius:22px;padding:18px;display:flex;flex-direction:column;gap:14px}
.gift-card input{width:100%;padding:13px 16px;border:1px solid var(--r-line);border-radius:14px;font:15px var(--font-body);background:var(--r-soft)}
.gift-friends{display:flex;gap:12px;overflow-x:auto;padding-bottom:4px;scrollbar-width:none}
.gift-friend{flex:0 0 auto;display:flex;flex-direction:column;align-items:center;gap:5px;background:none;border:0;cursor:pointer;width:68px;font-size:12px}
.gift-friend .chat-avatar{width:52px !important;height:52px !important;flex-basis:52px !important}
.gift-friend.is-picked .chat-avatar{outline:3px solid var(--r-blue);outline-offset:2px}
.gift-results{display:flex;flex-direction:column;gap:4px}
.gift-amounts{display:flex;gap:8px;flex-wrap:wrap}
.gift-amounts button{flex:1;min-width:58px;padding:11px;border-radius:12px;border:2px solid var(--r-line);background:#fff;font-weight:800;cursor:pointer}
.gift-amounts button.is-on{border-color:var(--r-blue);background:#eef4ff;color:var(--r-blue)}
.gift-send{border:0;border-radius:16px;padding:16px;font:800 16px var(--font-body);color:#fff;background:var(--r-grad);cursor:pointer}
.gift-send:disabled{opacity:.45;cursor:default}
.gift-msg{font-size:14px;text-align:center;min-height:20px}

/* ---------- RÉGLAGES (propre sur PC) ---------- */
.settings-page{display:flex;flex-direction:column;gap:14px;width:100% !important;max-width:640px !important}
.settings-hero{background:none !important;border:0 !important;box-shadow:none !important;padding:0 !important}
.settings-hero-mark,.settings-hero .eyebrow,.settings-hero p{display:none !important}
.settings-hero h1{font-size:26px;font-weight:800;margin:0}
.settings-grid{display:flex !important;flex-direction:column;gap:0;background:#fff;border:1px solid var(--r-line);border-radius:20px;overflow:hidden}
.settings-menu-row{display:flex !important;align-items:center;gap:14px;width:100%;padding:15px 16px !important;background:none !important;border:0 !important;border-bottom:1px solid var(--r-line) !important;border-radius:0 !important;text-align:left;cursor:pointer;box-shadow:none !important;transform:none !important}
.settings-menu-row:last-child{border-bottom:0 !important}
.settings-menu-row:hover{background:var(--r-soft) !important}
.settings-row-icon{width:40px;height:40px;border-radius:12px;display:grid;place-items:center;background:#eef4ff;color:var(--r-blue);flex:0 0 40px}
.settings-row-copy{flex:1;min-width:0;display:flex;flex-direction:column}
.settings-row-copy small{color:var(--r-mute);font-size:12.5px}
.settings-section-label{font-size:12px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--r-mute)}
.settings-danger-card{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:16px;border:1px solid #fecaca;background:#fff5f5;border-radius:20px}
.settings-danger-card>div{display:flex;gap:12px;align-items:center}
.settings-danger-card p{margin:2px 0 0;font-size:12.5px;color:var(--r-mute)}