/* ==========================================================================
   ô BÔ LINGE — Feuille de style principale
   Design system « couture » : laiton, terracotta, crème, charbon.
   Auteur : Refonte sur mesure. Mobile-first.
   ========================================================================== */

/* ---------------------------------------------------------------
   1. TOKENS
   --------------------------------------------------------------- */
:root {
  /* Couleurs de marque */
  --ob-brass:        #B89B46;   /* accent signature */
  --ob-brass-dark:   #9C8038;
  --ob-gold:         #D9BB5E;
  --ob-terracotta:   #E1623D;   /* promos / soldes */
  --ob-terracotta-d: #C24E2C;
  --ob-cream:        #FAF7F3;
  --ob-cream-2:      #F3ECE3;
  --ob-ivory:        #FFFFFF;
  --ob-charcoal:     #23282D;   /* footer / sombre */
  --ob-charcoal-2:   #2E353B;
  --ob-ink:          #1E1E1C;   /* titres */
  --ob-body:         #5A5A57;   /* texte courant */
  --ob-muted:        #8A867F;
  --ob-line:         #E7E0D6;   /* filets / bordures */
  --ob-line-2:       #D8CFC1;

  /* Typographie */
  --ff-display: "Cormorant Garamond", "Times New Roman", Georgia, serif;
  --ff-body:    "Jost", "Open Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --ff-eyebrow: "Jost", sans-serif;

  /* Échelle typographique fluide */
  --fs-eyebrow: 0.78rem;
  --fs-body:    1.02rem;
  --fs-h4:      clamp(1.15rem, 1rem + 0.6vw, 1.45rem);
  --fs-h3:      clamp(1.5rem, 1.2rem + 1.2vw, 2.1rem);
  --fs-h2:      clamp(2rem, 1.4rem + 2.6vw, 3.2rem);
  --fs-h1:      clamp(2.6rem, 1.6rem + 4.4vw, 5rem);

  /* Rythme & rayons */
  --wrap:       1280px;
  --wrap-wide:  1500px;
  --gutter:     clamp(1.1rem, 4vw, 2.5rem);
  --radius:     4px;
  --radius-lg:  10px;
  --shadow-sm:  0 2px 10px rgba(30,30,28,.06);
  --shadow-md:  0 12px 40px rgba(30,30,28,.10);
  --shadow-lg:  0 30px 70px rgba(30,30,28,.16);
  --ease:       cubic-bezier(.22,.61,.36,1);
  --header-h:   84px;
}

/* ---------------------------------------------------------------
   2. RESET LÉGER
   --------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--ff-body);
  font-size: var(--fs-body);
  line-height: 1.7;
  color: var(--ob-body);
  background: var(--ob-ivory);
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img, svg, video { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; transition: color .25s var(--ease); }
button { font-family: inherit; cursor: pointer; }
ul, ol { margin: 0; padding: 0; list-style: none; }
h1, h2, h3, h4, h5 { margin: 0 0 .5em; color: var(--ob-ink); font-weight: 500; line-height: 1.12; letter-spacing: -.01em; }
h1, h2, h3 { font-family: var(--ff-display); }
p { margin: 0 0 1.2em; }
:focus-visible { outline: 2px solid var(--ob-brass); outline-offset: 3px; }
::selection { background: var(--ob-brass); color: #fff; }

/* ---------------------------------------------------------------
   3. UTILITAIRES DE MISE EN PAGE
   --------------------------------------------------------------- */
