/* ═══════════════════════════════════════════════════════════════════
   /livre-d-or/ — avis des joueurs.

   Prolonge /style.css : les cartes d'avis (.lo-avis, .lo-etoiles) et les
   champs (.field) y sont déjà. Ce fichier ajoute la note globale, la liste
   filtrable et l'espace joueur (connexion, notation, état de son avis).
   ═══════════════════════════════════════════════════════════════════ */

/* ── En-tête + note globale ──────────────────────────────────────── */
.lo-hero{padding-top:clamp(2.5rem,5vw,4.5rem);padding-bottom:clamp(2rem,4vw,3rem)}
.lo-hero-grid{
  display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);
  gap:clamp(1.8rem,4vw,3.5rem);align-items:center;
}
.lo-hero-lead{max-width:56ch;margin-bottom:1.8rem}
.lo-hero-actions{display:flex;flex-wrap:wrap;gap:.8rem}

.lo-score{
  padding:1.5rem 1.6rem;
  background:linear-gradient(180deg,rgba(245,165,36,.08),var(--surface) 65%);
  border:1px solid rgba(245,165,36,.25);
  border-radius:var(--r-lg);
  box-shadow:var(--shadow);
}
.lo-score-tete{display:flex;align-items:center;gap:1.1rem;margin-bottom:1.2rem}
.lo-score-tete .avis-moyenne{margin:0}
.lo-score-tete .avis-total{margin-top:.35rem}

