/* ============================================================
   ANIMA — « Ma fiche » de l'animateur (spec 2026-09-21-fiche-animateur-retours-design.md, §7.1)
   ------------------------------------------------------------
   Section de #/mon-profil (js/fiche-views.js), styles .fiche-*. Tokens et primitives de styles.css
   (.glass, .role-chip, .tag .t-*, .sv-ph, .auth-input, .auth-submit, .profil-*) : ce fichier ne
   pose que ce qui manque. Cible PRIORITAIRE : le portable Ulefone (Android Chrome, 360-412 px) —
   aucun scroll horizontal, cibles tactiles >= 44 px, champs à 16 px (pas de zoom au focus).
   Charcoal froid, un seul accent ambre, à plat. ZÉRO emoji (glyphes monochromes ✓ ✕ ＋ ✎ ⚠).
   Un état ne se lit jamais à la couleur seule : glyphe ✓ / mot (Visible, Masqué) en plus.

   B3ter (recette portable 412/360) : contrastes >= 4,5:1 (texte normal) dans les DEUX thèmes, en
   n'agissant QUE ici (aucun token global touché) : les jetons --f-* ci-dessous remplacent, pour la
   fiche seulement, --text-3 (3,45:1 sombre / 2,63:1 clair), le texte clair sur ambre (2,3:1 clair) et
   les teintes ok/warn/crit/ambre en texte sur fond clair. Encre sombre sur ambre dans les deux thèmes.
   ============================================================ */

/* B8a : la palette de tokens.css est validée ≥ 4,5:1 dans les DEUX thèmes (tests/palette.test.mjs),
   les jetons --f-* ne sont plus que des alias du contrat commun (plus de valeur locale, plus de
   bloc « thème clair » : le clair est le défaut, le sombre chaud est dérivé dans tokens.css). */
.fiche-section, .fv, .rt{
  --f-txt2:var(--texte-2);           /* aides, compteurs, « Masqué »… */
  --f-accent-txt:var(--accent);      /* accent en TEXTE */
  --f-on-accent:var(--sur-accent);   /* texte posé sur l'accent (chip choisie, Enregistrer) */
  --f-off:var(--texte-3);            /* texte d'une carte désactivée */
  --f-ok-txt:var(--ok); --f-warn-txt:var(--alerte);
  --f-crit-txt:var(--critique);      /* critique en texte */
  --fiche-pad:var(--sp-5);           /* = padding de .profil-form (barre collante en pleine largeur) */
}
@media (max-width:640px){ .fiche-section, .rt{--fiche-pad:var(--sp-4)} }

.fiche-section, .fv, .rt{min-width:0; overflow-wrap:anywhere}
.fiche-section *, .fv *, .rt *{min-width:0}
.fiche-section [hidden], .fv [hidden], .rt [hidden]{display:none !important}
.fiche-corps{display:flex; flex-direction:column; gap:var(--sp-3)}
.fiche-loading{color:var(--f-txt2); font-size:.82rem; margin:0}
.fiche-note{margin:0; color:var(--f-txt2); font-size:.8rem; line-height:1.5}
.fiche-muet{color:var(--f-txt2); font-size:.84rem}

/* ---------- Bloc dérivé (lecture seule) ---------- */
.fiche-derives{border-radius:var(--r-lg); padding:var(--sp-5); display:flex; flex-direction:column; gap:var(--sp-3)}
.fiche-derive-ligne{display:flex; flex-direction:column; gap:6px}
.fiche-derive-k{font-size:.7rem; color:var(--text-2); letter-spacing:.05em; text-transform:uppercase}
.fiche-derive-v{display:flex; flex-wrap:wrap; gap:6px; align-items:center}
.fiche-tag{white-space:normal; line-height:1.35; font-size:.74rem}   /* .tag est nowrap : trop large à 360 px */
/* Texte des étiquettes : jetons lisibles dans les deux thèmes (fonds teintés de styles.css conservés). */
.fiche-tag.t-ok{color:var(--f-ok-txt)}
.fiche-tag.t-warn{color:var(--f-warn-txt)}
.fiche-tag.t-crit{color:var(--f-crit-txt)}
.fiche-tag.t-info{color:var(--f-accent-txt)}                   /* casquettes : SEUL usage de l'ambre teinté */
.fiche-tag.t-neutre{background:var(--surface-3); color:var(--text-2); border-color:var(--line-2)}   /* PSC1 (ancienneté), non qualifié */
.fiche-indice{display:flex; flex-direction:column; align-items:flex-start; gap:var(--sp-1)}
.fiche-lien{background:none; border:0; padding:0; min-height:44px; color:var(--f-accent-txt); font:inherit; font-size:.86rem; font-weight:600; cursor:pointer; text-align:left}
.fiche-lien:hover{color:var(--survol-texte)}
.fiche-alerte{margin:0; padding:9px 12px; font-size:.82rem; line-height:1.45; color:var(--f-warn-txt); background:var(--warn-bg); border:1px solid var(--warn-line); border-radius:var(--r-sm)}
.fiche-jauge{display:flex; flex-direction:column; gap:6px; padding-top:var(--sp-2); border-top:1px solid var(--line)}
.fiche-jauge > .tag{align-self:flex-start}
/* « Noyau à remplir » : appel à l'action = bouton PLEIN (ambre + encre sombre), pas une étiquette teintée. */
.fiche-cta{align-self:flex-start; min-height:44px; padding:0 var(--sp-4); border:0; border-radius:var(--r-sm); background:var(--accent); color:var(--f-on-accent); font:inherit; font-size:.86rem; font-weight:700; cursor:pointer}
.fiche-cta:hover{background:var(--survol-plein); color:var(--survol-plein-encre)}
.fiche-cta:focus-visible{outline:2px solid var(--accent); outline-offset:2px}
.fiche-jauge-lbl{margin:0; font-size:.9rem; font-weight:600; color:var(--text)}
.fiche-bar{margin:2px 0 4px}                                      /* .bar : piste 7 px déjà définie */
.fiche-bar > i{transition:width .3s ease}

