/* La Paracha - composants maison (hero, categories, sections) */

:root {
  --lp-gold: #C9A227;
  --lp-gold-dark: #A8841E;
  --lp-gold-darkest: #8C6E18;
  --lp-cream: #F4ECDC;
  --lp-cream-light: #F7F0E0;
  --lp-cream-deep: #F0E6D2;
  --lp-border: #E2D5BA;
  --lp-text: #2E2418;
  --lp-text-dark2: #1C140C;
  --lp-text-muted: #8A7960;
  --lp-on-dark: #D9CBAE;
  --lp-on-dark-dim: #A99878;
  --lp-font-serif: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
}

/* ---------- Top utility bar ---------- */
.lp-topbar {
  background: var(--lp-text);
}

.lp-topbar__list {
  position: relative;
  margin: 0;
  padding: .55rem 0;
  list-style: none;
  text-align: center;
  min-height: 1.8rem;
}

.lp-topbar__list li {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  align-items: center;
  gap: .4rem;
  color: var(--lp-cream-light);
  font-size: .78rem;
  letter-spacing: .02em;
  white-space: nowrap;
  opacity: 0;
  transition: opacity .5s ease;
  pointer-events: none;
}

.lp-topbar__list li.is-active {
  opacity: 1;
  pointer-events: auto;
}

.lp-topbar__icon {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

.lp-menu-icon {
  width: 16px;
  height: 16px;
  margin-right: .35rem;
  vertical-align: -3px;
}

/* Lien « Blog » du menu principal : plume or + mise en valeur.
   Le sélecteur suit le <ul id="top-menu"> quand theme.js le déplace
   dans le menu hamburger mobile, la mise en forme s'applique donc partout. */
#top-menu #lnk-blog > a {
  color: var(--lp-gold, #C9A227);
  font-weight: 700;
}
#top-menu #lnk-blog > a:hover,
#top-menu #lnk-blog > a:focus {
  color: var(--lp-gold-dark, #A8841E);
  text-decoration: underline;
  text-underline-offset: 3px;
}
#top-menu #lnk-blog .lp-menu-icon--blog {
  stroke: currentColor;
}

/* ---------- Header desktop plus compact (20/07) ----------
   Constat : .header-top avait 20px de padding haut/bas + chaque lien du menu
   principal (#top-menu > li > a) 10px de padding vertical (menu sur 3 lignes
   => 3x cette épaisseur), et le menu démarrait avec un double padding-gauche
   empilé (.header-top-right 15px + #_desktop_top_menu 15px) créant un vide
   inutile entre le logo et le premier onglet. Uniquement le desktop
   (#_desktop_logo/#_desktop_top_menu, cachés en mobile) : le menu mobile
   (hamburger, #_mobile_top_menu) n'est pas concerné par ces sélecteurs.
   ⚠ Piège vécu : le thème définit ces règles avec le préfixe #header (ex.
   `#header .header-top`, `#header .header-top .menu`, `#header .header-nav
   .blockcart`) — plus spécifique qu'un simple `.header-top` ou `.blockcart`,
   qui perdait donc silencieusement le combat de spécificité CSS malgré un
   chargement après theme.css. Repris ici avec le même préfixe `#header` (ou
   plus précis) pour gagner à coup sûr. Voir CLAUDE.md. */
#_desktop_logo.col-md-2 {
  padding-right: 0;
}
.header-top-right.col-md-10 {
  padding-left: 5px;
}
#header .header-top #_desktop_top_menu {
  padding-left: 0;
}
#header .header-top {
  padding: 10px 0;
}
#top-menu > li > a {
  padding: 6px 10px;
}
#header .header-nav .blockcart {
  padding: 8px 12px;
}
#header .header-nav #contact-link {
  margin-top: 8px !important;
}

.lp-feature-icon {
  width: 18px;
  height: 18px;
  margin-right: .3rem;
  vertical-align: -4px;
}

.lp-topbar__list li + li::before {
  display: none;
}

@media (max-width: 767px) {
  .lp-topbar__list {
    min-height: 2rem;
  }
  /* Message « Paiement sécurisé : PayPal (ou carte bancaire via PayPal) · Virement
     bancaire » (18/10/2026) : trop long pour une ligne de téléphone — en
     `nowrap`, il élargissait toute la page (478 px pour un écran de 390). Sur
     mobile, chaque message peut passer sur deux lignes, centré. */
  .lp-topbar__list {
    min-height: 2.6rem;
  }
  .lp-topbar__list li {
    width: calc(100% - 1rem);
    justify-content: center;
    text-align: center;
    white-space: normal;
    line-height: 1.25;
  }
}

.lp-divider {
  display: inline-block;
  color: var(--lp-gold);
  font-size: 1.1rem;
  margin: 0 .6rem;
  vertical-align: middle;
}

.lp-section-title {
  text-align: center;
  font-family: var(--lp-font-serif);
  font-weight: 600;
  font-size: 2.1rem;
  color: var(--lp-text);
  letter-spacing: .03em;
  margin: 0 0 .4rem;
}

.lp-section-subtitle {
  text-align: center;
  color: var(--lp-text-muted);
  font-size: .95rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  margin-bottom: 1.6rem;
}

.lp-section-rule {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 2.6rem;
  width: 220px;
}
.lp-section-rule::before,
.lp-section-rule::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--lp-border);
}

/* ---------- Hero ---------- */
.lp-hero {
  position: relative;
  display: flex;
  align-items: stretch;
  background: linear-gradient(135deg, var(--lp-text) 0%, var(--lp-text-dark2) 100%);
  border: 1px solid var(--lp-gold-darkest);
  border-radius: 4px;
  overflow: hidden;
  margin: 1.5rem 0 3rem;
  min-height: 460px;
}

.lp-hero__content {
  flex: 1 1 50%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 3.2rem 3.5rem;
  position: relative;
  z-index: 2;
}

.lp-hero__badge {
  display: inline-block;
  align-self: flex-start;
  background: var(--lp-gold);
  color: var(--lp-text);
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  padding: .4rem .9rem;
  border-radius: 2px;
  margin: 0 0 1.2rem;
}

.lp-hero__kicker {
  font-size: .8rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--lp-gold);
  margin: 0 0 1rem;
  font-weight: 600;
}

.lp-hero__title {
  font-family: var(--lp-font-serif);
  font-size: 2.8rem;
  line-height: 1.15;
  color: var(--lp-cream-light);
  margin: 0 0 1.1rem;
  font-weight: 700;
}

.lp-hero__text {
  color: var(--lp-on-dark-dim);
  font-size: 1.05rem;
  line-height: 1.6;
  max-width: 420px;
  margin: 0 0 1.4rem;
}

.lp-hero__checks {
  list-style: none;
  margin: 0 0 1.8rem;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: .55rem;
}

.lp-hero__checks li {
  position: relative;
  padding-left: 1.7rem;
  color: var(--lp-on-dark);
  font-size: .95rem;
}
.lp-hero__checks li::before {
  content: '\2713';
  position: absolute;
  left: 0;
  top: 0;
  color: var(--lp-gold);
  font-weight: 700;
}

.lp-hero__bottom {
  display: flex;
  align-items: center;
  gap: 1.8rem;
  flex-wrap: wrap;
}

.lp-hero__price {
  font-family: var(--lp-font-serif);
  font-size: 1.6rem;
  color: var(--lp-gold);
  font-weight: 600;
  margin: 0;
}

.lp-hero__cta {
  display: inline-block;
  background: var(--lp-gold);
  color: var(--lp-text);
  text-decoration: none;
  padding: .85rem 2.2rem;
  border-radius: 2px;
  font-size: .85rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  font-weight: 600;
  transition: background-color .2s ease;
}
.lp-hero__cta:hover {
  background: var(--lp-cream-light);
  color: var(--lp-text);
}

.lp-hero__media {
  flex: 1 1 50%;
  position: relative;
  background-color: var(--lp-text-dark2);
  background-image:
    radial-gradient(circle at 55% 50%, rgba(201, 162, 39, .22) 0%, rgba(201, 162, 39, 0) 65%),
    linear-gradient(135deg, var(--lp-text) 0%, var(--lp-text-dark2) 100%);
}

.lp-hero__media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 2.5rem;
  filter: drop-shadow(0 18px 30px rgba(0, 0, 0, .45));
}

/* ── Variante compacte du bandeau pack (07/2026) : bandeau horizontal ~170 px,
      vignette crème à gauche, titre + accroche au centre, prix + CTA à droite. ── */
.lp-hero--compact {
  min-height: 0;
  align-items: stretch;
  margin: 1.5rem 0 2.5rem;
}
.lp-hero--compact .lp-hero__media {
  flex: 0 0 240px;
  min-height: 170px;
  background: #F4ECDC;
}
.lp-hero--compact .lp-hero__media img {
  padding: .8rem;
  filter: none;
}
.lp-hero--compact .lp-hero__content {
  flex-direction: row;
  align-items: center;
  gap: 2rem;
  padding: 1.5rem 2.2rem;
}
.lp-hero--compact .lp-hero__main { flex: 1 1 auto; }
.lp-hero--compact .lp-hero__badge {
  font-size: .62rem;
  padding: .28rem .65rem;
  margin: 0 0 .6rem;
}
.lp-hero--compact .lp-hero__title {
  font-size: 1.6rem;
  margin: 0 0 .45rem;
}
.lp-hero--compact .lp-hero__text {
  font-size: .92rem;
  margin: 0;
  max-width: none;
}
.lp-hero--compact .lp-hero__bottom {
  flex: 0 0 auto;
  flex-direction: column;
  align-items: flex-end;
  gap: .7rem;
}
.lp-hero--compact .lp-hero__price { font-size: 1.5rem; margin: 0; }
.lp-hero--compact .lp-hero__cta {
  padding: .7rem 1.7rem;
  font-size: .78rem;
  white-space: nowrap;
}
@media (max-width: 767px) {
  .lp-hero--compact .lp-hero__content {
    flex-direction: column;
    align-items: flex-start;
    gap: 1rem;
  }
  .lp-hero--compact .lp-hero__bottom {
    flex-direction: row;
    align-items: center;
  }
}

@media (max-width: 991px) {
  .lp-hero {
    flex-direction: column;
    min-height: 0;
  }
  .lp-hero__content {
    padding: 2.4rem 1.8rem;
    order: 2;
  }
  .lp-hero__media {
    min-height: 280px;
    order: 1;
  }
  .lp-hero__title {
    font-size: 2.1rem;
  }
}

/* ---------- Categories grid ---------- */
.lp-categories {
  margin: 0 0 3.2rem;
}

.lp-categories--top {
  margin: 1.8rem 0 2.6rem;
}

.lp-categories__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1.6rem 1.2rem;
  max-width: 780px;
  margin: 0 auto;
}

.lp-category-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-decoration: none;
  color: var(--lp-text);
  transition: transform .2s ease;
}
.lp-category-card:hover {
  transform: translateY(-4px);
  color: var(--lp-gold-dark);
}

.lp-category-card__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 108px;
  height: 108px;
  border-radius: 50%;
  background: var(--lp-cream-light);
  border: 1px solid var(--lp-border);
  margin-bottom: .9rem;
  transition: border-color .2s ease, box-shadow .2s ease;
}
.lp-category-card:hover .lp-category-card__icon {
  border-color: var(--lp-gold);
  box-shadow: 0 4px 14px rgba(201, 162, 39, .25);
}

.lp-category-card__icon img {
  width: 52px;
  height: 52px;
}

.lp-category-card__label {
  font-family: var(--lp-font-serif);
  font-size: 1.05rem;
  font-weight: 600;
  letter-spacing: .02em;
  text-align: center;
}

.lp-category-card__desc {
  display: block;
  margin-top: .3rem;
  font-size: .78rem;
  line-height: 1.35;
  color: var(--lp-text-muted);
  text-align: center;
}

/* ---------- Bestsellers override ---------- */
.lp-bestsellers {
  margin: 0 0 3.2rem;
}

.lp-bestsellers .products {
  display: flex;
  flex-wrap: wrap;
  gap: 1.4rem;
  justify-content: center;
}

.lp-bestsellers-more {
  display: block;
  width: fit-content;
  margin: 2rem auto 0;
  border: 1px solid var(--lp-gold);
  color: var(--lp-gold-dark);
  text-decoration: none;
  padding: .7rem 2rem;
  border-radius: 2px;
  font-size: .82rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  font-weight: 600;
  transition: background-color .2s ease, color .2s ease;
}
.lp-bestsellers-more:hover {
  background: var(--lp-gold);
  color: #fff;
}

/* ---------- Product card polish ---------- */
.product-miniature .thumbnail-container,
.product-miniature .product-description,
.product-miniature .variant-links,
.product-miniature .highlighted-informations {
  background: var(--lp-cream-light);
}

.product-miniature .thumbnail-container {
  border: 1px solid var(--lp-border);
  border-radius: 4px;
  transition: box-shadow .2s ease, transform .2s ease;
}

.product-miniature .thumbnail-container:hover {
  box-shadow: 0 10px 24px rgba(46, 36, 24, .12);
  transform: translateY(-3px);
}

/* ---------- Pages catégories : cohérence avec l'identité du site ---------- */

/* La colonne de gauche (menu catégorie à un seul lien + filtres jamais
   configurés) n'apporte rien ici : la navigation catégories vit déjà dans le
   méga-menu. Page pleine largeur, comme la homepage. */
.page-category #left-column,
.page-manufacturer #left-column {
  display: none;
}
.page-category #content-wrapper,
.page-manufacturer #content-wrapper {
  width: 100%;
  max-width: 100%;
  flex: 0 0 100%;
}

