/*
 * components.css — CTC · usages et composants (Phase 1)
 * DA_CTC V2 · 2026-07-12 · dépend de tokens.css
 * Deux vitesses d'édition : tokens = VALEURS · components = USAGES
 * Phase 1 : grain body · frise pellicule · tag rubrique · glyphe carré
 * Phase 2 ajoutera : header · mega menu · carte diapo · etc.
 */


/* ═══════════════════════════════════════════════════════════════════ */
/* §1 · GRAIN ARGENTIQUE — SUPPRIMÉ EN PROD (ADDENDUM 4 · 2026-07-12)   */
/*    Verdict Nanodot sur pièce : à 0.04 indiscernable, à 0.07 idem     */
/*    → mécanique retirée du site production (sobriété §2 DA)           */
/*    Le style_guide.blade.php garde la démo commutable inline pour     */
/*    d'éventuels essais futurs · DA_CTC §1 à amender.                  */
/* ═══════════════════════════════════════════════════════════════════ */


/* ═══════════════════════════════════════════════════════════════════ */
/* §2 · FRISE PELLICULE — ADDENDUM 2 refonte 2026-07-12                 */
/*    Le HEADER EST LA PELLICULE : ligne unique de PERFORATIONS carrées */
/*    Plus de bande noir/blanc (agressive · effet raté) — les carrés   */
/*    respirent seuls. Gris médium par défaut, déclinaison par branche  */
/*    via [data-branche] sur body/html (activation quand page rubrique)*/
/* ═══════════════════════════════════════════════════════════════════ */
.filmstrip {
    display: block;
    width: 100%;
    height: var(--filmstrip-perf);
    background-color: transparent;
    background-image: repeating-linear-gradient(
        to right,
        var(--perf-color, var(--gris-argentique-2)) 0,
        var(--perf-color, var(--gris-argentique-2)) var(--filmstrip-perf),
        transparent var(--filmstrip-perf),
        transparent calc(var(--filmstrip-perf) + var(--filmstrip-gap))
    );
    background-position: 0 center;
    background-repeat: repeat-x;
}
/* Déclinaison par contexte page rubrique (mécanisme posé · activation M-suivante) */
body[data-branche="boitier"]   .filmstrip { --perf-color: var(--rouge-boitier); }
body[data-branche="ancien"]    .filmstrip { --perf-color: var(--acajou-rougi); }
body[data-branche="numerique"] .filmstrip { --perf-color: var(--magenta-capteur); }
body[data-branche="eclairage"] .filmstrip { --perf-color: var(--corail-gelatine); }
body[data-branche="chimie"]    .filmstrip { --perf-color: var(--jaune-kodak); }
body[data-branche="notice"]    .filmstrip { --perf-color: var(--ciel-papier); }
body[data-branche="postale"]   .filmstrip { --perf-color: var(--caca-oie); }
body[data-branche="livre"]     .filmstrip { --perf-color: var(--celadon); }
body[data-branche="wiki"]      .filmstrip { --perf-color: var(--bleu-wiki); }

/* Variante VERTICALE (ADDENDUM 3 · maquette style_guide · Nanodot tranchera) */
.filmstrip-vertical {
    display: block;
    height: 100%;
    width: var(--filmstrip-perf);
    background-color: transparent;
    background-image: repeating-linear-gradient(
        to bottom,
        var(--perf-color, var(--gris-argentique-2)) 0,
        var(--perf-color, var(--gris-argentique-2)) var(--filmstrip-perf),
        transparent var(--filmstrip-perf),
        transparent calc(var(--filmstrip-perf) + var(--filmstrip-gap))
    );
    background-position: center 0;
    background-repeat: repeat-y;
}