/* ---------- Formulaire ---------- */
.fiche-form{gap:0; padding-top:var(--sp-4); border-radius:var(--r-lg)}
.fiche-champ{scroll-margin-top:calc(var(--header-h, 64px) + 12px)}
.fiche-section.is-dirty .fiche-form{border-color:var(--accent)}
.fiche-groupe{margin:var(--sp-4) 0 var(--sp-1); padding-bottom:var(--sp-1); font-size:.7rem; font-weight:600; letter-spacing:.1em; text-transform:uppercase; color:var(--f-accent-txt); border-bottom:1px solid var(--line)}
.fiche-form > .fiche-groupe:first-child{margin-top:0}
.fiche-champ{display:flex; flex-direction:column; gap:var(--sp-2); padding:var(--sp-3) 0 var(--sp-3) 0; border-bottom:1px solid var(--line)}
.fiche-champ.is-invalid{border-left:3px solid var(--crit); padding-left:var(--sp-2)}
.fiche-champ-tete{display:flex; align-items:baseline; justify-content:space-between; gap:var(--sp-2)}
.fiche-champ-titre{margin:0; font-size:.94rem; font-weight:600; color:var(--text)}
.fiche-compteur{font-size:.72rem; color:var(--f-txt2); letter-spacing:.04em}
.fiche-champ.is-plein .fiche-compteur{color:var(--f-accent-txt); font-weight:700}
.fiche-hint{margin:0; font-size:.78rem; line-height:1.45; color:var(--f-txt2)}
.fiche-selection{margin:0; font-size:.8rem; line-height:1.45; color:var(--text)}
.fiche-err{margin:0; font-size:.82rem; line-height:1.4; color:var(--f-crit-txt)}
.fiche-err-detail{display:block; margin:2px 0 0; font-size:.74rem; line-height:1.35; color:var(--f-txt2); overflow-wrap:anywhere}
/* Limite atteinte : message explicite en ligne (pas seulement un compteur qui change de couleur). */
.fiche-limite{margin:0; padding:8px 12px; font-size:.82rem; line-height:1.4; font-weight:600; color:var(--f-accent-txt); background:var(--accent-bg); border:1px solid var(--accent-glow); border-radius:var(--r-sm)}
.fiche-limite-bloc{margin-bottom:var(--sp-2); padding:0; font-size:.78rem; background:none; border:0; border-radius:0}   /* rappel discret dans un panneau : une ligne, sans cadre */
.fiche-bloc{display:flex; flex-direction:column; gap:6px}
.fiche-bloc + .fiche-bloc{margin-top:var(--sp-2)}
.fiche-bloc-titre{margin:0; font-size:.68rem; font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:var(--text-2)}

/* ---------- Accordéon par bloc de compétences (patron .is-expanded de .hub-acc) ---------- */
.fiche-acc{border:1px solid var(--line); border-radius:var(--r-sm)}
.fiche-acc + .fiche-acc{margin-top:8px}
.fiche-acc-tete{display:flex; align-items:center; gap:var(--sp-2); width:100%; min-height:48px; padding:6px 12px; background:none; border:0; color:var(--text); font:inherit; text-align:left; cursor:pointer}
.fiche-acc-tete:focus-visible{outline:2px solid var(--accent); outline-offset:-2px; border-radius:var(--r-sm)}
.fiche-acc-titre{flex:1 1 auto; font-size:.86rem; font-weight:600}
.fiche-acc-nb{flex:none; font-size:.74rem; font-weight:700; color:var(--f-accent-txt)}
.fiche-acc-nb:empty{display:none}
.fiche-acc-chev{flex:none; display:grid; place-items:center; color:var(--text-2)}
.fiche-acc-chev .ico{width:16px; height:16px; transform:rotate(-90deg); transition:transform .15s}
.fiche-acc.is-expanded .fiche-acc-chev .ico{transform:rotate(0deg)}
.fiche-acc.is-expanded .fiche-acc-tete{border-bottom:1px solid var(--line)}
.fiche-acc-corps{display:none; padding:var(--sp-2) 12px 12px}
.fiche-acc.is-expanded .fiche-acc-corps{display:block}

/* ---------- Puces (base : .role-chip de styles.css) ---------- */
.fiche-chips{display:flex; flex-wrap:wrap; gap:8px}
.fiche-chips:empty{display:none}
.fiche-chip{min-height:44px; padding:8px 14px; font-size:.88rem; background:var(--surface-3); text-align:left; line-height:1.25}
.fiche-chip.on{background:var(--accent); color:var(--f-on-accent); border-color:transparent; box-shadow:none}
.fiche-chip.on::before{content:'✓'; margin-right:6px; font-weight:700}
/* Carte désactivée (limite atteinte) : LISIBLE (>= 4,5:1) mais clairement inactive — plus de fond, bordure
   pointillée, curseur interdit — au lieu d'une simple opacité qui la rendait illisible (1,9 à 2,2:1). */
.fiche-chip:disabled{opacity:1; background:transparent; border:1px dashed var(--line-2); color:var(--f-off); cursor:not-allowed}
.fiche-chip:disabled:hover{border-color:var(--line-2); color:var(--f-off)}
.fiche-chip:focus-visible{outline:2px solid var(--accent); outline-offset:2px}
.fiche-langues .fiche-chip.on::before{content:none}

