:root {
    /* Site font stack. Centralised here so the whole site's typography is one
       line to change; nearly every rule now reads font-family from this token
       instead of hard-coding Verdana/Arial. */
    --font-base: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Helvetica, Arial, sans-serif;
    --color-heading-primary: #566F90;
    --color-heading-secondary: #5C7A5C;
    --color-column-header: #6F6F6F;
    --color-title-grey: #6F6F6F;
    --color-row-odd: #FFFFFF;
    --color-row-even: #EEEEEE;
    --color-text-on-header: #FFFFFF;
    --color-border: #000000;
    --space-gap: 1em;
    /* Type scale: the desktop layout uses 10px for the dense data text
       (anchors, table cells, footer). Mobile overrides this token to 14px
       so all uses scale up at once without per-rule overrides. */
    --font-size-small: 10px;
    /* Caption bar (table title strip - "News", "Statistiques", etc.).
       Sized to qualify as WCAG "large text" (>=18.66px bold), so the
       darker-text-on-mid-tone palette passes the 3:1 contrast threshold. */
    --font-size-caption: 20px;
    /* Default padding for data-table cells (homepage tables, ROM detail
       <dl>, etc.). Use these tokens so cells never butt up against their
       border and so adjustments stay in one place. */
    --cell-padding-y: 3px;
    --cell-padding-x: 5px;
}

.clearfix:after {
    content: ".";
    display: block;
    clear: both;
    visibility: hidden;
    line-height: 0;
    height: 0;
}

.clearfix {
    display: inline-block;
}

/* Off-screen text for screen readers — used to give a column header a name
   when the visual design intentionally leaves that column empty (e.g. icon
   columns). Mirrors Bootstrap/Tailwind's sr-only / visually-hidden utility. */
.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

html[xmlns] .clearfix {
    display: block;
}

