/* ---------------------------------------------------------------------------
 * public.css — habillage des ecrans vus par un visiteur : vitrine, connexion,
 * inscription, entree en jeu, etats vides et attentes.
 *
 * Fichier separe a dessein : style.css et formFragment.css portent la coquille
 * historique et l'outil createur. Melanger les deux rendrait tout changement de
 * la facade publique risque pour l'editeur, qui n'a rien demande.
 *
 * Palette reprise de l'existant, PAS inventee :
 *   fond          #262626      bandeau       #0F0F0F
 *   accent        #55FFA4      accent sombre #2F2F2F
 * ------------------------------------------------------------------------- */

/* --- Vitrine (accueil, visiteur sans compte) ----------------------------- */

._vitrine {
    float: left;
    width: 100%;
    padding: 56px 0 40px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.12);
    margin-bottom: 24px;
}

._vitrineTitre {
    font-size: 38px;
    line-height: 1.15;
    font-weight: 700;
    color: #FFFFFF;
    margin: 0 0 16px 0;
    max-width: 760px;
}

._vitrineTexte {
    font-size: 16px;
    line-height: 1.65;
    color: #C9C9C9;
    max-width: 620px;
    margin: 0 0 28px 0;
}

._vitrineActions {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 18px;
}

._vitrineCta {
    display: inline-block;
    padding: 12px 26px;
    border-radius: 4px;
    background: #55FFA4;
    color: #0F0F0F;
    font-weight: 600;
    font-size: 14px;
    text-transform: uppercase;
    text-decoration: none;
    border: 1px solid #55FFA4;
    cursor: pointer;
}

._vitrineCta:hover {
    background: #7BFFBC;
    color: #0F0F0F;
    text-decoration: none;
}

._vitrineCta._secondary {
    background: transparent;
    color: #55FFA4;
    border: 1px solid rgba(85, 255, 164, 0.5);
}

._vitrineCta._secondary:hover {
    background: rgba(85, 255, 164, 0.1);
    color: #55FFA4;
}

._vitrineNote {
    font-size: 13px;
    color: #8A8A8A;
    margin: 0;
}

/* --- Etats vides et attentes --------------------------------------------- */

._etatVide {
    float: left;
    width: 100%;
    padding: 60px 0;
    text-align: center;
    color: #9A9A9A;
    font-size: 15px;
}

._etatVide p {
    margin-bottom: 18px;
}

._spinner,
._ecranJeuSpinner {
    width: 26px;
    height: 26px;
    border: 3px solid #333;
    border-top-color: #55FFA4;
    border-radius: 50%;
    animation: inckorSpin 0.8s linear infinite;
    margin: 0 auto 14px auto;
}

@keyframes inckorSpin { to { transform: rotate(360deg); } }

/* --- Panneau connexion / inscription ------------------------------------- */

/* Bouton du bandeau. Il portait une icone seule : sur un site public, un
   libelle se lit, un pictogramme se devine. */
._authOpen {
    float: right;
    margin-right: 20px;
    padding: 8px 18px;
    background: transparent;
    color: #55FFA4;
    border: 1px solid rgba(85, 255, 164, 0.5);
    border-radius: 4px;
    font-size: 13px;
    text-transform: uppercase;
    cursor: pointer;
}

._authOpen:hover {
    background: rgba(85, 255, 164, 0.12);
}

._authPanel {
    width: 100%;
    max-width: 420px;
    margin: 0 auto;
    padding: 4px 0 8px 0;
    color: #E8E8E8;
}

._authTabs {
    display: flex;
    border-bottom: 1px solid rgba(255, 255, 255, 0.15);
    margin-bottom: 20px;
}

._authTab {
    flex: 1;
    padding: 12px 8px;
    background: transparent;
    border: none;
    border-bottom: 2px solid transparent;
    color: #9A9A9A;
    font-size: 14px;
    cursor: pointer;
}

