/* ==========================================================================
   VTD BOT — Application (SaaS) shell + pages
   ========================================================================== */

/* ------------------------------ Shell ----------------------------------- */
.app-shell { display: grid; grid-template-columns: var(--sidebar-w) 1fr; min-height: 100vh; background: var(--bg); }

.sidebar { position: sticky; top: 0; height: 100vh; display: flex; flex-direction: column; padding: 20px 16px; background: var(--surface); border-right: 1px solid var(--border); z-index: 100; }
.side-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 6px 4px 20px; }
.sidebar .brand { padding: 0 2px; }
.side-collapse { width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center; color: var(--slate-400); flex: none; transition: background .16s var(--ease), color .16s var(--ease); }
.side-collapse:hover { background: var(--slate-100); color: var(--ink); }
.side-collapse svg { transition: transform .22s var(--ease); }
.side-nav { display: flex; flex-direction: column; gap: 3px; flex: 1; overflow-y: auto; }
.side-link { display: flex; align-items: center; gap: 12px; padding: 11px 13px; border-radius: var(--r-sm); font-weight: 600; font-size: .92rem; color: var(--slate-600); transition: all .16s var(--ease); position: relative; }
.side-link svg { flex: none; color: var(--slate-400); transition: color .16s; }
.side-link:hover { background: var(--slate-50); color: var(--ink); }
.side-link:hover svg { color: var(--slate-600); }
.side-link.active { background: var(--blue-50); color: var(--blue-400); box-shadow: inset 0 0 0 1px var(--blue-200), var(--glow-xs); }
.side-link.active svg { color: var(--blue-400); }
.side-link.active::before { content: ""; position: absolute; left: -16px; top: 50%; transform: translateY(-50%); width: 3px; height: 22px; background: var(--grad-dot); border-radius: 0 3px 3px 0; }
.side-badge { margin-left: auto; background: var(--grad-brand); color: #fff; font-size: .68rem; font-weight: 800; min-width: 19px; height: 19px; padding: 0 5px; border-radius: 999px; display: grid; place-items: center; }
.side-foot { display: flex; flex-direction: column; gap: 6px; padding-top: 14px; border-top: 1px solid var(--border); }
.plan-card { background: linear-gradient(150deg, var(--blue-50), var(--surface)); border: 1px solid var(--blue-100); border-radius: var(--r-md); padding: 13px; margin-bottom: 6px; }
.side-up { font-size: .76rem; font-weight: 800; color: var(--blue-400); }
.plan-meta { font-size: .74rem; margin-top: 8px; }
/* Carte d'offre (barre latérale) : contenu EMPILÉ — le badge ne déborde plus de sa pastille
   et le CTA prend toute la largeur (plus lisible, plus cliquable). */
.plan-card .badge { max-width: 100%; }
.plan-card .badge span, .plan-card .badge { white-space: normal; line-height: 1.25; text-align: left; }
.side-plan-cta { display: block; margin-top: 10px; padding: 7px 10px; border-radius: 9px;
  background: var(--grad-brand); color: #fff; font-size: .76rem; font-weight: 800;
  text-align: center; text-decoration: none; }
.side-plan-cta:hover { background: var(--blue-600); }

.app-main { display: flex; flex-direction: column; min-width: 0; }
.topbar { position: sticky; top: 0; z-index: 90; display: flex; align-items: center; gap: 16px; padding: 13px 28px; background: rgba(18,21,23,.82); backdrop-filter: blur(12px); border-bottom: 1px solid var(--border); }
.topsearch { flex: 1; max-width: 520px; }
.topbar-right { margin-left: auto; }
.topsearch .input { background: var(--slate-50); border-color: transparent; }
.topsearch .input:focus { background: var(--surface-2); }
.live-pill { cursor: default; }
.topbell { position: relative; }
.bell-badge { position: absolute; top: -2px; right: -2px; min-width: 18px; height: 18px; padding: 0 5px; background: var(--grad-brand); color: #fff; font-size: .66rem; font-weight: 800; line-height: 1; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center; border: 2px solid var(--paper); box-shadow: 0 1px 3px rgba(0,0,0,.5); }
.user-chip { display: flex; align-items: center; gap: 9px; padding: 5px 10px 5px 5px; border-radius: var(--r-pill); border: 1px solid var(--border); transition: all .16s; }
.user-chip:hover { background: var(--slate-50); border-color: var(--slate-300); }
.user-name { font-weight: 700; font-size: .9rem; }
.user-chip svg { color: var(--slate-400); }
/* Menu profil (popover sous le chip) */
.user-wrap { position: relative; }
.user-menu { position: absolute; right: 0; top: calc(100% + 8px); width: 264px; background: var(--surface); border: 1px solid var(--border); border-radius: 14px; box-shadow: 0 14px 38px rgba(0,0,0,.66); padding: 8px; z-index: 60; animation: umpop .14s ease; }
.user-menu[hidden] { display: none; }
@keyframes umpop { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: translateY(0); } }
.user-menu-head { display: flex; align-items: center; gap: 11px; padding: 8px 10px 12px; }
.user-menu-id { min-width: 0; }
.user-menu-id strong { display: block; font-size: .92rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.user-menu-id span { display: block; font-size: .78rem; color: var(--slate-500); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.user-menu-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 0 10px 8px; }
.user-menu-sep { height: 1px; background: var(--border); margin: 4px 6px 6px; }
.user-menu-item { display: flex; align-items: center; gap: 11px; width: 100%; padding: 9px 10px; border-radius: 9px; font-size: .9rem; font-weight: 600; color: var(--slate-600); text-align: left; }
.user-menu-item:hover { background: var(--slate-50); }
.user-menu-item svg { color: var(--slate-400); }
.user-menu-item.danger { color: var(--red-500); }
.user-menu-item.danger svg { color: var(--red-500); }
.app-content { padding: 28px; max-width: 1320px; width: 100%; margin: 0 auto; }
.mobile-only { display: none; }
.side-scrim { display: none; }

.page-loading { height: 60vh; display: grid; place-items: center; }
.page-loading::after { content: ""; width: 34px; height: 34px; border: 3px solid var(--slate-200); border-top-color: var(--blue-500); border-radius: 50%; animation: spin .8s linear infinite; }

/* ------------------------------ Page header ----------------------------- */
.page-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 24px; flex-wrap: wrap; }
.page-head h1 { font-size: 1.9rem; }
.page-head .sub { color: var(--slate-500); margin-top: 4px; }
.page-head-actions { display: flex; gap: 10px; flex-wrap: wrap; }

/* ------------------------------ Grids ----------------------------------- */
.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; }
.grid-2-1 { display: grid; grid-template-columns: 2fr 1fr; gap: 18px; }
.grid-1-2 { display: grid; grid-template-columns: 1fr 2fr; gap: 18px; }
.mb-18 { margin-bottom: 18px; } .mb-24 { margin-bottom: 24px; } .mt-18 { margin-top: 18px; } .mt-24 { margin-top: 24px; }
.mt-10 { margin-top: 10px; } .mt-12 { margin-top: 12px; } .mt-14 { margin-top: 14px; }
.mb-12 { margin-bottom: 12px; } .mb-14 { margin-bottom: 14px; }

/* ------------------------------ Stat card ------------------------------- */
.statcard { display: flex; flex-direction: column; gap: 4px; }
/* La tuile d'icône reprend la teinte de sa statistique : `currentColor` est déjà
   posé par la classe d'accent, on s'en sert pour une lueur assortie plutôt que
   d'écrire une règle par couleur. */
.statcard-ic { width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center;
  box-shadow: 0 6px 18px -8px currentColor, var(--edge-light); }
.statcard-val { font-family: var(--font-display); font-weight: 800; font-size: 1.85rem; letter-spacing: -.02em; margin-top: 12px; }
.statcard-label { font-size: .88rem; }
.statcard-sub { font-size: .76rem; margin-top: 4px; }