* html .clearfix {
    height: 1%;
}
p {
    font-size: 12px;
    font-family: var(--font-base);
    text-decoration: none;
}
form {
    margin:0;
}
a:link {
    font-size: var(--font-size-small);
    color: #000000;
    font-family: var(--font-base);
    text-decoration: none;
}
a:visited {
    font-size: var(--font-size-small);
    color: #000000;
    font-family: var(--font-base);
    text-decoration: none;
}
a:active {
    font-size: var(--font-size-small);
    color: #000000;
    font-family: var(--font-base);
    text-decoration: none;
}
a:hover {
    font-size: var(--font-size-small);
    color: #FF0000;
    text-decoration: none;
}
body {
    scrollbar-face-color: #E1D9C3;
    scrollbar-shadow-color: #000000;
    scrollbar-highlight-color: #000000;
    scrollbar-3dlight-color: #EEEEEE;
    scrollbar-darkshadow-color: #EEEEEE;
    scrollbar-track-color: #CCCCCC;
    scrollbar-arrow-color: #405080;
    font-family: Verdana,sans-serif;
    margin-top: 0px;
    margin-bottom: 0px;
    margin-left: 0px;
    margin-right: 0px;
    background-color: #92A6BE;
}
table {
    font-family: var(--font-base);
    font-size: 12px;
    border-collapse: collapse;
    border-spacing: 0px;
}
td {
    padding: 0px;
}
.bgwhite {
    background-color: #FFF;
}
td.top {
    vertical-align: top;
}
td.bottom {
    vertical-align: bottom;
}
td.detailled {
    padding-bottom: 2px;
    padding-left: 0px;
    padding-right: 0px;
    padding-top: 2px;
}
tr.pair {
    background-color: var(--color-heading-primary);
}
tr.impair {
    background-color: var(--color-heading-secondary);
}
tr.titregris {
    background-color: var(--color-title-grey);
}
tr.rompair {
    background-color: var(--color-row-odd);
    height: 16px;
}
tr.romimpair {
    background-color: var(--color-row-even);
    height: 16px;
}
td.nomEmu {
    border: 1px solid black;
    border-right: none;
    width: 100%;
    height: 20px;
    padding: 0 5px;
}
td.nomEmu, td.nomEmu a, td.nomEmu a:visited {
    font-family: var(--font-base);
    color: white;
    font-weight: bold;
    font-size: 12px;
}
td.nomEmu a:hover, td.nomEmu a:active {
    font-family: var(--font-base);
    color: #EEEEEE;
    font-weight: bold;
    font-size: 12px;
}
.categorie {
    padding: 5px;
    background: white;
}
.categorie a, .categorie a:visited {
    font-family: var(--font-base);
    color: black;
    font-weight: bold;
    font-size: 12px;
}
.categorie a:hover, .categorie a:active {
    font-family: var(--font-base);
    color: #FF0000;
    font-weight: bold;
    font-size: 12px;
}
td.tlb {
    border-top: 1px solid #000000;
    border-left: 1px solid #000000;
    border-bottom: 1px solid #000000;
    color: white;
    text-align: center;
}
td.tlbr {
    border: 1px solid #000000;

}
td.tlbr2 {
    border-top: 1px solid #000000;
    text-align: center;
}
td.tbr {
    border-top: 1px solid #000000;
    border-bottom: 1px solid #000000;
    border-right: 1px solid #000000;
    color: white;
    text-align: center;
}
td.lbr {
    border-bottom: 1px solid #000000;
    border-left: 1px solid #000000;
    border-right: 1px solid #000000;
}
td.supplinfos {
    padding: 3px;
    vertical-align: top;
    background-color: #F6F6F6;
}
td.br {
    border-bottom: 1px solid #CCCCCC;
    border-right: 1px solid #CCCCCC;
    background-color: white;
    padding: 3px;
    vertical-align: top;
    width: 100%;
}
td.r {
    border-right: 1px solid #CCCCCC;
    background-color: #F8F8F8;
    padding: 2px;
    vertical-align: bottom;
}
tr.entetes {
    background-color: var(--color-heading-primary);
    text-align: center;
    vertical-align: bottom;
    color: white;
    font-weight: bold;
    font-family: var(--font-base);
    font-size: 12px;
}
tr.entetes > th, tr.entetes > td {
    padding: 0 5px;
}
td.opendesc {
    padding: 3px;
    width: 100%;
    font-weight: bold;
}
td.opendesc a, td.opendesc a:visited {
    font-family: Verdana,sans-serif;
    color: #000;
    font-size: var(--font-size-small);
    font-weight: bold;
}
td.opendesc a:hover, td.opendesc a:active {
    font-family: Verdana,sans-serif;
    color: #FF0000;
    font-size: var(--font-size-small);
    font-weight: bold;
}
table.vueSommaire, table.article {
    border: 1px solid black;
    background-color: #FEFEFE;
    width: 100%;
}
table.vuesommairearticle {
    font-family: var(--font-base);
    border: 1px solid black;
    background-color: #FEFEFE;
    width: 100%;
    margin-top: 2em;
}
.vuesommairearticle td {
    border: 1px solid black;
    border-left: none;
    border-right: none;
}
table.vueSommaire td {
    border: 1px solid black;
}
td.version {
    padding: 3px;
    background-color: #F3F3EE;
    text-align: center;
    white-space: nowrap;
    font-family: var(--font-base);
    font-size: 11px;
}
td.description {
    padding: 3px;
    text-align: center;
    white-space: nowrap;
}
td.dl-list {
    padding-left: 6px;
    padding-right: 6px;
    text-align: center;
    white-space: nowrap;
}
a img {
    border: 0px;
}
td.commentaire {
    background-color: #F5F5F5;
    padding: 5px;
}
td.taillerom {
    font-family: var(--font-base);
    color: #405080;
    font-size: var(--font-size-small);
    height: 16px;
    text-align: right;
}
.titleleft {
    text-align: left;
    font-family: var(--font-base);
    color: white;
    width: 100%;
    font-weight: bold;
    font-size: var(--font-size-caption);
}
.titleright {
    text-align: right;
    font-family: var(--font-base);
    color: white;
    width: 100%;
    font-weight: bold;
    font-size: var(--font-size-caption);
}
.titlecenter {
    text-align: center;
    font-family: var(--font-base);
    color: white;
    width: 100%;
    height: 24px;
    font-weight: bold;
    font-size: var(--font-size-caption);
}
td.titlecenter h1 {
  font-size: inherit;
  margin: 0;
}
td.titlecenter h2 {
    font-size: inherit;
    margin: 0;
}
.titlefaq {
    font-family: var(--font-base);
    color: white;
    width: 100%;
    height: 15px;
    font-weight: bold;
    font-size: 12px;
}
h2.titlefaq {
    margin: 0;
    padding: 0 0 0 5px;
    line-height: 15px;
}
td.titlearticle {
    text-align: center;
    font-family: var(--font-base);
    color: white;
    width: 100%;
    font-weight: bold;
    font-size: 12px;
    border-bottom: 1px solid #000000;
}
td.rommissing {
    font-family: var(--font-base);
    color: #6F6F6F;
    font-size: var(--font-size-small);
    height: 16px;
    width: 100%;
}
td img {
    border: 0px;
}
td.commentaire {
    background-color: #F5F5F5;
    padding: 5px;
}
td.r a, td.r a:visited, td.supplinfos a, td.supplinfos a:visited {
    color: #405080;
    font-weight: bold;
}
td.r a:hover, td.r a:active, td.supplinfos a:hover, td.supplinfos a:active {
    color: #FF0000;
    font-weight: bold;
}
td.menuroms {
    font-family: var(--font-base);
    font-size: var(--font-size-small);
    color: #6F6F6F;
    border-right: 1px solid #000000;
    border-top: 1px solid #000000;
    border-left: 1px solid #000000;
    border-bottom: 1px solid #000000;
    text-align: center;
    vertical-align: middle;
    background-color: white;
    height: 18px;
}
td.menuroms a, td.menuroms a:visited, td.menuroms a:hover, td.menuroms a:active {
    font-family: var(--font-base);
    font-size: var(--font-size-small);
    color: #FF0000;
}
td.detail-left {
    white-space: nowrap;
    border-right: 1px solid #CCCCCC;
    background-color: #F8F8F8;
    padding: 3px;
    padding-left: 5px;
    padding-right: 5px;
}
td.detail-left a, td.detail-left a:visited {
    color: #000;
    font-weight: bold;
    display: inline-block;
    line-height: 24px;
    min-height: 24px;
}
td.detail-left a:hover, td.detail-left a:active {
    color: #FF0000;
    font-weight: bold;
}
td.detail-roms-left {
    border-right: 1px solid #CCCCCC;
    background-color: #F8F8F8;
    padding: 3px;
    padding-left: 5px;
    padding-right: 5px;
}
td.screenshot {
    border-right: 1px solid #CCCCCC;
    background-color: #F8F8F8;
    padding: 10px;
}
td.detail-right {
    width: 100%;
    padding-left: 5px;
    padding-right: 5px;
    background-color: White;
}
td.detail-right a, td.detail-right a:visited {
    font-family: var(--font-base);
    font-size: 12px;
    color: #FF0000;
}
td.detail-right a:hover, td.detail-right a:active, .attente {
    font-family: var(--font-base);
    font-size: 12px;
    color: #FF0000;
}
.article_corps {
    font-family: var(--font-base);
    background-color: white;
    padding: 10px;
    padding-bottom: 2em;
}
.article_titre {
    font-family: var(--font-base);
    background-color: var(--color-heading-primary);
    color: white;
    font-size: 15px;
    padding: 3px 10px;
    font-weight: 900;
}
.article_titre_page {
    font-family: var(--font-base);
    font-size: 12px;
    padding: 3px 10px;
    font-weight: bold;
    padding-top: 1em;
    background: white;
}
.article_pied {
    font-family: var(--font-base);
    text-align: right;
    padding-right: 5px;
    padding-bottom: 5px;
    background: white;
}
.warning {
    font-family: var(--font-base);
    font-size: 11px;
    color: #D40000;
    font-style: italic;
}
tr.article_navigation_haut td, tr.article_navigation_bas td {
    white-space: nowrap;
    text-align: center;
    background: #F8F8F8;
}
tr.article_navigation_haut td {
    border-bottom: 1px solid #CCC;
}
tr.article_navigation_bas td {
    border-top: 1px solid #CCC;
    border-bottom: 1px solid black;
}
tr.article_navigation_haut, tr.article_navigation_bas {
    height: 11px;
}
td.nav_pages {
    vertical-align: middle;
}
td.precedente, td.suivante {
    font-family: var(--font-base);
    font-size: var(--font-size-small);
    color: #6F6F6F;
    font-size: var(--font-size-small);
}
.navmenu {
    min-height: 22px;
    line-height: 22px;
    background-color: #FFF;
    font-family: var(--font-base);
    color: black;
    font-size: 12px;
    padding: 0 3px;
    border: 1px solid black;
    box-sizing: border-box;
}
nav.navmenu {
    margin-bottom: var(--space-gap);
}
.navmenu a, .navmenu a:visited {
    font-family: var(--font-base);
    color: #405080;
    font-size: 12px;
    font-weight: bold;
}
.navmenu a:hover, .navmenu a:active {
    font-family: var(--font-base);
    color: #6F6F6F;
    font-size: 12px;
    font-weight: bold;
}
td.bluecenter {
    font-family: var(--font-base);
    color: var(--color-heading-primary);
    font-weight: bold;
    font-size: 12px;
    text-align: center;
}
td.precedente {
    text-align: left;
    padding-left: 2px;
}
td.suivante {
    text-align: right;
    padding-right: 2px;
}
.detail-download {
    font-size: 12px;
    color: #444444
}
td.download {
    padding: 5px;
    background: white;
}
td.identError {
    color: red;
    font-weight: bold;
}
td.pub {
    padding: 5px;
    background: white;
    text-align: center;
    vertical-align: middle;
}
td.compteur-left {
    padding: 3px;
    background: #F8F8F8;
    border-right: 1px solid #CCCCCC;
}
td.compteur-right {
    padding: 3px;
    background: white;
}
table.compteur {
    border: 1px solid #000000;
}
td.menu-detail-left {
    height: 16px;
    border-right: 1px solid #CCCCCC;
    background-color: #F8F8F8;
    padding: 3px;
    padding-left: 5px;
    padding-right: 5px;
    white-space: nowrap;
    text-align: center;
}
td.menu-detail-left img {
  max-height: 16px;
  max-width: 16px;
  width: auto;
  height: auto;
}
td.menu-detail-left--empty {
  width: 26px;
}
td.menu-detail-left a, td.menu-detail-left a:visited, td.detail-left a, td.detail-left a:visited {
    font-family: var(--font-base);
    color: #000;
    font-size: var(--font-size-small);
    font-weight: bold;
}
td.menu-detail-left a:hover, td.menu-detail-left a:active, td.detail-left a:hover, td.detail-left a:active {
    font-family: var(--font-base);
    color: red;
    font-size: var(--font-size-small);
    font-weight: bold;
}
td.menu-detail-right {
    font-family: var(--font-base);
    font-size: var(--font-size-small);
    padding-left: 5px;
    padding-right: 5px;
    background-color: White;
    text-align: center;
}
td.menu-detail-right2 {
    font-family: var(--font-base);
    font-size: var(--font-size-small);
    padding-left: 5px;
    padding-right: 5px;
    background-color: White;
    text-align: center;
    border-right: 1px solid black;
}
td.menu-detail-emuls-utils {
    font-family: var(--font-base);
    font-size: var(--font-size-small);
    padding-left: 5px;
    padding-right: 5px;
    background-color: White;
    text-align: left;
}
td.menu-detail-emuls-utils a, td.menu-details-emuls-utils a:visited {
    font-family: Verdana,sans-serif;
    color: #000;
    font-size: var(--font-size-small);
    font-weight: bold;
}
td.menu-detail-emuls-utils a:hover, td.menu-details-emuls-utils a:active {
    font-family: var(--font-base);
    color: red;
    font-size: var(--font-size-small);
    font-weight: bold;
}
td.menu-titrevert {
    background-color: var(--color-heading-secondary);
    font-family: var(--font-base);
    font-size: var(--font-size-small);
    color: #FFF;
    padding-left: 3px;
    padding-right: 3px;
    text-align: center;
    border: 1px solid black;
    border-left: none;
    border-right: none;
}
td.menu-titrebleu {
    background-color: var(--color-heading-primary);
    font-family: var(--font-base);
    font-size: var(--font-size-small);
    color: #FFF;
    padding-left: 3px;
    padding-right: 3px;
    text-align: center;
    border: 1px solid black;
    border-left: none;
    border-right: none;
}
td.menu-top {
    background-color: var(--color-column-header);
    font-family: var(--font-base);
    font-size: 12px;
    color: #FFF;
    font-weight: bold;
    padding-left: 3px;
    padding-right: 3px;
    text-align: center;
}
.menu-rubriques {
    background-color: var(--color-column-header);
    font-family: var(--font-base);
    font-size: var(--font-size-small);
    color: #FFF;
    padding-left: 5px;
    padding-right: 5px;
    text-align: center;
    border-bottom: 1px solid black;
    border-top: 1px solid black;
    height: 11px;
    font-weight: normal;
}
.news-quiquand {
    margin: 0;
    background-color: var(--color-column-header);
    font-family: var(--font-base);
    font-size: var(--font-size-small);
    color: #FFF;
    padding-left: 5px;
    padding-right: 5px;
    text-align: right;
}
td.menu-rubriques2 {
    background-color: var(--color-column-header);
    font-family: var(--font-base);
    font-size: var(--font-size-small);
    color: #FFF;
    padding-left: 5px;
    padding-right: 5px;
    text-align: center;
    border-bottom: 1px solid black;
    border-top: 1px solid black;
    height: 11px;
}
td.menu-rubriques3 {
    background-color: var(--color-column-header);
    font-family: var(--font-base);
    font-size: var(--font-size-small);
    color: #FFF;
    padding-left: 5px;
    padding-right: 5px;
    text-align: right;
    border-bottom: 1px solid black;
    height: 11px;
}
td.menu-rubriques4 {
    background-color: var(--color-column-header);
    font-family: var(--font-base);
    font-size: var(--font-size-small);
    color: #FFF;
    padding-left: 5px;
    padding-right: 5px;
    text-align: right;
    border-bottom: 1px solid black;
    border-top: 1px solid black;
    height: 11px;
}
td.menu-rubriques5 {
    background-color: var(--color-column-header);
    font-family: var(--font-base);
    font-size: var(--font-size-small);
    color: #FFF;
    padding-left: 5px;
    padding-right: 5px;
    text-align: center;
    border-bottom: 1px solid black;
    border-right: 1px solid black;
    height: 11px;
}
td.listedats {
    font-family: var(--font-base);
    font-size: var(--font-size-small);
    color: #000;
    text-align: center;
    white-space: nowrap;
    padding-left: 3px;
    padding-right: 3px;
}
td.listedats a, td.listedats a:visited {
    font-family: var(--font-base);
    color: #000;
    font-size: var(--font-size-small);
    font-weight: bold;
}
td.listedats a:hover, td.listedats a:active {
    font-family: var(--font-base);
    color: red;
    font-size: var(--font-size-small);
    font-weight: bold;
}
td.listedatsnom, td.menu-top-roms {
    font-family: var(--font-base);
    font-size: var(--font-size-small);
    color: #000;
    padding-left: 7px;
    padding-right: 3px;
}
td.listedatsnom a, td.listedatsnom a:visited, td.menu-top-roms a, td.menu-top-roms a:visited, td.accueil-partenaires a, td.accueil-partenaires a:visited {
    font-family: var(--font-base);
    color: #000;
    font-size: var(--font-size-small);
    font-weight: bold;
}
td.menu-news-titre a,
td.accueil-partenaires a,
td.accueil-partenaires-right a,
td.listedatsnom a,
td.menu-top-roms a,
td.menu-detail-emuls-utils a,
td.menu-news-date a {
    display: inline-block;
    line-height: 24px;
    min-height: 24px;
}
td.listedatsnom a:hover, td.listedatsnom a:active, td.menu-top-roms a:hover, td.listedatsnom a:active, td.accueil-partenaires a:hover, td.accueil-partenaires a:active {
    font-family: var(--font-base);
    color: red;
    font-size: var(--font-size-small);
    font-weight: bold;
}
td.menu-top-roms-right {
    font-family: var(--font-base);
    font-size: var(--font-size-small);
    color: #000;
    padding-left: 3px;
    padding-right: 3px;
    text-align: center;
}
td.listestats-left {
    font-family: var(--font-base);
    font-size: var(--font-size-small);
    color: #000;
    padding-left: 5px;
    text-align: left;
}
td.listestats-right {
    font-family: var(--font-base);
    font-size: var(--font-size-small);
    color: #000;
    padding-right: 5px;
    text-align: right;
}
td.resumearticles {
    font-family: var(--font-base);
    font-size: var(--font-size-small);
    color: #000;
    padding-left: 5px;
    padding-right: 5px;
}
td.historique {
    padding: 5px;
    background: white;
}
td.historique a, td.historique a:visited {
    font-family: var(--font-base);
    color: #000;
    font-size: var(--font-size-small);
    font-weight: bold;
}
td.historique a:hover, td.historique a:active {
    font-family: var(--font-base);
    color: red;
    font-size: var(--font-size-small);
    font-weight: bold;
}
td.misslist-font, td.top-font {
    font-family: var(--font-base);
    font-size: var(--font-size-small);
    color: #000;
    padding: 0 6px;
}
td.top-font a, td.top-font a:visited {
    font-family: var(--font-base);
    color: #000;
    font-size: var(--font-size-small);
    font-weight: bold;
}
td.top-font a:hover, td.top-font a:active {
    font-family: var(--font-base);
    color: red;
    font-size: var(--font-size-small);
    font-weight: bold;
}
td.top-font-right {
    font-family: var(--font-base);
    font-size: var(--font-size-small);
    color: #000;
    text-align: center;
}
td.historique a:hover, td.historique a:active {
    font-family: var(--font-base);
    color: red;
    font-size: var(--font-size-small);
    font-weight: bold;
}
table.vote, table.misslist, table.top {
    background-color: #F4F4F4;
    width: 100%;
    height: 100%;
}
table.vote td, table.misslist td, table.top td {
    vertical-align: top;
}
table.menu-emulateurs, table.menu-utilitaires, table.menu-stats, table.menu-ajouts, table.menu-partenaires, table.menu-news, table.menu-roms {
    border: 1px solid black;
    width: 273px;
    border-collapse: collapse;
    margin-top: 1em;
}
table.menu-roms, table.accueil-articles, table.accueil-news {
    border: 1px solid black;
    width: 100%;
    border-collapse: collapse;
}
table.menu-top, table.menu-misslist {
    border: 1px solid black;
    width: 95%;
    border-collapse: collapse;
}
tr.recherchepages td {
    text-align: center;
    padding-left: 3px;
  padding-right: 3px;
}
/* Console image box (machine hub) — a <figure>, not a layout table. */
.machine-image {
    margin: 0;
    border: 1px solid var(--color-border);
    background: #fff;
    text-align: center;
    padding: 5px;
    box-sizing: border-box;
}
.machine-image img {
    max-width: 100%;
    height: auto;
    vertical-align: middle;
}
.machine-image__historique {
    text-align: right;
    font-weight: bold;
    padding: 4px 3px 0;
}
tr.menu-newspair {
    height: 24px;
    background-color: var(--color-row-odd);
}
tr.menu-newsimpair {
    height: 24px;
    background-color: var(--color-row-even);
}
td.menu-news-date {
    font-family: var(--font-base);
    font-size: var(--font-size-small);
    color: red;
    text-align: center;
    padding-right: 3px;
}
td.menu-news {
    font-family: var(--font-base);
    font-size: var(--font-size-small);
    color: #000;
    text-align: center;
    padding-right: 3px;
    white-space: nowrap;
}
td.menu-news-titre a, td.menu-news-titre a:visited {
    font-family: var(--font-base);
    color: #000;
    font-size: var(--font-size-small);
    font-weight: bold;
}
td.menu-news-titre a:hover, td.menu-news-titre a:active {
    font-family: var(--font-base);
    color: red;
    font-size: var(--font-size-small);
    font-weight: bold;
}
td.rss-explication {
    font-family: var(--font-base);
    color: #000;
    font-size: 12px;
    padding: 5px;
    background: white;
}
td.rss-explication a, td.rss-explication a:visited {
    font-family: Verdana,sans-serif;
    color: #000;
    font-size: var(--font-size-small);
    font-weight: bold;
}
td.rss-explication a:hover, td.rss-explication a:active {
    font-family: Verdana,sans-serif;
    color: #FF0000;
    font-size: var(--font-size-small);
    font-weight: bold;
}
td.rss-logo {
    padding-left: 5px;
    padding-right: 5px;
    background-color: White;
    text-align: center;
    width: 38px;
}
td.rss-logo img {
    max-width: none;
}
td.rss-right {
    background-color: White;
}
.news-contenu {
    background-color: White;
    padding: 3px;
    font: 12px var(--font-base);
}
.news-titre {
    margin: 0;
    text-align: left;
    font-family: var(--font-base);
    color: white;
    font-weight: bold;
    font-size: var(--font-size-caption);
    line-height: 28px;
    padding: 0 5px;
}
td.news-list-sujet, td.articles-list-sujet {
    padding: 3px;
    background-color: #FFF;
    text-align: left;
    white-space: nowrap;
    font-family: var(--font-base);
    font-size: 11px;
}
td.news-list-sujet a, td.news-list-sujet a:visited, td.articles-list-sujet a, td.articles-list-sujet a:visited {
    font-family: Verdana,sans-serif;
    color: #000;
    font-size: var(--font-size-small);
    font-weight: bold;
}
td.news-list-sujet a:hover, td.news-list-sujet a:active, td.articles-list-sujet a:hover, td.articles-list-sujet a:active {
    font-family: Verdana,sans-serif;
    color: #FF0000;
    font-size: var(--font-size-small);
    font-weight: bold;
}
td.news-list-auteur, td.articles-list-auteur, td.articles-list-pages {
    padding: 3px;
    background-color: #F3F3EE;
    text-align: center;
    white-space: nowrap;
    font-family: var(--font-base);
    font-size: var(--font-size-small);
}
td.news-list-date, td.articles-list-date, td.articles-list-type {
    padding: 3px;
    background-color: #FFF;
    text-align: center;
    white-space: nowrap;
    font-family: var(--font-base);
    font-size: var(--font-size-small);
}
td.news-list-navigation-precedente, td.articles-list-navigation-precedente {
    text-align: left;
    font-family: var(--font-base);
    font-size: var(--font-size-small);
    color: #6F6F6F;
    font-size: var(--font-size-small);
    white-space: nowrap;
    background: #F8F8F8;
    border-bottom: 1px solid black;
    border-left: 1px solid black;
    padding: 2px;
}
td.news-list-navigation-suivante, td.articles-list-navigation-suivante {
    text-align: right;
    font-family: var(--font-base);
    font-size: var(--font-size-small);
    color: #6F6F6F;
    font-size: var(--font-size-small);
    white-space: nowrap;
    background: #F8F8F8;
    border-bottom: 1px solid black;
    border-right: 1px solid black;
    padding: 2px;
}
td.news-detailled-navigation-precedente {
    text-align: left;
    font-family: var(--font-base);
    font-size: var(--font-size-small);
    color: #6F6F6F;
    font-size: var(--font-size-small);
    white-space: nowrap;
    padding: 2px;
}
td.news-detailled-navigation-suivante {
    text-align: right;
    font-family: var(--font-base);
    font-size: var(--font-size-small);
    color: #6F6F6F;
    font-size: var(--font-size-small);
    white-space: nowrap;
    padding: 2px;
}
tr.menu-table {
    height: 0%;
}
table.menu-accueil {
    font-family: var(--font-base);
    font-size: var(--font-size-small);
    border: 1px solid black;
    background: white;
    width: 273px;
    height: 48px;
}
td.menu-accueil-left {
    padding: 5px;
}
table.menu-accueil a, table.menu-accueil a:visited {
    font-family: var(--font-base);
    font-size: var(--font-size-small);
    font-weight: bold;
}
table.menu-accueil a:hover, table.menu-accueil a:active {
    font-family: var(--font-base);
    font-size: var(--font-size-small);
    font-weight: bold;
    color: red;
}
/* Poll result bar — CSS fill instead of a stretched 1px image. */
.poll-bar {
    display: inline-block;
    vertical-align: middle;
    width: 60px;
    height: 10px;
    background: #d7ddd7;
    border: 1px solid #b6c0b6;
    overflow: hidden;
}
.poll-bar__fill {
    display: block;
    height: 100%;
    background: var(--color-heading-secondary);
}
.poll-bar__pct {
    margin-left: 6px;
    vertical-align: middle;
}
/* Sondage (poll) — a fieldset + lists, not a table. The bordered box, green
   "Sondage" bar, question sub-bar and result bars reproduce the old look. */
