/* ============================================================
   MAP.CSS — fo76map — source unique de tous les styles
   Fusion du CSS inline de index.php + theme.css
   Design system : Terminal Pip-Boy (cohérent avec login.php)
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Share+Tech+Mono&family=Kalam:wght@400;700&display=swap');

/* ── Variables ─────────────────────────────────────────────── */
:root {
    --amber:       #DDB724;
    --amber-dim:   #a8881a;
    --amber-glow:  rgba(221,183,36,0.18);
    --amber-faint: rgba(221,183,36,0.06);
    --bg:          #080a06;
    --bg-panel:    #0d100a;
    --border:      rgba(221,183,36,0.35);
    --text:        #e8e4d8;
    --text-dim:    rgba(221,183,36,0.5);
    --font-mono:   'Share Tech Mono','Courier New',monospace;
    --font-ui:     system-ui,-apple-system,'Segoe UI',sans-serif;
    --font-title:  'Kalam',cursive;
}

/* ── Scanlines CRT ─────────────────────────────────────────── */
body::before {
    content:'';
    position:fixed;
    inset:0;
    background:repeating-linear-gradient(
        0deg,rgba(0,0,0,0.06) 0px,rgba(0,0,0,0.06) 1px,
        transparent 1px,transparent 3px
    );
    pointer-events:none;
    z-index:1000;
}

