/**
 * lafrancaisedupoele - Custom styles (child theme of Cartzilla)
 *
 * IMPORTANT: PrestaShop's asset resolution does NOT merge a child theme's
 * `assets/css/custom.css` with the parent's - it resolves the child theme
 * directory FIRST and, if the file exists there (even empty), the parent's
 * `themes/cartzilla/assets/css/custom.css` is never loaded at all. This
 * file must therefore always start as a full copy of the parent's
 * `custom.css`, with project-specific additions appended - never left
 * empty (an empty file here silently disables ALL of the rules below,
 * site-wide, with no visible error).
 *
 * Mirrors themes/cartzilla/assets/css/custom.css (2026-07-12).
 *
 * @author Maxime Potier <contact@maximepotier.fr>
 */

@import url("lfdp-tokens.css");
@import url("lfdp-components.css");

/* v 1.5.0 */
/* aliges les elements du header */
#header .navbar.navbar-expand-lg.navbar-light{
  padding: 5px  !important;
}
#trigger_search_mobile{
  border: 0;
  background: none;
}
/* fix cartzilla */
.row {
  margin-left: 0;
  margin-right: 0;
}

.row .col {
  padding-left: 0;
  padding-right: 0;
}


html, body {
  overflow-x: hidden;
  position: relative;
  width: 100%;
}


.account-sidebar a{
  color: var(--body-color);
}
.account-sidebar a:hover{
  color: var(--primary);
}

#my-account .card-body a,
#my-account .card-body i{
  color: var(--body-color) !important;
}
#my-account .card-body:hover a,
#my-account .card-body:hover a p,
#my-account .card-body:hover .nav-link-style,
#my-account .card-body:hover i{
  color: var(--primary) !important;
}
.scroll_text p{
    margin-bottom: 0;
}
@media (max-width: 768px) {
  #_mobile_search{
    width: 100% !important;
  }
}

#product .product-tab-details{
  display: none;
}
#product .product-tab-details.show{
  display: block;
}

.comments-nb,
.comments-note {
  display: none !important;
}



.product-comment-list-item .comment-content .comment-buttons a{
  color: var(--primary) !important;
}
.product-comment-list-item .comment-content .comment-buttons a:hover{
  color: var(--primary) !important;
}
#product-comments-list-header,
#product-comments-list,
.comment-content {
  margin: 0 auto;
  text-align: center;
}

.burger-menu{
  font-size: 20px;
  color: #4b566b;
}

/* MP fix (2026-07-24) - long category description text overflowing off
   the right edge on mobile (catalog/listing/category.tpl,
   #category-additional-description). ".mpcd-desc-wrap" wraps
   #category-description and sits directly inside Bootstrap's ".row"
   (a flex container) without being a ".col-*" itself, so it defaults to
   "min-width: auto" (flexbox spec) and can grow past the viewport instead
   of wrapping its text at the visible edge - "overflow-x: hidden" on
   html/body above only hides the resulting horizontal scroll, it doesn't
   stop the paragraph text itself from laying out (and therefore wrapping)
   at that oversized width. Mirrored in _dev/css/_custom.scss for the next
   `npm run build`; duplicated here so the fix is live without a rebuild. */
.mpcd-desc-wrap {
  min-width: 0;
  max-width: 100%;
}

#category-description {
  overflow-wrap: break-word;
  word-break: break-word;
}

/* MP fix (2026-07-24, mobile UX) - "swipe to scroll" hint above each
   WYSIWYG table inside #category-description (catalog/listing/category.tpl
   injects this element via JS, see the matching inline script there).
   Without it an unaware visitor has no clue the table can be scrolled
   horizontally on mobile. Hidden by default/on desktop; only shown below
   the "sm" breakpoint (768px, matches Bootstrap's own table overflow rule)
   and only until the JS dismisses it (table actually scrolled, or found to
   not overflow at all). Mirrored in _dev/css/_custom.scss for the next
   `npm run build`. */
#category-description .mpcd-swipe-hint {
  display: none;
}

