/* ============================================================
   ANIMA — Affinités (spec 2026-09-23 affinités § 2, § 6, § 7, § 8 — briques C3, C3-bis, C4, C5)
   ------------------------------------------------------------
   « Ma position » (#/mon-profil/affinites) : notice, progression, situations par thème, 1 clic par
   situation, affiner (acceptées + importance), signaler. Section « Affinités » d'une fiche de poste :
   choix des situations (thèmes repliés, socle par défaut), réglages par question, questions libres, aperçu
   candidat. Candidatures (C4) : pastille de fit, tri, présélection, panneau « à creuser en entretien ».
   Offre côté animateur (C5) : volet « Tes affinités avec ce séjour ».
   Tokens de css/tokens.css uniquement (tests/charte.test.mjs) ; primitives .rec-* / .sf-btn réutilisées ;
   zéro emoji (glyphes ✓ ＋ ✕ ▸ ⚠) ; cibles tactiles ≥ 44 px ; mobile 390 px d'office.
   ============================================================ */

/* ---------- Notice (avant la première situation) ---------- */
.aff-notice{display:flex; flex-direction:column; gap:var(--sp-2); padding:var(--sp-3) var(--sp-4); background:var(--surface-2); border:1px solid var(--line); border-radius:var(--r-md)}
.aff-notice-h{margin:0; font-size:.92rem; font-weight:600; color:var(--text)}
.aff-notice p{margin:0; font-size:.86rem; line-height:1.55; color:var(--text-2)}
.aff-notice p strong{color:var(--text)}

/* ---------- Progression ---------- */
.aff-progress{display:flex; flex-direction:column; gap:6px}
.aff-progress-txt{display:flex; justify-content:space-between; gap:var(--sp-3); flex-wrap:wrap; font-size:.82rem; color:var(--text-2)}
.aff-progress-txt b{color:var(--text); font-weight:600}
.aff-progress-bar{height:6px; border-radius:3px; background:var(--accent-bg); overflow:hidden}
.aff-progress-bar > i{display:block; height:100%; background:var(--accent); border-radius:3px; transition:width var(--dur-base) var(--ease-out)}
/* C7-bis : quota de modifications (anti-sondage), dit avant qu'il ne bloque */
.aff-quota{margin:0; font-size:.8rem; line-height:1.5; color:var(--text-2)}
.aff-quota.is-epuise{padding:var(--sp-2) var(--sp-3); border:1px solid var(--warn-line); background:var(--warn-bg); border-radius:var(--r-sm); color:var(--text)}

