/* ============================================================
   MAQUIS — peau du mode carte.
   ------------------------------------------------------------
   CE FICHIER EST UN DÉCALQUE de la maquette validée
   design-mockups/s61-maquis-enseigne.html : le bloc « MAQUETTE »
   plus bas est SA feuille de style, reprise telle quelle, chaque
   sélecteur simplement préfixé par #sec-maquis. Ne pas la
   réinterpréter : si un écran doit changer, on change la maquette
   puis on reporte ici.
   Deux blocs l'encadrent :
   · ISOLATION — l'app a déjà des classes .cta, .av, .seg, .bt…
     (proto.css : « .cta = bloc noir » et son ::before). Sans les
     neutraliser, elles repeignent les boutons de la maquette.
   · APP — ce que le cadre de maquette ne pouvait pas décrire :
     plein écran, défilement, encoches, états pressés.
   ============================================================ */

/* ══════════════ ISOLATION — on coupe l'héritage de l'app ══════════════
   La maquette utilise .cta, .ghost, .q et .spacer ; l'app aussi (proto.css :
   « .cta = bloc noir », avec un ::before qui repeint par-dessus). On remet ces
   quatre classes à zéro AVANT le décalque, qui les redéfinit ensuite. */
/* ⚠ CE DÉSARMEMENT NE VAUT QUE POUR LE TAPIS s61.
   La DEVANTURE (le premier écran, en peau saison 2) est bâtie avec les
   composants de la maison : son `.cta` DOIT rester le bouton brutaliste de
   proto.css (bloc d'encre décalé + cadre). En désarmant `.cta` pour tout
   `#sec-maquis`, MONTER LA TABLE recevait par-dessus la peau s61 : un aplat
   vert dans un aplat vert, cerné de crème, avec une ombre noire délavée. Edwin :
   « le bouton MONTER LA TABLE n'est pas adapté » puis « pour les boutons,
   pareil, ça doit être un mode brutaliste ». D'où le `:not([data-s2])` : la
   devanture garde les composants de l'app, le tapis garde les siens. */
#sec-maquis .mq-stage:not([data-s2]) .cta, #sec-maquis .mq-stage:not([data-s2]) .ghost, #sec-maquis .mq-stage:not([data-s2]) .q, #sec-maquis .mq-stage:not([data-s2]) .spacer {
  all:unset; display:block; box-sizing:border-box;
}
#sec-maquis .mq-stage:not([data-s2]) .cta::before, #sec-maquis .mq-stage:not([data-s2]) .cta::after,
#sec-maquis .mq-stage:not([data-s2]) .ghost::before, #sec-maquis .mq-stage:not([data-s2]) .ghost::after,
#sec-maquis .mq-stage:not([data-s2]) .q::before, #sec-maquis .mq-stage:not([data-s2]) .q::after { content:none !important; }
#sec-maquis *, #sec-maquis *::before, #sec-maquis *::after { box-sizing:border-box; }

/* ══════════════ MAQUETTE — s61, décalque ══════════════ */
/* ══════════════════════════════════════════════════════════════
   MAQUIS — 2ᵉ passe de direction artistique.
   Ce qui clochait dans la 1ʳᵉ : c'était une APPLICATION avec une
   carte posée dedans (en-tête, colonne, bouton en bas). Un jeu de
   cartes, ça ne ressemble pas à ça.
   Deux partis pris :
   ① UNE CARTE = UN ÉCRAN ENTIER. La carte occupe tout, bord à bord,
      comme quand on claque un carton sur la table. Pas de chrome.
   ② L'ENSEIGNE DE MAQUIS. Lettrage peint à la main : lettres épaisses
      cernées de noir, ombre portée franche, couleurs saturées sur
      plaque émaillée, étoiles et filets. C'est la langue visuelle des
      devantures d'Abidjan — ça donne le lieu sans une seule photo.
   Le fond reste la nuit + le feutre : la lumière tombe sur le carton.
   ══════════════════════════════════════════════════════════════ */
