/*
 * MDE Classic — fiche produit
 * Couche graphique uniquement.
 * Aucun template, JS ou comportement natif PrestaShop n'est modifié.
 */

body#product {
  --mde-blue: #1B537E;
  --mde-blue-dark: #123D60;
  --mde-yellow: #FFD25F;
  --mde-cream: #FFFDF6;
  --mde-pale-blue: #E5EFEF;
  --mde-champagne: #FFEBB9;
  --mde-ink: #2F3D49;
  --mde-muted: #667684;
  --mde-radius: 12px;
  color: var(--mde-ink);
  font-family: Arial, Helvetica, sans-serif;
}

/* Fond général */
body#product #wrapper {
  background: #f7f8f5;
}

body#product #wrapper .container {
  padding-top: 1.25rem;
  padding-bottom: 2rem;
}

/* Fil d'Ariane */
body#product .breadcrumb {
  margin-bottom: 1.1rem;
  color: var(--mde-muted);
  font-size: .9rem;
}

body#product .breadcrumb a {
  color: var(--mde-blue);
}

body#product .breadcrumb a:hover {
  color: var(--mde-blue-dark);
}

/* =========================
   Galerie produit
   ========================= */

body#product .images-container .product-cover {
  padding: 1rem;
  border: 3px solid var(--mde-yellow);
  border-radius: var(--mde-radius);
  background: #fff;
  box-shadow: 0 8px 22px rgba(47, 61, 73, .06);
}

body#product .images-container .product-cover img {
  display: block;
  max-width: 100%;
  height: auto;
  margin: 0 auto;
  border-radius: 8px;
}

/* Zoom produit : conserver la photo claire et rappeler le jaune MDE */
body#product .images-container .product-cover .layer {
  background: rgba(255, 255, 255, .06);
}

body#product .images-container .product-cover .layer .zoom-in,
body#product .images-container .product-cover .layer .material-icons {
  color: var(--mde-yellow);
  text-shadow: 0 1px 3px rgba(18, 61, 96, .35);
}

body#product .product-images > li.thumb-container .thumb {
  padding: .2rem;
  border: 1px solid rgba(27, 83, 126, .18);
  border-radius: 8px;
  background: #fff;
}

body#product .product-images > li.thumb-container .thumb.selected,
body#product .product-images > li.thumb-container .thumb:hover {
  border: 2px solid var(--mde-blue);
}

/* =========================
   Informations produit
   ========================= */

body#product .product-information {
  color: var(--mde-ink);
}

body#product h1,
body#product .h1 {
  margin-bottom: .75rem;
  color: var(--mde-blue);
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(1.8rem, 2.7vw, 2.45rem);
  font-weight: 400;
  line-height: 1.1;
  text-transform: none;
}

body#product .product-prices {
  margin: .6rem 0 1rem;
}

body#product .product-price,
body#product .current-price,
body#product .current-price-value {
  color: var(--mde-blue-dark);
  font-weight: 700;
}

body#product .current-price {
  font-size: 1.65rem;
}

body#product .regular-price {
  color: var(--mde-muted);
  opacity: .85;
}

body#product .product-discount .discount,
body#product .product-flags li.product-flag.discount,
body#product .product-flags li.product-flag.on-sale {
  background: var(--mde-yellow);
  color: var(--mde-blue-dark);
}

/* Référence, TTC, petites mentions */
body#product .tax-shipping-delivery-label,
body#product .product-reference,
body#product .product-reference span {
  color: var(--mde-muted);
}

/* Description courte sous le prix */
body#product .product-description-short,
body#product .product-description-short p {
  margin-bottom: .85rem;
  color: var(--mde-blue);
  font-size: 1.02rem;
  font-weight: 600;
  line-height: 1.5;
}

/* =========================
   Variantes / quantité
   ========================= */

body#product .product-variants > .product-variants-item {
  margin: 1rem 0;
}

body#product .product-variants .control-label,
body#product .product-add-to-cart .control-label {
  color: var(--mde-blue-dark);
  font-weight: 700;
}

body#product .product-variants select,
body#product .product-variants .form-control,
body#product .product-quantity #quantity_wanted {
  border: 1px solid rgba(27, 83, 126, .35);
  border-radius: 7px;
  background: #fff;
  color: var(--mde-blue-dark);
  box-shadow: none;
}

body#product .product-quantity #quantity_wanted:focus,
body#product .product-variants select:focus,
body#product .product-variants .form-control:focus {
  border-color: var(--mde-blue);
  box-shadow: 0 0 0 2px rgba(27, 83, 126, .10);
}

body#product .product-add-to-cart {
  margin-top: .75rem;
}

body#product .product-quantity {
  align-items: stretch;
  gap: .5rem;
}

body#product .product-quantity #quantity_wanted {
  min-height: 44px;
}

/* =========================
   Bouton panier
   ========================= */

