*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
    --bg:        #0d0d10;
    --surface:   #16161b;
    --raised:    #22222a;
    --border:    rgba(255,255,255,.05);
    --border-hi: rgba(255,255,255,.09);
    --text:      #e6e6ea;
    --muted:     #8b8b96;
    --faint:     #55555f;
    --accent:    #8079c9;
    --accent-hi: #8f88d6;
    --red:       #e5484d;
    --r:         12px;
    --r-sm:      7px;
    --shadow:    0 1px 2px rgba(0,0,0,.4), 0 8px 24px rgba(0,0,0,.28);
}

html { background: var(--bg); }

a { color: var(--accent-hi); text-decoration-color: rgba(143,136,214,.4); }
a:hover { color: var(--text); text-decoration-color: currentColor; }

body {
    font-family: 'Montserrat', system-ui, sans-serif;
    background: var(--bg);
    color: var(--text);
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 48px 20px 80px;
}

/* ─── HEADER ─────────────────────────────────────────────────── */
.site-header {
    width: 100%;
    max-width: 1160px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 56px;
}

.header-right {
    display: flex;
    align-items: center;
    gap: 16px;
}

/* shared button base, reused by search/generate/download/tutorial/tour */
.btn {
    border-radius: var(--r-sm);
    font-family: inherit;
    font-weight: 650;
    cursor: pointer;
    transition: background .15s, color .15s, opacity .15s;
}

