/*
 * Cookoeur — surcouche de design sur le thème PrestaShop "classic".
 * Charte officielle (voir Project-OS/../cookoeur-shopify/src/app/globals.css) :
 * pêche #F9B07F · brun logo #764D32 · crème #F7F3F0 · blanc #FFFFFF
 * Police corps : DM Sans — police titres : Outfit
 */

:root {
  --co-peach: #f9b07f;
  --co-brown: #764d32;
  --co-cream: #f7f3f0;
  --co-white: #ffffff;
  --co-beige: #ebe6e0;
  --co-sand: #cbb9a8;
  --co-caramel: #e0804a;
  --co-brown-light: #94745f;
  --co-dark: #553724;

  --co-font-body: "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --co-font-heading: "Outfit", "DM Sans", -apple-system, BlinkMacSystemFont, sans-serif;

  --co-radius-sm: 0.375rem;
  --co-radius-md: 0.5rem;
  --co-radius-lg: 0.625rem;
  --co-radius-xl: 0.875rem;
}

/* ---------- Cookie du mois (repris de MonthlyBanner / MonthlyCookiePopup / MonthlyCookieEndedCta) ---------- */
.product-miniature .thumbnail-top {
  position: relative;
}
.co-monthly-banner {
  position: absolute;
  inset-inline: 0;
  bottom: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.375rem;
  padding: 0.375rem 0.75rem;
  background: rgba(251, 146, 60, 0.8);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  color: var(--co-brown);
  font-size: 0.75rem;
  line-height: 1.375;
  font-weight: 600;
  letter-spacing: 0.025em;
  text-align: center;
  pointer-events: none;
}
.co-monthly-banner svg {
  flex-shrink: 0;
  opacity: 0.7;
}
@media (min-width: 640px) {
  .co-monthly-banner {
    font-size: 0.875rem;
  }
}

.co-monthly-notice {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  margin: 0 0 2rem;
  padding: 0.625rem 1rem;
  border-radius: 0.75rem;
  background: rgba(251, 146, 60, 0.8);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  color: var(--co-brown);
  font-size: 0.875rem;
  line-height: 1.375;
  font-weight: 600;
  letter-spacing: 0.025em;
  text-align: center;
}
.co-monthly-notice svg {
  flex-shrink: 0;
  opacity: 0.7;
}
@media (min-width: 640px) {
  .co-monthly-notice {
    font-size: 1rem;
  }
}
/* le lien « Retour » a une marge basse de 2,5rem : la notice le suit de près */
.co-pdp-back + .co-monthly-notice {
  margin-top: -1.25rem;
}

.co-monthly-ended {
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
  padding-top: 0.25rem;
}
.co-monthly-ended-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: 0.875rem 1.5rem;
  border-radius: 0.75rem;
  background: rgba(118, 77, 50, 0.25);
  color: rgba(118, 77, 50, 0.7);
  font-weight: 600;
  cursor: not-allowed;
  user-select: none;
}
.co-monthly-ended-text {
  margin: 0;
  text-align: center;
  font-size: 0.75rem;
  color: var(--co-brown-light);
}

.co-monthly-popup[hidden] {
  display: none;
}
.co-monthly-popup {
  position: fixed;
  inset: 0;
  z-index: 2147483646;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow-y: auto;
  padding: 1.5rem;
  background: rgba(85, 55, 36, 0.7);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
}
.co-monthly-popup-card {
  position: relative;
  width: 100%;
  max-width: 26rem;
  overflow: hidden;
  border: 1px solid rgba(203, 185, 168, 0.4);
  border-radius: 1rem;
  background: var(--co-cream);
  text-align: center;
  box-shadow: 0 25px 50px -12px rgba(85, 55, 36, 0.3);
}
.co-monthly-popup-close {
  position: absolute;
  top: 0.75rem;
  right: 0.75rem;
  z-index: 20;
  display: flex;
  padding: 0.5rem;
  border: 0;
  border-radius: 9999px;
  background: rgba(247, 243, 240, 0.8);
  color: var(--co-brown);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  cursor: pointer;
  transition: background-color 0.15s ease;
}
.co-monthly-popup-close:hover {
  background: var(--co-cream);
}
.co-monthly-popup-media {
  aspect-ratio: 1 / 1;
  background: var(--co-beige);
}
.co-monthly-popup-media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.co-monthly-popup-body {
  padding: 2rem 1.75rem;
}
.co-monthly-popup-eyebrow {
  margin: 0;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--co-caramel);
}
.co-monthly-popup-title {
  margin: 0.5rem 0 0;
  font-family: var(--co-font-heading);
  font-size: 1.875rem;
  line-height: 1.25;
  font-weight: 700;
  letter-spacing: -0.02em;
  text-transform: none;
  color: var(--co-brown);
}
.co-monthly-popup-text {
  margin: 0.75rem 0 0;
  font-size: 0.9375rem;
  line-height: 1.625;
  color: var(--co-brown-light);
}
.co-monthly-popup-cta {
  display: block;
  width: 100%;
  margin-top: 1.5rem;
  padding: 0.875rem 1rem;
  border-radius: 0.75rem;
  background: var(--co-brown);
  color: var(--co-cream);
  font-weight: 600;
  transition: background-color 0.15s ease;
}
.co-monthly-popup-cta:hover,
.co-monthly-popup-cta:focus {
  background: rgba(118, 77, 50, 0.9);
  color: var(--co-cream);
}

/* ---------- SEO : sous-titre de fiche, texte de catégorie ---------- */
#main .co-pdp-subtitle {
  margin: -0.75rem 0 1.25rem;
  font-size: 1rem;
  line-height: 1.5;
  color: var(--co-brown-light);
}
.category-additional-description h2 {
  margin: 1.5rem 0 0.5rem;
  font-family: var(--co-font-heading);
  font-size: 1.25rem;
  line-height: 1.4;
  font-weight: 700;
  text-transform: none;
  color: var(--co-brown);
}
.category-additional-description h2:first-child {
  margin-top: 0;
}
.category-additional-description p {
  font-size: 0.9375rem;
  line-height: 1.625;
  color: var(--co-brown-light);
}
.category-additional-description a {
  color: var(--co-brown);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* ---------- Panier (repris de cookoeur-shopify/src/app/(shop)/panier/page.tsx) ----------
 * Valeurs Tailwind reprises telles quelles (commentées). Les classes natives conservées dans les
 * templates (js-cart, js-cart-line-product-quantity, remove-from-cart…) ne portent aucun style. */
body#cart #wrapper > .container,
body#cart #notifications .container {
  max-width: none;
  width: auto;
  padding-left: 0;
  padding-right: 0;
}
body#cart #wrapper > .container > .row {
  margin-left: 0;
  margin-right: 0;
}
body#cart #content-wrapper {
  padding-left: 0;
  padding-right: 0;
}
body#cart .breadcrumb {
  display: none;
}

/* min-h-screen : la page occupe au moins la hauteur de l'écran, le pied de page n'apparaît donc
   pas tant qu'on ne défile pas (même comportement que /panier sur Shopify). */
.co-cart-page {
  min-height: 100vh;
}
/* max-w-2xl mx-auto px-6 pt-32 pb-24 (pt inclut le header que #wrapper compense déjà) */
.co-cart-inner {
  max-width: 42rem;
  margin: 0 auto;
  padding: 3rem 1.5rem 6rem;
}
/* flex items-center gap-3 mb-8 */
.co-cart-head {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 2rem;
  color: rgba(118, 77, 50, 0.8);
}
/* font-heading text-3xl font-bold text-brown */
#main .co-cart-title {
  margin: 0;
  font-family: var(--co-font-heading);
  font-size: 1.875rem;
  line-height: 2.25rem;
  font-weight: 700;
  text-transform: none;
  color: var(--co-brown);
}
/* space-y-6 */
.co-cart-body > * + * {
  margin-top: 1.5rem;
}
.co-cart-summary > * + * {
  margin-top: 1.5rem;
}
.co-cart-summary > :empty {
  display: none;
}
.co-cart-summary > .co-cart-totals-root:not(:has(*)) + .co-cart-actions {
  margin-top: 0;
}

/* text-center py-16 space-y-4 text-gray-500 */
.co-cart-empty {
  padding: 4rem 0;
  text-align: center;
  color: #6b7280;
}
.co-cart-empty p {
  margin: 0 0 1rem;
  font-size: 1rem;
  color: inherit;
}
.co-cart-empty .co-cart-empty-cta {
  display: inline-block;
  padding: 0.75rem 1.5rem;
  border-radius: 0.75rem;
  background: var(--co-brown);
  color: var(--co-cream);
  font-weight: 600;
  transition: background-color 0.15s ease;
}
.co-cart-empty .co-cart-empty-cta:hover,
.co-cart-empty .co-cart-empty-cta:focus {
  background: rgba(118, 77, 50, 0.9);
  color: var(--co-cream);
}

/* ul space-y-4 ; li flex gap-4 p-4 rounded-2xl border border-sand/40 bg-white/80 */
.co-cart-items {
  margin: 0;
  padding: 0;
  list-style: none;
}
.co-cart-item + .co-cart-item {
  margin-top: 1rem;
}
.co-cart-line {
  display: flex;
  gap: 1rem;
  padding: 1rem;
  border: 1px solid rgba(203, 185, 168, 0.4);
  border-radius: 1rem;
  background: rgba(255, 255, 255, 0.8);
}
/* relative w-24 h-24 shrink-0 rounded-xl overflow-hidden bg-beige */
.co-cart-line-media {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 6rem;
  height: 6rem;
  overflow: hidden;
  border-radius: 0.75rem;
  background: var(--co-beige);
}
.co-cart-line-media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.co-cart-line-placeholder {
  font-size: 1.875rem;
}
.co-cart-line-body {
  flex: 1 1 0;
  min-width: 0;
}
/* font-semibold text-brown hover:text-caramel line-clamp-2 */
#main .co-cart-line-name {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  font-weight: 600;
  color: var(--co-brown);
}
#main .co-cart-line-name:hover,
#main .co-cart-line-name:focus {
  color: var(--co-caramel);
}
/* mt-1 space-y-0.5 ; li text-xs text-gray-500 leading-snug ; span font-medium text-brown/70 */
.co-cart-line-attrs {
  margin: 0.25rem 0 0;
  padding: 0;
  list-style: none;
}
.co-cart-line-attrs li {
  margin: 0;
  font-size: 0.75rem;
  line-height: 1.375;
  color: #6b7280;
}
.co-cart-line-attrs li + li {
  margin-top: 0.125rem;
}
.co-cart-line-attrs li span {
  font-weight: 500;
  color: rgba(118, 77, 50, 0.7);
}
/* text-sm text-gray-500 mt-1 */
.co-cart-line-unit {
  margin: 0.25rem 0 0;
  font-size: 0.875rem;
  line-height: 1.25rem;
  color: #6b7280;
}
.co-cart-line-regular {
  text-decoration: line-through;
  opacity: 0.7;
}
/* flex flex-wrap items-center gap-3 mt-3 */
.co-cart-line-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem;
  margin-top: 0.75rem;
}
/* flex items-center border border-sand rounded-lg ; boutons px-3 py-1.5 text-sm hover:bg-beige */
.co-cart-qty {
  display: flex;
  align-items: center;
  border: 1px solid var(--co-sand);
  border-radius: 0.5rem;
  overflow: hidden;
}
/* TouchSpin (theme.js) : on garde le plugin, écouté par le rafraîchissement natif, et on
   remet ses boutons verticaux en ligne : − n +. */
.co-cart-qty .bootstrap-touchspin {
  display: flex;
  align-items: center;
  width: auto;
  margin: 0;
  border: 0;
  box-shadow: none;
}
.co-cart-qty .bootstrap-touchspin .input-group-btn-vertical {
  display: contents;
}
#main .co-cart-qty .bootstrap-touchspin .btn-touchspin {
  position: static;
  display: block;
  float: none;
  width: auto;
  max-width: none;
  height: auto;
  margin: 0;
  padding: 0.375rem 0.75rem;
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
  font-size: 0.875rem;
  line-height: 1.25rem;
  color: var(--co-brown);
  cursor: pointer;
  transition: background-color 0.15s ease;
}
#main .co-cart-qty .bootstrap-touchspin .btn-touchspin:hover {
  background: var(--co-beige);
}
.co-cart-qty .bootstrap-touchspin .btn-touchspin i {
  display: none;
}
.co-cart-qty .bootstrap-touchspin-down {
  order: 0;
}
.co-cart-qty .bootstrap-touchspin input {
  order: 1;
}
.co-cart-qty .bootstrap-touchspin-up {
  order: 2;
}
.co-cart-qty .bootstrap-touchspin-down::before {
  content: "\2212";
}
.co-cart-qty .bootstrap-touchspin-up::before {
  content: "+";
}
/* span px-3 text-sm font-medium */
#main .co-cart-qty input.js-cart-line-product-quantity {
  width: 2.5rem;
  height: auto;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
  font-size: 0.875rem;
  line-height: 1.25rem;
  font-weight: 500;
  text-align: center;
  color: var(--co-brown);
  -moz-appearance: textfield;
}
#main .co-cart-qty input.js-cart-line-product-quantity:focus {
  outline: none;
}
.co-cart-qty input::-webkit-outer-spin-button,
.co-cart-qty input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
/* text-sm text-red-600 hover:underline */
#main .co-cart-line-remove {
  font-size: 0.875rem;
  line-height: 1.25rem;
  color: #dc2626;
}
#main .co-cart-line-remove:hover,
#main .co-cart-line-remove:focus {
  color: #dc2626;
  text-decoration: underline;
}

