


.fc-card { background:#fff; border:1px solid #eee; border-radius:18px; padding:1.2rem; box-shadow:0 2px 12px rgba(0,0,0,.04); }
.fc-card-style {display:flex; flex-wrap:wrap; gap:1rem; align-items:center; justify-content:space-between; }


/* ====== Cartes produits (dc-) ====== */
.fc-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(260px,1fr)); gap:1rem; margin:1rem 0 2rem 0; }
.fc-card{ border:1px solid #e5e7eb; border-radius:12px; padding:16px; background:#fff; box-shadow:0 1px 2px rgba(0,0,0,.04); transition:box-shadow .2s, transform .2s; }
.fc-card:hover{ box-shadow:0 6px 18px rgba(0,0,0,.08); transform:translateY(-2px); }
.fc-card a{ text-decoration:none; color:inherit; display:block; }
.fc-img{ width:100%; aspect-ratio:4/3; object-fit:contain; background:#f9fafb; border-radius:8px; }
.fc-title{ margin:.6rem 0 0 0; font-weight:700; font-size:1rem; line-height:1.25rem; }
.fc-desc{ margin:.25rem 0 0 0; font-size:.9rem; color:#555; }
.fc-price{ margin:.75rem 0 0 0; font-weight:800; font-size:1.05rem; }
.fc-badge{ display:inline-block; margin-left:.5rem; font-size:.75rem; line-height:1; color:#b91c1c; background:#fee2e2; border:1px solid #fecaca; border-radius:999px; padding:2px 8px; vertical-align:middle; }
.fc-card a:focus{ outline:3px solid #60a5fa; outline-offset:2px; border-radius:12px; }
.fc-list {
  display: flex;
  flex-direction: column;
  gap: .6rem;
  margin: 1rem 0 2rem 0;
}

/* ww-card__body 
ww-card-link
*/
@media (prefers-color-scheme: dark){
  .fc-card{ background:#0b0b0c; border-color:#1f2937; box-shadow:0 1px 2px rgba(0,0,0,.6); }
  .fc-img{ background:#0f172a; } 
  .fc-desc{ color:#cbd5e1; }
}
 

.fc-img2{ width:100%; aspect-ratio:4/3; object-fit:contain; background:#f9fafb; border-radius:8px; }
@media (prefers-color-scheme: dark){
  .fc-img2{ background:#0f172a; } 
}


/* Mode liste */
.fc-card.fc-card--list {
  border-radius: 10px;
  padding: 12px 16px;
}

/* lien = flex horizontal, image à gauche, texte à droite */
.fc-card.fc-card--list > a {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
}

/* conteneur interne pour pouvoir affiner si besoin */
.fc-card-list-inner {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  width: 100%;
}

/* colonne image */
.fc-card-list-img {
  flex: 0 0 110px; /* largeur fixe type Amazon */
}

/* image liste : plus petite que .fc-img */
.fc-img-list {
  width: 100%;
  height: auto;
  max-height: 110px;
  object-fit: contain;
  background: #f9fafb;
  border-radius: 8px;
}

/* colonne texte */
.fc-card-list-body {
  flex: 1 1 auto;
  min-width: 0;
}

/* titre & desc adaptés à une ligne horizontale */
.fc-card.fc-card--list .fc-title {
  margin: 0 0 .25rem 0;
  font-size: 1rem;
}

.fc-card.fc-card--list .fc-desc {
  margin: 0 0 .35rem 0;
  font-size: .9rem;
}

.fc-card.fc-card--list .fc-price {
  margin: .1rem 0 0 0;
}

/* en mode liste, on laisse le flex, donc on annule le display:block global */
.fc-card.fc-card--list a {
  text-decoration: none;
  color: inherit;
}




/* button */
.fc-btn-coo {
  display: inline-block;
    font-weight: 400;
    text-align: center;
    white-space: nowrap;
    vertical-align: middle;
    background-color: transparent;
    padding: .375rem .75rem;
    font-size: 1rem;
    line-height: 1.5;
    border-radius: .25rem;
    transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out;
    font-family: inherit;
    box-sizing: border-box; 
} 
.fc-btn-coo-blue
{
    color: #007bff;
    border: 2px solid #007bff;
}
.fc-btn-coo-blue:hover
{
  background-color: #007bff;
  color: #FFF;
}
.fc-btn-coo-green
{
      color: #28a745;
    border: 2px solid #28a745;
}
.fc-btn-coo-green:hover
{
  background-color: #28a745;
  color: #FFF;
}
.fc-btn-coo-red
{
      color: #dc3545;
    border: 2px solid #dc3545;
}
.fc-btn-coo-red:hover
{
  background-color: #dc3545;
  color: #FFF;
}

.fc-btn-coo-grey
{
      color: #999;
    
}
.fc-btn-coo-grey:hover
{
  background-color: #999;
  color: #000;
}








/* =========================
   fc-filters formulaire filtres affichage v2 : marque / prix mini / prix maxi / trier
   ========================= */

/* Résumé résultats */
.fc-formresult{
  display:flex;
  flex-wrap:wrap;
  gap:.35rem .5rem;
  align-items:center;
  margin:.35rem 0 1rem;
  font-size:.98rem;
  color:#111827;
}
.fc-formresult .fc-count{ font-weight:800; }

/* Barre de filtres – responsive, sans scroll horizontal */
.fc-filters{
  display:grid;
  /* auto-fit → remplit toute la ligne avec autant de colonnes que possible */
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap:.6rem;
  align-items:end;
  padding:.75rem .9rem;
  margin:.5rem 0 .6rem;
  overflow:visible;
  width:100%;
  box-sizing:border-box;
}

/* Éléments internes */
.fc-filters > div{ min-width:0; } /* autorise la contraction */

/* Labels */
.fc-filters label{
  display:block;
  margin:0 0 .25rem;
  font-size:.9rem;
  color:#374151;
}

/* Champs */
.fc-filters select,
.fc-filters input[type="number"],
.fc-filters input[type="text"]{
  width:100%;
  height:40px;
  padding:.5rem .65rem;
  border:1px solid #d1d5db;
  border-radius:8px;
  background:#fff;
  box-sizing:border-box;
}

/* Bouton */
.fc-filters button{
  width:100%;
  height:40px;
}

/* Responsive : garde des proportions agréables */
@media (max-width:900px){
  .fc-filters{
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  }
}
@media (max-width:600px){
  .fc-filters{
    grid-template-columns: 1fr 1fr;
  }
}
@media (max-width:420px){
  .fc-filters{
    grid-template-columns: 1fr;
  }
}
 






.fc-debug { }





.fc-more-count { font-size:0.85rem; color:#6b3030; margin-top:0.25rem; }




.fc-badges{ display:flex; flex-wrap:wrap; gap:.35rem; }
.fc-badge-k{ display:inline-block; padding:.28rem .6rem;  background:#eef2ff; color:#1e3a8a; border:1px solid #e0e7ff; border-radius:999px; }
.fc-badge-k .fc-x{ margin-left:.45rem; text-decoration:none; font-weight:800; color:#1f2937; border-radius:6px; padding:0 .2rem; }
.fc-badge-k .fc-x:hover{ color:#b91c1c; background:rgba(185,28,28,.08); }
.fc-badge--promo{display:inline-block;background:#fee2e2;color:#b91c1c;border:1px solid #fecaca;border-radius:9999px;padding:.12rem .36rem;font-size:.75rem;line-height:1;font-weight:700}

.fc-badge{ display:inline-block; margin-left:.5rem; font-size:.75rem; line-height:1; color:#b91c1c; background:#fee2e2; border:1px solid #fecaca; border-radius:999px; padding:2px 8px; vertical-align:middle; }
.fc-badge--rouge{display:inline-block;background:#fee2e2;color:#b91c1c;border:1px solid #fecaca;border-radius:9999px;padding:.12rem .36rem;font-size:.75rem;line-height:1;font-weight:700}
.fc-badge--green{display:inline-block;background:#fee2e2;color:green;border:1px solid #fecaca;border-radius:9999px;padding:.12rem .36rem;font-size:.75rem;line-height:1;font-weight:700}
.fc-badge--orange{display:inline-block;background:#fee2e2;color:orange;border:1px solid #fecaca;border-radius:9999px;padding:.12rem .36rem;font-size:.75rem;line-height:1;font-weight:700}



/* ====== HERO (style atelier/chauffagiste) ====== /*/
.fc-hero{ margin:.25rem 0 1rem 0; padding:1rem 1.25rem; border:1px solid #cbd5e1; border-radius:12px;
  background: linear-gradient(180deg, #f3f4f6 0%, #ffffff 70%), repeating-linear-gradient(135deg, rgba(0,0,0,.025) 0, rgba(0,0,0,.025) 8px, transparent 8px, transparent 16px);
  box-shadow:0 4px 18px rgba(0,0,0,.06);
  display:grid; grid-template-columns:56px 1fr; gap:1rem; align-items:center;
}
.fc-intro {}

.fc-hero .fc-ico{ width:56px; height:56px; border-radius:12px; border:1px solid #94a3b8;
  background: radial-gradient(ellipse at 30% 30%, rgba(255,255,255,.4), transparent 60%), linear-gradient(180deg,#e5e7eb,#cbd5e1);
  box-shadow: inset 0 2px 6px rgba(0,0,0,.08), 0 2px 8px rgba(0,0,0,.06); display:flex; align-items:center; justify-content:center;
}
.fc-hero .fc-ico svg{ width:28px; height:28px; color:#1f2937; }
.fc-hero h1{ margin:0; font-size:2.05rem; line-height:1.2; font-weight:900; letter-spacing:.2px; color:#111827; }
.fc-hero .fc-sub{ margin-top:.25rem; font-size:.96rem; color:#374151; }
.fc-hero .fc-accent{ display:inline-block; width:68px; height:3px; background:#334155; border-radius:999px; margin:.55rem 0 0 0; }

 

js-sel-ico {}
js-sel-label{}
fc-js-sel-save{}
fc-fav-btn {}






.fc-energy-nav{
  display:flex; align-items:center; gap:.35rem;
  /* margin:0 0 .75rem 0; padding:0 .35rem; */
  /* margin:.25rem 0 .75rem 0; padding:.25rem .35rem; */
  margin:.25rem 0 .75rem 0; padding:.25rem .35rem;
  border:1px solid #e5e7eb; border-radius:9999px; background:#fff;
  overflow:auto; white-space:nowrap; font-size:.88rem; /* texte plus petit */
  line-height:1.2;
}
.fc-energy-nav .item{
  display:inline-flex; align-items:center;
  
  /* hauteur réduite */
  /* padding:0 .55rem; */
  padding:.25rem .55rem; 
  border:1px solid #e5e7eb; border-radius:9999px;
  text-decoration:none; font-size:.88rem; color:#334155; background:#f8fafc;
  transition:background .2s, border-color .2s, color .2s, transform .15s;
}
.fc-energy-nav .item:hover{
  background:#eef2ff; border-color:#c7d2fe; color:#1e3a8a;
}
.fc-energy-nav .item.is-active{
  background:#1d4ed8; color:#fff; border-color:#1d4ed8; font-weight:600;
}
@media (max-width:640px){
  .fc-energy-nav{ border-radius:12px; padding:.35rem .4rem; }
}

