/**
 * Avis clients — styles du module.
 *
 * Le module ne connaît pas le thème. Il pose donc ses propres variables, avec
 * un repli neutre : si le thème définit `--accent`, `--ink` et compagnie, les
 * couleurs suivent la marque ; sinon elles restent lisibles telles quelles.
 *
 * C'est ce qui permet de l'installer sur une autre boutique sans le retoucher.
 */

.wa,
.wa-page,
.wa-pub,
.wa-home,
.wa-mini,
.wa-pdp {
  /* Trois niveaux, du plus fort au plus faible :
     1. le réglage du module (`--wa-or` & co, posés par le back-office) ;
     2. la variable du thème (`--gold`, `--ink`…) ;
     3. une valeur de secours, lisible partout.
     Un réglage vide ne pose rien, et le thème reprend la main. */
  --wa-gold: var(--wa-or, var(--gold, #f6b21b));
  --wa-title: var(--wa-ink, var(--ink, #14303f));
  --wa-body: var(--wa-ink-2, var(--ink-2, #4a5f6d));
  --wa-mute: var(--muted, #7a8b9a);
  --wa-line: var(--line-soft, #e3ecf2);
  --wa-surf: var(--wa-surface, var(--surface, #fff));
  --wa-plate: var(--plate, #f4f8fb);
  --wa-acc: var(--wa-accent, var(--accent, #25b9d7));
  --wa-leaf: var(--leaf, #3f9f6a);
  --wa-edge: var(--wa-fade, var(--plate, #f4f8fb));
  --wa-cta-bg: var(--wa-btn, var(--ink, #14303f));
  --wa-cta-fg: var(--wa-btn-text, #fff);
  --wa-r: var(--r-lg, 14px);
  --wa-r-btn: 999px;
}

/* --- étoiles ------------------------------------------------------------

   Deux couches : les vides dessous, les pleines dessus, rognées à la largeur
   voulue. C'est ce qui permet d'afficher 4,3 sur 5 sans arrondir — et un
   arrondi, sur une note, c'est un chiffre qu'on invente.

   Le remplissage s'anime au chargement, de zéro jusqu'à la note : le geste
   attire l'œil sur le seul chiffre que le visiteur cherche. */
.wa-stars {
  position: relative; display: inline-flex; vertical-align: middle;
  line-height: 0; isolation: isolate;
}
.wa-stars-b, .wa-stars-f { display: inline-flex; gap: 2px; }
.wa-stars-f {
  position: absolute; top: 0; left: 0; bottom: 0;
  overflow: hidden; white-space: nowrap;
  animation: wa-fill .9s cubic-bezier(.2, .8, .3, 1) both;
}
@keyframes wa-fill { from { width: 0 } }

.wa-star { width: 1em; height: 1em; flex: none; }
.wa-stars-b .wa-star { fill: color-mix(in srgb, var(--wa-mute) 22%, transparent); }
.wa-stars-f .wa-star {
  fill: var(--wa-gold);
  stroke: color-mix(in srgb, var(--wa-gold) 78%, #000); stroke-width: .4;
  filter: drop-shadow(0 1px 1px color-mix(in srgb, var(--wa-gold) 40%, transparent));
}

@media (prefers-reduced-motion: reduce) {
  .wa-stars-f { animation: none; }
}

.wa-mini { display: flex; align-items: center; gap: 6px; font-size: .82rem; color: var(--wa-mute); }
.wa-mini .wa-stars { font-size: .9rem; }

/* --- bloc produit ------------------------------------------------------- */

/* Le module ne sait pas où le thème place le hook : sur une fiche produit,
   `displayFooterProduct` est appelé à la racine de la page, sans conteneur.
   Le bloc se cadre donc lui-même — sinon le texte court d'un bord à l'autre
   de l'écran, illisible passé 1200 px. */
/* LE BLOC PORTE SA PROPRE LARGEUR, ET SAIT Y RENONCER.
 *
 * Pose sur une page d'accueil sans conteneur, il doit se borner lui-meme,
 * sinon il traverse l'ecran. Pose dans une fiche produit dont les sections
 * sont deja alignees sur une gouttiere, cette borne le rend PLUS ETROIT que
 * ses voisines : mesure sur la fiche du theme, 1240 px contre 1344, et un
 * decalage de 52 px a gauche qui se voit immediatement.
 *
 * Les deux jetons ci-dessous laissent l'hote trancher. Un theme qui borne deja
 * son contenu ecrit `--wa-max: none; --wa-gouttiere: 0` sur son enveloppe, et
 * le bloc s'aligne sur le reste. Sans rien, le comportement ne change pas. */
.wa {
  max-width: var(--wa-max, var(--wrap, 1240px));
  margin-inline: auto;
  padding-inline: var(--wa-gouttiere, clamp(22px, 5vw, 32px));
  margin-block: clamp(40px, 6vw, 72px);
}

/* Le bloc passe SOUS ce qui flotte au-dessus de lui.
 *
 * Un module voisin — ici l'ancien module d'avis, avec ses filtres en
 * `float:left` — laisse ses flottants dépasser. Un conteneur flex se range
 * alors À CÔTÉ d'eux plutôt qu'en dessous : l'en-tête se retrouvait large de
 * zéro pixel, invisible, et laissait un vide de 500 px au milieu de la page.
 *
 * Le module ne peut pas savoir ce que la page contient au-dessus de lui : il
 * se protège. */
.wa,
.wa-home,
.wa-page,
.wa-pub { clear: both; }
.wa-title { font-size: 1.4rem; margin: 0; }

.wa-head {
  display: flex; flex-wrap: wrap; gap: 24px; align-items: center;
  justify-content: space-between;
  padding-bottom: 22px; margin-bottom: 22px;
  border-bottom: 1px solid var(--wa-line);
}

.wa-score { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; }
.wa-score-n { font-size: 1rem; color: var(--wa-mute); }
.wa-score-n strong { font-size: 2.4rem; color: var(--wa-title); line-height: 1; }
.wa-score-nb { margin: 4px 0 0; font-size: .86rem; color: var(--wa-mute); }
.wa-score .wa-stars { font-size: 1.15rem; }

/* La répartition par étoile : cinq lignes, alignées à la grille. */
.wa-bars { display: grid; gap: 4px; min-width: 200px; }
.wa-bar { display: grid; grid-template-columns: 30px 1fr 28px; align-items: center; gap: 8px; font-size: .78rem; }
.wa-bar-l { color: var(--wa-mute); }
.wa-bar-t { height: 6px; border-radius: 999px; background: var(--wa-line); overflow: hidden; }
.wa-bar-v { display: block; height: 100%; background: var(--wa-gold); border-radius: 999px; }
.wa-bar-n { text-align: right; color: var(--wa-mute); font-variant-numeric: tabular-nums; }

.wa-cta {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 11px 20px; border: 0; border-radius: var(--wa-r-btn); cursor: pointer;
  background: var(--wa-cta-bg); color: var(--wa-cta-fg); font: inherit; font-weight: 600;
  text-decoration: none; transition: transform .15s, opacity .15s;
}
.wa-cta:hover { color: var(--wa-cta-fg); opacity: .9; transform: translateY(-1px); }

/* --- un avis ------------------------------------------------------------ */
.wa-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 20px; }
.wa-item { padding-bottom: 20px; border-bottom: 1px solid var(--wa-line); }
.wa-item:last-child { border-bottom: 0; padding-bottom: 0; }

.wa-item-h { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 8px; }
.wa-who { color: var(--wa-title); }
.wa-when { margin-left: auto; font-size: .82rem; color: var(--wa-mute); }

.wa-badge {
  font-size: .7rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  padding: 2px 8px; border-radius: 999px;
  background: color-mix(in srgb, var(--wa-leaf) 12%, transparent); color: var(--wa-leaf);
}

.wa-item-t { font-size: 1.02rem; margin: 0 0 6px; }
.wa-item-c { margin: 0; color: var(--wa-body); line-height: 1.65; }

.wa-reply {
  margin-top: 12px; padding: 12px 16px; border-radius: 10px;
  background: var(--wa-plate); border-left: 3px solid var(--wa-acc);
}
.wa-reply strong { font-size: .82rem; color: var(--wa-acc); }
.wa-reply p { margin: 4px 0 0; color: var(--wa-body); font-size: .94rem; line-height: 1.6; }

.wa-empty { color: var(--wa-mute); }

/* --- accueil ------------------------------------------------------------ */
.wa-home { padding-block: clamp(48px, 7vw, 88px); }
.wa-home-in { max-width: var(--wrap, 1240px); margin-inline: auto; padding-inline: clamp(22px, 5vw, 32px); }

.wa-home-h {
  display: flex; flex-wrap: wrap; gap: 20px; align-items: flex-end;
  justify-content: space-between; margin-bottom: 28px;
}
/* Le titre porte une classe : sa balise se regle, la mise en forme ne doit
   donc plus dependre du nom de l'element. */
.wa-home-h h2,
.wa-home-title {
  margin: 0;
  /* La police est DECLAREE, pas heritee : elle venait du fait que ce titre
     etait un <h2>, et le passage en paragraphe la lui aurait retiree. */
  font-family: var(--wa-home-font, inherit);
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1.2;
  color: var(--wa-title);
}
.wa-home-eyebrow {
  margin: 0 0 6px; font-size: .74rem; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase;
  /* Le cyan de marque tombe à 2,73:1 sur un fond clair : on prend la variante
     prévue pour le texte, en gardant `--wa-acc` pour les traits et les fonds. */
  /* Le reglage d'abord, puis la variante texte du theme, puis un repli. Sans
     le premier maillon, cette couleur n'etait atteignable par aucun ecran. */
  color: var(--wa-eyebrow, var(--accent-text, #11749C));
}
.wa-home-score {
  display: flex; align-items: center; gap: 14px;
  padding: 12px 18px; border-radius: var(--wa-r);
  background: var(--wa-surf); border: 1px solid var(--wa-line);
}
.wa-home-score .wa-stars { font-size: 1.05rem; }
.wa-home-score p { margin: 3px 0 0; font-size: .84rem; color: var(--wa-mute); }
.wa-home-note { display: flex; align-items: baseline; gap: 1px; }
.wa-home-note strong { font-size: 2.1rem; line-height: 1; font-weight: 700; }
.wa-home-note span { font-size: .9rem; color: var(--wa-mute); }

.wa-home-f { display: flex; justify-content: center; margin-top: 26px; }

/* Le bouton qui mène à tous les avis annonce leur nombre : « Voir les 40 avis
   clients » se clique, « Tous les avis » se survole. */
.wa-cta--lg { padding: 14px 26px; font-size: 1rem; gap: .6em; }
.wa-cta--lg svg {
  width: 1.1em; height: 1.1em; fill: none; stroke: currentColor; stroke-width: 2;
  stroke-linecap: round; stroke-linejoin: round;
  transition: transform .25s var(--ease, ease);
}
.wa-cta--lg:hover svg { transform: translateX(4px); }

/* La glissière.

   Le défilement est natif ; le script n'ajoute que le tirer-déplacer à la
   souris et l'état des bords. Les fondus latéraux disent qu'il y a autre
   chose à côté, et s'effacent au bout — un fondu permanent laisse croire à
   un contenu sans fin. */
.wa-railwrap { position: relative; margin-inline: calc(clamp(22px, 5vw, 32px) * -1); }
.wa-railwrap::before,
.wa-railwrap::after {
  content: ''; position: absolute; top: 0; bottom: 16px; width: clamp(28px, 6vw, 72px);
  z-index: 2; pointer-events: none; transition: opacity .25s;
}
.wa-railwrap::before {
  left: 0;
  background: linear-gradient(to right, var(--wa-edge) 14%, color-mix(in srgb, var(--wa-edge) 55%, transparent) 58%, transparent);
}
.wa-railwrap::after {
  right: 0;
  background: linear-gradient(to left, var(--wa-edge) 14%, color-mix(in srgb, var(--wa-edge) 55%, transparent) 58%, transparent);
}
.wa-railwrap.at-start::before { opacity: 0; }
.wa-railwrap.at-end::after { opacity: 0; }
.wa-railwrap.is-still::before,
.wa-railwrap.is-still::after { opacity: 0; }

.wa-rail {
  list-style: none; margin: 0; padding: 4px clamp(22px, 5vw, 32px) 16px;
  display: grid; grid-auto-flow: column; grid-auto-columns: minmax(280px, 330px);
  gap: 18px; overflow-x: auto; scroll-snap-type: x proximity;
  /* SANS CETTE LIGNE, LE REMBOURRAGE NE SERT A RIEN. `scroll-snap-align:start`
     recale la premiere carte sur le bord du CADRE DE DEFILEMENT, qui ignore le
     rembourrage : le navigateur faisait donc defiler le rail de 16 px des le
     chargement, exactement de quoi annuler la gouttiere. Mesure : la carte
     touchait le bord de l'ecran sur telephone. `scroll-padding` dit ou commence
     vraiment le contenu. */
  scroll-padding-inline: clamp(22px, 5vw, 32px);
  scrollbar-width: none; cursor: grab;
}
.wa-rail::-webkit-scrollbar { height: 0; }
.wa-rail.is-grabbing { cursor: grabbing; scroll-snap-type: none; scroll-behavior: auto; }
/* Pendant qu'on tire, le texte ne doit pas se sélectionner sous le curseur. */
.wa-rail.is-grabbing * { user-select: none; }

.wa-card {
  scroll-snap-align: start;
  display: flex; flex-direction: column; gap: 10px;
  padding: 22px; border: 1px solid var(--wa-line); border-radius: var(--wa-r);
  background: var(--wa-surf);
  transition: border-color .2s, transform .2s, box-shadow .2s;
}
.wa-card:hover { transform: translateY(-2px); box-shadow: 0 16px 34px -26px rgba(20, 48, 63, .6); }
.wa-card-h { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.wa-card-h .wa-stars { font-size: 1.02rem; }
.wa-card-h time { font-size: .78rem; color: var(--wa-mute); }
.wa-card :is(h3, .faux-titre) { margin: 0; font-size: 1rem; line-height: 1.35; }

/* Le texte défile dans la carte : couper à trois lignes revenait à publier
   des avis que personne ne finissait. */
.wa-scroll { position: relative; flex: 1; min-height: 0; }
.wa-scroll-in {
  max-height: 9.5em; overflow-y: auto; overscroll-behavior: contain;
  scrollbar-width: thin; padding-right: 4px;
}
.wa-scroll-in::-webkit-scrollbar { width: 4px; }
.wa-scroll-in::-webkit-scrollbar-thumb { background: var(--wa-line); border-radius: 999px; }
.wa-scroll::after {
  content: ''; position: absolute; left: 0; right: 4px; bottom: 0; height: 2.4em;
  pointer-events: none; opacity: 0; transition: opacity .2s;
  background: linear-gradient(to bottom, transparent, var(--wa-surf) 78%);
}
.wa-scroll.is-more::after { opacity: 1; }

.wa-card-c { margin: 0; color: var(--wa-body); font-size: .94rem; line-height: 1.65; }

.wa-card-f {
  display: flex; align-items: center; gap: 8px;
  margin: 0; padding-top: 12px; border-top: 1px solid var(--wa-line);
  font-size: .84rem; color: var(--wa-body);
}

/* Les flèches : elles ne servent qu'à la souris, et s'effacent au bout. */
.wa-arrow {
  position: absolute; top: calc(50% - 8px); transform: translateY(-50%); z-index: 3;
  display: grid; place-items: center; width: 42px; height: 42px;
  border: 1px solid var(--wa-line); border-radius: 50%;
  background: var(--wa-surf); color: var(--wa-title); cursor: pointer;
  box-shadow: 0 8px 22px -14px rgba(20, 48, 63, .8);
  transition: opacity .2s, transform .15s;
}
.wa-arrow svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.wa-arrow:hover { transform: translateY(-50%) scale(1.06); }
.wa-arrow--l { left: 4px; }
.wa-arrow--r { right: 4px; }
.wa-railwrap.at-start .wa-arrow--l,
.wa-railwrap.at-end .wa-arrow--r,
.wa-railwrap.is-still .wa-arrow { opacity: 0; pointer-events: none; }
@media (hover: none) { .wa-arrow { display: none; } }

/* --- page et formulaire ------------------------------------------------- */
.wa-page { max-width: 760px; margin-inline: auto; padding-block: 40px; }
.wa-page-h { text-align: center; margin-bottom: 32px; }
.wa-page-score { margin: 12px 0; }
.wa-page-score .wa-stars { font-size: 1.4rem; }
.wa-page-t { text-align: center; margin-bottom: 8px; }

.wa-page-p {
  display: flex; align-items: center; gap: 14px; justify-content: center;
  margin-bottom: 28px; padding: 14px; border-radius: var(--wa-r); background: var(--wa-plate);
}
.wa-page-p img { border-radius: 8px; object-fit: contain; background: #fff; }

.wa-form { display: grid; gap: 18px; }
.wa-f { display: grid; gap: 6px; }
.wa-f label { font-weight: 600; font-size: .92rem; }
.wa-f label span { font-weight: 400; color: var(--wa-mute); }
.wa-f input, .wa-f textarea {
  width: 100%; padding: 11px 14px; font: inherit;
  border: 1px solid var(--wa-line); border-radius: 10px; background: var(--wa-surf); color: var(--wa-title);
}
.wa-f input:focus, .wa-f textarea:focus { outline: 2px solid var(--wa-acc); outline-offset: 1px; }
.wa-help { margin: 0; font-size: .82rem; color: var(--wa-mute); }

/* Les étoiles cliquables.
   L'ordre du balisage est inversé (5 → 1) parce qu'un sélecteur CSS ne peut
   atteindre que ce qui SUIT : survoler la 4e doit colorer les 3 d'avant. */
.wa-rate { border: 0; padding: 0; margin: 0; text-align: center; }
.wa-rate legend { font-weight: 600; font-size: .92rem; margin-bottom: 8px; }
.wa-rate-in { display: inline-flex; flex-direction: row-reverse; gap: 4px; }
.wa-rate-in input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.wa-rate-in label { cursor: pointer; line-height: 0; }
/* Assez sombres pour qu'on les voie sur le cadre clair : à la couleur du
   filet, elles disparaissaient et le champ semblait vide. */
.wa-rate-in svg {
  width: 42px; height: 42px;
  fill: color-mix(in srgb, var(--wa-mute) 34%, transparent);
  transition: fill .12s, transform .12s;
}
.wa-rate-in label:hover svg { transform: scale(1.08); }
.wa-rate-in input:checked ~ label svg,
.wa-rate-in label:hover svg,
.wa-rate-in label:hover ~ label svg { fill: var(--wa-gold); }
.wa-rate-in input:focus-visible + label svg { outline: 2px solid var(--wa-acc); outline-offset: 2px; }

.wa-verified { font-size: .86rem; color: var(--wa-leaf); margin: 0; }
.wa-legal { font-size: .8rem; color: var(--wa-mute); margin: 0; }

.wa-errors {
  margin: 0 0 18px; padding: 12px 16px 12px 34px; border-radius: 10px;
  background: color-mix(in srgb, #d9534f 10%, transparent); color: #a5322e;
}

.wa-thanks { text-align: center; padding-block: 40px; }
.wa-thanks h1 { margin-bottom: 10px; }
.wa-thanks p { color: var(--wa-body); margin-bottom: 24px; }

.wa-pages { display: flex; gap: 6px; justify-content: center; margin-top: 32px; }
.wa-pages a {
  min-width: 38px; padding: 8px 10px; text-align: center; text-decoration: none;
  border: 1px solid var(--wa-line); border-radius: 8px; color: var(--wa-body);
}
.wa-pages a.is-on { background: var(--wa-title); border-color: var(--wa-title); color: #fff; }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

@media (max-width: 700px) {
  .wa-head { flex-direction: column; align-items: stretch; }
  .wa-home-score { text-align: left; }
  .wa-when { margin-left: 0; width: 100%; }
  .wa-rate-in svg { width: 34px; height: 34px; }
}

/* ==========================================================================
   LA PAGE PUBLIQUE DES AVIS

   Elle répond à « vous êtes sérieux ? » avant qu'on ait fini de lire : la
   note en grand, le nombre, la part de clients satisfaits, la répartition.
   Puis les avis, en tuiles — une colonne de paragraphes sur 1200 px se lit
   mal, et personne ne descend jusqu'au dixième.
   ========================================================================== */
.wa-pub { padding-bottom: clamp(40px, 6vw, 72px); }
.wa-pub-in { max-width: var(--wrap, 1240px); margin-inline: auto; padding-inline: clamp(22px, 5vw, 32px); }

/* --- bandeau ------------------------------------------------------------ */
.wa-hero {
  background: linear-gradient(140deg, var(--wa-plate) 0%, color-mix(in srgb, var(--wa-acc) 8%, var(--wa-plate)) 100%);
  padding-block: clamp(32px, 5vw, 60px);
  margin-bottom: clamp(24px, 4vw, 40px);
}
.wa-hero-in {
  max-width: var(--wrap, 1240px); margin-inline: auto; padding-inline: clamp(22px, 5vw, 32px);
  display: flex; gap: clamp(24px, 4vw, 56px); align-items: center; flex-wrap: wrap;
}
.wa-hero-t { flex: 1 1 340px; }
.wa-hero-t h1 { margin: 0 0 10px; font-size: clamp(1.6rem, 3.4vw, 2.4rem); line-height: 1.15; }
.wa-eyebrow {
  margin: 0 0 6px; font-size: .74rem; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase; color: var(--wa-acc);
}
.wa-hero-p { margin: 0; max-width: 56ch; color: var(--wa-body); line-height: 1.65; }

.wa-hero-score {
  flex: 0 0 auto; text-align: center;
  padding: 22px 30px; border-radius: var(--wa-r);
  background: var(--wa-surf); border: 1px solid var(--wa-line);
  box-shadow: 0 12px 32px -22px rgba(20, 48, 63, .5);
}
.wa-big { display: flex; align-items: baseline; justify-content: center; gap: 2px; }
.wa-big strong { font-size: 3.2rem; line-height: 1; font-weight: 700; }
.wa-big span { font-size: 1.1rem; color: var(--wa-mute); }
.wa-hero-score .wa-stars { font-size: 1.25rem; margin-top: 8px; }
.wa-hero-nb { margin: 8px 0 0; font-size: .88rem; color: var(--wa-mute); }
.wa-hero-reco {
  margin: 12px 0 0; padding-top: 12px; border-top: 1px solid var(--wa-line);
  font-size: .84rem; color: var(--wa-body);
}
.wa-hero-reco strong { color: var(--wa-leaf); font-size: 1rem; }

/* --- répartition cliquable ---------------------------------------------- */
.wa-filter {
  display: grid; gap: 6px; margin-bottom: 26px;
  padding: 18px 20px; border: 1px solid var(--wa-line); border-radius: var(--wa-r);
  background: var(--wa-surf);
}
.wa-fbar {
  display: grid; grid-template-columns: 56px 1fr 44px; align-items: center; gap: 12px;
  padding: 5px 8px; border-radius: 8px; text-decoration: none; color: var(--wa-body);
  font-size: .86rem; transition: background .15s;
}
.wa-fbar:hover { background: var(--wa-plate); color: var(--wa-title); }
.wa-fbar.is-on { background: var(--wa-plate); color: var(--wa-title); font-weight: 600; }
.wa-fbar.is-off { opacity: .45; pointer-events: none; }
.wa-fbar-t { height: 8px; border-radius: 999px; background: var(--wa-line); overflow: hidden; }
.wa-fbar-v { display: block; height: 100%; background: var(--wa-gold); border-radius: 999px; }
.wa-fbar.is-on .wa-fbar-v { background: var(--wa-acc); }
.wa-fbar-n { text-align: right; font-variant-numeric: tabular-nums; color: var(--wa-mute); }

.wa-crumb { margin: -12px 0 20px; font-size: .9rem; color: var(--wa-mute); }

/* --- tuiles ------------------------------------------------------------- */
.wa-grid {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 18px;
}
.wa-tile {
  display: flex; flex-direction: column; gap: 10px;
  padding: 22px 24px; border: 1px solid var(--wa-line); border-radius: var(--wa-r);
  background: var(--wa-surf);
  transition: border-color .2s, transform .2s, box-shadow .2s;
}
.wa-tile:hover { border-color: var(--wa-line); transform: translateY(-2px); box-shadow: 0 14px 30px -24px rgba(20, 48, 63, .55); }
.wa-tile-h { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.wa-tile-h .wa-stars { font-size: 1rem; }
.wa-tile-h time { font-size: .8rem; color: var(--wa-mute); }
.wa-tile-t { margin: 0; font-size: 1.02rem; line-height: 1.35; }
.wa-tile-c { margin: 0; flex: 1; color: var(--wa-body); line-height: 1.65; font-size: .94rem; }

.wa-tile-f {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  margin: 0; padding-top: 14px; border-top: 1px solid var(--wa-line);
  font-size: .86rem;
}
/* Une initiale dans un rond : un visage sans photo, et rien à charger. */
.wa-avatar {
  display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%;
  background: color-mix(in srgb, var(--wa-acc) 14%, transparent); color: var(--wa-acc);
  font-weight: 700; font-size: .85rem; text-transform: uppercase; flex: none;
}

/* --- invitation --------------------------------------------------------- */
.wa-invite {
  display: flex; align-items: center; justify-content: space-between;
  gap: 24px; flex-wrap: wrap; margin-top: 36px;
  padding: 26px 30px; border-radius: var(--wa-r);
  background: var(--wa-plate); border: 1px solid var(--wa-line);
}
.wa-invite h2 { margin: 0 0 4px; font-size: 1.15rem; }
.wa-invite p { margin: 0; color: var(--wa-body); }

@media (max-width: 700px) {
  .wa-hero-in { flex-direction: column; align-items: stretch; }
  .wa-hero-score { width: 100%; }
  .wa-grid { grid-template-columns: 1fr; }
  .wa-invite { flex-direction: column; align-items: stretch; text-align: center; }
  .wa-invite .wa-cta { justify-content: center; }
}

/* ==========================================================================
   LE FORMULAIRE, EN GRAND

   Le client arrive depuis son courrier, souvent sur son téléphone, sans avoir
   demandé à remplir quoi que ce soit. La page se présente donc elle-même :
   pourquoi on lui demande ça, ce qu'on en fera, combien de temps ça prend.
   ========================================================================== */
.wa-page--form { max-width: 720px; }
.wa-page-h { text-align: center; margin-bottom: 26px; }
.wa-page-h h1 { margin: 0 0 10px; font-size: clamp(1.5rem, 3.4vw, 2.1rem); line-height: 1.2; }
.wa-page-lead { margin: 0 auto; max-width: 52ch; color: var(--wa-body); line-height: 1.65; }

/* Ce qu'on promet, avant de demander quoi que ce soit. Un formulaire qui dit
   ce qu'il fait des réponses se remplit mieux. */
.wa-promise {
  list-style: none; margin: 0 0 26px; padding: 16px 20px;
  display: grid; gap: 9px;
  border: 1px solid var(--wa-line); border-radius: var(--wa-r); background: var(--wa-plate);
}
.wa-promise li { display: flex; align-items: center; gap: 10px; font-size: .9rem; color: var(--wa-body); }
.wa-promise svg {
  width: 16px; height: 16px; flex: none;
  fill: none; stroke: var(--wa-leaf); stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round;
}

.wa-page-p {
  display: flex; align-items: center; gap: 16px;
  margin-bottom: 26px; padding: 14px 18px;
  border: 1px solid var(--wa-line); border-radius: var(--wa-r); background: var(--wa-surf);
}
.wa-page-p img { border-radius: 10px; object-fit: contain; background: #fff; flex: none; }
.wa-page-p span { display: block; font-size: .78rem; color: var(--wa-mute); margin-bottom: 2px; }
.wa-page-p a { font-weight: 600; color: var(--wa-title); text-decoration: none; }
.wa-page-p a:hover { color: var(--wa-acc); }

/* La note choisie se dit en toutes lettres : cinq étoiles allumées ne
   confirment pas qu'on a cliqué sur la bonne. */
.wa-rate-say { margin: 8px 0 0; min-height: 1.3em; font-size: .88rem; color: var(--wa-mute); }

.wa-verified { display: flex; align-items: center; gap: 8px; margin: 0; font-size: .88rem; color: var(--wa-leaf); }
.wa-verified svg {
  width: 16px; height: 16px; flex: none;
  fill: none; stroke: currentColor; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round;
}

.wa-thanks-i {
  display: grid; place-items: center; width: 62px; height: 62px; margin: 0 auto 18px;
  border-radius: 50%; background: color-mix(in srgb, var(--wa-leaf) 14%, transparent);
}
.wa-thanks-i svg {
  width: 30px; height: 30px; fill: none; stroke: var(--wa-leaf);
  stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round;
}
.wa-thanks-b { display: flex; gap: 14px; justify-content: center; align-items: center; flex-wrap: wrap; }
.wa-link { color: var(--wa-acc); font-weight: 600; text-decoration: none; }
.wa-link:hover { text-decoration: underline; }
.wa-errors { list-style: none; }

@media (max-width: 700px) {
  .wa-page-p { flex-direction: column; text-align: center; }
  .wa-thanks-b { flex-direction: column; }
  .wa-thanks-b .wa-cta { width: 100%; justify-content: center; }
}

/* ==========================================================================
   LA PAGE PUBLIQUE, VERSION COMPLÈTE

   Boutique et produits au même endroit. Les séparer obligeait le visiteur à
   deviner laquelle des deux pages regarder.
   ========================================================================== */

/* --- les repères du bandeau --------------------------------------------- */
.wa-hero-chips { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 16px; }
.wa-hero-chips span {
  padding: 6px 12px; border-radius: 999px;
  background: var(--wa-surf); border: 1px solid var(--wa-line);
  font-size: .84rem; color: var(--wa-body);
}
.wa-hero-chips b { color: var(--wa-title); }
.wa-hero-chips .is-ok {
  background: color-mix(in srgb, var(--wa-leaf) 10%, transparent);
  border-color: color-mix(in srgb, var(--wa-leaf) 24%, transparent);
  color: var(--wa-leaf);
}
.wa-hero-chips .is-ok b { color: var(--wa-leaf); }

/* --- les filtres --------------------------------------------------------- */
.wa-tools {
  display: flex; gap: 14px; flex-wrap: wrap; align-items: center;
  justify-content: space-between; margin-bottom: 24px;
}
.wa-seg {
  display: inline-flex; gap: 3px; padding: 3px;
  border: 1px solid var(--wa-line); border-radius: 12px; background: var(--wa-plate);
}
.wa-seg a {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 8px 16px; border-radius: 9px; text-decoration: none;
  color: var(--wa-body); font-size: .88rem; font-weight: 600;
}
.wa-seg a:hover { background: var(--wa-surf); color: var(--wa-title); }
.wa-seg a.is-on { background: var(--wa-surf); color: var(--wa-title); box-shadow: 0 1px 4px rgba(20, 48, 63, .12); }
.wa-seg b {
  padding: 1px 7px; border-radius: 999px; background: var(--wa-line);
  color: var(--wa-mute); font-size: .72rem;
}
.wa-seg a.is-on b { background: color-mix(in srgb, var(--wa-acc) 14%, transparent); color: var(--wa-acc); }

.wa-notes { display: flex; gap: 6px; flex-wrap: wrap; }
.wa-notes a {
  padding: 7px 12px; border: 1px solid var(--wa-line); border-radius: 999px;
  text-decoration: none; color: var(--wa-body); font-size: .82rem;
}
.wa-notes a:hover { border-color: var(--wa-mute); }
.wa-notes a.is-on { background: var(--wa-title); border-color: var(--wa-title); color: var(--wa-surf); }

/* --- la vignette produit sur une carte ---------------------------------- */
.wa-tile-p {
  display: flex; align-items: center; gap: 10px;
  margin: -22px -24px 14px; padding: 10px 24px;
  background: var(--wa-plate); border-bottom: 1px solid var(--wa-line);
  text-decoration: none; color: var(--wa-title);
}
.wa-tile-p img { border-radius: 6px; object-fit: contain; background: #fff; flex: none; }
.wa-tile-p span {
  font-size: .8rem; font-weight: 600; line-height: 1.3;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.wa-tile-p:hover span { color: var(--wa-acc); }

.wa-tile-k {
  margin: -22px -24px 14px; padding: 10px 24px;
  background: var(--wa-plate); border-bottom: 1px solid var(--wa-line);
  font-size: .74rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  color: var(--wa-mute);
}

@media (max-width: 700px) {
  .wa-tools { flex-direction: column; align-items: stretch; }
  .wa-seg { width: 100%; }
  .wa-seg a { flex: 1; justify-content: center; padding: 8px 6px; }
  .wa-notes { justify-content: space-between; }
  .wa-top ul { grid-template-columns: 1fr; }
}

/* ==========================================================================
   LE FORMULAIRE, EN DEUX COLONNES

   À gauche pourquoi on demande, à droite ce qu'on demande. Empilés, l'un
   chassait l'autre : le visiteur déroulait un argumentaire avant d'atteindre
   le premier champ, et beaucoup s'arrêtaient là.
   ========================================================================== */
.wa-page--duo { max-width: var(--wrap, 1240px); }

.wa-duo {
  display: grid; gap: clamp(24px, 4vw, 56px);
  grid-template-columns: minmax(280px, 1fr) minmax(340px, 1.15fr);
  align-items: start;
}

.wa-duo-l { position: sticky; top: 24px; }
.wa-duo-l h1 { margin: 0 0 12px; font-size: clamp(1.6rem, 3.2vw, 2.3rem); line-height: 1.15; }
.wa-duo-l .wa-page-lead { margin: 0 0 24px; max-width: none; text-align: left; }

/* La carte du formulaire : surélevée, avec un filet coloré en tête. C'est
   elle qu'on doit voir en arrivant. */
.wa-duo-r {
  position: relative; overflow: hidden;
  padding: clamp(24px, 3vw, 36px);
  border: 1px solid var(--wa-line); border-radius: var(--wa-r);
  background: var(--wa-surf);
  box-shadow: 0 26px 60px -40px rgba(20, 48, 63, .55);
}
.wa-duo-r::before {
  content: ''; position: absolute; inset: 0 0 auto; height: 4px;
  background: linear-gradient(90deg, var(--wa-gold), var(--wa-acc));
}

.wa-page--duo .wa-promise { margin-bottom: 0; }
.wa-page--duo .wa-page-p { background: var(--wa-plate); }

/* Les étoiles du formulaire : plus grandes, et centrées dans leur cadre. */
.wa-page--duo .wa-rate {
  padding: 18px; margin-bottom: 4px;
  border: 1px solid var(--wa-line); border-radius: var(--wa-r); background: var(--wa-plate);
}
.wa-page--duo .wa-rate legend { padding: 0 8px; }

@media (max-width: 900px) {
  .wa-duo { grid-template-columns: 1fr; }
  .wa-duo-l { position: static; text-align: center; }
  .wa-duo-l .wa-page-lead { text-align: center; margin-inline: auto; max-width: 52ch; }
  .wa-duo-l .wa-promise { text-align: left; }
  .wa-page--duo .wa-page-p { flex-direction: row; text-align: left; }
}

/* --- le bandeau d'aperçu ------------------------------------------------- */
.wa-preview-flag {
  margin: 0 0 20px; padding: 10px 16px; border-radius: 10px;
  background: color-mix(in srgb, var(--wa-acc) 12%, transparent);
  border: 1px dashed color-mix(in srgb, var(--wa-acc) 40%, transparent);
  color: var(--wa-acc); font-size: .86rem; text-align: center;
}

/* ==========================================================================
   LA NOTE EST OBLIGATOIRE, ET ÇA SE VOIT

   Cinq étoiles grises au milieu d'un formulaire ne ressemblent à rien : ni à
   un champ, ni à un bouton. Tant que rien n'est choisi, elles respirent — un
   mouvement lent, l'une après l'autre, qui dit « c'est ici que ça commence ».
   Le mouvement s'arrête net au premier clic : une animation qui continue après
   avoir été comprise devient une nuisance.
   ========================================================================== */
.wa-rate legend em {
  font-style: normal; font-size: .72rem; font-weight: 700;
  letter-spacing: .06em; text-transform: uppercase;
  color: var(--wa-acc); margin-left: 6px;
}

@keyframes wa-wink {
  0%, 70%, 100% { transform: translateY(0) scale(1); }
  35%           { transform: translateY(-4px) scale(1.12); }
}

.wa-rate:not(.is-set) .wa-rate-in label svg { animation: wa-wink 2.4s ease-in-out infinite; }
/* Le balisage est inversé (5 → 1) : les délais le sont donc aussi, pour que
   la vague parte bien de la première étoile. */
.wa-rate:not(.is-set) .wa-rate-in label:nth-of-type(5) svg { animation-delay: 0s; }
.wa-rate:not(.is-set) .wa-rate-in label:nth-of-type(4) svg { animation-delay: .12s; }
.wa-rate:not(.is-set) .wa-rate-in label:nth-of-type(3) svg { animation-delay: .24s; }
.wa-rate:not(.is-set) .wa-rate-in label:nth-of-type(2) svg { animation-delay: .36s; }
.wa-rate:not(.is-set) .wa-rate-in label:nth-of-type(1) svg { animation-delay: .48s; }

.wa-rate.is-set .wa-rate-in label svg { animation: none; }

/* Le formulaire envoyé sans note : un rappel qu'on ne peut pas manquer. */
@keyframes wa-shake {
  10%, 90% { transform: translateX(-2px); }
  20%, 80% { transform: translateX(4px); }
  30%, 50%, 70% { transform: translateX(-6px); }
  40%, 60% { transform: translateX(6px); }
}
.wa-rate.is-missing { animation: wa-shake .5s both; border-color: #d9534f; }
.wa-rate.is-missing .wa-rate-say { color: #d9534f; font-weight: 600; }

@media (prefers-reduced-motion: reduce) {
  .wa-rate .wa-rate-in label svg,
  .wa-rate.is-missing { animation: none !important; }
}

/* ==========================================================================
   CORRECTIONS DE LA PAGE PUBLIQUE
   ========================================================================== */

/* « 8 avis » passait à la ligne et débordait de sa carte : la ligne d'étoiles
   ne se coupe plus, et le nom au-dessus se charge de l'espace manquant. */
.wa-top a { align-items: flex-start; }
.wa-top-s { flex-wrap: nowrap; white-space: nowrap; }
.wa-top-s em { font-size: .74rem; }
.wa-top-n { font-size: .84rem; }

/* Les en-têtes de carte avaient deux hauteurs — une vignette produit d'un
   côté, un simple mot de l'autre — et les cartes ne s'alignaient plus. */
.wa-tile-p,
.wa-tile-k {
  display: flex; align-items: center; gap: 10px;
  min-height: 58px; box-sizing: border-box;
}
.wa-tile-k { color: var(--wa-mute); }

/* ==========================================================================
   UNE COMMANDE, PLUSIEURS PRODUITS
   ========================================================================== */
.wa-lot { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }

.wa-lot-i > details {
  border: 1px solid var(--wa-line); border-radius: var(--wa-r);
  background: var(--wa-surf); overflow: hidden;
}
.wa-lot-i > details[open] { box-shadow: 0 20px 44px -34px rgba(20, 48, 63, .6); }

.wa-lot-i summary {
  display: flex; align-items: center; gap: 14px;
  padding: 14px 18px; cursor: pointer; list-style: none;
}
.wa-lot-i summary::-webkit-details-marker { display: none; }
.wa-lot-i summary:hover { background: var(--wa-plate); }
.wa-lot-i img { border-radius: 8px; object-fit: contain; background: #fff; flex: none; }

.wa-lot-n {
  flex: 1; min-width: 0; font-weight: 600; color: var(--wa-title); line-height: 1.35;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}

.wa-lot-go {
  flex: none; padding: 7px 14px; border-radius: var(--wa-r-btn);
  background: var(--wa-cta-bg); color: var(--wa-cta-fg);
  font-size: .82rem; font-weight: 600; white-space: nowrap;
}
.wa-lot-ok {
  flex: none; display: flex; align-items: center; gap: 6px;
  font-size: .82rem; font-weight: 600; color: var(--wa-leaf); white-space: nowrap;
}
.wa-lot-ok svg {
  width: 15px; height: 15px; fill: none; stroke: currentColor;
  stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round;
}

.wa-lot-i details.is-done summary { cursor: default; opacity: .62; }
.wa-lot-i details.is-done .wa-lot-n { text-decoration: line-through; text-decoration-color: var(--wa-line); }

.wa-lot-f { padding: 4px 18px 20px; border-top: 1px solid var(--wa-line); }

/* Le mot de remerciement entre deux avis. */
.wa-flash {
  display: flex; align-items: center; gap: 10px;
  margin: 0 0 20px; padding: 12px 16px; border-radius: var(--wa-r);
  background: color-mix(in srgb, var(--wa-leaf) 12%, transparent);
  color: var(--wa-leaf); font-weight: 600;
}
.wa-flash svg {
  width: 18px; height: 18px; flex: none; fill: none; stroke: currentColor;
  stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round;
}

@media (max-width: 700px) {
  .wa-lot-i summary { flex-wrap: wrap; }
  .wa-lot-go, .wa-lot-ok { width: 100%; justify-content: center; text-align: center; }
}

/* ==========================================================================
   LES PRODUITS LES MIEUX NOTÉS

   Des cartes verticales : l'image a la place de se voir, le nom celle de tenir
   sur deux lignes, la note celle de se lire. En rangée, image et texte se
   disputaient la même ligne et « 8 avis » finissait hors de la carte.

   Le numéro de rang est le seul ornement : il dit pourquoi ces quatre
   produits-là sont montrés, ce qu'un simple alignement ne dit pas.
   ========================================================================== */
.wa-top { margin-bottom: 34px; }

.wa-top-h { margin-bottom: 16px; }
.wa-top-h h2 { margin: 0; font-size: clamp(1.1rem, 2vw, 1.35rem); }
.wa-top-h p { margin: 3px 0 0; font-size: .86rem; color: var(--wa-mute); }

.wa-top ul {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 16px;
}

.wa-top a {
  display: flex; flex-direction: column; height: 100%; overflow: hidden;
  border: 1px solid var(--wa-line); border-radius: var(--wa-r);
  background: var(--wa-surf); text-decoration: none; color: inherit;
  transition: border-color .2s, transform .2s, box-shadow .2s;
}
.wa-top a:hover {
  transform: translateY(-3px); border-color: color-mix(in srgb, var(--wa-acc) 45%, var(--wa-line));
  box-shadow: 0 20px 40px -30px rgba(20, 48, 63, .7);
}

.wa-top-v {
  position: relative; display: block; aspect-ratio: 4 / 3;
  background: var(--wa-plate); overflow: hidden;
}
.wa-top-v img {
  width: 100%; height: 100%; object-fit: contain; padding: 12px;
  transition: transform .4s var(--ease, ease);
}
.wa-top a:hover .wa-top-v img { transform: scale(1.05); }

/* Le rang, en pastille : il dit pourquoi ces quatre produits sont là. */
.wa-top-r {
  position: absolute; top: 10px; left: 10px;
  display: grid; place-items: center; width: 26px; height: 26px;
  border-radius: 50%; background: var(--wa-title); color: var(--wa-surf);
  font-size: .78rem; font-weight: 700; line-height: 1;
}

.wa-top-b { display: flex; flex-direction: column; gap: 8px; padding: 14px 16px 16px; flex: 1; }

.wa-top-n {
  font-size: .9rem; font-weight: 600; color: var(--wa-title); line-height: 1.35;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}

.wa-top-s {
  display: flex; align-items: center; gap: 7px; flex-wrap: wrap;
  margin-top: auto; padding-top: 10px; border-top: 1px solid var(--wa-line);
  font-size: .8rem;
}
.wa-top-s .wa-stars { font-size: .86rem; }
.wa-top-s b { color: var(--wa-title); font-size: .88rem; }
.wa-top-s em { font-style: normal; color: var(--wa-mute); margin-left: auto; }

@media (max-width: 640px) {
  .wa-top ul { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .wa-top-b { padding: 12px; }
  .wa-top-s em { margin-left: 0; width: 100%; }
}

/* ==========================================================================
   « MES AVIS », DANS LE COMPTE CLIENT

   Ce qui reste à noter d'abord, en évidence. Un client venu voir ses avis est
   disponible : lui montrer ce qu'il a oublié vaut mieux qu'un courrier de
   relance de plus.

   Les états sont dits franchement, « non publié » compris. Laisser croire
   qu'un avis est en ligne alors qu'il ne l'est pas se retourne toujours
   contre la boutique le jour où le client le cherche.
   ========================================================================== */
.wa-mine { max-width: 900px; }

.wa-mine-k {
  display: flex; align-items: center; gap: 18px; flex-wrap: wrap;
  margin-bottom: 26px; padding: 14px 20px;
  border: 1px solid var(--wa-line); border-radius: var(--wa-r); background: var(--wa-surf);
  font-size: .88rem; color: var(--wa-body);
}
.wa-mine-k b { color: var(--wa-title); font-size: 1.15rem; }
.wa-mine-k .is-todo b { color: var(--wa-acc); }
.wa-mine-k a { margin-left: auto; color: var(--wa-acc); font-weight: 600; text-decoration: none; }

.wa-mine-o {
  margin-bottom: 20px; border: 1px solid var(--wa-line);
  border-radius: var(--wa-r); background: var(--wa-surf); overflow: hidden;
}
.wa-mine-o > header {
  display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap;
  padding: 13px 20px; background: var(--wa-plate); border-bottom: 1px solid var(--wa-line);
}
.wa-mine-o > header strong { font-size: .94rem; }
.wa-mine-o > header span { font-size: .82rem; color: var(--wa-mute); margin-left: 8px; }

.wa-mine-l { list-style: none; margin: 0; padding: 0; }
.wa-mine-i {
  display: flex; gap: 16px; padding: 16px 20px;
  border-bottom: 1px solid var(--wa-line);
}
.wa-mine-i:last-child { border-bottom: 0; }
/* Ce qui reste à faire se voit : un liseré, pas une couleur de fond qui
   crierait au problème là où il n'y en a pas. */
.wa-mine-i.is-todo { box-shadow: inset 3px 0 0 var(--wa-acc); }

.wa-mine-v { flex: none; display: block; width: 52px; height: 52px; }
.wa-mine-v img { width: 52px; height: 52px; border-radius: 8px; object-fit: contain; background: var(--wa-plate); }
.wa-mine-v--shop {
  display: grid; place-items: center; border-radius: 8px;
  background: color-mix(in srgb, var(--wa-acc) 12%, transparent);
}
.wa-mine-v--shop svg {
  width: 24px; height: 24px; fill: none; stroke: var(--wa-acc);
  stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round;
}

.wa-mine-b { flex: 1; min-width: 0; }
.wa-mine-n {
  display: block; font-weight: 600; color: var(--wa-title); line-height: 1.35;
  text-decoration: none; margin-bottom: 6px;
}
a.wa-mine-n:hover { color: var(--wa-acc); }

.wa-mine-a { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 6px; }
.wa-mine-a .wa-stars { font-size: .92rem; }
.wa-mine-a time { font-size: .8rem; color: var(--wa-mute); }

.wa-tag {
  padding: 2px 9px; border-radius: 999px;
  font-size: .72rem; font-weight: 700; letter-spacing: .02em;
  background: var(--wa-plate); color: var(--wa-mute);
}
.wa-tag--published { background: color-mix(in srgb, var(--wa-leaf) 13%, transparent); color: var(--wa-leaf); }
.wa-tag--pending,
.wa-tag--arbitration { background: color-mix(in srgb, var(--wa-acc) 13%, transparent); color: var(--wa-acc); }
.wa-tag--refused { background: var(--wa-plate); color: var(--wa-mute); }

.wa-mine-t { margin: 0 0 4px; font-weight: 600; font-size: .92rem; }
.wa-mine-c { margin: 0; color: var(--wa-body); font-size: .9rem; line-height: 1.6; }

.wa-mine-go {
  display: inline-flex; align-items: center; gap: .4em;
  padding: 8px 16px; border-radius: var(--wa-r-btn);
  background: var(--wa-cta-bg); color: var(--wa-cta-fg);
  font-size: .84rem; font-weight: 600; text-decoration: none;
}
.wa-mine-go:hover { color: var(--wa-cta-fg); opacity: .9; }

/* La pastille du compte client : le nombre qui reste à noter. */
#wa-account-link .wa-account-n {
  display: inline-grid; place-items: center; min-width: 20px; height: 20px;
  margin-left: 6px; padding: 0 6px; border-radius: 999px;
  background: var(--accent, #25b9d7); color: #fff;
  font-size: .72rem; font-weight: 700;
}

@media (max-width: 700px) {
  .wa-mine-k a { margin-left: 0; width: 100%; }
  .wa-mine-i { flex-direction: column; gap: 12px; }
  .wa-mine-go { width: 100%; justify-content: center; }
}

/* --------------------------------------------------------------------------
   La ligne d'avis de la fiche produit

   Étoiles, note chiffrée, puis le nombre d'avis EN LIEN vers la section. Le
   gabarit `stars.tpl` des vignettes reste inchangé : sur une carte, cette
   ligne prendrait deux lignes et volerait la place du nom.
   -------------------------------------------------------------------------- */
.wa-pdp { display: inline-flex; align-items: center; gap: .5em; flex-wrap: wrap; font-size: .9rem; }
.wa-pdp-note { font-weight: 700; font-variant-numeric: tabular-nums; }
.wa-pdp-sep { color: var(--muted, #6b7f8c); }
.wa-pdp-lien { color: inherit; text-underline-offset: 3px; }
.wa-pdp-lien:hover { color: var(--accent, #1b6ec2); }

/* ------------------------------------------------------------------
   LES AVIS EN BANDE

   Deuxieme presentation possible sur une fiche produit — voir le reglage
   « Presentation sur la fiche produit ». La liste reste le defaut : elle dit
   tout. La bande dit moins, mais ne mange pas la page.

   Le defilement est celui du navigateur, avec accrochage. Pas de transformation
   calculee en JavaScript : le glissement au doigt, la molette horizontale, la
   tabulation au clavier et la barre de defilement fonctionnent alors sans une
   ligne de plus, et rien ne se desynchronise si une carte change de hauteur.
   ------------------------------------------------------------------ */

.wa-voie { position: relative; }

.wa-list--rang {
  display: flex;
  gap: 16px;
  margin: 0;
  padding: 4px 2px 14px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  list-style: none;

  /* PAS DE BARRE SOUS LA BANDE. Les deux fleches disent deja qu'on peut
     avancer, et une barre de defilement sous quatre cartes se lit comme un
     defaut de mise en page.

     Les deux ecritures cohabitent SANS SE GENER, contrairement au cas ou l'on
     habille une barre : ici la propriete normalisee suffit aux moteurs qui la
     connaissent, et le pseudo-element sert ceux d'avant. Aucun des deux ne
     dessine quoi que ce soit. */
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.wa-list--rang::-webkit-scrollbar { width: 0; height: 0; }

.wa-list--rang > .wa-item {
  flex: 0 0 clamp(240px, 30%, 340px);
  scroll-snap-align: start;
  padding: 16px 18px;
  border: 1px solid var(--wa-line);
  border-radius: var(--wa-r);
  background: var(--wa-surf);
}

/* Dans une bande, un avis long ferait une carte deux fois plus haute que ses
   voisines. On borne, et l'on annonce la coupe par un degrade plutot que par
   des points de suspension qui se liraient comme du texte. */
/* LE TEXTE EST BORNE, PAS PERDU.
   Dans une bande, un avis long ferait une carte deux fois plus haute que ses
   voisines. On le coupe donc — et l'on donne le moyen de l'ouvrir, sinon la
   coupe est une porte fermee. La carte grandit sur place ; ses voisines ne
   bougent pas, la rangee etant alignee par le haut. */
.wa-list--rang .wa-item-c {
  position: relative;
  max-height: 7.6em;
  overflow: hidden;
}
.wa-list--rang .wa-item-c::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 2em;
  background: linear-gradient(to bottom, transparent, var(--wa-surf));
}
.wa-list--rang .wa-item.is-ouvert .wa-item-c { max-height: none; }
.wa-list--rang .wa-item.is-ouvert .wa-item-c::after { display: none; }

.wa-plus {
  margin-top: 8px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--wa-acc);
  font: inherit;
  font-size: .92em;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}
.wa-plus[hidden] { display: none; }

.wa-fleche {
  position: absolute;
  top: 50%;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  transform: translateY(-50%);
  border: 1px solid var(--wa-line);
  border-radius: 50%;
  background: var(--wa-surf);
  color: var(--wa-acc);
  cursor: pointer;
}
.wa-fleche svg { width: 20px; height: 20px; }
.wa-fleche--avant { left: -20px; }
.wa-fleche--apres { right: -20px; }
.wa-fleche:hover { background: var(--wa-plate); }

/* AU BOUT DE LA BANDE, LA FLECHE S'EFFACE — elle ne disparait pas. La retirer
   ferait sauter la rangee d'un cran a chaque extremite atteinte. */
.wa-fleche[disabled] { opacity: .28; cursor: default; }

/* Le doigt fait deja glisser, et le clavier atteint les cartes par la
   tabulation : deux commandes de plus n'apporteraient rien sur un telephone. */
@media (max-width: 720px) {
  .wa-fleche { display: none; }
  .wa-list--rang > .wa-item { flex-basis: 82%; }
}