/* ═══════════════════════════════════════════════════════════
Donna · Focus mode — relances multi-biens
[v1132 Anthony "fais une popup plus petite en mode sombre avec
un bg flouté et assombri, plus gras, vire le header ou intègre
le à la popup, je veux vraiment immersif"]
[v1137 Anthony "fais un thème noir mais moins dark profond, un
truc un poil plus léger plus agréable sur longue session pour
les yeux + un toggle pour switch en clair si le user veut qui
s'applique qu'à la popup"]
Refonte tokens v1137 :
- Dark = gris-bleuté style Linear/Notion (#0f1115 → #16181d),
moins OLED, plus reposant pour longue session
- Light optionnel via .fr-overlay[data-fr-theme="light"], scopé
UNIQUEMENT au focus mode (n'impacte pas le reste de l'app)
- Toggle dans la sidebar gauche (à côté du bouton close)
═══════════════════════════════════════════════════════════ */
/* [v1139 fix Anthony S2 "la fiche ne match pas le theme noir/blanc"]
Avant v1139 : les tokens (--bg, --surface, --text etc.) étaient définis
uniquement sur .fr-overlay. Du coup .fr-fiche-overlay et .fr-confirm-overlay
héritaient des vars du de l'app donna (pas des vars focus). Résultat :
focus en dark mais fiche en light/blanche.
Fix : appliquer les tokens à TOUS les overlays focus (.fr-overlay,
.fr-fiche-overlay, .fr-confirm-overlay) via une liste de sélecteurs. */
.fr-overlay,
.fr-fiche-overlay,
.fr-confirm-overlay{
/* Dark par défaut — gris-bleuté style Linear (moins fatigant) */
--bg:#0f1115; --surface:#16181d; --s2:#1c1e24; --s3:#23262d;
--border:rgba(255,255,255,.07); --border-hi:rgba(255,255,255,.12);
--text:#e7e9ee; --text-dim:#a8adbd; --muted:#6a7080;
--accent:#8b7bff; --accent-hi:#a89dff; --accent-dim:rgba(139,123,255,.13);
--accent-glow:rgba(139,123,255,.3);
--chaud:#ff6680; --tiede:#f0c050; --froid:#5ca8ff; --green:#4fd49a;
--radius-sm:2px; --radius:5px; --radius-lg:8px;
--shadow-modal:0 32px 80px rgba(0,0,0,.55), 0 8px 24px rgba(0,0,0,.35);
--backdrop:rgba(8,10,14,.82);
}
/* [v1137 + v1139] Thème light scopé AUX overlays focus (pas global app).
Toggle UI via data-fr-theme="light" sur chaque overlay.
Persisté dans localStorage 'donna.focus.theme'. */
.fr-overlay[data-fr-theme="light"],
.fr-fiche-overlay[data-fr-theme="light"],
.fr-confirm-overlay[data-fr-theme="light"]{
--bg:#f7f8fa; --surface:#ffffff; --s2:#f1f3f7; --s3:#e7ebf2;
--border:#e4e7ee; --border-hi:#d3d8e3;
--text:#14161f; --text-dim:#4a5169; --muted:#8a93ab;
--accent:#6b5cf5; --accent-hi:#564bd8; --accent-dim:rgba(107,92,245,.09);
--accent-glow:rgba(107,92,245,.25);
--chaud:#d64560; --tiede:#c08a2e; --froid:#3d7fc2; --green:#22a06b;
--shadow-modal:0 24px 60px rgba(20,22,31,.18), 0 2px 8px rgba(20,22,31,.06);
--backdrop:rgba(20,22,31,.45);
}
.fr-overlay, .fr-overlay *{box-sizing:border-box}
.fr-overlay{
font-family:-apple-system, BlinkMacSystemFont, 'Inter', sans-serif;
font-size:13px; line-height:1.45;
-webkit-font-smoothing:antialiased;
font-feature-settings:'cv02','cv03','cv04','cv11';
color:var(--text);
}
.fr-overlay button{font-family:inherit}
/* [v1137] Toggle thème dans la sidebar — bouton compact à côté du close */
.fr-theme-toggle{
width:24px; height:24px; padding:0;
background:transparent;
border:1px solid var(--border-hi);
border-radius:var(--radius);
color:var(--text-dim);
display:grid; place-items:center;
cursor:pointer;
flex-shrink:0;
transition:background 80ms, color 80ms;
}
.fr-theme-toggle:hover{ background:var(--s2); color:var(--text) }
.fr-theme-toggle svg{ width:12px; height:12px }
/* L'icône change selon le thème (sun en dark = bascule vers light) */
.fr-overlay[data-fr-theme="light"] .fr-theme-toggle .fr-icon-sun{ display:none }
.fr-overlay:not([data-fr-theme="light"]) .fr-theme-toggle .fr-icon-moon{ display:none }
/* ═══════════════════════════════════════════════════════════
Modal overlay (z=9990)
═══════════════════════════════════════════════════════════ */
.fr-overlay{
position:fixed; inset:0; z-index:9990;
background:var(--backdrop);
/* [v1132 Anthony "bg flouté et assombri"] */
backdrop-filter:blur(12px);
-webkit-backdrop-filter:blur(12px);
display:flex; align-items:center; justify-content:center;
padding:4vh 2vw;
animation:fr-fade .18s ease-out;
}
@keyframes fr-fade{ from{opacity:0} to{opacity:1} }
.fr-modal{
background:var(--surface);
border:1px solid var(--border-hi);
border-radius:14px;
/* [v1132 Anthony "popup plus petite"] : 1180px max, 86vh (vs 1500/96vh) */
width:min(1180px, 96vw);
height:min(820px, 86vh);
display:flex; flex-direction:column;
overflow:hidden;
box-shadow:var(--shadow-modal);
animation:fr-pop .22s cubic-bezier(.2,.7,.3,1.1);
}
@keyframes fr-pop{ from{transform:scale(.96); opacity:0} to{transform:scale(1); opacity:1} }
/* ═══ Header v1132 : RETIRÉ (intégré dans la sidebar gauche) ═══
Anthony "vire le header ou intègre le à la popup, je veux
vraiment immersif". Le header séparé prenait 50px de hauteur
verticale et créait une cassure visuelle. Maintenant le mini-
status est dans .fr-left en haut (.fr-left-status) et le bouton
close en haut à droite de la sidebar. */
.fr-head{ display:none }
/* Mini-status intégré à la sidebar gauche (remplace .fr-head) */
.fr-left-status{
display:flex; align-items:center; justify-content:space-between;
padding:0 2px 8px;
flex-shrink:0;
}
.fr-left-status-l{
display:flex; align-items:center; gap:7px;
}
.fr-left-status-dot{
width:6px; height:6px; border-radius:50%;
background:var(--accent);
box-shadow:0 0 8px var(--accent-glow);
}
.fr-left-status-title{
font-size:12px; font-weight:700; color:var(--text);
letter-spacing:.3px;
}
.fr-left-counters{
display:flex; gap:10px;
font-size:10px; color:var(--muted);
letter-spacing:.3px; text-transform:uppercase; font-weight:600;
padding:0 2px 8px;
flex-shrink:0;
}
.fr-left-counters strong{
color:var(--text); font-size:11px; font-weight:700;
}
.fr-left-counters .ok strong{ color:var(--green) }
/* Bouton close intégré à la sidebar (top right) */
.fr-close{
width:24px; height:24px; padding:0;
background:transparent; border:1px solid var(--border-hi);
border-radius:var(--radius); color:var(--text-dim);
display:grid; place-items:center; cursor:pointer;
flex-shrink:0;
}
.fr-close:hover{background:var(--s2); color:var(--text)}
.fr-close svg{width:10px; height:10px}
/* ═══ Body ═══ */
.fr-body{
display:grid;
/* [v1132 popup compacte] sidebar 300px (vs 340px) */
grid-template-columns:300px 1fr;
/* [v1133 fix bloquant Anthony screen 09h04 "complètement bug niveau UI"]
SANS width:100% + min-width:0, le grid ne s'étirait pas car .fr-body est
un flex-item enfant de .fr-modal (display:flex; flex-direction:column).
Dans un flex column, `flex:1` donne juste la HAUTEUR — pas la largeur.
Résultat : .fr-body se mettait à la largeur de son contenu (donc 300px
pour la sidebar) + le panel .fr-right overflow en dessous au lieu d'être
à droite. Fix : forcer width:100% pour que le grid container ait la
pleine largeur du parent flex (= .fr-modal). min-width:0 pour éviter
overflow horizontal si un enfant a un contenu trop large. */
width:100%; min-width:0;
flex:1; min-height:0;
overflow:hidden;
}
/* ═══════════════════════════════════════════════════════════
PANEL LEFT — liste des biens
═══════════════════════════════════════════════════════════ */
.fr-left{
display:flex; flex-direction:column;
border-right:1px solid var(--border);
background:var(--bg);
min-height:0;
/* [v1133 fix] min-width:0 + overflow hidden pour empêcher la sidebar de
déborder de la cellule grid 300px (le contenu interne scrolle via
fr-left-scroll). */
min-width:0; overflow:hidden;
}
.fr-left-scroll{
flex:1; min-height:0;
overflow-y:auto;
padding:14px;
display:flex; flex-direction:column; gap:8px;
}
.fr-section{
display:flex; align-items:center; justify-content:space-between;
padding:0 2px 4px;
}
.fr-section-lbl{
font-size:11px; font-weight:600;
letter-spacing:.10em; text-transform:uppercase;
color:var(--muted);
}
.fr-section-hint{font-size:11px; color:var(--muted)}
/* Card bien */
.fr-bien{
position:relative;
padding:11px 12px;
background:var(--surface);
border:1px solid var(--border);
border-radius:var(--radius);
cursor:pointer;
transition:background 80ms, border-color 80ms;
display:flex; flex-direction:column; gap:8px;
}
.fr-bien:hover{background:var(--s2); border-color:var(--border-hi)}
.fr-bien:focus-visible{outline:2px solid var(--accent); outline-offset:1px}
/* Bien actif — barre verticale accent à gauche */
.fr-bien.is-active{
background:var(--accent-dim);
border-color:color-mix(in srgb, var(--accent) 30%, var(--border));
}
.fr-bien.is-active::before{
content:""; position:absolute;
left:-1px; top:-1px; bottom:-1px; width:3px;
background:var(--accent);
border-radius:var(--radius-sm) 0 0 var(--radius-sm);
}
/* Bien fini */
.fr-bien.is-done{opacity:.7}
.fr-bien.is-done:hover{opacity:1}
/* [v1139 fix S1] Bouton × pour retirer un bien — discret, apparaît au hover */
.fr-bien-remove{
width:20px; height:20px; padding:0;
background:transparent;
border:1px solid transparent;
border-radius:var(--radius-sm);
color:var(--muted);
display:grid; place-items:center;
cursor:pointer;
flex-shrink:0;
opacity:0;
transition:opacity 100ms, background 80ms, color 80ms, border-color 80ms;
}
.fr-bien-remove svg{ width:10px; height:10px }
.fr-bien:hover .fr-bien-remove,
.fr-bien:focus-within .fr-bien-remove{ opacity:.7 }
.fr-bien-remove:hover{
opacity:1 !important;
background:color-mix(in srgb, var(--chaud) 12%, transparent);
border-color:color-mix(in srgb, var(--chaud) 28%, transparent);
color:var(--chaud);
}
.fr-bien-row{
display:flex; align-items:center; gap:10px;
}
.fr-bien-num{
/* [v1132 immersif] Num en cercle 800 (vs carré 600) */
width:20px; height:20px; flex-shrink:0;
display:grid; place-items:center;
background:var(--s3);
border:1px solid var(--border-hi);
color:var(--text-dim);
font-size:11px; font-weight:800;
font-variant-numeric:tabular-nums;
border-radius:50%;
}
.fr-bien.is-active .fr-bien-num{
background:var(--accent); color:var(--bg); border-color:var(--accent);
}
.fr-bien.is-done .fr-bien-num{
background:var(--green); color:var(--bg); border-color:var(--green);
}
.fr-bien-info{flex:1; min-width:0}
/* [v1132 immersif] Addr bien 14/800 (vs 14/700 v1131), tracking serré */
.fr-bien-addr{
font-size:14px; font-weight:800; color:var(--text);
letter-spacing:-.01em;
white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
/* Bien actif : meta en accent pour visibilité */
.fr-bien.is-active .fr-bien-meta{
color:var(--accent-hi);
font-weight:600;
}
.fr-bien-meta{
font-size:11px; color:var(--muted);
margin-top:1px;
font-variant-numeric:tabular-nums;
white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.fr-bien-done-badge{
display:inline-flex; align-items:center; gap:4px;
font-size:10px; font-weight:600;
padding:2px 6px;
background:color-mix(in srgb, var(--green) 15%, transparent);
border:1px solid color-mix(in srgb, var(--green) 30%, transparent);
color:var(--green);
border-radius:99px;
}
.fr-bien-done-badge .dot{
width:4px; height:4px; border-radius:50%;
background:var(--green);
}
.fr-bien-stats{
display:flex; align-items:center; gap:0;
font-size:11px; color:var(--text-dim);
font-variant-numeric:tabular-nums;
}
.fr-bien-stats > span{
display:inline-flex; align-items:center; gap:4px;
padding:0 8px;
border-right:1px solid var(--border);
}
.fr-bien-stats > span:first-child{padding-left:0}
.fr-bien-stats > span:last-child{border-right:0; margin-left:auto; padding-right:0}
.fr-bien-stats strong{color:var(--text); font-weight:600}
.fr-bien-progress{
height:3px;
background:var(--s3);
border-radius:99px;
overflow:hidden;
}
.fr-bien-progress-fill{
height:100%;
background:var(--text);
border-radius:99px;
transition:width .25s ease;
}
.fr-bien.is-active .fr-bien-progress-fill{background:var(--accent)}
.fr-bien.is-done .fr-bien-progress-fill{background:var(--green)}
/* Add bien button */
.fr-add-bien{
display:flex; align-items:center; justify-content:center; gap:6px;
padding:10px;
background:transparent;
border:1px dashed var(--border-hi);
border-radius:var(--radius);
color:var(--text-dim);
font:inherit; font-size:12px; font-weight:500;
cursor:pointer;
transition:background 80ms, color 80ms, border-color 80ms;
}
.fr-add-bien:hover{
background:var(--s2); color:var(--text);
border-color:var(--text-dim); border-style:solid;
}
.fr-add-bien svg{width:13px; height:13px}
/* Keyboard help (footer of left panel) — [v1132 compact 2 cols] */
.fr-kbd-help{
flex-shrink:0;
padding:10px 14px 12px;
border-top:1px solid var(--border);
background:var(--bg);
}
.fr-kbd-help-title{
font-size:9px; font-weight:700;
letter-spacing:1.2px; text-transform:uppercase;
color:var(--muted);
margin-bottom:6px;
}
.fr-kbd-help-grid{
display:grid;
grid-template-columns:1fr 1fr;
gap:3px 10px;
}
.fr-kbd-help-row{
display:flex; justify-content:space-between; align-items:center;
padding:1px 0;
font-size:10px; color:var(--text-dim);
}
.fr-kbd-help-row .kbd-group{display:inline-flex; gap:2px}
.fr-kbd-help .kbd{
font-family:'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
font-size:9px; line-height:1;
padding:1px 4px; min-width:13px;
background:var(--s3); border:1px solid var(--border-hi);
border-radius:2px; color:var(--text-dim);
text-align:center;
font-weight:600;
}
/* ═══════════════════════════════════════════════════════════
PANEL RIGHT — acquéreurs du bien actif
═══════════════════════════════════════════════════════════ */
.fr-right{
display:flex; flex-direction:column;
background:var(--surface);
min-height:0;
/* [v1133 fix] min-width:0 pour respecter la cellule 1fr du grid parent
même si le contenu interne (filtres, cards 2 cols) est large. */
min-width:0;
}
/* [v1135 Anthony "TU VAS ME LE SUPPRIMER CE PUTAIN DE HEADER UN JOUR ?"]
Header .fr-right-head retiré du DOM (anciennement contenait ACQUÉREURS|BIEN N|
adresse + filtres). Plus de label/sub redondant avec la sidebar gauche.
Remplacé par .fr-filters-bar : une barre discrète qui ne contient QUE les
filtres (Tous/Chauds/Jamais/Recall). Sticky sur le top du scroll pour rester
visible. Pas de border-bottom, pas de label, juste les pills. */
.fr-filters-bar{
flex-shrink:0;
/* [v1140 Anthony "réduis les pills tous chaud en haut"] padding réduit */
padding:7px 14px 5px;
display:flex; justify-content:flex-end;
background:var(--surface);
}
/* fr-right-head et enfants : masqués (au cas où du HTML résiduel y fait
référence). v1136 si tout marche bien on supprime ces règles + le code mort. */
.fr-right-head,
.fr-right-head-l,
.fr-right-head-lbl,
.fr-right-head-sub{ display:none !important; }
.fr-right-head{
display:flex; align-items:center; justify-content:space-between;
gap:12px;
padding:12px 16px;
border-bottom:1px solid var(--border);
flex-shrink:0;
}
.fr-right-head-l{min-width:0}
.fr-right-head-lbl{
display:flex; align-items:center; gap:8px;
/* [v1132 immersif] Label uppercase 700 */
font-size:10px; font-weight:700;
letter-spacing:1.2px; text-transform:uppercase;
color:var(--muted);
}
.fr-right-head-lbl .pill{
/* [v1132 immersif] Pill BIEN N en uppercase 800 */
font-size:9px; padding:2px 8px;
background:var(--accent-dim);
color:var(--accent-hi);
border-radius:99px;
letter-spacing:.4px; font-weight:800;
font-variant-numeric:tabular-nums;
}
.fr-right-head-sub{
/* [v1132 immersif] Sub plus discrète (le focus est sur les cards) */
font-size:12px; font-weight:500; color:var(--muted);
margin-top:3px;
font-variant-numeric:tabular-nums;
white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.fr-right-head-sub .sep{color:var(--muted); margin:0 5px}
.fr-right-head-sub .dim{color:var(--text-dim); font-weight:600}
.fr-filters{
display:flex; gap:4px; align-items:center;
flex-wrap:wrap; justify-content:flex-end;
}
.fr-filter{
display:inline-flex; align-items:center; gap:5px;
/* [v1140 fix Anthony "réduis les pills tous chaud etc en haut"]
Pills plus compactes : padding 3px 9px (vs 5px 11px), font 10px (vs 11px) */
padding:3px 9px;
background:transparent;
border:1px solid var(--border-hi);
border-radius:99px;
color:var(--text-dim);
font:inherit; font-size:10px; font-weight:700;
cursor:pointer;
transition:background 80ms, color 80ms, border-color 80ms;
}
.fr-filter:hover{background:var(--s2); color:var(--text); border-color:var(--text-dim)}
.fr-filter[aria-pressed="true"]{
background:var(--text); color:var(--bg);
border-color:var(--text);
}
.fr-filter .count{
font-variant-numeric:tabular-nums;
color:var(--muted); font-weight:600;
}
.fr-filter[aria-pressed="true"] .count{color:color-mix(in srgb, var(--bg) 60%, transparent)}
.fr-right-scroll{
flex:1; min-height:0;
overflow-y:auto;
padding:14px 18px 20px;
/* [v1131 fix Anthony "côté acquéreur fais deux colonnes, pleine largeur
c'est moche"] Passe la liste en CSS grid 2 colonnes (auto-fill 360px min).
Sur écrans < 1100px effectif (modal interne) ça retombe naturellement à 1
colonne. Alerte et empty state passent en full-width via grid-column 1/-1. */
display:grid;
grid-template-columns:repeat(auto-fill, minmax(360px, 1fr));
gap:10px;
align-content:start;
}
/* Alerte + empty state prennent toute la largeur (pas de split) */
.fr-right-scroll > .fr-alert,
.fr-right-scroll > .fr-empty{
grid-column:1 / -1;
}
/* Alerte doublon */
.fr-alert{
display:flex; align-items:flex-start; gap:10px;
padding:10px 12px;
background:color-mix(in srgb, var(--tiede) 12%, transparent);
border:1px solid color-mix(in srgb, var(--tiede) 30%, transparent);
border-radius:var(--radius);
font-size:12px; color:var(--text);
line-height:1.5;
}
.fr-alert svg{flex-shrink:0; width:14px; height:14px; color:var(--tiede); margin-top:2px}
.fr-alert strong{color:var(--text); font-weight:600}
.fr-alert a{color:var(--text-dim); text-decoration:underline; text-underline-offset:2px}
.fr-alert a:hover{color:var(--text)}
/* [v1140] Bouton "Voir l'historique" — style link inline */
.fr-alert-link{
background:transparent;
border:none; padding:0;
font:inherit; font-size:inherit;
color:var(--text-dim);
text-decoration:underline; text-underline-offset:2px;
cursor:pointer;
}
.fr-alert-link:hover{ color:var(--text) }
/* ═══ Card acquéreur ═══ */
.fr-acq{
position:relative;
padding:12px 14px;
background:var(--surface);
border:1px solid var(--border);
border-radius:var(--radius);
transition:background 80ms, border-color 80ms, opacity .15s;
display:flex; flex-direction:column; gap:10px;
}
.fr-acq:hover{border-color:var(--border-hi)}
.fr-acq.is-selected{
/* [v1132 immersif] Outer glow accent + border, vraiment se détache */
border-color:var(--accent);
box-shadow:0 0 0 1px var(--accent-glow), 0 4px 12px rgba(139,123,255,.15);
}
.fr-acq.is-notif{opacity:.5}
.fr-acq.is-notif .fr-acq-actions{display:none}
.fr-acq.is-fading{animation:fr-fade-out .5s ease forwards}
@keyframes fr-fade-out{
0%{opacity:1; transform:translateX(0)}
40%{opacity:1; transform:translateX(0)}
100%{opacity:.5; transform:translateX(0)}
}
.fr-acq-row{
display:flex; align-items:center; gap:12px;
}
.fr-av{
width:34px; height:34px; flex-shrink:0;
display:grid; place-items:center;
border-radius:var(--radius);
/* [v1132 immersif] Avatar 800 */
font-size:13px; font-weight:800;
letter-spacing:.02em;
}
.fr-acq-info{flex:1; min-width:0}
.fr-acq-name-row{
display:flex; align-items:center; gap:6px; flex-wrap:wrap;
}
/* [v1132 immersif "plus gras"] Nom 14/800 (vs 14/700 v1131) */
.fr-acq-name{
font-size:14px; font-weight:800; color:var(--text);
letter-spacing:-.01em;
}
.fr-acq-meta{
font-size:12px; color:var(--text-dim);
margin-top:2px;
font-variant-numeric:tabular-nums;
}
.fr-acq-meta .sep{color:var(--muted); margin:0 5px}
.fr-acq-meta .resp{
color:var(--text); font-weight:600;
}
.fr-acq-meta .resp.is-high{color:var(--green)}
.fr-acq-meta .resp.is-low{color:var(--muted)}
.fr-score{
/* [v1132 immersif] Score 24/800 (vs 22/700 v1131) avec tracking serré.
Note JS : afficher en 2 spans 95%
pour pouvoir faire le % plus petit/opacity. v1132 garde texte simple, à
splitter en v1133 si besoin. */
font-size:24px; font-weight:800;
color:var(--text);
font-variant-numeric:tabular-nums;
letter-spacing:-.03em;
flex-shrink:0;
}
.fr-acq.is-notif .fr-score{font-size:14px; color:var(--text-dim)}
/* Tags (chaud/tiède/notifié) — [v1132 immersif] uppercase + tracking + 700 */
.fr-tag{
display:inline-flex; align-items:center; gap:4px;
font-size:9px; font-weight:700;
padding:2px 7px;
border-radius:99px;
white-space:nowrap;
text-transform:uppercase;
letter-spacing:.4px;
}
.fr-tag .dot{
width:5px; height:5px; border-radius:50%;
background:currentColor;
}
.fr-tag-chaud{
background:color-mix(in srgb, var(--chaud) 15%, transparent);
border:1px solid color-mix(in srgb, var(--chaud) 32%, transparent);
color:var(--chaud);
}
.fr-tag-tiede{
background:color-mix(in srgb, var(--tiede) 15%, transparent);
border:1px solid color-mix(in srgb, var(--tiede) 32%, transparent);
color:var(--tiede);
}
.fr-tag-froid{
background:color-mix(in srgb, var(--froid) 15%, transparent);
border:1px solid color-mix(in srgb, var(--froid) 32%, transparent);
color:var(--froid);
}
.fr-tag-notif{
background:color-mix(in srgb, var(--green) 15%, transparent);
border:1px solid color-mix(in srgb, var(--green) 32%, transparent);
color:var(--green);
}
.fr-tag-selected{
background:var(--accent-dim);
border:1px solid color-mix(in srgb, var(--accent) 28%, transparent);
color:var(--accent);
}
/* Matching chips */
.fr-chips{
display:flex; gap:4px; flex-wrap:wrap;
}
.fr-chip{
display:inline-flex; align-items:center; gap:4px;
/* [v1132 immersif] Chips 700 (vs 500 v1131) */
font-size:10px; font-weight:700;
padding:3px 7px;
background:var(--s2);
border:1px solid var(--border);
border-radius:var(--radius-sm);
color:var(--text-dim);
}
.fr-chip svg{width:10px; height:10px}
.fr-chip.ok{
background:color-mix(in srgb, var(--green) 10%, transparent);
border-color:color-mix(in srgb, var(--green) 25%, transparent);
color:var(--green);
}
.fr-chip.tiede{
background:color-mix(in srgb, var(--tiede) 10%, transparent);
border-color:color-mix(in srgb, var(--tiede) 25%, transparent);
color:var(--tiede);
}
.fr-chip.no{
background:color-mix(in srgb, var(--chaud) 10%, transparent);
border-color:color-mix(in srgb, var(--chaud) 25%, transparent);
color:var(--chaud);
}
/* Actions row */
.fr-acq-actions{
display:flex; gap:6px; align-items:center;
}
.fr-btn{
display:inline-flex; align-items:center; justify-content:center; gap:6px;
height:30px; padding:0 12px;
background:var(--s2);
border:1px solid var(--border);
border-radius:var(--radius);
color:var(--text);
/* [v1132 immersif] Btn secondary 700 */
font:inherit; font-size:12px; font-weight:700;
cursor:pointer;
transition:background 80ms, border-color 80ms;
}
.fr-btn:hover{background:var(--s3); border-color:var(--border-hi)}
.fr-btn svg{width:12px; height:12px}
.fr-btn-icon{padding:0; width:30px}
/* [v1146] WhatsApp button : icône colorée brand au hover, disabled si pas
de numéro de téléphone (visuel grisé, cursor not-allowed). */
.fr-btn-wa svg{ color:#25d366 }
.fr-btn-wa:hover:not(.is-disabled){
background:rgba(37,211,102,0.10);
border-color:rgba(37,211,102,0.30);
}
.fr-btn-wa.is-disabled,
.fr-btn:disabled{
opacity:.4;
cursor:not-allowed;
pointer-events:none;
}
.fr-btn-primary{
flex:1;
background:var(--text); color:var(--bg);
border-color:var(--text);
/* [v1132 immersif "plus gras"] Btn primary 800 (vs 600 v1131) */
font-weight:800;
}
.fr-btn-primary:hover{
background:var(--text-dim); border-color:var(--text-dim);
}
.fr-kbd-inline{
font-family:'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
font-size:9px; line-height:1;
padding:2px 4px; min-width:12px;
background:color-mix(in srgb, currentColor 15%, transparent);
border-radius:2px;
margin-left:2px;
font-weight:500;
}
/* Empty state */
.fr-empty{
margin:auto;
text-align:center;
padding:32px;
max-width:380px;
}
.fr-empty-icon{
width:48px; height:48px;
margin:0 auto 14px;
display:grid; place-items:center;
background:var(--s2);
border:1px solid var(--border);
border-radius:var(--radius-lg);
color:var(--text-dim);
}
.fr-empty-icon svg{width:22px; height:22px}
.fr-empty-title{
font-size:14px; font-weight:600;
color:var(--text);
margin-bottom:4px;
}
.fr-empty-sub{
font-size:12px; color:var(--text-dim);
margin-bottom:14px;
line-height:1.5;
}
.fr-empty-actions{
display:flex; gap:6px; justify-content:center;
}
/* Toast (session feedback) */
.fr-toast{
position:fixed; bottom:24px; left:50%; transform:translateX(-50%);
z-index:10000;
display:inline-flex; align-items:center; gap:8px;
padding:9px 14px;
background:var(--text); color:var(--bg);
border-radius:var(--radius);
font-size:12px; font-weight:500;
box-shadow:0 8px 24px rgba(0,0,0,.18);
animation:fr-toast .3s cubic-bezier(.2,.7,.3,1.1);
}
.fr-toast svg{width:13px; height:13px; color:var(--green)}
@keyframes fr-toast{
from{transform:translate(-50%,12px); opacity:0}
to{transform:translate(-50%,0); opacity:1}
}
/* Help popup (?) */
.fr-help-backdrop{
position:fixed; inset:0; z-index:9994;
background:var(--backdrop);
display:flex; align-items:center; justify-content:center;
animation:fr-fade .14s ease-out;
}
.fr-help{
background:var(--surface);
border:1px solid var(--border);
border-radius:var(--radius-lg);
width:min(440px, 92vw);
padding:20px 22px;
box-shadow:var(--shadow-modal);
}
.fr-help-title{
font-size:14px; font-weight:600;
margin-bottom:14px;
display:flex; justify-content:space-between; align-items:center;
}
.fr-help-grid{
display:grid; grid-template-columns:1fr auto;
gap:8px 16px;
font-size:12px;
}
.fr-help-grid .lbl{color:var(--text-dim)}
.fr-help-grid .kbd-group{display:inline-flex; gap:3px; justify-content:flex-end}
.fr-help .kbd{
font-family:'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
font-size:10px; padding:2px 6px; min-width:18px;
background:var(--s2); border:1px solid var(--border);
border-radius:2px; color:var(--text); text-align:center;
}
/* ═══════════════════════════════════════════════════════════
Bien picker (z=9991, par-dessus le focus modal)
[v1131 fix Anthony screen 2 : le picker n'avait aucun CSS dans
le handoff Margot. "À câbler côté prod" disait son README. Du
coup il se mettait n'importe où en absolute, couvrant la sidebar
raccourcis. Fix : positionnement centré sur la modal avec
backdrop overlay propre.]
═══════════════════════════════════════════════════════════ */
.fr-picker{
position:absolute;
top:60px; left:50%;
transform:translateX(-50%);
z-index:9991;
width:min(540px, calc(100% - 32px));
max-height:calc(96vh - 100px);
background:var(--surface);
border:1px solid var(--border-hi);
border-radius:var(--radius-lg);
box-shadow:var(--shadow-modal);
display:flex; flex-direction:column;
overflow:hidden;
animation:fr-picker-in .14s ease-out;
}
@keyframes fr-picker-in{
from{ opacity:0; transform:translate(-50%, -8px); }
to{ opacity:1; transform:translate(-50%, 0); }
}
.fr-picker-head{
display:flex; align-items:center; gap:8px;
padding:10px 12px;
border-bottom:1px solid var(--border);
flex-shrink:0;
}
.fr-picker-input{
flex:1;
background:var(--s2);
border:1px solid var(--border);
border-radius:var(--radius);
padding:8px 12px;
font:inherit; font-size:13px;
color:var(--text);
outline:none;
transition:border-color .12s;
}
.fr-picker-input:focus{
border-color:color-mix(in srgb, var(--accent) 50%, var(--border));
background:var(--surface);
}
.fr-picker-input::placeholder{ color:var(--muted) }
.fr-picker-list{
flex:1; min-height:0;
overflow-y:auto;
padding:6px;
}
.fr-picker-item{
display:flex; align-items:center; gap:12px;
padding:9px 12px;
border-radius:var(--radius);
cursor:pointer;
font-size:13px;
transition:background .1s;
}
.fr-picker-item:hover{ background:var(--s2) }
.fr-picker-item-addr{
font-weight:600; color:var(--text);
white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
flex:1; min-width:0;
}
.fr-picker-item-meta{
font-size:12px; color:var(--text-dim);
flex-shrink:0;
font-variant-numeric:tabular-nums;
}
/* ═══════════════════════════════════════════════════════════
[v1138] Mini-overlay fiche client v5 (z=9995 > focus z=9990)
Anthony "fais moi une fiche plus sympa, t'as même pas mis le score
donna instinct lol". Refonte complète :
- Hero compact + tag statut
- Donna Instinct (bloc accent violet, score global + 3 sub-scores)
- Bien actif en contexte + matching chips
- Joindre maintenant (2 cards d'action tel/mail)
- Critères en stat cards
- Timeline activité
- Notes
═══════════════════════════════════════════════════════════ */
.fr-fiche-overlay{
position:fixed; inset:0; z-index:9995;
background:rgba(0,0,0,.4);
backdrop-filter:blur(4px);
-webkit-backdrop-filter:blur(4px);
display:flex; justify-content:flex-end;
animation:fr-fade .15s ease-out;
}
/* [v1138] Backdrop adapté light pour cohérence quand thème light scopé fiche */
.fr-fiche-overlay[data-fr-theme="light"]{
background:rgba(20,22,31,.25);
}
.fr-fiche-panel{
width:min(480px, 92vw); height:100%;
background:var(--surface);
border-left:1px solid var(--border-hi);
display:flex; flex-direction:column;
overflow:hidden;
box-shadow:-24px 0 60px rgba(0,0,0,.5);
animation:fr-slide-r .22s cubic-bezier(.2,.7,.3,1);
}
.fr-fiche-overlay[data-fr-theme="light"] .fr-fiche-panel{
box-shadow:-24px 0 60px rgba(20,22,31,.18);
}
@keyframes fr-slide-r{ from{transform:translateX(40px); opacity:0} to{transform:translateX(0); opacity:1} }
.fr-fiche-head{
display:flex; align-items:center; justify-content:space-between;
padding:12px 16px;
border-bottom:1px solid var(--border);
flex-shrink:0;
}
.fr-fiche-back, .fr-fiche-full{
display:inline-flex; align-items:center; gap:6px;
padding:7px 12px;
background:var(--s2);
border:1px solid var(--border-hi);
border-radius:var(--radius);
color:var(--text);
font:inherit; font-size:12px; font-weight:700;
cursor:pointer;
text-decoration:none;
transition:background 80ms, border-color 80ms;
}
.fr-fiche-back:hover{ background:var(--s3); border-color:var(--text-dim) }
.fr-fiche-full{
background:var(--text); color:var(--bg);
border-color:var(--text);
font-weight:800;
}
.fr-fiche-full:hover{ background:var(--text-dim); border-color:var(--text-dim) }
.fr-fiche-back svg, .fr-fiche-full svg{ width:12px; height:12px }
.fr-fiche-body{
flex:1; min-height:0;
overflow-y:auto;
padding:18px 18px 24px;
display:flex; flex-direction:column; gap:18px;
}
/* HERO : avatar 56 + nom + tag statut */
.fr-fiche-hero{
display:flex; align-items:center; gap:14px;
}
.fr-fiche-av{
width:56px; height:56px; flex-shrink:0;
display:grid; place-items:center;
border-radius:12px;
font-size:19px; font-weight:800;
letter-spacing:.02em;
}
.fr-fiche-hero-info{ flex:1; min-width:0 }
.fr-fiche-hero-name-row{
display:flex; align-items:center; gap:8px; flex-wrap:wrap;
margin-bottom:4px;
}
.fr-fiche-name{
font-size:18px; font-weight:800;
color:var(--text);
letter-spacing:-.01em;
}
.fr-fiche-hero-sub{
font-size:12px; color:var(--text-dim); font-weight:500;
}
/* DONNA INSTINCT : bloc accent violet, le truc sympa */
.fr-instinct{
background:linear-gradient(135deg, var(--accent-dim) 0%, color-mix(in srgb, var(--accent-dim) 30%, transparent) 100%);
border:1px solid color-mix(in srgb, var(--accent) 25%, transparent);
border-radius:10px;
padding:14px 16px;
}
.fr-instinct-head{
display:flex; align-items:center; justify-content:space-between;
margin-bottom:12px;
}
.fr-instinct-lbl{
display:inline-flex; align-items:center; gap:8px;
color:var(--accent-hi);
}
.fr-instinct-lbl svg{ width:14px; height:14px }
.fr-instinct-lbl span{
font-size:10px; font-weight:800;
letter-spacing:1.4px; text-transform:uppercase;
}
.fr-instinct-score{
display:flex; align-items:baseline; gap:4px;
font-variant-numeric:tabular-nums;
}
.fr-instinct-score span{
font-size:28px; font-weight:800;
color:var(--text);
letter-spacing:-.03em;
}
.fr-instinct-score .pct{
font-size:16px; font-weight:700;
color:var(--text-dim); opacity:.7;
}
.fr-instinct-subs{
display:grid;
grid-template-columns:1fr 1fr 1fr;
gap:8px;
}
.fr-instinct-sub-head{
display:flex; justify-content:space-between; align-items:baseline;
margin-bottom:4px;
}
.fr-instinct-sub-head span{
font-size:9px; font-weight:700;
color:var(--muted);
letter-spacing:.4px; text-transform:uppercase;
}
.fr-instinct-sub-head strong{
font-size:11px; font-weight:800;
color:var(--text);
font-variant-numeric:tabular-nums;
}
.fr-instinct-bar{
height:3px;
background:color-mix(in srgb, var(--text) 8%, transparent);
border-radius:99px;
overflow:hidden;
}
.fr-instinct-bar div{
height:100%;
border-radius:99px;
transition:width 240ms ease-out;
}
.fr-instinct-analysis{
font-size:11px; color:var(--text-dim);
line-height:1.5;
margin-top:12px;
padding-top:12px;
border-top:1px solid color-mix(in srgb, var(--text) 8%, transparent);
}
.fr-instinct-analysis .arrow{
color:var(--accent-hi);
font-weight:700;
}
/* SECTIONS : label uppercase + contenu */
.fr-fiche-section{
display:flex; flex-direction:column; gap:8px;
}
.fr-fiche-lbl{
font-size:9px; font-weight:800;
letter-spacing:1.2px; text-transform:uppercase;
color:var(--muted);
}
/* BIEN actif en contexte */
.fr-fiche-bien{
background:var(--s2);
border:1px solid var(--border);
border-radius:8px;
padding:10px 12px;
}
.fr-fiche-bien-row{
display:flex; align-items:center; gap:8px;
}
.fr-fiche-bien-num{
width:18px; height:18px;
background:var(--accent); color:var(--bg);
border-radius:50%;
display:grid; place-items:center;
font-size:10px; font-weight:800;
flex-shrink:0;
}
.fr-fiche-bien-info{ flex:1; min-width:0 }
.fr-fiche-bien-addr{
font-size:13px; font-weight:700; color:var(--text);
white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.fr-fiche-bien-meta{
font-size:11px; color:var(--text-dim); font-weight:500;
font-variant-numeric:tabular-nums;
}
.fr-fiche-chips{
display:flex; gap:4px; margin-top:10px; flex-wrap:wrap;
}
.fr-fiche-chip{
display:inline-flex; align-items:center; gap:4px;
font-size:10px; font-weight:700;
padding:3px 8px;
border-radius:4px;
}
.fr-fiche-chip svg{ width:9px; height:9px }
.fr-fiche-chip.ok{
background:color-mix(in srgb, var(--green) 13%, transparent);
color:var(--green);
}
.fr-fiche-chip.tiede{
background:color-mix(in srgb, var(--tiede) 13%, transparent);
color:var(--tiede);
}
.fr-fiche-chip.no{
background:color-mix(in srgb, var(--chaud) 13%, transparent);
color:var(--chaud);
}
/* JOINDRE MAINTENANT : 3 cards d'action (tel + WhatsApp + mail) [v1145] */
.fr-fiche-contact{
display:grid;
grid-template-columns:1fr 1fr 1fr;
gap:5px;
}
.fr-fiche-cbtn{
display:flex; align-items:center; gap:8px;
padding:10px 11px;
background:var(--s2);
border:1px solid var(--border);
border-radius:6px;
text-decoration:none;
color:var(--text);
transition:background 80ms, border-color 80ms;
min-width:0;
}
.fr-fiche-cbtn-active:hover{
background:var(--s3);
border-color:var(--border-hi);
}
.fr-fiche-cbtn-empty{
opacity:.55;
cursor:default;
}
.fr-fiche-cbtn-icon{
width:28px; height:28px;
border-radius:50%;
background:color-mix(in srgb, var(--text) 6%, transparent);
display:grid; place-items:center;
flex-shrink:0;
}
.fr-fiche-cbtn-icon svg{ width:13px; height:13px; color:var(--muted) }
.fr-fiche-cbtn-icon-green{
background:color-mix(in srgb, var(--green) 15%, transparent);
}
.fr-fiche-cbtn-icon-green svg{ color:var(--green) }
.fr-fiche-cbtn-icon-blue{
background:color-mix(in srgb, var(--froid) 15%, transparent);
}
.fr-fiche-cbtn-icon-blue svg{ color:var(--froid) }
/* [v1145] WhatsApp brand green #25d366 */
.fr-fiche-cbtn-icon-wa{
background:rgba(37,211,102,0.15);
}
.fr-fiche-cbtn-icon-wa svg{ color:#25d366 }
.fr-fiche-cbtn-content{
min-width:0; flex:1;
}
.fr-fiche-cbtn-content .lbl{
display:block;
font-size:9px; color:var(--muted); font-weight:700;
letter-spacing:.3px; text-transform:uppercase;
}
.fr-fiche-cbtn-content strong{
display:block;
font-size:13px; font-weight:700; color:var(--text);
font-variant-numeric:tabular-nums;
white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.fr-fiche-cbtn-empty .fr-fiche-cbtn-content strong{
color:var(--muted); font-weight:600;
}
/* CRITÈRES : 3 stat cards + zones pills */
.fr-fiche-stats{
display:grid;
grid-template-columns:1fr 1fr 1fr;
gap:6px;
}
.fr-fiche-stat{
padding:9px 10px;
background:var(--s2);
border:1px solid var(--border);
border-radius:5px;
min-width:0;
}
.fr-fiche-stat .stat-lbl{
font-size:9px; color:var(--muted); font-weight:700;
letter-spacing:.3px; text-transform:uppercase;
margin-bottom:3px;
}
.fr-fiche-stat .stat-val{
font-size:14px; font-weight:800; color:var(--text);
letter-spacing:-.01em;
}
.fr-fiche-stat .stat-unit{
font-size:11px; color:var(--text-dim); font-weight:700;
}
.fr-fiche-zones{
padding:9px 12px;
background:var(--s2);
border:1px solid var(--border);
border-radius:5px;
}
.fr-fiche-zones .stat-lbl{
font-size:9px; color:var(--muted); font-weight:700;
letter-spacing:.3px; text-transform:uppercase;
margin-bottom:6px;
}
.fr-fiche-zones-list{
display:flex; flex-wrap:wrap; gap:4px;
}
.fr-fiche-zone{
font-size:10px; padding:2px 7px;
background:color-mix(in srgb, var(--accent) 10%, transparent);
border:1px solid color-mix(in srgb, var(--accent) 22%, transparent);
color:var(--accent-hi);
border-radius:99px;
font-weight:700;
font-variant-numeric:tabular-nums;
}
/* TIMELINE activité */
.fr-fiche-timeline{
background:var(--s2);
border:1px solid var(--border);
border-radius:6px;
overflow:hidden;
}
.fr-fiche-tl-item{
display:flex; align-items:center; gap:10px;
padding:9px 12px;
}
.fr-fiche-tl-item + .fr-fiche-tl-item{
border-top:1px solid var(--border);
}
.fr-fiche-tl-dot{
width:6px; height:6px; border-radius:50%;
background:var(--muted);
flex-shrink:0;
}
.fr-fiche-tl-dot.active{
background:var(--green);
box-shadow:0 0 6px color-mix(in srgb, var(--green) 60%, transparent);
}
.fr-fiche-tl-dot.empty{
background:transparent;
border:1px dashed var(--muted);
}
.fr-fiche-tl-info{ flex:1; min-width:0 }
.fr-fiche-tl-title{
font-size:12px; font-weight:600; color:var(--text);
}
.fr-fiche-tl-time{
font-size:10px; color:var(--muted); font-weight:500;
margin-top:1px;
font-variant-numeric:tabular-nums;
}
/* NOTES */
.fr-fiche-notes{
padding:12px 14px;
background:var(--s2);
border:1px solid var(--border);
border-radius:6px;
font-size:13px; color:var(--text);
white-space:pre-wrap;
line-height:1.6;
}
.fr-fiche-notes-empty{
border:1px dashed var(--border-hi);
color:var(--muted);
font-style:italic;
font-size:12px;
}
/* [v1140] Journal d'appel : liste compacte des 3 derniers contacts */
.fr-fiche-journal{
display:flex; flex-direction:column;
background:var(--s2);
border:1px solid var(--border);
border-radius:6px;
overflow:hidden;
}
.fr-fiche-journal-item{
padding:10px 14px;
}
.fr-fiche-journal-item + .fr-fiche-journal-item{
border-top:1px solid var(--border);
}
.fr-fiche-journal-date{
font-size:10px; color:var(--muted);
font-weight:700; letter-spacing:.4px; text-transform:uppercase;
margin-bottom:4px;
font-variant-numeric:tabular-nums;
}
.fr-fiche-journal-content{
font-size:12px; color:var(--text);
line-height:1.5;
white-space:pre-wrap;
}
/* ═══════════════════════════════════════════════════════════
[v1136] Confirmation popup "Terminer la session" (z=9998 > tout)
Anthony "quand on clic hors de la popup ou la X pour fermer, il faut
TOUJOURS une popup de confirmation pour fermer genre terminer la session"
═══════════════════════════════════════════════════════════ */
.fr-confirm-overlay{
position:fixed; inset:0; z-index:9998;
background:rgba(0,0,0,.5);
backdrop-filter:blur(6px);
-webkit-backdrop-filter:blur(6px);
display:flex; align-items:center; justify-content:center;
padding:2vh 2vw;
animation:fr-fade .14s ease-out;
}
.fr-confirm{
background:var(--surface);
border:1px solid var(--border-hi);
border-radius:12px;
width:min(380px, 94vw);
padding:22px 24px 18px;
box-shadow:0 24px 60px rgba(0,0,0,.6);
animation:fr-pop .18s cubic-bezier(.2,.7,.3,1.1);
}
.fr-confirm-title{
font-size:16px; font-weight:800;
color:var(--text);
letter-spacing:-.01em;
margin-bottom:8px;
}
.fr-confirm-sub{
font-size:13px; color:var(--text-dim);
line-height:1.5;
margin-bottom:18px;
}
.fr-confirm-sub strong{
color:var(--text); font-weight:700;
}
.fr-confirm-actions{
display:flex; gap:8px; justify-content:flex-end;
}
.fr-confirm-btn{
padding:8px 16px;
border-radius:var(--radius);
font:inherit; font-size:13px; font-weight:700;
cursor:pointer;
transition:background 80ms, border-color 80ms;
}
.fr-confirm-btn-secondary{
background:transparent;
border:1px solid var(--border-hi);
color:var(--text);
}
.fr-confirm-btn-secondary:hover{ background:var(--s2); border-color:var(--text-dim) }
.fr-confirm-btn-primary{
background:var(--text); color:var(--bg);
border:1px solid var(--text);
font-weight:800;
}
.fr-confirm-btn-primary:hover{ background:var(--text-dim); border-color:var(--text-dim) }
.fr-confirm-btn-primary:focus-visible{ outline:2px solid var(--accent); outline-offset:2px }
/* ═══════════════════════════════════════════════════════════
[v1147] Modal Settings — paramètres message de relance
Réutilise .fr-confirm-overlay comme backdrop (mêmes tokens dark/light).
═══════════════════════════════════════════════════════════ */
.fr-ms-modal{
background:var(--surface);
border:1px solid var(--border-hi);
border-radius:12px;
width:min(640px, 94vw);
max-height:88vh;
display:flex; flex-direction:column;
box-shadow:0 24px 60px rgba(0,0,0,.6);
animation:fr-pop .18s cubic-bezier(.2,.7,.3,1.1);
}
.fr-ms-head{
display:flex; justify-content:space-between; align-items:flex-start;
padding:18px 22px 12px;
border-bottom:1px solid var(--border);
flex-shrink:0;
}
.fr-ms-title{
font-size:16px; font-weight:800;
color:var(--text);
letter-spacing:-.01em;
margin-bottom:3px;
}
.fr-ms-sub{
font-size:12px; color:var(--text-dim);
line-height:1.4;
}
.fr-ms-close{
width:26px; height:26px; padding:0;
background:transparent;
border:1px solid var(--border);
border-radius:var(--radius);
color:var(--text-dim);
cursor:pointer;
display:grid; place-items:center;
flex-shrink:0;
transition:background 80ms, color 80ms;
}
.fr-ms-close:hover{ background:var(--s2); color:var(--text) }
.fr-ms-close svg{ width:12px; height:12px }
.fr-ms-body{
flex:1; min-height:0;
overflow-y:auto;
padding:16px 22px;
display:flex; flex-direction:column; gap:18px;
}
.fr-ms-section{
display:flex; flex-direction:column; gap:9px;
}
.fr-ms-lbl{
font-size:10px; font-weight:800;
letter-spacing:1.2px; text-transform:uppercase;
color:var(--muted);
}
/* SIGNATURE — grid 2 cols */
.fr-ms-grid{
display:grid;
grid-template-columns:1fr 1fr;
gap:8px 12px;
}
.fr-ms-field{
display:flex; flex-direction:column; gap:4px;
min-width:0;
}
.fr-ms-field-full{ grid-column:1 / -1 }
.fr-ms-field span{
font-size:10px; color:var(--muted);
font-weight:700; text-transform:uppercase; letter-spacing:.4px;
}
.fr-ms-field input{
width:100%;
padding:8px 10px;
background:var(--s2);
border:1px solid var(--border);
border-radius:var(--radius);
font:inherit; font-size:13px;
color:var(--text);
font-family:inherit;
outline:none;
transition:border-color 80ms, background 80ms;
}
.fr-ms-field input:focus{
border-color:var(--accent);
background:var(--s3);
}
.fr-ms-field input::placeholder{ color:var(--muted) }
/* TONES — 4 cards radio */
.fr-ms-tones{
display:grid;
grid-template-columns:1fr 1fr;
gap:6px;
}
.fr-ms-tone{
display:flex; align-items:flex-start; gap:9px;
padding:10px 12px;
background:var(--s2);
border:1px solid var(--border);
border-radius:var(--radius);
cursor:pointer;
transition:background 80ms, border-color 80ms;
}
.fr-ms-tone:hover{
background:var(--s3);
border-color:var(--border-hi);
}
.fr-ms-tone.is-checked{
border-color:var(--accent);
background:color-mix(in srgb, var(--accent) 8%, var(--s2));
}
.fr-ms-tone input{
margin:2px 0 0;
cursor:pointer;
accent-color:var(--accent);
flex-shrink:0;
}
.fr-ms-tone-l{ flex:1; min-width:0 }
.fr-ms-tone-name{
font-size:13px; font-weight:700;
color:var(--text);
}
.fr-ms-tone-hint{
font-size:11px; color:var(--muted);
line-height:1.4;
margin-top:2px;
}
/* RADIO ROW (tutoiement) */
.fr-ms-radio-row{
display:flex; gap:14px;
}
.fr-ms-radio{
display:inline-flex; align-items:center; gap:7px;
cursor:pointer;
font-size:13px; color:var(--text);
}
.fr-ms-radio input{
cursor:pointer;
accent-color:var(--accent);
}
/* PREVIEW */
.fr-ms-preview{
display:flex; flex-direction:column; gap:8px;
padding:14px 16px;
background:var(--s2);
border:1px solid var(--border);
border-radius:var(--radius);
}
.fr-ms-preview-body{
font-family:'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
font-size:12px; color:var(--text-dim);
line-height:1.55;
white-space:pre-wrap;
margin:0;
}
/* ACTIONS bottom */
.fr-ms-actions{
display:flex; justify-content:flex-end; gap:8px;
padding:14px 22px;
border-top:1px solid var(--border);
flex-shrink:0;
}