/* Produit par maquettes/programmes/exporter_site.mjs : la colonne des espaces de programmes.css, pour parcours.html. */
/* ---------- Le bouton et la colonne des espaces ---------- */
.ouvrir-espaces {
  width: 34px; height: 34px; margin-right: -18px; border: 0; border-radius: 6px; background: transparent;
  display: grid; place-items: center; cursor: pointer; color: var(--doux); flex: none;
}
.ouvrir-espaces svg { width: 22px; height: 22px; fill: currentColor; transition: transform .2s; }
.ouvrir-espaces:hover, .ouvrir-espaces[aria-expanded="true"] { color: var(--texte); background: rgba(255,255,255,.06); }
.ouvrir-espaces[aria-expanded="true"] svg { transform: rotate(180deg); }

.espaces {
  position: fixed; inset: 0 auto 0 0; z-index: 40; width: min(340px, 86vw);
  background: rgba(16,16,15,.98); border-right: 1px solid var(--trait);
  transform: translateX(-102%); transition: transform .28s cubic-bezier(.2,.7,.2,1);
  display: grid; grid-template-rows: auto 1fr; padding: 18px 16px 24px; gap: 18px; overflow-y: auto;
}
.espaces.ouvert { transform: none; box-shadow: 24px 0 60px rgba(0,0,0,.55); }
.espaces-tete { display: flex; align-items: center; justify-content: space-between; min-height: 34px; padding-left: 4px; }
.fermer-espaces { width: 34px; height: 34px; border: 0; border-radius: 50%; background: transparent; font-size: 24px; line-height: 1; cursor: pointer; color: var(--doux); }
.fermer-espaces:hover { color: var(--texte); background: var(--carte); }
.espaces-liste { display: grid; gap: 10px; align-content: start; }
.espace {
  position: relative; display: grid; align-content: end; min-height: 112px; padding: 14px 16px;
  border-radius: 10px; overflow: hidden; isolation: isolate; background: #1a1a17 center 22% / cover;
  box-shadow: 0 0 0 1px rgba(255,255,255,.05) inset; transition: box-shadow .2s, transform .2s;
}
.espace::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(to top, rgba(0,0,0,.9) 15%, rgba(0,0,0,.25) 85%); }
.espace b { font-family: var(--titre); font-size: 22px; font-weight: 700; line-height: 1.1; }
.espace small { color: var(--doux); font-size: 13px; }
.espace:hover { transform: translateX(3px); box-shadow: 0 0 0 2px var(--papier); }
.espace.actif { box-shadow: 0 0 0 2px var(--papier); }
.espace.verrou { filter: grayscale(1); }
.espace.verrou b, .espace.verrou small { color: var(--doux); }
.espace .verrou-ic { inset: 12px 12px auto auto; place-items: start end; }
.espace .verrou-ic svg { width: 20px; height: 20px; }
.espaces-voile { position: fixed; inset: 0; z-index: 35; background: rgba(0,0,0,.5); opacity: 0; pointer-events: none; transition: opacity .25s; }
.espaces-voile.ouvert { opacity: 1; pointer-events: auto; }
@media (hover: hover) and (min-width: 900px) { .espaces-voile.ouvert { background: rgba(0,0,0,.25); } }