/* ==========================================================================
   PACK-MOTO — FICHE PRODUIT : mise en page (positions et espacements seulement)
   Créé le 08/10/2026 par Claude (chantier maj-vers-ps9 / fiche-produit), à la demande de Flavien.
   Chargé uniquement par templates/catalog/product.tpl (bloc « head »), après custom.css.
   Portée : #main-product-wrapper = la fiche ouverte (ni l'aperçu rapide, ni les autres pages).
   Couleurs, polices et styles des boutons : inchangés (ceux du thème et de custom.css).
   Espacements : échelle unique 8 / 16 / 24 / 32 px.
   Retour arrière : supprimer ce fichier et la ligne qui l'appelle dans product.tpl,
   ou /root/backups/fiche-produit-2026-10-08/rollback.sh
   ========================================================================== */

/* --- LOT 1 — Bloc prix ---------------------------------------------------
   Avant : l'encadré « Économie réalisée » était en position absolue, décalé de 31 px
   (custom.css), et recouvrait « Prix public conseillé » et le prix barré dès que la
   colonne se rétrécissait (390, 768, 1024 px). Le gros prix débordait sur ses libellés.
   Après : prix conseillé barré et économie côte à côte, puis votre prix en dessous. */

#main-product-wrapper .product_p_price_container {
  margin: 16px 0 0;
  padding: 16px 0;
}

#main-product-wrapper .product-prices .has-discount {
  display: grid;
  grid-template-columns: auto auto;
  justify-content: center;
  align-items: center;
  column-gap: 16px;
  row-gap: 0;
}

/* colonne 1 : « Prix public conseillé » au-dessus du prix barré */
#main-product-wrapper .product-prices .has-discount > .txtProductPagePM {
  grid-column: 1;
  grid-row: 1;
  align-self: end;
}

#main-product-wrapper .product-prices .has-discount > .product-discount {
  grid-column: 1;
  grid-row: 2;
  align-self: start;
}

#main-product-wrapper .product-prices .has-discount > .product-discount .regular-price {
  margin: 0;
}

/* colonne 2 : l'encadré d'économie, sur la hauteur des deux lignes, sans position absolue */
#main-product-wrapper .product-prices .has-discount > span.badge-discount {
  grid-column: 2;
  grid-row: 1 / span 2;
  position: static;
  top: auto;
  right: auto;
  margin: 0;
}

/* votre prix, puis TTC et le paiement en plusieurs fois, sur toute la largeur */
#main-product-wrapper .product-prices .has-discount > div,
#main-product-wrapper .product-prices .has-discount > p {
  grid-column: 1 / -1;
}

#main-product-wrapper .product-prices .has-discount > div {
  margin-top: 16px;
}

/* le gros prix : bloc à part entière, interligne adapté à sa taille (il débordait de 10 à 12 px) */
#main-product-wrapper .product-prices .current-price {
  display: block;
  margin: 0;
}

#main-product-wrapper .product-prices .current-price-value {
  display: inline-block;
  line-height: 1.1;
}

#main-product-wrapper .product-prices .tax-shipping-delivery-label {
  margin-top: 0;
}

#main-product-wrapper .product-prices .tax-shipping-delivery-label .alma-pp-container {
  margin-top: 8px;
}

/* --- LOT 2 — En-tête et galerie ------------------------------------------
   Ordre dans la page = ordre du mobile : marque, titre, avis, prix, puis galerie, puis achat.
   À partir de 768 px, product.tpl fait flotter les colonnes (classes Bootstrap du thème) :
   galerie à gauche, en-tête et achat à droite. Ici : seulement espacements et alignements. */

/* custom.css impose « margin-bottom: -20px !important » sous le titre (le bloc suivant remontait sur lui).
   Seul moyen de l'annuler sans modifier custom.css : un !important de même force (justifié). */
#main-product-wrapper .product_header_container {
  margin-bottom: 0 !important;
  padding: 0 0 16px;
}

#main-product-wrapper .product-manufacturer-top {
  margin: 0 0 8px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

#main-product-wrapper .col-product-header .product_p_price_container {
  margin: 0;
  padding: 16px 0 24px;
}

/* vignettes : alignées sur le haut de l'image principale (custom.css les décalait de 80 px) */
#main-product-wrapper #product-images-thumbs {
  padding-top: 0;
}

/* badges promo : même retrait à droite qu'à gauche (ils sortaient de l'image, jusqu'à 4 px hors écran sur mobile).
   Le thème fixe « width: 100% » en plus du retrait gauche : largeur automatique entre les deux retraits (correctif 15 h 26). */
