/* Styles panier/checkout communs à plusieurs sites — identiques à l'octet près sur
   vent-d'ouest-objets, zephyr-impression et Orsade au 2026-08-11. Astusystem exclu
   (numérotation de classes et couleurs différentes, pas un simple doublon). */

/* Tokens ajoutés le 2026-08-18 : aucun des 3 sites qui utilisent effectivement ce
   fichier (Orsade, vent-d'ouest-objets, zephyr-impression) ne définissait ces
   variables — les règles ci-dessous restaient valides mais sans effet, le
   tableau restait non stylé. Mêmes noms/valeurs que la-sorbonne/composent.css
   (design system de référence), pour rester cohérent avec l'existant plutôt que
   d'inventer une nouvelle échelle. Un site qui définit déjà l'un de ces tokens
   (même nom) le fait prévaloir normalement — :root ici ne s'applique qu'en
   repli, à la cascade normale. */
:root {
  --text-xs: 0.75rem;
  --text-sm: 0.875rem;
  --text-lg: 1.125rem;
  --text-2xl: 1.5rem;
  --s-2: 0.5rem;
  --s-3: 0.75rem;
  --s-4: 1rem;
  --s-6: 1.5rem;
  --s-8: 2rem;
  --s-12: 3rem;
  --r-md: 0.375rem;
  --r-xl: 0.75rem;
  --c-border: #e5e7eb;
  --c-surface: #f9fafb;
}
.checkout-recap {
  tbody {
    border-bottom: 2px solid var(--c-border);
  }
}

.il-checkout-s2 {
  font-size: var(--text-2xl);
  font-weight: 800;
  letter-spacing: -0.02em;
  margin-bottom: var(--s-8);
}
.il-checkout-s3 {
  padding: var(--s-4);
  margin-bottom: var(--s-6);
  border-radius: var(--r-xl);
  background: #e6f4ea;
  color: #1e4620;
}
.il-checkout-s4 {
  padding: var(--s-4);
  margin-bottom: var(--s-6);
  border-radius: var(--r-xl);
  background: #fdecea;
  color: #611a15;
}
.il-checkout-s5 {
  margin-bottom: var(--s-8);
}
.il-checkout-s6 {
  font-size: var(--text-lg);
  margin-bottom: var(--s-4);
}
.il-checkout-s7 {
  border: 1px solid var(--c-border);
  border-radius: var(--r-xl);
  overflow: hidden;
}
.il-checkout-s8 {
  width: 100%;
  font-size: var(--text-sm);
  border-collapse: collapse;
}
.il-checkout-s9 {
  border-top: 1px solid var(--c-border);
}
.il-checkout-s10 {
  padding: var(--s-3) var(--s-4);
}
.il-checkout-s11 {
  display: flex;
  align-items: center;
  gap: var(--s-2);
}
.il-checkout-s12 {
  width: 100px;
  height: 100px;
  object-fit: contain;
  border-radius: var(--r-md);
  background: var(--c-surface);
}
.il-checkout-s13 {
  font-weight: 500;
  font-size: var(--text-xs);
}

@media (max-width: 767.98px) {
  /* Nom de l'article tronqué avec "…" plutôt que de forcer le tableau à
     défiler horizontalement sur mobile. min-width: 0 sur la chaîne flex
     (.il-checkout-s11 span> .d-flex) : sans lui, un flex item ne rétrécit
     jamais sous la largeur de son contenu, l'ellipsis ne se déclenche donc
     jamais (même piège que .header .btn-icon svg, voir spec.md). */
  .il-checkout-s11 {
    min-width: 0;
  }
  .il-checkout-s11 > .d-flex {
    min-width: 0;
  }
  .il-checkout-s13 {
    display: block;
    max-width: 45vw;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}
.il-checkout-s14 {
  padding: var(--s-3) var(--s-4);
  text-align: center;
  white-space: nowrap;
  font-size: 16px;
}
.il-checkout-s15 {
  padding: var(--s-3) var(--s-4);
  text-align: right;
  font-weight: 600;
  white-space: nowrap;
}
.il-checkout-s16 {
  width: 100%;
}

.il-checkout-s16 tr {
  flex: 1;
  align-items: center;
  width: 100%;
}

.il-checkout-s18 {
  padding: var(--s-4);
  font-weight: 700;
}
.il-checkout-s19 {
  padding: var(--s-4);
  text-align: right;
  font-weight: 800;
  font-size: var(--text-lg);
  white-space: nowrap;
}
.il-checkout-s20 {
  display: flex;
  gap: var(--s-3);
  justify-content: flex-end;
  margin-top: var(--s-8);
}
.il-checkout-s21 {
  padding: var(--s-12) var(--s-4);
  background: var(--c-surface);
  border-radius: var(--r-xl);
  text-align: center;
}

.il-checkout-s18,
.il-checkout-s19,
.il-checkout-s14 {
  font-size: 16px;
}
.il-checkout-s15 {
  font-size: 16px;
}

.il-cart-s1 {
  text-align: right;
}
.il-cart-s2 {
  padding: var(--s-16);
  text-align: center;
  color: var(--c-subtle);
}
.il-cart-s3 {
  animation: spin 1s linear infinite;
  display: inline-block;
}
.il-cart-s4 {
  padding-top: var(--s-16);
}
.il-cart-s5 {
  margin-top: var(--s-8);
}
.il-cart-s6 {
  font-size: var(--text-xl);
  font-weight: 700;
  margin-bottom: var(--s-4);
}
.il-cart-s7 {
  border: 2px dashed var(--c-border, #d1d5db);
  border-radius: var(--radius, 8px);
  padding: var(--s-8, 2rem);
  text-align: center;
  cursor: pointer;
  transition: border-color 0.15s;
}
.il-cart-s8 {
  display: none;
}
.il-cart-s9 {
  margin: 0 auto var(--s-3, 0.75rem);
  display: block;
  opacity: 0.4;
}
.il-cart-s10 {
  margin: 0 0 var(--s-1, 0.25rem);
}
.il-cart-s11 {
  color: var(--c-primary, #2563eb);
  text-decoration: underline;
}
.il-cart-s12 {
  margin: 0;
  font-size: var(--text-sm, 0.875rem);
  color: var(--c-muted, #6b7280);
}
.il-cart-s13 {
  list-style: none;
  padding: 0;
  margin: var(--s-4, 1rem) 0 0;
}