._authTab:hover { color: #E8E8E8; }

._authTab._selected {
    color: #55FFA4;
    border-bottom-color: #55FFA4;
    font-weight: 600;
}

/* Le refus s'affiche DANS le formulaire. Une notification en haut a droite
   disparait, et laisse quelqu'un face a un formulaire muet qui vient de
   refuser sa saisie sans dire pourquoi. */
._authError {
    background: rgba(255, 85, 85, 0.12);
    border: 1px solid rgba(255, 85, 85, 0.45);
    border-radius: 4px;
    color: #FF9E9E;
    padding: 10px 12px;
    font-size: 13px;
    line-height: 1.5;
    margin-bottom: 16px;
}

._authForm {
    display: flex;
    flex-direction: column;
}

._authLabel {
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #9A9A9A;
    margin-bottom: 6px;
}

._authInput {
    background: #1B1B1B;
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 4px;
    color: #FFFFFF;
    padding: 10px 12px;
    font-size: 14px;
    margin-bottom: 14px;
    width: 100%;
    box-sizing: border-box;
}

._authInput:focus {
    outline: none;
    border-color: #55FFA4;
}

._authHint {
    font-size: 12px;
    color: #7E7E7E;
    line-height: 1.5;
    margin: -10px 0 16px 0;
}

._authSubmit {
    padding: 12px 20px;
    background: #55FFA4;
    color: #0F0F0F;
    border: none;
    border-radius: 4px;
    font-size: 14px;
    font-weight: 600;
    text-transform: uppercase;
    cursor: pointer;
    margin-top: 4px;
}

._authSubmit:hover:enabled { background: #7BFFBC; }

._authSubmit:disabled {
    background: #3A3A3A;
    color: #7E7E7E;
    cursor: default;
}

._authAside {
    font-size: 13px;
    color: #8A8A8A;
    line-height: 1.6;
    margin: 18px 0 0 0;
}

._authAside a { color: #55FFA4; }

/* --- Page /register ------------------------------------------------------ */

._authPage {
    float: left;
    width: 100%;
    max-width: 520px;
    padding: 56px 0;
}

._authPageTitle {
    font-size: 30px;
    font-weight: 700;
    color: #FFFFFF;
    margin-bottom: 12px;
}

._authPageLead {
    font-size: 15px;
    line-height: 1.65;
    color: #C9C9C9;
    margin-bottom: 30px;
}

/* --- Bloc utilisateur connecte ------------------------------------------- */

._guestTag {
    display: inline-block;
    margin-left: 6px;
    padding: 1px 6px;
    border-radius: 3px;
    background: #3A3A3A;
    color: #C9C9C9;
    font-size: 10px;
    text-transform: uppercase;
    vertical-align: middle;
}

._guestNote {
    font-size: 12px;
    line-height: 1.5;
    color: #9A9A9A;
    padding: 0 10px 10px 10px;
    margin: 0;
}

._infoLogin ._core li {
    padding: 7px 10px;
    cursor: pointer;
    font-size: 13px;
}

._infoLogin ._core li:hover {
    background: #2F2F2F;
    color: #55FFA4;
}

._infoLogin ._core button {
    width: calc(100% - 20px);
    margin: 4px 10px 0 10px;
    padding: 7px 10px;
    background: #2F2F2F;
    color: #E8E8E8;
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 4px;
    font-size: 13px;
    cursor: pointer;
}

._infoLogin ._core button:hover {
    border-color: #55FFA4;
    color: #55FFA4;
}

._infoLogin ._core button._secondary {
    background: transparent;
}

/* --- Cartes de jeu ------------------------------------------------------- */

/* Toute la carte est cliquable, pas seulement les quelques pixels du titre. */
._gameClickable { cursor: pointer; display: block; }

._brouillon { color: #FFC46B; }

._detailAside {
    float: left;
    width: 100%;
    clear: both;
    font-size: 13px;
    color: #8A8A8A;
    padding: 14px 0 4px 0;
}

/* --- Ecrans plein cadre du jeu (attente, entree invite) ------------------ */

._ecranJeu {
    background: #111;
    height: calc(100vh - 58px);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    box-sizing: border-box;
}

._ecranJeuCarte {
    width: 100%;
    max-width: 420px;
    text-align: center;
    color: #E8E8E8;
}

/* L'entree invite est un formulaire : cadrer a gauche, un champ centre se
   remplit mal a l'oeil. */
._ecranJeuEntree { text-align: left; }

._ecranJeuTitre {
    display: block;
    font-size: 19px;
    font-weight: 600;
    color: #FFFFFF;
    margin-bottom: 10px;
}

._ecranJeuTexte {
    font-size: 14px;
    line-height: 1.65;
    color: #9A9A9A;
    margin-bottom: 22px;
}

._ecranJeuBarre {
    height: 4px;
    background: #2A2A2A;
    border-radius: 2px;
    overflow: hidden;
}

._ecranJeuBarreRemplie {
    height: 100%;
    background: #55FFA4;
    border-radius: 2px;
    transition: width 0.35s ease;
}

._ecranJeuDetail {
    margin-top: 22px;
    text-align: left;
    font-family: monospace;
    font-size: 13px;
    line-height: 1.7;
}

/* ===========================================================================
 * REFONTE DE LA FAÇADE PUBLIQUE — 2026-09-09
 *
 * Tout ce qui suit est scopé sous `#container._public`, jamais sur les sélecteurs nus. La coquille
 * (`style.css`) et l'outil créateur (`formFragment.css`, `creator*.css`) partagent les mêmes
 * classes : `._mainBody`, `._core`, `._header`, `._title` vivent des deux côtés. Un sélecteur nu
 * repeindrait donc l'éditeur, qui n'a rien demandé.
 *
 * La spécificité fait le reste : `#container._public ._gameDisplay` (1,1,1) l'emporte sur
 * `._core ._gameDisplay` (0,2,0) — un id bat n'importe quel nombre de classes.
 * ======================================================================== */

/* --- La page peut enfin défiler ------------------------------------------
 *
 * `style.css` fige `#container{height:100vh; overflow:hidden}` pour les canvas plein cadre. La
 * règle s'appliquait à TOUTES les routes : mesuré sur le site en ligne, `scrollHeight` valait
 * exactement `clientHeight` — la page publique ne défilait pas d'un pixel, et son propre bouton
 * « Voir les jeux » ne menait nulle part puisque rien ne pouvait bouger.
 *
 * On ne retire pas la règle, on la conditionne. App.js pose la classe selon la route. */

#container._public {
    height: auto;
    min-height: 100vh;
    overflow: visible;
    display: flex;
    flex-direction: column;
}

#container._pleinEcran {
    height: 100vh;
    overflow: hidden;
}

/* Le fond du `body` n'était jamais peint : au-delà de `._mainBody`, et pendant le rebond de
   défilement, on voyait du blanc sur un site sombre. */
body {
    background: #262626;
    color: #FFFFFF;
    font-family: 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
}

/* L'ancre #catalogue du bouton principal devient un glissement plutôt qu'un saut. */
html { scroll-behavior: smooth; }

#container._public ._mainBody {
    float: none;
    width: 100%;
    max-width: 1240px;
    margin: 0 auto;
    padding: 0 32px 72px 32px;
    box-sizing: border-box;
    flex: 1 0 auto;
}

#container._public ._core {
    float: none;
    width: 100%;
}

/* --- Bandeau -------------------------------------------------------------
 * « Créer un jeu » était coupé sur deux lignes : `._centerDivs a` impose `width:116px` et
 * `height:30px` en dur (style.css:119-133). La largeur suit maintenant le texte. */

#container._public #Header {
    min-width: 0;
    position: relative;
}

#container._public #Navigation ._centerDivs a {
    width: auto;
    min-width: 116px;
    height: auto;
    padding: 8px 20px;
    white-space: nowrap;
    justify-content: center;
}

#container._public #Navigation ._centerDivs ._selected { height: auto; }

/* Le bouton de connexion flottait dans un bloc positionné en absolu de 200px de large, sans
   alignement vertical : il débordait sous le bandeau. */
/* 🔴 `.tx-compte` = le même widget dans la barre de l'atelier des tuiles, qui recouvre le bandeau.
   Mêmes règles, par liste de sélecteurs et non par copie : Denis veut le widget ISO partout, et une
   copie divergerait à la prochaine passe de style. */
#container._public #widgetUser,
.tx-compte #widgetUser {
    top: 0;
    width: auto;
    height: 58px;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding: 0 20px 0 0;
    background: transparent;
}

#container._public ._authOpen,
.tx-compte ._authOpen {
    float: none;
    margin: 0;
}

/* --- Vitrine -------------------------------------------------------------- */

#container._public ._vitrine {
    float: none;
    display: block;
    width: 100%;
    padding: 72px 0 56px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.10);
    margin-bottom: 8px;
}

#container._public ._vitrineTitre {
    font-size: clamp(30px, 5vw, 50px);
    line-height: 1.1;
    letter-spacing: -0.02em;
    max-width: 820px;
}

#container._public ._vitrineTexte {
    font-size: 17px;
    max-width: 640px;
}

#container._public ._vitrineActions { margin-bottom: 14px; }

#container._public ._vitrineCta {
    padding: 13px 28px;
    border-radius: 6px;
    letter-spacing: 0.03em;
    transition: background 0.15s ease, transform 0.15s ease;
}

#container._public ._vitrineCta:hover { transform: translateY(-1px); }

/* --- LA GALERIE — un seul composant, de 1 jeu à cinquante ------------------
 *
 * 🔴 Contrainte de Denis : les espaces communautaires auront leur propre galerie, souvent peu
 * fournie, et elle doit ressembler à celle-ci. Donc AUCUNE mise en page ne dépend du nombre.
 *
 * La largeur de piste est BORNÉE — `minmax(260px, 340px)` et non le `1fr` habituel. Avec deux jeux,
 * `1fr` les étirerait en panneaux publicitaires de 600px de large ; borné, deux cartes restent deux
 * cartes et la rangée reste simplement peu remplie. C'est ce qui rend la même grille tenable à
 * 2 comme à 50. */

#container._public ._gameDisplayList {
    float: none;
    width: 100%;
    margin: 0 0 44px 0;
}

#container._public ._gameDisplayList ._header {
    float: none;
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 16px;
    width: 100%;
    height: auto;
    padding: 34px 0 18px 0;
    border: none;
}

