/* ─────────────────────────────────────────────────────────────
   Page produit éditoriale — Atelier Henri Dejeant
   Police serif pour le nom : Playfair Display via Google Fonts
   ───────────────────────────────────────────────────────────── */
/* Import Google Fonts retiré : les polices du site sont auto-hébergées. */

/* ── Variables ─────────────────────────────────────────────── */
:root {
  --pe-bg:        #EDEAE3;
  --pe-bg-light:  #F2EFE9;
  --pe-border:    #D5D0C8;
  --pe-ink:       #1A1A18;
  --pe-muted:     #888;
  --pe-serif:     'Playfair Display', Georgia, serif;
  --pe-sans:      'Inter', system-ui, sans-serif;

  /* Charte couleurs */
  --pe-c-sand:    #C4A882;
  --pe-c-dark:    #2C2C2C;
  --pe-c-cream:   #E8E0D0;
  --pe-c-olive:   #5C6B4A;
  --pe-c-rust:    #B85C3C;
}

/* ── Centrage global 1000 px max ───────────────────────────── */
.page-product .columns-container.container {
  max-width: 1000px;   /* centré automatiquement par Bootstrap */
  padding-left: 0;
  padding-right: 0;
}

.page-product #center-column {
  padding-left: 0;
  padding-right: 0;
}

/* ── Wrapper principal ─────────────────────────────────────── */
.pe-page {
  background: var(--pe-bg);
  padding-bottom: 90px; /* espace pour la barre sticky */
}

/* ── 1. En-tête marque ─────────────────────────────────────── */
.pe-brand-header {
  padding: 1.5rem 2rem 0.75rem;
}

.pe-brand-name {
  font-family: var(--pe-sans);
  font-size: 0.7rem;
  font-weight: 400;
  letter-spacing: 0.18em;
  color: var(--pe-ink);
}

/* ── 2. Image hero ─────────────────────────────────────────── */
.pe-hero {
  width: 100%;
  overflow: hidden;
  background: #DDD9D0;
}

.pe-hero__img {
  width: 100%;
  height: 70vh;
  min-height: 420px;
  object-fit: cover;
  display: block;
}

/* ── 3. Barre info produit ─────────────────────────────────── */
.pe-info-bar {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 1.5rem;
  padding: 2rem 2rem 1.5rem;
}

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

.pe-category {
  font-family: var(--pe-sans);
  font-size: 0.65rem;
  font-weight: 400;
  letter-spacing: 0.14em;
  color: var(--pe-muted);
  margin: 0 0 0.5rem;
  text-transform: uppercase;
}

.pe-product-name {
  font-family: var(--pe-serif);
  font-size: clamp(2rem, 5vw, 3rem);
  font-weight: 700;
  color: var(--pe-ink);
  margin: 0;
  line-height: 1.1;
}

.pe-info-bar__right {
  text-align: right;
  flex-shrink: 0;
}

/* Prix — on écrase les styles PrestaShop par défaut */
.pe-price,
.pe-price .product__prices,
.pe-price .product__price,
.pe-price .js-product-prices {
  font-family: var(--pe-sans) !important;
  font-size: 2rem !important;
  font-weight: 700 !important;
  color: var(--pe-ink) !important;
  line-height: 1 !important;
}

.pe-price .product__tax-infos,
.pe-price .product__prices-block > *:not(.product__prices-inline) {
  display: none !important;
}

.pe-price-sub {
  font-family: var(--pe-sans);
  font-size: 0.65rem;
  color: var(--pe-muted);
  margin: 0.35rem 0 0;
  letter-spacing: 0.03em;
}

/* ── 4. Séparateur couleurs charte ─────────────────────────── */
.pe-colorbar {
  display: flex;
  height: 3px;
  width: 100%;
}

.pe-colorbar__seg        { flex: 1; }
.pe-colorbar__seg--sand  { background: var(--pe-c-sand);  }
.pe-colorbar__seg--dark  { background: var(--pe-c-dark);  }
.pe-colorbar__seg--cream { background: var(--pe-c-cream); }
.pe-colorbar__seg--olive { background: var(--pe-c-olive); }
.pe-colorbar__seg--rust  { background: var(--pe-c-rust);  }

