/* LeBonRobot — Critical CSS — above-the-fold uniquement — v363 */
/* styles non critiques déplacés depuis style-critical.css ; critical CSS extracted for faster first paint */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:auto}
body{font-family:"DM Sans",system-ui,-apple-system,sans-serif;-webkit-font-smoothing:antialiased;line-height:1.6}

:root{
  --bg:#0b0d10;
  --fo:#1C4D12;--fo2:#2B6B1C;
  --li:#AAD838;--dli:#BDE83A;
  --ink:#0B0E09;--ink2:#151A12;
  --paper:#F4EFE5;--paper2:#EBE6DA;
  --w:#fff;--muted:#59614F;--faint:#7D8774;
  --line:rgba(25,29,21,.10);
  --max:1160px;
}

html,body{background:var(--bg);color:#eef2f5}
body.pr,body.pdf-master{background:var(--paper);color:var(--ink2)}

.skip-link{position:absolute;left:12px;top:-52px;z-index:9999;background:var(--li);color:var(--ink);padding:10px 16px;border-radius:12px;font-weight:800;font-size:.9rem;text-decoration:none;transition:top .18s ease}
.skip-link:focus{top:12px}

header{position:sticky;top:0;z-index:700;background:rgba(244,239,229,.96);border-bottom:1px solid var(--line);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);transition:transform .4s cubic-bezier(.16,1,.3,1)}
header.lbr-header-hidden{transform:translateY(-100%)}

.hdr-in{display:flex;align-items:center;gap:20px;height:68px;max-width:var(--max);margin:0 auto;padding:0 clamp(20px,3.5vw,44px)}

.logo-lockup,.logo-w{display:flex;align-items:center;gap:8px;text-decoration:none}
.logo,.ltxt{font-family:"Lora",Georgia,serif;font-size:1.3rem;font-weight:600;letter-spacing:-.035em;color:var(--ink);line-height:1}

.main-nav{display:flex;align-items:center;gap:2px;margin-left:auto}
.main-nav a{font-size:13px;font-weight:500;padding:7px 13px;border-radius:999px;color:var(--muted);border:1px solid transparent;text-decoration:none;transition:background .14s,color .14s}
.main-nav a:hover{color:var(--ink);background:var(--paper2)}

.mobile-nav-static{display:none}

.btn{display:inline-flex;align-items:center;gap:7px;font-size:13px;font-weight:750;padding:10px 19px;border-radius:999px;cursor:pointer;text-decoration:none;transition:background .14s,transform .12s,box-shadow .14s;border:none}
.btn-p{background:var(--fo);color:#fff;box-shadow:0 2px 10px rgba(28,77,18,.22)}
.btn-p:hover{background:var(--fo2);transform:translateY(-1px)}
.btn-ghost{color:var(--muted);border:1.5px solid var(--line);background:transparent}
.btn-ghost:hover{color:var(--ink);border-color:var(--faint)}

.hero{background:var(--ink);position:relative;overflow:hidden;border-radius:0 0 44px 44px}
.hm-hero{background:var(--ink);position:relative;overflow:hidden;border-radius:0 0 44px 44px}

.breadcrumb,.bc{display:flex;align-items:center;gap:8px;font-size:.77rem;color:var(--faint)}
.breadcrumb a,.bc a{text-decoration:none;color:inherit}

.lead{font-size:clamp(.95rem,1.15vw,1.1rem);line-height:1.66;color:var(--muted)}

.wrap{max-width:var(--max);margin:0 auto;padding:0 clamp(20px,3.5vw,44px)}

img{max-width:100%;height:auto;display:block}
a{color:inherit}

@media(max-width:768px){
  header{height:56px}
  .hdr-in{height:56px;padding:0 18px}
  .main-nav,.hdr-cta{display:none}
  main{padding-top:56px}
  .hero,.hm-hero{border-radius:0 0 24px 24px}
}
/* FIX GLOBAL HEADER — pages internes LeBonRobot */
header > .hdr-in {
  width: min(1180px, calc(100% - 32px)) !important;
  margin: 0 auto !important;
  min-height: 76px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 18px !important;
}

header > .hdr-in .logo-lockup {
  display: inline-flex !important;
  align-items: center !important;
  gap: 10px !important;
  min-width: 0 !important;
}

header > .hdr-in .logo {
  display: inline-flex !important;
  align-items: center !important;
  text-decoration: none !important;
  color: #151a12 !important;
  font-family: "Lora", serif !important;
  font-weight: 700 !important;
  font-size: clamp(1.45rem, 3vw, 2.1rem) !important;
  letter-spacing: -.04em !important;
  white-space: nowrap !important;
}

header > .hdr-in .brand-claim {
  display: none !important;
}

header > .hdr-in .main-nav#main-nav {
  display: flex !important;
  position: static !important;
  opacity: 1 !important;
  visibility: visible !important;
  transform: none !important;
  align-items: center !important;
  gap: 8px !important;
  width: auto !important;
  height: auto !important;
  max-height: none !important;
  overflow: visible !important;
  background: transparent !important;
  box-shadow: none !important;
  border: 0 !important;
  padding: 0 !important;
}