/* ── Police icônes custom ──────────────────────────────────── */
@font-face {
    font-family:f76mapicon;
    font-weight:400;
    font-style:normal;
    src:url(fonts/f76mapicon.ttf) format('truetype'),
        url(fonts/f76mapicon.svg#f76mapicon) format('svg');
    font-display:swap;
}

.icon-f76 {
    font-family:f76mapicon !important;
    speak:none;
    font-style:normal;
    font-weight:400;
    font-variant:normal;
    text-transform:none;
    line-height:1;
    font-size:16pt;
    text-shadow:0 0 2px #000,-1px -1px 0 #000,1px 1px 0 #000,
                1px -1px 0 #000,-1px 1px 0 #000,2px 2px 2px rgba(0,0,0,.9);
    -webkit-font-smoothing:antialiased;
    -moz-osx-font-smoothing:grayscale;
}
.icon-f76::before       { position:relative; top:2px; }
.icon-f76.eye::before      { content:"\e9ce"; }
.icon-f76.eye-slash::before { content:"\e9d0"; }

/* ── Carte ─────────────────────────────────────────────────── */
#mapid { height:100vh; }

.leaflet-container {
    background:#0a0c08;
    background-image:
        linear-gradient(rgba(221,183,36,0.025) 1px,transparent 1px),
        linear-gradient(90deg,rgba(221,183,36,0.025) 1px,transparent 1px);
    background-size:40px 40px;
}

.leaflet-div-icon {
    background:url("img/leaflet/marker.svg") center no-repeat transparent;
    background-size:75%;
    border:none;
    text-align:center;
}

/* ── Tooltip ───────────────────────────────────────────────── */
.leaflet-tooltip {
    text-align:center;
    font-family:var(--font-mono);
    font-size:0.75rem;
    padding:2px 8px;
    border:1px solid var(--border);
    border-radius:0;
    background:var(--bg-panel);
    color:var(--amber);
    text-shadow:0 0 8px rgba(221,183,36,0.4);
    box-shadow:0 2px 8px rgba(0,0,0,0.6);
    letter-spacing:0.04em;
}
.leaflet-tooltip-bottom::before { border-bottom-color:var(--border); }

/* ── Popup ─────────────────────────────────────────────────── */
.leaflet-popup-content-wrapper,
.leaflet-popup-tip {
    background:var(--bg-panel);
    border:1px solid var(--border);
    box-shadow:0 0 30px rgba(0,0,0,0.8);
    border-radius:0;
}
.leaflet-popup-content { margin:0; color:var(--text); }
.leaflet-container a.leaflet-popup-close-button { color:var(--amber-dim); transition:color 0.15s; }
.leaflet-container a.leaflet-popup-close-button:hover { color:var(--amber); }

.leaflet-popup .marker-popup .header {
    background:linear-gradient(135deg,rgba(221,183,36,0.95),rgba(168,136,26,0.95));
    padding:0.7rem 1.5rem 0.6rem;
    text-align:center;
    position:relative;
    overflow:hidden;
}
.leaflet-popup .marker-popup .header::after {
    content:'';
    position:absolute;
    inset:0;
    background:repeating-linear-gradient(
        0deg,rgba(0,0,0,0.08) 0px,rgba(0,0,0,0.08) 1px,
        transparent 1px,transparent 3px
    );
    pointer-events:none;
}
.leaflet-popup .marker-popup .header .title {
    font-family:var(--font-title);
    font-size:1.15rem;
    line-height:1.6rem;
    font-weight:700;
    color:#1a1400;
    text-shadow:none;
}
.leaflet-popup .marker-popup .content {
    padding:0.7rem 0.9rem;
    font-family:var(--font-ui);
}
.leaflet-popup .marker-popup .content .description {
    font-size:0.85rem;
    line-height:1.5rem;
    color:var(--text);
    text-shadow:none;
}
.leaflet-popup .marker-popup .content .links {
    margin-top:0.75rem;
    padding-top:0.3rem;
    border-top:1px solid rgba(221,183,36,0.15);
    display:flex;
    justify-content:space-between;
}
.leaflet-popup .marker-popup a {
    color:var(--amber);
    font-family:var(--font-mono);
    font-size:0.75rem;
    text-decoration:none;
    transition:color 0.15s;
}
.leaflet-popup .marker-popup a:hover { color:#fff; text-decoration:none; }

/* ── Contrôles zoom ────────────────────────────────────────── */
.leaflet-control-zoom {
    border:1px solid var(--border) !important;
    box-shadow:0 2px 12px rgba(0,0,0,0.6) !important;
}
.leaflet-control-zoom a {
    background:var(--bg-panel) !important;
    border-bottom:1px solid var(--border) !important;
    color:var(--amber) !important;
    font-size:1.1rem !important;
    text-shadow:0 0 8px rgba(221,183,36,0.4);
    transition:background 0.15s;
}
.leaflet-control-zoom a:hover { background:var(--amber-faint) !important; }

/* ── Attribution ───────────────────────────────────────────── */
.leaflet-control-attribution {
    background:rgba(6,8,5,0.85) !important;
    color:var(--text-dim) !important;
    border-top:1px solid var(--border) !important;
    font-family:var(--font-mono) !important;
    font-size:0.6rem !important;
}
.leaflet-control-attribution a { color:var(--amber-dim) !important; }
.leaflet-control-attribution a:hover { color:var(--amber) !important; }

/* ── Marker hover ──────────────────────────────────────────── */
.leaflet-marker-icon:hover { filter:drop-shadow(0 0 6px var(--amber)); }

/* ── Panneau conteneur ─────────────────────────────────────── */
.panel { position:absolute; display:flex; height:100%; z-index:990; }
#leftPanel { flex-direction: column; }
#rightPanel { right:0; z-index:9999; }
#leftPanel.closed  { left:-400px; }
#rightPanel.closed { right:-400px; display:none; }
.panel > .content  { position:relative; display:block; height:100vh; z-index:999; width:400px; }

/* ── Panneau gauche ────────────────────────────────────────── */
#leftPanel > .content {
    background:#0d100a;
    border-right:1px solid var(--border);
    box-shadow:4px 0 24px rgba(0,0,0,0.9);
    font-family:var(--font-ui);
    color:var(--text);
}

/* Bouton toggle — position absolue hors du flux flex */
#leftPanel > .button {
    position:absolute;  /* sort du flux flex-column */
    left:400px;         /* bord droit de .content (400px) */
    top:0;
    height:50px;
    width:50px;
    z-index:1000;
    border-radius:0 0 8px 0;
    background:#0d100a;
    border:1px solid var(--border);
    box-shadow:2px 2px 8px rgba(0,0,0,0.8);
    transition:all 0.2s;
    display:flex;
    align-items:center;
    justify-content:center;
}
#leftPanel > .button::after {
    content:'◀';
    color:var(--amber-dim);
    font-size:0.75rem;
    transition:color 0.2s;
}
#leftPanel.closed > .button::after { content:'▶'; }
#leftPanel > .button:hover { background:var(--amber-faint); box-shadow:2px 2px 12px rgba(221,183,36,0.2); }
#leftPanel > .button:hover::after { color:var(--amber); }

/* ── Panneau droit ─────────────────────────────────────────── */
#rightPanel > .content {
    background:var(--bg-panel);
    border-left:1px solid var(--border);
    box-shadow:-4px 0 24px rgba(0,0,0,0.9);
    color:var(--text);
    overflow-y:auto;
    padding:0;
    font-family:var(--font-ui);
}
#rightPanel .content > div { padding:1.2rem; }