.btn-fill { background: var(--accent); color: #0d0d10; border: none; }
.btn-fill:hover { background: var(--accent-hi); }

.btn-outline { background: var(--raised); color: var(--text); border: none; }
.btn-outline:hover { background: #2b2b35; }

.btn-ghost { background: transparent; color: var(--muted); border: none; }
.btn-ghost:hover { background: transparent; color: var(--text); }

.btn-tutorial { padding: 8px 14px; font-size: 11.5px; }

/* visible focus for keyboard users, now that borders are gone */
.btn:focus-visible,
select:focus-visible,
input:focus-visible,
summary:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

.logo {
    font-size: 13px;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--text);
    display: flex;
    align-items: center;
    gap: 8px;
    text-decoration: none;
}

/* ─── NAV ENTRE LES DEUX OUTILS ──────────────────────────────────── */
.site-nav {
    display: flex;
    gap: 4px;
    background: var(--surface);
    padding: 4px;
    border-radius: 9px;
}

.nav-link {
    font-size: 12px;
    font-weight: 600;
    color: var(--muted);
    text-decoration: none;
    padding: 7px 14px;
    border-radius: var(--r-sm);
    transition: background .15s, color .15s;
    white-space: nowrap;
}

.nav-link:hover { color: var(--text); background: var(--raised); }
.nav-link.current { color: var(--text); background: var(--raised); }

@media (max-width: 720px) {
    .site-header { flex-wrap: wrap; gap: 14px; }
    .site-nav { order: 3; width: 100%; }
    .nav-link { flex: 1; text-align: center; }
}

.logo-dot {
    width: 6px; height: 6px;
    border-radius: 50%;
    background: var(--accent);
}

.site-version {
    font-size: 11px;
    color: var(--muted);
    font-variant-numeric: tabular-nums;
    letter-spacing: .04em;
    background: none;
    border: none;
    padding: 4px 2px;
    font-family: inherit;
    cursor: pointer;
    transition: color .15s;
}

.site-version:hover { color: var(--text); }
.site-version.debug-on { color: var(--accent-hi); }

/* ─── SITE NOTICE ────────────────────────────────────────────── */
.site-notice {
    width: 100%;
    max-width: 1160px;
    margin-bottom: 32px;
    padding: 12px 16px;
    background: rgba(128, 121, 201, .10);
    border: none;
    border-radius: var(--r);
    color: #b9b3ea;
    font-size: 12.5px;
    font-weight: 500;
    line-height: 1.5;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.site-notice-close {
    background: none;
    border: none;
    color: inherit;
    font-size: 18px;
    line-height: 1;
    cursor: pointer;
    opacity: .7;
    flex-shrink: 0;
    padding: 0;
}

.site-notice-close:hover { opacity: 1; }

.site-notice a { color: #d6d2f5; font-weight: 600; }
.site-notice a:hover { color: #fff; }

/* popup de confirmation */
.modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, .6);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
}

.modal-box {
    width: 90%;
    max-width: 380px;
    background: var(--surface);
    border: none;
    border-radius: var(--r);
    padding: 22px;
    box-shadow: 0 24px 64px rgba(0,0,0,.55);
}

.modal-title {
    font-size: 13px;
    font-weight: 600;
    color: var(--text);
    margin-bottom: 8px;
}

.modal-text {
    font-size: 12.5px;
    color: var(--muted);
    line-height: 1.5;
    margin-bottom: 18px;
}

.modal-actions {
    display: flex;
    gap: 10px;
    justify-content: flex-end;
}

.modal-actions .btn {
    width: auto;
    padding: 8px 16px;
    font-size: 12px;
}

/* ─── SEARCH ─────────────────────────────────────────────────── */
/* Le formulaire flottait sur le fond de page alors que tout le reste du site
   vit dans une boite. Il en a une maintenant, comme les panneaux. */
.search-wrap {
    width: 100%;
    max-width: 460px;
    margin-bottom: 48px;
    background: var(--surface);
    border-radius: var(--r);
    box-shadow: var(--shadow);
    padding: 22px 22px 20px;
}

.search-label {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--muted);
    margin-bottom: 20px;
    display: block;
}

.search-row {
    display: flex;
    gap: 8px;
    margin-bottom: 10px;
}

/* Les champs sont sur --raised et non sur --surface: ils vivent maintenant
   dans des boites de couleur --surface, ou un champ de la meme teinte que son
   fond disparaitrait. */
select, input[type="text"], input[type="number"], input[type="password"], textarea {
    background: var(--raised);
    border: none;
    color: var(--text);
    border-radius: 9px;
    font-family: inherit;
    font-size: 13.5px;
    outline: none;
    transition: box-shadow .15s, background .15s;
}

textarea {
    padding: 11px 14px;
    resize: vertical;
    line-height: 1.5;
    width: 100%;
    min-height: 44px;
}

textarea::placeholder { color: var(--muted); }
textarea:focus { box-shadow: 0 0 0 2px rgba(128,121,201,.45); }

select {
    padding: 11px 13px;
    cursor: pointer;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' fill='none'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%238b8b96' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 10px center;
    padding-right: 28px;
}

select:focus { box-shadow: 0 0 0 2px rgba(128,121,201,.45); }

input[type="text"], input[type="number"] {
    padding: 11px 14px;
}

input[type="text"]:focus,
input[type="number"]:focus { box-shadow: 0 0 0 2px rgba(128,121,201,.45); }

input[type="text"]::placeholder { color: var(--muted); }

.search-row select { flex: 0 0 140px; }
.search-row input[type="text"] { flex: 1; }

.btn-search {
    width: 100%;
    padding: 12px;
    font-size: 13px;
}

.btn-search:disabled { opacity: .4; cursor: not-allowed; }

.error-msg {
    font-size: 12.5px;
    color: var(--red);
    min-height: 18px;
    margin-top: 8px;
    font-weight: 500;
}

/* ─── LAYOUT ─────────────────────────────────────────────────── */
.result-layout {
    display: flex;
    gap: 18px;
    width: 100%;
    max-width: 1160px;
    align-items: flex-start;
    flex-wrap: wrap;
}

/* ─── PROFILE CARD ───────────────────────────────────────────── */
.profile-card {
    flex: 1.6;
    min-width: 340px;
    display: none;
}

/* user hero */
.user-hero {
    display: flex;
    align-items: center;
    gap: 20px;
    padding: 24px;
    background: var(--surface);
    border: none;
    border-radius: var(--r);
    box-shadow: var(--shadow);
    margin-bottom: 14px;
}

.avatar {
    width: 72px;
    height: 72px;
    border-radius: 50%;
    object-fit: cover;
    border: none;
    background: var(--raised);
    flex-shrink: 0;
}

.user-meta { flex: 1; min-width: 0; }

.username {
    font-size: 20px;
    font-weight: 600;
    line-height: 1.2;
    color: var(--text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.bio {
    font-size: 12.5px;
    color: var(--muted);
    margin-top: 5px;
    line-height: 1.5;
    white-space: pre-wrap;
}

/* accordion reset (native <details>/<summary>) */
summary { cursor: pointer; list-style: none; user-select: none; }
summary::-webkit-details-marker { display: none; }
summary::after {
    content: '+';
    float: right;
    color: var(--faint);
    font-weight: 400;
    font-size: 13px;
}
details[open] > summary::after { content: '–'; }

/* generic panel */
.panel {
    background: var(--surface);
    border: none;
    border-radius: var(--r);
    box-shadow: var(--shadow);
    margin-bottom: 14px;
    overflow: hidden;
}

.panel-head {
    padding: 14px 20px;
    border-bottom: 1px solid var(--border);
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--muted);
    transition: color .15s;
}

details:not([open]) > .panel-head { border-bottom: none; }
.panel-head:hover { color: var(--text); }

.panel-body {
    padding: 16px 20px 18px;
}

/* info rows */
.info-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 9px 0;
    border-bottom: 1px solid var(--border);
    font-size: 13px;
}

.info-row:last-child { border-bottom: none; }

.info-key {
    color: var(--muted);
    font-weight: 500;
}

.info-val {
    color: var(--text);
    font-variant-numeric: tabular-nums;
}

/* badges */
.badge-list { display: flex; flex-wrap: wrap; gap: 8px; }

.badge-item {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 6px 11px;
    background: var(--raised);
    border: none;
    border-radius: var(--r-sm);
    font-size: 12px;
    font-weight: 600;
}

.badge-icon { width: 18px; height: 18px; object-fit: contain; }

/* Un badge qui porte une couleur teinte toute sa puce, au lieu de la
   poser en liseré sur un seul bord — ce qui se lisait comme un artefact.
   Si color-mix n'est pas supporté, la puce garde simplement le fond neutre. */
.badge-item.has-color {
    background: color-mix(in srgb, var(--badge-color) 16%, var(--raised));
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--badge-color) 40%, transparent);
}

/* tags */
.tag-list { display: flex; flex-wrap: wrap; gap: 7px; }

.tag-item {
    background: var(--raised);
    border: none;
    color: var(--text);
    font-size: 12px;
    padding: 5px 11px;
    border-radius: var(--r-sm);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 200px;
}

/* links */
.link-list { display: flex; flex-wrap: wrap; gap: 7px; }

.link-item {
    display: inline-block;
    padding: 7px 13px;
    background: var(--raised);
    border: none;
    color: var(--text);
    border-radius: var(--r-sm);
    font-size: 12.5px;
    font-weight: 600;
    text-decoration: none;
    transition: background .15s, color .15s;
}

.link-item:hover { background: #2b2b35; }

/* audio */
.audio-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 9px 0;
    border-bottom: 1px solid var(--border);
    font-size: 13px;
}

.audio-item:last-child { border-bottom: none; }

.audio-url {
    color: var(--text);
    text-decoration: underline;
    text-underline-offset: 2px;
    font-weight: 600;
    font-size: 12px;
}