@media (max-width: 767.98px) {
  #category-description .mpcd-swipe-hint {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    margin-bottom: 0.5rem;
    font-size: 0.8125rem;
    color: #7d879c;
    transition: opacity 0.25s ease, margin 0.25s ease;
  }

  #category-description .mpcd-swipe-hint.mpcd-swipe-hint--hidden {
    opacity: 0;
    height: 0;
    margin: 0;
    overflow: hidden;
    pointer-events: none;
  }

  #category-description .mpcd-swipe-hint-icon {
    display: inline-block;
    font-weight: 600;
    animation: mpcd-swipe-hint-move 1.3s ease-in-out infinite;
  }
}

@keyframes mpcd-swipe-hint-move {
  0%,
  100% {
    transform: translateX(0);
  }

  50% {
    transform: translateX(4px);
  }
}

/* eicaptcha (reCAPTCHA v2) - contact form widget: left-align in its own row
   above the submit button instead of the module's default float:right
   (which was designed for Classic theme layout, not Cartzilla). Using
   !important here to reliably win over eicaptcha.css regardless of load
   order changes (CCC bundling, cache states, etc). */
.contact-form form .form-fields {
  display: block !important;
  width: 100% !important;
  text-align: left !important;
  margin-bottom: 1.25rem;
}

.contact-form form .form-fields #captcha-box {
  display: block !important;
  text-align: left !important;
}

.contact-form form .form-fields #captcha-box > div {
  float: none !important;
  margin: 0 !important;
}

/* MP fix (2026-07-27) - checkout page: the layout's non-blog branch wraps the
   content in a ".container position-static" with no bottom padding, so the
   checkout accordion ends flush against the footer. Scoped to the checkout
   page only. Duplicated from _dev/css/_custom.scss (shared build source) so
   it applies without depending on the SCSS build pipeline. */
body#checkout #wrapper {
  padding-bottom: 3rem;
}

@media (min-width: 768px) {
  body#checkout #wrapper {
    padding-bottom: 4.5rem;
  }
}

/* MP fix (2026-07-27) - side cart drawer "remove item" button invisible on
   mobile: the base theme's `.widget-cart-item .close` (ghost "x") only
   reveals on `:hover` (opacity:0 by default), and even then rendered as an
   oversized, plain icon with no background. Same small rounded red badge
   everywhere (desktop + mobile/touch) for a consistent, always-visible
   design (icon swapped to czi-trash in ps_shoppingcart-product-line.tpl).
   Duplicated from _dev/css/_custom.scss (shared build source) so it applies
   without depending on the SCSS build pipeline.

   MP feat (2026-08-05) - LFDP design system: colors migrated to
   `--lfdp-color-error`/`--lfdp-color-error-bg` tokens (see lfdp-tokens.css)
   instead of the hardcoded rgba()/#E31E24 this rule used before. This is
   the actual rule that renders the icon (its 3 chained classes outrank
   `.lfdp-cart-line .lfdp-delete` in lfdp-components.css, so that one alone
   never had any visual effect) - kept here rather than moved, so the
   already-fixed 26px size (client feedback 2026-07-27: the previous 28px+
   plain icon was "too big" on desktop) is never regressed by a future
   lfdp-components.css change. */
.widget-cart-item .close.mp-cart-remove {
  visibility: visible;
  opacity: 1;
  top: 0.4rem;
  left: auto;
  right: 0;
  transform: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background-color: var(--lfdp-color-error-bg);
  color: var(--lfdp-color-error);
  font-size: 0.75rem;
  padding: 0;
  line-height: 1;
}

.widget-cart-item .close.mp-cart-remove:hover,
.widget-cart-item .close.mp-cart-remove:focus {
  background-color: var(--lfdp-color-error);
  color: #fff;
  opacity: 1;
}

.widget-cart-item:hover .media {
  transform: none;
}

.widget-cart-item .media-body {
  padding-right: 2rem;
}

/* MP fix (2026-07-27): payment method logos on /commande (checkout payment step) - Cartzilla template never rendered $option.logo */
.mp-payment-option-logo {
  display: block;
  max-height: 28px;
  max-width: 180px;
  width: auto;
  margin-top: 6px;
}

/* MP fix (2026-07-27): carrier logo on /commande (delivery step) - Cartzilla template never rendered it */
.mp-carrier-logo {
  max-height: 32px;
  max-width: 48px;
  width: auto;
  object-fit: contain;
  flex-shrink: 0;
}

