:root {
  --bg: #0f1115;
  --panel: #171a21;
  --panel2: #1e222b;
  --border: #2a2f3a;
  --text: #e7e9ee;
  --muted: #8b90a0;
  --accent: #6ea8fe;
  --lvl1: #6b7280;
  --lvl2: #3b82f6;
  --lvl3: #f59e0b;
  --lvl4: #f97316;
  --lvl5: #ef4444;
  --ok: #34d399;
}
* { box-sizing: border-box; }
body {
  margin: 0;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  background: var(--bg);
  color: var(--text);
}
.hidden { display: none !important; }
.muted { color: var(--muted); font-size: 0.9em; }
.small { font-size: 0.82em; }
.empty { padding: 24px; }
.error { color: #ff6b6b; min-height: 1.2em; margin: 0; }
button {
  background: var(--accent); color: #0b1020; border: 0;
  padding: 9px 14px; border-radius: 8px; font-weight: 600; cursor: pointer;
}
button.ghost { background: transparent; color: var(--muted); border: 1px solid var(--border); }
button.ghost:hover { border-color: var(--accent); color: var(--text); }
button.ghost.danger:hover { border-color: var(--lvl5); color: var(--lvl5); }
button.danger { background: var(--lvl5); color: #fff; }
button.primary { background: var(--accent); }
input {
  background: var(--panel2); border: 1px solid var(--border); color: var(--text);
  padding: 9px 11px; border-radius: 8px; width: 100%; margin-bottom: 8px;
}
.row { display: flex; gap: 8px; }
.chip { display: inline-block; background: var(--panel2); border: 1px solid var(--border); color: var(--muted); border-radius: 20px; padding: 2px 9px; font-size: 0.8em; margin: 0 4px 4px 0; }
textarea { background: var(--panel2); border: 1px solid var(--border); color: var(--text); padding: 9px 11px; border-radius: 8px; width: 100%; margin-bottom: 8px; font-family: inherit; font-size: 0.9em; resize: vertical; }
.chk { display: flex; align-items: center; gap: 8px; font-size: 0.9em; color: var(--text); margin: 4px 0 10px; }
.chk input { width: auto; margin: 0; }
.chips-row { display: flex; flex-wrap: wrap; gap: 6px; margin: 2px 0 8px; }
.chip.rm { cursor: pointer; border-color: var(--accent); color: var(--text); }
.chip.rm:hover { border-color: var(--lvl5); color: var(--lvl5); }

/* Login */
.login { min-height: 100vh; display: grid; place-items: center; padding: 12px; }
.card { background: var(--panel); border: 1px solid var(--border); border-radius: 14px; padding: 22px; width: min(340px, calc(100vw - 32px)); }
.card h1 { margin: 0 0 4px; }

/* Topbar */
.topbar {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 22px; background: var(--panel); border-bottom: 1px solid var(--border);
}
.brand { display: flex; align-items: center; gap: 12px; cursor: pointer; }
.brand .logo { font-size: 26px; }
.brand-text h1 { margin: 0; font-size: 17px; font-weight: 800; }
.brand-text .subtitle { margin: 1px 0 0; font-size: 11px; color: var(--muted); }
.topbar-right { display: flex; align-items: center; gap: 12px; }
.topbar-left { display: flex; align-items: center; gap: 20px; }
.gauges { display: flex; flex-direction: column; gap: 3px; }
.gauge-bars { display: flex; flex-direction: column; gap: 3px; }
.apify-gauge { display: flex; align-items: center; gap: 7px; font-size: 0.78em; color: var(--muted); cursor: help; }
.apify-gauge .ag-label { min-width: 40px; }
.apify-gauge .ag-label { font-weight: 600; }
.ag-bar { width: 88px; height: 8px; background: var(--panel2); border: 1px solid var(--border); border-radius: 6px; overflow: hidden; }
.ag-fill { height: 100%; width: 0; background: var(--ok); transition: width .3s ease; }
.ag-fill.warn { background: var(--lvl3); }
.ag-fill.crit { background: var(--lvl5); }
.ag-pct { font-weight: 700; color: var(--text); min-width: 30px; }
@media (max-width: 640px) {
  /* Jauge Apify compacte : sans libellé, barre raccourcie */
  .apify-gauge { gap: 5px; }
  .apify-gauge .ag-label { display: none; }
  /* Badge version À CÔTÉ des jauges (et non dessous) : les 2 jauges empilées à
     gauche, la version alignée à leur droite. */
  .gauges { flex-direction: row; align-items: center; gap: 10px; }
  .ag-bar { width: 54px; }
  .ag-pct { min-width: 26px; font-size: 0.95em; }
  /* La barre du haut passe sur 2 lignes : marque + jauge, actions dessous. */
  .topbar { flex-wrap: wrap; gap: 8px 10px; padding: 10px 14px; }
  .topbar-left { gap: 10px; flex: 1 1 auto; min-width: 0; justify-content: space-between; }
  .brand-text .subtitle { display: none; }
  #who { display: none; }
  .topbar-right { width: 100%; justify-content: flex-end; flex-wrap: wrap; gap: 8px; }
  .topbar-right button { padding: 7px 11px; font-size: 0.82em; }
}

/* Accueil */
.home-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; padding: 22px 24px 6px; }
.home-head h2 { margin: 0 0 4px; font-size: 20px; }
.rech-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 16px; padding: 16px 24px 30px; }
.rech-card { position: relative; background: var(--panel); border: 1px solid var(--border); border-radius: 14px; padding: 16px; cursor: pointer; display: flex; flex-direction: column; gap: 10px; transition: border-color .12s; }
.rc-refthumb { position: absolute; top: 42px; right: 14px; width: 48px; height: 48px; object-fit: contain; border-radius: 9px; background: var(--panel2); padding: 2px; box-shadow: 0 1px 5px rgba(0,0,0,.35); z-index: 1; }
.rech-card:hover { border-color: var(--accent); }
.rc-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.rc-top h3 { margin: 0; font-size: 16px; }
.rc-state { font-size: 0.72em; padding: 2px 9px; border-radius: 20px; border: 1px solid var(--border); color: var(--muted); }
.rc-state.on { color: var(--ok); border-color: #1f6b52; }
.rc-state.rc-toggle { cursor: pointer; user-select: none; }
.rc-state.rc-toggle:hover { border-color: var(--accent); color: var(--accent); }
.rc-kw { min-height: 22px; }
.rc-stats { display: flex; gap: 14px; font-size: 0.9em; color: var(--muted); }
.rc-stats b { color: var(--text); }
.rc-stats .hot b { color: var(--lvl4); }
.rc-foot { font-size: 0.75em; }
.rc-zone { font-size: 0.78em; margin-top: 2px; }
.rc-running { display: inline-flex; align-items: center; gap: 5px; font-size: 0.72em; color: var(--accent); font-weight: 600; white-space: nowrap; }
.rc-running .spin { width: 11px; height: 11px; border-width: 2px; }

/* Détail */
.detail-bar { display: flex; align-items: center; gap: 14px; padding: 18px 24px 6px; flex-wrap: wrap; }
.freq-edit { display: inline-flex; align-items: center; gap: 6px; font-size: 0.85em; color: var(--muted); background: var(--panel2); border: 1px solid var(--border); border-radius: 20px; padding: 4px 12px; }
.freq-edit input { width: 58px; margin: 0; padding: 4px 6px; text-align: center; }
.freq-edit.kw-edit { flex: 1 1 auto; transition: border-color .3s, background .3s; }
.freq-edit.kw-edit input { width: 200px; max-width: 42vw; text-align: left; }
.freq-edit.kw-ok { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent) inset; }

/* Bulle des champs de recherche : mots-clés, mots exclus et les champs propres
   à une source. Un champ par LIGNE (flex-basis 100% => la bulle occupe toute la
   largeur de la barre), chaque ligne préfixée des icônes des sources visées. */
.kw-bulle { flex: 1 1 100%; display: flex; flex-direction: column; gap: 7px; background: var(--panel2); border: 1px solid var(--border); border-radius: 14px; padding: 11px 14px; }
.kw-row { display: flex; align-items: center; gap: 10px; font-size: 0.85em; color: var(--muted); border-radius: 9px; padding: 3px 5px; border: 1px solid transparent; transition: border-color .3s, box-shadow .3s; }
.kw-row .kw-ico { display: inline-flex; align-items: center; gap: 3px; min-width: 54px; }
.kw-row .kw-ico .srcico { width: 15px; height: 15px; border-radius: 3px; }
.kw-row .kw-lab { flex: 0 0 auto; min-width: 116px; white-space: nowrap; }

/* Sous-bulle par PAYS/LANGUE : chaque source ne comprend que sa langue, on
   regroupe donc les champs par langue plutôt que par nature de champ. */
.kw-pays { display: flex; flex-direction: column; gap: 6px; background: var(--panel); border: 1px solid var(--border); border-radius: 11px; padding: 8px 11px 10px; }
.kw-pays-tete { display: flex; align-items: center; gap: 7px; font-size: 0.82em; color: var(--muted); }
.kw-pays-tete b { color: var(--text); font-weight: 600; }
.kw-drapeau { font-size: 1.15em; line-height: 1; }
/* Pays sans connecteur : présent mais visiblement en attente. */
.kw-pays-inactif { opacity: 0.62; }
.kw-bientot { font-size: 0.92em; font-style: italic; }
/* L'input prend toute la place restante (règles .freq-edit input non appliquées ici). */
.kw-row input { flex: 1 1 auto; min-width: 0; width: auto; margin: 0; padding: 5px 9px; text-align: left; }
.kw-row .kw-btn { flex: 0 0 auto; padding: 4px 10px; font-size: 0.95em; }
.kw-row.kw-ok { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent) inset; }
/* Étroit : le libellé passe au-dessus du champ pour ne pas écraser la saisie. */
@media (max-width: 700px) {
  .kw-row { flex-wrap: wrap; gap: 6px; }
  .kw-row .kw-lab { min-width: 0; }
  .kw-row input { flex: 1 1 100%; }
}

