/* SIGHT — « le 1er réseau social de traders » : thème de la maquette (bleu nuit profond, or, bleu). 08/10 refonte. */
:root{--bg:#02050c;--bg2:#070b16;--panel:#0b1020;--panel2:#0e1424;--line:#1a2236;--line2:#28324a;--text:#e3e7ef;--muted:#8a95a8;--gold:#f7c948;--gold2:#d4a63a;--blue:#2f7fd8;--up:#2be3a9;--dn:#ff5c74;--side:236px;--top:60px;--bot:62px}
*{box-sizing:border-box}
html,body{margin:0;background:var(--bg);color:var(--text);font:15px/1.5 system-ui,"Segoe UI",Roboto,sans-serif;-webkit-text-size-adjust:100%}
body.sg{background:radial-gradient(1200px 600px at 70% -10%,#0b1834 0%,rgba(2,5,12,0) 60%),var(--bg)}
a{color:#8fb0ff;text-decoration:none}a:hover{text-decoration:underline}
img{max-width:100%}
h1{font-size:22px;margin:4px 0 12px;letter-spacing:.2px}h2{font-size:17px;margin:0 0 12px}h3{font-size:12px;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);margin:0 0 8px}
.mut{color:var(--muted);font-size:13px}.sm{font-size:12.5px}.xs{font-size:11px;margin:8px 0 0}
.err{color:#ff8a80;background:#2a0f14;border:1px solid #5a2a35;padding:8px 10px;border-radius:10px}.ok{color:#7fe3b0;background:#0d2a20;border:1px solid #1f5a44;padding:8px 10px;border-radius:10px}
.sp{flex:1}.center{text-align:center}.gold{color:var(--gold2)}
/* ---------- coquille : menu à gauche + barre du haut ---------- */
.sg-app{display:grid;grid-template-columns:var(--side) minmax(0,1fr);min-height:100dvh}
.sg-side{position:sticky;top:0;height:100dvh;display:flex;flex-direction:column;gap:10px;padding:16px 12px;border-right:1px solid var(--line);background:rgba(4,8,18,.92);z-index:30;overflow-y:auto}
.brand{display:block;padding:4px 6px 10px}.brand-img{height:40px;width:auto;display:block}.brand:hover{text-decoration:none}
.sg-nav{display:flex;flex-direction:column;gap:2px}
.sg-nav a{display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:12px;color:#b9c2d3;font-weight:500}
.sg-nav a:hover{background:#0f1830;text-decoration:none;color:#fff}.sg-nav a.on{background:linear-gradient(90deg,rgba(212,166,58,.22),rgba(212,166,58,.04));color:var(--gold);box-shadow:inset 3px 0 0 var(--gold2)}
.sg-nav .mi{width:22px;text-align:center;font-size:17px}
.sg-foot{margin-top:auto;display:flex;flex-direction:column;gap:6px;padding:10px 8px;font-size:12px;color:var(--muted)}.sg-foot a{color:var(--muted)}.sg-foot span{font-style:italic;color:#6f7a8f}
.sg-main{min-width:0;display:flex;flex-direction:column}
.top{position:sticky;top:0;z-index:20;display:flex;align-items:center;gap:12px;height:var(--top);padding:0 18px;padding-top:env(safe-area-inset-top);background:rgba(2,5,12,.88);border-bottom:1px solid var(--line);backdrop-filter:blur(10px)}
.top .brand.m,.top .burger,.top .srch-ic{display:none}
.srch-top{flex:1;max-width:560px;display:flex;align-items:center;gap:8px;background:#0b1224;border:1px solid var(--line2);border-radius:12px;padding:0 12px}
.srch-top input{border:0;background:none;padding:9px 0;font-size:14px}.srch-top input:focus{outline:none}.srch-top:focus-within{border-color:var(--gold2)}
.ico{display:inline-flex;align-items:center;justify-content:center;width:38px;height:38px;border-radius:10px;background:none;border:0;color:var(--text);font-size:18px;cursor:pointer;position:relative}
.ico:hover{background:#0f1830;text-decoration:none}
.bell .bdg{position:absolute;top:3px;right:3px;min-width:17px;height:17px;border-radius:9px;background:var(--dn);color:#fff;font:700 10.5px/17px system-ui;padding:0 4px;text-align:center}
.moi{margin-left:auto;display:flex;align-items:center;gap:8px}.me{display:flex;align-items:center;gap:7px;color:var(--text);font-weight:600}.me:hover{text-decoration:none}
.out .lnk{color:var(--muted);font-size:12.5px}
details.mk{position:relative}details.mk>summary{list-style:none;cursor:pointer}details.mk>summary::-webkit-details-marker{display:none}
.mk-m{position:absolute;right:0;top:46px;min-width:220px;background:var(--panel2);border:1px solid var(--line2);border-radius:12px;padding:6px;box-shadow:0 14px 40px rgba(0,0,0,.6);z-index:40}
.mk-m a{display:block;padding:10px 12px;border-radius:9px;color:var(--text)}.mk-m a:hover{background:#141d33;text-decoration:none}
main{width:100%;max-width:1220px;margin:0 auto;padding:18px 20px calc(30px + env(safe-area-inset-bottom))}
/* 16/10 (patron : « trop centré au milieu ») : boutique, formation, cours, rendez-vous, progression, paramètres, administration, bêta = pleine largeur (bords gardés) */
main[data-large]{max-width:min(2720px,100%)}
/* 16/10 ter : passe devant les « main:has(…) { max-width:1760px } » des modules (communauté, contenus, messagerie…) ; les lives gardent leurs règles */
main[data-large][data-large][data-large]:not([data-espace^="live"]){max-width:min(2720px,100%)}
main[data-large]{padding-left:clamp(20px,2.6vw,64px);padding-right:clamp(20px,2.6vw,64px)}
main[data-large] .bq,main[data-large] .prm{max-width:none}
main[data-large] .narrow.wide{max-width:min(1180px,100%)}
main[data-large] .bt-page-f,main[data-large] .bt-qf{max-width:min(1180px,100%)}
main[data-large] .pc-grid{grid-template-columns:repeat(auto-fill,minmax(290px,1fr));gap:16px}
/* 16/10 ter (patron : « redimensionner TOUTES les fenêtres ») : fil, accueil, communauté… — la colonne centrale prend la place, les publications en grille */
@media (min-width:1181px){main[data-large] .sg-cols{grid-template-columns:minmax(0,1fr) clamp(300px,18vw,380px)}}
main[data-large] .sg-center{max-width:none}
main[data-large] .sg-center .feed{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,500px),1fr));gap:16px;align-items:start}
main[data-large] .sg-center .feed>*{margin:0}
main[data-large] .sg-center .feed>p,main[data-large] .sg-center .feed>.empty,main[data-large] .sg-center .feed>.more{grid-column:1/-1}
main[data-large]:has(.chat),main[data-large]:has(.chat.mx),main[data-large]:has(.cm2-une),main[data-large]:has(.cm2-dir){max-width:min(2720px,100%)}
main[data-large] .vtk,main[data-large] .mc-nav,main[data-large] .va{max-width:none}
main[data-large] .cgu{max-width:min(1500px,100%)}
main[data-large] .card.narrow.wide{max-width:min(1500px,100%)}
/* ---------- fil : colonne centrale + colonne de droite ---------- */
.sg-cols{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:20px;align-items:start}
.sg-center{min-width:0;max-width:720px}
.sg-right{position:sticky;top:calc(var(--top) + 14px);display:flex;flex-direction:column;gap:14px}.sg-right .card{margin:0}
.rc .rc-hd{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px}.rc h3{margin:0}
.rc-row{display:flex;align-items:center;gap:10px;padding:7px 6px;border-radius:10px;color:var(--text)}.rc-row:hover{background:#0f1830;text-decoration:none}.rc-row.in{padding:0}
.rc-tx{display:flex;flex-direction:column;min-width:0;line-height:1.25}.rc-tx b{font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.rc-tx .mut{font-size:12px}
.rc-sc{margin-left:auto;font:700 12px ui-monospace,Consolas,monospace;color:var(--up)}
.rc.cta{background:linear-gradient(160deg,#121a33,#0b1020);text-align:center}.rc.cta b{color:var(--gold2);font-size:15px}
.compo{display:flex;align-items:center;gap:12px;color:var(--muted)}.compo:hover{text-decoration:none;border-color:var(--line2)}.compo span:nth-child(2){flex:1}
/* ---------- boutons, formulaires ---------- */
.btn,button.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;font:inherit;font-size:14px;color:var(--text);background:#111a2e;border:1px solid var(--line2);border-radius:10px;padding:7px 14px;cursor:pointer;text-decoration:none;min-height:38px;white-space:nowrap}
.btn:hover{border-color:#4a5a80;text-decoration:none}.btn.pri{background:linear-gradient(180deg,#f7c948,#d4a63a);color:#141006;border-color:#d4a63a;font-weight:700}.btn.on{background:#3a1220;border-color:var(--dn);color:#fff}
.btn.dan{color:#ff8a95;border-color:#5a2a35}.btn.big{width:100%;min-height:48px;font-size:16px}.btn.sm{min-height:30px;padding:4px 10px;font-size:13px}.btn[disabled]{opacity:.55;cursor:not-allowed}
.lnk{background:none;border:0;color:#8fb0ff;cursor:pointer;font:inherit;font-size:13px;padding:0}
.inl{display:inline}
.card{background:linear-gradient(180deg,rgba(14,20,36,.92),rgba(10,15,28,.92));border:1px solid var(--line);border-radius:16px;padding:16px;margin-bottom:14px}
.narrow{max-width:460px;margin:24px auto}.narrow.wide{max-width:720px}
.frm{display:flex;flex-direction:column;gap:12px}.frm label{display:flex;flex-direction:column;gap:5px;color:var(--muted);font-size:13px}
input,textarea,select{font:inherit;font-size:16px;color:#e6ecff;background:#080d1a;border:1px solid var(--line2);border-radius:10px;padding:9px 11px;width:100%}
input:focus,textarea:focus,select:focus{outline:2px solid var(--gold2);outline-offset:0}
input[type=file]{padding:8px;font-size:14px}input[type=checkbox]{width:auto}
fieldset.chk{border:1px solid var(--line2);border-radius:12px;padding:8px 12px;display:flex;flex-wrap:wrap;gap:6px 16px}fieldset.chk legend{color:var(--muted);font-size:13px;padding:0 6px}fieldset.chk label{flex-direction:row;align-items:center;gap:6px;color:var(--text);font-size:14px}
.row3{display:grid;grid-template-columns:2fr 1fr 1fr;gap:10px}.row-btn{display:flex;gap:8px;flex-wrap:wrap}
.alt{margin-top:12px}.prev img{border-radius:10px;border:1px solid var(--line);display:block}
.pg-hd{margin:4px 0 14px}.pg-hd h1{margin-bottom:4px}
.tabs{display:flex;align-items:center;gap:6px;margin:0 0 14px;overflow-x:auto;scrollbar-width:none}.tabs::-webkit-scrollbar{display:none}
.tabs a{padding:8px 16px;border-radius:999px;color:var(--muted);border:1px solid var(--line);white-space:nowrap}.tabs a:hover{text-decoration:none;color:#fff}.tabs a.on{color:#141006;background:linear-gradient(180deg,#f7c948,#d4a63a);border-color:#d4a63a;font-weight:700}
.ftabs{border-bottom:1px solid var(--line);border-radius:0;gap:2px;padding-bottom:0}.ftabs a{border:0;border-radius:0;padding:10px 14px;border-bottom:2px solid transparent}.ftabs a.on{background:none;color:var(--gold);border-bottom-color:var(--gold2)}
/* ---------- cartes de publication (maquette) ---------- */
.feed{display:flex;flex-direction:column;gap:14px}.feed .card{margin:0}.empty{text-align:center;padding:40px 0}
.idea .hd{display:flex;align-items:center;gap:10px;margin-bottom:8px;flex-wrap:wrap}.who{color:var(--text);font-weight:700}
.pro{display:inline-block;font:800 10px/1 system-ui;letter-spacing:.06em;color:#141006;background:linear-gradient(180deg,#f7c948,#d4a63a);border-radius:5px;padding:3px 5px;margin-left:6px;vertical-align:2px}
.sym{font:600 12px ui-monospace,Consolas,monospace;color:var(--gold);background:#16130a;border:1px solid #3a2f0a;border-radius:7px;padding:2px 7px}
.sens{font-size:12px;font-weight:700;border-radius:7px;padding:2px 8px}.sens.achat{background:#0d2a20;color:var(--up)}.sens.vente{background:#2a0f14;color:var(--dn)}.sens.neutre{background:#1a2233;color:var(--muted)}
.ttl{display:block;color:var(--text);font-weight:700;font-size:16.5px;margin-bottom:6px}.ext{margin:0 0 10px;color:#c6ccd8;white-space:pre-wrap;word-wrap:break-word}
.shot img{display:block;width:100%;border-radius:12px;border:1px solid var(--line);aspect-ratio:16/9;object-fit:cover;background:#05080f}.shot.big img{aspect-ratio:auto;object-fit:contain}
.idea .ft{display:flex;align-items:center;gap:14px;margin-top:10px;color:var(--muted);font-size:13.5px;flex-wrap:wrap}
.gtag{font-size:12px;color:#b9c8ff;background:#101a35;border:1px solid #23325c;border-radius:999px;padding:2px 9px}
.full h1{margin-top:6px}.txt{white-space:pre-wrap;margin:12px 0;word-wrap:break-word}
.av{width:42px;height:42px;border-radius:50%;object-fit:cover;flex:none;display:inline-flex;align-items:center;justify-content:center;background:#24304a;color:#fff;font-weight:700;border:1px solid #2a3550}
.av.s{width:32px;height:32px;font-size:13px}.av.xl{width:104px;height:104px;font-size:38px;border:3px solid var(--bg2)}
/* ---------- profil / espace personnel ---------- */
.prof{display:flex;gap:18px;align-items:flex-start}.prof .acts{display:flex;gap:8px;flex-wrap:wrap}.bio{white-space:pre-wrap}.adm{font-size:11px;background:var(--gold);color:#111;border-radius:6px;padding:1px 6px;vertical-align:middle}
.prof2{padding:0;overflow:hidden}.prof2 .ban{height:170px;background:linear-gradient(120deg,#0b1834,#1a2a55 45%,#3a2a08);background-size:cover;background-position:center}
.prof-in{display:flex;gap:18px;padding:0 18px 18px;align-items:flex-start}.prof-in .av.xl{margin-top:-52px}.prof-tx{flex:1;min-width:0;padding-top:14px}.prof-tx h1{margin:0 0 2px}
.chips{display:flex;flex-wrap:wrap;gap:6px;margin:6px 0}.chip{font-size:12px;border:1px solid #3a2f0a;color:var(--gold2);background:#141006;border-radius:999px;padding:2px 10px}.chip.m{border-color:#23325c;color:#b9c8ff;background:#0d1530}
.stats{display:flex;flex-wrap:wrap;gap:16px;margin:8px 0;color:var(--muted)}.stats b{color:var(--text)}
.prof-in .acts{display:flex;gap:8px;flex-wrap:wrap;margin-top:6px}
.ptabs{position:sticky;top:var(--top);z-index:5;background:rgba(2,5,12,.9);padding:8px 0;backdrop-filter:blur(8px)}
.sec-t{margin:18px 0 10px;scroll-margin-top:calc(var(--top) + 60px)}
.prof-ed{display:flex;gap:14px;align-items:center}
/* ---------- groupes ---------- */
.grp-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:12px;margin-bottom:16px}.grp-list .card{margin:0}
.grp{display:flex;gap:12px;align-items:flex-start}.grp-tx{flex:1;min-width:0}.grp-tx p{margin:4px 0 0}
.grp-ic{flex:none;width:46px;height:46px;border-radius:14px;display:inline-flex;align-items:center;justify-content:center;font-size:22px;background:linear-gradient(160deg,#16203d,#0c1328);border:1px solid var(--line2)}
.grp-ic.s{width:34px;height:34px;font-size:16px;border-radius:10px}.grp-ic.xl{width:72px;height:72px;font-size:34px;border-radius:20px}
.grp-hd{display:flex;gap:16px;align-items:flex-start}.grp-hd .acts{display:flex;gap:8px;flex-wrap:wrap}
/* ---------- tableaux, filtres, divers ---------- */
.tbl{overflow-x:auto}.tbl table{width:100%;border-collapse:collapse}.tbl th,.tbl td{padding:9px 8px;border-bottom:1px solid var(--line);text-align:left;vertical-align:middle}.tbl th{color:var(--muted);font-size:12px;font-weight:600;text-transform:uppercase;letter-spacing:.05em}
.rk{font:800 15px system-ui;color:var(--gold2);width:36px}.num{font:700 14px ui-monospace,Consolas,monospace;color:var(--up)}
.filt{display:flex;gap:10px;align-items:flex-end;flex-wrap:wrap}.filt label{display:flex;flex-direction:column;gap:4px;color:var(--muted);font-size:12.5px;flex:1;min-width:120px}
.srch{display:flex;gap:10px}
.vgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px}.vcell{display:flex;flex-direction:column;gap:4px;color:var(--text);font-size:13px}.vcell img{aspect-ratio:9/16;object-fit:cover;border-radius:12px;border:1px solid var(--line)}
.soon ul{margin:0;padding-left:20px;color:#c6ccd8}
.sg-2{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:14px}.sg-2 .card{margin:0}
.nts .nt{display:flex;gap:10px;align-items:center;padding:10px 8px;border-bottom:1px solid var(--line);color:var(--text)}.nts .nt:hover{background:#0f1830;text-decoration:none}.nts .nt.new{background:rgba(212,166,58,.06)}.nt-ic{flex:0 0 34px;width:34px;height:34px;border-radius:50%;display:grid;place-items:center;background:rgba(212,166,58,.12);color:#d4a63a}
.com{display:flex;gap:10px;padding:10px 0;border-bottom:1px solid var(--line)}.com p{margin:4px 0 0;white-space:pre-wrap;word-wrap:break-word}.com-f{margin-top:12px}
.pager{display:flex;justify-content:center;gap:10px;margin:16px 0}
code{background:#141b2d;border-radius:6px;padding:2px 6px}
#toast{position:fixed;left:50%;bottom:calc(24px + env(safe-area-inset-bottom));transform:translateX(-50%);background:#141b2d;border:1px solid var(--gold2);color:#fff;padding:10px 16px;border-radius:12px;display:none;z-index:80}
/* ---------- vitrine (visiteur) ---------- */
.hero{text-align:center;padding:26px 16px 22px;margin-bottom:16px;border:1px solid var(--line);border-radius:20px;background:radial-gradient(800px 380px at 50% 0,#0f1d3d 0%,rgba(2,5,12,0) 70%),linear-gradient(180deg,#060b18,#03060e)}
.hero-logo{width:min(340px,78%);height:auto}.hero-kick{letter-spacing:.32em;font-size:11.5px;color:#aab3c5;margin:10px 0 6px}
.hero-t{font-size:clamp(22px,3.4vw,34px);line-height:1.18;margin:6px 0 10px;letter-spacing:.02em}.hero-t sup{font-size:.5em}
.hero-s{letter-spacing:.22em;font-size:11.5px;color:#aab3c5}.hero-b{display:flex;gap:10px;justify-content:center;max-width:460px;margin:16px auto}
.piliers{display:grid;grid-template-columns:repeat(5,1fr);gap:8px;margin-top:14px}.pil{padding:10px 6px;border-top:1px solid #3a2f0a}.pil span{font-size:24px;display:block}.pil b{display:block;font-size:12.5px;letter-spacing:.05em;text-transform:uppercase;margin:4px 0}.pil p{margin:0;font-size:12px;color:var(--muted)}
.hero-f{margin:14px 0 0;color:#aab3c5;font-size:13px}.hero-f i{color:var(--gold2)}
.sg-splash{position:fixed;inset:0;z-index:999;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:18px;background:#000;transition:opacity .6s}
.sg-splash img{width:min(380px,76vw)}.sg-splash p{text-align:center;letter-spacing:.12em;font-size:14px;color:#dfe5f0;margin:0}.sg-splash b{color:var(--gold2)}.sg-splash.off{opacity:0;pointer-events:none}
/* ---------- barre du bas + feuilles (téléphone) ---------- */
.sg-bottom{display:none}
.sg-sheet{position:fixed;inset:0;z-index:90;background:rgba(0,0,0,.5);display:flex;align-items:flex-end}.sg-sheet[hidden]{display:none}
.sh-b{width:100%;background:var(--panel2);border-radius:18px 18px 0 0;padding:14px 14px calc(16px + env(safe-area-inset-bottom));display:flex;flex-direction:column;gap:4px}.sh-b b{padding:4px 8px 8px}
.sh-b a{padding:13px 12px;border-radius:12px;color:var(--text);font-size:16px}.sh-b a:hover{background:#141d33;text-decoration:none}
.sg-veil{position:fixed;inset:0;z-index:25;background:rgba(0,0,0,.55)}.sg-veil[hidden]{display:none}
/* ---------- chat ---------- */
main:has(.chat){max-width:1300px;padding-bottom:16px}
.chat{display:grid;grid-template-columns:240px 1fr;height:calc(100dvh - var(--top) - 40px);border:1px solid var(--line);border-radius:16px;overflow:hidden;background:var(--panel)}
.chat .side{border-right:1px solid var(--line);padding:6px 10px;overflow:auto;background:#070c18}
.chat .side a{display:flex;align-items:center;gap:8px;padding:7px 8px;border-radius:10px;color:var(--text)}.chat .side a.on{background:#1a2233;color:var(--gold)}.chat .side a:hover{text-decoration:none;background:#141b2d}
.chat h3{margin:14px 0 6px}
.dmf{display:flex;gap:6px;margin-top:10px}.dmf input{padding:6px 8px;font-size:14px}
.conv{display:flex;flex-direction:column;min-width:0;min-height:0}.ch-hd{display:flex;align-items:center;gap:10px;padding:10px 14px;border-bottom:1px solid var(--line)}.side-tg{display:none}
.msgs{flex:1;overflow-y:auto;padding:12px 14px;display:flex;flex-direction:column;gap:8px}
.m{display:flex;gap:8px;max-width:80%}.m.moi{align-self:flex-end;flex-direction:row-reverse}
.m .bu{background:#121a2e;border:1px solid var(--line);border-radius:14px;padding:7px 11px;min-width:0}.m.moi .bu{background:#2a2205;border-color:#4a3a0a}
.m .nm{font-size:12px;color:var(--muted)}.m .tx{white-space:pre-wrap;word-wrap:break-word}.m img.pic{max-width:260px;max-height:260px;border-radius:10px;display:block;margin-top:4px;cursor:zoom-in}.m .del{font-size:11px}
.m .gone{font-style:italic;color:var(--muted)}
.lp{display:flex;gap:8px;align-items:center;margin-top:6px;padding:6px;border:1px solid var(--line2);border-radius:10px;background:#0a0f1c;color:var(--text)}.lp img{width:72px;height:44px;object-fit:cover;border-radius:5px}
.send{display:flex;gap:8px;padding:10px;border-top:1px solid var(--line);padding-bottom:calc(10px + env(safe-area-inset-bottom))}.send .pic{font-size:22px;cursor:pointer;display:flex;align-items:center;padding:0 4px}
.pv{padding:0 14px 8px;color:var(--muted);font-size:12px}
/* ---------- tailles intermédiaires ---------- */
@media (max-width:1180px){.sg-cols{grid-template-columns:minmax(0,1fr) 280px}:root{--side:210px}}
@media (max-width:1000px){.sg-cols{grid-template-columns:1fr}.sg-right{position:static}.sg-center{max-width:none}.piliers{grid-template-columns:repeat(3,1fr)}}
/* ---------- téléphone ET panneau 560 px : barre du bas, menu en tiroir ---------- */
@media (max-width:820px){
  :root{--top:56px}
  .sg-app{grid-template-columns:1fr}
  .sg-side{position:fixed;left:0;top:0;bottom:0;width:270px;transform:translateX(-105%);transition:transform .25s;box-shadow:12px 0 40px rgba(0,0,0,.6);height:100dvh}
  body.drawer-on .sg-side{transform:none}
  .top{padding:0 8px;gap:6px}.top .burger,.top .brand.m,.top .srch-ic{display:inline-flex}.top .brand.m{padding:0}.brand-eye{height:26px;width:auto;display:block}.top .ico.espace{display:none}
  .srch-top{display:none}.me .lb,.out,details.mk{display:none}.moi{gap:2px}.moi .btn{padding:6px 10px;font-size:13px;min-height:34px}
  main{padding:10px 10px calc(var(--bot) + 18px + env(safe-area-inset-bottom))}
  .sg-bottom{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:50;height:calc(var(--bot) + env(safe-area-inset-bottom));padding-bottom:env(safe-area-inset-bottom);background:rgba(4,8,18,.96);border-top:1px solid var(--line);backdrop-filter:blur(10px)}
  .sg-bottom a{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;color:#8a95a8;font-size:10.5px}.sg-bottom a span{font-size:20px;line-height:1}.sg-bottom a em{font-style:normal}
  .sg-bottom a.on{color:var(--gold)}.sg-bottom a:hover{text-decoration:none}
  .bt-plus{flex:none;align-self:center;width:52px;height:40px;margin:0 6px;border-radius:14px;border:0;background:linear-gradient(180deg,#f7c948,#d4a63a);color:#141006;font-size:24px;font-weight:800;cursor:pointer}
  .row3{grid-template-columns:1fr 1fr}.row3 label:first-child{grid-column:1/-1}
  .prof{flex-direction:column;align-items:center;text-align:center}.prof .acts{justify-content:center}
  .prof2 .ban{height:120px}.prof-in{flex-direction:column;align-items:flex-start;padding:0 14px 14px}
  .narrow{margin:10px auto}
  .hero{padding:18px 10px}.piliers{grid-template-columns:repeat(2,1fr)}.hero-b{flex-direction:column}
  .chat{grid-template-columns:1fr;height:calc(100dvh - var(--top) - var(--bot) - 30px);position:relative}.chat .side{position:absolute;inset:0 30% 0 0;z-index:5;display:none;box-shadow:8px 0 30px rgba(0,0,0,.6)}.chat.side-open .side{display:block}.side-tg{display:inline-flex}
  .m{max-width:92%}.m img.pic{max-width:200px}
  .grp-list{grid-template-columns:1fr}.tbl td:nth-child(4),.tbl th:nth-child(4){display:none}
}
@media (max-width:420px){.ftabs a{padding:10px 10px;font-size:14px}.idea .ft{gap:10px}.piliers{grid-template-columns:1fr 1fr}}

/* ---------- « Mon espace » : l'œil du logo, sans nom ---------- */
.ico.espace img{height:22px;width:auto;display:block}.ico.espace.on{background:rgba(212,166,58,.16);box-shadow:inset 0 0 0 1px #3a2f0a}
.side-eye{display:flex;align-items:center;justify-content:center;gap:10px;margin:0 6px 6px;padding:10px;border-radius:14px;border:1px solid var(--line2);background:linear-gradient(160deg,#121a33,#0b1020)}
.side-eye img:first-child{height:24px;width:auto}.side-eye:hover,.side-eye.on{border-color:var(--gold2);text-decoration:none}
.eye-s{height:14px;width:auto;vertical-align:-2px}.esp-k{letter-spacing:.2em;margin:0 0 2px}
.acts-g{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:12px}.acts-g .card{margin:0}
.act{display:flex;flex-direction:column;gap:4px;color:var(--text)}.act:hover{text-decoration:none;border-color:var(--gold2)}.act-ic{font-size:26px}
@media (max-width:820px){.sg-bottom a.bt-eye{flex:1;display:flex;align-items:center;justify-content:center}.sg-bottom a.bt-eye img{height:24px;width:auto;opacity:.75}.sg-bottom a.bt-eye.on img{opacity:1;filter:drop-shadow(0 0 6px rgba(212,166,58,.6))}
  .acts-g{grid-template-columns:1fr 1fr}}

/* 08/10 (patron) : ⚙ Paramètres de la plateforme — choix du thème */
.prm{max-width:760px}.prm h2{margin-top:18px}
.th-g{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.th-c{display:flex;flex-direction:column;align-items:center;gap:4px;padding:16px 10px;border-radius:14px;border:1px solid var(--line2);background:var(--panel2);color:var(--text);cursor:pointer;font:inherit}
.th-c .th-i{font-size:26px}.th-c small{color:var(--muted);font-size:12px;text-align:center}.th-c.on{border-color:var(--gold2);box-shadow:0 0 0 1px var(--gold2) inset}.th-c.on b{color:var(--gold2)}
@media (max-width:560px){.th-g{grid-template-columns:1fr}}

/* 11/10 (patron) : textes NON sélectionnables (pas de surlignage bleu à la souris) — sauf champs de saisie, adresses de paiement, TXID */
html,body{-webkit-user-select:none;user-select:none}input,textarea,select,[contenteditable],[contenteditable] *,code,.addr,.livr,pre{-webkit-user-select:text;user-select:text}


/* 11/10 (patron) : onglets du profil (Idées, Performance, Vidéos, Lives, Groupes) → arrivée EXACTE sur la section, sous la barre du haut et la barre d'onglets */
#idees,#performance,#videos,#lives,#groupes{scroll-margin-top:calc(var(--top) + 64px)}#videos{display:block;height:1px}html{scroll-behavior:smooth}


/* 13/10 (patron) : écran d'ouverture noir, l'œil du logo cligne deux fois */
.sg-splash .sg-logo{width:min(380px,76vw);display:flex;flex-direction:column}
/* 14/10 (patron : « deux yeux, j'en veux un seul ») : le raccourci background de « .sg-logo i » écrasait background-position → le bas affichait aussi l'œil */
.sg-splash .sg-logo i{display:block;width:100%;background-image:url(/static/logo-splash.png?v=1);background-repeat:no-repeat;background-size:100% auto}
/* 15/10 (patron : « il ne cligne pas, il tourne sur lui-même ») : l'œil n'est plus écrasé (scaleY = effet de rotation) ;
   deux PAUPIÈRES noires (bord argenté) se ferment sur l'amande de l'œil puis se rouvrent, deux fois. Même animation sur la page graphiques (#sgsplash). */
.sg-splash .sg-logo .sg-eye{aspect-ratio:647/248;background-position:50% 0;position:relative}.sg-splash .sg-logo i{clip-path:inset(0 3% 0 0)}
.sg-splash .sg-logo .sg-word{aspect-ratio:647/217;background-position:50% 100%}
.sg-lids{position:absolute;left:14%;width:64%;top:0;height:100%;overflow:hidden;pointer-events:none}
.sg-lids span{position:absolute;left:0;right:0;background:#000}
.sg-lids span:first-child{top:0;height:62%;z-index:2;border-bottom:3px solid #d5dbe5;border-radius:0 0 50% 50%/0 0 22% 22%;box-shadow:0 2px 6px rgba(213,219,229,.35);transform:translateY(-112%);animation:sgLidH 2.2s ease-in-out both}
.sg-lids span:last-child{bottom:0;height:58%;border-radius:50% 50% 0 0/10% 10% 0 0;transform:translateY(104%);animation:sgLidB 2.2s ease-in-out both}
@keyframes sgLidH{0%,14%,31%,54%,71%,100%{transform:translateY(-112%)}21%,24%,61%,64%{transform:translateY(0)}}
@keyframes sgLidB{0%,14%,31%,54%,71%,100%{transform:translateY(104%)}21%,24%,61%,64%{transform:translateY(0)}}
@media (prefers-reduced-motion:reduce){.sg-lids span{animation:none!important}}
/* 15/10 nuit (patron : « l'œil du Marketplace, on le généralise partout ; à l'ouverture c'est cet œil-là, il cligne et bouge de gauche à droite »)
   — L'ŒIL SIGHT (oeil_sight.py / static/oeil-sight.js) : les deux paupières se ferment de temps en temps (parfois deux fois), l'iris glisse en douceur. */
svg[data-oeil-sight] .mk-iris-g{transition:transform .55s cubic-bezier(.3,.7,.3,1)}
.oe-ph,.oe-pb{transform:translateY(0)}
.oe-ph{animation:oeClH 7s ease-in-out infinite}.oe-pb{animation:oeClB 7s ease-in-out infinite}
@keyframes oeClH{0%,46%,51%,88%,91.5%,95%,100%{transform:translateY(0)}48.5%,89.7%,93.3%{transform:translateY(52px)}}
@keyframes oeClB{0%,46%,51%,88%,91.5%,95%,100%{transform:translateY(0)}48.5%,89.7%,93.3%{transform:translateY(-52px)}}
/* écran d'ouverture : le nouvel œil au-dessus du mot SIGHT, deux clignements pendant que le regard va à gauche puis à droite */
.sg-splash .sg-logo svg[data-oeil-sight]{display:block;width:74%;max-width:none;height:auto;margin:0 auto 4%;filter:drop-shadow(0 18px 46px rgba(212,166,58,.22))}
.sg-splash .oe-ph{animation:oeSpH 2.2s ease-in-out infinite}.sg-splash .oe-pb{animation:oeSpB 2.2s ease-in-out infinite}
@keyframes oeSpH{0%,14%,31%,54%,71%,100%{transform:translateY(0)}21%,24%,61%,64%{transform:translateY(52px)}}
@keyframes oeSpB{0%,14%,31%,54%,71%,100%{transform:translateY(0)}21%,24%,61%,64%{transform:translateY(-52px)}}
@media (prefers-reduced-motion:reduce){.oe-ph,.oe-pb{animation:none!important}}


/* ===================== 14/10 (patron : « travaille le côté RESPONSIVE du site ») — passe responsive =====================
   Mesuré au navigateur (360 → 1440 px, français + arabe) : barre du haut à 471 px sur un téléphone de 360-390 px (icônes coupées),
   bloc « moi » poussé du mauvais côté en arabe, 3 px de débordement à 1024 px, menu des langues hors écran, cibles tactiles trop petites. */
.moi{margin-left:0;margin-inline-start:auto}   /* arabe : le bloc du compte va au bout de la ligne, pas hors écran à gauche */
@media (min-width:821px) and (max-width:1200px){.me .lb{display:none}.top{gap:8px}.srch-top{min-width:0}}
@media (max-width:820px){
  .top>*{flex-shrink:0}.top .gr-top{flex-shrink:1;min-width:0}
  .top .ico.burger{width:40px;height:40px}
  .moi a.ico[href^="/profil?onglet"]{display:none}   /* 🎨 arrière-plan : reste dans « Modifier ma page » */
  .top .lgsw .lgm{position:fixed;top:calc(var(--top) + 6px);left:8px;right:8px;inset-inline-end:8px;width:auto;max-height:70vh}
  .btn.sm{min-height:36px}.xs{font-size:12px}
  input:not([type=checkbox]):not([type=radio]):not([type=range]),select,textarea{font-size:16px}   /* iPhone : pas de zoom automatique dans les champs */
}
@media (max-width:480px){
  .top{gap:4px;padding:0 6px}
  .top .brand.m{display:none}
  .top .gr-top{padding:6px 10px!important;font-size:12.5px!important;line-height:1.12;white-space:normal!important;max-width:140px;text-align:center}
  .top .ico{width:36px;height:36px;font-size:17px}.top .ico.burger{width:40px;height:40px}
  .moi{gap:0}
}
@media (max-width:370px){.top .gr-top{max-width:118px;font-size:12px!important;padding:5px 8px!important}}
/* messages « vide » (aucun signal, aucune idée…) : posés sur l'arrière-plan du membre, ils étaient illisibles → petite carte */
.empty{background:rgba(7,11,22,.86);border:1px solid var(--line);border-radius:14px;padding:22px 14px}
html[data-theme=light] .empty{background:rgba(255,255,255,.92)}
/* bouton rond de L'Œil : ne recouvre plus « Envoyer » dans la messagerie */
body:has(section.chat) #sa-b{bottom:110px}
@media (max-width:820px){
  body:has(section.chat) #sa-b{bottom:calc(var(--bot,62px) + 92px)}
  .sg .rf-b{min-height:34px;padding:5px 12px}.sg .rf-st{font-size:19px;padding:4px 3px;min-width:28px;min-height:32px}
  .sg .trd-b{padding:8px 0;font-size:12.5px}.sg .emo-btn{min-width:40px;min-height:40px}
}
/* graphiques SVG (progression, statistiques) : toujours de gauche à droite, même en arabe — sinon les libellés sortaient du dessin */
html[dir=rtl] svg{direction:ltr}

/* 14/10 : barre du haut des VISITEURS sur téléphone — « Connexion » + « Créer un compte » débordaient (480 px pour 360) : une icône 👤 à la place (les gros boutons restent dans la page) */
.top .moi .co-ic{display:none}
@media (max-width:560px){.top .moi .co-txt{display:none}.top .moi .co-ic{display:inline-flex;align-items:center;justify-content:center;width:38px;height:38px;font-size:20px;border-radius:50%;border:1px solid var(--line2,#263049)}}


/* ===================== 15/10 (patron : « réseau social en thème clair : arrière-plans grisés, contrastes catastrophiques ») =====================
   Cause : le clair était fabriqué automatiquement par theme.js (couleurs sombres → claires « au plus proche ») → boutons, menus, cartes et barres
   en gris moyen, cartes à 92 % d'opacité (fond d'écran qui transparaît), voile blanc sur les fonds. Ici, une VRAIE palette claire :
   surfaces blanches opaques, bordures visibles, textes foncés (contraste AA ≥ 4,5:1). « :root[data-theme=light] » est plus fort que les règles
   générées « html[data-theme=light] … » (sinon elles passeraient devant). Le thème sombre n'est pas touché. */
:root[data-theme=light]{--bg:#f3f5f9;--bg2:#eaeef4;--panel:#ffffff;--panel2:#f8fafc;--line:#d6dce6;--line2:#bfc8d6;--text:#0f172a;--muted:#4a5466;--gold:#7a5300;--gold2:#8a6200}
/* voiles sombres gardés en clair (étiquettes posées sur une photo, fond des fenêtres) : passés par variable, sinon theme.js les « éclaircit » */
:root{--voile-photo:rgba(2,6,23,.78);--voile-modal:rgba(15,23,42,.42)}
:root[data-theme=light] body.sg{background:var(--bg)}
:root[data-theme=light] .lnk{color:#1d4ed8}
/* messages « vide » posés hors carte (profil : Aucun groupe, Pas encore d'idée…) : pastille pleine, dans les deux thèmes */
:is(.feed,.grp-list,.vgrid,.sg-2,.acts-g)>p.mut{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:12px 14px;margin:0}
.sg-foot span{color:#8a95a8}
:root[data-theme=light] .adm{background:#f7c948;color:#111}
:root[data-theme=light] .mut{color:var(--muted)}:root[data-theme=light] h3{color:#4a5466}
/* coquille : menu de gauche, barre du haut, barre du bas, tiroirs */
:root[data-theme=light] .sg-side{background:#fff;border-right-color:var(--line)}
:root[data-theme=light] .sg-nav a{color:#273042}:root[data-theme=light] .sg-nav a:hover{background:#eef2f8;color:#0f172a}
:root[data-theme=light] .sg-nav a.on{background:linear-gradient(90deg,rgba(212,166,58,.24),rgba(212,166,58,.06));color:#6b4800;box-shadow:inset 3px 0 0 #c9951c}
:root[data-theme=light] .sg-foot,:root[data-theme=light] .sg-foot a,:root[data-theme=light] .sg-foot span{color:#4a5466}
:root[data-theme=light] .top{background:rgba(255,255,255,.97);border-bottom-color:var(--line)}
:root[data-theme=light] .srch-top{background:#fff;border-color:var(--line2)}:root[data-theme=light] .srch-top input{color:#0f172a}
:root[data-theme=light] .ico{color:#1e293b}:root[data-theme=light] .ico:hover{background:#eef2f8}
:root[data-theme=light] .me{color:#0f172a}:root[data-theme=light] .out .lnk{color:#4a5466}
:root[data-theme=light] .mk-m{background:#fff;border-color:var(--line2);box-shadow:0 14px 40px rgba(15,23,42,.18)}
:root[data-theme=light] .mk-m a,:root[data-theme=light] .sh-b a{color:#0f172a}:root[data-theme=light] .mk-m a:hover,:root[data-theme=light] .sh-b a:hover{background:#eef2f8}
:root[data-theme=light] .side-eye{background:#fff;border-color:var(--line2)}
:root[data-theme=light] .sh-b{background:#fff}:root[data-theme=light] .sg-sheet,:root[data-theme=light] .sg-veil{background:var(--voile-modal)}
:root[data-theme=light] .sg-bottom{background:rgba(255,255,255,.98);border-top-color:var(--line)}
:root[data-theme=light] .sg-bottom a{color:#4a5466}:root[data-theme=light] .sg-bottom a.on{color:#6b4800}
:root[data-theme=light] .ptabs{background:rgba(255,255,255,.97)}
/* cartes : blanches et OPAQUES (plus de fond d'écran qui transparaît) */
:root[data-theme=light] .card{background:#fff;border-color:#d6dce6;box-shadow:0 1px 3px rgba(15,23,42,.07)}
:root[data-theme=light] .rc.cta{background:linear-gradient(160deg,#fff7e0,#fff)}:root[data-theme=light] .rc.cta b{color:#7a5300}
:root[data-theme=light] .rc-row{color:#0f172a}:root[data-theme=light] .rc-row:hover,:root[data-theme=light] .nts .nt:hover{background:#f1f4f9}
:root[data-theme=light] .empty{background:#fff;border-color:var(--line)}
:root[data-theme=light] .hero{background:radial-gradient(800px 380px at 50% 0,#fff4d6 0%,rgba(255,255,255,0) 70%),linear-gradient(180deg,#fff,#f7f9fc);border-color:var(--line)}
:root[data-theme=light] .hero-kick,:root[data-theme=light] .hero-s,:root[data-theme=light] .hero-f{color:#4a5466}
:root[data-theme=light] .pil{border-top-color:#e6d3a0}
/* boutons, champs, onglets : blancs avec bordure nette (ils étaient gris) */
:root[data-theme=light] .btn:not(.pri):not(.on):not(.demo){background:#fff;border-color:#b9c3d3;color:#1e293b}
:root[data-theme=light] .btn:not(.pri):not(.on):not(.demo):hover{background:#f4f7fb;border-color:#7d889c}
:root[data-theme=light] .btn.pri{color:#1a1305}:root[data-theme=light] .btn.dan:not(.pri){color:#b4232f;border-color:#e3a9b1}
:root[data-theme=light] .btn.on{background:#fde8ec;border-color:#e11d48;color:#9f1239}
:root[data-theme=light] :is(input,textarea,select):not([type=checkbox]):not([type=radio]):not([type=range]){background:#fff;color:#0f172a;border-color:#b9c3d3}
:root[data-theme=light] :is(input,textarea)::placeholder{color:#6b7385;opacity:1}
:root[data-theme=light] fieldset.chk label{color:#0f172a}
:root[data-theme=light] .tabs a:not(.on){background:#fff;color:#334155;border-color:#cdd4e0}:root[data-theme=light] .tabs a:not(.on):hover{color:#0f172a;border-color:#8a94a8}
:root[data-theme=light] .ftabs a:not(.on){background:none}:root[data-theme=light] .ftabs a.on{color:#6b4800;border-bottom-color:#c9951c}
/* publications, profils, groupes, puces */
:root[data-theme=light] .who,:root[data-theme=light] .ttl{color:#0f172a}:root[data-theme=light] .ext,:root[data-theme=light] .soon ul{color:#334155}
:root[data-theme=light] .idea .ft{color:#4a5466}
:root[data-theme=light] .sym{background:#fff7e0;border-color:#e8cf8a;color:#6b4800}
:root[data-theme=light] .sens.achat{background:#e2f6ee;color:#05714f}:root[data-theme=light] .sens.vente{background:#fde8ec;color:#b4232f}:root[data-theme=light] .sens.neutre{background:#eef1f6;color:#475569}
:root[data-theme=light] .gtag,:root[data-theme=light] .chip.m{background:#eef3ff;border-color:#c5d4f4;color:#1e40af}
:root[data-theme=light] .chip{background:#fff7e0;border-color:#e8cf8a;color:#6b4800}
:root[data-theme=light] .av.ph{background:#dfe6f2;color:#1e293b;border-color:#c3ccdb}
:root[data-theme=light] .grp-ic{background:linear-gradient(160deg,#f7f9fc,#edf1f7);border-color:#cdd4e0}
:root[data-theme=light] .prof2 .ban:not([style]){background:linear-gradient(120deg,#e8eefb,#dfe7f8 45%,#f6ead0)}
:root[data-theme=light] .stats b{color:#0f172a}
:root[data-theme=light] .tbl th,:root[data-theme=light] .tbl td,:root[data-theme=light] .com,:root[data-theme=light] .nts .nt{border-bottom-color:#e1e6ee}
:root[data-theme=light] .nts .nt{color:#0f172a}:root[data-theme=light] .nts .nt.new{background:#fff8e6}
:root[data-theme=light] .rk{color:#7a5300}:root[data-theme=light] .num,:root[data-theme=light] .rc-sc{color:#05714f}
:root[data-theme=light] code{background:#eef1f6;color:#0f172a}
:root[data-theme=light] .err{background:#fde8ec;color:#9f1239;border-color:#f0b3bd}:root[data-theme=light] .ok{background:#e2f6ee;color:#05714f;border-color:#a6dbc3}
:root[data-theme=light] #toast{background:#fff;color:#0f172a;box-shadow:0 8px 24px rgba(15,23,42,.18)}
:root[data-theme=light] .th-c{background:#fff}:root[data-theme=light] .th-c.on b{color:#7a5300}
/* messagerie */
:root[data-theme=light] .chat{background:#fff}:root[data-theme=light] .chat .side{background:#f7f9fc}
:root[data-theme=light] .chat .side a{color:#0f172a}:root[data-theme=light] .chat .side a.on{background:#fff4d6;color:#6b4800}:root[data-theme=light] .chat .side a:hover{background:#eef2f8}
:root[data-theme=light] .m .bu{background:#f1f4f9;border-color:#d6dce6;color:#0f172a}:root[data-theme=light] .m.moi .bu{background:#fff4d6;border-color:#e8cf8a}
:root[data-theme=light] .lp{background:#f7f9fc;color:#0f172a}
/* Mes contenus / vidéos : tuiles d'action teintées (au lieu de gris), sur-titres dorés lisibles */
:root[data-theme=light] .vk-kick{color:#7a5300}:root[data-theme=light] .mc-hero .vk-sub a{color:#1d4ed8}
:root[data-theme=light] .mc-stats span{background:#fff;border-color:#d6dce6;color:#4a5466}:root[data-theme=light] .mc-stats b{color:#0f172a}
:root[data-theme=light] :is(.mc-act.photo,.mc-act.video,.mc-act.ana,.mc-act.studio,.mc-act.audio,.mc-act.stat){background:#fff;color:#0f172a}
:root[data-theme=light] .mc-act.photo{background:linear-gradient(135deg,#fff6dc,#fff)}:root[data-theme=light] .mc-act.video{background:linear-gradient(135deg,#e8f1ff,#fff)}
:root[data-theme=light] .mc-act.ana{background:linear-gradient(135deg,#f3e8ff,#fff)}:root[data-theme=light] .mc-act.studio{background:linear-gradient(135deg,#ffe8e8,#fff)}
:root[data-theme=light] .mc-act.audio{background:linear-gradient(135deg,#e2f5fd,#fff)}:root[data-theme=light] .mc-act.stat{background:linear-gradient(135deg,#e3f8ec,#fff)}
:root[data-theme=light] .mc-act span{color:#334155}
/* conteneurs des vidéos / studio / bibliothèque : blancs OPAQUES (ils étaient à 95 %, le fond d'écran transparaissait) */
:root[data-theme=light] :is(.vtk,.vk-bar,.st-tabs,.mc-nav){background:#fff}:root[data-theme=light] .bb-dossiers .chip{background:#fff}
/* étiquettes et dégradés posés SUR une image ou une vidéo (miniatures, statut, durée, note) : restent sombres en clair, texte clair
   (passés par variables : theme.js « éclaircissait » ces voiles → texte blanc sur voile blanc, illisible) */
:root{--txt-photo:#f1f5ff;--txt-photo-rouge:#ffb4b4}
:root[data-theme=light] :is(.vtile-sc,.mc-st,.vtile-d,.fx-plus,.vp-x,.pl-nav,.fx-dur,.fx-son,.fx-zoom,.fx-vt-d){background:var(--voile-photo)}
:root[data-theme=light] .mc-tacts button:not(.sure):not(:hover){background:var(--voile-photo)}
:root[data-theme=light] :is(.vtile-b,.fx-vt-g){background:linear-gradient(180deg,transparent,var(--voile-photo))}
:root[data-theme=light] :is(.mc-st,.vtile,.vtile-d,.fx-vt){color:var(--txt-photo)}:root[data-theme=light] :is(.st-refuse .mc-st,.mc-st.st-refuse){color:var(--txt-photo-rouge)}
:root[data-theme=light] .vtile-ph{background:linear-gradient(135deg,#e9eef7,#dfe6f2)}

/* 19/10 : barre du haut sur téléphone — l'avatar sortait de l'écran (débordement de 20 px sur toutes les pages) : bouton graphique réduit à son icône, bouton de thème masqué (réglable dans Paramètres) */
@media (max-width:520px){.top .gr-top{padding:8px 10px!important}.top .gr-top .gr-l{display:none}.top .th-btn{display:none}}