#container._public ._gameDisplayList ._header ._title {
    float: none;
    font-size: 22px;
    font-weight: 600;
    color: #FFFFFF;
    padding: 0;
    width: auto;
    height: auto;
    border: none;
}

#container._public ._gameDisplayList ._header ._rightInfo {
    float: none;
    width: auto;
}

#container._public ._gameDisplayList ._header ._rightInfo a {
    color: #9A9A9A;
    font-size: 13px;
    text-decoration: none;
    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
}

#container._public ._gameDisplayList ._header ._rightInfo a:hover {
    color: #55FFA4;
    border-bottom-color: #55FFA4;
}

#container._public ._grilleJeux {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 340px));
    justify-content: start;
    gap: 24px;
    width: 100%;
}

/* --- La carte ------------------------------------------------------------
 * Elle était figée à 433x360 px, en `float:left`, avec une image de hauteur fixe : increvable en
 * grille, impossible sur téléphone. */

#container._public ._gameDisplay,
#container._public ._core ._gameDisplay {
    display: flex;
    flex-direction: column;
    float: none;
    width: 100%;
    height: auto;
    margin: 0;
    padding: 0;
    background: #0F0F0F;
    border: 1px solid rgba(255, 255, 255, 0.07);
    border-radius: 10px;
    overflow: hidden;
    transition: transform 0.15s ease, border-color 0.15s ease;
    /* formFragment.css:929 pose `align-items: flex-start` sur la carte. Sans cette remise a zero,
       le visuel se retracte a la largeur de son CONTENU au lieu de remplir la carte : la jaquette
       occupait un tiers de la case et le reste restait noir. */
    align-items: stretch;
}

#container._public ._gameDisplay:hover {
    transform: translateY(-2px);
    border-color: rgba(85, 255, 164, 0.45);
}

#container._public ._gameClickable {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    flex: 1;
}

/* Rapport 16:10 tenu par le remplissage plutôt que par `aspect-ratio` : même résultat, et aucune
   dépendance à la version du navigateur. */
#container._public ._gameVisuel {
    position: relative;
    width: 100%;
    padding-bottom: 62.5%;
    overflow: hidden;
    background: #141414;
}

#container._public ._gameVisuel > * {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

#container._public ._gameDisplay ._gameIcon,
#container._public ._gameIcon {
    display: block;
    max-width: none;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    object-fit: cover;
    /* PAS de `image-rendering: pixelated` : les jaquettes sont dessinees en 640px et affichees a
       340px sur la carte. En REDUCTION, le rendu au pixel dur crenelle ; c est a l agrandissement
       qu il sert. Le lissage est ici le bon choix. */
}

#container._public ._gameDisplay ._title {
    position: static;
    display: block;
    width: auto;
    height: auto;
    margin: 0;
    padding: 14px 16px;
    font-size: 16px;
    font-weight: 600;
    line-height: 1.3;
    border: none;
    color: #FFFFFF;
}

#container._public ._gameDisplay ._bottomBar {
    float: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: auto;
    padding: 0 16px 13px 16px;
    font-size: 12.5px;
    color: #8A8A8A;
    background: transparent;
}

#container._public ._gameDisplay ._bottomBar ._leftInfo {
    float: none;
    width: auto;
    padding: 0;
    background: transparent;
    color: #9A9A9A;
    font-size: 12.5px;
}

#container._public ._gameDisplay ._bottomBar ._rightInfo {
    float: none;
    width: auto;
}

/* --- Vignette générée -----------------------------------------------------
 * Le repli quand un jeu n'a pas de jaquette. Ce n'est pas une image d'attente : /playablegames ne
 * renvoie JAMAIS le champ `jaquette`, donc les cartes « Mes jeux » n'en auront jamais. */

#container._public ._jaquetteGeneree {
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

/* La trame de cases rappelle ce qu'est un monde Inckor : une grille de cases indépendantes. */
#container._public ._jaquetteGrille {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background-image:
        linear-gradient(rgba(255, 255, 255, 0.05) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.05) 1px, transparent 1px);
    background-size: 32px 32px;
}

#container._public ._jaquetteInitiales {
    position: relative;
    font-size: 46px;
    font-weight: 700;
    letter-spacing: 0.06em;
    color: rgba(255, 255, 255, 0.82);
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.45);
}

/* --- Pastilles ------------------------------------------------------------ */

#container._public ._badges {
    position: absolute;
    top: 10px;
    left: 10px;
    right: auto;
    bottom: auto;
    width: auto;
    height: auto;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    pointer-events: none;
}

#container._public ._badge {
    padding: 3px 9px;
    border-radius: 3px;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    backdrop-filter: blur(2px);
}

#container._public ._badgeNouveau {
    background: rgba(85, 255, 164, 0.92);
    color: #0F0F0F;
}

#container._public ._badgeCompte {
    background: rgba(15, 15, 15, 0.82);
    color: #E8E8E8;
    border: 1px solid rgba(255, 255, 255, 0.28);
}

/* --- Relance brouillon ---------------------------------------------------- */

#container._public ._relanceBrouillon {
    margin: 4px 0 12px 0;
    font-size: 14px;
    color: #9A9A9A;
}

#container._public ._lienDoux {
    color: #55FFA4;
    text-decoration: none;
    font-weight: 500;
}

#container._public ._lienDoux:hover { text-decoration: underline; }

/* --- Sections de la vitrine ----------------------------------------------- */

#container._public ._section {
    width: 100%;
    padding: 52px 0;
    border-top: 1px solid rgba(255, 255, 255, 0.09);
}

#container._public ._sectionTitre {
    font-size: 26px;
    font-weight: 700;
    color: #FFFFFF;
    margin: 0 0 26px 0;
}

#container._public ._sectionTexte {
    font-size: 15px;
    line-height: 1.65;
    color: #C9C9C9;
    max-width: 620px;
    margin: 0 0 22px 0;
}

#container._public ._grilleEtapes {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 28px;
}

#container._public ._etape {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

#container._public ._etapeNum {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    border: 1px solid rgba(85, 255, 164, 0.55);
    color: #55FFA4;
    font-size: 14px;
    font-weight: 700;
}

#container._public ._etapeTitre {
    font-size: 17px;
    font-weight: 600;
    color: #FFFFFF;
}

#container._public ._etapeTexte {
    font-size: 14.5px;
    line-height: 1.65;
    color: #B4B4B4;
    margin: 0;
}

#container._public ._publics {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 28px;
}

#container._public ._publicBloc {
    background: #1C1C1C;
    border: 1px solid rgba(255, 255, 255, 0.07);
    border-radius: 10px;
    padding: 26px;
}

#container._public ._publicTitre {
    font-size: 18px;
    font-weight: 700;
    color: #FFFFFF;
    margin: 0 0 12px 0;
}

#container._public ._publicTexte {
    font-size: 14.5px;
    line-height: 1.7;
    color: #B4B4B4;
    margin: 0 0 16px 0;
}

