s'alignent automatiquement sous les colonnes du tableau. */
#mainTable tfoot td {
background: var(--color-surface3);
border-top: 2px solid var(--color-border);
font-weight: 400; /* resultats NON gras */
font-variant-numeric: tabular-nums;
text-align: right;
padding: .6rem 1rem;
/* le tfoot ne tronque pas : une somme doit rester lisible en entier */
white-space: nowrap;
overflow: visible;
text-overflow: clip;
}
#mainTable tfoot td.tfoot-label {
text-align: left;
color: var(--color-text-muted);
font-weight: 400;
}
/* Pas d'espace entre la bande TOTAL (tfoot) et la bande "X sous-dossiers" :
on supprime la bordure du bas du tableau et la marge eventuelle. */
.table-wrap:has(#mainTable) { margin-bottom: 0; }
#mainTable tbody tr:last-child td { border-bottom: none; }
/* (style) */
#mainTable th,
#mainTable td {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
/* En-tete : le conteneur interne (lien de tri ou .gsf-header) doit lui
aussi tronquer, sinon le texte deborde du . */
#mainTable thead th > a,
#mainTable thead th .gsf-header,
#mainTable thead th .gsf-header > span:first-child {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
min-width: 0;
}
/* Cellules a contenu VOULU sur plusieurs lignes (client + telephone,
badge de statut + ligne "Betool / date") : on ne les met PAS en
nowrap au niveau du , mais on tronque chaque ligne interne pour
qu'elles ne debordent pas non plus. */
#mainTable td:has(> .badge),
#mainTable td:has(.badge),
#mainTable td[data-col="client"] {
white-space: normal;
}
#mainTable td[data-col="client"] {
/* nom sur 1 ligne tronquee, telephone sur 1 ligne tronquee */
line-height: 1.3;
}
#mainTable td[data-col="client"] > span,
#mainTable td:has(.badge) .badge,
#mainTable td:has(.badge) > div > div {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
max-width: 100%;
display: block;
}
/* --- Paliers de taille de texte selon la largeur d'ecran --- */
/* Tres grand ecran (24" et plus) : texte confortable */
@media (min-width: 1700px) {
#mainTable { font-size: .92rem; }
#mainTable th { font-size: .8rem; }
#mainTable td { padding: .8rem 1rem; }
}
/* Grand ecran courant (~1440-1699) : taille standard */
@media (min-width: 1400px) and (max-width: 1699px) {
#mainTable { font-size: .85rem; }
#mainTable th { font-size: .75rem; }
#mainTable td { padding: .7rem .85rem; }
}
/* Ecran moyen / 13" haute resolution (~1100-1399) : compact */
@media (min-width: 1100px) and (max-width: 1399px) {
#mainTable { font-size: .78rem; }
#mainTable th { font-size: .68rem; padding: .55rem .6rem; }
#mainTable td { padding: .55rem .6rem; }
}
/* Petit ecran 13" / tablette paysage (~800-1099) : tres compact */
@media (min-width: 800px) and (max-width: 1099px) {
#mainTable { font-size: .72rem; }
#mainTable th { font-size: .62rem; padding: .45rem .45rem; letter-spacing: .02em; }
#mainTable td { padding: .45rem .45rem; }
}
/* En dessous de 800px, l'ancien comportement mobile (@media 768px)
reste actif : on ne le touche pas. */
/* ============================================================
BADGES & PRÉCARITÉ
============================================================ */
.badge {
display: inline-flex; align-items: center; justify-content: center;
padding: .2rem .65rem; border-radius: 999px;
font-size: .73rem; font-weight: 600; white-space: normal; word-break: break-word;
color: #fff; text-align: center;
}
/* (style) */
#mainTable td:has(.badge) { text-align: center; }
/* Le wrapper inline-block du badge de statut : centre lui aussi */
#mainTable td:has(.badge) > div { display: block !important; text-align: center; }
/* (style) */
/* En-tete centre quand le titre tient, mais aligne a GAUCHE des qu'il
deborde : le mot-cle "safe" empeche le centrage de couper le texte
des deux cotes. text-align: -webkit-... gere le cas du simple. */
#mainTable thead th { text-align: center; }
#mainTable thead th > a,
#mainTable thead th .gsf-header { justify-content: safe center; }
.badge-bleu { background: #2563eb; }
.badge-jaune { background: #facf23; }
.badge-violet { background: #7c3aed; }
.badge-rose { background: #db2777; }
.badge-grey { background: #64748b; }
/* ============================================================
FORMULAIRES
============================================================ */
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
/* min-width:0 -> autorise les items à descendre sous la largeur min de leur contenu
(sinon 4 champs en 1/4 ne tiennent pas sur une même ligne). */
.form-grid > * { min-width: 0; }
.form-grid .full { grid-column: 1 / -1; }
.form-grid .half { grid-column: span 1; }
.form-grid .third { grid-column: span 1; }
.form-grid .quarter { grid-column: span 1; }
@media (min-width: 900px) {
/* Grille à 12 colonnes : 1=full(12) · 1/2=half(6) · 1/3=third(4) · 1/4=quarter(3) */
.form-grid { grid-template-columns: repeat(12, 1fr); }
.form-grid .full { grid-column: 1 / -1; }
.form-grid .half { grid-column: span 6; }
.form-grid .third { grid-column: span 4; }
.form-grid .quarter { grid-column: span 3; }
}
.form-group { display: flex; flex-direction: column; gap: .35rem; }
.form-label { font-size: .82rem; font-weight: 600; color: var(--color-text); }
.form-label .required { color: var(--color-danger); margin-left: .2rem; }
.form-control {
padding: .55rem .85rem; border: 1.5px solid var(--color-border);
border-radius: 10px; font-size: .88rem; color: var(--color-text);
background: var(--color-white); transition: border-color .15s, box-shadow .15s;
width: 100%;
}
.form-control:focus { outline: none; border-color: var(--color-primary-light); box-shadow: 0 0 0 3px rgba(59,130,246,.1); }
textarea.form-control { min-height: 90px; resize: vertical; }
select.form-control { cursor: pointer; }
/* Champ date — compact, icône calendrier à droite */
input[type=date].form-control {
max-width: 100%;
min-width: 0;
appearance: none;
-webkit-appearance: none;
cursor: pointer;
text-align: left;
font-size: .88rem;
}
input[type=date].form-control::-webkit-calendar-picker-indicator {
opacity: .5;
cursor: pointer;
margin-left: auto;
flex-shrink: 0;
}
.form-check { display: flex; align-items: center; gap: .5rem; padding-top: .3rem; }
.form-check input[type=checkbox] { width: 16px; height: 16px; cursor: pointer; accent-color: var(--color-primary); }
.form-check label { font-size: .88rem; cursor: pointer; }
.form-hint { font-size: .75rem; color: var(--color-text-muted); }
/* Champ calculé */
.form-control.calcul { background: var(--color-surface2); color: var(--color-text-muted); font-weight: 600; cursor: not-allowed; }
/* Section formulaire */
.form-section { margin-bottom: 2rem; }
.form-section-title {
font-size: .8rem; font-weight: 700; text-transform: uppercase; letter-spacing: .07em;
color: var(--color-text-muted); padding-bottom: .5rem;
border-bottom: 1px solid var(--color-border); margin-bottom: 1rem;
}
/* ============================================================
BOUTONS
============================================================ */
.btn {
display: inline-flex; align-items: center; gap: .4rem;
padding: .55rem 1.1rem; border-radius: 10px; font-size: .85rem;
font-weight: 600; cursor: pointer; border: none;
transition: background .15s, box-shadow .15s, opacity .15s;
white-space: nowrap;
}
.btn:disabled { opacity: .5; cursor: not-allowed; }
.btn-primary { background: var(--color-primary); color: #fff; }
.btn-primary:hover { background: var(--color-primary-dark); }
.btn-secondary { background: var(--color-surface3); color: var(--color-text); border: 1.5px solid var(--color-border); }
.btn-secondary:hover { background: #e2e8f0; }
.btn-danger { background: var(--color-danger); color: #fff; }
.btn-danger:hover { background: #dc2626; }
.btn-success { background: var(--color-success); color: #fff; }
.btn-warning { background: var(--color-warning); color: #fff; }
.btn-sm { padding: .35rem .75rem; font-size: .78rem; border-radius: 8px; }
.btn-icon { padding: .4rem; border-radius: 8px; }
.btn-group { display: flex; gap: .5rem; flex-wrap: wrap; }
/* ============================================================
ONGLETS FICHE DOSSIER
============================================================ */
.tabs { border-bottom: 2px solid var(--color-border); display: flex; gap: 0; margin-bottom: 1.5rem; overflow-x: auto; }
.tab-btn {
padding: .75rem 1.5rem; font-size: .88rem; font-weight: 600;
color: var(--color-text-muted); border: none; background: none;
cursor: pointer; border-bottom: 3px solid transparent;
margin-bottom: -2px; transition: color .15s, border-color .15s;
white-space: nowrap;
}
.tab-btn:hover { color: var(--color-primary); }
.tab-btn.active { color: var(--color-primary); border-bottom-color: var(--color-primary); }
.tab-panel { display: none; }
.tab-panel.active { display: block; }
/* ============================================================
JOURNAL
============================================================ */
.journal-list { display: flex; flex-direction: column; gap: .75rem; max-height: 400px; overflow-y: auto; padding-right: .25rem; }
.journal-entry {
background: var(--color-surface3); border-radius: 8px; padding: .75rem 1rem;
border-left: 3px solid var(--color-primary-light);
}
.journal-meta { font-size: .75rem; color: var(--color-text-muted); margin-bottom: .25rem; }
.journal-author { font-weight: 600; color: var(--color-primary); }
.journal-msg { font-size: .87rem; }
.journal-form { display: flex; gap: .5rem; margin-top: 1rem; }
.journal-form textarea { flex: 1; min-height: 60px; }
/* ============================================================
DOCUMENTS
============================================================ */
.docs-list { display: flex; flex-direction: column; gap: .5rem; }
.doc-item {
display: flex; align-items: center; gap: .75rem;
padding: .6rem .9rem; background: var(--color-surface3);
border-radius: 7px; font-size: .85rem;
}
.doc-icon { font-size: 1.1rem; flex-shrink: 0; }
.doc-name { flex: 1; font-weight: 500; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.doc-actions { display: flex; gap: .3rem; flex-shrink: 0; }
/* ============================================================
FLASH MESSAGES
============================================================ */
.flash {
display: flex; align-items: center; justify-content: space-between;
padding: .85rem 1.25rem; border-radius: var(--radius);
margin: 0 1.75rem 1rem; font-size: .88rem; font-weight: 500;
}
.flash-success { background: #f0fdf4; border: 1px solid #86efac; color: #15803d; }
.flash-error { background: #fef2f2; border: 1px solid #fca5a5; color: #b91c1c; }
.flash-warning { background: #fffbeb; border: 1px solid #fde68a; color: #92400e; }
.flash-info { background: #eff6ff; border: 1px solid #bfdbfe; color: #1d4ed8; }
.flash-close { background: none; border: none; cursor: pointer; font-size: 1.1rem; opacity: .6; line-height: 1; }
.flash-close:hover { opacity: 1; }
/* ============================================================
FILTRES / RECHERCHE
============================================================ */
.filters-bar {
display: flex; gap: .75rem; flex-wrap: wrap;
align-items: center; margin-bottom: 1.25rem;
}
.search-input { position: relative; }
.search-input input { padding-left: 2.2rem; }
.search-input::before { content: '🔍'; position: absolute; left: .65rem; top: 50%; transform: translateY(-50%); font-size: .85rem; pointer-events: none; }
/* ============================================================
PAGINATION
============================================================ */
.pagination { display: flex; gap: .35rem; align-items: center; justify-content: center; margin-top: 1.25rem; flex-wrap: wrap; }
.page-link {
padding: .4rem .75rem; border-radius: 6px; font-size: .83rem;
border: 1.5px solid var(--color-border); color: var(--color-text);
transition: background .15s, border-color .15s;
}
.page-link:hover { background: var(--color-surface3); }
.page-link.active { background: var(--color-primary); border-color: var(--color-primary); color: #fff; }
.page-link.disabled { opacity: .4; pointer-events: none; }
/* ============================================================
SIDEBAR COLLAPSED — Desktop : réduite aux icônes
============================================================ */
/* Largeur réduite (icônes seulement) */
:root { --sidebar-collapsed-width: 64px; }
/* Anti-FOUC : pas d'animation pendant le chargement initial de la page.
La classe "preload" est posee sur par le script du
puis retiree par main.js une fois la page prete. */
html.preload .sidebar,
html.preload .main-content { transition: none !important; }
/* Desktop : slide vers icônes, pas hors écran */
@media (min-width: 769px) {
body.sidebar-collapsed .sidebar, html.sidebar-collapsed body .sidebar {
width: var(--sidebar-collapsed-width);
transform: none;
overflow-x: hidden;
overflow-y: auto;
scrollbar-width: none;
}
body.sidebar-collapsed .sidebar::-webkit-scrollbar, html.sidebar-collapsed body .sidebar::-webkit-scrollbar { display: none; }
body.sidebar-collapsed .main-content, html.sidebar-collapsed body .main-content {
margin-left: var(--sidebar-collapsed-width);
}
/* Masquer tous les textes, sections, labels */
body.sidebar-collapsed .sidebar .nav-section, html.sidebar-collapsed body .sidebar .nav-section { display: none; }
body.sidebar-collapsed .sidebar .nav-link > span:not(.nav-icon), html.sidebar-collapsed body .sidebar .nav-link > span:not(.nav-icon) { display: none; }
body.sidebar-collapsed .sidebar .sidebar-user .user-info > div, html.sidebar-collapsed body .sidebar .sidebar-user .user-info > div { display: none; }
body.sidebar-collapsed .sidebar .logo-text, html.sidebar-collapsed body .sidebar .logo-text { display: none; }
/* Masquer le badge texte Rappels (le span texte après l'icône) */
body.sidebar-collapsed .sidebar #sidebarRappels > span:not(.nav-icon):not(#sidebarRappelBadge), html.sidebar-collapsed body .sidebar #sidebarRappels > span:not(.nav-icon):not(#sidebarRappelBadge) { display: none; }
body.sidebar-collapsed #sidebarRappelBadge, html.sidebar-collapsed body #sidebarRappelBadge { display: none !important; }
/* Logo : taille adaptée */
body.sidebar-collapsed .sidebar .sidebar-logo img, html.sidebar-collapsed body .sidebar .sidebar-logo img {
max-width: 38px !important;
max-height: 38px !important;
width: 38px;
height: 38px;
object-fit: contain;
}
/* Icônes centrées + plus grandes */
body.sidebar-collapsed .sidebar .nav-link, html.sidebar-collapsed body .sidebar .nav-link {
justify-content: center;
padding: .7rem 0;
gap: 0;
position: relative;
overflow: visible;
}
body.sidebar-collapsed .sidebar .nav-icon, html.sidebar-collapsed body .sidebar .nav-icon {
font-size: 1.5rem;
width: auto;
display: flex;
align-items: center;
justify-content: center;
}
body.sidebar-collapsed .sidebar .nav-icon img, html.sidebar-collapsed body .sidebar .nav-icon img {
width: 26px !important;
height: 26px !important;
}
/* Logo centré compact */
body.sidebar-collapsed .sidebar .sidebar-logo, html.sidebar-collapsed body .sidebar .sidebar-logo {
justify-content: center;
padding: .85rem .5rem;
min-height: 0;
}
/* User : avatar centré */
body.sidebar-collapsed .sidebar .sidebar-user, html.sidebar-collapsed body .sidebar .sidebar-user {
justify-content: center;
padding: .6rem .5rem;
gap: 0;
flex-direction: column;
align-items: center;
}
body.sidebar-collapsed .sidebar .btn-logout, html.sidebar-collapsed body .sidebar .btn-logout { margin-top: .3rem; }
/* Tooltips gérés en JS (_initSidebarTooltips) — pas de ::after CSS */
}
/* Mobile : comportement inchangé */
@media (max-width: 768px) {
body.sidebar-collapsed .sidebar, html.sidebar-collapsed body .sidebar { transform: none; }
}
/* ============================================================
RESPONSIVE — Mobile first
============================================================ */
/* ── Overlay sidebar sur mobile ── */
.sidebar-overlay {
display: none;
position: fixed; inset: 0;
background: rgba(0,0,0,.5);
z-index: 99;
}
body.sidebar-open .sidebar-overlay { display: block; }
@media (max-width: 768px) {
/* Sidebar masquée par défaut, slide-in au tap */
.sidebar {
transform: translateX(calc(-1 * var(--sidebar-width)));
z-index: 200;
}
body.sidebar-open .sidebar { transform: translateX(0); }
body.sidebar-open { overflow: hidden; }
/* Main content pleine largeur */
.main-content { margin-left: 0; }
.page-content { padding: .9rem; }
/* Page header — empilé vertical */
.page-header {
flex-direction: column;
align-items: flex-start;
gap: .6rem;
margin-bottom: 1rem;
}
.page-title { font-size: 1.15rem; }
.btn-group { flex-wrap: wrap; }
/* Stats grid — 2 colonnes */
.stats-grid { grid-template-columns: repeat(2, 1fr); gap: .65rem; }
.stat-value { font-size: 1.5rem; }
/* Formulaires — 1 colonne */
.form-grid { grid-template-columns: 1fr !important; }
.form-grid .full,
.form-grid .half,
.form-grid .third,
.form-grid .quarter { grid-column: 1 / -1 !important; }
/* Fiche dossier — grille 2 col → 1 col */
[style*="grid-template-columns:1fr 380px"],
[style*="grid-template-columns: 1fr 380px"] {
display: block !important;
}
[style*="grid-template-columns:1fr 380px"] > *,
[style*="grid-template-columns: 1fr 380px"] > * {
margin-bottom: 1rem;
}
/* Tableaux — scroll horizontal */
.table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.crm-table { min-width: 600px; font-size: .8rem; }
.crm-table th, .crm-table td { padding: .55rem .75rem; white-space: normal; word-break: break-word; overflow-wrap: break-word; }
/* Cacher colonnes secondaires sur petit écran */
.crm-table .col-hide-mobile { display: none; }
/* ------------------------------------------------------------
Listes principales (#mainTable) — CARTES EMPILEES sur mobile.
Chaque ligne devient une carte : libelle de colonne a gauche
(injecte par main.js dans data-label), valeur a droite.
Plus aucun scroll horizontal.
------------------------------------------------------------ */
.table-wrap:has(#mainTable) { overflow: visible; max-height: none; }
#mainTable { display: block; min-width: 0; table-layout: auto; }
#mainTable thead, #mainTable tfoot { display: none; }
#mainTable tbody { display: block; }
#mainTable tbody tr {
display: block;
padding: .55rem .9rem .65rem;
border-bottom: 1px solid var(--color-border);
}
#mainTable tbody tr:nth-child(even) { background: var(--color-surface2); }
#mainTable td {
display: flex; align-items: center; justify-content: space-between;
gap: .75rem; width: auto;
padding: .22rem 0 !important; border: none;
white-space: normal; overflow: visible; text-overflow: clip;
text-align: right; font-size: .82rem;
}
#mainTable td::before {
content: attr(data-label);
flex-shrink: 0;
font-size: .65rem; font-weight: 700; text-transform: uppercase;
letter-spacing: .04em; color: var(--color-text-muted);
text-align: left;
}
/* Cellules sans en-tete (case a cocher de masse, fleche) : inutiles
en vue carte, la ligne entiere est deja cliquable. */
#mainTable td:not([data-label]) { display: none; }
/* Ligne "Aucun resultat" (colspan, sans data-label) : on la garde. */
#mainTable td[colspan] { display: block; text-align: center; }
#mainTable td[colspan]::before { content: none; }
/* Badges et contenu multi-lignes : retour a un rendu compact en ligne */
#mainTable td:has(.badge) { text-align: right; }
#mainTable td:has(.badge) > div { display: inline-block !important; }
#mainTable td[data-col="client"] > span,
#mainTable td:has(.badge) .badge,
#mainTable td:has(.badge) > div > div {
display: inline-block; white-space: normal; overflow: visible; max-width: none;
}
/* ------------------------------------------------------------
Portails (.portal-table : donneur d'ordre, equipe) — chaque
ligne devient une CARTE empilee. data-label en dur dans le
HTML (pas de dependance JS, contrairement a #mainTable).
Plus de scroll horizontal sur telephone.
------------------------------------------------------------ */
.table-wrap:has(.portal-table) { overflow: visible; }
.portal-table { display: block; min-width: 0; font-size: .85rem; }
.portal-table thead { display: none; }
.portal-table tbody { display: block; }
.portal-table tbody tr {
display: block;
background: var(--color-surface, #fff);
border: 1px solid var(--color-border);
border-radius: 10px;
padding: .55rem .9rem;
margin-bottom: .7rem;
box-shadow: 0 1px 2px rgba(0,0,0,.05);
}
.portal-table td {
display: flex; align-items: flex-start; justify-content: space-between;
gap: 1rem; width: auto;
padding: .32rem 0 !important; border: none !important;
text-align: right; white-space: normal; word-break: break-word;
}
.portal-table td + td { border-top: 1px solid var(--color-border) !important; }
.portal-table td::before {
content: attr(data-label);
flex-shrink: 0;
font-size: .68rem; font-weight: 700; text-transform: uppercase;
letter-spacing: .04em; color: var(--color-text-muted);
text-align: left; padding-top: .12rem;
}
/* 1re cellule (Client) = titre de la carte, pleine largeur, sans label */
.portal-table td:first-child {
display: block; text-align: left; border: none !important;
font-size: 1rem; padding-bottom: .2rem !important;
}
.portal-table td:first-child::before { content: none; }
/* Cellule Documents : passe en colonne, formulaires pleine largeur */
.portal-table td[data-label="Documents"] {
flex-direction: column; align-items: stretch; text-align: left; gap: .3rem;
}
.portal-table td[data-label="Documents"]::before { padding-top: 0; }
.portal-table td[data-label="Documents"] form { max-width: none !important; }
.portal-table td[data-label="Documents"] input[type="file"] { max-width: none !important; flex: 1; }
.portal-table td[data-label="Documents"] a { max-width: none !important; }
/* Filtres — pleine largeur */
.filters-bar { gap: .5rem; }
.filters-bar .form-control,
.filters-bar select { font-size: .83rem; padding: .45rem .7rem; }
.search-input { flex: 1; min-width: 0; }
/* Onglets — scroll horizontal */
.tabs { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.tab-btn { padding: .65rem 1rem; font-size: .82rem; }
/* Cards */
.card-header { flex-wrap: wrap; gap: .4rem; }
.card-body { padding: .9rem; }
/* Badges statuts — wrap */
div[style*="display:flex;gap:.75rem;margin-bottom"] {
flex-wrap: wrap;
gap: .4rem !important;
}
/* Boutons dans card-header — plus petits */
.card-header .btn-sm { padding: .28rem .6rem; font-size: .73rem; }
.card-header .btn-group { flex-wrap: wrap; }
/* Historique activité */
.activite-row { flex-direction: column; gap: .3rem; }
/* Journal form */
.journal-form { flex-direction: column; }
.journal-form button { align-self: flex-end; }
/* Modals — pleine largeur */
.modal { max-width: 100%; margin: 0; border-radius: 14px 14px 0 0; }
.modal-backdrop { align-items: flex-end; padding: 0; }
/* Flash messages */
.flash { margin: 0 0 .75rem; font-size: .82rem; }
/* Topbar */
.topbar { padding: 0 .9rem; }
.topbar-right .topbar-link { display: none; }
/* DPE modal */
#modalDPE { padding: .5rem; }
#modalDPE > div { border-radius: 12px; }
/* Rappels — actions en colonne */
.rappel-actions { flex-direction: column; gap: .3rem; }
/* Doc dropzone */
.doc-dropzone { min-height: 50px; padding: .5rem; }
/* Page permissions — grille 2 col → 1 col */
div[style*="grid-template-columns:1fr 1fr"],
div[style*="grid-template-columns: 1fr 1fr"] {
display: block !important;
}
div[style*="grid-template-columns:260px 1fr"],
div[style*="grid-template-columns: 260px 1fr"] {
display: block !important;
}
/* Stats comparaison */
div[style*="grid-template-columns:repeat(3"],
div[style*="grid-template-columns: repeat(3"] {
grid-template-columns: 1fr !important;
}
/* Pagination */
.pagination { gap: .25rem; }
.page-link { padding: .35rem .6rem; font-size: .78rem; }
/* ── Champs date sur mobile ── */
input[type=date].form-control {
font-size: .85rem;
padding: .5rem .75rem;
max-width: 100%;
width: 100%;
text-align: left;
}
/* Groupes de dates Du/Au — 1 colonne sur mobile */
.date-pair {
grid-template-columns: 1fr !important;
gap: .4rem !important;
}
/* Champs date dans la fiche — width auto pour ne pas prendre toute la largeur */
.form-group input[type=date].form-control {
max-width: 200px;
}
}
/* ── Très petits écrans (< 400px) ── */
@media (max-width: 400px) {
.stats-grid { grid-template-columns: 1fr; }
.tab-btn { padding: .55rem .75rem; font-size: .78rem; }
.page-title { font-size: 1rem; }
.btn { padding: .45rem .85rem; font-size: .8rem; }
}
/* ── Filtres en-tête style Google Sheets ────────────────────── */
.gsf-th {
position: relative;
padding: 0 !important;
white-space: nowrap;
}
.gsf-header {
display: flex; align-items: flex-start; justify-content: space-between;
gap: .4rem; padding: .7rem 1rem; cursor: pointer;
font-size: .75rem; font-weight: 700;
text-transform: uppercase; letter-spacing: .05em;
user-select: none; transition: background .1s;
white-space: normal; flex-wrap: wrap; word-break: break-word;
}
.gsf-header > span:first-child {
flex: 1; white-space: normal; word-break: break-word; overflow-wrap: break-word;
}
.gsf-header:hover { background: #e8f4fd; }
.gsf-icon { font-size: .65rem; opacity: .6; flex-shrink: 0; }
.gsf-dropdown {
position: absolute; top: 100%; left: 0;
min-width: 240px; max-width: 300px;
background: var(--color-white);
border: 1.5px solid #d1d5db;
border-radius: 8px;
box-shadow: 0 6px 20px rgba(0,0,0,.15);
z-index: 9999;
font-size: .85rem;
overflow: hidden;
}
.gsf-dropdown.open-right { left: auto; right: 0; }
.gsf-section { padding: .35rem .5rem; }
.gsf-sort { display: flex; flex-direction: column; gap: .1rem; }
.gsf-sort-btn {
display: block; padding: .4rem .75rem; border-radius: 5px;
color: #374151; text-decoration: none; font-size: .83rem;
transition: background .1s;
}
.gsf-sort-btn:hover { background: #f3f4f6; color: #1d4ed8; }
.gsf-sort-btn.active { background: #eff6ff; color: #1d4ed8; font-weight: 600; }
.gsf-divider { height: 1px; background: var(--color-surface3); margin: .2rem 0; }
.gsf-select-all {
display: flex; align-items: center; gap: .4rem;
padding: .3rem .75rem; font-size: .78rem;
}
.gsf-select-all button {
background: none; border: none; cursor: pointer;
color: #1d4ed8; font-size: .78rem; padding: 0;
text-decoration: underline;
}
.gsf-select-all button:hover { color: #1e40af; }
.gsf-search-wrap { padding: .35rem .75rem; }
.gsf-search {
width: 100%; padding: .35rem .6rem;
border: 1.5px solid #d1d5db; border-radius: 5px;
font-size: .82rem; outline: none;
}
.gsf-search:focus { border-color: #3b82f6; }
.gsf-options {
max-height: 220px; overflow-y: auto;
padding: .2rem 0;
border-top: 1px solid #f1f5f9;
}
.gsf-option {
display: flex; align-items: center; gap: .6rem;
padding: .38rem 1rem; cursor: pointer;
transition: background .08s;
}
.gsf-option:hover { background: #f3f4f6; }
.gsf-option.hidden { display: none; }
.gsf-option input[type=checkbox] {
width: 14px; height: 14px; flex-shrink: 0;
accent-color: #1d4ed8; cursor: pointer;
}
.gsf-empty { padding: .75rem 1rem; color: #9ca3af; font-size: .8rem; }
.gsf-footer {
display: flex; align-items: center; justify-content: space-between;
padding: .5rem .75rem; border-top: 1px solid #f1f5f9;
background: #f9fafb; gap: .5rem;
}
.gsf-clear {
font-size: .75rem; color: #6b7280;
text-decoration: none; flex: 1;
}
.gsf-clear:hover { color: #ef4444; }
.gsf-ok {
padding: .35rem 1rem; background: #1a7a4a; color: #fff;
border: none; border-radius: 5px; cursor: pointer;
font-size: .82rem; font-weight: 600;
transition: background .1s;
}
.gsf-ok:hover { background: #15803d; }
/* Chips filtres actifs sous la barre */
.filter-chips-bar {
display: flex; flex-wrap: wrap; gap: .35rem;
padding: .4rem 0 0;
font-size: .75rem;
}
.filter-chip {
background: #eff6ff; color: #1d4ed8;
border: 1px solid #bfdbfe; border-radius: 999px;
padding: .15rem .65rem; font-size: .72rem; font-weight: 600;
white-space: nowrap; display: inline-flex; align-items: center; gap: .3rem;
}
.filter-chip-warn { background: #fef3c7; color: #92400e; border-color: #fde68a; }
.filter-chip-close {
cursor: pointer; opacity: .6; font-size: .8rem;
background: none; border: none; padding: 0; color: inherit;
}
.filter-chip-close:hover { opacity: 1; }
/* Barre recherche globale */
.gsf-search-bar {
display: flex; gap: .75rem; align-items: center;
margin-bottom: .6rem; flex-wrap: wrap;
}
.gsf-search-bar .search-input { flex: 1; min-width: 200px; }
/* Responsive */
@media (max-width: 768px) {
.gsf-dropdown { min-width: 200px; max-width: calc(100vw - 1rem); }
.gsf-header { padding: .55rem .65rem; font-size: .7rem; }
}
.btn-statut-type {
padding: .3rem .85rem; border: 1.5px solid #d1d5db;
border-radius: 6px; background: var(--color-white); cursor: pointer;
font-size: .82rem; font-weight: 600; color: #374151;
transition: all .12s;
}
.btn-statut-type:hover { border-color: #3b82f6; color: #2563eb; background: #eff6ff; }
.btn-statut-type.active { border-color: #2563eb; color: #fff; background: #2563eb; }
/* ── Sélection de masse ─────────────────────────────────────── */
.row-masse-selected { background: #eff6ff !important; }
.row-masse-selected td { border-color: #93c5fd !important; }
.btn-masse {
padding: .3rem .85rem; border: none; border-radius: 6px;
cursor: pointer; font-size: .8rem; font-weight: 600;
transition: background .1s, transform .1s;
}
.btn-masse:active { transform: scale(.97); }
.btn-masse-edit { background: #2563eb; color: #fff; }
.btn-masse-edit:hover { background: #1d4ed8; }
.btn-masse-del { background: #dc2626; color: #fff; }
.btn-masse-del:hover { background: #b91c1c; }
/* ── Cartes statuts cliquables ──────────────────────────────── */
.stat-card-link {
text-decoration: none;
color: inherit;
cursor: pointer;
transition: transform .1s, box-shadow .15s, background .15s;
}
.stat-card-link:hover {
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(0,0,0,.1);
background: var(--color-surface2);
}
.stat-card-link:active { transform: translateY(0); }
.stat-card-active {
box-shadow: 0 0 0 2px #64748b;
background: var(--color-surface3);
}
/* (style) */
.gsf-th { position: relative; padding: 0 !important; }
.gsf-header {
display: flex; align-items: center; justify-content: space-between;
gap: .35rem; padding: .65rem .9rem;
cursor: pointer; user-select: none;
font-size: .75rem; font-weight: 700;
text-transform: uppercase; letter-spacing: .05em;
color: var(--color-text-muted);
transition: background .1s, color .1s;
white-space: nowrap;
}
.gsf-header:hover { background: #f0f7ff; color: #1d4ed8; }
.gsf-arrow { font-size: .65rem; opacity: .55; flex-shrink: 0; }
.gsf-drop {
position: fixed; /* fixed = sort du overflow du tableau */
z-index: 99999;
min-width: 230px; max-width: 290px;
background: var(--color-white);
border: 1px solid #d1d5db;
border-radius: 6px;
box-shadow: 0 4px 16px rgba(0,0,0,.14);
overflow: hidden;
font-size: .85rem;
}
.gsf-tri { padding: .3rem .4rem; }
.gsf-tri-btn {
display: flex; align-items: center; gap: .5rem;
padding: .35rem .6rem; border-radius: 4px;
font-size: .82rem; color: #374151;
text-decoration: none; transition: background .1s;
background: none; border: none; cursor: pointer;
width: 100%; text-align: left;
}
.gsf-tri-btn:hover { background: #f3f4f6; color: #1d4ed8; }
.gsf-tri-btn.on { background: #eff6ff; color: #1d4ed8; font-weight: 600; }
.gsf-hr { border: none; border-top: 1px solid #f1f5f9; margin: .2rem 0; }
.gsf-actions {
display: flex; align-items: center; gap: .5rem;
padding: .3rem .75rem; font-size: .77rem; color: #6b7280;
}
.gsf-actions button {
background: none; border: none; cursor: pointer;
color: #2563eb; font-size: .77rem;
padding: 0; text-decoration: underline;
}
.gsf-actions button:hover { color: #1d4ed8; }
.gsf-search-row { padding: .35rem .65rem; }
.gsf-search-row input {
width: 100%; padding: .32rem .55rem;
border: 1.5px solid #d1d5db; border-radius: 4px;
font-size: .8rem; outline: none;
}
.gsf-search-row input:focus { border-color: #3b82f6; }
.gsf-opts {
max-height: 220px; overflow-y: auto;
padding: .25rem 0;
border-top: 1px solid #f1f5f9;
}
.gsf-opt {
display: flex; align-items: center; gap: .55rem;
padding: .36rem .85rem; cursor: pointer;
transition: background .08s;
}
.gsf-opt:hover { background: #f3f4f6; }
.gsf-opt.hidden { display: none; }
.gsf-opt input[type=checkbox] {
width: 14px; height: 14px; cursor: pointer;
accent-color: #2563eb; flex-shrink: 0;
}
.gsf-footer {
display: flex; align-items: center; justify-content: space-between;
padding: .45rem .65rem;
border-top: 1px solid #f1f5f9;
background: #f9fafb;
}
.gsf-reset { font-size: .74rem; color: #6b7280; text-decoration: none; }
.gsf-reset:hover { color: #dc2626; }
.gsf-ok {
padding: .3rem .9rem;
background: #166534; color: #fff;
border: none; border-radius: 4px;
cursor: pointer; font-size: .82rem; font-weight: 600;
}
.gsf-ok:hover { background: #14532d; }
/* Chips filtres actifs */
.filter-chips-bar {
display: flex; flex-wrap: wrap; gap: .3rem; padding: .4rem 0 0;
}
.filter-chip {
display: inline-flex; align-items: center; gap: .25rem;
background: #fef2f2; color: #991b1b;
border: 1px solid #fca5a5; border-radius: 999px;
padding: .14rem .6rem; font-size: .72rem; font-weight: 600;
white-space: nowrap;
}
/* Barre de recherche globale */
.gsf-search-bar {
display: flex; gap: .75rem; align-items: center; flex-wrap: wrap;
margin-bottom: .65rem;
}
.gsf-search-bar .search-input { flex: 1; min-width: 200px; }
@media (max-width: 768px) {
.gsf-drop { min-width: 190px; max-width: calc(100vw - 1rem); }
}
/* ── Barre de sélection style Google Sheets ─────────────────── */
.selbar {
position: fixed;
bottom: 1.25rem;
left: 50%;
transform: translateX(-50%);
z-index: 99998;
background: #1e293b;
color: #fff;
border-radius: 12px;
padding: .65rem 1.1rem;
box-shadow: 0 8px 30px rgba(0,0,0,.3);
display: flex;
align-items: center;
gap: 1.25rem;
min-width: 340px;
max-width: calc(100vw - 2rem);
font-size: .83rem;
animation: selbarIn .2s ease;
}
@keyframes selbarIn {
from { opacity:0; transform: translateX(-50%) translateY(12px); }
to { opacity:1; transform: translateX(-50%) translateY(0); }
}
.selbar-left { flex-shrink: 0; }
.selbar-count { font-size: .85rem; color: #94a3b8; }
.selbar-count strong { color: #fff; }
.selbar-calcs {
display: flex; gap: 1rem; flex-wrap: wrap; flex: 1;
}
.selbar-item {
display: flex; flex-direction: column; gap: .05rem;
padding: .2rem .65rem;
background: rgba(255,255,255,.08);
border-radius: 6px;
min-width: 100px;
}
.selbar-label { font-size: .68rem; color: #64748b; text-transform: uppercase; letter-spacing: .05em; }
.selbar-val { font-size: .92rem; font-weight: 700; color: #34d399; }
.selbar-avg { font-size: .68rem; color: #94a3b8; }
.selbar-close {
background: rgba(255,255,255,.08); border: none; color: #e2e8f0;
cursor: pointer; font-size: 1.3rem; line-height: 1; padding: .05rem .5rem .15rem;
border-radius: 6px; transition: color .1s, background .1s; flex-shrink: 0;
}
.selbar-close:hover { color: #fff; background: #ef4444; }
/* Ligne sélectionnée */
/* Cellule sélectionnable (montant) */
.td-selectable {
cursor: cell;
user-select: none;
}
.td-selectable:hover {
background: #f0f9ff;
outline: 1px solid #93c5fd;
outline-offset: -1px;
}
/* Cellule sélectionnée */
.cell-selected {
background: #dbeafe !important;
outline: 2px solid #3b82f6 !important;
outline-offset: -2px;
color: #1e40af;
font-weight: 600;
}
.crm-table tbody tr:has(.cell-selected) { background: #f0f7ff; }
@media (max-width: 768px) {
.selbar { flex-direction: column; align-items: flex-start; gap: .5rem; padding: .75rem 1rem; }
.selbar-calcs { gap: .5rem; }
}
/* ============================================================
UTILITAIRES
============================================================ */
.text-muted { color: var(--color-text-muted); }
.text-danger { color: var(--color-danger); }
.text-success { color: var(--color-success); }
.text-center { text-align: center; }
.mt-1 { margin-top: .5rem; }
.mt-2 { margin-top: 1rem; }
.mt-3 { margin-top: 1.5rem; }
.mb-1 { margin-bottom: .5rem; }
.mb-2 { margin-bottom: 1rem; }
.d-flex { display: flex; }
.align-center { align-items: center; }
.gap-1 { gap: .5rem; }
.gap-2 { gap: 1rem; }
.fw-bold { font-weight: 700; }
.w-100 { width: 100%; }
/* LOGIN PAGE */
.login-wrap { min-height: 100vh; display: flex; align-items: center; justify-content: center; background: var(--color-sidebar); padding: 1.5rem; }
.login-card { background: ; border-radius: 16px; padding: 2.5rem; width: 100%; max-width: 420px; box-shadow: 0 25px 50px rgba(0,0,0,.5); }
.login-logo { text-align: center; margin-bottom: 2rem; }
.login-logo .icon { font-size: 2.5rem; display: block; margin-bottom: .5rem; }
.login-logo h1 { color: #fff; font-size: 1.3rem; font-weight: 700; }
.login-logo p { color: #64748b; font-size: .85rem; margin-top: .25rem; }
.login-card .form-label { color: #94a3b8; }
.login-card .form-control { background: #0f172a; border-color: #334155; color: #e2e8f0; }
.login-card .form-control:focus { border-color: var(--color-primary-light); }
.login-error { background: #7f1d1d33; border: 1px solid #f87171; color: #fca5a5; padding: .75rem 1rem; border-radius: 7px; font-size: .85rem; margin-bottom: 1rem; }
/* EMPTY STATE */
.empty-state { text-align: center; padding: 3rem 2rem; color: var(--color-text-muted); }
.empty-state .icon { font-size: 3rem; display: block; margin-bottom: 1rem; }
.empty-state p { margin-bottom: 1rem; }
/* MODAL */
.modal-backdrop { position: fixed; inset: 0; background: rgba(0,0,0,.5); z-index: 200; display: flex; align-items: center; justify-content: center; padding: 1rem; }
.modal { background: var(--color-white); border-radius: 14px; width: 100%; max-width: 560px; box-shadow: var(--shadow-lg); max-height: 90vh; overflow-y: auto; }
.modal-header { padding: 1.25rem 1.5rem; border-bottom: 1px solid var(--color-border); display: flex; align-items: center; justify-content: space-between; }
.modal-title { font-size: 1rem; font-weight: 700; }
.modal-close { background: none; border: none; font-size: 1.3rem; cursor: pointer; color: var(--color-text-muted); line-height: 1; }
.modal-body { padding: 1.5rem; }
.modal-footer { padding: 1rem 1.5rem; border-top: 1px solid var(--color-border); display: flex; justify-content: flex-end; gap: .5rem; }
/* TOOLTIP */
[data-tip] { position: relative; cursor: help; }
[data-tip]:hover::after {
content: attr(data-tip);
position: absolute; bottom: calc(100% + 6px); left: 50%; transform: translateX(-50%);
background: #1e293b; color: #fff; font-size: .72rem; padding: .3rem .6rem;
border-radius: 5px; white-space: nowrap; z-index: 999; pointer-events: none;
}
/* ── RAPPELS & NOTIFICATIONS ─────────────────────────────── */
@keyframes bellShake {
0%,100% { transform: rotate(0); }
20% { transform: rotate(-15deg); }
40% { transform: rotate(15deg); }
60% { transform: rotate(-10deg); }
80% { transform: rotate(10deg); }
}
.notif-bell { display: flex; align-items: center; padding: .35rem; border-radius: 8px; transition: background .15s; }
.notif-bell:hover { background: rgba(255,255,255,.12); }
/* Toast rappel */
.rappel-toast {
position: fixed; bottom: 1.5rem; right: 1.5rem; z-index: 9999;
background: #1e40af; color: #fff; padding: .9rem 2.5rem .9rem 1rem;
border-radius: 12px; box-shadow: 0 6px 20px rgba(0,0,0,.2);
max-width: 320px; font-size: .85rem; line-height: 1.4;
animation: slideInToast .3s ease;
}
@keyframes slideInToast {
from { transform: translateY(20px); opacity: 0; }
to { transform: translateY(0); opacity: 1; }
}
/* Lien actif rappels dans sidebar */
.nav-link[href*="rappels"] .nav-icon { filter: none; }
/* ============================================================
RESPONSIVE MOBILE — correctifs inline styles
============================================================ */
@media (max-width: 768px) {
/* Fiche dossier — grilles 2 colonnes inline */
.tab-panel > div[style*="grid-template-columns"] {
display: flex !important;
flex-direction: column !important;
gap: 1rem !important;
}
/* Historique activité — items */
#tab-general .card [style*="display:flex;gap:.75rem;padding"] {
flex-wrap: wrap;
}
/* Card-header avec plusieurs boutons */
.card-header > div[style*="display:flex"] {
flex-wrap: wrap;
gap: .3rem;
}
/* Tableau listes dossiers — colonnes essentielles uniquement.
#mainTable ET .portal-table sont EXCLUS : ils ont leur propre vue
"cartes empilees" (voir les blocs CARTES EMPILEES plus haut). */
.crm-table:not(#mainTable):not(.portal-table) th:nth-child(n+5),
.crm-table:not(#mainTable):not(.portal-table) td:nth-child(n+5) {
display: none;
}
/* Toujours afficher : nom, date pose, 1 statut, flèche */
.crm-table:not(#mainTable):not(.portal-table) th:nth-child(1),
.crm-table:not(#mainTable):not(.portal-table) td:nth-child(1),
.crm-table:not(#mainTable):not(.portal-table) th:nth-child(2),
.crm-table:not(#mainTable):not(.portal-table) td:nth-child(2),
.crm-table:not(#mainTable):not(.portal-table) th:nth-child(3),
.crm-table:not(#mainTable):not(.portal-table) td:nth-child(3),
.crm-table:not(#mainTable):not(.portal-table) th:last-child,
.crm-table:not(#mainTable):not(.portal-table) td:last-child {
display: table-cell !important;
}
/* Filtres barre — vertical sur mobile */
.filters-bar {
flex-direction: column;
align-items: stretch;
}
.filters-bar > * { width: 100%; }
.filters-bar .btn { justify-content: center; }
/* Page header boutons → wrap */
.page-header .btn-group {
width: 100%;
justify-content: flex-start;
}
/* Badges statuts dossier */
div[style*="display:flex;gap:.75rem;margin-bottom:1.25rem"] {
gap: .35rem !important;
margin-bottom: .75rem !important;
}
/* Délais CEE — une colonne */
div[style*="display:flex;gap:.75rem;flex-wrap:wrap"] {
gap: .5rem !important;
}
div[style*="min-width:130px"] {
min-width: 0 !important;
flex: 1 1 calc(50% - .25rem) !important;
}
/* DPE grid — 1 colonne */
.dpe-grid { grid-template-columns: 1fr !important; }
.dpe-row { flex-direction: column; gap: .1rem; }
.dpe-label { min-width: 0; color: #94a3b8; font-size: .72rem; }
/* Notif dropdown — full width */
#notifDropdown {
width: calc(100vw - 2rem) !important;
right: .5rem !important;
left: .5rem !important;
}
/* Rappels actions inline */
div[style*="display:flex;gap:.25rem;flex-shrink:0"] {
flex-direction: row;
}
}
/* ============================================================
============================================================
DESIGN SOFT / NEUMORPHIQUE - Ajout Session 21
Les regles ci-dessous surchargent les regles equivalentes
plus haut dans le fichier (cascade CSS : derniere = gagnante)
============================================================
============================================================ */
/* ============================================================
DESIGN SOFT / NEUMORPHIQUE - Surcharge globale
A ajouter a la fin de assets/css/style.css
(toute regle definie ici remplace la regle equivalente plus haut
car en CSS la derniere declaration gagne a specificite egale)
============================================================ */
:root {
/* Variables additionnelles pour le neumorphisme */
--soft-bg: #eef2f7; /* fond legerement plus chaud que --color-bg */
--soft-surface: #f3f6fb; /* surface des champs creuses */
--soft-shadow-dark: rgba(174, 182, 196, .40);
--soft-shadow-light: rgba(255, 255, 255, .95);
--soft-radius: 14px;
--soft-radius-sm: 11px;
--soft-radius-pill: 999px;
/* On ajuste le rayon global */
--radius: 14px;
}
/* ============================================================
BOUTONS - relief soft + ombre coloree au survol
============================================================ */
.btn {
display: inline-flex; align-items: center; gap: .45rem;
padding: .6rem 1.25rem;
font-size: .85rem; font-weight: 600;
border-radius: var(--soft-radius);
border: none; cursor: pointer;
transition: background .18s ease, box-shadow .2s ease, transform .12s ease, opacity .15s;
white-space: nowrap;
letter-spacing: .005em;
}
.btn:active { transform: translateY(1px); }
.btn:disabled { opacity: .5; cursor: not-allowed; box-shadow: none !important; }
/* Primaire : ombre coloree */
.btn-primary {
background: var(--color-primary);
color: #fff;
box-shadow:
0 4px 14px rgba(30, 64, 175, .32),
inset 0 1px 0 rgba(255, 255, 255, .14);
}
.btn-primary:hover {
background: var(--color-primary-dark);
box-shadow:
0 6px 18px rgba(30, 64, 175, .42),
inset 0 1px 0 rgba(255, 255, 255, .16);
}
/* Secondaire : neumorphique pose sur fond clair
Bordure tres legere pour garder de la lisibilite quand le bouton
est sur fond blanc (ou les ombres neumorphiques sont moins visibles) */
.btn-secondary {
background: var(--soft-surface);
color: var(--color-text);
border: 1px solid rgba(174, 182, 196, .25);
box-shadow:
4px 4px 10px var(--soft-shadow-dark),
-4px -4px 10px var(--soft-shadow-light);
}
.btn-secondary:hover {
background: var(--color-white);
box-shadow:
2px 2px 6px var(--soft-shadow-dark),
-2px -2px 6px var(--soft-shadow-light);
}
.btn-secondary:active {
/* effet "enfonce" : ombre interne */
background: var(--soft-surface);
box-shadow:
inset 3px 3px 6px var(--soft-shadow-dark),
inset -3px -3px 6px var(--soft-shadow-light);
}
/* Danger : rouge avec ombre coloree */
.btn-danger {
background: var(--color-danger);
color: #fff;
box-shadow:
0 4px 14px rgba(239, 68, 68, .35),
inset 0 1px 0 rgba(255, 255, 255, .15);
}
.btn-danger:hover {
background: #dc2626;
box-shadow:
0 6px 18px rgba(239, 68, 68, .45),
inset 0 1px 0 rgba(255, 255, 255, .15);
}
/* Success : vert avec ombre coloree */
.btn-success {
background: var(--color-success);
color: #fff;
box-shadow:
0 4px 14px rgba(34, 197, 94, .32),
inset 0 1px 0 rgba(255, 255, 255, .15);
}
.btn-success:hover {
background: #16a34a;
box-shadow:
0 6px 18px rgba(34, 197, 94, .42),
inset 0 1px 0 rgba(255, 255, 255, .15);
}
/* Warning : orange */
.btn-warning {
background: var(--color-warning);
color: #fff;
box-shadow:
0 4px 14px rgba(245, 158, 11, .32),
inset 0 1px 0 rgba(255, 255, 255, .15);
}
.btn-warning:hover {
background: #d97706;
box-shadow:
0 6px 18px rgba(245, 158, 11, .42);
}
/* Versions petite et icone */
.btn-sm {
padding: .4rem .9rem;
font-size: .78rem;
border-radius: var(--soft-radius-sm);
gap: .35rem;
}
.btn-icon {
padding: .45rem;
border-radius: var(--soft-radius-sm);
}
.btn-group { display: flex; gap: .55rem; flex-wrap: wrap; }
/* ============================================================
CHAMPS DE SAISIE - inputs creuses
============================================================ */
.form-control {
width: 100%;
padding: .65rem 1rem;
font-size: .88rem;
color: var(--color-text);
background: var(--soft-surface);
border: 1px solid transparent;
border-radius: var(--soft-radius);
box-shadow:
inset 3px 3px 6px var(--soft-shadow-dark),
inset -3px -3px 6px var(--soft-shadow-light);
transition: background .18s, box-shadow .2s, border-color .15s;
}
.form-control:hover {
background: #f7f9fc;
}
.form-control:focus {
outline: none;
background: var(--color-white);
border-color: rgba(59, 130, 246, .35);
box-shadow:
inset 2px 2px 5px rgba(174, 182, 196, .25),
inset -2px -2px 5px rgba(255, 255, 255, .95),
0 0 0 4px rgba(59, 130, 246, .12);
}
textarea.form-control { min-height: 90px; resize: vertical; }
select.form-control {
cursor: pointer;
appearance: none;
-webkit-appearance: none;
-moz-appearance: none;
background-image:
linear-gradient(45deg, transparent 50%, #64748b 50%),
linear-gradient(135deg, #64748b 50%, transparent 50%);
background-position:
calc(100% - 18px) 50%,
calc(100% - 13px) 50%;
background-size: 5px 5px, 5px 5px;
background-repeat: no-repeat;
padding-right: 2.2rem;
}
input[type=date].form-control {
appearance: none;
-webkit-appearance: none;
cursor: pointer;
}
input[type=date].form-control::-webkit-calendar-picker-indicator {
opacity: .55;
cursor: pointer;
}
/* Champ calcule (readonly metier) */
.form-control.calcul,
.form-control[readonly] {
background: #e8edf5;
color: var(--color-text-muted);
font-weight: 600;
cursor: not-allowed;
box-shadow:
inset 2px 2px 4px var(--soft-shadow-dark),
inset -1px -1px 3px rgba(255, 255, 255, .7);
}
.form-check input[type=checkbox] {
width: 17px; height: 17px;
cursor: pointer;
accent-color: var(--color-primary);
}
/* ============================================================
CARTES - relief tres doux
============================================================ */
.card {
background: var(--color-white);
border-radius: var(--soft-radius);
border: 1px solid var(--color-border);
box-shadow:
0 6px 16px rgba(15, 23, 42, .08),
0 1px 3px rgba(15, 23, 42, .05);
overflow: hidden;
}
.card-header {
padding: 1rem 1.25rem;
border-bottom: 1px solid var(--color-border);
}
/* Stats cards - effet pose */
.stat-card {
background: var(--color-white); /* surface (thémable) — était #fff en dur */
border-radius: var(--soft-radius);
border-left: 4px solid var(--color-primary);
box-shadow:
0 4px 10px rgba(15, 23, 42, .05),
0 1px 2px rgba(15, 23, 42, .04);
transition: box-shadow .18s ease, transform .12s ease;
}
.stat-card:hover {
transform: translateY(-1px);
box-shadow:
0 8px 16px rgba(15, 23, 42, .08),
0 2px 4px rgba(15, 23, 42, .04);
}
/* ============================================================
BADGES - radius pill, leger shadow
============================================================ */
.badge {
display: inline-flex; align-items: center;
padding: .22rem .65rem;
border-radius: var(--soft-radius-pill);
color: #fff;
font-size: .72rem; font-weight: 600;
letter-spacing: .005em;
box-shadow: 0 1px 2px rgba(15, 23, 42, .08);
}
/* ============================================================
ONGLETS DE LA FICHE DOSSIER (.tab-btn)
============================================================ */
.tab-btn {
background: transparent;
border: none;
border-radius: var(--soft-radius-sm) var(--soft-radius-sm) 0 0;
padding: .55rem 1rem;
font-weight: 600;
transition: background .15s, color .15s, border-color .15s;
}
.tab-btn:hover {
background: rgba(59, 130, 246, .08);
}
/* ============================================================
PAGINATION
============================================================ */
.page-link {
padding: .45rem .9rem;
border-radius: var(--soft-radius-sm);
font-size: .82rem;
border: none;
background: var(--soft-surface);
color: var(--color-text);
box-shadow:
3px 3px 7px var(--soft-shadow-dark),
-3px -3px 7px var(--soft-shadow-light);
transition: box-shadow .18s, background .15s;
}
.page-link:hover {
background: var(--color-white);
box-shadow:
2px 2px 5px var(--soft-shadow-dark),
-2px -2px 5px var(--soft-shadow-light);
}
.page-link.active {
background: var(--color-primary);
color: #fff;
box-shadow:
0 4px 12px rgba(30, 64, 175, .32),
inset 0 1px 0 rgba(255, 255, 255, .12);
}
/* ============================================================
FILTRES / RECHERCHE (.search-input)
============================================================ */
.search-input input.form-control,
.search-input input {
padding-left: 2.4rem;
}
/* ============================================================
ENTREES JOURNAL / DOCS - pour rester coherent
============================================================ */
.journal-entry {
background: var(--soft-surface);
border-radius: var(--soft-radius-sm);
border-left: 3px solid var(--color-primary-light);
box-shadow:
inset 1px 1px 3px var(--soft-shadow-dark),
inset -1px -1px 3px var(--soft-shadow-light);
}
.doc-item {
background: var(--soft-surface);
border-radius: var(--soft-radius-sm);
box-shadow:
2px 2px 6px var(--soft-shadow-dark),
-2px -2px 6px var(--soft-shadow-light);
transition: box-shadow .15s;
}
.doc-item:hover {
box-shadow:
1px 1px 3px var(--soft-shadow-dark),
-1px -1px 3px var(--soft-shadow-light);
}
/* ============================================================
FLASH MESSAGES - radius plus doux
============================================================ */
.flash {
border-radius: var(--soft-radius);
box-shadow: 0 4px 10px rgba(15, 23, 42, .06);
}
/* (style) */
.fiche-header-v2 {
border-radius: var(--soft-radius) !important;
border: none !important;
box-shadow:
0 6px 16px rgba(15, 23, 42, .07),
0 1px 3px rgba(15, 23, 42, .04) !important;
}
/* ============================================================
TOPBAR - retrait du fond blanc plat pour un peu de relief
============================================================ */
.topbar {
box-shadow: 0 2px 8px rgba(15, 23, 42, .05);
}
/* ============================================================
FILTRES DROPDOWN Google Sheets
============================================================ */
.gsf-dropdown {
border-radius: var(--soft-radius-sm);
box-shadow:
0 10px 28px rgba(15, 23, 42, .14),
0 2px 6px rgba(15, 23, 42, .06);
border: none;
}
.gsf-search {
border-radius: var(--soft-radius-sm);
background: var(--soft-surface);
border: none;
box-shadow:
inset 2px 2px 4px var(--soft-shadow-dark),
inset -2px -2px 4px var(--soft-shadow-light);
}
.gsf-search:focus {
background: var(--color-white);
box-shadow:
inset 1px 1px 3px var(--soft-shadow-dark),
inset -1px -1px 3px var(--soft-shadow-light),
0 0 0 3px rgba(59, 130, 246, .12);
}
/* ============================================================
ACCESSIBILITE - focus visible clavier
============================================================ */
.btn:focus-visible {
outline: none;
box-shadow:
0 0 0 3px rgba(59, 130, 246, .35),
0 4px 14px rgba(30, 64, 175, .25);
}
/* ============================================================
PETITES TOUCHES SUR LE BANDEAU (badges statut grands)
============================================================ */
.fiche-header-v2 .badge {
font-size: .68rem;
padding: .18rem .55rem;
font-weight: 500;
box-shadow: 0 1px 3px rgba(15, 23, 42, .10);
}
/* ============================================================
BARRE DE NAVIGATION HORIZONTALE (header réduit, pleine largeur)
Logo à gauche · icônes centrées · paramètres + déconnexion à droite.
Remplace l'ancienne sidebar verticale.
============================================================ */
.topnav {
position: sticky; top: 0; z-index: 200;
display: flex; align-items: center; gap: 1rem;
height: 56px;
padding: 0 1rem;
background: var(--color-white, #fff);
border-bottom: 1px solid var(--color-border, #e5e7eb);
box-shadow: 0 1px 3px rgba(15, 23, 42, .06);
}
.topnav-logo {
flex-shrink: 0; display: flex; align-items: center;
height: 56px; padding-right: .75rem;
border-right: 1px solid var(--color-border, #e5e7eb);
}
.topnav-logo img { max-height: 34px; max-width: 150px; object-fit: contain; }
.topnav-logo .logo-text {
font-size: .95rem; font-weight: 800; color: var(--color-primary);
white-space: nowrap; letter-spacing: .01em;
}
/* Menu central : icônes + petit libellé, défilement horizontal si trop nombreux */
.topnav-menu {
flex: 1; min-width: 0;
display: flex; align-items: stretch; justify-content: safe center;
gap: .35rem; overflow: visible; /* visible -> l'infobulle au survol n'est pas rognée */
scrollbar-width: thin;
}
.topnav-menu::-webkit-scrollbar { height: 5px; }
.topnav-menu::-webkit-scrollbar-thumb { background: #d1d5db; border-radius: 3px; }
/* Nav en ICÔNES SEULES (le nom complet s'affiche au survol via l'infobulle) */
.tn-link {
flex-shrink: 0;
display: flex; align-items: center; justify-content: center;
padding: .3rem; min-width: 46px; height: 46px;
color: #475569; border-radius: 10px;
transition: background .15s, color .15s;
text-decoration: none;
}
.tn-link:hover { background: var(--color-sidebar-hover, #eef2ff); color: var(--color-primary); }
.tn-link.active { background: var(--color-primary); color: #fff; }
.tn-icon { font-size: 1.55rem; line-height: 1; display: flex; align-items: center; }
/* Icônes SVG (Dashboard/MPR/CEE) : le helper $ic pose un style inline width:16px ;
on le surcharge en !important pour égaler la taille visuelle des emojis voisins. */
.tn-icon img { width: 30px !important; height: 30px !important; object-fit: contain; }
.tn-label { display: none; } /* libellés masqués : on garde uniquement les icônes */
/* Infobulle instantanée au survol : nom complet (les libellés sont tronqués).
NB : on réinitialise 'bottom' (une règle générique [data-tip] plus haut pose
bottom:calc(100%+6px) ; sans ce reset, top+bottom écrasent la bulle -> texte coupé). */
.tn-link[data-tip] { position: relative; cursor: pointer; }
.tn-link[data-tip]:hover::after {
content: attr(data-tip);
position: absolute; bottom: auto; top: calc(100% + 9px); left: 50%; transform: translateX(-50%);
width: auto; height: auto; max-width: none;
background: #1e293b; color: #fff; font-size: .74rem; font-weight: 600; line-height: 1.25;
white-space: nowrap; padding: .4rem .65rem; border-radius: 7px;
box-shadow: 0 6px 18px rgba(15, 23, 42, .28);
z-index: 10000; pointer-events: none;
}
.tn-link[data-tip]:hover::before {
content: ''; position: absolute; top: calc(100% + 3px); left: 50%; transform: translateX(-50%);
border: 6px solid transparent; border-bottom-color: #1e293b; z-index: 10000; pointer-events: none;
}
/* Groupe de droite : recherche, cloche, paramètres, badge user, déconnexion */
.topnav-right { flex-shrink: 0; display: flex; align-items: center; gap: .55rem; }
.tn-action {
display: flex; align-items: center; justify-content: center;
width: 36px; height: 36px; border-radius: 8px;
color: #475569; transition: background .15s, color .15s;
}
.tn-action:hover { background: var(--color-bg, #f1f5f9); color: var(--color-primary); }
.tn-action.active { background: var(--color-primary); color: #fff; }
.tn-logout:hover { background: #fef2f2; color: var(--color-danger, #dc2626); }
.topnav-userbadge {
width: 34px; height: 34px; border-radius: 50%;
background: var(--color-primary); color: #fff;
display: flex; align-items: center; justify-content: center;
font-size: .74rem; font-weight: 700; flex-shrink: 0;
}
.notif-bell { width: 36px; height: 36px; justify-content: center; border-radius: 8px; color: #475569; }
.notif-bell:hover { background: var(--color-bg, #f1f5f9); color: var(--color-primary); }
/* Contenu : pleine largeur, plus de marge de sidebar */
.main-full { min-height: calc(100vh - 56px); display: flex; flex-direction: column; }
.main-full .page-content { padding: 1.25rem 1.5rem; flex: 1; width: 100%; }
/* Tableaux des listes : plus denses pour tenir sur la largeur (même les listes à 13 colonnes) */
.main-full .crm-table { font-size: .8rem; }
.main-full .crm-table th { padding: .5rem .55rem; }
.main-full .crm-table td { padding: .5rem .55rem; }
/* Responsive : sur mobile, le menu reste défilable et le logo se réduit */
@media (max-width: 768px) {
.topnav { gap: .5rem; padding: 0 .6rem; }
.topnav-logo { padding-right: .5rem; }
.topnav-logo .logo-text { font-size: .82rem; max-width: 90px; overflow: hidden; text-overflow: ellipsis; }
.topnav-menu { justify-content: flex-start; overflow-x: auto; overflow-y: hidden; }
.topnav-right .topbar-search { display: none; }
.main-full .page-content { padding: .8rem; }
}
/* ===== Leads ===== */
.form-control-sm { padding: .35rem .55rem; font-size: .8rem; }
.ld-layout { display: flex; gap: 1rem; align-items: flex-start; }
.ld-main { flex: 1; min-width: 0; }
.ld-filters { width: 260px; flex: 0 0 260px; background: var(--color-white); border: 1px solid var(--color-border); border-radius: 12px; position: sticky; top: 1rem; max-height: calc(100vh - 2rem); overflow: auto; }
.ld-filters.is-collapsed { width: 44px; flex-basis: 44px; overflow: hidden; }
.ld-filters.is-collapsed .ld-filters-body { display: none; }
.ld-filters.is-collapsed .ld-filters-head span { display: none; }
.ld-filters-head { display: flex; align-items: center; justify-content: space-between; padding: .7rem .9rem; border-bottom: 1px solid var(--color-border); font-weight: 600; font-size: .9rem; }
.ld-filters-toggle { background: var(--color-surface3); border: 1px solid var(--color-border); border-radius: 6px; width: 26px; height: 26px; cursor: pointer; font-size: 1rem; line-height: 1; color: var(--color-text-muted); }
.ld-filters.is-collapsed .ld-filters-toggle { transform: rotate(180deg); }
.ld-filters-body { padding: .8rem; display: flex; flex-direction: column; gap: .45rem; }
.ld-flabel { font-size: .72rem; font-weight: 600; color: var(--color-text-muted); margin-top: .35rem; }
.ld-frange { display: flex; gap: .4rem; }
.ld-frange .form-control { min-width: 0; }
.ld-clear { text-align: center; margin-bottom: .3rem; }
.ld-apply { margin-top: .5rem; }
/* Cartes-compteurs */
.ld-counters { display: grid; grid-template-columns: repeat(4, 1fr); gap: .75rem; margin-bottom: 1rem; }
.ld-counter { background: var(--color-white); border: 1px solid var(--color-border); border-radius: 12px; padding: .7rem .9rem; }
.ld-counter-sel { border-left: 3px solid var(--color-primary); }
.ld-counter-k { font-size: 1.5rem; font-weight: 800; color: var(--color-text); line-height: 1.1; }
.ld-counter-rdv { font-size: 1.05rem; }
.ld-counter-l { font-size: .78rem; color: var(--color-text-muted); font-weight: 600; }
.ld-counter-sub { font-size: .72rem; color: #94a3b8; margin-top: .15rem; }
/* Bande de cartes-statuts */
.ld-statusbar { display: flex; align-items: stretch; gap: .4rem; margin-bottom: 1rem; }
.ld-statusbar-arrow { flex: 0 0 auto; width: 30px; background: var(--color-white); border: 1px solid var(--color-border); border-radius: 10px; cursor: pointer; font-size: 1.3rem; line-height: 1; color: var(--color-text-muted); }
.ld-statusbar-arrow:hover { background: var(--color-surface3); }
.ld-statusbar-track { display: flex; gap: .5rem; overflow-x: auto; scroll-behavior: smooth; padding-bottom: .2rem; flex: 1; }
.ld-statusbar-track::-webkit-scrollbar { height: 6px; }
.ld-statusbar-track::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 3px; }
.ld-statuscard { flex: 0 0 auto; min-width: 110px; display: flex; flex-direction: column; align-items: flex-start; gap: .15rem; background: var(--color-white); border: 1px solid var(--color-border); border-radius: 10px; padding: .55rem .7rem; text-decoration: none; position: relative; transition: box-shadow .12s, border-color .12s; }
.ld-statuscard:hover { box-shadow: 0 2px 8px rgba(0,0,0,.08); }
.ld-statuscard.is-active { border-color: var(--c); box-shadow: 0 0 0 2px var(--c) inset; }
.ld-statuscard-n { font-size: 1.25rem; font-weight: 800; color: var(--c); line-height: 1; }
.ld-statuscard-dot { position: absolute; top: .6rem; right: .6rem; width: 10px; height: 10px; border-radius: 50%; background: var(--c); }
.ld-statuscard-l { font-size: .72rem; color: var(--color-text); font-weight: 600; white-space: nowrap; }
/* Barre de masse */
.ld-masse { display: flex; align-items: center; gap: .8rem; flex-wrap: wrap; background: #eef2ff; border: 1px solid #c7d2fe; border-radius: 10px; padding: .55rem .8rem; margin-bottom: .8rem; }
.ld-masse-count { font-size: .82rem; color: var(--color-text); }
.ld-masse-group { display: flex; gap: .4rem; align-items: center; }
/* Barre au-dessus du tableau (bouton + Colonnes) */
.ld-tablebar { display: flex; align-items: center; margin-bottom: .6rem; min-height: 32px; }
/* Tableau leads — lignes fines et denses façon Betool, UNE ligne par lead.
table-layout FIXED : la largeur choisie par l'utilisateur (poignée) fait LOI,
le texte trop long est simplement tronqué (…), jamais la colonne élargie. */
.ld-table { table-layout: fixed; }
.ld-table td { overflow: hidden; text-overflow: ellipsis; }
/* Largeurs par défaut (surchargées par les préférences user via style inline) */
.ld-table th:first-child { width: 34px; }
.ld-table th[data-slug="date_assignation"] { width: 138px; }
.ld-table th[data-slug="date_creation"] { width: 138px; }
.ld-table th[data-slug="prenom"] { width: 105px; }
.ld-table th[data-slug="nom"] { width: 125px; }
.ld-table th[data-slug="telephone"] { width: 115px; }
.ld-table th[data-slug="email"] { width: 190px; }
.ld-table th[data-slug="code_postal"] { width: 85px; }
.ld-table th[data-slug="banniere"] { width: 125px; }
.ld-table th[data-slug="representant"] { width: 64px; }
.ld-table th[data-slug="statut"] { width: 185px; }
.ld-table th[data-slug="unite_affaire"] { width: 100px; }
.ld-table th[data-slug="evenement"] { width: 118px; }
/* commentaire : pas de largeur -> prend l'espace restant */
.ld-table th, .ld-table td {
white-space: nowrap; /* aucune cellule ni en-tête ne passe à la ligne */
vertical-align: middle;
padding: .3rem .55rem; /* lignes denses */
}
.ld-table th { position: relative; }
.ld-table th .ld-sort { color: inherit; text-decoration: none; white-space: nowrap; }
.ld-table th .ld-sort.is-active { color: var(--color-primary); }
.ld-table .ld-row { cursor: pointer; }
.ld-th-check, .ld-td-check { width: 34px; text-align: center; white-space: nowrap; }
.ld-nowrap { white-space: nowrap; font-size: .8rem; }
.ld-dim { color: #cbd5e1; }
/* Troncature générique : tout ce qui peut déborder est coupé avec « … ». */
.ld-trunc { overflow: hidden; text-overflow: ellipsis; max-width: 220px; }
.ld-table td[data-col="prenom"], .ld-table td[data-col="nom"] { max-width: 140px; }
.ld-table td[data-col="code_postal"] { max-width: 90px; }
.ld-table td[data-col="unite_affaire"] { max-width: 150px; }
.ld-email { max-width: 170px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ld-banniere { max-width: 130px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .78rem; }
.ld-comment { max-width: 220px; font-size: .78rem; color: #475569; }
.ld-statut-date { font-size: .68rem; color: #94a3b8; margin-top: .15rem; white-space: nowrap; }
/* Poignée de redimensionnement sur le bord droit de chaque en-tête */
.ld-col-resizer {
position: absolute; top: 0; right: 0; width: 7px; height: 100%;
cursor: col-resize; user-select: none; touch-action: none; z-index: 3;
}
.ld-col-resizer:hover { background: rgba(37, 99, 235, .25); }
body.ld-resizing { cursor: col-resize !important; user-select: none !important; }
body.ld-resizing * { cursor: col-resize !important; }
.ld-th-rep, .ld-td-rep { text-align: center; }
.ld-avatar { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 50%; background: var(--color-primary); color: #fff; font-size: .72rem; font-weight: 700; }
.ld-avatar-empty { background: #e2e8f0; color: #94a3b8; }
.ld-event { display: inline-block; background: #dcfce7; color: #15803d; font-size: .72rem; font-weight: 600; padding: .2rem .45rem; border-radius: 6px; white-space: nowrap; }
/* Pied + pagination */
.ld-footer { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-top: .9rem; flex-wrap: wrap; }
.ld-total { font-size: .82rem; color: var(--color-text-muted); font-weight: 600; }
.ld-perpage { display: flex; align-items: center; gap: .4rem; font-size: .82rem; color: var(--color-text-muted); }
.ld-perpage label { margin: 0; font-weight: 600; }
.ld-pager { display: flex; align-items: center; gap: .3rem; flex-wrap: wrap; }
.ld-page { display: inline-flex; align-items: center; justify-content: center; min-width: 30px; height: 30px; padding: 0 .4rem; border: 1px solid var(--color-border); border-radius: 8px; background: var(--color-white); color: var(--color-text); text-decoration: none; font-size: .8rem; }
.ld-page:hover { background: var(--color-surface3); }
.ld-page.is-active { background: var(--color-primary); color: #fff; border-color: var(--color-primary); }
.ld-page-gap { color: #94a3b8; padding: 0 .2rem; }
/* Modale fiche */
.ld-modal-overlay { position: fixed; inset: 0; background: rgba(15,23,42,.55); z-index: 10000; align-items: flex-start; justify-content: center; padding: 2.5rem 1rem; overflow: auto; }
.ld-modal { background: var(--color-white); border-radius: 14px; width: 100%; max-width: 1000px; min-height: 200px; position: relative; box-shadow: 0 20px 60px rgba(0,0,0,.3); }
.ld-modal-close { position: absolute; top: .6rem; right: .8rem; background: none; border: none; font-size: 1.8rem; line-height: 1; color: var(--color-text-muted); cursor: pointer; z-index: 2; }
.ld-modal-close:hover { color: var(--color-danger); }
.ld-modal-body { padding: 1.5rem; }
.ld-modal-loading { text-align: center; color: #94a3b8; padding: 2.5rem; }
@media (max-width: 1100px) {
.ld-counters { grid-template-columns: repeat(2, 1fr); }
.ld-layout { flex-direction: column; }
.ld-filters { width: 100%; flex-basis: auto; position: static; max-height: none; order: -1; }
}
/* ===== Lead fiche ===== */
/* Fiche lead façon Betool : rendue en fragment, insérée dans une modale par la liste. */
.lf-root { display: flex; flex-direction: column; gap: 1rem; background: #eef1f6; }
/* En-tête : fermer (gauche) / nav (centre) / actions (droite) */
.lf-header {
display: flex; align-items: center; gap: 1rem;
background: var(--color-surface2); border-bottom: 1px solid #e2e8f0;
padding: .55rem .9rem; border-radius: 10px 10px 0 0;
position: sticky; top: 0; z-index: 5;
}
.lf-close {
border: none; background: none; cursor: pointer; line-height: 1;
font-size: 1.5rem; color: #ef4444; padding: 0 .3rem; font-weight: 400;
}
.lf-close:hover { color: #b91c1c; }
.lf-nav { display: flex; gap: .5rem; margin: 0 auto; }
.lf-btn-nav {
background: #2563eb; color: #fff; border: none; border-radius: 6px;
padding: .4rem .85rem; font-size: .82rem; font-weight: 600; cursor: pointer;
}
.lf-btn-nav:hover:not(:disabled) { background: #1d4ed8; }
.lf-btn-nav:disabled { opacity: .45; cursor: default; }
.lf-header-right { display: flex; align-items: center; gap: .6rem; margin-left: auto; }
.lf-icon-link {
display: inline-flex; align-items: center; justify-content: center;
width: 30px; height: 30px; border-radius: 6px; color: #2563eb;
text-decoration: none; font-size: 1.05rem;
}
.lf-icon-link:hover { background: #e0e7ff; }
/* ---- Menu « Mon thème » (badge utilisateur, topnav) ---- */
.tn-theme-menu { position: relative; }
.tn-theme-menu > summary { list-style: none; cursor: pointer; display: inline-flex; }
.tn-theme-menu > summary::-webkit-details-marker { display: none; }
.tn-theme-list {
position: absolute; right: 0; top: calc(100% + 8px); z-index: 10000;
background: var(--color-white); border: 1px solid #e2e8f0; border-radius: 10px;
box-shadow: 0 12px 32px rgba(15, 23, 42, .18);
padding: .4rem; min-width: 220px; display: flex; flex-direction: column; gap: 2px;
}
.tn-theme-titre {
font-size: .68rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em;
color: #94a3b8; padding: .25rem .55rem .35rem;
}
.tn-theme-item {
border: none; background: none; text-align: left; cursor: pointer;
font-size: .82rem; color: #0f172a; padding: .42rem .55rem; border-radius: 6px; width: 100%;
}
.tn-theme-item:hover { background: var(--color-surface3); }
.tn-theme-item.actif { background: #eef2ff; color: #4338ca; font-weight: 600; }
/* Téléphone du bandeau : numéro visible, agrandi, formaté avec espaces. */
.lf-icon-link.lf-tel {
width: auto; padding: 0 .55rem; gap: .3rem;
font-size: 1.15rem; font-weight: 600; white-space: nowrap;
background: #eff6ff; border: 1px solid #bfdbfe;
}
.lf-icon-link.lf-tel:hover { background: #dbeafe; }
.lf-save-top {
border: none; background: none; cursor: pointer; font-size: 1.15rem;
color: #16a34a; padding: .15rem .35rem; line-height: 1;
}
.lf-save-top:hover { color: #15803d; }
.lf-save-top:disabled { opacity: .5; cursor: default; }
/* Flash interne à la fiche */
.lf-flash {
margin: 0 .25rem; padding: .55rem .85rem; border-radius: 8px;
font-size: .85rem; font-weight: 500;
}
.lf-flash-success { background: #dcfce7; color: #166534; border: 1px solid #bbf7d0; }
.lf-flash-error { background: #fee2e2; color: #991b1b; border: 1px solid #fecaca; }
/* Bandeau « lead transformé » + panneau de transformation */
.lf-transformed-banner {
margin: 0 .25rem .25rem; padding: .6rem .9rem; border-radius: 8px;
background: #ecfdf5; color: #065f46; border: 1px solid #a7f3d0;
font-size: .9rem; font-weight: 500; display: flex; align-items: center; gap: .5rem;
}
.lf-transformed-banner a { color: #047857; }
.lf-transformed-ico { font-weight: 700; }
.lf-transform-panel { display: flex; flex-direction: column; gap: 1rem; }
.lf-transform-head { padding: 0 .25rem; }
.lf-transform-title { margin: 0 0 .25rem; font-size: 1.05rem; }
.lf-transform-sub { margin: 0; font-size: .85rem; color: #64748b; }
.lf-transform-open { white-space: nowrap; }
/* Cartes (Personnel / Gestion / Autres / Événement) */
.lf-form { display: flex; flex-direction: column; gap: 1rem; }
.lf-card {
background: var(--color-white); border: 1px solid #e2e8f0; border-radius: 12px;
padding: 1rem 1.1rem; box-shadow: 0 1px 2px rgba(15, 23, 42, .04);
}
.lf-card-title {
display: flex; align-items: center; gap: .5rem;
font-size: .9rem; font-weight: 700; color: #334155; margin-bottom: .85rem;
}
.lf-card-ico { font-size: 1rem; line-height: 1; }
/* Timeline */
.lf-timeline-card { display: flex; flex-direction: column; gap: .85rem; }
.lf-pills { display: flex; flex-wrap: wrap; gap: .4rem; }
.lf-pill {
border: 1px solid #cbd5e1; background: var(--color-surface3); color: #475569;
border-radius: 999px; padding: .3rem .8rem; font-size: .78rem;
font-weight: 600; cursor: pointer;
}
.lf-pill:hover { background: #e2e8f0; }
.lf-pill.active { background: #2563eb; border-color: #2563eb; color: #fff; }
.lf-note-form { display: flex; gap: .5rem; align-items: flex-start; }
.lf-note-input {
flex: 1; min-width: 0; resize: vertical; padding: .5rem .65rem;
border: 1px solid #cbd5e1; border-radius: 8px; font: inherit; font-size: .85rem;
}
.lf-note-input:focus { outline: none; border-color: #2563eb; box-shadow: 0 0 0 2px rgba(37, 99, 235, .15); }
.lf-note-add { white-space: nowrap; align-self: stretch; }
.lf-events { display: flex; flex-direction: column; gap: .6rem; }
.lf-empty { color: #94a3b8; font-size: .85rem; padding: .5rem 0; text-align: center; }
.lf-event {
display: flex; gap: .65rem; background: var(--color-white); border: 1px solid #e2e8f0;
border-left: 3px solid #8b5cf6; border-radius: 8px; padding: .6rem .75rem;
}
.lf-event-avatar {
flex-shrink: 0; width: 30px; height: 30px; border-radius: 50%;
background: #ede9fe; color: #6d28d9; font-size: .72rem; font-weight: 700;
display: flex; align-items: center; justify-content: center;
}
.lf-event-body { flex: 1; min-width: 0; }
.lf-event-head { display: flex; align-items: baseline; gap: .5rem; flex-wrap: wrap; }
.lf-event-user { font-weight: 700; color: #0f172a; font-size: .85rem; }
.lf-event-date { margin-left: auto; font-size: .72rem; color: #94a3b8; white-space: nowrap; }
.lf-event-type { font-size: .76rem; color: #64748b; margin-top: .1rem; }
.lf-event-statut { font-size: .8rem; color: #334155; margin-top: .2rem; font-weight: 600; }
.lf-event-content { font-size: .85rem; color: #334155; margin-top: .25rem; line-height: 1.4; word-break: break-word; }
/* Pastille statut leads : jamais de retour à la ligne, compacte -> lignes de hauteur uniforme */
#ldMainTable td[data-col="statut"] .badge { white-space: nowrap; font-size: .66rem; padding: .18rem .5rem; display: inline-block; }
#ldMainTable td[data-col="statut"] { line-height: 1.1; }
/* Statut inline + compteur NRP dans la liste leads */
.ld-statut-cell { display: inline-flex; align-items: center; gap: .25rem; max-width: 100%; }
.ld-statut-cell .ld-statut-select { flex: 0 1 auto; min-width: 0; }
.ld-statut-cell .ld-nrp-plus, .ld-statut-cell .ld-nrp-count { flex: 0 0 auto; } /* jamais rognés */
.ld-statut-select { font-size: .72rem; padding: .15rem .3rem; border: 1px solid var(--color-border, #e2e8f0); border-radius: 6px; background: var(--color-white); max-width: 140px; cursor: pointer; }
.ld-nrp-plus { width: 18px; height: 18px; border-radius: 50%; border: none; background: #F59E0B; color: #fff; font-weight: 800; font-size: .85rem; line-height: 1; cursor: pointer; flex: 0 0 auto; }
.ld-nrp-plus:hover { filter: brightness(.92); }
.ld-nrp-count { font-size: .72rem; font-weight: 700; color: #B45309; white-space: nowrap; }
/* Téléphone : visiblement cliquable */
.ld-table a[href^="tel:"] { color: var(--color-primary); font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }
/* Badge-déroulant : le select statut reprend l'apparence pastille d'avant */
.ld-statut-badge {
appearance: none; -webkit-appearance: none; -moz-appearance: none;
border: none; border-radius: 999px;
color: #fff; font-weight: 700; font-size: .66rem; letter-spacing: .02em;
padding: .22rem 1.1rem .22rem .6rem; cursor: pointer; max-width: 150px;
background-image: url("data:image/svg+xml;utf8,