/* gallery */
.gallery-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(88px, 1fr));
    gap: 8px;
}

.gallery-item img {
    width: 100%;
    height: 88px;
    object-fit: cover;
    border-radius: 9px;
    border: none;
    background: var(--raised);
    display: block;
}

.gallery-caption {
    font-size: 10px;
    color: var(--muted);
    margin-top: 4px;
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* comments */
.comment-item {
    padding: 9px 0;
    border-bottom: 1px solid var(--border);
    font-size: 12.5px;
}

.comment-item:last-child { border-bottom: none; }

.comment-author {
    font-weight: 600;
    color: var(--text);
    margin-bottom: 2px;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: .03em;
}

/* ─── CANVAS SETTINGS ────────────────────────────────────────── */
.settings-panel {
    background: var(--surface);
    border: none;
    border-radius: var(--r);
    box-shadow: var(--shadow);
    margin-bottom: 14px;
    overflow: hidden;
}

.settings-body {
    padding: 16px 20px 20px;
}

.settings-section {
    margin-top: 14px;
    padding-top: 14px;
    border-top: 1px solid var(--border);
}

.settings-section:first-child {
    margin-top: 0;
    padding-top: 0;
    border-top: none;
}

.settings-section-label {
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--muted);
    margin-bottom: 12px;
    display: block;
    transition: color .15s;
}

.settings-section-label:hover { color: var(--text); }
.settings-section:not([open]) .settings-section-label { margin-bottom: 0; }

.settings-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(175px, 1fr));
    gap: 12px;
    align-items: start;
}

.ctrl-group {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.ctrl-group label {
    font-size: 11.5px;
    color: var(--muted);
    font-weight: 500;
}

.ctrl-group select,
.ctrl-group input[type="text"] {
    font-size: 12.5px;
    padding: 8px 10px;
}

.ctrl-group select { padding-right: 26px; }

.ctrl-group input[type="color"] {
    width: 100%;
    height: 34px;
    border: none;
    border-radius: var(--r-sm);
    cursor: pointer;
    background: var(--raised);
    padding: 3px 5px;
}

/* the UA default track is near-white, far too bright on this ground */
.ctrl-group input[type="range"] {
    width: 100%;
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    background: transparent;
    height: 16px;
}

.ctrl-group input[type="range"]::-webkit-slider-runnable-track {
    height: 4px;
    background: var(--raised);
    border-radius: 2px;
}

.ctrl-group input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 13px;
    height: 13px;
    margin-top: -4.5px;
    border-radius: 50%;
    background: var(--accent);
}

.ctrl-group input[type="range"]::-moz-range-track {
    height: 4px;
    background: var(--raised);
    border-radius: 2px;
}

.ctrl-group input[type="range"]::-moz-range-progress {
    height: 4px;
    background: var(--accent);
    border-radius: 2px;
}

.ctrl-group input[type="range"]::-moz-range-thumb {
    width: 13px;
    height: 13px;
    border: none;
    border-radius: 50%;
    background: var(--accent);
}

.ctrl-full { grid-column: 1 / -1; }

.checkbox-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    gap: 8px;
}

.checkbox-grid label {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12.5px;
    color: var(--text);
    cursor: pointer;
}

.checkbox-grid input[type="checkbox"] {
    accent-color: var(--accent);
    cursor: pointer;
    width: 14px;
    height: 14px;
}

/* alias / signature pickers */
.picker-wrap {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    padding: 12px;
    background: var(--bg);
    border: none;
    border-radius: 10px;
    max-height: 140px;
    overflow-y: auto;
}

.picker-wrap label {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    color: var(--text);
    cursor: pointer;
    background: var(--raised);
    padding: 5px 11px;
    border-radius: var(--r-sm);
    border: none;
}

.picker-wrap input { accent-color: var(--accent); cursor: pointer; }

/* progress */
.progress-wrap {
    height: 6px;
    background: var(--raised);
    border-radius: 3px;
    margin: 10px 0 4px;
    display: none;
    overflow: hidden;
}

.progress-bar {
    height: 100%;
    width: 0%;
    border-radius: 3px;
    transition: width .25s ease;
    background: repeating-linear-gradient(45deg, var(--accent) 0 10px, var(--accent-hi) 10px 20px);
    background-size: 28px 28px;
    animation: progress-stripes 0.6s linear infinite;
}

@keyframes progress-stripes {
    from { background-position: 0 0; }
    to { background-position: 28px 0; }
}

.progress-status {
    font-size: 11px;
    color: var(--muted);
    text-align: center;
    display: none;
}

/* generate button */
.btn-generate {
    width: 100%;
    padding: 12px;
    font-size: 13px;
    margin-top: 16px;
}

/* card display */
#cardDisplay {
    display: none;
    margin-top: 10px;
    text-align: center;
}

#userCanvas {
    display: block;
    margin: 0 auto;
    max-width: 100%;
    border-radius: 10px;
    border: none;
    box-shadow: 0 24px 64px rgba(0,0,0,.55);
}

#cardDisplay br { display: none; }

.btn-download {
    display: none;
    margin: 10px auto 0;
    padding: 11px 24px;
    font-size: 13px;
}

/* ─── DEBUG COLUMN ───────────────────────────────────────────── */
.debug-column {
    flex: 1;
    min-width: 280px;
    position: sticky;
    top: 24px;
    display: none;
    flex-direction: column;
    gap: 14px;
}

.debug-column.on { display: flex; }
/* .json-card est masque par defaut; dans la colonne c'est elle qui porte
   la visibilite, les panneaux qu'elle contient sont donc affiches */
.debug-column .json-card { position: static; flex: none; min-width: 0; display: block; }

