* { margin: 0; padding: 0; box-sizing: border-box; }

:root {
  --navy: #162339;
  --navy-2: #1F2E4A;
  --accent: #0F65A9;
  --accent-2: #094B7F;
  --accent-light: #E7F1F9;
  /* Pièces d'usure : ambre, pour rester lisible face au bleu des pièces structurelles */
  --wear: #D97706;
  --wear-2: #B45309;
  --wear-light: #FEF3C7;
  --slate: #5C6672;
  --slate-2: #8890A0;
  --bg: #F5F7FA;
  --bg-2: #ECEFF4;
  --border: #E2E5EA;
  --border-2: #D5D9E0;
  --white: #FFFFFF;
  --blue: #2980B9;
  --blue-light: #EBF5FB;
  --green: #2E8B57;
  --green-2: #256F47;
  --green-light: #E8F5EE;
  --red: #C0392B;
  --shadow-sm: 0 1px 2px rgba(22,35,57,.06);
  --shadow-md: 0 4px 12px rgba(22,35,57,.08);
  --shadow-lg: 0 20px 48px rgba(22,35,57,.16);
}

body {
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  background: var(--bg);
  color: var(--navy);
  height: 100vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  -webkit-font-smoothing: antialiased;
}

/* ═══ HEADER ═══ */
/* ═══ Bandeau de service ═══
   Repris du site nxtprocess.com : horaires, telephone, courriel. Une piece de
   pompe se commande encore beaucoup par telephone, et le numero doit rester
   sous les yeux sans qu'on le cherche. */
.topbar {
  background: var(--navy);
  color: rgba(255,255,255,.72);
  font-size: .74rem;
  flex-shrink: 0;
}
.topbar-in {
  display: flex; align-items: center; gap: 22px;
  padding: 7px 20px;
  flex-wrap: wrap;
}
.topbar-gap { flex: 1; min-width: 0; }
.topbar-item {
  color: inherit; text-decoration: none;
  white-space: nowrap;
  background: none; border: 0; padding: 0;
  font-family: inherit; font-size: inherit;
}
/* Le bleu d'accent est fait pour le fond clair de la boutique : pose sur le
   marine du bandeau, il tombe a un contraste de 2 pour 1 et le numero de
   telephone devient illisible. Les liens prennent donc le blanc, un peu plus
   franc que le texte voisin pour rester reconnaissables comme liens, et le
   survol passe au blanc plein. */
a.topbar-item, .topbar-btn { color: rgba(255,255,255,.92); cursor: pointer; }
a.topbar-item:hover, .topbar-btn:hover { color: var(--white); text-decoration: underline; }
/* Sous 720 px, seuls le telephone et le compte restent : le reste ferait
   deux lignes de bandeau au-dessus d'un ecran deja court. */
@media (max-width: 720px) {
  .topbar-in > .topbar-item:first-child,
  .topbar-in > a[href^="mailto"],
  .topbar-in > a[href^="https://nxtprocess"] { display: none; }
}

/* Cadre de remplacement d'une photo absente ou morte. Un src vide donne
   l'icone cassee du navigateur, qui se lit comme une panne du site alors que
   c'est une fiche incomplete. */
.photo-vide {
  display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 8px;
  width: 100%; min-height: 100%;
  padding: 24px;
  font-size: .76rem; color: var(--slate-2);
  background: var(--bg-2);
  border-radius: 10px;
}
.photo-vide svg { opacity: .55; }
/* Dans la fiche produit, rien ne donne sa hauteur au cadre : on lui impose le
   format paysage des vignettes du catalogue. */
.prod-media > .photo-vide {
  aspect-ratio: 4 / 3;
  border: 1px dashed var(--border-2);
}
/* Sur une vignette, l'etiquette ne tiendrait pas : l'icone seule suffit. */
.prod-vignette .photo-vide { padding: 0; border-radius: 0; }
.prod-vignette .photo-vide span { display: none; }

.hdr-wordmark {
  font-size: 1.05rem; font-weight: 400; letter-spacing: .18em;
  color: var(--navy); white-space: nowrap; text-transform: uppercase;
}
.hdr-wordmark strong { font-weight: 800; letter-spacing: -.01em; }
a.hdr-brand { text-decoration: none; }

.hdr {
  background: var(--white);
  border-bottom: 1px solid var(--border);
  padding: 10px 20px;
  display: flex;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
  box-shadow: var(--shadow-sm);
}
.hdr-brand { display: flex; align-items: center; gap: 10px; }
.hdr-logo {
  width: 32px; height: 32px;
  border-radius: 8px;
  background: linear-gradient(135deg, var(--navy) 0%, var(--navy-2) 100%);
  color: var(--accent);
  display: flex; align-items: center; justify-content: center;
  font-weight: 800; font-size: 15px;
  letter-spacing: -.5px;
}
.hdr-title { line-height: 1.15; }
.hdr-title h1 { font-size: .92rem; font-weight: 700; color: var(--navy); }
.hdr-sub { font-size: .68rem; color: var(--slate-2); font-weight: 500; letter-spacing: .2px; }

a.hdr-btn { text-decoration: none; }
.hdr-btn {
  display: flex; align-items: center; gap: 6px;
  padding: 7px 12px;
  background: var(--white);
  color: var(--slate);
  border: 1px solid var(--border);
  border-radius: 6px;
  font-size: .74rem; font-weight: 600;
  cursor: pointer; font-family: inherit;
  transition: all .12s;
}
.hdr-btn:hover { color: var(--navy); border-color: var(--slate-2); background: var(--bg); }

.series-picker {
  display: flex; align-items: center; gap: 6px;
  padding: 6px 10px 6px 12px;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--slate);
  font-size: .78rem;
  font-weight: 600;
  cursor: pointer;
  transition: all .12s;
  margin-right: 8px;
  position: relative;
}
.series-picker:hover { border-color: var(--slate-2); color: var(--navy); }
.series-picker select {
  border: 0; background: transparent;
  font: inherit; color: inherit;
  padding: 0 4px 0 0;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  min-width: 88px;
}
.series-picker select:focus { outline: none; }
.series-picker .series-chev { color: var(--slate-2); pointer-events: none; }
.hdr .b {
  padding: 3px 10px;
  border-radius: 4px;
  font-size: .65rem;
  font-weight: 700;
  letter-spacing: .4px;
  background: var(--accent-light);
  color: var(--accent);
}
.hdr .b-shop { background: var(--accent); color: var(--white); }

/* Nav boutique dans la barre du haut */
.hdr-nav { display: flex; align-items: center; gap: 4px; margin-left: 8px; }
.hdr-tab {
  /* Le menu est fait de boutons dans la boutique et de liens sur les pages a
     part : sans ca, les liens arrivaient soulignes et en bleu de navigateur,
     et le menu semblait avoir change d'un ecran a l'autre. */
  text-decoration: none; display: inline-flex; align-items: center;
  background: none; border: 0;
  padding: 8px 14px; border-radius: 8px;
  font-family: inherit; font-size: .82rem; font-weight: 600;
  color: var(--slate); cursor: pointer;
  transition: background .12s, color .12s;
  white-space: nowrap;
}
.hdr-tab:hover { background: var(--bg-2); color: var(--navy); }
.hdr-tab.on { background: var(--accent-light); color: var(--accent-2); }

.hdr-search-wrap { position: relative; flex: 1; min-width: 140px; max-width: 460px; margin: 0 4px; }
.hdr-search-wrap svg {
  position: absolute; left: 11px; top: 50%; transform: translateY(-50%);
  color: var(--slate-2); pointer-events: none;
}
.hdr-search {
  width: 100%; padding: 9px 12px 9px 34px;
  border: 1px solid var(--border); border-radius: 8px;
  background: var(--bg); color: var(--navy);
  font-family: inherit; font-size: .82rem;
  transition: all .15s;
}
.hdr-search:focus {
  outline: none; border-color: var(--accent);
  background: var(--white);
  box-shadow: 0 0 0 3px var(--accent-light);
}

.hdr-quote {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 14px; border: 0; border-radius: 8px;
  background: var(--navy); color: var(--white);
  font-family: inherit; font-size: .78rem; font-weight: 600;
  cursor: pointer; white-space: nowrap;
  transition: background .12s;
}
.hdr-quote:hover { background: var(--navy-2); }
.hdr-quote-count {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 20px; height: 20px; padding: 0 6px;
  border-radius: 999px;
  background: var(--accent); color: var(--white);
  font-size: .7rem; font-weight: 700;
}

/* ═══ BOUTIQUE (zone principale pleine largeur) ═══ */
.shop {
  flex: 1;
  display: flex;
  overflow: hidden;
  min-height: 0;
}
.shop-main {
  flex: 1;
  min-width: 0;
  overflow-y: auto;
  background: var(--white);
  display: flex; flex-direction: column;
}

.welcome {
  padding: 24px 8px 20px;
  text-align: center;
}
.welcome-icon {
  width: 56px; height: 56px;
  margin: 0 auto 14px;
  border-radius: 14px;
  background: linear-gradient(135deg, var(--accent-light) 0%, #FFF 100%);
  color: var(--accent);
  display: flex; align-items: center; justify-content: center;
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--accent-light);
}
.welcome-title {
  font-size: 1.05rem; font-weight: 700;
  color: var(--navy); margin-bottom: 6px;
}
.welcome-sub {
  font-size: .82rem; color: var(--slate);
  line-height: 1.5; margin-bottom: 18px;
  padding: 0 8px;
}
.chips { display: flex; flex-direction: column; gap: 8px; }
.chip {
  display: flex; align-items: center; gap: 8px;
  padding: 10px 14px;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 10px;
  font-size: .82rem;
  font-weight: 500;
  color: var(--navy);
  cursor: pointer;
  text-align: left;
  transition: all .12s;
  font-family: inherit;
}
.chip:hover {
  border-color: var(--accent);
  background: var(--accent-light);
  color: var(--accent-2);
  transform: translateY(-1px);
  box-shadow: var(--shadow-sm);
}
.chip svg { color: var(--accent); flex-shrink: 0; }

