/* ══════════════════════════════════════════════════════════════════════════
   Arsenal — la feuille de style du TechPanel, reprise telle quelle.
   ══════════════════════════════════════════════════════════════════════════
   Ce fichier est un PORTAGE, pas une réécriture. Les écrans « Technologies »
   et « Inventaire » du TechPanel ont déjà été refondus et c'est ce rendu-là
   qu'on veut : mêmes cartes, mêmes pastilles, mêmes barres de boutons, mêmes
   états de survol. Réinventer un vocabulaire ici, c'est repartir d'un style
   moins abouti et le faire diverger à la première retouche.

   Les jetons (--gold, --bg-raised, --border-gold, --ease…) ne sont pas
   redéfinis : les deux services chargent le MÊME pr-design-system.css sur
   `body.pr-scope`, comme le fait déjà base.html. `.btn`, `.form-control`, les
   cases à cocher et les selects en viennent aussi — rien de tout ça n'est
   recopié.

   Origine : TechPanel/templates/index.html, bloc <style> (lignes 7-1463) et
   Customizable-Military-Catalog/templates/catalog.html pour le marché.
   En cas de divergence visuelle, la source fait foi.
   ══════════════════════════════════════════════════════════════════════════ */

/* Teintes de spécialisation — définies dans MilitaryCatalog/templates/base.html.
   Les tuiles de vitrine s'en servent pour leur liseré gauche ; sans elles, les
   trois spécialisations rendraient identiques. */
:root {
    --spec-terrestre:    #D5B654;
    --spec-terrestre-bg: rgba(213,182,84,0.09);
    --spec-aerienne:     #3b82f6;
    --spec-aerienne-bg:  rgba(59,130,246,0.09);
    --spec-navale:       #14b8a6;
    --spec-navale-bg:    rgba(20,184,166,0.09);
}

/* ── Assistant de création de technologie ────────────────────────────────
   Formulaire reste source de vérité. Guide surligne étapes au lieu de copier
   champs : nouvelle spécialisation serveur apparaît donc dans deux modes. */
.tech-guide {
    margin: 0 var(--sp-5) var(--sp-5);
    border: 1px solid color-mix(in srgb, var(--gold) 48%, transparent);
    border-radius: var(--r-lg);
    background: linear-gradient(145deg, rgba(213, 182, 84, 0.1), rgba(8, 8, 8, 0.72));
    overflow: hidden;
}

.tech-guide[hidden] { display: none; }

.tech-guide-steps {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    border-bottom: 1px solid var(--border);
}

.tech-guide-steps button {
    min-width: 0;
    padding: var(--sp-3);
    border: 0;
    border-right: 1px solid var(--border);
    background: rgba(0, 0, 0, 0.18);
    color: var(--text-muted);
    font: 700 0.78rem var(--font-display);
    cursor: pointer;
}

.tech-guide-steps button:last-child { border-right: 0; }
.tech-guide-steps button span { display: block; margin-top: 2px; }
.tech-guide-steps button.active { background: rgba(213, 182, 84, 0.16); color: var(--gold-light); }
.tech-guide-steps button:focus-visible { outline: 2px solid var(--gold-light); outline-offset: -3px; }

.tech-guide-body {
    display: grid;
    grid-template-columns: 1.15fr 1fr 1fr;
    gap: var(--sp-5);
    padding: var(--sp-5);
}
.tech-guide-body > *,
.tech-guide-footer > * { min-width: 0; }

.tech-guide-kicker {
    margin: 0 0 var(--sp-1);
    color: var(--gold);
    font: 700 0.7rem var(--font-display);
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.tech-guide-copy h3 { margin: 0 0 var(--sp-2); }
.tech-guide-copy > p:not(.tech-guide-kicker) { color: var(--text-secondary); }
.tech-guide-estimate,
.tech-guide-review { padding-left: var(--sp-5); border-left: 1px solid var(--border); }
.tech-guide-estimate > p { margin-top: 0; color: var(--text-muted); font-size: 0.78rem; }
.tech-guide-estimate dl { display: grid; gap: var(--sp-2); margin: 0; }
.tech-guide-estimate dl div { display: flex; justify-content: space-between; gap: var(--sp-3); }
.tech-guide-estimate dt { color: var(--text-secondary); }
.tech-guide-estimate dd {
    min-width: 0;
    margin: 0;
    color: var(--gold-light);
    font-weight: 700;
    overflow-wrap: anywhere;
    text-align: right;
}
.tech-guide-review strong { color: var(--text-primary); }
.tech-guide-review ul {
    max-height: 9rem;
    margin: var(--sp-2) 0 0;
    padding: 0;
    list-style: none;
    overflow-x: hidden;
    overflow-y: auto;
}
.tech-guide-review li { display: flex; gap: var(--sp-2); color: var(--text-muted); font-size: 0.78rem; }
.tech-guide-review li.complete { color: #6ee7b7; }
.tech-guide-review li.missing { color: #fca5a5; }

.tech-guide-footer {
    display: flex;
    justify-content: space-between;
    gap: var(--sp-3);
    padding: 0 var(--sp-5) var(--sp-5);
}
.tech-guide-footer .btn { white-space: normal; }

.tech-guide-active [data-guide-focus] {
    border-radius: var(--r-md);
    outline: 2px solid color-mix(in srgb, var(--gold) 72%, transparent);
    outline-offset: 5px;
}

@media (max-width: 760px) {
    .tech-guide { margin-inline: 0; }
    .tech-guide-steps button span { display: none; }
    .tech-guide-body { grid-template-columns: 1fr; }
    .tech-guide-estimate,
    .tech-guide-review { padding: var(--sp-4) 0 0; border-left: 0; border-top: 1px solid var(--border); }
    .create-head #ars-tech-guide-toggle { width: 100%; }
}

/* ── Compléments de base ──────────────────────────────────────────────────
   Quelques classes que le markup du TechPanel utilise et que base.css du
   dashboard n'a pas (elles vivaient dans TechPanel/templates/base.html). */

.card-header-text h2 {
    font-size: 1.2rem;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: var(--sp-1);
}
.card-header-text p { font-size: 0.85rem; color: var(--text-muted); }

.form-hint { font-size: 0.75rem; color: var(--text-muted); margin-top: var(--sp-1); }
.form-label .req { color: var(--gold); font-size: 0.7rem; }

.range-value {
    min-width: 2.5rem;
    text-align: center;
    font-family: var(--font-display, 'Rajdhani'), sans-serif;
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--gold);
    background: var(--gold-subtle);
    border: 1px solid var(--border-gold);
    border-radius: var(--r-sm);
    padding: var(--sp-1) var(--sp-2);
}

.spinner-sm { width: 16px; height: 16px; border-width: 2px; }
.loading-center {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: var(--sp-12);
    gap: var(--sp-3);
    color: var(--text-muted);
    font-size: 0.85rem;
}

.checkbox-group {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    padding: var(--sp-3) var(--sp-4);
    background: var(--bg-raised);
    border: 1px solid var(--border-mid);
    border-radius: var(--r-md);
    cursor: pointer;
    transition: all var(--ease);
    user-select: none;
}
.checkbox-group:hover { border-color: var(--gold); background: var(--gold-subtle); }
.checkbox-group input[type=checkbox] { width: 18px; height: 18px; accent-color: var(--gold); cursor: pointer; }
.checkbox-group label { color: var(--text-secondary); font-size: 0.9rem; cursor: pointer; }

.hidden { display: none !important; }
.text-muted { color: var(--text-muted); }
.w-full { width: 100%; }

/* Zone d'aperçu d'image + icônes inline : ces règles vivaient dans
   TechPanel/templates/base.html (donc pas dans le bloc porté), et le markup de
   la page « Créer » s'en sert. Sans elles le cadre de dépôt n'existe pas
   visuellement et les pictogrammes ne s'alignent pas sur le texte. */
span.i { display: inline-flex; align-items: center; vertical-align: -0.125em; }
span.i .pr-icon { width: 1.05em; height: 1.05em; }

.image-preview-zone {
    border: 2px dashed var(--border-mid);
    border-radius: var(--r-lg);
    padding: var(--sp-6);
    text-align: center;
    transition: all var(--ease);
    cursor: pointer;
    position: relative;
    overflow: hidden;
    min-height: 120px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.image-preview-zone:hover,
.image-preview-zone.dragover { border-color: var(--gold); background: var(--gold-subtle); }
.image-preview-zone img { max-width: 100%; max-height: 200px; border-radius: var(--r-md); object-fit: contain; }
.image-preview-zone .preview-placeholder {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--sp-2);
    color: var(--text-muted);
    pointer-events: none;
}
.image-preview-zone .preview-placeholder span { font-size: 2rem; }
.image-preview-zone .preview-placeholder p { font-size: 0.85rem; }

/* ── Propres au hub ───────────────────────────────────────────────────────
   Le reste de cette feuille est du TechPanel/Catalog porté ; ces quelques
   classes n'existent que parce que l'Arsenal réunit des choses qui vivaient
   dans des écrans séparés. */

/* Bandeau de totaux, au-dessus des sous-onglets. */
.ars-kpis { margin-bottom: var(--sp-4); }

.ars-content { position: relative; min-height: 50vh; }

/* Entête de groupe de l'inventaire (type de matériel + compte), reprise du
   rendu inline de _renderInventoryTab. */
.ars-group-head {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    margin-bottom: var(--sp-3);
    padding-bottom: var(--sp-2);
    border-bottom: 1px solid var(--border-subtle);
}
.ars-group-head h3 { font-size: 0.9rem; font-weight: 700; color: var(--text-primary); margin: 0; }
.ars-group-head span { font-size: 0.72rem; color: var(--text-muted); }

/* Grille de cartes compactes de l'inventaire (220px comme la source). */
.ars-card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: var(--sp-3);
}

.ars-form-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-4); }

/* Autocomplétion de pays : remplace une selectbox de plusieurs centaines
   d'entrées, impraticable pour trouver un pays précis — pire encore sur mobile
   où la liste native occupe tout l'écran sans recherche. */
.ars-country-picker { position: relative; }
.ars-country-dropdown {
    position: absolute;
    top: 100%; left: 0; right: 0;
    z-index: 30;
    max-height: 240px;
    overflow-y: auto;
    background: var(--bg-surface);
    border: 1px solid var(--border-mid);
    border-radius: var(--r-md);
    box-shadow: 0 8px 24px rgba(0,0,0,.5);
}
.ars-country-option {
    display: block; width: 100%; text-align: left;
    padding: var(--sp-2) var(--sp-3);
    background: none; border: 0;
    color: var(--text-primary);
    font: inherit; cursor: pointer;
}
.ars-country-option:hover,
.ars-country-option.active { background: var(--bg-raised); color: var(--gold); }
.ars-country-none { padding: var(--sp-2) var(--sp-3); color: var(--text-muted); font-size: 0.85rem; }

@media (max-width: 720px) {
    .ars-form-row { grid-template-columns: 1fr; }
}

/* Sous-onglets du hub (Inventaire / Mes technologies / Créer / …). Ils sont
   propres à l'Arsenal — le TechPanel a ces pages dans sa barre principale — et
   reprennent le rendu d'onglets souligné du composant d'entête, pour rester du
   même monde. */
.sub-tabs {
    display: flex;
    align-items: center;
    gap: 2px;
    flex-wrap: wrap;
    margin-bottom: var(--sp-4);
    border-bottom: 1px solid var(--border-subtle);
}
.sub-tab-btn {
    position: relative;
    padding: 10px var(--sp-4);
    background: none;
    border: none;
    border-bottom: 2px solid transparent;
    color: var(--text-muted);
    font-family: var(--font-display, 'Rajdhani'), sans-serif;
    font-size: 0.95rem;
    font-weight: 600;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    cursor: pointer;
    white-space: nowrap;
    transition: color var(--ease), border-color var(--ease);
}
.sub-tab-btn:hover { color: var(--text-primary); }
.sub-tab-btn.active { color: var(--gold); border-bottom-color: var(--gold); }

/* ══ Ci-dessous : TechPanel/templates/index.html, bloc <style>, verbatim ══ */

/* ============================================================
   LOGIN PAGE
   ============================================================ */
.login-page {
    min-height: 60vh;
    display: flex;
    align-items: center;
    justify-content: center;
}

.login-card {
    max-width: 440px;
    width: 100%;
    text-align: center;
}

.login-hero {
    margin-bottom: var(--sp-8);
}

.login-icon {
    font-size: 4rem;
    display: block;
    margin-bottom: var(--sp-4);
    filter: drop-shadow(0 0 20px rgba(213,182,84,0.3));
}

.login-hero h1 {
    font-size: 1.8rem;
    color: var(--gold);
    margin-bottom: var(--sp-3);
}

.login-hero p {
    color: var(--text-muted);
    font-size: 0.9rem;
    line-height: 1.7;
}

.login-features {
    display: flex;
    flex-direction: column;
    gap: var(--sp-2);
    margin-bottom: var(--sp-6);
    text-align: left;
}

.login-feature {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    padding: var(--sp-3);
    background: var(--bg-raised);
    border-radius: var(--r-md);
    font-size: 0.85rem;
    color: var(--text-secondary);
}

.login-feature .feature-icon {
    font-size: 1.1rem;
    width: 28px;
    text-align: center;
}

#alert-container-login {
    margin-bottom: var(--sp-5);
}

/* ============================================================
   APP LAYOUT
   ============================================================ */
.app-layout {
    display: flex;
    flex-direction: column;
    gap: var(--sp-6);
}

/* ============================================================
   PERMISSION BANNER
   ============================================================ */
.perm-banner {
    display: flex;
    align-items: center;
    gap: var(--sp-4);
    padding: var(--sp-4) var(--sp-5);
    background: var(--danger-bg);
    border: 1px solid rgba(239,68,68,0.3);
    border-radius: var(--r-lg);
    color: #fca5a5;
    font-size: 0.9rem;
}