/* rounded-2xl border border-sand/40 bg-white p-6 space-y-4 */
.co-cart-totals {
  padding: 1.5rem;
  border: 1px solid rgba(203, 185, 168, 0.4);
  border-radius: 1rem;
  background: var(--co-white);
}
.co-cart-subtotal {
  display: flex;
  justify-content: space-between;
  font-size: 0.875rem;
  line-height: 1.25rem;
}
.co-cart-subtotal-label {
  color: #6b7280;
}
.co-cart-subtotal-value {
  font-weight: 600;
}
/* space-y-1.5 pt-2 border-t border-sand/40 */
.co-cart-shipping {
  margin-top: 1rem;
  padding-top: 0.5rem;
  border-top: 1px solid rgba(203, 185, 168, 0.4);
}
.co-cart-shipping-text {
  margin: 0 0 0.375rem;
  font-size: 0.875rem;
  line-height: 1.25rem;
  font-weight: 500;
  color: rgba(118, 77, 50, 0.7);
}
/* h-2 rounded-full bg-sand/40 overflow-hidden ; remplissage bg-caramel transition-all duration-500 */
.co-cart-shipping-bar {
  height: 0.5rem;
  overflow: hidden;
  border-radius: 9999px;
  background: rgba(203, 185, 168, 0.4);
}
.co-cart-shipping-fill {
  height: 100%;
  border-radius: 9999px;
  background: var(--co-caramel);
  transition: width 0.5s ease;
}

/* space-y-3 */
.co-cart-actions > * + * {
  margin-top: 0.75rem;
}
/* flex items-start gap-2 rounded-lg border border-sand/40 bg-beige/60 px-3 py-2.5 text-xs sm:text-sm text-brown/85 */
.co-cart-notice {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  margin: 0;
  padding: 0.625rem 0.75rem;
  border: 1px solid rgba(203, 185, 168, 0.4);
  border-radius: 0.5rem;
  background: rgba(235, 230, 224, 0.6);
  font-size: 0.75rem;
  line-height: 1.375;
  color: rgba(118, 77, 50, 0.85);
}
.co-cart-notice svg {
  flex-shrink: 0;
  margin-top: 0.125rem;
  color: var(--co-caramel);
}
@media (min-width: 640px) {
  .co-cart-notice {
    font-size: 0.875rem;
  }
}
/* text-base text-center font-medium text-brown/70 */
.co-cart-min {
  margin: 0;
  font-size: 1rem;
  line-height: 1.5rem;
  font-weight: 500;
  text-align: center;
  color: rgba(118, 77, 50, 0.7);
}
/* flex w-full items-center justify-center py-4 rounded-xl bg-brown text-cream font-semibold */
.co-cart-actions .co-cart-cta {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: 1rem;
  border: 0;
  border-radius: 0.75rem;
  background: var(--co-brown);
  color: var(--co-cream);
  font-weight: 600;
  transition: background-color 0.15s ease;
}
.co-cart-actions a.co-cart-cta:hover,
.co-cart-actions a.co-cart-cta:focus {
  background: rgba(118, 77, 50, 0.9);
  color: var(--co-cream);
}
.co-cart-actions .co-cart-cta.is-disabled {
  background: rgba(118, 77, 50, 0.3);
  color: rgba(247, 243, 240, 0.7);
  cursor: not-allowed;
  user-select: none;
}

/* ---------- Mini-panier latéral (repris de MiniCart.tsx) ----------
 * Reste la modale Bootstrap #blockcart-modal ; on la transforme en tiroir à droite. */
/* Bootstrap masque la barre de défilement de la page (body.modal-open { overflow: hidden }) et
   compense par un padding : la page « saute ». Le mini-panier Shopify ne touche pas au défilement,
   la barre reste donc visible et la mise en page ne bouge pas. */
body.modal-open {
  overflow: visible;
  padding-right: 0 !important;
}

/* au-dessus du bandeau et du header fixes du site */
#blockcart-modal.co-minicart {
  z-index: 2147483000;
}
.modal-backdrop {
  z-index: 2146999999;
}
#blockcart-modal.co-minicart .modal-dialog {
  position: fixed;
  top: 0;
  right: 0;
  height: 100%;
  width: 100%;
  max-width: 28rem;
  margin: 0;
  transform: translateX(100%);
  transition: transform 0.3s ease-out;
}
#blockcart-modal.co-minicart.in .modal-dialog,
#blockcart-modal.co-minicart.show .modal-dialog {
  transform: translateX(0);
}
#blockcart-modal.co-minicart .modal-content {
  display: flex;
  flex-direction: column;
  height: 100%;
  border: 0;
  border-left: 1px solid rgba(203, 185, 168, 0.4);
  border-radius: 0;
  background: var(--co-cream);
  box-shadow: -25px 0 50px -12px rgba(0, 0, 0, 0.25);
}
.co-minicart-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 1.25rem;
  border-bottom: 1px solid rgba(203, 185, 168, 0.4);
}
.co-minicart-title {
  margin: 0;
  font-family: var(--co-font-body);
  font-size: 1.125rem;
  line-height: 1.75rem;
  font-weight: 700;
  text-transform: none;
  color: var(--co-brown);
}
.co-minicart-close {
  display: flex;
  padding: 0.5rem;
  border: 0;
  border-radius: 0.5rem;
  background: none;
  color: var(--co-brown);
  cursor: pointer;
  transition: background-color 0.15s ease;
}
.co-minicart-close:hover {
  background: var(--co-beige);
}
.co-minicart-ship {
  padding: 0.75rem 1.25rem;
  border-bottom: 1px solid rgba(203, 185, 168, 0.4);
}
.co-minicart-ship-text {
  margin: 0 0 0.375rem;
  font-size: 0.75rem;
  line-height: 1rem;
  font-weight: 500;
  color: rgba(118, 77, 50, 0.7);
}
.co-minicart-ship-bar {
  height: 0.375rem;
  overflow: hidden;
  border-radius: 9999px;
  background: rgba(203, 185, 168, 0.4);
}
.co-minicart-ship-fill {
  height: 100%;
  border-radius: 9999px;
  background: var(--co-caramel);
  transition: width 0.5s ease;
}
.co-minicart-items {
  flex: 1 1 0;
  overflow-y: auto;
  padding: 1rem 1.25rem;
}
.co-minicart-item {
  display: flex;
  gap: 0.75rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid rgba(203, 185, 168, 0.3);
}
.co-minicart-item + .co-minicart-item {
  margin-top: 1rem;
}
.co-minicart-item:last-child {
  padding-bottom: 0;
  border-bottom: 0;
}
.co-minicart-media {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 5rem;
  height: 5rem;
  overflow: hidden;
  border-radius: 0.75rem;
  background: var(--co-beige);
  font-size: 1.5rem;
}
.co-minicart-media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.co-minicart-body {
  flex: 1 1 0;
  min-width: 0;
}
.co-minicart-name {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  font-size: 0.875rem;
  line-height: 1.25rem;
  font-weight: 500;
  color: var(--co-brown);
}
/* jamais souligné (le thème souligne les liens au survol, au focus et au clic) */
#blockcart-modal .co-minicart-name,
#blockcart-modal .co-minicart-name:hover,
#blockcart-modal .co-minicart-name:focus,
#blockcart-modal .co-minicart-name:active,
#blockcart-modal .co-minicart-name:visited {
  text-decoration: none;
  outline: none;
  color: var(--co-brown);
}
#blockcart-modal .co-minicart-name:hover {
  color: var(--co-caramel);
}
.co-minicart-meta {
  margin: 0.125rem 0 0;
  font-size: 0.75rem;
  line-height: 1rem;
  color: #9ca3af;
}
/* flex items-center gap-2 mt-2 ; − / + : p-1.5 rounded-md border border-sand/60 hover:bg-beige ;
   quantité : text-sm font-semibold w-6 text-center ; Retirer : ml-auto text-xs text-red-600 */
.co-minicart-actions {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: 0.5rem;
}
.co-minicart-step {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.375rem;
  border: 1px solid rgba(203, 185, 168, 0.6);
  border-radius: 0.375rem;
  background: transparent;
  color: var(--co-brown);
  cursor: pointer;
  transition: background-color 0.15s ease;
}
.co-minicart-step:hover {
  background: var(--co-beige);
}
.co-minicart-qty {
  width: 1.5rem;
  text-align: center;
  font-size: 0.875rem;
  line-height: 1.25rem;
  font-weight: 600;
  color: var(--co-brown);
}
.co-minicart-remove {
  margin-left: auto;
  font-size: 0.75rem;
  line-height: 1rem;
  color: #dc2626;
}
.co-minicart-remove:hover,
.co-minicart-remove:focus {
  color: #dc2626;
  text-decoration: underline;
}
/* pendant l'appel ajax : boutons inertes, le panneau reste opaque */
.co-minicart.is-busy .modal-content {
  pointer-events: none;
}
/* une seule police dans tout le tiroir (DM Sans), y compris boutons et liens */
#blockcart-modal.co-minicart,
#blockcart-modal.co-minicart * {
  font-family: var(--co-font-body);
}
.co-minicart-empty {
  margin: 0;
  padding: 3rem 0;
  text-align: center;
  font-size: 0.875rem;
  color: #6b7280;
}
.co-minicart-foot {
  padding: 1rem 1.25rem;
  border-top: 1px solid rgba(203, 185, 168, 0.4);
  background: rgba(255, 255, 255, 0.6);
}
.co-minicart-foot > * + * {
  margin-top: 0.75rem;
}
.co-minicart-subtotal {
  display: flex;
  justify-content: space-between;
  font-size: 0.875rem;
  line-height: 1.25rem;
}
.co-minicart-subtotal span {
  color: #6b7280;
}
.co-minicart-subtotal strong {
  color: var(--co-brown);
}
.co-minicart-min {
  margin: 0;
  font-size: 0.875rem;
  line-height: 1.25rem;
  font-weight: 500;
  text-align: center;
  color: rgba(118, 77, 50, 0.7);
}
.co-minicart-cta {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: 0.75rem 1rem;
  border-radius: 0.75rem;
  background: var(--co-brown);
  color: var(--co-cream);
  font-weight: 600;
  transition: background-color 0.15s ease;
}
a.co-minicart-cta:hover,
a.co-minicart-cta:focus {
  background: rgba(118, 77, 50, 0.9);
  color: var(--co-cream);
}
.co-minicart-cta.is-disabled {
  background: rgba(118, 77, 50, 0.3);
  color: rgba(247, 243, 240, 0.7);
  cursor: not-allowed;
  user-select: none;
}
.co-minicart-full {
  display: block;
  text-align: center;
  font-size: 0.875rem;
  line-height: 1.25rem;
  font-weight: 500;
  color: var(--co-caramel);
}
.co-minicart-full:hover {
  text-decoration: underline;
  color: var(--co-caramel);
}

/* ---------- Boutique (repris de cookoeur-shopify/src/app/(shop)/boutique/page.tsx) ----------
 * Pleine largeur : le conteneur Bootstrap (1140 px) est neutralisé, la largeur est gérée par
 * .co-shop-hero-inner / .co-shop-section (max-w-7xl). Valeurs Tailwind reprises, commentées. */
body#category #wrapper > .container,
body#category #notifications .container {
  max-width: none;
  width: auto;
  padding-left: 0;
  padding-right: 0;
}
body#category #wrapper > .container > .row {
  margin-left: 0;
  margin-right: 0;
}
body#category #content-wrapper {
  padding-left: 0;
  padding-right: 0;
}
body#category .breadcrumb {
  display: none;
}

/* border-b border-sand/60 bg-cream px-6 pb-14 pt-32 sm:px-8 lg:px-14 lg:pb-16 lg:pt-[9.5rem]
   (pt-32 = 8rem depuis le haut de page ; #wrapper compense déjà la hauteur du header) */