/* Chat messages */
.m { margin-bottom: 12px; max-width: 90%; display: flex; gap: 8px; }
.m.u { margin-left: auto; flex-direction: row-reverse; }
.m .avatar {
  width: 26px; height: 26px; border-radius: 50%;
  flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: .68rem; font-weight: 700;
  margin-top: 2px;
}
.m.a .avatar { background: linear-gradient(135deg, var(--navy), var(--navy-2)); color: var(--accent); }
.m.u .avatar { background: var(--accent-light); color: var(--accent); }
.m .bbl { padding: 10px 14px; border-radius: 14px; font-size: .86rem; line-height: 1.55; }
.m.u .bbl { background: var(--navy); color: var(--white); border-bottom-right-radius: 4px; }
.m.a .bbl { background: var(--white); border: 1px solid var(--border); border-bottom-left-radius: 4px; box-shadow: var(--shadow-sm); }
.m .bbl img { max-width: 140px; border-radius: 6px; margin-top: 6px; display: block; }
.chat-quote-link {
  color: var(--accent-2);
  font-weight: 700;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 2px;
  text-decoration-thickness: 1.5px;
  transition: color .12s;
}
.chat-quote-link:hover { color: var(--accent); }
.m.u .bbl .chat-quote-link { color: #E7F1F9; text-decoration-color: rgba(231,241,249,.6); }
.m.u .bbl .chat-quote-link:hover { color: var(--white); text-decoration-color: var(--white); }
.chat-part-link {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 1px 8px 1px 4px;
  border-radius: 999px;
  background: var(--green-light);
  color: var(--green-2);
  font-weight: 700;
  font-size: .82em;
  cursor: pointer;
  border: 1px solid transparent;
  transition: all .12s;
  vertical-align: baseline;
}
.chat-part-link::before {
  content: '';
  display: inline-block;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--green);
}
.chat-part-link:hover { border-color: var(--green); background: #DBEEE1; }

.typing {
  padding: 6px 20px 8px;
  display: none;
  align-items: center;
  gap: 6px;
  color: var(--slate);
  font-size: .76rem;
}
.typing.on { display: flex; }
.dot-typing {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--slate-2);
  animation: bounce 1.2s infinite;
}
.dot-typing:nth-child(2) { animation-delay: .15s; }
.dot-typing:nth-child(3) { animation-delay: .3s; }
@keyframes bounce {
  0%, 60%, 100% { transform: translateY(0); opacity: .5; }
  30% { transform: translateY(-4px); opacity: 1; }
}

.input-bar {
  padding: 12px 16px 14px;
  background: var(--white);
  border-top: 1px solid var(--border);
  display: flex; gap: 8px;
  flex-shrink: 0;
  flex-wrap: wrap;
}
/* Composeur : c'est le cadre entier qui est le champ, avec le texte en haut et
   les outils posés dessous. Un input haut de 88 px laissait son texte flotter
   au milieu du vide, entre deux boutons de la taille d'une case. */
.input-row {
  display: flex; flex-direction: column; gap: 6px; width: 100%;
  padding: 10px 10px 8px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--bg);
  transition: border-color .15s, background .15s, box-shadow .15s;
}
.input-row:focus-within {
  border-color: var(--accent);
  background: var(--white);
  box-shadow: 0 0 0 3px var(--accent-light);
}
.input-bar textarea {
  width: 100%;
  min-height: 46px; max-height: 160px;
  padding: 2px 4px;
  border: 0; outline: none; background: transparent; resize: none;
  font-size: .86rem; font-family: inherit; line-height: 1.5;
  color: var(--navy);
}
.input-tools { display: flex; align-items: center; gap: 8px; }
.input-hint {
  flex: 1; min-width: 0;
  font-size: .68rem; color: var(--slate-2);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.input-bar #btn {
  /* Colle a droite meme sans l indice, qui servait aussi d espaceur. */
  margin-left: auto;
  width: 36px; height: 36px;
  padding: 0;
  background: var(--navy);
  color: var(--white);
  border: none;
  border-radius: 10px;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: all .15s;
  flex-shrink: 0;
}
.input-bar #btn:hover { background: var(--navy-2); transform: translateX(1px); }
.input-bar #btn:disabled { opacity: .4; cursor: wait; transform: none; }

.photo-btn {
  width: 36px; height: 36px;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 9px;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  color: var(--slate);
  transition: all .15s;
  flex-shrink: 0;
}
.photo-btn:hover { background: var(--accent-light); border-color: var(--accent); color: var(--accent); }
.photo-btn svg { display: block; }

.photo-preview { display: none; align-items: center; gap: 8px; width: 100%; padding: 4px 0; }
.photo-preview.on { display: flex; }
.photo-preview img { width: 48px; height: 48px; object-fit: cover; border-radius: 8px; border: 1px solid var(--border); }
.photo-preview span { font-size: .75rem; color: var(--slate); flex: 1; }
.photo-preview .remove { background: none; border: none; color: var(--red); cursor: pointer; font-size: .82rem; font-weight: 600; padding: 4px 8px; }

/* ═══ PANEL ═══ */
.panel-empty { flex: 1; display: flex; flex-direction: column; }

/* ═══ CATALOGUE (panneau central quand rien n'est encore identifié) ═══ */
.catalog { flex: 1; display: flex; flex-direction: column; }
.catalog-head {
  padding: 26px 28px 24px;
  background: var(--navy);
  color: var(--white);
  flex-shrink: 0;
}
.catalog-crumb {
  display: flex; align-items: center; gap: 7px;
  font-size: .74rem; color: rgba(255,255,255,.55);
  margin-bottom: 10px; min-height: 16px;
}
.catalog-crumb button {
  background: none; border: 0; padding: 0; cursor: pointer;
  font-family: inherit; font-size: inherit; color: rgba(255,255,255,.72);
  text-decoration: underline; text-underline-offset: 2px;
}
.catalog-crumb button:hover { color: var(--white); }
.catalog-kicker {
  font-size: .68rem; font-weight: 700; letter-spacing: .16em;
  text-transform: uppercase; color: #5FA8DC; margin-bottom: 8px;
}
.catalog-title { font-size: 1.32rem; font-weight: 800; letter-spacing: -.02em; }
.catalog-sub {
  margin-top: 7px; font-size: .84rem; line-height: 1.55;
  color: rgba(255,255,255,.68); max-width: 46ch;
}
.catalog-body { padding: 22px 28px 32px; }
/* La fiche produit respire davantage que la liste : elle commence juste sous
   le bandeau sombre, et 22 px collaient le prix au titre qui le surplombe. */
.catalog-body:has(.prod) { padding-top: 44px; }
.catalog-grid { display: grid; gap: 16px; }
.catalog-grid.two { grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }

/* ═══ Filtres du catalogue ═══ */
.catalog-shell { display: flex; gap: 26px; align-items: flex-start; }
.catalog-results { flex: 1; min-width: 0; }
.filters { width: 210px; flex-shrink: 0; }
.filters-head {
  display: flex; align-items: baseline; justify-content: space-between; gap: 10px;
  padding-bottom: 10px; margin-bottom: 14px;
  border-bottom: 1px solid var(--border);
  font-size: .7rem; font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase; color: var(--slate);
}
.filters-head button {
  border: 0; background: none; padding: 0; cursor: pointer;
  font-family: inherit; font-size: .72rem; font-weight: 600;
  letter-spacing: 0; text-transform: none; color: var(--accent);
}
.filters-head button:hover { text-decoration: underline; }
.facet { margin-bottom: 22px; }
.facet-title {
  font-size: .7rem; font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase;
  color: var(--slate-2); margin-bottom: 8px;
}
/* Pas de filet entre les cases : elles sont déjà séparées par leur espacement,
   et le trait les faisait ressembler à des lignes de tableau. */
.facet-row {
  display: flex; align-items: center; gap: 9px;
  padding: 6px 0;
  cursor: pointer;
}

/* Valeurs courtes en pastilles : dix modèles tiennent en quatre rangées,
   sans ascenseur ni ligne perdue. La case reste là pour l'accessibilité. */
/* Rappelle de quel produit sont ces modèles : la facette n'apparaît que
   lorsqu'un seul produit reste, autant le nommer. */
.facet-sub {
  margin: -4px 0 8px;
  font-size: .78rem; font-weight: 600; color: var(--navy);
}
.facet-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.facet-chip {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 5px 10px;
  border: 1px solid var(--border-2);
  border-radius: 7px;
  background: var(--white);
  font-size: .79rem; color: var(--navy);
  cursor: pointer;
  transition: border-color .12s, background .12s;
}
.facet-chip:hover { border-color: var(--accent); color: var(--accent-2); }
.facet-chip.on {
  border-color: var(--accent);
  background: var(--accent-light);
  color: var(--accent-2);
  font-weight: 700;
}
.facet-chip input { position: absolute; opacity: 0; width: 0; height: 0; }
.facet-chip-n { font-size: .68rem; color: var(--slate-2); }
.facet-chip.on .facet-chip-n { color: var(--accent-2); }
.facet-row input { width: 15px; height: 15px; cursor: pointer; flex-shrink: 0; }
.facet-name { flex: 1; font-size: .81rem; line-height: 1.35; color: var(--navy); }
.facet-count { font-size: .76rem; color: var(--slate-2); }
@media (max-width: 860px) {
  .catalog-shell { flex-direction: column; }
  .filters { width: 100%; }
  .facet { margin-bottom: 14px; }
}