/* MP feat (2026-07-28) - style WYSIWYG <table> and inherited tags inside blog
   article body (.blog_description, ybc_blog module). These tables come from
   the article's rich text content and had no styling at all (plain browser
   default). "display: block; overflow-x: auto" on the table itself (rather
   than an extra wrapper div, which would need a template change) keeps it
   from overflowing the viewport on mobile. */
.blog_description table {
  display: block;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  width: 100%;
  margin: 1.5rem 0;
  border-collapse: collapse;
  font-size: 0.9375rem;
}

.blog_description table thead {
  display: table-header-group;
}

.blog_description table tbody {
  display: table-row-group;
}

.blog_description table tr {
  display: table-row;
}

.blog_description table th,
.blog_description table td {
  display: table-cell;
  padding: 0.625rem 1rem;
  border: 1px solid #e5e9f2;
  text-align: left;
  vertical-align: middle;
  white-space: nowrap;
}

.blog_description table th {
  background-color: #E31E24;
  color: #fff;
  font-weight: 600;
  white-space: normal;
}

.blog_description table tbody tr:nth-child(even) {
  background-color: #f8f9fb;
}

.blog_description table tbody tr:hover {
  background-color: #fdeceb;
}

/* MP feat (2026-07-29) - mobile sort selector on category listing pages
   (reproduces a feature already present on production/old theme). The
   parent Cartzilla `sort-orders.tpl` had it hidden below `lg` on category
   pages (`d-none d-lg-flex`) - the child theme override removes that
   restriction (see catalog/_partials/sort-orders.tpl), this only handles
   the layout: the select needs to flex-grow to fill the space next to the
   "Filtres" button instead of keeping its native (often too narrow) width. */
.mp-sort-orders {
  flex: 1 1 auto;
  min-width: 0;
  margin-right: 0.75rem;
}

/* MP fix (2026-07-29) - the 100% width above was leaking onto desktop too
   (the id selector's specificity beats Bootstrap's `.form-inline
   .custom-select{width:auto}`), stretching the select edge-to-edge instead
   of hugging its option text. Scoped to the same mobile/tablet breakpoint
   where it's actually needed (next to the "Filtres" button) - desktop falls
   back to Bootstrap's native `width: auto`, sized to the option content. */
@media (max-width: 991.98px) {
  .mp-sort-orders #select-sort-order {
    width: 100%;
  }

  #js-product-list-top .btn.btn-light.d-lg-none {
    flex: 0 0 auto;
  }
}

/* On desktop, also stop the wrapper's flex:1 from artificially widening the
   select via its own layout box (flex-basis: auto on the select would still
   let it be stretched wider than its content because the wrapper itself
   grows) - `flex: 0 0 auto` at md+ keeps the wrapper (and its "of X
   products" sibling) exactly as wide as their content, so the select only
   takes the room its options actually need. */
@media (min-width: 992px) {
  .mp-sort-orders {
    flex: 0 0 auto;
  }
}

/* MP fix (2026-07-29) - "Gestion des avis" account page (gsnippetsreviews
   module, #spr). The native template/CSS still use Bootstrap 3 utility
   classes that don't exist in Cartzilla's Bootstrap 4 (`hidden-sm-down`,
   `hidden-md-up`, `col-xs-12`) - never overridden by the module itself for
   this theme. Minimal fix, scoped to `#spr` only, no template/JS change:
   - `hidden-sm-down`/`hidden-md-up` recreated so only ONE of the two
     responsive variants (desktop table vs. mobile card list) shows at a
     time instead of both stacking on top of each other.
   - `col-xs-12` recreated as a simple full-width block (BS3 grid class,
     has no BS4 equivalent selector).
   - Light card wrapper + pagination links styled to match the rest of the
     account section instead of looking like unstyled plain text/links. */
#spr {
  background: #fff;
  border: 1px solid #e5e9f2;
  border-radius: 0.375rem;
  padding: 1.5rem;
}

#spr .col-xs-12 {
  display: block;
  width: 100%;
}

@media (max-width: 767.98px) {
  #spr .hidden-sm-down {
    display: none !important;
  }
}

@media (min-width: 768px) {
  #spr .hidden-md-up {
    display: none !important;
  }
}

#spr .nav-tabs {
  margin-bottom: 1.5rem;
}

#spr table.table {
  margin-bottom: 1.5rem;
}