header > .hdr-in .main-nav#main-nav a {
  display: inline-flex !important;
  align-items: center !important;
  text-decoration: none !important;
  padding: 10px 13px !important;
  border-radius: 999px !important;
  font-weight: 750 !important;
  color: rgba(21, 26, 18, .72) !important;
  white-space: nowrap !important;
}

header > .hdr-in .main-nav#main-nav a:hover,
header > .hdr-in .main-nav#main-nav a[aria-current="page"],
header > .hdr-in .main-nav#main-nav a.active {
  background: rgba(31, 85, 25, .1) !important;
  color: #1f5519 !important;
}

header > .hdr-in .hdr-cta {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 46px !important;
  padding: 0 20px !important;
  border-radius: 999px !important;
  background: #1f5519 !important;
  color: #fff !important;
  text-decoration: none !important;
  font-weight: 850 !important;
  white-space: nowrap !important;
}

header > .hdr-in .hdr-cta-mobile {
  display: none !important;
}

header > .hdr-in .burger {
  display: none !important;
}

.mobile-nav-static {
  display: none !important;
}

@media (max-width: 1100px) {
  header > .hdr-in {
    width: min(100% - 24px, 1180px) !important;
    min-height: 72px !important;
  }

  header > .hdr-in .logo {
    font-size: 1.6rem !important;
  }

  header > .hdr-in .main-nav#main-nav {
    display: none !important;
  }

  header > .hdr-in .burger {
    display: inline-flex !important;
  }

  header > .hdr-in .hdr-cta {
    display: none !important;
  }

  header > .hdr-in .hdr-cta-mobile {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-height: 46px !important;
    padding: 0 18px !important;
    border-radius: 999px !important;
    background: #1f5519 !important;
    color: #fff !important;
    text-decoration: none !important;
    font-weight: 850 !important;
  }

  body[data-nav-open="true"] header > .hdr-in .main-nav#main-nav,
  header > .hdr-in .burger[aria-expanded="true"] ~ .main-nav#main-nav,
  header > .hdr-in .main-nav#main-nav.open,
  header > .hdr-in .main-nav#main-nav.is-open {
    display: flex !important;
    position: fixed !important;
    top: 86px !important;
    left: 14px !important;
    right: 14px !important;
    z-index: 99999 !important;
    flex-direction: column !important;
    gap: 8px !important;
    padding: 18px !important;
    border-radius: 24px !important;
    background: rgba(250, 247, 238, .98) !important;
    border: 1px solid rgba(21, 26, 18, .12) !important;
    box-shadow: 0 24px 70px rgba(0,0,0,.28) !important;
  }

  body[data-nav-open="true"] header > .hdr-in .main-nav#main-nav a,
  header > .hdr-in .burger[aria-expanded="true"] ~ .main-nav#main-nav a,
  header > .hdr-in .main-nav#main-nav.open a,
  header > .hdr-in .main-nav#main-nav.is-open a {
    display: flex !important;
    width: 100% !important;
    color: #151a12 !important;
    background: rgba(255,255,255,.78) !important;
    border: 1px solid rgba(21,26,18,.08) !important;
  }
}/* FIX FINAL — menu horizontal desktop */
@media (min-width: 1101px) {
  header {
    position: sticky !important;
    top: 0 !important;
    z-index: 9999 !important;
    background: rgba(243, 238, 223, .96) !important;
    border-bottom: 1px solid rgba(21, 26, 18, .12) !important;
    backdrop-filter: blur(18px) !important;
  }

  header > .hdr-in {
    width: min(1180px, calc(100% - 32px)) !important;
    margin: 0 auto !important;
    min-height: 76px !important;
    display: grid !important;
    grid-template-columns: auto minmax(0, 1fr) auto !important;
    align-items: center !important;
    gap: 28px !important;
  }

  header .logo-lockup {
    display: inline-flex !important;
    align-items: center !important;
    gap: 10px !important;
    min-width: max-content !important;
  }

  header .brand-claim {
    display: none !important;
  }

  header .main-nav#main-nav {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    width: auto !important;
    max-width: none !important;
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
    position: static !important;
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    padding: 0 !important;
  }

  header .main-nav#main-nav a {
    display: inline-flex !important;
    width: auto !important;
    min-width: max-content !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 10px 13px !important;
    border-radius: 999px !important;
    color: rgba(21, 26, 18, .72) !important;
    background: transparent !important;
    border: 0 !important;
    text-decoration: none !important;
    font-weight: 750 !important;
    white-space: nowrap !important;
  }

  header .main-nav#main-nav a:hover,
  header .main-nav#main-nav a.active,
  header .main-nav#main-nav a[aria-current="page"] {
    background: rgba(31, 85, 25, .1) !important;
    color: #1f5519 !important;
  }

  header .hdr-cta {
    display: inline-flex !important;
    min-width: max-content !important;
  }

  header .hdr-cta-mobile,
  header .burger,
  .mobile-nav-static {
    display: none !important;
  }
}
/* HEADER DESKTOP STABLE — menu horizontal sans masquer le logo */
@media (min-width: 1101px) {
  header > .hdr-in {
    display: flex !important;
    grid-template-columns: none !important;
    width: min(1180px, calc(100% - 32px)) !important;
    margin: 0 auto !important;
    min-height: 76px !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 18px !important;
    overflow: visible !important;
  }

  header .logo-lockup {
    flex: 0 0 auto !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
    overflow: visible !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 10px !important;
    order: 1 !important;
    position: relative !important;
    z-index: 2 !important;
  }

  header .logo {
    display: inline-flex !important;
    white-space: nowrap !important;
    font-size: clamp(1.35rem, 1.8vw, 1.85rem) !important;
    line-height: 1 !important;
  }

  header .brand-claim {
    display: none !important;
  }

  header .main-nav#main-nav {
    order: 2 !important;
    flex: 1 1 auto !important;
    min-width: 0 !important;
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 4px !important;
    width: auto !important;
    max-width: none !important;
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
    position: static !important;
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    padding: 0 !important;
    margin: 0 !important;
  }

  header .main-nav#main-nav a {
    display: inline-flex !important;
    width: auto !important;
    min-width: 0 !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 8px 10px !important;
    border-radius: 999px !important;
    color: rgba(21, 26, 18, .72) !important;
    background: transparent !important;
    border: 0 !important;
    text-decoration: none !important;
    font-weight: 750 !important;
    font-size: .9rem !important;
    white-space: nowrap !important;
  }

  header .main-nav#main-nav a:hover,
  header .main-nav#main-nav a.active,
  header .main-nav#main-nav a[aria-current="page"] {
    background: rgba(31, 85, 25, .1) !important;
    color: #1f5519 !important;
  }

  header .hdr-cta {
    order: 3 !important;
    flex: 0 0 auto !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-height: 44px !important;
    padding: 0 16px !important;
    border-radius: 999px !important;
    background: #1f5519 !important;
    color: #fff !important;
    text-decoration: none !important;
    font-weight: 850 !important;
    font-size: .9rem !important;
    white-space: nowrap !important;
    margin-left: 6px !important;
  }

  header .hdr-cta-mobile,
  header .burger,
  .mobile-nav-static {
    display: none !important;
  }
}

