/* ==========================================================================
   APPLICATION PAGE PAR PAGE DU SYSTÈME « BORDEREAU »
   CSS produit par kimi-k3 (Moonshot, 632 s) le 2026-07-23, revu et intégré.
   Règles transversales retenues :
   - un seul chiffre héros par écran, tous les autres nombres en mono tabulaire
   - le coin coupé ne marque QUE la décision, jamais une carte de contenu
   - le rail tricolore ne porte qu'un verdict calculé, jamais de décoration
   - l'azure est exclusivement interactionnel, aucune surface passive ne l'utilise
   - contrôles et lignes de données à 36px, seule la landing respire
   - transitions sur couleurs et bordures uniquement, jamais taille ni position
   ========================================================================== */


/* ===== Landing publique ===== */
/* ===== Page Tarifs ===== */
/* Depuis la refonte « L'instrument de verre » du 14/10/2026, la landing, la page Tarifs et
   les cartes d'offre vivent entièrement dans landing.css (DESIGN.md, mode Persuade). Les
   règles kimi d'origine (coin coupé, rails, chiffres en Mono) ont été retirées d'ici. */

/* ===== Formulaire de recherche ===== */
/* Tous les controles a 36px exactement, label mono au-dessus du champ, jamais de label flottant. */
/* btn-search s'aligne sur la ligne de base des inputs via align-self:end dans la grille. */
/* saved-chip est un raccourci de requete: pill 28px mono, l'azure n'apparait qu'au hover et au focus. */
/* Les champs chiffres (prix, kilometrage, annee) heritent de tabular-nums pour des saisies alignees. */
/* « L'instrument de verre » (14/10/2026) : libellés Geist Mono .6875rem à .14em au-dessus
   du champ ; les champs eux-mêmes (44 px, rayon 14, fond enfoncé, focus bleu clair) sont
   portés par base.css (:root .filter-group ...), qui gagne sur les règles ci-dessous. */
.search-box{background:var(--bg-1);border:0;border-radius:var(--radius-lg);box-shadow:var(--coeur-lueur),var(--coque);padding:var(--s6)}
.filters-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px var(--s4)}
.filter-group{display:flex;flex-direction:column;gap:var(--s2);min-width:0}
.filter-group label{font-family: var(--font);font-size: .8125rem;font-weight: 500;color:var(--text-3)}
:root .filter-group > label{font-size:.75rem;font-weight: 500;line-height:14px}
/* :not([type=checkbox]) est INDISPENSABLE : sans lui, une case à cocher héritait de
   width:100% et height:36px et sortait en gros carré blanc. Cette règle a même
   spécificité (0,1,1) que « .check-label input » de components.css, mais bordereau.css
   est chargé APRES : c'est l'ordre de cascade qui tranchait, pas la spécificité. */
.filter-group input:not([type=checkbox]),.filter-group select{width:100%;height:var(--ctl-h);padding:0 var(--s3);background:var(--bg-inset);border:1px solid var(--border);border-radius:var(--radius-sm);color:var(--text-1);font-family:var(--font);font-size:13px;font-variant-numeric:tabular-nums;transition:border-color var(--t),box-shadow var(--t)}
.filter-group input:not([type=checkbox]):hover,.filter-group select:hover{border-color:var(--border-strong)}
.filter-group input:not([type=checkbox]):focus,.filter-group select:focus{outline:none;border-color:var(--accent);box-shadow:var(--ring)}
.filter-group input::placeholder{color:var(--text-3)}
.btn-search{align-self:end;height:var(--ctl-h)}

/* --- Bornes min/max sur une seule ligne -----------------------------------
   Un intervalle est UN critère, pas deux. Les séparer en deux colonnes doublait
   la hauteur du formulaire et éloignait la borne haute de la borne basse. */
.range-pair { display: flex; align-items: center; gap: 6px; min-width: 0; }
.range-pair input { min-width: 0; flex: 1 1 0; text-align: center; }
.range-sep {
    flex: 0 0 auto;
    font-family: var(--font-mono);
    font-size: .75rem;
    color: var(--text-4);
    user-select: none;
}

/* Le flex de « .check-label » (components.css) ne s'appliquait PAS : la règle
   générique « .filter-group label » (0,1,1) bat « .check-label » (0,1,0) et
   imposait display:block, donc ni alignement ni gap. Deux classes (0,2,0)
   reprennent la main. Le libellé reste en mono majuscule comme les autres du
   formulaire : c'est le langage du bordereau, pas un oubli. */
.filter-group .check-label {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    line-height: 1.3;
}

/* --- Case à cocher dessinée -----------------------------------------------
   appearance:none neutralise le rendu natif (case blanche du système, illisible
   sur fond sombre et impossible à colorer). La coche est un pseudo-élément en
   rotation plutôt qu'un SVG : rien à charger, et elle suit la couleur du texte. */
.check-label input[type=checkbox] {
    appearance: none;
    -webkit-appearance: none;
    flex: 0 0 auto;
    width: 16px;
    height: 16px;
    /* padding:0 est OBLIGATOIRE, pas décoratif : en border-box le padding n'est jamais
       comprimé, il agit comme un plancher. Un padding hérité de 10px/12px faisait
       mesurer 26x22 à cette case malgré ses 16px déclarés. */
    padding: 0;
    margin: 0;
    background: var(--bg-inset);
    border: 1px solid var(--border-strong);
    border-radius: 3px;
    cursor: pointer;
    position: relative;
    transition: background-color var(--t), border-color var(--t);
}
.check-label input[type=checkbox]:hover { border-color: var(--accent); }
.check-label input[type=checkbox]:checked {
    background: var(--accent);
    border-color: var(--accent);
}
.check-label input[type=checkbox]:checked::after {
    content: "";
    position: absolute;
    left: 5px;
    top: 1px;
    width: 4px;
    height: 9px;
    border: solid var(--bg-0);
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}
.check-label input[type=checkbox]:focus-visible {
    outline: 2px solid var(--text-1);
    outline-offset: 2px;
}
/* .saved-chip (puces des classeurs) : pilule de 32 px définie dans components.css,
   « Barre de recherche ». Plus de surcharge ici. */
@media (max-width:960px){.filters-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:640px){.filters-grid{grid-template-columns:1fr}}

/* ===== Comparateur et favoris ===== */
/* Le tableau est l'outil de decision: lignes 36px strictes, header sticky, pas de zebrage, le hover --bg-2 suffit. */
/* Pour les coins arrondis, envelopper compare-table dans un conteneur border + radius + overflow:hidden car border-collapse ignore border-radius. */
/* folder-chip actif en --accent-dim: l'azure marque la selection courante, c'est un etat d'interaction legitime. */
/* Colonnes chiffrees en tabular-nums et nowrap: la comparaison verticale doit etre instantanee. */
/* « L'instrument de verre » : en-tête Mono .6875rem collant sur verre sombre (le top
   vient de components.css, sous l'îlot), lignes à filet, survol rgba(255,255,255,.03). */
.compare-table{width:100%;border-collapse:collapse;font-size:.9375rem;background:transparent}
.compare-table th{z-index:1;min-height:var(--row-h);padding:12px var(--s4);text-align:left;font-family: var(--font);font-size: .8125rem;font-weight: 500;color:var(--text-3);background:rgba(16,19,26,.96);border-bottom:1px solid var(--border);white-space:nowrap}
.compare-table td{height:var(--row-h);padding:12px var(--s4);color:var(--text-2);border-bottom:1px solid rgba(255,255,255,.05);font-variant-numeric:tabular-nums;white-space:nowrap}
.compare-table th:first-child,.compare-table td:first-child{padding-left:20px;color:var(--text-1)}
.compare-table tbody tr:hover td{background:rgba(255,255,255,.03)}
.compare-table tbody tr:last-child td{border-bottom:none}
.folder-chip{display:inline-flex;align-items:center;min-height:32px;padding:0 14px;background:var(--verre);border:1px solid var(--border);border-radius:var(--radius-pill);font-family:var(--font);font-size:.875rem;color:var(--text-2);cursor:pointer;transition:background var(--t),border-color var(--t),color var(--t)}
.folder-chip:hover{border-color:var(--border-strong);color:var(--text-1)}
.folder-chip[aria-pressed='true'],.folder-chip.actif{background:var(--text-1);border-color:var(--text-1);color:var(--bg-0)}
.fav-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:24px}

/* ===== Alertes ===== */
/* Une alerte est un instrument de veille: rail --go si active, rail --none (gris) si en pause, jamais de --warn decoratif. */
/* Le seuil chiffre de l'alerte s'affiche en mono tabulaire dans la carte, c'est la donnee de declenchement. */
/* alert-form reprend exactement le langage du formulaire de recherche: zero reapprentissage entre les deux ecrans. */
/* « L'instrument de verre » (14/10/2026) : chaque alerte est une carte de liste à double
   cadre (rayon 24). L'état se lit par l'interrupteur dessiné dans le bouton de bascule
   (allumé = alerte active) ET par son texte ; une alerte en pause (au-delà de la formule)
   porte son motif écrit dans une pastille ambre. */
.alert-card{position:relative;display:flex;flex-direction:row;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--s4) var(--s5);min-height:var(--row-h);margin-bottom:24px;background:var(--bg-1);border:0;border-radius:var(--radius);box-shadow:var(--coeur-lueur),var(--coque);padding:20px 24px}
.alert-card-info{flex:1 1 320px;min-width:0;display:flex;flex-direction:column;gap:6px}
.alert-card-info h3{margin:0;font-size:1.25rem;font-weight: 500;letter-spacing: -0.01em;}
.alert-card-info p{margin:0;color:var(--text-2);font-size:.9375rem;line-height:1.5;font-variant-numeric:tabular-nums}
:root .alert-card-info .alert-card-meta{font-family:var(--font);font-size:.8125rem;font-weight: 400;letter-spacing:0;text-transform:none;color:var(--text-3);line-height:1.5}
/* État écrit à côté du nom (calculator.js) : « Désactivée » en pastille de verre neutre,
   « En pause » (au-delà du quota de la formule) en pastille ambre ; le motif suit en méta. */
