/**
 * ------------------------------------------------------------------------
 * AVIS CLIENTS - styles
 * ------------------------------------------------------------------------
 *
 * Bloc d'avis (fiche produit + modale tissu du calculateur), page
 * « Donner mon avis », visionneuse de photos. Reprise de la maquette
 * validée le 2026-10-16, variables de charte du thème (main.css).
 * Mise en page par requêtes de conteneur : le même bloc s'adapte à
 * l'onglet de la fiche produit comme à la colonne étroite de la modale.
 *
 * Références reprises à l'identique :
 * - boutons : .btn / .btn--primary / .btn--outline (thème, main.css)
 * - bouton de fermeture : .exit-modal__close (thème, main.css) — toute
 *   évolution doit être répercutée ici (.blr-viewer__close)
 * - étoiles : tracé et couleur du bloc confiance du footer (footer.php)
 *
 * @author  Pietro Giacomini
 * @package BlondeauTextile
 * @file    reviews.css
 * @version 1.1.1 — focus clavier unifié : bord or foncé + halo or collé, comme les champs (DETTE-398) — 2026-10-23
 * @version 1.1.0 — champs de formulaire : contour au seuil 3:1, focus contour or foncé + halo or (DETTE-391) — 2026-10-23
 * @version 1.0.3 — tri : pastille commune .blondeau-sort (thème), identique au catalogue — 2026-10-17
 * @version 1.0.2 — « Aucun avis » sur toute la largeur (largeur bridée à 520px retirée) — 2026-10-16
 * @version 1.0.1 — texte des avis sur toute la largeur, icônes des tags, page du formulaire sous le fil d’Ariane — 2026-10-16
 * @version 1.0.0 — création, système d'avis option C — 2026-10-16
 * ------------------------------------------------------------------------
 */