#sec-maquis {
    --ink:#0A0A0A; --creme:#FFF6E3; --nuit:#0B120E;
    --jaune:#FFC400; --rouge:#E63946; --vert:#12B86A; --bleu:#1B6CF2;
    --magenta:#FF2E93; --orange:#FF8A1E; --violet:#8A4FFF; --cyan:#39D5E0;
    --fd:'Anton',sans-serif; --fm:'IBM Plex Mono',monospace;
  }
/* ---------- LE LETTRAGE PEINT ----------
     Cerne noir sur les 4 côtés + ombre portée franche : c'est ça qui
     fait « peint à la main » et non « police posée sur un fond ». */
#sec-maquis .paint { font-family:var(--fd); color:var(--creme); letter-spacing:1px; line-height:1.04;
    text-shadow:-2px -2px 0 var(--ink), 2px -2px 0 var(--ink), -2px 2px 0 var(--ink), 2px 2px 0 var(--ink),
                5px 5px 0 rgba(0,0,0,.8); }
#sec-maquis .paint.ink { color:var(--ink); text-shadow:-2px -2px 0 var(--creme), 2px -2px 0 var(--creme),
                -2px 2px 0 var(--creme), 2px 2px 0 var(--creme), 5px 5px 0 rgba(0,0,0,.32); }
/* PETIT LETTRAGE : le cerne et l'ombre doivent MAIGRIR avec le corps, sinon
     la lettre se referme sur elle-même et on lit un pâté noir. */
#sec-maquis .paint.sm { text-shadow:-1.2px -1.2px 0 var(--ink), 1.2px -1.2px 0 var(--ink), -1.2px 1.2px 0 var(--ink),
                1.2px 1.2px 0 var(--ink), 2.5px 2.5px 0 rgba(0,0,0,.75); }
#sec-maquis .paint.ink.sm { text-shadow:-1.2px -1.2px 0 var(--creme), 1.2px -1.2px 0 var(--creme),
                -1.2px 1.2px 0 var(--creme), 1.2px 1.2px 0 var(--creme), 2.5px 2.5px 0 rgba(0,0,0,.28); }
/* PLUSIEURS LIGNES : pas d'ombre portée — elle retombe sur la ligne d'en dessous. */
#sec-maquis .paint.flow { line-height:1.2; text-shadow:-2px -2px 0 var(--ink), 2px -2px 0 var(--ink),
                -2px 2px 0 var(--ink), 2px 2px 0 var(--ink); }
#sec-maquis .paint.ink.flow { text-shadow:-2px -2px 0 var(--creme), 2px -2px 0 var(--creme),
                -2px 2px 0 var(--creme), 2px 2px 0 var(--creme); }
/* Le lettrage peint est réservé aux GROS MOTS (l'enseigne). Le texte courant
     d'une carte — une question — reste en Anton nu : c'est de l'imprimé, pas une enseigne. */
#sec-maquis .mq-stage:not([data-s2]) .q { font-family:var(--fd); color:var(--ink); line-height:1.16; letter-spacing:.4px; }
/* plaque émaillée : liseré crème entre la couleur et le noir */
#sec-maquis .plaque { position:relative; background:var(--jaune); border:4px solid var(--ink);
    box-shadow:0 0 0 3px var(--creme), 6px 6px 0 rgba(0,0,0,.6); padding:12px 14px; }
#sec-maquis .plaque.r {background:var(--rouge)}
#sec-maquis .plaque.v {background:var(--vert)}
#sec-maquis .plaque.b {background:var(--bleu)}
#sec-maquis .plaque.m {background:var(--magenta)}
#sec-maquis .plaque.o {background:var(--orange)}
#sec-maquis .plaque.c {background:var(--cyan)}
/* deux teintes que la maquette n'avait pas eu besoin de nommer */
#sec-maquis .plaque.j {background:var(--jaune)}
#sec-maquis .plaque.vi {background:var(--violet); color:var(--creme)}
#sec-maquis .plaque.n {background:var(--ink); box-shadow:0 0 0 3px var(--creme), 6px 6px 0 rgba(255,196,0,.5);}
/* le filet décoratif des enseignes (petits losanges) */
#sec-maquis .filet { height:9px; background:
    repeating-linear-gradient(90deg, var(--ink) 0 8px, transparent 8px 16px); opacity:.8; }
