/* === PZ – Home Cards (cadres verts réutilisables) === */

/* Palette (réutilisable) */
:root{
  --pz-green-900:#1b4332;
  --pz-green-600:#2d6a4f;
  --pz-green-400:#52b788;
  --pz-green-300:#74c69d; /* vert clair du cadre */
  --pz-beige-50:#f7f3ed;
  --pz-shadow:0 6px 20px rgba(0,0,0,.06);
}

/* Grille responsive générique */
.pz-grid{
  display:grid;
  gap:1.2rem;
}
.pz-grid.cols-2{ grid-template-columns:repeat(2,minmax(0,1fr)); }
.pz-grid.cols-3{ grid-template-columns:repeat(3,minmax(0,1fr)); }
.pz-grid.cols-4{ grid-template-columns:repeat(4,minmax(0,1fr)); }
@media (max-width:1024px){
  .pz-grid.cols-4{ grid-template-columns:repeat(3,minmax(0,1fr)); }
}
@media (max-width:768px){
  .pz-grid.cols-4,.pz-grid.cols-3{ grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (max-width:520px){
  .pz-grid.cols-2,.pz-grid.cols-3,.pz-grid.cols-4{ grid-template-columns:1fr; }
}

/* Carte à cadre vert clair (style commun pour TOUT) */
.pz-card{
  position:relative;
  display:flex;
  flex-direction:column;
  border:4px solid var(--pz-green-300);  /* cadre vert clair */
  border-radius:18px;
  background:#fff;                        /* fond blanc pour neutraliser toute transparence d’image */
  box-shadow:var(--pz-shadow);
  overflow:hidden;
  transition:transform .2s ease, box-shadow .2s ease;
}
.pz-card:hover{
  transform:translateY(-2px);
  box-shadow:0 10px 28px rgba(0,0,0,.08);
}

/* Média : toujours sur fond blanc pour éviter de voir le fond vert à travers une image PNG transparente */
.pz-card__media{
  aspect-ratio: 4/3;
  background:#fff;        /* IMPORTANT : supprime tout effet de transparence “qui laisse voir le vert” */
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
}
.pz-card__media img{
  width:100%;
  height:100%;
  object-fit:cover;
  background:#fff;        /* au cas où l’image elle-même soit transparente */
}

/* Contenu */
.pz-card__body{
  padding:14px 16px 16px;
}
.pz-card__title{
  margin:0;
  font-weight:700;
  font-size:1.05rem;
  color:var(--pz-green-900);
  line-height:1.3;
}
.pz-card__link{
  text-decoration:none;
  color:inherit;
}
.pz-card__meta{
  margin-top:.25rem;
  font-size:.9rem;
  color:#3b3b3b;
}

/* Bouton (optionnel) */
.pz-btn{
  display:inline-flex;
  align-items:center;
  gap:.5rem;
  background:var(--pz-green-600);
  color:#fff;
  border:none;
  border-radius:999px;
  padding:.6rem 1rem;
  font-weight:600;
  cursor:pointer;
}
.pz-btn:hover{ background:var(--pz-green-900); }

/* Variantes réutilisables pour autres blocs (même style) */
.pz-section{
  margin-block: clamp(20px,4vw,48px);
}
.pz-section__title{
  font-size: clamp(1.4rem, 1.2rem + 1.5vw, 2rem);
  color:var(--pz-green-900);
  margin:0 0 .8rem 0;
  font-weight: 700;	/* <-- met en gras */
}
.pz-card--compact .pz-card__media{ aspect-ratio: 1/1; }


/* === HERO accueil (titre blanc) === */
.pz-hero{
  position: relative;
  min-height: clamp(320px, 40vw, 520px);
  display: grid;
  place-items: center;
  background: #1f2d26;
  background-image: var(--pz-hero-bg, none);
  background-size: cover;
  background-position: center;
  isolation: isolate;
}
.pz-hero::after{
  /* voile sombre pour lisibilité du titre blanc */
  content:"";
  position:absolute; inset:0;
  background: linear-gradient(180deg, rgba(0,0,0,.25), rgba(0,0,0,.4));
  z-index:0;
}
.pz-hero__inner{ position: relative; z-index:1; text-align:center; padding: 0 1rem; }
.pz-hero__title{
  color:#fff;
  margin: 0 0 .25em 0;
  font-size: clamp(2rem, 1.4rem + 3vw, 3.5rem);
  font-weight:800;
  letter-spacing:.2px;
}
.pz-hero__subtitle{
  color:#f0f7f3;
  margin:0 0 1rem 0;
  font-size: clamp(1rem, .9rem + .6vw, 1.25rem);
  opacity:.95;
}

/* === Newsletter (form) — même esprit que cartes */
.pz-newsletter{
  display:flex; gap:.6rem; flex-wrap:wrap;
}
.pz-newsletter input[type="email"]{
  flex:1 1 260px;
  min-width: 220px;
  border:2px solid var(--pz-green-300);
  border-radius:999px;
  padding:.65rem 1rem;
  font-size:1rem;
  outline:none;
}
.pz-newsletter input[type="email"]:focus{
  border-color: var(--pz-green-400);
  box-shadow: 0 0 0 4px rgba(82,183,136,.15);
}


/* Icônes inline des cartes engagements */
.pz-card__media svg{
  width: 68%;
  height: auto;
  display: block;
}
.pz-card--compact .pz-card__media{
  aspect-ratio: 1/1;            /* carré propre pour des pictos */
  padding: 10px;                 /* petit souffle autour des SVG */
}


/* === Sections encadrées vertes === */
.pz-section--framed {
  border: 4px solid var(--pz-green-900);   /* cadre vert foncé */
  background: var(--pz-green-100);         /* fond vert clair */
  border-radius: 18px;
  padding: 1.5rem;
  margin-block: clamp(24px, 5vw, 56px);
  box-shadow: var(--pz-shadow);
}

/* Ajuste le titre pour qu’il ressorte */
.pz-section--framed .pz-section__title {
  margin-top: 0;
  margin-bottom: 1rem;
  color: var(--pz-green-900);
  text-align: center;
}

/* Cartes WooCommerce dans les sections encadrées */
.pz-section--wc ul.products li.product {
  background: #fff;                     /* fond blanc */
  border: 2px solid var(--pz-green-100);/* cadre vert clair */
  border-radius: 12px;
  padding: 1rem;
  box-shadow: var(--pz-shadow);
}

/* Harmonise les images produits */
.pz-section--wc ul.products li.product img {
  background:#fff;
  border-radius:8px;
}