/* ---------- Ma position : thèmes et situations ---------- */
.aff-position{display:flex; flex-direction:column; gap:var(--sp-4)}
.aff-theme{display:flex; flex-direction:column; gap:var(--sp-3)}
.aff-theme-h{display:flex; align-items:baseline; justify-content:space-between; gap:var(--sp-3); margin:0; padding-bottom:6px; border-bottom:1px solid var(--line); font-size:1rem; font-weight:600; color:var(--text)}
.aff-theme-n{font-family:var(--font-mono); font-size:.72rem; color:var(--text-3); white-space:nowrap}
.aff-situation{display:flex; flex-direction:column; gap:var(--sp-2); padding:var(--sp-3) var(--sp-4); border-radius:var(--r-lg)}
.aff-situation.is-repondue{border-color:var(--ok-line)}
.aff-situation-tete{display:flex; align-items:flex-start; gap:var(--sp-2); flex-wrap:wrap}
.aff-num{font-family:var(--font-mono); font-size:.7rem; color:var(--text-3); padding-top:4px; flex:none}
.aff-enonce{flex:1; min-width:0; margin:0; font-size:.95rem; line-height:1.5; color:var(--text); overflow-wrap:anywhere}
.aff-options{display:grid; grid-template-columns:repeat(auto-fit, minmax(min(420px, 100%), 1fr)); gap:8px}   /* deux colonnes sur grand écran (phrases lisibles) ; min(…, 100 %) : jamais plus large que la carte à 390 px */
.aff-opt{display:flex; align-items:center; gap:10px; min-height:44px; padding:10px 14px; text-align:left; border:1px solid var(--line-2); border-radius:var(--r-sm); background:var(--surface-3); color:var(--text); font:inherit; font-size:.9rem; line-height:1.4; cursor:pointer; transition:border-color var(--dur-fast), background var(--dur-fast)}
.aff-opt:hover{border-color:var(--text-3)}
.aff-opt:focus-visible{outline:2px solid var(--accent); outline-offset:2px}
.aff-opt[aria-pressed="true"]{border-color:var(--accent); background:var(--accent-bg); color:var(--text); font-weight:600}
.aff-opt-lettre{flex:none; width:24px; height:24px; display:inline-grid; place-items:center; border-radius:50%; border:1px solid var(--line-2); font-family:var(--font-mono); font-size:.7rem; color:var(--text-2)}
.aff-opt[aria-pressed="true"] .aff-opt-lettre{background:var(--accent); border-color:var(--accent); color:var(--sur-accent)}
.aff-pied{display:flex; align-items:center; gap:var(--sp-3); flex-wrap:wrap}
.aff-etat{flex:1; min-width:120px; font-size:.78rem; color:var(--text-3)}
.aff-etat.is-ok{color:var(--ok)}
.aff-etat.is-erreur{color:var(--crit); flex:1 1 100%}   /* C7-bis : un message d'erreur long (quota) prend toute la ligne */
.aff-lien{background:none; border:0; padding:0 4px; min-height:44px; color:var(--accent); font:inherit; font-size:.84rem; cursor:pointer; display:inline-flex; align-items:center; gap:6px}
.aff-lien:hover{text-decoration:underline; text-underline-offset:2px}
.aff-lien[aria-expanded="true"]{color:var(--text)}
.aff-lien:disabled{color:var(--text-3); cursor:default; text-decoration:none}
.aff-affiner{display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:var(--sp-3) var(--sp-4); padding:var(--sp-3); border:1px dashed var(--line-2); border-radius:var(--r-sm)}
.aff-affiner[hidden]{display:none}
.aff-fs{border:0; margin:0; padding:0; min-width:0; display:flex; flex-direction:column; gap:2px}
.aff-fs > legend{font-size:.78rem; color:var(--text-2); font-weight:500; padding:0; margin-bottom:6px}
.aff-fs .rec-check{min-height:40px; padding:6px 2px}
.aff-fs .rec-check input:disabled + .rec-check-body{color:var(--text-3)}
.aff-signaler{display:flex; flex-direction:column; gap:var(--sp-2); padding:var(--sp-3); border:1px solid var(--warn-line); background:var(--warn-bg); border-radius:var(--r-sm)}
.aff-signaler[hidden]{display:none}
.aff-signaler .rec-actions .sf-btn{flex:1 1 auto}