.poll {
    box-sizing: border-box;
    border: 1px solid black;
    background: white;
    font-family: var(--font-base);
    font-size: var(--font-size-small);
}
.poll__box {                 /* <fieldset> reset */
    margin: 0;
    padding: 0;
    border: 0;
    min-width: 0;
}
.poll__legend {              /* <legend> reset so the bars span full width */
    display: block;
    width: 100%;
    padding: 0;
}
.poll__head,
.poll__legend,
.poll__heading,
.poll__question {
    box-sizing: border-box;
}
.poll__heading,
.poll__question {
    display: block;
    text-align: center;
    border-bottom: 1px solid black;
}
.poll__heading {
    background: var(--color-heading-secondary);
    color: white;
    font-weight: bold;
    font-size: var(--font-size-caption);
    line-height: 24px;
}
.poll__question {
    background: var(--color-column-header);
    color: white;
    line-height: 1.4;
    padding: 2px 5px;
}
.poll__options,
.poll__results {
    list-style: none;
    margin: 0;
    padding: 0;
}
.poll__options li:nth-child(odd),
.poll__results li:nth-child(odd) {
    background: #F8F8F8;
}
.poll__option {
    display: flex;
    align-items: center;
    gap: 6px;
    /* 7px block padding spaces the 13px radios ≥24px apart (target-size). */
    padding: 7px 5px;
}
.poll__results li {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 7px 5px;
}
.poll__label {
    flex: 1 1 auto;
}
.poll-bar__pct {
    flex: 0 0 auto;
}
.poll__actions {
    margin: 0;
    padding: 3px;
    text-align: center;
    border-top: 1px solid black;
}
.poll__actions a,
.poll__actions a:visited {
    display: inline-block;
    line-height: 24px;
    min-height: 24px;
    color: #000;
    font-weight: bold;
}
.poll__actions a:hover,
.poll__actions a:focus {
    color: red;
}
.poll__actions button {
    font: inherit;
    cursor: pointer;
}
/* Download / official-site links inserted from the news editor */
.news-link {
    display: flex;
    align-items: center;
    gap: 4px;
    width: fit-content;
    padding: 2px;
    font-family: var(--font-base);
    font-size: var(--font-size-small);
    line-height: 24px;
    min-height: 24px;
}
.news-link::before {
    content: "";
    flex: 0 0 auto;
    width: 16px;
    height: 16px;
    background-color: currentColor;
    -webkit-mask: var(--news-link-icon) center / contain no-repeat;
    mask: var(--news-link-icon) center / contain no-repeat;
}
.news-link--download {
    --news-link-icon: url(/interface/images/picto/download.svg);
}
.news-link--home {
    --news-link-icon: url(/interface/images/picto/external-link.svg);
}
/* Qualified with `a` to outrank the global a:link / a:visited colour rules. */
a.news-link,
a.news-link:visited {
    color: #405080;
}
a.news-link:hover,
a.news-link:active {
    color: red;
}
table.news-detailled-navigation, table.recherche-navigation {
    border: 1px solid black;
    background-color: #FFF;
    width: 100%;
    height: 20px;
}
td.accueil-partenaires-right {
    font-family: var(--font-base);
    font-size: var(--font-size-small);
    color: #888888;
    text-align: right;
}
td.accueil-news-rss {
    text-align: right;
}
/* In-set ROM filter: live client-side filtering of the current letter's
   results (see initRomFilter in script.js). */