/* ═══════════════════════════════════════════════════════════════════ */
/* §3 · TAG RUBRIQUE (DA §2 · double canal daltonisme)                 */
/*    Usage : <span class="tag" data-branche="boitier">Boîtiers</span> */
/*    RED-LINE : carré SEUL interdit — libellé texte TOUJOURS présent  */
/* ═══════════════════════════════════════════════════════════════════ */
.tag {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    font-family: var(--font-sans);
    font-size: var(--font-size-xs);
    font-weight: 600;
    color: var(--color-fg);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    line-height: 1;
    white-space: nowrap;
}
.tag::before {
    content: '';
    display: inline-block;
    width: var(--glyphe-sm);
    height: var(--glyphe-sm);
    background-color: var(--tag-color, var(--color-fg-muted));
    flex-shrink: 0;
    /* pas de border-radius — le carré est LA forme identitaire (§1bis DA) */
}

/* Attribution branche → couleur (DA §4) */
.tag[data-branche="boitier"]   { --tag-color: var(--rouge-boitier); }
.tag[data-branche="ancien"]    { --tag-color: var(--acajou-rougi); }
.tag[data-branche="numerique"] { --tag-color: var(--magenta-capteur); }
.tag[data-branche="eclairage"] { --tag-color: var(--corail-gelatine); }
.tag[data-branche="chimie"]    { --tag-color: var(--jaune-kodak); }
.tag[data-branche="notice"]    { --tag-color: var(--ciel-papier); }
.tag[data-branche="postale"]   { --tag-color: var(--caca-oie); }
.tag[data-branche="livre"]     { --tag-color: var(--celadon); }
.tag[data-branche="wiki"]      { --tag-color: var(--bleu-wiki); }


/* ═══════════════════════════════════════════════════════════════════ */
/* §4 · GLYPHE CARRÉ standalone (DA §1bis)                             */
/*    Puce carrée réutilisable · hérite currentColor par défaut         */
/*    Usage : <span class="g-square" style="color:var(--rouge-boitier)">*/
/* ═══════════════════════════════════════════════════════════════════ */
.g-square {
    display: inline-block;
    width: var(--glyphe-sm);
    height: var(--glyphe-sm);
    background-color: currentColor;
    vertical-align: middle;
    flex-shrink: 0;
}
.g-square-xs { width: var(--glyphe-xs); height: var(--glyphe-xs); }
.g-square-md { width: var(--glyphe-md); height: var(--glyphe-md); }
.g-square-lg { width: var(--glyphe-lg); height: var(--glyphe-lg); }


/* ═══════════════════════════════════════════════════════════════════ */
/* §5 · HEADER SITE (DA §7)                                            */
/*    wordmark · recherche · nav (AGENDA · RUBRIQUES · compte · FR/EN  */
/*    · toggle carré · CTA Déposer)                                    */
/* ═══════════════════════════════════════════════════════════════════ */
.site-header {
    background: var(--color-bg-card);
    border-bottom: 1px solid var(--color-border);
    position: sticky;
    top: 0;
    z-index: 100;
}
.site-header-inner {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    height: var(--header-height);
}

/* Wordmark · écho L'OCCASION masthead (LT Streak Black italique · rouge inactinique) */
/* ADDENDUM 2 · TLD .com ajouté au wordmark (2026-07-12) */
.site-logo {
    display: inline-flex;
    align-items: baseline;
    gap: 0;
    font-family: var(--font-titrage);
    font-weight: 900;
    font-style: italic;
    font-size: var(--font-size-2xl);
    line-height: 1;
    color: var(--rouge-inactinique);
    letter-spacing: -0.02em;
    text-transform: lowercase;
    flex-shrink: 0;
}
.site-logo:hover { color: var(--rouge-inactinique); opacity: 0.85; }
.site-logo-camera { color: var(--rouge-inactinique); }
.site-logo-dash   { color: var(--rouge-inactinique); margin: 0 -0.05em; }
.site-logo-trade  { color: var(--color-fg); }
[data-theme="dark"] .site-logo-trade { color: var(--blanc-baryte); }
/* TLD .com — discret, en gris argentique, non italique, taille réduite */
.site-logo-tld {
    color: var(--gris-argentique-2);
    font-style: normal;
    font-weight: 700;
    font-size: 0.6em;
    letter-spacing: 0;
    margin-left: 0.05em;
    align-self: baseline;
}
[data-theme="dark"] .site-logo-tld { color: var(--gris-argentique-1); }

