/* ------------------------------------------------------------------
   Rosace interactive des fonctions de la suite Mecaflux
   Remplace l'ancienne image-map Fireworks (31 JPG de survol).
   Le bloc est construit par js/rosace.js dans <div id="rosace-fonctions">.
------------------------------------------------------------------ */
#rosace-fonctions{
  --ros-std:#8FBF5E;        /* Mecaflux Standard */
  --ros-pro3d:#3FA796;      /* Mecaflux Pro 3D   */
  --ros-heliciel:#5D9B33;   /* Heliciel          */
  --ros-cfd:#2E6FA3;        /* Heliciel PRO CFD  */
  --ros-suite:#33383D;      /* Mecaflux Suite    */
  --ros-encre:#22262a;
  --ros-gris:#6d7379;
  --ros-trait:#d8dde1;
  max-width:820px;
  margin:0 auto;
  font-family:"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  color:var(--ros-encre);
  text-align:left;
}
#rosace-fonctions *{box-sizing:border-box}
/* Les feuilles du site justifient le texte, colorent des fonds et stylent des
   classes de meme nom : on neutralise cet heritage sur le bloc de la rosace. */
#rosace-fonctions p,
#rosace-fonctions span,
#rosace-fonctions button{
  background:none;text-align:left;text-indent:0;text-transform:none;
  letter-spacing:normal;text-decoration:none;font-style:normal;
}

#rosace-fonctions .ros-svg{
  display:block;width:100%;height:auto;max-width:820px;margin:0 auto;
  -webkit-tap-highlight-color:transparent;
}

/* --- états --- */
#rosace-fonctions .ros-petale,
#rosace-fonctions .ros-anneau,
#rosace-fonctions .ros-centre{cursor:pointer}
#rosace-fonctions .ros-petale-forme,
#rosace-fonctions .ros-anneau-forme{transition:opacity .15s ease, filter .15s ease}
#rosace-fonctions .ros-petale text,
#rosace-fonctions .ros-anneau text{pointer-events:none;-webkit-user-select:none;user-select:none}
#rosace-fonctions svg.ros-filtre .ros-petale-forme{opacity:.18}
#rosace-fonctions svg.ros-filtre .ros-petale.ros-actif .ros-petale-forme{opacity:1}
#rosace-fonctions .ros-petale.ros-actif .ros-petale-forme{filter:drop-shadow(0 0 6px rgba(0,0,0,.35))}
#rosace-fonctions svg.ros-filtre .ros-anneau-forme{opacity:.25}
#rosace-fonctions svg.ros-filtre .ros-anneau.ros-actif .ros-anneau-forme{opacity:1}
#rosace-fonctions .ros-petale:focus,
#rosace-fonctions .ros-anneau:focus,
#rosace-fonctions .ros-centre:focus{outline:none}
#rosace-fonctions .ros-petale:focus-visible .ros-petale-forme,
#rosace-fonctions .ros-anneau:focus-visible .ros-anneau-forme{stroke:#111;stroke-width:2.5}

/* --- bandeau de légende --- */
#rosace-fonctions .ros-legende{
  max-width:820px;margin:8px auto 0;min-height:104px;
  border:1px solid var(--ros-trait);border-radius:10px;padding:14px 18px;background:#fbfcfc;
}
#rosace-fonctions .ros-legende .ros-titre{
  font-weight:600;font-size:1.02rem;margin:0 0 4px;
  display:flex;align-items:center;gap:8px;flex-wrap:wrap;
}
#rosace-fonctions .ros-legende .ros-pastille{width:12px;height:12px;border-radius:50%;flex:0 0 auto}
#rosace-fonctions .ros-legende .ros-texte{margin:0;font-size:.92rem;line-height:1.45;color:#3b4146}
#rosace-fonctions .ros-legende .ros-produits{margin:8px 0 0;font-size:.82rem;color:var(--ros-gris)}
#rosace-fonctions .ros-legende .ros-produits b{color:var(--ros-encre);font-weight:600}
#rosace-fonctions .ros-legende.vide .ros-texte{color:var(--ros-gris);font-style:italic}

/* --- rappel des produits (indispensable au tactile) --- */
#rosace-fonctions .ros-chips{
  display:flex;flex-wrap:wrap;gap:8px;justify-content:center;max-width:820px;margin:14px auto 0;
}
#rosace-fonctions .ros-chip{
  display:inline-flex;align-items:center;gap:7px;border:1px solid var(--ros-trait);
  border-radius:999px;padding:6px 13px;font-size:.84rem;background:#fff;color:var(--ros-encre);
  cursor:pointer;transition:background .15s;font-family:inherit;
}
#rosace-fonctions .ros-chip:hover,
#rosace-fonctions .ros-chip:focus-visible{background:#f2f5f7}
#rosace-fonctions .ros-chip i{width:11px;height:11px;border-radius:50%;display:inline-block}

@media (max-width:560px){
  #rosace-fonctions .ros-legende{min-height:132px}
}