/* Styles : une carte par style, résumé visible sous le libellé. */
.fiche-cartes{flex-direction:column; flex-wrap:nowrap}
.fiche-chip-style{display:flex; flex-direction:column; align-items:flex-start; gap:2px; width:100%; padding:10px 14px}
.fiche-chip-style.on::before{content:none}
.fiche-chip-style.on .fiche-chip-lib::before{content:'✓ '; font-weight:700}
.fiche-chip-lib{font-weight:600}
.fiche-chip-resume{font-size:.76rem; font-weight:400; line-height:1.35; color:var(--f-txt2)}
.fiche-chip-style.on .fiche-chip-resume{color:var(--f-on-accent); opacity:.9}
.fiche-chip-style:disabled .fiche-chip-resume{color:var(--f-off)}

/* ---------- Disponibilité : périodes ---------- */
.fiche-periodes{display:flex; flex-direction:column; align-items:flex-start; gap:var(--sp-2); margin-top:var(--sp-4); padding-top:var(--sp-3); border-top:1px dashed var(--line-2)}
.fiche-periodes-liste{display:flex; flex-direction:column; gap:var(--sp-2); width:100%}
.fiche-periode{display:grid; grid-template-columns:1fr 1fr auto; gap:8px; align-items:end}   /* dates + « Retirer » sur UNE ligne */
.fiche-date-champ{display:flex; flex-direction:column; gap:4px}
.fiche-date-lbl{font-size:.68rem; color:var(--text-2); letter-spacing:.05em; text-transform:uppercase}
.fiche-date{width:100%; box-sizing:border-box; min-height:44px; padding:0 8px; font-size:.94rem}   /* jj/mm/aaaa + icône tiennent à 360 px */
.fiche-retirer{min-width:44px; min-height:44px; padding:0 var(--sp-2); background:none; border:1px solid var(--line); border-radius:var(--r-xs); color:var(--text-2); font:inherit; cursor:pointer}
.fiche-retirer:hover{color:var(--f-crit-txt); border-color:var(--crit-line); background:var(--crit-bg)}
.fiche-retirer-lbl{display:none}
@media (min-width:480px){ .fiche-retirer-lbl{display:inline} .fiche-retirer{padding:0 var(--sp-3)} }
.fiche-ajout,.fiche-confirmer{min-height:44px; white-space:nowrap}
.fiche-langue-saisie .fiche-ajout{flex:0 0 auto}
.fiche-echeance{color:var(--text-2)}
.fiche-confirmer{align-self:flex-start; color:var(--f-warn-txt); border-color:var(--warn-line)}
.fiche-confirmer:disabled{opacity:.7}

/* ---------- Champs texte ---------- */
.fiche-form .auth-input{font-size:1rem}
.fiche-input-court{width:100%; max-width:132px; box-sizing:border-box; min-height:44px; text-transform:uppercase}
.fiche-langue-saisie{display:flex; gap:8px; align-items:center}
.fiche-langue-saisie .auth-input{flex:1 1 auto; min-height:44px}
.fiche-textarea{width:100%; box-sizing:border-box; height:auto; min-height:124px; padding:10px 13px; line-height:1.5; resize:vertical; font-family:inherit}

/* ---------- Interrupteurs de visibilité ---------- */
.fiche-interrupteurs{display:flex; flex-direction:column}
.fiche-switch{position:relative; display:grid; grid-template-columns:auto 1fr auto; gap:var(--sp-3); align-items:center; min-height:52px; padding:6px 0; border-top:1px solid var(--line); cursor:pointer}
.fiche-switch:first-child{border-top:0}
.fiche-switch-input{position:absolute; opacity:0; width:44px; height:28px; margin:0; left:0; cursor:pointer}
.fiche-switch-piste{position:relative; width:44px; height:26px; border-radius:26px; background:var(--surface-3); border:1px solid var(--line-2); transition:background .15s, border-color .15s}
.fiche-switch-piste::after{content:''; position:absolute; top:2px; left:2px; width:20px; height:20px; border-radius:50%; background:var(--text-2); transition:transform .15s, background .15s}
.fiche-switch-input:checked + .fiche-switch-piste{background:var(--accent-bg); border-color:var(--accent)}
.fiche-switch-input:checked + .fiche-switch-piste::after{transform:translateX(18px); background:var(--accent)}
.fiche-switch-input:focus-visible + .fiche-switch-piste{outline:2px solid var(--accent); outline-offset:2px}
.fiche-switch-lib{font-size:.92rem; color:var(--text)}
.fiche-switch-etat{font-size:.72rem; color:var(--f-txt2); letter-spacing:.04em}
.fiche-switch-input:checked ~ .fiche-switch-etat{color:var(--f-accent-txt); font-weight:700}

/* ---------- Barre d'enregistrement (EN BAS du formulaire) ---------- */
/* Au repos : simple pied de formulaire. Dès que le formulaire est modifié (.is-dirty) : COLLÉE au bas de
   l'écran (sticky, pleine largeur de la carte) avec « N modification(s) non enregistrée(s) » + Enregistrer.
   Sticky (pas fixed) : elle ne dépasse jamais la carte, ne masque pas le dernier champ (sa place naturelle
   est APRÈS lui) et ne chevauche aucune navigation (l'en-tête ANIMA est fixé en haut). */
.fiche-barre{display:flex; flex-direction:column; gap:var(--sp-2); margin-top:var(--sp-4); padding-top:var(--sp-3)}
.fiche-barre.is-dirty{position:sticky; bottom:var(--nav-bas-h, 0px); z-index:6; margin-inline:calc(var(--fiche-pad) * -1); padding:var(--sp-3) var(--fiche-pad) calc(var(--sp-3) + env(safe-area-inset-bottom, 0px)); background:var(--surface); border-top:2px solid var(--accent)}
.fiche-barre .auth-error{color:var(--f-crit-txt)}
.fiche-barre .profil-note{color:var(--f-ok-txt)}
.fiche-barre-ligne{display:flex; align-items:center; gap:var(--sp-3)}
.fiche-etat{flex:1 1 auto; font-size:.8rem; line-height:1.3; color:var(--f-txt2)}
.fiche-etat.is-dirty{color:var(--f-accent-txt); font-weight:700}
.fiche-enregistrer{flex:0 0 auto; align-self:auto; height:48px; min-width:132px; margin-top:0; padding:0 var(--sp-4); color:var(--f-on-accent)}
.fiche-enregistrer:disabled{opacity:1; background:var(--surface-3); color:var(--f-txt2); border:1px solid var(--line-2)}