/* Recherche centrale · pill · glyphe carré submit */
.site-search {
    display: flex;
    align-items: center;
    flex: 1 1 320px;
    max-width: 480px;
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    overflow: hidden;
    height: 36px;
}
.site-search:focus-within { border-color: var(--color-accent); }
.site-search input {
    flex: 1;
    border: 0;
    background: transparent;
    padding: 0 var(--space-3);
    color: var(--color-fg);
    font-family: var(--font-labeur);
    font-size: var(--font-size-sm);
    outline: none;
}
.site-search input::placeholder { color: var(--color-fg-muted); }
.site-search button {
    background: transparent;
    border: 0;
    color: var(--color-fg-muted);
    padding: 0 var(--space-3);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    height: 100%;
}
.site-search button:hover { color: var(--color-accent); }

/* Nav droite */
.site-nav {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    margin-left: auto;
    flex-shrink: 0;
}
.site-nav .nav-link {
    color: var(--color-fg-subtle);
    font-family: var(--font-labeur);
    font-size: var(--font-size-sm);
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    padding: var(--space-2) 0;
    background: transparent;
    border: 0;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    line-height: 1;
}
.site-nav .nav-link:hover { color: var(--color-accent); }
.site-nav .nav-mega-trigger[aria-expanded="true"] { color: var(--color-accent); }
.site-nav .nav-logout-form { display: inline-flex; margin: 0; }

/* Locale switcher */
.locale-switch { display: flex; gap: var(--space-1); font-size: var(--font-size-xs); }
.locale-switch a {
    padding: var(--space-1) var(--space-2);
    border-radius: var(--radius-sm);
    border: 1px solid var(--color-border);
    color: var(--color-fg-subtle);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    line-height: 1;
}
.locale-switch a.active {
    background: var(--color-fg);
    color: var(--color-bg);
    border-color: var(--color-fg);
}

/* Toggle thème · GLYPHE CARRÉ (Q3 Nanodot cosignée · §1bis DA) */
/* Light = tirage = □ (carré vide) · Dark = négatif = ■ (carré plein) */
.theme-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    padding: 0;
    background: transparent;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    color: var(--color-fg);
    cursor: pointer;
    transition: border-color var(--transition-fast);
}
.theme-toggle:hover { border-color: var(--color-accent); }
.theme-toggle-glyph {
    display: inline-block;
    width: var(--glyphe-md);
    height: var(--glyphe-md);
    border: 2px solid currentColor;
    background: transparent;
    transition: background var(--transition-fast);
}
[data-theme="dark"] .theme-toggle-glyph {
    background: currentColor;
    border-color: currentColor;
}

/* CTA DÉPOSER · rouge inactinique · SEUL bouton d'action visuel (DA §3) */
.btn-cta-deposer {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-4);
    background: var(--rouge-inactinique);
    color: var(--blanc-baryte);
    font-family: var(--font-labeur);
    font-weight: 700;
    font-size: var(--font-size-sm);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    line-height: 1;
    border: 0;
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: background var(--transition-fast);
    text-decoration: none;
}
.btn-cta-deposer:hover { background: var(--color-accent-hover); color: var(--blanc-baryte); }


/* ═══════════════════════════════════════════════════════════════════ */
/* §6 · MEGA MENU (DA §7 · 2 niveaux · colonnes coiffées carré branche) */
/*    Structure minimale posée · sous-catégories = M003 données réelles */
/* ═══════════════════════════════════════════════════════════════════ */
.mega-menu {
    position: absolute;
    left: 0;
    right: 0;
    background: var(--color-bg-card);
    border-bottom: 1px solid var(--color-border);
    box-shadow: var(--shadow-md);
    padding: var(--space-8) 0;
    display: none;
    z-index: 90;
}
.mega-menu-open { display: block; }
.mega-grid {
    display: grid;
    /* FIX 1 ADDENDUM 2 · min 260px (avant 220) → libellés longs (Cartes postales · Livres) tiennent */
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: var(--space-4);
}
.mega-col {
    display: flex;
    align-items: center;
    padding: var(--space-3);
    border-radius: var(--radius-md);
    text-decoration: none;
    transition: background var(--transition-fast);
    border-left: 3px solid transparent;
    min-height: 44px;
}
.mega-col:hover {
    background: var(--color-bg-subtle);
    border-left-color: var(--tag-color, var(--color-fg-muted));
}
.mega-col .tag { pointer-events: none; white-space: normal; line-height: var(--line-height-tight); }