.perm-banner .perm-icon { font-size: 1.4rem; flex-shrink: 0; }
.perm-banner strong { color: #fca5a5; display: block; margin-bottom: 2px; }

/* ============================================================
   FORM WIZARD
   ============================================================ */
.form-wizard-card {
    position: relative;
}

/* ── Create : entête (titre | secret | soumettre) ── */
.create-head {
    display: flex;
    align-items: center;
    gap: var(--sp-4);
    padding-bottom: var(--sp-4);
    margin-bottom: var(--sp-5);
    border-bottom: 1px solid var(--border-subtle);
    flex-wrap: wrap;
}
.create-head .card-header {
    margin: 0;
    padding: 0;
    border: none;
    flex: 1 1 320px;
}
.create-head .create-head-secret {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 1 1 auto;
    padding: 0 var(--sp-4);
    border-left: 1px solid var(--border-subtle);
    border-right: 1px solid var(--border-subtle);
    align-self: stretch;
}
.btn-submit-green {
    background: #245c31 !important;
    border: 1px solid #2e7a40 !important;
    color: #d9f5df !important;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    padding: var(--sp-3) var(--sp-5) !important;
    border-radius: var(--r-md);
    white-space: nowrap;
}
.btn-submit-green:hover:not(:disabled) { background: #2e7a40 !important; box-shadow: 0 0 12px rgba(46,122,64,0.4); }
.btn-submit-green:disabled { opacity: 0.5; cursor: not-allowed; }

/* ── Create : layout 2 colonnes (gauche large / attributs étroits) ── */
.create-layout {
    display: grid;
    grid-template-columns: minmax(0, 3fr) minmax(300px, 5fr);
    gap: var(--sp-5);
    align-items: start;
}
.create-col-left { display: flex; flex-direction: column; gap: var(--sp-3); min-width: 0; }
/* Image + champs côte à côte dans la colonne gauche */
.create-id-row {
    display: grid;
    grid-template-columns: minmax(200px, 260px) 1fr;
    gap: var(--sp-4);
    align-items: start;
}
.create-id-fields { display: flex; flex-direction: column; gap: var(--sp-2); min-width: 0; }
.create-id-fields .form-group { margin-bottom: 0; }
.create-col-right {
    border-left: 1px solid var(--border-subtle);
    padding-left: var(--sp-5);
    display: flex;
    flex-direction: column;
    gap: var(--sp-4);
    min-width: 0;
}
/* Compact : limiter le scroll sur la page créer */
#create-militaire .form-group { margin-bottom: 0; }
#create-militaire .form-label { margin-bottom: 4px; font-size: 0.78rem; }
#create-militaire .form-control { padding: 7px 10px; font-size: 0.85rem; }
@media (max-width: 1100px) {
    .create-layout { grid-template-columns: 1fr; }
    .create-col-right { border-left: none; padding-left: 0; }
}
/* Fiche civile : même structure que .create-id-row, colonne image un peu plus
   large parce que l'aperçu civil fait 300px de haut. Une CLASSE et non un
   style inline, et c'est tout l'intérêt : le style inline qu'elle remplace
   (`grid-template-columns:minmax(240px,320px) 1fr`) ne pouvait porter aucun
   point de rupture, donc sur un téléphone la colonne image gardait ses 240px
   et les cinq champs — nom, inspiration, type, coût unitaire, coût de
   développement — partaient sous le bord droit de l'écran, coupés net par un
   parent en overflow:hidden. Rien ne défilait, rien ne s'affichait, et le
   joueur ne pouvait pas créer de technologie civile depuis son téléphone. */
.create-civil-row {
    display: grid;
    grid-template-columns: minmax(240px, 320px) 1fr;
    gap: var(--sp-6);
    align-items: start;
    margin-top: var(--sp-4);
}
.create-civil-row > * { min-width: 0; }

@media (max-width: 640px) {
    .create-id-row { grid-template-columns: 1fr; }
    .create-civil-row { grid-template-columns: 1fr; gap: var(--sp-4); }
    .create-head .create-head-secret { border: none; }
}

/* ── Slider niveau technologique ── */
.level-slider-block {
    background: var(--bg-raised);
    border: 1px solid var(--border-subtle);
    border-radius: var(--r-lg);
    padding: var(--sp-3) var(--sp-4);
}
.level-slider-row {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
}
.level-slider-row input[type=range] { flex: 1; }
.level-reset-btn {
    width: 34px; height: 34px;
    flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
    background: var(--bg-overlay);
    border: 1px solid var(--border-mid);
    border-radius: var(--r-md);
    color: var(--text-muted);
    font-weight: 700;
    cursor: pointer;
    transition: border-color .15s, color .15s;
}
.level-reset-btn:hover { border-color: var(--gold); color: var(--gold); }
.level-inc-btn {
    width: 34px; height: 34px;
    flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
    background: var(--gold-subtle);
    border: 1px solid var(--border-gold);
    border-radius: var(--r-md);
    color: var(--gold);
    font-size: 1.1rem;
    font-weight: 700;
    line-height: 1;
    cursor: pointer;
    transition: border-color .15s, color .15s, background .15s;
}
.level-inc-btn:hover { border-color: var(--gold); background: var(--gold-glow); }
.level-zero-btn {
    width: 34px; height: 34px;
    flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
    background: var(--danger-bg);
    border: 1px solid rgba(239,68,68,0.35);
    border-radius: var(--r-md);
    color: #fca5a5;
    font-size: 1rem;
    font-weight: 700;
    line-height: 1;
    cursor: pointer;
    transition: border-color .15s, color .15s, background .15s;
}
.level-zero-btn:hover { border-color: #f87171; color: #f87171; background: rgba(239,68,68,0.2); }
.tc-dot {
    display: inline-block;
    width: 9px; height: 9px;
    border-radius: 50%;
    background: var(--success);
    box-shadow: 0 0 6px rgba(34,197,94,0.7);
    flex-shrink: 0;
}
.range-value {
    min-width: 34px; height: 34px;
    display: flex; align-items: center; justify-content: center;
    background: var(--gold-subtle);
    border: 1px solid var(--border-gold);
    border-radius: var(--r-md);
    color: var(--gold);
    font-family: 'Rajdhani', sans-serif;
    font-weight: 700;
}

/* ── Panneau image (préview + lien/télécharger) ── */
.image-panel .image-preview-zone { min-height: 260px; }
.image-panel-foot {
    display: flex;
    border: 1px solid var(--border-mid);
    border-top: none;
    border-radius: 0 0 var(--r-md) var(--r-md);
    overflow: hidden;
}
.image-panel-foot input[type=url] {
    flex: 1;
    min-width: 0;
    background: var(--bg-raised);
    border: none;
    outline: none;
    color: var(--text-primary);
    font-size: 0.8rem;
    padding: 8px 10px;
    font-family: inherit;
}
.image-panel-foot input[type=url]::placeholder { color: var(--text-faint); }
.image-panel-foot button {
    flex-shrink: 0;
    background: var(--bg-overlay);
    border: none;
    border-left: 1px solid var(--border-mid);
    color: var(--text-secondary);
    font-size: 0.78rem;
    font-weight: 600;
    padding: 8px 14px;
    cursor: pointer;
    font-family: inherit;
    transition: color .15s, background .15s;
}
.image-panel-foot button:hover { color: var(--gold); background: var(--gold-subtle); }
.image-panel .image-preview-zone { border-radius: var(--r-md) var(--r-md) 0 0; }

/* Attributs sur la colonne droite (étroite) : 2 colonnes compactes */
.create-col-right .attributes-grid { grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: var(--sp-2); }
.create-col-right .attr-field { padding: var(--sp-2) var(--sp-3); }
.create-col-right .technocentre-grid { grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: var(--sp-2); }
.create-col-right .tc-card { padding: var(--sp-3); }

/* ── Barre d'outils de tab (balance + filtres) ── */
.tab-toolbar {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    flex-wrap: wrap;
    padding: var(--sp-2) 0 var(--sp-3);
    margin-bottom: var(--sp-3);
    border-bottom: 1px solid var(--border-subtle);
    font-size: 0.8rem;
}
.tab-toolbar .toolbar-sep { width: 1px; align-self: stretch; background: var(--border-subtle); }
.tab-balance { display: inline-flex; align-items: center; gap: 6px; color: var(--text-muted); white-space: nowrap; }
.tab-balance strong { color: var(--gold); letter-spacing: 0.02em; }

/* ── Groupes par spécialisation (usines / technocentres / board prod) ── */
.struct-groups { display: flex; gap: var(--sp-5); align-items: flex-start; flex-wrap: wrap; }
.struct-group { flex: 1 1 300px; min-width: 300px; }
.struct-group-head {
    font-size: 0.8rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-primary);
    border-bottom: 2px solid var(--text-muted);
    padding-bottom: var(--sp-1);
    margin-bottom: var(--sp-3);
    display: flex;
    justify-content: space-between;
    align-items: baseline;
}
.struct-group-head .struct-group-count { font-size: 0.7rem; font-weight: 500; color: var(--text-muted); text-transform: none; letter-spacing: 0; }
.struct-group .factory-grid { grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }
.struct-group .prod-board { grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); }

/* Palette production : filtres repliables (engrenage) */
.prod-gear-btn {
    flex-shrink: 0;
    width: 32px; height: 32px;
    display: flex; align-items: center; justify-content: center;
    background: var(--bg-raised);
    border: 1px solid var(--border-mid);
    border-radius: var(--r-md);
    color: var(--text-muted);
    cursor: pointer;
    font-size: 0.95rem;
    transition: border-color .15s, color .15s;
}
.prod-gear-btn:hover, .prod-gear-btn.active { border-color: var(--gold); color: var(--gold); }

.create-section-label {
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--text-muted);
    border-bottom: 1px solid var(--border-subtle);
    padding-bottom: var(--sp-2);
    margin-bottom: var(--sp-3);
}
.create-section-label-with-hint {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
}
.create-section-optional {
    padding: 2px 6px;
    border: 1px solid var(--border-subtle);
    border-radius: var(--r-full);
    color: var(--text-faint);
    background: var(--bg-hover);
    font-size: 0.58rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    line-height: 1.2;
}

/* ── Layout latéral (Technologies / Inventaire) ── */
.side-layout {
    display: flex;
    gap: var(--sp-5);
    align-items: flex-start;
}
.side-panel {
    flex: 0 0 auto;
    width: 235px;
    min-width: 190px;
    max-width: 480px;
    display: flex;
    flex-direction: column;
    gap: var(--sp-2);
    position: sticky;
    top: var(--sp-4);
}
.side-resizer {
    flex: 0 0 auto;
    width: 7px;
    align-self: stretch;
    cursor: col-resize;
    border-radius: 4px;
    background: transparent;
    transition: background .15s;
}
.side-resizer:hover, .side-resizer.dragging { background: var(--border-gold); }
@media (max-width: 900px) { .side-resizer { display: none; } }
.side-main {
    flex: 1;
    min-width: 0;
    border-left: 1px solid var(--border-subtle);
    padding-left: var(--sp-5);
}
@media (max-width: 900px) {
    .side-layout { flex-direction: column; }
    .side-panel { position: static; flex: none; width: 100% !important; max-width: none; }
    .side-main { border-left: none; padding-left: 0; width: 100%; }
}
.side-nav-btn {
    display: block;
    width: 100%;
    padding: 10px 12px;
    background: var(--bg-raised);
    border: 1px solid var(--border-mid);
    border-radius: var(--r-md);
    color: var(--text-secondary);
    font-size: 0.78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    text-align: center;
    cursor: pointer;
    font-family: inherit;
    transition: border-color .15s, color .15s, background .15s;
}
.side-nav-btn:hover { border-color: var(--border-gold); color: var(--text-primary); }
.side-nav-btn.active {
    background: var(--gold-subtle);
    border-color: var(--gold);
    color: var(--gold);
}
.side-cat-row { display: flex; gap: var(--sp-2); margin-bottom: var(--sp-2); }
.side-cat-row .btn { flex: 1; font-size: 0.8rem !important; padding: 6px 8px !important; }
.side-divider {
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--text-muted);
    border-bottom: 1px solid var(--border-subtle);
    padding-bottom: var(--sp-1);
    margin-top: var(--sp-3);
}
.side-filter-group { display: flex; flex-direction: column; gap: var(--sp-2); }
.side-filter-group .form-control,
.side-filter-group .filter-select {
    width: 100%;
    box-sizing: border-box;
    border-radius: var(--r-md);
    font-size: 0.8rem;
    padding: 6px 28px 6px 10px;
}
.side-filter-group input.form-control { padding: 6px 10px; }
.side-filter-label {
    font-size: 0.68rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-faint);
    margin-bottom: -4px;
}
.side-spec-row { display: flex; flex-wrap: nowrap; gap: 4px; padding-bottom: 2px; overflow: visible; }
.side-spec-row .btn { flex: 1 1 0; min-width: 0; white-space: nowrap; font-size: 0.68rem !important; padding: 3px 4px !important; }

/* Staff validation modal: value badge keeps fixed width, slider owns rest. */
.validation-difficulty-range { width: 100%; }
.validation-difficulty-range input[type="range"] { width: 100%; min-width: 0; }

/* Barre d'outils du contenu principal */
.main-toolbar {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    flex-wrap: wrap;
    padding-bottom: var(--sp-3);
    margin-bottom: var(--sp-3);
    border-bottom: 1px solid var(--border-subtle);
    font-size: 0.8rem;
}
.main-toolbar .toolbar-label { font-size: 0.75rem; color: var(--text-faint); }
.main-toolbar .toolbar-sep { width: 1px; align-self: stretch; background: var(--border-subtle); }

.btn-vendre {
    margin-left: auto;
    background: var(--gold) !important;
    color: var(--bg-void, #111) !important;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 8px 20px !important;
    border-radius: var(--r-md);
    border: none;
    cursor: pointer;
    font-family: inherit;
    font-size: 0.8rem;
    white-space: nowrap;
}
.btn-vendre:hover { background: var(--gold-light) !important; }

.step-panels .step-panel {
    display: none;
    animation: fadeIn 0.25s ease;
}

.step-panels .step-panel.active { display: block; }

/* Subtab fade */
.subtab-panel {
    opacity: 0;
    transition: opacity 0.15s ease;
    pointer-events: none;
}
.subtab-panel.subtab-visible {
    opacity: 1;
    pointer-events: auto;
}

.wizard-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-top: var(--sp-5);
    margin-top: var(--sp-5);
    border-top: 1px solid var(--border-subtle);
    gap: var(--sp-3);
}

.wizard-footer-right {
    display: flex;
    gap: var(--sp-3);
    align-items: center;
}

/* ============================================================
   ATTRIBUTES GRID
   ============================================================ */
.attributes-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--sp-4);
}

@media (max-width: 640px) { .attributes-grid { grid-template-columns: 1fr; } }

.attr-field {
    background: var(--bg-raised);
    border: 1px solid var(--border-mid);
    border-radius: var(--r-md);
    padding: var(--sp-4);
    transition: border-color var(--ease);
}

.attr-field:focus-within { border-color: var(--gold); }

.attr-field label {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    min-height: calc(0.78rem * 1.3 * 2);
    font-size: 0.78rem;
    font-weight: 600;
    line-height: 1.3;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-bottom: var(--sp-2);
}

.attr-field input,
.attr-field select {
    width: 100%;
    background: transparent;
    border: none;
    outline: none;
    color: var(--text-primary);
    font-size: 0.9rem;
    font-family: inherit;
    padding: 0;
}

.attr-field input::placeholder { color: var(--text-faint); }
.attr-field select option { background: var(--bg-raised); }