#main-product-wrapper .col-product-image .product-flags {
  width: auto;
  right: 14px;
}

/* mobile : la galerie suit l'en-tête et le prix, l'achat suit la galerie */
@media (max-width: 767px) {
  #main-product-wrapper .col-product-image {
    margin-bottom: 16px;
  }
}

/* ordinateur : les deux colonnes de droite (en-tête, achat) commencent au même niveau que la galerie */
@media (min-width: 768px) {
  #main-product-wrapper .col-product-header .product_header_container {
    padding-top: 0;
  }
}

/* --- LOT 3 — Zone d'achat ------------------------------------------------
   Ordre (dans product.tpl et product-add-to-cart.tpl) : déclinaisons, disponibilité (« En stock » ou badge),
   bouton panier, paiement sécurisé, délai de livraison et fiche technique (même bloc de modules), réassurance. */

#main-product-wrapper .product-variants {
  margin-bottom: 16px;
}

/* bloc de disponibilité, rafraîchi par PrestaShop à chaque déclinaison */
#main-product-wrapper .product-availability-pm {
  margin: 0 0 16px;
}

#main-product-wrapper .product-availability-pm .zmd-stock {
  margin: 0;
}

/* même apparence que l'ancien badge sous le prix (custom.css, règles « .product_p_price_container #product-availability ») */
#main-product-wrapper .product-availability-pm .badge {
  display: inline-block;
  padding: 8px 16px;
  font-size: 0.8em;
  text-transform: uppercase;
  white-space: normal;
}

#main-product-wrapper .product-availability-pm .zmd-stock + .badge {
  margin-top: 8px;
}

#main-product-wrapper #ps_checkout-payment-method-logo-block-container {
  margin-top: 16px;
}

#main-product-wrapper .product-additional-info {
  margin-top: 24px;
}

/* fiche technique (module medfeaturespictures) : les pictogrammes se chevauchaient de 5 à 33 px et sortaient de la colonne
   à 768 px (classe « img-responsive » de Bootstrap 3, absente du thème en Bootstrap 5). Grille régulière, images contenues. */
#main-product-wrapper .medfeaturespictures.row {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  margin: 0;
}

/* même densité que la grille prévue par le module : 4 par ligne, 6 à partir de 992 px (correctif 15 h 28) */
@media (min-width: 992px) {
  #main-product-wrapper .medfeaturespictures.row {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }
}

#main-product-wrapper .medfeaturespictures.row > * {
  width: auto;
  max-width: none;
  margin: 0;
  padding: 0;
  float: none;
}

#main-product-wrapper .medfeaturespictures.row > h4,
#main-product-wrapper .medfeaturespictures.row > .clearfix {
  grid-column: 1 / -1;
}

#main-product-wrapper .medfeaturespictures.row > h4 {
  margin-bottom: 8px;
}

#main-product-wrapper .medfeaturespictures img {
  max-width: 100%;
  height: auto;
}

#main-product-wrapper #estimateddelivery {
  padding-top: 16px;
}

#main-product-wrapper #reassurance-productpage-pm {
  margin-top: 24px;
}

@media (max-width: 767px) {
  /* custom.css : marges de 15 et 20 px, hors échelle */
  #main-product-wrapper .product-actions.js-product-actions {
    margin: 0 0 24px;
    padding: 16px;
  }

  /* custom.css impose « padding: 25px !important » à la boîte du bouton sur mobile : même force nécessaire (justifié) */
  #main-product-wrapper .product-add-to-cart.js-product-add-to-cart {
    padding: 24px !important;
    margin-top: 16px;
  }
}

/* --- LOT 4 — Sous la fiche -----------------------------------------------
   Ordre des onglets (product-tabs-h.tpl, copie du parent dans le thème enfant) :
   description, détails (caractéristiques), onglets des modules (dont les avis), « Vous aimerez aussi ».
   Espace entre la zone produit et les onglets : 32 px (au lieu de 48). */
#main-product-wrapper .product-info-row {
  margin-bottom: 32px;
}

/* --- Correctif du lot 2 (08/10/2026, 15 h 15 puis 15 h 20) : le titre du thème est aligné à gauche à toutes les largeurs
   (h1 en flex) ; la marque s aligne sur lui au lieu d être centrée. */
#main-product-wrapper .product-manufacturer-top {
  text-align: left;
}