/* En-tête de catégorie : même traitement que "Bienvenue sur Laparacha.com" */
.lp-cat-header {
  background: none;
  border: none;
  padding: 0;
  margin: 1.6rem 0 2.2rem;
  text-align: center;
}
.lp-cat-header__title.h1 {
  font-family: var(--lp-font-serif);
  font-size: 2rem;
  font-weight: 700;
  color: var(--lp-text);
  margin: 0;
  text-transform: none;
  letter-spacing: 0;
}
.lp-cat-header__desc {
  max-width: 62ch;
  margin: .6rem auto 0;
  color: var(--lp-text-muted);
  font-size: .96rem;
  line-height: 1.6;
}
.lp-cat-header .category-cover {
  margin-top: 1.2rem;
}
.lp-cat-header .category-cover img {
  border-radius: 6px;
  border: 1px solid var(--lp-border);
}

/* Fil d'ariane */
.breadcrumb {
  background: none;
  padding: .9rem 0;
  margin: 0;
  font-size: .82rem;
}
.breadcrumb ol { display: flex; flex-wrap: wrap; gap: .3rem; }
.breadcrumb li { color: var(--lp-text-muted); }
.breadcrumb li a {
  color: var(--lp-text-muted);
  text-decoration: none;
  transition: color .15s ease;
}
.breadcrumb li a:hover { color: var(--lp-gold-dark); text-decoration: underline; }
.breadcrumb li span { color: var(--lp-text-muted); }
.breadcrumb li:last-child span { color: var(--lp-text); font-weight: 600; }

/* Barre "N produits disponibles" + Trier par */
.products-selection {
  padding: .8rem 0;
  margin: 0 0 1.4rem;
  border-top: 1px solid var(--lp-border);
  border-bottom: 1px solid var(--lp-border);
  align-items: center;
}
.products-selection .total-products p {
  margin: 0;
  color: var(--lp-text-muted);
  font-size: .86rem;
}
.sort-by-row .sort-by {
  color: var(--lp-text-muted);
  font-size: .86rem;
  padding-top: .5rem;
}
.products-sort-order .select-title {
  border: 1px solid var(--lp-border);
  border-radius: 999px;
  background: var(--lp-cream-light);
  color: var(--lp-text);
  padding: .45rem 1.1rem;
  font-size: .86rem;
  transition: border-color .15s ease;
}
.products-sort-order .select-title:hover,
.products-sort-order.open .select-title {
  border-color: var(--lp-gold);
}
.products-sort-order .dropdown-menu {
  border: 1px solid var(--lp-border);
  border-radius: 6px;
  box-shadow: 0 8px 20px rgba(46, 36, 24, .1);
  padding: .3rem 0;
}
.products-sort-order .select-list {
  font-size: .86rem;
  color: var(--lp-text);
  padding: .5rem 1rem;
}
.products-sort-order .select-list:hover,
.products-sort-order .select-list.current {
  background: var(--lp-cream-light);
  color: var(--lp-gold-dark);
}

/* Cartes produit : polish supplémentaire (bordures/ombres déjà posées plus haut) */
.product-miniature .thumbnail-container {
  box-shadow: 0 2px 8px rgba(46, 36, 24, .05);
  border-radius: 6px;
  overflow: hidden;
}
.product-miniature .product-description {
  padding: .9rem 1rem 1.1rem;
}
.product-miniature .product-title {
  margin: 0 0 .35rem;
}
.product-miniature .product-title a {
  font-family: var(--lp-font-serif);
  font-size: 1.02rem;
  font-weight: 700;
  color: var(--lp-text);
  line-height: 1.3;
}
.product-miniature .product-title a:hover {
  color: var(--lp-gold-dark);
}
.product-miniature .price {
  color: var(--lp-gold-dark);
  font-weight: 700;
  font-size: 1rem;
}
.product-miniature .regular-price {
  color: var(--lp-text-muted);
  font-size: .86rem;
}

/* Pagination — markup réel : nav.pagination > ul.page-list > li > a
   (pas de .page-item/.page-link Bootstrap 4, corrigé 13/07 : le sélecteur
   précédent ne matchait rien, la pagination restait donc en style brut). */
.page-category .pagination {
  margin-top: 1.4rem;
  font-size: .86rem;
  color: var(--lp-text-muted);
}
.page-category .pagination .page-list {
  display: flex;
  flex-wrap: wrap;
  gap: .35rem;
  align-items: center;
}
.page-category .pagination .page-list li {
  list-style: none;
}
.page-category .pagination .page-list a {
  display: inline-flex;
  align-items: center;
  gap: .2rem;
  min-width: 2.2rem;
  height: 2.2rem;
  padding: 0 .6rem;
  border: 1px solid var(--lp-border);
  border-radius: 999px;
  color: var(--lp-text-muted);
  text-decoration: none;
  justify-content: center;
  transition: border-color .15s ease, color .15s ease, background-color .15s ease;
}
.page-category .pagination .page-list a:hover {
  border-color: var(--lp-gold);
  color: var(--lp-gold-dark);
  text-decoration: none;
}
.page-category .pagination .page-list li.current a {
  background: var(--lp-gold);
  border-color: var(--lp-gold);
  color: #fff;
}
.page-category .pagination .page-list a.disabled {
  opacity: .4;
  pointer-events: none;
}
.page-category .pagination .page-list .spacer {
  color: var(--lp-text-muted);
  padding: 0 .2rem;
}
.page-category .pagination .page-list .material-icons {
  font-size: 1.1rem;
}

/* ================================================================
   PAGE "VOTRE COMPTE" — cartes cohérentes avec le reste du site
   (même esprit que les cartes "Nos Univers" de la homepage : icône
   en médaillon + libellé, bordure douce, ombre légère au survol)
   ================================================================ */
.lp-account-links {
  display: flex;
  flex-wrap: wrap;
  margin: 0 -.6rem;
}
.lp-account-links > a {
  margin: .6rem;
  flex: 1 1 260px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--lp-cream-light);
  border: 1px solid var(--lp-border);
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(46, 36, 24, .05);
  padding: 1.6rem 1rem;
  text-decoration: none;
  color: var(--lp-text);
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.lp-account-links > a:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 26px rgba(46, 36, 24, .12);
  border-color: var(--lp-gold);
  text-decoration: none;
  color: var(--lp-text);
}
.lp-account-links .link-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .7rem;
  text-align: center;
}
/* #content ajouté : le thème a une règle .page-my-account #content .links a i
   (spécificité avec ID) qui écraserait sinon ce style (icônes en ovale plutôt
   qu'en médaillon rond — bug vécu 13/07). */
#content .lp-account-links .link-item .material-icons {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: var(--lp-cream);
  border: 1px solid var(--lp-border);
  color: var(--lp-gold-dark);
  font-size: 1.7rem;
  padding: 0;
  transition: background-color .2s ease, border-color .2s ease;
}
#content .lp-account-links > a:hover .link-item .material-icons {
  background: var(--lp-gold);
  border-color: var(--lp-gold);
  color: #fff;
}
.lp-account-links .link-item {
  font-family: var(--lp-font-serif);
  font-size: 1.02rem;
  font-weight: 700;
  letter-spacing: .01em;
  text-transform: none;
}
@media (max-width: 575px) {
  .lp-account-links > a { flex-basis: 100%; padding: 1.3rem 1rem; }
}

/* ---------- Espace libraire : compte en attente de validation ----------

   La tuile verrouillee est un <span>, pas un <a> : il n'y a rien a cliquer.
   Elle doit donc recevoir la meme mise en forme de base que les tuiles
   actives, d'ou son ajout a CHAQUE selecteur de tuile ci-dessous - sans quoi
   elle s'afficherait comme du texte nu au milieu de cartes.

   Grisee dans la charte, et non par un simple opacity : un opacity global
   delave aussi le message d'explication, qui est precisement ce qu'il faut
   pouvoir lire. Le fond, la bordure et l'icone sont donc traites un par un. */
.lp-account-links > .lp-tile-locked {
  margin: .6rem;
  flex: 1 1 260px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--lp-cream);
  border: 1px dashed var(--lp-border);
  border-radius: 8px;
  box-shadow: none;
  padding: 1.6rem 1rem;
  text-decoration: none;
  color: var(--lp-taupe, #8A7960);
  cursor: not-allowed;
}
/* Pas de survol : la tuile ne doit rien promettre. */
.lp-account-links > .lp-tile-locked:hover {
  transform: none;
  box-shadow: none;
  border-color: var(--lp-border);
}
#content .lp-account-links > .lp-tile-locked .link-item .material-icons {
  background: var(--lp-cream-light);
  border: 1px dashed var(--lp-border);
  color: var(--lp-taupe, #8A7960);
}
/* Le motif du verrouillage, seul element de la tuile a rester pleinement
   lisible : c'est la reponse a la question que se pose le libraire. */
.lp-tile-locked__why {
  display: block;
  margin-top: .45rem;
  font-family: var(--lp-font-sans, inherit);
  font-size: .8rem;
  font-style: normal;
  font-weight: 600;
  line-height: 1.35;
  letter-spacing: .02em;
  text-transform: uppercase;
  color: var(--lp-gold-dark);
}

/* Bandeau d'attente, au-dessus des tuiles. Sur fond creme et filet or, comme
   les encarts d'information du reste du site - une alerte rouge serait fausse :
   rien n'est en erreur, une demande est en cours d'examen. */
.lp-pro-pending {
  flex: 1 1 100%;
  display: flex;
  align-items: flex-start;
  gap: .9rem;
  margin: .6rem .6rem 1.2rem;
  padding: 1.1rem 1.3rem;
  background: var(--lp-cream-light);
  border: 1px solid var(--lp-border);
  border-left: 4px solid var(--lp-gold);
  border-radius: 6px;
  color: var(--lp-text);
  font-size: .95rem;
  line-height: 1.55;
}
.lp-pro-pending .material-icons {
  flex: 0 0 auto;
  color: var(--lp-gold-dark);
  font-size: 1.5rem;
  line-height: 1.4;
}
.lp-pro-pending strong { display: block; font-family: var(--lp-font-serif); }
@media (max-width: 575px) {
  .lp-account-links > .lp-tile-locked { flex-basis: 100%; padding: 1.3rem 1rem; }
  .lp-pro-pending { margin: .6rem .6rem 1rem; padding: .95rem 1rem; }
}

@media (max-width: 575px) {
  .lp-cat-header__title.h1 { font-size: 1.55rem; }
}

/* ---------- Bandeaux promotionnels ---------- */
.lp-promo-banners {
  display: flex;
  gap: 1.6rem;
  margin: 0 0 3.6rem;
  flex-wrap: wrap;
}

.lp-promo-banner {
  flex: 1 1 320px;
  display: flex;
  align-items: flex-end;
  min-height: 220px;
  padding: 2rem;
  border-radius: 4px;
  text-decoration: none;
  transition: transform .2s ease;
}
.lp-promo-banner:hover {
  transform: translateY(-3px);
}

.lp-promo-banner--dark {
  background: linear-gradient(135deg, var(--lp-text) 0%, var(--lp-text-dark2) 100%);
}

.lp-promo-banner--gold {
  background: linear-gradient(135deg, var(--lp-gold) 0%, var(--lp-gold-dark) 100%);
}

.lp-promo-banner__title {
  font-family: var(--lp-font-serif);
  font-size: 1.6rem;
  font-weight: 700;
  margin: 0 0 .5rem;
}
.lp-promo-banner--dark .lp-promo-banner__title { color: var(--lp-cream-light); }
.lp-promo-banner--gold .lp-promo-banner__title { color: var(--lp-text); }

.lp-promo-banner__text {
  font-size: .92rem;
  line-height: 1.5;
  margin: 0 0 1rem;
  max-width: 320px;
}
.lp-promo-banner--dark .lp-promo-banner__text { color: var(--lp-on-dark-dim); }
.lp-promo-banner--gold .lp-promo-banner__text { color: var(--lp-text-dark2); }