.cat-card {
  display: flex; flex-direction: column;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--white);
  overflow: hidden;
  cursor: pointer;
  text-align: left;
  font-family: inherit;
  transition: border-color .15s, box-shadow .15s, transform .15s;
}
.cat-card:hover {
  border-color: var(--accent);
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}
.cat-card-media {
  /* 4:3 paysage, le format photo courant : la vignette garde la même forme quelle
     que soit la largeur de la carte, au lieu d'une hauteur fixe qui donnait un
     cadre plus ou moins allongé selon la colonne. */
  aspect-ratio: 4 / 3;
  background: var(--bg-2);
  border-bottom: 1px solid var(--border);
  display: flex; align-items: center; justify-content: center;
  position: relative;
}
.cat-card-media img { max-width: 100%; max-height: 100%; object-fit: contain; padding: 14px; }
/* Une photo occupe toute la vignette : un produit flottant au milieu d'une
   marge grise se voit moins bien qu'un produit qui remplit le cadre. Les vues
   éclatées gardent le `contain` ci-dessus, un recadrage y couperait des repères. */
.cat-card-media img.is-photo {
  width: 100%; height: 100%; max-width: none; max-height: none;
  object-fit: cover; padding: 0;
}
.cat-card-tag {
  position: absolute; top: 10px; left: 10px;
  padding: 4px 8px; border-radius: 5px;
  background: var(--navy); color: var(--white);
  font-size: .62rem; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase;
}
.cat-card-body { padding: 15px 16px 16px; display: flex; flex-direction: column; flex: 1; }
.cat-card-kicker {
  font-size: .66rem; font-weight: 600; letter-spacing: .12em;
  text-transform: uppercase; color: var(--slate-2);
}
.cat-card-title {
  margin-top: 6px; font-size: 1rem; font-weight: 700;
  color: var(--navy); letter-spacing: -.01em;
}
.cat-card-desc {
  margin-top: 8px; flex: 1;
  font-size: .8rem; line-height: 1.5; color: var(--slate);
}
.cat-card-foot {
  margin-top: 14px; display: flex; align-items: center;
  justify-content: space-between; gap: 10px;
}
.cat-card-meta { font-size: .74rem; color: var(--slate-2); }
.cat-card-cta {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 13px; border-radius: 7px;
  background: var(--accent); color: var(--white);
  font-size: .72rem; font-weight: 700;
  letter-spacing: .05em; text-transform: uppercase;
}
.cat-card:hover .cat-card-cta { background: var(--accent-2); }

/* Résultats de recherche */
.cat-results { display: grid; gap: 1px; background: var(--border); border: 1px solid var(--border); border-radius: 10px; overflow: hidden; }
.cat-row {
  display: grid; grid-template-columns: 38px 1fr auto auto;
  gap: 12px; align-items: center;
  padding: 12px 14px; background: var(--white);
  cursor: pointer; text-align: left; border: 0;
  font-family: inherit; width: 100%;
}
.cat-row:hover { background: var(--bg); }
.cat-row-ref {
  display: flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; border-radius: 7px;
  background: var(--accent-light); color: var(--accent-2);
  font-size: .8rem; font-weight: 800;
}
.cat-row-ref.wear { background: var(--wear-light); color: var(--wear-2); }
.cat-row-name { display: block; font-size: .87rem; font-weight: 600; color: var(--navy); }
.cat-row-sub {
  display: block; margin-top: 3px; font-size: .72rem; color: var(--slate);
  font-family: 'JetBrains Mono', monospace;
}
.cat-row-where { font-size: .7rem; color: var(--slate-2); white-space: nowrap; }

.cat-note {
  margin-top: 18px; padding: 13px 15px;
  background: var(--bg); border-left: 3px solid var(--accent);
  border-radius: 0 8px 8px 0;
  font-size: .78rem; line-height: 1.55; color: var(--slate);
}
.cat-empty {
  padding: 34px 20px; text-align: center;
  font-size: .84rem; color: var(--slate);
}

/* Fiches produit (onglet « Tous les produits ») */
.cat-card-price {
  margin-top: 12px;
  font-size: .95rem; font-weight: 800; color: var(--navy);
  letter-spacing: -.01em;
}
.cat-card-price small {
  display: block; margin-top: 2px;
  font-size: .68rem; font-weight: 500; color: var(--slate-2);
  letter-spacing: 0;
}
.cat-card-specs {
  display: grid; gap: 1px;
  margin-top: 12px;
  background: var(--border);
  border: 1px solid var(--border);
  border-radius: 8px;
  overflow: hidden;
}
/* Étiquette puis valeur, en deux colonnes fixes. En « space-between », la
   valeur partait au bord droit du bloc : sur une fiche large, on ne savait
   plus quelle valeur allait avec quelle étiquette. */
.cat-card-spec {
  display: grid; grid-template-columns: minmax(120px, 38%) 1fr; gap: 12px;
  padding: 8px 12px; background: var(--white);
  font-size: .74rem; line-height: 1.5;
}
.cat-card-spec span:first-child { color: var(--slate-2); }
.cat-card-spec span:last-child { color: var(--navy); font-weight: 600; }
/* La fiche produit n'est pas cliquable en entier, seuls ses boutons le sont */
.cat-card[data-prod] { cursor: default; }
.cat-card[data-prod]:hover { transform: none; }
.cat-card-actions { margin-top: 14px; display: flex; gap: 8px; }
.cat-card-actions .cat-card-cta { border: 0; cursor: pointer; font-family: inherit; }
.cat-btn-ghost {
  flex: 1;
  padding: 8px 12px; border-radius: 7px;
  border: 1px solid var(--border-2); background: var(--white);
  color: var(--navy); font-family: inherit;
  font-size: .72rem; font-weight: 700;
  letter-spacing: .05em; text-transform: uppercase;
  cursor: pointer; transition: all .12s;
}
.cat-btn-ghost:hover { border-color: var(--accent); color: var(--accent); }

/* ═══ FICHE PRODUIT ═══
   Bornée en largeur : sans cela, sur un grand écran, la colonne de droite
   s'étirait sur mille pixels — des lignes trop longues à lire, des valeurs
   de caractéristiques rejetées à l'autre bout — pendant que la colonne de
   l'image laissait un vide sous la photo. */
.prod {
  margin-top: 22px;
  display: grid;
  grid-template-columns: minmax(280px, 1fr) minmax(360px, 1.15fr);
  gap: 40px; align-items: start;
  max-width: 1160px; margin: 0 auto;
}
/* Le dessin est déjà sur fond blanc : un cadre autour ferait double bordure */
.prod-media {
  display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: 10px;
}
/* L'image suit la lecture du configurateur au lieu de disparaître en haut :
   on configure en regardant ce qu'on configure. */
@media (min-width: 1000px) {
  .prod-media { position: sticky; top: 16px; }
}
.prod-media > img {
  max-width: 100%; height: auto; border-radius: 12px;
  border: 1px solid var(--border);
  box-shadow: 0 2px 10px rgba(22, 35, 57, .05);
}
/* Vignettes des autres photos : la fiche en montre plusieurs, on change la
   grande image sans quitter la page. */
.prod-vignettes { display: flex; gap: 8px; flex-wrap: wrap; width: 100%; }
.prod-vignette {
  width: 68px; height: 52px; padding: 0; cursor: pointer;
  border: 1px solid var(--border); border-radius: 7px; overflow: hidden;
  background: var(--bg-2); transition: border-color .12s;
}
.prod-vignette img { width: 100%; height: 100%; object-fit: cover; display: block; }
.prod-vignette:hover { border-color: var(--slate-2); }
.prod-vignette.on { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-light); }
.prod-info { min-width: 0; }
/* En-tete de la colonne d'achat : marque et famille, nom, reference. Le nom
   figurait bien dans le bandeau sombre, mais a l'autre bout de l'ecran : la
   colonne du prix s'ouvrait sur un montant sans sujet. */
.prod-tete { margin-bottom: 16px; }
.prod-tete-kicker {
  font-size: .68rem; font-weight: 700; letter-spacing: .12em;
  text-transform: uppercase; color: var(--accent);
  margin-bottom: 6px;
}
.prod-tete-nom {
  font-size: 1.5rem; font-weight: 800; line-height: 1.2;
  letter-spacing: -.02em; color: var(--navy);
  margin: 0;
}
.prod-tete-sku {
  margin-top: 6px;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: .72rem; color: var(--slate-2);
}
/* Le prix passe sous le nom : il n'a plus a porter la taille d'un titre. */
.prod-info .prod-price { font-size: 1.35rem; }
.prod-price {
  font-size: 1.6rem; font-weight: 800;
  color: var(--navy); letter-spacing: -.02em;
}
.prod-price small {
  display: block; margin-top: 4px;
  font-size: .76rem; font-weight: 500; color: var(--slate-2);
  letter-spacing: 0;
}
.prod-block { margin-top: 22px; }
.prod-block-label {
  font-size: .68rem; font-weight: 700; letter-spacing: .14em;
  text-transform: uppercase; color: var(--slate-2); margin-bottom: 10px;
}
.prod-benefits {
  margin: 0; padding-left: 18px;
  display: grid; gap: 7px;
  font-size: .85rem; line-height: 1.55; color: var(--slate);
}
/* Configurateur : modèle × châssis × roue.
   Chaque question est une bande à elle : un liseré gauche marque le bloc, et
   une ligne survolée se détache. Des traits de séparation seuls faisaient un
   tableau gris où l'on perdait quelle pastille appartenait à quelle question. */
