/* ==========================================================================
   Feuille de style unique. Aucune police externe : charger une police depuis
   un serveur Google est un motif de mise en demeure documenté en Allemagne
   (LG München I, 3 O 17493/20). Pour une police propre, la self-héberger
   dans /assets/fonts et l'ajouter ici en @font-face.
   ========================================================================== */

:root {
  --ink:      #16180F;
  --ink-2:    #2C3123;
  --paper:    #FFFFFF;
  --paper-2:  #F4F5F0;
  --paper-3:  #ECEEE6;
  --line:     #D8DACE;
  --line-2:   #E7E9E1;
  --grey:     #63665A;
  --moss:     #2F5233;
  --moss-2:   #3E6B44;
  --ember:    #B4451C;
  --gold:     #A87F1F;

  /* Pied de page : bleu nuit, indépendant de --ink pour que le reste du site
     garde sa palette. Une seule ligne à changer pour revenir en arrière. */
  --foot-bg:     #16180F;
  --foot-text:   #C9CDBE;
  --foot-muted:  #99A08C;
  --foot-link:   #E7E9E1;
  --foot-link-h: #EFA783;

  --f-ui:  system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --f-num: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;

  --wrap: 78rem;
  --gap: 1.25rem;
  --r: 4px;

  /* Ombres douces : une seule famille, jamais de noir pur — sur fond clair
     une ombre noire salit, une ombre teintée reste propre. */
  --sh-1: 0 1px 2px rgba(22,24,15,.05);
  --sh-2: 0 2px 6px rgba(22,24,15,.07), 0 8px 24px rgba(22,24,15,.05);
  --sh-3: 0 12px 34px rgba(22,24,15,.13);

  --t: 160ms cubic-bezier(.2,.6,.3,1);
}

* { box-sizing: border-box; }
/* Sur écran tactile, tout ce qui se touche fait au moins 44 px : en dessous,
   on rate la cible une fois sur trois. */