.rom-filter {
  margin: 12px 0;
  text-align: center;
}
.rom-filter__label {
  font-weight: bold;
  margin-right: 6px;
}
.rom-filter__input {
  width: 280px;
  max-width: 100%;
  padding: 6px 10px;
  border: 1px solid var(--color-border);
  border-radius: 4px;
  font: inherit;
}
.rom-filter__empty {
  text-align: center;
  font-style: italic;
  padding: 16px;
}
ul.screenshots {
  position: relative;
  z-index: 1;
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, 175px);
  gap: 10px;
  justify-content: center;
  /* Bottom-align items so screenshots of differing heights line up along the
     bottom of each row (ragged tops) rather than the top. */
  align-items: end;
}
ul.screenshots li {
  margin: 0;
  padding: 0;
}
ul.screenshots a {
  transition: all .2s ease-out;
  display: block;
  text-align: center;
  border: 1px solid #CDCDCD;
  background: #EEE;
  color: inherit;
  text-decoration: none;
}
ul.screenshots .screenshots__name {
  display: block;
  padding: 3px 2px 5px 2px;
  font-weight: bold;
}
ul.screenshots img {
  width: 100%;
  height: auto;
  vertical-align: bottom;
  border-radius: 3px;
}
ul.screenshots a:hover, ul.screenshots a:focus {
  transform: scale(2);
  box-shadow: 0 0 30px black;
  border-width: 0;
}
ul.screenshots a:hover img, ul.screenshots a:focus img {
  border-radius: 0;
}
ul.screenshots li:nth-child(3n+1) a:hover,
ul.screenshots li:nth-child(3n+1) a:focus {
  transform: scale(2) translateX(30px);
}
ul.screenshots li:nth-child(3n) a:hover,
ul.screenshots li:nth-child(3n) a:focus {
  transform: scale(2) translateX(-30px);
}
#selectAllerA {
  float: right;
  clear: both;
  margin-top: 10px;
}
.presentation {
  text-align: center;
  margin: var(--space-gap) 0;
}
.presentation span {
  display: block;
  margin-bottom: 5px;
  font-weight: bold;
}
.presentation a img {
  border: 1px outset black;
  border-radius: 4px;
}
.presentation a.selected img {
  border-width: 2px;
  border-color: blue;
  border-style: inset;
}

/* ROM list letter pagination — semantic <nav><ul><li><a>... */
.rom-letters {
    margin: var(--space-gap) 0;
    border: 1px solid var(--color-border);
    background-color: white;
    padding: 4px 8px;
}
.rom-letters ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0 6px;
    font-family: var(--font-base);
    font-size: var(--font-size-small);
    color: #6F6F6F;
}
.rom-letters li + li::before {
    content: "|";
    color: #6F6F6F;
    margin-right: 6px;
}
.rom-letters a,
.rom-letters a:visited {
    color: #D40000;
    text-decoration: none;
    display: inline-block;
    padding: 0 6px;
    line-height: 24px;
    min-width: 24px;
    text-align: center;
}
.rom-letters a:hover {
    text-decoration: underline;
}
.rom-letters a.selected {
    font-weight: bold;
}

.tutoriels {
    background: white;
    margin-bottom: 30px;
    border: 1px solid black;
    width: 100%;
}
.tutoriels h2 {
    margin: 0px;
    font-weight: bold;
    font-size: 100%;
    padding: 3px 5px;
    border-bottom: 1px solid black;
    color: white;
    background-color: var(--color-heading-primary);
}
.tutoriels>div {
    padding: 5px 10px;
    clear: both;
    border-top: 1px dotted #CCC;
}
.tutoriels div h3 {
    margin: 0px 0px 3px 0px;
    font-size: 100%;
}
.tutoriels div p {
    margin: 0px;
    line-height: 130%;
    text-align: justify;
}
.tutoriels div img {
    float: left;
    width: 100px;
    margin: 0px 10px 5px 0px;
}
.tutoriels div:nth-child(odd) img {
    float: right;
    margin: 0px 0px 5px 10px;
}
h2.emulateurs,
.machine-page__title {
    margin: 0px 0px 10px 0px;
    padding-bottom: 5px;
    font-size: 120%;
    font-family: Verdana;
    color: #333;
    font-weight: normal;
    border-bottom: 1px dotted #CCC;
}
.machine-page__title {
    margin-top: var(--space-gap);
}
.random_articles {
    border: 1px solid black;
    margin-bottom: 15px;
    width: 560px;
    position: relative;
}
.random_articles h2 {
    margin: 0;
    background: var(--color-heading-primary);
    color: white;
    border-bottom: 1px solid black;
    text-align: center;
    font-size: 12px;
    padding: 1px;
}
.random_articles ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  display: flex;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;
}
.random_articles ul::-webkit-scrollbar {
  display: none;
}
@media (prefers-reduced-motion: reduce) {
  .random_articles ul {
    scroll-behavior: auto;
  }
}
.random_articles a:hover {
  color: inherit;
}
.random_articles li {
  flex: 0 0 100%;
  box-sizing: border-box;
  scroll-snap-align: start;
  padding: 10px 0 20px 0;
  white-space: normal;
  vertical-align: top;
  position: relative;
}
.random_articles li a {
  display: block;
  height: 100%;
  width: 96%;
  margin: 0 2%;
  overflow: hidden;
}
.random_articles li img,
.random_articles li .random_articles__cover {
  max-width: 40%;
  max-height: 200px;
  height: auto;
  display: inline-block;
  vertical-align: middle;
}
.random_articles li .random_articles__cover {
  width: 40%;
  height: 200px;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}
.random_articles li a>div.article_intro {
  width: 57%;
  display: inline-block;
  vertical-align: middle;
  margin-left: 10px;
  margin-top: 17px;
}
.random_articles li a>div.article_intro .title {
  display: block;
  font-weight: bold;
  font-size: 130%;
  line-height: 1.5;
  margin-bottom: 10px;
}
.random_articles li a>div.article_intro .title h3 {
  font-size: inherit;
  display: inline-block;
  margin: 0;
}
.random_articles li a>div.article_intro .resume {
  display: block;
  font-size: 110%;
  line-height: 1.3;
  text-align: justify;
}
.random_articles li a>div.article_intro .title .author {
  font-size: 80%;
  color: #333;
  font-weight: normal;
}
.random_articles li.mea_image {
  height: 229px;
  width: 560px;
  padding: 0;
}
.random_articles li.mea_image a {
  width: 100%;
  margin: 0;
  background: black;
}
.random_articles li.mea_image a img,
.random_articles li.mea_image a .random_articles__cover {
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  position: absolute;
  top: 0;
  left: 0;
  background-size: cover;
  background-position: center;
}
.random_articles li.mea_image a>div.article_intro {
  position: absolute;
  left: 0;
  right: 0;
  margin: 0 0 0 0;
  width: auto;
  padding: 5px 20px 20px 20px;
  bottom: 0;
  color: white;
  background: rgba(0, 0, 0, .5);
}
.random_articles li.mea_image a>div.article_intro .title .author {
  color: #EEEEEE;
}
.random_articles li a>div.type {
  display: none;
}
.random_articles li a>div.type {
  display: inline-block;
  position: absolute;
  right: 0;
  top: 10px;
  background: #55F linear-gradient(#55F, #88F) no-repeat scroll 0 0;
  font-size: 135%;
  text-transform: uppercase;
  font-weight: bold;
  font-family: var(--font-base);
  padding: 2px 30px 2px 10px;
  border-radius: 3px 0 0 3px;
  color: white;
  text-shadow: 1px 1px 1px black;
}
.random_articles li a>div.type.test {
  background: #55F linear-gradient(#55F, #88F) no-repeat scroll 0 0;
}
.random_articles li a>div.type.tutoriel {
    background: #3A3 linear-gradient(#3A3, #5B5) no-repeat scroll 0 0;
}
.random_articles li a>div.type.autre {
    background: #AA0 linear-gradient(#AA0, #DD2) no-repeat scroll 0 0
}
.random_articles li a>div.type.historique {
    background: #B33 linear-gradient(#B33, #F55) no-repeat scroll 0 0;
}
.random_articles__dots {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  display: flex;
  justify-content: center;
  gap: 14px;
  padding: 10px 0;
}
.random_articles__dot {
  width: 12px;
  height: 12px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: #869791;
  opacity: 0.5;
  cursor: pointer;
  transition: opacity 0.2s;
}
.random_articles__dot:hover,
.random_articles__dot.is-active {
  opacity: 1;
}
body {
  margin: 0;
  padding: 0;
}
div.body {
  width: 809px;
  margin: auto;
  position: relative;
  /* Page layout grid. The single .nav-shell (links + machine list) is
     display:contents on desktop, so its parts drop into the header band and the
     sidebar via grid-template-areas. On mobile (mobile.css) .body is a plain
     block and .nav-shell becomes the slide-in "Menu" drawer. */
  display: grid;
  grid-template-columns: 102px 560px 28px 121px;
  grid-template-rows: 180px auto auto;
  grid-template-areas:
    "header  header  header  header"
    "gutter  content gap     sidebar"
    "footer  footer  footer  footer";
}
/* The "fond" texture sits behind the content, starting just under the header.
   The header band is 180px, but the texture overlaps its bottom by 24px so it
   reaches right up to the header (the pre-refactor layout pulled div.main up by
   margin-top:-24px for the same effect); 180-24 = 156px. Painted on ::after at
   z-index:-1 so it stays behind the content. */
