/* ── Météo compacte (Ma tournée) ──────────────────────────────────────────── */
.tour-weather {
    margin: 0 0 10px;
}
.tour-weather-cta {
    display: flex; align-items: center; justify-content: space-between; gap: 10px;
    flex-wrap: wrap;
    padding: 8px 12px;
    background: var(--bg3); border: 1px solid var(--border);
    border-radius: var(--radius-md);
    font-size: var(--font-sm); color: var(--muted); font-weight: 600;
}
.tour-weather-btn {
    min-height: 32px; padding: 0 12px;
    border-radius: var(--radius-sm); border: 1px solid var(--blue);
    background: var(--bg); color: var(--blue-dim);
    font-size: var(--font-sm); font-weight: 700; cursor: pointer;
}
.tour-weather-btn:hover { background: var(--blue-glow); }
.tour-weather-btn:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--blue-glow); }
.tour-weather-strip {
    display: flex; align-items: center; gap: 12px;
    padding: 8px 12px;
    background: var(--bg3); border: 1px solid var(--border);
    border-radius: var(--radius-md);
    overflow-x: auto; -webkit-overflow-scrolling: touch;
}
.tour-weather-now {
    display: flex; align-items: center; gap: 8px;
    flex: 0 0 auto; min-width: 0;
    padding-right: 12px; border-right: 1px solid var(--border);
}
.tour-weather-now-ico {
    display: inline-flex; width: 22px; height: 22px; flex: 0 0 auto;
    color: var(--blue-dim); opacity: 0.9;
}
.tour-weather-now-ico svg { width: 22px; height: 22px; }
.tour-weather-now-temp {
    font-size: 1.25rem; font-weight: 800; color: var(--text);
    font-variant-numeric: tabular-nums; line-height: 1;
}
.tour-weather-now-meta {
    display: flex; flex-direction: column; gap: 1px; min-width: 0;
}
.tour-weather-now-label {
    font-size: var(--font-xs); font-weight: 700; color: var(--muted);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 11rem;
}
.tour-weather-now-city {
    font-size: 0.7rem; font-weight: 600; color: var(--text);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 11rem;
}
.tour-weather-days {
    display: flex; align-items: stretch; gap: 4px; flex: 1 1 auto; min-width: 0;
}
.tour-weather-day {
    display: flex; flex-direction: column; align-items: center; gap: 2px;
    flex: 1 1 0; min-width: 42px; padding: 4px 2px;
    border-radius: var(--radius-sm); text-align: center;
}
.tour-weather-day.is-today { background: color-mix(in srgb, var(--blue) 10%, transparent); }
.tour-weather-dow {
    font-size: 0.62rem; font-weight: 800; color: var(--muted);
    text-transform: uppercase; letter-spacing: 0.03em;
}
.tour-weather-day.is-today .tour-weather-dow { color: var(--blue-dim); }
.tour-weather-ico {
    display: inline-flex; width: 16px; height: 16px; color: var(--muted);
}
.tour-weather-ico svg { width: 16px; height: 16px; }
.tour-weather-t {
    display: flex; gap: 3px; font-size: 0.68rem;
    font-variant-numeric: tabular-nums; color: var(--muted);
}
.tour-weather-t b { color: var(--text); font-weight: 800; }

@media (max-width: 520px) {
    .tour-weather-now-meta { display: none; }
    .tour-weather-now { padding-right: 8px; }
    .tour-weather-day { min-width: 36px; }
}

/* ============================================================
   Utilitaires RESPONSIVE (réutilisables — cf. CLAUDE.md § Responsive).
   Objectif : layout fluide PAR DÉFAUT, media-queries réservées aux exceptions.
   ============================================================ */
/* Grille de cards qui s'adapte seule au nombre de colonnes selon la largeur. */
.u-cards { display: grid; gap: var(--u-gap, 12px);
    grid-template-columns: repeat(auto-fill, minmax(var(--u-card-min, 208px), 1fr)); }
/* Rangée fluide : les éléments passent à la ligne plutôt que de déborder. */
.u-row { display: flex; flex-wrap: wrap; gap: var(--u-gap, 12px); }
.u-row > * { min-width: 0; }              /* anti « grid/flex blowout » */
/* Élément qui prend la place dispo mais peut rétrécir sans déborder. */
.u-grow { flex: 1 1 var(--u-grow-basis, 280px); min-width: 0; }
/* À coller sur tout enfant flex/grid contenant un texte long ou une table. */
.u-min0 { min-width: 0; }
/* Empêche une image/un média de déborder de son conteneur. */
.u-img { max-width: 100%; height: auto; display: block; }

/* ═══════════ « Mes pièces » — encadré recherche + filtres (page-factures) ═══
   Un seul .card : recherche pleine largeur en tête, puis une rangée fluide
   avec la période, l'interrupteur format proforma et le compteur. Fluide par
   défaut (flex-wrap) ; un seul repli mobile (empilement + pleine largeur). */