/* --- Fiche d'un jeu -------------------------------------------------------
 * L'image était figée à 850x625, et le pied social CHEVAUCHAIT le bouton « Jouer » : les deux
 * étaient posés au même endroit, seul le dernier rendu recevait les clics. */

#container._public ._gameDetails {
    float: none;
    display: grid;
    grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
    gap: 36px;
    width: 100%;
    height: auto;
    padding: 34px 0 0 0;
    align-items: start;
}

#container._public ._gameDetails ._gameVisuel {
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    padding-bottom: 62.5%;
}

#container._public ._gameDetails ._details {
    float: none;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    width: auto;
    height: auto;
    padding: 0;
}

#container._public ._gameDetails ._details ._title {
    position: static;
    width: auto;
    height: auto;
    padding: 0;
    margin: 0 0 14px 0;
    border: none;
    font-size: 30px;
    font-weight: 700;
    line-height: 1.2;
    color: #FFFFFF;
}

#container._public ._gameDetails ._details ._description {
    position: static;
    width: auto;
    height: auto;
    padding: 0;
    margin: 0 0 20px 0;
    font-size: 15px;
    line-height: 1.7;
    color: #C9C9C9;
}

#container._public ._gameDetails ._tags {
    float: none;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    width: auto;
    margin-bottom: 20px;
}

#container._public ._gameDetails ._bottomBar {
    position: static;
    float: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    width: 100%;
    margin: 0 0 20px 0;
    padding: 12px 0;
    border-top: 1px solid rgba(255, 255, 255, 0.09);
    border-bottom: 1px solid rgba(255, 255, 255, 0.09);
    background: transparent;
    color: #9A9A9A;
    font-size: 13px;
}

#container._public ._gameDetails ._bottomBar ._leftInfo,
#container._public ._gameDetails ._bottomBar ._rightInfo {
    float: none;
    width: auto;
    padding: 0;
    background: transparent;
    color: #9A9A9A;
}

/* Le bouton « Jouer » était bleu #2DB3FF, seul reste d'un second accent qui ne sert nulle part
   ailleurs sur la façade. Il rejoint le vert de la charte. */
#container._public ._gameDetails ._medButton,
#container._public ._medButton {
    position: static;
    float: none;
    width: 100%;
    max-width: 260px;
    height: auto;
    margin: 0;
    padding: 14px 24px;
    background: #55FFA4;
    color: #0F0F0F;
    border: none;
    border-radius: 6px;
    font-size: 15px;
    font-weight: 700;
    letter-spacing: 0.04em;
    cursor: pointer;
}

#container._public ._medButton:hover { background: #7BFFBC; }

/* --- Pied de page --------------------------------------------------------- */

._pied {
    flex-shrink: 0;
    width: 100%;
    background: #0F0F0F;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    color: #9A9A9A;
    font-size: 13.5px;
}

._piedCorps {
    max-width: 1240px;
    margin: 0 auto;
    padding: 40px 32px 28px 32px;
    display: flex;
    flex-wrap: wrap;
    gap: 28px;
    justify-content: space-between;
    box-sizing: border-box;
}

._piedLogo {
    display: block;
    color: #55FFA4;
    font-size: 17px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-bottom: 8px;
}

._piedBaseline {
    margin: 0;
    max-width: 380px;
    line-height: 1.6;
}

._piedLiens {
    display: flex;
    flex-wrap: wrap;
    gap: 22px;
    align-items: flex-start;
}

._piedLiens a { color: #C9C9C9; text-decoration: none; }
._piedLiens a:hover { color: #55FFA4; }

._piedBas {
    max-width: 1240px;
    margin: 0 auto;
    padding: 16px 32px 26px 32px;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
    font-size: 12.5px;
    color: #7E7E7E;
    box-sizing: border-box;
}

/* --- Écrans étroits -------------------------------------------------------
 * `public.css` n'avait AUCUN point de rupture, et la coquille impose `#Header{min-width:625px}`.
 * Avec la balise viewport enfin posée, ces règles deviennent utiles. */

@media (max-width: 900px) {
    #container._public ._gameDetails {
        grid-template-columns: minmax(0, 1fr);
        gap: 24px;
    }
    #container._public ._medButton { max-width: none; }
}

@media (max-width: 700px) {
    #container._public ._mainBody { padding: 0 18px 56px 18px; }
    #container._public ._vitrine { padding: 44px 0 36px 0; }
    #container._public ._section { padding: 38px 0; }
    #container._public ._vitrineActions { flex-direction: column; align-items: stretch; }
    #container._public ._vitrineCta { text-align: center; }

    /* Sous cette largeur, une piste bornée à 260px déborderait : la carte prend la largeur
       disponible, ce qui est le bon comportement sur téléphone. */
    #container._public ._grilleJeux {
        grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr));
        gap: 18px;
    }

    #container._public #Header {
        min-width: 0;
        height: auto;
        padding-bottom: 8px;
    }
    #container._public #Navigation { width: 100%; }
    #container._public #widgetUser { position: static; height: auto; padding: 6px 0; }

    ._piedCorps { padding: 30px 18px 22px 18px; }
    ._piedBas { padding: 14px 18px 22px 18px; }
}

/* --- Correctifs constatés au rendu --------------------------------------- */

/* La vignette générée porte AUSSI la classe `._gameIcon`, dont la règle impose `display:block` à
   spécificité (1,2,1). Le `display:flex` de `._jaquetteGeneree` (1,1,1) perdait donc, et les
   initiales restaient collées en haut à gauche au lieu d'être centrées. */
#container._public ._jaquetteGeneree._gameIcon {
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Le pseudo de l'auteur est un `<a>` : sa couleur vient de Bootstrap (bleu de lien), pas de
   `._leftInfo`. C'est pour ça qu'il restait bleu sous chaque carte malgré la couleur posée sur le
   conteneur. */
#container._public ._bottomBar ._leftInfo a {
    color: #9A9A9A;
    text-decoration: none;
}

#container._public ._bottomBar ._leftInfo a:hover {
    color: #55FFA4;
    text-decoration: none;
}

/* `._bottomBar ._rightInfo` est en `position:absolute; right:10px; bottom:20px` (formFragment:877).
   C'est ce qui faisait CHEVAUCHER les compteurs et le bouton « Jouer » sur la fiche d'un jeu : les
   deux occupaient le même endroit, et seul le dernier rendu recevait les clics. */
#container._public ._bottomBar ._rightInfo {
    position: static;
    max-width: none;
    height: auto;
    right: auto;
    bottom: auto;
}

#container._public ._bottomBar ._leftInfo {
    width: auto;
    height: auto;
    bottom: auto;
    align-items: center;
}

/* ===========================================================================
 * LA LISTE DENSE, LES OUTILS — 2026-09-09
 *
 * Le pendant de la galerie. La galerie sert à DÉCOUVRIR, cette liste à GÉRER : sur 21 jeux réels,
 * 19 sans jaquette et cinq portant un nom en double, la grande carte n'informait plus de rien.
 * ======================================================================== */

/* --- Barre de titre d'écran ---------------------------------------------- */

#container._public ._barreEcran {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 16px;
    padding: 34px 0 18px 0;
}