/* Desktop un peu étroit : on compacte sans superposer */
@media (min-width: 1101px) and (max-width: 1320px) {
  header > .hdr-in {
    gap: 12px !important;
  }

  header .logo {
    font-size: 1.42rem !important;
  }

  header .main-nav#main-nav a {
    font-size: .82rem !important;
    padding: 8px 7px !important;
  }

  header .hdr-cta {
    font-size: .82rem !important;
    padding: 0 12px !important;
  }
}
/* FIX LISIBILITÉ — textes foncés sur blocs clairs */
.section-box,
.card,
.product-card,
.guide-card,
.guide-block .section-box,
.guide-block article,
.comparison-card,
.compare-card,
.listing-card,
.offer-card,
.amazon-showcase,
.table-wrap,
.filter-panel,
.quiz-card,
.details-card,
.price-watch-card,
.editorial-card,
.pricing-card,
.faq-card,
details,
summary + *,
main section:not(.hero) {
  color: #151a12 !important;
}

.section-box h1,
.section-box h2,
.section-box h3,
.section-box h4,
.card h1,
.card h2,
.card h3,
.card h4,
.guide-card h1,
.guide-card h2,
.guide-card h3,
.comparison-card h1,
.comparison-card h2,
.comparison-card h3,
.listing-card h1,
.listing-card h2,
.listing-card h3,
.offer-card h1,
.offer-card h2,
.offer-card h3,
.amazon-showcase h1,
.amazon-showcase h2,
.amazon-showcase h3,
.table-wrap h1,
.table-wrap h2,
.table-wrap h3,
.filter-panel h1,
.filter-panel h2,
.filter-panel h3,
.quiz-card h1,
.quiz-card h2,
.quiz-card h3,
.details-card h1,
.details-card h2,
.details-card h3,
.price-watch-card h1,
.price-watch-card h2,
.price-watch-card h3,
main section:not(.hero) h1,
main section:not(.hero) h2,
main section:not(.hero) h3,
main section:not(.hero) h4 {
  color: #151a12 !important;
}