/* ── Arsenal › Technologies admin ──────────────────────────────────────
   Le catalogue commun du serveur. La carte reprend `.tech-card` de la page
   voisine ; seuls s'y ajoutent la ligne d'inspiration, la description et le
   tableau de caractéristiques, qui n'existent que sur cet écran. */

.tech-card-sub {
    margin-top: 2px;
    font-size: 0.8rem;
    color: var(--text-muted);
}

/* Une carte de catalogue : on la parcourt, on ne la lit pas. La première
   version dépliait description et caractéristiques dans la carte, ce qui
   donnait des vignettes hautes de plusieurs écrans — le détail est passé dans
   la modale, et la carte tient sur trois lignes. */
.tech-card--compact {
    cursor: pointer;
    transition: border-color 0.14s ease, transform 0.14s ease;
}
.tech-card--compact:hover,
.tech-card--compact:focus-visible {
    border-color: var(--gold);
    transform: translateY(-1px);
}
.tech-card--compact .tech-card-image {
    width: 64px;
    height: 64px;
    flex-shrink: 0;
}
/* Une classe à part plutôt qu'une redéfinition de `.tech-card-name` : ce nom
   est déjà défini une fois, et un second bloc portant le même sélecteur est
   exactement le motif qui avait fait disparaître les textures de séparateur et
   cassé la carte de « Mes technologies » (test_gd_css_collisions.py). Un nom à
   rallonge ne doit ni repousser les pastilles hors de la carte, ni faire varier
   la hauteur d'une vignette à l'autre. */
.tech-card-name-clip {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.tech-card-desc {
    margin: var(--sp-2) 0 0;
    font-size: 0.85rem;
    line-height: 1.5;
    color: var(--text-secondary);
}

/* Les caractéristiques sont un sac de clés libres, propre à chaque type de
   matériel : une grille auto-ajustée plutôt qu'un gabarit à colonnes fixes,
   qui casserait au premier type ayant deux attributs au lieu de dix. */
.admin-tech-attrs {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: var(--sp-1) var(--sp-3);
    margin-top: var(--sp-3);
    padding-top: var(--sp-3);
    border-top: 1px solid var(--bg-raised);
}

.admin-tech-attr {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--sp-2);
    font-size: 0.8rem;
}
.admin-tech-attr-key {
    color: var(--text-muted);
    text-transform: capitalize;
}
.admin-tech-attr-val {
    color: var(--text-primary);
    font-weight: 500;
    text-align: right;
}

/* Liste des technologies d'inspiration déjà saisies. Un <datalist> natif ne
   permet pas de hiérarchiser la ligne : le nom recherché s'y retrouvait au même
   niveau que le contexte. Ici le nom domine, le reste accompagne. */
.insp-combo { position: relative; }

.insp-list {
    position: absolute;
    z-index: 40;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    max-height: 260px;
    overflow-y: auto;
    margin: 0;
    padding: var(--sp-1);
    list-style: none;
    background: var(--bg-raised);
    border: 1px solid var(--gold-dark);
    border-radius: var(--r-md);
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.45);
}

.insp-item {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--sp-3);
    padding: var(--sp-2) var(--sp-3);
    border-radius: var(--r-sm);
    cursor: pointer;
}
.insp-item:hover { background: var(--bg-surface); }

.insp-name {
    font-weight: 600;
    font-size: 0.95rem;
    color: var(--text-primary);
}
.insp-meta {
    flex-shrink: 0;
    font-size: 0.78rem;
    color: var(--text-muted);
}

/* Une valeur préremplie depuis la technologie d'inspiration. Elle doit se
   distinguer d'une saisie : le joueur reste responsable de ce qu'il soumet, et
   valider sans regarder une valeur qu'on a posée à sa place est exactement ce
   qu'on ne veut pas encourager. Le titre du champ dit d'où elle vient. */
.attr-field input.is-prefilled {
    color: var(--gold-light);
    font-style: italic;
}
.attr-field input.is-prefilled:focus {
    color: var(--text-primary);
    font-style: normal;
}

/* ============================================================
   IMAGE UPLOAD ZONE
   ============================================================ */
.upload-stack {
    display: flex;
    flex-direction: column;
    gap: var(--sp-3);
}

.upload-progress-bar {
    height: 3px;
    background: var(--bg-hover);
    border-radius: var(--r-full);
    overflow: hidden;
}

.upload-progress-fill {
    height: 100%;
    background: var(--gold);
    width: 0%;
    transition: width 0.3s ease;
    border-radius: var(--r-full);
}

/* ============================================================
   TECHNOCENTRE CARDS
   ============================================================ */
.technocentre-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: var(--sp-3);
    margin-top: var(--sp-2);
}

.tc-card {
    background: var(--bg-raised);
    border: 2px solid var(--border-mid);
    border-radius: var(--r-md);
    padding: var(--sp-4);
    cursor: pointer;
    transition: all var(--ease);
    position: relative;
}

.tc-card:hover:not(.tc-occupied) {
    border-color: var(--gold);
    background: var(--gold-subtle);
}

.tc-card.selected {
    border-color: var(--gold);
    background: var(--gold-subtle);
    box-shadow: 0 0 0 1px var(--gold-dark);
}

.tc-card.tc-occupied {
    opacity: 0.45;
    cursor: not-allowed;
}

.tc-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--sp-2);
}

.tc-level {
    font-family: 'Rajdhani', sans-serif;
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--gold);
    background: var(--gold-subtle);
    border: 1px solid var(--border-gold);
    border-radius: var(--r-sm);
    padding: 2px 8px;
}

.tc-card-name {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: var(--sp-1);
}

.tc-card-spec {
    font-size: 0.75rem;
    color: var(--text-muted);
}

.tc-selected-check {
    position: absolute;
    top: var(--sp-2);
    right: var(--sp-2);
    width: 20px; height: 20px;
    background: var(--gold);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.7rem;
    color: var(--bg-void);
    opacity: 0;
    transition: opacity var(--ease);
}

.tc-card.selected .tc-selected-check { opacity: 1; }

/* ============================================================
   MODAL
   ============================================================ */
.modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.75);
    backdrop-filter: blur(4px);
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--sp-4);
}

.modal-box {
    background: var(--bg-surface);
    border: 1px solid var(--border-mid);
    border-radius: var(--r-xl);
    width: 100%;
    max-width: 560px;
    max-height: 90vh;
    overflow-y: auto;
    box-shadow: 0 24px 80px rgba(0,0,0,0.6);
}

.modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--sp-5) var(--sp-6);
    border-bottom: 1px solid var(--border-subtle);
}

.modal-header h3 {
    font-size: 1.1rem;
    color: var(--text-primary);
    margin: 0;
}

.modal-close {
    background: none;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    font-size: 1rem;
    padding: var(--sp-1);
    border-radius: var(--r-sm);
    transition: color var(--ease);
}

.modal-close:hover { color: var(--text-primary); }

.modal-body {
    padding: var(--sp-5) var(--sp-6);
    display: flex;
    flex-direction: column;
    gap: var(--sp-5);
}

.modal-footer {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: var(--sp-3);
    padding: var(--sp-4) var(--sp-6);
    border-top: 1px solid var(--border-subtle);
}

/* Tech summary in modal */
.modal-tech-summary {
    display: flex;
    gap: var(--sp-4);
    align-items: flex-start;
    padding: var(--sp-4);
    background: var(--bg-raised);
    border-radius: var(--r-md);
}

.modal-tech-image {
    width: 60px;
    height: 60px;
    object-fit: cover;
    border-radius: var(--r-sm);
    flex-shrink: 0;
}

.modal-tech-image.placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-hover);
    font-size: 1.5rem;
}

.modal-tech-info { flex: 1; }
.modal-tech-name { font-weight: 700; color: var(--text-primary); margin-bottom: var(--sp-1); }
.modal-tech-meta { font-size: 0.8rem; color: var(--text-muted); }

/* Costs grid */
.costs-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--sp-3);
    margin-top: var(--sp-3);
}

.cost-item {
    background: var(--bg-raised);
    border: 1px solid var(--border-mid);
    border-radius: var(--r-md);
    padding: var(--sp-3);
}

.cost-item .cost-label {
    font-size: 0.75rem;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: var(--sp-1);
}

.cost-item .cost-value {
    font-family: 'Rajdhani', sans-serif;
    font-size: 1rem;
    font-weight: 700;
    color: var(--gold);
}

/* My Technologies grid */
.tech-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: var(--sp-4);
    padding: var(--sp-4) 0;
}

.tech-card {
    display: flex;
    flex-direction: column;
    border: 1px solid var(--border-mid);
    border-radius: var(--r-lg);
    background: var(--bg-raised);
    transition: border-color .15s, box-shadow .15s;
    overflow: hidden;
}
.tech-card:hover {
    border-color: var(--border-gold);
    box-shadow: 0 2px 16px rgba(213,182,84,0.07);
}

/* Top section: image + info */
.tech-card-body {
    display: flex;
    align-items: flex-start;
    gap: var(--sp-4);
    padding: var(--sp-4);
}

/* Image */
.tech-card-image {
    width: 72px;
    height: 72px;
    object-fit: cover;
    border-radius: var(--r-md);
    flex-shrink: 0;
    background: var(--bg-overlay);
    border: 1px solid var(--border-subtle);
}
.tech-card-image.placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.8rem;
    color: var(--text-faint);
}

/* Info block */
.tech-card-info {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 5px;
}
.tech-card-name {
    font-weight: 700;
    font-size: 1rem;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.2;
}
.tech-card-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}
.tech-card-pill {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 1px 7px;
    border-radius: var(--r-full);
    font-size: 0.7rem;
    font-weight: 500;
    background: var(--bg-overlay);
    color: var(--text-muted);
    border: 1px solid var(--border-subtle);
    white-space: nowrap;
}
.tech-card-pill.gold { border-color: rgba(213,182,84,0.4); color: var(--gold); background: var(--gold-subtle); }
.tech-card-pill.mono { font-family: monospace; font-size: 0.65rem; color: var(--text-faint); border-color: transparent; background: transparent; padding: 0; }

