/* RETO — Brique de dictée 2.2 : comme l'application Claude. Couleur réglable par --reto-dictee-accent. */
.reto-saisie { --reto-dictee-accent: var(--accent, #2f6b4f); --reto-dictee-onde: #8a948f; position:relative; display:block; background:#fff;
  border:1px solid #cfd6d2; border-radius:14px; padding:0; box-shadow:0 1px 3px rgba(0,0,0,.04); cursor:text; }
.reto-saisie:focus-within { border-color:#a9b8b0; box-shadow:0 1px 6px rgba(0,0,0,.07); }
.reto-saisie > textarea.reto-saisie-zone, .reto-saisie > input.reto-saisie-zone { display:block; width:100%; border:0 !important; outline:none !important; box-shadow:none !important;
  background:transparent !important; border-radius:14px; padding:12px 64px 12px 16px !important; margin:0; resize:none; font:inherit; color:inherit; }
.reto-saisie.ecoute > .reto-saisie-zone { padding-right:200px !important; }
.reto-saisie-zone::placeholder { color:#9aa39e; }
.reto-dictee-zone-ecoute { font-style:italic; color:#5d6b63 !important; }
.reto-saisie-droite { position:absolute; right:10px; bottom:9px; display:flex; align-items:center; gap:8px; }
.reto-saisie-droite button { font:inherit; cursor:pointer; padding:0; display:inline-grid; place-items:center; }
.reto-dictee-rond { width:34px; height:34px; border-radius:9px; background:#fff; color:#2b332f; border:1px solid #d6dcd8; }
.reto-dictee-rond:hover { background:#f2f4f3; }
.reto-dictee-envoyer { width:34px; height:34px; border-radius:9px; background:transparent; color:#3b4540; border:0; }
.reto-dictee-envoyer:hover:not(:disabled) { background:#f2f4f3; }
.reto-dictee-envoyer:disabled { color:#b9c0bc; cursor:default; }
.reto-dictee-onde { width:96px; height:18px; }
.reto-dictee { display:flex; align-items:center; gap:10px; margin-top:6px; min-height:34px; font:inherit; font-size:.9rem; color:#5d6b63; }
.reto-dictee-micro { width:34px; height:34px; padding:0; display:inline-grid; place-items:center; border-radius:50%; cursor:pointer;
  background:transparent; color:#3b4540; border:0; }
.reto-dictee-micro:hover { background:#eef1ef; }
.reto-dictee-micro.indisponible { opacity:.45; }
.reto-dictee-etat { flex:1 1 180px; }
.reto-saisie button:focus-visible, .reto-dictee button:focus-visible { outline:3px solid #9cc7b0; outline-offset:1px; }
.reto-saisie [hidden], .reto-dictee [hidden] { display:none !important; }
.reto-dictee-plus { width:34px; height:34px; padding:0; display:inline-grid; place-items:center; border-radius:50%; cursor:pointer; background:transparent; color:#3b4540; border:0; }
.reto-dictee-plus:hover { background:#eef1ef; }
.reto-dictee-groupe { position:relative; display:inline-flex; align-items:center; gap:0; }
.reto-dictee-chevron { width:22px; height:30px; padding:0; display:inline-grid; place-items:center; border-radius:7px; cursor:pointer; background:transparent; color:#6b746f; border:0; }
.reto-dictee-chevron:hover { background:#eef1ef; }
.reto-dictee-menu { position:absolute; left:0; bottom:40px; z-index:20; min-width:230px; background:#fff; border:1px solid #dfe4e1; border-radius:14px; padding:6px; box-shadow:0 8px 28px rgba(0,0,0,.14); }
.reto-dictee-choix { display:flex; align-items:center; gap:12px; width:100%; padding:9px 10px; border:0; border-radius:9px; background:transparent; color:#2b332f; font:inherit; font-size:.98rem; text-align:left; cursor:pointer; }
.reto-dictee-choix span { flex:1; } .reto-dictee-choix em { font-style:normal; font-size:.8rem; color:#8a948f; }
.reto-dictee-choix:hover:not(:disabled) { background:#f2f4f3; } .reto-dictee-choix:disabled { color:#8a948f; cursor:default; }
.reto-dictee-aide { border-top:1px solid #eceeed; margin-top:4px; padding:8px 10px 4px; font-size:.8rem; color:#7a847f; }
.reto-dictee-envoyer.reto-dictee-arret { color:#2b332f; }

/* 2.3 : navigateur sans dictée (Brave, Firefox…) : micro grisé, le survol dit pourquoi. */
.reto-dictee-micro.reto-dictee-indispo { opacity:.4; cursor:help; }