.alert-card-titre{display:flex;flex-wrap:wrap;align-items:center;gap:8px 10px}
.alert-etat{display:inline-flex;align-items:center;min-height:26px;padding:0 12px;border-radius:var(--radius-pill);background:var(--verre);border:1px solid var(--border-strong);color:var(--text-2);font-size:.75rem;font-weight: 500;letter-spacing:0;white-space:nowrap}
.alert-etat--pause{background:var(--warning-dim);border-color:var(--warning-border);color:var(--warning)}
:root .alert-card-info .alert-pause-motif{color:var(--text-2)}
.alert-card-actions{display:flex;flex-wrap:wrap;gap:var(--s2)}
.alert-card.alert-inactive{opacity:1}
.alert-card.alert-inactive .alert-card-info{opacity:.7}
/* Interrupteur en pilule dessiné dans le bouton : piste de 34 x 20, pastille blanche. */
.btn-toggle-alert::before{content:"";flex:none;width:34px;height:20px;border-radius:var(--radius-xs);background:radial-gradient(circle 7px at 10px 50%,#fff 98%,transparent 100%),rgba(255,255,255,.12);box-shadow:inset 0 0 0 1px var(--border-strong);transition:background var(--t)}
.btn-toggle-alert[data-active="1"]::before{background:radial-gradient(circle 7px at 24px 50%,#fff 98%,transparent 100%),var(--accent);box-shadow:none}
#btn-new-alert{margin:0 0 28px}
.alert-form{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s4);background:transparent;border:0;border-radius:var(--radius);padding:0}
.alert-form label{display:block;margin-bottom:var(--s2);font-family: var(--font);font-size: .8125rem;font-weight: 500;color:var(--text-3)}
.alert-form input,.alert-form select{width:100%;height:var(--ctl-h);padding:0 14px;background-color:var(--bg-inset);border:1px solid var(--border);border-radius:var(--radius-sm);color:var(--text-1);font-family:var(--font);font-size:.9375rem;font-variant-numeric:tabular-nums;transition:border-color var(--t),box-shadow var(--t)}
.alert-form input:hover,.alert-form select:hover{border-color:var(--border-strong)}
@media (max-width:960px){.alert-form{grid-template-columns:1fr}}
@media (max-width:560px){.alert-card{padding:20px}.alert-card-actions{width:100%}.alert-card-actions>*{flex:1 1 auto}}

/* ===== Guides SEO ===== */
/* Retiré le 14/10/2026 (« L'instrument de verre ») : guides, cotes et encart d'appel
   sont entièrement stylés par guides.css, chargé après ce fichier. Les anciennes règles
   (coin coupé, accent en couleur de texte, cartes de liens) se battaient avec lui. */

/* ===== Back-office ===== */
/* Retiré le 14/10/2026 : KPI, tableaux et blocs du back-office vivent dans admin.css,
   chargé après ce fichier (montants en Geist tabulaire, plus en Mono). */

/* ===== Boutons globaux ===== */
/* Trois boutons, deux roles: primary et search portent l'azure, secondary reste neutre jusqu'au hover. */
/* Hauteur verrouillee a 36px pour s'aligner avec tous les controles du systeme. */
/* translateY(1px) au clic donne une reponse mecanique, aucune autre animation n'est permise. */
/* Le texte blanc sur azure suppose un accent au contraste AA; si l'azure eclaircit, passer le texte en var(--bg-0). */
/* btn-search passe en pleine largeur uniquement a l'interieur de search-box. */
.btn-primary,.btn-secondary,.btn-search{display:inline-flex;align-items:center;justify-content:center;gap:var(--s2);height:var(--ctl-h);padding:0 var(--s4);border-radius:var(--radius-sm);border:1px solid transparent;font-family:var(--font);font-size:.8125rem;font-weight: 500;letter-spacing:.01em;white-space:nowrap;text-decoration:none;cursor:pointer;transition:background var(--t),border-color var(--t),color var(--t),box-shadow var(--t)}
.btn-primary,.btn-search{background:var(--accent);color:#fff}
.btn-primary:hover,.btn-search:hover{background:var(--accent-strong)}
.btn-primary:active,.btn-search:active{background:var(--accent-strong);transform:translateY(1px)}
.btn-secondary{background:transparent;border-color:var(--border-strong);color:var(--text-1)}
.btn-secondary:hover{border-color:var(--accent-border);color:var(--accent-strong);background:var(--accent-dim)}
.btn-primary:focus-visible,.btn-secondary:focus-visible,.btn-search:focus-visible{outline:none;box-shadow:var(--ring)}
.btn-primary[disabled],.btn-secondary[disabled],.btn-search[disabled]{opacity:.45;cursor:not-allowed;transform:none}
.search-box .btn-search{width:100%}


/* Le garde-fou responsive de la landing (grilles .hero, .trust-band) est retiré le
   14/10/2026 : landing.css (#page-landing) tient ces règles à toutes les largeurs, le
   retrait ne changeait aucun style calculé de 375 à 1000 px. */

/* ==========================================================================
   CASCADE : bordereau.css charge APRÈS landing.css et components.css, donc
   c'est ici que la règle des libellés doit être posée pour gagner. Sans ça,
   .trust-label restait à 13,28px imposé par landing.css alors que le système
   demande 11px mono majuscules. Vérifié au navigateur.
   Depuis le 14/10/2026, .trust-label et les anciens libellés de la landing (.demo-tag,
   .example-vs, .pricing-features) ne passent plus par ici : landing.css les tient.
   ========================================================================== */
.cmp-label,
.micro-label,
.saved-label,
.sort-bar-label,
.verdict-maxprice-label,
.ai-panel-label,
.ai-winner-label,
.market-median-label,
.market-stat-label,
.kpi-label,
.db-label,
.cp-label,
.alert-card-meta,
.filter-group > label,
.guides-date {
    font-family: var(--font);
    font-size: .8125rem;
    font-weight: 500;
    line-height: 1.3;
    color: var(--text-3);
}
/* La date des guides est une métadonnée, pas un libellé de structure : elle
   garde sa casse normale, seule la famille et la taille suivent le système. */
.guides-date { text-transform: none; letter-spacing: 0.02em; }

/* La carte de démonstration du hero (.demo-card, .demo-tag, .demo-head) a disparu du
   HTML : ses règles avec elle (14/10/2026). */

/* ==========================================================================
   FICHE ANNONCE ET DÉCOUVRIR : application du système bordereau
   CSS produit par kimi-k3 (Moonshot, 633 s) le 2026-07-23, revu et intégré.

   Hiérarchie imposée (la page faisait 6 006 px avec tous les blocs au même
   poids visuel, et le chiffre qui décide noyé au milieu) :
     1. prix rendu en France : SEUL chiffre héros, 30 à 44px, pleine largeur
     2. verdict, coût d'import, feu tricolore : coin coupé + rail de verdict
     3. signaux : badges couleur, volontairement SANS rail (ce sont des
        détections, pas des verdicts)
     4. le reste : contexte puis annexe, poids décroissant
   Le héros reste en --text-1 : c'est le rail qui porte la couleur, jamais le chiffre.
   ========================================================================== */


/* ===== Fiche annonce ===== */
/* Retiré le 14/10/2026 (« L'instrument de verre ») : coin coupé, rails de verdict,
   montants en Mono et poids « bordereau » de la fiche. Le dessin de la fiche vit dans
   components.css (sections « Fiche annonce » à « Annonce qui n'est plus en ligne »). */

/* Tableau des comparables : n'est plus employé par la fiche (cartes compactes depuis le
   14/10/2026) mais par le compte (account.js) et le rapport public. Gardé tel quel. */
.samples-table { width: 100%; border-collapse: collapse; margin-top: var(--s3); font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-size: .75rem; }
.samples-table th { text-align: left; font-weight: 500; font-size: .8125rem; color: var(--text-3); }
.samples-table th, .samples-table td { height: var(--row-h); padding: 0 var(--s2); border-top: 1px solid var(--border); }
.samples-table td { color: var(--text-2); }
.samples-table th:last-child, .samples-table td:last-child { text-align: right; }

/* ===== Page Découvrir ===== */
/* Aucun chiffre heros sur cet ecran : la comparaison exige des poids egaux, .disc-price est plafonne a 16px sur toutes les cartes. */
/* Aucun coin coupe : aucune decision n est prise ici, seulement des candidats. Le coin coupe reste reserve a la fiche. */
/* Le rail is-go, is-warn, is-stop sur .disc-card est autorise uniquement si .disc-reli est un score reellement calcule. Sinon la carte garde box-shadow inset a --none. */
/* Azure strictement reserve au submit, au focus des champs et au survol des cartes. */
/* Tous les controles restent a 36px, y compris sous 640px ou le formulaire passe en une colonne. */
/* .disc-watch signale un point de vigilance en --warn, jamais en azure, car ce n est pas une interaction. */
/* DECOUVRIR : recommandation par budget. Aucun heros, comparaison a poids egaux. Aucun coin coupe : aucune decision n est prise ici */

/* « L'instrument de verre » (14/10/2026) : formulaire en conteneur majeur à double cadre,
   candidats en cartes de liste (rayon 24), poids égaux, aucun montant héros. Le point
   de vigilance est ÉCRIT en ambre, jamais en couleur seule. */
.discover-wrap { max-width: 1120px; margin: 0 auto; padding: 0 0 var(--s7); }
.discover-wrap h1 { font-size: clamp(1.75rem, 3vw, 2.5rem); font-weight: 500; letter-spacing: -0.02em; line-height: 1.1; margin-bottom: 12px; }
.discover-sub { max-width: 68ch; margin-bottom: 28px; color: var(--text-2); font-size: 1.0625rem; line-height: 1.6; }
.disc-intro { margin: var(--s5) 0 0; padding: 20px 20px; background: var(--verre); border: 1px solid var(--border); border-radius: var(--radius-sm); color: var(--text-1); font-size: 1rem; font-weight: 500; line-height: 1.6; }

.discover-form { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)) auto; gap: 20px var(--s4); align-items: end; padding: 28px; margin-bottom: 8px; background: var(--bg-1); border: 0; border-radius: var(--radius-lg); box-shadow: var(--coeur-lueur), var(--coque); }
.discover-field { display: flex; flex-direction: column; gap: var(--s2); min-width: 0; }
.discover-field label { font-family: var(--font); font-size: .8125rem; font-weight: 500; color: var(--text-3); }
.discover-field input, .discover-field select { height: var(--ctl-h); padding: 0 14px; background-color: var(--bg-inset); border: 1px solid var(--border); border-radius: var(--radius-sm); color: var(--text-1); font-family: var(--font); font-variant-numeric: tabular-nums; font-size: .9375rem; transition: border-color var(--t), background-color var(--t), box-shadow var(--t); }
.discover-field input:hover, .discover-field select:hover { border-color: var(--border-strong); }
:root .discover-form .btn-primary { height: auto; white-space: nowrap; }

/* Grille des candidats */
.disc-grid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 24px; margin-top: 28px; }
.disc-card { display: flex; flex-direction: column; gap: var(--s3); min-width: 0; padding: 24px 24px 20px; background: var(--bg-1); border: 0; border-radius: var(--radius); box-shadow: var(--coeur-lueur), var(--coque); transition: box-shadow 300ms var(--ressort), transform 240ms var(--ressort); }
@media (hover: hover) {
  .disc-card: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); }
}
.disc-card-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s3); }
.disc-card-head > :first-child { margin: 0; font-size: 1.25rem; font-weight: 500; letter-spacing: -0.01em; color: var(--text-1); min-width: 0; }
.disc-price { font-family: var(--font); font-variant-numeric: tabular-nums; font-size: 1rem; font-weight: 500; color: var(--text-1); white-space: nowrap; }
.disc-reli { display: flex; align-items: center; gap: var(--s2); min-height: 24px; font-family: var(--font-mono); font-size: .75rem; color: var(--text-2); }
.disc-reli svg { flex: 0 0 auto; color: var(--text-3); }
.disc-why { color: var(--text-2); font-size: .9375rem; line-height: 1.55; }
.disc-watch { display: flex; gap: 8px; align-items: flex-start; margin: 0; padding: 10px 12px; background: var(--warning-dim); border: 1px solid var(--warning-border); border-radius: var(--radius-sm); font-size: .875rem; line-height: 1.5; color: var(--text-1); }
.disc-watch svg { flex: 0 0 auto; margin-top: 4px; color: var(--warning); }
:root .disc-card .btn-secondary { align-self: flex-start; margin-top: auto; }

@media (max-width: 1000px) {
  .discover-form { grid-template-columns: repeat(2, minmax(0,1fr)); }
  :root .discover-form .btn-primary { grid-column: 1 / -1; }
  .disc-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
}

@media (max-width: 640px) {
  .discover-form { grid-template-columns: minmax(0,1fr); padding: 24px 20px; border-radius: var(--radius); }
  .disc-grid { grid-template-columns: minmax(0,1fr); }
  .disc-card-head { flex-direction: column; align-items: flex-start; gap: var(--s1); }
}

/* ==========================================================================
   CORRECTION Captain Auto : kimi a supposé que .roadmap-step contenait
   directement .roadmap-num, .roadmap-t et .roadmap-meta. En réalité l'étape
   contient UN SEUL enfant, un <label> (case à cocher + contenu). Sa grille
   « 32px minmax(0,1fr) » enfermait donc tout le texte dans une colonne de
   32px : chaque étape passait à 2 500px et la page à 20 702px au lieu de 6 000.
   La grille appartient au label, pas à l'étape.
   Depuis le 14/10/2026, toutes les règles de l'étape sont dans « Feuille de route »
   (fin de fichier), qui garde ce principe.
   ========================================================================== */

/* ===== Chat d'expertise (fiche annonce) ===== */
/* « L'instrument de verre » : bulles de rayon 20 (votre question en verre, la réponse
   de l'analyste sur le cœur), suggestions en pastilles, champ en pilule. La carte qui
   l'entoure est une carte à double cadre de la fiche (components.css). */
.chat-card { display: flex; flex-direction: column; gap: 14px; }
#listing-content .chat-card > h2 { margin-bottom: 0; }
#listing-content .chat-card > .section-note { margin: 0; padding: 0; max-width: 68ch; text-align: left; font-size: .9375rem; line-height: 1.55; color: var(--text-2); }
.chat-log {
    display: flex;
    flex-direction: column;
    gap: 10px;
    max-height: 380px;
    overflow-y: auto;
    padding: 4px 2px;
    scrollbar-width: thin;
}
.chat-log:empty { display: none; }
.chat-msg {
    max-width: 86%;
    padding: 12px 16px;
    border-radius: var(--radius);
    font-size: .9375rem;
    line-height: 1.6;
    overflow-wrap: anywhere;
}
.chat-user {
    align-self: flex-end;
    background: rgba(255, 255, 255, .06);
    border: 1px solid var(--border-strong);
    border-bottom-right-radius: 8px;
    color: var(--text-1);
}
.chat-bot {
    align-self: flex-start;
    background: var(--bg-1);
    border: 1px solid var(--border);
    border-bottom-left-radius: 8px;
    box-shadow: var(--coeur-lueur);
    color: var(--text-2);
}
.chat-bot .js-dossier-porte { margin-top: 10px; }
/* Réponse rendue par App.markdownSur() : paragraphes, listes, gras. */
.chat-bot p, .chat-bot ul, .chat-bot ol { margin: 0 0 .65em; }
.chat-bot > :last-child { margin-bottom: 0; }
.chat-bot ul, .chat-bot ol { padding-left: 1.25em; }
.chat-bot li { margin: .25em 0; }
.chat-bot li::marker { color: var(--text-3); }
.chat-bot strong { color: var(--text-1); font-weight: 500; }
.chat-err {
    align-self: flex-start;
    max-width: 86%;
    padding: 12px 16px;
    border-radius: var(--radius);
    border-bottom-left-radius: 8px;
    background: var(--warning-dim);
    border: 1px solid var(--warning-border);
    color: var(--text-1);
    font-size: .9375rem;
}
.chat-pending { display: flex; align-items: center; gap: 8px; color: var(--text-3); }
.chat-sugg-row { display: flex; flex-wrap: wrap; gap: 8px; }
.chat-sugg {
    display: inline-flex;
    align-items: center;
    min-height: 32px;
    padding: 4px 14px;
    background: var(--verre);
    border: 1px solid var(--border);
    border-radius: var(--radius-xs);
    color: var(--text-2);
    font-family: var(--font);
    font-size: .8125rem;
    line-height: 1.3;
    text-align: left;
    cursor: pointer;
    transition: border-color var(--t), color var(--t), background-color var(--t), transform var(--t);
}
.chat-sugg:active { transform: scale(.98); }
@media (hover: hover) { .chat-sugg:hover { border-color: var(--border-strong); background: rgba(255, 255, 255, .08); color: var(--text-1); } }
/* Champ en pilule, bouton d'envoi accolé dans la même pilule. */
.chat-form {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 4px;
    background: var(--bg-inset);
    border: 1px solid var(--border);
    border-radius: var(--radius-pill);
    transition: border-color var(--t), box-shadow var(--t);
}
.chat-form:focus-within { border-color: var(--accent-strong); box-shadow: 0 0 0 4px rgba(124, 192, 240, .18); }
:root .chat-form input {
    flex: 1;
    min-width: 0;
    height: 44px;
    min-height: 0;
    padding: 0 14px;
    background: transparent;
    border: 0;
    border-radius: var(--radius-pill);
    box-shadow: none;
    color: var(--text-1);
    font: inherit;
    font-size: .9375rem;
}
:root .chat-form input:focus { outline: 2px solid transparent; border: 0; box-shadow: none; }
.chat-form input::placeholder { color: var(--text-3); }
:root .chat-form .btn-primary { flex: none; min-height: 44px; padding: 10px 20px; }
.chat-note { margin: 0; font-size: .8125rem; color: var(--text-3); line-height: 1.5; }
/* Condition d'accès au chat : écrite AU-DESSUS du champ, à taille de lecture, avant
   toute saisie (audit du 2026-10-13, m8). */
