/* ============================================================
   ARGANE \002014 Configurateur \0000ab filtre ouvert \0000bb (composant partag\0000e9)
   ------------------------------------------------------------
   Styles du filtre \0000e0 facettes + bascule guid\0000e9 / filtre ouvert.
   Inclure dans le <head>, APR\0000c8S argane-configurateur.css :
       <link rel="stylesheet" href="components/argane-configurateur-fo.css" />
   R\0000e9utilise les cartes r\0000e9sultat (.reco-card, .reco-specs, \002026) d\0000e9j\0000e0
   d\0000e9finies pour le parcours guid\0000e9.
   ============================================================ */

/* ===== Bascule guid\0000e9 / filtre ouvert (segmented control, fond clair) ===== */
.guide-head-actions{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
  flex-wrap:wrap;
}
.cfg-toggle{
  display:inline-flex;
  align-items:center;
  gap:4px;
  background:var(--forge-08);
  border-radius:999px;
  padding:4px;
}
.cfg-toggle .cfg-seg{
  font-family:var(--ff-body);
  font-size:13px;
  font-weight:600;
  letter-spacing:0.01em;
  color:var(--ink-70);
  padding:9px 18px;
  border-radius:999px;
  white-space:nowrap;
  cursor:pointer;
  transition:background .2s ease, color .2s ease;
}
.cfg-toggle .cfg-seg.is-active{
  background:var(--forge);
  color:var(--paper);
}
.cfg-toggle .cfg-seg:not(.is-active):hover{ color:var(--forge); }

/* Board masqu\0000e9 \002014 surcharge le display:flex de .guide-board */
.guide-board[hidden]{ display:none !important; }

/* ============================================================
   FILTRE OUVERT \002014 facettes + r\0000e9sultats (board sombre)
   ============================================================ */
.fo-body{ display:grid; grid-template-columns:256px 1fr; gap:clamp(32px, 4vw, 64px); align-items:start; }