/* ═══════════════════════════════════════════════════════════════════ */
/* §7 · FOOTER SITE                                                    */
/*    filmstrip haut (Q5 · usage 3/3) · colophon · crédit fonts OFL    */
/*    (obligation NBB §5 fiche LT Streak)                              */
/* ═══════════════════════════════════════════════════════════════════ */
.site-footer {
    background: var(--color-bg-subtle);
    color: var(--color-fg-subtle);
    padding-bottom: var(--space-8);
    margin-top: var(--space-16);
    position: relative;
    z-index: 2;
}
.site-footer-inner {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    padding-top: var(--space-8);
    font-size: var(--font-size-sm);
}
.footer-nav {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-4);
}
.footer-nav a {
    color: var(--color-fg-subtle);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-size: var(--font-size-xs);
    font-weight: 600;
}
.footer-nav a:hover { color: var(--color-accent); }
.footer-colophon,
.footer-heritage,
.footer-credits {
    color: var(--color-fg-muted);
    font-size: var(--font-size-xs);
}
.footer-credits strong { color: var(--color-fg-subtle); font-weight: 600; }


/* ═══════════════════════════════════════════════════════════════════ */
/* §8 · CARTE DIAPO (DA §6 · composant signature)                      */
/*    Monture claire #E9E5DA · ref CT gravée mono · liseré branche     */
/*    vertical 3px · hover = négatif (photo seule · reduced-motion)    */
/* ═══════════════════════════════════════════════════════════════════ */
.card-diapo {
    display: flex;
    flex-direction: column;
    background: var(--monture-diapo);
    border-radius: var(--radius-sm);
    overflow: hidden;
    box-shadow: var(--shadow-sm);
    position: relative;
    text-decoration: none;
    color: var(--noir-revelateur);
    border-left: 3px solid var(--branche-color, var(--gris-argentique-2));
    transition: box-shadow var(--transition-base);
}
.card-diapo:hover { box-shadow: var(--shadow-md); color: var(--noir-revelateur); }

/* Attribution branche → liseré vertical (DA §5) */
.card-diapo[data-branche="boitier"]   { --branche-color: var(--rouge-boitier); }
.card-diapo[data-branche="ancien"]    { --branche-color: var(--acajou-rougi); }
.card-diapo[data-branche="numerique"] { --branche-color: var(--magenta-capteur); }
.card-diapo[data-branche="eclairage"] { --branche-color: var(--corail-gelatine); }
.card-diapo[data-branche="chimie"]    { --branche-color: var(--jaune-kodak); }
.card-diapo[data-branche="notice"]    { --branche-color: var(--ciel-papier); }
.card-diapo[data-branche="postale"]   { --branche-color: var(--caca-oie); }
.card-diapo[data-branche="livre"]     { --branche-color: var(--celadon); }
.card-diapo[data-branche="wiki"]      { --branche-color: var(--bleu-wiki); }

/* Photo fenêtre · hover = NÉGATIF (photo seule) */
.card-diapo-photo {
    aspect-ratio: 4 / 3;
    background: var(--noir-gelatine);
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}
.card-diapo-photo img,
.card-diapo-photo .card-diapo-photo-placeholder {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: filter var(--transition-base);
}
/* v0.2.2 · hover = passage en N&B (planche contact) · le négatif rendait moche sur photo
   couleur réelle (verdict Nanodot 2026-07-12 sur pièce · DA §6 amendé) */
