/* Captain Auto - Composants : recherche, cartes, fiche annonce, verdict, marche, comparaison */

/* ===== Barre de recherche ===== */

/* Conteneur majeur à double cadre (DESIGN.md « Le double cadre ») : plaque en dégradé,
   anneau de verre en ombre portée, rayon 32. L'anneau déborde de 7 px : le parent ne
   doit jamais porter d'overflow: hidden. */
.search-bar {
    background: var(--bg-1);
    border: 0;
    border-radius: var(--radius-lg);
    box-shadow: var(--coeur-lueur), var(--coque);
    padding: 32px;
    margin: 8px 0 32px;
}

/* Titre d'écran (mode Operate) */
.search-bar h1 {
    font-size: clamp(1.75rem, 3vw, 2.5rem);
    font-weight: 500;
    letter-spacing: -0.02em;
    line-height: 1.1;
    margin-bottom: 10px;
}

.search-subtitle {
    color: var(--text-2);
    font-size: 1.0625rem;
    line-height: 1.6;
    margin-bottom: 6px;
}

/* Source et independance affichees PRES du formulaire, pas seulement au footer :
   la couverture reelle (AutoScout24, 8 pays) doit se lire la ou l'on cherche. */
.search-source-note {
    color: var(--text-3);
    font-size: .8125rem;
    margin: 0 0 28px;
}

.filters-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 20px 16px;
    align-items: end;
}

.filter-submit { display: flex; align-items: end; }
.btn-search { width: 100%; }

/* Puces (classeurs des favoris, raccourcis) : pilules de 32 px, verre et filet au repos,
   active en fond --text-1 et texte --bg-0 (DESIGN.md « Pastilles, puces, bascules »). */
.saved-searches {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin: 0 0 24px;
}

.saved-label {
    font-family: var(--font);
    font-size: .8125rem;
    font-weight: 500;
    color: var(--text-3);
    white-space: nowrap;
    margin-right: 4px;
}

.saved-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 32px;
    padding: 0 14px;
    background: var(--verre);
    border: 1px solid var(--border);
    color: var(--text-2);
    border-radius: var(--radius-pill);
    font-family: var(--font);
    font-size: .875rem;
    font-weight: 500;
    cursor: pointer;
    transition: color var(--t), background-color var(--t), border-color var(--t), transform var(--t);
    white-space: nowrap;
}
.saved-chip:active { transform: scale(.98); }
@media (hover: hover) {
    .saved-chip:hover { color: var(--text-1); border-color: var(--border-strong); background: rgba(255, 255, 255, .07); }
}

.saved-chip-delete {
    display: inline-grid;
    place-items: center;
    width: 20px;
    height: 20px;
    color: var(--text-3);
    font-size: .75rem;
    border-radius: 50%;
    background: rgba(255, 255, 255, .06);
    line-height: 1;
}

.saved-chip-delete:hover { color: var(--danger); background: var(--danger-dim); }

/* ===== Barre de tri ===== */

/* Bascule segmentée (DESIGN.md) : conteneur de verre, le segment actif est une pilule
   claire (fond --text-1, texte --bg-0). Les actions sur la recherche sont des pilules de
   verre à part, « Analyser les résultats » teinté de bleu comme toute action d'analyse. */
.sort-bar {
    display: flex;
    align-items: center;
    gap: 10px 8px;
    padding: 0;
    margin: 0 0 24px;
    flex-wrap: wrap;
}

.sort-bar-label {
    font-family: var(--font);
    font-size: .8125rem;
    font-weight: 500;
    color: var(--text-3);
    margin-right: 4px;
}

.sort-seg {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 2px;
    padding: 4px;
    background: var(--verre);
    border: 1px solid var(--border);
    border-radius: var(--radius-pill);
}

.sort-bar-actions { margin-left: auto; display: flex; flex-wrap: wrap; gap: 8px; }
.sort-ligne { display: contents; }

.sort-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 36px;
    padding: 0 14px;
    background: var(--verre);
    border: 1px solid var(--border);
    border-radius: var(--radius-pill);
    color: var(--text-2);
    font-family: var(--font);
    font-size: .875rem;
    font-weight: 500;
    white-space: nowrap;
    cursor: pointer;
    transition: color var(--t), background-color var(--t), border-color var(--t), transform var(--t);
}
.sort-btn:active { transform: scale(.98); }
.sort-seg .sort-btn { background: transparent; border-color: transparent; }

@media (hover: hover) {
    .sort-btn:hover { color: var(--text-1); border-color: var(--border-strong); background: rgba(255, 255, 255, .07); }
    .sort-seg .sort-btn:hover { border-color: transparent; }
}

/* « Plus récentes » ne reclasse pas la liste, il relance la recherche à la source :
   il vit hors de la bascule, en pilule de verre à part. */
.sort-btn.sort-recent { margin-left: 4px; }

:root .sort-btn.active,
:root .sort-seg .sort-btn.active {
    background: var(--text-1);
    border-color: var(--text-1);
    color: var(--bg-0);
    font-weight: 500;
}

.sort-btn .sort-arrow { font-size: .75rem; opacity: 0.6; }
.sort-btn.active .sort-arrow { opacity: 1; }

/* Actions sur la recherche : pilules de verre ; l'analyse est teintée de bleu
   (texte bleu clair, jamais le bleu vif en couleur de texte). */
.sort-btn.sort-ai {
    background: var(--accent-dim);
    border-color: var(--accent-border);
    color: var(--accent-strong);
}
@media (hover: hover) {
    .sort-btn.sort-ai:hover { background: rgba(0, 87, 217, .26); color: var(--text-1); border-color: var(--accent-border); }
}


/* ===== Grille de résultats et cartes ===== */

/* L'anneau du double cadre déborde de 7 px : 24 px entre deux cartes (DESIGN.md, 20 au
   moins), et 8 px d'air au-dessus de la grille. */
.results-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr));
    gap: 24px;
    padding-top: 8px;
}

/* Carte de résultat (et de favori) : plaque en dégradé sertie dans l'anneau de verre,
   rayon 24. Aucune bordure : le filet est la seconde ombre de --coque. overflow: hidden
   ne rogne pas l'anneau (c'est l'ombre de la carte elle-même, pas d'un enfant). */
.car-card {
    position: relative;
    display: flex;
    flex-direction: column;
    background: var(--bg-1);
    border: 0;
    border-radius: var(--radius);
    box-shadow: var(--coeur-lueur), var(--coque);
    overflow: hidden;
    cursor: pointer;
}

/* Voile de tête (DESIGN.md « Verdict ») : la tonalité d'un jugement calculé se lit
   par une teinte en haut de la plaque, doublée du mot écrit dans la carte. Jamais de
   rail ni de bordure colorée. */
.car-card[data-verdict="go"] {
    background: var(--bg-1);
}
.car-card.is-anomalie {
    background: var(--bg-1);
}

/* Analyse de lot : « À éviter » s'efface, « Meilleur choix » s'allume (anneau bleu
   clair), chacun avec sa pastille écrite sur la photo (.card-marque). */
.car-card.is-avoided { opacity: .6; }
.car-card.is-top-pick {
    box-shadow: var(--coeur-lueur), 0 0 0 var(--anneau) rgba(124, 192, 240, .10), 0 0 0 var(--anneau-filet) rgba(124, 192, 240, .55);
}
.card-marque {
    position: absolute;
    left: 10px;
    bottom: 10px;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 28px;
    padding: 0 12px;
    border-radius: var(--radius-pill);
    font-size: .8125rem;
    font-weight: 500;
    white-space: nowrap;
}
.card-marque-top { background: var(--accent-strong); color: #04121f; }
.card-marque-evite { background: var(--danger); color: #1a0200; }
/* À confirmer (analyse vérifiée du lot, 05/11/2026) : ambre = prudence, toujours écrit. */
.card-marque-confirmer { background: var(--warning); color: #1f1400; }
/* Raison du classement sous le titre (04/11/2026) : les cartes reclassées remplacent les
   « briques » sans photo du panneau d'analyse. Deux lignes au plus, texte secondaire. */
.car-card .card-ia {
    margin: 6px 0 0;
    font-size: .8125rem;
    line-height: 1.4;
    color: var(--text-2);
    display: -webkit-box;
    -webkit-line-clamp: 3;   /* 3 lignes depuis le 05/11/2026 : la raison chiffrée (prix final, malus, écart, cote) */
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.car-card .card-ia::before { content: "Analyse : "; color: var(--accent-strong); font-weight: 500; }
.car-card .card-ia-evite::before { color: var(--danger); }
.car-card .card-ia-confirmer::before { color: var(--warning); }

/* Photo : plaque intérieure, inset de 6 px, rayon intérieur concentrique (24 - 6). */
.car-card-photo {
    position: relative;
    flex: 0 0 auto;
    aspect-ratio: 16 / 10;
    overflow: hidden;
    background: var(--bg-3);
}

.car-card-img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    background: var(--bg-3);
}

.car-card-img-empty {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-4);
    background: var(--bg-3);
}

.car-card-body { padding: 16px; display: flex; flex-direction: column; gap: 12px; flex: 1; }

.car-card-title {
    font-size: 1.25rem;
    font-weight: 500;
    letter-spacing: -0.01em;
}

/* Ancienne puce de caractéristique (gardée pour les vues qui la portent encore). */
.spec-tag {
    background: var(--verre);
    border: 1px solid var(--border);
    color: var(--text-2);
    padding: 2px 10px;
    border-radius: var(--radius-xs);
    font-size: .8125rem;
}

/* Hérités, plus rendus par les cartes (le montant héros les remplace). */
.card-judgement {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    min-height: 30px;
}

.delta-chip {
    display: inline-flex;
    align-items: baseline;
    gap: 4px;
    padding: 4px 12px;
    border-radius: var(--radius-pill);
    font-weight: 500;
    font-size: .9375rem;
    font-variant-numeric: tabular-nums;
}

.delta-chip small { font-weight: 500; font-size: .75rem; opacity: 0.85; }

.delta-chip.positive { background: var(--success-dim); color: var(--success); border: 1px solid var(--success-border); }
.delta-chip.neutral  { background: var(--verre); color: var(--text-1); border: 1px solid var(--border-strong); }
.delta-chip.negative { background: var(--verre); color: var(--text-1); border: 1px solid var(--border-strong); }

/* Favoris : potentiel mesuré à l'ajout. Favorable en bleu clair, défavorable en
   --text-1 (un écart au-dessus de la cote n'est pas une alerte, DESIGN.md). */
.card-margin-note { font-size: .875rem; color: var(--text-2); }
.card-margin-note .margin-positive { color: var(--success); font-weight: 500; }
.card-margin-note .margin-negative { color: var(--text-1); font-weight: 500; }

.car-card-footer {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 12px;
    margin-top: auto;
}

.price-de {
    font-size: 1.5rem;
    font-weight: 500;
    letter-spacing: -0.01em;
    font-variant-numeric: tabular-nums;
}

.price-fr {
    font-size: .8125rem;
    color: var(--text-2);
    font-variant-numeric: tabular-nums;
}

/* Actions de la carte (comparer, favori ; classer et notes sur les favoris) : ronds de
   verre de 40 px posés sur la photo, en haut à droite (44 px au doigt). Fond sombre
   translucide SANS flou : la carte défile (DESIGN.md « Flou »). */
.card-actions {
    position: absolute;
    top: 8px;
    right: 8px;
    z-index: 3;
    display: flex;
    gap: 4px;
    align-items: center;
}

:root .car-card .card-actions :is(.btn-fav, .btn-compare-select, .btn-folder, .btn-notes) {
    display: inline-grid;
    place-items: center;
    width: 36px;
    height: 36px;
    min-height: 0;
    padding: 0;
    gap: 0;
    border-radius: 8px;
    background: rgba(11, 13, 18, .8);
    border: 1px solid var(--border);
    color: var(--text-1);
    cursor: pointer;
    transition: color var(--t), background-color var(--t), border-color var(--t), transform var(--t);
}
:root .car-card .card-actions .btn-fav.is-fav { color: var(--warning); border-color: var(--warning-border); background: rgba(26, 19, 0, .78); }
:root .car-card .card-actions .btn-compare-select.selected { color: #04121f; border-color: var(--accent-strong); background: var(--accent-strong); }
:root .car-card .card-actions :is(.btn-fav, .btn-compare-select, .btn-folder, .btn-notes):active { transform: scale(.94); }
@media (hover: hover) {
    :root .car-card .card-actions :is(.btn-folder, .btn-notes):hover { background: rgba(23, 27, 37, .92); border-color: rgba(255, 255, 255, .3); color: var(--text-1); }
    :root .car-card .card-actions .btn-fav:hover { color: var(--warning); border-color: var(--warning-border); background: rgba(26, 19, 0, .85); }
    :root .car-card .card-actions .btn-compare-select:not(.selected):hover { color: var(--accent-strong); border-color: var(--accent-border); background: rgba(4, 18, 31, .88); }
}

.btn-fav {
    background: none;
    border: 1px solid var(--border);
    border-radius: var(--radius-pill);
    padding: 6px 10px;
    cursor: pointer;
    font-size: 1rem;
    transition: var(--transition);
    color: var(--text-3);
}

.btn-compare-select {
    background: transparent;
    border: 1px solid var(--border);
    border-radius: var(--radius-pill);
    padding: 6px 8px;
    font-size: 0.9rem;
    cursor: pointer;
    transition: var(--transition);
    color: var(--text-3);
}

/* Survol (souris seulement) : le filet de l'anneau passe à .16 ; la montée de 3 px est
   portée par effets.css. */
@media (hover: hover) {
    .car-card:not(.compare-selected):not(.is-top-pick):hover {
        box-shadow: var(--coeur-lueur), 0 0 0 var(--anneau) rgba(255, 255, 255, .045), 0 0 0 var(--anneau-filet) var(--border-strong);
    }
}

/* Sélection de comparaison : l'anneau passe au bleu clair. */
.car-card.compare-selected {
    box-shadow: var(--coeur-lueur), 0 0 0 var(--anneau) rgba(124, 192, 240, .07), 0 0 0 var(--anneau-filet) var(--accent-strong);
}

/* Notes sur les favoris */
.card-notes {
    margin: 0 20px 20px;
    padding: 12px 14px;
    border-radius: var(--radius-sm);
    background: var(--bg-inset);
    border: 1px solid var(--border);
    color: var(--text-2);
    font-size: .875rem;
    line-height: 1.5;
}

/* États vides (DESIGN.md « Squelettes et états vides ») : rond de verre de 64 px avec
   l'icône fine, titre 1.25rem, une phrase, UN bouton. Les états rendus par les modules
   JS portent .etat-vide et leur icône ; ceux dont le texte vient du serveur ou d'un
   module hors de ce chantier reçoivent le rond par ::before. */
.etat-vide,
#page-favorites > .empty-state,
#favorites-grid > .empty-state,
#page-comparator > .empty-state,
#alerts-list > .empty-state,
.search-status.is-vide {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    max-width: 40rem;
    margin: 0 auto;
    padding: 48px 20px 56px;
    text-align: center;
    font-size: 1rem;
    line-height: 1.6;
    color: var(--text-2);
}
:is(#page-favorites > .empty-state, #favorites-grid > .empty-state, #page-comparator > .empty-state, #alerts-list > .empty-state, .search-status.is-vide):not(.etat-vide)::before,
.etat-vide-rond {
    content: "";
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    width: 64px;
    height: 64px;
    margin-bottom: 8px;
    border-radius: 50%;
    background: var(--verre);
    box-shadow: inset 0 1px 1px rgba(255, 255, 255, .07), 0 0 0 1px var(--border);
    color: var(--text-1);
}
/* Icône fine dessinée par masque (loupe par défaut, étoile sur les favoris, cloche sur
   les alertes) : la couleur suit le texte. */
:is(#page-favorites > .empty-state, #favorites-grid > .empty-state, #page-comparator > .empty-state, #alerts-list > .empty-state, .search-status.is-vide):not(.etat-vide)::before {
    background:
        var(--etat-vide-icone, url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23f2f4f8' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3.5-3.5'/%3E%3C/svg%3E")) center / 26px 26px no-repeat,
        var(--verre);
}
#page-favorites > .empty-state, #favorites-grid > .empty-state, #page-comparator > .empty-state {
    --etat-vide-icone: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23f2f4f8' stroke-width='1.5' stroke-linejoin='round'%3E%3Cpath d='M12 3.5l2.6 5.3 5.9.9-4.3 4.1 1 5.8L12 16.9l-5.2 2.7 1-5.8-4.3-4.1 5.9-.9z'/%3E%3C/svg%3E");
}
#alerts-list > .empty-state {
    --etat-vide-icone: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23f2f4f8' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 16V11a6 6 0 1 1 12 0v5l1.5 2h-15z'/%3E%3Cpath d='M10 20.5a2 2 0 0 0 4 0'/%3E%3C/svg%3E");
}
.etat-vide-titre { margin: 0; font-size: 1.25rem; font-weight: 500; letter-spacing: -0.01em; line-height: 1.3; color: var(--text-1); }
.etat-vide p { margin: 0; max-width: 34rem; }
.etat-vide .btn-primary, .etat-vide .btn-secondary { margin-top: 12px; }
/* search.js pose display: block en ligne sur le statut : le rond se centre par ses marges. */
.search-status.is-vide { color: var(--text-1); }
.search-status.is-vide::before { margin: 0 auto 16px; }
.search-status.is-vide .status-hint { color: var(--text-2); font-size: .9375rem; }

/* Badge evaluation prix AutoScout (pose sur la photo) */
.card-eval-wrap { position: absolute; top: 10px; left: 10px; z-index: 2; }

/* Évaluation de prix de la source : badge de signal du système (libellé mono 12 px,
   bordure et voile du signal, aucune ombre au repos). Le libellé écrit porte le sens. */
.price-eval-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 8px;
    border: 1px solid transparent;
    border-radius: var(--radius-sm);
    font-family: var(--font);
    font-size: .8125rem;
    font-weight: 500;
}

.price-eval-badge.eval-top,
.price-eval-badge.eval-good { background: var(--success-dim); border-color: var(--success-border); color: var(--success); }
.price-eval-badge.eval-fair,
.price-eval-badge.eval-high { background: var(--warning-dim); border-color: var(--warning-border); color: var(--warning); }
.price-eval-badge.eval-exp  { background: var(--danger-dim); border-color: var(--danger-border); color: var(--danger); }
.price-eval-badge.eval-none { background: var(--bg-2); border-color: var(--border); color: var(--text-2); }

/* ===== Pagination ===== */

/* Pagination : pilules de verre de 40 px, page courante en fond --text-1. */
.pagination { margin-top: 32px; }
.pagination-count { text-align: center; color: var(--text-3); font-size: .875rem; margin-bottom: 12px; font-variant-numeric: tabular-nums; }
.pagination-btns { display: flex; justify-content: center; gap: 6px; flex-wrap: wrap; align-items: center; }
.page-ellipsis { color: var(--text-3); padding: 0 4px; }

.page-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 40px;
    min-height: 40px;
    padding: 0 14px;
    background: var(--verre);
    border: 1px solid var(--border);
    border-radius: var(--radius-pill);
    color: var(--text-2);
    font-family: var(--font);
    font-size: .9375rem;
    font-variant-numeric: tabular-nums;
    cursor: pointer;
    transition: color var(--t), background-color var(--t), border-color var(--t), transform var(--t);
}
.page-btn:active { transform: scale(.96); }
@media (hover: hover) {
    .page-btn:hover { color: var(--text-1); border-color: var(--border-strong); background: rgba(255, 255, 255, .07); }
}
.page-btn.active,
.page-btn.active:hover { background: var(--text-1); border-color: var(--text-1); color: var(--bg-0); font-weight: 500; }

/* ===== Fiche annonce ===== */
/* « L'instrument de verre » (DESIGN.md, 14/10/2026), mode Operate. La fiche entière est
   dessinée ICI : les anciennes couches de bordereau.css (coin coupé, rails de verdict,
   montants en Mono, réordonnancement) ont été retirées. Les blocs de la fiche sont
   visés sous #listing-content : .listing-section et .samples-table servent aussi au
   compte et au rapport public, qui gardent leurs règles génériques. */

#page-listing {
    /* Coche fine des listes (maquette landing-soft, liste « gardes »). */
    --coche-fine: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12.5 4.5 4.5L19 7.5'/%3E%3C/svg%3E");
    /* Hauteur réservée à la barre de décision collante (colonne de référence collante). */
    --barre-h: 88px;
}

/* Retour : pilule de verre, 40 px (44 au doigt, responsive.css). */
.listing-back {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 40px;
    margin: 0 0 20px;
    padding: 0 16px 0 12px;
    background: var(--verre);
    border: 1px solid var(--border);
    border-radius: var(--radius-pill);
    color: var(--text-2);
    font-family: var(--font);
    font-size: .875rem;
    font-weight: 500;
    text-decoration: none;
    cursor: pointer;
    transition: color var(--t), border-color var(--t), background-color var(--t), transform var(--t);
}
.listing-back:active { transform: scale(.98); }
@media (hover: hover) {
    .listing-back:hover { color: var(--text-1); border-color: var(--border-strong); background: rgba(255, 255, 255, .08); }
}

/* En-tête : titre d'écran, méta-données en Mono, prix à droite. */
.listing-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 16px 32px;
    margin: 0 0 24px;
    flex-wrap: wrap;
}

.listing-header h1 {
    margin: 0;
    max-width: 30ch;
    font-size: clamp(1.75rem, 3vw, 2.5rem);
    font-weight: 500;
    letter-spacing: -0.02em;
    line-height: 1.1;
    color: var(--text-1);
    text-wrap: balance;
    overflow-wrap: anywhere;
}

/* Titre + provenance forment UN bloc : sans ce conteneur, la ligne de pays devenait
   un troisième élément flex et se rangeait à côté du prix. */
.listing-head-main { flex: 1 1 420px; min-width: 0; }

.listing-origin {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px 10px;
    margin-top: 14px;
    font-family: var(--font-mono);
    font-size: .8125rem;
    letter-spacing: 0;
    color: var(--text-3);
}
.listing-origin .lo-meta { display: inline-flex; align-items: center; gap: 10px; color: var(--text-2); font-variant-numeric: tabular-nums; }
.lo-sep { color: var(--text-3); }
.flag-chip.plaque {
    display: inline-flex;
    align-items: stretch;
    height: 22px;
    border-radius: 4px;
    overflow: hidden;
    background: #f2f4f8;
    color: #12151b;
    font-family: var(--font-mono);
    font-size: .75rem;
    font-weight: 500;
    line-height: 22px;
    letter-spacing: 0;
    text-transform: uppercase;
    white-space: nowrap;
}
.plaque-bande { padding: 0 6px; background: #0057D9; color: #fff; font-weight: 600; }
.plaque.is-hors-ue .plaque-bande { background: #2B2B2B; }
.plaque-nom { padding: 0 8px 0 6px; }
.listing-origin .lo-city { color: var(--text-3); }
.listing-origin .lo-pays { display: inline-flex; align-items: center; gap: 8px; font-family: var(--font); font-size: .875rem; color: var(--text-2); }
.listing-origin .lo-pays select {
    min-height: 36px;
    padding: 0 36px 0 14px;
    border-radius: var(--radius-pill);
    background-position: right 12px center;
    font-size: .875rem;
}
.listing-origin .lo-assumed {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-family: var(--font);
    font-size: .875rem;
    color: var(--warning);
    cursor: help;
}

.listing-header-side {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 8px;
    text-align: right;
    flex-shrink: 0;
}

/* Comparer sur Leboncoin (04/11/2026) : sous le prix, pilule compacte au filet bleu clair. */
.listing-header-side .btn-lbc {
    min-height: 40px;
    padding: 8px 16px;
    font-size: .875rem;
    text-decoration: none;
    border-color: var(--accent-border);
}
.listing-header-side .btn-lbc .ico { flex: none; }

/* Valeur de marché selon AutoScout (04/11/2026) : UNE ligne discrète sous le bouton Leboncoin
   (« Super prix selon AutoScout · valeur 47 800 € ») ; écart, borne « Bon prix », fourchettes
   et réserve dans l'infobulle. Le montant seul passe en texte principal (c'est l'avis d'AutoScout). */
.as-eval { max-width: 360px; font-size: .8125rem; color: var(--text-2); line-height: 1.35; cursor: help; }
.as-eval .num { color: var(--text-1); font-weight: 500; }
.as-eval .lo-sep { margin: 0 6px; }
@media (max-width: 768px) { .as-eval { flex-basis: 100%; max-width: none; text-align: left; } }

/* Prix du vendeur : le fait de départ, pas le montant héros (celui-ci est l'écart). */
.listing-price {
    font-family: var(--font);
    font-size: clamp(1.75rem, 2.6vw, 2.25rem);
    font-weight: 500;
    letter-spacing: -0.01em;
    line-height: 1;
    color: var(--text-1);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

/* Actions : pilules de 44 px, alignées à droite sous la barre de décision. */
.listing-header-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: flex-end;
    margin: 0 0 24px;
}
.listing-header-actions :is(.btn-secondary, .btn-fav) {
    min-height: 44px;
    padding: 10px 20px;
    gap: 8px;
    font-size: .875rem;
    text-decoration: none;
}
.listing-header-actions .btn-fav {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font);
    font-weight: 500;
    color: var(--text-1);
    cursor: pointer;
}
/* Message au vendeur : la seule action qui fait avancer l'achat, filet bleu clair. */
.listing-header-actions > .btn-secondary[onclick*="generateSellerMessage"] { border-color: var(--accent-border); }
.listing-header-actions .ico { flex: none; }

/* Outil interne (admin), rangé dans le menu « Plus » depuis le 04/11/2026 : contour
   pointillé, jamais confondu avec une fonction offerte. */
:root .more-menu > .btn-admin-tool {
    margin-top: 4px;
    border: 1px dashed var(--accent-border);
    color: var(--accent-strong);
}
/* « Votre avis » : le bouton flottant est masqué sur la fiche (04/11/2026) ; sous 1024 px le
   menu plein écran porte déjà l'entrée, d'où l'entrée du menu « Plus » sur ordinateur seulement. */
@media (max-width: 1023px) { .more-menu > .more-avis { display: none; } }

/* Menu « Plus » : menu déroulant de DESIGN.md (rayon 20, --bg-3, entrées de 40 px).
   Calque juste au-dessus de la barre collante, sous l'îlot. */
.actions-more { position: relative; display: inline-block; }
.more-menu {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    z-index: calc(var(--z-collant) + 5);
    min-width: 240px;
    padding: 6px;
    display: flex;
    flex-direction: column;
    gap: 2px;
    background: var(--bg-3);
    border: 1px solid var(--border-strong);
    border-radius: var(--radius);
    box-shadow: var(--ombre-flottante);
}
.more-menu[hidden] { display: none; }
.more-menu > * {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 40px;
    padding: 0 14px;
    background: none;
    border: 0;
    border-radius: var(--radius-pill);
    color: var(--text-2);
    font-family: var(--font);
    font-size: .875rem;
    text-align: left;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    transition: background-color var(--t), color var(--t);
}
.more-menu .ico { flex: none; opacity: .75; }
@media (hover: hover) {
    .more-menu > *:hover { background: rgba(255, 255, 255, .06); color: var(--text-1); }
}

/* Impression de la fiche (Listing.printDossier, sans formule payante) : encre noire sur
   papier blanc, ni verre, ni anneau, ni voile. Les pastilles gardent un filet pour que
   le mot reste lisible sans sa couleur. */
@media print {
    #listing-content, #listing-content * { color: #111 !important; text-shadow: none !important; }
    #listing-content :is(.listing-section, .verdict-card, .signals-box, .decision-bar, .key-specs, .listing-gallery,
        .ecart-box, .market-potential, .market-stat, .sample-card, .calc-vat, .co2-quest, .calc-scenarios, .k-caveat,
        .verdict-maxprice, .flag-banner, .check-banner, .verdict-insight, .verdict-nego, .stored-note, .photo-check,
        .roadmap-step, .js-dossier-offre, .retiree-banner) {
        background: #fff !important;
        box-shadow: none !important;
        border: 1px solid #ccc !important;
    }
    #listing-content :is(.verdict-pastille, .signal-badge, .db-word, .db-crit, .db-warn, .k-grav, .pc-verdict,
        .flag-banner-title, .check-banner-title, .confidence-badge, .listing-drop, .retiree-label) {
        background: #fff !important;
        border: 1px solid #555 !important;
    }
    #listing-content .fb-ligne i { border: 1px solid #ccc; }
    #listing-content .fb-ligne i::after { background: #777 !important; }
}