/* ---------- LA TABLE (fond de tous les écrans de jeu) ---------- */
#sec-maquis .felt { position:absolute; inset:0; overflow:hidden;
    background:
      radial-gradient(115% 48% at 50% -2%, rgba(255,201,120,.26), rgba(255,201,120,0) 68%),
      repeating-linear-gradient(46deg, rgba(255,255,255,.022) 0 3px, transparent 3px 7px),
      repeating-linear-gradient(-44deg, rgba(0,0,0,.16) 0 3px, transparent 3px 8px),
      linear-gradient(180deg,#1A4433 0%,#102E23 46%,#0A1B14 100%); }
#sec-maquis .felt.noir { background:
      radial-gradient(85% 38% at 50% 14%, rgba(255,46,147,.18), transparent 72%),
      linear-gradient(180deg,#120A0F,#070607 72%); }
/* ---------- PILE DE JETONS (le djai est physique) ---------- */
#sec-maquis .pile { display:inline-flex; align-items:flex-end; gap:2px; }
#sec-maquis .pile i { display:block; width:13px; border:2px solid var(--ink); background:var(--jaune);
    box-shadow:inset 0 -3px 0 rgba(0,0,0,.28); }
#sec-maquis .pile i:nth-child(2) {background:#FFD95C}
#sec-maquis .pile i:nth-child(3) {background:#F0A800}
/* ---------- briques d'écran ---------- */
#sec-maquis .scr { position:relative; z-index:2; flex:1; min-height:0; display:flex; flex-direction:column; padding:16px 15px 18px; gap:12px; }
#sec-maquis .kick { font-family:var(--fm); font-weight:700; font-size:10px; letter-spacing:2px; color:rgba(255,246,227,.55); }
#sec-maquis .mq-stage:not([data-s2]) .spacer { flex:1; min-height:0; }
#sec-maquis .mq-stage:not([data-s2]) .cta { position:relative; background:var(--vert); border:4px solid var(--ink);
    box-shadow:0 0 0 3px var(--creme), 7px 7px 0 var(--jaune); padding:16px 12px; text-align:center; }
#sec-maquis .mq-stage:not([data-s2]) .cta .t { font-family:var(--fd); font-size:20px; letter-spacing:2px; color:var(--ink); }
#sec-maquis .mq-stage:not([data-s2]) .cta .t small { display:block; font-family:var(--fm); font-weight:700; font-size:9px; letter-spacing:1px; margin-top:5px; color:rgba(10,10,10,.6); }
#sec-maquis .mq-stage:not([data-s2]) .cta.j {background:var(--jaune)}
#sec-maquis .mq-stage:not([data-s2]) .cta.r {background:var(--rouge)}
#sec-maquis .mq-stage:not([data-s2]) .cta.r .t {color:var(--creme)}
#sec-maquis .mq-stage:not([data-s2]) .cta.m {background:var(--magenta)}
#sec-maquis .mq-stage:not([data-s2]) .cta.m .t {color:var(--creme)}
#sec-maquis .mq-stage:not([data-s2]) .cta.off { background:#2A3630; box-shadow:0 0 0 3px rgba(255,246,227,.25), 7px 7px 0 var(--magenta); }
#sec-maquis .mq-stage:not([data-s2]) .cta.off .t { color:rgba(255,246,227,.45); }
#sec-maquis .mq-stage:not([data-s2]) .ghost { border:3px dashed rgba(255,246,227,.35); padding:12px; text-align:center;
    font-family:var(--fd); font-size:13px; letter-spacing:1.2px; color:rgba(255,246,227,.55); }
/* barre du haut : une pancarte clouée, pas une topbar d'app */
#sec-maquis .clou { position:relative; z-index:3; display:flex; align-items:center; gap:9px; padding:12px 14px;
    background:var(--ink); border-bottom:4px solid var(--jaune); }
#sec-maquis .clou .x { width:34px; height:34px; border:3px solid var(--creme); background:var(--rouge); color:#fff;
    font-family:var(--fd); font-size:17px; display:flex; align-items:center; justify-content:center; }