.lp-promo-banner__cta {
  display: inline-block;
  font-weight: 700;
  font-size: .85rem;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.lp-promo-banner--dark .lp-promo-banner__cta { color: var(--lp-gold); }
.lp-promo-banner--gold .lp-promo-banner__cta { color: var(--lp-text); }
.lp-promo-banner:hover .lp-promo-banner__cta {
  text-decoration: underline;
}

@media (max-width: 767px) {
  .lp-promo-banners {
    flex-direction: column;
  }
}

/* ---------- Footer reassurance icons ---------- */
.lp-reassurance {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1.8rem 1.2rem;
  padding: 2.2rem 0;
}

.lp-reassurance__item {
  flex: 1 1 150px;
  max-width: 200px;
  text-align: center;
}

.lp-reassurance__icon img {
  width: 38px;
  height: 38px;
  margin-bottom: .65rem;
}

.lp-reassurance__title {
  font-family: var(--lp-font-serif);
  font-weight: 600;
  font-size: .95rem;
  color: var(--lp-text);
  margin-bottom: .25rem;
}

.lp-reassurance__desc {
  font-size: .78rem;
  line-height: 1.4;
  color: var(--lp-text-muted);
  margin: 0;
}

/* ---------- Citations rotatives ---------- */
.lp-quotes {
  position: relative;
  text-align: center;
  max-width: 760px;
  margin: 0 auto 3.6rem;
  padding: 0 1.5rem;
}

.lp-quotes__mark {
  display: block;
  font-family: var(--lp-font-serif);
  font-size: 4.5rem;
  line-height: 1;
  color: var(--lp-gold);
  margin: 0 0 -.6rem;
}

.lp-quotes__viewport {
  min-height: 7.5rem;
}

.lp-quote {
  display: none;
  margin: 0;
}
.lp-quote.is-active {
  display: block;
  animation: lpQuoteFade .6s ease;
}

.lp-quote__text {
  font-family: var(--lp-font-serif);
  font-style: italic;
  font-size: 1.35rem;
  line-height: 1.55;
  color: var(--lp-text);
  margin: 0 0 1.1rem;
}

.lp-quote__source {
  font-size: .9rem;
  color: var(--lp-text-muted);
  letter-spacing: .02em;
}

.lp-quote__book {
  font-style: normal;
  font-weight: 600;
  color: var(--lp-text);
}

.lp-quote__sep {
  margin: 0 .4rem;
  color: var(--lp-border);
}

.lp-quote__link {
  display: block;
  margin-top: .5rem;
  color: var(--lp-gold-dark);
  text-decoration: none;
  font-weight: 600;
  letter-spacing: .03em;
}
.lp-quote__link:hover {
  color: var(--lp-gold-darkest);
  text-decoration: underline;
}

.lp-quotes__dots {
  display: flex;
  justify-content: center;
  gap: .55rem;
  margin-top: 1.6rem;
}

.lp-quotes__dot {
  width: 9px;
  height: 9px;
  padding: 0;
  border: 1px solid var(--lp-gold);
  border-radius: 50%;
  background: transparent;
  cursor: pointer;
  transition: background-color .2s ease;
}
.lp-quotes__dot.is-active {
  background: var(--lp-gold);
}

@keyframes lpQuoteFade {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ---------- Badges produits (Meilleure vente / Idee cadeau) ---------- */
.product-flags {
  gap: .5rem;
  padding-top: .65rem;
}

.product-flag {
  margin-top: 0 !important;
}

.product-flag.bestseller {
  background: var(--lp-text);
  color: var(--lp-cream);
  border: 1px solid var(--lp-gold);
}

.product-flag.gift {
  background: var(--lp-cream);
  color: var(--lp-gold-darkest);
  border: 1px solid var(--lp-gold);
}

/* ---------- Fiche produit ---------- */
.btn-primary,
.btn-primary:focus {
  background-color: var(--lp-gold);
  border-color: var(--lp-gold-dark);
  color: var(--lp-text);
}
.btn-primary:hover,
.btn-primary:active,
.btn-primary.active,
.show > .btn-primary.dropdown-toggle {
  background-color: var(--lp-gold-dark);
  border-color: var(--lp-gold-darkest);
  color: var(--lp-text);
}
.btn-primary:focus,
.btn-primary.focus {
  box-shadow: 0 0 0 3px rgba(201, 162, 39, .35);
}

.lp-stock-badge {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  font-size: .88rem;
  font-weight: 600;
  color: #3a7d44;
}
.lp-stock-badge .material-icons {
  font-size: 1rem;
}

.lp-delivery-mention {
  font-size: .82rem;
  color: var(--lp-text-muted);
  margin-top: .5rem;
}
.lp-delivery-mention strong {
  color: var(--lp-gold-dark);
}

/* --- Onglets fiche produit --- */
.tabs .nav-tabs {
  border-bottom: 2px solid var(--lp-border);
}
.tabs .nav-tabs .nav-link {
  color: var(--lp-text-muted);
  border: none;
  border-bottom: 2px solid transparent;
  margin-bottom: -2px;
  padding: .6rem 1.1rem;
  font-size: .88rem;
  letter-spacing: .04em;
  transition: color .15s, border-color .15s;
}
.tabs .nav-tabs .nav-link:hover {
  color: var(--lp-text);
  border-bottom-color: var(--lp-border);
}
.tabs .nav-tabs .nav-link.active,
.tabs .nav-tabs .nav-link.js-product-nav-active {
  color: var(--lp-gold-dark);
  border-bottom-color: var(--lp-gold);
  font-weight: 600;
}
.tabs .tab-content {
  padding: 1.4rem 0;
}

/* --- Tab Livraison & Retours --- */
.lp-delivery-tab__grid {
  display: flex;
  gap: 2.5rem;
  flex-wrap: wrap;
}
.lp-delivery-tab__col {
  flex: 1 1 220px;
}
.lp-delivery-tab__heading {
  display: flex;
  align-items: center;
  gap: .4rem;
  font-weight: 700;
  font-size: .95rem;
  color: var(--lp-text);
  margin-bottom: .7rem;
}
.lp-delivery-tab__heading .material-icons {
  font-size: 1.1rem;
  color: var(--lp-gold-dark);
}
.lp-delivery-tab ul {
  padding-left: 1.2rem;
  margin: 0;
  font-size: .88rem;
  color: var(--lp-text-muted);
  line-height: 1.8;
}
.lp-delivery-tab__more {
  margin-top: 1.2rem;
  font-size: .82rem;
}
.lp-delivery-tab__more a {
  color: var(--lp-gold-dark);
  text-decoration: underline;
}

/* ===================================================================
   GALERIE PRODUIT
   =================================================================== */

/* Image principale : curseur loupe */
.product-cover {
  border: 1px solid var(--lp-border);
  border-radius: 4px;
  overflow: hidden;
  background: var(--lp-cream-light);
}
.product-cover .layer {
  background: rgba(46, 36, 24, .35);
}
.product-cover .layer .material-icons {
  color: var(--lp-cream-light);
}

/* Strip de miniatures */
.images-container .mask {
  margin-top: .75rem;
}
.product-images {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  list-style: none;
  padding: 0;
  margin: 0;
}
.thumb-container {
  flex-shrink: 0;
}
.thumb-container picture {
  display: block;
}
.js-qv-product-images .thumb {
  width: 72px;
  height: 72px;
  object-fit: cover;
  border: 2px solid var(--lp-border);
  border-radius: 3px;
  cursor: pointer;
  transition: border-color .15s, opacity .15s;
  opacity: .75;
}
.js-qv-product-images .thumb:hover {
  border-color: var(--lp-gold);
  opacity: 1;
}
.js-qv-product-images .thumb.selected,
.js-qv-product-images .thumb.js-thumb-selected {
  border-color: var(--lp-gold);
  opacity: 1;
  box-shadow: 0 0 0 1px var(--lp-gold);
}

/* Modal zoom */
/* 🔴 PREFIXE A ID OBLIGATOIRE (07/09/2026) — theme.css pose
   `#product-modal .modal-content { padding: 0; background: 0 0; border: 0 }`
   (1 ID + 1 classe). L'ancienne regle `.js-product-images-modal .modal-content`
   (0 ID + 2 classes) perdait : LE MODAL N'A JAMAIS EU DE FOND, il etait
   entierement transparent. C'est ce qui faisait croire a un « cadre creme »
   deborde par les vignettes — le creme visible etait celui de la PHOTO du
   livre (couvertures standardisees 1000×1000 sur fond creme), pas le modal,
   et la colonne de vignettes se peignait donc a nu sur le menu.
   ⚠️ Contrôler ce point PAR CAPTURE : les boites etaient deja correctes. */
#product-modal .modal-content,
.js-product-images-modal .modal-content {
  background: var(--lp-cream-light);
  border: 1px solid var(--lp-border);
  border-radius: 3px;
  box-shadow: 0 10px 40px rgba(46, 36, 24, .35);
}
.js-product-images-modal .modal-body {
  display: flex;
  gap: 1rem;
  align-items: flex-start;
  padding: 1.2rem;
  /* 🔴 LE VRAI DEFAUT (mesure du 06/09/2026 au soir) : `.modal-body` faisait
     810 px DANS un `.modal-content` de 600 px, et debordait DES DEUX COTES
     (il commencait a 210 quand son parent commencait a 420). C'est ce
     conteneur trop large — pas la colonne de vignettes — qui poussait
     `#thumbnails` sur le menu. On le borne donc a la largeur de son parent,
     `box-sizing` compris (le padding de 1.2rem doit rentrer dans les 100 %).
     ⚠️ Ce bloc NE SUFFIT PAS a lui seul : la moitie du defaut vient d'un
     `margin-left` negatif pose par theme.css avec un ID — voir la regle
     prefixee `#product-modal ...` juste en dessous, qui est la vraie cle. */
  width: 100%;
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
}
/* 🔴 CAUSE RACINE DU DEBORDEMENT, TROUVEE LE 07/09/2026 — NE PAS DEPREFIXER.
   `theme.css` pose `#product-modal .modal-content .modal-body { margin-left: -35% }`
   (soit −210 px pour un modal de 600), heritage du theme Classic. Un override
   ecrit `.js-product-images-modal .modal-body` (0 ID, 2 classes) PERD contre
   1 ID + 2 classes, quel que soit l'ordre de chargement : la regle etait donc
   ignoree en silence, et le corps du modal restait decale vers la gauche —
   c'est ce decalage, pas une largeur excessive, qui peignait la colonne de
   vignettes par-dessus le menu.
   ⚠️ Meme piege que le `#header` du theme (cf. CLAUDE.md) : REPRENDRE LE MEME
   PREFIXE A ID, jamais ajouter `!important` en aveugle.
   Note : theme.css remet deja `margin-left: 0` sous 991 px — le defaut ne se
   voyait qu'en desktop, ce qui a contribue a le faire passer pour intermittent. */
#product-modal .modal-content .modal-body {
  margin-left: 0;
}
.js-product-images-modal figure {
  /* `1 1 0` et non `1` : la base 0 laisse l'image se calculer sur l'espace
     REELLEMENT disponible au lieu de partir de sa largeur intrinseque. */
  flex: 1 1 0;
  margin: 0;
  /* 🔴 min-width:0 EST LA CORRECTION, pas une precaution de style (06/09/2026).
     Un element flex vaut min-width:auto par defaut : il refuse de retrecir sous la
     largeur intrinseque de son contenu — ici une image de 800 px, dans un modal qui
     en fait 600. Le figure reclamait donc 800 px et poussait la colonne de vignettes
     HORS du cadre, jusque sur le menu. Le defaut paraissait intermittent parce qu'il
     depend du moment du chargement de l'image : modal etroit tant qu'elle n'est pas
     chargee (colonne dehors), elargi ensuite (colonne dedans). Ne pas retirer. */
  min-width: 0;
}
.js-product-images-modal .js-modal-product-cover {
  width: 100%;
  height: auto;
  border-radius: 3px;
}
.js-product-images-modal #thumbnails {
  width: 84px;
  flex-shrink: 0;
  /* Cale la colonne sur le HAUT DE L'IMAGE plutot que sur le haut du modal-body :
     sans cela elle remontait au niveau du menu (06/09/2026). */
  align-self: flex-start;
}
/* 🔴 NE PAS passer .modal-dialog en `display: flex` pour centrer le modal
   verticalement (essaye puis RETIRE le 06/09/2026). `.modal-content` devient alors
   un flex item : il cesse de remplir la largeur du dialogue, son fond creme ne
   couvre plus le cadre reel, et la colonne de vignettes se retrouve peinte HORS du
   creme — exactement le symptome qu'on corrigeait.
   ⚠️ Le piege est que les MESURES restaient bonnes (colonne 19 px a l'interieur de
   `.modal-content`) : c'est la capture qui a montre le defaut. Mesurer la boite ne
   dit pas ou le fond est peint. Si le centrage vertical est souhaite un jour,
   passer par la classe Bootstrap `.modal-dialog-centered` sur le gabarit. */
.js-product-images-modal .js-modal-product-images {
  display: flex;
  flex-direction: column;
  gap: .4rem;
  list-style: none;
  padding: 0;
  margin: 0;
}
.js-product-images-modal .js-modal-thumb {
  width: 72px;
  height: 72px;
  object-fit: cover;
  border: 2px solid var(--lp-border);
  border-radius: 3px;
  cursor: pointer;
  transition: border-color .15s;
  opacity: .75;
}
.js-product-images-modal .js-modal-thumb:hover,
.js-product-images-modal .js-modal-thumb.selected {
  border-color: var(--lp-gold);
  opacity: 1;
}
.js-product-images-modal .image-caption {
  display: none;
}

/* Responsive galerie : strip horizontal sur mobile */
@media (max-width: 767px) {
  .js-product-images-modal .modal-body {
    flex-direction: column;
  }
  .js-product-images-modal #thumbnails {
    width: 100%;
  }
  .js-product-images-modal .js-modal-product-images {
    flex-direction: row;
    flex-wrap: wrap;
  }
}

/* ===================================================================
   RESPONSIVE MOBILE
   =================================================================== */

/* --- Titres de section --- */
@media (max-width: 767px) {
  .lp-section-title {
    font-size: 1.6rem;
  }
}

/* --- Topbar : supprimer les séparateurs en wrap (ils cassent la mise en page) --- */
@media (max-width: 575px) {
  .lp-topbar__list {
    gap: .25rem .7rem;
  }
  .lp-topbar__list li + li::before {
    display: none;
  }
}

/* --- Hero : breakpoint supplémentaire pour petits téléphones --- */
@media (max-width: 480px) {
  .lp-hero__content {
    padding: 1.6rem 1.2rem;
  }
  .lp-hero__title {
    font-size: 1.75rem;
  }
  .lp-hero__media {
    min-height: 200px;
  }
  .lp-hero__text {
    font-size: .95rem;
    margin-bottom: 1rem;
  }
  .lp-hero__checks {
    gap: .35rem;
    margin-bottom: 1.2rem;
  }
  .lp-hero__checks li {
    font-size: .88rem;
  }
}

