/* Ma fiche d'identité (12/10) : la conversation, une question à la fois, puis « Ce que l'ajence a compris de toi » et les réponses
   modifiables sur place (marque.js › monterFiche). Posée par marque.js ; à relier aussi dans index.html, pour qu'elle arrive avec le reste.
   Même air que les écrans récents : sur-titre doré, titre Inter Tight, carte blanche, boutons verts. Préfixe .fi- */
.fi { max-width: 760px; }
.fi.fi-nu { max-width: none; }
.fi-tete { display: flex; align-items: center; justify-content: space-between; gap: 10px 16px; flex-wrap: wrap; margin: 0 0 18px; }
.fi-sur { display: block; font-size: 14px; font-weight: 500; letter-spacing: .06em; text-transform: uppercase; color: var(--or-texte); }
.fi-pas { display: flex; gap: 5px; flex: 1 1 160px; max-width: 280px; }
.fi-pas i { display: block; height: 4px; flex: 1; border-radius: 999px; background: var(--surface); }
.fi-pas i.on { background: var(--bx2); }
.fi-pas i.fait { background: rgba(31,91,82,.42); }
.fi-q { font-family: var(--tight); font-weight: 600; font-size: 24px; line-height: 1.2; letter-spacing: 0; text-transform: none; color: var(--bx); margin: 0 0 6px; }
.fi-aide { margin: 0 0 20px; font-size: 15.5px; line-height: 1.5; color: var(--encre2); max-width: 620px; }
.fi-champs { margin-top: 18px; }
.fi-champs .champ { margin-bottom: 16px; }
.fi-champs .champ:last-child { margin-bottom: 0; }
.fi-champs .champ label { font-size: 15.5px; }
.fi-champs input[type=text], .fi-champs textarea { font-size: 16px; line-height: 1.5; min-height: 48px; }
.fi-champs textarea { min-height: 104px; }
.fi-champs input::placeholder, .fi-champs textarea::placeholder { color: #8A948F; }
.fi-champs .choix.compact button { font-size: 14.5px; min-height: 40px; }
/* Le libellé d'une question à un seul champ : la question elle-même l'annonce, le libellé reste pour les lecteurs d'écran. */
.fi-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.fi-erreur { margin: 10px 0 0; font-size: 14.5px; color: #8A3B2E; }
.fi-erreur[hidden] { display: none; }
.fi-actions { margin-top: 22px; }
.fi-actions .btn { min-height: 46px; }
.fi-actions .btn.lien.petit { padding-left: 0; }
.fi-pied { display: flex; justify-content: flex-end; gap: 6px 14px; flex-wrap: wrap; margin-top: 6px; padding-top: 12px; border-top: 1px solid var(--ligne); }
.fi-pied .btn.lien.petit { color: var(--encre2); padding: 8px 4px; }
.fi-pied .btn.lien.petit:hover { color: var(--bx2); background: transparent; }

/* Le récap : « Ce que l'ajence a compris de toi », puis les réponses une par une. */
.fi-compris { background: var(--fond); border-radius: 16px; padding: 20px 22px; margin: 0 0 22px; }
.fi-compris .fi-sur { margin-bottom: 10px; }
.fi-compris p { margin: 0 0 8px; font-size: 16px; line-height: 1.6; color: var(--bx); }
.fi-compris p:last-child { margin-bottom: 0; }
.fi-compris b { font-weight: 600; }
.fi-tete-rep { margin-bottom: 8px; }
.fi-tete-rep .indice { font-size: 14px; color: var(--encre2); }
.fi-reponses { display: flex; flex-direction: column; }
.fi-rep { display: flex; align-items: center; gap: 12px; width: 100%; text-align: left; border: 0; border-top: 1px solid var(--ligne); background: transparent; color: var(--bx); padding: 14px 8px; border-radius: 12px; cursor: pointer; font: inherit; }
.fi-rep:last-child { border-bottom: 1px solid var(--ligne); }
.fi-rep:hover { background: var(--doux); }
.fi-rep:focus-visible { outline: 2px solid var(--bx2); outline-offset: 2px; }
.fi-rep-texte { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.fi-rep-texte small { font-size: 14px; letter-spacing: .04em; text-transform: uppercase; color: var(--encre2); }
.fi-rep-texte > span { font-size: 16px; line-height: 1.5; overflow-wrap: anywhere; }
.fi-rep-texte .indice { font-size: 15px; color: var(--encre2); }
.fi-rep-lib { font-weight: 500; color: var(--encre2); }
.fi-rep-lib::after { content: ' :'; }
.fi-rep.vide .fi-rep-texte > span { color: var(--encre2); }
.fi-rep-ico { flex: none; width: 40px; height: 40px; border-radius: 12px; display: inline-flex; align-items: center; justify-content: center; color: var(--bx2); background: var(--carte); border: 1px solid rgba(27,33,31,.14); }
.fi-rep:hover .fi-rep-ico { border-color: var(--bx2); }

/* Dans la prise en main : la carte de l'étape fait déjà le fond blanc. */
.fi-nu .fi-compris { background: var(--fond); }

@media (max-width: 640px) {
  .fi.panneau { padding: 22px 18px; }
  .fi-q { font-size: 22px; }
  .fi-actions { gap: 10px; }
  .fi-actions .droite { display: none; }
  .fi-actions .btn:not(.lien) { flex: 1 1 100%; justify-content: center; }
  .fi-actions .btn.lien.petit { flex: 1 1 100%; justify-content: flex-start; order: 3; }
  .fi-compris { padding: 18px 16px; }
  .fi-rep { padding: 12px 4px; }
}