:root{
--teal:#075E54;--teal2:#128C7E;--green:#25D366;--lt:#ECE5DD;--bubble:#DCF8C6;
--blue:#34B7F1;--ink:#0b141a;--muted:#667781;--line:#e9edef;--orange:#F59E0B;
--orange2:#B45309;--card:#fff;--bg:#efeae2;--danger:#c62828;
--fb-blue:#1877f2;--statut-ring:linear-gradient(45deg,#f09433,#e6683c,#dc2743,#cc2366,#bc1888);
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;height:100%}
body{font-family:'Segoe UI',Roboto,Helvetica,Arial,sans-serif;background:#0f2b28;color:var(--ink);overscroll-behavior-x:none}
.app{max-width:480px;margin:0 auto;min-height:100%;background:var(--bg);
padding-bottom:64px;position:relative;overflow-x:clip}
.hidden{display:none!important}
.muted{color:var(--muted)}
.small{font-size:12px}
.pad{padding:12px}
.center{text-align:center}
.ic{width:1em;height:1em;display:inline-block;vertical-align:-0.15em;
fill:none;stroke:currentColor;color:inherit;flex:0 0 auto}
.ic-lg{width:20px;height:20px}
.ic-xl{width:24px;height:24px}
.ic-fill{fill:currentColor;stroke:none}
/* ============ HEADER ============ */
.bar{position:sticky;top:0;z-index:10;background:var(--teal);color:#fff;
padding:0 12px;display:flex;align-items:center;gap:10px;height:60px}
.bar.orange{background:var(--orange2)}
.bar .bk{font-size:20px;cursor:pointer;display:flex;align-items:center;padding:4px;border-radius:50%;
background:none;border:none;color:#fff}
.bar .bk:active{background:#ffffff22}
.bar .bk .ic{width:24px;height:24px;stroke-width:2.2}
.bar .av{width:36px;height:36px;border-radius:50%;background:#0a463f;color:#cdeee3;
display:flex;align-items:center;justify-content:center;font-weight:700;font-size:14px;flex:0 0 auto;overflow:hidden}
.bar .av img{width:100%;height:100%;object-fit:cover}
.bar .ti{font-size:16px;font-weight:600;line-height:1.15;flex:1;min-width:0}
.bar .ti small{display:block;font-size:11px;font-weight:400;opacity:.85}
.bar .sp{display:flex;gap:4px;align-items:center}
.bar .sp .icon-btn{width:40px;height:40px;border:none;background:none;color:#fff;cursor:pointer;
display:flex;align-items:center;justify-content:center;border-radius:50%;padding:0;flex:0 0 auto;position:relative}
.bar .sp .icon-btn:active{background:#ffffff22}
.bar .sp .icon-btn .ic{width:22px;height:22px;stroke-width:1.9}
.subhead{padding:8px 12px;background:#f6f6f4;color:var(--muted);font-size:12px;border-bottom:1px solid var(--line)}
/* TOP NAV */
.topnav{position:sticky;top:60px;z-index:9;background:var(--teal);overflow:hidden;
box-shadow:0 2px 6px rgba(0,0,0,.08)}
.topnav-tabs{display:flex;background:var(--teal);color:#cfeae1;font-size:12px;font-weight:600}
.topnav-tab{flex:1;text-align:center;padding:10px 0;cursor:pointer;position:relative;
display:flex;flex-direction:column;align-items:center;gap:3px;user-select:none}
.topnav-tab .ic{width:18px;height:18px;stroke-width:1.8}
.topnav-tab.on{color:#fff}
.topnav-tab.on::after{content:'';position:absolute;bottom:0;left:20%;right:20%;
height:3px;background:var(--green);border-radius:3px 3px 0 0}
.topnav-tab.on .ic{stroke-width:2.2}
.swipewrap{position:relative;overflow:hidden;touch-action:pan-y}
.swipetrack{display:flex;width:400%;transition:transform .3s cubic-bezier(.4,0,.2,1)}
.swipepanel{width:25%;flex:0 0 25%}
/* ACCUEIL */
.composer{background:#fff;padding:10px 12px;display:flex;gap:10px;align-items:center;border-bottom:1px solid var(--line)}
.composer .av{width:40px;height:40px;border-radius:50%;background:#25604f;color:#d8f5ea;
display:flex;align-items:center;justify-content:center;font-weight:700;font-size:15px;flex:0 0 auto;overflow:hidden}
.composer .av img{width:100%;height:100%;object-fit:cover}
.composer .fakeinput{flex:1;background:#f0f2f5;color:var(--muted);border-radius:22px;
padding:10px 16px;font-size:14px;cursor:pointer;border:none;text-align:left}
.composer-row{display:flex;gap:4px;padding:8px 12px;background:#fff;border-bottom:8px solid #e4e6eb}
.composer-row button{flex:1;background:none;border:none;display:flex;align-items:center;justify-content:center;
gap:6px;padding:8px;font-size:12px;color:#65676b;font-weight:600;cursor:pointer;border-radius:8px}
.composer-row button:active{background:#f0f2f5}
.composer-row .ic{width:18px;height:18px}
.composer-row .ic-img{color:#45bd62}
.composer-row .ic-live{color:#f02849}
.composer-row .ic-loc{color:#1877f2}
.post{background:#fff;margin-bottom:8px;padding:12px}
.post-head{display:flex;gap:10px;align-items:flex-start;margin-bottom:8px}
.post-head .av{width:40px;height:40px;border-radius:50%;background:#25604f;color:#d8f5ea;
display:flex;align-items:center;justify-content:center;font-weight:700;font-size:15px;flex:0 0 auto;overflow:hidden}
.post-head .av img{width:100%;height:100%;object-fit:cover}
.post-head .nm{font-weight:700;font-size:14px;display:flex;align-items:center;gap:4px}
.post-head .when{font-size:11px;color:var(--muted)}
.post-head .more{margin-left:auto;color:var(--muted);cursor:pointer;padding:4px}
.post-body{font-size:14px;line-height:1.4;margin-bottom:8px;white-space:pre-wrap;word-wrap:break-word}
.post-img{width:100%;border-radius:10px;background:linear-gradient(135deg,#667eea,#764ba2);
max-height:340px;display:flex;align-items:center;justify-content:center;color:#fff;font-size:14px;
font-weight:600;margin-bottom:8px;overflow:hidden}
.post-img img{width:100%;height:100%;object-fit:cover;display:block}
.post-stats{display:flex;justify-content:space-between;font-size:12px;color:var(--muted);
padding:6px 0;border-bottom:1px solid var(--line)}
.post-stats .likes{color:#1877f2;font-weight:600}
.post-actions{display:flex;padding-top:6px}
.post-actions button{flex:1;background:none;border:none;display:flex;align-items:center;
justify-content:center;gap:6px;padding:8px 4px;font-size:13px;font-weight:600;
color:#65676b;cursor:pointer;border-radius:8px}
.post-actions button:active{background:#f0f2f5}
.post-actions button.liked{color:#1877f2}
.post-actions .ic{width:18px;height:18px}
.post-comments{background:#f0f2f5;border-radius:10px;padding:8px 10px;margin-top:8px;font-size:13px}
.post-comment{display:flex;gap:8px;margin-bottom:6px}
.post-comment .av{width:28px;height:28px;border-radius:50%;background:#25604f;color:#d8f5ea;
display:flex;align-items:center;justify-content:center;font-weight:700;font-size:11px;flex:0 0 auto}
.post-comment .bub{background:#fff;border-radius:14px;padding:6px 10px}
.post-comment .bub b{display:block;font-size:12px}
.comment-input{display:flex;gap:8px;margin-top:6px}
.comment-input input{flex:1;border:1px solid #d7dedb;border-radius:20px;padding:8px 14px;font-size:13px}
.newpost-overlay{position:fixed;inset:0;background:#0008;z-index:100;display:flex;align-items:flex-end;justify-content:center}
.newpost{background:#fff;border-radius:16px 16px 0 0;width:100%;max-width:480px;padding:16px;max-height:90vh;overflow:auto}
.newpost h3{margin:0 0 12px;text-align:center;font-size:16px}
.newpost textarea{width:100%;border:none;font-size:15px;resize:none;outline:none;font-family:inherit;min-height:100px}
.newpost .row{display:flex;gap:8px;margin-top:12px}
.newpost .row button{flex:1;padding:10px;border-radius:22px;border:none;font-weight:600;cursor:pointer;font-size:14px}
.newpost .row .cancel{background:#e4e6eb;color:#333}
.newpost .row .ok{background:var(--fb-blue);color:#fff}
.img-preview{position:relative;margin:10px 0;border-radius:10px;overflow:hidden;background:#f0f2f5}
.img-preview img{width:100%;max-height:220px;object-fit:cover;display:block}
.img-preview .rm{position:absolute;top:8px;right:8px;width:30px;height:30px;border-radius:50%;
background:#000c;color:#fff;border:none;cursor:pointer;font-size:16px;display:flex;align-items:center;justify-content:center}
/* ============================================================
* AVATARS — contrainte d'image
* Une photo d'avatar en pleine résolution (ex. 1080×1920) n'a
* aucune dimension dérivée de son conteneur : elle déborde et
* « baigne » en arrière-plan de la vue. On verrouille toute
* image posée dans un conteneur .av (et on la clone à la forme).
* ============================================================ */
.av{overflow:hidden}
.av img{width:100%;height:100%;object-fit:cover;display:block;border-radius:inherit}
/* STATUT — bandeau « Mon statut / Ajouter » collé sous les onglets */
.status-banner{background:var(--teal);padding:11px 12px;display:flex;gap:11px;align-items:center;cursor:pointer}
.status-banner .myav{position:relative;width:48px;height:48px;flex:0 0 auto}
.status-banner .myav .av{width:48px;height:48px;border-radius:50%;background:#0a463f;color:#cdeee3;
display:flex;align-items:center;justify-content:center;font-weight:700;font-size:17px;
border:1px solid rgba(255,255,255,.22)}
.status-banner .myav .plus{position:absolute;right:-3px;bottom:-3px;width:21px;height:21px;
border-radius:50%;background:var(--green);color:#fff;display:flex;align-items:center;justify-content:center;
border:2px solid var(--teal);font-weight:700;font-size:13px;line-height:1}
.status-banner .txt b{display:block;font-size:15px;color:#fff}
.status-banner .txt span{font-size:12px;color:rgba(255,255,255,.72)}
.status-row{background:#fff;padding:10px 12px;display:flex;gap:10px;align-items:center;border-bottom:1px solid var(--line);cursor:pointer}
.status-row .ring{width:52px;height:52px;border-radius:50%;padding:2.5px;background:var(--statut-ring);flex:0 0 auto;position:relative}
.status-row.seen .ring{background:#c7d0cc}
.status-row .ring .in{width:100%;height:100%;border-radius:50%;overflow:hidden;background:#25604f;color:#fff;
display:flex;align-items:center;justify-content:center;font-weight:700;font-size:16px;border:2px solid #fff}
.status-row .ring .in img{width:100%;height:100%;object-fit:cover;display:block}
.status-row .ring .type{position:absolute;right:-4px;bottom:-4px;width:18px;height:18px;border-radius:50%;
background:#000;color:#fff;display:flex;align-items:center;justify-content:center;border:2px solid #fff;font-size:10px}
.status-row .ring .count{position:absolute;top:-2px;right:-2px;background:var(--green);color:#fff;
font-size:10px;font-weight:700;padding:1px 5px;border-radius:10px;border:2px solid #fff}
/* Pastille « vu par moi » en bas à gauche de l'anneau (statuts consultés) */
.status-row .ring .seenby{position:absolute;left:-3px;bottom:-3px;width:19px;height:19px;border-radius:50%;
background:#1f2b28;color:#fff;border:2px solid #fff;overflow:hidden;display:flex;align-items:center;
justify-content:center;font-size:8px;font-weight:700;line-height:1}
.status-row .ring .seenby img{width:100%;height:100%;object-fit:cover;display:block}
.status-row .txt{flex:1}
.status-row .txt b{font-size:14px;display:block}
.status-row .txt span{font-size:12px;color:var(--muted)}
/* Story viewer */
.story-viewer{position:fixed;inset:0;background:#000;z-index:200;display:flex;flex-direction:column}
.story-progress{display:flex;gap:3px;padding:12px 10px 4px;position:relative;z-index:3}
.story-progress span{flex:1;height:3px;background:#ffffff40;border-radius:2px;overflow:hidden}
.story-progress span i{display:block;height:100%;background:#fff;width:0}
.story-progress span.done i{width:100%!important;transition:none}
.story-head{display:flex;gap:10px;align-items:center;padding:8px 12px;color:#fff;position:relative;z-index:2}
.story-head .av{width:36px;height:36px;border-radius:50%;background:#25604f;display:flex;
align-items:center;justify-content:center;font-weight:700;overflow:hidden;color:#fff}
.story-head .av img{width:100%;height:100%;object-fit:cover}
.story-head b{font-size:14px}
.story-head small{display:block;font-size:11px;opacity:.8}
.story-head .close{margin-left:auto;font-size:26px;cursor:pointer;background:none;border:none;color:#fff;padding:4px}
.story-body{flex:1;position:relative;display:flex;align-items:center;justify-content:center;overflow:hidden}
.story-body img.media{max-width:100%;max-height:100%;object-fit:contain;display:block}
.story-body video.media{max-width:100%;max-height:100%;object-fit:contain;display:block;background:#000}
.story-body .text-slide{color:#fff;font-size:22px;text-align:center;padding:24px;
background:linear-gradient(135deg,#128C7E,#075E54);width:100%;height:100%;
display:flex;align-items:center;justify-content:center;white-space:pre-wrap}
.story-mute{position:absolute;bottom:16px;right:16px;background:#000a;color:#fff;border:none;
border-radius:20px;padding:8px 12px;font-size:12px;cursor:pointer;z-index:2;display:flex;align-items:center;gap:6px}
.story-reply-bar{padding:12px;display:flex;gap:8px;align-items:center;background:#000;position:relative;z-index:2;
border-top:1px solid #ffffff20}
.story-reply-bar input{flex:1;background:#ffffff20;border:none;color:#fff;border-radius:22px;padding:10px 16px;outline:none}
.story-reply-bar input::placeholder{color:#ffffffaa}
.story-reply-bar .sendbtn{width:42px;height:42px;border:none;border-radius:50%;background:var(--green);color:#fff;cursor:pointer;
display:flex;align-items:center;justify-content:center}
.story-nav{position:absolute;top:0;bottom:0;width:30%;cursor:pointer;z-index:1}
.story-nav.left{left:0}.story-nav.right{right:0}
/* Nouveau statut */
.newstory-overlay{position:fixed;inset:0;background:#000d;z-index:150;display:flex;flex-direction:column}
.newstory{background:#fff;flex:1;display:flex;flex-direction:column;max-width:480px;margin:0 auto;width:100%;overflow:hidden}
.newstory .head{padding:12px;display:flex;align-items:center;gap:10px;border-bottom:1px solid var(--line)}
.newstory .head b{flex:1;text-align:center;font-size:16px}
.newstory .head button{background:none;border:none;font-size:14px;cursor:pointer;color:var(--teal);font-weight:600;padding:6px}
.newstory .content{flex:1;display:flex;align-items:center;justify-content:center;background:#f0f2f5;
padding:16px;overflow:auto;position:relative;min-height:200px}
.newstory .content img.preview,.newstory .content video.preview{max-width:100%;max-height:100%;border-radius:10px;object-fit:contain}
.newstory .content textarea{width:100%;border:none;font-size:18px;text-align:center;resize:none;outline:none;
background:transparent;font-family:inherit;min-height:120px}
.newstory .tools{padding:12px;display:flex;gap:8px;border-top:1px solid var(--line);background:#fff}
.newstory .tools button{flex:1;border:1px solid var(--line);background:#fff;padding:12px;border-radius:10px;
cursor:pointer;font-size:12px;font-weight:600;display:flex;flex-direction:column;align-items:center;gap:4px;color:#333}
.newstory .tools button:active{background:#f0f2f5}
.newstory .tools .ic{width:22px;height:22px;color:var(--teal)}
/* Caméra */
.camera-overlay{position:fixed;inset:0;background:#000;z-index:250;display:flex;flex-direction:column}
.camera-view{flex:1;position:relative;display:flex;align-items:center;justify-content:center;overflow:hidden}
.camera-view video{width:100%;height:100%;object-fit:cover;display:block;background:#000}
.camera-view img.preview-shot{max-width:100%;max-height:100%;object-fit:contain;display:block}
.camera-controls{padding:16px;display:flex;justify-content:space-around;align-items:center;background:#000}
.camera-controls button{background:#ffffff22;color:#fff;border:none;border-radius:50%;cursor:pointer;
display:flex;align-items:center;justify-content:center;width:52px;height:52px}
.camera-controls button .ic{width:24px;height:24px}
.camera-controls .shutter{width:74px;height:74px;background:#fff;border:5px solid #ffffff66;border-radius:50%}
.camera-controls .shutter.rec{background:#f02849;border-color:#ffffff88;animation:pulseRec 1.2s infinite}
@keyframes pulseRec{50%{opacity:.7}}
.camera-controls .confirm{background:var(--green)}
.camera-controls .cancel{background:#ffffff22}
.camera-timer{position:absolute;top:16px;left:50%;transform:translateX(-50%);
background:#000c;color:#fff;padding:6px 14px;border-radius:20px;font-size:13px;font-weight:700;display:none;z-index:3}
.camera-timer.on{display:block}
.camera-flash{position:absolute;inset:0;background:#fff;opacity:0;pointer-events:none;transition:opacity .15s}
.camera-flash.on{opacity:1}
/* Paramètres */
.settings-panel{position:fixed;inset:0;background:#0009;z-index:180;display:flex;justify-content:flex-end}
.settings-sheet{background:#fff;width:100%;max-width:420px;display:flex;flex-direction:column;
animation:slideIn .25s cubic-bezier(.4,0,.2,1);overflow-y:auto}
@keyframes slideIn{from{transform:translateX(100%)}to{transform:translateX(0)}}
.settings-head{background:var(--teal);color:#fff;padding:18px 16px;display:flex;align-items:center;gap:12px}
.settings-head .av{width:52px;height:52px;border-radius:50%;background:#0a463f;color:#cdeee3;
display:flex;align-items:center;justify-content:center;font-weight:700;font-size:20px;overflow:hidden}
.settings-head .av img{width:100%;height:100%;object-fit:cover}
.settings-head b{font-size:16px}
.settings-head small{display:block;font-size:12px;opacity:.85}
.settings-head .close{margin-left:auto;background:none;border:none;color:#fff;font-size:22px;cursor:pointer;padding:6px}
.settings-group{padding:10px 12px 4px;color:var(--teal);font-size:12px;font-weight:700;text-transform:uppercase}
.settings-row{display:flex;gap:12px;align-items:center;padding:14px 16px;background:#fff;
border-bottom:1px solid var(--line);cursor:pointer;border:none;width:100%;text-align:left;font-family:inherit}
.settings-row:active{background:#f0f2f5}
.settings-row .ico{width:36px;height:36px;border-radius:50%;background:#eef6f2;color:var(--teal);
display:flex;align-items:center;justify-content:center;flex:0 0 auto}
.settings-row .ico .ic{width:20px;height:20px}
.settings-row .txt{flex:1;min-width:0}
.settings-row .txt b{font-size:14px;display:block;color:var(--ink);font-weight:600}
.settings-row .txt span{font-size:12px;color:var(--muted);display:block}
.settings-row .arrow{color:var(--muted)}
.settings-row.danger .ico{background:#fdecec;color:var(--danger)}
.settings-row.danger .txt b{color:var(--danger)}
/* Lot P — écran Administration (#/admin) : liste des modules.
* Réutilise .settings-row/.sw (même grammaire que le panneau
* Paramètres) et n'ajoute que l'état textuel + la note de portée. */
.adm-note{padding:12px 16px;background:#fff;border-bottom:1px solid var(--line);
font-size:13px;color:var(--muted);line-height:1.45}
.settings-row .txt span.st{font-weight:700;color:var(--green);margin-top:3px}
.settings-row .txt span.st.off{color:var(--muted);font-weight:600}
.settings-row .sw[aria-busy="true"]{opacity:.55;pointer-events:none}
/* Notifications */
.toast-banner{position:fixed;top:10px;left:50%;transform:translateX(-50%) translateY(-120%);
background:#fff;color:#111;border-radius:14px;padding:12px 14px;box-shadow:0 6px 24px rgba(0,0,0,.25);
display:flex;gap:10px;align-items:center;z-index:300;max-width:420px;width:calc(100% - 24px);
transition:transform .3s cubic-bezier(.4,0,.2,1);cursor:pointer;border:1px solid #e0e0e0}
.toast-banner.show{transform:translateX(-50%) translateY(0)}
.toast-banner .av{width:36px;height:36px;border-radius:50%;background:#25604f;color:#fff;
display:flex;align-items:center;justify-content:center;font-weight:700;font-size:13px;flex:0 0 auto;overflow:hidden}
.toast-banner .info{flex:1;min-width:0}
.toast-banner .info b{font-size:13px;display:flex;align-items:center;gap:4px}
.toast-banner .info span{font-size:12px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:block}
.toast-banner .time{font-size:10px;color:var(--muted)}
.toast-banner .close{background:none;border:none;color:#999;font-size:18px;cursor:pointer;padding:4px}
/* Tabbar */
.tabbar{position:fixed;bottom:0;left:0;right:0;max-width:480px;margin:0 auto;height:64px;
background:#fff;border-top:1px solid var(--line);display:flex;z-index:20}
.tabbar .tab{flex:1;border:none;background:none;display:flex;flex-direction:column;align-items:center;
justify-content:center;gap:3px;font-size:10px;color:var(--muted);cursor:pointer;padding:0;position:relative}
.tabbar .tab .ic{width:22px;height:22px;stroke-width:1.8}
.tabbar .tab.on{color:var(--teal)}
.tabbar .tab.on .ic{stroke-width:2.2}
.tabbar .tab .badge{position:absolute;top:6px;left:calc(50% + 4px);background:#f02849;color:#fff;
font-size:9px;font-weight:700;padding:1px 5px;border-radius:10px;min-width:16px;text-align:center;display:none}
.tabbar .tab .badge.on{display:block}
/* Listes */
.list{background:#fff}
.listrow{display:flex;align-items:center;gap:10px;padding:11px 12px;width:100%;
background:#fff;border:none;border-bottom:1px solid var(--line);text-align:left;cursor:pointer;font-family:inherit}
.listrow .av{width:44px;height:44px;border-radius:50%;background:#25604f;color:#d8f5ea;
display:flex;align-items:center;justify-content:center;font-weight:700;font-size:16px;flex:0 0 auto;overflow:hidden}
.listrow .av.sq{border-radius:12px}
.listrow .av img{width:100%;height:100%;object-fit:cover}
.listrow .gr{flex:1;min-width:0}
.row1{display:flex;justify-content:space-between;align-items:center;font-size:15px;font-weight:600}
.row2{font-size:13px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.vbadge{display:inline-flex;align-items:center;color:var(--blue);margin-left:4px;vertical-align:middle}
.vbadge .ic{width:14px;height:14px;fill:currentColor;stroke:none}
.group-hero{background:linear-gradient(135deg,var(--teal2),var(--teal));color:#fff;padding:16px;margin:0}
.group-hero h2{margin:0 0 4px;font-size:18px}
.group-hero .stats{display:flex;gap:16px;margin-top:10px}
.group-hero .stats div{flex:1}
.group-hero .stats b{display:block;font-size:20px}
.group-hero .stats span{font-size:11px;opacity:.85}
.grp-new{margin:12px;background:#fff;border-radius:12px;padding:14px;display:flex;gap:10px;
align-items:center;cursor:pointer;box-shadow:0 1px 3px rgba(0,0,0,.06)}
.grp-new .plusbtn{width:44px;height:44px;border-radius:50%;background:var(--green);color:#fff;
display:flex;align-items:center;justify-content:center;flex:0 0 auto}
.grp-new b{font-size:14px}
.grp-new span{font-size:12px;color:var(--muted)}
.grp-section{padding:8px 16px;color:var(--muted);font-size:12px;font-weight:600;
background:#f6f6f4;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
/* Chat */
.e2e{background:#d1f4cc;color:#3b6b34;font-size:11px;text-align:center;padding:6px 10px;margin:8px auto;
border-radius:8px;max-width:90%}
.thread{padding:12px;display:flex;flex-direction:column;gap:8px;min-height:calc(100vh - 190px)}
.bubble{max-width:80%;padding:7px 10px;border-radius:9px;font-size:14px;line-height:1.35;
box-shadow:0 1px 1px rgba(0,0,0,.08);word-wrap:break-word}
.bubble.mine{align-self:flex-end;background:var(--bubble)}
.bubble:not(.mine){align-self:flex-start;background:#fff}
.bubble .ack{font-size:10px;color:var(--muted);margin-left:4px;vertical-align:middle;display:inline-flex}
/* Double coche BLEUE = lu réellement (voir ackHTML dans chat.js) */
.bubble .ack.lu{color:var(--blue)}
.bubble .ack .ic{width:14px;height:14px;stroke-width:2.4}
.sys{align-self:center;background:#eef6f2;color:#5b7a52;font-size:11px;padding:4px 10px;border-radius:8px}
.voice{align-self:flex-end;background:var(--bubble);border-radius:9px;padding:8px 10px;
display:flex;align-items:center;gap:8px;width:72%}
.voice .wave{flex:1;height:20px;border-radius:4px;
background:repeating-linear-gradient(90deg,#8fcf7f 0 2px,transparent 2px 5px);opacity:.85}
.voice .ic{width:16px;height:16px;fill:currentColor;stroke:none}
.inbar{position:fixed;bottom:64px;left:0;right:0;max-width:480px;margin:0 auto;
display:flex;align-items:center;gap:8px;padding:8px;background:var(--bg);z-index:11}
.inbar input{flex:1;background:#fff;border:none;border-radius:20px;padding:10px 14px;font-size:14px;outline:none}
.sendbtn{width:42px;height:42px;border:none;border-radius:50%;background:var(--green);color:#fff;font-size:18px;cursor:pointer;
display:flex;align-items:center;justify-content:center}
.sendbtn .ic{width:20px;height:20px;fill:currentColor;stroke:none}
/* Photos / vidéos de la bulle : la largeur est limitée par la BULLE
(80 % de l'écran) et non par un plafond arbitraire. L'ancien
max-width:200px rendait les photos illisibles (lot N). */
.bubble .chatimg{max-width:100%;border-radius:10px;display:block}
.bubble .attn{display:inline-flex;align-items:center;gap:4px;color:var(--teal);text-decoration:none;font-weight:600}
.bubble .attn .ic{width:16px;height:16px}
.bubble .cvoice{max-width:220px;height:38px}
.pollmsg{cursor:pointer;display:flex;align-items:center;gap:6px}
.pollmsg .ic{width:18px;height:18px;color:var(--teal2)}
.attbtn{width:38px;height:38px;flex:0 0 auto;border:none;border-radius:50%;background:#e6e6e6;
color:#333;font-size:24px;line-height:1;cursor:pointer;margin-right:6px;
display:flex;align-items:center;justify-content:center}
.attbtn .ic{width:20px;height:20px;stroke-width:2.2;transform:rotate(45deg)}
.attsheet{position:fixed;left:50%;transform:translateX(-50%);bottom:70px;z-index:55;
background:#fff;border-radius:14px;box-shadow:0 6px 24px rgba(0,0,0,.22);padding:8px;
display:grid;grid-template-columns:repeat(3,1fr);gap:6px;width:min(88%,320px)}
.attsheet.hidden{display:none}
.attsheet button{border:none;background:#f4f4f4;border-radius:12px;padding:10px 4px;font-size:12px;
display:flex;flex-direction:column;align-items:center;gap:4px;cursor:pointer;color:#222;font-family:inherit}
.attsheet button .ic{width:22px;height:22px;color:var(--teal)}
/* ===== Lot S — mini-profil + date/heure sur CHAQUE bulle (chat.js metaHTML) =====
* Ligne cliquable au-dessus de chaque message : avatar miniature,
* nom (en groupe) et heure — un tap ouvre la fiche de l'expéditeur. */
.bmeta{display:flex;align-items:center;gap:6px;font-size:11px;color:var(--muted);
margin:0 0 3px;cursor:pointer;-webkit-tap-highlight-color:transparent}
.bmeta .av{width:22px;height:22px;min-width:22px;font-size:9px;font-weight:700;
border-radius:50%;overflow:hidden}
.bmeta .av img{width:100%;height:100%;object-fit:cover}
.bmeta .bnom{font-weight:600;color:var(--teal2);white-space:nowrap;overflow:hidden;
text-overflow:ellipsis;max-width:46vw}
.bmeta .bdate{margin-left:auto;font-size:10px;white-space:nowrap;color:var(--muted)}
/* ===== Lot S — compteur de durée du message vocal (chat.js) ===== */
.recsec{font-size:12px;font-weight:700;color:var(--muted);margin-left:4px;
font-variant-numeric:tabular-nums}
/* ===== Lot S — fenêtre de recadrage (js/cropper.js, sans dépendance) =====
* La fenêtre a exactement la forme du résultat : ce que l'on voit
* est ce qui sera enregistré (1:1 carré ou 3:1 bandeau). */
.cropback{position:fixed;top:0;right:0;bottom:0;left:0;background:rgba(0,0,0,.62);
z-index:210;display:flex;align-items:center;justify-content:center;padding:16px}
.cropcard{background:#fff;border-radius:14px;padding:14px;width:min(94vw,460px);
box-shadow:0 12px 34px rgba(0,0,0,.35)}
.croptitle{font-weight:700;font-size:15px;margin-bottom:10px}
.cropview{margin:0 auto;overflow:hidden;border-radius:10px;position:relative;
touch-action:none;background:#101314;cursor:grab;box-shadow:0 0 0 2px #fff,
0 0 0 4px var(--teal)}
.cropview:active{cursor:grabbing}
.cropimg{position:absolute;top:0;left:0;transform-origin:0 0;
-webkit-user-drag:none;user-select:none;-webkit-user-select:none;pointer-events:none;
max-width:none}
.cropzoom{display:flex;align-items:center;gap:8px;margin:12px 0 4px;color:var(--muted)}
.cropzoom .ic{width:18px;height:18px;min-width:18px;stroke-width:1.8}
.cropzoom input[type=range]{flex:1}
.cropbtns{display:flex;gap:8px;margin-top:10px}
.cropbtns .btn{flex:1}
@media (min-width:560px){.cropcard{padding:18px}}
/* Boutique */
.shop-card{background:#fff;margin:0 0 8px;padding:12px;display:flex;gap:12px;align-items:center;cursor:pointer}
.shop-card .img{width:64px;height:64px;border-radius:10px;background:linear-gradient(135deg,#25D366,#128C7E);
display:flex;align-items:center;justify-content:center;color:#fff;font-size:26px;flex:0 0 auto}
.shop-card .info{flex:1}
.shop-card .info b{display:block;font-size:15px}
.shop-card .info span{font-size:12px;color:var(--muted)}
.prod-row{display:flex;gap:12px;align-items:center;padding:10px 12px;border-bottom:1px solid var(--line);background:#fff}
.prod-row .img{width:52px;height:52px;border-radius:10px;background:#eef6f2;color:var(--teal);
display:flex;align-items:center;justify-content:center;flex:0 0 auto}
.prod-row .info{flex:1}
.prod-row .info b{display:block;font-size:14px}
.prod-row .info span{font-size:12px;color:var(--muted)}
.prod-row .price{font-weight:700;color:var(--teal);font-size:14px;text-align:right}
.prod-row .price .btn{margin-top:6px;padding:6px 12px;font-size:12px}
/* Cards */
.card{background:#fff;border-radius:12px;padding:12px;margin:12px;box-shadow:0 1px 3px rgba(0,0,0,.08)}
.card.tight{margin:12px 12px 0}
.card h4{margin:0 0 4px;font-size:15px}
.flex{display:flex;align-items:center;gap:8px}
.between{display:flex;justify-content:space-between;align-items:center}
.chip{display:inline-block;font-size:11px;padding:3px 9px;border-radius:999px;background:#eef6f2;color:#2b6a55;margin:2px 4px 0 0}
.chip.warn{background:#fff4e0;color:#9a6b12}
.prog{height:9px;background:#e6eae8;border-radius:6px;overflow:hidden;margin:8px 0 4px}
.prog i{display:block;height:100%;background:var(--green)}
.prog.or i{background:var(--orange)}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;
width:100%;text-align:center;background:var(--green);color:#fff;border:none;
border-radius:24px;padding:12px;font-size:14px;font-weight:600;cursor:pointer;margin-top:10px;font-family:inherit}
.btn .ic{width:18px;height:18px}
.btn.sm{width:auto;padding:8px 14px;font-size:13px;margin:0}
.btn.tealb{background:var(--teal2)}
.btn.orange{background:var(--orange)}
.btn.ghost{background:#fff;color:var(--teal);border:1px solid var(--teal2)}
.btn.danger{background:var(--danger)}
.link{background:none;border:none;color:var(--teal2);font-size:14px;cursor:pointer;margin-top:12px;width:100%}
label{font-size:12px;color:var(--muted);display:block;margin-top:10px}
input,textarea,select{width:100%;border:1px solid #d7dedb;border-radius:10px;padding:10px;
font-size:14px;margin-top:4px;font-family:inherit;background:#fff}
.splash{min-height:100vh;padding:26px 20px;background:linear-gradient(160deg,var(--teal),var(--teal2));color:#fff}
.splash.form{background:#fff;color:var(--ink)}
.splash .logo{font-size:32px;font-weight:800;letter-spacing:2px;text-align:center;margin-top:10px}
/* Logo officiel : conservé en largeur (format 900×453), centré, sans déformation */
.splash .logo img{display:block;width:82%;max-width:320px;height:auto;margin:0 auto}
.splash.form .logo img{width:58%;max-width:230px}
.splash.form .logo{color:var(--teal)}
.splash .tag{text-align:center;opacity:.9;font-size:13px;margin:4px 0 20px}
/* Accroche de la page de langue : centrée au milieu, blanche, sans fond */
.splash .tagline{display:block;text-align:center;background:none;color:#fff;padding:0;
font-size:15px;font-weight:600;letter-spacing:.2px;text-transform:none;margin:8px auto 24px;max-width:340px}
.langlist{margin:10px 0}
.langrow{display:flex;align-items:center;gap:10px;width:100%;background:#ffffffee;color:var(--ink);
border:none;border-radius:10px;padding:12px;margin-bottom:8px;cursor:pointer;text-align:left;font-family:inherit}
.langrow.on{outline:2px solid var(--green)}
.langrow .fl{font-size:22px}.langrow .lname{font-weight:600;flex:1}.langrow .lsub{font-size:12px;color:var(--muted)}
.voucher{background:linear-gradient(135deg,#0d5c50,#128C7E);color:#fff;border-radius:16px;padding:16px;text-align:center;margin:12px}
.voucher .amt{font-size:34px;font-weight:800;letter-spacing:1px}
.voucher .lbl{font-size:12px;opacity:.9}
.qr{width:140px;height:140px;margin:10px auto;border:6px solid #fff;border-radius:8px;background:
linear-gradient(#000,#000) 0 0/100% 12px no-repeat,linear-gradient(#000,#000) 0 100%/100% 12px no-repeat,
linear-gradient(#000,#000) 0 0/12px 100% no-repeat,linear-gradient(#000,#000) 100% 0/12px 100% no-repeat,
conic-gradient(#000 25%,#fff 0 50%,#000 0 75%,#fff 0) 0 0/22px 22px}
.offline{background:#fff4e0;color:#8a5a12;font-size:12px;padding:9px 12px;display:flex;gap:8px;align-items:center}
.offline .ic{width:16px;height:16px;flex:0 0 auto}
.toggle{display:flex;justify-content:space-between;align-items:center;background:#fff;border-radius:10px;padding:11px 12px;margin:8px 12px}
.sw{width:42px;height:24px;background:#c7d0cc;border-radius:20px;position:relative;flex:0 0 auto;cursor:pointer}
.sw.on{background:var(--green)}
.sw::after{content:'';position:absolute;left:2px;top:2px;width:20px;height:20px;background:#fff;border-radius:50%;transition:.15s}
.sw.on::after{left:20px}
.profhead{display:flex;gap:12px;align-items:center;padding:16px 12px;background:#fff;border-bottom:1px solid var(--line)}
.profhead .av{width:56px;height:56px;border-radius:50%;background:#25604f;color:#d8f5ea;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:20px;overflow:hidden}
.profhead .av img{width:100%;height:100%;object-fit:cover}
.pname{font-size:18px;font-weight:700}
.setrow{display:flex;justify-content:space-between;align-items:center;gap:8px;padding:14px 12px;background:#fff;border-bottom:1px solid var(--line)}
.qrbar{display:flex;gap:6px;overflow-x:auto;padding:6px 10px;background:#f6f6f6;border-top:1px solid var(--line)}
.qrchip{flex:0 0 auto;border:1px solid var(--teal);color:var(--teal);background:#fff;border-radius:16px;
padding:4px 10px;font-size:12px;cursor:pointer;white-space:nowrap}
.toast{position:fixed;bottom:80px;left:50%;transform:translateX(-50%);background:#111a;color:#fff;
padding:10px 16px;border-radius:20px;font-size:13px;z-index:60;max-width:80%;text-align:center}
.avicon{display:flex;align-items:center;justify-content:center;background:#075E54;color:#fff}
.avicon .ic{width:22px;height:22px}
/* Rangée de sous-onglets : ENROBÉE (flex-wrap) et centrée.
* 6 onglets (boutique) ou 6 (découvertes) ne tiennent jamais en 360-480 px :
* avec un défilement horizontal masqué, le dernier (« Gestion Pro » /
* « Favoris ») restait coupé en deux sans indice de glissement. On préfère
* 2 lignes courtes — tout est visible d'emblée — et on garde overflow-x en
* sécurité pour les très petits écrans. */
.subtabs{display:flex;flex-wrap:wrap;justify-content:center;overflow-x:auto;background:var(--teal);position:sticky;top:60px;z-index:9;box-shadow:0 2px 6px rgba(0,0,0,.08);scrollbar-width:none}
.subtabs.orange{background:var(--orange2)}
.subtabs::-webkit-scrollbar{display:none}
.subtab{flex:0 0 auto;padding:12px 10px;color:#cfeae1;font-size:13px;font-weight:600;cursor:pointer;position:relative;white-space:nowrap;border:none;background:none;font-family:inherit}
.subtab.on{color:#fff}
.subtab.on::after{content:'';position:absolute;bottom:0;left:10px;right:10px;height:3px;background:var(--green);border-radius:3px 3px 0 0}
.qrchip.on{background:var(--teal);color:#fff}
.optrow{display:flex;gap:6px;margin-top:6px}
.optbtn{flex:1;border:1px solid #d7dedb;background:#fff;border-radius:10px;padding:10px 6px;font-size:12px;font-weight:600;cursor:pointer;font-family:inherit;color:var(--ink)}
/* Moyen de paiement non branché (clés opérateur absentes) : gris et mort */
.optbtn:disabled{opacity:.55;cursor:not-allowed}
.optbtn .soon{display:inline-block;margin-left:4px;padding:1px 6px;border-radius:8px;background:#eef1f0;color:#6b7a75;font-size:10px;font-weight:700;vertical-align:1px}
.optbtn.on{border-color:var(--teal2);background:#eef6f2;color:var(--teal)}
.qty{display:flex;align-items:center;gap:14px;justify-content:center;margin-top:8px}
.qty button{width:36px;height:36px;border-radius:50%;border:1px solid #d7dedb;background:#fff;font-size:20px;cursor:pointer}
.qty b{font-size:18px;min-width:30px;text-align:center}
.tag{display:inline-block;font-size:10px;font-weight:700;padding:2px 7px;border-radius:999px;background:#fdecec;color:var(--danger);margin-left:6px;text-transform:uppercase}
.tag.ok{background:#e3f7ea;color:#1d7a3f}.tag.wait{background:#fff4e0;color:#9a6b12}.tag.sp{background:#e8eefc;color:#2a4fb5}
.mapbox{background:#dfe9e3;border-radius:12px;margin:12px;overflow:hidden}
.kv{display:flex;justify-content:space-between;gap:10px;font-size:13px;padding:5px 0;border-bottom:1px solid var(--line)}
.stockline{display:flex;gap:4px;flex-wrap:wrap;margin-top:4px}
.sndr{font-size:11px;font-weight:700;color:var(--teal2)}
.tabbar .tab span{white-space:nowrap}
/* ---- Lecteur vidéo immersif : hauteur pleine + bouton play centré ---- */
.vidwrap{position:relative;width:100%;background:#000;border-radius:10px;overflow:hidden;line-height:0}
.vidwrap video{width:100%;max-height:100vh;object-fit:contain;display:block;background:#000}
.playbtn{position:absolute;inset:0;margin:auto;width:76px;height:76px;padding:0;border-radius:50%;
background:rgba(0,0,0,.5);border:2px solid rgba(255,255,255,.85);color:#fff;cursor:pointer;
display:flex;align-items:center;justify-content:center;transition:opacity .15s ease,transform .1s ease}
.playbtn .ic{width:34px;height:34px;margin-left:5px}
.playbtn:active{transform:scale(.92)}
.playbtn.hide{opacity:0;pointer-events:none}
/* ---- Discussions (liste) + fil de discussion ---- */
/* Ligne « Nouvelle discussion » (réutilise le style .grp-new du modèle) */
.grp-new{cursor:pointer}
/* Barre d'enregistrement vocal (remplace la saisie pendant l'enregistrement) */
.recbar{position:fixed;bottom:64px;left:0;right:0;max-width:480px;margin:0 auto;
display:flex;align-items:center;gap:10px;padding:10px 12px;background:var(--bg);z-index:11}
.recbar .dot{width:12px;height:12px;border-radius:50%;background:#f02849;flex:0 0 auto;
animation:pulseRec 1.2s infinite}
.recbar .lbl{flex:1;font-size:13px;color:var(--muted)}
/* Écran de discussion : pas d'onglets en bas → la saisie est collée au bas */
body.no-tabs .inbar,
body.no-tabs .recbar{bottom:0;padding-bottom:calc(8px + env(safe-area-inset-bottom,0px))}
body.no-tabs .attsheet{bottom:calc(74px + env(safe-area-inset-bottom,0px))}
/* Pastille « non lus » des conversations */
.listrow .unread{background:var(--green);color:#fff;font-weight:700;min-width:22px;height:22px;
border-radius:999px;display:inline-flex;align-items:center;justify-content:center;
font-size:11px;padding:0 6px;flex:0 0 auto}
/* ---- Amis (écran #/friends) ---- */
/* Contrôle segmenté : Amis / Demandes / Envoyées */
.seg{display:flex;gap:6px;padding:8px 12px;background:#fff;border-bottom:1px solid var(--line)}
.seg button{flex:1;padding:8px 4px;border-radius:8px;border:1px solid var(--line);background:#fff;
color:var(--muted);font:600 13px/1.2 inherit;cursor:pointer;display:flex;align-items:center;
justify-content:center;gap:4px;font-family:inherit}
.seg button.on{background:var(--teal);border-color:var(--teal);color:#fff}
.seg .n{font-size:11px;background:var(--green);color:#fff;border-radius:999px;padding:0 5px;
min-width:16px;display:inline-flex;align-items:center;justify-content:center}
.seg .n.zero{background:var(--line);color:var(--muted)}
/* Actions de ligne (Accepter / Refuser / Annuler / Discuter…) */
.rowacts{display:flex;gap:6px;flex:0 0 auto;align-items:center}
.rowacts .btn.sm{padding:7px 10px;font-size:12px}
/* Feuille d'actions (Retirer / Bloquer) + voile */
.sheetback{position:fixed;inset:0;background:rgba(0,0,0,.35);z-index:59}
.actionsheet{position:fixed;left:0;right:0;bottom:0;max-width:480px;margin:0 auto;background:#fff;
border-radius:14px 14px 0 0;box-shadow:0 -4px 16px rgba(0,0,0,.18);z-index:60;padding:10px 0 16px}
.actionsheet .head{font-size:13px;color:var(--muted);text-align:center;padding:4px 12px 10px}
/* Lot L — variante « grande » : titre gras centré des feuilles de paiement */
.actionsheet .head.big{font-size:17px;font-weight:800;color:var(--ink);padding:8px 14px 2px}
.actionsheet button{display:block;width:100%;padding:13px 16px;border:none;background:#fff;
font:600 14px inherit;border-top:1px solid var(--line);cursor:pointer;text-align:left;font-family:inherit}
.actionsheet button.danger{color:var(--danger)}
/* Lot G6 — Profil & Paramètres */
/* Feuille d'actions affichée AU-DESSUS du panneau Paramètres */
#prf-sheetback{z-index:199}
#prf-sheet{z-index:200}
/* Les .btn conservent leur style malgré .actionsheet button (fond blanc) */
.actionsheet .btn{background:var(--green);color:#fff}
.actionsheet .btn.ghost{background:#fff;color:var(--teal);border:1px solid var(--teal2)}
.actionsheet .btn.danger{background:var(--danger);color:#fff}
/* ---- Groupes (panneau, fiche, membres, création) ---- */
/* Avatar carré translucide dans le héros du groupe */
.group-hero .av{width:52px;height:52px;border-radius:14px;background:rgba(255,255,255,.22);
color:#fff;display:flex;align-items:center;justify-content:center;font-weight:700;
font-size:18px;flex:0 0 auto;overflow:hidden}
.group-hero .av img{width:100%;height:100%;object-fit:cover}
/* Chaînes du groupe + options de création : chips horizontales */
.gchips{display:flex;gap:8px;padding:10px 12px;overflow-x:auto;align-items:center}
.gchips button{flex:0 0 auto;padding:8px 14px;border-radius:999px;border:1px solid var(--line);
background:#fff;color:var(--teal);font:600 13px/1.2 inherit;cursor:pointer;font-family:inherit;
display:inline-flex;align-items:center;gap:5px;white-space:nowrap}
.gchips button.on{background:var(--teal);border-color:var(--teal);color:#fff}
.gchips button .ic{width:14px;height:14px}
/* Formulaires embarqués dans la feuille d'actions */
#gp-sheet-body input{margin-bottom:4px}
#gp-sheet-body .btn{width:100%;margin-top:6px}
/* ============ PWA (Étape 6) ============ */
/* Barre « hors ligne » — au-dessus de la navigation basse */
.offline-bar{position:fixed;left:0;right:0;bottom:64px;z-index:300;background:var(--orange2);color:#fff;
text-align:center;font-size:12px;padding:7px 10px}
/* Bandeau de mise à jour — en haut, sous la barre d'état */
.update-bar{position:fixed;top:8px;left:8px;right:8px;max-width:464px;margin:0 auto;z-index:300;
display:flex;align-items:center;gap:10px;background:var(--teal);color:#fff;border-radius:10px;
padding:10px 12px;font-size:13px;box-shadow:0 4px 14px rgba(0,0,0,.25)}
.update-bar span{flex:1}
.update-bar button{background:#fff;color:var(--teal);border:0;border-radius:8px;padding:8px 14px;
font-weight:600;font-size:13px;cursor:pointer}
/* ============ Lot I — Statuts (stories éphémères) ============ */
/* Bandeau d'avatars : anneau dégradé = au moins un statut non vu */
.st-sec{display:flex;align-items:center;justify-content:space-between;padding:8px 12px 2px}
.st-rail{display:flex;gap:12px;padding:8px 12px;overflow-x:auto;-webkit-overflow-scrolling:touch}
.st-item{flex:0 0 auto;width:74px;text-align:center;cursor:pointer}
.st-ring{position:relative;width:64px;height:64px;border-radius:50%;padding:3px;margin:0 auto;
background:conic-gradient(from 135deg,#075E54,#128C7E,#34B7F1,#075E54)}
.st-ring.seen{background:var(--line)}
.st-ring .av{width:100%;height:100%;border:2px solid #fff;border-radius:50%;font-size:20px}
.st-ring .plus{position:absolute;right:-2px;bottom:-2px;width:22px;height:22px;border-radius:50%;
background:var(--teal);color:#fff;display:flex;align-items:center;justify-content:center;border:2px solid #fff}
.st-ring .plus .ic{width:12px;height:12px}
.st-name{font-size:11px;color:var(--muted);margin-top:4px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* Lecteur plein écran — monté dans document.body (z-index très haut,
hors .swipetrack qui porte un transform) */
.st-viewer{position:fixed;inset:0;background:#111;z-index:400;display:flex;flex-direction:column}
.st-bars{display:flex;gap:3px;padding:8px 8px 4px}
.st-bars i{flex:1;height:3px;border-radius:2px;background:rgba(255,255,255,.35);overflow:hidden}
.st-bars i b{display:block;height:100%;width:0;background:#fff}
.st-head{display:flex;align-items:center;gap:8px;padding:4px 10px 8px;color:#fff}
.st-head .av{width:34px;height:34px;font-size:13px}
.st-head .nm{font-weight:700;font-size:14px}
.st-head .wh{font-size:11px;opacity:.8}
.st-head .sp{flex:1}
.st-head button{background:none;border:0;color:#fff;cursor:pointer;display:inline-flex;align-items:center;
gap:4px;font:600 13px inherit;font-family:inherit;padding:4px}
.st-head .ic{width:20px;height:20px}
.st-media{flex:1;position:relative;display:flex;align-items:center;justify-content:center;overflow:hidden}
.st-media img,.st-media video{max-width:100%;max-height:100%;object-fit:contain;background:#000}
.st-text{flex:1;display:flex;align-items:center;justify-content:center;text-align:center;padding:32px;
color:#fff;font-size:24px;font-weight:700;line-height:1.35;word-break:break-word}
.st-zone{position:absolute;top:0;bottom:0;width:33%;z-index:2;cursor:pointer}
.st-zone.st-prev{left:0}
.st-zone.st-next{right:0;width:67%}
.st-cap{position:absolute;left:0;right:0;bottom:0;padding:12px 14px;color:#fff;font-size:14px;
background:linear-gradient(transparent,rgba(0,0,0,.65))}
/* Feuilles (composeur, spectateurs, confirmation) montées dans body */
.st-colors{display:flex;gap:8px;margin:10px 0}
.st-colors button{width:30px;height:30px;border-radius:50%;border:2px solid #fff;
box-shadow:0 0 0 1px var(--line);cursor:pointer}
.st-colors button.on{box-shadow:0 0 0 2px var(--teal)}
.st-viewers{max-height:50vh;overflow-y:auto}
.st-viewers .vw{display:flex;align-items:center;gap:10px;padding:8px 14px}
.st-viewers .vw .av{width:36px;height:36px}
#st-sheetback,#st-sheet{z-index:250}
#st-vwsback,#st-vws,#st-delback,#st-del{z-index:410}
/* ============ Lot J — Financements & Bons ============ */
/* Chips de portée (Ouverts / Groupes / Mes financements / À confirmer) */
.fin-chips{display:flex;gap:8px;padding:10px 0 8px;overflow-x:auto;align-items:center}
.fchip{flex:0 0 auto;padding:8px 14px;border-radius:999px;border:1px solid var(--line);
background:#fff;color:var(--teal);font:600 13px/1.2 inherit;cursor:pointer;font-family:inherit;
display:inline-flex;align-items:center;gap:5px;white-space:nowrap}
.fchip.on{background:var(--teal);border-color:var(--teal);color:#fff}
.fchip .ic{width:14px;height:14px}
/* Champs de saisie (recherche, quantité, montant, message, motif) */
.finput{width:100%;padding:10px 12px;border:1px solid var(--line);border-radius:10px;
font:400 14px/1.3 inherit;font-family:inherit;background:#fff;margin-bottom:8px}
.finput:focus{outline:none;border-color:var(--teal2)}
.finput[type=number]{max-width:160px}
/* Bouton pleine largeur (validation des feuilles) */
.btn.full{width:100%}
/* Libellé de section dans les feuilles */
.fl-label{font-size:12px;font-weight:700;color:var(--muted);margin:10px 0 6px;text-transform:uppercase;letter-spacing:.4px}
/* Pastilles d'état (Confirmé / En attente / Refusé / Urgent) */
.pill{display:inline-block;padding:2px 8px;border-radius:999px;font:700 11px/1.5 inherit;
font-family:inherit;vertical-align:middle}
.pill.ok{background:#e6f6ec;color:#128c4b}
.pill.wait{background:#fdf1d8;color:#9a6a00}
.pill.no{background:#fde8ea;color:#c0203a}
.pill.urgent{background:#fde8ea;color:#c0203a}
/* Fiche produit à préfinancer */
.fundcard{cursor:pointer}
.fc-top{display:flex;gap:10px;align-items:center;margin-bottom:8px}
.fc-img{width:56px;height:56px;border-radius:10px;object-fit:cover;flex:0 0 auto;background:#f2f4f5}
.fc-ph{display:flex;align-items:center;justify-content:center;color:var(--muted)}
.fc-info{flex:1;min-width:0}
.fc-name{font-weight:700;font-size:14px;margin-bottom:2px}
/* Barre de progression du préfinancement */
.fprog{height:8px;border-radius:999px;background:#eef1f2;overflow:hidden;margin:6px 0 4px}
.fprog i{display:block;height:100%;border-radius:999px;background:linear-gradient(90deg,#075E54,#128C7E)}
/* Lignes « mes financements » / « à confirmer » */
.fr-head{display:flex;align-items:center;gap:10px}
.fr-acts{display:flex;gap:6px;flex:0 0 auto}
/* Options moyens de paiement dans la feuille */
.mpick{display:flex;flex-direction:column;align-items:flex-start;gap:2px;width:100%;
padding:10px 12px;margin-bottom:6px;border:1px solid var(--line);border-radius:10px;
background:#fff;font:600 14px/1.3 inherit;font-family:inherit;cursor:pointer;text-align:left}
.mpick.on{border-color:var(--teal);background:#f0faf7}
/* Portefeuille : carte solde */
.wallet-hero{background:linear-gradient(135deg,#075E54,#128C7E);color:#fff;border-radius:14px;
padding:18px 16px;margin-bottom:12px;box-shadow:0 2px 10px rgba(7,94,84,.25)}
.wallet-hero .small{color:rgba(255,255,255,.85)}
.wv-total{font-size:30px;font-weight:800;letter-spacing:.5px;margin:2px 0}
.wv-total span{font-size:14px;font-weight:600}
.wal-actions{display:flex;gap:8px;margin-bottom:12px}
.wal-actions .btn{flex:1}
/* Cartes de bons */
.vcard{cursor:pointer}
.vrow{display:flex;align-items:center;gap:10px;margin-bottom:4px}
.vcode{font:800 13px/1.4 ui-monospace,Consolas,monospace;letter-spacing:1px;color:var(--teal)}
.vbal{font-size:18px;font-weight:800;flex:0 0 auto}
/* Lignes de sélection (destinataire ami/groupe) dans les feuilles */
.pick{display:flex;align-items:center;gap:10px;padding:9px 10px;border:1px solid var(--line);
border-radius:10px;margin-bottom:6px;cursor:pointer;background:#fff}
.pick.on{border-color:var(--teal);background:#f0faf7}
.pick .av{width:36px;height:36px;flex:0 0 auto}
.pick .tick{color:var(--teal);flex:0 0 auto}
.pick .tick .ic{width:18px;height:18px}
/* Chronologie des mouvements de bons */
.tline{display:flex;align-items:flex-start;gap:10px;padding:8px 2px;border-bottom:1px solid var(--line)}
.tline:last-child{border-bottom:0}
/* ============ Lot K — Boutique Sociale ============ */
/* Fiche d'un établissement (en-tête : nom, catégorie, ville) */
.shop-hero{background:linear-gradient(135deg,#075E54,#128C7E);color:#fff;padding:16px 14px 14px}
.shop-hero .sh-name{font-size:19px;font-weight:800;line-height:1.2}
.shop-hero .sh-meta{font-size:12px;opacity:.9;margin-top:4px;display:flex;gap:6px;flex-wrap:wrap;align-items:center}
.shop-hero .sh-badges{margin-top:8px;display:flex;gap:6px;flex-wrap:wrap}
.shop-hero .sh-badges .chip{background:#ffffff26;color:#fff}
.shop-hero .sh-badges .chip.warn{background:#fff4e0;color:#9a6b12}
/* Ligne d'information (clé / valeur) d'une fiche boutique */
.shop-kv{display:flex;gap:8px;font-size:13px;padding:7px 0;border-bottom:1px solid var(--line)}
.shop-kv:last-child{border-bottom:0}
.shop-kv .kk{color:var(--muted);flex:0 0 42%}
.shop-kv .kv2{flex:1;text-align:right;word-break:break-word}
/* Barre d'actions de la fiche (favori / avis / relayer) */
.shop-acts{display:flex;gap:8px;margin-top:10px}
.shop-acts .btn{margin-top:0;flex:1}
/* En-tête d'une section (Produits / Avis / Statistiques…) */
.sh-sec{font-size:13px;font-weight:800;color:var(--muted);text-transform:uppercase;
letter-spacing:.4px;margin:16px 12px 6px}
/* Avis clients */
.rev-row{background:#fff;border-radius:12px;padding:10px 12px;margin:0 12px 8px;
box-shadow:0 1px 3px rgba(0,0,0,.06)}
.rev-head{display:flex;align-items:center;gap:8px}
.rev-head .av{width:32px;height:32px}
.rev-head b{font-size:14px;flex:1;min-width:0}
.rev-body{font-size:13px;margin-top:4px}
/* Notation étoiles (1..5) */
.stars{display:flex;gap:6px;justify-content:center;margin:8px 0}
.stars button{width:40px;height:40px;border-radius:50%;border:1px solid var(--line);background:#fff;
font-size:20px;line-height:1;cursor:pointer;color:#c9d2ce;font-family:inherit}
.stars button.on{background:#fff4e0;border-color:var(--orange);color:var(--orange)}
/* Pastille de note moyenne */
.rating{display:inline-flex;align-items:center;gap:4px;font:700 12px/1.4 inherit;font-family:inherit;
background:#fff4e0;color:#9a6a00;border-radius:999px;padding:2px 9px}
.rating .ic{width:13px;height:13px}
/* Feuille de commande (récapitulatif) */
.ck-prod{background:#f7faf9;border:1px solid var(--line);border-radius:12px;padding:10px 12px;margin-bottom:10px}
.ck-warn{font-size:12px;color:var(--danger);background:#fde8ea;border-radius:8px;
padding:8px 10px;margin-top:8px}
.ck-ok{font-size:12px;color:#128c4b;background:#e6f6ec;border-radius:8px;padding:8px 10px;margin-top:8px}
/* Total de la commande */
.ck-total{display:flex;justify-content:space-between;align-items:center;font-size:15px;
font-weight:800;margin-top:10px;padding-top:8px;border-top:1px dashed var(--line)}
/* Ligne de commande (Mes achats / Gestion Pro) */
.orow{background:#fff;border-radius:12px;padding:10px 12px;margin:0 12px 8px;
box-shadow:0 1px 3px rgba(0,0,0,.06)}
.orow .o-top{display:flex;gap:8px;align-items:flex-start;justify-content:space-between}
.orow .o-name{font-weight:700;font-size:14px;flex:1;min-width:0}
.orow .o-meta{font-size:12px;color:var(--muted);margin-top:2px}
.orow .o-acts{display:flex;gap:6px;margin-top:8px}
.orow .o-acts .btn{margin-top:0}
/* Statistiques du tableau de bord commerçant */
.pro-stats{display:grid;grid-template-columns:repeat(2,1fr);gap:8px;margin:0 12px}
.pro-stats .ps{background:#fff;border-radius:12px;padding:10px 12px;box-shadow:0 1px 3px rgba(0,0,0,.06)}
.pro-stats .ps b{display:block;font-size:20px;color:var(--teal)}
.pro-stats .ps span{font-size:12px;color:var(--muted)}
/* Ligne produit gérée (stock + réapprovisionnement) */
.prow2{display:flex;gap:10px;align-items:center;background:#fff;border-radius:12px;
padding:10px 12px;margin:0 12px 8px;box-shadow:0 1px 3px rgba(0,0,0,.06)}
.prow2 .pinfo{flex:1;min-width:0}
.prow2 .pinfo b{display:block;font-size:14px}
/* Champs du formulaire de création de boutique */
.shopform{margin:0 12px}
/* Case à cocher (création de boutique : livraison) */
.ckbox{display:flex;align-items:center;gap:8px;font-size:13px;margin-top:10px}
.ckbox input{width:18px;height:18px;margin:0;flex:0 0 auto}
/* ============================================================
* LOT L — Feuilles de paiement (« Acheter » et « Financer »)
* Maquette : sous-titre centré « boutique · prix l'unité »,
* stepper arrondi, étiquettes de section en casse naturelle,
* pastilles « Moyen de paiement », lignes Prix / Frais / Total,
* case pleine largeur « Contribution anonyme » et le duo
* Annuler (gris) / Confirmer (bleu).
* ============================================================ */
/* Sous-titre centré sous le titre de la feuille */
.sh-sub{text-align:center;font-size:13px;color:var(--muted);margin:2px 0 2px}
/* Étiquette de section — pas de capitales dans la maquette */
.sh-lbl{font-size:13px;color:var(--muted);margin:16px 0 7px}
/* Bloc de lignes clé/valeur : Prix unitaire, Frais, Total */
.sh-rows{margin-top:14px;border-top:1px solid var(--line)}
.sh-rows .kv{font-size:13.5px;padding:9px 0}
.sh-rows .kv:last-child{border-bottom:0;padding-top:10px}
.sh-rows .kv b{font-weight:800;color:var(--ink)}
/* Note explicative sous le choix du moyen de paiement */
.sh-note{font-size:12px;color:var(--muted);line-height:1.5;margin-top:9px}
/* Note secondaire : méthode de paiement grisée (activation en attente) */
.sh-note.dim{margin-top:4px;padding-left:8px;border-left:2px solid #e3e9e7;color:#8a9793}
/* Case pleine largeur (Contribution anonyme, Bons destinés à) */
.sh-box{display:block;width:100%;text-align:center;border:1px solid #d7dedb;background:#fff;
border-radius:10px;padding:12px 10px;font:600 13px inherit;font-family:inherit;color:var(--ink);
cursor:pointer;margin-top:10px}
.sh-box.on{border-color:var(--teal);background:#f0faf7;color:var(--teal)}
/* Duo d'actions Annuler / Confirmer */
.sh-actions{display:flex;gap:10px;margin-top:16px}
.sh-actions button{flex:1;padding:13px 8px;border:none;border-radius:10px;
font:700 14px inherit;font-family:inherit;cursor:pointer}
.sh-actions .cancel{background:#e4e6eb;color:#333}
.sh-actions .ok{background:var(--fb-blue);color:#fff}
.sh-actions button:disabled{opacity:.55;cursor:not-allowed}
/* Neutralise la règle générique `.actionsheet button` (display:block,
* width:100%, bordure haute, texte à gauche) pour les widgets de
* paiement : pastilles, stepper en cercles et cases pleine largeur
* doivent garder leur géométrie. Spécificité ≥ (0,2,0). */
.actionsheet .optbtn{display:block;width:100%;padding:10px 6px;border:1px solid #d7dedb;
border-radius:10px;background:#fff;font:600 12px inherit;font-family:inherit;
text-align:center;cursor:pointer;color:var(--ink)}
.actionsheet .optbtn.on{border-color:var(--teal2);background:#eef6f2;color:var(--teal)}
.actionsheet .optbtn:disabled{opacity:.5;cursor:not-allowed}
.actionsheet .pick{display:flex;align-items:center;gap:10px;padding:8px 10px;
border:1px solid #d7dedb;border-radius:10px;background:#fff;text-align:left;cursor:pointer}
.actionsheet .pick.on{border-color:var(--teal);background:#f0faf7}
.actionsheet .qty button{width:36px;height:36px;padding:0;border:1px solid #d7dedb;
border-radius:50%;background:#fff;text-align:center;font-size:20px;line-height:1;cursor:pointer}
.actionsheet .sh-box{display:block;width:100%;padding:12px 10px;border:1px solid #d7dedb;
border-radius:10px;background:#fff;text-align:center;cursor:pointer;color:var(--ink)}
.actionsheet .sh-box.on{border-color:var(--teal);background:#f0faf7;color:var(--teal)}
/* ============================================================
* LOT M — MODULE DÉCOUVERTE (maquette img1)
* ------------------------------------------------------------
* Cartes blanches arrondies posées sur le fond beige, chips
* d'entonnoir défilantes, lignes de résultat avec carré-logo.
* Leaflet est vendorisé (vendor/leaflet) : aucun CDN.
* ============================================================ */
/* --- Carte de position + recherche (img1 : 2 cartes en haut) --- */
.disc-card{background:#fff;border-radius:12px;padding:10px 12px;margin:10px 10px 0;
box-shadow:0 1px 2px rgba(11,20,26,.06)}
.disc-geo{font-size:12px;color:var(--muted);line-height:1.35}
.disc-posbtn{display:flex;align-items:center;justify-content:center;gap:6px;width:100%;
margin:8px 0 6px;padding:9px 12px;border:1px solid var(--teal2);border-radius:999px;
background:#fff;color:var(--teal);font:600 13px inherit;font-family:inherit;cursor:pointer}
.disc-posbtn .ic{width:15px;height:15px}
.disc-posbtn.on{background:#eef6f2}
.disc-search{display:flex;align-items:center;gap:8px}
.disc-search .ic{width:16px;height:16px;color:var(--muted)}
.disc-search input{flex:1;min-width:0;border:none;outline:none;background:none;
font:14px inherit;font-family:inherit;color:var(--ink)}
/* --- Bandeau d'entonnoir (Rayon / catégories / tris) --- */
.disc-lbl{padding:12px 12px 0;font-size:11px;font-weight:700;letter-spacing:.06em;
text-transform:uppercase;color:var(--muted)}
.disc-chips{display:flex;gap:6px;padding:8px 12px 2px;overflow-x:auto;scrollbar-width:none;
scroll-snap-type:x proximity}
.disc-chips::-webkit-scrollbar{display:none}
.dcchip{flex:0 0 auto;scroll-snap-align:start;padding:7px 13px;border:1px solid #d7dedb;
border-radius:999px;background:#fff;color:var(--ink);font:600 12px inherit;
font-family:inherit;cursor:pointer;white-space:nowrap}
.dcchip.on{background:var(--teal);border-color:var(--teal);color:#fff}
/* --- Ligne de résultat (logo carré + nom + méta) --- */
.disc-res{display:flex;gap:10px;align-items:flex-start;padding:11px 12px;width:100%;
background:#fff;border:none;text-align:left;font-family:inherit;cursor:pointer}
.disc-res + .disc-res{border-top:1px solid var(--line)}
.disc-logo{flex:0 0 auto;width:46px;height:46px;border-radius:11px;display:flex;
align-items:center;justify-content:center;color:#fff;font-weight:800;font-size:17px}
.disc-logo .ic{width:22px;height:22px}
.disc-body{flex:1;min-width:0}
.disc-name{display:flex;align-items:center;gap:6px;font-size:15px;font-weight:700;
line-height:1.2;color:var(--ink)}
.disc-badge{flex:0 0 auto;font-size:9px;font-weight:800;letter-spacing:.05em;
padding:2px 7px;border-radius:999px;background:#eef1f3;color:#5a6b73;text-transform:uppercase}
.disc-meta{margin-top:2px;font-size:12px;color:var(--muted);line-height:1.4}
.disc-open{color:#1d7a3f;font-weight:700}
.disc-shut{color:#c62828;font-weight:700}
.disc-stars{color:var(--orange);font-weight:700}
/* --- Onglet Carte (Leaflet vendorisé) --- */
.disc-map{height:380px;margin:10px;border-radius:12px;overflow:hidden;
box-shadow:0 1px 2px rgba(11,20,26,.06);background:#dfe7e4;position:relative}
.disc-mapnoserv{position:absolute;inset:0;display:flex;flex-direction:column;
align-items:center;justify-content:center;gap:6px;padding:16px;text-align:center;
font-size:12px;color:var(--muted);background:#f6f6f4}
/* Carte de PLACEMENT dans le formulaire de création/édition : plus basse que
l'onglet Carte, et sans marge (elle est déjà dans un frow). */
.disc-mapform{height:220px;margin:8px 0 4px}
/* --- Onglet Catégories (grille) --- */
.disc-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:8px;padding:10px}
.disc-cat{display:flex;flex-direction:column;gap:4px;padding:12px;border:1px solid var(--line);
border-radius:12px;background:#fff;text-align:left;font-family:inherit;cursor:pointer}
.disc-cat .ic{width:20px;height:20px;color:var(--teal2)}
.disc-cat b{font-size:13px}
.disc-cat span{font-size:11px;color:var(--muted)}
/* --- Onglet Promotions --- */
.disc-promo{display:block;width:100%;padding:11px 12px;background:#fff;border:none;
border-bottom:1px solid var(--line);text-align:left;font-family:inherit;cursor:pointer}
.disc-promo:last-child{border-bottom:none}
.disc-promo b{font-size:14px}
.disc-promo .disc-meta{margin-top:1px}
.disc-code{display:inline-block;margin-top:5px;padding:2px 8px;border-radius:6px;
border:1px dashed var(--teal2);background:#f0faf7;color:var(--teal);
font-size:11px;font-weight:800;letter-spacing:.04em}
/* --- Onglet Comparer (tableau) --- */
.disc-cmp{margin:10px;border:1px solid var(--line);border-radius:12px;overflow:hidden;background:#fff}
.disc-cmp table{width:100%;border-collapse:collapse;font-size:12px}
.disc-cmp th,.disc-cmp td{padding:8px 9px;text-align:center;border-bottom:1px solid var(--line);
border-left:1px solid var(--line)}
.disc-cmp th:first-child,.disc-cmp td:first-child{text-align:left;border-left:none;
background:#fafbfb;font-weight:700;color:var(--muted);white-space:nowrap}
.disc-cmp thead th{background:#f6f6f4;font-size:12px;color:var(--ink);vertical-align:top}
.disc-cmp tr:last-child th,.disc-cmp tr:last-child td{border-bottom:none}
/* --- Détail : fiche + menus --- */
.disc-sec{padding:10px 12px 0;font-size:12px;font-weight:700;color:var(--muted)}
.disc-item{display:flex;gap:8px;align-items:baseline;padding:9px 12px;background:#fff;
border-bottom:1px solid var(--line)}
.disc-item:last-child{border-bottom:none}
.disc-item .nm{flex:1;min-width:0;font-size:13px}
.disc-item .pr{font-weight:700;font-size:13px;color:var(--teal)}
.disc-item.off{opacity:.45;text-decoration:line-through}
/* --- Gestion (mes pages) --- */
.disc-form{padding:0 12px 12px}
.disc-form .frow{margin-top:9px}
.disc-form label{display:block;margin-bottom:4px;font-size:12px;font-weight:600;color:var(--muted)}
.disc-form .fline{display:flex;gap:8px}
.disc-form .fline > *{flex:1;min-width:0}
.disc-mine{display:block;width:100%;padding:11px 12px;background:#fff;border:none;
border-bottom:1px solid var(--line);text-align:left;font-family:inherit;cursor:pointer}
.disc-mine:last-child{border-bottom:none}
.disc-mine b{font-size:14px}
/* Étoiles (fiche + résultats) */
.disc-rate{font-size:12px;color:var(--orange);font-weight:700}
/* Pastille « Livraison » portée par une page (img1) */
.disc-tag{display:inline-block;margin-left:4px;padding:1px 7px;border-radius:999px;
background:#eaf4ee;color:#1d7a3f;font-size:10px;font-weight:700}
/* Fiche détail : état « favori » de l'étoile du header */
.bar .sp .icon-btn.on{color:#FFD54F}
.bar .sp .icon-btn.on .ic{fill:currentColor;stroke:none}
/* ============================================================
* LOT M2 — CARTES TEMPS RÉEL (onglet Carte + rubrique « S'y rendre »)
* ------------------------------------------------------------
* Marqueur « moi » = la PHOTO de profil de l'utilisateur courant,
* sinon ses initiales. Leaflet pose un divIcon dont on neutralise
* le habillage par défaut (.mapme-wrap) pour habiller .mapme.
* ============================================================ */
.mapme-wrap{background:none;border:none;border-radius:50%;
overflow:hidden;box-shadow:0 2px 6px rgba(11,20,26,.4)}
/* Anneau blanc : garantit que la pastille reste lisible sur les fonds
clairs (Plan) comme sombres (Satellite). C'est un contour, pas un fond. */
.mapme-wrap.leaflet-marker-icon{border:2px solid #fff}
/* window.avatar() génère « …
» posé DIRECTEMENT
dans le divIcon, sans conteneur .mapme intermédiaire : le sélecteur doit
viser .mapme-wrap .av, sinon il ne matche jamais.
Le fond est NEUTRE (gris ardoise) et non vert : quand une photo existe,
celle-ci recouvre intégralement le disque et le fond disparaît ; sans
photo, les initiales s'affichent sur un disque sobre. */
.mapme-wrap .av{width:100%;height:100%;border-radius:50%;box-sizing:border-box;
background:#4b5563;color:#fff;
display:flex;align-items:center;justify-content:center;
font-weight:700;font-size:13px;letter-spacing:.02em}
/* SPECIFICITÉ VOLONTAIRE : leaflet.css porte
* .leaflet-container .leaflet-marker-pane img { width:auto; ... }
* en spécificité (0,2,1) — EXACTEMENT la même que la notre, et
* leaflet.css est chargé APRÈS app.css : au tie-break, Leaflet gagne.
* La photo repassait alors en « width:auto » avec height:100% et
* prenait le format du fichier source (ex. 1080x1920 -> 16,9 x 30 px),
* d’ou la pastille OVALE signalée. On ajoute .leaflet-container en
* tête de sélecteur : (0,3,1) bat (0,2,1) sans recourir à !important. */
.leaflet-container .mapme-wrap .av img{width:100%;height:100%;object-fit:cover;border-radius:50%;display:block}
/* Repli si aucun profil ni initiale. */
.mapme-wrap .mapme{width:100%;height:100%;border-radius:50%;background:#4b5563;color:#fff;
display:flex;align-items:center;justify-content:center;font-weight:700;font-size:13px}
/* Pas de halo de pulsation : l'icône Leaflet a position:absolute, donc
.mapme-wrap avec overflow:hidden découperait tout décor débordant.
L'absence de sur-contenu garantit aussi qu'aucun liseré coloré ne
vient teinter la photo. */
/* Rubrique « S'y rendre » de la fiche détail */
.disc-go-t{font-size:13px;font-weight:700;margin-bottom:2px}
.disc-mapgo{height:300px;margin:10px 0 4px}
/* Distance + mention « ligne directe » : lisible d'un coup d'œil. */
.disc-goinfo{padding:6px 0 2px;font-size:15px;font-weight:700;color:var(--teal2)}
.disc-goinfo .muted{font-size:12px;font-weight:500}
/* Géolocalisation refusée / indisponible : teinte chaude pour qu'on
distingue ce message d'un simple état vide. */
.disc-geoerr{color:#B26A00;font-size:12.5px;font-weight:600}
/* Contrôle de couches (Plan / Satellite / Relief) : un peu plus compact
sur écran étroit, la carte ne fait que 300-380 px de haut. */
.leaflet-bar.leaflet-control{box-shadow:0 1px 3px rgba(11,20,26,.2)}
.leaflet-control-layers-expanded{font-size:12px;padding:8px 10px;border-radius:8px}
/* ============================================================
LOT N — LUMINOTHÈQUE (visualiseur plein écran)
------------------------------------------------------------
Conteneur ATTACHÉ À document.body (cf. js/lightbox.js) : il est
donc hors du conteneur .app (max-width:480px) et occupe tout
l'écran, y compris sur grand écran. z-index 600 : au-dessus du
lecteur de statuts (400) et des feuilles (59).
============================================================ */
.lb{position:fixed;inset:0;z-index:600;background:#000;display:none;flex-direction:column}
/* Barre supérieure : compteur + bouton fermer. */
.lb-top{display:flex;align-items:center;justify-content:space-between;
padding:10px 12px;color:#fff;flex:0 0 auto}
.lb-count{font-size:13px;font-weight:600;opacity:.85;letter-spacing:.04em}
.lb-btn{width:44px;height:44px;border:0;border-radius:50%;background:rgba(255,255,255,.12);
color:#fff;display:flex;align-items:center;justify-content:center;cursor:pointer}
.lb-btn .ic{width:22px;height:22px}
.lb-btn:active{background:rgba(255,255,255,.26)}
/* Scène : le média est centré et jamais rogné (object-fit:contain). */
.lb-stage{flex:1;position:relative;display:flex;min-height:0;padding:0 4px}
.lb-slot{flex:1;height:100%;display:flex;align-items:center;justify-content:center;min-width:0}
.lb-slot img,.lb-slot video{max-width:100%;max-height:100%;object-fit:contain;display:block;background:#000}
/* Flèches de navigation : disparaissent s'il n'y a qu'un média. */
.lb-arrow{position:absolute;top:50%;transform:translateY(-50%);
width:44px;height:44px;padding:0;border:0;border-radius:50%;
background:rgba(255,255,255,.14);color:#fff;cursor:pointer;
display:flex;align-items:center;justify-content:center}
.lb-arrow .ic{width:24px;height:24px}
.lb-arrow.prev{left:10px}
.lb-arrow.next{right:10px}
.lb-arrow.next .ic{transform:scaleX(-1)} /* ic-back retourné */
.lb-arrow:active{background:rgba(255,255,255,.3)}
/* Sur écran large, on évite que la photo occupe toute la largeur. */
@media (min-width:560px){
.lb-slot img,.lb-slot video{max-width:min(1100px,100%)}
}
/* ============================================================
LOT O — POSITION EN DIRECT (vue #/live/)
------------------------------------------------------------
Deux personnes suivies (chacune avec sa pastille d'avatar),
carte plein cadre et traceur bleu actualisé toutes les 2 s.
============================================================ */
/* Les deux personnes, côte à côte sous l'en-tête. */
.live-people{display:flex;gap:14px;padding:10px 12px;background:#fff;
border-bottom:1px solid var(--line,#e6ebef);overflow-x:auto}
.live-who{display:flex;align-items:center;gap:8px;min-width:0}
.live-av{flex:0 0 auto;width:34px;height:34px;display:block}
.live-av .av{width:34px;height:34px}
.live-nm{font-size:13px;font-weight:600;white-space:nowrap;overflow:hidden;
text-overflow:ellipsis;max-width:130px}
/* Carte : occupe tout l'espace restant entre l'en-tête et le pied. */
.live-map{flex:1;min-height:260px;width:100%;background:#dfe6ea}
/* Pastille « moi » : même disque que l'émetteur, teinte différente
pour distinguer les deux marqueurs d'un coup d'œil. */
.mapme-wrap.mapme{border:2px solid #fff}
/* Pied : état du partage + bouton d'arrêt. */
.live-foot{display:flex;align-items:center;justify-content:space-between;gap:10px;
padding:10px 12px;background:#fff;border-top:1px solid var(--line,#e6ebef)}
.live-status{font-size:12.5px;color:var(--muted,#6b7280)}
/* Bandeau « émission en cours » au-dessus de la barre de saisie. */
.liveshare{display:flex;align-items:center;gap:8px;padding:6px 12px;
background:#e8f5ee;color:var(--teal,#0f766e);font-size:12.5px;font-weight:600}
.liveshare.hidden{display:none}
.liveshare .lbl{flex:1;min-width:0}
/* Point clignotant = émission active. */
.dotlive{width:9px;height:9px;border-radius:50%;background:#16a34a;flex:0 0 auto;
animation:dotlive 1.4s ease-in-out infinite}
@keyframes dotlive{0%,100%{opacity:1}50%{opacity:.25}}
/* ============================================================
* LOT Q — FICHE UTILISATEUR TYPE FACEBOOK
* .who zone cliquable « photo + nom » (fil, amis,
* groupes, recherche) → #/user/ID
* .fv-* en-tête de la fiche : couverture, photo de
* profil en débord, actions d'amitié, statistiques
* ============================================================ */
.who{display:flex;align-items:center;gap:10px;flex:1;min-width:0;
cursor:pointer;-webkit-tap-highlight-color:transparent}
.who:active{opacity:.72}
.post-head .who{align-items:flex-start}
.post-comment .who{flex:0 0 auto;gap:0}
.listrow .who .gr{flex:1;min-width:0}
/* Expéditeur d'un message de groupe : le nom ouvre sa fiche */
.sndr[data-route]{cursor:pointer}
/* --- Couverture --- */
.fv-cover{position:relative;height:150px;overflow:hidden;
background:linear-gradient(135deg,#1f8f74 0%,#128C7E 45%,#123a5a 100%)}
.fv-cover-img{width:100%;height:100%;object-fit:cover;display:block}
.fv-cover-btn{position:absolute;right:10px;bottom:10px;display:inline-flex;
align-items:center;gap:6px;background:#fffffff2;color:#0f766e;border:none;
border-radius:999px;padding:7px 12px;font-size:12px;font-weight:700;
cursor:pointer;box-shadow:0 2px 8px #0003}
.fv-cover-btn:active{transform:scale(.97)}
.fv-cover-btn .ic{width:16px;height:16px}
/* --- Identité --- */
.fv-id{display:flex;flex-direction:column;align-items:center;gap:2px;
padding:0 12px 8px;background:#fff;text-align:center}
.fv-avwrap{position:relative;margin-top:-46px;width:96px;height:96px;
border-radius:50%;border:4px solid #fff;background:#25604f;color:#d8f5ea;
display:flex;align-items:center;justify-content:center;font-weight:700;
font-size:32px;overflow:hidden;box-shadow:0 2px 10px #0002}
.fv-avwrap img{width:100%;height:100%;object-fit:cover}
.fv-avwrap[data-action]{cursor:pointer}
/* La photo de profil (div .av injectée par window.avatar) doit
* occuper tout le disque : sans règle de taille elle se réduirait
* au texte des initiales ou à 0 px pour une image en 100 %. */
.fv-avwrap .av{width:100%;height:100%;border-radius:50%;background:#25604f;
color:#d8f5ea;display:flex;align-items:center;justify-content:center;
font-weight:700;font-size:34px;overflow:hidden}
.fv-avwrap .av img{width:100%;height:100%;object-fit:cover;display:block}
.fv-cam{position:absolute;right:0;bottom:2px;width:30px;height:30px;
border-radius:50%;background:var(--teal,#0f766e);color:#fff;display:flex;
align-items:center;justify-content:center;border:2px solid #fff}
.fv-cam .ic{width:15px;height:15px}
.fv-nom{font-size:20px;font-weight:800;margin-top:6px;display:flex;
align-items:center;justify-content:center;gap:2px;word-break:break-word}
/* --- Actions d'amitié + message --- */
.fv-acts{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;
padding:2px 12px 10px;background:#fff}
.fv-acts .btn{flex:1 1 auto;min-width:132px}
.fv-acts .btn[disabled]{opacity:.6;cursor:default}
/* --- Statistiques, bio, contact, badges --- */
.fv-stats{display:flex;flex-wrap:wrap;align-items:center;
padding:4px 12px 10px;background:#fff;border-bottom:1px solid var(--line)}
.fv-bio{padding:11px 12px;background:#fff;border-bottom:1px solid var(--line);
font-size:14px;line-height:1.5}
.fv-line{display:flex;align-items:center;gap:8px;padding:9px 12px;
background:#fff;border-bottom:1px solid var(--line);font-size:13px;
color:var(--muted)}
.fv-line .ic{width:16px;height:16px;flex:0 0 auto}
.fv-badges{display:flex;flex-wrap:wrap;gap:2px;padding:8px 12px;
background:#fff;border-bottom:1px solid var(--line)}
.fv-head{background:#fff;border-bottom:1px solid var(--line)}
/* ============================================================
* LOT R (7 demandes) — photos, panier, galerie, bons spéciaux
* ============================================================ */
/* Vignette à photo de fond (produit, boutique, page découverte) */
.haspic{background-size:cover;background-position:center;background-repeat:no-repeat;
background-color:#dfeeea}
/* Fiche boutique : couverture, photo de profil, barre de panier */
.sh-cover{height:150px;background:linear-gradient(135deg,#075E54,#128C7E);
background-size:cover;background-position:center}
.sh-head{display:flex;gap:10px;align-items:center;margin-bottom:6px}
.sh-logo{width:54px;height:54px;border-radius:50%;flex:0 0 auto;
border:3px solid rgba(255,255,255,.55);background:rgba(255,255,255,.16);
color:#fff;display:flex;align-items:center;justify-content:center}
.sh-cartbar{display:flex;flex-direction:column;gap:6px;padding:10px 12px 4px}
/* Gestion Pro : vignette photo + actions par produit */
.pimg{width:44px;height:44px;border-radius:10px;flex:0 0 auto;background:#eef6f2;
color:var(--teal);display:flex;align-items:center;justify-content:center;
background-size:cover;background-position:center}
.pimg.big{width:54px;height:54px}
.pimg .ic{width:20px;height:20px}
.prow2 .pacts{display:flex;flex-direction:column;gap:4px;flex:0 0 auto}
/* Panier : ligne d'article + vignette réduite */
.cart-line{display:flex;gap:10px;align-items:center;padding:8px 0;
border-bottom:1px solid var(--line)}
.cart-line .img.mini{width:40px;height:40px;border-radius:8px}
.cart-line .cl-info{flex:1;min-width:0}
.cart-line .cl-info b{display:block;font-size:13.5px}
.cart-line .qty{margin:0;gap:10px}
.cart-line .qty button{width:30px;height:30px;font-size:16px}
/* Sélecteurs de médias (photos produits, couverture, galerie) */
.pkrow{display:flex;gap:8px;flex-wrap:wrap;align-items:center;padding:6px 0}
.pk{position:relative;display:inline-flex;align-items:center;justify-content:center;
width:56px;height:56px;border-radius:10px;background:#eef6f2 center/cover no-repeat;
color:var(--teal);flex:0 0 auto}
.pk .ic{width:22px;height:22px}
.pk.isvid{background:#0b3d36;color:#fff}
.pk-x{position:absolute;top:-7px;right:-7px;width:20px;height:20px;border-radius:50%;
border:0;background:var(--ink);color:#fff;font-size:12px;line-height:1;cursor:pointer}
/* Pages découvertes : couverture, galerie photo/vidéo, produit lié */
.disc-cover{height:160px;margin:0 0 2px;background:linear-gradient(135deg,#075E54,#128C7E);
background-size:cover;background-position:center}
.disc-thumb{width:44px;height:44px;border-radius:8px;flex:0 0 auto;background:#eef6f2;
color:var(--teal);display:flex;align-items:center;justify-content:center;
background-size:cover;background-position:center}
.disc-thumb .ic{width:20px;height:20px}
.disc-item.prod{align-items:center}
.gal-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));
gap:8px;padding:4px 12px 10px}
/* Cellule de galerie sans aspect-ratio (compatibilité Chrome ancien) */
.gal-cell{position:relative;padding-top:75%;border-radius:12px;overflow:hidden;background:#000}
.gal-cell>img,.gal-cell>video{position:absolute;top:0;left:0;width:100%;height:100%;
object-fit:cover;display:block}
/* ============================================================
* LOT S — Statistiques & tableaux de bord (admin + Gestion Pro)
* (apporte par la session parallele - fusion v58, voir MEMO)
* ============================================================ */
.adm-tabs{display:flex;background:#fff;border-bottom:1px solid var(--line);
position:sticky;top:60px;z-index:9}
.adm-tab{flex:1;padding:11px 0;border:none;background:none;font-weight:600;
font-size:13px;color:var(--muted);cursor:pointer;position:relative}
.adm-tab.on{color:var(--teal)}
.adm-tab.on::after{content:'';position:absolute;bottom:0;left:25%;right:25%;
height:3px;background:var(--green);border-radius:3px 3px 0 0}
.kpi-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;padding:10px 12px}
.kpi{background:#fff;border-radius:12px;padding:10px 6px;text-align:center;
box-shadow:0 1px 2px rgba(0,0,0,.05);min-width:0}
.kpi b{display:block;font-size:15px;color:var(--teal);line-height:1.2;
white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.kpi span{display:block;font-size:10px;color:var(--muted);margin-top:2px;
white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.chart-box{background:#fff;border-radius:14px;margin:0 12px 10px;padding:10px 8px 6px;
box-shadow:0 1px 2px rgba(0,0,0,.05)}
.cb-title{font-size:12px;font-weight:700;color:var(--ink);padding:0 6px 6px}
canvas.chart{display:block;width:100%;height:140px}
canvas.chart.donut{height:150px}
.legend{display:flex;flex-wrap:wrap;gap:4px 10px;padding:4px 8px 4px;font-size:11px;color:var(--muted)}
.legend .lg{display:inline-flex;align-items:center;gap:4px}
.legend .lg i{width:8px;height:8px;border-radius:50%;background:var(--teal);display:inline-block}
.legend .lg:nth-child(2) i{background:var(--green)}
.legend .lg:nth-child(3) i{background:var(--orange)}
.legend .lg:nth-child(4) i{background:var(--blue)}
.legend .lg:nth-child(5) i{background:#8E44AD}