.chat-acces { display: flex; align-items: center; gap: 8px; margin: 0; font-size: .875rem; line-height: 1.4; color: var(--text-1); }
.chat-acces svg { flex: none; color: var(--accent-strong); }
html.acces-chat .chat-acces { display: none; }   /* posée par Billing.refreshStatus() */
/* Échec d'une analyse IA (503) : le message, puis le bouton de relance dessous. */
.ia-echec {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
    padding: 16px 20px;
    background: rgba(255, 255, 255, .035);
    border: 1px solid var(--border);
    border-radius: var(--radius);
}
.ia-echec .section-note { margin: 0; padding: 0; text-align: left; color: var(--text-1); font-size: .9375rem; }

/* ===== Colonne de prix des cartes compactes (Veille) =====
   La carte Pass 7 jours a quitté la page tarifs le 13/10/2026 : ses règles avec elle.
   Reste .pass-right, que la carte Veille réutilise. */
.pass-right { display: flex; flex-direction: column; align-items: center; gap: var(--s3); }
.pricing-garantie {
    text-align: center;
    font-size: .75rem;
    color: var(--text-3);
    margin: var(--s4) 0 var(--s6);
}
/* Explication des quotas, sous la grille. */
.pricing-quotas-note {
    margin: var(--s4) auto 0;
    max-width: 72ch;
    font-size: .75rem;
    color: var(--text-3);
    line-height: 1.65;
}
.pricing-quotas-note strong { color: var(--text-2); }

/* Carte Veille : meme gabarit que le Pass, mais SOBRE (bg-2, pas de coin coupe) :
   c'est un plan de transition, pas un element de decision a accentuer. */
.veille-card {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: var(--s5);
    align-items: center;
    margin: var(--s5) 0 0;
    padding: var(--s5);
    background: var(--bg-2);
    border: 1px solid var(--border);
}
.veille-card h2 { margin: 0 0 var(--s2); }
.veille-card p { margin: 0; font-size: .8125rem; color: var(--text-2); line-height: 1.6; max-width: 60ch; }
@media (max-width: 720px) {
    .veille-card { grid-template-columns: minmax(0, 1fr); }
}

.upgrade-actions { display: flex; gap: var(--s2); justify-content: center; flex-wrap: wrap; }
@media (max-width: 720px) {
    .pass-right { align-items: flex-start; }
}

/* ===== Rapport public (public/rapport.php, « L'instrument de verre ») =====
   legal.css passe APRÈS ce fichier : les règles qui touchent ses listes et ses
   paragraphes montent donc à .legal-page.rapport-page (0,2,x). Plus de rail ni de
   coin coupé : le verdict est une carte à double cadre avec un voile de tête, son
   texte est écrit ; chaque signal porte son niveau en toutes lettres. */