@media (min-width:641px){
  .fiche-derive-ligne{flex-direction:row; align-items:baseline; gap:var(--sp-3)}
  .fiche-derive-k{flex:0 0 150px}
  .fiche-cartes{flex-direction:row; flex-wrap:wrap}
  .fiche-chip-style{width:calc(50% - 4px)}
  .fiche-barre-ligne{justify-content:space-between}
  .fiche-enregistrer{min-width:220px}
}
@media (max-width:640px){
  .fiche-derives{padding:var(--sp-4)}
}
/* 360 px : « jj/mm/aaaa » + icône calendrier + « ✕ » sur UNE ligne — l'année ne doit pas être coupée. */
@media (max-width:400px){
  .fiche-periode{gap:6px}
  .fiche-form .fiche-date{font-size:.84rem; padding:0 6px}          /* > .fiche-form .auth-input{font-size:1rem} */
  .fiche-date::-webkit-calendar-picker-indicator{margin:0; padding:0 0 0 2px}
}

/* ============================================================
   Sélecteur de qualifications (B3bis) — section Qualifications de #/mon-profil (js/qualif-select.js)
   Liste fermée + option « Autre diplôme d'animation » = recherche dans l'arrêté du 9 février 2007
   (data/diplomes-animation.json). Petit sélecteur mobile : cibles >= 44 px, champ à 16 px, 8 résultats
   au plus (« affine ta recherche »). Hors .fiche-section : jetons locaux, aucun token global touché.
   ============================================================ */
.qedit-row{--q-accent-txt:var(--accent)}
.qedit-row .qedit-type{flex:1 1 100%; height:44px; font-size:1rem}
.qsel,.qsel-choisi{flex:1 1 100%; min-width:0; overflow-wrap:anywhere}
.qsel[hidden],.qsel-choisi[hidden]{display:none}
.qsel{display:flex; flex-direction:column; gap:var(--sp-2); padding:var(--sp-3); border:1px solid var(--line-2); border-radius:var(--r-sm); background:var(--surface)}
.qsel-lbl{display:flex; flex-direction:column; gap:6px; font-size:.78rem; color:var(--text-2)}
.qedit-row .qsel-champ{flex:none; height:44px; width:100%; font-size:1rem}
.qsel-champ::-webkit-search-cancel-button{-webkit-appearance:none; appearance:none}   /* croix bleue système hors charte : « Annuler » suffit */
.qsel-etat{margin:0; font-size:.8rem; line-height:1.4; color:var(--text-2)}
.qsel-liste{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:6px}
.qsel-item{margin:0}
.qsel-res{display:flex; flex-direction:column; align-items:flex-start; gap:2px; width:100%; min-height:48px; padding:8px 12px; border:1px solid var(--line-2); border-radius:var(--r-sm); background:var(--surface-3); color:var(--text); font:inherit; font-size:.88rem; line-height:1.3; text-align:left; cursor:pointer}
.qsel-res:hover{border-color:var(--survol-filet)}
.qsel-res:focus-visible,.qsel-annuler:focus-visible,.qsel-lien:focus-visible{outline:2px solid var(--accent); outline-offset:2px}
.qsel-res-lib{font-weight:600}
.qsel-res-art{font-size:.74rem; color:var(--text-2)}
.qsel-annuler{align-self:flex-start; min-height:44px; padding:0 var(--sp-4); border:1px solid var(--line-2); border-radius:var(--r-sm); background:none; color:var(--text-2); font:inherit; cursor:pointer}
.qsel-choisi{display:flex; flex-direction:column; align-items:flex-start; gap:2px}
.qsel-choisi-txt{margin:0; font-size:.82rem; line-height:1.4; color:var(--text-2)}
.qsel-lien{min-height:44px; padding:0; border:0; background:none; color:var(--q-accent-txt); font:inherit; font-size:.86rem; font-weight:600; cursor:pointer; text-align:left}


/* ============================================================
   Fiche d'un animateur vue par le DIRECTEUR (B4) — js/fiche-vue-views.js, styles .fv-*
   Niveau 1 : un écran mobile SANS scroll (412 et 360 px) ; niveau 2 : accordéon .is-expanded.
   Jetons --f-* ci-dessus (contrastes >= 4,5:1 dans les deux thèmes). Tags : .tag .fiche-tag .t-*.
   ============================================================ */
.fv{display:flex; flex-direction:column; gap:var(--sp-3)}
.fv-carte{display:flex; flex-direction:column; gap:8px; padding:var(--sp-4); border-radius:var(--r-lg)}
.fv-tete{display:flex; align-items:center; gap:var(--sp-3)}
.fv-avatar{flex:none; display:grid; place-items:center; width:44px; height:44px; border-radius:50%; background:var(--surface-3); border:1px solid var(--line-2); color:var(--f-accent-txt); font-size:1rem; font-weight:700; letter-spacing:.02em}
.fv-id{display:flex; flex-direction:column; align-items:flex-start; gap:4px}
.fv-nom{margin:0; font-size:1.15rem; font-weight:700; line-height:1.2; color:var(--text)}
.fv-pos{display:flex; flex-wrap:wrap; align-items:center; gap:6px; margin:0}
.fv-pos-lib{font-size:.94rem; font-weight:700; color:var(--f-accent-txt)}
.fv-puce{display:inline-block; padding:3px 9px; border:1px solid var(--line-2); border-radius:var(--r-xs); background:var(--surface-3); color:var(--text); font-size:.76rem; line-height:1.3}
.fv-puce-force{border-color:var(--line-2)}
.fv-tags{display:flex; flex-wrap:wrap; gap:6px}
.fv-tags .tag{flex-wrap:wrap; padding:3px 8px; font-size:.72rem}
/* Pastille d'échéance imbriquée dans sa casquette (SB valide 01/2029, PSC1 3 ans) : mêmes teintes que .tag .t-*, posées sur
   --surface OPAQUE (pas sur la teinte ambre de la casquette) : les contrastes de fiche.test.mjs (ok/warn/crit sur --surface) restent vrais. */
