/* =========================================================
   Single Secteur – Styles
   > Calqué sur Single Catalogue
   > Ajoute le badge Ville/CP + pastille prix
   > S’appuie sur app.css (variables & cartes)
   ========================================================= */

/* ===== Variables de secours (si root absent) ===== */
:root{
  --brand: #5CA174;
  --ink: #0f172a;
  --muted: #64748b;
  --soft: #F4F7F5;
  --bd: #e6ebef;
  --radius: 16px;
  --shadow: 0 10px 30px rgba(0,0,0,.08);
}

/* ===== Layout 3 colonnes (mêmes espacements que Catalogue) ===== */
.wpz-wrap{
  width: min(1400px, 100% - 2*var(--pad, 1rem));
  margin: clamp(5px,3vh,5px) auto 60px;
  display: grid; gap: 24px;
  grid-template-columns: 260px minmax(0, 820px) 320px;
  align-items: start;
}
.wpz-col{ min-width: 0; }
.wpz-col--left .wpz-sticky,
.wpz-col--right .wpz-sticky{
  position: sticky;
  top: clamp(88px, 6vw, 100px);
  z-index: 2;
}
@media (max-width:980px){
  .wpz-wrap{ grid-template-columns: minmax(0, 820px) 320px; }
  .wpz-col--left .wpz-sticky,
  .wpz-col--right .wpz-sticky{ position: static; top: auto; }
}
@media (max-width:740px){
  .wpz-wrap{ grid-template-columns: 1fr; }
  .wpz-col--right{ order: 2; }
}

/* ===== HERO intégré (identique Catalogue) ===== */
.wpz-hero.wpz-hero--in{
  position: relative;
  width: 100%;
  margin: -8px 0 18px;
  overflow: hidden;
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  height: clamp(260px, 42vh, 520px);
}
.wpz-hero.wpz-hero--in img{
  width: 100%; height: 100%;
  object-fit: cover; object-position: center; display: block;
}
.wpz-hero.wpz-hero--in::after{
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(
    to top,
    rgba(0,0,0,.70) 0%,
    rgba(0,0,0,.55) 18%,
    rgba(0,0,0,.35) 32%,
    rgba(0,0,0,.15) 48%,
    rgba(0,0,0,0) 68%
  );
  pointer-events: none;
  z-index: 1;
}
.wpz-hero.wpz-hero--in .wpz-hero-caption{
  position: absolute; left: 50%;
  bottom: clamp(16px, 3.4vh, 34px);
  transform: translateX(-50%);
  width: min(100% - 2*var(--pad, 1rem), 1100px);
  color: #fff; text-shadow: 0 2px 10px rgba(0,0,0,.35);
  z-index: 2;
}

