/* ============================================================
   Boutique Pickleball - Maquette
   Design tokens
   ============================================================ */
:root {
  --teal: #0F4C42;
  --teal-deep: #0B3A33;
  --optic: #D6F84C;
  --optic-deep: #BCE22B;
  --ink: #15201B;
  --paper: #F3F5F2;
  --mint: #DCE7DF;
  --white: #FFFFFF;
  --coral: #FF6A3D;
  --line: rgba(21, 32, 27, 0.12);
  --muted: #5A6B62;

  --font-display: "Archivo", system-ui, sans-serif;
  --font-body: "Hanken Grotesk", system-ui, sans-serif;
  --font-mono: "Space Mono", ui-monospace, monospace;

  --maxw: 1200px;
  --radius: 14px;
  --radius-lg: 26px;
  --shadow: 0 18px 40px -24px rgba(15, 76, 66, 0.45);
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; }

body {
  font-family: var(--font-body);
  color: var(--ink);
  background: var(--paper);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }

.wrap { width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 0 24px; }

/* Perforated-ball motif (signature) - reusable dotted texture */
.holes {
  background-image: radial-gradient(circle, rgba(255,255,255,0.22) 2.2px, transparent 2.6px);
  background-size: 22px 22px;
}
.holes--ink {
  background-image: radial-gradient(circle, rgba(21,32,27,0.10) 2.2px, transparent 2.6px);
  background-size: 22px 22px;
}

/* ---------- Type scale ---------- */
.eyebrow {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--teal);
}
h1, h2, h3 { font-family: var(--font-display); line-height: 1.0; letter-spacing: -0.02em; font-weight: 800; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; gap: 0.5rem;
  font-family: var(--font-display); font-weight: 700;
  font-size: 0.98rem; letter-spacing: -0.01em;
  padding: 0.85rem 1.4rem; border-radius: 999px;
  border: 2px solid transparent; cursor: pointer;
  transition: transform .18s ease, background .18s ease, color .18s ease;
}
.btn:hover { transform: translateY(-2px); }
.btn--optic { background: var(--optic); color: var(--ink); }
.btn--optic:hover { background: var(--optic-deep); }
.btn--ink { background: var(--ink); color: var(--paper); }
.btn--ghost { background: transparent; border-color: currentColor; }
.btn--ghost-light { background: transparent; border-color: rgba(255,255,255,0.45); color: var(--white); }

/* ============================================================
   Announcement bar
   ============================================================ */
.topbar {
  background: var(--ink); color: var(--paper);
  font-family: var(--font-mono); font-size: 0.74rem; letter-spacing: 0.08em;
  text-align: center; padding: 0.55rem 1rem;
}
.topbar b { color: var(--optic); }

/* ============================================================
   Header / Nav
   ============================================================ */
.header {
  position: sticky; top: 0; z-index: 50;
  background: rgba(243,245,242,0.85); backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}
.nav { display: flex; align-items: center; gap: 1.5rem; height: 72px; }
.brand { display: flex; align-items: center; gap: 0.6rem; font-family: var(--font-display); font-weight: 800; font-size: 1.25rem; letter-spacing: -0.03em; }
.brand .dot { width: 26px; height: 26px; border-radius: 50%; background: var(--optic); position: relative; flex: none; }
.brand .dot::before, .brand .dot::after,
.brand .dot span { content:""; position:absolute; width:3px; height:3px; border-radius:50%; background: var(--teal); }
.brand .dot::before { top:6px; left:11px; } .brand .dot::after { bottom:6px; left:11px; }
.brand .dot span { top:11px; left:6px; box-shadow: 9px 0 0 var(--teal); }
/* Logo image (custom_logo) : remplace la pastille + le texte dans l'en-tête */
.brand--logo { gap: 0; }
.brand__logo { display: block; height: 44px; width: auto; max-width: none; }
/* Icône seule, reprise dans le pied de page (le logo complet serait illisible sur fond sombre) */
.brand__icon { width: 32px; height: 32px; flex: none; }
/* `.footer a` (display:block, 0.9rem) est plus spécifique que `.brand` et écrasait
   la mise en page de la marque dans le pied de page : on la rétablit ici. */
.footer .brand { display: flex; align-items: center; gap: 0.6rem; font-size: 1.25rem; padding: 0; }
/* Sur le fond teal foncé du pied de page, la raquette de l'icône manque de contraste :
   on l'agrandit pour qu'elle reste lisible (repli si le logo blanc n'est pas défini). */
.footer .brand__icon { width: 40px; height: 40px; }
/* Version blanche du logo, un peu plus grande qu'en en-tête : le pied de page a de la place */
.footer .brand__logo { height: 48px; }

.nav__links { display: flex; gap: 1.35rem; margin-left: 1rem; font-weight: 600; font-size: 0.95rem; }
.nav__links a { padding: 0.4rem 0; position: relative; }
.nav__links a:hover { color: var(--teal); }
.nav__item { position: relative; }
.nav__item > a::after { content: ""; position: absolute; left: 0; bottom: -2px; width: 0; height: 2px; background: var(--optic-deep); transition: width .2s ease; }
.nav__item:hover > a::after { width: 100%; }

/* mini dropdown */
.dropdown {
  position: absolute; top: 100%; left: -12px; min-width: 220px;
  background: var(--white); border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: var(--shadow); padding: 0.5rem; display: none; flex-direction: column;
}
.nav__item:hover .dropdown { display: flex; }
.dropdown a { padding: 0.55rem 0.7rem; border-radius: 8px; font-weight: 600; font-size: 0.9rem; }
.dropdown a:hover { background: var(--mint); color: var(--teal); }

.nav__tools { margin-left: auto; display: flex; align-items: center; gap: 1.1rem; }
.icon-btn { background: none; border: none; cursor: pointer; font-family: var(--font-mono); font-size: 0.85rem; color: var(--ink); display:flex; align-items:center; gap:0.35rem; }
.cart-pill { background: var(--ink); color: var(--paper); border-radius: 999px; padding: 0.45rem 0.85rem; font-family: var(--font-mono); font-size: 0.8rem; }
.cart-pill b { color: var(--optic); }

/* ============================================================
   HERO
   ============================================================ */
.hero {
  background: var(--teal); color: var(--paper);
  position: relative; overflow: hidden;
  border-radius: 0 0 var(--radius-lg) var(--radius-lg);
}
.hero__grid { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 2rem; align-items: center; padding: 4.5rem 0 4rem; }
.hero__eyebrow { color: var(--optic); margin-bottom: 1.1rem; }
.hero h1 { font-size: clamp(2.6rem, 6vw, 5.1rem); margin-bottom: 1.2rem; }
.hero h1 .hl { color: var(--optic); }
.hero p.lead { font-size: 1.15rem; max-width: 30ch; color: rgba(243,245,242,0.85); margin-bottom: 2rem; }
.hero__cta { display: flex; gap: 0.8rem; flex-wrap: wrap; }
.hero__stats { display: flex; gap: 2rem; margin-top: 2.6rem; }
.hero__stat .n { font-family: var(--font-display); font-weight: 800; font-size: 1.7rem; color: var(--optic); }
.hero__stat .l { font-family: var(--font-mono); font-size: 0.68rem; letter-spacing: 0.12em; text-transform: uppercase; color: rgba(243,245,242,0.7); }

.hero__art { position: relative; display: flex; justify-content: center; align-items: center; }
.hero__art svg { width: 100%; max-width: 420px; filter: drop-shadow(0 30px 40px rgba(0,0,0,0.35)); }
.hero__holes { position: absolute; inset: 0; pointer-events: none; opacity: 0.5; }

/* floating ball */
@keyframes float { 0%,100% { transform: translateY(0) rotate(0deg);} 50% { transform: translateY(-14px) rotate(6deg);} }
.hero__art .ball-float { animation: float 5s ease-in-out infinite; transform-origin: center; }

/* ============================================================
   Trust strip
   ============================================================ */
.trust { border-bottom: 1px solid var(--line); }
.trust__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; padding: 1.5rem 0; }
.trust__item { display: flex; gap: 0.7rem; align-items: center; }
.trust__item .ic { width: 38px; height: 38px; border-radius: 10px; background: var(--mint); color: var(--teal); display: grid; place-items: center; flex: none; font-size: 1.1rem; }
.trust__item b { font-size: 0.92rem; display:block; }
.trust__item span { font-size: 0.8rem; color: var(--muted); }

/* ============================================================
   Section scaffolding
   ============================================================ */
.section { padding: 5rem 0; }
.section--tight { padding: 1.5rem 0; }
.section--tight .inline-cta { margin: 0; }
.section__head { display: flex; justify-content: space-between; align-items: flex-end; gap: 1rem; margin-bottom: 2.4rem; }
.section__head h2 { font-size: clamp(1.9rem, 3.6vw, 2.9rem); }
.section__head .eyebrow { display:block; margin-bottom: 0.6rem; }
.section__head .link { font-weight: 700; color: var(--teal); border-bottom: 2px solid var(--optic); padding-bottom: 2px; white-space: nowrap; }

/* ============================================================
   Categories
   ============================================================ */
.cats { display: grid; grid-template-columns: repeat(6, 1fr); grid-auto-rows: 180px; gap: 14px; }
.cat {
  position: relative; border-radius: var(--radius); overflow: hidden;
  padding: 1.2rem; display: flex; flex-direction: column; justify-content: flex-end;
  color: var(--ink); border: 1px solid var(--line); transition: transform .2s ease;
}
.cat:hover { transform: translateY(-4px); }
.cat h3 { font-size: 1.25rem; }
.cat .tag { font-family: var(--font-mono); font-size: 0.7rem; color: var(--muted); }
.cat--big { grid-column: span 3; grid-row: span 2; background: var(--teal); color: var(--paper); }
.cat--big h3 { font-size: 2rem; }
.cat--big .tag { color: rgba(243,245,242,0.7); }
.cat--m { grid-column: span 3; background: var(--mint); }
.cat--s { grid-column: span 2; background: var(--white); }
.cat__arrow { position: absolute; top: 1rem; right: 1rem; width: 34px; height: 34px; border-radius: 50%; background: var(--optic); color: var(--ink); display: grid; place-items: center; font-weight: 800; }