.fv-etat{margin-left:2px; padding:1px 7px; border:1px solid var(--line-2); border-radius:6px; font-size:.7rem; font-weight:600; line-height:1.35; white-space:nowrap}
.fv-etat.t-ok{color:var(--f-ok-txt); background:linear-gradient(var(--ok-bg),var(--ok-bg)), var(--surface); border-color:var(--ok-line)}
.fv-etat.t-warn{color:var(--f-warn-txt); background:linear-gradient(var(--warn-bg),var(--warn-bg)), var(--surface); border-color:var(--warn-line)}
.fv-etat.t-crit{color:var(--f-crit-txt); background:linear-gradient(var(--crit-bg),var(--crit-bg)), var(--surface); border-color:var(--crit-line)}
.fv-etat.t-neutre{color:var(--f-txt2); background:var(--surface-3)}
.fv-acompleter{margin:0; padding:9px 12px; font-size:.84rem; line-height:1.45; color:var(--text); background:var(--accent-bg); border:1px solid var(--accent-glow); border-radius:var(--r-sm)}
.fv-facettes{display:grid; grid-template-columns:92px 1fr; gap:5px 10px; margin:0}
.fv-k{margin:0; padding-top:1px; font-size:.68rem; font-weight:600; letter-spacing:.06em; text-transform:uppercase; color:var(--f-txt2)}
.fv-v{margin:0; font-size:.86rem; line-height:1.4; color:var(--text)}
.fv-liste{display:flex; flex-wrap:wrap; gap:6px}
.fv-forces{font-weight:600}
.fv-muet{color:var(--f-txt2); font-size:.82rem}
.fv-dispo-etat{font-weight:700}
.fv-dispo-etat.a_jour{color:var(--f-ok-txt)}
.fv-dispo-etat.expiree{color:var(--f-warn-txt)}
.fv-dispo-etat.non_renseignee{color:var(--f-txt2)}
.fv-regards{display:grid; grid-template-columns:92px 1fr; gap:6px 10px; padding-top:var(--sp-2); border-top:1px solid var(--line)}
.fv-regards-v{display:flex; flex-direction:column; gap:2px; font-size:.86rem; line-height:1.4}
.fv-regards-l{font-weight:700; color:var(--text)}
.fv-regards-badges{font-size:.82rem; line-height:1.4}
.fv-neutre{align-items:flex-start}
.fv-neutre-txt{margin:0; font-size:.94rem; line-height:1.45; color:var(--text)}