.rapport-page .rapport-tag { margin-bottom: 20px; }
.rapport-verdict {
    display: flex;
    gap: 20px;
    align-items: center;
    margin: 28px 0 40px;
    padding: 24px 28px;
    border: 0;
    border-radius: var(--radius-lg);
    clip-path: none;
    background: var(--bg-1);
    box-shadow: var(--coeur-lueur), var(--coque);
}
.rapport-verdict.v-go { background: var(--bg-1); }
.rapport-verdict.v-warn { background: var(--bg-1); }
.rapport-verdict.v-stop { background: var(--bg-1); }
.rapport-score {
    flex: none;
    font-family: var(--font);
    font-size: clamp(2.25rem, 4vw, 3.25rem);
    font-weight: 500;
    line-height: .9;
    letter-spacing: -0.02em;
    font-variant-numeric: tabular-nums;
    color: var(--text-1);
}
.rapport-score small { font-size: 1rem; font-weight: 500; letter-spacing: 0; color: var(--text-3); }
.rapport-verdict.v-go .rapport-score { color: var(--success); }
.rapport-verdict.v-warn .rapport-score { color: var(--warning); }
.rapport-verdict.v-stop .rapport-score { color: var(--danger); }
.rapport-verdict strong { display: block; color: var(--text-1); font-size: 1.0625rem; font-weight: 500; line-height: 1.35; }
.legal-page.rapport-page .rapport-verdict p { margin: 6px 0 0; font-size: 1rem; }
.legal-page.rapport-page .rapport-verdict p .num { color: var(--text-1); font-weight: 500; }
.legal-page.rapport-page .rapport-flags { list-style: none; margin: 0 0 24px; padding: 0; display: grid; gap: 10px; }
.legal-page.rapport-page .rapport-flags li {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 12px;
    margin: 0;
    padding: 12px 16px;
    border-radius: var(--radius-sm);
    font-size: 1rem;
    line-height: 1.45;
    background: var(--verre);
    border: 1px solid var(--border);
}
.legal-page.rapport-page .rapport-flags li strong { color: var(--text-1); font-weight: 500; }
.rf-niveau {
    flex: none;
    padding: 2px 10px;
    border-radius: var(--radius-xs);
    font-size: .75rem;
    font-weight: 500;
    line-height: 1.5;
    border: 1px solid var(--border-strong);
    color: var(--text-2);
}
.rapport-flags .rf-alerte { border-color: var(--danger-border); }
.rapport-flags .rf-alerte .rf-niveau { background: var(--danger); border-color: var(--danger); color: #1a0200; }
.rapport-flags .rf-attention { border-color: var(--warning-border); }
.rapport-flags .rf-attention .rf-niveau { background: var(--warning); border-color: var(--warning); color: #1a1300; }
/* Ticket du coût rendu : conteneur majeur, lignes à filet, total en 560. */
.rapport-ticket {
    margin: 8px 0 14px;
    padding: 10px 28px;
    border-radius: var(--radius-lg);
    background: var(--bg-1);
    box-shadow: var(--coeur-lueur), var(--coque);
}
/* Le tableau garde sa classe .samples-table (comparables de la fiche) : ses règles
   (Mono, cadre, hauteur bornée, ellipse) sont remises à plat ici. */
.legal-page.rapport-page .rapport-ticket table { display: table; width: 100%; max-height: none; overflow: visible; margin: 0; border: 0; border-radius: 0; border-collapse: collapse; font-family: var(--font); font-size: 1rem; }
.legal-page.rapport-page .rapport-ticket td { height: auto; padding: 12px 0; font-family: var(--font); color: var(--text-2); border-top: 0; border-bottom: 1px solid rgba(255, 255, 255, .05); white-space: normal; }
.legal-page.rapport-page .rapport-ticket td:first-child { max-width: none; width: auto; overflow: visible; }
.legal-page.rapport-page .rapport-ticket td.num { text-align: right; color: var(--text-1); white-space: nowrap; padding-left: 16px; }
.legal-page.rapport-page .rapport-ticket tr:last-child td { border-bottom: 0; }
.legal-page.rapport-page .rapport-ticket .rapport-total td { padding-top: 16px; color: var(--text-1); font-weight: 500; }
.legal-page.rapport-page .rapport-ticket .rapport-total td.num { font-size: 1.5rem; letter-spacing: -0.01em; }
.legal-page.rapport-page .rapport-ticket .rapport-total strong { font-weight: 500; }
.legal-page.rapport-page .rapport-ticket td.num { font-variant-numeric: tabular-nums; letter-spacing: 0; }
/* Notes du rapport (estimation, mention finale) : petit texte Geist --text-3 ;
   la ligne de méta (année, km, ch : classe .num) garde la Mono, en petit. */
.legal-page.rapport-page .legal-date { margin: 0 0 24px; font-family: var(--font); font-size: .8125rem; font-weight: 400; line-height: 1.55; letter-spacing: 0; color: var(--text-3); }
.legal-page.rapport-page .legal-date.num { margin-bottom: 8px; font-family: var(--font); font-variant-numeric: tabular-nums; }   /* porte le prix relevé : Geist tabulaire */
@media (max-width: 767px) {
    .rapport-verdict { flex-direction: column; align-items: flex-start; padding: 20px; }
    .rapport-ticket { padding: 6px 20px; }
}

/* ===== Équipements : valeur en avant, le reste replié =====
   Ce bloc faisait 1 720px pour l'information la moins décisionnelle de la page. */
/* « L'instrument de verre » : pastilles de verre de 32 px, options de valeur en filet
   bleu clair, compteur en pastille Mono. */
.equip-count {
    display: inline-flex;
    align-items: center;
    min-height: 24px;
    margin-left: 4px;
    padding: 2px 8px;
    border: 1px solid var(--border);
    border-radius: var(--radius-xs);
    background: var(--verre);
    font-family: var(--font-mono);
    font-size: .75rem;
    font-weight: 500;
    color: var(--text-3);
    vertical-align: middle;
}
.equip-tags { display: flex; flex-wrap: wrap; gap: 8px; }
.equip-tag {
    display: inline-flex;
    align-items: center;
    min-height: 32px;
    height: auto;
    padding: 4px 12px;
    background: var(--verre);
    border: 1px solid var(--border);
    border-radius: var(--radius-xs);
    font-size: .8125rem;
    line-height: 1.3;
    color: var(--text-2);
}
.equip-premium { margin-bottom: 14px; }
.equip-premium-label {
    display: block;
    margin-bottom: 10px;
    font-family: var(--font);
    font-size: .8125rem;
    font-weight: 500;
    color: var(--text-3);
}
.equip-premium .equip-tag { border-color: var(--accent-border); color: var(--text-1); }
.equip-details > summary {
    cursor: pointer;
    min-height: 44px;
    padding: 0;
    font-size: .875rem;
    font-weight: 500;
    color: var(--accent-strong);
    list-style: none;
    transition: color var(--t);
}
.equip-details > summary::-webkit-details-marker { display: none; }
/* Le triangle de 11 px a cédé la place au chevron commun (details summary::after, 24/10/2026). */
.equip-details > summary { display: flex; align-items: center; gap: 8px; }
@media (hover: hover) { .equip-details > summary:hover { background: none; color: var(--text-1); } }
.equip-details[open] > summary { border-bottom: 0; margin-bottom: 8px; }

/* ==========================================================================
   FICHE VEHICULE : DESIGN UNIQUE (le selecteur de theme est supprime)
   CSS kimi-k3 (Moonshot, 3e passe) du 2026-07-23, revu et integre.

   Parti pris retenu : bordereau de decision. Verdict, cout reel engage et prix
   max dans le premier ecran ; le reste devient preuve compacte ou confort replie.

   DIVERGENCE ASSUMEE avec la proposition de kimi : il reordonnait les blocs en
   CSS (grid-template-areas), ce qui aurait desynchronise le lecteur d'ecran de
   l'affichage (il le signalait lui-meme). L'ordre a ete corrige A LA SOURCE dans
   le DOM (listing.js), et toutes les regles de reordonnancement ont ete retirees
   d'ici : sinon les deux se cumuleraient et tout repartirait dans le desordre.
   ========================================================================== */
/* ============================================================
   CAPTAIN AUTO - FICHE VEHICULE UNIQUE
   Aucun réordonnancement visuel (ni grid-template-areas, ni order, vérifié le
   14/10/2026) : l'ordre affiché est celui du DOM, donc celui du lecteur d'écran.
   ============================================================ */

/* Le 14/10/2026 (« L'instrument de verre »), les règles propres à la fiche ont quitté
   cette section pour components.css : grille, barre de décision, en-tête, galerie,
   verdict, ticket, marché, appels à l'analyse, spécifications, coût de possession,
   chat (section « Chat d'expertise »). Restent ici la carte d'identité (2 bis) et les
   règles GÉNÉRALES du site (blocs repliés, focus, mouvement réduit). */

.listing-grid img { max-width: 100%; }

/* 2 bis. CARTE D'IDENTITE - ce que la voiture EST, avant tout jugement.
   Volontairement PLUS SOBRE que la barre de décision : une plaque de verre à filets,
   ni collante ni teintée. Ce sont des faits relevés sur l'annonce, pas une opinion du
   produit. Flex et non grid : le nombre de données connues varie (5 à 7), la dernière
   ligne s'étire toujours. Les filets sont des ombres d'1 px que le conteneur rogne :
   ils restent ENTRE les cases quel que soit le nombre de colonnes. */
.key-specs {
  display: flex;
  flex-wrap: wrap;
  gap: 0;
  margin: 0 0 24px;
  background: var(--verre);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
}
.ks-cell {
  flex: 1 1 140px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 14px 20px;
  background: none;
  box-shadow: -1px 0 0 rgba(255, 255, 255, .07), 0 -1px 0 rgba(255, 255, 255, .07);
}
.ks-label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font);
  font-size: .8125rem;
  font-weight: 500;
  color: var(--text-3);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ks-label .ico { flex: 0 0 auto; opacity: .7; }
.ks-value {
  font-family: var(--font);
  font-variant-numeric: tabular-nums;
  font-size: 1rem;
  font-weight: 500;
  letter-spacing: -0.01em;
  color: var(--text-1);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
@media (max-width: 640px) {
  /* Deux colonnes en telephone : une base de 140 px en tiendrait trois, illisibles */
  .ks-cell { flex: 1 1 calc(50% - 1px); padding: 12px 14px; }
  .ks-value { font-size: .9375rem; }
}


/* Tableau des comparables : n'est plus employé par la fiche (cartes compactes, 14/10/2026),
   mais par le compte (account.js) et le rapport public. Gardé tel quel. */
.samples-table {
  max-height: calc(var(--row-h) * 6);
  overflow-y: auto;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
}
.samples-table table { width: 100%; border-collapse: collapse; font-size: .75rem; }
.samples-table th {
  position: sticky;
  top: 0;
  height: var(--row-h);
  padding: 0 var(--s2);
  text-align: left;
  font-family: var(--font);
  font-size: .8125rem;
  font-weight: 500;
  color: var(--text-3);
  background: var(--bg-2);
}
.samples-table td {
  height: var(--row-h);
  padding: 0 var(--s2);
  border-top: 1px solid var(--border);
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  color: var(--text-2);
  white-space: nowrap;
}
.samples-table td:first-child { max-width: 0; width: 62%; overflow: hidden; text-overflow: ellipsis; }

/* 10. DETAILS REPLIES - la donnee cle reste visible fermee */
details:is(.knowledge-card, .deep-card, .roadmap-card, .listing-description, .equip-tags) {
  background: var(--bg-1);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  overflow: hidden;
}
details summary {
  list-style: none;
  display: flex;
  align-items: center;
  gap: var(--s3);
  min-height: 52px;
  padding: var(--s1) var(--s3);
  cursor: pointer;
  transition: background var(--t);
}
details summary::-webkit-details-marker { display: none; }
details summary:hover { background: var(--bg-2); }
details summary .t {
  font-family: var(--font);
  font-size: .8125rem;
  color: var(--text-3);
}
details summary .kpi {
  margin-left: auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: .75rem;
  color: var(--text-1);
}
/* Chevron commun des blocs repliés (24/10/2026, Charles : « les chevrons de déroulage sont
   trop discrets, on ne les voit pas du tout »). Avant : un « + » Mono de 14 px, ou un
   triangle de 11 px. Désormais une pastille de verre de 32 px portant un chevron, au bout
   de la ligne, qui pivote à l'ouverture. Toute la ligne reste cliquable. */
details summary::after {
  content: "";
  flex: none;
  width: 20px;
  height: 20px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%238a93ab' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 6l4 4 4-4'/%3E%3C/svg%3E") center / 16px 16px no-repeat;
  transition: transform var(--t);
}
/* Sans valeur à droite (.kpi), le chevron va au bout de la ligne. */
details summary:not(:has(.kpi))::after { margin-left: auto; }
details[open] summary { border-bottom: 1px solid var(--border); }
/* Enfant direct seulement : un bloc fermé DANS un bloc ouvert garde son chevron vers le bas. */
details[open] > summary::after { transform: rotate(180deg); }
@media (prefers-reduced-motion: reduce) { details summary::after { transition: none; } }
details .body { padding: var(--s3); }


/* 14. FOCUS VISIBLE GLOBAL */
:is(button, a, summary, input):focus-visible { outline: none; box-shadow: var(--ring); }

/* 15. REDUCED MOTION */
@media (prefers-reduced-motion: reduce) {
  .listing-grid *, .listing-grid *::before, .listing-grid *::after { transition: none !important; }
}

/* (16 et 17, réglages de l'ancienne fiche sous 1100 et 640 px : retirés le 14/10/2026,
   la fiche a son responsive dans components.css et responsive.css.) */

/* ===== Corrections des sélecteurs devinés par kimi (il l'avait signalé) ===== */
/* Sans objet depuis le 14/10/2026 : « Favori » n'est plus mis en avant d'office, et la
   mise en avant de « Message vendeur » vit dans components.css (« Fiche annonce »). */

/* ===== Description vendeur repliée (2 642 px mesurés) ===== */
/* Résumé utile même fermé : nombre de mots en libellé Mono, aperçu de deux lignes. */
.desc-details > summary {
    cursor: pointer;
    list-style: none;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
    min-height: 44px;
    padding: 4px 0;
    border-radius: 14px;
}
.desc-details > summary::-webkit-details-marker { display: none; }
.desc-details > summary::after { content: none; }
/* Feuille de route : résumé en colonne, le chevron se pose à droite, centré. */
.roadmap-details > summary { position: relative; padding-right: 48px; }
.roadmap-details > summary::after { position: absolute; right: 0; top: 50%; margin-top: -10px; }
/* Résumés en forme de lien (équipements, détail du calcul, étapes) : chevron plus petit,
   juste après le texte. */
.equip-details > summary::after,
details.rm-plus > summary::after,
#listing-content .calc-detail > summary::after { width: 28px; height: 28px; margin-left: 2px; background-size: 14px 14px; }
@media (hover: hover) { .desc-details > summary:hover, .roadmap-details > summary:hover { background: none; } }
.desc-details[open] > summary, .roadmap-details[open] > summary { border-bottom: 0; }
.desc-kpi {
    font-family: var(--font);
    font-size: .8125rem;
    font-weight: 500;
    color: var(--accent-strong);
}
.desc-kpi::before { content: '\25B8'; margin-right: 6px; }
.desc-details[open] .desc-kpi::before { content: '\25BE'; }
.desc-apercu {
    font-size: .9375rem;
    color: var(--text-2);
    line-height: 1.55;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.desc-details[open] .desc-apercu { display: none; }
.desc-details .listing-description { margin-top: 8px; }

/* Feuille de route repliée : checklist POST-décision, 1 204 px mesurés */
.roadmap-details > summary {
    cursor: pointer;
    list-style: none;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
    min-height: 44px;
    padding: 4px 0;
    border-radius: 14px;
}
.roadmap-details > summary::-webkit-details-marker { display: none; }
.rm-kpi {
    font-family: var(--font);
    font-size: .8125rem;
    font-weight: 500;
    color: var(--accent-strong);
    font-variant-numeric: tabular-nums;
}
.rm-intro { max-width: 68ch; font-size: .9375rem; color: var(--text-2); line-height: 1.55; }
.roadmap-details[open] .rm-intro { margin-bottom: 8px; }
.roadmap-details .roadmap-list { margin-top: 12px; }

/* ===== Correction : signaux étirés à 280 px =====
   kimi avait posé `display:flex; flex-wrap:wrap` sur .signals-box. En colonne, le wrap
   fait s'étirer les items sur toute la hauteur disponible : chaque signal occupait
   280 px dont l'essentiel de vide. Les signaux sont une LISTE verticale compacte.
   Depuis le 14/10/2026 : liste verticale dessinée dans components.css (« Signaux
   d'alerte déterministes »), texte du signal en entier (plus de troncature à 3 lignes). */

/* ==========================================================================
   EXPLORATEUR DU HERO : le compteur d'annonces en direct.
   Le hero ne promet plus, il demontre. La reglette de zone met en scene
   l'argument principal : elargir le rayon fait grimper le compteur.
   Depuis le 14/10/2026, la carte de l'explorateur (double cadre, champs, curseurs,
   compteur en montant héros) est dessinée dans landing.css, section « Hero ».
   ========================================================================== */

/* ============================================================================
   FICHE : COLONNE UNIQUE (2026-07-23)
   ----------------------------------------------------------------------------
   La grille à 2 colonnes faisait démarrer chaque rangée au même niveau : un bloc
   court à gauche face à un bloc haut à droite laissait un trou égal à leur écart,
   que ni le gap ni align-items ne peuvent combler (c'est le modèle de rangées).
   Mesuré : 397 px de vide en session anonyme, bien plus pour un abonné dont la
   fiche fiabilité et le dossier approfondi sont beaucoup plus hauts.

   Colonne unique : zéro trou par construction, et l'ordre de décision (verdict,
   coût réel, marché, dossier, preuves, confort) reste exactement celui du DOM.
   Largeur plafonnée : au-delà, les tableaux s'étirent et deviennent illisibles.
   ========================================================================== */
/* Aucun enfant ne doit imposer de placement : un « span 2 » résiduel (verdict-card)
   crée une piste IMPLICITE et la grille repasse à deux colonnes, dont une de 0 px.
   On neutralise donc TOUS les placements, pas seulement la classe .span-2. */
.listing-grid > * { grid-column: auto !important; }

/* Une seule largeur pour TOUTE la fiche, posée une fois sur le conteneur de la page.
   Depuis le 14/10/2026, c'est le conteneur du système (#app-main, min(76rem, 100% -
   3rem), DESIGN.md) : l'ancien plafond de 1 080 px laissait 136 px perdus et serrait le
   ticket dans la colonne de décision. */
#page-listing > div { max-width: none; margin-inline: 0; }
.listing-grid, .decision-bar, .listing-gallery { max-width: none; margin-inline: 0; }

/* (Barre de décision sur mobile : responsive.css, « POLISH MOBILE », 2 colonnes, les
   cinq cases visibles. L'ancien masquage des cases 3 et 4 est retiré.) */

/* ============================================================================
   ACCESSIBILITÉ : correctifs mesurés (2026-07-23)
   ========================================================================== */

/* 1. FOCUS CLAVIER (WCAG 2.4.7, niveau AA)
   base.css posait le focus via « :where(a, button, ...):focus-visible ». :where()
   RAMÈNE LA SPÉCIFICITÉ À ZÉRO : n'importe quel « .btn-primary { box-shadow } »
   déclaré plus loin l'écrasait en silence. Mesuré sur le CTA principal : l'élément
   correspondait bien à :focus-visible, mais outline-style valait « none » et l'ombre
   était transparente. Personne au clavier ne savait où il se trouvait.

   On repasse par outline (que les ombres décoratives ne peuvent pas neutraliser),
   en clair plutôt qu'en accent : un anneau accent sur un bouton accent est invisible.
   Le !important est ici légitime, un indicateur d'accessibilité doit toujours gagner. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible {
  outline: 3px solid var(--text-1) !important;
  outline-offset: 2px !important;
  border-radius: inherit;
}

/* 2. CONTRASTE DU BOUTON PRINCIPAL
   Blanc sur l'accent #3d92cc plafonne à 3,4:1, sous le seuil AA de 4,5:1, et c'était
   le CTA le plus important du site. Encre sombre sur le MÊME accent donne 5,72:1 :
   on corrige le contraste sans toucher à la couleur de marque. */
.btn-primary,
button.btn-primary,
a.btn-primary,
.btn-search {
  color: var(--bg-0);
  font-weight: 500;
}
.btn-primary:hover,
.btn-search:hover { color: var(--bg-0); }

/* .btn-hero est un modificateur de TAILLE, porté aussi par .btn-secondary : le viser
   seul mettait de l'encre sombre sur un bouton à fond sombre, soit un ratio de 1,0.
   Le secondaire garde donc son texte clair, explicitement. */
.btn-secondary, a.btn-secondary, button.btn-secondary { color: var(--text-1); }

/* Libellés de graduation de la réglette : ils portent l'information (France, Ouest,
   Europe), ils ne sont pas décoratifs. Ils étaient à 2,72:1. */
.explorer-zone-scale i, .explorer-zone-scale span { color: var(--text-3); font-style: normal; }

/* 3. TEXTE SECONDAIRE
   --text-3 tombait à 4,49:1 sur les surfaces --bg-2 et --bg-3 (libellés bordereau,
   bande de confiance, notes). Juste sous le seuil, donc réellement non conforme. */
:root { --text-3: #828ca8; }

/* 4. LIEN D'ÉVITEMENT
   Sans lui, un utilisateur au clavier retraverse les 6 entrées de navigation à chaque
   page. Invisible tant qu'il n'a pas le focus. */
.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 10000;
  padding: 12px 20px;
  background: var(--accent);
  color: #fff;
  font-weight: 500;
  border-radius: 0 0 var(--radius, 8px) 0;
}
.skip-link:focus {
  left: 0;
}

/* 5. MOUVEMENT RÉDUIT
   Un seul bloc existait, pour la fiche annonce. La règle vaut pour tout le site :
   qui demande moins de mouvement le demande partout, pas sur une page. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ============================================================================
   ESPACE COMPTE (2026-07-23)
   Une colonne unique plafonnée, comme la fiche : ce sont des blocs indépendants
   de hauteurs très inégales, une grille à deux colonnes y créerait les mêmes
   trous que sur la fiche annonce.
   ========================================================================== */
/* « L'instrument de verre » (14/10/2026) : chaque section du compte est une carte à
   double cadre (rayon 24), espacée de 32 px (l'anneau déborde de 7). Sélecteurs par
   #account-content : ces cartes portent aussi .listing-section, stylée par la fiche. */
#page-account > h1 { max-width: 860px; margin-inline: auto; }
#account-content {
  max-width: 860px;
  margin-inline: auto;
  padding-top: 8px;
  display: flex;
  flex-direction: column;
  gap: 32px;
}
:root #account-content .acct-card {
  padding: 28px;
  background: var(--bg-1);
  border: 0;
  border-radius: var(--radius);
  box-shadow: var(--coeur-lueur), var(--coque);
}
:root #account-content .acct-card > h2 { margin: 0 0 16px; font-family: var(--font); font-size: 1.25rem; font-weight: 500; letter-spacing: -0.01em; text-transform: none; color: var(--text-1); }
#account-content .acct-card .filter-group { margin-bottom: 16px; }
:root #account-content .acct-ref input { min-height: var(--ctl-h); padding: 0 14px; background-color: var(--bg-inset); border: 1px solid var(--border); border-radius: var(--radius-sm); font-variant-numeric: tabular-nums; }
#account-content .acct-card .section-note { text-align: left; padding: 8px 0 0; font-size: .875rem; color: var(--text-2); }
.acct-card h2 { margin-top: 0; }
.acct-sub {
  margin: 28px 0 12px;
  padding-top: 20px;
  border-top: 1px solid rgba(255, 255, 255, .06);
  font-size: 1.0625rem;
  font-weight: 500;
}
.acct-label {
  font-family: var(--font);
  font-size: .8125rem;
  font-weight: 500;
  color: var(--text-3);
}
.acct-plan-name { font-size: clamp(1.75rem, 3vw, 2.25rem); font-weight: 500; letter-spacing: -0.01em; }
.acct-tag {
  margin-left: 10px;
  padding: 4px 12px;
  border-radius: var(--radius-xs);
  background: var(--warning);
  color: #1a1300;
  font-size: .8125rem;
  font-weight: 500;
  vertical-align: middle;
}
.acct-actions { display: flex; flex-wrap: wrap; gap: var(--s2); margin-top: 20px; }

/* Jauges de consommation : la barre passe en alerte AVANT le blocage, pour que
   l'utilisateur ne découvre pas son quota épuisé en pleine analyse. Piste de 10 px
   ronde (DESIGN.md « Barres »), libellé et valeur écrits au-dessus. */
.acct-quota + .acct-quota { margin-top: 20px; }
.acct-quota-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin-bottom: 8px; }
.acct-quota-head .num { font-size: 1rem; font-weight: 500; color: var(--text-1); }
.acct-bar { height: 10px; background: rgba(255, 255, 255, .05); border-radius: var(--radius-xs); overflow: hidden; }
.acct-bar i {
  display: block; height: 100%; width: 100%;
  border-radius: inherit;
  background: var(--accent-strong);
  /* Remplissage par transform plutot que par width : animer une largeur force un
     recalcul de mise en page a chaque image, la mise a l'echelle reste sur le
     compositeur. La barre n'a aucun contenu, elle ne peut pas se deformer. */
  transform-origin: left center;
  transform: scaleX(var(--taux, 0));
  transition: transform var(--t);
}
.acct-bar i.proche { background: var(--warn); }
.acct-bar i.plein { background: var(--stop); }

