/* ═══════════════════════════════════════════════
   CasualPets Design System
   ═══════════════════════════════════════════════ */

:root {
  --beige: #f6f0e4;
  --bg: #f6f0e4;
  --dark: #191919;
  --green: #1b2f12;
  --sage: #d2dabd;
  --white: #ffffff;
  --font-heading: 'Georgia', serif;
  --font-body: 'Plus Jakarta Sans', sans-serif;
  --radius-sm: 6px;
  --radius-md: 12px;
  --radius-lg: 20px;
  --radius-xl: 32px;
  --radius-pill: 100px;
  --track-px: clamp(16px, 3vw, 48px);
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { overflow-x: hidden; max-width: 100%; }
body { font-family: var(--font-body); background: var(--bg); color: var(--dark); font-size: 16px; line-height: 1.6; }
img { max-width: 100%; height: auto; }
picture { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }

/* Hide default Sylius styles on custom pages */
.cp-page { overflow-x: hidden; }
.cp-page .sylius-flash-message,
.cp-page .ui.container { display: none; }

/* ── NAV ── */
.cp-nav {
  position: sticky; top: 0; z-index: 100;
  background: rgba(246,240,228,.85); backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(0,0,0,.06);
  padding: 0 48px;
  display: flex; align-items: center; justify-content: space-between;
  height: 64px;
}
.nav-logo { text-decoration: none; display: flex; align-items: center; }
.nav-logo-img { height: 40px; width: auto; display: block; }
.nav-links { display: flex; gap: 4px; }
.nav-link { font-size: 13px; font-weight: 500; color: #555; text-decoration: none; padding: 6px 14px; border-radius: var(--radius-sm); transition: color .2s; }
.nav-link:hover, .nav-link.active { color: var(--green); }
.nav-actions { display: flex; gap: 8px; align-items: center; }
.btn-icon { background: transparent; border: none; cursor: pointer; width: 36px; height: 36px; padding: 0; border-radius: var(--radius-sm); display: inline-flex; align-items: center; justify-content: center; color: #555; transition: all .2s; text-decoration: none; }
.btn-icon:hover { background: var(--sage); color: var(--green); }
.btn-icon svg { width: 20px; height: 20px; }
.nav-burger { display: none; background: none; border: none; cursor: pointer; padding: 8px; color: var(--dark); }
.nav-burger svg { width: 24px; height: 24px; }

/* ── SEARCH OVERLAY ── */
.search-overlay {
  position: fixed; inset: 0; z-index: 200;
  background: rgba(0,0,0,.4); backdrop-filter: blur(4px);
  display: none; align-items: flex-start; justify-content: center;
  padding-top: 80px;
  opacity: 0; transition: opacity .2s;
}
.search-overlay.open { display: flex; opacity: 1; }
.search-overlay-inner {
  width: 100%; max-width: 600px; margin: 0 24px;
  background: var(--white); border-radius: var(--radius-xl);
  box-shadow: 0 24px 80px rgba(0,0,0,.18);
  overflow: hidden;
}
.search-bar {
  display: flex; align-items: center; gap: 12px;
  padding: 16px 20px; border-bottom: 1px solid rgba(0,0,0,.06);
}
.search-bar input {
  flex: 1; border: none; outline: none; background: transparent;
  font-family: var(--font-body); font-size: 16px; color: var(--dark);
}
.search-bar input::placeholder { color: #bbb; }
.search-results {
  max-height: 400px; overflow-y: auto;
  scrollbar-width: thin; scrollbar-color: var(--sage) transparent;
}
.search-results:empty::after {
  content: ''; display: none;
}
.search-result-item {
  display: flex; align-items: center; gap: 14px;
  padding: 12px 20px; text-decoration: none; color: inherit;
  transition: background .15s;
}
.search-result-item:hover { background: var(--beige); }
.search-result-img {
  width: 48px; height: 48px; border-radius: var(--radius-sm);
  background: #eee; overflow: hidden; flex-shrink: 0;
}
.search-result-img img { width: 100%; height: 100%; object-fit: cover; }
.search-result-info { flex: 1; min-width: 0; }
.search-result-name {
  font-family: var(--font-heading); font-size: 14px; font-weight: 600;
  color: var(--dark); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.search-result-cat { font-size: 12px; color: #888; }
.search-result-price { font-size: 14px; font-weight: 700; color: var(--dark); flex-shrink: 0; }
.search-empty {
  padding: 32px 20px; text-align: center;
  font-size: 14px; color: #888;
}
.search-hint {
  padding: 16px 20px; text-align: center;
  font-size: 13px; color: #bbb;
}

/* ══════════════════════════════════════════════════════
   BUTTONS — Design System v1.0 (exact specs)
   ══════════════════════════════════════════════════════ */

body .btn {
  display: inline-flex !important; align-items: center !important; gap: 8px !important;
  cursor: pointer !important; font-family: var(--font-body) !important; font-weight: 600 !important;
  text-decoration: none !important; transition: all .2s !important;
  border-radius: var(--radius-pill) !important; padding: 14px 28px !important; font-size: 14px !important;
}
body .btn.btn-sm { padding: 9px 20px !important; font-size: 12px !important; }

/* Primary: vert → hover #2a4a1c */
body .btn-primary { background: var(--green) !important; color: var(--beige) !important; border: 1.5px solid transparent !important; }
body .btn-primary:hover { background: #2a4a1c !important; color: var(--beige) !important; transform: translateY(-2px) !important; box-shadow: 0 6px 20px rgba(27,47,18,.3) !important; }

/* Primary inverted: beige → hover blanc */
body .btn-primary.inverted { background: var(--beige) !important; color: var(--green) !important; border: 1.5px solid transparent !important; }
body .btn-primary.inverted:hover { background: #ffffff !important; color: var(--green) !important; transform: translateY(-2px) !important; box-shadow: 0 6px 20px rgba(0,0,0,.2) !important; }

/* Outline: transparent → hover sage */
body .btn-outline { background: transparent !important; color: var(--green) !important; border: 1.5px solid var(--green) !important; }
body .btn-outline:hover { background: var(--sage) !important; color: var(--green) !important; transform: translateY(-2px) !important; box-shadow: 0 6px 20px rgba(27,47,18,.15) !important; }

/* Outline inverted: transparent → hover subtle beige */
body .btn-outline.inverted { background: transparent !important; color: var(--beige) !important; border: 1.5px solid var(--beige) !important; }
body .btn-outline.inverted:hover { background: rgba(246,240,228,.12) !important; color: var(--beige) !important; transform: translateY(-2px) !important; }

/* Light (Sylius): beige → hover sage */
body .btn-light { background: var(--beige) !important; color: var(--green) !important; border: 1.5px solid rgba(27,47,18,.15) !important; border-radius: var(--radius-pill) !important; }
body .btn-light:hover { background: var(--sage) !important; color: var(--green) !important; border-color: var(--sage) !important; transform: translateY(-2px) !important; }

/* Other Bootstrap variants */
body .btn-secondary, body .btn-success, body .btn-info, body .btn-warning, body .btn-danger {
  font-family: var(--font-body) !important; font-weight: 600 !important;
  border-radius: var(--radius-pill) !important; transition: all .2s !important;
}

/* ATC */
body .btn-atc { width: 100% !important; justify-content: center !important; padding: 16px 32px !important; font-size: 15px !important; margin-bottom: 12px; }
body .btn-atc svg { width: 20px; height: 20px; }

/* ── CAROUSEL BTN ── */
.carousel-btn {
  width: 40px; height: 40px; border-radius: 50%;
  border: 1.5px solid rgba(0,0,0,.12); background: var(--white);
  color: var(--dark); display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer; transition: all .2s; flex-shrink: 0;
}
.carousel-btn svg { width: 18px; height: 18px; }
.carousel-btn:hover { background: var(--sage); color: var(--green); border-color: transparent; transform: scale(1.08); }
.carousel-btn:disabled { opacity: .35; cursor: not-allowed; transform: none !important; }

/* ── BADGE ── */
.badge { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: var(--radius-pill); font-size: 11px; font-weight: 600; letter-spacing: .5px; }
.badge-sage { background: var(--sage); color: var(--green); }
.badge-dark { background: var(--dark); color: var(--beige); }

/* ── SECTIONS ── */
section { padding: 96px 48px; max-width: 1200px; margin: 0 auto; }
.section-label { font-size: 11px; font-weight: 700; letter-spacing: 3px; text-transform: uppercase; color: rgba(27,47,18,.5); margin-bottom: 16px; }
h2.section-title { font-family: var(--font-heading); font-size: 42px; font-weight: 500; line-height: 1.1; letter-spacing: -1px; color: var(--dark); }

/* ── HERO ── */
.hero { max-width: 100%; padding: 0; position: relative; overflow: hidden; background: var(--green); min-height: 92vh; display: grid; grid-template-columns: 1fr 1fr; }
.hero-left { padding: 80px 64px; display: flex; flex-direction: column; justify-content: center; position: relative; z-index: 2; }
.hero-eyebrow { font-size: 11px; font-weight: 700; letter-spacing: 3px; text-transform: uppercase; color: var(--sage); margin-bottom: 24px; }
.hero h1 { font-family: var(--font-heading); font-size: clamp(44px, 5vw, 68px); font-weight: 500; line-height: 1.05; letter-spacing: -2px; color: var(--beige); margin-bottom: 24px; }
.hero h1 em { font-style: italic; color: var(--sage); }
.hero-sub { font-size: 16px; color: rgba(246,240,228,.65); line-height: 1.7; max-width: 420px; margin-bottom: 40px; }
.hero-actions { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 64px; }
.hero-stats { display: flex; gap: 40px; }
.hero-stat-val { font-family: var(--font-heading); font-size: 28px; font-weight: 700; color: var(--beige); line-height: 1; }
.hero-stat-lbl { font-size: 12px; color: rgba(246,240,228,.45); margin-top: 4px; }
.hero-right { position: relative; overflow: hidden; min-height: 92vh; }
.hero-img-overlay { position: absolute; inset: 0; background: linear-gradient(to right, var(--green) 0%, transparent 40%); z-index: 1; }
.hero-right img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hero-loki-card { position: absolute; bottom: 48px; right: 48px; background: rgba(246,240,228,.08); backdrop-filter: blur(8px); border: 1px solid rgba(246,240,228,.12); border-radius: var(--radius-lg); padding: 20px 28px; text-align: center; z-index: 2; }
.hero-loki-card .name { font-family: var(--font-heading); font-size: 28px; color: var(--sage); font-weight: 700; line-height: 1; }
.hero-loki-card .title { font-size: 11px; color: var(--sage); font-weight: 600; margin-top: 6px; letter-spacing: 1px; text-transform: uppercase; }
.hero-loki-card .sub { font-size: 11px; color: rgba(246,240,228,.35); margin-top: 2px; }

/* ── SCROLL SECTIONS ── */
.scroll-section { padding: 112px 0 80px; max-width: none; margin: 0; }
.scroll-section-inner { max-width: 1200px; margin: 0 auto; padding: 0 var(--track-px); }
.scroll-header { display: flex; align-items: flex-end; justify-content: space-between; margin-bottom: 48px; gap: 16px; }
.scroll-header-left { display: flex; flex-direction: column; }
.scroll-header-right { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
.scroll-track-outer { width: 100%; padding: 0 var(--track-px); }
.scroll-track {
  overflow-x: auto; padding: 40px 0 44px; margin: -40px 0 -24px;
  cursor: grab; scrollbar-width: thin;
  scrollbar-color: var(--green) rgba(0,0,0,.06);
}
.scroll-track:active { cursor: grabbing; }
.scroll-track::-webkit-scrollbar { height: 6px; }
.scroll-track::-webkit-scrollbar-track { background: rgba(0,0,0,.06); border-radius: 100px; }
.scroll-track::-webkit-scrollbar-thumb { background: var(--green); border-radius: 100px; }
.scroll-track::-webkit-scrollbar-thumb:hover { background: #2a4a1c; }
.scroll-row { display: flex; gap: 20px; width: max-content; }

/* ── PRODUCT CARDS ── */
.card-product {
  width: 300px; flex-shrink: 0; background: var(--white);
  border-radius: var(--radius-xl); overflow: hidden;
  border: 1px solid rgba(0,0,0,.05); transition: transform .3s, box-shadow .3s;
  display: flex; flex-direction: column; text-decoration: none; color: inherit;
}
/* Dans la grille catalogue : le grid gère la largeur + min-width: 0 évite le débordement */
.catalogue-grid .card-product,
.cp-suggested-grid .card-product { width: 100%; min-width: 0; flex-shrink: unset; }
.card-product:hover { transform: translateY(-4px); box-shadow: 0 8px 24px rgba(0,0,0,.1); }
/* Image dynamique via aspect-ratio au lieu d'une hauteur fixe */
.card-img { aspect-ratio: 4/3; background: #eee; flex-shrink: 0; overflow: hidden; max-width: 100%; }
.card-img picture { display: block; width: 100%; height: 100%; }
.card-img img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s; display: block; max-width: 100%; }
.card-product:hover .card-img img { transform: scale(1.04); }
.card-body { padding: 22px 24px 26px; display: flex; flex-direction: column; flex: 1; min-width: 0; }
.card-name { font-family: var(--font-heading); font-size: 17px; font-weight: 600; line-height: 1.25; margin-bottom: 6px; color: var(--dark); overflow-wrap: break-word; word-break: break-word; }
.card-desc { font-size: 13px; color: #888; line-height: 1.5; margin-bottom: 20px; flex: 1; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.card-footer { display: flex; align-items: center; justify-content: space-between; margin-top: auto; gap: 8px; flex-wrap: wrap; }
.card-price { font-size: 17px; font-weight: 700; color: var(--dark); }
.btn-card { background: var(--green); color: var(--beige); border: none; padding: 9px 20px; border-radius: var(--radius-pill); font-family: var(--font-body); font-size: 12px; font-weight: 600; cursor: pointer; transition: all .2s; text-decoration: none; }
.btn-card:hover { background: #2a4a1c; transform: translateY(-2px); }

/* ── CATEGORY CARDS ── */
.card-cat { width: 240px; flex-shrink: 0; cursor: pointer; text-decoration: none; color: inherit; }
.card-cat-img { border-radius: var(--radius-lg); aspect-ratio: 3/4; background: var(--green); overflow: hidden; transition: transform .3s; margin-bottom: 14px; position: relative; }
.card-cat-img img { width: 100%; height: 100%; object-fit: cover; object-position: center bottom; transition: transform .4s; display: block; }
.card-cat:hover .card-cat-img img { transform: scale(1.04); }
.card-cat-overlay { position: absolute; inset: 0; background: linear-gradient(to top, rgba(27,47,18,.55) 0%, transparent 50%); border-radius: var(--radius-lg); }
.card-cat-name { font-family: var(--font-heading); font-size: 16px; font-weight: 600; margin-bottom: 4px; transition: color .2s; line-height: 1.25; }
.card-cat:hover .card-cat-name { color: var(--green); }
.card-cat-desc { font-size: 12px; color: #999; }

/* ── ABOUT ── */
.about { background: var(--green); border-radius: var(--radius-xl); max-width: 100%; margin: 0 48px; padding: 96px 80px; display: grid; grid-template-columns: 1fr 1fr; gap: 96px; align-items: center; }
.about-label { font-size: 11px; font-weight: 700; letter-spacing: 3px; text-transform: uppercase; color: var(--sage); margin-bottom: 20px; }
.about h2 { font-family: var(--font-heading); font-size: 42px; font-weight: 500; line-height: 1.1; letter-spacing: -1px; color: var(--beige); margin-bottom: 24px; }
.about-lead { font-size: 16px; color: rgba(246,240,228,.7); line-height: 1.75; margin-bottom: 32px; }
.about-right { display: flex; flex-direction: column; gap: 32px; }
.about-point { display: flex; gap: 16px; align-items: flex-start; }
.about-point-icon { width: 40px; height: 40px; border-radius: 50%; background: rgba(210,218,189,.12); display: flex; align-items: center; justify-content: center; flex-shrink: 0; color: var(--sage); }
.about-point-icon svg { width: 20px; height: 20px; }
.about-point h4 { font-size: 14px; font-weight: 700; color: var(--beige); margin-bottom: 4px; }
.about-point p { font-size: 13px; color: rgba(246,240,228,.5); line-height: 1.6; }

/* ── AVANTAGES ── */
.avantages { padding-top: 112px; }
.avantages-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 64px; margin-top: 56px; }
.avantages-grid h3 { font-family: var(--font-heading); font-size: 22px; font-weight: 500; color: var(--dark); line-height: 1.2; margin-bottom: 16px; }
.avantages-grid p { font-size: 14px; color: #777; line-height: 1.75; }
.avantages-grid svg { width: 36px; height: 36px; color: var(--green); margin-bottom: 20px; display: block; }
.avantages-sublabel { font-size: 11px; font-weight: 700; letter-spacing: 3px; text-transform: uppercase; color: rgba(27,47,18,.5); margin-bottom: 12px; }

/* ── FAQ ── */
.faq { padding-top: 112px; }
.faq-layout { display: grid; grid-template-columns: 1fr 2fr; gap: 80px; margin-top: 56px; align-items: flex-start; }
.faq-sticky { position: sticky; top: 96px; }
.faq-sticky h2 { font-family: var(--font-heading); font-size: 38px; line-height: 1.1; letter-spacing: -1px; margin-bottom: 20px; }
.faq-sticky p { font-size: 14px; color: #777; line-height: 1.7; margin-bottom: 32px; }
.faq-items { display: flex; flex-direction: column; gap: 4px; }
.faq-item { border-radius: var(--radius-md); overflow: hidden; border: 1px solid rgba(0,0,0,.07); background: var(--white); }
.faq-q { width: 100%; background: none; border: none; padding: 22px 24px; display: flex; align-items: center; justify-content: space-between; gap: 16px; cursor: pointer; text-align: left; font-family: var(--font-body); font-size: 15px; font-weight: 600; color: var(--dark); transition: color .2s; }
.faq-q:hover { color: var(--green); }
.faq-icon { width: 20px; height: 20px; flex-shrink: 0; color: #bbb; transition: transform .3s, color .2s; }
.faq-item.open .faq-icon { transform: rotate(180deg); color: var(--green); }
.faq-a { display: none; padding: 0 24px 22px; font-size: 14px; color: #666; line-height: 1.75; }
.faq-item.open .faq-a { display: block; }

/* ── REVIEWS ── */
.reviews { padding-top: 112px; padding-bottom: 96px; }
.reviews-header { display: grid; grid-template-columns: 1fr auto; align-items: flex-end; margin-bottom: 56px; }
.reviews-score { display: flex; align-items: center; gap: 12px; }
.score-big { font-family: var(--font-heading); font-size: 56px; font-weight: 700; color: var(--dark); line-height: 1; }
.stars-row { display: flex; gap: 3px; }
.star { width: 16px; height: 16px; color: var(--green); }
.reviews-count { font-size: 13px; color: #999; }
.reviews-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.reviews-grid .review-card:nth-child(2) { margin-top: 32px; }
.review-card { background: var(--white); border-radius: var(--radius-xl); padding: 28px 28px 24px; border: 1px solid rgba(0,0,0,.05); }
.review-stars { display: flex; gap: 3px; margin-bottom: 14px; }
.review-text { font-size: 14px; color: #555; line-height: 1.7; margin-bottom: 20px; font-style: italic; }
.review-footer { display: flex; align-items: center; gap: 12px; }
.review-avatar { width: 36px; height: 36px; border-radius: 50%; background: var(--sage); display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 13px; color: var(--green); flex-shrink: 0; }
.review-name { font-size: 13px; font-weight: 700; color: var(--dark); }
.review-date { font-size: 12px; color: #bbb; }
.review-badge { margin-left: auto; font-size: 10px; font-weight: 700; letter-spacing: .5px; text-transform: uppercase; color: #4a9c2d; background: #edf7e6; padding: 2px 8px; border-radius: var(--radius-pill); }

/* ── PRODUCT REVIEWS ── */
.product-reviews-section { padding: 80px 48px; background: var(--beige); }
.product-reviews-header { display: grid; grid-template-columns: 1fr auto; align-items: flex-end; margin-bottom: 48px; }
.product-reviews-empty { text-align: center; padding: 48px 0; color: #999; font-size: 15px; }
.product-reviews-cta { text-align: center; margin-top: 48px; }
.review-title { font-size: 15px; font-weight: 700; color: var(--dark); margin-bottom: 8px; }
.star-empty { opacity: .2; }
.rating-count { font-size: 13px; color: #888; text-decoration: none; border-bottom: 1px dashed #ccc; }
.rating-count:hover { color: var(--green); border-color: var(--green); }

/* ── NEWSLETTER ── */
.newsletter { background: var(--green); border-radius: var(--radius-xl); margin: 0 48px 96px; padding: 72px 80px; display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: center; }
.newsletter h2 { font-family: var(--font-heading); font-size: 38px; color: var(--beige); line-height: 1.1; letter-spacing: -1px; margin-bottom: 12px; }
.newsletter p { font-size: 15px; color: rgba(246,240,228,.55); line-height: 1.7; }
.nl-form { display: flex; gap: 10px; }
.nl-input { flex: 1; padding: 14px 20px; border-radius: var(--radius-pill); border: 1.5px solid rgba(246,240,228,.2); background: rgba(255,255,255,.06); color: var(--beige); font-family: var(--font-body); font-size: 14px; outline: none; transition: border-color .2s; }
.nl-input::placeholder { color: rgba(246,240,228,.3); }
.nl-input:focus { border-color: var(--sage); }
.btn-nl { background: var(--beige); color: var(--green); padding: 14px 28px; border-radius: var(--radius-pill); font-family: var(--font-body); font-size: 14px; font-weight: 700; border: none; cursor: pointer; transition: all .2s; white-space: nowrap; }
.btn-nl:hover { background: var(--white); transform: translateY(-2px); }

/* ── FOOTER ── */
.cp-footer { border-top: 1px solid rgba(0,0,0,.06); padding: 48px; display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 48px; max-width: 1200px; margin: 0 auto; }
.footer-brand p { font-size: 13px; color: #888; line-height: 1.7; margin-top: 12px; max-width: 260px; }
.footer-col h5 { font-size: 11px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; color: #999; margin-bottom: 16px; }
.footer-col a { display: block; font-size: 13px; color: #555; text-decoration: none; margin-bottom: 10px; transition: color .2s; }
.footer-col a:hover { color: var(--green); }
.footer-bottom { border-top: 1px solid rgba(0,0,0,.06); padding: 24px 48px; display: flex; justify-content: space-between; align-items: center; }
.footer-bottom p { font-size: 12px; color: #bbb; }

/* ── BLOG CARDS ── */
.blog { padding-top: 112px; padding-bottom: 80px; }
.blog-header { display: flex; align-items: flex-end; justify-content: space-between; margin-bottom: 48px; gap: 16px; }
.blog-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px; align-items: start; }
.card-article { display: flex; flex-direction: column; gap: 18px; text-decoration: none; color: inherit; }
.card-article-img { position: relative; overflow: hidden; height: 220px; background: var(--green); border-radius: var(--radius-lg); flex-shrink: 0; }
.card-article-img img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s; display: block; }
.card-article:hover .card-article-img img { transform: scale(1.04); }
.card-article-badge { position: absolute; top: 14px; left: 14px; }
.card-article-title { font-family: var(--font-heading); font-size: 19px; font-weight: 600; line-height: 1.25; color: var(--dark); transition: color .2s; }
.card-article:hover .card-article-title { color: var(--green); }
.card-article-desc { font-size: 13px; color: #888; line-height: 1.65; }
.card-article-meta { font-size: 11px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; color: rgba(27,47,18,.45); }
.card-article-read { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 700; color: var(--green); margin-top: 4px; }
.card-article-read svg { width: 14px; height: 14px; transition: transform .2s; }
.card-article:hover .card-article-read svg { transform: translateX(4px); }

/* ── BREADCRUMB ── */
.breadcrumb { padding: 20px 48px; display: flex; align-items: center; gap: 8px; font-size: 13px; color: #999; }
.breadcrumb a { color: #999; text-decoration: none; transition: color .2s; }
.breadcrumb a:hover { color: var(--green); }
.breadcrumb svg { width: 12px; height: 12px; flex-shrink: 0; }
.breadcrumb span { color: var(--dark); font-weight: 500; }

/* ── PRODUCT LAYOUT ── */
.product-wrap { max-width: 1200px; margin: 0 auto; padding: 0 48px 80px; display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: start; }
/* min-width: 0 — empêche les enfants du grid de déborder de leur colonne */
.product-wrap > * { min-width: 0; }

/* ── GALLERY ── */
.gallery { position: sticky; top: 88px; width: 100%; }
.gallery-main { border-radius: var(--radius-xl); overflow: hidden; background: #d9d9d9; aspect-ratio: 1; width: 100%; max-width: 100%; margin-bottom: 12px; position: relative; }
.gallery-main picture { display: block; width: 100%; height: 100%; }
.gallery-main img { width: 100%; height: 100%; object-fit: cover; display: block; }
.gallery-thumbs { display: flex; gap: 10px; max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.thumb { width: 80px; height: 80px; border-radius: var(--radius-md); overflow: hidden; background: #d9d9d9; cursor: pointer; border: 2px solid transparent; transition: border-color .2s; flex-shrink: 0; }
.thumb picture { display: block; width: 100%; height: 100%; }
.thumb.active { border-color: var(--green); }
.thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* ── PRODUCT INFO ── */
.product-info { padding-top: 8px; }
.product-badges { display: flex; gap: 8px; margin-bottom: 20px; flex-wrap: wrap; }
.product-name { font-family: var(--font-heading); font-size: clamp(28px, 3vw, 38px); font-weight: 500; line-height: 1.1; letter-spacing: -1px; margin-bottom: 8px; }
.product-subtitle { font-size: 15px; color: #777; margin-bottom: 24px; line-height: 1.6; }

/* Rating */
.product-rating { display: flex; align-items: center; gap: 10px; margin-bottom: 28px; padding-bottom: 28px; border-bottom: 1px solid rgba(0,0,0,.07); }
.stars { display: flex; gap: 3px; }
.star { width: 15px; height: 15px; color: var(--green); }
.rating-count { font-size: 13px; color: #999; }

/* Price */
.product-price-note { font-size: 13px; color: #999; margin-bottom: 28px; }
.price-block { margin-bottom: 24px; }
.price-main { display: flex; align-items: baseline; gap: 12px; margin-bottom: 4px; }
.price-unit { font-family: var(--font-heading); font-size: 36px; font-weight: 700; color: var(--dark); transition: color .25s; }
.price-unit.discounted { color: var(--green); }
.price-original { font-size: 20px; color: #bbb; text-decoration: line-through; }
.price-discount-badge { background: var(--sage); color: var(--green); font-size: 11px; font-weight: 700; padding: 3px 10px; border-radius: var(--radius-pill); }
.price-total { font-size: 13px; color: #999; transition: opacity .2s; }
.price-total strong { color: var(--dark); font-weight: 600; }

/* Badges */
.badge { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: var(--radius-pill); font-size: 11px; font-weight: 600; }
.badge-sage { background: var(--sage); color: var(--green); }
.badge-dark { background: var(--dark); color: var(--beige); }

/* Trust */
.trust-row { display: flex; gap: 20px; margin-top: 28px; padding-top: 28px; border-top: 1px solid rgba(0,0,0,.07); }
.trust-item { display: flex; align-items: center; gap: 8px; font-size: 12px; color: #777; font-weight: 500; }
.trust-item svg { width: 18px; height: 18px; color: var(--green); flex-shrink: 0; }

/* ── TABS ── */
.tabs-wrap { max-width: 1200px; margin: 0 auto; padding: 0 48px 96px; overflow-x: hidden; }
.tabs-nav { display: flex; gap: 0; border-bottom: 1.5px solid rgba(0,0,0,.08); margin-bottom: 56px; overflow-x: auto; }
.tab-btn { padding: 14px 24px; font-family: var(--font-body); font-size: 14px; font-weight: 600; color: #999; background: none; border: none; border-bottom: 2.5px solid transparent; margin-bottom: -1.5px; cursor: pointer; white-space: nowrap; transition: color .2s, border-color .2s; }
.tab-btn:hover { color: var(--dark); }
.tab-btn.active { color: var(--green); border-bottom-color: var(--green); }
.tab-panel { display: none; }
.tab-panel.active { display: block; }

/* Tab content — generic HTML */
.tab-content-html { font-size: 15px; color: #555; line-height: 1.8; max-width: 820px; }
.tab-content-html h2 { font-family: var(--font-heading); font-size: 26px; font-weight: 500; color: var(--dark); margin: 0 0 20px; line-height: 1.2; }
.tab-content-html h3 { font-family: var(--font-heading); font-size: 19px; font-weight: 600; color: var(--dark); margin: 32px 0 12px; }
.tab-content-html p { margin-bottom: 16px; }
.tab-content-html ul { padding-left: 20px; margin-bottom: 16px; }
.tab-content-html li { margin-bottom: 8px; }
.tab-content-html strong { color: var(--dark); }
.tab-content-html table { width: 100%; border-collapse: collapse; margin-bottom: 32px; }
.tab-content-html th { background: var(--green); color: var(--beige); font-size: 13px; font-weight: 600; padding: 14px 20px; text-align: left; }
.tab-content-html th:first-child { border-radius: var(--radius-sm) 0 0 0; }
.tab-content-html th:last-child { border-radius: 0 var(--radius-sm) 0 0; }
.tab-content-html td { padding: 14px 20px; font-size: 14px; color: #555; border-bottom: 1px solid rgba(0,0,0,.06); background: var(--white); }

/* Tab content — structured layouts from maquette */
.desc-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: start; }
.desc-lead { font-size: 18px; line-height: 1.75; color: var(--dark); margin-bottom: 32px; font-family: var(--font-heading); font-weight: 400; }
.desc-body { font-size: 15px; line-height: 1.8; color: #555; }
.desc-benefits { display: flex; flex-direction: column; gap: 14px; }
.benefit-item { display: flex; align-items: flex-start; gap: 14px; }
.benefit-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--green); flex-shrink: 0; margin-top: 8px; }
.benefit-item p { font-size: 14px; color: #555; line-height: 1.65; }
.benefit-item strong { color: var(--dark); }
.ingredients-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-bottom: 48px; }
.ingredient-card { background: var(--white); border-radius: var(--radius-lg); padding: 28px 24px; border: 1px solid rgba(0,0,0,.05); }
.ingredient-name { font-family: var(--font-heading); font-size: 16px; font-weight: 600; margin-bottom: 4px; color: var(--dark); }
.ingredient-part { font-size: 11px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; color: rgba(27,47,18,.45); margin-bottom: 12px; }
.ingredient-desc { font-size: 13px; color: #777; line-height: 1.65; }
.dose-table { width: 100%; border-collapse: collapse; margin-bottom: 40px; }
.dose-table th { background: var(--green); color: var(--beige); font-size: 13px; font-weight: 600; padding: 14px 20px; text-align: left; }
.dose-table th:first-child { border-radius: var(--radius-sm) 0 0 0; }
.dose-table th:last-child { border-radius: 0 var(--radius-sm) 0 0; }
.dose-table td { padding: 14px 20px; font-size: 14px; color: #555; border-bottom: 1px solid rgba(0,0,0,.06); background: var(--white); }
.dose-table tr:last-child td { border-bottom: none; }
.dose-table tr:last-child td:first-child { border-radius: 0 0 0 var(--radius-sm); }
.dose-table tr:last-child td:last-child { border-radius: 0 0 var(--radius-sm) 0; }
.dose-tip { background: var(--sage); border-radius: var(--radius-md); padding: 18px 22px; font-size: 14px; color: var(--green); line-height: 1.65; }
.dose-tip strong { font-weight: 700; }
.why-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; }
.why-card { background: var(--white); border-radius: var(--radius-lg); padding: 28px; border: 1px solid rgba(0,0,0,.05); }
.why-card h4 { font-family: var(--font-heading); font-size: 17px; font-weight: 600; margin-bottom: 10px; color: var(--dark); }
.why-card p { font-size: 13px; color: #777; line-height: 1.7; }
.why-highlight { background: var(--green); border-color: transparent; }
.why-highlight h4 { color: var(--beige); }
.why-highlight p { color: rgba(246,240,228,.65); }
.section-label { font-size: 11px; font-weight: 700; letter-spacing: 3px; text-transform: uppercase; color: rgba(27,47,18,.5); margin-bottom: 12px; }
.section-title { font-family: var(--font-heading); font-size: 34px; font-weight: 500; line-height: 1.1; letter-spacing: -1px; margin-bottom: 40px; }

/* Accordion toggle (mobile only) */
.accordion-toggle { display: none; }

/* ── Add-to-cart form ── */
.cp-add-to-cart { margin-bottom: 40px; }
.cp-add-to-cart .position-relative { position: relative; }
.cp-add-to-cart label.form-label { font-size: 13px; font-weight: 600; color: var(--dark); margin-bottom: 10px; display: block; font-family: var(--font-body); }
.cp-add-to-cart .mb-3, .cp-add-to-cart .mb-4, .cp-add-to-cart .my-4 { margin-bottom: 16px !important; margin-top: 0 !important; }
.cp-add-to-cart .invalid-feedback { color: #c00; font-size: 13px; margin-top: 4px; }
.cp-add-to-cart .sylius-shop-loader { display: flex; justify-content: center; padding: 20px; }
.cp-add-to-cart .spinner-dots { display: flex; gap: 6px; }
.cp-out-of-stock { padding: 16px 24px; background: rgba(0,0,0,.05); border-radius: var(--radius-md); text-align: center; font-family: var(--font-body); font-weight: 600; color: #999; }

/* ── Quantity selector (DS .qty-selector) ── */
.qty-selector { display: inline-flex; align-items: center; border: 1.5px solid rgba(0,0,0,.12); border-radius: var(--radius-pill); overflow: hidden; background: var(--white); }
.qty-btn { width: 40px; height: 40px; border: none; background: transparent; cursor: pointer; display: flex; align-items: center; justify-content: center; color: var(--dark); transition: all .2s; }
.qty-btn svg { width: 14px; height: 14px; }
.qty-btn:hover { background: var(--sage); color: var(--green); }
.qty-val { min-width: 36px; text-align: center; font-size: 14px; font-weight: 600; font-family: var(--font-body); }
.qty-selector-sm .qty-btn { width: 32px; height: 32px; }
.qty-selector-sm .qty-val { min-width: 28px; font-size: 13px; }

/* ── Variant buttons (DS .variant-btn) ── */
.variant-btn { padding: 9px 18px; border: 1.5px solid rgba(0,0,0,.12); border-radius: var(--radius-pill); background: var(--white); font-family: var(--font-body); font-size: 13px; font-weight: 500; color: var(--dark); cursor: pointer; transition: border-color .2s, color .2s; position: relative; display: inline-flex; align-items: center; }
.variant-btn:hover { border-color: var(--green); color: var(--green); }
.variant-btn-active { background: var(--green); color: var(--beige) !important; border-color: transparent !important; pointer-events: none; }
.variant-btn-disabled { opacity: .4; cursor: not-allowed; text-decoration: line-through; pointer-events: none; }

/* ── Form inputs (DS .form-input) ── */
.form-input { width: 100%; padding: 12px 16px; border: 1.5px solid rgba(0,0,0,.12); border-radius: var(--radius-md); font-family: var(--font-body); font-size: 15px; color: var(--dark); background: var(--beige); outline: none; transition: border-color .2s, background .2s; }
.form-input:focus { border-color: var(--green); background: var(--white); }
.form-input::placeholder { color: #bbb; }
.form-input.error { border-color: #c0392b; }
.form-group { display: flex; flex-direction: column; gap: 6px; }
.form-label { font-size: 13px; font-weight: 600; }
.form-hint { font-size: 12px; color: #999; }
.form-error { font-size: 12px; color: #c0392b; }

/* Option dropdowns styled as form-input */
.cp-options select,
.cp-options .form-select { width: 100%; padding: 12px 16px; border: 1.5px solid rgba(0,0,0,.12); border-radius: var(--radius-md); font-family: var(--font-body); font-size: 15px; color: var(--dark); background: var(--beige); outline: none; transition: border-color .2s, background .2s; appearance: auto; }
.cp-options select:focus,
.cp-options .form-select:focus { border-color: var(--green); background: var(--white); }

/* ── Alerts (DS) ── */
.alert { display: flex; gap: 10px; align-items: center; padding: 14px 18px; border-radius: var(--radius-md); font-size: 14px; }
.alert-dot { width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0; }
.alert-success { background: #edf7e6; color: #2d6019; }
.alert-success .alert-dot { background: #4a9c2d; }
.alert-info { background: #e8f0fb; color: #1b4fa0; }
.alert-info .alert-dot { background: #2d6fd4; }
.alert-warning { background: #fff8e6; color: #9a6b00; }
.alert-warning .alert-dot { background: #e6a817; }
.alert-error { background: #fdeaea; color: #8b1a1a; }
.alert-error .alert-dot { background: #c0392b; }

/* ── Nav link hover (DS) ── */
.nav-link span { display: inline-block; transition: transform .2s; }
.nav-link:hover span { transform: translateY(-2px); }

/* ── CATALOGUE ── */
.catalogue-page { max-width: 1200px; margin: 0 auto; padding: 48px; overflow-x: hidden; }
.catalogue-header { margin-bottom: 48px; overflow-wrap: break-word; word-break: break-word; }
.catalogue-header h1 { font-family: var(--font-heading); font-size: 42px; font-weight: 500; line-height: 1.1; letter-spacing: -1px; }
.catalogue-header p { font-size: 15px; color: #777; margin-top: 12px; }
.catalogue-filters { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 40px; }
.filter-btn { padding: 8px 20px; border-radius: var(--radius-pill); border: 1.5px solid rgba(0,0,0,.1); background: var(--white); font-family: var(--font-body); font-size: 13px; font-weight: 500; cursor: pointer; transition: all .2s; text-decoration: none; color: var(--dark); white-space: nowrap; }
.filter-btn:hover, .filter-btn.active { background: var(--green); color: var(--beige); border-color: var(--green); }
.catalogue-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
/* min-width: 0 critique : empêche les cellules du grid de déborder (default = auto) */
.catalogue-grid > * { min-width: 0; }

/* ── STATIC PAGES ── */
.static-page { max-width: 800px; margin: 0 auto; padding: 0 24px 80px; }
.static-page h1 { font-family: var(--font-heading); font-size: 42px; font-weight: 500; line-height: 1.1; letter-spacing: -1px; }
.page-body { max-width: 700px; margin: 0 auto; }
.page-section { margin-bottom: 40px; }
.page-section h2 { font-family: var(--font-heading); font-size: 24px; font-weight: 500; margin-bottom: 12px; color: var(--green); }
.page-section p { font-size: 15px; line-height: 1.8; color: #555; margin-bottom: 12px; }
.page-section ul { list-style: none; padding: 0; }
.page-section ul li { padding: 8px 0 8px 20px; position: relative; font-size: 15px; color: #555; line-height: 1.7; }
.page-section ul li::before { content: ''; position: absolute; left: 0; top: 16px; width: 6px; height: 6px; background: var(--sage); border-radius: 50%; }
.page-section a { color: var(--green); text-decoration: underline; }
.contact-info p { font-size: 15px; color: #555; margin-bottom: 8px; }

/* FAQ Page */
.faq-section { max-width: 700px; margin: 0 auto; }
.faq-item { border-bottom: 1px solid rgba(0,0,0,.08); }
.faq-question { width: 100%; padding: 20px 0; background: none; border: none; text-align: left; cursor: pointer; font-family: var(--font-body); font-size: 16px; font-weight: 600; color: var(--dark); display: flex; align-items: center; justify-content: space-between; }
.faq-question::after { content: '+'; font-size: 20px; color: #bbb; transition: transform .3s; }
.faq-item.open .faq-question::after { content: '−'; }
.faq-answer { display: none; padding: 0 0 20px; font-size: 15px; color: #666; line-height: 1.8; }
.faq-item.open .faq-answer { display: block; }

/* ── CART PAGE ── */
.cart-page { max-width: 1200px; margin: 0 auto; padding: 0 48px 80px; }
.cart-title { font-family: var(--font-heading); font-size: 38px; font-weight: 500; line-height: 1.1; letter-spacing: -1px; margin-bottom: 40px; }
.cart-page .container { max-width: 100% !important; padding: 0 !important; }

/* Cart table */
.cart-page .table { border-collapse: separate; border-spacing: 0; width: 100%; }
.cart-page .table thead th { font-family: var(--font-body); font-size: 11px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; color: #999; border-bottom: 1.5px solid rgba(0,0,0,.08); padding: 12px 16px; white-space: nowrap; }
.cart-page .table tbody td { padding: 20px 16px; border-bottom: 1px solid rgba(0,0,0,.06); vertical-align: middle; font-family: var(--font-body); }
.cart-page .table tbody tr:last-child td { border-bottom: none; }

/* Cart product info */
.cart-page .d-flex img,
.cart-page td img { width: 80px; height: 80px; object-fit: cover; border-radius: var(--radius-md); flex-shrink: 0; }
.cart-page .fw-bold, .cart-page .fw-semibold { font-family: var(--font-body); }

/* Cart summary box */
.cart-page .bg-light { background: var(--white) !important; border: 1px solid rgba(0,0,0,.06); border-radius: var(--radius-lg) !important; }
.cart-page .bg-light h3 { font-family: var(--font-heading); font-size: 22px; font-weight: 500; }
.cart-page .bg-light .hstack { font-family: var(--font-body); font-size: 14px; color: #666; }
.cart-page .bg-light .h5 { font-family: var(--font-body); font-size: 18px; font-weight: 700; color: var(--dark); }
.cart-page .bg-light .border-top { border-color: rgba(0,0,0,.08) !important; }

/* Cart coupon */
.cart-page .input-group { display: flex; gap: 8px; }
.cart-page .input-group .form-control { border-radius: var(--radius-md) !important; flex: 1; }
.cart-page .btn-outline-gray { background: transparent; border: 1.5px solid var(--green); color: var(--green); border-radius: var(--radius-pill); padding: 9px 20px; font-family: var(--font-body); font-size: 13px; font-weight: 600; cursor: pointer; transition: all .2s; }
.cart-page .btn-outline-gray:hover { background: var(--sage); }

/* Cart empty state */
.cart-page .alert-info { background: rgba(210,218,189,.2); color: var(--green); border: 1px solid var(--sage); border-radius: var(--radius-md); padding: 32px; text-align: center; font-size: 16px; }

/* Continue shopping link */
.cart-empty-actions { text-align: center; margin-top: 24px; }

/* ── OFFCANVAS CART (désactivé — lien direct vers /cart/) ── */
#offcanvasCart { display: none !important; }
.offcanvas-backdrop { display: none !important; }

/* ── SYLIUS LOADER → DS ── */
.sylius-shop-loader { position: absolute; inset: 0; z-index: 10; display: flex; align-items: center; justify-content: center; background: rgba(246,240,228,.8); border-radius: var(--radius-md); }
.sylius-shop-loader .spinner-dot-1,
.sylius-shop-loader .spinner-dot-2,
.sylius-shop-loader .spinner-dot-3 { background-color: var(--green) !important; }

/* Suggested products */
.cp-suggested { margin-top: 32px; max-width: 1200px; margin-left: auto; margin-right: auto; padding: 0 48px 64px; }
.cp-suggested .catalogue-grid,
.cp-suggested-grid { grid-template-columns: repeat(4, 1fr); }

/* ── CHECKOUT PAGES ── */
.cp-page .container { font-family: var(--font-body); }
.cp-page .card { border-radius: var(--radius-lg); border: 1px solid rgba(0,0,0,.06); }
.cp-page .card-header { background: var(--white); border-bottom: 1px solid rgba(0,0,0,.06); font-family: var(--font-body); font-weight: 600; }

/* ── RESPONSIVE ── */
@media (max-width: 900px) {
  .cp-nav { padding: 0 24px; }
  .nav-links { display: none; position: absolute; top: 64px; left: 0; right: 0; background: rgba(246,240,228,.97); backdrop-filter: blur(12px); flex-direction: column; padding: 16px 24px; border-bottom: 1px solid rgba(0,0,0,.06); z-index: 99; }
  .nav-links.show { display: flex; }
  .nav-link { padding: 12px 0; font-size: 15px; }
  .nav-burger { display: flex; }
  .cart-page { padding: 0 24px 64px; }
  .cart-title { font-size: 28px; margin-bottom: 24px; }
  .cart-page .table thead { display: none; }
  .cart-page .table tbody tr { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; padding: 16px 0; border-bottom: 1px solid rgba(0,0,0,.06); }
  .cart-page .table tbody td { border: none; padding: 0; }
  .hero { grid-template-columns: 1fr; min-height: auto; }
  .hero-right { min-height: 440px; height: auto; }
  .hero-loki-card { bottom: 24px; right: 20px; padding: 12px 18px; }
  .hero-loki-card .name { font-size: 20px; }
  .hero-left { padding: 48px 24px; }
  section { padding: 64px 24px; }
  .scroll-section { padding: 64px 0 48px; }
  .scroll-section-inner { padding: 0 24px; }
  .about { grid-template-columns: 1fr; margin: 0 24px; padding: 60px 36px; gap: 48px; }
  .faq-layout { grid-template-columns: 1fr; gap: 40px; }
  .faq-sticky { position: static; }
  .newsletter { grid-template-columns: 1fr; margin: 0 24px 64px; padding: 48px 36px; gap: 32px; }
  .nl-form { flex-direction: column; }
  .cp-footer { grid-template-columns: 1fr 1fr; padding: 40px 24px; }
  .reviews-header { grid-template-columns: 1fr; gap: 16px; }
  .reviews-grid { grid-template-columns: 1fr; }
  .reviews-grid .review-card:nth-child(2) { margin-top: 0; }
  .avantages-grid { grid-template-columns: 1fr; gap: 40px; }
  .blog-grid { grid-template-columns: 1fr; }
  .cp-suggested { padding: 0 16px 40px; max-width: 100%; }
  .cp-suggested-grid,
  .cp-suggested .catalogue-grid { grid-template-columns: repeat(2, 1fr) !important; }
  .catalogue-page { padding: 24px 16px; }
  .catalogue-header h1 { font-size: 28px; }
  .catalogue-filters { gap: 6px; }
  .filter-btn { padding: 6px 14px; font-size: 12px; }

  /* Product page responsive */
  .breadcrumb { padding: 16px 20px; }
  .product-wrap { grid-template-columns: 1fr; gap: 28px; padding: 0 20px 56px; }
  .gallery { position: static; }
  .gallery-main { aspect-ratio: 1; height: auto; border-radius: var(--radius-lg); }
  .gallery-thumbs { padding-bottom: 4px; }
  .product-info { padding-top: 0; }
  .product-name { font-size: 28px; letter-spacing: -.5px; }
  .desc-grid { grid-template-columns: 1fr; gap: 32px; }
  .ingredients-grid { grid-template-columns: 1fr 1fr; }
  .why-grid { grid-template-columns: 1fr; }
  .trust-row { flex-wrap: wrap; gap: 12px; }
  .trust-item { flex: 1 0 calc(50% - 12px); }
  .tab-content-html table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .product-reviews-section { padding: 40px 20px; }
  .product-reviews-header { grid-template-columns: 1fr; gap: 20px; align-items: flex-start; }
  .product-races-section { margin: 32px 0 0; border-radius: 0; padding: 28px 20px; }

  /* Tabs → Accordion mobile */
  .tabs-wrap { padding: 0 24px 40px; }
  .tabs-nav { display: none; }
  .tab-panel { display: none !important; padding: 24px 0; }
  .tab-panel.accordion-open { display: block !important; }
  .accordion-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    background: none;
    border: none;
    border-top: 1.5px solid rgba(0,0,0,.08);
    padding: 18px 0;
    font-family: var(--font-body);
    font-size: 15px;
    font-weight: 600;
    color: var(--dark);
    cursor: pointer;
    text-align: left;
    transition: color .2s;
  }
  .accordion-toggle:last-of-type { border-bottom: 1.5px solid rgba(0,0,0,.08); }
  .accordion-toggle.active { color: var(--green); }
  .accordion-toggle svg {
    width: 18px; height: 18px;
    flex-shrink: 0;
    color: #bbb;
    transition: transform .3s, color .2s;
  }
  .accordion-toggle.active svg { transform: rotate(180deg); color: var(--green); }

  .catalogue-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 600px) {
  .card-body { padding: 16px 18px 20px; }
}

@media (max-width: 480px) {
  .catalogue-grid { grid-template-columns: 1fr; }
  .cp-suggested .catalogue-grid,
  .cp-suggested-grid { grid-template-columns: 1fr !important; }
}

@media (max-width: 500px) {
  .cp-footer { grid-template-columns: 1fr; }
  .ingredients-grid { grid-template-columns: 1fr; }
  .trust-row { gap: 10px; }
  .trust-item { font-size: 11px; }
  .product-wrap { padding: 0 16px 48px; }
  .breadcrumb { padding: 12px 16px; }
  .tabs-wrap { padding: 0 16px 32px; }
  .product-reviews-section { padding: 32px 16px; }
  .product-races-section { padding: 24px 16px; }
  .price-unit { font-size: 30px; }
  .catalogue-page { padding: 16px; }
  .cp-suggested { padding: 0 16px 32px; }
  section { padding: 48px 16px; }
  .hero-left { padding: 40px 20px; }
  .hero h1 { font-size: 36px; letter-spacing: -1px; }
}

/* ===== BLOG — listing ===== */
svg.icon { display: block; }
svg.icon-14 { width: 14px; height: 14px; }

.blog-hero { padding: 64px 48px 0; max-width: 1200px; margin: 0 auto; }
.blog-hero .hero-label { font-size: 11px; font-weight: 700; letter-spacing: 3px; text-transform: uppercase; color: rgba(27,47,18,.5); margin-bottom: 14px; }
.blog-hero h1 { font-family: var(--font-heading); font-size: clamp(32px,4vw,52px); font-weight: 500; letter-spacing: -1.5px; line-height: 1.05; margin-bottom: 14px; max-width: 640px; }
.blog-hero p { font-size: 15px; color: #777; line-height: 1.75; max-width: 520px; }

.blog-filters-wrap { max-width: 1200px; margin: 0 auto; padding: 40px 48px 0; }
.blog-filters-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.blog-filters-row .filter-btn { color: #666; }
.blog-filters-row .filter-btn:hover { border-color: var(--green); color: var(--green); background: var(--white); }
.blog-filters-row .filter-btn.active { background: var(--green); border-color: var(--green); color: var(--beige); }
.results-count { font-size: 13px; color: #aaa; margin-left: auto; white-space: nowrap; }

.blog-grid-wrap { max-width: 1200px; margin: 0 auto; padding: 32px 48px 96px; }
.blog-articles-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 24px; }

/* Card */
.blog-card { background: var(--white); border-radius: var(--radius-lg); overflow: hidden; border: 1px solid rgba(0,0,0,.05); display: flex; flex-direction: column; transition: transform .25s, box-shadow .25s; cursor: pointer; text-decoration: none; color: inherit; }
.blog-card:hover { transform: translateY(-4px); box-shadow: 0 16px 40px rgba(0,0,0,.1); }
.blog-card.blog-card-featured { grid-column: span 2; }
.blog-card.hidden { display: none; }
.blog-card-img { overflow: hidden; background: #e5ddd0; position: relative; }
.blog-card-img img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .5s; }
.blog-card:hover .blog-card-img img { transform: scale(1.04); }
.blog-card-featured .blog-card-img { height: 280px; }
.blog-card:not(.blog-card-featured) .blog-card-img { height: 200px; }
.blog-card-badge { position: absolute; top: 14px; left: 14px; font-size: 10px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; padding: 4px 10px; border-radius: var(--radius-pill); background: rgba(27,47,18,.8); color: var(--beige); backdrop-filter: blur(8px); }
.blog-card-body { padding: 20px 22px 24px; flex: 1; display: flex; flex-direction: column; }
.blog-card-date { font-size: 11px; color: #bbb; font-weight: 500; margin-bottom: 8px; }
.blog-card-title { font-family: var(--font-heading); font-size: 18px; font-weight: 500; line-height: 1.25; margin-bottom: 10px; color: var(--dark); }
.blog-card-featured .blog-card-title { font-size: 22px; }
.blog-card-excerpt { font-size: 13px; color: #777; line-height: 1.65; flex: 1; margin-bottom: 16px; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.blog-card-footer { display: flex; align-items: center; justify-content: space-between; }
.blog-card-read { font-size: 12px; font-weight: 700; color: var(--green); display: flex; align-items: center; gap: 5px; }
.blog-card-read svg { transition: transform .2s; }
.blog-card:hover .blog-card-read svg { transform: translateX(3px); }
.blog-card-time { font-size: 11px; color: #ccc; }

#noResults { display: none; grid-column: span 3; text-align: center; padding: 80px 0; }
#noResults p { font-size: 15px; color: #aaa; }

/* ===== BLOG — article page ===== */
.blog-article { max-width: 780px; margin: 0 auto; padding: 0 24px 60px; }
.blog-article__hero { border-radius: var(--radius-lg); overflow: hidden; margin-bottom: 32px; }
.blog-article__hero img { width: 100%; height: auto; display: block; }
.blog-article__header { margin-bottom: 32px; }
.blog-article__header h1 { font-family: var(--font-heading); font-size: 32px; font-weight: 500; line-height: 1.3; margin-top: 16px; }
.blog-article__meta { display: flex; gap: 16px; align-items: center; flex-wrap: wrap; font-size: 14px; color: #777; }
.blog-article__badge { font-size: 10px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; padding: 4px 12px; border-radius: var(--radius-pill); background: var(--green); color: var(--beige); }
.blog-article__date, .blog-article__author { color: #999; }
.blog-article__time { color: #bbb; font-size: 13px; }
.blog-article__content { font-size: 16px; line-height: 1.75; color: var(--dark); }
.blog-article__content h2 { font-family: var(--font-heading); font-size: 24px; font-weight: 500; margin: 40px 0 16px; color: var(--green); }
.blog-article__content h3 { font-family: var(--font-heading); font-size: 20px; font-weight: 500; margin: 28px 0 12px; }
.blog-article__content h4 { font-weight: 700; font-size: 17px; margin: 20px 0 8px; }
.blog-article__content p { margin-bottom: 16px; }
.blog-article__content ul, .blog-article__content ol { margin: 12px 0 20px 24px; }
.blog-article__content li { margin-bottom: 6px; }
.blog-article__content blockquote { border-left: 4px solid var(--sage); padding: 16px 24px; margin: 24px 0; background: rgba(210,218,189,.15); border-radius: 0 var(--radius-lg) var(--radius-lg) 0; }
.blog-article__content hr { border: none; border-top: 1px solid #e8e8e8; margin: 32px 0; }
.blog-article__content a { color: var(--green); font-weight: 600; text-decoration: underline; }
.blog-article__content a:hover { opacity: .8; }
.blog-article__content img { max-width: 100%; height: auto; border-radius: var(--radius-lg); margin: 16px 0; }
.blog-article__footer { padding-top: 32px; border-top: 1px solid #eee; margin-top: 40px; }
.blog-article__back { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 600; color: var(--green); text-decoration: none; transition: opacity .2s; }
.blog-article__back:hover { opacity: .7; }
.blog-article__back svg { transition: transform .2s; }
.blog-article__back:hover svg { transform: translateX(-3px); }

/* Related articles */
.blog-related { max-width: 1200px; margin: 0 auto; padding: 0 48px 80px; }
.blog-related h2 { font-family: var(--font-heading); font-size: 24px; font-weight: 500; margin-bottom: 24px; text-align: center; }
.blog-related__grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 24px; }
.blog-card--small .blog-card-title { font-size: 16px; }

@media (max-width: 900px) {
  .blog-hero, .blog-filters-wrap, .blog-grid-wrap { padding-left: 20px; padding-right: 20px; }
  .blog-articles-grid { grid-template-columns: 1fr 1fr; }
  .blog-card.blog-card-featured { grid-column: span 2; }
  .blog-related__grid { grid-template-columns: repeat(2,1fr); }
  .blog-article__header h1 { font-size: 26px; }
  #noResults { grid-column: span 2; }
}
@media (max-width: 600px) {
  .blog-articles-grid { grid-template-columns: 1fr; }
  .blog-card.blog-card-featured { grid-column: span 1; }
  .blog-card-featured .blog-card-img { height: 200px; }
  .blog-related__grid { grid-template-columns: 1fr; }
  #noResults { grid-column: span 1; }
  .blog-related { padding-left: 20px; padding-right: 20px; }
}

/* ══════════════════════════════════════════════════════════
   SEO Pages — compléments, guides, comparatifs, races
   ══════════════════════════════════════════════════════════ */

/* ── Breadcrumb ────────────────────────────────────────── */
.seo-page .breadcrumb { max-width:1200px; margin:0 auto; padding:24px var(--track-px) 0; font-size:14px; display:flex; align-items:center; gap:6px; flex-wrap:wrap; }
.seo-page .breadcrumb a { color:var(--green); text-decoration:none; }
.seo-page .breadcrumb a:hover { text-decoration:underline; }
.seo-page .breadcrumb-sep { color:#999; }
.seo-page .breadcrumb-current { color:#666; }

/* ── Hero ──────────────────────────────────────────────── */
.seo-hero { max-width:1200px; margin:0 auto; padding:40px var(--track-px) 32px; }
.seo-hero-img { border-radius:var(--radius-lg); overflow:hidden; margin-bottom:24px; max-height:400px; }
.seo-hero-img img { width:100%; height:100%; object-fit:cover; display:block; }
.seo-hero-meta { display:flex; gap:16px; font-size:13px; color:#888; margin-bottom:12px; font-family:var(--font-body); }
.seo-hero h1 { font-family:var(--font-heading); font-size:clamp(28px,4vw,44px); color:var(--green); line-height:1.15; margin:0 0 12px; }
.seo-hero-subtitle { font-size:18px; color:#444; line-height:1.6; max-width:720px; margin:0; }

/* ── Content ───────────────────────────────────────────── */
.seo-content { max-width:800px; margin:0 auto; padding:0 var(--track-px) 40px; font-size:16px; line-height:1.75; color:var(--dark); }
.seo-content h2 { font-family:var(--font-heading); font-size:26px; color:var(--green); margin:40px 0 16px; }
.seo-content h3 { font-family:var(--font-heading); font-size:20px; color:var(--dark); margin:32px 0 12px; }
.seo-content p { margin:0 0 16px; }
.seo-content ul, .seo-content ol { padding-left:24px; margin:0 0 16px; }
.seo-content li { margin-bottom:8px; }
.seo-content blockquote { border-left:4px solid var(--sage); padding:16px 20px; margin:24px 0; background:rgba(210,218,189,.15); border-radius:0 var(--radius-sm) var(--radius-sm) 0; font-style:italic; }
.seo-content img { max-width:100%; height:auto; border-radius:var(--radius-md); margin:16px 0; }
.seo-content table { width:100%; border-collapse:collapse; margin:24px 0; font-size:14px; }
.seo-content th, .seo-content td { padding:10px 14px; border:1px solid #ddd; text-align:left; }
.seo-content th { background:var(--green); color:#fff; font-weight:600; }
.seo-content tr:nth-child(even) { background:rgba(246,240,228,.5); }

/* ── FAQ ───────────────────────────────────────────────── */
.seo-faq { max-width:800px; margin:0 auto; padding:0 var(--track-px) 48px; }
.seo-faq h2 { font-family:var(--font-heading); font-size:26px; color:var(--green); margin:0 0 20px; }
.seo-faq-item { border-bottom:1px solid #e0d9cb; }
.seo-faq-item summary { padding:16px 0; font-weight:600; cursor:pointer; font-size:16px; list-style:none; display:flex; justify-content:space-between; align-items:center; }
.seo-faq-item summary::after { content:'＋'; font-size:18px; color:var(--green); transition:transform .2s; }
.seo-faq-item[open] summary::after { content:'−'; }
.seo-faq-answer { padding:0 0 16px; color:#444; line-height:1.7; }

/* ── CTA Diagnostic ────────────────────────────────────── */
.seo-cta-diagnostic { max-width:800px; margin:0 auto 48px; padding:0 var(--track-px); }
.seo-cta-inner { background:var(--green); color:#fff; border-radius:var(--radius-lg); padding:40px; text-align:center; }
.seo-cta-icon { font-size:40px; margin-bottom:12px; }
.seo-cta-inner h3 { font-family:var(--font-heading); font-size:24px; margin:0 0 10px; color:#fff; }
.seo-cta-inner p { font-size:15px; opacity:.85; margin:0 0 20px; max-width:480px; margin-left:auto; margin-right:auto; }
.seo-cta-inner .btn-primary { display:inline-block; background:var(--sage); color:var(--green); padding:12px 32px; border-radius:var(--radius-pill); font-weight:600; text-decoration:none; transition:all .2s; }
.seo-cta-inner .btn-primary:hover { background:#fff; }

/* ── Related Products ──────────────────────────────────── */
.seo-related-products { max-width:1200px; margin:0 auto; padding:0 var(--track-px) 48px; }
.seo-related-products h2 { font-family:var(--font-heading); font-size:26px; color:var(--green); margin:0 0 20px; }
.seo-products-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); gap:20px; }
.seo-product-card { background:#fff; border-radius:var(--radius-md); overflow:hidden; text-decoration:none; color:var(--dark); transition:transform .2s, box-shadow .2s; border:1px solid #e8e2d6; }
.seo-product-card:hover { transform:translateY(-3px); box-shadow:0 8px 24px rgba(0,0,0,.08); }
.seo-product-img { height:180px; overflow:hidden; background:var(--beige); }
.seo-product-img img { width:100%; height:100%; object-fit:cover; }
.seo-product-placeholder { width:100%; height:100%; display:flex; align-items:center; justify-content:center; font-size:40px; font-family:var(--font-heading); color:var(--green); }
.seo-product-body { padding:14px; }
.seo-product-body h3 { font-family:var(--font-heading); font-size:16px; margin:0 0 6px; color:var(--green); }
.seo-product-body p { font-size:13px; color:#666; margin:0 0 8px; line-height:1.5; }
.seo-product-price { font-weight:700; font-size:15px; color:var(--green); }

/* ── Related Pages ─────────────────────────────────────── */
.seo-related-pages { max-width:1200px; margin:0 auto; padding:0 var(--track-px) 48px; }
.seo-related-pages h2 { font-family:var(--font-heading); font-size:26px; color:var(--green); margin:0 0 20px; }
.seo-related-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); gap:20px; }
.seo-related-card { background:#fff; border-radius:var(--radius-md); overflow:hidden; text-decoration:none; color:var(--dark); padding:20px; border:1px solid #e8e2d6; transition:transform .2s, box-shadow .2s; }
.seo-related-card:hover { transform:translateY(-3px); box-shadow:0 8px 24px rgba(0,0,0,.08); }
.seo-related-card img { width:100%; height:140px; object-fit:cover; border-radius:var(--radius-sm); margin-bottom:12px; }
.seo-related-card h3 { font-family:var(--font-heading); font-size:17px; color:var(--green); margin:0 0 6px; }
.seo-related-card p { font-size:13px; color:#666; line-height:1.5; margin:0; }

/* ── Index pages ───────────────────────────────────────── */
.seo-index { max-width:1200px; margin:0 auto; padding:0 var(--track-px) 48px; }
.seo-index .breadcrumb { padding-left:0; padding-right:0; max-width:none; margin-bottom:24px; font-size:14px; display:flex; align-items:center; gap:6px; }
.seo-index .breadcrumb a { color:var(--green); text-decoration:none; }
.seo-index .breadcrumb a:hover { text-decoration:underline; }
.seo-index-hero { text-align:center; padding:32px 0 40px; }
.seo-index-hero h1 { font-family:var(--font-heading); font-size:clamp(28px,4vw,40px); color:var(--green); margin:0 0 12px; }
.seo-index-hero p { font-size:17px; color:#555; max-width:600px; margin:0 auto; line-height:1.6; }
.seo-index-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(300px,1fr)); gap:24px; margin-bottom:48px; }
.seo-index-card { background:#fff; border-radius:var(--radius-md); overflow:hidden; text-decoration:none; color:var(--dark); transition:transform .2s, box-shadow .2s; border:1px solid #e8e2d6; }
.seo-index-card:hover { transform:translateY(-4px); box-shadow:0 10px 32px rgba(0,0,0,.08); }
.seo-index-card-img { height:200px; overflow:hidden; }
.seo-index-card-img img { width:100%; height:100%; object-fit:cover; }
.seo-index-card-body { padding:20px; }
.seo-index-card-body h2, .seo-index-card-body h3 { font-family:var(--font-heading); font-size:18px; color:var(--green); margin:0 0 8px; }
.seo-index-card-body p { font-size:14px; color:#555; line-height:1.5; margin:0 0 10px; }
.seo-index-card-meta { font-size:12px; color:#999; font-weight:600; text-transform:uppercase; letter-spacing:1px; }

/* ── CMS Pages (Monsieur Biz) ─────────────────────────── */
.cms-page { padding-top:24px; }
.cms-page .breadcrumb { max-width:1200px; margin:0 auto 24px; padding:0 var(--track-px); }
.cms-content { max-width:900px; margin:0 auto; padding:0 var(--track-px) 48px; }
.cms-content h1 { font-family:var(--font-heading); font-size:clamp(28px,4vw,42px); font-weight:500; color:var(--green); line-height:1.15; letter-spacing:-1px; margin:0 0 24px; text-align:center; }
.cms-content h2 { font-family:var(--font-heading); font-size:clamp(22px,3vw,28px); font-weight:500; color:var(--green); margin:40px 0 16px; line-height:1.2; }
.cms-content h3 { font-family:var(--font-heading); font-size:20px; font-weight:500; color:var(--dark); margin:32px 0 12px; }
.cms-content p { margin:0 0 16px; line-height:1.7; color:#333; }
.cms-content ul, .cms-content ol { margin:0 0 16px; padding-left:24px; }
.cms-content li { margin:0 0 8px; line-height:1.6; color:#333; }
.cms-content blockquote { border-left:4px solid var(--sage); padding:16px 24px; background:rgba(210,218,189,.15); border-radius:0 var(--radius-md) var(--radius-md) 0; margin:24px 0; font-style:italic; color:#555; }
.cms-content table { width:100%; border-collapse:collapse; margin:24px 0; font-size:14px; }
.cms-content th { background:var(--green); color:var(--beige); padding:12px 16px; text-align:left; font-weight:600; }
.cms-content td { padding:10px 16px; border-bottom:1px solid #e8e2d6; }
.cms-content tr:nth-child(even) td { background:rgba(246,240,228,.5); }
.cms-content strong { color:var(--green); }
.cms-content a { color:var(--green); text-decoration:underline; text-underline-offset:3px; }
.cms-content a:hover { color:#2a4a1c; }
.cms-content img { border-radius:var(--radius-md); margin:16px 0; }
.cms-content .seo-index { max-width:none; padding:0; }
.cms-content .seo-index h1 { text-align:center; }
.cms-content .seo-index-intro { text-align:center; font-size:17px; color:#555; max-width:640px; margin:0 auto 32px; }
.cms-content .seo-index-card { padding:24px; display:flex; flex-direction:column; justify-content:space-between; }
.cms-content .seo-index-card h3 { font-family:var(--font-heading); font-size:17px; color:var(--green); margin:0 0 12px; line-height:1.3; }
.cms-content .seo-index-link { font-size:13px; font-weight:600; color:var(--green); margin-top:auto; }
@media (max-width: 900px) {
  .cms-content { padding:0 20px 32px; }
  .cms-page .breadcrumb { padding:0 20px; }
}

/* ── Race badge ────────────────────────────────────────── */
.seo-race-badge { display:inline-flex; align-items:center; gap:8px; background:var(--sage); color:var(--green); padding:8px 16px; border-radius:var(--radius-pill); font-weight:600; font-size:14px; margin-bottom:20px; }
.seo-race-section { margin-bottom:40px; }
.seo-race-section h2 { font-family:var(--font-heading); font-size:24px; color:var(--green); margin:0 0 16px; }

/* ── SEO responsive ────────────────────────────────────── */
@media (max-width: 900px) {
  .seo-hero { padding:24px 20px 20px; }
  .seo-content { padding:0 20px 32px; }
  .seo-faq { padding:0 20px 32px; }
  .seo-cta-diagnostic { padding:0 20px; }
  .seo-related-products { padding:0 20px 32px; }
  .seo-related-pages { padding:0 20px 32px; }
  .seo-index { padding:0 20px 32px; }
  .seo-cta-inner { padding:28px 20px; }
}
@media (max-width: 600px) {
  .seo-index-grid { grid-template-columns:1fr; }
  .seo-products-grid { grid-template-columns:repeat(2,1fr); }
  .seo-related-grid { grid-template-columns:1fr; }
  .seo-hero-img { max-height:240px; }
}