/* ─────────────────────────────────────────────────────────
   bc-cards.css — composant carte produit partagé
   Accent : variable --u définie sur le conteneur parent
   (ex: .bento, .content-block). Fallback : --cop (teal).
───────────────────────────────────────────────────────── */

@import url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/all.min.css');

/* ── Carte de base ── */
.bc{
  background:var(--white);
  border:1px solid var(--border);
  border-radius:var(--r-lg);
  padding:26px;
  display:flex;
  flex-direction:column;
  transition:all .2s;
  cursor:pointer;
  position:relative;
  overflow:hidden;
  color:inherit;
  text-decoration:none;
}
.bc:hover{
  border-color:var(--u,var(--cop));
  transform:translateY(-2px);
  box-shadow:0 8px 28px color-mix(in srgb,var(--u,var(--cop)) 18%,transparent);
}

/* ── Stripe (masquée par défaut) ── */
.bc-stripe{display:none}

/* ── En-tête + pill ── */
.bc-header{display:flex;justify-content:flex-start;align-items:center;margin-bottom:16px}
.bc-pill{
  display:inline-flex;align-items:center;gap:8px;
  font-size:var(--ty-xs);font-weight:700;letter-spacing:.5px;text-transform:uppercase;
  color:var(--u,var(--cop));
  background:color-mix(in srgb,var(--u,var(--cop)) 10%,transparent);
  border:1.5px solid var(--u,var(--cop));
  border-radius:100px;padding:8px 14px;
}
.bc-pill svg{
  width:16px;height:16px;flex-shrink:0;
  fill:none;stroke:currentColor;
  stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;
}
.bc-pill i{font-size:var(--ty-xs);flex-shrink:0;width:14px;text-align:center}

/* ── Contenu ── */
.bc-title{font-size:var(--ty-h4-size);font-weight:600;color:var(--u,var(--cop));margin-bottom:6px;line-height:1.3}
.bc-desc{font-size:var(--ty-xs);color:var(--text2);line-height:1.65;flex:1;margin-bottom:18px;font-weight:300}
.bc-link{
  display:inline-flex;align-items:center;gap:5px;
  font-size:var(--ty-xs);font-weight:600;
  color:var(--text);
  margin-top:auto;padding-bottom:2px;
  background-image:linear-gradient(currentColor,currentColor);
  background-size:0 1.5px;background-position:0 100%;background-repeat:no-repeat;
  transition:background-size .25s ease,gap .2s;
}
.bc:hover .bc-link{gap:9px;background-size:100% 1.5px}

/* ── Variante dashed (bientôt / partenaire) ── */
.bc.bc-dashed{border-style:dashed;border-color:var(--border2)}
.bc.bc-dashed:hover{border-style:solid}

/* ── Carte "Voir tout" ── */
.bc-all{
  border:2px dashed var(--border);background:transparent;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:10px;color:var(--text3);transition:all .2s;
}
.bc-all:hover{border-color:var(--u,var(--cop));color:var(--u,var(--cop));transform:none;box-shadow:none}
.bc-all-ico{
  width:36px;height:36px;border-radius:50%;
  border:1.5px solid currentColor;
  display:flex;align-items:center;justify-content:center;
}
.bc-all span{font-size:var(--ty-xs);font-weight:600}

/* ── Tags ── */
.bc-tags{display:flex;flex-wrap:wrap;gap:6px;margin-top:14px}
.bc-tag{
  font-size:var(--ty-xs);font-weight:400;color:#A8B1BC;
  background:#F7F7FA;border:1px solid #A8B1BC;
  border-radius:100px;padding:5px 14px;
}

/* ── Variante avec visuel (articles) : image 16:9 bord à bord en tête de carte ──
   Emplacement toujours présent : tant qu'il n'y a pas d'image, teinte de la couleur --u + pictogramme.
   Les images viennent du registre js/articles.js (image:true → images/actualites/<slug>.jpg), jamais écrites à la main. */
