/* FOIN EXPRESS — boutique. Palette prairie : vert profond, paille, crème. */
:root {
  --green-900: #16301f;
  --green-800: #1d4030;
  --green-700: #265140;
  --green-500: #3f7a5e;
  --straw-500: #d9b26a;
  --straw-400: #e5c88f;
  --straw-100: #f6ecd8;
  --cream: #faf7f0;
  --ink: #1b1b17;
  --muted: #6c6a62;
  --line: #e2ddd0;
  --white: #fff;
  --danger: #a5341f;
  --radius: 14px;
  --radius-sm: 9px;
  --shadow: 0 1px 2px rgba(27, 27, 23, .05), 0 8px 24px -12px rgba(27, 27, 23, .18);
  --shadow-lg: 0 24px 60px -28px rgba(22, 48, 31, .35);
  --font-sans: "Montserrat", "Helvetica Neue", Arial, system-ui, sans-serif;
  --font-serif: "Poppins", "Montserrat", system-ui, sans-serif;
  --wrap: 1180px;
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 100px; }

body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.66;
  font-weight: 400;
  color: var(--ink);
  background: var(--cream);
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; display: block; }
a { color: var(--green-800); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 3px; }
h1, h2, h3, h4 { font-family: var(--font-serif); font-weight: 600; line-height: 1.16; letter-spacing: -.015em; margin: 0 0 .5em; }
h1 { font-size: clamp(2.1rem, 4.4vw, 3.4rem); }
h2 { font-size: clamp(1.6rem, 2.6vw, 2.3rem); }
h3 { font-size: 1.22rem; }
p { margin: 0 0 1em; }
ul, ol { margin: 0 0 1em; padding-left: 1.15em; }
table { border-collapse: collapse; width: 100%; }
sup { font-size: .65em; }

.wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 22px; }
.sr-only, .skip:not(:focus) {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip { position: absolute; left: 12px; top: -60px; background: var(--green-800); color: #fff; padding: 10px 16px; border-radius: 8px; z-index: 99; }
.skip:focus { top: 12px; }
.muted { color: var(--muted); }
.danger { color: var(--danger); }
.hint { font-size: .87rem; color: var(--muted); }
.nope, .empty { text-align: center; padding: 60px 0; }

/* ---------------------------------------------------------- boutons */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .4em;
  padding: 11px 20px; border-radius: 999px; border: 1px solid transparent;
  font: inherit; font-weight: 600; font-size: .95rem; cursor: pointer;
  transition: transform .12s ease, background .18s ease, color .18s ease, border-color .18s;
  text-decoration: none; white-space: nowrap;
}
.btn:hover { text-decoration: none; transform: translateY(-1px); }
.btn--primary { background: var(--green-800); color: #fff; }
.btn--primary:hover { background: var(--green-900); }
.btn--ghost { background: transparent; border-color: var(--green-800); color: var(--green-800); }
.btn--ghost:hover { background: var(--green-800); color: #fff; }
.btn--add { background: var(--straw-500); color: var(--green-900); }
.btn--add:hover { background: var(--straw-400); }
.btn--lg { padding: 14px 26px; font-size: 1rem; }
.btn--sm { padding: 6px 13px; font-size: .83rem; }
.btn--block { width: 100%; }
.btn--danger { background: transparent; border-color: var(--danger); color: var(--danger); }
.btn--danger:hover { background: var(--danger); color: #fff; }
.btn:disabled { opacity: .55; cursor: not-allowed; transform: none; }
.link-danger { background: none; border: 0; padding: 0; color: var(--danger); font: inherit; font-size: .88rem; cursor: pointer; text-decoration: underline; }
.link-arrow { font-weight: 600; font-size: .9rem; color: var(--green-700); }

/* ---------------------------------------------------------- bandeau + header */
.announce { background: var(--green-900); color: #e9e3d3; font-size: .8rem; letter-spacing: .01em; }
.announce__in { display: flex; justify-content: space-between; align-items: center; gap: 18px; padding: 9px 22px; flex-wrap: wrap; }
.announce__in > span:first-child { flex: 1 1 auto; min-width: 0; }
.announce__right { display: inline-flex; align-items: center; gap: 6px; color: var(--straw-400); white-space: nowrap; }

.site-header { position: sticky; top: 0; z-index: 40; background: rgba(250, 247, 240, .94); backdrop-filter: blur(10px); border-bottom: 1px solid var(--line); }
.site-header__in { display: flex; align-items: center; gap: 18px; padding: 12px 22px; min-height: 74px; }
.brand { display: flex; align-items: center; gap: 11px; text-decoration: none; }
.brand__txt { display: flex; flex-direction: column; line-height: 1.1; }
.brand__txt strong { font-family: var(--font-serif); font-size: 1.32rem; color: var(--green-900); letter-spacing: -.02em; }
.brand__txt small { font-size: .63rem; letter-spacing: .13em; text-transform: uppercase; color: var(--muted); }
.nav { display: flex; align-items: center; gap: 2px; margin-left: auto; font-size: .92rem; font-weight: 500; }
.nav a { color: var(--ink); padding: 8px 11px; border-radius: 999px; line-height: 1.2; transition: background .15s, color .15s; }
.nav a:hover { background: var(--straw-100); color: var(--green-900); text-decoration: none; }
.nav a.is-active { background: var(--green-800); color: #fff; }
.nav a.is-active:hover { background: var(--green-900); }
.header-actions { margin-left: 6px; }
.header-actions { display: flex; align-items: center; gap: 14px; }
.header-phone { font-size: .9rem; font-weight: 600; color: var(--green-800); }
.cart-link { position: relative; display: inline-flex; padding: 8px; border-radius: 50%; color: var(--green-900); }
.cart-link:hover { background: var(--straw-100); }
.cart-badge { position: absolute; top: 0; right: 0; min-width: 18px; height: 18px; padding: 0 4px; border-radius: 9px; background: var(--straw-500); color: var(--green-900); font-size: .7rem; font-weight: 700; display: grid; place-items: center; }
.cart-badge[data-empty="1"] { display: none; }
.burger { display: none; background: none; border: 0; padding: 8px; cursor: pointer; }
.burger span:not(.sr-only) { display: block; width: 22px; height: 2px; background: var(--green-900); margin: 4px 0; }

.flash { margin: 16px 0; padding: 13px 18px; border-radius: var(--radius-sm); font-size: .93rem; border-left: 4px solid var(--green-500); background: #eaf3ec; }
.flash--error { border-color: var(--danger); background: #fbeae6; }
.flash--info { border-color: var(--straw-500); background: var(--straw-100); }

/* ---------------------------------------------------------- slider d'accueil */
.slider { position: relative; overflow: hidden; background: var(--green-900); }
.slider__track { position: relative; }
.slide { position: absolute; inset: 0; opacity: 0; visibility: hidden; transition: opacity .7s ease, visibility .7s; }
.slide.is-active { position: relative; opacity: 1; visibility: visible; z-index: 1; }
.slide__bg { position: absolute; inset: 0; background-size: cover; background-position: center; transform: scale(1.04); transition: transform 7s ease-out; }
.slide.is-active .slide__bg { transform: scale(1); }
.slide__mask { position: absolute; inset: 0; background: linear-gradient(100deg, rgba(15,35,24,.88) 0%, rgba(15,35,24,.72) 42%, rgba(15,35,24,.28) 78%, rgba(15,35,24,.12) 100%); }
.slide__in { position: relative; z-index: 2; display: flex; flex-direction: column; justify-content: center; min-height: 520px; padding-top: 56px; padding-bottom: 76px; max-width: 1180px; }
.slide__kicker { display: inline-block; font-size: .76rem; letter-spacing: .17em; text-transform: uppercase; font-weight: 700; color: var(--green-900); background: var(--straw-500); padding: 6px 14px; border-radius: 999px; margin-bottom: 20px; width: fit-content; }
.slide__title { font-size: clamp(2rem, 4.2vw, 3.5rem); color: #fff; margin-bottom: .4em; max-width: 20ch; }
.slide__title em { font-style: italic; color: var(--straw-400); }
.slide__text { font-size: 1.05rem; color: #e2e6dc; max-width: 56ch; margin-bottom: 28px; }
.slide__cta { display: flex; gap: 12px; flex-wrap: wrap; }
.slide__cta .btn--primary { background: var(--straw-500); color: var(--green-900); }
.slide__cta .btn--primary:hover { background: var(--straw-400); }
.btn--ghost-light { border-color: rgba(255,255,255,.6); color: #fff; }
.btn--ghost-light:hover { background: #fff; color: var(--green-900); border-color: #fff; }
.slider__nav { position: absolute; top: 50%; transform: translateY(-50%); z-index: 3; width: 46px; height: 46px; border-radius: 50%; border: 1px solid rgba(255,255,255,.45); background: rgba(22,48,31,.35); color: #fff; font-size: 1.6rem; line-height: 1; cursor: pointer; display: grid; place-items: center; backdrop-filter: blur(4px); }
.slider__nav:hover { background: rgba(216,178,106,.9); color: var(--green-900); border-color: transparent; }
.slider__nav--prev { left: 18px; }
.slider__nav--next { right: 18px; }
.slider__dots { position: absolute; bottom: 24px; left: 0; right: 0; z-index: 3; display: flex; gap: 9px; justify-content: center; }
.slider__dots button { width: 34px; height: 5px; border-radius: 999px; border: 0; background: rgba(255,255,255,.4); cursor: pointer; padding: 0; transition: background .2s, width .2s; }
.slider__dots button.is-active { background: var(--straw-500); width: 48px; }
.hero__kicker { font-size: .78rem; letter-spacing: .16em; text-transform: uppercase; color: var(--green-700); font-weight: 700; margin-bottom: 14px; }
.hero-facts { background: var(--green-800); color: #e6ebdf; }
.hero-facts__in { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; padding: 20px 22px; }
.hero-facts strong { display: block; font-family: var(--font-serif); font-size: 1.05rem; color: #fff; }
.hero-facts span { font-size: .79rem; color: #b9c7b4; }

.strip { background: var(--green-800); color: #efeadb; }
.strip__in { display: grid; grid-template-columns: repeat(4, 1fr); gap: 26px; padding: 26px 22px; }
.strip__item { display: flex; gap: 11px; }
.strip__ico { color: var(--straw-400); font-weight: 700; }
.strip__item strong { display: block; font-size: .95rem; color: #fff; }
.strip__item p { margin: 2px 0 0; font-size: .82rem; color: #cfd8cd; }

/* ---------------------------------------------------------- sections */
.section { padding: 62px 0; }
.section--alt { background: var(--white); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.section__head { max-width: 62ch; margin-bottom: 34px; }
.section__head p { color: var(--muted); margin-bottom: 0; }
.section__head--row { max-width: none; display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; flex-wrap: wrap; }
.page-head { padding: 54px 0 30px; }
.page-head__sub { font-size: 1.02rem; color: var(--muted); max-width: 78ch; }
.breadcrumb { display: flex; flex-wrap: wrap; gap: 8px; font-size: .82rem; color: var(--muted); padding-top: 26px; }
main { display: block; }
.breadcrumb a { color: var(--muted); }

.animal-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.animal-card { background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); padding: 26px 22px; transition: transform .16s, box-shadow .16s, border-color .16s; }
.animal-card:hover { transform: translateY(-3px); box-shadow: var(--shadow); border-color: var(--straw-500); text-decoration: none; }
.animal-card img { width: 100%; height: 158px; object-fit: cover; border-radius: 10px; margin-bottom: 16px; background: var(--straw-100); }
.animal-card h3 { margin-bottom: .35em; color: var(--green-900); }
.animal-card p { font-size: .9rem; color: var(--muted); }
.animal-card .link-arrow { color: var(--green-700); }

.grid-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }

/* ---------------------------------------------------------- carte produit */
.card { background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; display: flex; flex-direction: column; transition: box-shadow .16s, transform .16s; }
.card:hover { box-shadow: var(--shadow); transform: translateY(-2px); }
.card__media { position: relative; display: block; background: var(--straw-100); aspect-ratio: 4 / 3; overflow: hidden; }
.card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .3s; }
.card:hover .card__media img { transform: scale(1.03); }
.card__body { padding: 18px 20px 20px; display: flex; flex-direction: column; flex: 1; }
.card__eyebrow { font-size: .76rem; letter-spacing: .07em; text-transform: uppercase; color: var(--green-700); font-weight: 700; margin-bottom: 6px; }
.card__title { font-size: 1.09rem; margin-bottom: .35em; }
.card__title a { color: var(--ink); }
.card__desc { font-size: .88rem; color: var(--muted); margin-bottom: 12px; }
.card__animals { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 16px; }
.chip { font-size: .74rem; padding: 3px 10px; border-radius: 999px; background: var(--straw-100); color: var(--green-800); border: 1px solid #ecdfc4; }
.chip:hover { background: var(--straw-400); text-decoration: none; }
.card__foot { margin-top: auto; display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; }
.price__ttc { display: block; font-family: var(--font-serif); font-size: 1.3rem; color: var(--green-900); font-weight: 600; }
.price__ht { font-size: .76rem; color: var(--muted); }
.tag { position: absolute; top: 12px; left: 12px; font-size: .7rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; padding: 4px 9px; border-radius: 6px; }
.tag--bio { background: var(--green-700); color: #fff; }
.tag--out { background: var(--danger); color: #fff; left: auto; right: 12px; }
.tag--lg { font-size: .78rem; top: 16px; left: 16px; }

/* ---------------------------------------------------------- tarifs (accueil) */
.tarif-teaser { display: grid; grid-template-columns: 1.05fr .95fr; gap: 44px; align-items: center; }
.tarif-teaser__note { font-size: .88rem; color: var(--muted); }
.tarif-table { background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; font-size: .95rem; }
.tarif-table caption { text-align: left; padding: 12px 16px 0; font-weight: 600; color: var(--green-800); }
.tarif-table th, .tarif-table td { padding: 11px 16px; border-bottom: 1px solid var(--line); text-align: left; }
.tarif-table thead th { background: var(--green-800); color: #fff; font-size: .76rem; letter-spacing: .07em; text-transform: uppercase; font-family: var(--font-sans); }
.tarif-table tbody th { font-weight: 600; color: var(--ink); }
.tarif-table tbody tr:last-child th, .tarif-table tbody tr:last-child td { border-bottom: 0; }
.tarif-table td { color: var(--green-800); font-variant-numeric: tabular-nums; }

.steps { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; counter-reset: s; }
.steps li span { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; background: var(--straw-500); color: var(--green-900); font-weight: 700; margin-bottom: 12px; }
.steps h3 { margin-bottom: .3em; }
.steps p { font-size: .93rem; color: var(--muted); }

.band { background: var(--green-900); color: #f0ecdf; padding: 46px 0; }
.band__in { display: flex; align-items: center; justify-content: space-between; gap: 30px; flex-wrap: wrap; }
.band h2 { color: #fff; margin-bottom: .2em; }
.band p { margin: 0; color: #cdd6cb; max-width: 62ch; }
.band .btn--primary { background: var(--straw-500); color: var(--green-900); }
.band .btn--primary:hover { background: var(--straw-400); }

/* ---------------------------------------------------------- boutique */
.shop-layout { display: grid; grid-template-columns: 268px 1fr; gap: 34px; padding-bottom: 70px; }
.filters__form { background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); padding: 20px; display: flex; flex-direction: column; gap: 16px; }
.filters__group { border: 0; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 6px; }
.filters__label { font-size: .79rem; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--green-700); margin-bottom: 2px; }
.filters__form input[type="search"], .filters__form select { width: 100%; padding: 9px 12px; border: 1px solid var(--line); border-radius: var(--radius-sm); font: inherit; font-size: .92rem; background: var(--cream); }
.radio, .check { display: flex; align-items: center; justify-content: flex-start; gap: 9px; font-size: .91rem; cursor: pointer; width: 100%; }
.radio input, .check input, .filters__form input[type="radio"], .filters__form input[type="checkbox"],
.ship-option input[type="radio"], .pay-options input[type="radio"], .check--legal input[type="checkbox"] {
  width: auto; flex: 0 0 auto; margin: 0; padding: 0; accent-color: var(--green-700);
}
.radio span, .check span { flex: 1; }
.filters__reset { font-size: .84rem; text-align: center; color: var(--muted); }
.filters__help { margin-top: 18px; padding: 18px; border-radius: var(--radius); background: var(--straw-100); border: 1px solid #ecdfc4; }
.filters__help h2 { font-size: 1.03rem; }
.filters__help p { font-size: .87rem; color: #5c5748; }
.shop-count { font-size: .85rem; color: var(--muted); margin-bottom: 18px; }
.shop-main .grid-cards { grid-template-columns: repeat(2, 1fr); }
.shop-info { margin-top: 46px; border-top: 1px solid var(--line); padding-top: 30px; }
.shop-info__cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.shop-info h3 { font-size: 1rem; margin-bottom: .3em; }
.shop-info p { font-size: .9rem; color: var(--muted); }

/* ---------------------------------------------------------- fiche produit */
.product { display: grid; grid-template-columns: 1.02fr .98fr; gap: 44px; padding: 26px 0 48px; }
.product__media { position: relative; border-radius: var(--radius); overflow: hidden; background: var(--straw-100); border: 1px solid var(--line); }
.product__media img { width: 100%; }
.product__eyebrow { font-size: .78rem; letter-spacing: .1em; text-transform: uppercase; color: var(--green-700); font-weight: 700; margin-bottom: 8px; }
.product__lead { font-size: 1.04rem; color: #444; }
.product__price { display: flex; flex-direction: column; gap: 2px; padding: 16px 0 18px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); margin-bottom: 20px; }
.product__price-ttc { font-family: var(--font-serif); font-size: 2rem; color: var(--green-900); font-weight: 600; }
.product__price-ht { font-size: .87rem; color: var(--muted); }
.product__price-unit { font-size: .82rem; color: var(--green-700); }
.buy { display: flex; gap: 12px; align-items: stretch; margin-bottom: 22px; flex-wrap: wrap; }
.qty { display: inline-flex; align-items: center; border: 1px solid var(--line); border-radius: 999px; background: var(--white); overflow: hidden; }
.qty button { width: 40px; height: 46px; border: 0; background: transparent; font-size: 1.1rem; cursor: pointer; color: var(--green-800); }
.qty button:hover { background: var(--straw-100); }
.qty input { width: 52px; height: 46px; border: 0; text-align: center; font: inherit; font-weight: 600; background: transparent; -moz-appearance: textfield; }
.qty input::-webkit-outer-spin-button, .qty input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.qty--small button { width: 30px; height: 34px; font-size: .95rem; }
.qty--small input { width: 42px; height: 34px; font-size: .9rem; }
.buy .btn { flex: 1; min-width: 210px; }
.product__reassure { list-style: none; padding: 0; margin: 0 0 20px; font-size: .89rem; color: #4a4a42; }
.product__reassure li { padding: 7px 0; border-bottom: 1px dashed var(--line); }
.product__reassure li:last-child { border-bottom: 0; }
.product__animals { display: flex; flex-wrap: wrap; gap: 7px; align-items: center; font-size: .85rem; color: var(--muted); }
.product-detail { display: grid; grid-template-columns: 1.15fr .85fr; gap: 44px; padding-bottom: 56px; }
.product-detail__specs { background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); padding: 22px; }
.specs th, .specs td { padding: 8px 0; border-bottom: 1px solid var(--line); font-size: .89rem; text-align: left; vertical-align: top; }
.specs th { width: 46%; color: var(--muted); font-weight: 500; }
.specs tr:last-child th, .specs tr:last-child td { border-bottom: 0; }
.specs__note { font-size: .82rem; color: var(--muted); margin-top: 12px; }

/* ---------------------------------------------------------- panier */
.cart-layout { display: grid; grid-template-columns: 1fr 350px; gap: 34px; padding-bottom: 70px; align-items: start; }
.cart-table table { background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.cart-table thead th { background: var(--cream); font-size: .73rem; letter-spacing: .07em; text-transform: uppercase; color: var(--muted); text-align: left; padding: 12px 16px; border-bottom: 1px solid var(--line); }
.cart-table td { padding: 16px; border-bottom: 1px solid var(--line); vertical-align: middle; font-size: .93rem; }
.cart-prod { display: flex; gap: 14px; align-items: center; }
.cart-prod img { border-radius: 8px; background: var(--straw-100); }
.cart-prod a { font-weight: 600; color: var(--ink); display: block; }
.cart-prod small { display: block; color: var(--muted); font-size: .78rem; }
.cart-prod__unit { color: var(--green-700) !important; }
.cart-actions { display: flex; justify-content: space-between; gap: 12px; margin-top: 18px; flex-wrap: wrap; }
.cart-summary { background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); padding: 24px; }
.cart-summary--sticky { position: sticky; top: 96px; }
.cart-summary h2 { font-size: 1.25rem; margin-bottom: 14px; }
.cart-summary dl { margin: 0 0 16px; }
.cart-summary dl div { display: flex; justify-content: space-between; padding: 7px 0; font-size: .92rem; }
.cart-summary dt { color: var(--muted); }
.cart-summary dd { margin: 0; font-variant-numeric: tabular-nums; }
.cart-summary__total { border-top: 1px solid var(--line); margin-top: 6px; padding-top: 12px !important; font-size: 1.1rem !important; }
.cart-summary__total dt { color: var(--ink); font-weight: 700; }
.cart-summary__total dd { font-family: var(--font-serif); font-weight: 700; color: var(--green-900); }
.cart-summary__note { font-size: .81rem; color: var(--muted); }
.cart-summary__secure { font-size: .78rem; color: var(--muted); text-align: center; margin: 12px 0 0; }
.mini-cart { list-style: none; padding: 0; margin: 0 0 16px; }
.mini-cart li { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-bottom: 1px dashed var(--line); font-size: .86rem; }
.mini-cart img { border-radius: 6px; background: var(--straw-100); }
.mini-cart__name { flex: 1; }
.mini-cart__name em { color: var(--muted); font-style: normal; font-size: .8rem; }
.mini-cart__price { font-variant-numeric: tabular-nums; }
.empty--wide { padding: 70px 0; }

/* ---------------------------------------------------------- commande */
.checkout { display: grid; grid-template-columns: 1fr 360px; gap: 34px; padding-bottom: 70px; align-items: start; }
.form-block { border: 1px solid var(--line); border-radius: var(--radius); background: var(--white); padding: 22px; margin: 0 0 20px; }
.form-block legend { font-family: var(--font-serif); font-size: 1.16rem; padding: 0 8px; display: flex; align-items: center; gap: 10px; }
.form-block legend span { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--green-800); color: #fff; font-size: .8rem; font-family: var(--font-sans); }
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 18px; }
.field { display: flex; flex-direction: column; gap: 5px; margin-bottom: 12px; }
.field--full { grid-column: 1 / -1; }
.field label, .field legend { font-size: .84rem; font-weight: 600; color: #3d3d36; }
.field input, .field select, .field textarea, .filters__form input, .contact-form input, .contact-form select, .contact-form textarea {
  width: 100%; padding: 10px 13px; border: 1px solid #d8d2c4; border-radius: var(--radius-sm);
  font: inherit; font-size: .94rem; background: var(--cream); color: var(--ink);
}
.field input:focus, .field textarea:focus, .field select:focus { outline: 2px solid var(--green-500); outline-offset: 1px; background: #fff; }
.err { color: var(--danger); font-size: .8rem; margin: 0; }
.ship-options { display: grid; gap: 10px; margin-bottom: 12px; }
.ship-option { display: flex; gap: 12px; align-items: flex-start; border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 13px 15px; cursor: pointer; background: var(--cream); }
.ship-option:has(input:checked) { border-color: var(--green-700); background: #eef5f0; }
.ship-option input { margin-top: 4px; accent-color: var(--green-700); }
.ship-option__body { display: flex; flex-direction: column; gap: 2px; }
.ship-option__body strong { font-size: .95rem; }
.ship-option__body em { font-style: normal; font-weight: 700; color: var(--green-700); font-size: .9rem; }
.ship-option__body small { color: var(--muted); font-size: .8rem; }
.pay-options { display: grid; gap: 8px; margin-bottom: 14px; }
.check--legal { font-size: .88rem; align-items: flex-start; margin-top: 12px; }
.check--legal input { margin-top: 4px; }

/* ---------------------------------------------------------- confirmation */
.thanks { background: var(--green-800); color: #eeeadb; padding: 54px 0 46px; }
.thanks__in { max-width: 720px; }
.thanks h1 { color: #fff; margin-bottom: .25em; }
.thanks__badge { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%; background: var(--straw-500); color: var(--green-900); font-size: 1.6rem; font-weight: 700; margin-bottom: 18px; }
.thanks__ref { font-size: .95rem; color: #d5dbd3; }
.thanks-grid { display: grid; grid-template-columns: 1.15fr .85fr; gap: 34px; padding: 40px 22px 70px; max-width: var(--wrap); margin: 0 auto; }
.thanks__recap h2, .thanks__side h2 { font-size: 1.2rem; }
.recap { background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.recap th, .recap td { padding: 11px 15px; border-bottom: 1px solid var(--line); text-align: left; font-size: .9rem; }
.recap thead th { background: var(--cream); font-size: .72rem; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }
.recap-totals { margin: 16px 0 0; }
.recap-totals div { display: flex; justify-content: space-between; padding: 6px 0; font-size: .92rem; }
.recap-totals dt { color: var(--muted); }
.recap-totals dd { margin: 0; }
.recap-totals__total { border-top: 1px solid var(--line); padding-top: 10px !important; font-weight: 700; }
.thanks__side { background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); padding: 24px; }
.thanks__side address { font-style: normal; font-size: .92rem; margin-bottom: 14px; }
.thanks__note { font-size: .85rem; color: var(--muted); }
.thanks__side .btn { margin-top: 8px; }

/* ---------------------------------------------------------- contact */
.contact-layout { display: grid; grid-template-columns: 1.15fr .85fr; gap: 38px; padding-bottom: 70px; }
.contact-side { background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); padding: 26px; height: fit-content; }
.contact-side h2 { font-size: 1.15rem; }
.contact-side h3 { font-size: .95rem; margin-top: 1.1em; margin-bottom: .25em; }
.contact-side address { font-style: normal; margin-bottom: 12px; }
.contact-side__lines { font-size: 1rem; font-weight: 600; }

/* ---------------------------------------------------------- pages légales */
.page-legal { display: grid; grid-template-columns: 1fr 280px; gap: 48px; padding: 10px 22px 80px; }
.page-legal__head { margin-bottom: 26px; border-bottom: 1px solid var(--line); padding-bottom: 18px; }
.page-legal__head h1 { margin-bottom: .25em; }
.page-legal__date { font-size: .82rem; color: var(--muted); margin: 0; }
.page-legal__side { position: sticky; top: 96px; align-self: start; background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); padding: 22px; }
.page-legal__side h2 { font-size: 1.02rem; margin-bottom: .7em; }
.footer-list--dark a { color: var(--green-800); font-size: .89rem; }
.footer-list--dark a.is-current { font-weight: 700; color: var(--green-900); }
.page-legal__contact { margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--line); font-size: .86rem; }
.page-legal__contact h3 { font-size: .92rem; }
.page-legal__contact p { margin-bottom: .5em; }
.legal { max-width: 78ch; padding-bottom: 20px; }
.legal h2 { font-family: var(--font-serif); }
.legal table { margin: 1em 0 1.4em; font-size: .92rem; background: var(--white); border: 1px solid var(--line); border-radius: 10px; overflow: hidden; }
.legal th, .legal td { padding: 10px 13px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
.legal thead th { background: var(--cream); font-size: .78rem; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); }
.legal ul, .legal ol { margin-bottom: 1.2em; }
.legal li { margin-bottom: .35em; }
.legal blockquote { margin: 1.2em 0; padding: 16px 20px; background: var(--straw-100); border-left: 4px solid var(--straw-500); border-radius: 8px; font-size: .92rem; }
.legal blockquote p:last-child { margin-bottom: 0; }
.legal code { background: var(--straw-100); padding: 1px 5px; border-radius: 4px; font-size: .88em; }
.legal--narrow { max-width: 78ch; }
.legal h2 { font-size: 1.28rem; margin-top: 1.8em; margin-bottom: .4em; }
.legal p { color: #3f3f38; }
.ship-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin: 10px 0 40px; }
.ship-card { background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); padding: 22px; }
.ship-card h2 { font-size: 1.1rem; }
.ship-card__price { font-family: var(--font-serif); font-size: 1.5rem; color: var(--green-800); margin-bottom: .4em; }
.ship-card p { font-size: .9rem; color: var(--muted); }
.notice { background: var(--straw-100); border: 1px solid #ecdfc4; border-radius: var(--radius); padding: 20px; margin-top: 22px; }
.notice h3 { margin-bottom: .4em; }
.notice p { font-size: .9rem; }
.two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 44px; }

/* ---------------------------------------------------------- tarifs page */
.page-head--tarifs { background: linear-gradient(180deg, #f3ecdc, var(--cream)); border-bottom: 1px solid var(--line); padding-bottom: 34px; }
.tarifs-flags { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
.tarifs-flags span { background: var(--green-800); color: #fff; font-size: .8rem; font-weight: 600; padding: 6px 14px; border-radius: 999px; }
.tarifs-h2 { margin-bottom: .5em; }
.tarifs-intro { max-width: 74ch; color: var(--muted); }
.tarifs-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-bottom: 18px; }
.tarifs-grid .tarif-table caption { font-family: var(--font-serif); font-size: 1.05rem; color: var(--ink); padding: 14px 16px 10px; }
.table-scroll { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius); background: var(--white); }
.products-table { min-width: 760px; font-size: .9rem; }
.products-table th, .products-table td { padding: 11px 14px; border-bottom: 1px solid var(--line); text-align: left; }
.products-table thead th { background: var(--green-800); color: #fff; font-size: .72rem; letter-spacing: .06em; text-transform: uppercase; font-family: var(--font-sans); }
.products-table tbody th { font-weight: 600; }
.products-table tbody th a { color: var(--ink); }
.products-table tbody tr:last-child th, .products-table tbody tr:last-child td { border-bottom: 0; }
.deflist { margin: 0; }
.deflist dt { font-weight: 700; color: var(--green-800); margin-top: 1em; }
.deflist dd { margin: .2em 0 0; color: #4a4a42; font-size: .92rem; }

/* ---------------------------------------------------------- footer */
.site-footer { background: var(--green-900); color: #cdd4c9; padding: 54px 0 22px; margin-top: auto; }
.footer-grid { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1.2fr; gap: 34px; }
.footer-h { font-family: var(--font-sans); font-size: .78rem; letter-spacing: .12em; text-transform: uppercase; color: var(--straw-400); margin-bottom: .9em; }
.footer-list { list-style: none; padding: 0; margin: 0; font-size: .9rem; }
.footer-list li { margin-bottom: .45em; }
.footer-list a { color: #dfe4d8; }
.brand--footer .brand__txt strong { color: #fff; }
.brand--footer .brand__txt small { color: #9fae9d; }
.footer-p { font-size: .9rem; color: #b9c2b5; }
.footer-p--small { font-size: .82rem; color: #98a795; }
.footer-contact a { color: #dfe4d8; }
.newsletter { display: flex; gap: 8px; margin: 12px 0 16px; }
.newsletter input { flex: 1; padding: 10px 13px; border-radius: var(--radius-sm); border: 1px solid #33513f; background: #f5f2e8; font: inherit; font-size: .9rem; }
.newsletter button { padding: 10px 16px; border-radius: var(--radius-sm); border: 0; background: var(--straw-500); color: var(--green-900); font-weight: 700; cursor: pointer; }
.footer-bottom { display: flex; justify-content: space-between; gap: 16px; border-top: 1px solid #26402f; margin-top: 38px; padding-top: 18px; font-size: .78rem; color: #8c9b89; flex-wrap: wrap; }

/* ---------------------------------------------------------- responsive */
@media (max-width: 980px) {
  .tarif-teaser, .product, .product-detail, .cart-layout, .checkout, .thanks-grid, .contact-layout, .two-col, .tarifs-grid, .page-legal { grid-template-columns: 1fr; }
  .page-legal__side { position: static; }
  .hero-facts__in { grid-template-columns: repeat(2, 1fr); }
  .slide__in { min-height: 460px; }
  .animal-grid, .strip__in, .ship-cards { grid-template-columns: repeat(2, 1fr); }
  .grid-cards, .shop-main .grid-cards { grid-template-columns: repeat(2, 1fr); }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .shop-layout { grid-template-columns: 1fr; }
  .cart-summary--sticky { position: static; }
  .steps { grid-template-columns: 1fr; }
  .shop-info__cols { grid-template-columns: 1fr; }
  .nav { display: none; }
  .nav.open { display: flex; flex-direction: column; position: absolute; top: 100%; left: 0; right: 0; background: var(--cream); padding: 18px 22px; border-bottom: 1px solid var(--line); gap: 12px; z-index: 30; }
  .burger { display: block; margin-left: auto; }
  .header-phone { display: none; }
}
@media (max-width: 620px) {
  body { font-size: 16px; }
  .animal-grid, .strip__in, .grid-cards, .shop-main .grid-cards, .ship-cards, .footer-grid, .grid-2 { grid-template-columns: 1fr; }
  .slide__in { min-height: 430px; padding-top: 40px; padding-bottom: 64px; }
  .slide__title { font-size: 1.85rem; }
  .slide__text { font-size: .95rem; }
  .slider__nav { display: none; }
  .hero-facts__in { grid-template-columns: 1fr; gap: 10px; padding: 18px 22px; }
  .section { padding: 42px 0; }
  .card__foot { flex-direction: column; align-items: stretch; }
  .cart-table thead { display: none; }
  .cart-table td { display: flex; justify-content: space-between; gap: 12px; border-bottom: 1px dashed var(--line); }
  .cart-table td::before { content: attr(data-label); font-size: .78rem; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }
  .cart-prod { flex-direction: column; align-items: flex-start; }
  .buy .btn { min-width: 0; }
}
@media print {
  .site-header, .site-footer, .announce, .band, .buy { display: none; }
}

/* ===================================================================
   UI 2026-11 — boutons d'ajout, toasts, panier latéral, paiement
   =================================================================== */

/* focus visibles et cohérents */
:where(a, button, input, select, textarea, [tabindex]):focus-visible { outline: 2px solid var(--green-500); outline-offset: 2px; }
.btn:focus-visible { outline-offset: 3px; }
.no-scroll { overflow: hidden; }

/* ---------------------------------------------------------- bouton Ajouter */
.btn { position: relative; }
.btn__icon { flex: 0 0 auto; }
.btn--add { padding: 10px 16px 10px 14px; min-width: 118px; box-shadow: 0 1px 0 rgba(22, 48, 31, .08); }
.btn--add .btn__label { transition: opacity .15s; }
.btn__count {
  position: absolute; top: -7px; right: -7px; min-width: 22px; height: 22px; padding: 0 6px;
  border-radius: 11px; background: var(--green-800); color: #fff; font-size: .72rem; font-weight: 700;
  display: grid; place-items: center; border: 2px solid #fff; transform: scale(0); transition: transform .2s cubic-bezier(.3, 1.6, .5, 1);
}
.is-in-cart .btn__count { transform: scale(1); }
.is-in-cart .btn--add { background: var(--white); border-color: var(--straw-500); color: var(--green-900); }
.is-in-cart .btn--add:hover { background: var(--straw-100); }

/* chargement : spinner à la place de l'icône, largeur stable */
.btn.is-loading { pointer-events: none; }
.btn.is-loading .btn__icon, .btn.is-loading .btn__label { opacity: 0; }
.btn.is-loading::after {
  content: ""; position: absolute; left: 50%; top: 50%; width: 18px; height: 18px; margin: -9px 0 0 -9px;
  border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: fx-spin .7s linear infinite;
}
.btn.is-added { animation: fx-pop .45s ease; }
@keyframes fx-spin { to { transform: rotate(360deg); } }
@keyframes fx-pop { 40% { transform: scale(1.06); } }

/* note « déjà dans votre panier » */
.card__incart, .product__incart {
  display: none; align-items: center; gap: 7px; margin: 12px 0 0; padding: 8px 12px;
  border-radius: var(--radius-sm); background: #eef5f0; color: var(--green-800); font-size: .82rem; font-weight: 500;
}
.card__incart svg, .product__incart svg { color: var(--green-500); flex: 0 0 auto; }
.card__incart span { flex: 1; }
.card__incart a, .product__incart a { font-weight: 700; font-size: .8rem; }
.card.is-in-cart .card__incart { display: flex; animation: fx-fade .25s ease; }
.product__incart.is-on { display: flex; margin: -8px 0 18px; animation: fx-fade .25s ease; }
.product__incart span { flex: 1; }
@keyframes fx-fade { from { opacity: 0; transform: translateY(-3px); } }

/* cartes : un peu plus de relief et d'air */
.card { box-shadow: 0 1px 2px rgba(27, 27, 23, .04); }
.card:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); }
.card.is-in-cart { border-color: #cfe1d5; }
.card__title a:hover { color: var(--green-700); text-decoration: none; }
.shop-main .grid-cards { grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }
.price__ht { white-space: nowrap; }

/* ---------------------------------------------------------- toasts */
.toasts {
  position: fixed; z-index: 90; right: 20px; bottom: 20px; display: flex; flex-direction: column; gap: 10px;
  width: min(380px, calc(100vw - 32px)); pointer-events: none;
}
.toast {
  pointer-events: auto; display: flex; align-items: center; gap: 12px; padding: 12px 12px 12px 14px;
  background: var(--green-900); color: #f3efe3; border-radius: 12px; box-shadow: 0 18px 40px -14px rgba(10, 25, 15, .55);
  animation: fx-toast-in .32s cubic-bezier(.2, .9, .3, 1.2);
}
.toast.is-leaving { animation: fx-toast-out .25s ease forwards; }
.toast--error { background: #fff; color: var(--ink); border: 1px solid #efc9bf; border-left: 4px solid var(--danger); }
.toast--info { background: #fff; color: var(--ink); border: 1px solid var(--line); border-left: 4px solid var(--straw-500); }
.toast__icon {
  flex: 0 0 auto; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center;
  background: var(--straw-500); color: var(--green-900); font-weight: 800; font-size: .85rem;
}
.toast--error .toast__icon { background: var(--danger); color: #fff; }
.toast--info .toast__icon { background: var(--straw-100); color: var(--green-800); }
.toast__img { flex: 0 0 auto; width: 52px; height: 40px; object-fit: cover; border-radius: 7px; background: var(--straw-100); }
.toast__msg { flex: 1; min-width: 0; margin: 0; font-size: .89rem; line-height: 1.35; }
.toast__msg p { margin: 0; font-weight: 600; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
p.toast__msg { font-weight: 500; }
.toast__msg small { display: block; font-size: .78rem; opacity: .78; margin-top: 2px; }
.toast__action {
  flex: 0 0 auto; background: var(--straw-500); color: var(--green-900); border: 0; border-radius: 999px;
  padding: 7px 12px; font: inherit; font-size: .78rem; font-weight: 700; cursor: pointer; white-space: nowrap;
}
.toast--info .toast__action, .toast--error .toast__action { background: var(--green-800); color: #fff; }
.toast__close { flex: 0 0 auto; background: none; border: 0; color: inherit; opacity: .6; font-size: 1.3rem; line-height: 1; cursor: pointer; padding: 2px 4px; }
.toast__close:hover { opacity: 1; }
@keyframes fx-toast-in { from { opacity: 0; transform: translateY(14px) scale(.97); } }
@keyframes fx-toast-out { to { opacity: 0; transform: translateX(30px); } }

/* ---------------------------------------------------------- panier latéral */
.drawer-backdrop { position: fixed; inset: 0; z-index: 70; background: rgba(16, 28, 20, .45); opacity: 0; transition: opacity .28s; backdrop-filter: blur(2px); }
.drawer-backdrop.is-open { opacity: 1; }
.drawer {
  position: fixed; z-index: 80; top: 0; right: 0; bottom: 0; width: min(430px, 100vw);
  background: var(--cream); display: flex; flex-direction: column; box-shadow: -24px 0 60px -30px rgba(10, 25, 15, .5);
  transform: translateX(100%); transition: transform .3s cubic-bezier(.2, .8, .2, 1);
}
.drawer.is-open { transform: none; }
.drawer[hidden], .drawer-backdrop[hidden], .drawer__foot[hidden], .drawer__empty[hidden], .drawer__free[hidden] { display: none; }
.drawer.is-busy .drawer__body { opacity: .6; pointer-events: none; }
.drawer__head { display: flex; align-items: center; justify-content: space-between; padding: 18px 20px; border-bottom: 1px solid var(--line); background: var(--white); }
.drawer__head h2 { font-size: 1.2rem; margin: 0; }
.drawer__count { color: var(--muted); font-weight: 500; font-size: .95rem; }
.drawer__close { background: var(--cream); border: 1px solid var(--line); width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; cursor: pointer; color: var(--ink); }
.drawer__close:hover { background: var(--straw-100); }
.drawer__free { padding: 12px 20px; background: var(--white); border-bottom: 1px solid var(--line); font-size: .83rem; }
.drawer__free p { margin: 0 0 7px; }
.drawer__bar { height: 6px; border-radius: 3px; background: var(--straw-100); overflow: hidden; }
.drawer__bar span { display: block; height: 100%; width: 0; background: var(--straw-500); border-radius: 3px; transition: width .4s; }
.drawer__free.is-done .drawer__bar span { background: var(--green-500); }
.drawer__body { flex: 1; overflow-y: auto; padding: 8px 20px; transition: opacity .15s; }
.drawer__items { list-style: none; margin: 0; padding: 0; }
.drawer-item { position: relative; display: flex; gap: 13px; padding: 14px 0; border-bottom: 1px solid var(--line); }
.drawer-item:last-child { border-bottom: 0; }
.drawer-item__img img { width: 72px; height: 54px; object-fit: cover; border-radius: 8px; background: var(--straw-100); }
.drawer-item__main { flex: 1; min-width: 0; padding-right: 22px; }
.drawer-item__name { display: block; font-weight: 600; font-size: .9rem; color: var(--ink); line-height: 1.3; }
.drawer-item small { display: block; color: var(--muted); font-size: .76rem; margin: 2px 0 8px; }
.drawer-item__row { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.drawer-item__price { font-size: .88rem; font-variant-numeric: tabular-nums; color: var(--green-900); }
.drawer-item .qty button { display: grid; place-items: center; }
.drawer-item .qty button:disabled { opacity: .35; cursor: not-allowed; }
.drawer-item__rm { position: absolute; top: 12px; right: 0; background: none; border: 0; color: var(--muted); font-size: 1.25rem; line-height: 1; cursor: pointer; padding: 2px 4px; border-radius: 6px; }
.drawer-item__rm:hover { color: var(--danger); background: #fbeae6; }
.drawer__empty { text-align: center; padding: 60px 10px; color: var(--muted); }
.drawer__empty svg { margin: 0 auto 10px; color: var(--straw-500); }
.drawer__foot { padding: 16px 20px 20px; background: var(--white); border-top: 1px solid var(--line); display: flex; flex-direction: column; gap: 8px; }
.drawer__totals { margin: 0 0 4px; }
.drawer__totals div { display: flex; justify-content: space-between; font-size: .88rem; padding: 3px 0; }
.drawer__totals dt { color: var(--muted); }
.drawer__totals dd { margin: 0; font-variant-numeric: tabular-nums; }
.drawer__total { font-size: 1.05rem !important; padding-top: 8px !important; margin-top: 4px; border-top: 1px solid var(--line); }
.drawer__total dt { color: var(--ink) !important; font-weight: 700; }
.drawer__total dd { font-family: var(--font-serif); font-weight: 700; color: var(--green-900); }
.drawer__note { font-size: .75rem; color: var(--muted); text-align: center; margin: 0 0 4px; }

/* ---------------------------------------------------------- checkout : paiement */
.pay-options { gap: 10px; }
.pay-option {
  display: flex; gap: 14px; align-items: flex-start; padding: 14px 16px; border: 1px solid var(--line);
  border-radius: var(--radius-sm); background: var(--cream); cursor: pointer; transition: border-color .15s, background .15s, box-shadow .15s;
}
.pay-option:hover { border-color: #cfc6b0; }
.pay-option:has(input:checked) { border-color: var(--green-700); background: #eef5f0; box-shadow: 0 0 0 1px var(--green-700) inset; }
.pay-option input { margin-top: 12px; accent-color: var(--green-700); }
.pay-option__icon { flex: 0 0 auto; width: 44px; height: 44px; border-radius: 10px; display: grid; place-items: center; background: var(--white); border: 1px solid var(--line); color: var(--green-800); }
.pay-option__body { display: flex; flex-direction: column; gap: 2px; }
.pay-option__body strong { font-size: .96rem; }
.pay-option__body small { font-size: .8rem; color: var(--muted); line-height: 1.45; }
.hint--center { text-align: center; display: flex; gap: 6px; align-items: center; justify-content: center; margin-top: 10px; }
.hint[hidden], .btn [hidden] { display: none !important; }
.checkout .btn--block .btn__label { display: inline; }

/* ---------------------------------------------------------- confirmation */
.thanks { background: radial-gradient(1200px 300px at 10% 0, #2a5843, var(--green-800)); }
.thanks__badge--wait { background: #fff; color: var(--danger); }
.thanks__pay { margin-top: 18px; }
.thanks .btn--primary { background: var(--straw-500); color: var(--green-900); }
.thanks .btn--primary:hover { background: var(--straw-400); }
.thanks .btn--ghost { border-color: rgba(255, 255, 255, .6); color: #fff; }
.thanks .btn--ghost:hover { background: #fff; color: var(--green-900); }
.pill { display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px; border-radius: 999px; font-size: .82rem; font-weight: 700; }
.pill--ok { background: #d9ecdf; color: var(--green-900); }
.bank-box { background: var(--straw-100); border: 1px solid #ecdfc4; border-radius: var(--radius-sm); padding: 14px 16px; margin: 6px 0 14px; font-size: .9rem; }
.bank-box h3 { font-size: .98rem; margin-bottom: .4em; }
.bank-box p { margin-bottom: .4em; }

/* ---------------------------------------------------------- petites finitions */
.cart-table tbody tr { transition: background .15s; }
.cart-table tbody tr:hover { background: #fdfcf8; }
.product__media { position: sticky; top: 96px; align-self: start; box-shadow: var(--shadow); }
.form-block { box-shadow: 0 1px 2px rgba(27, 27, 23, .04); }
.cart-summary { box-shadow: var(--shadow); }
.cart-link { transition: background .15s, transform .15s; }
.cart-link.is-bump { animation: fx-pop .45s ease; }

@media (max-width: 980px) {
  .product__media { position: relative; top: 0; }
}
@media (max-width: 620px) {
  .toasts { right: 16px; left: 16px; bottom: 16px; width: auto; }
  .card__foot .btn--add { width: 100%; }
  .drawer { width: 100vw; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}
/* panier ouvert : les notifications passent à gauche pour ne pas masquer ses boutons */
.no-scroll .toasts { right: auto; left: 20px; }
@media (max-width: 620px) { .no-scroll .toasts { left: 16px; right: 16px; bottom: auto; top: 16px; } }

/* ---------------------------------------------------------- vente à la tonne */
.price__ttc small, .product__price-ttc small { font-family: var(--font-sans); font-size: .72rem; font-weight: 600; color: var(--muted); letter-spacing: 0; }
.product__price-ttc small { font-size: .9rem; }
.qty { position: relative; }
.qty__unit { font-size: .8rem; font-weight: 600; color: var(--muted); margin: 0 4px 0 -8px; }
.qty input[step] { width: 58px; }
.qty--small input[step] { width: 46px; }
.buy__calc { flex-basis: 100%; margin: 2px 0 0; font-size: .9rem; color: var(--muted); }
.buy__calc strong { color: var(--green-900); font-size: 1.02rem; }
.btn--add .btn__label { white-space: nowrap; }
.btn__count { min-width: 24px; width: auto; }
.cart-table td small.muted { display: inline; margin-left: 2px; }

/* barre de résultats et filtres actifs */
.shop-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px; margin-bottom: 18px; }
.shop-bar .shop-count { margin: 0; }
.active-filters { display: flex; flex-wrap: wrap; gap: 6px; }
.active-filter { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px 4px 12px; border-radius: 999px; background: var(--green-800); color: #fff; font-size: .78rem; font-weight: 600; }
.active-filter span { opacity: .75; font-size: 1rem; line-height: 1; }
.active-filter:hover { background: var(--green-900); text-decoration: none; }
.active-filter--reset { background: transparent; color: var(--green-800); border: 1px solid var(--line); }
.active-filter--reset:hover { background: var(--straw-100); color: var(--green-900); }
.shop-main.is-loading { opacity: .55; transition: opacity .15s; pointer-events: none; }
.filters__form .radio { padding: 2px 0; }
.filters__form .radio:has(input:checked) { font-weight: 600; color: var(--green-900); }