/* Le widget panier de WS skillshop. Feuille a part : il s'affiche aussi la ou celle du
   panier n'est pas chargee (constructeurs, visiteur hors de la portee d'activation).

   Sans couleur choisie il suit le theme, comme le panier de Blocksy : icone et libelle
   prennent la couleur du texte, le survol celle des liens, le badge celle des boutons. */
a.skp-wpanier.skp-wpanier {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 40px;
  margin: var(--skpw-m, 0);
  color: var(--skpw-c, var(--theme-text-color, currentColor));
  line-height: 1;
  text-decoration: none;
  vertical-align: middle;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: color .15s ease;
}

a.skp-wpanier.skp-wpanier:hover,
a.skp-wpanier.skp-wpanier:focus-visible {
  color: var(--skpw-ch, var(--theme-link-hover-color, var(--skpw-c, currentColor)));
  text-decoration: none;
}

a.skp-wpanier.skp-wpanier:active .skp-wpanier__i { transform: translateY(1px); }
a.skp-wpanier.skp-wpanier:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; border-radius: 6px; }

/* Position du libelle : dans la page il est avant l'icone. */
.skp-wpanier--droite.skp-wpanier--droite { flex-direction: row-reverse; }
.skp-wpanier--bas.skp-wpanier--bas { flex-direction: column-reverse; gap: 5px; }

.skp-wpanier__i { position: relative; display: inline-flex; flex: none; }

/* Les themes colorent parfois les svg de l'en-tete : le dessin garde sa forme. */
.skp-wpanier .skp-wpanier__svg {
  display: block;
  width: var(--skpw-t, 22px);
  height: var(--skpw-t, 22px);
  max-width: none;
  margin: 0;
}

.skp-wpanier .skp-wpanier__svg.is-plein { fill: currentColor; stroke: none; }
.skp-wpanier .skp-wpanier__svg.is-trait { fill: none; stroke: currentColor; }

.skp-wpanier .skp-wpanier__n {
  position: absolute;
  top: -7px;
  right: -9px;
  display: grid;
  place-items: center;
  box-sizing: border-box;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  border-radius: 9px;
  background: var(--skpw-p, var(--theme-button-background-initial-color, #111116));
  color: var(--skpw-pt, var(--theme-button-text-initial-color, #fff));
  font-size: 10px;
  font-weight: 700;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.skp-wpanier .skp-wpanier__n[hidden],
.skp-wpanier .skp-wpanier__n.is-sans { display: none; }

.skp-wpanier__t {
  color: var(--skpw-lc, inherit);
  font-size: var(--skpw-lt, 13px);
  font-weight: var(--skpw-lg, 600);
  line-height: 1.2;
  white-space: nowrap;
  transition: color .15s ease;
}

a.skp-wpanier:hover .skp-wpanier__t { color: var(--skpw-lh, var(--skpw-lc, inherit)); }

/* Masquer le panier vide. */
.skp-wpanier--masquer-vide:has(.skp-wpanier__n[hidden]) { display: none !important; }

/* Par appareil : memes limites que le constructeur de Blocksy. */
@media (min-width: 1000px) {
  .skp-wcache-o { display: none !important; }
}

@media (max-width: 999.98px) {
  a.skp-wpanier.skp-wpanier { margin: var(--skpw-mt, var(--skpw-m, 0)); }
  .skp-wpanier .skp-wpanier__svg { width: var(--skpw-tt, var(--skpw-t, 22px)); height: var(--skpw-tt, var(--skpw-t, 22px)); }
}

@media (min-width: 690px) and (max-width: 999.98px) {
  .skp-wcache-t { display: none !important; }
}

@media (max-width: 689.98px) {
  a.skp-wpanier.skp-wpanier { margin: var(--skpw-mm, var(--skpw-mt, var(--skpw-m, 0))); }
  .skp-wpanier .skp-wpanier__svg { width: var(--skpw-tm, var(--skpw-tt, var(--skpw-t, 22px))); height: var(--skpw-tm, var(--skpw-tt, var(--skpw-t, 22px))); }
  .skp-wcache-m { display: none !important; }
}