/**
 * Copyright since 2024 LCM
 *
 * NOTICE OF LICENSE
 *
 * This source file is subject to the Open Software License (OSL 3.0)
 * that is bundled with this package in the file LICENSE.md.
 * It is also available through the world-wide-web at this URL:
 * https://opensource.org/licenses/OSL-3.0
 *
 * @author    LCM
 * @copyright Since 2024 LCM
 * @license   https://opensource.org/licenses/OSL-3.0 Open Software License (OSL 3.0)
 */

/* ==========================================================================
   lcm_netreview — "Avis Vérifiés" display components
   ==========================================================================
   Expected markup contract (BEM, prefix lcm-av-):

   .lcm-av-stars[--sm|--lg]         star rating (default md = 16px)
     .lcm-av-stars__empty             in-flow row of empty stars (SVG inline)
     .lcm-av-stars__full              absolute overlay, clipped by inline width:%
   .lcm-av-badge                    header badge (displayNav2) — <a>
     .lcm-av-badge__logo (img)  __note  __count
   .lcm-av-badge--listing           modifier: centered miniature (listing cards)
   .lcm-av-carousel                 footer band (displayFooterBefore)
     .lcm-av-carousel__rating         left column
       __kicker  __note  __count  __logo (img)  __link
     .lcm-av-carousel__slides         position:relative crossfade container
       .lcm-av-carousel__slide          + .lcm-slide--on = visible (shared theme class)
         __quote  __meta > __author + __date
   .lcm-av-product-rating           inline line under add-to-cart
     .lcm-av-product-rating__link     anchor to #lcm-avis-produit
   .lcm-av-reviews                  product review list (displayFooterProduct)
     __title  __summary > __note + __count
     __dist > __dist-row > (label) + __bar > __bar-fill + (count)
     __item[hidden]  __item-head > __author + __date
     __content  __reply > __reply-label + __reply-content
     __more > .js-lcm-av-more (theme .btn)

   No !important anywhere. Theme collisions to settle at stitching time are
   flagged with "STITCH:" comments.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Local tokens — defined on every component root (no :root pollution).
   --lcm-av-star: muted honey gold, halfway between AV #FFCD00 and LCM
   or-champagne #b89968; readable on ecru AND on black.
   -------------------------------------------------------------------------- */
.lcm-av,
.lcm-av-stars,
.lcm-av-badge,
.lcm-av-carousel,
.lcm-av-product-rating,
.lcm-av-reviews {
  --lcm-av-star: #c9a04a;
  --lcm-av-star-empty: #d4cfc8;
}

/* --------------------------------------------------------------------------
   Stars — two stacked rows of inline SVG stars; the "full" row is clipped by
   an inline width:NN% set by the template. SVGs use fill="currentColor" (or
   var(--lcm-av-star*) directly, both resolve here).
   -------------------------------------------------------------------------- */
.lcm-av-stars {
  position: relative;
  display: inline-block;
  vertical-align: middle;
  line-height: 0;
}

.lcm-av-stars__empty {
  display: block;
  white-space: nowrap;
  color: var(--lcm-av-star-empty);
}

.lcm-av-stars__full {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  overflow: hidden;
  display: block;
  white-space: nowrap;
  color: var(--lcm-av-star);
}

.lcm-av-stars svg {
  display: inline-block;
  height: 16px;             /* md default */
  width: auto;
  max-width: none;          /* keep intrinsic width inside the clipped overlay */
  fill: currentColor;
}

.lcm-av-stars--sm svg { height: 12px; }
.lcm-av-stars--lg svg { height: 22px; }

/* --------------------------------------------------------------------------
   Header badge (displayNav2) — must blend between "FR · IT" and the account
   icon: no background, no border, compact, nowrap.
   STITCH: link color inherits from header rules; check nothing in the theme
   targets nav2 anchors with higher specificity than (0,2,0).
   -------------------------------------------------------------------------- */
.lcm-av-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  /* Clear daylight between the badge and the language selector: without it,
     "4,8/5 FR · IT · EN" read as one cryptic string (user feedback 01/09). */
  margin-inline-end: 1.4rem;
  white-space: nowrap;
  color: inherit;
  text-decoration: none;
}

/* Two stacked lines: the badge names itself, that IS the affordance. */
.lcm-av-badge__body {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  line-height: 1;
}

.lcm-av-badge__brand {
  font-size: 0.58rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--lcm-gris-texte);
}

.lcm-av-badge__logo {
  display: block;
  height: 22px;
  width: auto;
}

.lcm-av-badge__note {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  font-family: var(--lcm-font-display);
  font-weight: 600;
  font-size: 0.9rem;
  line-height: 1;
}