/* --- Catégories : 2 colonnes sur mobile/petite tablette --- */
@media (max-width: 767px) {
  .lp-categories__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.4rem 1rem;
    max-width: 360px;
  }
}

/* --- Catégories : cartes plus petites sur mobile étroit --- */
@media (max-width: 575px) {
  .lp-categories__grid {
    gap: 1rem .7rem;
  }
  .lp-category-card__icon {
    width: 84px;
    height: 84px;
  }
  .lp-category-card__icon img,
  .lp-category-card__svg {
    width: 40px;
    height: 40px;
  }
  .lp-category-card__label {
    font-size: .95rem;
  }
  .lp-category-card__desc {
    font-size: .72rem;
  }
}

/* --- Bestsellers : miniatures pleine largeur sur mobile --- */
@media (max-width: 575px) {
  .lp-bestsellers .products {
    flex-direction: column;
    align-items: stretch;
  }
  .lp-bestsellers .products .js-product {
    width: 100%;
  }
}

/* --- Citations : texte réduit sur mobile --- */
@media (max-width: 575px) {
  .lp-quote__text {
    font-size: 1.1rem;
  }
  .lp-quotes {
    padding: 0 .5rem;
  }
}

/* --- Onglets fiche produit : scroll horizontal sur mobile --- */
@media (max-width: 767px) {
  .tabs .nav-tabs {
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding-bottom: 1px;
  }
  .tabs .nav-tabs::-webkit-scrollbar {
    display: none;
  }
  .tabs .nav-tabs .nav-item {
    flex-shrink: 0;
  }
  .tabs .nav-tabs .nav-link {
    white-space: nowrap;
    padding: .5rem .75rem;
  }
}

/* --- Tab Livraison & Retours : gap réduit en mobile --- */
@media (max-width: 575px) {
  .lp-delivery-tab__grid {
    gap: 1.4rem;
  }
}

/* --- Réassurance footer : 2 colonnes propres sur mobile --- */
@media (max-width: 575px) {
  .lp-reassurance {
    gap: 1rem;
  }
  .lp-reassurance__item {
    flex: 1 1 calc(50% - .5rem);
    max-width: none;
  }
}

/* ================================================================
   BLOG
   ================================================================ */

/* ── Section "Derniers articles" (homepage + page blog) ── */
.lp-blog-preview {
  padding: 3.5rem 1.5rem;
  background: #F7F0E0;
}

.lp-blog-category-intro {
  color: #8A7960;
  font-size: .95rem;
  margin-bottom: 2rem;
  text-align: center;
}

.lp-blog-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 1.25rem;
  margin-bottom: 2rem;
}

.lp-blog-grid > [class*="col-"] {
  display: flex;
  flex-direction: column;
}

/* Page liste du blog : 2 colonnes nettes. Les cartes sont dans des wrappers
   Bootstrap col-md-6 (largeur 50 %) ; combinés au gap 1.25rem du conteneur
   flex, deux colonnes ne tenaient pas sur une ligne → rendu en 1 colonne très
   large. On passe cette grille précise en CSS grid 2 colonnes et on neutralise
   largeur 50 % + gouttières bootstrap. Scopé à .lp-blog-list-page pour ne PAS
   toucher le bloc blog de la homepage ni la page CMS catégorie (col-md-4, 3-up). */
.lp-blog-list-page .lp-blog-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin: 0 0 2rem;
}
.lp-blog-list-page .lp-blog-grid > [class*="col-"] {
  width: 100%;
  max-width: 100%;
  flex: 0 0 auto;
  padding-left: 0;
  padding-right: 0;
}

/* ── Carte article ── */
.lp-blog-card {
  background: #fff;
  border: 1px solid #E2D5BA;
  border-radius: 3px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  flex: 1;
  transition: box-shadow .2s ease, transform .2s ease;
}
.lp-blog-card:hover {
  box-shadow: 0 6px 22px rgba(46,36,24,.13);
  transform: translateY(-2px);
}

/* Visual header */
.lp-blog-card__cover {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 180px;
  text-decoration: none;
  transition: opacity .2s;
}
.lp-blog-card__cover:hover { opacity: .92; }