#rightPanel h2 {
    font-family:var(--font-title);
    color:var(--amber);
    font-size:1.05rem;
    text-shadow:0 0 10px rgba(221,183,36,0.35);
    padding:0.9rem 1.2rem 0.7rem;
    margin:-1.2rem -1.2rem 1rem;
    background:rgba(221,183,36,0.07);
    border-bottom:1px solid var(--border);
}
#rightPanel h2::before { content:'⊞ '; opacity:0.7; }
#rightPanel p { color:rgba(232,228,216,0.6); font-size:0.75rem; line-height:1.6; margin-bottom:0.5rem; }
#rightPanel a { color:var(--amber); }

#rightPanel .row { vertical-align:top; }
#rightPanel .row.flex { display:flex; }
#rightPanel .row + .row { margin-top:0.8rem; }
#rightPanel .row > * { width:100%; }
#rightPanel label {
    color:var(--text-dim) !important;
    font-family:var(--font-mono) !important;
    font-size:0.65rem !important;
    letter-spacing:0.18em !important;
    text-transform:uppercase !important;
    margin-bottom:0.3rem !important;
    display:block;
}
#rightPanel label::before { content:'// '; opacity:0.45; }

#rightPanel input[type="text"],
#rightPanel select,
#rightPanel textarea {
    background:rgba(221,183,36,0.04);
    border:1px solid var(--border);
    border-radius:0;
    color:var(--text);
    font-family:var(--font-ui);
    font-size:0.85rem;
    padding:0.4rem 0.6rem;
    width:100%;
    transition:border-color 0.15s, box-shadow 0.15s;
    -webkit-appearance:none;
}
#rightPanel input[type="text"]:focus,
#rightPanel select:focus,
#rightPanel textarea:focus {
    outline:none;
    border-color:var(--amber);
    box-shadow:0 0 0 2px rgba(221,183,36,0.1);
}
#rightPanel input::placeholder { color:rgba(232,228,216,0.2); }
#rightPanel select option { background:var(--bg-panel); color:var(--text); }
#rightPanel select:disabled { opacity:0.4; cursor:not-allowed; }
#rightPanel textarea { min-height:80px; resize:vertical; line-height:1.5; }

/* ── Sélecteur d'icônes admin ──────────────────────────────── */
#modifGroupIcon {
    margin:1rem 0 0.75rem;
    border:1px solid var(--border);
    background:rgba(0,0,0,0.3);
    padding:0.3rem;
    text-align:center;
    display:flex;
    flex-wrap:wrap;
    overflow:auto;
    max-height:14.5em;
}
#modifGroupIcon.hidden { display:none; }
#modifGroupIcon.hidden + * + * { margin-top:0.75rem; }
#modifGroupIcon .icon { display:inline-block; width:20%; padding:0.25rem; }
#modifGroupIcon .icon > div {
    border:1px solid rgba(221,183,36,0.12);
    padding:0.4rem 0.4rem 0.15rem;
    cursor:pointer;
    transition:all 0.12s;
}
#modifGroupIcon .icon > div:hover { background:var(--amber-faint); border-color:var(--border); }
#modifGroupIcon .icon.selected > div { background:var(--amber-glow); border-color:var(--amber); }

/* ── floatBox & sélecteurs ─────────────────────────────────── */
#floatBox { position:absolute; width:100%; z-index:1001; box-shadow:0 0 2px #000; }

#selectAll {
    display:flex;
    background:#080a06;
    border-bottom:1px solid var(--border);
}
#selectAll div {
    width:50%;
    padding:0.25rem;
    color:var(--text-dim);
    font-family:var(--font-mono);
    font-size:0.68rem;
    letter-spacing:0.18em;
    text-transform:uppercase;
    text-align:center;
    transition:color 0.15s, background 0.15s;
}
#selectAll div:hover { background:var(--amber-faint); color:var(--amber); cursor:pointer; }
#selectAll div + div { border-left:1px solid var(--border); }

/* ── Catégories ────────────────────────────────────────────── */
#categories {
    height:100%;
    overflow-y:scroll;
    padding:1px;
    padding-top:34px; /* hauteur du floatBox / selectAll */
    position:relative;
    background:var(--bg-panel);
    color:var(--text);
}

#categories .categorie { background:var(--bg-panel); border-bottom:1px solid rgba(221,183,36,0.1); }
#categories .categorie + .categorie { margin-top:1px; }