.lcm-av-badge__star {
  height: 12px;
  width: auto;
  fill: var(--lcm-av-star);
}

.lcm-av-badge__count {
  font-size: 0.72rem;
  font-family: var(--lcm-font-body);
  font-weight: 400;
  color: var(--lcm-gris-texte);
}

/* Discreet hover: underline the note only */
.lcm-av-badge:hover .lcm-av-badge__note {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
}

/* Listing miniature: sm stars + count, centered under the product title */
.lcm-av-badge--listing {
  display: flex;
  justify-content: center;
  gap: 0.35rem;
  margin-block: 0.25rem 0.5rem;
}

/* --------------------------------------------------------------------------
   Footer carousel (displayFooterBefore) — the signature piece.
   STITCH: custom.css:1383 paints .footer__before ECRU (overrides the .footer
   noir of line 1333 — the plan's "black band, not overridden" claim is stale).
   The component therefore paints its own --lcm-noir background so it renders
   as the black band regardless of the host band color. The beige border-top
   of .footer__before will show as a hairline above it — settle at stitching.
   Full-bleed band; inline padding centers content on the ~1320px site grid
   without needing an inner .container.
   -------------------------------------------------------------------------- */
.lcm-av-carousel {
  display: grid;
  gap: 1.75rem;
  background-color: var(--lcm-noir);
  color: var(--lcm-gris-clair);
  padding-block: 2.5rem 2.75rem;
  padding-inline: max(1.25rem, calc((100% - 1320px) / 2));
}

@media (min-width: 768px) {
  .lcm-av-carousel {
    /* The rating column takes its NATURAL width (~180px) — a fixed 260px was
       starving the track at mid sizes (user feedback 02/09). */
    grid-template-columns: auto minmax(0, 1fr);
    column-gap: 3rem;
    align-items: center;
    padding-block: 3rem;
  }
}

/* Left column: kicker, giant note, stars, count, logo, attestation link */
.lcm-av-carousel__rating {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.5rem;
}

.lcm-av-carousel__kicker {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--lcm-or-champagne);
}

.lcm-av-carousel__note {
  font-family: var(--lcm-font-display);
  font-size: clamp(2.2rem, 4vw, 3.2rem);
  font-weight: 600;
  line-height: 1;
  color: var(--lcm-blanc);
}

.lcm-av-carousel__count {
  font-size: 0.85rem;
  color: var(--lcm-gris-clair);
}

.lcm-av-carousel__logo {
  display: block;
  height: 44px;
  width: auto;
  margin-top: 0.5rem;
}

/* Thin underline; colors intentionally left to .footer a rules (gris-clair,
   hover blanc) which match the design — STITCH: revisit if those rules move. */