/* ── Bloc ─────────────────────────────────────────────────────────────── */
.blr {
  container-type: inline-size;
  color: var(--color-text, #1E1E1E);
}

.blr p { margin: 0; }

/* Le thème limite p et li à 70ch (main.css « p, li, figcaption ») : les
 * lignes de la liste et de la répartition doivent occuper toute la largeur.
 * La longueur de lecture du texte d'avis reste limitée (.blr-item__text). */
.blr li,
.blr-page li,
.blr p,
.blr-field__hint { max-width: none; }

/* Étoiles décoratives : la note est toujours écrite en texte à côté */
.blr-stars {
  display: inline-flex;
  gap: 2px;
  vertical-align: middle;
}
.blr-stars svg {
  width: var(--blr-star, 16px);
  height: var(--blr-star, 16px);
}
.blr-stars .is-on { fill: var(--color-accent, #CCA63B); }
.blr-stars .is-off {
  fill: none;
  stroke: var(--color-border-dark, #C8C3BA);
  stroke-width: 1.5;
}

/* ── Résumé : note, répartition, appel à l'avis ───────────────────────── */
.blr-summary {
  display: grid;
  gap: var(--space-6, 24px);
  padding-bottom: var(--space-6, 24px);
  border-bottom: 1px solid var(--color-border, #E5E1D8);
}
@container (min-width: 760px) {
  .blr-summary {
    grid-template-columns: minmax(180px, 220px) minmax(0, 1fr) minmax(220px, 300px);
    gap: var(--space-8, 32px);
    align-items: start;
  }
}

.blr-score { display: grid; gap: 6px; align-content: start; }
.blr-score__value { line-height: 1; color: var(--color-primary, #1C1F3B); }
.blr-score__num {
  font-size: 2.75rem;
  font-weight: var(--font-weight-bold, 700);
  font-variant-numeric: tabular-nums;
}
.blr-score__max {
  font-size: 1.125rem;
  font-weight: var(--font-weight-medium, 500);
  color: var(--color-text-muted, #595959);
}
.blr-score__count {
  font-size: var(--font-size-sm, 0.875rem);
  color: var(--color-text-muted, #595959);
}

.blr-bars {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 4px;
  min-width: 0;
}
.blr-bar {
  display: grid;
  grid-template-columns: 4.5em minmax(0, 1fr) 3em;
  gap: 10px;
  align-items: center;
  width: 100%;
  min-height: 32px;
  padding: 4px 8px;
  border: 0;
  border-radius: var(--radius-md, 0.375rem);
  background: none;
  color: inherit;
  font: inherit;
  font-size: var(--font-size-sm, 0.875rem);
  text-align: left;
  cursor: pointer;
  transition: background-color .2s ease;
}
.blr-bar:hover:not(:disabled),
.blr-bar[aria-pressed="true"] { background: var(--color-bg-alt, #F8F7F5); }
.blr-bar[aria-pressed="true"] { font-weight: var(--font-weight-semibold, 600); }
.blr-bar:disabled { cursor: default; }
.blr-bar__track {
  height: 8px;
  border-radius: 99px;
  background: var(--color-border, #E5E1D8);
  overflow: hidden;
}
.blr-bar__track span {
  display: block;
  height: 100%;
  border-radius: 99px;
  background: var(--color-accent, #CCA63B);
}
.blr-bar__count {
  text-align: right;
  font-variant-numeric: tabular-nums;
  color: var(--color-text-muted, #595959);
}

.blr-cta { display: grid; gap: var(--space-3, 12px); align-content: start; }
.blr-cta__text {
  font-size: var(--font-size-sm, 0.875rem);
  color: var(--color-text-muted, #595959);
}
.blr-cta__btn { justify-self: start; }

/* Mention « avis contrôlés » (information légale) */
.blr-controlled {
  font-size: var(--font-size-xs, 0.75rem);
  color: var(--color-text-muted, #595959);
  background: var(--color-bg-alt, #F8F7F5);
  border-radius: var(--radius-md, 0.375rem);
}
.blr-controlled summary {
  display: flex;
  gap: 8px;
  align-items: center;
  min-height: 36px;
  padding: 8px 12px;
  cursor: pointer;
  font-weight: var(--font-weight-semibold, 600);
  color: var(--color-primary, #1C1F3B);
  list-style: none;
}
.blr-controlled summary::-webkit-details-marker { display: none; }
.blr-controlled summary svg { flex: none; color: var(--color-success, #16A34A); }
.blr-controlled summary::after {
  content: "";
  width: 7px;
  height: 7px;
  margin-left: auto;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg) translateY(-2px);
  transition: transform .2s ease;
}
.blr-controlled[open] summary::after { transform: rotate(-135deg) translateY(-2px); }
.blr-controlled p { padding: 0 12px 12px; line-height: 1.55; }

/* ── Aucun avis ───────────────────────────────────────────────────────── */
/* Pleine largeur, comme le texte des avis (largeur bridée = texte coupé en colonne, 2026-10-16) */
.blr-empty { display: grid; gap: var(--space-4, 16px); }
.blr-empty__text { color: var(--color-text-muted, #595959); }

/* ── Filtres et tri ───────────────────────────────────────────────────── */
.blr-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3, 12px);
  align-items: center;
  justify-content: space-between;
  padding-block: var(--space-5, 20px);
}
.blr-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.blr-chip {
  min-height: 36px;
  padding: 6px 14px;
  border: 1px solid var(--color-border-dark, #C8C3BA);
  border-radius: 999px;
  background: var(--color-bg, #FFFFFF);
  color: var(--color-text, #1E1E1E);
  font: inherit;
  font-size: var(--font-size-sm, 0.875rem);
  font-weight: var(--font-weight-medium, 500);
  cursor: pointer;
  transition: background-color .2s ease, border-color .2s ease, color .2s ease;
}
.blr-chip:hover { border-color: var(--color-primary, #1C1F3B); }
.blr-chip[aria-pressed="true"] {
  background: var(--color-primary, #1C1F3B);
  border-color: var(--color-primary, #1C1F3B);
  color: var(--color-text-inverse, #FFFFFF);
}
/* Tri : pastille commune .blondeau-sort (main.css du thème), identique au
   catalogue et aux tissus du calculateur — 2026-10-17. Ici, seul le
   placement dans la barre ; l'ancien select (contour grège 1px, libellé
   « Trier par » visible) est remplacé par ce modèle. */
.blr-sort {
  display: flex;
  min-width: 0;
  max-width: 100%;
}

/* ── Liste ────────────────────────────────────────────────────────────── */
.blr-list { list-style: none; margin: 0; padding: 0; }
.blr-item {
  display: grid;
  gap: var(--space-3, 12px);
  padding-block: var(--space-6, 24px);
  border-top: 1px solid var(--color-border, #E5E1D8);
  animation: blr-appear .35s ease both;
}
@container (min-width: 620px) {
  .blr-item { grid-template-columns: 170px minmax(0, 1fr); gap: var(--space-3, 12px) var(--space-8, 32px); }
}
@keyframes blr-appear {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: none; }
}

.blr-item__who {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 12px;
  align-items: baseline;
  align-content: start;
  font-size: var(--font-size-sm, 0.875rem);
}
@container (min-width: 620px) {
  .blr-item__who { display: grid; gap: 4px; }
}
.blr-item__name { font-weight: var(--font-weight-semibold, 600); color: var(--color-primary, #1C1F3B); }
.blr-verified {
  display: inline-flex;
  gap: 5px;
  align-items: center;
  font-size: var(--font-size-xs, 0.75rem);
  font-weight: var(--font-weight-semibold, 600);
  color: var(--color-norme-ok-text, #166534);
}
.blr-item__date { color: var(--color-text-muted, #595959); }

.blr-item__body { display: grid; gap: 10px; min-width: 0; }
.blr-item__head { display: flex; flex-wrap: wrap; gap: 6px 12px; align-items: center; }
.blr-item__title {
  margin: 0;
  font-size: var(--font-size-base, 1rem);
  font-weight: var(--font-weight-semibold, 600);
  color: var(--color-primary, #1C1F3B);
}
/* Ancienne limite 68ch retirée (2026-10-16) : le texte occupe toute la colonne */
.blr-item__text { /* max-width: 68ch; */ line-height: 1.6; overflow-wrap: anywhere; }
.blr-item__text p + p { margin-top: .6em; }

.blr-config {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.blr-config li {
  display: inline-flex;
  gap: 5px;
  align-items: center;
  padding: 2px 8px;
  border: 1px solid var(--color-border, #E5E1D8);
  border-radius: var(--radius-md, 0.375rem);
  background: var(--color-bg-alt, #F8F7F5);
  font-size: var(--font-size-xs, 0.75rem);
  color: var(--color-text-muted, #595959);
}
/* Icônes du jeu commun (icon-set.php), taille des lignes du panier */
.blr-config__icon { flex: none; width: 14px; height: 14px; }
.blr-config li:first-child { color: var(--color-primary, #1C1F3B); font-weight: var(--font-weight-semibold, 600); }

.blr-photos { display: flex; flex-wrap: wrap; gap: 8px; }
.blr-photo {
  width: 76px;
  height: 76px;
  padding: 0;
  border: 1px solid var(--color-border, #E5E1D8);
  border-radius: var(--radius-md, 0.375rem);
  background: var(--color-bg-alt, #F8F7F5);
  overflow: hidden;
  cursor: zoom-in;
}
.blr-photo img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .3s ease; }
.blr-photo:hover img { transform: scale(1.05); }

.blr-reply {
  display: grid;
  gap: 4px;
  /* max-width: 68ch; — toute la largeur, comme le texte de l’avis (2026-10-16) */
  padding: 12px 14px;
  border-left: 3px solid var(--color-accent, #CCA63B);
  border-radius: 0 var(--radius-md, 0.375rem) var(--radius-md, 0.375rem) 0;
  background: var(--color-bg-alt, #F8F7F5);
  font-size: var(--font-size-sm, 0.875rem);
  line-height: 1.55;
}
.blr-reply__label {
  font-size: var(--font-size-xs, 0.75rem);
  font-weight: var(--font-weight-semibold, 600);
  color: var(--color-accent-text, #866A1E);
}

.blr-filter-empty {
  padding-block: var(--space-6, 24px);
  border-top: 1px solid var(--color-border, #E5E1D8);
  color: var(--color-text-muted, #595959);
}
.blr-more {
  display: flex;
  justify-content: center;
  padding-top: var(--space-4, 16px);
  border-top: 1px solid var(--color-border, #E5E1D8);
}

/* Modale tissu du calculateur : bloc compact */
.blr--modal .blr-score__num { font-size: 2.25rem; }

/* ── Visionneuse de photos ────────────────────────────────────────────── */
.blr-viewer {
  max-width: min(92vw, 960px);
  max-height: 92vh;
  padding: var(--space-10, 40px) var(--space-4, 16px) var(--space-4, 16px);
  border: 0;
  border-radius: var(--radius-xl, 0.75rem);
  background: var(--color-bg, #FFFFFF);
}
.blr-viewer::backdrop { background: var(--color-overlay, rgba(8, 8, 10, 0.95)); }
.blr-viewer[open] { animation: blr-appear .25s ease both; }
.blr-viewer img { display: block; max-width: 100%; max-height: calc(92vh - 80px); margin: 0 auto; border-radius: var(--radius-md, 0.375rem); }
/* Reprise exacte de .exit-modal__close (main.css) */
.blr-viewer__close {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 36px;
  height: 36px;
  border: none;
  background: transparent;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-text-muted, #6B7280);
  transition: background var(--transition-fast), color var(--transition-fast);
}
.blr-viewer__close:hover {
  background: var(--color-bg-alt, #f5f5f3);
  color: var(--color-primary, #1C1F3B);
}

/* ── Page « Donner mon avis » ─────────────────────────────────────────── */
.blr-page {
  container-type: inline-size;
  display: grid;
  gap: var(--space-6, 24px);
  /* Sous le fil d’Ariane (.blondeau-breadcrumb) : espacement des pages */
  padding-block: var(--space-5, 20px) var(--space-16, 64px); /* = écart fil d’Ariane / titre de « Mon compte » */
}
.blr-page__title {
  margin: 0;
  font-size: clamp(1.5rem, 3vw, 2rem);
  color: var(--color-primary, #1C1F3B);
  text-wrap: balance;
}
.blr-page__grid { display: grid; gap: var(--space-8, 32px); align-items: start; }
@container (min-width: 820px) {
  .blr-page__grid { grid-template-columns: minmax(0, 1fr) minmax(240px, 320px); }
}
@container (max-width: 819px) {
  .blr-order { order: -1; }
}

.blr-state {
  display: grid;
  gap: var(--space-3, 12px);
  max-width: 620px;
  padding: var(--space-6, 24px);
  border: 1px solid var(--color-border, #E5E1D8);
  border-radius: var(--radius-lg, 0.5rem);
  background: var(--color-bg-alt, #F8F7F5);
}
.blr-state--success { border-color: var(--color-norme-ok-border, #86efac); background: var(--color-norme-ok-bg, #f0fdf4); }
.blr-state--warning { border-color: var(--color-norme-m1-border, #fbbf24); background: var(--color-norme-m1-bg, #fff8ec); }
.blr-state__title { margin: 0; font-size: var(--font-size-xl, 1.5rem); color: var(--color-primary, #1C1F3B); }
.blr-state__title:focus { outline: none; }

.blr-form { display: grid; gap: var(--space-6, 24px); min-width: 0; }
.blr-form__errors ul { margin: 6px 0 0; padding-left: 1.2em; }
.blr-form__errors a { color: inherit; }
.blr-field { display: grid; gap: 6px; min-width: 0; margin: 0; padding: 0; border: 0; }
.blr-field__label {
  padding: 0;
  margin-bottom: 4px;
  font-size: var(--font-size-sm, 0.875rem);
  font-weight: var(--font-weight-semibold, 600);
  color: var(--color-primary, #1C1F3B);
}
.blr-field__hint-inline { font-weight: var(--font-weight-normal, 400); color: var(--color-text-muted, #595959); font-size: var(--font-size-xs, 0.75rem); }
.blr-field__input {
  width: 100%;
  min-height: 44px;
  padding: 10px 12px;
  border: 1px solid var(--color-field-border, #9B9489);
  border-radius: var(--radius-md, 0.375rem);
  background: var(--color-bg, #FFFFFF);
  color: var(--color-text, #1E1E1E);
  font: inherit;
}
.blr-field__textarea { min-height: 150px; resize: vertical; line-height: 1.55; }
.blr-field__input[aria-invalid="true"] { border-color: var(--color-error, #DC2626); }
.blr-field__hint {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 4px 12px;
  font-size: var(--font-size-xs, 0.75rem);
  color: var(--color-text-muted, #595959);
}
.blr-field__error { font-size: var(--font-size-sm, 0.875rem); font-weight: var(--font-weight-semibold, 600); color: #B91C1C; }

/* Sélecteur d'étoiles (radios natifs : flèches du clavier) */
.blr-star-input { display: flex; flex-wrap: wrap; gap: 2px; align-items: center; }
.blr-star-input input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.blr-star-input label { display: grid; padding: 4px; border-radius: var(--radius-md, 0.375rem); cursor: pointer; }
.blr-star-input svg {
  width: 36px;
  height: 36px;
  fill: none;
  stroke: var(--color-border-dark, #767676);
  stroke-width: 1.5;
  transition: fill .15s ease, stroke .15s ease, transform .15s ease;
}
.blr-star-input label:hover svg { transform: scale(1.08); }
.blr-star-input label.is-lit svg,
.blr-star-input input:checked + label svg { fill: var(--color-accent, #CCA63B); stroke: var(--color-accent-dark, #A8842C); }
.blr-star-input input:focus-visible + label { outline: 2px solid var(--color-focus, #A8842C); outline-offset: 1px; }
.blr-star-input__output {
  min-width: 9ch;
  margin-left: 8px;
  font-size: var(--font-size-sm, 0.875rem);
  font-weight: var(--font-weight-semibold, 600);
  color: var(--color-primary, #1C1F3B);
}

.blr-drop {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3, 12px);
  align-items: center;
  padding: var(--space-4, 16px);
  border: 1.5px dashed var(--color-border-dark, #C8C3BA);
  border-radius: var(--radius-lg, 0.5rem);
}
.blr-drop__previews { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.blr-drop__previews:empty { display: none; }
.blr-drop__previews img { display: block; width: 64px; height: 64px; object-fit: cover; border-radius: var(--radius-md, 0.375rem); border: 1px solid var(--color-border, #E5E1D8); animation: blr-appear .3s ease both; }
.blr-drop__hint { flex: 1 1 220px; font-size: var(--font-size-xs, 0.75rem); color: var(--color-text-muted, #595959); }
.blr-file input:focus-visible + label { outline: 2px solid var(--color-focus, #A8842C); outline-offset: -2px; box-shadow: 0 0 0 3px var(--color-field-halo, rgba(204, 166, 59, 0.18)); }
.blr-file label { cursor: pointer; }

.blr-check { display: flex; gap: 10px; align-items: center; min-height: 32px; font-size: var(--font-size-sm, 0.875rem); cursor: pointer; }
.blr-check input { width: 20px; height: 20px; margin: 0; flex: none; accent-color: var(--color-primary, #1C1F3B); }

.blr-form__legal { max-width: 70ch; font-size: var(--font-size-xs, 0.75rem); line-height: 1.55; color: var(--color-text-muted, #595959); }
.blr-form__actions { display: flex; flex-wrap: wrap; gap: var(--space-3, 12px); }

.blr-order {
  display: grid;
  gap: var(--space-3, 12px);
  padding: var(--space-4, 16px);
  border: 1px solid var(--color-border, #E5E1D8);
  border-radius: var(--radius-lg, 0.5rem);
  background: var(--color-bg-alt, #F8F7F5);
}
.blr-order__media img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--radius-md, 0.375rem); }
.blr-order__name { margin: 0; font-weight: var(--font-weight-semibold, 600); color: var(--color-primary, #1C1F3B); }
.blr-order__meta { display: grid; grid-template-columns: auto 1fr; gap: 4px 12px; margin: 0; font-size: var(--font-size-sm, 0.875rem); }
.blr-order__meta dt { color: var(--color-text-muted, #595959); }
.blr-order__meta dd { margin: 0; font-weight: var(--font-weight-medium, 500); }

@media (prefers-reduced-motion: reduce) {
  .blr-item, .blr-viewer[open], .blr-drop__previews img { animation: none; }
  .blr-bar, .blr-chip, .blr-photo img, .blr-star-input svg, .blr-controlled summary::after { transition: none; }
}