/**
 * TeamKit — Fiches en onglets (24 oct. 2026, maquette « Mods en onglets » validée par Kevin)
 * v2.0.0 — Mods v2 (25 oct. 2026) : liste publique en une colonne (images carrées, numéro d'ordre), import d'une
 * collection Steam et classement ↑ ↓ dans la fenêtre « Modifier le serveur ».
 * Page publique d'un serveur (onglets Présentation · Règles · Mods · Infos, cartes des mods), fenêtre « Modifier le
 * serveur » (js/fiche-serveur.js) et fenêtre « Modifier ma communauté » (player/js/commu-onglets.js).
 * Couleurs = celles du site : cyan --accent-primary (Serveur, onglet actif), orange --accent-warning (Client),
 * violet --accent-secondary (mode). Règle d'or au téléphone : rien ne déborde, aucune barre de défilement DANS une case ;
 * seule la page, ou la fenêtre plein écran, défile.
 */

/* ═══════════════════════════ Couleurs des types ═══════════════════════════ */
.fo-txt-client { color: var(--accent-warning, #ffaa00); }
.fo-txt-serveur { color: var(--accent-primary, #00f0ff); }
.fo-badge { display: inline-flex; align-items: center; padding: 1px 10px; border-radius: 999px; font-size: .8rem; font-weight: 700; line-height: 1.5; white-space: nowrap; }
.fo-badge-client { background: rgba(255, 170, 0, .14); color: var(--accent-warning, #ffaa00); border: 1px solid rgba(255, 170, 0, .45); }
.fo-badge-serveur { background: rgba(0, 240, 255, .1); color: var(--accent-primary, #00f0ff); border: 1px solid rgba(0, 240, 255, .4); }
.fo-pastille { display: inline-flex; align-items: center; justify-content: center; min-width: 1.5em; padding: 0 .45em; border-radius: 999px; font-size: .8rem; font-weight: 700; background: var(--bg-tertiary, #1a1a25); color: var(--text-secondary, #b8b8c8); }

/* ═══════════════════════════ Haut de la page serveur ═══════════════════════════ */
.fo-badge-haut { display: inline-flex; align-items: center; gap: .3rem; padding: var(--space-xs, .25rem) var(--space-sm, .5rem); border-radius: var(--radius-sm, 4px); font-size: .75rem; font-weight: 600; border: 1px solid var(--border-color, #2a2a3a); background: var(--bg-tertiary, #1a1a25); color: var(--text-secondary, #b8b8c8); text-decoration: none; max-width: 100%; overflow-wrap: anywhere; }
a.fo-badge-haut:hover { border-color: var(--accent-primary, #00f0ff); color: var(--text-primary, #fff); }
.server-detail-badges .server-mode { max-width: 100%; overflow-wrap: anywhere; }

/* ═══════════════════════════ Onglets de la page publique ═══════════════════════════ */
.fo-page { min-width: 0; scroll-margin-top: 90px; }
.fo-page-onglets { display: flex; gap: 4px; border-bottom: 1px solid var(--border-color, #2a2a3a); margin-bottom: var(--space-lg, 1.5rem); }
.fo-page-onglets [role="tab"] { background: none; border: 0; border-bottom: 3px solid transparent; margin-bottom: -1px; cursor: pointer; font: inherit; font-weight: 700; font-size: 1.05rem; padding: .75rem 1.1rem; min-height: 48px; display: inline-flex; gap: .5rem; align-items: center; justify-content: center; color: var(--text-muted, #8a8a9a); }
.fo-page-onglets [role="tab"]:hover { color: var(--text-primary, #fff); }
.fo-page-onglets [role="tab"][aria-selected="true"] { color: var(--accent-primary, #00f0ff); border-bottom-color: var(--accent-primary, #00f0ff); }
.fo-page-onglets [role="tab"][aria-selected="true"] .fo-pastille { background: var(--accent-primary, #00f0ff); color: #0a0a0f; }
.fo-page-onglets [role="tab"]:focus-visible { outline: 2px solid var(--accent-primary, #00f0ff); outline-offset: -2px; }
.fo-page-panneau { min-width: 0; }
.fo-page-panneau > h3:first-child { margin-top: 0; }
.fo-page-panneau .md-rendered { overflow-wrap: anywhere; }
.fo-page-panneau .md-rendered img { max-width: 100%; height: auto; }
.fo-vide-page { color: var(--text-muted, #8a8a9a); }
.fo-infos { display: grid; grid-template-columns: 160px minmax(0, 1fr); gap: .6rem 1.25rem; margin: 0 0 var(--space-lg, 1.5rem); }
.fo-infos dt { color: var(--text-muted, #8a8a9a); }
.fo-infos dd { margin: 0; overflow-wrap: anywhere; }

/* Onglet Mods de la page */
.fo-avant { display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap; background: var(--bg-card, #15151f); border: 1px solid var(--border-color, #2a2a3a); border-radius: var(--radius-lg, 12px); padding: 1rem 1.25rem; margin-bottom: 1rem; }
.fo-avant-txt { display: flex; flex-direction: column; gap: .25rem; min-width: 0; flex: 1 1 320px; }
.fo-avant-txt strong { font-size: 1.1rem; }
.fo-avant-txt span { color: var(--text-secondary, #b8b8c8); }
.fo-avant-act { display: flex; flex-direction: column; gap: .3rem; align-items: flex-start; min-width: 0; flex: 0 1 auto; }
.fo-avant-act small { color: var(--text-muted, #8a8a9a); font-size: .8rem; }
.fo-btn-steam { display: inline-flex; align-items: center; gap: .6rem; background: #1b2838; border: 1px solid #66c0f4; color: #e5f4ff; text-decoration: none; padding: .75rem 1.1rem; border-radius: 10px; font-weight: 700; min-height: 44px; max-width: 100%; }
.fo-btn-steam:hover { background: #24364b; color: #fff; }
.fo-filtres { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 1rem; align-items: center; }
.fo-filtre { cursor: pointer; font: inherit; font-weight: 700; font-size: .95rem; padding: .4rem .9rem; min-height: 44px; border-radius: 999px; border: 1px solid var(--border-color, #2a2a3a); background: var(--bg-card, #15151f); color: var(--text-secondary, #b8b8c8); }
.fo-filtre[aria-pressed="true"] { border-color: var(--accent-primary, #00f0ff); background: rgba(0, 240, 255, .12); color: var(--accent-primary, #00f0ff); }
.fo-ordre-info { margin-left: auto; font-family: var(--font-mono, monospace); font-size: .78rem; color: var(--text-muted, #8a8a9a); }

/* Mods v2 (25 oct. 2026) : UNE colonne de la largeur de « Avant de rejoindre », image carrée 168 px, numéro d'ordre dessus */
.fo-lecteur { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.fo-modsp { list-style: none; margin: 0; padding: 0; display: grid; gap: .875rem; }
.fo-modp { display: grid; grid-template-columns: 168px minmax(0, 1fr); gap: 1.25rem; align-items: start; background: var(--bg-card, #15151f); border: 1px solid var(--border-color, #2a2a3a); border-radius: var(--radius-lg, 12px); padding: .875rem; min-width: 0; }
.fo-modp[hidden] { display: none; }
/* style.css pose « › » et un retrait sur tout li de .server-detail-main : pas sur ces cartes */
.fo-modsp > li.fo-modp { padding: .875rem; }
.fo-modsp > li.fo-modp::before { content: none; display: none; }
.fo-modp-client { border-left: 3px solid rgba(255, 170, 0, .7); }
.fo-modp-serveur { border-left: 3px solid rgba(0, 240, 255, .55); }
.fo-modp-img { position: relative; width: 168px; aspect-ratio: 1 / 1; border-radius: 12px; overflow: hidden; border: 1px solid var(--border-color, #2a2a3a); display: grid; place-items: center; font-family: var(--font-display, sans-serif); font-weight: 900; font-size: 2.2rem; color: rgba(255, 255, 255, .88); text-shadow: 0 2px 12px rgba(0, 0, 0, .55); }
.fo-modp-img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; }
.fo-modp-rang { position: absolute; z-index: 1; top: 8px; left: 8px; min-width: 34px; height: 34px; padding: 0 8px; border-radius: 10px; display: grid; place-items: center; background: rgba(10, 10, 15, .9); border: 1px solid rgba(0, 240, 255, .45); box-shadow: 0 2px 8px rgba(0, 0, 0, .45); font-family: var(--font-mono, monospace); font-weight: 700; font-size: .95rem; color: var(--accent-primary, #00f0ff); text-shadow: none; }
.fo-modp-txt { display: grid; gap: .5rem; min-width: 0; align-content: start; padding-top: 2px; }
.fo-modp-tete { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .625rem; min-width: 0; }
.fo-modp-tete strong { font-size: 1.3rem; line-height: 1.2; color: var(--text-primary, #fff); overflow-wrap: anywhere; min-width: 0; }
.fo-modp-corps { display: grid; gap: .5rem; min-width: 0; }
.fo-modp-corps p { margin: 0; color: var(--text-secondary, #b8b8c8); font-size: 1.02rem; line-height: 1.5; overflow-wrap: anywhere; }
.fo-modp-lien { display: inline-flex; align-items: center; gap: .35rem; justify-self: start; min-height: 40px; font-weight: 700; color: var(--accent-primary, #00f0ff); text-decoration: underline; text-underline-offset: 3px; }
.fo-modp-meta { font-family: var(--font-mono, monospace); font-size: .75rem; color: var(--text-muted, #8a8a9a); }

/* Dégradés des mods sans image (teinte tirée du nom, fiche-serveur.js teinte()) */
.fo-g0 { background: linear-gradient(135deg, #0b3d91, #00b4d8); }
.fo-g1 { background: linear-gradient(135deg, #3a0ca3, #7209b7 55%, #f72585); }
.fo-g2 { background: linear-gradient(135deg, #7f1d1d, #ef4444 60%, #fca5a5); }
.fo-g3 { background: linear-gradient(160deg, #052e16, #15803d 50%, #86efac); }
.fo-g4 { background: radial-gradient(circle at 30% 30%, #67e8f9, #0e7490 45%, #082f49); }
.fo-g5 { background: linear-gradient(135deg, #78350f, #f59e0b 60%, #fde68a); }
.fo-g6 { background: linear-gradient(135deg, #1f2937, #4b5563 50%, #9ca3af); }
.fo-g7 { background: linear-gradient(135deg, #312e81, #6366f1 55%, #a5b4fc); }
.fo-g8 { background: radial-gradient(circle at 70% 25%, #fda4af, #be123c 50%, #4c0519); }
.fo-g9 { background: linear-gradient(200deg, #134e4a, #14b8a6 55%, #ccfbf1); }
.fo-g10 { background: conic-gradient(from 90deg, #7b2cbf, #00f0ff, #7b2cbf); }
.fo-note { color: var(--text-muted, #8a8a9a); font-size: .85rem; margin: 1rem 0 0; }
.fo-bref { display: flex; flex-direction: column; gap: .4rem; }
.fo-bref h4 { margin-bottom: .2rem; }
.fo-bref .btn { margin-top: .4rem; align-self: flex-start; }
.server-detail-sidebar .srv-avis-liste { overflow-wrap: anywhere; }

/* ═══════════════════════════ Fenêtre « Modifier » (serveur) ═══════════════════════════ */
html.fo-ouverte, html.fo-ouverte body { overflow: hidden; }
.fo-fenetre { position: fixed; inset: 0; z-index: 3000; background: rgba(5, 7, 12, .88); display: flex; align-items: stretch; justify-content: center; padding: 24px 32px; }
.fo-fenetre[hidden] { display: none; }
.fo-boite:focus { outline: none; }
.fo-boite { flex: 1 1 auto; max-width: 1600px; min-width: 0; background: var(--bg-secondary, #12121a); border: 1px solid var(--border-color, #2a2a3a); border-radius: 18px; display: flex; flex-direction: column; overflow: hidden; color: var(--text-primary, #fff); }
.fo-tete { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1rem 1.75rem; border-bottom: 1px solid var(--border-color, #2a2a3a); }
.fo-tete-txt { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.fo-sur { font-size: .8rem; color: var(--text-muted, #8a8a9a); letter-spacing: .08em; text-transform: uppercase; }
.fo-tete h2 { margin: 0; font-family: var(--font-display, sans-serif); font-size: 1.35rem; overflow-wrap: anywhere; }
.fo-fermer { flex: 0 0 44px; width: 44px; height: 44px; border-radius: 10px; border: 1px solid var(--border-color, #2a2a3a); background: var(--bg-tertiary, #1a1a25); color: var(--text-secondary, #b8b8c8); font-size: 1.4rem; line-height: 1; cursor: pointer; }
.fo-fermer:hover { color: var(--text-primary, #fff); border-color: var(--accent-primary, #00f0ff); }
.fo-onglets { display: flex; gap: 4px; padding: 0 1.25rem; border-bottom: 1px solid var(--border-color, #2a2a3a); background: var(--bg-primary, #0a0a0f); }
.fo-onglets [role="tab"] { background: none; border: 0; border-bottom: 3px solid transparent; margin-bottom: -1px; cursor: pointer; font: inherit; font-weight: 700; font-size: 1.05rem; padding: .85rem 1.1rem; min-height: 48px; display: inline-flex; gap: .6rem; align-items: center; color: var(--text-muted, #8a8a9a); }
.fo-onglets [role="tab"]:hover { color: var(--text-primary, #fff); }
.fo-onglets [role="tab"][aria-selected="true"] { color: var(--text-primary, #fff); border-bottom-color: var(--accent-primary, #00f0ff); }
.fo-onglets [role="tab"]:focus-visible { outline: 2px solid var(--accent-primary, #00f0ff); outline-offset: -2px; }
.fo-num { flex: 0 0 26px; width: 26px; height: 26px; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center; font-size: .8rem; background: var(--bg-tertiary, #1a1a25); color: var(--text-secondary, #b8b8c8); }
[aria-selected="true"] > .fo-num { background: var(--accent-primary, #00f0ff); color: #0a0a0f; }
.fo-aide { color: var(--text-muted, #8a8a9a); font-weight: 600; font-size: .85rem; }
.fo-lib-court { display: none; }
.fo-corps { flex: 1 1 auto; min-height: 0; overflow-y: auto; overflow-x: hidden; padding: 1.5rem 1.75rem; }
.fo-panneau[hidden] { display: none; }
.fo-consigne { margin: 0 0 .75rem; color: var(--text-muted, #8a8a9a); }
.fo-brouillon { display: flex; justify-content: space-between; align-items: center; gap: .6rem; flex-wrap: wrap; padding: .6rem .8rem; margin-bottom: 1rem; border-radius: 10px; background: rgba(255, 170, 0, .1); border: 1px solid rgba(255, 170, 0, .35); font-size: .95rem; }
.fo-brouillon[hidden] { display: none; }
.fo-brouillon-act { display: flex; gap: .4rem; flex-wrap: wrap; }
.fo-panneau .md-editor { max-width: 100%; }
.fo-panneau .md-textarea, .fo-panneau .md-preview { min-height: calc(100dvh - 380px) !important; }
.fo-panneau .md-tool, .fo-panneau .md-tab { min-height: 40px; }
.fo-panneau .md-tool { min-width: 40px; width: auto; }
.fo-panneau .md-preview { overflow-wrap: anywhere; }
.fo-panneau .md-preview img { max-width: 100%; height: auto; }

.fo-champs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.4rem 1.75rem; max-width: 1100px; }
.fo-champ { display: flex; flex-direction: column; gap: .4rem; min-width: 0; }
.fo-label { font-weight: 700; }
.fo-input { font: inherit; font-weight: 500; padding: .8rem .9rem; border-radius: 10px; border: 1px solid var(--border-color, #2a2a3a); background: var(--bg-primary, #0a0a0f); color: var(--text-primary, #fff); width: 100%; min-width: 0; min-height: 48px; box-sizing: border-box; }
.fo-input:focus { outline: none; border-color: var(--accent-primary, #00f0ff); box-shadow: 0 0 0 3px rgba(0, 240, 255, .15); }
.fo-aide-champ { color: var(--text-muted, #8a8a9a); font-size: .9rem; line-height: 1.4; }

.fo-mods { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 1.75rem; }
.fo-mods-main { display: flex; flex-direction: column; gap: 1rem; min-width: 0; }
.fo-ajout { display: flex; flex-direction: column; gap: .4rem; }
.fo-ajout-ligne { display: flex; gap: .6rem; min-width: 0; }
.fo-ajout-ligne .fo-input { flex: 1 1 auto; }
.fo-msg { margin: 0; min-height: 1.2em; font-size: .95rem; color: var(--text-secondary, #b8b8c8); }
.fo-msg.ok { color: var(--accent-success, #00ff88); }
.fo-msg.ko { color: var(--accent-warning, #ffaa00); }
.fo-liste { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .6rem; }
/* Mods v2 : n° · vignette carrée · nom · Client/Serveur · ↑ ↓ · × */
.fo-mod { display: grid; grid-template-columns: 34px 52px minmax(0, 1fr) 190px auto 44px; gap: .75rem; align-items: center; background: var(--bg-card, #15151f); border: 1px solid var(--border-color, #2a2a3a); border-radius: 12px; padding: .55rem .7rem; min-width: 0; }
.fo-mod.bouge { border-color: var(--accent-primary, #00f0ff); box-shadow: 0 0 0 3px rgba(0, 240, 255, .14); }
.fo-mod-n { font-family: var(--font-mono, monospace); font-weight: 700; font-size: 1.05rem; color: var(--accent-primary, #00f0ff); text-align: center; }
.fo-mod-vign, .fo-vign, .fo-col-img { position: relative; width: 52px; aspect-ratio: 1 / 1; border-radius: 10px; overflow: hidden; display: grid; place-items: center; font-family: var(--font-display, sans-serif); font-weight: 900; font-size: .9rem; color: rgba(255, 255, 255, .9); text-shadow: 0 1px 6px rgba(0, 0, 0, .6); border: 1px solid rgba(255, 255, 255, .08); flex: none; }
.fo-mod-vign img, .fo-vign img, .fo-col-img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.fo-mod-bas { display: contents; }
.fo-fleches { display: inline-flex; gap: 6px; }
.fo-fleche { width: 44px; height: 44px; display: grid; place-items: center; border-radius: 10px; border: 1px solid var(--border-color, #2a2a3a); background: var(--bg-primary, #0a0a0f); color: var(--text-primary, #fff); font: inherit; font-size: 1.25rem; font-weight: 700; cursor: pointer; }
.fo-fleche:hover:not(:disabled) { border-color: var(--accent-primary, #00f0ff); color: var(--accent-primary, #00f0ff); }
.fo-fleche:focus-visible { outline: 2px solid var(--accent-primary, #00f0ff); outline-offset: 2px; }
.fo-fleche:disabled { opacity: .3; cursor: default; }
.fo-mod-hors { color: #c9a4ff; }
.fo-mod-txt { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.fo-mod-nom { font: inherit; font-weight: 700; font-size: 1.05rem; color: var(--text-primary, #fff); background: transparent; border: 1px solid transparent; border-radius: 8px; padding: .3rem .4rem; margin-left: -.4rem; width: 100%; min-width: 0; min-height: 40px; box-sizing: border-box; }
.fo-mod-nom:hover { border-color: var(--border-color, #2a2a3a); }
.fo-mod-nom:focus { outline: none; border-color: var(--accent-primary, #00f0ff); background: var(--bg-primary, #0a0a0f); }
.fo-mod-lien { color: var(--text-muted, #8a8a9a); font-size: .85rem; overflow-wrap: anywhere; min-width: 0; }
.fo-seg { display: flex; background: var(--bg-primary, #0a0a0f); border: 1px solid var(--border-color, #2a2a3a); border-radius: 10px; padding: 3px; min-width: 0; }
.fo-seg button { flex: 1 1 0; min-width: 0; border: 0; cursor: pointer; font: inherit; font-weight: 700; font-size: .95rem; padding: .45rem 0; min-height: 40px; border-radius: 7px; background: transparent; color: var(--text-muted, #8a8a9a); }
.fo-seg button[data-fo-type="client"][aria-pressed="true"] { background: rgba(255, 170, 0, .14); color: var(--accent-warning, #ffaa00); }
.fo-seg button[data-fo-type="serveur"][aria-pressed="true"] { background: rgba(0, 240, 255, .1); color: var(--accent-primary, #00f0ff); }
.fo-mod-retirer { width: 44px; height: 44px; border-radius: 10px; border: 1px solid rgba(255, 68, 68, .35); background: rgba(255, 68, 68, .08); color: var(--accent-danger, #ff4444); cursor: pointer; font-size: 1.2rem; }
.fo-vide { margin: 0; color: var(--text-muted, #8a8a9a); }
.fo-vide[hidden] { display: none; }

/* Mods v2 : un mod / une collection */
.fo-choix { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .6rem; }
.fo-choix-item { display: grid; gap: 2px; text-align: left; padding: .75rem 1rem; border-radius: 12px; border: 1px solid var(--border-color, #2a2a3a); background: var(--bg-card, #15151f); color: var(--text-secondary, #b8b8c8); font: inherit; cursor: pointer; min-height: 48px; }
.fo-choix-item b { color: var(--text-primary, #fff); font-size: 1.05rem; }
.fo-choix-item[aria-pressed="true"] { border-color: var(--accent-primary, #00f0ff); background: rgba(0, 240, 255, .07); }
.fo-choix-item[aria-pressed="true"] b { color: var(--accent-primary, #00f0ff); }
.fo-choix-item:focus-visible { outline: 2px solid var(--accent-primary, #00f0ff); outline-offset: 2px; }
.fo-ajout[hidden], .fo-import[hidden], .fo-classe-tete[hidden], [data-fo-ordre-col][hidden] { display: none; }
.fo-input-mono { font-family: var(--font-mono, monospace); font-size: .9rem; }
.fo-btn-degrade { font: inherit; font-weight: 700; padding: .75rem 1.25rem; border-radius: 10px; cursor: pointer; min-height: 48px; border: 0; background: var(--gradient-primary, linear-gradient(135deg, #00f0ff 0%, #7b2cbf 100%)); color: #0a0a0f; white-space: nowrap; }
.fo-btn-degrade:disabled { opacity: .65; cursor: wait; }
.fo-btn-second.fo-btn-petit, .fo-btn-principal.fo-btn-petit { min-height: 40px; padding: .4rem .85rem; font-size: .95rem; }

/* Résultat de l'import */
.fo-import { border: 1px solid rgba(0, 240, 255, .35); border-radius: 16px; background: rgba(0, 240, 255, .03); overflow: hidden; margin-top: .4rem; }
.fo-import-tete { display: grid; grid-template-columns: 64px minmax(0, 1fr) 44px; gap: .9rem; align-items: center; padding: 1rem 1.1rem; border-bottom: 1px solid var(--border-color, #2a2a3a); }
.fo-col-img { width: 64px; font-size: 1.05rem; }
.fo-import-titre { display: grid; gap: 2px; min-width: 0; }
.fo-import-titre strong { font-size: 1.15rem; overflow-wrap: anywhere; }
.fo-import-titre span { color: var(--text-secondary, #b8b8c8); font-size: .95rem; }
.fo-outils { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .6rem; padding: .75rem 1.1rem; border-bottom: 1px solid var(--border-color, #2a2a3a); background: rgba(10, 10, 15, .5); }
.fo-sep { width: 1px; height: 26px; background: var(--border-color, #2a2a3a); }
.fo-compteur { margin-left: auto; font-family: var(--font-mono, monospace); font-size: .85rem; color: var(--text-secondary, #b8b8c8); }
.fo-compteur b { color: var(--accent-primary, #00f0ff); }
.fo-compteur.trop, .fo-compteur.trop b { color: var(--accent-warning, #ffaa00); }
.fo-objets { list-style: none; margin: 0; padding: .5rem; display: grid; gap: 6px; }
.fo-objet { display: grid; grid-template-columns: 30px 34px 64px minmax(0, 1fr) auto; gap: .75rem; align-items: center; padding: .5rem .6rem; border-radius: 12px; border: 1px solid transparent; min-width: 0; }
.fo-objet:has(.fo-case:checked:not(:disabled)) { background: var(--bg-card, #15151f); border-color: var(--border-color, #2a2a3a); }
.fo-objet.deja { background: rgba(0, 255, 136, .04); border-color: rgba(0, 255, 136, .18); }
.fo-objet.mort { opacity: .6; }
.fo-objet .fo-vign { width: 64px; font-size: 1.05rem; }
.fo-case { width: 24px; height: 24px; accent-color: var(--accent-primary, #00f0ff); margin: 0; cursor: pointer; }
.fo-case:disabled { cursor: not-allowed; }
.fo-objet-rang { font-family: var(--font-mono, monospace); font-weight: 700; color: var(--text-muted, #8a8a9a); text-align: right; font-size: .95rem; }
.fo-objet-txt { display: grid; gap: 2px; min-width: 0; cursor: pointer; }
.fo-objet-txt strong { font-size: 1.05rem; overflow-wrap: anywhere; line-height: 1.25; }
.fo-objet-txt > span:not(.fo-etat) { color: var(--text-muted, #8a8a9a); font-size: .9rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fo-etat { display: inline-flex; align-items: center; justify-self: start; font-size: .8rem; font-weight: 700; padding: 0 9px; border-radius: 999px; line-height: 1.7; }
.fo-etat-deja { color: var(--accent-success, #00ff88); background: rgba(0, 255, 136, .1); }
.fo-etat-mort { color: var(--accent-danger, #ff4444); background: rgba(255, 68, 68, .1); }
.fo-etat-sous { color: #c9a4ff; background: rgba(123, 44, 191, .18); }
/* Client / Serveur de l'import : de vrais boutons radio */
.fo-iseg { position: relative; display: inline-grid; grid-template-columns: 1fr 1fr; border: 1px solid var(--border-color, #2a2a3a); border-radius: 10px; overflow: hidden; background: var(--bg-primary, #0a0a0f); }
.fo-iseg input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; }
.fo-iseg label { display: grid; place-items: center; min-height: 40px; padding: 0 14px; font-weight: 700; color: var(--text-muted, #8a8a9a); cursor: pointer; }
.fo-iseg input:checked + label.c { background: rgba(255, 170, 0, .16); color: var(--accent-warning, #ffaa00); }
.fo-iseg input:checked + label.s { background: rgba(0, 240, 255, .12); color: var(--accent-primary, #00f0ff); }
.fo-iseg input:focus-visible + label { outline: 2px solid var(--accent-primary, #00f0ff); outline-offset: -2px; }
.fo-iseg.fige { opacity: .7; }
.fo-iseg.fige label { cursor: default; }
/* Réimport : mods de la fiche qui ne sont plus dans la collection */
.fo-retires { display: grid; gap: .6rem; padding: .9rem 1.1rem; border-top: 1px solid var(--border-color, #2a2a3a); background: rgba(255, 170, 0, .05); }
.fo-retires-tete { display: grid; gap: 2px; }
.fo-retires-tete strong { color: var(--accent-warning, #ffaa00); }
.fo-retires-tete span { color: var(--text-secondary, #b8b8c8); font-size: .95rem; }
.fo-retires-liste { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.fo-retires-liste li { display: grid; grid-template-columns: 52px minmax(0, 1fr) auto; gap: .75rem; align-items: center; min-width: 0; }
.fo-retires-liste strong { overflow-wrap: anywhere; min-width: 0; }
.fo-retires > .fo-btn-petit { justify-self: start; }
.fo-import-pied { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: .75rem; padding: .9rem 1.1rem; border-top: 1px solid var(--border-color, #2a2a3a); background: rgba(10, 10, 15, .5); }
.fo-import-pied p { margin: 0; color: var(--text-secondary, #b8b8c8); font-size: .95rem; flex: 1 1 280px; }
.fo-import-pied .fo-btn-principal:disabled { opacity: .45; cursor: not-allowed; }
/* Classement ↑ ↓ */
.fo-classe-tete { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .6rem; margin-top: .4rem; }
.fo-classe-tete p { margin: 0; color: var(--text-secondary, #b8b8c8); flex: 1 1 300px; }
.fo-mods-cote { display: flex; flex-direction: column; gap: .9rem; min-width: 0; }
.fo-encart { background: var(--bg-primary, #0a0a0f); border: 1px solid var(--border-color, #2a2a3a); border-radius: 14px; padding: 1rem 1.1rem; display: flex; flex-direction: column; gap: .55rem; line-height: 1.45; min-width: 0; }
.fo-encart-titre { font-family: var(--font-display, sans-serif); font-size: .8rem; letter-spacing: .08em; text-transform: uppercase; color: var(--text-muted, #8a8a9a); font-weight: 700; }

.fo-pied { display: flex; align-items: center; gap: .75rem; flex-wrap: wrap; padding: .9rem 1.75rem; border-top: 1px solid var(--border-color, #2a2a3a); background: var(--bg-primary, #0a0a0f); }
.fo-erreur { flex: 1 1 100%; margin: 0; color: #fca5a5; background: rgba(255, 68, 68, .08); border: 1px solid rgba(255, 68, 68, .35); border-radius: 10px; padding: .55rem .8rem; overflow-wrap: anywhere; }
.fo-erreur[hidden] { display: none; }
.fo-etat { margin-right: auto; color: var(--text-muted, #8a8a9a); font-size: .9rem; min-width: 0; }
.fo-btn-principal, .fo-btn-second { font: inherit; font-weight: 700; padding: .75rem 1.5rem; border-radius: 10px; cursor: pointer; min-height: 48px; }
.fo-btn-principal { background: var(--accent-primary, #00f0ff); color: #0a0a0f; border: 0; }
.fo-btn-principal:hover { filter: brightness(1.1); }
.fo-btn-principal:disabled { opacity: .6; cursor: wait; }
.fo-btn-second { background: var(--bg-tertiary, #1a1a25); border: 1px solid var(--border-color, #2a2a3a); color: var(--text-primary, #fff); }

/* ═══════════════════════════ Fenêtre « Modifier ma communauté » en onglets ═══════════════════════════ */
#community-modal.fo-commu { padding: 24px 32px; align-items: stretch; }
#community-modal.fo-commu .modal-content { max-width: 1600px !important; width: 100%; max-height: none; height: 100%; display: flex; flex-direction: column; overflow: hidden; border: 1px solid var(--border-color, #2a2a3a); border-radius: 18px; }
#community-modal.fo-commu #community-form { flex: 1 1 auto; min-height: 0; max-height: none; overflow-y: auto; overflow-x: hidden; padding: 1.5rem 1.75rem 0; }
#community-modal .fo-onglets[hidden] { display: none; }
#community-modal.fo-commu [data-co-onglet][data-co-cache] { display: none !important; }
#community-modal.fo-commu .modal-actions { position: sticky; bottom: 0; z-index: 2; margin: 1.25rem -1.75rem 0; padding: .9rem 1.75rem; background: var(--bg-primary, #0a0a0f); border-top: 1px solid var(--border-color, #2a2a3a); }
#community-modal.fo-commu .modal-actions .btn { min-height: 48px; }
#community-modal.fo-commu .form-group { max-width: 1100px; }
#community-modal.fo-commu .form-group:has(#community-description), #community-modal.fo-commu .form-group:has(#community-rules) { max-width: none; }
#community-modal.fo-commu .md-textarea, #community-modal.fo-commu .md-preview { min-height: calc(100dvh - 430px) !important; }
#community-modal.fo-commu .md-preview { overflow-wrap: anywhere; }
#community-modal.fo-commu .form-input { max-width: 100%; box-sizing: border-box; }
#community-modal.fo-commu .v2-quality-panel { max-width: 760px; }

/* ═══════════════════════════ Écrans moyens ═══════════════════════════ */
@media (max-width: 1100px) {
  .fo-mods { grid-template-columns: minmax(0, 1fr); }
  .fo-mods-cote { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
}

/* ═══════════════════════════ Téléphone ═══════════════════════════ */
@media (max-width: 768px) {
  /* Page publique : 4 onglets qui se partagent la largeur, lisibles et cliquables */
  .fo-page-onglets { display: grid; grid-template-columns: repeat(var(--fo-n, 4), minmax(0, 1fr)); gap: 2px; }
  .fo-page-onglets [role="tab"] { padding: .7rem .2rem; font-size: .95rem; min-height: 52px; flex-wrap: wrap; gap: .25rem; text-align: center; overflow-wrap: anywhere; min-width: 0; }
  .fo-page-onglets [role="tab"] > span:first-child { min-width: 0; }
  .fo-avant { padding: .9rem; }
  .fo-avant-act { flex: 1 1 100%; align-items: stretch; }
  .fo-btn-steam { justify-content: center; text-align: center; }
  .fo-ordre-info { margin-left: 0; flex-basis: 100%; }
  .fo-filtre { padding: .4rem .75rem; }
  /* Mods v2 au téléphone : image 112 px à gauche du nom, résumé en dessous sur toute la largeur */
  .fo-modp, .fo-modsp > li.fo-modp { grid-template-columns: 112px minmax(0, 1fr); grid-template-areas: "img tete" "txt txt"; gap: .75rem .875rem; padding: .75rem; }
  .fo-modp-img { width: 112px; font-size: 1.6rem; grid-area: img; }
  .fo-modp-rang { min-width: 30px; height: 30px; font-size: .85rem; top: 6px; left: 6px; }
  .fo-modp-txt { display: contents; }
  .fo-modp-tete { grid-area: tete; flex-direction: column; align-items: flex-start; align-self: center; }
  .fo-modp-tete strong { font-size: 1.15rem; }
  .fo-modp-corps { grid-area: txt; gap: .4rem; }
  .fo-infos { grid-template-columns: minmax(0, 110px) minmax(0, 1fr); }
  .server-detail-sidebar .srv-avis-liste { max-height: none !important; overflow: visible !important; }

  /* Fenêtres en plein écran : en-tête, onglets, contenu qui défile, boutons toujours en bas */
  .fo-fenetre { padding: 0; }
  .fo-boite { border-radius: 0; border: 0; max-width: none; height: 100%; }
  .fo-tete { padding: .75rem 1rem; }
  .fo-sur { font-size: .7rem; }
  .fo-tete h2 { font-size: 1.1rem; }
  .fo-onglets { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; padding: 0; }
  .fo-onglets [role="tab"] { flex-direction: column; justify-content: center; gap: 3px; padding: .5rem .15rem; min-height: 58px; font-size: .9rem; min-width: 0; text-align: center; }
  .fo-onglets .fo-num { width: 22px; height: 22px; flex-basis: 22px; font-size: .75rem; }
  .fo-onglets .fo-aide, .fo-onglets .fo-pastille { display: none; }
  .fo-lib-long { display: none; }
  .fo-lib-court { display: inline; }
  .fo-corps { padding: 1rem; }
  .fo-champs { grid-template-columns: minmax(0, 1fr); gap: 1.1rem; }
  .fo-ajout-ligne { flex-direction: column; }
  .fo-ajout-ligne .fo-btn-principal { width: 100%; }
  .fo-mods-cote { display: flex; }
  .fo-mod { grid-template-columns: 26px 44px minmax(0, 1fr) 44px; grid-template-areas: "n img txt x" "bas bas bas bas"; gap: .6rem; padding: .7rem; }
  .fo-mod-n { grid-area: n; font-size: .95rem; }
  .fo-mod-vign { grid-area: img; width: 44px; font-size: .8rem; }
  .fo-mod-txt { grid-area: txt; }
  .fo-mod-retirer { grid-area: x; }
  .fo-mod-bas { grid-area: bas; display: flex; gap: .5rem; min-width: 0; }
  .fo-seg { flex: 1 1 auto; }
  .fo-seg button { min-height: 44px; font-size: .9rem; }
  .fo-seg .fo-lib-long { display: none; }
  .fo-seg .fo-lib-court { display: inline; }
  .fo-fleches { flex: none; }
  /* Import d'une collection au téléphone */
  .fo-choix { grid-template-columns: minmax(0, 1fr); }
  .fo-ajout-ligne .fo-btn-degrade { width: 100%; }
  .fo-import-tete { grid-template-columns: 52px minmax(0, 1fr) 44px; gap: .7rem; padding: .8rem; }
  .fo-col-img { width: 52px; }
  .fo-outils { padding: .7rem .8rem; }
  .fo-outils .fo-btn-petit { flex: 1 1 calc(50% - .3rem); }
  .fo-sep { display: none; }
  .fo-compteur { margin-left: 0; flex-basis: 100%; }
  .fo-objet { grid-template-columns: 26px 56px minmax(0, 1fr); grid-template-areas: "case img txt" "seg seg seg"; gap: .5rem .75rem; padding: .6rem .5rem; }
  .fo-objet .fo-case { grid-area: case; }
  .fo-objet-rang { display: none; }
  .fo-objet .fo-vign { grid-area: img; width: 56px; }
  .fo-objet .fo-objet-txt { grid-area: txt; }
  .fo-objet .fo-iseg, .fo-objet .fo-iseg-vide { grid-area: seg; }
  .fo-objet .fo-iseg { width: 100%; }
  .fo-objet .fo-iseg label { min-height: 44px; }
  .fo-objet .fo-iseg-vide { display: none; }
  .fo-etat { border-radius: 8px; }
  .fo-objet-txt > span:not(.fo-etat) { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
  .fo-retires { padding: .8rem; }
  .fo-retires-liste li { grid-template-columns: 44px minmax(0, 1fr); }
  .fo-retires-liste .fo-vign { width: 44px; }
  .fo-retires-liste .fo-btn-petit { grid-column: 1 / -1; }
  .fo-import-pied { padding: .8rem; }
  .fo-import-pied .fo-btn-principal { width: 100%; }
  .fo-classe-tete .fo-btn-second { width: 100%; white-space: normal; }
  .fo-pied { display: grid; grid-template-columns: 1fr 1.4fr; gap: .6rem; padding: .7rem 1rem calc(.7rem + env(safe-area-inset-bottom, 0px)); }
  .fo-pied .fo-erreur, .fo-pied .fo-etat { grid-column: 1 / -1; }
  .fo-pied .fo-etat:empty { display: none; }
  .fo-btn-principal, .fo-btn-second { padding: .75rem .5rem; width: 100%; }
  .fo-panneau .md-textarea, .fo-panneau .md-preview { min-height: 50dvh !important; }
  .fo-panneau .md-toolbar { gap: 4px; }
  .fo-panneau .md-separator { display: none; }

  #community-modal.fo-commu { padding: 0; }
  #community-modal.fo-commu .modal-content { border-radius: 0; border: 0; height: 100%; max-height: 100dvh; }
  #community-modal.fo-commu .modal-header { padding: .75rem 1rem; }
  #community-modal.fo-commu #community-form { padding: 1rem 1rem 0; }
  #community-modal.fo-commu .modal-actions { margin: 1rem -1rem 0; padding: .7rem 1rem calc(.7rem + env(safe-area-inset-bottom, 0px)); display: grid; grid-template-columns: 1fr 1.4fr; gap: .6rem; }
  #community-modal.fo-commu .modal-actions .btn { width: 100%; }
  #community-modal.fo-commu .md-textarea, #community-modal.fo-commu .md-preview { min-height: 45dvh !important; }
  #community-modal.fo-commu .md-separator { display: none; }
  #community-modal.fo-commu .md-tool { min-width: 40px; min-height: 40px; }
  #community-modal.fo-commu .form-group:has(> input[name='discord_url']),
  #community-modal.fo-commu .form-group:has(> input[name='website_url']) { display: block; width: auto; margin-right: 0; }
}
/* La croix de la fenêtre communauté : une vraie cible de doigt (44 px) */
#community-modal.fo-commu .modal-close { min-width: 44px; min-height: 44px; display: inline-flex; align-items: center; justify-content: center; border-radius: 10px; }