.card-diapo:hover .card-diapo-photo img { filter: grayscale(1); }
@media (prefers-reduced-motion: reduce) {
    .card-diapo:hover .card-diapo-photo img { filter: none; }
    .card-diapo-photo img { transition: none; }
}
.card-diapo-photo-placeholder,
.card-diapo-photo-empty {
    color: var(--gris-argentique-1);
    background: linear-gradient(135deg, var(--noir-gelatine), var(--noir-revelateur));
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: var(--space-2);
    width: 100%;
    height: 100%;
}
/* Label "photo à venir" · Georgia italique · dignité de l'empty (M010 Q3) */
.card-diapo-photo-empty-label {
    font-family: var(--font-titrage);
    font-style: italic;
    font-size: var(--font-size-sm);
    color: var(--gris-argentique-1);
    letter-spacing: 0.02em;
}

/* Corps de la diapositive */
.card-diapo-body {
    padding: var(--space-3) var(--space-4);
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    background: var(--monture-diapo);
    color: var(--noir-revelateur);
}
.card-diapo-title {
    font-family: var(--font-labeur);
    font-weight: 600;
    font-size: var(--font-size-sm);
    color: var(--noir-revelateur);
    line-height: var(--line-height-tight);
}
/* M009 · badge cote (échelle 1-5 journal) · discret sous le titre */
.card-diapo-etat {
    font-family: var(--font-mono);
    font-size: var(--font-size-xs);
    color: var(--gris-argentique-3);
    letter-spacing: 0.02em;
    text-transform: uppercase;
}
.card-diapo-etat strong { color: var(--noir-revelateur); font-weight: 700; }
.card-diapo-price {
    font-family: var(--font-titrage);
    font-weight: 700;
    font-size: var(--font-size-lg);
    color: var(--noir-revelateur);
    line-height: 1;
}
.card-diapo-meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--space-2);
    font-family: var(--font-mono);
    font-size: var(--font-size-xs);
    color: var(--gris-argentique-2);
    letter-spacing: 0.02em;
}
.card-diapo-ref {
    /* Ref CT-YYYY-NNNNN gravée sur la monture (DA §6 : "comme le numéro du cache") */
    font-family: var(--font-mono);
}
.card-diapo-loc { color: var(--gris-argentique-3); }


/* ═══════════════════════════════════════════════════════════════════ */
/* §9 · RESPONSIVE ajustements minimaux                                */
/* ═══════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
    .site-header-inner { flex-wrap: wrap; height: auto; padding: var(--space-2) 0; gap: var(--space-2); }
    .site-search { order: 3; flex-basis: 100%; max-width: none; }
    .site-nav .nav-link { font-size: var(--font-size-xs); }
    .locale-switch { font-size: 10px; }
    .mega-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 480px) {
    .mega-grid { grid-template-columns: 1fr; }
    .site-logo { font-size: var(--font-size-xl); }
}


/* ═══════════════════════════════════════════════════════════════════ */
/* §10 · HOME · lien rubrique (grille 9 branches)                      */
/*    Liseré vertical ← branche · hover met le liseré en couleur       */
/* ═══════════════════════════════════════════════════════════════════ */
.home-rubrique-link {
    display: flex;
    align-items: center;
    padding: var(--space-3) var(--space-4);
    background: var(--color-bg-card);
    border: 1px solid var(--color-border);
    border-left: 3px solid transparent;
    border-radius: var(--radius-sm);
    text-decoration: none;
    transition: background var(--transition-fast), border-left-color var(--transition-fast);
}
.home-rubrique-link:hover { background: var(--color-bg-subtle); }
.home-rubrique-link[data-branche="boitier"]:hover   { border-left-color: var(--rouge-boitier); }
.home-rubrique-link[data-branche="ancien"]:hover    { border-left-color: var(--acajou-rougi); }
.home-rubrique-link[data-branche="numerique"]:hover { border-left-color: var(--magenta-capteur); }
.home-rubrique-link[data-branche="eclairage"]:hover { border-left-color: var(--corail-gelatine); }
.home-rubrique-link[data-branche="chimie"]:hover    { border-left-color: var(--jaune-kodak); }
.home-rubrique-link[data-branche="notice"]:hover    { border-left-color: var(--ciel-papier); }
.home-rubrique-link[data-branche="postale"]:hover   { border-left-color: var(--caca-oie); }
.home-rubrique-link[data-branche="livre"]:hover     { border-left-color: var(--celadon); }
.home-rubrique-link[data-branche="wiki"]:hover      { border-left-color: var(--bleu-wiki); }