.lp-blog-card__cover--1 { background: linear-gradient(135deg, #2E2418 0%, #4a3828 100%); }
.lp-blog-card__cover--2 { background: linear-gradient(135deg, #3d2a10 0%, #5c4020 100%); }
.lp-blog-card__cover--3 { background: linear-gradient(135deg, #1a2a2e 0%, #2a3e44 100%); }

.lp-blog-card__cover .material-icons {
  font-size: 3.2rem;
  color: #C9A227;
}

/* Body */
.lp-blog-card__body {
  padding: 1.25rem 1.25rem 1.5rem;
  display: flex;
  flex-direction: column;
  flex: 1;
}

/* Badge catégorie */
.lp-article-cat {
  display: inline-block;
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: #C9A227;
  margin-bottom: .6rem;
}

/* ---------- Section avis produit (hors onglet) ---------- */
.lp-product-reviews {
  margin: 2.5rem 0 1.5rem;
  padding: 2rem 0 0;
  border-top: 2px solid var(--lp-border);
}

.lp-product-reviews__title {
  font-family: var(--lp-font-serif);
  font-size: 1.45rem;
  font-weight: 700;
  color: var(--lp-text);
  margin-bottom: 1.4rem;
}

/* Masque le header interne du module (déjà remplacé par notre h2) */
.lp-product-reviews #product-comments-list-header {
  display: none;
}

/* Bouton "Écrire un avis" en doré */
.lp-product-reviews .btn-comment {
  background: var(--lp-gold);
  color: #fff;
  border: none;
  padding: .55rem 1.4rem;
  font-weight: 600;
  border-radius: 3px;
  margin-top: 1.2rem;
  transition: background .2s;
}
.lp-product-reviews .btn-comment:hover {
  background: var(--lp-gold-dark);
}

/* Style des commentaires individuels */
.lp-product-reviews .product-comment-list-item {
  border-bottom: 1px solid var(--lp-border);
  padding: 1.1rem 0;
}
.lp-product-reviews .product-comment-list-item:last-child {
  border-bottom: none;
}

/* Dans le contexte article page, le badge prend un fond léger */
.page-cms-content .lp-article-cat {
  background: #F4ECDC;
  border: 1px solid #E2D5BA;
  border-radius: 2px;
  padding: .15rem .55rem;
  color: #8C6E18;
}

.lp-blog-card__title {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 1.1rem;
  font-weight: 600;
  line-height: 1.35;
  margin: 0 0 .5rem;
}
.lp-blog-card__title a {
  color: #2E2418;
  text-decoration: none;
}
.lp-blog-card__title a:hover { color: #C9A227; }

.lp-blog-card__meta {
  font-size: .72rem;
  color: #8A7960;
  margin-bottom: .8rem;
}

.lp-blog-card__excerpt {
  font-size: .875rem;
  color: #5a4f44;
  line-height: 1.65;
  flex: 1;
  margin-bottom: 1rem;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.lp-blog-card__more {
  color: #C9A227;
  font-size: .78rem;
  font-weight: 700;
  text-decoration: none;
  letter-spacing: .04em;
  margin-top: auto;
}
.lp-blog-card__more:hover { color: #A8841E; text-decoration: none; }

/* Bouton "Voir tous les articles" */
.lp-blog-preview__footer {
  text-align: center;
  margin-top: .5rem;
}
.lp-blog-preview__btn {
  border: 2px solid #C9A227;
  color: #C9A227 !important;
  font-size: .82rem;
  font-weight: 700;
  letter-spacing: .06em;
  padding: .55rem 2rem;
  border-radius: 2px;
  text-decoration: none;
  display: inline-block;
  transition: background .2s, color .2s;
}
.lp-blog-preview__btn:hover {
  background: #C9A227;
  color: #fff !important;
  text-decoration: none;
}

/* ---------- Commentaires (blog + vidéo produit, module laparachacomments) ---------- */
.lp-comments {
  margin: 2.4rem 0;
  padding-top: 1.8rem;
  border-top: 1px solid var(--lp-border);
}
.lp-comments__title {
  font-family: var(--lp-font-serif);
  font-size: 1.25rem;
  margin: 0 0 1.1rem;
}
.lp-comments__notice {
  padding: .7rem 1rem;
  border-radius: 3px;
  font-size: .88rem;
  margin: 0 0 1.1rem;
}
.lp-comments__notice--ok {
  background: #EFF6E9;
  color: #3D5C2E;
  border: 1px solid #CFE3C2;
}
.lp-comments__notice--error {
  background: #FBEDEC;
  color: #8C2E24;
  border: 1px solid #F0C9C5;
}
.lp-comments__list {
  list-style: none;
  margin: 0 0 1.6rem;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.lp-comments__item {
  background: var(--lp-cream-light);
  border: 1px solid var(--lp-border);
  border-radius: 4px;
  padding: .9rem 1.1rem;
}
.lp-comments__meta {
  display: flex;
  align-items: baseline;
  gap: .6rem;
  margin-bottom: .35rem;
}
.lp-comments__name {
  font-weight: 700;
  color: var(--lp-text);
}
.lp-comments__date {
  font-size: .78rem;
  color: var(--lp-text-muted);
}
.lp-comments__text {
  margin: 0;
  font-size: .92rem;
  line-height: 1.55;
  color: var(--lp-text);
}
.lp-comments__form {
  max-width: 560px;
}
.lp-comments__hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}
.lp-comments__row {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
}
.lp-comments__field {
  flex: 1 1 220px;
  margin-bottom: .9rem;
}
.lp-comments__field label {
  display: block;
  font-size: .82rem;
  font-weight: 600;
  color: var(--lp-text);
  margin-bottom: .3rem;
}
.lp-comments__hint {
  font-weight: 400;
  color: var(--lp-text-muted);
  font-size: .74rem;
}
.lp-comments__field input,
.lp-comments__field textarea {
  width: 100%;
  border: 1px solid var(--lp-border);
  border-radius: 3px;
  padding: .55rem .7rem;
  font-size: .9rem;
  font-family: inherit;
  background: #fff;
  color: var(--lp-text);
}
.lp-comments__field input:focus,
.lp-comments__field textarea:focus {
  outline: none;
  border-color: #C9A227;
  box-shadow: 0 0 0 2px rgba(201, 162, 39, .15);
}
.lp-comments__submit {
  border: none;
  background: #C9A227;
  color: #fff;
  font-weight: 700;
  letter-spacing: .04em;
  padding: .65rem 1.8rem;
  border-radius: 2px;
  cursor: pointer;
  transition: background .2s;
}
.lp-comments__submit:hover {
  background: #A8841E;
}
.lp-comments__moderation {
  margin: .6rem 0 0;
  font-size: .74rem;
  color: var(--lp-text-muted);
}

/* ── Page article individuelle ── */
.lp-blog-back {
  display: inline-block;
  margin-bottom: 1.5rem;
  color: #8A7960;
  font-size: .78rem;
  text-decoration: none;
}
.lp-blog-back:hover { color: #C9A227; }

.lp-article-meta {
  font-size: .78rem;
  color: #8A7960;
  margin-bottom: 1.75rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid #E2D5BA;
}
.lp-article-meta time { font-weight: 600; color: #5a4f44; }

.lp-article-pdf {
  float: right;
  border: 1px solid #C9A227;
  color: #C9A227 !important;
  font-weight: 700;
  letter-spacing: .04em;
  padding: .3rem .9rem;
  border-radius: 2px;
  text-decoration: none;
  transition: background .2s, color .2s;
}
.lp-article-pdf:hover {
  background: #C9A227;
  color: #fff !important;
  text-decoration: none;
}

.page-cms-content p { line-height: 1.8; margin-bottom: 1rem; }

.page-cms-content h2 {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 1.35rem;
  font-weight: 600;
  color: #2E2418;
  margin: 2rem 0 .75rem;
  padding-bottom: .4rem;
  border-bottom: 1px solid #E2D5BA;
}

.page-cms-content ul {
  padding-left: 1.5rem;
  margin-bottom: 1rem;
}
.page-cms-content li { margin-bottom: .45rem; line-height: 1.7; }
.page-cms-content hr { border-color: #E2D5BA; margin: 2rem 0; }

.page-cms-content a { color: #C9A227; }
.page-cms-content a:hover { color: #A8841E; }

/* ── Responsive ── */
@media (max-width: 767px) {
  .lp-blog-grid { flex-direction: column; gap: .9rem; }
  .lp-blog-list-page .lp-blog-grid { grid-template-columns: 1fr; gap: .9rem; }
  .lp-blog-card__cover { height: 140px; }
  .lp-blog-preview { padding: 2.5rem 1rem; }
}

/* ================================================================
   CARROUSEL "VOUS AIMEREZ AUSSI"
   ================================================================ */

.lp-also-section {
  margin: 2.5rem 0 1rem;
  padding: 2rem 0 0;
  border-top: 2px solid var(--lp-border);
}

.lp-also-section__title {
  font-family: var(--lp-font-serif);
  font-size: 1.45rem;
  font-weight: 700;
  color: var(--lp-text);
  margin-bottom: 1.4rem;
}

/* Wrapper : relatif pour positionner les flèches */
.lp-also-wrapper {
  position: relative;
}

.lp-also-carousel {
  display: flex;
  gap: 1rem;
  overflow: hidden;
  scroll-behavior: smooth;
  padding-bottom: .25rem;
}

/* 4 cartes visibles sur desktop : calc((100% - 3*1rem) / 4) */
.lp-also-card {
  flex: 0 0 calc(25% - .75rem);
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: var(--lp-text);
  border: 1px solid var(--lp-border);
  border-radius: 4px;
  overflow: hidden;
  background: var(--lp-cream-light);
  transition: box-shadow .2s ease, transform .2s ease;
}
.lp-also-card:hover {
  box-shadow: 0 6px 18px rgba(46, 36, 24, .12);
  transform: translateY(-3px);
  color: var(--lp-text);
}

.lp-also-card__img {
  height: 180px;
  background: var(--lp-cream-deep);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.lp-also-card__img img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: .5rem;
}
.lp-also-card__img--placeholder .material-icons {
  font-size: 3rem;
  color: var(--lp-border);
}

.lp-also-card__body {
  padding: .75rem .85rem;
  flex: 1;
}

.lp-also-card__name {
  font-size: .82rem;
  font-weight: 600;
  line-height: 1.35;
  margin: 0 0 .4rem;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.lp-also-card__price {
  font-family: var(--lp-font-serif);
  font-size: 1rem;
  font-weight: 600;
  color: var(--lp-gold-dark);
  margin: 0;
}

/* Flèches de navigation */
.lp-also-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  background: #fff;
  color: #b8973a;
  border: 1px solid #e8dcc5;
  border-radius: 50%;
  box-shadow: 0 2px 10px rgba(0, 0, 0, .12);
  cursor: pointer;
  font-size: 1.15rem;
  line-height: 1;
  padding: 0;
  transition: box-shadow .15s ease, background-color .15s ease;
}
.lp-also-btn:hover:not(:disabled) {
  background: #fdf8ef;
  box-shadow: 0 4px 16px rgba(0, 0, 0, .2);
}
.lp-also-btn:disabled {
  opacity: .3;
  cursor: default;
}
.lp-also-btn--prev { left: -19px; }
.lp-also-btn--next { right: -19px; }

/* Responsive : 2 cartes sur mobile */
@media (max-width: 575px) {
  .lp-also-card {
    flex: 0 0 calc(50% - .5rem);
  }
  .lp-also-btn {
    width: 30px;
    height: 30px;
    font-size: .95rem;
  }
  .lp-also-btn--prev { left: -15px; }
  .lp-also-btn--next { right: -15px; }
}

/* ================================================================
   CARROUSEL VIDEOS YOUTUBE
   ================================================================ */

.lp-video-section {
  margin: 2.5rem 0 1rem;
  padding: 2rem 0 0;
  border-top: 2px solid var(--lp-border);
}

.lp-video-section__title {
  font-family: var(--lp-font-serif);
  font-size: 1.45rem;
  font-weight: 700;
  color: var(--lp-text);
  margin-bottom: 1.2rem;
}

.lp-video-wrap-outer {
  position: relative;
  display: flex;
  align-items: center;
  gap: .5rem;
}

.lp-video-carousel {
  flex: 1;
  min-width: 0;
}

.lp-video-slide {
  display: none;
}
.lp-video-slide.is-active {
  display: block;
}

.lp-video-responsive {
  position: relative;
  padding-bottom: 56.25%;
  height: 0;
  overflow: hidden;
  border-radius: 4px;
  background: #000;
}
.lp-video-responsive iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

.lp-video-nav-btn {
  flex-shrink: 0;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: #fff;
  border: 1px solid var(--lp-border);
  color: var(--lp-gold-dark);
  font-size: 1.2rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background .15s, box-shadow .15s;
  padding: 0;
}
.lp-video-nav-btn:hover { background: var(--lp-cream-light); box-shadow: 0 2px 8px rgba(0,0,0,.12); }

.lp-video-dots {
  display: flex;
  justify-content: center;
  gap: .5rem;
  margin-top: .9rem;
}
.lp-video-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--lp-border);
  border: none;
  padding: 0;
  cursor: pointer;
  transition: background .2s;
}
.lp-video-dot.is-active { background: var(--lp-gold); }

/* ================================================================
   BOUTON FEUILLETER + LISEUSE PDF
   ================================================================ */

.lp-feuilleter-wrap {
  margin-top: 1rem;
  text-align: center;
}

.lp-feuilleter-btn {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  background: var(--lp-cream-light);
  border: 1px solid var(--lp-gold);
  color: var(--lp-gold-dark);
  font-size: .9rem;
  font-weight: 600;
  letter-spacing: .04em;
  padding: .7rem 1.6rem;
  border-radius: 3px;
  cursor: pointer;
  transition: background .2s, color .2s, box-shadow .2s;
}
.lp-feuilleter-btn:hover {
  background: var(--lp-gold);
  color: var(--lp-text);
  box-shadow: 0 4px 14px rgba(201,162,39,.3);
}
.lp-feuilleter-btn .material-icons {
  font-size: 1.1rem;
}

/* --- Modal --- */
.lp-pdf-modal {
  position: fixed;
  inset: 0;
  z-index: 2000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  box-sizing: border-box;
}

.lp-pdf-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(46, 36, 24, .7);
  backdrop-filter: blur(3px);
}

.lp-pdf-modal__dialog {
  position: relative;
  z-index: 1;
  background: var(--lp-cream-light);
  border: 1px solid var(--lp-border);
  border-radius: 6px;
  display: flex;
  flex-direction: column;
  max-width: 900px;
  width: 100%;
  max-height: 94vh;
  box-shadow: 0 20px 60px rgba(0,0,0,.45);
  overflow: hidden;
}

.lp-pdf-modal__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: .7rem 1.1rem;
  background: var(--lp-text);
  flex-shrink: 0;
}

.lp-pdf-modal__title {
  font-family: var(--lp-font-serif);
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--lp-cream-light);
  letter-spacing: .03em;
}

.lp-pdf-modal__ctrls {
  display: flex;
  align-items: center;
  gap: .4rem;
}

.lp-pdf-ctrl {
  background: rgba(255,255,255,.12);
  border: 1px solid rgba(255,255,255,.2);
  color: var(--lp-cream-light);
  border-radius: 3px;
  min-width: 30px;
  height: 30px;
  padding: 0 .55rem;
  font-size: .85rem;
  font-weight: 600;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background .15s;
}
.lp-pdf-ctrl:hover { background: rgba(255,255,255,.22); }

.lp-pdf-zoom-val {
  pointer-events: none;
  min-width: 42px;
  text-align: center;
  font-size: .78rem;
}

.lp-pdf-ctrl--close {
  font-size: 1.3rem;
  background: rgba(180,30,30,.45);
  border-color: rgba(255,80,80,.3);
  margin-left: .3rem;
}
.lp-pdf-ctrl--close:hover { background: rgba(180,30,30,.75); }

.lp-pdf-modal__body {
  display: flex;
  align-items: center;
  gap: .5rem;
  flex: 1;
  overflow: hidden;
  padding: .8rem;
  background: #e8e0d0;
}

.lp-pdf-canvas-wrap {
  flex: 1;
  min-width: 0;
  overflow: auto;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  position: relative;
  background: #c8bfac;
  border-radius: 3px;
  max-height: 70vh;
}

.lp-pdf-canvas-wrap canvas {
  display: block;
  box-shadow: 0 4px 20px rgba(0,0,0,.3);
  transition: opacity .3s ease;
}

.lp-pdf-loading {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: var(--lp-text-muted);
  font-size: .9rem;
  pointer-events: none;
}

.lp-pdf-navbtn {
  flex-shrink: 0;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: #fff;
  border: 1px solid var(--lp-border);
  color: var(--lp-gold-dark);
  font-size: 1.6rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background .15s, box-shadow .15s;
  padding: 0;
}
.lp-pdf-navbtn:hover:not(:disabled) { background: var(--lp-cream-light); box-shadow: 0 2px 8px rgba(0,0,0,.15); }
.lp-pdf-navbtn:disabled { opacity: .3; cursor: default; }

.lp-pdf-modal__footer {
  padding: .55rem 1.1rem;
  background: var(--lp-cream);
  border-top: 1px solid var(--lp-border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-shrink: 0;
  gap: 1rem;
}

#lp-pdf-page-info {
  font-size: .82rem;
  font-weight: 600;
  color: var(--lp-text);
}

.lp-pdf-modal__limit {
  font-size: .78rem;
  color: var(--lp-text-muted);
  font-style: italic;
}

@media (max-width: 575px) {
  .lp-pdf-modal__body { padding: .4rem; gap: .25rem; }
  .lp-pdf-navbtn { width: 32px; height: 32px; font-size: 1.2rem; }
  .lp-pdf-modal__footer { flex-direction: column; gap: .25rem; text-align: center; }
}

/* ================================================================
   PACKS EN PROMOTION — bloc intégré en flux (fiche produit)
   (ex-widget flottant "position: fixed" au bord du viewport, 13/07)
   ================================================================ */

.lp-packs-promo {
  margin: 2.6rem 0 1rem;
}
.lp-packs-promo__title {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 1.55rem;
  font-weight: 700;
  color: var(--lp-text);
  text-align: center;
  margin: 0 0 1.3rem;
}
.lp-packs-promo__grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1.2rem;
}
.lp-packs-promo__card {
  display: flex;
  flex-direction: column;
  width: 200px;
  background: #FFF8ED;
  border: 1px solid var(--lp-border);
  border-radius: 8px;
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  box-shadow: 0 2px 8px rgba(46, 36, 24, .05);
  transition: transform .2s ease, box-shadow .2s ease;
}
.lp-packs-promo__card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 26px rgba(46, 36, 24, .13);
}
.lp-packs-promo__img {
  width: 100%;
  height: 150px;
  object-fit: contain;
  background: var(--lp-cream);
  padding: .5rem;
  display: block;
}
.lp-packs-promo__img--ph {
  display: flex;
  align-items: center;
  justify-content: center;
}
.lp-packs-promo__img--ph .material-icons { font-size: 2.8rem; color: var(--lp-border); }
.lp-packs-promo__body {
  padding: .7rem .85rem 1rem;
  display: flex;
  flex-direction: column;
  flex: 1;
}
.lp-packs-promo__name {
  font-size: .82rem;
  font-weight: 600;
  color: var(--lp-text);
  line-height: 1.35;
  margin: 0 0 .5rem;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.lp-packs-promo__prices {
  margin: 0 0 .7rem;
}
.lp-packs-promo__old {
  font-size: .78rem;
  color: var(--lp-text-muted);
  text-decoration: line-through;
  margin-right: .4rem;
}
.lp-packs-promo__new {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--lp-gold-dark);
}
.lp-packs-promo__btn {
  margin-top: auto;
  display: block;
  text-align: center;
  background: var(--lp-gold);
  color: #fff;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
  padding: .5rem;
  border-radius: 4px;
  transition: background-color .2s ease;
}
.lp-packs-promo__card:hover .lp-packs-promo__btn {
  background: var(--lp-gold-dark);
}
@media (max-width: 575px) {
  .lp-packs-promo__card { width: 100%; max-width: 280px; }
}

/* ================================================================
   FICHE PRODUIT — hiérarchie paiement
   CTA principal = "Ajouter au panier" (tunnel complet). Le raccourci
   PayPal express est rendu secondaire ; un bloc "moyens de paiement"
   rassure sur le fait que PayPal n'est pas le seul chemin.
   ================================================================ */

/* Raccourci PayPal Express (rendu par le hook displayProductActions, sur sa
   propre ligne via le flex-basis:100% que le module pose sur [installment-
   container]). On le rend SECONDAIRE : largeur contrainte à ~300px pour ne pas
   rivaliser avec le "Ajouter au panier" pleine largeur, et un libellé "ou
   paiement express" injecté au-dessus du 1er élément PayPal. Le bouton wishlist
   (aussi dans ce hook) n'est PAS affecté : il reste sur la ligne du CTA. */
.product-quantity [paypal-button-container],
.product-quantity [installment-container] {
  max-width: 300px;
}
/* Libellé "ou paiement express" juste au-dessus du bouton PayPal Acheter
   (conteneur toujours présent, rempli d'une iframe par le SDK). */
.product-quantity [paypal-button-container]::before {
  content: "ou paiement express";
  display: block;
  max-width: 300px;
  text-align: center;
  font-size: .72rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--lp-text-muted);
  margin: .3rem 0 .5rem;
}

/* Moyens de paiement acceptés — réassurance discrète, non concurrente du CTA. */
.lp-payments {
  margin-top: 1.1rem;
  padding-top: 1rem;
  border-top: 1px solid var(--lp-border);
}
.lp-payments__label {
  display: block;
  font-size: .82rem;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--lp-text);
  margin-bottom: .55rem;
}
.lp-payments__list {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  list-style: none;
  padding: 0;
  margin: 0;
}
.lp-payments__item {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  font-size: .82rem;
  color: var(--lp-text);
  background: var(--lp-cream-light);
  border: 1px solid var(--lp-border);
  border-radius: 999px;
  padding: .3rem .7rem;
}
.lp-payments__item .material-icons {
  font-size: 1.05rem;
  color: var(--lp-gold-dark);
}
.lp-payments__note {
  margin: .55rem 0 0;
  font-size: .84rem;
  font-weight: 500;
  color: var(--lp-text-muted);
}

/* ================================================================
   SLIDER HOMEPAGE
   ================================================================ */

.lp-slider {
  position: relative;
  overflow: hidden;
  margin: 1.5rem 0 2.5rem;
  border-radius: 4px;
  background: var(--lp-text);
  border: 1px solid var(--lp-gold-darkest);
}

.lp-slider__track {
  display: flex;
  transition: transform .5s ease;
  will-change: transform;
}

.lp-slider__slide {
  flex: 0 0 100%;
  width: 100%;
}

.lp-slider__slide a {
  display: block;
}

.lp-slider__slide img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 1;        /* hauteur = largeur ÷ 4, cale le conteneur sur la slide 1 (4:1) */
  height: auto;
  object-fit: cover;
  object-position: center;    /* recadrage équilibré haut/bas pour les slides 2-5 (2,96:1) */
}

/* Slides conçues comme des bandeaux (ratio ≠ 4:1) : on les affiche ENTIÈRES
   (contain) au lieu de les rogner (cover). Fond assorti au visuel : crème pour
   les bandeaux clairs, sombre pour les bandeaux sombres. Ciblé par classe (pas
   par :nth-child) pour rester robuste quand on ajoute/retire des slides. */
.lp-slider__slide--fit-cream img,
.lp-slider__slide--fit-dark img {
  object-fit: contain;
  object-position: center;
}
.lp-slider__slide--fit-cream img { background-color: #FAF1E6; }
.lp-slider__slide--fit-dark img  { background-color: #00060F; }

/* Flèches */
.lp-slider__btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(255, 255, 255, .85);
  border: none;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  font-size: 1.7rem;
  line-height: 1;
  color: var(--lp-text);
  cursor: pointer;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 10px rgba(0, 0, 0, .25);
  transition: background .2s, box-shadow .2s;
  padding: 0;
}
.lp-slider__btn:hover {
  background: #fff;
  box-shadow: 0 4px 18px rgba(0, 0, 0, .38);
}
.lp-slider__btn--prev { left: 16px; }
.lp-slider__btn--next { right: 16px; }

/* Dots */
.lp-slider__dots {
  position: absolute;
  bottom: 14px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: .5rem;
  z-index: 10;
}

.lp-slider__dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .45);
  border: 2px solid rgba(255, 255, 255, .7);
  padding: 0;
  cursor: pointer;
  transition: background .2s, border-color .2s;
}
.lp-slider__dot.is-active {
  background: var(--lp-gold);
  border-color: var(--lp-gold);
}

@media (max-width: 767px) {
  .lp-slider__slide img {
    height: 220px;
  }
  .lp-slider__btn {
    width: 34px;
    height: 34px;
    font-size: 1.2rem;
  }
  .lp-slider__btn--prev { left: 8px; }
  .lp-slider__btn--next { right: 8px; }
}

/* ================================================================
   SECTION "BIENVENUE" (texte de présentation)
   ================================================================ */

.lp-welcome {
  background: var(--lp-cream-light);
  border-top: 1px solid var(--lp-border);
  border-bottom: 1px solid var(--lp-border);
  padding: 3rem 1.5rem;
  margin: 0 0 3.2rem;
  text-align: center;
}

.lp-welcome__inner {
  max-width: 680px;
  margin: 0 auto;
}

.lp-welcome__text {
  font-size: 1.05rem;
  line-height: 1.75;
  color: var(--lp-text);
  margin: 0 0 .8rem;
}

.lp-welcome__sub {
  font-size: .9rem;
  color: var(--lp-text-muted);
  font-style: italic;
  margin: .8rem 0 0;
  letter-spacing: .02em;
}

@media (max-width: 575px) {
  .lp-welcome {
    padding: 2rem 1rem;
  }
  .lp-welcome__text {
    font-size: .95rem;
  }
}

/* ================================================================
   BOUTON WHATSAPP FLOTTANT
   ================================================================ */

.lp-whatsapp-btn {
  position: fixed;
  bottom: 20px;
  right: 20px;
  z-index: 1100;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 18px 0 14px;
  height: 46px;
  background: #25D366;
  border-radius: 50px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, .25);
  text-decoration: none;
  transition: box-shadow .2s ease;
}
.lp-whatsapp-btn:hover {
  box-shadow: 0 8px 28px rgba(0, 0, 0, .38);
  text-decoration: none;
}
.lp-whatsapp-btn svg {
  width: 26px;
  height: 26px;
  flex-shrink: 0;
  display: block;
}
.lp-whatsapp-btn span {
  color: #fff;
  font-size: 14px;
  font-weight: 600;
  white-space: nowrap;
  letter-spacing: .02em;
}


/* ================================================================
   RANGÉE HAUTE ACCUEIL : bienvenue + encart « Une pensée »
   ================================================================ */

.lp-top-row {
  display: flex;
  align-items: stretch;
  gap: 1.6rem;
  margin: 2.4rem 0 3.2rem;
}

.lp-top-row .lp-welcome--intro {
  flex: 1 1 auto;
  margin: 0;
  border: 1px solid var(--lp-border);
  display: flex;
  align-items: center;
  justify-content: center;
}

.lp-quotes--card {
  flex: 0 0 340px;
  width: 340px;
  min-height: 340px;
  max-width: none;
  margin: 0;
  padding: 1.4rem 1.4rem 1.1rem;
  background: var(--lp-cream-light);
  border: 1px solid var(--lp-border);
  border-radius: 10px;
  display: flex;
  flex-direction: column;
}

.lp-quotes--card .lp-quotes__mark {
  font-size: 3rem;
  margin: 0 0 -.4rem;
}

.lp-quotes__card-title {
  font-family: var(--lp-font-serif);
  font-size: 1.05rem;
  color: var(--lp-text);
  text-align: center;
  margin: 0 0 .9rem;
}

.lp-quotes--card .lp-quotes__viewport {
  min-height: 0;
  flex: 1;
}

.lp-quotes--card .lp-quote__text {
  font-size: .98rem;
  line-height: 1.5;
  margin: 0 0 .8rem;
}

.lp-quotes--card .lp-quote__source {
  font-size: .82rem;
}

.lp-quotes--card .lp-quotes__dots {
  margin-top: .6rem;
}

/* Icône SVG des cartes catégories (carte Blog) */
.lp-category-card__svg {
  width: 52px;
  height: 52px;
  display: block;
}

@media (max-width: 991px) {
  .lp-top-row {
    flex-direction: column;
  }
  .lp-quotes--card {
    width: 100%;
    flex-basis: auto;
    min-height: 0;
  }
}

/* ===================================================================
   AVIS TRONQUÉS (fiche produit)
   =================================================================== */
.comment-content p.lp-review-clamp {
  position: relative;
  max-height: 4.7em; /* ~3 lignes */
  overflow: hidden;
  margin-bottom: .25rem;
}
.comment-content p.lp-review-clamp::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2em;
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0), #fff);
  pointer-events: none;
}
.comment-content p.lp-review-clamp.is-open {
  max-height: none;
}
.comment-content p.lp-review-clamp.is-open::after {
  display: none;
}
.lp-review-toggle {
  background: none;
  border: 0;
  padding: 0;
  margin: 0 0 .6rem;
  color: var(--lp-gold);
  font-weight: 600;
  font-size: .85rem;
  cursor: pointer;
}
.lp-review-toggle:hover {
  color: var(--lp-gold-dark, #A8841E);
  text-decoration: underline;
}

/* ===================================================================
   FOND BLANC RÉSIDUEL AUTOUR DES IMAGES PRODUIT → CRÈME/TRANSPARENT
   (les conteneurs cartes + cover sont déjà en crème plus haut ;
   theme.css pose encore du blanc sur les img elles-mêmes et la modal)
   =================================================================== */
.product-cover img {
  background: transparent; /* le parent .product-cover est déjà crème */
}
#product-modal .modal-content .modal-body .product-cover-modal,
#product-modal .modal-content .modal-body .product-images img {
  background: var(--lp-cream-light);
}
.quickview .images-container .product-images > li.thumb-container .thumb {
  background: var(--lp-cream-light);
}
/* ---------- Paracha de la semaine (module laparachasemaine) ---------- */
.lp-parasha {
  margin: 2.5rem 0;
}

