/* ── Météo (tableau de bord commercial) ───────────────────────────────────── */
.weather-card {
    display: flex; align-items: stretch; gap: 18px;
    padding: 16px 20px; flex-wrap: wrap;
}
.weather-empty, .weather-cta {
    flex: 1; display: flex; align-items: center; gap: 14px;
    color: var(--muted); font-size: 0.88rem;
}
.weather-cta { justify-content: space-between; flex-wrap: wrap; }
.weather-btn {
    border: 1px solid var(--blue); background: var(--blue); color: #fff;
    border-radius: var(--radius-md); padding: 8px 16px;
    font-size: 0.82rem; font-weight: 600; cursor: pointer; white-space: nowrap;
    transition: opacity 0.2s;
}
.weather-btn:hover { opacity: 0.88; }

.weather-now {
    display: flex; align-items: center; gap: 14px;
    padding-right: 18px; border-right: 1px solid var(--border);
    min-width: 180px;
}
.weather-now-icon { font-size: 3rem; line-height: 1; }
.weather-now-temp {
    font-size: 2.2rem; font-weight: 800; line-height: 1;
    font-variant-numeric: tabular-nums; color: var(--text);
}
.weather-now-label { font-size: 0.82rem; color: var(--muted); margin-top: 3px; }
.weather-now-city { font-size: 0.78rem; color: var(--text); margin-top: 4px; font-weight: 600; }

.weather-days {
    flex: 1; display: grid;
    grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 6px;
}
.weather-day {
    display: flex; flex-direction: column; align-items: center; gap: 3px;
    padding: 8px 4px; border-radius: var(--radius-md);
    background: var(--bg3); text-align: center;
}
.weather-day.is-today { background: var(--bg3); border: 1px solid var(--blue); }
.weather-day-dow {
    font-size: 0.68rem; font-weight: 700; color: var(--muted);
    text-transform: uppercase; letter-spacing: 0.04em;
}
.weather-day.is-today .weather-day-dow { color: var(--blue); }
.weather-day-icon { font-size: 1.5rem; line-height: 1; }
.weather-day-temps {
    display: flex; gap: 5px; font-size: 0.78rem; font-variant-numeric: tabular-nums;
}
.weather-day-temps .tmax { font-weight: 700; color: var(--text); }
.weather-day-temps .tmin { color: var(--muted); }
.weather-day-pop { font-size: 0.66rem; color: #0EA5E9; min-height: 0.9em; }

@media (max-width: 720px) {
    .weather-now { border-right: none; border-bottom: 1px solid var(--border); padding-right: 0; padding-bottom: 12px; width: 100%; }
    .weather-days { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* ============================================================
   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; }
}

/* ═══════════ 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; }
}