/* ---------- Fiche de poste : section Affinités ---------- */
.aff-offre{display:flex; flex-direction:column; gap:var(--sp-3)}
.aff-offre-head{display:flex; align-items:baseline; justify-content:space-between; gap:var(--sp-3); flex-wrap:wrap}
.aff-compteur{font-family:var(--font-mono); font-size:.72rem; color:var(--text-3)}
.aff-compteur b{color:var(--text); font-weight:600}
.aff-alerte{margin:0; padding:var(--sp-3) var(--sp-4); border:1px solid var(--crit-line); background:var(--crit-bg); border-radius:var(--r-md); color:var(--crit); font-size:.86rem; line-height:1.5; white-space:pre-line}
.aff-alerte[hidden]{display:none}
.aff-avert{margin:0; padding:var(--sp-3) var(--sp-4); border:1px solid var(--warn-line); background:var(--warn-bg); border-radius:var(--r-md); color:var(--text); font-size:.84rem; line-height:1.5; white-space:pre-line}
.aff-avert[hidden]{display:none}
.aff-liste{display:flex; flex-direction:column; gap:var(--sp-2)}
.aff-theme-choix{border:1px solid var(--line); border-radius:var(--r-md); padding:0 var(--sp-3)}
.aff-theme-choix > summary{display:flex; align-items:center; justify-content:space-between; gap:var(--sp-3); min-height:48px; cursor:pointer; list-style:none; font-size:.95rem; font-weight:600; color:var(--text)}
.aff-theme-choix > summary::-webkit-details-marker{display:none}
.aff-theme-choix > summary::before{content:'▸'; margin-right:8px; display:inline-block; transition:transform var(--dur-fast) var(--ease-out); color:var(--text-3)}
.aff-theme-choix[open] > summary::before{transform:rotate(90deg)}
.aff-theme-choix > summary > span{flex:1; min-width:0}
.aff-choix{display:flex; flex-direction:column; gap:4px; padding:4px 0 var(--sp-2); border-top:1px solid var(--line)}
.aff-choix .rec-check{align-items:flex-start}
.aff-choix-meta{display:flex; align-items:center; gap:8px; flex-wrap:wrap; font-size:.76rem; color:var(--text-3)}
.aff-choix-meta .rec-badge{padding:1px 7px; font-size:.62rem}
.aff-reglages{display:grid; grid-template-columns:minmax(0,220px) minmax(0,1fr); gap:var(--sp-3) var(--sp-4); padding:var(--sp-2) 0 var(--sp-2) 34px}
.aff-reglages[hidden]{display:none}
.aff-libres{display:flex; flex-direction:column; gap:var(--sp-2)}
.aff-libres-h{margin:0; font-size:.86rem; font-weight:600; color:var(--text)}
.aff-libre{display:flex; align-items:center; gap:var(--sp-3); padding:6px 0; border-top:1px solid var(--line); font-size:.88rem}
.aff-libre-txt{flex:1; min-width:0; overflow-wrap:anywhere}
.aff-libre-txt small{display:block; color:var(--text-3); font-size:.74rem}
.aff-ajout{border:1px dashed var(--line-2); border-radius:var(--r-md); padding:0 var(--sp-3)}
.aff-ajout > summary{min-height:48px; display:flex; align-items:center; cursor:pointer; list-style:none; color:var(--accent); font-size:.9rem; font-weight:600}
.aff-ajout > summary::-webkit-details-marker{display:none}
.aff-ajout-form{display:flex; flex-direction:column; gap:var(--sp-3); padding:0 0 var(--sp-3)}
.aff-ajout-options{display:flex; flex-direction:column; gap:8px}
.aff-refus{margin:0; padding:var(--sp-3) var(--sp-4); border:1px solid var(--crit-line); background:var(--crit-bg); border-radius:var(--r-md); color:var(--text); font-size:.86rem; line-height:1.55}
.aff-refus[hidden]{display:none}
.aff-refus strong{display:block; color:var(--crit); margin-bottom:2px}
/* C7-bis : critère SENSIBLE — pas un refus, une justification à écrire → alerte (ambre), pas critique */
.aff-refus[data-code="justification_requise"]{border-color:var(--warn-line); background:var(--warn-bg)}
.aff-refus[data-code="justification_requise"] strong{color:var(--warn)}
.aff-apercu{display:flex; flex-direction:column; gap:var(--sp-3); padding:var(--sp-3) var(--sp-4); border:1px solid var(--line-2); background:var(--surface-2); border-radius:var(--r-md)}
.aff-apercu[hidden]{display:none}
.aff-apercu-h{margin:0; font-size:.92rem; font-weight:600; color:var(--text)}
.aff-apercu-theme{margin:0; font-size:.72rem; font-family:var(--font-mono); letter-spacing:.06em; text-transform:uppercase; color:var(--text-3)}
.aff-apercu ol{margin:0; padding-left:1.3em; display:flex; flex-direction:column; gap:var(--sp-2); font-size:.9rem; color:var(--text)}
.aff-apercu ul{margin:4px 0 0; padding-left:1.1em; display:flex; flex-direction:column; gap:2px; font-size:.84rem; color:var(--text-2)}