/* Modale « dégager » : mots candidats à pénaliser (puces à cocher) */
.rej-terms { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0 4px; max-height: 40vh; overflow-y: auto; }
.rej-chip { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border: 1px solid var(--border); border-radius: 20px; background: var(--panel2); cursor: pointer; font-size: 0.9em; user-select: none; }
.rej-chip:hover { border-color: var(--accent); }
.rej-chip:has(input:checked) { border-color: var(--lvl5); box-shadow: 0 0 0 1px var(--lvl5) inset; color: var(--text); }
.rej-chip input { margin: 0; cursor: pointer; accent-color: var(--lvl5); }
.rej-reason { display: flex; align-items: center; gap: 8px; padding: 8px 10px; margin: 6px 0; border: 1px solid var(--border); border-radius: 8px; background: var(--panel2); cursor: pointer; font-size: 0.9em; }
.rej-reason input { margin: 0; cursor: pointer; accent-color: var(--lvl5); }

/* Connecteurs Leboncoin (failover) — admin */
.lbc-row { display: flex; align-items: center; gap: 8px; padding: 7px 10px; border: 1px solid var(--border); border-radius: 8px; margin-bottom: 6px; background: var(--panel2); }
.lbc-row.active { border-color: #22c55e; box-shadow: 0 0 0 1px #22c55e inset; }
.lbc-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.lbc-ord { display: inline-block; min-width: 18px; text-align: center; color: var(--muted); font-weight: 700; }
.lbc-live { color: #22c55e; font-size: 0.8em; font-weight: 600; margin-left: 4px; white-space: nowrap; }
.lbc-ctr { display: flex; gap: 4px; flex-shrink: 0; }
.lbc-add { display: flex; gap: 6px; margin: 8px 0 4px; flex-wrap: wrap; }
.lbc-add input { flex: 1; min-width: 140px; }

/* Accueil : fil « Dernières trouvailles » + curseur de match */
.feed-head { margin-top: 26px; border-top: 1px solid var(--border); padding-top: 18px; }
.feed-filter { display: inline-flex; align-items: center; gap: 8px; font-size: 0.9em; color: var(--muted); background: var(--panel2); border: 1px solid var(--border); border-radius: 20px; padding: 6px 14px; white-space: nowrap; }
.feed-filter b { color: var(--accent); min-width: 22px; text-align: right; }

/* Bandeau ÉPINGLÉ « matchs récents » : conteneur teinté chaud. Les cartes à
   l'intérieur sont RIGOUREUSEMENT identiques au fil « Dernières trouvailles »
   (la grille est mutualisée via la règle #feed, .matchs-recents .listings). */
.matchs-recents { margin: 22px 24px 2px; border: 1px solid rgba(249,115,22,.35); background: rgba(249,115,22,.06); border-radius: 14px; }
.matchs-recents .home-head { padding: 14px 18px 2px; border-top: none; margin-top: 0; }
.matchs-recents h2 { font-size: 18px; }
.matchs-recents .listings { padding: 12px 16px 16px; }
@media (max-width: 640px) { .matchs-recents { margin: 14px 14px 2px; } .matchs-recents .listings { padding: 10px 12px 14px; } }
.feed-filter input[type=range] { accent-color: var(--accent); cursor: pointer; width: 130px; vertical-align: middle; }
.lst-rech { color: var(--muted); font-weight: 600; }
.val-est { color: var(--muted); cursor: help; border-bottom: 1px dotted var(--border); }
.val-est.deal { color: #22c55e; font-weight: 700; border-bottom-color: #22c55e; }

/* Badge de version (topbar) + modale changelog */
.ver-badge { background: var(--panel2); color: var(--muted); border: 1px solid var(--border); border-radius: 20px; padding: 3px 10px; font-size: 0.78em; font-weight: 700; cursor: pointer; letter-spacing: .3px; }
.ver-badge:hover { border-color: var(--accent); color: var(--text); }
#changelog-list { max-height: 60vh; overflow-y: auto; margin-top: 6px; }
.cl-rel { border-left: 3px solid var(--border); padding: 4px 0 4px 12px; margin-bottom: 14px; }
.cl-rel.latest { border-left-color: var(--accent); }
.cl-head { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; margin-bottom: 4px; }
.cl-ver { font-weight: 700; color: var(--accent); }
.cl-date { margin-left: auto; }
.cl-rel ul { margin: 0; padding-left: 18px; }
.cl-rel li { margin: 3px 0; font-size: 0.92em; line-height: 1.4; }

/* Badges de coût estimé /mois par plateforme (cartes + détail) */
.rc-couts { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0 2px; }
.cost-badge { display: inline-flex; align-items: center; gap: 5px; font-size: 0.76em; font-weight: 600; color: var(--text); background: var(--panel2); border: 1px solid var(--border); border-radius: 20px; padding: 2px 9px; }
.cost-badge .srcico { width: 13px; height: 13px; border-radius: 3px; }
.cost-badge.free { color: var(--muted); font-weight: 500; }
.cost-badge .est { font-style: normal; color: var(--muted); margin-left: 2px; }
.cost-badge .plat-flash { font-size: 0.95em; line-height: 1; filter: drop-shadow(0 0 2px color-mix(in srgb, #f59e0b 60%, transparent)); }
.cost-badge .lbc-run { display: inline-block; font-size: 0.95em; line-height: 1; animation: spin 1.3s linear infinite; }
.cost-badge.measured { border-color: #2f6f4f; }

/* Détail : puces de connecteurs (activer/désactiver le polling par source) */
/* wrap : à 5 sources, la rangée de puces débordait de l'écran sur mobile
   (défilement horizontal de toute la page). */
.d-plats #d-platforms { display: inline-flex; gap: 5px; flex-wrap: wrap; }
.d-plats { flex-wrap: wrap; max-width: 100%; }
.plat-chip { display: inline-flex; align-items: center; gap: 4px; font-size: 0.9em; padding: 3px 9px; border-radius: 14px; border: 1px solid var(--border); background: var(--panel); color: var(--muted); cursor: pointer; opacity: 0.5; text-decoration: line-through; }
.plat-chip.on { opacity: 1; text-decoration: none; color: var(--text); border-color: #22c55e; background: color-mix(in srgb, #22c55e 12%, var(--panel)); }
.plat-chip .srcico { width: 13px; height: 13px; border-radius: 3px; }
.plat-chip .plat-flash { font-size: 0.85em; line-height: 1; filter: drop-shadow(0 0 2px color-mix(in srgb, #f59e0b 60%, transparent)); }
.plat-chip .plat-lock { font-size: 0.85em; line-height: 1; }
/* Liens de provenance (recherche › objet) dans les cartes d'annonce */
.prov-link { color: var(--accent); cursor: pointer; text-decoration: none; }
.prov-link:hover { text-decoration: underline; }
/* Filtre instantané des recherches — à côté du titre « Mes recherches » */
.hh-left { min-width: 0; }
.hh-titlerow { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.hh-titlerow h2 { margin: 0; }
/* Actions collées au filtre plutôt que rejetées à l'extrémité de l'écran. */
.home-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.rech-filter-inline { width: 280px; max-width: 100%; box-sizing: border-box; padding: 7px 12px; font: inherit; border-radius: 10px; border: 1px solid var(--border); background: var(--panel2); color: var(--text); }
.rech-filter-inline:focus { border-color: var(--accent); outline: none; }

/* Bulle « recherche » : cadre autour du détail (bouton retour AU-DESSUS, hors bulle) */
#view-detail > .back { display: inline-block; margin: 6px 20px 10px; }
.detail-card { margin: 0 20px 26px; border: 1px solid var(--border); border-radius: 16px; background: var(--panel); }
.detail-card > .detail-bar { padding: 16px 18px 6px; }
.detail-card .search-status { margin: 4px 18px 10px; }
.detail-card .listings { padding: 8px 18px 22px; }
/* Recherche SECONDAIRE : bulle imbriquée (l'objet + ses annonces) DANS la bulle primaire */
.detail-card.is-sec .detail-inner { margin: 2px 14px 16px; border: 1px solid var(--border); border-radius: 12px; background: var(--panel2); padding-top: 4px; }
.detail-card.is-sec .objet-panel { margin: 10px 12px; }
.detail-card.is-sec .listings { padding: 8px 12px 18px; }
/* Bulle de contexte « recherche primaire » au-dessus d'une secondaire */
.prim-context { margin: 0 20px 8px; padding: 10px 16px; border: 1px solid color-mix(in srgb, var(--accent) 50%, var(--border)); background: color-mix(in srgb, var(--accent) 8%, var(--panel)); border-radius: 14px; }
.prim-context .pc-head { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.prim-context .pc-tag { font-size: 0.64em; font-weight: 700; letter-spacing: .08em; color: var(--accent); border: 1px solid color-mix(in srgb, var(--accent) 45%, transparent); border-radius: 6px; padding: 1px 6px; }
.prim-context .pc-body { margin-top: 4px; }
/* Feed « Dernières trouvailles » : GRILLE responsive de cartes (au lieu de lignes pleine largeur) */
#feed, .matchs-recents .listings { display: grid; grid-template-columns: repeat(auto-fill, minmax(390px, 1fr)); gap: 12px; align-content: start; }
#feed .niv-label, .matchs-recents .niv-label { display: none; } /* gain de place en cellule étroite (le % est déjà près du titre) */
#feed .listing .thumb, .matchs-recents .listing .thumb { flex: 0 0 92px; width: 92px; height: 70px; }
@media (max-width: 560px) { #feed, .matchs-recents .listings { grid-template-columns: 1fr; } }
/* Cap la largeur des bulles de détail sur très grand écran (confort de lecture).
   Relevé de 1200 à 1700 px : sur un écran d'ordinateur large, le cap laissait une
   bande vide sur la droite alors que les listes et la grille d'objets tiennent
   sans peine sur toute la largeur. */
.detail-card { max-width: 1700px; }
.prim-context { max-width: 1700px; }
/* Vue SECONDAIRE : la sous-recherche est IMBRIQUÉE dans une bulle primaire englobante.
 *  #detail-wrap.nested = grande bulle PRIMAIRE (accent) ; dedans : header primaire
 *  (contexte + config) puis la bulle OBJET (bleue) qui contient panneau + annonces. */
#detail-wrap.nested { margin: 0 20px 26px; max-width: 1700px; border: 1px solid color-mix(in srgb, var(--accent) 45%, var(--border)); background: color-mix(in srgb, var(--accent) 6%, var(--panel)); border-radius: 18px; padding: 8px; }
#detail-wrap.nested .prim-context { margin: 4px 6px 10px; border: 0; background: transparent; padding: 4px 8px; max-width: none; }
#detail-wrap.nested .detail-card { margin: 0; max-width: none; }
@media (max-width: 640px) { #detail-wrap.nested { margin: 0 10px 20px; padding: 5px; } }
/* Nuance : bulle PRIMAIRE (chaud / accent) vs bulle SECONDAIRE (froid / bleu) */
.detail-card:not(.is-sec) { border-color: color-mix(in srgb, var(--accent) 35%, var(--border)); }
.detail-card.is-sec { border-color: color-mix(in srgb, #6f8bff 42%, var(--border)); }
.detail-card.is-sec .detail-inner { border-color: color-mix(in srgb, #6f8bff 42%, var(--border)); background: color-mix(in srgb, #6f8bff 7%, var(--panel2)); }
@media (max-width: 640px) {
  #view-detail > .back { margin: 6px 12px 8px; }
  .detail-card { margin: 0 10px 20px; }
  .prim-context { margin: 0 10px 8px; }
  .detail-card.is-sec .detail-inner { margin: 2px 8px 12px; }
}
/* En-tête « Recherches visuelles associées » (page d'une primaire) */
.sec-header { margin: 14px 24px 6px; padding-bottom: 8px; border-bottom: 2px solid color-mix(in srgb, var(--accent) 45%, transparent); display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.sec-header h3 { margin: 0; font-size: 1.02em; letter-spacing: .01em; }
@media (max-width: 640px) { .sec-header { margin: 12px 14px 6px; } }
/* Lignes d'OBJETS (secondaires) dans la page d'une primaire */
.sec-list { display: flex; flex-direction: column; gap: 10px; margin: 8px 24px; }
@media (max-width: 640px) { .sec-list { margin: 8px 14px; } }
.sec-row { display: flex; align-items: center; gap: 14px; padding: 10px 14px; background: var(--panel); border: 1px solid var(--border); border-radius: 12px; cursor: pointer; transition: border-color .15s, background .15s; }
.sec-row:hover { border-color: var(--accent); background: var(--panel2); }
.sec-thumb { width: 56px; height: 56px; border-radius: 8px; object-fit: cover; flex: 0 0 auto; background: var(--panel2); }
.sec-thumb.sec-noimg { display: flex; align-items: center; justify-content: center; font-size: 24px; }
.sec-main { flex: 1 1 auto; min-width: 0; }
.sec-name { font-weight: 600; display: flex; align-items: center; gap: 8px; }
.sec-badge { font-size: 0.72em; padding: 1px 7px; border-radius: 10px; font-weight: 600; }
.sec-badge.on { background: color-mix(in srgb, #22c55e 18%, var(--panel)); color: #16a34a; }
.sec-badge.off { background: var(--panel2); color: var(--muted); }

/* Description UNIQUE de l'objet (modale photos) : mise en avant, c'est ce texte
   qui accompagne les photos à chaque comparaison. */
#ph-objet-wrap { border: 1px solid var(--accent); border-radius: 12px; padding: 10px 12px; margin: 10px 0 14px; background: var(--panel2); }
.ph-objet-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 8px; }
.ph-objet-head .muted { flex: 1 1 220px; min-width: 0; }
#ph-objet { width: 100%; box-sizing: border-box; resize: vertical; font: inherit; line-height: 1.45; padding: 8px 10px; border-radius: 8px; border: 1px solid var(--border); background: var(--panel); color: var(--text); }
#ph-objet:focus { border-color: var(--accent); outline: none; }
/* Objet SANS photo de référence : il ne peut rien comparer, la veille l'ignore.
   Signalé en rouge pour qu'on ne le croie pas opérationnel. */
.sec-badge.alerte { background: color-mix(in srgb, var(--lvl5) 20%, var(--panel)); color: var(--lvl5); }
.sec-row.sec-sansphoto { border-color: var(--lvl5); background: color-mix(in srgb, var(--lvl5) 7%, var(--panel)); }
.sec-row.sec-sansphoto:hover { border-color: var(--lvl5); background: color-mix(in srgb, var(--lvl5) 12%, var(--panel)); }
.sec-row.sec-sansphoto .sec-thumb { border: 1px dashed color-mix(in srgb, var(--lvl5) 55%, transparent); }
.sec-meta.sec-alerte { color: var(--lvl5); font-size: 0.88em; }
.sec-meta { font-size: 0.85em; margin-top: 2px; }
.sec-cons { font-size: 0.82em; margin-top: 3px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sec-go { flex: 0 0 auto; font-size: 1.6em; color: var(--muted); }
/* Panneau OBJET (secondaire) : photos + consigne + réglages de match */
.objet-panel { display: flex; gap: 18px; align-items: flex-start; margin: 10px 24px 4px; padding: 16px; background: var(--panel); border: 1px solid var(--border); border-radius: 14px; }
.op-photos { flex: 0 0 auto; display: grid; grid-template-columns: repeat(2, 56px); grid-auto-rows: 56px; gap: 5px; cursor: pointer; }
.op-photos .op-thumb { width: 56px; height: 56px; object-fit: cover; border-radius: 8px; background: var(--panel2); }
.op-photos .op-thumb:only-child { width: 117px; height: 117px; grid-column: span 2; }
.op-addphoto { grid-column: span 2; width: 117px; height: 117px; border: 2px dashed var(--border); background: var(--panel2); border-radius: 10px; cursor: pointer; color: var(--muted); font-size: 22px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; }
.op-addphoto span { font-size: 11px; line-height: 1.2; }
.op-addphoto:hover { border-color: var(--accent); color: var(--accent); }
.op-body { flex: 1 1 auto; min-width: 0; }
.op-label { display: block; font-weight: 600; font-size: 0.95em; }
.op-hint { margin: 2px 0 8px; }
#d-consigne { width: 100%; box-sizing: border-box; resize: vertical; min-height: 62px; font: inherit; padding: 9px 11px; border-radius: 10px; border: 1px solid var(--border); background: var(--panel2); color: var(--text); }
#d-consigne:focus { border-color: var(--accent); outline: none; }
#d-consigne.champ-ok { border-color: #22c55e; }
.op-controls { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; margin-top: 10px; }
.op-field { display: inline-flex; align-items: center; gap: 6px; font-size: 0.9em; color: var(--text); }
.op-field input[type="number"] { width: 58px; padding: 4px 6px; border-radius: 8px; border: 1px solid var(--border); background: var(--panel2); color: var(--text); }
@media (max-width: 640px) { .objet-panel { flex-direction: column; margin: 10px 14px 4px; } .op-photos .op-thumb:only-child { width: 100px; height: 100px; } }
.plat-chip.plat-locked { opacity: 0.55; cursor: not-allowed; text-decoration: none; }
/* Admin › Recherche : contrôle de la veille */
.veille-lock-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 8px; }
.veille-conn-list { display: flex; flex-direction: column; gap: 8px; margin-top: 8px; max-width: 560px; }
.veille-conn { display: flex; align-items: center; gap: 12px; padding: 8px 12px; background: var(--panel2); border-radius: 8px; }
.veille-conn .vc-name { font-weight: 600; flex: 0 0 auto; min-width: 150px; }
.veille-conn .vc-badge { flex: 1 1 auto; font-size: 0.9em; color: var(--muted); }
.veille-conn button { flex: 0 0 auto; }
/* Admin › Arbitrage eBay */
.arb-wrap { padding: 12px 24px 30px; max-width: 1300px; }
.arb-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 12px; margin-bottom: 16px; }
.arb-kpi { background: var(--panel); border: 1px solid var(--border); border-radius: 12px; padding: 12px 14px; display: flex; flex-direction: column; gap: 3px; }
.arb-kpi-v { font-size: 1.5em; font-weight: 700; display: flex; align-items: center; gap: 6px; }
.arb-kpi-l { font-size: 0.72em; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; }
.arb-kpi-hi { border-color: color-mix(in srgb, #22c55e 45%, var(--border)); background: color-mix(in srgb, #22c55e 8%, var(--panel)); }
.arb-kpi-hi .arb-kpi-v { color: #22c55e; }
.dot { width: 10px; height: 10px; border-radius: 50%; display: inline-block; }
.dot.on { background: #22c55e; box-shadow: 0 0 6px #22c55e; }
.dot.off { background: var(--muted); }
.arb-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; }
.arb-head h3 { margin: 0 0 2px; }
.arb-subtitle { margin: 16px 0 8px; font-size: 0.95em; }
.arb-globals { display: flex; gap: 20px; flex-wrap: wrap; margin: 12px 0; }
.arb-field { display: inline-flex; align-items: center; gap: 8px; font-size: 0.92em; }
.arb-globals input { width: 64px; padding: 6px 8px; border-radius: 8px; border: 1px solid var(--border); background: var(--panel2); color: var(--text); }
.switch { position: relative; display: inline-block; width: 46px; height: 26px; flex: 0 0 auto; }
.switch input { opacity: 0; width: 0; height: 0; }
.switch-sl { position: absolute; inset: 0; background: var(--panel2); border: 1px solid var(--border); border-radius: 26px; cursor: pointer; transition: .2s; }
.switch-sl::before { content: ""; position: absolute; height: 18px; width: 18px; left: 3px; top: 3px; background: var(--muted); border-radius: 50%; transition: .2s; }
.switch input:checked + .switch-sl { background: color-mix(in srgb, #22c55e 30%, var(--panel2)); border-color: #22c55e; }
.switch input:checked + .switch-sl::before { transform: translateX(20px); background: #22c55e; }
.arb-entry { display: flex; gap: 10px; align-items: center; margin-bottom: 8px; flex-wrap: wrap; }
.arb-entry .arb-kw { flex: 1 1 240px; min-width: 160px; padding: 8px 10px; border-radius: 8px; border: 1px solid var(--border); background: var(--panel2); color: var(--text); }
.arb-vlab { display: inline-flex; align-items: center; gap: 6px; font-size: 0.85em; color: var(--muted); white-space: nowrap; }
.arb-vlab .arb-val { width: 82px; padding: 6px 8px; border-radius: 8px; border: 1px solid var(--border); background: var(--panel2); color: var(--text); }
.arb-tcount { font-size: 0.82em; font-weight: 600; color: var(--accent); background: color-mix(in srgb, var(--accent) 12%, var(--panel)); border-radius: 8px; padding: 3px 8px; white-space: nowrap; }
.arb-tcount.empty { color: var(--muted); background: var(--panel2); }
.arb-addbtn { margin-top: 4px; }
.arb-actions { display: flex; align-items: center; gap: 12px; margin-top: 16px; flex-wrap: wrap; }
.arb-match { display: flex; gap: 14px; align-items: center; padding: 12px; background: var(--panel2); border: 1px solid var(--border); border-radius: 12px; margin-bottom: 10px; }
.arb-thumb { width: 76px; height: 76px; object-fit: cover; border-radius: 10px; flex: 0 0 auto; background: var(--panel); }
.arb-thumb.arb-noimg { display: flex; align-items: center; justify-content: center; }
.arb-thumb.arb-noimg::after { content: "🪑"; font-size: 30px; opacity: .4; }
.arb-info { min-width: 0; flex: 1 1 auto; }
.arb-title-row { display: flex; align-items: center; gap: 10px; }
.arb-title { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.arb-pill { flex: 0 0 auto; font-size: 0.8em; font-weight: 700; padding: 2px 9px; border-radius: 20px; }
.arb-pill.match { background: var(--panel); border: 1px solid var(--border); color: var(--muted); }
.arb-pill.match.warm { color: #f59e0b; border-color: #f59e0b; }
.arb-pill.match.hot { color: #fff; background: #ef4444; border-color: #ef4444; }
.arb-pill.gain { background: color-mix(in srgb, #22c55e 18%, var(--panel)); color: #16a34a; border: 1px solid color-mix(in srgb, #22c55e 40%, transparent); }
.arb-deal { display: flex; align-items: center; gap: 12px; margin: 6px 0 4px; flex-wrap: wrap; }
.arb-price { display: inline-flex; flex-direction: column; line-height: 1.1; }
.arb-price b { font-size: 1.05em; }
.arb-price small { font-size: 0.68em; color: var(--muted); text-transform: uppercase; letter-spacing: .03em; }
.arb-price.lbc b { color: var(--accent); }
.arb-arrow { color: var(--muted); font-size: 1.2em; }
.arb-links a { color: var(--accent); text-decoration: none; }
.arb-links a:hover { text-decoration: underline; }
/* Suivi de scan en direct (sablier + phases + journal) */
.arb-progress { background: var(--panel2); border: 1px solid color-mix(in srgb, var(--accent) 35%, var(--border)); border-radius: 12px; padding: 12px 14px; margin-bottom: 14px; }
.arb-prog-head { display: flex; align-items: center; gap: 10px; font-size: 1.02em; }
.arb-spin { width: 16px; height: 16px; border: 2px solid color-mix(in srgb, var(--accent) 30%, transparent); border-top-color: var(--accent); border-radius: 50%; display: inline-block; animation: arb-rot 0.8s linear infinite; }
@keyframes arb-rot { to { transform: rotate(360deg); } }
.arb-done { font-size: 1.1em; }
.arb-prog-stats { margin: 8px 0; font-size: 0.9em; color: var(--muted); }
.arb-bar { height: 8px; background: var(--panel); border-radius: 6px; overflow: hidden; margin: 8px 0; }
.arb-bar-fill { height: 100%; background: var(--accent); border-radius: 6px; transition: width .4s ease; }
.arb-prog-log { margin-top: 8px; font-family: ui-monospace, monospace; font-size: 0.78em; color: var(--muted); max-height: 150px; overflow-y: auto; display: flex; flex-direction: column; gap: 2px; }
.arb-prog-log div { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* --- Cockpit d'arbitrage : réglages · recherches · verdicts ------------- */
/* Réglages du détecteur : tout sur UNE ligne */
.arb-params { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-top: 14px; }
.arb-params .arb-field input { width: 64px; padding: 6px 8px; border-radius: 8px; border: 1px solid var(--border); background: var(--panel2); color: var(--text); }
.arb-sep { width: 1px; height: 26px; background: var(--border); }
.arb-grow { flex: 1 1 auto; }
.arb-list-title { margin: 22px 0 12px; font-size: 1.05em; }
/* Grille de recherches (cartes, comme l'accueil Dénicheur) */
.arb-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(270px, 1fr)); gap: 14px; margin-bottom: 16px; }
.arb-scard { background: var(--panel); border: 1px solid var(--border); border-radius: 14px; padding: 15px; cursor: pointer; transition: .15s; display: flex; flex-direction: column; gap: 12px; }
.arb-scard:hover { border-color: var(--accent); transform: translateY(-2px); }
.arb-scard-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 8px; }
.arb-scard-kw { font-size: 1.08em; font-weight: 700; }
.arb-scard-sub { font-size: 0.78em; color: var(--muted); margin-top: 2px; }
.arb-scard-badge { font-size: 0.76em; font-weight: 700; padding: 3px 9px; border-radius: 20px; white-space: nowrap; }
.arb-scard-badge.hot { background: #22c55e; color: #06230f; }
.arb-scard-badge.none { background: var(--panel2); color: var(--muted); border: 1px solid var(--border); }
.arb-scard-thumbs { display: flex; gap: 6px; overflow: hidden; }
.arb-scard-thumbs img { width: 48px; height: 48px; object-fit: cover; border-radius: 8px; border: 1px solid var(--border); }
.arb-scard-more { width: 48px; height: 48px; border-radius: 8px; background: var(--panel2); display: flex; align-items: center; justify-content: center; color: var(--muted); font-size: 0.78em; flex: 0 0 auto; }
.arb-scard-stats { display: flex; gap: 6px; flex-wrap: wrap; }
.arb-chip { font-size: 0.74em; font-weight: 600; color: var(--muted); background: var(--panel2); border: 1px solid var(--border); border-radius: 20px; padding: 3px 9px; white-space: nowrap; }
.arb-chip.hot { color: #06230f; background: #22c55e; border-color: #22c55e; }
.arb-chip.gain { color: #16a34a; background: color-mix(in srgb, #22c55e 16%, var(--panel)); border-color: color-mix(in srgb, #22c55e 40%, transparent); }
/* Ligne de création d'une recherche */
.arb-newrow { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.arb-newrow .arb-new-kw { flex: 1 1 220px; min-width: 160px; padding: 8px 10px; border-radius: 8px; border: 1px solid var(--border); background: var(--panel2); color: var(--text); }
.arb-newrow .arb-field input { width: 82px; padding: 6px 8px; border-radius: 8px; border: 1px solid var(--border); background: var(--panel2); color: var(--text); }

/* Détail : bulle imbriquée (recherche englobe ses verdicts, façon Dénicheur) */
.arb-detail-wrap { background: var(--panel2); border: 1px solid var(--border); border-radius: 16px; padding: 16px; }
.arb-detail-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 14px; flex-wrap: wrap; margin-bottom: 14px; }
.arb-detail-kw { font-size: 1.35em; font-weight: 700; }
.arb-detail-meta { font-size: 0.85em; color: var(--muted); margin-top: 3px; }
.arb-hot-txt { color: #22c55e; }
.arb-detail-actions { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.arb-detail-actions .arb-field input { width: 84px; padding: 6px 8px; border-radius: 8px; border: 1px solid var(--border); background: var(--panel); color: var(--text); }
/* Bandeau de trésors eBay */
.arb-tresor { margin-bottom: 14px; }
.arb-strip-lab { font-size: 0.76em; font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; margin-bottom: 8px; }
.arb-strip-row { display: flex; gap: 10px; overflow-x: auto; padding-bottom: 4px; }
/* Vignette objet (eBay ou LBC) */
.arb-obj { flex: 0 0 auto; width: 88px; text-align: center; }
.arb-obj a { text-decoration: none; color: inherit; display: block; }
.arb-obj-img { width: 88px; height: 88px; object-fit: cover; border-radius: 10px; background: var(--panel); display: block; }
.arb-obj-img.arb-noimg { display: flex; align-items: center; justify-content: center; }
.arb-obj-img.arb-noimg::after { content: "🪑"; font-size: 34px; opacity: .4; }
.arb-obj.ebay .arb-obj-img { border: 2px solid color-mix(in srgb, #f59e0b 55%, var(--border)); }
.arb-obj.lbc .arb-obj-img { border: 2px solid color-mix(in srgb, var(--accent) 55%, var(--border)); }
.arb-obj-price { display: block; font-weight: 700; font-size: 0.9em; margin-top: 4px; }
.arb-obj-role { display: block; font-size: 0.64em; color: var(--muted); text-transform: uppercase; letter-spacing: .03em; }
/* Bulle des verdicts, imbriquée dans la recherche */
.arb-bubble { background: var(--panel); border: 1px solid var(--border); border-radius: 14px; padding: 14px; }
.arb-bubble-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; }
.arb-bubble-head h4 { margin: 0; }
.arb-flt { display: inline-flex; align-items: center; gap: 6px; font-size: 0.82em; color: var(--muted); white-space: nowrap; cursor: pointer; }
/* Cartes de verdict IA — VERTICALES */
.arb-tests { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 12px; }
.arb-test { display: flex; flex-direction: column; gap: 9px; padding: 12px; border: 1px solid var(--border); border-radius: 12px; background: var(--panel2); }
.arb-test.hot { border-color: color-mix(in srgb, #22c55e 55%, var(--border)); background: color-mix(in srgb, #22c55e 8%, var(--panel2)); }
.arb-test.warm { border-color: color-mix(in srgb, #f59e0b 45%, var(--border)); }
.arb-test.cold { opacity: .74; }
.arb-vs { display: flex; align-items: center; justify-content: center; gap: 12px; }
.arb-vs .arb-obj { width: 96px; }
.arb-vs .arb-obj-img { width: 96px; height: 96px; }
.arb-vs-mid { display: flex; flex-direction: column; align-items: center; gap: 4px; color: var(--muted); }
.arb-pct { font-size: 1.02em; font-weight: 800; padding: 3px 12px; border-radius: 20px; background: var(--panel); border: 1px solid var(--border); color: var(--muted); }
.arb-pct.hot { color: #06230f; background: #22c55e; border-color: #22c55e; }
.arb-pct.warm { color: #f59e0b; border-color: #f59e0b; }
.arb-test-title { font-weight: 700; font-size: 0.95em; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.arb-gain { font-size: 0.76em; font-weight: 700; color: #06230f; background: #22c55e; border-radius: 20px; padding: 2px 9px; }
.arb-verdict { font-size: 0.85em; line-height: 1.45; color: var(--text); background: var(--panel); border-left: 3px solid color-mix(in srgb, var(--accent) 50%, var(--border)); border-radius: 4px; padding: 7px 10px; }
.arb-quote { color: var(--accent); font-weight: 700; font-size: 1.1em; margin-right: 2px; }
.arb-meta { font-size: 0.76em; color: var(--muted); display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.arb-meta code { background: var(--panel); border-radius: 5px; padding: 1px 5px; font-size: 0.92em; }
.arb-meta a { color: var(--accent); text-decoration: none; }
.arb-meta a:hover { text-decoration: underline; }
.arb-tag { font-size: 0.92em; padding: 1px 6px; border-radius: 6px; background: var(--panel); }
.arb-tag.ok { color: #22c55e; }

/* Journal d'activité : couleurs par type d'action */
.act-ok { color: #22c55e; font-weight: 600; }
.act-warn { color: #f59e0b; font-weight: 600; }
.act-open { color: #3b82f6; font-weight: 600; }

/* Journal système (admin › Logs) */
.logs-list { display: flex; flex-direction: column; gap: 2px; font-family: ui-monospace, Consolas, monospace; font-size: 0.82em; max-height: 66vh; overflow-y: auto; }
.log-line { display: grid; grid-template-columns: 76px 96px 1fr; gap: 10px; padding: 3px 8px; border-radius: 5px; align-items: baseline; }
.log-line:hover { background: var(--panel2); }
.log-t { color: var(--muted); white-space: nowrap; }
.log-src { color: var(--accent); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.log-msg { color: var(--text); word-break: break-word; }
.log-line.log-warn .log-msg { color: #f59e0b; }
.log-line.log-err { background: rgba(239,68,68,.08); }
.log-line.log-err .log-msg { color: #ef4444; }
.logs-auto { display: inline-flex; align-items: center; gap: 6px; color: var(--muted); }
@media (max-width: 640px) { .log-line { grid-template-columns: 58px 1fr; } .log-line .log-src { display: none; } }
#d-couts .rc-couts { margin: 4px 0 0; }
.back { background: none; border: 1px solid var(--border); color: var(--muted); padding: 8px 14px; border-radius: 20px; }
.back:hover { border-color: var(--accent); color: var(--text); }
/* Titre sur sa PROPRE ligne (flex-basis 100%) → les params/boutons reviennent à
 *  GAUCHE au lieu d'être poussés à l'extrême droite par un titre en flex:1. */
.detail-id { flex: 1 1 100%; min-width: 0; }
.detail-id h2 { margin: 0; font-size: 18px; }
.detail-id h2.editable { cursor: text; border-radius: 5px; padding: 1px 5px; margin: -1px -5px; border: 1px dashed transparent; transition: border-color 0.15s, background 0.15s; }
.detail-id h2.editable:hover { border-color: var(--border); }
.detail-id h2.editable:focus { outline: none; border-color: var(--accent); border-style: solid; background: var(--panel2); }
#d-delete .dd-x { display: none; } /* ✕ : affiché uniquement en mobile (voir media query) */
.confirm-card { max-width: 400px; text-align: left; }
.confirm-title { margin: 2px 0 10px; color: var(--lvl5); font-size: 1.15em; }
.score-modal-title { margin: 2px 0 8px; font-size: 1.1em; }
.score-body { font-size: 0.9em; line-height: 1.5; }
.score-body .score-line { padding: 5px 0; border-bottom: 0.5px solid var(--border); }
.score-body .score-line:last-child { border-bottom: 0; }
.score-body .score-sub { color: var(--muted); font-size: 0.92em; border-bottom: 0; padding-bottom: 2px; }
.lvl { cursor: pointer; }
.field-err { border-color: var(--lvl5) !important; box-shadow: 0 0 0 2px var(--lvl5) inset; }

/* Benchmark image (admin) */
.bench-list { display: flex; flex-direction: column; gap: 8px; margin-top: 12px; }
.bench-row { display: flex; align-items: center; gap: 12px; background: var(--panel); border: 1px solid var(--border); border-radius: 10px; padding: 8px 12px; }
.bench-rank { flex: 0 0 24px; text-align: center; font-weight: 700; color: var(--muted); }
.bench-thumb { width: 64px; height: 64px; object-fit: cover; border-radius: 8px; flex: 0 0 auto; background: var(--panel2); }
img.zoomable { cursor: zoom-in; }
.bench-info { flex: 1 1 auto; min-width: 0; }
.bench-name { font-size: 0.9em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-weight: 600; }
.bench-pct { flex: 0 0 auto; font-size: 1.35em; font-weight: 800; min-width: 62px; text-align: right; }

/* Rejet / validation assistés par l'IA */
.crit-ask { display: flex; gap: 8px; align-items: flex-start; margin-bottom: 4px; }
.crit-ask input { margin-bottom: 0; flex: 1 1 auto; }
.crit-ask button { flex: 0 0 auto; white-space: nowrap; }
.crit-sugg { background: var(--panel2); border: 1px solid var(--accent); border-radius: 10px; padding: 10px 12px; margin: 8px 0; }
.crit-sugg p { margin: 0 0 6px; }
.crit-text { color: var(--text) !important; font-size: 1em; font-style: italic; margin: 4px 0 10px !important; }
.crit-sugg .small-btn { margin-top: 8px; font-size: 0.85em; padding: 6px 12px; }
/* Bouton principal grisé tant qu'aucune phrase IA n'est proposée ; coloré ensuite. */
button:disabled { cursor: not-allowed; }
.modal-actions button:disabled { background: var(--panel2) !important; color: var(--muted) !important; border: 1px solid var(--border) !important; box-shadow: none !important; }
/* « … sans critère » : action secondaire discrète. */
.modal-actions .subtle { color: var(--muted); border-color: transparent; font-weight: 500; }
.modal-actions .subtle:hover { border-color: var(--border); color: var(--text); }
.search-status { margin: 4px 24px 10px; padding: 10px 14px; border-radius: 10px; background: var(--panel2); border: 1px solid var(--accent); color: var(--text); font-size: 0.9em; display: flex; align-items: center; gap: 10px; }
.spin { width: 15px; height: 15px; border: 2px solid var(--border); border-top-color: var(--accent); border-radius: 50%; display: inline-block; animation: spin 0.8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

/* Modal */
.modal { position: fixed; inset: 0; background: rgba(0,0,0,.55); display: grid; place-items: center; z-index: 50; padding: 10px; }
.modal .card { width: min(380px, calc(100vw - 20px)); position: relative; max-height: 92vh; overflow-y: auto; }
.modal-close { position: absolute; top: 10px; right: 10px; width: 28px; height: 28px; padding: 0; border: 0; border-radius: 50%; background: #e5484d; color: #fff; font-size: 15px; line-height: 1; cursor: pointer; display: grid; place-items: center; z-index: 2; }
.modal-close:hover { background: #f2555a; }
.modal-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 6px; }
.platforms { display: flex; align-items: center; gap: 14px; margin: 2px 0 8px; font-size: 0.9em; }
.platforms label { display: inline-flex; align-items: center; gap: 5px; color: var(--text); }
.platforms input { width: auto; margin: 0; }

/* Listings */
.listings { display: flex; flex-direction: column; gap: 8px; padding: 10px 24px 30px; }
.listing { display: flex; align-items: stretch; gap: 4px; background: var(--panel); border: 1px solid var(--border); border-left-width: 4px; border-radius: 10px; overflow: hidden; }
.listing .lk { flex: 1; display: flex; align-items: center; gap: 12px; text-decoration: none; color: var(--text); padding: 10px 12px; min-width: 0; }
.listing:hover { background: var(--panel2); }
.listing .thumb { flex: 0 0 104px; width: 104px; height: 78px; border-radius: 8px; overflow: hidden; background: var(--panel2); display: flex; align-items: center; justify-content: center; }
.listing .thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.listing .thumb.noimg img { display: none; }
.listing .thumb.noimg::after { content: "🪑"; font-size: 28px; opacity: .4; }
.listing .lvl { flex: 0 0 auto; display: inline-flex; align-items: baseline; gap: 3px; font-size: 1.05em; white-space: nowrap; }
.listing .lvl b { font-size: 0.72em; color: var(--muted); }
/* Colonne à droite du titre : le score (%) puis, dessous, le badge « dernier algo ». */
.listing .lvl-col { flex: 0 0 auto; display: flex; flex-direction: column; align-items: flex-end; gap: 3px; }
.listing .moteur-badge { font-size: 0.6rem; line-height: 1.1; font-weight: 600; color: var(--muted); background: var(--panel2); border: 1px solid var(--border); border-radius: 999px; padding: 1px 6px; white-space: nowrap; cursor: help; }
.listing .moteur-badge.moteur-ko { color: #f59e0b; border-color: #f59e0b; }
/* Surveillance DINO (page Test dino) : tuiles de stats + tableau des temps. */
.dstat-grid { display: flex; flex-wrap: wrap; gap: 8px; margin: 8px 0; }
.dstat-tile { flex: 1 1 90px; min-width: 90px; background: var(--panel2); border: 1px solid var(--border); border-radius: 8px; padding: 8px 10px; display: flex; flex-direction: column; gap: 2px; }
.dstat-tile.hot { border-color: #22c55e; }
.dstat-tile.warm { border-color: #f59e0b; }
.dstat-v { font-size: 1.1rem; font-weight: 700; }
.dstat-l { font-size: 0.68rem; color: var(--muted); }
.dstat-tbl { width: 100%; border-collapse: collapse; font-size: 0.85rem; margin-top: 6px; }
.dstat-tbl th, .dstat-tbl td { text-align: right; padding: 3px 8px; border-bottom: 1px solid var(--border); }
.dstat-tbl th:first-child, .dstat-tbl td:first-child { text-align: left; color: var(--muted); }
.dworker { border: 1px solid var(--border); border-radius: 8px; padding: 8px 10px; margin-bottom: 8px; }
.dworker-head { display: flex; flex-wrap: wrap; gap: 8px; align-items: baseline; margin-bottom: 4px; }
.dworker-row { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-bottom: 6px; }
.dworker-row .dw-url { flex: 2 1 220px; min-width: 0; }
.dworker-row .dw-label { flex: 1 1 140px; min-width: 0; }
.listing .body { flex: 1; min-width: 0; }
.listing .t { display: flex; align-items: baseline; gap: 10px; font-weight: 600; }
.listing .t-txt { flex: 1 1 auto; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.listing .meta { color: var(--muted); font-size: 0.88em; }
.listing .niv-label { font-size: 0.8em; color: var(--muted); align-self: center; }
.listing .src { display: inline-flex; align-items: center; gap: 4px; font-weight: 700; color: var(--sc, var(--muted)); }
.listing .srcico { width: 14px; height: 14px; border-radius: 3px; vertical-align: middle; }
.listing .ago { color: var(--accent); font-weight: 600; cursor: help; }
.listing .ago.vu { color: var(--muted); font-weight: 400; }
.listing .cold, .listing .pen, .listing .bon { cursor: help; }
.listing .pen { color: var(--lvl4); }
.listing .bon { color: var(--ok); }
.listing .vmark { color: var(--ok); margin-right: 5px; }
.listing .acts { display: flex; flex-direction: column; }
.listing .acts button { border: 0; border-left: 1px solid var(--border); background: var(--panel2); color: var(--muted); width: 40px; flex: 1; border-radius: 0; font-size: 1em; }
.listing .acts .ok:hover { color: var(--ok); }
.listing .acts .kill:hover { color: var(--lvl5); }
.listing.validated { border-left-color: var(--ok); box-shadow: 0 0 0 1px var(--ok) inset; }
/* 🔥 Trouvaille très pertinente (niveau 4-5) : même feu que les vignettes de
   recherche, décliné sur une carte de liste (halo horizontal, pas de bordure
   pleine pour ne pas masquer la couleur de niveau à gauche). */
.listing.listing-feu { border-color: #f97316; animation: feu-listing 2.3s ease-in-out infinite; }
.listing.listing-feu:hover { border-color: #ef4444; }
@keyframes feu-listing {
  0%   { box-shadow: 0 0 9px -3px #f97316, 0 0 18px -8px #ef4444; }
  30%  { box-shadow: 0 0 16px -2px #ef4444, 0 0 30px -6px #f97316; }
  55%  { box-shadow: 0 0 11px -3px #fb923c, 0 0 22px -7px #ef4444; }
  78%  { box-shadow: 0 0 17px -1px #f97316, 0 0 32px -5px #ef4444; }
  100% { box-shadow: 0 0 9px -3px #f97316, 0 0 18px -8px #ef4444; }
}
@media (prefers-reduced-motion: reduce) {
  .listing.listing-feu { animation: none; box-shadow: 0 0 14px -4px #ef4444; }
}
/* Nouvelle annonce (découverte au dernier passage) : fond vert discret */
.listing.fresh { background: #14251d; }
.listing.fresh:hover { background: #182f24; }
.listing .newmark { margin-right: 5px; }
.lvl-1 { border-left-color: var(--lvl1); }
.lvl-2 { border-left-color: var(--lvl2); }
.lvl-3 { border-left-color: var(--lvl3); }
.lvl-4 { border-left-color: var(--lvl4); }
.lvl-5 { border-left-color: var(--lvl5); }

/* Selects (alignés sur les inputs) */
select {
  background: var(--panel2); border: 1px solid var(--border); color: var(--text);
  padding: 9px 11px; border-radius: 8px; margin-bottom: 8px;
}

/* Petits boutons (admin / partage) */
button.mini { padding: 4px 10px; font-size: 0.82em; border-radius: 6px; background: var(--panel2); color: var(--text); border: 1px solid var(--border); }
button.mini:hover { border-color: var(--accent); }
button.mini.danger { color: var(--muted); }
button.mini.danger:hover { color: var(--lvl5); border-color: var(--lvl5); }

/* Administration */
.admin-wrap { display: grid; grid-template-columns: 1fr 300px; gap: 18px; padding: 12px 24px 30px; align-items: start; max-width: 1500px; }
/* Section « Recherche » : cartes empilées pleine largeur (panneau Connecteurs lisible). */
.admin-wrap.admin-stack { grid-template-columns: 1fr; max-width: 1200px; }
.utable { width: 100%; border-collapse: collapse; background: var(--panel); border: 1px solid var(--border); border-radius: 12px; overflow: hidden; }
.utable th, .utable td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--border); font-size: 0.92em; }
.utable th { color: var(--muted); font-weight: 600; font-size: 0.8em; text-transform: uppercase; letter-spacing: .03em; }
.utable tr:last-child td { border-bottom: 0; }
.urow-acts { display: flex; gap: 6px; justify-content: flex-end; }
.admin-wrap select { width: 100%; }
/* La carte « Nouvel utilisateur » doit remplir sa colonne (sinon 340px déborde). */
.admin-wrap .card { width: auto; }

/* Badge « partagée » sur les cartes */
.rc-shared { font-size: 0.78em; color: var(--accent); border: 1px solid var(--border); border-radius: 20px; padding: 1px 8px; cursor: help; }

/* Liste des partages (modale) */
.share-list { display: flex; flex-direction: column; gap: 6px; margin: 10px 0; }
.share-row { display: flex; align-items: center; justify-content: space-between; background: var(--panel2); border: 1px solid var(--border); border-radius: 8px; padding: 6px 10px; font-size: 0.9em; }

.logo-img { width: 34px; height: 34px; display: block; }

/* Admin : menu latéral */
.admin-layout { display: grid; grid-template-columns: 190px 1fr; gap: 18px; padding: 8px 24px 30px; align-items: start; }
.admin-menu { display: flex; flex-direction: column; gap: 4px; background: var(--panel); border: 1px solid var(--border); border-radius: 12px; padding: 8px; position: sticky; top: 16px; }
.adm-item, .acc-item { text-align: left; background: none; border: 0; border-left: 3px solid transparent; color: var(--muted); padding: 10px 12px; border-radius: 8px; font-weight: 600; font-size: 0.9em; cursor: pointer; }
.adm-item:hover, .acc-item:hover { background: var(--panel2); color: var(--text); }
.adm-item.active, .acc-item.active { background: var(--panel2); color: var(--text); border-left-color: var(--accent); }
.adm-group-label { color: var(--muted); font-size: 0.8em; font-weight: 700; padding: 8px 12px 2px; letter-spacing: .3px; }
.adm-item.adm-sub { padding-left: 26px; font-size: 0.86em; }
.adm-item.adm-sub::before { content: "› "; color: var(--muted); }
.admin-content { min-width: 0; }

/* Admin : section API */
.api-groups { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 16px; margin: 10px 0 16px; }
.api-card { width: auto; }
.sw-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 7px 0; font-size: 0.9em; }
.sw-row input { width: 78px; margin: 0; text-align: center; }
.act-bar { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin: 6px 0 12px; }
.act-bar input { width: auto; flex: 1; min-width: 150px; margin: 0; }
.act-bar select { margin: 0; }
.act-fail { color: var(--lvl5); font-weight: 600; }
.api-card h3 { margin: 0 0 10px; font-size: 1em; }
.api-card label { display: block; font-size: 0.82em; color: var(--muted); margin: 8px 0 3px; }
.set-flag { font-size: 0.85em; font-weight: 400; color: var(--ok); }
.api-actions { display: flex; align-items: center; gap: 12px; padding: 0 0 4px; }

/* Carrousel : la recherche EN COURS de collecte (halo vert pulsant) et LA
   SUIVANTE (halo jaune fixe). Halo en box-shadow et non en border-color, sinon
   `.rech-card:hover` (border-color: var(--accent)) l'écraserait au survol. */
.rech-card.halo-vert { border-color: var(--ok); box-shadow: 0 0 0 1px var(--ok) inset, 0 0 16px -2px var(--ok); animation: halo-pulse 1.8s ease-in-out infinite; }
.rech-card.halo-vert:hover { border-color: var(--ok); }
.rech-card.halo-jaune { border-color: var(--lvl3); box-shadow: 0 0 0 1px var(--lvl3) inset, 0 0 12px -4px var(--lvl3); }
.rech-card.halo-jaune:hover { border-color: var(--lvl3); }
@keyframes halo-pulse {
  0%, 100% { box-shadow: 0 0 0 1px var(--ok) inset, 0 0 8px -3px var(--ok); }
  50% { box-shadow: 0 0 0 1px var(--ok) inset, 0 0 20px 0 var(--ok); }
}
/* Bandeau d'activité sous le titre : étape du scan / bilan du dernier passage */
.rc-scan { display: flex; flex-direction: column; gap: 5px; font-size: 0.84em; color: var(--muted); margin: -4px 0 2px; }
.rc-scan b { color: var(--text); font-weight: 700; }
.rc-scan-det { color: var(--muted); opacity: .8; }
.rc-scan .spin { vertical-align: -1px; margin-right: 2px; }
.rc-scan-bar { display: block; height: 3px; border-radius: 3px; background: var(--panel2); overflow: hidden; }
.rc-scan-bar i { display: block; height: 100%; width: 0; border-radius: 3px; background: var(--muted); transition: width .4s ease; }
/* Passage en cours : le bandeau passe au vert, comme le halo de la carte */
.rc-scan.scan-on { color: var(--ok); }
.rc-scan.scan-on b { color: var(--ok); }
.rc-scan.scan-on .rc-scan-bar i { background: var(--ok); }

/* 🔥 EN FEU : la recherche a matché une annonce à son dernier passage.
   État PERSISTANT (et non une animation de 3 s qu'on ratait) : il ne s'éteint
   qu'au passage suivant, s'il ne ramène rien. La flamme est volontairement
   irrégulière — des paliers inégaux et deux teintes qui alternent, pour que ça
   vive au lieu de pulser mécaniquement. */
.rech-card.halo-feu {
  border-color: #f97316;
  animation: feu 2.3s ease-in-out infinite;
}
.rech-card.halo-feu:hover { border-color: #ef4444; }
@keyframes feu {
  0%   { box-shadow: 0 0 0 1px #f97316 inset, 0 0 10px -3px #f97316, 0 0 22px -8px #ef4444; }
  17%  { box-shadow: 0 0 0 2px #ef4444 inset, 0 0 24px  0px #f97316, 0 0 44px -4px #ef4444; }
  31%  { box-shadow: 0 0 0 1px #fb923c inset, 0 0 14px -4px #fb923c, 0 0 30px -8px #f97316; }
  48%  { box-shadow: 0 0 0 2px #f97316 inset, 0 0 28px  2px #ef4444, 0 0 50px -2px #f97316; }
  63%  { box-shadow: 0 0 0 1px #ef4444 inset, 0 0 12px -3px #ef4444, 0 0 26px -7px #fb923c; }
  79%  { box-shadow: 0 0 0 2px #fb923c inset, 0 0 26px  1px #f97316, 0 0 46px -3px #ef4444; }
  100% { box-shadow: 0 0 0 1px #f97316 inset, 0 0 10px -3px #f97316, 0 0 22px -8px #ef4444; }
}
/* Le feu prime sur le halo vert/jaune du carrousel : c'est l'info la plus forte.
   Spécificité à 3 classes → gagne quelle que soit la position des règles. */
.rech-card.halo-feu.halo-vert,
.rech-card.halo-feu.halo-jaune {
  border-color: #f97316;
  animation: feu 2.3s ease-in-out infinite;
}
.son-btn { padding: 6px 10px; font-size: 1em; line-height: 1; }
@media (prefers-reduced-motion: reduce) {
  .rech-card.halo-feu { animation: none; box-shadow: 0 0 0 2px #f97316 inset, 0 0 20px -4px #ef4444; }
}

/* Primaire bloquée : aucun objet ne porte de photo de référence → le poller
   l'exclut de la rotation. Orange = « ce n'est pas une pause volontaire ». */
.rc-state.bloquee { color: var(--lvl4); border-color: var(--lvl4); cursor: help; }
.rc-bloquee { color: var(--lvl4); font-weight: 600; }
.rech-card:has(.rc-state.bloquee) { border-style: dashed; }

/* Collecte plafonnée : des annonces de la fenêtre ont pu être manquées */
.rc-sature { color: var(--lvl4); font-weight: 600; cursor: help; }

/* Décompte « passe dans … » dans le pied de carte */
.rc-tour { white-space: nowrap; }
.rech-card.halo-vert .rc-tour { color: var(--ok); font-weight: 600; }
.rech-card.halo-jaune .rc-tour { color: var(--lvl3); font-weight: 600; }
@media (prefers-reduced-motion: reduce) { .rech-card.halo-vert { animation: none; } }

/* Admin › Apify : un bloc PLEINE LARGEUR par domaine (compte / Leboncoin /
   Facebook), empilés ; à l'intérieur, les champs se répartissent en colonnes
   pour exploiter la largeur de l'écran d'ordinateur (1 colonne sur mobile). */
.apify-bloc { margin: 0 0 16px; border-left: 3px solid var(--accent); }
.apify-bloc.bloc-lbc { border-left-color: #f56b2a; } /* orange Leboncoin */
.apify-bloc.bloc-fb { border-left-color: #1877f2; } /* bleu Facebook */
.cfg-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 2px 20px; align-items: start; }
.cfg-f { min-width: 0; }
.cfg-f input { width: 100%; box-sizing: border-box; margin: 0; }
.cfg-f .small { margin: 5px 0 0; line-height: 1.35; }
.bloc-sub { margin: 20px 0 4px; padding-top: 14px; border-top: 1px solid var(--border); font-size: 0.92em; }
/* Cadence propre à chaque connecteur, dans la chaîne de secours */
.lbc-min { display: inline-flex; align-items: center; gap: 4px; flex-shrink: 0; white-space: nowrap; color: var(--muted); font-size: 0.82em; }
.lbc-min input { width: 54px; margin: 0; padding: 4px 6px; text-align: center; }

/* Mon compte › Mes clés API */
/* Plus large que les autres panneaux : chaque carte porte une saisie, un lien
   d'aide et une zone de partage. .account-wrap plafonne à 520 px. */
.cles-wrap { max-width: 760px; }
.cles-etapes { margin: 8px 0 0; padding-left: 20px; line-height: 1.7; }
.cle-card { margin-bottom: 14px; }
.cle-card h3 { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.cle-saisie { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-top: 8px; }
.cle-input { flex: 1; min-width: 200px; margin: 0; }
/* Clé prêtée par quelqu'un d'autre : on le dit clairement, c'est son quota. */
.cle-pretee { font-size: 0.8em; font-weight: 600; color: var(--lvl3); }
.cle-partage { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--border); }
.cle-partage label { display: block; margin-bottom: 6px; }
.cle-share-input { width: 100%; box-sizing: border-box; margin: 0 0 6px; }
.cle-share-results:not(:empty) { margin-bottom: 8px; }

/* Mon compte */
.account-wrap { padding: 12px 24px 30px; max-width: 520px; }
.pool-list { display: flex; flex-direction: column; gap: 6px; margin: 6px 0; }
.pool-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; background: var(--panel2); border: 1px solid var(--border); border-radius: 8px; padding: 8px 12px; }
.pool-acts { display: flex; gap: 6px; }
/* Jauge verticale du seuil de notification (%) */
.notif-gauge { display: flex; align-items: stretch; gap: 16px; height: 210px; margin: 12px 0 6px; }
.notif-gauge input[type="range"] { writing-mode: vertical-lr; direction: rtl; -webkit-appearance: slider-vertical; width: 26px; height: 100%; margin: 0; padding: 0; accent-color: var(--accent); cursor: pointer; }
.ng-marks { position: relative; width: 96px; }
.ng-marks span { position: absolute; left: 0; transform: translateY(50%); white-space: nowrap; font-size: 0.82em; color: var(--muted); }
.ng-marks span::before { content: "— "; color: var(--border); }
.ng-readout { align-self: center; text-align: center; font-size: 1.6em; font-weight: 700; color: var(--accent); }
.ng-readout > div { font-size: 0.5em; font-weight: 400; margin-top: 2px; }
.notif-steps { margin: 6px 0 10px; padding-left: 22px; font-size: 0.88em; color: var(--muted); line-height: 1.5; }
.notif-steps li { margin-bottom: 7px; }
.notif-steps b { color: var(--text); }
.notif-adv { margin-top: 14px; border-top: 1px solid var(--border); padding-top: 10px; }
.notif-adv summary { cursor: pointer; color: var(--accent); font-size: 0.9em; margin-bottom: 6px; }
.notif-adv code, .notif-steps code { background: var(--panel2); padding: 1px 5px; border-radius: 4px; font-size: 0.9em; }
.empty .spin { margin-right: 8px; vertical-align: -2px; }
.acc-current { margin: 10px 0; }
.acc-actions { display: flex; gap: 10px; margin: 8px 0; }
.sep { border: 0; border-top: 1px solid var(--border); margin: 16px 0; }
.acc-results { display: flex; flex-direction: column; gap: 4px; margin-top: 6px; }
.acc-city-item { text-align: left; background: var(--panel2); border: 1px solid var(--border); color: var(--text); border-radius: 8px; padding: 8px 10px; cursor: pointer; font-size: 0.9em; }
.acc-city-item:hover { border-color: var(--accent); }
.listing .dist { color: var(--accent); cursor: help; }
.listing .vis { color: #c9a24b; font-weight: 600; cursor: help; }
.ref-photo { position: relative; display: inline-block; }
.ref-thumb { display: block; width: 56px; height: 56px; object-fit: cover; border-radius: 8px; border: 1px solid var(--border); cursor: zoom-in; }
.ref-thumb:hover { border-color: var(--accent); }
.ref-thumb-lg { width: 104px; height: 104px; }
.ref-photo .ref-rm { position: absolute; top: -7px; right: -7px; width: 22px; height: 22px; padding: 0; border-radius: 50%; background: #e5484d; color: #fff; border: 2px solid var(--panel); font-size: 12px; line-height: 1; cursor: pointer; display: grid; place-items: center; }
.ref-photo .ref-rm:hover { background: #f2555a; }
.lightbox { position: fixed; inset: 0; background: rgba(0,0,0,.88); display: grid; place-items: center; z-index: 100; cursor: zoom-out; padding: 20px; }
.lightbox img { max-width: 96vw; max-height: 96vh; border-radius: 8px; box-shadow: 0 8px 40px rgba(0,0,0,.6); }
/* Modale photos : plus large pour éditer confortablement les analyses. */
#photosModal .card { width: min(640px, calc(100vw - 20px)); }
.ph-item { display: flex; gap: 14px; align-items: stretch; margin: 12px 0; padding-bottom: 12px; border-bottom: 1px solid var(--border); }
.ph-item:last-child { border-bottom: 0; }
.ph-item .ref-photo, .ph-item .ref-thumb-lg { flex: 0 0 auto; }
.ph-desc { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.ph-desc textarea { margin-top: 4px; margin-bottom: 0; flex: 1; min-height: 130px; font-size: 0.95em; line-height: 1.5; resize: vertical; }
.ph-desc-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.ph-regen { font-size: 0.82em; padding: 3px 10px; white-space: nowrap; }
.bench-ia { display: flex; gap: 8px; align-items: center; margin: 2px 0 4px; }
.bench-ia select { flex: 0 0 auto; }
.bench-ia input { flex: 1; min-width: 0; }
@media (max-width: 640px) { .ph-item { flex-direction: column; } .ph-desc textarea { min-height: 100px; } }

@media (max-width: 760px) {
  .rech-grid { grid-template-columns: 1fr; }
  .admin-wrap { grid-template-columns: 1fr; }
  .admin-layout { grid-template-columns: 1fr; }
}

/* Fiches résultat sur mobile : image en priorité (pleine largeur, en haut),
   puis score + titre + infos sur la/les ligne(s) en dessous. */
@media (max-width: 640px) {
  .listings { padding: 10px 12px 30px; }
  .listing { flex-direction: column; }
  .listing .lk {
    display: grid;
    grid-template-columns: auto 1fr;
    grid-template-areas: "thumb thumb" "lvl body";
    align-items: center; gap: 0; padding: 0;
  }
  .listing .thumb { grid-area: thumb; width: 100%; height: 175px; flex: none; border-radius: 0; }
  .listing .thumb.noimg { height: 100px; }
  .listing .lvl { grid-area: lvl; flex-direction: row; align-items: baseline; gap: 5px; padding: 12px 6px 12px 12px; }
  .listing .body { grid-area: body; min-width: 0; padding: 12px 12px 12px 4px; }
  .listing .t { white-space: normal; }
  .listing .meta { font-size: 0.9em; line-height: 1.5; }
  .listing .niv-label { display: none; }
  .listing .acts { flex-direction: row; }
  .listing .acts button { width: auto; flex: 1; border-left: 0; border-top: 1px solid var(--border); padding: 10px 0; }
}

/* ============ Adaptation mobile globale (toutes les vues) ============ */
@media (max-width: 640px) {
  /* Conteneurs : marges latérales réduites */
  .home-head { padding: 14px 14px 4px; }
  .rech-grid { padding: 12px 14px 24px; gap: 12px; }
  .detail-bar { padding: 12px 14px 6px; gap: 8px; position: relative; align-items: flex-start; }
  .search-status { margin: 4px 14px 8px; }
  .admin-wrap { padding: 10px 14px 24px; }
  .admin-layout { padding: 8px 14px 24px; gap: 12px; }
  .account-wrap { padding: 10px 14px 24px; max-width: none; }

  /* Accueil : bouton « + Nouvelle recherche » pleine largeur */
  .home-head { flex-direction: column; align-items: stretch; }
  .home-head .primary { width: 100%; padding: 12px; }

  /* Barre de détail : « ← Mes recherches » + titre en haut à gauche, ✕ en haut
     à droite, contrôles en grille tactile 2 colonnes. */
  .detail-bar .back { flex: 0 0 auto; padding: 6px 10px; font-size: 0.8em; margin-top: 2px; }
  .detail-id { min-width: 0; flex: 1 1 auto; padding-right: 42px; } /* place pour le ✕ */
  .detail-id h2 { font-size: 16px; }
  /* Pastilles de coût : EN LIGNE (horizontales), compactes. */
  #d-couts .rc-couts { gap: 5px; }
  .detail-bar .cost-badge { font-size: 0.68em; padding: 2px 7px; }
  /* Suppression : ✕ rouge en cercle, en haut à droite, hors du flux. */
  #d-delete { position: absolute; top: 8px; right: 10px; flex: 0 0 auto; width: 34px; height: 34px; min-width: 0; padding: 0; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 1em; line-height: 1; }
  #d-delete .dd-x { display: inline; }
  #d-delete .dd-txt { display: none; }
  .detail-bar .ghost { flex: 1 1 calc(50% - 8px); padding: 10px 8px; font-size: 0.85em; }
  .freq-edit { flex: 1 1 calc(50% - 8px); justify-content: center; padding: 7px 10px; }
  .freq-edit input { width: 52px; }
  .freq-edit.kw-edit { flex: 1 1 100%; }
  .freq-edit.kw-edit input { width: auto; max-width: none; flex: 1 1 auto; min-width: 0; }

  /* Menus latéraux (Admin + Mon compte) : barre horizontale en haut */
  .admin-menu { flex-direction: row; overflow-x: auto; position: static; padding: 6px; gap: 6px; }
  .adm-item, .acc-item { border-left: 0; border-bottom: 3px solid transparent; white-space: nowrap; padding: 8px 12px; flex: 0 0 auto; }
  .adm-item.active, .acc-item.active { border-left: 0; border-bottom-color: var(--accent); }
  .adm-group-label { padding: 8px 6px; white-space: nowrap; align-self: center; flex: 0 0 auto; }
  .adm-item.adm-sub { padding-left: 12px; }

  /* Tableau des utilisateurs : défile horizontalement dans son cadre */
  .utable { display: block; overflow-x: auto; white-space: nowrap; }

  /* Cartes / formulaires / modales */
  .card { padding: 16px; }
  .modal .card select, .modal .card input { font-size: 16px; } /* évite le zoom iOS au focus */
  .modal .card select { width: 100%; }
  .modal .row { flex-wrap: wrap; }
  .modal-actions { flex-wrap: wrap; }
  .modal-actions button { flex: 1 1 auto; padding: 11px 10px; }

  /* Confort tactile général */
  input, select, textarea { font-size: 16px; } /* pas de zoom auto iOS */
  .acc-actions { flex-wrap: wrap; }
  .acc-actions button { flex: 1 1 auto; padding: 11px 10px; }
  .pool-row { flex-wrap: wrap; }
  .api-actions { flex-wrap: wrap; }
  .api-actions .primary { width: 100%; padding: 12px; }
}

/* ===== Page Consommation des crédits ===== */
.apify-gauge { cursor: pointer; }
.usage-wrap { padding: 8px 24px 32px; max-width: 920px; }
.usage-cards { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 18px; }
.ucard { flex: 1 1 170px; background: var(--panel2); border: 1px solid var(--border); border-radius: 12px; padding: 12px 14px; }
.ucard-lbl { display: block; font-size: 0.76em; color: var(--muted); }
.ucard-val { display: block; font-size: 1.5em; font-weight: 700; margin-top: 4px; }
.usage-section { background: var(--panel); border: 1px solid var(--border); border-radius: 12px; padding: 14px 16px; margin-bottom: 16px; }
.usage-section h3 { margin: 0 0 6px; font-size: 1em; }
.usage-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.seg { display: inline-flex; border: 1px solid var(--border); border-radius: 20px; overflow: hidden; }
.seg-btn { background: transparent; color: var(--muted); border: 0; border-radius: 0; padding: 5px 13px; font-size: 0.82em; font-weight: 700; }
.seg-btn.on { background: var(--accent); color: #0b1020; }
.u-chart { display: flex; align-items: flex-end; gap: 2px; height: 165px; margin-top: 14px; }
.ubar { flex: 1 1 0; min-width: 0; height: 100%; display: flex; flex-direction: column; }
.ubar-stack { flex: 1; display: flex; flex-direction: column; justify-content: flex-end; min-height: 0; }
.ubar-claude { width: 100%; background: #a78bfa; }
.ubar-gemini { width: 100%; background: #f59e0b; }
.ubar-apify { width: 100%; background: #3b82f6; }
.ubar:hover .ubar-claude, .ubar:hover .ubar-gemini, .ubar:hover .ubar-apify { filter: brightness(1.25); }
.ubar-lbl { text-align: center; font-size: 9px; color: var(--muted); margin-top: 3px; white-space: nowrap; overflow: hidden; height: 12px; }
.u-legend { margin-top: 10px; font-size: 0.8em; color: var(--muted); }
.u-legend .lg { display: inline-block; width: 11px; height: 11px; border-radius: 3px; vertical-align: -1px; }
.u-legend .lg-apify { background: #3b82f6; }
.u-legend .lg-gemini { background: #f59e0b; }
.u-legend .lg-claude { background: #a78bfa; }
.u-search { display: flex; flex-direction: column; gap: 8px; }
.us-row { display: flex; align-items: center; gap: 10px; }
.us-name { flex: 0 0 32%; font-size: 0.85em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.us-bar { flex: 1 1 auto; height: 16px; background: var(--panel2); border-radius: 8px; overflow: hidden; display: flex; }
.us-apify { background: #3b82f6; height: 100%; }
.us-gemini { background: #f59e0b; height: 100%; }
.us-claude { background: #a78bfa; height: 100%; }
.us-val { flex: 0 0 auto; font-size: 0.82em; font-weight: 700; min-width: 68px; text-align: right; }
@media (max-width: 640px) {
  .usage-wrap { padding: 8px 14px 28px; }
  .us-name { flex-basis: 40%; }
  .ucard-val { font-size: 1.3em; }
}