#container._public ._titreEcran {
    margin: 0;
    font-size: 26px;
    font-weight: 700;
    color: #FFFFFF;
}

#container._public ._barreEcran ._title2 {
    color: #9A9A9A;
    cursor: pointer;
    font-size: 14px;
}

#container._public ._barreEcran ._title2:hover { color: #55FFA4; }

/* --- Onglets de filtre + recherche --------------------------------------- */

#container._public ._barreOutils {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 14px;
    padding-bottom: 20px;
}

#container._public ._barreCatalogue { padding: 26px 0 4px 0; }

#container._public ._onglets {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}

#container._public ._ongletFiltre {
    padding: 8px 14px;
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 999px;
    color: #C9C9C9;
    font-size: 13px;
    cursor: pointer;
}

#container._public ._ongletFiltre:hover { border-color: rgba(85, 255, 164, 0.5); color: #FFFFFF; }

#container._public ._ongletFiltre._actif {
    background: rgba(85, 255, 164, 0.12);
    border-color: #55FFA4;
    color: #55FFA4;
    font-weight: 600;
}

#container._public ._compteOnglet {
    margin-left: 4px;
    opacity: 0.65;
    font-variant-numeric: tabular-nums;
}

#container._public ._champRecherche {
    flex: 1 1 260px;
    max-width: 380px;
    padding: 10px 14px;
    background: #1B1B1B;
    border: 1px solid rgba(255, 255, 255, 0.16);
    border-radius: 6px;
    color: #FFFFFF;
    font-size: 14px;
    box-sizing: border-box;
}

#container._public ._champRecherche::placeholder { color: #7E7E7E; }
#container._public ._champRecherche:focus { outline: none; border-color: #55FFA4; }

/* --- La liste ------------------------------------------------------------ */

#container._public ._listeJeux {
    list-style: none;
    margin: 0 0 40px 0;
    padding: 0;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 10px;
    overflow: hidden;
}

#container._public ._ligneJeu {
    display: grid;
    /* vignette · identifiant · nom (élastique) · statut · actions */
    grid-template-columns: 64px 62px minmax(0, 1fr) 92px auto;
    align-items: center;
    gap: 16px;
    padding: 12px 16px;
    background: #0F0F0F;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
}

#container._public ._listeJeux ._ligneJeu:first-child { border-top: none; }
#container._public ._ligneJeu:hover { background: #161616; }

/* La vignette aide à RECONNAÎTRE un jeu qu'on connaît déjà ; elle n'a plus à le vendre. */
#container._public ._ligneVisuel {
    position: relative;
    display: block;
    width: 64px;
    height: 40px;
    border-radius: 4px;
    overflow: hidden;
    background: #141414;
}

#container._public ._ligneVisuel > * {
    position: absolute;
    top: 0; left: 0;
    width: 100%;
    height: 100%;
}

/* À cette taille, deux initiales de 46px ne tiennent pas. */
#container._public ._ligneVisuel ._jaquetteInitiales { font-size: 15px; }
#container._public ._ligneVisuel ._jaquetteGrille { background-size: 12px 12px; }

/* C'est CETTE colonne qui sépare les trois jeux nommés « nav_test ». */
#container._public ._ligneId {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 12.5px;
    color: #8A8A8A;
    letter-spacing: 0.02em;
}

#container._public ._ligneNom { min-width: 0; }

#container._public ._ligneTitre {
    display: block;
    font-size: 15px;
    font-weight: 600;
    color: #FFFFFF;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

#container._public ._ligneDesc {
    display: block;
    font-size: 12.5px;
    color: #8A8A8A;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

#container._public ._ligneStatut {
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #9A9A9A;
}

#container._public ._ligneStatut._publie { color: #55FFA4; }
#container._public ._ligneStatut._brouillon { color: #FFC46B; }

#container._public ._ligneActions {
    display: flex;
    gap: 8px;
    justify-content: flex-end;
}

#container._public ._actionJeu {
    padding: 7px 14px;
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 5px;
    color: #E8E8E8;
    font-size: 13px;
    cursor: pointer;
    white-space: nowrap;
}

#container._public ._actionJeu:hover { border-color: #55FFA4; color: #55FFA4; }

#container._public ._actionJeu._principale {
    background: #55FFA4;
    border-color: #55FFA4;
    color: #0F0F0F;
    font-weight: 600;
}

#container._public ._actionJeu._principale:hover { background: #7BFFBC; color: #0F0F0F; }

/* --- Écrans étroits ------------------------------------------------------
 * La liste garde sa raison d'être sur téléphone, mais pas sur cinq colonnes : le nom passe sur sa
 * propre ligne et les actions sous lui. L'identifiant reste, c'est lui qui distingue. */

@media (max-width: 760px) {
    #container._public ._ligneJeu {
        grid-template-columns: 56px minmax(0, 1fr);
        grid-template-areas:
            "visuel nom"
            "visuel meta"
            "actions actions";
        gap: 4px 14px;
        padding: 14px 14px;
    }
    #container._public ._ligneVisuel { grid-area: visuel; width: 56px; height: 35px; align-self: start; }
    #container._public ._ligneNom    { grid-area: nom; }
    #container._public ._ligneId     { grid-area: meta; }
    #container._public ._ligneStatut { grid-area: meta; justify-self: end; }
    #container._public ._ligneActions{ grid-area: actions; justify-content: flex-start; margin-top: 10px; }

    #container._public ._barreOutils { flex-direction: column; align-items: stretch; }
    #container._public ._champRecherche { max-width: none; }
}

/* --- Le pied de carte se superposait à lui-même -------------------------------
 *
 * `._bottomBar ._leftInfo` est en `position: absolute` (formFragment:889-904), tout comme
 * `._header ._rightInfo` (:906). Les deux moitiés du pied d'une carte se posaient donc AU MÊME
 * PIXEL : l'auteur sous les compteurs.
 *
 * 🔴 Personne ne l'avait jamais vu, et pour une raison précise : `likes` et `players` étaient vides
 * par construction — rien côté serveur ne les écrivait — donc SocialBar ne rendait jamais qu'une
 * moitié. Le défaut n'est apparu qu'au moment où les compteurs se sont mis à exister.
 */

#container._public ._bottomBar ._leftInfo,
#container._public ._gameDisplayList ._header ._rightInfo {
    position: static;
    right: auto;
    bottom: auto;
    padding-left: 0;
}

#container._public ._bottomBar ._rightInfo {
    display: flex;
    align-items: center;
    gap: 4px;
}

/* Les icônes de compteur sont dessinées en 22x20 : les laisser à leur taille naturelle les rend
   plus hautes que le texte qu'elles accompagnent. */
#container._public ._bottomBar ._rightInfo img {
    height: 14px;
    width: auto;
    vertical-align: middle;
    opacity: 0.75;
    cursor: pointer;
}

#container._public ._bottomBar ._rightInfo img:hover { opacity: 1; }

/* --- Marqueur « pas encore ouvert » --------------------------------------
 * Il n'existe ni prix, ni panier, ni porte-monnaie dans le projet, et
 * /version/snapshotedgames rend une liste vide. Une porte « acheter » doit donc
 * annoncer son état : mieux vaut un mot que la déception d'un écran vide. */