/* Galerie : coins de 24 px dans un double cadre (l'anneau est l'ombre portée de la
   galerie elle-même : son overflow ne le rogne pas). */
.listing-gallery {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
    grid-template-rows: repeat(2, minmax(0, 1fr));
    gap: 6px;
    height: clamp(280px, 34vw, 460px);
    margin: 8px 0 24px;
    padding: 0;
    background: var(--bg-1);
    border: 0;
    border-radius: var(--radius);
    overflow: hidden;
    box-shadow: var(--coque);
}
.listing-gallery img {
    display: block;
    width: 100%;
    height: 100%;
    min-height: 0;
    object-fit: cover;
    cursor: zoom-in;
    border-radius: 0;
    transition: opacity var(--t);
}
.listing-main-photo { grid-row: span 2; aspect-ratio: auto; }
/* Deux photos : la seconde occupe toute la colonne ; une seule : pleine largeur. */
.listing-gallery > img:nth-of-type(2):last-of-type { grid-row: span 2; }
.listing-gallery:has(> img:only-of-type) { grid-template-columns: minmax(0, 1fr); }
@media (hover: hover) { .listing-gallery img:hover { opacity: .88; } }

.listing-thumbs {
    display: flex;
    gap: 8px;
    margin: -8px 0 24px;
    padding: 2px 2px 8px;
    overflow-x: auto;
    scroll-snap-type: x proximity;
    scrollbar-width: thin;
}
.listing-thumbs img {
    flex: none;
    width: 84px;
    height: 60px;
    object-fit: cover;
    border-radius: var(--radius-sm);
    border: 1px solid var(--border);
    cursor: zoom-in;
    opacity: .8;
    scroll-snap-align: start;
    transition: opacity var(--t), border-color var(--t);
}
@media (hover: hover) { .listing-thumbs img:hover { opacity: 1; border-color: var(--border-strong); } }

/* Grille : colonne de décision et colonne de référence (bordereau.css, « FICHE EN DEUX
   COLONNES »). Ici la valeur de repli d'une colonne. */
.listing-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 24px;
}

/* Cartes de la fiche : double cadre, cœur en dégradé, rayon 24 (DESIGN.md, « Cartes »). */
#listing-content :is(.listing-section, .verdict-card, .signals-box) {
    position: relative;
    min-width: 0;
    padding: 24px;
    background: var(--bg-1);
    border: 0;
    border-radius: var(--radius);
    box-shadow: var(--coeur-lueur), var(--coque);
    clip-path: none;
}
#listing-content :is(.listing-section, .verdict-card) > h2,
#listing-content .ticket-tete h2 {
    margin: 0 0 16px;
    font-size: 1.25rem;
    font-weight: 500;
    letter-spacing: -0.01em;
    line-height: 1.25;
    text-transform: none;
    color: var(--text-1);
}
#listing-content .listing-section h2 small { font-weight: 500; }

#listing-content .specs-table { width: 100%; border-collapse: collapse; table-layout: fixed; background: none; border: 0; padding: 0; }
#listing-content .specs-table tr { height: auto; border-bottom: 1px solid rgba(255, 255, 255, .05); }
#listing-content .specs-table tr:last-child { border-bottom: 0; }
#listing-content .specs-table td {
    height: auto;
    padding: 10px 0;
    border: 0;
    font-family: var(--font);
    font-size: .875rem;
    line-height: 1.4;
    vertical-align: top;
    text-align: right;
    color: var(--text-1);
    font-variant-numeric: tabular-nums;
    overflow-wrap: anywhere;
}
#listing-content .specs-table td:first-child { width: 46%; padding-right: 12px; text-align: left; color: var(--text-2); }

#listing-content .listing-description {
    max-width: 72ch;
    margin: 0;
    white-space: normal;
    color: var(--text-2);
    font-size: .9375rem;
    line-height: 1.65;
}

.listing-section {
    background: var(--bg-2);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 20px;
}

.listing-section.span-2 { grid-column: span 2; }

.listing-section h2 {
    font-size: .875rem;
    font-weight: 600;
    color: var(--text-2);
    margin-bottom: 14px;
}

.section-note { color: var(--text-3); text-align: center; font-size: .875rem; padding: 12px 0; }

.specs-table { width: 100%; border-collapse: collapse; }
.specs-table tr { border-bottom: 1px solid var(--border); }
.specs-table tr:last-child { border: none; }
.specs-table td { padding: 8px 0; font-size: .875rem; }
.specs-table td:first-child { color: var(--text-2); width: 40%; }
.vendeur-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.vendeur-actions .btn-secondary { display: inline-flex; align-items: center; min-height: 44px; text-decoration: none; }

.equip-tags { display: flex; flex-wrap: wrap; gap: 6px; }

.equip-tag {
    background: var(--bg-3);
    color: var(--text-2);
    padding: 4px 10px;
    border-radius: var(--radius-sm);
    font-size: .8125rem;
}

.listing-description {
    white-space: pre-wrap;
    color: var(--text-2);
    font-size: .875rem;
}

/* ===== Bloc verdict (analyse) : la piece maitresse de la fiche ===== */
/* Le verdict se lit par une pastille ÉCRITE (bleu clair, ambre, rouge) et un voile de
   tête sur la carte, posés seulement sur un jugement calculé (is-go, is-warn, is-stop
   par Listing.applyVerdict ; la pré-analyse par sa classe micro-*). Plus aucun rail. */
#listing-content .verdict-card.is-go,
#listing-content .verdict-card:has(.micro-vert) {
    background: var(--bg-1);
}
#listing-content .verdict-card.is-warn,
#listing-content .verdict-card:has(.micro-orange) {
    background: var(--bg-1);
}
#listing-content .verdict-card.is-stop,
#listing-content .verdict-card:has(.micro-rouge) {
    background: var(--bg-1);
}

/* Pastille écrite d'un jugement : verdict, pré-analyse, état du ticket. */
.verdict-pastille {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 28px;
    padding: 4px 12px;
    border: 1px solid transparent;
    border-radius: var(--radius-xs);
    font-family: var(--font);
    font-size: .8125rem;
    font-weight: 500;
    line-height: 1.2;
    letter-spacing: 0;
    text-transform: none;
    white-space: nowrap;
}
.verdict-pastille.v-go    { background: var(--accent-strong); color: #04121f; }
.verdict-pastille.v-warn  { background: var(--warning); color: #1a1300; }
.verdict-pastille.v-stop  { background: var(--danger); color: #1a0200; }
.verdict-pastille.v-neutre { background: var(--verre); border-color: var(--border-strong); color: var(--text-2); }

.verdict-head {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 20px 24px;
    margin-bottom: 24px;
}
.verdict-head-texte { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; min-width: 0; }
@media (max-width: 620px) {
    .verdict-head { grid-template-columns: auto minmax(0, 1fr); gap: 16px 20px; }
    .verdict-head .verdict-maxprice { grid-column: 1 / -1; margin-left: 0; text-align: left; align-items: flex-start; }
}

/* Jauge du score : cadran enfoncé, anneau de la couleur du jugement, score en montant
   héros. La valeur passe par --pct (animée par effets.css). */
.score-ring {
    position: relative;
    display: grid;
    place-items: center;
    flex: none;
    width: 112px;
    height: 112px;
    border-radius: 50%;
    background:
        radial-gradient(closest-side, var(--bg-inset) 85%, transparent 86%),
        conic-gradient(var(--ring-color, var(--accent-strong)) calc(var(--pct, 0) * 1%), rgba(255, 255, 255, .07) 0);
    box-shadow: 0 0 0 var(--anneau) rgba(255, 255, 255, .035), 0 0 0 var(--anneau-filet) rgba(255, 255, 255, .085);
}
.score-ring-value {
    font-family: var(--font);
    font-size: 2.5rem;
    font-weight: 500;
    line-height: .9;
    letter-spacing: -0.02em;
    color: var(--ring-color, var(--text-1));
    font-variant-numeric: tabular-nums;
}
.score-ring-value small { font-size: .875rem; font-weight: 500; letter-spacing: 0; color: var(--text-3); }

.score-ring.score-good { --ring-color: var(--accent-strong); }
.score-ring.score-mid  { --ring-color: var(--warning); }
.score-ring.score-bad  { --ring-color: var(--danger); }

/* Squelette du verdict à la taille de la jauge finale (effets.css le dessine à 76 px). */
#listing-content .verdict-card .fx-sq-anneau { width: 112px; height: 112px; }

.verdict-title { margin: 0; font-size: 1.25rem; font-weight: 500; letter-spacing: -0.01em; line-height: 1.3; color: var(--text-1); }
.verdict-sub { margin: 0; color: var(--text-3); font-size: .875rem; }

/* Prix maximal : information neutre dans un encadré de verre, à droite de la tête. */
.verdict-maxprice-sous { font-size: .8125rem; color: var(--text-3); }
.verdict-maxprice {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 4px;
    margin: 0 0 0 auto;
    padding: 14px 20px;
    text-align: right;
    background: var(--verre);
    border: 1px solid var(--border);
    border-radius: var(--radius);
}
.verdict-maxprice-value {
    font-family: var(--font);
    font-size: 1.75rem;
    font-weight: 500;
    line-height: 1.05;
    letter-spacing: -0.01em;
    color: var(--text-1);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

/* Signaux d'alerte de l'analyse : liste à pastille écrite, sans bordure gauche. */
.flag-banner {
    margin: 0 0 16px;
    padding: 16px 20px;
    background: rgba(255, 90, 82, .1);
    border: 1px solid var(--danger-border);
    border-radius: var(--radius);
}
.flag-banner-title {
    display: inline-flex;
    align-items: center;
    min-height: 26px;
    margin: 0 0 10px;
    padding: 4px 12px;
    border-radius: var(--radius-xs);
    background: var(--danger);
    color: #1a0200;
    font-family: var(--font);
    font-size: .8125rem;
    font-weight: 500;
    letter-spacing: 0;
    text-transform: none;
}
.flag-banner ul { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.flag-banner li { position: relative; padding-left: 20px; font-size: .9375rem; line-height: 1.5; color: var(--text-1); }
.flag-banner li::before {
    content: "";
    position: absolute;
    left: 2px;
    top: .6em;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--danger);
}

/* À demander au vendeur : ce que l'annonce ne dit pas. Pastille ambre en filet (à
   vérifier), jamais rouge : un silence n'est pas un défaut. */
.check-banner {
    margin: 16px 0 0;
    padding: 16px 20px;
    background: rgba(255, 255, 255, .035);
    border: 1px solid var(--border);
    border-radius: var(--radius);
}
.check-banner-title {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 26px;
    padding: 4px 12px;
    border: 1px solid var(--warning-border);
    border-radius: var(--radius-xs);
    background: var(--warning-dim);
    color: var(--warning);
    font-family: var(--font);
    font-size: .8125rem;
    font-weight: 500;
    letter-spacing: 0;
    text-transform: none;
}
.check-banner-note { margin: 10px 0 0; font-size: .8125rem; line-height: 1.5; color: var(--text-3); }
.check-banner ul { display: grid; gap: 8px; margin: 12px 0 0; padding: 0; list-style: none; }
.check-banner li { position: relative; padding-left: 20px; font-size: .9375rem; line-height: 1.5; color: var(--text-2); }
.check-banner li::before {
    content: "?";
    position: absolute;
    left: 0;
    top: 0;
    font-family: var(--font-mono);
    font-weight: 500;
    color: var(--warning);
}

.verdict-columns {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px 24px;
    margin: 0 0 16px;
}
.verdict-list { margin: 0; padding: 0; }
.verdict-list h3 {
    margin: 0 0 10px;
    font-family: var(--font);
    font-size: .8125rem;
    font-weight: 500;
}
.verdict-list.pros h3 { color: var(--accent-strong); }
.verdict-list.cons h3 { color: var(--warning); }
.verdict-list ul { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.verdict-list li { position: relative; padding: 0 0 0 28px; border: 0; font-size: .9375rem; line-height: 1.5; color: var(--text-2); }
/* Points forts : coche fine bleu clair. Points faibles : trait ambre. */
.verdict-list.pros li::before {
    content: "";
    position: absolute;
    left: 0;
    top: .2em;
    width: 18px;
    height: 18px;
    border-radius: 0;
    background: var(--accent-strong);
    -webkit-mask: var(--coche-fine) center / contain no-repeat;
    mask: var(--coche-fine) center / contain no-repeat;
}
.verdict-list.cons li::before {
    content: "";
    position: absolute;
    left: 4px;
    top: .72em;
    width: 10px;
    height: 2px;
    border-radius: 2px;
    background: var(--warning);
}

/* Lecture de la description et conseil de négociation : encadrés internes. */
.verdict-insight,
.verdict-nego {
    margin: 12px 0 0;
    padding: 16px 20px;
    border-radius: var(--radius);
    font-size: .9375rem;
    line-height: 1.55;
    color: var(--text-2);
}
.verdict-insight { background: rgba(255, 255, 255, .035); border: 1px solid var(--border); }
.verdict-nego { background: rgba(0, 87, 217, .1); border: 1px solid rgba(124, 192, 240, .22); }
.verdict-insight h3,
.verdict-nego h3 {
    margin: 0 0 6px;
    font-family: var(--font);
    font-size: .8125rem;
    font-weight: 500;
    color: var(--text-3);
}
.verdict-nego h3 { color: var(--accent-strong); }
.verdict-insight p, .verdict-nego p { margin: 0; color: var(--text-2); }

/* ===== Marche France : mediane, fourchette, confiance ===== */

.market-box { display: flex; flex-direction: column; gap: 20px; padding: 0; background: none; border: 0; border-radius: 0; }

.market-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px 16px; flex-wrap: wrap; }

/* Médiane : le montant héros de cette carte. */
.market-median-value {
    font-family: var(--font);
    font-size: clamp(2rem, 3.4vw, 2.75rem);
    font-weight: 500;
    line-height: .95;
    letter-spacing: -0.02em;
    color: var(--text-1);
    font-variant-numeric: tabular-nums;
}
.market-median-label { margin-top: 10px; }

/* Indice de confiance : pastille écrite (une estimation sur 3 annonces ne ressemble pas
   à une sur 40), la couleur doublée par le libellé. */
.confidence-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 32px;
    padding: 4px 12px;
    border: 1px solid transparent;
    border-radius: var(--radius-xs);
    font-size: .8125rem;
    font-weight: 500;
    font-variant-numeric: tabular-nums;
}
.confidence-badge.high { background: var(--success-dim); color: var(--accent-strong); border-color: var(--success-border); }
.confidence-badge.mid  { background: var(--warning-dim); color: var(--warning); border-color: var(--warning-border); }
.confidence-badge.low  { background: var(--danger-dim);  color: var(--danger);  border-color: var(--danger-border); }

.confidence-dots { display: inline-flex; gap: 4px; }
.confidence-dots i { width: 6px; height: 6px; border-radius: 50%; background: currentColor; opacity: .25; }
.confidence-dots i.on { opacity: 1; }

/* Barres de comparaison (DESIGN.md) : piste de 10 px, remplissage en scaleX, libellé et
   valeur écrits au-dessus. Prix affiché gris, rendu en France bleu, cote gris clair. */
.fiche-barres { display: grid; gap: 16px; }
.fb-ligne {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 6px 16px;
    font-size: .9375rem;
    line-height: 1.4;
    color: var(--text-2);
}
.fb-ligne b { color: var(--text-1); font-weight: 500; white-space: nowrap; font-variant-numeric: tabular-nums; }
.fb-ligne i {
    grid-column: 1 / -1;
    position: relative;
    height: 10px;
    border-radius: var(--radius-xs);
    background: rgba(255, 255, 255, .05);
    overflow: hidden;
}
.fb-ligne i::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: var(--text-4);
    transform-origin: left center;
    transform: scaleX(var(--p, 1));
    transition: transform 240ms var(--ressort);
}
.fb-ligne i.bleue::after { background: var(--accent-strong); }
.fb-ligne i.claire::after { background: var(--gris-clair); }
.fiche-barres.fb-attente .fb-ligne i::after { transform: scaleX(0); }
@media (prefers-reduced-motion: reduce) {
    .fb-ligne i::after { transition: none; }
    .fiche-barres.fb-attente .fb-ligne i::after { transform: scaleX(var(--p, 1)); }
}

/* Fourchette du marché : marqueurs placés par --pos (donnée dynamique), libellés écrits. */
.range-bar { position: relative; height: 46px; margin: 0 2px; background: none; border-radius: 0; overflow: visible; }
.range-track {
    position: absolute;
    top: 28px;
    left: 0;
    right: 0;
    height: 6px;
    border-radius: var(--radius-xs);
    background: rgba(255, 255, 255, .08);
}
.range-marker {
    position: absolute;
    top: 22px;
    left: calc(var(--pos, 50) * 1%);
    width: 2px;
    height: 18px;
    margin-left: -1px;
    border-radius: 2px;
    background: var(--accent-strong);
}
.range-marker.median { background: var(--gris-clair); }
.range-marker-label {
    position: absolute;
    bottom: calc(100% + 4px);
    left: 50%;
    transform: translateX(-50%);
    font-family: var(--font);
    font-size: .8125rem;
    font-weight: 500;
    color: var(--text-2);
    white-space: nowrap;
}
.range-ends {
    display: flex;
    justify-content: space-between;
    margin-top: -12px;
    font-size: .8125rem;
    color: var(--text-3);
    font-variant-numeric: tabular-nums;
}

/* Statistiques : tuiles de verre, libellé Mono, valeur en Geist tabulaire. */
.market-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.market-stat {
    min-width: 0;
    padding: 12px 14px;
    text-align: left;
    background: rgba(255, 255, 255, .035);
    border: 1px solid rgba(255, 255, 255, .06);
    border-radius: 16px;
}
.market-stat-value { font-family: var(--font); font-size: 1.0625rem; font-weight: 500; color: var(--text-1); font-variant-numeric: tabular-nums; white-space: nowrap; }
.market-stat-label { margin-top: 2px; }

/* Potentiel : la phrase qui explique l'écart (l'encadré héros est dans le ticket). */
.market-potential {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 4px 10px;
    padding: 14px 16px;
    text-align: left;
    background: rgba(255, 255, 255, .035);
    border: 1px solid rgba(255, 255, 255, .06);
    border-radius: 16px;
    font-family: var(--font);
    font-size: 1.0625rem;
    font-weight: 500;
    color: var(--text-1);
    font-variant-numeric: tabular-nums;
}
.market-potential small { flex-basis: 100%; margin: 0; font-size: .8125rem; font-weight: 400; line-height: 1.5; color: var(--text-3); opacity: 1; }
/* Favorable : le montant en bleu clair, sur verre neutre (l'encadré bleu reste unique,
   dans le ticket). */
.market-potential.positive { color: var(--accent-strong); }
.market-potential.neutral,
.market-potential.negative { color: var(--text-1); }

/* Voyant : point de la couleur du statut, doublé par le signe du montant. */
.potential-light {
    flex: none;
    align-self: center;
    width: 8px;
    height: 8px;
    margin: 0;
    border-radius: 50%;
    background: currentColor;
    box-shadow: 0 0 0 4px color-mix(in srgb, currentColor 16%, transparent);
}

/* ===== Calcul import ===== */
/* Le bordereau devient le TICKET de DESIGN.md : conteneur majeur (32 px), en-tête avec
   pastille d'état, lignes à filet (libellé --text-2 à gauche, valeur tabulaire à
   droite), total en 560, puis la cote française et l'encadré d'écart. Les montants
   viennent tous du serveur (Listing.cgRegion) : la barre et le ticket ont le même total. */
#listing-content .ticket-calc { padding: 28px 28px 24px; border-radius: var(--radius-lg); }

.ticket-tete {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 12px 16px;
    margin: 0 0 20px;
}
.ticket-titre { min-width: 0; }
#listing-content .ticket-tete h2 { margin: 0; }
.ticket-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 10px;
    margin: 6px 0 0;
    font-family: var(--font-mono);
    font-size: .8125rem;
    color: var(--text-3);
}
.ticket-etat { flex: none; margin-top: 2px; }

/* Conteneur des lignes (le cadre est porté par la section du ticket). */
#listing-content .calc-box:not(.listing-section) {
    display: block;
    padding: 0;
    background: none;
    border: 0;
    border-top: 1px solid var(--border);
    border-radius: 0;
    box-shadow: none;
    clip-path: none;
}

#listing-content .calc-row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 16px;
    min-height: 0;
    margin: 0;
    padding: 12px 0;
    background: none;
    border: 0;
    border-bottom: 1px solid rgba(255, 255, 255, .05);
    clip-path: none;
    font-family: var(--font);
    font-size: .9375rem;
    line-height: 1.4;
    color: var(--text-2);
    font-variant-numeric: tabular-nums;
}
#listing-content .calc-row > span:first-child {
    min-width: 0;
    font-family: var(--font);
    font-size: .9375rem;
    font-weight: 400;
    line-height: 1.4;
    letter-spacing: 0;
    text-transform: none;
    color: var(--text-2);
}
#listing-content .calc-row > span:last-child {
    flex: none;
    font-family: var(--font);
    font-size: .9375rem;
    color: var(--text-1);
    text-align: right;
    white-space: nowrap;
}
#listing-content .calc-row small { font-size: .8125rem; font-weight: 400; color: var(--text-3); }

/* Total : rendu en France (ou coût total), en 560. */
#listing-content .calc-row.total {
    min-height: 0;
    margin: 0;
    padding: 16px 0 8px;
    background: none;
    border: 0;
}
#listing-content .calc-row.total > span:first-child { font-weight: 500; color: var(--text-1); }
#listing-content .calc-row.total .calc-val,
#listing-content .calc-row.total > span:last-child {
    font-size: 1.5rem;
    font-weight: 500;
    line-height: 1.1;
    letter-spacing: -0.01em;
    color: var(--text-1);
}

/* Un malus ou des droits sont des coûts, pas des alertes : même encre que les autres
   lignes. Un malus incertain se lit dans la pastille d'état et les scénarios. */
#listing-content .calc-row.calc-malus > span { font-weight: 400; }
#listing-content .calc-row.calc-malus > span:first-child { color: var(--text-2); }
#listing-content .calc-row.calc-malus > span:last-child { color: var(--text-1); }
.calc-muted { color: var(--text-3); font-style: italic; }

