body {
    background-color: #F9F7F3;
}

/* Cart badge animation */
@keyframes cart-bounce {
  0% { transform: scale(1); }
  25% { transform: scale(1.2); }
  50% { transform: scale(0.95); }
  75% { transform: scale(1.05); }
  100% { transform: scale(1); }
}
.cart-pulse { animation: cart-bounce 600ms ease-in-out 1; }

/* Floating cart badge on small screens */
.cart-fab {
  position: fixed;
  bottom: 16px;
  right: 16px;
  z-index: 1040; /* above offcanvas */
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background-color: #0d6efd; /* bootstrap primary */
  color: var(--or-patine-clair);
  box-shadow: 0 4px 12px rgba(0,0,0,0.2);
  text-decoration: none;
}
.cart-fab .badge {
  position: absolute;
  top: -6px;
  right: -6px;
}

/* Flatten dropdowns inside mobile offcanvas navbar */
@media (max-width: 991.98px) {
  #navbarSupportedContent .dropdown { position: static; }
  #navbarSupportedContent .dropdown-toggle::after { display: none; }
  #navbarSupportedContent .dropdown-menu {
    display: block;
    position: static;
    float: none;
    box-shadow: none;
    border: 0;
    margin-top: .25rem;
  }
  #navbarSupportedContent .dropdown-menu .dropdown-item { padding-left: 0; }
}

header {
    background-color: #1A1A1A;
}

:root,
[data-bs-theme=light] {
    --noir-profond: #1A1A1A;
    --noir-profond-rgb: 26, 26, 26;
    --gris: #8A8A8A;
    --blanc-casse:#F9F7F3;
    --blanc-casse-rgb: 249, 247, 243;
    --rouge-carmin: #B22222;
    --rouge-carmin-rgb: 178, 34, 34;
    --or-patine: #C8A951;
    --or-patine-fonce: #C6992A;
    --or-patine-clair: #CAC976;
    --or-patine-rgb: 200, 169, 81;
    --bs-emphasis-color-rgb: var(--or-patine-rgb);
    --bs-link-hover-color-rgb: var(--rouge-carmin-rgb);
    --bs-primary-color: var(--or-patine);
    --bs-primary-rgb: var(--noir-profond-rgb);
    --bs-tertiary-bg-rgb: var(--noir-profond-rgb);
    --bs-tertiary-color: var(--blanc-casse);
    --bs-body-bg: var(--blanc-casse);
    --bs-link-color: var(--or-patine-fonce);
    --bs-link-hover-color: var(--or-patine);
    --bs-danger-rgb: var(--rouge-carmin-rgb);
    --bs-heading-color: var(--blanc-casse);
    --bs-secondary-rgb: var(--noir-profond-rgb);
}

a {
    color: rgba(var(--or-patine-rgb), 0.8);
}
a:hover {
    color: rgba(var(--or-patine-rgb), 1);
}

.btn-primary {
    --bs-btn-color: var(--or-patine);
    --bs-btn-bg: var(--noir-profond);
    --bs-btn-border-color: var(--noir-profond);
    --bs-btn-hover-bg: var(--or-patine-fonce);
    --bs-btn-hover-border-color: var(--or-patine-fonce);
    --bs-btn-disabled-color: var(--or-patine);
    --bs-btn-disabled-bg: var(--noir-profond);
    --bs-btn-disabled-border-color: var(--noir-profond);
}

.btn-outline-primary {
    --bs-btn-color: var(--or-patine);
    --bs-btn-bg: var(--blanc-casse);
    --bs-btn-border-color: var(--or-patine);
    --bs-btn-hover-color: var(--or-patine-clair);
    --bs-btn-hover-bg: var(--noir-profond);
    --bs-btn-hover-border-color: var(--noir-profond);
    --bs-btn-active-color: var(--or-patine);
    --bs-btn-active-bg: var(--noir-profond);
    --bs-btn-active-border-color: var(--or-patine);
}