body#product .product-add-to-cart .add-to-cart,
body#product button.add-to-cart {
  min-height: 44px;
  padding: .7rem 1.25rem;
  border: 2px solid var(--mde-blue);
  border-radius: 8px;
  background: var(--mde-blue);
  color: #fff;
  font-weight: 700;
  box-shadow: none;
  transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}

body#product .product-add-to-cart .add-to-cart:hover,
body#product button.add-to-cart:hover {
  border-color: var(--mde-blue-dark);
  background: var(--mde-blue-dark);
  color: #fff;
}

body#product .product-add-to-cart .add-to-cart:focus,
body#product button.add-to-cart:focus {
  box-shadow: 0 0 0 3px rgba(27, 83, 126, .14);
}

/* Favoris */
body#product .wishlist-button-add,
body#product .wishlist-button-product {
  border-color: rgba(27, 83, 126, .25);
  color: var(--mde-blue);
}

/* Partage : discret, sans modifier les liens natifs */
body#product .social-sharing {
  margin-top: 1rem;
}

body#product .social-sharing > span {
  color: var(--mde-blue-dark);
  font-weight: 700;
}

body#product .social-sharing ul li {
  border: 1px solid rgba(27, 83, 126, .18);
  border-radius: 50%;
  background-color: var(--mde-cream);
}

/* =========================
   Stock / disponibilité
   ========================= */

body#product #product-availability {
  margin-top: .65rem;
  color: var(--mde-blue-dark);
  font-weight: 700;
}

/* On conserve les couleurs sémantiques natives de disponibilité.
   Le jaune MDE ne remplace donc pas le vert "En stock". */

/* =========================
   Description / détails
   ========================= */

body#product .tabs {
  margin-top: 1.25rem;
  padding: 1rem 1.2rem 1.2rem;
  border: 1px solid rgba(27, 83, 126, .18);
  border-radius: var(--mde-radius);
  background: var(--mde-pale-blue);
  box-shadow: none;
}

body#product .tabs .nav-tabs {
  border-bottom: 1px solid rgba(27, 83, 126, .22);
}

body#product .tabs .nav-tabs .nav-link {
  border: 0 !important;
  border-bottom: 4px solid transparent !important;
  border-radius: 0;
  color: var(--mde-blue);
  font-weight: 700;
  background: transparent;
  outline: none;
  box-shadow: none;
}

body#product .tabs .nav-tabs .nav-link:hover {
  color: var(--mde-blue-dark);
}

body#product .tabs .nav-tabs .nav-link.active,
body#product .tabs .nav-tabs .nav-item.open .nav-link {
  color: var(--mde-blue-dark);
  border-bottom-color: var(--mde-yellow) !important;
  background: transparent;
  outline: none;
  box-shadow: none;
}

/* Pas de cadre noir persistant après un clic souris. */
body#product .tabs .nav-tabs .nav-link:focus:not(:focus-visible) {
  outline: none !important;
  box-shadow: none !important;
}

/* Repère clavier accessible, aux couleurs MDE. */
body#product .tabs .nav-tabs .nav-link:focus-visible {
  outline: 2px solid rgba(27, 83, 126, .40) !important;
  outline-offset: 2px;
  box-shadow: none !important;
}

body#product .tabs .tab-content {
  padding-top: .9rem;
  color: var(--mde-ink);
  font-size: 1rem;
  line-height: 1.6;
}

body#product .product-description,
body#product .product-description p {
  color: var(--mde-ink);
}

/* Caractéristiques */
body#product .product-features {
  margin-top: .6rem;
}

body#product .product-features > dl.data-sheet {
  border-radius: 8px;
  overflow: hidden;
}

body#product .product-features > dl.data-sheet dd.value,
body#product .product-features > dl.data-sheet dt.name {
  padding: .6rem .75rem;
  border-bottom: 1px solid rgba(27, 83, 126, .12);
}

body#product .product-features > dl.data-sheet dt.name {
  background: var(--mde-champagne);
  color: var(--mde-blue-dark);
  font-weight: 700;
}

body#product .product-features > dl.data-sheet dd.value {
  background: var(--mde-cream);
  color: var(--mde-ink);
}

/* =========================
   Réassurance / petits blocs
   éventuels dans la fiche
   ========================= */

body#product .product-information .product-manufacturer,
body#product .product-information .product-pack,
body#product .product-information .product-customization {
  border-radius: 8px;
}

/* =========================
   Responsive
   ========================= */

@media (max-width: 991px) {
  body#product h1,
  body#product .h1 {
    font-size: 1.9rem;
  }

  body#product .images-container .product-cover {
    padding: .75rem;
  }
}