#spr nav.pagination .page-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.375rem;
  padding: 0;
  margin: 1.5rem 0 0;
  list-style: none;
}

#spr nav.pagination .page-list li a {
  display: inline-block;
  padding: 0.375rem 0.75rem;
  border: 1px solid #e5e9f2;
  border-radius: 0.25rem;
  color: #373f50;
}

#spr nav.pagination .page-list li a.disabled {
  opacity: 0.4;
  pointer-events: none;
}

/* Fix (2026-07-29): on the mobile product page, touching the main gallery
   image blocked vertical page scroll entirely (finger outside the image
   scrolled fine). Cause: Drift (drift-zoom) attaches its own touchstart/
   touchmove listeners on .cz-image-zoom for touch-to-pan zoom, and calls
   preventDefault() on vertical drags. touch-action: pan-y tells the browser
   to treat single-finger vertical drags as a native, non-cancelable scroll
   gesture on this element - so preventDefault() becomes a no-op for that
   axis and the page always scrolls normally, while Drift's zoom still
   works for horizontal-only or stationary touch/hover interactions. */
@media (max-width: 767.98px) {
  .cz-preview,
  .cz-preview-item,
  .cz-image-zoom {
    touch-action: pan-y;
  }
}

#spr nav.pagination .page-list li a.current,
#spr nav.pagination .page-list li a:hover {
  background-color: #E31E24;
  border-color: #E31E24;
  color: #fff;
}

/* Fix (2026-07-29): mobile burger menu (zonemegamenu's #mobile-amegamenu) -
   every subcategory title showed uppercase + red, regardless of selection.
   Cause: `#mobile-amegamenu .category-title a` has no color rule (unlike
   the desktop `#amegamenu .category-title a { color: inherit; }`), so it
   fell back to the theme's generic link color (red). Fix: inherit the
   dark title color like desktop does, and drop the forced uppercase so
   category names display as written (already sentence case in the back
   office) instead of ALL CAPS. */
#mobile-amegamenu .category-title,
#mobile-amegamenu .category-title a {
  text-transform: none;
}

#mobile-amegamenu .category-title a {
  color: inherit;
}

/* ==========================================================================
   MP - Side cart drawer (moved here from mp-cart-drawer.css, 2026-07-30)
   Folded into custom.css so it ships inside the combined theme bundle instead
   of costing its own render-blocking request in <head>.
   ========================================================================== */


.mp-cart-drawer-backdrop {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1200;
  background-color: rgba(0, 0, 0, 0.5);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.25s ease, visibility 0.25s ease;
}

.mp-cart-drawer {
  position: fixed;
  top: 0;
  right: 0;
  z-index: 1201;
  width: 100%;
  max-width: 380px;
  height: 100%;
  display: flex;
  flex-direction: column;
  background-color: #fff;
  box-shadow: -4px 0 24px rgba(0, 0, 0, 0.15);
  transform: translateX(100%);
  transition: transform 0.3s ease;
}

.mp-cart-drawer-backdrop.is-open,
.mp-cart-drawer.is-open {
  opacity: 1;
  visibility: visible;
}

.mp-cart-drawer.is-open {
  transform: translateX(0);
}

/* MP style (2026-08-13, client request "applique le style de
   .wpcfu-form-title à .mp-cart-drawer-header") - the header now wears the
   design system's dialog banner via `lfdp-modal-header`/`lfdp-modal-title`/
   `lfdp-modal-close` added in the markup (_partials/header.tpl): flat brand
   blue, white text, 1.15rem, tight line-height. Nothing of that look is
   repeated here - lfdp-components.css stays the single source of truth for the
   four surfaces that share it.

   Every property below is one the design system does NOT set, so no cascade
   tie has to be arbitrated:
   - the flex layout: `.lfdp-modal-header` relies on Bootstrap's own
     `.modal-header` for it, and this drawer isn't a Bootstrap modal;
   - the horizontal padding: the design system's 2.75rem right padding offsets
     Bootstrap's `.close` negative margins, which this plain button doesn't
     have - it would just push the cross inward. Declared with a compound
     selector so it beats `.lfdp-modal-header` on specificity rather than on
     load order (the CCC bundle can reorder stylesheets);
   - the close button's geometry (the design system only owns its color).
   Dropped on purpose: the `border-bottom` divider, now redundant with the blue
   band, and the uppercase + letter-spacing, absent from the reference banner. */