/* Détail déplié de la carte grise et du malus (repère « + » commun aux blocs repliés). */
#listing-content .calc-detail { margin: 6px 0 0; padding: 0; border: 0; background: none; }
#listing-content .calc-detail > summary {
    min-height: 44px;
    padding: 0;
    gap: 8px;
    font-size: .875rem;
    font-weight: 500;
    color: var(--accent-strong);
}
#listing-content .calc-detail > summary::before { content: none; }
@media (hover: hover) { #listing-content .calc-detail > summary:hover { background: none; text-decoration: underline; text-underline-offset: 3px; } }
#listing-content .calc-detail[open] > summary { border-bottom: 0; }
.calc-subrow {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    padding: 8px 0 8px 14px;
    border-bottom: 1px solid rgba(255, 255, 255, .04);
    font-size: .8125rem;
    line-height: 1.45;
    color: var(--text-3);
    font-variant-numeric: tabular-nums;
}
.calc-subrow > span:last-child { color: var(--text-2); white-space: nowrap; }
.calc-note { margin: 10px 0 0; padding: 0; font-size: .8125rem; line-height: 1.5; color: var(--text-3); }
.calc-note a { color: var(--accent-strong); text-decoration: underline; text-underline-offset: 3px; }
/* Ligne d'estimation posee sous chaque montant calcule (App.noteEstimation, source unique). */
.note-estimation { font-size: .75rem; line-height: 1.5; color: var(--text-3); margin-top: 8px; }
#listing-content .ticket-calc > .calc-note,
#listing-content .ticket-calc > .note-estimation { margin-top: 12px; }

/* Cote française et encadré d'écart, posés sous le total quand le marché est chargé. */
.ticket-ecart:empty { display: none; }
#listing-content .calc-row.ticket-cote { border-top: 1px solid rgba(255, 255, 255, .05); }
/* « Cote française insuffisante pour cette version (N annonces en France) » est une phrase
   seule dans la ligne : elle revient à la ligne au lieu de déborder de 138 px à 375 px. */
#listing-content .calc-row.ticket-cote > span:only-child { flex: 1 1 auto; min-width: 0; white-space: normal; overflow-wrap: anywhere; }
.ecart-box {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    flex-wrap: wrap;
    gap: 12px 16px;
    margin: 14px 0 0;
    padding: 20px;
    background: rgba(255, 255, 255, .035);
    border: 1px solid var(--border);
    border-radius: var(--radius);
}
.ecart-box.favorable {
    background: rgba(0, 87, 217, .1);
    border-color: rgba(124, 192, 240, .22);
}
.ecart-texte { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.ecart-texte b { font-size: 1rem; font-weight: 500; color: var(--text-1); }
.ecart-texte span { font-size: .8125rem; color: var(--text-2); }
.ecart-montant {
    font-family: var(--font);
    font-size: clamp(2.25rem, 3.6vw, 3rem);
    font-weight: 500;
    line-height: .9;
    letter-spacing: -0.02em;
    color: var(--text-1);
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}
.ecart-box.favorable .ecart-montant { color: var(--accent-strong); }

/* Note TVA récupérable (prix pro) sous le coût d'import */
.calc-vat {
    margin-top: 14px;
    padding: 14px 16px;
    background: rgba(255, 255, 255, .035);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    font-size: .875rem;
    line-height: 1.55;
    color: var(--text-2);
}
.calc-vat .ico { color: var(--accent-strong); vertical-align: -2px; }
.calc-vat strong { color: var(--text-1); font-weight: 500; }

/* CO2 manquant : proposition d'action (encadré bleu, bouton fléché). */
#listing-content .co2-quest {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    margin: 10px 0 6px;
    padding: 16px 20px;
    background: rgba(0, 87, 217, .1);
    border: 1px solid rgba(124, 192, 240, .22);
    border-radius: var(--radius);
    font-size: .875rem;
    color: var(--text-2);
}
#listing-content .co2-quest svg { flex: none; margin-top: 2px; color: var(--accent-strong); }
#listing-content .co2-quest strong { display: block; margin-bottom: 4px; font-size: .9375rem; font-weight: 500; color: var(--text-1); }
#listing-content .co2-quest p { margin: 0 0 12px; font-size: .875rem; line-height: 1.55; color: var(--text-2); }
#listing-content .calc-note.co2-found { color: var(--text-2); }
#listing-content .calc-note.co2-found .ico { color: var(--accent-strong); }

/* Coût de possession : la mensualité est le montant de la carte, en encre neutre (un
   coût n'est pas un gain). */
.ownership-headline { display: flex; align-items: baseline; gap: 6px 12px; flex-wrap: wrap; margin-bottom: 14px; }
.ownership-monthly { font-family: var(--font); font-size: 2rem; font-weight: 500; letter-spacing: -0.01em; color: var(--text-1); line-height: 1; font-variant-numeric: tabular-nums; }
.ownership-monthly small { font-size: .875rem; font-weight: 500; letter-spacing: 0; color: var(--text-3); }
.ownership-sub { color: var(--text-3); font-size: .8125rem; }

/* Feuille de route d'import : voir bordereau.css, « Feuille de route ». */

/* Sélecteur de région pour la carte grise */
#listing-content .calc-region { align-items: center; }
#listing-content .calc-region select {
    max-width: 60%;
    min-height: 36px;
    padding: 0 36px 0 12px;
    background-color: var(--bg-inset);
    color: var(--text-1);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background-position: right 12px center;
    font-size: .875rem;
}

/* Bouton flottant de feedback (bug / amélioration) */
/* Pilule de verre fixée en bas à droite (« L'instrument de verre », 14/10/2026) :
   bottom: var(--bas-fixe) la pose au-dessus du dock sous 1024 px (base.css), calque de
   l'îlot et du dock (40), sous le menu plein écran, les modales et les toasts. */
.feedback-fab {
    padding: 0;
    background: none;
    border: 0;
    color: inherit;
    font: inherit;
    text-decoration: underline;
    text-underline-offset: 3px;
    cursor: pointer;
}
@media print { .feedback-fab { display: none !important; } }

/* Mention « hors malus » sur le rendu d'une carte thermique (CO2 inconnu en liste) */
.rendu-note {
    font-size: .75rem;
    font-weight: 500;
    color: var(--warning);
    background: var(--warning-dim);
    padding: 1px 6px;
    border-radius: var(--radius-sm);
    margin-left: 4px;
    white-space: nowrap;
}

/* ===== Panneaux IA (batch, comparaison) ===== */

/* Analyse de lot, de favoris ou de comparaison : conteneur majeur à double cadre. Les
   groupes sont annoncés par une pastille ÉCRITE : « Meilleures affaires » en aplat bleu
   clair, « À éviter » en aplat rouge, « Moins prioritaires » en aplat ambre. */
.ai-panel {
    background: var(--bg-1);
    border: 0;
    border-radius: var(--radius-lg);
    box-shadow: var(--coeur-lueur), var(--coque);
    padding: 28px;
    margin: 8px 0 32px;
}

.ai-panel h2 { margin-bottom: 10px; font-size: 1.5rem; font-weight: 500; letter-spacing: -0.01em; }
.ai-panel-summary { color: var(--text-2); margin-bottom: 20px; font-size: 1rem; line-height: 1.6; max-width: 75ch; }
.ai-panel-portee { font-family: var(--font-mono); font-size: .75rem; color: var(--text-3, var(--text-2)); margin: -4px 0 12px; }
:root .ai-panel-label {
    display: inline-flex;
    align-items: center;
    min-height: 28px;
    padding: 0 12px;
    margin-bottom: 12px;
    border-radius: var(--radius-pill);
    background: var(--verre);
    border: 1px solid var(--border-strong);
    font-family: var(--font);
    font-size: .8125rem;
    font-weight: 500;
    letter-spacing: 0;
    text-transform: none;
    color: var(--text-1);
}
:root .ai-panel-label.good { background: var(--accent-strong); border-color: var(--accent-strong); color: #04121f; }
:root .ai-panel-label.bad { background: var(--danger); border-color: var(--danger); color: #1a0200; }
:root .ai-panel-label.warn { background: var(--warning); border-color: var(--warning); color: #1a1300; }
.ai-panel-row { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr)); gap: 12px; margin-bottom: 20px; }
.ai-panel-footer { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; margin-top: 8px; }

/* Choix recommandé : carte cliquable, voile bleu, raison écrite. */
.ai-pick-card {
    background: rgba(0, 87, 217, .1);
    border: 1px solid rgba(124, 192, 240, .22);
    border-radius: var(--radius-sm);
    padding: 14px 16px;
    cursor: pointer;
    min-width: 0;
    transition: border-color var(--t), transform var(--t);
}
a.ai-pick-card, a.ai-avoid-card { display: block; color: inherit; text-decoration: none; }
a.ai-avoid-card { cursor: pointer; }
@media (hover: hover) { a.ai-avoid-card:hover { border-color: var(--danger); } }
.ai-pick-card:active { transform: scale(.98); }
@media (hover: hover) { .ai-pick-card:hover { border-color: rgba(124, 192, 240, .45); } }

.ai-pick-title { font-weight: 500; font-size: .9375rem; margin-bottom: 4px; }
.ai-pick-meta { font-size: .875rem; color: var(--text-2); font-variant-numeric: tabular-nums; }
.ai-pick-reason { font-size: .875rem; line-height: 1.5; color: var(--text-1); margin-top: 6px; }

/* À éviter : verre neutre, filet rouge à 1 px, la pastille du groupe dit le verdict. */
.ai-avoid-card {
    background: var(--verre);
    border: 1px solid var(--danger-border);
    border-radius: var(--radius-sm);
    padding: 12px 16px;
    min-width: 0;
    font-size: .9375rem;
    line-height: 1.5;
}

.ai-avoid-card strong { display: block; font-weight: 500; }
.ai-avoid-card .ai-avoid-reason { display: block; color: var(--text-2); margin-top: 2px; }
.ai-avoid-card.warn { border-color: var(--warning-border); }

/* Gagnant d'une comparaison : encadré d'écart (dégradé bleu, DESIGN.md). */
.ai-verdict-winner {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 20px 20px;
    background: rgba(0, 87, 217, .1);
    border: 1px solid rgba(124, 192, 240, .22);
    border-radius: var(--radius);
    margin-bottom: 20px;
}

.ai-winner-icon {
    display: inline-grid;
    place-items: center;
    flex: 0 0 auto;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: var(--verre);
    border: 1px solid var(--border);
    color: var(--accent-strong);
}
.ai-winner-label { margin-bottom: 4px; }
.ai-winner-title { font-weight: 500; font-size: 1.25rem; letter-spacing: -0.01em; }
.ai-winner-meta { font-size: .9375rem; margin-top: 4px; color: var(--text-2); font-variant-numeric: tabular-nums; }
.ai-winner-reason { font-size: .9375rem; color: var(--text-1); margin-top: 6px; line-height: 1.5; }

/* ===== Comparaison ===== */

/* Tableau de comparaison (DESIGN.md « Tableaux ») : le conteneur porte le double cadre
   (rayon 24), le tableau défile dans cet enfant au téléphone ; en-tête en libellés
   Mono, collant sous l'îlot, sur un verre sombre ; lignes à filet, survol léger. */
.compare-table { width: 100%; border-collapse: collapse; margin: 0; }

.compare-table th,
.compare-table td {
    padding: 12px 16px;
    text-align: left;
    border-bottom: 1px solid rgba(255, 255, 255, .05);
    font-size: .9375rem;
}

.compare-table th {
    background: rgba(16, 19, 26, .96);
    position: sticky;
    top: var(--haut-collant);
}

.compare-table td:first-child { color: var(--text-2); }
.compare-table td img { width: 120px; height: 80px; object-fit: cover; border-radius: var(--radius-sm); }

.compare-best { color: var(--success); font-weight: 500; }
.compare-worst { color: var(--text-1); }

.compare-table-wrap { overflow-x: auto; }
/* Le conteneur du tableau (pas la page) : plaque à double cadre. */
.compare-table-wrap:not(#comparator-table-wrap) {
    margin: 8px 0 16px;
    background: var(--bg-1);
    border-radius: var(--radius);
    box-shadow: var(--coeur-lueur), var(--coque);
}
/* Sur ordinateur le tableau tient en largeur : le conteneur ne défile pas, ce qui laisse
   l'en-tête coller sous l'îlot pendant la lecture (un défilement horizontal le
   rattacherait au conteneur). */
@media (min-width: 769px) {
    /* Les DEUX conteneurs (la page #comparator-table-wrap porte la même classe) : un
       seul ancêtre défilant suffit à décaler l'en-tête collant. */
    :root .compare-table-wrap { overflow: visible; }
    .compare-table-wrap:not(#comparator-table-wrap) .compare-table tr:first-child > :first-child { border-top-left-radius: var(--radius); }
    .compare-table-wrap:not(#comparator-table-wrap) .compare-table tr:first-child > :last-child { border-top-right-radius: var(--radius); }
}

.comparator-select { display: flex; flex-direction: column; gap: 14px; margin: 0 0 24px; }
.comparator-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-left: auto; align-items: center; }

/* Puces de sélection : pilules de verre, sélection en fond --text-1. */
.compare-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 36px;
    max-width: 100%;
    background: var(--verre);
    border: 1px solid var(--border);
    color: var(--text-2);
    padding: 6px 14px;
    border-radius: var(--radius-pill);
    cursor: pointer;
    transition: color var(--t), background-color var(--t), border-color var(--t), transform var(--t);
    font-size: .875rem;
    font-family: var(--font);
    font-variant-numeric: tabular-nums;
    text-align: left;
}
.compare-chip:active { transform: scale(.98); }
@media (hover: hover) { .compare-chip:hover { color: var(--text-1); border-color: var(--border-strong); } }
.compare-chip.selected,
.compare-chip.selected:hover { border-color: var(--text-1); background: var(--text-1); color: var(--bg-0); }

/* Sélection du comparateur (refaite le 19/10/2026, comparator.js, préfixe cpf-) : filtre,
   groupes repliables par modèle, lignes compactes à vignette, case ronde numérotée dans
   l'ordre de sélection. Une ligne choisie : filet et voile bleus, numéro écrit. */
.cpf-intro { margin: 0; color: var(--text-2); font-size: .9375rem; }
.cpf-filtre {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 48px;
    padding: 0 16px;
    border-radius: var(--radius-pill);
    background: var(--verre);
    border: 1px solid var(--border);
    color: var(--text-3);
}
.cpf-filtre:focus-within { border-color: var(--accent-strong); }
.cpf-filtre input { flex: 1; min-width: 0; height: 46px; background: none; border: 0; outline: 0; color: var(--text-1); font: inherit; font-size: 1rem; }
#cpf-groupes { display: flex; flex-direction: column; gap: 14px; }
.cpf-vide { margin: 8px 0; color: var(--text-2); }
.cpf-groupe {
    padding: 6px;
    border-radius: var(--radius);
    background: var(--bg-1);
    box-shadow: var(--coeur-lueur), var(--coque);
}
.cpf-groupe-tete {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 4px 10px;
    padding: 12px 14px;
    list-style: none;
    cursor: pointer;
}
.cpf-groupe-tete::-webkit-details-marker { display: none; }
.cpf-groupe-tete::after {
    content: "";
    width: 8px;
    height: 8px;
    margin-left: auto;
    align-self: center;
    border-right: 1.5px solid var(--text-3);
    border-bottom: 1.5px solid var(--text-3);
    transform: rotate(45deg);
    transition: transform 300ms var(--ressort);
}
.cpf-groupe[open] > .cpf-groupe-tete::after { transform: rotate(-135deg); }
.cpf-groupe-nom { color: var(--text-1); font-size: 1.0625rem; font-weight: 500; letter-spacing: -0.01em; }
.cpf-groupe-meta { color: var(--text-3); font-size: .8125rem; font-variant-numeric: tabular-nums; }
.cpf-groupe-choix {
    padding: 2px 8px;
    border-radius: var(--radius-xs);
    background: rgba(124, 192, 240, .14);
    border: 1px solid rgba(124, 192, 240, .4);
    color: var(--accent-strong);
    font-size: .75rem;
    font-weight: 500;
}
.cpf-liste { display: flex; flex-direction: column; gap: 4px; padding: 0 0 4px; }
.cpf-ligne {
    position: relative;
    display: grid;
    grid-template-columns: 56px minmax(0, 1fr) auto 28px;
    align-items: center;
    gap: 12px;
    min-height: 60px;
    padding: 6px 12px 6px 6px;
    border-radius: 16px;
    border: 1px solid transparent;
    cursor: pointer;
    transition: background-color var(--t), border-color var(--t);
}
/* Case native gardée pour le clavier et les lecteurs d'écran, sortie de la grille (la règle
   globale :root input[type=checkbox] la remettait en position relative). */
:root .cpf-ligne input.cpf-case[type=checkbox] { position: absolute; width: 1px; height: 1px; margin: 0; opacity: 0; pointer-events: none; }
.cpf-ligne:focus-within { outline: 2px solid var(--accent-strong); outline-offset: 1px; }
@media (hover: hover) { .cpf-ligne:hover { background: rgba(255, 255, 255, .04); } }
.cpf-ligne.choisie { background: rgba(0, 87, 217, .16); border-color: rgba(124, 192, 240, .45); }
.cpf-vignette {
    display: grid;
    place-items: center;
    width: 56px;
    height: 44px;
    overflow: hidden;
    border-radius: 10px;
    background: var(--bg-3);
    color: var(--text-4);
}
.cpf-vignette img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cpf-texte { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.cpf-titre { overflow: hidden; color: var(--text-1); font-size: .9375rem; font-weight: 500; text-overflow: ellipsis; white-space: nowrap; }
.cpf-meta { overflow: hidden; color: var(--text-3); font-family: var(--font-mono); font-size: .75rem; text-overflow: ellipsis; white-space: nowrap; font-variant-numeric: tabular-nums; }
.cpf-retiree { margin-right: 6px; color: var(--warning); font-family: var(--font); font-weight: 500; }
.cpf-ligne.retiree .cpf-vignette img { opacity: .5; }
.cpf-prix { color: var(--text-1); font-size: .9375rem; font-weight: 500; white-space: nowrap; }
.cpf-coche {
    display: grid;
    place-items: center;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    border: 1.5px solid var(--border-strong);
    color: #fff;
    font-size: .8125rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}
.cpf-ligne.choisie .cpf-coche { background: var(--accent); border-color: var(--accent-strong); }
/* Barre d'action : reprend .compare-float-bar ; jamais hors de la page du comparateur. */
body:not([data-page="comparator"]) .cpf-barre { display: none; }
.cpf-barre .compare-float-info strong { white-space: nowrap; }
@media (max-width: 600px) {
    /* Au téléphone, le bouton dit déjà combien (« Comparer les 2 ») : le compteur cède la place. */
    .cpf-barre .compare-float-info { display: none; }
    .cpf-barre { justify-content: flex-end; padding-left: 6px; }
    .cpf-barre .compare-float-actions { flex: 1; justify-content: space-between; gap: 6px; min-width: 0; }
    :root .cpf-barre .btn-primary { min-width: 0; padding-left: 16px; }
    :root .cpf-barre .btn-ghost-ai { padding: 10px 14px; }
}
html:has(.cpf-barre) #page-comparator { padding-bottom: 96px; }
@media (max-width: 600px) {
    .cpf-ligne { grid-template-columns: 48px minmax(0, 1fr) auto 26px; gap: 10px; padding-right: 10px; }
    .cpf-vignette { width: 48px; height: 40px; }
    .cpf-prix { font-size: .875rem; }
}

/* Barre flottante de comparaison : pilule de verre fixe, centrée, au-dessus du dock
   (--bas-fixe) et SOUS les modales (calque des éléments collants). Fixe : le flou y
   est permis. */
.compare-float-bar {
    position: fixed;
    left: 50%;
    bottom: var(--bas-fixe);
    transform: translateX(-50%);
    z-index: var(--z-collant);
    width: max-content;
    max-width: calc(100% - 32px);
    background: rgba(12, 14, 19, .78);
    border: 1px solid var(--border);
    border-radius: var(--radius-pill);
    padding: 6px 6px 6px 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06), var(--ombre-flottante);
    animation: barre-entree 500ms var(--ressort) backwards;
}

@keyframes barre-entree {
    from { opacity: 0; transform: translate(-50%, 16px); }
}

.compare-float-info { display: flex; align-items: center; gap: 12px; min-width: 0; }
.compare-float-info strong { font-variant-numeric: tabular-nums; font-weight: 500; }

.compare-float-names {
    color: var(--text-2);
    font-size: .875rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 300px;
}

.compare-float-hint { color: var(--text-3); font-size: .875rem; }
.compare-float-actions { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.compare-float-actions .btn-primary { min-height: 40px; padding: 10px 20px; }

/* Comparaison dans la recherche : conteneur majeur, le tableau dedans garde son cadre. */
#search-compare-wrap {
    background: var(--bg-1);
    border: 0;
    border-radius: var(--radius-lg);
    box-shadow: var(--coeur-lueur), var(--coque);
    padding: 24px;
    margin: 8px 0 32px;
    animation: fadeIn 500ms var(--ressort) backwards;
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(16px); }
}

.compare-header { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.compare-header h3 { font-size: 1.25rem; font-weight: 500; letter-spacing: -0.01em; }
.compare-header-actions { display: flex; gap: 8px; }

@media (prefers-reduced-motion: reduce) {
    .compare-float-bar, #search-compare-wrap { animation: none; }
}

/* ===== Alertes ===== */

.alert-card {
    background: var(--bg-2);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 16px 20px;
    margin-bottom: 12px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.alert-card-info h3 { font-size: 1rem; margin-bottom: 4px; }
.alert-card-info p { color: var(--text-2); font-size: .875rem; }
.alert-card-meta { font-size: .75rem; color: var(--text-3); }
.alert-card-actions { display: flex; gap: 8px; }
.alert-inactive { opacity: 0.5; }

/* ===== Authentification ===== */

#auth-zone { display: flex; align-items: center; gap: 8px; }

.btn-auth {
    background: var(--accent);
    color: #fff;
    border: none;
    padding: 8px 16px;
    border-radius: var(--radius);
    cursor: pointer;
    font-size: .875rem;
    font-weight: 600;
    font-family: var(--font);
    transition: var(--transition);
    white-space: nowrap;
}

.btn-auth:hover { background: var(--accent-strong); }

.btn-auth-small {
    background: transparent;
    color: var(--text-2);
    border: 1px solid var(--border);
    padding: 4px 10px;
    border-radius: var(--radius);
    cursor: pointer;
    font-size: .75rem;
    font-family: var(--font);
    transition: var(--transition);
    white-space: nowrap;
}

.btn-auth-small:hover { color: var(--danger); border-color: var(--danger-border); }

.user-menu { display: flex; align-items: center; gap: 8px; }
.user-name { color: inherit; font-size: .875rem; font-weight: 500; white-space: nowrap; }

/* Fenêtre de connexion et d'inscription (DESIGN.md « Modales ») : conteneur majeur porté
   par .modal-content (base.css), onglets en bascule segmentée, champs de 48 px, bouton
   principal pleine largeur, fermeture en rond de verre de 40 px. */
.auth-modal-content { position: relative; max-width: 440px; padding-top: 28px; }

.auth-tabs {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2px;
    padding: 4px;
    margin: 0 52px 24px 0;
    background: var(--verre);
    border: 1px solid var(--border);
    border-radius: var(--radius-pill);
}

/* Contexte de l'ouverture (« Créez votre compte pour continuer »), écrit par App.toast. */
.auth-contexte {
    margin: -8px 0 20px;
    padding: 10px 14px;
    background: var(--accent-dim);
    border: 1px solid var(--accent-border);
    border-radius: var(--radius-sm);
    color: var(--text-1);
    font-size: .875rem;
    line-height: 1.45;
}
.auth-contexte.is-erreur { border-color: rgba(227, 0, 15, .45); background: rgba(227, 0, 15, .1); }

.auth-tab {
    min-height: 40px;
    background: transparent;
    border: 0;
    border-radius: var(--radius-pill);
    color: var(--text-2);
    padding: 8px 16px;
    font-size: .9375rem;
    font-weight: 500;
    font-family: var(--font);
    cursor: pointer;
    transition: color var(--t), background-color var(--t);
}

.auth-tab:hover { color: var(--text-1); }
.auth-tab.active,
.auth-tab.active:hover { background: var(--text-1); color: var(--bg-0); font-weight: 500; }

.auth-form .filter-group { margin-bottom: 16px; }
:root .auth-form .filter-group :is(input:not([type=checkbox]), select) { min-height: 48px; }

.auth-error {
    color: var(--text-1);
    font-size: .875rem;
    line-height: 1.5;
    padding: 10px 14px;
    background: var(--danger-dim);
    border: 1px solid var(--danger-border);
    border-radius: var(--radius-sm);
    margin-bottom: 14px;
}

:root .btn-auth-submit { width: 100%; margin-top: 4px; }

.auth-close {
    position: absolute;
    top: 24px;
    right: 24px;
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    padding: 0;
    background: var(--verre);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    color: var(--text-2);
    cursor: pointer;
    transition: color var(--t), border-color var(--t), background-color var(--t), transform var(--t);
}
.auth-close:active { transform: scale(.96); }
@media (hover: hover) {
    .auth-close:hover { color: var(--text-1); border-color: var(--border-strong); background: rgba(255, 255, 255, .08); }
}

/* ===== Responsive composants ===== */

@media (max-width: 768px) {
    .filters-grid { grid-template-columns: 1fr 1fr; }
    .results-grid { grid-template-columns: 1fr; }
    .search-bar { padding: 24px 20px; border-radius: var(--radius); }

    /* Photo principale sur toute la largeur, les deux suivantes côte à côte dessous :
       empilées, les trois photos repoussaient le verdict de 500 à 900 px. Format fixé :
       aucun saut quand elles arrivent. */
    .listing-gallery { grid-template-columns: 1fr 1fr; }
    .listing-main-photo { min-height: 220px; grid-column: 1 / -1; grid-row: auto; }
    .listing-gallery img:not(.listing-main-photo) { aspect-ratio: 4 / 3; }
    .listing-grid { grid-template-columns: 1fr; }
    .listing-section.span-2, .verdict-card { grid-column: span 1; }
    .listing-header-side { text-align: left; width: 100%; }
    .listing-header-actions { justify-content: flex-start; }

    .verdict-columns { grid-template-columns: 1fr; }
    .verdict-maxprice { margin-left: 0; width: 100%; text-align: left; }

    .compare-table th { top: 0; }
    /* Téléphone : deux lignes qui défilent au doigt (tris, puis actions) au lieu d'une
       grille de 2 x 2 et de trois rangées qui occupaient tout le premier écran des
       résultats (audit sur simulateur iOS du 14/10/2026). Libellé gardé pour les
       lecteurs d'écran seulement. */
    /* nowrap obligatoire : en colonne avec retour à la ligne, chaque ligne prenait la
       largeur de son contenu (539 px) et élargissait toute la page. */
    .sort-bar { flex-direction: column; flex-wrap: nowrap; align-items: stretch; gap: 8px; margin-bottom: 16px; }
    .sort-bar-label {
        position: absolute; width: 1px; height: 1px; overflow: hidden;
        clip-path: inset(50%); white-space: nowrap;
    }
    .sort-ligne,
    .sort-bar-actions {
        display: flex;
        flex-wrap: nowrap;
        gap: 8px;
        margin: 0 -16px;
        padding: 2px 16px;
        overflow-x: auto;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
    }
    .sort-ligne::-webkit-scrollbar,
    .sort-bar-actions::-webkit-scrollbar { display: none; }
    .sort-seg { flex: none; flex-wrap: nowrap; }
    .sort-ligne .sort-btn,
    .sort-bar-actions .sort-btn { flex: none; }
    .sort-btn.sort-recent { margin-left: 0; }
    /* Flèche ⇅ seulement sur le tri actif : la ligne se resserre et « Plus récentes »
       entre dans l'écran au lieu d'attendre, invisible, un défilement que rien n'annonce. */
    .sort-seg .sort-btn:not(.active) .sort-arrow { display: none; }
    .search-status.statut-seul { display: none !important; }
}

@media (max-width: 600px) {
    .compare-float-bar { width: calc(100% - 32px); gap: 10px; padding: 6px 6px 6px 16px; }
    .compare-float-info { flex: 1 1 auto; gap: 8px; }
    .compare-float-names { max-width: none; min-width: 0; }
    .compare-float-actions .btn-primary,
    .compare-float-actions .btn-ghost-ai,
    .compare-float-actions .btn-close-round { min-height: 44px; }
    .compare-float-actions .btn-close-round { width: 44px; height: 44px; }
}

/* ===== Analyse approfondie (dossier d'achat) ===== */

/* CTA d'analyse en deux paliers (étape 1 complète, étape 2 approfondie) : encadré
   interne, bouton fléché (l'action fait avancer). */
.analysis-cta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px 24px;
    flex-wrap: wrap;
    margin-top: 20px;
    padding: 20px;
    background: rgba(255, 255, 255, .035);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    clip-path: none;
}
.analysis-cta.deep { background: rgba(0, 87, 217, .1); border-color: rgba(124, 192, 240, .22); }
.analysis-cta-body { flex: 1 1 260px; min-width: 0; }
.analysis-cta-step {
    display: inline-block;
    margin-bottom: 6px;
    font-family: var(--font);
    font-size: .8125rem;
    font-weight: 500;
    color: var(--text-3);
}
.analysis-cta-body h3 { margin: 0 0 4px; font-size: 1.0625rem; font-weight: 500; letter-spacing: -0.01em; color: var(--text-1); }
.analysis-cta-body p { margin: 0; color: var(--text-2); font-size: .875rem; line-height: 1.5; max-width: 62ch; }
.analysis-cta-action { display: flex; flex-direction: column; align-items: stretch; gap: 8px; flex: 0 0 auto; min-width: 200px; }
:root .analysis-cta-action .btn-primary { width: 100%; justify-content: space-between; padding-left: 20px; white-space: nowrap; }
:root .analysis-cta-action .btn-primary { justify-content: center; }
.analysis-cta-cost { font-family: var(--font-mono); font-size: .75rem; color: var(--text-3); text-align: center; font-variant-numeric: tabular-nums; }

/* Étape 1, l'analyse complète, mise en avant (19/10/2026, demande de Charles : « la
   plus-value est dans cette feature, elle doit être utilisée ») : verre teinté de bleu,
   filet bleu clair, lueur, titre plus grand, pastille « Gratuite » ou « Incluse » écrite. */
#full-cta {
    background: rgba(0, 87, 217, .1);
    border-color: rgba(124, 192, 240, .45);
    
}
#full-cta .analysis-cta-body h3 { font-size: 1.5rem; }
#full-cta .analysis-cta-body p { color: var(--text-1); opacity: .86; }
#full-cta .analysis-cta-cost { color: var(--accent-strong); }
@media (min-width: 1024px) {
    :root #full-cta .btn-primary { min-height: 56px; padding-top: 8px; padding-bottom: 8px; padding-right: 8px; font-size: 1rem; }
}
.analysis-cta-badge {
    display: inline-flex;
    align-items: center;
    margin: 0 0 6px 10px;
    padding: 2px 10px;
    border-radius: var(--radius-xs);
    background: rgba(124, 192, 240, .16);
    border: 1px solid rgba(124, 192, 240, .4);
    color: var(--accent-strong);
    font-family: var(--font);
    font-size: .8125rem;
    font-weight: 500;
    vertical-align: 1px;
}