/* ── 5. Description courte ─────────────────────────────────── */
.pe-description-short {
  background: var(--pe-bg-light);
  padding: 3.5rem 2rem;
  text-align: center;
}

.pe-description-short__inner {
  max-width: 540px;
  margin: 0 auto;
}

.pe-description-short p,
.pe-description-short__inner {
  font-family: var(--pe-sans);
  font-size: 1rem;
  line-height: 1.75;
  color: var(--pe-ink);
}

/* ── 6. Photos éditoriales (2 colonnes) ────────────────────── */
.pe-editorial-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
}

.pe-editorial-grid__item {
  position: relative;
  overflow: hidden;
  background: #D5D1C8;
  aspect-ratio: 1;
}

.pe-editorial-grid__item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.pe-editorial-grid__label {
  position: absolute;
  bottom: 1.5rem;
  left: 1.5rem;
  font-family: var(--pe-sans);
  font-size: 0.65rem;
  letter-spacing: 0.14em;
  color: rgba(255,255,255,0.75);
  margin: 0;
  pointer-events: none;
}

/* ── 7. Photo pleine largeur ────────────────────────────────── */
.pe-fullwidth-photo {
  position: relative;
  overflow: hidden;
  background: #C8C4BC;
  aspect-ratio: 16 / 9;
}

.pe-fullwidth-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.pe-fullwidth-photo__label {
  position: absolute;
  bottom: 1.5rem;
  left: 50%;
  transform: translateX(-50%);
  font-family: var(--pe-sans);
  font-size: 0.65rem;
  letter-spacing: 0.14em;
  color: rgba(255,255,255,0.75);
  margin: 0;
  pointer-events: none;
  white-space: nowrap;
}

/* ── 8. Caractéristiques ────────────────────────────────────── */
.pe-features {
  padding: 2.5rem 2rem 3rem;
  background: var(--pe-bg-light);
}

.pe-section-title {
  font-family: var(--pe-sans);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  color: var(--pe-ink);
  text-transform: uppercase;
  margin: 0 0 2rem;
}

.pe-features__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  border-top: 1px solid var(--pe-border);
}

.pe-features__cell {
  padding: 1.25rem 0;
  border-bottom: 1px solid var(--pe-border);
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}

.pe-features__cell:nth-child(odd) {
  border-right: 1px solid var(--pe-border);
  padding-right: 2rem;
}

.pe-features__cell:nth-child(even) {
  padding-left: 2rem;
}

.pe-features__label {
  font-family: var(--pe-sans);
  font-size: 0.7rem;
  color: var(--pe-muted);
  letter-spacing: 0.03em;
}

.pe-features__value {
  font-family: var(--pe-sans);
  font-size: 1rem;
  font-weight: 700;
  color: var(--pe-ink);
}

/* ── 10. Barre sticky bas de page ───────────────────────────── */
.pe-sticky-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 1040;
  background: var(--pe-bg-light);
  border-top: 1px solid var(--pe-border);
  padding: 0.875rem 1.5rem;
}

.pe-sticky-bar__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  max-width: 960px;
  margin: 0 auto;
}

/* ── Éléments cachés (galerie + product-details remplacés par AJAX) */
.pe-images-hidden,
.pe-hidden {
  display: none !important;
}

/* ── Section commentaires (module ps_productcomments) ────────── */
.page-product .product-comments-additional-info,
.page-product #product-comments-list-pagination,
.page-product #product-comments-list,
.page-product .comments-nb,
.page-product #product_comments_block_extra {
  padding: 2.5rem 2rem;
  background: var(--pe-bg-light);
  border-top: 1px solid var(--pe-border);
  font-family: var(--pe-sans);
  font-size: 0.9rem;
  color: var(--pe-ink);
}

.page-product #product_comments_block_extra h2,
.page-product #product_comments_block_extra .title-block {
  font-family: var(--pe-sans);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--pe-ink);
  margin-bottom: 1.5rem;
  border: none;
  padding: 0;
}