#sec-maquis .clou .t { font-family:var(--fd); font-size:18px; letter-spacing:2px; color:var(--creme); }
#sec-maquis .clou .n { margin-left:auto; font-family:var(--fd); font-size:13px; letter-spacing:1px; color:var(--ink);
    background:var(--jaune); border:3px solid var(--creme); padding:3px 9px; }
/* ---------- LA CARTE PLEIN ÉCRAN ---------- */
#sec-maquis .carte { position:absolute; inset:12px; z-index:4; background:var(--creme); border:5px solid var(--ink);
    box-shadow:0 22px 50px rgba(0,0,0,.7); display:flex; flex-direction:column; overflow:hidden;
    transform:rotate(-.8deg); }
#sec-maquis .carte::before { content:''; position:absolute; inset:9px; border:3px solid rgba(10,10,10,.22); pointer-events:none; }
#sec-maquis .carte .type { position:absolute; top:0; left:0; z-index:3; background:var(--cyan); color:var(--ink);
    border:4px solid var(--ink); border-top:0; border-left:0; font-family:var(--fd); font-size:11px;
    letter-spacing:2px; padding:5px 12px; }
#sec-maquis .carte .idx { position:absolute; font-family:var(--fd); font-size:13px; letter-spacing:1px; color:rgba(10,10,10,.45); }
#sec-maquis .carte .idx.tr { top:16px; right:18px; }
#sec-maquis .carte .idx.br { bottom:16px; right:18px; }
#sec-maquis .carte .corps { flex:1; min-height:0; display:flex; flex-direction:column; align-items:center;
    justify-content:center; gap:14px; padding:34px 20px 20px; text-align:center; }
#sec-maquis .carte .pied { border-top:4px solid var(--ink); padding:12px 14px; display:flex; gap:10px; align-items:stretch; }
/* fond imprimé de la carte : trame fine, comme un vrai carton */
#sec-maquis .carte .trame { position:absolute; inset:0; opacity:.5; pointer-events:none;
    background:repeating-linear-gradient(45deg, rgba(10,10,10,.05) 0 2px, transparent 2px 7px); }
#sec-maquis .etoile { position:absolute; width:18px; height:18px; }

/* ══════════════ APP — ce que le cadre de maquette ne décrivait pas ══════════════ */
/* Le cadre .dev de la maquette (378×780, bordure, ombre) devient le plein écran. */
#sec-maquis.sec { position:fixed; inset:0; z-index:2000; display:none; padding:0; margin:0; max-width:none; }
#sec-maquis.sec.active { display:block; }
#sec-maquis .mq-stage { position:absolute; inset:0; overflow:hidden; display:flex; flex-direction:column;
  background:var(--nuit); color:var(--ink); font-family:var(--fm); }

/* le .scr de la maquette défile, et respecte les encoches */
#sec-maquis .scr { overflow-y:auto; -webkit-overflow-scrolling:touch;
  padding:16px 15px calc(18px + env(safe-area-inset-bottom)); }
#sec-maquis .clou { padding-top:calc(12px + env(safe-area-inset-top)); flex-shrink:0; }
#sec-maquis .carte .corps { overflow-y:auto; -webkit-overflow-scrolling:touch; }
#sec-maquis .carte .pied { flex-shrink:0; padding-bottom:calc(12px + env(safe-area-inset-bottom)); }

/* BARRE D'ACTION FIXE — la maquette montrait des écrans qui tenaient pile dans
   son cadre de 780 px ; sur un vrai téléphone (et surtout dans une fenêtre de
   navigateur plus courte) la liste des paquets pousse « DISTRIBUER » sous la
   ligne de flottaison, et « ABANDONNER » disparaît. On reprend donc la grammaire
   de la CARTE : un corps qui défile, un PIED qui ne bouge pas. */
#sec-maquis .scr { padding-bottom:10px; }
#sec-maquis .barre { position:relative; z-index:3; flex-shrink:0; display:flex; flex-direction:column; gap:10px;
  padding:12px 15px calc(14px + env(safe-area-inset-bottom));
  background:linear-gradient(to top, var(--nuit) 62%, rgba(11,18,14,0));
  border-top:3px solid rgba(255,246,227,.14); }

