:root {
    /* `color-scheme: dark` EST LE CORRECTIF DES LISTES DÉROULANTES. Le menu
       qui s'ouvre au clic d'un `<select>` est dessiné par le système, pas par
       la page : sans cette ligne il s'ouvrait sur fond BLANC pendant que le
       texte des options héritait du gris clair de la page. Résultat, les
       langues et les quatre-vingt-treize pseudos étaient quasi invisibles.
       Elle met aussi la barre de défilement et le curseur de saisie au ton de
       la page. */
    color-scheme: dark;
    --fond:#151517; --panneau:#202024; --carte:#2b2b31; --texte:#f2f3f5;
    --doux:#a7abb4; --faible:#787c84; --accent:#eea62e; --bleu:#58a6ff;
    --vert:#68d98a; --rouge:#e96e6a; --jaune:#f0c85a; --bord:#34343a; --rayon:14px;
    /* LA CHROME : le bandeau et la barre d'onglets. Un ton au-dessus du fond,
       à peine tiré vers le chaud de l'accent, plutôt que la plaque bleu-gris
       d'avant qui n'appartenait à aucune des deux couleurs de la page. */
    --chrome:#1d1b20; --chrome-haut:#232026;
  }
  *{box-sizing:border-box}
  /* Sans ça, Safari sur iPhone grossit de lui-même certains textes en mode
     paysage et casse l'alignement des colonnes de chiffres. */
  html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
  body{margin:0;background:var(--fond);color:var(--texte);
    font-family:Inter,system-ui,-apple-system,"Segoe UI",sans-serif;font-size:16px;line-height:1.6}
  .page{max-width:1180px;margin:0 auto;padding:0 20px 80px}
  header.haut{background:#333a45;padding:26px 20px 22px;margin:0 0 26px;
    border-bottom:1px solid rgb(0 0 0/.35)}
  .haut-in{max-width:1180px;margin:0 auto;display:flex;flex-wrap:wrap;gap:14px;
    align-items:baseline;justify-content:space-between}
  h1{margin:0;font-size:1.5rem;font-weight:900;letter-spacing:-.02em}
  h1 em{font-style:normal;color:var(--accent)}

  /* ------------------------------------------------------------------ *
   * LE HAUT DE PAGE : UNE CHROME, PAS DEUX MORCEAUX.                    *
   *                                                                     *
   * Le titre s'écrivait en deux centimètres de haut pendant que les     *
   * onglets flottaient dessous, quatre pastilles posées sur le vide     *
   * qu'on lisait comme des filtres et non comme la navigation. Le nom   *
   * de la guilde ne change jamais : il n'a pas à être le plus gros mot  *
   * de l'écran. Il redescend au rang d'enseigne, avec l'écusson et la   *
   * date de relevé, et la place revient à ce qu'on est venu lire.       *
   *                                                                     *
   * La barre d'onglets est SŒUR du bandeau, pas sa fille : c'est ce qui *
   * lui permet de rester en haut quand on défile. Enfermée dans le      *
   * bandeau, elle n'aurait tenu que le temps que le bandeau sorte de    *
   * l'écran, ce qui est précisément le moment où elle sert.             *
   * ------------------------------------------------------------------ */
  header.haut{background:linear-gradient(180deg,var(--chrome-haut),var(--chrome));
    padding:14px 0 13px;margin:0}
  .haut-in{max-width:1180px;margin:0 auto;padding:0 20px;display:flex;flex-wrap:wrap;
    gap:12px 16px;align-items:center;justify-content:space-between}

  /* L'ENSEIGNE. L'initiale de la guilde est écrite PAR LE STYLE, depuis un
     attribut : un vrai nœud de texte se serait retrouvé dans le relevé des
     traductions, où une lettre seule n'a rien à faire. */
  .marque{display:flex;align-items:center;gap:11px;min-width:0}
  .ecu{flex:none;width:38px;height:38px;border-radius:11px;display:grid;place-items:center;
    font:900 1.1rem/1 inherit;color:#17130a;
    background:linear-gradient(150deg,#f5bb50,var(--accent) 55%,#c8811a);
    box-shadow:inset 0 1px 0 rgb(255 255 255/.32),0 2px 12px rgb(0 0 0/.45)}
  .ecu::before{content:attr(data-ecu)}
  .titre{min-width:0;display:flex;flex-direction:column;gap:1px}
  .haut h1{font-size:1.06rem;font-weight:800;letter-spacing:-.01em;line-height:1.25}
  .maj{font-size:.74rem;color:var(--faible);font-variant-numeric:tabular-nums}

  /* Les commandes de la chrome : langue, session. Elles se ressemblent parce
     qu'elles font le même genre de chose, et restent en retrait du contenu. */
  .barreHaut{display:flex;gap:8px;align-items:center;margin-left:auto;flex-wrap:wrap}
  .qui-suis{font-size:.76rem;font-weight:700;color:var(--doux);white-space:nowrap;
    background:rgb(255 255 255/.05);border:1px solid var(--bord);
    border-radius:999px;padding:6px 12px}
  .barreHaut select,.barreHaut button{font:700 .79rem/1 inherit;padding:10px 12px;
    border-radius:9px;border:1px solid var(--bord);background:rgb(255 255 255/.05);
    color:var(--doux);cursor:pointer}
  .barreHaut select:hover,.barreHaut button:hover{color:var(--texte);
    border-color:rgb(255 255 255/.28)}

  /* LA BARRE D'ONGLETS. Un trait sous l'onglet ouvert, comme dans un logiciel :
     la pastille pleine se lisait comme un bouton à presser, alors qu'elle
     disait où l'on se trouve. Elle défile à l'horizontale plutôt que de passer
     à la ligne — cinq onglets sur un téléphone tiennent sur un rang. */
  .rail{position:sticky;top:0;z-index:30;background:var(--chrome);
    border-bottom:1px solid var(--bord);margin:0 0 22px;
    box-shadow:0 6px 18px -14px rgb(0 0 0/.9)}
  nav.onglets{max-width:1180px;margin:0 auto;padding:0 20px;display:flex;gap:2px;
    align-items:stretch;overflow-x:auto;overscroll-behavior-x:contain;
    scrollbar-width:none;-ms-overflow-style:none}
  nav.onglets::-webkit-scrollbar{display:none}
  .ong{font:700 .86rem/1 inherit;padding:10px 16px;border-radius:999px;cursor:pointer;
    border:1px solid rgb(255 255 255/.14);background:rgb(255 255 255/.05);color:inherit}
  .ong[aria-pressed="true"]{border-color:var(--accent);color:var(--accent);
    background:rgb(238 166 46/.12)}
  /* Les onglets de la barre, eux, ne sont pas des pastilles. Les boutons de
     même classe posés DANS une vue (le choix d'une sortie, l'affichage des
     codes) gardent la pastille : ce sont des commandes, pas un chemin. */
  .onglets .ong{flex:none;position:relative;border:0;border-radius:0;background:none;
    color:var(--doux);font:800 .85rem/1 inherit;padding:14px 13px 13px;white-space:nowrap}
  .onglets .ong::after{content:'';position:absolute;left:7px;right:7px;bottom:0;height:2px;
    border-radius:2px 2px 0 0;background:transparent}
  .onglets .ong:hover{color:var(--texte)}
  .onglets .ong[aria-pressed="true"]{color:var(--texte)}
  .onglets .ong[aria-pressed="true"]::after{background:var(--accent)}

  /* LA BARRE D'OUTILS DE LA VUE. Le choix du membre était posé au milieu des
     onglets : une liste déroulante dans une barre de navigation se lit comme
     un onglet de plus, et cassait le rang. Elle a sa ligne, sous la barre.
     `display:flex` bat le `display:none` que le navigateur pose sur `hidden` :
     sans la règle qui suit, la barre vide laissait un trou sur les vues qui
     n'ont rien à y mettre. */
  .outils{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin:0 0 16px}
  .outils[hidden]{display:none}
  .outils .etiq{font-size:.72rem;font-weight:900;letter-spacing:.09em;
    text-transform:uppercase;color:var(--faible)}

  /* UN DÉPLACEMENT AU CLAVIER DOIT SE VOIR. Sans ça, la tabulation traverse
     cinq onglets et deux listes sans que rien ne bouge à l'écran. */
  :focus-visible{outline:2px solid var(--accent);outline-offset:2px}
  select,input[type=search]{font:400 .9rem/1 inherit;padding:10px 12px;border-radius:10px;
    border:1px solid rgb(255 255 255/.14);background:rgb(255 255 255/.05);color:inherit}
  /* La ceinture en plus de la bretelle : tous les navigateurs n'honorent pas
     `color-scheme` de la même façon sur le menu déroulant. Poser le fond et la
     couleur des options ne coûte rien et ferme le cas. */
  select option,select optgroup{background:var(--panneau);color:var(--texte)}
  .bloc{background:var(--panneau);border:1px solid var(--bord);border-radius:var(--rayon);
    padding:20px 22px;margin:0 0 18px}
  .bloc h2{margin:0 0 4px;font-size:1.15rem;font-weight:800;letter-spacing:-.01em}
  /* UNE LIGNE DE TEXTE NE SE LIT PLUS AU-DELÀ D'UNE CERTAINE LONGUEUR. Sur un
     grand écran ces phrases couraient sur mille cent pixels, soit cent
     soixante signes : l'œil perd la ligne suivante en revenant à gauche. Les
     tableaux, eux, gardent toute la largeur — c'est leur intérêt. */
  .bloc p.quoi{margin:0 0 14px;color:var(--doux);font-size:.9rem;max-width:78ch}
  .jetons{display:flex;flex-wrap:wrap;gap:10px;margin:0 0 4px}
  .jeton{background:var(--carte);border:1px solid var(--bord);border-radius:12px;
    padding:10px 14px;min-width:150px}
  .jeton b{display:block;font-size:1.5rem;font-weight:900;line-height:1.2}
  .jeton span{font-size:.72rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
    color:var(--faible)}
  table{width:100%;border-collapse:collapse;font-size:.9rem}
  th{text-align:left;font-size:.7rem;letter-spacing:.09em;text-transform:uppercase;
    color:var(--faible);padding:8px 10px;border-bottom:1px solid var(--bord);font-weight:800}
  td{padding:9px 10px;border-bottom:1px solid rgb(255 255 255/.05);vertical-align:top}
  tr:last-child td{border-bottom:0}
  .num{font-variant-numeric:tabular-nums;font-weight:800}
  .g1{color:var(--accent)} .g2{color:var(--bleu)}
  .vert{color:var(--vert)} .rouge{color:var(--rouge)} .jaune{color:var(--jaune)}
  .mou{color:var(--faible);font-size:.82rem}
  .rien{color:#60636a;font-size:.82rem}
  .barre{height:6px;border-radius:3px;background:#3a3a42;overflow:hidden;margin-top:5px}
  .barre i{display:block;height:100%;border-radius:3px}
  footer{margin-top:34px;padding-top:18px;border-top:1px solid var(--bord);
    color:var(--faible);font-size:.82rem;line-height:1.7}
  footer p{max-width:84ch;margin:0 0 9px}
  footer p:last-child{margin-bottom:0}
  .eq{display:flex;gap:5px;flex-wrap:wrap;margin-top:6px}
  .p{position:relative;width:38px;height:38px;border-radius:7px;overflow:hidden;
    background:var(--carte);border:1px solid var(--bord);flex:none}
  .p img{width:100%;height:100%;display:block;object-fit:cover}
  /* UNE IMAGE QUE LE CDN NE PUBLIE PAS LAISSE L'INITIALE. Sept des cent
     dix-neuf images de la page manquaient le 03/09 : sans ça, le navigateur
     posait son icône d'image brisée à la place, et une équipe entière partait
     de travers autour d'elle. */
  .p.sansImage::after{content:attr(data-ini);position:absolute;inset:0;
    display:grid;place-items:center;font:900 .92rem/1 inherit;color:var(--faible)}
  .p i{position:absolute;right:1px;bottom:0;font-style:normal;font-size:.58rem;
    font-weight:800;color:var(--jaune);text-shadow:0 1px 2px #000,0 0 3px #000;line-height:1}
  .inv{display:grid;grid-template-columns:repeat(auto-fill,minmax(132px,1fr));gap:10px}
  .inv .c{background:var(--carte);border:1px solid var(--bord);border-radius:10px;
    padding:9px;display:flex;gap:9px;align-items:center}
  .inv .c .p{width:44px;height:44px}
  .inv .c b{display:block;font-size:.8rem;font-weight:800;line-height:1.25}
  .inv .c span{font-size:.7rem;color:var(--faible)}
  .meta{display:grid;grid-template-columns:repeat(auto-fill,minmax(158px,1fr));gap:10px}
  .meta .c{background:var(--carte);border:1px solid var(--bord);border-radius:10px;
    padding:9px;display:flex;gap:9px;align-items:center}
  .meta .c b{display:block;font-size:.8rem;font-weight:800;line-height:1.25}
  .meta .c span{font-size:.72rem;color:var(--faible)}
  .tb{display:flex;gap:9px;align-items:center}
  /* UN NOM PRÉCÉDÉ DE SON VISAGE, dans un classement. Le conteneur des boss
     (`.tb`) forçait ses images à 34 px et écrasait le portrait rendu par
     `po()`, qui est une vignette de 38 px avec son image en pleine boîte. */
  .avecTete{display:flex;gap:9px;align-items:center;min-width:0}
  .avecTete .lien{min-width:0;overflow-wrap:anywhere}

  /* UNE ESCOUADE TIENT CINQ PORTRAITS EN PLUS DU VISAGE DU BOSS : la grille
     des vignettes (158 px) les repliait en accordéon. Elle a la sienne. */
  /* `min(304px, 100%)` ET NON `304px` : une piste de grille qui ne peut pas
     descendre sous sa largeur minimale deborde des que le conteneur est plus
     etroit. Sur un iPhone SE il reste 266 px utiles, et la carte poussait la
     page entiere a 331 px. Avec `min()`, elle se replie et les cinq portraits
     passent a la ligne. */
  .escouades{display:grid;gap:10px;
    grid-template-columns:repeat(auto-fill,minmax(min(304px,100%),1fr))}
  .escouade{background:var(--carte);border:1px solid var(--bord);border-radius:10px;
    padding:10px 11px;display:flex;gap:11px;align-items:center;min-width:0}
  .escouade .p.visage{width:46px;height:46px;border-radius:10px;flex:none}
  .escouade .p.visage.sansImage::after{font-size:1.05rem}
  .escouade>div{min-width:0}
  .escouade b{display:block;font-size:.85rem;font-weight:800;line-height:1.25}
  .escouade .eq{margin-top:6px}
  .tb img{width:34px;height:34px;border-radius:8px;flex:none;background:var(--carte)}
  .entete{position:relative;overflow:hidden}
  .entete.aArt{padding-right:220px}
  .entete .art{position:absolute;right:-10px;top:-30px;height:230px;width:auto;
    opacity:.5;pointer-events:none;-webkit-mask-image:linear-gradient(to left,#000 55%,transparent);
    mask-image:linear-gradient(to left,#000 55%,transparent)}
  /* UN NOM CLIQUABLE DOIT SE VOIR SANS SURVOL. Sur un téléphone il n'y a pas de
     survol : un lien qui ne se signale qu'au `:hover` est invisible pour la
     moitié des visiteurs. Le soulignement discret est donc permanent. */
  /* ------------------------------------------------------------------ *
   * LA FICHE D'UN PERSONNAGE, SUR LE MODÈLE DE L'ÉCRAN DU JEU           *
   *                                                                     *
   * Le jeu montre, dans cet ordre : le portrait avec son niveau dans le  *
   * coin, le nom et la puissance en bandeau, puis DEUX PANNEAUX côte à   *
   * côte — « Scène Emblématique » et « Insigne ». La première version    *
   * alignait quatre cartes grises intitulées « emplacement 1 » : les     *
   * mêmes chiffres, mais dans un vocabulaire et une disposition que      *
   * personne ne reconnaissait en ouvrant son jeu à côté.                 *
   *                                                                     *
   * On garde ce que le jeu ne montre pas sur cet écran (les affixes de   *
   * chaque scène), parce que c'est précisément ce qui explique un écart  *
   * de dégâts entre deux joueurs de même puissance.                      *
   * ------------------------------------------------------------------ */
  .perso{background:var(--carte);border:1px solid var(--bord);border-radius:14px;
    padding:13px 14px;margin:0 0 12px}

  /* ------------------------------------------------------------------ *
   * LE BANDEAU : portrait, identité, puissance — et l'illustration.      *
   *                                                                      *
   * L'art de carte était posé derrière la carte ENTIÈRE : il passait sous *
   * les trois panneaux de données, s'y faisait couper, et ne ressemblait  *
   * plus qu'à une tache dans le coin. Enfermé dans le bandeau, il a une   *
   * bande à lui, part du bord droit et se fond vers la gauche avant       *
   * d'atteindre le texte.                                                *
   * ------------------------------------------------------------------ */
  .perso-tete{position:relative;overflow:hidden;border-radius:11px;
    display:flex;gap:13px;align-items:center;padding:11px 11px;
    min-height:96px;
    /* UNE BANDE RÉSERVÉE À L'ILLUSTRATION, à droite. Sans elle, l'art passait
       sous la puissance et rendait le seul gros chiffre de la carte illisible.
       Le texte s'arrête où l'image commence. */
    padding-right:168px;
    background:linear-gradient(100deg,rgb(255 255 255/.02) 46%,rgb(255 255 255/.055))}
  /* LE PORTRAIT RESTE LE PORTRAIT DE TÊTE. L'art de carte `ui_lamu_` est une
     composition en diagonale sur fond transparent : réduite à soixante pixels
     elle ne montre plus qu'un bout d'épaule. Elle sert en bandeau derrière le
     bloc (voir `.perso .art`), là où elle a la place d'être lue. */
  .portrait{position:relative;width:66px;height:66px;flex:none;border-radius:11px;
    overflow:hidden;background:var(--panneau);border:1px solid var(--bord)}
  .portrait img{width:100%;height:100%;object-fit:cover;display:block}

  /* L'art part du bord droit, déborde en haut et en bas du bandeau, et se
     fond vers la gauche AVANT d'atteindre le nom. Deux masques superposés :
     l'un en largeur pour libérer le texte, l'autre en hauteur pour qu'il ne
     se coupe pas net sur le bord de la carte. */
  .perso .art{position:absolute;right:-6px;top:50%;transform:translateY(-48%);
    width:176px;height:auto;opacity:.52;pointer-events:none;z-index:0;
    -webkit-mask-image:linear-gradient(to left,#000 32%,transparent 88%),
      linear-gradient(to bottom,transparent,#000 18%,#000 82%,transparent);
    mask-image:linear-gradient(to left,#000 32%,transparent 88%),
      linear-gradient(to bottom,transparent,#000 18%,#000 82%,transparent);
    -webkit-mask-composite:source-in;mask-composite:intersect}
  .perso-tete>.portrait,.perso-tete>.ident,.perso-tete>.force{position:relative;z-index:1}
  /* Le niveau se lit dans le coin, comme sur la carte du jeu. */
  .portrait .niv{position:absolute;left:0;top:0;font-size:.7rem;font-weight:900;
    padding:1px 6px;background:rgb(0 0 0/.72);border-bottom-right-radius:8px;
    line-height:1.35}
  .portrait .et{position:absolute;right:2px;bottom:1px;font-size:.66rem;font-weight:900;
    color:var(--jaune);text-shadow:0 1px 3px #000,0 0 4px #000;line-height:1}
  .perso-tete .ident{min-width:0}
  .perso-tete .ident b{font-size:1.02rem;font-weight:800;display:block;line-height:1.2}
  .perso-tete .chiffres{display:flex;gap:10px;flex-wrap:wrap;margin-top:3px;
    font-size:.77rem;color:var(--faible)}
  .perso-tete .chiffres i{font-style:normal;color:var(--texte);font-weight:800}
  .perso-tete .force{margin-left:auto;text-align:right;flex:none}
  .perso-tete .force b{display:block;font-size:1.22rem;font-weight:900;color:var(--accent);
    line-height:1.1;font-variant-numeric:tabular-nums}
  .perso-tete .force span{font-size:.66rem;font-weight:800;letter-spacing:.07em;
    text-transform:uppercase;color:var(--faible)}

  /* LES TROIS STATS DU JEU, en bandeau sous l'identité. Le jeu les met tout en
     haut de la fiche : attaque, défense, vie. */
  .stats{display:flex;gap:10px;flex-wrap:wrap;margin-top:11px}
  .stat{display:flex;gap:8px;align-items:center;background:rgb(255 255 255/.04);
    border:1px solid var(--bord);border-radius:10px;padding:7px 12px;min-width:132px}
  .stat img{width:24px;height:24px;flex:none;object-fit:contain}
  .stat b{display:block;font-size:1.05rem;font-weight:900;line-height:1.15;
    font-variant-numeric:tabular-nums}
  .stat em{font-style:normal;font-size:.68rem;font-weight:800;letter-spacing:.06em;
    text-transform:uppercase;color:var(--faible)}

  /* Le reste des statistiques, replié : il y en a une quarantaine. */
  .plusStats{margin-top:9px}
  /* LE REPLI SE TAPE AU DOIGT : à 27 px de haut, la cible était sous le
     standard, et c'est le seul moyen d'atteindre les vingt-six autres stats. */
  /* `display:flex` SUPPRIME LE MARQUEUR NATIF du <summary> : sans repère, la
     ligne ressemblait à un titre mort et rien ne disait qu'elle s'ouvre. On le
     redessine, et il pivote quand le bloc est ouvert. */
  .plusStats summary{cursor:pointer;font-size:.76rem;font-weight:800;color:var(--doux);
    padding:10px 0;min-height:44px;display:flex;align-items:center;gap:7px;
    list-style:none}
  .plusStats summary::-webkit-details-marker{display:none}
  .plusStats summary::before{content:'';width:0;height:0;flex:none;
    border-left:6px solid currentColor;border-top:4px solid transparent;
    border-bottom:4px solid transparent;transition:transform .15s}
  .plusStats[open] summary::before{transform:rotate(90deg)}
  .plusStats summary:hover{color:var(--accent)}
  .grilleStats{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));
    gap:2px 14px;margin-top:7px}
  .grilleStats .aff{display:flex;justify-content:space-between;gap:8px;font-size:.76rem}
  .grilleStats .aff em{font-style:normal;color:var(--doux);overflow-wrap:anywhere}
  .grilleStats .aff b{font-variant-numeric:tabular-nums;white-space:nowrap}

  /* La gemme sertie dans un insigne. */
  .gemme{display:flex;gap:5px;align-items:center;margin-top:4px;font-size:.7rem;
    color:var(--jaune)}
  .gemme img{width:18px;height:18px;flex:none;object-fit:contain}

  /* Le panneau Esprit : ce que la grille hexagonale du jeu contient. */
  /* PAS DE LISERÉ LATÉRAL. Un trait de couleur collé au bord gauche d'une
     carte ne veut rien dire pour un joueur et ne ressemble à rien dans le jeu :
     la rareté s'y lit au CADRE de l'objet. On fait pareil — l'icône porte son
     cadre de qualité, la carte reste sobre. */
  .esprits{display:flex;flex-direction:column;gap:7px}
  .esprit{display:flex;gap:9px;align-items:flex-start;background:var(--panneau);
    border:1px solid var(--bord);border-radius:9px;padding:7px 9px}
  .esprit .vign{width:38px;height:38px;flex:none;object-fit:contain;border-radius:8px;
    border:2px solid var(--bord);padding:2px;background:rgb(0 0 0/.25)}
  .esprit.q5 .vign{border-color:#e0553f} .esprit.q4 .vign{border-color:#f0a63a}
  .esprit.q3 .vign{border-color:#a97ce8} .esprit.q2 .vign{border-color:#58a6ff}
  .esprit .txt{min-width:0}
  .esprit b{display:block;font-size:.78rem;font-weight:800;line-height:1.25;
    overflow-wrap:anywhere}
  .esprit .det{display:block;font-size:.69rem;color:var(--faible);margin-top:1px;
    overflow-wrap:anywhere}
  /* Chaque trou, avec sa qualité : le décompte seul cachait la moitié de ce que
     le jeu en dit. */
  .esprit .trous{display:flex;gap:4px;flex-wrap:wrap;margin-top:4px}
  .trou{font-size:.63rem;font-weight:700;padding:1px 6px;border-radius:999px;
    border:1px solid var(--bord);color:var(--faible);white-space:nowrap}
  .trou.q5{border-color:#e0553f;color:#e0553f} .trou.q4{border-color:#f0a63a;color:#f0a63a}
  .trou.q3{border-color:#a97ce8;color:#a97ce8} .trou.q2{border-color:#58a6ff;color:#58a6ff}
  .trou b{color:var(--texte);font-variant-numeric:tabular-nums}
  .esprit .det b{color:var(--texte);font-weight:800;font-variant-numeric:tabular-nums}
  /* Un attribut ne se coupe pas entre son nom et sa valeur. */
  .esprit .attrs{display:flex;flex-wrap:wrap;gap:2px 10px;margin-top:2px}
  .esprit .attr{white-space:nowrap}

  /* L'ultime, et d'où vient la fiche. */
  .ultime{display:flex;gap:9px;align-items:center;margin-top:10px;
    background:rgb(255 255 255/.04);border:1px solid var(--bord);border-radius:10px;
    padding:7px 11px}
  .ultime img{width:30px;height:30px;flex:none;object-fit:contain;border-radius:7px}
  .ultime em{display:block;font-style:normal;font-size:.66rem;font-weight:800;
    letter-spacing:.07em;text-transform:uppercase;color:var(--faible)}
  .ultime b{font-size:.86rem;font-weight:800}
  /* LES SÉPARATEURS SONT RENDUS PAR LE STYLE, pas collés dans le texte.
     Chaque morceau est traduit à part ; en les séparant par un « · » écrit
     dans la phrase, on aurait cinq clés au lieu de trois. Sans cette règle,
     ils se collaient : « 20/08/2026capture eu-1vitrine du profil ». */
  .provenance{margin:9px 0 0;font-size:.72rem;color:var(--faible);
    display:flex;flex-wrap:wrap;gap:0 7px}
  .provenance span+span::before{content:'·';margin-right:7px;opacity:.65}
  /* L'ÉCART ENTRE DEUX RELEVÉS SE VOIT. Un membre qui compare son niveau à
     son stuff doit savoir tout de suite que les deux ne datent pas du même
     jour, sans avoir à rapprocher deux dates lui-même. */
  .decale{margin:6px 0 0;font-size:.74rem;line-height:1.45;color:var(--jaune);
    border-left:2px solid var(--jaune);padding-left:9px;max-width:72ch}

  /* Les trois panneaux du jeu, côte à côte. */
  .panneaux{display:grid;grid-template-columns:1fr 290px 230px;gap:10px;margin-top:12px}
  /* Deux panneaux seulement (pas d'esprit relevé) : la place se répartit. */
  .panneaux:not(:has(.esprits)){grid-template-columns:1fr 300px}
  .panneau{background:rgb(255 255 255/.03);border:1px solid var(--bord);border-radius:11px;
    padding:10px 11px}
  .panneau h3{margin:0 0 9px;font-size:.72rem;font-weight:900;letter-spacing:.09em;
    text-transform:uppercase;color:var(--doux)}

  /* CE QUI EST VIDE SE VOIT, MAIS NE CRIE PAS. Une case non relevée reste à
     sa place, en creux : elle dit qu'il manque un relevé, pas que le joueur
     n'a rien. Sans elle on ne distinguait pas « rien » de « pas vu ». */
  .scene.vide,.insigne.vide{border-style:dashed;opacity:.62}
  .scene.vide .rang{width:58px;height:58px;border:2px dashed var(--bord);
    border-radius:8px;display:flex;align-items:center;justify-content:center}
  .scene.vide .num{position:static;background:none;padding:0;font-size:1rem;
    color:var(--faible)}
  .quoi.vide{font-size:.8rem;margin:0 0 8px;color:var(--faible)}
  .gemme.sansGemme{color:var(--faible)}

  /* Le set, nommé une seule fois pour les quatre scènes. */
  .setTete{margin:-3px 0 9px;font-size:.84rem;font-weight:700;line-height:1.3;
    display:flex;gap:8px;align-items:center;flex-wrap:wrap}
  .setTete .setplein{margin-top:0}

  /* ------------------------------------------------------------------ *
   * LES SCÈNES : L'IMAGE EST LE SUJET, comme sur la carte du jeu.        *
   *                                                                      *
   * Première version : un rectangle gris avec un liseré de couleur en    *
   * haut et une vignette de trente-quatre pixels perdue dans un coin.    *
   * Le jeu, lui, montre quatre cartes ILLUSTRÉES portant leur niveau.    *
   * On agrandit donc l'image, on lui met le cadre de qualité autour      *
   * (c'est ce cadre qui dit la rareté en jeu), et le numéro se pose      *
   * dessus, comme le « I » sur la carte.                                 *
   * ------------------------------------------------------------------ */
  .scenes{display:grid;grid-template-columns:1fr 1fr;gap:9px}
  .scene{background:var(--panneau);border:1px solid var(--bord);border-radius:10px;
    padding:9px;display:flex;gap:10px;align-items:flex-start}
  .scene .rang{position:relative;flex:none;width:58px}
  .scene .vign{width:58px;height:58px;border-radius:8px;display:block;object-fit:cover;
    background:var(--carte);border:2px solid var(--bord)}
  /* LA QUALITÉ SE LIT AU CADRE, ET L'ÉCHELLE EST CELLE DU JEU : le rang le
     plus haut est ROUGE, celui d'en dessous doré. J'avais donné l'or au plus
     haut et le violet au suivant — décalé d'un cran, ce qui mélangeait les
     deux teintes que l'écran du jeu distingue le mieux.
     Aucun bean ne porte ces couleurs : elles sont relevées sur l'écran du jeu,
     où une scène de qualité 5 est encadrée de rouge et une de qualité 4 d'or. */
  .scene.q5 .vign{border-color:#e0553f} .scene.q4 .vign{border-color:#f0a63a}
  .scene.q3 .vign{border-color:#a97ce8} .scene.q2 .vign{border-color:#58a6ff}
  .scene.q1 .vign{border-color:#68d98a}
  /* Le numéro posé sur l'image, et le niveau en bandeau au pied. */
  .scene .num{position:absolute;left:0;top:0;font-size:.66rem;font-weight:900;
    letter-spacing:.04em;padding:1px 5px;background:rgb(0 0 0/.76);
    border-top-left-radius:7px;border-bottom-right-radius:6px;line-height:1.4}
  .scene .nv{position:absolute;left:2px;right:2px;bottom:2px;text-align:center;
    font-size:.6rem;font-weight:800;padding:1px 0;background:rgb(0 0 0/.72);
    border-radius:0 0 6px 6px;color:var(--doux);white-space:nowrap;overflow:hidden}
  .scene .corps{min-width:0;flex:1}
  .scene .nom{display:block;font-size:.76rem;font-weight:700;line-height:1.25;margin:0 0 5px}
  .scene .aff{display:flex;justify-content:space-between;gap:8px;font-size:.75rem;padding:1px 0}
  /* « Krit-Verstärkung », « Verteidigung » : les noms d'affixes allemands
     sont plus longs que les français et ne se coupaient pas, ce qui
     poussait la carte au-delà de l'écran d'un iPhone SE. */
  .scene .aff em{font-style:normal;color:var(--doux);overflow-wrap:anywhere}
  .scene .nom{overflow-wrap:anywhere}
  .scene .aff b{font-variant-numeric:tabular-nums;white-space:nowrap}

  /* Les insignes : la grille de quatre du jeu. */
  .insignes{display:grid;grid-template-columns:1fr 1fr;gap:8px}
  .insigne{background:var(--panneau);border:1px solid var(--bord);border-radius:9px;
    padding:8px 9px;font-size:.75rem;color:var(--doux);min-width:0;
    display:flex;gap:8px;align-items:flex-start}
  /* L'insigne porte le nom d'un personnage : c'est son portrait qui l'illustre,
     la capture ne donnant aucun identifiant d'image propre à l'insigne. */
  .insigne .vign{width:32px;height:32px;border-radius:50%;flex:none;object-fit:cover;
    background:var(--carte);border:1px solid var(--bord)}
  /* « Insigne de Keicho Nijimura·Ⅰ » ne tient pas dans une demi-colonne de
     téléphone : sans coupure, le nom sortait du cadre. */
  .insigne .txt{min-width:0;overflow-wrap:anywhere}
  .insigne .num{display:block;font-size:.8rem;font-weight:900;color:var(--texte)}
  .insigne .det{display:block;font-size:.7rem;color:var(--faible);margin-top:2px}

  /* Un set complet vaut un bonus : on le dit plutôt que de le laisser deviner. */
  .setplein{display:inline-block;font-size:.66rem;font-weight:900;letter-spacing:.05em;
    text-transform:uppercase;color:#17130a;background:var(--accent);border-radius:999px;
    padding:1px 7px;margin-top:5px}

  @media(max-width:1080px){
    /* Sous mille quatre-vingts pixels, trois panneaux côte à côte n'ont plus la
       place : les scènes prennent la largeur, insignes et esprits se partagent
       la ligne du dessous. */
    .panneaux{grid-template-columns:1fr 1fr}
    .panneaux>section:first-child{grid-column:1 / -1}
  }
  @media(max-width:760px){
    .panneaux,.panneaux:not(:has(.esprits)){grid-template-columns:1fr}
    .panneaux>section:first-child{grid-column:auto}
  }
  @media(max-width:560px){
    /* Sur un téléphone, une scène par ligne : à deux, le nom de la scène se
       casse en cinq lignes de trois mots. Les insignes suivent, leurs noms
       étant encore plus longs. */
    .scenes,.insignes{grid-template-columns:1fr}
    .perso-tete .force{margin-left:0;width:100%;text-align:left;order:3}
    /* Sur un téléphone, la bande de droite prendrait la moitié de l'écran :
       l'illustration repasse en fond, plus discrète. */
    .perso-tete{flex-wrap:wrap;padding-right:11px;min-height:0}
    .perso .art{width:150px;opacity:.28;right:-22px}
  }

  /* Un bloc dont la donnée n'est pas encore fiable, montré aux seuls responsables. */
  .avenir{border-style:dashed}
  .etiqAvenir{display:inline-block;font-size:.7rem;font-weight:800;letter-spacing:.06em;
    text-transform:uppercase;color:#17130a;background:var(--jaune);border-radius:999px;
    padding:2px 9px;margin-left:8px;vertical-align:3px}

  /* --- l'accueil --- */
  .mot{font-size:1rem;line-height:1.65;margin:0 0 12px;white-space:pre-wrap;max-width:72ch}
  .sousTitre{margin:18px 0 10px;font-size:.74rem;font-weight:900;letter-spacing:.09em;
    text-transform:uppercase;color:var(--doux)}
  /* LES DEUX COULEURS DE GUILDE DOIVENT TENIR ICI AUSSI. `.sousTitre` est
     déclaré après `.g1` : à spécificité égale il l'emportait, et le titre de
     la guilde perdait sa couleur au moment précis où elle sert à distinguer
     les deux blocs. */
  .sousTitre.g1{color:var(--accent)} .sousTitre.g2{color:var(--bleu)}
  /* `auto-fit` ET NON `auto-fill` : à trois objectifs dans une grille prévue
     pour quatre, `auto-fill` gardait la quatrième colonne vide et laissait un
     blanc à droite qu'on lisait comme une carte manquante. */
  .objectifs{display:grid;grid-template-columns:repeat(auto-fit,minmax(232px,1fr));gap:10px}
  /* LES TROIS CARTES ONT LA MÊME HAUTEUR ET LEURS NOTES S'ALIGNENT. En pile
     simple, un intitulé qui passait sur deux lignes décalait sa note d'un cran
     et le rang entier partait de travers. */
  .objectif{background:var(--carte);border:1px solid var(--bord);border-radius:11px;
    padding:12px 14px;display:flex;flex-direction:column}
  .objectif b{display:block;font-size:.78rem;font-weight:800;line-height:1.35;
    color:var(--doux);text-wrap:balance}
  .objectif .cible{display:block;margin-top:7px;font-size:1.02rem;font-weight:900;
    line-height:1.3;color:var(--accent);font-variant-numeric:tabular-nums;
    text-wrap:balance}
  .objectif .det{display:block;margin-top:auto;padding-top:9px;font-size:.75rem;
    color:var(--faible);line-height:1.45}
  /* Les règles sont numérotées : on s'y réfère par leur numéro. */
  .regles{margin:0;padding-left:22px;display:flex;flex-direction:column;gap:11px}
  .regles li b{display:block;font-size:.92rem;font-weight:800;line-height:1.3}
  .regles li span{display:block;margin-top:3px;font-size:.85rem;color:var(--doux);
    line-height:1.5}

  /* --- la galerie des affiches --- */
  /* DES CARTES DE MÊME HAUTEUR, dont la vignette est rognée en haut : une
     affiche fait jusqu'à dix fois sa largeur en hauteur, la montrer entière
     donnerait un trait vertical. Le haut porte le titre et les chiffres. */
  .galerie{display:grid;gap:12px;margin-top:14px;
    grid-template-columns:repeat(auto-fill,minmax(min(240px,100%),1fr))}
  /* EN BANDE : des vignettes plus petites, pour que le bloc reste un raccourci
     et ne repousse pas les chiffres de la sortie hors de l'écran. */
  .galerie.bande{gap:10px;
    grid-template-columns:repeat(auto-fill,minmax(min(172px,100%),1fr))}
  .galerie.bande .tt{padding:8px 10px 10px}
  .galerie.bande .tt em{font-size:.62rem;letter-spacing:.07em}
  .galerie.bande .tt b{font-size:.78rem;margin-top:2px}
  .affiche{display:flex;flex-direction:column;padding:0;text-align:left;cursor:pointer;
    background:var(--carte);border:1px solid var(--bord);border-radius:12px;
    overflow:hidden;color:inherit;font:inherit}
  .affiche:hover{border-color:rgb(255 255 255/.3)}
  .affiche img{display:block;width:100%;height:auto;aspect-ratio:520/340;
    object-fit:cover;object-position:top center;background:var(--panneau)}
  .affiche .tt{display:block;padding:10px 12px 12px}
  .affiche .tt em{display:block;font-style:normal;font-size:.68rem;font-weight:900;
    letter-spacing:.08em;text-transform:uppercase;color:var(--faible)}
  .affiche .tt b{display:block;margin-top:3px;font-size:.86rem;font-weight:800;
    line-height:1.3;overflow-wrap:anywhere}
  .cb{font-style:normal;font-size:.72rem;font-weight:900;opacity:.65;
    margin-left:4px;font-variant-numeric:tabular-nums}
  /* LE BOSS SE RECONNAIT A SON VISAGE avant de se lire. Sept boutons de texte
     se ressemblent tous ; sept portraits, non. */
  .ong.avecTete{display:inline-flex;align-items:center;gap:8px;padding-left:8px}
  .ong.avecTete img{width:26px;height:26px;border-radius:7px;flex:none;
    background:var(--panneau)}

  /* L'AFFICHE EN GRAND. Elle défile toute seule : une image de cinq mille
     pixels de haut ne tient dans aucun écran, et la réduire la rendrait
     illisible — c'est un tableau de cent lignes. */
  .loupe{position:fixed;inset:0;z-index:60;background:rgb(8 8 10/.94);
    display:flex;flex-direction:column}
  .loupe-haut{flex:none;display:flex;justify-content:flex-end;
    padding:10px 14px;border-bottom:1px solid var(--bord)}
  .loupe .fermer{font:800 .84rem/1 inherit;padding:12px 18px;min-height:44px;
    border-radius:10px;border:1px solid var(--bord);cursor:pointer;
    background:rgb(255 255 255/.07);color:var(--texte)}
  .loupe .fermer:hover{border-color:rgb(255 255 255/.32)}
  .loupe-corps{flex:1 1 auto;overflow:auto;overscroll-behavior:contain;
    padding:14px;display:flex;justify-content:center}
  .loupe-corps img{display:block;width:100%;max-width:1180px;height:auto;
    align-self:flex-start;border-radius:8px}

  /* --- le choix de la sortie, onglet Boss du monde --- */
  .choixBoss{display:flex;gap:8px;flex-wrap:wrap;margin-top:4px}
  .bossOng{display:inline-flex;align-items:center;gap:8px;padding:7px 13px 7px 7px}
  .bossOng img{width:30px;height:30px;border-radius:7px;flex:none;background:var(--carte)}
  .bossOng span{display:flex;flex-direction:column;line-height:1.15;text-align:left}
  .bossOng i{font-style:normal;font-weight:600;font-size:.68rem;color:var(--faible)}
  .bossOng[aria-pressed="true"] i{color:inherit;opacity:.75}

  /* La colonne de SON serveur, dans « ce que ses scores vaudraient ailleurs » :
     c'est le repère à partir duquel tout le reste se lit. */
  .ailleurs .sien{background:rgb(238 166 46/.09);box-shadow:inset 1px 0 0 rgb(238 166 46/.35),
    inset -1px 0 0 rgb(238 166 46/.35)}

  /* --- le panneau des codes (onglet Suivi, admin seulement) --- */
  .barreCodes{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin:2px 0 14px}
  .code{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-weight:800;
    letter-spacing:.06em;background:var(--carte);border:1px solid var(--bord);
    border-radius:7px;padding:3px 7px;font-size:.86rem;white-space:nowrap}
  .mini{font:700 .74rem/1 inherit;padding:7px 10px;border-radius:8px;cursor:pointer;
    border:1px solid rgb(255 255 255/.16);background:rgb(255 255 255/.06);color:inherit;
    white-space:nowrap}
  .mini:hover{background:rgb(255 255 255/.12)}
  /* Le bouton qui coupe un accès ne doit pas ressembler à celui d'à côté. */
  .mini.danger{border-color:rgb(233 110 106/.5);color:var(--rouge)}
  .mini.danger:hover{background:rgb(233 110 106/.14)}
  .mini[disabled]{opacity:.5;cursor:default}
  .cst .lab{width:170px}
  .lien{font:inherit;font-weight:800;background:none;border:0;padding:0;cursor:pointer;
    color:inherit;text-align:left;text-decoration:underline;text-underline-offset:3px;
    text-decoration-thickness:1px;text-decoration-color:rgb(255 255 255/.28)}
  /* LES DEUX GUILDES SE DISTINGUENT AU PREMIER COUP D'ŒIL : STARDUST en doré,
     STARDUST2 en bleu. Ces deux règles doivent battre le `color:inherit` de
     `.lien` ci-dessus, qui pèse pareil et vient après : sans elles, un nom de
     membre dans un classement restait blanc et les deux guildes se
     confondaient. */
  .lien.g1{color:var(--accent)}
  .lien.g2{color:var(--bleu)}
  .lien:hover,.lien:focus-visible{text-decoration-color:currentColor;filter:brightness(1.25)}
  /* La légende des couleurs, en tête des classements mêlant les deux guildes. */
  .legende{display:flex;gap:14px;flex-wrap:wrap;align-items:center;font-size:.8rem;
    color:var(--faible);margin:0 0 12px}
  .legende b{font-weight:800}
  [hidden]{display:none!important}

  /* ------------------------------------------------------------------ *
   * LE TABLEAU QUI DÉFILE                                               *
   *                                                                     *
   * Deux tableaux d'ici sont des matrices, pas des listes : la grille    *
   * des médianes fait dix colonnes (huit serveurs, le vivier, la         *
   * sortie), et le Boss du monde en compte autant qu'il y a eu de        *
   * sorties. Les empiler en fiches sur téléphone détruirait ce qu'ils    *
   * disent — la comparaison se lit EN LIGNE. On les fait donc défiler    *
   * horizontalement, chacun dans son propre cadre, en gardant la         *
   * première colonne à l'écran pour toujours savoir quelle ligne on lit. *
   *                                                                     *
   * Le conteneur est posé par le script, sur tous les tableaux, présents *
   * et à venir : rien à penser au moment d'en écrire un nouveau.         *
   * ------------------------------------------------------------------ */
  .tw{overflow-x:auto;overscroll-behavior-x:contain;-webkit-overflow-scrolling:touch}
  .tw:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:6px}
  /* `width:auto` EST LE POINT CRITIQUE. Le `table{width:100%}` general oblige
     le tableau a tenir dans le cadre : sept colonnes se tassent alors dans
     trois cents pixels, chaque chiffre se casse sur quatre lignes, et rien ne
     defile — le cadre ne sert plus a rien. En largeur automatique, le tableau
     prend la place qu'il lui faut et c'est le cadre qui defile. */
  .tw>table{min-width:100%;width:auto}

  /* ------------------------------------------------------------------ *
   * LE TÉLÉPHONE                                                        *
   *                                                                     *
   * C'est l'écran sur lequel un membre ouvrira cette page : entre deux   *
   * sorties de boss, sur son canapé, pas devant un ordinateur. Trois     *
   * règles tiennent tout le reste :                                      *
   *                                                                     *
   *  - RIEN NE DÉBORDE LATÉRALEMENT. Seuls les cadres `.tw` défilent en  *
   *    largeur ; le corps de page, jamais.                               *
   *  - CE QU'ON TOUCHE FAIT 44 px. Onglets, boutons, listes déroulantes.  *
   *  - LES CHAMPS FONT 16 px. En dessous, iOS zoome tout seul à la mise   *
   *    au point et laisse la page de travers.                            *
   * ------------------------------------------------------------------ */
  @media(max-width:720px){
    body{font-size:15px}
    .page{padding:0 13px 56px}
    header.haut{padding:11px 0 10px}
    .haut-in{padding:0 13px;gap:9px 10px}
    .rail{margin-bottom:15px}
    /* LES ONGLETS PASSENT A LA LIGNE, ILS NE DEFILENT PAS. Sur un iPhone SE
       « Boss du monde » sortait de l'ecran par la droite : le rang defilait
       bien, mais rien ne le disait, et un onglet qu'on ne voit pas est un
       onglet qui n'existe pas. Ils se partagent la largeur et prennent deux
       rangs, ce qui les montre tous d'un coup d'oeil. */
    nav.onglets{padding:0 13px;gap:0 2px;flex-wrap:wrap;overflow-x:visible}
    .onglets .ong{flex:1 1 auto;text-align:center}
    /* LES PASTILLES POSEES DANS UNE VUE SE TOUCHENT AUSSI. En scindant la
       barre d ongles de ces boutons-la, ils ont perdu la hauteur minimale
       qu ils tenaient de la regle commune : les sept filtres de la galerie
       tombaient a 39 px, sous le seuil du doigt. */
    .ong{min-height:44px}
    .ecu{width:33px;height:33px;border-radius:9px;font-size:.98rem}
    .haut h1{font-size:.99rem}
    .maj{font-size:.71rem}
    .qui-suis{padding:5px 10px;font-size:.72rem}
    /* LA CHROME AUSSI SE TOUCHE AU DOIGT, et les champs restent à 16 px sinon
       iOS zoome à la mise au point. Les règles générales plus bas ne suffisent
       pas ici : `.barreHaut select` pèse plus lourd que `select` seul et
       l'emporterait, y compris à l'intérieur de cette media query. */
    .barreHaut select,.barreHaut button{min-height:44px;font-size:16px;padding:10px 12px}
    .onglets .ong{min-height:44px;padding:13px 12px;font-size:.86rem}
    /* Le choix du membre prend la largeur : à mi-ligne, les pseudos longs
       étaient coupés au milieu. */
    #choix{width:100%}
    #choix select{flex:1 1 auto;min-width:0}
    select,input[type=search]{min-height:44px;font-size:16px}

    .bloc{padding:14px 13px;margin-bottom:14px;border-radius:12px}
    .bloc h2{font-size:1.05rem}
    .bloc p.quoi{font-size:.86rem;margin-bottom:12px}

    /* Le cadre de défilement mord sur la marge du bloc : le tableau touche
       les bords, ce qui donne la largeur utile et montre qu'il continue. */
    .tw{margin:0 -13px;padding:0 13px}
    td,th{padding:7px 8px;font-size:.82rem}
    /* LA PREMIÈRE COLONNE RESTE. Le fond doit être opaque et de la couleur
       du bloc, sinon les colonnes défilent en transparence dessous. */
    .tw th:first-child,.tw td:first-child{position:sticky;left:0;z-index:1;
      background:var(--panneau);box-shadow:1px 0 0 var(--bord)}
    .tw td:first-child{min-width:132px;max-width:46vw}
    /* Une colonne de données garde une largeur lisible plutôt que de se plier
       en accordéon ; c'est le cadre qui absorbe la largeur en trop. */
    .tw td:nth-child(n+2),.tw th:nth-child(n+2){min-width:94px}
    /* Le Boss du monde empile cinq lignes par case, dont « 1,88× sa médiane »
       et « 6e de son serveur ». La largeur compte la BORDURE (`box-sizing`
       s'applique partout ici) : à 118 px il restait 102 px de texte utile et
       la phrase se cassait quand même en deux. Les autres tableaux n'ont que
       des valeurs courtes et gardent le gabarit serré. */
    .tw .bss td:nth-child(n+2),.tw .bss th:nth-child(n+2){min-width:140px}
    /* Un score, une date, un rang : ça ne se coupe pas en deux lignes. La
       première colonne en est exclue — elle porte des phrases entières. */
    .tw td:nth-child(n+2) .num,.tw td:nth-child(n+2) .mou,
    .tw td:nth-child(n+2) .rien{white-space:nowrap}
    /* UN NOM SE TAPE AU DOIGT. À 32 px la cible était sous le standard, et
       il y en a quatre-vingt-treize dans le classement : c'est là qu'un
       ratage se paie, pas dans un bouton isolé. `width:100%` fait de la
       cellule entière la cible, pas seulement les lettres du pseudo. */
    .lien{min-height:44px;width:100%;display:inline-flex;align-items:center}

    /* L'ILLUSTRATION RESTE, EN BANDEAU. Elle était simplement masquée sous
       720 px, ce qui rendait la fiche grise là où on la regarde le plus. Elle
       passe en haut, fondue vers le bas, et le texte commence dessous. */
    .entete.aArt{padding-right:13px;padding-top:92px}
    .entete .art{display:block;height:204px;right:-18px;top:-26px;opacity:.46;
      -webkit-mask-image:linear-gradient(to bottom,#000 42%,transparent 100%);
      mask-image:linear-gradient(to bottom,#000 42%,transparent 100%)}

    /* LES CONSTATS S'EMPILENT. Trois colonnes pour « Son meilleur boss /
       Akira Otoishi / 2,64× la médiane de son serveur » donnaient trois rubans
       de trois mots hauts de quatre lignes. Ce sont des phrases : elles se
       lisent l'une sous l'autre. */
    /* LES SÉLECTEURS SONT PRÉFIXÉS PAR `.tw`, ET CE N'EST PAS DÉCORATIF. Écrit
       `.cst td`, la règle pèse moins lourd que `.tw td:first-child` juste
       au-dessus : la première cellule restait collante et gardait le trait
       d'un pixel de son bord droit, qui se voyait comme une barre parasite au
       milieu de chaque constat. Il faut au moins la même spécificité. */
    .tw .cst,.tw .cst tbody,.tw .cst tr,.tw .cst td{display:block;width:auto}
    .tw .cst tr{padding:9px 0;border-bottom:1px solid rgb(255 255 255/.05)}
    .tw .cst tr:last-child{border-bottom:0}
    .tw .cst td{border:0;padding:0;min-width:0;max-width:none}
    .tw .cst td:first-child{position:static;box-shadow:none;width:auto;min-width:0;
      max-width:none;color:var(--faible);font-size:.74rem;letter-spacing:.07em;
      text-transform:uppercase}
    .tw .cst td:nth-child(2){font-size:1.02rem;line-height:1.35}
    .tw .cst td:nth-child(3){font-size:.84rem}

    .p{width:34px;height:34px}
    .tb img{width:30px;height:30px}
    footer{font-size:.8rem}
  }

  /* Le petit écran (un iPhone SE fait 320 px de large). */
  @media(max-width:560px){
    /* Deux tuiles par ligne, à égalité : en flex, la dernière restait seule
       et étirée sur toute la largeur. */
    .jetons{display:grid;grid-template-columns:1fr 1fr;gap:8px}
    .jeton{min-width:0;padding:9px 11px}
    .jeton b{font-size:1.22rem}
    .jeton span{font-size:.65rem;letter-spacing:.06em}
    .inv,.meta{grid-template-columns:repeat(auto-fill,minmax(138px,1fr));gap:8px}
    .inv .c,.meta .c{padding:8px;gap:8px}
    .inv .c .p{width:38px;height:38px}
    h1{font-size:1.28rem}
  }

  /* Un mouvement qui donne le tournis n'est pas une décoration. */
  @media(prefers-reduced-motion:reduce){
    *,*::before,*::after{animation-duration:.001ms!important;transition-duration:.001ms!important;
      scroll-behavior:auto!important}
  }

  /* --- les candidatures (onglet admin) --------------------------------- */
  /* UNE CARTE PAR CANDIDATURE, pas un tableau : chaque candidature porte un
     texte libre et jusqu'à six captures, ce qu'aucune ligne de tableau ne
     tient sur un téléphone. Les gestes sont en bas de la carte, là où le
     pouce arrive après avoir lu. */
  .postu{background:var(--carte);border:1px solid var(--bord);border-radius:12px;
    padding:14px 16px;margin:12px 0 0}
  .postuTete{display:flex;flex-wrap:wrap;gap:6px 12px;align-items:baseline}
  .postuTete b{font-size:1.02rem;font-weight:900}
  .postuTete .statut{font-size:.72rem;font-weight:900;letter-spacing:.06em;text-transform:uppercase}
  .postuTete .code{margin-left:auto;font-size:.78rem;color:var(--faible)}
  .postuInfos{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:8px 14px;
    margin:12px 0 0}
  .postuInfos>div{min-width:0}
  .postuInfos span:first-child{display:block;font-size:.68rem;font-weight:800;letter-spacing:.08em;
    text-transform:uppercase;color:var(--faible)}
  .postuInfos b{font-size:.94rem;overflow-wrap:anywhere}
  .postuInfos .det{display:block;font-size:.74rem;color:var(--faible);margin-top:2px}
  .postuInfos .mini{margin-left:6px;padding:5px 9px;font-size:.7rem;min-height:0}
  .postuTexte{margin:12px 0 0;padding:10px 12px;border-radius:9px;background:rgb(255 255 255/.04);
    font-size:.88rem;line-height:1.55;color:var(--doux);white-space:pre-wrap;max-width:72ch}
  .postuTexteFr{margin-top:6px;background:rgb(238 166 46/.07);border-left:3px solid rgb(238 166 46/.55)}
  .postuLangue{display:inline-block;margin:0 8px 2px 0;padding:2px 6px;border-radius:4px;font-size:.66rem;
    font-weight:700;letter-spacing:.08em;line-height:1;background:rgb(238 166 46/.2);color:#eea62e;vertical-align:1px}
  .postuCaptures{display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:8px;
    margin:12px 0 0}
  .postuCaptures .capture{display:block;position:relative;border-radius:9px;overflow:hidden;
    border:1px solid var(--bord);aspect-ratio:9/12;background:#000;padding:0;width:100%;
    cursor:zoom-in;font:inherit;color:inherit}
  .postuCaptures .capture:hover{border-color:rgb(255 255 255/.35)}
  .postuCaptures img{width:100%;height:100%;object-fit:cover;display:block}
  .postuCaptures span{position:absolute;left:0;right:0;bottom:0;padding:5px 7px;font-size:.66rem;
    font-weight:800;line-height:1.25;background:rgb(0 0 0/.72);color:#fff}
  .postuActions{display:flex;flex-wrap:wrap;gap:8px;margin:14px 0 0}
  .postuActions .mini{min-height:44px;padding:10px 14px;font-size:.84rem}
  .traitees{margin:16px 0 0}
  .traitees summary{cursor:pointer;color:var(--doux);font-weight:800;font-size:.9rem;min-height:44px;
    display:flex;align-items:center}
  .traitees .postu{opacity:.85}

  /* --- la visionneuse (captures d'une candidature) --------------------- */
  /* UNE IMAGE À LA FOIS, ENTIÈRE DANS L'ÉCRAN, et les flèches par-dessus :
     une capture de téléphone est en portrait, elle tient sans défiler. Le
     compteur dit où l'on est, la légende ce qu'on regarde. */
  .loupe.galerie .loupe-haut{justify-content:flex-start;align-items:center;gap:10px}
  .loupe-titre{font-weight:800;font-size:.9rem;min-width:0;overflow:hidden;
    text-overflow:ellipsis;white-space:nowrap}
  .loupe-compteur{margin-left:auto;margin-right:6px;color:var(--faible);font-size:.82rem;
    font-variant-numeric:tabular-nums;white-space:nowrap}
  .loupe.galerie .loupe-corps{position:relative;overflow:hidden;padding:0;align-items:center}
  .loupe.galerie .loupe-corps img{width:auto;max-width:100%;max-height:100%;height:auto;
    align-self:center;border-radius:0;user-select:none;-webkit-user-drag:none}
  .loupe-fleche{position:absolute;top:50%;transform:translateY(-50%);width:54px;height:76px;
    border:0;border-radius:12px;background:rgb(0 0 0/.55);color:#fff;font:900 2.2rem/1 inherit;
    cursor:pointer;display:grid;place-items:center;padding:0 0 6px}
  .loupe-fleche.prec{left:10px}
  .loupe-fleche.suiv{right:10px}
  .loupe-fleche:hover{background:rgb(0 0 0/.82)}
  .loupe-fleche[hidden]{display:none}
  @media(max-width:560px){
    .loupe-fleche{width:44px;height:64px;font-size:1.7rem;background:rgb(0 0 0/.38)}
    .loupe-fleche.prec{left:4px}
    .loupe-fleche.suiv{right:4px}
  }

  /* --- le rappel des règles (Accueil) et les réglages du recrutement (admin) --- */
  .rappel{border-color:rgb(240 200 90/.5)}
  .rappel p.quoi{color:var(--jaune);margin-bottom:10px}
  .rappel .mini{min-height:44px;padding:10px 14px;font-size:.84rem}
  .reglagesRecrut{display:grid;grid-template-columns:1fr;gap:10px;margin:14px 0 4px;padding:14px 16px;
    border-radius:12px;background:var(--carte);border:1px solid var(--bord)}
  .reglagesRecrut .inter{display:flex;align-items:center;gap:10px;font-weight:800;min-height:44px;cursor:pointer}
  .reglagesRecrut .inter input{width:22px;height:22px;accent-color:var(--accent);margin:0}
  .reglagesRecrut .champ{display:block}
  .reglagesRecrut .champ span{display:block;font-size:.7rem;font-weight:800;letter-spacing:.08em;
    text-transform:uppercase;color:var(--faible);margin-bottom:4px}
  .reglagesRecrut input[type=text]{width:100%;font:400 16px/1.3 inherit;padding:10px 12px;border-radius:9px;
    border:1px solid rgb(255 255 255/.16);background:rgb(255 255 255/.05);color:inherit;min-height:44px}
  .reglagesRecrut .mini{justify-self:start;min-height:44px;padding:10px 16px;font-size:.84rem}
  .reglagesRecrut .etat{font-size:.82rem;color:var(--faible);align-self:center}
  @media(min-width:720px){
    .reglagesRecrut{grid-template-columns:1fr 1fr;align-items:end}
    .reglagesRecrut .inter,.reglagesRecrut .mini,.reglagesRecrut .etat{grid-column:1/-1}
  }
  .staff{margin-top:14px;font-size:.82rem}
  .staff a{color:var(--faible)}
  .staff a:hover{color:var(--texte)}

  /* La candidature qu'on vient d'ouvrir par son lien : bordée d'or, le temps
     qu'on la lise ; le défilement l'amène en haut de l'écran. */
  .postu.cible{border-color:var(--accent);box-shadow:0 0 0 2px rgb(238 166 46/.35)}