/* ═══════════════════════════════════════════════════════════════════ */
/* §11 · TOOLBAR ANNONCES (M009 Phase 2)                                */
/*    compteur (Gontserrat) + toggle ▦/≡ (carrés glyphe §1bis)          */
/* ═══════════════════════════════════════════════════════════════════ */
.listings-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
    margin-bottom: var(--space-4);
    padding-bottom: var(--space-2);
    border-bottom: 1px solid var(--gris-argentique-1);
    font-family: var(--font-labeur);
}
.listings-count {
    color: var(--color-fg-subtle);
    font-size: var(--font-size-sm);
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.listings-view-toggle {
    display: inline-flex;
    gap: var(--space-1);
}
.lv-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    background: var(--color-bg);
    color: var(--color-fg-subtle);
    text-decoration: none;
    transition: border-color var(--transition-fast), background var(--transition-fast), color var(--transition-fast);
}
.lv-btn:hover { border-color: var(--color-accent); color: var(--color-accent); }
.lv-btn.is-active {
    background: var(--color-fg);
    border-color: var(--color-fg);
    color: var(--color-bg);
}
/* Glyphe cartes ▦ = grille 2×2 de carrés */
.lv-glyph-cards {
    display: grid;
    grid-template-columns: 6px 6px;
    grid-template-rows: 6px 6px;
    gap: 2px;
}
.lv-glyph-cards > span { display: block; background: currentColor; }
/* Glyphe liste ≡ = 3 barres horizontales */
.lv-glyph-list {
    display: flex;
    flex-direction: column;
    gap: 2px;
    width: 14px;
}
.lv-glyph-list > span { display: block; height: 2px; background: currentColor; }


/* ═══════════════════════════════════════════════════════════════════ */
/* §12 · TABLE LISTE « PRIX PRATIQUÉS » (M009 Phase 2)                  */
/*    Typo journal : Gontserrat labels · MONO chiffres (alignement col) */
/*    Filets fins gris-argentique-1 · interlignage serré                */
/* ═══════════════════════════════════════════════════════════════════ */
.listings-table-wrap { overflow-x: auto; }
.listings-table {
    width: 100%;
    border-collapse: collapse;
    font-family: var(--font-labeur);
    font-size: var(--font-size-sm);
    line-height: 1.35;
}
.listings-table thead {
    border-bottom: 1px solid var(--gris-argentique-2);
}
.listings-table th {
    padding: var(--space-2) var(--space-3);
    text-align: left;
    font-weight: 700;
    font-size: var(--font-size-xs);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--color-fg-subtle);
    background: var(--color-bg);
    white-space: nowrap;
}
.listings-table th.lt-num { text-align: right; }
.listings-table th.lt-sortable a {
    color: var(--color-fg-subtle);
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}
.listings-table th.lt-sortable a:hover { color: var(--color-accent); }
.listings-table tbody tr {
    border-bottom: 1px solid var(--gris-argentique-1);
    transition: background var(--transition-fast);
}
.listings-table tbody tr:hover { background: var(--color-bg-subtle); }
.listings-table td {
    padding: var(--space-2) var(--space-3);
    vertical-align: middle;
}
/* Colonnes chiffrées : MONO · alignement à droite · le vertical qui empile */
.listings-table td.lt-num,
.listings-table th.lt-num {
    font-family: var(--font-mono);
    text-align: right;
    font-variant-numeric: tabular-nums;
    color: var(--color-fg);
}
.listings-table td.lt-ref,
.listings-table td.lt-date { color: var(--color-fg-subtle); }
.listings-table td.lt-title {
    font-family: var(--font-labeur);
    color: var(--color-fg);
    max-width: 40ch;
}
.listings-table td.lt-title a {
    color: var(--color-fg);
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
}
.listings-table td.lt-title a:hover { color: var(--color-accent); }
.listings-table td.lt-loc,
.listings-table td.lt-seller {
    color: var(--color-fg-subtle);
    font-size: var(--font-size-xs);
}