/* ---------- Fiche de poste : défaut socle, thèmes repliés (C3-bis) ---------- */
.aff-defaut{padding:var(--sp-2) var(--sp-3); border-left:3px solid var(--accent); background:var(--accent-bg); border-radius:var(--r-sm); color:var(--text-2)}
.aff-defaut[hidden]{display:none}
.aff-liste-barre{display:flex; justify-content:flex-end}
.aff-liste-barre[hidden]{display:none}
.aff-deplier{min-height:44px; padding:0 4px; font-size:.84rem}
.aff-deplier::before{content:'▸'; margin-right:6px; display:inline-block; transition:transform var(--dur-fast) var(--ease-out); color:var(--text-3)}
.aff-deplier[aria-expanded="true"]::before{transform:rotate(90deg)}

/* ---------- Candidatures (C4) : pastille de fit, tri, présélection ---------- */
.aff-fit-chip{display:inline-flex; align-items:center; gap:6px; font-family:var(--font-mono); font-size:.68rem; letter-spacing:.03em; padding:2px 9px; border-radius:20px; border:1px solid var(--line-2); color:var(--text-2); white-space:nowrap}
.aff-fit-chip b{font-weight:700; color:var(--text)}
.aff-fit-forte{color:var(--ok); border-color:var(--ok-line); background:var(--ok-bg)}
.aff-fit-forte b{color:var(--ok)}
.aff-fit-moyenne{color:var(--text-2); border-color:var(--line-2); background:var(--surface-2)}
.aff-fit-faible{color:var(--text-3); border-color:var(--line); background:transparent}
.aff-fit-none{color:var(--text-3); font-style:italic; border-style:dashed}
.aff-fit-prov{font-style:italic; font-weight:400; color:var(--text-3)}
.aff-fit-prov::before{content:'·'; margin-right:6px}
.aff-tri{align-items:center}
.aff-tri-lbl{font-family:var(--font-mono); font-size:.68rem; letter-spacing:.06em; text-transform:uppercase; color:var(--text-3); margin-right:4px}
.aff-chip-presel{margin-left:auto}
.aff-badge-presel{white-space:nowrap}
.rec-cand.is-preselection{border-color:var(--ok-line)}
.aff-presel{display:flex; align-items:center; gap:var(--sp-3); flex-wrap:wrap}
.aff-presel-btn.is-on{color:var(--ok); border-color:var(--ok-line); background:var(--ok-bg)}
.aff-presel .rec-note{flex:1; min-width:160px}