/* Niveau 2 : accordéon (patron .is-expanded de .fiche-acc / .hub-acc) */
.fv-acc{border-top:1px solid var(--line)}
.fv-acc-tete{display:flex; align-items:center; gap:var(--sp-2); width:100%; min-height:48px; padding:6px 0; background:none; border:0; color:var(--text); font:inherit; text-align:left; cursor:pointer}
.fv-acc-tete:focus-visible{outline:2px solid var(--accent); outline-offset:2px; border-radius:var(--r-sm)}
.fv-acc-titre{flex:none; font-size:.88rem; font-weight:700; color:var(--f-accent-txt)}
.fv-acc-sous{flex:1 1 auto; font-size:.74rem; color:var(--f-txt2); overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.fv-acc-chev{flex:none; display:grid; place-items:center; color:var(--text-2)}
.fv-acc-chev .ico{width:16px; height:16px; transform:rotate(-90deg); transition:transform .15s}
.fv-acc.is-expanded .fv-acc-chev .ico{transform:rotate(0deg)}
.fv-acc-corps{display:none; flex-direction:column; gap:var(--sp-3); padding:var(--sp-2) 0 var(--sp-1)}
.fv-acc.is-expanded .fv-acc-corps{display:flex}
.fv-bloc{display:flex; flex-direction:column; gap:6px}
.fv-bloc-titre{margin:0; font-size:.68rem; font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:var(--f-txt2)}
.fv-quals{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:var(--sp-2)}
.fv-qual{padding:8px 10px; border:1px solid var(--line); border-radius:var(--r-sm)}
.fv-qual-tete{display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:6px}
.fv-qual-lib{font-size:.88rem; font-weight:600; color:var(--text)}
.fv-qual-meta{margin:4px 0 0; font-size:.78rem; color:var(--f-txt2)}
.fv-ligne{margin:0; font-size:.86rem}
.fv-presentation{margin:0; font-size:.88rem; line-height:1.5; white-space:pre-wrap; color:var(--text)}
.fv-lien{display:block; min-height:44px; line-height:44px; color:var(--f-accent-txt); font-size:.9rem; font-weight:600; text-decoration:none}

@media (min-width:641px){
  .fv-carte{padding:var(--sp-5)}
  .fv-facettes,.fv-regards{grid-template-columns:130px 1fr}
}
/* 360 px : la colonne des clés se réduit pour laisser de la place aux valeurs */
@media (max-width:400px){
  .fv-carte{padding:var(--sp-3)}
  .fv-facettes,.fv-regards{grid-template-columns:92px 1fr; gap:5px 8px}
  .fv-k{font-size:.64rem}
  .fv-acc-sous{display:none}
}


/* ============================================================
   Retours de séjour (B6) — js/retours-views.js, styles .rt-*
   « Mes retours » (fiche d'un animateur côté directeur ; #/mon-profil côté animateur). Formulaire mobile :
   cibles >= 44 px, champs à 16 px, « Enregistrer » EN BAS. Réutilise .fiche-chip / .fiche-acc / .fiche-champ
   et les jetons --f-* (contrastes >= 4,5:1 dans les deux thèmes). État jamais à la couleur seule : mot + glyphe.
   B6ter : formulaire COMPACT (accordéons repliés, badges = sous-ensemble des forces observées) et barre
   d'enregistrement COLLANTE en bas dès qu'il y a une modification (patron .fiche-barre.is-dirty de « Ma fiche »).
   ============================================================ */
.rt{margin-top:var(--sp-3)}
.rt-corps{display:flex; flex-direction:column; gap:var(--sp-3)}
.rt-sejour{display:flex; flex-direction:column; gap:var(--sp-2)}
.rt-sejour-tete{display:flex; flex-wrap:wrap; align-items:baseline; justify-content:space-between; gap:4px var(--sp-3); padding-top:var(--sp-2)}
.rt-sejour-nom{margin:0; font-size:.94rem; font-weight:700; color:var(--text)}
.rt-sejour-fin{font-size:.76rem; color:var(--f-txt2)}
.rt-carte{--rt-pad:var(--sp-4); display:flex; flex-direction:column; gap:var(--sp-2); padding:var(--rt-pad); border-radius:var(--r-lg)}   /* --rt-pad = padding de la carte (barre collante en pleine largeur) */
.rt-tete{display:flex; flex-wrap:wrap; align-items:flex-start; justify-content:space-between; gap:6px var(--sp-3)}
.rt-personne{font-size:1rem; font-weight:700; color:var(--text)}
.rt-etat{display:flex; flex-direction:column; align-items:flex-start; gap:4px}
.rt-etat-detail{margin:0; font-size:.78rem; line-height:1.4; color:var(--f-txt2)}
.rt-recu-pastille{font-size:.72rem; font-weight:700; color:var(--f-accent-txt); letter-spacing:.03em}
.rt-actions-haut{display:flex; flex-wrap:wrap; gap:var(--sp-2)}
.rt-btn{min-height:44px; white-space:nowrap}
.rt-btn[aria-expanded="true"]{border-color:var(--accent); color:var(--f-accent-txt)}
.rt-btn-primaire{border-style:solid; border-color:var(--accent); color:var(--f-accent-txt); font-weight:700}   /* action attendue : donner un retour (état « à déposer ») */
.rt-zone{display:flex; flex-direction:column; gap:var(--sp-2)}
.rt-zone:empty{display:none}
.rt-confirm{margin:0; color:var(--f-ok-txt); font-size:.84rem; line-height:1.45}

/* Formulaire (B6ter : compact) */
.rt-form{display:flex; flex-direction:column; gap:0; padding-top:var(--sp-2); border-top:1px solid var(--line)}
.rt-form .fiche-groupe{margin-top:var(--sp-3)}
.rt-form > .fiche-groupe:first-child{margin-top:0}
.rt-form-tete{display:flex; align-items:center; justify-content:space-between; gap:var(--sp-3); border-bottom:1px solid var(--line)}
.rt-form-tete .fiche-groupe{flex:1 1 auto; margin:0; padding-bottom:0; border-bottom:0}
.rt-lien-fiche,.rt-personne-lien{color:var(--f-accent-txt); font-weight:600; text-decoration:none}
.rt-lien-fiche{flex:none; display:inline-flex; align-items:center; min-height:44px; padding:0 2px; font-size:.86rem}
.rt-personne-lien{display:inline-block; padding:12px 0; margin:-12px 0; text-decoration:underline; text-underline-offset:3px}   /* zone de tap >= 44 px sans agrandir la carte */
.rt-lien-fiche:focus-visible,.rt-personne-lien:focus-visible{outline:2px solid var(--accent); outline-offset:2px; border-radius:var(--r-xs)}
.rt-form .fiche-champ{gap:4px; padding:6px 0}
.rt-form .fiche-hint{font-size:.76rem; line-height:1.4}
.rt-form .fiche-acc + .fiche-acc{margin-top:4px}
.rt-form .fiche-acc-tete{min-height:44px; padding:4px 12px}
.rt-note{min-height:80px}
.rt-badges-aide{margin:0}
.rt-verdict{display:grid; grid-template-columns:repeat(3, 1fr); gap:8px}
.rt-verdict-btn{min-height:48px; padding:8px 6px; border:1px solid var(--line-2); border-radius:var(--r-sm); background:var(--surface-3); color:var(--text); font:inherit; font-size:.92rem; font-weight:600; cursor:pointer}
.rt-verdict-btn.on{background:var(--accent); color:var(--f-on-accent); border-color:transparent}
.rt-verdict-btn.on::before{content:'✓ '; font-weight:700}
.rt-verdict-btn:disabled{cursor:not-allowed}
.rt-verdict-btn.on:disabled{opacity:1}
.rt-verdict-btn:not(.on):disabled{background:transparent; border-style:dashed; color:var(--f-off)}
.rt-verdict-btn:focus-visible{outline:2px solid var(--accent); outline-offset:2px}
.fiche-champ.is-figee .fiche-hint{color:var(--f-warn-txt)}
/* Barre d'enregistrement : au repos, simple pied de formulaire ; dès qu'il y a une modification (.is-dirty) elle est
   COLLÉE au bas de l'écran (sticky, pleine largeur de la carte) : « N modification(s) non enregistrée(s) » + le bouton
   restent sous le pouce, la phrase qui explique le figement juste au-dessus. Sticky (pas fixed) : elle ne dépasse jamais
   la carte, sa place naturelle est APRÈS le dernier champ. */
.rt-barre{display:flex; flex-direction:column; gap:var(--sp-2); margin-top:var(--sp-3); padding-top:var(--sp-2)}
.rt-barre.is-dirty{position:sticky; bottom:var(--nav-bas-h, 0px); z-index:6; margin-inline:calc(var(--rt-pad) * -1); padding:var(--sp-2) var(--rt-pad) calc(var(--sp-2) + env(safe-area-inset-bottom, 0px)); background:var(--surface); border-top:2px solid var(--accent)}
.rt-barre-ligne{display:flex; align-items:center; gap:var(--sp-3)}
.rt-info{margin:0; padding:1px 0 1px 10px; font-size:.78rem; line-height:1.4; font-weight:600; color:var(--text); border-left:3px solid var(--accent)}
.rt-erreur{color:var(--f-crit-txt)}
.rt-enregistrer{flex:0 0 auto; align-self:auto; width:auto; height:48px; min-width:132px; margin-top:0; padding:0 var(--sp-4); color:var(--f-on-accent)}
.rt-enregistrer:disabled{opacity:1; background:var(--surface-3); color:var(--f-txt2); border:1px solid var(--line-2)}
/* Retour reçu : le bouton « Enregistrer ma réponse » vit hors barre, pleine largeur */
.rt-reponse .rt-enregistrer{width:100%; flex:none}

/* Retour reçu */
.rt-recu{display:flex; flex-direction:column; gap:var(--sp-2); padding:var(--sp-3); border:1px solid var(--line); border-radius:var(--r-sm); background:var(--surface-2)}
.rt-recu-tete{display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:6px var(--sp-3)}
.rt-recu-titre{margin:0; font-size:.92rem; font-weight:700; color:var(--text)}
.rt-ligne{display:grid; grid-template-columns:92px 1fr; gap:6px 10px; font-size:.86rem; line-height:1.4}
.rt-ligne .fv-k{padding-top:2px}
.rt-ligne-v{color:var(--text)}
.rt-note-recue{margin:0; padding:8px 10px; font-size:.88rem; line-height:1.5; color:var(--text); white-space:pre-wrap; border-left:3px solid var(--line-2); background:var(--surface)}
.rt-reponse{border-bottom:0; padding-bottom:0}
@media (min-width:641px){
  .rt-carte{--rt-pad:var(--sp-5)}
  .rt-enregistrer{min-width:220px}
  .rt-reponse .rt-enregistrer{width:auto; align-self:flex-end}
}
@media (max-width:400px){
  .rt-carte{--rt-pad:var(--sp-3)}
  .rt-ligne{grid-template-columns:78px 1fr}
}


/* ============================================================
   Profil directeur (B7-front) — js/fiche-directeur-views.js
   « Ma fiche directeur » (#/mon-profil, directeur / admin) réutilise ENTIÈREMENT « Ma fiche » (.fiche-section,
   .fiche-derives, .fiche-champ, .fiche-chip, barre .fiche-barre collante) ; la fiche d'un directeur vue par
   l'animateur (#/fiche-directeur/:id) réutilise la carte .fv-* de la fiche animateur (avatar, facettes, Regards).
   Ne pose que ce qui manque.
   ============================================================ */
.fiche-sejours-diriges{font-size:.94rem; font-weight:600; color:var(--text)}
.fiche-form > .fiche-note:first-child{margin-bottom:var(--sp-2)}
.fv-tete .fv-id .fv-muet{margin-top:-2px}
[data-fiche-directeur-vue] .fv-bloc{margin-top:var(--sp-2)}   /* respiration entre les facettes et les textes de la fiche directeur */


/* ============================================================
   Profil pro (P3, spec 2026-09-23-profil-pro-design.md § 3, § 5, § 6) — js/fiche-profil-views.js,
   js/fiche-views.js (onglets des deux fiches), js/fiche-directeur-views.js, js/fiche-vue-views.js.
   Statut prouvé en tête du profil ; deux fiches en onglets ; étiquettes sans plafond + points forts ★ (≤ 3 par
   catégorie) ; mobilité ; parcours ANIMA ; réalisations. Jetons uniquement (--f-* dans .fiche-section / .fv,
   jetons communs ailleurs) ; un état ne se lit jamais à la couleur seule (★ plein / ☆ vide, mots).
   ============================================================ */

/* ---------- Statut en tête du profil ---------- */
.fiche-statut{display:flex; flex-direction:column; gap:var(--sp-2); padding:var(--sp-4) var(--sp-5); border-radius:var(--r-lg); margin-bottom:var(--sp-4)}
.fiche-statut-k{margin:0; font-size:.7rem; font-weight:600; letter-spacing:.1em; text-transform:uppercase; color:var(--f-txt2)}
.fiche-statut-ligne{display:flex; flex-wrap:wrap; align-items:center; gap:var(--sp-2) var(--sp-3)}
.fiche-statut-niveau{font-size:1.3rem; font-weight:700; line-height:1.2; color:var(--text)}
.fiche-statut-expirees{display:flex; flex-wrap:wrap; gap:6px}
.fiche-statut-import{display:flex; flex-direction:column; align-items:flex-start; gap:var(--sp-2); padding-top:var(--sp-2); border-top:1px solid var(--line)}
.fiche-statut-appel{margin:0; font-size:.86rem; line-height:1.5; color:var(--text)}
.fiche-statut-cta{display:inline-flex; align-items:center; gap:8px}
.fiche-statut-cta .ico{width:18px; height:18px}
.fiche-statut-hote{width:100%}
/* Étiquette compacte (vues de tiers) : niveau en gras + preuve. */
.fiche-statut-mini{display:inline-flex; flex-wrap:wrap; align-items:center; gap:6px}
.fiche-statut-mini-niveau{font-size:.9rem; font-weight:700; color:var(--text)}

/* ---------- Deux fiches : onglets (jetons communs : hors de .fiche-section) ---------- */
.fiche-mes-fiches{display:flex; flex-direction:column; gap:var(--sp-3); min-width:0}
.fiche-mes-fiches [hidden]{display:none !important}
.fiche-onglets{display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:6px; padding:4px; border:1px solid var(--line-2); border-radius:var(--r-md); background:var(--surface-3)}
.fiche-onglet{display:flex; flex-direction:column; align-items:flex-start; justify-content:center; gap:1px; min-width:0; min-height:52px; padding:6px 12px; border:1px solid transparent; border-radius:var(--r-sm); background:transparent; color:var(--texte-2); font:inherit; text-align:left; cursor:pointer}
.fiche-onglet-lib{font-size:.94rem; font-weight:700; color:var(--text)}
.fiche-onglet-sous{font-size:.72rem; line-height:1.3; color:var(--texte-2)}
.fiche-onglet.on{background:var(--surface); border-color:var(--accent); box-shadow:inset 0 -3px 0 var(--accent)}
.fiche-onglet.on .fiche-onglet-lib::before{content:'▸ '; color:var(--accent)}
.fiche-onglet:focus-visible{outline:2px solid var(--accent); outline-offset:2px}
.fiche-panneau{min-width:0}

/* ---------- Étiquette + point fort (★) ---------- */
.fiche-puce{display:inline-flex; align-items:stretch; max-width:100%}
.fiche-puce.is-choisie > .fiche-chip{border-top-right-radius:0; border-bottom-right-radius:0}
.fiche-pf{flex:none; min-width:44px; min-height:44px; margin-left:-1px; padding:0 10px; border:1px solid var(--line-2); border-radius:0 var(--r-sm) var(--r-sm) 0; background:var(--surface); color:var(--f-txt2); font:inherit; font-size:1.1rem; line-height:1; cursor:pointer}
.fiche-pf:hover{color:var(--survol-texte); border-color:var(--survol-filet)}
.fiche-pf.on{background:var(--accent-bg); color:var(--f-accent-txt); border-color:var(--accent); font-weight:700}
.fiche-pf.is-plein{border-style:dashed; color:var(--f-off)}
.fiche-pf:focus-visible{outline:2px solid var(--accent); outline-offset:2px}
.fiche-cartes .fiche-puce{display:flex; width:100%}
.fiche-cartes .fiche-puce > .fiche-chip-style{flex:1 1 auto; width:auto}
.fiche-pf-tete{margin:0; font-size:.82rem; line-height:1.45}
.fiche-pf-k{font-weight:700; color:var(--f-accent-txt)}
.fiche-pf-v{font-weight:600; color:var(--text)}
.fiche-pf-aide{color:var(--f-txt2)}
.fiche-bloque{margin-top:var(--sp-1)}
.fiche-ancien{padding:6px 10px; border-left:3px solid var(--line-2); background:var(--surface-3)}

/* ---------- Mobilité ---------- */
.fiche-mob-permis{display:flex; flex-wrap:wrap; align-items:center; gap:6px var(--sp-2)}
.fiche-mob-permis .fiche-derive-k{flex:none}
.fiche-mob-deps{display:flex; flex-direction:column; gap:var(--sp-2); margin-top:var(--sp-2)}

/* ---------- Parcours ANIMA, réalisations (lecture seule) ---------- */
.fiche-parcours,.fiche-realisations{display:flex; flex-direction:column; gap:6px; padding-top:var(--sp-2); border-top:1px solid var(--line)}
.fiche-parcours-liste{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:6px}
.fiche-parcours-item{padding:8px 10px; border:1px solid var(--line); border-radius:var(--r-sm)}
.fiche-parcours-tete{display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:4px 8px}
.fiche-parcours-sejour{font-size:.9rem; font-weight:600; color:var(--text)}
.fiche-parcours-meta{margin:2px 0 0; font-size:.78rem; line-height:1.4; color:var(--f-txt2)}
.fiche-realisation-lien{display:inline-flex; align-items:center; min-height:44px; color:var(--f-accent-txt); font-size:.9rem; font-weight:600; text-decoration:underline; text-underline-offset:3px}
.fiche-realisation-lien:focus-visible{outline:2px solid var(--accent); outline-offset:2px; border-radius:var(--r-xs)}

/* ---------- Vues de tiers : points forts marqués ★ (texte), statut en tête ---------- */
.fv-puce-fort{font-weight:600; border-color:var(--accent)}
.fv-pos-fort{text-decoration:none}
.fv .fiche-parcours{border-top:0; padding-top:0}

/* Mobile (≤ 860 px) : la coque pose une barre de navigation FIXE en bas (.nav-bas : 58 px + filet + zone sûre,
   z-index 40, css/coque.css). Une barre d'enregistrement collée à bottom:0 passait DESSOUS : « Enregistrer » était
   masqué et le tap ouvrait la navigation (constaté en recette P3). Elle se colle donc juste AU-DESSUS. */
@media (max-width:860px){
  .fiche-barre.is-dirty,.rt-barre.is-dirty{bottom:calc(59px + env(safe-area-inset-bottom, 0px))}
  .fiche-barre.is-dirty{padding-bottom:var(--sp-3)}
  .rt-barre.is-dirty{padding-bottom:var(--sp-2)}
}
@media (max-width:640px){
  .fiche-statut{padding:var(--sp-3) var(--sp-4)}
  .fiche-statut-niveau{font-size:1.15rem}
}
@media (max-width:400px){
  .fiche-onglet{padding:6px 8px}
  .fiche-onglet-sous{font-size:.68rem}
}