.debug-copy {
    padding: 5px 10px;
    font-size: 11px;
    font-weight: 600;
}

.debug-body { padding: 14px 18px 16px; }

.debug-facts {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 6px 14px;
    font-size: 11.5px;
    margin-bottom: 16px;
}

.debug-facts dt { color: var(--muted); }

.debug-facts dd {
    color: var(--text);
    font-family: 'Space Mono', monospace;
    font-size: 11px;
    word-break: break-all;
}

.debug-log-label {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--muted);
    margin-bottom: 8px;
}

.debug-log {
    background: var(--bg);
    border-radius: 8px;
    padding: 10px 12px;
    max-height: 260px;
    overflow-y: auto;
    font-family: 'Space Mono', monospace;
    font-size: 10.5px;
    line-height: 1.6;
}

.debug-line {
    display: flex;
    gap: 8px;
    white-space: pre-wrap;
    word-break: break-word;
}

.debug-line time { color: var(--faint); flex-shrink: 0; }
.debug-line.log span { color: #b6b6c0; }
.debug-line.warn span { color: #e0b341; }
.debug-line.error span { color: var(--red); }
.debug-empty { color: var(--faint); font-family: 'Space Mono', monospace; font-size: 10.5px; }

/* ─── JSON PANEL ─────────────────────────────────────────────── */
.json-card {
    flex: 1;
    min-width: 280px;
    position: sticky;
    top: 24px;
    display: none;
    background: var(--surface);
    border: none;
    border-radius: var(--r);
    box-shadow: var(--shadow);
    overflow: hidden;
}

.json-head {
    padding: 14px 20px;
    border-bottom: 1px solid var(--border);
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--muted);
    display: flex;
    align-items: center;
    justify-content: space-between;
    transition: color .15s;
}

.json-head:hover { color: var(--text); }
#jsonCard:not([open]) > .json-head { border-bottom: none; }

.json-head span { color: var(--text); font-variant-numeric: tabular-nums; }

pre {
    margin: 0;
    font-family: 'Space Mono', monospace;
    font-size: 11.5px;
    color: #c9c9ce;
    overflow-x: auto;
    white-space: pre-wrap;
    word-wrap: break-word;
    max-height: 680px;
    overflow-y: auto;
    padding: 16px 18px;
    line-height: 1.65;
}
/* ─── GUIDED TOUR ────────────────────────────────────────────── */
.tour-backdrop {
    position: fixed;
    inset: 0;
    z-index: 900;
    background: rgba(0,0,0,.02);
    display: none;
}
.tour-backdrop.active { display: block; }

.tour-spotlight {
    position: fixed;
    z-index: 901;
    border-radius: 12px;
    box-shadow: 0 0 0 9999px rgba(6,6,8,.82);
    pointer-events: none;
    transition: top .35s ease, left .35s ease, width .35s ease, height .35s ease;
    display: none;
}
.tour-spotlight.active { display: block; }

.tour-tooltip {
    position: fixed;
    z-index: 902;
    max-width: 320px;
    background: var(--surface);
    border: none;
    border-radius: var(--r);
    padding: 18px 20px;
    box-shadow: 0 24px 64px rgba(0,0,0,.55);
    display: none;
    transition: top .35s ease, left .35s ease;
}
.tour-tooltip.active { display: block; }

.tour-step {
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--muted);
    margin-bottom: 8px;
}

.tour-title {
    font-size: 14px;
    font-weight: 600;
    color: var(--text);
    margin-bottom: 8px;
}

.tour-text {
    font-size: 12.5px;
    line-height: 1.6;
    color: var(--muted);
    margin-bottom: 16px;
}

.tour-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.tour-actions-right { display: flex; gap: 8px; }

.tour-btn { padding: 8px 14px; font-size: 12px; }

/* ─── ACCUEIL ────────────────────────────────────────────────────── */
/* Meme boite que les cartes qui suivent: le titre et le texte d'intro
   flottaient sur le fond, seuls elements du site a ne pas etre poses. */
.home-hero {
    width: 100%;
    max-width: 1160px;
    margin-bottom: 26px;
    background: var(--surface);
    border-radius: var(--r);
    box-shadow: var(--shadow);
    padding: 30px 30px 32px;
}

.home-hero h1 {
    font-size: clamp(28px, 5vw, 40px);
    font-weight: 700;
    letter-spacing: -.03em;
    line-height: 1.1;
    margin-bottom: 12px;
    text-wrap: balance;
}

/* Titre d'accueil: face carree facon techno. Vipnagorgialla n'est fournie
   qu'avec une licence Desktop, qui ne couvre pas la diffusion en webfont;
   Orbitron donne la meme geometrie sous licence SIL OFL. */
.home-hero h1.display {
    font-family: 'Orbitron', 'Montserrat', system-ui, sans-serif;
    font-weight: 900;
    font-size: clamp(30px, 5.4vw, 54px);
    letter-spacing: -.012em;
    line-height: 1.04;
    text-transform: uppercase;
}

.logo {
    font-family: 'Orbitron', 'Montserrat', system-ui, sans-serif;
    font-weight: 700;
    letter-spacing: .1em;
}

.home-card h2 {
    font-family: 'Orbitron', 'Montserrat', system-ui, sans-serif;
    letter-spacing: .01em;
}

.stat-cell .stat-val {
    font-family: 'Orbitron', 'Montserrat', system-ui, sans-serif;
}

.home-hero p {
    color: var(--muted);
    font-size: 14.5px;
    max-width: 60ch;
    line-height: 1.6;
}

.home-grid {
    width: 100%;
    max-width: 1160px;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 18px;
}

