/* ==========================================================================
 * LA FEUILLE DES DEUX COLONIES PERPETUELLES
 *
 * Deux pages — BTC et ETH — qui montrent exactement la meme chose sur deux
 * marches differents. Les vingt-neuf autres pages du site portent leur
 * habillage EN DUR dans le fichier : c'est la convention, et elle tient tant
 * qu'une page est seule de son espece. Ici elles sont deux, nees le meme
 * jour, du meme moteur (`ai_perp.js`, un etat par symbole) : recopier mille
 * lignes deux fois, c'est garantir qu'un jour l'une des deux aura une
 * correction que l'autre n'aura pas.
 *
 * La premiere moitie est la BARRE DU SITE, reprise telle quelle de
 * `swoge_ai.html` — meme marque, memes chiffres, meme solde, memes boutons,
 * donc les memes scripts partages la font vivre. La seconde moitie est ce que
 * ces deux pages sont les seules a avoir.
 *
 * Le fichier est versionne (`perp.css?v=`) : sans ca, une correction de style
 * reste invisible des semaines dans les navigateurs qui l'ont deja.
 * ======================================================================== */

/* ==================== LA NOUVELLE BARRE, BLANCHE ====================
   DEMANDE : « tous se qu on viens de faire a blackjack html et spin html » —
   meme barre que `games.html`, `index.html`, `swogebet.html`,
   `swoge_blackjack.html`, `swoge_spin.html` et `swoge_casino.html` : marque,
   chiffres du serveur, solde, connexion, avatar. Seule la BARRE, les
   panneaux de compte et le fond de page passent au blanc — le plateau et
   les godets gardent leur propre habillage or-sur-noir, qui est celui du
   JEU et non de la navigation. Couleurs ECRITES ICI, comme sur les autres
   pages converties. */
.sw-haut{
  display:flex; align-items:center; gap:14px; padding:10px 16px;
  background:#FFFFFF; border-bottom:1px solid #E1E9F6;
  position:sticky; top:0; z-index:30;
}
.sw-marque{display:flex; align-items:center; gap:9px; flex:0 0 auto}
nav.sb-ancre{display:flex;align-items:center;gap:12px;
  background:none;backdrop-filter:none;padding:0;border-bottom:none;
  position:static;z-index:auto;}