/* ---------- Panneau « à creuser en entretien » (C4, § 6) ---------- */
.aff-panneau{display:flex; flex-direction:column; gap:var(--sp-3); padding:var(--sp-3) var(--sp-4); border:1px solid var(--line-2); background:var(--surface-2); border-radius:var(--r-md)}
.aff-panneau-h{margin:0; font-size:.92rem; font-weight:600; color:var(--text)}
.aff-panneau-resume{margin:0; font-size:.86rem; line-height:1.5; color:var(--text-2)}
.aff-panneau-resume b{font-size:1.05rem; color:var(--text)}
.aff-themes{display:flex; flex-wrap:wrap; gap:8px}
.aff-theme-chip{display:inline-flex; align-items:center; min-height:28px; padding:2px 10px; border-radius:14px; border:1px solid var(--line-2); font-size:.78rem; color:var(--text-2); background:var(--surface-3); list-style:none}
.aff-theme-chip[data-niveau="accord_fort"]{color:var(--ok); border-color:var(--ok-line); background:var(--ok-bg)}
.aff-theme-chip[data-niveau="ecart"]{color:var(--text); border-color:var(--warn-line); background:var(--warn-bg)}
.aff-creuser{margin:0; padding:0; list-style:none; display:flex; flex-direction:column; gap:var(--sp-2)}
.aff-creuser-l{display:flex; flex-direction:column; gap:6px; padding:var(--sp-3); border:1px solid var(--line); border-radius:var(--r-sm); background:var(--surface)}
.aff-creuser-tete{display:flex; align-items:center; gap:8px; flex-wrap:wrap}
.aff-creuser-theme{font-family:var(--font-mono); font-size:.66rem; letter-spacing:.06em; text-transform:uppercase; color:var(--text-3)}
.aff-creuser-enonce{margin:0; font-size:.92rem; line-height:1.5; color:var(--text); overflow-wrap:anywhere}
.aff-creuser-dl{margin:0; display:grid; grid-template-columns:minmax(0,110px) minmax(0,1fr); gap:4px var(--sp-3); font-size:.84rem}
.aff-creuser-dl dt{font-family:var(--font-mono); font-size:.64rem; letter-spacing:.06em; text-transform:uppercase; color:var(--text-3); padding-top:3px}
.aff-creuser-dl dd{margin:0; color:var(--text); overflow-wrap:anywhere}
.aff-panneau-pied{margin:0; font-size:.78rem; color:var(--text-3); display:flex; gap:var(--sp-3); flex-wrap:wrap}
.aff-panneau-pied:empty{display:none}
.aff-libres-sans{display:flex; flex-direction:column; gap:4px; font-size:.84rem}
.aff-libres-sans-h{font-weight:600; color:var(--text)}
.aff-libres-sans ul{margin:0; padding-left:1.1em; color:var(--text-2)}

/* ---------- Offre côté animateur (C5) : « Tes affinités avec ce séjour » ---------- */
.aff-cand-box{display:flex; flex-direction:column; gap:var(--sp-3); padding:var(--sp-4); border-radius:var(--r-lg)}
.aff-cand-h{margin:0; font-size:1.05rem; font-weight:600; color:var(--text)}
.aff-cand-corps{display:flex; flex-direction:column; gap:var(--sp-3)}
.aff-cand-import{margin:0; padding:var(--sp-2) var(--sp-3); border-left:3px solid var(--ok); background:var(--ok-bg); border-radius:var(--r-sm); font-size:.84rem; color:var(--text)}
.aff-cand-score{display:flex; align-items:baseline; gap:var(--sp-3); flex-wrap:wrap}
.aff-cand-pct{font-size:2.2rem; line-height:1; font-weight:700; letter-spacing:-.02em; color:var(--text)}
.aff-cand-score[data-bande="forte"] .aff-cand-pct{color:var(--ok)}
.aff-cand-lib{font-size:.95rem; color:var(--text-2); display:inline-flex; align-items:baseline; gap:6px; flex-wrap:wrap}
.aff-cand-n{margin:0; font-size:.82rem; color:var(--text-3)}
.aff-cand-themes{display:flex; flex-direction:column; gap:8px}
.aff-cand-niv{display:grid; grid-template-columns:minmax(0,110px) minmax(0,1fr); gap:6px var(--sp-3); align-items:start}
.aff-cand-niv-lbl{font-family:var(--font-mono); font-size:.66rem; letter-spacing:.06em; text-transform:uppercase; color:var(--text-3); padding-top:6px}
.aff-cand-niv-lbl.aff-niv-accord_fort{color:var(--ok)}
.aff-cand-niv-lbl.aff-niv-ecart{color:var(--warn)}
.aff-cand-niv-themes{margin:0; padding:0; list-style:none; display:flex; flex-wrap:wrap; gap:8px}
.aff-cand-restantes{margin:0; font-size:.86rem; line-height:1.5; color:var(--text-2); display:flex; flex-wrap:wrap; gap:4px 8px; align-items:center}
.aff-cand-lien{align-self:flex-start; text-decoration:none; color:var(--text)}
.aff-cand-libres{display:flex; flex-direction:column; gap:var(--sp-2)}
.aff-cand-libres-h{margin:0; font-size:.92rem; font-weight:600; color:var(--text)}
.aff-cand-libre{border:1px solid var(--line); background:var(--surface)}