div.body::after {
  content: '';
  position: absolute;
  inset: 156px 0 0 0;
  background: transparent url('/interface/images/interface/fond.avif') repeat-y fixed 50% 0;
  z-index: -1;
}
/* Left-edge "Planetemu.net" watermark (was div.main:before). */
div.body::before {
  content: '';
  position: absolute;
  width: 18px;
  height: 140px;
  left: 3px;
  /* Matches the pre-refactor div.main:before (div.main top 156 + 10 = 166). */
  top: 166px;
  background: transparent url('/interface/images/interface/planetemu.avif') no-repeat scroll 0 0;
  z-index: 1;
}
div.body > header {
  grid-area: header;
  height: 180px;
  /* No margin:auto here — on a grid item it cancels the stretch and shrinks the
     header to its (zero, all-absolute) content width, hiding the banner. */
  margin: 0;
  background: transparent url('/interface/images/interface/header.avif') no-repeat scroll 0 0;
  position: relative;
  z-index: 2;
}
/*
header a.logo:before {
  content: '';
  display: inline-block;
  position: absolute;
  width: 2px;
  height: 2px;
  background: red;
  top: 72px;
  left: 78px;
}
*/
header a.logo {
  display: inline-block;
  position: absolute;
  top: -18px;
  left: 130px;
  transform-origin: 78px 80px;
  transition: all .2s ease-out;
}
header a.logo img {
  border: 0;
}
header a.logo:hover {
  transform: rotate(-36deg);
}
/* Site nav links. On desktop .nav-shell is display:contents, so .site-nav is a
   body grid item; place it over the header banner, bottom-left, as before. */
.site-nav {
  grid-area: header;
  align-self: end;
  justify-self: start;
  z-index: 3;
  display: table;
  margin: 0 0 32px 130px;
  padding: 0;
  width: 560px;
  list-style: none;
}
.site-nav li {
  display: table-cell;
  height: 100%;
  line-height: 25px;
}
.site-nav li a, .site-nav li a:link, .site-nav li a:visited {
  display: block;
  padding: 0px 6px;
  height: 100%;
  color: white;
  text-transform: uppercase;
  font-size: 13px;
  text-shadow: 0 0 1px black;
  transition: all .1s linear;
}
.site-nav li a:hover, .site-nav li a:focus {
  text-shadow: 0 0 10px white;
  transform: scale(1.1);
}
/* Mobile-only "Menu" drawer controls. Hidden on desktop, where the site nav
   sits in the header and the machine list in the sidebar. mobile.css reveals
   them and turns the machine list into the drawer (with the nav moved in). */
.menu-toggle,
.menu-backdrop,
.menu-close {
  display: none;
}
/* Desktop: .main and .nav-shell have no box — their children become items of
   the .body grid (content, machines, footer placed via grid-template-areas). */
div.main {
  display: contents;
}
.nav-shell {
  display: contents;
}
div.main > .content {
  grid-area: content;
  margin-top: -9px;
  /* The content and the (usually taller) machine sidebar share this grid row.
     Without this, a grid item defaults to align-self:stretch — content would be
     stretched to the sidebar's height and its own auto rows would stretch to
     fill (align-content:normal == stretch for grids), blowing the gaps between
     home/section blocks far past the 14px grid gap. Top-align so each keeps its
     natural height. */
  align-self: start;
}
nav.machines {
  grid-area: sidebar;
  margin-top: -4px;
  width: 121px;
  align-self: start;
}
nav.machines dl dt {
  position: relative;
  line-height: 21px;
  padding-right: 9px;
  background-color: #1b1b1b;
  background: #1b1b1b linear-gradient(#4e4e4e, #1b1b1b) no-repeat scroll 0 0;
  color: white;
  text-transform: uppercase;
  font-size: 13px;
  text-shadow: 1px 1px 1px black;
  font-family: var(--font-base);
  border: 1px solid black;
}
nav.machines dl dd {
  margin: 0;
}
nav.machines dl dt img {
  position: absolute;
  left: 4px;
  bottom: -2px;
}
nav.machines dl dt span {
  display: block;
  text-align: right;
}
nav.machines dl dd ul:before {
  content: '';
  display: block;
  background-color: #acbdac;
  height: 4px;
  border-style: solid;
  border-color: black;
  border-width: 0 0 1px 0;
}
nav.machines dl dd ul {
  margin: 0 0 40px 0;
  padding: 0;
  border: 1px solid black;
  list-style-type: none;
  background-color: white;
  background-color: rgba(255, 255, 255, .8);
}
nav.machines dl dd ul:after {
  content: '';
  display: block;
  background-color: var(--color-title-grey);
  height: 4px;
  border-top: 1px solid black;
  margin-top: 10px;
}
nav.machines dl dd ul li {
  margin-left: 7px;
  padding-left: 12px;
  line-height: 13px;
  font-weight: bold;
  background-image: url('/interface/images/interface/puce.avif');
  background-repeat: no-repeat;
  background-position: 1px 50%;
}
nav.machines dl dd ul li a {
  display: inline-block;
  line-height: 24px;
  min-height: 24px;
}
div.main footer {
  grid-area: footer;
  margin: 0 60px 0 67px;
  padding: 150px 0px 15px 0;
  font-size: var(--font-size-small);
  text-align: center;
  vertical-align: bottom;
  background: transparent url('/interface/images/interface/sol.avif') no-repeat scroll 0 bottom;
  line-height: 16px;
}
div.main footer img {
  vertical-align: middle;
}
div.body>div.pub {
  position: absolute;
  z-index: 1;
  top: 18px;
  left: 297px;
  height: 60px;
  width: 488px;
  padding-left: 17px;
  /* background: transparent url('/interface/images/interface/oiseau.avif') no-repeat scroll 0 50%; */
}
header .randomimage {
  width: 86px;
  height: 72px;
  background-repeat: no-repeat;
  position: absolute;
  left: 28px;
  top: 19px;
}
.content div.pub {
  background: white;
  text-align: center;
  border: 1px solid black;
}
div.article {
  margin-top: 15px;
  border: 1px solid black;
  background: white;
  font-size: 12px;
  font-family: var(--font-base);
}
div.article .heading {
  text-align: center;
  font-weight: bold;
  color: white;
  border-bottom: 1px solid black;
  background-color: var(--color-heading-primary);
}
div.article .heading h1 {
  font-size: inherit;
  display: inline;
  margin: 0;
}
div.article .pagination a {
  font-size: inherit;
  color: black;
}
div.article .pagination {
  list-style-type: none;
  margin: 0;
  padding: 0;
  display: table;
  width: 100%;
  color: #6F6F6F;
}
div.article .pagination.top {
  border-bottom: 1px solid #CCC;
}
div.article .pagination.bottom {
  border-top: 1px solid #CCC;
}
div.article .pagination li {
  display: table-cell;
  padding: 2px 5px;
  font-size: var(--font-size-small);
  font-family: var(--font-base);
  background-color: #F8F8F8;
}
div.article .pagination li.next {
  text-align: right;
}
div.article>h2 {
  margin: 15px 20px;
  font-size: inherit;
}
div.article>.contenu {
  padding: 10px;
}
div.article>.contenu img {
  max-width: 100%;
}
div.article>.author {
  display: block;
  margin-top: 24px;
  padding: 5px;
  text-align: right;
}

.zapier {
    border: 1px dotted black;
    border-radius: 5px;
    background: rgb(83, 83, 83);
    color: white;
    line-height: 110%;
    padding: 10px;
}
.zapier .img {
    float: left;
    margin: 25px 15px;
    position: relative;
}
.zapier .img img.avatar {
    position: absolute;
    top: 0;
    left: 0;
}
.zapier img.photo {
    border-radius: 10px;
    border: 1px solid white;
}
.zapier img.avatar {
    visibility: hidden;
}
.zapier:hover img.avatar {
    visibility: visible;
}
.zapier a, .zapier a:link .zapier a:visited {
    font-size: inherit;
    font-weight: bold;
    color: #1e90ff;
}
hr.spacer {
    clear: both;
    visibility: hidden;
}

.rom-organization {
    font-family: "Tahoma", sans-serif;
    font-size: 14px;
    margin: 10px;
}
.rom-organization ul {
    list-style-type: none;
    padding: 0;
}
.rom-organization li {
    padding-left: 35px;
    line-height: 30px;
}
.rom-organization .rom-organization--files--directory {
    background: url('/interface/images/interface/folder.avif') no-repeat 0 0 / 30px 24px;
}
.rom-organization .rom-organization--files--zip {
    background: url('/interface/images/interface/zip.avif') no-repeat 0 0 / 32px 27px;
}
.rom-organization .rom-organization--files--file {
    background: url('/interface/images/interface/file_bin.avif') no-repeat 0 0 / 26px 31px;
}
.user-manual {
    border: 1px solid black;
    margin-top: 10px;
    background: white;
}
.user-manual h2 {
    margin: 0;
    font-size: 12px;
    font-weight: bold;
    text-align: center;
    background-color: var(--color-heading-primary);
    border-bottom: 1px solid black;
    color: white;
    font-family: var(--font-base);
}
.user-manual p {
    margin: 10px;
}

/* =========================================================================
   ROM detail page — title + info <dl>, screenshot, download, user-manual.
   Replaces the old nested-table layout with semantic <article><section>.
   Alternating odd/even header tint via :nth-of-type on .rom-detail__card.
   ========================================================================= */
.rom-detail {
    display: flex;
    flex-direction: column;
    gap: var(--space-gap);
    margin: var(--space-gap) 0;
}
.rom-detail__card {
    border: 1px solid var(--color-border);
    background-color: white;
}
.rom-detail__card > h1,
.rom-detail__card > h2 {
    margin: 0;
    padding: 0 5px;
    text-align: center;
    color: white;
    font: bold 12px var(--font-base);
    line-height: 20px;
}
.rom-detail__card:nth-of-type(odd) > h1,
.rom-detail__card:nth-of-type(odd) > h2 {
    background-color: var(--color-heading-primary);
}
.rom-detail__card:nth-of-type(even) > h1,
.rom-detail__card:nth-of-type(even) > h2 {
    background-color: var(--color-heading-secondary);
}
.rom-detail__card-body {
    padding: 5px;
    font: 12px var(--font-base);
}

/* Info dl: 2-column grid (label | value) with a thin divider column tint */
.rom-detail__info {
    margin: 0;
    display: grid;
    grid-template-columns: max-content 1fr;
    gap: 0;
}
.rom-detail__info > dt,
.rom-detail__info > dd {
    margin: 0;
    padding: 5px;
}
.rom-detail__info > dt {
    background-color: #F8F8F8;
    border-right: 1px solid #CCCCCC;
    white-space: nowrap;
}

/* "Afficher" toggle: native <details> replaces opencontent() JS reveal */
.rom-detail__contents > summary {
    cursor: pointer;
    color: #D40000;
    width: max-content;
}
.rom-detail__contents[open] > summary {
    margin-bottom: 5px;
}
.rom-detail__contents[open] > summary::after {
    content: " (masquer)";
    color: #888;
}
.rom-detail__files {
    border: 1px solid var(--color-border);
    border-collapse: collapse;
    width: auto;
}
.rom-detail__files thead {
    background-color: var(--color-heading-secondary);
    color: white;
}
.rom-detail__files thead th {
    padding: 0 8px;
    font: bold 12px var(--font-base);
    line-height: 18px;
}
.rom-detail__files tbody td {
    padding: 2px 8px;
    font: var(--font-size-small) var(--font-base);
}
.rom-detail__files-name { font-weight: bold; }

