/**
 * Skill Panier - styles front.
 *
 * Tout le design tient dans les variables ci-dessous : le marchand change une
 * couleur dans l'administration, l'ensemble suit. Aucune police ni image
 * externe n'est chargee (performance + RGPD) : la typographie est heritee du
 * theme.
 *
 * La mise en page reagit a la largeur du CONTENEUR (container queries) et non
 * a celle de la fenetre : si un theme place le panier dans une colonne etroite,
 * la bascule en une colonne se fait quand meme.
 */

/* Les variables sont posees sur :root, pas sur .skp.
   Plusieurs de nos elements vivent HORS du conteneur .skp : la bande de
   reassurance et la barre d'achat sont rendues sur woocommerce_after_cart
   (donc apres sa fermeture), et le tiroir est injecte en pied de page. Avec les
   variables limitees a .skp, leurs valeurs etaient introuvables : une
   declaration comme "border-left: 1px solid var(--skp-line)" devient invalide
   et le navigateur la jette purement et simplement. C'est ce qui faisait
   disparaitre les separateurs de la bande et son fond gris.
   Les noms sont prefixes --skp- : aucun risque de collision avec un theme. */
:root {
  --skp-ink: #171717;
  --skp-ink-2: #5c5c66;
  --skp-ink-3: #71717a;
  --skp-bg: #ffffff;
  --skp-surface: #fafafa;
  /* Gris un cran plus marque : sert de PLANCHER aux zones qui doivent se
     distinguer du blanc meme quand la couleur d'accent du marchand est tres
     claire (mesure : #fafafa sur blanc, c'est 5 niveaux d'ecart, invisible). */
  --skp-surface-2: #f1f1f4;
  --skp-line: #e6e6e9;
  --skp-ok: #15803d;
  --skp-ok-soft: #eefaf1;
  --skp-danger: #c2413a;
  --skp-accent-soft: color-mix(in srgb, var(--skp-accent, #171717) 8%, #ffffff);
  --skp-shadow: 0 1px 2px rgba(16, 16, 20, .04), 0 8px 24px -12px rgba(16, 16, 20, .12);
  --skp-shadow-lg: 0 24px 60px -20px rgba(16, 16, 20, .28);
  --skp-fast: .16s;
  --skp-base: .24s;
  --skp-ease: cubic-bezier(.4, 0, .2, 1);
  /* Picto camion en masque CSS : permet de le colorer avec currentColor sans
     ajouter de balise dans un gabarit de WooCommerce qu'on ne reecrit pas. */
  --skp-truck: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 3h13v13H1zM14 8h4l3 3v5h-7'/%3E%3Ccircle cx='5.5' cy='18.5' r='2'/%3E%3Ccircle cx='17.5' cy='18.5' r='2'/%3E%3C/svg%3E");
}

.skp,
.skp-drw,
.skp-drw__ov,
.skp-toast {
  box-sizing: border-box;
}

/* L'attribut hidden doit VRAIMENT masquer.
   Le navigateur applique "display:none" aux elements [hidden] via sa feuille
   par defaut — mais la moindre regle d'auteur qui fixe un display la bat. Nos
   composants sont en display:flex (tiroir, popup de variantes, pastille, champ
   code promo) : ils restaient donc AFFICHES malgre hidden. Constate en
   production : le popup de variantes, vide et transparent, recouvrait tout le
   tiroir et bloquait chaque clic.
   Regle posee une seule fois, portee a nos composants : toute zone que l'on
   masque plus tard heritera du bon comportement sans y penser. */
.skp [hidden],
.skp-drw [hidden],
.skp-drw[hidden],
.skp-drw__ov[hidden],
.skp-bub[hidden],
.skp-vpop[hidden] {
  display: none !important;
}

/* ==========================================================================
   REMISE A ZERO CONFINEE
   Le theme du marchand applique ses propres regles a tout : tableaux, listes,
   titres, boutons. Sans cette barriere, sa feuille de style ecrase la mise en
   page (constate en production : les libelles du recapitulatif s'affichaient
   une lettre par ligne). On neutralise donc UNIQUEMENT sous .skp, et seulement
   ce qui nous appartient : le contenu WooCommerce (prix, variantes) garde ses
   propres styles.
   ========================================================================== */
.skp h1, .skp h2, .skp h3,
.skp p, .skp ul, .skp ol, .skp dl, .skp dd, .skp dt,
.skp figure, .skp form {
  margin: 0;
  padding: 0;
}

.skp ul, .skp ol { list-style: none; }

.skp img { max-width: 100%; height: auto; }

.skp button,
.skp input,
.skp select,
.skp textarea {
  font-family: inherit;
  font-size: inherit;
  line-height: inherit;
  color: inherit;
}

.skp button {
  margin: 0;
  border: 0;
  background: none;
  text-transform: none;
  letter-spacing: normal;
  cursor: pointer;
}

/* Le theme habille TOUS les boutons de la page.
   Mesure sur un site en production : "padding: 15px 30px" impose a chacun de
   nos boutons-icones 60px de large au lieu de 38 (box-sizing: border-box, donc
   le padding devore la largeur demandee) et repousse le pictogramme vers le
   bas. Le selecteur de quantite passait de 88 a 166px, l'icone n'etait plus
   centree.
   On remet donc le padding a zero sur nos boutons carres, SAUF sur .skp-btn qui
   a le sien : le :not() evite d'ecraser la mise en forme de nos vrais boutons.
   min-width neutralise au passage un eventuel gabarit minimum du theme.
   Regle posee une fois pour toutes : tout bouton-icone ajoute plus tard est
   protege sans qu'on ait a y penser. */
.skp button:not(.skp-btn),
.skp-drw button:not(.skp-btn) {
  padding: 0;
  min-width: 0;
}

/* Les liens qui nous servent de boutons ne doivent rien heriter du theme. */
.skp a.skp-btn,
.skp a.skp-btn:hover,
.skp a.skp-btn:focus { text-decoration: none; box-shadow: none; }

.skp table { width: 100%; margin: 0; border: 0; border-collapse: collapse; background: none; }
.skp table th, .skp table td { border: 0; background: none; vertical-align: middle; }

/* Le tiroir vit hors de .skp (il est injecte en pied de page) : il a besoin
   de la meme barriere, sinon le theme habille ses titres et ses boutons. */
.skp-drw h2, .skp-drw h3, .skp-drw p { margin: 0; padding: 0; }
.skp-drw img { max-width: 100%; height: auto; }

.skp-drw button,
.skp-drw input {
  font-family: inherit;
  font-size: inherit;
  line-height: inherit;
  color: inherit;
}

.skp-drw button {
  margin: 0;
  border: 0;
  background: none;
  text-transform: none;
  letter-spacing: normal;
  cursor: pointer;
}

.skp-drw a.skp-btn,
.skp-drw a.skp-btn:hover { text-decoration: none; box-shadow: none; }

/* Le titre de page du theme ferait doublon avec notre en-tete. */
body.skp-cart-on .entry-title,
body.skp-cart-on .page-title,
body.skp-cart-on .woocommerce-products-header__title { display: none; }



.skp *,
.skp *::before,
.skp *::after,
.skp-drw *,
.skp-drw *::before,
.skp-drw *::after {
  box-sizing: border-box;
}

/* ==========================================================================
   PRIMITIVES
   ========================================================================== */
.skp-i {
  width: 18px;
  height: 18px;
  flex: none;
}

.skp-i--sm {
  width: 15px;
  height: 15px;
}

.skp-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 44px;
  padding: 0 20px;
  border: 1px solid transparent;
  border-radius: var(--skp-radius-sm, 10px);
  font-weight: 600;
  font-size: 14.5px;
  line-height: 1.2;
  letter-spacing: -.005em;
  text-decoration: none;
  cursor: pointer;
  transition: transform var(--skp-fast) var(--skp-ease),
              background var(--skp-fast) var(--skp-ease),
              border-color var(--skp-fast) var(--skp-ease),
              color var(--skp-fast) var(--skp-ease);
}

.skp-btn:active { transform: translateY(1px); }

.skp-btn--primary {
  background: var(--skp-accent, #171717);
  color: var(--skp-accent-fg, #fff);
}

.skp-btn--primary:hover { filter: brightness(1.14); color: var(--skp-accent-fg, #fff); }

.skp-btn--block { width: 100%; height: 52px; font-size: 15.5px; }

.skp-btn--ghost {
  background: transparent;
  border-color: var(--skp-line);
  color: var(--skp-ink);
}

.skp-btn--ghost:hover { border-color: var(--skp-accent, #171717); color: var(--skp-accent, #171717); }

.skp-btn--quiet {
  background: none;
  border: 0;
  min-height: auto;
  padding: 6px 2px;
  font-weight: 500;
  font-size: 13.5px;
  color: var(--skp-ink-2);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.skp-btn--quiet:hover { color: var(--skp-accent, #171717); }

/* ==========================================================================
   FIL D'ETAPES
   ========================================================================== */
.skp-steps {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 22px;
  font-size: 13px;
  color: var(--skp-ink-3);
}

.skp-steps__i { display: flex; align-items: center; gap: 7px; }

/* Le chiffre doit tomber au centre exact de la pastille.
   Trois heritages du theme le decalaient :
     - line-height : une hauteur de ligne de 1,6 depasse la pastille de 19px,
       le glyphe est alors pousse vers le bas ;
     - letter-spacing : l'espacement s'ajoute APRES le caractere, ce qui
       decale visuellement un chiffre seul vers la gauche ;
     - text-indent, applique par certains themes aux blocs.
   On neutralise les trois plutot que de compenser au pixel. */
.skp-steps__n {
  width: 22px;
  height: 22px;
  flex: none;
  border: 1.5px solid var(--skp-line);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  font-size: 11.5px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0;
  text-indent: 0;
  font-variant-numeric: tabular-nums;
}

.skp-steps__n .skp-i { width: 12px; height: 12px; }

.skp-steps__i.is-on { color: var(--skp-ink); font-weight: 600; }

.skp-steps__i.is-on .skp-steps__n {
  background: var(--skp-accent, #171717);
  border-color: var(--skp-accent, #171717);
  color: var(--skp-accent-fg, #fff);
}

.skp-steps__sep { width: 26px; height: 1px; background: var(--skp-line); }

/* ==========================================================================
   BANDEAU HAUT : SEUIL + MESSAGES
   Les diapositives sont empilees dans une meme cellule de grille : la boite
   garde la hauteur de la plus grande, donc aucun saut au defilement.
   ========================================================================== */
.skp-top {
  padding: 15px 20px 13px;
  margin-bottom: 14px;
  border: 1px solid var(--skp-line);
  border-radius: var(--skp-radius, 14px);
  background: var(--skp-surface);
  transition: background var(--skp-base) var(--skp-ease), border-color var(--skp-base) var(--skp-ease);
}

.skp-top__view { display: grid; }

.skp-top__slide {
  grid-area: 1 / 1;
  opacity: 0;
  visibility: hidden;
  transform: translateY(5px);
  transition: opacity var(--skp-base) var(--skp-ease),
              transform var(--skp-base) var(--skp-ease),
              visibility var(--skp-base);
}

.skp-top__slide.is-on { opacity: 1; visibility: visible; transform: none; }

.skp-top__dots { display: flex; gap: 6px; justify-content: center; margin-top: 11px; }

.skp-top[data-mode="single"] .skp-top__dots { display: none; }

.skp-top__dot {
  width: 6px;
  height: 6px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--skp-line);
  position: relative;
  cursor: pointer;
  transition: all var(--skp-fast) var(--skp-ease);
}

.skp-top__dot::after { content: ""; position: absolute; inset: -8px; }

.skp-top__dot:hover { background: var(--skp-ink-3); }

.skp-top__dot[aria-current="true"] {
  width: 18px;
  border-radius: 3px;
  background: var(--skp-accent, #171717);
}

.skp-top.is-done {
  background: var(--skp-ok-soft);
  border-color: color-mix(in srgb, var(--skp-ok) 30%, transparent);
}

.skp-thr__top { display: flex; align-items: center; gap: 10px; margin-bottom: 11px; }
.skp-thr__ic { color: var(--skp-ink-2); }
.skp-thr__txt { font-size: 14px; font-weight: 500; }
.skp-thr__txt b { font-weight: 700; }

.skp-thr__bar { height: 6px; border-radius: 999px; background: var(--skp-line); overflow: hidden; }

.skp-thr__fill {
  height: 100%;
  border-radius: inherit;
  background: var(--skp-accent, #171717);
  transition: width .5s var(--skp-ease), background var(--skp-base) var(--skp-ease);
}

.skp-top.is-done .skp-thr__txt,
.skp-top.is-done .skp-thr__ic { color: var(--skp-ok); }

.skp-top.is-done .skp-thr__fill { background: var(--skp-ok); }

/* --- Escalier de paliers -------------------------------------------------
   Une seule barre, des reperes poses a leur montant reel. Les reperes sont
   positionnes en pourcentage du palier le plus haut : l'echelle reste juste
   quels que soient les montants saisis par le marchand. */

.skp-lad__top { display: flex; align-items: center; gap: 10px; margin-bottom: 11px; }
.skp-lad__txt { font-size: 14px; font-weight: 500; }
.skp-lad__txt b { font-weight: 700; }

.skp-lad__bar {
  position: relative;
  height: 6px;
  border-radius: 999px;
  background: var(--skp-line);
  margin: 0 0 14px;
}

.skp-lad__fill {
  height: 100%;
  border-radius: inherit;
  background: var(--skp-accent, #171717);
  transition: width .5s var(--skp-ease), background var(--skp-base) var(--skp-ease);
}

/* Le repere est centre sur sa position : translate(-50%) pour que le point
   tombe PILE sur le montant, et non decale d'un demi-point. */
.skp-lad__dot {
  position: absolute;
  top: 50%;
  width: 14px;
  height: 14px;
  margin: 0;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: var(--skp-bg, #fff);
  border: 2px solid var(--skp-line);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: border-color var(--skp-base) var(--skp-ease), background var(--skp-base) var(--skp-ease);
}

.skp-lad__dot.is-on { border-color: var(--skp-accent, #171717); background: var(--skp-accent, #171717); }
.skp-lad__dot .skp-i { width: 9px; height: 9px; color: var(--skp-accent-fg, #fff); stroke-width: 3; }

.skp-lad__list {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 16px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.skp-lad__i {
  display: flex;
  align-items: baseline;
  gap: 6px;
  font-size: 12.5px;
  color: var(--skp-ink-3);
}

.skp-lad__a { font-weight: 700; }
.skp-lad__i.is-on { color: var(--skp-ok); }
.skp-lad__i.is-on .skp-lad__l { text-decoration: line-through; text-decoration-thickness: 1px; }

.skp-top.is-done .skp-lad__txt { color: var(--skp-ok); }
.skp-top.is-done .skp-lad__fill { background: var(--skp-ok); }
.skp-top.is-done .skp-lad__dot.is-on { border-color: var(--skp-ok); background: var(--skp-ok); }

/* Le tiroir est etroit : la liste passe en colonne pour ne rien tronquer. */
.skp-drw__body .skp-lad__list { flex-direction: column; gap: 4px; }
.skp-drw__body .skp-lad__txt { font-size: 13px; }

/* --- Ligne offerte -------------------------------------------------------- */
.skp-line.is-gift .skp-line__price,
.skp-dline.is-gift .skp-dline__p { color: var(--skp-ok); font-weight: 700; }

.skp-gift-tag {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--skp-ok) 12%, transparent);
  color: var(--skp-ok);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .01em;
}

.skp-msg { display: flex; align-items: center; gap: 10px; min-height: 100%; }
.skp-msg .skp-i { color: var(--skp-accent, #171717); }
.skp-msg__t { font-size: 14px; font-weight: 500; line-height: 1.4; }
.skp-msg__t b { font-weight: 700; }

/* ==========================================================================
   BLOC PROMOTIONNEL
   ========================================================================== */
.skp-pslot { margin-bottom: 26px; }
.skp-pslot:empty { display: none; }

.skp-pb {
  position: relative;
  border-radius: var(--skp-radius, 14px);
  overflow: hidden;
  animation: skp-pb-in .34s var(--skp-ease) both;
}

@keyframes skp-pb-in {
  from { opacity: 0; transform: translateY(-6px); }
  to { opacity: 1; transform: none; }
}

.skp-pb__x {
  position: absolute;
  top: 9px;
  right: 9px;
  width: 28px;
  height: 28px;
  border: 0;
  border-radius: 7px;
  background: transparent;
  color: currentColor;
  opacity: .45;
  display: grid;
  place-items: center;
  cursor: pointer;
  z-index: 2;
  transition: all var(--skp-fast) var(--skp-ease);
}

.skp-pb__x:hover { opacity: 1; background: rgba(128, 128, 128, .16); }

.skp-pb--strip {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 13px 46px 13px 18px;
  border: 1px solid var(--skp-accent, #171717);
  background: var(--skp-accent-soft);
}

.skp-pb--strip .skp-i { color: var(--skp-accent, #171717); }
.skp-pb--strip b { font-size: 14px; font-weight: 700; }
.skp-pb--strip span { font-size: 13.5px; color: var(--skp-ink-2); }

.skp-pb__cta {
  margin-left: auto;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--skp-accent, #171717);
  white-space: nowrap;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.skp-pb--offer {
  display: grid;
  grid-template-columns: 132px minmax(0, 1fr);
  border: 1px solid var(--skp-line);
  background: var(--skp-bg);
}

.skp-pb__media {
  display: grid;
  place-items: center;
  min-height: 118px;
  background: var(--skp-surface);
  border-right: 1px solid var(--skp-line);
  color: var(--skp-ink-3);
}

.skp-pb__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.skp-pb__media .skp-i { width: 28px; height: 28px; }

.skp-pb__body {
  padding: 16px 46px 16px 18px;
  display: flex;
  flex-direction: column;
  gap: 7px;
  justify-content: center;
}

.skp-pb__t { font-size: 16.5px; font-weight: 700; letter-spacing: -.015em; }
.skp-pb__d { font-size: 13.5px; color: var(--skp-ink-2); line-height: 1.5; }
.skp-pb__body .skp-btn { align-self: flex-start; margin-top: 5px; min-height: 40px; font-size: 13.5px; }

.skp-pb--banner { border: 1px solid var(--skp-line); }
.skp-pb--banner img { width: 100%; height: auto; display: block; }
.skp-pb__link { display: block; }

.skp-pb__ph {
  display: grid;
  place-items: center;
  gap: 4px;
  padding: 34px 16px;
  text-align: center;
  background: var(--skp-surface);
}

.skp-pb__ph b { font-size: 20px; font-weight: 700; letter-spacing: -.02em; }
.skp-pb__ph span { font-size: 13.5px; color: var(--skp-ink-2); }

.skp-pb--timer {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  padding: 14px 46px 14px 18px;
  border: 1px solid var(--skp-line);
  background: var(--skp-bg);
}

.skp-pb--timer .skp-i { color: var(--skp-accent, #171717); }
.skp-pb__t2 b { display: block; font-size: 14.5px; font-weight: 700; }
.skp-pb__t2 span { font-size: 13px; color: var(--skp-ink-2); }

.skp-clock { display: flex; gap: 6px; margin-left: auto; }

.skp-clock__u {
  min-width: 46px;
  padding: 6px 4px;
  text-align: center;
  border: 1px solid var(--skp-line);
  border-radius: 8px;
  background: var(--skp-accent-soft);
}

.skp-clock__n {
  display: block;
  font-size: 17px;
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -.02em;
  font-variant-numeric: tabular-nums;
}

.skp-clock__l {
  display: block;
  margin-top: 2px;
  font-size: 9.5px;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--skp-ink-3);
}

/* ==========================================================================
   PAGE PANIER
   ========================================================================== */
.skp-cart { container-type: inline-size; container-name: skpcart; }

.skp-head { margin-bottom: 22px; }

.skp-head__row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}

.skp-head h1 {
  font-size: 30px;
  font-weight: 700;
  letter-spacing: -.025em;
  line-height: 1.15;
}

.skp-head__count { font-size: 15px; font-weight: 500; color: var(--skp-ink-3); }

.skp-cart__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 372px;
  gap: 40px;
  align-items: start;
}

.skp-cart__grid > * { min-width: 0; }

.skp-lines { border-top: 1px solid var(--skp-line); }

.skp-line {
  display: grid;
  grid-template-columns: 96px minmax(0, 1fr) auto;
  gap: 18px;
  padding: 20px 0;
  border-bottom: 1px solid var(--skp-line);
  align-items: start;
  transition: opacity var(--skp-base) var(--skp-ease), transform var(--skp-base) var(--skp-ease);
}

.skp-line.is-out { opacity: 0; transform: translateX(-8px); }
.skp-line.is-busy { opacity: .5; pointer-events: none; }

.skp-line__media img {
  width: 96px;
  height: 96px;
  object-fit: cover;
  border: 1px solid var(--skp-line);
  border-radius: var(--skp-radius-sm, 10px);
  display: block;
}

.skp-line__n {
  font-weight: 600;
  font-size: 15.5px;
  line-height: 1.35;
  letter-spacing: -.01em;
  margin-bottom: 6px;
}

.skp-line__n a { color: inherit; text-decoration: none; }
.skp-line__n a:hover { color: var(--skp-accent, #171717); }

.skp-line__meta { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }

.skp-chip {
  padding: 2px 8px;
  border: 1px solid var(--skp-line);
  border-radius: 6px;
  background: var(--skp-surface);
  font-size: 12px;
  color: var(--skp-ink-2);
}

.skp-line__stock {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 12px;
  font-size: 12.5px;
  color: var(--skp-ok);
}

.skp-line__stock.is-low { color: #b45309; }

.skp-line__foot { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }

.skp-line__r { text-align: right; }
.skp-line__price { font-weight: 700; font-size: 16px; letter-spacing: -.01em; white-space: nowrap; }
.skp-line__unit { margin-top: 4px; font-size: 12px; color: var(--skp-ink-3); white-space: nowrap; }

/* Le lien natif de suppression reste dans le DOM (fonctionnement sans JS)
   mais reste invisible tant que notre bouton le remplace. */
.skp-line__native { display: none; }

.skp-qty {
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--skp-line);
  border-radius: var(--skp-radius-sm, 10px);
  background: var(--skp-bg);
  overflow: hidden;
}

.skp-qty button {
  width: 38px;
  height: 40px;
  display: grid;
  place-items: center;
  color: var(--skp-ink-2);
  transition: all var(--skp-fast) var(--skp-ease);
}

.skp-qty button:hover:not(:disabled) { background: var(--skp-accent-soft); color: var(--skp-accent, #171717); }
.skp-qty button:disabled { opacity: .32; cursor: not-allowed; }

.skp-qty__input {
  width: 44px;
  min-width: 0;
  height: 40px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
  text-align: center;
  font-weight: 600;
  font-size: 14.5px;
  font-variant-numeric: tabular-nums;
  -moz-appearance: textfield;
}

.skp-qty__input:focus { outline: none; box-shadow: none; }
.skp-qty__input::-webkit-outer-spin-button,
.skp-qty__input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

.skp-qty__v { min-width: 34px; text-align: center; font-weight: 600; font-size: 14.5px; }

.skp-line__rm {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-height: 44px;
  padding: 8px 6px;
  border-radius: 6px;
  color: var(--skp-ink-3);
  font-size: 13px;
  transition: color var(--skp-fast) var(--skp-ease);
}

.skp-line__rm:hover { color: var(--skp-danger); }

/* Sans JavaScript seulement (voir le <noscript> du gabarit). */
.skp-cart__actions { padding-top: 14px; }
.skp-update { display: none; }

/* ==========================================================================
   RECAPITULATIF
   ========================================================================== */
/* WooCommerce impose lui-meme, dans sa feuille de mise en page :
       .woocommerce-cart .cart-collaterals .cart_totals { float: right; width: 48% }
   Notre colonne de droite fait 372px, donc le recapitulatif se retrouvait a
   178px : "Recapitula-tif", "Sous- total" et "J'ai un code promo" passaient a
   la ligne. On annule cette contrainte dans notre colonne, et seulement la.

   La regle de WooCommerce a une specificite de (0,3,0). Une contre-regle en
   (0,2,0) perdait : on monte donc a (0,4,0) en enchainant nos propres
   conteneurs, plutot que d'employer !important. */
body.skp-cart-on .skp-cart .skp-cart__side .cart-collaterals,
body.skp-cart-on .skp-cart .skp-cart__side .cart_totals,
body.skp-cart-on .skp-cart .skp-cart__side .skp-sum,
body.skp-cart-on .skp-cart .skp-cart__side > * {
  width: 100%;
  max-width: none;
  float: none;
  margin: 0;
  padding: 0;
}

/* Recapitulatif suivi au defilement, comme dans la maquette.
   Deux conditions, toutes deux necessaires :
     1. le collage porte sur l'element le PLUS EXTERIEUR de la colonne - un
        element colle ne se deplace qu'a l'interieur de son parent direct ;
     2. la colonne doit etre PLUS HAUTE que lui, sinon il n'a aucune course.
        Avec align-items:start la colonne ne faisait que la hauteur du
        recapitulatif : il ne tenait que 300px avant de repartir vers le haut.
        On l'etire donc sur toute la hauteur de la rangee. */
.skp-cart__side {
  align-self: stretch;
  height: 100%;
}

.skp-cart__side > * {
  position: sticky;
  top: 24px;
}

.skp-sum { position: static; float: none; width: auto; }

.skp-sum__box {
  padding: 20px;
  border: 1px solid var(--skp-line);
  border-radius: var(--skp-radius, 14px);
  background: var(--skp-bg);
}

.skp-sum__t { margin: 0 0 16px; font-size: 16px; font-weight: 700; letter-spacing: -.015em; }

.skp-sum__l {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  padding: 7px 0;
  font-size: 14.5px;
}

.skp-sum__l > span { color: var(--skp-ink-2); }
.skp-sum__l > b { font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.skp-sum__l--discount > b { color: var(--skp-ok); }

/* Bloc de livraison natif de WooCommerce : on neutralise sa presentation de
   tableau sans toucher a son fonctionnement (choix du mode, calculateur). */
.skp-sum__shiptable,
.skp-sum__shiptable tbody,
.skp-sum__shiptable tr { display: block; width: 100%; }

.skp-sum__shiptable th,
.skp-sum__shiptable td {
  display: block;
  width: 100%;
  padding: 4px 0;
  text-align: left;
  font-size: 14.5px;
}

.skp-sum__shiptable th { font-weight: 400; color: var(--skp-ink-2); padding-bottom: 2px; }
.skp-sum__shiptable ul { margin: 0; padding: 0; list-style: none; }

/* Un mode de livraison = une ligne "libelle ... prix", comme les autres lignes
   du recapitulatif. Le prix est dans le meme label que le nom du mode : on
   pousse donc le montant a droite avec un espacement automatique. */
.skp-sum__shiptable li {
  display: flex;
  align-items: baseline;
  gap: 8px;
  padding: 4px 0;
}

.skp-sum__shiptable li label {
  flex: 1;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  font-size: 14px;
  cursor: pointer;
}

.skp-sum__shiptable li label .amount { font-weight: 600; white-space: nowrap; }
.skp-sum__shiptable input[type="radio"] { margin: 0; accent-color: var(--skp-accent, #171717); }

/* Adresse de livraison et lien "Calculer les frais" : mis en retrait, en plus
   petit, pour ne pas concurrencer les montants. */
.skp-sum__shiptable .woocommerce-shipping-destination {
  margin: 2px 0 0;
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--skp-ink-3);
}

.skp-sum__shiptable .shipping-calculator-button {
  display: inline-block;
  margin-top: 4px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--skp-accent, #171717);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.skp-sum__shiptable .shipping-calculator-form { margin-top: 10px; display: grid; gap: 8px; }

.skp-sum__shiptable .shipping-calculator-form p { margin: 0; }

.skp-sum__shiptable .shipping-calculator-form input,
.skp-sum__shiptable .shipping-calculator-form select,
.skp-sum__shiptable .shipping-calculator-form .select2-selection {
  width: 100%;
  min-height: 40px;
  padding: 0 12px;
  border: 1px solid var(--skp-line);
  border-radius: var(--skp-radius-sm, 10px);
  background: var(--skp-bg);
  font-size: 13.5px;
}

.skp-sum__shiptable .shipping-calculator-form button {
  min-height: 40px;
  padding: 0 16px;
  border-radius: var(--skp-radius-sm, 10px);
  background: var(--skp-accent, #171717);
  color: var(--skp-accent-fg, #fff);
  font-size: 13.5px;
  font-weight: 600;
}

/* Visuel de repli quand un produit n'a pas de photo. */
.skp-ph {
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  min-height: inherit;
  background: var(--skp-surface);
  color: var(--skp-ink-3);
}

.skp-ph .skp-i { width: 30%; height: 30%; max-width: 34px; max-height: 34px; }

.skp-line__media .skp-ph {
  width: 96px;
  height: 96px;
  border: 1px solid var(--skp-line);
  border-radius: var(--skp-radius-sm, 10px);
}

.skp-dline__media .skp-ph { width: 62px; height: 62px; border-radius: 8px; }
.skp-drow__media .skp-ph { width: 46px; height: 46px; border-radius: 6px; }
.skp-xcard__media .skp-ph { aspect-ratio: 1 / 1; height: auto; }
.skp-offer__media .skp-ph { aspect-ratio: 4 / 3; height: auto; }

.skp-sum__rule { height: 1px; margin: 12px 0; background: var(--skp-line); }

.skp-sum__tot {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  margin-bottom: 4px;
}

.skp-sum__tot > span { font-size: 15.5px; font-weight: 700; }

.skp-sum__tot > b {
  font-size: 25px;
  font-weight: 700;
  letter-spacing: -.03em;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.skp-sum__tax { margin: 0 0 16px; font-size: 12px; color: var(--skp-ink-3); }

.skp-sum__go { margin: 0 0 4px; padding: 0; }
.skp-sum__go .skp-btn--block { text-decoration: none; }

.skp-bump {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  margin: 2px 0 16px;
  padding: 13px 14px;
  border: 1px dashed var(--skp-line);
  border-radius: var(--skp-radius-sm, 10px);
  background: var(--skp-surface);
  cursor: pointer;
  transition: all var(--skp-fast) var(--skp-ease);
}

.skp-bump:hover { border-color: var(--skp-accent, #171717); }

.skp-bump.is-on {
  border-style: solid;
  border-color: var(--skp-accent, #171717);
  background: var(--skp-accent-soft);
}

.skp-bump input {
  width: 19px;
  height: 19px;
  margin: 1px 0 0;
  flex: none;
  accent-color: var(--skp-accent, #171717);
  cursor: pointer;
}

.skp-bump__n { display: block; font-size: 13.5px; font-weight: 600; margin-bottom: 2px; }
.skp-bump__d { display: block; font-size: 12.5px; color: var(--skp-ink-2); line-height: 1.4; }

/* Code promo : replie sous le bouton, comme dans la maquette. */
.skp-promo { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--skp-line); }

.skp-promo__tg {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 44px;
  padding: 5px 0;
  font-size: 13.5px;
  font-weight: 500;
  color: var(--skp-ink-2);
  transition: color var(--skp-fast) var(--skp-ease);
}

.skp-promo__tg:hover { color: var(--skp-accent, #171717); }
.skp-promo__tg .skp-i { transition: transform var(--skp-base) var(--skp-ease); }
.skp-promo__tg[aria-expanded="true"] .skp-i { transform: rotate(90deg); }

.skp-promo__body { display: none; gap: 8px; padding-top: 10px; }
.skp-promo__body.is-open { display: flex; }

.skp-promo__body input {
  flex: 1;
  min-width: 0;
  height: 44px;
  padding: 0 13px;
  border: 1px solid var(--skp-line);
  border-radius: var(--skp-radius-sm, 10px);
  background: var(--skp-bg);
  font-size: 14px;
}

.skp-promo__body input:focus {
  outline: none;
  border-color: var(--skp-accent, #171717);
  box-shadow: 0 0 0 3px var(--skp-accent-soft);
}

/* ==========================================================================
   PRODUITS COMPLEMENTAIRES
   ========================================================================== */
.skp-xsell { margin-top: 34px; container-type: inline-size; container-name: skpxsell; }

.skp-xsell__hd {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
}

.skp-xsell__hd h2 { margin: 0; font-size: 16px; font-weight: 700; letter-spacing: -.015em; }
.skp-xsell__hd p { margin: 0; font-size: 13px; color: var(--skp-ink-3); }

.skp-xsell__track {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(168px, 1fr);
  gap: 14px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding-bottom: 6px;
  scrollbar-width: thin;
}

.skp-xsell__track > * { scroll-snap-align: start; }

.skp-xcard {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--skp-line);
  border-radius: var(--skp-radius, 14px);
  overflow: hidden;
  background: var(--skp-bg);
  transition: border-color var(--skp-fast) var(--skp-ease);
}

.skp-xcard:hover { border-color: var(--skp-accent, #171717); }

.skp-xcard__media {
  display: block;
  border-bottom: 1px solid var(--skp-line);
  background: var(--skp-surface);
  overflow: hidden;
}

/* Hauteur imposee : sans elle, une photo au format portrait etirait sa carte
   et les cartes du carrousel n'avaient plus la meme hauteur. */
.skp-xcard__media img {
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1;
  height: auto;
  object-fit: cover;
}

.skp-xcard__b { padding: 11px 12px 12px; display: flex; flex-direction: column; gap: 9px; flex: 1; }

/* Le nom tient sur deux lignes au maximum : au-dela, les cartes se
   desalignaient des qu'un produit avait un nom long. */
.skp-xcard__n {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: 2.7em;
  font-size: 13.5px;
  font-weight: 600;
  line-height: 1.35;
  letter-spacing: -.005em;
  color: inherit;
  text-decoration: none;
}

.skp-xcard__n:hover { color: var(--skp-accent, #171717); }
.skp-xcard__p { font-size: 13.5px; font-weight: 700; margin-top: auto; }
.skp-xcard__p del { opacity: .55; font-weight: 500; margin-right: 4px; }

.skp-xcard__add {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 38px;
  border: 1px solid var(--skp-line);
  border-radius: 8px;
  background: var(--skp-bg);
  color: var(--skp-ink);
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  transition: all var(--skp-fast) var(--skp-ease);
}

.skp-xcard__add:hover {
  background: var(--skp-accent, #171717);
  border-color: var(--skp-accent, #171717);
  color: var(--skp-accent-fg, #fff);
}

.skp-xcard__add.is-added {
  background: var(--skp-ok-soft);
  border-color: var(--skp-ok);
  color: var(--skp-ok);
}

/* ==========================================================================
   REASSURANCE
   ========================================================================== */
/* Bande de pied de page : fond gris clair d'un bord a l'autre, comme dans la
   maquette. Le debord se fait par des marges negatives compensees par un
   padding egal, plutot qu'avec width:100vw : 100vw inclut la barre de
   defilement et provoquerait un debordement horizontal de ~15px. */
.skp-trust {
  margin: 34px calc(50% - 50vw) 0;
  padding: 30px calc(50vw - 50%);
  border-top: 1px solid var(--skp-line);
  background: var(--skp-surface);
  container-type: inline-size;
  container-name: skptrust;
}

.skp-trust__g {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  max-width: var(--skp-w, 1240px);
  margin: 0 auto;
}

.skp-trust__i {
  display: flex;
  gap: 13px;
  align-items: flex-start;
  padding: 0 22px;
  border-left: 1px solid var(--skp-line);
}

.skp-trust__i:first-child { border-left: 0; padding-left: 0; }
.skp-trust__i .skp-i { width: 22px; height: 22px; margin-top: 1px; color: var(--skp-accent, #171717); }
.skp-trust__i b { display: block; font-size: 13.5px; font-weight: 600; margin-bottom: 2px; }
.skp-trust__i p { margin: 0; font-size: 12.5px; color: var(--skp-ink-2); line-height: 1.45; }

/* ==========================================================================
   BARRE D'ACHAT MOBILE
   Visible seulement sur petit ecran ; elle s'efface quand le bouton de
   commande du recapitulatif entre a l'ecran.
   ========================================================================== */
.skp-mbar {
  display: none;
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 60;
  align-items: center;
  gap: 14px;
  padding: 11px 16px calc(11px + env(safe-area-inset-bottom));
  background: var(--skp-bg);
  border-top: 1px solid var(--skp-line);
  box-shadow: 0 -10px 30px -20px rgba(16, 16, 20, .55);
  transition: transform .28s var(--skp-ease), opacity .2s var(--skp-ease);
}

.skp-mbar.is-hidden { transform: translateY(115%); opacity: 0; pointer-events: none; }
.skp-mbar__l { display: flex; flex-direction: column; line-height: 1.25; }
.skp-mbar__l span { font-size: 11.5px; color: var(--skp-ink-3); }
.skp-mbar__l b { font-size: 19px; font-weight: 700; letter-spacing: -.02em; }
.skp-mbar .skp-btn { flex: 1; }

/* ==========================================================================
   PANIER VIDE
   ========================================================================== */
.skp-empty { text-align: center; padding: 48px 0 24px; }

.skp-empty__ic {
  width: 66px;
  height: 66px;
  margin: 0 auto 20px;
  border: 1px solid var(--skp-line);
  border-radius: 50%;
  background: var(--skp-surface);
  display: grid;
  place-items: center;
  color: var(--skp-ink-3);
}

.skp-empty__ic .skp-i { width: 26px; height: 26px; }
.skp-empty h2 { margin: 0 0 8px; font-size: 22px; font-weight: 700; letter-spacing: -.02em; }
.skp-empty p { margin: 0 auto 24px; max-width: 420px; font-size: 14.5px; color: var(--skp-ink-2); }
.skp-empty__chips { display: flex; gap: 9px; justify-content: center; flex-wrap: wrap; margin-bottom: 28px; }

.skp-echip {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  padding: 8px 16px;
  border: 1px solid var(--skp-line);
  border-radius: 999px;
  background: var(--skp-bg);
  font-size: 13.5px;
  font-weight: 500;
  color: inherit;
  text-decoration: none;
  transition: all var(--skp-fast) var(--skp-ease);
}

.skp-echip:hover { border-color: var(--skp-accent, #171717); color: var(--skp-accent, #171717); }
.skp-empty .skp-xsell { text-align: left; }

/* ==========================================================================
   ETAPE PRE-PAIEMENT
   ========================================================================== */
.skp-inter { container-type: inline-size; container-name: skpinter; }
.skp-inter .skp-steps { justify-content: center; }
.skp-inter__hd { text-align: center; max-width: 560px; margin: 0 auto 32px; }
.skp-inter__hd h1 { margin: 0 0 9px; font-size: 27px; font-weight: 700; letter-spacing: -.025em; }
.skp-inter__hd p { margin: 0; font-size: 15px; color: var(--skp-ink-2); }

.skp-inter__g { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-bottom: 28px; }

.skp-offer {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--skp-line);
  border-radius: var(--skp-radius, 14px);
  overflow: hidden;
  transition: border-color var(--skp-fast) var(--skp-ease);
}

.skp-offer:hover { border-color: var(--skp-accent, #171717); }
.skp-offer.is-added { border-color: var(--skp-ok); }
.skp-offer__media { display: block; border-bottom: 1px solid var(--skp-line); background: var(--skp-surface); }
.skp-offer__media img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block; }
.skp-offer__b { padding: 15px 16px 16px; display: flex; flex-direction: column; gap: 9px; flex: 1; }
.skp-offer__n { font-size: 15px; font-weight: 700; letter-spacing: -.01em; }
.skp-offer__d { font-size: 13px; color: var(--skp-ink-2); line-height: 1.45; }

.skp-offer__f {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: auto;
  padding-top: 4px;
}

.skp-offer__p { font-size: 16px; font-weight: 700; }
.skp-offer__p del { opacity: .55; font-weight: 500; margin-right: 4px; font-size: 13px; }
.skp-offer__f .skp-btn { min-height: 38px; padding: 0 15px; font-size: 13.5px; }

.skp-inter__ft {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  flex-wrap: wrap;
  padding-top: 22px;
  border-top: 1px solid var(--skp-line);
}

.skp-inter__ft .skp-btn--primary { min-width: 280px; }
.skp-inter__tot { opacity: .75; }

/* ==========================================================================
   TIROIR
   ========================================================================== */
.skp-drw__ov {
  position: fixed;
  inset: 0;
  z-index: 99998;
  background: rgba(16, 16, 20, .45);
  opacity: 0;
  transition: opacity var(--skp-base) var(--skp-ease);
}

.skp-drw__ov.is-open { opacity: 1; }

.skp-drw {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 99999;
  width: var(--skp-drw-w, 428px);
  max-width: 92vw;
  display: flex;
  flex-direction: column;
  background: var(--skp-bg);
  color: var(--skp-ink);
  box-shadow: var(--skp-shadow-lg);
  transform: translateX(100%);
  transition: transform var(--skp-drw-speed, .3s) var(--skp-ease);
}

.skp-drw.is-open { transform: none; }

.skp-drw__hd {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 17px 20px;
  border-bottom: 1px solid var(--skp-line);
}

.skp-drw__hd h2 { margin: 0; font-size: 16.5px; font-weight: 700; letter-spacing: -.015em; }
.skp-drw__count { color: var(--skp-ink-3); font-weight: 500; }

.skp-drw__x {
  width: 40px;
  height: 40px;
  border: 0;
  border-radius: 8px;
  background: none;
  color: var(--skp-ink-2);
  display: grid;
  place-items: center;
  cursor: pointer;
  transition: all var(--skp-fast) var(--skp-ease);
}

.skp-drw__x:hover { background: var(--skp-surface); color: var(--skp-accent, #171717); }

.skp-drw__body { flex: 1; overflow-y: auto; padding: 16px 20px; }
.skp-drw__body .skp-top { margin-bottom: 18px; padding: 13px 15px 11px; }
.skp-drw__body .skp-thr__txt, .skp-drw__body .skp-msg__t { font-size: 13px; }
/* Squelette de chargement du tiroir : rectangles gris clair aux places de la
   jauge et de trois articles, avec un reflet qui passe. Les couleurs viennent
   des variables de surface : neutre sur n'importe quel theme. */
.skp-drw__skel { display: grid; gap: 14px; }
.skp-skl {
  display: block;
  border-radius: 6px;
  background: var(--skp-surface-2, #f1f1f4);
  background-image: linear-gradient(90deg, rgba(255,255,255,0) 0, rgba(255,255,255,.65) 50%, rgba(255,255,255,0) 100%);
  background-size: 200% 100%;
  background-repeat: no-repeat;
  animation: skpSkl 1.2s ease-in-out infinite;
}
.skp-skl--bar { height: 74px; border-radius: var(--skp-radius-sm, 10px); }
.skp-skl__line { display: flex; align-items: center; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--skp-line); }
.skp-skl--img { flex: none; width: 56px; height: 56px; border-radius: 8px; }
.skp-skl__txt { flex: 1; display: grid; gap: 8px; min-width: 0; }
.skp-skl--t1 { width: 72%; height: 11px; }
.skp-skl--t2 { width: 40%; height: 11px; }
.skp-skl--price { flex: none; width: 46px; height: 12px; }
/* Texte pour les lecteurs d'ecran : masque par NOS regles, jamais par une
   classe du theme (qui peut ne pas exister, voir 3.11). */
.skp-skl__sr {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}
@keyframes skpSkl { from { background-position: 150% 0; } to { background-position: -50% 0; } }
@media (prefers-reduced-motion: reduce) { .skp-skl { animation: none; background-image: none; } }

.skp-drw__empty { padding: 40px 0; text-align: center; color: var(--skp-ink-2); }
.skp-drw__empty .skp-i { width: 30px; height: 30px; color: var(--skp-ink-3); margin-bottom: 12px; }

.skp-dline {
  display: grid;
  grid-template-columns: 62px minmax(0, 1fr) auto;
  gap: 12px;
  padding: 13px 0;
  border-bottom: 1px solid var(--skp-line);
  align-items: center;
}

.skp-dline.is-busy { opacity: .5; pointer-events: none; }
.skp-dline__media img { width: 62px; height: 62px; object-fit: cover; border-radius: 8px; display: block; }
.skp-dline__n { font-size: 13.5px; font-weight: 600; line-height: 1.35; margin-bottom: 3px; }
.skp-dline__n a { color: inherit; text-decoration: none; }
.skp-dline__m { font-size: 11.5px; color: var(--skp-ink-3); margin-bottom: 7px; }
.skp-dline__r { text-align: right; display: flex; flex-direction: column; align-items: flex-end; gap: 6px; }
.skp-dline__p { font-size: 14px; font-weight: 700; font-variant-numeric: tabular-nums; }
.skp-dline .skp-qty button { width: 30px; height: 32px; }
.skp-dline .skp-qty__v { min-width: 26px; font-size: 13.5px; }

.skp-dline__rm {
  width: 30px;
  height: 30px;
  border: 0;
  border-radius: 6px;
  background: none;
  color: var(--skp-ink-3);
  display: grid;
  place-items: center;
  cursor: pointer;
  transition: color var(--skp-fast) var(--skp-ease);
}

.skp-dline__rm:hover { color: var(--skp-danger); }

/* Les suggestions sont une PROPOSITION, pas le contenu du panier : elles ont
   leur propre fond pour qu'on ne les confonde pas avec les articles achetes.
   Les marges negatives annulent le padding lateral du corps du tiroir, donc la
   bande va d'un bord a l'autre — un encadre flottant ferait "carte dans une
   carte" avec les vignettes qu'elle contient.
   Le fond est un melange de la couleur d'accent du marchand et du gris de
   surface : il suit sa marque, et reste visible meme si son accent est tres
   clair (le gris de surface sert alors de plancher). */
.skp-drw__x2 {
  margin: 20px -20px 0;
  padding: 16px 20px 10px;
  border-top: 1px solid var(--skp-line);
  background: color-mix(in srgb, var(--skp-accent, #171717) 7%, var(--skp-surface-2));
}

/* Les vignettes restent blanches : c'est ce contraste qui les fait ressortir
   du fond, sans avoir a durcir leur bordure. */
.skp-drw__x2 .skp-drow { background: var(--skp-bg); }

/* --- Mode defilement -----------------------------------------------------
   Sur un ecran etroit, trois suggestions empilees repoussent le bouton
   "Commander" hors de l'ecran. En defilement, elles tiennent sur une ligne que
   l'on fait glisser au doigt.
   scroll-snap, donc AUCUNE librairie : le navigateur gere l'inertie, le
   clavier et le lecteur d'ecran mieux qu'un carrousel maison.
   La piste deborde jusqu'aux bords de la bande (marges negatives) pour que la
   derniere vignette ne semble pas coupee par une marge. */
.skp-drw__x2--slide .skp-drw__x2track,
.skp-drw__x2--mobile .skp-drw__x2track {
  display: flex;
  gap: 10px;
  margin: 0 -20px;
  padding: 2px 20px 10px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}

.skp-drw__x2--slide .skp-drw__x2track::-webkit-scrollbar,
.skp-drw__x2--mobile .skp-drw__x2track::-webkit-scrollbar { display: none; }

/* La vignette passe en colonne : image en haut, texte dessous, bouton dans le
   coin. Une ligne horizontale de 150px serait illisible. */
.skp-drw__x2--slide .skp-drow,
.skp-drw__x2--mobile .skp-drow {
  position: relative;
  flex: 0 0 148px;
  flex-direction: column;
  align-items: stretch;
  gap: 8px;
  margin-bottom: 0;
  padding: 10px;
  scroll-snap-align: start;
}

.skp-drw__x2--slide .skp-drow__media img,
.skp-drw__x2--mobile .skp-drow__media img {
  width: 100%;
  height: 96px;
  object-fit: cover;
  border-radius: 8px;
}

.skp-drw__x2--slide .skp-drow__media .skp-ph,
.skp-drw__x2--mobile .skp-drow__media .skp-ph {
  width: 100%;
  height: 96px;
  border-radius: 8px;
}

.skp-drw__x2--slide .skp-drow__n,
.skp-drw__x2--mobile .skp-drow__n { font-size: 12.5px; line-height: 1.3; }

/* Deux lignes maximum pour le NOM : au-dela, les vignettes n'auraient plus la
   meme hauteur et la ligne deviendrait bancale.
   Le rognage vise le nom SEUL : applique au bloc entier, il emportait le prix
   des que le nom prenait deux lignes (constate au banc). */
.skp-drw__x2--slide .skp-drow__t,
.skp-drw__x2--mobile .skp-drow__t {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Le bouton se pose sur l'image : dans une vignette etroite, une ligne de plus
   sous le texte ferait perdre 34px de hauteur a chaque carte. */
.skp-drw__x2--slide .skp-drow__b,
.skp-drw__x2--mobile .skp-drow__b {
  position: absolute;
  top: 16px;
  right: 16px;
  background: var(--skp-bg);
  box-shadow: var(--skp-shadow);
}

/* "Defilement sur mobile" : au-dessus de cette largeur, on revient a la liste
   empilee, plus lisible quand la place ne manque pas. */
@media (min-width: 601px) {
  .skp-drw__x2--mobile .skp-drw__x2track {
    display: block;
    margin: 0;
    padding: 0;
    overflow: visible;
  }
  .skp-drw__x2--mobile .skp-drow {
    position: static;
    flex-direction: row;
    align-items: center;
    gap: 11px;
    margin-bottom: 8px;
    padding: 10px;
  }
  .skp-drw__x2--mobile .skp-drow__media img,
  .skp-drw__x2--mobile .skp-drow__media .skp-ph { width: 46px; height: 46px; border-radius: 6px; }
  .skp-drw__x2--mobile .skp-drow__n { font-size: 13px; }
  .skp-drw__x2--mobile .skp-drow__t { display: inline; overflow: visible; }
  .skp-drw__x2--mobile .skp-drow__b { position: static; box-shadow: none; }
}

.skp-drw__x2 h3 {
  margin: 0 0 11px;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .07em;
  color: var(--skp-ink-3);
}

.skp-drow {
  display: flex;
  gap: 11px;
  align-items: center;
  padding: 10px;
  margin-bottom: 8px;
  border: 1px solid var(--skp-line);
  border-radius: var(--skp-radius-sm, 10px);
  transition: border-color var(--skp-fast) var(--skp-ease);
}

.skp-drow:hover { border-color: var(--skp-accent, #171717); }
.skp-drow__media img { width: 46px; height: 46px; object-fit: cover; border-radius: 6px; display: block; }
.skp-drow__n { flex: 1; min-width: 0; font-size: 13px; font-weight: 600; line-height: 1.3; }
.skp-drow__n small { display: block; margin-top: 2px; font-weight: 600; color: var(--skp-ink-2); }

.skp-drow__b {
  width: 34px;
  height: 34px;
  flex: none;
  border: 1px solid var(--skp-line);
  border-radius: 8px;
  background: var(--skp-bg);
  color: inherit;
  display: grid;
  place-items: center;
  cursor: pointer;
  transition: all var(--skp-fast) var(--skp-ease);
}

.skp-drow__b:hover {
  background: var(--skp-accent, #171717);
  border-color: var(--skp-accent, #171717);
  color: var(--skp-accent-fg, #fff);
}

.skp-drw__ft {
  flex: none;
  padding: 16px 20px;
  border-top: 1px solid var(--skp-line);
  background: var(--skp-bg);
  display: flex;
  flex-direction: column;
  gap: 11px;
}

.skp-drw__tot { display: flex; justify-content: space-between; align-items: baseline; }
.skp-drw__tot span { font-size: 14px; color: var(--skp-ink-2); }
.skp-drw__tot b { font-size: 22px; font-weight: 700; letter-spacing: -.025em; font-variant-numeric: tabular-nums; }
.skp-drw__btns { display: grid; grid-template-columns: 1fr 1.35fr; gap: 9px; }

.skp-drw__msg {
  display: flex;
  align-items: center;
  gap: 7px;
  justify-content: center;
  font-size: 12px;
  color: var(--skp-ink-2);
}

/* ==========================================================================
   ICONE PANIER
   ========================================================================== */
.skp-iconbtn {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 8px 10px;
  border: 0;
  background: none;
  color: inherit;
  cursor: pointer;
}

.skp-iconbtn .skp-i { width: 22px; height: 22px; }
.skp-iconbtn__label { font-size: 14px; font-weight: 500; }

.skp-iconbtn__count,
.skp-menu-count {
  display: inline-grid;
  place-items: center;
  min-width: 19px;
  height: 19px;
  padding: 0 5px;
  margin-left: 4px;
  border-radius: 999px;
  background: var(--skp-accent, #171717);
  color: var(--skp-accent-fg, #fff);
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
}

.skp-iconbtn__count[hidden],
.skp-menu-count[hidden] { display: none; }

/* ==========================================================================
   BANDEAU "ANNULER"
   ========================================================================== */
.skp-toast {
  position: fixed;
  left: 50%;
  bottom: 26px;
  z-index: 100000;
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 12px 14px 12px 18px;
  border-radius: 10px;
  background: #141418;
  color: #f4f4f6;
  font-size: 13.5px;
  box-shadow: var(--skp-shadow-lg);
  opacity: 0;
  visibility: hidden;
  transform: translate(-50%, 24px);
  transition: all var(--skp-base) var(--skp-ease);
}

.skp-toast.is-on { opacity: 1; visibility: visible; transform: translate(-50%, 0); }

.skp-toast button {
  border: 0;
  background: none;
  color: #fff;
  font-weight: 700;
  font-size: 13.5px;
  padding: 4px 6px;
  border-radius: 5px;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}

.skp-toast button:hover { color: #ff9d9d; }

/* ==========================================================================
   ADAPTATION AU CONTENEUR
   ========================================================================== */
@container skpcart (max-width: 900px) {
  .skp-cart__grid { grid-template-columns: minmax(0, 1fr); gap: 26px; }
  .skp-sum { position: static; }
  .skp-steps__l { display: none; }
  .skp-steps__sep { width: 16px; }
  .skp-line { grid-template-columns: 76px minmax(0, 1fr); gap: 14px; }
  .skp-line__media img { width: 76px; height: 76px; }
  .skp-line__r { grid-column: 2; display: flex; justify-content: space-between; align-items: center; margin-top: 6px; }
  .skp-line__unit { margin-top: 0; }
}

@container skpcart (max-width: 720px) {
  .skp-pb--offer { grid-template-columns: 1fr; }
  .skp-pb__media { min-height: 0; border-right: 0; border-bottom: 1px solid var(--skp-line); }
  .skp-pb__media img { aspect-ratio: 16 / 7; }
  .skp-pb--strip { flex-wrap: wrap; gap: 6px 10px; }
  .skp-pb__cta { margin-left: 0; }
  .skp-clock { margin-left: 0; }
}

@container skptrust (max-width: 720px) {
  .skp-trust__g { grid-template-columns: 1fr; gap: 18px; }
  .skp-trust__i { border-left: 0; padding: 0; }
}

@container skpinter (max-width: 800px) {
  .skp-inter__g { grid-template-columns: 1fr; }
  .skp-inter__ft { flex-direction: column-reverse; gap: 10px; }
  .skp-inter__ft .skp-btn { width: 100%; }
}

/* La barre d'achat depend de la taille de l'ECRAN, pas du conteneur. */
@media (max-width: 900px) {
  body.skp-cart-on .skp-mbar { display: flex; }
  body.skp-cart-on .skp-cart { padding-bottom: 74px; }
}

/* Cibles tactiles confortables des qu'on est au doigt. */
@media (pointer: coarse) {
  .skp-qty button { width: 44px; height: 44px; }
  .skp-dline .skp-qty button { width: 40px; height: 42px; }
  .skp-drw__x, .skp-drow__b, .skp-dline__rm { width: 44px; height: 44px; }
  .skp-xcard__add { min-height: 44px; }
}

@media (prefers-reduced-motion: reduce) {
  .skp *, .skp *::before, .skp *::after,
  .skp-drw, .skp-drw__ov, .skp-toast, .skp-mbar {
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
  }
}


/* ==========================================================================
   CODE PROMO DANS LE TIROIR
   Replie par defaut : la majorite des clients n'a pas de code, et un champ
   vide ouvert au-dessus du bouton "Commander" fait douter ("il me manque
   quelque chose ?"). Un lien discret suffit a ceux qui en ont un.
   ========================================================================== */

.skp-drwc {
  padding: 12px 20px 0;
  border-top: 1px solid var(--skp-line);
}

.skp-drwc__list { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }

.skp-drwc__tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 6px 4px 9px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--skp-ok) 12%, transparent);
  color: var(--skp-ok);
  font-size: 12px;
}

.skp-drwc__tag b { font-weight: 700; }

.skp-drwc__tag button {
  width: 18px;
  height: 18px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: inherit;
  font-size: 15px;
  line-height: 1;
  cursor: pointer;
  opacity: .7;
}

.skp-drwc__tag button:hover { opacity: 1; background: rgba(0, 0, 0, .06); }

.skp-drwc__tg {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--skp-ink-2);
  font-size: 13px;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}

.skp-drwc__tg:hover { color: var(--skp-accent, #171717); }

.skp-drwc__body { display: flex; gap: 8px; margin-top: 9px; }

.skp-drwc__in {
  flex: 1 1 auto;
  min-width: 0;
  padding: 9px 11px;
  border: 1px solid var(--skp-line);
  border-radius: var(--skp-radius-sm, 10px);
  background: var(--skp-bg);
  color: var(--skp-ink);
  font-size: 13.5px;
  text-transform: uppercase;
}

.skp-drwc__in:focus { outline: 2px solid var(--skp-accent, #171717); outline-offset: 1px; }

.skp-drwc__body .skp-btn { flex: 0 0 auto; }

.skp-drwc__err { margin: 8px 0 0; color: var(--skp-danger, #b42318); font-size: 12.5px; }

/* ==========================================================================
   CHOIX RAPIDE D'UNE VARIANTE
   Ancre DANS le tiroir (position absolute, pas fixed) : le tiroir est deja au
   premier plan, un second element fixe passerait derriere sur certains themes.
   ========================================================================== */

.skp-vpop {
  position: absolute;
  inset: 0;
  z-index: 5;
  display: flex;
  align-items: flex-end;
  background: rgba(0, 0, 0, .38);
}

.skp-vpop__card {
  width: 100%;
  padding: 18px 20px 20px;
  border-radius: var(--skp-radius, 14px) var(--skp-radius, 14px) 0 0;
  background: var(--skp-bg);
  box-shadow: var(--skp-shadow-lg);
}

.skp-vpop__hd {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
}

.skp-vpop__hd b { font-size: 14.5px; line-height: 1.35; }

.skp-vpop__x {
  flex: 0 0 auto;
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--skp-ink-3);
  cursor: pointer;
}

.skp-vpop__x:hover { background: var(--skp-soft); color: var(--skp-ink); }

.skp-vpop__fields { display: flex; flex-direction: column; gap: 10px; }

.skp-vpop__f {
  display: flex;
  flex-direction: column;
  gap: 5px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--skp-ink-2);
}

.skp-vpop__f select {
  width: 100%;
  min-width: 0;
  padding: 9px 11px;
  border: 1px solid var(--skp-line);
  border-radius: var(--skp-radius-sm, 10px);
  background: var(--skp-bg);
  color: var(--skp-ink);
  font-size: 13.5px;
  font-weight: 400;
}

.skp-vpop__ft {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 16px;
}

.skp-vpop__p { font-size: 15px; font-weight: 700; }
.skp-vpop__msg { margin: 10px 0 0; color: var(--skp-danger, #b42318); font-size: 12.5px; }

/* ==========================================================================
   PASTILLE PANIER FLOTTANTE
   ========================================================================== */

.skp-bub {
  position: fixed;
  bottom: 22px;
  z-index: 99998;   /* juste sous le tiroir */
  width: 54px;
  height: 54px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--skp-accent, #171717);
  color: var(--skp-accent-fg, #fff);
  box-shadow: var(--skp-shadow-lg);
  cursor: pointer;
  transition: transform var(--skp-fast, .15s) var(--skp-ease);
}

.skp-bub--right { right: 22px; }
.skp-bub--left { left: 22px; }
.skp-bub:hover { transform: scale(1.06); }
.skp-bub .skp-i { width: 22px; height: 22px; }

.skp-bub__n {
  position: absolute;
  top: -2px;
  right: -2px;
  min-width: 21px;
  height: 21px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 5px;
  border-radius: 999px;
  background: var(--skp-bg);
  color: var(--skp-ink);
  box-shadow: var(--skp-shadow);
  font-size: 11.5px;
  font-weight: 700;
}

/* La barre d'achat mobile occupe deja le bas de l'ecran : on remonte la
   pastille pour qu'elles ne se superposent pas. */
.skp-cart-on .skp-bub { bottom: 88px; }

@media (prefers-reduced-motion: reduce) {
  .skp-bub { transition: none; }
  .skp-bub:hover { transform: none; }
}

/* ==========================================================================
   PAGE DE PAIEMENT : voir assets/css/checkout.css (charge uniquement quand le
   nouveau design de paiement est actif, apres cette feuille dont il reprend
   les variables et les primitives). Separe le 04/10/2026 (point 52).
   ========================================================================== */