/* Actions bar */
.tech-card-actions {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 8px var(--sp-4) 10px;
    border-top: 1px solid rgba(255,255,255,0.05);
}
.tech-card-btns {
    display: flex;
    flex-direction: column;
    border-top: 1px solid rgba(255,255,255,0.05);
    width: 100%;
}
.tech-card-btns .tc-btn {
    border-radius: 0 !important;
    border: none !important;
    border-bottom: 1px solid rgba(255,255,255,0.04) !important;
    background: rgba(255,255,255,0.03) !important;
    color: var(--text-muted) !important;
}
.tech-card-btns .tc-btn:first-child {
    border-radius: var(--r-md) var(--r-md) 0 0 !important;
}
.tech-card-btns .tc-btn:last-child {
    border-radius: 0 0 var(--r-md) var(--r-md) !important;
}
.tech-card-btns .tc-btn:only-child {
    border-radius: var(--r-md) !important;
}
.tech-card-btns .tc-btn:hover {
    background: rgba(255,255,255,0.07) !important;
    color: var(--text-primary) !important;
}
.tech-card-btns .tc-btn.info {
    background: rgba(96,165,250,0.10) !important;
    color: #93c5fd !important;
}
.tech-card-btns .tc-btn.info:hover {
    background: rgba(96,165,250,0.18) !important;
}
.tech-card-btns .tc-btn.primary {
    background: var(--gold-subtle) !important;
    color: var(--gold) !important;
}
.tech-card-btns .tc-btn.primary:hover {
    background: rgba(213,182,84,0.2) !important;
}
.tech-card-btns .tc-btn.danger {
    background: rgba(239,68,68,0.08) !important;
    color: #fca5a5 !important;
}
.tech-card-btns .tc-btn.danger:hover {
    background: rgba(239,68,68,0.15) !important;
}
.tc-btn {
    display: block !important;
    width: 100% !important;
    box-sizing: border-box !important;
    padding: 8px 10px;
    border-radius: var(--r-md);
    font-size: 0.72rem;
    font-weight: 600;
    cursor: pointer;
    border: 1px solid var(--border-mid);
    background: transparent;
    color: var(--text-secondary);
    transition: border-color .12s, color .12s, background .12s;
    white-space: nowrap;
    text-align: center;
    font-family: inherit;
    line-height: 1.4;
}
.tc-btn:hover { border-color: var(--border-gold); color: var(--text-primary); }
.tc-btn.primary { background: var(--gold-subtle); border-color: var(--gold); color: var(--gold); font-weight: 600; }
.tc-btn.primary:hover { background: rgba(213,182,84,0.2); }
.tc-btn.danger { border-color: rgba(239,68,68,0.4); color: #fca5a5; }
.tc-btn.danger:hover { border-color: #ef4444; background: rgba(239,68,68,0.08); }
.tc-btn.info { border-color: rgba(96,165,250,0.4); color: #93c5fd; }
.tc-btn.info:hover { border-color: #60a5fa; background: rgba(96,165,250,0.08); }
.tc-btn.success { border-color: rgba(16,185,129,0.4); color: #6ee7b7; }
.tc-btn.success:hover { border-color: #10b981; background: rgba(16,185,129,0.08); }
.tech-card-btns .tc-btn.success { background: rgba(16,185,129,0.08) !important; color: #6ee7b7 !important; }
.tech-card-btns .tc-btn.success:hover { background: rgba(16,185,129,0.15) !important; }
.tech-card--pending { border-color: rgba(245,166,35,0.4) !important; box-shadow: 0 0 0 1px rgba(245,166,35,0.15); }

.tech-card-status { display: none; }

/* Pending tech cards */
.pending-tech-card {
    border: 1px solid var(--border-mid);
    border-radius: var(--r-lg);
    overflow: hidden;
    background: var(--bg-raised);
    transition: border-color var(--ease);
}

.pending-tech-card:hover { border-color: var(--border-gold); }

.pending-tech-header {
    display: flex;
    align-items: center;
    gap: var(--sp-4);
    padding: var(--sp-4);
    cursor: pointer;
}

.pending-tech-thumb {
    width: 56px;
    height: 56px;
    border-radius: var(--r-sm);
    object-fit: cover;
    flex-shrink: 0;
    background: var(--bg-hover);
}

.pending-tech-thumb.placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
}

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

.pending-tech-name {
    font-weight: 700;
    font-size: 0.95rem;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.pending-tech-sub {
    font-size: 0.78rem;
    color: var(--text-muted);
    margin-top: 2px;
}

.pending-tech-actions {
    display: flex;
    gap: var(--sp-2);
    flex-shrink: 0;
}

.pending-tech-body {
    display: none;
    padding: 0 var(--sp-4) var(--sp-4);
    border-top: 1px solid var(--border-subtle);
    padding-top: var(--sp-4);
}

.pending-tech-body.expanded { display: block; }

.pending-tech-attrs {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--sp-2);
    margin-top: var(--sp-3);
    font-size: 0.82rem;
}

.pending-attr-item { color: var(--text-secondary); }
.pending-attr-item strong { color: var(--text-primary); }

.pending-tech-description {
    font-size: 0.85rem;
    color: var(--text-secondary);
    line-height: 1.6;
    margin-top: var(--sp-3);
}

@media (max-width: 640px) {
    .pending-tech-actions { flex-direction: column; }
    .costs-grid { grid-template-columns: 1fr; }
    .pending-tech-attrs { grid-template-columns: 1fr; }
}

/* ── Image Lightbox ──────────────────────────────────────────────── */
.img-zoomable {
    cursor: zoom-in;
    transition: opacity var(--ease);
}
.img-zoomable:hover { opacity: 0.85; }

#img-lightbox {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 9999;
    background: rgba(0,0,0,0.85);
    align-items: center;
    justify-content: center;
    cursor: zoom-out;
    backdrop-filter: blur(4px);
    animation: lb-in 0.15s ease;
}
#img-lightbox.open { display: flex; }
#img-lightbox img {
    max-width: min(90vw, 900px);
    max-height: 85vh;
    border-radius: var(--r-lg);
    box-shadow: 0 8px 40px rgba(0,0,0,0.6);
    object-fit: contain;
    user-select: none;
}
#img-lightbox-close {
    position: absolute;
    top: 16px;
    right: 20px;
    font-size: 1.75rem;
    color: #fff;
    cursor: pointer;
    line-height: 1;
    opacity: 0.7;
    transition: opacity var(--ease);
}
#img-lightbox-close:hover { opacity: 1; }
@keyframes lb-in {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* ============================================================
   FACTORY & TECHNOCENTRE CARDS
   ============================================================ */
.factory-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: var(--sp-4);
}
.factory-card {
    background: var(--bg-raised);
    border: 1px solid var(--border-subtle);
    border-radius: var(--r-lg);
    padding: var(--sp-4);
    transition: border-color var(--ease), box-shadow var(--ease);
}
.factory-card:hover {
    border-color: var(--border-gold, #D5B654);
    box-shadow: 0 4px 20px rgba(213,182,84,0.08);
}
.prod-slot-bar-wrap {
    height: 8px;
    background: var(--bg-inset, #1a1a2e);
    border-radius: 4px;
    overflow: hidden;
    margin-bottom: var(--sp-1);
}
.prod-slot-bar-fill {
    height: 100%;
    border-radius: 4px;
    transition: width 0.3s ease, background 0.3s ease;
}

/* ============================================================
   RESPONSIVE MOBILE
   ============================================================ */
@media (max-width: 640px) {
    /* Anti-décalage : rien ne doit dépasser la largeur du viewport */
    #app-section { min-width: 0; max-width: 100vw; overflow-x: hidden; }

    /* Entêtes de card : les groupes de boutons alignés à droite passent
       en pleine largeur sous le titre au lieu de déborder */
    .card-header { flex-wrap: wrap; }
    .card-header > div[style*="margin-left:auto"] {
        margin-left: 0 !important;
        flex-shrink: 1 !important;
        width: 100%;
        flex-wrap: wrap;
    }
    .card-header > div[style*="margin-left:auto"] .btn,
    .card-header > div[style*="margin-left:auto"] .btn-vendre {
        flex: 1 1 auto;
        white-space: normal;
    }

    /* Créer : entête empilée (titre / secret / bouton vert) */
    .create-head { flex-direction: column; align-items: stretch; gap: var(--sp-3); }
    .create-head .card-header { flex: none; }
    .create-head .create-head-secret {
        border-left: none;
        border-right: none;
        padding: 0;
        justify-content: flex-start;
        align-self: auto;
    }
    .create-head .btn-submit-green { width: 100%; white-space: normal; }

    /* Barres d'outils : séparateurs inutiles, boutons pleine largeur */
    .tab-toolbar { gap: var(--sp-2); }
    .tab-toolbar .toolbar-sep,
    .main-toolbar .toolbar-sep { display: none; }
    .main-toolbar .btn-vendre { width: 100%; margin-left: 0; }

    /* Groupes par spécialisation : une colonne */
    .struct-groups { flex-direction: column; }
    .struct-group { min-width: 0; width: 100%; flex: none; }
    .struct-group .factory-grid,
    .struct-group .prod-board { grid-template-columns: 1fr; }

    /* Créer : image au-dessus des champs déjà géré, mais serrer les paddings */
    .create-col-right { gap: var(--sp-3); }

    /* Card */
    .card { padding: var(--sp-4); }
    .card-header { gap: var(--sp-3); margin-bottom: var(--sp-4); padding-bottom: var(--sp-3); }
    .card-icon { width: 36px; height: 36px; font-size: 1.1rem; }

    /* Sub-tabs */
    #my-tech .card-header { flex-wrap: wrap; }
    .sub-tab-btn { font-size: 0.75rem !important; padding: 4px 8px !important; }

    /* Filter + search bars : empiler verticalement */
    #subtab-my-techs > div:first-child,
    #subtab-licenses-received > div:first-child,
    #subtab-licenses-distributed > div:first-child {
        flex-direction: column;
        align-items: flex-start;
    }
    #my-techs-search,
    #lic-received-search,
    #lic-dist-search {
        max-width: 100% !important;
        margin-left: 0 !important;
        width: 100%;
    }

    /* Grids : 1 colonne */
    .tech-grid { grid-template-columns: 1fr !important; }
    .factory-grid { grid-template-columns: 1fr; }

    /* Inline 2-col grids in modals (costs, attrs, stats forms) : 1 colonne */
    [style*="grid-template-columns:1fr 1fr"] { grid-template-columns: 1fr !important; }

    /* Factory card header : wrap */
    .tc-card-header { flex-wrap: wrap; gap: var(--sp-2); }

    /* Bouton Construire dans card-header */
    .card-header > .btn { margin-left: 0 !important; width: 100%; justify-content: center; }

    /* Modal : full screen */
    .modal-overlay { padding: 0; align-items: flex-end; }
    .modal-box {
        max-width: 100% !important;
        border-radius: var(--r-xl) var(--r-xl) 0 0;
        max-height: 92vh;
    }


    /* Production modal slot preview */
    #prod-preview-info { font-size: 0.72rem; }

    /* Empty state */
    .empty-state { padding: var(--sp-8); }

    .prod-editor-layout { flex-direction: column !important; }
    .prod-palette { width: auto !important; max-width: none !important; resize: none !important; max-height: none !important; position: static !important; }
}

/* ============================================================
   PRODUCTION EDITOR
   ============================================================ */
.prod-editor-layout {
    display: flex;
    gap: var(--sp-1);
    align-items: stretch;
    height: calc(100vh - 220px);
    min-height: 400px;
}
.prod-palette {
    flex: 0 0 auto;
    width: 250px;
    min-width: 190px;
    max-width: 700px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    padding: var(--sp-3);
    align-self: flex-start;
    position: sticky;
    top: 0;
    max-height: 100%;
}
.prod-resizer {
    flex: 0 0 auto;
    width: 7px;
    align-self: stretch;
    cursor: col-resize;
    border-radius: 4px;
    background: transparent;
    transition: background .15s;
}
.prod-resizer:hover, .prod-resizer.dragging { background: var(--border-gold); }
.prod-board-wrap { flex: 1 1 auto; min-width: 0; overflow-y: auto; }
.prod-palette-header { display: flex; flex-direction: column; gap: var(--sp-2); margin-bottom: var(--sp-2); }
.prod-search, .prod-input {
    width: 100%; padding: 7px 10px; background: var(--bg-raised);
    border: 1px solid var(--border-mid); border-radius: var(--r-md);
    color: var(--text-primary); font-size: 0.82rem; box-sizing: border-box;
    outline: none; transition: border-color .15s, box-shadow .15s;
}
.prod-search:focus, .prod-input:focus {
    border-color: var(--gold);
    box-shadow: 0 0 0 3px var(--gold-subtle);
}
.prod-input { margin-top: 4px; }
.prod-palette-filters { display: flex; gap: 4px; margin-bottom: var(--sp-2); }
.prod-pspec-btn { font-size: 0.72rem !important; padding: 3px 8px !important; flex: 1; }
.prod-pspec-btn.active { border-color: var(--gold) !important; color: var(--gold) !important; }
.prod-palette-list { overflow-y: auto; flex: 1; display: flex; flex-direction: column; gap: 6px; padding-right: 2px; }
.prod-tech-card {
    background: var(--bg-raised); border: 1px solid var(--border-subtle);
    border-radius: var(--r-md); padding: 8px 10px; cursor: grab;
    transition: border-color .15s, transform .1s;
}
.prod-tech-card:hover { border-color: var(--border-gold); }
.prod-tech-card:active { cursor: grabbing; transform: scale(0.98); }
.sinv-card { cursor: pointer; }
.sinv-card:active { cursor: pointer; transform: none; }
.sinv-card-selected { border-color: var(--gold) !important; background: rgba(212,175,55,0.08) !important; }
.prod-tech-card.dragging { opacity: 0.5; }
.prod-tech-name { font-size: 0.82rem; font-weight: 600; color: var(--text-primary); }
.prod-tech-meta { font-size: 0.72rem; color: var(--text-muted); margin-top: 2px; display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.prod-tech-lvl { background: var(--gold-subtle); color: var(--gold); border: 1px solid var(--border-gold); border-radius: 4px; padding: 0 5px; font-weight: 600; }
.prod-type-sep { display: flex; justify-content: space-between; align-items: center; font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-faint); border-bottom: 1px solid var(--border-subtle); padding: 6px 2px 3px; margin-top: 4px; }
.prod-type-count { background: var(--bg-base); border-radius: 8px; padding: 0 6px; color: var(--text-muted); }
.prod-board { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: var(--sp-3); }
.prod-factory {
    background: var(--bg-surface); border: 1px solid var(--border-subtle);
    border-radius: var(--r-lg); padding: var(--sp-3); display: flex; flex-direction: column; gap: var(--sp-2);
    transition: border-color .15s, background .15s;
}
.prod-factory.drop-ok { border-color: var(--gold); background: var(--gold-subtle); }
.prod-factory.drop-bad { border-color: rgba(239,68,68,0.5); background: rgba(239,68,68,0.06); }
.prod-factory-head { display: flex; justify-content: space-between; align-items: flex-start; }
.prod-cap-bar { height: 6px; background: var(--bg-base); border-radius: 3px; overflow: hidden; }
.prod-cap-fill { height: 100%; background: var(--gold); transition: width .3s; }
.prod-month-lane { border-top: 1px solid var(--border-subtle); padding: 8px 0 0; }
.prod-month-label { font-size: 0.7rem; color: var(--text-secondary); text-transform: uppercase; letter-spacing: 0.04em; margin-bottom: 6px; }
.prod-chip {
    display: flex; align-items: center; gap: 6px; background: var(--bg-raised);
    border: 1px solid var(--border-subtle); border-radius: var(--r-md);
    padding: 7px 10px; margin-bottom: 5px; cursor: grab; font-size: 0.78rem;
}
.prod-chip-detail-btn {
    flex-shrink: 0; font-size: 0.68rem; padding: 2px 8px;
    background: transparent; border: 1px solid var(--border-subtle);
    border-radius: var(--r-full); color: var(--text-muted); cursor: pointer;
    transition: background .15s, border-color .15s, color .15s;
}
.prod-chip-detail-btn:hover { background: var(--bg-surface); border-color: var(--border-mid); color: var(--text-primary); }
.prod-chip:hover { border-color: var(--border-mid); }
.prod-chip.dragging { opacity: 0.5; }
.prod-chip.selected { border-color: var(--gold); background: var(--gold-subtle); }
.prod-chip-body { flex: 1; min-width: 0; }
.prod-chip-name { color: var(--text-secondary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.prod-chip-meta { color: var(--text-muted); font-size: 0.7rem; }
.prod-chip-x { color: #fca5a5; cursor: pointer; font-size: 0.85rem; padding: 0 2px; font-weight: 700; line-height: 1; flex-shrink: 0; }
.prod-chip-x::before { content: '✕'; }
.prod-chip-x:hover { color: #f87171; }
.prod-fac-cancel {
    width: 22px; height: 22px;
    display: flex; align-items: center; justify-content: center;
    background: rgba(239,68,68,0.12);
    border: 1px solid rgba(239,68,68,0.35);
    border-radius: var(--r-sm);
    color: #fca5a5;
    font-size: 0.78rem;
    font-weight: 700;
    line-height: 1;
    cursor: pointer;
    flex-shrink: 0;
    transition: background .15s, color .15s;
}
.prod-fac-cancel:hover { background: rgba(239,68,68,0.25); color: #f87171; }
.prod-tech-thumb {
    width: 40px; height: 40px;
    border-radius: var(--r-sm);
    object-fit: cover;
    flex-shrink: 0;
    border: 1px solid var(--border-subtle);
    background: var(--bg-overlay);
}
.prod-tech-thumb.placeholder {
    display: flex; align-items: center; justify-content: center;
    color: var(--text-faint);
    font-size: 1rem;
}
.filter-select {
    appearance: none;
    -webkit-appearance: none;
    background: var(--bg-raised) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%23888'/%3E%3C/svg%3E") no-repeat right 9px center;
    background-size: 8px 5px;
    border: 1px solid var(--border-mid);
    border-radius: var(--r-full);
    color: var(--text-secondary);
    font-size: 0.75rem;
    font-family: inherit;
    font-weight: 500;
    padding: 3px 28px 3px 12px;
    cursor: pointer;
    transition: border-color .15s, background-color .15s, color .15s, box-shadow .15s;
    outline: none;
    min-width: 0;
    white-space: nowrap;
}
.filter-select:hover { border-color: rgba(255,255,255,0.22); color: var(--text-primary); }
.filter-select:focus { border-color: var(--gold); box-shadow: 0 0 0 2px var(--gold-subtle); color: var(--text-primary); }
.filter-select.has-value { background-color: var(--gold-subtle); border-color: var(--gold); color: var(--gold); font-weight: 600; }
.filter-select option { background: var(--bg-overlay); color: var(--text-primary); font-weight: 400; }

.fprod-type-chip {
    display: inline-flex; align-items: center; padding: 4px 12px;
    border-radius: var(--r-full); font-size: 0.75rem; cursor: pointer;
    border: 1px solid var(--border-subtle); background: var(--bg-raised);
    color: var(--text-muted); transition: background .15s, border-color .15s, color .15s;
}
.fprod-type-chip:hover { border-color: var(--border-mid); color: var(--text-primary); }
.fprod-type-chip.active { background: var(--gold-subtle); border-color: var(--gold); color: var(--gold); font-weight: 600; }
.fprod-tech-row {
    display: flex; align-items: center; gap: 12px; padding: 9px 12px;
    border-bottom: 1px solid var(--border-subtle); cursor: pointer;
    transition: background .12s;
}
.fprod-tech-row:last-child { border-bottom: none; }
.fprod-tech-row:hover { background: var(--bg-surface); }
.fprod-tech-row.selected { background: rgba(245,166,35,0.1); border-left: 2px solid var(--gold); padding-left: 10px; }
.prod-bulk-bar {
    display: flex; justify-content: space-between; align-items: center;
    background: var(--bg-raised); border: 1px solid var(--border-gold);
    border-radius: var(--r-md); padding: 8px 12px; margin-bottom: var(--sp-3); font-size: 0.82rem;
}
.prod-dist-factories { display: flex; flex-direction: column; gap: 6px; max-height: 280px; overflow-y: auto; }
.prod-dist-row {
    display: flex; align-items: flex-start; gap: var(--sp-2); padding: 8px 10px;
    background: var(--bg-raised); border: 1px solid var(--border-subtle); border-radius: var(--r-md);
}
.prod-dist-row.disabled { opacity: 0.4; }
.dist-tech-row { display:flex;align-items:center;gap:10px;padding:7px 10px;border-bottom:1px solid var(--border-subtle);cursor:pointer;transition:background .1s; }
.dist-tech-row:last-child { border-bottom:none; }
.dist-tech-row:hover { background:var(--bg-surface); }
.dist-tech-row.selected { background:rgba(245,166,35,0.1);border-left:2px solid var(--gold);padding-left:8px; }
.dist-type-chip { display:inline-flex;align-items:center;padding:2px 10px;border-radius:var(--r-full);font-size:0.72rem;cursor:pointer;border:1px solid var(--border-subtle);background:var(--bg-raised);color:var(--text-muted);transition:background .12s,border-color .12s,color .12s; }
.dist-type-chip:hover { border-color:var(--border-mid);color:var(--text-primary); }
.dist-type-chip.active { background:var(--gold-subtle);border-color:var(--gold);color:var(--gold);font-weight:600; }
.prod-dist-row input[type=number] { width: 80px; }

/* Custom checkbox */
.dist-check-wrap { position:relative;width:18px;height:18px;flex-shrink:0;margin-top:1px; }
.dist-check-wrap input[type=checkbox] { position:absolute;opacity:0;width:100%;height:100%;margin:0;cursor:pointer;z-index:1; }
.dist-check-box { display:block;position:relative;width:18px;height:18px;border:1.5px solid var(--border-mid);border-radius:5px;background:var(--bg-raised);transition:background .15s,border-color .15s; }
.dist-check-wrap input:checked ~ .dist-check-box { background:var(--gold-subtle);border-color:var(--gold); }
.dist-check-wrap input:checked ~ .dist-check-box::after { content:'';position:absolute;left:5px;top:2px;width:5px;height:9px;border:2px solid var(--gold);border-top:none;border-left:none;transform:rotate(45deg); }

/* Dist factory bar preview */
.dist-fac-bar-wrap { position:relative;height:6px;background:var(--bg-base);border-radius:3px;overflow:hidden;margin-top:4px; }
.dist-fac-bar-existing { position:absolute;left:0;top:0;height:100%;background:var(--border-subtle);border-radius:3px;transition:width .25s; }
.dist-fac-bar-preview { position:absolute;top:0;height:100%;border-radius:3px;transition:left .25s,width .25s; }

/* Dist tech queue */
.dist-queue-row { display:flex;align-items:center;gap:8px;padding:5px 8px;background:var(--bg-raised);border:1px solid var(--border-subtle);border-radius:var(--r-md);margin-bottom:4px; }
.dist-queue-row.adding { border-color:var(--gold);background:var(--gold-subtle); }


/* ══════════════════════════════════════════════════════════════════════════
   Marché — la feuille du MilitaryCatalog (templates/catalog.html), verbatim.
   ══════════════════════════════════════════════════════════════════════════
   Même raison que plus haut : la vitrine a son rendu, on le reprend au lieu
   d'en inventer un moins bon. Les tuiles `.v-tech` (image pleine, nom en
   bas-de-dégradé, pastille de niveau, pastille de disponibilité, pied avec
   prix + bouton panier), la fiche technique et le popover de quantité sont
   ceux du catalogue.

   Seule adaptation : la barre de retour `.viewer-topbar` du catalogue est
   inutile ici — l'Arsenal a déjà sa navigation — mais elle est conservée
   pour ne pas faire diverger le fichier de sa source.
   ══════════════════════════════════════════════════════════════════════════ */

/* ── Top bar: retour ───────────────────────────────────────── */
.viewer-topbar { display: flex; align-items: center; gap: var(--sp-4); border: 1px solid var(--border-mid); border-radius: var(--r-md); padding: var(--sp-2) var(--sp-4); margin-bottom: var(--sp-3); background: var(--bg-surface); }
.back-link { display: inline-flex; align-items: center; gap: var(--sp-2); color: var(--text-secondary); text-decoration: none; font-family: 'Rajdhani', sans-serif; font-size: 0.9rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; transition: color var(--ease); }
.back-link:hover { color: var(--gold); }
.viewer-topbar-title { flex: 1; display: flex; align-items: baseline; gap: var(--sp-2); min-width: 0; font-family: 'Rajdhani', sans-serif; text-transform: uppercase; letter-spacing: 0.04em; white-space: nowrap; overflow: hidden; }
.viewer-topbar-title .vt-country { font-size: 1.05rem; font-weight: 700; color: var(--gold); }
.viewer-topbar-title .vt-sub { font-size: 0.8rem; color: var(--text-muted); overflow: hidden; text-overflow: ellipsis; }

/* ── Layout: filter sidebar + canvas ───────────────────────── */
.catalog-layout { display: flex; gap: var(--sp-3); align-items: flex-start; }
.catalog-main { flex: 1; min-width: 0; background: var(--bg-surface); border: 1px solid var(--border-mid); border-radius: var(--r-md); padding: var(--sp-4); min-height: 70vh; }

.filter-toggle-btn { display: none; flex-shrink: 0; }
.filter-sidebar { width: 230px; flex-shrink: 0; position: sticky; top: 70px; max-height: calc(100vh - 82px); overflow-y: auto; background: var(--bg-surface); border: 1px solid var(--border-mid); border-radius: var(--r-md); padding: var(--sp-3); display: none; flex-direction: column; gap: var(--sp-3); }
.filter-sidebar-close { display: none; }
.catalog-search-input, .filter-select { width: 100%; padding: var(--sp-2) var(--sp-3); background: var(--bg-raised); color: var(--text-primary); border: 1px solid var(--border-mid); border-radius: var(--r-md); font-size: 0.82rem; font-family: inherit; outline: none; box-sizing: border-box; }
.catalog-search-input:focus, .filter-select:focus { border-color: var(--gold); }
.filter-select { cursor: pointer; font-family: 'Rajdhani', sans-serif; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; }
.filter-section-title { font-size: 0.62rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-faint); margin-bottom: var(--sp-1); padding-bottom: var(--sp-1); border-bottom: 1px solid var(--border-subtle); }
.filter-check-row { display: flex; align-items: center; gap: var(--sp-2); padding: 0.2rem 0; cursor: pointer; }
.filter-check-row input[type=checkbox] { accent-color: var(--gold); width: 13px; height: 13px; flex-shrink: 0; cursor: pointer; }
.filter-check-label { font-size: 0.78rem; color: var(--text-secondary); cursor: pointer; user-select: none; flex: 1; }
.filter-check-row:hover .filter-check-label { color: var(--gold); }
.filter-reset-btn { width: 100%; padding: var(--sp-2) var(--sp-3); background: none; border: 1px solid var(--border-mid); border-radius: var(--r-md); color: var(--text-muted); font-size: 0.72rem; font-family: inherit; cursor: pointer; transition: all var(--ease); }
.filter-reset-btn:hover { border-color: var(--gold); color: var(--gold); }
.filter-hint { font-size: 0.65rem; color: var(--text-faint); line-height: 1.4; }

/* ── Canvas grid (mirror of the editor, read-only) ─────────── */
.v-canvas { display: grid; grid-template-columns: repeat(4, 1fr); grid-auto-rows: 58px; gap: var(--sp-3); }
/* Le catalogue a la pleine largeur de page ; ici la vitrine partage l'espace
   avec la barre latérale du hub, donc la grille s'adapte au lieu de garder
   quatre colonnes fixes qui laissaient les tuiles tassées à gauche. */
.side-main .v-canvas { grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); }
.v-block { border-radius: var(--r-md); overflow: hidden; }
/* `background-color`, jamais le raccourci `background` : le raccourci remet
   background-image à none, et comme cette règle est plus spécifique que les
   `.tex-*`, elle effaçait la texture choisie. Le réglage existait, se
   sauvegardait, et ne se voyait nulle part. */
.v-block.is-sep { grid-column: 1 / -1; grid-row: span 1; display: flex; align-items: center; gap: var(--sp-3); padding: 0 var(--sp-4); border: 1px solid var(--border-subtle); border-radius: var(--r-md); background-color: var(--gold-subtle); }
.v-sep-label { font-family: 'Rajdhani', sans-serif; font-size: 1.05rem; font-weight: 700; color: var(--sep-text, var(--sep-color, var(--gold))); text-transform: uppercase; letter-spacing: 0.08em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* Côté lecteur, le séparateur porte la couleur choisie par le vendeur — sinon
   l'habillage réglé dans l'éditeur ne serait visible que dans l'éditeur. */
.v-block.is-sep { background-color: var(--sep-tint, var(--gold-subtle)); border-color: var(--sep-color, var(--border-subtle)); }
.v-sep-line { flex: 1; height: 1px; background: var(--border-gold); opacity: 0.5; }

.v-tech { position: relative; height: 100%; background: var(--bg-raised); border: 1px solid var(--border-mid); border-radius: var(--r-md); overflow: hidden; display: flex; flex-direction: column; cursor: pointer; transition: border-color var(--ease), transform var(--ease); }
.v-tech:hover { border-color: var(--border-gold); transform: translateY(-2px); }
.v-tech.spec-terrestre { border-left: 3px solid var(--spec-terrestre); }
.v-tech.spec-aerienne  { border-left: 3px solid var(--spec-aerienne); }
.v-tech.spec-navale    { border-left: 3px solid var(--spec-navale); }
.v-tech-img { flex: 1; min-height: 0; position: relative; background: var(--bg-overlay); display: flex; align-items: center; justify-content: center; color: var(--text-faint); font-size: 1.8rem; }
.v-tech-img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.v-tech-name { position: absolute; left: 0; right: 0; bottom: 0; padding: var(--sp-4) var(--sp-2) var(--sp-1); background: linear-gradient(transparent, rgba(0,0,0,0.88)); font-family: 'Rajdhani', sans-serif; font-size: 0.9rem; font-weight: 700; color: #fff; text-transform: uppercase; letter-spacing: 0.03em; line-height: 1.15; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.v-tech-niv { position: absolute; top: 6px; left: 6px; font-family: 'Rajdhani', sans-serif; font-size: 0.55rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; padding: 0.1rem 0.4rem; border-radius: var(--r-sm); background: rgba(0,0,0,0.75); color: var(--text-secondary); }
.v-tech-availability { position: absolute; top: 6px; right: 6px; width: 9px; height: 9px; border-radius: 50%; }
.v-tech-availability.ready { background: var(--success); box-shadow: 0 0 6px var(--success); }
.v-tech-availability.pending { background: var(--warning); box-shadow: 0 0 6px var(--warning); }
.v-tech-foot { flex-shrink: 0; display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2); padding: var(--sp-1) var(--sp-2); background: var(--bg-void); border-top: 1px solid var(--border-subtle); }
.v-tech-price { font-family: 'Rajdhani', sans-serif; font-size: 0.9rem; font-weight: 700; color: var(--gold); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.v-cart-btn { flex-shrink: 0; padding: 2px 8px; background: var(--bg-raised); border: 1px solid var(--border-mid); border-radius: var(--r-sm); color: var(--text-muted); font-size: 0.68rem; font-weight: 700; font-family: inherit; cursor: pointer; transition: all var(--ease); text-transform: uppercase; }
.v-cart-btn:hover { border-color: var(--gold); color: var(--gold); background: var(--gold-subtle); }
.v-cart-btn.in-cart { border-color: var(--gold); color: var(--gold); background: var(--gold-subtle); }
.v-cart-btn:disabled { opacity: 0.4; cursor: not-allowed; }

/* ── Item detail modal (fiche technique) ───────────────────── */
.fiche-overlay { position: fixed; inset: 0; z-index: 8800; background: rgba(0,0,0,0.7); backdrop-filter: blur(4px); display: none; align-items: center; justify-content: center; padding: var(--sp-4); }
.fiche-overlay.open { display: flex; }
.fiche-modal { width: 100%; max-width: 760px; max-height: 88vh; overflow-y: auto; background: var(--bg-surface); border: 1px solid var(--border-gold); border-radius: var(--r-lg); box-shadow: var(--shadow-lg); }
.fiche-head { position: relative; aspect-ratio: 21/9; background: var(--bg-overlay); display: flex; align-items: center; justify-content: center; color: var(--text-faint); font-size: 3rem; overflow: hidden; cursor: zoom-in; }
.fiche-head img { width: 100%; height: 100%; object-fit: cover; }
.fiche-close { position: absolute; top: 10px; right: 10px; width: 32px; height: 32px; background: rgba(0,0,0,0.7); border: 1px solid var(--border-mid); border-radius: 50%; color: var(--text-secondary); cursor: pointer; font-size: 1rem; display: flex; align-items: center; justify-content: center; z-index: 2; }
.fiche-close:hover { color: var(--gold); border-color: var(--border-gold); }
.fiche-body { padding: var(--sp-5); display: flex; flex-direction: column; gap: var(--sp-4); }
.fiche-title-row { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--sp-4); flex-wrap: wrap; }
.fiche-title { font-family: 'Rajdhani', sans-serif; font-size: 1.5rem; font-weight: 700; color: var(--text-primary); text-transform: uppercase; letter-spacing: 0.04em; line-height: 1.15; }
.fiche-badges { display: flex; gap: var(--sp-2); flex-wrap: wrap; margin-top: var(--sp-1); }
.fiche-price-box { border: 1px solid var(--border-gold); border-radius: var(--r-md); padding: var(--sp-3) var(--sp-4); text-align: center; background: var(--gold-subtle); flex-shrink: 0; }
.fiche-price-value { font-family: 'Rajdhani', sans-serif; font-size: 1.5rem; font-weight: 700; color: var(--gold); display: block; white-space: nowrap; }
.fiche-price-label { font-size: 0.6rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-muted); }
.fiche-description { font-size: 0.875rem; color: var(--text-secondary); line-height: 1.7; border-left: 2px solid var(--border-gold); padding-left: var(--sp-4); font-style: italic; }
.fiche-meta-grid { display: flex; gap: var(--sp-6); flex-wrap: wrap; }
.item-meta-field { display: flex; flex-direction: column; gap: 0.15rem; }
.item-meta-label { font-size: 0.6rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-faint); }
.item-meta-value { font-size: 0.85rem; color: var(--text-secondary); font-weight: 500; }
.item-disponible { display: inline-flex; align-items: center; gap: var(--sp-2); font-size: 0.72rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; }
.item-disponible.ready { color: var(--success); }
.item-disponible.ready::before { content: ''; width: 6px; height: 6px; background: var(--success); border-radius: 50%; box-shadow: 0 0 6px var(--success); }
.item-disponible.pending { color: var(--warning); }
.item-disponible.pending::before { content: ''; width: 6px; height: 6px; background: var(--warning); border-radius: 50%; }
.fiche-chars { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: var(--sp-3); }
.fiche-char-cell { background: var(--bg-overlay); border: 1px solid var(--border-subtle); border-radius: var(--r-sm); padding: var(--sp-3); display: flex; flex-direction: column; gap: var(--sp-1); }
.fiche-cart-btn { width: 100%; padding: var(--sp-3); background: var(--gold); color: var(--bg-void); border: none; border-radius: var(--r-md); font-family: 'Rajdhani', sans-serif; font-size: 1rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; cursor: pointer; transition: background var(--ease); }
.fiche-cart-btn:hover { background: var(--gold-light); }
.fiche-cart-btn:disabled { opacity: 0.5; cursor: not-allowed; }

/* ── Add-to-cart popover (qty + total preview) ─────────────── */
.qty-popover-overlay { position: fixed; inset: 0; z-index: 8700; background: rgba(0,0,0,0.55); display: none; align-items: center; justify-content: center; padding: var(--sp-4); }
.qty-popover-overlay.open { display: flex; }
.qty-popover { width: 100%; max-width: 320px; background: var(--bg-surface); border: 1px solid var(--border-gold); border-radius: var(--r-lg); box-shadow: var(--shadow-lg); padding: var(--sp-5); display: flex; flex-direction: column; gap: var(--sp-4); }
.qty-popover-title { font-family: 'Rajdhani', sans-serif; font-size: 1.05rem; font-weight: 700; color: var(--text-primary); text-transform: uppercase; letter-spacing: 0.03em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.qty-popover-unit { font-size: 0.78rem; color: var(--text-muted); }
.qty-stepper { display: flex; align-items: center; gap: var(--sp-2); }
.qty-step-btn { width: 36px; height: 36px; flex-shrink: 0; background: var(--bg-raised); border: 1px solid var(--border-mid); border-radius: var(--r-md); color: var(--text-secondary); font-size: 1.2rem; font-weight: 700; cursor: pointer; transition: all var(--ease); display: flex; align-items: center; justify-content: center; }
.qty-step-btn:hover { border-color: var(--gold); color: var(--gold); }
.qty-input { flex: 1; min-width: 0; text-align: center; padding: var(--sp-2); background: var(--bg-raised); color: var(--text-primary); border: 1px solid var(--border-mid); border-radius: var(--r-md); font-size: 1.1rem; font-weight: 700; font-family: 'Rajdhani', sans-serif; outline: none; }
.qty-input:focus { border-color: var(--gold); }
.qty-popover-total-row { display: flex; align-items: baseline; justify-content: space-between; padding-top: var(--sp-3); border-top: 1px solid var(--border-subtle); }
.qty-popover-total-label { font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-muted); }
.qty-popover-total-value { font-family: 'Rajdhani', sans-serif; font-size: 1.4rem; font-weight: 700; color: var(--gold); }
.qty-popover-actions { display: flex; gap: var(--sp-2); }
.qty-popover-actions .btn { flex: 1; }

/* lightbox */
.lightbox { display: none; position: fixed; inset: 0; z-index: 9000; background: rgba(0,0,0,0.88); backdrop-filter: blur(6px); align-items: center; justify-content: center; cursor: zoom-out; }
.lightbox.open { display: flex; }
.lightbox img { max-width: 90vw; max-height: 88vh; object-fit: contain; border-radius: var(--r-md); box-shadow: var(--shadow-lg); pointer-events: none; }

.spec-badge.aerienne { background: var(--spec-aerienne-bg); color: var(--spec-aerienne); }

@media (min-width: 769px) {
    .filter-drawer-overlay { display: none !important; }
}

@media (max-width: 768px) {
    .catalog-layout { flex-direction: column; }
    .filter-toggle-btn { display: inline-flex; }

    /* Filter sidebar becomes a slide-in drawer from the left. */
    .filter-sidebar {
        position: fixed;
        top: 0; left: 0; bottom: 0;
        width: min(85vw, 320px);
        max-height: none;
        z-index: 8900;
        border-radius: 0;
        transform: translateX(-100%);
        transition: transform var(--ease-slow);
        box-shadow: var(--shadow-lg);
    }
    .filter-sidebar.open { transform: translateX(0); display: flex; }
    .filter-sidebar-close { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--sp-1); }
    .filter-sidebar-close .filter-section-title { border: none; margin: 0; padding: 0; font-size: 0.7rem; }
    .filter-sidebar-close button { background: none; border: none; color: var(--text-muted); font-size: 1.2rem; cursor: pointer; line-height: 1; padding: var(--sp-1); }
    .filter-sidebar-close button:hover { color: var(--gold); }

    .filter-drawer-overlay { position: fixed; inset: 0; z-index: 8850; background: rgba(0,0,0,0.5); opacity: 0; pointer-events: none; transition: opacity var(--ease); }
    .filter-drawer-overlay.open { opacity: 1; pointer-events: all; }

    .catalog-main { width: 100%; }
    .v-canvas { grid-template-columns: 1fr; grid-auto-rows: min-content; }
    .v-block.is-sep { padding: var(--sp-2) var(--sp-4); }
    .v-block[data-id] { grid-column: 1 / -1 !important; height: 220px; }
    .viewer-topbar { flex-wrap: wrap; }
    .viewer-topbar-title { min-width: 100%; order: 3; white-space: normal; }
}


/* ══════════════════════════════════════════════════════════════════════════
   Éditeur de vitrine — MilitaryCatalog/templates/my_catalog.html, verbatim.
   ══════════════════════════════════════════════════════════════════════════
   « Ma vitrine » ne se résume pas à des prix : le catalogue laisse composer
   la page — largeur et hauteur de chaque tuile, séparateurs nommés, ordre par
   glisser-déposer. C'est cette mise en scène qui distingue une vitrine d'une
   grille de vignettes, et elle manquait à la première version du Marché.
   ══════════════════════════════════════════════════════════════════════════ */

/* ── Editor layout: tech sidebar + canvas ──────────────────── */
.editor-layout { display: flex; gap: var(--sp-3); align-items: flex-start; }

.tech-sidebar { width: 270px; flex-shrink: 0; position: sticky; top: 116px; max-height: calc(100vh - 128px); display: flex; flex-direction: column; background: var(--bg-surface); border: 1px solid var(--border-mid); border-radius: var(--r-md); overflow: hidden; }
.tech-sidebar-head { display: flex; align-items: center; justify-content: space-between; padding: var(--sp-3) var(--sp-3); border-bottom: 1px solid var(--border-mid); flex-shrink: 0; }
.tech-sidebar-title { font-family: 'Rajdhani', sans-serif; font-size: 0.85rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-primary); }
.btn-xs { padding: 0.2rem 0.5rem; font-size: 0.68rem; gap: 0.25rem; }

/* ── Price-percent popup ──────────────────────────────────── */
.price-pct-overlay { position: fixed; inset: 0; z-index: 8700; background: rgba(0,0,0,0.55); display: none; align-items: center; justify-content: center; padding: var(--sp-4); }
.price-pct-overlay.open { display: flex; }
.price-pct-modal { width: 100%; max-width: 340px; background: var(--bg-surface); border: 1px solid var(--border-gold); border-radius: var(--r-lg); box-shadow: var(--shadow-lg); padding: var(--sp-5); display: flex; flex-direction: column; gap: var(--sp-4); }
.price-pct-title { font-family: 'Rajdhani', sans-serif; font-size: 1.05rem; font-weight: 700; color: var(--text-primary); text-transform: uppercase; letter-spacing: 0.03em; }
.price-pct-hint { font-size: 0.78rem; color: var(--text-muted); line-height: 1.5; }
.price-pct-input-row { display: flex; align-items: center; gap: var(--sp-2); }
.price-pct-input { flex: 1; min-width: 0; text-align: center; padding: var(--sp-2); background: var(--bg-raised); color: var(--text-primary); border: 1px solid var(--border-mid); border-radius: var(--r-md); font-size: 1.1rem; font-weight: 700; font-family: 'Rajdhani', sans-serif; outline: none; }
.price-pct-input:focus { border-color: var(--gold); }
.price-pct-actions { display: flex; gap: var(--sp-2); }
.price-pct-actions .btn { flex: 1; }
.tech-filter-toggle { background: var(--bg-raised); border: 1px solid var(--border-mid); border-radius: var(--r-sm); color: var(--text-muted); width: 28px; height: 28px; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: all var(--ease); }
.tech-filter-toggle:hover, .tech-filter-toggle.active { color: var(--gold); border-color: var(--border-gold); }
.tech-filter-panel { padding: var(--sp-3); border-bottom: 1px solid var(--border-mid); display: none; flex-shrink: 0; max-height: 300px; overflow-y: auto; }
.tech-filter-panel.open { display: block; }
.tech-filter-panel .form-control { padding: var(--sp-2) var(--sp-3); font-size: 0.8rem; margin-bottom: var(--sp-2); }
.tf-label { font-size: 0.62rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-faint); display: block; margin: var(--sp-2) 0 var(--sp-1); }
.tf-check { display: flex; align-items: center; gap: var(--sp-2); padding: 1px 0; font-size: 0.78rem; cursor: pointer; }
.tf-check input { accent-color: var(--gold); width: 13px; height: 13px; }
/* Le portage du MilitaryCatalog apportait ici sa propre liste de techs à
   glisser — `.tech-list` / `.tech-card` en grille 46px + 1fr, curseur grab.
   Ces noms sont exactement ceux des cartes de « Mes technologies », définies
   800 lignes plus haut, et comme ce bloc venait après avec la même
   spécificité, c'est LUI qui gagnait partout : la carte devenait une grille à
   deux colonnes, son corps perdait son padding, l'image de 72 px et le bloc
   d'infos se chevauchaient, et une carte non déplaçable affichait une main de
   déplacement.

   Le bloc était mort : plus rien ne rend `.tech-list`, `.tech-card-thumb`,
   `.tc-badge` ni `.tech-list-empty` (la palette de production utilise
   `.prod-tech-card`, le staff un `#sinv-tech-list`). Retiré plutôt que
   renommé — garder du CSS que personne n'applique et que tout le monde subit
   est le pire des deux. */

/* ── Canvas ────────────────────────────────────────────────── */
.canvas-wrap { flex: 1; min-width: 0; background: var(--bg-surface); border: 1px solid var(--border-mid); border-radius: var(--r-md); padding: var(--sp-4); min-height: 70vh; }
/* Half-row grid: tech blocks span h*2 rows (128px / 264px), separators span 1 row (56px) */
.canvas { display: grid; grid-template-columns: repeat(4, 1fr); grid-auto-rows: 58px; gap: var(--sp-3); grid-auto-flow: row; }
.cv-block { position: relative; border-radius: var(--r-md); overflow: visible; }
.cv-block.dragging { opacity: 0.35; }
.cv-block.drop-before::before { content:''; position: absolute; left: -7px; top: 0; bottom: 0; width: 3px; background: var(--gold); border-radius: 2px; z-index: 5; }
.cv-block.drop-after::after { content:''; position: absolute; right: -7px; top: 0; bottom: 0; width: 3px; background: var(--gold); border-radius: 2px; z-index: 5; }

.cv-tech { background: var(--bg-raised); border: 1px solid var(--border-mid); height: 100%; border-radius: var(--r-md); overflow: hidden; display: flex; flex-direction: column; cursor: grab; }
.cv-tech:hover { border-color: var(--border-gold); }
.cv-tech-img { flex: 1; min-height: 0; position: relative; background: var(--bg-overlay); display: flex; align-items: center; justify-content: center; color: var(--text-faint); font-size: 1.6rem; }
.cv-tech-img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.cv-tech-name { position: absolute; left: 0; right: 0; bottom: 0; padding: var(--sp-3) var(--sp-2) var(--sp-1); background: linear-gradient(transparent, rgba(0,0,0,0.85)); font-family: 'Rajdhani', sans-serif; font-size: 0.85rem; font-weight: 700; color: #fff; text-transform: uppercase; letter-spacing: 0.03em; line-height: 1.15; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cv-tech-domain { position: absolute; top: 6px; left: 6px; font-size: 0.55rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; padding: 0.1rem 0.4rem; border-radius: var(--r-full); background: rgba(0,0,0,0.7); }
.cv-tech-domain.mil { color: var(--gold); }
.cv-tech-domain.civ { color: #14b8a6; }
.cv-tech-foot { flex-shrink: 0; display: flex; align-items: center; gap: var(--sp-1); padding: var(--sp-1) var(--sp-2); background: var(--bg-void); border-top: 1px solid var(--border-subtle); }
.cv-price-input { flex: 1; min-width: 0; padding: 2px 6px; background: var(--bg-raised); color: var(--gold); border: 1px solid var(--border-gold); border-radius: var(--r-sm); font-size: 0.75rem; font-weight: 600; font-family: 'Rajdhani', sans-serif; text-align: right; outline: none; }
.cv-price-input:focus { box-shadow: 0 0 0 2px var(--gold-subtle); }
.cv-price-unit { font-size: 0.65rem; color: var(--text-muted); flex-shrink: 0; }

.cv-menu-btn { position: absolute; top: 6px; right: 6px; z-index: 6; width: 24px; height: 24px; background: rgba(0,0,0,0.7); border: 1px solid var(--border-mid); border-radius: var(--r-sm); color: var(--text-secondary); cursor: pointer; display: flex; align-items: center; justify-content: center; font-size: 0.8rem; line-height: 1; transition: all var(--ease); }
.cv-menu-btn:hover { color: var(--gold); border-color: var(--border-gold); }
.cv-menu { position: absolute; top: 34px; right: 6px; z-index: 50; width: 190px; background: var(--bg-overlay); border: 1px solid var(--border-mid); border-radius: var(--r-md); box-shadow: var(--shadow-lg); padding: var(--sp-3); display: none; }
.cv-menu.open { display: block; }
.cv-menu-label { font-size: 0.6rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-faint); margin-bottom: var(--sp-1); display: block; }
.cv-size-row { display: flex; gap: 4px; margin-bottom: var(--sp-2); }
.cv-size-btn { flex: 1; padding: 4px 0; background: var(--bg-raised); border: 1px solid var(--border-mid); border-radius: var(--r-sm); color: var(--text-secondary); font-size: 0.72rem; font-weight: 700; cursor: pointer; transition: all var(--ease); font-family: inherit; }
.cv-size-btn:hover { border-color: var(--gold); color: var(--gold); }
.cv-size-btn.active { background: var(--gold); color: var(--bg-void); border-color: var(--gold); }
.cv-menu-delete { width: 100%; padding: var(--sp-2); background: none; border: 1px solid var(--border-mid); border-radius: var(--r-sm); color: var(--danger); font-size: 0.75rem; font-weight: 600; cursor: pointer; font-family: inherit; transition: all var(--ease); }
.cv-menu-delete:hover { border-color: var(--danger); background: var(--danger-bg); }

/* Separator block */
.cv-block.is-sep { grid-column: 1 / -1; }
.cv-sep { height: 100%; border: 1px solid var(--border-gold); border-radius: var(--r-md); display: flex; align-items: center; gap: var(--sp-3); padding: 0 var(--sp-4); cursor: grab; background: var(--gold-subtle); }
.cv-sep:hover { border-color: var(--border-gold); }
.cv-sep-input { flex: 1; background: none; border: none; outline: none; color: var(--gold); font-family: 'Rajdhani', sans-serif; font-size: 1.05rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; }
.cv-sep-input::placeholder { color: var(--text-faint); }
.cv-block.is-sep { grid-row: span 1; }

/* drop placeholder + empty state */
.cv-dropzone { grid-column: 1 / -1; grid-row: span 2; border: 2px dashed var(--border-subtle); border-radius: var(--r-md); display: flex; align-items: center; justify-content: center; gap: var(--sp-2); color: var(--text-faint); font-size: 0.85rem; transition: all var(--ease); }
.cv-dropzone.dragover { border-color: var(--gold); color: var(--gold); background: var(--gold-subtle); }

@media (max-width: 900px) {
    .editor-layout { flex-direction: column; }
    .tech-sidebar { width: 100%; position: static; max-height: 300px; }
    .canvas { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
    .mode-cards { grid-template-columns: 1fr; }
    .catalog-card-item { flex-direction: column; align-items: flex-start; }
    .catalog-card-item-actions { align-self: flex-end; }
    .canvas { grid-template-columns: 1fr; }
}

/* Barre d'actions de « Ma vitrine » (propre au hub : le catalogue avait la
   sienne dans son entête de page). */
.ars-showcase-bar {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    flex-wrap: wrap;
    margin-bottom: var(--sp-3);
    padding-bottom: var(--sp-3);
    border-bottom: 1px solid var(--border-subtle);
}
/* Séparateur éditable : dans le lecteur c'est un titre, ici un champ. */
.cv-block.is-sep {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    padding: 0 var(--sp-3);
    /* Même raison que le lecteur : le raccourci `background` écraserait la
       texture posée par les classes `.tex-*`. */
    background-color: var(--gold-subtle);
    border: 1px solid var(--border-subtle);
    border-radius: var(--r-md);
    cursor: grab;
}
.cv-sep-input {
    flex: 1;
    background: none;
    border: none;
    outline: none;
    color: var(--gold);
    font-family: var(--font-display, 'Rajdhani'), sans-serif;
    font-size: 1.05rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}
.cv-sep-input::placeholder { color: var(--text-faint); }
.cv-block.is-sep .cv-menu-btn { position: static; background: none; border: none; }

/* Habillage du séparateur : couleur et texture viennent des variables --sep-*
   posées bloc par bloc, donc les mêmes règles servent l'éditeur et le lecteur. */
.cv-block.is-sep { background-color: var(--sep-tint, var(--gold-subtle)); border-color: var(--sep-color, var(--border-subtle)); }
.cv-block.is-sep .cv-sep-input { color: var(--sep-text, var(--sep-color, var(--gold))); }
/* Deux pastilles côte à côte : sans étiquette, « fond » et « texte » ne se
   distinguent que par leur ordre, ce qui ne se devine pas. */
.cv-sep-swatch { display: flex; align-items: center; gap: 4px; flex-shrink: 0; cursor: pointer; }
.cv-sep-swatch > span { font-size: 0.6rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-faint); }
/* Boîte « Auto-arranger » : le choix du regroupement se juge sur le nombre de
   rayons qu'il produit, pas sur son nom — d'où l'exemple sous le menu. */
.ars-arrange-modal { max-width: 420px; }
.ars-arrange-example {
    margin-top: var(--sp-2);
    padding: var(--sp-2);
    background: var(--bg-base);
    border: 1px solid var(--border-subtle);
    border-radius: var(--r-sm);
    max-height: 180px;
    overflow-y: auto;
}
.ars-arrange-example-head {
    font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.06em;
    color: var(--text-muted); margin-bottom: var(--sp-2);
}
.ars-arrange-row { display: flex; align-items: center; gap: var(--sp-2); margin-bottom: 3px; }
.ars-arrange-sep {
    flex: 1; min-width: 0;
    font-family: 'Rajdhani', sans-serif; font-size: 0.78rem; font-weight: 700;
    letter-spacing: 0.06em;
    color: var(--sep-color, var(--gold));
    border-left: 3px solid var(--sep-color, var(--gold));
    padding-left: var(--sp-2);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ars-arrange-n { font-size: 0.72rem; color: var(--text-muted); flex: none; }
.ars-arrange-more { font-size: 0.72rem; color: var(--text-faint); margin-top: var(--sp-1); }

.cv-sep-color { width: 30px; height: 22px; padding: 0; border: 1px solid var(--border-mid); border-radius: var(--r-sm); background: none; cursor: pointer; flex-shrink: 0; }
.cv-sep-tex { flex-shrink: 0; font-size: 0.7rem; padding: 2px 4px; background: var(--bg-raised); color: var(--text-secondary); border: 1px solid var(--border-mid); border-radius: var(--r-sm); font-family: inherit; }

/* Doublées en spécificité (`.is-sep.tex-*`) pour passer devant les règles de
   base du bloc séparateur, dans l'éditeur comme chez le lecteur. Une texture
   qui perd le cascade est indiscernable d'une texture qui n'existe pas. */
.is-sep.tex-solid { background-image: none; }
.is-sep.tex-gradient { background-image: linear-gradient(90deg, var(--sep-tint-strong), transparent 70%); }
.is-sep.tex-hatched { background-image: repeating-linear-gradient(45deg, var(--sep-tint-strong) 0 6px, transparent 6px 14px); }
.is-sep.tex-dotted { background-image: radial-gradient(var(--sep-tint-strong) 1.6px, transparent 1.8px); background-size: 12px 12px; }
.is-sep.tex-double { background-image: linear-gradient(var(--sep-color), var(--sep-color)), linear-gradient(var(--sep-color), var(--sep-color)); background-size: 100% 2px, 100% 2px; background-position: 0 3px, 0 calc(100% - 3px); background-repeat: no-repeat; }
.is-sep.tex-ribbon { background-image: linear-gradient(135deg, var(--sep-tint-strong) 0 38%, transparent 38%); }

/* Case volontairement vide : elle tient sa place pour faire retomber la suite
   à la ligne. Hachurée dans l'éditeur, invisible pour le lecteur. */
.cv-gap { height: 100%; border: 2px dashed var(--border-subtle); border-radius: var(--r-md); display: flex; align-items: center; justify-content: center; gap: var(--sp-2); cursor: grab; color: var(--text-faint); background-image: repeating-linear-gradient(45deg, var(--bg-raised) 0 8px, transparent 8px 16px); }
.cv-gap-label { font-size: 0.68rem; letter-spacing: 0.08em; text-transform: uppercase; }
.v-block.is-gap, .cv-block.is-gap.is-readonly { visibility: hidden; }

/* Catalogues privés : la liste et sa suppression, à côté de la vitrine. */
/* ── Sélecteur de catalogue ──────────────────────────────────────────────
   Un onglet par catalogue possédé. La vitrine publique est le premier, pas un
   écran à part : c'est le même geste d'édition, et la séparer avait fini par
   rendre les catalogues privés inaccessibles depuis l'endroit qui les liste. */
.ars-cat-tabs { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-bottom: var(--sp-3); }
.ars-cat-tab { display: inline-flex; align-items: center; gap: var(--sp-2); padding: 6px 12px; background: var(--bg-raised); color: var(--text-secondary); border: 1px solid var(--border-subtle); border-radius: var(--r-full); font-size: 0.8rem; font-weight: 600; cursor: pointer; transition: border-color var(--ease), color var(--ease), background var(--ease); }
.ars-cat-tab:hover { border-color: var(--border-strong); color: var(--text-primary); }
.ars-cat-tab.active { border-color: var(--gold); background: var(--gold-subtle); color: var(--gold); }
.ars-cat-tab.is-new { border-style: dashed; }
.ars-cat-tab-name { max-width: 200px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ars-cat-tab-count { font-family: 'Rajdhani', sans-serif; font-size: 0.72rem; color: var(--text-faint); }
.ars-cat-tab.active .ars-cat-tab-count { color: var(--gold); }

.ars-cat-head { display: flex; align-items: center; flex-wrap: wrap; gap: var(--sp-2); margin-bottom: var(--sp-3); }
.ars-cat-title { flex: 0 0 auto; margin: 0; font-family: 'Rajdhani', sans-serif; font-size: 1.05rem; color: var(--text-primary); }
.ars-cat-note { flex: 1; min-width: 160px; font-size: 0.75rem; color: var(--text-faint); }
.ars-cat-head .btn { padding: 4px 10px; font-size: 0.75rem; }
.ars-cat-del:hover { border-color: var(--danger); color: var(--danger); }

/* Filtre de l'éditeur : trouver une tech civile dans deux cents tuiles. */
.ars-edit-filter { display: flex; align-items: center; flex-wrap: wrap; gap: var(--sp-2); margin-bottom: var(--sp-3); }
.ars-edit-filter input[type="search"] { flex: 1; min-width: 180px; max-width: 320px; padding: 6px 10px; font-size: 0.8rem; }
.ars-edit-filter .btn { padding: 4px 12px; font-size: 0.75rem; }
.ars-edit-filter .btn.active { border-color: var(--gold); color: var(--gold); background: var(--gold-subtle); }
.ars-edit-count { margin-left: auto; font-size: 0.75rem; color: var(--text-faint); }

/* Modale d'accès : qui voit ce catalogue privé. Saisie par autocomplétion et
   restitution en jetons — une centaine de cases à cocher pour en trouver
   trois n'est pas une liste, c'est un obstacle. */
.ars-access-modal { width: min(460px, 92vw); overflow: visible; }
.ars-access-chips { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin: var(--sp-3) 0; min-height: 28px; max-height: 34vh; overflow-y: auto; }
.ars-access-chip { display: inline-flex; align-items: center; gap: 6px; padding: 3px 6px 3px 10px; background: var(--gold-subtle); border: 1px solid var(--border-gold); border-radius: var(--r-full); font-size: 0.78rem; color: var(--gold); }
.ars-access-chip button { background: none; border: none; color: var(--gold); cursor: pointer; font-size: 0.8rem; line-height: 1; padding: 0 2px; opacity: 0.7; }
.ars-access-chip button:hover { opacity: 1; color: var(--danger); }
.ars-access-empty { font-size: 0.78rem; color: var(--text-faint); }

/* Manque de places annoncé par la prévision, avec le raccourci de construction. */
.ars-rec-shortfall { margin-top: var(--sp-2); font-size: 0.78rem; line-height: 1.6; color: var(--text-secondary); }
.ars-rec-quickbuild { margin-left: var(--sp-2); padding: 2px 8px; font-size: 0.7rem; }
.ars-rec-build-total:empty { display: none; }
.ars-rec-build-pack { margin-bottom: var(--sp-3); padding: var(--sp-3); border: 1px solid var(--border-gold); border-radius: var(--r-md); background: var(--gold-subtle); }
.ars-rec-build-pack-head { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2); margin-bottom: var(--sp-2); }
.ars-rec-build-pack-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px var(--sp-3); padding: 6px 0; border-top: 1px solid var(--border-subtle); font-size: .78rem; }
.ars-rec-build-pack-row small { grid-column: 1 / -1; color: var(--text-muted); }
.ars-rec-build-impact { margin-top: var(--sp-3); padding: var(--sp-3); border: 1px solid var(--border-mid); border-radius: var(--r-md); background: var(--bg-surface); }

/* ── Arsenal › Recrutement ──────────────────────────────────────────────────
   L'échelle de militarisation et ses deux plafonds. Le rouge n'y est pas
   décoratif : il marque le moment où lever des troupes coûte de la croissance,
   ce qui était jusqu'ici invisible avant le bilan de fin d'année. */
.ars-rec-top { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--sp-3); margin-bottom: var(--sp-4); }
.ars-rec-figure { background: var(--bg-surface); border: 1px solid var(--border-mid); border-radius: var(--r-md); padding: var(--sp-4); text-align: center; }
.ars-rec-figure-value { font-family: 'Rajdhani', sans-serif; font-size: 3rem; font-weight: 700; line-height: 1; color: var(--gold); }
.ars-rec-figure-value span { font-size: 1.4rem; margin-left: 2px; }
.ars-rec-figure-label { font-size: 0.8rem; color: var(--text-secondary); margin-top: var(--sp-1); }
.ars-rec-figure-sub { font-size: 0.75rem; color: var(--text-faint); margin-top: var(--sp-2); }

.ars-rec-impact { background: var(--bg-surface); border: 1px solid var(--border-mid); border-radius: var(--r-md); padding: var(--sp-4); display: flex; flex-direction: column; justify-content: center; gap: var(--sp-2); }
.ars-rec-impact-row { display: flex; align-items: baseline; justify-content: space-between; font-size: 0.85rem; }
.ars-rec-impact-row strong { font-family: 'Rajdhani', sans-serif; font-size: 1.3rem; font-weight: 700; }
.ars-rec-headroom { font-size: 0.78rem; color: var(--text-muted); border-top: 1px solid var(--border-subtle); padding-top: var(--sp-2); margin-top: var(--sp-1); }
.ars-rec-ok { color: var(--success, #35c07f); }
.ars-rec-bad { color: var(--danger); }

.ars-rec-sim { background: var(--bg-surface); border: 1px solid var(--border-mid); border-radius: var(--r-md); padding: var(--sp-3) var(--sp-4); margin-bottom: var(--sp-4); }
.ars-rec-sim label { display: block; font-size: 0.62rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-faint); margin-bottom: var(--sp-2); }
.ars-rec-sim-row { display: flex; align-items: center; gap: var(--sp-2); max-width: 320px; }
.ars-rec-sim-unit { font-size: 0.8rem; color: var(--text-muted); }
.ars-rec-sim-out { margin-top: var(--sp-2); font-size: 0.82rem; color: var(--text-secondary); }
.ars-rec-sim-out.is-warning { color: var(--danger); }

.ars-rec-ladder { display: flex; flex-direction: column; gap: 3px; margin-bottom: var(--sp-4); }
.ars-rec-rung { display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap; padding: var(--sp-2) var(--sp-3); background: var(--bg-raised); border: 1px solid var(--border-subtle); border-left: 3px solid transparent; border-radius: var(--r-sm); font-size: 0.82rem; }
.ars-rec-rung.is-current { border-left-color: var(--gold); background: var(--gold-subtle); }
.ars-rec-rung.is-projected { border-left-color: var(--danger); }
.ars-rec-rung-range { display: grid; gap: 1px; min-width: 190px; font-weight: 600; color: var(--text-primary); }
/* Le palier traduit dans les effectifs du pays : « Entre 3 et 5 % » ne se
   compare pas à une armée, « 1 500 000 à 2 499 999 militaires » si. */
.ars-rec-rung-real { font-weight: 500; font-size: 0.72rem; color: var(--text-muted); font-variant-numeric: tabular-nums; }
.ars-rec-rung.is-current .ars-rec-rung-real { color: var(--text-secondary); }
.ars-rec-rung-malus { flex: 1; min-width: 0; color: var(--text-muted); }
.ars-rec-tag { font-size: 0.6rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; padding: 0.1rem 0.45rem; border-radius: var(--r-full); }
.ars-rec-tag.now { background: var(--gold); color: var(--bg-void); }
.ars-rec-tag.next { background: var(--danger); color: #fff; }

.ars-rec-gauges { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--sp-3); margin: var(--sp-3) 0; }
.ars-rec-gauge { background: var(--bg-surface); border: 1px solid var(--border-mid); border-radius: var(--r-md); padding: var(--sp-3); }
.ars-rec-gauge-head { display: flex; justify-content: space-between; align-items: baseline; font-size: 0.8rem; margin-bottom: var(--sp-2); }
.ars-rec-gauge-track { height: 8px; border-radius: var(--r-full); background: var(--bg-overlay); overflow: hidden; }
.ars-rec-gauge-fill { height: 100%; background: var(--gold); }
.ars-rec-gauge.is-tight .ars-rec-gauge-fill { background: var(--warning); }
.ars-rec-gauge.is-over { border-color: var(--danger); }
.ars-rec-gauge.is-over .ars-rec-gauge-fill { background: var(--danger); }
.ars-rec-gauge-hint { font-size: 0.74rem; color: var(--text-muted); margin-top: var(--sp-2); }

.ars-rec-actions { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: var(--sp-3); }
.ars-rec-form { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.ars-rec-form .form-control,
.ars-rec-form .pr-number { flex: 1; min-width: 110px; }
/* Le formulaire de construction porte quatre contrôles et un bouton, dont
   deux listes aux libellés longs (« Niveau 1 — 300 places · 1 400 000 » :
   c'est le barème qui sert d'étiquette, pour ne pas avoir à le connaître).
   `flex: 1` les rétrécissait à parts égales jusqu'à tronquer le texte que la
   liste existe pour montrer — on lisait « Niveau 1 — 300 ».

   Une grille qui se replie plutôt qu'un rang qui se comprime : sous ~640 px de
   large les contrôles passent à la ligne, et chacun garde une largeur où son
   libellé tient. */
.ars-rec-form-build {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    align-items: center;
}
.ars-rec-form-build .form-control,
.ars-rec-form-build .pr-number { min-width: 0; }
/* Le niveau porte le libellé le plus long des cinq — c'est lui qui portait la
   troncature. Deux colonnes pour lui, une pour les autres. */
.ars-rec-form-build #ars-rec-level { grid-column: span 2; }
/* La quantité n'a jamais besoin d'une colonne pleine, le bouton si. */
.ars-rec-form-build #ars-rec-amount { max-width: 110px; }
.ars-rec-form-build .btn { white-space: nowrap; }

/* Annonce publique : une case à cocher, parce que publier ses effectifs est un
   choix RP à part entière et pas un réglage caché derrière un menu. */
.ars-rec-announce { display: flex; align-items: center; gap: var(--sp-2); margin-top: var(--sp-3); font-size: 0.8rem; color: var(--text-secondary); cursor: pointer; }
.ars-rec-announce input { accent-color: var(--gold); width: 15px; height: 15px; cursor: pointer; }

/* Prévision de l'ordre en cours : ce que le bouton va réellement faire. */
.ars-rec-preview { margin-top: var(--sp-3); padding: var(--sp-3); background: var(--bg-surface); border: 1px solid var(--border-subtle); border-radius: var(--r-md); }
.ars-rec-preview-row { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); font-size: 0.82rem; color: var(--text-secondary); padding: 2px 0; }
.ars-rec-preview-row strong { color: var(--text-primary); font-family: 'Rajdhani', sans-serif; font-size: 0.95rem; }
.ars-rec-preview-warn { margin-top: var(--sp-2); font-size: 0.78rem; line-height: 1.5; color: var(--danger); }
.ars-rec-cap { display: block; color: var(--text-muted); }
.ars-rec-note { font-size: 0.74rem; color: var(--text-faint); line-height: 1.5; margin: var(--sp-3) 0 0; }

/* The action card carries the capacities that constrain it. The seven-rung
   policy ladder remains available, but no longer creates a second dashboard
   below a player-facing form. */
.ars-rec-summary { margin-top: var(--sp-4); border: 1px solid var(--border-mid); border-radius: var(--r-md); background: var(--bg-surface); }
.ars-rec-summary > summary { display: flex; align-items: center; gap: var(--sp-2); min-height: var(--pr-touch-target); padding: var(--sp-3) var(--sp-4); cursor: pointer; list-style: none; color: var(--text-primary); }
.ars-rec-summary > summary::-webkit-details-marker { display: none; }
/* Le chevron est À GAUCHE du libellé, où l'œil cherche l'affordance de
   dépliage. Le « + » posé à l'extrême droite, après le pourcentage, se lisait
   comme un bouton d'ajout : rien ne disait que ce bloc s'ouvrait. */
.ars-rec-summary-caret { display: inline-flex; flex: 0 0 auto; color: var(--gold); transform: rotate(-90deg); transition: transform 0.15s ease; }
.ars-rec-summary-caret svg { width: 16px; height: 16px; display: block; }
.ars-rec-summary[open] > summary > .ars-rec-summary-caret { transform: none; }
.ars-rec-summary > summary > strong { margin-left: auto; }
.ars-rec-summary[open] > summary { border-bottom: 1px solid var(--border-subtle); }
@media (prefers-reduced-motion: reduce) { .ars-rec-summary-caret { transition: none; } }
.ars-rec-summary-body { padding: var(--sp-4); }
.ars-rec-summary .ars-rec-ladder { margin-bottom: 0; }

@media (max-width: 720px) {
    .ars-rec-top { grid-template-columns: 1fr; }
    .ars-rec-rung-range { min-width: 100%; }
    .ars-rec-summary > summary, .ars-rec-summary-body { padding: var(--sp-3); }
}

/* ── Ventes ─────────────────────────────────────────────────────────────────
   Le panier crée une commande en attente de confirmation ; cet écran est ce
   qui permet enfin d'y répondre sans quitter le dashboard. */
.ars-sales-badge {
    display: inline-block; min-width: 18px; padding: 0 5px;
    background: var(--gold); color: var(--bg-void);
    border-radius: var(--r-full);
    font-size: 0.7rem; font-weight: 700; text-align: center;
}
.ars-sales-tabs { display: flex; gap: var(--sp-2); margin-bottom: var(--sp-4); flex-wrap: wrap; }
.ars-sales-tab {
    padding: var(--sp-2) var(--sp-3);
    background: transparent; color: var(--text-secondary);
    border: 1px solid var(--border-mid); border-radius: var(--r-md);
    font-family: inherit; font-size: 0.85rem; cursor: pointer;
}
.ars-sales-tab span { color: var(--text-faint); font-variant-numeric: tabular-nums; }
.ars-sales-tab:hover { border-color: var(--border-gold); }
.ars-sales-tab.active { border-color: var(--gold); color: var(--gold); }
.ars-sales-tab.active span { color: var(--gold); }

.ars-order-list { display: flex; flex-direction: column; gap: var(--sp-3); }
.ars-order {
    background: var(--bg-surface);
    border: 1px solid var(--border-subtle);
    border-radius: var(--r-md);
    padding: var(--sp-3);
}
.ars-order-head {
    display: flex; align-items: baseline; gap: var(--sp-3); flex-wrap: wrap;
    padding-bottom: var(--sp-2); border-bottom: 1px solid var(--border-subtle);
}
.ars-order-id { font-family: var(--font-display, 'Rajdhani'), sans-serif; color: var(--text-faint); font-variant-numeric: tabular-nums; }
.ars-order-party { flex: 1; min-width: 0; font-size: 0.9rem; }
.ars-order-status { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.06em; }
.ars-order-pending { color: var(--warning, #e0b050); }
.ars-order-ok { color: var(--success, #22c55e); }
.ars-order-no { color: var(--text-muted); }

.ars-order-items { width: 100%; border-collapse: collapse; margin: var(--sp-2) 0; }
.ars-order-items td { padding: 3px 0; font-size: 0.82rem; color: var(--text-secondary); }
.ars-order-qty, .ars-order-unit, .ars-order-line {
    text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums;
}
.ars-order-line { color: var(--text-primary); }

.ars-order-foot {
    display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap;
    padding-top: var(--sp-2); border-top: 1px solid var(--border-subtle);
}
.ars-order-meta { font-size: 0.74rem; color: var(--text-faint); }
.ars-order-total {
    flex: 1; text-align: right;
    font-family: var(--font-display, 'Rajdhani'), sans-serif; font-weight: 700;
    color: var(--gold); font-variant-numeric: tabular-nums;
}

/* Réinitialiser n'apparaît que lorsqu'un filtre est posé : un bouton toujours
   présent pour annuler un état qui n'existe pas est du bruit. */
.ars-filter-reset { width: 100%; margin-top: var(--sp-2); justify-content: center; }

/* ── Masquer une version ────────────────────────────────────────────────── */
.ars-hide-version {
    display: flex; align-items: center; justify-content: space-between;
    gap: var(--sp-3); flex-wrap: wrap;
    margin-top: var(--sp-3); padding: var(--sp-3);
    background: var(--bg-raised);
    border: 1px solid var(--border-subtle);
    border-radius: var(--r-md);
}
.ars-hide-version-title { font-size: 0.85rem; font-weight: 600; color: var(--text-primary); }
.ars-hide-version-hint { font-size: 0.74rem; color: var(--text-muted); margin-top: 2px; max-width: 40ch; }
.ars-hidden-toggle {
    display: flex; align-items: center; gap: var(--sp-2);
    margin-top: var(--sp-2); font-size: 0.78rem; color: var(--text-secondary); cursor: pointer;
}
.ars-hidden-toggle input { accent-color: var(--gold); cursor: pointer; }

/* Dialogue « Construire », partagé par la production, la création de tech et le
   calculateur — pré-rempli avec ce qui manquait à l'écran d'où il s'ouvre. */
.ars-build-modal { max-width: 380px; }
.ars-build-modal .form-label { display: block; margin-top: var(--sp-3); }
.ars-build-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-3); }

/* ── Lien vers la technologie parente ───────────────────────────────────────
   Le parent était du texte mort : le relecteur voyait « de Fusil Mk I » sans
   pouvoir regarder ce Mk I. Lien vers sa carte dans la file, aperçu au survol
   sur le modèle des insertions rp-text-block. */
.tech-parent-link {
    color: var(--gold);
    text-decoration: underline;
    text-underline-offset: 2px;
    text-decoration-style: dotted;
    cursor: pointer;
}
.tech-parent-link:hover { text-decoration-style: solid; }

.tech-preview {
    position: fixed;
    z-index: 9500;
    width: 240px;
    padding: var(--sp-3);
    background: var(--bg-overlay, var(--bg-raised));
    border: 1px solid var(--border-gold);
    border-radius: var(--r-md);
    box-shadow: var(--shadow-lg, 0 8px 32px rgba(0,0,0,0.5));
    pointer-events: none;
}
.tech-preview-thumb {
    width: 100%; height: 96px; object-fit: cover;
    border-radius: var(--r-sm); margin-bottom: var(--sp-2);
}
.tech-preview-name {
    font-family: var(--font-display, 'Rajdhani'), sans-serif;
    font-weight: 700; font-size: 0.95rem; color: var(--text-primary);
}
.tech-preview-meta { display: flex; flex-wrap: wrap; gap: 4px; margin-top: var(--sp-2); }
.tech-preview-badge {
    font-size: 0.68rem; padding: 1px 6px;
    background: var(--bg-surface); color: var(--text-secondary);
    border: 1px solid var(--border-subtle); border-radius: var(--r-sm);
}
.tech-preview-sub { margin-top: var(--sp-2); font-size: 0.72rem; color: var(--text-muted); }
.tech-preview-loading, .tech-preview-empty { font-size: 0.8rem; color: var(--text-muted); }

/* La carte du parent, quand on y saute : sans un signal, on atterrit au milieu
   d'une file de cartes identiques sans savoir laquelle on cherchait. */
@keyframes pending-tech-flash {
    0%, 100% { border-color: var(--border-subtle); }
    30%      { border-color: var(--gold); box-shadow: 0 0 0 3px var(--gold-subtle); }
}
.pending-tech-flash { animation: pending-tech-flash 1.4s ease; }
@media (prefers-reduced-motion: reduce) {
    .pending-tech-flash { animation: none; border-color: var(--gold); }
}

/* Les croix de fermeture sont des icônes SVG et non le caractère « ✕ » : un
   glyphe dépend de la police installée, change de taille et d'épaisseur d'un
   système à l'autre, et n'a pas de nom accessible. L'icône se dimensionne, se
   colore et s'annonce. */
.ars-access-chip button [data-icon],
.fiche-close [data-icon],
.cv-menu-btn [data-icon] {
    display: inline-flex;
    width: 13px;
    height: 13px;
}
.ars-access-chip button [data-icon] svg,
.fiche-close [data-icon] svg,
.cv-menu-btn [data-icon] svg { width: 100%; height: 100%; }

/* En-tête de la section des catalogues privés partagés. Distinguée des
   vitrines publiques parce que l'accès a été accordé à CE pays nommément :
   les confondre ferait croire que le catalogue est public, et un joueur
   pourrait en parler à qui n'y a pas accès. */
.ars-shared-head {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    margin: 0 0 var(--sp-3);
    padding-bottom: var(--sp-2);
    border-bottom: 1px solid var(--border-gold);
    color: var(--gold);
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}