/* avis.css — kit avis, version 1.0 (08.11.2026, @c-website ; repris du site.css de fabioballi.net).
   Couleurs et formes par variables, à relier aux couleurs du site (y compris son mode sombre), par exemple :
     :root { --avis-bg: var(--fond); --avis-ink: var(--texte); --avis-btn: var(--accent); }
   Sans réglage, les valeurs de repli ci-dessous s'appliquent (thème clair). Le rouge et le vert ne portent jamais seuls
   l'information : le message dit quoi faire. */
.avis, .avisc {
  --_bg: var(--avis-bg, #ffffff);
  --_surface: var(--avis-surface, #f6f4f9);
  --_ink: var(--avis-ink, #1b1726);
  --_muted: var(--avis-muted, #5b5566);
  --_line: var(--avis-line, #d9d4e1);
  --_field: var(--avis-field-line, #8a8396);
  --_btn: var(--avis-btn, #4b2e83);
  --_btn-hover: var(--avis-btn-hover, #3a2266);
  --_btn-ink: var(--avis-btn-ink, #ffffff);
  --_link: var(--avis-link, #4b2e83);
  --_focus: var(--avis-focus, #1a73e8);
  --_ok-bg: var(--avis-ok-bg, #1e6b3a);
  --_ok-ink: var(--avis-ok-ink, #ffffff);
  --_err-bg: var(--avis-err-bg, #b3261e);
  --_err-ink: var(--avis-err-ink, #ffffff);
  --_radius: var(--avis-radius, 14px);
  font-family: inherit; line-height: 1.5;
}
.avis *, .avisc * { box-sizing: border-box; }
.avis [hidden], .avisc [hidden], .avis[hidden] { display: none !important; }

/* champ piège pour les robots : hors de l'écran, jamais vu ni lu */
.avis .hp, .avisc .hp { position: absolute; left: -5000px; width: 1px; height: 1px; overflow: hidden; }
.avis .visually-hidden, .avisc .visually-hidden { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* boutons */
.avis__btn { font: inherit; font-size: .92rem; font-weight: 600; line-height: 1.2; padding: .5rem 1rem; border-radius: 999px; cursor: pointer;
  background: var(--_btn); color: var(--_btn-ink); border: 1.5px solid var(--_btn); }
.avis__btn:hover { background: var(--_btn-hover); border-color: var(--_btn-hover); }
.avis__btn:disabled { opacity: .6; cursor: progress; }
.avis__btn--ghost { background: transparent; color: var(--_ink); border-color: var(--_line); }
.avis__btn--ghost:hover { background: var(--_surface); border-color: var(--_field); }
.avis__btn:focus-visible, .avisc__b:focus-visible, .avis__comment:focus-visible, .avisc__comment:focus-visible, .avis__note a:focus-visible {
  outline: 3px solid var(--_focus); outline-offset: 2px; }

/* Fenêtre « Partager votre avis » */
.avis { position: fixed; z-index: 45; right: max(1rem, env(safe-area-inset-right, 0px)); bottom: calc(1rem + env(safe-area-inset-bottom, 0px));
  width: min(23rem, calc(100vw - 2rem)); max-height: calc(100vh - 3rem); overflow-y: auto; overscroll-behavior: contain;
  background: var(--_bg); color: var(--_ink); border: 1px solid var(--_line); border-radius: var(--_radius);
  box-shadow: 0 10px 30px rgba(27, 23, 38, .22); padding: 1.1rem 1.2rem 1rem; opacity: 0; transform: translateY(1rem); transition: opacity .25s, transform .25s; }
.avis.is-in { opacity: 1; transform: none; }
.avis__top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem .8rem; }
.avis__title { margin: 0; font-weight: 700; font-size: 1.05rem; }
.avis__rule { margin: .8rem 0 .9rem; border: 0; border-top: 1px solid var(--_line); }
.avis__form { margin: 0; }
.avis__actions { display: flex; flex-wrap: wrap; gap: .5rem; margin: .5rem 0 0; }
.avis__q { min-width: 0; margin: 0 0 .9rem; padding: 0; border: 0; }
.avis__q legend { padding: 0 0 .35rem; font-weight: 600; font-size: .98rem; line-height: 1.35; }
.avis__scale { display: flex; justify-content: space-between; gap: .2rem; }
.avis__face { position: relative; display: grid; place-items: center; width: 2.75rem; height: 2.75rem; border-radius: 50%; color: var(--_muted); cursor: pointer; }
.avis__face svg { width: 2.3rem; height: 2.3rem; border-radius: 50%; }
.avis__face:hover { color: var(--_link); }
.avis__head { fill: var(--_bg); stroke: currentColor; stroke-width: 1.8; }
.avis__eye { fill: currentColor; }
.avis__mouth { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.avis__mouth--open { fill: currentColor; }
.avis__radio { position: absolute; width: 1px; height: 1px; margin: 0; opacity: 0; }
.avis__radio:checked + svg { color: var(--_btn-ink); }
.avis__radio:checked + svg .avis__head { fill: var(--_btn); stroke: var(--_btn); }
.avis__radio:focus-visible + svg { outline: 3px solid var(--_focus); outline-offset: 2px; }
.avis__ends { display: flex; justify-content: space-between; margin: .15rem 0 0; color: var(--_muted); font-size: .8rem; }
.avis__label { display: block; margin: 0 0 .3rem; font-weight: 600; font-size: .98rem; }
.avis__comment { display: block; width: 100%; padding: .5rem .6rem; border: 1px solid var(--_field); border-radius: 8px; background: var(--_bg); color: var(--_ink);
  font: inherit; font-size: .95rem; resize: vertical; }
.avis__note { margin: .5rem 0 0; color: var(--_muted); font-size: .82rem; }
.avis__note a { color: var(--_link); }
.avis__status { margin: .6rem 0 0; font-weight: 600; }
.avis__status:empty { display: none; }
@media (max-width: 480px) { .avis { left: .6rem; right: .6rem; width: auto; } }

/* « Un avis sur ce contenu » */
.avisc { padding-block: 1rem 2.5rem; }
.avisc__form { border: 1px solid var(--_line); border-radius: var(--_radius); padding: 1.1rem 1.3rem; max-width: 40rem; background: var(--_surface); color: var(--_ink); margin: 0; }
.avisc__q { font-weight: 700; margin: 0 0 .6rem; }
.avisc__btns { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: .8rem; }
.avisc__b { font: inherit; font-size: .92rem; font-weight: 600; color: var(--_ink); background: var(--_bg); border: 1.5px solid var(--_field); border-radius: 999px; padding: .35rem .9rem; cursor: pointer; }
.avisc__b:hover { border-color: var(--_link); }
.avisc__b[aria-pressed="true"] { background: var(--_btn); border-color: var(--_btn); color: var(--_btn-ink); }
.avisc__b[aria-pressed="true"]::before { content: "✓ "; }
.avisc__label { display: block; font-size: .92rem; font-weight: 600; margin-bottom: .3rem; }
.avisc__comment { display: block; width: 100%; padding: .5rem .6rem; border: 1px solid var(--_field); border-radius: 8px; background: var(--_bg); color: var(--_ink);
  font: inherit; font-size: .95rem; resize: vertical; }
.avisc__actions { margin: .7rem 0 0; }
.avisc__note { font-size: .82rem; margin: .6rem 0 0; color: var(--_muted); }
.avisc__status { margin: .5rem 0 0; font-weight: 600; }
.avisc__status:empty { display: none; }

/* Messages : erreur sur fond rouge, confirmation en vert */
.avis .is-error, .avisc .is-error, .avis .is-ok, .avisc .is-ok { display: block; border-radius: 10px; padding: .55rem .8rem; font-size: .93rem; }
.avis .is-error, .avisc .is-error { background: var(--_err-bg); color: var(--_err-ink); }
.avis .is-ok, .avisc .is-ok { background: var(--_ok-bg); color: var(--_ok-ink); }

@media (prefers-reduced-motion: reduce) { .avis { transition: none; } }
@media print { .avis, .avisc { display: none !important; } }