/*
 * Forum phpBB 3.3, style « moonlight » : prosilver aux couleurs du site.
 * Chargée par le forum (deploy/forum/styles/moonlight) depuis le site, pour
 * qu'un déploiement du site suffise à la changer. Mêmes teintes que le site
 * (Tailwind « slate » et « indigo »), mêmes polices système.
 */

:root {
    --ml-950: #020617;
    --ml-900: #0f172a;
    --ml-850: #131c31;
    --ml-800: #1e293b;
    --ml-700: #334155;
    --ml-600: #475569;
    --ml-500: #64748b;
    --ml-400: #94a3b8;
    --ml-300: #cbd5e1;
    --ml-200: #e2e8f0;
    --ml-100: #f1f5f9;
    --ml-accent: #4f46e5;
    --ml-accent-hover: #6366f1;
    --ml-link: #a5b4fc;
    --ml-link-hover: #c7d2fe;
    --ml-font: ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
    color-scheme: dark;
}

/* ── Page ─────────────────────────────────────────────────────────────── */

html, body {
    background: var(--ml-950);
    color: var(--ml-100);
}

body {
    font-family: var(--ml-font);
    font-size: 14px;
    padding: 0;
}

.wrap {
    background: transparent;
    border: 0;
    border-radius: 0;
    max-width: 64rem;
    padding: 16px;
}

a, a:visited { color: var(--ml-link); }
a:hover, a:focus, a:active { color: var(--ml-link-hover); }

h1, h2, h3, h4, .content h2, .panel h2 { color: var(--ml-100); font-family: var(--ml-font); }
h3, .panel h3 { border-bottom-color: var(--ml-800); color: var(--ml-200); }
hr, .content hr, .panel hr { border-color: var(--ml-800); border-top-color: var(--ml-800); }
p, li, dd, dt, td, th, label, legend { color: inherit; }

/* ── En-tête et pied de page du site ─────────────────────────────────── */

.ml-site-header {
    border-bottom: 1px solid var(--ml-800);
    font-family: var(--ml-font);
}

.ml-nav { margin: 0 auto; max-width: 64rem; padding: 16px; }
.ml-row { align-items: center; display: flex; flex-wrap: wrap; gap: 12px; justify-content: space-between; }
.ml-group { align-items: center; display: flex; flex-wrap: wrap; gap: 12px 16px; font-size: 14px; }
.ml-brand, .ml-brand:visited { color: var(--ml-100); font-size: 18px; font-weight: 600; letter-spacing: .025em; text-decoration: none; }
.ml-brand:hover { color: var(--ml-100); }
.ml-status { display: inline-flex; line-height: 0; }
.ml-status img { height: 22px; width: auto; }
.ml-status:hover img { opacity: .85; }
.ml-account a, .ml-account a:visited { color: var(--ml-100); font-weight: 500; text-decoration: none; }
.ml-account a:hover { color: var(--ml-link); }

.ml-links { display: flex; flex-wrap: wrap; font-size: 14px; gap: 8px 16px; margin-top: 12px; }
.ml-links a, .ml-links a:visited, .ml-footer-links a, .ml-footer-links a:visited { color: var(--ml-100); text-decoration: none; }
.ml-links a:hover { color: var(--ml-link); }
.ml-links a.ml-current { color: var(--ml-link); }

.ml-site-footer { border-top: 1px solid var(--ml-800); margin-top: 24px; }
.ml-footer-links { display: flex; flex-wrap: wrap; font-size: 14px; gap: 16px; margin: 0 auto; max-width: 64rem; padding: 24px 16px; }
.ml-footer-links a, .ml-footer-links a:visited { color: var(--ml-500); }
.ml-footer-links a:hover { color: var(--ml-300); }

/* La bannière de phpBB fait doublon avec l'en-tête du site : on n'en garde
   que la recherche. */