/* Badges (catégories & Ville/CP) */
.wpz-hero-badges{
  display: flex; flex-wrap: wrap; gap: 8px 10px; margin-bottom: 10px;
}
.wpz-hero-badge{
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 10px; border-radius: 999px;
  background: rgba(255,255,255,.14); backdrop-filter: blur(4px);
  color: #fff; font-size: 12.5px; line-height: 1;
  border: 1px solid rgba(255,255,255,.22);
  text-decoration: none;
  transition: background .2s ease, transform .2s ease;
}
a.wpz-hero-badge{ color: #fff; }
.wpz-hero-badge:hover{ background: rgba(255,255,255,.25); transform: translateY(-1px); }

/* Titre + méta prix */
h1.wpz-hero-title{
  margin: 0 0 6px; font-weight: 800; line-height: 1.15; color: #fff;
}
@media (max-width:980px){ h1.wpz-hero-title{ font-size: clamp(26px, 4vw, 38px); } }
@media (max-width:640px){ h1.wpz-hero-title{ font-size: clamp(22px, 5.5vw, 32px); } }

.wpz-hero-meta{
  display:flex; align-items:center; justify-content:flex-start;
  gap:10px; flex-wrap:wrap; color:#fff; opacity:.95;
}

/* Pastille prix (verte) */
.wpz-price{
  display: inline-block;
  background: var(--brand);
  color: #fff;
  font-weight: 700;
  font-size: clamp(13px, 0.95vw, 15px);
  padding: 6px 12px;
  border-radius: 999px;
  line-height: 1.2;
  box-shadow: 0 2px 6px rgba(0,0,0,.08);
  white-space: nowrap;
  user-select: none;
  transition: background .2s ease, transform .2s ease;
}
.wpz-price:hover{ filter: brightness(.98); transform: translateY(-1px); }

/* ===== Sommaire (TOC) ===== */
.wpz-toc{
  background: color-mix(in oklab, var(--brand) 10%, #fff);
  border-radius: 10px; padding: 16px 18px; margin-bottom: 28px;
  box-shadow: 0 3px 10px rgba(0,0,0,.05);
}
.wpz-toc strong{ display:block; font-size: 17px; margin-bottom: 10px; color: var(--brand); }
.wpz-toc ul{ list-style: none; margin: 0; padding: 0; }
.wpz-toc li{ margin: 6px 0; position: relative; padding-left: 12px; }
.wpz-toc li::before{ content: "›"; position: absolute; left: 0; color: var(--brand); }
.wpz-toc a{ text-decoration: none; color: var(--ink); }
.wpz-toc a:hover{ color: color-mix(in oklab, var(--brand) 65%, #000); }

/* ===== Cartes latérales (listes) ===== */
.wpz-card{ padding: 14px; border:1px solid var(--bd); border-radius: var(--radius); box-shadow: var(--shadow); background:#fff; margin-bottom:1rem;}
.wpz-card .titre{ display:block; font-weight:800; margin-bottom:8px; color: var(--brand); }

.wpz-prod-list, .wpz-rel-list{
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: 10px;
}
.wpz-prod-item, .wpz-rel-item{ border-radius: 12px; overflow: hidden; background: #fff; box-shadow: 0 2px 8px rgba(0,0,0,.05); }
.wpz-prod-link, .wpz-rel-link{
  display: grid; grid-template-columns: 60px 1fr; gap: 12px; align-items: center;
  text-decoration: none; color: var(--ink); padding: 8px 10px; border-radius: 12px;
  transition: background .15s ease, transform .15s ease;
}

a.wpz-prod-link{
	font-size:14px;
	color: #000;
}
.wpz-prod-link:hover, .wpz-rel-link:hover{ background: #f8fbf9; transform: translateY(-1px); }
.wpz-prod-thumb, .wpz-rel-thumb{ width: 60px; height: 60px; border-radius: 10px; overflow: hidden; background:#eef2f7; }
.wpz-prod-thumb img, .wpz-rel-thumb img{ width:100%; height:100%; object-fit:cover; display:block; }
.wpz-prod-title, .wpz-rel-title{ font-weight:700; line-height:1.2; color: #000; font-size:14px; }

/* ===== Article (contenu central) ===== */
.wpz-article{
  background:#fff; border-radius: var(--radius); box-shadow: var(--shadow);
  padding: clamp(18px, 2.2vw, 28px);
}
.wpz-article.fade-in{ animation: wpzIn .35s ease both; }
@keyframes wpzIn{ from {opacity:0; transform: translateY(8px);} to {opacity:1; transform:none;} }
.entry-content{ line-height: 1.68; }
.entry-content h2{ font-size: clamp(18px, 2.2vw, 22px); margin: 18px 0 8px; font-weight: 800; }
.entry-content p{ margin: .7em 0; color: #1f2937; }
.entry-content a{ color: var(--brand); text-decoration: underline; text-underline-offset: 3px; }

/* ===== Carrousel “Produits similaires” ===== */
.wpz-reco{
  width: min(1400px, 100% - 2*var(--pad, 1rem));
  margin: 8px auto 60px;
}
.wpz-reco__head{
  display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px;
}
.wpz-reco .titre{ font-weight: 800; color: var(--brand); }
.wpz-reco__controls{ display: flex; gap: 8px; }
.wpz-reco__btn{
  width: 34px; height: 34px; border-radius: 999px; border: 1px solid var(--brand);
  background: #fff; color: var(--brand); cursor: pointer; line-height: 1; font-size: 18px;
  transition: transform .15s ease, background .2s ease;
}
.wpz-reco__btn:hover{ transform: translateY(-1px); background: color-mix(in oklab, var(--brand) 10%, #fff); }
/* ===== Hauteurs uniformes pour les cartes du carrousel ===== */
.wpz-reco__track{
  list-style:none; margin:0; padding:6px 2px 10px;
  display:flex; gap:14px; overflow-x:auto; scroll-snap-type:x mandatory;
  align-items:stretch;                 /* ✅ aligne toutes les cartes sur la même hauteur */
}

/* Largeur fixe responsive + hauteur fixe via variable */
.wpz-reco__item{
  flex:0 0 auto;
  width:clamp(220px, 28vw, 280px);
  height:var(--reco-item-h, 280px);    /* ✅ hauteur uniforme */
  scroll-snap-align:start;
  display:flex;                        /* pour étirer la carte en hauteur */
}

/* La carte occupe toute la hauteur du conteneur */
.wpz-reco__card{
  display:flex; flex-direction:column;
  width:100%; height:100%;             /* ✅ s’aligne sur la hauteur imposée */
  background:#fff; border:1px solid var(--bd);
  border-radius:16px; overflow:hidden; text-decoration:none; color:var(--ink);
  transition:transform .2s ease, box-shadow .2s ease;
}

/* Le visuel prend une hauteur fixe, le titre remplit le reste */
.wpz-reco__thumb{
  flex:0 0 var(--reco-thumb-h, 160px); /* ✅ même hauteur d’image pour toutes */
  width:100%; background:#eef2f7; overflow:hidden;
}
.wpz-reco__thumb img{
  width:100%; height:100%; object-fit:cover; display:block;
}

/* Le titre occupe l’espace restant, avec clamp pour éviter les débords */
.wpz-reco__title{
  flex:1 1 auto;
  padding:10px 12px;
  font-weight:700; line-height:1.35;
  display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden;
  color: #000;
  font-size: 14px;
}

/* Hover doux */
.wpz-reco__card:hover{ transform:translateY(-2px); box-shadow:var(--shadow); }

/* ===== Breakpoints : ajuste la hauteur si besoin ===== */
@media (max-width: 640px){
  .wpz-reco__item{ height: 260px; }         /* un poil plus compact en mobile */
  .wpz-reco__thumb{ flex-basis: 150px; }

  .wpz-hero.wpz-hero--in{ height: clamp(200px, 34vh, 380px); }
  .wpz-hero-title{ font-size: 22px; }
  .wpz-share__btn{ width: 34px; height: 34px; }
  .wpz-prod-link, .wpz-rel-link{ grid-template-columns: 50px 1fr; }
  .wpz-prod-thumb, .wpz-rel-thumb{ width: 50px; height: 50px; }
  .wpz-reco__track{ gap: 12px; }
}

/* ===== Partage (hérite du style Catalogue) ===== */
.wpz-share{
  display:flex; gap:10px; align-items:center; margin-top:10px;
}
.wpz-share__btn{
  width:40px; height:40px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  border:1px solid rgba(255,255,255,.55);
  background: rgba(255,255,255,.12); backdrop-filter: blur(3px);
  color:#fff; text-decoration:none;
  transition: transform .18s ease, background .18s ease, border-color .18s ease;
  overflow:hidden;
}
.wpz-share__btn:hover{
  transform: translateY(-1px);
  background: rgba(255,255,255,.2);
  border-color: rgba(255,255,255,.75);
}
.wpz-share__btn svg{ width:18px; height:18px; fill:#fff; display:block; }
.wpz-share--fb:hover    { background: rgba(24,119,242,.22); }
.wpz-share--pin:hover   { background: rgba(189,8,28,.22); }








/* ===== Mobile : cacher la colonne gauche, texte sur toute la largeur ===== */
@media (max-width: 740px){
  /* 1) On ne voit pas la colonne gauche */
  .wpz-col--left{ display: none !important; }

  /* 2) Les listes latérales occupent toute la largeur, sans mini-thumb
        (Prestations associées, Produits recommandés, etc.) */
  .wpz-prod-link,
  .wpz-rel-link{
    display: block;                 /* plus de grille 60px + 1fr */
    grid-template-columns: 1fr !important;
    padding: 10px 12px;
  }
  .wpz-prod-thumb,
  .wpz-rel-thumb{
    display: none !important;       /* on supprime la vignette qui mange la largeur */
  }

  /* 3) Le texte peut respirer et s’étaler */
  .wpz-prod-title,
  .wpz-rel-title{
    display: block !important;
    -webkit-line-clamp: unset;
    -webkit-box-orient: unset;
    overflow: visible;
    white-space: normal;
    word-break: normal;
    hyphens: auto;
    font-size: 15px;                /* un poil plus lisible sur mobile */
    line-height: 1.35;
  }

  /* 4) Les cartes latérales prennent bien toute la largeur du viewport */
  .wpz-card{
    margin-left: 0;
    margin-right: 0;
    border-radius: 14px;
  }

  /* 5) Le wrap reste mono-colonne (centre + droite, la droite passe sous le centre) */
  .wpz-wrap{ grid-template-columns: 1fr; }
  .wpz-col--right{ order: 2; }      /* la colonne droite descend sous le contenu */
}


/* ===== Groupe prix + note ===== */
.wpz-price-wrap{
  display: inline-flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
}

/* Positionnements */
.wpz-price-wrap--right{ flex-direction: row; }
.wpz-price-wrap--top{ flex-direction: column-reverse; align-items: flex-start; }
.wpz-price-wrap--bottom{ flex-direction: column; align-items: flex-start; }

/* Pastille prix (verte) */
.wpz-price{
  display: inline-block;
  background: var(--brand, #5CA174);
  color: #fff;
  font-weight: 700;
  font-size: clamp(13px, 0.95vw, 15px);
  padding: 6px 12px;
  border-radius: 999px;
  line-height: 1.2;
  box-shadow: 0 2px 6px rgba(0,0,0,.08);
  white-space: nowrap;
  transition: background .2s ease, transform .2s ease;
}
.wpz-price:hover{ filter: brightness(.98); transform: translateY(-1px); }

/* Mention “hors livraison” */
.wpz-price-note{
  font-size: 12px;
  line-height: 1;
  color: color-mix(in oklab, var(--ink, #0f172a) 55%, #fff);
  opacity: .85;
  letter-spacing: .1px;
  white-space: nowrap;
}
.wpz-price-wrap--right .wpz-price-note::before{
  content: "·";
  margin: 0 4px 0 2px;
  opacity: .5;
}

/* En hero sombre */
.wpz-hero .wpz-price-note{ color: rgba(255,255,255,.9); opacity: .9; }

/* Responsive */
@media (max-width:640px){
  .wpz-price-note{ font-size: 11.5px; }
}