#categories .categorie > .title {
    display:flex;
    justify-content:space-between;
    background:rgba(221,183,36,0.07);
    border-bottom:1px solid var(--border);
    text-transform:uppercase;
    font-weight:bold;
    padding:0.4rem 0.6rem;
    color:var(--amber);
    font-family:var(--font-mono);
    font-size:0.68rem;
    letter-spacing:0.2em;
    text-shadow:0 0 10px rgba(221,183,36,0.35);
}
#categories .categorie > .title > .texte {
    flex-grow:1;
    display:flex;
    justify-content:space-between;
    max-width:90%;
    cursor:pointer;
}
#categories .categorie > .title > .texte:hover { background:var(--amber-faint); }
#categories .categorie > .title span { margin-right:2rem; }
#categories .categorie > .title span i,
#categories .categorie > .title .show-hide i {
    color:var(--amber-dim);
    font-size:0.85rem;
    transition:color 0.15s;
}
#categories .categorie > .title .show-hide { padding:0 0.2rem; cursor:pointer; }
#categories .categorie > .title .show-hide:hover i { color:var(--amber); }
#categories .categorie .content {
    padding:0.25rem 0;
    column-count:2;
    column-rule:1px solid rgba(221,183,36,0.08);
    column-gap:0.2rem;
    background:var(--bg-panel);
}
#categories .categorie.closed .content { display:none; }

/* ── Entités ───────────────────────────────────────────────── */
#categories .entity {
    width:100%;
    display:flex;
    align-items:center;
    padding:0.28rem 0.4rem;
    cursor:pointer;
    border-bottom:1px solid rgba(221,183,36,0.05);
    background:var(--bg-panel);
    transition:background 0.12s;
}
#categories .entity > * { vertical-align:middle; }
#categories .entity:hover { background:var(--amber-faint); box-shadow:inset 2px 0 0 var(--amber); }
#categories .entity.hidden { opacity:0.35; }
#categories .entity .icon { min-width:1.5rem; text-align:center; margin-right:0.2rem; }
#categories .entity .icon i { font-size:1.2rem; }
#categories .entity .title {
    font-family:var(--font-ui);
    font-size:0.83rem;
    font-weight:400;
    color:var(--text);
    letter-spacing:0;
    line-height:1.25rem;
    flex-grow:1;
    padding:0 0.2rem;
}
#categories .entity:hover .title { color:var(--amber); }
#categories .entity .qty {
    font-size:0.65rem;
    background:rgba(221,183,36,0.1);
    border:1px solid rgba(221,183,36,0.2);
    color:var(--amber-dim);
    font-family:var(--font-mono);
    padding:0 0.2rem 0.15rem;
    min-width:22px;
    text-align:center;
    vertical-align:middle;
    transition:all 0.12s;
}
#categories .entity:hover .qty {
    background:var(--amber-glow);
    color:var(--amber);
    border-color:var(--border);
}

/* Scrollbar */
#categories::-webkit-scrollbar { width:4px; }
#categories::-webkit-scrollbar-track { background:rgba(0,0,0,0.3); }
#categories::-webkit-scrollbar-thumb { background:var(--border); border-radius:2px; }
#categories::-webkit-scrollbar-thumb:hover { background:var(--amber-dim); }
#rightPanel > .content::-webkit-scrollbar { width:4px; }
#rightPanel > .content::-webkit-scrollbar-track { background:rgba(0,0,0,0.3); }
#rightPanel > .content::-webkit-scrollbar-thumb { background:var(--border); }

/* ── Boutons top-right ─────────────────────────────────────── */
.btn-top-left { width:100%; text-align:right; }
.btn-top-left button[type="button"] {
    background:var(--bg-panel);
    border:1px solid var(--border);
    color:var(--amber);
    font-family:var(--font-mono);
    font-size:0.72rem;
    letter-spacing:0.12em;
    text-transform:uppercase;
    padding:0.3rem 0.7rem;
    transition:background 0.15s;
}
.btn-top-left button[type="button"]:hover,
.btn-top-left button[type="button"]:focus {
    background:var(--amber-faint);
    color:var(--amber);
}

/* Bannières */
#banniereGecko { background:#0d100a; border:1px solid var(--border); }
#banniereGecko:hover { background:var(--amber-faint); }
#banniereGecko img { max-width:250px; padding:0.5rem; }
#banniereFoGen { background:#0d100a; border:1px solid var(--border); }
#banniereFoGen:hover { background:var(--amber-faint); }
#banniereFoGen img { max-width:250px; padding:0.5rem; }