/* ═══════════════════════════════════════════════════════════════════ */
/* §13 · DASH BOURSOCAMERA (M009 Phase 3)                              */
/*    Bandeau sobre · typo journal + mono chiffres · nuance HONNÊTE   */
/*    en clair · rule_version affiché · filet gauche gris médium       */
/* ═══════════════════════════════════════════════════════════════════ */
.cote-dashboard {
    background: var(--color-bg-subtle);
    /* F1 M009 · liseré gauche = couleur BRANCHE du scope · gris médium par défaut (recherche) */
    border-left: 3px solid var(--cote-branche-color, var(--gris-argentique-2));
    padding: var(--space-4) var(--space-6);
    margin-bottom: var(--space-6);
    font-family: var(--font-labeur);
}
.cote-dashboard[data-branche="boitier"]   { --cote-branche-color: var(--rouge-boitier); }
.cote-dashboard[data-branche="ancien"]    { --cote-branche-color: var(--acajou-rougi); }
.cote-dashboard[data-branche="numerique"] { --cote-branche-color: var(--magenta-capteur); }
.cote-dashboard[data-branche="eclairage"] { --cote-branche-color: var(--corail-gelatine); }
.cote-dashboard[data-branche="chimie"]    { --cote-branche-color: var(--jaune-kodak); }
.cote-dashboard[data-branche="notice"]    { --cote-branche-color: var(--ciel-papier); }
.cote-dashboard[data-branche="postale"]   { --cote-branche-color: var(--caca-oie); }
.cote-dashboard[data-branche="livre"]     { --cote-branche-color: var(--celadon); }
.cote-dashboard[data-branche="wiki"]      { --cote-branche-color: var(--bleu-wiki); }


/* ═══════════════════════════════════════════════════════════════════ */
/* §14 · SIDEBAR CATÉGORIES · arbre 2 niveaux (F2 M009 · 2026-07-12)    */
/*    Parents · enfants indentés · carré branche par entrée            */
/*    Cohérence F2 M008 (§1bis) + arbre lisible                        */
/* ═══════════════════════════════════════════════════════════════════ */
.sidebar-cat-tree { font-family: var(--font-labeur); }
.sidebar-cat {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: 4px 6px;
    font-size: var(--font-size-sm);
    color: var(--color-fg);
    text-decoration: none;
    border-left: 2px solid transparent;
    line-height: 1.3;
    transition: background var(--transition-fast), border-left-color var(--transition-fast);
}
.sidebar-cat:hover {
    background: var(--color-bg-subtle);
    color: var(--color-fg);
}
.sidebar-cat.is-active {
    color: var(--color-accent);
    font-weight: 700;
    background: var(--color-bg-subtle);
}
.sidebar-cat.is-active[data-branche="boitier"]   { border-left-color: var(--rouge-boitier); }
.sidebar-cat.is-active[data-branche="ancien"]    { border-left-color: var(--acajou-rougi); }
.sidebar-cat.is-active[data-branche="numerique"] { border-left-color: var(--magenta-capteur); }
.sidebar-cat.is-active[data-branche="eclairage"] { border-left-color: var(--corail-gelatine); }
.sidebar-cat.is-active[data-branche="chimie"]    { border-left-color: var(--jaune-kodak); }
.sidebar-cat.is-active[data-branche="notice"]    { border-left-color: var(--ciel-papier); }
.sidebar-cat.is-active[data-branche="postale"]   { border-left-color: var(--caca-oie); }
.sidebar-cat.is-active[data-branche="livre"]     { border-left-color: var(--celadon); }
.sidebar-cat.is-active[data-branche="wiki"]      { border-left-color: var(--bleu-wiki); }

.sidebar-cat-all { font-weight: 700; margin-bottom: var(--space-2); }
.sidebar-cat-group { margin-top: var(--space-1); }
.sidebar-cat-parent { font-weight: 600; padding: 4px 0; gap: var(--space-1); }
.sidebar-cat-parent .sidebar-cat-link {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    flex: 1;
    color: inherit;
    text-decoration: none;
    padding: 0 6px;
}
.sidebar-cat-parent .sidebar-cat-link:hover { color: var(--color-accent); }

