.ac-box { max-width: 460px; }
.ac-sur { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 6px; margin: 0 0 16px; font-size: 13.5px; color: var(--soft); }
.ac-sur b { color: var(--ink); }
.ac-et { display: flex; justify-content: center; gap: 6px; margin: 4px 0 6px; }
.ac-et button {
  appearance: none; border: 0; background: none; padding: 4px; cursor: pointer; color: #C9D3E2; line-height: 0;
  border-radius: 10px; transition: transform .2s cubic-bezier(.2,.8,.2,1), color .15s ease;
}
body.dark .ac-et button { color: #3A475C; }
.ac-et button svg { width: 38px; height: 38px; display: block; }
/* (25/10) l’étoile choisie reste dorée en mode sombre : la règle « body.dark .ac-et button »
   était plus forte et la repeignait en gris dès que la souris quittait les étoiles */
.ac-et button.on, .ac-et.vise button.vu, body.dark .ac-et button.on, body.dark .ac-et.vise button.vu { color: #F5B301; }
.ac-et.vise button.on:not(.vu) { color: #C9D3E2; }
body.dark .ac-et.vise button.on:not(.vu) { color: #3A475C; }
.ac-et.vise button:not(.vu) { color: #C9D3E2; }
body.dark .ac-et.vise button:not(.vu) { color: #3A475C; }
.ac-et button:focus-visible { outline: 2px solid var(--crimson); outline-offset: 2px; }
@media (hover: hover) and (pointer: fine) { .ac-et button:hover { transform: scale(1.14); } }
.ac-mot { min-height: 20px; margin: 0 0 14px; text-align: center; font-size: 13px; font-weight: 700; color: var(--soft); }
.ac-zone {
  display: block; width: 100%; box-sizing: border-box; min-height: 96px; resize: vertical; padding: 12px 14px;
  border-radius: 14px; border: 1px solid var(--brd); background: var(--surf, #fff); color: var(--ink);
  font: inherit; font-size: 16px; line-height: 1.5;
}
.ac-zone:focus { outline: none; border-color: var(--crimson); box-shadow: 0 0 0 3px color-mix(in srgb, var(--crimson) 18%, transparent); }
.ac-ok { display: flex; gap: 10px; align-items: flex-start; margin: 14px 0 0; font-size: 13px; line-height: 1.5; color: var(--soft); cursor: pointer; }
.ac-ok input { flex: 0 0 auto; width: 18px; height: 18px; margin: 1px 0 0; accent-color: var(--crimson); }
.ac-note { margin: 10px 0 0 !important; font-size: 12px !important; }
.ac-err { margin: 10px 0 0; font-size: 13px; color: var(--crimson); min-height: 0; }
.ac-merci { text-align: center; }
.ac-merci .ac-ic { width: 54px; height: 54px; margin: 2px auto 12px; border-radius: 50%; display: grid; place-items: center;
  background: color-mix(in srgb, #1E9E62 18%, transparent); color: #1E9E62; }
.ac-merci .ac-ic svg { width: 26px; height: 26px; }
@media (prefers-reduced-motion: reduce) { .ac-et button { transition: none; } .ac-et button:hover { transform: none; } }