#lienParticipation { width:100%; max-width:250px; padding:0.5rem; display:inline-block; background:#000; }
#lienParticipation:hover { background:#111; }
#lienParticipation > div {
    font-size:2rem;
    color:#D5AD6D;
    background:linear-gradient(to bottom,#fceabb 0%,#fccd4d 50%,#f8b500 51%,#fbdf93 100%);
    -webkit-background-clip:text;
    -webkit-text-fill-color:transparent;
}

/* ── Boutons formulaires admin ─────────────────────────────── */
form input.button {
    font-family:var(--font-mono);
    font-size:0.7rem;
    letter-spacing:0.15em;
    text-transform:uppercase;
    border-radius:0;
    box-shadow:none;
    text-shadow:none;
    padding:0.45rem 0.7rem;
    background:transparent;
    border:1px solid rgba(232,228,216,0.25);
    color:rgba(232,228,216,0.7);
    cursor:pointer;
    transition:background 0.15s, color 0.15s;
}
form input.button:hover { background:rgba(232,228,216,0.06); color:var(--text); }
form input.button:active { position:relative; top:1px; }
form input.button.blue { border-color:rgba(0,172,240,0.4); color:#40c4f0; }
form input.button.blue:hover { background:rgba(0,172,240,0.08); }
form input.button.red { border-color:rgba(220,60,60,0.4); color:#f07070; }
form input.button.red:hover { background:rgba(220,60,60,0.08); }
form input.button.green { border-color:rgba(221,183,36,0.4); color:var(--amber); }
form input.button.green:hover { background:var(--amber-faint); }

/* Lien marqueur */
#linkGenerated { color:var(--amber); font-size:0.68rem; word-break:break-all; display:block; }

/* ── jquery-confirm overrides — style terminal Pip-Boy ─────── */

/* Fond semi-transparent sombre */
.jconfirm-bg {
    background: rgba(8,10,6,0.75) !important;
    backdrop-filter: blur(2px);
}

/* Boîte principale — reprend exactement .terminal du login */
.jconfirm-box {
    background: #0d100a !important;
    border: 1px solid rgba(221,183,36,0.35) !important;
    border-radius: 0 !important;
    box-shadow:
        0 0 0 1px rgba(221,183,36,0.08),
        0 0 40px rgba(221,183,36,0.10),
        inset 0 0 60px rgba(0,0,0,0.4) !important;
    font-family: var(--font-mono) !important;
    padding: 0 !important;
    overflow: hidden;
}

/* Titre — style terminal-bar avec les dots */
.jconfirm-title-c {
    background: rgba(221,183,36,0.08) !important;
    border-bottom: 1px solid rgba(221,183,36,0.35) !important;
    padding: 0.4rem 0.75rem 0.4rem 2.4rem !important;
    display: flex !important;
    align-items: center !important;
    gap: 0.5rem !important;
    /* position:relative non nécessaire car closeIcon se positionne par rapport au box */
}

/* Les 3 dots simulés via ::before sur le titre */
.jconfirm-title-c::before {
    content: '\2622';          /* ☢ symbole radiation */
    display: inline-block;
    font-size: 0.95rem;
    color: #a8881a;
    opacity: 0.55;
    flex-shrink: 0;
    line-height: 1;
    animation: vaultSpin 4s linear infinite;
}
@keyframes vaultSpin { to { transform: rotate(360deg); } }

.jconfirm-title-c::after {
    content: 'VAULT-TEC SYS.';
    font-family: var(--font-mono);
    font-size: 0.5rem;
    color: #a8881a;
    opacity: 0.4;
    letter-spacing: 0.15em;
    flex-shrink: 0;

}

.jconfirm-title {
    font-family: var(--font-mono) !important;
    font-size: 0.75rem !important;
    font-weight: normal !important;
    letter-spacing: 0.18em !important;
    text-transform: uppercase !important;
    color: #a8881a !important;
    margin-left: auto !important;

}

/* Icône masquée */
.jconfirm-icon-c { display: none !important; }

/* Corps */
.jconfirm-content-pane {
    padding: 1.5rem 1.5rem 0.5rem !important;
}
.jconfirm-content {
    color: var(--text, #e8e4d8) !important;
    font-family: var(--font-mono) !important;
    font-size: 0.78rem !important;
    line-height: 1.7 !important;
    letter-spacing: 0.03em !important;
}
.jconfirm-content p { margin: 0 0 0.75rem !important; }
.jconfirm-content a {
    color: var(--amber) !important;
    text-decoration: none !important;
    border-bottom: 1px solid rgba(221,183,36,0.3) !important;
    transition: border-color 0.2s, text-shadow 0.2s !important;
}
.jconfirm-content a:hover {
    border-bottom-color: var(--amber) !important;
    text-shadow: 0 0 8px rgba(221,183,36,0.4) !important;
}
.jconfirm-content ul {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
}
.jconfirm-content ul li::before {
    content: '> ';
    color: var(--amber);
    opacity: 0.7;
}

/* Boutons */
.jconfirm-buttons {
    padding: 0 !important;
    border-top: 1px solid rgba(221,183,36,0.2) !important;
    display: flex !important;
    gap: 0 !important;
}
.jconfirm-buttons button {
    flex: 1 !important;
    background: transparent !important;
    border: none !important;
    border-left: 1px solid rgba(221,183,36,0.2) !important;
    color: var(--amber) !important;
    font-family: var(--font-mono) !important;
    font-size: 0.68rem !important;
    letter-spacing: 0.18em !important;
    text-transform: uppercase !important;
    padding: 0.75rem 1rem !important;
    cursor: pointer !important;
    transition: background 0.2s !important;
    border-radius: 0 !important;
}
.jconfirm-buttons button:first-child { border-left: none !important; }
.jconfirm-buttons button:hover {
    background: rgba(221,183,36,0.1) !important;
}
/* Bouton destructif (rouge) */
.jconfirm-buttons button.btn-red {
    color: #e05555 !important;
    border-top: 1px solid rgba(224,85,85,0.3) !important;
}
.jconfirm-buttons button.btn-red:hover {
    background: rgba(224,85,85,0.08) !important;
}

/* Croix de fermeture */
.jconfirm-closeIcon {
    position: absolute !important;
    left: 0.6rem !important;
    right: auto !important;
    top: 0.4rem !important;
    transform: none !important;
    color: rgba(221,183,36,0.5) !important;
    font-size: 0.8rem !important;
    width: 20px !important;
    height: 20px !important;
    line-height: 20px !important;
    text-align: center !important;
    display: block !important;
    border: 1px solid rgba(221,183,36,0.25) !important;
    transition: color 0.2s, border-color 0.2s, background 0.2s !important;
    cursor: pointer !important;
    z-index: 10 !important;
}
.jconfirm-closeIcon:hover {
    color: var(--amber) !important;
    border-color: rgba(221,183,36,0.6) !important;
    background: rgba(221,183,36,0.08) !important;
}

/* Holder centrage */
.jconfirm-holder { text-align: center; }
.jconfirm-holder > * { text-align: left; }
.container { display:inline-block; min-width:300px; }

/* ── Responsive tablette (>1024px : mobileShow caché) ─────── */
@media screen and (max-width:1024px) {
    .mobileShow { display:none !important; }
}

/* ── Contrôles carte droite — miroir du .terminal login ────── */
.right-controls-wrapper > .leaflet-control {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    margin: 0 !important;
}
#rightControls {
    width: 210px;
    background: #0d100a;
    border: 1px solid rgba(221,183,36,0.35);
    border-right: none;
    box-shadow:
        0 0 0 1px rgba(221,183,36,0.08),
        0 0 40px rgba(221,183,36,0.08),
        inset 0 0 60px rgba(0,0,0,0.4);
    font-family: var(--font-mono);
    color: var(--amber);
    overflow: hidden;
}
.rc-bar {
    background: rgba(221,183,36,0.08);
    border-bottom: 1px solid rgba(221,183,36,0.35);
    padding: 0.5rem 1rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}
.rc-bar .dot {
    width: 8px; height: 8px;
    border-radius: 50%;
    background: #a8881a;
    opacity: 0.4;
    flex-shrink: 0;
}
.rc-bar .dot:first-child { opacity: 0.7; }
.rc-bar span {
    font-size: 0.65rem;
    color: #a8881a;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    margin-left: auto;
}
.rc-body {
    padding: 1rem 1rem 1.2rem;
}
.rc-logos-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.6rem;
}
.rc-logo-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.4rem;
    padding: 0.5rem 0.3rem;
    cursor: pointer;
    border: 1px solid rgba(221,183,36,0.15);
    background: rgba(0,0,0,0.2);
    transition: border-color 0.2s, background 0.2s;
}
.rc-logo-card:hover {
    border-color: rgba(221,183,36,0.45);
    background: rgba(221,183,36,0.05);
}
.rc-logo-card img {
    width: 72px; height: 72px;
    object-fit: contain;
    filter: drop-shadow(0 1px 4px rgba(0,0,0,0.7));
    transition: filter 0.2s;
}
.rc-logo-card:hover img { filter: drop-shadow(0 0 10px rgba(221,183,36,0.3)); }
.rc-logo-card span {
    font-size: 0.52rem;
    color: #a8881a;
    letter-spacing: 0.08em;
    text-align: center;
    line-height: 1.4;
    text-transform: uppercase;
}
.rc-hr {
    border: none;
    border-top: 1px solid rgba(221,183,36,0.35);
    margin: 1rem 0 0.9rem;
}
.rc-btn-submit {
    width: 100%;
    background: transparent;
    border: 1px solid rgba(221,183,36,0.35);
    color: var(--amber);
    font-family: var(--font-mono);
    font-size: 0.72rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    padding: 0.75rem 0.5rem;
    cursor: pointer;
    transition: background 0.2s, box-shadow 0.2s, border-color 0.2s;
    display: block;
}
.rc-btn-submit:hover {
    background: rgba(221,183,36,0.18);
    box-shadow: 0 0 16px rgba(221,183,36,0.25);
    border-color: var(--amber);
}
.rc-btn-submit:active { background: rgba(221,183,36,0.25); }
.rc-footer {
    border-top: 1px solid rgba(221,183,36,0.35);
    padding: 0.55rem 1rem;
    font-size: 0.6rem;
    color: rgba(221,183,36,0.3);
    letter-spacing: 0.12em;
    text-align: right;
    cursor: pointer;
    transition: color 0.2s;
}
.rc-footer:hover { color: rgba(221,183,36,0.7); }
#btnConnexion { cursor: pointer; }