#container._public ._aVenir {
    display: inline-block;
    margin-left: 8px;
    padding: 3px 9px;
    border-radius: 999px;
    background: rgba(255, 196, 107, 0.14);
    border: 1px solid rgba(255, 196, 107, 0.45);
    color: #FFC46B;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    vertical-align: middle;
}

/* --- Archives : présentes, jamais mises en avant -------------------------
 * Denis : « une section archive, qui n'est pas à mettre en avant dans l'UI ».
 * L'onglet n'existe que s'il a quelque chose à montrer (cf Create.js) et reste en
 * retrait ; le bouton qui range ne prend ni le rouge ni le poids d'une action
 * destructrice, parce qu'il ne détruit rien. */

#container._public ._ongletFiltre._discret {
    border-style: dashed;
    border-color: rgba(255, 255, 255, 0.10);
    color: #8A8A8A;
}

#container._public ._ongletFiltre._discret:hover { color: #C9C9C9; }

#container._public ._ongletFiltre._discret._actif {
    border-style: solid;
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(255, 255, 255, 0.25);
    color: #E8E8E8;
}

#container._public ._actionJeu._discrete {
    border-color: rgba(255, 255, 255, 0.10);
    color: #8A8A8A;
}

#container._public ._actionJeu._discrete:hover {
    border-color: rgba(255, 255, 255, 0.30);
    color: #E8E8E8;
}

#container._public ._noteArchives {
    margin: 0 0 18px 0;
    padding: 12px 14px;
    background: rgba(255, 255, 255, 0.03);
    border-left: 2px solid rgba(255, 255, 255, 0.18);
    border-radius: 4px;
    font-size: 13.5px;
    line-height: 1.6;
    color: #9A9A9A;
}

/* ===========================================================================
 * LE BLOC UTILISATEUR DU BANDEAU — 2026-09-10
 *
 * Denis : « la zone pour le user connecté est encore étrange, quand on survole ça fait une
 * sensation laide, avec l'avatar et la zone ».
 *
 * 🔴 CE QUI LA PROVOQUAIT, MESURÉ : `._infoLogin` faisait **74 px de haut dans un bandeau de
 * 58 px**, et `#widgetUser` les centrait verticalement — le bloc débordait donc déjà de 8 px en
 * haut ET en bas, au repos. Au survol, `._core` passait à `display:block` **DANS LE FLUX** : le
 * bloc grandissait d'un coup, et le centrage faisait **remonter l'avatar** sous le curseur. D'où
 * la sensation de glissement.
 *
 * Le menu sort donc du flux. Un menu déroulant ne doit jamais pousser ce qui l'ouvre.
 * ======================================================================== */

/* Chaque règle vaut aussi pour `.tx-compte` : le widget de l'atelier des tuiles est le même. */

#container._public #widgetUser,
.tx-compte #widgetUser {
    /* Rien ne doit être rogné : le menu déborde volontairement du bandeau. */
    overflow: visible;
}

#container._public ._infoLogin,
.tx-compte ._infoLogin {
    /* Le repère du menu. Sans lui, `._core` se positionnerait par rapport au bandeau entier. */
    position: relative;
    display: block;
}

/* --- La pastille : avatar + pseudo + chevron ----------------------------- */

#container._public ._infoLogin ._avatar,
.tx-compte ._infoLogin ._avatar {
    display: flex;
    align-items: center;
    gap: 9px;
    height: 40px;
    max-width: 190px;
    padding: 0 10px 0 5px;
    background: transparent;
    border: 1px solid transparent;
    border-radius: 999px;
    color: #E8E8E8;
    font-size: 13.5px;
    cursor: pointer;
}

#container._public ._infoLogin ._avatar:hover,
#container._public #widgetUser:hover ._avatar,
#container._public ._infoLogin ._avatar:focus-visible,
.tx-compte ._infoLogin ._avatar:hover,
.tx-compte #widgetUser:hover ._avatar,
.tx-compte ._infoLogin ._avatar:focus-visible {
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(255, 255, 255, 0.14);
    outline: none;
}

#container._public ._avatarNom,
.tx-compte ._avatarNom {
    /* Un pseudo long ne doit pas pousser le bandeau : il se coupe. */
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

#container._public ._avatarChevron,
.tx-compte ._avatarChevron {
    color: #8A8A8A;
    font-size: 10px;
    transition: transform 0.15s ease;
}

#container._public #widgetUser:hover ._avatarChevron,
.tx-compte #widgetUser:hover ._avatarChevron { transform: rotate(180deg); }

/* --- L'avatar lui-même : des initiales, jamais une image absente --------- */

#container._public ._photoProfil,
#container._public ._infoLogin ._imgavatar,
.tx-compte ._photoProfil,
.tx-compte ._infoLogin ._imgavatar {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: none;
    float: none;
    width: 30px;
    height: 30px;
    margin: 0;
    border-radius: 50%;
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: 0.03em;
    color: rgba(255, 255, 255, 0.92);
    object-fit: cover;
}

/* --- Le menu ------------------------------------------------------------- */

#container._public ._infoLogin ._core,
.tx-compte ._infoLogin ._core {
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    left: auto;
    min-width: 210px;
    padding: 6px 0 10px 0;
    background: #141414;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 8px;
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.55);
    z-index: 200;
}

/* Le menu s'ouvre 6 px sous la pastille. Sans ce pont, traverser l'écart couperait le survol et le
   menu se refermerait sous le curseur — le défaut classique du menu déroulant au survol. */
#container._public ._infoLogin ._core::before,
.tx-compte ._infoLogin ._core::before {
    content: "";
    position: absolute;
    top: -8px;
    left: 0;
    right: 0;
    height: 8px;
}

#container._public ._infoLogin ._core ul,
.tx-compte ._infoLogin ._core ul { margin: 0; }

#container._public ._infoLogin ._core li,
.tx-compte ._infoLogin ._core li {
    padding: 9px 14px;
    font-size: 13.5px;
    color: #C9C9C9;
}

#container._public ._infoLogin ._core li:hover,
.tx-compte ._infoLogin ._core li:hover { background: #1F1F1F; color: #55FFA4; }

#container._public ._infoLogin ._core button,
.tx-compte ._infoLogin ._core button {
    width: calc(100% - 20px);
    margin: 8px 10px 0 10px;
}

#container._public ._guestNote,
.tx-compte ._guestNote { padding: 4px 14px 10px 14px; }

/* Le menu reste ouvert quand on le parcourt au clavier. */
#container._public ._infoLogin:focus-within ._core,
.tx-compte ._infoLogin:focus-within ._core { display: block; }

/* --- Écrans étroits ------------------------------------------------------ */

@media (max-width: 700px) {
    #container._public ._infoLogin ._avatar,
    .tx-compte ._infoLogin ._avatar { max-width: 150px; }
    #container._public ._infoLogin ._core,
    .tx-compte ._infoLogin ._core { right: 0; }
}

/* --- « N en ligne » — la présence, pas l'historique -----------------------
 * `game.players` est cumulatif : il liste qui a joué UN JOUR et ne redescend jamais. Cette pastille
 * lit `enLigne`, alimenté par le battement de présence du daemon — fermer l'onglet l'éteint. */

#container._public ._badgeEnLigne {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: rgba(15, 15, 15, 0.86);
    border: 1px solid rgba(85, 255, 164, 0.55);
    color: #55FFA4;
}