.co-shop-hero {
  padding: calc(8rem - var(--co-header-h, 0px)) 1.5rem 3.5rem;
  border-bottom: 1px solid rgba(203, 185, 168, 0.6);
  background: var(--co-cream);
}
@media (min-width: 640px) {
  .co-shop-hero {
    padding-left: 2rem;
    padding-right: 2rem;
  }
}
@media (min-width: 1024px) {
  .co-shop-hero {
    padding: calc(9.5rem - var(--co-header-h, 0px)) 3.5rem 4rem;
  }
}
/* mx-auto max-w-[80rem] > max-w-[56ch] */
.co-shop-hero-inner {
  max-width: 80rem;
  margin: 0 auto;
}
.co-shop-hero-inner > * {
  max-width: 56ch;
}
/* text-xs font-semibold uppercase tracking-[0.18em] text-caramel */
.co-shop-eyebrow,
.co-shop-label {
  margin: 0;
  font-size: 0.75rem;
  line-height: 1rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--co-caramel);
}
.co-shop-label {
  margin-bottom: 0.75rem;
}
/* mt-[18px] max-w-[18ch] font-heading text-[clamp(2.75rem,6vw,4.5rem)] font-bold leading-[1.05]
   tracking-[-0.025em] text-brown text-balance */
.co-shop .co-shop-title {
  max-width: 18ch;
  margin: 18px 0 0;
  font-family: var(--co-font-heading);
  font-size: clamp(2.75rem, 6vw, 4.5rem);
  line-height: 1.05;
  font-weight: 700;
  letter-spacing: -0.025em;
  text-transform: none;
  text-wrap: balance;
  color: var(--co-brown);
}
/* mt-4 text-[17px] leading-[1.55] text-brown-light text-pretty */
.co-shop .co-shop-lead {
  margin: 1rem 0 0;
  font-size: 17px;
  line-height: 1.55;
  text-wrap: pretty;
  color: var(--co-brown-light);
  /* Shopify borne le bloc parent (16 px) à 56ch : en 17 px, cela fait 56 × 16 / 17 ≈ 52,7ch */
  max-width: 52.7ch;
}
/* mt-5 inline-flex items-center gap-2 rounded-full bg-caramel/10 px-4 py-2 text-sm font-medium text-caramel */
.co-shop .co-shop-ship {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin: 1.25rem 0 0;
  padding: 0.5rem 1rem;
  border-radius: 9999px;
  background: rgba(224, 128, 74, 0.1);
  font-size: 0.875rem;
  line-height: 1.25rem;
  font-weight: 500;
  color: var(--co-caramel);
}

/* mx-auto max-w-7xl px-6 pt-8 pb-6 ; listing : pb-24 px-6 max-w-7xl mx-auto */
.co-shop-section {
  max-width: 80rem;
  margin: 0 auto;
  padding: 0 1.5rem;
}
.co-shop-nav {
  padding-top: 2rem;
  padding-bottom: 1.5rem;
}
.co-shop-listing {
  padding-bottom: 6rem;
}
.co-shop-nav .co-shop-label {
  margin-bottom: 0.75rem;
}
/* flex flex-wrap gap-2 */
.co-shop-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}
/* inline-block rounded-full border px-3 py-1.5 text-sm transition-colors ;
   actif : border-caramel bg-caramel text-white ; sinon border-sand/60 text-brown hover:border-caramel/50 */
.co-shop-filter {
  display: inline-block;
  padding: 0.375rem 0.75rem;
  border: 1px solid rgba(203, 185, 168, 0.6);
  border-radius: 9999px;
  background: transparent;
  font-family: var(--co-font-body);
  font-size: 0.875rem;
  line-height: 1.25rem;
  color: var(--co-brown);
  cursor: pointer;
  transition: color 0.15s, background-color 0.15s, border-color 0.15s;
}
.co-shop-filter:hover,
.co-shop-filter:focus {
  border-color: rgba(224, 128, 74, 0.5);
  color: var(--co-brown);
}
.co-shop-filter.is-active,
.co-shop-filter.is-active:hover,
.co-shop-filter.is-active:focus {
  border-color: var(--co-caramel);
  background: var(--co-caramel);
  color: #fff;
}
/* flex flex-col gap-6 */
.co-shop-format {
  margin-bottom: 1.5rem;
}
.co-shop-format .co-shop-label {
  margin-bottom: 0.75rem;
}
/* grid grid-cols-1 gap-6 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 */
.co-shop-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1.5rem;
}
@media (min-width: 640px) {
  .co-shop-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (min-width: 1024px) {
  .co-shop-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
@media (min-width: 1280px) {
  .co-shop-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

/* article : flex h-full flex-col bg-white rounded-2xl overflow-hidden border border-sand/50
   hover:border-caramel/30 hover:shadow-lg transition-all duration-300 */
.co-shop-card {
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
  border: 1px solid rgba(203, 185, 168, 0.5);
  border-radius: 1rem;
  background: var(--co-white);
  transition: all 0.3s ease;
}
.co-shop-card:hover {
  border-color: rgba(224, 128, 74, 0.3);
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);
}
/* relative aspect-square bg-beige overflow-hidden ; image object-cover group-hover:scale-105 duration-500 */
.co-shop-card-media {
  position: relative;
  display: block;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  background: var(--co-beige);
}
.co-shop-card-media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* les sources non carrées sont inscrites dans un carré blanc : on les recadre (cf. co-product-card) */
  transform: scale(var(--co-fit, 1));
  transition: transform 0.5s ease;
}
.co-shop-card-media:hover img {
  transform: scale(calc(var(--co-fit, 1) * 1.05));
}
.co-shop-card-empty {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  font-size: 3rem;
}
/* flex flex-1 flex-col p-5 */
.co-shop-card-body {
  display: flex;
  flex: 1 1 0;
  flex-direction: column;
  padding: 1.25rem;
}
.co-shop-card-text {
  display: block;
}
/* font-semibold text-brown text-lg leading-tight group-hover:text-caramel line-clamp-2 */
.co-shop .co-shop-card-title {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  margin: 0;
  /* h3 : police des titres du site (globals.css : h1–h6 en font-heading, -0.02em) */
  font-family: var(--co-font-heading);
  font-size: 1.125rem;
  line-height: 1.25;
  font-weight: 600;
  text-transform: none;
  letter-spacing: -0.02em;
  color: var(--co-brown);
  transition: color 0.15s ease;
}
.co-shop-card-text:hover .co-shop-card-title,
.co-shop-card-text:focus .co-shop-card-title {
  color: var(--co-caramel);
}
/* text-sm text-gray-500 mt-1.5 line-clamp-2 */
.co-shop .co-shop-card-desc {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  margin: 0.375rem 0 0;
  font-size: 0.875rem;
  line-height: 1.25rem;
  color: #6b7280;
}
.co-shop-card a,
.co-shop-card a:hover,
.co-shop-card a:focus {
  text-decoration: none;
}
/* mt-auto > mt-3 flex flex-col gap-2 */
.co-shop-card-buy {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin-top: auto;
  padding-top: 0.75rem;
}
/* flex gap-1.5 ; pastille : flex flex-1 flex-col items-center rounded-xl border py-2 px-2 */
.co-shop-pills {
  display: flex;
  gap: 0.375rem;
}
.co-shop-pill {
  display: flex;
  flex: 1 1 0;
  flex-direction: column;
  align-items: center;
  padding: 0.5rem;
  border: 1px solid rgba(203, 185, 168, 0.5);
  border-radius: 0.75rem;
  background: var(--co-white);
  font-family: var(--co-font-body);
  color: var(--co-brown-light);
  cursor: pointer;
  transition: all 0.15s ease;
}
.co-shop-pill:hover {
  border-color: rgba(224, 128, 74, 0.4);
  background: rgba(224, 128, 74, 0.05);
}
.co-shop-pill.is-active {
  border-color: var(--co-caramel);
  background: rgba(224, 128, 74, 0.1);
  color: var(--co-brown);
}
/* text-[10px] font-bold uppercase tracking-wide (actif : caramel, sinon brown-light/60) */
.co-shop-pill-label {
  font-size: 10px;
  line-height: 1rem;
  font-weight: 700;
  letter-spacing: 0.025em;
  text-transform: uppercase;
  color: rgba(148, 116, 95, 0.6);
}
.co-shop-pill.is-active .co-shop-pill-label {
  color: var(--co-caramel);
}
/* text-sm font-bold text-brown */
.co-shop-pill-price {
  font-size: 0.875rem;
  line-height: 1.25rem;
  font-weight: 700;
  color: var(--co-brown);
}
/* produit sans format : flex items-center gap-3 ; prix text-lg font-bold text-brown */
.co-shop-add-row {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}
.co-shop-price {
  font-size: 1.125rem;
  line-height: 1.75rem;
  font-weight: 700;
  color: var(--co-brown);
}
/* flex w-full items-center justify-center gap-2 rounded-xl bg-brown py-2.5 px-4 text-sm font-semibold
   text-cream hover:bg-brown/90 active:scale-[0.98] disabled:opacity-60 */
.co-shop-add,
.co-shop-compose {
  display: flex;
  flex: 1 1 0;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  width: 100%;
  padding: 0.625rem 1rem;
  border: 0;
  border-radius: 0.75rem;
  background: var(--co-brown);
  font-family: var(--co-font-body);
  font-size: 0.875rem;
  line-height: 1.25rem;
  font-weight: 600;
  color: var(--co-cream);
  cursor: pointer;
  transition: all 0.15s ease;
}
.co-shop-add:hover,
.co-shop-compose:hover,
.co-shop .co-shop-compose:hover,
.co-shop .co-shop-compose:focus {
  background: rgba(118, 77, 50, 0.9);
  color: var(--co-cream);
}
.co-shop-add:active,
.co-shop-compose:active {
  transform: scale(0.98);
}
.co-shop-add:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}
.co-shop-compose {
  padding: 0.75rem 1rem;
}
/* mt-14 flex flex-wrap items-center justify-center gap-2 ; page : min-h-10 min-w-10 rounded-lg border px-3 */
.co-shop-pagination {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  margin-top: 3.5rem;
}
.co-shop-page {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2.5rem;
  min-height: 2.5rem;
  padding: 0 0.75rem;
  border: 1px solid rgba(203, 185, 168, 0.6);
  border-radius: 0.5rem;
  background: var(--co-white);
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--co-brown);
  transition: border-color 0.15s ease;
}
.co-shop-page:hover {
  border-color: var(--co-caramel);
  color: var(--co-brown);
}
.co-shop-page.is-current,
.co-shop-page.is-current:hover {
  border-color: var(--co-brown);
  background: var(--co-brown);
  color: var(--co-cream);
}
.co-shop-page-gap {
  padding: 0 0.5rem;
  font-size: 0.875rem;
  color: var(--co-brown-light);
}
/* état vide : text-center py-24 text-gray-400 space-y-3 */
.co-shop-empty {
  padding: 6rem 0;
  text-align: center;
  color: #9ca3af;
}
.co-shop-empty-icon {
  margin: 0;
  font-size: 3rem;
}
.co-shop-empty-title {
  margin: 0.75rem 0;
  font-size: 1.125rem;
  font-weight: 500;
  color: #6b7280;
}
.co-shop-empty a {
  color: var(--co-caramel);
  text-decoration: underline;
}
/* texte de catégorie (SEO) sous la grille */
.co-shop-seo {
  max-width: 48rem;
  margin: 0 auto;
  padding: 0 1.5rem 3rem;
}
/* border-t border-sand/60 bg-cream px-6 py-12 > mx-auto max-w-2xl text-center space-y-4 */
.co-shop-flyer {
  padding: 3rem 1.5rem;
  border-top: 1px solid rgba(203, 185, 168, 0.6);
  background: var(--co-cream);
  text-align: center;
}
.co-shop-flyer p {
  max-width: 42rem;
  margin: 0 auto 1rem;
  font-size: 0.875rem;
  line-height: 1.625;
  color: var(--co-brown-light);
}
/* inline-flex min-h-11 items-center justify-center rounded-full border-2 border-brown/15 px-8 py-3
   text-sm font-semibold text-brown hover:border-caramel hover:text-caramel */
.co-shop-flyer-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 2.75rem;
  padding: 0.75rem 2rem;
  border: 2px solid rgba(118, 77, 50, 0.15);
  border-radius: 9999px;
  font-size: 0.875rem;
  line-height: 1.25rem;
  font-weight: 600;
  color: var(--co-brown);
  transition: all 0.15s ease;
}
.co-shop-flyer-btn:hover,
.co-shop-flyer-btn:focus {
  border-color: var(--co-caramel);
  color: var(--co-caramel);
}