/* ── Formulaire login dans dialog ───────────────────────────── */
.login-dialog {
    padding: 0.5rem 0;
}
.login-prompt {
    font-family: var(--font-mono);
    font-size: 0.7rem;
    color: #a8881a;
    letter-spacing: 0.15em;
    margin-bottom: 1.2rem;
}
.login-blink {
    display: inline-block;
    animation: blink 1.1s step-end infinite;
}
@keyframes blink { 50% { opacity: 0; } }

.login-error {
    background: rgba(224,85,85,0.1);
    border: 1px solid rgba(224,85,85,0.35);
    color: #e05555;
    font-family: var(--font-mono);
    font-size: 0.72rem;
    padding: 0.5rem 0.75rem;
    margin-bottom: 1rem;
    letter-spacing: 0.06em;
    animation: loginShake 0.35s ease;
}
@keyframes loginShake {
    0%,100% { transform: translateX(0); }
    25%      { transform: translateX(-6px); }
    75%      { transform: translateX(6px); }
}

.login-field {
    margin-bottom: 1.2rem;
}
.login-field label {
    display: block;
    font-family: var(--font-mono);
    font-size: 0.65rem;
    letter-spacing: 0.18em;
    color: #a8881a;
    margin-bottom: 0.4rem;
    text-transform: uppercase;
}
.login-field input {
    width: 100%;
    background: transparent;
    border: none;
    border-bottom: 1px solid rgba(221,183,36,0.35);
    color: var(--amber);
    font-family: var(--font-mono);
    font-size: 0.95rem;
    padding: 0.35rem 0;
    outline: none;
    transition: border-color 0.2s;
    caret-color: var(--amber);
}
.login-field input::placeholder { color: rgba(221,183,36,0.2); }
.login-field input:focus { border-bottom-color: var(--amber); }