.bc.bc-media{padding:0}
.bc-media-img{aspect-ratio:16/9;flex-shrink:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;
  background:color-mix(in srgb,var(--u,var(--cop)) 14%,#fff) center/cover no-repeat;color:var(--u,var(--cop));transition:transform .35s ease}
.bc-media-img i{font-size:34px}
.bc-media-img span{font-size:var(--ty-xs);font-weight:600;letter-spacing:.6px;text-transform:uppercase;color:var(--text2)}  /* texte lisible (≥4,5:1), plus de transparence */
.bc-media-img.has-img i,.bc-media-img.has-img span{display:none}
.bc-media-img.has-img{padding:0;background:none}
.bc-media-img.has-img img{display:block;width:100%;height:100%;object-fit:cover}
.bc-media-clip{overflow:hidden}              /* le zoom au survol reste dans la carte */
.bc.bc-media:hover .bc-media-img{transform:scale(1.04)}
.bc-media-body{padding:22px 26px 26px;display:flex;flex-direction:column;flex:1}

/* ── Cartes d'articles SOBRES (demande de l'utilisateur : « moins carnaval ») ──
   Plus de teinte par catégorie (le registre en compte 9, chacune avait sa couleur) : emplacement d'image gris très clair, pastille de catégorie neutre
   (liseré fin), titre marine, survol marine. La catégorie reste lisible par le texte de la pastille ; les cartes PRODUIT (.bc sans .bc-media) gardent
   la couleur de leur univers. */
.bc.bc-media:hover{border-color:var(--text);box-shadow:0 8px 28px rgba(28,28,54,.1)}
.bc-media .bc-media-img:not(.has-img){background-color:color-mix(in srgb,var(--text) 6%,#fff);color:var(--text2)}
.bc-media .bc-pill{color:var(--text2);background:transparent;border:1px solid var(--border2);font-weight:600}
.bc-media .bc-title{color:var(--text)}

/* ── Grille bento ── */
.bento{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.bento[data-content="immeubles"]{--u:var(--cop)}
.bento[data-content="locative"]{--u:var(--bil)}
.bento[data-content="pro"]{--u:var(--pro)}
.bento[data-content="entreprise"]{--u:var(--ent)}
@media(max-width:768px){.bento{grid-template-columns:1fr}}

/* ── Onglets "par univers" (sélecteur au-dessus des .bento / grille solutions) ──
   Accent : variable --u posée en inline sur chaque onglet (js/products.js renderUnivTabs).
   Même composant que .bc : jamais de couleur en dur, toujours issu du token de l'univers. */
.univ-tabs,.h2-tab-bar,.sol-univtabs{display:flex;gap:8px;flex-wrap:wrap}
.univ-tab{
  display:inline-flex;align-items:center;gap:6px;
  font-size:var(--ty-xs);font-weight:400;color:var(--text);
  padding:7px 14px;border-radius:100px;border:none;cursor:pointer;
  transition:color .3s ease .1s,background .2s;white-space:nowrap;font-family:'Poppins',sans-serif;
  text-decoration:none;
  background:color-mix(in srgb,var(--u,var(--text)) 15%,white);
  position:relative;overflow:hidden;isolation:isolate;
}
/* Survol : la couleur de l'univers se déploie de gauche à droite et le texte passe en blanc (même effet que les boutons) ;
   l'onglet actif est déjà plein, il ne bouge pas */
.univ-tab::before{content:'';position:absolute;inset:0;z-index:-1;background:var(--u,var(--text));transform:scaleX(0);transform-origin:left center;transition:transform .45s cubic-bezier(.22,1,.36,1)}
.univ-tab:hover,.univ-tab:focus-visible{color:var(--white)}
.univ-tab:hover::before,.univ-tab:focus-visible::before{transform:scaleX(1)}
.univ-tab.on::before{display:none}
@media(prefers-reduced-motion:reduce){.univ-tab::before{transition:none}}
.univ-tab.on{color:var(--white);background:var(--u,var(--text))}
.univ-tab[data-tab="all"],.univ-tab[data-universe-filter="all"]{background:rgba(28,28,54,.12);color:var(--text)}
.univ-tab[data-tab="all"].on,.univ-tab[data-universe-filter="all"].on{background:var(--text);color:var(--white)}
.univ-tab[data-tab="all"]:hover,.univ-tab[data-universe-filter="all"]:hover,.univ-tab[data-tab="all"]:focus-visible,.univ-tab[data-universe-filter="all"]:focus-visible{color:var(--white)}

/* ── Carte photo d'univers (accueil, index.html) : grande carte verticale, photo plein cadre + libellé en haut ──
   Rendue par js/products.js (renderUnivPhotoCards) depuis UNIVERSES : libellé, lien et photo (champ `image`) viennent de la source unique.
   Photo ≈ 800×1270 px (ratio 0,63), sans texte dans l'image ; le libellé est posé par-dessus. */
.univ-photo-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.univ-photo{
  position:relative;display:block;isolation:isolate;overflow:hidden;
  border-radius:20px;aspect-ratio:301/538;
  background:var(--u,var(--text));color:#fff;text-decoration:none;
  transition:transform .3s cubic-bezier(.22,1,.36,1),box-shadow .3s;
}
.univ-photo-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-1;transition:transform .6s cubic-bezier(.22,1,.36,1)}
.univ-photo-label{
  display:block;padding:28px 20px 0;text-align:center;
  font-size:var(--ty-h4-size);font-weight:500;line-height:1.45;text-transform:uppercase;
}
.univ-photo:hover{transform:translateY(-4px);box-shadow:0 14px 34px color-mix(in srgb,var(--u,var(--text)) 30%,transparent)}
.univ-photo:hover .univ-photo-img{transform:scale(1.05)}
.univ-photo:focus-visible{outline:3px solid var(--navy,#1c1c36);outline-offset:3px}
@media(max-width:1100px){.univ-photo-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:480px){.univ-photo-grid{grid-template-columns:1fr}.univ-photo{aspect-ratio:4/5}}   /* « PROFESSIONNELS » ne tient pas dans une demi-largeur de téléphone */
@media(prefers-reduced-motion:reduce){.univ-photo,.univ-photo-img{transition:none}.univ-photo:hover{transform:none}.univ-photo:hover .univ-photo-img{transform:none}}