.acct-table { width: 100%; }
.acct-table td, .acct-table th { padding: 8px 10px; }

.acct-ref { display: flex; gap: var(--s2); align-items: center; }
.acct-ref input { flex: 1; min-width: 0; }

.acct-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: var(--s2); }
.acct-stat {
  display: flex; flex-direction: column; gap: 6px; align-items: flex-start;
  padding: 16px; background: var(--verre);
  border: 1px solid var(--border); border-radius: var(--radius-sm);
  color: var(--text-1); font-family: var(--font);
  cursor: pointer; text-align: left; transition: border-color var(--t), background-color var(--t), transform var(--t);
}
.acct-stat:active { transform: scale(.98); }
@media (hover: hover) { .acct-stat:hover { border-color: var(--border-strong); background: rgba(255, 255, 255, .07); } }
.acct-stat .num { font-size: 1.75rem; font-weight: 500; letter-spacing: -0.01em; font-family: var(--font); line-height: 1; }

.acct-check { display: flex; align-items: center; gap: 12px; min-height: 40px; cursor: pointer; color: var(--text-1); font-size: .9375rem; }
.acct-frequence-titre { margin: 20px 0 6px; }
.acct-check input { width: auto; }
#account-content .acct-table { margin-top: 8px; }
#account-content .acct-table td { border-bottom: 1px solid rgba(255, 255, 255, .05); font-size: .9375rem; }
#account-content .acct-table .btn-secondary { min-height: 36px; padding: 8px 14px; font-size: .875rem; }

/* Zone de suppression : signalée par son bouton rouge (.btn-danger, base.css), sans
   rail. L'action reste secondaire, jamais un bouton primaire. */
.acct-btn-danger { color: var(--danger); border-color: var(--danger-border); }

/* Profil garage (2026-10-15), comptes pro : coordonnées en tête des dossiers PDF.
   Aperçu du logo sur fond blanc : c'est le fond du dossier imprimé. */
#account-content .acct-garage .acct-garage-aide { padding: 0 0 16px; }
.acct-garage-duo { display: grid; grid-template-columns: 1fr 1fr; gap: 0 var(--s3); }
.acct-garage-logo-titre { margin: 4px 0 8px; }
.acct-garage-logo { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s3); }
.acct-garage-apercu {
  display: flex; align-items: center; justify-content: center;
  width: 180px; height: 96px; padding: 10px;
  background: var(--bg-inset); border: 1px solid var(--border); border-radius: var(--radius-sm);
}
.acct-garage-apercu img { max-width: 100%; max-height: 100%; object-fit: contain; background: #fff; border-radius: 4px; }
.acct-garage-apercu .section-note { padding: 0 !important; }
.acct-garage-logo-actions { display: flex; flex-wrap: wrap; gap: var(--s2); }
.acct-garage-logo-actions .btn-secondary { min-height: 44px; display: inline-flex; align-items: center; gap: 8px; }
.acct-garage-fichier { position: relative; cursor: pointer; }
/* Champ fichier masqué mais atteignable au clavier : le focus se voit sur la pilule. */
.acct-garage-fichier input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.acct-garage-fichier:focus-within { box-shadow: var(--ring); }
.acct-garage-erreur { margin: 12px 0 0; color: var(--danger); font-size: .9375rem; }

@media (max-width: 560px) {
  .acct-ref { flex-direction: column; align-items: stretch; }
  .acct-garage-duo { grid-template-columns: 1fr; }
  .acct-garage-logo-actions, .acct-garage-logo-actions .btn-secondary { width: 100%; }
  .acct-garage-logo-actions .btn-secondary { justify-content: center; }
  .acct-actions .btn-primary, .acct-actions .btn-secondary { width: 100%; }
}

/* Maillage interne des pages de cote vers les guides */
.cote-guides { margin: var(--s5) 0; padding-top: var(--s4); border-top: 1px solid var(--border); }
.cote-guides h2 { font-size: 1.0625rem; margin-bottom: var(--s3); }
.cote-guides ul { list-style: none; padding: 0; margin: 0 0 var(--s3); display: grid; gap: var(--s2); }
.cote-guides li a { color: var(--text-1); text-decoration: none; border-bottom: 1px solid var(--border); padding-bottom: 6px; display: block; }
.cote-guides li a:hover { color: var(--accent-strong); }

/* ============================================================================
   MENU DU COMPTE (2026-07-23)
   L'en-tête cumulait 14 éléments pour 1 285 px de contenu dans 1 432 px : il
   débordait dès 1 366 px d'écran. Les outils personnels (favoris, comparateur,
   alertes) rejoignent l'espace connecté, la barre publique garde 4 entrées.
   ========================================================================== */
.user-menu { position: relative; display: flex; align-items: center; gap: var(--s2); }

.btn-user-menu { display: inline-flex; align-items: center; gap: 6px; }
.btn-user-menu[aria-expanded="true"] { border-color: var(--accent); }

/* position: absolute suffit ici car aucun ancêtre ne coupe le débordement.
   Vérifié : #app-header n'a ni overflow hidden ni overflow auto. */
.user-dropdown {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  min-width: 220px;
  padding: 6px;
  background: var(--bg-2);
  border: 1px solid var(--border);
  border-radius: 10px;
  box-shadow: 0 12px 32px rgba(0, 0, 0, .45);
  z-index: 2000;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.user-dropdown[hidden] { display: none; }

.ud-item {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  width: 100%; padding: 8px 12px;
  background: none; border: 0; border-radius: 6px;
  color: var(--text-1); font-size: .875rem; font-family: inherit;
  text-align: left; text-decoration: none; cursor: pointer;
  transition: background var(--t);
}
.ud-item:hover { background: var(--bg-3); }
.ud-item:active { transform: translateY(1px); }
.ud-out { color: var(--text-3); }
.ud-sep { height: 1px; margin: 4px 4px; background: var(--border); }

/* Sous 860 px la barre passe en deux rangées : le menu reste accroché à droite. */
@media (max-width: 860px) {
  .user-dropdown { right: 0; left: auto; min-width: 200px; }
}

/* ============================================================================
   VERIFICATION DES PHOTOS (2026-07-23) : dans le dossier approfondi.
   Depuis le 14/10/2026 : plus de rail. Le verdict calculé se lit par sa pastille écrite
   (bleu clair cohérentes, ambre à vérifier, rouge incohérentes) et un voile de tête.
   ========================================================================== */
#listing-content .photo-check {
  margin: 4px 0 0;
  padding: 20px;
  background: rgba(255, 255, 255, .03);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}
#listing-content .photo-check.is-go   { background: linear-gradient(180deg, rgba(124, 192, 240, .10), transparent 60%); }
#listing-content .photo-check.is-warn { background: linear-gradient(180deg, rgba(242, 169, 0, .09), transparent 60%); }
#listing-content .photo-check.is-stop { background: linear-gradient(180deg, rgba(255, 90, 82, .10), transparent 60%); }
.pc-verdict {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 28px;
  margin: 2px 0 12px;
  padding: 4px 12px;
  border-radius: var(--radius-xs);
  background: var(--verre);
  border: 1px solid var(--border-strong);
  font-size: .8125rem;
  font-weight: 500;
  color: var(--text-1);
}
.photo-check.is-go .pc-verdict   { background: var(--accent-strong); border-color: var(--accent-strong); color: #04121f; }
.photo-check.is-warn .pc-verdict { background: var(--warning); border-color: var(--warning); color: #1a1300; }
.photo-check.is-stop .pc-verdict { background: var(--danger); border-color: var(--danger); color: #1a0200; }
.pc-verdict .num { color: inherit; opacity: .75; font-weight: 500; }
/* Signaux de la vérification : lignes à filet, gravité écrite par le titre. */
#listing-content .pc-signals { margin: 8px 0; padding: 0; background: none; box-shadow: none; border-radius: 0; gap: 0; }
.pc-signals .signal-row { display: flex; flex-direction: column; gap: 2px; padding: 10px 0; border-top: 1px solid rgba(255, 255, 255, .06); font-size: .875rem; color: var(--text-2); }
.pc-signals .signal-row:first-child { border-top: 0; }
.pc-signals .signal-row strong { font-weight: 500; color: var(--text-1); }
/* Gravité écrite (la couleur n'est jamais seule) : pastille avant le titre. */
.pc-signals .signal-row:is(.rf-alerte, .rf-attention)::before {
  align-self: flex-start;
  margin-bottom: 4px;
  padding: 2px 10px;
  border-radius: var(--radius-xs);
  font-size: .75rem;
  font-weight: 500;
}
.pc-signals .signal-row.rf-alerte::before { content: "Alerte"; background: var(--danger); color: #1a0200; }
.pc-signals .signal-row.rf-attention::before { content: "Attention"; background: var(--warning); color: #1a1300; }
.pc-obs { display: grid; gap: 8px; margin: 8px 0; padding: 0; list-style: none; color: var(--text-2); }
.pc-obs li { position: relative; padding-left: 28px; font-size: .9375rem; line-height: 1.5; }
.pc-obs li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .15em;
  width: 18px;
  height: 18px;
  background: var(--text-3);
  -webkit-mask: var(--coche-fine) center / contain no-repeat;
  mask: var(--coche-fine) center / contain no-repeat;
}
#listing-content .photo-check .section-note { text-align: left; padding: 8px 0 0; }

/* --- Mes analyses : la bibliotheque du compte ------------------------------
   Zone de recuperation d'un credit deja depense. Les cartes affichent
   l'INSTANTANE pris au moment de l'analyse, pas des donnees live : l'annonce
   peut avoir ete retiree d'AutoScout entre-temps. */
.analyses-summary {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--s4);
    padding: 0 0 20px;
    margin: 20px 0 24px;
    border-bottom: 1px solid var(--border);
    font-family: var(--font);
    font-size: .8125rem;
    font-weight: 500;
    color: var(--text-3);
}
.analyses-summary strong { font-family: var(--font); font-size: 1rem; letter-spacing: 0; color: var(--text-1); font-variant-numeric: tabular-nums; }
.analyses-summary .muted { margin-left: auto; text-transform: none; letter-spacing: 0; font-family: var(--font); font-size: .875rem; color: var(--text-2); }

/* « L'instrument de verre » (14/10/2026) : cartes de liste à double cadre (rayon 24),
   photo en plaque intérieure. Le score calculé se lit ÉCRIT (« 7/10 ») dans une
   pastille teintée selon le verdict, plus un voile de tête ; plus aucun rail. */
.analyses-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr));
    gap: 24px;
    padding-top: 8px;
}

.analysis-card {
    display: grid;
    grid-template-columns: 112px minmax(0, 1fr);
    gap: 14px;
    min-width: 0;
    padding: 6px;
    background: var(--bg-1);
    border: 0;
    border-radius: var(--radius);
    box-shadow: var(--coeur-lueur), var(--coque);
    cursor: pointer;
    transition: box-shadow 300ms var(--ressort), transform var(--t);
}
@media (hover: hover) {
    .analysis-card: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); }
}
.analysis-card:active { transform: scale(.99); }
.analysis-card.is-go { background: var(--bg-1); }
.analysis-card.is-stop { background: var(--bg-1); }

