/* =========================================================================
   Avis clients sur la fiche produit : ce que /js/avis.js ajoute a la page.

   Cette feuille ne redefinit rien de style.css. Elle reprend ses variables
   (--magenta, --fond-alt, --bordure, --texte-doux) et ses briques existantes
   (.contenu pour la largeur, .separateur pour le titre de section, .bouton
   pour l'envoi) ; elle n'habille que les elements nouveaux.

   Elle est chargee sur toutes les pages, mais tout y est prefixe par
   `.produit-avis` ou par une classe `avis-*` posee en JavaScript : sans le
   script, aucune de ces regles ne s'applique.

   Aucune couleur en dur en dehors du magenta de la charte (#E6007E, expose
   par style.css sous --magenta) : le reste vient des variables, sinon le
   theme sombre se casse.
   ========================================================================= */

/* ------------------------------------------------------------ Champ piege */
/* Premiere regle du fichier, volontairement : c'est celle dont l'absence
   couterait le plus cher. Le script pose deja ces proprietes en ligne, elles
   sont repetees ici pour que le champ reste hors de vue meme si un navigateur
   ignorait le style en ligne. Ni display:none ni visibility:hidden : certains
   robots savent les detecter et evitent alors le piege. */
.avis-piege {
  position: absolute !important;
  left: -9999px !important;
  top: auto;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
  opacity: 0;
  pointer-events: none;
}

/* ---------------------------------------------------------------- Section */

.produit-avis {
  padding: 3.2rem 0;
  background: var(--fond);
  border-top: 1px solid var(--bordure);
}

/* La synthese a gauche, la liste a droite. La colonne de gauche est bornee :
   au dela, la moyenne flotte au milieu du vide sur un grand ecran. */
.avis-corps {
  display: grid;
  grid-template-columns: minmax(220px, 300px) minmax(0, 1fr);
  gap: 2.4rem;
  align-items: start;
}

@media (max-width: 860px) {
  .avis-corps {
    grid-template-columns: 1fr;
    gap: 1.8rem;
  }
}

/* ----------------------------------------------------------- Etoiles SVG */
/* Deux rangees de cinq etoiles superposees : la grise en dessous, la magenta
   par dessus, rognee a la largeur voulue. C'est ce qui donne une demi-etoile
   exacte pour une moyenne de 4,3 sans second dessin a maintenir. */

.avis-etoiles {
  position: relative;
  display: inline-block;
  line-height: 0;
  white-space: nowrap;
}

.avis-etoiles-fond,
.avis-etoiles-pleines {
  display: block;
  white-space: nowrap;
}

.avis-etoiles-pleines {
  position: absolute;
  inset: 0 auto 0 0;
  overflow: hidden;
}

.avis-etoiles svg {
  width: 1.05em;
  height: 1.05em;
  display: inline-block;
  vertical-align: middle;
  flex: none;
}

.avis-etoiles-fond svg {
  fill: var(--bordure);
}

.avis-etoiles-pleines svg {
  fill: var(--magenta);
}

/* Le fond a la meme couleur que les bordures : en theme sombre il devient
   presque invisible, alors qu'une etoile vide doit se lire comme une etoile.
   On l'eclaircit d'un cran. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .avis-etoiles-fond svg {
    fill: #4A4B55;
  }
}

:root[data-theme="dark"] .avis-etoiles-fond svg {
  fill: #4A4B55;
}

/* --------------------------------------------------------------- Synthese */

.avis-synthese {
  padding: 1.4rem 1.3rem;
  background: var(--fond-alt);
  border: 1px solid var(--bordure);
}

.avis-aucun {
  margin: 0;
  font-size: 0.92rem;
  line-height: 1.6;
  color: var(--texte-doux);
}

.avis-moyenne {
  text-align: center;
  padding-bottom: 1.1rem;
  margin-bottom: 1.1rem;
  border-bottom: 1px solid var(--bordure);
}

.avis-moyenne-chiffre {
  margin: 0 0 0.3rem;
  font-family: var(--titre);
  font-size: 3rem;
  font-weight: 500;
  line-height: 1;
  color: var(--magenta);
  font-variant-numeric: tabular-nums;
}

.avis-moyenne-sur {
  font-size: 1.1rem;
  color: var(--texte-leger);
  margin-left: 0.15rem;
}