/* ---------- Responsive ---------- */
@media (max-width:640px){
  .aff-affiner{grid-template-columns:1fr}
  .aff-reglages{grid-template-columns:1fr; padding-left:0}
  .aff-situation{padding:var(--sp-3)}
  .aff-creuser-dl{grid-template-columns:1fr}
  .aff-cand-niv{grid-template-columns:1fr}
  .aff-cand-niv-lbl{padding-top:0}
  .aff-chip-presel{margin-left:0}
  .aff-cand-pct{font-size:1.9rem}
}

/* ---------- C7-bis : candidature SANS compte — joindre ses réponses Affinités (case décochée, notice exacte) ---------- */
.rec-aff-joindre{display:flex; flex-direction:column; gap:var(--sp-2); padding:var(--sp-3) var(--sp-4); background:var(--surface-2); border:1px solid var(--line); border-radius:var(--r-md); min-width:0}
.rec-aff-joindre-h{margin:0; font-size:.92rem; font-weight:600; color:var(--text)}
.rec-aff-joindre-txt{margin:0; font-size:.86rem; line-height:1.55; color:var(--text-2); overflow-wrap:anywhere}
.aff-cand-justif{margin:0; overflow-wrap:anywhere}
.aff-libre-justif{font-style:italic}
.aff-tri-rappel{margin:0}

/* ============================================================
   Vivier par Affinités (C6, spec 2026-09-23 Affinités § 2 point 6 + amendement) : « Animateurs qui correspondent »
   (Réseau › Recruter, js/affinites/vivier.js) et, côté animateur, « Être trouvé par les directeurs » + invitations
   (Ma fiche, js/affinites/trouvable.js). Tokens seuls ; aucun emoji ; prénom seul, ni réponse ni coordonnée.
   ============================================================ */
.vf [hidden], .vf-trouvable [hidden] { display: none !important; }
.rec-lien-vivier { display: inline-flex; align-items: center; min-height: 44px; margin-left: auto; font-size: .86rem; color: var(--texte-2); text-decoration: underline; text-decoration-color: var(--ligne-2); text-underline-offset: 4px; }
.rec-lien-vivier:hover { color: var(--texte); text-decoration-color: currentColor; }
.vf .ariane { margin: .35rem 0 .6rem; align-items: center; }
.vf .ariane-l { display: inline-flex; align-items: center; min-height: 44px; }
.vf-surtitre { font-family: var(--sans); font-weight: 600; font-size: .68rem; letter-spacing: .13em; text-transform: uppercase; color: var(--texte-2); margin: 0 0 .45rem; }
.vf-titre { font-family: var(--serif); font-weight: 400; font-size: clamp(2rem, 3.4vw, 2.7rem); line-height: 1; margin: 0; }
.vf-chapo { color: var(--texte-2); max-width: 70ch; margin: .5rem 0 1rem; text-wrap: pretty; }
.vf-etat { color: var(--texte-2); margin: 0 0 .6rem; max-width: 70ch; text-wrap: pretty; }
.vf-retour { margin: -.4rem 0 .8rem; }
.vf .vf-lien { display: inline-flex; align-items: center; min-height: 44px; font-size: .86rem; color: var(--texte-2); text-decoration: underline; text-decoration-color: var(--ligne-2); text-underline-offset: 4px; }
/* Harmonisation UX/UI (2026-09-30) : le panneau de filtres latéral et la grille sont remplacés par le modèle
   partagé (css/reseau-liste.css, classes rl-*) ; ne restent ici que les styles PROPRES au contenu d'une ligne
   d'animateur (score d'affinité à droite du titre, statut, thèmes, tags, actions d'invitation). */