.pieces-toolbar { margin-bottom: 14px; display: flex; flex-direction: column; gap: 12px; }
.pieces-search-input {
    width: 100%; box-sizing: border-box; -webkit-appearance: none;
    padding: 10px 14px; border: 1px solid var(--border); border-radius: 8px;
    background: var(--bg); color: var(--text); font-size: 0.92rem;
}
.pieces-search-input:focus { outline: none; border-color: var(--blue); }
.pieces-toolbar-filters { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; }
.pieces-filter-dates { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.pieces-filter-dates label { font-size: 0.78rem; color: var(--muted); }
.pieces-filter-dates input[type=date] {
    padding: 6px 10px; border: 1px solid var(--border); border-radius: 6px;
    background: var(--bg2); color: var(--text); font-size: 0.82rem;
}
.pieces-apply-btn {
    padding: 7px 16px; border: 1px solid var(--blue); border-radius: 6px;
    background: var(--blue); color: #fff; font-size: 0.82rem; font-weight: 600;
    cursor: pointer; white-space: nowrap;
}
.pieces-apply-btn:hover { filter: brightness(1.08); }
.pieces-filter-count { margin-left: auto; color: var(--muted); font-size: 0.82rem; white-space: nowrap; }
@media (max-width: 520px) {
    .pieces-filter-dates { flex: 1 1 100%; justify-content: space-between; }
    .pieces-filter-dates input[type=date] { flex: 1 1 0; min-width: 0; }
    .pieces-filter-count { margin-left: 0; flex: 1 1 100%; text-align: left; }
}

/* ── En-tête « Mon portefeuille » : même grammaire d'encart que .pieces-toolbar
   (tout réuni dans une carte au lieu d'un empilement flottant). Titre + recherche
   en tête, rangée de filtres dessous, légende en pied. */
.pf-toolbar { margin-bottom: 14px; display: flex; flex-direction: column; gap: 12px; }
.pf-toolbar-head {
    display: flex; align-items: center; justify-content: space-between;
    gap: 12px 20px; flex-wrap: wrap;
}
.pf-toolbar-title { min-width: 0; }
.pf-toolbar-title h2 { margin: 0; font-size: 1.3rem; }
.pf-subtitle { color: var(--muted); font-size: 0.85rem; margin-top: 2px; }
/* Recherche : même gabarit que .pieces-search-input, mais bornée à droite. */
.pf-search-input {
    flex: 0 1 320px; min-width: 200px; box-sizing: border-box; -webkit-appearance: none;
    padding: 10px 14px; border: 1px solid var(--border); border-radius: 8px;
    background: var(--bg); color: var(--text); font-size: 0.92rem;
}
.pf-search-input:focus { outline: none; border-color: var(--blue); }
/* Rangée de filtres organisée par NATURE : groupe « Filtrer » (segments + <6 mois),
   hairline, groupe « Trier » (CA potentiel), puis l'action catalogue à droite.
   Tous les contrôles alignés sur une hauteur commune de 38px. */
.pf-toolbar-filters { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; }
/* Un groupe = son mini-label + ses contrôles, tenus ensemble sur une baseline. */
.pf-fgroup { display: inline-flex; align-items: center; gap: 8px 10px; flex-wrap: wrap; }
.pf-fgroup-label {
    color: var(--muted); font-size: 0.72rem; font-weight: 700; text-transform: uppercase;
    letter-spacing: .4px; user-select: none;
}
/* Séparateur vertical entre « Filtrer » et « Trier » (hairline, pas un trait plein). */
.pf-fsep { width: 1px; align-self: stretch; min-height: 24px; background: var(--border); }
/* Hauteur commune : segments et chips s'alignent au pixel dans la rangée. */
.pf-toolbar-filters .seg-filter { height: 38px; }
.pf-toolbar-filters .seg-btn { display: inline-flex; align-items: center; height: 100%; padding: 0 14px; }
/* Le chip portait un margin-top hérité de son ancien placement « sous le titre » :
   inutile (et désalignant) dans la rangée flex. On le neutralise et on borne la hauteur. */
.pf-toolbar-filters .ca-filter-chip { margin-top: 0; height: 38px; box-sizing: border-box; }
/* Le bouton Catalogue est poussé au bout de la rangée (action distincte des filtres). */
.pf-toolbar-filters .pcat-prospect-btn { margin-left: auto; }
/* La légende, en pied de l'encart, se détache par une hairline haute. */
.pf-toolbar .card-legend { margin: 0; padding-top: 10px; border-top: 1px solid var(--border); }
/* Tablette : la hairline verticale n'a plus de sens quand les groupes wrappent →
   on la masque et on laisse chaque groupe passer à la ligne proprement. */
@media (max-width: 860px) {
    .pf-fsep { display: none; }
    .pf-toolbar-filters { gap: 10px 12px; }
}
@media (max-width: 520px) {
    .pf-toolbar-head { flex-direction: column; align-items: stretch; }
    .pf-search-input { flex: 1 1 100%; }
    .pf-fgroup { width: 100%; }
    .pf-toolbar-filters .pcat-prospect-btn { margin-left: 0; flex: 1 1 100%; }
}

/* ═══════════ Mode Vente — présentation client ═══════════
   Masque les infos internes du tableau de bord commercial (commissions,
   BlitzScore, feed d'événements, conversion ML par maturité) en floutant le
   bloc sensible et en posant un voile cliquable. Activé par défaut.
   Logique : commercial.js (_SALES_MODE_KEY / toggleSalesMode). */
.sales-toolbar { display: flex; justify-content: flex-end; margin-bottom: 14px; }
.sales-toggle {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 8px 14px; border-radius: 8px; cursor: pointer;
    border: 1px solid var(--border); background: var(--bg2); color: var(--muted);
    font-size: 0.82rem; font-weight: 700; letter-spacing: 0.02em;
    transition: color .15s, border-color .15s, background .15s;
}
.sales-toggle:hover { color: var(--text); border-color: var(--muted); }
.sales-toggle.is-active { border-color: var(--blue); color: var(--blue-dim); background: var(--blue-glow); }
.sales-toggle-state { font-size: 0.72rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.04em; opacity: 0.85; }

/* « Mes pièces » : en mode Vente, masque les colonnes commission + score palette
   (th + td portent .sales-hide). display:none sur la cellule garde le tableau
   aligné (th et td disparaissent ensemble). */
body.sales-mode-on .sales-hide { display: none; }

.sales-shield { position: relative; }
.sales-shield-content.is-blurred { filter: blur(9px); pointer-events: none; user-select: none; transition: filter .2s ease; }
.sales-shield-overlay {
    position: absolute; inset: 0; z-index: 5;
    display: flex; align-items: center; justify-content: center; padding: 18px;
}
.sales-overlay-card {
    text-align: center; max-width: 380px; padding: 26px 28px; border-radius: 14px;
    background: var(--bg2); border: 1px solid var(--border);
    box-shadow: 0 10px 40px rgba(0,0,0,0.28);
}
.sales-overlay-icon { font-size: 2.2rem; margin-bottom: 6px; }
.sales-overlay-title {
    font-size: 1.1rem; font-weight: 800; color: var(--text);
    text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 6px;
}
.sales-overlay-sub { font-size: 0.85rem; color: var(--muted); margin-bottom: 18px; line-height: 1.45; }
.sales-overlay-btn {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 11px 22px; border-radius: 9px; cursor: pointer;
    border: none; background: var(--blue); color: #fff;
    font-size: 0.9rem; font-weight: 800; letter-spacing: 0.02em;
    transition: filter .15s ease;
}
.sales-overlay-btn:hover { filter: brightness(1.08); }

/* Modale de confirmation (bpConfirm, remplace confirm() natif) */
@keyframes bpConfirmIn { from { opacity: 0; transform: translateY(8px) scale(0.98); } to { opacity: 1; transform: translateY(0) scale(1); } }
.bp-confirm-backdrop {
    position: fixed; inset: 0; background: rgba(0, 0, 0, 0.55); z-index: 2000;
    display: flex; align-items: center; justify-content: center; padding: 16px;
}
.bp-confirm-modal {
    width: min(420px, 96vw); background: var(--bg2); border: 1px solid var(--border);
    border-radius: 14px; box-shadow: var(--shadow-lg);
    padding: 20px 22px; animation: bpConfirmIn 0.15s ease-out;
}
.bp-confirm-title { font-weight: 700; font-size: 1rem; margin-bottom: 8px; color: var(--text); }
.bp-confirm-title-danger { color: var(--red); }
.bp-confirm-msg { font-size: 0.88rem; color: var(--text); line-height: 1.5; white-space: pre-line; }
.bp-confirm-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 20px; }
.bp-confirm-btn {
    padding: 8px 18px; border-radius: var(--radius-sm); font-size: 0.85rem; font-weight: 600;
    cursor: pointer; border: 1px solid var(--border); background: transparent; color: var(--text);
    transition: all 0.15s;
}
.bp-confirm-cancel:hover { background: var(--bg3); }
.bp-confirm-ok { background: var(--blue); border-color: var(--blue); color: var(--white); }
.bp-confirm-ok:hover { background: var(--blue-dim); }
.bp-confirm-ok--danger { background: var(--red); border-color: var(--red); }
.bp-confirm-ok--danger:hover { background: var(--red-dim); }
@media (max-width: 520px) {
    .bp-confirm-actions { flex-direction: column-reverse; }
    .bp-confirm-btn { width: 100%; padding: 10px 18px; }
}