.btn-secondary {
    --bs-btn-color: var(--blanc-casse);
    --bs-btn-bg: var(--or-patine-fonce);
    --bs-btn-border-color: var(--or-patine-fonce);
    --bs-btn-hover-color: var(--or-patine-clair);
    --bs-btn-hover-bg: var(--noir-profond);
    --bs-btn-hover-border-color: var(--noir-profond);
}

.btn-outline-secondary {
    --bs-btn-color: var(--or-patine);
    --bs-btn-bg: var(--blanc-casse);
    --bs-btn-border-color: var(--or-patine);
    --bs-btn-hover-color: var(--or-patine-clair);
    --bs-btn-hover-bg: var(--noir-profond);
    --bs-btn-hover-border-color: var(--noir-profond);
}

.btn-tertiary {
    --bs-btn-color: var(--blanc-casse);
    --bs-btn-bg: var(--gris);
    --bs-btn-border-color: var(--gris);
    --bs-btn-hover-color: var(--gris);
    --bs-btn-hover-bg: var(--blanc-casse);
    --bs-btn-hover-border-color: var(--gris);
}

.btn-outline-tertiary {
    --bs-btn-color: var(--gris);
    --bs-btn-bg: var(--blanc-casse);
    --bs-btn-border-color: var(--gris);
    --bs-btn-hover-color: var(--blanc-casse);
    --bs-btn-hover-bg: var(--gris);
    --bs-btn-hover-border-color: var(--gris);
}

.btn-outline-light {
    --bs-btn-color: var(--blanc-casse);
    --bs-btn-border-color: var(--blanc-casse);
    --bs-btn-hover-color: var(--blanc-casse);
    --bs-btn-hover-border-color: var(--blanc-casse);
}

.btn.transparent {
    --bs-btn-bg: transparent;
    --bs-btn-hover-bg: transparent;
}

h1, h2, h3, h4, h5, h6 {
    color: var(--rouge-carmin);
}

.h1, .h2, .h3, .h4, .h5, .h6 {
    color: var(--rouge-carmin);
}

.navbar-nav {
    --bs-nav-link-color: var(--or-patine);
}

.dropdown-menu {
    --bs-dropdown-link-color: var(--or-patine);
}

.badge {
    --bs-badge-color: var(--blanc-casse);
}

.accordion {
    --bs-accordion-active-color: var(--or-patine-clair);
    --bs-accordion-active-bg: var(--noir-profond);
    --bs-accordion-btn-active-color: var(--or-patine-clair);
    --bs-accordion-btn-active-icon: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0iIzA1MmM2NSIgeG1sbnM6Yng9Imh0dHBzOi8vYm94eS1zdmcuY29tIj4KICA8ZGVmcz4KICAgIDxieDpleHBvcnQ+CiAgICAgIDxieDpmaWxlIGZvcm1hdD0ic3ZnIiBocmVmPSIjb2JqZWN0LTAiIHBhdGg9IlNhbnMgdGl0cmUuc3ZnIj48L2J4OmZpbGU+CiAgICAgIDxieDpmaWxlIGZvcm1hdD0iaHRtbCIgaHJlZj0iI29iamVjdC0wIiBwYXRoPSJTYW5zIHRpdHJlLmh0bWwiPjwvYng6ZmlsZT4KICAgIDwvYng6ZXhwb3J0PgogIDwvZGVmcz4KICA8cGF0aCBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik0xLjY0NiA0LjY0NmEuNS41IDAgMCAxIC43MDggMEw4IDEwLjI5M2w1LjY0Ni01LjY0N2EuNS41IDAgMCAxIC43MDguNzA4bC02IDZhLjUuNSAwIDAgMS0uNzA4IDBsLTYtNmEuNS41IDAgMCAxIDAtLjcwOHoiIHN0eWxlPSJmaWxsOiByZ2IoMjAyLCAyMDEsIDExOCk7IiBpZD0ib2JqZWN0LTAiPjwvcGF0aD4KPC9zdmc+);
    --bs-accordion-border-color: var(--or-patine-clair);
}