.rl-ligne.vf-ligne .vf-carte-tete { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; }
.rl-ligne.vf-ligne .rl-titre { margin: 0; }
.vf-fit { display: grid; justify-items: end; margin: 0; flex: none; }
.vf-fit-n { font-family: var(--sans); font-weight: 500; font-size: 1.5rem; line-height: 1; }
.vf-fit-bande { font-size: .66rem; letter-spacing: .1em; text-transform: uppercase; color: var(--texte-3); }
.vf-statut { margin: .3rem 0 0; font-size: .88rem; color: var(--texte-2); }
.vf-statut.est-verifie { color: var(--texte); }
.vf-themes { margin: .3rem 0 0; font-size: .86rem; color: var(--texte-2); overflow-wrap: anywhere; }
.vf-themes-lib { font-weight: 600; color: var(--texte); }
.vf-tags { display: flex; flex-wrap: wrap; gap: .3rem; list-style: none; margin: .5rem 0 0; padding: 0; }
.vf-tag { padding: .15rem .5rem; border: 1px solid var(--ligne-2); border-radius: 2px; font-size: .78rem; color: var(--texte-2); }
.vf-tag.est-filtre { border-color: var(--texte); color: var(--texte); }
.vf-tag.est-fort { font-weight: 600; color: var(--texte); box-shadow: inset 0 -2px 0 var(--accent); }
.vf-qualifs { margin: .35rem 0 0; font-size: .8rem; color: var(--texte-3); }
.vf-actions { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1rem; margin-top: .6rem; }
.vf-btn { min-height: 44px; padding: 0 1rem; border: 1px solid var(--texte); border-radius: 2px; background: transparent; color: var(--texte); font: inherit; font-size: .88rem; cursor: pointer; }
.vf-btn-plein { background: var(--texte); color: var(--bg-0); }
.vf-btn:disabled { opacity: .5; cursor: not-allowed; }
.vf-etat-inv { padding: .5rem 0; font-size: .84rem; color: var(--texte-2); }
.vf-note { min-height: 1em; margin: .25rem 0 0; font-size: .82rem; color: var(--texte-2); }

/* Côté animateur : « Être trouvé par les directeurs » + invitations reçues (Ma fiche). */
.vf-trouvable { margin: 0 0 1.2rem; padding: .9rem 1rem 1rem; border: 1px solid var(--ligne); background: var(--s1); }
.vf-trouvable-titre { margin: 0 0 .3rem; font-family: var(--serif); font-weight: 400; font-size: 1.3rem; }
.vf-trouvable-titre + .vf-invitations, .vf-trouvable-note + .vf-trouvable-titre { margin-top: .6rem; }
.vf-trouvable-case { display: flex; align-items: center; gap: .6rem; min-height: 44px; font-weight: 500; cursor: pointer; }
.vf-trouvable-case input { flex: none; width: 20px; height: 20px; accent-color: var(--texte); }
.vf-trouvable-aide { max-width: 70ch; margin: .2rem 0 .6rem; font-size: .86rem; color: var(--texte-2); text-wrap: pretty; }
.vf-trouvable-note { min-height: 1.1em; margin: 0 0 .4rem; font-size: .84rem; color: var(--texte-2); }
.vf-invitations { list-style: none; margin: 0; padding: 0; }
.vf-invitation { padding: .6rem 0; border-top: 1px solid var(--ligne); }
.vf-invitation-texte { margin: 0; overflow-wrap: anywhere; }
.vf-invitation-meta { margin: .15rem 0 0; font-size: .8rem; color: var(--texte-3); }

@media (max-width: 860px) {
  .rl-ligne.vf-ligne .vf-fit-n { font-size: 1.2rem; }
}

/* ============================================================
   Missions ouvertes DANS la plateforme (#/missions, Réseau › Opportunités, js/missions/vue.js).
   Migré sur le modèle partagé (css/reseau-liste.css, classes `rl-*`, harmonisation UX/UI 2026-09-30) : ne
   restent ici que les styles PROPRES à cet écran (période à deux champs, note sur les offres externes).
   ============================================================ */
.mi-periode { display: grid; grid-template-columns: 1fr 1fr; gap: .55rem; }
.mi-note { margin: 1rem 0 0; max-width: 70ch; font-size: .84rem; color: var(--texte-2); }