/* ============================================================
   L'Atelier — Fiche produit : COLLE TECHNIQUE uniquement.
   Tout le décor (.pdp / .gallery / .pricebar / .buybar / .qty /
   .reassure / .specs / .share / .prow / .pcard / .flag …) vient de
   atelier-maquette.css (maquette VERBATIM). Ici : uniquement les
   overrides imposés par le markup PrestaShop pour COLLER au maquette.
   ============================================================ */

/* ---- fiche pleine largeur : on masque les colonnes PS ---- */
body#product #left-column,
body#product #right-column { display: none !important; }
body#product #content-wrapper {
  width: 100%;
  max-width: 100%;
  flex: 0 0 100%;
}

/* ---- padding maquette du bloc .pdp ---- */
body#product #main > .wrap > .pdp { padding: 24px 0 10px; }

/* double padding : le contenu est déjà inséré par #wrapper > .container (padding
   latéral) ; le .wrap interne (pdp / onglets) ajoutait un 2e padding
   → ~56px d'inset au lieu de 28. On annule le padding latéral de ces .wrap.
   NB : le panneau associés (.atelier-prow-related > .wrap) est exclu : sa wrap
   EST le panneau visuel, son padding (40px) sert d'inset comme .atelier-longdesc. */
body#product #main > .wrap,
body#product #main > .wrap > .wrap { padding-left: 0; padding-right: 0; }

/* ============================================================
   GALERIE — neutralise l'UI scroll/zoom du thème classic
   ============================================================ */
body#product .scroll-box-arrows { display: none; }
body#product .gallery .main { position: relative; }
body#product .gallery .main .layer {
  position: absolute; inset: 0;
  display: flex; align-items: flex-end; justify-content: flex-end;
  padding: 12px; cursor: pointer; opacity: 0; transition: opacity .15s;
}
body#product .gallery .main:hover .layer { opacity: 1; }
body#product .gallery .main .flag { z-index: 2; }
body#product .gallery .thumbs { flex-wrap: wrap; }

/* ============================================================
   ACHAT — quantité + bouton, calés sur .buybar/.qty de la maquette
   ============================================================ */
/* spinner TouchSpin du thème + flèches natives <input number> masqués :
   la maquette fournit ses propres − / + dans .qty */
body#product .qty .bootstrap-touchspin-up,
body#product .qty .bootstrap-touchspin-down,
body#product .qty .input-group-btn-vertical { display: none !important; }
body#product .qty .bootstrap-touchspin { display: contents; box-shadow: none; border: 0; }
body#product .qty input[type=number] { -moz-appearance: textfield; }
body#product .qty input[type=number]::-webkit-inner-spin-button,
body#product .qty input[type=number]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }

/* libellés/markup PS superflus dans la colonne info */
body#product .product-actions .control-label { display: none; }
body#product .buybar .add { flex: 1; display: flex; }
body#product .buybar .add .add-to-cart { width: 100%; justify-content: center; }
body#product .product-minimal-quantity { font-size: 13px; color: var(--muted); margin-top: 6px; }
body#product #product-availability { display: none; } /* dispo déjà dans .pricebar */

/* le module social PS (displayProductAdditionalInfo) ferait un 2e « Partager »
   au milieu de la colonne → masqué : la maquette n'a QUE le .share du bas */
body#product .product-additional-info { display: none; }

/* conteneurs PS vides dans le <form> (variantes / promos absentes) : ils
   héritent du section{padding:60px 0} de la maquette → gros blanc. On annule
   l'espacement, et on masque la section promo quand elle est vide. */
body#product .product-variants,
body#product .product-discounts { padding: 0; margin: 0; }
body#product .product-discounts:empty { display: none; }

/* ============================================================
   PRICEBAR — réf à droite + prix barré/remise (markup PS)
   ============================================================ */