#container._public ._pastilleVive {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #55FFA4;
    box-shadow: 0 0 0 0 rgba(85, 255, 164, 0.65);
    animation: inckorBattement 2s ease-out infinite;
}

@keyframes inckorBattement {
    0%   { box-shadow: 0 0 0 0 rgba(85, 255, 164, 0.55); }
    70%  { box-shadow: 0 0 0 6px rgba(85, 255, 164, 0); }
    100% { box-shadow: 0 0 0 0 rgba(85, 255, 164, 0); }
}

/* ===========================================================================
 * PROFIL & COMPTE — 2026-09-10
 *
 * 🔴 « photo de profil » et jamais « avatar » : dans ce projet un AVATAR est la représentation du
 * joueur en SMART OBJECT dans un jeu (tables `avatar` / `users_avatar`, un pantin de tuiles), et
 * c'est une fonctionnalité à venir du créateur. Deux objets différents ne partagent pas un nom.
 * ======================================================================== */

#container._public ._carteCompte {
    display: block;
    max-width: 640px;
    margin: 0 0 26px 0;
    padding: 24px;
    background: #0F0F0F;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 10px;
}

#container._public ._sousTitre {
    margin: 0 0 18px 0;
    font-size: 17px;
    font-weight: 700;
    color: #FFFFFF;
}

#container._public ._photoLigne {
    display: flex;
    align-items: flex-start;
    gap: 20px;
    flex-wrap: wrap;
}

#container._public ._photoGrande {
    width: 96px;
    height: 96px;
    font-size: 32px;
    flex: none;
}

#container._public ._photoActions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    flex: 1 1 240px;
}

#container._public ._aide {
    flex: 1 1 100%;
    margin: 0;
    font-size: 12.5px;
    line-height: 1.6;
    color: #7E7E7E;
}

/* Une zone de texte hérite du champ, mais doit pouvoir grandir en hauteur seulement : un
   redimensionnement libre casse la carte. */
#container._public ._authZone {
    resize: vertical;
    min-height: 90px;
    font-family: inherit;
    line-height: 1.6;
}

#container._public ._carteCompte ._authSubmit { align-self: flex-start; }

/* --- Page publique -------------------------------------------------------- */

#container._public ._enTeteProfil {
    display: flex;
    align-items: flex-start;
    gap: 24px;
    flex-wrap: wrap;
    padding: 40px 0 26px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.09);
}

#container._public ._identiteProfil {
    flex: 1 1 280px;
    min-width: 0;
}

#container._public ._identiteProfil ._titreEcran { margin: 0 0 4px 0; }

#container._public ._pseudoProfil {
    margin: 0 0 12px 0;
    font-size: 14px;
    color: #8A8A8A;
}

#container._public ._bioProfil {
    margin: 0 0 12px 0;
    max-width: 620px;
    font-size: 15px;
    line-height: 1.7;
    color: #C9C9C9;
    /* La présentation est du texte libre : un mot de 300 caractères ne doit pas élargir la page. */
    overflow-wrap: anywhere;
}

@media (max-width: 700px) {
    #container._public ._carteCompte { padding: 18px; }
    #container._public ._photoGrande { width: 72px; height: 72px; font-size: 24px; }
}

/* ===========================================================================
 * LE CATALOGUE — parcourir, ranger, filtrer  *(2026-09-10)*
 *
 * Ce qui existait avant : une page d'accueil qui recevait TOUS les jeux publiés et se débrouillait
 * dans le navigateur. Il n'y avait ni page catalogue, ni rubriques, ni filtres — donc rien à
 * habiller. Tout ce bloc est neuf, et scopé sous `#container._public` comme le reste : la coquille
 * et le créateur partagent les mêmes classes, un sélecteur nu repeindrait l'éditeur.
 * ------------------------------------------------------------------------- */

/* --- Les rubriques : la porte d'entrée du rangement par thème -------------- */

#container._public ._rubriques {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0 0 26px 0;
}

#container._public ._rubrique {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 14px;
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 999px;
    color: #C9C9C9;
    font-size: 13px;
    text-decoration: none;
    cursor: pointer;
    white-space: nowrap;
}

#container._public ._rubrique:hover {
    border-color: rgba(85, 255, 164, 0.5);
    color: #FFFFFF;
    text-decoration: none;
}

#container._public ._rubrique._rubriqueActive {
    background: rgba(85, 255, 164, 0.12);
    border-color: #55FFA4;
    color: #55FFA4;
    font-weight: 600;
}

#container._public ._rubriqueTout { border-color: rgba(255, 255, 255, 0.3); }
#container._public ._rubriquePlus { color: #8A8A8A; border-style: dashed; }

/* Le NOMBRE de jeux d'une rubrique. C'est lui qui distingue une catégorie d'une étiquette isolée. */
#container._public ._rubriqueNb {
    opacity: 0.6;
    font-size: 12px;
    font-variant-numeric: tabular-nums;
}

/* --- Ce qui est filtré, dit en toutes lettres ----------------------------- */

#container._public ._filtresActifs {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin: 0 0 18px 0;
}

#container._public ._puceFiltre {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 12px;
    background: rgba(85, 255, 164, 0.1);
    border: 1px solid rgba(85, 255, 164, 0.45);
    border-radius: 999px;
    color: #55FFA4;
    font-size: 12.5px;
    cursor: pointer;
}

#container._public ._puceFiltre:hover { background: rgba(85, 255, 164, 0.18); }
#container._public ._puceRetirer { font-size: 15px; line-height: 1; opacity: 0.8; }

#container._public ._toutEffacer {
    background: transparent;
    border: none;
    padding: 6px 4px;
    font-size: 12.5px;
    cursor: pointer;
}

/* --- Le reste de la barre d'outils ---------------------------------------- */

#container._public ._selectDoux {
    padding: 10px 12px;
    background: #1B1B1B;
    border: 1px solid rgba(255, 255, 255, 0.16);
    border-radius: 6px;
    color: #FFFFFF;
    font-size: 13.5px;
    cursor: pointer;
}

#container._public ._selectDoux:focus { outline: none; border-color: #55FFA4; }

#container._public ._caseDouce {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: #C9C9C9;
    font-size: 13.5px;
    cursor: pointer;
    white-space: nowrap;
}

#container._public ._boutonDoux {
    padding: 10px 18px;
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 6px;
    color: #C9C9C9;
    font-size: 13.5px;
    cursor: pointer;
}

#container._public ._boutonDoux:hover { border-color: #55FFA4; color: #55FFA4; }

#container._public ._compteResultats {
    margin: 0 0 16px 0;
    color: #8A8A8A;
    font-size: 13px;
    font-variant-numeric: tabular-nums;
}

/* Le catalogue ne se charge pas d'un coup, et le dire est plus honnête qu'un défilement infini
   qui ne finit jamais : on annonce combien il reste. */