/* ---------- Composeur de box (repris de BoxComposer.tsx) ---------- */
/* flex flex-col gap-6 */
.co-composer {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}
/* flex items-center gap-3 ; text-2xl font-bold text-brown ; text-sm text-gray-400 */
.co-composer-price {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}
.co-composer-price-value {
  font-size: 1.5rem;
  line-height: 2rem;
  font-weight: 700;
  color: var(--co-brown);
}
.co-composer-price-note {
  font-size: 0.875rem;
  color: #9ca3af;
}
/* rounded-xl bg-beige/60 px-4 py-3 */
.co-composer-gauge {
  padding: 0.75rem 1rem;
  border-radius: 0.75rem;
  background: rgba(235, 230, 224, 0.6);
}
.co-composer-gauge-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  font-size: 0.875rem;
  line-height: 1.25rem;
}
.co-composer-gauge-title {
  font-weight: 500;
  color: var(--co-brown);
}
.co-composer-gauge-state {
  color: #6b7280;
}
/* mt-2 h-1.5 w-full overflow-hidden rounded-full bg-sand/40 ; remplissage bg-caramel transition-all */
.co-composer-bar {
  height: 0.375rem;
  margin-top: 0.5rem;
  overflow: hidden;
  border-radius: 9999px;
  background: rgba(203, 185, 168, 0.4);
}
.co-composer-bar-fill {
  height: 100%;
  border-radius: 9999px;
  background: var(--co-caramel);
  transition: width 0.15s ease;
}
/* grid grid-cols-2 sm:grid-cols-4 gap-4 */
.co-composer-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
@media (min-width: 640px) {
  .co-composer-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}
/* flex flex-col overflow-hidden rounded-2xl border transition-colors ;
   sélectionné : border-caramel bg-caramel/5 ; sinon border-sand/50 ; plein : opacity-50 */
.co-composer-item {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid rgba(203, 185, 168, 0.5);
  border-radius: 1rem;
  transition: border-color 0.15s ease, background-color 0.15s ease;
}
.co-composer-item.is-selected {
  border-color: var(--co-caramel);
  background: rgba(224, 128, 74, 0.05);
}
.co-composer-item.is-dimmed {
  opacity: 0.5;
}
/* relative aspect-square w-full overflow-hidden bg-beige */
.co-composer-item-media {
  position: relative;
  aspect-ratio: 1 / 1;
  width: 100%;
  overflow: hidden;
  background: var(--co-beige);
}
.co-composer-item-media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(var(--co-fit, 1));
}
/* absolute right-2 top-2 h-7 min-w-7 rounded-full bg-caramel px-1.5 text-sm font-bold text-white shadow */
.co-composer-item-badge {
  position: absolute;
  top: 0.5rem;
  right: 0.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 1.75rem;
  height: 1.75rem;
  padding: 0 0.375rem;
  border-radius: 9999px;
  background: var(--co-caramel);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
  font-size: 0.875rem;
  font-weight: 700;
  color: #fff;
}
.co-composer-item-badge[hidden] {
  display: none;
}
/* flex flex-1 flex-col gap-2.5 p-3 ; text-sm font-medium text-brown line-clamp-2 */
.co-composer-item-body {
  display: flex;
  flex: 1 1 0;
  flex-direction: column;
  gap: 0.625rem;
  padding: 0.75rem;
}
.co-composer-item-name {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  font-size: 0.875rem;
  line-height: 1.25rem;
  font-weight: 500;
  color: var(--co-brown);
}
/* mt-auto flex items-center justify-between */
.co-composer-item-controls {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: auto;
}
/* flex h-9 w-9 items-center justify-center rounded-lg border border-sand/60 text-brown hover:bg-beige
   disabled:opacity-40 */
.co-composer-step {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  padding: 0;
  border: 1px solid rgba(203, 185, 168, 0.6);
  border-radius: 0.5rem;
  background: transparent;
  color: var(--co-brown);
  cursor: pointer;
  transition: background-color 0.15s ease;
}
.co-composer-step:hover:not(:disabled) {
  background: var(--co-beige);
}
.co-composer-step:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}
/* w-6 text-center text-base font-semibold tabular-nums */
.co-composer-count {
  width: 1.5rem;
  text-align: center;
  font-size: 1rem;
  line-height: 1.5rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--co-brown);
}
/* flex w-full items-center justify-center gap-2 py-4 px-6 bg-brown text-cream rounded-xl font-semibold
   hover:bg-brown/90 active:scale-[0.98] disabled:opacity-50 */
.co-composer-add {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  width: 100%;
  padding: 1rem 1.5rem;
  border: 0;
  border-radius: 0.75rem;
  background: var(--co-brown);
  font-family: var(--co-font-body);
  font-size: 1rem;
  line-height: 1.5rem;
  font-weight: 600;
  color: var(--co-cream);
  cursor: pointer;
  transition: all 0.15s ease;
}
.co-composer-add:hover:not(:disabled) {
  background: rgba(118, 77, 50, 0.9);
}
.co-composer-add:active:not(:disabled) {
  transform: scale(0.98);
}
.co-composer-add:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* ---------- Checkout : pictogramme du mode de livraison (boutique / camionnette) ---------- */
.delivery-option .carrier .carriere-name-container {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}
/* theme.css réserve un tiers de la colonne à un logo de transporteur (absent ici) : même sélecteur,
   chargé après, pour le rendre. */
body#checkout section.checkout-step .delivery-options .delivery-option label .carrier:not(.carrier-hasLogo) > .carriere-name-container {
  padding-left: 15px;
}
.delivery-option .carrier .carrier-name {
  display: block;
  line-height: 1.35;
}
.delivery-option .co-carrier-icon {
  flex-shrink: 0;
  width: 1.75rem;
  height: 1.75rem;
  color: var(--co-brown);
}

/* ---------- Contact : formulaire en maintenance ---------- */
.co-contact-fieldset {
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}
.co-contact-fieldset:disabled {
  opacity: 0.55;
}
.co-contact-maintenance {
  margin: 0 0 1.5rem;
  padding: 0.75rem 1rem;
  border: 1px solid rgba(118, 77, 50, 0.2);
  border-radius: 0.5rem;
  background: rgba(255, 255, 255, 0.8);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
  font-size: 0.875rem;
  color: var(--co-brown);
}
.co-contact-maintenance-title {
  margin: 0;
  font-weight: 500;
}
.co-contact-maintenance-text {
  margin: 0.25rem 0 0;
  line-height: 1.625;
  color: rgba(148, 116, 95, 0.95);
}

/* ---------- Base ---------- */
body {
  background-color: var(--co-cream);
  color: var(--co-brown);
  font-family: var(--co-font-body);
  /* Interligne et lissage du site actuel (Tailwind : leading 1.5 + antialiased).
     Sans le lissage, tout le texte paraît plus gras qu'à l'original. */
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Le thème classic impose « p { font-size:.9375rem; font-weight:400;
   color:#7a7a7a } » à TOUS les paragraphes du site : d'où un texte plus petit
   et gris souris là où l'original hérite simplement de son conteneur.
   On rétablit l'héritage. */
p {
  font-size: inherit;
  font-weight: inherit;
  color: inherit;
}

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
  font-family: var(--co-font-heading);
  letter-spacing: -0.02em;
  color: var(--co-brown);
  font-weight: 600;
}

a {
  color: var(--co-caramel);
}
a:hover, a:focus {
  color: var(--co-brown);
}

/* ---------- Focus ----------
   Règle générale du thème : aucun contour au clic, anneau brun discret au
   clavier. L'outline suit l'arrondi propre à l'élément, donc les boutons
   pilule gardent leur forme. Certains composants (navbar, dépliant avis)
   affinent ensuite l'anneau au-dessus de cette base. */
:focus:not(:focus-visible) {
  outline: none;
}
:focus-visible {
  outline: 2px solid rgba(118, 77, 50, 0.55);
  outline-offset: 2px;
}
/* Sur fond brun (footer, header au-dessus du hero), l'anneau passe en clair. */
.co-footer :focus-visible,
#footer :focus-visible {
  outline-color: rgba(255, 255, 255, 0.65);
}
/* Les liens de navigation n'ont pas d'arrondi propre : on leur en donne un
   pour retrouver la pilule du site actuel. */
.co-footer a:focus-visible,
#footer a:focus-visible,
.co-nav-link:focus-visible,
.co-mobile-nav a:focus-visible {
  border-radius: var(--co-radius-sm);
}

/* ---------- Buttons ---------- */
.btn-primary,
button[type="submit"],
.add-to-cart,
#checkout-summary #payment-confirmation button,
a.btn-primary {
  background-color: var(--co-caramel);
  border-color: var(--co-caramel);
  color: var(--co-white);
  border-radius: var(--co-radius-md);
  font-family: var(--co-font-heading);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  transition: background-color 0.25s ease, transform 0.15s ease;
}
.btn-primary:hover,
.btn-primary:focus,
button[type="submit"]:hover,
.add-to-cart:hover,
a.btn-primary:hover {
  background-color: var(--co-brown);
  border-color: var(--co-brown);
  color: var(--co-white);
  transform: translateY(-1px);
}

.btn-secondary,
.btn-outline-secondary {
  background-color: transparent;
  border-color: var(--co-brown);
  color: var(--co-brown);
  border-radius: var(--co-radius-md);
}

/* ---------- Header ---------- */
/* La barre et le bandeau sont en position fixed : #header n'est plus qu'un conteneur neutre. */
#header {
  position: static;
  background: none;
  box-shadow: none;
}

/* Bandeau livraison offerte */
.co-banner {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1100;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.5rem 1rem;
  background-color: var(--co-peach);
  text-align: center;
}
.co-banner-icon {
  flex-shrink: 0;
  color: rgba(118, 77, 50, 0.7);
}
.co-banner-text {
  margin: 0;
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1.35;
  letter-spacing: 0.01em;
  color: var(--co-brown);
}
@media (min-width: 576px) {
  .co-banner-text { font-size: 1rem; }
}

/* Barre principale */
.co-header {
  position: fixed;
  top: var(--co-banner-h, 0px);
  left: 0;
  right: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.625rem 1rem;
  border-bottom: 1px solid rgba(203, 185, 168, 0.5);
  background-color: rgba(247, 243, 240, 0.9);
  backdrop-filter: blur(4px);
  transition: background-color 0.3s ease-out, border-color 0.3s ease-out,
    box-shadow 0.3s ease-out, backdrop-filter 0.3s ease-out;
}
@media (min-width: 576px) {
  .co-header {
    gap: 1rem;
    padding: 0.75rem 1.5rem;
  }
}
/* Au-dessus du hero : transparent, puis opaque au survol */
.co-header.is-dark {
  background-color: transparent;
  border-bottom-color: transparent;
  backdrop-filter: none;
  box-shadow: none;
}
.co-header.is-dark:hover {
  background-color: rgba(247, 243, 240, 0.95);
  border-bottom-color: rgba(203, 185, 168, 0.4);
  backdrop-filter: blur(12px);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

/* Logo (bascule blanc / noir) */
.co-header-logo {
  position: relative;
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
}
.co-logo {
  display: block;
  height: 2rem;
  width: auto;
  max-width: none;
  transition: opacity 0.3s ease;
}
@media (min-width: 576px) {
  .co-logo { height: 2.25rem; }
}
.co-logo-white {
  position: absolute;
  left: 0;
  top: 0;
  opacity: 0;
  pointer-events: none;
}
.co-logo-dark { opacity: 0.95; }
.co-header.is-dark .co-logo-white { opacity: 0.95; }
.co-header.is-dark .co-logo-dark { opacity: 0; }
.co-header.is-dark:hover .co-logo-white { opacity: 0; }
.co-header.is-dark:hover .co-logo-dark { opacity: 1; }

/* Navigation desktop */
.co-nav {
  display: none;
  flex: 1;
  align-items: center;
  justify-content: center;
  gap: 1.5rem;
}
@media (min-width: 900px) {
  .co-nav { display: flex; }
}
@media (min-width: 1200px) {
  .co-nav { gap: 2.5rem; }
}
/* `#header` en préfixe : le thème classic pose `#header a{color:#232323}` (sélecteur ID). */
#header .co-nav-link {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0;
  border: 0;
  background: none;
  font-family: var(--co-font-heading);
  font-size: 0.8125rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  white-space: nowrap;
  color: var(--co-brown-light);
  cursor: pointer;
  transition: color 0.3s ease;
}
#header .co-nav-link:hover {
  color: var(--co-brown);
}
/* Pas de contour au clic ; au clavier, l'anneau brun du site actuel. */
#header .co-nav-link:focus {
  outline: none;
}
#header .co-nav-link:focus-visible {
  outline: none;
  border-radius: var(--co-radius-sm);
  box-shadow: 0 0 0 2px var(--co-cream), 0 0 0 4px rgba(118, 77, 50, 0.35);
}
#header .co-header.is-dark .co-nav-link:focus-visible {
  box-shadow: 0 0 0 2px transparent, 0 0 0 4px rgba(255, 255, 255, 0.6);
}
#header .co-header.is-dark:hover .co-nav-link:focus-visible {
  box-shadow: 0 0 0 2px var(--co-cream), 0 0 0 4px rgba(118, 77, 50, 0.35);
}
/* Même traitement pour les boutons maison de la homepage : rien au clic,
   l'anneau brun au clavier. L'anneau suit l'arrondi propre à chaque bouton. */
