/* ===== styles principaux (mo-inline-style) ===== */
:root{
  /* ===== IDENTITÉ VISUELLE v3 =====
     Base quasi noire pour faire ressortir la lumière. Doré très intense en
     couleur principale. Le rose/rouge est retiré des accents généraux et
     remplacé par un bleu foncé vif. Un rouge écarlate est réservé
     UNIQUEMENT au nom du site (--scarlet), pour qu'il tape à l'œil. */
  --ink:#07070F;--ink2:#020204;--card:#12142E;--line:#2A3170;
  --paper:#F7F5FF;--seal:#1E4FE8;--gold:#FFC300;--echo:#00E5FF;--glow:#3355FF;
  --violet:#2A3170;--scarlet:#FF1330;--card-glass:rgba(18,20,46,.65);
  --glow-soft:0 0 28px rgba(51,85,255,.45);--glow-echo:0 0 26px rgba(0,229,255,.35);
  --glow-gold:0 0 30px rgba(255,195,0,.5);
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;font-size:62.5%}
@keyframes bgPan{0%{background-position:0% 0%,100% 0%,0% 100%,0 0}50%{background-position:8% 4%,92% 8%,6% 94%,0 0}100%{background-position:0% 0%,100% 0%,0% 100%,0 0}}
body{font-family:'Manrope',sans-serif;background:var(--ink);color:var(--paper);min-height:100vh;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility;
  background-image:
    radial-gradient(ellipse 1200px 760px at 12% 0%,rgba(108,92,231,.32) 0%,transparent 58%),
    radial-gradient(ellipse 900px 700px at 92% 6%,rgba(255,195,0,.28) 0%,transparent 55%),
    radial-gradient(ellipse 1050px 780px at 15% 100%,rgba(30,79,232,.28) 0%,transparent 55%),
    radial-gradient(rgba(241,239,251,.05) 1px,transparent 1px);
  background-size:auto,auto,auto,14px 14px;
  background-attachment:fixed,fixed,fixed,scroll;
  background-repeat:no-repeat,no-repeat,no-repeat,repeat;
  animation:bgPan 26s ease-in-out infinite}

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

#mo-sky-canvas{position:fixed;inset:0;z-index:-1;pointer-events:none}
#mo-energy-canvas{position:fixed;inset:0;z-index:-1;pointer-events:none}
.hope-title{font-family:'Cormorant Garamond',serif;font-weight:600;color:var(--gold);
  position:relative;display:inline-block}
.hope-title::after{content:attr(data-txt);position:absolute;inset:0;color:var(--gold);
  filter:blur(18px);opacity:.55;animation:hopeGlow 4s ease-in-out infinite;pointer-events:none}
@keyframes hopeGlow{0%,100%{opacity:.4;filter:blur(16px)}50%{opacity:.75;filter:blur(24px)}}
body.hide-decor #mo-sky-canvas,body.hide-decor #mo-energy-canvas{display:none}
/* ===== MODE NUIT =====
   Assombrit et réduit la luminosité du contenu (texte, cartes, header)
   pour économiser les yeux la nuit. Réglage accessible depuis la page
   Profil, mémorisé d'une visite à l'autre. */