/* Barre collante de l'analyse complète (listing.js, majBarreAnalyse) : une grande pilule
   claire fléchée, fixe en bas d'écran, au-dessus du dock au téléphone (--bas-fixe),
   centrée sur ordinateur. Calque des éléments collants : sous l'îlot, le menu, les
   modales, les toasts et le bandeau cookies. Effacée hors de la fiche, et pendant que
   le bandeau cookies ou un bandeau d'installation occupe le bas de l'écran. */
.barre-analyse {
    position: fixed;
    left: 12px;
    right: 12px;
    bottom: var(--bas-fixe);
    z-index: var(--z-collant);
    display: flex;
    justify-content: center;
    pointer-events: none;
    animation: barre-analyse-entree 500ms var(--ressort) backwards;
}
@keyframes barre-analyse-entree { from { opacity: 0; transform: translateY(16px); } }
@media (prefers-reduced-motion: reduce) { .barre-analyse { animation: none; } }
.barre-analyse[hidden],
body:not([data-page="listing"]) .barre-analyse,
body:has(#cookie-banner, .pwa-banner) .barre-analyse { display: none; }
:root .barre-analyse-btn {
    pointer-events: auto;
    width: 100%;
    max-width: 560px;
    min-height: 60px;
    justify-content: space-between;
    padding: 8px 8px 8px 24px;
    text-align: left;
    white-space: normal;
    box-shadow: var(--ombre-flottante);
}
:root .barre-analyse-btn::after { width: 46px; height: 46px; background-size: 20px 20px, auto; }
.barre-analyse-texte { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.barre-analyse-titre { font-size: 1.0625rem; font-weight: 500; letter-spacing: -0.01em; line-height: 1.2; }
.barre-analyse-note { font-size: .8125rem; font-weight: 500; line-height: 1.25; opacity: .72; }
/* La page garde de quoi défiler sous la barre : le bas de la fiche n'est jamais caché. */
html.avec-barre-analyse #page-listing { padding-bottom: 96px; }
@media (min-width: 1024px) {
    .barre-analyse { bottom: 28px; }
    :root .barre-analyse-btn { width: auto; min-width: 420px; min-height: 64px; padding-left: 28px; }
    .barre-analyse-titre { font-size: 1.0625rem; }
}
@media print { .barre-analyse { display: none !important; } }

.micro-tag {
    display: inline-flex;
    align-items: center;
    min-height: 24px;
    padding: 2px 8px;
    border: 1px solid var(--border);
    border-radius: var(--radius-xs);
    background: var(--verre);
    font-family: var(--font);
    font-size: .8125rem;
    font-weight: 500;
    color: var(--text-3);
    vertical-align: middle;
}

/* Dossier approfondi : carte à double cadre (#listing-content .listing-section), sections
   séparées par un filet, titres en libellé Mono. */
.deep-card > .deep-section { margin-top: 0; }
.deep-section { padding: 20px 0; border-top: 1px solid rgba(255, 255, 255, .06); }
.deep-card > h2 + .deep-section,
.deep-card > .stored-note + .deep-section { border-top: 0; padding-top: 4px; }
.deep-section h4 {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin: 0 0 12px;
    font-family: var(--font);
    font-size: .8125rem;
    font-weight: 500;
    color: var(--text-3);
}
.deep-badge {
    display: inline-flex;
    align-items: center;
    min-height: 24px;
    margin: 0;
    padding: 2px 10px;
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-xs);
    background: var(--verre);
    font-family: var(--font);
    font-size: .75rem;
    font-weight: 500;
    letter-spacing: 0;
    text-transform: none;
    color: var(--text-2);
}

/* Listes à coches fines (checklist, questions, inspection). */
.deep-checklist { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.deep-checklist li {
    position: relative;
    display: block;
    min-height: 0;
    padding: 0 0 0 28px;
    border: 0;
    font-size: .9375rem;
    line-height: 1.5;
    color: var(--text-2);
}
.deep-checklist li::before {
    content: "";
    position: absolute;
    left: 0;
    top: .15em;
    width: 18px;
    height: 18px;
    background: var(--accent-strong);
    -webkit-mask: var(--coche-fine) center / contain no-repeat;
    mask: var(--coche-fine) center / contain no-repeat;
}
/* Questions au vendeur : un « ? » ambre, pas une coche (rien n'est encore vérifié). */
.check-banner-note + .deep-checklist li::before {
    content: "?";
    top: 0;
    width: auto;
    height: auto;
    background: none;
    -webkit-mask: none;
    mask: none;
    font-family: var(--font-mono);
    font-weight: 500;
    color: var(--warning);
}
.deep-section > .check-banner-note { margin: 0 0 10px; }

/* Négociation : prix cible et prix de rupture en tuiles, chiffres en Geist tabulaire. */
.deep-nego-prices { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; font-family: var(--font); font-size: .875rem; color: var(--text-2); }
.deep-nego-prices > span {
    display: inline-flex;
    align-items: baseline;
    gap: 8px;
    padding: 10px 14px;
    border-radius: 16px;
    background: rgba(255, 255, 255, .04);
    border: 1px solid rgba(255, 255, 255, .06);
}
.deep-nego-prices strong { font-size: 1.0625rem; font-weight: 500; letter-spacing: -0.01em; color: var(--accent-strong); font-variant-numeric: tabular-nums; }
.deep-card .verdict-nego,
.deep-card .verdict-insight { margin-top: 20px; padding: 16px 20px; border-top: 1px solid rgba(124, 192, 240, .22); }
.deep-card .verdict-insight { border-top-color: var(--border); }
.deep-card .verdict-nego ul { display: grid; gap: 6px; margin: 0; padding-left: 20px; color: var(--text-2); }

/* Tableaux du dossier (défauts, entretien) : filets, en-têtes Mono, chiffres à droite. */
#listing-content .deep-card .compare-table-wrap { overflow-x: auto; background: rgba(255, 255, 255, .02); border: 1px solid var(--border); border-radius: 16px; box-shadow: none; }
.deep-card .compare-table { width: 100%; border-collapse: collapse; font-size: .875rem; }
.deep-card .compare-table th {
    position: static;
    padding: 10px 14px;
    background: rgba(255, 255, 255, .03);
    border-bottom: 1px solid var(--border);
    text-align: left;
}
.deep-card .compare-table td { padding: 10px 14px; border-bottom: 1px solid rgba(255, 255, 255, .05); color: var(--text-2); vertical-align: top; }
.deep-card .compare-table tr:last-child td { border-bottom: 0; }
/* Valeurs alignées sur leur en-tête : « 80 000 km » ou « 1 an » ne sont pas des montants
   à additionner, une colonne mêlant chiffres et texte resterait sinon en dents de scie. */
.deep-card .compare-table td.num { color: var(--text-1); text-align: left; white-space: nowrap; font-variant-numeric: tabular-nums; }
.deep-report .compare-table th { position: static; }
/* Le nowrap global du comparateur rendait les longs relevés illisibles : colonnes stables
   et texte replié uniquement dans l'expertise, sans changer les autres tableaux. */
#listing-content .deep-card .compare-table { table-layout: fixed; }
#listing-content .deep-card .compare-table th,
#listing-content .deep-card .compare-table td {
    height: auto;
    white-space: normal;
    overflow-wrap: break-word;
}

/* Offre du dossier à l'unité (Listing.carteDossierHtml) : UNE carte complète par fiche,
   conteneur majeur (32 px) à double cadre, coches fines, bouton fléché. La section qui
   l'accueille s'efface (pas de carte dans une carte). Les autres portes sont des lignes
   compactes (.dossier-ligne). La case de renonciation et son texte ne changent pas. */
#listing-content .listing-section:has(> .js-dossier-porte[data-rendu="carte"]) {
    padding: 8px 0;
    background: none;
    box-shadow: none;
}
#listing-content .js-dossier-offre {
    display: flex;
    flex-direction: column;
    gap: 0;
    padding: 28px;
    background:
        var(--bg-1);
    border: 0;
    border-radius: var(--radius-lg);
    box-shadow: var(--coeur-lueur), var(--coque);
    clip-path: none;
}
/* Carte posée DANS une autre carte (marché, verdict, bulle du chat) : même contenu, sans
   second anneau (pas de cadre dans le cadre), en encadré interne teinté de bleu. */
#listing-content :is(#listing-france-market, #listing-ai-analysis, .chat-msg, .upgrade-block) .js-dossier-offre {
    padding: 24px;
    background: rgba(0, 87, 217, .1);
    border: 1px solid rgba(124, 192, 240, .22);
    border-radius: var(--radius);
    box-shadow: none;
}
#listing-content :is(#listing-france-market, #listing-ai-analysis) > .js-dossier-porte + .upgrade-block { margin-top: 16px; }
#listing-content .js-dossier-offre h3 { margin: 0; font-size: 1.5rem; font-weight: 500; letter-spacing: -0.01em; line-height: 1.2; color: var(--text-1); }
#listing-content .js-dossier-offre .pricing-tagline { margin: 10px 0 20px; font-size: .9375rem; color: var(--text-2); }
.dossier-prix { margin-right: 2px; font-size: 2rem; font-weight: 500; letter-spacing: -0.01em; line-height: 1; color: var(--text-1); font-variant-numeric: tabular-nums; }
#listing-content .js-dossier-offre ul { margin: 0 0 20px; padding: 0; list-style: none; border-top: 1px solid var(--border); flex: none; }
#listing-content .js-dossier-offre li {
    position: relative;
    padding: 10px 0 10px 32px;
    border-bottom: 1px solid rgba(255, 255, 255, .05);
    font-size: .9375rem;
    line-height: 1.45;
    color: var(--text-2);
}
#listing-content .js-dossier-offre li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 11px;
    width: 18px;
    height: 18px;
    background: var(--accent-strong);
    -webkit-mask: var(--coche-fine) center / contain no-repeat;
    mask: var(--coche-fine) center / contain no-repeat;
}
#listing-content .js-dossier-offre .dossier-renonciation {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    min-height: 44px;
    margin: 0 0 16px;
    padding: 14px 16px;
    background: var(--bg-inset);
    border: 1px solid var(--border);
    border-radius: 16px;
    font-size: .875rem;
    line-height: 1.5;
    color: var(--text-2);
    cursor: pointer;
}
#listing-content .js-dossier-offre .dossier-renonciation input { margin-top: 1px; }
:root #listing-content .js-dossier-offre .js-dossier-achat { width: 100%; justify-content: space-between; padding-left: 24px; }
#listing-content .dossier-ligne { margin: 0; padding: 10px 0 0; text-align: left; font-size: .875rem; color: var(--text-2); }
#listing-content .dossier-ligne a { color: var(--accent-strong); text-decoration: underline; text-underline-offset: 3px; }

/* Garantie du dossier (19/10/2026) : promesse dans l'offre, état sur la fiche quand le
   dossier n'est pas concluant (Listing.afficherGarantie). Ambre = prudence, doublé du texte. */
#listing-content .js-dossier-offre .dossier-garantie-offre {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin: 0 0 16px;
    font-size: .875rem;
    line-height: 1.5;
    color: var(--text-2);
}
#listing-content .dossier-garantie-offre svg { flex: none; margin-top: 4px; color: var(--accent-strong); }
#listing-content .dossier-garantie-offre b { color: var(--text-1); font-weight: 500; }
#listing-content .dossier-garantie {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
    border: 1px solid var(--warning-border);
    background: var(--warning-dim);
}
#listing-content .dossier-garantie p { margin: 0; font-size: .9375rem; line-height: 1.55; color: var(--text-2); }
#listing-content .dossier-garantie .dossier-garantie-titre { display: flex; align-items: flex-start; gap: 10px; font-weight: 500; color: var(--text-1); }
#listing-content .dossier-garantie-titre svg { flex: none; margin-top: 4px; color: var(--warning); }
#listing-content .dossier-garantie a:not(.btn-secondary) { color: var(--accent-strong); text-decoration: underline; text-underline-offset: 3px; }

/* Portes d'inscription de la fiche (Listing.gateCta) : encadré interne quand elles
   suivent un bloc (verdict, signaux), voile dégradé quand elles couvrent le détail du
   ticket. Le bloc commun Billing.upgradeBlockHtml() appartient à un autre chantier :
   seul son emplacement est réglé ici. */
#listing-content .gate-cta { gap: 8px; padding: 20px; border-radius: var(--radius); }
#listing-content :is(.verdict-card, .signals-box) .gate-cta {
    position: static;
    align-items: flex-start;
    text-align: left;
    background: rgba(255, 255, 255, .035);
    border: 1px solid var(--border);
}
#listing-content .ticket-calc .gate-cta {
    background: linear-gradient(180deg, rgba(11, 13, 18, .35) 0%, rgba(11, 13, 18, .9) 40%, #0b0d12 100%);
    border: 0;
}
#listing-content .gate-cta-titre {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: var(--font);
    font-size: .9375rem;
    font-weight: 500;
    letter-spacing: 0;
    text-transform: none;
    color: var(--text-1);
}
#listing-content .gate-cta-titre .ico { color: var(--accent-strong); }
#listing-content .gate-cta p { max-width: 54ch; font-size: .875rem; line-height: 1.55; color: var(--text-2); }
#listing-content .gate-cta .btn-sm { margin-top: 6px; }
#listing-content .gate-cta-sous { font-size: .8125rem; color: var(--text-3); }
#listing-content .gate-val { font-family: var(--font); }
#listing-content .upgrade-block { margin: 16px 0 0; }
/* Porte « analyse offerte » du bloc Marché verrouillé (compte gratuit), avant les portes payantes. */
#listing-content .porte-offerte {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px 16px;
    margin: 0 0 14px;
    padding: 16px 20px;
    background: rgba(255, 255, 255, .035);
    border: 1px solid var(--border);
    border-radius: var(--radius);
}
#listing-content .porte-offerte p { flex: 1 1 100%; margin: 0; font-size: .875rem; line-height: 1.55; color: var(--text-2); }
#listing-content .porte-offerte-cout { font-size: .8125rem; color: var(--text-3); }
/* Arrivée par le lien de la relance : le bloc de l'analyse offerte est cerné (Listing.appelAnalyse). */
#listing-content .analysis-cta.cta-appel { border-color: var(--accent-strong); box-shadow: 0 0 0 1px var(--accent-strong); }
#listing-content .js-dossier-offre.cta-appel { outline: 2px solid var(--accent-strong); outline-offset: 4px; }

/* ===== Pepite et potentiel verrouille ===== */

/* Pépite : pastille ÉCRITE en aplat ambre (plus de dégradé violet, rejeté par DESIGN.md). */
.gem-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    min-height: 26px;
    padding: 0 10px;
    border-radius: var(--radius-pill);
    font-size: .8125rem;
    font-weight: 500;
    background: var(--warning);
    color: #1a1300;
    margin-right: 6px;
}

.delta-chip.locked {
    background: var(--verre);
    color: var(--text-2);
    border: 1px solid var(--border);
    cursor: pointer;
}

.delta-chip.locked:hover { background: rgba(255, 255, 255, .08); color: var(--text-1); border-color: var(--border-strong); }

/* ===== Classeurs de favoris =====
   Puce active : fond --text-1, texte --bg-0 (DESIGN.md), plus le bleu vif. */

:root .saved-chip.folder-active {
    background: var(--text-1);
    color: var(--bg-0);
    border-color: var(--text-1);
    font-weight: 500;
}
.saved-chip.share-chip { color: var(--accent-strong); border-color: var(--accent-border); }

.btn-folder { padding: 6px 8px; font-size: .875rem; }

/* ===== Comparateur refondu (module CompareTable) ===== */

.cmp-table td, .cmp-table th { vertical-align: top; }
.cmp-label { color: var(--text-2); font-weight: 500; white-space: nowrap; }

/* En-tête à photos : collant sous l'îlot, sur verre sombre (pas de flou : il défile). */
.cmp-photos th { background: rgba(16, 19, 26, .96); position: sticky; top: var(--haut-collant); z-index: 2; padding-top: 16px; padding-bottom: 10px; }

.cmp-photo {
    position: relative;
    width: 100%;
    min-width: 130px;
    aspect-ratio: 16 / 10;
    border-radius: var(--radius-sm);
    overflow: hidden;
    background: var(--bg-3);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-4);
}

.cmp-photo img { width: 100%; height: 100%; object-fit: cover; }

/* « Meilleur choix » : pastille écrite en aplat bleu clair. */
.cmp-best-flag {
    position: absolute;
    top: 8px;
    left: 8px;
    background: var(--accent-strong);
    color: #04121f;
    font-family: var(--font);
    font-size: .75rem;
    font-weight: 500;
    letter-spacing: 0;
    text-transform: none;
    padding: 4px 10px;
    border-radius: var(--radius-xs);
}

.cmp-title { font-family: var(--font); font-size: .875rem; font-weight: 500;  text-transform: none; color: var(--text-1); margin-top: 8px; line-height: 1.3; white-space: normal; }

/* Seule la rangée des photos colle : deux rangées collées au même top se recouvraient. */
.cmp-verdict-row th { background: transparent; position: static; }
:root .compare-table .cmp-label { font-family: var(--font); font-size: .8125rem; font-weight: 500; color: var(--text-3); }
.cmp-table tbody td:not(:first-child), .cmp-verdict-row td { text-align: right; }
.cmp-table .cmp-winner { justify-content: flex-end; display: flex; }
.cmp-verdict-row td { text-align: center; padding-bottom: 12px; }
.cmp-score { font-size: 1.75rem; font-weight: 500; letter-spacing: -0.01em; color: var(--text-1); }
.cmp-score small { font-size: .8125rem; font-weight: 500; color: var(--text-3); letter-spacing: 0; }
.cmp-winner-cell .cmp-score { color: var(--accent-strong); }

/* Écarts : favorable en bleu clair, défavorable en --text-2 avec le signe écrit (un
   écart n'est pas une alerte : pas de rouge). */
.cmp-delta { display: block; font-size: .8125rem; margin-top: 2px; font-variant-numeric: tabular-nums; }
.cmp-better { color: var(--success); }
.cmp-worse { color: var(--text-3); }
.cmp-winner { display: inline-flex; align-items: center; gap: 4px; font-size: .8125rem; margin-top: 2px; color: var(--success); font-weight: 500; }
.cmp-pos { color: var(--success); }
.cmp-neg { color: var(--text-1); }
.cmp-locked { display: inline-flex; align-items: center; gap: 4px; color: var(--text-3); font-size: .8125rem; }

/* Téléphone : le tableau défile dans son conteneur, l'en-tête n'y colle plus (un top
   non nul le décalerait par-dessus les lignes). */
@media (max-width: 768px) {
    .cmp-photos th, .compare-table th { top: 0; }
}

/* Colonnes égales (05/11/2026) : en mise en page automatique, la largeur suivait la taille
   d'origine de chaque photo (791 px pour une California, 227 pour une 997 à côté). */
@media (min-width: 601px) {
    .cmp-table { table-layout: fixed; }
    .cmp-table tr.cmp-photos > th:first-child { width: 190px; }
    .cmp-table td, .cmp-table th { white-space: normal; overflow-wrap: anywhere; }
}

/* Téléphone (19/10/2026, Charles : « cette page est horrible ») : le tableau défilait de
   côté, la colonne des libellés prenait la moitié de l'écran et on ne voyait qu'une
   voiture. Chaque critère devient un bloc : libellé sur sa ligne, puis les voitures côte
   à côte (--n colonnes, posé par CompareTable.render). Plus aucun défilement horizontal. */
@media (max-width: 600px) {
    :root .compare-table-wrap { overflow: visible; }
    .compare-table, .compare-table thead, .compare-table tbody { display: block; width: 100%; }
    .compare-table tr {
        display: grid;
        grid-template-columns: repeat(var(--n, 2), minmax(0, 1fr));
        gap: 4px 10px;
        padding: 10px 12px;
        border-bottom: 1px solid rgba(255, 255, 255, .05);
    }
    .compare-table th, .compare-table td { padding: 0; border: 0; background: none; position: static; font-size: .875rem; overflow-wrap: break-word; }
    .compare-table tr > :first-child { grid-column: 1 / -1; }
    .compare-table tr.cmp-photos > :first-child { display: none; }
    .compare-table tr.cmp-photos { padding-top: 12px; }
    .cmp-photo { min-width: 0; }
    .cmp-title { font-size: .75rem; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; hyphens: manual; overflow-wrap: normal; word-break: normal; }
    /* Vignettes trop étroites pour la pastille : le meilleur se lit au score en bleu. */
    .cmp-best-flag { display: none; }
    :root .cmp-table tbody td:not(:first-child), :root .cmp-verdict-row td { text-align: left; }
    .cmp-table .cmp-winner { justify-content: flex-start; }
    .cmp-verdict-row th { padding: 0; }
    .cmp-score { font-size: 1.5rem; }
    .compare-table td img { width: 100%; height: auto; }
}

.cmp-more { margin-top: 16px; }
.cmp-more summary { cursor: pointer; display: inline-flex; align-items: center; min-height: 44px; color: var(--text-2); font-size: .9375rem; font-weight: 500; }
.cmp-more summary:hover { color: var(--text-1); }

/* ===== Fiche fiabilité (base de connaissance) ===== */

/* Carte à double cadre (#listing-content .listing-section). Défauts en lignes à
   pastille écrite de gravité (critique rouge, moyen ambre, mineur verre), sans rail. */
.k-block { margin: 0; padding: 20px 0; border-top: 1px solid rgba(255, 255, 255, .06); }
.knowledge-card > h2 + .k-block,
.knowledge-card > .k-caveat + .k-block { border-top: 0; padding-top: 4px; }
.k-block h4 {
    margin: 0 0 12px;
    font-family: var(--font);
    font-size: .8125rem;
    font-weight: 500;
    color: var(--text-3);
}

.k-engines { display: flex; flex-wrap: wrap; gap: 8px; }
.k-engine {
    display: inline-flex;
    align-items: center;
    min-height: 32px;
    min-width: 0;
    padding: 4px 12px;
    background: var(--verre);
    border: 1px solid var(--border);
    border-radius: var(--radius-xs);
    font-size: .8125rem;
    color: var(--text-2);
}
.k-engine.k-good { border-color: var(--success-border); color: var(--accent-strong); }
.k-engine.k-bad { border-color: var(--danger-border); color: var(--danger); }