/* ---- Panneau de facettes (colonne gauche) ---- */
.fo-facets{ display:flex; flex-direction:column; gap:30px; position:sticky; top:32px; }
.fo-facet-label{
  font-family:var(--ff-body); font-size:11px; font-weight:600;
  letter-spacing:0.18em; text-transform:uppercase;
  color:rgba(250,250,250,0.5); margin:0 0 14px;
}
.fo-opts{ display:flex; flex-direction:column; gap:8px; }
/* Diam\0000e8tre : pilules compactes \0000e0 largeur de contenu, align\0000e9es \0000e0 gauche, se suivant naturellement */
.fo-opts--grid{ display:flex; flex-direction:row; flex-wrap:wrap; gap:8px; }
.fo-opt{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  width:100%; text-align:left;
  font-family:var(--ff-body); font-size:14px; font-weight:400; color:var(--paper);
  background:rgba(250,250,250,0.04);
  border:1px solid var(--ink-10); border-radius:10px;
  padding:11px 14px; cursor:pointer;
  transition:background .18s ease, border-color .18s ease, color .18s ease, transform .12s ease;
}
.fo-opts--grid .fo-opt{ width:auto; flex:0 0 auto; justify-content:center; flex-direction:row; gap:0; text-align:center; padding:9px 15px; white-space:nowrap; }
.fo-opt:hover{ border-color:rgba(250,250,250,0.32); transform:translateY(-1px); }
.fo-opt.sel{ background:var(--braise); border-color:var(--braise); color:#fff; font-weight:500; }
.fo-opt-label{ line-height:1.25; }
.fo-opt-count{
  font-family:var(--ff-body); font-size:11px; color:rgba(250,250,250,0.62);
  font-variant-numeric:tabular-nums; white-space:nowrap;
}
/* Sur les pilules diam\0000e8tre, on masque le compteur pour garder des chips l\0000e9g\0000e8res (l'\0000e9tat indisponible reste signal\0000e9 par le grisage) */
.fo-opts--grid .fo-opt-count{ display:none; }
.fo-opt.sel .fo-opt-count{ color:rgba(255,255,255,0.85); }
.fo-opt.is-disabled{ opacity:0.3; pointer-events:none; filter:grayscale(0.55); }
.fo-opt--disque{ opacity:0.3; }
.fo-facet-note{
  font-family:var(--ff-body); font-size:11.5px; font-style:italic; line-height:1.45;
  color:rgba(250,250,250,0.4); margin:10px 2px 0;
}

/* ---- Colonne r\0000e9sultats (droite) ---- */
.fo-results-head{ margin-bottom:24px; }
.fo-count{ display:flex; align-items:baseline; gap:12px; margin-bottom:18px; }
.fo-count .c-num{
  font-family:var(--ff-display); font-weight:600; font-size:46px; line-height:1;
  color:var(--braise); font-variant-numeric:tabular-nums;
}
.fo-count .c-label{ font-family:var(--ff-body); font-size:14px; color:rgba(250,250,250,0.6); }

/* \0000c9tiquettes de filtres actifs + reset */
.fo-active{ display:flex; flex-wrap:wrap; align-items:center; gap:10px; min-height:34px; }
.fo-chip{
  display:inline-flex; align-items:center; gap:8px;
  font-family:var(--ff-body); font-size:13px; color:var(--paper);
  background:rgba(250,250,250,0.06); border:1px solid var(--ink-15);
  border-radius:999px; padding:6px 8px 6px 14px;
}
.fo-chip .fo-chip-x{
  display:inline-flex; align-items:center; justify-content:center;
  width:18px; height:18px; border-radius:50%;
  background:rgba(250,250,250,0.10); color:var(--paper);
  font-size:13px; line-height:1; cursor:pointer; transition:background .15s ease;
}
.fo-chip .fo-chip-x:hover{ background:var(--braise); }
.fo-reset{
  font-family:var(--ff-body); font-size:13px; font-weight:500; color:rgba(250,250,250,0.7);
  border-bottom:1px solid rgba(250,250,250,0.28); padding-bottom:2px;
  cursor:pointer; transition:color .18s ease, border-color .18s ease; background:none;
}
.fo-reset:hover{ color:var(--braise); border-color:var(--braise); }
.fo-active-empty{ font-family:var(--ff-body); font-size:13px; font-style:italic; color:rgba(250,250,250,0.4); }

.fo-cards{ display:flex; flex-direction:column; gap:22px; margin-top:28px; }
.fo-empty{
  font-family:var(--ff-body); font-size:15px; line-height:1.55; color:var(--paper);
  margin-top:28px; padding:22px 24px;
  background:rgba(238,39,55,0.10); border-left:2px solid var(--braise); border-radius:0 10px 10px 0;
}
.fo-prompt{
  display:flex; flex-direction:column; gap:10px;
  margin-top:28px; padding:clamp(28px,3vw,40px) clamp(24px,2.4vw,34px);
  border:1px dashed var(--ink-15); border-radius:12px;
  background:rgba(250,250,250,0.02);
}
.fo-prompt-title{ font-family:var(--ff-display); font-weight:500; font-size:clamp(18px,1.6vw,21px); letter-spacing:-0.01em; color:var(--paper); margin:0; }
.fo-prompt-sub{ font-family:var(--ff-body); font-size:14px; line-height:1.55; color:rgba(250,250,250,0.55); margin:0; max-width:50ch; }

.fo-subtitle{ font-family:var(--ff-body); font-size:clamp(15px,1.15vw,17px); line-height:1.55; color:var(--ink-70,#324354); max-width:520px; margin:18px 0 0; }

@media (max-width:1024px){
  .fo-body{ grid-template-columns:1fr; gap:40px; }
  .fo-facets{ position:static; }
}
@media (max-width:768px){
  .guide-head-actions{ gap:16px; }
}
@media (max-width:520px){
  .cfg-toggle{ width:100%; }
  .cfg-toggle .cfg-seg{ flex:1; text-align:center; padding:9px 10px; }
}