.opt-row {
  display: grid; grid-template-columns: 104px 1fr;
  gap: 14px; align-items: start;
  padding: 12px 14px;
  border-radius: 10px;
  transition: background .12s;
}
.opt-row + .opt-row { margin-top: 2px; }
.opt-row:nth-child(odd) { background: var(--bg); }
.opt-row:hover { background: var(--bg-2); }
.opt-label {
  font-size: .78rem; font-weight: 700; color: var(--navy); padding-top: 6px;
  overflow-wrap: anywhere;
}
.opt-values { display: flex; flex-wrap: wrap; gap: 6px; }
.opt {
  min-width: 52px;
  padding: 7px 12px; border-radius: 7px;
  border: 1px solid var(--border-2); background: var(--white);
  color: var(--navy); font-family: inherit; font-size: .78rem;
  cursor: pointer; transition: all .12s; white-space: nowrap;
}
.opt:hover:not(.off):not(.on) { border-color: var(--accent); color: var(--accent); }
.opt.on { background: var(--navy); border-color: var(--navy); color: var(--white); font-weight: 600; }
/* Combinaison inexistante au catalogue : visible mais barrée, pour que le
   client comprenne que le choix dépend du modèle. */
.opt.off { opacity: .35; cursor: not-allowed; text-decoration: line-through; }
/* Tarif client : le prix de liste reste lisible, barré, à côté du net. */
.price-was {
  margin-right: 10px;
  font-size: .62em;
  font-weight: 600;
  color: var(--slate-2);
  text-decoration: line-through;
}
.price-off {
  display: inline-block;
  margin-left: 10px;
  padding: 3px 9px;
  border-radius: 999px;
  background: var(--green-light);
  color: var(--green-2);
  font-size: .42em;
  font-weight: 700;
  vertical-align: middle;
}

/* Précision rattachée à une question : discrète, sur sa propre ligne. */
.opt-hint {
  flex-basis: 100%;
  margin-top: 4px;
  font-size: .75rem;
  line-height: 1.45;
  color: var(--slate-2);
}
.opt-state {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; flex-wrap: wrap;
  margin-top: 12px; padding: 10px 12px;
  background: var(--bg); border-radius: 8px;
  font-size: .78rem; color: var(--slate);
}
.opt-state strong { color: var(--navy); }
.opt-clear {
  background: none; border: 0; padding: 0;
  font-family: inherit; font-size: .76rem; color: var(--slate-2);
  text-decoration: underline; cursor: pointer;
}
.opt-clear:hover { color: var(--navy); }

/* Les actions ferment la colonne : un filet les detache de la derniere
   section, sinon le bouton d'achat flottait au milieu du texte. */
.prod-actions {
  margin-top: 26px; padding-top: 20px;
  border-top: 1px solid var(--border);
  display: flex; gap: 10px; flex-wrap: wrap; align-items: center;
}
.prod-actions .cat-card-cta { border: 0; cursor: pointer; font-family: inherit; padding: 11px 20px; }
.prod-actions .cat-btn-ghost { flex: 0 0 auto; padding: 11px 18px; }
.prod-note { margin-top: 14px; font-size: .76rem; line-height: 1.5; color: var(--slate-2); }

/* Onglets de bas de fiche */
/* Onglets de la fiche : bornes comme la fiche elle-meme, et larges de leur
   texte seulement. Etires sur toute la page, quatre onglets devenaient quatre
   bandeaux d'un quart d'ecran avec un mot colle a gauche : on ne voyait plus
   lequel etait ouvert. */
.ptabs {
  display: flex; gap: 1px; flex-wrap: wrap;
  max-width: 1160px; margin: 40px auto 0;
  background: var(--border);
  border: 1px solid var(--border);
  border-bottom: 0;
  border-radius: 10px 10px 0 0;
  overflow: hidden;
}
.ptab {
  flex: 0 1 auto;
  padding: 13px 22px; border: 0;
  background: var(--bg); color: var(--slate);
  font-family: inherit; font-size: .8rem; font-weight: 600;
  text-align: center; white-space: nowrap; cursor: pointer;
  transition: background .12s, color .12s;
}
.ptab:hover { background: var(--bg-2); color: var(--navy); }
/* L'onglet ouvert se detache par un liseré, pas seulement par un fond blanc
   qui se confond avec le corps juste dessous. */
.ptab.on {
  background: var(--white); color: var(--navy);
  box-shadow: inset 0 3px 0 var(--accent);
}
.ptab-body {
  max-width: 1160px; margin: 0 auto;
  padding: 28px 28px 30px;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 0 0 10px 10px;
}
/* Sous 620 px, les onglets prennent toute la largeur et s'empilent proprement
   plutot que de se couper en deux lignes inegales. */
@media (max-width: 620px) {
  .ptab { flex: 1 1 100%; text-align: left; }
}
.ptab-h { font-size: 1.05rem; font-weight: 800; color: var(--navy); letter-spacing: -.015em; }
.ptab-p { margin-top: 12px; font-size: .86rem; line-height: 1.65; color: var(--slate); max-width: 78ch; }
/* Deux colonnes maximum : au-delà, les listes deviennent un mur illisible */
.ptab-blocks {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(420px, 1fr));
  gap: 30px 40px; margin-top: 28px; max-width: 1180px;
}
.ptab-block-title {
  display: flex; align-items: center; gap: 8px;
  font-size: .7rem; font-weight: 700; letter-spacing: .12em;
  text-transform: uppercase; color: var(--accent);
  padding-bottom: 8px; border-bottom: 1px solid var(--border);
}
.ptab-block-title svg { flex-shrink: 0; }
.ptab-list {
  margin: 14px 0 0; padding: 0; list-style: none;
  display: grid; gap: 14px;
  font-size: .84rem; line-height: 1.55; color: var(--slate);
}
/* Titre en gras, explication en retrait : on scanne les titres, on ne lit le
   détail que si on s'arrête. */
.ptab-list li strong {
  display: block;
  font-size: .85rem; font-weight: 700; color: var(--navy);
}
.ptab-list li span {
  display: block; margin-top: 3px;
  font-size: .81rem; color: var(--slate);
}
.ptab-list li:not(:has(strong)) {
  padding-left: 16px; position: relative;
}
.ptab-list li:not(:has(strong))::before {
  content: ''; position: absolute; left: 2px; top: .62em;
  width: 5px; height: 5px; border-radius: 50%;
  background: var(--slate-2);
}
/* Description rédigée librement au back office : on impose la mise en page,
   pas le contenu, pour que la fiche reste cohérente quoi qu'on écrive. */
.ptab-rich { max-width: 78ch; }
/* Description repliee : on laisse voir le debut, et un degrade dit qu'il y a
   une suite au lieu de couper net sur un mot. */