body#product .pricebar .ref-tag {
  font-family: var(--label); text-transform: uppercase; letter-spacing: .1em;
  font-size: 11px; color: var(--muted); margin-left: auto;
}
body#product .pricebar .regular-price {
  text-decoration: line-through; color: var(--muted); font-size: 18px; margin-right: 6px;
}
body#product .pricebar .discount {
  font-family: var(--label); text-transform: uppercase; letter-spacing: .08em;
  font-size: 11px; background: var(--terracotta); color: var(--paper);
  padding: 3px 8px; margin-left: 8px;
}

/* ---- specs : logo marque (markup PS) ---- */
body#product .specs .manufacturer-logo { max-height: 38px; width: auto; }

/* fiche SANS aucune caractéristique (marque/features/stock/état) : la table
   specs est vide → le titre « Caractéristiques » resterait orphelin. On masque
   le bloc quand il ne contient aucune ligne (le <div> reste dans le DOM pour le
   JS de variantes qui lit #product-details[data-product]). */
body#product .specs:not(:has(tr)) { display: none; }

/* ---- partage : icônes SVG (héritent de la couleur du cercle .share a) ---- */
body#product .share a svg { width: 16px; height: 16px; display: block; }

/* ============================================================
   MODALE GALERIE (#product-modal) — sans theme.css (Bootstrap), la
   .modal n'était plus masquée → son contenu (Fermer/close, image plein
   format, vignettes) se déversait en bas de page. On la cache par défaut
   et on lui donne un overlay Atelier quand le JS l'ouvre (display:block inline).
   ============================================================ */
body#product .modal { display: none; }
body#product .modal.in,
body#product .modal.show,
body#product .modal[style*="display: block"],
body#product .modal[style*="display:block"] {
  display: flex !important; position: fixed; inset: 0; z-index: 1050;
  background: rgba(33, 41, 31, .88); padding: 40px 20px; overflow: auto;
  align-items: flex-start; justify-content: center;
}
body#product .modal-backdrop { display: none; }
body#product .modal .modal-dialog { max-width: 920px; width: 100%; margin: 24px auto; }
body#product .modal .modal-content {
  background: var(--paper); border: 1px solid var(--line); padding: 22px 24px;
}
body#product .modal .close {
  float: right; background: none; border: 0; cursor: pointer;
  font-family: var(--label); text-transform: uppercase; letter-spacing: .1em;
  font-size: 12px; color: var(--muted);
}
body#product .modal .close:hover { color: var(--terracotta-deep); }
body#product .modal figure { margin: 0; clear: both; }
body#product .modal figure img { width: 100%; height: auto; object-fit: contain; background: #fff; }
body#product .modal .thumbnails { margin-top: 14px; }
body#product .modal .product-images {
  display: flex; flex-wrap: wrap; gap: 10px; justify-content: center;
  list-style: none; padding: 0; margin: 0;
}
body#product .modal .product-images .thumb {
  width: 72px; height: 72px; object-fit: contain; background: #fff;
  border: 1px solid var(--line); cursor: pointer;
}
body#product .modal .product-images .thumb:hover { border-color: var(--terracotta); }
body#product .modal .arrows { display: none; }

/* ============================================================
   Description longue + section « Vous aimerez aussi »
   (étaient en style inline dans produit.html → repris ici)
   ============================================================ */
.atelier-pdp-tabs { padding: 0 0 10px; margin-top: 16px; }
/* chaque bloc (description / pièces jointes / contenu extra) = panneau papier
   avec filet terracotta, comme la fiche contact et la réassurance */
.atelier-pdp-tabs > section,
.atelier-pdp-tabs .atelier-longdesc,
.atelier-pdp-tabs .product-attachments,
.atelier-pdp-tabs .atelier-extra {
  background: var(--paper);
  border: 1px solid var(--line);
  border-top: 3px solid var(--terracotta);
  padding: 34px 40px 36px;
  margin-bottom: 24px;
}
.atelier-pdp-tabs .sec-title {
  font-size: 26px; color: var(--petrol); margin: 0 0 18px; padding-bottom: 14px;
  border-bottom: 1px dotted var(--line);
}
.atelier-pdp-tabs .product-description {
  font-size: 16px; color: var(--ink); line-height: 1.7; max-width: 760px;
}
/* beaucoup de fiches ont une description = liste de specs tapée en texte avec
   des <p></p> VIDES entre chaque ligne (gros trous). On masque les vides et on
   resserre → lecture propre type fiche technique. */
