/* ============ Réseau des anciens (spec 2026-09-23-reseau-anciens) — styles .ra-* ============
   Espace #/reseau/mon-reseau (ex-anciens)|personne/<id>|appels|entraide|notifications|moderation|reembauche, panneau anneaux du Vivier, bloc
   « Diffuser dans le réseau », page publique #/confirmer. Jetons uniquement (aucune couleur en dur), lisible dans les
   deux thèmes, glyphes monochromes. Mobile d'abord (390 px) ; cibles tactiles ≥ 44 px. */

.ra-page{display:flex; flex-direction:column; gap:14px; min-width:0}
.ra-corps{display:flex; flex-direction:column; gap:18px; min-width:0}
.ra-section{min-width:0}
.ra-carte{padding:12px 14px; margin:10px 0 0; display:flex; flex-direction:column; gap:6px; min-width:0; overflow-wrap:anywhere}
.ra-vide{margin:8px 0}
.ra-sous-titre{margin:12px 0 6px; font-size:.8rem; color:var(--text-2); font-weight:600}
.ra-texte{margin:0; font-size:.9rem; line-height:1.5; color:var(--text); white-space:pre-wrap; overflow-wrap:anywhere}
.ra-kpi{margin:6px 0; font-size:1.3rem; font-weight:600; color:var(--text)}

/* ---------- Anneaux ---------- */
.ra-anneaux{display:grid; grid-template-columns:repeat(auto-fit, minmax(min(100%, 150px), 1fr)); gap:8px; margin-top:10px}
.ra-anneau{display:flex; flex-direction:column; align-items:flex-start; gap:2px; min-height:44px; padding:10px 12px; text-align:left;
  color:var(--text); border:1px solid var(--line); background:transparent; cursor:pointer; font:inherit}
.ra-anneau.est-actif{border-color:var(--accent); background:var(--accent-fond)}
.ra-anneau:focus-visible{outline:2px solid var(--accent); outline-offset:2px}
.ra-anneau-num{font-size:.66rem; color:var(--text-3)}
.ra-anneau-nom{font-size:.9rem}
.ra-anneau-cpt{font-size:.8rem; color:var(--text-2)}
.ra-anneau-aide{font-size:.7rem; color:var(--text-3); line-height:1.35}
.ra-anneaux--compact .ra-anneau{cursor:default}
.ra-anneaux--compact .ra-anneau-aide{display:none}
.ra-vivier{margin-bottom:16px}

/* ---------- Personnes, cercles, listes ---------- */
.ra-personnes, .ra-anciens, .ra-notifs{list-style:none; margin:6px 0 0; padding:0; display:flex; flex-direction:column}
.ra-personne, .ra-anciens li, .ra-notif{display:flex; flex-wrap:wrap; align-items:center; gap:6px 10px; min-height:44px; padding:6px 0; border-top:1px solid var(--line)}
.ra-actions{display:flex; flex-wrap:wrap; align-items:center; gap:8px; margin-left:auto}
.ra-cercle-tete{display:flex; flex-wrap:wrap; align-items:center; gap:6px 8px}
.ra-inviter{display:flex; flex-wrap:wrap; gap:8px; align-items:center; margin-top:4px}
.ra-lien{flex:1 1 220px; min-width:0}
.ra-btn-discret{opacity:.85}

/* ---------- Formulaires ---------- */
.ra-form{display:grid; grid-template-columns:repeat(auto-fit, minmax(min(100%, 200px), 1fr)); gap:10px 12px; margin-top:10px}
.ra-form > button, .ra-form > .auth-error, .ra-form > .profil-note, .ra-form > .ra-suggestions{grid-column:1 / -1; justify-self:start}
.ra-form-ligne{grid-template-columns:1fr auto}
.ra-champ{display:flex; flex-direction:column; gap:4px; min-width:0}
.ra-champ-lab{font-size:.7rem; color:var(--text-3); letter-spacing:.04em; text-transform:uppercase}
.ra-input{width:100%; min-width:0; min-height:44px; padding:8px 10px; font:inherit; color:var(--text); background:var(--bg-1); border:1px solid var(--line); border-radius:8px}
textarea.ra-input{min-height:96px; resize:vertical}
.ra-input:focus-visible{outline:2px solid var(--accent); outline-offset:1px}
.ra-suggestions{display:flex; flex-direction:column; gap:6px; width:100%}
.ra-suggestion{flex-direction:row; flex-wrap:wrap; align-items:center; gap:8px}