/* Teaser homepage (réduit) + page dédiée « Paracha » (point 4, 18/07) */
.lp-parasha--teaser .lp-parasha__inner { align-items: flex-start; }
.lp-parasha--teaser .lp-parasha__date { margin-bottom: .9rem; }
.lp-parasha__cta--more { margin-top: .2rem; }
.lp-parasha--page { margin-top: 1.5rem; }
.lp-paracha-page__empty { color: var(--lp-taupe); font-style: italic; }

.lp-parasha__inner {
  display: flex;
  align-items: center;
  gap: 2rem;
  padding: 1.8rem 2.2rem;
  background: linear-gradient(135deg, var(--lp-cream-light), var(--lp-cream-deep));
  border: 1px solid var(--lp-border);
  border-left: 4px solid var(--lp-gold);
  border-radius: 10px;
}

.lp-parasha__main { flex: 1 1 auto; }

.lp-parasha__kicker {
  margin: 0 0 .3rem;
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--lp-gold-dark);
}

.lp-parasha__name {
  margin: 0 0 .35rem;
  font-family: var(--lp-font-serif);
  font-size: 2rem;
  line-height: 1.15;
  color: var(--lp-text);
  display: flex;
  align-items: baseline;
  gap: .9rem;
  flex-wrap: wrap;
}

.lp-parasha__he {
  font-size: 1.4rem;
  color: var(--lp-gold-darkest);
}

.lp-parasha__date {
  margin: 0 0 .6rem;
  font-size: .92rem;
  color: var(--lp-text-muted);
}

.lp-parasha__hdate { white-space: nowrap; }

.lp-parasha__desc {
  margin: 0 0 .8rem;
  max-width: 60ch;
  font-size: .95rem;
  color: var(--lp-text);
}

.lp-parasha__desc p { margin: 0 0 .4rem; }

.lp-parasha__cta {
  display: inline-block;
  font-weight: 600;
  color: var(--lp-gold-dark);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color .2s ease, color .2s ease;
}

.lp-parasha__cta:hover {
  color: var(--lp-gold-darkest);
  border-bottom-color: var(--lp-gold-darkest);
  text-decoration: none;
}

.lp-parasha__media {
  flex: 0 0 auto;
  display: block;
}

.lp-parasha__media img {
  width: 110px;
  height: auto;
  border-radius: 6px;
  box-shadow: 0 6px 18px rgba(46, 36, 24, .18);
  transition: transform .25s ease;
}

.lp-parasha__media:hover img { transform: translateY(-3px); }

/* ── Mini-carrousel de citations de la paracha (corpus arbitré, 12/07) ── */
.lp-parasha__inner--with-product .lp-parasha__main { flex: 0 1 auto; }

.lp-parasha__quotes {
  flex: 1 1 0;
  min-width: 0;
  max-width: 52ch;
  margin-left: auto;
  padding-left: 2rem;
  border-left: 1px solid var(--lp-border);
  align-self: center;
}

.lp-parasha__quote { display: none; margin: 0; }
.lp-parasha__quote.is-active { display: block; animation: lpParashaQuoteFade .6s ease; }

@keyframes lpParashaQuoteFade {
  from { opacity: 0; transform: translateY(4px); }
  to { opacity: 1; transform: none; }
}

.lp-parasha__quote-text {
  margin: 0 0 .5rem;
  font-family: var(--lp-font-serif);
  font-style: italic;
  font-size: 1.15rem;
  line-height: 1.5;
  color: var(--lp-text);
}

.lp-parasha__quote-ref {
  font-size: .72rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--lp-text-muted);
}

@media (max-width: 991px) {
  .lp-parasha__quotes { display: none; }
}

/* ── Bannières partenaires (module laparachabanner, 12/07) ── */
.lp-banner {
  position: relative;
  margin: 1.5rem 0;
  text-align: center;
}
.lp-banner a { display: inline-block; max-width: 100%; }
.lp-banner img {
  max-width: 100%;
  height: auto;
  border-radius: 4px;
  display: block;
}
.lp-banner::before {
  content: 'Publicité';
  display: block;
  font-size: .65rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--lp-text-muted, #8A7960);
  margin-bottom: .3rem;
}

/* « Voir plus » catégorie (point 6, 18/07). Enrichissement progressif :
   masqué par défaut (sans JS → pagination numérotée visible) ; le JS ajoute
   .js-loadmore-active sur #js-product-list, ce qui masque la pagination et
   révèle le bouton. La pagination reste dans le DOM (URLs crawlables SEO). */
.lp-loadmore {
  display: none;
  text-align: center;
  margin: .5rem 0 2.5rem;
}
#js-product-list.js-loadmore-active .pagination { display: none; }
#js-product-list.js-loadmore-active .lp-loadmore { display: block; }
.lp-loadmore__btn {
  min-width: 240px;
  padding: .7rem 2rem;
}
.lp-loadmore__btn.is-loading { opacity: .7; cursor: progress; }

/* Étoiles d'avis — contraste (point 8, 18/07). Les sprites PNG par défaut du
   module productcomments (stars.png / small_stars.png) sont d'un or pâle qui
   ressort mal sur les fonds clairs (cartes produit crème). On remplace le
   background par des étoiles SVG nettes dans l'or du thème (#C9A227) avec un
   liseré plus foncé (#8C6E18) pour la définition — pleines et vides. S'applique
   partout où .grade-stars est utilisé (cartes, fiche produit, quickview). */
.grade-stars .star-content div.star,
.grade-stars .star-content div.star-on,
.grade-stars .star-content div.star-hover {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 .587l3.668 7.431 8.2 1.192-5.934 5.784 1.401 8.169L12 18.896l-7.335 3.867 1.401-8.169L.132 9.21l8.2-1.192z' fill='%23E8DCC0' stroke='%23C9A227' stroke-width='1.3'/%3E%3C/svg%3E") !important;
  background-position: center !important;
  background-size: contain !important;
  background-repeat: no-repeat !important;
}
.grade-stars .star-content div.star-on,
.grade-stars .star-content div.star-hover {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 .587l3.668 7.431 8.2 1.192-5.934 5.784 1.401 8.169L12 18.896l-7.335 3.867 1.401-8.169L.132 9.21l8.2-1.192z' fill='%23C9A227' stroke='%238C6E18' stroke-width='1'/%3E%3C/svg%3E") !important;
  background-position: center !important;
}
.lp-banner--footer { margin: 2rem auto; max-width: 728px; }
.lp-banner--blog { margin: 1.5rem 0; }