.an-photo { background: var(--bg-3); border-radius: calc(var(--radius) - 6px); overflow: hidden; }
.an-photo img { width: 100%; height: 100%; min-height: 112px; object-fit: cover; display: block; }
.an-nophoto {
    display: flex; align-items: center; justify-content: center;
    height: 100%; min-height: 112px; color: var(--text-4);
}

.an-body { padding: 10px 12px 10px 0; min-width: 0; display: flex; flex-direction: column; gap: 8px; }
.an-title {
    margin: 0; font-size: 1.0625rem; line-height: 1.3; font-weight: 500; letter-spacing: -0.01em;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
    overflow: hidden; overflow-wrap: anywhere;
}
.an-specs { margin: 0; font-family: var(--font-mono); font-size: .8125rem; color: var(--text-2); font-variant-numeric: tabular-nums; }

.an-tags { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.an-tag {
    display: inline-flex; align-items: center; min-height: 24px;
    font-size: .75rem; font-weight: 500; padding: 0 10px; border-radius: var(--radius-pill);
    background: var(--verre); border: 1px solid var(--border-strong); color: var(--text-2);
}
.an-tag.an-deep { background: var(--accent-dim); border-color: var(--accent-border); color: var(--accent-strong); }
.an-score {
    display: inline-flex; align-items: center; min-height: 24px; padding: 0 10px; border-radius: var(--radius-pill);
    font-size: .8125rem; font-weight: 500; font-variant-numeric: tabular-nums;
    background: var(--verre); border: 1px solid var(--border-strong); color: var(--text-1);
}
.analysis-card.is-go .an-score { background: var(--accent-strong); border-color: var(--accent-strong); color: #04121f; }
.analysis-card.is-warn .an-score { background: var(--warning); border-color: var(--warning); color: #1a1300; }
.analysis-card.is-stop .an-score { background: var(--danger); border-color: var(--danger); color: #1a0200; }
/* Même note sur les cartes des favoris (05/11/2026) : étiquette du niveau, puis la note colorée et écrite. */
.card-analyse { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 2px 0 10px; }
.card-analyse.is-go .an-score { background: var(--accent-strong); border-color: var(--accent-strong); color: #04121f; }
.card-analyse.is-warn .an-score { background: var(--warning); border-color: var(--warning); color: #1a1300; }
.card-analyse.is-stop .an-score { background: var(--danger); border-color: var(--danger); color: #1a0200; }

.an-foot {
    margin-top: auto; display: flex; justify-content: space-between; gap: var(--s2);
    font-size: .8125rem; color: var(--text-3);
    font-variant-numeric: tabular-nums;
}
.an-price { color: var(--text-1); font-weight: 500; }

@media (max-width: 480px) {
    .analyses-summary .muted { margin-left: 0; width: 100%; }
}

/* ===== Mes recherches =====
   Une recherche enregistree est un JEU DE CRITERES, pas une etiquette : la carte les
   montre en clair, en francais. Refonte du 05/11/2026 (Charles : « avec un certain
   nombre, c'est pas lisible du tout, une photo a la une pour situer rapidement ») :
   chaque carte s'ouvre sur la photo d'une vraie annonce de la recherche (ou un
   monogramme en texte). Second passage le meme jour (« trop grosses, beaucoup trop
   grosses, faut compacter ») : le nom est ecrit SUR la photo, dans un voile opaque,
   les trois faits tiennent sur une ligne sous la photo et les autres criteres sur une
   ligne tronquee ; photo en 2:1, grille de 250 px. Le nom est le bouton qui relance,
   son voile invisible couvre la carte. Au telephone, une ligne de 96 px par recherche. */
.srch-compte {
    margin: 24px 0 0;
    font-size: .9375rem;
    color: var(--text-2);
}
.srch-compte .num { color: var(--text-1); font-weight: 500; }
.srch-compte-max { color: var(--text-3); }

.srch-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 250px), 1fr));
    gap: 20px;
    margin-top: 20px;
}
/* Lu par les lecteurs d'écran, invisible à l'œil (libellés des trois faits). */
.srch-sr {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

.srch-card {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "une" "bas";
    background: var(--bg-1);
    border: 0;
    border-radius: var(--radius);
    box-shadow: var(--coeur-lueur), var(--coque);
    cursor: pointer;
    transition: box-shadow 300ms var(--ressort);
}
@media (hover: hover) {
    .srch-card: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); }
    .srch-card:hover .srch-une-img { }
    .srch-card:hover .srch-go { transform: translate(2px, -1px) scale(1.06); }
}
/* Le focus du nom (bouton) s'affiche sur toute la carte, qu'il commande. */
.srch-card:has(.srch-titre:focus-visible) {
    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);
}
/* Plus spécifique que la règle commune de base.css (:root :is(...):focus-visible). */
.srch-grid .srch-card .srch-name .srch-titre:focus-visible { outline: none !important; }

/* --- La une : photo d'annonce, sinon monogramme --- */
.srch-une {
    grid-area: une;
    position: relative;
    margin: 6px 6px 0;
    aspect-ratio: 2 / 1;
    border-radius: calc(var(--radius) - 6px);
    overflow: hidden;
    background:
        var(--bg-2);
    isolation: isolate;
}
.srch-une-img {
    position: absolute;
    inset: 0;
    z-index: 1;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0;
    transition: opacity 240ms var(--ressort), transform 240ms var(--ressort);
}
.srch-une[data-etat="photo"] .srch-une-img { opacity: 1; }
/* Voile opaque du bas, photo ou non : le nom y est écrit. Au moins 0,78 sous le nom et
   0,9 sous la ligne de contexte, de quoi tenir 4,5:1 sur une photo toute blanche. */
.srch-une::after {
    content: '';
    position: absolute;
    inset: 28% 0 0;
    z-index: 1;
    background: linear-gradient(180deg, rgba(5, 6, 8, 0) 0%, rgba(5, 6, 8, .78) 46%, rgba(5, 6, 8, .93) 100%);
    pointer-events: none;
}
/* Monogramme : le modèle en très grand, en filigrane, sous le voile. */
.srch-mono {
    position: absolute;
    inset: 0;
    padding: 44px 16px 0;
    font-size: 2.75rem;
    font-weight: 500;
    letter-spacing: -0.02em;
    line-height: .9;
    color: rgba(242, 244, 248, .16);
    overflow: hidden;
    overflow-wrap: anywhere;
}
/* Attente de la photo : un reflet passe sur le monogramme, rien ne saute à l'arrivée. */
.srch-une[data-etat="attente"]::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 2;
    background: linear-gradient(100deg, transparent 30%, rgba(255, 255, 255, .06) 50%, transparent 70%);
    transform: translateX(-100%);
    animation: srch-reflet 1.6s var(--ressort) infinite;
    pointer-events: none;
}
@keyframes srch-reflet { to { transform: translateX(100%); } }

.srch-une-pays {
    top: 10px;
    left: 10px;
    z-index: 3;
    pointer-events: none;
}
.srch-une-pays .srch-zone {
    font-size: .75rem;
    font-weight: 500;
    letter-spacing: .02em;
    color: var(--text-1);
}
.srch-zone {
    display: inline-flex;
    align-items: center;
    white-space: nowrap;
}

