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;
    --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-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);
}

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);
}

.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);
}

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(--or-patine-clair);
}

.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;
}