.section-box p,
.section-box li,
.section-box ol,
.section-box ul,
.card p,
.card li,
.guide-card p,
.guide-card li,
.comparison-card p,
.comparison-card li,
.listing-card p,
.listing-card li,
.offer-card p,
.offer-card li,
.amazon-showcase p,
.amazon-showcase li,
.table-wrap p,
.table-wrap li,
.filter-panel p,
.filter-panel li,
.quiz-card p,
.quiz-card li,
.details-card p,
.details-card li,
.price-watch-card p,
.price-watch-card li,
main section:not(.hero) p,
main section:not(.hero) li,
main section:not(.hero) ol,
main section:not(.hero) ul {
  color: rgba(21, 26, 18, .78) !important;
}

/* Les liens dans les blocs clairs restent visibles */
.section-box a,
.card a,
.guide-card a,
.comparison-card a,
.listing-card a,
.offer-card a,
.amazon-showcase a,
.table-wrap a,
.filter-panel a,
.quiz-card a,
.details-card a,
.price-watch-card a,
main section:not(.hero) a {
  color: #1f5519 !important;
}

/* Les badges gardent un rendu lisible */
.section-box .badge,
.card .badge,
.guide-card .badge,
.comparison-card .badge,
.listing-card .badge,
.offer-card .badge,
main section:not(.hero) .badge {
  color: #1f5519 !important;
  background: rgba(31, 85, 25, .1) !important;
}

