/* ==========================================================================
   MWS — Avis Google
   Mobile first : les avis défilent au doigt (scroll-snap, sans JS), puis
   passent en grille dès le desktop. Couleurs reprises du thème si présentes.
   ========================================================================== */

.mwsgr {
  background-color: var(--md-white, #fff);
  padding-block: var(--md-section-y, 2.5rem);
}

.mwsgr__head {
  text-align: center;
  margin-bottom: 2rem;
}

.mwsgr__eyebrow {
  color: var(--md-gold, #d6a342);
  font-size: 1rem;
  text-transform: uppercase;
  margin: 0 0 .6875rem;
}

.mwsgr__title {
  font-family: var(--md-font-display, Georgia, serif);
  font-size: clamp(1.75rem, 5vw, 2.25rem);
  font-weight: 500;
  color: var(--md-navy, #211c35);
  margin: 0;
}

.mwsgr__body {
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

/* ── Note globale ─────────────────────────────────────────────────────── */

.mwsgr__score {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .4375rem;
  flex: 0 0 auto;
}

.mwsgr__note {
  display: flex;
  align-items: baseline;
  gap: .125rem;
  font-family: var(--md-font-display, Georgia, serif);
  color: var(--md-navy, #211c35);
  margin: 0;
}

.mwsgr__note-value { font-size: 3.75rem; line-height: 1; }

.mwsgr__note-max {
  font-size: 1.5rem;
  color: var(--md-muted, #6b5a4e);
}

.mwsgr__stars {
  display: flex;
  gap: .125rem;
  color: var(--md-gold, #d6a342);
  margin: 0;
}

.mwsgr__star--off { color: var(--md-line, rgba(33, 28, 53, .18)); }

.mwsgr__count {
  color: var(--md-navy-soft, #3a2a22);
  font-size: .6875rem;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  margin: 0;
}

.mwsgr__count-link { text-decoration: none; }
.mwsgr__count-link:hover { text-decoration: underline; }

/* ── Avis ─────────────────────────────────────────────────────────────────
   Rail horizontal : au doigt en mobile, au chevron dès le desktop. Trois avis
   par écran comme la maquette (325,66 px de carte, 37 px de gouttière).       */

.mwsgr__list {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(15.625rem, 80%);
  gap: 1.5rem;
  list-style: none;
  margin: 0;
  /* Le rail déborde du conteneur pour que le défilement parte du bord de
     l'écran : exactement de la marge du conteneur (sa gouttière Bootstrap).
     Avec 20 px au lieu de 12, il dépassait de 8 px et faisait défiler toute
     la page de côté en mobile. */
  padding: 0 calc(var(--bs-gutter-x, 1.5rem) * .5) .5rem;
  margin-inline: calc(var(--bs-gutter-x, 1.5rem) * -.5);
  /* Sans marge d'accroche, le défilement s'accrochait au bord de la première
     carte et la rognait dès le chargement (logo Google coupé). */
  scroll-padding-inline: calc(var(--bs-gutter-x, 1.5rem) * .5);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: thin;
}

.mwsgr__item { scroll-snap-align: start; }

.mwsgr__card {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  height: 100%;
  margin: 0;
}

.mwsgr__card-head {
  display: flex;
  align-items: center;
  gap: .625rem;
}

.mwsgr__logo { flex: 0 0 auto; }

.mwsgr__quote {
  font-family: var(--md-font-display, Georgia, serif);
  font-style: italic;
  font-size: 1.125rem;
  line-height: 1.42;
  color: var(--md-navy-soft, #3a2a22);
  margin: 0;
  /* Cartes de hauteur égale, comme la maquette. Elle montre deux lignes avec
     un texte d'exemple court ; quatre ici, sinon un vrai avis Google est
     réduit à un moignon. La lecture entière se fait sur la fiche Google. */
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Les guillemets sont posés par la feuille de style, pas saisis en BO. */
.mwsgr__quote::before { content: "« "; }
.mwsgr__quote::after  { content: " »"; }

.mwsgr__author {
  color: var(--md-navy, #211c35);
  font-size: .6875rem;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  margin-top: auto;
}

/* ── Chevron ──────────────────────────────────────────────────────────────
   Une seule flèche, comme la maquette : arrivée au bout, elle repart au
   début. En mobile le rail se fait au doigt, elle n'a pas lieu d'être.       */

.mwsgr__arrow {
  display: none;
  flex: 0 0 auto;
  align-self: center;
  padding: 0;
  border: 0;
  background: none;
  /* Gris chaud relevé sur la maquette, absent des jetons du thème. */
  color: #8b7d74;
  line-height: 0;
  cursor: pointer;
  transition: color .2s ease;
}

.mwsgr__arrow:hover,
.mwsgr__arrow:focus-visible { color: var(--md-navy, #211c35); }

@media (min-width: 992px) {
  .mwsgr__body {
    flex-direction: row;
    align-items: center;
    gap: 2.3125rem;                 /* 37 px */
  }

  .mwsgr__score {
    flex: 0 0 auto;
    align-items: flex-start;
    width: 10.1875rem;              /* 163 px */
  }

  .mwsgr__list {
    flex: 1 1 auto;
    min-width: 0;
    grid-auto-columns: calc((100% - 2 * 2.3125rem) / 3);
    gap: 2.3125rem;
    padding: 0;
    margin-inline: 0;
    scroll-padding-inline: 0;
    scrollbar-width: none;          /* le chevron remplace la barre */
  }

  .mwsgr__list::-webkit-scrollbar { display: none; }

  .mwsgr__arrow { display: block; }
}


/* ==========================================================================
   Pastille flottante — toutes les pages sauf l'accueil et le tunnel d'achat.
   Position fixe en bas à gauche : la droite est le territoire des messageries
   et des bandeaux d'ajout au panier en mobile. Sous les modales Bootstrap
   (z-index 1055) pour ne jamais passer devant une fenêtre de dialogue.
   ========================================================================== */

.mwsgr-float {
  position: fixed;
  left: 1rem;
  bottom: 1rem;
  z-index: 1020;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: .5rem;
  max-width: min(20rem, calc(100vw - 2rem));
}

@supports (left: env(safe-area-inset-left)) {
  .mwsgr-float {
    left: calc(1rem + env(safe-area-inset-left));
    bottom: calc(1rem + env(safe-area-inset-bottom));
  }
}

/* ── La pastille ──────────────────────────────────────────────────────── */

.mwsgr-float__toggle {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .5rem .875rem;
  border: 1px solid var(--md-line, rgba(33, 28, 53, .18));
  border-radius: 999px;
  background-color: var(--md-white, #fff);
  box-shadow: 0 .25rem 1rem rgba(33, 28, 53, .16);
  color: var(--md-navy, #211c35);
  font-size: .8125rem;
  line-height: 1.2;
  cursor: pointer;
}

.mwsgr-float__toggle:hover,
.mwsgr-float__toggle:focus-visible {
  border-color: var(--md-gold, #d6a342);
}

.mwsgr-float__logo { flex: 0 0 auto; }

.mwsgr-float__figures {
  display: flex;
  align-items: center;
  gap: .375rem;
}

.mwsgr-float__note {
  font-family: var(--md-font-display, Georgia, serif);
  font-size: 1.0625rem;
  line-height: 1;
}

.mwsgr-float__label {
  color: var(--md-muted, #6b5a4e);
  white-space: nowrap;
}

/* Sur mobile et tablette, la pastille se réduit au logo, à la note et aux
   étoiles : avec son libellé elle faisait 246 px de large et recouvrait des
   champs, des mentions et des boutons. */
@media (max-width: 61.99em) {
  .mwsgr-float__label { display: none; }
}

/* Fiche produit en mobile et tablette : la pastille recouvrait le bouton
   d'ajout au panier et la quantité. */
@media (max-width: 61.99em) {
  #product .mwsgr-float { display: none; }
}

/* Pages à formulaire : la pastille n'y a rien à faire. */
#contact .mwsgr-float,
#authentication .mwsgr-float,
#registration .mwsgr-float,
#password .mwsgr-float { display: none; }

/* Saisie en cours, où que ce soit (newsletter, recherche) : on dégage.
   Règle séparée : un navigateur sans `:has` n'invalide qu'elle. */
body:has(:is(input, textarea, select):focus) .mwsgr-float { display: none; }

/* ── Le panneau ───────────────────────────────────────────────────────── */

.mwsgr-float__panel {
  width: min(20rem, calc(100vw - 2rem));
  max-height: min(60vh, 28rem);
  overflow-y: auto;
  padding: 1rem;
  border: 1px solid var(--md-line, rgba(33, 28, 53, .18));
  border-radius: .75rem;
  background-color: var(--md-white, #fff);
  box-shadow: 0 .5rem 1.75rem rgba(33, 28, 53, .2);
}

.mwsgr-float__panel[hidden] { display: none; }

.mwsgr-float__panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .5rem;
  margin-bottom: .75rem;
}

.mwsgr-float__panel-title {
  margin: 0;
  font-family: var(--md-font-display, Georgia, serif);
  font-size: 1rem;
  color: var(--md-navy, #211c35);
}

.mwsgr-float__close {
  display: inline-flex;
  padding: .25rem;
  border: 0;
  background: none;
  color: var(--md-muted, #6b5a4e);
  cursor: pointer;
}

.mwsgr-float__close:hover,
.mwsgr-float__close:focus-visible { color: var(--md-navy, #211c35); }

.mwsgr-float__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: .875rem;
}

.mwsgr-float__item + .mwsgr-float__item {
  padding-top: .875rem;
  border-top: 1px solid var(--md-line, rgba(33, 28, 53, .18));
}

.mwsgr-float__quote {
  margin: .375rem 0 .25rem;
  font-size: .8125rem;
  line-height: 1.5;
  color: var(--md-navy-soft, #3a2a22);
  /* Un avis long est tronqué proprement : le panneau reste une invitation,
     la lecture complète se fait sur Google. */
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.mwsgr-float__author {
  margin: 0;
  font-size: .75rem;
  color: var(--md-muted, #6b5a4e);
}

.mwsgr-float__all {
  display: inline-block;
  margin-top: .875rem;
  font-size: .8125rem;
  text-decoration: underline;
}


.mwsgr-float__summary {
  display: flex;
  align-items: baseline;
  gap: .375rem;
  margin: 0 0 .75rem;
  color: var(--md-navy, #211c35);
}

.mwsgr-float__summary-note {
  font-family: var(--md-font-display, Georgia, serif);
  font-size: 1.75rem;
  line-height: 1;
}

.mwsgr-float__summary-max { font-size: .875rem; color: var(--md-muted, #6b5a4e); }

.mwsgr-float__summary-count { font-size: .8125rem; color: var(--md-muted, #6b5a4e); }

@media print {
  .mwsgr-float { display: none; }
}

/* Tant qu'aucun témoignage n'est importé, la note reste seule dans le bloc :
   centrée, elle le tient — sinon elle flotte dans le coin gauche, là où la
   colonne de témoignages devrait commencer. Deux classes : la règle passe
   devant celle du desktop sans avoir à la retoucher. */
.mwsgr--score-only .mwsgr__body { justify-content: center; }

.mwsgr--score-only .mwsgr__score {
  align-items: center;
  width: auto;
  text-align: center;
}