.ptab-rich.replie {
  max-height: 420px; overflow: hidden;
  -webkit-mask-image: linear-gradient(to bottom, #000 74%, transparent 100%);
          mask-image: linear-gradient(to bottom, #000 74%, transparent 100%);
}
.ptab-plus {
  margin-top: 14px;
  padding: 9px 18px; border-radius: 8px;
  border: 1px solid var(--border-2); background: var(--white);
  color: var(--navy); font-family: inherit;
  font-size: .78rem; font-weight: 700;
  cursor: pointer; transition: all .12s;
}
.ptab-plus:hover { border-color: var(--accent); color: var(--accent); }
.ptab-rich h3 {
  margin-top: 26px;
  font-size: 1.02rem; font-weight: 800;
  color: var(--navy); letter-spacing: -.015em;
}
.ptab-rich h3:first-child { margin-top: 0; }
.ptab-rich h4 {
  margin-top: 22px;
  font-size: .78rem; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--accent);
}
.ptab-rich p { margin-top: 12px; font-size: .86rem; line-height: 1.65; color: var(--slate); }
.ptab-rich ul, .ptab-rich ol { margin: 12px 0 0 18px; display: grid; gap: 7px; }
.ptab-rich li { font-size: .85rem; line-height: 1.55; color: var(--slate); }
.ptab-rich li strong { color: var(--navy); }
.ptab-rich a { color: var(--accent); text-underline-offset: 2px; }
.ptab-rich blockquote {
  margin-top: 14px; padding: 10px 14px;
  border-left: 3px solid var(--border-2);
  color: var(--slate); font-size: .85rem; line-height: 1.6;
}

.ptab-specs {
  display: grid; gap: 1px; margin-top: 18px;
  background: var(--border); border: 1px solid var(--border);
  border-radius: 8px; overflow: hidden; max-width: 820px;
}
.ptab-spec {
  display: grid; grid-template-columns: 190px 1fr; gap: 16px;
  padding: 11px 14px; background: var(--white); font-size: .82rem;
}
.ptab-spec span:first-child { font-weight: 600; color: var(--navy); }
.ptab-spec span:last-child { color: var(--slate); }
.ptab-curve {
  margin-top: 4px; padding: 26px 22px;
  background: var(--bg); border: 1.5px dashed var(--border-2);
  border-radius: 10px;
  font-size: .84rem; line-height: 1.6; color: var(--slate);
}
.ptab-note { margin-top: 14px; font-size: .74rem; line-height: 1.5; color: var(--slate-2); }
.ptab-dl {
  display: inline-block; margin-top: 18px;
  padding: 12px 22px; border-radius: 8px;
  background: var(--navy); color: var(--white);
  font-size: .78rem; font-weight: 600;
  letter-spacing: .05em; text-transform: uppercase;
  text-decoration: none; transition: background .12s;
}
.ptab-dl:hover { background: var(--accent); }
@media (max-width: 900px) { .prod { grid-template-columns: 1fr; } }
.empty-illus {
  width: 88px; height: 88px;
  border-radius: 22px;
  background: linear-gradient(135deg, var(--bg-2), var(--white));
  border: 1px solid var(--border);
  display: flex; align-items: center; justify-content: center;
  color: var(--slate-2);
  margin-bottom: 16px;
  box-shadow: var(--shadow-sm);
}
.empty-title {
  font-size: 1rem; font-weight: 700;
  color: var(--navy); margin-bottom: 6px;
}
.empty-sub {
  font-size: .84rem; color: var(--slate);
  line-height: 1.6; max-width: 320px;
}

.panel-content { flex: 1; overflow-y: auto; display: none; }
.panel-content.on { display: block; }

/* Pump identified header */
.pump-id {
  padding: 12px 20px;
  background: linear-gradient(90deg, var(--green-light) 0%, #F0F9F4 100%);
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.pump-id-left { display: flex; align-items: center; gap: 10px; }
.pump-id-badge {
  width: 28px; height: 28px;
  border-radius: 50%;
  background: var(--green);
  color: var(--white);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.pump-id-info { line-height: 1.2; }
.pump-id-label {
  font-size: .66rem;
  color: var(--green-2);
  font-weight: 600;
  letter-spacing: .4px;
  text-transform: uppercase;
}
.pump-id-name { font-size: .88rem; font-weight: 700; color: var(--navy); margin-top: 1px; }
.pump-id-clear {
  width: 28px; height: 28px;
  border-radius: 6px;
  background: transparent;
  color: var(--slate);
  border: 1px solid transparent;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: all .12s;
}
.pump-id-clear:hover { color: var(--red); background: var(--white); border-color: var(--border); }

/* Exploded view */
.exploded { padding: 16px 20px 12px; border-bottom: 1px solid var(--border); }
.exploded-frame {
  position: relative;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: var(--white);
  overflow: hidden;
  /* Lock frame to the exploded PNG's aspect ratio so % marker positions
     always land on the same spot regardless of screen size. */
  aspect-ratio: 1594 / 823;
  max-height: 380px;
  width: min(100%, calc(380px * 1594 / 823));
  margin: 0 auto;
}
.exploded-frame img {
  width: 100%;
  height: 100%;
  display: block;
}
.exploded-marker {
  position: absolute;
  width: 44px; height: 44px;
  border-radius: 50%;
  border: 3px solid var(--green);
  background: rgba(46,139,87,.15);
  transform: translate(-50%, -50%);
  pointer-events: none;
  animation: pulse 1.6s ease-in-out infinite;
}
.exploded-frame { cursor: zoom-in; }
.exploded-loupe {
  position: absolute;
  width: 150px; height: 150px;
  border-radius: 50%;
  border: 3px solid var(--white);
  box-shadow: 0 6px 22px rgba(0,0,0,.28), 0 0 0 1px rgba(22,35,57,.15);
  pointer-events: none;
  transform: translate(-50%, -50%);
  display: none;
  z-index: 6;
  background-color: var(--white);
  background-repeat: no-repeat;
}
.exploded-loupe.on { display: block; }
@media (max-width: 800px) { .exploded-loupe { display: none !important; } }
@keyframes pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(46,139,87,.5); }
  50% { box-shadow: 0 0 0 10px rgba(46,139,87,0); }
}
.exploded .cap {
  font-size: .7rem;
  color: var(--slate);
  margin-top: 8px;
  text-align: center;
}

/* Grid section */
.grid-section { padding: 16px 20px 24px; }

/* ═══ BANDEAU + LISTE DE PIÈCES ═══ */
.parts-bar {
  display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
  padding: 12px 20px;
  border-bottom: 1px solid var(--border);
  background: var(--bg);
}
.parts-bar-btn {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 7px 13px; border-radius: 8px;
  border: 1px solid var(--border-2); background: var(--white);
  color: var(--slate); font-family: inherit;
  font-size: .76rem; font-weight: 600;
  cursor: pointer; transition: all .12s;
}
.parts-bar-btn:hover { border-color: var(--accent); color: var(--accent); }
.parts-bar-btn.on { background: var(--accent-light); border-color: var(--accent); color: var(--accent-2); }
.parts-bar-help { font-size: .78rem; color: var(--slate-2); }
.parts-bar-link {
  background: none; border: 0; padding: 0;
  font-family: inherit; font-size: .78rem; font-weight: 600;
  color: var(--accent); cursor: pointer;
  text-decoration: underline; text-underline-offset: 2px;
}
.parts-bar-link:hover { color: var(--accent-2); }
.parts-bar .legend { margin-left: auto; }

.parts-list { padding: 8px 20px 28px; }
.pl-group { margin-top: 18px; }
.pl-group-head {
  display: flex; align-items: center; gap: 8px;
  padding-bottom: 8px; margin-bottom: 4px;
  border-bottom: 1px solid var(--border);
  font-size: .76rem; font-weight: 700; color: var(--navy);
}
.pl-group-head svg { color: var(--slate-2); }
.pl-group-count { margin-left: auto; font-size: .72rem; font-weight: 500; color: var(--slate-2); }

.pl-row {
  display: grid; grid-template-columns: 38px 1fr auto auto;
  gap: 14px; align-items: center;
  padding: 11px 10px;
  border-bottom: 1px solid var(--border);
  cursor: pointer;
  transition: background .12s;
}
.pl-row:hover { background: var(--bg); }
.pl-row.on { background: var(--green-light); }
.pl-ref {
  display: flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; border-radius: 8px;
  background: var(--blue-light); color: var(--blue);
  border: 1.5px solid var(--blue);
  font-size: .78rem; font-weight: 800;
}
.pl-ref.wear { background: var(--wear-light); color: var(--wear-2); border-color: var(--wear); }
.pl-row.on .pl-ref { background: var(--green); border-color: var(--green); color: var(--white); }
.pl-body { min-width: 0; }
.pl-name {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  font-size: .87rem; font-weight: 600; color: var(--navy);
}
.pl-badge {
  padding: 2px 7px; border-radius: 4px;
  background: var(--blue-light); color: var(--blue);
  font-size: .62rem; font-weight: 700;
  letter-spacing: .06em; text-transform: uppercase;
}
.pl-badge.wear { background: var(--wear-light); color: var(--wear-2); }
.pl-sku {
  display: block; margin-top: 3px;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: .72rem; color: var(--slate);
}
.pl-stock { font-size: .74rem; font-weight: 600; white-space: nowrap; }
.pl-stock.ok { color: var(--green-2); }
.pl-stock.warn { color: var(--wear-2); }
.pl-stock.out { color: var(--slate-2); }
.pl-add {
  padding: 7px 14px; border-radius: 7px;
  border: 1px solid var(--border-2); background: var(--white);
  color: var(--navy); font-family: inherit;
  font-size: .72rem; font-weight: 700;
  letter-spacing: .04em; text-transform: uppercase;
  cursor: pointer; transition: all .12s; white-space: nowrap;
}
.pl-add:hover { background: var(--accent); border-color: var(--accent); color: var(--white); }
@media (max-width: 720px) {
  .pl-row { grid-template-columns: 34px 1fr auto; }
  .pl-stock { display: none; }
}

/* Fiche pièce : n'occupe de la place que si un repère est sélectionné */
.detail-panel {
  width: 360px;
  flex-shrink: 0;
  background: var(--white);
  border-left: 1px solid var(--border);
  overflow-y: auto;
  padding: 18px;
  display: none;
}
.detail-panel.on { display: block; }
.detail-placeholder {
  padding: 40px 20px;
  border: 1.5px dashed var(--border);
  border-radius: 12px;
  background: var(--bg);
  text-align: center;
  color: var(--slate-2);
  margin-top: 20px;
}
.detail-placeholder svg { margin: 0 auto 12px; color: var(--slate-2); }
.detail-placeholder-title { font-size: .9rem; font-weight: 700; color: var(--navy); margin-bottom: 6px; }
.detail-placeholder-sub { font-size: .78rem; color: var(--slate); line-height: 1.5; }

.detail-card {
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--white);
  box-shadow: var(--shadow-md);
  overflow: hidden;
}
.detail-head {
  padding: 14px 16px;
  background: linear-gradient(180deg, var(--bg), var(--white));
  border-bottom: 1px solid var(--border);
  display: flex;
  gap: 12px;
  align-items: flex-start;
}
.detail-head-info { flex: 1; min-width: 0; }
.detail-body { padding: 16px; }
.detail-body .sheet-sku-block { padding: 10px 14px; margin-bottom: 12px; }
.detail-body .sheet-desc { margin-bottom: 14px; }
.detail-body .sheet-stock { margin-bottom: 14px; }
.detail-body .sheet-qty { margin-bottom: 14px; }
.detail-body .btn-quote { width: 100%; margin-top: 4px; }

.companions {
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px dashed var(--border);
}
.companions-head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
  color: var(--accent);
}
.companions-title { font-size: .82rem; font-weight: 700; color: var(--navy); line-height: 1.2; }
.companions-sub { font-size: .68rem; color: var(--slate); margin-top: 1px; }
.companions-list { display: flex; flex-direction: column; gap: 6px; }
.companion-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 8px;
  cursor: pointer;
  font-family: inherit;
  text-align: left;
  transition: all .12s;
}
.companion-item:hover {
  background: var(--accent-light);
  border-color: var(--accent);
  transform: translateY(-1px);
}
.companion-ref {
  width: 26px; height: 26px;
  border-radius: 8px;
  background: var(--blue);
  color: var(--white);
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: .7rem;
  flex-shrink: 0;
}
.companion-ref.wear { background: var(--wear); }
.companion-body { flex: 1; min-width: 0; line-height: 1.2; }
.companion-name {
  display: block;
  font-size: .78rem;
  font-weight: 600;
  color: var(--navy);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.companion-sku {
  display: block;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: .66rem;
  color: var(--slate);
  margin-top: 1px;
}
.companion-add {
  width: 24px; height: 24px;
  border-radius: 6px;
  background: var(--white);
  border: 1px solid var(--border);
  color: var(--accent);
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 1rem;
  flex-shrink: 0;
  transition: all .12s;
}
.companion-item:hover .companion-add {
  background: var(--accent);
  color: var(--white);
  border-color: var(--accent);
}

.grid-section-legacy { padding: 16px 20px 24px; }
.section-head {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 14px;
}
.section-head h3 { font-size: .95rem; font-weight: 700; color: var(--navy); }
.legend { display: flex; gap: 14px; font-size: .68rem; color: var(--slate); font-weight: 500; }
.legend span { display: flex; align-items: center; gap: 5px; }
.legend i {
  display: inline-block;
  width: 10px; height: 10px;
  border-radius: 50%;
}
.legend .wear-dot { background: var(--wear); }
.legend .str-dot { background: var(--blue); }

.grid-block { margin-bottom: 14px; }
.grid-label {
  font-size: .74rem;
  color: var(--slate);
  font-weight: 600;
  margin-bottom: 8px;
  display: flex; align-items: center; gap: 6px;
  padding-bottom: 6px;
  border-bottom: 1px dashed var(--border);
}
.grid-label svg { color: var(--slate-2); }
.grid { display: flex; flex-wrap: wrap; gap: 8px; }

.dot-btn {
  width: 42px; height: 42px;
  border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 700;
  cursor: pointer;
  transition: all .15s;
  border: 1.5px solid var(--blue);
  background: var(--blue-light);
  color: var(--blue);
  position: relative;
}
.dot-btn::after {
  content: '';
  position: absolute;
  inset: -4px;
  border-radius: 14px;
  border: 2px solid transparent;
  transition: all .15s;
  pointer-events: none;
}
.dot-btn:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }
.dot-btn.on {
  border-color: var(--green);
  background: var(--green);
  color: var(--white);
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}
.dot-btn.on::after { border-color: var(--green-light); }
.dot-btn.wear {
  border-color: var(--wear);
  background: var(--wear-light);
  color: var(--wear-2);
}
.dot-btn.wear.on { background: var(--green); border-color: var(--green); color: var(--white); }

