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

/* -------- PRIX -------- */
.product-prices {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 6px;
  flex-wrap: wrap;
}

.product-old-price {
  color: #999;
  text-decoration: line-through;
  font-size: 12px;
}

.product-new-price {
  color: var(--couleur-principale);
  font-weight: 700;
  font-size: 15px;
}

/* -------- BOUTON PANIER -------- */
.product-cart-btn {
  border: none;
  background: var(--couleur-principale);
  color: #fff;
  border-radius: 16px;
  padding: 4px 10px;
  font-size: 12px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  transition: background .15s;
}

.product-price-wrapper {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 6px;
}

.product-cart-btn:hover {
  background: var(--couleur-survol);
}

/* -------- PAGE WRAPPER -------- */
.page {
  max-width: 1100px;
  margin: 0 auto;
  padding: 10px 16px 30px;
}

/* -------- H1 / H2 -------- */
.page h1 {
  font-size: 1.5rem;
  font-weight: 700;
  color: #1a1a1a;
  margin: 12px 0 4px;
  line-height: 1.3;
}

.page h2.page-subtitle {
  font-size: 1rem;
  font-weight: 400;
  color: #555;
  margin-bottom: 16px;
}

/* -------- INTRO MACHINE -------- */
.intro {
  display: grid;
  grid-template-columns: auto 1fr;   /* image à gauche, specs à droite */
  gap: 20px;
  align-items: center;
  background: #fafafa;
  border: 1px solid #e8e8e8;
  border-left: 4px solid var(--couleur-principale);
  border-radius: 4px;
  padding: 16px 20px;
  margin-bottom: 18px;
}

/* Quand pas d'image : une seule colonne */
.intro:not(:has(.intro-img)) {
  grid-template-columns: 1fr;
}

.intro-specs p {
  margin-bottom: 6px;
  font-size: 14px;
  color: #333;
  line-height: 1.5;
}

.intro-specs p strong {
  color: #1a1a1a;
}

.intro-img {
  text-align: center;
  flex-shrink: 0;
}

.intro-img img {
  max-width: 140px;
  max-height: 140px;
  object-fit: contain;
  border-radius: 6px;
  border: 1px solid #e0e0e0;
  background: #fff;
  padding: 8px;
  display: block;
}

