/* ============================================================
   Cartes produit unifiees (modele : cartes de la page d'accueil)
   Structure :
   <div class="pc-item">
     <a class="pc-card pc-rose" href="...">[.pc-flag] h2/h3 [p] [.pc-tags] img</a>
     <a class="pc-band" href="...">.pc-rating .pc-meta .pc-price-row</a>
   </div>
   ============================================================ */

@font-face{font-family:Gabarito;src:url("/assets/fonts/Gabarito-Black.ttf") format("truetype");font-weight:900;font-style:normal;font-display:swap}

.pc-item{
  display:flex;
  flex-direction:column;
  min-width:0;
  border-radius:18px;
  transition:transform .22s ease,filter .22s ease;
}

.pc-item:hover{
  transform:translateY(-8px) rotate(-.6deg);
  filter:drop-shadow(0 24px 32px rgba(21,43,75,.18));
}

.pc-card{
  position:relative;
  display:block;
  flex:1;
  min-height:410px;
  border-radius:18px 18px 0 0;
  overflow:hidden;
  padding:26px;
  color:#152b4b;
  text-decoration:none;
  isolation:isolate;
  transform:translateZ(0);
}

.pc-flag{
  position:relative;
  z-index:2;
  display:inline-block;
  margin-bottom:10px;
  font-size:12px;
  font-weight:900;
  text-transform:uppercase;
  letter-spacing:.06em;
  opacity:.9;
}

.pc-card h2,
.pc-card h3{
  margin:0;
  max-width:280px;
  position:relative;
  z-index:2;
  color:inherit;
  font-family:"Gabarito",sans-serif;
  font-weight:700;
  font-size:clamp(28px,2.7vw,41px);
  line-height:.92;
  letter-spacing:0;
  text-transform:none;
}

.pc-card p{
  position:relative;
  z-index:2;
  max-width:240px;
  margin:14px 0 0;
  font-size:15px;
  line-height:1.2;
  font-weight:900;
}

.pc-tags{
  position:relative;
  z-index:2;
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-top:14px;
}

.pc-tags span{
  border-radius:999px;
  padding:8px 12px;
  background:rgba(255,255,255,.9);
  color:#152b4b;
  font-size:12px;
  font-weight:900;
  text-transform:uppercase;
  box-shadow:0 4px 0 rgba(21,43,75,.12);
}

.pc-card img{
  position:absolute;
  left:0;
  bottom:0;
  z-index:1;
  width:100%;
  height:62%;
  object-fit:cover;
  clip-path:polygon(0 16%,100% 0,100% 100%,0 100%);
}

.pc-card.pc-with-tags img{
  height:48%;
  clip-path:polygon(0 14%,100% 2%,100% 100%,0 100%);
}

/* Variante large (grilles 2 colonnes) */
.pc-wide h2,
.pc-wide h3{
  max-width:430px;
  font-size:clamp(32px,3.4vw,52px);
}

.pc-wide p{
  max-width:410px;
}

/* Couleurs : chaque univers garde la sienne */
.pc-rose{background:#ffd8e9;color:#152b4b}
.pc-sky{background:#b8defa;color:#152b4b}
.pc-lime{background:#ffe4a8;color:#152b4b}
.pc-navy{background:#152b4b;color:#fff}
.pc-yellow{background:#ffa80b;color:#fff}
.pc-green{background:#78ae4b;color:#fff}
.pc-orange{background:#ff4d12;color:#fff}
.pc-navy .pc-tags span{background:rgba(255,255,255,.92)}

/* Bandeau bas commun : creme, avis, prix, bouton */
.pc-band{
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  gap:12px;
  min-height:128px;
  border-radius:0 0 18px 18px;
  padding:18px 18px 16px;
  background:#fff0d6;
  color:#152b4b;
  text-decoration:none;
  box-shadow:0 10px 0 rgba(21,43,75,.08);
}

.pc-rating{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:10px;
  min-width:0;
  font-weight:900;
  line-height:1;
}

.pc-stars{
  color:#ffa80b;
  letter-spacing:1px;
  font-size:16px;
}

.pc-rating strong{font-size:14px}
.pc-rating em{font-style:normal;font-size:12px}

.pc-meta{
  display:flex;
  flex-wrap:wrap;
  gap:6px 0;
  font-size:12px;
  font-weight:900;
  text-transform:uppercase;
  color:rgba(21,43,75,.72);
}

.pc-meta span+span::before{
  content:"\2726";
  margin:0 9px;
  color:#ff4d12;
  font-size:10px;
}

.pc-price-row{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:12px;
}

.pc-price{
  display:grid;
  gap:2px;
  font-weight:900;
}

.pc-price span{font-size:13px;line-height:1}
.pc-price strong{font-family:"Gabarito",sans-serif;font-size:24px;line-height:1}
.pc-price em{font-style:normal;font-weight:900;font-size:12px;line-height:1.1}

.pc-btn{
  position:relative;
  overflow:hidden;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:44px;
  padding:0 18px;
  border-radius:999px;
  background:#ff4d12;
  background-image:radial-gradient(circle at 24% 20%,rgba(255,255,255,.24),transparent 23%),linear-gradient(135deg,#ff4d12,#ff4d12);
  color:#fff;
  white-space:nowrap;
  font-weight:900;
  font-size:12px;
  text-transform:uppercase;
  box-shadow:inset 0 0 0 2px rgba(255,255,255,.16);
  transition:transform .2s ease,filter .2s ease,box-shadow .2s ease,letter-spacing .2s ease;
}

.pc-btn::before{
  content:"";
  position:absolute;
  inset:-45% auto -45% -65%;
  width:52%;
  background:linear-gradient(105deg,transparent,rgba(255,255,255,.46),transparent);
  transform:skewX(-16deg);
  transition:left .5s ease;
  pointer-events:none;
}

.pc-item:hover .pc-btn{
  transform:translateY(-1px) scale(1.025);
  filter:saturate(1.06) brightness(1.04);
  letter-spacing:.016em;
  box-shadow:inset 0 0 0 2px rgba(255,255,255,.22),0 0 22px rgba(255,168,11,.22);
}

.pc-item:hover .pc-btn::before{
  left:115%;
}

.pc-item a:focus-visible{
  outline:3px solid #ff4d12;
  outline-offset:3px;
}

@media (max-width:980px){
  .pc-item:hover{transform:none;filter:none}
  .pc-card{min-height:360px;padding:22px}
  .pc-card h2,.pc-card h3{max-width:none;font-size:clamp(30px,6vw,46px)}
  .pc-card p{max-width:min(280px,60%)}
  .pc-card img{height:60%}
  .pc-card.pc-with-tags img{height:44%}
  .pc-band{min-height:118px;padding:16px}
}

@media (max-width:620px){
  .pc-card{min-height:330px}
  .pc-price-row{align-items:stretch;flex-direction:column}
  .pc-btn{width:100%}
}

.pc-solo{max-width:390px;margin:36px auto 0}
.hub-more{margin:26px 0 0;font-weight:800;font-size:16px}
.hub-more a{color:#ff4d12}