/* zones tapables : la maquette montrait des états figés */
#sec-maquis [data-a] { cursor:pointer; }
/* le tapis s61 n'est pas un écran `[data-s2]` : la règle « UN SEUL GESTE » du
   socle ne l'atteint pas, il garde donc son appui. La DEVANTURE, elle, est en
   `[data-s2]` et prend le geste commun — on ne lui en ajoute aucun. */
#sec-maquis .mq-stage:not([data-s2]) :is(.cta, .bt, .rep, .plaque[data-a]):active { transform:translate(3px,3px); }
#sec-maquis .clou .x { border:0; }
#sec-maquis button { font:inherit; color:inherit; }

/* SORTIE PENDANT UNE CARTE : l'en-tête a disparu, il faut pouvoir arrêter la
   soirée. Une marque imprimée au coin du carton, pas un bouton d'application. */
#sec-maquis .carte .sortir { position:absolute; z-index:5; top:10px; right:10px; width:30px; height:30px;
  border:3px solid var(--ink); background:var(--creme); color:var(--ink); font-family:var(--fd);
  font-size:15px; line-height:1; display:flex; align-items:center; justify-content:center; opacity:.75; }
#sec-maquis .carte.noire .sortir { background:transparent; border-color:rgba(255,246,227,.5); color:var(--creme); }

/* la carte arrive comme un carton qu'on claque */
#sec-maquis .carte { animation:mq-pose .26s ease-out; }
@keyframes mq-pose { from { transform:rotate(-.8deg) scale(.93) translateY(-12px); opacity:0; } }
#sec-maquis .paquet.tapme { animation:mq-respire 2.6s ease-in-out infinite; }
@keyframes mq-respire { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-6px)} }
@media (prefers-reduced-motion:reduce) {
  #sec-maquis .carte, #sec-maquis .paquet.tapme { animation:none; }
}

/* la saisie de la bande (la maquette montrait un champ vide, pas un vrai input) */
#sec-maquis input.champ { width:100%; border:4px solid var(--ink); background:var(--creme); color:var(--ink);
  box-shadow:5px 5px 0 rgba(0,0,0,.6); padding:12px; font-family:var(--fm); font-weight:700; font-size:15px; }
#sec-maquis input.champ::placeholder { color:rgba(10,10,10,.4); }
#sec-maquis input.champ:focus { outline:none; box-shadow:5px 5px 0 var(--vert); }

/* grand écran : le téléphone est posé au centre de la table, on garde sa largeur */
@media (min-width:560px) {
  #sec-maquis .mq-stage { align-items:center; }
  #sec-maquis .clou, #sec-maquis .scr { width:100%; max-width:430px; }
  #sec-maquis .felt { left:50%; transform:translateX(-50%); width:100%; max-width:430px; }
  #sec-maquis .carte { left:50%; right:auto; width:406px; transform:translateX(-50%) rotate(-.8deg); }
  #sec-maquis .carte.droite { transform:translateX(-50%) rotate(.7deg); }
  @keyframes mq-pose { from { transform:translateX(-50%) rotate(-.8deg) scale(.93); opacity:0; } }
}