.k-issues { display: flex; flex-direction: column; gap: 0; }
.k-issue {
    padding: 12px 0;
    background: none;
    border: 0;
    border-top: 1px solid rgba(255, 255, 255, .05);
    border-radius: 0;
    box-shadow: none;
}
.k-issue:first-child { border-top: 0; padding-top: 0; }
.k-issue-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; min-height: 0; font-size: .9375rem; }
.k-issue-head strong { font-weight: 500; color: var(--text-1); line-height: 1.4; }
.k-grav {
    flex: none;
    display: inline-flex;
    align-items: center;
    min-height: 24px;
    padding: 2px 10px;
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-xs);
    background: var(--verre);
    font-family: var(--font);
    font-size: .75rem;
    font-weight: 500;
    letter-spacing: 0;
    text-transform: none;
    color: var(--text-2);
}
.k-issue.k-critique .k-grav { background: var(--danger); border-color: var(--danger); color: #1a0200; }
.k-issue.k-moyen .k-grav { background: var(--warning); border-color: var(--warning); color: #1a1300; }
.k-issue-meta { margin-top: 4px; font-family: var(--font); font-size: .8125rem; letter-spacing: 0; color: var(--text-3); font-variant-numeric: tabular-nums; }   /* porte des coûts : Geist tabulaire */

.k-source { margin-top: 14px; font-family: var(--font); font-size: .8125rem; font-style: normal; letter-spacing: 0; color: var(--text-3); }

/* ===== Historique et baisse de prix ===== */

/* Baisse de prix : favorable à l'acheteur, donc bleu clair (plus jamais de vert),
   pastille pleine lisible sur une photo, le texte dit la baisse. */
.drop-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    min-height: 26px;
    padding: 4px 10px;
    border-radius: var(--radius-xs);
    font-size: .75rem;
    font-weight: 500;
    background: var(--accent-strong);
    color: #04121f;
    box-shadow: 0 .5rem 1rem -.5rem rgba(0, 0, 0, .6);
    margin-right: 6px;
}

/* Checkbox « pepites uniquement » du formulaire d'alerte */
.alert-checkbox {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin: 4px 0 6px;
    font-size: .875rem;
    color: var(--text-2);
    cursor: pointer;
}
.alert-checkbox input { margin-top: 4px; flex-shrink: 0; accent-color: var(--accent); }

.listing-drop {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 32px;
    margin-top: 0;
    padding: 4px 12px;
    border-radius: var(--radius-xs);
    background: var(--success-dim);
    border: 1px solid var(--success-border);
    color: var(--accent-strong);
    font-size: .8125rem;
    font-weight: 500;
    text-align: left;
}

.ph-table td { font-variant-numeric: tabular-nums; }
#listing-content .ph-table td:first-child { width: 34%; }
#listing-content .ph-table td:last-child { width: 32%; }
.ph-delta { display: inline-flex; align-items: center; gap: 4px; font-size: .8125rem; font-weight: 500; white-space: nowrap; }
.ph-down { color: var(--accent-strong); }
.ph-up { color: var(--danger); }

/* ===== Micro-analyse (feu tricolore au chargement) ===== */

/* Pré-analyse : la pastille écrite porte le verdict (le voile de tête est posé sur la
   carte du verdict, « Bloc verdict »). Le point lumineux d'origine est retiré : la
   pastille le remplace. */
.micro-verdict {
    display: block;
    margin: 0;
    padding: 0;
    background: none;
    border: 0;
    border-radius: 0;
}
.micro-dot { display: none; }
#listing-content .micro-verdict .micro-label {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 10px;
    font-family: var(--font);
    font-size: 1rem;
    font-weight: 500;
    line-height: 1.3;
    letter-spacing: 0;
    text-transform: none;
    color: var(--text-1);
}
#listing-content .micro-verdict .micro-label .verdict-pastille { min-height: 32px; padding: 4px 14px; font-size: .9375rem; }
#listing-content .micro-resume {
    display: block;
    min-height: 0;
    margin: 14px 0 0;
    padding: 0;
    background: none;
    border: 0;
    box-shadow: none;
    clip-path: none;
    max-width: 68ch;
    font-size: 1rem;
    line-height: 1.6;
    color: var(--text-2);
}
/* Défauts que le vendeur déclare dans sa description (pré-analyse, depuis le 14/10/2026) :
   ambre = prudence, toujours doublé du titre et de l'icône. */
.micro-defauts { margin-top: 12px; padding: 10px 14px; border-radius: 14px; background: var(--warning-dim); border: 1px solid var(--warning-border); }
.micro-defauts-titre { display: inline-flex; align-items: center; gap: 6px; font-family: var(--font-mono); font-size: .75rem; color: var(--warning); }
.micro-defauts ul { margin: 6px 0 0; padding-left: 20px; color: var(--text); font-size: .9375rem; line-height: 1.5; }


/* ===== Dossier PDF (F3) : impression propre sur fond clair ===== */

@media print {
    /* Fond blanc, encre noire : on n'imprime pas le thème sombre */
    html, body { background: #fff !important; color: #111 !important; }

    /* Ne garder que la fiche : masquer nav, pied, boutons, modales, incitations */
    #app-header, footer, #toast, .toast, .listing-header-actions, .analysis-cta,
    .feedback-fab, .upgrade-block, .modal-overlay, #seller-msg-modal, .btn-primary,
    .btn-secondary, .btn-fav, .listing-thumbs, .gallery-more, .page:not(#page-listing) { display: none !important; }

    .page { display: block !important; }
    body { padding: 0; }

    /* En-tete de marque, uniquement a l'impression */
    #page-listing::before {
        content: "Captain Auto - Dossier d'achat import";
        display: block;
        font-size: .9375rem;
        font-weight: 600;
        color: #0057D9;
        border-bottom: 2px solid #0057D9;
        padding-bottom: 8px;
        margin-bottom: 16px;
    }
    #page-listing::after {
        content: "Analyse générée par Captain Auto - captain-auto.com. Estimation indicative, l'achat se fait auprès du vendeur.";
        display: block;
        font-size: .75rem;
        color: #666;
        border-top: 1px solid #ccc;
        margin-top: 20px;
        padding-top: 8px;
    }

    /* Cartes et blocs : bordures fines, pas d'ombre, pas de coupure au milieu */
    .listing-section, .verdict-card, .market-box, .k-block, .import-box {
        background: #fff !important;
        border: 1px solid #ccc !important;
        box-shadow: none !important;
        break-inside: avoid;
        page-break-inside: avoid;
    }
    .listing-section h2, .verdict-card > h2 { color: #333 !important; }
    .verdict-title, .score-ring-value, .market-median-value, .verdict-maxprice-value,
    .specs-table td, .listing-description { color: #111 !important; }
    .verdict-sub, .section-note, .market-median-label, .specs-table td:first-child { color: #555 !important; }

    /* La jauge de score reste lisible en couleur d'accent */
    .score-ring { box-shadow: none !important; }

    /* Photo principale conservee, vignettes retirees */
    .listing-main-photo { max-height: 320px; object-fit: cover; }

    a { text-decoration: none; color: #111 !important; }
}

/* ===== Mode découverte par budget ===== */
.discover-wrap { max-width: 900px; margin: 0 auto; }
.discover-wrap h1 { font-size: 1.75rem; margin-bottom: 8px; }
.discover-sub { color: var(--text-2); font-size: .9375rem; line-height: 1.5; margin-bottom: 24px; max-width: 68ch; }
.discover-form {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr auto;
    gap: 14px;
    align-items: end;
    background: var(--bg-2);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 20px;
    margin-bottom: 24px;
}
.discover-field { display: flex; flex-direction: column; gap: 6px; }
.discover-field label { font-size: .8125rem; color: var(--text-2); font-weight: 500; }
.discover-field input, .discover-field select {
    padding: 10px 12px;
    background: var(--bg-0);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    color: var(--text-1);
    font-family: inherit;
    font-size: 0.9rem;
}
.discover-form .btn-primary { white-space: nowrap; height: 42px; }
@media (max-width: 720px) { .discover-form { grid-template-columns: 1fr 1fr; } .discover-form .btn-primary { grid-column: 1 / -1; } }

.disc-intro { color: var(--text-1); font-size: 1rem; font-weight: 500; margin-bottom: 16px; }
.disc-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
@media (max-width: 720px) { .disc-grid { grid-template-columns: 1fr; } }
.disc-card {
    background: var(--bg-2);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 16px 20px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.disc-card-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.disc-card-head h3 { font-size: 1.0625rem; }
.disc-price { color: var(--accent-strong); font-weight: 600; white-space: nowrap; font-size: .9375rem; }
.disc-reli { color: var(--text-2); font-size: .8125rem; }
.disc-why { color: var(--text-2); font-size: .875rem; line-height: 1.45; }
.disc-watch { color: var(--warning); font-size: .8125rem; }
.disc-card .btn-secondary { align-self: flex-start; margin-top: 4px; }

/* ===== Bandeau d'installation PWA ===== */
/* Pilule de verre fixe (rayon 32 : elle porte une icône, deux lignes et deux boutons),
   au-dessus du dock (--bas-fixe), sur le calque des toasts (sous le bandeau cookies).
   Entrée par le bas en ressort. */
.pwa-banner {
    position: fixed;
    left: 12px;
    right: 12px;
    bottom: var(--bas-fixe);
    z-index: var(--z-toast);
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 10px 10px 10px 12px;
    background: var(--bg-2);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06), var(--ombre-flottante);
    transform: translateY(calc(100% + 120px));
    transition: transform 240ms var(--ressort);
    max-width: 540px;
    margin: 0 auto;
}
.pwa-banner.show { transform: translateY(0); }
.pwa-banner-icon { border-radius: 14px; flex-shrink: 0; }
.pwa-banner-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.pwa-banner-text strong { font-size: .9375rem; font-weight: 500; }
.pwa-banner-text span { font-size: .8125rem; color: var(--text-2); line-height: 1.4; }
.pwa-banner-actions { display: flex; align-items: center; gap: 6px; flex-shrink: 0; }
:root .pwa-banner-actions .btn-primary { min-height: 40px; padding: 10px 20px; font-size: .875rem; }
.pwa-banner-close {
    min-height: 40px;
    padding: 0 14px;
    background: var(--verre);
    border: 1px solid var(--border);
    border-radius: var(--radius-pill);
    color: var(--text-2);
    font-size: .875rem;
    font-weight: 500;
    cursor: pointer;
    font-family: inherit;
    transition: color var(--t), border-color var(--t);
}
.pwa-banner-close:hover { color: var(--text-1); border-color: var(--border-strong); }
@media (prefers-reduced-motion: reduce) { .pwa-banner { transition: none; } }
@media (max-width: 480px) {
    .pwa-banner { flex-wrap: wrap; gap: 10px; }
    .pwa-banner-actions { width: 100%; justify-content: flex-end; }
}
@media print { .pwa-banner { display: none !important; } }
/* Offre de notifications (pwa.js, proposerNotifications), 19/10/2026 : action ponctuelle,
   juste après la création d'une alerte. Sur téléphone, le bandeau d'installation se range en
   fin de page (responsive.css) : l'offre, elle, reste fixe au-dessus du dock, sinon personne
   ne la voit. Spécificité (.pwa-banner.push-offre) plus forte que la règle de responsive.css. */
@media (max-width: 768px) {
    .pwa-banner.push-offre {
        position: fixed;
        left: 12px;
        right: 12px;
        bottom: var(--bas-fixe);
        margin: 0;
        background: var(--bg-2);
    }
}

/* ===== Signaux d'alerte déterministes (tête de fiche) ===== */
/* Carte à double cadre (#listing-content .signals-box, « Fiche annonce »). Chaque
   signal porte sa pastille ÉCRITE (Alerte rouge, Attention ambre, À savoir verre) :
   aucune bordure gauche colorée, la couleur n'est jamais seule. */
.signals-box { display: flex; flex-direction: column; gap: 0; margin: 0 0 24px; }
#listing-content .signals-box { padding: 20px 24px; }
.signals-box h2 {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0 0 6px;
    font-size: 1.0625rem;
    font-weight: 500;
    letter-spacing: -0.01em;
    color: var(--text-1);
}
.signals-box h2 .ico { flex: none; color: var(--text-2); }
.signal-item {
    display: flex;
    flex: none;
    align-items: flex-start;
    gap: 14px;
    min-width: 0;
    min-height: 0;
    padding: 14px 0;
    background: none;
    border: 0;
    border-top: 1px solid rgba(255, 255, 255, .06);
    border-radius: 0;
    box-shadow: none;
}
.signals-box > h2 + .signal-item { border-top: 0; }
.signal-badge {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-width: 104px;
    min-height: 28px;
    height: auto;
    margin-top: 0;
    padding: 4px 12px 4px 10px;
    border: 1px solid transparent;
    border-radius: var(--radius-xs);
    font-family: var(--font);
    font-size: .8125rem;
    font-weight: 500;
    letter-spacing: 0;
    text-transform: none;
    white-space: nowrap;
}
.signal-alerte .signal-badge    { background: var(--danger); color: #1a0200; }
.signal-attention .signal-badge { background: var(--warning); color: #1a1300; }
.signal-info .signal-badge      { background: var(--verre); border-color: var(--border-strong); color: var(--text-2); }
.signal-body { flex: 1; min-width: 0; font-size: .9375rem; line-height: 1.5; color: var(--text-2); display: block; overflow: visible; }
.signal-body strong { display: block; margin-bottom: 4px; font-size: .9375rem; font-weight: 500; line-height: 1.4; color: var(--text-1); }
.signal-body p { display: block; margin: 0; overflow: visible; font-size: .875rem; line-height: 1.55; color: var(--text-2); }
/* Porte d'inscription des signaux : elle suit la liste, jamais par-dessus. */
#listing-content .signals-box > .gate-cta { position: static; margin-top: 8px; }

/* ===== Scénarios de malus (immatriculation incertaine) ===== */
/* Immatriculation incertaine : encadré ambre (à vérifier), deux lignes de scénario.
   Le scénario coûteux est en ambre, jamais en rouge : c'est une question, pas un défaut. */
.calc-scenarios {
    display: block;
    margin: 8px 0 6px;
    padding: 14px 16px;
    background: rgba(242, 169, 0, .1);
    border: 1px solid var(--warning-border);
    border-radius: var(--radius);
}
.calc-scenario {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    min-height: 0;
    padding: 6px 0;
    background: none;
    border: 0;
    border-radius: 0;
    font-family: var(--font);
    font-size: .9375rem;
    color: var(--text-2);
}
.calc-scenario .scenario-if { color: var(--text-2); }
.calc-scenario .num { color: var(--text-1); white-space: nowrap; font-variant-numeric: tabular-nums; }
.calc-scenario.scenario-warn .num { color: var(--warning); font-weight: 500; }
.calc-scenarios .calc-note { margin: 10px 0 0; }
.calc-scenarios .calc-note a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }

/* ===== Annonces comparables réelles (marché FR) ===== */
/* Comparables en cartes compactes (Listing.loadFranceMarket) : titre ouvrable,
   année et kilométrage en Mono, prix en Geist tabulaire. */
.market-samples { margin-top: 0; border-top: 1px solid rgba(255, 255, 255, .06); padding-top: 6px; }
#listing-content .market-samples > summary {
    min-height: 44px;
    padding: 0;
    font-size: .9375rem;
    font-weight: 500;
    color: var(--text-1);
}
@media (hover: hover) { #listing-content .market-samples > summary:hover { background: none; } }
#listing-content .market-samples[open] > summary { border-bottom: 0; }
.samples-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr));
    gap: 8px;
    margin: 8px 0 0;
    padding: 0;
    list-style: none;
}
.sample-card {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 10px;
    min-width: 0;
    padding: 14px 16px;
    background: rgba(255, 255, 255, .035);
    border: 1px solid rgba(255, 255, 255, .06);
    border-radius: 16px;
    transition: border-color var(--t), background-color var(--t);
}
@media (hover: hover) { .sample-card:hover { border-color: var(--border-strong); background: rgba(255, 255, 255, .05); } }
.sample-card .sample-link {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    font-size: .9375rem;
    font-weight: 500;
    line-height: 1.35;
    color: var(--text-1);
    text-decoration: underline;
    text-decoration-color: rgba(124, 192, 240, .4);
    text-underline-offset: 3px;
    border: 0;
    overflow-wrap: anywhere;
}
@media (hover: hover) { .sample-card .sample-link:hover { text-decoration-color: var(--accent-strong); } }
.sample-card .sample-link.is-extern .ico { opacity: .6; vertical-align: -1px; }
.sample-bas { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.sample-meta { display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-mono); font-size: .75rem; color: var(--text-3); font-variant-numeric: tabular-nums; }
.sample-prix { font-size: 1rem; font-weight: 500; color: var(--text-1); white-space: nowrap; font-variant-numeric: tabular-nums; }

/* Tableau des comparables : n'est plus employé par la fiche, mais par le compte
   (account.js) et le rapport public (rapport.php). Règles gardées telles quelles. */
.samples-table {
    width: 100%;
    margin-top: 8px;
    border-collapse: collapse;
    font-size: .8125rem;
    table-layout: fixed;
}
.samples-table th {
    text-align: left;
    font-weight: 500;
    color: var(--text-dim);
    padding: 4px 6px;
    border-bottom: 1px solid var(--border);
}
.samples-table th:nth-child(1) { width: 46%; }
.samples-table td {
    padding: 4px 6px;
    border-bottom: 1px solid var(--border);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.samples-table td.num, .samples-table th:not(:first-child) { text-align: right; }

/* Fiche fiabilité : avertissement de couverture (version non traitée par la fiche) */
.k-caveat {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    margin: 0 0 14px;
    padding: 14px 16px;
    font-size: .875rem;
    line-height: 1.55;
    color: var(--text-1);
    background: rgba(242, 169, 0, .1);
    border: 1px solid var(--warning-border);
    border-radius: var(--radius);
}
.k-caveat svg { flex: 0 0 auto; margin-top: 2px; color: var(--warning); }

/* Prix anormalement bas : badge et chip d'avertissement (jamais de vert sur une arnaque) */
.anomaly-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: .75rem;
    font-weight: 500;
    color: var(--warning);
    background: color-mix(in srgb, var(--warning) 14%, transparent);
    border: 1px solid color-mix(in srgb, var(--warning) 35%, transparent);
    padding: 4px 8px;
    border-radius: var(--radius-xs);
}
.delta-chip.anomaly {
    color: var(--warning);
    background: color-mix(in srgb, var(--warning) 10%, transparent);
    border-color: color-mix(in srgb, var(--warning) 35%, transparent);
}

/* Case « Sans malus à l'import » du formulaire + badge des cartes */
.filter-check { display: flex; align-items: flex-end; padding-bottom: 4px; }
.check-label {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: .875rem;
    color: var(--text-dim);
    cursor: pointer;
    user-select: none;
}
.check-label input { accent-color: var(--accent); width: 15px; height: 15px; cursor: pointer; }
.check-label:hover { color: var(--text); }
/* ==========================================================================
   CARTES DE RÉSULTAT v2 : tout en lignes PLEINE LARGEUR.
   L'ancienne mise en page mettait le potentiel dans une pastille verte coincée
   à côté d'un texte, ce qui cassait la grille dès que le montant était long.
   Ici chaque information occupe sa propre ligne sur toute la largeur : rien ne
   peut déborder, la lecture est verticale, et le mobile hérite gratuitement.
   ========================================================================== */
.car-card-title {
    line-height: 1.3;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    min-height: 2.6em;
    text-wrap: balance;
    /* Une regle plus haut dans ce fichier pose white-space: nowrap sur le meme
       selecteur. Sans cette remise a zero, le texte reste sur une seule ligne : la
       troncature sur deux lignes ne s'applique jamais, et comme display vaut
       -webkit-box, text-overflow n'y met meme pas de points de suspension. Le titre
       etait donc coupe net au bord, ce qui se voyait sur tous les titres longs. */
    white-space: normal;
}

/* Badges d'état : une rangée qui passe à la ligne, jamais de débordement */
/* Pastilles écrites (DESIGN.md) : le mot porte le sens, la couleur le double. « Pépite »
   en aplat ambre (texte #1a1300, comme « Vendue » sur la maquette) ; « Prix à vérifier »
   en voile ambre ; favorable (sans malus, baisse) en voile bleu clair ; le reste neutre. */
.card-badges { display: flex; flex-wrap: wrap; gap: 6px; }
.cb {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    min-height: 26px;
    font-size: .8125rem;
    font-weight: 500;
    padding: 0 10px;
    border-radius: var(--radius-pill);
    border: 1px solid transparent;
    white-space: nowrap;
}
.cb-gem  { color: #1a1300; background: var(--warning); border-color: var(--warning); font-weight: 500; }
.cb-warn { color: var(--warning); background: var(--warning-dim); border-color: var(--warning-border); }
.cb-ok   { color: var(--success); background: var(--success-dim); border-color: var(--success-border); }
.cb-soft { color: var(--accent-strong); background: var(--verre); border-color: var(--accent-border); }
.cb-drop { color: var(--success); background: var(--success-dim); border-color: var(--success-border); }
.cb-new  { color: var(--text-2); background: var(--verre); border-color: var(--border-strong); }
.cb-eval { color: var(--text-2); background: var(--verre); border-color: var(--border-strong); }
.cb-eval.eval-low { color: var(--warning); border-color: var(--warning-border); } /* prix jugé trop bas par AutoScout : prudence, 04/11/2026 */

/* ===== Drapeaux : d'où vient la voiture, lisible sans lire =====
   Le pays commande le transport, la douane et la TVA : c'est une donnée de décision,
   pas une décoration. Filet clair sur le drapeau, sinon les bandes blanches (France,
   Suisse, Autriche) fondent dans le fond et le drapeau paraît tronqué. */
.flag {
    display: block;
    border-radius: 2px;
    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.14);
}

/* Pastille posée sur la photo : repérable au balayage, avant même de lire le titre */
.card-flag {
    position: absolute;
    top: 8px;
    left: 8px;
    z-index: 2;
    display: inline-flex;
}


/* Dans une ligne de specs, le drapeau remplace le pictogramme : il ne subit donc pas
   l'atténuation posée sur les icônes de trait, qui le délaverait. */
.spec .flag { opacity: 1; }

/* Vitrine pépites : le chip est empilé au-dessus du titre, il lui faut son air */
.gem-body .flag-chip { margin-bottom: 4px; }

/* Méta-données : année · km · puissance · pays, en Geist Mono sur une ligne ; le reste
   des caractéristiques (boîte, carburant, couleur, vendeur) en Geist, plus discret.
   Chaque valeur garde son infobulle (title) ; le point médian est un séparateur visuel. */
.car-card-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 2px 0;
    margin: -4px 0 0;
    font-family: var(--font-mono);
    font-size: .8125rem;
    font-variant-numeric: tabular-nums;
    color: var(--text-2);
}
.car-card-specs {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 2px 0;
    margin: -6px 0 0;
    font-size: .8125rem;
    color: var(--text-3);
}
.spec {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
    white-space: nowrap;
}
/* Séparateur posé APRÈS chaque valeur sauf la dernière : au retour à la ligne, il reste
   en fin de ligne au lieu d'ouvrir la suivante. */
.car-card-meta .spec:not(:last-child)::after,
.car-card-specs .spec:not(:last-child)::after {
    content: "\00B7";
    margin: 0 8px;
    color: var(--text-4);
}
.spec .flag { flex: 0 0 auto; }

/* Montant héros (potentiel ou écart) : Geist tabulaire, libellé Mono au-dessus, phrase
   dessous. Favorable : encadré bleu en dégradé et montant bleu clair (DESIGN.md
   « Ticket de calcul », encadré d'écart). Défavorable ou faible : encadré de verre
   neutre, montant --text-1, pas de rouge (ce n'est pas une alerte). Écart suspect :
   voile ambre. */
.card-verdict {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    width: 100%;
    padding: 12px 16px 12px;
    border-radius: var(--radius-sm);
    border: 1px solid var(--border);
    background: var(--verre);
    color: var(--text-1);
    text-align: left;
    font: inherit;
    cursor: default;
}
button.card-verdict { cursor: pointer; transition: transform var(--t), background-color var(--t), border-color var(--t); }
button.card-verdict:active { transform: scale(.98); }
.cv-label {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-family: var(--font);
    font-size: .8125rem;
    font-weight: 500;
    color: var(--text-3);
}
.cv-label svg { flex: 0 0 auto; }
.cv-main {
    font-family: var(--font);
    font-size: clamp(1.75rem, 2.2vw, 2rem);
    font-weight: 500;
    line-height: 1.05;
    letter-spacing: -0.01em;
    font-variant-numeric: tabular-nums;
}
/* Fourchette (compte gratuit) : deux montants, donc plus petits pour tenir sur une ligne. */
.cv-main.cv-fourchette { font-size: clamp(1.25rem, 1.8vw, 1.5rem); letter-spacing: -0.01em; }
.cv-sub  { font-size: .8125rem; line-height: 1.4; color: var(--text-2); display: flex; align-items: center; gap: 4px; }
.card-verdict.positive { background: none; }
.card-verdict.positive .cv-main,
.card-verdict.positive .cv-label { color: var(--accent-strong); }
.card-verdict.warn { background: none; }
.card-verdict.warn .cv-label,
.card-verdict.warn .cv-main { color: var(--warning); }
/* Compact (2026-10-15, demande de Charles : « le gain estimé prend trop de place ») :
   montant à droite sur toute la hauteur, libellé et sous-titre empilés à gauche. Environ
   56 px de haut au lieu de 104. Ordre de lecture inchangé (libellé, montant, sous-titre).
   Le bloc verrouillé (cadenas) garde sa propre mise en page. */
.card-verdict:not(.locked) {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas: "label main" "sub main";
    align-items: center;
    column-gap: 12px;
    row-gap: 2px;
    padding: 12px 0 0;
    border: 0;
    border-top: 1px solid var(--border);
    border-radius: 0;
    background: none;
}
.card-verdict:not(.locked) .cv-label { grid-area: label; }
.card-verdict:not(.locked) .cv-main { grid-area: main; justify-self: end; font-size: clamp(1.25rem, 1.5vw, 1.4rem); white-space: nowrap; }
.card-verdict:not(.locked) .cv-main.cv-fourchette { font-size: 1rem; }
.card-verdict .cv-lib-court { display: none; }
.card-verdict:not(.locked) .cv-sub { grid-area: sub; font-size: .75rem; min-width: 0; }
/* Montant verrouillé : pilule de verre avec le cadenas dans son rond, qui mène à
   l'inscription ou aux offres. Le libellé dit ce qui manque et comment l'obtenir. */
.card-verdict.locked {
    flex-direction: row;
    align-items: center;
    gap: 12px;
    padding: 8px 20px 8px 8px;
    border-radius: var(--radius-pill);
    background: var(--verre);
    border-color: var(--border);
}
.card-verdict.locked .cv-cadenas {
    display: inline-grid;
    place-items: center;
    flex: 0 0 auto;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .07);
    border: 1px solid var(--border);
    color: var(--text-1);
}
.card-verdict.locked .cv-texte { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.card-verdict.locked .cv-main { font-size: .9375rem; font-weight: 500;  line-height: 1.3; }
.card-verdict.locked .cv-sub { color: var(--accent-strong); font-size: .8125rem; }
@media (hover: hover) {
    button.card-verdict.locked:hover { background: rgba(255, 255, 255, .08); border-color: var(--border-strong); }
    button.card-verdict.positive:hover .cv-main { color: var(--text-1); }
}
/* Téléphone (19/10/2026, Charles : « le cartouche du gain est bien trop gros en mobile, il
   faut scroller comme un taré pour voir les voitures ») : UNE ligne, libellé à gauche,
   montant à droite, 73 px ramenés à environ 40. La médiane et le nombre d'annonces restent
   sur la fiche et dans l'infobulle ; restent affichés les sous-titres qui portent un
   message : écart suspect (.warn), fourchette d'un compte gratuit (bouton), cote
   insuffisante. Le bloc verrouillé perd de la hauteur aussi (cadenas 30 px). */
@media (max-width: 600px) {
    .card-verdict:not(.locked) { padding: 8px 0 0; row-gap: 0; }
    .card-verdict:not(.locked) .cv-main { font-size: 1.0625rem; }
    div.card-verdict:is(.positive, .neutral, .negative) { grid-template-areas: "label main"; }
    div.card-verdict:is(.positive, .neutral, .negative) .cv-sub { display: none; }
    /* Fourchette d'un compte gratuit : libellé et montant sur une ligne, « Exact avec
       l'abonnement » dessous sur toute la largeur (sinon le libellé passait sur deux lignes). */
    button.card-verdict.positive { grid-template-areas: "label main" "sub sub"; row-gap: 2px; }
    button.card-verdict.positive .cv-label { white-space: nowrap; }
    button.card-verdict.positive .cv-main.cv-fourchette { font-size: .9375rem; }
    /* Voiture déjà en France : « Écart » seul, sinon libellé et fourchette se chevauchent (22/10/2026). */
    .card-verdict .cv-lib-long { display: none; }
    .card-verdict .cv-lib-court { display: inline; }
    .card-verdict.locked { padding: 4px 14px 4px 4px; gap: 10px; }
    .card-verdict.locked .cv-cadenas { width: 30px; height: 30px; }
    .card-verdict.locked .cv-main { font-size: .875rem; line-height: 1.25; }
    .card-verdict.locked .cv-sub { font-size: .75rem; }
}

/* Prix : libellé Mono à gauche, montant Geist tabulaire à droite, filet entre les lignes. */
.card-prices { display: flex; flex-direction: column; gap: 0; margin-top: auto; }
.cp-row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 10px;
    padding: 4px 0;
    line-height: 1.3;
}
/* Libellés Mono à la mesure du système (une règle commune de bordereau.css les remet
   à 12 px / .08em). */