/* -------- REMARQUES -------- */
.remarque-box {
  background: color-mix(in srgb, var(--couleur-principale) 8%, #fff);
  border-left: 4px solid var(--couleur-principale);
  border-radius: 4px;
  padding: 12px 16px;
  margin-bottom: 14px;
  font-size: 14px;
  color: #333;
  line-height: 1.6;
}

/* -------- SECTION PROJECTILE -------- */
.section-projectile {
  margin-bottom: 30px;
}

.section-projectile h2 {
  font-size: 1.05rem;
  font-weight: 700;
  color: #fff;
  background: var(--couleur-principale);
  padding: 8px 14px;
  border-radius: 4px 4px 0 0;
  margin-bottom: 0;
}

.section-projectile .section-body {
  border: 1px solid color-mix(in srgb, var(--couleur-principale) 30%, #fff);
  border-top: none;
  border-radius: 0 0 4px 4px;
  padding: 14px;
}

.section-application {
  font-size: 13px;
  color: #555;
  margin-bottom: 14px;
  line-height: 1.5;
}

.separator {
  height: 1px;
  background: #eee;
  margin: 20px 0;
}

/* -------- FILTRES LONGUEUR + MATIÈRE -------- */
.projectile-filters {
  padding: 10px 14px;
  margin-bottom: 14px;
  background: color-mix(in srgb, var(--couleur-principale) 5%, #fff);
  border: 1px dashed color-mix(in srgb, var(--couleur-principale) 40%, #fff);
  border-radius: 4px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.projectile-filter-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}

.projectile-filter-label {
  font-weight: 600;
  font-size: 13px;
  color: #333;
  white-space: nowrap;
  min-width: 80px;
}

.projectile-filter-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

/* Badge matière sur la carte produit */
.matiere-badge {
  display: inline-block;
  font-size: 10px;
  font-weight: 600;
  padding: 1px 6px;
  border-radius: 8px;
  background: color-mix(in srgb, var(--couleur-principale) 12%, #fff);
  color: var(--couleur-principale);
  border: 1px solid color-mix(in srgb, var(--couleur-principale) 30%, #fff);
  vertical-align: middle;
  margin-left: 4px;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.projectile-aucun-resultat {
  padding: 14px;
  text-align: center;
  color: #888;
  font-style: italic;
  font-size: 13px;
}

/* -------- FILTRES + PANIER -------- */
.filters-cart{
  display:grid;
  grid-template-columns:2fr 1fr;
  gap:30px;
  align-items:flex-start;
  margin-bottom:20px;
}

.filters{
  display:flex;
  flex-direction:column;
  gap:10px;
}

.filter-row{
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:8px;
}

.filter-label{
  width:130px;
  font-weight:600;
  font-size:13px;
}

.filter-buttons{
  display:flex;
  flex-wrap:wrap;
  gap:6px;
}

.filter-btn{
  padding:5px 14px;
  border-radius:18px;
  border:1px solid #ccc;
  background:#fff;
  color:#333;
  cursor:pointer;
  font-size:13px;
  transition:background .15s,color .15s,border-color .15s;
}

.filter-btn.active{
  background: var(--couleur-principale);
  color:#fff;
  border-color: var(--couleur-principale);
}

.filter-btn:not(.active):hover{
  border-color: var(--couleur-principale);
  color: var(--couleur-principale);
}

/* Bloc panier */
.cart-box{
  background: color-mix(in srgb, var(--couleur-principale) 8%, #fff);
  border: 1px solid var(--couleur-principale);
  border-radius: 6px;
  padding: 18px;
  text-align: center;
}

.cart-box-title{font-weight:700;margin-bottom:10px;font-size:14px;}
.cart-total{font-size:26px;font-weight:700;margin-bottom:12px;color:var(--couleur-principale);}

.cart-btn{
  padding:8px 26px;
  border-radius:20px;
  border:none;
  background: var(--couleur-principale);
  color:#fff;
  cursor:pointer;
  font-size:14px;
  transition:background .15s;
}
.cart-btn:hover{ background: var(--couleur-survol); }

/* -------- GRILLE PRODUITS -------- */
.products{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:14px;
}

/* -------- CARTE PRODUIT -------- */
.product{
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px;
  border: 1px solid #eee;
  border-radius: 6px;
  background: #fff;
  transition: box-shadow .2s, transform .15s;
  font-size:13px;
}

.product:hover {
  box-shadow: 0 4px 14px rgba(0,0,0,.1);
  transform: translateY(-2px);
  border-color: color-mix(in srgb, var(--couleur-principale) 40%, #fff);
}

.product-image {
  flex-shrink: 0;
}

.product-image img {
  width: 80px;
  height: 80px;
  object-fit: contain;
  display: block;
  border-radius: 4px;
  border: 1px solid #f0f0f0;
  background: #fafafa;
  padding: 4px;
  cursor: zoom-in;
}

/* Placeholder quand l'image est absente —
   appliqué sur le div.product-image via JS (onerror) */
.product-image.product-img-placeholder {
  width: 80px;
  height: 80px;
  border-radius: 4px;
  border: 1px dashed #ddd;
  background: #f7f7f7;
  display: flex;
  align-items: center;
  justify-content: center;
}
.product-image.product-img-placeholder::after {
  content: '';
  display: block;
  width: 36px;
  height: 36px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ccc' stroke-width='1.5'%3E%3Crect x='3' y='3' width='18' height='18' rx='2'/%3E%3Ccircle cx='8.5' cy='8.5' r='1.5'/%3E%3Cpath d='M21 15l-5-5L5 21'/%3E%3C/svg%3E") center/contain no-repeat;
}

.product-info {
  flex: 1;
  min-width: 0;
}

.product-title{
  font-weight: 600;
  margin-bottom: 3px;
  font-size: 13px;
  color: #1a1a1a;
  line-height: 1.4;
}

.product-sub{
  color: #666;
  font-size: 12px;
  margin-bottom: 4px;
}

/* -------- STOCK BADGE -------- */
.stock-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  font-weight: 600;
  padding: 2px 7px;
  border-radius: 10px;
}

.stock-badge.en-stock {
  background: #e6f4ea;
  color: #1e7e34;
}

.stock-badge.en-rupture {
  background: #fce8e8;
  color: #c0392b;
}

.stock-badge::before {
  content: '';
  display: inline-block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: currentColor;
}

/* -------- CONTROLES QTE -------- */
.qte-controls {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-top: 4px;
}

.ligne_projectile_bt_panier img {
  vertical-align: middle;
  opacity: .8;
  transition: opacity .15s;
}
.ligne_projectile_bt_panier:hover img {
  opacity: 1;
}

.ligne_projectile_qte {
  font-size: 15px;
  font-weight: 700;
  padding: 0 6px;
  min-width: 24px;
  text-align: center;
  color: #1a1a1a;
}

/* -------- RESPONSIVE -------- */
@media (max-width:900px){
  .intro{ grid-template-columns:1fr; text-align:center; }
  .filters-cart{grid-template-columns:1fr;}
  .filter-label{width:auto;}
  .products{grid-template-columns:repeat(2,minmax(0,1fr));}
}
@media (max-width:600px){
  .products{grid-template-columns:1fr;}
  .page h1 { font-size: 1.2rem; }
}

/* -------- ZOOM -------- */
.zoomContainer {
  z-index:9999;
}
</style>