.co-review-toggle:focus,
.co-faq-q:focus,
.co-star:focus,
.co-ingredients-btn:focus,
.co-shop-preview-arrow:focus,
.co-shop-preview-btn:focus,
.co-review-submit:focus,
.co-hero-cta:focus,
.co-pro-btn:focus {
  outline: none;
}
.co-faq-q:focus-visible,
.co-star:focus-visible,
.co-ingredients-btn:focus-visible,
.co-shop-preview-arrow:focus-visible,
.co-shop-preview-btn:focus-visible,
.co-review-submit:focus-visible,
.co-hero-cta:focus-visible,
.co-pro-btn:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px var(--co-cream), 0 0 0 4px rgba(118, 77, 50, 0.35);
}
.co-faq-q:focus-visible { border-radius: var(--co-radius-sm); }
/* Le bouton du dépliant avis remplit sa carte, qui masque le débordement :
   l'anneau se pose sur la carte pour suivre son arrondi. */
.co-review-card:has(.co-review-toggle:focus-visible) {
  box-shadow: 0 0 0 2px var(--co-cream), 0 0 0 4px rgba(118, 77, 50, 0.35);
}
#header .co-header.is-dark .co-nav-link { color: rgba(255, 255, 255, 0.95); }
#header .co-header.is-dark .co-nav-link:hover { color: var(--co-white); }
#header .co-header.is-dark:hover .co-nav-link { color: var(--co-brown); }

/* Sous-menu Boutique */
.co-nav-dropdown { position: relative; }
/* pont invisible : évite que le menu se ferme en traversant l'espace sous le lien */
.co-nav-dropdown::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  height: 0.75rem;
}
.co-nav-chevron { transition: transform 0.2s ease; }
.co-nav-dropdown.is-open .co-nav-chevron { transform: rotate(180deg); }
.co-nav-menu {
  position: absolute;
  left: 50%;
  top: 100%;
  margin-top: 0.75rem;
  min-width: 160px;
  overflow: hidden;
  border: 1px solid rgba(203, 185, 168, 0.5);
  border-radius: var(--co-radius-lg);
  background-color: rgba(247, 243, 240, 0.98);
  box-shadow: 0 10px 15px -3px rgba(118, 77, 50, 0.12);
  backdrop-filter: blur(4px);
  opacity: 0;
  visibility: hidden;
  transform: translateX(-50%) translateY(-6px);
  transition: opacity 0.18s ease-out, transform 0.18s ease-out, visibility 0.18s;
}
.co-nav-dropdown.is-open .co-nav-menu {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
}
#header .co-nav-menu a {
  display: block;
  padding: 0.625rem 1rem;
  font-family: var(--co-font-heading);
  font-size: 0.8125rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  white-space: nowrap;
  color: var(--co-brown-light);
  transition: background-color 0.2s ease, color 0.2s ease;
}
#header .co-nav-menu a:hover {
  background-color: rgba(203, 185, 168, 0.3);
  color: var(--co-brown);
}

/* Panier */
.co-header-actions {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}
#header .co-cart {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.5rem;
  color: var(--co-brown);
  transition: color 0.3s ease;
}
#header .co-cart:hover { color: var(--co-caramel); }
#header .co-header.is-dark .co-cart { color: var(--co-white); }
#header .co-header.is-dark:hover .co-cart { color: var(--co-brown); }
#header .co-header.is-dark:hover .co-cart:hover { color: var(--co-caramel); }
/* Mon compte (V1.4) : même gabarit que l'icône panier */
#header .co-account {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.5rem;
  color: var(--co-brown);
  transition: color 0.3s ease;
}
#header .co-account:hover { color: var(--co-caramel); }
#header .co-header.is-dark .co-account { color: var(--co-white); }
#header .co-header.is-dark:hover .co-account { color: var(--co-brown); }
#header .co-header.is-dark:hover .co-account:hover { color: var(--co-caramel); }
.co-cart-count {
  position: absolute;
  top: -0.125rem;
  right: -0.125rem;
  min-width: 1.25rem;
  height: 1.25rem;
  padding: 0 0.25rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background-color: var(--co-caramel);
  color: var(--co-white);
  font-size: 0.75rem;
  font-weight: 700;
  line-height: 1;
}

/* Burger + menu mobile */
#header .co-header-burger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.5rem;
  border: 0;
  border-radius: var(--co-radius-md);
  background: none;
  color: var(--co-brown);
  cursor: pointer;
  transition: color 0.3s ease, background-color 0.3s ease;
}
@media (min-width: 900px) {
  #header .co-header-burger { display: none; }
}
#header .co-header.is-dark .co-header-burger { color: var(--co-white); }
#header .co-header.is-dark:hover .co-header-burger { color: var(--co-brown); }
.co-header-burger .co-icon-close { display: none; }
.co-header.is-menu-open .co-header-burger .co-icon-close { display: block; }
.co-header.is-menu-open .co-header-burger .co-icon-menu { display: none; }

.co-mobile-nav {
  position: fixed;
  top: calc(var(--co-banner-h, 0px) + var(--co-header-h, 3.25rem));
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 999;
  overflow-y: auto;
  background-color: rgba(247, 243, 240, 0.98);
  backdrop-filter: blur(12px);
}
@media (min-width: 900px) {
  .co-mobile-nav { display: none !important; }
}
/* Ouverture : le panneau descend en fondu, puis les liens entrent en cascade
   (mêmes durées et décalages que le framer-motion du site actuel). */
.co-mobile-nav {
  opacity: 0;
  transform: translateY(-10px);
  transition: opacity 0.32s cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.32s cubic-bezier(0.22, 1, 0.36, 1);
}
.co-mobile-nav.is-open {
  opacity: 1;
  transform: translateY(0);
}
.co-mobile-nav nav {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  padding: 1.5rem 1rem;
}
.co-mobile-nav.is-open a {
  animation: co-mobile-link 0.3s cubic-bezier(0.22, 1, 0.36, 1) both;
  animation-delay: calc(0.06s + var(--i, 0) * 0.045s);
}
@keyframes co-mobile-link {
  from { opacity: 0; transform: translateX(-14px); }
  to { opacity: 1; transform: translateX(0); }
}
@media (prefers-reduced-motion: reduce) {
  .co-mobile-nav,
  .co-mobile-nav.is-open a,
  .co-hero-track,
  .co-shop-preview-track,
  .co-faq-panel,
  .co-review-panel {
    transition: none;
    animation: none;
  }
}
#header .co-mobile-nav a {
  display: block;
  padding: 0.75rem;
  border-radius: var(--co-radius-lg);
  font-family: var(--co-font-heading);
  font-size: 0.875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--co-brown);
}
#header .co-mobile-nav a:hover {
  background-color: rgba(203, 185, 168, 0.3);
  color: var(--co-brown);
}
#header .co-mobile-nav .co-mobile-sub {
  padding-left: 1.75rem;
  color: var(--co-brown-light);
}

/* Décalage du contenu sous les éléments fixes */
body { padding-top: var(--co-banner-h, 0px); }
#wrapper { padding-top: var(--co-header-h, 3.25rem); }
body#index #wrapper { padding-top: 0; }

/* Homepage : chaque section gère sa propre largeur, comme sur le site actuel.
   On neutralise donc le conteneur Bootstrap (plafonné à 1140px) qui bridait
   le carrousel ingrédients et empêchait le fond de la section avis d'aller aux bords.
   Les autres pages gardent leur conteneur. */
body#index #wrapper > .container,
body#index #notifications .container {
  max-width: none;
  width: auto;
  padding-left: 0;
  padding-right: 0;
}
body#index #wrapper > .container > .row {
  margin-left: 0;
  margin-right: 0;
}
body#index #content-wrapper {
  padding-left: 0;
  padding-right: 0;
}
body#index .breadcrumb { display: none; }

#avis,
.co-faq {
  scroll-margin-top: calc(var(--co-banner-h, 0px) + var(--co-header-h, 3.25rem) + 1rem);
}

/* ---------- Footer ---------- */
.co-footer {
  background-color: var(--co-brown);
  color: var(--co-cream);
  padding: 4rem 1.5rem;
  margin-top: auto;
}
.co-footer .container {
  max-width: 72rem;
  /* max-w-6xl sans marge interne (Shopify) : la marge de .container Bootstrap s'ajoutait aux px-6 */
  padding-left: 0;
  padding-right: 0;
}
.co-footer-brand {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  text-align: center;
}
.co-footer-logo {
  height: 3.5rem;
  width: auto;
}
.co-footer-tagline {
  font-size: 0.875rem;
  color: rgba(247, 243, 240, 0.75);
  max-width: 24rem;
  line-height: 1.6;
  margin: 0;
}
.co-footer-nav {
  margin-top: 3rem;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  column-gap: 2rem;
  row-gap: 0.5rem;
  font-size: 0.9375rem;
}
.co-footer-nav a {
  color: rgba(247, 243, 240, 0.8);
}
.co-footer-nav a:hover {
  color: var(--co-cream);
}
.co-footer-bottom {
  margin-top: 3rem;
  padding-top: 2rem;
  border-top: 1px solid rgba(247, 243, 240, 0.15);
  display: flex;
  flex-direction: column;
  gap: 1rem;
  font-size: 0.75rem;
  color: rgba(247, 243, 240, 0.6);
  line-height: 1.6;
}
.co-footer-bottom p {
  margin: 0;
}
.co-footer-legal {
  display: flex;
  flex-wrap: wrap;
  column-gap: 1.25rem;
  row-gap: 0.25rem;
}
.co-footer-legal a {
  color: rgba(247, 243, 240, 0.6);
}
.co-footer-legal a:hover {
  color: var(--co-cream);
}
@media (min-width: 576px) {
  .co-footer-bottom {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
  }
}

/* ---------- Homepage / category hero ---------- */
#wrapper,
#content-wrapper {
  background-color: var(--co-cream);
}
.page-home #content-wrapper,
.page-home #wrapper {
  background-color: var(--co-cream);
}
.page-home #content {
  padding: 0;
  margin: 0;
}

.co-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.co-hero {
  position: relative;
  min-height: 76vh;
  min-height: 76dvh;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  margin: 0;
}
.co-hero-viewport {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
}
/* Piste en % (et non en vw) : insensible à la largeur de la barre de défilement. */
.co-hero-track {
  display: flex;
  height: 100%;
  width: 400%;
  will-change: transform;
  transition-property: transform;
  transition-timing-function: cubic-bezier(0.33, 1, 0.68, 1);
}
.co-hero-slide {
  position: relative;
  height: 100%;
  flex: 0 0 25%;
  overflow: hidden;
}
.co-hero-slide img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 50%;
}
.co-hero-drag {
  position: absolute;
  inset: 0;
  z-index: 5;
  cursor: grab;
  touch-action: pan-y;
  user-select: none;
}
.co-hero.is-dragging .co-hero-drag { cursor: grabbing; }
.co-hero-overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0.35), rgba(0, 0, 0, 0.2) 50%, rgba(0, 0, 0, 0.45));
}
.co-hero-content {
  position: relative;
  z-index: 10;
  pointer-events: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2rem;
  padding: 6rem 1.5rem 3.5rem;
  text-align: center;
}
.co-hero-logo {
  height: min(46vh, 30rem);
  width: auto;
  max-width: min(90vw, 40rem);
  object-fit: contain;
  filter: drop-shadow(0 2px 10px rgba(0, 0, 0, 0.55)) drop-shadow(0 8px 36px rgba(0, 0, 0, 0.4));
}
.co-hero-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  pointer-events: auto;
  min-height: 2.75rem;
  padding: 0.75rem 2.25rem;
  border: 2px solid rgba(255, 255, 255, 0.75);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.05);
  color: #fff;
  font-family: "Quicksand", var(--co-font-heading);
  font-size: 0.8125rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  backdrop-filter: blur(4px);
  transition: all 0.3s ease-out;
}
.co-hero-cta:hover {
  background: #fff;
  border-color: #fff;
  color: var(--co-brown);
  transform: scale(1.03);
}

.co-promise {
  background-color: var(--co-cream);
  padding: 1.375rem 1.5rem;
  max-width: 48rem;
  margin: 0 auto;
  text-align: center;
}
.co-promise-eyebrow {
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.22em;
  color: var(--co-caramel);
  margin: 0 0 1.25rem;
}
.co-promise-title {
  font-family: var(--co-font-heading);
  font-size: 1.75rem;
  font-weight: 600;
  color: var(--co-brown);
  line-height: 1.3;
  margin: 0 0 1.25rem;
}
.co-promise-text {
  /* Original : text-base sm:text-lg leading-relaxed */
  font-size: 1rem;
  color: var(--co-brown-light);
  line-height: 1.625;
  max-width: 40rem;
  margin: 0 auto;
}
@media (min-width: 640px) {
  .co-promise-title { font-size: 2.25rem; }
  .co-promise-text { font-size: 1.125rem; }
}