.home-card {
    background: var(--surface);
    border-radius: var(--r);
    box-shadow: var(--shadow);
    padding: 26px;
    text-decoration: none;
    color: inherit;
    display: flex;
    flex-direction: column;
    gap: 10px;
    transition: background .15s, transform .15s;
}

.home-card:hover { background: #1b1b21; transform: translateY(-2px); }

.home-card h2 {
    font-size: 18px;
    font-weight: 650;
    letter-spacing: -.015em;
    color: var(--text);
}

.home-card p { color: var(--muted); font-size: 13px; line-height: 1.6; }

.home-card .home-card-go {
    margin-top: 6px;
    font-size: 12px;
    font-weight: 650;
    color: var(--accent-hi);
}

.home-card-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }

.home-card-tags span {
    font-size: 11px;
    color: var(--muted);
    background: var(--raised);
    padding: 4px 9px;
    border-radius: var(--r-sm);
}

/* ─── PAGE PROFIL ────────────────────────────────────────────────── */
.profile-banner {
    width: 100%;
    /* une banniere large restait ecrasee en bandeau de 150 px: on lui laisse
       une hauteur proportionnelle a la largeur, bornee aux deux extremites */
    height: clamp(150px, 20vw, 260px);
    object-fit: cover;
    object-position: center;
    border-radius: var(--r) var(--r) 0 0;
    display: block;
    background: var(--raised);
}

.profile-hero-body {
    display: flex;
    align-items: flex-start;
    gap: 20px;
    padding: 20px 24px 24px;
}

/* Seul l'avatar chevauche la banniere. Remonter tout le bloc, comme avant,
   faisait passer le pseudo et les pastilles par-dessus l'image. */
.profile-hero.has-banner .avatar {
    margin-top: -54px;
    outline: 4px solid var(--surface);
}

.profile-hero .user-meta { padding-top: 2px; }

.profile-name-row { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; }

/* Les pastilles etaient en display inline: leur remplissage debordait sur les
   lignes voisines au lieu de leur donner une hauteur, elles ne s'alignaient
   donc pas entre elles ni avec la pastille de grade, qui est en inline-flex.
   Et comme elles sont ajoutees par le DOM, sans espace entre elles, elles se
   touchaient. D'ou une rangee, avec un ecart et une hauteur communs. */
.pill-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 7px;
}

.pill {
    display: inline-flex;
    align-items: center;
    min-height: 22px;
    font-size: 10.5px;
    font-weight: 700;
    line-height: 1;
    letter-spacing: .06em;
    text-transform: uppercase;
    padding: 4px 9px;
    border-radius: 20px;
    background: var(--raised);
    color: var(--muted);
    white-space: nowrap;
}

.pill.premium { background: rgba(251,191,36,.16); color: #fbbf24; }
.pill.verified { background: rgba(128,121,201,.18); color: var(--accent-hi); }
.pill.inactive { background: rgba(229,72,77,.14); color: var(--red); }

.stat-strip {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
    gap: 1px;
    background: var(--border);
    border-radius: var(--r);
    overflow: hidden;
    margin-bottom: 14px;
    box-shadow: var(--shadow);
}

.stat-cell { background: var(--surface); padding: 16px 18px; }

.stat-cell .stat-val {
    font-size: 20px;
    font-weight: 650;
    font-variant-numeric: tabular-nums;
    letter-spacing: -.02em;
}

.stat-cell .stat-key {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--muted);
    margin-top: 3px;
}

.asset-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
    gap: 12px;
}

.asset-item {
    background: var(--bg);
    border-radius: 9px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.asset-item img {
    width: 100%;
    height: 150px;
    object-fit: cover;
    display: block;
    background: var(--raised);
}

.asset-meta { padding: 9px 11px; }

.asset-meta a, .asset-name {
    font-size: 11px;
    font-weight: 600;
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--text);
    text-decoration: none;
}

.asset-sub { font-size: 10px; color: var(--faint); margin-top: 2px; }

.kv-list { display: flex; flex-direction: column; }

.empty-note { color: var(--faint); font-size: 12px; }

.profile-columns {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(330px, 1fr));
    gap: 18px;
    align-items: start;
    width: 100%;
}

/* ─── ADMIN ──────────────────────────────────────────────────────── */
.chart {
    display: flex;
    align-items: flex-end;
    gap: 3px;
    height: 130px;
}

.chart-col {
    flex: 1;
    height: 100%;
    display: flex;
    align-items: flex-end;
    min-width: 4px;
}

.chart-bar {
    width: 100%;
    background: var(--accent);
    border-radius: 3px 3px 0 0;
    transition: background .15s;
}

.chart-col:hover .chart-bar { background: var(--accent-hi); }

input[type="password"] { padding: 11px 14px; flex: 1; }
input[type="password"]::placeholder { color: var(--muted); }
input[type="password"]:focus { box-shadow: 0 0 0 2px rgba(128,121,201,.45); }

/* ─── PROFIL: BADGES DETAILLES ───────────────────────────────────── */
.badge-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 10px;
}

.badge-card {
    display: flex;
    align-items: flex-start;
    gap: 11px;
    padding: 11px 13px;
    background: var(--raised);
    border-radius: 9px;
}

.badge-card.has-color {
    background: color-mix(in srgb, var(--badge-color) 14%, var(--raised));
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--badge-color) 38%, transparent);
}

.badge-card-icon {
    width: 26px;
    height: 26px;
    object-fit: contain;
    flex-shrink: 0;
    margin-top: 1px;
}

.badge-card-text { min-width: 0; }
.badge-card-name { font-size: 12.5px; font-weight: 650; }
.badge-card-desc { font-size: 11.5px; color: var(--muted); margin-top: 2px; line-height: 1.45; }
.badge-card-sub { font-size: 10.5px; color: var(--faint); margin-top: 4px; }