.login-submit {
    width: 100%;
    margin-top: 1rem;
    background: transparent;
    border: 1px solid rgba(221,183,36,0.5);
    color: var(--amber);
    font-family: var(--font-mono);
    font-size: 0.78rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    padding: 0.75rem;
    cursor: pointer;
    transition: background 0.2s, box-shadow 0.2s, border-color 0.2s;
}
.login-submit:hover {
    background: rgba(221,183,36,0.1);
    box-shadow: 0 0 16px rgba(221,183,36,0.2);
    border-color: var(--amber);
}
.login-submit:disabled { opacity: 0.4; cursor: not-allowed; }

/* ── Recherche ──────────────────────────────────────────────── */
#searchBox {
    flex-shrink: 0;
    width: 400px;            /* même largeur que .panel > .content */
    padding: 0.45rem 0.6rem 0.35rem;
    border-bottom: 1px solid var(--border);
    background: #080a06;
    border-right: 1px solid var(--border);
    position: relative;
    z-index: 1002;
}

#searchInputWrapper {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    border: 1px solid rgba(221,183,36,0.25);
    background: rgba(0,0,0,.2);
    padding: 0.3rem 0.5rem;
    transition: border-color 0.2s;
}
#searchInputWrapper:focus-within {
    border-color: rgba(221,183,36,0.55);
    box-shadow: 0 0 8px rgba(221,183,36,0.08);
}