/* ---------- la tuile du hub « choisis ton jeu » ---------- */
.hub-tile.maquis { background:#0A0A0A; color:#FFF6E3; box-shadow:6px 6px 0 #12B86A; }
.hub-tile.maquis .hub-nm { color:#FFF6E3; }
.hub-tile.maquis .hub-ds { color:#A9E3C2; }
.hub-tile.maquis:active { box-shadow:3px 3px 0 #12B86A; }

/* ══════════════════════════════════════════════════════════════════════════
   LE CORPS DÉFILE SOUS LES DEUX BARRES — et il leur RÉSERVE leur hauteur.
   Avant : la pancarte du haut et le pied d'action étaient dans le flux, et le
   corps se coupait NET contre eux. Résultat, sur LA PARTIE, le titre
   « DURÉE = TAILLE DU PAQUET » était tranché par le bandeau et « AFTER DARK »
   par le pied : ni le haut ni le bas de la liste n'était jamais lisible en
   entier. Les deux barres passent maintenant AU-DESSUS (elles restent
   opaques, et le dégradé du pied reprend son rôle : estomper ce qui glisse
   dessous), et le corps garde leur hauteur en padding — mesurée par
   maquis.js › calerBarres(), jamais devinée.
   ══════════════════════════════════════════════════════════════════════════ */
#sec-maquis .mq-stage:has(> .scr) .clou { position:absolute; top:0; left:0; right:0; }
#sec-maquis .mq-stage:has(> .scr) .barre { position:absolute; bottom:0; left:0; right:0; }
#sec-maquis .mq-stage:has(> .scr) > .scr {
  position:absolute; inset:0; flex:none;
  padding-top:calc(var(--mq-haut, 62px) + 16px);
  padding-bottom:calc(var(--mq-bas, 0px) + 16px);
}

/* ── EN ABÎME, MAQUIS ÉCRIVAIT EN NOIR SUR DU NOIR ────────────────────────
   `#sec-maquis` fige `--ink:#0A0A0A` (ligne 46) : c'est voulu, c'est l'encre du
   lettrage peint, et on n'y touche pas.
   Le fond, lui, ne bouge pas non plus : `[data-s2] .s2 { background:var(--paper) }`
   recouvre le plateau, et c'est très bien en thème clair (crème + encre noire).
   Le seul thème où ça casse est ABÎME : le `.s2` y devient #121212 pendant que
   MAQUIS garde son encre noire, et tout ce qui est posé dessus — barre de titre,
   séparateurs, segmenté, noms de paquets — tombe à 1,06 de contraste.
   On ne touche donc QU'À ABÎME, et seulement à l'encre DU BLOC `.s2` : le
   lettrage peint (`.paint`, qui se sert de `--ink` pour son contour) vit en
   dehors de ce bloc et ne bouge pas. */
html[data-theme="abime"] #sec-maquis .s2 { --ink: #FBFBFB; color: #FBFBFB; }
html[data-theme="abime"] #sec-maquis .s2 :is(.page-title, .iconbtn, .pill, .o, .name, .desc, .eyebrow, span) { color: #FBFBFB; }
html[data-theme="abime"] #sec-maquis .s2 :is(.iconbtn, .pill:not([class*=" "])) { border-color: #FBFBFB; }
/* ce qui est posé sur un APLAT clair à l'intérieur reprend l'encre noire */
html[data-theme="abime"] #sec-maquis .s2 :is(.seg .o.on, .pill.green, .pill.yellow,
  .pill.magenta, .pill.cyan, .btn.yellow, .btn.green, .sticker .bd,
  .listcard.on .bd) :is(.name, .desc, span),
html[data-theme="abime"] #sec-maquis .s2 :is(.seg .o.on, .pill.green, .pill.yellow,
  .pill.magenta, .pill.cyan, .btn.yellow, .btn.green, .sticker .bd) { color: #0A0A0A; }


/* ══════════════ LA DEVANTURE — ce que la peau saison 2 n'avait pas ══════════════
   Trois ajouts, tous bâtis sur des composants qui existent déjà :
   · `.mq-pas`   — le pas SUR MESURE. C'est le `.stepper` de proto.css tel quel
                   (− et + TRACÉS en CSS, jamais un glyphe), posé dans un cadre
                   de la maison. Edwin : « on peut aussi avoir une partie
                   personnalisée : on peut définir le nombre de cartes. »
   · `.mq-pk-ic` — l'icône d'un paquet dans son cadre `.emoji-box`, qui prend
                   désormais la COULEUR du paquet : les cadres transparents et
                   l'icône en point d'interrogation, c'est fini.
   · `.mq-pk-in` — le filet : l'initiale du paquet, quand ni drapeau ni emoji
                   animé n'existe. Jamais un carré vide.
   Aucun `:active` ici : la règle « UN SEUL GESTE » (saison2-socle.css) s'en
   charge pour tout ce qui porte `.listcard`, `.cta`, `.btn` ou role=button. */
#sec-maquis [data-s2] .mq-pas { display:flex; align-items:center; gap:12px;
  border:3px solid var(--ink); background:var(--paper); box-shadow:4px 4px 0 var(--ink); padding:10px 12px; }
#sec-maquis [data-s2] .mq-pas .stepper { display:flex; align-items:center; gap:10px; flex-shrink:0; }
#sec-maquis [data-s2] .mq-pas .sval { font-family:var(--font-d); font-size:24px; min-width:52px; text-align:center;
  line-height:1; color:var(--ink); }