.car-card .cp-label { font-size: .75rem; font-weight: 500; }
.cp-label small { font-family: var(--font); font-size: .75rem; letter-spacing: 0; text-transform: none; color: var(--warning); }
.cp-val { font-family: var(--font); font-size: 1rem; font-weight: 500; color: var(--text-2); font-variant-numeric: tabular-nums; white-space: nowrap; }
/* Le coût rendu en France est LE chiffre du produit : il domine le prix du vendeur. */
.cp-rendu .cp-label { color: var(--text-2); }
.cp-rendu .cp-val { font-size: 1.25rem; font-weight: 500; letter-spacing: -0.01em; color: var(--text-1); }
/* Malus non chiffré sur la carte : la raison est ÉCRITE sous le montant (une infobulle
   ne s'ouvre pas au doigt). */
.cp-note { font-size: .8125rem; color: var(--text-2); text-align: right; line-height: 1.3; margin-top: -2px; }
/* Prix constaté en France (04/11/2026) : la médiane qui sert à l'écart, nombre d'annonces
   en clair, neutre (le <small> du libellé est ambre, réservé au malus). */
.cp-label .cp-nb { font-family: var(--font); font-size: .75rem; letter-spacing: 0; text-transform: none; color: var(--text-3); white-space: nowrap; }
.cp-cote .cp-val { color: var(--text-2); }
a.car-card-link { color: inherit; text-decoration: none; border-radius: 6px; }

@media (max-width: 767px) {
    :root .car-card .card-actions :is(.btn-fav, .btn-compare-select, .btn-folder, .btn-notes) { width: 44px; height: 44px; min-width: 44px; min-height: 44px; }
    .car-card-photo { height: 188px; }
    .card-flag { top: 18px; }
}
/* Cartes au téléphone (19/10/2026, Charles : « il faut scroller comme un taré pour voir les
   voitures », accord pour environ 470 px par carte au lieu de 564) : photo de 160 px, zones
   plus serrées, et la méta sur UNE ligne (année, km, ch) : le pays est déjà écrit sur la photo
   par la pastille drapeau (.card-flag). Sans pastille (pays inconnu), il reste dans la méta. */
@media (max-width: 600px) {
    .car-card-photo { height: 160px; }
    .car-card-body { gap: 8px; padding: 14px 16px 16px; }
    .car-card-meta .spec-pays { display: none; }
    .car-card-meta .spec:has(+ .spec-pays:last-child)::after { content: none; }
}

/* Squelettes : mêmes rayons et hauteurs que la carte finale (mesurées le 14/10/2026 :
   photo 196, titre 49, méta 21 (44 au téléphone), caractéristiques 21, pastilles 26,
   prix 73, montant héros 104 ; 56 depuis le bloc compact du 15/10, 35 au téléphone depuis le
   19/10). Sélecteurs à deux classes : ils passent devant les
   hauteurs de l'ancienne carte posées par effets.css. */
.car-card.fx-squelette .fx-sq-photo { height: 196px; margin: 6px 6px 0; border-radius: calc(var(--radius) - 6px); }
.car-card.fx-squelette .fx-z-titre { height: 49px; }
.car-card.fx-squelette .fx-z-meta { height: 21px; }
.car-card.fx-squelette .fx-z-specs { height: 21px; border: 0; }
.car-card.fx-squelette .fx-z-badges { height: 26px; }
.car-card.fx-squelette .fx-z-prix { height: 73px; }
.car-card.fx-squelette .fx-z-verdict { height: 56px; margin: 0; border-radius: var(--radius-sm); }
@media (max-width: 767px) {
    .car-card.fx-squelette .fx-sq-photo { height: 188px; }
    .car-card.fx-squelette .fx-z-meta { height: 44px; }
}
/* Téléphone (19/10/2026) : montant héros sur une ligne (35 px), photo de 160 px, méta sur une ligne. */
@media (max-width: 600px) {
    .car-card.fx-squelette .fx-z-verdict { height: 35px; }
    .car-card.fx-squelette .fx-sq-photo { height: 160px; }
    .car-card.fx-squelette .fx-z-meta { height: 21px; }
}

.btn-sm { padding: 8px 14px; font-size: .8125rem; }
.calc-note.co2-found { color: var(--success); }

/* ==========================================================================
   BARRE DE DÉCISION (« L'instrument de verre », 14/10/2026)
   Les chiffres qui décident, collés SOUS l'îlot pendant le défilement : élément collant
   en verre (le flou est permis, il ne défile pas avec le contenu), rayon 24, chiffres
   en Geist tabulaire, verdict en pastille écrite. Plus de rail de 3 px. Les filets
   entre les cases sont des ombres d'1 px que le conteneur rogne : ils restent justes
   quel que soit le nombre de colonnes.
   ========================================================================== */
.decision-bar {
    position: sticky;
    top: var(--haut-collant);
    z-index: var(--z-collant);
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 1.25fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.2fr);
    gap: 0;
    margin: 0 0 20px;
    padding: 0;
    background: var(--bg-2); /* quasi opaque : les chiffres restent nets sur le contenu qui défile dessous */
    border: 1px solid var(--border);
    border-radius: var(--radius);
    overflow: hidden;
    clip-path: none;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06), var(--ombre-flottante);
}
.db-cell {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 4px;
    min-width: 0;
    min-height: 68px;
    padding: 10px 20px;
    background: none;
    border: 0;
    box-shadow: -1px 0 0 rgba(255, 255, 255, .07), 0 -1px 0 rgba(255, 255, 255, .07);
}
.decision-bar .db-label {
    margin: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.db-value {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px 8px;
    font-family: var(--font);
    font-size: 1.0625rem;
    font-weight: 500;
    line-height: 1.2;
    letter-spacing: -0.01em;
    color: var(--text-1);
    font-variant-numeric: tabular-nums;
}
.db-value small { font-size: .75rem; font-weight: 400; letter-spacing: 0; color: var(--text-3); }
.db-value b { font-size: 1.5rem; font-weight: 500; letter-spacing: -0.01em; }
.db-strong .db-value { font-size: 1.5rem; font-weight: 500; letter-spacing: -0.01em; }
.db-pending { font-family: var(--font); font-size: .8125rem; font-weight: 400; letter-spacing: 0; color: var(--text-3); }
/* Prix max borné au prix demandé (18/10/2026) : la mention passe sous le montant. */
.db-sous { display: block; margin-top: 2px; font-family: var(--font); font-size: .75rem; font-weight: 400; letter-spacing: 0; color: var(--text-3); }
/* Verdict écrit : ambre par défaut (« Négocier »), bleu clair si favorable, rouge sinon. */
.db-word {
    display: inline-flex;
    align-items: center;
    min-height: 24px;
    padding: 2px 10px;
    border-radius: var(--radius-xs);
    background: var(--warning);
    color: #1a1300;
    font-family: var(--font);
    font-size: .75rem;
    font-weight: 500;
    letter-spacing: 0;
}
.db-pos .db-word { background: var(--accent-strong); color: #04121f; }
.db-neg .db-word { background: var(--danger); color: #1a0200; }
/* Écart au marché : bleu clair s'il est favorable ; au-dessus de la cote, encre neutre
   (ce n'est pas une alerte, DESIGN.md « Ticket de calcul »). */
#db-market.db-pos .db-value { color: var(--accent-strong); }
#db-market.db-neg .db-value { color: var(--text-1); }
/* Écart hors norme (plus de GEM_MAX_RATIO sous la cote) : ambre, doublé de « à vérifier ». */
#db-market.db-suspect .db-value { color: var(--warning); }
.db-alerts.has-alert .db-label { color: var(--danger); }
/* Compteurs de signaux : pastilles écrites (« 1 alerte », « 2 points d'attention »). */
.db-alerts .db-value { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; }
.db-alerts .db-value b.db-crit,
.db-alerts .db-value b.db-warn {
    display: inline-flex;
    align-items: center;
    min-height: 26px;
    padding: 2px 10px;
    border-radius: var(--radius-xs);
    font-size: .8125rem;
    font-weight: 500;
    letter-spacing: 0;
    white-space: nowrap;
}
.db-crit { background: var(--danger); color: #1a0200; }
.db-warn { background: var(--warning); color: #1a1300; }

/* Cases verrouillées d'un visiteur : pilule de verre, cadenas, texte clair. */
#listing-content .decision-bar .db-gate {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 32px;
    padding: 4px 12px;
    background: var(--verre);
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-xs);
    color: var(--text-1);
    font-family: var(--font);
    font-size: .8125rem;
    font-weight: 500;
    letter-spacing: 0;
    cursor: pointer;
    transition: background-color var(--t), border-color var(--t), transform var(--t);
}
#listing-content .decision-bar .db-gate .ico { color: var(--accent-strong); }
#listing-content .decision-bar .db-gate:active { transform: scale(.98); }
@media (hover: hover) { #listing-content .decision-bar .db-gate:hover { background: rgba(255, 255, 255, .08); } }

@media (max-width: 1100px) {
    .decision-bar { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .decision-bar > .db-cell:last-child { grid-column: span 2; }
    .db-cell { min-height: 60px; padding: 10px 16px; }
}
@media print {
    .decision-bar { position: static; box-shadow: none; background: #fff; border-color: #ccc; }
    .db-cell { box-shadow: -1px 0 0 #ddd, 0 -1px 0 #ddd; }
}

/* Bandeau de décision : la jauge segmentée hérite de la couleur du verdict */
.db-cell.db-pos .gauge-seg { color: var(--go); }
.db-cell.db-neg .gauge-seg { color: var(--stop); }
.db-cell .gauge-seg { color: var(--warn); margin-left: 2px; }
.db-hors-malus { font-size: .75rem; color: var(--text-3); font-weight: 400; letter-spacing: 0; }

/* Analyse conservée : provenance et relance. L'utilisateur doit savoir qu'il
   relit un travail déjà payé, et pouvoir le refaire si le prix a bougé. */
.stored-note {
    display: flex;
    align-items: center;
    gap: 8px 10px;
    flex-wrap: wrap;
    min-height: 40px;
    margin: 0 0 20px;
    padding: 8px 16px;
    font-size: .8125rem;
    line-height: 1.45;
    color: var(--text-2);
    background: var(--verre);
    border: 1px solid var(--border);
    border-radius: var(--radius);
}
.stored-note svg { flex: 0 0 auto; color: var(--accent-strong); }
.stored-note.stale { color: var(--text-1); border-color: var(--warning-border); background: var(--warning-dim); }
.stored-note.stale svg { color: var(--warning); }
.stored-note span { flex: 1 1 220px; min-width: 0; }
.btn-link {
    background: none;
    border: 0;
    padding: 0;
    color: var(--accent-strong);
    font: inherit;
    font-size: .8125rem;
    text-decoration: underline;
    text-underline-offset: 3px;
    cursor: pointer;
    white-space: nowrap;
}
.btn-link:active { transform: translateY(1px); }

/* ===== Auth : formulaires sans onglet (mot de passe oublie, nouveau mot de passe) ===== */
/* Le titre laisse la place du rond de fermeture (40 px à 24 px du bord). */
.auth-title { font-size: 1.5rem; font-weight: 500; letter-spacing: -0.01em; margin: 6px 52px 10px 0; }
.auth-note { text-align: left; margin-bottom: 16px; padding: 0; font-size: .9375rem; color: var(--text-2); }
:root .auth-alt { display: block; width: 100%; min-height: 44px; margin-top: 8px; text-align: center; }
/* Bouton pleine largeur fléché : le libellé à gauche, la pastille au bord droit. */
:root .btn-auth-submit { justify-content: center; }

/* ===== Modale de saisie (App.prompt) : liste de choix =====
   Fenêtre en conteneur majeur (base.css), champ de 48 px, choix en pilules de verre
   pleine largeur, actions à droite (pleine largeur au téléphone). */
.app-prompt-box h2 { margin-right: 0; }
.app-prompt-box .section-note { text-align: left; padding: 0 0 16px; color: var(--text-2); font-size: .9375rem; }
:root .app-prompt-box .filter-group :is(input, textarea) { min-height: 48px; }
.prompt-options { display: flex; flex-direction: column; gap: 8px; }
:root .prompt-options .btn-secondary { width: 100%; text-align: left; justify-content: flex-start; white-space: normal; }
@media (max-width: 560px) {
    .app-prompt-box .modal-actions { flex-direction: column; }
    .app-prompt-box .modal-actions > * { width: 100%; }
}

/* Legende des badges de la recherche (2026-09-28) */
.badges-legende { margin: 14px 0 0; font-size: .8125rem; color: var(--text-2); }
.badges-legende summary { cursor: pointer; color: var(--text-2); min-height: 32px; display: inline-flex; align-items: center; }
.badges-legende dl { display: grid; grid-template-columns: max-content 1fr; gap: 6px 14px; margin: 10px 0 0; }
.badges-legende dt { font-weight: 500; color: var(--text-1); }
.badges-legende dd { margin: 0; }
@media (max-width: 560px) {
    .badges-legende dl { grid-template-columns: 1fr; gap: 2px; }
    .badges-legende dd { margin-bottom: 8px; }
}

/* ===== Écrans de vente, corrections de l'audit du 13/10 (M4, M6, M8, m1, m4) ===== */
/* Outils personnels de la barre (Mes recherches, Favoris, Alertes) : compte connecté
   seulement. html.est-connecte est posé par Billing.renderBadge. */
html:not(.est-connecte) .nav-perso { display: none; }
/* Découvrir : la recommandation demande un compte, dit avant le clic. */
.discover-compte { grid-column: 1 / -1; margin: 0; text-align: right; font-size: .8125rem; color: var(--text-2); }
html.est-connecte .discover-compte { display: none; }
@media (max-width: 720px) { .discover-compte { text-align: left; } }
/* Menu du compte : analyses offertes restantes d'un compte gratuit. */
.ud-info { margin: 0; padding: 8px 12px 6px; font-size: .8125rem; color: var(--text-2); }
/* Modale d'inscription : le bénéfice au-dessus du bouton, la mention légale dessous. */
.auth-benefice { margin: 4px 0 10px; font-size: .875rem; color: var(--text-2); text-align: center; }
.auth-legal { margin: 10px 0 0; font-size: .75rem; color: var(--text-3); text-align: center; line-height: 1.45; }
.auth-legal a { color: var(--text-2); text-decoration: underline; }

/* Résultat de recherche vide : les critères à relâcher, un bouton chacun (relance en un
   clic), et la version qui désigne en fait un modèle. */
.status-actions { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 6px; margin-top: 8px; }
.status-actions > span { color: var(--text-2); }
.status-actions .btn-sm { display: inline-flex; align-items: center; gap: 4px; }
.status-modele { margin: 8px 0 0; color: var(--text-2); display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 8px; }
/* Recherche d'un seul pays qui rend 1 à 4 annonces : la ligne sous le décompte et le
   bouton qui relance la même recherche sur l'Europe entière (search.js, aideUnPays). */
.status-pays { margin: 0 0 6px; color: var(--text-2); display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 8px; }

/* ===== Annonce qui n'est plus en ligne (fiche retirée, favoris « Retirée ») =====
   Bandeau NEUTRE : ce n'est pas une erreur, c'est l'état de l'annonce. L'information
   passe par le texte (étiquette écrite), jamais par la seule couleur. */
.retiree-banner {
    margin: 0 0 24px;
    padding: 20px 20px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--verre);
}
.retiree-banner p { margin: 10px 0 0; max-width: 72ch; font-size: .9375rem; line-height: 1.55; color: var(--text-1); }
.retiree-banner .retiree-date { font-family: var(--font-mono); font-size: .75rem; color: var(--text-3); }
/* État de l'annonce : pastille neutre écrite (ce n'est pas une erreur). */
.retiree-label {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 28px;
    padding: 4px 12px 4px 10px;
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-xs);
    background: var(--verre);
    font-family: var(--font);
    font-size: .8125rem;
    font-weight: 500;
    letter-spacing: 0;
    text-transform: none;
    color: var(--text-2);
}
.retiree-actions { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 24px; }
.retiree-actions .btn-primary,
.retiree-actions .btn-secondary { white-space: normal; height: auto; min-height: 44px; text-align: center; }
.retiree-price { color: var(--text-2); }
.retiree-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
    gap: 24px;
    margin-top: 24px;
}
/* Colonne simple, pas une grille : verdict et dossier portent des « span 2 » faits pour
   la grille de la fiche vivante, qui créaient ici une piste implicite (débordement). */
#retiree-analyses { display: flex; flex-direction: column; gap: 24px; margin-top: 24px; }
#retiree-analyses > * { min-width: 0; }
#retiree-analyses[hidden] { display: none; }

/* Page Favoris : annonces qui ne sont plus en ligne */
/* « L'instrument de verre » : bandeau de verre en pilule (rayon 24 au téléphone), et
   « Retirée » en pastille NEUTRE écrite, posée en bas à gauche de la photo (les actions
   occupent le haut). */
.retirees-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--s2) var(--s3);
    margin: 0 0 24px;
    padding: 6px 6px 6px 20px;
    border: 1px solid var(--border);
    border-radius: var(--radius-pill);
    background: var(--verre);
}
.retirees-bar-text { display: inline-flex; align-items: center; gap: 8px; font-size: .9375rem; color: var(--text-2); }
.retirees-bar .btn-sm { white-space: normal; height: auto; min-height: 44px; text-align: center; }
@media (max-width: 640px) {
    .retirees-bar { border-radius: var(--radius); padding: 14px; }
    .retirees-bar .btn-sm { width: 100%; }
}
/* Bloc replié sous la grille (depuis le 14/10/2026) : les annonces retirées ne se mêlent
   plus à celles qui s'achètent encore. */
.retirees-bloc { margin: 32px 0 0; border: 1px solid var(--border); border-radius: var(--radius); background: var(--verre); }
.retirees-bloc-tete {
    display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px;
    min-height: 56px; padding: 8px 8px 8px 20px; cursor: pointer; list-style: none;
}
.retirees-bloc-tete::-webkit-details-marker { display: none; }
/* Le « + » commun des blocs repliés (bordereau.css, details summary::after) faisait un
   troisième élément : la pilule « Afficher » tenait déjà ce rôle. */
.retirees-bloc > .retirees-bloc-tete::after { content: none; }
.retirees-bloc-voir {
    display: inline-flex; align-items: center; min-height: 40px; padding: 0 16px;
    border: 1px solid var(--border); border-radius: var(--radius-pill); font-size: .875rem; color: var(--text-1);
    transition: background var(--t);
}
.retirees-bloc[open] .retirees-bloc-voir { font-size: 0; }
.retirees-bloc[open] .retirees-bloc-voir::after { content: "Masquer"; font-size: .875rem; }
@media (hover: hover) { .retirees-bloc-tete:hover .retirees-bloc-voir { background: rgba(255, 255, 255, .06); } }
.retirees-bloc-actions {
    display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 16px;
    padding: 4px 20px 20px; border-top: 1px solid var(--border);
}
.retirees-bloc-actions p { flex: 1 1 280px; margin: 12px 0 0; font-size: .875rem; color: var(--text-3); }
.retirees-bloc-actions .btn-sm { margin-top: 12px; white-space: normal; height: auto; min-height: 44px; }
#favorites-retirees-grid { padding: 8px 20px 24px; }
@media (max-width: 640px) {
    .retirees-bloc-actions .btn-sm { width: 100%; }
    #favorites-retirees-grid { padding: 8px 12px 20px; }
}
.car-card.is-retiree .car-card-img,
.car-card.is-retiree .car-card-img-empty { opacity: .4; filter: grayscale(1); }
.car-card.is-retiree .price-de { color: var(--text-3); }
.card-retiree-tag {
    position: absolute;
    left: 10px;
    bottom: 10px;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    min-height: 28px;
    padding: 0 12px;
    border-radius: var(--radius-pill);
    background: rgba(8, 10, 14, .82);
    border: 1px solid var(--border-strong);
    font-size: .8125rem;
    font-weight: 500;
    color: var(--text-1);
}

/* Alerte : carrosserie et places côte à côte (18/10/2026), la grille des prix en a quatre. */
#alert-form .alert-grille-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }

/* ==========================================================================
   PORTE UNIQUE DE LA FICHE D'UN VISITEUR (listing.js, porteFicheHtml, 20/10/2026)
   Email et mot de passe sur place, sous la barre de décision : la seule porte principale
   de la fiche. Les blocs verrouillés y renvoient (Listing.allerPorte). Double cadre de
   DESIGN.md, texte à gauche et formulaire à droite en bureau, empilés au téléphone.
   ========================================================================== */
.porte-fiche {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
    align-items: center;
    gap: 20px 32px;
    margin: 0 0 24px;
    padding: 28px 28px;
    background: rgba(0, 87, 217, .1), var(--bg-1);
    border-radius: var(--radius);
    box-shadow: var(--coeur-lueur), var(--coque);
}
.porte-fiche::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    box-shadow: 0 0 0 2px var(--accent-strong);
    opacity: 0;
    pointer-events: none;
}
.porte-fiche.porte-appel::after { animation: porte-appel 1.6s var(--ressort); }
@keyframes porte-appel { 0%, 100% { opacity: 0; } 25% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .porte-fiche.porte-appel::after { animation: none; } }

.porte-fiche-badge {
    display: block;
    margin-bottom: 8px;
    font-size: .875rem;
    color: var(--text-3);
}
.porte-fiche-texte h2 {
    margin: 0 0 8px;
    font-size: 1.5rem;
    font-weight: 500;
    letter-spacing: -0.01em;
    line-height: 1.2;
    color: var(--text-1);
    text-wrap: balance;
}
.porte-fiche-texte p { margin: 0; font-size: .9375rem; line-height: 1.55; color: var(--text-2); max-width: 48ch; }
.porte-fiche-texte p strong { color: var(--text-1); font-weight: 500; }

/* Une seule case depuis le 23/10/2026 (adresse seule, plus de mot de passe). */
.porte-fiche-form { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; }
.porte-fiche-champ { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.porte-fiche-champ > span { font-size: .8125rem; font-weight: 500; color: var(--text-2); }
:root .porte-fiche-champ input {
    width: 100%;
    min-height: 48px;
    padding: 0 14px;
    background-color: var(--bg-inset);
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-sm);
    color: var(--text-1);
    font-family: var(--font);
    font-size: .9375rem;
}
:root .porte-fiche-btn { grid-column: 1 / -1; justify-content: space-between; min-height: 52px; font-size: 1rem; }
.porte-fiche-btn[aria-busy="true"] { opacity: .6; cursor: progress; }
.porte-fiche-erreur { grid-column: 1 / -1; margin: 0; font-size: .875rem; line-height: 1.45; color: var(--danger); }
.porte-fiche-legal { grid-column: 1 / -1; margin: 0; font-size: .75rem; line-height: 1.45; color: var(--text-3); }
.porte-fiche-legal a { color: var(--text-2); text-decoration: underline; }
:root .porte-fiche-lien {
    display: inline;
    min-height: 0;
    padding: 0;
    background: none;
    border: 0;
    color: var(--accent-strong);
    font: inherit;
    font-weight: 500;
    text-decoration: underline;
    text-underline-offset: 2px;
    cursor: pointer;
}

/* Connexion sans mot de passe (23/10/2026) : bouton Google (charte de Google : fond clair,
   logo d'origine, « Continuer avec Google »), séparateur « ou », message d'information
   (lien de connexion envoyé : bleu, ce n'est pas une faute). */
:root .btn-google {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    min-height: 48px;
    padding: 0 20px;
    background: #fff;
    color: #1f1f1f;
    border: 1px solid #dadce0;
    border-radius: var(--radius-pill);
    font-family: var(--font);
    font-size: .9375rem;
    font-weight: 500;
    cursor: pointer;
    transition: transform .2s var(--ressort), box-shadow .2s var(--ressort);
}
:root .btn-google:hover { box-shadow: 0 0 0 4px rgba(255, 255, 255, .08); }
:root .btn-google:active:not(:disabled) { transform: scale(.98); }
:root .btn-google:disabled { opacity: .6; cursor: progress; }
.btn-google svg { flex: none; }
.auth-ou { display: flex; align-items: center; gap: 12px; margin: 14px 0; color: var(--text-3); font-size: .8125rem; }
.auth-ou::before, .auth-ou::after { content: ''; flex: 1; height: 1px; background: var(--border); }
.porte-fiche-form .auth-ou { margin: 2px 0; }
.auth-error.is-info { background: var(--accent-dim); border-color: var(--accent-border); }
.porte-fiche-erreur.is-info { color: var(--accent-strong); }
.auth-form .auth-mdp[hidden], .auth-form .auth-alt[hidden] { display: none; }

@media (max-width: 1023px) {
    .porte-fiche { grid-template-columns: minmax(0, 1fr); padding: 24px 20px; }
}
@media (max-width: 600px) {
    .porte-fiche { margin-bottom: 20px; padding: 20px 16px; gap: 16px; }
    .porte-fiche-texte h2 { font-size: 1.25rem; }
    .porte-fiche-form { grid-template-columns: minmax(0, 1fr); gap: 10px; }
}

/* ==========================================================================
   ALERTE PÉPITES EN UN CLIC (listing.js, alertePepitesHtml, 23/10/2026)
   Carte de la fiche, juste après le bloc Marché : double cadre de DESIGN.md, pastille mono,
   titre, puis selon l'état le formulaire du visiteur (Google ou adresse seule), le bouton
   d'un compte, ou l'état (activée, déjà suivie, limite du compte gratuit). Aucune nouvelle
   couleur : bleu clair = favorable, toujours doublé d'un texte. Au téléphone, champ et
   bouton empilés, pleine largeur.
   ========================================================================== */
.alerte-pepites {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 24px 24px;
    background: var(--bg-1);
    border-radius: var(--radius);
    box-shadow: var(--coeur-lueur), var(--coque);
}
.alerte-pepites-badge {
    align-self: flex-start;
    display: inline-flex;
    align-items: center;
    padding: 2px 10px;
    border-radius: var(--radius-xs);
    background: rgba(124, 192, 240, .16);
    border: 1px solid rgba(124, 192, 240, .4);
    color: var(--accent-strong);
    font-family: var(--font);
    font-size: .8125rem;
    font-weight: 500;
}
:root .alerte-pepites h3 {
    margin: 0;
    font-size: 1.25rem;
    font-weight: 500;
    letter-spacing: -0.01em;
    line-height: 1.25;
    color: var(--text-1);
    text-wrap: balance;
}
.alerte-pepites-annees { white-space: nowrap; }   /* plage d'années insécable (23/10/2026) */
.alerte-pepites-texte { margin: 0; font-size: .9375rem; line-height: 1.55; color: var(--text-2); max-width: 60ch; }
.alerte-pepites-form { display: flex; flex-direction: column; gap: 10px; margin-top: 4px; }
.alerte-pepites-form .auth-ou { margin: 2px 0; }
.alerte-pepites-ligne { display: flex; align-items: stretch; gap: 10px; }
.alerte-pepites-champ { flex: 1; min-width: 0; display: flex; }
/* Libellé lu par les lecteurs d'écran, masqué à l'œil (le champ est seul sur sa ligne). */
.alerte-pepites-champ > span {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
}
:root .alerte-pepites-champ input {
    width: 100%;
    min-height: 48px;
    padding: 0 14px;
    background-color: var(--bg-inset);
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-sm);
    color: var(--text-1);
    font-family: var(--font);
    font-size: .9375rem;
}
:root .alerte-pepites-btn { flex: none; min-height: 48px; justify-content: space-between; white-space: nowrap; }
.alerte-pepites-btn[aria-busy="true"] { opacity: .6; cursor: progress; }
.alerte-pepites-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 4px; }
.alerte-pepites-erreur { margin: 0; font-size: .875rem; line-height: 1.45; color: var(--danger); }
.alerte-pepites-erreur.is-info { color: var(--accent-strong); }
.alerte-pepites-legal { margin: 0; font-size: .75rem; line-height: 1.45; color: var(--text-3); }
.alerte-pepites-legal a { color: var(--text-2); text-decoration: underline; }
.alerte-pepites-etat {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 10px;
    margin: 4px 0 0;
    font-size: .9375rem;
    line-height: 1.5;
    color: var(--text-1);
}
.alerte-pepites-etat.is-ok svg { flex: none; color: var(--accent-strong); }
.alerte-pepites-lien { color: var(--accent-strong); font-weight: 500; text-decoration: underline; text-underline-offset: 2px; }