/* Bouton toggle · zone distincte du libellé (Nanodot : « chevron/carré distinct pour déplier sans naviguer ») */
.cat-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    background: transparent;
    border: 0;
    cursor: pointer;
    color: var(--color-fg-subtle);
    padding: 0;
    flex-shrink: 0;
}
.cat-toggle:hover { color: var(--color-accent); }
.cat-toggle:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 1px; border-radius: var(--radius-sm); }
.cat-toggle-empty { display: inline-block; width: 20px; height: 20px; flex-shrink: 0; }

/* Glyphe § 1bis — cohérent toggle thème : ■ fermé / □ ouvert */
.cat-toggle-glyph {
    display: inline-block;
    width: var(--glyphe-sm);
    height: var(--glyphe-sm);
    background: currentColor;
    transition: background var(--transition-fast), border-color var(--transition-fast);
    border: 2px solid currentColor;
    box-sizing: border-box;
}
.cat-toggle[aria-expanded="true"] .cat-toggle-glyph {
    background: transparent;
}

.sidebar-cat-children {
    display: flex;
    flex-direction: column;
    margin-left: var(--space-4);
    padding-left: var(--space-2);
    border-left: 1px solid var(--gris-argentique-1);
    margin-top: 2px;
}
/* v0.2.1 · override display:flex quand attribut natif hidden posé (bug prod détecté 2026-07-12) */
/*  L'attribut HTML hidden vaut display:none par CSS UA · un display:* CSS le NEUTRALISE. */
/*  Restaurer explicitement avec spécificité suffisante. */
.sidebar-cat-children[hidden] { display: none; }
.sidebar-cat-child {
    font-size: var(--font-size-xs);
    color: var(--color-fg-subtle);
    padding: 3px 6px;
}
.sidebar-cat-child:hover { color: var(--color-fg); }
.cote-head { margin-bottom: var(--space-3); }
.cote-title {
    font-family: var(--font-titrage);
    font-weight: 900;
    font-style: italic;
    font-size: var(--font-size-xl);
    color: var(--color-fg);
    margin: 0;
    line-height: 1.1;
}
.cote-brand { color: var(--rouge-inactinique); }
.cote-scope { color: var(--color-fg-subtle); font-weight: 700; }
.cote-summary {
    font-size: var(--font-size-sm);
    color: var(--color-fg-subtle);
    margin: var(--space-1) 0 0;
    font-family: var(--font-mono);
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.02em;
}
.cote-figures {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-8);
    margin: var(--space-4) 0 var(--space-3);
    align-items: baseline;
}
.cote-figure { display: flex; flex-direction: column; gap: 4px; min-width: 140px; }
.cote-figure-label {
    font-family: var(--font-labeur);
    font-size: var(--font-size-xs);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--color-fg-muted);
    font-weight: 700;
}
.cote-figure-value {
    font-family: var(--font-mono);
    font-variant-numeric: tabular-nums;
    font-size: var(--font-size-xl);
    font-weight: 700;
    color: var(--color-fg);
    line-height: 1.1;
}
.cote-figure-value-sm { font-size: var(--font-size-base); font-weight: 600; }
.cote-figure-split {
    display: grid;
    grid-template-columns: auto auto;
    gap: 2px var(--space-3);
    align-items: baseline;
    min-width: auto;
}
.cote-figure-split .cote-figure-label { grid-column: 1; }
.cote-figure-split .cote-figure-value-sm { grid-column: 2; text-align: right; }
.cote-nuance {
    font-size: var(--font-size-xs);
    font-style: italic;
    color: var(--color-fg-subtle);
    margin: var(--space-2) 0 0;
    padding-top: var(--space-2);
    border-top: 1px solid var(--gris-argentique-1);
    line-height: 1.4;
}
.cote-rule {
    font-family: var(--font-mono);
    font-size: var(--font-size-xs);
    color: var(--color-fg-muted);
    margin: var(--space-1) 0 0;
    letter-spacing: 0.02em;
}
.cote-rule code {
    background: transparent;
    padding: 0;
    color: var(--color-fg-subtle);
    font-weight: 700;
}