#container._public ._chargerPlus {
    display: flex;
    justify-content: center;
    margin: 34px 0 48px 0;
}

#container._public ._chargerPlus button[disabled] { opacity: 0.5; cursor: default; }

#container._public ._versCatalogue { margin: 8px 0 40px 0; }

/* --- Les thèmes, partout où ils s'affichent -------------------------------- */

#container._public ._tag {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 11px;
    background: #232323;
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 999px;
    color: #C9C9C9;
    font-size: 12.5px;
    margin-left: 0;
}

#container._public ._tagCliquable { cursor: pointer; }
#container._public ._tagCliquable:hover { border-color: #55FFA4; color: #55FFA4; }

/* --- L'éditeur de rangement ------------------------------------------------
 *
 * Les thèmes ne se posaient QU'À LA CRÉATION du jeu : aucun écran n'en changeait ensuite, alors
 * que l'accueil range par thème. Un créateur ne pouvait donc plus corriger le rangement de son jeu.
 * ------------------------------------------------------------------------- */

#container._public ._editeurThemes { color: #C9C9C9; }

#container._public ._editeurAide {
    margin: 0 0 18px 0;
    font-size: 13.5px;
    line-height: 1.6;
    color: #9A9A9A;
}

#container._public ._themesChoisis,
#container._public ._themesProposes {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 14px;
    min-height: 30px;
}

#container._public ._themesProposes { margin-top: 14px; }

#container._public ._tagChoisi {
    background: rgba(85, 255, 164, 0.12);
    border-color: #55FFA4;
    color: #55FFA4;
    cursor: pointer;
}

#container._public ._tagPropose { cursor: pointer; }
#container._public ._tagPropose:hover { border-color: rgba(85, 255, 164, 0.5); color: #FFFFFF; }

#container._public ._tagNouveau {
    border-style: dashed;
    border-color: rgba(85, 255, 164, 0.5);
    color: #55FFA4;
    cursor: pointer;
}

#container._public ._editeurVide {
    font-size: 13px;
    color: #7E7E7E;
    font-style: italic;
}

#container._public ._editeurActions {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    margin-top: 22px;
}

/* --- Le rangement sur une ligne de « Mes créations » ---------------------- */

#container._public ._ligneRangement {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    margin-top: 6px;
}

#container._public ._tagMini {
    padding: 2px 8px;
    font-size: 11.5px;
    background: #1E1E1E;
}

/* Un jeu sans thème n'est rangé nulle part : on le dit, et on rend le mot cliquable. */
#container._public ._nonRange {
    font-size: 11.5px;
    color: #7E7E7E;
    font-style: italic;
    cursor: pointer;
}

#container._public ._nonRange:hover { color: #C9C9C9; }

/* La mise en vitrine : publié ne veut pas dire visible, et rien ne le disait nulle part. */
#container._public ._pastilleVitrine {
    padding: 2px 9px;
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.16);
    border-radius: 999px;
    color: #8A8A8A;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    cursor: pointer;
}

#container._public ._pastilleVitrine:hover { border-color: rgba(85, 255, 164, 0.5); color: #C9C9C9; }

#container._public ._pastilleVitrine._dedans {
    border-color: rgba(85, 255, 164, 0.5);
    color: #55FFA4;
}

/* --- Écrans étroits ------------------------------------------------------- */

@media (max-width: 700px) {
    #container._public ._barreCatalogue { flex-direction: column; align-items: stretch; }
    #container._public ._selectDoux { width: 100%; }
    #container._public ._rubriques { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 6px; }
}

/* --- L'éditeur DANS la fenêtre modale -------------------------------------
 *
 * `modal.css` habille tout `<p>` d'un panneau clair (`background:#eee; color:#333`) et met son
 * contenu en `display:flex`. Deux règles écrites pour les popups du créateur, qui repeignaient ici
 * le texte d'aide en bandeau blanc et laissaient le champ à sa largeur naturelle. On corrige au
 * niveau de l'éditeur, pas dans `modal.css` : les popups du créateur comptent sur ces règles.
 * ------------------------------------------------------------------------- */

#container._public .inckormodal-content ._editeurThemes {
    flex: 1 1 auto;
    min-width: 0;
}

#container._public .inckormodal-content ._editeurAide {
    background: transparent;
    color: #9A9A9A;
    padding: 0;
    margin: 0 0 18px 0;
    font-size: 13.5px;
}

#container._public ._editeurThemes ._champRecherche {
    width: 100%;
    max-width: none;
}

/* Le titre d'écran passait à DROITE quand un lien « ← Retour » le précédait : `_barreEcran` est en
   `space-between`, et avec deux enfants le second est repoussé au bout. Il se range à gauche, juste
   après le retour, et ce qui suit garde le côté droit. */
#container._public ._barreEcran ._title2 + ._titreEcran { margin-right: auto; }

/* --- Le vocabulaire des thèmes -------------------------------------------
 *
 * Le vocabulaire est FERMÉ depuis le 2026-09-10 : un créateur choisit dans une liste, seuls les
 * administrateurs l'étendent. L'éditeur présente donc des boutons à cocher, plus un champ libre.
 * ------------------------------------------------------------------------- */

#container._public ._groupeThemes { margin-bottom: 16px; }

#container._public ._groupeTitre {
    display: block;
    margin-bottom: 8px;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #7E7E7E;
}

/* Plein, on ne peut plus en prendre : le dire par l'état du bouton plutôt que par un refus au clic. */
#container._public ._tagPropose[disabled] { opacity: 0.35; cursor: default; }
#container._public ._tagPropose[disabled]:hover { border-color: rgba(255, 255, 255, 0.14); color: #C9C9C9; }

/* --- L'écran d'administration --------------------------------------------- */

#container._public ._aideAdmin { max-width: 720px; margin-bottom: 22px; }

#container._public ._ajoutTheme { align-items: center; }

#container._public ._listeThemes {
    list-style: none;
    margin: 0 0 30px 0;
    padding: 0;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 10px;
    overflow: hidden;
}

#container._public ._ligneTheme {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 14px;
    padding: 10px 16px;
    background: #0F0F0F;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
}

#container._public ._listeThemes ._ligneTheme:first-child { border-top: none; }
#container._public ._ligneTheme:hover { background: #161616; }

/* Un thème désactivé reste VISIBLE : il n'est pas supprimé, et des jeux le portent peut-être. */
#container._public ._ligneTheme._inactif { opacity: 0.45; }

#container._public ._ligneTheme ._ligneDesc { flex: 1 1 auto; }
#container._public ._ligneTheme ._ligneActions { flex: 0 0 auto; }

#container._public ._renommage {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 1 1 320px;
}

#container._public ._renommage ._champRecherche { flex: 1 1 200px; max-width: 260px; }

/* `_barreOutils` répartit ses enfants aux deux bouts, ce qui est juste pour « onglets à gauche,
   recherche à droite ». Le formulaire d'ajout, lui, est une suite de trois champs : ils se suivent. */
#container._public ._ajoutTheme { justify-content: flex-start; }
#container._public ._ajoutTheme ._champRecherche { flex: 0 1 260px; }