/* ------------------------------ Listing card ---------------------------- */
.lcard { position: relative; overflow: hidden; display: flex; flex-direction: column; }
.thumb { position: relative; display: grid; place-items: center; overflow: hidden; }
.thumb::after { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at 70% 20%, rgba(255,255,255,.25), transparent 55%); }
.thumb-ic { color: rgba(255,255,255,.92); position: relative; z-index: 1; filter: drop-shadow(0 4px 10px rgba(0,0,0,.18)); }
.thumb-brand { position: absolute; bottom: 10px; left: 12px; color: #fff; font-weight: 800; font-size: .8rem; letter-spacing: .02em; text-shadow: 0 1px 6px rgba(0,0,0,.3); z-index: 1; }
.thumb-drop, .thumb-urgent { position: absolute; top: 10px; display: inline-flex; align-items: center; gap: 4px; font-size: .7rem; font-weight: 800; padding: 4px 8px; border-radius: var(--r-pill); z-index: 1; }
.thumb-drop { right: 52px; background: var(--green-500); color: #fff; }
.thumb-urgent { left: 10px; background: var(--red-500); color: #fff; }
.lcard-fav { position: absolute; top: 10px; right: 10px; width: 32px; height: 32px; border-radius: 50%; background: rgba(255,255,255,.92); color: var(--slate-500); display: grid; place-items: center; z-index: 2; transition: all .16s; box-shadow: var(--sh-xs); }
.lcard-fav:hover { color: var(--red-500); transform: scale(1.1); }
.lcard-fav.on { color: var(--red-500); }
.lcard-fav.on svg { fill: var(--red-500); }
/* Cœur favori sur la grande image de la modale d'annonce (plus gros, coin haut-droit). */
.detail-fav { top: 14px; right: 14px; width: 40px; height: 40px; background: rgba(255,255,255,.95); box-shadow: var(--sh-sm); cursor: pointer; border: none; }
.lcard-body { padding: 16px; display: flex; flex-direction: column; gap: 10px; flex: 1; }
.lcard-title { font-size: 1.02rem; font-weight: 700; }
.lcard-sub { font-size: .8rem; }
.lcard-price { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.lcard-price .price { font-family: var(--font-display); font-weight: 800; font-size: 1.4rem; }
.price-was { text-decoration: line-through; color: var(--slate-400); font-size: .9rem; font-weight: 600; }
.lcard-analysis { background: var(--slate-50); border-radius: var(--r-sm); padding: 10px 12px; display: flex; flex-direction: column; gap: 7px; }
.lca-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; font-size: .82rem; }
.lca-lab { color: var(--slate-500); display: inline-flex; align-items: center; gap: 5px; min-width: 0; }
.lca-lab svg { color: var(--green-500); flex: none; }
.lca-val { font-weight: 700; color: var(--ink); white-space: nowrap; display: inline-flex; align-items: center; }
.lca-val.c-green { color: var(--green-600, #3EDC92); }
.lca-gap { font-weight: 800; font-size: .72rem; padding: 1px 7px; border-radius: 999px; margin-left: 7px; }
.lca-gap.is-good { color: var(--green-700, #3EDC92); background: var(--green-100, #12341F); }
.lca-gap.is-bad { color: var(--red-600); background: var(--red-100, #3A1B18); }
.lcard-meta { display: flex; align-items: center; gap: 12px; font-size: .78rem; flex-wrap: wrap; }
.lcard-meta span { display: inline-flex; align-items: center; gap: 4px; }
.lcard-actions { display: flex; gap: 6px; margin-top: auto; padding-top: 4px; }

/* Listing grid */
.lgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(270px, 1fr)); gap: 18px; }

/* ------------------------------ Price meter ----------------------------- */
.meter { margin: 4px 0; }
.meter-track { position: relative; height: 8px; border-radius: 999px; overflow: visible; display: flex; }
.meter-zone { height: 100%; }
.meter-zone.good { flex: 1; background: var(--green-500); border-radius: 999px 0 0 999px; }
.meter-zone.mid { flex: 1; background: var(--amber-500); }
.meter-zone.high { flex: 1; background: var(--red-500); border-radius: 0 999px 999px 0; }
.meter-mark { position: absolute; top: 50%; transform: translate(-50%, -50%); }
.meter-mark.market { width: 2px; height: 16px; background: var(--ink); border-radius: 2px; }
.meter-mark.price { width: 16px; height: 16px; border-radius: 50%; background: #fff; border: 3px solid var(--slate-500); box-shadow: var(--sh-sm); cursor: help; }
.meter-mark.price.is-good { border-color: var(--green-500); }
.meter-mark.price.is-bad { border-color: var(--red-500); }
.meter-legend { display: flex; justify-content: space-between; font-size: .68rem; color: var(--slate-400); margin-top: 8px; }

/* ------------------------------ Search page ----------------------------- */
.search-layout { display: grid; grid-template-columns: 290px minmax(0, 1fr); gap: 22px; align-items: start; }
.search-layout > * { min-width: 0; }   /* évite qu'un enfant (résumé scrollable) élargisse la colonne */
.filters { position: sticky; top: 88px; }
.filters-body { display: flex; flex-direction: column; gap: 12px; }
.filter-group { display: flex; flex-direction: column; gap: 6px; }
.filter-group > .label { display: flex; align-items: center; justify-content: space-between; }
.cond-list { display: flex; flex-direction: column; gap: 8px; }
.price-inputs { display: flex; align-items: center; gap: 8px; }
.price-inputs .input { text-align: left; }
.results-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 16px; flex-wrap: wrap; }
.results-count { font-weight: 700; }
.results-count span { color: var(--blue-400); }
.search-summary { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 18px; }
.sum-pill { display: flex; align-items: center; gap: 8px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-sm); padding: 10px 14px; font-size: .86rem; font-weight: 600; }
.sum-pill svg { color: var(--blue-500); }
.sum-pill strong { font-family: var(--font-display); }

/* ------------------------------ Deals page ------------------------------ */
.deal-rank { display: flex; align-items: center; gap: 16px; padding: 16px; border-radius: var(--r-md); }
.rank-num { font-family: var(--font-display); font-weight: 800; font-size: 1.4rem; color: var(--slate-300); width: 32px; text-align: center; }
.rank-thumb { width: 64px; height: 64px; border-radius: var(--r-sm); display: grid; place-items: center; color: #fff; flex: none; }

/* Vraie photo de l'annonce (grande carte) : couvre le dégradé + l'icône. */
.thumb-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 2; }
.thumb-img.broken { display: none; }

/* Vignette carrée avec photo réelle (lignes de deals, listes). */
.media-thumb { position: relative; display: grid; place-items: center; overflow: hidden; flex: none; color: #fff; }
.media-thumb img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 1; }
.media-thumb img.broken { display: none; }
.media-thumb .mt-ic { position: relative; z-index: 0; filter: drop-shadow(0 3px 8px rgba(0,0,0,.18)); }

/* ------------------------------ Dashboard ------------------------------- */
.dash-deal { display: flex; align-items: center; gap: 12px; padding: 12px; border-radius: var(--r-sm); transition: background .15s; cursor: pointer; }
.dash-deal:hover { background: var(--slate-50); }
.dash-deal-thumb { width: 46px; height: 46px; border-radius: 11px; display: grid; place-items: center; color: #fff; flex: none; }
.mini-list { display: flex; flex-direction: column; }
.mini-row { display: flex; align-items: center; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--border); }
.mini-row:last-child { border-bottom: none; }

/* ------------------------------ Kanban (CRM) ---------------------------- */
/* Barre TOUJOURS visible : on ne met PAS scrollbar-width/scrollbar-color (sinon Chrome
   ignore ::-webkit-scrollbar et repasse à la barre native macOS qui s'auto-masque).
   Un ::-webkit-scrollbar stylé avec un pouce plein reste affiché en permanence. */
.kanban { display: grid; grid-auto-flow: column; grid-auto-columns: 280px; gap: 14px; overflow-x: scroll; padding-bottom: 14px; }
.kanban::-webkit-scrollbar { height: 14px; -webkit-appearance: none; appearance: none; }
.kanban::-webkit-scrollbar-track { background: var(--slate-100); border-radius: 999px; }
.kanban::-webkit-scrollbar-thumb { background: var(--slate-400); border-radius: 999px; border: 3px solid var(--slate-100); min-width: 40px; }
.kanban::-webkit-scrollbar-thumb:hover { background: var(--slate-500); }
.kcol { background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--r-md); padding: 12px; display: flex; flex-direction: column; gap: 10px; min-height: 200px; }
.kcol-head { display: flex; align-items: center; justify-content: space-between; padding: 2px 4px; }
.kcol-head .dot { width: 9px; height: 9px; border-radius: 50%; }
.kcol-head strong { font-size: .9rem; }
.kcol-count { font-size: .76rem; font-weight: 800; color: var(--slate-500); background: var(--slate-100); padding: 2px 8px; border-radius: 999px; }
.kcard { background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--r-sm); padding: 12px; cursor: grab; transition: box-shadow .15s, transform .15s; box-shadow: var(--sh-xs); }
.kcard:hover { box-shadow: var(--sh-md); transform: translateY(-2px); }
.kcard.dragging { opacity: .5; }
.kcard-top { display: flex; align-items: center; gap: 9px; margin-bottom: 8px; }
.kcard-thumb { width: 34px; height: 34px; border-radius: 9px; display: grid; place-items: center; color: #fff; flex: none; font-size: .72rem; font-weight: 800; }
.kcard-thumb.has-img { background: var(--slate-100); overflow: hidden; }
.kcard-thumb.has-img img { width: 100%; height: 100%; object-fit: cover; }
.kcard-title { font-weight: 700; font-size: .86rem; line-height: 1.25; }
.kcard-meta { display: flex; align-items: center; justify-content: space-between; margin-top: 8px; font-size: .78rem; }
.kcol.drag-over { outline: 2px dashed var(--blue-400); outline-offset: -2px; }

/* ------------------------------ Messaging ------------------------------- */
/* Onglets segmentés (Messagerie) */
.seg-tabs { display: inline-flex; gap: 4px; background: var(--slate-100); border-radius: 12px; padding: 4px; }
.seg { display: inline-flex; align-items: center; gap: 7px; border: 0; background: transparent; color: var(--slate-600); font: inherit; font-weight: 700; font-size: .9rem; padding: 8px 16px; border-radius: 9px; cursor: pointer; transition: .12s; }
.seg:hover { color: var(--ink); }
.seg.active { background: var(--slate-200); color: var(--ink); box-shadow: 0 1px 3px rgba(0,0,0,.4); }
.seg svg { width: 15px; height: 15px; }
/* Générateur de message : composeur + aperçu côte à côte */
.msg-gen { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 20px; align-items: stretch; }
.msg-gen .panel { display: flex; flex-direction: column; min-width: 0; }
.msg-thread-sub { display: flex; align-items: flex-end; gap: 12px; padding: 12px 16px; border-bottom: 1px solid var(--border); flex-wrap: wrap; }
@media (max-width: 900px) { .msg-gen { grid-template-columns: minmax(0, 1fr); } }

/* Grille de prix (modale « Suivre un vendeur ») : quand un libellé passe sur 2
   lignes (« Prix d'achat visé », « Valeur de revente ») et un autre sur 1
   (« Prix affiché »), les champs sont étirés à la même hauteur (grid stretch)
   mais les inputs se retrouvaient à des hauteurs différentes. On colle chaque
   input en bas de son champ -> les 3 cadres s'alignent parfaitement. Zéro effet
   sur desktop où les libellés tiennent sur 1 ligne. */
.price-grid .field > *:last-child { margin-top: auto; }

.msg-layout { display: grid; grid-template-columns: 320px 1fr; gap: 0; border: 1px solid var(--border); border-radius: var(--r-lg); overflow: hidden; background: var(--surface); height: calc(100vh - 220px); min-height: 480px; }
.msg-list { border-right: 1px solid var(--border); overflow-y: auto; }
.msg-list-head { padding: 16px; border-bottom: 1px solid var(--border); position: sticky; top: 0; background: var(--surface); z-index: 2; }
.thread-item { display: flex; gap: 12px; padding: 14px 16px; border-bottom: 1px solid var(--border); cursor: pointer; transition: background .14s; }
.thread-item:hover { background: var(--slate-50); }
.thread-item.active { background: var(--blue-50); }
.thread-thumb { width: 42px; height: 42px; border-radius: 11px; display: grid; place-items: center; color: #fff; flex: none; }
.thread-main { min-width: 0; flex: 1; }
.thread-name { font-weight: 700; font-size: .9rem; display: flex; justify-content: space-between; gap: 8px; }
.thread-time { font-size: .72rem; color: var(--slate-400); font-weight: 600; flex: none; }
.thread-preview { font-size: .82rem; color: var(--slate-500); }
.thread-unread { width: 8px; height: 8px; border-radius: 50%; background: var(--grad-dot); flex: none; align-self: center; }
.msg-thread { display: flex; flex-direction: column; }
.msg-thread-head { display: flex; align-items: center; gap: 12px; padding: 14px 20px; border-bottom: 1px solid var(--border); }
.msg-body { flex: 1; overflow-y: auto; padding: 22px; display: flex; flex-direction: column; gap: 12px; background: var(--canvas); }
.bubble { max-width: 72%; padding: 11px 15px; border-radius: 16px; font-size: .9rem; line-height: 1.5; white-space: pre-wrap; }
.bubble.them { background: var(--surface-2); border: 1px solid var(--border); border-bottom-left-radius: 5px; align-self: flex-start; }
.bubble.me { background: var(--grad-brand-deep); color: #fff; border-bottom-right-radius: 5px; align-self: flex-end; box-shadow: var(--glow-xs), var(--edge-light); }
.bubble-time { font-size: .68rem; opacity: .7; margin-top: 5px; display: block; }
/* L'opacité s'applique au RENDU : 70 % de blanc sur du bleu donne un gris bleuté à
   2,56:1 pour 10,9 px. Sur la bulle sortante on la retire ; sur la bulle reçue
   (fond sombre, texte --ink à 15,6:1) elle reste sans danger. */
.bubble.me .bubble-time { opacity: 1; }
.msg-compose { border-top: 1px solid var(--border); padding: 14px; display: flex; flex-direction: column; gap: 10px; background: var(--surface); }
.compose-row { display: flex; gap: 10px; align-items: flex-end; }
.tpl-bar { display: flex; gap: 6px; flex-wrap: wrap; }

/* ------------------------------ AutoBuy --------------------------------- */
.ab-rule { display: flex; align-items: center; gap: 16px; padding: 18px; }
.ab-rule-ic { width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; flex: none; background: var(--ink); color: var(--canvas); }
.ab-log-row { display: grid; grid-template-columns: auto 1fr auto auto auto; gap: 14px; align-items: center; padding: 12px 0; border-bottom: 1px solid var(--border); font-size: .88rem; }
.ab-log-row:last-child { border-bottom: none; }
.ab-speed { font-family: ui-monospace, monospace; font-weight: 700; }

/* ------------------------------ Templates ------------------------------- */
.tpl-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 16px; align-items: stretch; }
.tpl-card { padding: 18px; display: flex; flex-direction: column; gap: 10px; }
.tpl-card .row.gap-6 { margin-top: auto; }   /* actions collées en bas -> toutes les cartes s'alignent */
/* Titre sur 2 lignes réservées (1 ou 2 lignes = même hauteur) : évite l'écart entre cartes. */
.tpl-card > .between { align-items: flex-start; }
.tpl-card > .between strong { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: 2.4em; line-height: 1.2; }
.tpl-preview { background: var(--slate-50); border: 1px solid var(--border); border-radius: var(--r-sm); padding: 12px; font-size: .84rem; color: var(--slate-600); white-space: pre-wrap; line-height: 1.5; height: 130px; overflow: hidden; position: relative; }
.tpl-preview::after { content: ""; position: absolute; bottom: 0; left: 0; right: 0; height: 30px; background: linear-gradient(transparent, var(--slate-50)); }
/* Carte verrouillée (Starter) : aperçu FLOUTÉ (illisible) + CTA Pro en pied. */
.tpl-locked .tpl-preview { filter: blur(4px); opacity: .85; user-select: none; }
/* Champ « Template » du générateur, verrouillé pour le Starter. */
.tpl-gen-lock { display: flex; align-items: center; justify-content: space-between; gap: 10px; border: 1px solid var(--border); border-radius: var(--r-sm); background: var(--slate-50); padding: 7px 8px 7px 14px; }

/* ------------------------------ Analyse --------------------------------- */
.analyse-search { display: flex; gap: 10px; flex-wrap: wrap; align-items: flex-end; }
.value-box { display: flex; flex-direction: column; gap: 6px; padding: 18px; border-radius: var(--r-md); background: var(--slate-50); border: 1px solid var(--border); }
.value-box .big { font-family: var(--font-display); font-weight: 800; font-size: 1.7rem; }
.chart-wrap { position: relative; height: 280px; }
.chart-wrap.sm { height: 200px; }

/* ------------------------------ Settings -------------------------------- */
.set-grid { display: grid; grid-template-columns: 220px 1fr; gap: 24px; align-items: start; }
.set-nav { display: flex; flex-direction: column; gap: 4px; position: sticky; top: 88px; }
.set-nav a { padding: 10px 14px; border-radius: var(--r-sm); font-weight: 600; font-size: .9rem; color: var(--slate-600); }
.set-nav a.active { background: var(--blue-50); color: var(--blue-400); }
.set-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 16px 0; border-bottom: 1px solid var(--border); }
.set-row:last-child { border-bottom: none; }
.set-row .set-label strong { display: block; }
.set-row .set-label span { font-size: .84rem; color: var(--slate-500); }
.pushctl-stack { align-items: flex-end; }   /* desktop : bouton + lien alignés à droite */
.account-row { display: flex; align-items: center; gap: 12px; padding: 14px; border: 1px solid var(--border); border-radius: var(--r-md); margin-bottom: 10px; }

/* ------------------------------ Detail modal ---------------------------- */
.detail-thumb { height: 240px; border-radius: var(--r-md); display: grid; place-items: center; color: #fff; margin-bottom: 18px; position: relative; overflow: hidden; }
.detail-thumb.has-photo { background: #0d0f13; }
/* fond flouté qui remplit + photo entière nette au-dessus (rien n'est coupé) */
.detail-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: blur(22px) brightness(.55); transform: scale(1.15); z-index: 0; }
.detail-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; z-index: 1; }
.detail-thumb.img-broken .detail-img, .detail-thumb.img-broken .detail-bg { display: none; }
.detail-ic { position: relative; z-index: 0; }
.detail-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 18px 0; }
.detail-stat { background: var(--slate-50); border-radius: var(--r-sm); padding: 14px; }
.detail-stat .lab { font-size: .76rem; color: var(--slate-500); }
.detail-stat .val { font-family: var(--font-display); font-weight: 800; font-size: 1.3rem; margin-top: 4px; }

/* Choix du format d'export (modal Statistiques) */
.export-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.export-opt { display: flex; flex-direction: column; align-items: center; gap: 5px; padding: 18px 8px 15px; border: 1px solid var(--border); border-radius: var(--r-md); background: var(--surface); cursor: pointer; text-align: center; transition: border-color .15s var(--ease), transform .15s var(--ease), box-shadow .15s var(--ease); }
.export-opt:hover { border-color: var(--blue-500); transform: translateY(-2px); box-shadow: var(--sh-lg); }
.export-opt strong { font-size: .95rem; color: var(--ink); }
.export-opt .muted { font-size: .72rem; }
.export-ic { width: 48px; height: 48px; border-radius: 13px; display: grid; place-items: center; margin-bottom: 3px; }

/* ------------------------------ Responsive ------------------------------ */
@media (max-width: 1080px) {
  .grid-4 { grid-template-columns: repeat(2, 1fr); }
  .grid-2-1, .grid-1-2 { grid-template-columns: 1fr; }
  .search-layout { grid-template-columns: minmax(0, 1fr); }
  .filters { position: static; }
  .filters-body { max-height: none; }
}
/* Menu latéral réduit (rail d'icônes) — desktop uniquement. */
@media (min-width: 861px) {
  .app-shell.nav-collapsed { grid-template-columns: 72px 1fr; }
  .nav-collapsed .sidebar { padding-left: 12px; padding-right: 12px; }
  .nav-collapsed .side-head { flex-direction: column; gap: 12px; padding: 6px 0 16px; }
  .nav-collapsed .side-head .brand { padding: 0; }
  .nav-collapsed .brand-name { display: none; }
  .nav-collapsed .side-collapse svg { transform: rotate(180deg); }
  .nav-collapsed .side-link { justify-content: center; gap: 0; padding: 11px 0; }
  .nav-collapsed .side-link > span:not(.side-badge) { display: none; }
  .nav-collapsed .side-link .side-badge { position: absolute; top: 3px; right: 9px; margin: 0; min-width: 16px; height: 16px; padding: 0 4px; font-size: .6rem; }
  .nav-collapsed .side-link.active::before { left: -12px; }
  .nav-collapsed .plan-card { display: none; }
  .nav-collapsed #logoutBtn { justify-content: center; }
  .nav-collapsed #logoutBtn > span { display: none; }
}
@media (max-width: 860px) {
  .app-shell { grid-template-columns: 1fr; }
  .side-collapse { display: none; }
  .sidebar { position: fixed; left: 0; top: 0; transform: translateX(-100%); transition: transform .28s var(--ease); box-shadow: var(--sh-lg); width: 260px; }
  .app-shell.nav-open .sidebar { transform: none; }
  .app-shell.nav-open .side-scrim { display: block; position: fixed; inset: 0; background: rgba(20,22,31,.4); z-index: 99; }
  .mobile-only { display: grid; }
  .user-name { display: none; }
  .app-content { padding: 18px; }
  .grid-2, .grid-3 { grid-template-columns: 1fr; }
  /* Clé : autorise les colonnes de grille à rétrécir (sinon un tableau/nom long
     étire la colonne au-delà de l'écran et fait déborder la page). */
  .grid-2 > *, .grid-3 > *, .grid-4 > *, .grid-2-1 > *, .grid-1-2 > *, .set-grid > * { min-width: 0; }
  /* En-têtes de panneau : titre + contrôles passent à la ligne plutôt que pousser. */
  .panel-head { flex-wrap: wrap; }
  /* Tableaux larges : défilement horizontal DANS le panneau (pas de débordement page). */
  .panel-body:has(.tbl) { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .set-grid { grid-template-columns: 1fr; }
  /* Onglets des réglages : sur mobile on les passe à la ligne (chips) pour que TOUS
     soient visibles d'un coup — avant, « Notifications » restait hors écran et rien
     n'indiquait qu'il fallait faire défiler vers la droite. */
  .set-nav { position: static; flex-direction: row; flex-wrap: wrap; min-width: 0; gap: 8px; padding-bottom: 2px; }
  .set-nav a { flex: none; white-space: nowrap; background: var(--slate-100); }
  .set-nav a.active { background: var(--blue-50); }
  /* Lignes de réglages : la commande passe SOUS le libellé quand elle est large (ex.
     bouton « Activer sur iPhone ») — sinon elle écrasait le texte (1 mot/ligne) et
     débordait l'écran, ce qui déclenchait le zoom auto de Safari (changement de taille). */
  .set-row { flex-wrap: wrap; row-gap: 10px; }
  .set-row .set-label { flex: 1 1 50%; min-width: 0; }
  .set-row > div:last-child { max-width: 100%; margin-left: auto; }
  .set-row > div:last-child .btn { white-space: normal; }
  /* Bloc push (bouton + « Comment ça marche ? ») : pleine largeur et centré sur mobile. */
  .set-row > div:last-child:has(.pushctl-stack) { width: 100%; margin-left: 0; }
  .pushctl-stack { align-items: center; }
  .msg-layout { grid-template-columns: 1fr; }
  .msg-layout.show-thread .msg-list { display: none; }
  .msg-layout:not(.show-thread) .msg-thread { display: none; }
}
@media (max-width: 560px) {
  .grid-4 { grid-template-columns: repeat(2, 1fr); gap: 12px; }
  .page-head h1 { font-size: 1.5rem; }
  .topsearch { display: none; }
  /* Cartes d'alerte : le bloc score + « Voir » passe sous le contenu (sinon titre/méta écrasés). */
  [data-alert] { flex-wrap: wrap; row-gap: 12px; }
  [data-alert] > *:last-child { flex-basis: 100%; justify-content: flex-end; }
  /* En-tête Profil : le bouton « Importer une photo » passe sous le nom/e-mail. */
  .prof-head { flex-wrap: wrap; row-gap: 12px; }
  .prof-head > .row:last-child { flex-basis: 100%; }

  /* Cartes de deal (Deals du jour) : la rangée horizontale s'écrasait/débordait.
     -> image + infos en haut, barre d'actions (marge · score · Voir/Ajouter) en
     pleine largeur dessous. */
  .deal-rank { flex-wrap: wrap; align-items: flex-start; gap: 12px 14px; padding: 14px; }
  .deal-rank .media-thumb { width: 84px !important; height: 84px !important; flex: none; }
  .deal-rank .grow { flex: 1 1 55%; }
  .deal-rank > .row:last-child { flex-basis: 100%; width: 100%; justify-content: space-between;
    align-items: center; margin: 0; padding-top: 12px; border-top: 1px solid var(--border); }
  .deal-rank .stack { flex-direction: row; gap: 8px; }
  .deal-rank .rank-num { width: auto; }
}

/* Mobile — CENTRAGE des blocs de « présentation ». Sur petit écran, centrer est
   plus lisible que d'aligner à gauche. On centre : le héros de page (titre +
   sous-titre + actions, sur TOUTES les pages), les cartes promo, et les en-têtes
   de panneau « vitrine » (marqués .panel-head--center). Les en-têtes de LISTE
   avec action inline (Veilles actives, Dernières alertes) restent à gauche. */
@media (max-width: 640px) {
  .page-head { flex-direction: column; align-items: center; text-align: center; }
  /* Titres AVEC icône : le <h1> est en display:flex (theme.css h1:has(> svg)),
     donc text-align est ignoré -> on centre les items du flex. Sans effet sur un
     titre sans icône (bloc normal). */
  .page-head h1 { justify-content: center; }
  .page-head-actions { justify-content: center; width: 100%; }
  .promo-cta { flex-direction: column; text-align: center; }
  .promo-cta .grow { min-width: 0 !important; }
  .panel-head--center { flex-direction: column; align-items: center; text-align: center; gap: 6px; }
  /* Chips & pills : au lieu de s'empiler sur plusieurs lignes, une SEULE ligne
     défilable au doigt (scroll horizontal tactile, sans barre visible, léger
     fondu au bord droit). Filtres de niche (Deals), types de message (Générateur),
     exemples d'analyse, résumé de recherche. */
  #nicheChips, #genCats, #exChips, #searchSummary {
    flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch;
    scrollbar-width: none; padding-bottom: 4px;
    -webkit-mask-image: linear-gradient(to right, #000 90%, transparent);
    mask-image: linear-gradient(to right, #000 90%, transparent); }
  #nicheChips::-webkit-scrollbar, #genCats::-webkit-scrollbar,
  #exChips::-webkit-scrollbar, #searchSummary::-webkit-scrollbar { display: none; }
  #nicheChips .chip, #genCats .chip, #exChips .ex-chip, #searchSummary .sum-pill {
    flex: none; white-space: nowrap; }
  /* les exemples sont centrés en desktop (style inline) : en scroll on repart du
     bord gauche, sinon le premier chip serait coupé/inaccessible. !important pour
     battre le style inline justify-content:center. */
  #exChips { justify-content: flex-start !important; }
}

/* Bandeau honnête : données bot en démo, données utilisateur réelles */
.demo-banner { display: flex; align-items: center; gap: 10px; margin: 14px 24px 0; padding: 10px 14px; background: var(--amber-50); border: 1px solid var(--amber-200, #52401A); color: #FFC14D; border-radius: var(--r-sm); font-size: .84rem; line-height: 1.45; }
.demo-banner svg { flex: none; color: var(--amber-500); }
.demo-banner strong { font-weight: 700; }
.demo-banner-x { margin-left: auto; flex: none; background: none; border: none; cursor: pointer; color: #FFC14D; font-size: 14px; line-height: 1; padding: 4px 7px; border-radius: 6px; }
.demo-banner-x:hover { background: rgba(0,0,0,.06); }
@media (max-width: 640px) { .demo-banner { margin: 12px 16px 0; } }

/* Onboarding extension (radar) */
/* ── Carte d'annonce (flux d'alertes) ────────────────────────────────────────────
   Desktop : une seule ligne (vignette · titre+infos · score · bouton).
   Mobile   : grille compacte — le titre est TRONQUÉ à 2 lignes (il occupait 3 lignes
   et faisait exploser la hauteur : on ne voyait que 2 annonces par écran), et les
   infos + le bouton récupèrent la place sous la vignette. */
.alert-card { display: grid; align-items: center; gap: 4px 14px;
  grid-template-columns: auto 1fr auto auto;
  grid-template-areas: "thumb head score action" "thumb meta score action"; }
.alert-card.unread { border-left: 3px solid var(--blue-500); }
.ac-thumb { grid-area: thumb; display: flex; }
.ac-head { grid-area: head; display: flex; align-items: center; gap: 8px; min-width: 0; }
.ac-title { margin: 0; font-size: .95rem; line-height: 1.3; min-width: 0;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.ac-deal { flex: none; }
.ac-gap { display: none; }              /* doublon du badge : visible en mobile uniquement */
.ac-meta { grid-area: meta; font-size: .82rem; min-width: 0; }
.ac-price { color: var(--ink); font-weight: 800; }
.ac-score { grid-area: score; width: 40px; height: 40px; font-size: .9rem; border-radius: 11px; flex: none; }
.ac-actions { grid-area: action; display: flex; gap: 8px; }
@media (max-width: 680px) {
  /* 2 lignes seulement : [vignette · titre · score] puis [prix/lieu/date · bouton].
     Le bouton partage la ligne des infos (au lieu d'occuper une 3e ligne pleine largeur)
     -> ~4 annonces visibles par écran au lieu de 2. */
  .alert-card { gap: 6px 10px; padding: 12px;
    grid-template-columns: auto 1fr auto;
    grid-template-areas: "thumb head score" "meta meta action"; }
  .ac-title { font-size: .92rem; -webkit-line-clamp: 2; }
  .ac-meta { grid-area: meta; font-size: .78rem; align-self: center;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .ac-alert { display: none; }            /* le nom de l'alerte allonge trop la ligne */
  .ac-score { width: 34px; height: 34px; font-size: .82rem; border-radius: 10px; }
  .ac-actions { grid-area: action; justify-content: flex-end; align-self: center; }
  .ac-deal { display: none; }           /* libère toute la largeur pour le titre */
  .ac-gap { display: inline; color: #3EDC92; font-weight: 800; }
}

/* ── Mode « abonnement terminé » : sections floutées + CTA de réactivation ─────── */
/* Page ENTIÈRE floutée (deals, favoris, analyse, CRM, messagerie, Sniper, stats). */
.locked-blurred { position: relative; }
.locked-blurred > *:not(.locked-overlay) { filter: blur(7px); pointer-events: none; user-select: none; }
/* Carte CENTRÉE dans la zone de contenu et FIXE : elle reste au centre de l'écran même
   quand on fait défiler le contenu flouté (une carte `sticky` dérivait au scroll).
   `pointer-events:none` sur le calque -> le menu et la barre du haut restent cliquables. */
.locked-overlay { position: fixed; top: 0; right: 0; bottom: 0; left: var(--sidebar-w); z-index: 40;
  display: flex; align-items: center; justify-content: center; pointer-events: none; padding: 20px; }
.app-shell.nav-collapsed .locked-overlay { left: 72px; }         /* menu réduit (rail d'icônes) */
@media (max-width: 860px) { .locked-overlay { left: 0; } }        /* menu hors écran */
.locked-overlay-card { pointer-events: auto; background: var(--surface); border: 1px solid var(--border, #333A3F);
  border-radius: 18px; padding: 30px 32px; max-width: 440px; text-align: center;
  box-shadow: 0 24px 60px rgba(20,22,31,.18); }
.locked-overlay-ic { font-size: 34px; margin-bottom: 10px; }
.locked-overlay-card h3 { margin: 0 0 8px; }
.locked-overlay-card p { margin: 0 0 18px; color: var(--slate-600, #A5AEB5); font-size: .92rem; line-height: 1.6; }
/* Bloc individuel flouté (tableau de bord : deals, rappels, marge, revente). */
.locked-block { position: relative; }
.locked-block > *:not(.locked-block-cta) { filter: blur(6px); pointer-events: none; user-select: none; }
.locked-block-cta { position: absolute; inset: 0; z-index: 5; display: grid; place-items: center; }
/* Alertes : toutes désactivées. */
.locked-alerts-note { display: flex; gap: 8px; align-items: center; margin: 0 0 18px; padding: 11px 16px; background: var(--slate-100, #262B2F); border: 1px solid var(--border, #333A3F); border-radius: 10px; font-size: .9rem; color: var(--slate-600, #A5AEB5); }
.locked-alerts input[type="checkbox"] { opacity: .4; }

/* Bandeau « abonnement terminé » (espace en lecture seule) — permanent, non masquable. */
.locked-banner { display: flex; align-items: center; gap: 12px; margin: 14px 24px 0; padding: 12px 16px; background: linear-gradient(120deg, #2E2210, #2E1614); border: 1px solid #1A3A5E; border-radius: var(--r-sm); font-size: .88rem; flex-wrap: wrap; }
.locked-banner svg { flex: none; color: var(--red, #FF6B60); }
.locked-banner span { flex: 1; min-width: 220px; }
.locked-banner .btn { flex: none; }
.locked-banner em { color: var(--slate-500); font-style: normal; font-size: .8rem; }
@media (max-width: 680px) { .locked-banner { margin: 12px 14px 0; } }
.ext-banner { display: flex; align-items: center; gap: 12px; margin: 14px 24px 0; padding: 11px 16px; background: var(--blue-50); border: 1px solid var(--blue-100); border-radius: var(--r-sm); font-size: .88rem; }
.ext-banner svg { flex: none; color: var(--blue-400); }
.ext-banner span { flex: 1; }
.ext-banner .btn { flex: none; }
.ext-banner-x { flex: none; background: none; border: none; cursor: pointer; color: var(--slate-400); font-size: 13px; padding: 4px 6px; border-radius: 6px; }
.ext-banner-x:hover { background: rgba(0,0,0,.06); }
.live-pill.off { background: var(--slate-100); color: var(--slate-500); border: 1px solid var(--border); cursor: pointer; font-family: inherit; }
.live-pill.off:hover { background: var(--slate-200); color: var(--slate-600); }
.ext-step { display: flex; gap: 12px; padding: 11px 0; align-items: flex-start; border-top: 1px solid var(--border); }
.ext-step:first-of-type { border-top: none; padding-top: 4px; }
.ext-step .n { flex: none; width: 24px; height: 24px; border-radius: 999px; background: var(--grad-brand); color: #fff; display: grid; place-items: center; font-weight: 800; font-size: .78rem; }
.ext-step code { background: var(--slate-100); padding: 1px 6px; border-radius: 5px; font-size: .86em; }
@media (max-width: 640px) { .ext-banner { margin: 12px 16px 0; flex-wrap: wrap; } }
.radar-opts { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 8px; }
.radar-opt { border: 1px solid var(--border); border-radius: 14px; padding: 16px; display: flex; flex-direction: column; }
.radar-opt.featured { border-color: var(--blue-500); box-shadow: 0 0 0 1px var(--blue-500); }
.radar-opt h4 { margin: 8px 0 4px; font-size: 1rem; }
.radar-opt p { font-size: .84rem; margin: 0 0 12px; }
.radar-opt .btn-block { margin-top: auto; }
.radar-opt-tag { align-self: flex-start; font-size: .66rem; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; padding: 3px 8px; border-radius: 6px; }
.radar-opt-tag.free { background: var(--slate-100); color: var(--slate-500); }
.radar-opt-tag.pro { background: var(--grad-brand); color: #fff; }
.radar-opt code { background: var(--slate-100); padding: 1px 5px; border-radius: 5px; font-size: .9em; }
.radar-opt-note { display: flex; gap: 8px; font-size: .8rem; color: var(--slate-500); background: var(--slate-50); border: 1px solid var(--border); border-radius: 9px; padding: 9px 11px; margin-top: auto; line-height: 1.4; }
.radar-opt-note svg { flex: none; color: var(--slate-400); margin-top: 1px; }
@media (max-width: 560px) { .radar-opts { grid-template-columns: 1fr; } .radar-opts.mobile .radar-opt.featured { order: -1; } }

/* ---- Vitrine « App VTD BOT » : maquettes iPhone (iOS) sur fond dégradé ---- */
.app-showcase { position: relative; overflow: hidden; margin: 8px 0 26px; padding: 34px 20px; border-radius: 26px; background: linear-gradient(160deg, #1E2326 0%, #262B2F 52%, #12283F 100%); box-shadow: inset 0 0 0 1px rgba(20,22,31,.05); }
.app-showcase::before, .app-showcase::after { content: ""; position: absolute; border-radius: 50%; pointer-events: none; }
.app-showcase::before { width: 320px; height: 320px; left: 6%; top: 4%; background: radial-gradient(circle, rgba(155,124,255,.26), transparent 62%); }
.app-showcase::after { width: 360px; height: 360px; right: 4%; bottom: -4%; background: radial-gradient(circle, rgba(46,143,255,.22), transparent 64%); }
.app-shots { position: relative; z-index: 2; display: flex; gap: 30px; justify-content: center; flex-wrap: wrap; }
.app-shots > figure { margin: 0; display: flex; flex-direction: column; align-items: center; gap: 12px; }
.app-shots figcaption { display: inline-flex; align-items: center; justify-content: center; gap: 6px; font-size: .85rem; font-weight: 600; color: var(--slate-600); }
.app-shots figcaption svg { flex: none; }
/* --- iPhone --- */
.iphone { width: 218px; height: 456px; border-radius: 48px; background: #0a0b10; padding: 11px; position: relative; flex: none; box-shadow: 0 28px 60px rgba(20,22,31,.36), inset 0 0 0 2px rgba(255,255,255,.10), 0 0 0 2px rgba(0,0,0,.25); }
.iphone-screen { width: 100%; height: 100%; border-radius: 37px; overflow: hidden; position: relative;
  /* Fond d'écran de SECOURS, sous le SVG : rubans de lumière diagonaux + halos.
     Stops serrés = bords définis, donc rendu net (pas de dégradé mou/flou).
     Il était orange — reste de l'ancienne marque. Invisible tant que le SVG charge,
     mais un échec de chargement faisait virer l'écran à l'orange vif. */
  background-color: #05070d;
  background-image:
    linear-gradient(122deg, transparent 24%, rgba(127,190,255,.85) 30.5%, rgba(46,143,255,0) 37%),
    linear-gradient(122deg, transparent 46%, rgba(46,143,255,.72) 53%, rgba(46,143,255,0) 60%),
    linear-gradient(122deg, transparent 70%, rgba(155,124,255,.60) 77%, rgba(155,124,255,0) 84%),
    radial-gradient(44% 30% at 79% 13%, rgba(190,220,255,.50), transparent 54%),
    radial-gradient(54% 40% at 25% 93%, rgba(63,59,104,.62), transparent 56%),
    linear-gradient(160deg, #101827 0%, #080b13 60%, #05070d 100%);
}
/* Fond d'écran PERSO (optionnel) : dépose une image LIBRE DE DROITS (la tienne, gratuite/CC0,
   ou générée) dans vtdbot/img/app-wall.jpg -> elle devient le fond des 2 iPhones. Si le fichier
   n'existe pas, le dégradé ci-dessus s'affiche. N'utilise PAS une image sous droits d'autrui. */
.iphone-screen::before { content: ""; position: absolute; inset: 0; z-index: 0; background: url("/img/app-wall.svg") center / cover no-repeat; }
/* iPhone de GAUCHE (accueil) : léger flou du fond + voile discret pour garder les icônes
   lisibles. iPhone de DROITE (verrouillé) : fond net, aucun flou. */
.iphone-screen:has(.ios-home)::before { filter: blur(2.5px); transform: scale(1.08); }
.iphone-screen:has(.ios-home)::after { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; background: rgba(4,6,12,.18); }
.ios-home, .ios-lock { position: relative; z-index: 1; }
.iphone-island { position: absolute; top: 14px; left: 50%; transform: translateX(-50%); width: 66px; height: 20px; border-radius: 11px; background: #000; z-index: 6; }
.ios-status { position: absolute; top: 14px; height: 20px; left: 0; right: 0; padding: 0 19px; display: flex; justify-content: space-between; align-items: center; color: #fff; font-size: 11.5px; font-weight: 700; z-index: 5; text-shadow: 0 1px 3px rgba(0,0,0,.45); }
.ios-status svg { display: block; }
.ios-status .r { display: flex; gap: 6px; align-items: center; }
/* écran d'accueil */
.ios-home { height: 100%; padding: 52px 18px 14px; display: flex; flex-direction: column; }
.ios-app > span { text-shadow: 0 1px 3px rgba(0,0,0,.5); }
.ios-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px 12px; }
.ios-app { display: flex; flex-direction: column; align-items: center; gap: 5px; }
.ios-app > i { width: 100%; aspect-ratio: 1; border-radius: 13px; background: rgba(255,255,255,.13); box-shadow: inset 0 1px 0 rgba(255,255,255,.14); }
.ios-app > span { font-size: 8.5px; line-height: 1; height: 9px; white-space: nowrap; color: rgba(255,255,255,.86); font-weight: 500; }
.ios-app.vtdbot > i { position: relative; background: linear-gradient(135deg, var(--blue-400), var(--blue-600)); color: #fff; display: grid; place-items: center; box-shadow: 0 8px 18px rgba(90,169,255,.55), inset 0 1px 0 rgba(255,255,255,.3); animation: iBob 3.4s ease-in-out infinite; }
.ios-badge { position: absolute; top: -6px; right: -6px; min-width: 18px; height: 18px; padding: 0 4px; border-radius: 9px; background: #ff3b30; color: #fff; font-size: 11px; font-weight: 700; display: grid; place-items: center; box-shadow: 0 0 0 2px #182036; animation: iPulse 1.8s ease-in-out infinite; }
.ios-dock { margin-top: auto; display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; padding: 11px; border-radius: 24px; background: rgba(255,255,255,.14); backdrop-filter: blur(14px) saturate(150%); -webkit-backdrop-filter: blur(14px) saturate(150%); box-shadow: inset 0 1px 0 rgba(255,255,255,.18); }
.ios-dock i { aspect-ratio: 1; border-radius: 12px; background: rgba(255,255,255,.22); }
@keyframes iBob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-5px); } }
@keyframes iPulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.18); } }
/* écran verrouillé + notifications « liquid glass » */
.ios-lock { height: 100%; padding: 56px 13px 16px; display: flex; flex-direction: column; }
.ios-date { text-align: center; color: rgba(255,255,255,.9); font-size: 13px; font-weight: 600; text-shadow: 0 1px 5px rgba(0,0,0,.4); }
.ios-clock { text-align: center; color: #fff; font-weight: 600; font-size: 60px; line-height: 1; letter-spacing: -1.5px; margin: 2px 0 auto; font-variant-numeric: tabular-nums; text-shadow: 0 2px 14px rgba(0,0,0,.35); }
.ios-notifs { display: flex; flex-direction: column; gap: 8px; margin-top: 13px; }
.ios-notif-slot { position: relative; height: 60px; }
.ios-notif { display: flex; gap: 9px; padding: 9px 11px; border-radius: 18px; background: rgba(255,255,255,.14); backdrop-filter: blur(20px) saturate(170%); -webkit-backdrop-filter: blur(20px) saturate(170%); box-shadow: inset 0 1px 0 rgba(255,255,255,.28), inset 0 0 0 1px rgba(255,255,255,.10), 0 6px 18px rgba(0,0,0,.22); }
.ios-notif-slot > .ios-notif { position: absolute; left: 0; right: 0; top: 0; opacity: 0; animation: iNotif 9s ease-in-out infinite; }
.ios-notif-slot > .ios-notif:nth-child(2) { animation-delay: 3s; }
.ios-notif-slot > .ios-notif:nth-child(3) { animation-delay: 6s; }
.ios-notif--mini { padding: 8px 11px; }
.ios-notif-ic { width: 32px; height: 32px; flex: none; border-radius: 9px; background: linear-gradient(135deg, var(--blue-400), var(--blue-600)); color: #fff; display: grid; place-items: center; box-shadow: inset 0 1px 0 rgba(255,255,255,.3); }
.ios-notif--mini .ios-notif-ic { width: 27px; height: 27px; border-radius: 8px; }
.ios-notif-b { min-width: 0; flex: 1; }
.ios-notif-top { display: flex; justify-content: space-between; align-items: baseline; gap: 6px; }
.ios-notif-app { color: #fff; font-size: 11.5px; font-weight: 700; letter-spacing: .02em; white-space: nowrap; }
.ios-notif-time { color: rgba(255,255,255,.62); font-size: 10px; flex: none; }
.ios-notif-title { color: #fff; font-size: 12px; font-weight: 600; margin-top: 1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ios-notif-body { color: rgba(255,255,255,.78); font-size: 10.5px; line-height: 1.3; margin-top: 1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@keyframes iNotif { 0% { opacity: 0; transform: translateY(-12px) scale(.96); } 5% { opacity: 1; transform: translateY(0) scale(1); } 30% { opacity: 1; transform: translateY(0) scale(1); } 36% { opacity: 0; transform: translateY(-6px) scale(.98); } 100% { opacity: 0; transform: translateY(-6px) scale(.98); } }
/* chips « liquid glass » flottantes (remplissent le vide sur grand écran) */
.glass-chip { position: absolute; z-index: 3; width: 208px; display: flex; gap: 10px; align-items: center; padding: 11px 12px; border-radius: 18px; background: rgba(26,30,33,.72); backdrop-filter: blur(16px) saturate(160%); color: var(--ink); -webkit-backdrop-filter: blur(16px) saturate(160%); box-shadow: 0 14px 34px rgba(20,22,31,.16), inset 0 1px 0 rgba(255,255,255,.7); }
.glass-chip .ci { width: 34px; height: 34px; flex: none; border-radius: 9px; background: linear-gradient(135deg, var(--blue-400), var(--blue-600)); color: #fff; display: grid; place-items: center; }
.glass-chip strong { display: block; font-size: 12.5px; color: var(--ink); }
.glass-chip small { display: block; font-size: 11px; color: var(--slate-500); margin-top: 1px; }
.chip-a { left: 3%; top: 22%; animation: iFloat 6s ease-in-out infinite; }
.chip-b { right: 3%; bottom: 16%; animation: iFloat 6.6s ease-in-out infinite reverse; }
@keyframes iFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-9px); } }
@media (max-width: 1040px) { .glass-chip { display: none; } }
@media (max-width: 560px) { .app-showcase { padding: 22px 12px; } }
.lp-app-lead { font-size: 1.02rem; line-height: 1.6; }
/* Section App de la PAGE D'ACCUEIL uniquement (scopé .lp-app, PAS /espace/app) : sur mobile,
   les 2 maquettes iPhone défilent HORIZONTALEMENT au swipe (comme les cartes de tarifs),
   au lieu de s'empiler verticalement. Snap au centre + scrollbar cachée. */
@media (max-width: 560px) {
  /* pas de « bloc » (carte dégradée + halos) autour des maquettes sur mobile : elles défilent à nu */
  .lp-app .app-showcase { background: none; box-shadow: none; padding: 0; border-radius: 0; overflow: visible; margin: 2px 0 16px; }
  .lp-app .app-showcase::before, .lp-app .app-showcase::after { display: none; }
  .lp-app-lead { font-size: .9rem; line-height: 1.5; }   /* sous-accroche un peu plus petite sur mobile */
  /* iPhones un peu plus grands sur mobile (plus de « bloc » autour → sinon trop de vide).
     Largeur relative, hauteur = largeur × 456/218 (ratio conservé, hauteur DÉFINIE pour que
     l'écran interne en height:100% se résolve). Ombre réduite pour tenir dans le padding. */
  .lp-app .iphone { width: min(64vw, 260px); height: calc(min(64vw, 260px) * 2.0917);
    box-shadow: 0 12px 28px rgba(20,22,31,.30), inset 0 0 0 2px rgba(255,255,255,.10), 0 0 0 2px rgba(0,0,0,.25); }
  .lp-app .app-shots {
    flex-wrap: nowrap; justify-content: flex-start;
    overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain; scroll-snap-type: x mandatory;
    gap: 18px; padding: 4px 0 36px;        /* bas = place pour l'ombre du tel (sinon coupée par le clip vertical) */
  }
  .lp-app .app-shots::-webkit-scrollbar { display: none; }
  .lp-app .app-shots > figure { flex: 0 0 auto; scroll-snap-align: center; }
  /* espaceurs : centrent la 1re et la dernière maquette (au lieu de les coller au bord) */
  .lp-app .app-shots::before,
  .lp-app .app-shots::after { content: ""; flex: 0 0 max(0px, calc((100% - min(64vw, 260px)) / 2 - 9px)); }
}
@media (prefers-reduced-motion: reduce) {
  .ios-app.vtdbot > i, .ios-badge, .glass-chip { animation: none; }
  .ios-notif-slot > .ios-notif { animation: none; opacity: 1; }
  .ios-notif-slot > .ios-notif:nth-child(n+2) { display: none; }
}

/* ---- Page « App VTD BOT » : hero, cartes, étapes (+ centrage complet sur mobile) ---- */
.app-hero { position: relative; overflow: hidden; padding: 28px; border-radius: var(--r-lg); margin-bottom: 22px; background: var(--grad-band); box-shadow: 0 10px 30px rgba(90,169,255,.22); color: #fff; }
.app-hero-glow { position: absolute; right: -60px; top: -80px; width: 280px; height: 280px; border-radius: 50%; background: radial-gradient(circle, rgba(255,255,255,.22), transparent 68%); pointer-events: none; }
.app-hero-in { position: relative; display: flex; gap: 18px; align-items: center; flex-wrap: wrap; max-width: 740px; }
.app-hero-ic { width: 58px; height: 58px; flex: none; border-radius: 16px; background: #fff; color: var(--blue-600); display: grid; place-items: center; box-shadow: 0 6px 16px rgba(0,0,0,.14); }
.app-hero-txt { min-width: 0; flex: 1 1 260px; }
.app-hero h2 { margin: 0 0 6px; color: #fff; font-size: 1.65rem; line-height: 1.14; letter-spacing: -.01em; }
.app-hero p { margin: 0; color: rgba(255,255,255,.94); font-size: 1rem; line-height: 1.5; }
.app-feats { gap: 14px; margin-bottom: 18px; }
.app-feat { display: flex; gap: 12px; align-items: flex-start; }
.app-feat .statcard-ic { width: 42px; height: 42px; flex: none; background: var(--blue-50); color: var(--blue-400); }
.app-feat strong { display: block; margin-bottom: 3px; }
.app-feat .muted { font-size: .88rem; line-height: 1.5; }
.app-step { display: flex; gap: 8px 12px; align-items: flex-start; flex-wrap: wrap; }
.app-step-badge { flex: none; margin-top: 2px; }
.app-step-txt { font-size: .92rem; min-width: 0; flex: 1 1 220px; line-height: 1.55; }
.app-tip { display: flex; gap: 8px; align-items: flex-start; }
.app-tip svg { flex: none; margin-top: 2px; }
.app-tip span { font-size: .86rem; color: var(--blue-400); line-height: 1.5; }
.app-cta { margin-top: 4px; }
@media (max-width: 640px) {
  .app-promo .app-hero-in,
  .app-promo .app-feat,
  .app-promo .app-step,
  .app-promo .app-tip { flex-direction: column; align-items: center; text-align: center; }
  .app-promo .app-feat > div,
  .app-promo .app-step-txt,
  .app-promo .app-hero-txt { flex: 0 1 auto; }
  .app-promo .panel-body,
  .app-promo .panel-head { text-align: center; justify-content: center; }
  .app-promo .app-cta { text-align: center; margin-top: 14px; }
}

/* Bandeau « maintenance terminée » — temporaire (expire seul, cf. js/ui/layout.js).
   Ton VERT : c'est une bonne nouvelle (service rétabli), pas un avertissement. */
.maint-banner { display: flex; align-items: center; gap: 12px; padding: 11px 16px;
  background: #0E2A1E; border: 1px solid #1C4634; color: #4ADE9A;
  border-radius: 12px; margin: 0 0 16px; font-size: .92rem; }
.maint-banner strong { color: #4ADE9A; }
.maint-banner svg { flex: none; }
.maint-banner-x { margin-left: auto; flex: none; border: 0; background: transparent;
  color: #4ADE9A; opacity: .6; cursor: pointer; font-size: .95rem; padding: 4px 6px; border-radius: 8px; }
.maint-banner-x:hover { opacity: 1; background: rgba(28,107,60,.10); }
@media (max-width: 680px) { .maint-banner { align-items: flex-start; font-size: .88rem; } }

/* Conseil sous une veille qui ne remonte rien (fourchette de marché mesurée par le robot).
   Ton informatif, pas alarmant : le réglage est perfectible, rien n'est cassé. */
.veille-hint { display: flex; gap: 9px; align-items: flex-start; margin: -4px 0 10px 52px;
  padding: 9px 12px; background: #12283F; border: 1px solid #1A3A5E; border-radius: 10px;
  color: var(--blue-400); font-size: .82rem; line-height: 1.45; }
.veille-hint svg { flex: none; margin-top: 1px; opacity: .8; }
@media (max-width: 680px) { .veille-hint { margin-left: 0; } }


/* ---------------- Lueurs de l'espace (ajout) ---------------------------- */
/* L'application était entièrement plate : que des aplats sur un fond sombre.
   Un voile de lumière détache les blocs, une lueur de marque signale l'élément actif. */
/* `.radar-opt-tag.pro` est volontairement EXCLU : c'est l'étiquette « réservé au Pro »
   d'une option indisponible. La faire rayonner du bleu de marque disait l'inverse. */
.side-badge, .bell-badge { box-shadow: var(--glow-xs); }
.side-plan-cta { box-shadow: var(--glow-sm), var(--edge-light); }
.thread-unread { box-shadow: 0 0 8px 1px rgba(46,143,255,.6); }