code[data-controller~="code-copy"] {
    position: relative;
}

code[data-controller~="code-copy"]::after,
code[data-controller~="code-copy"]::before {
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.2s ease, transform 0.2s ease;
}

code[data-controller~="code-copy"]::after {
    content: attr(data-tooltip-message);
    position: absolute;
    left: 50%;
    bottom: calc(100% + 0.5rem);
    transform: translate(-50%, 4px);
    background-color: var(--noir-profond);
    color: var(--or-patine-clair);
    padding: 0.25rem 0.5rem;
    border-radius: 0.25rem;
    white-space: nowrap;
    font-size: 0.75rem;
    z-index: 10;
}

code[data-controller~="code-copy"]::before {
    content: '';
    position: absolute;
    left: 50%;
    bottom: calc(100% + 0.3rem);
    transform: translate(-50%, 6px);
    border-width: 6px;
    border-style: solid;
    border-color: var(--noir-profond) transparent transparent transparent;
    z-index: 10;
}

code[data-controller~="code-copy"]:hover::after,
code[data-controller~="code-copy"]:hover::before,
code[data-controller~="code-copy"]:focus-visible::after,
code[data-controller~="code-copy"]:focus-visible::before,
code[data-controller~="code-copy"][data-tooltip-visible="true"]::after,
code[data-controller~="code-copy"][data-tooltip-visible="true"]::before {
    opacity: 1;
    transform: translate(-50%, 0);
}

code[data-controller~="code-copy"]:focus {
    outline: none;
}

.text-bg-secondary {
    color: var(--or-patine-clair) !important;
}

.list-group-item.active {
    color: var(--or-patine);
    background-color: var(--noir-profond);
    border-color: var(--noir-profond);
}

.tab-pane {
    transition: none;
}

.tab-pane.fade {
    transition: opacity 50ms linear;
}

/* ---- Carte d'authentification (login / register / activation de code) ---- */
.auth-card {
    border: none;
    border-radius: 1rem;
    box-shadow: 0 1rem 3rem rgba(var(--noir-profond-rgb), .12);
    overflow: hidden;
}

.auth-card__header {
    background: linear-gradient(135deg, var(--noir-profond) 0%, #000 100%);
    color: var(--blanc-casse);
    padding: 2.25rem 1.5rem 1.75rem;
    text-align: center;
    border-bottom: 3px solid var(--or-patine);
}

.auth-card__header h1 {
    color: var(--blanc-casse);
}

.auth-card__icon {
    width: 4rem;
    height: 4rem;
    border-radius: 50%;
    background: rgba(var(--or-patine-rgb), .15);
    color: var(--or-patine);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    margin-bottom: 1rem;
    border: 1px solid rgba(var(--or-patine-rgb), .4);
}

.auth-card .card-body {
    background: var(--blanc-casse);
}

.auth-card label.form-label,
.auth-card label {
    color: var(--noir-profond);
}

/* ---- Saisie segmentée du code d'activation ---- */
.code-redeem-segments {
    gap: .5rem;
}

.code-redeem-segment {
    font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;
    font-size: 1.25rem;
    letter-spacing: .15em;
    font-weight: 600;
    color: var(--noir-profond);
    height: 3.25rem;
    padding: .5rem .25rem;
    border-radius: .6rem;
    border: 1.5px solid rgba(var(--noir-profond-rgb), .2);
    transition: border-color .15s ease, box-shadow .15s ease;
}

.code-redeem-segment:focus {
    border-color: var(--or-patine);
    box-shadow: 0 0 0 .2rem rgba(var(--or-patine-rgb), .35);
}

.code-redeem-segment::placeholder {
    color: rgba(var(--noir-profond-rgb), .25);
    letter-spacing: .1em;
}

.code-redeem-sep {
    font-weight: 700;
    color: var(--or-patine);
}