.ob-wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: var(--gutter); }
.ob-wrap--wide { max-width: var(--wrap-wide); }
.ob-section { padding-block: clamp(3.5rem, 8vw, 7rem); }
.ob-section--tight { padding-block: clamp(2.5rem, 5vw, 4rem); }
.ob-cream { background: var(--ob-cream); }
.ob-cream-2 { background: var(--ob-cream-2); }
.ob-dark { background: var(--ob-charcoal); color: #d7d2c9; }
.ob-dark h1, .ob-dark h2, .ob-dark h3 { color: #fff; }
.text-center { text-align: center; }
.sr-only { position:absolute!important; width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0; }

/* Eyebrow & titres de section */
.ob-eyebrow {
  font-family: var(--ff-eyebrow);
  font-size: var(--fs-eyebrow);
  text-transform: uppercase;
  letter-spacing: .28em;
  font-weight: 500;
  color: var(--ob-brass);
  display: inline-flex; align-items: center; gap: .8em;
  margin-bottom: 1rem;
}
.ob-eyebrow::before { content: ""; width: 34px; height: 1px; background: var(--ob-brass); opacity: .7; }
.ob-eyebrow--center { justify-content: center; }
.ob-eyebrow--center::after { content: ""; width: 34px; height: 1px; background: var(--ob-brass); opacity: .7; }
.ob-section-head { max-width: 640px; margin: 0 auto clamp(2rem, 4vw, 3.2rem); }
.ob-section-head.text-center { text-align: center; }
.ob-section-title { font-size: var(--fs-h2); }
.ob-section-sub { color: var(--ob-body); font-size: 1.05rem; }

/* ---------------------------------------------------------------
   4. BOUTONS
   --------------------------------------------------------------- */
.ob-btn {
  --btn-bg: var(--ob-ink);
  --btn-fg: #fff;
  display: inline-flex; align-items: center; justify-content: center; gap: .6em;
  font-family: var(--ff-body);
  font-size: .82rem; font-weight: 500;
  letter-spacing: .16em; text-transform: uppercase;
  padding: 1.05em 2.2em;
  background: var(--btn-bg); color: var(--btn-fg);
  border: 1px solid var(--btn-bg);
  border-radius: var(--radius);
  transition: background .3s var(--ease), color .3s var(--ease), border-color .3s var(--ease), transform .3s var(--ease);
  will-change: transform;
}
.ob-btn:hover { transform: translateY(-2px); }
.ob-btn--brass { --btn-bg: var(--ob-brass); --btn-fg: #fff; }
.ob-btn--brass:hover { --btn-bg: var(--ob-brass-dark); }
.ob-btn--terra { --btn-bg: var(--ob-terracotta); --btn-fg: #fff; }
.ob-btn--terra:hover { --btn-bg: var(--ob-terracotta-d); }
.ob-btn--ghost { --btn-bg: transparent; --btn-fg: var(--ob-ink); border-color: var(--ob-line-2); }
.ob-btn--ghost:hover { --btn-bg: var(--ob-ink); --btn-fg: #fff; border-color: var(--ob-ink); }
.ob-btn--light { --btn-bg: transparent; --btn-fg: #fff; border-color: rgba(255,255,255,.5); }
.ob-btn--light:hover { --btn-bg: #fff; --btn-fg: var(--ob-ink); border-color:#fff; }
.ob-link-underline { position: relative; font-weight: 500; letter-spacing: .04em; color: var(--ob-ink); }
.ob-link-underline::after { content:""; position:absolute; left:0; bottom:-4px; width:100%; height:1px; background: var(--ob-brass); transform: scaleX(0); transform-origin: right; transition: transform .35s var(--ease); }
.ob-link-underline:hover { color: var(--ob-brass); }
.ob-link-underline:hover::after { transform: scaleX(1); transform-origin: left; }

/* ---------------------------------------------------------------
   5. BARRE PROMO + HEADER
   --------------------------------------------------------------- */
.ob-topbar {
  background: var(--ob-charcoal); color: #ece7dd;
  font-size: .78rem; letter-spacing: .06em;
}
.ob-topbar .ob-wrap { display:flex; align-items:center; justify-content:center; gap:1.5rem; min-height: 40px; padding-block:.5rem; text-align:center; }
.ob-topbar strong { color: var(--ob-gold); font-weight: 600; }

.ob-header {
  position: sticky; top: 0; z-index: 200;
  background: rgba(255,255,255,.96);
  backdrop-filter: saturate(140%) blur(8px);
  border-bottom: 1px solid var(--ob-line);
  transition: box-shadow .3s var(--ease);
}
.ob-header.is-scrolled { box-shadow: var(--shadow-sm); }
.ob-header__inner { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; min-height: var(--header-h); gap: 1rem; }
.ob-header__nav { justify-self: start; }
.ob-header__brand { justify-self: center; }
.ob-header__tools { justify-self: end; display: flex; align-items: center; gap: 1.15rem; }

.ob-brand { font-family: var(--ff-display); font-size: 1.9rem; font-weight: 600; letter-spacing: .02em; color: var(--ob-ink); line-height:1; display:inline-flex; align-items:center; }
.ob-brand em { font-style: normal; color: var(--ob-brass); }
.ob-brand img { max-height: 52px; width:auto; }

/* Tools icons */
.ob-tool { display:inline-flex; align-items:center; justify-content:center; width: 42px; height: 42px; border-radius: 50%; color: var(--ob-ink); position: relative; transition: background .25s var(--ease); }
.ob-tool:hover { background: var(--ob-cream-2); color: var(--ob-brass); }
.ob-tool svg { width: 21px; height: 21px; }
.ob-cart-count { position:absolute; top:2px; right:2px; min-width:18px; height:18px; padding:0 4px; border-radius:9px; background: var(--ob-terracotta); color:#fff; font-size:.66rem; font-weight:600; display:flex; align-items:center; justify-content:center; font-family:var(--ff-body); }

/* Navigation principale */
.ob-nav > ul { display: flex; align-items: center; gap: 1.9rem; }
.ob-nav a { font-size: .82rem; font-weight: 500; letter-spacing: .1em; text-transform: uppercase; color: var(--ob-ink); padding-block: .4rem; position: relative; }
.ob-nav > ul > li > a::after { content:""; position:absolute; left:0; bottom:-2px; width:100%; height:1.5px; background: var(--ob-brass); transform: scaleX(0); transform-origin: right; transition: transform .3s var(--ease); }
.ob-nav > ul > li:hover > a::after, .ob-nav .current-menu-item > a::after { transform: scaleX(1); transform-origin: left; }
.ob-nav .menu-item-has-children > a::before { /* petit chevron */ }

/* Sous-menus & méga-menu */
.ob-nav li { position: relative; }
.ob-nav .sub-menu {
  position: absolute; top: 100%; left: 0; min-width: 240px;
  background: #fff; border: 1px solid var(--ob-line);
  box-shadow: var(--shadow-md); border-radius: var(--radius-lg);
  padding: .7rem; opacity: 0; visibility: hidden; transform: translateY(10px);
  transition: opacity .25s var(--ease), transform .25s var(--ease), visibility .25s;
  z-index: 50;
}
.ob-nav li:hover > .sub-menu { opacity: 1; visibility: visible; transform: translateY(0); }
.ob-nav .sub-menu a { display:block; text-transform: none; letter-spacing: .02em; font-size: .92rem; padding: .6rem .9rem; border-radius: var(--radius); color: var(--ob-body); }
.ob-nav .sub-menu a:hover { background: var(--ob-cream); color: var(--ob-brass); }
.ob-nav .sub-menu .sub-menu { top: -.7rem; left: 100%; }

/* ---------------------------------------------------------------
   6. HERO ÉDITORIAL
   --------------------------------------------------------------- */
.ob-hero { position: relative; background: var(--ob-cream); overflow: hidden; }
.ob-hero__media { position: relative; width: 100%; height: clamp(58vh, 62vh, 780px); min-height: 460px; }
.ob-hero__media img { width: 100%; height: 100%; object-fit: cover; }
.ob-hero__media::after { content:""; position:absolute; inset:0; background: linear-gradient(90deg, rgba(30,30,28,.5) 0%, rgba(30,30,28,.12) 45%, transparent 70%); }
.ob-hero__content { position: absolute; inset: 0; display: flex; align-items: center; }
.ob-hero__content .ob-wrap { width: 100%; }
.ob-hero__inner { max-width: 620px; color: #fff; }
.ob-hero__inner .ob-eyebrow { color: var(--ob-gold); }
.ob-hero__inner .ob-eyebrow::before { background: var(--ob-gold); }
.ob-hero__title { font-family: var(--ff-display); font-size: var(--fs-h1); font-weight: 500; color: #fff; margin-bottom: .4em; }
.ob-hero__title em { font-style: italic; color: var(--ob-gold); }
.ob-hero__lead { font-size: 1.15rem; color: rgba(255,255,255,.9); max-width: 460px; margin-bottom: 2rem; }
.ob-hero__cta { display: flex; flex-wrap: wrap; gap: 1rem; }

/* ---------------------------------------------------------------
   7. BANDEAU USP
   --------------------------------------------------------------- */
.ob-usp { border-block: 1px solid var(--ob-line); background: #fff; }
.ob-usp__grid { display: grid; grid-template-columns: repeat(4, 1fr); }
.ob-usp__item { display:flex; align-items:center; gap: .9rem; padding: 1.4rem var(--gutter); justify-content:center; text-align:left; }
.ob-usp__item + .ob-usp__item { border-left: 1px solid var(--ob-line); }
.ob-usp__item svg { width: 30px; height: 30px; color: var(--ob-brass); flex: none; }
.ob-usp__item strong { display:block; color: var(--ob-ink); font-size: .92rem; font-weight: 600; letter-spacing:.02em; }
.ob-usp__item span { font-size: .8rem; color: var(--ob-muted); }

/* ---------------------------------------------------------------
   8. GRILLE UNIVERS / CATÉGORIES
   --------------------------------------------------------------- */
.ob-cats { display: grid; gap: 1.2rem; grid-template-columns: repeat(6, 1fr); grid-auto-rows: 240px; }
.ob-cat { position: relative; overflow: hidden; border-radius: var(--radius-lg); display: block; grid-column: span 2; }
.ob-cat--tall { grid-row: span 2; }
.ob-cat--wide { grid-column: span 3; }
.ob-cat img { width:100%; height:100%; object-fit: cover; transition: transform .8s var(--ease); }
.ob-cat::after { content:""; position:absolute; inset:0; background: linear-gradient(to top, rgba(30,30,28,.62), rgba(30,30,28,.05) 55%); transition: background .4s var(--ease); }
.ob-cat:hover img { transform: scale(1.06); }
.ob-cat__label { position: absolute; left: 0; bottom: 0; z-index: 2; padding: 1.4rem 1.6rem; color:#fff; }
.ob-cat__label .k { display:block; font-family: var(--ff-display); font-size: 1.5rem; font-weight: 500; }
.ob-cat__label .s { font-size: .78rem; letter-spacing: .16em; text-transform: uppercase; color: var(--ob-gold); display:inline-flex; align-items:center; gap:.5em; }
.ob-cat__label .s::after { content:"→"; transition: transform .3s var(--ease); }
.ob-cat:hover .ob-cat__label .s::after { transform: translateX(5px); }

/* ---------------------------------------------------------------
   9. CARTES PRODUIT (grille générique + Woo)
   --------------------------------------------------------------- */
.ob-products { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(1rem, 2vw, 1.8rem); }
.ob-product-card, ul.products li.product { position: relative; text-align: left; }
.ob-product-card__media, ul.products li.product a img { position: relative; overflow: hidden; border-radius: var(--radius-lg); background: var(--ob-cream-2); margin-bottom: 1rem; }
.ob-product-card img { transition: transform .7s var(--ease); }
.ob-product-card:hover img { transform: scale(1.05); }
.ob-badge { position:absolute; top: .8rem; left:.8rem; z-index:3; background: var(--ob-terracotta); color:#fff; font-size:.68rem; font-weight:600; letter-spacing:.08em; text-transform:uppercase; padding:.35em .7em; border-radius: 3px; }
.ob-badge--new { background: var(--ob-ink); }
.ob-product-card h3, ul.products li.product .woocommerce-loop-product__title { font-family: var(--ff-body); font-size: 1rem; font-weight: 500; color: var(--ob-ink); letter-spacing: 0; margin-bottom: .3rem; line-height:1.4; }
.ob-product-card .price, ul.products li.product .price { color: var(--ob-brass-dark); font-weight: 600; font-size: 1rem; }
.ob-product-card .price del { color: var(--ob-muted); font-weight: 400; margin-right:.4em; }
.ob-product-card .price ins { text-decoration: none; color: var(--ob-terracotta); }

/* ---------------------------------------------------------------
   10. SECTION PROMOS (split terracotta)
   --------------------------------------------------------------- */
.ob-split { display: grid; grid-template-columns: 1fr 1fr; align-items: stretch; }
.ob-split__media img { width:100%; height:100%; object-fit: cover; min-height: 340px; }
.ob-split__body { padding: clamp(2.5rem, 6vw, 5rem); display:flex; flex-direction: column; justify-content:center; }
.ob-split--terra .ob-split__body { background: var(--ob-terracotta); color:#fff; }
.ob-split--terra .ob-eyebrow, .ob-split--terra .ob-eyebrow::before { color:#fff; background: transparent; }
.ob-split--terra .ob-eyebrow::before { background:#fff; }
.ob-split--terra h2 { color:#fff; }

/* ---------------------------------------------------------------
   11. SECTION PROS
   --------------------------------------------------------------- */
.ob-pros { display:grid; grid-template-columns: 1.1fr .9fr; gap: clamp(2rem,5vw,4.5rem); align-items:center; }
.ob-pros__media { border-radius: var(--radius-lg); overflow:hidden; box-shadow: var(--shadow-md); }
.ob-pros__list { display:grid; gap:1rem; margin: 1.5rem 0 2rem; }
.ob-pros__list li { display:flex; gap:.9rem; align-items:flex-start; }
.ob-pros__list svg { color: var(--ob-brass); width:22px; height:22px; flex:none; margin-top:3px; }

/* ---------------------------------------------------------------
   12. BLOG / ACTUALITÉS
   --------------------------------------------------------------- */
.ob-posts { display:grid; grid-template-columns: repeat(3,1fr); gap: clamp(1.2rem,3vw,2.2rem); }
.ob-post-card__media { overflow:hidden; border-radius: var(--radius-lg); margin-bottom:1.1rem; aspect-ratio: 3/2; }
.ob-post-card img { width:100%; height:100%; object-fit:cover; transition: transform .7s var(--ease); }
.ob-post-card:hover img { transform: scale(1.05); }
.ob-post-card .meta { font-size:.76rem; letter-spacing:.14em; text-transform:uppercase; color: var(--ob-brass); margin-bottom:.5rem; }
.ob-post-card h3 { font-size: var(--fs-h4); font-family: var(--ff-display); }
.ob-post-card h3 a:hover { color: var(--ob-brass); }

/* ---------------------------------------------------------------
   13. NEWSLETTER
   --------------------------------------------------------------- */
.ob-newsletter { text-align:center; }
.ob-newsletter__form { display:flex; gap:.6rem; max-width: 520px; margin: 1.5rem auto 0; }
.ob-newsletter__form input[type=email] { flex:1; padding: 1em 1.2em; border:1px solid var(--ob-line-2); border-radius: var(--radius); font-family: var(--ff-body); font-size:.95rem; background:#fff; }
.ob-newsletter__form input:focus { outline:none; border-color: var(--ob-brass); }

/* ---------------------------------------------------------------
   14. INSTAGRAM
   --------------------------------------------------------------- */
.ob-insta { display:grid; grid-template-columns: repeat(6,1fr); gap:.5rem; }
.ob-insta a { position:relative; overflow:hidden; aspect-ratio:1; display:block; }
.ob-insta img { width:100%; height:100%; object-fit:cover; transition: transform .6s var(--ease); }
.ob-insta a:hover img { transform: scale(1.08); }
.ob-insta a::after { content:""; position:absolute; inset:0; background: rgba(184,155,70,0); transition: background .3s var(--ease); }
.ob-insta a:hover::after { background: rgba(184,155,70,.25); }

/* ---------------------------------------------------------------
   15. FIL D'ARIANE
   --------------------------------------------------------------- */
.ob-breadcrumb { font-size:.82rem; color: var(--ob-muted); letter-spacing:.02em; }
.ob-breadcrumb a { color: var(--ob-body); }
.ob-breadcrumb a:hover { color: var(--ob-brass); }
.ob-breadcrumb .sep { margin-inline:.5em; color: var(--ob-line-2); }

/* ---------------------------------------------------------------
   16. FOOTER
   --------------------------------------------------------------- */
.ob-footer { background: var(--ob-charcoal); color: #b6b1a8; font-size:.92rem; }
.ob-footer a { color:#c9c4ba; }
.ob-footer a:hover { color: var(--ob-gold); }
.ob-footer__top { display:grid; grid-template-columns: 1.6fr 1fr 1fr 1.4fr; gap: clamp(1.5rem,4vw,3rem); padding-block: clamp(3rem,6vw,4.5rem); }
.ob-footer h4 { color:#fff; font-family: var(--ff-body); font-size:.8rem; text-transform:uppercase; letter-spacing:.18em; margin-bottom:1.3rem; font-weight:600; }
.ob-footer__brand .ob-brand { color:#fff; margin-bottom:1rem; }
.ob-footer__brand .ob-brand em { color: var(--ob-gold); }
.ob-footer ul li { margin-bottom:.6rem; }
.ob-footer__social { display:flex; gap:.7rem; margin-top:1.2rem; }
.ob-footer__social a { width:40px;height:40px;border:1px solid rgba(255,255,255,.16); border-radius:50%; display:flex;align-items:center;justify-content:center; }
.ob-footer__social a:hover { background: var(--ob-brass); border-color: var(--ob-brass); color:#fff; }
.ob-footer__social svg { width:18px;height:18px; }
.ob-footer__bottom { border-top:1px solid rgba(255,255,255,.1); padding-block:1.4rem; display:flex; flex-wrap:wrap; gap:1rem; justify-content:space-between; align-items:center; font-size:.8rem; color:#8f8a80; }
.ob-footer__bottom nav { display:flex; gap:1.2rem; flex-wrap:wrap; }
.ob-store { display:flex; gap:.8rem; margin-bottom:1rem; }
.ob-store svg { color: var(--ob-brass); width:20px; height:20px; flex:none; margin-top:2px; }
.ob-store strong { color:#fff; display:block; font-size:.9rem; }
.ob-store span { font-size:.82rem; }

/* ---------------------------------------------------------------
   17. MENU MOBILE / BURGER
   --------------------------------------------------------------- */
.ob-burger { display:none; width:44px;height:44px; border:none; background:none; flex-direction:column; justify-content:center; gap:5px; }
.ob-burger span { display:block; width:24px; height:2px; background: var(--ob-ink); transition: transform .3s var(--ease), opacity .3s; margin-inline:auto; }
.ob-mobile-panel { position: fixed; inset:0 0 0 auto; width: min(88vw, 380px); background:#fff; z-index: 300; transform: translateX(100%); transition: transform .4s var(--ease); overflow-y:auto; box-shadow: var(--shadow-lg); padding: 1.5rem; }
.ob-mobile-panel.is-open { transform: translateX(0); }
.ob-mobile-overlay { position:fixed; inset:0; background: rgba(30,30,28,.5); opacity:0; visibility:hidden; transition:opacity .3s; z-index:290; }
.ob-mobile-overlay.is-open { opacity:1; visibility:visible; }
.ob-mobile-panel .menu, .ob-mobile-panel .sub-menu { display:block; }
.ob-mobile-panel li { border-bottom:1px solid var(--ob-line); }
.ob-mobile-panel a { display:block; padding:.9rem .2rem; text-transform:uppercase; font-size:.85rem; letter-spacing:.08em; color: var(--ob-ink); }
.ob-mobile-panel .sub-menu a { text-transform:none; padding-left:1.2rem; color: var(--ob-body); font-size:.9rem; letter-spacing:0; }
.ob-mobile-close { margin-left:auto; display:block; background:none;border:none;font-size:1.6rem;line-height:1; color:var(--ob-ink); }

/* ---------------------------------------------------------------
   18. ANIMATIONS D'APPARITION
   --------------------------------------------------------------- */
.ob-reveal { opacity:0; transform: translateY(28px); transition: opacity .8s var(--ease), transform .8s var(--ease); }
.ob-reveal.is-in { opacity:1; transform:none; }
@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
  .ob-reveal { opacity:1; transform:none; }
}

/* ---------------------------------------------------------------
   19. PAGE / ARTICLE
   --------------------------------------------------------------- */
.ob-page-hero { background: var(--ob-cream); padding-block: clamp(2.5rem,6vw,4.5rem); border-bottom:1px solid var(--ob-line); text-align:center; }
.ob-page-hero h1 { font-size: var(--fs-h1); }
.ob-entry { max-width: 760px; margin-inline:auto; }
.ob-entry img { border-radius: var(--radius-lg); margin-block: 1.5rem; }
.ob-entry h2, .ob-entry h3 { margin-top: 1.6em; }
.ob-entry a { color: var(--ob-brass-dark); text-decoration: underline; text-underline-offset: 3px; }

/* ---------------------------------------------------------------
   20. RESPONSIVE
   --------------------------------------------------------------- */
@media (max-width: 1024px) {
  .ob-usp__grid { grid-template-columns: repeat(2,1fr); }
  .ob-usp__item:nth-child(3) { border-left:none; }
  .ob-usp__item { border-top:1px solid var(--ob-line); }
  .ob-usp__item:nth-child(-n+2) { border-top:none; }
  .ob-products { grid-template-columns: repeat(3,1fr); }
  .ob-insta { grid-template-columns: repeat(4,1fr); }
  .ob-footer__top { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 860px) {
  :root { --header-h: 68px; }
  .ob-header__inner { grid-template-columns: 1fr auto 1fr; }
  .ob-header__nav { display:none; }
  .ob-burger { display:flex; }
  .ob-header__brand { justify-self:center; }
  .ob-nav-desktop { display:none; }
  .ob-cats { grid-template-columns: repeat(2,1fr); grid-auto-rows: 200px; }
  .ob-cat, .ob-cat--wide { grid-column: span 1; }
  .ob-cat--tall { grid-row: span 1; }
  .ob-split { grid-template-columns: 1fr; }
  .ob-pros { grid-template-columns: 1fr; }
  .ob-posts { grid-template-columns: 1fr; }
  .ob-products { grid-template-columns: repeat(2,1fr); }
  .ob-hero__media { height: 72vh; }
  .ob-hero__media::after { background: linear-gradient(to top, rgba(30,30,28,.7), rgba(30,30,28,.15)); }
}
@media (max-width: 560px) {
  .ob-usp__grid { grid-template-columns:1fr; }
  .ob-usp__item { border-left:none!important; }
  .ob-insta { grid-template-columns: repeat(3,1fr); }
  .ob-footer__top { grid-template-columns:1fr; }
  .ob-newsletter__form { flex-direction:column; }
}

/* ==== AJUSTEMENTS 21-07 ==== */

/* --- Mosaïque des univers : visuels paysage, plus de tuile verticale --- */
.ob-cats { grid-auto-rows: 235px; }
.ob-cat--tall { grid-row: auto; }              /* neutralisé : recadrait mal l'horizontal */
.ob-cat--lead { grid-row: span 2; }            /* deux tuiles majeures en ouverture */
.ob-cat--lead .ob-cat__label h3 { font-size: clamp(1.5rem, 2.6vw, 2.1rem); }

@media (max-width: 900px) {
  .ob-cats { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 170px; }
  .ob-cat, .ob-cat--wide, .ob-cat--lead { grid-column: span 1; grid-row: span 1; }
  .ob-cat--lead { grid-column: span 2; grid-row: span 1; }
}
@media (max-width: 560px) {
  .ob-cats { grid-auto-rows: 150px; }
}

/* --- Bas de page mobile : plus de chevauchement entre blog et Instagram --- */
.ob-post-card { display: flex; flex-direction: column; min-width: 0; }
.ob-post-card > *:last-child { margin-top: auto; }
.ob-posts { align-items: start; }

@media (max-width: 900px) {
  /* L'animation d'apparition décalait les blocs pendant la transition. */
  .ob-reveal { opacity: 1 !important; transform: none !important; transition: none !important; }
  .ob-posts { grid-template-columns: 1fr; gap: 2rem; }
  .ob-post-card { padding-bottom: .4rem; }
  .ob-post-card h3 { margin-bottom: .5rem; }
  .ob-post-card p { margin-bottom: .9rem; }
  /* Chaque section reprend la main sur celle qui la précède. */
  .ob-section, .ob-section--tight { position: relative; isolation: isolate; }
  .ob-section--tight { padding-block: 3rem 2.5rem; }
}


/* Débordement horizontal : les panneaux hors-écran sont en position:fixed,
   donc non rognés par le clip du body. `clip` sur html les contient sans
   créer de conteneur de défilement — le header sticky reste intact
   (contrairement à `hidden`, qui l'aurait cassé). */
html { overflow-x: hidden; overflow-x: clip; }
@supports not (overflow-x: clip) {
  .ob-mobile-panel, .ob-side-cart { max-width: 100vw; }
}

/* ==== Hero : le bloc d'informations produit posé sur du verre dépoli ==== */
.ob-rev__inner {
  position: relative;
  padding: clamp(1.6rem, 3vw, 2.4rem) clamp(1.5rem, 3vw, 2.6rem) clamp(1.8rem, 3vw, 2.6rem);
  border-radius: 20px;
  max-width: 560px;
  background: rgba(20, 20, 19, .28);
  -webkit-backdrop-filter: saturate(150%) blur(18px);
  backdrop-filter: saturate(150%) blur(18px);
  border: 1px solid rgba(255, 255, 255, .18);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, .22) inset,
    0 24px 60px -20px rgba(0, 0, 0, .55);
}
/* Léger dégradé interne : le texte garde du contraste même sur un visuel clair. */
.ob-rev__inner::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(150deg, rgba(0,0,0,.18), rgba(0,0,0,.04) 55%, transparent);
  pointer-events: none;
  z-index: -1;
}
.ob-rev__inner > * { position: relative; }

/* Le voile plein écran devient inutile : le verre porte désormais la lisibilité. */
.ob-rev__veil { opacity: .55; }

@media (max-width: 780px) {
  .ob-rev__inner {
    max-width: none;
    border-radius: 16px;
    padding: 1.3rem 1.2rem 1.5rem;
    -webkit-backdrop-filter: saturate(150%) blur(14px);
    backdrop-filter: saturate(150%) blur(14px);
  }
}

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .ob-rev__inner { background: rgba(20, 20, 19, .62); }
}

/* ==== PIED DE PAGE ==== */

.ob-footer {
  background: var(--ob-charcoal);
  color: rgba(255, 255, 255, .74);
  margin-top: 0;
}

/* --- Bandeau de réassurance --- */
.ob-footer__assur {
  border-bottom: 1px solid rgba(255, 255, 255, .10);
  background: rgba(255, 255, 255, .025);
}
.ob-footer__assur ul {
  list-style: none; margin: 0; padding: 1.5rem 0;
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.2rem;
}
.ob-footer__assur li { display: flex; align-items: center; gap: .8rem; }
.ob-footer__assur svg { flex: none; color: var(--ob-gold); opacity: .95; }
.ob-footer__assur span { display: flex; flex-direction: column; line-height: 1.35; }
.ob-footer__assur strong {
  font-family: var(--ff-body); font-size: .84rem; font-weight: 600;
  letter-spacing: .04em; color: #fff;
}
.ob-footer__assur span > :not(strong),
.ob-footer__assur span { font-size: .76rem; }
.ob-footer__assur span { color: rgba(255, 255, 255, .55); }

/* --- Colonnes --- */
.ob-footer__top {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr 1.35fr 1.5fr;
  gap: clamp(1.6rem, 3vw, 3rem);
  padding-block: clamp(2.8rem, 5vw, 4.2rem);
}
.ob-footer__brand .ob-brand { margin-bottom: 1.1rem; }
.ob-footer__pitch { font-size: .85rem; line-height: 1.7; max-width: 30ch; margin-bottom: 1.4rem; }

.ob-footer__col h4 {
  font-family: var(--ff-body);
  font-size: .74rem; font-weight: 600;
  letter-spacing: .16em; text-transform: uppercase;
  color: #fff; margin: 0 0 1.1rem;
}
.ob-footer__col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .55rem; }
.ob-footer__col a {
  font-size: .85rem; color: rgba(255, 255, 255, .68);
  text-decoration: none; transition: color .25s var(--ease);
}
.ob-footer__col a:hover, .ob-footer__col a:focus-visible { color: var(--ob-gold); }

/* --- Boutiques --- */
.ob-fstore {
  padding: .85rem 0;
  border-bottom: 1px solid rgba(255, 255, 255, .08);
  display: grid; gap: .18rem;
}
.ob-fstore:first-of-type { padding-top: 0; }
.ob-fstore__zone {
  font-size: .64rem; letter-spacing: .18em; text-transform: uppercase;
  color: var(--ob-gold);
}
.ob-fstore strong { font-size: .86rem; color: #fff; font-weight: 500; }
.ob-fstore__addr { font-size: .76rem; color: rgba(255, 255, 255, .5); line-height: 1.5; }
.ob-fstore a {
  font-size: .82rem; color: rgba(255, 255, 255, .78);
  text-decoration: none; justify-self: start;
  border-bottom: 1px solid rgba(255, 255, 255, .22);
  transition: color .25s var(--ease), border-color .25s var(--ease);
}
.ob-fstore a:hover { color: var(--ob-gold); border-color: var(--ob-gold); }
.ob-fstore__link {
  display: inline-block; margin-top: .9rem;
  font-size: .78rem; letter-spacing: .08em; text-transform: uppercase;
  color: var(--ob-gold); text-decoration: none;
}
.ob-fstore__link:hover span { margin-left: .3rem; }
.ob-fstore__link span { transition: margin-left .25s var(--ease); display: inline-block; }

/* --- Newsletter --- */
.ob-footer__news p { font-size: .82rem; line-height: 1.65; margin-bottom: 1rem; }
.ob-newsletter__form { display: flex; gap: .5rem; }
.ob-newsletter__form input {
  flex: 1 1 auto; min-width: 0;
  padding: .78rem .9rem;
  background: rgba(255, 255, 255, .06);
  border: 1px solid rgba(255, 255, 255, .16);
  border-radius: 6px; color: #fff; font-size: .85rem;
  transition: border-color .25s var(--ease), background .25s var(--ease);
}
.ob-newsletter__form input::placeholder { color: rgba(255, 255, 255, .42); }
.ob-newsletter__form input:focus {
  outline: none; border-color: var(--ob-gold); background: rgba(255, 255, 255, .10);
}
.ob-newsletter__form .ob-btn { flex: none; white-space: nowrap; padding-inline: 1.1rem; }
.ob-footer__rgpd { font-size: .7rem !important; color: rgba(255, 255, 255, .4); margin-top: .7rem !important; }

.ob-footer__pay { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: 1.3rem; }
.ob-footer__pay span {
  font-size: .64rem; letter-spacing: .08em; text-transform: uppercase;
  padding: .32rem .6rem; border-radius: 4px;
  border: 1px solid rgba(255, 255, 255, .16);
  color: rgba(255, 255, 255, .58);
}

/* --- Réseaux sociaux --- */
.ob-footer__social { display: flex; gap: .6rem; }
.ob-footer__social a {
  width: 38px; height: 38px; border-radius: 50%;
  display: grid; place-items: center;
  border: 1px solid rgba(255, 255, 255, .18);
  color: rgba(255, 255, 255, .8);
  transition: background .25s var(--ease), border-color .25s var(--ease), color .25s var(--ease);
}
.ob-footer__social a:hover {
  background: var(--ob-brass); border-color: var(--ob-brass); color: #fff;
}

/* --- Barre du bas --- */
.ob-footer__bottom {
  border-top: 1px solid rgba(255, 255, 255, .10);
  padding-block: 1.5rem;
  display: flex; flex-wrap: wrap; align-items: center;
  justify-content: space-between; gap: .9rem 1.6rem;
  font-size: .76rem; color: rgba(255, 255, 255, .48);
}
.ob-footer__bottom nav { display: flex; flex-wrap: wrap; gap: 1.2rem; }
.ob-footer__bottom nav a,
.ob-footer__bottom nav li a {
  color: rgba(255, 255, 255, .55); text-decoration: none; font-size: .76rem;
  transition: color .25s var(--ease);
}
.ob-footer__bottom nav a:hover { color: var(--ob-gold); }
.ob-footer__bottom nav ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 1.2rem; }

.ob-footer__sign { display: inline-flex; align-items: center; gap: .32rem; }
.ob-footer__heart {
  color: var(--ob-terracotta);
  font-size: .9em;
  animation: ob-pulse 2.4s var(--ease) infinite;
}
@keyframes ob-pulse {
  0%, 100% { transform: scale(1); }
  12%      { transform: scale(1.22); }
  24%      { transform: scale(1); }
}
@media (prefers-reduced-motion: reduce) { .ob-footer__heart { animation: none; } }
.ob-footer__sign a {
  color: rgba(255, 255, 255, .8); text-decoration: none;
  border-bottom: 1px solid rgba(255, 255, 255, .28);
  transition: color .25s var(--ease), border-color .25s var(--ease);
}
.ob-footer__sign a:hover { color: var(--ob-gold); border-color: var(--ob-gold); }

/* --- Adaptations écrans intermédiaires et mobiles --- */
@media (max-width: 1180px) {
  .ob-footer__top { grid-template-columns: 1.4fr 1fr 1fr; }
  .ob-footer__stores, .ob-footer__news { grid-column: span 1; }
  .ob-footer__news { grid-column: 1 / -1; max-width: 520px; }
}
@media (max-width: 900px) {
  .ob-footer__assur ul { grid-template-columns: repeat(2, 1fr); gap: 1rem; padding: 1.2rem 0; }
  .ob-footer__top { grid-template-columns: repeat(2, 1fr); gap: 1.8rem 1.4rem; }
  .ob-footer__brand, .ob-footer__news { grid-column: 1 / -1; }
  .ob-footer__pitch { max-width: none; }
}
@media (max-width: 620px) {
  .ob-footer__assur ul { grid-template-columns: 1fr; gap: .8rem; }
  .ob-footer__top { grid-template-columns: 1fr; gap: 0; padding-block: 2rem; }

  /* Les listes de liens deviennent des accordéons : le pied de page reste court. */
  .ob-footer__col { border-top: 1px solid rgba(255, 255, 255, .10); }
  .ob-footer__brand { padding-bottom: 1.6rem; }
  .ob-footer__col h4 {
    margin: 0; padding: 1.1rem 0; cursor: pointer;
    display: flex; align-items: center; justify-content: space-between;
  }
  .ob-footer__col h4::after {
    content: "+"; font-size: 1.1rem; font-weight: 300;
    color: var(--ob-gold); transition: transform .3s var(--ease);
  }
  .ob-footer__col.is-open h4::after { transform: rotate(45deg); }
  .ob-footer__col > :not(h4) {
    max-height: 0; overflow: hidden; opacity: 0;
    transition: max-height .35s var(--ease), opacity .25s var(--ease), margin .35s var(--ease);
  }
  .ob-footer__col.is-open > :not(h4) { max-height: 900px; opacity: 1; margin-bottom: 1.2rem; }

  .ob-newsletter__form { flex-direction: column; }
  .ob-newsletter__form .ob-btn { width: 100%; }

  .ob-footer__bottom {
    flex-direction: column; align-items: flex-start;
    text-align: left; padding-block: 1.6rem; gap: 1rem;
  }
  .ob-footer__bottom nav, .ob-footer__bottom nav ul { gap: .5rem 1rem; }
}

/* ==== Hero : voile allégé, le verre dépoli porte désormais la lisibilité ==== */
.ob-rev__veil {
  background: linear-gradient(100deg, rgba(20,20,19,.55) 0%, rgba(20,20,19,.28) 45%, rgba(20,20,19,.10) 100%) !important;
  opacity: 1;
}

/* Correctif champ newsletter : spécificité renforcée face aux styles de formulaire globaux. */
.ob-footer .ob-newsletter__form input[type="email"] {
  background: rgba(255, 255, 255, .07) !important;
  border: 1px solid rgba(255, 255, 255, .18) !important;
  color: #fff !important;
}
.ob-footer .ob-newsletter__form input[type="email"]::placeholder { color: rgba(255, 255, 255, .45) !important; }
.ob-footer .ob-newsletter__form input[type="email"]:focus {
  background: rgba(255, 255, 255, .12) !important;
  border-color: var(--ob-gold) !important;
}

/* Section avis : le widget Trustindex est centré et contenu. */
.ob-avis__widget { max-width: 1100px; margin-inline: auto; }
.ob-avis__widget .ti-widget { margin: 0 !important; }

/* ==== PAGES ÉDITORIALES ==== */

/* --- Contact : formulaire + colonne de contacts directs --- */
.ob-contact {
  display: grid;
  grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr);
  gap: clamp(1.6rem, 3.5vw, 3.2rem);
  align-items: start;
  margin-block: clamp(2rem, 4vw, 3.4rem);
}
.ob-contact__form > h2 {
  font-family: var(--ff-display); font-weight: 400; font-size: clamp(1.7rem, 3vw, 2.3rem); line-height: 1.15;
  margin: .35rem 0 .5rem;
}
.ob-contact__sub { color: var(--ob-body); margin-bottom: 1.6rem; max-width: 52ch; }

.ob-form {
  background: var(--ob-cream);
  border: 1px solid var(--ob-line);
  border-radius: var(--radius-lg);
  padding: clamp(1.3rem, 2.6vw, 2.1rem);
}
.ob-form__pot { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.ob-form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.ob-field { margin: 0 0 1.05rem; display: block; }
.ob-field label {
  display: block; margin-bottom: .38rem;
  font-size: .74rem; letter-spacing: .1em; text-transform: uppercase;
  color: var(--ob-ink); font-weight: 500;
}
.ob-field label span { color: var(--ob-terracotta); }
.ob-field label em {
  font-style: normal; text-transform: none; letter-spacing: 0;
  color: var(--ob-body); opacity: .7; font-size: .8em;
}
.ob-field input, .ob-field select, .ob-field textarea {
  width: 100%;
  padding: .78rem .9rem;
  font: inherit; font-size: .92rem;
  color: var(--ob-ink);
  background: #fff;
  border: 1px solid var(--ob-line);
  border-radius: 8px;
  transition: border-color .2s var(--ease), box-shadow .2s var(--ease);
}
.ob-field textarea { resize: vertical; min-height: 140px; line-height: 1.6; }
.ob-field input:focus, .ob-field select:focus, .ob-field textarea:focus {
  outline: none;
  border-color: var(--ob-brass);
  box-shadow: 0 0 0 3px rgba(184, 155, 70, .14);
}
.ob-form__foot {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: .8rem 1.2rem; margin-top: .4rem;
}
.ob-form__legal { font-size: .76rem; color: var(--ob-body); opacity: .8; }

.ob-form__alert {
  padding: .95rem 1.1rem; border-radius: 8px;
  margin-bottom: 1.3rem; font-size: .9rem; line-height: 1.55;
  border-left: 3px solid;
}
.ob-form__alert strong { display: block; margin-bottom: .15rem; }
.ob-form__alert--ok { background: rgba(184, 155, 70, .10); border-color: var(--ob-brass); }
.ob-form__alert--ko { background: rgba(225, 98, 61, .09); border-color: var(--ob-terracotta); }

/* Cartes de contact latérales */
.ob-contact__side { display: grid; gap: 1rem; }
.ob-ccard {
  background: #fff;
  border: 1px solid var(--ob-line);
  border-radius: var(--radius-lg);
  padding: 1.3rem 1.4rem;
  display: grid; gap: .45rem;
}
.ob-ccard__zone {
  font-size: .64rem; letter-spacing: .18em; text-transform: uppercase;
  color: var(--ob-brass);
}
.ob-ccard h3 { font-family: var(--ff-display); font-weight: 400; font-size: 1.22rem; line-height: 1.2; margin: 0; }
.ob-ccard__addr { font-size: .85rem; line-height: 1.6; color: var(--ob-body); margin: 0; }
.ob-ccard__tel {
  font-size: 1.05rem; font-weight: 500; color: var(--ob-ink);
  text-decoration: none; justify-self: start;
  border-bottom: 1px solid var(--ob-line);
}
.ob-ccard__tel:hover { border-color: var(--ob-brass); color: var(--ob-brass); }
.ob-ccard__map {
  justify-self: start; font-size: .78rem; letter-spacing: .08em;
  text-transform: uppercase; color: var(--ob-brass); text-decoration: none;
}
.ob-ccard__map span { display: inline-block; transition: margin-left .25s var(--ease); }
.ob-ccard__map:hover span { margin-left: .3rem; }
.ob-ccard--plain { background: var(--ob-cream); }
.ob-ccard--plain a { color: var(--ob-ink); }
.ob-ccard__note { font-size: .8rem; line-height: 1.6; color: var(--ob-body); margin: .2rem 0 0; }

/* --- FAQ --- */
.ob-faq { margin-block: clamp(2.5rem, 5vw, 4.5rem); max-width: 860px; }
.ob-faq__head { margin-bottom: 1.6rem; }
.ob-faq__head h2 { font-family: var(--ff-display); font-weight: 400; font-size: clamp(1.6rem, 3vw, 2.2rem); line-height: 1.15; margin: .3rem 0 0; }
.ob-faq__item { border-bottom: 1px solid var(--ob-line); }
.ob-faq__item summary {
  cursor: pointer; list-style: none;
  padding: 1.15rem 2.2rem 1.15rem 0;
  position: relative;
  font-size: 1.02rem; font-weight: 500; color: var(--ob-ink);
  transition: color .2s var(--ease);
}
.ob-faq__item summary::-webkit-details-marker { display: none; }
.ob-faq__item summary:hover { color: var(--ob-brass); }
.ob-faq__item summary::after {
  content: ""; position: absolute; right: .35rem; top: 50%;
  width: 10px; height: 10px;
  border-right: 1.5px solid var(--ob-brass);
  border-bottom: 1.5px solid var(--ob-brass);
  transform: translateY(-70%) rotate(45deg);
  transition: transform .28s var(--ease);
}
.ob-faq__item[open] summary::after { transform: translateY(-25%) rotate(-135deg); }
.ob-faq__item > div { padding: 0 2.2rem 1.3rem 0; }
.ob-faq__item p { margin: 0; color: var(--ob-body); line-height: 1.75; font-size: .94rem; }

/* --- Venir en magasin --- */
.ob-storegrid {
  display: grid; grid-template-columns: repeat(2, 1fr);
  gap: clamp(1.2rem, 2.5vw, 2rem);
  margin-block: clamp(2rem, 4vw, 3.2rem);
}
.ob-store2 {
  background: #fff;
  border: 1px solid var(--ob-line);
  border-radius: var(--radius-lg);
  padding: clamp(1.4rem, 2.6vw, 2.2rem);
  display: flex; flex-direction: column;
}
.ob-store2__zone {
  font-size: .64rem; letter-spacing: .18em; text-transform: uppercase;
  color: var(--ob-brass);
}
.ob-store2__head h2 { font-family: var(--ff-display); font-weight: 400; font-size: clamp(1.5rem, 2.6vw, 2rem); line-height: 1.15; margin: .3rem 0 .6rem; }
.ob-store2__head p { color: var(--ob-body); font-size: .92rem; line-height: 1.7; margin: 0 0 1.4rem; }
.ob-store2__body {
  display: grid; grid-template-columns: 1fr 1fr; gap: 1.6rem;
  padding-top: 1.4rem; border-top: 1px solid var(--ob-line);
}
.ob-store2__block h3 {
  font-family: var(--ff-body); font-size: .7rem; font-weight: 600;
  letter-spacing: .16em; text-transform: uppercase;
  color: var(--ob-ink); margin: 0 0 .8rem;
}
.ob-hours { list-style: none; margin: 0; padding: 0; display: grid; gap: .45rem; }
.ob-hours li {
  display: flex; justify-content: space-between; gap: .8rem;
  font-size: .82rem; line-height: 1.45;
  padding-bottom: .45rem; border-bottom: 1px dashed rgba(30, 30, 28, .10);
}
.ob-hours li:last-child { border-bottom: 0; padding-bottom: 0; }
.ob-hours span { color: var(--ob-body); flex: none; }
.ob-hours em { font-style: normal; text-align: right; color: var(--ob-ink); }
.ob-hours i { font-style: normal; display: block; font-size: .74rem; color: var(--ob-body); opacity: .75; }
.ob-store2__addr { font-size: .85rem; line-height: 1.65; color: var(--ob-body); margin: 0 0 .8rem; }
.ob-store2__contact { display: grid; gap: .3rem; margin: 0 0 1.1rem; }
.ob-store2__contact a { font-size: .88rem; color: var(--ob-ink); text-decoration: none; justify-self: start; border-bottom: 1px solid var(--ob-line); }
.ob-store2__contact a:hover { color: var(--ob-brass); border-color: var(--ob-brass); }
.ob-store2__note {
  margin: 1.3rem 0 0; padding: .85rem 1rem;
  background: var(--ob-cream); border-radius: 8px;
  font-size: .82rem; font-style: italic; color: var(--ob-body);
}

/* Bouton contour, réutilisable */
.ob-btn--outline {
  background: transparent; color: var(--ob-ink);
  border: 1px solid var(--ob-ink);
}
.ob-btn--outline:hover { background: var(--ob-ink); color: #fff; }

/* --- « Ce que vous ne trouverez pas en ligne » --- */
.ob-visit {
  margin-block: clamp(2.5rem, 5vw, 4.5rem);
  padding: clamp(2rem, 4vw, 3.2rem);
  background: var(--ob-cream);
  border-radius: var(--radius-lg);
}
.ob-visit__head { margin-bottom: 2rem; max-width: 60ch; }
.ob-visit__head h2 { font-family: var(--ff-display); font-weight: 400; font-size: clamp(1.6rem, 3vw, 2.2rem); line-height: 1.15; margin: .3rem 0 0; }
.ob-visit__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(1.2rem, 2.5vw, 2.2rem); }
.ob-visit__num {
  display: block; font-family: var(--ff-display); font-weight: 400; font-size: 2rem; line-height: 1;
  color: var(--ob-brass); opacity: .5; margin-bottom: .5rem;
}
.ob-visit__item h3 { font-family: var(--ff-body); font-weight: 500; font-size: 1rem; line-height: 1.3; margin: 0 0 .5rem; }
.ob-visit__item p { font-size: .87rem; line-height: 1.7; color: var(--ob-body); margin: 0; }

/* --- Pages PRO : cartes partenaires plus soignées --- */
.ob-partners, .ob-plogos { --ob-gap: clamp(.9rem, 2vw, 1.4rem); }
.ob-partner, .ob-plogo {
  transition: transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s var(--ease);
}
.ob-partner:hover, .ob-plogo:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 34px -18px rgba(30, 30, 28, .3);
  border-color: rgba(184, 155, 70, .45);
}

/* --- Bandeau d'appel à l'action : deux boutons possibles --- */
.ob-cta-band p a + a { margin-left: .7rem; }

/* --- Adaptations --- */
@media (max-width: 1000px) {
  .ob-contact { grid-template-columns: 1fr; }
  .ob-contact__side { grid-template-columns: repeat(2, 1fr); }
  .ob-visit__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 820px) {
  .ob-storegrid { grid-template-columns: 1fr; }
}
@media (max-width: 620px) {
  .ob-form__row { grid-template-columns: 1fr; gap: 0; }
  .ob-contact__side { grid-template-columns: 1fr; }
  .ob-visit__grid { grid-template-columns: 1fr; gap: 1.5rem; }
  .ob-store2__body { grid-template-columns: 1fr; gap: 1.4rem; }
  .ob-form__foot { flex-direction: column; align-items: stretch; }
  .ob-form__foot .ob-btn { width: 100%; }
  .ob-cta-band p a { display: block; margin: .5rem 0 0 !important; }
}

/* ==== HERO DES PAGES ÉDITORIALES ==== */
.ob-phero {
  min-height: 0;
  padding-block: 0;
  border-bottom: 1px solid rgba(184, 155, 70, .35);
}
.ob-phero__content { padding: clamp(2.2rem, 4vw, 3.4rem) 0 clamp(2rem, 3.5vw, 3rem); }

.ob-phero .ob-eyebrow {
  display: block; margin-bottom: .5rem;
  font-size: .7rem; letter-spacing: .2em; text-transform: uppercase;
  color: var(--ob-brass);
}

.ob-phero__title {
  font-family: var(--ff-display); font-weight: 400; font-size: clamp(2.1rem, 5vw, 3.6rem); line-height: 1.04;
  color: var(--ob-ink);
  margin: .15rem 0 0;
  letter-spacing: -.01em;
}
.ob-phero.has-media .ob-phero__title { color: #fff; }

.ob-phero__lead {
  margin: .85rem 0 0;
  max-width: 58ch;
  font-size: clamp(.98rem, 1.4vw, 1.12rem);
  line-height: 1.7;
  color: var(--ob-body);
}
.ob-phero.has-media .ob-phero__lead { color: rgba(255, 255, 255, .85); }

/* Filet doré discret sous le titre. */
.ob-phero__title::after {
  content: "";
  display: block;
  width: 68px; height: 2px;
  margin-top: clamp(.9rem, 1.6vw, 1.3rem);
  background: linear-gradient(90deg, var(--ob-brass), rgba(184, 155, 70, 0));
}

/* Le chapô d'introduction des pages reprend la même respiration. */
.ob-pros-intro, .ob-stores-intro { margin-top: clamp(1.8rem, 3.5vw, 2.8rem); }
.ob-lead {
  font-size: clamp(1rem, 1.5vw, 1.18rem);
  line-height: 1.75;
  color: var(--ob-body);
  max-width: 70ch;
}

/* ==== FOOTER RÉASSURANCE : carrousel mobile ==== */
@media (max-width: 620px) {
  /* Une seule ligne qui défile horizontalement, comme le bandeau d'accueil. */
  .ob-footer__assur ul {
    grid-template-columns: none;
    display: flex;
    flex-wrap: nowrap;
    gap: 0;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    margin: 0 calc(-1 * var(--gutter));
    padding: .2rem 0;
  }
  .ob-footer__assur ul::-webkit-scrollbar { display: none; }
  .ob-footer__assur li {
    scroll-snap-align: center;
    flex: 0 0 auto;
    min-width: 74%;
    justify-content: center;
    padding: .5rem var(--gutter);
    border-right: 1px solid rgba(255, 255, 255, .10);
  }
  .ob-footer__assur li:last-child { border-right: 0; }
  .ob-footer__assur span { align-items: flex-start; }
}

/* ==== ÉCHELLE PORTABLE / TABLETTE ====
   La typo fluide saturait son maximum dès ~1300px : sur portable et tablette
   tout paraissait surdimensionné. On réduit la base rem et on abaisse le
   plafond des titres sur la plage 761–1440px (le mobile <=760 garde sa taille). */

@media (min-width: 761px) and (max-width: 1440px) {
  html { font-size: 93.75%; }               /* ~15px de base */
  :root {
    --fs-h1: clamp(2.2rem, 1.5rem + 2.6vw, 3.4rem);
    --fs-h2: clamp(1.7rem, 1.25rem + 1.5vw, 2.4rem);
    --fs-h3: clamp(1.35rem, 1.1rem + 0.8vw, 1.75rem);
    --fs-h4: clamp(1.1rem, 1rem + 0.4vw, 1.3rem);
    --header-h: 76px;
  }
  /* Titres à taille fixe : on aligne leur plafond sur la nouvelle échelle. */
  .ob-phero__title { font-size: clamp(2rem, 1.4rem + 2.4vw, 3rem); }
}

@media (min-width: 761px) and (max-width: 1180px) {
  html { font-size: 91%; }                  /* ~14.5px de base */
  :root {
    --fs-h1: clamp(2rem, 1.4rem + 2.2vw, 2.9rem);
    --fs-h2: clamp(1.55rem, 1.2rem + 1.3vw, 2.1rem);
    --fs-h3: clamp(1.3rem, 1.1rem + 0.7vw, 1.6rem);
    --header-h: 72px;
  }
}

/* Contraste garanti des boutons pleins (contre l'héritage des liens de contenu) */
a.ob-btn--brass, .ob-btn--brass, .woocommerce a.ob-btn--brass{ color:#fff !important; }
a.ob-btn--brass:hover, .ob-btn--brass:hover{ color:#fff !important; }
a.ob-btn--ghost, .ob-btn--ghost, a.ob-btn--light, .ob-btn--light{ color:var(--ob-ink) !important; }
a.ob-btn--light:hover{ color:var(--ob-ink) !important; }

/* ==== ENCART CONSEIL PERSONNALISÉ ==== */
.ob-advice{ padding-block: clamp(2rem,4vw,3.4rem); }
.ob-advice__inner{
  position:relative; overflow:hidden;
  display:grid; grid-template-columns:1.35fr 1fr; align-items:center; gap:clamp(1.6rem,4vw,3.5rem);
  background:linear-gradient(135deg, var(--ob-charcoal) 0%, var(--ob-ink) 100%);
  border-radius:var(--radius-lg); padding:clamp(2rem,4vw,3.2rem);
  color:#fff;
}
.ob-advice__inner::before{
  content:""; position:absolute; right:-80px; top:-80px; width:320px; height:320px; border-radius:50%;
  background:radial-gradient(circle, rgba(184,155,70,.22), transparent 70%); pointer-events:none;
}
.ob-advice__spark{
  display:inline-grid; place-items:center; width:48px; height:48px; border-radius:50%;
  background:linear-gradient(135deg,var(--ob-brass),var(--ob-gold)); color:#fff; margin-bottom:1rem;
  box-shadow:0 4px 16px rgba(184,155,70,.4);
}
.ob-advice__spark svg{ width:24px; height:24px; }
.ob-advice__text .ob-eyebrow{ color:var(--ob-gold); }
.ob-advice__text h2{
  font-family:var(--ff-display); font-weight:400; font-size:var(--fs-h2); line-height:1.1;
  color:#fff; margin:.3rem 0 .7rem;
}
.ob-advice__text p{ color:rgba(255,255,255,.8); font-size:.98rem; line-height:1.7; max-width:52ch; margin:0 0 1.5rem; }
.ob-advice__cta{ display:flex; align-items:center; flex-wrap:wrap; gap:.8rem 1.2rem; }
.ob-advice__meta{ font-size:.78rem; letter-spacing:.04em; color:rgba(255,255,255,.55); }

/* Étapes illustrées */
.ob-advice__steps{ display:grid; grid-template-columns:1fr 1fr; gap:.9rem; }
.ob-advice__step{
  display:flex; align-items:center; gap:.7rem;
  background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.12);
  border-radius:12px; padding:.9rem 1rem;
}
.ob-advice__step b{
  flex:none; width:30px; height:30px; border-radius:50%;
  display:grid; place-items:center; font-family:var(--ff-display); font-size:1rem;
  background:rgba(217,187,94,.16); color:var(--ob-gold);
}
.ob-advice__step span{ font-size:.84rem; color:rgba(255,255,255,.82); }
.ob-advice__step--result b{ background:var(--ob-brass); color:#fff; }
.ob-advice__step--result span{ color:#fff; font-weight:600; }

@media (max-width:860px){
  .ob-advice__inner{ grid-template-columns:1fr; }
  .ob-advice__steps{ grid-template-columns:1fr 1fr; }
}
@media (max-width:480px){
  .ob-advice__steps{ grid-template-columns:1fr; }
  .ob-advice__cta{ flex-direction:column; align-items:flex-start; }
}

/* ==== HEADER MOBILE : alignement ==== */
@media (max-width: 860px){
  .ob-header__inner{ grid-template-columns:1fr auto 1fr !important; gap:.5rem; }
  .ob-header__brand{ justify-self:center; }
  .ob-header__brand .custom-logo,
  .ob-header__brand img{ height:44px; width:auto; display:block; }
  .ob-header__tools{ justify-self:end; gap:.7rem; }
  .ob-burger{ justify-self:start; }
}

/* ==== MAQUETTE 3D CONSEIL ==== */
.ob-advice__mockup{
  position:relative;
  display:flex; align-items:center; justify-content:center;
  perspective:1400px;
  min-height:440px;
}
.ob-advice__device{
  position:relative; width:min(340px,100%);
  transform-style:preserve-3d;
  transform:
    rotateX(var(--rx, 12deg))
    rotateY(var(--ry, -16deg))
    translateY(var(--ty, 0px));
  transition:transform .15s linear;
  will-change:transform;
}
.ob-advice__frame{
  position:relative;
  background:linear-gradient(160deg,#fff, #FAF7F3);
  border-radius:22px;
  padding:1.3rem 1.2rem 1.5rem;
  box-shadow:
    0 1px 0 rgba(255,255,255,.7) inset,
    0 30px 60px -20px rgba(0,0,0,.55),
    0 10px 24px -12px rgba(184,155,70,.4);
  border:1px solid rgba(255,255,255,.5);
  overflow:hidden;
  height:400px;
}
/* Reflet en diagonale qui glisse */
.ob-advice__frame::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(115deg, transparent 40%, rgba(255,255,255,.35) 50%, transparent 60%);
  transform:translateX(-30%); animation:ob-adv-shine 5.5s ease-in-out infinite;
}
@keyframes ob-adv-shine{ 0%,70%{transform:translateX(-60%);} 100%{transform:translateX(120%);} }

/* Points de progression */
.ob-advice__dots{ display:flex; gap:.4rem; justify-content:center; margin-bottom:1rem; }
.ob-advice__dots i{ width:7px; height:7px; border-radius:50%; background:var(--ob-line-2); transition:all .4s var(--ease); }
.ob-advice__dots i.is-on{ width:20px; border-radius:4px; background:var(--ob-brass); }

/* Écrans empilés */
.ob-advice__screen{
  position:absolute; left:1.2rem; right:1.2rem; top:3.4rem;
  opacity:0; transform:translateY(14px) scale(.98);
  transition:opacity .45s var(--ease), transform .45s var(--ease);
  pointer-events:none;
}
.ob-advice__screen.is-active{ opacity:1; transform:none; }
.ob-advice__q{ font-family:var(--ff-display); font-size:1.25rem; color:var(--ob-ink); margin:0 0 .9rem; text-align:center; }
.ob-advice__spark-mini{ color:var(--ob-brass); }

.ob-advice__opts{ display:grid; gap:.5rem; }
.ob-advice__opt{
  display:flex; align-items:center; gap:.6rem;
  background:#fff; border:1px solid var(--ob-line); border-radius:12px;
  padding:.7rem .8rem; font-size:.86rem; color:var(--ob-ink); text-align:left;
  transition:border-color .3s var(--ease), box-shadow .3s var(--ease), background .3s var(--ease), transform .3s var(--ease);
}
.ob-advice__opt.is-chosen{
  border-color:var(--ob-brass); background:rgba(184,155,70,.08);
  box-shadow:0 8px 20px -10px rgba(184,155,70,.5); transform:translateY(-1px);
}
.ob-advice__ico{ font-size:1.15rem; line-height:1; }
.ob-advice__chip{ width:22px; height:22px; border-radius:50%; flex:none; }
.ob-advice__chip--warm{ background:radial-gradient(circle at 30% 30%,#E1623D,#8A3A20); }
.ob-advice__chip--cool{ background:radial-gradient(circle at 30% 30%,#7FB4C9,#3E6473); }
.ob-advice__chip--temp{ background:radial-gradient(circle at 30% 30%,#E7D9BE,#B89B46); }
.ob-advice__sw{ width:22px; height:22px; border-radius:6px; flex:none; border:1px solid rgba(0,0,0,.06); }
.ob-advice__sw--neutres{ background:linear-gradient(90deg,#F2ECE1,#D8CFC1,#B8A98F); }
.ob-advice__sw--warm{ background:linear-gradient(90deg,#E1623D,#C98A2E,#8A5A22); }
.ob-advice__sw--cool{ background:linear-gradient(90deg,#5B7C8A,#7BA07E,#3E6473); }

/* Écran résultat */
.ob-advice__resultgrid{ display:grid; grid-template-columns:1fr 1fr; gap:.5rem; }
.ob-advice__thumb{ display:block; aspect-ratio:4/3; border-radius:10px; background-size:cover; background-position:center; box-shadow:0 4px 12px -6px rgba(0,0,0,.3); }
.ob-advice__resultcta{
  display:block; text-align:center; margin-top:.8rem;
  font:600 .72rem/1 var(--ff-eyebrow); letter-spacing:.1em; text-transform:uppercase;
  color:#fff; background:var(--ob-brass); border-radius:100px; padding:.7rem;
}

@media (max-width:860px){
  .ob-advice__mockup{ margin-top:.5rem; }
  .ob-advice__device{ --rx:6deg; --ry:0deg; width:min(320px,90%); }
  .ob-advice__frame{ height:380px; }
  .ob-advice__mockup{ min-height:400px; }
  .ob-advice__frame::after{ display:none; }
}
@media (prefers-reduced-motion: reduce){
  .ob-advice__device{ transform:none !important; }
  .ob-advice__frame::after{ animation:none; }
}

/* CTA clair sur bandeau sombre */
.ob-cta-band .ob-btn--light, .ob-dark .ob-btn--light{ color:#fff !important; background:transparent; border:1px solid rgba(255,255,255,.55); }
.ob-cta-band .ob-btn--light:hover, .ob-dark .ob-btn--light:hover{ background:#fff; color:var(--ob-ink) !important; }

/* --- BTN-GHOST-HOVER-WHITE --- */
a.ob-btn--ghost:hover,.ob-btn--ghost:hover{color:#fff !important;}

/* BTN-LIGHT-DARK-CONTEXT-FIX : boutons clairs lisibles sur fond foncé */
.ob-rev a.ob-btn--light,.ob-rev .ob-btn--light,.ob-pro__hero a.ob-btn--light,.ob-pro__hero .ob-btn--light,.ob-pro__herobtns a.ob-btn--light,.ob-pro__herobtns .ob-btn--light{color:#fff !important;}
/* Titres centrés pages partenaires */
.ob-h2-center,.ob-entry .ob-h2-center,h2.ob-h2-center{text-align:center !important;}

/* MOBILE-OFFCANVAS-NO-OVERFLOW : panneaux fermés retirés du flux sur mobile (fix scroll horizontal, navigateurs ne clippant pas les position:fixed) */
@media (max-width:900px){
.ob-mobile-panel:not(.is-open),.ob-sc:not(.is-open){display:none !important;}
}
/* Icône cookies (re-consentement) : réduite + déplacée sur mobile */
@media (max-width:768px){
.cookieadmin_re_consent{width:40px !important;height:40px !important;min-width:0 !important;min-height:0 !important;padding:0 !important;left:auto !important;right:12px !important;bottom:12px !important;overflow:hidden;}
.cookieadmin_re_consent img,.cookieadmin_reconsent_img{width:100% !important;height:100% !important;object-fit:contain;}
}

/* IOS-SCROLL-SR-TEXT-FIX : les spans screen-reader (prix Woo) en absolu fuyaient hors des carrousels
   (aucun ancêtre positionné dans la piste) et créaient un débordement document réel sur iOS. */
.ob-pcar__track,.ob-carousel__track,.ob-usp__grid,ul.products{position:relative;}
.ob-usp{overflow-x:hidden;}
li.product,.ob-pcard{position:relative;}

/* Texte lecteurs d'écran (a11y / SEO) */
.screen-reader-text{position:absolute !important;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);border:0;white-space:nowrap;}