/* Topbar — ajustement hauteur quand une alerte est présente */
.st4-topbar {
  height: auto;
  min-height: 45px;
}

/* Zone d'alerte success dans la topbar */
.st4-topbar__alert {
  display: flex;
  align-items: center;
  flex: 1;
  padding: 0.25rem 0.5rem;
  gap: 0.4rem;
  min-width: 0;
}

.st4-topbar__alert .alert {
  margin: 0;
  padding: 0.3rem 0.75rem;
  font-size: 0.82rem;
  border-radius: 4px;
  width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.st4-topbar__alert .alert .btn-close {
  padding: 0.3rem;
}

.st4-pdf-badge {
  display: inline-block;
  position: relative;
  top: -1px;
  background: #c00;
  color: #fff;
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  padding: 1px 4px;
  border-radius: 2px;
  line-height: 1.5;
}

/* Sticker "N cours / sem." sur les miniatures produit (cat. Cours de claquettes) */
.package-cpw-sticker {
  position: absolute;
  top: .6rem;
  right: .6rem;
  background: #fff;
  color: #1a1a1a;
  border-radius: 8px;
  padding: .4rem .6rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  line-height: 1;
  box-shadow: 0 3px 10px rgba(0,0,0,.35);
  min-width: 2.8rem;
  text-align: center;
}
.package-cpw-number {
  font-size: 2rem;
  font-weight: 800;
  letter-spacing: -.02em;
  line-height: 1;
}
.package-cpw-label {
  font-size: .65rem;
  font-weight: 700;
  letter-spacing: .03em;
  text-transform: uppercase;
  opacity: .7;
  margin-top: .25rem;
  line-height: 1.2;
}

/* ── CTA "S'inscrire au cours" — colonne gauche ───────────────────────── */
.st4-cta-inscription {
  position: relative;
  display: flex;
  align-items: center;
  text-decoration: none !important;
  cursor: pointer;
  box-sizing: border-box;
}
.st4-cta2--banner {
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  background: linear-gradient(90deg, #a60000 0%, #7a0000 100%);
  color: #fff !important;
  padding: 14px 20px;
  box-shadow: 0 6px 14px rgba(0, 0, 0, 0.25);
  margin: 6px 0 10px;
  transition: background 0.25s ease;
}
.st4-cta2-banner__eyebrow {
  font-family: 'Open Sans', sans-serif;
  text-transform: uppercase;
  font-size: 11px;
  letter-spacing: 2px;
  opacity: 0.8;
  font-weight: 600;
}
.st4-cta2-banner__main {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  font-family: 'Oswald', sans-serif;
  text-transform: uppercase;
  font-weight: 800;
  font-size: 21px;
  letter-spacing: 0.5px;
}
.st4-cta2-banner__arrow {
  font-size: 18px;
  transition: transform 0.25s ease;
  display: inline-block;
}
.st4-cta2--banner:hover {
  background: linear-gradient(90deg, #c40000 0%, #8f0000 100%);
  color: #fff !important;
}
.st4-cta2--banner:hover .st4-cta2-banner__arrow {
  transform: translateX(6px);
}

/* ── Barre de périodes sur les cartes produit (cat. 17 Cours) ─────────── */
.pkg-period-bar{display:flex;gap:3px;margin-bottom:5px}
.pkg-period-bar__seg{flex:1;height:5px;border-radius:3px;background:rgba(0,0,0,.12)}
.pkg-period-bar__seg--on{background:#c8922a}
.pkg-period-bar--dots{justify-content:space-evenly}
.pkg-period-bar__dot{width:5px;height:5px;border-radius:50%;background:#c8922a;flex-shrink:0}
/* ── Catégorie "Cours de claquettes" (cat. 17) dans menu droit ────────── */
.cat-li--school {
  border-top: 1px dotted #ccc !important;
  padding: 5px 5px 5px 15px !important;
}
.cat-link--school {
  color: var(--bs-school) !important;
  display: block;
}
.cat-li--school:hover {
  background-color: var(--bs-school) !important;
}
.cat-li--school:hover > .cat-link--school {
  color: #fff !important;
}

/* ── Badges cat. 17 — adhésion + famille ─────────────────────────────── */
.pkg-cat-fee {
  font-size: 11px;
  color: var(--bs-secondary-color, #666);
  display: block;
  text-align: right;
}
.pkg-cat-family-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  color: #1a6b2e;
  background: #e6f4eb;
  border: 1px solid #8fcea0;
  border-radius: 3px;
  padding: 1px 6px;
  font-weight: 600;
}

.account-menu--sidebar {
  margin: 30px 0 !important;
}

.account-menu--sidebar .account-menu__nav {
  gap: 1rem;
}

.account-menu--sidebar .account-menu__link {
  background-color: #e8e8f9;
  border-radius: 20px;
  color: #123b4a;
  border: 1px solid #ddd;
  transition: background-color .18s, color .18s;
}

.account-menu--sidebar .account-menu__link:not(.account-menu__link--active):hover {
  background-color: #123b4a;
  color: #fafaff;
  border-color: #ddd;
}

.account-menu--sidebar .account-menu__link--school {
  color: var(--bs-school, #8B1E3F);
}

.account-menu--sidebar .account-menu__link--school:not(.account-menu__link--active):hover {
  background-color: var(--bs-school, #8B1E3F);
  color: #fff;
}

.account-menu--sidebar .account-menu__link--active {
  background-color: #123b4a;
  border-radius: 20px;
  color: #fafaff;
  border: 1px solid #ddd;
}

.page-title-section {
  padding-left: 15px;
}

/* ── Page Créer un compte ───────────────────────────────────────────────── */
.st4-register-intro {
  max-width: 520px;
  margin-bottom: 2rem;
  padding: 0 15px;
}
.st4-register-intro__text {
  font-size: 1.05rem;
  color: var(--bs-secondary-color, #555);
  margin-bottom: .5rem;
  line-height: 1.6;
}
.st4-register-intro__signin {
  font-size: .95rem;
  color: var(--bs-secondary-color, #666);
}
.st4-register-form {
  max-width: 520px;
  padding: 0 15px;
}
.st4-register-form .form-group {
  margin-bottom: 1.25rem;
}
.st4-register-form .form-label {
  font-size: .875rem;
  font-weight: 600;
  letter-spacing: .02em;
  text-transform: uppercase;
  color: #444;
  margin-bottom: .35rem;
}
.st4-register-form .form-control {
  padding: .55rem 1rem;
  border-radius: 6px;
  font-size: 1rem;
}
.st4-register-form .form-control:focus {
  border-color: var(--bs-school);
  box-shadow: 0 0 0 .2rem rgba(139,30,63,.18);
}
.st4-register-form .form-control-submit {
  background: var(--bs-school);
  border-color: var(--bs-school);
  padding: .65rem 2rem;
  font-size: 1rem;
  font-weight: 600;
  border-radius: 6px;
  width: 100%;
  margin-top: .5rem;
}
.st4-register-form .form-control-submit:hover {
  background: color-mix(in srgb, var(--bs-school) 85%, #000);
  border-color: color-mix(in srgb, var(--bs-school) 85%, #000);
}

/* ── Popup de connexion ─────────────────────────────────────────────────── */
.st4-ld {
  border: none;
  border-radius: 10px;
  padding: 0;
  box-shadow: 0 8px 40px rgba(0,0,0,.22);
  max-width: 440px;
  width: calc(100vw - 2rem);
  font-size: 1rem;
}
.st4-ld::backdrop { background: rgba(0,0,0,.45); }
.st4-ld-inner { padding: 1.6rem 1.75rem 1.4rem; }
.st4-ld-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1.4rem;
}
.st4-ld-title { font-size: 1.25rem; font-weight: 700; color: #1c1c1a; }
.st4-ld-close {
  background: none;
  border: none;
  cursor: pointer;
  color: #888;
  padding: 0;
  line-height: 1;
  font-size: 1.6rem;
}
.st4-ld-close:hover { color: #1c1c1a; }
.st4-ld-loading { color: #999; text-align: center; margin: 1rem 0; }

/* ── Footer ─────────────────────────────────────────────────────────────── */
.footer__main { background: var(--bs-shop-brand, #123b4a) !important; }

/* ── Category products slider ────────────────────────────────────────────── */
.catprod-slider-section{margin:2rem 0;padding:15px}
.catprod-slider-title{font-size:1.1rem;font-weight:600;margin-bottom:1rem}
.catprod-slider-wrapper{position:relative;display:flex;align-items:center;gap:.5rem}
.catprod-slider-track{display:flex;align-items:stretch;gap:1rem;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;-ms-overflow-style:none;flex:1;padding-bottom:4px}
.catprod-slider-track::-webkit-scrollbar{display:none}
.catprod-slider-item{flex:0 0 220px;scroll-snap-align:start;display:flex;flex-direction:column}
.catprod-slider-item .product-miniature{flex:1;display:flex;flex-direction:column}
.catprod-slider-item .product-miniature__inner{flex:1}
.catprod-slider-arrow{flex-shrink:0;width:36px;height:36px;border-radius:50%;border:1px solid rgba(0,0,0,.15);background:#fff;font-size:1.4rem;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background .15s,border-color .15s}
.catprod-slider-arrow:hover:not(:disabled){background:#f5f5f5;border-color:rgba(0,0,0,.3)}
.catprod-slider-arrow:disabled{opacity:.3;cursor:default}

/* ── Product page ───────────────────────────────────────────────────────── */
.page-product .product__name{padding:40px 15px 0}
.product__bottom{padding:15px}
.page-product .product__available-sizes{padding:0 0 15px 15px}