/* ── Onglet Vidéo fiche produit (Feature "Vidéo YouTube", 12/07) ── */
.lp-video-embed {
  position: relative;
  width: 100%;
  max-width: 640px;
  margin: 0 auto;
  padding-top: 56.25%; /* ratio 16:9 */
  background: #000;
  border-radius: 4px;
}
.lp-video-embed iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  border-radius: 4px;
}

/* YouTube Shorts (format vertical 9:16) : cadre étroit centré plutôt que le
   16:9 par défaut, sinon la vidéo flotte minuscule au milieu d'un large
   bandeau noir. */
.lp-video-embed--short {
  max-width: 360px;
  /* padding-top en % se calcule sur la largeur du bloc CONTENANT, pas sur le
     max-width propre de cet élément — le classique "hack ratio" casse dès
     qu'on restreint la largeur ainsi (piège vécu 13/07). aspect-ratio évite
     le problème : basé sur la largeur réellement résolue de l'élément. */
  padding-top: 0;
  aspect-ratio: 9 / 16;
}

/* ── Page Vidéos (/blog/videos) ── */
.lp-videos-page { padding: 1.6rem 0 3rem; }

.lp-vid-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.8rem 1.5rem;
  margin-top: 2rem;
}
@media (max-width: 991px) {
  .lp-vid-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 575px) {
  .lp-vid-grid { grid-template-columns: 1fr; }
}

.lp-vid-card { display: flex; flex-direction: column; }

.lp-vid-card__media {
  position: relative;
  display: block;
  width: 100%;
  padding: 0;
  border: 1px solid var(--lp-border);
  border-radius: 6px;
  overflow: hidden;
  background: var(--lp-text);
  cursor: pointer;
  aspect-ratio: 16 / 9;
}
.lp-vid-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .3s ease;
}
.lp-vid-card__media:hover img { transform: scale(1.04); }
.lp-vid-card__media iframe {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}
.lp-vid-card__play {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: rgba(46, 36, 24, .55);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
  transition: background .2s ease, transform .2s ease;
}
.lp-vid-card__media:hover .lp-vid-card__play {
  background: var(--lp-gold);
  transform: translate(-50%, -50%) scale(1.08);
}
.lp-vid-card__title {
  font-family: var(--lp-font-serif);
  font-size: 1rem;
  font-weight: 700;
  color: var(--lp-text);
  margin: .8rem 0 .3rem;
  line-height: 1.35;
}
.lp-vid-card__desc {
  font-size: .84rem;
  color: var(--lp-text-muted);
  line-height: 1.5;
  margin: 0;
}

.lp-vid-grid__banner {
  grid-column: 1 / -1;
  display: flex;
  justify-content: center;
  margin: .4rem 0;
}
.lp-vid-grid__banner--end { margin-top: 2.2rem; }

.lp-vid-empty {
  text-align: center;
  padding: 3rem 1rem;
  color: var(--lp-text-muted);
}

.lp-banner--videos { max-width: 100%; }