@media (max-width: 600px) {
    .alerte-pepites { padding: 20px 16px; }
    .alerte-pepites-ligne { flex-direction: column; }
    :root .alerte-pepites-btn { width: 100%; }
    .alerte-pepites-actions { flex-direction: column; }
}

/* Faute de frappe dans l'adresse (auth.js, Auth.suggestionAdresse, 23/10/2026) :
   « Vouliez-vous dire … ? » sous le champ, jamais de correction automatique. */
.adresse-suggestion { margin: 6px 0 0; font-size: .875rem; line-height: 1.45; color: var(--text-2); }
:root .adresse-suggestion button {
    display: inline;
    min-height: 0;
    padding: 0;
    background: none;
    border: 0;
    color: var(--accent-strong);
    font: inherit;
    font-weight: 500;
    text-decoration: underline;
    text-underline-offset: 2px;
    cursor: pointer;
}

/* ==========================================================================
   CE QUE DIT LE VENDEUR (listing.js, vendeurDitHtml, 24/10/2026)
   Bloc pleine largeur sous les photos, avant la grille à deux colonnes. Double cadre et
   titre hérités de #listing-content .listing-section. Points clés à pastille de 6 px ;
   un point « À vérifier » porte le mot ET la pastille ambre (jamais la couleur seule).
   Repli : traduction automatique limitée à 8 lignes, « Lire la suite ».
   ========================================================================== */
#listing-content .vendeur-dit { margin: 0 0 24px; }
#listing-content .vendeur-dit > h2 { margin-bottom: 6px; }
.vendeur-source { margin: 0 0 16px; font-size: .8125rem; line-height: 1.45; color: var(--text-3); text-wrap: pretty; }
.vendeur-squelette { padding-top: 4px; }
.vendeur-squelette .skeleton-line:nth-child(1) { width: 92%; }
.vendeur-squelette .skeleton-line:nth-child(2) { width: 78%; }
.vendeur-squelette .skeleton-line:nth-child(3) { width: 64%; margin-bottom: 0; }
.vendeur-points {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
}
.vendeur-points li {
    position: relative;
    padding-left: 20px;
    font-size: .9375rem;
    font-weight: 400;
    line-height: 1.5;
    color: var(--text-1);
    overflow-wrap: anywhere;
}
/* Pastille centrée sur la première ligne : (15 px x 1,5 - 6 px) / 2. */
.vendeur-points li::before {
    content: '';
    position: absolute;
    left: 2px;
    top: calc((15px * 1.5 - 6px) / 2);
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--text-3);
}
.vendeur-points li.is-attention::before { background: var(--warning); }
.vendeur-a-verifier {
    margin-right: 4px;
    font-family: var(--font);
    font-size: .8125rem;
    font-weight: 500;
    color: var(--warning);
    white-space: nowrap;
}
.vendeur-conditions { margin: 16px 0 0; font-size: .875rem; line-height: 1.55; color: var(--text-2); overflow-wrap: anywhere; }
.vendeur-etiquette {
    font-family: var(--font);
    font-size: .8125rem;
    font-weight: 500;
    color: var(--text-3);
}
.vendeur-vide { margin: 0; font-size: .9375rem; line-height: 1.5; color: var(--text-2); }
.vendeur-traduction {
    max-width: 72ch;
    margin: 0;
    font-size: .9375rem;
    line-height: 1.6;
    color: var(--text-2);
    overflow-wrap: anywhere;
    display: -webkit-box;
    -webkit-line-clamp: 8;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.vendeur-traduction.is-ouvert { display: block; -webkit-line-clamp: unset; overflow: visible; }
:root .vendeur-suite {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    margin-top: 2px;
    padding: 0;
    background: none;
    border: 0;
    color: var(--accent-strong);
    font: inherit;
    font-size: .875rem;
    font-weight: 500;
    text-decoration: underline;
    text-underline-offset: 3px;
    cursor: pointer;
}
.vendeur-suite[hidden] { display: none; }
.vendeur-original { margin-top: 16px; }
:root .vendeur-original > summary {
    justify-content: space-between;
    min-height: 44px;
    padding: 4px 0;
    font-size: .8125rem;
    line-height: 1.4;
    color: var(--text-3);
    border-radius: 0;
}
@media (hover: hover) { :root .vendeur-original > summary:hover { background: none; color: var(--text-2); } }
.vendeur-original-texte {
    max-width: 72ch;
    margin: 12px 0 0;
    font-size: .875rem;
    line-height: 1.6;
    color: var(--text-2);
    overflow-wrap: anywhere;
}

@media (max-width: 600px) {
    .vendeur-points li { padding-left: 16px; }
    .vendeur-points li::before { left: 1px; }
}

/* Premier écran de la fiche : photos et porte pour un visiteur, photos et verdict pour un
   compte. Au téléphone, le DOM place le verdict avant les photos, la porte après elles. */
.fiche-duo { margin: 0 0 24px; }
.fiche-duo .porte-fiche { margin: 0; }
.fiche-duo > .verdict-card { margin: 0; }
.fiche-duo .pro-decision {
    margin-top: 20px;
    padding-top: 20px;
    border-top: 1px solid var(--border);
}
.pro-decision-tete { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.pro-decision-tete h3 { margin: 2px 0 0; font-size: 1.0625rem; line-height: 1.3; }
.pro-decision-label { color: var(--text-3); font-size: .75rem; }
.pro-decision-lien { flex: none; min-height: 44px; color: var(--accent-strong); font-size: .8125rem; line-height: 44px; }
.pro-decision-note { margin: 6px 0 0; color: var(--text-2); font-size: .8125rem; line-height: 1.5; }
:root .pro-decote { margin-top: 10px; }
:root .pro-decote > summary { min-height: 44px; padding: 6px 0; color: var(--accent-strong); font-size: .875rem; }
.pro-decote-form { padding: 8px 0 2px; }
.pro-decote-form label { display: block; margin-bottom: 6px; color: var(--text-2); font-size: .8125rem; }
.pro-decote-ligne { display: flex; align-items: center; gap: 8px; }
.pro-decote-ligne input { width: 150px; min-height: 44px; font-size: 16px; }
.pro-decote-resultat { margin: 10px 0 0; color: var(--text-1); font-weight: 500; }
.pro-decote-objectif { margin: 4px 0 0; color: var(--text-2); font-size: .8125rem; }
@media (max-width: 1023px) {
    .fiche-duo { display: flex; flex-direction: column; gap: 24px; }
    .fiche-duo > .verdict-card { width: 100%; }
}
@media (max-width: 600px) {
    .pro-decision-tete { flex-direction: column; gap: 0; }
    .pro-decision-lien { line-height: 1.4; }
}
@media (min-width: 1024px) {
    .fiche-duo {
        display: grid;
        grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr);
        gap: 20px;
        align-items: stretch;
    }
    .fiche-duo-photos { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
    .fiche-duo .listing-gallery { margin: 0; flex: 1 1 auto; height: auto; min-height: 340px; }
    /* Le détail du verdict peut devenir très long : il ne doit jamais étirer la galerie. */
    .fiche-duo:has(> .verdict-card) { align-items: start; }
    .fiche-duo:has(> .verdict-card) .listing-gallery {
        flex: 0 0 auto;
        height: clamp(280px, 34vw, 460px);
        min-height: 0;
    }
    .fiche-duo .listing-thumbs { margin: 0; }
    .fiche-duo .porte-fiche { grid-template-columns: minmax(0, 1fr); align-content: center; gap: 20px; padding: 24px; }
    .fiche-duo .porte-fiche-texte h2 { font-size: 1.5rem; }
}
@media (max-width: 768px) {
    /* La photo principale seule, le bouton « +N photos » posé dessus : le formulaire vient
       juste après, sans la rangée de vignettes entre les deux. */
    .fiche-duo .listing-gallery > img:not(.listing-main-photo),
    .fiche-duo .listing-thumbs { display: none; }
    #listing-content .fiche-duo .listing-gallery { margin-bottom: 16px; }
}

/* Barre de décision du visiteur : trois cases chiffrées, aucune case vide. */
.decision-bar.db-trois { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1.2fr) minmax(0, 1fr); }
@media (min-width: 769px) and (max-width: 1100px) {
    .decision-bar.db-trois > .db-cell:last-child { grid-column: auto; }
}

/* Ce qu'un compte gratuit ouvre, en une ligne qui ramène à la porte (remplace les cartes
   verrouillées). La carte du verdict qui ne contiendrait que cette ligne disparaît : la
   porte, en haut, porte déjà cette promesse. */
#listing-content .gate-ligne {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 4px 12px;
    width: 100%;
    min-height: 44px;
    margin: 8px 0 0;
    padding: 10px 14px;
    background: rgba(255, 255, 255, .03);
    border: 1px solid var(--border);
    border-radius: 14px;
    color: var(--text-2);
    font: inherit;
    font-size: .875rem;
    text-align: left;
    cursor: pointer;
    transition: background var(--t), transform var(--t);
}
#listing-content .gate-ligne-titre { display: inline-flex; align-items: center; gap: 8px; color: var(--text-1); font-weight: 500; }
#listing-content .gate-ligne-titre .ico { color: var(--accent-strong); }
#listing-content .gate-ligne-action { color: var(--accent-strong); font-weight: 500; white-space: nowrap; }
#listing-content .gate-ligne:active { transform: scale(.99); }
@media (hover: hover) { #listing-content .gate-ligne:hover { background: rgba(255, 255, 255, .07); } }
#listing-content .verdict-card:has(> #listing-ai-analysis > .gate-ligne:only-child) { display: none; }
#listing-content .market-visiteur { margin: 0; font-size: .9375rem; line-height: 1.55; color: var(--text-2); }

/* Blocs repliés par défaut (24/10/2026, Charles : « trop gros, garder l'info principale ») :
   coût d'import, marché, conversation, feuille de route, vendeur, alerte pépites, détail du
   verdict. Le résumé porte le chiffre ou l'état utile. */
#listing-content .ticket-calc .repli-resume { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
#listing-content :is(.resume-ticket, #resume-marche) b { color: var(--text-1); font-weight: 500; }
#listing-content .ticket-calc .ticket-etat { margin: 0; }
#listing-content .verdict-detail { margin-top: 16px; }
#listing-content .fiche-verdict-detail { margin: 0 0 24px; scroll-margin-top: calc(var(--haut-collant) + 16px); }
#listing-content .fiche-verdict-detail > .verdict-detail { margin-top: 0; }
#listing-content .verdict-detail .repli-titre { font-size: 1rem; }
#listing-content .rm-intro { margin: 0 0 14px; }
.vendeur-plus { margin-top: 4px; }
:root .vendeur-plus > summary {
    min-height: 44px;
    padding: 4px 0;
    font-size: .875rem;
    font-weight: 500;
    color: var(--accent-strong);
    border-radius: 0;
}
@media (hover: hover) { :root .vendeur-plus > summary:hover { background: none; color: var(--text-1); } }
.vendeur-plus > .vendeur-points { margin-top: 4px; }

/* Cartes repliées, finition (24/10/2026, Charles : « les rendre plus belles, pliées et
   dépliées »). Toute la carte est la zone de clic ; une pastille d'icône en tête ; au
   survol l'anneau de verre s'éclaire ; ouverte, l'anneau passe au bleu, un filet sépare
   l'en-tête du contenu, qui entre en fondu. La hauteur s'anime là où le navigateur sait
   interpoler « auto » (interpolate-size) ; ailleurs le bloc s'ouvre d'un coup. */
#listing-content :is(.listing-section, .alerte-pepites):has(> details.repli) {
    padding: 0;
    transition: box-shadow var(--t);
}
#listing-content :is(.listing-section, .alerte-pepites) > details.repli > summary {
    min-height: 76px;
    padding: 20px 68px 20px 20px;
    border-radius: inherit;
    transition: background-color var(--t);
}
#listing-content :is(.listing-section, .alerte-pepites) > details.repli > summary::after { right: 20px; }
#listing-content :is(.listing-section, .alerte-pepites) > details.repli > .repli-corps { padding: 20px 20px 24px; }
#listing-content :is(.listing-section, .alerte-pepites) > details.repli[open] > summary {
    margin-bottom: 0;
    border-bottom: 1px solid var(--border);
    border-radius: var(--radius) var(--radius) 0 0;
}
#listing-content details.repli > summary:has(> .repli-icone) {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    column-gap: 14px;
    row-gap: 4px;
}
#listing-content details.repli > summary > .repli-icone {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    color: var(--text-3);
    transition: color var(--t);
}
#listing-content details.repli > summary > :is(.repli-titre, .repli-resume) { grid-column: 2; min-width: 0; }
.repli-icone {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 12px;
    background: rgba(255, 255, 255, .05);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .09);
    color: var(--text-2);
    transition: background-color var(--t), color var(--t), box-shadow var(--t);
}
@media (hover: hover) {
    #listing-content :is(.listing-section, .alerte-pepites):not(.repli-groupe > *):has(> details.repli > summary:hover) {
        box-shadow: var(--coeur-lueur), 0 0 0 var(--anneau) rgba(255, 255, 255, .05), 0 0 0 var(--anneau-filet) rgba(255, 255, 255, .16);
    }
    #listing-content details.repli > summary:hover { background-color: rgba(255, 255, 255, .025); }
    #listing-content details.repli > summary:hover > .repli-icone { color: var(--text-1); }
}
#listing-content :is(.listing-section, .alerte-pepites):not(.repli-groupe > *):has(> details.repli[open]) {
    box-shadow: var(--coeur-lueur), 0 0 0 var(--anneau) rgba(0, 87, 217, .09), 0 0 0 var(--anneau-filet) rgba(124, 192, 240, .24);
}
#listing-content details.repli[open] > summary > .repli-icone {
    color: var(--accent-strong);
    background: var(--accent-dim);
    box-shadow: inset 0 0 0 1px var(--accent-border);
}
#listing-content details.repli[open] > .repli-corps { animation: repli-entree .42s var(--ressort) both; }
@keyframes repli-entree {
    from { opacity: 0; transform: translateY(-6px); }
    to { opacity: 1; transform: none; }
}
@supports (interpolate-size: allow-keywords) {
    #listing-content details.repli { interpolate-size: allow-keywords; }
    #listing-content details.repli::details-content {
        block-size: 0;
        overflow: clip;
        transition: block-size 240ms var(--ressort), content-visibility 240ms allow-discrete;
    }
    #listing-content details.repli[open]::details-content { block-size: auto; }
}
#listing-content .ticket-calc .repli-corps > :is(.calc-note, .note-estimation) { margin-top: 12px; }
/* Détail du verdict, replié DANS la carte : pas de pastille, un filet au-dessus. */
#listing-content .verdict-detail { padding-top: 14px; border-top: 1px solid var(--border); }
@media (max-width: 600px) {
    #listing-content :is(.listing-section, .alerte-pepites) > details.repli > summary { min-height: 68px; padding: 14px 60px 14px 16px; }
    #listing-content :is(.listing-section, .alerte-pepites) > details.repli > summary::after { right: 16px; }
    #listing-content :is(.listing-section, .alerte-pepites) > details.repli > .repli-corps { padding: 16px 16px 20px; }
    .repli-icone { width: 36px; height: 36px; border-radius: 10px; }
    #listing-content details.repli > summary:has(> .repli-icone) { column-gap: 12px; }
}
@media (prefers-reduced-motion: reduce) {
    #listing-content details.repli[open] > .repli-corps { animation: none; }
    #listing-content details.repli::details-content { transition: none; }
}
/* Petits téléphones : la pastille d'icône coûtait 48 px de largeur et faisait passer les
   titres sur trois lignes. Le titre et son résumé reprennent toute la place. */
@media (max-width: 480px) {
    #listing-content details.repli > summary:has(> .repli-icone) { display: flex; flex-direction: column; align-items: flex-start; }
    #listing-content details.repli > summary > .repli-icone { display: none; }
    #listing-content :is(.listing-section, .alerte-pepites) > details.repli > summary { padding-right: 56px; }
}

/* Groupes de blocs repliés (04/11/2026, Charles : « trop de boutons partout ») : vendeur,
   caractéristiques, équipements et coût de possession dans une carte ; concurrentes, alerte
   pépites, conversation et feuille de route dans « Aller plus loin » (Listing.repliGroupeHtml).
   UNE plaque à double cadre, une ligne par bloc séparée par un filet ; chaque ligne garde son
   titre, son résumé et son icône. Chevron plus petit, SANS pastille, toujours écrit : gris
   au repos, clair au survol, bleu clair ouvert. L'anneau de la plaque suit (survol, ouverte) ;
   celui des lignes est retiré plus haut (:not(.repli-groupe > *)). Placé APRÈS les règles des
   cartes repliées : à spécificité égale, ces règles-ci gagnent, téléphone compris. */
#listing-content div.listing-section.repli-groupe { padding: 0; transition: box-shadow var(--t); }
#listing-content .repli-groupe-titre {
    margin: 0;
    padding: 20px 20px 2px;
    font-family: var(--font);
    font-size: .8125rem;
    font-weight: 500;
    line-height: 1.4;
    color: var(--text-3);
}
#listing-content .repli-groupe > :is(.listing-section, .alerte-pepites):is(div, section) {
    padding: 0;
    background: none;
    border-top: 1px solid var(--border);
    border-radius: 0;
    box-shadow: none;
}
#listing-content .repli-groupe > :is(.listing-section, .alerte-pepites):is(div, section):is(:first-child, .repli-groupe-titre + *) { border-top: 0; }
#listing-content .repli-groupe > :first-child:not(.repli-groupe-titre) { border-radius: var(--radius) var(--radius) 0 0; }
#listing-content .repli-groupe > :last-child:is(div, section) { border-radius: 0 0 var(--radius) var(--radius); }
#listing-content .repli-groupe > * > details.repli > summary { min-height: 64px; padding: 12px 52px 12px 20px; }
#listing-content .repli-groupe > * > details.repli[open] > summary { border-radius: 0; }
#listing-content .repli-groupe > :first-child > details.repli[open] > summary { border-radius: var(--radius) var(--radius) 0 0; }
#listing-content .repli-groupe > * > details.repli > summary::after {
    right: 20px;
    width: 20px;
    height: 20px;
    margin: -10px 0 0;
    border-radius: 0;
    background: var(--text-2);
    box-shadow: none;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 6l4 4 4-4'/%3E%3C/svg%3E") center / 16px 16px no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 6l4 4 4-4'/%3E%3C/svg%3E") center / 16px 16px no-repeat;
}
@media (hover: hover) {
    #listing-content .repli-groupe > * > details.repli > summary:hover::after { background-color: var(--text-1); }
    #listing-content .repli-groupe:has(> * > details.repli > summary:hover) {
        box-shadow: var(--coeur-lueur), 0 0 0 var(--anneau) rgba(255, 255, 255, .05), 0 0 0 var(--anneau-filet) rgba(255, 255, 255, .16);
    }
}
#listing-content .repli-groupe:has(> * > details.repli[open]) {
    box-shadow: var(--coeur-lueur), 0 0 0 var(--anneau) rgba(0, 87, 217, .09), 0 0 0 var(--anneau-filet) rgba(124, 192, 240, .24);
}
@media (max-width: 600px) {
    #listing-content .repli-groupe-titre { padding: 16px 16px 2px; }
    #listing-content .repli-groupe > * > details.repli > summary { min-height: 60px; padding: 12px 44px 12px 16px; }
    #listing-content .repli-groupe > * > details.repli > summary::after { right: 16px; }
}

/* ==========================================================================
   RÉSULTATS DE RECHERCHE : APERÇU SANS COTE ET ALERTE PÉPITES (search.js, 26/10/2026)
   Aperçu : les cartes s'affichent avant la cote française ; l'emplacement du potentiel
   pulse à la hauteur du bloc compact (56 px, 35 au téléphone) jusqu'à la page cotée.
   Alerte : carte de la fiche (.alerte-pepites) posée pleine largeur dans la grille, après
   la 6e annonce ; formulaire et états limités en largeur sur ordinateur.
   ========================================================================== */
.car-card .card-verdict-attente { height: 56px; margin: 0; border-radius: var(--radius-sm); }
.sort-btn.sort-ai[aria-disabled="true"] { opacity: .5; cursor: not-allowed; }   /* analyse du lot : après la cote */
.results-grid > .alerte-resultats { grid-column: 1 / -1; }
.alerte-resultats > :is(.alerte-pepites-form, .alerte-pepites-actions, .alerte-pepites-etat, .alerte-pepites-erreur) { max-width: 640px; }
@media (max-width: 600px) {
    .car-card .card-verdict-attente { height: 35px; }
}

/* ===== Tarifs d'un compte pro (03/11/2026, includes/vues/tarifs-pro.php) =====
   html.est-pro.est-connecte : la formule Pro seule ; le reste de la page Tarifs (gratuit,
   Particulier, dossier, Veille, FAQ des particuliers) est masqué. Un seul appel visible,
   choisi par Billing.majTarifsPro(). */