.mp-cart-drawer-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-shrink: 0;
}

.mp-cart-drawer .mp-cart-drawer-header {
  padding: 1.25rem 1.5rem;
}

.mp-cart-drawer-close {
  border: 0;
  background: transparent;
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
  padding: 0;
}

.mp-cart-drawer-body {
  flex: 1 1 auto;
  overflow-y: auto;
  padding: 1.5rem;
}

/* The cloned .widget-cart content (from ps_shoppingcart.tpl) already has its
   own padding/max-height scrollbar meant for a small dropdown - reset that
   so it fills the drawer body naturally instead. */
.mp-cart-drawer-body .widget-cart {
  padding: 0 !important;
}

.mp-cart-drawer-body .widget-cart > div[data-simplebar] {
  max-height: none !important;
}

.mp-cart-drawer-loading {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 3rem 0;
  color: #6c757d;
}

/* Empty cart state (see ps_shoppingcart.tpl override, .mp-cart-empty) */
.mp-cart-drawer-body .widget-cart.mp-cart-empty {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 60vh;
}

.mp-cart-empty-inner {
  max-width: 280px;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.mp-cart-empty-inner .lfdp-btn {
  width: 100%;
}

.mp-cart-empty-icon {
  display: block;
  font-size: 3rem;
  color: #d3d8de;
  margin: 0 auto 1rem;
}

.mp-cart-empty-text {
  color: #6c757d;
  font-size: 0.95rem;
}

body.mp-cart-drawer-open {
  overflow: hidden;
}

/* ==========================================================================
   MP - Product gallery thumbnail carousel (moved here from
   mp-thumb-carousel.css, 2026-07-30) - same reason as above.
   ========================================================================== */


.cz-thumb-carousel {
  position: relative;
}

.cz-thumb-carousel-nav {
  display: none;
  position: absolute;
  top: 50%;
  z-index: 2;
  width: 2rem;
  height: 2rem;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background-color: #fff;
  color: #212529;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.18);
  align-items: center;
  justify-content: center;
  transform: translateY(-50%);
  cursor: pointer;
  transition: background-color 0.2s ease, color 0.2s ease, opacity 0.2s ease;
}

.cz-thumb-carousel-nav.is-visible {
  display: flex;
}

.cz-thumb-carousel-nav i {
  font-size: 0.9rem;
  line-height: 1;
}

.cz-thumb-carousel-nav:hover,
.cz-thumb-carousel-nav:focus {
  background-color: #3468af;
  color: #fff;
}

.cz-thumb-carousel-nav--prev {
  left: -0.25rem;
}

.cz-thumb-carousel-nav--next {
  right: -0.25rem;
}

/* Leave room on each side for the buttons so the first/last thumbnail
   isn't hidden underneath them. */
.cz-thumb-carousel:has(.cz-thumb-carousel-nav--prev.is-visible) .cz-thumblist {
  padding-left: 1.75rem;
}

.cz-thumb-carousel:has(.cz-thumb-carousel-nav--next.is-visible) .cz-thumblist {
  padding-right: 1.75rem;
}

/* ==================================================================
   Material Icons removal (front office)
   ==================================================================
   MaterialIcons-Regular.woff2 weighs 125 KB and was downloaded on the
   homepage for two glyph sets only: the review stars (gsnippetsreviews)
   and the mobile mega menu +/- toggle (zonemegamenu). Both are remapped
   below to glyphs the theme already ships, so the font is never fetched.

   Codepoints come from themes/cartzilla/_dev/css/components/_icons.scss.
   ------------------------------------------------------------------ */

/* Review stars - cartzilla-icons has no half-star glyph, so the half
   state reuses the filled one clipped to its left half. */
#spr .rating-star-display > label,
#spr .rating-star-display > label::before,
#spr_list .rating-star-display > label,
#spr_list .rating-star-display > label::before {
  font-family: 'cartzilla-icons' !important;
  content: "\e97f" !important;
}

#spr .rating-star-display > .half::before,
#spr_list .rating-star-display > .half::before {
  font-family: 'cartzilla-icons' !important;
  content: "\e97f" !important;
  clip-path: inset(0 50% 0 0);
  left: 0;
}