#searchIcon {
    color: rgba(221,183,36,0.5);
    font-size: 0.85rem;
    flex-shrink: 0;
    line-height: 1;
}

#searchInput {
    flex: 1;
    background: transparent;
    border: none;
    outline: none;
    color: var(--amber);
    font-family: var(--font-mono);
    font-size: 0.72rem;
    letter-spacing: 0.05em;
    caret-color: var(--amber);
    min-width: 0;
}
#searchInput::placeholder {
    color: rgba(221,183,36,0.25);
    font-size: 0.68rem;
}

#searchClear {
    display: none;
    background: transparent;
    border: none;
    color: rgba(221,183,36,0.35);
    cursor: pointer;
    font-size: 0.7rem;
    padding: 0;
    line-height: 1;
    flex-shrink: 0;
    transition: color 0.15s;
}
#searchClear:hover { color: var(--amber); }

#searchResults {
    display: none;
    position: absolute;       /* flotte au-dessus des catégories */
    left: 0;
    right: 0;
    top: 100%;                /* juste en dessous du searchBox */
    max-height: calc(100vh - 120px); /* hauteur max = écran - top bar */
    overflow-y: auto;
    border: 1px solid var(--border);
    border-top: none;
    background: #0d100a;
    z-index: 1010;
    box-shadow: 0 8px 24px rgba(0,0,0,0.7);
}

.search-item {
    padding: 0.4rem 0.7rem;
    cursor: pointer;
    border-bottom: 1px solid rgba(221,183,36,0.08);
    transition: background 0.15s;
    display: flex;
    align-items: center;
    gap: 0.45rem;
}
.search-item .icon-f76 {
    font-size: 1rem;
    flex-shrink: 0;
    line-height: 1;
    text-shadow: 0 0 3px rgba(0,0,0,0.8);
}
.search-item:last-child { border-bottom: none; }
.search-item:hover { background: rgba(221,183,36,0.08); }

.search-item-name {
    font-family: var(--font-ui);
    font-size: 0.75rem;
    color: var(--text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    flex: 1;
}
.search-item-count {
    flex-shrink: 0;
    font-family: var(--font-mono);
    font-size: 0.6rem;
    color: var(--amber);
    background: rgba(221,183,36,0.12);
    border: 1px solid rgba(221,183,36,0.3);
    padding: 0.1rem 0.35rem;
    margin-left: 0.4rem;
    letter-spacing: 0.05em;
}

.search-noresult {
    padding: 0.6rem 0.7rem;
    font-family: var(--font-mono);
    font-size: 0.65rem;
    color: rgba(221,183,36,0.35);
    letter-spacing: 0.1em;
    text-align: center;
}

/* ── Dialog connexion/inscription ───────────────────────────── */
.login-info {
    font-family: var(--font-ui);
    font-size: 0.8rem;
    color: var(--text);
    line-height: 1.6;
    margin: 0 0 0.8rem;
}
.login-info strong {
    color: var(--amber);
    font-weight: normal;
}
.login-forum-logo {
    text-align: center;
    margin: 1.2rem 0;
    padding: 0.75rem;
    border: 1px solid var(--border);
    background: rgba(0,0,0,.2);
}
.login-forum-logo img {
    max-width: 180px;
    max-height: 100px;
    object-fit: contain;
    filter: drop-shadow(0 2px 8px rgba(0,0,0,.6));
}
.login-submit--block {
    display: block;
    text-align: center;
    text-decoration: none;
    margin-top: 0.5rem;
}
.login-register {
    font-family: var(--font-mono);
    font-size: 0.6rem;
    color: rgba(221,183,36,0.35);
    letter-spacing: 0.08em;
    text-align: center;
    margin: 0.8rem 0 0;
    line-height: 1.5;
}