/* ---------- Pro (B2B teaser) ---------- */
.co-pro {
  position: relative;
  min-height: 34rem;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  padding: 6rem 1.5rem;
  text-align: center;
  color: var(--co-cream);
}
.co-pro-media,
.co-pro-media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.co-pro-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgba(74, 48, 34, 0.55), rgba(74, 48, 34, 0.7));
}
.co-pro-content {
  position: relative;
  z-index: 2;
  max-width: 45rem;
  margin: 0 auto;
}
.co-pro-eyebrow {
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--co-peach);
  margin: 0 0 1.125rem;
}
.co-pro-title {
  font-family: var(--co-font-heading);
  font-size: clamp(2.125rem, 5vw, 3.625rem);
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -0.025em;
  color: var(--co-cream);
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.3);
  margin: 0 0 1.25rem;
}
.co-pro-text {
  max-width: 56ch;
  margin: 0 auto;
  font-size: 1.0625rem;
  line-height: 1.625;
  color: rgba(247, 243, 240, 0.95);
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.3);
}
.co-pro-actions {
  margin-top: 1.75rem;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.75rem;
}
.co-pro-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 2.75rem;
  padding: 0.75rem 2rem;
  border-radius: 999px;
  font-family: "Quicksand", var(--co-font-heading);
  font-size: 0.8125rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  transition: all 0.25s ease;
}
.co-pro-btn-fill {
  background: var(--co-cream);
  color: #6b513e;
}
.co-pro-btn-fill:hover {
  background: #fff;
  color: #6b513e;
}
.co-pro-btn-outline {
  background: transparent;
  border: 2px solid rgba(255, 255, 255, 0.9);
  color: var(--co-cream);
}
.co-pro-btn-outline:hover {
  background: rgba(255, 255, 255, 0.1);
}

/* ---------- FAQ ---------- */
.co-faq {
  background-color: var(--co-cream);
  padding: 5rem 1.5rem;
}
.co-faq > .co-faq-head,
.co-faq-list {
  max-width: 55rem;
  margin: 0 auto;
}
.co-faq-eyebrow {
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--co-caramel);
  margin: 0 0 0.875rem;
}
.co-faq-title {
  font-family: var(--co-font-heading);
  font-size: clamp(1.75rem, 3.5vw, 2.625rem);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.02em;
  color: var(--co-brown);
  margin: 0 0 1rem;
}
.co-faq-text {
  max-width: 52ch;
  color: var(--co-brown-light);
  line-height: 1.625;
  margin: 0 0 1.5rem;
}
.co-faq-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(118, 77, 50, 0.25);
  border-radius: 999px;
  padding: 0.625rem 1.5rem;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--co-brown);
  transition: all 0.2s ease;
}
.co-faq-cta:hover {
  border-color: var(--co-caramel);
  color: var(--co-caramel);
}
.co-faq-list {
  margin-top: 3.5rem;
  border-top: 1px solid var(--co-sand);
}
.co-faq-item {
  border-bottom: 1px solid var(--co-sand);
}
.co-faq-q {
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  padding: 1.375rem 0.25rem 1.375rem 0;
  border: 0;
  background: none;
  text-align: left;
  cursor: pointer;
  font-family: var(--co-font-heading);
  font-size: 1rem;
  font-weight: 600;
  color: var(--co-brown);
  transition: color 0.2s ease;
}
.co-faq-q:hover { color: var(--co-caramel); }
.co-faq-item.is-open .co-faq-q { color: var(--co-caramel); }
.co-faq-chevron {
  flex-shrink: 0;
  color: var(--co-caramel);
  transition: transform 0.25s ease;
}
.co-faq-item.is-open .co-faq-chevron {
  transform: rotate(180deg);
}
/* Dépliement animé : grid-template-rows 0fr → 1fr, aucune hauteur en dur. */
.co-faq-panel {
  display: grid;
  grid-template-rows: 0fr;
  opacity: 0;
  transition: grid-template-rows 0.28s ease, opacity 0.28s ease;
}
.co-faq-item.is-open .co-faq-panel {
  grid-template-rows: 1fr;
  opacity: 1;
}
.co-faq-panel-inner { overflow: hidden; }
.co-faq-panel p {
  max-width: 60ch;
  padding-bottom: 1.375rem;
  font-size: 0.9375rem;
  line-height: 1.65;
  color: var(--co-brown-light);
  margin: 0;
}
@media (min-width: 992px) {
  .co-faq {
    display: grid;
    grid-template-columns: 1fr 1.4fr;
    gap: 3.5rem;
    max-width: 68rem;
    margin: 0 auto;
    align-items: start;
  }
  .co-faq > .co-faq-head,
  .co-faq-list {
    max-width: none;
    margin: 0;
  }
  .co-faq-list {
    margin-top: 0;
  }
}

/* ---------- Product cards ---------- */
.product-miniature .thumbnail-container,
.js-product-miniature .thumbnail-container {
  border-radius: var(--co-radius-lg);
  overflow: hidden;
  background-color: var(--co-white);
}
.product-miniature .product-title a,
.product-title a {
  color: var(--co-brown);
  font-family: var(--co-font-heading);
  font-weight: 600;
}
.product-price-and-shipping .price,
.product-prices .price {
  color: var(--co-caramel);
  font-weight: 700;
}

/* ---------- Category / product page ---------- */
.product-cover,
#content .images-container {
  border-radius: var(--co-radius-lg);
  overflow: hidden;
}
.product-quantity .add,
.product-actions .add-to-cart {
  border-radius: var(--co-radius-md);
}

/* ---------- Category (boutique) ---------- */
body#category #left-column,
body.category #left-column {
  display: none;
}
body#category #content-wrapper,
body.category #content-wrapper {
  width: 100%;
  max-width: 100%;
  flex: 0 0 100%;
}
#js-product-list-top .sort-by,
#js-active-search-filters {
  font-family: var(--co-font-body);
}
.category-cover img {
  border-radius: var(--co-radius-lg);
}
h1.h1,
.page-content h1 {
  font-family: var(--co-font-heading);
  color: var(--co-brown);
}

/* ---------- Product page ----------
 * Copie de cookoeur-shopify : produits/[slug]/page.tsx, ProductDetailWithGallery.tsx,
 * ProductGallery.tsx, IngredientsAccordion.tsx, AllergensAccordion.tsx,
 * RelatedCookiesCarousel.tsx. Valeurs Tailwind reprises telles quelles (commentées).
 * Les classes historiques conservées dans les templates (js-product-*, #quantity_wanted…)
 * ne portent aucun style : seules les classes co-pdp-* / co-related-* pilotent l'habillage.
 */

/* Comme la homepage : le bloc « Vous aimerez aussi » va d'un bord à l'autre, le conteneur
   Bootstrap (1140 px) est neutralisé et la largeur est gérée par .co-pdp-inner. */
body#product #wrapper > .container,
body#product #notifications .container {
  max-width: none;
  width: auto;
  padding-left: 0;
  padding-right: 0;
}
body#product #wrapper > .container > .row {
  margin-left: 0;
  margin-right: 0;
}
body#product #content-wrapper {
  padding-left: 0;
  padding-right: 0;
}
body#product .breadcrumb {
  display: none;
}

/* max-w-7xl mx-auto px-6 pt-28 pb-24 — pt-28 inclut la hauteur du header, que #wrapper
   compense déjà. */
.co-pdp-inner {
  max-width: 80rem;
  margin: 0 auto;
  padding: calc(7rem - var(--co-header-h, 3.25rem)) 1.5rem 6rem;
}

/* inline-flex items-center gap-1.5 text-sm text-gray-400 hover:text-brown mb-10 */
.co-pdp-back {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  margin-bottom: 2.5rem;
  font-size: 0.875rem;
  line-height: 1.25rem;
  color: #9ca3af;
  transition: color 0.15s ease;
}
#main .co-pdp-back:hover,
#main .co-pdp-back:focus {
  color: var(--co-brown);
}

/* grid grid-cols-1 lg:grid-cols-[2fr_3fr] gap-10 lg:gap-16 items-start */
.co-pdp-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 2.5rem;
  align-items: start;
}
@media (min-width: 1024px) {
  .co-pdp-grid {
    grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
    gap: 4rem;
  }
  /* lg:sticky lg:top-28 */
  .co-pdp-gallery-col {
    position: sticky;
    top: calc(var(--co-banner-h, 0px) + 7rem);
  }
}

/* Étiquettes natives : absentes de l'original. */
.co-pdp .js-product-flags {
  display: none;
}

/* ---- Galerie (space-y-3) ---- */
.co-pdp-gallery-frame {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}
/* relative aspect-square rounded-2xl overflow-hidden bg-beige group */
.co-pdp-cover {
  position: relative;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  border-radius: 1rem;
  background: var(--co-beige);
}
/* Photos empilées : la photo active passe au premier plan en fondu. */
.co-pdp-cover-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 0.35s ease, transform 0.5s ease-out;
}
.co-pdp-cover-img.is-active {
  opacity: 1;
}
/* --co-fit : ratio de la photo source (cf. product-cover-thumbnails.tpl), recadre les bandes
   blanches des miniatures PrestaShop. group-hover:scale-105 duration-500 ease-out. */
.co-pdp-cover-img {
  transform: scale(var(--co-fit, 1));
}
.co-pdp-cover:hover .co-pdp-cover-img {
  transform: scale(calc(var(--co-fit, 1) * 1.05));
}
.co-pdp-cover-empty {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  font-size: 4.5rem;
  user-select: none;
}
/* flex gap-2.5 overflow-x-auto pb-1 */
.co-pdp-thumbs {
  display: flex;
  gap: 0.625rem;
  overflow-x: auto;
  padding-bottom: 0.25rem;
}
/* shrink-0 w-20 h-20 rounded-xl overflow-hidden border-2 transition-colors */
.co-pdp-thumb {
  flex-shrink: 0;
  width: 5rem;
  height: 5rem;
  padding: 0;
  overflow: hidden;
  border: 2px solid transparent;
  border-radius: 0.75rem;
  background: none;
  cursor: pointer;
  transition: border-color 0.15s ease;
}
.co-pdp-thumb:hover {
  border-color: var(--co-sand);
}
.co-pdp-thumb.is-active {
  border-color: var(--co-caramel);
}
.co-pdp-thumb img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(var(--co-fit, 1));
}

/* ---- Colonne infos (flex flex-col gap-6) ---- */
.co-pdp-info-col,
.co-pdp-panel {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}
/* font-heading text-3xl lg:text-4xl font-bold text-brown leading-tight — le h1 du thème
   classic est en majuscules, d'où le text-transform explicite. */
#main .co-pdp-title {
  margin: 0;
  font-family: var(--co-font-heading);
  font-size: 1.875rem;
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -0.02em;
  text-transform: none;
  color: var(--co-brown);
}
@media (min-width: 1024px) {
  #main .co-pdp-title {
    font-size: 2.25rem;
  }
}
/* text-gray-600 text-sm leading-relaxed [&_p]:mb-3 [&_ul]:list-disc [&_ul]:pl-4 [&_ul]:space-y-1 */
.co-pdp-description {
  font-size: 0.875rem;
  line-height: 1.625;
  color: #4b5563;
}
.co-pdp-description p {
  margin: 0 0 0.75rem;
}
.co-pdp-description ul {
  list-style: disc;
  padding-left: 1rem;
}
.co-pdp-description li + li {
  margin-top: 0.25rem;
}