body.night-mode header,body.night-mode .page{filter:brightness(.6) saturate(.75)}
body.night-mode{background:#000}
::-webkit-scrollbar{width:8px}
::-webkit-scrollbar-track{background:var(--ink)}
::-webkit-scrollbar-thumb{background:var(--line);border:2px solid var(--ink)}
:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
.fd{font-family:'Rajdhani',sans-serif;letter-spacing:.04em}
.fm{font-family:'JetBrains Mono',monospace}
.ey{font-family:'JetBrains Mono',monospace;font-size:.64rem;text-transform:uppercase;letter-spacing:.14em}
.dim{color:rgba(236,234,245,.55)}
.tseal{color:var(--seal)}.tgold{color:var(--gold)}.techo{color:var(--echo)}
.txs{font-size:.74rem}.tsm{font-size:.875rem}

/* BOUTONS */
.btn{font-family:'Rajdhani',sans-serif;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  border:none;cursor:pointer;display:inline-flex;align-items:center;gap:8px;
  padding:12px 24px;font-size:1rem;position:relative;overflow:hidden;transition:opacity .2s;
  clip-path:polygon(10px 0,100% 0,100% calc(100% - 10px),calc(100% - 10px) 100%,0 100%,0 10px)}
.btn:disabled{opacity:.4;cursor:not-allowed}
.btn::after{content:'';position:absolute;top:0;left:-60%;width:35%;height:100%;pointer-events:none;
  background:linear-gradient(115deg,transparent 0%,rgba(255,255,255,.4) 50%,transparent 100%);
  transform:skewX(-20deg);transition:left .55s cubic-bezier(.16,1,.3,1)}
.btn:hover:not(:disabled)::after{left:130%}
.btn:hover:not(:disabled){opacity:.9}
.btn-s{background:var(--seal);color:var(--paper);box-shadow:0 0 18px rgba(30,79,232,.4)}
.btn-g{background:var(--gold);color:#0A0A12;box-shadow:0 0 18px rgba(255,195,0,.35)}
.btn-o{background:rgba(108,92,231,.08);color:var(--paper);border:1px solid var(--line);backdrop-filter:blur(6px)}
.btnxs{padding:4px 10px;font-size:11px;min-height:auto}
.btnxs.active{background:var(--gold,#C6FF3D);color:#0A0A12;border-color:transparent}
.btn-fb{background:rgba(24,119,242,.12);color:#1877F2;border:1px solid rgba(24,119,242,.3)}
.btn-sm{padding:8px 14px;font-size:.8rem}
.btn-lg{padding:16px 32px;font-size:1.1rem}
.btn-w{width:100%;justify-content:center}

/* CARD */
.card{background:linear-gradient(160deg,rgba(21,38,87,.75),rgba(13,22,56,.75));
  border:1px solid var(--line);padding:24px;position:relative;backdrop-filter:blur(10px);
  box-shadow:0 10px 34px rgba(4,8,28,.45),inset 0 1px 0 rgba(255,255,255,.04);
  transition:box-shadow .25s ease,transform .25s ease;
  clip-path:polygon(16px 0,100% 0,100% calc(100% - 16px),calc(100% - 16px) 100%,0 100%,0 16px)}
.card:hover{box-shadow:0 14px 40px rgba(255,195,0,.25),inset 0 1px 0 rgba(255,255,255,.06)}
.card::before{content:'';position:absolute;top:0;left:0;width:22px;height:22px;
  background:linear-gradient(135deg,var(--gold) 50%,transparent 50.5%)}
.card::after{content:'';position:absolute;bottom:0;right:0;width:22px;height:22px;
  background:linear-gradient(-45deg,var(--gold) 50%,transparent 50.5%)}
.card.s::before{background:linear-gradient(135deg,var(--seal) 50%,transparent 50.5%)}
.card.s::after{background:linear-gradient(-45deg,var(--seal) 50%,transparent 50.5%)}
.card.np{padding:0}

/* PILLS */
.pill{display:inline-flex;align-items:center;gap:4px;border:1px solid;background:transparent;
  padding:2px 9px;font-family:'JetBrains Mono',monospace;font-size:.6rem;
  text-transform:uppercase;letter-spacing:.1em}
.ps{border-color:rgba(30,79,232,.4);color:var(--seal);background:rgba(30,79,232,.08)}
.pg{border-color:rgba(255,195,0,.4);color:var(--gold);background:rgba(255,195,0,.08)}
.pe{border-color:rgba(77,232,255,.4);color:var(--echo);background:rgba(77,232,255,.08)}
.pn{border-color:var(--line);color:rgba(236,234,245,.6);background:transparent}

/* NOTIFICATION BADGE */
.ndot{display:none;align-items:center;justify-content:center;min-width:16px;height:16px;
  padding:0 4px;margin-left:5px;border-radius:8px;background:var(--seal);color:#fff;
  font-family:'JetBrains Mono',monospace;font-size:.6rem;font-weight:700;line-height:1;vertical-align:middle}

.btn-icon-flag{background:none;border:none;cursor:pointer;opacity:.4;font-size:.85rem;padding:0 2px;flex-shrink:0}
.btn-icon-flag:hover{opacity:1}

/* BARRE DE PROGRESSION (rang / niveau) */
/* HIÉRARCHIE DES POINTS — BRONZE (bas) À DIVIN (haut) */
.rank-ladder{display:flex;flex-direction:column;border:1px solid var(--line);border-radius:8px;overflow:hidden}
.rank-tier{display:flex;align-items:center;gap:12px;padding:11px 14px;
  background:rgba(236,234,245,.03);border-bottom:1px solid var(--line);position:relative}
.rank-tier:last-child{border-bottom:none}
.rank-tier-ic{font-size:1.15rem;width:26px;text-align:center;flex-shrink:0}
.rank-tier-name{flex:1;font-family:'Rajdhani',sans-serif;font-weight:700;letter-spacing:.05em;
  text-transform:uppercase;font-size:.86rem}
.rank-tier-val{font-family:'JetBrains Mono',monospace;font-size:.95rem;font-weight:700}
.rank-tier-bar{position:absolute;left:0;top:0;bottom:0;width:4px}
/* teinte + intensité croissantes du bronze au divin */
.rt-bronze{--tc:#CD7F32}
.rt-argent{--tc:#C7CEDA}
.rt-gold{--tc:#C6FF3D}
.rt-mercure{--tc:#5EE6FF}
.rt-diamant{--tc:#7FB3FF}
.rt-star{--tc:#FFD34D}
.rt-divin{--tc:#FF3D6E}
.rank-tier .rank-tier-bar{background:var(--tc)}
.rank-tier .rank-tier-val{color:var(--tc)}
.rank-tier.rt-divin{background:linear-gradient(90deg,rgba(30,79,232,.12),transparent);
  box-shadow:inset 0 0 20px rgba(30,79,232,.15)}
.rank-tier.rt-star{background:linear-gradient(90deg,rgba(255,211,77,.08),transparent)}
.rank-tier.rt-diamant{background:linear-gradient(90deg,rgba(127,179,255,.08),transparent)}
.rank-badge-hd{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}
.rank-badge-hd .fd{font-size:1.05rem}

.pbar-track{width:100%;height:18px;background:var(--ink);border:1px solid var(--line);overflow:hidden;position:relative;border-radius:9px}
.pbar-fill{height:100%;background:linear-gradient(90deg,var(--seal),var(--gold));transition:width .6s cubic-bezier(.16,1,.3,1);
  border-radius:9px;box-shadow:0 0 12px rgba(255,195,0,.55);position:relative;min-width:18px}
.pbar-fill::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,rgba(255,255,255,.25),transparent 60%)}
.pbar-labels{display:flex;justify-content:space-between;margin-top:8px}
.pbar-labels .fd{font-size:.8rem}

/* RECHERCHE GLOBALE */
.search-wrap{position:relative;flex-shrink:1;min-width:0}
.search-in{width:200px;max-width:100%;padding:8px 12px;font-size:.8rem;background:rgba(236,234,245,.05);border:1px solid var(--line)}
.search-in:focus{width:260px;border-color:var(--gold)}
.search-res{position:absolute;top:calc(100% + 6px);right:0;width:320px;max-height:400px;overflow-y:auto;
  background:var(--card);border:1px solid var(--line);z-index:200;display:none}
.search-res.open{display:block}
.search-item{display:block;width:100%;text-align:left;background:none;border:none;border-bottom:1px solid var(--line);
  color:var(--paper);padding:10px 14px;cursor:pointer;font-family:'Manrope',sans-serif;font-size:.82rem}
.search-item:hover{background:rgba(255,195,0,.08)}
.search-item:last-child{border-bottom:none}

/* CLOCHE / NOTIFICATIONS */
.bell-wrap{position:relative;flex-shrink:0}
.bell-btn{background:none;border:none;color:var(--paper);cursor:pointer;font-size:1.05rem;padding:6px;position:relative;display:flex;align-items:center}
.bell-btn .ndot{position:absolute;top:0;right:0}
.notif-panel{position:absolute;top:calc(100% + 6px);right:0;width:340px;max-height:420px;overflow-y:auto;
  background:var(--card);border:1px solid var(--line);z-index:200;display:none}
.notif-panel.open{display:block}
.notif-panel-hd{display:flex;align-items:center;justify-content:space-between;padding:10px 14px;border-bottom:1px solid var(--line);position:sticky;top:0;background:var(--card)}
.notif-item{display:block;width:100%;text-align:left;background:none;border:none;border-bottom:1px solid var(--line);
  color:var(--paper);padding:10px 14px;cursor:pointer;font-family:'Manrope',sans-serif;font-size:.8rem;line-height:1.4}
.notif-item:hover{background:rgba(255,195,0,.08)}
.notif-item:last-child{border-bottom:none}
.notif-item.unread{background:rgba(30,79,232,.06);border-left:2px solid var(--seal)}

/* AUTOCOMPLETE @MENTION */
.mention-box{position:absolute;z-index:250;width:260px;max-height:220px;overflow-y:auto;
  background:var(--card);border:1px solid var(--line);display:none;box-shadow:0 8px 20px rgba(0,0,0,.4)}
.mention-box.open{display:block}
.mention-item{display:flex;align-items:center;gap:8px;width:100%;text-align:left;background:none;border:none;
  border-bottom:1px solid var(--line);color:var(--paper);padding:8px 12px;cursor:pointer;font-size:.82rem}
.mention-item:hover{background:rgba(255,195,0,.08)}
.mention-item:last-child{border-bottom:none}
.mention-av{width:22px;height:22px;border-radius:50%;background:var(--line);object-fit:cover;flex-shrink:0}

/* FIL D'ACTUALITÉ */
.actu-item{display:flex;gap:14px;padding:16px 0;border-bottom:1px solid var(--line)}
.actu-item:last-child{border-bottom:none}
.actu-ic{width:38px;height:38px;flex-shrink:0;border:1px solid var(--line);display:flex;align-items:center;justify-content:center;font-size:1.05rem;background:var(--ink)}

/* MODULE FICTIONS */
.fic-cover{width:100%;aspect-ratio:3/4;background:linear-gradient(155deg,var(--card),var(--ink));border:1px solid var(--line);
  display:flex;align-items:flex-end;justify-content:center;text-align:center;overflow:hidden;position:relative}
.fic-cover img{width:100%;height:100%;object-fit:cover;position:absolute;inset:0;
  filter:url(#mo-sharpen) saturate(1.45) contrast(1.06)}
.fic-cover-title{font-family:'Rajdhani',sans-serif;letter-spacing:.03em;font-size:1.15rem;line-height:1.2;
  position:relative;z-index:1;width:100%;padding:26px 12px 12px;color:#fff;
  background:linear-gradient(to top,rgba(0,0,0,.92) 0%,rgba(0,0,0,.65) 45%,transparent 100%);
  text-shadow:0 2px 6px rgba(0,0,0,.8)}
.fic-cover.noimg .fic-cover-title{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  padding:14px;background:none;text-shadow:none;font-size:1.3rem}
/* Liste compacte des fictions (page Fictions) : petite vignette + résumé,
   pour ne pas charger d'images en grande définition sur cette page. */
.fic-row{display:flex;gap:14px;padding:14px;cursor:pointer;border-bottom:1px solid var(--line);align-items:flex-start}
.fic-row:hover{background:rgba(51,85,255,.06)}
.fic-row-cover{width:64px;height:88px;flex-shrink:0;border-radius:4px;overflow:hidden;position:relative;
  background:linear-gradient(155deg,var(--card),var(--ink));border:1px solid var(--line)}
.fic-row-cover img{width:100%;height:100%;object-fit:cover;
  filter:url(#mo-sharpen) saturate(1.45) contrast(1.06)}
.fic-row-body{flex:1;min-width:0}
.fic-row-synopsis{font-size:.82rem;color:rgba(247,245,255,.6);line-height:1.5;margin-top:4px;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.fic-card{cursor:pointer;transition:transform .2s}
.fic-card:hover{transform:translateY(-3px)}
.fic-meta{display:flex;gap:10px;flex-wrap:wrap;margin-top:8px}
.chap-row{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:12px 14px;
  border:1px solid var(--line);background:var(--card);cursor:pointer}
.chap-row:hover{border-color:var(--gold)}
.chap-row-main{display:flex;align-items:center;gap:10px;min-width:0}
.chap-row-thumb{width:44px;height:44px;object-fit:cover;border-radius:6px;flex-shrink:0;
  border:1px solid var(--line);filter:url(#mo-sharpen) saturate(1.45) contrast(1.06)}
.reader-text{font-family:'Cormorant Garamond',serif;font-size:1.35rem;font-weight:400;
  line-height:1.95;letter-spacing:.01em;white-space:pre-wrap;max-width:720px;margin:0 auto;
  color:#fdfcff;background:rgba(3,4,10,.86);padding:36px 30px;border-radius:16px;
  border:1px solid rgba(255,195,0,.16);
  box-shadow:0 12px 40px rgba(0,0,0,.55),0 0 0 1px rgba(255,255,255,.03) inset,0 0 60px rgba(30,79,232,.08) inset;
  text-shadow:0 1px 3px rgba(0,0,0,.6);position:relative}
.reader-text::before{content:'';position:absolute;top:0;left:24px;right:24px;height:1px;
  background:linear-gradient(90deg,transparent,rgba(255,195,0,.4),transparent)}
.reader-text p{margin-bottom:1.35em}
.reader-text > p:first-of-type::first-letter,.reader-text::first-letter{
  font-family:'Cormorant Garamond',serif;font-weight:600;font-size:3.4em;float:left;
  line-height:.82;padding:.05em .08em 0 0;color:var(--gold);
  text-shadow:0 0 18px rgba(255,195,0,.35)}
@media(max-width:640px){.reader-text{font-size:1.18rem;padding:26px 18px;line-height:1.85}
  .reader-text::first-letter{font-size:2.7em}}
.resume-text{color:#fff;line-height:1.8;font-family:'Cormorant Garamond',serif;font-size:1.18rem;
  letter-spacing:.01em;text-shadow:0 1px 3px rgba(0,0,0,.6)}
.fic-info-block{background:rgba(3,4,10,.82);border:1px solid rgba(255,195,0,.14);border-radius:16px;
  padding:22px 24px 26px;box-shadow:0 12px 36px rgba(0,0,0,.5),0 0 0 1px rgba(255,255,255,.03) inset;position:relative}
.fic-info-block::before{content:'';position:absolute;top:0;left:20px;right:20px;height:1px;
  background:linear-gradient(90deg,transparent,rgba(255,195,0,.35),transparent)}

/* INPUTS */
input,textarea,select{
  width:100%;background:var(--ink);border:1px solid var(--line);color:var(--paper);
  padding:11px 15px;font-family:'Manrope',sans-serif;font-size:.95rem;
  outline:none;transition:border-color .2s;display:block;-webkit-appearance:none}
input:focus,textarea:focus,select:focus{border-color:var(--seal)}
input.gf:focus,textarea.gf:focus{border-color:var(--gold)}
.lbl{font-family:'JetBrains Mono',monospace;font-size:.63rem;text-transform:uppercase;
  letter-spacing:.1em;color:rgba(236,234,245,.5);display:block;margin-top:14px;margin-bottom:5px}
.img-up-wrap input[type=file]{padding:9px 12px;font-size:.82rem;cursor:pointer;background:rgba(236,234,245,.05)}

/* HEADER */
header{position:sticky;top:0;z-index:100;background:linear-gradient(180deg,rgba(2,2,4,.94),rgba(7,7,15,.86));
  backdrop-filter:blur(14px) saturate(1.3);border-bottom:2px solid rgba(255,195,0,.55);
  box-shadow:0 8px 30px rgba(255,195,0,.15)}
.hdr{max-width:1200px;margin:0 auto;padding:12px 24px;
  display:flex;align-items:center;justify-content:space-between;gap:16px}
.logo{font-family:'Rajdhani',sans-serif;font-size:1.9rem;font-weight:700;cursor:pointer;flex-shrink:0;letter-spacing:.02em}
.logo span{color:var(--scarlet);text-shadow:0 0 18px rgba(255,19,48,.6)}
nav{display:flex;gap:22px;align-items:center}
.nl{font-family:'Rajdhani',sans-serif;font-size:.82rem;text-transform:uppercase;
  letter-spacing:.08em;color:rgba(236,234,245,.65);cursor:pointer;border:none;
  background:none;transition:color .2s;padding:4px 0}
.nl:hover{color:var(--gold)}
.na{display:flex;gap:10px;align-items:center;flex-shrink:0}
.burger{display:none;background:none;border:none;cursor:pointer;flex-direction:column;gap:5px;padding:6px}
.burger span{display:block;width:22px;height:2px;background:var(--paper);transition:transform .25s,opacity .25s}
.burger.open span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.burger.open span:nth-child(2){opacity:0}
.burger.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
.mm{display:none;flex-direction:column;background:var(--ink);border-top:1px solid var(--line)}
.mm.open{display:flex}
.mml{font-family:'Rajdhani',sans-serif;font-size:1rem;text-transform:uppercase;
  letter-spacing:.06em;color:var(--paper);padding:11px 24px;
  border-bottom:1px solid rgba(38,38,47,.5);cursor:pointer;background:none;
  border-left:none;border-right:none;border-top:none;text-align:left;text-decoration:none}
.mml:hover{color:var(--gold)}
.mma{padding:16px 24px;display:flex;flex-direction:column;gap:10px}

/* GROUPES DE MENU (Divertissement / Administration / Tiering) */
.nl-group{position:relative;list-style:none}
.nl-group summary{font-family:'Rajdhani',sans-serif;font-size:.82rem;text-transform:uppercase;
  letter-spacing:.08em;color:rgba(236,234,245,.65);cursor:pointer;padding:4px 0;
  list-style:none;display:flex;align-items:center;gap:4px}
.nl-group summary::-webkit-details-marker{display:none}
.nl-group summary:hover{color:var(--gold)}
.nl-group summary::after{content:'▾';font-size:.6rem;margin-left:2px}
.nl-group[open] summary::after{content:'▴'}
.nl-group .nl-sub{position:absolute;top:100%;left:0;background:var(--ink);border:1px solid var(--line);
  min-width:200px;display:flex;flex-direction:column;z-index:50;padding:6px 0;box-shadow:0 8px 24px rgba(0,0,0,.5)}
.nl-group .nl-sub .nl{padding:8px 16px;white-space:nowrap}
.nl-subgroup{border-top:1px solid rgba(38,38,47,.5);border-bottom:1px solid rgba(38,38,47,.5);margin:4px 0;padding:4px 0}
.nl-subgroup-title{font-family:'JetBrains Mono',monospace;font-size:.6rem;text-transform:uppercase;
  letter-spacing:.08em;color:rgba(236,234,245,.4);padding:6px 16px 2px}

.mm-group summary{font-family:'Rajdhani',sans-serif;font-size:1rem;text-transform:uppercase;
  letter-spacing:.06em;color:var(--paper);padding:11px 24px;
  border-bottom:1px solid rgba(38,38,47,.5);cursor:pointer;list-style:none;
  display:flex;align-items:center;justify-content:space-between}
.mm-group summary::-webkit-details-marker{display:none}
.mm-group summary:hover{color:var(--gold)}
.mm-group summary::after{content:'▾';font-size:.7rem}
.mm-group[open] summary::after{content:'▴'}
.mm-group .mml{padding-left:44px}
.mm-subgroup-title{font-family:'JetBrains Mono',monospace;font-size:.6rem;text-transform:uppercase;
  letter-spacing:.08em;color:rgba(236,234,245,.4);padding:8px 24px 2px 44px;background:rgba(0,0,0,.2)}

/* PAGES */
.page{display:none}
.page.active{display:block;animation:fu .3s ease both;position:relative;z-index:1}
@keyframes fu{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}

/* LAYOUT */
.sec{max-width:1200px;margin:0 auto;padding:56px 24px;position:relative}
.sec:not(:first-child)::before{content:'';position:absolute;top:0;left:24px;right:24px;height:1px;
  background:linear-gradient(90deg,transparent,rgba(108,92,231,.35) 20%,rgba(77,232,255,.35) 50%,rgba(30,79,232,.35) 80%,transparent)}
.page.active .sec{animation:secIn .5s ease both}
@keyframes secIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}
.sec-md{max-width:820px;margin:0 auto;padding:56px 24px}
.sec-sm{max-width:540px;margin:0 auto;padding:56px 24px;min-height:80vh;display:flex;align-items:center}
.sec-sm>div{width:100%}
.hero{position:relative;overflow:hidden;border-bottom:1px solid var(--line)}
.hero::before{content:'';position:absolute;inset:0;
  background:
    radial-gradient(ellipse 900px 500px at 82% -10%,rgba(30,79,232,.22) 0%,transparent 60%),
    radial-gradient(ellipse 700px 500px at 8% 110%,rgba(77,232,255,.14) 0%,transparent 60%);
  pointer-events:none}
.hero::after{content:'';position:absolute;inset:0;pointer-events:none;opacity:.5;
  background-image:radial-gradient(rgba(236,234,245,.09) 1px,transparent 1px);
  background-size:14px 14px;
  -webkit-mask-image:linear-gradient(115deg,transparent 30%,#000 55%,transparent 78%);
          mask-image:linear-gradient(115deg,transparent 30%,#000 55%,transparent 78%)}
.speedlines{position:absolute;top:0;right:0;width:52%;height:100%;pointer-events:none;opacity:.5;
  background:repeating-linear-gradient(-64deg,rgba(30,79,232,.16) 0 2px,transparent 2px 26px);
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 45%);
          mask-image:linear-gradient(90deg,transparent,#000 45%)}
.hero-in{max-width:1200px;margin:0 auto;padding:80px 24px;position:relative}
.hero-stamp{position:absolute;top:26px;right:24px;width:120px;height:78px;
  clip-path:polygon(12px 0,100% 0,100% 100%,0 100%,0 12px);
  border:1px solid var(--seal);background:rgba(20,20,31,.7);backdrop-filter:blur(4px);
  display:flex;align-items:center;justify-content:center;text-align:center;
  color:var(--seal);font-family:'JetBrains Mono',monospace;letter-spacing:.1em;
  font-size:.62rem;text-transform:uppercase;line-height:1.5;padding:6px}
@media(max-width:860px){.hero-stamp{display:none}}
.hero-rise{opacity:0;transform:translateY(16px);animation:hrise .7s cubic-bezier(.16,1,.3,1) both}
.hero-rise:nth-child(1){animation-delay:.05s}.hero-rise:nth-child(2){animation-delay:.16s}
.hero-rise:nth-child(3){animation-delay:.27s}.hero-rise:nth-child(4){animation-delay:.38s}
@keyframes hrise{to{opacity:1;transform:translateY(0)}}
@media(prefers-reduced-motion:reduce){.hero-rise{animation:none;opacity:1;transform:none}}

/* GRILLES */
.g2{display:grid;grid-template-columns:repeat(2,1fr);gap:14px}
.g3{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.g4{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.g52{display:grid;grid-template-columns:3fr 2fr;gap:48px;align-items:start}

/* UTILS */
.flex{display:flex}.fw{flex-wrap:wrap}.fc{flex-direction:column}
.ac{align-items:center}.as{align-items:flex-start}
.jb{justify-content:space-between}.jc{justify-content:center}
.g6{gap:6px}.g8{gap:8px}.g12{gap:12px}.g16{gap:16px}
.mt4{margin-top:4px}.mt8{margin-top:8px}.mt12{margin-top:12px}
.mt16{margin-top:16px}.mt24{margin-top:24px}.mt32{margin-top:32px}.mt40{margin-top:40px}
.mb8{margin-bottom:8px}.mb16{margin-bottom:16px}.mb24{margin-bottom:24px}
.w100{width:100%}.tc{text-align:center}
.lc2{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.lc3{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.divider{border:none;border-top:1px solid var(--line);margin:20px 0}
.errmsg{color:var(--seal);font-size:.83rem;margin-top:8px;display:none}
.stat-row{display:flex;align-items:center;justify-content:space-between;
  border-bottom:1px solid rgba(38,38,47,.5);padding-bottom:9px;margin-bottom:9px}
.stat-row:last-child{border:none;margin:0;padding:0}
.stat-box{border:1px solid var(--line);padding:16px;text-align:center}
.av{width:64px;height:64px;border:1px solid var(--line);background:var(--ink);
  display:flex;align-items:center;justify-content:center;overflow:hidden;
  font-family:'Rajdhani',sans-serif;font-size:1.4rem;color:var(--gold);flex-shrink:0}
.av img{width:100%;height:100%;object-fit:cover}
.av.lg{width:80px;height:80px;font-size:1.8rem}
.lift{cursor:pointer;transition:transform .2s}
.lift:hover{transform:translateY(-3px)}

/* VERSUS */
.vopts{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:14px}
.vopt{border:1px solid var(--line);padding:12px 16px;cursor:pointer;
  background:var(--ink);color:var(--paper);font-family:'Manrope',sans-serif;
  transition:border-color .2s,background .2s;text-align:left}
.vopt:hover{border-color:rgba(236,234,245,.35)}
.vopt.va{border-color:var(--seal);background:rgba(30,79,232,.1)}
.vopt.vb{border-color:var(--gold);background:rgba(255,195,0,.1)}
.vbar{height:6px;display:flex;overflow:hidden;border:1px solid var(--line);margin-top:9px}
.vfA{background:var(--seal)}.vfB{background:var(--gold)}

/* QUIZ */
.qpip{height:4px;flex:1;background:var(--line);transition:background .3s}
.qpip.done{background:var(--gold)}.qpip.cur{background:var(--seal)}
.qopt{width:100%;border:1px solid var(--line);background:var(--ink);color:var(--paper);
  padding:14px 18px;text-align:left;cursor:pointer;font-family:'Manrope',sans-serif;
  font-size:.95rem;transition:border-color .2s,background .2s;display:block;margin-bottom:10px}
.qopt:hover{border-color:rgba(236,234,245,.35)}
.qopt.sel{border-color:var(--seal);background:rgba(30,79,232,.1)}
.qopt.correct{border-color:#4ADE80;background:rgba(74,222,128,.12)}
.qopt.wrong{border-color:var(--seal);background:rgba(30,79,232,.15)}
.qopt:disabled{opacity:.7;cursor:default}
.gauge-wrap{flex:1;height:8px;background:var(--card);border:1px solid var(--line);border-radius:4px;overflow:hidden}
.gauge-fill{height:100%;transition:width .15s linear}
.gauge-fill.full{animation:gaugepulse .6s ease-in-out infinite}
@keyframes gaugepulse{0%,100%{filter:brightness(1)}50%{filter:brightness(1.6)}}
.ag-overlay{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  flex-direction:column;background:rgba(11,23,64,.88);text-align:center;padding:24px}
.ag-overlay.hidden{display:none}
.arena-pick{cursor:pointer;border:2px solid var(--line);transition:border-color .15s,transform .15s}
.arena-pick:hover{transform:translateY(-3px)}
.arena-pick.picked{border-color:var(--gold)}
.arena-heart{font-size:1.05rem}
.ag-step-dot{width:28px;height:28px;border-radius:50%;border:2px solid var(--line);display:flex;align-items:center;justify-content:center;
  font-family:'JetBrains Mono',monospace;font-size:.75rem;color:rgba(236,234,245,.4);flex-shrink:0}
.ag-step-dot.active{border-color:var(--gold);color:var(--gold)}
.ag-step-dot.done{border-color:var(--seal);color:var(--seal);background:rgba(30,79,232,.1)}
.ag-step-line{flex:1;height:2px;background:var(--line);align-self:center}
.ag-tournoi-hud{border:1px solid rgba(255,195,0,.4);background:rgba(255,195,0,.08);padding:8px 14px;text-align:center;margin-bottom:10px;font-family:'JetBrains Mono',monospace;font-size:.72rem;text-transform:uppercase;letter-spacing:.08em;color:var(--gold)}
.ag-power-track{height:10px;background:var(--ink);border:1px solid var(--line);border-radius:5px;overflow:hidden}
.ag-power-fill{height:100%;transition:width .4s ease;border-radius:5px}

/* ── ARENA — agrandissement mobile + contrôles tactiles ── */
#page-arena-game .sec{max-width:1400px}
@media(max-width:700px){
  #page-arena-game .sec{padding:16px 8px}
}
.ag-canvas-wrap{position:relative}
.ag-fs-wrap{position:relative}

/* #ag-fs-wrap contient le canvas ET les manettes tactiles ensemble.
   C'est LUI qui passe en plein écran (via requestFullscreen), jamais
   le canvas seul — sinon les boutons, situés hors de l'élément mis en
   plein écran, disparaissent purement et simplement.
   Les règles ci-dessous s'appliquent dans les deux cas possibles :
   1) `:fullscreen` = la vraie API a marché (cas le plus fréquent,
      Chrome/Android) — le navigateur affiche alors #ag-fs-wrap seul,
      occupant tout l'écran nativement.
   2) `body.ag-force-landscape` = repli CSS quand l'API n'est pas
      disponible (Safari iOS) — on simule la même chose par rotation. */
.ag-fs-wrap:fullscreen,
.ag-fs-wrap:-webkit-full-screen,
body.ag-force-landscape .ag-fs-wrap{
  display:block; width:100%; height:100%; background:var(--ink); padding:0;
}
.ag-fs-wrap:fullscreen .ag-canvas-wrap,
.ag-fs-wrap:-webkit-full-screen .ag-canvas-wrap,
body.ag-force-landscape .ag-fs-wrap .ag-canvas-wrap{
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
}
.ag-fs-wrap:fullscreen .ag-canvas-wrap canvas,
.ag-fs-wrap:-webkit-full-screen .ag-canvas-wrap canvas,
body.ag-force-landscape .ag-fs-wrap .ag-canvas-wrap canvas{
  max-width:100%; max-height:100%; width:auto!important; height:auto!important;
  object-fit:contain; border-radius:0!important;
}
/* Les manettes flottent EN SURIMPRESSION du jeu (coins bas gauche/droite),
   au lieu d'occuper leur propre espace réservé sous le canvas. */
.ag-fs-wrap:fullscreen .ag-touch-zone,
.ag-fs-wrap:-webkit-full-screen .ag-touch-zone,
body.ag-force-landscape .ag-fs-wrap .ag-touch-zone{
  position:absolute; inset:0; z-index:10;
  display:flex!important; align-items:flex-end; justify-content:space-between;
  padding:18px; pointer-events:none; margin-top:0;
}
.ag-fs-wrap:fullscreen .ag-touch-zone .ag-dpad,
.ag-fs-wrap:fullscreen .ag-touch-zone .ag-actions,
.ag-fs-wrap:-webkit-full-screen .ag-touch-zone .ag-dpad,
.ag-fs-wrap:-webkit-full-screen .ag-touch-zone .ag-actions,
body.ag-force-landscape .ag-fs-wrap .ag-touch-zone .ag-dpad,
body.ag-force-landscape .ag-fs-wrap .ag-touch-zone .ag-actions{
  pointer-events:auto;
}
.ag-fs-wrap:fullscreen .ag-dbtn, .ag-fs-wrap:fullscreen .ag-abtn,
.ag-fs-wrap:-webkit-full-screen .ag-dbtn, .ag-fs-wrap:-webkit-full-screen .ag-abtn,
body.ag-force-landscape .ag-fs-wrap .ag-dbtn, body.ag-force-landscape .ag-fs-wrap .ag-abtn{
  background:rgba(11,23,64,.45); backdrop-filter:blur(4px); border-color:rgba(255,255,255,.25);
}

/* Repli quand screen.orientation.lock() n'est pas supporté (Safari iOS) :
   on fait pivoter #ag-fs-wrap plutôt que de compter sur l'OS. */
body.ag-force-landscape .ag-fs-wrap{
  position:fixed; top:0; left:0;
  width:100vh; height:100vw;
  transform:rotate(90deg); transform-origin:top left;
  translate:0 -100%;
  overflow:hidden; z-index:999;
}
.ag-rotate-hint{display:none}
@media(max-width:700px) and (orientation:portrait){
  .ag-rotate-hint{display:flex;align-items:center;gap:8px;justify-content:center;
    background:rgba(255,195,0,.1);border:1px solid rgba(255,195,0,.35);color:var(--gold);
    padding:8px 12px;font-family:'JetBrains Mono',monospace;font-size:.68rem;
    text-transform:uppercase;letter-spacing:.06em;margin-bottom:10px}
}
.ag-touch-zone{display:none}
@media(pointer:coarse){
  .ag-touch-zone{display:flex}
  #ag-controls-p1{display:none}
}
.ag-touch-zone{justify-content:space-between;align-items:center;margin-top:14px;gap:12px;user-select:none;-webkit-user-select:none}
.ag-dpad{display:grid;grid-template-areas:". u ." "l . r" ". d .";grid-template-columns:52px 52px 52px;
  grid-template-rows:52px 52px 52px;gap:4px;flex-shrink:0}
.ag-dbtn{border:1px solid var(--line);background:rgba(236,234,245,.06);color:var(--paper);
  font-size:1.1rem;border-radius:8px;touch-action:none;cursor:pointer}
.ag-dbtn:active{background:var(--seal);border-color:var(--seal)}
.ag-actions{display:flex;flex-direction:column;gap:10px;flex-shrink:0}
.ag-abtn{width:64px;height:64px;border-radius:50%;border:1px solid var(--line);
  background:rgba(236,234,245,.06);color:var(--paper);font-family:'Rajdhani',sans-serif;
  font-size:.8rem;text-transform:uppercase;letter-spacing:.03em;touch-action:none;cursor:pointer}
.ag-abtn:active{background:var(--seal);border-color:var(--seal)}
.ag-fullscreen-btn{position:absolute;top:8px;right:8px;z-index:5;background:rgba(11,23,64,.7);
  border:1px solid var(--line);color:var(--paper);padding:6px 10px;font-size:.85rem;cursor:pointer}


/* ACCORDION */
.ac-btn{width:100%;text-align:left;background:var(--card);border:1px solid var(--line);
  color:var(--paper);padding:15px 20px;cursor:pointer;font-family:'Rajdhani',sans-serif;
  font-size:1.05rem;letter-spacing:.04em;display:flex;align-items:center;
  justify-content:space-between;transition:border-color .2s;margin-bottom:0}
.ac-btn:hover{border-color:var(--seal)}
.ac-body{display:none;border:1px solid var(--line);border-top:none;padding:20px;background:rgba(11,23,64,.4)}
.ac-body.open{display:block}

/* MODAL */
.mo{display:none;position:fixed;inset:0;background:rgba(11,23,64,.88);
  z-index:200;align-items:center;justify-content:center;padding:24px}
.mo.open{display:flex}
.mo-box{background:var(--card);border:1px solid var(--line);padding:30px;
  max-width:480px;width:100%;position:relative;max-height:90vh;overflow-y:auto}
.mo-x{position:absolute;top:14px;right:14px;background:none;border:none;
  color:var(--paper);cursor:pointer;font-size:1.1rem;opacity:.5;line-height:1}
.mo-x:hover{opacity:1}

/* LOADER */
.loader{display:flex;align-items:center;justify-content:center;padding:48px;gap:12px;color:rgba(236,234,245,.4)}
.spin{width:20px;height:20px;border:2px solid var(--line);border-top-color:var(--seal);
  border-radius:50%;animation:spin .7s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

/* TOAST */
#toast{position:fixed;bottom:24px;right:24px;z-index:9999;background:var(--card);
  border:1px solid var(--line);padding:13px 20px;max-width:300px;font-size:.9rem;
  transform:translateY(80px);opacity:0;transition:all .3s;pointer-events:none}
#toast.show{transform:translateY(0);opacity:1}
#toast.tg{border-color:var(--gold)}
#toast.ts{border-color:var(--seal)}

/* ══ PROFIL FACON FACEBOOK ══ */
.cover{width:100%;aspect-ratio:3/1;max-height:340px;background:linear-gradient(135deg,var(--seal),var(--gold));
  position:relative;overflow:hidden;border:1px solid var(--line);cursor:pointer}
.cover img{width:100%;height:100%;object-fit:cover;display:block}
.cover::after{content:'📷 Changer la bannière';position:absolute;bottom:10px;right:12px;
  background:rgba(11,23,64,.65);color:var(--paper);font-family:'JetBrains Mono',monospace;
  font-size:.62rem;text-transform:uppercase;letter-spacing:.08em;padding:5px 10px;
  border:1px solid var(--line);opacity:0;transition:opacity .2s;pointer-events:none}
.cover:hover::after{opacity:1}
@media(max-width:600px){.cover{aspect-ratio:16/9}}
.profile-head{position:relative;padding:0 24px}
.av-xl{width:120px;height:120px;border:4px solid var(--ink);background:var(--card);
  display:flex;align-items:center;justify-content:center;font-family:'Rajdhani',sans-serif;
  font-size:2.6rem;color:var(--gold);flex-shrink:0;overflow:hidden;margin-top:-60px;position:relative;z-index:2;border-radius:50%}
.av-xl img{width:100%;height:100%;object-fit:cover}
@media(max-width:600px){.av-xl{width:96px;height:96px;margin-top:-48px;font-size:2.1rem}}
.rang-badge-inline{display:inline-flex;align-items:center;gap:6px;padding:4px 12px;
  border-radius:999px;font-family:'JetBrains Mono',monospace;font-size:.7rem;font-weight:600}
.progress-track{height:8px;background:var(--line);overflow:hidden;position:relative}
.progress-fill{height:100%;background:linear-gradient(90deg,var(--seal),var(--gold));transition:width .5s ease}

/* ══ QUIZ LIVE — Salles ══ */
.salle-card{position:relative;transition:transform .2s}
.salle-card.live{border-color:var(--gold)}
.salle-card.live::before,.salle-card.live::after{border-color:var(--gold)}
.pulse-dot{width:8px;height:8px;border-radius:50%;background:#4ADE80;display:inline-block;
  animation:pulse 1.4s ease-in-out infinite}
@keyframes pulse{0%,100%{opacity:1;box-shadow:0 0 0 0 rgba(74,222,128,.5)}50%{opacity:.6;box-shadow:0 0 0 6px rgba(74,222,128,0)}}
.timer-ring{position:relative;width:64px;height:64px}
.timer-ring svg{transform:rotate(-90deg)}
.timer-ring circle{fill:none;stroke-width:5}
.timer-ring .bg{stroke:var(--line)}
.timer-ring .fg{stroke:var(--seal);stroke-linecap:round;transition:stroke-dashoffset 1s linear}
.timer-ring .txt{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  font-family:'JetBrains Mono',monospace;font-size:.85rem;font-weight:600}

/* ══ CLASSEMENT STYLÉ ══ */
.lb-row{display:grid;grid-template-columns:50px 1fr auto auto auto;gap:12px;align-items:center;
  padding:14px 16px;border-bottom:1px solid var(--line);transition:background .2s}
.lb-row:last-child{border-bottom:none}
.lb-row.me{background:rgba(255,195,0,.08);border-left:3px solid var(--gold)}
.lb-rank{font-family:'Rajdhani',sans-serif;font-size:1.4rem;text-align:center}
.lb-rank.r1{color:#FFD700}.lb-rank.r2{color:#C0C0C0}.lb-rank.r3{color:#CD7F32}
.lb-av{width:36px;height:36px;border:1px solid var(--line);display:flex;align-items:center;
  justify-content:center;font-family:'Rajdhani',sans-serif;font-size:.9rem;color:var(--gold);
  overflow:hidden;flex-shrink:0}
.lb-av img{width:100%;height:100%;object-fit:cover}

/* FOOTER */
footer{border-top:1px solid var(--line);background:var(--card);padding:40px 24px;margin-top:48px}
.fi{max-width:1200px;margin:0 auto;display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:32px}
.fc-t{font-family:'JetBrains Mono',monospace;font-size:.63rem;text-transform:uppercase;
  letter-spacing:.15em;color:rgba(236,234,245,.3);margin-bottom:14px}
.fl{display:block;color:rgba(236,234,245,.6);font-size:.9rem;margin-bottom:8px;
  cursor:pointer;background:none;border:none;text-align:left;padding:0;font-family:'Manrope',sans-serif;text-decoration:none}
.fl:hover{color:var(--gold)}
.fb{max-width:1200px;margin:22px auto 0;padding-top:18px;border-top:1px solid var(--line);
  text-align:center;font-size:.7rem;color:rgba(236,234,245,.22);font-family:'JetBrains Mono',monospace}

/* RESPONSIVE */
@media(max-width:900px){
  .g52{grid-template-columns:1fr}
  .g3{grid-template-columns:repeat(2,1fr)}
  .g4{grid-template-columns:repeat(2,1fr)}
  .fi{grid-template-columns:1fr 1fr}
}
@media(max-width:600px){
  nav,.na{display:none}.burger{display:flex}
  .hdr .search-wrap{display:none}
  .hero-in{padding:48px 20px}
  .g2,.g3,.g4{grid-template-columns:1fr}
  .sec,.sec-md{padding:32px 20px}
  .fi{grid-template-columns:1fr}
  .vopts{grid-template-columns:1fr}
}
@media(prefers-reduced-motion:reduce){*,::before,::after{animation-duration:.01ms !important;transition-duration:.01ms !important}}

/* BANNIÈRE D'INSTALLATION PWA */
#pwa-banner{display:none;align-items:center;gap:14px;background:var(--card);
  border-bottom:1px solid var(--line);padding:12px 20px;position:relative;z-index:150}
#pwa-banner.show{display:flex}
#pwa-banner .pwa-ic{width:40px;height:40px;flex-shrink:0;border-radius:10px;overflow:hidden;
  border:1px solid var(--line);background:var(--ink)}
#pwa-banner .pwa-ic img{width:100%;height:100%;object-fit:cover}
#pwa-banner .pwa-txt{flex:1;min-width:0}
#pwa-banner .pwa-txt strong{display:block;font-family:'Rajdhani',sans-serif;font-weight:700;
  font-size:.95rem;letter-spacing:.02em}
#pwa-banner .pwa-txt span{display:block;font-size:.76rem;color:rgba(236,234,245,.6);margin-top:1px}
#pwa-banner .pwa-actions{display:flex;align-items:center;gap:6px;flex-shrink:0}
#pwa-banner .pwa-close{background:none;border:none;color:rgba(236,234,245,.5);cursor:pointer;
  font-size:1.1rem;padding:6px;line-height:1}
#pwa-banner .pwa-close:hover{color:var(--paper)}
@media(max-width:640px){
  #pwa-banner{padding:10px 12px;gap:10px}
  #pwa-banner .pwa-txt span{display:none}
  #pwa-banner .btn-sm{padding:8px 12px;font-size:.72rem}
}

/* ══ BANNIÈRE HORS-LIGNE ══ */
.mo-offline-banner{
  display:none;position:sticky;top:0;left:0;right:0;z-index:200;
  background:#c0392b;color:#fff;padding:9px 16px;text-align:center;
  font-family:'Manrope',sans-serif;font-size:.8rem;font-weight:600;letter-spacing:.01em;
}
body.mo-offline .mo-offline-banner{display:block}
/* Désactive visuellement (sans les retirer du DOM) les actions d'écriture
   quand on est hors-ligne : posts, votes, quiz, chat, etc. On les grise et
   coupe les clics pour un retour visuel clair, mo-guard-rpc gère le blocage
   réel côté JS pour tout ce qui n'a pas cette classe. */
body.mo-offline .btn:not(.mo-offline-ok),
body.mo-offline button:not(.mo-offline-ok):not(.mml):not(.burger){
  opacity:.5;cursor:not-allowed;pointer-events:none;
}
body.mo-offline .mm button,
body.mo-offline .burger{opacity:1;cursor:pointer;pointer-events:auto}

/* Coupe les images de CONTENU (avatars, couvertures, galerie, illustrations
   de fictions...) hors-ligne : elles ne sont pas mises en cache (trop
   volumineuses, hébergées sur ibb.co hors du contrôle du service worker).
   On garde la place (pas de saut de mise en page) et on affiche un repli
   discret. Les icônes d'interface utilisent des emojis/texte, pas des
   balises <img>, donc elles ne sont jamais affectées. Un élément qui doit
   rester visible hors-ligne peut porter la classe .mo-offline-ok. */
body.mo-offline img:not(.mo-offline-ok){
  visibility:hidden;background:var(--card,#141428);
}

/* ══ MODE LÉGER (data saver) ══
   Coupe les décors animés, dégradés lourds, ombres et flous — utile en
   connexion lente ou pour économiser de la donnée, indépendamment du
   statut en ligne/hors-ligne. */
body.mo-lite #mo-sky-canvas,body.mo-lite #mo-energy-canvas{display:none !important}
body.mo-lite .speedlines{display:none !important}
body.mo-lite *{
  animation:none !important;
  transition:none !important;
  backdrop-filter:none !important;
  box-shadow:none !important;
  text-shadow:none !important;
}
body.mo-lite [style*="background-image"],
body.mo-lite .hero,
body.mo-lite .cover,
body.mo-lite .fiche-cover{
  background-image:none !important;
}
body.mo-lite img{
  filter:none !important;
}
#lite-mode-btn{display:flex;align-items:center;gap:6px}
#lite-mode-state{font-weight:700;color:var(--gold,#f0c040)}
body.mo-lite #lite-mode-state{color:#4caf50}


/* ===== styles nav basse mobile (mo-fbstyle-nav) ===== */
/* ══════════════════════════════════════════════════════════
   AJOUT — NAV FAÇON FACEBOOK / MESSENGER
   (barre basse + page Menu en grille + reskin léger des listes
   Discussions/Salons pour ressembler à des conversations)
   ══════════════════════════════════════════════════════════ */
body{padding-bottom:64px}
.mo-bottom-nav{position:fixed;left:0;right:0;bottom:0;z-index:500;
  background:rgba(7,7,15,.97);backdrop-filter:blur(10px);
  border-top:1px solid var(--line);display:flex;padding:8px 0 max(10px,env(safe-area-inset-bottom))}
.mo-bottom-nav button{flex:1;background:none;border:none;color:#9a9aad;display:flex;flex-direction:column;
  align-items:center;gap:3px;font-size:.66rem;font-weight:700;cursor:pointer;position:relative;font-family:inherit}
.mo-bottom-nav button .ic{font-size:1.3rem;line-height:1}
.mo-bottom-nav button.active{color:var(--gold)}
.mo-bottom-nav button .bnbadge{position:absolute;top:-3px;right:24%;background:var(--seal);color:#fff;
  font-size:.58rem;padding:1px 5px;border-radius:8px}
@media (min-width:901px){.mo-bottom-nav{display:none}body{padding-bottom:0}}

/* Page Menu façon grille Facebook */
.mo-menu-profile{display:flex;align-items:center;gap:14px;padding:16px;background:var(--card);
  border-radius:14px;margin-bottom:20px;cursor:pointer}
.mo-menu-profile .av{width:52px;height:52px;border-radius:50%;background:linear-gradient(135deg,var(--gold),var(--seal));flex-shrink:0;background-size:cover;background-position:center}
.mo-menu-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px;margin-bottom:24px}
.mo-menu-tile{background:var(--card);border-radius:12px;padding:16px 14px;display:flex;align-items:center;gap:10px;
  font-weight:700;font-size:.88rem;cursor:pointer;border:1px solid var(--line)}
.mo-menu-tile:hover{border-color:var(--gold)}
.mo-menu-tile .ic{font-size:1.3rem}
.mo-menu-list{background:var(--card);border-radius:12px;overflow:hidden;border:1px solid var(--line);margin-bottom:24px}
.mo-menu-row{display:flex;align-items:center;gap:12px;padding:13px 14px;border-bottom:1px solid var(--line);
  font-size:.9rem;cursor:pointer}
.mo-menu-row:last-child{border-bottom:none}
.mo-menu-row:hover{background:rgba(255,255,255,.04)}
.mo-menu-row .arrow{margin-left:auto;color:#9a9aad}

/* Salons = grille de cartes classique (conservée telle quelle) */

/* ═══ ÉCRAN DE CHAT DE SALON = GROUPE MESSENGER ═══ */
#page-chat{display:none}
#page-chat.active{display:flex;flex-direction:column;position:fixed;inset:0;z-index:600;background:var(--ink)}
.mo-chat-header{display:flex;align-items:center;gap:10px;padding:12px 14px;
  background:rgba(7,7,15,.97);backdrop-filter:blur(10px);border-bottom:1px solid var(--line);flex-shrink:0}
.mo-chat-back{background:none;border:none;color:var(--gold);font-size:1.8rem;line-height:1;cursor:pointer;padding:0 4px}
.mo-chat-av{width:40px;height:40px;border-radius:50%;flex-shrink:0;background:linear-gradient(135deg,var(--seal),var(--echo));
  display:flex;align-items:center;justify-content:center;font-size:1.2rem}
.mo-chat-title{flex:1;min-width:0}
.mo-chat-title h1{font-size:1.05rem;font-weight:800;font-family:'Manrope',sans-serif;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mo-chat-sub{font-size:.72rem;color:#9a9aad}
.mo-chat-hicons{display:flex;gap:14px;flex-shrink:0}
.mo-chat-hic{font-size:1.7rem;font-weight:900;color:var(--gold);cursor:pointer;
  width:44px;height:44px;display:flex;align-items:center;justify-content:center;border-radius:50%;
  background:none;border:none;padding:0;-webkit-tap-highlight-color:rgba(255,195,0,.25)}
.mo-chat-hic:active{background:rgba(255,255,255,.08)}
.mo-chat-wrap{flex:1;display:flex;flex-direction:column;overflow:hidden;padding-bottom:env(safe-area-inset-bottom);
  background-image:radial-gradient(ellipse 700px 500px at 15% 10%,rgba(30,79,232,.10) 0%,transparent 55%),
    radial-gradient(ellipse 700px 500px at 90% 90%,rgba(255,195,0,.08) 0%,transparent 55%)}
#chat-messages{flex:1;overflow-y:auto;display:flex;flex-direction:column;gap:6px;padding:14px}
.mo-chat-daysep{align-self:center;font-size:.7rem;color:#9a9aad;background:rgba(255,255,255,.06);
  padding:3px 12px;border-radius:10px;margin:10px 0 6px}
#chat-input-area{flex-shrink:0;display:flex;align-items:center;gap:6px;padding:8px 10px;
  border-top:1px solid var(--line);background:rgba(7,7,15,.97)}
#chat-input-area .mo-ic-btn{background:none;border:none;color:var(--gold);font-size:1.3rem;cursor:pointer;
  width:34px;height:34px;flex-shrink:0;display:flex;align-items:center;justify-content:center;opacity:.85}
#chat-input-area .flex{flex:1;align-items:center;gap:6px!important}
#chat-input-area input{border-radius:20px;background:var(--card2,#1B1B29);border:1px solid var(--line);
  padding:9px 16px;width:100%}
#chat-input-area button.btn-s{border-radius:50%;width:38px;height:38px;padding:0;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;font-size:0}
#chat-input-area button.btn-s::after{content:'➤';font-size:1rem}

/* Chat de salon = bulles façon Messenger */
#chat-messages{gap:6px!important}
#chat-messages .mo-bubble-out{align-self:flex-end;background:var(--seal);color:#fff;border-radius:16px 16px 4px 16px;
  padding:9px 14px;max-width:78%;font-size:.9rem}
#chat-messages .mo-bubble-in{align-self:flex-start;background:var(--card2,#1B1B29);color:var(--paper);border-radius:16px 16px 16px 4px;
  padding:9px 14px;max-width:78%;font-size:.9rem}
#chat-messages .mo-bubble-in .mo-bubble-author{font-size:.7rem;font-weight:800;color:var(--gold);margin-bottom:2px;display:block}
.mo-chat-img{max-width:100%;width:200px;border-radius:10px;display:block;cursor:pointer;margin-top:2px}
.mo-chat-file{display:inline-flex;align-items:center;gap:6px;color:inherit;text-decoration:underline;word-break:break-all}
.mo-chat-media-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:6px}
.mo-chat-media-grid img{width:100%;aspect-ratio:1/1;object-fit:cover;border-radius:8px;cursor:pointer}
#chat-input-area .mo-ic-rec{color:var(--scarlet)!important;opacity:1;animation:mo-rec-pulse 1s infinite}
@keyframes mo-rec-pulse{0%,100%{opacity:1}50%{opacity:.4}}

/* ══ MODULE DISCUSSIONS + AMIS + APPELS ══ */
/* ═══════════════════════════════════════════════════════════════
   MO — MODULE DISCUSSIONS + AMIS + APPELS — CSS
   À insérer dans la balise style principale du fichier monolithique
   Utilise les variables --ink,--card,--line,--gold,--seal,--echo déjà définies
   ═══════════════════════════════════════════════════════════════ */

/* ── Conteneur général du module ── */
#mo-disc-app{ max-width:480px; margin:0 auto; position:relative; min-height:100vh; padding-bottom:80px; }
#mo-disc-app *{ box-sizing:border-box; }
#mo-disc-app .hidden{ display:none !important; }

/* ── HEADER liste ── */
.mo-disc-header{ padding:18px 16px 10px; }
.mo-disc-header-top{ display:flex; align-items:center; justify-content:space-between; margin-bottom:14px; }
.mo-disc-header-top h1{ font-size:24px; font-weight:800; letter-spacing:-.5px; color:var(--paper); }
.mo-icon-btn{
  width:38px; height:38px; border-radius:50%; background:var(--card);
  border:1px solid var(--line); display:flex; align-items:center; justify-content:center;
  color:var(--paper); cursor:pointer; transition:.15s; position:relative; font-size:16px;
}
.mo-icon-btn:hover{ border-color:var(--gold); box-shadow:var(--glow-gold); }
.mo-icon-badge{
  position:absolute; top:-4px; right:-4px; background:var(--scarlet); color:#fff;
  font-size:10px; font-weight:800; min-width:16px; height:16px; border-radius:8px;
  display:flex; align-items:center; justify-content:center;
}
.mo-search-bar{
  background:var(--card); border:1px solid var(--line); border-radius:20px;
  padding:9px 16px; display:flex; align-items:center; gap:8px; color:#8B8FBF; font-size:13px;
}
.mo-search-bar input{ background:none; border:none; outline:none; color:var(--paper); font-size:13px; flex:1; font-family:inherit; }

/* ── TABS ── */
.mo-tabs{ display:flex; gap:8px; padding:14px 16px 4px; }
.mo-tab{
  padding:7px 16px; border-radius:16px; font-size:13px; font-weight:700;
  background:var(--card); color:#8B8FBF; border:1px solid var(--line); cursor:pointer; transition:.15s;
}
.mo-tab.active{ background:var(--seal); color:#fff; border-color:var(--seal); box-shadow:var(--glow-soft); }

/* ── AVATARS EN LIGNE ── */
.mo-online-row{ display:flex; gap:14px; padding:14px 16px; overflow-x:auto; }
.mo-online-row::-webkit-scrollbar{ display:none; }
.mo-online-item{ display:flex; flex-direction:column; align-items:center; gap:6px; flex-shrink:0; cursor:pointer; }
.mo-avatar-ring{ width:54px; height:54px; border-radius:50%; padding:2px; position:relative; background:var(--card); }
.mo-avatar-ring.online{ background:linear-gradient(135deg,var(--echo),var(--seal)); }
.mo-avatar-ring img{ width:100%; height:100%; border-radius:50%; object-fit:cover; border:2px solid var(--ink); display:block; }
.mo-online-dot{ width:12px; height:12px; border-radius:50%; background:#22c55e; border:2.5px solid var(--ink); position:absolute; bottom:0; right:0; }
.mo-online-name{ font-size:10.5px; color:#8B8FBF; max-width:58px; text-align:center; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

/* ── LISTE DISCUSSIONS ── */
.mo-disc-list{ padding:4px 8px; }
.mo-disc-item{ display:flex; align-items:center; gap:12px; padding:9px 8px; border-radius:14px; cursor:pointer; transition:.15s; }
.mo-disc-item:hover, .mo-disc-item:active{ background:var(--card-glass); }
.mo-disc-avatar{ position:relative; flex-shrink:0; }
.mo-disc-avatar img{ width:52px; height:52px; border-radius:50%; object-fit:cover; border:2px solid var(--line); }
.mo-disc-avatar .dot{ width:13px; height:13px; border-radius:50%; background:#22c55e; border:3px solid var(--ink); position:absolute; bottom:-1px; right:-1px; }
.mo-disc-icon-salon{
  width:52px; height:52px; border-radius:16px; display:flex; align-items:center; justify-content:center;
  font-size:20px; background:linear-gradient(135deg,var(--violet),var(--seal)); flex-shrink:0; border:2px solid var(--line);
}
.mo-disc-body{ flex:1; min-width:0; }
.mo-disc-top{ display:flex; justify-content:space-between; align-items:center; gap:8px; }
.mo-disc-name{ font-size:14.5px; font-weight:700; color:var(--paper); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; display:flex; align-items:center; gap:5px; }
.mo-disc-time{ font-size:11px; color:#8B8FBF; flex-shrink:0; }
.mo-disc-bottom{ display:flex; justify-content:space-between; align-items:center; gap:8px; margin-top:1px; }
.mo-disc-preview{ font-size:12.5px; color:#8B8FBF; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.mo-disc-preview.unread{ color:var(--paper); font-weight:600; }
.mo-badge-unread{ background:var(--seal); color:#fff; font-size:10.5px; font-weight:800; min-width:19px; height:19px; border-radius:10px; display:flex; align-items:center; justify-content:center; padding:0 6px; flex-shrink:0; }
.mo-mute-icon{ color:#8B8FBF; font-size:12px; }
.mo-badge-salon{ font-size:9.5px; background:var(--gold); color:#1a1a1a; padding:1px 5px; border-radius:6px; font-weight:800; }
.mo-empty-state{ text-align:center; padding:50px 20px; color:#8B8FBF; font-size:14px; }

/* ── ÉCRAN DE CONVERSATION ── */
.mo-chat-screen{ position:fixed; inset:0; background:var(--ink); z-index:500; display:flex; flex-direction:column; max-width:480px; margin:0 auto; }
.mo2-chat-header{ display:flex; align-items:center; gap:10px; padding:14px 12px; border-bottom:1px solid var(--line); background:var(--ink2); }
.mo2-chat-back{ font-size:20px; cursor:pointer; color:var(--paper); padding:4px; }
.mo2-chat-header img, .mo2-chat-header .mo-chat-icon{ width:38px; height:38px; border-radius:50%; object-fit:cover; flex-shrink:0; }
.mo-chat-icon{ display:flex; align-items:center; justify-content:center; font-size:17px; background:linear-gradient(135deg,var(--violet),var(--seal)); border-radius:16px; }
.mo-chat-title-block{ flex:1; min-width:0; }
.mo-chat-name{ font-size:15px; font-weight:700; color:var(--paper); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.mo-chat-status{ font-size:11.5px; color:#8B8FBF; }
.mo-chat-status.online{ color:#22c55e; }
.mo-chat-actions{ display:flex; gap:6px; }
.mo-chat-action-btn{ width:34px; height:34px; border-radius:50%; background:var(--card); border:1px solid var(--line); display:flex; align-items:center; justify-content:center; cursor:pointer; font-size:15px; color:var(--paper); }
.mo-chat-action-btn:hover{ border-color:var(--gold); }

.mo-chat-messages{ flex:1; overflow-y:auto; padding:14px 12px; display:flex; flex-direction:column; gap:3px; }
.mo-msg-date-sep{ text-align:center; font-size:11px; color:#8B8FBF; margin:14px 0 8px; }
.mo-msg-row{ display:flex; margin-bottom:2px; }
.mo-msg-row.mine{ justify-content:flex-end; }
.mo-msg-bubble{
  max-width:75%; padding:9px 14px; border-radius:18px; font-size:14px; line-height:1.35;
  word-wrap:break-word; white-space:pre-wrap;
}
.mo-msg-row:not(.mine) .mo-msg-bubble{ background:var(--card); color:var(--paper); border-bottom-left-radius:5px; }
.mo-msg-row.mine .mo-msg-bubble{ background:linear-gradient(135deg,var(--seal),#5B6FFF); color:#fff; border-bottom-right-radius:5px; }
.mo-msg-time{ font-size:10px; color:#8B8FBF; text-align:right; margin-top:2px; }
.mo-msg-sent-status{ font-size:10.5px; color:#8B8FBF; text-align:right; margin-top:2px; padding-right:4px; }
.mo-typing-indicator{ display:flex; align-items:center; gap:4px; padding:8px 14px; }
.mo-typing-dot{ width:6px; height:6px; border-radius:50%; background:#8B8FBF; animation:mo-typing-bounce 1.2s infinite ease-in-out; }
.mo-typing-dot:nth-child(2){ animation-delay:.15s; }
.mo-typing-dot:nth-child(3){ animation-delay:.3s; }
@keyframes mo-typing-bounce{ 0%,60%,100%{ transform:translateY(0); opacity:.5; } 30%{ transform:translateY(-4px); opacity:1; } }

.mo-chat-input-bar{ display:flex; align-items:center; gap:8px; padding:10px 12px 16px; border-top:1px solid var(--line); background:var(--ink2); }
.mo-input-icon{ font-size:20px; color:var(--seal); cursor:pointer; flex-shrink:0; width:32px; text-align:center; }
.mo-chat-text-input{
  flex:1; background:var(--card); border:1px solid var(--line); border-radius:20px; padding:9px 16px;
  color:var(--paper); font-size:14px; font-family:inherit; outline:none; resize:none; max-height:100px;
}
.mo-chat-text-input:focus{ border-color:var(--seal); }
.mo-send-btn{
  width:36px; height:36px; border-radius:50%; background:var(--seal); border:none; color:#fff;
  display:flex; align-items:center; justify-content:center; cursor:pointer; flex-shrink:0; font-size:15px;
  box-shadow:var(--glow-soft);
}
.mo-send-btn:disabled{ opacity:.4; cursor:default; box-shadow:none; }

/* ── PANNEAU INFOS DISCUSSION ── */
.mo-info-panel{ position:fixed; inset:0; background:var(--ink); z-index:600; overflow-y:auto; max-width:480px; margin:0 auto; }
.mo-info-header{ display:flex; align-items:center; padding:14px 12px; gap:12px; }
.mo-info-profile{ text-align:center; padding:10px 20px 24px; }
.mo-info-profile img{ width:96px; height:96px; border-radius:50%; object-fit:cover; margin-bottom:12px; }
.mo-info-profile h2{ font-size:19px; color:var(--paper); }
.mo-info-quick-actions{ display:flex; justify-content:center; gap:14px; padding:0 16px 20px; flex-wrap:wrap; }
.mo-quick-action{ display:flex; flex-direction:column; align-items:center; gap:6px; cursor:pointer; }
.mo-quick-action-icon{ width:48px; height:48px; border-radius:50%; background:var(--card); border:1px solid var(--line); display:flex; align-items:center; justify-content:center; font-size:19px; }
.mo-quick-action span{ font-size:11px; color:#8B8FBF; }
.mo-info-section-title{ font-size:12px; color:#8B8FBF; padding:16px 20px 6px; text-transform:uppercase; letter-spacing:.5px; }
.mo-info-row{ display:flex; align-items:center; gap:14px; padding:13px 20px; cursor:pointer; }
.mo-info-row:hover{ background:var(--card-glass); }
.mo-info-row-icon{ font-size:18px; width:22px; text-align:center; color:var(--paper); }
.mo-info-row-body{ flex:1; }
.mo-info-row-title{ font-size:14.5px; color:var(--paper); }
.mo-info-row-sub{ font-size:12px; color:#8B8FBF; }
.mo-info-row.danger .mo-info-row-title{ color:var(--scarlet); }
.mo-toggle{ width:42px; height:24px; border-radius:12px; background:var(--line); position:relative; cursor:pointer; transition:.2s; flex-shrink:0; }
.mo-toggle.on{ background:var(--seal); }
.mo-toggle-knob{ width:18px; height:18px; border-radius:50%; background:#fff; position:absolute; top:3px; left:3px; transition:.2s; }
.mo-toggle.on .mo-toggle-knob{ left:21px; }

/* ── ÉCRAN AMIS ── */
.mo-friends-screen{ padding:16px; }
.mo-friends-tabs{ display:flex; gap:8px; margin-bottom:16px; }
.mo-req-card{ display:flex; align-items:center; gap:12px; padding:12px; background:var(--card); border:1px solid var(--line); border-radius:14px; margin-bottom:10px; }
.mo-req-card img{ width:48px; height:48px; border-radius:50%; object-fit:cover; }
.mo-req-body{ flex:1; }
.mo-req-name{ font-size:14px; font-weight:700; color:var(--paper); }
.mo-req-actions{ display:flex; gap:8px; }
.mo-btn-accept, .mo-btn-refuse{ padding:7px 14px; border-radius:12px; font-size:12.5px; font-weight:700; cursor:pointer; border:none; }
.mo-btn-accept{ background:var(--seal); color:#fff; }
.mo-btn-refuse{ background:var(--card); color:#8B8FBF; border:1px solid var(--line); }

/* ── APPEL ENTRANT / EN COURS ── */
.mo-call-overlay{ position:fixed; inset:0; background:linear-gradient(160deg,var(--ink2),var(--violet)); z-index:900; display:flex; flex-direction:column; align-items:center; justify-content:space-between; padding:60px 24px 50px; }
.mo-call-avatar{ width:130px; height:130px; border-radius:50%; object-fit:cover; box-shadow:0 0 40px rgba(51,85,255,.5); }
.mo-call-name{ font-size:22px; font-weight:800; color:#fff; margin-top:20px; }
.mo-call-status{ font-size:14px; color:#c9cdf5; margin-top:6px; }
.mo-call-actions{ display:flex; gap:36px; }
.mo-call-btn{ width:64px; height:64px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:26px; cursor:pointer; border:none; }
.mo-call-btn.decline{ background:var(--scarlet); color:#fff; }
.mo-call-btn.accept{ background:#22c55e; color:#fff; }
.mo-call-btn.hangup{ background:var(--scarlet); color:#fff; }
.mo-call-video-local{ position:absolute; width:100px; height:140px; border-radius:14px; bottom:120px; right:20px; object-fit:cover; border:2px solid var(--line); }
.mo-call-video-remote{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }

@media(max-width:400px){ .mo-msg-bubble{ max-width:82%; } }