@media (pointer: coarse) {
  .btn, .searchbox button, .menu-toggle, .cart-link, .nav-row > a,
  .dropdown-btn, .faq summary { min-height: 44px; display: inline-flex;
    align-items: center; justify-content: center; }
  .nav-row > a, .dropdown-btn { justify-content: flex-start; }
  input, select, textarea { font-size: 16px; }   /* évite le zoom auto d'iOS */
}
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body { margin: 0; background: var(--paper); color: var(--ink); font: 1rem/1.6 var(--f-ui); }
img { max-width: 100%; height: auto; display: block; }
a { color: var(--ink); text-underline-offset: .16em; transition: color var(--t); }
a:hover { color: var(--ember); }
::selection { background: var(--moss); color: #fff; }
:focus-visible { outline: 3px solid var(--moss); outline-offset: 2px; }

h1, h2, h3 { line-height: 1.15; letter-spacing: -.02em; margin: 0 0 .6rem; }
h1 { font-size: clamp(1.7rem, 1.2rem + 2vw, 2.5rem); font-weight: 800; }
h2 { font-size: clamp(1.25rem, 1.05rem + .8vw, 1.6rem); font-weight: 750; }
h3 { font-size: 1.02rem; font-weight: 700; }

.mono, .p-now, .p-was, td.mono, dd.mono { font-family: var(--f-num); font-variant-numeric: tabular-nums; }
.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 1.1rem; }
.wrap-narrow { max-width: 48rem; }
.band { padding: clamp(2rem, 1.2rem + 3vw, 3.5rem) 0; }
.band-alt { background: var(--paper-2); }
.r, .ta-r { text-align: right; }
.muted { display: block; color: var(--grey); font-size: .85rem; }
.small, .sub, .count, .note { color: var(--grey); font-size: .875rem; }
.eyebrow { font-size: .72rem; text-transform: uppercase; letter-spacing: .12em; color: var(--moss); font-weight: 700; margin: 0 0 .3rem; }
.lede { font-size: 1.08rem; color: var(--ink-2); }
.sr-only, .trap { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: -9999px; }
.skip:focus { left: 1rem; top: 1rem; background: var(--ink); color: #fff; padding: .6rem 1rem; z-index: 60; }
.linklike { background: none; border: 0; padding: 0; font: inherit; color: var(--grey); text-decoration: underline; cursor: pointer; }
.linklike:hover { color: var(--ember); }

/* --- Bandeau et en-tête ------------------------------------------------- */
.topbar { background: var(--ink); color: #D7DACD; font-size: .78rem; }
.topbar .wrap { display: flex; flex-wrap: wrap; gap: .3rem 1.4rem; padding-top: .45rem; padding-bottom: .45rem; }
.topbar span { position: relative; padding-left: .9rem; }
.topbar span::before { content: "·"; position: absolute; left: 0; color: var(--gold); font-weight: 700; }
@media (max-width: 46rem) { .only-wide { display: none; } }

.site-head { border-bottom: 1px solid var(--line); background: rgba(255,255,255,.96);
  backdrop-filter: saturate(140%) blur(8px); position: sticky; top: 0; z-index: 30;
  transition: box-shadow var(--t); }
.site-head.is-stuck { box-shadow: var(--sh-2); }
.head-row { display: flex; align-items: center; gap: 1rem; min-height: 4.2rem; }
.brand { display: flex; align-items: center; gap: .6rem; text-decoration: none; flex: 0 0 auto; }
.brand-mark { width: 1.7rem; height: 1.7rem; border-radius: 50%;
  background: radial-gradient(circle at 50% 50%, #fff 0 20%, var(--ink-2) 21% 100%); }
.brand-mark.light { background: radial-gradient(circle at 50% 50%, var(--ink) 0 20%, #D7DACD 21% 100%); }
.brand-name { font-weight: 800; letter-spacing: -.01em; font-size: 1.02rem; }

.searchbox { display: flex; flex: 1 1 18rem; max-width: 34rem; }
.searchbox input { flex: 1; border: 1px solid var(--line); border-right: 0; padding: .55rem .7rem;
  border-radius: var(--r) 0 0 var(--r); font: inherit; min-width: 0; }
.searchbox button { border: 1px solid var(--ink); background: var(--ink); color: #fff; padding: .55rem 1rem;
  border-radius: 0 var(--r) var(--r) 0; cursor: pointer; font: inherit; }
.searchbox button:hover { background: var(--moss); border-color: var(--moss); }
.searchbox.big { max-width: none; margin: 1rem 0; }
@media (max-width: 52rem) {
  .searchbox { order: 3; flex-basis: 100%; margin-bottom: .7rem; }
  .head-row { min-height: 3.4rem; gap: .6rem; flex-wrap: wrap; }
  .brand-name { font-size: .95rem; }
  .topbar .wrap { padding-top: .35rem; padding-bottom: .35rem; gap: .2rem .9rem; }
  .topbar { font-size: .72rem; }
  .topbar span:nth-child(n+3) { display: none; }
}

.head-actions { display: flex; align-items: center; gap: .8rem; margin-left: auto; }
.cart-link { text-decoration: none; font-weight: 650; font-size: .9rem; white-space: nowrap; }
.cart-count { display: inline-block; min-width: 1.35rem; padding: 0 .35rem; margin-left: .3rem;
  background: var(--moss); color: #fff; border-radius: 999px; text-align: center; font-size: .78rem;
  transition: transform var(--t); }
.cart-count.bump { animation: bump 420ms cubic-bezier(.2,.8,.3,1); }
@keyframes bump { 0% { transform: scale(1); } 35% { transform: scale(1.35); } 100% { transform: scale(1); } }
.menu-toggle { display: none; border: 1px solid var(--line); background: var(--paper-2); padding: .45rem .8rem;
  border-radius: var(--r); cursor: pointer; font: inherit; font-size: .85rem; }

.mainnav { border-top: 1px solid var(--line-2); background: var(--paper-2); }
.nav-row { display: flex; gap: 1.4rem; align-items: center; min-height: 2.9rem; font-size: .9rem; flex-wrap: wrap; }
.nav-row > a { text-decoration: none; color: var(--ink-2); padding: .5rem 0; border-bottom: 2px solid transparent; }
.nav-row > a:hover { border-color: var(--ember); color: var(--ink); }
.dropdown { position: relative; }
.dropdown-btn { border: 0; background: none; font: inherit; font-weight: 700; cursor: pointer; padding: .5rem 0; }
.dropdown-btn::after { content: " ▾"; color: var(--moss); }
.dropdown-panel { display: none; position: absolute; top: 100%; left: 0; z-index: 40; min-width: 20rem;
  background: var(--paper); border: 1px solid var(--line); box-shadow: 0 12px 30px rgba(0,0,0,.12); padding: .4rem; }
.dropdown.open .dropdown-panel { display: block; }
.dropdown-panel a { display: block; padding: .55rem .7rem; text-decoration: none; border-radius: var(--r); }
.dropdown-panel a:hover { background: var(--paper-2); }
.dropdown-panel strong { display: block; font-size: .92rem; }
.dropdown-panel span { display: block; font-size: .8rem; color: var(--grey); }
.dropdown-panel em { font-style: normal; font-size: .74rem; color: var(--moss); }
@media (max-width: 52rem) {
  .menu-toggle { display: inline-block; }
  .mainnav { display: none; }
  .mainnav.open { display: block; }
  .nav-row { flex-direction: column; align-items: stretch; padding-bottom: .6rem; }
  .dropdown-panel { position: static; box-shadow: none; min-width: 0; }
}

.crumbs { border-bottom: 1px solid var(--line-2); font-size: .8rem; color: var(--grey); }
.crumbs .wrap { padding-top: .6rem; padding-bottom: .6rem; display: flex; gap: .4rem; flex-wrap: wrap; }
.crumbs a { color: var(--grey); }
.flash { background: var(--moss); color: #fff; padding: .7rem 1rem; margin: 1rem 0; border-radius: var(--r); font-size: .9rem; }

/* --- Accueil ------------------------------------------------------------ */
.hero { position: relative; background: linear-gradient(180deg, var(--ink) 0%, var(--ink-2) 100%);
  color: #EDEFE6; padding: clamp(2.5rem, 1.5rem + 5vw, 5rem) 0; overflow: hidden; }

/* Avec photo : voile sombre dégradé de la gauche vers la droite. Le texte
   blanc doit rester lisible quelle que soit la photo déposée, y compris
   sur une zone claire — d'où un voile généreux côté texte. */
.hero.has-image::before { content: ""; position: absolute; inset: 0;
  background-image: var(--hero-img); background-size: cover;
  background-position: var(--hero-focus, 50% 50%); }
.hero.has-image::after { content: ""; position: absolute; inset: 0;
  background: linear-gradient(100deg, rgba(22,24,15,.94) 0%, rgba(22,24,15,.82) 42%,
                              rgba(22,24,15,.45) 72%, rgba(22,24,15,.30) 100%); }
.hero.has-image .hero-inner { position: relative; z-index: 1; }
@media (max-width: 46rem) {
  /* Sur mobile la colonne occupe toute la largeur : voile uniforme. */
  .hero.has-image::after { background: rgba(22,24,15,.86); }
}
.hero-inner { max-width: 46rem; }
.hero h1 { font-size: clamp(1.85rem, 1.15rem + 3.2vw, 3.1rem); line-height: 1.08; letter-spacing: -.03em; }
.hero .lede { max-width: 38rem; font-size: clamp(1rem, .95rem + .35vw, 1.15rem); }
.hero .eyebrow { color: var(--gold); }
.hero h1 { color: #fff; }
.hero .lede { color: #C9CDBE; }
.hero-cta { display: flex; gap: .7rem; flex-wrap: wrap; margin: 1.4rem 0; }
.hero .btn-ghost { color: #EDEFE6; border-color: rgba(255,255,255,.4); }
.hero .btn-ghost:hover { color: #fff; border-color: #fff; background: rgba(255,255,255,.08); }
.hero-stats { display: flex; gap: 0; list-style: none; padding: 0; margin: 1.8rem 0 0;
  flex-wrap: wrap; border-top: 1px solid rgba(255,255,255,.14); }
.hero-stats li { padding: .9rem 1.6rem .2rem 0; margin-right: 1.6rem;
  border-right: 1px solid rgba(255,255,255,.14); }
.hero-stats li:last-child { border-right: 0; margin-right: 0; }
.hero-stats strong { display: block; font-size: 1.45rem; font-family: var(--f-num); color: #fff; letter-spacing: -.02em; }
.hero-stats span { font-size: .74rem; color: #A9AE9C; text-transform: uppercase; letter-spacing: .08em; }
@media (max-width: 40rem) {
  .hero { padding: 2.2rem 0 2rem; }
  .hero-cta { flex-direction: column; gap: .5rem; }
  .hero-cta .btn { width: 100%; padding: .8rem 1rem; }
  .hero-stats li { padding: .7rem 1rem .2rem 0; margin-right: 1rem; }
  .hero-stats strong { font-size: 1.15rem; }
  .hero-stats span { font-size: .66rem; }
}

.usp { border-bottom: 1px solid var(--line-2); }
.usp-grid { display: grid; gap: var(--gap); grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); padding: 1.6rem 0; }
.usp-grid article { padding-left: 2.4rem; position: relative; }
/* Repère chiffré plutôt qu'un pictogramme : il se lit à toutes les tailles et
   ne dépend d'aucune police d'icônes téléchargée. */
.usp-grid article::before { counter-increment: usp; content: counter(usp, decimal-leading-zero);
  position: absolute; left: 0; top: .05rem; font-family: var(--f-num); font-size: .8rem;
  color: var(--moss); font-weight: 700; letter-spacing: -.03em; }
.usp-grid { counter-reset: usp; }
.usp-grid h2 { font-size: .95rem; font-weight: 700; margin-bottom: .2rem; }
.usp-grid p { margin: 0; font-size: .85rem; color: var(--grey); }
@media (max-width: 40rem) { .usp-grid { gap: .9rem; padding: 1.2rem 0; } }

.band-head { margin-bottom: 1.4rem; position: relative; }
.band-head .sub { margin: 0; }
.band-link { position: absolute; right: 0; top: .2rem; font-size: .85rem; }
@media (max-width: 40rem) { .band-link { position: static; display: inline-block; margin-top: .4rem; } }

/* Deux colonnes dès 22rem de large : sur mobile, une seule colonne oblige à
   faire défiler interminablement pour comparer trois articles. */
.grid-p { display: grid; gap: var(--gap); grid-template-columns: repeat(auto-fill, minmax(min(100%, 13.5rem), 1fr)); }
.grid-c { display: grid; gap: var(--gap); grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr)); }
@media (max-width: 30rem) {
  .grid-p { gap: .7rem; grid-template-columns: repeat(2, 1fr); }
  .card-body { padding: .6rem .65rem .75rem; }
  .card-body h3 { font-size: .87rem; line-height: 1.25; }
  .card-meta { font-size: .68rem; gap: .3rem; }
  .card-p .p-now { font-size: 1.02rem; }
  .card-p .p-base, .card-p .p-vat { font-size: .68rem; }
  .card-actions { flex-direction: column; gap: .3rem; }
  .card-actions .btn { width: 100%; }
}
.card-c { display: block; padding: 1.15rem 1.2rem; background: var(--paper); border: 1px solid var(--line);
  border-radius: var(--r); text-decoration: none; box-shadow: var(--sh-1); position: relative;
  transition: transform var(--t), box-shadow var(--t), border-color var(--t); }
.card-c::after { content: "→"; position: absolute; right: 1.2rem; bottom: 1.1rem; color: var(--moss);
  opacity: 0; transform: translateX(-4px); transition: opacity var(--t), transform var(--t); }
.card-c:hover { border-color: var(--moss); box-shadow: var(--sh-2); transform: translateY(-2px); }
.card-c:hover::after { opacity: 1; transform: translateX(0); }
.card-c strong { display: block; font-size: 1.02rem; }
.card-c span { display: block; font-size: .84rem; color: var(--grey); margin: .2rem 0 .5rem; }
.card-c em { font-style: normal; font-size: .78rem; color: var(--moss); font-weight: 600; }

.about .split { align-items: start; }
.service-box { background: var(--ink); color: #EDEFE6; padding: 1.5rem; border-radius: var(--r); }
.service-box h2 { color: #fff; }
.service-box .eyebrow { color: var(--gold); }

/* --- Carte produit ------------------------------------------------------ */
.card-p { display: flex; flex-direction: column; background: var(--paper); border: 1px solid var(--line);
  border-radius: var(--r); overflow: hidden; box-shadow: var(--sh-1);
  transition: transform var(--t), box-shadow var(--t), border-color var(--t); }
.card-p:hover { border-color: var(--moss); box-shadow: var(--sh-2); transform: translateY(-2px); }
.card-media { position: relative; display: block; aspect-ratio: 4 / 3; background: var(--paper-3); overflow: hidden; }
.card-media img { width: 100%; height: 100%; object-fit: cover; transition: transform 380ms cubic-bezier(.2,.6,.3,1); }
.card-p:hover .card-media img { transform: scale(1.035); }
.ph { position: absolute; inset: 0; background:
  radial-gradient(circle at 50% 45%, var(--paper-2) 0 26%, transparent 27%),
  linear-gradient(140deg, #B9BCAE 0%, #9DA394 60%, #B9BCAE 100%); }
.ph-label { position: absolute; inset: auto 0 .6rem 0; text-align: center; font-size: .72rem; color: var(--ink-2); }
.badge-sale { position: absolute; top: .55rem; left: .55rem; background: var(--ember); color: #fff;
  font-size: .74rem; font-weight: 700; padding: .2rem .5rem; border-radius: 999px;
  letter-spacing: .01em; box-shadow: var(--sh-1); }
.badge-stock { position: absolute; top: .55rem; right: .55rem; font-size: .7rem; padding: .2rem .55rem;
  border-radius: 999px; background: rgba(255,255,255,.94); backdrop-filter: blur(4px);
  box-shadow: var(--sh-1); font-weight: 600; }
.badge-stock.in::before { content: "●"; margin-right: .25rem; font-size: .6em; vertical-align: .15em; }
.badge-stock.in { color: var(--moss); }
.badge-stock.out { color: var(--ember); }

.card-body { padding: .85rem .9rem 1rem; display: flex; flex-direction: column; flex: 1; }
.card-cat { font-size: .72rem; text-transform: uppercase; letter-spacing: .07em; color: var(--moss); text-decoration: none; }
.card-body h3 { font-size: .95rem; margin: .3rem 0; }
.card-body h3 a { text-decoration: none; }
.card-p:hover .card-body h3 a { text-decoration: underline; text-decoration-thickness: 1px; }
.card-meta { margin: 0 0 .5rem; font-size: .75rem; color: var(--grey); display: flex; gap: .6rem; flex-wrap: wrap; }
.card-meta .brand { font-weight: 700; color: var(--ink-2); }
.card-price { display: flex; align-items: baseline; gap: .5rem; margin-top: auto; }
.p-now { font-size: 1.25rem; font-weight: 750; letter-spacing: -.01em; }
.p-was { color: var(--grey); font-size: .88rem; text-decoration-thickness: 1px; }
.p-base { margin: .1rem 0 0; font-size: .78rem; color: var(--grey); }   /* Grundpreis (PAngV) */
.p-vat { margin: .15rem 0 .7rem; font-size: .74rem; color: var(--grey); }
.card-actions { display: flex; gap: .4rem; }
.card-actions .btn { flex: 1; text-align: center; }

/* --- Boutons et champs -------------------------------------------------- */
.btn { display: inline-block; font: inherit; font-size: .9rem; font-weight: 650; padding: .6rem 1.1rem;
  border: 1px solid var(--ink); background: var(--ink); color: #fff; border-radius: var(--r);
  cursor: pointer; text-decoration: none; text-align: center;
  transition: background var(--t), border-color var(--t), transform var(--t), box-shadow var(--t); }
.btn:hover { background: var(--moss); border-color: var(--moss); color: #fff; box-shadow: var(--sh-1); }
.btn:active { transform: translateY(1px); box-shadow: none; }
.btn-sm { padding: .45rem .7rem; font-size: .82rem; }
.btn-lg { padding: .8rem 1.3rem; font-size: 1rem; width: 100%; }
.btn-ghost { background: transparent; color: var(--ink); border-color: var(--line); }
.btn-ghost:hover { background: var(--paper-2); color: var(--ink); border-color: var(--moss); }
.btn-final { background: var(--ember); border-color: var(--ember); }
.btn-final:hover { background: #93380F; border-color: #93380F; }
.btn[disabled], .is-disabled { opacity: .45; pointer-events: none; }

input[type=text], input[type=email], input[type=tel], input[type=number], input[type=date],
input[type=search], select, textarea {
  font: inherit; font-size: .92rem; padding: .55rem .65rem; width: 100%; border: 1px solid var(--line);
  background: var(--paper); color: var(--ink); border-radius: var(--r);
  transition: border-color var(--t), box-shadow var(--t); }
input:focus, select:focus, textarea:focus {
  border-color: var(--moss); box-shadow: 0 0 0 3px rgba(47,82,51,.13); outline: none; }
input.qty { width: 4.5rem; }
.form label { display: block; margin-bottom: .85rem; font-size: .88rem; }
.form label small { display: block; color: var(--grey); font-size: .78rem; margin-top: .2rem; }
.form fieldset { border: 1px solid var(--line-2); border-radius: var(--r); padding: 1rem 1.1rem; margin: 0 0 1.2rem; }
.form legend { padding: 0 .4rem; font-weight: 700; font-size: .95rem; }
.row2 { display: grid; gap: 0 .8rem; grid-template-columns: 1fr 1fr; }
.row-street { grid-template-columns: 3fr 1fr; }
.row-plz { grid-template-columns: 1fr 2fr; }
.check { display: flex; gap: .6rem; align-items: flex-start; margin-bottom: .7rem; font-size: .9rem; }
.check input { width: auto; margin-top: .3rem; }
.err { display: block; color: var(--ember); font-size: .78rem; margin-top: .2rem; }
.err-box { border-left: 3px solid var(--ember); background: var(--paper-2); padding: .6rem .9rem; font-size: .9rem; border-radius: var(--r); }

/* --- Catalogue ---------------------------------------------------------- */
.page-head { margin-bottom: 1.3rem; }
.cat-desc { max-width: 46rem; color: var(--ink-2); font-size: .95rem; }
.toolbar { display: flex; gap: 1rem; align-items: flex-end; flex-wrap: wrap; padding: .9rem 1rem; margin-bottom: 1.4rem;
  background: var(--paper-2); border: 1px solid var(--line-2); border-radius: var(--r); }
.toolbar label { font-size: .8rem; color: var(--grey); }
.toolbar select { min-width: 12rem; margin-top: .2rem; }
.toolbar .chk { display: flex; gap: .45rem; align-items: center; }
.toolbar .chk input { width: auto; }
.pager { display: flex; gap: 1rem; align-items: center; justify-content: center; margin-top: 2rem; font-size: .9rem; }
.empty { padding: 2rem 0; color: var(--grey); }

/* --- Fiche produit ------------------------------------------------------ */
.product-grid { display: grid; gap: clamp(1.5rem, 1rem + 3vw, 3rem); grid-template-columns: 1fr; }
@media (min-width: 58rem) { .product-grid { grid-template-columns: 1fr 1fr; align-items: start; } }
.p-main { margin: 0; aspect-ratio: 4 / 3; background: var(--paper-3); border: 1px solid var(--line);
  border-radius: var(--r); overflow: hidden; position: relative; box-shadow: var(--sh-1); }
.p-main img { width: 100%; height: 100%; object-fit: cover; }
.p-main.is-empty figcaption { position: absolute; inset: auto 0 .8rem 0; text-align: center; font-size: .8rem; color: var(--ink-2); }
.p-thumbs { display: flex; gap: .5rem; margin-top: .6rem; flex-wrap: wrap; }
.p-thumbs button { width: 4.5rem; height: 3.4rem; padding: 0; border: 1px solid var(--line); background: none;
  cursor: pointer; border-radius: var(--r); overflow: hidden; }
.p-thumbs button[aria-current] { border-color: var(--moss); border-width: 2px; }
.p-thumbs img { width: 100%; height: 100%; object-fit: cover; }
.p-cat { font-size: .75rem; text-transform: uppercase; letter-spacing: .08em; color: var(--moss); text-decoration: none; }
.p-ids { display: flex; gap: 1rem; flex-wrap: wrap; font-size: .8rem; color: var(--grey); margin: .3rem 0 .8rem; }
.p-ids .brand { font-weight: 700; color: var(--ink-2); }
.p-stock { font-size: .85rem; margin: 0 0 1rem; }
.p-stock::before { content: "●"; margin-right: .4rem; }
.p-stock.in::before, .p-stock.low::before { color: var(--moss); }
.p-stock.out::before { color: var(--ember); }
.p-stock.low { color: var(--gold); }
.p-pricebox { border: 1px solid var(--line); border-radius: var(--r); padding: 1.1rem; background: var(--paper-2); }
.p-price { display: flex; align-items: baseline; gap: .6rem; flex-wrap: wrap; }
.p-pricebox .p-now { font-size: 1.9rem; }
.p-compare-note { font-size: .74rem; color: var(--grey); margin: .2rem 0 0; }
.p-add { display: flex; gap: .7rem; align-items: flex-end; margin-top: .9rem; }
/* Sur mobile, le bouton d'achat se colle en bas de l'écran dès que le bloc
   prix sort du champ de vision : le geste d'achat reste toujours à portée
   de pouce, sans avoir à remonter. */
@media (max-width: 46rem) {
  .p-buy { padding-bottom: .5rem; }
  .p-pricebox.is-stuck .p-add { position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
    background: var(--paper); border-top: 1px solid var(--line); margin: 0;
    padding: .6rem .9rem calc(.6rem + env(safe-area-inset-bottom));
    box-shadow: 0 -6px 20px rgba(22,24,15,.12); }
  .p-pricebox.is-stuck .p-add::before { content: attr(data-price); font-weight: 750;
    font-family: var(--f-num); align-self: center; margin-right: .2rem; white-space: nowrap; }
  .p-pricebox.is-stuck .qty-label { display: none; }
  .p-pricebox.is-stuck .btn-lg { flex: 1; }
  body.has-stuck-buy .fab-btn { transform: translateY(-3.6rem); }
}
.p-add .btn-lg { width: auto; flex: 1; }
.qty-label { font-size: .78rem; color: var(--grey); }
.p-ship { margin-top: 1.3rem; border-top: 1px solid var(--line-2); padding-top: 1rem; }
.p-ship h2 { font-size: 1rem; }
.ship-line { display: flex; justify-content: space-between; gap: 1rem; margin: 0 0 .2rem; font-size: .95rem; }
.ship-err { color: var(--ember); font-size: .88rem; }
.plz-row { margin: .8rem 0; }
.plz-row label, .plz-field label { display: block; font-size: .8rem; color: var(--grey); margin-bottom: .25rem; }
.plz-field { display: flex; gap: .5rem; align-items: flex-start; flex-wrap: wrap; }
.plz-field input { width: 8rem; }
.spec-list { margin: 0; }
.spec-list > div { display: flex; justify-content: space-between; gap: 1rem; padding: .55rem .6rem;
  border-bottom: 1px solid var(--line-2); border-radius: 2px; }
.spec-list > div:nth-child(odd) { background: rgba(22,24,15,.022); }
.spec-list dt { color: var(--grey); font-size: .88rem; }
.spec-list dd { margin: 0; font-weight: 650; font-size: .9rem; }
.split { display: grid; gap: clamp(1.5rem, 1rem + 2vw, 2.5rem); grid-template-columns: 1fr; }
@media (min-width: 48rem) { .split { grid-template-columns: 1fr 1fr; } }

/* --- Panier et tunnel --------------------------------------------------- */
.cart-layout { display: grid; gap: 2rem; grid-template-columns: 1fr; }
@media (min-width: 58rem) { .cart-layout { grid-template-columns: 1.6fr 1fr; align-items: start; } }
.cart-table { width: 100%; border-collapse: collapse; margin: 1rem 0; }
.cart-table th { text-align: left; font-size: .72rem; text-transform: uppercase; letter-spacing: .07em;
  color: var(--grey); padding: .4rem 0; border-bottom: 1px solid var(--line); }
.cart-table td { padding: .8rem 0; border-bottom: 1px solid var(--line-2); vertical-align: top; }
.cart-table tfoot td { border-bottom: 0; padding: .3rem 0; }
.cart-table tfoot .total td, .summary .total { font-weight: 700; border-top: 1px solid var(--line); padding-top: .5rem; }
.c-item { display: flex; gap: .8rem; }
/* Un tableau à quatre colonnes est illisible sous 40rem : chaque ligne
   devient une carte, avec les intitulés repris en préfixe. */
@media (max-width: 40rem) {
  .cart-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .cart-table, .cart-table tbody, .cart-table tr, .cart-table td { display: block; width: 100%; }
  .cart-table tbody tr { border: 1px solid var(--line); border-radius: var(--r);
    padding: .8rem; margin-bottom: .8rem; background: var(--paper); }
  .cart-table tbody td { border: 0; padding: .25rem 0; }
  .cart-table tbody td[data-label]::before { content: attr(data-label) " · ";
    color: var(--grey); font-size: .78rem; }
  .cart-table tbody td.r { text-align: left; }
  .cart-table tfoot td { display: table-cell; }
  .c-item { flex-direction: row; }
  .cart-actions { flex-direction: column; align-items: stretch; }
  .cart-actions .btn { width: 100%; }
  .summary { position: static; }
}
.c-thumb { width: 4rem; height: 3rem; object-fit: cover; border-radius: var(--r); border: 1px solid var(--line-2); }
.cart-actions { display: flex; gap: 1rem; align-items: flex-end; flex-wrap: wrap; margin-bottom: 1.5rem; }
.summary { background: var(--paper-2); border: 1px solid var(--line); border-radius: var(--r); padding: 1.2rem; position: sticky; top: 6rem; }
.summary dl { margin: 0 0 .8rem; }
.summary dl > div { display: flex; justify-content: space-between; gap: 1rem; padding: .3rem 0; }
.summary dt { color: var(--grey); font-size: .88rem; }
.summary dd { margin: 0; }
.opt-form, .suggest { margin-top: 2rem; padding-top: 1.2rem; border-top: 1px solid var(--line-2); }
.opt-list { list-style: none; margin: 0 0 1rem; padding: 0; }
.opt-list li { padding: .6rem 0; border-bottom: 1px solid var(--line-2); }
.opt-list label { display: flex; gap: .6rem; align-items: flex-start; font-size: .9rem; }
.opt-list input[type=checkbox] { width: auto; margin-top: .3rem; }
.opt-list select, .opt-list input[type=text] { margin-top: .5rem; max-width: 22rem; }
.opt-price { font-family: var(--f-num); font-size: .85rem; margin-left: .4rem; }
.opt-help { display: block; font-size: .82rem; color: var(--grey); }
.suggest-list { list-style: none; margin: 0; padding: 0; }
.suggest-list li { display: flex; justify-content: space-between; align-items: center; gap: 1rem;
  padding: .7rem 0; border-bottom: 1px solid var(--line-2); }
.steps { display: flex; gap: 0; list-style: none; margin: 0 0 1.6rem; padding: 0;
  font-size: .78rem; color: var(--grey); counter-reset: step; }
.steps li { flex: 1; padding: 0 0 .55rem; border-bottom: 3px solid var(--line-2); position: relative; }
.steps li::before { counter-increment: step; content: counter(step); display: inline-flex;
  align-items: center; justify-content: center; width: 1.35rem; height: 1.35rem; margin-right: .45rem;
  border-radius: 50%; background: var(--line-2); color: var(--grey);
  font-family: var(--f-num); font-size: .74rem; font-weight: 700; }
.steps li[aria-current] { color: var(--ink); font-weight: 700; border-bottom-color: var(--ember); }
.steps li[aria-current]::before { background: var(--ember); color: #fff; }
@media (max-width: 40rem) {
  .steps { font-size: 0; gap: .35rem; }
  .steps li { padding-bottom: .45rem; }
  .steps li::before { margin-right: 0; }
  .steps li[aria-current] { font-size: .78rem; }
  .steps li[aria-current]::before { margin-right: .45rem; }
}

/* Formulaires : une colonne dès que la place manque. */
@media (max-width: 40rem) {
  .row2, .row-street, .row-plz { grid-template-columns: 1fr; }
  .form fieldset { padding: .9rem .8rem; }
  .btn-lg { padding: .9rem 1rem; }
  .split { gap: 1.5rem; }
  .product-grid { gap: 1.2rem; }
  .band { padding: 1.6rem 0; }
  h1 { font-size: clamp(1.5rem, 1.2rem + 2vw, 2rem); }
}
.ship-recap { background: var(--paper-2); border-left: 3px solid var(--moss); padding: .6rem .9rem;
  font-size: .9rem; border-radius: var(--r); }
.addr { font-size: .92rem; }
.final { margin-top: 2rem; }
.bank-box { background: var(--paper-2); border: 1px solid var(--line); border-left: 4px solid var(--moss);
  border-radius: var(--r); padding: 1.2rem; margin: 1.2rem 0; box-shadow: var(--sh-1); }
.bank-box h2 { font-size: 1.05rem; }
/* Copier l'IBAN d'un doigt : sur mobile, le recopier à la main est la
   première cause d'erreur de virement. */
.copy-btn { border: 1px solid var(--line); background: var(--paper); color: var(--ink);
  font: inherit; font-size: .74rem; padding: .18rem .5rem; margin-left: .5rem;
  border-radius: 999px; cursor: pointer; white-space: nowrap; }
.copy-btn:hover { border-color: var(--moss); color: var(--moss); }
.copy-btn.done { background: var(--moss); border-color: var(--moss); color: #fff; }
@media (max-width: 40rem) {
  .bank-box dl > div { flex-direction: column; align-items: flex-start; gap: .1rem; }
  .bank-box dd { font-size: 1rem; word-break: break-all; }
  .bank-box .copy-btn { margin: .25rem 0 0; }
}
.bank-box dl { margin: .6rem 0 0; }
.bank-box dl > div { display: flex; justify-content: space-between; gap: 1rem; padding: .3rem 0; border-bottom: 1px solid var(--line-2); }
.bank-box dt { color: var(--grey); font-size: .85rem; }
.bank-box dd { margin: 0; }

/* --- Prose et FAQ ------------------------------------------------------- */
.prose h2 { margin-top: 1.8rem; }
.prose h3 { margin-top: 1.4rem; }
.prose p { margin: 0 0 1rem; }
.faq { margin-top: 1.5rem; }
.faq details { border-bottom: 1px solid var(--line-2); }
.faq summary { cursor: pointer; padding: .8rem 0; font-weight: 650; }
.faq summary::marker { color: var(--ember); }
.faq p { margin: 0 0 1rem; }

/* --- Pied de page ------------------------------------------------------- */
.site-foot { background: var(--foot-bg); color: var(--foot-text); margin-top: 3rem;
             padding: 3rem 0 1.4rem; font-size: .9rem; }
.site-foot a { color: var(--foot-link); text-decoration: none; }
.site-foot a:hover { color: var(--foot-link-h); text-decoration: underline; }
.site-foot h3 { font-size: .74rem; text-transform: uppercase; letter-spacing: .13em;
                color: #fff; font-weight: 700; margin: 0 0 .9rem; }
.foot-grid { display: grid; gap: 2rem; grid-template-columns: 1fr; }
@media (min-width: 52rem) { .foot-grid { grid-template-columns: 1.7fr 1fr 1fr 1.3fr; } }

/* Logo optionnel, sans habillage : réglage shop.logo vide = nom en texte. */
.foot-logo { display: block; max-width: 15rem; height: auto; max-height: 3.4rem;
             object-fit: contain; object-position: left; margin-bottom: 1.2rem; }
.foot-brand strong { display: block; margin: .4rem 0 1.2rem; color: #fff; font-size: 1rem; }
.foot-brand > p { font-size: .88rem; line-height: 1.65; max-width: 26rem; margin: 0 0 1.4rem; }
.foot-addr { color: var(--foot-muted); line-height: 1.75; }
.foot-addr p { margin: 0; }
.foot-legal-name { color: #fff; font-weight: 700; margin: 0 0 .2rem !important; }

.plain { list-style: none; margin: 0; padding: 0; }
.plain li { padding: .28rem 0; }

/* Le retrait du contrat est une obligation légale : on lui donne le poids d'un
   bouton plutôt que celui d'une ligne de liste noyée dans les autres.
   Sélecteurs préfixés par .site-foot : sans cela, la règle « .site-foot a »
   l'emporte en spécificité et repeint le texte en gris clair sur blanc. */
.site-foot .btn-foot { display: inline-block; margin: 1.1rem 0 .9rem;
                       background: #fff; border-color: #fff; color: var(--foot-bg);
                       font-weight: 700; text-decoration: none; }
.site-foot .btn-foot:hover { background: var(--foot-link-h); border-color: var(--foot-link-h);
                             color: var(--foot-bg); text-decoration: none; }
.foot-cookie { display: block; color: var(--foot-link); text-decoration: none; }
.foot-cookie:hover { color: var(--foot-link-h); text-decoration: underline; }

.foot-note { display: flex; flex-wrap: wrap; gap: .4rem 2rem; justify-content: space-between;
             margin-top: 2.4rem; padding-top: 1.2rem;
             border-top: 1px solid rgba(255,255,255,.13); font-size: .78rem; color: var(--foot-muted); }
.foot-note p { margin: 0; }

/* --- Consentement ------------------------------------------------------- */
.consent { position: fixed; inset: auto 0 0 0; z-index: 50; padding: 1rem; }
.consent-box { max-width: 38rem; margin: 0 auto; background: var(--paper); border: 1px solid var(--ink);
  border-radius: var(--r); padding: 1.2rem 1.3rem; box-shadow: 0 12px 40px rgba(0,0,0,.22); }
.consent-box h2 { font-size: 1.05rem; }
.consent-box p { font-size: .88rem; margin: 0 0 .8rem; }
.consent-cats { margin: 0 0 1rem; }
.c-row { display: flex; gap: .6rem; align-items: flex-start; padding: .45rem 0; font-size: .85rem;
  border-bottom: 1px solid var(--line-2); }
.c-row input { width: auto; margin-top: .25rem; }
.consent-actions { display: flex; gap: .5rem; flex-wrap: wrap; }
.consent-actions .btn { flex: 1 1 auto; }

/* Apparition au défilement. Sans JavaScript, ou si l'utilisateur a demandé
   moins d'animations, tout reste visible : l'effet est un bonus, jamais une
   condition d'affichage. */
.js .reveal { opacity: 0; transform: translateY(10px);
  transition: opacity 460ms ease, transform 460ms cubic-bezier(.2,.6,.3,1); }
.js .reveal.in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; animation: none !important; }
  .js .reveal { opacity: 1 !important; transform: none !important; }
}

/* ==========================================================================
   Boutons flottants
   Contact à gauche, retour en haut à droite.

   Le piège, ici : un `gap` sur le bouton réserve de l'espace même quand
   l'intitulé est réduit à zéro, et l'icône se retrouve décentrée. On garde
   donc le bouton en grille centrée, et l'intitulé sort du flux tant qu'il
   n'est pas déplié.
   ========================================================================== */

.fab-btn {
  position: relative;
  display: grid;
  place-items: center;
  width: 3.25rem; height: 3.25rem;
  padding: 0; margin: 0;
  border: 1px solid var(--line); border-radius: 999px;
  background: var(--paper); color: var(--ink);
  box-shadow: var(--sh-2);
  cursor: pointer; text-decoration: none;
  transition: background var(--t), color var(--t), border-color var(--t),
              transform var(--t), box-shadow var(--t), opacity var(--t);
}
.fab-btn svg { width: 1.5rem; height: 1.5rem; fill: currentColor; display: block; }
.fab-btn:hover { transform: translateY(-2px); box-shadow: var(--sh-3); }
.fab-btn:active { transform: translateY(0); }

/* L'intitulé est une étiquette posée à côté du bouton, pas un contenu qui
   l'élargit : le cercle garde exactement la même taille dans tous les cas. */
.fab-label {
  position: absolute; left: calc(100% + .5rem); top: 50%;
  transform: translateY(-50%) translateX(-.35rem);
  background: var(--ink); color: #fff;
  font-size: .78rem; font-weight: 650; white-space: nowrap;
  padding: .35rem .65rem; border-radius: var(--r);
  opacity: 0; pointer-events: none;
  transition: opacity var(--t), transform var(--t);
}
.fab-label::before {
  content: ""; position: absolute; right: 100%; top: 50%;
  transform: translateY(-50%);
  border: .3rem solid transparent; border-right-color: var(--ink);
}
@media (hover: hover) and (min-width: 46rem) {
  .fab-btn:hover .fab-label,
  .fab-btn:focus-visible .fab-label { opacity: 1; transform: translateY(-50%) translateX(0); }
}
/* Sur écran tactile, l'étiquette resterait affichée après un appui : on la retire. */
@media (hover: none) { .fab-label { display: none; } }

.fab {
  position: fixed; left: 1rem; bottom: 1rem; z-index: 45;
  display: flex; flex-direction: column-reverse; gap: .65rem; align-items: flex-start;
}
.fab-wa { background: #25D366; border-color: #1FAE53; color: #fff; }
.fab-wa:hover { background: #1FAE53; color: #fff; }
.fab-mail { background: var(--ink); border-color: var(--ink); color: #fff; }
.fab-mail:hover { background: var(--moss); border-color: var(--moss); color: #fff; }

.fab-top {
  position: fixed; right: 1rem; bottom: 1rem; z-index: 45;
  opacity: 0; transform: translateY(.6rem);
}
.fab-top[hidden] { display: none; }
.fab-top.show { opacity: 1; transform: none; }
.fab-top:hover { transform: translateY(-2px); }

@media (max-width: 40rem) {
  .fab { left: .75rem; bottom: .75rem; gap: .55rem; }
  .fab-top { right: .75rem; bottom: .75rem; }
  .fab-btn { width: 3rem; height: 3rem; }
  .fab-btn svg { width: 1.4rem; height: 1.4rem; }
}

/* Le gestionnaire de consentement occupe le bas de l'écran. */
body.consent-open .fab, body.consent-open .fab-top { opacity: 0; pointer-events: none; }

/* --- Section « service » de l'accueil, plus présente -------------------- */
.service-box { position: relative; overflow: hidden; }
.service-box::after { content: ""; position: absolute; right: -3rem; top: -3rem;
  width: 10rem; height: 10rem; border-radius: 50%;
  background: radial-gradient(circle, rgba(168,127,31,.22), transparent 70%); }
.service-box > * { position: relative; z-index: 1; }

/* --- Bandeau des catégories : chiffre mis en avant ---------------------- */
.card-c em { display: inline-block; padding: .12rem .5rem; border-radius: 999px;
  background: var(--paper-2); border: 1px solid var(--line-2); }

/* --- Récapitulatif du panier : le total ressort ------------------------- */
.summary .total dt, .summary .total dd { font-size: 1.05rem; }
.summary .total dd { color: var(--ink); }

/* --- Bouton final : on le voit venir ------------------------------------ */
.btn-final { box-shadow: 0 2px 0 #7A2E0D; }
.btn-final:active { box-shadow: none; transform: translateY(2px); }

/* --- Fil d'Ariane : défilement horizontal plutôt que retour à la ligne -- */
@media (max-width: 40rem) {
  .crumbs .wrap { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
  .crumbs .wrap::-webkit-scrollbar { display: none; }
  .crumbs span, .crumbs a { white-space: nowrap; }
}

/* --- Pied de page mobile ------------------------------------------------ */
@media (max-width: 52rem) {
  .site-foot { padding: 2rem 0 5rem; }   /* place pour les boutons flottants */
  .foot-grid { gap: 1.6rem; }
  .foot-note { font-size: .74rem; gap: .5rem; }
}

/* ==========================================================================
   Accueil — vignettes de catégorie, réassurance, bandeau
   ========================================================================== */

/* --- Vignettes de catégorie -------------------------------------------- */
/* La première occupe deux colonnes : une grille strictement régulière donne
   un damier sans hiérarchie, et l'œil ne sait pas par où commencer. */
.tiles { display: grid; gap: var(--gap); grid-template-columns: repeat(2, 1fr); }
@media (min-width: 46rem) { .tiles { grid-template-columns: repeat(4, 1fr); } }
@media (min-width: 46rem) { .tile-wide { grid-column: span 2; grid-row: span 2; } }

.tile { position: relative; display: block; overflow: hidden; border-radius: var(--r);
  background: var(--ink); text-decoration: none; color: #fff; isolation: isolate;
  min-height: 11rem; box-shadow: var(--sh-1);
  transition: transform var(--t), box-shadow var(--t); }
.tile-wide { min-height: 15rem; }
@media (min-width: 46rem) { .tile-wide { min-height: 23.5rem; } }
.tile:hover { transform: translateY(-3px); box-shadow: var(--sh-3); color: #fff; }

.tile-media { position: absolute; inset: 0; }
.tile-media img { width: 100%; height: 100%; object-fit: cover;
  transition: transform 520ms cubic-bezier(.2,.6,.3,1); }
.tile:hover .tile-media img { transform: scale(1.06); }
/* Voile en dégradé : le texte doit rester lisible quelle que soit la photo
   déposée, y compris sur une zone claire. */
.tile-media::after { content: ""; position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(22,24,15,.88) 0%, rgba(22,24,15,.45) 45%, rgba(22,24,15,.12) 100%); }

.tile-body { position: relative; z-index: 1; display: flex; flex-direction: column;
  justify-content: flex-end; height: 100%; min-height: inherit; padding: 1rem 1.05rem; gap: .15rem; }
.tile-body strong { font-size: 1.05rem; letter-spacing: -.01em; line-height: 1.2; }
.tile-wide .tile-body strong { font-size: clamp(1.15rem, 1rem + 1vw, 1.7rem); }
.tile-sub { font-size: .8rem; color: #C9CDBE; }
.tile-body em { font-style: normal; font-size: .72rem; color: #EDEFE6; opacity: .8;
  text-transform: uppercase; letter-spacing: .08em; margin-top: .3rem; }
.tile-body::after { content: "→"; position: absolute; right: 1.05rem; bottom: 1rem;
  opacity: 0; transform: translateX(-.4rem); transition: opacity var(--t), transform var(--t); }
.tile:hover .tile-body::after { opacity: 1; transform: none; }
@media (max-width: 30rem) {
  .tiles { gap: .7rem; }
  .tile { min-height: 8.5rem; }
  .tile-wide { min-height: 11rem; }
  .tile-body { padding: .75rem .8rem; }
  .tile-body strong { font-size: .92rem; }
  .tile-sub { display: none; }
}

/* --- Bande de réassurance ---------------------------------------------- */
.assurance { background: var(--ink); color: #C9CDBE; padding: 1.6rem 0; }
.assurance-grid { display: grid; gap: 1.2rem; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); }
.assurance-grid div { padding-left: 1.1rem; border-left: 2px solid var(--gold); }
.assurance-grid strong { display: block; color: #fff; font-size: .9rem; margin-bottom: .15rem; }
.assurance-grid span { font-size: .8rem; line-height: 1.5; display: block; }
@media (max-width: 40rem) { .assurance { padding: 1.2rem 0; } .assurance-grid { gap: .9rem; } }

/* --- Bandeau : bouton principal plus présent --------------------------- */
.btn-hero { background: var(--ember); border-color: var(--ember); padding: .8rem 1.5rem; font-size: .95rem; }
.btn-hero:hover { background: #93380F; border-color: #93380F; }
.service-cta { display: flex; gap: .6rem; flex-wrap: wrap; }
@media (max-width: 40rem) { .service-cta .btn { width: 100%; } }

/* --- Questions fréquentes en accueil ------------------------------------ */
.band .faq details { background: var(--paper); border: 1px solid var(--line-2);
  border-radius: var(--r); margin-bottom: .5rem; padding: 0 .9rem; }
.band .faq summary { padding: .85rem 0; }
.band .faq details[open] { border-color: var(--line); box-shadow: var(--sh-1); }


/* ==========================================================================
   Menu des catégories sur deux colonnes

   Avec quatre familles, une seule colonne suffisait. À dix, le panneau
   descendait sous la ligne de flottaison : il fallait faire défiler la page
   à la molette pour atteindre les dernières entrées, sans même savoir
   qu'elles existaient.

   Deux colonnes font tenir les dix familles dans l'écran. La hauteur reste
   plafonnée par sécurité, avec défilement interne au panneau plutôt que
   défilement de la page entière.
   ========================================================================== */
.dropdown-panel{
  display:none;
  grid-template-columns:repeat(2,minmax(15rem,1fr));
  gap:.15rem .4rem;
  min-width:34rem;
  max-height:min(30rem, calc(100vh - 9rem));
  overflow-y:auto;
  overscroll-behavior:contain;
}
.dropdown.open .dropdown-panel{display:grid}
.dropdown-panel a{align-content:start}

@media (max-width:52rem){
  /* Sur téléphone le panneau s'inscrit dans le flux : une seule colonne, et
     c'est la page qui défile normalement. */
  .dropdown-panel{grid-template-columns:1fr;min-width:0;max-height:none;overflow:visible}
}

/* ==========================================================================
   Tableau des paliers de prix
   Le bois se vend au volume : afficher un prix unitaire seul n'aide pas le
   client à décider. Le tableau montre ce que coûte SON volume, et ce qu'il
   gagne en montant d'un palier.
   ========================================================================== */
.tier-table{width:100%;border-collapse:collapse;margin:1.1rem 0 .2rem;font-size:.93rem}
.tier-table caption{caption-side:top;text-align:left;font-size:.82rem;color:#6b675f;padding-bottom:.55rem}
.tier-table th{
  text-align:left;font-size:.72rem;letter-spacing:.06em;text-transform:uppercase;
  color:#6b675f;font-weight:700;padding:.4rem .5rem;border-bottom:1px solid #e2ded6;
}
.tier-table td{padding:.55rem .5rem;border-bottom:1px solid #efece6;vertical-align:middle}
.tier-table .ta-r{text-align:right}
.tier-table .qty{font-weight:600}
.tier-table .unit s{color:#9a958c;font-weight:400;margin-right:.35rem;font-size:.85em}
.tier-table .unit b{font-size:1.02rem}
.tier-table .eco{color:#3f7d3f;font-weight:600}
.tier-table tr.is-best{background:#fbf7ee}
.tier-table tr.is-picked{background:#f3efe4;outline:1px solid #d9d2c2}
.tag-best{
  display:inline-block;margin-left:.4rem;padding:.1rem .45rem;border-radius:999px;
  background:#1B1F1A;color:#fff;font-size:.64rem;font-weight:700;letter-spacing:.04em;
  text-transform:uppercase;vertical-align:middle;
}
.p-unit{font-size:1rem;color:#6b675f;font-weight:500;margin-left:.15rem}
.p-min{margin:.5rem 0 0;font-size:.82rem;color:#6b675f}
@media (max-width:560px){
  .tier-table{font-size:.86rem}
  .tier-table th:nth-child(2),.tier-table td:nth-child(2){display:none}
  .tier-table caption{font-size:.78rem}
}
/* Le bloc prix est centré : le tableau, lui, se lit en colonnes alignées. */
.p-pricebox .tier-table,
.p-pricebox .tier-table caption,
.p-pricebox .tier-table th,
.p-pricebox .tier-table td{text-align:left}
.p-pricebox .tier-table .ta-r{text-align:right}
.tier-table .qty{white-space:nowrap}
.tag-best{margin-left:.45rem}
.p-degressif{margin:.15rem 0 .35rem;font-size:.88rem;color:#3f7d3f}
.p-lot{margin:.1rem 0 .3rem;font-size:.84rem;color:#6b675f;line-height:1.35}
.p-lot-unit{display:block;font-size:.82rem;color:#8a857c}
.p-price .p-unit{font-size:.95rem;color:#6b675f;font-weight:500;margin-left:.3rem}

/* ---- Pages de secteur -------------------------------------------------- */
.zone-facts{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(11rem,1fr));gap:.8rem;
  margin:1.6rem 0 2rem;
}
.zone-facts div{
  background:var(--paper-2);border:1px solid var(--line);border-radius:var(--r);
  padding:.9rem 1rem;
}
.zone-facts strong{display:block;font-size:1.35rem;line-height:1.2}
.zone-facts span{font-size:.78rem;color:var(--grey)}
.zone-list{
  list-style:none;padding:0;margin:.6rem 0 1.8rem;
  display:grid;grid-template-columns:repeat(auto-fill,minmax(14rem,1fr));gap:.2rem .8rem;
}
.zone-list a{display:flex;justify-content:space-between;gap:.6rem;padding:.4rem .55rem;
  text-decoration:none;border-radius:var(--r)}
.zone-list a:hover{background:var(--paper-2)}
.zone-cta{display:flex;gap:.7rem;flex-wrap:wrap;margin-top:2rem}
.breadcrumb{font-size:.82rem;color:var(--grey);margin-bottom:1rem}
.breadcrumb a{color:var(--grey)}

/* ==========================================================================
   FINITIONS
   --------------------------------------------------------------------------
   Ajouts en fin de feuille, après les règles d'origine : ils les complètent
   sans rien réécrire, ce qui garde la révision lisible et permet de tout
   retirer d'un bloc si besoin. Aucune police externe, conformément à l'en-tête.
   ========================================================================== */

/* ---- Accessibilité : où est le focus au clavier -------------------------
   Le contour par défaut disparaissait sur les fonds sombres du bandeau et du
   pied de page : on ne savait plus où on se trouvait en naviguant au clavier. */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 2px solid var(--ember);
  outline-offset: 2px;
  border-radius: 2px;
}
.hero :focus-visible,
.site-foot :focus-visible,
.topbar :focus-visible { outline-color: #F0A57F; }

/* Le lien d'évitement était hors écran mais réapparaissait sans style. */
.skip:focus-visible {
  position: fixed; top: .6rem; left: .6rem; z-index: 100;
  background: var(--ink); color: #fff; padding: .6rem 1rem;
  border-radius: var(--r); box-shadow: var(--sh-3); text-decoration: none;
}

/* ---- Pages de secteur ---------------------------------------------------
   Ces 96 pages avaient été ajoutées après coup et gardaient une mise en forme
   plus sèche que le reste du site. Elles reçoivent le même traitement que les
   autres blocs : cartes ombrées, hiérarchie de titres, listes lisibles. */
.zone-facts div {
  background: var(--paper);
  box-shadow: var(--sh-1);
  transition: box-shadow var(--t), transform var(--t);
}
.zone-facts div:hover { box-shadow: var(--sh-2); transform: translateY(-1px); }
.zone-facts strong {
  font-family: var(--f-num);
  letter-spacing: -.02em;
  color: var(--moss);
}
.zone-facts span {
  text-transform: uppercase;
  letter-spacing: .06em;
  font-size: .7rem;
}

/* La liste des départements se lisait comme un bloc gris compact. Une puce
   discrète et un survol franc rendent la colonne parcourable. */
.zone-list a {
  border: 1px solid transparent;
  transition: background var(--t), border-color var(--t);
}
.zone-list a:hover { border-color: var(--line); }
.zone-list .muted {
  font-family: var(--f-num);
  font-size: .78rem;
  color: var(--grey);
}

/* Les intertitres des pages de secteur n'avaient aucun repère visuel : sur une
   page de huit paragraphes, l'œil ne trouvait plus les points d'entrée. */
.section h2 {
  margin: 2.2rem 0 .7rem;
  font-size: clamp(1.15rem, 1.05rem + .5vw, 1.45rem);
  letter-spacing: -.02em;
  padding-left: .7rem;
  border-left: 3px solid var(--ember);
}
.section .lead {
  font-size: clamp(1rem, .96rem + .3vw, 1.12rem);
  color: var(--ink-2);
  max-width: 46rem;
}

/* ---- Pages de contenu (mentions légales, CGV, à propos) -----------------
   Texte juridique long : la largeur de ligne comptait plus que tout. */
.prose { max-width: 42rem; }
.prose h2 {
  font-size: 1.25rem;
  letter-spacing: -.02em;
  padding-bottom: .4rem;
  border-bottom: 1px solid var(--line-2);
}
.prose p { color: var(--ink-2); }
.prose strong { color: var(--ink); }
.prose a { color: var(--moss); text-decoration-thickness: 1px; }
.prose a:hover { color: var(--ember); }
.prose ul, .prose ol { padding-left: 1.2rem; margin: 0 0 1rem; }
.prose li { margin-bottom: .35rem; }
.prose table { width: 100%; border-collapse: collapse; margin: 1rem 0; font-size: .92rem; }
.prose th, .prose td { text-align: left; padding: .5rem .6rem; border-bottom: 1px solid var(--line-2); }

/* ---- Formulaires : champ affiché sans être modifiable ------------------- */
.field-static {
  margin: .9rem 0 0;
  padding: .55rem .75rem;
  background: var(--paper-2);
  border: 1px solid var(--line);
  border-radius: var(--r);
  font-size: .9rem;
  color: var(--grey);
}
.field-static strong { color: var(--ink); }

/* ---- Message d'erreur : il passait inaperçu en haut de formulaire ------- */
.err-box {
  border-left: 3px solid var(--ember);
  background: #FCF2ED;
  padding: .7rem .9rem;
  border-radius: var(--r);
}

/* ---- Questions fréquentes : le chevron manquait ------------------------- */
.faq summary { list-style: none; padding-right: 1.8rem; position: relative; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "";
  position: absolute; right: .3rem; top: 50%;
  width: .5rem; height: .5rem;
  border-right: 2px solid var(--ember);
  border-bottom: 2px solid var(--ember);
  transform: translateY(-70%) rotate(45deg);
  transition: transform var(--t);
}
.faq details[open] summary::after { transform: translateY(-20%) rotate(-135deg); }
.faq details[open] summary { color: var(--moss); }

/* ---- Impression : une commande ou des CGV finissent souvent sur papier --- */
@media print {
  .topbar, .site-head, .site-foot, .fab, .fab-btn, .consent,
  .crumbs, .breadcrumb, .hero-cta, .zone-cta, .searchbox { display: none !important; }
  body { background: #fff; color: #000; font-size: 11pt; }
  .wrap { max-width: none; padding: 0; }
  a { text-decoration: none; color: #000; }
  /* L'adresse d'un lien se perd à l'impression : on la restitue. */
  .prose a[href^="http"]::after { content: " (" attr(href) ")"; font-size: .85em; color: #555; }
  .section h2 { border: 0; padding-left: 0; break-after: avoid; }
  table { break-inside: avoid; }
}

/* ---- Mouvement réduit : respecter le réglage système -------------------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}

/* ==========================================================================
   FINITIONS — seconde passe
   ========================================================================== */

/* ---- Bandeau : profondeur et lisibilité --------------------------------- */
.hero.has-image::after { background: linear-gradient(180deg, rgba(22,24,15,.25) 0%, rgba(22,24,15,.72) 100%); }
.hero-stats strong { text-shadow: 0 1px 2px rgba(0,0,0,.25); }

/* Le bouton principal manquait de présence sur la photo du bandeau. */
.btn-hero { box-shadow: 0 4px 14px rgba(22,24,15,.28); }
.btn-hero:hover { transform: translateY(-1px); box-shadow: 0 6px 18px rgba(22,24,15,.34); }

/* ---- Cartes produit ----------------------------------------------------- */
.grid-p > * { transition: transform var(--t), box-shadow var(--t); }
.grid-p > *:hover { transform: translateY(-2px); }

/* ---- Bandes d'arguments ------------------------------------------------- */
.usp-grid article, .assurance-grid > div { position: relative; padding-left: 1rem; }
.usp-grid article::before, .assurance-grid > div::before {
  content: ""; position: absolute; left: 0; top: .25rem; bottom: .25rem;
  width: 2px; background: var(--gold); border-radius: 2px; opacity: .55;
}

/* ---- Titres de bande ---------------------------------------------------- */
.band-head h2 { letter-spacing: -.025em; }
.band-head .eyebrow { color: var(--ember); font-weight: 600; letter-spacing: .1em; }

/* ---- Tableaux du panier et du récapitulatif ----------------------------- */
.cart-table { border-radius: var(--r); overflow: hidden; }
.cart-table tfoot tr.total td { font-size: 1.05rem; border-top: 2px solid var(--ink); }

/* ---- Boutons désactivés : l'état doit se voir ---------------------------- */
.btn[disabled], .btn[aria-disabled="true"] {
  opacity: .5; cursor: not-allowed; pointer-events: none; box-shadow: none;
}

/* ---- Étapes du tunnel --------------------------------------------------- */
.steps li[aria-current] { font-weight: 650; color: var(--ink); }
.steps li[aria-current]::after { background: var(--ember); }

/* ---- Sélection de texte aux couleurs du site ---------------------------- */
::selection { background: rgba(180,69,28,.18); }

/* ---- Chargement des images : éviter le saut de mise en page ------------- */
.tile-media img, .grid-p img { background: var(--paper-3); }

/* ==========================================================================
   FINITIONS — troisième passe
   ========================================================================== */

/* ---- Boutons secondaires : ils étaient quasi invisibles ----------------
   .btn-ghost portait `border-color: var(--line)` — soit #D8DACE, une ligne
   plus claire que le fond crème sur lequel elle se posait. Le bouton
   n'existait visuellement qu'au survol. Sur mobile, où il n'y a pas de
   survol du tout, il ne se voyait jamais : un visiteur au doigt n'avait
   aucun moyen de deviner qu'il s'agissait d'un bouton.

   Contour plus franc, léger fond, et un état net au survol. Le contraste du
   texte sur fond passe au-delà du seuil AA de la norme d'accessibilité. */
.btn-ghost {
  background: var(--paper-2);
  color: var(--ink);
  border-color: #A9AE9C;
  box-shadow: inset 0 -1px 0 rgba(22,24,15,.05);
}
.btn-ghost:hover,
.btn-ghost:focus-visible {
  background: var(--ink);
  color: #fff;
  border-color: var(--ink);
}
/* Sur les fonds sombres, l'inverse : contour clair bien présent. */
.hero .btn-ghost, .band-dark .btn-ghost, .site-foot .btn-ghost {
  background: rgba(255,255,255,.07);
  color: #EDEFE6;
  border-color: rgba(255,255,255,.55);
  box-shadow: none;
}
.hero .btn-ghost:hover, .band-dark .btn-ghost:hover, .site-foot .btn-ghost:hover {
  background: #fff; color: var(--ink); border-color: #fff;
}

/* ---- Lien d'en-tête de bande : il ne ressemblait pas à un lien --------- */
.band-link {
  font-weight: 600;
  color: var(--moss);
  text-decoration: none;
  border-bottom: 1.5px solid var(--gold);
  padding-bottom: 1px;
  white-space: nowrap;
}
.band-link::after { content: " →"; }
.band-link:hover { color: var(--ember); border-bottom-color: var(--ember); }

/* ---- Bouton en pied de bande ------------------------------------------
   Le lien discret en haut à droite d'une section ne se voit qu'après avoir
   parcouru toute la grille. Le visiteur qui arrive au bout d'une rangée de
   produits n'a alors plus rien à cliquer. Un bouton en fin de bande le
   rattrape au moment exact où il se demande « et le reste ? ». */
.band-cta {
  display: flex;
  justify-content: center;
  margin-top: 1.8rem;
}
.band-cta .btn {
  min-width: 16rem;
  padding: .75rem 1.6rem;
  font-size: .95rem;
}
@media (max-width: 30rem) { .band-cta .btn { width: 100%; min-width: 0; } }

/* ---- Champs de formulaire : même problème de contour ------------------- */
input[type=text], input[type=email], input[type=tel], input[type=number],
input[type=date], input[type=search], select, textarea { border-color: #B9BEAD; }
input:focus, select:focus, textarea:focus {
  border-color: var(--moss); box-shadow: 0 0 0 3px rgba(47,82,51,.15); outline: none;
}

/* ---- Cartes produit : un peu plus de présence -------------------------- */
.card-p, .grid-p > article, .grid-p > a {
  border-color: var(--line);
  box-shadow: var(--sh-1);
}
.grid-p > *:hover { box-shadow: var(--sh-2); border-color: #BFC4B3; }

/* ---- Badge de promotion ------------------------------------------------ */
.tag.sale, .badge-sale {
  background: var(--ember); color: #fff; font-weight: 700;
  letter-spacing: .02em; box-shadow: 0 1px 3px rgba(180,69,28,.3);
}

/* ---- Séparateur de bande ----------------------------------------------- */
.band + .band { border-top: 1px solid var(--line-2); }
.band-alt { background: var(--paper-2); }

/* ---- Pied de page : hiérarchie ---------------------------------------- */
.site-foot h3, .site-foot strong { letter-spacing: .01em; }
.site-foot a:hover { color: #F0A57F; }

/* ---- Bouton flottant WhatsApp ------------------------------------------ */
.fab-btn { box-shadow: 0 4px 16px rgba(22,24,15,.28); transition: transform var(--t), box-shadow var(--t); }
.fab-btn:hover { transform: translateY(-2px); box-shadow: 0 8px 22px rgba(22,24,15,.34); }

/* ---- Titres de section : un filet discret ------------------------------ */
.band-head h2 { position: relative; }
.band-head .eyebrow { display: inline-block; margin-bottom: .35rem; }

/* ==========================================================================
   COMPLÉMENT — dans la palette d'origine
   ==========================================================================
   L'ancienne feuille est intégralement conservée au-dessus. Ce bloc n'ajoute
   que les règles réclamées par le balisage apparu depuis : le bon de
   livraison du bandeau, les caractéristiques des cartes, la facture.

   Sans lui, ces éléments s'affichent en liste de définitions par défaut —
   libellé sur une ligne, valeur indentée en dessous. C'est ce qui donnait
   « Humidité » puis « < 8 % » sur deux lignes.

   Aucune couleur, aucune police, aucun espacement existant n'est modifié :
   tout est écrit avec les variables déjà déclarées plus haut (--ink, --moss,
   --ember, --line…). Le site garde exactement son apparence actuelle.
   ========================================================================== */

/* --- Bon de livraison du bandeau ----------------------------------------- */
.docket {
  background: var(--paper); border: 1px solid var(--line);
  border-radius: var(--r); box-shadow: var(--sh-2);
  max-width: 25rem; overflow: hidden;
}
.docket-head {
  background: var(--paper-3); color: var(--ink);
  padding: .6rem .95rem; font-size: .82rem; font-weight: 600;
  display: flex; justify-content: space-between; gap: 1rem;
  border-bottom: 1px solid var(--line);
}
.docket-head span:last-child { font-weight: 400; color: var(--grey); }
.docket dl { margin: 0; padding: .2rem .95rem .6rem; }
/* Une seule ligne par valeur : c'est tout l'objet du correctif. */
.docket div {
  display: flex; flex-wrap: nowrap; align-items: baseline;
  gap: .5rem; padding: .5rem 0; border-bottom: 1px solid var(--line-2);
}
.docket div:last-child { border-bottom: 0; }
.docket dt {
  color: var(--grey); font-size: .84rem; white-space: nowrap;
  min-width: 0; overflow: hidden; text-overflow: ellipsis; flex: 0 1 auto;
}
.docket div::after {
  content: ""; flex: 1 1 auto; min-width: .8rem; order: 1;
  align-self: center; height: 0; border-bottom: 1px dotted var(--line);
}
.docket dd {
  margin: 0; order: 2; flex: 0 0 auto;
  font-family: var(--f-num); font-size: 1.05rem;
  color: var(--ink); text-align: right; white-space: nowrap;
}
.docket dd em { font-style: normal; font-size: .8rem; color: var(--grey); }
.docket-foot {
  padding: .6rem .95rem .75rem; border-top: 1px solid var(--line);
  background: var(--paper-2); font-size: .8rem; color: var(--grey);
}

/* --- Caractéristiques des cartes, sur une ligne, séparées par | ---------- */
.card-specs {
  margin: 0 0 .6rem; padding: .4rem 0;
  border-top: 1px solid var(--line-2); border-bottom: 1px solid var(--line-2);
  display: flex; flex-wrap: wrap; align-items: baseline;
  gap: .2rem 0; font-size: .82rem; line-height: 1.45;
}
.card-specs div { display: inline-flex; align-items: baseline; gap: .32rem; white-space: nowrap; }
.card-specs div + div { padding-left: .55rem; margin-left: .5rem; border-left: 1px solid var(--line); }
.card-specs dt { color: var(--grey); }
.card-specs dd { margin: 0; font-family: var(--f-num); font-size: .9rem; color: var(--ink); }

/* --- Facture -------------------------------------------------------------- */
.facture {
  background: var(--paper); border: 1px solid var(--line);
  border-radius: var(--r); padding: 1.8rem; max-width: 46rem; margin: 0 auto;
}
.fact-head {
  display: grid; gap: 1.6rem; align-items: start;
  padding-bottom: 1.2rem; margin-bottom: 1.4rem; border-bottom: 2px solid var(--ink);
}
@media (min-width: 40rem) { .fact-head { grid-template-columns: 1fr auto; } }
.fact-vendeur { font-size: 1.2rem; font-weight: 700; display: block; margin-bottom: .4rem; }
.fact-head .addr { margin: 0 0 .5rem; font-size: .88rem; line-height: 1.55; }
.fact-ids { margin: 0; font-size: .8rem; color: var(--grey); line-height: 1.6; }
.fact-meta h1 { font-size: 1.5rem; margin-bottom: .5rem; }
@media (min-width: 40rem) { .fact-meta, .fact-meta h1 { text-align: right; } }
.fact-meta dl { margin: 0; }
.fact-meta div { display: flex; gap: .8rem; justify-content: space-between; padding: .18rem 0; font-size: .84rem; }
.fact-meta dt { color: var(--grey); white-space: nowrap; }
.fact-meta dd { margin: 0; font-family: var(--f-num); white-space: nowrap; }
.fact-parties { display: grid; gap: 1.4rem; margin-bottom: 1.6rem; }
@media (min-width: 40rem) { .fact-parties { grid-template-columns: 1fr 1fr; } }
.fact-parties h2 { font-size: .8rem; font-weight: 600; color: var(--grey); margin-bottom: .3rem; }
.fact-parties .addr { margin: 0; font-size: .9rem; line-height: 1.55; }
.fact-table { width: 100%; border-collapse: collapse; font-size: .9rem; margin-bottom: 1.2rem; }
.fact-table th {
  text-align: left; font-size: .78rem; font-weight: 600; color: var(--grey);
  padding: .45rem .5rem; background: var(--paper-2); border-bottom: 1px solid var(--ink);
}
.fact-table td { padding: .55rem .5rem; border-bottom: 1px solid var(--line-2); vertical-align: top; }
.fact-table td.r, .fact-table th.r { text-align: right; white-space: nowrap; }
.fact-totaux { margin-left: auto; max-width: 22rem; }
.fact-foot { margin-top: 1.6rem; padding-top: 1rem; border-top: 1px solid var(--line); font-size: .85rem; color: var(--ink-2); }
.fact-foot p { margin: .3rem 0; }
@media print {
  .no-print { display: none !important; }
  .facture { border: 0; padding: 0; max-width: none; }
  .fact-table thead { display: table-header-group; }
  .fact-table tr { break-inside: avoid; }
}

/* --- Deux classes apparues avec les nouvelles pages ---------------------- */
.product { padding-top: 2rem; }
.fab-mail { background: var(--ink); border-color: var(--ink); }
.fab-mail:hover { background: var(--ember); border-color: var(--ember); }

/* --- Six classes que l'ancienne feuille ne déclarait pas non plus ---------
   Elles étaient déjà employées par les gabarits d'origine sans règle
   correspondante : le rendu retombait sur les valeurs par défaut du
   navigateur. Ajoutées ici pour que plus rien ne dépende du hasard. */
.grid, .cards { display: grid; gap: var(--gap); grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr)); }
.add-form { display: contents; }          /* le bouton s'aligne avec « Détails » */
.p-media { position: sticky; top: 5.5rem; }
@media (max-width: 58rem) { .p-media { position: static; } }
.fab-left { left: 1rem; }
.sku { font-variant-numeric: tabular-nums; }

/* --- Les chiffres du dépôt, en une ligne sous les boutons ------------------
   Les barres verticales sont de VRAIS caractères dans le HTML, pas des
   bordures CSS : la ligne reste lisible même si cette feuille n'est pas
   encore arrivée au navigateur. Ce qui suit ne fait qu'espacer et
   hiérarchiser. Le bandeau d'origine est sombre, d'où les teintes claires. */
.hero-facts {
  display: flex; flex-wrap: wrap; align-items: baseline;
  gap: .35rem .55rem; margin: 1.5rem 0 .6rem;
  padding-top: 1.1rem; border-top: 1px solid rgba(255,255,255,.14);
  font-size: .92rem; line-height: 1.5; color: #C9CDBE;
}
.hero-facts-lead { color: var(--gold); font-weight: 600; }
.hero-facts .sep { color: rgba(255,255,255,.28); }
.hero-facts .fact { white-space: nowrap; }
.hero-facts .fact-k { color: #A9AE9C; }
.hero-facts .fact-v { color: #fff; font-family: var(--f-num); }
.hero-note { margin: 0; font-size: .82rem; color: #A9AE9C; max-width: 46rem; }
@media (max-width: 40rem) { .hero-facts { font-size: .86rem; gap: .25rem .45rem; } }

/* ==========================================================================
   PHOTOS PRODUIT : DÉZOOM ET FOND BLANC
   ==========================================================================
   Deux réglages qui vont ensemble.

   1. LE DÉZOOM
      `object-fit: cover` remplissait le cadre en recadrant au centre : sur un
      poêle photographié en pied, on perdait le socle et le départ du conduit.
      `contain` fait entrer l'image entière, quel que soit son format.

   2. LE FOND
      Le cadre était en --paper-3 (#ECEEE6, gris-vert clair). Tant que l'image
      remplissait tout, ce fond ne se voyait pas. Depuis le dézoom, il apparaît
      autour de chaque photo — et sur les visuels détourés sur blanc, cela
      dessine un rectangle blanc posé sur un fond gris. L'effet est celui d'une
      erreur de montage.

      Le cadre passe donc en blanc franc. Un visuel détouré se fond dedans, une
      photo d'ambiance garde simplement une marge blanche propre.

   Ce bloc arrive après la feuille d'origine et la surcharge sans la modifier :
   supprimez-le pour revenir en arrière.
   ========================================================================== */

/* --- Fiche produit -------------------------------------------------------- */
.p-main { background: #fff; }
.p-main img { object-fit: contain; padding: 1rem; background: #fff; }
.p-thumbs img { object-fit: contain; background: #fff; padding: .2rem; }

/* --- Cartes du catalogue, de l'accueil et des articles liés ---------------- */
.card-media { background: #fff; }
.card-media img { object-fit: contain; padding: .5rem; background: #fff; }
/* Le zoom au survol recadrait de nouveau ce que le dézoom vient de montrer. */
.card-p:hover .card-media img, .card-media:hover img { transform: none; }

/* --- Vignettes de famille et miniatures du panier -------------------------- */
.tile-media { background: #fff; }
.tile-media img { object-fit: contain; padding: .6rem; background: #fff; }
.c-thumb { object-fit: contain; background: #fff; }

/* --------------------------------------------------------------------------
   PLEIN CADRE SAUF LES POÊLES — ACTIVÉ
   --------------------------------------------------------------------------
   C'est la variante que vous aviez proposée, maintenant en service.

   LE RAISONNEMENT
   Le bois, les granulés et les briquettes sont photographiés en situation :
   un tas, une palette, un camion qui décharge. Ces photos n'ont pas de sujet
   détouré, elles gagnent à remplir le cadre, et un recadrage au centre ne
   perd rien d'important.

   Les appareils, eux, sont détourés sur fond blanc et photographiés en pied.
   Recadrés, ils perdent leur socle, leur départ de conduit ou leur pied —
   c'est-à-dire précisément ce qu'on regarde avant de dépenser 1 500 €.

   Le repère est l'attribut data-cat, posé sur la carte et sur la fiche.
   Ajouter une famille d'appareils demain : ajoutez son slug à la liste.

   La hauteur des cartes ne bouge pas : le cadre garde son rapport 4/3 dans
   les deux cas, donc la grille reste alignée d'une carte à l'autre.
   -------------------------------------------------------------------------- */

/* Par défaut : plein cadre, avec le léger zoom au survol d'origine. */
.card-media { background: var(--paper-3); }
.card-media img { object-fit: cover; padding: 0; background: transparent; }
.card-p:hover .card-media img { transform: scale(1.035); }
.tile-media { background: var(--paper-3); }
.tile-media img { object-fit: cover; padding: 0; }

/* Exception : les appareils, vus en entier sur fond blanc. */
.card-p[data-cat="poeles-bois"] .card-media,
.card-p[data-cat="poeles-granules"] .card-media,
.card-p[data-cat="chaudieres"] .card-media,
.card-p[data-cat="outillage"] .card-media { background: #fff; }

.card-p[data-cat="poeles-bois"] .card-media img,
.card-p[data-cat="poeles-granules"] .card-media img,
.card-p[data-cat="chaudieres"] .card-media img,
.card-p[data-cat="outillage"] .card-media img {
  object-fit: contain; padding: .5rem; background: #fff;
}
.card-p[data-cat="poeles-bois"]:hover .card-media img,
.card-p[data-cat="poeles-granules"]:hover .card-media img,
.card-p[data-cat="chaudieres"]:hover .card-media img,
.card-p[data-cat="outillage"]:hover .card-media img { transform: none; }

/* Fiche produit : même règle, pilotée par data-cat sur la section. */
.product .p-main { background: var(--paper-3); }
.product .p-main img { object-fit: cover; padding: 0; }
.product[data-cat="poeles-bois"] .p-main,
.product[data-cat="poeles-granules"] .p-main,
.product[data-cat="chaudieres"] .p-main,
.product[data-cat="outillage"] .p-main { background: #fff; }
.product[data-cat="poeles-bois"] .p-main img,
.product[data-cat="poeles-granules"] .p-main img,
.product[data-cat="chaudieres"] .p-main img,
.product[data-cat="outillage"] .p-main img { object-fit: contain; padding: 1rem; }

/* Les vignettes secondaires et le panier restent en contenu entier : trop
   petites pour qu'un recadrage apporte quoi que ce soit. */
.p-thumbs img { object-fit: contain; background: #fff; padding: .2rem; }
.c-thumb { object-fit: contain; background: #fff; }


/* ==========================================================================
   AFFICHAGE SUR TÉLÉPHONE
   ==========================================================================
   La moitié des visiteurs d'une boutique de bois de chauffage arrive depuis un
   téléphone, souvent en 4G dans une cour. Ce bloc reprend les points qui
   gênaient réellement la lecture et l'achat.
   ========================================================================== */

@media (max-width: 46rem) {

  /* La ligne de chiffres du bandeau : elle tenait sur une ligne en grand
     écran et se cassait n'importe où en petit. Les barres de séparation
     disparaissent et chaque couple passe sur sa propre ligne, ce qui reste
     lisible au lieu d'être un pavé de texte. */
  .hero-facts { gap: .1rem 0; flex-direction: column; align-items: flex-start; }
  .hero-facts .sep { display: none; }
  .hero-facts .fact { display: flex; width: 100%; justify-content: space-between; gap: 1rem; }
  .hero-facts-lead { margin-bottom: .3rem; }

  /* Le bandeau occupait presque tout l'écran avant qu'on voie un produit. */
  .hero { padding: 1.8rem 0 1.6rem; }
  .hero .lede { font-size: .98rem; }

  /* Les caractéristiques des cartes : les barres verticales entre trois
     couples serrés devenaient illisibles sur 360 px de large. */
  .card-specs { flex-direction: column; gap: .1rem 0; font-size: .8rem; }
  .card-specs div + div { border-left: 0; padding-left: 0; margin-left: 0; }
  .card-specs div { width: 100%; justify-content: space-between; }

  /* Deux colonnes de cartes restent lisibles ; le bouton d'ajout doit rester
     atteignable au pouce, donc pleine largeur plutôt que côte à côte. */
  .card-actions { flex-direction: column; }
  .card-actions .btn { width: 100%; }

  /* Tableaux : un tableau de prix ou de zones débordait latéralement et
     poussait toute la page vers la droite. Il défile maintenant tout seul. */
  .prose table, .tier-table, .fact-table, .cart-table { display: block; overflow-x: auto; }

  /* Le pied de page empilait ses cinq colonnes sur un écran de long. */
  .foot-grid { gap: 1.4rem; }
  .site-foot { font-size: .86rem; }
}

@media (max-width: 30rem) {
  /* Sous 480 px, deux cartes côte à côte ne laissent plus la place au prix. */
  .grid-p { grid-template-columns: 1fr; }
  .hero h1 { font-size: 1.6rem; }
}

/* Un tableau qui défile doit le dire : sans cette ombre, rien n'indique
   qu'il reste du contenu à droite. */
@media (max-width: 46rem) {
  .prose table, .tier-table, .fact-table, .cart-table {
    background:
      linear-gradient(90deg, #fff 30%, rgba(255,255,255,0)) left / 2rem 100% no-repeat,
      linear-gradient(270deg, #fff 30%, rgba(255,255,255,0)) right / 2rem 100% no-repeat,
      radial-gradient(farthest-side at 0 50%, rgba(22,24,15,.14), transparent) left / .7rem 100% no-repeat,
      radial-gradient(farthest-side at 100% 50%, rgba(22,24,15,.14), transparent) right / .7rem 100% no-repeat;
    background-attachment: local, local, scroll, scroll;
  }
}

/* ==========================================================================
   AVIS CLIENTS
   ==========================================================================
   Les étoiles sont un caractère typographique, pas une police d'icônes ni une
   image : rien à charger, rien à déclarer côté RGPD, et l'affichage reste
   correct si le réseau tombe en route. */

.stars { letter-spacing: .05em; white-space: nowrap; }
.stars .star { color: var(--line); }
.stars .star.on { color: var(--gold); }

.avis {
  padding: 1.1rem 0; border-bottom: 1px solid var(--line-2);
}
.avis:last-of-type { border-bottom: 0; }
.avis-head {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: .4rem .7rem;
  margin-bottom: .35rem; font-size: .92rem;
}
.avis-head .muted { display: inline; font-size: .85rem; }
/* La mention « achat vérifié » n'est pas décorative : c'est elle qui distingue
   un avis contrôlé d'un commentaire anonyme, et la loi impose de l'indiquer. */
.avis-verif {
  font-size: .74rem; color: var(--moss); border: 1px solid var(--moss);
  border-radius: var(--r); padding: .05rem .4rem; white-space: nowrap;
}
.avis h3 { font-size: 1rem; margin: 0 0 .25rem; }
.avis p { margin: 0 0 .4rem; max-width: 68ch; }
.avis-date { font-size: .78rem; color: var(--grey); }
.avis-reply {
  margin-top: .6rem; padding: .7rem .9rem;
  background: var(--paper-2); border-left: 3px solid var(--moss);
  border-radius: 0 var(--r) var(--r) 0;
}
.avis-reply strong { display: block; font-size: .85rem; margin-bottom: .2rem; }
.avis-reply p { margin: 0; font-size: .9rem; }
.avis-legal {
  margin-top: 1.6rem; padding-top: 1rem; border-top: 1px solid var(--line);
  font-size: .78rem; color: var(--grey); line-height: 1.6; max-width: 72ch;
}

/* --- Formulaire de dépôt -------------------------------------------------- */
.avis-item {
  border: 1px solid var(--line); border-radius: var(--r);
  padding: 1rem 1.1rem; margin: 0 0 1.2rem; background: var(--paper);
}
.avis-item legend { font-weight: 600; padding: 0 .4rem; }

/* Notation en étoiles cliquables. Les boutons radio sont posés en ordre
   DÉCROISSANT dans le HTML : c'est ce qui permet, avec le sélecteur ~, de
   colorer une étoile et toutes celles placées avant elle, sans une ligne de
   JavaScript. Le clavier fonctionne, et la note reste lisible sans CSS. */
.rating-input { display: inline-flex; flex-direction: row-reverse; gap: .1rem; margin-bottom: .8rem; }
.rating-input input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.rating-input label {
  font-size: 1.9rem; line-height: 1; color: var(--line);
  cursor: pointer; padding: 0 .05rem; transition: color var(--t);
}
.rating-input input:checked ~ label,
.rating-input label:hover, .rating-input label:hover ~ label { color: var(--gold); }
.rating-input input:focus-visible + label { outline: 2px solid var(--moss); outline-offset: 2px; }

/* ==========================================================================
   AUTOCOMPLÉTION DE LA RECHERCHE
   ==========================================================================
   La liste se superpose au contenu : elle ne doit pas décaler la page à
   chaque frappe. Elle sort donc du flux, ancrée sous le champ.

   Le formulaire passe en position: relative — c'est le seul ajout qui touche
   un élément existant, et il est sans effet visible tant que la liste est
   fermée. */

.searchbox { position: relative; }

.suggest {
  position: absolute; top: calc(100% + 4px); left: 0; right: 0; z-index: 60;
  background: var(--paper); border: 1px solid var(--line);
  border-radius: var(--r); box-shadow: var(--sh-3);
  max-height: min(70vh, 30rem); overflow-y: auto;
  overscroll-behavior: contain;   /* la page ne défile pas derrière la liste */
}
.suggest[hidden] { display: none; }

.suggest a {
  display: flex; align-items: center; gap: .7rem;
  padding: .5rem .7rem; text-decoration: none; color: var(--ink);
  border-bottom: 1px solid var(--line-2);
}
.suggest a:last-child { border-bottom: 0; }
/* Survol souris ET sélection clavier traités ensemble : sans cela, la flèche
   bas déplace un surlignage invisible et on ne sait plus où on en est. */
.suggest a:hover, .suggest a[aria-selected="true"] { background: var(--paper-2); }
.suggest a[aria-selected="true"] { box-shadow: inset 3px 0 0 var(--moss); }

.suggest-img {
  flex: 0 0 auto; width: 3rem; height: 2.3rem;
  background: #fff; border: 1px solid var(--line-2); border-radius: var(--r);
  overflow: hidden; display: block;
}
.suggest-img img { width: 100%; height: 100%; object-fit: contain; }

.suggest-txt { flex: 1 1 auto; min-width: 0; display: block; }
.suggest-txt strong { display: block; font-size: .92rem; font-weight: 600;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.suggest-txt span { display: block; font-size: .76rem; color: var(--grey); }
.suggest-price { flex: 0 0 auto; font-family: var(--f-num); font-size: .88rem; white-space: nowrap; }

/* Le fragment tapé, mis en évidence dans chaque proposition. */
.suggest mark { background: none; color: var(--ember); font-weight: 700; }

.suggest-cat { justify-content: space-between; background: var(--paper-2); font-weight: 600; font-size: .9rem; }
.suggest-cat em { font-style: normal; font-size: .78rem; color: var(--grey); font-weight: 400; }

.suggest-all { justify-content: center; font-size: .86rem; color: var(--moss); font-weight: 600; }
.suggest-empty { margin: 0; padding: .9rem .8rem; font-size: .88rem; color: var(--grey); text-align: center; }

/* Pendant l'attente de la réponse : un trait animé dans le champ, discret.
   Pas de roue qui tourne — la réponse arrive en général en moins de 100 ms,
   et une roue qui apparaît puis disparaît aussitôt donne une impression de
   saccade. */
.searchbox.is-loading input { background-image:
  linear-gradient(90deg, transparent, var(--moss), transparent);
  background-size: 40% 2px; background-repeat: no-repeat;
  background-position: -40% 100%;
  animation: suggest-load 900ms linear infinite; }
@keyframes suggest-load { to { background-position: 140% 100%; } }
@media (prefers-reduced-motion: reduce) { .searchbox.is-loading input { animation: none; } }

@media (max-width: 52rem) {
  /* Sur téléphone, la barre occupe toute la largeur : la liste aussi. */
  .suggest { max-height: 60vh; }
  .suggest-price { display: none; }   /* la place manque, le prix est sur la fiche */
}

/* --- Description de la fiche produit -------------------------------------
   Elle était rendue dans un <p> alors qu'elle contient déjà ses propres
   paragraphes : cela produisait un <p> dans un <p>, que le navigateur
   referme tout seul n'importe où. C'est maintenant un <div>. */
.p-desc { max-width: 68ch; }
.p-desc p { margin: 0 0 .8rem; }
.p-desc ul, .p-desc ol { margin: 0 0 .8rem; padding-left: 1.2rem; }
.p-desc li { margin-bottom: .25rem; }
.p-desc h2, .p-desc h3, .p-desc h4 { margin-top: 1.2rem; }

/* ==========================================================================
   BANDE D'AVIS QUI DÉFILE — bas de l'accueil
   ==========================================================================
   Pas de bibliothèque de carrousel. Le défilement est natif : scroll-snap sur
   l'axe horizontal. Conséquences concrètes —

     · le geste tactile fonctionne tel quel sur téléphone, avec l'inertie du
       système, ce qu'aucun carrousel en JavaScript ne reproduit vraiment ;
     · la molette horizontale et le pavé tactile marchent ;
     · si le JavaScript ne se charge pas, la bande reste parcourable à la main
       — les flèches sont un supplément, pas le mécanisme ;
     · le clavier fonctionne : la piste est focusable, flèches gauche/droite.

   La barre de défilement est masquée pour que ça ne ressemble pas à un
   débordement accidentel, mais l'ombre portée sur les bords indique qu'il
   reste du contenu de chaque côté.
   ========================================================================== */

.avis-bande .band-head { align-items: center; }

.avis-piste {
  display: flex; gap: 1rem;
  overflow-x: auto; overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory; scroll-behavior: smooth;
  padding: .25rem .25rem 1rem;
  margin: 0 -.25rem;
  scrollbar-width: none;                 /* Firefox */
  -ms-overflow-style: none;
}
.avis-piste::-webkit-scrollbar { display: none; }
.avis-piste:focus-visible { outline: 2px solid var(--moss); outline-offset: 4px; border-radius: var(--r); }

.avis-carte {
  scroll-snap-align: start;
  flex: 0 0 min(88%, 22rem);
  display: flex; flex-direction: column;
  background: var(--paper); border: 1px solid var(--line);
  border-radius: var(--r); padding: 1.1rem 1.15rem;
  box-shadow: var(--sh-1);
}
.avis-carte .stars { font-size: 1.02rem; margin-bottom: .5rem; }
.avis-carte h3 { font-size: 1rem; margin: 0 0 .35rem; line-height: 1.3; }

/* Le texte est tronqué à six lignes : sans cela, un avis bavard fait une
   carte deux fois plus haute que ses voisines et la bande devient bancale.
   L'avis complet reste lisible sur la fiche produit. */
.avis-texte {
  margin: 0 0 .8rem; font-size: .92rem; line-height: 1.55; color: var(--ink-2);
  display: -webkit-box; -webkit-line-clamp: 6; -webkit-box-orient: vertical;
  overflow: hidden;
}
.avis-carte-reponse {
  margin: 0 0 .8rem; padding: .6rem .75rem; font-size: .84rem; line-height: 1.5;
  background: var(--paper-2); border-left: 3px solid var(--moss);
  border-radius: 0 var(--r) var(--r) 0; color: var(--ink-2);
}
.avis-carte-reponse strong { display: block; color: var(--ink); margin-bottom: .15rem; }

.avis-carte footer {
  margin-top: auto; padding-top: .7rem; border-top: 1px solid var(--line-2);
  font-size: .82rem; display: flex; flex-wrap: wrap; gap: .15rem .6rem; align-items: baseline;
}
.avis-carte footer strong { font-weight: 600; }
.avis-carte footer .muted { display: inline; font-size: .8rem; }
/* Le lien vers l'article : la bande devient un point d'entrée au catalogue
   plutôt qu'un simple bandeau de compliments. */
.avis-carte footer a {
  flex-basis: 100%; font-size: .8rem; color: var(--moss);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

.avis-nav { display: flex; gap: .4rem; flex: 0 0 auto; }
.avis-arrow {
  width: 2.4rem; height: 2.4rem; font-size: 1.5rem; line-height: 1;
  cursor: pointer; background: var(--paper); color: var(--ink);
  border: 1px solid var(--line); border-radius: var(--r);
  transition: background 150ms, border-color 150ms;
}
.avis-arrow:hover { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.avis-arrow[disabled] { opacity: .35; cursor: default; background: var(--paper); color: var(--ink); }

@media (max-width: 52rem) {
  /* Sur écran tactile on fait glisser : les flèches ne servent à rien et
     mangent de la place dans l'en-tête. */
  .avis-nav { display: none; }
  .avis-carte { flex-basis: min(86%, 20rem); }
}
@media (prefers-reduced-motion: reduce) { .avis-piste { scroll-behavior: auto; } }

/* ===========================================================================
   ===========================================================================
   AJOUTS DE LA MISE À JOUR UX — octobre 2026
   ===========================================================================
   ===========================================================================

   Tout ce qui suit est ajouté à la fin du fichier, sans toucher une ligne de
   ce qui précède. C'est volontaire : vous pouvez supprimer ce bloc entier et
   le site retrouve exactement son apparence actuelle.

   Les couleurs reprennent les variables déjà déclarées en tête de fichier.
   Aucune valeur n'est écrite en dur : changer --moss ou --ember en haut suffit
   à repeindre ces blocs aussi.
   =========================================================================== */


/* ---------------------------------------------------------------------------
   BADGE « MEILLEURE VENTE »
   ---------------------------------------------------------------------------
   Il se pose en haut à gauche, à l'endroit où se trouve déjà le badge de
   remise. Quand les deux sont présents, la remise descend : c'est le badge de
   vente qui prend la position haute, parce qu'il répond à la question posée en
   premier (« lequel prendre ») avant celle du prix.

   Vert mousse et non rouge braise : le rouge est réservé à la promotion sur
   tout le site. Deux pastilles rouges côte à côte, on ne lit plus ni l'une ni
   l'autre.
   --------------------------------------------------------------------------- */
.badge-top {
  position: absolute; top: .55rem; left: .55rem; z-index: 2;
  background: var(--moss); color: #fff;
  font-size: .72rem; font-weight: 700; letter-spacing: .02em;
  padding: .22rem .55rem; border-radius: 999px; box-shadow: var(--sh-1);
}
/* Quand les deux cohabitent, la remise glisse sous le badge de vente. */
.badge-top ~ .badge-sale { top: 2.3rem; }


/* ---------------------------------------------------------------------------
   PRIX AU STÈRE SOUS LE PRIX DU LOT
   ---------------------------------------------------------------------------
   Discret mais lisible : c'est une information de comparaison, pas une
   information d'achat. Le prix qu'on paie reste celui du dessus, en gros.
   --------------------------------------------------------------------------- */
.p-stere {
  margin: .1rem 0 .35rem; font-size: .82rem; color: var(--ink-2);
}
.p-stere strong { font-weight: 700; color: var(--ink); }


/* ---------------------------------------------------------------------------
   BANDE DES MEILLEURES VENTES
   ---------------------------------------------------------------------------
   Un filet vert sur le haut de la bande, rien de plus. Elle est déjà la
   première après le bandeau : elle n'a pas besoin d'un fond coloré en plus
   pour se signaler, et un deuxième aplat juste sous le héros alourdirait le
   haut de page.
   --------------------------------------------------------------------------- */
.band-top { border-top: 3px solid var(--moss); }


/* ---------------------------------------------------------------------------
   BANDE DES FEUILLUS
   ---------------------------------------------------------------------------
   Les essences pures en pied de bande : une liste, pas des cartes. Quatre
   cartes de plus feraient douze vignettes d'affilée sur la même page, et la
   douzième n'est plus regardée par personne.
   --------------------------------------------------------------------------- */
.band-feuillus { background: var(--paper-3); }

.pures {
  margin-top: 1.6rem; padding-top: 1.3rem;
  border-top: 1px solid var(--line);
}
.pures-lead { margin: 0 0 .8rem; font-size: .95rem; color: var(--ink-2); }
.pures-lead strong { color: var(--ink); }

.pures-liste {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: .5rem;
  grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
}
.pures-liste a {
  display: flex; justify-content: space-between; align-items: baseline; gap: .6rem;
  padding: .6rem .8rem; text-decoration: none;
  background: var(--paper); border: 1px solid var(--line); border-radius: var(--r);
  transition: border-color var(--t), background var(--t);
}
.pures-liste a:hover { border-color: var(--moss); background: #fff; }
.pures-nom  { font-size: .88rem; font-weight: 600; }
.pures-prix { font-size: .82rem; color: var(--moss); font-weight: 700; white-space: nowrap; }


/* ---------------------------------------------------------------------------
   BANDE D'AVIS — COMPLÉMENTS
   ---------------------------------------------------------------------------
   Le mécanisme de défilement existait déjà et n'est pas touché. Trois
   ajouts seulement : la mention légale, la date sur chaque carte, et la
   jauge de progression.
   --------------------------------------------------------------------------- */

/* La mention de vérification des avis. Grise et petite, mais présente :
   l'article L111-7-2 impose qu'elle soit lisible, pas qu'elle crie. */
.avis-mention {
  margin: .5rem 0 0; font-size: .8rem; line-height: 1.5;
  color: var(--grey, var(--ink-2)); max-width: 46rem;
}

/* La date, poussée à droite du nom et de la ville. */
.avis-quand { font-size: .78rem; color: var(--grey, var(--ink-2)); margin-left: auto; }

/* La jauge : largeur de la piste, remplie par le script au prorata du
   défilement. Sans JavaScript elle reste vide et ne dit rien de faux. */
.avis-jauge {
  height: 3px; background: var(--line); border-radius: 999px;
  overflow: hidden; margin: .2rem 0 1rem;
}
.avis-jauge span {
  display: block; height: 100%; width: 0;
  background: var(--moss); border-radius: 999px;
  transition: width 180ms linear;
}

/* --------------------------------------------------------------------------
   LES FLÈCHES SUR PETIT ÉCRAN
   --------------------------------------------------------------------------
   Elles étaient masquées sous 52rem. Elles reviennent, mais sous la piste
   plutôt que dans l'en-tête : en haut elles mangeaient la place du titre,
   en bas elles tombent sous le pouce.

   Cette règle ANNULE le « display: none » déclaré plus haut dans le fichier.
   Elle doit donc rester APRÈS lui — c'est la raison pour laquelle tout ce
   bloc est en fin de feuille et non au milieu.
   -------------------------------------------------------------------------- */
@media (max-width: 52rem) {
  .avis-bande .band-head { flex-wrap: wrap; }
  .avis-nav {
    display: flex;
    order: 3; width: 100%;
    justify-content: flex-end; gap: .5rem;
    margin-top: -.4rem;
  }
  .avis-arrow { width: 2.9rem; height: 2.9rem; font-size: 1.7rem; }
}

/* Le défilement automatique respecte le réglage système. Quand le visiteur a
   demandé moins d'animations, le script le voit aussi et ne démarre pas : la
   règle ci-dessous n'est qu'une seconde sécurité. */
@media (prefers-reduced-motion: reduce) {
  .avis-jauge span { transition: none; }
}

/* ===========================================================================
   ===========================================================================
   FILTRES DU CATALOGUE — ajout d'octobre 2026
   ===========================================================================
   ===========================================================================

   UN SEUL BALISAGE, DEUX PRÉSENTATIONS. Il n'y a pas de version « mobile »
   du gabarit : c'est cette feuille qui décide, et le point de bascule est à
   60rem (environ 960 px).

       sous 60rem   -> panneau replié derrière un bouton « Filtrer », qui
                       s'ouvre par-dessus la page, avec le bouton « Voir les
                       résultats » collé en bas, sous le pouce.

       au-delà      -> colonne de gauche, toujours dépliée, qui défile avec
                       la page puis se fixe (position: sticky).

   L'ORDRE DES RÈGLES COMPTE. Le téléphone est écrit EN PREMIER, sans
   media query, et l'ordinateur vient ensuite en min-width. C'est l'inverse
   qui est tentant et qui coûte cher : en partant du grand écran, le petit
   hérite de règles qu'il faut ensuite annuler une par une, et on en oublie
   toujours une.
   =========================================================================== */

/* ---------------------------------------------------------------------------
   LA GRILLE
   --------------------------------------------------------------------------- */
.catalogue { display: grid; gap: 1.5rem; grid-template-columns: 1fr; }

/* ---------------------------------------------------------------------------
   TÉLÉPHONE — le panneau est un tiroir
   --------------------------------------------------------------------------- */
.filtres-bouton {
  display: flex; align-items: center; justify-content: center; gap: .5rem;
  width: 100%; margin-bottom: 1rem; padding: .85rem 1rem;
  font: inherit; font-weight: 600; cursor: pointer;
  background: var(--paper); color: var(--ink);
  border: 1px solid var(--line); border-radius: var(--r);
}
.filtres-bouton:hover { border-color: var(--moss); }
.filtres-pastille {
  min-width: 1.5rem; padding: .05rem .4rem; border-radius: 999px;
  background: var(--moss); color: #fff; font-size: .78rem; font-weight: 700;
}

/* Replié par défaut. `hidden` seul ne suffirait pas : un conteneur en grid ou
   flex réaffiche un élément masqué par l'attribut, d'où le !important. */
.filtres[hidden] { display: none !important; }

.filtres {
  position: fixed; inset: 0; z-index: 60;
  display: flex; flex-direction: column;
  background: var(--paper);
  overflow-y: auto;
  /* Le tiroir occupe tout l'écran, barres système comprises : sans ces
     marges, le bouton du bas passe sous la barre de navigation du téléphone
     et devient intouchable. */
  padding: env(safe-area-inset-top, 0) 1rem calc(1rem + env(safe-area-inset-bottom, 0));
}

.filtres-tete {
  position: sticky; top: 0; z-index: 2;
  display: flex; align-items: center; justify-content: space-between;
  padding: 1rem 0 .75rem; margin-bottom: .5rem;
  background: var(--paper); border-bottom: 1px solid var(--line);
}
.filtres-tete h2 { margin: 0; font-size: 1.05rem; }
.filtres-croix {
  width: 2.5rem; height: 2.5rem; font-size: 1.6rem; line-height: 1;
  background: none; border: 0; color: var(--ink); cursor: pointer;
}

/* ---------------------------------------------------------------------------
   LES GROUPES DÉPLIABLES
   ---------------------------------------------------------------------------
   <details> natif : ouverture au clavier, annonce correcte par les lecteurs
   d'écran, et fonctionne sans JavaScript. Le script n'ajoute que le confort.
   --------------------------------------------------------------------------- */
.filtres-bloc { border-bottom: 1px solid var(--line); }
.filtres-bloc > summary {
  display: flex; align-items: center; justify-content: space-between;
  padding: .9rem .2rem; cursor: pointer; font-weight: 600; list-style: none;
}
.filtres-bloc > summary::-webkit-details-marker { display: none; }
.filtres-bloc > summary::after {
  content: '+'; font-size: 1.25rem; color: var(--grey); line-height: 1;
}
.filtres-bloc[open] > summary::after { content: '–'; }
.filtres-corps { padding: 0 .2rem 1rem; display: grid; gap: .1rem; }
.filtres-aide { margin: 0 0 .5rem; font-size: .8rem; color: var(--grey); line-height: 1.45; }

/* Les lignes de choix. La zone cliquable fait toute la largeur et 2,75rem de
   haut : en dessous, on rate la case une fois sur trois au pouce. */
.filtres-corps .rad,
.filtres-corps .chk {
  display: flex; align-items: center; gap: .6rem;
  min-height: 2.75rem; padding: .25rem .4rem;
  border-radius: calc(var(--r) / 1.5); cursor: pointer;
}
.filtres-corps .rad:hover,
.filtres-corps .chk:hover { background: var(--paper-2); }
.filtres-corps .rad span,
.filtres-corps .chk span { flex: 1; font-size: .92rem; }
.filtres-corps .rad em {
  font-style: normal; font-size: .78rem; color: var(--grey);
  background: var(--paper-2); padding: .1rem .45rem; border-radius: 999px;
}

.filtres-tri { width: 100%; margin-top: .5rem; }

.curseur { display: block; }
.curseur input[type=range] { width: 100%; }
.curseur output { display: block; margin-top: .4rem; font-size: .85rem; font-weight: 600; }

/* ---------------------------------------------------------------------------
   LES FILTRES RETENUS
   --------------------------------------------------------------------------- */
.filtres-actifs { padding: .75rem 0; border-bottom: 1px solid var(--line); }
.filtres-actifs-titre { margin: 0 0 .5rem; font-size: .78rem; color: var(--grey); text-transform: uppercase; letter-spacing: .04em; }
.filtres-actifs ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .4rem; }
.filtres-actifs a {
  display: inline-flex; align-items: center; gap: .4rem;
  padding: .3rem .6rem; font-size: .82rem; text-decoration: none;
  background: var(--moss); color: #fff; border-radius: 999px;
}
.filtres-actifs a span { font-size: 1rem; line-height: 1; opacity: .8; }
.filtres-actifs a:hover span { opacity: 1; }
.filtres-vider { display: inline-block; margin-top: .6rem; font-size: .82rem; color: var(--grey); }

/* Le bouton de validation reste visible en bas du tiroir, quoi qu'il arrive :
   un panneau de filtres dont il faut remonter pour valider est un panneau
   qu'on abandonne. */
.filtres-pied {
  position: sticky; bottom: 0; z-index: 2;
  margin-top: auto; padding: .85rem 0 .2rem;
  background: var(--paper); border-top: 1px solid var(--line);
}
.btn-block { display: block; width: 100%; text-align: center; }
.filtres-nb { opacity: .8; font-weight: 400; }

.catalogue-liste .count { margin: 0 0 1rem; }
.catalogue-liste .empty { margin: 2rem 0 1rem; }

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

/* ---------------------------------------------------------------------------
   ORDINATEUR — le tiroir redevient une colonne
   ---------------------------------------------------------------------------
   Tout ce qui précède est annulé ici : plus de position fixe, plus de bouton
   d'ouverture, plus d'en-tête de tiroir. Le panneau reprend sa place dans le
   flux de la page.
   --------------------------------------------------------------------------- */
@media (min-width: 60rem) {
  .catalogue { grid-template-columns: 17rem 1fr; gap: 2rem; align-items: start; }

  .filtres-bouton,
  .filtres-tete { display: none; }

  /* Le panneau est toujours visible : on neutralise l'attribut hidden que le
     script pose pour le téléphone, sinon un simple redimensionnement de
     fenêtre ferait disparaître les filtres sans moyen de les rouvrir. */
  .filtres,
  .filtres[hidden] {
    display: block !important;
    position: sticky; top: 1.5rem; inset: auto;
    padding: 0; overflow: visible;
    background: none; max-height: calc(100vh - 3rem); overflow-y: auto;
  }

  .filtres-pied { position: static; border-top: 0; padding-top: 1rem; }
  .filtres-bloc > summary { padding: .75rem .2rem; }
  .filtres-corps .rad,
  .filtres-corps .chk { min-height: 2.1rem; }
}

/* Au-delà de 80rem la colonne respire un peu plus, sans jamais dépasser
   18rem : un panneau de filtres plus large n'est pas plus lisible, il
   prend juste la place des produits. */
@media (min-width: 80rem) {
  .catalogue { grid-template-columns: 18rem 1fr; gap: 2.5rem; }
}

/* Quand le tiroir est ouvert sur téléphone, la page derrière ne défile plus :
   sans cela, on croit faire défiler les filtres et c'est le catalogue qui
   bouge dessous. */
body.filtres-ouverts { overflow: hidden; }