/* Screenshot section: image on the left, note on the right */
.rom-detail__screenshot-img {
    display: block;
    width: 100%;
    height: auto;
    /* ROM screenshots are pixel art — nearest-neighbour scaling keeps the
       chunky-pixel look when fitted to the container. */
    image-rendering: pixelated;
}

/* Download section: centered call-to-action */
.rom-detail__download-body {
    text-align: center;
}
.rom-detail__download-body > p {
    margin: 0 0 8px;
}
.rom-detail__download-buttons {
    margin-top: 12px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}
.pinned-news {
    border: 1px solid black;
    margin-bottom: 10px;
    box-shadow: 0 0 20px #46596E;
}
.pinned-news--dontmiss {
    margin: 0;
    font-size: 12px;
    font-weight: bold;
    text-align: center;
    background-color: var(--color-heading-primary);
    border-bottom: 1px solid black;
    color: white;
    font-family: var(--font-base);
}
.pinned-news--news {
    max-height: 200px;
    overflow: auto;
    margin-bottom: 10px;
    border-bottom: 1px dotted #555555;
}
.pinned-news--news:last-child {
    margin-bottom: 0;
    border-bottom: 0;
}
.pinned-news--news .pinned-news--news--title {
    margin: 0;
    text-align: center;
    font-size: 14px;
    color: #46596E;
}
.pinned-news--news .pinned-news--news--content {
    font-size: 12px;
    padding: 3px;
}
.article__screenlist {
    margin: 10px 0;
    position: relative;
    font-size: 0;
}
.article__screenlist > * {
    font-size: 12px;
}
.article__screenlist__screen {
    display: inline-block;
    vertical-align: top;
    width: 50%;
    box-sizing: border-box;
}
.article__screenlist__screen--left {
    padding-right: 5px;
}
.article__screenlist__screen--right {
    padding-left: 5px;
}
.article__screenlist__screen__image {
    display: block;
    margin: 3px;
    max-width: 100%;
    height: auto;
}
.article__screenlist__screen__description {
    display: block;
    text-align: center;
}
.article__screenlist.zoomed .article__screenlist__screen {
    visibility: hidden;
}
.article__screenlist__zoom {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%) scale(2);
    border: 5px solid white;
    box-shadow: 0 0 10px black;
    z-index: 1;
}
.news-list {
    color: #666666;
    font-style: italic;
}
.clone-list {
    list-style-position: inside;
    text-align: left;
}
.clone-list--clone.current {
    font-weight: bold;
}
.pub .link {
    display: block;
}
.pub .promo {
    font-size: 12px;
    color: #4646f3;
    text-align: right;
    padding: 0 5px;
}
.pub img {
    max-width: 100%;
}

/* Apply consistent cell padding to every homepage / machine-page table —
   the legacy per-class rules (`td.menu-news { padding-right: 3px }`, etc.)
   only set one side, so content was butting up against borders on the
   others. This rule sits above the per-class declarations in specificity
   and uses the shared tokens. Covers both the homepage container
   (.content--accueil) and the machine-page grid (.machine-page). */
.content--accueil tbody td,
.content--accueil tbody th,
.machine-page tbody td,
.machine-page tbody th {
    padding: var(--cell-padding-y) var(--cell-padding-x);
}

div.main > .content--accueil {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
    align-items: start;
}
/* The grid row-gap is the only spacing between home blocks; zero any per-block
   vertical margins (e.g. the carousel's margin-bottom, the poll form's margin)
   so the visible gap matches the `gap` property and isn't doubled up. */
.content--accueil > * {
    margin-top: 0;
    margin-bottom: 0;
}
.content--accueil > .random_articles,
.content--accueil > .pinned-news,
.content--accueil > .accueil-news,
.content--accueil > .accueil-articles,
.content--accueil > .home-popular {
    grid-column: 1 / -1;
}
.content--accueil > .menu-ajouts,
.content--accueil > .menu-stats,
.content--accueil > .menu-partenaires,
.content--accueil > .poll {
    width: 100%;
    margin-top: 0;
}

/* Popular games — a low-key, full-width horizontal screenshot strip.
   Deliberately understated (small muted title, no panel chrome) so it reads as
   a teaser rather than a heading. */
.home-popular {
    grid-column: 1 / -1;
    margin-top: 0;
}
.home-popular__title {
    margin: 0 0 4px;
    font: normal 11px/1.4 var(--font-base);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #555;
}
.home-popular__strip {
    list-style: none;
    margin: 0;
    padding: 0 0 8px;
    display: flex;
    gap: 8px;
    overflow-x: auto;
    scroll-snap-type: x proximity;
    -webkit-overflow-scrolling: touch;
}
.home-popular__strip > li {
    flex: 0 0 auto;
    width: 150px;
    scroll-snap-align: start;
}
.home-popular__strip a {
    display: block;
    border: 1px solid #cdcdcd;
    background: #eee;
    color: inherit;
    text-decoration: none;
    transition: border-color .15s;
}
.home-popular__strip a:hover,
.home-popular__strip a:focus {
    border-color: var(--color-heading-primary);
}
.home-popular__strip img {
    display: block;
    width: 100%;
    /* All cards share the tallest screenshot's height (set per-render in PHP);
       shorter/wider shots fill it via cover, keeping their aspect ratio. */
    height: var(--strip-img-h, 112px);
    object-fit: cover;
}
.home-popular__name {
    display: block;
    padding: 3px 5px;
    font-size: 11px;
    font-weight: bold;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}


/* Machine hub: one grid, sections are direct children — no row/col wrappers.
   The wide sections (ROMs, articles, news) span both columns; the rest auto-
   place two-up (image | popular, then emulators | utilities). */
.machine-page {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
    align-items: start;
    margin-top: var(--space-gap);
}
.machine-page > table {
    width: 100%;
    margin-top: 0;
}
.machine-page > .menu-roms,
.machine-page > .menu-news,
.machine-page > .machine-articles {
    grid-column: 1 / -1;
}
/* Articles section on the machine hub: the shared .articles-feed cards under a
   title bar that matches the other sections' (green) <caption> strips. */
.machine-articles__title {
    color: white;
    text-align: center;
    font-family: var(--font-base);
    font-weight: bold;
    font-size: var(--font-size-caption);
    line-height: 24px;
    border: 1px solid var(--color-border);
    background-color: var(--color-heading-secondary);
}
.machine-articles .articles-feed {
    margin-top: 0;
}
.machine-articles__all {
    margin: 12px 0 0;
    text-align: center;
}
.machine-articles__all a,
.machine-articles__all a:visited {
    display: inline-block;
    padding: 7px 18px;
    background-color: var(--color-heading-secondary);
    color: #fff;
    border: 1px solid var(--color-border);
    font: bold 13px var(--font-base);
    text-decoration: none;
}
.machine-articles__all a:hover,
.machine-articles__all a:active {
    background-color: #4a634a;
    color: #fff;
}

/* =========================================================================
   Home panels — semantic news / latest-additions lists.
   Replace the old <table class="accueil-news"> and <table class="menu-ajouts">,
   which used table markup for what are really lists. The panel keeps the
   familiar titled-box look (coloured title bar + bordered box + zebra rows)
   without the table semantics or the redundant column-header row. Grid
   placement (.accueil-news full-width, .menu-ajouts half-width) is inherited
   from the rules above, which still match these classes.
   ========================================================================= */
.home-panel {
    border: 1px solid var(--color-border);
    background: white;
    font-family: var(--font-base);
}
.content--accueil > .home-panel {
    margin-top: 0;
}
.home-panel__title {
    margin: 0;
    color: var(--color-text-on-header);
    text-align: center;
    font-weight: bold;
    font-size: var(--font-size-caption);
    line-height: 24px;
    border-bottom: 1px solid var(--color-border);
}
.home-panel--primary .home-panel__title { background-color: var(--color-heading-primary); }
.home-panel--secondary .home-panel__title { background-color: var(--color-heading-secondary); }

.home-list {
    list-style: none;
    margin: 0;
    padding: 0;
}
.home-list__item:nth-child(odd) { background-color: var(--color-row-odd); }
.home-list__item:nth-child(even) { background-color: var(--color-row-even); }

/* News rows: bold title link on the left, a meta strip (type · date · author)
   pushed to the right. */
.home-news__item {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 2px 10px;
    /* 7px block padding keeps adjacent title links ≥24px apart (WCAG/Lighthouse
       target-size); the links themselves are only ~12px tall. */
    padding: 7px var(--cell-padding-x);
    font-size: 12px;
}
.home-news__link {
    flex: 1 1 55%;
    font-weight: bold;
}
.home-news__meta {
    flex: 0 0 auto;
    margin-left: auto;
    display: flex;
    gap: 10px;
    color: #555;
}
.home-news__date.is-today {
    color: #c00;
    font-weight: bold;
}