.atelier-pdp-tabs .product-description p { margin: 0 0 7px; }
.atelier-pdp-tabs .product-description p:empty { display: none; }
.atelier-pdp-tabs .product-description p:last-child { margin-bottom: 0; }
.atelier-pdp-tabs .attachment { margin-bottom: 16px; }

@media (max-width: 768px) {
  .atelier-pdp-tabs > section,
  .atelier-pdp-tabs .atelier-longdesc { padding: 22px 16px 24px; }
}
@media (max-width: 420px) {
  .atelier-pdp-tabs > section,
  .atelier-pdp-tabs .atelier-longdesc { padding: 20px 13px 22px; }
}

/* « Vous aimerez aussi » : même panneau papier + filet terracotta que la Description */
.atelier-prow-related { background: transparent; border-top: 0; padding: 0; margin-top: 24px; }
.atelier-prow-related > .wrap {
  background: var(--paper); border: 1px solid var(--line); border-top: 3px solid var(--terracotta);
  padding: 34px 40px 36px;
}
.atelier-prow-related .eyebrow { margin-bottom: 6px; }
.atelier-prow-related .sec-title {
  margin: 0 0 26px; padding-bottom: 14px; border-bottom: 1px dotted var(--line);
}
@media (max-width: 768px) {
  .atelier-prow-related > .wrap { padding: 22px 16px 26px; }
}
@media (max-width: 420px) {
  .atelier-prow-related > .wrap { padding: 20px 13px 24px; }
}

/* grille des associés : bat le <style> inline 320px de la miniature */
body#product .products.prow {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px;
}
body#product .products.prow .product-miniature,
body#product .products.prow .pcard { max-width: none; }
/* la carte associée enveloppe pic+ct dans un <a.pcard-link> : il doit
   s'étirer pour que le décor .pcard de la maquette s'applique en colonne */
body#product .pcard .pcard-link { display: flex; flex-direction: column; flex: 1; color: inherit; }

/* ============================================================
   Responsive (le reste vient de la maquette via .pdp/.reassure/.prow)
   ============================================================ */
/* galerie au-dessus, infos dessous */
@media (max-width: 1000px) { body#product .pdp { grid-template-columns: 1fr; } }

@media (max-width: 820px) {
  body#product .reassure { grid-template-columns: 1fr; }
  body#product .reassure .r { border-right: 0; border-bottom: 1px solid var(--line); }
  body#product .reassure .r:last-child { border-bottom: 0; }
  body#product .products.prow { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 768px) {
  /* titre un cran plus compact pour libérer la colonne info */
  body#product .pdp h1 { font-size: 28px; }
  /* vignettes tactiles qui wrappent proprement */
  body#product .gallery .thumbs { gap: 10px; }
  body#product .gallery .thumbs .t { width: 64px; height: 64px; flex: 0 0 auto; }
  /* le prix barré / la remise ne doivent jamais pousser la pricebar trop large */
  body#product .pdp .pricebar { flex-wrap: wrap; gap: 10px 14px; }
}

@media (max-width: 560px) { body#product .products.prow { grid-template-columns: 1fr; } }

/* très petits écrans : la barre d'achat se replie (quantité au-dessus,
   bouton AJOUTER pleine largeur) sinon le libellé du bouton casse sur 3
   lignes et l'icône panier chevauche le texte. */
@media (max-width: 380px) {
  body#product .buybar { flex-wrap: wrap; }
  body#product .buybar .qty { width: 100%; justify-content: space-between; }
  body#product .buybar .qty input { flex: 1; width: auto; }
  body#product .buybar .add { flex: 1 0 100%; }
  body#product .buybar .add .add-to-cart { width: 100%; }
  /* titre + spécifs encore un peu plus serrés en baseline 360 */
  body#product .pdp h1 { font-size: 25px; }
  body#product .specs td { padding: 9px 8px; font-size: 13.5px; }
  body#product .specs td:first-child { font-size: 11px; }
}