@media (max-width: 767px) {
  body#product #wrapper .container {
    padding-top: .75rem;
  }

  body#product h1,
  body#product .h1 {
    margin-top: .8rem;
    font-size: 1.7rem;
  }

  body#product .product-add-to-cart .add-to-cart,
  body#product button.add-to-cart {
    width: 100%;
  }

  body#product .tabs {
    padding: .8rem;
  }
}

/* =========================
   Allègement de la fiche produit
   ========================= */

/* Partage réseaux sociaux : masqué sur la fiche produit MDE. */
body#product .social-sharing {
  display: none !important;
}

/* Bloc de réassurance produit (paiement, livraison, retours, n° d'entreprise) :
   conservé dans le footer de la boutique, masqué ici pour alléger la fiche. */
body#product .blockreassurance_product,
body#product #block-reassurance,
body#product .blockreassurance {
  display: none !important;
}

/* =========================
   Alignement avec la vraie boutique MDE
   ========================= */

/* Description courte sous le prix :
   dans Classic, son id contient l'identifiant du produit
   (ex. #product-description-short-7). */
body#product #product-description-short,
body#product [id^="product-description-short-"] {
  display: none !important;
}

/* Module Product Comments : masquer l'ensemble des éléments rendus sur la fiche. */
body#product #product-comments-list-header,
body#product #empty-product-comment,
body#product #product-comments-list,
body#product #product-comments-list-footer,
body#product #product-comments-list-pagination,
body#product .product-comments,
body#product .product-comments-additional-info {
  display: none !important;
}

/* =========================================================
   MDE — Réseaux sociaux sur la fiche produit
   03/10/2026
   On conserve le partage natif masqué, mais on ajoute un bloc
   séparé "Suivez la Maison de l'Europe" vers les vrais profils MDE.
   ========================================================= */

/* Le partage produit natif reste volontairement masqué. */
body#product .social-sharing {
  display: none !important;
}

/* Notre bloc de suivi des réseaux */
body#product .mde-social-follow {
  width: 100% !important;
  float: none !important;
  clear: both;
  margin: 1.15rem 0 0;
  padding: .85rem 1rem;
  border: 1px solid rgba(27, 83, 126, .18);
  border-radius: 10px;
  background: #FFFEF1;
  box-shadow: none;
}

body#product .mde-social-follow .mde-social-title {
  display: block;
  margin-bottom: .6rem;
  color: var(--mde-blue-dark);
  font-family: Georgia, "Times New Roman", serif;
  font-size: 1.05rem;
  font-weight: 400;
}

body#product .mde-social-follow ul {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .55rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

body#product .mde-social-follow ul li {
  float: none !important;
  margin: 0 !important;
}

body#product .mde-social-follow ul li a {
  display: block;
  width: 34px;
  height: 34px;
  border: 1px solid rgba(27, 83, 126, .18);
  border-radius: 50%;
  background-color: #fff;
  box-shadow: none;
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}

body#product .mde-social-follow ul li a:hover {
  transform: translateY(-1px);
  border-color: var(--mde-yellow);
  box-shadow: 0 4px 10px rgba(47, 61, 73, .10);
}

/* Le module ps_socialfollow utilise déjà les classes de réseau
   pour dessiner les pictogrammes. On neutralise seulement son
   comportement de colonne/footer dans notre bloc produit. */
body#product .mde-social-follow.block-social {
  text-align: left;
}

@media (max-width: 767px) {
  body#product .mde-social-follow {
    padding: .75rem .8rem;
  }

  body#product .mde-social-follow ul {
    gap: .45rem;
  }
}

/* =========================================================
   MDE — Réseaux sociaux : pictogrammes visibles
   03/10/2026
   Le sprite du module ps_socialfollow est porté par les <li>.
   On colore donc les <li> comme dans le header et on laisse
   les liens transparents afin de ne plus masquer les icônes.
   ========================================================= */

body#product .mde-social-follow ul li {
  width: 34px;
  height: 34px;
  border: 0 !important;
  border-radius: 50%;
  overflow: hidden;
  background-repeat: no-repeat !important;
}

/* Couleurs officielles déjà utilisées dans le header MDE */
body#product .mde-social-follow li.facebook  { background-color: #1877F2 !important; }
body#product .mde-social-follow li.youtube   { background-color: #FF0000 !important; }
body#product .mde-social-follow li.pinterest { background-color: #BD081C !important; }
body#product .mde-social-follow li.instagram { background-color: #E4405F !important; }
body#product .mde-social-follow li.tiktok    { background-color: #111 !important; }

body#product .mde-social-follow ul li a {
  width: 34px !important;
  height: 34px !important;
  border: 0 !important;
  border-radius: 50%;
  background-color: transparent !important;
  color: transparent !important;
  box-shadow: none !important;
  font-size: 0;
  overflow: hidden;
}

/* Survol discret, sans changer la couleur des réseaux */
body#product .mde-social-follow ul li:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 10px rgba(47, 61, 73, .12);
}