#page-pricing > .tarifs-pro { display: none; }
html.est-pro.est-connecte #page-pricing > .tarifs-pro { display: block; }
html.est-pro.est-connecte #page-pricing > :not(.tarifs-pro) { display: none; }
.tarifs-pro .tp-titre {
    margin: 20px 0 0;
    font-size: clamp(2.25rem, 4.2vw, 3.5rem);
    font-weight: 500;
    line-height: 1.02;
    letter-spacing: -0.03em;
    text-wrap: balance;
    overflow-wrap: anywhere;
}
.tp-leger { font-weight: 400; color: var(--text-2); }
.tp-grille {
    display: grid;
    grid-template-columns: minmax(0, 20rem) minmax(0, 1fr);
    gap: 40px;
    align-items: start;
    margin-top: 40px;
}
.tp-offre {
    padding: 28px 24px 24px;
    border-radius: var(--radius-lg);
    background: var(--bg-1);
    box-shadow: var(--coeur-lueur), var(--coque);
}
.tp-prix { margin: 0; display: flex; align-items: baseline; flex-wrap: wrap; gap: 10px; }
.tp-prix strong { font-size: clamp(2.75rem, 5vw, 3.5rem); line-height: .9; font-weight: 500; letter-spacing: -0.03em; color: var(--text-1); }
.tp-prix span { font-size: 1rem; color: var(--text-2); }
.tp-prix-sub { margin: 10px 0 0; font-size: .875rem; color: var(--text-3); }
.tp-etat { margin-top: 24px; }
.tp-etat[hidden] { display: none; }
.tp-etat .btn-primary { width: 100%; justify-content: space-between; white-space: nowrap; }
.tp-note { margin: 12px 0 0; font-size: .875rem; line-height: 1.5; color: var(--text-3); }
.tp-annuel { margin: 16px 0 0; padding-top: 14px; border-top: 1px solid var(--border); font-size: .875rem; color: var(--text-2); }
.tp-lien {
    padding: 0;
    border: 0;
    background: none;
    font: inherit;
    color: var(--accent-strong);
    text-decoration: underline;
    text-underline-offset: 3px;
    cursor: pointer;
}
/* .pricing-btn (câblage de Billing.init) met les boutons en pleine largeur : pas les liens de texte. */
.tp-lien.pricing-btn { display: inline; width: auto; margin: 0; }
.tp-lien:focus-visible { outline: 2px solid var(--accent-strong); outline-offset: 2px; border-radius: 4px; }
.tp-inclus { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 32px; }
.tp-inclus h3 {
    margin: 0;
    font-family: var(--font);
    font-size: .8125rem;
    font-weight: 500;
    color: var(--text-3);
}
.tp-inclus ul { margin: 12px 0 0; padding: 0; list-style: none; display: grid; gap: 10px; }
.tp-inclus li { position: relative; padding-left: 20px; font-size: .9375rem; line-height: 1.5; color: var(--text-2); }
.tp-inclus li::before {
    content: "";
    position: absolute;
    left: 0;
    top: .6em;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--accent-strong);
}
.tp-inclus a { color: var(--accent-strong); text-decoration: underline; text-underline-offset: 3px; }
.tp-max { margin: 40px 0 0; font-size: .9375rem; line-height: 1.6; color: var(--text-2); }
.tp-faq { margin-top: 32px; display: grid; gap: 4px; max-width: 46rem; }
.tp-faq details { border-bottom: 1px solid var(--border); }
.tp-faq summary { min-height: 52px; padding: 14px 0; font-weight: 500; color: var(--text-1); cursor: pointer; }
.tp-faq details p { margin: 0 0 16px; font-size: .9375rem; line-height: 1.6; color: var(--text-2); }
.tp-liens { margin: 32px 0 0; font-size: .9375rem; color: var(--text-3); }
.tp-liens a { color: var(--accent-strong); text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 899px) {
    .tp-grille { grid-template-columns: minmax(0, 1fr); gap: 32px; }
}
@media (max-width: 599px) {
    .tp-inclus { grid-template-columns: minmax(0, 1fr); gap: 24px; }
    .tp-offre { padding: 24px 16px 20px; }
}

/* Frais du compte dans le détail du prix final (04/11/2026) : transport du pays, quitus,
   contrôle technique et certificat de conformité modifiables par un compte connecté,
   enregistrés sur le compte (Listing.fraisLigneHtml). Même champ que le calcul pro. */
.ticket-calc .calc-frais { align-items: center; }
.ticket-calc .calc-frais label { cursor: pointer; }
.calc-frais-etat { color: var(--text-3); }
.calc-frais.is-perso .calc-frais-etat { color: var(--accent-strong); }
.calc-frais-champ { display: inline-flex; align-items: center; white-space: nowrap; font-variant-numeric: tabular-nums; }
.calc-frais-champ input {
    width: 6.5em; min-height: 36px; padding: 0 10px; border-radius: 10px; border: 1px solid var(--border-strong);
    background: rgba(0, 0, 0, .3); color: var(--text); font: inherit; font-variant-numeric: tabular-nums; text-align: right;
}
.calc-frais.is-perso .calc-frais-champ input { border-color: rgba(124, 192, 240, .45); }
.calc-frais-champ input:focus-visible { outline: 2px solid var(--accent-strong); outline-offset: 1px; }
.calc-frais-note { margin-top: 10px; }
@media (pointer: coarse) { .calc-frais-champ input { min-height: 44px; } }

/* ===== Comparer avec une annonce concurrente (fiche, 04/11/2026, listing.js) =====
   Boîte de collage habituelle posée À PLAT dans la carte repliée, puis conclusion en clair,
   tableau partagé (CompareTable) et actions par annonce. Bleu = moins cher, rouge = plus cher,
   toujours doublés du texte (« de moins », « de plus »). */
.bloc-concurrentes .conc-intro { margin: 0 0 14px; font-size: .9375rem; line-height: 1.5; color: var(--text-2); }
.bloc-concurrentes .conc-box { margin: 0; padding: 0; background: none; border: 0; box-shadow: none; }
.bloc-concurrentes .conc-box > label { font-size: .875rem; font-weight: 500; color: var(--text-2); }
.conc-resultat:not(:empty) { margin-bottom: 24px; padding-bottom: 20px; border-bottom: 1px solid var(--border); }
.conc-attente, .conc-note { margin: 10px 0 0; font-size: .875rem; line-height: 1.5; color: var(--text-3); }
.conc-conclusion { display: grid; gap: 8px; margin: 0 0 16px; padding: 0; list-style: none; }
.conc-conclusion li { padding: 12px 14px; border-radius: var(--radius-sm); background: rgba(255, 255, 255, .035); font-size: .9375rem; line-height: 1.55; color: var(--text-1); }
.conc-conclusion .conc-nom { font-weight: 500; }
.conc-plus { color: var(--danger); }
.conc-autre { display: block; margin-top: 4px; font-size: .8125rem; color: var(--warning); }
.conc-tableau .compare-table-wrap { margin: 0; }
.cmp-etiquette { margin-top: 8px; font-family: var(--font); font-size: .8125rem; color: var(--accent-strong); }
.conc-actions { display: grid; gap: 8px; margin-top: 16px; }
.conc-ligne { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 12px; padding: 10px 0; border-top: 1px solid var(--border); }
.conc-ligne .conc-nom { min-width: 0; font-size: .875rem; color: var(--text-2); overflow-wrap: anywhere; }
.conc-boutons { display: flex; flex-wrap: wrap; gap: 6px; }
@media (pointer: coarse) { .conc-boutons .btn-sm { min-height: 44px; } }

/* ================================================================
   Attente et suivi des analyses (04/11/2026, listing.js : attenteHtml, suiviPastille).
   Étapes qui s'allument avec les vrais chiffres de la fiche, jauge, trace « en train de
   lire », et pastille qui suit l'analyse quand on quitte la fiche. Transform et opacity
   seulement ; bleu = en cours ou fait, ambre = échec ; rien ne bouge sous reduced-motion.
   ================================================================ */
#listing-ai-analysis, #listing-deep { scroll-margin-top: calc(var(--haut-collant) + 12px); scroll-margin-bottom: 120px; }
.attente-ia { display: grid; gap: 14px; }
.attente-tete { display: flex; align-items: center; gap: 14px; }
.attente-orbite { position: relative; flex: none; display: block; width: 40px; height: 40px; border-radius: 50%;
    background: var(--accent-dim); box-shadow: inset 0 0 0 1px var(--accent-border); }
.attente-orbite::before { content: ''; position: absolute; inset: 0; border-radius: 50%;
    background: conic-gradient(from 0deg, transparent 0 58%, var(--accent-strong) 100%);
    -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 2.5px));
            mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 2.5px));
    animation: attente-tour 1.1s linear infinite; }
.attente-orbite::after { content: ''; position: absolute; inset: 32%; border-radius: 50%; background: var(--accent-strong);
    animation: attente-pouls 1.6s var(--ressort) infinite; }
@keyframes attente-tour { to { transform: rotate(1turn); } }
@keyframes attente-pouls { 0%, 100% { transform: scale(.55); opacity: .5; } 50% { transform: scale(1); opacity: 1; } }
@keyframes attente-pop { from { transform: scale(.4); } }
.attente-titre { margin: 0; font-size: 1.0625rem; font-weight: 500; letter-spacing: -0.01em; line-height: 1.25; color: var(--text-1); }
.attente-sous { margin: 4px 0 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; font-size: .8125rem; color: var(--text-3); }
.attente-temps { font-family: var(--font-mono); font-variant-numeric: tabular-nums; color: var(--text-2); }
.attente-jauge { height: 3px; border-radius: var(--radius-xs); background: rgba(255, 255, 255, .07); overflow: hidden; }
.attente-jauge i { display: block; height: 100%; border-radius: inherit; background: var(--accent-strong);
    transform-origin: left center; transition: transform 240ms linear; }
.attente-etapes { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.attente-etape { position: relative; isolation: isolate; overflow: hidden; display: grid; grid-template-columns: 22px minmax(0, 1fr) auto;
    align-items: center; gap: 4px 12px; min-height: 38px; padding: 8px 10px; border-radius: 12px;
    font-size: .9375rem; color: var(--text-3); transition: color var(--t-court); }
.attente-etape.active { color: var(--text-1); background: rgba(255, 255, 255, .03); }
.attente-etape.active::after { content: ''; position: absolute; inset: 0; z-index: -1;
    background: linear-gradient(90deg, transparent, rgba(124, 192, 240, .1), transparent);
    transform: translateX(-100%); animation: attente-balayage 1.8s var(--ressort) infinite; }
@keyframes attente-balayage { to { transform: translateX(100%); } }
.attente-etape.faite { color: var(--text-2); }
.attente-puce { position: relative; width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center;
    box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .16); }
.attente-puce svg { width: 13px; height: 13px; fill: none; stroke: #04121f; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round;
    stroke-dasharray: 16; stroke-dashoffset: 16; transition: stroke-dashoffset 240ms var(--ressort) 90ms; }
.attente-etape.active .attente-puce { box-shadow: inset 0 0 0 1.5px var(--accent-border); }
.attente-etape.active .attente-puce::before { content: ''; position: absolute; inset: 0; border-radius: 50%;
    border: 2px solid transparent; border-top-color: var(--accent-strong); animation: attente-tour .9s linear infinite; }
.attente-etape.faite .attente-puce { background: var(--accent-strong); box-shadow: none; animation: attente-pop 420ms var(--ressort); }
.attente-etape.faite .attente-puce svg { stroke-dashoffset: 0; }
.attente-libelle { min-width: 0; }
.attente-detail { justify-self: end; font-size: .8125rem; font-variant-numeric: tabular-nums; color: var(--text-2); text-align: right;
    opacity: 0; transform: translateX(8px); transition: opacity var(--t-court), transform var(--t-moyen) var(--ressort); }
.attente-detail .num { font-weight: 500; color: var(--text-1); }
.attente-etape.faite .attente-detail { opacity: 1; transform: none; }
.attente-trace { margin: 0; min-height: 1.5em; font-family: var(--font-mono); font-size: .75rem; letter-spacing: 0; color: var(--text-3);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.attente-trace span { display: inline-block; animation: attente-trace 380ms var(--ressort) both; }
.attente-trace span:not(:empty)::before { content: '› '; color: var(--accent-strong); }
@keyframes attente-trace { from { opacity: 0; transform: translateY(6px); } }
.attente-note { margin: 0; padding-top: 12px; border-top: 1px solid var(--border); font-size: .8125rem; line-height: 1.45; color: var(--text-3); }
@media (max-width: 520px) {
    .attente-etape { grid-template-columns: 22px minmax(0, 1fr); }
    .attente-detail { grid-column: 2; justify-self: start; text-align: left; transform: translateY(-3px); }
    .attente-etape:not(.faite) .attente-detail { display: none; }
}

/* Pastille de suivi : au-dessus du dock, et au-dessus de la barre d'analyse d'une autre fiche. */
.suivi-analyse { position: fixed; left: 12px; right: 12px; bottom: var(--bas-fixe); z-index: var(--z-collant);
    display: flex; justify-content: center; pointer-events: none; animation: barre-analyse-entree 500ms var(--ressort) backwards; }
.suivi-analyse[hidden],
body:has(#cookie-banner, .pwa-banner) .suivi-analyse { display: none; }
html.avec-barre-analyse body[data-page="listing"] .suivi-analyse { bottom: calc(var(--bas-fixe) + 94px); }
.suivi-pastille { pointer-events: auto; display: flex; align-items: center; gap: 2px; width: 100%; max-width: 520px; padding: 6px;
    border-radius: var(--radius-pill); background: var(--bg-2);
    box-shadow: var(--coeur-lueur), var(--coque), var(--ombre-flottante); }
.suivi-corps { flex: 1; min-width: 0; display: flex; align-items: center; gap: 12px; min-height: 48px; padding: 2px 8px 2px 2px;
    border: 0; border-radius: var(--radius-pill); background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.suivi-icone { flex: none; width: 40px; height: 40px; display: grid; place-items: center; border-radius: var(--radius-sm); }
.is-pret .suivi-icone { background: var(--accent-strong); color: #04121f; animation: attente-pop 420ms var(--ressort); }
.is-echec .suivi-icone { background: var(--warning-dim); box-shadow: inset 0 0 0 1px var(--warning-border); color: var(--warning); }
.suivi-textes { flex: 1; min-width: 0; display: grid; gap: 1px; }
.suivi-titre { font-size: .9375rem; font-weight: 500; line-height: 1.25; color: var(--text-1); }
.suivi-sous { font-size: .8125rem; color: var(--text-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.suivi-temps { flex: none; font-family: var(--font-mono); font-size: .8125rem; font-variant-numeric: tabular-nums; color: var(--text-2); }
.suivi-action { flex: none; padding: 8px 16px; border-radius: var(--radius-pill); background: var(--text-1); color: var(--bg-0);
    font-size: .875rem; font-weight: 500; white-space: nowrap; transition: transform var(--t-court) var(--ressort); }
.is-echec .suivi-action { background: var(--verre); color: var(--text-1); box-shadow: inset 0 0 0 1px var(--border); }
.suivi-fermer { flex: none; width: 44px; height: 44px; display: grid; place-items: center; border: 0; border-radius: var(--radius-sm);
    background: none; color: var(--text-3); cursor: pointer; transition: color var(--t-court), background var(--t-court); }
@media (hover: hover) {
    .suivi-corps:hover .suivi-action { transform: translateX(-2px); }
    .suivi-fermer:hover { color: var(--text-1); background: var(--verre); }
}
@media (min-width: 1024px) {
    .suivi-analyse { bottom: 28px; }
    html.avec-barre-analyse body[data-page="listing"] .suivi-analyse { bottom: 122px; }
}
@media (max-width: 420px) { .suivi-action { padding: 8px 12px; } }
@media (prefers-reduced-motion: reduce) {
    .attente-orbite::before, .attente-orbite::after, .attente-etape.active::after, .attente-etape.active .attente-puce::before,
    .attente-etape.faite .attente-puce, .attente-trace span, .suivi-analyse, .is-pret .suivi-icone { animation: none; }
    .attente-jauge i, .attente-detail, .attente-puce svg, .suivi-action { transition: none; }
}
@media print { .suivi-analyse { display: none !important; } }

/* Pays choisi à la main (04/11/2026, Listing.ouvrirChoixPays, changerPays, retablirPays). */
.listing-origin .lo-changer { display: inline-flex; align-items: center; min-height: 30px; padding: 0 12px; border: 0;
    border-radius: var(--radius-pill); background: var(--verre); box-shadow: inset 0 0 0 1px var(--border);
    font-family: var(--font); font-size: .8125rem; letter-spacing: 0; color: var(--text-2); cursor: pointer;
    transition: color var(--t-court), background var(--t-court); }
.listing-origin .lo-manuel { font-family: var(--font); font-size: .8125rem; letter-spacing: 0; color: var(--warning); }
@media (hover: hover) { .listing-origin .lo-changer:hover { color: var(--text-1); background: rgba(255, 255, 255, .08); } }
@media (pointer: coarse) { .listing-origin .lo-changer { min-height: 44px; } }

/* ==========================================================================
   En-tête replié sur la fiche (05/11/2026, Charles : « le double menu sticky sur les pages
   de véhicules prend trop de place en hauteur »). Au défilement vers le bas, js/entete.js
   pose html.entete-replie : l'îlot et le dock sortent de l'écran (base.css), la barre de
   décision collante monte à la place de l'îlot, la colonne de référence la suit, la barre
   d'analyse et la pastille de suivi descendent à la place du dock. Au moindre défilement
   vers le haut, tout revient. Une seule barre collante en haut au lieu de deux.
   « translate » (et non « transform ») : la barre d'analyse a déjà une animation d'entrée
   en transform. La colonne de référence change de « top » sans transition : elle n'est
   collée qu'au-delà de 1 100 px, sous la barre qui la recouvre pendant son déplacement.
   ========================================================================== */
#page-listing #decision-bar,
.barre-analyse,
.suivi-analyse { transition: translate var(--t), opacity var(--t); }
@media (min-width: 769px) {
    html.entete-replie:not(.menu-ouvert) body[data-page="listing"] #decision-bar {
        translate: 0 calc(env(safe-area-inset-top, 0px) - var(--haut-collant));
        border-top-left-radius: 0;
        border-top-right-radius: 0;
    }
}
@media (min-width: 769px) and (max-width: 1023px) {
    html.entete-replie:not(.menu-ouvert) body[data-page="listing"] #decision-bar {
        translate: 0 calc(env(safe-area-inset-top, 0px) - var(--haut-collant));
    }
}
@media (min-width: 1101px) {
    html.entete-replie:not(.menu-ouvert) body[data-page="listing"] .listing-aside {
        top: calc(16px + env(safe-area-inset-top, 0px) + var(--barre-h));
    }
}
@media (max-width: 1023px) {
    html.entete-replie:not(.menu-ouvert) body[data-page="listing"] .barre-analyse,
    html.entete-replie:not(.menu-ouvert) body[data-page="listing"] .suivi-analyse {
        translate: 0 calc(var(--dock-h) + 12px);
    }
}
@media (prefers-reduced-motion: reduce) {
    #page-listing #decision-bar,
    .barre-analyse,
    .suivi-analyse,
    .entete-verre .ilot,
    .entete-verre .dock { transition: none; }
}

/* ==========================================================================
   Cibles (super favoris, 05/11/2026, Charles : « des cibles numéro 1, la crème de la
   crème »). Pilule « Cibler » de la fiche, rond des cartes de favoris, repère « Cible »
   sur la photo, bandeau « Mes cibles » en tête de la page Favoris. L'état est toujours
   ÉCRIT (Cibler, Ma cible, Cible) : le bleu ne fait que le doubler.
   ========================================================================== */

/* Fiche : à côté de l'étoile. Éteinte : verre et pastille bleue ; allumée : bleu clair plein. */
.listing-prix-ligne { flex-wrap: wrap; row-gap: 10px; }
:root .btn-cible {
    flex: none;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 44px;
    margin: 0;
    padding: 0 16px 0 12px;
    border-radius: var(--radius-pill);
    background: var(--verre);
    border: 1px solid var(--border-strong);
    color: var(--text-1);
    font: inherit;
    font-size: .9375rem;
    font-weight: 500;
    
    white-space: nowrap;
    cursor: pointer;
    transition: background-color var(--t), border-color var(--t), color var(--t), transform var(--t);
}
:root .btn-cible .ico { margin: 0; color: var(--accent-strong); transition: color var(--t); }
:root .btn-cible.is-cible { background: var(--accent-strong); border-color: var(--accent-strong); color: #04121f; }
:root .btn-cible.is-cible .ico { color: #04121f; }
:root .btn-cible:active { transform: scale(.96); }
@media (hover: hover) {
    :root .btn-cible:not(.is-cible):hover { background: rgba(124, 192, 240, .08); border-color: var(--accent-border); }
}

/* Repère « Cible » sur la photo d'une carte : sous la pastille du pays quand elle existe. */
.card-cible {
    position: absolute;
    top: 10px;
    left: 10px;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 28px;
    padding: 0 12px 0 8px;
    border-radius: var(--radius-pill);
    background: rgba(4, 18, 31, .84);
    border: 1px solid var(--accent-border);
    color: var(--text-1);
    font-size: .8125rem;
    font-weight: 500;
    white-space: nowrap;
}
.card-cible .ico { margin: 0; color: var(--accent-strong); }
.card-flag ~ .card-cible { top: 36px; }

/* Rond « cible » : actions des cartes de favoris (même verre que l'étoile). */
:root .btn-cible-rond {
    flex: none;
    display: inline-grid;
    place-items: center;
    width: 40px;
    height: 40px;
    min-height: 0;
    margin: 0;
    padding: 0;
    border-radius: var(--radius-sm);
    background: rgba(8, 10, 14, .72);
    border: 1px solid rgba(255, 255, 255, .16);
    color: var(--text-1);
    box-shadow: 0 .5rem 1rem -.5rem rgba(0, 0, 0, .6);
    cursor: pointer;
    transition: color var(--t), background-color var(--t), border-color var(--t), transform var(--t);
}
:root .btn-cible-rond .ico { margin: 0; }
:root .btn-cible-rond.is-cible { background: var(--accent-strong); border-color: var(--accent-strong); color: #04121f; }
:root .btn-cible-rond:active { transform: scale(.94); }
@media (hover: hover) {
    :root .btn-cible-rond:not(.is-cible):hover { color: var(--accent-strong); border-color: var(--accent-border); background: rgba(4, 18, 31, .88); }
}

/* Onglet « Cibles » de la page Favoris (05/11/2026 : le bandeau en tête de page du matin prenait
   trop de place). Pastille de la barre des classeurs, ligne d'explication, puis les cartes ordinaires. */
.saved-chip.chip-cibles .ico { margin: 0 6px 0 0; vertical-align: -2px; color: var(--accent-strong); }
.saved-chip.chip-cibles.folder-active .ico { color: inherit; }
.cibles-sous { margin: 0 0 6px; max-width: 72ch; font-size: .9375rem; line-height: 1.5; color: var(--text-2); }
.cibles-conseil { margin: 0 0 6px; font-size: .875rem; line-height: 1.45; color: var(--warning); }
#fav-cibles { margin: 0 0 16px; }
#fav-cibles:empty { display: none; }

/* Aucune cible : une carte qui dit quoi faire, sans bloquer la page. */
.cibles-vide {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    max-width: 780px;
    margin: 0;
    padding: 20px 20px;
    border-radius: var(--radius);
    background: var(--bg-1);
    box-shadow: var(--coeur-lueur), var(--coque);
}
.cibles-vide-rond {
    flex: none;
    display: grid;
    place-items: center;
    width: 48px;
    height: 48px;
    border-radius: var(--radius-sm);
    background: var(--accent-dim);
    border: 1px solid var(--accent-border);
    color: var(--accent-strong);
}
.cibles-vide p { margin: 0; font-size: .9375rem; line-height: 1.55; color: var(--text-2); }
.cibles-vide p .ico { vertical-align: -2px; color: var(--accent-strong); }
.cibles-vide .cibles-vide-titre { margin-bottom: 4px; font-size: 1rem; font-weight: 500; color: var(--text-1); }

@media (max-width: 767px) {
    :root .btn-cible-rond { width: 44px; height: 44px; }
    .card-cible { top: 18px; }
    .card-flag ~ .card-cible { top: 52px; }
    .cibles-vide { padding: 16px; gap: 14px; }
}
@media (prefers-reduced-motion: reduce) {
    :root .btn-cible, :root .btn-cible-rond { transition: none; }
}

/* Comparer depuis les favoris (05/11/2026) : bouton « Comparer » de la barre des favoris.
   Sélection allumée : les boutons de la carte s'effacent (pas de clic de travers), un rond
   au même endroit reçoit le numéro de la voiture choisie ; anneau d'état par --anneau. */
.fav-choix .car-card { cursor: pointer; }
.fav-choix .card-actions { display: none; }
.fav-choix-num {
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 3;
    display: grid;
    place-items: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: rgba(8, 10, 14, .72);
    border: 1.5px solid rgba(255, 255, 255, .55);
    color: #fff;
    font-size: .875rem;
    font-weight: 600;
}
.car-card.fav-choisie .fav-choix-num { background: var(--accent); border-color: var(--accent-strong); }
.car-card.fav-choisie {
    box-shadow: var(--coeur-lueur), 0 0 0 var(--anneau) rgba(124, 192, 240, .14), 0 0 0 var(--anneau-filet) rgba(124, 192, 240, .8);
}
body:not([data-page="favorites"]) .fav-choix-barre { display: none; }
html:has(.fav-choix-barre) #page-favorites { padding-bottom: 96px; }
@media (max-width: 600px) {
    .fav-choix-barre .compare-float-info strong { display: none; }
    :root .fav-choix-barre .btn-primary { min-width: 0; padding-left: 16px; }
}

/* Comparateur : repère « Cible » et note de l'analyse du compte dans chaque ligne. */
.cpf-vues { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 12px; }
.cpf-cible,
.cpf-note {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-right: 6px;
    padding: 0 8px;
    border-radius: var(--radius-pill);
    font-family: var(--font);
    font-weight: 500;
    line-height: 18px;
}
.cpf-cible { border: 1px solid var(--accent-border); color: var(--accent-strong); }
.cpf-note.is-go { background: var(--accent-strong); color: #04121f; }
.cpf-note.is-warn { background: var(--warning); color: #1a1300; }
.cpf-note.is-stop { background: var(--danger); color: #1a0200; }

/* « Mes comparaisons » en tête du comparateur (05/11/2026) : chaque comparaison enregistrée
   ouvre sa page /comparaison/{id}. Mosaïque des photos, nom, nombre et date. */
.cpf-mes { margin: 0 0 24px; }
.cpf-mes-titre { margin: 0 0 10px; color: var(--text-2); font-size: .8125rem; font-weight: 500; letter-spacing: .02em; }
.cpf-mes-liste { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr)); gap: 10px; margin: 0; padding: 0; list-style: none; }
.cpf-mes-lien {
    display: grid;
    grid-template-columns: 72px minmax(0, 1fr);
    align-items: center;
    gap: 12px;
    padding: 8px 12px 8px 8px;
    border-radius: var(--radius-sm);
    background: var(--bg-1);
    box-shadow: var(--coeur-lueur), var(--coque);
    color: var(--text-1);
    text-decoration: none;
}
@media (hover: hover) { .cpf-mes-lien:hover { box-shadow: var(--coeur-lueur), 0 0 0 var(--anneau) rgba(124, 192, 240, .10), 0 0 0 var(--anneau-filet) rgba(124, 192, 240, .45); } }
.cpf-mes-photos { display: grid; grid-template-columns: 1fr 1fr; gap: 2px; width: 72px; height: 48px; overflow: hidden; border-radius: 10px; background: var(--bg-3); }
.cpf-mes-photos img, .cpf-mes-photos i { display: block; width: 100%; height: 100%; min-height: 0; object-fit: cover; background: var(--bg-3); }
.cpf-mes-texte { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.cpf-mes-nom { overflow: hidden; font-size: .9375rem; font-weight: 500; text-overflow: ellipsis; white-space: nowrap; }
.cpf-mes-meta { color: var(--text-3); font-size: .75rem; }

/* En-tête du calcul : du pays d'achat à l'immatriculation française. */
.ticket-plaques { display: inline-flex; align-items: center; gap: 8px; margin: 8px 0 0; color: var(--text-3); }