.lo-repartition{display:grid;gap:.35rem}
.lo-barre{
  width:100%;
  display:grid;grid-template-columns:2.6rem minmax(0,1fr) 2.4rem;align-items:center;gap:.7rem;
  padding:.3rem .45rem;margin:0 -.45rem;
  background:none;border:0;border-radius:var(--r-sm);
  color:var(--fg-soft);font-size:.86rem;cursor:pointer;text-align:left;
  box-sizing:content-box;
}
.lo-barre:hover,.lo-barre.is-on{background:rgba(255,255,255,.05);color:#fff}
.lo-barre:disabled{cursor:default;opacity:.55}
.lo-barre:disabled:hover{background:none;color:var(--fg-soft)}
.lo-barre-label{font-family:var(--font-mono);font-size:.78rem;white-space:nowrap}
.lo-barre-label::after{content:"★";color:var(--amber);margin-left:.15rem}
.lo-barre-piste{height:8px;border-radius:99px;background:rgba(255,255,255,.08);overflow:hidden}
.lo-barre-piste span{
  display:block;height:100%;border-radius:inherit;
  background:linear-gradient(90deg,var(--amber),var(--flame));
  transition:width .5s ease;
}
.lo-barre-n{font-family:var(--font-mono);font-size:.78rem;text-align:right;font-variant-numeric:tabular-nums}

/* ── Avis + espace joueur ────────────────────────────────────────── */
.lo-corps{padding-top:clamp(2.5rem,5vw,4rem)}
.lo-corps-grid{
  display:grid;grid-template-columns:minmax(0,1.55fr) minmax(320px,1fr);
  gap:clamp(1.6rem,3.5vw,3rem);align-items:start;
}

.lo-liste-tete{
  display:flex;align-items:center;justify-content:space-between;gap:1rem;flex-wrap:wrap;
  margin-bottom:1.3rem;
}
.lo-liste-tete h2{margin:0;font-size:clamp(1.5rem,2.6vw,2rem)}
.lo-filtres{display:flex;flex-wrap:wrap;gap:.4rem}
.lo-filtre{
  padding:.38rem .8rem;border-radius:999px;cursor:pointer;
  background:rgba(255,255,255,.04);border:1px solid var(--line-strong);
  color:var(--fg-soft);font-size:.84rem;font-weight:600;
  font-variant-numeric:tabular-nums;
}
.lo-filtre:hover{color:#fff;background:rgba(255,255,255,.08)}
.lo-filtre.is-on{background:rgba(245,165,36,.16);border-color:rgba(245,165,36,.5);color:#ffd48a}

.lo-liste{display:grid;gap:1rem}
.lo-liste .lo-avis{animation:lo-entree .35s ease both}
@keyframes lo-entree{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.lo-vide{
  margin:0;padding:2rem 1.2rem;text-align:center;
  color:var(--fg-mute);
  border:1px dashed var(--line-strong);border-radius:var(--r-lg);
}
.lo-plus{margin-top:1.2rem;width:100%}
.lo-plus:disabled{opacity:.6;cursor:progress;transform:none}

/* Espace joueur, collant sur grand écran pour rester à portée en lisant. */
.lo-ecrire{position:sticky;top:calc(var(--header-h) + 1rem)}
.lo-carte{
  background:var(--surface);
  border:1px solid var(--line-strong);
  border-radius:var(--r-lg);
  padding:clamp(1.2rem,2.6vw,1.7rem);
  box-shadow:var(--shadow);
}
.lo-carte-tete{display:flex;align-items:baseline;justify-content:space-between;gap:1rem;margin-bottom:.8rem}
.lo-carte-tete h2{margin:0;font-size:1.6rem}
.lo-muted{color:var(--fg-soft);font-size:.92rem;margin:0 0 1rem}
.lo-bonjour{margin:0 0 .9rem;color:var(--fg-soft);font-size:.92rem}
.lo-bonjour b{color:#fff}
.lo-form{display:grid;gap:1rem}
.lo-form .field textarea{min-height:150px}
.lo-submit{justify-self:start}
.lo-submit:disabled{opacity:.65;cursor:progress;transform:none}
.lo-form-actions{display:flex;flex-wrap:wrap;gap:.7rem}

.lo-lien{
  background:none;border:0;padding:0;cursor:pointer;
  color:var(--fg-mute);font-size:.84rem;text-decoration:underline;text-underline-offset:3px;
}
.lo-lien:hover{color:#fff}
.lo-lien-danger:hover{color:#ff8b96}

.lo-info{margin:0;padding:.8rem .95rem;border-radius:var(--r-sm);font-size:.9rem;line-height:1.55}
.lo-info-ambre{background:rgba(245,165,36,.1);border:1px solid rgba(245,165,36,.32);color:#ffd48a}
.lo-info-vert{margin-top:1rem;background:rgba(46,204,113,.1);border:1px solid rgba(46,204,113,.32);color:#8be9b3}

/* Statut de son propre avis. */
.lo-statut{
  display:flex;align-items:flex-start;gap:.55rem;
  margin:0 0 1rem;padding:.75rem .9rem;border-radius:var(--r-sm);
  font-size:.9rem;line-height:1.5;
}
.lo-statut::before{
  content:"";width:9px;height:9px;border-radius:50%;flex:none;margin-top:.42rem;
  background:currentColor;
}
.lo-statut b{color:#fff}
.lo-statut[data-statut="en_attente"]{background:rgba(245,165,36,.1);border:1px solid rgba(245,165,36,.3);color:#ffd48a}
.lo-statut[data-statut="publie"]{background:rgba(46,204,113,.1);border:1px solid rgba(46,204,113,.3);color:#8be9b3}
.lo-statut[data-statut="refuse"]{background:rgba(225,29,46,.1);border:1px solid rgba(225,29,46,.35);color:#ff9aa4}
#lo-mon-avis .lo-avis{background:var(--bg-2)}
.lo-mon-avis-actions{display:flex;align-items:center;justify-content:space-between;gap:1rem;flex-wrap:wrap;margin-top:1rem}

/* ── Notation par étoiles ────────────────────────────────────────── */
.lo-notation{border:0;margin:0;padding:0;min-width:0;display:grid;gap:.45rem}
.lo-notation legend{padding:0;margin-bottom:.45rem}
/* Les radios sont dans l'ordre 5 → 1 et affichés en row-reverse : « ~ »
   atteint ainsi les étoiles de rang inférieur pour le survol et la sélection. */
.lo-notation-etoiles{display:inline-flex;flex-direction:row-reverse;justify-content:flex-end;gap:.25rem}
.lo-notation-etoiles input{position:absolute;opacity:0;width:1px;height:1px;pointer-events:none}
.lo-notation-etoiles label{
  width:40px;height:40px;cursor:pointer;
  background:no-repeat center/34px 34px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23ffffff' fill-opacity='.14' d='M12 2.6l2.9 6 6.5.8-4.8 4.5 1.2 6.5L12 17.3l-5.8 3.1 1.2-6.5L2.6 9.4l6.5-.8z'/%3E%3C/svg%3E");
  border-radius:8px;
  transition:transform .12s ease;
}
.lo-notation-etoiles label:hover{transform:scale(1.12)}
.lo-notation-etoiles input:checked ~ label,
.lo-notation-etoiles label:hover,
.lo-notation-etoiles label:hover ~ label{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23f5a524' d='M12 2.6l2.9 6 6.5.8-4.8 4.5 1.2 6.5L12 17.3l-5.8 3.1 1.2-6.5L2.6 9.4l6.5-.8z'/%3E%3C/svg%3E");
}
/* Pendant le survol, on montre la note survolée et non la note retenue. */
.lo-notation-etoiles:hover input:checked ~ label:not(:hover):not(:hover ~ label){
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23ffffff' fill-opacity='.14' d='M12 2.6l2.9 6 6.5.8-4.8 4.5 1.2 6.5L12 17.3l-5.8 3.1 1.2-6.5L2.6 9.4l6.5-.8z'/%3E%3C/svg%3E");
}
.lo-notation-etoiles input:focus-visible + label{outline:2px solid var(--flame);outline-offset:2px}
.lo-notation-libelle{font-size:.84rem;color:var(--fg-mute);min-height:1.3em}
.lo-notation-libelle.is-choisi{color:#ffd48a;font-weight:600}

.lo-case{display:flex;align-items:flex-start;gap:.6rem;font-size:.9rem;color:var(--fg-soft);cursor:pointer}
.lo-case input{width:18px;height:18px;margin:.15rem 0 0;accent-color:var(--red);flex:none}
.lo-case b{color:#fff}
.lo-case small{color:var(--fg-mute);font-size:.8rem}

#lo-compteur{font-family:var(--font-mono);font-size:.74rem}

/* ── Responsive ──────────────────────────────────────────────────── */
@media (max-width:1000px){
  .lo-hero-grid{grid-template-columns:1fr}
  .lo-corps-grid{grid-template-columns:1fr}
  .lo-ecrire{position:static}
}
@media (max-width:640px){
  .lo-hero-actions .btn{flex:1 1 auto}
  .lo-score{padding:1.2rem}
  .lo-submit{justify-self:stretch}
  .lo-form-actions .btn{flex:1 1 100%}
  .lo-notation-etoiles label{width:46px;height:46px;background-size:38px 38px}
}
@media (prefers-reduced-motion:reduce){
  .lo-liste .lo-avis{animation:none}
  .lo-barre-piste span{transition:none}
}