/* Formulaire d'achat : flex flex-col gap-4 */
.co-pdp-form {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.co-pdp-form > :empty,
.co-pdp .product-discounts:not(:has(*)),
.co-pdp .product-variants:not(:has(*)),
.co-pdp .product-additional-info:not(:has(*)) {
  display: none;
}
.co-pdp-has-formats .co-pdp-price-block {
  display: none;
}

/* Libellé « Taille » réservé aux lecteurs d'écran : le thème classic lui donne une largeur
   pleine (.product-variants-item .control-label), qui débordait sur mobile. */
#main .co-pdp-format-group .co-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ---- Sélecteur de format (flex gap-2) ---- */
.co-pdp-format-options {
  display: flex;
  gap: 0.5rem;
}
/* flex flex-1 flex-col items-start rounded-2xl border p-4 text-left transition-all */
.co-pdp-format-option {
  position: relative;
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  margin: 0;
  padding: 1rem;
  border: 1px solid rgba(203, 185, 168, 0.5);
  border-radius: 1rem;
  background: rgba(255, 255, 255, 0.6);
  text-align: left;
  cursor: pointer;
  transition: all 0.15s cubic-bezier(0.4, 0, 0.2, 1);
}
.co-pdp-format-option:hover {
  border-color: rgba(224, 128, 74, 0.4);
}
/* border-caramel bg-caramel/8 shadow-sm */
.co-pdp-format-option.is-selected {
  border-color: var(--co-caramel);
  background: rgba(224, 128, 74, 0.08);
  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px -1px rgba(0, 0, 0, 0.1);
}
.co-pdp-format-option:has(.co-pdp-format-input:focus-visible) {
  box-shadow: 0 0 0 2px var(--co-cream), 0 0 0 4px rgba(118, 77, 50, 0.35);
}
/* text-xs font-bold uppercase tracking-[0.18em] — caramel si actif, brown-light/60 sinon */
.co-pdp-format-name {
  font-size: 0.75rem;
  line-height: 1rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(148, 116, 95, 0.6);
}
.co-pdp-format-option.is-selected .co-pdp-format-name {
  color: var(--co-caramel);
}
/* Le thème classic pose `.input-radio:checked + span { border: 2px solid #232323 }`. */
.co-pdp-format-input:checked + .co-pdp-format-name,
.co-pdp-format-input:hover + .co-pdp-format-name {
  border: none;
}
/* mt-0.5 text-xl font-bold text-brown */
.co-pdp-format-price {
  margin-top: 0.125rem;
  font-size: 1.25rem;
  line-height: 1.75rem;
  font-weight: 700;
  color: var(--co-brown);
}
/* mt-0.5 text-xs text-gray-400 */
.co-pdp-format-weight {
  margin-top: 0.125rem;
  font-size: 0.75rem;
  line-height: 1rem;
  color: #9ca3af;
}

/* ---- Prix (produits sans format : text-2xl font-bold text-brown) ---- */
.co-pdp-price-current .current-price-value {
  font-size: 1.5rem;
  line-height: 2rem;
  font-weight: 700;
  color: var(--co-brown);
}
.co-pdp-price-compare .regular-price {
  font-size: 1rem;
  color: #9ca3af;
  text-decoration: line-through;
}
.co-pdp-price-note,
.co-pdp-price-discount {
  font-size: 0.8125rem;
  color: #9ca3af;
}

/* Disponibilité : retirée de l'affichage (cf. template). */
.co-pdp-stock {
  display: none;
}
.co-pdp .product-minimal-quantity {
  margin: 0;
  font-size: 0.8125rem;
  color: #9ca3af;
}
.co-pdp .product-minimal-quantity:not(:has(*)):empty {
  display: none;
}

/* ---- Quantité + panier : flex flex-col sm:flex-row gap-3 pt-1 ---- */
.co-pdp-buy-row {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  padding-top: 0.25rem;
}
@media (min-width: 640px) {
  .co-pdp-buy-row {
    flex-direction: row;
  }
}
/* flex items-center border border-sand rounded-xl overflow-hidden */
.co-pdp-qty {
  display: flex;
  align-items: center;
  align-self: flex-start;
  overflow: hidden;
  border: 1px solid var(--co-sand);
  border-radius: 0.75rem;
}
/* px-4 py-3 hover:bg-beige transition-colors text-brown */
.co-pdp-qty-btn {
  padding: 0.75rem 1rem;
  border: 0;
  background: none;
  font-size: 1rem;
  line-height: 1.5rem;
  color: var(--co-brown);
  cursor: pointer;
  transition: background-color 0.15s ease;
}
.co-pdp-qty-btn:hover {
  background: var(--co-beige);
}
/* TouchSpin (theme.js) enveloppe le champ et ajoute ses flèches verticales : on garde le
   plugin (le rafraîchissement natif l'écoute) mais on masque ses boutons. */
.co-pdp-qty .bootstrap-touchspin {
  display: flex;
  width: auto;
  margin: 0;
  border: 0;
  box-shadow: none;
}
.co-pdp-qty .input-group-btn-vertical,
.co-pdp-qty .bootstrap-touchspin .input-group-btn {
  display: none;
}
/* w-12 text-center font-semibold text-brown */
#main .co-pdp-qty-input {
  width: 3rem;
  height: auto;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
  font-size: 1rem;
  line-height: 1.5rem;
  font-weight: 600;
  text-align: center;
  color: var(--co-brown);
  -moz-appearance: textfield;
}
#main .co-pdp-qty-input:focus {
  outline: none;
}
.co-pdp-qty-input::-webkit-outer-spin-button,
.co-pdp-qty-input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.co-pdp-qty:has(.co-pdp-qty-input:focus-visible) {
  box-shadow: 0 0 0 2px var(--co-cream), 0 0 0 4px rgba(118, 77, 50, 0.35);
}
.co-pdp-add {
  flex: 1 1 0;
  min-width: 0;
}
/* flex-1 flex items-center justify-center gap-2 py-3 px-6 bg-brown text-cream rounded-xl
   font-semibold hover:bg-brown/90 active:scale-[0.98] transition-all disabled:opacity-60 */
.co-pdp-buy .add-to-cart.co-pdp-add-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  width: 100%;
  height: 100%;
  padding: 0.75rem 1.5rem;
  border: 0;
  border-radius: 0.75rem;
  background: var(--co-brown);
  color: var(--co-cream);
  font-family: var(--co-font-body);
  font-size: 1rem;
  line-height: 1.5rem;
  font-weight: 600;
  text-transform: none;
  letter-spacing: normal;
  box-shadow: none;
  transition: all 0.15s cubic-bezier(0.4, 0, 0.2, 1);
}
.co-pdp-buy .add-to-cart.co-pdp-add-btn:hover,
.co-pdp-buy .add-to-cart.co-pdp-add-btn:focus {
  background: rgba(118, 77, 50, 0.9);
  color: var(--co-cream);
  transform: none;
}
.co-pdp-buy .add-to-cart.co-pdp-add-btn:active {
  transform: scale(0.98);
}
.co-pdp-buy .add-to-cart.co-pdp-add-btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}
.co-pdp-add-btn svg {
  flex-shrink: 0;
}

/* ---- Ingrédients / Allergènes : rounded-2xl border border-sand/50 bg-white/50 ---- */
.co-pdp-accordion {
  overflow: hidden;
  border: 1px solid rgba(203, 185, 168, 0.5);
  border-radius: 1rem;
  background: rgba(255, 255, 255, 0.5);
}
/* mt-2 (en plus du gap-6) */
.co-pdp-accordion-ingredients {
  margin-top: 0.5rem;
}
/* flex w-full items-center justify-between gap-6 px-5 py-5 text-left sm:px-6 */
.co-pdp-accordion-head {
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  padding: 1.25rem;
  border: 0;
  background: none;
  text-align: left;
  cursor: pointer;
}
/* font-heading text-[1.0625rem] font-semibold, caramel ouvert / brown fermé */
.co-pdp-accordion-title {
  font-family: var(--co-font-heading);
  font-size: 1.0625rem;
  font-weight: 600;
  color: var(--co-brown);
  transition: color 0.15s ease;
}
.co-pdp-accordion.is-open .co-pdp-accordion-title {
  color: var(--co-caramel);
}
.co-pdp-accordion-chevron {
  flex-shrink: 0;
  color: var(--co-caramel);
  transition: transform 0.25s ease;
}
.co-pdp-accordion.is-open .co-pdp-accordion-chevron {
  transform: rotate(180deg);
}
/* height 0 → auto + opacité, 0.28 s cubic-bezier(0.25, 0.1, 0.25, 1) */
.co-pdp-accordion-panel {
  display: grid;
  grid-template-rows: 0fr;
  opacity: 0;
  transition: grid-template-rows 0.28s cubic-bezier(0.25, 0.1, 0.25, 1),
    opacity 0.28s cubic-bezier(0.25, 0.1, 0.25, 1);
}
.co-pdp-accordion.is-open .co-pdp-accordion-panel {
  grid-template-rows: 1fr;
  opacity: 1;
}
.co-pdp-accordion-clip {
  overflow: hidden;
  min-height: 0;
}
/* px-5 pb-6 pt-1 sm:px-6 sm:pb-7 — space-y-6 entre groupes */
.co-pdp-accordion-body {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  padding: 0.25rem 1.25rem 1.5rem;
}
/* mb-3 text-[0.6875rem] font-semibold uppercase tracking-[0.16em] text-caramel */
#main .co-pdp-list-label {
  margin: 0 0 0.75rem;
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--co-caramel);
}
/* grid grid-cols-1 gap-y-2 sm:grid-cols-2 sm:gap-x-6 */
.co-pdp-list {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  row-gap: 0.5rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
/* flex items-start gap-2.5 text-[0.9375rem] text-brown-light leading-snug */
.co-pdp-list li {
  display: flex;
  align-items: flex-start;
  gap: 0.625rem;
  font-size: 0.9375rem;
  line-height: 1.375;
  color: var(--co-brown-light);
}
/* mt-[0.5em] w-1.5 h-1.5 rounded-full bg-caramel/55 shrink-0 */
.co-pdp-list-dot {
  flex-shrink: 0;
  width: 0.375rem;
  height: 0.375rem;
  margin-top: 0.5em;
  border-radius: 999px;
  background: rgba(224, 128, 74, 0.55);
}
@media (min-width: 640px) {
  .co-pdp-accordion-head {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
  }
  .co-pdp-accordion-body {
    padding: 0.25rem 1.5rem 1.75rem;
  }
  .co-pdp-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 1.5rem;
  }
  .co-pdp-list.co-pdp-list-single {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* ---- Vous aimerez aussi : border-t border-sand/40 bg-cream py-16 sm:py-20 ---- */
.co-related {
  padding: 4rem 0;
  border-top: 1px solid rgba(203, 185, 168, 0.4);
  background: var(--co-cream);
}
/* mx-auto max-w-[1920px] px-4 sm:px-5 md:px-8 lg:px-10 xl:px-14 */
.co-related-head {
  max-width: 120rem;
  margin: 0 auto;
  padding: 0 1rem;
}
/* text-xs font-semibold uppercase tracking-[0.22em] text-caramel mb-1 */
#main .co-related-eyebrow {
  margin: 0 0 0.25rem;
  font-size: 0.75rem;
  line-height: 1rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--co-caramel);
}
/* font-heading text-2xl font-semibold leading-snug text-caramel sm:text-3xl */
#main .co-related-title {
  margin: 0;
  font-family: var(--co-font-heading);
  font-size: 1.5rem;
  font-weight: 600;
  line-height: 1.375;
  letter-spacing: -0.02em;
  text-transform: none;
  color: var(--co-caramel);
}
/* mt-10 grid grid-cols-1 gap-0 md:grid-cols-3 */
.co-related-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  margin-top: 2.5rem;
}
/* px-4 py-3.5 sm:px-5 sm:py-4 */
.co-related .co-shop-preview-info {
  padding: 0.875rem 1rem;
}
/* font-heading text-base font-medium text-caramel/95 line-clamp-2 sm:text-lg */
.co-related .co-shop-preview-name {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  color: rgba(224, 128, 74, 0.95);
}
/* text-sm font-medium text-caramel/95 tabular-nums sm:text-base */
.co-related .co-shop-preview-price {
  font-size: 0.875rem;
  font-variant-numeric: tabular-nums;
  color: rgba(224, 128, 74, 0.95);
}
@media (min-width: 640px) {
  .co-related {
    padding: 5rem 0;
  }
  .co-related-head {
    padding: 0 1.25rem;
  }
  #main .co-related-title {
    font-size: 1.875rem;
  }
  .co-related .co-shop-preview-info {
    padding: 1rem 1.25rem;
  }
  .co-related .co-shop-preview-name {
    font-size: 1.125rem;
  }
  .co-related .co-shop-preview-price {
    font-size: 1rem;
  }
}
@media (min-width: 768px) {
  .co-related-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .co-related-head {
    padding: 0 2rem;
  }
}
@media (min-width: 1024px) {
  .co-related-head {
    padding: 0 2.5rem;
  }
}
@media (min-width: 1280px) {
  .co-related-head {
    padding: 0 3.5rem;
  }
}

/* ---------- Cart / checkout ---------- */
#cart .cart-grid-body,
#checkout .card {
  border-radius: var(--co-radius-lg);
  border-color: var(--co-sand);
}
.cart-summary-totals .label,
.cart-summary-totals .value {
  color: var(--co-brown);
}