/* ═══ SIDE SHEET (part detail) ═══ */
.sheet-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(22,35,57,.35);
  opacity: 0;
  visibility: hidden;
  transition: all .2s;
  z-index: 40;
  backdrop-filter: blur(2px);
}
.sheet-backdrop.on { opacity: 1; visibility: visible; }
.sheet {
  position: fixed;
  top: 0; right: 0;
  height: 100vh;
  width: 420px;
  max-width: 92vw;
  background: var(--white);
  border-left: 1px solid var(--border);
  box-shadow: var(--shadow-lg);
  transform: translateX(100%);
  transition: transform .25s cubic-bezier(.4,0,.2,1);
  z-index: 41;
  display: flex; flex-direction: column;
}
.sheet.on { transform: translateX(0); }
.sheet-head {
  padding: 18px 20px;
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}
.sheet-head-left { display: flex; gap: 12px; align-items: flex-start; }
.sheet-ref {
  width: 40px; height: 40px;
  border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  font-size: .95rem; font-weight: 700;
  color: var(--white);
  background: var(--blue);
  flex-shrink: 0;
}
.sheet-ref.wear { background: var(--wear); }
.sheet-name {
  font-size: 1rem; font-weight: 700;
  color: var(--navy);
  line-height: 1.25;
}
.sheet-tag {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: .66rem;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 4px;
  margin-top: 4px;
  letter-spacing: .3px;
  text-transform: uppercase;
}
.sheet-tag.wear { background: var(--wear-light); color: var(--wear-2); }
.sheet-tag.str { background: var(--blue-light); color: var(--blue); }
.sheet-close {
  width: 32px; height: 32px;
  border-radius: 8px;
  background: transparent;
  border: 1px solid transparent;
  color: var(--slate);
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  transition: all .12s;
}
.sheet-close:hover { background: var(--bg); border-color: var(--border); color: var(--navy); }

.sheet-body {
  flex: 1;
  overflow-y: auto;
  padding: 20px;
}
.sheet-sku-block {
  padding: 14px 16px;
  background: var(--bg);
  border-radius: 10px;
  margin-bottom: 16px;
}
.sheet-sku-label {
  font-size: .64rem;
  color: var(--slate-2);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .4px;
  margin-bottom: 4px;
}
.sheet-sku {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 1rem;
  font-weight: 500;
  color: var(--navy);
  letter-spacing: -.2px;
}
.sheet-desc {
  font-size: .86rem;
  color: var(--slate);
  line-height: 1.55;
  margin-bottom: 20px;
}
.sheet-section-label {
  font-size: .68rem;
  color: var(--slate-2);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .4px;
  margin-bottom: 8px;
}
.sheet-vars {
  display: flex; flex-wrap: wrap; gap: 6px;
  margin-bottom: 20px;
}
.sheet-var {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: .72rem;
  padding: 5px 10px;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 6px;
  color: var(--navy);
}
.sheet-stock {
  padding: 12px 14px;
  border-radius: 8px;
  font-size: .82rem;
  font-weight: 600;
  margin-bottom: 20px;
  display: flex; align-items: center; gap: 8px;
}
.sheet-stock.ok { background: var(--green-light); color: var(--green-2); }
.sheet-stock.warn { background: var(--wear-light); color: var(--wear-2); }
.sheet-stock.out { background: #FDECEA; color: var(--red); }
.sheet-qty { margin-bottom: 8px; }
.qty-stepper {
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--white);
  overflow: hidden;
}
.qty-stepper button {
  width: 36px; height: 36px;
  background: var(--bg);
  color: var(--navy);
  border: none;
  font-size: 1rem; font-weight: 700;
  cursor: pointer;
  transition: background .12s;
  font-family: inherit;
}
.qty-stepper button:hover { background: var(--bg-2); }
.qty-stepper input {
  width: 56px; height: 36px;
  border: none; text-align: center;
  font-size: .9rem; font-weight: 600;
  font-family: inherit;
  color: var(--navy);
  background: var(--white);
  outline: none;
}
.qty-stepper input::-webkit-outer-spin-button,
.qty-stepper input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

.sheet-foot {
  padding: 16px 20px;
  border-top: 1px solid var(--border);
  background: var(--white);
}
.btn-quote {
  width: 100%;
  padding: 12px 18px;
  background: linear-gradient(135deg, var(--navy) 0%, var(--navy-2) 100%);
  color: var(--white);
  border: none;
  border-radius: 10px;
  font-weight: 600;
  font-size: .88rem;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center; gap: 8px;
  transition: all .15s;
  font-family: inherit;
}
.btn-quote:hover { transform: translateY(-1px); box-shadow: var(--shadow-md); }

/* L'attribut hidden doit toujours l'emporter. Une regle comme « .hdr-btn { display:flex } »
   le battait, et « Back office » et « Mon compte » s'affichaient a des visiteurs qui
   n'etaient ni administrateurs ni connectes. */
[hidden] { display: none !important; }

/* ═══ CHAT FLOTTANT (au-dessus de la boutique, coin bas droit) ═══ */
.dock {
  position: fixed;
  right: 22px; bottom: 22px;
  z-index: 30;
  width: 500px;
  max-width: calc(100vw - 32px);
  /* Replié, le dock se règle sur son contenu : une hauteur fixe rognait le
     composeur dès qu'il grandissait d'une ligne. La liste des messages est
     masquée dans cet état, elle n'entre donc pas dans le calcul. */
  height: auto;
  display: flex; flex-direction: column;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 14px;
  box-shadow: 0 18px 48px rgba(22,35,57,.18);
  overflow: hidden;
  transition: height .18s cubic-bezier(.4,0,.2,1);
}
/* Ouvert : le chat redevient un flex item de .shop, donc il pousse le contenu
   lateralement au lieu de le recouvrir. */
.dock.open {
  /* `relative` et non `static` : le dock doit servir de reference aux
     elements qu'il contient en absolu — l'historique se plaçait sinon contre
     la page et s'etalait sur toute sa largeur. `relative` reste dans le flux,
     donc le dock demeure un flex item de .shop comme voulu.

     Les decalages du dock flottant doivent etre annules : en `relative` ils
     s'appliquent encore, et le `bottom: 22px` remontait le chat de 22 px,
     glissant son en-tete sous celui de la boutique. */
  position: relative;
  inset: auto;
  width: var(--dock-w, 420px);
  max-width: none;
  height: auto;
  flex-shrink: 0;
  border: 0;
  border-left: 1px solid var(--border);
  border-radius: 0;
  box-shadow: none;
}
/* Pendant le glisser, pas de transition sinon la poignée traîne derrière la souris */
.dock.resizing { transition: none; }

.dock-resize {
  position: absolute; top: 0; left: 0; right: 0; height: 8px;
  cursor: ns-resize; display: none; z-index: 2;
}
.dock.open .dock-resize {
  display: block;
  top: 0; bottom: 0; left: 0; right: auto;
  width: 8px; height: auto;
  cursor: ew-resize;
}
.dock-resize::after {
  content: ''; position: absolute; top: 50%; left: 3px;
  width: 3px; height: 46px; margin-top: -23px;
  border-radius: 2px; background: var(--border-2);
  transition: background .12s;
}
.dock-resize:hover::after { background: var(--accent); }

.dock-head {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 14px 0;
  flex-shrink: 0;
}
.dock-brand {
  display: flex; align-items: center; gap: 7px;
  font-size: .74rem; font-weight: 700; color: var(--navy);
  letter-spacing: .3px; white-space: nowrap;
}
/* ═══ Éclat de la bulle ═══
   Replié, le chat se fond dans la page et personne ne le remarque. Un reflet
   traverse la carte toutes les neuf secondes — assez pour accrocher l'œil au
   passage, trop court et trop pâle pour déranger la lecture. Il s'arrête dès
   qu'on ouvre le chat ou qu'on survole la carte : à ce moment-là, l'attention
   est déjà acquise. */