/* --- Nom et contexte, écrits sur la photo --- */
.srch-texte {
    grid-area: une;
    align-self: end;
    z-index: 3;
    min-width: 0;
    margin: 0 6px;
    padding: 0 14px 10px;
}
.srch-name {
    margin: 0;
    min-width: 0;
    font-size: 1.0625rem;
    font-weight: 500;
    letter-spacing: -0.01em;
    line-height: 1.25;
    color: var(--text-1);
}
.srch-titre {
    display: block;
    width: 100%;
    margin: 0;
    padding: 0;
    border: 0;
    background: none;
    font: inherit;
    letter-spacing: inherit;
    color: inherit;
    text-align: left;
    cursor: pointer;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
/* Voile invisible du bouton : toute la carte relance ; seule la croix passe au-dessus. */
.srch-titre::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 2;
    border-radius: var(--radius);
}
.srch-sous {
    margin: 2px 0 0;
    font-size: .8125rem;
    line-height: 1.35;
    color: var(--text-2);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.srch-sous:empty, .srch-sous.seul-pays { display: none; }
.srch-sous .num { color: var(--text-1); }
.srch-sous-pays { display: none; }   /* sur ordinateur, la pastille de la photo le dit */
.srch-sous-pays + .srch-sep { display: none; }
.srch-sep { color: var(--text-3); font-weight: 400; }

/* --- Sous la photo : les faits, les autres critères, la flèche --- */
.srch-bas {
    grid-area: bas;
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
    padding: 10px 12px 12px 20px;
}
.srch-lignes {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.srch-faits {
    margin: 0;
    font-size: .875rem;
    font-weight: 500;
    line-height: 1.35;
    color: var(--text-1);
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
}
.srch-faits.libre { font-weight: 400; color: var(--text-3); }
.srch-faits > .num { white-space: nowrap; }   /* la ligne se replie entre deux faits, jamais dans un fait */
.srch-crit {
    margin: 0;
    font-size: .8125rem;
    line-height: 1.35;
    color: var(--text-3);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.srch-crit .srch-sep { color: var(--text-4); }
/* Pastille fléchée (même dessin que .btn-fleche) : dit que la carte fait avancer. */
.srch-go {
    flex: none;
    width: 32px;
    height: 32px;
    border-radius: var(--radius-sm);
    background:
        center / 14px 14px no-repeat 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='white' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 17 17 7M8 7h9v9'/%3E%3C/svg%3E"),
        var(--accent);
    transition: transform 240ms var(--ressort);
}

/* Suppression et renommage (05/11/2026) : ronds de verre posés sur la photo, au-dessus du
   voile du nom ; le crayon à gauche de la croix. */
.srch-del,
.srch-ren {
    position: absolute;
    top: 12px;
    right: 12px;
    z-index: 4;
    display: inline-grid;
    place-items: center;
    width: 36px;
    height: 36px;
    padding: 0;
    color: var(--text-1);
    background: rgba(8, 10, 14, .72);
    border: 1px solid rgba(255, 255, 255, .16);
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: color var(--t), border-color var(--t), background-color var(--t);
}
@media (hover: hover) { .srch-del:hover { color: var(--danger); border-color: var(--danger-border); background: rgba(8, 10, 14, .88); } }
.srch-ren { right: 56px; }
@media (hover: hover) { .srch-ren:hover { color: var(--accent-strong); border-color: var(--accent); background: rgba(8, 10, 14, .88); } }

/* --- Téléphone : une ligne de 96 px par recherche --- */
@media (max-width: 599px) {
    .srch-grid { gap: 14px; margin-top: 14px; }
    .srch-card {
        grid-template-columns: 84px minmax(0, 1fr);
        grid-template-areas: "une texte" "une bas";
        align-content: center;
        min-height: 100px;
    }
    .srch-une {
        aspect-ratio: auto;
        min-height: 84px;
        margin: 6px 0 6px 6px;
    }
    .srch-une::after, .srch-une-pays { display: none; }
    .srch-mono { padding: 8px; font-size: 1.0625rem; color: rgba(242, 244, 248, .24); }
    .srch-texte {
        grid-area: texte;
        align-self: end;
        margin: 0;
        padding: 8px 52px 0 12px;
    }
    .srch-name { font-size: .9375rem; }
    .srch-sous { font-size: .75rem; }
    .srch-sous.seul-pays { display: block; }
    .srch-sous-pays { display: inline; }
    .srch-sous-pays + .srch-sep { display: inline; }
    .srch-bas {
        grid-area: bas;
        align-self: start;
        padding: 4px 12px 8px;
    }
    .srch-faits { font-size: .8125rem; -webkit-line-clamp: 1; }
    .srch-crit, .srch-go { display: none; }
    /* Croix en haut, crayon en bas : deux cibles de 44 px dans une ligne de 100 px. */
    .srch-del,
    .srch-ren {
        top: 4px;
        right: 6px;
        width: 44px;
        height: 44px;
        color: var(--text-2);
        background: var(--verre);
        border-color: var(--border);
    }
    .srch-ren { top: auto; bottom: 4px; }
    .srch-bas { padding-right: 52px; }
}

@media (prefers-reduced-motion: reduce) {
    .srch-card, .srch-une-img, .srch-go { transition: none; }
    .srch-card:hover .srch-une-img, .srch-card:hover .srch-go { transform: none; }
    .srch-une[data-etat="attente"]::before { animation: none; display: none; }
}

/* Commentaire de groupe (outil interne) : le texte doit etre LISIBLE et MODIFIABLE
   avant d'etre copie, pas juste affiche. C'est Charles qui signe le commentaire. */
.grp-box { max-width: 640px; width: 92vw; }
.grp-texte {
  width: 100%;
  margin-top: var(--s3);
  padding: var(--s3);
  background: var(--bg-0);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text-1);
  font-family: var(--font);
  font-size: .875rem;
  line-height: 1.6;
  resize: vertical;
}
.grp-texte:focus { outline: none; border-color: var(--accent); }
.grp-actions { display: flex; gap: var(--s3); margin-top: var(--s3); }
.grp-actions .btn-secondary { display: inline-flex; align-items: center; text-decoration: none; }

/* ===== BLUR GATE : montrer la FORME, jamais la valeur =====
   Le serveur n'envoie aucune donnee au visiteur non inscrit : ces blocs n'ont donc rien
   a cacher, ils dessinent seulement la place qu'occupe l'information. Le flou n'est pas
   la protection (il se leve dans l'inspecteur en trois secondes), il est la PROMESSE :
   on voit qu'il y a un calcul detaille, combien de lignes, et ce qu'on gagne a s'inscrire. */
.gate-wrap { position: relative; }
.gate-blur {
  filter: blur(4.5px);
  opacity: .55;
  user-select: none;
  pointer-events: none;
}
.gate-val { font-family: var(--font-mono); color: var(--text-2); }
.gate-val.big { font-size: 1.5rem; color: var(--text-1); }

.gate-cta {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: var(--s4);
  text-align: center;
  /* Degrade plutot qu'un voile plein : on continue de percevoir la structure derriere,
     c'est elle qui donne envie. Un aplat opaque annulerait tout l'interet du procede. */
  background: linear-gradient(180deg,
      color-mix(in srgb, var(--bg-1) 55%, transparent) 0%,
      color-mix(in srgb, var(--bg-1) 92%, transparent) 42%,
      var(--bg-1) 100%);
  border-radius: var(--radius-sm);
}
.gate-cta-titre {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--font); font-size: .8125rem; color: var(--text-1);
}
.gate-cta p {
  margin: 0; max-width: 46ch;
  font-size: .8125rem; line-height: 1.5; color: var(--text-2);
}
.gate-cta .btn-primary { margin-top: 2px; }
.gate-cta-sous { font-size: .75rem; color: var(--text-3); }

/* Signaux : le CTA suit les items au lieu de les recouvrir, les titres d'alerte doivent
   rester lisibles. */
.signals-box .gate-cta {
  position: static;
  margin-top: var(--s3);
  border: 1px solid var(--border);
  background: var(--bg-inset);
}
/* Verdict : aucun contenu flouté derrière la porte, la carte ne mesure que son titre.
   En absolu, le texte recouvrait le titre et le bouton sortait de la carte (coupé en
   bureau, invisible en mobile, audit du 13/10/2026). */
.verdict-card .gate-cta { position: static; }
/* La case maitresse de la barre affichait « - » au visiteur non inscrit : un tiret ne
   donne envie de rien. Un cadenas cliquable dit ce qui manque et comment l'obtenir. */
/* Pilule de verre teintée, texte bleu clair (le bleu vif n'est jamais une couleur de texte). */
.db-gate {
  display: inline-flex; align-items: center; gap: 6px;
  min-height: 28px;
  padding: 2px 12px;
  background: color-mix(in srgb, var(--accent) 14%, transparent);
  border: 1px solid var(--accent-border);
  border-radius: var(--radius-pill);
  color: var(--accent-strong);
  font-family: var(--font); font-size: .875rem; font-weight: 500; letter-spacing: 0;
  cursor: pointer;
  transition: background-color var(--t);
}
.db-gate:hover { background: color-mix(in srgb, var(--accent) 24%, transparent); }

/* ===== Formulaire replie apres recherche (audit desktop) =====
   Il fallait parcourir 851 px sur un ecran de 900 avant la premiere annonce. Une fois
   la question posee, c'est la reponse qui compte : le formulaire s'efface derriere une
   barre de resume (Search.replierFormulaire) qui garde les criteres sous les yeux.
   Refonte du 13/10/2026 : une pastille par critere, chacune retirable (sauf marque et
   pays) ou cliquable pour rouvrir le formulaire sur son champ ; le nombre d'annonces et
   un vrai bouton « Modifier la recherche » a droite. */
.search-bar.is-replie { display: none; }

/* « L'instrument de verre » (14/10/2026) : la barre est une plaque à double cadre ; les
   critères sont des pilules de verre de 32 px, la croix de retrait dans un rond de 20 px
   (zone touchable de 28, 44 au doigt). */
.search-resume {
  display: flex;
  align-items: center;
  gap: var(--s3) var(--s4);
  width: 100%;
  margin: 8px 0 28px;
  padding: 12px 12px 12px 24px;
  background: var(--bg-1);
  border: 0;
  border-radius: var(--radius);
  box-shadow: var(--coeur-lueur), var(--coque);
  color: var(--text-2);
}
.search-resume .sr-titre {
  flex: 0 0 auto;
  font-family: var(--font);
  font-size: .8125rem;
  font-weight: 500;
  color: var(--text-3);
}
.search-resume .sr-pastilles {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--s2);
  margin: 0;
  padding: 0;
  list-style: none;
}
.search-resume .sr-pastille {
  display: inline-flex;
  align-items: center;
  max-width: 100%;
  height: 32px;
  background: var(--verre);
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  transition: border-color var(--t), background-color var(--t);
}
@media (hover: hover) {
  .search-resume .sr-pastille:hover { border-color: var(--border-strong); background: rgba(255, 255, 255, .07); }
}
.search-resume .sr-p-corps {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  height: 100%;
  padding: 0 14px;
  background: none;
  border: 0;
  border-radius: var(--radius-pill);
  font-family: var(--font);
  font-size: .875rem;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  color: var(--text-1);
  white-space: nowrap;
  cursor: pointer;
}
.search-resume .sr-p-corps > span { overflow: hidden; text-overflow: ellipsis; }
.search-resume .sr-p-corps .flag { flex: 0 0 auto; border-radius: 2px; }
.search-resume .is-retirable .sr-p-corps { padding-right: 4px; }
/* Croix dans un rond de 20 px dessiné au centre d'une zone de 28 px. */
.search-resume .sr-p-retirer {
  flex: 0 0 auto;
  display: inline-grid;
  place-items: center;
  width: 28px;
  height: 28px;
  margin-right: 2px;
  padding: 0;
  background: radial-gradient(circle 10px, rgba(255, 255, 255, .09) 96%, transparent 100%);
  border: 0;
  border-radius: var(--radius-sm);
  color: var(--text-2);
  cursor: pointer;
  transition: background-color var(--t), color var(--t);
}
.search-resume .sr-p-retirer svg { width: 11px; height: 11px; }
@media (hover: hover) {
  .search-resume .sr-p-retirer:hover { background: radial-gradient(circle 10px, var(--danger-dim) 96%, transparent 100%); color: var(--danger); }
}
.search-resume .sr-fin {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: var(--s3);
  margin-left: auto;
}
.search-resume .sr-nb {
  font-family: var(--font);
  font-variant-numeric: tabular-nums;
  font-size: .875rem;
  color: var(--text-2);
  white-space: nowrap;
}
.search-resume .sr-nb strong { font-weight: 500; color: var(--text-1); }
.search-resume .sr-modifier {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  white-space: nowrap;
}
@media (max-width: 767px) {
  /* Mobile : titre, pastilles qui passent a la ligne (aucun defilement cache), puis
     le nombre et le bouton sur une ligne, le bouton prenant toute la place restante.
     Pastilles et croix a 44 px : ce sont des cibles au doigt. */
  .search-resume { flex-direction: column; align-items: stretch; padding: 16px; }
  .search-resume .sr-pastille { height: auto; }
  .search-resume .sr-p-corps { min-height: 44px; padding: 0 var(--s3); }
  .search-resume .is-retirable .sr-p-corps { padding-right: 0; }
  .search-resume .sr-p-retirer { width: 44px; height: 44px; margin-right: 0; }
  .search-resume .sr-fin { margin-left: 0; }
  .search-resume .sr-modifier { flex: 1 1 auto; min-height: 44px; }
}

/* Boite « Collez une annonce » repliee quand des resultats sont affiches
   (Search.replierCollage) : une ligne qui se deplie au clic. Sur la page vierge elle
   reste ouverte, c'est un point d'entree. */
/* Boîte de collage de la page Recherche, dépliée : une carte à double cadre (rayon 24),
   champ enfoncé et bouton « Analyser » fléché côte à côte. Repliée : une pilule de verre.
   Sélecteurs par #ingest-search : la boîte de la landing (landing.css) n'est pas touchée. */
#ingest-search.ingest-inline {
  margin: 0 0 32px;
  padding: 24px 24px 20px;
  background: var(--bg-1);
  border: 0;
  border-radius: var(--radius);
  box-shadow: var(--coeur-lueur), var(--coque);
}
#ingest-search:not(.is-replie) > label { display: block; margin-bottom: 12px; font-size: 1.0625rem; font-weight: 500; letter-spacing: -0.01em; color: var(--text-1); }
#ingest-search .ingest-row { gap: 12px; }
:root #ingest-search .ingest-row textarea {
  min-height: 52px;
  padding: 14px 16px;
  background-color: var(--bg-inset);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text-1);
  font-family: var(--font);
  font-size: .9375rem;
  line-height: 1.5;
}
#ingest-search .ingest-row textarea:hover { border-color: var(--border-strong); }
#ingest-search .ingest-row .btn-primary { align-self: flex-start; }
#ingest-search .ingest-hint { margin-top: 10px; font-size: .875rem; color: var(--text-3); }
.ingest-inline > .ingest-deplier { display: none; }
:root #ingest-search.ingest-inline.is-replie {
  padding: 0;
  background: var(--verre);
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  box-shadow: none;
}
.ingest-inline.is-replie { margin: 0 0 var(--s4); padding: 0; }
.ingest-inline.is-replie > :not(.ingest-deplier) { display: none; }
.ingest-inline.is-replie > .ingest-deplier {
  display: flex;
  align-items: center;
  gap: var(--s2);
  width: 100%;
  min-height: 44px;
  padding: 10px 16px;
  background: none;
  border: 0;
  border-radius: inherit;
  font-family: var(--font);
  font-size: .875rem;
  font-weight: 500;
  color: var(--text-2);
  text-align: left;
  cursor: pointer;
  transition: color var(--t);
}
.ingest-inline.is-replie > .ingest-deplier svg { flex: 0 0 auto; color: var(--accent-strong); }
.ingest-inline.is-replie > .ingest-deplier:hover { color: var(--text-1); }
@media (max-width: 767px) {
  :root #ingest-search.ingest-inline.is-replie { border-radius: var(--radius); }
  #ingest-search.ingest-inline { padding: 20px; }
}
/* Message de la boîte de collage (Search.messageCollage), landing et recherche : bloc
   dans la carte, sous le champ. Pastille ÉCRITE (« À faire » ambre, « Échec » rouge),
   voile de tête du même signal, aucune bordure colorée (DESIGN.md). */
.ingest-box .ingest-message {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 12px;
  margin-top: 12px;
  padding: 14px 16px;
  background: rgba(255, 255, 255, .035);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}