/* ============================================================
   Product cards
   ============================================================ */
.prow { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.pcard {
  background: var(--white); border: 1px solid var(--line); border-radius: var(--radius);
  overflow: hidden; display: flex; flex-direction: column; transition: transform .2s ease, box-shadow .2s ease;
}
.pcard:hover { transform: translateY(-5px); box-shadow: var(--shadow); }
.pcard__img { aspect-ratio: 1/1; background: linear-gradient(150deg, var(--mint), #cfe0d4); display: grid; place-items: center; position: relative; }
.pcard__img svg { width: 62%; }
.pcard__badge { position: absolute; top: 10px; left: 10px; font-family: var(--font-mono); font-size: 0.66rem; letter-spacing: 0.08em; text-transform: uppercase; background: var(--ink); color: var(--optic); padding: 0.25rem 0.5rem; border-radius: 6px; }
.pcard__badge--promo { background: var(--coral); color: var(--white); }
.pcard__body { padding: 1rem 1.1rem 1.2rem; display: flex; flex-direction: column; gap: 0.5rem; flex: 1; }
.pcard__level { font-family: var(--font-mono); font-size: 0.68rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--teal); }
.pcard h3 { font-size: 1.12rem; letter-spacing: -0.01em; }
.pcard__specs { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 0.1rem; }
.spec { font-family: var(--font-mono); font-size: 0.68rem; background: var(--paper); border: 1px solid var(--line); border-radius: 6px; padding: 0.2rem 0.45rem; color: var(--muted); }
.pcard__foot { display: flex; align-items: center; justify-content: space-between; margin-top: auto; padding-top: 0.7rem; }
.price { font-family: var(--font-display); font-weight: 800; font-size: 1.3rem; }
.price s { font-family: var(--font-mono); font-weight: 400; font-size: 0.85rem; color: var(--muted); margin-right: 0.4rem; }
.add { width: 40px; height: 40px; border-radius: 50%; background: var(--optic); border: none; cursor: pointer; font-size: 1.3rem; font-weight: 700; color: var(--ink); transition: background .18s ease; }
.add:hover { background: var(--optic-deep); }

/* ============================================================
   Guide teaser
   ============================================================ */
.guide { background: var(--ink); color: var(--paper); border-radius: var(--radius-lg); overflow: hidden; }
.guide__grid { display: grid; grid-template-columns: 1fr 1fr; }
.guide__txt { padding: 3.5rem; }
.guide__txt .eyebrow { color: var(--optic); }
.guide__txt h2 { font-size: clamp(1.8rem, 3vw, 2.6rem); margin: 0.8rem 0 1rem; }
.guide__txt p { color: rgba(243,245,242,0.8); max-width: 42ch; margin-bottom: 1.6rem; }
.guide__art { background: var(--teal); position: relative; display: grid; place-items: center; min-height: 320px; }
.guide__art svg { width: 60%; }

/* ============================================================
   Kits banner
   ============================================================ */
.kits { background: var(--optic); border-radius: var(--radius-lg); padding: 3rem; display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 2rem; position: relative; overflow: hidden; }
.kits h2 { font-size: clamp(1.8rem, 3.4vw, 2.8rem); max-width: 16ch; }
.kits p { font-weight: 600; max-width: 40ch; margin-top: 0.6rem; }
.kits__chips { display:flex; gap:0.6rem; flex-wrap: wrap; margin-top: 1.2rem; }
.kchip { background: var(--ink); color: var(--paper); font-family: var(--font-mono); font-size: 0.74rem; padding: 0.4rem 0.7rem; border-radius: 999px; }

/* ============================================================
   Newsletter
   ============================================================ */
.news { text-align: center; padding: 4.5rem 0; }
.news h2 { font-size: clamp(1.8rem, 3.4vw, 2.6rem); margin-bottom: 0.6rem; }
.news p { color: var(--muted); margin-bottom: 1.6rem; }
.news__form { display: flex; gap: 0.6rem; max-width: 440px; margin: 0 auto; }
.news__form input { flex: 1; padding: 0.85rem 1.1rem; border-radius: 999px; border: 1px solid var(--line); font-family: var(--font-body); font-size: 0.95rem; }
.news__form input:focus { outline: 2px solid var(--teal); }

/* ============================================================
   Footer
   ============================================================ */
.footer { background: var(--teal-deep); color: rgba(243,245,242,0.85); padding: 3.5rem 0 2rem; margin-top: 2rem; }
.footer__grid { display: grid; grid-template-columns: 1.4fr repeat(3, 1fr); gap: 2rem; }
.footer h4 { font-family: var(--font-display); font-size: 0.95rem; color: var(--white); margin-bottom: 1rem; letter-spacing: 0.02em; }
.footer a { display: block; padding: 0.3rem 0; font-size: 0.9rem; }
.footer a:hover { color: var(--optic); }
.footer__brand p { font-size: 0.9rem; max-width: 32ch; margin-top: 0.8rem; }
.footer__bottom { border-top: 1px solid rgba(255,255,255,0.15); margin-top: 2.5rem; padding-top: 1.4rem; display: flex; justify-content: space-between; font-family: var(--font-mono); font-size: 0.74rem; flex-wrap: wrap; gap: 0.5rem; }

/* ============================================================
   CATEGORY PAGE
   ============================================================ */
.crumb { font-family: var(--font-mono); font-size: 0.76rem; color: var(--muted); padding: 1.5rem 0 0; letter-spacing: 0.04em; }
.crumb a:hover { color: var(--teal); }
.crumb .sep { margin: 0 0.5rem; opacity: 0.5; }

.cathead { padding: 1.5rem 0 2.5rem; }
.cathead h1 { font-size: clamp(2.2rem, 5vw, 3.8rem); margin-bottom: 0.8rem; }
.cathead p { color: var(--muted); font-size: 1.05rem; }

.toolbar { display: flex; gap: 0.6rem; flex-wrap: wrap; align-items: center; padding: 1.1rem 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); margin-bottom: 2.5rem; }
.filter { font-family: var(--font-body); font-weight: 600; font-size: 0.88rem; background: var(--white); border: 1px solid var(--line); border-radius: 999px; padding: 0.55rem 1rem; cursor: pointer; display: flex; align-items: center; gap: 0.4rem; }
.filter:hover { border-color: var(--teal); }
.filter--active { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.toolbar__count { margin-left: auto; font-family: var(--font-mono); font-size: 0.78rem; color: var(--muted); }

.prow--cat { grid-template-columns: repeat(3, 1fr); }

/* Buying guide block */
.buyguide { background: var(--white); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 3rem; margin-top: 4rem; }
.buyguide .eyebrow { color: var(--teal); }
.buyguide h2 { font-size: clamp(1.7rem, 3vw, 2.4rem); margin: 0.6rem 0 1.4rem; max-width: 24ch; }
.buyguide__cols { columns: 2; column-gap: 2.5rem; }
.buyguide__cols h3 { font-size: 1.15rem; margin: 1.2rem 0 0.4rem; break-after: avoid; }
.buyguide__cols h3:first-child { margin-top: 0; }
.buyguide__cols p { font-size: 0.95rem; color: #2c3a33; margin-bottom: 0.8rem; }

/* FAQ */
.faq { margin-top: 4rem; }
.faq h2 { font-size: clamp(1.7rem, 3vw, 2.4rem); margin-bottom: 1.5rem; }
.faq details { border-bottom: 1px solid var(--line); padding: 1.1rem 0; }
.faq summary { font-family: var(--font-display); font-weight: 700; font-size: 1.1rem; cursor: pointer; list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 1rem; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font-size: 1.5rem; color: var(--teal); transition: transform .2s ease; }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details p { margin-top: 0.8rem; color: var(--muted); max-width: 70ch; }

/* internal links */
.related { margin-top: 4rem; display: grid; grid-template-columns: repeat(3,1fr); gap: 16px; }
.related a { background: var(--mint); border-radius: var(--radius); padding: 1.4rem; display: block; transition: transform .2s ease; }
.related a:hover { transform: translateY(-4px); }
.related .eyebrow { color: var(--teal); }
.related h3 { font-size: 1.15rem; margin-top: 0.5rem; }

/* ============================================================
   Reveal animation
   ============================================================ */
.reveal { opacity: 0; transform: translateY(20px); transition: opacity .6s ease, transform .6s ease; }
.reveal.in { opacity: 1; transform: none; }

/* ============================================================
   Responsive
   ============================================================ */
@media (max-width: 960px) {
  .hero__grid { grid-template-columns: 1fr; }
  .hero__art { order: -1; max-width: 320px; margin: 0 auto; }
  .trust__grid { grid-template-columns: repeat(2, 1fr); }
  .cats { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 160px; }
  .cat--big, .cat--m, .cat--s { grid-column: span 1; grid-row: span 1; }
  .cat--big { grid-column: span 2; }
  .prow { grid-template-columns: repeat(2, 1fr); }
  .prow--cat { grid-template-columns: repeat(2, 1fr); }
  .guide__grid { grid-template-columns: 1fr; }
  .guide__txt { padding: 2.2rem; }
  .kits { grid-template-columns: 1fr; }
  .footer__grid { grid-template-columns: 1fr 1fr; }
  .buyguide__cols { columns: 1; }
  .nav__links { display: none; }
}
@media (max-width: 540px) {
  .prow, .prow--cat, .cats, .trust__grid, .footer__grid, .related { grid-template-columns: 1fr; }
  .cat--big { grid-column: span 1; }
  .hero__stats { gap: 1.2rem; }
  .news__form { flex-direction: column; }
}

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

:focus-visible { outline: 3px solid var(--optic-deep); outline-offset: 2px; border-radius: 4px; }

/* ============================================================
   PAGE FICHE PRODUIT (PDP)
   ============================================================ */
.pdp { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: 3rem; padding: 2rem 0 3rem; }
.pdp > * { min-width: 0; }
/* Buy-box collante sur desktop : prix + ajout au panier restent visibles pendant le scroll de la galerie */
@media (min-width: 961px) {
  .pdp { align-items: start; }
  .pdp__info { position: sticky; top: 1.5rem; align-self: start; }
}
.gallery { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.gallery__main { min-width: 0; order: 1; }
.gallery__thumbs { display: flex; flex-direction: row; flex-wrap: wrap; gap: 12px; order: 2; }
.gallery__thumbs .gthumb { width: 72px; flex: 0 0 72px; }
.gthumb { aspect-ratio: 1/1; border-radius: 12px; border: 1px solid var(--line); background: linear-gradient(150deg, var(--mint), #cfe0d4); display: grid; place-items: center; cursor: pointer; transition: border-color .15s ease; }
.gthumb svg { width: 60%; }
.gthumb--active { border-color: var(--teal); border-width: 2px; }
.gallery__main { aspect-ratio: 1/1; border-radius: var(--radius-lg); background: linear-gradient(150deg, var(--mint), #cfe0d4); display: grid; place-items: center; position: relative; border: 1px solid var(--line); }
.gallery__main svg { width: 60%; }
.gallery__main .pcard__badge { top: 16px; left: 16px; }

.pdp__info .pdp__level { font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--teal); }
.pdp__info h1 { font-size: clamp(2rem, 4vw, 3rem); margin: 0.5rem 0 0.8rem; }
.pdp__rating { display: flex; align-items: center; gap: 0.5rem; font-size: 0.9rem; color: var(--muted); margin-bottom: 1.2rem; }
.stars { color: var(--optic-deep); letter-spacing: 2px; }
.pdp__price { font-family: var(--font-display); font-weight: 800; font-size: 2.4rem; margin-bottom: 0.3rem; }
.pdp__price s { font-family: var(--font-mono); font-weight: 400; font-size: 1.1rem; color: var(--muted); margin-right: 0.6rem; }
.pdp__price .save { font-family: var(--font-mono); font-size: 0.8rem; background: var(--coral); color: #fff; padding: 0.2rem 0.5rem; border-radius: 6px; vertical-align: middle; margin-left: 0.5rem; }
.pdp__tax { font-size: 0.82rem; color: var(--muted); margin-bottom: 1.4rem; }
.pdp__desc { color: #2c3a33; margin-bottom: 1.6rem; max-width: 50ch; }
.pdp__specgrid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; margin-bottom: 1.8rem; }
.specbox { border: 1px solid var(--line); border-radius: 10px; padding: 0.7rem 0.9rem; }
.specbox .k { font-family: var(--font-mono); font-size: 0.66rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); }
.specbox .v { font-family: var(--font-display); font-weight: 700; font-size: 1rem; }
.pdp__buy { display: flex; gap: 0.8rem; align-items: stretch; margin-bottom: 1.4rem; }
.qty { display: flex; align-items: center; border: 1px solid var(--line); border-radius: 999px; background: var(--white); overflow: hidden; }
.qty button { width: 44px; height: 100%; border: none; background: none; font-size: 1.3rem; cursor: pointer; color: var(--ink); }
.qty button:hover { background: var(--mint); }
.qty span { min-width: 32px; text-align: center; font-family: var(--font-mono); }
.btn--buy { flex: 1; justify-content: center; font-size: 1.05rem; }
.pdp__assure { display: grid; gap: 0.6rem; border-top: 1px solid var(--line); padding-top: 1.2rem; }
.pdp__assure div { display: flex; gap: 0.6rem; align-items: center; font-size: 0.9rem; }
.pdp__assure .ic { color: var(--teal); font-size: 1rem; }

.pdp-section { padding: 3rem 0; border-top: 1px solid var(--line); }
.pdp-section h2 { font-size: clamp(1.6rem, 2.8vw, 2.2rem); margin-bottom: 1.2rem; }
.pdp-section p { color: #2c3a33; max-width: 70ch; margin-bottom: 1rem; }
.spectable { width: 100%; border-collapse: collapse; max-width: 600px; }
.spectable tr { border-bottom: 1px solid var(--line); }
.spectable td { padding: 0.8rem 0; font-size: 0.95rem; }
.spectable td:first-child { font-family: var(--font-mono); font-size: 0.78rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); width: 40%; }
.spectable td:last-child { font-weight: 600; }

.reviews { display: grid; gap: 1.2rem; max-width: 760px; }
.reviews--2col { grid-template-columns: 1fr 1fr; max-width: none; }
@media (max-width: 720px) { .reviews--2col { grid-template-columns: 1fr; } }
.review { border: 1px solid var(--line); border-radius: var(--radius); padding: 1.3rem 1.5rem; background: var(--white); }
.review__head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 0.5rem; }
.review__head b { font-family: var(--font-display); }
.review__date { font-family: var(--font-mono); font-size: 0.74rem; color: var(--muted); }
.review p { margin: 0; color: #2c3a33; }

/* ============================================================
   PAGE ARTICLE / GUIDE
   ============================================================ */
.ahero { background: var(--teal); color: var(--paper); border-radius: 0 0 var(--radius-lg) var(--radius-lg); position: relative; overflow: hidden; }
.ahero__holes { position: absolute; inset: 0; opacity: 0.4; pointer-events: none; }
.ahero__inner { padding: 3.5rem 0 3rem; position: relative; max-width: 760px; }
.ahero .eyebrow { color: var(--optic); }
.ahero h1 { font-size: clamp(2.2rem, 5vw, 3.6rem); margin: 0.8rem 0 1.2rem; }
.ameta { display: flex; gap: 1.4rem; font-family: var(--font-mono); font-size: 0.78rem; color: rgba(243,245,242,0.8); flex-wrap: wrap; }
.ameta b { color: var(--optic); }

.alayout { display: grid; grid-template-columns: 240px 1fr; gap: 3rem; padding: 3rem 0; align-items: start; }
.toc { position: sticky; top: 90px; border-left: 2px solid var(--mint); padding-left: 1rem; }
.toc .eyebrow { display: block; margin-bottom: 0.8rem; }
.toc a { display: block; padding: 0.35rem 0; font-size: 0.9rem; color: var(--muted); font-weight: 600; }
.toc a:hover { color: var(--teal); }

.abody { max-width: 720px; }
.abody p { font-size: 1.05rem; color: #29352e; margin-bottom: 1.3rem; }
.abody h2 { font-size: clamp(1.5rem, 2.6vw, 2rem); margin: 2.4rem 0 1rem; scroll-margin-top: 90px; }
.abody h3 { font-size: 1.2rem; margin: 1.6rem 0 0.6rem; }
.abody ul { margin: 0 0 1.3rem 1.2rem; }
.abody li { margin-bottom: 0.5rem; color: #29352e; }
.callout { background: var(--mint); border-radius: var(--radius); padding: 1.4rem 1.6rem; margin: 1.8rem 0; border-left: 4px solid var(--teal); }
.callout b { font-family: var(--font-display); }
.inline-cta { background: var(--ink); color: var(--paper); border-radius: var(--radius-lg); padding: 1.8rem 2rem; margin: 2.2rem 0; display: flex; justify-content: space-between; align-items: center; gap: 1.2rem; flex-wrap: wrap; }
.inline-cta h3 { font-size: 1.3rem; color: var(--paper); }
.inline-cta p { color: rgba(243,245,242,0.8); font-size: 0.92rem; margin: 0.2rem 0 0; }

/* ============================================================
   PAGE PANIER
   ============================================================ */
.cart-layout { display: grid; grid-template-columns: 1fr 360px; gap: 2.5rem; padding: 1rem 0 4rem; align-items: start; }
.cart-item { display: grid; grid-template-columns: 96px 1fr auto; gap: 1.2rem; padding: 1.3rem 0; border-bottom: 1px solid var(--line); align-items: center; }
.cart-item__img { width: 96px; height: 96px; border-radius: 12px; background: linear-gradient(150deg, var(--mint), #cfe0d4); display: grid; place-items: center; }
.cart-item__img svg { width: 64%; }
.cart-item__meta .lvl { font-family: var(--font-mono); font-size: 0.68rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--teal); }
.cart-item__meta h3 { font-size: 1.1rem; margin: 0.2rem 0; }
.cart-item__meta .rm { font-size: 0.82rem; color: var(--muted); background: none; border: none; cursor: pointer; text-decoration: underline; padding: 0; }
.cart-item__right { text-align: right; display: flex; flex-direction: column; gap: 0.6rem; align-items: flex-end; }
.cart-item__right .price { font-size: 1.15rem; }
.qty--sm button { width: 36px; }

.cart-summary { background: var(--white); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 1.8rem; position: sticky; top: 90px; }
.cart-summary h2 { font-size: 1.4rem; margin-bottom: 1.2rem; }
.sumrow { display: flex; justify-content: space-between; padding: 0.5rem 0; font-size: 0.95rem; }
.sumrow--total { border-top: 1px solid var(--line); margin-top: 0.6rem; padding-top: 1rem; font-family: var(--font-display); font-weight: 800; font-size: 1.3rem; }
.ship-progress { background: var(--mint); border-radius: 10px; padding: 0.8rem 1rem; margin: 0.6rem 0 1rem; font-size: 0.84rem; }
.ship-bar { height: 6px; background: rgba(15,76,66,0.15); border-radius: 999px; margin-top: 0.5rem; overflow: hidden; }
.ship-bar i { display: block; height: 100%; background: var(--teal); border-radius: 999px; }
.cart-summary .btn { width: 100%; justify-content: center; margin-top: 0.4rem; }
.paylogos { display: flex; gap: 0.5rem; justify-content: center; margin-top: 1rem; font-family: var(--font-mono); font-size: 0.72rem; color: var(--muted); }

/* ============================================================
   PAGE COMMANDE / CHECKOUT
   ============================================================ */
.steps { display: flex; gap: 0.5rem; align-items: center; justify-content: center; padding: 1.5rem 0 2.5rem; font-family: var(--font-mono); font-size: 0.82rem; flex-wrap: wrap; }
.step { display: flex; align-items: center; gap: 0.5rem; color: var(--muted); }
.step .n { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; background: var(--mint); color: var(--teal); font-weight: 700; }
.step--active { color: var(--ink); }
.step--active .n { background: var(--ink); color: var(--optic); }
.step__line { width: 40px; height: 2px; background: var(--line); }

.checkout-layout { display: grid; grid-template-columns: 1fr 360px; gap: 2.5rem; padding-bottom: 4rem; align-items: start; }
.cblock { background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.6rem 1.8rem; margin-bottom: 1.4rem; }
.cblock h2 { font-size: 1.25rem; margin-bottom: 1.1rem; }
.fgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 0.9rem; }
.field { display: flex; flex-direction: column; gap: 0.3rem; }
.field--full { grid-column: 1 / -1; }
.field label { font-size: 0.78rem; font-weight: 600; color: var(--muted); }
.field input { padding: 0.7rem 0.9rem; border: 1px solid var(--line); border-radius: 10px; font-family: var(--font-body); font-size: 0.95rem; background: var(--paper); }
.field input:focus { outline: 2px solid var(--teal); }
.optcard { border: 1px solid var(--line); border-radius: 12px; padding: 1rem 1.1rem; margin-bottom: 0.7rem; display: flex; align-items: center; gap: 0.8rem; cursor: pointer; }
.optcard--sel { border-color: var(--teal); border-width: 2px; background: rgba(15,76,66,0.04); }
.optcard .radio { width: 18px; height: 18px; border-radius: 50%; border: 2px solid var(--teal); flex: none; position: relative; }
.optcard--sel .radio::after { content: ""; position: absolute; inset: 3px; background: var(--teal); border-radius: 50%; }
.optcard .ol b { display: block; font-size: 0.95rem; }
.optcard .ol span { font-size: 0.82rem; color: var(--muted); }
.optcard .oprice { margin-left: auto; font-family: var(--font-mono); font-weight: 700; }

/* ============================================================
   PAGE À PROPOS / ÉDITORIAL
   ============================================================ */
.about-hero { padding: 4rem 0 3rem; max-width: 720px; }
.about-hero h1 { font-size: clamp(2.4rem, 5.5vw, 4rem); margin: 0.8rem 0 1.2rem; }
.about-hero p { font-size: 1.2rem; color: var(--muted); }
.about-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin: 1rem 0 4rem; }
.about-stat { background: var(--teal); color: var(--paper); border-radius: var(--radius); padding: 1.8rem; }
.about-stat .n { font-family: var(--font-display); font-weight: 800; font-size: 2.4rem; color: var(--optic); }
.about-stat .l { font-size: 0.9rem; color: rgba(243,245,242,0.85); }
.about-story { display: grid; grid-template-columns: 1fr 1fr; gap: 3rem; align-items: center; padding: 1rem 0 4rem; }
.about-story h2 { font-size: clamp(1.8rem, 3vw, 2.6rem); margin-bottom: 1rem; }
.about-story p { color: #29352e; margin-bottom: 1rem; }
.about-story__art { aspect-ratio: 4/5; background: var(--mint); border-radius: var(--radius-lg); display: grid; place-items: center; }
.about-story__art svg { width: 55%; }
.values { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; padding-bottom: 4rem; }
.value { border: 1px solid var(--line); border-radius: var(--radius); padding: 1.6rem; background: var(--white); }
.value .ic { width: 44px; height: 44px; border-radius: 12px; background: var(--optic); color: var(--ink); display: grid; place-items: center; font-size: 1.3rem; margin-bottom: 0.9rem; }
.value h3 { font-size: 1.15rem; margin-bottom: 0.4rem; }
.value p { font-size: 0.92rem; color: var(--muted); }

@media (max-width: 960px) {
  .pdp { grid-template-columns: 1fr; gap: 2rem; }
  .alayout { grid-template-columns: 1fr; gap: 1.5rem; }
  .toc { position: static; border-left: none; padding-left: 0; border-bottom: 1px solid var(--line); padding-bottom: 1rem; }
  .toc { display: none; }
  .cart-layout, .checkout-layout { grid-template-columns: 1fr; }
  .cart-summary, .checkout-layout .cart-summary { position: static; }
  .about-story { grid-template-columns: 1fr; }
  .about-stats, .values { grid-template-columns: 1fr; }
}
@media (max-width: 540px) {
  .gallery { grid-template-columns: 1fr; }
  .gallery__thumbs { flex-direction: row; }
  .pdp__specgrid, .fgrid { grid-template-columns: 1fr; }
  .cart-item { grid-template-columns: 72px 1fr; }
  .cart-item__right { grid-column: 1 / -1; flex-direction: row; justify-content: space-between; align-items: center; }
}

/* ============================================================
   Intégration photos (zones décoratives, hors produits)
   ============================================================ */
.guide__art--photo { background-size: cover; background-position: center; background-repeat: no-repeat; min-height: 320px; }
.guide__art--photo svg { display: none; }

.lifeband {
  border-radius: var(--radius-lg); overflow: hidden;
  background-size: cover; background-position: center; background-repeat: no-repeat;
  padding: 4rem 3rem; color: var(--paper);
}
.lifeband__txt { max-width: 42ch; }
.lifeband__txt h2 { font-size: clamp(1.9rem, 3.4vw, 2.8rem); margin: 0.6rem 0 0.8rem; }
.lifeband__txt p { color: rgba(243,245,242,0.85); margin-bottom: 1.6rem; }

.ahero--photo { background-size: cover; background-position: center; background-repeat: no-repeat; }

@media (max-width: 600px) { .lifeband { padding: 2.5rem 1.6rem; } }

/* ============================================================
   Header - panier en icône, compte en icône, menu hamburger
   ============================================================ */
.cart-link {
  position: relative; display: inline-flex; align-items: center; justify-content: center;
  width: 42px; height: 42px; border-radius: 50%; background: var(--ink); color: var(--paper);
  transition: background .18s ease; flex: none;
}
.cart-link:hover { background: var(--teal-deep); }
.cart-count {
  position: absolute; top: -4px; right: -4px; min-width: 18px; height: 18px; padding: 0 4px;
  border-radius: 999px; background: var(--optic); color: var(--ink);
  font-family: var(--font-mono); font-size: 0.66rem; font-weight: 700; line-height: 1;
  display: inline-flex; align-items: center; justify-content: center;
}
.nav__account { color: var(--ink); }
.nav__burger { display: none; }
.nav__burger span { display: block; width: 20px; height: 2px; background: var(--ink); border-radius: 2px; margin: 3px 0; }

@media (max-width: 960px) {
  .nav__burger {
    display: inline-flex; flex-direction: column; justify-content: center; align-items: center;
    width: 42px; height: 42px; border: 1px solid var(--line); border-radius: 10px;
    background: var(--white); cursor: pointer; padding: 0; flex: none;
  }
  .nav__account .nav__label { display: none; }
  .nav__tools { gap: 0.7rem; margin-left: auto; }

  .nav__links {
    display: none;
    position: absolute; top: 100%; left: 0; right: 0;
    flex-direction: column; gap: 0; margin: 0;
    background: var(--paper); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
    padding: 0.5rem 24px 1.2rem; box-shadow: var(--shadow);
  }
  .nav__links.is-open { display: flex; }
  .nav__links .nav__item { width: 100%; }
  .nav__links .nav__item > a { display: block; padding: 0.85rem 0; border-bottom: 1px solid var(--line); font-size: 1.05rem; }
  .nav__links .nav__item > a::after { display: none; }
  .nav__links .dropdown {
    position: static; display: flex; flex-direction: column;
    box-shadow: none; border: none; background: none; padding: 0.2rem 0 0.6rem 1rem; min-width: 0;
  }
  .nav__links .dropdown a { padding: 0.5rem 0; font-size: 0.95rem; }
}

/* ============================================================
   MOBILE-FIRST - corrections & optimisations (23/06/2026)
   ============================================================ */
html, body { overflow-x: hidden; }
img, svg { max-width: 100%; }

/* Hero : rétablir le padding latéral (écrasé par .hero__grid) */
.hero .hero__grid { padding-left: 24px; padding-right: 24px; }

/* Lien "voir tout" : caché par défaut (desktop), affiché sous la grille en mobile */
.section__more { display: none; }

@media (max-width: 600px) {
  /* Bande promo plus discrète */
  .topbar { font-size: 0.62rem; letter-spacing: 0.03em; padding: 0.5rem 14px; }
  /* Header compact */
  .wrap { padding: 0 18px; }
  .header .nav { height: 60px; gap: 0.5rem; }
  .brand { font-size: 1.02rem; gap: 0.45rem; }
  .brand .dot { width: 22px; height: 22px; }
  .brand__logo { height: 34px; }
  .brand__icon { width: 28px; height: 28px; }
  .footer .brand__logo { height: 40px; }
  .cart-link { width: 38px; height: 38px; }
  .nav__burger { width: 38px; height: 38px; }
  .icon-btn svg, .cart-link svg { width: 21px; height: 21px; }
  .nav__links { padding-left: 18px; padding-right: 18px; }

  /* Hero un peu plus contenu, padding latéral garanti */
  .hero .hero__grid { padding-top: 3rem; padding-bottom: 3rem; padding-left: 18px; padding-right: 18px; }
  .hero h1 { font-size: clamp(2.1rem, 11vw, 3rem); }

  /* En-têtes de section empilés + lien déplacé sous la grille */
  .section__head { flex-direction: column; align-items: flex-start; gap: 0.4rem; }
  .section__head .link { display: none; }
  .section__more {
    display: flex; justify-content: center; align-items: center; margin-top: 1.4rem;
    font-family: var(--font-display); font-weight: 700; color: var(--teal);
    border: 2px solid var(--mint); border-radius: 999px; padding: 0.85rem 1rem;
  }
}

/* Galerie fiche produit : image active en grand, miniatures petites dessous */
@media (max-width: 540px) {
  .gallery { display: flex; flex-direction: column; gap: 10px; }
  .gallery__main { order: 1; }
  .gallery__thumbs { order: 2; flex-direction: row; gap: 8px; }
  .gthumb { width: 56px; height: 56px; flex: none; }
}

/* Barre d'achat flottante (fiche produit, mobile) */
.bp-buybar { display: none; }
@media (max-width: 768px) {
  .bp-buybar {
    display: flex; align-items: center; gap: 0.8rem;
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
    background: var(--white); border-top: 1px solid var(--line);
    padding: 0.7rem 16px calc(0.7rem + env(safe-area-inset-bottom, 0px));
    box-shadow: 0 -10px 26px -18px rgba(0,0,0,0.45);
  }
  .bp-buybar__price { font-family: var(--font-display); font-weight: 800; font-size: 1.15rem; white-space: nowrap; }
  .bp-buybar__btn { flex: 1; justify-content: center; }
  .single-product #site-content { padding-bottom: 84px; }
}

/* ============================================================
   MOBILE-FIRST v2 - produits 2 colonnes + filtres bottom-sheet
   ============================================================ */
@media (max-width: 600px) {
  /* Produits en 2 colonnes (au lieu de 1) */
  .prow, .prow--cat { grid-template-columns: repeat(2, 1fr); gap: 12px; }
  .pcard__body { padding: 0.7rem 0.8rem 0.9rem; gap: 0.3rem; }
  .pcard__level { font-size: 0.62rem; }
  .pcard h3 { font-size: 0.96rem; line-height: 1.15; }
  .pcard .price { font-size: 1.02rem; }
  .pcard .price s { display: block; font-size: 0.72rem; margin: 0; }
  .add { width: 32px; height: 32px; font-size: 1.05rem; }
  .pcard__foot { padding-top: 0.5rem; gap: 0.4rem; }
  .pcard__badge { font-size: 0.58rem; padding: 0.2rem 0.4rem; }
}

/* ============================================================
   Volet filtres (bottom-sheet) - catégorie
   ============================================================ */
.filter__badge { background: var(--optic); color: var(--ink); border-radius: 999px; padding: 0 0.4rem; margin-left: 0.3rem; font-family: var(--font-mono); font-size: 0.7rem; }
.bp-filter-open { cursor: pointer; }

.bp-sheet { display: none; position: fixed; inset: 0; z-index: 80; }
.bp-sheet.is-open { display: block; }
.bp-sheet__overlay { position: absolute; inset: 0; background: rgba(21,32,27,0.5); }
.bp-sheet__panel {
  position: absolute; left: 0; right: 0; bottom: 0;
  background: var(--paper); border-radius: 22px 22px 0 0;
  max-height: 88vh; display: flex; flex-direction: column;
  animation: bp-sheet-up .25s ease;
}
@keyframes bp-sheet-up { from { transform: translateY(100%); } to { transform: none; } }
.bp-sheet__head { display: flex; justify-content: space-between; align-items: center; padding: 1.2rem 1.4rem; border-bottom: 1px solid var(--line); }
.bp-sheet__head h3 { font-family: var(--font-display); font-size: 1.25rem; }
.bp-sheet__close { background: none; border: none; font-size: 1.2rem; cursor: pointer; color: var(--ink); width: 36px; height: 36px; border-radius: 50%; }
.bp-sheet__close:hover { background: var(--mint); }
.bp-sheet__body { padding: 1.3rem 1.4rem; overflow-y: auto; }
.bp-filter-group { margin-bottom: 1.7rem; }
.bp-filter-group:last-child { margin-bottom: 0; }
.bp-filter-group h4 { font-family: var(--font-display); font-size: 0.98rem; margin-bottom: 0.8rem; }
.bp-f-orderby { width: 100%; padding: 0.8rem 0.9rem; border: 1px solid var(--line); border-radius: 12px; background: var(--white); font-family: var(--font-body); font-size: 0.95rem; }
.bp-chips { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.bp-chip input { position: absolute; opacity: 0; width: 0; height: 0; }
.bp-chip span { display: inline-block; padding: 0.55rem 1rem; border: 1px solid var(--line); border-radius: 999px; font-size: 0.9rem; cursor: pointer; background: var(--white); transition: .15s; }
.bp-chip input:checked + span { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.bp-chip input:focus-visible + span { outline: 3px solid var(--optic-deep); }
.bp-price { display: flex; align-items: center; gap: 0.7rem; }
.bp-price input { flex: 1; padding: 0.8rem 0.9rem; border: 1px solid var(--line); border-radius: 12px; background: var(--white); font-family: var(--font-body); font-size: 0.95rem; }
.bp-sheet__foot { display: flex; gap: 0.8rem; padding: 1rem 1.4rem calc(1rem + env(safe-area-inset-bottom, 0px)); border-top: 1px solid var(--line); }
.bp-sheet__foot .btn { flex: 1; justify-content: center; }

/* Sur grand écran : volet centré façon modale */
@media (min-width: 720px) {
  .bp-sheet__panel { left: 50%; right: auto; bottom: auto; top: 50%; transform: translate(-50%,-50%); width: 460px; border-radius: var(--radius-lg); max-height: 84vh; animation: none; }
}

/* Fix débordement des champs prix dans le volet */
.bp-sheet__body { overflow-x: hidden; }
.bp-price input { min-width: 0; }

/* ============================================================
   Fix panier mobile + tiroir latéral + checkout mobile
   ============================================================ */
/* Image produit du panier : ne déborde plus de sa colonne */
.cart-item__img { width: 100%; max-width: 96px; height: auto; aspect-ratio: 1 / 1; }

/* Tiroir panier latéral (off-canvas) */
.bp-cart-drawer { display: none; position: fixed; inset: 0; z-index: 90; }
.bp-cart-drawer.is-open { display: block; }
.bp-cart-drawer__overlay { position: absolute; inset: 0; background: rgba(21,32,27,0.5); }
.bp-cart-drawer__panel {
  position: absolute; top: 0; right: 0; bottom: 0; width: min(400px, 90vw);
  background: var(--paper); display: flex; flex-direction: column;
  box-shadow: -20px 0 50px -20px rgba(0,0,0,0.45); animation: bp-drawer-in .25s ease;
}
@keyframes bp-drawer-in { from { transform: translateX(100%); } to { transform: none; } }
.bp-cart-drawer__head { display:flex; justify-content:space-between; align-items:center; padding: 1.2rem 1.4rem; border-bottom: 1px solid var(--line); }
.bp-cart-drawer__head h3 { font-family: var(--font-display); font-size: 1.25rem; }
.bp-cart-drawer__close { background:none; border:none; font-size:1.2rem; cursor:pointer; width:36px; height:36px; border-radius:50%; color: var(--ink); }
.bp-cart-drawer__close:hover { background: var(--mint); }
.bp-cart-drawer__body { padding: 1.2rem 1.4rem; overflow-y: auto; flex: 1; }

/* Mini-cart WooCommerce dans le tiroir */
.bp-cart-drawer ul.woocommerce-mini-cart { list-style: none; margin: 0; padding: 0; }
.bp-cart-drawer li.woocommerce-mini-cart-item { display: flex; align-items: center; gap: 0.8rem; padding: 0.9rem 0; border-bottom: 1px solid var(--line); position: relative; }
.bp-cart-drawer li.woocommerce-mini-cart-item img { order: -1; width: 56px !important; height: 56px; object-fit: cover; border-radius: 8px; float: none; margin: 0; }
.bp-cart-drawer li.woocommerce-mini-cart-item a:not(.remove) { font-family: var(--font-display); font-weight: 700; font-size: 0.95rem; }
.bp-cart-drawer li.woocommerce-mini-cart-item a.remove { position: absolute; top: 0.7rem; right: 0; }
.bp-cart-drawer .woocommerce-mini-cart__total { display: flex; justify-content: space-between; align-items: baseline; padding: 1rem 0; margin: 0.4rem 0 0; border-top: 2px solid var(--ink); font-family: var(--font-display); }
.bp-cart-drawer .woocommerce-mini-cart__total strong { font-weight: 800; }
.bp-cart-drawer .woocommerce-mini-cart__buttons { display: flex; flex-direction: column; gap: 0.6rem; margin: 0.6rem 0 0; padding: 0; }
.bp-cart-drawer .woocommerce-mini-cart__buttons .button { width: 100%; justify-content: center; }
.bp-cart-drawer .woocommerce-mini-cart__buttons .checkout { order: -1; background: var(--optic); color: var(--ink); }
.bp-cart-drawer .woocommerce-mini-cart__buttons .button:not(.checkout) { background: transparent; color: var(--ink); border: 2px solid var(--ink); }
.bp-cart-drawer p.woocommerce-mini-cart__empty-message { color: var(--muted); }

/* Checkout mobile */
@media (max-width: 600px) {
  .woocommerce-checkout #billing_postcode_field,
  .woocommerce-checkout #billing_city_field,
  .woocommerce-checkout #billing_phone_field,
  .woocommerce-checkout #billing_email_field { float: none; width: 100%; }
}
@media (max-width: 960px) {
  /* Récap de commande avant les informations */
  .woocommerce-checkout .checkout-review { order: -1; }
  .woocommerce-checkout .checkout-main { order: 1; }
}

/* ============================================================
   Tiroir panier - pied collant + liste scrollable (polish)
   ============================================================ */
.bp-cart-drawer__body { display: flex; flex-direction: column; padding: 0; }
.bp-cart-drawer ul.woocommerce-mini-cart {
  flex: 1 1 auto; overflow-y: auto; margin: 0; padding: 0.4rem 1.4rem;
  min-height: 60px;
}
.bp-cart-drawer li.woocommerce-mini-cart-item { padding: 1rem 0; }
.bp-cart-drawer li.woocommerce-mini-cart-item img { width: 60px !important; height: 60px; }
.bp-cart-drawer li.woocommerce-mini-cart-item a.remove {
  width: 22px; height: 22px; line-height: 20px; text-align: center;
  border-radius: 50%; background: var(--mint); color: var(--ink) !important;
  font-size: 14px; top: 1rem;
}
.bp-cart-drawer .quantity, .bp-cart-drawer .woocommerce-mini-cart-item .quantity { color: var(--muted); font-family: var(--font-mono); font-size: 0.85rem; }

/* Pied collant (total + boutons) */
.bp-cart-drawer .woocommerce-mini-cart__total {
  flex: none; margin: 0; padding: 1rem 1.4rem 0.6rem;
  border-top: 1px solid var(--line); background: var(--paper);
  display: flex; justify-content: space-between; align-items: baseline;
  font-family: var(--font-display); font-size: 1.15rem;
}
.bp-cart-drawer .woocommerce-mini-cart__total strong { font-weight: 800; }
.bp-cart-drawer .woocommerce-mini-cart__buttons {
  flex: none; display: flex; flex-direction: column; gap: 0.6rem; margin: 0;
  padding: 0.4rem 1.4rem calc(1.2rem + env(safe-area-inset-bottom, 0px));
  background: var(--paper);
}
.bp-cart-drawer .woocommerce-mini-cart__buttons .button { width: 100%; justify-content: center; padding: 0.95rem 1.4rem; }

/* Plein écran sur petit mobile pour plus de confort */
@media (max-width: 480px) {
  .bp-cart-drawer__panel { width: 100%; }
}

/* ============================================================
   CTA sticky bas (panier & commande) + offset barre nav
   ============================================================ */
:root { --bp-bottomnav: 0px; }

.bp-mobile-cta { display: none; }
@media (max-width: 768px) {
  .bp-mobile-cta {
    display: flex; align-items: center; gap: 0.8rem;
    position: fixed; left: 0; right: 0; bottom: var(--bp-bottomnav); z-index: 60;
    background: var(--white); border-top: 1px solid var(--line);
    padding: 0.7rem 16px calc(0.7rem + env(safe-area-inset-bottom, 0px));
    box-shadow: 0 -10px 26px -18px rgba(0,0,0,0.45);
  }
  .bp-mobile-cta__total { font-family: var(--font-display); font-weight: 800; font-size: 1.15rem; white-space: nowrap; }
  .bp-mobile-cta .btn { flex: 1; justify-content: center; }
  /* la barre d'achat produit se cale aussi au-dessus de la nav */
  .bp-buybar { bottom: var(--bp-bottomnav); }
  .woocommerce-cart #site-content,
  .woocommerce-checkout #site-content { padding-bottom: calc(var(--bp-bottomnav) + 88px); }
}

/* ============================================================
   Barre de navigation basse (mobile)
   ============================================================ */
.bp-bottomnav { display: none; }
@media (max-width: 768px) {
  :root { --bp-bottomnav: 60px; }
  .bp-bottomnav {
    display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 75;
    height: 60px; background: var(--white); border-top: 1px solid var(--line);
    padding-bottom: env(safe-area-inset-bottom, 0px);
  }
  .bp-bottomnav__item {
    flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
    background: none; border: none; cursor: pointer; color: var(--ink); text-decoration: none;
    font-family: var(--font-body); font-size: 0.62rem; position: relative; padding: 0;
  }
  .bp-bottomnav__item svg { width: 22px; height: 22px; }
  .bp-bottomnav__item .cart-count { position: absolute; top: 5px; left: 54%; }
  body { padding-bottom: 60px; }
}

/* ============================================================
   Galerie produit swipeable (scroll-snap)
   ============================================================ */
.gallery__main {
  position: relative; display: flex; overflow-x: auto; overflow-y: hidden;
  scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch;
  scrollbar-width: none; aspect-ratio: 1 / 1; padding: 0;
}
.gallery__main::-webkit-scrollbar { display: none; }
.gallery__slide {
  flex: 0 0 100%; scroll-snap-align: center; display: grid; place-items: center;
  background: linear-gradient(150deg, var(--mint), #cfe0d4);
}
.gallery__slide img { width: 100%; height: 100%; object-fit: cover; }
.gallery__slide svg { width: 60%; }
.gthumb { padding: 0; cursor: pointer; }

/* Tiroir panier : structure imbriquée (.widget_shopping_cart_content) - flex pied collant */
.bp-cart-drawer__body { display: flex; flex-direction: column; padding: 0; min-height: 0; }
.bp-cart-drawer .widget_shopping_cart_content { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; }

/* ============================================================
   NOUVEAUX ÉCRANS (merci, panier vide, compte, recherche)
   ============================================================ */

/* --- Empty states (panier vide, aucun résultat) --- */
.empty { max-width: 540px; margin: 0 auto; text-align: center; padding: 4.5rem 0 5rem; }
.empty__art { width: 130px; height: 130px; margin: 0 auto 1.8rem; border-radius: 50%; background: var(--mint); display: grid; place-items: center; position: relative; }
.empty__art svg { width: 64%; }
.empty h1 { font-size: clamp(1.8rem, 4vw, 2.6rem); margin-bottom: 0.8rem; }
.empty p { color: var(--muted); font-size: 1.05rem; margin-bottom: 1.8rem; max-width: 40ch; margin-left: auto; margin-right: auto; }
.empty__cta { display: flex; gap: 0.7rem; justify-content: center; flex-wrap: wrap; }
.empty__links { margin-top: 2.6rem; display: flex; gap: 0.6rem; justify-content: center; flex-wrap: wrap; }
.empty__links a { background: var(--white); border: 1px solid var(--line); border-radius: 999px; padding: 0.5rem 1rem; font-family: var(--font-mono); font-size: 0.78rem; }
.empty__links a:hover { border-color: var(--teal); color: var(--teal); }

/* --- Page Merci / commande reçue --- */
.tyhero { background: var(--teal); color: var(--paper); border-radius: 0 0 var(--radius-lg) var(--radius-lg); position: relative; overflow: hidden; }
.tyhero__holes { position: absolute; inset: 0; opacity: 0.4; pointer-events: none; }
.tyhero__inner { position: relative; max-width: 640px; padding: 3.5rem clamp(1.5rem, 4vw, 2.6rem) 3rem; }
.tycheck { width: 64px; height: 64px; border-radius: 50%; background: var(--optic); color: var(--ink); display: grid; place-items: center; font-size: 2rem; font-weight: 800; margin-bottom: 1.4rem; }
.tyhero h1 { font-size: clamp(2.2rem, 5vw, 3.4rem); margin-bottom: 0.8rem; }
.tyhero h1 .hl { color: var(--optic); }
.tyhero p { color: rgba(243,245,242,0.85); font-size: 1.1rem; max-width: 46ch; }
.tyhero__order { display: inline-flex; align-items: center; gap: 0.6rem; margin-top: 1.4rem; background: rgba(255,255,255,0.1); border: 1px solid rgba(255,255,255,0.25); border-radius: 999px; padding: 0.5rem 1rem; font-family: var(--font-mono); font-size: 0.85rem; flex-wrap: wrap; }
.tyhero__order b { color: var(--optic); }

.tylayout { display: grid; grid-template-columns: 1fr 360px; gap: 2.5rem; padding: 2.5rem 0 4rem; align-items: start; }
.tycard { background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.6rem 1.8rem; margin-bottom: 1.4rem; }
.tycard h2 { font-size: 1.25rem; margin-bottom: 1.1rem; }

.timeline { list-style: none; margin: 0; padding: 0; }
.timeline li { position: relative; padding: 0 0 1.5rem 2.2rem; list-style: none; }
.timeline li::before { content: ""; position: absolute; left: 7px; top: 4px; bottom: -4px; width: 2px; background: var(--line); }
.timeline li:last-child::before { display: none; }
.timeline li .dot2 { position: absolute; left: 0; top: 2px; width: 16px; height: 16px; border-radius: 50%; background: var(--white); border: 2px solid var(--line); }
.timeline li.done .dot2 { background: var(--teal); border-color: var(--teal); }
.timeline li.now .dot2 { background: var(--optic); border-color: var(--teal); }
.timeline li b { font-family: var(--font-display); font-size: 0.98rem; display: block; }
.timeline li span { font-size: 0.85rem; color: var(--muted); }

.info-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 1.2rem; }
.info-pair .k { font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); display: block; margin-bottom: 0.3rem; }
.info-pair .v { font-size: 0.95rem; line-height: 1.5; }
.ty-line { display: flex; gap: 1rem; align-items: center; padding: 0.8rem 0; border-bottom: 1px solid var(--line); }
.ty-line:last-child { border-bottom: none; }
.ty-line__img { width: 56px; height: 56px; border-radius: 10px; background: linear-gradient(150deg, var(--mint), #cfe0d4); display: grid; place-items: center; flex: none; overflow: hidden; }
.ty-line__img svg { width: 62%; }
.ty-line__img img { width: 100%; height: 100%; object-fit: cover; }
.ty-line__meta { flex: 1; }
.ty-line__meta b { font-size: 0.95rem; }
.ty-line__meta span { display: block; font-family: var(--font-mono); font-size: 0.74rem; color: var(--muted); }

/* --- Auth (connexion / inscription / mdp perdu) --- */
.authwrap { max-width: 900px; margin: 0 auto; padding: 1rem 0 4rem; }
.authhead { text-align: center; padding: 1rem 0 2.4rem; }
.authhead h1 { font-size: clamp(2rem, 4.5vw, 3rem); margin-bottom: 0.6rem; }
.authhead p { color: var(--muted); }
.authgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.6rem; align-items: start; }
.authcard { background: var(--white); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 2.2rem; }
.authcard--accent { background: var(--teal); color: var(--paper); }
.authcard h2 { font-size: 1.5rem; margin-bottom: 0.4rem; }
.authcard--accent h2 { color: var(--paper); }
.authcard > p { color: var(--muted); font-size: 0.9rem; margin-bottom: 1.4rem; }
.authcard--accent > p { color: rgba(243,245,242,0.8); }
.authcard .field { margin-bottom: 1rem; }
.authcard .btn { width: 100%; justify-content: center; margin-top: 0.6rem; }
.auth-row { display: flex; justify-content: space-between; align-items: center; font-size: 0.85rem; margin-top: 0.8rem; flex-wrap: wrap; gap: 0.5rem; }
.auth-row label { display: flex; gap: 0.4rem; align-items: center; color: var(--muted); }
.auth-row a { color: var(--teal); font-weight: 600; border-bottom: 2px solid var(--optic); }
.authcard--accent .auth-row a { color: var(--optic); border: none; }
.benefits { list-style: none; display: grid; gap: 0.8rem; margin-top: 1rem; padding: 0; }
.benefits li { display: flex; gap: 0.6rem; align-items: flex-start; font-size: 0.95rem; list-style: none; }
.benefits li .ic { color: var(--optic); flex: none; }

/* --- Espace compte (dashboard + sous-pages) --- */
.acct { display: grid; grid-template-columns: 250px 1fr; gap: 2.5rem; padding: 2rem 0 4rem; align-items: start; }
.acct__nav { background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); padding: 1rem; position: sticky; top: 90px; }
.acct__user { display: flex; gap: 0.8rem; align-items: center; padding: 0.6rem 0.6rem 1rem; border-bottom: 1px solid var(--line); margin-bottom: 0.6rem; }
.acct__avatar { width: 44px; height: 44px; border-radius: 50%; background: var(--optic); color: var(--ink); display: grid; place-items: center; font-family: var(--font-display); font-weight: 800; flex: none; }
.acct__user b { display: block; font-family: var(--font-display); font-size: 0.98rem; }
.acct__user span { font-size: 0.78rem; color: var(--muted); word-break: break-all; }
.acct__nav a { display: flex; align-items: center; gap: 0.6rem; padding: 0.7rem 0.8rem; border-radius: 10px; font-weight: 600; font-size: 0.92rem; color: var(--ink); }
.acct__nav a:hover { background: var(--paper); }
.acct__nav a.is-active { background: var(--ink); color: var(--paper); }
.acct__nav a .ic { width: 18px; text-align: center; flex: none; display: inline-flex; }
.acct__nav a.logout { color: var(--muted); margin-top: 0.4rem; border-top: 1px solid var(--line); border-radius: 0; }

.acct__main h1 { font-size: clamp(1.8rem, 3.5vw, 2.6rem); margin-bottom: 0.4rem; }
.acct__intro { color: var(--muted); margin-bottom: 1.8rem; }
.acct-cards { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; margin-bottom: 1.8rem; }
.acct-card { background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.5rem; }
.acct-card .eyebrow { display: block; margin-bottom: 0.8rem; }
.acct-card h3 { font-size: 1.05rem; margin-bottom: 0.3rem; }
.acct-card p { font-size: 0.9rem; color: var(--muted); margin-bottom: 1rem; }
.acct-card a { font-weight: 700; color: var(--teal); border-bottom: 2px solid var(--optic); padding-bottom: 2px; font-size: 0.9rem; }

.orders { display: grid; gap: 1rem; }
.order-card { background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.3rem 1.5rem; }
.order-card__head { display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap; padding-bottom: 1rem; border-bottom: 1px solid var(--line); margin-bottom: 1rem; }
.order-card__head .num { font-family: var(--font-mono); font-size: 0.8rem; color: var(--muted); }
.order-card__head h3 { font-size: 1.1rem; }
.badge { font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: 0.06em; text-transform: uppercase; padding: 0.3rem 0.6rem; border-radius: 999px; white-space: nowrap; }
.badge--ok { background: rgba(15,76,66,0.12); color: var(--teal); }
.badge--ship { background: var(--optic); color: var(--ink); }
.badge--wait { background: var(--mint); color: var(--teal); }
.order-card__foot { display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap; margin-top: 1rem; }
.order-thumbs { display: flex; gap: 0.5rem; }
.order-thumbs .t { width: 44px; height: 44px; border-radius: 8px; background: linear-gradient(150deg, var(--mint), #cfe0d4); display: grid; place-items: center; overflow: hidden; }
.order-thumbs .t svg { width: 60%; }
.order-thumbs .t img { width: 100%; height: 100%; object-fit: cover; }
.order-card__total { font-family: var(--font-display); font-weight: 800; font-size: 1.15rem; }

.addr-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.addr-card { background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.5rem; }
.addr-card h3 { font-size: 1.05rem; margin-bottom: 0.8rem; display: flex; align-items: center; gap: 0.5rem; }
.addr-card address { font-style: normal; color: #2c3a33; line-height: 1.7; font-size: 0.95rem; margin-bottom: 1rem; }
.addr-card .edit { font-weight: 700; color: var(--teal); border-bottom: 2px solid var(--optic); padding-bottom: 2px; font-size: 0.88rem; }

.acct-form { background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.8rem; max-width: 620px; }
.acct-form .fieldset-label { font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); margin: 1.4rem 0 0.8rem; display: block; }

/* --- Page recherche --- */
.searchbar { max-width: 640px; margin: 0 auto 2rem; display: flex; gap: 0.6rem; }
.searchbar input { flex: 1; min-width: 0; padding: 0.95rem 1.2rem; border-radius: 999px; border: 1px solid var(--line); font-family: var(--font-body); font-size: 1rem; background: var(--white); }
.searchbar input:focus { outline: 2px solid var(--teal); }
.search-meta { font-family: var(--font-mono); font-size: 0.82rem; color: var(--muted); margin-bottom: 1.6rem; }
.search-meta b { color: var(--ink); }
.suggest { display: flex; gap: 0.5rem; flex-wrap: wrap; justify-content: center; margin-top: 1.2rem; }
.suggest a { background: var(--white); border: 1px solid var(--line); border-radius: 999px; padding: 0.45rem 0.9rem; font-size: 0.85rem; }
.suggest a:hover { border-color: var(--teal); color: var(--teal); }

/* --- Responsive (mobile-first : on replie sous les breakpoints) --- */
@media (max-width: 960px) {
  .tylayout { grid-template-columns: 1fr; }
  .acct { grid-template-columns: 1fr; }
  .acct__nav { position: static; }
  .authgrid { grid-template-columns: 1fr; }
  .acct-cards, .addr-grid { grid-template-columns: 1fr; }
}
@media (max-width: 540px) {
  .info-pair { grid-template-columns: 1fr; }
  .order-card__foot { gap: 0.7rem; }
  .order-card__foot .btn { width: 100%; justify-content: center; }
}

/* Connexion sans inscription : une seule colonne centrée */
.authgrid--single { grid-template-columns: 1fr; max-width: 460px; margin: 0 auto; }
/* Pagination commandes (compte) */
.acct__main .woocommerce-pagination { display: flex; gap: 0.6rem; }

/* Tuiles catégorie avec photo de fond (image de catégorie WooCommerce) */
.cat--photo { background-size: cover; background-position: center; color: var(--paper); }
.cat--photo::before {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(11,58,51,0.12) 0%, rgba(11,58,51,0.55) 55%, rgba(11,58,51,0.9) 100%);
  transition: background .2s ease;
}
.cat--photo:hover::before { background: linear-gradient(180deg, rgba(11,58,51,0.25) 0%, rgba(11,58,51,0.7) 55%, rgba(11,58,51,0.95) 100%); }
.cat--photo > * { position: relative; z-index: 1; }
/* La flèche en bas à droite, alignée avec le titre (ne pas laisser .cat--photo > * écraser son position:absolute) */
.cat--photo .cat__arrow { position: absolute; top: auto; bottom: 1.2rem; right: 1.2rem; z-index: 2; }
.cat--photo h3 { color: var(--paper); }
.cat--photo .tag { color: rgba(243,245,242,0.85); }
.cat--photo.holes { background-image: none; } /* le motif holes laisse place à la photo (inline) */

/* Fiche produit : Description + Caractéristiques côte à côte */
.pdp-detail { display: grid; grid-template-columns: 1.5fr 0.9fr; gap: 3rem; align-items: start; }
.pdp-detail--single { display: block; }
.pdp-detail__desc h2 { font-size: clamp(1.6rem, 2.8vw, 2.2rem); margin-bottom: 1.2rem; }
.pdp-detail__desc p { color: #2c3a33; max-width: 62ch; margin-bottom: 1rem; }
.pdp-detail__desc p:last-child { margin-bottom: 0; }
.pdp-detail__specs { background: var(--white); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 1.8rem 2rem; position: sticky; top: 90px; }
.pdp-detail__specs h3 { font-size: 1.2rem; margin-bottom: 0.4rem; }
.pdp-detail__specs .spectable { width: 100%; max-width: none; }
.pdp-detail__specs .spectable tr:last-child { border-bottom: none; }
@media (max-width: 860px) {
  .pdp-detail { grid-template-columns: 1fr; gap: 1.6rem; }
  .pdp-detail__specs { position: static; }
}

/* Liens légaux du bas de footer : en ligne (pas en bloc comme les colonnes) */
.footer__bottom a { display: inline; padding: 0; }
.footer__bottom a:hover { color: var(--optic); }

/* Cartes guides (liste) avec image à la une */
.guide-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.guide-card { background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; display: flex; flex-direction: column; transition: transform .2s ease, box-shadow .2s ease; }
.guide-card:hover { transform: translateY(-4px); box-shadow: var(--shadow); }
.guide-card__img { display: block; aspect-ratio: 16 / 10; background: linear-gradient(150deg, var(--mint), #cfe0d4); overflow: hidden; }
.guide-card__img img { width: 100%; height: 100%; object-fit: cover; }
.guide-card__body { padding: 1.2rem 1.3rem 1.4rem; }
.guide-card__body .eyebrow { color: var(--teal); display: block; margin-bottom: 0.4rem; }
.guide-card__body h3 { font-size: 1.15rem; line-height: 1.15; }
@media (max-width: 860px) { .guide-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 540px) { .guide-grid { grid-template-columns: 1fr; } }

/* ===== Guide d'achat sous la grille catégorie (SEO) ===== */
.cat-guide { margin: 4rem 0 1rem; border-top: 1px solid var(--line); padding-top: 2.5rem; }
.cat-guide__inner { max-width: none; }
.cat-guide h2 { font-family: var(--font-display); font-size: clamp(1.5rem, 3vw, 2rem); line-height: 1.12; color: var(--teal); margin: 2.2rem 0 0.8rem; }
.cat-guide h2:first-child { margin-top: 0; }
.cat-guide h3 { font-family: var(--font-display); font-size: 1.2rem; color: var(--ink); margin: 1.6rem 0 0.5rem; }
.cat-guide p { color: var(--ink); line-height: 1.7; margin: 0 0 1rem; }
.cat-guide ul { margin: 0 0 1.2rem; padding-left: 1.1rem; }
.cat-guide li { color: var(--ink); line-height: 1.65; margin-bottom: 0.4rem; }
.cat-guide a { color: var(--teal); text-decoration: underline; text-underline-offset: 2px; }
.cat-guide a:hover { color: var(--teal-deep); }
.cat-guide strong { color: var(--ink); }
/* FAQ en grille pleine largeur pour exploiter l'espace dispo */
.cat-guide .cat-faq { margin-top: 2.4rem; max-width: none; display: grid; grid-template-columns: 1fr 1fr; gap: 0.8rem; align-items: start; }
.cat-guide .cat-faq__q { border: 1px solid var(--line); border-radius: 14px; padding: 1rem 1.2rem; margin: 0; background: #fff; }
.cat-guide .cat-faq__q h3 { margin: 0 0 0.35rem; font-size: 1.05rem; }
.cat-guide .cat-faq__q p { margin: 0; max-width: none; color: var(--muted); }
@media (max-width: 720px) { .cat-guide .cat-faq { grid-template-columns: 1fr; } }
@media (max-width: 600px) { .cat-guide { margin-top: 2.6rem; } }

/* ============================================================
 * Quizz « Quel équipement choisir ? »
 * ============================================================ */
/* Lien quizz mis en avant dans le menu */
.nav__quiz { background: var(--optic); color: var(--ink) !important; border-radius: 999px; padding: 0.35rem 0.8rem; font-weight: 700; }
.nav__quiz:hover { background: var(--optic-deep); }
.nav__item > .nav__quiz::after { display: none; }
.bp-quiz-page { padding-bottom: 3rem; }
.bp-quiz-hero { text-align: center; max-width: 680px; margin: 1rem auto 2rem; }
.bp-quiz-hero__eyebrow { font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--teal); }
.bp-quiz-hero h1 { font-size: clamp(2rem, 4vw, 2.8rem); margin: 0.6rem 0 0.8rem; }
.bp-quiz-hero p { color: var(--muted); font-size: 1.05rem; }

.bp-quiz { max-width: 680px; margin: 0 auto; background: var(--white); border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow); padding: 2rem 2.2rem 2.4rem; min-height: 360px; }

/* Progression */
.bp-quiz__bar { height: 6px; border-radius: 999px; background: var(--mint); overflow: hidden; }
.bp-quiz__bar i { display: block; height: 100%; background: var(--optic-deep); border-radius: 999px; transition: width .3s ease; }
.bp-quiz__meta { font-family: var(--font-mono); font-size: 0.74rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); margin: 0.9rem 0 0.4rem; }
.bp-quiz__q { font-size: 1.5rem; margin: 0 0 1.4rem; }

/* Options */
.bp-quiz__opts { display: grid; gap: 0.7rem; }
.bp-quiz__opt { text-align: left; background: var(--paper); border: 1.5px solid var(--line); border-radius: var(--radius); padding: 1rem 1.2rem; cursor: pointer; display: flex; flex-direction: column; gap: 0.2rem; transition: border-color .15s ease, background .15s ease, transform .1s ease; font-family: inherit; }
.bp-quiz__opt:hover { border-color: var(--teal); background: #fff; }
.bp-quiz__opt.is-on { border-color: var(--teal); background: var(--mint); }
.bp-quiz__opt-l { font-family: var(--font-display); font-weight: 700; font-size: 1.05rem; color: var(--ink); }
.bp-quiz__opt-d { font-size: 0.88rem; color: var(--muted); }
.bp-quiz__back { margin-top: 1.4rem; background: none; border: none; color: var(--muted); font-family: var(--font-mono); font-size: 0.85rem; cursor: pointer; padding: 0.3rem 0; }
.bp-quiz__back:hover { color: var(--teal); }

/* Résultats */
.bp-quiz__rhead { text-align: center; margin-bottom: 1.6rem; }
.bp-quiz__rkicker { font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--teal); }
.bp-quiz__rhead h2 { font-size: 1.6rem; margin-top: 0.3rem; }
.bp-quiz__pcard { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 0.5rem; border: 1px solid var(--line); border-radius: var(--radius); padding: 1.2rem; text-decoration: none; position: relative; background: #fff; transition: border-color .15s ease; }
.bp-quiz__pcard:hover { border-color: var(--teal); }
.bp-quiz__pbadge { position: absolute; top: 10px; left: 10px; background: var(--ink); color: var(--paper); font-family: var(--font-mono); font-size: 0.62rem; letter-spacing: 0.06em; text-transform: uppercase; border-radius: 999px; padding: 0.18rem 0.55rem; }
.bp-quiz__pimg { width: 130px; height: 130px; display: flex; align-items: center; justify-content: center; }
.bp-quiz__pimg img { width: 100%; height: 100%; object-fit: contain; }
.bp-quiz__pimg svg { width: 80%; }
.bp-quiz__pname { font-family: var(--font-display); font-weight: 700; color: var(--ink); }
.bp-quiz__pprice { font-family: var(--font-mono); font-weight: 700; color: var(--teal); }
.bp-quiz__whytxt { color: var(--muted); font-size: 0.95rem; margin: 0.8rem 0 1rem; }

/* Reco joueur seul */
.bp-quiz__hero-reco { display: grid; grid-template-columns: 1fr 1.1fr; gap: 1.6rem; align-items: center; }
.bp-quiz__herotxt .btn { width: 100%; justify-content: center; }
.bp-quiz__seemore { display: inline-block; margin-top: 0.9rem; font-family: var(--font-mono); font-size: 0.85rem; color: var(--teal); text-decoration: none; }
.bp-quiz__seemore:hover { text-decoration: underline; }
.bp-quiz__compl { margin-top: 1.8rem; border-top: 1px solid var(--line); padding-top: 1.4rem; }
.bp-quiz__compl-t { font-family: var(--font-mono); font-size: 0.74rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); }
.bp-quiz__compl-row { display: grid; grid-template-columns: 1fr 1fr; gap: 0.8rem; margin-top: 0.8rem; }

/* Reco multi-joueurs (2 choix) */
.bp-quiz__choice { display: grid; grid-template-columns: 1fr 1fr; gap: 1.2rem; }
.bp-quiz__col { display: flex; flex-direction: column; }
.bp-quiz__col h3 { font-size: 1.05rem; margin: 0 0 0.8rem; text-align: center; }
.bp-quiz__col .btn { width: 100%; justify-content: center; margin-top: auto; }
.bp-quiz__col .bp-quiz__whytxt { text-align: center; }

.bp-quiz__restart { display: block; margin: 1.8rem auto 0; background: none; border: 1px solid var(--line); border-radius: 999px; color: var(--muted); font-family: var(--font-mono); font-size: 0.82rem; padding: 0.5rem 1.2rem; cursor: pointer; }
.bp-quiz__restart:hover { border-color: var(--teal); color: var(--teal); }
.btn.loading { opacity: 0.6; pointer-events: none; }

/* Contenu SEO sous le quizz */
.bp-quiz-seo { max-width: 760px; margin: 3rem auto 0; }
.bp-quiz-seo h2 { font-size: 1.5rem; margin: 2rem 0 0.8rem; }
.bp-quiz-seo h3 { font-size: 1.15rem; margin: 1.4rem 0 0.5rem; }
.bp-quiz-seo p, .bp-quiz-seo li { color: var(--muted); line-height: 1.7; }
.bp-quiz-seo ul { margin: 0.5rem 0 1rem 1.2rem; }
.bp-quiz-seo a { color: var(--teal); }

@media (max-width: 680px) {
  .bp-quiz { padding: 1.4rem 1.2rem 1.8rem; }
  .bp-quiz__hero-reco, .bp-quiz__choice, .bp-quiz__compl-row { grid-template-columns: 1fr; }
  .bp-quiz__q { font-size: 1.3rem; }
}