/* ══ FICHES CONTACT & PORTRAITS (parcours live, compositeur) ═══════════════════════════════════════
   • portrait-*   : Shared/PortraitPicker.razor — l'import UNIQUE des photos (cartes contact, hommes clés, émetteur).
   • tvv-fiche-*  : état « Enregistrer la fiche » d'une carte contact (Services/ContactBookService.cs).
   • tvv-ctpick-* : « Ajouter un contact » → nouvelle fiche ou fiche enregistrée.
   Feuille à part plutôt qu'un bloc style dans le composant : PortraitPicker est rendu une fois PAR CARTE, un bloc
   style y serait réémis à chaque instance. Jetons de l'app (--brand, --surf-*, --tx*, --mut*, --o*) : clair et sombre.
   ═══════════════════════════════════════════════════════════════════════════════════════════════════ */

/* ── Portrait : enveloppe NON rognée autour du cercle fourni par l'hôte ── */
.portrait { position: relative; display: block; flex: 0 0 auto; }
/* Avatar vide en édition : anneau pointillé = « ici se dépose une photo ». */
.portrait.is-edit.is-empty::before {
    content: ""; position: absolute; inset: -4px; border-radius: 50%; pointer-events: none;
    border: 1.5px dashed color-mix(in srgb, var(--brand, #00B1CF) 55%, transparent);
    transition: border-color .15s ease, box-shadow .15s ease;
}
.portrait.is-edit.is-empty:hover::before { border-color: var(--brand, #00B1CF); }
/* Pendant un glisser-déposer au-dessus de l'avatar (attribut posé par app.js, [data-photo-drop]). */
.portrait[data-drop-on]::before {
    content: ""; position: absolute; inset: -5px; border-radius: 50%; pointer-events: none;
    border: 2px solid var(--brand, #00B1CF);
    box-shadow: 0 0 0 5px color-mix(in srgb, var(--brand, #00B1CF) 22%, transparent);
}

/* Avatar vide : TOUT le cercle ouvre le sélecteur. L'invite apparaît au survol, au focus clavier et pendant un dépôt. */
.portrait-add {
    position: absolute; inset: 0; z-index: 1; border-radius: 50%; box-sizing: border-box; padding: 0 12px;
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
    text-align: center; font-size: 10.5px; font-weight: 800; line-height: 1.15; letter-spacing: .01em;
    color: var(--brand-strong, #7fd8e7);
    background: color-mix(in srgb, var(--brand, #00B1CF) 22%, var(--surf-2, #16212e));
    cursor: pointer; opacity: 0; transition: opacity .15s ease;
}
.portrait-add .iku-ico { font-size: 21px; }
.portrait.is-empty:hover .portrait-add,
.portrait.is-empty:has(.portrait-file:focus-visible) .portrait-add,
.portrait.is-empty[data-drop-on] .portrait-add { opacity: 1; }

/* Avec photo, le cercle sert au recadrage : l'invite « Remplacer » ne se montre QUE pendant un dépôt. */
.portrait-drop {
    position: absolute; inset: 0; z-index: 1; border-radius: 50%; pointer-events: none;
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
    font-size: 10.5px; font-weight: 800; color: #fff;
    background: color-mix(in srgb, var(--brand, #00B1CF) 55%, rgba(0,0,0,.4));
    opacity: 0; transition: opacity .15s ease;
}
.portrait-drop .iku-ico { font-size: 20px; }
.portrait[data-drop-on] .portrait-drop { opacity: 1; }

/* Bouton appareil photo : HORS du cercle rogné, donc entièrement visible et cliquable. */
.portrait-cam {
    position: absolute; right: -3px; bottom: -3px; z-index: 2; box-sizing: border-box;
    width: 30px; height: 30px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
    font-size: 14px; cursor: pointer;
    color: var(--brand-strong, #7fd8e7); background: var(--surf-1, #0e1620);
    border: 1px solid color-mix(in srgb, var(--brand, #00B1CF) 50%, transparent);
    box-shadow: 0 3px 10px rgba(0,0,0,.28);
    transition: transform .12s ease, background .12s ease, color .12s ease, border-color .12s ease;
}
.portrait-cam:hover { transform: scale(1.08); background: var(--brand, #00B1CF); color: var(--brand-contrast, #fff); border-color: var(--brand, #00B1CF); }
.portrait-cam:has(.portrait-file:focus-visible) { outline: 2px solid var(--brand, #00B1CF); outline-offset: 2px; }
/* Champ fichier masqué VISUELLEMENT mais atteignable au clavier (Tab, puis Entrée) : display:none l'en retirait. */
.portrait-file {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; border: 0;
    overflow: hidden; clip-path: inset(50%); opacity: 0; white-space: nowrap;
}

/* Réduction en cours (quelques dixièmes de seconde, plus sur une très grande photo). */
.portrait-spin { position: absolute; inset: 0; z-index: 3; border-radius: 50%; background: rgba(0,0,0,.38); display: flex; align-items: center; justify-content: center; }
.portrait-spin::after {
    content: ""; width: 38%; height: 38%; max-width: 26px; max-height: 26px; box-sizing: border-box; border-radius: 50%;
    border: 2.5px solid rgba(255,255,255,.35); border-top-color: #fff; animation: portrait-tourne .8s linear infinite;
}
@keyframes portrait-tourne { to { transform: rotate(360deg); } }

/* Refus lisible (pas une image, trop lourde, illisible) : bulle sous l'avatar, fermable. */
.portrait-err {
    position: absolute; z-index: 6; top: calc(100% + 10px); left: 50%; transform: translateX(-50%);
    width: max-content; max-width: min(250px, 78vw); box-sizing: border-box; padding: 8px 30px 8px 11px;
    border-radius: 10px; font-size: 11.5px; font-weight: 600; line-height: 1.4; text-align: left; white-space: normal;
    color: var(--tx1, #e8eef2);
    background: color-mix(in srgb, #e2615f 16%, var(--surf-1, #0e1620));
    border: 1px solid color-mix(in srgb, #e2615f 55%, transparent);
    box-shadow: 0 10px 26px rgba(0,0,0,.30);
}
.portrait-err::before {
    content: ""; position: absolute; top: -6px; left: 50%; width: 10px; height: 10px; transform: translateX(-50%) rotate(45deg);
    background: inherit; border-left: inherit; border-top: inherit;
}
.portrait-err-x {
    position: absolute; top: 5px; right: 5px; width: 22px; height: 22px; padding: 0; border: none; border-radius: 6px;
    display: flex; align-items: center; justify-content: center; font-size: 12px; cursor: pointer;
    background: transparent; color: var(--mut1, #9bb3bd);
}
.portrait-err-x:hover { color: var(--tx1, #e8eef2); background: color-mix(in srgb, var(--tx1, #e8eef2) 10%, transparent); }

/* Petit avatar (panneau ⚙ de la liseuse, section Émetteur du compositeur) : icône seule, bulle alignée à gauche. */
.portrait.is-compact.is-edit.is-empty::before { inset: -3px; }
.portrait.is-compact .portrait-add { padding: 0; }
.portrait.is-compact .portrait-add .iku-ico, .portrait.is-compact .portrait-drop .iku-ico { font-size: 15px; }
.portrait.is-compact .portrait-cam { width: 19px; height: 19px; right: -5px; bottom: -5px; font-size: 10px; box-shadow: 0 2px 6px rgba(0,0,0,.25); }
.portrait.is-compact .portrait-err { left: -4px; transform: none; top: calc(100% + 9px); }
.portrait.is-compact .portrait-err::before { left: 18px; }

/* ── Recadrage : « Retirer la photo » à côté du zoom et de « Recentrer » ── */
.tvv-crop-del {
    flex: 0 0 auto; width: 26px; height: 26px; padding: 0; box-sizing: border-box; border-radius: 7px; cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center; font-size: 13px;
    border: 1px solid var(--o8, rgba(255,255,255,.16)); background: transparent; color: #e0726b;
}
.tvv-crop-del:hover { border-color: #e0726b; background: color-mix(in srgb, #e0726b 12%, transparent); }
html[data-theme="light"] .tvv-crop-del { color: #b3261e; }

/* ── Fiche du carnet sur une carte contact (édition) ── */
.tvv-fiche { --fiche-ok: #3ccf9c; --fiche-warn: #e8a24a; display: flex; flex-direction: column; align-items: center; gap: 6px; width: 100%; margin-top: 3px; }
html[data-theme="light"] .tvv-fiche { --fiche-ok: #0a6a50; --fiche-warn: #8a5200; }
.tvv-fiche-save {
    display: inline-flex; align-items: center; justify-content: center; gap: 6px; width: 100%; box-sizing: border-box;
    padding: 7px 10px; border-radius: 9px; font: inherit; font-size: 12px; font-weight: 700; cursor: pointer;
    color: var(--brand-strong, #7fd8e7);
    background: color-mix(in srgb, var(--brand, #00B1CF) 12%, transparent);
    border: 1px solid color-mix(in srgb, var(--brand, #00B1CF) 40%, transparent);
    transition: background .12s ease, border-color .12s ease;
}
.tvv-fiche-save:hover:not(:disabled) { background: color-mix(in srgb, var(--brand, #00B1CF) 20%, transparent); border-color: var(--brand, #00B1CF); }
.tvv-fiche-save:disabled { opacity: .6; cursor: default; }
.tvv-fiche-ok {
    display: inline-flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 1px 5px; cursor: help;
    font-size: 11.5px; font-weight: 700; color: var(--fiche-ok);
}
.tvv-fiche-ok small { flex-basis: 100%; font-size: 11px; font-weight: 500; color: var(--mut1, #9bb3bd); }
.tvv-fiche-folder {
    display: inline-flex; align-items: center; justify-content: center; gap: 6px; box-sizing: border-box; max-width: 100%;
    padding: 5px 10px; border-radius: 8px; font: inherit; font-size: 11.5px; font-weight: 700; cursor: pointer;
    color: var(--brand-strong, #7fd8e7); background: transparent;
    border: 1px dashed color-mix(in srgb, var(--brand, #00B1CF) 50%, transparent);
}
.tvv-fiche-folder:hover:not(:disabled) { border-style: solid; background: color-mix(in srgb, var(--brand, #00B1CF) 10%, transparent); }
.tvv-fiche-wait { display: inline-flex; align-items: center; gap: 7px; font-size: 11.5px; font-weight: 600; color: var(--mut1, #9bb3bd); }
.tvv-fiche-spin { width: 11px; height: 11px; box-sizing: border-box; border-radius: 50%; border: 2px solid color-mix(in srgb, var(--brand, #00B1CF) 30%, transparent); border-top-color: var(--brand, #00B1CF); animation: portrait-tourne .8s linear infinite; }
.tvv-fiche-msg {
    width: 100%; box-sizing: border-box; padding: 6px 9px; border-radius: 8px; text-align: left;
    font-size: 11px; line-height: 1.45; color: var(--tx2, #c8d3da);
}
.tvv-fiche-msg.ok { background: color-mix(in srgb, var(--fiche-ok) 10%, transparent); border: 1px solid color-mix(in srgb, var(--fiche-ok) 32%, transparent); }
.tvv-fiche-msg.warn { color: var(--tx1, #e8eef2); background: color-mix(in srgb, var(--fiche-warn) 12%, transparent); border: 1px solid color-mix(in srgb, var(--fiche-warn) 45%, transparent); }
/* Style « ligne » : infos alignées à gauche, la fiche suit. */
.tvv-contact-grid.ctc-row .tvv-fiche { align-items: flex-start; }
.tvv-contact-grid.ctc-row .tvv-fiche-ok { justify-content: flex-start; }

/* ── « Ajouter un contact » : nouvelle fiche ou fiche enregistrée ── */
.tvv-contact-add-sub { display: block; margin-top: 5px; font-size: 11px; font-weight: 600; color: var(--mut1, #9bb3bd); }
.tvv-ctpick {
    box-sizing: border-box; width: 272px; max-width: 100%; align-self: stretch; display: flex; flex-direction: column; gap: 8px;
    padding: 14px; border-radius: 16px; text-align: left;
    border: 1px solid color-mix(in srgb, var(--brand, #00B1CF) 45%, transparent);
    background: var(--surf-2, #16212e); box-shadow: 0 16px 38px rgba(0,0,0,.28);
}
.tvv-contact-grid.ctc-row .tvv-ctpick { width: 446px; }
.tvv-ctpick-h { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 13.5px; font-weight: 800; color: var(--tx1, #e8eef2); }
.tvv-ctpick-x { width: 26px; height: 26px; padding: 0; border: none; border-radius: 7px; background: transparent; color: var(--mut1, #9bb3bd); cursor: pointer; display: flex; align-items: center; justify-content: center; font-size: 14px; }
.tvv-ctpick-x:hover { color: var(--tx1, #e8eef2); background: color-mix(in srgb, var(--tx1, #e8eef2) 8%, transparent); }
.tvv-ctpick-new {
    display: flex; align-items: center; justify-content: center; gap: 6px; padding: 9px 12px; border-radius: 10px; cursor: pointer;
    font: inherit; font-size: 12.5px; font-weight: 700; color: var(--brand-strong, #7fd8e7);
    border: 1px dashed color-mix(in srgb, var(--brand, #00B1CF) 55%, transparent);
    background: color-mix(in srgb, var(--brand, #00B1CF) 8%, transparent);
}
.tvv-ctpick-new:hover { border-style: solid; background: color-mix(in srgb, var(--brand, #00B1CF) 14%, transparent); }
.tvv-ctpick-sub { margin-top: 4px; font-size: 10.5px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--mut2, #9aa7b0); }
.tvv-ctpick-empty { font-size: 11.5px; color: var(--mut1, #9bb3bd); }
.tvv-ctpick-list { display: flex; flex-direction: column; gap: 3px; max-height: 262px; overflow-y: auto; margin: 0 -4px; padding: 0 4px; }
.tvv-ctpick-row { display: flex; align-items: center; gap: 4px; border-radius: 10px; }
.tvv-ctpick-item {
    flex: 1 1 auto; min-width: 0; display: flex; align-items: center; gap: 10px; padding: 6px 8px; border-radius: 10px;
    border: 1px solid transparent; background: transparent; color: var(--tx1, #e8eef2); font: inherit; text-align: left; cursor: pointer;
}
.tvv-ctpick-item:hover, .tvv-ctpick-item:focus-visible {
    outline: none; background: color-mix(in srgb, var(--brand, #00B1CF) 10%, transparent);
    border-color: color-mix(in srgb, var(--brand, #00B1CF) 35%, transparent);
}
.tvv-ctpick-av {
    flex: 0 0 auto; width: 34px; height: 34px; border-radius: 50%; overflow: hidden; display: flex; align-items: center; justify-content: center;
    font-size: 12px; font-weight: 800; color: var(--brand-strong, #7fd8e7); background: color-mix(in srgb, var(--brand, #00B1CF) 16%, transparent);
}
.tvv-ctpick-av img { width: 100%; height: 100%; object-fit: cover; }
.tvv-ctpick-tx { display: flex; flex-direction: column; min-width: 0; }
.tvv-ctpick-tx b { font-size: 12.5px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tvv-ctpick-tx small { font-size: 11px; color: var(--mut1, #9bb3bd); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tvv-ctpick-del {
    flex: 0 0 auto; width: 28px; height: 28px; padding: 0; border: none; border-radius: 8px; cursor: pointer;
    display: flex; align-items: center; justify-content: center; font-size: 13px;
    background: transparent; color: var(--mut2, #9aa7b0); opacity: .75;
}
.tvv-ctpick-row:hover .tvv-ctpick-del, .tvv-ctpick-del:focus-visible { opacity: 1; }
.tvv-ctpick-del:hover { color: #e0726b; background: color-mix(in srgb, #e0726b 12%, transparent); }
.tvv-ctpick-row.is-confirm {
    flex-direction: column; align-items: stretch; gap: 7px; padding: 9px;
    background: color-mix(in srgb, #e0726b 8%, transparent); border: 1px solid color-mix(in srgb, #e0726b 32%, transparent);
}
.tvv-ctpick-conf { font-size: 11.5px; line-height: 1.4; color: var(--tx2, #c8d3da); }
.tvv-ctpick-confbtns { display: flex; gap: 6px; }
.tvv-ctpick-yes, .tvv-ctpick-no { flex: 1 1 0; padding: 6px; border-radius: 8px; font: inherit; font-size: 11.5px; font-weight: 700; cursor: pointer; }
.tvv-ctpick-yes { border: 1px solid #e0726b; background: color-mix(in srgb, #e0726b 16%, transparent); color: var(--tx1, #e8eef2); }
.tvv-ctpick-no { border: 1px solid var(--o12, rgba(255,255,255,.2)); background: transparent; color: var(--tx2, #c8d3da); }
.tvv-ctpick-msg { font-size: 11px; line-height: 1.45; color: var(--tx2, #c8d3da); padding: 6px 9px; border-radius: 8px; background: color-mix(in srgb, var(--tx1, #e8eef2) 6%, transparent); }
.tvv-ctpick-foot {
    margin-top: auto; padding-top: 8px; border-top: 1px solid var(--o8, rgba(255,255,255,.12));
    display: flex; align-items: flex-start; gap: 6px; font-size: 10.5px; line-height: 1.45; color: var(--mut1, #9bb3bd); cursor: help;
}
.tvv-ctpick-foot .iku-ico { flex: 0 0 auto; margin-top: 2px; }

/* ── Panneau ⚙ : rappel que l'émetteur est mémorisé ── */
.tvv-sethint-fiche { display: flex; align-items: flex-start; gap: 6px; margin-top: 2px; font-size: 11px; line-height: 1.4; color: var(--mut1, #9bb3bd); }
.tvv-sethint-fiche .iku-ico { flex: 0 0 auto; margin-top: 2px; }