.page-product #product_comments_block_extra .no-comments,
.page-product #product_comments_block_extra p {
  font-size: 0.875rem;
  color: var(--pe-muted);
}

/* Masquer les éléments visuellement lourds du module commentaires */
.page-product #product_comments_block_extra .btn-outline-secondary,
.page-product #product_comments_block_extra .grade-stars {
  display: none;
}

/* ── Variantes dans la sticky bar (markup standard product-variants.tpl) */
.pe-sticky-bar__variants {
  flex: 1;
}

.pe-sticky-bar__variants .product__variants {
  margin: 0;
}

.pe-sticky-bar__variants .product-variant {
  border: none;
  padding: 0;
  margin: 0;
}

/* Masquer variantes non-couleur (taille, etc.) dans la sticky bar */
.pe-sticky-bar__variants .product-variant:not(:has(.product-variant__colors)) {
  display: none;
}

/* Étiquette groupe (ex: "Couleur") */
.pe-sticky-bar__variants .product-variant__label {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 0;
}

.pe-sticky-bar__variants .product-variant__legend {
  font-family: var(--pe-sans);
  font-size: 0.65rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  color: var(--pe-muted);
  text-transform: uppercase;
  margin: 0;
  padding: 0;
  white-space: nowrap;
}

/* Valeur sélectionnée — cachée, on préfère le visuel seul */
.pe-sticky-bar__variants .product-variant__selected {
  display: none;
}

/* Rangée de swatches */
.pe-sticky-bar__variants .product-variant__colors {
  display: flex;
  gap: 0.5rem;
  align-items: center;
  flex-wrap: wrap;
  margin-top: 0.4rem;
}

/* Chaque swatch : on cache le radio natif et on style le label */
.pe-sticky-bar__variants .input-color__input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
  pointer-events: none;
}

.pe-sticky-bar__variants .input-color__label {
  display: block;
  width: 1.875rem;
  height: 1.875rem;
  border-radius: 50%;
  border: 2px solid transparent;
  padding: 2px;
  cursor: pointer;
  transition: border-color 0.15s ease;
  box-sizing: border-box;
}

.pe-sticky-bar__variants .input-color__label:hover {
  border-color: var(--pe-ink);
}

.pe-sticky-bar__variants .input-color__label--active,
.pe-sticky-bar__variants .input-color__input:checked + .input-color__label {
  border-color: var(--pe-ink) !important;
}

.pe-sticky-bar__variants .input-color__label .color {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background-size: cover;
}

/* Bouton Ajouter au panier */
.pe-sticky-bar__actions {
  flex-shrink: 0;
}

.pe-add-to-cart.btn {
  background: var(--pe-ink) !important;
  color: #fff !important;
  border: none !important;
  border-radius: 2rem !important;
  padding: 0.8rem 2.25rem !important;
  font-family: var(--pe-sans) !important;
  font-size: 0.875rem !important;
  font-weight: 500 !important;
  letter-spacing: 0.03em !important;
  white-space: nowrap;
  cursor: pointer;
  transition: background 0.15s ease;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}

.pe-add-to-cart.btn:hover:not(:disabled) {
  background: #333 !important;
}

.pe-add-to-cart.btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

/* Masquer l'icône panier du bouton si présente */
.pe-add-to-cart .material-icons {
  display: none;
}

/* ── Responsive mobile ──────────────────────────────────────── */
@media (max-width: 600px) {
  .pe-info-bar {
    flex-direction: column;
    align-items: flex-start;
    gap: 1rem;
  }

  .pe-info-bar__right {
    text-align: left;
  }

  .pe-editorial-grid {
    grid-template-columns: 1fr;
  }

  .pe-fullwidth-photo {
    aspect-ratio: 4 / 3;
  }

  .pe-sticky-bar__inner {
    flex-wrap: wrap;
    gap: 0.875rem;
  }

  .pe-add-to-cart.btn {
    width: 100% !important;
    justify-content: center;
  }
}