/* FOOTPASS Messenger v2 · Coffre-fort v3 · tableau de bord
   S'appuie sur les tokens de coffre-lab.css (.cf.dark / .cf.light). */

/* Dans l'app v2, le coffre laisse la tab bar visible et cliquable (comme les autres écrans principaux) */
.hm .cf { bottom: 70px; }
.hm .cav { bottom: 70px; }

/* ── Bloc carte générique ── */
.cf3-block { border-radius: 16px; background: var(--card); border: 1px solid var(--hair); overflow: hidden; }

/* ── Lignes « À traiter » ── */
.cf3-aline { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 46px; padding: 9px 12px; text-align: left; cursor: pointer; background: none; border: none; color: var(--t1); font: 550 12px/1.35 'Inter', sans-serif; }
.cf3-aline + .cf3-aline { border-top: 1px solid var(--hair); }
.cf3-aline:active { background: var(--press); }
.cf3-aline > i { width: 28px; height: 28px; border-radius: 9px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.cf3-aline.sign > i { background: color-mix(in srgb, var(--orange) 15%, transparent); color: var(--orange); }
.cf3-aline.review > i { background: color-mix(in srgb, var(--amber) 15%, transparent); color: var(--amber); }
.cf3-aline.request > i { background: color-mix(in srgb, var(--accT) 13%, transparent); color: var(--accT); }
.cf3-aline.soon > i { background: color-mix(in srgb, var(--amber) 12%, transparent); color: var(--goldT); }
.cf3-aline > span { flex: 1; min-width: 0; }
.cf3-aline > svg { color: var(--t4); flex-shrink: 0; }
.cf3-aline b { font-weight: 700; }
.cf3-aline span em { font-style: normal; color: var(--t4); font-weight: 500; }
.cf3-aline.done { cursor: default; }
.cf3-aline.done > i { background: var(--press); color: var(--t3); }

/* À traiter : mêmes cartes que les Activités récentes, icône teintée par nature */
.cf3-prowic { width: 30px; height: 30px; border-radius: 10px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.cf3-prowic.sign { background: color-mix(in srgb, var(--orange) 15%, transparent); color: var(--orange); }
.cf3-prowic.review { background: color-mix(in srgb, var(--amber) 15%, transparent); color: var(--amber); }
.cf3-prowic.request { background: color-mix(in srgb, var(--accT) 13%, transparent); color: var(--accT); }
.cf3-prowic.soon { background: color-mix(in srgb, var(--amber) 12%, transparent); color: var(--goldT); }
.cf3-prowic.done { background: var(--press); color: var(--t3); }
.cf3-done { cursor: default; }
.cf3-emcat { font-weight: 700; }
.cf2-prow[role="button"] { cursor: pointer; }

/* Ligne d'activité : titre + date à droite, action dessous, catégorie colorée + dossier en pied */
.cf3-actrow { align-items: flex-start; min-height: 0; padding-top: 9px; padding-bottom: 9px; }
.cf3-actrow > .cf-doc-ic, .cf3-actrow > .cf3-prowic { margin-top: 2px; }
.cf3-actrow > svg { margin-top: 12px; }
.cf3-openTop { margin-top: 12px; }
.cf3-actline1 { display: flex; align-items: baseline; gap: 8px; min-width: 0; }
.cf3-actline1 b { flex: 1; min-width: 0; }
.cf3-when { flex: none; font: 500 10px/1.2 'Inter', sans-serif; font-style: normal; color: var(--t4); }
.cf3-act { display: block; font: 500 11px/1.35 'Inter', sans-serif; font-style: normal; color: var(--t2); margin-top: 1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cf3-actmeta { display: flex; align-items: center; gap: 5px; font: 600 10px/1.2 'Inter', sans-serif; font-style: normal; color: var(--t4); margin-top: 3px; white-space: nowrap; overflow: hidden; }
.cf3-actmeta i { width: 6px; height: 6px; border-radius: 99px; flex: none; }

/* ── Lien « voir plus » ── */
.cf3-more { display: flex; align-items: center; justify-content: center; gap: 4px; width: 100%; min-height: 32px; margin: 0; background: none; border: none; cursor: pointer; color: var(--accT); font: 650 11.5px/1 'Inter', sans-serif; }
.cf3-morechev { display: inline-flex; transform: rotate(90deg); transition: transform 180ms; }
.cf3-morechev.up { transform: rotate(-90deg); }
.cf3-more.in { min-height: 34px; margin: 2px 0 0; }
.cf3-more:active { opacity: 0.7; }

/* ── Accès rapide ── */
.cf3-qa { display: grid; grid-template-columns: repeat(4, 1fr); gap: 7px; }
.cf3-qab { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; min-height: 58px; border-radius: 15px; cursor: pointer; background: var(--card); border: 1px solid var(--hair); color: var(--t2); font: 600 10px/1 'Inter', sans-serif; }
.cf3-qab:active { background: var(--card2); transform: scale(0.97); }
.cf3-qab svg { color: var(--t3); }

/* ── Espace disponible ── */
.cf3-store { padding: 13px; }
.cf3-bar { height: 8px; border-radius: 99px; background: var(--press); overflow: hidden; }
.cf3-bar i { display: block; height: 100%; border-radius: 99px; background: linear-gradient(90deg, var(--acc), var(--accB)); }
.cf3-storetxt { margin-top: 9px; font: 400 11px/1.3 'Inter', sans-serif; color: var(--t3); }
.cf3-storetxt b { font-weight: 700; color: var(--t1); }
.cf3-storebtns { display: flex; gap: 7px; margin-top: 11px; }
.cf3-storebtns button { flex: 1; min-height: 38px; border-radius: 12px; cursor: pointer; background: none; border: 1px solid var(--hair2); color: var(--t2); font: 600 11.5px/1 'Inter', sans-serif; }
.cf3-storebtns button:active { background: var(--press); }

/* ── Compteurs ── */
.cf3-n { flex-shrink: 0; min-width: 22px; height: 22px; padding: 0 7px; border-radius: 99px; display: inline-flex; align-items: center; justify-content: center; background: var(--press); color: var(--t3); font: 700 10.5px/1 'Inter', sans-serif; }
.cf3-chipn { font-weight: 500; opacity: 0.6; margin-left: 1px; }
.cf3-open { flex-shrink: 0; display: inline-flex; align-items: center; gap: 3px; color: var(--accT); font: 650 11px/1 'Inter', sans-serif; }

/* ── Document clé ── */
.cf3-key { border-radius: 16px; background: var(--card); border: 1px solid var(--hair2); padding: 13px; }
.cf3-key-h { display: flex; align-items: center; gap: 11px; }
.cf3-key-meta { margin: 10px 2px 0; font: 400 11.5px/1.5 'Inter', sans-serif; color: var(--t3); text-wrap: pretty; }
/* L'icône de catégorie dans une ligne d'activité ne s'étire jamais */
.cf2-act > .cf-doc-ic { flex: 0 0 22px; }
.cf3-key-sub { margin: 5px 2px 0; font: 500 9.5px/1.3 'SF Mono', ui-monospace, monospace; letter-spacing: 0.03em; color: var(--goldT); }
.cf3-key-alert { margin-top: 9px; padding: 8px 11px; border-radius: 11px; font: 550 11.5px/1.35 'Inter', sans-serif; background: color-mix(in srgb, var(--amber) 9%, transparent); border: 1px solid color-mix(in srgb, var(--amber) 32%, transparent); }
.cf3-key-alert b { color: var(--amber); font-weight: 750; margin-right: 5px; }
.cf3-key-acts { display: flex; gap: 7px; margin-top: 12px; }
.cf3-key-acts button { flex: 1; display: flex; align-items: center; justify-content: center; gap: 5px; min-height: 40px; border-radius: 12px; cursor: pointer; background: var(--card2); border: 1px solid var(--hair2); color: var(--t1); font: 650 11.5px/1 'Inter', sans-serif; }
.cf3-key-acts button:first-child { background: var(--t1); color: var(--bg); border-color: var(--t1); }
.cf3-key-acts button:active { transform: scale(0.97); }

/* ── Jetons empilés (entité + catégorie) ── */
.cf3-tokens { display: flex; flex-direction: column; gap: 6px; margin-bottom: 10px; }
.cf3-tokens .cf2-token { margin: 0; }

/* ── Accès par personne · blocs ── */
.cf3-pblock { border-radius: 16px; background: var(--card); border: 1px solid var(--hair); padding: 11px 12px 8px; margin-bottom: 9px; }
.cf3-ph { display: flex; align-items: center; gap: 10px; padding-bottom: 9px; border-bottom: 1px solid var(--hair); margin-bottom: 4px; }
.cf3-pline { display: flex; align-items: center; gap: 8px; width: 100%; min-height: 36px; padding: 6px 2px; text-align: left; cursor: pointer; background: none; border: none; color: var(--t2); font: 550 11.5px/1.3 'Inter', sans-serif; }
.cf3-pline + .cf3-pline { border-top: 1px solid var(--hair); }
.cf3-pline:active { opacity: 0.7; }
.cf3-pline > i { width: 6px; height: 6px; border-radius: 99px; flex-shrink: 0; }
.cf3-pline > span { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Avatar « agence » (réutilisé de la v2 si absent) */
.cf2-orgav { width: 30px; height: 30px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: var(--press); color: var(--t2); font: 700 10.5px/1 'Inter', sans-serif; flex-shrink: 0; }

/* ── Import · tout type de fichier ── */
.cf3-pick { display: flex; flex-direction: column; align-items: center; gap: 7px; padding: 18px 12px; margin-top: 12px; border-radius: 16px; border: 1.5px dashed var(--hair2); background: var(--card2); color: var(--t3); cursor: pointer; text-align: center; }
.cf3-pick input { display: none; }
.cf3-pick b { color: var(--t1); font: 700 12.5px/1.3 'Inter', sans-serif; }
.cf3-pick em { font-style: normal; font: 500 10.5px/1.4 'Inter', sans-serif; color: var(--t4); text-wrap: pretty; }
.cf3-pick:active { background: var(--press); }
.cf3-flist { display: grid; gap: 6px; margin-top: 8px; }
.cf3-frow { display: flex; align-items: center; gap: 9px; padding: 8px 10px; border-radius: 12px; background: var(--card2); border: 1px solid var(--hair); font: 600 11.5px/1.3 'Inter', sans-serif; color: var(--t1); }
.cf3-frow svg { color: var(--t3); flex-shrink: 0; }
.cf3-fname { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cf3-frow em { font-style: normal; font: 500 10.5px/1 'Inter', sans-serif; color: var(--t4); flex-shrink: 0; }
.cf3-erows { display: grid; gap: 6px; }
.cf3-echeck { width: 20px; height: 20px; border-radius: 99px; border: 1.5px solid var(--hair2); display: flex; align-items: center; justify-content: center; color: transparent; flex-shrink: 0; }
.cf2-prow.sel .cf3-echeck { background: var(--accT); border-color: var(--accT); color: #fff; }
.cf.dark .cf2-prow.sel { border-color: var(--accT); }
.cf.light .cf2-prow.sel { border-color: var(--accT); }
.cf-sheet .cf-btn:disabled { opacity: 0.45; cursor: default; }

/* Étapes progressives de l'import */
@media (prefers-reduced-motion: no-preference) { .cf3-step { animation: cfIn 280ms cubic-bezier(0.2, 0, 0, 1) both; } }
.cf3-fdel { flex-shrink: 0; width: 22px; height: 22px; margin-right: -4px; border-radius: 99px; border: none; background: none; color: var(--t4); font-size: 15px; line-height: 1; cursor: pointer; display: flex; align-items: center; justify-content: center; }
.cf3-fdel:active { background: var(--press); }
.cf3-addmore { display: flex; align-items: center; justify-content: center; gap: 6px; min-height: 40px; border-radius: 12px; border: 1.5px dashed var(--hair2); background: none; color: var(--t2); font: 650 11.5px/1 'Inter', sans-serif; cursor: pointer; }
.cf3-addmore input { display: none; }
.cf3-addmore:active { background: var(--press); }
.cf3-addmore svg { color: var(--accT); }
.cf3-tags { display: flex; flex-wrap: wrap; gap: 5px; margin: 0 0 8px; }
.cf3-tag { display: inline-flex; align-items: center; gap: 3px; height: 26px; padding: 0 4px 0 10px; border-radius: 99px; background: color-mix(in srgb, var(--acc) 10%, transparent); border: 1px solid color-mix(in srgb, var(--acc) 30%, transparent); color: var(--accT); font: 650 11px/1 'Inter', sans-serif; }
.cf3-tag.auto { border-style: dashed; }
.cf3-tag button { width: 18px; height: 18px; border-radius: 99px; border: none; background: none; color: inherit; opacity: 0.7; font-size: 13px; line-height: 1; cursor: pointer; display: flex; align-items: center; justify-content: center; }
.cf3-newtag { width: 28px; height: 28px; border-radius: 99px; display: flex; align-items: center; justify-content: center; background: color-mix(in srgb, var(--acc) 12%, transparent); color: var(--accT); flex-shrink: 0; }
.cf3-erows.scroll { max-height: 218px; overflow-y: auto; scrollbar-width: none; }

/* Le contenu de la feuille ne déborde jamais à l'horizontale */
.cf-sheet { overflow-x: hidden; }
.cf3-flist { display: grid; grid-template-columns: minmax(0, 1fr); gap: 6px; margin-top: 8px; }

/* ── Fichiers de l'import : carte sélectionnable + tags sous chaque ligne ── */
.cf3-fitem { border-radius: 12px; background: var(--card2); border: 1px solid var(--hair); padding: 8px 10px; cursor: pointer; min-width: 0; }
.cf3-fitem.sel { border-color: var(--accT); }
.cf3-frow2 { display: flex; align-items: center; gap: 9px; font: 600 11.5px/1.3 'Inter', sans-serif; color: var(--t1); }
.cf3-frow2 > svg { color: var(--t3); flex-shrink: 0; }
.cf3-frow2 em { font-style: normal; font: 500 10.5px/1 'Inter', sans-serif; color: var(--t4); flex-shrink: 0; }
.cf3-fbtn { flex-shrink: 0; width: 24px; height: 24px; margin: -2px -2px -2px 0; border-radius: 99px; border: none; background: none; color: var(--t4); font-size: 15px; line-height: 1; cursor: pointer; display: flex; align-items: center; justify-content: center; }
.cf3-fbtn:active { background: var(--press); }
.cf3-ftags { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 7px; }
.cf3-tag.sm { height: 22px; padding: 0 3px 0 8px; font-size: 10px; }
.cf3-center { text-align: center; }
/* Actions de la feuille document : primaire fine + rangée compacte */
.cf-sheet .cf-btn.sm { min-height: 44px; font-size: 12.5px; border-radius: 13px; }
.cf3-actgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; }
.cf3-actgrid.three { grid-template-columns: 1fr 1fr 1fr; }
.cf3-actgrid button { display: flex; align-items: center; justify-content: center; gap: 6px; min-height: 40px; border-radius: 12px; background: var(--card2); border: 1px solid var(--hair2); color: var(--t1); font: 650 11.5px/1 'Inter', sans-serif; cursor: pointer; }
.cf3-actgrid button:active { transform: scale(0.97); }

/* Titre de la fiche document : se resserre quand il est long, pour tenir dans l'en-tête */
.cf-sh-t b.cf3-tfit { font-size: 13px; line-height: 1.3; letter-spacing: -0.01em; }

/* Nuage d'étiquettes (tous les tags) */
.cf3-tagcloud { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.cf3-tagcloud .cf2-fam { height: 28px; font-size: 11px; }

/* Carte d'identité du dossier (entité) */
.cf3-entcard { display: flex; align-items: center; gap: 11px; padding: 12px; border-radius: 16px; background: var(--card); border: 1px solid var(--hair2); margin-bottom: 10px; }
.cf3-entt { flex: 1; min-width: 0; }
.cf3-entt b { display: block; font: 750 14px/1.2 'Inter', sans-serif; letter-spacing: -0.01em; }
.cf3-entt em { display: block; margin-top: 2px; font: 500 11px/1.3 'Inter', sans-serif; font-style: normal; color: var(--t3); }
.cf3-entt i { display: block; margin-top: 3px; font: 500 10px/1.3 'Inter', sans-serif; font-style: normal; color: var(--t4); }
.cf3-entcard > button { flex-shrink: 0; width: 26px; height: 26px; border-radius: 99px; border: none; background: var(--press); color: var(--t2); font-size: 15px; line-height: 1; cursor: pointer; }

/* Retour vers la fiche personne depuis la fiche document */
.cf3-shback { width: 32px; height: 32px; border-radius: 99px; border: 1px solid var(--hair); background: var(--card2); color: var(--t2); display: flex; align-items: center; justify-content: center; cursor: pointer; flex-shrink: 0; }
.cf3-shback:active { background: var(--press); }

/* Accès par personne : rangée affinée, droits compacts, Révoquer en rouge */
.cf .cf-accrow { padding: 9px 10px; }
.cf .cf-revoke { color: var(--danger); }
.cf .cf-revoke.arm { font-weight: 750; }
.cf .cf-rights { gap: 4px; margin-top: 8px; grid-template-columns: repeat(5, 1fr); }
.cf .cf-right { flex-direction: row; gap: 3px; min-height: 32px; padding: 0 2px; border-radius: 9px; font-size: 8px; }
.cf3-lines > span { display: block; white-space: nowrap; }
.cf3-lines > span span, .cf3-lines > span b { display: inline; }
.cf-sheet .cf-wmnote { white-space: nowrap; }
.cf3-notag { font: 500 10px/1.4 'Inter', sans-serif; color: var(--t4); }
.cf3-none { font: 500 11px/1.3 'Inter', sans-serif; color: var(--t4); padding: 2px 4px 0; }

/* Activités récentes : réduit = 3 lignes, déplié = ~5 lignes visibles puis défilement interne */
.cf3-actsec.open { max-height: 348px; overflow-y: auto; scrollbar-width: none; overscroll-behavior: contain; }
.cf3-actsec.open::-webkit-scrollbar { display: none; }

/* Sections du tableau de bord : hauteur plafonnée, défilement interne discret */
.cf3-scrollsec { max-height: 248px; overflow-y: auto; scrollbar-width: none; overscroll-behavior: contain; }
.cf3-scrollsec::-webkit-scrollbar { display: none; }

/* Journal déplié : même carte que le reste de la section */
.cf3-journal { margin-top: 8px; padding: 3px 12px; }
.cf3-journal .cf2-act { padding: 9px 0; }
.cf3-journal .cf2-act + .cf2-act { border-top: 1px solid var(--hair); }
.cf3-fcat { display: inline-flex; align-items: center; gap: 4px; height: 22px; padding: 0 8px; border-radius: 99px; background: var(--press); color: var(--t2); font: 650 10px/1 'Inter', sans-serif; }
.cf3-fcat i { width: 6px; height: 6px; border-radius: 99px; }

/* ── Catégories sur UNE ligne (défilement horizontal discret) + création « + » ── */
.cf3-cats { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin: 0; padding-bottom: 2px; }
.cf3-cats::-webkit-scrollbar { display: none; }
.cf3-cats .cf2-fam { flex: none; white-space: nowrap; }
.cf3-catplus { width: 24px; justify-content: center; padding: 0; }
.cf3-catnew input { width: 116px; background: none; border: none; outline: none; font: 600 10.5px/1 'Inter', sans-serif; color: inherit; }
.cf3-catnew input::placeholder { color: var(--t4); }
.cf3-catnew button { border: none; background: none; color: inherit; cursor: pointer; padding: 0 2px; font-size: 12px; line-height: 1; display: inline-flex; align-items: center; }

/* ── Aperçu du fichier ── */
.cf3-prev { position: absolute; inset: 0; z-index: 60; display: flex; align-items: center; justify-content: center; padding: 22px 16px; background: rgba(0,0,0,0.55); }
.cf3-prevcard { width: 100%; max-height: 100%; display: flex; flex-direction: column; border-radius: 18px; overflow: hidden; background: var(--card); border: 1px solid var(--hair2); box-shadow: 0 24px 60px rgba(0,0,0,0.4); }
@media (prefers-reduced-motion: no-preference) { .cf3-prevcard { animation: cfPop 220ms cubic-bezier(0.2, 0, 0, 1) both; } }
.cf3-prevhead { display: flex; align-items: center; gap: 8px; padding: 10px 8px 10px 14px; border-bottom: 1px solid var(--hair); }
.cf3-prevhead b { flex: 1; min-width: 0; font: 700 12px/1.3 'Inter', sans-serif; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cf3-prevhead button { flex-shrink: 0; width: 28px; height: 28px; border-radius: 99px; border: none; background: var(--press); color: var(--t2); font-size: 16px; line-height: 1; cursor: pointer; }
.cf3-prevcard img { display: block; width: 100%; max-height: 380px; object-fit: contain; background: var(--card2); }
.cf3-prevcard iframe { display: block; width: 100%; height: 380px; border: none; background: #fff; }
.cf3-prevnone { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 34px 26px; text-align: center; color: var(--t3); font: 500 11.5px/1.5 'Inter', sans-serif; }

/* ── Autorisation rapide depuis la feuille document ── */
.cf2-addrow { display: flex; align-items: center; gap: 9px; width: 100%; min-height: 46px; padding: 9px 12px; border-radius: 16px; border: 1.5px dashed var(--hair2); background: none; color: var(--t2); font: 650 12px/1.2 'Inter', sans-serif; cursor: pointer; text-align: left; }
.cf2-addrow:active { background: var(--press); }
.cf2-addrow i { width: 28px; height: 28px; border-radius: 99px; display: flex; align-items: center; justify-content: center; background: color-mix(in srgb, var(--acc) 12%, transparent); color: var(--accT); flex-shrink: 0; }
.cf2-addrow em { font-style: normal; margin-left: auto; font: 500 10px/1.3 'Inter', sans-serif; color: var(--t4); text-align: right; }
.cf2-addlist { display: grid; gap: 6px; padding-top: 2px; }
.cf2-addlist .cf2-prow { min-height: 44px; }
.cf2-addcancel { min-height: 36px; border: none; background: none; color: var(--t4); font: 600 11.5px/1 'Inter', sans-serif; cursor: pointer; }
.cf3-erows.scroll::-webkit-scrollbar { display: none; }
.cf3-echg { flex-shrink: 0; font: 650 11px/1 'Inter', sans-serif; color: var(--accT); }
.cf3-miss { margin: 12px 2px 0; text-align: center; font: 500 11px/1.4 'Inter', sans-serif; color: var(--t4); }

.cf.light .cf-hbtn.on, .cf.dark .cf-hbtn.on { background: var(--t1); border-color: var(--t1); color: var(--bg); }

/* Bulle de notifications : s'ouvre depuis la cloche, ~moitié d'écran, translucide,
   le reste de l'app reste visible ET touchable (pas de voile) */
.cf3-npop { position: absolute; top: 96px; left: 10px; right: 10px; max-height: 46%; z-index: 44; display: flex; flex-direction: column;
  border-radius: 20px; background: color-mix(in srgb, var(--bg) 80%, transparent);
  backdrop-filter: blur(16px) saturate(1.15); -webkit-backdrop-filter: blur(16px) saturate(1.15);
  border: 1px solid var(--hair2); box-shadow: 0 22px 54px rgba(0,0,0,0.35); padding: 10px 11px 9px; }
@media (prefers-reduced-motion: no-preference) { .cf3-npop { transform-origin: top right; animation: cf3Bubble 240ms cubic-bezier(0.2, 0, 0, 1) both; } }
@keyframes cf3Bubble { from { opacity: 0; transform: scale(0.55) translateY(-10px); } }
.cf3-nphead { display: flex; align-items: center; gap: 7px; padding: 2px 2px 0 4px; color: var(--t1); }
.cf3-nphead b { flex: 1; font: 750 13px/1 'Inter', sans-serif; }
.cf3-nphead button { width: 26px; height: 26px; border-radius: 99px; border: none; background: var(--press); color: var(--t2); font-size: 15px; line-height: 1; cursor: pointer; }
.cf3-npop .cf3-nlist { flex: 1; min-height: 0; max-height: none; margin-top: 9px; }
.cf3-npop .cf3-nrow { background: color-mix(in srgb, var(--card) 72%, transparent); }
.cf3-npnote { margin: 8px 4px 2px; font: 400 9.5px/1.45 'Inter', sans-serif; color: var(--t4); text-wrap: pretty; }
.cf3-npnote b { color: var(--t3); font-weight: 650; }

/* ── Notifications : cloche, badge, liste ── */
.cf3-bell { position: relative; }
.cf3-badge { position: absolute; top: 3px; right: 3px; min-width: 15px; height: 15px; padding: 0 3px; border-radius: 99px; background: #E08A3C; color: #fff; font: 800 8.5px/15px 'Inter', sans-serif; font-style: normal; text-align: center; }
.cf3-nlist { display: grid; gap: 7px; margin-top: 10px; max-height: 350px; overflow-y: auto; scrollbar-width: none; }
.cf3-nlist::-webkit-scrollbar { display: none; }
.cf3-nrow { display: flex; gap: 10px; padding: 10px 11px; border-radius: 14px; background: var(--card2); border: 1px solid var(--hair); }
.cf3-nrow > i { width: 28px; height: 28px; border-radius: 9px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; background: var(--press); color: var(--t3); }
.cf3-nrow.ok > i { background: color-mix(in srgb, var(--acc) 12%, transparent); color: var(--accT); }
.cf3-nrow.share > i { background: color-mix(in srgb, var(--amber) 15%, transparent); color: var(--amber); }
.cf3-nrow.sign > i { background: color-mix(in srgb, var(--orange) 15%, transparent); color: var(--orange); }
.cf3-ntxt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; font: 500 11.5px/1.45 'Inter', sans-serif; color: var(--t2); }
.cf3-ntxt b { color: var(--t1); font-weight: 700; }
.cf3-ntxt em { font-style: normal; font: 500 10px/1 'Inter', sans-serif; color: var(--t4); }
.cf3-nact { align-self: flex-start; display: inline-flex; align-items: center; gap: 5px; margin-top: 3px; padding: 8px 11px; border-radius: 10px; border: none; background: var(--t1); color: var(--bg); font: 650 10.5px/1 'Inter', sans-serif; cursor: pointer; }
.cf3-nact:active { transform: scale(0.97); }
.cf3-ndone { display: inline-flex; align-items: center; gap: 4px; color: var(--accT); font: 650 10.5px/1.3 'Inter', sans-serif; }

/* ── Partage : lien sécurisé hors réseau ── */
.cf3-linkcard { display: flex; align-items: center; gap: 8px; padding: 10px 8px 10px 13px; border-radius: 14px; background: var(--card2); border: 1px solid var(--hair2); }
.cf3-link { flex: 1; min-width: 0; font: 600 11.5px/1.2 'SF Mono', ui-monospace, monospace; color: var(--t1); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cf3-copybtn { flex-shrink: 0; display: inline-flex; align-items: center; gap: 4px; min-height: 34px; padding: 0 13px; border-radius: 10px; border: none; background: var(--t1); color: var(--bg); font: 650 11.5px/1 'Inter', sans-serif; cursor: pointer; }
.cf3-copybtn.ok { background: var(--accT); color: #fff; }

/* ── Feuille d'enregistrement façon iPhone ── */
.cf3-iosdoc { display: flex; align-items: center; gap: 11px; padding: 6px 2px 12px; border-bottom: 1px solid var(--hair); }
.cf3-iosic { width: 38px; height: 44px; border-radius: 7px; background: #fff; border: 1px solid var(--hair2); color: #D64545; display: flex; align-items: flex-end; justify-content: center; padding-bottom: 4px; font: 800 9px/1 'Inter', sans-serif; flex-shrink: 0; box-shadow: 0 2px 6px rgba(0,0,0,0.08); }
.cf3-iost { flex: 1; min-width: 0; }
.cf3-iost b { display: block; font: 700 13px/1.25 'Inter', sans-serif; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cf3-iost em { display: block; margin-top: 2px; font: 500 10.5px/1.3 'Inter', sans-serif; font-style: normal; color: var(--t3); }
.cf3-iosgrp { margin-top: 10px; border-radius: 14px; background: var(--card2); border: 1px solid var(--hair); overflow: hidden; }
.cf3-iosrow { display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%; min-height: 48px; padding: 0 14px; background: none; border: none; cursor: pointer; color: var(--t1); font: 550 13px/1.2 'Inter', sans-serif; text-align: left; }
.cf3-iosrow + .cf3-iosrow { border-top: 1px solid var(--hair); }
.cf3-iosrow:active { background: var(--press); }
.cf3-iosrow svg { color: var(--t3); flex-shrink: 0; }

/* En-têtes d'étapes de l'import : bien visibles */
.cf3-shead span { font: 800 12.5px/1 'Inter', sans-serif; letter-spacing: 0.05em; color: var(--t1); }
.cf3-oneline { white-space: nowrap; }

/* Filtre sélectionné : contraste fort (encre pleine), lisible d'un coup d'œil */
.cf3-cats .cf2-fam.on { background: var(--t1) !important; border-color: var(--t1) !important; color: var(--bg) !important; }
.cf3-cats .cf2-fam.on .cf3-chipn { opacity: 0.72; }
.cf3-cats .cf2-fam.on .cf3-mini { background: rgba(255, 255, 255, 0.28); color: var(--bg); }
.cf3-cats .cf2-fam.on .cf3-x { opacity: 0.85; }

/* 2e rangée de filtres (personnes puis tags), aérée */
.cf3-sub { margin: 6px 0 12px; }
.cf3-sub .cf2-fam { height: 24px; font-size: 10px; }
.cf3-pchip { padding-left: 4px !important; }
.cf3-pchip img, .cf3-pchip .avatar { border-radius: 99px; }
.cf3-mini { width: 14px; height: 14px; border-radius: 99px; display: inline-flex; align-items: center; justify-content: center; background: var(--press); color: var(--t3); font: 700 7px/1 'Inter', sans-serif; }
.cf3-fsep { flex: none; align-self: center; width: 1px; height: 13px; background: var(--hair2); margin: 0 3px; }
.cf3-x { margin-left: 2px; opacity: 0.7; }

/* ── Propriété (feuille document) : avatar + nom + pastille Vous ── */
.cf3-owner { display: inline-flex; align-items: center; gap: 6px; }
.cf3-owner i { font-style: normal; padding: 3px 7px; border-radius: 99px; background: color-mix(in srgb, var(--acc) 12%, transparent); color: var(--accT); font: 650 9.5px/1 'Inter', sans-serif; }

/* ── Écran de signature ── */
.cf3-signwrap { position: absolute; inset: 0; z-index: 46; display: flex; flex-direction: column; background: var(--bg); }
@media (prefers-reduced-motion: no-preference) { .cf3-signwrap { animation: cfUp 260ms cubic-bezier(0.2, 0, 0, 1) both; } }
.cf3-signhead { display: flex; align-items: center; gap: 10px; padding: 8px 14px 10px; }
.cf3-signtitle { flex: 1; min-width: 0; }
.cf3-signtitle b { display: block; font: 800 16px/1.1 'Inter', sans-serif; letter-spacing: -0.01em; }
.cf3-signtitle em { display: block; font: 500 10.5px/1.3 'Inter', sans-serif; font-style: normal; color: var(--t3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cf3-paperwrap { flex: 1; overflow-y: auto; padding: 14px 14px 20px; scrollbar-width: none; background: #4A4A52; }
.cf3-paperwrap::-webkit-scrollbar { display: none; }
.cf3-paper { position: relative; overflow: hidden; background: #FFFFFF; border: none; border-radius: 3px; max-width: 322px; margin: 0 auto; min-height: 452px; padding: 26px 20px 20px; box-shadow: 0 16px 44px rgba(0,0,0,0.5); }
.cf.dark .cf3-paper { background: #FBFBF8; }
.cf3-paper.real { font-family: Georgia, 'Times New Roman', serif; }
.cf3-ph1 { text-align: center; font: 750 11px/1.3 Georgia, serif; color: #0F0F10; letter-spacing: 0.02em; }
.cf3-ph2 { text-align: center; font: 700 9.5px/1.4 Georgia, serif; color: #1E1E24; margin-top: 2px; }
.cf3-ph3 { text-align: center; font: italic 400 8px/1.4 Georgia, serif; color: #8A8A93; margin: 3px 0 8px; }
.cf3-pdate { text-align: right; font: italic 400 9px/1.4 Georgia, serif !important; color: #55555C !important; }
.cf3-psec { margin-top: 10px; font: 750 9px/1.3 Georgia, serif; letter-spacing: 0.09em; text-transform: uppercase; color: #0F0F10; border-bottom: 1px solid rgba(15,15,16,0.14); padding-bottom: 2px; }
.cf3-paper.real p { position: relative; font: 400 9.5px/1.55 Georgia, serif; color: #26262C; margin: 6px 0 0; text-align: justify; text-wrap: pretty; }
.cf3-paper.real p b { font-weight: 700; color: #0F0F10; }
.cf3-pfoot { margin-top: 12px; text-align: center; font: 500 6.8px/1.5 'Inter', sans-serif; letter-spacing: 0.08em; color: #A9A9B0; text-transform: uppercase; }
/* ── Filigrane de sécurité FOOTPASS · standard, identique sur chaque page A4 ── */
.cf3-secframe { position: absolute; inset: 0; pointer-events: none; }
.cf3-sec-top { position: absolute; top: 7px; left: 0; right: 0; display: flex; align-items: center; justify-content: center; gap: 5px; font: 700 6.8px/1 'Inter', sans-serif; letter-spacing: 0.16em; text-transform: uppercase; color: rgba(15,15,16,0.38); }
.cf3-sec-top img { width: 9px; height: auto; opacity: 0.55; }
.cf3-sec-mark { position: absolute; left: 50%; top: 50%; width: 152px; height: auto; transform: translate(-50%, -50%); opacity: 0.045; }
.cf3-sec-left { position: absolute; left: 4px; top: 50%; writing-mode: vertical-rl; transform: translateY(-50%) rotate(180deg); font: 700 6.8px/1 'Inter', sans-serif; letter-spacing: 0.24em; color: rgba(15,15,16,0.3); white-space: nowrap; }
.cf3-sec-br { position: absolute; right: 10px; bottom: 7px; font: 700 6.8px/1 'Inter', sans-serif; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(15,15,16,0.34); }
.cf3-sigrow { position: relative; display: flex; gap: 7px; margin-top: 14px; }
.cf3-sigcell { flex: 1; min-width: 0; border: 1px solid rgba(15,15,16,0.16); border-radius: 6px; min-height: 72px; padding: 7px 6px 6px; display: flex; flex-direction: column; gap: 4px; align-items: center; justify-content: space-between; text-align: center; }
.cf3-sigcell i { font: 700 6.8px/1.2 'Inter', sans-serif; letter-spacing: 0.07em; text-transform: uppercase; color: #7C7C84; font-style: normal; }
.cf3-sigcell u { text-decoration: none; font: 500 6.8px/1.3 'Inter', sans-serif; color: #8A8A93; }
.cf3-usc { display: block; width: 82%; height: 16px; border-bottom: 1px solid rgba(15,15,16,0.3); }
.cf3-ink.small { font-size: 13px; }
.cf3-sigempty { font: 550 10px/1.3 'Inter', sans-serif; color: #8A8A93; }

/* ── Gabarits médical / performance / administratif / communication ── */
.cf3-paper.med { font-family: 'Inter', sans-serif; }
.cf3-mhead { display: flex; justify-content: space-between; gap: 10px; border-bottom: 2px solid #0F0F10; padding-bottom: 7px; }
.cf3-mhead > span:first-child b { display: block; font: 800 9.5px/1.3 'Inter', sans-serif; color: #0F0F10; letter-spacing: 0.02em; }
.cf3-mhead > span:first-child em { display: block; font: 500 7.5px/1.4 'Inter', sans-serif; color: #8A8A93; font-style: normal; }
.cf3-mref { text-align: right; font: 600 7.5px/1.5 'Inter', sans-serif; color: #55555C; white-space: nowrap; flex-shrink: 0; }
.cf3-mpat { margin: 8px 0 0; padding: 6px 8px; background: rgba(15,15,16,0.045); border-radius: 4px; font: 500 8px/1.5 'Inter', sans-serif; color: #3A3A40; }
.cf3-mpat b { font-weight: 750; color: #0F0F10; }
.cf3-mtitle { text-align: center; margin: 12px 0 2px; font: 800 10.5px/1.35 'Inter', sans-serif; letter-spacing: 0.05em; color: #0F0F10; }
.cf3-mtitle.com { font: 800 14px/1.25 Georgia, serif; letter-spacing: 0; text-align: left; margin-top: 14px; }
.cf3-paper.med p { position: relative; font: 400 8.8px/1.6 'Inter', sans-serif; color: #2A2A30; margin: 5px 0 0; text-align: left; text-wrap: pretty; }
.cf3-paper.med p b { font-weight: 750; color: #0F0F10; }
.cf3-paper.med .cf3-psec { font-family: 'Inter', sans-serif; font-size: 7.8px; margin-top: 10px; }
.cf3-chapo { font: 600 9.5px/1.55 Georgia, serif !important; color: #1E1E24 !important; }
.cf3-tbl { width: 100%; border-collapse: collapse; margin-top: 10px; }
.cf3-tbl td { border: 1px solid rgba(15,15,16,0.16); padding: 5px 8px; font: 500 8.5px/1.3 'Inter', sans-serif; color: #26262C; }
.cf3-tbl td:last-child { text-align: right; font-weight: 750; white-space: nowrap; }
.cf3-tbl tr.tot td { background: rgba(15,15,16,0.05); font-weight: 800; color: #0F0F10; }
.cf3-msig { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; margin-top: 12px; }
.cf3-msig span { font: 600 7.5px/1.3 'Inter', sans-serif; letter-spacing: 0.06em; text-transform: uppercase; color: #55555C; }
.cf3-msig i { font-style: italic; }
.cf3-batbox { margin-top: 12px; border: 1.5px solid #0F0F10; border-radius: 4px; padding: 8px 10px; }
.cf3-batbox b { display: block; font: 800 9px/1 'Inter', sans-serif; letter-spacing: 0.08em; color: #0F0F10; }
.cf3-batbox span { display: block; margin-top: 3px; font: 500 7.5px/1.45 'Inter', sans-serif; color: #55555C; }

/* ── Aperçu d'export filigrané ── */
.cf3-exwrap { position: absolute; inset: 0; z-index: 48; display: flex; flex-direction: column; background: var(--bg); }
@media (prefers-reduced-motion: no-preference) { .cf3-exwrap { animation: cfUp 240ms cubic-bezier(0.2, 0, 0, 1) both; } }
.cf3-expage { position: relative; max-width: 322px; margin: 0 auto; }
.cf3-pline { display: block; height: 8px; border-radius: 5px; background: rgba(15,15,16,0.07); margin-top: 8px; }
.cf3-signbox { margin-top: 16px; border: 1.5px dashed rgba(15,15,16,0.22); border-radius: 12px; min-height: 74px; padding: 10px 12px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px; text-align: center; }
.cf3-signbox.ok { border-color: var(--acc); background: rgba(0,163,126,0.05); }
.cf3-signbox.draw { padding: 8px; cursor: default; }
.cf3-pad { width: 100%; }
.cf3-pad canvas { display: block; width: 100%; height: 88px; background: #FBFBF8; border: 1px solid rgba(15,15,16,0.08); border-radius: 8px; touch-action: none; cursor: crosshair; }
.cf3-padrow { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 5px; }
.cf3-padrow i { font: italic 400 8.5px/1.3 Georgia, serif; color: #8A8A93; }
.cf3-padrow button { background: none; border: none; color: var(--accT); font: 650 10px/1 'Inter', sans-serif; cursor: pointer; padding: 4px 2px; }
.cf3-sigimg { max-height: 46px; max-width: 78%; object-fit: contain; }
.cf3-sigimg.sm { max-height: 30px; max-width: 92%; }
.cf3-relink { background: none; border: none; color: var(--accT); font: 650 10px/1 'Inter', sans-serif; cursor: pointer; padding: 2px; }
.cf3-signnote { margin: 8px 4px 0; text-align: center; font: 500 10px/1.45 'Inter', sans-serif; color: var(--t4); }
.cf3-signhint { font: 550 11px/1.35 'Inter', sans-serif; color: #8A8A93; }
.cf3-ink { font: italic 600 24px/1.1 'Snell Roundhand', 'Segoe Script', 'Brush Script MT', cursive; color: #14141A; transform: rotate(-2deg); }
.cf3-signbox i { font: 600 8.5px/1.3 'Inter', sans-serif; font-style: normal; letter-spacing: 0.08em; text-transform: uppercase; color: #A9A9B0; }
.cf3-signacts { display: flex; flex-direction: column; gap: 8px; padding: 10px 16px 16px; }
.cf3-signacts .cf-btn:disabled { opacity: 0.45; cursor: default; }
.cf2-fam svg { margin-left: 1px; }