/* ─── PROFIL: PISTES AUDIO ───────────────────────────────────────── */
.track {
    display: flex;
    gap: 13px;
    padding: 12px 0;
    border-bottom: 1px solid var(--border);
}

.track:last-child { border-bottom: none; }

.track-cover {
    width: 96px;
    height: 96px;
    border-radius: 8px;
    object-fit: cover;
    flex-shrink: 0;
    background: var(--raised);
}

.track-info { flex: 1; min-width: 0; }
.track-title { font-size: 13px; font-weight: 650; }
.track-artist { font-size: 11.5px; color: var(--muted); margin-top: 2px; }
.track-player { width: 100%; height: 32px; margin-top: 8px; }
.track-actions { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.track-actions .link-item { padding: 5px 10px; font-size: 11px; }

/* ─── PROFIL: ASSETS (image ou video) ────────────────────────────── */
.asset-media {
    width: 100%;
    height: 150px;
    object-fit: cover;
    display: block;
    background: var(--raised);
}

/* ─── PROFIL: COMMENTAIRES ───────────────────────────────────────── */
.comment-row {
    display: flex;
    gap: 11px;
    padding: 12px 0;
    border-bottom: 1px solid var(--border);
}

.comment-row:last-child { border-bottom: none; }

.comment-avatar {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
    background: var(--raised);
}

.comment-avatar-empty { background: var(--raised); }
.comment-main { flex: 1; min-width: 0; }

.comment-head {
    display: flex;
    align-items: center;
    gap: 7px;
    flex-wrap: wrap;
    margin-bottom: 3px;
}

.comment-head .comment-author {
    font-size: 12.5px;
    font-weight: 650;
    color: var(--text);
    text-transform: none;
    letter-spacing: 0;
    margin-bottom: 0;
}

.comment-handle { font-size: 11px; color: var(--faint); }
.comment-body { font-size: 12.5px; line-height: 1.55; word-break: break-word; }

/* ─── PROFIL: DIVERS ─────────────────────────────────────────────── */
.typewriter-lines { margin-top: 8px; display: flex; flex-direction: column; gap: 3px; }
.typewriter-line { font-size: 11.5px; color: var(--faint); word-break: break-word; }

.swatch-row { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 12px; }

.swatch {
    display: flex;
    align-items: center;
    gap: 7px;
    background: var(--raised);
    padding: 5px 10px;
    border-radius: var(--r-sm);
    font-size: 11px;
    font-variant-numeric: tabular-nums;
}

.swatch-dot {
    width: 12px;
    height: 12px;
    border-radius: 3px;
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.15);
}

.tag-link { color: var(--text); text-decoration: none; }
.tag-link:hover { color: var(--accent-hi); }

.tag-flag {
    font-size: 9.5px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--accent-hi);
    margin-left: 6px;
}

.section-item {
    padding: 12px 0;
    border-bottom: 1px solid var(--border);
}

.section-item:last-child { border-bottom: none; }
.section-title { font-size: 13px; font-weight: 650; }
.section-desc { font-size: 12px; color: var(--muted); margin-top: 4px; line-height: 1.5; }
.section-item .tag-list { margin-top: 8px; }

/* Les controles natifs de <audio> s'affichent en clair par defaut et jurent
   sur ce fond: color-scheme demande au navigateur sa variante sombre. */
audio, video { color-scheme: dark; }

/* Une puce d'alias portant des drapeaux depasse la largeur des tags simples. */
.tag-item.tag-wide { max-width: none; }

/* ─── PROFIL: PROJETS ────────────────────────────────────────────── */
.project-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 14px;
}

