/* Vignette diapo DEV - styles visuels independants de Bootstrap.
   Les classes historiques JS sont conservees dans le PHP uniquement. */
.pro-diap-item,.pro-diap-item *{box-sizing:border-box}
.pro-diap-item{min-width:0;display:flex;align-items:stretch}
.pro-diap-card{--pd-green:#087d28;--pd-red:#c51622;--pd-muted:#737780;font-family:Arial,Helvetica,sans-serif;width:100%;min-width:0;background:#fff;color:#181818;border:1px solid #dedfe2;border-radius:15px;box-shadow:0 2px 7px rgba(0,0,0,.055);padding:14px;display:flex;flex-direction:column}
.pro-diap-top{display:flex;justify-content:space-between;align-items:flex-start;min-height:38px;gap:6px}
.pro-diap-corners{display:flex;align-items:center;gap:5px;min-width:0;flex-wrap:wrap}
.pro-diap-corner{display:flex;align-items:center;min-height:30px}
.pro-diap-corner-link{display:block;text-decoration:none}
.pro-diap-discount{font-size:12px;font-weight:700;padding:5px;border-radius:5px;border:1px solid #ddd;white-space:nowrap}
.pro-diap-discount-desto{background:#ffc107;color:#111}
.pro-diap-favorites{flex:0 0 38px}
.pro-diap-heart{width:38px;height:38px;border:1px solid #e1e1e1;border-radius:10px;background:#fff;display:grid;place-items:center;padding:6px;cursor:pointer}
.pro-diap-heart-img{display:block;max-width:100%;max-height:25px;object-fit:contain}
.pro-diap-photo-wrap{height:180px;width:100%;display:flex;align-items:center;justify-content:center;position:relative;margin:2px 0 9px;min-width:0}
.pro-diap-photo-link{display:flex;align-items:center;justify-content:center;width:100%;height:100%;min-width:0}
.pro-diap-photo{display:block;width:100%;height:100%;max-width:100%;object-fit:contain}
.pro-diap-category{position:absolute;bottom:4px;right:2px;width:46px;height:46px;object-fit:contain}
.pro-diap-info{display:flex;flex-direction:column;min-width:0}
.pro-diap-name{font-size:15px;line-height:1.28;font-weight:700;margin:0 0 7px;min-height:77px;letter-spacing:0;overflow-wrap:break-word}
/* Neutralise les regles globales appliquees aux liens de produits. */
.pro-diap-card .pro-diap-name .pro-diap-name-link,
.pro-diap-card .pro-diap-name .pro-diap-name-link:link,
.pro-diap-card .pro-diap-name .pro-diap-name-link:visited,
.pro-diap-card .pro-diap-name .pro-diap-name-link:hover,
.pro-diap-card .pro-diap-name .pro-diap-name-link:focus,
.pro-diap-card .pro-diap-name .pro-diap-name-link:active{
  display:inline;
  font:inherit;
  font-weight:700;
  line-height:inherit;
  color:#181818 !important;
  background:transparent !important;
  background-color:transparent !important;
  background-image:none !important;
  box-shadow:none !important;
  text-shadow:none !important;
  text-decoration:none !important;
  padding:0 !important;
  border:0 !important;
  border-radius:0 !important;
  -webkit-box-decoration-break:slice;
  box-decoration-break:slice;
}
.pro-diap-card .pro-diap-name .pro-diap-name-link::before,
.pro-diap-card .pro-diap-name .pro-diap-name-link::after{content:none !important;display:none !important}
.pro-diap-card .pro-diap-name .pro-diap-name-link *{background:transparent !important;color:inherit !important}

.pro-diap-ref{font-size:13px;color:var(--pd-muted);margin:0 0 9px;min-height:17px}
.pro-diap-prices{display:flex;flex-wrap:wrap;align-items:baseline;gap:5px 8px;margin:0 0 13px;min-height:64px;align-content:flex-start}
.pro-diap-prices .panier_prix_vente{font-size:25px;line-height:1.1;font-weight:800;letter-spacing:-.035em;color:var(--pd-red)}
.pro-diap-prices .panier_prix_vente b{font-weight:800}
.pro-diap-prices .panier_prix_vente:has(s){font-size:13px;color:#777;font-weight:400;letter-spacing:normal}
.pro-diap-prices .panier_prix_conseille{font-size:13px;color:#777;letter-spacing:normal}
.pro-diap-prices s{font-weight:400}
.pro-diap-bottom{margin-top:auto;display:flex;flex-direction:column;min-width:0}
.pro-diap-admin-stock{text-align:center;font-size:12px;margin-bottom:4px}
.pro-diap-status{display:flex;align-items:center;justify-content:center;gap:8px;border-radius:9px;padding:10px 8px;min-height:43px;text-align:center;font-size:12px;line-height:1.25;font-weight:700}
.pro-diap-status-icon{flex:0 0 auto;max-width:20px;max-height:20px;object-fit:contain}
.pro-diap-status-text{min-width:0}
.pro-diap-extra-status{min-height:0;text-align:center;font-size:12px;line-height:1.3}
.pro-diap-extra-status:not(:empty){margin-top:5px}
.pro-diap-extra-status .div_info_dernier{font-size:12px!important;margin:0!important}
.pro-diap-footer{margin-top:12px;min-height:43px;display:flex;flex-direction:column;justify-content:flex-end}
.pro-diap-actions{display:flex;align-items:stretch;gap:9px;width:100%}
.pro-diap-qty{width:68px;flex:0 0 68px;min-width:0;border:1px solid #d8d8d8;border-radius:8px;background:#fff;color:#111;padding:0 9px;font-size:15px;min-height:43px}
.pro-diap-add{flex:1;min-width:0;min-height:43px;display:flex;justify-content:center;align-items:center;gap:8px;border:0;border-radius:8px;background:var(--pd-green);color:#fff;font-size:14px;font-weight:700;padding:9px 10px;cursor:pointer}
.pro-diap-add:hover{filter:brightness(.95)}
.pro-diap-cart-icon{width:20px;height:20px;flex:none}
.pro-diap-alt-action{width:100%;background:#cff4fc;color:#111}
.pro-diap-sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
@media(max-width:650px){.pro-diap-card{padding:10px}.pro-diap-photo-wrap{height:150px}.pro-diap-name{font-size:14px;min-height:72px}.pro-diap-prices .panier_prix_vente{font-size:21px}.pro-diap-status{font-size:11px}.pro-diap-qty{width:56px;flex-basis:56px}}

/* V4 - Zone tarifaire : prix actuel suivi des anciens prix barres.
   Les montants restent lisibles meme avec trois prix sur une carte etroite. */
.pro-diap-prices > span { display:inline-block; max-width:100%; white-space:nowrap; }
.pro-diap-prices .panier_prix_vente:has(s),
.pro-diap-prices .panier_prix_conseille { flex:0 0 auto; }
/* Le titre reserve quatre lignes dans les cartes de largeur catalogue.
   Un titre plus long peut toujours s'etendre sans etre tronque. */
.pro-diap-name { overflow:visible; }
@media (max-width:650px) {
  .pro-diap-prices { min-height:59px; }
}

/* V5 : version compacte, sans changement de logique PHP ni des hooks JS.
   Les titres restent complets ; les noms exceptionnellement longs peuvent
   augmenter la hauteur de leur carte. */
.pro-diap-card { padding:10px 11px; border-radius:13px; }
.pro-diap-top { min-height:33px; }
.pro-diap-corner { min-height:27px; }
.pro-diap-favorites { flex-basis:34px; }
.pro-diap-heart { width:34px; height:34px; padding:5px; border-radius:9px; }
.pro-diap-heart-img { max-height:23px; }
.pro-diap-photo-wrap { height:150px; margin:0 0 5px; }
.pro-diap-category { width:40px; height:40px; bottom:2px; }
.pro-diap-name { font-size:14px; line-height:1.22; min-height:52px; margin:0 0 4px; }
.pro-diap-ref { font-size:12px; min-height:15px; margin:0 0 6px; }
.pro-diap-prices { min-height:42px; margin:0 0 5px; gap:3px 6px; }
.pro-diap-prices .panier_prix_vente { font-size:22px; line-height:1.12; }
.pro-diap-prices .panier_prix_vente:has(s),
.pro-diap-prices .panier_prix_conseille { font-size:11px; }
.pro-diap-status { min-height:38px; padding:7px 6px; gap:6px; font-size:11px; line-height:1.2; border-radius:8px; }
.pro-diap-status-icon { max-width:18px; max-height:18px; }
.pro-diap-extra-status { font-size:11px; line-height:1.2; }
.pro-diap-extra-status:not(:empty) { margin-top:3px; }
.pro-diap-extra-status .div_info_dernier { font-size:11px !important; }
.pro-diap-footer { margin-top:7px; min-height:39px; }
.pro-diap-actions { gap:7px; }
.pro-diap-qty { min-height:39px; width:62px; flex-basis:62px; font-size:13px; padding:0 7px; }
.pro-diap-add { min-height:39px; padding:7px 6px; font-size:13px; gap:5px; }
.pro-diap-cart-icon { width:17px; height:17px; }
@media(max-width:650px) {
  .pro-diap-card { padding:8px; }
  .pro-diap-photo-wrap { height:132px; }
  .pro-diap-name { font-size:13px; min-height:48px; }
  .pro-diap-prices { min-height:42px; }
  .pro-diap-prices .panier_prix_vente { font-size:19px; }
  .pro-diap-qty { width:52px; flex-basis:52px; }
  .pro-diap-add { font-size:12px; }
}


/* V6 - Badges promotionnels superposes a la zone photo.
   Aucune hauteur supplementaire : les images restent alignees. */
.pro-diap-photo-wrap { position:relative; }
.pro-diap-photo-wrap > .pro-diap-discount {
  position:absolute;
  top:7px;
  right:7px;
  z-index:3;
  margin:0;
  max-width:calc(100% - 14px);
  padding:5px 7px;
  border-radius:5px;
  line-height:1.15;
  font-size:12px;
  font-weight:700;
  white-space:nowrap;
  pointer-events:none;
}
@media (max-width:650px) {
  .pro-diap-photo-wrap > .pro-diap-discount {
    top:5px;
    right:5px;
    font-size:11px;
    padding:4px 6px;
  }
}

/* V6.1 : ancrage explicite du badge dans la zone photo.
   Ne modifie ni la hauteur de l'image ni la logique metier. */
.pro-diap-card .pro-diap-photo-wrap { position:relative; }
.pro-diap-card .pro-diap-photo-wrap > .pro-diap-discount-anchor {
  position:absolute; top:7px; right:7px; left:auto; bottom:auto;
  z-index:6; pointer-events:none; display:block; width:max-content;
  max-width:calc(100% - 14px); height:max-content; margin:0; padding:0;
}
.pro-diap-card .pro-diap-discount-anchor > .pro-diap-discount {
  display:block; position:static; inset:auto; margin:0;
  padding:5px 7px; line-height:1.15; font-size:12px;
  font-weight:700; white-space:nowrap; border-radius:5px;
}
@media(max-width:650px) {
  .pro-diap-card .pro-diap-photo-wrap > .pro-diap-discount-anchor {top:5px;right:5px;}
  .pro-diap-card .pro-diap-discount-anchor > .pro-diap-discount {font-size:11px;padding:4px 6px;}
}

/* V7 : gouttieres de 8 px entre les cartes, sans changer les colonnes. */
.pro-diap-item {
  padding: 4px;
  box-sizing: border-box;
}

/* V8 : typographie legerement agrandie, prix orange, bloc prix gris clair. */
.pro-diap-name {font-size:15px;line-height:1.22;min-height:55px;}
.pro-diap-ref {font-size:13px;}
.pro-diap-status {font-size:12px;font-weight:400;line-height:1.24;}
.pro-diap-status-text strong {font-weight:700;}
.pro-diap-extra-status,.pro-diap-extra-status .div_info_dernier {font-size:12px!important;}
.pro-diap-qty {font-size:14px;}
.pro-diap-add {font-size:14px;}
.pro-diap-prices {
  background:#f6f7f8;
  border-radius:8px;
  padding:7px 6px;
  margin-bottom:6px;
  min-height:48px;
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  align-content:center;
  gap:4px 6px;
}
.pro-diap-prices .panier_prix_vente:not(:has(s)) {color:#f05a0a;font-size:22px;}
.pro-diap-prices .panier_prix_conseille,
.pro-diap-prices .panier_prix_vente:has(s) {color:#747982;font-size:12px;}
.pro-diap-price-discount {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  margin-left:auto;
  padding:4px 6px;
  background:#ff650e;
  color:#fff;
  font-size:12px;
  font-weight:700;
  line-height:1.15;
  border-radius:6px;
  white-space:nowrap;
  flex:0 0 auto;
}
/* Avec trois montants, le retour a la ligne est autorise sans chevauchement. */
.pro-diap-prices > span {max-width:100%;}
@media(max-width:650px) {
  .pro-diap-name {font-size:14px;min-height:51px;}
  .pro-diap-ref {font-size:12px;}
  .pro-diap-status {font-size:11.5px;}
  .pro-diap-prices .panier_prix_vente:not(:has(s)) {font-size:20px;}
  .pro-diap-price-discount {font-size:11px;padding:4px 5px;}
  .pro-diap-add {font-size:13px;}
}

/* V9 : tarif plus discret, fond gris attenue et remise en bout de ligne. */
.pro-diap-prices {
  background: #fafafa;
  padding: 6px 5px;
  column-gap: 4px;
  row-gap: 4px;
}
.pro-diap-prices .panier_prix_vente:not(:has(s)) {
  font-size: 20px;
  letter-spacing: -0.04em;
}
.pro-diap-prices .panier_prix_conseille,
.pro-diap-prices .panier_prix_vente:has(s) {
  font-size: 11px;
}
.pro-diap-price-discount {
  margin-left: auto;
  font-size: 11px;
  padding: 4px 5px;
}
/* Les trois prix historiques restent visibles et peuvent passer sur deux lignes. */
@media (max-width:650px) {
  .pro-diap-prices .panier_prix_vente:not(:has(s)) {font-size:19px;}
  .pro-diap-price-discount {font-size:10px;padding:3px 4px;}
}


/* V10 - prix et reduction sur une seule ligne, sans toucher aux montants PHP.
   Le groupe de montants se replie independamment du badge fixe a droite. */
.pro-diap-card .pro-diap-prices {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  align-content: center;
  gap: 5px;
  min-width: 0;
  min-height: 38px;
  padding: 5px 5px;
  margin-bottom: 6px;
  background: #fafafa;
}
.pro-diap-card .pro-diap-price-values {
  display: flex;
  flex: 1 1 auto;
  min-width: 0;
  flex-wrap: wrap;
  align-items: baseline;
  align-content: center;
  gap: 2px 4px;
}
.pro-diap-card .pro-diap-price-values > span {
  flex: 0 0 auto;
  max-width: 100%;
  white-space: nowrap;
}
.pro-diap-card .pro-diap-price-discount {
  flex: 0 0 auto;
  margin-left: auto;
  align-self: center;
  font-size: 10px;
  padding: 4px 5px;
}
/* Pour trois prix, les anciens montants peuvent revenir sur une ligne
   supplementaire dans le groupe, sans pousser le badge en dessous. */
@media (max-width: 650px) {
  .pro-diap-card .pro-diap-prices {gap: 3px; padding: 5px 4px;}
  .pro-diap-card .pro-diap-price-values {column-gap: 3px;}
  .pro-diap-card .pro-diap-price-discount {font-size: 9px; padding: 3px 4px;}
}

/* V12 : reserver une ligne pour l'information de stock AVANT le statut. */
.pro-diap-bottom > .pro-diap-extra-status {
  min-height: 18px;
  margin-top: 0;
  margin-bottom: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1.2;
}
.pro-diap-bottom > .pro-diap-extra-status:not(:empty) {margin-top:0;}
.pro-diap-bottom > .pro-diap-extra-status .div_info_dernier {line-height:1.2;}

/* V13 : aligner les blocs tarifaires au bas de la zone descriptive.
   La hauteur de chaque carte reste pilotee par la grille existante. */
.pro-diap-card > .pro-diap-info {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  min-height: 0;
}
.pro-diap-card > .pro-diap-info > .pro-diap-prices {
  margin-top: auto;
}
.pro-diap-card > .pro-diap-bottom {
  margin-top: 0;
  flex: 0 0 auto;
}

/* V13 - retouches typographiques uniquement */
.pro-diap-card .pro-diap-alt-action { font-weight: 600; }
.pro-diap-card .pro-diap-alt-action b,
.pro-diap-card .pro-diap-alt-action strong { font-weight: inherit; }
.pro-diap-card .pro-diap-prices .panier_prix_conseille,
.pro-diap-card .pro-diap-prices .panier_prix_vente:has(s) { font-size: 12px; }
.pro-diap-card .pro-diap-ref { font-size: 12px; }