.lcm-av-carousel__link {
  font-size: 0.8rem;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

/* Deck: ghost chevrons flanking a scroll-snap track of white cards.
   Natively scrollable without JS; netreview.js reveals the chevrons and
   drives the 10 s autoplay. Visible card count follows the width. */
.lcm-av-carousel__deck {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  min-width: 0;              /* allows the track to shrink inside the grid */
}

.lcm-av-carousel__track {
  /* Integer cards + a peek of the next one. Card width is DERIVED from the
     wanted count: (100% - peek - N*gap) / N — so whatever the viewport, you
     always see exactly N full cards and the start of card N+1. */
  --lcm-av-n: 1;
  --lcm-av-peek: 2.75rem;
  --lcm-av-gap: 1rem;
  display: flex;
  gap: var(--lcm-av-gap);
  list-style: none;
  margin: 0;
  padding: 0.25rem 0.25rem 0.5rem;  /* room for card shadows */
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  flex: 1;
  min-width: 0;
}

.lcm-av-carousel__track::-webkit-scrollbar {
  display: none;
}

.lcm-av-carousel__card {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  flex: 0 0 calc((100% - var(--lcm-av-peek) - var(--lcm-av-n) * var(--lcm-av-gap)) / var(--lcm-av-n));
  scroll-snap-align: start;
  background: var(--lcm-blanc-pur, #fff);
  color: var(--lcm-charbon, #2c2c2c);
  border-radius: var(--lcm-radius-lg, 12px);
  box-shadow: var(--lcm-shadow-card, 0 2px 10px rgba(0, 0, 0, 0.25));
  padding: 1.15rem 1.25rem 1.25rem;
}

.lcm-av-carousel__card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
}

.lcm-av-carousel__quote {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 5;
  line-clamp: 5;
  overflow: hidden;
  margin: 0;
  font-family: var(--lcm-font-body);
  font-size: 0.92rem;
  line-height: 1.55;
  color: var(--lcm-charbon, #2c2c2c);
}

.lcm-av-carousel__card--open .lcm-av-carousel__quote {
  -webkit-line-clamp: unset;
  line-clamp: unset;
  overflow: visible;
}

.lcm-av-carousel__more {
  align-self: flex-start;
  padding: 0;
  border: 0;
  background: none;
  font-size: 0.78rem;
  color: var(--lcm-brun, #5c4a3a);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
  cursor: pointer;
}

/* The author opens the card (user call 02/09: name above the stars). */
.lcm-av-carousel__author {
  font-family: var(--lcm-font-display);
  font-weight: 600;
  font-size: 0.92rem;
}

.lcm-av-carousel__nav {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 1px solid rgba(212, 207, 200, 0.4);
  border-radius: 50%;
  background: transparent;
  color: var(--lcm-gris-clair, #d4cfc8);
  cursor: pointer;
  transition: background-color var(--lcm-transition-fast, 0.15s), color var(--lcm-transition-fast, 0.15s);
}

.lcm-av-carousel__nav:hover {
  background: rgba(250, 248, 245, 0.12);
  color: var(--lcm-blanc, #faf8f5);
}

.lcm-av-carousel__nav svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Dates inside cards read charcoal-grey, not footer grey */
.lcm-av-carousel__card .lcm-av-carousel__date {
  color: var(--lcm-gris-texte, #6e6963);
  font-size: 0.78rem;
}

/* 2 cards only once the track really affords 2 x ~200px + peek: below that,
   one wide readable card beats two crushed ones. */
@media (min-width: 900px) {
  .lcm-av-carousel__track { --lcm-av-n: 2; }
}

@media (min-width: 1280px) {
  .lcm-av-carousel__track { --lcm-av-n: 3; --lcm-av-peek: 3.25rem; }
}

@media (max-width: 575.98px) {
  .lcm-av-carousel__nav { display: none; }  /* swipe rules on phones */
}

/* Reduced motion: the autoplay never starts (guarded in netreview.js) and
   chevron scrolling falls back to instant jumps. */
@media (prefers-reduced-motion: reduce) {
  .lcm-av-carousel__track {
    scroll-behavior: auto;
  }
}

/* --------------------------------------------------------------------------
   Product page: inline rating line under the add-to-cart block.
   -------------------------------------------------------------------------- */
.lcm-av-product-rating {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin-block: 0.5rem;
}

.lcm-av-product-rating__link {
  font-size: 0.85rem;
  color: var(--lcm-gris-texte);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
}

.lcm-av-product-rating__link:hover {
  color: var(--lcm-brun);
}

/* --------------------------------------------------------------------------
   Product page: review list section (displayFooterProduct).
   scroll-margin compensates the fixed header when landing on the anchor.
   -------------------------------------------------------------------------- */
.lcm-av-reviews {
  margin-block: 2.5rem;
  scroll-margin-top: calc(var(--lcm-header-height, 136px) + 1rem);
}

.lcm-av-reviews__title {
  font-family: var(--lcm-font-display);
  font-size: 1.35rem;
  font-weight: 600;
  color: var(--lcm-charbon);
  margin-bottom: 1rem;
}

.lcm-av-reviews__summary {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.75rem;
}

.lcm-av-reviews__note {
  font-family: var(--lcm-font-display);
  font-size: 2rem;
  font-weight: 600;
  line-height: 1;
  color: var(--lcm-charbon);
}

.lcm-av-reviews__count {
  font-size: 0.85rem;
  color: var(--lcm-gris-texte);
}

/* Rating distribution bars */
.lcm-av-reviews__dist {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  max-width: 22rem;
  margin-block: 1rem 1.5rem;
}

.lcm-av-reviews__dist-row {
  display: grid;
  grid-template-columns: 2.2rem 1fr 2.5rem;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.8rem;
  color: var(--lcm-gris-texte);
}

.lcm-av-reviews__bar {
  height: 8px;
  background-color: var(--lcm-beige);
  border-radius: 999px;
  overflow: hidden;
}

.lcm-av-reviews__bar-fill {
  height: 100%;
  width: 0;                    /* inline width:NN% set by the template */
  background-color: var(--lcm-av-star);
  border-radius: inherit;
}

.lcm-av-reviews__bar-star {
  height: 10px;
  width: auto;
  fill: var(--lcm-av-star);
  vertical-align: baseline;
}

/* Review items */
.lcm-av-reviews__item {
  border-top: 1px solid var(--lcm-beige);
  padding-block: 1.25rem;
}

/* Safety net: keep [hidden] items hidden whatever else styles articles */
.lcm-av-reviews__item[hidden] {
  display: none;
}

.lcm-av-reviews__item-head {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin-bottom: 0.4rem;
}

.lcm-av-reviews__author {
  font-weight: 600;
  font-size: 0.9rem;
  color: var(--lcm-charbon);
}

.lcm-av-reviews__date {
  font-size: 0.8rem;
  color: var(--lcm-gris-texte);
}

.lcm-av-reviews__content {
  margin: 0;
  font-size: 0.95rem;
  line-height: 1.6;
  color: var(--lcm-charbon);
}

/* Merchant reply: indented, thin champagne rule, ecru ground */
.lcm-av-reviews__reply {
  margin: 0.75rem 0 0 1rem;
  padding: 0.75rem 1rem;
  background-color: var(--lcm-ecru);
  border-left: 2px solid var(--lcm-or-champagne);
  border-radius: 0 var(--lcm-radius-sm) var(--lcm-radius-sm) 0;
}

/* Template emits __reply-head (label + date on one line), not __reply-label */
.lcm-av-reviews__reply-head {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--lcm-brun);
  margin: 0 0 0.3rem;
}

.lcm-av-reviews__reply-date {
  font-weight: 400;
  letter-spacing: normal;
  text-transform: none;
  color: var(--lcm-gris-texte);
}

.lcm-av-reviews__reply-content {
  margin: 0;
  font-size: 0.9rem;
  line-height: 1.55;
  color: var(--lcm-charbon);
}

/* "Show more" — the theme's .btn does the styling; the class sits on the
   button itself, so center it as a block. */
.lcm-av-reviews__more {
  display: block;
  margin: 1.5rem auto 0;
}

/* Source mention at the section foot: discreet, right-aligned */
.lcm-av-reviews__source {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 1.5rem;
  padding-top: 0.75rem;
  border-top: 1px solid var(--lcm-beige);
  font-size: 0.78rem;
  color: var(--lcm-gris-texte);
}

.lcm-av-reviews__source-logo {
  display: block;
  height: 14px;
  width: auto;
}

.lcm-av-reviews__source-link {
  color: var(--lcm-gris-texte);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
}

.lcm-av-reviews__source-link:hover {
  color: var(--lcm-brun);
}

/* --------------------------------------------------------------------------
   Attestation viewer — the badge (and every attestation link) opens the
   certificate page in an in-site panel instead of yanking the visitor away.
   Panel: 80vw x 100vh, ecru top bar (mark + label + external/close), the
   iframe scrolls itself. Markup is built lazily by netreview.js on first use.
   -------------------------------------------------------------------------- */
.lcm-av-modal {
  position: fixed;
  inset: 0;
  z-index: 10001;              /* above the sticky header AND the consent
                                  banner (lcm_analytics: 9999/10000) — the
                                  panel opens on an explicit user click */
  display: flex;
  justify-content: center;
  background: rgba(26, 26, 26, 0.55);
}

.lcm-av-modal[hidden] {
  display: none;
}

.lcm-av-modal__panel {
  display: flex;
  flex-direction: column;
  width: 80%;
  height: 100%;
  background: var(--lcm-blanc, #faf8f5);
  box-shadow: 0 0 40px rgba(0, 0, 0, 0.35);
  animation: lcm-av-modal-in 0.25s ease-out;
}

@keyframes lcm-av-modal-in {
  from { transform: translateY(12px); opacity: 0; }
  to   { transform: none; opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .lcm-av-modal__panel { animation: none; }
}

@media (max-width: 767.98px) {
  .lcm-av-modal__panel { width: 100%; }
}

.lcm-av-modal__bar {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.65rem 1rem;
  background: var(--lcm-ecru, #f5f0e8);
  border-bottom: 1px solid var(--lcm-beige, #e8e0d4);
}

.lcm-av-modal__mark {
  height: 20px;
  width: auto;
}

.lcm-av-modal__label {
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--lcm-charbon, #2c2c2c);
  margin-right: auto;          /* pushes the buttons to the right edge */
}

.lcm-av-modal__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  padding: 0;
  border: 1px solid var(--lcm-beige, #e8e0d4);
  border-radius: var(--lcm-radius-sm, 6px);
  background: var(--lcm-blanc, #faf8f5);
  color: var(--lcm-charbon, #2c2c2c);
  cursor: pointer;
  transition: background-color var(--lcm-transition-fast, 0.15s);
}

.lcm-av-modal__btn:hover {
  background: var(--lcm-beige, #e8e0d4);
}

.lcm-av-modal__btn svg {
  width: 16px;
  height: 16px;
  stroke: currentColor;
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.lcm-av-modal__frame {
  flex: 1;
  width: 100%;
  border: 0;
  background: #fff;            /* the certificate page is white */
}

/* While the panel is open the page behind must not scroll */
body.lcm-av-modal-open {
  overflow: hidden;
}