/* Mobile mega menu accordion toggle */
#mobile-amegamenu .mobile-toggle-plus .mpzmm-toggle-ico {
  font-size: 20px;
  line-height: 24px;
  font-weight: 400;
}

/* ==================================================================
   CLS - reserve the top bar's box before its icons and fonts load
   ==================================================================
   Lighthouse desktop attributed a 0.16 layout shift to .header-top,
   caused by the top bar: its icons declare `height: 18px; width: auto`,
   so no horizontal space is reserved until the SVG is decoded, and the
   row's height is only settled once Poppins/Inter replace the fallback.

   The uploaded icons are square (1080x1080, 800x800), so aspect-ratio
   1/1 resolves to exactly the rendered 18x18 box - and object-fit is
   already `contain` upstream, so a non-square icon would be letterboxed
   rather than stretched.

   Selectors cover both namespaces: `.tb-*` (standalone `topbar` module,
   still the one rendering the bar on staging/prod) and `.mptb-*` (the
   MP Topbar block in mp_blocks that supersedes it).
   ------------------------------------------------------------------ */
.tb-img,
.mptb-img {
  aspect-ratio: 1 / 1;
}

.tb-inner,
.mptb-inner {
  min-height: 44px;
}

.tb-col,
.mptb-col {
  min-height: var(--tb-icon-h, var(--mptb-icon-h, 18px));
}

/* ==================================================================
   "Block category products" (vendor cartzillablocks, e.g. "Cuisinières
   à bois") - hover overlay clipped on the carousel's last product row
   ==================================================================
   Since the _content_block.tpl theme override (2026-08-05) stopped
   passing carousel=true, every product card in this vendor block now
   renders the same "Voir détails"/"Aperçu rapide" hover panel as the
   rest of the site. But tiny-slider (the slider library behind
   .cz-carousel-inner/.tns-*) sets a fixed pixel `height` + `overflow:
   hidden` on its wrapper, computed once from the slide's natural
   (non-hover) content height. The panel is `position: absolute; top:
   100%` and extends ~100px below the card - for every row except the
   very last one in a slide, that extra space is already covered by
   the row(s) below it inside the same clipped box, so only the LAST
   row's hover panel got cut off exactly at the clip boundary (client
   report, 2026-08-05).

   Fix: pad each slide (.tns-item) so tiny-slider measures - and clips
   at - a taller box with enough headroom for the last row's hover
   panel, then cancel that added space with an equal negative margin
   on .cz-carousel (a sibling of the clipped elements, so it doesn't
   affect the reserved clip height) so default (non-hover) spacing is
   visually unchanged. On hover, the panel now has room to render
   inside the clip box instead of being cut off.
   ------------------------------------------------------------------ */
.cz-homecategory .tns-item {
  padding-bottom: 105px;
}

.cz-homecategory .cz-carousel {
  margin-bottom: -105px;
}

/* ==================================================================
   Product carousels (catalog/_partials/products-list.tpl carousel
   branch) - hover overlay entirely clipped, not just the last row
   ==================================================================
   Same tiny-slider root cause as the ".cz-homecategory" fix above
   (fixed pixel height + `overflow: hidden` computed from the
   non-hover flow height), but a different symptom: this carousel
   markup (ps_featuredproducts "Produits populaires", ps_bestsellers,
   ps_newproducts, ps_specials, ps_crossselling, product-lfdp.tpl
   accessories) puts exactly ONE product per `.tns-item` slide instead
   of a 6-product grid, so there is no "row below" to absorb the
   panel's ~100px - it gets clipped in full on every card, on every
   such carousel (client report, 2026-08-06: hover completely inert
   on "Produits populaires").

   `.cz-controls-static.cz-controls-outside` is only ever combined
   with `.cz-carousel` in this one template (verified via grep), so
   this scoping can't leak into unrelated carousels (topbar, image
   sliders, etc.). Slide gets the padding as before.

   MP fix (2026-08-06 v2, client report "le bouton Plus de produits
   n'est plus cliquable") - UNLIKE `.cz-homecategory`, this carousel is
   almost always immediately followed by a "More products" button/link
   (ps_featuredproducts, ps_bestsellers...) sitting right below it with
   only a small `pt-3`/`mt-*` gap. Cancelling the added 105px via a
   negative margin (the `.cz-homecategory` pattern) pulls that
   button's box up into the exact same screen pixels reserved for the
   hover panel - invisible while no card is hovered, but the panel
   paints on top of (and blocks clicks on) the button as soon as any
   card in the row is hovered. No negative margin here: the ~105px is
   simply left as real, visible spacing before the button - more
   breathing room, but the only way to guarantee the hover panel never
   shares screen space with real, clickable content below it.
   ------------------------------------------------------------------ */
