/* ════════════════════════════════════════════════════════════════════════
   ÉCRANS INTERNES EN MAÇONNERIE — série saison2-web-06 → 21 (validée le 19/10)
   ------------------------------------------------------------------------
   Maquettes : brandnew/drafts/saison2-web-06-solo.html … 21-mes-quiz.html.
   Leur CSS de composants, recopié tel quel, préfixé .wpane.wp2 (le socle
   .wpane — nav, briques, tokens light/néon — vient de web-common.css).
   Rempli par public/js/web-panes.js. Grand écran uniquement : le mobile
   n'est jamais touché.
   ════════════════════════════════════════════════════════════════════════ */
@media (min-width: 1024px) {
  .wpane.wp2[hidden]{display:none !important}
  .wpane.wp2 .bento{grid-template-columns:repeat(var(--cols,4),1fr);grid-template-rows:repeat(var(--rows,8),1fr)}
  .wpane.wp2 .h6{grid-row:span 6}.wpane.wp2 .h7{grid-row:span 7}.wpane.wp2 .h8{grid-row:span 8}
  .wpane.wp2 [data-px]{cursor:pointer}
  .wpane.wp2 .tile2.fill-o{background:var(--orange)} .wpane.wp2 .tile2.fill-y{background:var(--yellow)}
  /* avatars (joueur, bots) : l'image tient dans sa case */
  .wpane.wp2 .seat .av{overflow:hidden}
  .wpane.wp2 .seat .av :is(img,svg){width:78%;height:78%;object-fit:contain;display:block}
  .wpane.wp2 .seat .av > .avatar, .wpane.wp2 .seat .av > span{width:100%;height:100%;display:grid;place-items:center}
  /* les choix se partagent la hauteur de leur brique, sans déborder */
  .wpane.wp2 .seg{grid-auto-rows:1fr;min-height:0}
  .wpane.wp2 .seg .o{min-height:0;padding:2px 4px;overflow:hidden}
  .wpane.wp2 .back{width:52px;height:52px;flex:none;border:var(--bdf) solid var(--line);background:var(--card);box-shadow:var(--sh) var(--sh) 0 var(--line);
    font-family:var(--fd);font-size:26px;display:grid;place-items:center;cursor:pointer;color:inherit}
  html[data-skin="neon"] .wpane.wp2 .back{color:#FFFEF7}
  .wpane.wp2 .ptitle{font-family:var(--fd);font-size:30px;letter-spacing:1px;white-space:nowrap}
  html[data-skin="neon"] .wpane.wp2 .ptitle{color:#FFFEF7}
  .wpane.wp2 .hero{background:var(--cyan);color:var(--ink);box-shadow:var(--shf) var(--shf) 0 var(--line);justify-content:space-between}
  html[data-skin="neon"] .wpane.wp2 .hero{box-shadow:var(--shf) var(--shf) 0 var(--yellow)}
  .wpane.wp2 .hero::before{content:'';position:absolute;inset:0;opacity:.13;background-image:radial-gradient(#0A0A0A 1.6px,transparent 1.7px);background-size:15px 15px}
  .wpane.wp2 .hero>*{position:relative}
  .wpane.wp2 .hero .top{display:flex;align-items:center;gap:16px}
  .wpane.wp2 .hero .tile{width:84px;height:84px;flex:none;border:var(--bdf) solid var(--line);box-shadow:var(--sh) var(--sh) 0 var(--line);background:var(--paper);display:grid;place-items:center;font-size:46px;transform:rotate(-3deg)}
  html[data-skin="neon"] .wpane.wp2 .hero .tile{background:#FFFEF7}
  .wpane.wp2 .hero .nm{font-family:var(--fd);font-size:44px;line-height:.95;white-space:nowrap}
  .wpane.wp2 .hero .sub{font-family:var(--fb);font-weight:700;font-size:11px;letter-spacing:1px;margin-top:6px}
  .wpane.wp2 .hero .pill{margin-left:auto;align-self:flex-start;font-family:var(--fd);font-size:15px;background:var(--paper);color:var(--ink);padding:7px 12px;border:var(--bd) solid var(--line);box-shadow:3px 3px 0 var(--line)}
  html[data-skin="neon"] .wpane.wp2 .hero .pill{background:#FFFEF7}
  .wpane.wp2 .hero .ghost{position:absolute;right:-18px;bottom:-26px;font-size:150px;opacity:.16;transform:rotate(-12deg)}
  .wpane.wp2 .seg{display:grid;gap:10px;flex:1;min-height:0}
  .wpane.wp2 .seg .o{border:var(--bd) solid var(--line);box-shadow:4px 4px 0 var(--line);background:var(--card);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;cursor:pointer;color:inherit}
  html[data-skin="neon"] .wpane.wp2 .seg .o{color:#FFFEF7}
  .wpane.wp2 .seg .o .e{font-size:30px;height:34px}
  .wpane.wp2 .seg .o .n{font-family:var(--fd);font-size:17px;letter-spacing:.5px;white-space:nowrap}
  .wpane.wp2 .seg .o .d{font-family:var(--fb);font-weight:700;font-size:9px;letter-spacing:.4px;opacity:.7}
  .wpane.wp2 .seg .o.on{background:var(--magenta);color:#FFFEF7;box-shadow:4px 4px 0 var(--line)}
  .wpane.wp2 .seg .o.on .d{opacity:.9}
  .wpane.wp2 .note{font-family:var(--fb);font-weight:700;font-size:10px;letter-spacing:.5px;color:var(--mut);margin-top:9px;flex:none}
  html[data-skin="neon"] .wpane.wp2 .note{color:#CFC3CE}
  .wpane.wp2 .table{flex:1;display:flex;flex-direction:column;gap:11px;min-height:0}
  .wpane.wp2 .seat{flex:1;display:flex;align-items:center;gap:13px;border:var(--bd) solid var(--line);box-shadow:4px 4px 0 var(--line);background:var(--card);padding:0 14px}
  .wpane.wp2 .seat .av{width:52px;height:52px;flex:none;border:var(--bd) solid var(--line);box-shadow:3px 3px 0 var(--line);display:grid;place-items:center;font-size:28px}
  .wpane.wp2 .seat .nm{font-family:var(--fd);font-size:20px;line-height:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  html[data-skin="neon"] .wpane.wp2 .seat .nm{color:#FFFEF7}
  .wpane.wp2 .seat .d{font-family:var(--fb);font-weight:700;font-size:10px;letter-spacing:.5px;color:var(--mut);margin-top:4px}
  html[data-skin="neon"] .wpane.wp2 .seat .d{color:#CFC3CE}
  .wpane.wp2 .seat .tag{margin-left:auto;font-family:var(--fd);font-size:13px;letter-spacing:1px;padding:5px 11px;border:var(--bd) solid var(--line);box-shadow:2px 2px 0 var(--line);background:var(--card);color:inherit}
  html[data-skin="neon"] .wpane.wp2 .seat .tag{color:#FFFEF7}
  .wpane.wp2 .seat.me{background:var(--yellow);color:var(--ink)}
  html[data-skin="neon"] .wpane.wp2 .seat.me .nm{color:var(--ink)}
  html[data-skin="neon"] .wpane.wp2 .seat.me .d{color:rgba(10,10,10,.6)}
  .wpane.wp2 .seat.me .tag{background:var(--magenta);color:#FFFEF7}
  .wpane.wp2 .seat .bar{width:110px;height:12px;border:2.5px solid var(--line);background:var(--card);position:relative;overflow:hidden;margin-top:6px}
  .wpane.wp2 .seat .bar i{position:absolute;inset:0 auto 0 0;background:var(--green)}
  .wpane.wp2 .rule{background:#0A0A0A;color:#FFFEF7;box-shadow:var(--sh) var(--sh) 0 var(--magenta);justify-content:center;gap:10px}
  .wpane.wp2 .rule .k{font-family:var(--fd);font-size:22px;color:var(--yellow);display:flex;align-items:center;gap:9px;white-space:nowrap}
  .wpane.wp2 .rule .d{font-family:var(--fb);font-weight:700;font-size:10.5px;letter-spacing:.5px;line-height:1.5;opacity:.85}
  .wpane.wp2 .rule .pts{display:flex;gap:8px}
  .wpane.wp2 .rule .pts span{font-family:var(--fd);font-size:15px;padding:6px 10px;border:2.5px solid #FFFEF7}
  .wpane.wp2 .rule .pts span.y{background:var(--yellow);color:var(--ink);border-color:var(--yellow)}
  .wpane.wp2 .off{justify-content:center;gap:10px}
  .wpane.wp2 .off .row{display:flex;align-items:center;gap:12px}
  .wpane.wp2 .off .ic{width:46px;height:46px;flex:none;border:var(--bd) solid var(--line);box-shadow:3px 3px 0 var(--line);display:grid;place-items:center;font-size:24px;background:var(--orange)}
  .wpane.wp2 .off .t{font-family:var(--fd);font-size:19px;line-height:1.05}
  html[data-skin="neon"] .wpane.wp2 .off .t{color:#FFFEF7}
  .wpane.wp2 .off .d{font-family:var(--fb);font-weight:700;font-size:10px;letter-spacing:.4px;color:var(--mut);margin-top:3px;line-height:1.4}
  html[data-skin="neon"] .wpane.wp2 .off .d{color:#CFC3CE}
  .wpane.wp2 .go{background:var(--green);color:var(--ink);box-shadow:var(--shf) var(--shf) 0 var(--line);justify-content:center;align-items:center;cursor:pointer;gap:6px}
  html[data-skin="neon"] .wpane.wp2 .go{box-shadow:var(--shf) var(--shf) 0 var(--magenta)}
  .wpane.wp2 .go .t{font-family:var(--fd);font-size:46px;letter-spacing:2px;line-height:1;display:flex;align-items:center;gap:14px;white-space:nowrap}
  .wpane.wp2 .go .d{font-family:var(--fb);font-weight:700;font-size:11px;letter-spacing:1px}
  .wpane.wp2 .go:active{transform:translate(3px,3px);box-shadow:3px 3px 0 var(--line)}
  .wpane.wp2 .foot{flex:none;margin-top:9px;text-align:center;font-size:10px;letter-spacing:1px;color:var(--mut)}
  .wpane.wp2 .li{display:flex;align-items:center;gap:12px;border:var(--bd) solid var(--line);box-shadow:4px 4px 0 var(--line);background:var(--card);padding:10px 13px;min-height:0}
  .wpane.wp2 .li .ic{width:44px;height:44px;flex:none;border:var(--bd) solid var(--line);box-shadow:3px 3px 0 var(--line);display:grid;place-items:center;font-size:23px;background:var(--yellow)}
  .wpane.wp2 .li .nm{font-family:var(--fd);font-size:17px;line-height:1.05;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  html[data-skin="neon"] .wpane.wp2 .li .nm{color:#FFFEF7}
  .wpane.wp2 .li .d{font-family:var(--fb);font-weight:700;font-size:9.5px;letter-spacing:.4px;color:var(--mut);margin-top:3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  html[data-skin="neon"] .wpane.wp2 .li .d{color:#CFC3CE}
  .wpane.wp2 .li .tx{min-width:0;flex:1}
  .wpane.wp2 .li .pl{margin-left:auto;flex:none;font-family:var(--fd);font-size:13px;letter-spacing:.5px;padding:5px 10px;border:var(--bd) solid var(--line);box-shadow:2px 2px 0 var(--line);background:var(--yellow);color:var(--ink);white-space:nowrap}
  .wpane.wp2 .li .pl.cy{background:var(--cyan)}
  .wpane.wp2 .li .pl.gr{background:var(--green)}
  .wpane.wp2 .li .pl.mg{background:var(--magenta);color:#FFFEF7}
  .wpane.wp2 .li .pl.wh{background:var(--paper);color:var(--ink)}
  .wpane.wp2 .li .chev{margin-left:auto;font-family:var(--fd);font-size:22px}
  html[data-skin="neon"] .wpane.wp2 .li .chev{color:#FFFEF7}
  .wpane.wp2 .li[class*=fill-] .ic{color:#0A0A0A;font-family:var(--fd);font-size:20px}
  .wpane.wp2 .li.lock{opacity:.55}
  .wpane.wp2 .li.lock .ic{filter:grayscale(1)}
  .wpane.wp2 .li.hot{background:var(--yellow);color:var(--ink)}
  html[data-skin="neon"] .wpane.wp2 .li.hot .nm{color:var(--ink)}
  html[data-skin="neon"] .wpane.wp2 .li.hot .d{color:rgba(10,10,10,.6)}
  .wpane.wp2 .list{flex:1;display:flex;flex-direction:column;gap:9px;min-height:0}
  .wpane.wp2 .list.fill .li{flex:1}
  .wpane.wp2 .sw{margin-left:auto;flex:none;display:flex;border:var(--bd) solid var(--line);box-shadow:3px 3px 0 var(--line)}
  .wpane.wp2 .sw span{font-family:var(--fd);font-size:13px;letter-spacing:1px;padding:6px 11px;background:var(--card);color:var(--mut)}
  .wpane.wp2 .sw span.on{background:var(--green);color:var(--ink)}
  .wpane.wp2 .sw.off span.on{background:var(--paper);color:var(--ink)}
  html[data-skin="neon"] .wpane.wp2 .sw.off span.on{background:#FFFEF7}
  .wpane.wp2 .big{font-family:var(--fd);font-size:84px;line-height:.85}
  html[data-skin="neon"] .wpane.wp2 .big{color:#FFFEF7}
  .wpane.wp2 .bigl{font-family:var(--fb);font-weight:700;font-size:11px;letter-spacing:1px;color:var(--mut)}
  html[data-skin="neon"] .wpane.wp2 .bigl{color:#CFC3CE}
  .wpane.wp2 .lede{font-family:var(--fb);font-weight:700;font-size:11px;letter-spacing:.5px;line-height:1.55;color:var(--mut)}
  html[data-skin="neon"] .wpane.wp2 .lede{color:#CFC3CE}
  .wpane.wp2 .fill-y{background:var(--yellow);color:#0A0A0A}
  .wpane.wp2 .fill-c{background:var(--cyan);color:#0A0A0A}
  .wpane.wp2 .fill-g{background:var(--green);color:#0A0A0A}
  .wpane.wp2 .fill-m{background:var(--magenta);color:#FFFEF7}
  .wpane.wp2 .fill-o{background:var(--orange);color:#0A0A0A}
  .wpane.wp2 .fill-p{background:var(--purple);color:#FFFEF7}
  .wpane.wp2 .fill-r{background:var(--red);color:#FFFEF7}
  .wpane.wp2 .fill-b{background:var(--bleu);color:#FFFEF7}
  .wpane.wp2 :is(.fill-y, .wpane.wp2 .fill-c, .wpane.wp2 .fill-g, .wpane.wp2 .fill-o) .ttl{color:rgba(10,10,10,.6)}
  .wpane.wp2 :is(.fill-m, .wpane.wp2 .fill-p, .wpane.wp2 .fill-r, .wpane.wp2 .fill-b) .ttl{color:rgba(255,254,247,.8)}
  html[data-skin="neon"] .wpane.wp2 :is(.fill-y, .wpane.wp2 .fill-c, .wpane.wp2 .fill-g, .wpane.wp2 .fill-o) .ttl{color:rgba(10,10,10,.65)}
  html[data-skin="neon"] .wpane.wp2 :is(.fill-m, .wpane.wp2 .fill-p, .wpane.wp2 .fill-r, .wpane.wp2 .fill-b) .ttl{color:rgba(255,254,247,.85)}
  .wpane.wp2 .li[class*=fill-] .ic{background:#FFFEF7}
  html[data-skin="neon"] .wpane.wp2 .li:is(.fill-y, .wpane.wp2 .fill-c, .wpane.wp2 .fill-g, .wpane.wp2 .fill-o) :is(.nm, .wpane.wp2 .d){color:#0A0A0A}
  .wpane.wp2 .li .pl.wh{background:#FFFEF7;color:#0A0A0A}
  .wpane.wp2 .dots::before{content:'';position:absolute;inset:0;opacity:.13;background-image:radial-gradient(#0A0A0A 1.6px,transparent 1.7px);background-size:15px 15px;pointer-events:none}
  .wpane.wp2 .dots>*{position:relative}
  .wpane.wp2 .ghost2{position:absolute;right:-14px;bottom:-22px;font-size:130px;opacity:.15;transform:rotate(-12deg);pointer-events:none}
  .wpane.wp2 .tiles{display:grid;gap:10px;flex:1;min-height:0}
  .wpane.wp2 .tile2{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:4px;background:var(--card);position:relative;overflow:hidden;min-height:0}
  .wpane.wp2 .tile2 .e{font-size:26px}
  .wpane.wp2 .tile2 .n{font-family:var(--fd);font-size:13px;letter-spacing:.4px;white-space:nowrap}
  html[data-skin="neon"] .wpane.wp2 .tile2 .n{color:#FFFEF7}
  .wpane.wp2 .tile2 .s{font-family:var(--fb);font-weight:700;font-size:8.5px;letter-spacing:.4px;opacity:.7}
  .wpane.wp2 .tile2.on{background:var(--yellow);color:var(--ink)}
  html[data-skin="neon"] .wpane.wp2 .tile2.on .n{color:var(--ink)}
  .wpane.wp2 .tile2.off{opacity:.45}
  .wpane.wp2 .tick{position:absolute;top:5px;right:5px;width:20px;height:20px;border:2.5px solid var(--line);background:var(--green)}
  .wpane.wp2 .tick::after{content:'';position:absolute;left:5px;top:1px;width:5px;height:10px;border:solid #0A0A0A;border-width:0 3px 3px 0;transform:rotate(45deg)}
  .wpane.wp2 .cad{display:inline-block;width:14px;height:12px;border:2.5px solid currentColor;position:relative;margin-top:5px}
  .wpane.wp2 .cad::before{content:'';position:absolute;left:1px;top:-9px;width:6px;height:7px;border:2.5px solid currentColor;border-bottom:0}
  .wpane.wp2 .bar2{height:16px;border:var(--bd) solid var(--line);background:var(--card);position:relative;overflow:hidden}
  .wpane.wp2 .bar2 i{position:absolute;inset:0 auto 0 0;background:var(--yellow)}
  .wpane.wp2 .soon{font-family:var(--fd);font-size:13px;letter-spacing:1px;padding:5px 10px;background:var(--yellow);color:#0A0A0A;border:var(--bd) solid var(--line);transform:rotate(-3deg);box-shadow:2px 2px 0 var(--line)}
  .wpane.wp2 .btnx{border:var(--bd) solid var(--line);box-shadow:4px 4px 0 var(--line);font-family:var(--fd);font-size:17px;letter-spacing:.8px;display:flex;align-items:center;justify-content:center;gap:9px;cursor:pointer;flex:1;min-height:0}
  .wpane.wp2 .row2{display:flex;gap:11px;flex:1;min-height:0}
  .wpane.wp2 .h1{grid-row:span 1}
  .wpane.wp2 .h3{grid-row:span 3}
  .wpane.wp2 .h5{grid-row:span 5}
  .wpane.wp2 .h6{grid-row:span 6}
  .wpane.wp2 .h8{grid-row:span 8}
  .wpane.wp2 .w3{grid-column:span 3}
  .wpane.wp2 .w1{grid-column:span 1}
}


/* ════════ 07 · RAFALE EN MAÇONNERIE (rafale-web.js) ════════
   La scène du moteur (rafale.js) devient la grande brique de gauche ;
   score / série / record / clavier / règle en briques à droite.
   Pas de .wpane ici : son « all: revert » casserait la scène mobile. */
@media (min-width: 1024px) {
  #sec-rafale .rf-web.rf-masonry{
    --paper:#FFFEF7;--ink:#0A0A0A;--magenta:#FF2E93;--yellow:#FFD600;--cyan:#5BD8E5;--green:#5BE885;--bleu:#4D7CFF;
    --card:#FFFEF7;--line:#0A0A0A;--mut:rgba(10,10,10,.55);--bd:3px;--bdf:4px;--sh:5px;--shf:6px;
    position:absolute;inset:0;display:flex;flex-direction:column;align-items:stretch;justify-content:flex-start;gap:0;
    padding:14px 24px 14px;color:var(--ink);font-family:var(--fb,'IBM Plex Mono',monospace);
    background:#F4EEDF radial-gradient(rgba(10,10,10,.07) 1.4px,transparent 1.5px);background-size:22px 22px}
  html[data-skin="neon"] #sec-rafale .rf-web.rf-masonry{--card:#221430;--mut:#CFC3CE;color:#FFFEF7;
    background:#0E0814 repeating-linear-gradient(30deg,rgba(255,255,255,.04) 0 6px,transparent 6px 26px)}
  #sec-rafale.sec.active:has(.rf-masonry){background:#F4EEDF}
  html[data-skin="neon"] #sec-rafale.sec.active:has(.rf-masonry){background:#0E0814}
  #sec-rafale:has(.rf-masonry) > .rf-close{display:none}
  #sec-rafale .rf-masonry img.em{height:1em;width:auto;vertical-align:-.15em}

  /* la barre du haut — celle des écrans internes */
  #sec-rafale .rf-nav{display:flex;align-items:center;gap:12px;margin:0 auto 14px;flex:none;width:100%;max-width:1500px}
  #sec-rafale .rf-nav .logo{height:58px;width:auto;display:block}
  #sec-rafale .rf-nav .back{width:52px;height:52px;border:var(--bdf) solid var(--line);background:var(--card);box-shadow:var(--sh) var(--sh) 0 var(--line);font-family:var(--fd);font-size:26px;display:grid;place-items:center;cursor:pointer;color:inherit;padding:0}
  #sec-rafale .rf-nav .ptitle{font-family:var(--fd);font-size:30px;letter-spacing:1px}
  #sec-rafale .rf-nav .sp{flex:1}
  #sec-rafale .rf-nav .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(--yellow);color:#0A0A0A;box-shadow:var(--sh) var(--sh) 0 var(--line)}
  #sec-rafale .rf-nav .toggle{display:flex;border:var(--bd) solid var(--line);box-shadow:var(--sh) var(--sh) 0 var(--line);cursor:pointer}
  #sec-rafale .rf-nav .toggle span{font-family:var(--fd);font-size:14px;letter-spacing:1px;padding:8px 13px;background:var(--card);color:var(--mut)}
  #sec-rafale .rf-nav .toggle span.on{background:var(--magenta);color:#FFFEF7}
  #sec-rafale .rf-nav .ava{width:52px;height:52px;border:var(--bdf) solid var(--line);box-shadow:var(--sh) var(--sh) 0 var(--magenta);background:var(--cyan);display:grid;place-items:center;overflow:hidden;cursor:pointer}
  #sec-rafale .rf-nav .ava > *{width:100%;height:100%}

  /* la grille : la carte (w2 h8) + les briques */
  #sec-rafale .rf-grid{flex:1;min-height:0;width:100%;max-width:1500px;margin:0 auto;display:grid;grid-template-columns:repeat(4,1fr);grid-template-rows:repeat(8,1fr);gap:13px}
  #sec-rafale .rf-masonry .rf-stage{grid-column:span 2;grid-row:span 8;position:relative;inset:auto;left:auto;right:auto;top:auto;transform:none;
    width:auto;max-width:none;height:auto;min-height:0;flex:none;margin:0;overflow:hidden;
    border:var(--bdf) solid var(--line);box-shadow:var(--sh) var(--sh) 0 var(--line)}
  html[data-skin="neon"] #sec-rafale .rf-masonry .rf-stage{box-shadow:var(--sh) var(--sh) 0 var(--magenta)}
  #sec-rafale .rf-bricks{display:contents}
  /* la barre « ‹ RAFALE · RECORD » de la carte fait doublon avec la barre du haut (son retour reste piloté par elle) */
  #sec-rafale .rf-masonry .rf-stage .top.s2-bar{display:none}
  #sec-rafale .rfb{grid-row:span 3;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;justify-content:center;overflow:hidden;position:relative}
  html[data-skin="neon"] #sec-rafale .rfb{box-shadow:var(--sh) var(--sh) 0 var(--magenta)}
  #sec-rafale .rfb .k{font-family:var(--fd);font-size:12px;letter-spacing:1.4px;color:var(--mut);display:flex;align-items:center;gap:8px;margin-bottom:6px}
  #sec-rafale .rfb .v{font-family:var(--fd);font-size:84px;line-height:.85}
  #sec-rafale .rfb .n{font-family:var(--fb);font-weight:700;font-size:11px;letter-spacing:1px;color:var(--mut);margin-top:6px}
  #sec-rafale .rfb.mg{background:var(--magenta);color:#FFFEF7}
  #sec-rafale .rfb.ye{background:var(--yellow);color:#0A0A0A}
  #sec-rafale .rfb:is(.mg,.ye)::before{content:'';position:absolute;inset:0;opacity:.13;background-image:radial-gradient(#0A0A0A 1.6px,transparent 1.7px);background-size:15px 15px;pointer-events:none}
  #sec-rafale .rfb.mg .k{color:rgba(255,254,247,.85)} #sec-rafale .rfb.ye .k,#sec-rafale .rfb.ye .n{color:rgba(10,10,10,.65)}
  #sec-rafale .rfb.ye .n{font-family:var(--fd);font-size:16px;letter-spacing:.5px}
  #sec-rafale .rfb .kb{display:flex;align-items:center;gap:12px;border:var(--bd) solid var(--line);box-shadow:4px 4px 0 var(--line);background:var(--card);padding:9px 12px;margin-top:9px}
  #sec-rafale .rfb .kb .key{font-family:var(--fd);font-size:13px;padding:5px 10px;border:var(--bd) solid var(--line);background:#FFFEF7;color:#0A0A0A;white-space:nowrap}
  #sec-rafale .rfb .kb b{font-family:var(--fd);font-weight:400;font-size:17px}
  #sec-rafale .rfb.ink{grid-column:span 2;grid-row:span 2;background:#0A0A0A;color:#FFFEF7;box-shadow:var(--sh) var(--sh) 0 var(--magenta);gap:10px}
  #sec-rafale .rfb.ink .kk{font-family:var(--fd);font-size:22px;color:var(--yellow);display:flex;align-items:center;gap:9px}
  #sec-rafale .rfb.ink .d{font-family:var(--fb);font-weight:700;font-size:10.5px;letter-spacing:.5px;line-height:1.5;opacity:.85}
}

/* RAFALE · la carte remplit sa brique : QCM en 4 grandes réponses, images à la
   hauteur de la carte (rafale.css force .rf-arena > * à 100 % de large : la
   grille 4 images, carrée, dépassait alors en bas et cachait l'indice). */
@media (min-width: 1024px) {
  #sec-rafale .rf-masonry #rfStage[data-s2] .rf-body{gap:14px;padding:14px 14px 8px}
  #sec-rafale .rf-masonry #rfStage[data-s2] .qcard .bd{font-size:clamp(22px,1.9vw,32px);line-height:1.1;padding:16px 20px}
  #sec-rafale .rf-masonry #rfStage[data-s2] .rf-body.rf-noarena .rf-ans.rf-opts{flex:1;min-height:0;display:grid;grid-auto-rows:1fr;gap:12px;margin:0}
  #sec-rafale .rf-masonry #rfStage[data-s2] .rf-ans.rf-opts .opt{height:auto;min-height:0;margin:0}
  #sec-rafale .rf-masonry #rfStage[data-s2] .rf-ans.rf-opts .opt .text{font-size:clamp(20px,1.6vw,28px)}
  #sec-rafale .rf-masonry #rfStage[data-s2] .rf-ans.rf-opts .opt .lbox{width:44px;height:44px;font-size:24px}
  #sec-rafale .rf-masonry #rfStage[data-s2] .rf-body.s2-scroll > .rf-arena{flex:1 1 0;min-height:0}
  #sec-rafale .rf-masonry #rfStage[data-s2] .rf-arena > .rf-grid4{width:auto;height:100%;max-width:100%;aspect-ratio:1;margin-inline:auto}
}

/* ════════ SOLO EN PARTIE EN MAÇONNERIE (solo-web.js) — gabarit RAFALE ════════ */
@media (min-width: 1024px) {
  #sec-solo .so-masonry{
    --paper:#FFFEF7;--ink:#0A0A0A;--magenta:#FF2E93;--yellow:#FFD600;--cyan:#5BD8E5;--green:#5BE885;--red:#FF5252;
    --card:#FFFEF7;--line:#0A0A0A;--mut:rgba(10,10,10,.55);--bd:3px;--bdf:4px;--sh:5px;--shf:6px;
    position:absolute;inset:0;z-index:5;display:flex;flex-direction:column;padding:14px 24px;color:var(--ink);font-family:var(--fb,'IBM Plex Mono',monospace);
    background:#F4EEDF radial-gradient(rgba(10,10,10,.07) 1.4px,transparent 1.5px);background-size:22px 22px}
  html[data-skin="neon"] #sec-solo .so-masonry{--card:#221430;--mut:#CFC3CE;color:#FFFEF7;background:#0E0814 repeating-linear-gradient(30deg,rgba(255,255,255,.04) 0 6px,transparent 6px 26px)}
  #sec-solo .so-masonry img.em{height:1em;width:auto;vertical-align:-.15em}
  /* barre du haut : mêmes règles que RAFALE */
  #sec-solo .so-masonry .rf-nav{display:flex;align-items:center;gap:12px;margin:0 auto 14px;flex:none;width:100%;max-width:1500px}
  #sec-solo .so-masonry .rf-nav .logo{height:58px;width:auto}
  #sec-solo .so-masonry .rf-nav .back{width:52px;height:52px;border:var(--bdf) solid var(--line);background:var(--card);box-shadow:var(--sh) var(--sh) 0 var(--line);font-family:var(--fd);font-size:26px;display:grid;place-items:center;cursor:pointer;color:inherit;padding:0}
  #sec-solo .so-masonry .rf-nav .ptitle{font-family:var(--fd);font-size:30px;letter-spacing:1px}
  #sec-solo .so-masonry .rf-nav .sp{flex:1}
  #sec-solo .so-masonry .rf-nav .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)}
  #sec-solo .so-masonry .rf-nav .chip.dj{background:var(--yellow);color:#0A0A0A}
  #sec-solo .so-masonry .rf-nav .toggle{display:flex;border:var(--bd) solid var(--line);box-shadow:var(--sh) var(--sh) 0 var(--line);cursor:pointer}
  #sec-solo .so-masonry .rf-nav .toggle span{font-family:var(--fd);font-size:14px;letter-spacing:1px;padding:8px 13px;background:var(--card);color:var(--mut)}
  #sec-solo .so-masonry .rf-nav .toggle span.on{background:var(--magenta);color:#FFFEF7}
  #sec-solo .so-masonry .rf-nav .ava{width:52px;height:52px;border:var(--bdf) solid var(--line);box-shadow:var(--sh) var(--sh) 0 var(--magenta);background:var(--cyan);overflow:hidden}
  #sec-solo .so-masonry .rf-nav .ava > *{width:100%;height:100%}
  /* grille : le jeu (3 col × 8) + 3 briques */
  #sec-solo .so-grid{flex:1;min-height:0;width:100%;max-width:1500px;margin:0 auto;display:grid;grid-template-columns:repeat(4,1fr);grid-template-rows:repeat(8,1fr);gap:13px}
  #sec-solo .so-slot{grid-column:span 3;grid-row:span 8;position:relative;min-height:0;border:var(--bdf) solid var(--line);background:var(--card);box-shadow:var(--sh) var(--sh) 0 var(--line);overflow:hidden}
  html[data-skin="neon"] #sec-solo .so-slot,html[data-skin="neon"] #sec-solo .so-masonry .rfb{box-shadow:var(--sh) var(--sh) 0 var(--magenta)}
  #sec-solo .so-masonry #soloStage:has(> .ghdr),#sec-solo .so-masonry #soloStage:has(> .so-clsscreen){position:absolute !important;inset:0 !important;max-width:none !important;padding:18px 20px !important;background:none !important}
  #sec-solo .so-masonry #soloStage > .ghdr{display:none !important}
  /* le classement : liste dense, plus de colonne perdue au milieu */
  #sec-solo .so-masonry .so-clsscreen{width:100% !important;max-width:none !important;margin:0 !important;justify-content:center;gap:12px !important}
  #sec-solo .so-masonry .so-clsscreen .so-cup{font-size:44px}
  #sec-solo .so-masonry .so-clsscreen .so-clsttl{font-size:clamp(34px,3vw,52px) !important}
  #sec-solo .so-masonry .so-lr{padding:10px 18px !important}
  /* briques de droite */
  #sec-solo .so-masonry .rfb{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;justify-content:center;overflow:hidden;position:relative;min-height:0}
  #sec-solo .so-masonry .rfb .k{font-family:var(--fd);font-size:12px;letter-spacing:1.4px;color:var(--mut);display:flex;align-items:center;gap:8px;margin-bottom:6px}
  #sec-solo .so-masonry .rfb .v{font-family:var(--fd);font-size:84px;line-height:.85}
  #sec-solo .so-masonry .rfb .n{font-family:var(--fb);font-weight:700;font-size:11px;letter-spacing:1px;color:var(--mut);margin-top:6px}
  #sec-solo .so-masonry .so-timer{grid-row:span 2;background:var(--yellow);color:#0A0A0A}
  #sec-solo .so-masonry .so-timer .k,#sec-solo .so-masonry .so-timer .n{color:rgba(10,10,10,.65)}
  #sec-solo .so-masonry .so-timer.urg{background:var(--red);color:#FFFEF7}
  #sec-solo .so-masonry .so-timer.urg .k,#sec-solo .so-masonry .so-timer.urg .n{color:rgba(255,254,247,.85)}
  #sec-solo .so-masonry .rfb.mg{grid-row:span 2;background:var(--magenta);color:#FFFEF7}
  #sec-solo .so-masonry .rfb.mg .k,#sec-solo .so-masonry .rfb.mg .n{color:rgba(255,254,247,.85)}
  #sec-solo .so-masonry .rfb:is(.mg,.so-timer)::before{content:'';position:absolute;inset:0;opacity:.13;background-image:radial-gradient(#0A0A0A 1.6px,transparent 1.7px);background-size:15px 15px;pointer-events:none}
  #sec-solo .so-masonry .so-tab{grid-row:span 4;justify-content:flex-start}
  #sec-solo .so-masonry .so-rows{flex:1;display:flex;flex-direction:column;gap:9px;min-height:0}
  #sec-solo .so-masonry .so-r{flex:1;max-height:70px;display:flex;align-items:center;gap:10px;border:var(--bd) solid var(--line);box-shadow:3px 3px 0 var(--line);background:var(--card);padding:0 10px}
  #sec-solo .so-masonry .so-r.me{background:var(--yellow);color:#0A0A0A}
  #sec-solo .so-masonry .so-r .rk{font-family:var(--fd);font-size:18px;width:18px}
  #sec-solo .so-masonry .so-r .av{width:36px;height:36px;flex:none;border:2.5px solid var(--line);overflow:hidden;display:grid;place-items:center}
  #sec-solo .so-masonry .so-r .av > *{width:100%;height:100%;display:grid;place-items:center}
  #sec-solo .so-masonry .so-r .av img{max-width:80%;max-height:80%}
  #sec-solo .so-masonry .so-r .nm{font-family:var(--fd);font-size:17px;flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  #sec-solo .so-masonry .so-r .sc{font-family:var(--fd);font-size:20px}
}
@media (min-width: 1024px) {
  /* la croix du classement fait doublon avec le ‹ de la barre du haut */
  #sec-solo .so-masonry #soloStage > .rf-close,
  #sec-solo .so-masonry #soloStage > .so-clsscreen ~ .close{display:none !important}
}
@media (min-width: 1024px) {
  /* la face colorée de la réponse suit la hauteur de la tuile (sinon : bande noire = l'ombre) */
  #sec-rafale .rf-masonry #rfStage[data-s2] .rf-ans.rf-opts .opt{position:relative;display:flex}
  #sec-rafale .rf-masonry #rfStage[data-s2] .rf-ans.rf-opts .opt > .bd{flex:1;height:auto;min-height:0}
}

/* ════════ 22 · MES POTES CONNECTÉ + 23 · BOUTIQUE OUVERTE (maquettes validées le 23/10) ════════ */
@media (min-width: 1024px) {
  .wpane.wp2 .okx, .wpane.wp2 .nox{width:34px;height:34px;flex:none;border:var(--bd) solid var(--line);box-shadow:2px 2px 0 var(--line);position:relative;cursor:pointer}
  .wpane.wp2 .okx{background:var(--green)}
  .wpane.wp2 .nox{background:var(--red)}
  .wpane.wp2 .okx::after{content:'';position:absolute;left:10px;top:4px;width:8px;height:15px;border:solid #0A0A0A;border-width:0 4px 4px 0;transform:rotate(45deg)}
  .wpane.wp2 .nox::before, .wpane.wp2 .nox::after{content:'';position:absolute;left:6px;right:6px;top:13px;height:4px;background:#0A0A0A;transform:rotate(45deg)}
  .wpane.wp2 .nox::after{transform:rotate(-45deg)}
  .wpane.wp2 .gift, .wpane.wp2 .del{width:34px;height:34px;flex:none;border:var(--bd) solid var(--line);box-shadow:2px 2px 0 var(--line);display:grid;place-items:center;font-size:17px;background:var(--card)}
  .wpane.wp2 .del{position:relative}
  .wpane.wp2 .del::before, .wpane.wp2 .del::after{content:'';position:absolute;left:8px;right:8px;top:14px;height:3px;background:var(--red);transform:rotate(45deg)}
  .wpane.wp2 .del::after{transform:rotate(-45deg)}
  .wpane.wp2 .pbtn{font-family:var(--fd);font-size:13px;letter-spacing:.8px;padding:7px 12px;border:var(--bd) solid var(--line);box-shadow:3px 3px 0 var(--line);white-space:nowrap;cursor:pointer}
  .wpane.wp2 .row3{display:flex;align-items:center;gap:8px;margin-left:auto;flex:none}
  .wpane.wp2 .avs{display:flex}
  .wpane.wp2 .avs span{width:46px;height:46px;border:3px solid #0A0A0A;margin-left:-10px;display:grid;place-items:center;font-size:24px;box-shadow:3px 3px 0 #0A0A0A}
  .wpane.wp2 .avs span:first-child{margin-left:0}
  .wpane.wp2 .dot{width:10px;height:10px;border:2px solid var(--line);display:inline-block;margin-right:6px}
  .wpane.wp2 .field{flex:1;border:var(--bdf) solid var(--line);background:#FFFEF7;color:#0A0A0A;font-family:var(--fd);font-size:20px;padding:12px 14px;box-shadow:4px 4px 0 var(--magenta)}
  .wpane.wp2 .stabs{display:flex;gap:8px;flex:1;align-items:center;overflow:hidden}
  .wpane.wp2 .stab{font-family:var(--fd);font-size:14px;letter-spacing:.6px;padding:8px 12px;border:var(--bd) solid var(--line);background:var(--card);box-shadow:3px 3px 0 var(--line);white-space:nowrap;display:flex;align-items:center;gap:6px}
  html[data-skin="neon"] .wpane.wp2 .stab{color:#FFFEF7}
  .wpane.wp2 .stab.on{background:var(--magenta);color:#FFFEF7}
  .wpane.wp2 .item{padding:0;gap:0}
  .wpane.wp2 .item .pv{flex:1;min-height:0;display:grid;place-items:center;position:relative;border-bottom:var(--bdf) solid var(--line)}
  .wpane.wp2 .item .ci{padding:9px 11px;display:flex;align-items:center;gap:8px}
  .wpane.wp2 .item .nm{font-family:var(--fd);font-size:15px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex:1}
  html[data-skin="neon"] .wpane.wp2 .item .nm{color:#FFFEF7}
  .wpane.wp2 .item .pr{font-family:var(--fd);font-size:14px;white-space:nowrap}
  html[data-skin="neon"] .wpane.wp2 .item .pr{color:var(--yellow)}
  .wpane.wp2 .rib{position:absolute;top:8px;left:8px;font-family:var(--fd);font-size:11px;letter-spacing:1px;padding:3px 7px;background:var(--yellow);color:#0A0A0A;border:2.5px solid #0A0A0A;transform:rotate(-4deg)}
  .wpane.wp2 .own{font-family:var(--fd);font-size:12px;letter-spacing:1px;padding:5px 9px;background:var(--green);color:#0A0A0A;border:var(--bd) solid var(--line)}
  .wpane.wp2 .buy{font-family:var(--fd);font-size:13px;letter-spacing:1px;padding:6px 10px;background:#0A0A0A;color:#FFFEF7;border:var(--bd) solid var(--line);box-shadow:3px 3px 0 var(--magenta)}
  .wpane.wp2 .fr{width:74px;height:74px;display:grid;place-items:center;font-size:40px;background:var(--yellow)}
  .wpane.wp2 input.field{outline:none}
  .wpane.wp2 .li .ic.av{overflow:hidden;padding:0} .wpane.wp2 .li .ic.av > *{width:100%;height:100%;display:grid;place-items:center}
  .wpane.wp2 .li .ic.av img{max-width:85%;max-height:85%}
  .wpane.wp2 .avs span > *, .wpane.wp2 .avs > * > *{max-width:100%;max-height:100%}
  .wpane.wp2 .avs > *{width:46px;height:46px;border:3px solid #0A0A0A;margin-left:-10px;overflow:hidden;box-shadow:3px 3px 0 #0A0A0A;display:grid;place-items:center;background:#FFFEF7}
  .wpane.wp2 .avs > *:first-child{margin-left:0}
  /* boutique : premier écran = la maquette ; le catalogue continue en dessous */
  .wpane.wp2 .bento.shopb{grid-template-rows:none;grid-auto-rows:calc((100vh - 172px) / 7);overflow-y:auto;padding:0 8px 8px 0}
  .wpane.wp2 .item .pv{overflow:hidden}
  .wpane.wp2 .item .pv img{max-width:80%;max-height:80%;object-fit:contain}
  .wpane.wp2 .fr.pvbig{width:150px;height:150px;flex:none;overflow:hidden;border:6px solid #FFD600;box-shadow:0 0 0 5px #0A0A0A,8px 8px 0 5px #0A0A0A;font-size:60px}
  .wpane.wp2 .fr.pvbig img{max-width:90%;max-height:90%}
}
@media (min-width: 1024px) {
  /* les lignes s'empilent en haut de la brique (web-common les écartait aux deux bords) */
  .wpane.wp2 .list{justify-content:flex-start !important}
  /* avatar des potes : il remplit sa case */
  .wpane.wp2 .li .ic.av .avatar, .wpane.wp2 .li .ic.av .ava-emo{width:100% !important;height:100% !important;border:0 !important;box-shadow:none !important}
  .wpane.wp2 .li .ic.av img{width:100% !important;height:100% !important;max-width:none;max-height:none;object-fit:cover}
}