.dock::after {
  content: '';
  position: absolute; inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background: linear-gradient(102deg,
    transparent 34%,
    rgba(198,158,109,.10) 43%,
    rgba(198,158,109,.30) 50%,
    rgba(198,158,109,.10) 57%,
    transparent 66%);
  background-size: 260% 100%;
  animation: dock-eclat 9s ease-in-out infinite;
}
/* Le cadre s'éclaircit au même instant : le reflet seul se voit mal sur blanc. */
.dock:not(.open) { animation: dock-halo 9s ease-in-out infinite; }
@keyframes dock-halo {
  0%, 70%, 100% { box-shadow: 0 18px 48px rgba(22,35,57,.18); }
  80%           { box-shadow: 0 18px 48px rgba(22,35,57,.18), 0 0 0 3px rgba(198,158,109,.18); }
}
.dock.open::after, .dock:hover::after, .dock:focus-within::after { animation: none; opacity: 0; }
.dock:hover, .dock:focus-within { animation: none; }
@keyframes dock-eclat {
  0%, 72%  { background-position: 170% 0; }
  88%, 100% { background-position: -70% 0; }
}
/* Le point vert respire au même rythme, très légèrement. */
.dock:not(.open) .dock-dot { animation: dock-pouls 9s ease-in-out infinite; }
@keyframes dock-pouls {
  0%, 70%, 100% { box-shadow: 0 0 0 3px var(--green-light); }
  80%           { box-shadow: 0 0 0 5px var(--green-light); }
}
/* Qui demande moins d'animation n'en veut pas ici non plus. */
@media (prefers-reduced-motion: reduce) {
  .dock::after { animation: none; opacity: 0; }
  .dock:not(.open) .dock-dot, .dock:not(.open) { animation: none; }
}

.dock-dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--green);
  box-shadow: 0 0 0 3px var(--green-light);
}
.dock-peek {
  flex: 1; min-width: 0;
  font-size: .8rem; color: var(--slate);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.dock.open .dock-peek { visibility: hidden; }
/* Outils de la barre du chat : nouvelle discussion, historique. Replie, le
   dock n'a la place que pour son accroche — ils n'apparaissent qu'ouvert. */
/* Confirmation maison : confirm() bloque la page et ne se laisse pas habiller. */
.confirm-fond {
  position: fixed; inset: 0; z-index: 60;
  background: rgba(10, 17, 28, .38);
  display: flex; align-items: center; justify-content: center;
  padding: 20px;
}
.confirm-boite {
  width: 360px; max-width: 100%;
  background: var(--white); border-radius: 14px;
  padding: 22px; box-shadow: var(--shadow-lg);
}
.confirm-boite p { font-size: .9rem; line-height: 1.5; color: var(--navy); margin: 0 0 18px; }
.confirm-actions { display: flex; gap: 8px; justify-content: flex-end; }
.confirm-actions button {
  padding: 9px 16px; border-radius: 8px;
  font-family: inherit; font-size: .84rem; font-weight: 600; cursor: pointer;
}
.confirm-actions [data-non] { border: 1px solid var(--border); background: var(--white); color: var(--navy); }
.confirm-actions [data-oui] { border: 0; background: var(--navy); color: var(--white); }

.dock-outil {
  width: 28px; height: 28px; border-radius: 7px;
  border: 1px solid var(--border); background: var(--white);
  color: var(--slate); cursor: pointer;
  display: none; align-items: center; justify-content: center;
  flex-shrink: 0; padding: 0; transition: all .12s;
}
.dock.open .dock-outil { display: flex; }
.dock-outil:hover { border-color: var(--accent); color: var(--accent); }

/* Historique : recouvre le fil plutot que de le pousser, comme un tiroir. */
.histo {
  position: absolute; inset: 44px 0 0;
  /* Replie, le dock est en `fixed` : l'historique tient alors dans sa largeur
     a lui. Ouvert, il est en `relative`, meme resultat. Dans les deux cas on
     reste dans le chat, jamais en travers de la page. */
  z-index: 3;
  background: var(--white);
  display: flex; flex-direction: column;
  border-top: 1px solid var(--border);
}
.histo[hidden] { display: none; }
.histo-tete {
  display: flex; align-items: center; gap: 10px;
  padding: 11px 14px; border-bottom: 1px solid var(--border);
  font-size: .78rem; font-weight: 700; color: var(--navy);
}
.histo-tete span { flex: 1; }
.btn-lien {
  background: none; border: 0; padding: 0;
  color: var(--accent); font-family: inherit; font-size: .78rem; font-weight: 600;
  cursor: pointer; text-decoration: underline;
}
.histo-liste { flex: 1; min-height: 0; overflow-y: auto; padding: 8px; }
.histo-item {
  display: block; width: 100%; text-align: left;
  padding: 10px 12px; margin-bottom: 4px;
  border: 1px solid var(--border); border-radius: 9px;
  background: var(--white); cursor: pointer;
  font-family: inherit; transition: all .12s;
}
.histo-item:hover { border-color: var(--accent); background: var(--accent-light); }
.histo-item.on { border-color: var(--accent); }
.histo-titre {
  font-size: .82rem; color: var(--navy); line-height: 1.4;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.histo-date { margin-top: 4px; font-size: .7rem; color: var(--slate-2); }
.histo-vide { padding: 30px 16px; text-align: center; font-size: .82rem; color: var(--slate-2); line-height: 1.5; }

.dock-toggle {
  margin-left: auto;
  width: 28px; height: 28px; border-radius: 7px;
  border: 1px solid var(--border); background: var(--white);
  color: var(--slate); cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0; transition: all .12s;
}
.dock-toggle:hover { border-color: var(--slate-2); color: var(--navy); }

/* Fermer l'assistant tout a fait : le chevron replie, il ne ferme pas, et rien ne
   disait qu'on pouvait s'en passer. La croix le range ; un petit lanceur le rappelle. */
.dock-fermer {
  width: 28px; height: 28px; border-radius: 7px; margin-left: 6px;
  border: 1px solid var(--border); background: var(--white);
  color: var(--slate); cursor: pointer; padding: 0;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0; transition: all .12s;
}
.dock-fermer:hover { border-color: var(--red); color: var(--red); }
.dock.masque { display: none; }
.dock-lanceur {
  position: fixed; right: 22px; bottom: 22px; z-index: 30;
  display: inline-flex; align-items: center; gap: 8px;
  padding: 10px 16px; border-radius: 999px; border: 0;
  background: var(--navy); color: #fff; cursor: pointer;
  font: 600 .84rem/1 inherit; font-family: inherit;
  box-shadow: 0 10px 28px rgba(22,35,57,.28);
}
.dock-lanceur:hover { transform: translateY(-1px); }
.dock-lanceur .dock-dot { flex-shrink: 0; }

.cat-section { margin: 22px 0 10px; font-size: 1rem; color: var(--navy); }
.cat-section:first-child { margin-top: 0; }
.dock-toggle svg { transition: transform .18s; }
.dock.open .dock-toggle svg { transform: rotate(180deg); }

.dock .msgs {
  flex: 1; min-height: 0;
  overflow-y: auto;
  padding: 12px 14px 2px;
  display: none;
}
.dock.open .msgs { display: block; }
.dock .m { max-width: 92%; }
.dock .welcome { padding: 6px 8px 10px; }
.dock .welcome-icon { width: 44px; height: 44px; margin-bottom: 10px; }
.dock .welcome-sub { max-width: 560px; margin-left: auto; margin-right: auto; }
.dock .chips { flex-direction: row; justify-content: center; }
.dock .input-bar { border-top: 0; padding: 6px 14px 10px; }
/* Floating quote FAB */
.quote-summary {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 12px 16px;
  background: linear-gradient(135deg, var(--navy) 0%, var(--navy-2) 100%);
  color: var(--white);
  border: none;
  border-radius: 12px;
  cursor: pointer;
  font-family: inherit;
  font-size: .88rem;
  font-weight: 600;
  box-shadow: 0 6px 18px rgba(22,35,57,.18);
  margin-bottom: 16px;
  transition: all .2s;
  animation: fab-in .3s cubic-bezier(.4,0,.2,1);
}
.quote-summary:hover { transform: translateY(-1px); box-shadow: 0 8px 22px rgba(22,35,57,.25); }
.quote-summary span:nth-child(2) { flex: 1; text-align: left; }
.quote-summary-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 22px;
  height: 22px;
  padding: 0 6px;
  background: var(--accent);
  color: var(--white);
  border-radius: 999px;
  font-size: .74rem;
  font-weight: 700;
}
@keyframes fab-in {
  from { transform: translateY(20px) scale(.9); opacity: 0; }
  to   { transform: translateY(0) scale(1);    opacity: 1; }
}

/* Quote sheet items */
.quote-empty { padding: 20px; }
.quote-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 10px;
  margin-bottom: 10px;
}
.quote-item-ref {
  width: 32px; height: 32px;
  border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  font-size: .78rem; font-weight: 700;
  color: var(--white);
  background: var(--blue);
  flex-shrink: 0;
}
.quote-item-ref.wear { background: var(--wear); }
.quote-item-body { flex: 1; min-width: 0; line-height: 1.3; }
.quote-item-name { font-size: .86rem; font-weight: 600; color: var(--navy); margin-bottom: 2px; }
.quote-item-sku {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: .7rem;
  color: var(--slate);
}
.quote-item-qty {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 6px;
  font-size: .72rem;
  color: var(--slate-2);
  font-weight: 500;
}
.quote-item-qty strong { color: var(--navy); font-weight: 700; font-size: .8rem; }
/* Photo d'une pièce, quand la fiche en porte une. */
.sheet-photo {
  margin-bottom: 14px; border: 1px solid var(--border); border-radius: 10px;
  overflow: hidden; background: var(--bg-2); aspect-ratio: 4 / 3;
}
.sheet-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* Une liste a besoin de sa marge : collée au bord, on ne voit plus les puces. */
.sheet-desc ul, .sheet-desc ol { padding-left: 1.3em; margin: 6px 0; }
.sheet-desc li { margin-bottom: 3px; }