.project-card {
    background: var(--bg);
    border-radius: 10px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.project-shot {
    width: 100%;
    height: 158px;
    object-fit: cover;
    display: block;
    background: var(--raised);
}

.project-meta { padding: 13px 14px 15px; display: flex; flex-direction: column; gap: 6px; }

.project-title {
    font-size: 14px;
    font-weight: 650;
    color: var(--text);
    text-decoration: none;
}

a.project-title:hover { color: var(--accent-hi); }
.project-desc { font-size: 12px; color: var(--muted); line-height: 1.5; }
.project-meta .tag-list { margin-top: 2px; }
.project-meta .tag-item { font-size: 10.5px; padding: 3px 8px; }

/* ─── PROFIL: APERCU DE POLICE ───────────────────────────────────── */
.font-specimen {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 4px;
    padding: 12px 14px;
    background: var(--raised);
    /* tant que la police n'est pas chargee, le specimen reste discret pour ne
       pas se faire passer pour le vrai rendu */
    color: var(--faint);
    overflow: hidden;
}

.font-specimen.is-loaded { color: var(--text); }

.font-specimen-line {
    white-space: nowrap;
    line-height: 1.25;
    overflow: hidden;
    text-overflow: ellipsis;
}

.font-upper { font-size: 21px; }
.font-lower { font-size: 21px; }
.font-digits { font-size: 14px; color: var(--muted); }
.font-specimen.is-loaded .font-digits { color: var(--muted); }

.font-specimen.is-failed {
    align-items: center;
    color: var(--faint);
}

.font-specimen-note { font-size: 11.5px; }

/* Valeur retiree pour ne pas exposer la localisation de quelqu'un. */
.redacted {
    color: var(--faint);
    font-style: italic;
    background: var(--raised);
    padding: 2px 8px;
    border-radius: var(--r-sm);
    font-size: 11px;
    cursor: help;
}

/* ─── MAINTENANCE ────────────────────────────────────────────────── */
.maintenance-screen {
    width: 100%;
    max-width: 560px;
    margin: 60px auto;
    background: var(--surface);
    border-radius: var(--r);
    box-shadow: var(--shadow);
    padding: 34px 32px;
    text-align: center;
}

.maintenance-screen h1 {
    font-family: 'Orbitron', 'Montserrat', system-ui, sans-serif;
    font-size: 22px;
    font-weight: 900;
    letter-spacing: .01em;
    text-transform: uppercase;
    margin-bottom: 12px;
}

.maintenance-screen p { color: var(--muted); font-size: 13.5px; line-height: 1.6; }
.maintenance-screen .maintenance-since { color: var(--faint); font-size: 11.5px; margin-top: 14px; }

/* Le bouton est une balise <a>, donc inline par defaut: sans display le
   margin-top ne poussait rien et il se superposait a la date. */
.maintenance-screen .btn {
    display: inline-block;
    margin-top: 20px;
    padding: 10px 18px;
    font-size: 13px;
    text-decoration: none;
}

/* ─── GRADE (marquage propre a ce site) ──────────────────────────── */
/* Meme hauteur et meme remplissage que .pill: la pastille de grade se pose
   sur la meme rangee, l'icone ne doit pas la faire depasser. */
.grade-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 22px;
    font-size: 10.5px;
    font-weight: 700;
    line-height: 1;
    letter-spacing: .06em;
    text-transform: uppercase;
    padding: 4px 9px;
    border-radius: 20px;
    white-space: nowrap;
    color: var(--grade-color, #f1bf0f);
    background: color-mix(in srgb, var(--grade-color, #f1bf0f) 18%, transparent);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--grade-color, #f1bf0f) 45%, transparent);
}

.grade-pill img { width: 14px; height: 14px; object-fit: contain; }

/* Le liseré anime signale un profil marque sans gener la lecture. */
.profile-hero.is-graded {
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--grade-color, #f1bf0f) 55%, transparent),
                0 0 26px color-mix(in srgb, var(--grade-color, #f1bf0f) 22%, transparent),
                var(--shadow);
}

.profile-hero.is-graded .avatar {
    outline-color: color-mix(in srgb, var(--grade-color, #f1bf0f) 70%, var(--surface));
}

@media (prefers-reduced-motion: no-preference) {
    .profile-hero.is-graded { animation: grade-breathe 3.4s ease-in-out infinite; }
    @keyframes grade-breathe {
        0%, 100% { box-shadow: 0 0 0 1px color-mix(in srgb, var(--grade-color, #f1bf0f) 45%, transparent),
                               0 0 18px color-mix(in srgb, var(--grade-color, #f1bf0f) 14%, transparent),
                               var(--shadow); }
        50%      { box-shadow: 0 0 0 1px color-mix(in srgb, var(--grade-color, #f1bf0f) 70%, transparent),
                               0 0 32px color-mix(in srgb, var(--grade-color, #f1bf0f) 30%, transparent),
                               var(--shadow); }
    }
}

/* ─── PROFIL EXCLU ───────────────────────────────────────────────── */
.excluded-note {
    width: 100%;
    background: rgba(229, 72, 77, .10);
    border-radius: var(--r);
    padding: 20px 22px;
    margin-bottom: 14px;
}

.excluded-note strong { display: block; font-size: 14px; margin-bottom: 6px; }
.excluded-note p { color: var(--muted); font-size: 13px; line-height: 1.55; }

/* Auteur marque dans le selecteur de signatures. */
.picker-wrap label.graded-author {
    color: var(--grade-color, #f1bf0f);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--grade-color, #f1bf0f) 50%, transparent);
}

/* Classement: la barre donne l'echelle sans avoir a lire les nombres. */
.rank-row { position: relative; overflow: hidden; }

.rank-bar {
    position: absolute;
    left: 0;
    top: 4px;
    bottom: 4px;
    background: color-mix(in srgb, var(--accent) 16%, transparent);
    border-radius: 4px;
    pointer-events: none;
}

.rank-row .info-key, .rank-row .info-val { position: relative; }
.rank-row .info-key { word-break: break-all; }

/* ─── ADMIN: MARQUAGES ───────────────────────────────────────────── */
.flag-form .search-row { margin-bottom: 8px; }
.flag-form .btn-search { margin-top: 4px; }
.flag-form textarea { flex: 1; }
.flag-row { align-items: flex-start; gap: 12px; }
.flag-row .info-key { display: flex; flex-direction: column; gap: 3px; }
.flag-id { font-family: 'Space Mono', monospace; font-size: 10.5px; color: var(--faint); word-break: break-all; }
.flag-row .info-val { flex-shrink: 0; }

/* La case a cocher precede le libelle: la colonne de gauche est en flex
   colonne, il lui faut donc sa propre ligne pour rester alignee. */
.flag-row .info-key { position: relative; padding-left: 26px; }
.flag-check { position: absolute; left: 0; top: 2px; accent-color: var(--accent); cursor: pointer; }

.bulk-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 8px;
}

.bulk-check {
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: 12px;
    color: var(--muted);
    cursor: pointer;
}

.bulk-check input { accent-color: var(--accent); cursor: pointer; }
.bulk-bar .btn:disabled { opacity: .4; cursor: not-allowed; }

/* Categories de medias a masquer, en colonnes pour rester lisibles a dix. */
.kind-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    gap: 6px 14px;
    margin-bottom: 10px;
    padding: 12px 14px;
    background: var(--raised);
    border-radius: 9px;
}

/* Un role est un grade partage: ses membres sont groupes sous son en-tete. */
.role-block { margin-bottom: 12px; }

.role-head {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 7px 0 6px;
    border-bottom: 1px solid var(--border);
}

.role-name { font-size: 12.5px; font-weight: 650; color: var(--text); }
.role-count { font-size: 10.5px; color: var(--faint); margin-left: auto; }
.role-block .flag-row { padding-left: 8px; }
.flag-id-main { font-size: 11.5px; color: var(--muted); }

#errorList .info-row { align-items: flex-start; }
#errorList .info-key { display: flex; flex-direction: column; gap: 3px; }
.error-msg-text { color: var(--red); font-size: 12.5px; word-break: break-word; }

/* ─── MEDIA MASQUE (exclusion douce) ─────────────────────────────── */
/* Le fichier n'existe deja plus dans la reponse: cette plaque ne cache rien,
   elle occupe la place de ce qui a ete retire. Le flou porte sur le motif de
   fond uniquement, pour que le libelle reste lisible. */
.asset-hidden {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 150px;
    overflow: hidden;
    background: var(--raised);
}

.asset-hidden::before {
    content: '';
    position: absolute;
    inset: -24px;
    background: repeating-linear-gradient(118deg,
        #32323e 0 22px, #262630 22px 44px, #3d3d4c 44px 66px, #2b2b36 66px 88px);
    filter: blur(11px);
    opacity: .9;
}

.asset-hidden-label {
    position: relative;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--muted);
    background: rgba(13, 13, 16, .55);
    padding: 4px 10px;
    border-radius: 20px;
}

.track-player.asset-hidden { height: 34px; margin-top: 8px; border-radius: var(--r-sm); }
.project-shot.asset-hidden { height: 120px; }
.gallery-item .asset-hidden { height: 88px; border-radius: 9px; }
.gallery-item .asset-hidden-label { font-size: 8.5px; padding: 3px 7px; }

/* L'avatar et la banniere retires gardent leur forme, sinon l'en-tete se
   decale et l'on ne comprend pas ce qui manque. */
.avatar.is-hidden-media:not([src]),
.profile-banner.is-hidden-media:not([src]) {
    background: repeating-linear-gradient(118deg,
        #32323e 0 14px, #262630 14px 28px, #3d3d4c 28px 42px);
    filter: blur(5px);
}

.profile-banner.is-hidden-media:not([src]) { filter: blur(9px); }

/* Un flou deborde de la boite de l'element: sans decoupe, la banniere
   masquee bavait par-dessus les coins arrondis de l'en-tete. */
.user-hero:has(.is-hidden-media) { overflow: hidden; }

.hidden-note {
    width: 100%;
    background: rgba(128, 121, 201, .10);
    border-radius: var(--r);
    padding: 18px 20px;
    margin-bottom: 14px;
}

.hidden-note strong { display: block; font-size: 14px; margin-bottom: 6px; }
.hidden-note p { color: var(--muted); font-size: 13px; line-height: 1.55; }
.hidden-note .asset-sub { margin-top: 8px; }

/* ─── RECHERCHES RECENTES ────────────────────────────────────────── */
.recent-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 12px;
}

.recent-row:empty { margin-top: 0; }

.recent-label {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--faint);
    margin-right: 2px;
}

.recent-chip {
    background: var(--raised);
    border: none;
    color: var(--muted);
    font-family: inherit;
    font-size: 11.5px;
    font-weight: 600;
    padding: 5px 10px;
    border-radius: 20px;
    cursor: pointer;
    max-width: 150px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    transition: background .15s, color .15s;
}

.recent-chip:hover { background: #2b2b35; color: var(--text); }
.recent-clear { color: var(--faint); background: transparent; }
.recent-clear:hover { background: transparent; color: var(--red); }

/* ─── ACTIONS SOUS LE PROFIL ─────────────────────────────────────── */
.profile-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    margin-top: 14px;
}

.profile-actions .link-item {
    font-size: 11.5px;
    padding: 6px 12px;
    font-family: inherit;
    cursor: pointer;
}

/* ─── COURBE DES VUES ────────────────────────────────────────────── */
.spark {
    display: flex;
    align-items: flex-end;
    gap: 3px;
    height: 110px;
    margin-bottom: 12px;
}

.spark-col {
    flex: 1;
    min-width: 3px;
    height: 100%;
    display: flex;
    align-items: flex-end;
}

.spark-bar {
    width: 100%;
    background: var(--accent);
    border-radius: 3px 3px 0 0;
    opacity: .75;
    transition: opacity .15s;
}

.spark-col:hover .spark-bar { opacity: 1; }

/* ─── COMPARAISON ────────────────────────────────────────────────── */
.compare-heads {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
    margin-bottom: 14px;
}

.compare-head {
    display: flex;
    align-items: center;
    gap: 14px;
    background: var(--surface);
    border-radius: var(--r);
    box-shadow: var(--shadow);
    padding: 18px 20px;
    min-width: 0;
}

.compare-head .avatar { width: 56px; height: 56px; }
.compare-head .username { font-size: 16px; }

/* Trois colonnes: valeur gauche, libelle au centre, valeur droite. Le libelle
   au milieu evite de relire l'en-tete pour savoir ce qu'on compare. */
.compare-row {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 12px;
    padding: 9px 0;
    border-bottom: 1px solid var(--border);
    font-size: 13px;
}

.compare-row:last-child { border-bottom: none; }

.compare-key {
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--faint);
    text-align: center;
    white-space: nowrap;
}

.compare-val {
    color: var(--muted);
    font-variant-numeric: tabular-nums;
    font-weight: 600;
}

.compare-row .compare-val:first-child { text-align: right; }
.compare-row .compare-val:last-child { text-align: left; }
.compare-val.wins { color: var(--accent-hi); }
.compare-text { font-weight: 500; font-size: 12.5px; }

@media (max-width: 620px) {
    .compare-heads { grid-template-columns: 1fr; }
    .compare-key { font-size: 9.5px; white-space: normal; }
}