/* Les héros sombres gardent un texte clair */
.hero,
.offres-hero,
.lbr-offers-premium-hero,
.conversion-command-hero {
  color: #f4efe4 !important;
}

.hero h1,
.hero h2,
.hero h3,
.offres-hero h1,
.offres-hero h2,
.offres-hero h3,
.lbr-offers-premium-hero h1,
.lbr-offers-premium-hero h2,
.lbr-offers-premium-hero h3,
.conversion-command-hero h1,
.conversion-command-hero h2,
.conversion-command-hero h3 {
  color: #f4efe4 !important;
}

.hero p,
.hero li,
.offres-hero p,
.offres-hero li,
.lbr-offers-premium-hero p,
.lbr-offers-premium-hero li,
.conversion-command-hero p,
.conversion-command-hero li {
  color: rgba(244, 239, 228, .76) !important;
}

/* Cas spécial : héros clair du comparatif */
body[data-page-kind="comparison"] .hero,
body[data-page-kind="comparison"] .hero h1,
body[data-page-type="comparison"] .hero,
body[data-page-type="comparison"] .hero h1,
.comparatif-hero,
.comparatif-hero h1,
.comparison-hero,
.comparison-hero h1,
.listing-hero,
.listing-hero h1 {
  color: #151a12 !important;
}

body[data-page-kind="comparison"] .hero p,
body[data-page-type="comparison"] .hero p,
.comparatif-hero p,
.comparison-hero p,
.listing-hero p {
  color: rgba(21, 26, 18, .72) !important;
}
/* FIX FINAL — cartes blanches placées dans les héros sombres */
.hero .section-box,
.hero .section-box *,
.hero .card,
.hero .card *,
.hero .guide-card,
.hero .guide-card *,
.hero .offer-card,
.hero .offer-card *,
.hero .comparison-card,
.hero .comparison-card *,
.hero .quiz-card,
.hero .quiz-card *,
.hero .details-card,
.hero .details-card *,
.hero .price-watch-card,
.hero .price-watch-card * {
  color: #151a12 !important;
  -webkit-text-fill-color: #151a12 !important;
  opacity: 1 !important;
  visibility: visible !important;
}

.hero .section-box p,
.hero .section-box li,
.hero .section-box span,
.hero .section-box small,
.hero .card p,
.hero .card li,
.hero .guide-card p,
.hero .guide-card li,
.hero .offer-card p,
.hero .offer-card li,
.hero .comparison-card p,
.hero .comparison-card li,
.hero .quiz-card p,
.hero .quiz-card li,
.hero .details-card p,
.hero .details-card li,
.hero .price-watch-card p,
.hero .price-watch-card li {
  color: rgba(21, 26, 18, .78) !important;
  -webkit-text-fill-color: rgba(21, 26, 18, .78) !important;
  opacity: 1 !important;
}

.hero .section-box a,
.hero .card a,
.hero .guide-card a,
.hero .offer-card a,
.hero .comparison-card a,
.hero .quiz-card a,
.hero .details-card a,
.hero .price-watch-card a {
  color: #1f5519 !important;
  -webkit-text-fill-color: #1f5519 !important;
  opacity: 1 !important;
}

.hero .section-box .badge,
.hero .card .badge,
.hero .guide-card .badge,
.hero .offer-card .badge,
.hero .comparison-card .badge,
.hero .quiz-card .badge,
.hero .details-card .badge,
.hero .price-watch-card .badge {
  color: #1f5519 !important;
  -webkit-text-fill-color: #1f5519 !important;
  background: rgba(31, 85, 25, .1) !important;
  opacity: 1 !important;
}