.sw-patte{
  width:34px;height:34px;border-radius:10px;background:#EAF1FF;
  display:grid;place-items:center;font-size:19px;
}
.sw-marque b{display:block;font:800 17px/1 'Inter',system-ui,sans-serif;letter-spacing:.4px;color:#1B5FE0}
.sw-marque i{display:block;font:700 9.5px/1.4 'Inter',system-ui,sans-serif;font-style:normal;
  letter-spacing:2.6px;color:#6B7C99}
.sw-chiffres{
  flex:1 1 auto; min-width:0; display:flex; gap:8px; overflow-x:auto;
  padding:8px 10px; background:#EEF3FB; border:1px solid #E1E9F6;
  border-radius:12px; scrollbar-width:none;
}
.sw-chiffres::-webkit-scrollbar{display:none}
/* La bande de stats ne pouvait pas se cacher : le script d'echec pose
   `bloc.hidden = true`, mais `.sw-chiffres{display:flex}` est une regle
   d'AUTEUR et l'emporte sur le `[hidden]{display:none}` du navigateur.
   Quand le fetch de /vitrine.json echouait, la bande restait donc a
   l'ecran avec ses quatre tirets — l'allure d'un compteur en direct sans
   compteur derriere. Une ligne, et l'intention du script tient. */
.sw-chiffres[hidden]{display:none}
.sw-ch{display:flex;align-items:center;gap:8px;padding:0 12px;flex:0 0 auto}
.sw-ch+.sw-ch{border-left:1px solid #E1E9F6}
.sw-ch .ic{width:26px;height:26px;border-radius:8px;background:#EAF1FF;
  display:grid;place-items:center;font-size:13px}
.sw-ch small{display:block;font:700 9px/1 'Inter',system-ui,sans-serif;letter-spacing:.9px;color:#6B7C99}
.sw-ch b{display:block;font:800 14px/1.3 'Inter',system-ui,sans-serif;color:#0A1F44}
.sb-ancre .chip{font:800 12px/1 'Inter',system-ui,sans-serif;color:#0A1F44;
  border:1px solid #E1E9F6;border-radius:999px;padding:9px 13px;background:#FFFFFF;
  box-shadow:0 1px 2px rgba(11,27,54,.06), 0 8px 24px rgba(11,27,54,.05);white-space:nowrap}
.sb-ancre .chip b{color:#0A1F44}
.sw-b{
  padding:10px 16px;border-radius:10px;cursor:pointer;border:none;
  font:700 12.5px/1 'Inter',system-ui,sans-serif;letter-spacing:.3px;white-space:nowrap;
}
.sw-b-plein{background:#1B5FE0;color:#fff}
.sw-b-plein:hover{background:#1750c4}
.sw-b-vide{background:#FFFFFF;color:#1B5FE0;border:1.5px solid #1B5FE0}
.sw-b-vide:hover{background:#EAF1FF}
.connrow{ position:static !important; flex:0 0 auto;
  flex-direction:row !important; flex-wrap:nowrap !important;
  justify-content:flex-start !important; gap:8px; padding:0 !important; }
.connrow .sw-b{ margin:0 !important; }
.sw-avatar{
  width:38px;height:38px;border-radius:11px;border:1px solid #E1E9F6;
  background:#EEF3FB;display:grid;place-items:center;font-size:16px;flex:0 0 auto;cursor:pointer;
}
.gx-menu{position:absolute;top:60px;right:14px;z-index:70;width:236px;
  background:#FFFFFF;border:1px solid #E1E9F6;border-radius:14px;
  box-shadow:0 1px 2px rgba(11,27,54,.06), 0 8px 24px rgba(11,27,54,.05);padding:6px;display:flex;flex-direction:column;gap:1px}
.gx-menu[hidden]{display:none}
.gx-menu a{display:flex;align-items:center;gap:9px;padding:9px 10px;border-radius:9px;
  font:700 12px/1 'Inter',system-ui,sans-serif;color:#0B1B36;text-decoration:none}
.gx-menu a:hover{background:#EAF1FF;color:#1B5FE0}
.gx-menu .gx-sep{height:1px;background:#E1E9F6;margin:5px 2px}
.gx-menu .gx-g{padding:9px 10px 4px;font:800 9px/1 'Inter',system-ui,sans-serif;
  letter-spacing:1.1px;text-transform:uppercase;color:#6B7C99}
.gx-menu .gx-g:first-child{padding-top:4px}
.gx-menu{max-height:min(74vh,560px);overflow-y:auto;scrollbar-width:thin}
.gx-menu a i{font-style:normal;font-size:14px;width:18px;text-align:center;flex:0 0 auto}
@media(max-width:520px){ .gx-menu{right:8px;left:8px;width:auto} }
@media (max-width:620px){
  .sw-haut{ flex-wrap:wrap; row-gap:8px; }
  .sw-marque{ order:1 }
  /* ---- LA RANGEE DE PASTILLES DOIT POUVOIR SE REPLIER ----
     `stakebubble.js` ajoute DEUX pastilles a cette rangee quand la connexion
     s'etablit — le rendement en jeu et le nombre de joueurs — soit une seconde
     ou deux apres l'ouverture. Mesure faite : la rangee passe de 54 a 243 px.
     En `flex:0 0 auto` elle ne pouvait ni retrecir ni se replier : elle
     poussait donc la ligne, le document devenait plus large que l'ecran, et
     le telephone dezoomait toute la page pour la faire tenir — c'est l'en-tete
     coupe en pleine largeur, deux secondes apres le chargement.
     Elle peut desormais retrecir ET passer a la ligne. A noter : le garde-fou
     de `stakebubble.js` ne pouvait pas s'en charger, il ne se retire que s'il
     mesure un debordement du DOCUMENT — or ici l'en-tete l'absorbait en
     grandissant en hauteur, sans jamais rien faire deborder. */
  nav.sb-ancre{ order:2; flex:0 1 auto; min-width:0; margin-left:auto;
                flex-wrap:wrap; justify-content:flex-end; row-gap:6px }
  .menubtn, #gxProfil{ order:3 }
  /* ---- ET ELLE PEUT SE REPLIER QUAND LA LIGNE N EST PLUS ASSEZ LARGE ----
     Les deux boutons portent `white-space:nowrap` : la paire fait 332 px que
     rien ne peut retrecir. Sur un ecran de 320 (un iPhone en zoom d affichage,
     un iPhone SE) il ne reste que 288 px : la rangee debordait, le telephone
     elargissait la fenetre de mise en page a 348, et TOUTE la page se decalait
     de 28 px — en-tete coupe a gauche, contenu sous le bord droit.
     `wrap` ne fait rien tant que la place existe : de 350 a 620 px la rangee
     reste sur une ligne comme avant. Le `nowrap` de la regle du dessus visait
     une mise en page en COLONNE ; ici la direction est deja forcee en `row`,
     donc replier ne la ramene pas. */
  .connrow{ order:4; flex:1 1 100% !important; justify-content:center !important;
            flex-wrap:wrap !important }
  /* ---- ET AVANT DE SE REPLIER, ELLE SE RESSERRE ----
     Se replier repare le decalage mais coute une rangee d en-tete. A 360 px —
     la moitie des telephones Android — il ne manquait que quatre pixels : dix
     de moins de chaque cote des deux boutons les rendent, et la paire reste
     sur sa ligne comme avant. Sous 340 il n y a plus rien a gratter, et c est
     `wrap` qui prend le relais. */
  @media (max-width:400px){
    .connrow .sw-b{ padding-left:11px !important; padding-right:11px !important }
  }
  .sw-chiffres{ order:5; flex:1 1 100% }
}

/* ==================== LES DEUX COTES DE LA TABLE ====================
   Meme grille que `swoge_blackjack.html` : les deux colonnes ne mesurent pas
   la meme chose (208 px de navigation contre 300 px d affiches), une grille a
   trois colonnes garde donc la colonne du milieu au centre EXACT de l ecran,
   quelle que soit la largeur de ce qu on pose a cote. */
.sw-corps{display:grid; grid-template-columns:minmax(208px,1fr) auto minmax(208px,1fr);
  align-items:start; gap:14px; padding:14px; max-width:1680px; margin:0 auto}
.sw-corps main{min-width:0}
.sw-cote{position:sticky; top:74px; width:100%; display:flex; flex-direction:column; gap:12px; justify-self:end}
.sw-nav{background:#FFFFFF;border:1px solid #E1E9F6;border-radius:14px;
  padding:8px; box-shadow:0 1px 2px rgba(11,27,54,.06), 0 8px 24px rgba(11,27,54,.05)}
/* ---- PAS DE SOULIGNAGE ----
 * L'accueil pose `a{color:inherit;text-decoration:none}` une fois pour toute
 * la page ; cette page-ci ne l'avait pas, donc chaque lien retombait sur le
 * trait par defaut du navigateur — d'ou six entrees de menu soulignees alors
 * qu'elles ne le sont nulle part ailleurs. On pose la meme regle, au meme
 * endroit dans la cascade : sur les liens de la coquille partagee. Les liens
 * de CONTENU, eux, gardent leur propre style. */
.sw-haut a, .sw-nav a, .sw-reseaux a, .gx-menu a{ text-decoration:none }
.sw-nav a{display:flex;align-items:center;gap:11px;padding:11px 12px;border-radius:10px;
  font:600 13.5px/1 'Inter',system-ui,sans-serif;color:#0B1B36;text-decoration:none}
.sw-nav a .ic{width:20px;text-align:center;font-size:15px;opacity:.75}
.sw-nav a:hover{background:#EEF3FB}
.sw-nav a.on{background:#EAF1FF;color:#1B5FE0}
.sw-nav a.on .ic{opacity:1}
.sw-reseaux{display:flex;gap:8px;justify-content:center;padding-top:4px}
.sw-reseaux a{width:34px;height:34px;border-radius:10px;background:#FFFFFF;border:1px solid #E1E9F6;
  display:grid;place-items:center;font-size:14px;color:#6B7C99}
.sw-reseaux a:hover{color:#1B5FE0;border-color:#1B5FE0}
.uni{position:relative;border-radius:14px;overflow:hidden;min-height:258px;
  display:flex;flex-direction:column;justify-content:flex-end;background:#0A1F44;
  box-shadow:0 1px 2px rgba(11,27,54,.06), 0 8px 24px rgba(11,27,54,.05)}
.uni img,.uni .film{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  object-position:center top;border:0;background:#0A1F44}
@media (prefers-reduced-motion:reduce){ .uni .film{display:none} }
.uni .voile{position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(8,24,58,0) 34%,rgba(8,24,58,.88) 74%,rgba(8,24,58,.97) 100%)}
.uni .dit{position:relative;padding:14px;text-align:center}
.uni b{display:block;font:900 20px/1 'Inter',system-ui,sans-serif;color:#fff;letter-spacing:.4px}
.uni i{display:block;font-style:normal;font:600 11px/1.4 'Inter',system-ui,sans-serif;
  color:rgba(255,255,255,.76);margin:5px 0 11px}
.uni .sw-b{width:100%;background:rgba(255,255,255,.94);color:#0A1F44;
  display:block;text-align:center;border-radius:10px}
.sw-lat{width:300px; position:sticky; top:74px; display:flex; flex-direction:column; gap:14px; justify-self:start}
.sw-lat .carte{background:#FFFFFF;border:1px solid #E1E9F6;border-radius:14px;
  box-shadow:0 1px 2px rgba(11,27,54,.06), 0 8px 24px rgba(11,27,54,.05); overflow:hidden}
.sw-solde{display:flex;align-items:center;gap:12px;padding:14px 16px}
.sw-solde .ic{flex:0 0 auto;width:38px;height:38px;border-radius:11px;background:#EAF1FF;
  display:grid;place-items:center;font-size:17px}
.sw-solde .tx{min-width:0}
.sw-solde .tx small{display:block;font:800 9.5px/1 'Inter',system-ui,sans-serif;
  letter-spacing:1.1px;color:#6B7C99}
.sw-solde .tx b{display:block;margin-top:4px;font:800 17px/1 'Inter',system-ui,sans-serif;
  color:#0A1F44;font-variant-numeric:tabular-nums}
.sw-lat .salon{position:relative;display:block;min-height:172px;overflow:hidden;background:#0A1F44}
.sw-lat .salon img,.sw-lat .salon .film{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  object-position:34% 8%;border:0;background:#0A1F44}
@media (prefers-reduced-motion:reduce){ .sw-lat .salon .film{display:none} }
.sw-lat .salon .voile{position:absolute;inset:auto 0 0 0;height:58%;
  background:linear-gradient(180deg,rgba(6,16,40,0) 0%,rgba(6,16,40,.86) 78%,rgba(6,16,40,.95) 100%)}
.sw-lat .salon .dit{position:absolute;left:16px;right:16px;bottom:14px;
  font:800 12px/1 'Inter',system-ui,sans-serif;letter-spacing:1.4px;color:#fff}
.sw-lat .salon:hover img,.sw-lat .salon:hover .film{transform:scale(1.03)}
.sw-lat .salon img,.sw-lat .salon .film{transition:transform .2s}
/* ---- SOUS 1360 px, LE MENU CHANGE DE FORME — IL NE DISPARAIT PAS ----
 *
 * « Le menu de SWOGE AI doit etre pareil que Home. »
 *
 * Mesure : a 1280 px — une largeur d'ordinateur portable tout a fait
 * ordinaire — `.sw-cote` calculait `display:none` ici, alors que l'accueil
 * affichait sa colonne de 208 px. Le menu etait bien dans le balisage, avec
 * ses six bonnes entrees dans le bon ordre ; il ne se DESSINAIT simplement
 * pas. On pouvait relire le HTML dix fois sans le voir.
 *
 * L'accueil ne cache jamais le sien : sous 980 px il le couche en RANGEE,
 * qui defile horizontalement. On fait pareil, au point de rupture de cette
 * page-ci. `.sw-lat` — les vignettes video — reste cache : c'est de la
 * decoration propre a cette page, et l'accueil n'en a pas. */
@media (max-width:1360px){
  .sw-lat{ display:none }
  .sw-corps{ padding:0; display:block; max-width:none }
  /* `.sw-corps .sw-cote` et non `.sw-cote` : la regle qui borne la colonne a
     230 px pour la mise en page a trois colonnes est ECRITE PLUS BAS dans le
     fichier, donc a specificite egale c'est elle qui gagnait — la rangee
     restait large de 230 px et le menu defilait dans un timbre-poste. */
  .sw-corps .sw-cote{ position:static; width:100%; max-width:none;
            flex-direction:row; flex-wrap:wrap; align-items:center;
            padding:10px 12px 0; }
  .sw-cote .sw-nav{ flex:1 1 100%; display:flex; overflow-x:auto;
                    scrollbar-width:none; }
  .sw-cote .sw-nav::-webkit-scrollbar{ display:none }
  .sw-cote .sw-nav a{ flex:0 0 auto }
  .sw-reseaux{ padding-top:0 }
}
/* ---- LA COLONNE DE GAUCHE NE GONFLE PLUS (meme bug que `swoge_poker.html`
   et `swoge_casino.html`) ----
 * BUG MESURE : `minmax(208px,1fr)` sur les deux colonnes de bord absorbe TOUT
 * l'espace libre que la colonne du milieu (`auto`, calee sur le contenu du
 * jeu) ne reclame pas — a 1920px, `.sw-cote` faisait 702px de large au lieu
 * des ~208px voulus. Des colonnes de bord FIXES, et la colonne du milieu
 * absorbe le reste (sans effet sous 1360px : `.sw-cote` y est deja cachee). */
.sw-corps{ grid-template-columns:230px minmax(0,1fr) 300px; }
.sw-cote{ width:auto; max-width:230px; }

/* ==================== LA TABLETTE ====================
 *
 * « Mets notre application dans une tablette au centre de l'écran, avec les
 *   stats à droite dans la tablette. »
 *
 * L'ecran de la colonie occupait toute la fenetre : elle n'etait pas UNE
 * PAGE DU SITE, elle etait un site a elle. Posee dans un boitier, avec la
 * navigation du site autour, elle redevient ce qu'elle est — une application
 * qu'on regarde tourner, au milieu d'un site qui continue d'exister.
 *
 * Le boitier a une epaisseur et un ecran legerement en retrait, comme un vrai
 * appareil. C'est ce liseré qui fait qu'on lit « tablette » et pas « grande
 * carte » — sans lui, le cadre ne raconte rien.
 *
 * Sa hauteur est bornee par la fenetre : le village doit tenir a l'ecran sans
 * qu'on defile, sinon les chiens marchent hors de vue. Le panneau de droite,
 * lui, defile DANS la tablette. */
.tablette{
  background:#0A1F44;
  border-radius:26px;
  padding:12px;
  box-shadow:0 2px 4px rgba(11,27,54,.10), 0 18px 48px rgba(11,27,54,.18);
  max-width:1180px; margin:0 auto;
}
.tab-ecran{
  background:#FFFFFF;
  border-radius:16px;
  overflow:hidden;
  display:flex; flex-direction:column;
  height:min(760px, calc(100dvh - 150px));
  min-height:520px;
}
/* La camera et le hautparleur : deux details, et l'objet se reconnait. */
.tablette{position:relative}
.tablette::before{
  content:""; position:absolute; top:5px; left:50%; transform:translateX(-50%);
  width:5px; height:5px; border-radius:50%; background:#2E4C7E;
}
.tab-ecran .main{ height:auto; flex:1 1 auto; min-height:0; }
.tab-ecran header.bar{ border-radius:0; }

/* ---- LE MENU DE GAUCHE ET LES AFFICHES DE DROITE ----
 * Repris tels quels des pages deja blanches : ce sont les memes classes, donc
 * le jour ou la colonne change ailleurs, elle change ici aussi. */
.sw-corps{ align-items:start; }
.ai-lat .carte{overflow:hidden}

/* ---- LA VIEILLE LISTE RESTE DECLAREE, ET INVISIBLE ----
 * `#menu` n'est plus une vue : c'est la SOURCE que lit le menu du profil, et
 * `openPanel` s'en sert pour ouvrir les panneaux par `a[data-panel]`. Le
 * retirer casserait les deux. Mais sans la regle qui la replie — elle vivait
 * dans la feuille des pages de jeu, pas dans le bloc commun — elle se
 * deroulait en haut de page comme une liste de liens nus. C'est exactement
 * ce qu'on voyait : « Sign in · My Wallet · Staking… » ecrit en travers de
 * l'en-tete. */
.menu{ position:absolute; top:60px; right:14px; z-index:70; min-width:220px;
  display:none; flex-direction:column; background:#FFFFFF; padding:6px;
  border:1px solid #E1E9F6; border-radius:14px;
  box-shadow:0 1px 2px rgba(11,27,54,.06), 0 8px 24px rgba(11,27,54,.05); }
.menu.open{ display:flex }
.menu a{ display:flex; align-items:center; gap:9px; padding:9px 10px; border-radius:9px;
  font:700 12px/1 'Inter',system-ui,sans-serif; color:#0B1B36; text-decoration:none }
.menu a:hover{ background:#EAF1FF; color:#1B5FE0 }
.menu .msep{ height:1px; background:#E1E9F6; margin:5px 2px }
.menubtn{ display:none }

/* Sous 1360 px les deux colonnes disparaissent (regle commune) : la tablette
   prend alors toute la largeur, et son cadre se resserre pour ne pas manger
   l'ecran d'un telephone. */
@media (max-width:1360px){
  .tablette{ border-radius:18px; padding:8px; margin:10px; }
  .tab-ecran{ height:calc(100dvh - 120px); border-radius:12px; }
}
@media (max-width:820px){
  .tablette{ margin:6px; padding:6px; border-radius:14px; }
  .tab-ecran{ height:auto; min-height:0; }
  .tab-ecran .main{ display:block; }
  .tab-ecran .stage{ height:56vh; }
  .tab-ecran .panel{ max-height:none; }
}

/* ==========================================================================
 * CE QUE CES DEUX PAGES SONT LES SEULES A AVOIR
 *
 * Meme lumiere que le reste du site — blanc, bleu #1B5FE0, encre #0A1F44 —
 * parce qu'une page qui change de monde donne l'impression d'avoir quitte le
 * site. Les couleurs sont ecrites en clair, comme partout ici.
 * ======================================================================== */

.pp-wrap{max-width:1180px; margin:0 auto; padding:0 0 40px}

/* ---- LE TITRE ---- */
.pp-tete{display:flex; align-items:center; gap:14px; flex-wrap:wrap;
  background:#FFFFFF; border:1px solid #E1E9F6; border-radius:16px;
  padding:14px 16px; margin:0 0 14px}
.pp-logo{width:44px; height:44px; border-radius:13px; background:#EAF1FF;
  display:grid; place-items:center; font-size:23px; flex:0 0 auto}
.pp-tete h1{margin:0; font:800 19px/1.2 'Outfit',system-ui,sans-serif; color:#0A1F44}
.pp-tete p{margin:3px 0 0; font:500 12px/1.4 'Outfit',system-ui,sans-serif; color:#6B7C99}
.pp-puce{font:800 10px/1 'JetBrains Mono',ui-monospace,monospace; letter-spacing:.6px;
  padding:7px 10px; border-radius:999px; background:#EAF1FF; color:#1B5FE0;
  border:1px solid #D6E4FF; flex:0 0 auto}
.pp-puce.papier{background:#FFF6E5; color:#A96A00; border-color:#FFE2AE}
.pp-puce.vieux{background:#FDECEC; color:#B3261E; border-color:#F6C9C6}
.pp-tete .pp-droite{margin-left:auto; display:flex; gap:8px; align-items:center; flex-wrap:wrap}

/* ---- UNE COLONIE, TOUS LES MARCHES ----
   Il y a eu un basculeur de marche en haut de page, du temps ou chaque marche
   avait sa colonie. Il n'y en a plus qu'une : il ne reste rien a basculer, et
   la puce le dit plutot que de laisser croire a un choix. */
.pp-puce.une{background:#EEF7F1; color:#0F8A4F; border-color:#CCE8D9}
/* L'effectif d'une case apprise, a cote de son esperance. */
.pp-n{font-style:normal; font:600 9px/1 'JetBrains Mono',ui-monospace,monospace; color:#A3B0C8}

/* ---- LA BANDE DE CHIFFRES ----
   Ce pour quoi on ouvre la page : elle est en haut, pleine largeur, et on ne
   defile pas pour l'atteindre. */
.pp-bande{display:grid; grid-template-columns:repeat(7,1fr); gap:10px; margin:0 0 14px}
.pp-b{background:#FFFFFF; border:1px solid #E1E9F6; border-radius:14px; padding:12px 13px}
.pp-b b{display:block; font:800 21px/1.15 'Outfit',system-ui,sans-serif; color:#0A1F44;
  font-variant-numeric:tabular-nums}
.pp-b i{display:block; margin-top:3px; font-style:normal;
  font:700 9.5px/1 'Inter',system-ui,sans-serif; letter-spacing:.8px;
  text-transform:uppercase; color:#6B7C99}
.pp-b small{display:block; margin-top:5px; font:500 10.5px/1.35 'Outfit',system-ui,sans-serif; color:#8A99B5}
.pp-b.gros b{font-size:27px}
.pp-vert{color:#0F8A4F !important}
.pp-rouge{color:#B3261E !important}

/* ---- LES CARTES ---- */
.pp-grille{display:grid; grid-template-columns:1.35fr 1fr; gap:14px; align-items:start}
.pp-carte{background:#FFFFFF; border:1px solid #E1E9F6; border-radius:16px;
  padding:14px 16px; margin:0 0 14px}
.pp-carte>h2{margin:0 0 4px; font:800 13px/1.2 'Outfit',system-ui,sans-serif; color:#0A1F44;
  display:flex; align-items:center; gap:8px}
.pp-carte>h2 .n{margin-left:auto; font:700 10px/1 'JetBrains Mono',ui-monospace,monospace;
  color:#6B7C99; letter-spacing:.4px}
/* Une carte qui montre un chiffre dit sur combien d'observations il porte —
   et se tait en dessous. C'est la regle du panneau, elle vaut ici aussi. */
.pp-carte>p.sur{margin:0 0 10px; font:500 11px/1.45 'Outfit',system-ui,sans-serif; color:#8A99B5}
.pp-vide{padding:16px 2px; font:500 12px/1.5 'Outfit',system-ui,sans-serif; color:#8A99B5; text-align:center}

/* ---- LES TABLEAUX ---- */
.pp-tab{width:100%; border-collapse:collapse; font:500 12px/1.4 'Outfit',system-ui,sans-serif}
.pp-tab th{text-align:left; padding:6px 8px; font:700 9.5px/1 'Inter',system-ui,sans-serif;
  letter-spacing:.7px; text-transform:uppercase; color:#8A99B5; border-bottom:1px solid #E1E9F6}
.pp-tab td{padding:8px; border-bottom:1px solid #F0F4FB; color:#0A1F44;
  font-variant-numeric:tabular-nums}
.pp-tab tr:last-child td{border-bottom:0}
.pp-tab td.num{text-align:right}
.pp-sens{font:800 10px/1 'Inter',system-ui,sans-serif; letter-spacing:.6px; padding:4px 7px;
  border-radius:6px; display:inline-block}
.pp-sens.long{background:#E7F6EE; color:#0F8A4F}
.pp-sens.short{background:#FDECEC; color:#B3261E}

/* ---- LES AGENTS ---- */
.pp-agents{display:grid; grid-template-columns:repeat(auto-fill,minmax(168px,1fr)); gap:10px}
.pp-ag{border:1px solid #E1E9F6; border-radius:12px; padding:10px 11px; background:#FBFDFF}
.pp-ag .t{display:flex; align-items:center; gap:7px}
.pp-ag .e{font-size:17px}
.pp-ag b{font:800 12px/1.2 'Outfit',system-ui,sans-serif; color:#0A1F44}
.pp-ag .r{font:700 9px/1 'Inter',system-ui,sans-serif; letter-spacing:.7px; text-transform:uppercase;
  color:#1B5FE0; background:#EAF1FF; border-radius:5px; padding:3px 5px; margin-left:auto}
.pp-ag p{margin:7px 0 0; font:500 11px/1.45 'Outfit',system-ui,sans-serif; color:#6B7C99}

/* ---- L'AUDIT ----
   Une regle sans ligne d'audit n'est pas jugeable : la colonne « verdict »
   existe pour ca, et elle dit « pas encore » tant que l'echantillon est trop
   court, au lieu d'inventer un avis. */
.pp-verdict{font:800 9.5px/1 'Inter',system-ui,sans-serif; letter-spacing:.5px;
  padding:4px 7px; border-radius:6px; display:inline-block; white-space:nowrap}
.pp-verdict.bon{background:#E7F6EE; color:#0F8A4F}
.pp-verdict.mauvais{background:#FDECEC; color:#B3261E}
.pp-verdict.attente{background:#F3F5F9; color:#8A99B5}
/* Les marches en desaccord ne sont ni un bon ni un mauvais verdict : c'est
   l'absence de verdict, et elle doit se voir comme telle. */
.pp-verdict.diverge{background:#FFF1E0; color:#A35A00}
.pp-ecart{display:inline-block; margin-left:6px; font:700 9.5px/1 'JetBrains Mono',ui-monospace,monospace;
  color:#8A99B5}
/* La repartition par marche : un effectif a cote de chaque part, sinon une
   regle vue mille fois sur BTC et trois fois sur DOGE se lit « vue partout ». */
.pp-m{display:inline-flex; align-items:baseline; gap:4px; margin:1px 5px 1px 0;
  font:600 10.5px/1.5 'Outfit',system-ui,sans-serif; color:#33456B; white-space:nowrap}
.pp-m b{font:800 9.5px/1 'Inter',system-ui,sans-serif; letter-spacing:.4px; color:#1B5FE0}
.pp-m i{font-style:normal; font:600 9px/1 'JetBrains Mono',ui-monospace,monospace; color:#A3B0C8}

/* ---- LE JOURNAL ---- */
.pp-flux{margin:0; padding:0; list-style:none; max-height:320px; overflow-y:auto; scrollbar-width:thin}
.pp-flux li{display:flex; gap:9px; padding:7px 2px; border-bottom:1px solid #F0F4FB;
  font:500 11.5px/1.45 'Outfit',system-ui,sans-serif; color:#33456B}
.pp-flux li:last-child{border-bottom:0}
.pp-flux time{flex:0 0 auto; font:600 10px/1.5 'JetBrains Mono',ui-monospace,monospace; color:#8A99B5}

/* ---- L'AVERTISSEMENT ----
   Ecrit en toutes lettres, en haut de la page et non en bas : rien n'est
   signe, aucune cle ne vit ici, aucun ordre ne part. */
.pp-avis{background:#FFF9EC; border:1px solid #FFE2AE; border-radius:14px;
  padding:12px 15px; margin:0 0 14px;
  font:500 12px/1.55 'Outfit',system-ui,sans-serif; color:#7A5200}
.pp-avis b{color:#A96A00}

@media (max-width:1000px){
  .pp-grille{grid-template-columns:1fr}
  .pp-bande{grid-template-columns:repeat(4,1fr)}
}
@media (max-width:560px){
  .pp-bande{grid-template-columns:repeat(2,1fr)}
  .pp-tete .pp-droite{width:100%; margin-left:0}
}