/* Quantité à gauche, montant de la ligne à droite : on lit ce qu'on prend et
   ce que ça coûte sur la même ligne, sans chercher. */
.quote-item-line {
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px; margin-top: 8px;
}
.quote-item-price { font-size: .84rem; font-weight: 700; color: var(--navy); white-space: nowrap; }
.quote-item-price.muted { font-size: .74rem; font-weight: 500; color: var(--slate-2); }

.quote-total {
  margin-top: 14px; padding: 12px 14px;
  border: 1px solid var(--border); border-radius: 10px; background: var(--bg);
}
.quote-total-row {
  display: flex; align-items: baseline; justify-content: space-between; gap: 10px;
  font-size: .82rem; color: var(--slate);
}
.quote-total-row strong { font-size: 1.05rem; font-weight: 800; color: var(--navy); }
.quote-total-note { margin-top: 6px; font-size: .7rem; line-height: 1.5; color: var(--slate-2); }

.quote-item-qty-row {
  display: inline-flex; align-items: center; gap: 4px;
  background: var(--bg); border: 1px solid var(--border); border-radius: 8px;
  padding: 2px;
}
.q-step {
  width: 26px; height: 26px;
  background: transparent; border: 0;
  color: var(--navy); font-size: 1.05rem; font-weight: 600;
  cursor: pointer; border-radius: 6px;
  display: flex; align-items: center; justify-content: center;
  transition: background .12s;
  line-height: 1;
}
.q-step:hover { background: var(--bg-2); }
.q-step-val {
  min-width: 24px; text-align: center;
  font-size: .82rem; font-weight: 700; color: var(--navy);
}
.quote-item-remove {
  width: 28px; height: 28px;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 6px;
  color: var(--slate-2);
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: all .12s;
  flex-shrink: 0;
}
.quote-item-remove:hover { color: var(--red); border-color: var(--red); background: #FDECEA; }

@media (max-width: 1100px) {
  .hdr { flex-wrap: wrap; row-gap: 8px; }
  .hdr-search-wrap { order: 10; flex-basis: 100%; max-width: none; }
  .hdr-btn { display: none; }
  .sheet { width: 100%; }
  /* La fiche pièce passe sous la boutique plutôt qu'à côté */
  .shop { flex-direction: column; }
  .detail-panel { width: 100%; border-left: none; border-top: 1px solid var(--border); }
  .dock { right: 12px; left: 12px; bottom: 12px; width: auto; max-width: none; }
  /* .shop passe en colonne : le chat ouvert s'empile sous la boutique */
  .dock.open { width: auto; height: 50vh; border-left: 0; border-top: 1px solid var(--border); }
}

/* ═══ Mode embarqué ═══
   Le widget d'un site tiers ouvre une conversation, pas une boutique : la
   bulle flottante ne doit pas déployer tout le catalogue dans une fenêtre de
   400 pixels. L'en-tête et la boutique disparaissent, le chat occupe le cadre.
   Le devis reste accessible, il vit hors de la boutique. */
html.embed body { background: var(--white); }
html.embed .hdr,
html.embed #empty,
html.embed #content,
html.embed #detailPanel { display: none !important; }
html.embed .shop { display: block; height: 100vh; }
html.embed .dock {
  position: static;
  width: 100%; max-width: none; height: 100vh;
  border: 0; border-radius: 0; box-shadow: none;
  animation: none;
}
html.embed .dock::after { display: none; }
html.embed .dock .msgs { display: block; }
html.embed .dock-toggle { display: none; }
/* .dock.open .dock-resize est plus specifique : sans ce selecteur, la poignee
   de redimensionnement restait visible dans le widget, ou il n y a rien a
   redimensionner. */
html.embed .dock .dock-resize,
html.embed .dock.open .dock-resize { display: none; }
.en-embed { display: none; }
html.embed .hors-embed { display: none; }
html.embed .en-embed { display: inline; }

/* Le rappel du raccourci n'a pas sa place dans un cadre étroit : tronqué au
   milieu d'un mot, il ne renseigne plus et encombre. La barre garde alors ses
   deux boutons, qui suffisent. */
@media (max-width: 560px) {
  .input-hint { display: none; }
}

/* ═══ Confirmation d'ajout au panier ═══
   Cliquer « Ajouter » ne montrait rien : le seul retour partait dans la
   conversation, repliee la plupart du temps. Trois signaux a portee de
   regard — le bouton, une etiquette, et le panier qui bat. */
.pl-add.ajoute {
  background: var(--green); border-color: var(--green); color: var(--white);
}
.ajout-dit {
  position: fixed; top: 64px; right: 22px; z-index: 50;
  max-width: 320px;
  padding: 11px 16px; border-radius: 10px;
  background: var(--navy); color: var(--white);
  font-size: .82rem; font-weight: 600; line-height: 1.4;
  box-shadow: 0 10px 30px rgba(22,35,57,.26);
  opacity: 0; transform: translateY(-6px);
  pointer-events: none;
  transition: opacity .16s, transform .16s;
}
.ajout-dit.on { opacity: 1; transform: translateY(0); }
/* Un battement court : assez pour accrocher l'oeil, trop bref pour agacer. */
.hdr-quote-count.bat { animation: compteur-bat .45s ease-out; }
@keyframes compteur-bat {
  0%   { transform: scale(1); }
  40%  { transform: scale(1.45); }
  100% { transform: scale(1); }
}
@media (prefers-reduced-motion: reduce) {
  .hdr-quote-count.bat { animation: none; }
  .ajout-dit { transition: none; }
}

/* Note de la boutique dans le fil : ni le client, ni l'assistant, mais un
   constat — un ajout au panier, une demande partie. Elle prenait l'apparence
   d'un message du client, qui semblait donc dire « Ajoute au panier : 1 x
   Gasket ». Centree et discrete, elle ne se confond plus avec personne. */
.m-note {
  margin: 10px auto;
  padding: 5px 14px;
  max-width: 86%;
  border-radius: 999px;
  background: var(--bg-2);
  color: var(--slate);
  font-size: .74rem;
  font-weight: 600;
  text-align: center;
  width: fit-content;
}

/* ═══ Suite d'une recommandation ═══
   Deux boutons et une phrase, poses sous la reponse. Ce n'etait pas une carte
   encadree : un bord bleu et une ombre en faisaient un panneau pose sur la
   conversation, alors que c'est la meme voix qui continue. Aligne sur la bulle
   de l'assistant — 26 px d'avatar plus 8 px d'ecart. */
.reco {
  margin: 2px 0 14px 34px;
  max-width: calc(90% - 34px);
}
.reco-qui {
  font-size: .68rem;
  font-weight: 600;
  letter-spacing: .2px;
  color: var(--slate-2);
  margin-bottom: 4px;
}
.reco-dit { font-size: .82rem; line-height: 1.5; color: var(--slate); }
.reco-dit strong { color: var(--navy); font-weight: 700; }
.reco-actions { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 9px; }
.reco-btn {
  padding: 7px 13px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--white);
  color: var(--navy);
  font-family: inherit;
  font-size: .79rem;
  font-weight: 600;
  cursor: pointer;
}
.reco-btn:hover { border-color: var(--accent); color: var(--accent-2); }
.reco-oui { background: var(--navy); border-color: var(--navy); color: var(--white); }
.reco-oui:hover { background: var(--accent-2); border-color: var(--accent-2); color: var(--white); }
.reco-pied { margin-top: 7px; font-size: .71rem; color: var(--slate-2); }

/* Une fois l'une des deux portes prise, le bloc reste lisible mais cesse
   d'appeler a l'action : il appartient a l'historique. */
.reco-fait { opacity: .5; }
.reco-fait .reco-actions { display: none; }

.reco-champ { display: block; margin-top: 8px; max-width: 280px; }
.reco-champ span {
  display: block;
  font-size: .71rem;
  font-weight: 600;
  color: var(--slate);
  margin-bottom: 3px;
}
.reco-champ input {
  width: 100%;
  padding: 7px 10px;
  border: 1px solid var(--border);
  border-radius: 7px;
  font-family: inherit;
  font-size: .83rem;
}

/* ── Connexion / création de compte ── */
.lg-lbl{display:block;font-size:.72rem;font-weight:600;color:var(--slate);margin:0 0 5px;text-transform:uppercase;letter-spacing:.3px}
.lg-in{width:100%;padding:10px 12px;border:1px solid var(--border);border-radius:8px;font-family:inherit;font-size:.88rem;margin-bottom:12px;background:var(--white);color:inherit}
.lg-in:focus{outline:2px solid var(--accent);outline-offset:1px}
.lg-err{color:var(--red);font-size:.8rem;margin-top:-4px;line-height:1.4}
.lg-lien{display:block;margin-top:12px;text-align:center;font-size:.8rem;color:var(--accent);text-decoration:none}
.lg-bas{margin-top:14px;padding-top:12px;border-top:1px solid var(--border);text-align:center;font-size:.8rem;color:var(--slate)}
.lg-lien-btn{background:none;border:0;padding:0;font:inherit;font-weight:600;color:var(--accent);cursor:pointer;text-decoration:underline}

.compte-avis{margin:0 0 16px;padding:12px 16px;border:1px solid #e8c36a;background:#fff8e6;color:#5c4400;border-radius:10px;font-size:.88rem;line-height:1.5}
.compte-avis.ok{border-color:#9fd3b0;background:#effaf2;color:#17562c}
.compte-avis .btn-lien{margin-left:4px}