/* Page Vidéos — mise en page 2 colonnes (grille + sidebar) */
.lp-videos-layout { margin-top: 1.5rem; }
/* Dans la colonne principale (plus étroite), la grille passe à 2 colonnes. */
@media (min-width: 992px) {
  .lp-videos-layout .lp-vid-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
.lp-videos-sidebar { margin-top: .5rem; }
@media (min-width: 992px) {
  .lp-videos-sidebar { margin-top: 0; padding-left: .5rem; }
}
/* Placeholder article sans image (bloc "derniers articles"). */
.lp-side-posts__thumb-ph {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 104px;
  height: 58px;
  background: var(--lp-cream);
  border: 1px solid var(--lp-border);
  border-radius: 2px;
}
.lp-side-posts__thumb-ph .material-icons { color: var(--lp-border); font-size: 1.6rem; }
.lp-side-posts__all {
  display: inline-block;
  margin-top: 1rem;
  font-size: .82rem;
  font-weight: 600;
  color: var(--lp-gold-dark);
  text-decoration: none;
}
.lp-side-posts__all:hover { text-decoration: underline; }
.lp-side-packs__prices { display: block; margin-bottom: .2rem; }

/* ── Horaires de Chabbat (Hebcal, 12/07) — bandeau compact, discret ── */
.lp-zmanim { margin: 0 0 2.5rem; }

.lp-zmanim__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: .5rem 1.8rem;
  padding: .85rem 1.5rem;
  background: var(--lp-cream-light, #F7F0E0);
  border: 1px solid var(--lp-border, #E2D5BA);
  border-radius: 6px;
  font-size: .88rem;
}

.lp-zmanim__label {
  font-weight: 700;
  color: var(--lp-gold-dark, #A8841E);
  letter-spacing: .02em;
}

.lp-zmanim__item {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  color: var(--lp-text, #2E2418);
}
.lp-zmanim__icon { font-size: .95em; }

.lp-zmanim__credit {
  margin-left: auto;
  font-size: .72rem;
  color: var(--lp-text-muted, #8A7960) !important;
  text-decoration: underline;
}

@media (max-width: 575px) {
  .lp-zmanim__inner { justify-content: flex-start; }
  .lp-zmanim__credit { margin-left: 0; width: 100%; }
}

/* ── Bouton « Se connecter avec Google » (module laparachagoogle, 12/07) ── */
.lp-google-login { margin-top: 1.3rem; text-align: center; }

.lp-google-login__sep {
  display: flex;
  align-items: center;
  gap: .8rem;
  margin: 0 0 1rem;
  color: var(--lp-text-muted, #8A7960);
  font-size: .78rem;
  text-transform: uppercase;
  letter-spacing: .08em;
}
.lp-google-login__sep::before, .lp-google-login__sep::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--lp-border, #E2D5BA);
}

.lp-google-login__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .65rem;
  width: 100%;
  max-width: 320px;
  padding: .7rem 1.3rem;
  border: 1px solid var(--lp-border, #E2D5BA);
  border-radius: 3px;
  background: #fff;
  color: #2E2418 !important;
  font-size: .88rem;
  font-weight: 600;
  text-decoration: none;
  transition: border-color .2s ease, box-shadow .2s ease;
}
.lp-google-login__btn:hover {
  border-color: #C9A227;
  box-shadow: 0 2px 8px rgba(201, 162, 39, .18);
  text-decoration: none;
}

@media (max-width: 767px) {
  .lp-parasha__inner {
    flex-direction: column-reverse;
    align-items: flex-start;
    padding: 1.4rem 1.2rem;
    gap: 1.1rem;
  }
  .lp-parasha__name { font-size: 1.55rem; }
}

.lp-parasha__fetes-link {
  text-align: center;
  margin-top: 1.5rem;
}
.lp-parasha__fetes-link a {
  color: #8A7960;
  font-size: 0.95rem;
}
.lp-parasha__fetes-link a:hover {
  color: #C9A227;
}

/* Paracha de la semaine — ligne compacte dans le header (20/07), remplace
   l'ancien encart encadré du corps de page (homepage uniquement, voir
   _partials/header.tpl). Aucun cadre/fond/bordure : juste une ligne discrète
   au-dessus du menu. */
.lp-parasha-mini {
  padding: 4px 15px 0;
  font-size: 0.8rem;
  color: #8A7960;
  white-space: normal;
}
.lp-parasha-mini__label {
  font-weight: 600;
}
.lp-parasha-mini__name {
  color: #2E2418;
  font-weight: 600;
}
.lp-parasha-mini__he {
  margin-left: 0.3rem;
  font-weight: 400;
}
.lp-parasha-mini__link {
  margin-left: 0.5rem;
  color: #C9A227;
  white-space: nowrap;
}
.lp-parasha-mini__link:hover {
  color: #A8841E;
}
@media (max-width: 767px) {
  .lp-parasha-mini {
    padding: 4px 15px;
    font-size: 0.72rem;
  }
  .lp-parasha-mini__label { display: none; }
}

/* Widget horaires de Chabbat, header (23/07, aéré le 24/07 — première passe
   trop dense) — réutilise LpHebcal, déjà calculé pour l'ex-bandeau .lp-zmanim
   de la homepage (retiré de index.tpl, doublon avec ce widget). */
.lp-zmanim-mini {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem 1rem;
  padding: 8px 15px 10px;
  margin-top: 2px;
  font-size: 0.82rem;
  color: #8A7960;
}
.lp-zmanim-mini__label {
  font-weight: 700;
  color: #A8841E;
  letter-spacing: .02em;
}
.lp-zmanim-mini__item {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  color: #2E2418;
}
.lp-zmanim-mini__icon {
  font-size: .95em;
}
.lp-zmanim-mini__credit {
  color: #C9A227;
  white-space: nowrap;
  font-size: 0.75rem;
}
.lp-zmanim-mini__credit:hover {
  color: #A8841E;
}
@media (max-width: 767px) {
  .lp-zmanim-mini {
    padding: 6px 15px 10px;
    font-size: 0.74rem;
    gap: 0.3rem 0.75rem;
  }
}

/* Calendrier des fêtes juives — page dédiée /module/laparachasemaine/fetes (20/07). */
.lp-fetes-list {
  list-style: none;
  margin: 2rem auto 0;
  padding: 0;
  max-width: 720px;
}
.lp-fetes-list__item {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.5rem 0.75rem;
  padding: 0.85rem 1rem;
  border-bottom: 1px solid #E2D5BA;
}
.lp-fetes-list__item--past {
  opacity: 0.55;
}
.lp-fetes-list__item--current {
  background: #F4ECDC;
  border-radius: 6px;
  border-bottom-color: transparent;
}
.lp-fetes-list__date {
  flex: 0 0 auto;
  min-width: 11rem;
  color: #8A7960;
  font-size: 0.95rem;
}
.lp-fetes-list__name {
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: 1.2rem;
  color: #2E2418;
}
.lp-fetes-list__he {
  margin-left: 0.5rem;
  color: #8A7960;
  font-size: 1rem;
}
.lp-fetes-list__hyear {
  flex: 1 1 auto;
  text-align: right;
  color: #8A7960;
  font-size: 0.85rem;
}
.lp-fetes-list__badge {
  flex: 0 0 auto;
  background: #C9A227;
  color: #fff;
  font-size: 0.75rem;
  padding: 0.15rem 0.6rem;
  border-radius: 999px;
}
.lp-fetes-page__empty {
  text-align: center;
  color: #8A7960;
  margin: 2rem 0;
}
@media (max-width: 767px) {
  .lp-fetes-list__hyear { text-align: left; flex-basis: 100%; }
}

/* ============================================================
   FICHES PRODUIT LA PARACHA - refonte du 10/08/2026
   Accroche + benefices sous le prix (rendus via description_short,
   donc AUCUNE modification de product.tpl : la structure existante
   - JSON-LD, onglets, systeme d'avis - n'est pas touchee).
   Contrainte tenue : le bouton d'ajout au panier doit rester visible
   sans defiler sur un ecran de 375 px. C'est pour cela que le bloc
   benefices est compact et que ses puces sont serrees.
   ============================================================ */

.lp-hook {
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: 1.18rem;
  line-height: 1.45;
  color: var(--lp-text, #2E2418);
  margin: 0 0 .75rem;
}

.lp-benefits {
  list-style: none;
  margin: 0 0 .25rem;
  padding: 0;
}
.lp-benefits li {
  position: relative;
  padding-left: 1.5rem;
  margin-bottom: .4rem;
  font-size: .92rem;
  line-height: 1.38;
  color: var(--lp-text, #2E2418);
}
.lp-benefits li::before {
  content: "";
  position: absolute;
  left: .3rem;
  top: .55em;
  width: .42rem;
  height: .42rem;
  border-radius: 50%;
  background: var(--lp-gold, #C9A227);
}
.lp-benefits strong { font-weight: 600; }

/* Sur mobile, on resserre encore : chaque pixel gagne ici est un pixel
   de plus pour que le bouton panier reste au-dessus de la ligne de flottaison. */
@media (max-width: 575px) {
  .lp-hook { font-size: 1.08rem; margin-bottom: .55rem; }
  .lp-benefits li { font-size: .86rem; line-height: 1.32; margin-bottom: .3rem; }
}

/* --- Contenu de l'onglet Description --- */

.lp-desc-title {
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: 1.4rem;
  color: var(--lp-text, #2E2418);
  margin: 1.8rem 0 .9rem;
  padding-bottom: .4rem;
  border-bottom: 1px solid var(--lp-border, #E2D5BA);
}

.lp-extract {
  background: var(--lp-cream-light, #F7F0E0);
  border-left: 3px solid var(--lp-gold, #C9A227);
  border-radius: 0 6px 6px 0;
  margin: 0 0 1.1rem;
  padding: 1rem 1.15rem .75rem;
}
.lp-extract p { margin: 0 0 .5rem; line-height: 1.6; }
.lp-extract footer {
  font-family: "Cormorant Garamond", Georgia, serif;
  font-style: italic;
  font-size: .95rem;
  color: var(--lp-gold-dark, #A8841E);
  text-align: right;
}

.lp-audience {
  list-style: none;
  margin: 0 0 1.2rem;
  padding: 0;
}
.lp-audience li {
  position: relative;
  padding-left: 1.6rem;
  margin-bottom: .6rem;
  line-height: 1.55;
}
.lp-audience li::before {
  content: "\2713";
  position: absolute;
  left: 0;
  top: 0;
  color: var(--lp-gold, #C9A227);
  font-weight: 700;
}

/* Le theme repasse ces deux listes en puces natives, et avec plus de poids que
   nos classes : ".product-information .product-description ul" (deux classes +
   un element) bat ".lp-benefits" / ".lp-audience" (une seule classe). Constate
   a la mesure du 10/08 : chaque ligne portait DEUX marqueurs - le notre en
   ::before, plus le disc natif rendu "inside" donc colle au debut du texte -,
   et les li etaient forces en taupe .9375rem alors qu'ils sont ecrits ici en
   couleur de corps. Meme lecon que le header : on reprend le selecteur du
   theme au lieu d'empiler des !important, la specificite primant sur l'ordre
   de chargement.
   ⚠️ L'accroche est rendue DEUX fois, sous deux ID differents, et il faut les
   traiter tous les deux : product.tpl rend "id=product-description-short-{id}"
   (suffixe par l'id produit, donc la regle "#product-description-short ul" du
   theme n'y matche pas et c'est la chaine de classes qui gagne), tandis que
   _partials/product-images-modal.tpl rend "id=product-description-short" SANS
   suffixe dans sa figcaption - la, c'est l'ID du theme qui gagne. Piege paye
   en deux temps : d'abord un override calque sur l'ID seul, parti dans le vide
   sans la moindre erreur ; puis un override par classes seules, qui laissait
   la double puce dans le visualiseur d'images plein ecran, invisible tant
   qu'on ne clique pas sur la photo. Compter les listes de la page, plutot que
   de regarder la premiere, est ce qui l'a montre. */
.product-information .product-description ul.lp-benefits,
.product-information .product-description ul.lp-audience,
#product-description-short ul.lp-benefits {
  list-style: none;
  padding-left: 0;
}
.product-information .product-description ul.lp-benefits li,
.product-information .product-description ul.lp-audience li,
#product-description-short ul.lp-benefits li {
  color: var(--lp-text, #2E2418);
}
.product-information .product-description ul.lp-benefits li,
#product-description-short ul.lp-benefits li { font-size: .92rem; }
@media (max-width: 575px) {
  .product-information .product-description ul.lp-benefits li,
  #product-description-short ul.lp-benefits li { font-size: .86rem; }
}

/* --- Barre d'achat collante (mobile uniquement) — voir le commentaire
   detaille dans laparacha-custom.js pour la mesure qui l'a rendue necessaire. --- */
.lp-buybar {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 1030;
  display: flex;
  align-items: center;
  gap: .75rem;
  padding: .6rem .85rem calc(.6rem + env(safe-area-inset-bottom, 0px));
  background: rgba(255, 255, 255, .97);
  border-top: 1px solid var(--lp-border, #E2D5BA);
  box-shadow: 0 -2px 12px rgba(46, 36, 24, .12);
  transform: translateY(105%);
  transition: transform .22s ease;
}
.lp-buybar.is-shown { transform: translateY(0); }

.lp-buybar__price {
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--lp-text, #2E2418);
  white-space: nowrap;
}
/* Prix masque (espace pro) : pas d'espace vide qui desequilibre la barre. */
.lp-buybar__price:empty { display: none; }

.lp-buybar__btn {
  flex: 1 1 auto;
  min-height: 44px;              /* cible tactile confortable */
  border: 0;
  border-radius: 4px;
  background: var(--lp-gold, #C9A227);
  color: #fff;
  font-size: .95rem;
  font-weight: 600;
  letter-spacing: .02em;
  cursor: pointer;
}
.lp-buybar__btn:hover,
.lp-buybar__btn:focus { background: var(--lp-gold-dark, #A8841E); }

@media (min-width: 768px) { .lp-buybar { display: none; } }

/* Le pied de page ne doit pas finir cache sous la barre. */
@media (max-width: 767px) {
  .page-product #footer { padding-bottom: 4.5rem; }
}


/* Conflit constate a la mesure du 10/08 : le bouton WhatsApp flottant
   (position fixed, bottom 20px, z-index 1100) recouvrait la barre d'achat et
   interceptait le clic - elementFromPoint au centre du bouton "Ajouter au
   panier" renvoyait a.lp-whatsapp-btn. Un client aurait ouvert WhatsApp en
   croyant acheter. On remonte donc WhatsApp au-dessus de la barre tant que
   celle-ci est affichee, au lieu d'empiler des z-index l'un sur l'autre :
   deux elements cliquables ne doivent jamais se superposer, meme bien ordonnes. */
@media (max-width: 767px) {
  .lp-whatsapp-btn { transition: bottom .22s ease, box-shadow .2s ease; }
  body.lp-buybar-on .lp-whatsapp-btn {
    bottom: calc(84px + env(safe-area-inset-bottom, 0px));
  }
}


/* Cloture de la fiche produit. Elle remplace l'ancienne fin generique
   ("Ideal pour l'etude individuelle... Approuve par de nombreux rabbins
   francophones"), retiree le 10/08 : reliquat de l'ancienne fiche, et surtout
   affirmation invérifiable - aucune haskama ne figure dans le fichier source
   du livre, et les avis de la fiche sont les clients de test du catalogue.
   Une caution vague sans preuve coute plus qu'elle ne rapporte. */
.lp-closing {
  margin: 1.6rem 0 .5rem;
  padding-top: 1.2rem;
  border-top: 1px solid var(--lp-border, #E2D5BA);
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: 1.16rem;
  line-height: 1.62;
  color: var(--lp-text, #2E2418);
}
@media (max-width: 575px) {
  .lp-closing { font-size: 1.08rem; line-height: 1.55; }
}


/* ============================================ Adresse du libraire (14/08/2026)
   Le formulaire d'adresse est rendu DANS la page « Informations » d'un compte
   pro : la page compte du libraire n'a plus de bloc adresse separe.
   Ces regles ne peuvent atteindre que ce bloc — la classe .lp-pro-address
   n'existe sur aucune page de particulier. */
.lp-pro-address {
  margin-top: 2.2rem;
  padding-top: 1.6rem;
  border-top: 1px solid var(--lp-border, #E2D5BA);
}
.lp-pro-address__title {
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: 1.45rem;
  color: var(--lp-text, #2E2418);
  margin-bottom: .35rem;
}
.lp-pro-address__intro {
  color: var(--lp-taupe, #8A7960);
  margin-bottom: 1.1rem;
}
/* Intertitres du formulaire d'adresse du libraire (23/08/2026). Rendus par
   address-form.tpl sous le seul drapeau $lp_pro_identity_form : cette classe
   n'apparait sur aucun ecran de particulier ni dans le tunnel de commande. */
.lp-pro-address__group {
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: 1.18rem;
  color: var(--lp-text, #2E2418);
  margin: 1.6rem 0 .7rem;
  padding-bottom: .35rem;
  border-bottom: 1px solid var(--lp-border, #E2D5BA);
}
.lp-pro-address__group:first-child { margin-top: 0; }

/* ===================================== Retour a la commande pro (23/08/2026)
   Rendu par product.tpl sous le seul drapeau $lp_pro_is_pro : ces regles ne
   peuvent atteindre aucune fiche vue par un particulier. */
.lp-pro-retour {
  margin: 0 0 1rem;
}
.lp-pro-retour--bas {
  margin: 2rem 0 .5rem;
  padding-top: 1.2rem;
  border-top: 1px solid var(--lp-border, #E2D5BA);
}
.lp-pro-retour__lien {
  display: inline-block;
  padding: .5rem .95rem;
  border: 1px solid var(--lp-border, #E2D5BA);
  border-radius: 4px;
  background: var(--lp-cream, #F7F0E0);
  color: var(--lp-text, #2E2418);
  font-size: .95rem;
  text-decoration: none;
}
.lp-pro-retour__lien::before {
  content: "\2190";   /* fleche gauche : le sens du geste avant meme la lecture */
  margin-right: .45rem;
  color: var(--lp-gold, #C9A227);
}
.lp-pro-retour__lien:hover,
.lp-pro-retour__lien:focus {
  border-color: var(--lp-gold, #C9A227);
  color: var(--lp-gold-dark, #A8841E);
  text-decoration: none;
}


/* ================================================================
   RELEVÉS PRÉPROD DU 04/10/2026 — ACCUEIL PLUS COMPACT
   ================================================================ */

/* « Bienvenue » + « Une pensée » : moins de vide. Les marges d'origine
   (3rem de padding, 2.6rem sous le filet, carte « pensée » à 340 px de
   hauteur minimale) laissaient ~425 px de haut pour deux paragraphes. */
.lp-top-row {
  gap: 1.2rem;
  margin: 1.6rem 0 2.2rem;
}
.lp-top-row .lp-welcome--intro {
  padding: 1.5rem 1.8rem;
}
.lp-top-row .lp-welcome__inner {
  max-width: 720px;
}
.lp-top-row .lp-section-title {
  font-size: 1.75rem;
}
.lp-top-row .lp-section-rule {
  margin-bottom: 1rem;
}
.lp-top-row .lp-welcome__text {
  font-size: 1rem;
  line-height: 1.6;
  margin-bottom: .55rem;
}
.lp-top-row .lp-welcome__sub {
  margin-top: .3rem;
}
.lp-quotes--card {
  min-height: 0;
  padding: 1rem 1.3rem .9rem;
}
.lp-quotes--card .lp-quotes__mark {
  font-size: 2.4rem;
}
.lp-quotes__card-title {
  margin-bottom: .6rem;
}
.lp-quotes--card .lp-quote__link {
  margin-top: .3rem;
}

/* La fin des phrases de « Une pensée » disparaissait sous les deux boutons
   flottants (WhatsApp « Contactez-nous », 180 px de large, et l'assistant),
   qui passent sur le bord droit du contenu pendant le défilement — la carte
   elle-même tient dans l'écran à toutes les largeurs mesurées (1024 à 1920,
   téléphone). Le bouton WhatsApp devient une pastille ronde (46 px), son
   libellé ne réapparaît qu'au survol ; l'attribut aria-label le garde lisible
   par les lecteurs d'écran. À 1280 px et au-delà, plus aucun bouton ne
   recouvre la colonne de contenu. */
.lp-whatsapp-btn {
  width: 46px;
  padding: 0;
  justify-content: center;
}
.lp-whatsapp-btn span {
  display: none;
}
@media (hover: hover) {
  .lp-whatsapp-btn:hover {
    width: auto;
    padding: 0 18px 0 14px;
  }
  .lp-whatsapp-btn:hover span {
    display: inline;
  }
}

/* « Idées cadeaux » : conçu pour être l'un de DEUX bandeaux côte à côte
   (flex: 1 1 320px, texte limité à 320 px, calé en bas à gauche). Le
   second (« Des livres qui nourrissent l'âme ») a été retiré le 01/09 :
   celui-ci s'étirait sur toute la largeur avec son texte collé à gauche
   et tout le côté droit vide. Aucune image n'était prévue (aucun
   background-image dans l'historique). Désormais : un bandeau horizontal
   compact, texte à gauche, bouton à droite. */
.lp-promo-banner {
  min-height: 0;
  padding: 1.3rem 2rem;
  align-items: center;
}
.lp-promo-banner__content {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  width: 100%;
}
.lp-promo-banner__title {
  margin: 0;
  white-space: nowrap;
}
.lp-promo-banner__text {
  flex: 1 1 auto;
  max-width: 640px;
  margin: 0;
}
.lp-promo-banner__cta {
  flex-shrink: 0;
  padding: .6rem 1.2rem;
  border: 2px solid var(--lp-text);
  border-radius: 4px;
  white-space: nowrap;
}
.lp-promo-banners {
  margin-bottom: 2.4rem;
}
@media (max-width: 767px) {
  /* En colonne, flex: 1 1 320px fixait la HAUTEUR à 320 px. */
  .lp-promo-banner {
    flex-basis: auto;
    padding: 1.2rem 1.2rem;
  }
  .lp-top-row .lp-welcome--intro {
    padding: 1.2rem 1rem;
  }
  .lp-top-row .lp-section-title {
    font-size: 1.5rem;
  }
  .lp-top-row .lp-welcome__text {
    font-size: .95rem;
    line-height: 1.55;
  }
  .lp-promo-banner__content {
    flex-direction: column;
    align-items: flex-start;
    gap: .8rem;
  }
}
/* Onglet « Index à télécharger » ajouté au menu (04/10) : sans resserrage, le
   menu passait de 3 à 4 lignes à toutes les largeurs ≥ 1280 (il manquait ~5 px
   sur la 3e ligne). Espacement horizontal des onglets ramené de 10 à 7 px,
   bureau seulement (#_desktop_top_menu) — le menu mobile n'est pas touché.
   Contrôle rejouable : seed/mesure-menu-preprod.js. */
#header #_desktop_top_menu #top-menu > li > a {
  padding-left: 7px;
  padding-right: 7px;
}

/* Mot de passe client (18/10/2026) : la politique est au minimum (score 0, 6 caractères).
   La barre de force et la ligne « Le score minimum doit être : Très faible » n'ont plus
   de sens et font mauvaise impression : on ne garde que la ligne de longueur et sa coche.
   Vaut pour la création de compte, le tunnel de commande et l'inscription pro. */
.password-strength-feedback .progress-container,
.password-strength-feedback .password-strength-text,
.password-strength-feedback .password-requirements-score {
  display: none !important;
}