/* Latest-additions rows: OS icon + name link + date. */
.home-ajouts__item {
    display: flex;
    align-items: center;
    gap: 8px;
    /* See .home-news__item: keep the name links ≥24px apart for target-size. */
    padding: 7px var(--cell-padding-x);
    font-size: 12px;
}
.home-ajouts__icon { flex: 0 0 auto; }
.home-ajouts__link { flex: 1 1 auto; font-weight: bold; }
.home-ajouts__date { flex: 0 0 auto; color: #555; }

/* Semantic table styling: <caption>, <thead>, and zebra striping via :nth-child.
   Replaces the old td-as-caption + tr.pair/impair/rompair/romimpair patterns
   on accueil and machine-page tables. Other pages still use the row classes. */
.accueil-news caption,
.accueil-articles caption,
.menu-ajouts caption,
.menu-stats caption,
.menu-partenaires caption,
.menu-news caption,
.menu-emulateurs caption,
.menu-utilitaires caption,
.menu-roms caption,
.menu-top caption,
.menu-misslist caption {
    color: white;
    text-align: center;
    font-family: var(--font-base);
    font-weight: bold;
    font-size: var(--font-size-caption);
    height: 24px;
    line-height: 24px;
    border: 1px solid black;
    border-bottom: none;
}
.accueil-news caption,
.accueil-articles caption,
.menu-news caption,
.menu-roms caption,
.menu-misslist caption {
    background-color: var(--color-heading-primary);
}
.menu-ajouts caption,
.menu-stats caption,
.menu-partenaires caption,
.menu-emulateurs caption,
.menu-utilitaires caption,
.menu-top caption {
    background-color: var(--color-heading-secondary);
}
.accueil-news tbody > tr:nth-child(odd),
.menu-news tbody > tr:nth-child(odd),
.menu-stats tbody > tr:nth-child(odd),
.menu-roms tbody > tr:nth-child(odd) {
    background-color: var(--color-row-odd);
    height: 16px;
}
.accueil-news tbody > tr:nth-child(even),
.menu-news tbody > tr:nth-child(even),
.menu-stats tbody > tr:nth-child(even),
.menu-roms tbody > tr:nth-child(even) {
    background-color: var(--color-row-even);
    height: 16px;
}
.menu-partenaires tbody > tr:nth-child(odd),
.menu-top tbody > tr:nth-child(odd),
.menu-misslist tbody > tr:nth-child(odd) {
    background-color: var(--color-row-even);
    height: 16px;
}
.menu-partenaires tbody > tr:nth-child(even),
.menu-top tbody > tr:nth-child(even),
.menu-misslist tbody > tr:nth-child(even) {
    background-color: var(--color-row-odd);
    height: 16px;
}
.accueil-articles tbody > tr:nth-child(4n+1),
.accueil-articles tbody > tr:nth-child(4n+2) {
    background-color: var(--color-row-odd);
    height: 16px;
}
.accueil-articles tbody > tr:nth-child(4n+3),
.accueil-articles tbody > tr:nth-child(4n) {
    background-color: var(--color-row-even);
    height: 16px;
}
.accueil-articles .articles-list-auteur {
    background-color: transparent;
}

/* =========================================================================
   Emulateurs / Utilitaires — organize form, detailed view, summary view.
   Detailed view: <ul.emu-detailled> > <li.emu-item> with a colored header
   (alternating odd/even tint) and a body grid (description | meta | links).
   ========================================================================= */
.emu-organize,
.articles-organize {
    margin: var(--space-gap) 0;
}
.emu-organize fieldset,
.articles-organize fieldset {
    border: 1px solid var(--color-border);
    background-color: #fefefe;
    display: grid;
    grid-template-columns: auto auto;
    gap: 5px 10px;
    align-items: center;
    padding: 8px 12px;
    width: max-content;
}
.emu-organize legend,
.articles-organize legend {
    background-color: var(--color-column-header);
    color: white;
    padding: 2px 10px;
    font: bold 12px var(--font-base);
}
.emu-organize__radios {
    display: flex;
    gap: 12px;
    align-items: center;
}
.emu-organize__radios label {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    min-height: 24px;
}
.emu-organize__radios input[type="radio"] {
    width: 16px;
    height: 16px;
    margin: 4px;
}
.emu-organize select {
    min-height: 24px;
    padding: 2px 4px;
}

.emu-bios-warning {
    margin: var(--space-gap) 0;
    color: red;
}
.emu-bios-warning a {
    color: red;
    text-decoration: underline;
}

/* Detailed list: stacked cards with a colored header bar */
.emu-detailled {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-gap);
}
.emu-item {
    border: 1px solid var(--color-border);
    background-color: white;
}
.emu-item__head {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 0 5px;
    min-height: 22px;
    color: white;
    font-family: var(--font-base);
    font-weight: bold;
    font-size: 12px;
}
.emu-detailled > .emu-item:nth-child(odd) .emu-item__head {
    background-color: var(--color-heading-primary);
}
.emu-detailled > .emu-item:nth-child(even) .emu-item__head {
    background-color: var(--color-heading-secondary);
}
.emu-item__name {
    flex: 1;
    margin: 0;
    font: inherit;
    text-align: left;
}
.emu-item__name a,
.emu-item__name a:visited {
    color: white;
    text-decoration: none;
}
.emu-item__name a:hover,
.emu-item__name a:active {
    color: red;
}
.emu-item__os {
    vertical-align: middle;
}
.emu-item__dlcount {
    color: white;
}

.emu-item__body {
    display: grid;
    grid-template-columns: 1fr auto;
    grid-template-areas:
        "desc meta"
        "links links";
    padding: 3px;
    gap: 6px;
    font-family: Verdana, sans-serif;
    font-size: 11px;
}
.emu-item__desc {
    grid-area: desc;
    padding: 3px;
}
.emu-item__meta {
    grid-area: meta;
    padding: 3px;
    background-color: #F6F6F6;
    text-align: right;
}
.emu-item__meta > a {
    display: inline-block;
    margin-top: 4px;
}
.emu-meta {
    margin: 0;
    font-family: Verdana, sans-serif;
    font-size: 11px;
    display: grid;
    grid-template-columns: auto auto;
    gap: 0 6px;
    justify-content: end;
}
.emu-meta dt,
.emu-meta dd {
    margin: 0;
    white-space: nowrap;
}
.emu-links {
    grid-area: links;
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    justify-content: flex-end;
    gap: 16px;
}
.emu-links li {
    display: flex;
    align-items: center;
    gap: 4px;
}

/* ROM list (cached pages) */
.rom-list {
    width: 100%;
    border: 1px solid var(--color-border);
    border-collapse: collapse;
}
.rom-list thead tr {
    background-color: var(--color-heading-primary);
}
.rom-list thead th {
    padding: 0 5px;
}
.rom-list tbody > tr:nth-child(odd) {
    background-color: var(--color-row-odd);
}
.rom-list tbody > tr:nth-child(even) {
    background-color: var(--color-row-even);
}
.rom-list-name {
    width: 100%;
    padding: 0 5px;
}
.rom-list .taillerom {
    white-space: nowrap;
    padding: 0 5px;
}

/* Shared popup panels (vote, recherche) */
.popup-page {
    background-color: #F4F4F4;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
}
.popup-panel {
    width: 80%;
    border: 1px solid var(--color-border);
    background: #fff;
}
.popup-panel > h2 {
    margin: 0;
    background-color: var(--color-heading-primary);
    color: var(--color-text-on-header);
    text-align: center;
    font-family: var(--font-base);
    font-size: 12px;
    font-weight: bold;
    height: 15px;
    line-height: 15px;
}
.vote-details {
    margin: 0;
    padding: 5px;
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 5px 10px;
}
.vote-details dt,
.vote-details dd {
    margin: 0;
}
.vote-details dt {
    white-space: nowrap;
    font-weight: bold;
}
.vote-form {
    display: flex;
    align-items: center;
    gap: 8px;
    border-top: 1px solid var(--color-border);
}
.vote-foot {
    margin: 0;
    text-align: center;
    border-top: 1px solid var(--color-border);
}
.search-form {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 8px 10px;
    align-items: center;
}
.search-form > label,
.search-form-label {
    white-space: nowrap;
    font-weight: bold;
}
.search-rubriques {
    display: flex;
    flex-direction: column;
}
.search-form-actions {
    grid-column: 1 / -1;
    display: flex;
    justify-content: center;
    gap: 10px;
}
.mail-form {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 8px 10px;
    align-items: start;
}
.mail-form > label {
    white-space: nowrap;
    font-weight: bold;
    padding-top: 3px;
}
.mail-form textarea {
    width: 100%;
    box-sizing: border-box;
    font-family: var(--font-base);
    font-size: 12px;
}
.mail-form-actions {
    grid-column: 1 / -1;
    display: flex;
    justify-content: center;
    gap: 10px;
}
.rss-section {
    border: 1px solid black;
    border-collapse: collapse;
    width: 100%;
    margin-bottom: 1em;
}
.rss-section caption {
    color: white;
    text-align: center;
    font-family: var(--font-base);
    font-weight: bold;
    font-size: var(--font-size-caption);
    height: 24px;
    line-height: 24px;
    border: 1px solid black;
    border-bottom: none;
}
.rss-page > .rss-section:nth-of-type(odd) caption {
    background-color: var(--color-heading-primary);
}
.rss-page > .rss-section:nth-of-type(even) caption {
    background-color: var(--color-heading-secondary);
}
.news-detailled-list {
    display: flex;
    flex-direction: column;
    gap: var(--space-gap);
}
.news-detailled-item {
    border: 1px solid var(--color-border);
    background-color: white;
}
.news-detailled-list > .news-detailled-item:nth-of-type(odd) .news-titre {
    background-color: var(--color-heading-primary);
}
.news-detailled-list > .news-detailled-item:nth-of-type(even) .news-titre {
    background-color: var(--color-heading-secondary);
}

/* News list: filter/view form. Two-column grid for label/select pairs. */
.news-organize {
    margin: var(--space-gap) 0;
}
.news-organize fieldset {
    border: 1px solid var(--color-border);
    background-color: #fefefe;
    display: grid;
    grid-template-columns: auto auto;
    gap: 5px 10px;
    align-items: center;
    padding: 8px 12px;
    width: max-content;
}
.news-organize legend {
    background-color: var(--color-column-header);
    color: white;
    padding: 2px 10px;
    font: bold 12px var(--font-base);
}

/* =========================================================================
   Search results page (rubrique=roms|emulateurs|utilitaires|articles|news).
   Replaces the raw nested-table layout with semantic sections per group.
   ========================================================================= */
.search-header {
    margin: var(--space-gap) 0;
}
.search-header h1 {
    margin: 0 0 4px;
    font: bold 22px var(--font-base);
    color: #333;
}
.search-header__meta {
    margin: 0;
    font: var(--font-size-small) var(--font-base);
    color: #1a1a1a;
}
.search-empty {
    margin: var(--space-gap) 0;
    text-align: center;
    color: #666;
}
.search-results {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-gap);
}
.search-group {
    border: 1px solid var(--color-border);
    background-color: white;
}
.search-group__title {
    margin: 0;
    padding: 0 8px;
    background-color: var(--color-heading-primary);
    color: white;
    font: bold 12px var(--font-base);
    line-height: 22px;
    display: flex;
    justify-content: space-between;
    gap: 10px;
}
.search-results > .search-group:nth-of-type(even) .search-group__title {
    background-color: var(--color-heading-secondary);
}
.search-group__items {
    list-style: none;
    margin: 0;
    padding: 0;
}
.search-result {
    padding: 6px 8px;
    border-bottom: 1px solid #EEEEEE;
    font: var(--font-size-small) var(--font-base);
    display: grid;
    grid-template-columns: 1fr auto auto;
    align-items: center;
    gap: 8px;
}
.search-group__items > .search-result:last-child {
    border-bottom: none;
}
.search-group__items > .search-result:nth-child(even) {
    background-color: #F8F8F8;
}
.search-result__title {
    margin: 0;
    font-size: var(--font-size-small);
    font-weight: bold;
}
.search-result__icon {
    vertical-align: middle;
}
.search-result__size,
.search-result__date,
.search-result__author {
    color: #555;
    white-space: nowrap;
}
/* Articles search: stacked title + excerpt (no per-group grouping) */
.search-results--articles {
    border: 1px solid var(--color-border);
    background-color: white;
    gap: 0;
}
.search-results--articles > .search-result {
    display: block;
    padding: 10px 12px;
}
.search-results--articles > .search-result:nth-child(even) {
    background-color: #F8F8F8;
}
.search-results--articles .search-result__title {
    font: bold 14px var(--font-base);
    margin: 0 0 4px;
}
.search-results--articles .search-result__excerpt {
    margin: 0;
    color: #444;
}
/* Pagination strip — extends shared nav.pagination with page numbers. */
.search-pagination__pages {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 8px;
    justify-content: center;
    align-items: center;
    padding: 2px 6px;
}
.search-pagination__pages > a,
.search-pagination__pages > strong {
    display: inline-block;
    padding: 2px 4px;
    font-family: var(--font-base);
    font-size: var(--font-size-small);
    line-height: 24px;
    min-width: 24px;
    text-align: center;
}
.search-pagination__pages > strong {
    color: var(--color-heading-primary);
}

