/* ==========================================================================
   assets/interactions.css — 💞 Affinités + 🎤 messages vocaux  (12/10/2026)
   Maquette retenue : « affinites-vocaux-FINALE ». Aucune couleur en dur :
   tout vient de assets/themes.css, les six thèmes suivent seuls.
   ========================================================================== */

/* ---------- 1. Affinités (fiche) ---------------------------------------- */
.aff-bloc{padding:16px 26px;border-bottom:1px solid var(--trait);background:var(--carte)}
.aff-bloc--invite{padding:10px 26px}
.aff-tag{display:block;font-size:.72rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--or-txt);margin-bottom:6px}
.aff-note{font-size:.82rem;color:var(--txt-2)}
.aff-note a{color:var(--lien)}

.aff-score{display:flex;align-items:center;gap:16px}
.aff-jauge{
  --p:0;flex:none;width:64px;height:64px;border-radius:50%;display:grid;place-items:center;
  background:conic-gradient(var(--accent) calc(var(--p) * 1%), var(--fond-2) 0);
}
.aff-jauge>div{width:50px;height:50px;border-radius:50%;background:var(--carte);display:grid;place-items:center}
.aff-jauge b{font-size:.95rem;color:var(--txt)}
.aff-score-corps{min-width:0}
.aff-puce{
  display:inline-flex;align-items:center;gap:4px;margin:3px 4px 0 0;padding:2px 10px;border-radius:999px;
  font-size:.8rem;color:var(--txt);background:var(--vert-voile);border:1px solid var(--vert);
}

.aff-q{text-align:center;max-width:560px;margin:0 auto}
.aff-q-nav{display:flex;align-items:center;gap:10px}
.aff-q-nav .aff-q-texte{flex:1}
.aff-fleche{
  flex:none;width:38px;height:38px;border-radius:50%;border:1px solid var(--trait);cursor:pointer;
  background:transparent;color:var(--txt);font-size:1.4rem;line-height:1;transition:background .15s,border-color .15s;
}
.aff-fleche:hover:not(:disabled){background:var(--accent-voile);border-color:var(--accent)}
.aff-fleche:disabled{opacity:.3;cursor:default}
.aff-q-texte{font-family:'Playfair Display',Georgia,serif;font-size:1.15rem;font-weight:700;color:var(--txt);margin:6px 0 14px}
.aff-reps{display:flex;flex-wrap:wrap;gap:8px;justify-content:center}
.aff-rep{
  border:1px solid var(--trait);background:transparent;color:var(--txt-1);border-radius:999px;
  padding:8px 16px;font:inherit;font-weight:600;cursor:pointer;transition:background .15s,border-color .15s;
}
.aff-rep:hover{background:var(--accent-voile);border-color:var(--accent)}
.aff-rep--on{background:var(--accent);border-color:var(--accent);color:var(--sur-couleur)}
.aff-barre{height:8px;border-radius:99px;background:var(--fond-2);overflow:hidden;margin:16px 0 6px}
.aff-barre i{display:block;height:100%;background:var(--accent);transition:width .3s}
.aff-lien{background:none;border:0;padding:0;font:inherit;color:var(--lien);cursor:pointer;text-decoration:underline}
[data-aff][aria-busy="true"]{opacity:.6;pointer-events:none}
@media (max-width:860px){.aff-bloc{padding:14px 18px}}

/* ---------- 2. Micro + barre d'enregistrement --------------------------- */
.kpm-micro{
  flex:0 0 auto;width:38px;height:38px;border:0;border-radius:50%;cursor:pointer;
  background:var(--accent);color:var(--sur-couleur);font-size:1.05rem;
  touch-action:none;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none;
}
.kpm-micro:disabled{opacity:.45;cursor:not-allowed}
.kpm-micro--rec{animation:kpm-pouls 1s infinite}
@keyframes kpm-pouls{50%{box-shadow:0 0 0 10px var(--accent-voile)}}

.kpm-rec{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;margin:8px 12px 0;padding:8px 12px;
  border-radius:12px;background:var(--fond-2);font-size:.85rem;color:var(--txt)}
.kpm-rec[hidden]{display:none}
.kpm-rec-point{width:10px;height:10px;border-radius:50%;background:var(--accent);animation:kpm-pouls 1s infinite}
.kpm-rec-barre{flex:1 1 120px;height:5px;border-radius:99px;background:var(--trait-2);overflow:hidden}
.kpm-rec-barre i{display:block;height:100%;width:0;background:var(--accent)}
.kpm-rec-aide{flex-basis:100%;font-size:.75rem;color:var(--txt-2)}
.kpm-rec--annule{outline:1px dashed var(--accent)}
.kpm-rec--annule .kpm-rec-aide{color:var(--accent)}

/* Mobile : la rangée unique de kalipay.css passe de 3 à 4 colonnes
   [＋] [champ] [envoi] [🎤] — micro en dernier (12/10/2026). */
@media (max-width:860px){
  .kpm-form{grid-template-columns:auto minmax(0,1fr) auto auto}
  .kpm-envoyer{grid-column:3}
  .kpm-micro{grid-column:4;grid-row:2;width:40px;height:40px}
  .kpm-form>.kpm-rec{grid-column:1 / -1;grid-row:1;margin:0 0 6px}
}

/* ---------- 3. Bulle vocale -------------------------------------------- */
.kpm-vocal{display:flex;align-items:center;gap:10px;width:230px;max-width:100%}
.kpm-vocal-play{
  flex:none;width:34px;height:34px;border:0;border-radius:50%;cursor:pointer;
  background:var(--accent);color:var(--sur-couleur);font-size:.85rem;
}
.kpm-vocal-onde{position:relative;flex:1;min-width:0;height:24px;color:var(--txt-2)}
.kpm-vocal-onde::before,.kpm-vocal-onde i{
  content:"";position:absolute;inset:0;
  background:repeating-linear-gradient(90deg, currentColor 0 3px, transparent 3px 6px) left center / 100% 60% no-repeat;
}
.kpm-vocal-onde::before{opacity:.45}
.kpm-vocal-onde i{right:auto;width:0;color:var(--accent);background-size:230px 60%}
.kpm-vocal-duree{flex:none;font-size:.75rem;opacity:.85}
.kpm-vocal audio{display:none}
@media (max-width:860px){
  .kpm-bulle--moi .kpm-vocal-play{background:var(--sur-couleur);color:var(--accent)}
  .kpm-bulle--moi .kpm-vocal-onde{color:var(--sur-couleur)}
  .kpm-bulle--moi .kpm-vocal-onde i{color:var(--sur-couleur)}
}

/* ---------- 4. Préférences partagées en commun (12/10/2026) -----------
   Maquette V1 « liseré simple » : seul le contour passe au vert, sur la
   fiche d'un autre membre (fa_bloc_preferences(), .puce--commun). */
.fiche-prefs .puce--commun{border:1.5px solid var(--vert)}