/* Garder seulement le vrai texte du hero en clair */
.hero > .wrap > h1,
.hero > .wrap > h2,
.hero > .wrap > h3,
.hero > .wrap > p,
.hero > .wrap > .lead,
.hero > .wrap > .breadcrumb,
.hero > .wrap > .affiliate-page-note {
  color: #f4efe4 !important;
  -webkit-text-fill-color: #f4efe4 !important;
  opacity: 1 !important;
}

/* Page comparatif : hero clair = texte foncé */
body:has(a[href="comparatif.html"][aria-current="page"]) .hero,
body:has(a[href="comparatif.html"][aria-current="page"]) .hero *,
body:has(a[href="comparatif.html"].active) .hero,
body:has(a[href="comparatif.html"].active) .hero * {
  color: #151a12 !important;
  -webkit-text-fill-color: #151a12 !important;
  opacity: 1 !important;
}

body:has(a[href="comparatif.html"][aria-current="page"]) .hero p,
body:has(a[href="comparatif.html"][aria-current="page"]) .hero li,
body:has(a[href="comparatif.html"].active) .hero p,
body:has(a[href="comparatif.html"].active) .hero li {
  color: rgba(21, 26, 18, .74) !important;
  -webkit-text-fill-color: rgba(21, 26, 18, .74) !important;
}
/* FIX FONDS BLANCS — remplacer les grands blocs blancs par un fond crème premium */
.section-box,
.card,
.product-card,
.guide-card,
.offer-card,
.comparison-card,
.compare-card,
.listing-card,
.quiz-card,
.details-card,
.price-watch-card,
.amazon-showcase-card,
.table-wrap,
.filter-panel,
.price-card,
.offer-row,
.price-row,
.pricing-card,
details {
  background: rgba(250, 247, 238, 0.92) !important;
  background-color: rgba(250, 247, 238, 0.92) !important;
  color: #151a12 !important;
  -webkit-text-fill-color: #151a12 !important;
  border-color: rgba(21, 26, 18, 0.12) !important;
}

/* Les blocs blancs posés dans les héros sombres deviennent crème, pas blanc pur */
.hero .section-box,
.hero .card,
.hero .guide-card,
.hero .offer-card,
.hero .comparison-card,
.hero .quiz-card,
.hero .details-card,
.hero .price-watch-card {
  background: rgba(250, 247, 238, 0.94) !important;
  background-color: rgba(250, 247, 238, 0.94) !important;
  color: #151a12 !important;
  -webkit-text-fill-color: #151a12 !important;
}

/* Les accordéons ne doivent plus être bleu/gris foncé */
summary,
details summary,
.details summary,
.guide-block details summary {
  background: rgba(31, 85, 25, 0.08) !important;
  background-color: rgba(31, 85, 25, 0.08) !important;
  color: #151a12 !important;
  -webkit-text-fill-color: #151a12 !important;
}

/* Les cartes offres/prix trop transparentes deviennent lisibles */
.offer-row,
.price-row,
.commercial-card,
.amazon-showcase-card {
  background: rgba(250, 247, 238, 0.96) !important;
  background-color: rgba(250, 247, 238, 0.96) !important;
  box-shadow: 0 18px 50px rgba(17, 24, 13, 0.10) !important;
}

/* Garder les vrais héros sombres en sombre */
.hero,
.offres-hero,
.lbr-offers-premium-hero,
.conversion-command-hero {
  background:
    radial-gradient(circle at 72% 18%, rgba(64, 120, 42, 0.28), transparent 34%),
    linear-gradient(135deg, #071006 0%, #0b1608 55%, #102209 100%) !important;
  color: #f4efe4 !important;
}

/* Mais les enfants clairs dans ces héros gardent leur fond crème */
.hero .section-box,
.hero .card,
.hero .guide-card,
.hero .offer-card,
.hero .comparison-card {
  background: rgba(250, 247, 238, 0.94) !important;
}
/* TEST VISUEL — à supprimer après */
.section-box,
.card,
.details,
details,
.offer-row,
.price-row,
.amazon-showcase-card {
  background: red !important;
  background-color: red !important;
}