.cz-carousel.cz-controls-static.cz-controls-outside .tns-item {
  padding-bottom: 105px;
}

/* ==================================================================
   Homepage: vertical breathing room between PrettyBlocks sections
   ==================================================================
   Client request 2026-08-06: the homepage's PrettyBlocks blocks (MP
   Slider, MP Reassurance, MP Category Products, the native
   `block_category_products` carousel, MP CTA Block...) butt directly
   against each other with zero gap - `zone.tpl` (prettyblocks module,
   no theme override) wraps every block in a bare `[data-block]` div
   with no margin/padding of its own.

   This targets ONLY consecutive siblings inside the homepage's
   `displayHome` zone (`[data-block] + [data-block]`), not every
   `[data-block]` on the page (the same attribute also wraps blocks in
   other PrettyBlocks zones, e.g. the topbar).

   Intentionally additive & modest, not a full normalization: several
   blocks already carry their own internal vertical padding/margin
   (`.mpcp-block`/`.mprs-block`/`.mp2col-block` ~1.5rem, `.cz-homecategory`
   Bootstrap `my-5` = 3rem, `.rcw` reviews carousel 32px) - this is a
   small extra gap on top of whatever a given block already has, not a
   reset of those (reworking every MP block's own spacing to get a
   perfectly uniform gap would be a much bigger, riskier change than
   what was asked for: "juste un soupçon d'air").
   ------------------------------------------------------------------ */
[data-prettyblocks-zone="displayHome"] > [data-block] + [data-block] {
  margin-top: 24px;
}

@media (min-width: 768px) {
  [data-prettyblocks-zone="displayHome"] > [data-block] + [data-block] {
    margin-top: 40px;
  }
}

/* ==================================================================
   GDPR consent modal (module gdprpro, #gdprModal / .gdpr-consent-tabs-v2)
   - LFDP design system colors + font
   ==================================================================
   Client request 2026-08-07: "applique les couleurs + la police du
   design system à la modale gdprModal", "ne change pas la taille des
   boutons" - only color/background/border-color/font-family are
   touched below, no padding/height/font-size/width.

   `gdprpro` is a vendor module (PrestaChamps, "Do not edit" notice in
   every file) - per project rule, no vendor file is touched.

   Button colors (accept-all/reject-all/close-gdpr-consent) are NOT
   handled here: the theme already carries its own outline-button
   treatment for these 3 buttons, compiled from
   `_dev/css/_custom.scss` into `theme.css` - updated there instead
   (same design-system tokens) to avoid two competing `!important`
   rulesets of similar specificity fighting over the same selectors.
   Only what that block doesn't already cover is added below. */
.gdprModal {
  font-family: var(--lfdp-font-family);
}

.gdpr-consent-tabs,
.gdpr-consent-tabs-v2 {
  background-color: var(--lfdp-color-surface) !important;
}

.gdpr-consent-tabs .div_control_your_privacy p,
.gdpr-consent-tabs .div_control_your_privacy .div_text,
.gdpr-consent-tabs .h3_popuptitle,
.gdpr-consent-tabs-v2 .div_control_your_privacy p,
.gdpr-consent-tabs-v2 .div_control_your_privacy .div_text,
.gdpr-consent-tabs-v2 .div_control_your_privacy .h3_popuptitle {
  color: var(--lfdp-color-text) !important;
}

.gdpr-consent-tabs-content li p,
.gdpr-consent-tabs-content li .cookie_cat_description,
.gdpr-consent-tabs-content .table-responsive td {
  color: var(--lfdp-color-text);
}

.gdpr-consent-tabs-content li h3 {
  background: none;
  color: var(--lfdp-color-text);
}