/* ---------- Shop preview (homepage) ---------- */
.co-shop-preview {
  background-color: var(--co-cream);
  padding: 4rem 0 4.5rem;
}
.co-shop-preview-head {
  max-width: 120rem;
  margin: 0 auto;
  padding: 0 1rem;
  text-align: left;
}
.co-shop-preview-title {
  max-width: 48rem;
  font-family: var(--co-font-heading);
  font-size: clamp(1.5rem, 3.5vw, 2.25rem);
  font-weight: 600;
  line-height: 1.3;
  color: var(--co-caramel);
  margin: 0;
}
.co-shop-preview-text {
  max-width: 42rem;
  margin: 1rem 0 0;
  /* Original : text-base sm:text-lg md:text-xl leading-relaxed */
  font-size: 1rem;
  line-height: 1.625;
  color: rgba(118, 77, 50, 0.9);
}
@media (min-width: 640px) {
  .co-shop-preview-text { font-size: 1.125rem; }
}
@media (min-width: 768px) {
  .co-shop-preview-text { font-size: 1.25rem; }
}
.co-shop-preview-grid {
  margin-top: 2.5rem;
  display: grid;
  grid-template-columns: 1fr;
}
.co-shop-preview-card {
  display: flex;
  flex-direction: column;
  background-color: var(--co-cream);
}
.co-shop-preview-media {
  display: block;
  position: relative;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  background-color: var(--co-beige);
}
.co-shop-preview-track {
  display: flex;
  height: 100%;
  will-change: transform;
  transition-property: transform;
  transition-timing-function: ease-out;
}
.co-shop-preview-frame {
  position: relative;
  display: block;
  flex-shrink: 0;
  height: 100%;
  overflow: hidden;
}
/* <picture> est inline par défaut : sans ça le height:100% de l'img ne résout pas
   sur le carré et les visuels se décalent entre eux. */
.co-shop-preview-frame picture {
  display: block;
  width: 100%;
  height: 100%;
}
/* Les photos sources ne sont pas carrées : PrestaShop les complète de blanc dans ses
   miniatures carrées. --co-fit (ratio de la photo source, calculé dans co-product-card.tpl)
   agrandit exactement de quoi sortir ces bandes du cadre — l'équivalent du object-cover de
   l'original, sans rogner davantage. */
.co-shop-preview-frame img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(var(--co-fit, 1));
  transition: transform 0.5s ease-out;
}
.co-shop-preview-empty {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  font-size: 3rem;
  text-decoration: none;
  user-select: none;
}

.co-shop-preview-arrow {
  position: absolute;
  top: 50%;
  z-index: 2;
  transform: translateY(-50%);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, 0.5);
  border-radius: 999px;
  background: rgba(247, 243, 240, 0.75);
  color: var(--co-brown);
  box-shadow: 0 4px 24px rgba(118, 77, 50, 0.12);
  backdrop-filter: blur(8px);
  cursor: pointer;
  transition: background-color 0.2s ease-out, color 0.2s ease-out,
    border-color 0.2s ease-out, transform 0.2s ease-out;
}
.co-shop-preview-prev { left: 0.75rem; }
.co-shop-preview-next { right: 0.75rem; }
.co-shop-preview-arrow:hover {
  background: var(--co-caramel);
  border-color: rgba(224, 128, 74, 0.4);
  color: var(--co-white);
  transform: translateY(-50%) scale(1.05);
}
.co-shop-preview-arrow:active {
  transform: translateY(-50%) scale(0.95);
}
.co-shop-preview-info {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 1rem 1.25rem;
}
.co-shop-preview-name {
  font-family: var(--co-font-heading);
  font-size: 1rem;
  font-weight: 500;
  color: rgba(118, 77, 50, 0.95);
}
.co-shop-preview-card:hover .co-shop-preview-name {
  text-decoration: underline;
  text-decoration-color: rgba(224, 128, 74, 0.5);
  text-underline-offset: 2px;
}
.co-shop-preview-price {
  flex-shrink: 0;
  font-size: 0.9375rem;
  font-weight: 500;
  color: rgba(118, 77, 50, 0.95);
}
.co-shop-preview-more {
  display: flex;
  justify-content: center;
  margin-top: 3rem;
  padding: 0 1.5rem;
}
.co-shop-preview-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 12rem;
  padding: 0.875rem 2.5rem;
  border: 2px solid var(--co-caramel);
  border-radius: 999px;
  background: transparent;
  color: var(--co-caramel);
  font-size: 1rem;
  font-weight: 600;
  transition: all 0.2s ease;
}
.co-shop-preview-btn:hover {
  background: var(--co-caramel);
  color: var(--co-white);
}
@media (min-width: 768px) {
  .co-shop-preview-grid {
    grid-template-columns: repeat(3, 1fr);
  }
  .co-shop-preview-head { padding: 0 2rem; }
}
@media (min-width: 1024px) {
  .co-shop-preview-head { padding: 0 2.5rem; }
}
@media (min-width: 1280px) {
  .co-shop-preview-head { padding: 0 3.5rem; }
}

/* ---------- Ingredients carousel ---------- */
.co-ingredients {
  background-color: var(--co-cream);
  padding: 5rem 1.5rem;
}
.co-ingredients-frame {
  position: relative;
  isolation: isolate;
  max-width: 90rem;
  margin: 0 auto;
  overflow: hidden;
  border-radius: var(--co-radius-xl);
  aspect-ratio: 4 / 5;
  max-height: min(88vh, 36rem);
  box-shadow: 0 12px 40px rgba(74, 48, 34, 0.12);
}
.co-ingredients-slides {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.co-ingredients-slide {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  opacity: 0;
  transition: opacity 0.5s ease-out;
}
.co-ingredients-slide.is-active {
  opacity: 1;
}
.co-ingredients-overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(110deg, rgba(118, 77, 50, 0.55) 0%, rgba(118, 77, 50, 0.25) 40%, transparent 70%);
}
.co-ingredients-content {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  height: 100%;
  padding: 2rem;
  color: var(--co-cream);
  text-align: left;
}
.co-ingredients-title {
  font-family: var(--co-font-heading);
  font-size: clamp(1.875rem, 4vw, 3.25rem);
  font-weight: 700;
  line-height: 1.05;
  color: var(--co-cream);
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.3);
  margin: 0;
}
.co-ingredients-text {
  max-width: 52ch;
  margin: 1rem 0 0;
  font-size: 0.96875rem;
  line-height: 1.55;
  color: rgba(247, 243, 240, 0.95);
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.3);
}
.co-ingredients-nav {
  position: absolute;
  z-index: 3;
  right: 1.5rem;
  bottom: 1.5rem;
  display: flex;
  gap: 0.5rem;
}
.co-ingredients-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  border: 0;
  border-radius: 999px;
  background: rgba(247, 243, 240, 0.9);
  color: var(--co-brown);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
  transition: background-color 0.2s ease, color 0.2s ease;
}
.co-ingredients-btn:hover {
  background: var(--co-caramel);
  color: var(--co-white);
}
@media (min-width: 768px) {
  .co-ingredients-frame {
    aspect-ratio: 16 / 9;
    min-height: 30rem;
    max-height: none;
  }
  .co-ingredients-content {
    max-width: 32.5rem;
    padding: 3.5rem;
  }
}

/* ---------- Reviews (homepage) ---------- */
.co-reviews {
  background-color: var(--co-beige);
  padding: 5rem 1.5rem;
}
.co-reviews-head {
  max-width: 75rem;
  margin: 0 auto;
  text-align: center;
}
.co-reviews-eyebrow {
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--co-caramel);
  margin: 0 0 0.875rem;
}
.co-reviews-title {
  font-family: var(--co-font-heading);
  font-size: clamp(1.75rem, 3.5vw, 2.5rem);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: var(--co-brown);
  margin: 0;
}
.co-reviews-empty {
  margin: 3.5rem auto 0;
  max-width: 40rem;
  text-align: center;
  color: var(--co-brown-light);
  font-size: 1rem;
}

/* ---------- Review CTA (homepage) ---------- */
.co-review-cta {
  background-color: var(--co-cream);
  padding: 3.5rem 1.5rem;
  max-width: 38rem;
  margin: 0 auto;
  text-align: center;
}
.co-review-cta-eyebrow {
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--co-caramel);
  margin: 0 0 0.75rem;
}
.co-review-cta-title {
  font-family: var(--co-font-heading);
  font-size: clamp(1.4rem, 2.8vw, 1.875rem);
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: -0.02em;
  color: var(--co-brown);
  margin: 0 0 0.625rem;
}
.co-review-cta-text {
  font-size: 0.9375rem;
  color: var(--co-brown-light);
  line-height: 1.625;
  margin: 0 0 1.5rem;
}
/* ---------- Dépliant « Laisser un avis » ---------- */
.co-review-card {
  margin-top: 1.5rem;
  overflow: hidden;
  border: 1px solid rgba(203, 185, 168, 0.5);
  border-radius: var(--co-radius-xl);
  background: rgba(255, 255, 255, 0.7);
  text-align: left;
}
.co-review-toggle {
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.25rem 1.5rem;
  border: 0;
  background: none;
  cursor: pointer;
}
.co-review-toggle-label {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  font-family: var(--co-font-heading);
  font-size: 1.0625rem;
  font-weight: 600;
  color: var(--co-brown);
  transition: color 0.15s ease;
}
.co-review-toggle-label svg { flex-shrink: 0; color: var(--co-caramel); }
.co-review-card.is-open .co-review-toggle-label { color: var(--co-caramel); }
.co-review-chevron {
  flex-shrink: 0;
  color: var(--co-caramel);
  transition: transform 0.25s ease;
}
.co-review-card.is-open .co-review-chevron { transform: rotate(180deg); }

/* Dépliement par grid-template-rows : pas de hauteur en dur à maintenir. */
.co-review-panel {
  display: grid;
  grid-template-rows: 0fr;
  opacity: 0;
  transition: grid-template-rows 0.3s cubic-bezier(0.25, 0.1, 0.25, 1),
    opacity 0.3s cubic-bezier(0.25, 0.1, 0.25, 1);
}
.co-review-card.is-open .co-review-panel {
  grid-template-rows: 1fr;
  opacity: 1;
}
.co-review-panel-inner { overflow: hidden; }
.co-review-form {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  margin: 0 1.5rem 1.75rem;
  padding-top: 1.25rem;
  border-top: 1px solid rgba(203, 185, 168, 0.4);
}
.co-honeypot { display: none; }
/* text-align gauche explicite : le thème classic aligne les <label> à droite. */
.co-field-label {
  display: block;
  text-align: left;
  margin: 0 0 0.375rem;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--co-brown);
}
.co-field-hint { font-weight: 400; color: var(--co-brown-light); }
.co-required { color: var(--co-caramel); }
.co-input {
  width: 100%;
  padding: 0.75rem 1rem;
  border: 1px solid rgba(203, 185, 168, 0.6);
  border-radius: var(--co-radius-lg);
  background: var(--co-white);
  font-family: var(--co-font-body);
  font-size: 0.875rem;
  color: var(--co-brown);
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.co-input::placeholder { color: rgba(148, 116, 95, 0.5); }
.co-input:focus {
  outline: none;
  border-color: rgba(224, 128, 74, 0.6);
  box-shadow: 0 0 0 2px rgba(224, 128, 74, 0.2);
}
.co-textarea { resize: none; }
.co-stars { display: flex; gap: 0.25rem; }
.co-star {
  padding: 0.125rem;
  border: 0;
  border-radius: var(--co-radius-sm);
  background: none;
  color: var(--co-sand);
  cursor: pointer;
}
.co-star svg { fill: transparent; transition: fill 0.1s ease, color 0.1s ease; }
.co-star.is-filled { color: var(--co-caramel); }
.co-star.is-filled svg { fill: currentColor; }
.co-review-notice {
  margin: 0;
  padding: 0.75rem 1rem;
  border-radius: var(--co-radius-lg);
  background: rgba(224, 128, 74, 0.1);
  font-size: 0.875rem;
  line-height: 1.5;
  color: var(--co-brown);
}
.co-review-notice.is-error {
  background: rgba(200, 60, 40, 0.08);
  color: #a33325;
}
.co-review-submit {
  align-self: flex-start;
  padding: 0.75rem 2rem;
  border: 0;
  border-radius: 999px;
  background: var(--co-brown);
  color: var(--co-cream);
  font-family: var(--co-font-body);
  font-size: 0.875rem;
  font-weight: 600;
  cursor: pointer;
  transition: background-color 0.2s ease, transform 0.1s ease;
}
.co-review-submit:hover { background: var(--co-dark); }
.co-review-submit:active { transform: scale(0.98); }
@media (min-width: 576px) {
  .co-review-toggle { padding: 1.25rem 2rem; }
  .co-review-form { margin-left: 2rem; margin-right: 2rem; }
}

/* Section avis (V1.5) : largeur du titre et marges responsives comme HomeReviewsSection.tsx
   (max-w-[28ch] · py-20 px-6 → sm:py-24 px-8 → lg:py-28 px-14) */
.co-reviews-title {
  max-width: 28ch;
  margin-left: auto;
  margin-right: auto;
}
@media (min-width: 640px) {
  .co-reviews { padding: 6rem 2rem; }
}
@media (min-width: 1024px) {
  .co-reviews { padding: 7rem 3.5rem; }
}