/* ---------- Appels, Entraide ---------- */
.ra-appel.est-clos{opacity:.7}
.ra-reco{margin:0; font-size:.86rem; color:var(--accent)}
.ra-reco-zone{display:flex; flex-wrap:wrap; gap:8px; align-items:center}
.ra-question{text-decoration:none; color:var(--text)}
.ra-question:hover{border-color:var(--accent)}
.ra-reponse.est-retenue{border-color:var(--accent)}
.ra-signature{margin:0; font-size:.76rem}
.ra-signaler{max-width:180px}
.ra-apercu{margin:8px 0; font-size:.9rem; color:var(--text)}

/* ---------- Notifications ---------- */
.ra-notif a{color:var(--text); text-decoration:none; flex:1 1 200px; min-width:0}
.ra-notif.est-nouvelle a{font-weight:600}
.ra-notif.est-nouvelle::before{content:""; width:8px; height:8px; border-radius:50%; background:var(--accent); flex:none}

/* ---------- Réembauche ---------- */
.ra-table{width:100%; border-collapse:collapse; margin-top:10px; font-size:.84rem}
.ra-table th, .ra-table td{text-align:left; padding:8px 6px; border-top:1px solid var(--line)}
.ra-table th{font-size:.7rem; color:var(--text-3); text-transform:uppercase; letter-spacing:.04em}

/* ---------- Confirmation publique ---------- */
.ra-confirmation{max-width:520px; margin:24px auto; padding:20px; display:flex; flex-direction:column; gap:10px}
.ra-confirmation .rec-cta, .ra-confirmation .sf-btn{align-self:flex-start; min-height:44px}


/* ---------- Liens directs et fiche d'une personne (B1 « Liens ») ---------- */
.ra-liens{display:flex; flex-direction:column; gap:18px; min-width:0}
.ra-liens > :empty, .ra-liens > [hidden]{display:none}
.ra-liens > .profil-note, .ra-liens > .auth-error{margin:0}
.ra-liste-lignes{list-style:none; margin:6px 0 0; padding:0; display:flex; flex-direction:column}
.ra-ligne{display:flex; flex-wrap:wrap; align-items:center; gap:6px 12px; min-height:44px; padding:8px 0; border-top:1px solid var(--line); min-width:0}
.ra-ligne-texte{display:flex; flex-direction:column; align-items:flex-start; gap:2px; flex:1 1 200px; min-width:0; overflow-wrap:anywhere}
.ra-nom{display:inline-block; padding:3px 0; font-weight:600; color:var(--text); text-decoration:none}
.ra-nom:hover{color:var(--accent); text-decoration:underline}
.ra-nom:focus-visible{outline:2px solid var(--accent); outline-offset:2px; border-radius:4px}
.ra-signaletique{font-size:.82rem}
.ra-fils{display:flex; flex-wrap:wrap; gap:4px 6px; margin-top:4px}
.ra-recherche-statut{min-height:1.2em}
.ra-envoyees .ra-ligne{opacity:.85}
.ra-actions--fiche{margin-left:0}
.ra-fiche{display:flex; flex-direction:column; gap:18px; min-width:0}
.ra-fiche > .profil-note, .ra-fiche > .auth-error{margin:0}
.ra-fiche-signaletique{margin:8px 0 12px}
.ra-fiche-action{display:flex; flex-direction:column; align-items:flex-start; gap:8px}
.ra-confirmer{margin:0; flex:1 1 220px; font-size:.92rem; color:var(--text)}
.ra-fil{align-items:flex-start; flex-wrap:nowrap; gap:10px}
.ra-fil-ico{flex:none; display:grid; place-items:center; width:22px; height:22px; margin-top:1px; color:var(--accent)}
.ra-fil-ico .ico{width:17px; height:17px}
.ra-fil-texte{flex:1 1 auto; min-width:0; line-height:1.45; overflow-wrap:anywhere}
.ra-recues .ra-ligne:first-child, .ra-envoyees .ra-ligne:first-child{border-top:0}