/* Active tab underline + selected-count/"Allow" green accents - kept
   semantically green (still means "allowed/confirmed") but pulled
   from the design system's success token instead of assorted
   hardcoded greens (#f05451 for the tab underline isn't a brand color
   at all - switched to the primary blue used everywhere else for
   "active tab", see product page tabs). */
.gdpr-consent-tabs-navigation a.selected,
.gdpr-consent-tabs-navigation span.tab-title.selected {
  box-shadow: inset 0 2px 0 var(--lfdp-color-primary);
}

.gdpr-consent-tabs #gdpr-selected-count,
.gdpr-consent-tabs-v2 #gdpr-selected-count {
  color: var(--lfdp-color-success);
}

/* `<ul class="gdpr-consent-tabs-navigation">` keeps the browser's default
   list indent (~40px) - neither gdprpro's own CSS nor the theme reset it
   for this specific list. */
.gdpr-consent-tabs-navigation {
  padding-left: 0;
}

.gdpr-consent-tabs-content .table-responsive td.td_checkbox.allowed label,
.gdpr-consent-tabs-content .div_necessary .table-responsive td.td_checkbox label {
  color: var(--lfdp-color-success);
}

/* MP fix (2026-08-12) - the copyright is entered from the back office as raw
   HTML (`TplSettings::getSettings('copyright')`, a `<p>`), and Bootstrap's
   reboot gives every paragraph `margin-bottom: 1rem`. That trailing 1rem made
   the block a whole line taller than its text, so inside the sub-footer's
   `align-items-center` row the copyright sat visibly higher than the cookie
   link now placed beside it. Scoped to the last paragraph, so a multi-paragraph
   copyright keeps its spacing. */
.footer-copyright p:last-child {
  margin-bottom: 0;
}

/* MP fix (2026-08-12, client request "applique le style de a.mpfl-link à
   a.show-gdpr-modal.mpfi-gdpr-link") - same recipe as the footer link lists:
   #E3ECF8 underlined at rest, white on hover.

   Overrides theme.css rather than editing it: that file is a build artefact
   (source: `_dev/css/_custom.scss`, updated in the same commit) and the theme
   is not rebuilt here. custom.css is concatenated AFTER theme.css in the CCC
   bundle, so an identical selector wins on source order - no !important needed.
   The selector must keep both classes: gdprpro styles `.show-gdpr-modal` as a
   blue button, and `a.show-gdpr-modal.mpfi-gdpr-link` (0,2,1) is what beats it.

   Two of gdprpro's rules need more than that, and both were missed on the first
   pass - the link was still rendering plain white:

   - `.show-gdpr-modal { color: white !important }`. Specificity is irrelevant
     against `!important`; the only counter is `!important` on our side. Applies
     to the hover state too: without it, the rest state would stay white and the
     hover would have no visible effect at all.
   - `#footer .show-gdpr-modal { margin-top: 15px; margin-bottom: 15px }`. An ID
     selector scores (1,1,0) and beats our (0,2,1), so the plain `margin: 0`
     first written here never applied. Matched with `#footer` on our side rather
     than with another `!important`, which keeps the escape hatch for real
     conflicts only. */
a.show-gdpr-modal.mpfi-gdpr-link {
  font-size: var(--lfdp-fs-sm, 0.8125rem);
  color: var(--lfdp-color-on-primary-link, #E3ECF8) !important;
  text-decoration: underline;
  text-underline-offset: 2px;
}

a.show-gdpr-modal.mpfi-gdpr-link:hover,
a.show-gdpr-modal.mpfi-gdpr-link:focus {
  color: var(--lfdp-color-on-primary, #ffffff) !important;
  text-decoration: underline;
}

/* The 1rem above the link spaced it from the social icons it used to sit under;
   gdprpro adds 15px of its own. Both only push it out of line with the
   copyright it now sits next to - vertical rhythm comes from the `py-2` in the
   markup. */
#footer a.show-gdpr-modal.mpfi-gdpr-link {
  margin: 0;
}

/* Keyboard-only ring: the hover styling is a colour change alone, invisible to
   someone tabbing through the footer. Same recipe as `.mpfl-link`. */
a.show-gdpr-modal.mpfi-gdpr-link:focus-visible {
  outline: 2px solid var(--lfdp-color-on-primary, #ffffff);
  outline-offset: 2px;
  border-radius: 2px;
}