/* ════════════════════════════════════════════════════════════════════════
   SOCLE WEB PARTAGÉ — écrans internes en maçonnerie (≥1024px)
   ------------------------------------------------------------------------
   Une seule feuille pour TOUS les écrans internes du web (hub, profil,
   boutique, rangs, saison, historique, potes, solo, rafale, maquis…).
   Chaque écran est un `.wpane` DANS sa section mobile, rempli par son
   render…(). `body.web-sub` est posé par app.js › show() quand la section
   active a un `.wpane`. Le mobile n'est jamais touché.
   ════════════════════════════════════════════════════════════════════════ */

.wpane { display: none; }

@media (min-width: 1024px) {

  .wpane, .wpane *, .wpane *::before, .wpane *::after { box-sizing: border-box; }
  /* isolation : on repart à plat sous le pane (classe, spécificité 0,1,0 :
     reste SOUS les règles de contenu .wpane .x à 0,2,0). */
  .wpane * { all: revert; box-sizing: border-box; }

  /* le pane de la section ACTIVE occupe l'écran */
  body.web-sub .sec.active > .wpane {
    --paper:#FFFEF7; --ink:#0A0A0A;
    --magenta:#FF2E93; --yellow:#FFD600; --cyan:#5BD8E5; --green:#5BE885;
    --red:#FF5252; --purple:#9D4EDD; --bleu:#4D7CFF; --orange:#FF9F45;
    /* --fd / --fb : hérités de <html> (la police choisie dans Réglages) */
    --bd:3px; --bdf:4px; --sh:5px; --shf:6px;
    --card:#FFFEF7; --line:#0A0A0A; --mut:rgba(10,10,10,.55); --app:#F4EEDF;
    position: fixed; inset: 0; z-index: 1200; overflow: hidden;
    display: flex; flex-direction: column; padding: 14px 24px 10px;
    font-family: var(--fb); color: var(--ink);
    font-synthesis: none; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility;
    background: var(--app) radial-gradient(color-mix(in srgb,var(--ink) 7%,transparent) 1.4px, transparent 1.5px);
    background-size: 22px 22px;
  }
  html[data-skin="neon"] body.web-sub .sec.active > .wpane {
    --paper:#160E1F; --app:#0E0814; --card:#221430; --line:#0A0A0A; --mut:#CFC3CE;
    color:#FFFEF7; background-image: repeating-linear-gradient(30deg,rgba(255,255,255,.04) 0 6px,transparent 6px 26px);
  }
  /* on cache le contenu mobile de la section active + le shell */
  body.web-sub .sec.active > :not(.wpane) { display: none !important; }
  body.web-sub .topbar, body.web-sub .bottom-nav { display: none !important; }
  body.web-sub { overflow: hidden; }

  .wpane img.em, .wpane img.ne, .wpane img.noto-em { height:1em; width:auto; vertical-align:-.15em; object-fit:contain; display:inline-block; }

  /* ── NAV ─────────────────────────────────────────────────── */
  .wpane .nav{ display:flex; align-items:center; gap:12px; margin-bottom:14px; flex:none; width:100%; max-width:1500px; margin-inline:auto; }
  .wpane .logo{ height:58px; width:auto; display:block; flex:none; }
  .wpane .tabs{ display:flex; gap:10px; }
  .wpane .tab{ font-family:var(--fd); font-size:17px; letter-spacing:1px; padding:10px 20px; border:var(--bd) solid var(--line); background:var(--card); color:inherit; box-shadow:var(--sh) var(--sh) 0 var(--line); cursor:pointer; }
  html[data-skin="neon"] .wpane .tab{ color:#FFFEF7; }
  .wpane .tab.on{ background:var(--bleu); color:#FFFEF7; box-shadow:var(--sh) var(--sh) 0 var(--magenta); }
  .wpane .nav .sp{ flex:1; }
  .wpane .back{ font-family:var(--fd); font-size:20px; width:46px; height:46px; display:grid; place-items:center; border:var(--bd) solid var(--line); background:var(--card); color:inherit; box-shadow:var(--sh) var(--sh) 0 var(--line); cursor:pointer; }
  html[data-skin="neon"] .wpane .back{ color:#FFFEF7; }
  .wpane .wtitle{ font-family:var(--fd); font-size:22px; letter-spacing:1px; }
  html[data-skin="neon"] .wpane .wtitle{ color:#FFFEF7; }
  .wpane .chip{ display:inline-flex; align-items:center; gap:7px; font-family:var(--fd); font-size:16px; padding:9px 14px; border:var(--bd) solid var(--line); background:var(--card); color:inherit; box-shadow:var(--sh) var(--sh) 0 var(--line); cursor:pointer; }
  html[data-skin="neon"] .wpane .chip{ color:#FFFEF7; }
  .wpane .chip.dj{ background:var(--yellow); color:#0A0A0A; }   /* encre fixe : en néon --ink devient crème, illisible sur le jaune */
  .wpane .toggle{ display:flex; border:var(--bd) solid var(--line); box-shadow:var(--sh) var(--sh) 0 var(--line); cursor:pointer; }
  .wpane .toggle span{ font-family:var(--fd); font-size:14px; letter-spacing:1px; padding:8px 13px; background:var(--card); color:var(--mut); }
  .wpane .toggle span.on{ background:var(--magenta); color:#FFFEF7; }
  .wpane .ava{ width:52px; height:52px; border:var(--bdf) solid var(--line); box-shadow:var(--sh) var(--sh) 0 var(--magenta); background:var(--purple); display:grid; place-items:center; font-size:26px; cursor:pointer; overflow:hidden; }
  .wpane .ava > *{ width:100%; height:100%; display:block; }

  /* ── MAÇONNERIE ──────────────────────────────────────────── */
  .wpane .bento{ flex:1; min-height:0; width:100%; max-width:1500px; margin-inline:auto; display:grid; grid-template-columns:repeat(4,1fr); grid-template-rows:repeat(8,1fr); grid-auto-flow:row dense; gap:13px; }
  .wpane .b{ border:var(--bdf) solid var(--line); background:var(--card); box-shadow:var(--sh) var(--sh) 0 var(--line); padding:13px; display:flex; flex-direction:column; overflow:hidden; position:relative; }
  html[data-skin="neon"] .wpane .b{ box-shadow:var(--sh) var(--sh) 0 var(--magenta); }
  .wpane .h2{ grid-row:span 2; } .wpane .h3{ grid-row:span 3; } .wpane .h4{ grid-row:span 4; } .wpane .h5{ grid-row:span 5; }
  .wpane .w2{ grid-column:span 2; } .wpane .w3{ grid-column:span 3; } .wpane .w4{ grid-column:span 4; }
  .wpane .ttl{ font-family:var(--fd); font-size:12px; letter-spacing:1.4px; color:var(--mut); display:flex; align-items:center; gap:8px; margin-bottom:10px; flex:none; }
  html[data-skin="neon"] .wpane .ttl{ color:#CFC3CE; }
  .wpane .ttl .r{ margin-left:auto; font-size:11px; }

  /* ── CARTE « MODE » (style MAQUIS) : tuile emoji + titre + sous-titre ─── */
  .wpane .modecard{ --cg:10px; position:relative; border:var(--bdf) solid var(--line); box-shadow:var(--sh) var(--sh) 0 var(--line); padding:15px; cursor:pointer; overflow:hidden; display:flex; flex-direction:column; align-items:flex-start; gap:var(--cg); color:var(--ink); }
  .wpane .modecard::before{ content:''; position:absolute; inset:0; opacity:.14; pointer-events:none; background-image:radial-gradient(#0A0A0A 1.6px,transparent 1.7px); background-size:15px 15px; }
  .wpane .modecard > *{ position:relative; }
  .wpane .modecard .ghost{ position:absolute; right:-14px; bottom:-18px; opacity:.26; transform:rotate(-8deg); pointer-events:none; }
  .wpane .modecard .ghost img{ height:128px; width:auto; }
  .wpane .tile{ width:52px; height:52px; flex:none; border:var(--bd) solid var(--line); background:#FFFEF7; box-shadow:3px 3px 0 var(--line); display:grid; place-items:center; }
  .wpane .tile img{ height:30px; width:auto; }
  .wpane .modecard .nm{ font-family:var(--fd); font-size:24px; line-height:.95; }
  .wpane .modecard .d{ font-family:var(--fb); font-weight:700; font-size:10.5px; letter-spacing:.5px; color:rgba(10,10,10,.62); }
  .wpane .modecard .meta{ font-family:var(--fd); font-size:12px; letter-spacing:.8px; color:rgba(10,10,10,.75); }
  .wpane .modecard .go{ font-family:var(--fd); font-size:16px; letter-spacing:1.5px; padding:8px 18px; border:var(--bd) solid var(--ink); background:var(--ink); color:#FFFEF7; box-shadow:3px 3px 0 #FFFEF7; margin-top:auto; }
  .wpane .modecard .tag{ position:absolute; top:10px; right:10px; z-index:2; font-family:var(--fd); font-size:11px; letter-spacing:1px; padding:4px 9px; border:2.5px solid var(--line); background:var(--yellow); color:var(--ink); box-shadow:3px 3px 0 var(--line); }
  .wpane .modecard.big .nm{ font-size:40px; } .wpane .modecard.big .tile{ width:66px; height:66px; } .wpane .modecard.big .tile img{ height:40px; } .wpane .modecard.big .ghost img{ height:200px; }
  .wpane .modecard.soon{ cursor:not-allowed; } .wpane .modecard.soon::after{ content:'BIENTÔT'; position:absolute; inset:0; display:grid; place-items:center; font-family:var(--fd); font-size:22px; letter-spacing:3px; color:#FFFEF7; background:rgba(10,10,10,.55); }

  /* ── HÉROS (grande carte d'accroche) ─────────────────────── */
  .wpane .hero{ position:relative; border:var(--bdf) solid var(--line); background:var(--magenta); box-shadow:var(--shf) var(--shf) 0 var(--line); padding:16px; overflow:hidden; color:#FFFEF7; display:flex; flex-direction:column; justify-content:space-between; }
  html[data-skin="neon"] .wpane .hero{ box-shadow:var(--shf) var(--shf) 0 var(--yellow); }
  .wpane .hero::before{ content:''; position:absolute; inset:0; opacity:.13; background-image:radial-gradient(#0A0A0A 2px,transparent 2.2px); background-size:16px 16px; }
  .wpane .hero > *{ position:relative; }
  .wpane .hero .k{ font-family:var(--fb); font-weight:800; font-size:11px; letter-spacing:2px; opacity:.9; }
  .wpane .hero .t{ font-family:var(--fd); font-size:46px; line-height:.9; margin:4px 0; }
  .wpane .hero .s{ font-family:var(--fb); font-weight:700; font-size:12px; letter-spacing:1px; opacity:.9; }
  .wpane .heroplay{ align-self:flex-start; position:relative; z-index:2; font-family:var(--fd); font-size:18px; letter-spacing:1px; background:var(--yellow); color:var(--ink); padding:11px 22px; border:var(--bd) solid var(--line); box-shadow:4px 4px 0 var(--line); cursor:pointer; margin-top:10px; }

  /* ── briques génériques : stat, liste ───────────────────── */
  .wpane .stat3{ display:grid; grid-template-columns:repeat(3,1fr); gap:9px; }
  .wpane .stat3 .s{ border:var(--bd) solid var(--line); box-shadow:3px 3px 0 var(--line); padding:9px 4px; text-align:center; }
  .wpane .stat3 .s b{ font-family:var(--fd); font-weight:400; font-size:22px; line-height:1; display:block; }
  .wpane .stat3 .s span{ font-size:8.5px; letter-spacing:1px; color:var(--mut); }
  html[data-skin="neon"] .wpane .stat3 .s{ color:#FFFEF7; }
  .wpane .list{ flex:1; display:flex; flex-direction:column; justify-content:space-between; }
  .wpane .li{ display:flex; align-items:center; gap:10px; padding:5px 0; border-bottom:2px dashed color-mix(in srgb,var(--ink) 15%,transparent); }
  .wpane .li:last-child{ border:0; }
  .wpane .li .ic{ width:34px; height:34px; flex:none; border:2.5px solid var(--line); box-shadow:2px 2px 0 var(--line); display:grid; place-items:center; font-size:17px; overflow:hidden; }
  .wpane .li .ic img{ height:19px; width:auto; } .wpane .li .ic > *{ width:100%; height:100%; display:block; }
  .wpane .li .nm{ font-family:var(--fd); font-size:14px; line-height:1; } html[data-skin="neon"] .wpane .li .nm{ color:#FFFEF7; }
  .wpane .li .d{ font-family:var(--fb); font-weight:700; font-size:8.5px; letter-spacing:.3px; color:var(--mut); margin-top:2px; }
  .wpane .li .info{ flex:1; min-width:0; }
  .wpane .li .sc{ margin-left:auto; font-family:var(--fd); font-size:14px; } html[data-skin="neon"] .wpane .li .sc{ color:var(--yellow); }

  /* ── PROFIL / carte identité + stats + modes + badges ─────── */
  .wpane .ident{ background:var(--magenta); color:#FFFEF7; box-shadow:var(--shf) var(--shf) 0 var(--line); justify-content:flex-start; }
  html[data-skin="neon"] .wpane .ident{ box-shadow:var(--shf) var(--shf) 0 var(--yellow); }
  .wpane .ident::before{ content:''; position:absolute; inset:0; opacity:.13; background-image:radial-gradient(#0A0A0A 1.6px,transparent 1.7px); background-size:15px 15px; }
  .wpane .ident>*{ position:relative; }
  .wpane .itop{ display:flex; align-items:center; gap:13px; }
  .wpane .iav{ width:84px; height:84px; flex:none; border:var(--bdf) solid var(--line); box-shadow:var(--sh) var(--sh) 0 var(--line); background:var(--purple); display:grid; place-items:center; font-size:42px; position:relative; overflow:visible; }
  /* ⚠ pas « > * » : la pastille NIV prenait aussi 100 % et recouvrait l'avatar (carré jaune vide) */
  .wpane .iav > :not(.ilv){ width:100%; height:100%; display:block; overflow:hidden; }
  .wpane .ilv{ position:absolute; right:-7px; bottom:-7px; font-family:var(--fd); font-size:12px; background:var(--yellow); color:#0A0A0A; border:2.5px solid var(--line); box-shadow:2px 2px 0 var(--line); padding:0 7px; z-index:1; }
  .wpane .iwho{ flex:1; min-width:0; }
  .wpane .inm{ font-family:var(--fd); font-size:30px; line-height:1; display:flex; align-items:center; gap:9px; }
  .wpane .inm .ifl{ display:inline-flex; } .wpane .inm .ifl img{ width:26px; height:18px; border:2px solid var(--line); }
  .wpane .irk{ font-family:var(--fb); font-weight:700; font-size:10px; letter-spacing:.8px; opacity:.9; margin-top:6px; }
  .wpane .idj{ margin-left:auto; flex:none; font-family:var(--fd); font-size:19px; background:var(--yellow); color:var(--ink); padding:7px 13px; border:var(--bd) solid var(--line); box-shadow:3px 3px 0 var(--line); }
  .wpane .ixp{ height:22px; border:var(--bd) solid var(--line); background:rgba(255,255,255,.3); position:relative; overflow:hidden; margin-top:13px; }
  .wpane .ixp i{ position:absolute; inset:0 auto 0 0; background:var(--yellow); }
  .wpane .ixp .t{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; font-family:var(--fd); font-size:11px; line-height:1; color:var(--ink); white-space:nowrap; }

  .wpane .pstats{ flex:1; display:grid; grid-template-columns:repeat(3,1fr); grid-template-rows:1fr 1fr; gap:10px; min-height:0; }
  .wpane .pst{ border:var(--bd) solid var(--line); box-shadow:3px 3px 0 var(--line); display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px; color:var(--ink); }
  .wpane .pst b{ font-family:var(--fd); font-size:26px; line-height:1; }
  .wpane .pst span{ font-family:var(--fb); font-weight:700; font-size:8.5px; letter-spacing:.5px; opacity:.72; }
  .wpane .pst.cy{ background:var(--cyan); } .wpane .pst.gr{ background:var(--green); } .wpane .pst.ye{ background:var(--yellow); }
  .wpane .pst.vi{ background:var(--purple); color:#FFFEF7; } .wpane .pst.or{ background:var(--orange); } .wpane .pst.mg{ background:var(--magenta); color:#FFFEF7; }

  .wpane .pmodes{ flex:1; display:flex; flex-direction:column; justify-content:space-around; min-height:0; }
  .wpane .mrow{ display:flex; align-items:center; gap:10px; }
  .wpane .mic{ width:34px; height:34px; flex:none; border:2.5px solid var(--line); box-shadow:2px 2px 0 var(--line); display:grid; place-items:center; font-size:17px; }
  .wpane .mnm{ font-family:var(--fd); font-size:14px; width:120px; flex:none; } html[data-skin="neon"] .wpane .mnm{ color:#FFFEF7; }
  .wpane .mbar{ flex:1; height:13px; border:2.5px solid var(--line); background:var(--card); position:relative; overflow:hidden; }
  .wpane .mbar i{ position:absolute; inset:0 auto 0 0; background:var(--green); }
  .wpane .mpct{ font-family:var(--fd); font-size:14px; width:44px; text-align:right; flex:none; } html[data-skin="neon"] .wpane .mpct{ color:var(--yellow); }

  .wpane .pbadges{ flex:1; display:grid; grid-template-columns:repeat(6,1fr); gap:9px; min-height:0; }
  .wpane .pbadge{ border:2.5px solid var(--line); box-shadow:2px 2px 0 var(--line); display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px; background:var(--card); }
  .wpane .pbadge .e{ font-size:24px; } .wpane .pbadge .n{ font-family:var(--fd); font-size:8px; letter-spacing:.2px; text-align:center; } html[data-skin="neon"] .wpane .pbadge .n{ color:#FFFEF7; }
  .wpane .pbadge.got{ background:var(--yellow); color:var(--ink); } .wpane .pbadge.lock{ opacity:.5; } .wpane .pbadge.lock .e{ filter:grayscale(1); }

  .wpane .sum{ justify-content:center; cursor:default; } .wpane .sum[data-wsub]{ cursor:pointer; }
  .wpane .sumv{ font-family:var(--fd); font-size:40px; line-height:.95; } html[data-skin="neon"] .wpane .sumv{ color:#FFFEF7; }
  .wpane .sumd{ font-family:var(--fb); font-weight:700; font-size:9px; letter-spacing:.5px; color:var(--mut); margin-top:4px; }
  .wpane .sumrow{ display:flex; align-items:center; }
  .wpane .foot{ flex:none; margin-top:9px; text-align:center; font-size:10px; letter-spacing:1px; color:var(--mut); }
}


/* ════════════════════════════════════════════════════════════════════════
   COLONNE WEB — tout écran qui n'a pas encore sa version grand écran
   ------------------------------------------------------------------------
   `body.web-col` est posé par app.js › show(). L'écran mobile s'affiche TEL
   QUEL, dans une colonne centrée qui défile, sur le fond pointillé de l'app.
   Rien n'est étiré (règle web : grossir n'embellit pas) et plus aucun écran
   ne tombe sur le mur « en travaux ». Le mobile (< 1024 px) n'est pas touché.
   ════════════════════════════════════════════════════════════════════════ */
@media (min-width: 1024px) {
  body.web-col .topbar, body.web-col .bottom-nav { display: none !important; }
  body.web-col {
    overflow: hidden !important;
    background: #F4EEDF radial-gradient(rgba(10, 10, 10, .07) 1.4px, transparent 1.5px) !important;
    background-size: 22px 22px !important;
  }
  html[data-skin="neon"] body.web-col { background: #0E0814 !important; }
  body.web-col .sec.active {
    position: fixed !important; top: 0 !important; bottom: 0 !important; left: 50% !important; right: auto !important;
    width: min(560px, 100vw) !important; max-width: none !important; height: auto !important; margin: 0 !important;
    transform: translateX(-50%) !important;
    overflow-y: auto !important; overflow-x: hidden !important; display: block !important;
    background: var(--app-bg, #FFFEF7) !important;
    border-inline: 4px solid #0A0A0A !important; box-shadow: 10px 0 0 #0A0A0A !important;
    padding-bottom: 40px !important;
  }
  html[data-skin="neon"] body.web-col .sec.active { box-shadow: 10px 0 0 #FF2E93 !important; }
  /* ── PLUS DE COLONNE DE TÉLÉPHONE (19/10, Edwin : « aucun écran mobile sur le web ») ──
     Tout écran sans version dédiée devient un PANNEAU LARGE centré, à la hauteur
     de son contenu, et ses blocs se rangent sur DEUX colonnes (comme APPARENCE et
     MES POTES). Les écrans qui ont besoin d'autre chose ont leur règle plus bas. */
  body.web-col .sec.active {
    width: min(1320px, 94vw) !important; top: 50% !important; bottom: auto !important; height: auto !important;
    max-height: 94vh; transform: translate(-50%, -50%) !important;
    border: 4px solid #0A0A0A !important; box-shadow: 10px 10px 0 #0A0A0A !important; padding-bottom: 0 !important;
  }
  html[data-skin="neon"] body.web-col .sec.active { box-shadow: 10px 10px 0 #FF2E93 !important; }
  /* la scène (SOLO, MAQUIS : .so-stage / .mq-stage) et son .s2 sont en absolu sur
     mobile : dans le panneau ils reprennent leur hauteur naturelle */
  body.web-col .sec.active > .s2,
  body.web-col .sec.active > [class$="-stage"],
  body.web-col .sec.active > [class$="-stage"] > .s2 { position: relative !important; inset: auto !important; height: auto !important; min-height: 0; display: block !important; }
  /* le contenu : DEUX colonnes (le conteneur était un flex : il ignorait les colonnes) */
  body.web-col .sec.active .s2 > .s2-scroll { display: block !important; height: auto !important; overflow: visible !important; column-count: 2; column-gap: 32px; padding: 16px 26px 26px !important; }
  body.web-col .sec.active .s2 > .s2-scroll > * { break-inside: avoid; margin-bottom: 12px !important; }
  body.web-col .sec.active .s2 > .s2-scroll > :first-child { margin-top: 0 !important; }
  /* un bloc seul (BOUTIQUE fermée, état vide) prend toute la largeur */
  body.web-col .sec.active .s2 > .s2-scroll > :only-child { column-span: all; }
  /* un titre de groupe reste avec ce qui le suit */
  body.web-col .sec.active .s2 > .s2-scroll > .s2-div { break-after: avoid; }
  /* les longues listes (RANGS) se coupent entre les colonnes, ligne par ligne */
  body.web-col #sec-rangs .s2 > .s2-scroll > * { break-inside: auto; }
  body.web-col #sec-rangs .s2 > .s2-scroll .listcard, body.web-col #sec-rangs .s2 > .s2-scroll .card { break-inside: avoid; }
  /* MAQUIS : beaucoup de paquets → trois colonnes */
  body.web-col #sec-maquis .s2 > .s2-scroll { column-count: 3; }
  /* responsive.css (desktop de la saison 1) élargit certaines listes en 2 colonnes
     au-delà de 1024 px : dans la colonne, on garde la mise en page mobile. */
  body.web-col #sec-potes #socialList { display: block !important; }
  body.web-col #sec-potes #socialList > * + * { margin-top: 10px; }
  body.web-col #sec-saison .szn-tiers { display: block !important; }
}

/* ── AVATARS DES ÉCRANS GRAND ÉCRAN : l'image reste DANS son cadre ──────────
   Le calque coloré (.ava-emo) mesurait 67 px dans une case de 58 (ligne de
   texte fantôme) : le fond de l'avatar débordait sous le cadre. On le cale
   bloc plein cadre, l'image en object-fit:cover, et la case coupe le reste. */
@media (min-width: 1024px) {
  :is(#webHome, #webDefis, #webStats, #webTop, #webReglages, .wpane) .pa { overflow: hidden; line-height: 0; }
  :is(#webHome, #webDefis, #webStats, #webTop, #webReglages, .wpane) .pa > .ava-emo { display: block; width: 100%; height: 100%; }
  :is(#webHome, #webDefis, #webStats, #webTop, #webReglages, .wpane) .pa .ava-emo .dbimg,
  :is(#webHome, #webDefis, #webStats, #webTop, #webReglages, .wpane) .pa .ava-emo .avimg { width: 100% !important; height: 100% !important; object-fit: cover; display: block; }
  #webReglages .eslot .pic .pa img { height: 100% !important; width: 100% !important; }
  /* PROFIL : la pastille NIV dépasse du cadre de l'avatar — le « .pa » ci-dessus
     (overflow hidden, line-height 0) l'écrasait à 4 px de haut, invisible. */
  .wpane .iav.pa { overflow: visible !important; }
  .wpane .iav > .ilv { line-height: 1.5 !important; }
}

/* ── LE THÈME CHOISI S'APPLIQUE AUSSI AUX ÉCRANS GRAND ÉCRAN ────────────────
   Les tableaux de bord (accueil, défis, stats, top, réglages, écrans internes)
   figeaient --paper / --app / --ink / --magenta : changer de thème ne changeait
   rien sur ordinateur. Les couleurs du thème sont relevées sur <html> (--th-*)
   puis données aux tableaux de bord. Le thème par défaut garde le rendu validé ;
   NÉON / SYSTEM gardent leurs propres blocs. Thème sombre : bordures et ombres
   prennent l'accent — jamais de noir sur noir. */
html { --th-paper: var(--paper); --th-app: var(--app-bg); --th-ink: var(--ink); --th-accent: var(--magenta); }
@media (min-width: 1024px) {
  html[data-theme]:not([data-theme="default"]):not([data-skin]) :is(body.web-home #webHome, body.web-defis #webDefis, body.web-stats #webStats, body.web-top #webTop, body.web-reglages #webReglages, body.web-sub .sec.active > .wpane) {
    --paper: var(--th-paper); --card: var(--th-paper); --app: var(--th-app);
    --ink: var(--th-ink); --magenta: var(--th-accent);
    --mut: color-mix(in srgb, var(--th-ink) 55%, transparent);
  }
  html[data-theme="abime"]:not([data-skin]) :is(body.web-home #webHome, body.web-defis #webDefis, body.web-stats #webStats, body.web-top #webTop, body.web-reglages #webReglages, body.web-sub .sec.active > .wpane) {
    --line: var(--th-accent);
  }
}

/* ════════════════════════════════════════════════════════════════════════
   APPARENCE GRAND ÉCRAN — trois colonnes au lieu de la colonne du téléphone
   ------------------------------------------------------------------------
   app.js › apparenceBureau() range les blocs existants dans trois `.ap-col`.
   Sous 1024 px elles sont transparentes (display:contents) : rien ne bouge.
   ════════════════════════════════════════════════════════════════════════ */
.ap-col { display: contents; }
@media (min-width: 1024px) {
  /* un panneau CENTRÉ, à la hauteur de son contenu : pleine hauteur, la moitié
     du bas restait vide (règle web : on ne gonfle pas pour remplir). */
  body.web-col #sec-apparence.sec.active {
    width: min(1480px, 96vw) !important; top: 50% !important; bottom: auto !important; height: auto !important; max-height: 94vh;
    transform: translate(-50%, -50%) !important; overflow-y: auto !important; padding-bottom: 0 !important;
    border: 4px solid #0A0A0A !important; box-shadow: 10px 10px 0 #0A0A0A !important;
  }
  html[data-skin="neon"] body.web-col #sec-apparence.sec.active { box-shadow: 10px 10px 0 #FF2E93 !important; }
  #sec-apparence > .s2 { position: relative !important; inset: auto !important; height: auto !important; min-height: 0; display: block !important; }
  #sec-apparence .s2-scroll { height: auto; overflow: visible; display: grid; grid-template-columns: 1.2fr 1fr 1fr; gap: 28px; align-items: start; padding: 18px 26px 26px; }
  #sec-apparence .ap-col > .s2-div:not(:first-child) { margin-top: 20px; }
  #sec-apparence .ap-col { display: block; min-width: 0; }
  #sec-apparence .ap-col > :first-child { margin-top: 0; }
}

/* ════════════════════════════════════════════════════════════════════════
   ÉDITEUR DE PROFIL GRAND ÉCRAN (avatars.js › editProfile, classe .pe-desk)
   ------------------------------------------------------------------------
   Une fenêtre posée sur l'écran, en deux volets : la carte du joueur et la
   liste des réglages à gauche, le réglage ouvert à droite (plus de colonne
   de téléphone de 560 px sur fond vide). Le téléphone garde son éditeur.
   ════════════════════════════════════════════════════════════════════════ */
@media (min-width: 1024px) {
  .pe-ov.pe-desk { background: color-mix(in srgb, #0A0A0A 52%, transparent); }
  .pe-desk .pe-card {
    position: absolute; left: 50%; top: 50%; translate: -50% -50%;
    width: min(1240px, 94vw); height: min(860px, 92vh); max-width: none; margin: 0;
    border: 4px solid var(--ink); box-shadow: 12px 12px 0 var(--magenta, #FF2E93);
    display: grid; grid-template-columns: 400px 1fr; grid-template-rows: auto 1fr auto;
  }
  .pe-desk .pe-top { grid-column: 1 / -1; position: relative; z-index: 1; }
  .pe-desk .pe-side { grid-column: 1; grid-row: 2 / 4; position: relative; z-index: 1; min-height: 0; overflow-y: auto;
    padding: 16px; border-right: 3px solid var(--ink); background: color-mix(in srgb, var(--yellow, #FFD600) 10%, var(--paper)); }
  .pe-desk .pe-scroll { grid-column: 2; grid-row: 2; position: relative; z-index: 1; padding: 20px 24px; }
  .pe-desk .pe-actions { grid-column: 2; grid-row: 3; position: relative; z-index: 1; }
  /* la liste des réglages : tuiles compactes, la sélectionnée enfoncée et cerclée */
  .pe-desk .pe-side .pe-hgrid { gap: 9px; }
  .pe-desk .pe-side .pe-htile { min-height: 74px; padding: 9px 10px; gap: 5px; }
  .pe-desk .pe-side .pe-htile .pe-hic { width: 32px; height: 32px; }
  .pe-desk .pe-side .pe-htile .pe-hic .pe-gif { width: 22px; height: 22px; }
  .pe-desk .pe-side .pe-htile.on { outline: 4px solid var(--ink); outline-offset: 3px; transform: translate(2px, 2px); box-shadow: 2px 2px 0 var(--ink); }
  /* le volet de droite : des grilles à la largeur de l'écran */
  .pe-desk .pe-scroll .pe-grid { grid-template-columns: repeat(auto-fill, minmax(112px, 1fr)) !important; max-height: none; }
  .pe-desk .pe-scroll .pe-flags.grid2 { display: grid !important; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)) !important; max-height: none !important; }
  .pe-desk .pe-scroll .pe-covlist { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }
  .pe-desk .pe-scroll .pe-emgrid { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)) !important; }
  .pe-desk .pe-scroll .pe-titles { display: flex; flex-wrap: wrap; gap: 10px; }
  .pe-desk .pe-scroll .pe-nick { max-width: 560px; }
}

/* ════════════════════════════════════════════════════════════════════════
   MES POTES GRAND ÉCRAN — même panneau centré qu'APPARENCE
   ------------------------------------------------------------------------
   Sans compte : la carte héros sur toute la largeur, les trois raisons côte
   à côte, le bouton Google dessous. Avec compte : les potes sur deux
   colonnes, les titres de groupe sur toute la ligne.
   ════════════════════════════════════════════════════════════════════════ */
@media (min-width: 1024px) {
  body.web-col #sec-potes.sec.active {
    width: min(1180px, 94vw) !important; top: 50% !important; bottom: auto !important; height: auto !important; max-height: 94vh;
    transform: translate(-50%, -50%) !important; overflow-y: auto !important; padding-bottom: 0 !important;
    border: 4px solid #0A0A0A !important; box-shadow: 10px 10px 0 #0A0A0A !important;
  }
  html[data-skin="neon"] body.web-col #sec-potes.sec.active { box-shadow: 10px 10px 0 #FF2E93 !important; }
  #sec-potes > .s2 { position: relative !important; inset: auto !important; height: auto !important; min-height: 0; display: block !important; }
  #sec-potes .s2-scroll { height: auto; overflow: visible; padding: 16px 26px 26px; }
  #sec-potes .sd-anon { display: grid !important; grid-template-columns: repeat(3, 1fr); gap: 16px; }
  #sec-potes .sd-anon > * { margin: 0 !important; }
  #sec-potes .sd-anon > .sd-hero { grid-column: 1 / -1; }
  #sec-potes .sd-anon > .sd-arg { margin: 0; min-height: 96px; }
  #sec-potes #sdGoogleBtn { max-width: 560px; margin: 20px auto 0; }
  body.web-col #sec-potes #socialList:not(:has(.sd-anon)) { display: grid !important; grid-template-columns: repeat(2, 1fr); gap: 12px; }
  body.web-col #sec-potes #socialList:not(:has(.sd-anon)) > * { margin: 0 !important; }
  body.web-col #sec-potes #socialList:not(:has(.sd-anon)) > :not(.listcard) { grid-column: 1 / -1; }
}

/* ════════════════════════════════════════════════════════════════════════
   SOLO EN PARTIE — GRAND ÉCRAN : plein écran, au gabarit des écrans de jeu
   de l'hôte (DC) : chrono en grand, énoncé en gros, réponses 2×2.
   La scène (#soloStage) est réécrite par solo.js à chaque étape : on vise ses
   classes. Le réglage de partie (avant) reste le panneau à deux colonnes.
   ════════════════════════════════════════════════════════════════════════ */
@media (min-width: 1024px) {
  body.web-col #sec-solo.active:has(#soloStage > .ghdr),
  body.web-col #sec-solo.active:has(#soloStage > .so-clsscreen) {
    top: 0 !important; left: 0 !important; right: 0 !important; bottom: 0 !important; width: 100vw !important; height: 100vh !important; max-height: none;
    transform: none !important; border: 0 !important; box-shadow: none !important; overflow: hidden !important;
    background: #F4EEDF radial-gradient(rgba(10, 10, 10, .08) 1.4px, transparent 1.6px) !important; background-size: 22px 22px !important;
  }
  #sec-solo #soloStage:has(> .ghdr), #sec-solo #soloStage:has(> .so-clsscreen) {
    position: absolute !important; inset: 0 !important; height: auto !important; display: flex !important; flex-direction: column;
    max-width: 1500px; margin: 0 auto; padding: clamp(14px, 1.6vw, 28px) clamp(16px, 2vw, 36px) !important; background: none !important;
  }
  /* en-tête : ✕ · manche · chrono en grand */
  #sec-solo .ghdr { display: flex !important; align-items: center; gap: 16px; padding: 0 0 clamp(12px, 1.4vw, 22px) !important; background: none !important; border: 0 !important; }
  #sec-solo .ghdr .close { width: 52px !important; height: 52px !important; font-size: 30px !important; }
  #sec-solo .ghdr .manche { font-family: var(--fd) !important; font-size: clamp(18px, 1.5vw, 26px) !important; padding: 8px 16px !important; }
  #sec-solo .ghdr .timer { margin-left: auto; display: inline-flex !important; align-items: center; gap: 10px; height: auto !important; line-height: 1 !important; font-size: clamp(30px, 2.8vw, 52px) !important; padding: 6px 18px !important; }
  /* la question et les réponses */
  #sec-solo .so-body { flex: 1; min-height: 0; display: flex !important; flex-direction: column; gap: clamp(14px, 1.6vw, 26px) !important; overflow: hidden !important; padding: 0 !important; }
  #sec-solo .so-body .type-pill .bd { font-size: clamp(14px, 1.1vw, 20px) !important; padding: 8px 16px !important; }
  #sec-solo .so-body .q-score { font-family: var(--fd); font-size: clamp(20px, 1.6vw, 30px) !important; }
  #sec-solo .so-qcard .bd { font-size: clamp(30px, 2.8vw, 56px) !important; line-height: 1.08 !important; padding: clamp(18px, 2vw, 34px) !important; border-width: 5px !important; }
  #sec-solo .so-qcard .sh { top: 8px !important; left: 8px !important; right: -8px !important; bottom: -8px !important; }
  #sec-solo .so-body .answer-zone { flex: 1; min-height: 0; display: grid !important; grid-template-columns: 1fr 1fr; grid-auto-rows: 1fr; gap: clamp(14px, 1.6vw, 26px) !important; margin: 0 !important; padding: 0 0 8px !important; }
  #sec-solo .so-body .answer-zone .opt { height: auto !important; min-height: 0 !important; margin: 0 !important; transform: none !important; rotate: none !important; }
  #sec-solo .so-body .answer-zone .opt > .bd { height: 100%; padding: clamp(14px, 1.4vw, 24px) clamp(16px, 1.6vw, 28px) !important; gap: clamp(14px, 1.4vw, 24px) !important; border-width: 5px !important; }
  #sec-solo .so-body .answer-zone .opt > .sh { top: 8px !important; left: 8px !important; right: -8px !important; bottom: -8px !important; }
  #sec-solo .so-body .answer-zone .opt .lbox { width: clamp(52px, 4.2vw, 80px) !important; height: clamp(52px, 4.2vw, 80px) !important; font-size: clamp(28px, 2.4vw, 46px) !important; border-width: 3px !important; }
  #sec-solo .so-body .answer-zone .opt .text { font-size: clamp(26px, 2.4vw, 48px) !important; }
  #sec-solo .so-foot { flex: none; margin-top: 10px !important; }
  /* le classement entre deux questions, et le résultat : un panneau centré */
  #sec-solo .so-clsscreen { width: min(1100px, 100%); margin: auto !important; display: flex !important; flex-direction: column; gap: 14px !important; overflow: visible !important; }
  #sec-solo .so-clsscreen .so-cup { font-size: 64px; }
  #sec-solo .so-clsscreen .so-clsttl { font-size: clamp(40px, 3.6vw, 70px) !important; }
  #sec-solo .so-lr { padding: 14px 20px !important; gap: 18px !important; border-width: 4px !important; box-shadow: 6px 6px 0 var(--ink) !important; }
  #sec-solo .so-lr .so-nm, #sec-solo .so-lr .so-sc { font-size: clamp(22px, 1.9vw, 36px) !important; }
  #sec-solo .so-lr .so-av { width: 54px !important; height: 54px !important; }
  #sec-solo .so-lr .so-rk { font-size: clamp(22px, 1.9vw, 34px) !important; min-width: 1.6em; }
  #sec-solo .so-next, #sec-solo .so-go { font-size: clamp(20px, 1.6vw, 30px) !important; padding: 18px !important; }
}

/* MAQUIS EN PARTIE (≥1024) : la table occupe tout l'écran — ses calques (tapis,
   plaque, écran, barre) sont en absolu dans la scène, comme sur le téléphone ;
   le contenu de jeu est recentré dans une colonne de table large. */
@media (min-width: 1024px) {
  body.web-col #sec-maquis.active:has(#mqStage:not([data-s2])) {
    top: 0 !important; left: 0 !important; right: 0 !important; bottom: 0 !important; width: 100vw !important; height: 100vh !important; max-height: none;
    transform: none !important; border: 0 !important; box-shadow: none !important; overflow: hidden !important;
  }
  body.web-col #sec-maquis #mqStage:not([data-s2]) { position: absolute !important; inset: 0 !important; height: auto !important; }
  body.web-col #sec-maquis #mqStage:not([data-s2]) > .scr { left: 50% !important; right: auto !important; width: min(1100px, 92vw) !important; transform: translateX(-50%); }
  body.web-col #sec-maquis #mqStage:not([data-s2]) > .barre { left: 50% !important; right: auto !important; width: min(1100px, 92vw) !important; transform: translateX(-50%); }
  body.web-col #sec-maquis #mqStage:not([data-s2]) { zoom: 1.25; }
}