.barre{--barre-marge:clamp(1.25rem, 17.8vw - 138px, 12rem);--barre-max:1320px;left:var(--barre-marge);right:var(--barre-marge);inset-inline:var(--barre-marge);max-width:var(--barre-max);margin-inline:auto}@media (max-width:48rem){.barre{--barre-marge:clamp(.6rem, 3vw, 1.25rem)}}.barre .barre-rangee,.barre .barre-rangee nav{gap:clamp(.9em,2vw,1.75em)}.matiere{border:0;align-items:center;min-inline-size:0;margin:0;padding:0;display:inline-flex}.matiere-etiquette{color:var(--color-second);padding:0;font-size:.8125em}.matiere-piste{border:1px solid var(--color-filet);background:var(--color-creux);border-radius:9999px;align-items:center;gap:.15em;padding:.16em;display:inline-flex}.matiere-position{white-space:nowrap;color:var(--color-second);cursor:pointer;transition:background-color .16s var(--ease-xlab), border-color .16s var(--ease-xlab), color .16s var(--ease-xlab);background:0 0;border:1px solid #0000;border-radius:9999px;align-items:center;padding:.42em .72em;font-size:.8125em;line-height:1.1;display:inline-flex;position:relative}.matiere-bouton{opacity:0;appearance:none;cursor:pointer;width:100%;height:100%;margin:0;padding:0;position:absolute;inset:0}.matiere-position:hover{color:var(--color-titre)}html[data-matiere=clair] .matiere-position[data-valeur=clair],html[data-matiere=flou] .matiere-position[data-valeur=flou],html[data-matiere=opaque] .matiere-position[data-valeur=flou]{background:var(--color-plaque);border-color:var(--color-filet);color:var(--color-titre)}.matiere-position:has(.matiere-bouton:focus-visible){outline:2px solid var(--color-vert-700);outline-offset:2px}@media (prefers-reduced-motion:reduce){.matiere-position{transition:none}}html[data-matiere=clair][data-sous=media] .barre[data-pose=oui]{background-color:color-mix(in srgb, var(--color-plaque) 72%, transparent);-webkit-backdrop-filter:blur(18px)saturate(180%);backdrop-filter:blur(18px)saturate(180%);border-color:color-mix(in srgb, var(--color-titre) 9%, transparent)}@supports not ((-webkit-backdrop-filter:blur(1px)) or (backdrop-filter:blur(1px))){html[data-matiere=clair][data-sous=media] .barre[data-pose=oui]{background-color:var(--color-plaque)}}@media (prefers-reduced-transparency:reduce){html[data-matiere=clair][data-sous=media] .barre[data-pose=oui]{background-color:var(--color-plaque);-webkit-backdrop-filter:none;backdrop-filter:none}}@media (max-width:79.99rem){.barre-rangee .matiere{display:none}}.matiere-panneau{width:100%;display:block}.matiere-panneau .matiere-piste{margin-top:.6em}