.avis-moyenne .avis-etoiles {
  font-size: 1.4rem;
}

.avis-moyenne-total {
  margin: 0.5rem 0 0;
  font-size: 0.8rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--texte-doux);
}

.avis-moyenne-verifies {
  margin: 0.2rem 0 0;
  font-size: 0.76rem;
  color: var(--texte-leger);
}

/* ---------------------------------------------------------------- Barres */
/* Chaque barre est un bouton : cliquer sur "4 etoiles" ne montre que les avis
   a quatre etoiles. Une note sans aucun avis est desactivee plutot que cachee,
   pour que les cinq lignes restent toujours au meme endroit. */

.avis-barres {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.avis-barre {
  display: grid;
  grid-template-columns: 2.6rem minmax(0, 1fr) 2rem;
  align-items: center;
  gap: 0.55rem;
  padding: 0.22rem 0.3rem;
  border: 1px solid transparent;
  background: transparent;
  font-family: var(--corps);
  font-size: 0.8rem;
  color: var(--texte-doux);
  cursor: pointer;
  text-align: left;
}

.avis-barre:hover:not([disabled]),
.avis-barre:focus-visible {
  border-color: var(--bordure);
  color: var(--texte);
}

.avis-barre[disabled] {
  cursor: default;
  opacity: 0.55;
}

.avis-barre-active {
  border-color: var(--magenta);
  color: var(--texte);
}

.avis-barre-note {
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.avis-barre-piste {
  display: block;
  height: 8px;
  background: var(--bordure);
  overflow: hidden;
}

.avis-barre-part {
  display: block;
  height: 100%;
  background: var(--magenta);
  transition: width 0.25s;
}

.avis-barre-compte {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

/* ----------------------------------------------------------------- Liste */

.avis-liste {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 1.1rem;
}

.avis-liste[aria-busy="true"] {
  opacity: 0.5;
}

.avis-carte {
  padding: 1.1rem 1.2rem;
  border: 1px solid var(--bordure);
  background: var(--surface);
}

.avis-carte-tete {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  flex-wrap: wrap;
}

.avis-carte-tete .avis-etoiles {
  font-size: 0.95rem;
}

.avis-titre {
  margin: 0;
  font-family: var(--corps);
  font-weight: 700;
  font-size: 1rem;
  color: var(--texte);
}

.avis-signature {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 0.35rem 0 0.6rem;
  font-size: 0.78rem;
  color: var(--texte-leger);
}

.avis-auteur {
  font-weight: 700;
  color: var(--texte-doux);
}

/* La mention n'est posee que sur un avis rattache a une commande payee de la
   personne (voir apps/api/src/routes/avis.ts) : elle doit donc se voir. */
.avis-verifie {
  display: inline-block;
  padding: 0.1rem 0.45rem;
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--magenta);
  border: 1px solid var(--magenta);
}

.avis-date {
  font-variant-numeric: tabular-nums;
}

.avis-message {
  margin: 0;
  font-size: 0.92rem;
  line-height: 1.6;
  color: var(--texte);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

/* La reponse de la boutique se distingue de l'avis auquel elle repond :
   decalee, sur le fond alternatif, avec un filet magenta. */
.avis-reponse {
  margin: 0.9rem 0 0 1.2rem;
  padding: 0.7rem 0.9rem;
  border-left: 3px solid var(--magenta);
  background: var(--fond-alt);
}

.avis-reponse p {
  margin: 0;
  font-size: 0.88rem;
  line-height: 1.55;
  color: var(--texte);
}

.avis-reponse-tete {
  font-weight: 700;
  font-size: 0.76rem !important;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--texte-doux) !important;
  margin-bottom: 0.3rem !important;
}

.avis-vide {
  margin: 0;
  padding: 1.2rem;
  border: 1px dashed var(--bordure);
  background: var(--fond-alt);
  font-size: 0.9rem;
  color: var(--texte-doux);
}

.avis-plus {
  margin-top: 1.2rem;
  text-align: center;
}

.avis-plus button[hidden] {
  display: none;
}

/* ------------------------------------------------------------ Formulaire */

.avis-depot {
  margin-top: 2.6rem;
  padding-top: 2rem;
  border-top: 1px solid var(--bordure);
}

.avis-depot-titre {
  margin: 0 0 0.4rem;
  font-family: var(--titre);
  font-weight: 400;
  font-size: 1.5rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--texte);
}

.avis-depot-mention {
  margin: 0 0 1.4rem;
  font-size: 0.85rem;
  line-height: 1.55;
  color: var(--texte-doux);
}

.avis-formulaire {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem 1.2rem;
  align-items: start;
}

@media (max-width: 640px) {
  .avis-formulaire {
    grid-template-columns: 1fr;
  }
}

.avis-champ {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.avis-champ-large,
.avis-notes,
.avis-retour,
.avis-envoi {
  grid-column: 1 / -1;
}

.avis-champ label,
.avis-notes legend {
  font-family: var(--corps);
  font-weight: 700;
  font-size: 0.76rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--texte-doux);
}

.avis-champ input,
.avis-champ textarea {
  width: 100%;
  padding: 0.68rem 0.8rem;
  font-family: var(--corps);
  font-size: 1rem;
  color: var(--texte);
  background: var(--fond);
  border: 1px solid var(--bordure);
  border-radius: 0;
}

.avis-champ textarea {
  resize: vertical;
  min-height: 7rem;
  line-height: 1.55;
}

.avis-champ input:focus,
.avis-champ textarea:focus {
  outline: 2px solid var(--magenta);
  outline-offset: 1px;
}

/* --------------------------------------------------------- Choix de note */

.avis-notes {
  margin: 0;
  padding: 0;
  border: 0;
}

.avis-notes-boutons {
  display: flex;
  align-items: center;
  gap: 0.15rem;
  margin-top: 0.35rem;
}

.avis-note {
  padding: 0.1rem;
  border: 0;
  background: transparent;
  cursor: pointer;
  line-height: 0;
}

.avis-note svg {
  width: 1.8rem;
  height: 1.8rem;
  fill: var(--bordure);
  transition: fill 0.12s;
}

.avis-note-pleine svg {
  fill: var(--magenta);
}

.avis-note:focus-visible {
  outline: 2px solid var(--magenta);
  outline-offset: 2px;
}

/* Le libelle de la note reste lisible par un lecteur d'ecran mais n'occupe
   aucune place a l'ecran : c'est l'etoile qui parle. */
.avis-note-lu {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.avis-note-libelle {
  margin-left: 0.6rem;
  font-size: 0.82rem;
  color: var(--texte-doux);
  line-height: 1;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .avis-note svg {
    fill: #4A4B55;
  }
}

:root[data-theme="dark"] .avis-note svg {
  fill: #4A4B55;
}

:root[data-theme="dark"] .avis-note-pleine svg,
:root[data-theme="light"] .avis-note-pleine svg {
  fill: var(--magenta);
}

/* ---------------------------------------------------- Controle antispam */

.avis-antispam .avis-question {
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--texte-doux);
}

.avis-antispam input {
  max-width: 12rem;
}

@media (max-width: 640px) {
  .avis-antispam input {
    max-width: none;
  }
}

/* ------------------------------------------------------- Zone de reponse */

.avis-retour {
  margin: 0;
  padding: 0.85rem 1.1rem;
  border-left: 3px solid var(--bordure);
  background: var(--fond-alt);
  font-size: 0.92rem;
  line-height: 1.5;
  color: var(--texte);
}

.avis-retour[hidden] {
  display: none;
}

.avis-retour-attente {
  border-left-color: var(--texte-leger);
  color: var(--texte-doux);
}

.avis-retour-succes {
  border-left-color: #2e7d52;
  background: color-mix(in srgb, #2e7d52 8%, var(--fond-alt));
}

.avis-retour-erreur {
  border-left-color: var(--magenta);
  background: color-mix(in srgb, var(--magenta) 8%, var(--fond-alt));
}

/* color-mix n'est pas connu de tous les navigateurs : sans lui, le fond reste
   celui de --fond-alt et seul le filet colore distingue les tons. C'est un
   repli acceptable, le sens ne repose pas sur la couleur seule (le texte dit
   ce qui s'est passe). */

.avis-envoi {
  margin: 0.4rem 0 0;
}

.avis-envoi button[disabled] {
  cursor: progress;
}