#sec-maquis [data-s2] .mq-pas-l { font-family:var(--font-m); font-weight:700; font-size:10px; letter-spacing:1.5px;
  line-height:1.4; color:color-mix(in srgb, var(--ink) 62%, transparent); }
/* le segmenté passe à quatre parts : on ne le laisse pas déborder à droite */
#sec-maquis [data-s2] .s2-seg .o { padding:9px 4px; font-size:11.5px; letter-spacing:0;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

#sec-maquis [data-s2] .mq-pk .emoji-box { overflow:hidden; }
#sec-maquis [data-s2] .mq-pk-ic { width:24px; height:24px; object-fit:contain; display:block; }
#sec-maquis [data-s2] .mq-pk-in { font-family:var(--font-d); font-size:17px; line-height:1; color:var(--ink); }
/* un titre de carte tient sur UNE ligne */
#sec-maquis [data-s2] .mq-pk .info .name { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
#sec-maquis [data-s2] .mq-pk .info .desc { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

/* NÉON : un bloc sombre ne porte jamais d'ombre noire. Le cadre d'icône d'un
   paquet garde la couleur du paquet, son ombre suit celle de la peau. */
html[data-skin="neon"][data-theme] #sec-maquis [data-s2] .mq-pas { box-shadow:4px 4px 0 #FF2E93; }
html[data-skin="neon"][data-theme] #sec-maquis [data-s2] .mq-pas .sval { color:#FFFEF7; }
html[data-skin="neon"][data-theme] #sec-maquis [data-s2] .mq-pas-l { color:rgba(255,254,247,.65); }
html[data-skin="neon"][data-theme] #sec-maquis [data-s2] .mq-pk-in { color:#0A0A0A; }

/* GRAND ÉCRAN (≥1024) : MAQUIS s'affiche dans la colonne web de 560 px
   (web-common.css › body.web-col). Les règles ≥560px ci-dessus centrent un
   « téléphone » de 430/406 px avec left:50% + translateX(-50%) : dans la
   colonne, le tapis laissait une bande crème de chaque côté (« LA TABLE » et
   les pseudos coupés) et les cartes d'événement débordaient à droite.
   Ici, tapis et cartes remplissent la colonne. */
@media (min-width:1024px) {
  body.web-col #sec-maquis .clou, body.web-col #sec-maquis .scr { max-width:none; }
  body.web-col #sec-maquis .felt { left:0; right:0; width:auto; max-width:none; transform:none; }
  body.web-col #sec-maquis .carte { left:12px; right:12px; width:auto; transform:rotate(-.8deg); }
  body.web-col #sec-maquis .carte.droite { transform:rotate(.7deg); }
  @keyframes mq-pose-web { from { transform:rotate(-.8deg) scale(.93); opacity:0; } }
  body.web-col #sec-maquis .carte { animation-name:mq-pose-web; }
}

/* MAQUIS EN PARTIE sur PC : la carte s'étalait sur 1 375 px avec un texte
   prévu pour 406 px (lignes minuscules perdues dans le vide). Le « téléphone
   posé sur la table » reste une carte : 640 px, centrée sur le tapis. */
@media (min-width: 1024px) {
  html body.web-col #sec-maquis #mqStage:not([data-s2]) > .scr,
  html body.web-col #sec-maquis #mqStage:not([data-s2]) > .barre { width: 640px !important; }
  body.web-col #sec-maquis #mqStage:not([data-s2]) .carte { left: 50% !important; right: auto !important; width: 640px !important; transform: translateX(-50%) rotate(-.8deg) !important; }
  body.web-col #sec-maquis #mqStage:not([data-s2]) .carte.droite { transform: translateX(-50%) rotate(.7deg) !important; }
}