/* ==================== BOUTIQUE WEB (synchronisation PrestaShop) ==================== */
/* Charte du projet (cf. bonnes-affaires.css) : header h1 16pt couleur principale, KPI cartes
   blanches, tableau thead #f8f9fa sticky, text-align left. Préfixe bw-. */
.page_boutique_web {
  --bw-line: #e3e6ea;
  --bw-muted: #6b7280;
  --bw-green: #2e7d52;
  --bw-red: #c0392b;
  --bw-orange: #e67e22;
  padding: 18px 22px 30px;   /* même gabarit que bonnes-affaires ; pas de fond de page coloré (aucune page du projet n'en a) */
  text-align: left;
  color: #22272e;
}

/* ---- Header ---- */
.bw-header { display: flex; align-items: flex-start; justify-content: space-between; flex-wrap: wrap; gap: 12px; margin-bottom: 12px; }
.bw-header h1 { margin: 0; font-size: 16pt; color: var(--main-bg-color); text-align: left; }
.bw-header h1 .fa { margin-right: 6px; }
.bw-sub { color: #888; font-size: 8.5pt; margin-top: 2px; max-width: 900px; }
.bw-header-actions { display: flex; gap: 8px; flex-wrap: wrap; }

/* ---- Boutons ---- */
.page_boutique_web .bw-btn {
  padding: 5px 14px; border: 1px solid #ccc; border-radius: 6px; background: #f5f5f5; color: #333;
  cursor: pointer; font-size: 9pt; display: inline-flex; align-items: center; gap: 6px; line-height: 1.4;
}
.page_boutique_web .bw-btn:hover { background: #ececec; }
.page_boutique_web .bw-btn:disabled { opacity: .55; cursor: not-allowed; }
.page_boutique_web .bw-btn-primary { background: var(--main-bg-color); border-color: var(--main-bg-color); color: #fff; }
.page_boutique_web .bw-btn-primary:hover { filter: brightness(1.1); background: var(--main-bg-color); }
.page_boutique_web .bw-btn-success { background: var(--bw-green); border-color: var(--bw-green); color: #fff; }
.page_boutique_web .bw-btn-success:hover { background: #256742; }
.page_boutique_web .bw-btn-sm { padding: 3px 8px; font-size: 8.5pt; }

/* ---- Bandeaux ---- */
.bw-banner { display: flex; align-items: center; gap: 8px; padding: 8px 12px; border-radius: 6px; margin-bottom: 10px; font-size: 9.5pt; }
.bw-banner a { color: inherit; text-decoration: underline; }
.bw-banner-warn { background: #fff3cd; color: #8a6d3b; border: 1px solid #ffe69c; }
.bw-banner-error { background: #fdecea; color: var(--bw-red); border: 1px solid #f1b0aa; }
.bw-banner-info { background: #e8f1fb; color: #2a5a8c; border: 1px solid #bcd4ee; }
.bw-banner-ok { background: #e7f5ec; color: var(--bw-green); border: 1px solid #b9e0c6; }

/* ---- KPI (charte du projet : cartes blanches arrondies, icône dans un carré coloré 42 px, valeur 18pt, libellé 8.5pt —
        mêmes tailles que prospection / impayés / cogekom, repli 32 px à 992 px et grille 3 colonnes à 768 px) ---- */
.bw-kpis { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 16px; }
.bw-kpi {
  background: #fff; border: 2px solid transparent; border-radius: 10px; padding: 14px 16px; box-shadow: 0 2px 8px rgba(0,0,0,0.07);
  display: flex; align-items: center; gap: 12px; min-width: 190px; flex: 1 1 190px; transition: box-shadow 0.2s, border-color 0.2s;
}
.bw-kpi:hover { box-shadow: 0 4px 16px rgba(0,0,0,0.12); }
.bw-kpi > .fa {
  width: 42px; height: 42px; border-radius: 10px; display: flex; align-items: center; justify-content: center;
  font-size: 18px; color: #fff; background: var(--main-bg-color); flex-shrink: 0;
}
.bw-kpi > .fa.bw-green { color: #fff; background: var(--bw-green); }
.bw-kpi > .fa.bw-orange { color: #fff; background: var(--bw-orange); }
.bw-kpi > .fa.bw-red { color: #fff; background: var(--bw-red); }
.bw-kpi > div { display: flex; flex-direction: column; min-width: 0; }
/* Valeur et libellé ciblés sous le <div> : une règle « .bw-kpi span » toucherait aussi le <span class="fa"> de l'icône
   (graisse 500 → glyphes solides Font Awesome absents, affichés en carrés). */
.bw-kpi > div > strong { display: block; font-size: 18pt; font-weight: 700; color: #222; line-height: 1.1; white-space: nowrap; }
.bw-kpi > div > span { color: #888; font-size: 8.5pt; font-weight: 500; margin-top: 2px; }
.bw-kpi-petit > div > strong { font-size: 11pt; }   /* valeur textuelle (date du dernier passage), comme .ba-kpi-value-small */

/* ---- Filtres ---- */
.bw-toolbar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 10px; }
.bw-input, .bw-select { padding: 5px 8px; border: 1px solid #ccc; border-radius: 6px; font-size: 9pt; background: #fff; }
.bw-input { min-width: 280px; }
.bw-select { max-width: 320px; }
.bw-count { color: var(--bw-muted); font-size: 8.5pt; }
.bw-spacer { flex: 1; }

/* ---- Tableau ---- */
.bw-table-wrap { background: #fff; border: 1px solid var(--bw-line); border-radius: 8px; overflow: auto; max-height: calc(100vh - 330px); }
.bw-table { width: 100%; border-collapse: collapse; font-size: 9pt; }
.page_boutique_web .bw-table thead th, .page_boutique_web .bw-table thead th a {
  position: sticky; top: 0; background: #f8f9fa; text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--bw-line);
  font-weight: 600; color: #444; cursor: pointer; white-space: nowrap; z-index: 1;
}
.page_boutique_web .bw-table td { text-align: left; padding: 6px 10px; border-bottom: 1px solid #f0f1f3; vertical-align: middle; }
.bw-table tbody tr:hover { background: #fafbfc; }
.bw-row-selected { background: #eef6ff !important; }
.bw-row-off td { color: #9aa0a6; }
.bw-col-check { width: 28px; text-align: center !important; }
.bw-ref a { color: var(--main-bg-color); text-decoration: none; font-weight: 600; white-space: nowrap; }
.bw-ref a:hover { text-decoration: underline; }
.bw-label { min-width: 220px; max-width: 360px; }   /* sans largeur minimale, la colonne Libellé était écrasée sur 5 lignes par la référence */
.bw-cats { max-width: 260px; }
.bw-chip { display: inline-block; background: #eef0f3; border-radius: 10px; padding: 1px 8px; font-size: 8pt; margin: 1px 3px 1px 0; color: #444; white-space: nowrap; }
.page_boutique_web .bw-num { text-align: right !important; white-space: nowrap; }
.bw-mono { font-family: monospace; font-size: 8.5pt; }
.bw-date { white-space: nowrap; color: var(--bw-muted); font-size: 8.5pt; }
.bw-arrow { font-size: 7pt; color: #999; margin-left: 2px; }
.bw-empty { text-align: center !important; color: var(--bw-muted); padding: 24px !important; }
.bw-actions { white-space: nowrap; }
.bw-muted { color: var(--bw-muted); font-size: 8.5pt; }
.bw-ps-link { color: var(--main-bg-color); font-size: 8.5pt; text-decoration: none; white-space: nowrap; margin-left: 4px; }
.bw-ps-link:hover { text-decoration: underline; }
.bw-red { color: var(--bw-red); }

/* ---- Badges ---- */
.bw-badge { display: inline-block; border-radius: 10px; padding: 1px 8px; font-size: 8pt; white-space: nowrap; }
.bw-badge-ok { background: #e7f5ec; color: var(--bw-green); }
.bw-badge-off { background: #fdecea; color: var(--bw-red); }
.bw-badge-muted { background: #eef0f3; color: var(--bw-muted); }
.bw-badge-error { background: #fff3cd; color: #8a6d3b; }

/* ---- Fenêtre « Produits non liés » ---- */
.page_boutique_web .bw-btn-danger { background: #fff; border-color: #e9b4ae; color: var(--bw-red); }
.page_boutique_web .bw-btn-danger:hover { background: #fdecea; }
.bw-modal-overlay {
  /* z-index des modales du projet (.modal-mask 9999, sous la modale de mise à jour) : couvre la navbar et ses menus */
  position: fixed; inset: 0; background: rgba(20, 24, 30, .55); z-index: 9999;
  display: flex; align-items: center; justify-content: center; padding: 20px;
}
.bw-modal {
  background: #fff; border-radius: 10px; width: min(1200px, 100%); max-height: calc(100vh - 40px);
  display: flex; flex-direction: column; padding: 16px 18px 18px; box-shadow: 0 12px 40px rgba(0, 0, 0, .25); text-align: left;
}
.bw-modal-header { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.bw-modal-header h2 { margin: 0; font-size: 13pt; color: var(--main-bg-color); }
.bw-modal-header h2 .fa { margin-right: 6px; }
.bw-modal-close { border: none; background: transparent; font-size: 16pt; color: #777; cursor: pointer; padding: 2px 6px; }
.bw-modal-close:hover { color: #222; }
.bw-modal-sub { color: #777; font-size: 8.5pt; margin: 4px 0 12px; }
.bw-modal .bw-table-wrap.bw-modal-table { max-height: none; flex: 1 1 auto; min-height: 120px; overflow: auto; }

/* ---- Responsive : blocs @media EN FIN DE FICHIER (après toutes les règles PC, sinon une règle PC déclarée plus bas
        l'emporte à spécificité égale — constaté sur .pc-img-carte). ---- */

/* ==================== Onglets de la page (Produits / PC sur devis) ==================== */
.bw-tabs { display: flex; gap: 4px; border-bottom: 2px solid var(--bw-line); margin: 0 0 12px; }
.bw-tab {
  background: none; border: none; border-bottom: 3px solid transparent; margin-bottom: -2px; padding: 8px 16px; cursor: pointer;
  font-size: 10.5pt; color: #555; font-weight: 600;
}
.bw-tab .fa { margin-right: 6px; }
.bw-tab:hover { color: var(--main-bg-color); }
.bw-tab-active { color: var(--main-bg-color); border-bottom-color: var(--main-bg-color); }
.bw-tab-count { display: inline-block; min-width: 18px; padding: 0 6px; margin-left: 4px; border-radius: 10px; background: #e8e8e8; color: #444; font-size: 8pt; line-height: 18px; text-align: center; }
.bw-tab-active .bw-tab-count { background: var(--main-bg-color); color: #fff; }
.pc-modal { width: min(1400px, 100%); }
.pc-cols { display: flex; gap: 18px; overflow: auto; min-height: 0; flex: 1 1 auto; }
.pc-col-gauche { flex: 0 0 38%; min-width: 320px; overflow: auto; }
.pc-col-droite { flex: 1 1 auto; min-width: 360px; display: flex; flex-direction: column; overflow: auto; }
.pc-cols h3 { font-size: 10.5pt; margin: 8px 0 6px; color: #333; }
.pc-lignes td { padding: 3px 8px !important; font-size: 8.5pt; }
.pc-carac { margin: 0; padding-left: 18px; font-size: 9pt; }
.pc-carac li { margin: 2px 0; }
.pc-label { display: block; font-size: 8.5pt; color: #555; margin: 8px 0 3px; font-weight: 600; }
.pc-full { width: 100%; box-sizing: border-box; min-width: 0 !important; }
.pc-desc-tabs { display: flex; gap: 6px; margin: 4px 0 6px; }
.pc-apercu {
  border: 1px solid #ddd; border-radius: 6px; padding: 10px 14px; background: #fafafa; min-height: 200px; max-height: 420px;
  overflow: auto; font-size: 9.5pt; line-height: 1.45;
}
.pc-apercu h2, .pc-apercu h3, .pc-apercu h4 { margin: 10px 0 4px; }
.pc-apercu p { margin: 0 0 8px; }
.pc-textarea { width: 100%; box-sizing: border-box; font-family: monospace; font-size: 8.5pt; border: 1px solid #ccc; border-radius: 6px; padding: 8px; min-height: 200px; }
.pc-actions { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-top: 12px; }
.pc-note { margin-top: 8px; font-size: 8pt; }

@media (max-width: 1000px) {
  .pc-cols { flex-direction: column; }
  .pc-col-gauche, .pc-col-droite { flex: 1 1 auto; min-width: 0; }
}

/* Caractéristiques éditables du PC */
.pc-carac-table td { padding: 2px 4px !important; }
.pc-carac-nom { width: 32%; }
.pc-carac-actions { width: 70px; white-space: nowrap; }
.pc-carac-actions .bw-btn { padding: 2px 6px; }
.pc-carac-boutons { margin-top: 6px; }

/* Images du PC (base, détourée, mises en situation) */
.pc-images { border-top: 1px solid #e3e3e3; margin-top: 14px; padding-top: 8px; }
.pc-images h3 { font-size: 10.5pt; margin: 6px 0 8px; color: #333; }
.pc-img-grille { display: flex; flex-wrap: wrap; gap: 12px; }
.pc-img-carte { width: 200px; border: 1px solid #ddd; border-radius: 8px; padding: 6px; background: #fafafa; display: flex; flex-direction: column; gap: 4px; }
.pc-img-cover { border-color: var(--main-bg-color); box-shadow: inset 0 0 0 2px var(--main-bg-color); }
.pc-img-titre { font-size: 8.5pt; font-weight: 600; color: #444; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pc-img-carte img { width: 100%; height: 150px; object-fit: contain; background: #fff; border-radius: 4px; cursor: zoom-in; }
.pc-img-vide { height: 150px; display: flex; align-items: center; justify-content: center; color: #999; font-size: 8.5pt; text-align: center; background: #fff; border-radius: 4px; padding: 6px; }
.pc-img-actions { display: flex; flex-wrap: wrap; gap: 4px 8px; align-items: center; font-size: 8pt; }
.pc-img-actions label { display: inline-flex; align-items: center; gap: 3px; cursor: pointer; margin: 0; }
.pc-img-generation { margin-top: 10px; }
.pc-img-prompt { min-height: 70px; font-family: inherit; font-size: 9pt; }

/* ==================== Fenêtre du devis : onglets (Devis → Caractéristiques → Fiche → Images) + pied d'actions fixe ; avertissement ==================== */
.pc-modal { width: min(1300px, 100%); }
.pc-head-droite { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
.pc-head-droite .bw-tab-count { margin-left: 2px; }
.page_boutique_web a.pc-ps-lien { text-decoration: none; color: var(--main-bg-color); border-color: var(--main-bg-color); white-space: nowrap; }
.page_boutique_web a.pc-ps-lien:hover { background: var(--main-bg-color); color: #fff; }
.pc-onglets { margin: 10px 0 10px; }
.pc-corps { flex: 1 1 auto; min-height: 0; overflow: auto; display: flex; flex-direction: column; padding-right: 4px; }
.pc-fiche { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; }
.pc-ligne2 { display: flex; gap: 14px; flex-wrap: wrap; }
.pc-ligne2 > div { flex: 1 1 260px; }
.pc-ligne2 > .pc-grow { flex: 2 1 420px; }
.pc-desc-entete { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 8px; }
.pc-desc-entete .pc-label { margin: 0; }
.pc-desc-entete .pc-desc-tabs { margin: 0; }
.pc-grow-v { flex: 1 1 auto; min-height: 280px; max-height: none; margin-top: 6px; }
textarea.pc-grow-v { resize: vertical; }
.pc-note-haut { margin: 0 0 8px; }
.pc-pied { border-top: 1px solid #e3e3e3; margin-top: 10px; padding-top: 10px; display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.pc-pied-info { font-size: 8.5pt; }
.pc-pied-actions { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-left: auto; }
.pc-pied-sep { width: 1px; height: 22px; background: #ddd; margin: 0 4px; }
/* Onglet Images (ancienne fenêtre dédiée, intégrée à la fenêtre du devis en v3.50.3) */
.pc-img-corps { flex: 1 1 auto; min-height: 0; }
.pc-img-corps .bw-banner, .pc-fiche > .bw-banner { margin-bottom: 8px; }
.pc-img-carte { width: 236px; }
.pc-img-carte img, .pc-img-vide { height: 180px; }
.pc-warn-overlay { z-index: 10000; }   /* au-dessus de la fenêtre du devis, toujours sous .update-mask */
.pc-warn-modal { width: min(560px, 100%); }
.pc-warn-modal h2 { margin: 0 0 8px; font-size: 13pt; color: var(--bw-red); }
.pc-warn-modal h2 .fa { margin-right: 6px; }
.pc-warn-modal p { font-size: 10pt; line-height: 1.45; margin: 0 0 12px; }
.pc-warn-actions { justify-content: flex-end; }

.pc-img-barre { margin: 0 0 10px; }

/* KPI cliquables (posent le filtre d'état) et KPI archivés atténué */
.bw-kpi-clic { cursor: pointer; }
.bw-kpi-clic:hover { box-shadow: 0 0 0 2px var(--main-bg-color) inset; }
.bw-kpi-alerte { border-color: var(--bw-red); }
.bw-kpi-muted { opacity: .7; }
.bw-check { display: inline-flex; align-items: center; gap: 4px; font-size: 8.5pt; color: #555; white-space: nowrap; cursor: pointer; }

.pc-row-alerte td { background: #fdecea !important; }

/* Hors vente sur le site (page accessible par URL, plus achetable) */
.bw-badge-warn { background: #fff0e0; color: #b35c00; }

/* ==================== Liaison téléphone (photo du PC prise au téléphone, même mécanisme que QualiRépar) ==================== */
.pc-pair-overlay { z-index: 10000; }
.pc-pair-modal { width: min(520px, 100%); }
.pc-pair-corps { text-align: center; padding-top: 6px; }
.pc-pair-intro { text-align: left; margin: 0 0 12px; line-height: 1.5; font-size: 9.5pt; }
.pc-pair-qr { display: inline-block; padding: 10px; background: #fff; border: 1px solid var(--bw-line); border-radius: 8px; margin-bottom: 8px; min-height: 60px; }
.pc-pair-qr img, .pc-pair-qr canvas { display: block; }
.pc-pair-url { font-size: 8pt; word-break: break-all; margin-bottom: 6px; }
.pc-pair-url a { color: var(--main-bg-color); }
.pc-pair-ttl { font-size: 9pt; color: #777; margin-bottom: 12px; }
.pc-pair-ttl .fa { margin-right: 4px; }
.pc-pair-slots { display: flex; flex-direction: column; gap: 8px; text-align: left; margin-bottom: 8px; }
.pc-pair-slot { display: flex; align-items: center; gap: 10px; padding: 8px 12px; border: 1px solid var(--bw-line); border-radius: 8px; font-size: 9.5pt; color: #555; }
.pc-pair-slot .fa { font-size: 13pt; color: #b0bec5; }
.pc-pair-ok { background: #e7f5ec; border-color: #b9e0c6; color: var(--bw-green); }
.pc-pair-ok .fa { color: var(--bw-green); }

/* ==================== Responsive (points de rupture du projet : 992 tablette, 768 mobile ; rien hors @media, l'affichage PC est inchangé).
   À GARDER EN FIN DE FICHIER : à spécificité égale, la dernière règle déclarée l'emporte. ==================== */
@media (max-width: 992px) {
  .page_boutique_web { padding: 12px; }
  .bw-header-actions { width: 100%; }
  .bw-kpis { gap: 8px; }
  .bw-kpi { padding: 8px 10px; gap: 8px; min-width: 120px; flex-basis: 120px; }
  .bw-kpi > .fa { width: 32px; height: 32px; border-radius: 8px; font-size: 14px; }
  .bw-kpi > div > strong { font-size: 14pt; }
  .bw-kpi-petit > div > strong { font-size: 9.5pt; }
  .bw-kpi > div > span { font-size: 7.5pt; }
  .bw-table-wrap { max-height: none; }
  .bw-label, .bw-cats { max-width: none; }
  .bw-tabs { flex-wrap: wrap; min-width: 0; }   /* retour à la ligne plutôt qu'une bande défilante dont la barre rognait les libellés */
  .bw-tab { padding: 8px 10px; font-size: 9.5pt; flex: 0 0 auto; }
}
@media (max-width: 768px) {
  .bw-kpis { display: grid; grid-template-columns: repeat(3, 1fr); gap: 5px; }
  .bw-kpi { padding: 4px 6px; gap: 4px; border-radius: 6px; box-shadow: 0 1px 3px rgba(0,0,0,0.08); min-width: 0; }
  .bw-kpi > .fa { width: 22px; height: 22px; border-radius: 5px; font-size: 10px; }
  .bw-kpi > div > strong { font-size: 10pt; white-space: normal; }
  .bw-kpi-petit > div > strong { font-size: 8pt; }
  .bw-kpi > div > span { font-size: 6.5pt; }
  .bw-toolbar .bw-input, .bw-toolbar .bw-select { min-width: 0; width: 100%; max-width: none; box-sizing: border-box; }
  .bw-toolbar .bw-btn { width: 100%; justify-content: center; }
  /* Fenêtres en plein écran, comme les panneaux mobiles des autres pages */
  .bw-modal-overlay { padding: 0; align-items: stretch; }
  .bw-modal, .pc-modal { width: 100%; min-width: 0; max-width: 100%; max-height: none; height: 100dvh; border-radius: 0; padding: 12px; box-sizing: border-box; } /* min-width 0 : sinon l'élément flex garde la largeur de son contenu */
  .bw-modal-header h2 { font-size: 11pt; }
  .pc-head-droite { width: 100%; justify-content: flex-start; }
  .pc-pied-actions { margin-left: 0; width: 100%; }
  .pc-pied-actions .bw-btn { flex: 1 1 auto; justify-content: center; }
  .pc-img-carte { width: 100%; box-sizing: border-box; }
  .pc-img-carte img, .pc-img-vide { height: 200px; }
  .pc-grow-v { min-height: 200px; }
}