/* Qualité visuelle (fallbacks) — sans toucher à site.js */

/* Placeholder visuel quand un produit n'a pas d'image */
.pcard .media{
  background-image:
    radial-gradient(140px 140px at 70% 20%, rgba(232,118,26,.10), transparent 60%),
    radial-gradient(180px 180px at 20% 80%, rgba(18,58,94,.10), transparent 65%),
    linear-gradient(180deg, #ffffff, #F9FAFB);
  background-size: cover;
}

.pcard .media::after{
  content:"";
  position:absolute;
  inset:0;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140' viewBox='0 0 24 24' fill='none' stroke='%2398A2B3' stroke-width='1.4'%3E%3Crect x='4' y='5' width='16' height='14' rx='2'/%3E%3Cpath d='M8 13l2-2 3 3 3-3 4 4'/%3E%3Ccircle cx='9' cy='10' r='1.3'/%3E%3C/svg%3E")
    no-repeat center;
  opacity:.35;
  pointer-events:none;
}

.pcard .media img{ position:relative; z-index:1; }
.pcard .flag{ z-index:2; }
.pcard .fav{ z-index:3; }

/* PDP : même fallback */
.gallery .main{
  background-image:
    radial-gradient(220px 220px at 70% 20%, rgba(232,118,26,.10), transparent 60%),
    radial-gradient(260px 260px at 20% 80%, rgba(18,58,94,.10), transparent 65%),
    linear-gradient(180deg, #ffffff, #F9FAFB);
}

/* Catalogue : permettre de scroller les filtres sans devoir aller en bas de page */
@media (min-width: 1081px){
  .facets{
    max-height: calc(100vh - 170px);
    overflow-y: auto;
    overscroll-behavior: contain;
    padding-right: 8px;
  }
}

/* ============================================================
   HEADER — 2 lignes (sans chevauchement)
   L1 : logo gauche / commandes droite
   L2 : recherche 4/5 / actions (espace pro + panier) 1/5
   La L3 (mega menu) reste dans site-nav.html sous le header
   ============================================================ */

.hd .wrap{
  display:flex !important;
  flex-direction:column !important;
  align-items:stretch !important;
  gap:12px !important;
  height:auto !important;
}

.hd .hd-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  width:100%;
}

/* Ligne 1 */
.hd .hd-row-top{
  flex-wrap:wrap;
}

.hd .hd-row-top .logo{
  flex:0 0 auto;
}

.hd .hd-row-top .hd-right{
  margin-left:auto;
  display:flex;
  justify-content:flex-end;
  align-items:center;
  min-width:280px;
}

.hd .hd-row-top .modeswitch{
  flex-wrap:wrap;
  justify-content:flex-end;
}

/* Ligne 2 : 4/5 - 1/5 */
.hd .hd-row-mid{
  align-items:center;
}

.hd .hd-row-mid .search{
  flex:4;
  max-width:none !important;
  width:100%;
}

.hd .hd-row-mid .hd-actions{
  flex:1;
  display:flex;
  justify-content:flex-end;
  gap:10px;
  align-items:center;
  min-width:220px;
}

/* Mobile : empiler proprement sans chevauchement */
@media (max-width: 860px){
  .hd .hd-row-top .hd-right{ min-width: 0; width: 100%; justify-content:flex-start; }
  .hd .hd-row-top .modeswitch{ justify-content:flex-start; }
}

@media (max-width: 768px){
  .hd .hd-row-mid{ flex-direction:column; align-items:stretch; }
  .hd .hd-row-mid .hd-actions{ justify-content:space-between; min-width:0; }
}

/* ============================================================
   ESPACE PRO — carte « Votre palier »
   Le bloc commercial se place EN FACE du titre, pas en dessous.
   ============================================================ */

.tiercard .tierhead{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:18px;
  flex-wrap:wrap;
  position:relative;
  z-index:1;
}

.tiercard .tierhead-left{
  flex:1 1 240px;
  min-width:220px;
}

.tiercard .tierhead-right{
  flex:0 1 320px;
  margin-left:auto;
  display:flex;
  justify-content:flex-end;
}

.tiercard .commercial-inline{
  width:100%;
  max-width:320px;
  background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.18);
  border-radius:12px;
  padding:10px 12px;
}

.tiercard .commercial-inline .commercial-title{
  font-family:'Archivo',sans-serif;
  font-size:10.5px;
  font-weight:800;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--ambre);
  margin-bottom:4px;
}

.tiercard .commercial-inline .commercial-name{
  font-family:'Archivo',sans-serif;
  font-weight:800;
  font-size:14.5px;
  color:#fff;
  line-height:1.25;
}

.tiercard .commercial-inline .commercial-name.mut{
  color:#B8C8D8;
  font-weight:700;
}

.tiercard .commercial-inline .commercial-links{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  margin-top:8px;
}

.tiercard .commercial-inline .commercial-links .btn{
  background:rgba(255,255,255,.10);
  border:1px solid rgba(255,255,255,.22);
  color:#fff;
  font-size:12px;
  height:32px;
  padding:0 10px;
}

.tiercard .commercial-inline .commercial-links .btn:hover{
  background:rgba(255,255,255,.18);
  border-color:rgba(255,255,255,.34);
}

@media (max-width: 720px){
  .tiercard .tierhead{ flex-direction:column; }
  .tiercard .tierhead-right{ margin-left:0; justify-content:flex-start; flex-basis:auto; }
  .tiercard .commercial-inline{ max-width:none; }
}