/* Prev/next pagination — shared layout for news/articles/roms screenshot lists.
   Uses flex with space-between so the "previous" link stays on the left and
   "next" stays on the right; the .next selector ensures alignment even when
   one of the two is missing. */
.news-pagination,
.articles-pagination,
nav.pagination {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: var(--space-gap) 0;
    background: #F8F8F8;
    border: 1px solid var(--color-border);
}
.news-pagination > *,
.articles-pagination > *,
nav.pagination > * {
    padding: 2px 6px;
    font-family: var(--font-base);
    font-size: var(--font-size-small);
}
nav.pagination > .next {
    margin-left: auto;
}
.news-pagination__disabled,
.articles-pagination__disabled,
.pagination__disabled {
    color: #6F6F6F;
}

/* Articles feed — a vertical list of horizontal "media" cards: a small cover
   (or a colour-coded type swatch when an article has none) on the left, then
   the type chip / title / summary / byline on the right. Replaced the old
   6-column sortable table; sorting now lives in the "Organiser" <select>. */
.articles-feed {
    list-style: none;
    margin: var(--space-gap) 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.articles-card {
    position: relative; /* anchors the stretched title link's ::after overlay */
    display: flex;
    gap: 12px;
    border: 1px solid var(--color-border);
    background-color: white;
    padding: 10px 12px;
}
.articles-card:hover {
    background-color: #F8F8F4;
}
.articles-card__media {
    flex: 0 0 auto;
}
.articles-card__cover,
.articles-card__swatch {
    display: block;
    width: 120px;
    height: 90px;
    object-fit: cover;
    border: 1px solid var(--color-border);
}
/* Colour-coded fallback for the ~75% of articles with no cover image. */
.articles-card__swatch {
    display: grid;
    place-items: center;
    font: bold 40px var(--font-base);
    color: #fff;
    background-color: #6F6F6F;
}
.articles-card--test .articles-card__swatch       { background-color: #2D6A4F; }
.articles-card--tutoriel .articles-card__swatch   { background-color: #B45309; }
.articles-card--historique .articles-card__swatch { background-color: #5B4B8A; }
.articles-card--autre .articles-card__swatch      { background-color: #6F6F6F; }
.articles-card__body {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0; /* lets the summary ellipsis instead of forcing card width */
}
/* Type chip */
.articles-card__type {
    align-self: flex-start;
    padding: 1px 7px;
    border-radius: 10px;
    font: bold 10px var(--font-base);
    text-transform: uppercase;
    letter-spacing: .03em;
    color: #fff;
    background-color: #6F6F6F;
}
.articles-card--test .articles-card__type       { background-color: #2D6A4F; }
.articles-card--tutoriel .articles-card__type   { background-color: #B45309; }
.articles-card--historique .articles-card__type { background-color: #5B4B8A; }
.articles-card--autre .articles-card__type      { background-color: #6F6F6F; }
.articles-card__title {
    margin: 1px 0 0;
    font: bold 15px var(--font-base);
    line-height: 1.25;
}
.articles-card__link,
.articles-card__link:visited {
    color: var(--color-heading-primary);
    text-decoration: none;
}
.articles-card__link:hover {
    text-decoration: underline;
}
/* Stretched-link: the title anchor's overlay makes the whole card clickable,
   while the author link below opts back above it to stay independently usable. */
.articles-card__link::after {
    content: "";
    position: absolute;
    inset: 0;
}
.articles-card__summary {
    margin: 0;
    font: 12px/1.4 var(--font-base);
    color: #444;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.articles-card__meta {
    margin: 2px 0 0;
    font: var(--font-size-small) var(--font-base);
    color: #6F6F6F;
}
.articles-card__author {
    position: relative; /* sit above the stretched title overlay */
    z-index: 1;
}
a.articles-card__author,
a.articles-card__author:visited {
    color: #566F90;
}
.articles-card__dot {
    margin: 0 4px;
}
.contacts-card {
    border: 1px solid black;
    margin-bottom: 1em;
}
.contacts-card > h2 {
    margin: 0;
    color: white;
    text-align: center;
    font-family: var(--font-base);
    font-weight: bold;
    font-size: var(--font-size-caption);
    height: 24px;
    line-height: 24px;
}
.contacts-page > .contacts-card:nth-of-type(odd) > h2 {
    background-color: var(--color-heading-primary);
}
.contacts-page > .contacts-card:nth-of-type(even) > h2 {
    background-color: var(--color-heading-secondary);
}
.contacts-card-body {
    padding: 5px;
}
.contacts-card--member .contacts-card-body {
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: stretch;
    padding: 0;
}
.contacts-card__avatar-cell {
    padding: 5px;
    background-color: #F8F8F8;
    border-right: 1px solid #CCCCCC;
    /* The avatar img inside can shrink (via the global img{max-width:100%}),
       so the cell width adapts; the cell still stretches vertically to fill
       the row when the description is taller than the avatar. */
}
.contacts-card__avatar {
    display: block;
    max-width: 100%;
    height: auto;
}
.contacts-card__text {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 5px;
    background-color: #FFFFFF;
}
.contacts-card__text > p {
    margin: 0;
}
.contacts-card__actions {
    text-align: right;
}
.faq-card {
    border: 1px solid black;
    margin-bottom: 1em;
}
.faq-card > h2 {
    margin: 0;
    color: white;
    font-family: var(--font-base);
    font-weight: bold;
    font-size: var(--font-size-caption);
    height: 28px;
    line-height: 28px;
    text-align: left;
    padding: 0 5px;
}
.faq-page--questions > .faq-card:nth-of-type(odd) > h2 {
    background-color: var(--color-heading-secondary);
}
.faq-page--questions > .faq-card:nth-of-type(even) > h2 {
    background-color: var(--color-heading-primary);
}
.faq-page--index > .faq-card:nth-of-type(odd) > h2 {
    background-color: var(--color-heading-primary);
}
.faq-page--index > .faq-card:nth-of-type(even) > h2 {
    background-color: var(--color-heading-secondary);
}
.faq-card-body {
    padding: 5px;
}
.faq-rubriques {
    margin: 0;
    padding-left: 1.2em;
}
.faq-rubriques > li {
    margin-bottom: 0.3em;
}

/* =========================================================================
   Search <dialog>
   Replaces the legacy window.open() popup with a native modal. Styled to
   match the .popup-panel look used by other site dialogs.
   ========================================================================= */
.search-dialog {
    padding: 0;
    border: 1px solid var(--color-border);
    background: white;
    color: black;
    width: min(440px, 92vw);
    max-height: 90vh;
    font-family: var(--font-base);
    font-size: 14px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
}
.search-dialog::backdrop {
    background: rgba(0, 0, 0, 0.5);
}

/* Generic fetch-into-dialog (missing-ROM list, contact mail form). */
.fetch-dialog {
    padding: 0;
    border: 1px solid var(--color-border);
    background: white;
    color: black;
    width: min(640px, 92vw);
    max-height: 88vh;
    overflow: auto;
    font-family: var(--font-base);
    font-size: 14px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
}
.fetch-dialog::backdrop {
    background: rgba(0, 0, 0, 0.5);
}
.fetch-dialog__close {
    position: sticky;
    top: 0;
    margin-left: auto;
    display: block;
    background: var(--color-heading-primary);
    color: var(--color-text-on-header);
    border: 0;
    width: 36px;
    height: 36px;
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
}
.fetch-dialog__body {
    padding: 12px;
}
.fetch-dialog__msg {
    padding: 16px;
    text-align: center;
}
/* The fetched fragments reuse .popup-panel / .mail-form; let the form fields
   fill the dialog width. */
.fetch-dialog__body .mail-form input,
.fetch-dialog__body .mail-form textarea {
    width: 100%;
    box-sizing: border-box;
}
.search-dialog__form {
    margin: 0;
    display: flex;
    flex-direction: column;
    max-height: 90vh;
}
.search-dialog__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: var(--color-heading-primary);
    color: var(--color-text-on-header);
    padding: 6px 6px 6px 12px;
}
.search-dialog__header h2 {
    margin: 0;
    font: bold 14px var(--font-base);
}
.search-dialog__close {
    background: transparent;
    border: 0;
    color: var(--color-text-on-header);
    font-size: 22px;
    line-height: 1;
    padding: 4px 10px;
    cursor: pointer;
}
.search-dialog__body {
    padding: 12px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    overflow-y: auto;
}
.search-dialog__field {
    display: grid;
    grid-template-columns: 90px 1fr;
    align-items: center;
    gap: 8px;
}
.search-dialog__field > span {
    font-weight: bold;
}
.search-dialog__field input,
.search-dialog__field select {
    font: inherit;
    padding: 8px 10px;
    border: 1px solid #999;
    border-radius: 3px;
    width: 100%;
    box-sizing: border-box;
}
.search-dialog__rubriques {
    border: 1px solid #ccc;
    border-radius: 3px;
    padding: 8px 12px;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.search-dialog__rubriques legend {
    font-weight: bold;
    padding: 0 4px;
}
.search-dialog__rubriques label {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 4px 2px;
    cursor: pointer;
}
.search-dialog__rubriques input[type="radio"] {
    margin: 0;
}
.search-dialog__actions {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    padding: 12px;
    border-top: 1px solid #ccc;
}
.search-dialog__actions button {
    font: inherit;
    padding: 8px 16px;
    border: 1px solid #999;
    background: #f3f3f3;
    color: #000;
    border-radius: 3px;
    cursor: pointer;
}
.search-dialog__actions .search-dialog__submit {
    background: #405080;
    border-color: #405080;
    color: #FFFFFF;
    font-weight: bold;
}
.search-dialog__actions .search-dialog__submit:hover,
.search-dialog__actions .search-dialog__submit:focus-visible {
    background: #2F3D62;
    border-color: #2F3D62;
}