.headerbar {
    background: transparent;
    border-radius: 0;
    margin-bottom: 8px;
    padding: 0;
}
.headerbar .site-description { display: none; }
.headerbar .search-header { box-shadow: none; margin-top: 0; }

/* ── Barre de navigation du forum ────────────────────────────────────── */

.navbar {
    background: var(--ml-900);
    border: 1px solid var(--ml-800);
    border-radius: 8px;
    padding: 4px 10px;
}
.navbar ul.linklist { border-top-color: var(--ml-800); }
ul.linklist > li, ul.linklist > li a, .navbar a, .navbar a:visited { color: var(--ml-300); }
ul.linklist > li a:hover, .navbar a:hover { color: var(--ml-link); }
.icon, .navbar .icon { color: var(--ml-400); }
.badge { background: var(--ml-accent); color: #fff; }
.breadcrumbs .crumb, .breadcrumbs .crumb a { color: var(--ml-300); }
.action-bar, .action-bar .pagination { color: var(--ml-400); }

/* ── Listes des forums et des sujets ─────────────────────────────────── */

.forabg, .forumbg {
    background: var(--ml-900);
    border: 1px solid var(--ml-800);
    border-radius: 8px;
    box-shadow: none;
}
.forumbg-table { background: var(--ml-900); }
li.header dt, li.header dd, li.header dt a, li.header dd a,
.forabg .header a, .forumbg .header a {
    color: var(--ml-500);
    font-family: var(--ml-font);
}
ul.topiclist li.header { border-bottom: 1px solid var(--ml-800); }
ul.forums, ul.topics, ul.topiclist.forums, ul.topiclist.topics { background: transparent; }
ul.topiclist li.row, ul.topiclist li.row dd { border-color: var(--ml-800); }
ul.topiclist dd { border-left-color: var(--ml-800); }
li.row, .bg1, .bg2, ul.topiclist li.row.bg1, ul.topiclist li.row.bg2 { background-color: var(--ml-900); }
.bg2, ul.topiclist li.row.bg2 { background-color: var(--ml-850); }
li.row:hover, ul.topiclist li.row:hover { background-color: var(--ml-800); }
li.row strong { color: var(--ml-200); }
a.forumtitle, a.topictitle, a.forumtitle:visited, a.topictitle:visited { color: var(--ml-100); }
a.forumtitle:hover, a.topictitle:hover { color: var(--ml-link); }
.list-inner, ul.topiclist dd, .lastpost, .topic-poster, .forum-description, .responsive-show { color: var(--ml-400); }
li.row .list-inner br + * , .forum-description { color: var(--ml-400); }
.reported, li.row.reported, li.row.reported:hover { background-color: #3b1219; }
.sticky, .announce { background-color: var(--ml-850); }

/* ── Panneaux, messages ──────────────────────────────────────────────── */

.panel, .post, .bg3, .navbar + .panel {
    background-color: var(--ml-900);
    border: 1px solid var(--ml-800);
    border-radius: 8px;
    color: var(--ml-200);
}
.post.bg1, .post.bg2 { background-color: var(--ml-900); }
.post.bg2 { background-color: var(--ml-850); }
.postbody, .content, .postbody .content { color: var(--ml-200); font-family: var(--ml-font); }
.postbody h3, .postbody h3 a, .first a, .postbody h3.first a { color: var(--ml-100); }
/* Message ciblé par l'ancre (#p123, retour après édition) : prosilver le passe en noir. */
.post:target .content { color: var(--ml-200); }
.post:target h3 a, .post h3 a.first-unread { color: var(--ml-100); }
.postprofile { border-left-color: var(--ml-800); color: var(--ml-400); }
.postprofile dd, .postprofile dt { color: var(--ml-400); }
.postprofile strong { color: var(--ml-300); }
.author, p.author { color: var(--ml-500); }
.signature { border-top-color: var(--ml-800); color: var(--ml-400); }
.notice, .content .notice { border-top-color: var(--ml-800); color: var(--ml-500); }
.back2top .top, .post .back2top { color: var(--ml-500); }
.divider { border-top-color: var(--ml-800); }

blockquote, blockquote blockquote {
    background-color: var(--ml-800);
    border-color: var(--ml-700);
    color: var(--ml-300);
}
blockquote cite, blockquote cite a { color: var(--ml-300); }
.codebox, .codebox code { background-color: var(--ml-950); border-color: var(--ml-700); color: var(--ml-200); }
.codebox p { border-bottom-color: var(--ml-700); color: var(--ml-400); }
.attachbox, .attach-image { background-color: var(--ml-850); border-color: var(--ml-700); }
dl.file dt, dl.file dd, .attachbox dd { color: var(--ml-400); }
.inline-attachment, .thumbnail { border-color: var(--ml-700); }
.content .postlink, .postlink { border-bottom-color: var(--ml-600); color: var(--ml-link); }

/* ── Boutons, champs ─────────────────────────────────────────────────── */

.button, a.button, .button:visited {
    background: var(--ml-800);
    border-color: var(--ml-700);
    box-shadow: none;
    color: var(--ml-200);
    font-family: var(--ml-font);
}
.button:hover, .button:focus, a.button:hover {
    background: var(--ml-700);
    border-color: var(--ml-600);
    color: var(--ml-100);
}
.button .icon, .button-secondary { color: var(--ml-300); }
.button:hover .icon { color: var(--ml-100); }
input.button1, input.button2, a.button1, a.button2, input.button3 {
    background: var(--ml-800);
    border-color: var(--ml-700);
    color: var(--ml-100);
}
input.button1, a.button1 { background: var(--ml-accent); border-color: var(--ml-accent); color: #fff; }
input.button1:hover, a.button1:hover { background: var(--ml-accent-hover); border-color: var(--ml-accent-hover); }
input.button2:hover, a.button2:hover { background: var(--ml-700); }

input.inputbox, textarea.inputbox, select, input.post, textarea, .inputbox, input.search,
fieldset.fields1 input:not([type=submit]):not([type=button]):not([type=reset]):not([type=checkbox]):not([type=radio]) {
    /* Plusieurs règles de prosilver, plus précises, peignent les champs en
       clair (connexion rapide, recherche…) : le fond sombre l'emporte partout. */
    background-color: var(--ml-900) !important;
    border-color: var(--ml-700);
    color: var(--ml-100);
}
input.inputbox:hover, textarea.inputbox:hover, .inputbox:focus, input:focus, textarea:focus, select:focus {
    background-color: var(--ml-900);
    border-color: var(--ml-accent-hover);
    color: var(--ml-100);
}
::placeholder { color: var(--ml-500); }
fieldset dt, fieldset dd, fieldset label, dl.details dt, dl.details dd, .explain, dt span, label span { color: var(--ml-300); }
/* Certains libellés du panneau de l'utilisateur gardent le texte sombre de
   prosilver (« Masquer mon statut en ligne »…) : clairs partout. */
fieldset dl dt label, .panel dl dt label, .cp-main dl dt label { color: var(--ml-200) !important; }
dl.details dt, .explain, dt span { color: var(--ml-400); }
.error, p.error, .form-error { color: #f87171; }
.successbox, .successbox p { background-color: #052e1f; border-color: #065f46; color: #a7f3d0; }
.errorbox { background-color: #3b1219; border-color: #7f1d1d; color: #fecaca; }
.rules { background-color: #3b1219; color: #fecaca; }

/* ── Menus déroulants, pagination, alertes ───────────────────────────── */

.dropdown .dropdown-contents {
    background: var(--ml-900);
    border-color: var(--ml-700);
    box-shadow: 0 10px 25px rgba(0, 0, 0, .5);
}
.dropdown .pointer { border-color: var(--ml-700) transparent; }
.dropdown .pointer-inner { border-color: var(--ml-900) transparent; }
.dropdown li, .dropdown-extended .header, .dropdown-extended .footer, .dropdown-extended ul li {
    border-color: var(--ml-800);
    color: var(--ml-300);
}
.dropdown-extended .header, .dropdown-extended .footer { background: var(--ml-850); color: var(--ml-300); }
.dropdown-extended ul li:hover, .dropdown li.separator { background: var(--ml-800); border-color: var(--ml-800); }
.notification_list p.notification-time { color: var(--ml-500); }

.pagination li a, .pagination li span {
    background: var(--ml-800);
    border-color: var(--ml-700);
    color: var(--ml-200);
}
.pagination li a:hover { background: var(--ml-700); border-color: var(--ml-600); color: var(--ml-100); }
.pagination li.active span { background: var(--ml-accent); border-color: var(--ml-accent); color: #fff; }
.pagination li.ellipsis span { background: transparent; border: 0; color: var(--ml-500); }

.phpbb_alert, #darken { background-color: var(--ml-900); border-color: var(--ml-700); color: var(--ml-200); }
#darken { background-color: #000; }
.jumpbox .dropdown li { border-color: var(--ml-800); }
.jumpbox-cat-link, .jumpbox-forum-link { color: var(--ml-200); }

/* ── Tableaux, panneau de l'utilisateur, statistiques ────────────────── */

/* Le panneau de l'utilisateur redonne à ces en-têtes un texte presque noir,
   par des règles plus précises : le gris clair l'emporte partout. */
table.table1 thead th, table.table1 thead th span, table.table1 thead th a,
table.table1 th, .cp-main table th {
    background: var(--ml-800) !important;
    color: var(--ml-300) !important;
}
ul.topiclist li.header dt, ul.topiclist li.header dd, ul.topiclist li.header dt a,
.cp-main li.header dt, .cp-main li.header dd, .panel li.header dt, .panel li.header dd {
    color: var(--ml-400) !important;
}
table.table1 tbody tr, table.table1 tbody td { background-color: var(--ml-900); border-color: var(--ml-800); color: var(--ml-200); }
table.table1 tbody tr:hover, table.table1 tbody tr.hover { background-color: var(--ml-800); }
table.table1 .bg1 { background-color: var(--ml-900); }
table.table1 .bg2 { background-color: var(--ml-850); }

.tabs .tab > a, .minitabs .tab > a { background: var(--ml-800); border-color: var(--ml-700); color: var(--ml-300); }
.tabs .tab > a:hover, .minitabs .tab > a:hover { background: var(--ml-700); color: var(--ml-100); }
.tabs .activetab > a, .tabs .activetab > a:hover, .minitabs .activetab > a { background: var(--ml-900); border-color: var(--ml-700); color: var(--ml-100); }
.cp-menu, .cp-main .panel, #cp-main .panel, .cp-mini { background-color: var(--ml-900); border-color: var(--ml-800); }
#navigation a, .navigation a { background: var(--ml-800); color: var(--ml-300); }
#navigation a:hover, .navigation a:hover, #navigation #active-subsection a, .navigation .active-subsection a {
    background: var(--ml-700);
    color: var(--ml-100);
}
.panel-container h3, .panel-container .panel h3 { border-bottom-color: var(--ml-800); }

.stat-block h3, .stat-block h3 a { color: var(--ml-200); }
.stat-block p, .stat-block { color: var(--ml-400); }
.copyright, .footer-row, .page-footer { color: var(--ml-500); }
.page-footer .navbar { margin-top: 8px; }
.username-coloured { text-shadow: none; }

/* ── Shoutbox mChat ──────────────────────────────────────────────────── */

.mchat-text, .mchat-text p { color: var(--ml-200); }
.mchat-time, .mchat-status { color: var(--ml-500); }
.mchat-message-wrapper { border-color: var(--ml-800); }
.mchat-input-control button:hover .icon { color: var(--ml-link); }

/* ── Petits écrans ───────────────────────────────────────────────────── */

@media (max-width: 700px) {
    .wrap { padding: 8px; }
    .ml-nav { padding: 12px; }
}