/* ============================================================
   DEVIS PC GAMER — configurateur (?page=devis, préfixe dpc-)
   Plan : doc/PLAN_DEVIS_PC_GAMER.md. Chargé uniquement sur cette page.
   Pièges main.css repris : html { text-align: center }, label { width: 30% }, table auto-centrée,
   « .page_devis button » plus spécifique qu'une classe seule → variantes en deux classes.
   ============================================================ */

.page_devis {
  padding: 10px 16px 24px;
  font-size: 10pt;
  text-align: left;
}
.page_devis label { width: auto; margin: 0; font-weight: normal; }
.page_devis button, .dpc-btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 14px; border: 1px solid #ccc; border-radius: 6px;
  background: #f5f5f5; color: #333; font-size: 9pt; cursor: pointer;
}
.page_devis button:hover:not(:disabled) { background: #eaeaea; }
.page_devis button:disabled { opacity: .5; cursor: not-allowed; }
.page_devis .dpc-btn.dpc-btn-primaire { background: var(--main-bg-color); border-color: var(--main-bg-color); color: #fff; font-size: 10pt; padding: 9px 18px; font-weight: 600; }
.page_devis .dpc-btn.dpc-btn-primaire:hover:not(:disabled) { filter: brightness(1.08); background: var(--main-bg-color); }
.page_devis .dpc-btn.dpc-btn-ia { background: #6f42c1; border-color: #6f42c1; color: #fff; }
.page_devis .dpc-btn.dpc-btn-ia:hover:not(:disabled) { background: #5e35a8; }
.page_devis button.dpc-lien { border: 0; background: none; padding: 2px 0; color: var(--main-bg-color); text-decoration: underline; font-size: 9pt; }
.page_devis button.dpc-icone { border: 0; background: none; padding: 4px 6px; color: #888; }
.page_devis button.dpc-icone:hover:not(:disabled) { color: #c62828; background: none; }

/* ---- En-tête ---- */
.dpc-header { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; }
.dpc-header h1 { font-size: 16pt; color: var(--main-bg-color); margin: 0; }
.dpc-header-actions { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.dpc-ouvrir { display: inline-flex; gap: 4px; }
.dpc-ouvrir input { width: 190px; padding: 5px 8px; border: 1px solid #ccc; border-radius: 6px; font-size: 9pt; }

.dpc-bandeau { padding: 8px 12px; border-radius: 8px; margin-bottom: 10px; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.dpc-bandeau-erreur { background: #fdecea; color: #b71c1c; }
.dpc-bandeau-info { background: #e8f1fb; color: #0d47a1; }
.dpc-bandeau-alerte { background: #fff4e5; color: #8a4b00; }
.dpc-chargement { padding: 40px; text-align: center; color: #777; font-size: 11pt; }

/* ---- Mise en page ---- */
.dpc-layout { display: flex; gap: 16px; align-items: flex-start; }
.dpc-main { flex: 1; min-width: 0; }
.dpc-side { width: 380px; flex-shrink: 0; position: sticky; top: 60px; max-height: calc(100vh - 70px); overflow-y: auto; display: flex; flex-direction: column; gap: 10px; }

.dpc-nom { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.dpc-nom label { font-weight: 600; color: #555; }
.dpc-nom input { flex: 1; max-width: 420px; padding: 7px 10px; border: 1px solid #ccc; border-radius: 6px; font-size: 11pt; font-weight: 600; }

.dpc-section-titre { font-size: 11pt; font-weight: 700; color: var(--main-bg-color); margin: 16px 0 8px; display: flex; align-items: center; gap: 8px; }
.dpc-obligatoire { font-size: 8pt; font-weight: 600; color: #fff; background: #c62828; border-radius: 10px; padding: 1px 8px; }

/* ---- Cartes de composants ---- */
.dpc-cartes { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 10px; }
.dpc-carte { background: #fff; border-radius: 10px; box-shadow: 0 2px 8px rgba(0,0,0,0.07); padding: 10px 12px; border-left: 4px solid #ddd; display: flex; flex-direction: column; gap: 6px; }
.dpc-carte-ok { border-left-color: #2e7d32; }
.dpc-carte-bloquant { border-left-color: #c62828; background: #fffafa; }
.dpc-carte-alerte { border-left-color: #ef8c00; }
.dpc-carte-inconnu { border-left-color: #9e9e9e; }
.dpc-carte-manque { border-left-color: #ef8c00; border-left-style: dashed; }
.dpc-carte-tete { display: flex; align-items: center; gap: 8px; }
.dpc-carte-icone { width: 28px; height: 28px; border-radius: 7px; background: var(--main-bg-color); color: #fff; display: inline-block; text-align: center; line-height: 28px !important; font-size: 14px !important; flex-shrink: 0; }
.dpc-carte-titre { font-weight: 700; color: #333; }
.dpc-requis { color: #c62828; font-weight: 700; }
.dpc-carte-etat { margin-left: auto; font-size: 13pt; }
.dpc-etat-ok { color: #2e7d32; }
.dpc-etat-bloquant { color: #c62828; }
.dpc-etat-alerte { color: #ef8c00; }
.dpc-etat-inconnu, .dpc-etat-vide { color: #9e9e9e; }
.dpc-etat-manque { color: #ef8c00; }

.dpc-ligne { display: flex; gap: 8px; justify-content: space-between; border-top: 1px solid #f0f0f0; padding-top: 6px; }
.dpc-ligne-info { min-width: 0; flex: 1; }
.dpc-ref { font-weight: 600; font-size: 8.5pt; color: var(--main-bg-color); text-decoration: none; word-break: break-all; }
.dpc-label { font-size: 9pt; color: #444; }
.dpc-tags { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 3px; }
.dpc-tag { font-size: 7.5pt; background: #eef2f7; color: #355; border-radius: 4px; padding: 1px 6px; }
.dpc-stock { font-size: 7.5pt; border-radius: 4px; padding: 1px 6px; }
.dpc-stock-ok { background: #e8f5e9; color: #2e7d32; }
.dpc-stock-ko { background: #fff4e5; color: #b26a00; }
.dpc-ligne-prix { text-align: right; flex-shrink: 0; display: flex; flex-direction: column; align-items: flex-end; gap: 4px; }
.dpc-prix { font-weight: 700; font-size: 10.5pt; white-space: nowrap; }
.dpc-ligne-ctrl { display: flex; align-items: center; gap: 4px; }
.dpc-mini { font-size: 8.5pt; color: #666; white-space: nowrap; }
.page_devis .dpc-mini input { width: 44px !important; min-width: 0; padding: 2px 4px; border: 1px solid #ccc; border-radius: 4px; font-size: 9pt; box-sizing: border-box; }
.page_devis button.dpc-choisir { align-self: flex-start; background: #fff; border-style: dashed; color: var(--main-bg-color); }

/* ---- Montage ---- */
.dpc-montage { background: #fff; border-radius: 10px; box-shadow: 0 2px 8px rgba(0,0,0,0.07); padding: 10px 12px; border-left: 4px solid #2e7d32; display: flex; flex-direction: column; gap: 4px; }
.dpc-montage-manquant { border-left-color: #c62828; }
.dpc-montage-choix { display: flex !important; align-items: center; gap: 8px; padding: 5px 6px; border-radius: 6px; cursor: pointer; }
.dpc-montage-choix:hover { background: #f6f8fb; }
.dpc-montage-actif { background: #eef5ee; }
.dpc-montage-lib { flex: 1; }
.dpc-montage-ref { font-size: 7.5pt; color: #888; margin-left: 6px; }
.dpc-montage-prix { font-weight: 700; }
.dpc-offert { display: flex !important; align-items: center; gap: 8px; margin-top: 4px; padding-top: 6px; border-top: 1px solid #f0f0f0; font-weight: 600 !important; color: #2e7d32; }

/* ---- Ventes additionnelles ---- */
.dpc-conseils { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
.page_devis button.dpc-conseil { background: #fff8e1; border-color: #ffd54f; color: #6d4c00; }
.dpc-options { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 8px; }
.dpc-option { background: #fff; border-radius: 10px; box-shadow: 0 1px 5px rgba(0,0,0,0.06); padding: 8px 10px; }
.dpc-option-remplie { border-left: 4px solid var(--main-bg-color); }
.dpc-option-tete { font-weight: 600; color: #555; margin-bottom: 4px; display: flex; gap: 6px; align-items: center; }
.dpc-ligne-option { border-top: 0; padding-top: 2px; }
.dpc-sugg { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; }
.page_devis button.dpc-sugg-btn { font-size: 8pt; padding: 3px 8px; background: #f3f6fa; border-color: #dbe3ec; }
.page_devis button.dpc-sugg-autre { background: #fff; border-style: dashed; }

/* ---- Panneaux latéraux ---- */
.dpc-panneau { background: #fff; border-radius: 10px; box-shadow: 0 2px 8px rgba(0,0,0,0.07); padding: 10px 12px; }
.dpc-panneau-titre { font-weight: 700; color: #444; margin-bottom: 6px; display: flex; gap: 8px; align-items: center; }
.dpc-recap { border-top: 4px solid var(--main-bg-color); }
.dpc-total-ttc { font-size: 20pt; font-weight: 800; color: var(--main-bg-color); }
.dpc-total-ttc small { font-size: 10pt; font-weight: 600; }
.dpc-total-ht { color: #666; font-size: 9pt; }
.dpc-marge { display: flex; gap: 8px; align-items: center; margin-top: 4px; font-size: 9pt; }
.dpc-puissance { margin-top: 8px; font-size: 8.5pt; color: #555; }
.dpc-jauge { height: 8px; background: #eee; border-radius: 4px; overflow: hidden; margin-top: 4px; }
.dpc-jauge-barre { height: 100%; transition: width .3s; }
.dpc-jauge-verte { background: #2e7d32; }
.dpc-jauge-orange { background: #ef8c00; }
.dpc-jauge-rouge { background: #c62828; }

.dpc-verif-resume { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 6px; }
.dpc-pastille { font-size: 8pt; border-radius: 10px; padding: 1px 8px; font-weight: 600; }
.dpc-p-bloquant { background: #fdecea; color: #b71c1c; }
.dpc-p-alerte { background: #fff4e5; color: #8a4b00; }
.dpc-p-inconnu { background: #f1f1f1; color: #555; }
.dpc-p-ok { background: #e8f5e9; color: #2e7d32; }
.dpc-point { font-size: 8.5pt; padding: 3px 0 3px 2px; line-height: 1.35; }
.dpc-point .fa { width: 14px; }
.dpc-point-bloquant { color: #b71c1c; font-weight: 600; }
.dpc-point-alerte { color: #8a4b00; }
.dpc-point-inconnu { color: #616161; }
.dpc-point-info { color: #0d47a1; }
.dpc-point-ok { color: #2e7d32; }
.dpc-ia { margin-top: 8px; padding-top: 8px; border-top: 1px solid #f0f0f0; display: flex; flex-direction: column; gap: 4px; align-items: flex-start; }
.dpc-avis { width: 100%; background: #f7f3fc; border-radius: 8px; padding: 6px 8px; }
.dpc-avis-verdict { font-weight: 600; margin-bottom: 4px; }
.dpc-case { display: inline-flex !important; align-items: center; gap: 6px; font-size: 8.5pt; color: #555; }

.dpc-champ { width: 100%; box-sizing: border-box; padding: 6px 8px; border: 1px solid #ccc; border-radius: 6px; font-size: 9pt; margin-bottom: 6px; }
.dpc-photo { display: flex !important; align-items: center; gap: 6px; font-size: 8.5pt; color: var(--main-bg-color); cursor: pointer; margin-bottom: 6px; }
.dpc-photo input { display: none; }
.dpc-apercu-img { margin-top: 6px; }
.dpc-apercu-img img { width: 100%; border-radius: 8px; display: block; }

.dpc-tiers .multiselect { width: 100%; }
.dpc-tiers table { width: 100%; margin-left: 0; }
.dpc-tiers-fixe { font-size: 10pt; }
.dpc-action { display: flex; flex-direction: column; gap: 6px; }
.dpc-raisons { margin: 0; padding-left: 18px; font-size: 8.5pt; color: #8a4b00; }
.dpc-resultat { background: #e8f5e9; color: #1b5e20; border-radius: 8px; padding: 6px 8px; font-weight: 600; }

.dpc-vide { color: #888; font-size: 9pt; padding: 6px 0; }
.dpc-gris { color: #888; }
.dpc-petit { font-size: 8pt; }
.dpc-vert { color: #2e7d32; font-weight: 600; }
.dpc-rouge { color: #c62828; font-weight: 600; }
.dpc-orange { color: #b26a00; }
.dpc-centre { text-align: center; padding: 6px; }

/* ---- Calques de choix (sous la modale de mise à jour, comme .modal-mask) ---- */
.dpc-modal-fond { position: fixed; inset: 0; background: rgba(0,0,0,0.45); z-index: 9999; display: flex; align-items: center; justify-content: center; padding: 16px; }
.dpc-modal { background: #fff; border-radius: 12px; width: 760px; max-width: 100%; max-height: 88vh; display: flex; flex-direction: column; box-shadow: 0 12px 40px rgba(0,0,0,0.25); }
.dpc-modal-tete { padding: 12px 16px; font-weight: 700; font-size: 11pt; color: var(--main-bg-color); border-bottom: 1px solid #eee; display: flex; align-items: center; gap: 8px; }
.page_devis button.dpc-fermer { margin-left: auto; font-size: 13pt; }
.dpc-modal-filtres { padding: 10px 16px 0; display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.dpc-modal-filtres .dpc-champ { flex: 1; min-width: 200px; margin: 0; }
.dpc-modal-corps { overflow-y: auto; padding: 8px 16px 16px; }
.dpc-candidat { display: flex; gap: 10px; justify-content: space-between; padding: 8px 10px; border-radius: 8px; border: 1px solid #eee; margin-top: 6px; cursor: pointer; }
.dpc-candidat:hover { border-color: var(--main-bg-color); background: #f6f9fd; }
.dpc-candidat-inconnu { border-style: dashed; }
.dpc-candidat-incompatible { opacity: .55; background: #fafafa; }
.dpc-candidat-info { min-width: 0; flex: 1; }
.dpc-candidat-prix { font-weight: 700; white-space: nowrap; }
.dpc-motif { font-size: 8pt; color: #8a4b00; margin-top: 3px; }
.dpc-candidat-incompatible .dpc-motif { color: #b71c1c; }

.dpc-barre-mobile { display: none; }

/* ---- Vignettes produit (clic = visionneuse standard dmVisionneuse) et codes barre ---- */
.dpc-vignette {
  width: 56px; height: 56px; flex-shrink: 0; border-radius: 8px; border: 1px solid #e6e9ee; background: #fafbfc;
  display: inline-flex; align-items: center; justify-content: center; overflow: hidden; color: #c5ccd6; font-size: 16px;
}
.dpc-vignette img { width: 100%; height: 100%; object-fit: contain; background: #fff; }
.dpc-vignette.dm-zoomable:hover { border-color: var(--main-bg-color); }
.dpc-vignette-petite { width: 44px; height: 44px; font-size: 13px; }
.dpc-candidat .dpc-vignette { width: 64px; height: 64px; }
/* Ligne de pièce : vignette + libellé, puis prix et contrôles sur une 2e ligne (libellé jamais écrasé) */
.dpc-ligne { flex-wrap: wrap; }
.dpc-ligne-info { flex: 1 1 140px; }
.dpc-ligne .dpc-ligne-prix { width: 100%; flex-direction: row; justify-content: space-between; align-items: center; padding-left: 64px; box-sizing: border-box; }
.dpc-ligne-option .dpc-ligne-prix { padding-left: 52px; }
.dpc-cb { font-size: 7.5pt; background: #f3f0fa; color: #4a3a7a; border-radius: 4px; padding: 1px 6px; font-family: Consolas, monospace; white-space: nowrap; }
.dpc-apercu-img img { cursor: zoom-in; }

/* ---- Tablette (≤ 1200 px) ---- */
@media (max-width: 1200px) {
  .dpc-side { width: 330px; }
}

/* ---- Tablette (≤ 992 px) : une colonne, récapitulatif sous les composants ---- */
@media (max-width: 992px) {
  .dpc-layout { flex-direction: column; align-items: stretch; }
  .dpc-side { width: auto; position: static; max-height: none; overflow: visible; }
  .dpc-barre-mobile {
    display: flex; position: sticky; bottom: 0; z-index: 50; gap: 10px; align-items: center;
    background: #fff; box-shadow: 0 -2px 10px rgba(0,0,0,0.12); padding: 8px 12px; margin: 12px -16px -24px;
  }
  .dpc-barre-total { font-weight: 800; font-size: 12pt; color: var(--main-bg-color); }
  .dpc-barre-etat { flex: 1; font-size: 9pt; }
  .dpc-modal { max-height: 92vh; }
}

/* ---- Mobile (≤ 768 px) ---- */
@media (max-width: 768px) {
  .page_devis { padding: 8px 10px 24px; }
  .dpc-header h1 { font-size: 13pt; }
  .dpc-header-actions { width: 100%; }
  .dpc-ouvrir { flex: 1; }
  .dpc-ouvrir input { flex: 1; width: auto; min-width: 0; }
  .dpc-nom { flex-direction: column; align-items: stretch; gap: 4px; }
  .dpc-nom input { max-width: none; }
  .dpc-cartes, .dpc-options { grid-template-columns: 1fr; }
  .dpc-ligne .dpc-ligne-prix { padding-left: 0; }
  .dpc-candidat .dpc-vignette { width: 52px; height: 52px; }
  .page_devis button, .page_devis .dpc-mini input { min-height: 36px; }
  .dpc-modal-fond { padding: 0; align-items: stretch; }
  .dpc-modal { width: 100%; max-height: none; height: 100%; border-radius: 0; }
  .dpc-barre-mobile { margin: 12px -10px -24px; }
}