.ingest-box .ingest-message.is-afaire { background: rgba(255, 255, 255, .035); }
.ingest-box .ingest-message.is-echec { background: rgba(255, 255, 255, .035); }
.ingest-box .ingest-message > p { flex: 1 1 100%; margin: 0; padding: 0; font-size: .9375rem; line-height: 1.5; color: var(--text-1); text-align: left; }
.ingest-box .ingest-message.is-encours > p { color: var(--text-2); }
.ingest-pastille {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 28px;
  padding: 4px 12px;
  border-radius: var(--radius-xs);
  font-size: .8125rem;
  font-weight: 500;
}
.ingest-pastille svg { flex: none; }
.is-afaire > .ingest-pastille { background: var(--warning); color: #1a1300; }
.is-echec > .ingest-pastille { background: var(--danger); color: #1a0200; }
.ingest-box .ingest-message > .btn-secondary { flex: none; }

/* ==========================================================================
   FICHE EN DEUX COLONNES (audit desktop 2026-08-03)

   La fiche etait bridee a UNE colonne de 1080 px, pour une bonne raison : en deux
   colonnes egales, les tableaux de caracteristiques s'etiraient et devenaient
   illisibles. Le bridage reglait ce probleme en en creant un autre : 360 px de
   largeur perdus sur un ecran de 1440, et 2 893 px de hauteur a parcourir.

   La solution n'est pas deux colonnes EGALES mais deux colonnes de NATURES
   differentes : une colonne de decision, large, qui garde l'ordre decisionnel
   intact, et une colonne de reference, etroite, ou les tableaux retrouvent
   justement la largeur qui les rend lisibles.

   Aucun `order` ni `grid-area` : main et aside sont deux conteneurs successifs du
   DOM, lus dans cet ordre par un lecteur d'ecran.
   ========================================================================== */
.listing-grid {
  grid-template-columns: minmax(0, 1fr) 340px;
  gap: 28px;
  align-items: start;
  max-width: none;
}
.listing-main,
.listing-aside {
  display: flex;
  flex-direction: column;
  gap: 28px;
  min-width: 0;
}
/* La colonne de référence suit la lecture : on garde les caractéristiques sous les
   yeux en lisant le calcul d'import, sans remonter. Collée SOUS l'îlot et la barre de
   décision (--haut-collant + --barre-h), SEULEMENT si elle tient entière à l'écran
   au-dessus du bouton d'avis (84 px du bas) : Listing.brancherAsideCollant() pose sinon
   .aside-libre et elle défile avec la page. Jamais de défilement interne (06/11/2026,
   Charles : un bloc déplié était coupé net au ras du pied de page). */
.listing-aside {
  position: sticky;
  top: calc(var(--haut-collant) + var(--barre-h));
}
.listing-aside.aside-libre { position: static; }
/* Dans la colonne étroite, les blocs respirent moins : leur contenu est dense et
   consultatif, pas décisionnel. */
#listing-content .listing-aside .listing-section { padding: 20px; }
#listing-content .listing-aside .listing-section > h2 { margin-bottom: 12px; font-size: 1.0625rem; }

@media (max-width: 1100px) {
  /* Sous cette largeur, deux colonnes écraseraient les deux : retour à une seule,
     et l'aside reprend sa place naturelle APRÈS le contenu principal. */
  .listing-grid { grid-template-columns: minmax(0, 1fr); max-width: none; gap: 24px; }
  .listing-main, .listing-aside { gap: 24px; }
  .listing-aside { position: static; max-height: none; overflow: visible; margin: 0; padding: 0; }
}

/* ===== Menu « Plus » des actions secondaires ===== */
/* Menu déroulant de DESIGN.md, dessiné dans components.css (« Fiche annonce ») depuis
   le 14/10/2026. Il ne reste ici que la garde d'affichage : un menu fermé ne s'affiche
   jamais, quelle que soit la règle de mise en page qui le vise. */
.more-menu[hidden] { display: none; }

/* ===== Feuille de route : mode d'emploi par étape (2026-10-13) =====
   « L'instrument de verre » (14/10/2026) : chaque étape est une carte interne, son rond
   numéroté porte l'ordre (une information, pas un décor), la case à cocher reste à sa
   place. La grille appartient au <label> (voir « CORRECTION roadmap-step »). Le mode
   d'emploi est replié sous chaque étape, hors du <label>, aligné sur sa colonne de
   texte (case 20 px + rond 28 px + deux gouttières de 12 px). */
.roadmap-card { border: 0; }
.roadmap-list { display: flex; flex-direction: column; gap: 10px; margin: 0; padding: 0; list-style: none; }
.roadmap-step {
    display: block;
    min-height: 0;
    padding: 14px 16px;
    background: rgba(255, 255, 255, .03);
    border: 1px solid rgba(255, 255, 255, .07);
    border-radius: var(--radius);
    transition: border-color var(--t), background-color var(--t);
}
.roadmap-step > label {
    display: grid;
    grid-template-columns: auto 28px minmax(0, 1fr);
    align-items: start;
    gap: 12px;
    padding: 0;
    cursor: pointer;
}
.roadmap-step > label > input { margin-top: 4px; }
.roadmap-num {
    display: grid;
    place-items: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--verre);
    border: 1px solid var(--border-strong);
    color: var(--text-1);
    font-family: var(--font);
    font-size: .8125rem;
    font-weight: 500;
    font-variant-numeric: tabular-nums;
    transition: background-color var(--t), border-color var(--t), color var(--t);
}
.roadmap-body { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.roadmap-t { font-size: .9375rem; font-weight: 500; line-height: 1.4; color: var(--text-1); }
.roadmap-d { font-size: .875rem; line-height: 1.55; color: var(--text-2); }
.roadmap-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 6px;
    margin-top: 4px;
    font-family: var(--font);   /* porte des montants (« 150 à 300 € ») : Geist tabulaire, plus la Mono */
    font-size: .8125rem;
    letter-spacing: 0;
    text-transform: none;
    color: var(--text-3);
}
.roadmap-meta .ico { vertical-align: -2px; }
.roadmap-meta a { color: var(--accent-strong); text-decoration: underline; text-underline-offset: 3px; }
/* Étape faite : rond plein en bleu vif (comme une case cochée), titre barré. */
.roadmap-step.done { background: rgba(255, 255, 255, .02); }
.roadmap-step.done .roadmap-num { background: var(--accent); border-color: var(--accent); color: #fff; }
.roadmap-step.done .roadmap-t { text-decoration: line-through; text-decoration-color: var(--text-3); color: var(--text-3); }

details.rm-plus {
    margin: 6px 0 0 calc(20px + 28px + 24px);
    border: 0;
    background: none;
}
details.rm-plus > summary {
    min-height: 44px;
    padding: 0;
    gap: 8px;
    font-size: .875rem;
    font-weight: 500;
    color: var(--accent-strong);
}
@media (hover: hover) { details.rm-plus > summary:hover { background: none; text-decoration: underline; text-underline-offset: 3px; } }
details.rm-plus[open] > summary { border-bottom: 0; }
/* Marqueur : le « + » commun à tous les blocs repliés du site (details summary::after). */
.rm-plus-titre { white-space: nowrap; }
/* « details[open] summary::after » vise aussi les summary DESCENDANTS du bloc ouvert :
   sans ceci, chaque étape repliée affichait la croix d'un bloc ouvert. */
details.rm-plus:not([open]) > summary::after { transform: none; }
.rm-plus-compte {
    font-family: var(--font);
    font-size: .8125rem;
    font-weight: 500;
    color: var(--text-3);
}
/* Mode d'emploi réservé (19/10/2026) : même place que « Comment faire », non cliquable. */
.rm-verrou {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    min-height: 44px;
    margin: 6px 0 0 calc(20px + 28px + 24px);
    font-size: .875rem;
    font-weight: 500;
    color: var(--text-2);
}
.rm-verrou svg { flex: none; color: var(--text-3); }
.rm-verrou .rm-plus-compte span { white-space: nowrap; }
.rm-verrou-pied { margin: 20px 0 0; padding-top: 20px; border-top: 1px solid var(--border); }
.rm-verrou-pied p { margin: 0 0 12px; max-width: 68ch; font-size: .9375rem; line-height: 1.6; color: var(--text-2); }
.rm-verrou-pied .rm-verrou-aussi { margin: 10px 0 0; font-size: .875rem; }
.rm-verrou-aussi a { color: var(--accent-strong); text-decoration: underline; text-underline-offset: 3px; }
.rm-plus-corps { padding: 0 0 6px; font-size: .875rem; line-height: 1.6; color: var(--text-2); }
.rm-plus-corps p { margin: 0 0 10px; max-width: 68ch; }
.rm-plus-corps .rm-plus-h {
    margin: 12px 0 6px;
    font-family: var(--font);
    font-size: .8125rem;
    font-weight: 500;
    color: var(--text-3);
}
.rm-plus-corps ul { display: grid; gap: 4px; margin: 0; padding-left: 1.1em; }
.rm-plus-corps li { margin: 0; }
/* Sources officielles : liens soulignés, date de vérification quand le serveur la sert. */
.rm-plus-corps .rm-liens { padding-left: 0; list-style: none; gap: 0; }
.rm-plus-corps .rm-liens a {
    display: inline-block;
    padding: 10px 0;
    color: var(--accent-strong);
    text-decoration: underline;
    text-underline-offset: 3px;
    overflow-wrap: anywhere;
}
.rm-verifie { font-family: var(--font-mono); font-size: .75rem; color: var(--text-3); white-space: nowrap; }
@media (max-width: 640px) {
    .roadmap-step { padding: 12px 14px; }
    .roadmap-step > label { grid-template-columns: auto 26px minmax(0, 1fr); gap: 10px; }
    .roadmap-num { width: 26px; height: 26px; }
    details.rm-plus { margin-left: 0; }
}

/* ===== Passe de finition (13/10/2026) =====
   Chasse fixe : les données des cartes, des étapes d'import et des favoris s'alignent
   comme le reste des nombres du site (règle « Chasse fixe » de DESIGN.md). */
.spec, .spec-tag, .roadmap-meta, .rm-plus-compte { font-variant-numeric: tabular-nums; }
/* Offre du dossier dans la fiche : la section qui l'accueille porte déjà le cadre, la
   carte d'offre n'en ajoute pas un second (pas de carte dans une carte). */
.listing-section .js-dossier-offre { background: none; border: 0; border-radius: 0; padding: 0; }
/* Page Recherche : le pied de page reste sous la ligne de flottaison. Visible au premier
   affichage, il était repoussé par le chargement puis remontait sur une recherche vide. */
#page-search { min-height: 100vh; }
/* Note de surveillance des favoris : alignée sur le titre et les classeurs, pas centrée
   dans un bloc de 78 caractères collé à gauche. */
#fav-surveillance { text-align: left; }

/* ==========================================================================
   FICHE RÉORGANISÉE (24/10/2026, « l'interface de la fiche est trop fouillis »)

   Même thème, autre structure : favori rond à côté du prix, deux actions visibles (le
   reste dans « Plus »), blocs de consultation REPLIÉS avec une information utile sous le
   titre, blocs de vente après l'analyse et le marché. Audit : docs/audit-fiche-2026-10-24/.
   ========================================================================== */

/* Prix et favori sur une même ligne : le bouton rond est l'action de garde, pas un bouton
   de plus dans la rangée d'actions. */
.listing-prix-ligne { display: flex; align-items: center; justify-content: flex-end; gap: 14px; }
:root .btn-fav.btn-fav-rond {
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    min-width: 44px;
    min-height: 44px;
    padding: 0;
    border-radius: var(--radius-sm);
}
:root .btn-fav.btn-fav-rond .ico { margin: 0; }

/* Blocs vides d'une colonne : un conteneur sans contenu comptait quand même un écart de 28 px
   (#listing-pro, #listing-garantie, #listing-deep...). */
#listing-content .listing-main > :empty { display: none; }
#listing-content .deep-cta-wrap:empty { display: none; }

/* Bloc replié : le titre et UNE information utile dans le résumé, le chevron commun au bout. */
details.repli > summary {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    min-height: 44px;
    padding: 2px 44px 2px 0;
    cursor: pointer;
    list-style: none;
    border-radius: 14px;
}
details.repli > summary::-webkit-details-marker { display: none; }
details.repli > summary::after { position: absolute; right: 0; top: 50%; margin: -10px 0 0; }
@media (hover: hover) { details.repli > summary:hover { background: none; } }
details.repli[open] > summary { border-bottom: 0; margin-bottom: 14px; }
#listing-content .repli .repli-titre {
    margin: 0;
    font-size: 1.0625rem;
    font-weight: 500;
    letter-spacing: -0.01em;
    line-height: 1.25;
    text-transform: none;
    color: var(--text-1);
}
.repli-resume { font-size: .875rem; line-height: 1.4; color: var(--text-2); font-variant-numeric: tabular-nums; }
.repli-resume .lo-sep { margin: 0 6px; }
/* Fiche fiabilité : le premier bloc n'a plus de filet, il suit directement le résumé. */
.repli-corps > .k-block:first-child,
.repli-corps > .k-caveat + .k-block { border-top: 0; padding-top: 4px; }
.repli-corps > .equip-premium { margin-bottom: 12px; }

/* Analyse IA : la note et le prix max sont dans la barre de décision, la carte garde le
   jugement en une phrase. */
#listing-content .verdict-head { grid-template-columns: minmax(0, 1fr); }

/* Actions : « Message vendeur » et « Plus » côte à côte sur téléphone (04/11/2026 : « Poser
   une question » retiré, la conversation a sa ligne dans « Aller plus loin »). */
@media (max-width: 768px) {
    .listing-prix-ligne { justify-content: flex-start; }
    /* Au moins 24 px entre deux blocs de la fiche (les marges allaient de 20 à 24). */
    #listing-content :is(.listing-header, .decision-bar, .porte-fiche, .listing-gallery, .listing-thumbs,
        .vendeur-dit, .listing-header-actions, .key-specs, .signals-box) { margin-bottom: 24px; }
    #listing-content .listing-thumbs { margin-top: -8px; }
    #listing-content :is(.listing-main, .listing-aside) { gap: 24px; }
}