/* Extrait du monocode V1. ÉCART VOLONTAIRE (demande Jérémie 5/07/2026) :
palette accent passée au VERT — #126e82→#0F766E, #0d5567→#0B5D57, #1a8aa3→#14A396. */
:root {
/* ═══ PALETTE — Bleu pétrole + neutres froids ═══ */
--navy: #0F766E; /* Bleu pétrole (accent principal) */
--navy-dark: #0B5D57; /* Bleu pétrole foncé */
--navy-light: #14A396; /* Bleu pétrole clair */
--steel: #0F766E;
--slate: #5b6b72; /* Texte gris-bleu */
/* Échelle de gris froide (mode clair) */
--gray-900: #16252b; /* Texte principal (presque noir bleu) */
--gray-700: #384850; /* Texte secondaire */
--gray-500: #5b6b72; /* Texte tertiaire */
--gray-400: #84939a; /* Texte muted */
--gray-300: #c4cfd4; /* Bordure foncée */
--gray-200: #e2e8eb; /* Bordure standard */
--gray-100: #edf2f4; /* Surface subtile */
--gray-50: #f2f6f7; /* Surface 2 */
--white: #ffffff; /* Cartes / surfaces */
--bg: #f5f8f9; /* Fond principal blanc cassé bleuté */
--accent: #0F766E; /* Bleu pétrole */
--accent-dark: #0B5D57;
--success: #15803d;
--success-bg: rgba(21, 128, 61, 0.1);
--warning: #c2410c; /* Orange brûlé pour alertes */
--warning-bg: rgba(194, 65, 12, 0.1);
--danger: #b91c1c;
--danger-bg: rgba(185, 28, 28, 0.1);
--info: #0e7490;
--info-bg: rgba(14, 116, 144, 0.1);
--shadow-sm: 0 1px 2px rgba(18, 110, 130, 0.05);
--shadow: 0 1px 3px rgba(18, 110, 130, 0.1), 0 1px 2px rgba(18, 110, 130, 0.05);
--shadow-md: 0 4px 6px -1px rgba(18, 110, 130, 0.12), 0 2px 4px -1px rgba(18, 110, 130, 0.07);
--shadow-lg: 0 10px 15px -3px rgba(18, 110, 130, 0.14), 0 4px 6px -2px rgba(18, 110, 130, 0.07);
--radius: 8px;
--radius-lg: 12px;
--transition: 150ms cubic-bezier(0.4, 0, 0.2, 1);
}
* {
box-sizing: border-box;
margin: 0;
padding: 0;
-webkit-tap-highlight-color: transparent;
}
html,
body {
height: 100%;
overflow-x: hidden;
}
body {
font-family:
"Inter",
"Helvetica Neue",
-apple-system,
BlinkMacSystemFont,
sans-serif;
font-size: 14px;
line-height: 1.5;
color: var(--gray-900);
background: var(--bg);
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
button {
font-family: inherit;
cursor: pointer;
border: none;
background: none;
}
input,
select,
textarea {
font-family: inherit;
font-size: 14px;
}
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="date"],
input[type="datetime-local"],
input[type="number"],
select,
textarea {
width: 100%;
padding: 9px 12px;
border: 1px solid var(--gray-300);
border-radius: var(--radius);
background: var(--white);
color: var(--gray-900);
transition:
border-color var(--transition),
box-shadow var(--transition);
}
input:focus,
select:focus,
textarea:focus {
outline: none;
border-color: var(--navy);
box-shadow: 0 0 0 3px rgba(18, 110, 130, 0.18);
}
textarea {
resize: vertical;
min-height: 64px;
font-family: inherit;
}
label {
display: block;
font-size: 12px;
font-weight: 600;
color: var(--gray-700);
margin-bottom: 5px;
text-transform: uppercase;
letter-spacing: 0.04em;
}
.req {
color: var(--danger);
margin-left: 2px;
}
/* HEADER */
.app-header {
background: var(--navy);
color: var(--white);
padding: 14px 20px;
display: flex;
align-items: center;
justify-content: space-between;
border-bottom: 3px solid var(--accent);
position: sticky;
top: 0;
z-index: 100;
box-shadow: var(--shadow);
}
.brand {
display: flex;
align-items: center;
gap: 10px;
}
.brand-clickable {
background: transparent;
border: none;
cursor: pointer;
padding: 4px 8px 4px 4px;
border-radius: 9px;
font-family: inherit;
color: inherit;
text-align: left;
transition: background 0.15s;
}
.brand-clickable:hover {
background: rgba(255, 255, 255, 0.08);
}
.brand-clickable[aria-expanded="true"] {
background: rgba(255, 255, 255, 0.12);
}
.brand-chevron {
margin-left: 6px;
color: rgba(255, 255, 255, 0.7);
transition: transform 0.2s;
}
.brand-clickable[aria-expanded="true"] .brand-chevron {
transform: rotate(180deg);
}
/* Menu compte (déroulant sous le bloc marque) */
#account-menu {
position: fixed;
top: 72px;
left: 24px;
background: #fff;
border: 1px solid var(--gray-200);
border-radius: 12px;
box-shadow: 0 12px 32px rgba(0, 0, 0, 0.18);
padding: 8px;
min-width: 260px;
z-index: 9400;
display: none;
font-family: inherit;
}
#account-menu.open {
display: block;
}
.acm-header {
padding: 10px 12px 10px;
border-bottom: 1px solid var(--gray-100);
margin-bottom: 6px;
}
.acm-label {
font-size: 10px;
letter-spacing: 0.6px;
text-transform: uppercase;
color: var(--gray-500);
font-weight: 700;
margin-bottom: 6px;
}
.acm-user {
display: flex;
align-items: center;
gap: 10px;
}
.acm-avatar {
width: 34px;
height: 34px;
border-radius: 9px;
background: rgba(15, 118, 110, 0.1);
color: var(--navy);
display: flex;
align-items: center;
justify-content: center;
font-weight: 700;
font-size: 13px;
flex-shrink: 0;
letter-spacing: 0.5px;
}
.acm-userinfo {
flex: 1;
min-width: 0;
}
.acm-user-name {
font-size: 13px;
font-weight: 700;
color: var(--gray-900);
line-height: 1.2;
}
.acm-user-trig {
font-size: 11px;
color: var(--gray-500);
margin-top: 2px;
letter-spacing: 0.4px;
font-weight: 600;
}
.acm-item {
display: flex;
align-items: center;
gap: 10px;
padding: 9px 11px;
border-radius: 8px;
cursor: pointer;
background: none;
border: none;
width: 100%;
font-family: inherit;
text-align: left;
color: var(--gray-700);
font-size: 13px;
font-weight: 500;
}
.acm-item:hover {
background: var(--gray-50);
color: var(--gray-900);
}
.acm-item svg {
width: 16px;
height: 16px;
color: var(--gray-500);
flex-shrink: 0;
}
.acm-item:hover svg {
color: var(--navy);
}
.acm-item.danger:hover {
color: #dc2626;
}
.acm-item.danger:hover svg {
color: #dc2626;
}
.acm-sep {
height: 1px;
background: var(--gray-100);
margin: 6px 0;
}
.brand-mark {
width: 36px;
height: 36px;
background: #fff;
border-radius: 10px;
display: flex;
align-items: center;
justify-content: center;
font-weight: 800;
color: var(--navy);
font-size: 15px;
letter-spacing: -0.02em;
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
}
.brand-text {
font-weight: 600;
font-size: 15px;
letter-spacing: 0.02em;
}
.brand-text small {
display: block;
font-size: 10px;
color: var(--gray-300);
font-weight: 400;
margin-top: 1px;
letter-spacing: 0.06em;
text-transform: uppercase;
}
.brand-text small.brand-lastsave {
font-size: 10px;
font-weight: 400;
color: rgba(255, 255, 255, 0.55);
margin-top: 2px;
letter-spacing: 0.02em;
text-transform: none;
}
.header-actions {
display: flex;
gap: 8px;
align-items: center;
}
/* ═══ LOGIN OVERLAY ═══════════════════════════════════════ */
.login-overlay {
position: fixed;
inset: 0;
background: var(--bg);
z-index: 9999;
display: flex;
align-items: center;
justify-content: center;
padding: 20px;
overflow-y: auto;
}
.login-card {
background: var(--white);
border: 1px solid var(--gray-200);
border-radius: var(--radius-lg);
box-shadow: var(--shadow-lg);
padding: 40px 32px;
width: 100%;
max-width: 380px;
}
.login-brand {
font-size: 32px;
font-weight: 700;
color: var(--navy);
letter-spacing: 0.02em;
text-align: center;
margin-bottom: 4px;
}
.login-subtitle {
font-size: 11px;
color: var(--gray-500);
text-transform: uppercase;
letter-spacing: 0.08em;
text-align: center;
margin-bottom: 28px;
}
.login-field {
margin-bottom: 14px;
}
.login-field label {
display: block;
font-size: 11px;
font-weight: 600;
color: var(--gray-700);
margin-bottom: 5px;
text-transform: uppercase;
letter-spacing: 0.04em;
}
.login-field input {
width: 100%;
padding: 10px 12px;
border: 1px solid var(--gray-300);
border-radius: var(--radius);
font-size: 14px;
background: var(--white);
}
.login-field input:focus {
outline: none;
border-color: var(--navy);
box-shadow: 0 0 0 3px rgba(18, 110, 130, 0.15);
}
.login-error {
background: var(--danger-bg);
color: var(--danger);
padding: 10px 12px;
border-radius: var(--radius);
font-size: 13px;
margin-bottom: 14px;
border: 1px solid rgba(185, 28, 28, 0.2);
}
.login-submit {
width: 100%;
background: var(--navy);
color: var(--white);
padding: 11px 16px;
border-radius: var(--radius);
font-size: 14px;
font-weight: 600;
letter-spacing: 0.02em;
cursor: pointer;
transition: background var(--transition);
margin-top: 6px;
}
.login-submit:hover {
background: var(--navy-dark);
}
.login-footer-note {
font-size: 11px;
color: var(--gray-500);
text-align: center;
margin-top: 18px;
line-height: 1.5;
}
/* ═══ HEADER USER INFO ═══════════════════════════════════ */
.header-user {
display: flex;
align-items: center;
gap: 8px;
padding: 6px 10px;
background: rgba(255, 255, 255, 0.12);
border-radius: var(--radius);
color: var(--white);
font-size: 12px;
}
.header-user-text {
line-height: 1.2;
}
.header-user-name {
font-weight: 600;
}
.header-user-trig {
font-size: 10px;
opacity: 0.7;
letter-spacing: 0.05em;
}
.header-user-logout {
background: transparent;
border: 1px solid rgba(255, 255, 255, 0.3);
color: var(--white);
padding: 4px 8px;
border-radius: var(--radius);
font-size: 11px;
cursor: pointer;
transition: background var(--transition);
}
.header-user-logout:hover {
background: rgba(255, 255, 255, 0.15);
}
/* Indicateur de stockage — icône SVG (cylindre disque) + texte + barre */
.storage-indicator {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 6px 11px;
background: rgba(255, 255, 255, 0.1);
border: 1px solid rgba(255, 255, 255, 0.18);
border-radius: 8px;
font-size: 11.5px;
font-weight: 500;
color: rgba(255, 255, 255, 0.95);
letter-spacing: 0.02em;
font-variant-numeric: tabular-nums;
white-space: nowrap;
transition: all 0.18s;
}
.storage-indicator:hover {
background: rgba(255, 255, 255, 0.16);
border-color: rgba(255, 255, 255, 0.28);
}
.storage-icon {
width: 13px;
height: 13px;
background-image: url("data:image/svg+xml;utf8,");
background-size: contain;
background-repeat: no-repeat;
flex-shrink: 0;
opacity: 0.85;
}
.storage-text {
font-weight: 600;
}
.storage-bar {
display: inline-block;
width: 36px;
height: 5px;
background: rgba(255, 255, 255, 0.15);
border-radius: 3px;
overflow: hidden;
margin-left: 2px;
}
.storage-bar-fill {
display: block;
height: 100%;
background: rgba(255, 255, 255, 0.65);
border-radius: 3px;
transition:
width 0.3s,
background 0.18s;
}
.storage-indicator.warning {
background: rgba(245, 158, 11, 0.2);
border-color: rgba(245, 158, 11, 0.45);
color: #fed7aa;
}
.storage-indicator.warning .storage-bar-fill {
background: #f59e0b;
}
.storage-indicator.warning .storage-icon {
opacity: 1;
}
.storage-indicator.danger {
background: rgba(220, 38, 38, 0.25);
border-color: rgba(220, 38, 38, 0.55);
color: #fee2e2;
animation: pulse 2s ease-in-out infinite;
}
.storage-indicator.danger .storage-bar-fill {
background: #ef4444;
}
@keyframes pulse {
0%,
100% {
opacity: 1;
}
50% {
opacity: 0.75;
}
}
/* Boutons du header */
.hdr-btn {
padding: 7px 14px;
border-radius: 8px;
font-size: 12.5px;
font-weight: 600;
letter-spacing: 0.02em;
cursor: pointer;
transition: all 0.15s;
white-space: nowrap;
border: 1px solid transparent;
font-family: inherit;
}
.hdr-btn-primary {
background: var(--white);
color: var(--navy);
border-color: var(--white);
}
.hdr-btn-primary:hover {
background: #f0fdfa;
border-color: #f0fdfa;
transform: translateY(-1px);
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
}
.hdr-btn-ghost {
background: transparent;
color: rgba(255, 255, 255, 0.95);
border-color: rgba(255, 255, 255, 0.28);
}
.hdr-btn-ghost:hover {
background: rgba(255, 255, 255, 0.12);
border-color: rgba(255, 255, 255, 0.55);
color: var(--white);
}
.hdr-btn-small {
padding: 6px 11px;
font-size: 11.5px;
}
/* Anciens noms gardés pour compat */
.btn-transfer {
background: var(--white) !important;
color: var(--navy) !important;
font-weight: 600;
padding: 8px 14px;
font-size: 12px;
letter-spacing: 0.02em;
}
.btn-transfer:hover {
background: #f5f5f5 !important;
transform: translateY(-1px);
}
.alert-bar {
background: var(--danger);
color: white;
padding: 0;
font-size: 13px;
font-weight: 500;
display: none;
flex-direction: column;
cursor: pointer;
transition: all 0.2s;
}
.alert-bar.show {
display: flex;
}
.alert-bar strong {
font-weight: 700;
}
.alert-bar-header {
padding: 10px 16px;
display: flex;
align-items: center;
gap: 8px;
justify-content: space-between;
}
.alert-bar-header:hover {
background: rgba(0, 0, 0, 0.08);
}
.alert-bar-header-left {
display: flex;
align-items: center;
gap: 8px;
}
.alert-bar-toggle {
font-size: 14px;
transition: transform 0.2s;
opacity: 0.8;
}
.alert-bar.expanded .alert-bar-toggle {
transform: rotate(180deg);
}
.alert-bar-list {
display: none;
background: rgba(0, 0, 0, 0.12);
max-height: 280px;
overflow-y: auto;
}
.alert-bar.expanded .alert-bar-list {
display: block;
}
.alert-bar-item {
padding: 9px 16px;
border-top: 1px solid rgba(255, 255, 255, 0.15);
display: flex;
align-items: center;
gap: 10px;
cursor: pointer;
transition: background 0.15s;
}
.alert-bar-item:hover {
background: rgba(0, 0, 0, 0.15);
}
.alert-bar-item-info {
flex: 1;
min-width: 0;
}
.alert-bar-item-name {
font-weight: 600;
font-size: 13px;
color: white;
}
.alert-bar-item-meta {
font-size: 11px;
color: rgba(255, 255, 255, 0.85);
margin-top: 1px;
}
.alert-bar-item-num {
font-family: "JetBrains Mono", "Menlo", monospace;
font-size: 10px;
font-weight: 600;
color: rgba(255, 255, 255, 0.7);
letter-spacing: 0.04em;
}
.alert-bar-item-action {
font-size: 11px;
font-weight: 600;
background: rgba(255, 255, 255, 0.2);
padding: 4px 9px;
border-radius: 6px;
color: white;
flex-shrink: 0;
}
.alert-bar-item-action:hover {
background: rgba(255, 255, 255, 0.3);
}
/* Barre de reprise — visible quand un dossier reste ouvert en arrière-plan */
.resume-bar {
display: flex;
align-items: center;
gap: 12px;
padding: 8px 16px;
background: linear-gradient(90deg, var(--navy) 0%, var(--navy-dark) 100%);
color: white;
cursor: pointer;
transition: all 150ms ease;
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
.resume-bar.hidden {
display: none;
}
.resume-bar:hover {
background: linear-gradient(90deg, var(--navy-dark) 0%, #0a3c49 100%);
}
.resume-bar-icon {
font-size: 18px;
width: 28px;
height: 28px;
display: flex;
align-items: center;
justify-content: center;
background: rgba(255, 255, 255, 0.15);
border-radius: 50%;
flex-shrink: 0;
}
.resume-bar-text {
flex: 1;
display: flex;
flex-direction: column;
gap: 1px;
min-width: 0;
}
.resume-bar-label {
font-size: 9px;
font-weight: 700;
letter-spacing: 0.16em;
text-transform: uppercase;
opacity: 0.7;
}
.resume-bar-content {
font-size: 13px;
font-weight: 600;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.resume-bar-close {
width: 28px;
height: 28px;
display: flex;
align-items: center;
justify-content: center;
background: rgba(255, 255, 255, 0.1);
border: 1px solid rgba(255, 255, 255, 0.2);
color: white;
border-radius: 50%;
font-size: 18px;
cursor: pointer;
transition: all 120ms ease;
flex-shrink: 0;
font-family: inherit;
}
.resume-bar-close:hover {
background: rgba(255, 255, 255, 0.25);
}
/* TABS */
.tabs {
background: var(--white);
display: flex;
align-items: center;
gap: 4px;
border-bottom: 1px solid var(--gray-200);
overflow-x: auto;
position: sticky;
top: var(--header-h, 62px);
z-index: 99;
box-shadow: var(--shadow-sm);
padding: 8px 12px;
}
.tab {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 9px 15px;
font-size: 13.5px;
font-weight: 600;
color: var(--gray-700);
border: 1px solid transparent;
border-radius: 10px;
white-space: nowrap;
transition: all var(--transition);
position: relative;
letter-spacing: 0.01em;
}
.tab-ico {
width: 17px;
height: 17px;
flex-shrink: 0;
opacity: 0.75;
transition: opacity var(--transition);
}
.tab:hover {
color: var(--navy);
background: rgba(18, 110, 130, 0.07);
}
.tab:hover .tab-ico {
opacity: 1;
}
.tab.active {
color: #fff;
background: var(--navy);
border-color: var(--navy);
font-weight: 700;
box-shadow: var(--shadow-sm);
}
.tab.active .tab-ico {
opacity: 1;
}
/* Onglet "Créer" = action principale, toujours visible comme CTA */
.tab-cta {
color: var(--navy);
border-color: rgba(18, 110, 130, 0.35);
background: rgba(18, 110, 130, 0.06);
}
.tab-cta:hover {
background: rgba(18, 110, 130, 0.12);
}
.tab-cta.active {
color: #fff;
background: var(--navy);
}
.tab .badge {
display: inline-block;
margin-left: 6px;
background: var(--danger);
color: white;
font-size: 10px;
padding: 1px 6px;
border-radius: 10px;
font-weight: 700;
vertical-align: middle;
min-width: 18px;
text-align: center;
animation: pulse-badge 2.5s ease-in-out infinite;
box-shadow: 0 0 0 0 rgba(220, 38, 38, 0.5);
}
@keyframes pulse-badge {
0%,
100% {
box-shadow: 0 0 0 0 rgba(220, 38, 38, 0.5);
}
50% {
box-shadow: 0 0 0 6px rgba(220, 38, 38, 0);
}
}
/* CONTAINER */
/* Pas de max-width : l'app utilise toute la largeur disponible de la fenêtre Safari.
La fiche dossier en 3 colonnes (sidebar gauche + main + sidebar droite) bénéficie
de tout l'espace. */
.container {
max-width: none;
margin: 0;
padding: 20px;
}
.section-title {
font-size: 11px;
font-weight: 700;
color: var(--gray-500);
text-transform: uppercase;
letter-spacing: 0.08em;
margin-bottom: 12px;
padding-bottom: 8px;
border-bottom: 1px solid var(--gray-200);
}
.h2 {
font-size: 22px;
font-weight: 700;
color: var(--navy);
letter-spacing: -0.02em;
margin-bottom: 4px;
}
.h3 {
font-size: 16px;
font-weight: 600;
color: var(--gray-900);
margin-bottom: 14px;
}
.muted {
color: var(--gray-500);
font-size: 13px;
}
/* BUTTONS */
.btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 6px;
padding: 9px 16px;
font-size: 13px;
font-weight: 600;
border-radius: var(--radius);
transition: all var(--transition);
letter-spacing: 0.01em;
white-space: nowrap;
}
.btn-primary {
background: var(--navy);
color: white;
}
.btn-primary:hover {
background: var(--navy-dark);
}
.btn-secondary {
background: var(--white);
color: var(--gray-700);
border: 1px solid var(--gray-300);
}
.btn-secondary:hover {
background: var(--gray-50);
border-color: var(--gray-400);
}
.btn-accent {
background: var(--accent);
color: white;
}
.btn-accent:hover {
background: var(--accent-dark);
}
.btn-danger {
background: var(--white);
color: var(--danger);
border: 1px solid var(--danger);
}
.btn-danger:hover {
background: var(--danger);
color: white;
}
.btn-success {
background: var(--success);
color: white;
}
.btn-success:hover {
filter: brightness(0.92);
}
.btn-ghost {
color: var(--gray-700);
padding: 6px 10px;
font-size: 12px;
}
.btn-ghost:hover {
background: var(--gray-100);
}
.btn-block {
width: 100%;
}
.btn-sm {
padding: 6px 12px;
font-size: 12px;
}
.btn-lg {
padding: 13px 22px;
font-size: 14px;
}
.btn:disabled {
opacity: 0.5;
cursor: not-allowed;
}
/* CARDS */
.card {
background: var(--white);
border: 1px solid #2f2d2a;
border-radius: var(--radius-lg);
overflow: hidden;
margin-bottom: 14px;
box-shadow: var(--shadow-sm);
}
.card-header {
padding: 14px 18px;
border-bottom: 1px solid var(--gray-200);
background: var(--gray-50);
display: flex;
align-items: center;
justify-content: space-between;
}
.card-title {
font-size: 13px;
font-weight: 700;
color: var(--navy);
text-transform: uppercase;
letter-spacing: 0.05em;
}
.card-body {
padding: 18px;
}
/* SEARCH */
.search-bar {
background: var(--white);
border: 1px solid var(--gray-300);
border-radius: var(--radius-lg);
padding: 11px 16px;
margin-bottom: 16px;
display: flex;
align-items: center;
gap: 10px;
transition:
border-color var(--transition),
box-shadow var(--transition);
}
.search-bar:focus-within {
border-color: var(--navy);
box-shadow: 0 0 0 3px rgba(10, 31, 68, 0.08);
}
.search-bar input {
flex: 1;
border: none;
padding: 0;
background: none;
}
.search-bar input:focus {
outline: none;
box-shadow: none;
}
.search-icon {
color: var(--gray-400);
font-weight: 700;
font-size: 14px;
}
/* DOSSIER LIST */
.dossier-list {
display: flex;
flex-direction: column;
gap: 8px;
}
.dossier-item {
background: var(--white);
border: 1px solid #2f2d2a;
border-radius: var(--radius-lg);
padding: 14px 16px;
display: flex;
align-items: center;
justify-content: space-between;
cursor: pointer;
transition: all var(--transition);
box-shadow: var(--shadow-sm);
position: relative;
}
.dossier-item:hover {
border-color: var(--navy);
transform: translateY(-1px);
box-shadow: var(--shadow-md);
}
.dossier-item.has-alert {
border-left: 4px solid var(--danger);
background: linear-gradient(90deg, rgba(220, 38, 38, 0.04) 0%, rgba(220, 38, 38, 0) 60%);
border-color: rgba(220, 38, 38, 0.25);
}
.dossier-item.has-alert .dossier-name {
color: var(--danger);
}
.dossier-item.has-alert::before {
content: "●";
position: absolute;
top: 14px;
right: 14px;
color: var(--danger);
font-size: 16px;
animation: pulse-alert 2s ease-in-out infinite;
}
@keyframes pulse-alert {
0%,
100% {
opacity: 1;
transform: scale(1);
}
50% {
opacity: 0.5;
transform: scale(0.85);
}
}
.dossier-num {
font-family: "JetBrains Mono", "Menlo", monospace;
font-size: 11px;
font-weight: 600;
color: var(--gray-500);
letter-spacing: 0.04em;
margin-bottom: 3px;
}
.dossier-name {
font-size: 15px;
font-weight: 600;
color: var(--gray-900);
letter-spacing: -0.01em;
margin-bottom: 6px;
}
.dossier-meta {
font-size: 12px;
color: var(--gray-500);
margin-top: 3px;
}
.badge-type {
font-size: 11px;
font-weight: 600;
color: var(--navy);
background: rgba(18, 110, 130, 0.08);
padding: 2px 8px;
border-radius: 10px;
letter-spacing: 0.01em;
}
.badge-montant {
font-size: 11px;
font-weight: 700;
color: #92400e;
background: #fef3c7;
padding: 2px 8px;
border-radius: 10px;
font-family: "JetBrains Mono", "Menlo", monospace;
letter-spacing: -0.01em;
}
.dossier-info-row {
display: flex;
gap: 6px;
flex-wrap: wrap;
margin-top: 4px;
align-items: center;
}
.dossier-info-pill {
display: inline-flex;
align-items: center;
gap: 5px;
font-size: 11.5px;
color: var(--gray-600);
background: var(--gray-50, #f5f5f0);
padding: 3px 9px;
border-radius: 8px;
font-weight: 500;
border: 1px solid var(--gray-200, #e8e7e0);
max-width: 340px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.dossier-info-icon {
font-size: 11px;
color: var(--gray-500);
font-weight: 600;
}
.dossier-info-adresse {
max-width: 380px;
}
/* Pastilles d'alertes colorées par type (sur les cards de dossier) */
.alert-pills {
display: flex;
align-items: center;
gap: 4px;
flex-shrink: 0;
}
.alert-pill {
font-size: 11px;
font-weight: 700;
color: white;
padding: 3px 9px;
border-radius: 11px;
min-width: 22px;
text-align: center;
background: var(--danger); /* défaut rouge */
border: 1.5px solid rgba(0, 0, 0, 0.05);
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
cursor: pointer;
transition:
transform 0.12s ease,
box-shadow 0.12s ease;
}
.alert-pill:hover {
transform: scale(1.15);
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
}
/* Couleur par type, cohérente avec les boutons d'action et la timeline */
.alert-pill-mail {
background: #3b82f6;
} /* bleu mail */
.alert-pill-rappel {
background: #ef4444;
} /* rouge rappel */
.alert-pill-doc {
background: #64748b;
} /* gris document */
.alert-pill-contact {
background: #f59e0b;
} /* orange "contact à compléter" */
/* FORM */
.form-section {
margin-bottom: 22px;
}
.form-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 14px;
}
.form-grid-full {
grid-column: 1/-1;
}
.form-row {
margin-bottom: 14px;
}
@media (max-width: 640px) {
.form-grid {
grid-template-columns: 1fr;
}
}
/* MODAL */
.modal-overlay {
position: fixed;
inset: 0;
background: rgba(0, 0, 0, 0.75);
backdrop-filter: blur(4px);
display: none;
align-items: flex-start;
justify-content: center;
z-index: 1000;
padding: 20px;
overflow-y: auto;
}
.modal-overlay.show {
display: flex;
}
/* Tailles spéciales pour aperçus (PDF, images) */
.modal-overlay.modal-xl .modal {
max-width: 1280px;
width: 96vw;
}
.modal-overlay.modal-xl .modal-body {
max-height: calc(100vh - 160px);
}
.modal-overlay.modal-lg .modal {
max-width: 960px;
}
.modal-overlay.modal-sm .modal {
max-width: 480px;
}
.modal {
background: var(--white);
border-radius: var(--radius-lg);
width: 100%;
max-width: 720px;
margin: 20px 0;
overflow: hidden;
box-shadow: var(--shadow-lg);
}
.modal-header {
padding: 18px 22px;
border-bottom: 1px solid var(--gray-200);
background: var(--gray-50);
display: flex;
align-items: center;
justify-content: space-between;
}
.modal-title {
font-size: 16px;
font-weight: 700;
color: var(--navy);
letter-spacing: -0.01em;
}
.modal-close {
width: 30px;
height: 30px;
display: flex;
align-items: center;
justify-content: center;
color: var(--gray-500);
border-radius: var(--radius);
font-size: 18px;
transition: all var(--transition);
}
.modal-close:hover {
background: var(--gray-200);
color: var(--gray-900);
}
.modal-body {
padding: 22px;
max-height: calc(100vh - 200px);
overflow-y: auto;
}
/* Modale Vétusté récupérable — choix auto / manuel */
.vetuste-mode {
display: flex;
flex-direction: column;
gap: 12px;
}
.vetuste-mode-opt {
display: flex;
align-items: flex-start;
gap: 12px;
padding: 14px;
border: 1.5px solid var(--gray-200);
border-radius: 10px;
cursor: pointer;
transition: 0.15s;
background: var(--white);
}
.vetuste-mode-opt:hover {
border-color: var(--navy);
background: var(--gray-50);
}
.vetuste-mode-opt input[type="radio"] {
margin-top: 4px;
flex-shrink: 0;
width: 18px;
height: 18px;
cursor: pointer;
accent-color: var(--navy);
}
.vetuste-mode-opt:has(input:checked) {
border-color: var(--navy);
background: rgba(18, 110, 130, 0.06);
box-shadow: 0 0 0 1px var(--navy) inset;
}
.vetuste-mode-content {
flex: 1;
}
.vetuste-mode-title {
font-weight: 700;
color: var(--gray-900);
font-size: 14px;
margin-bottom: 4px;
}
.vetuste-mode-desc {
font-size: 12.5px;
color: var(--gray-600);
line-height: 1.5;
}
.vetuste-mode-result {
margin-top: 6px;
font-size: 13px;
color: var(--navy);
font-family: "JetBrains Mono", "Menlo", monospace;
}
.modal-footer {
padding: 14px 22px;
border-top: 1px solid var(--gray-200);
background: var(--gray-50);
display: flex;
gap: 10px;
justify-content: flex-end;
}
/* TIMELINE */
.timeline {
position: relative;
padding-left: 24px;
border-left: 2px solid var(--gray-200);
}
.timeline-item {
position: relative;
padding: 12px 0;
padding-left: 18px;
}
.timeline-item::before {
content: "";
position: absolute;
left: -30px;
top: 18px;
width: 10px;
height: 10px;
background: var(--navy);
border: 2px solid white;
border-radius: 50%;
box-shadow: 0 0 0 1px var(--gray-300);
}
.timeline-item.unread::before {
background: var(--danger);
box-shadow:
0 0 0 1px var(--danger),
0 0 0 5px rgba(185, 28, 28, 0.15);
}
.timeline-item.action-mail::before {
background: var(--info);
}
.timeline-item.action-call::before {
background: var(--success);
}
.timeline-item.action-note::before {
background: var(--warning);
}
.timeline-item.action-reminder::before {
background: var(--accent);
}
.timeline-item.action-doc::before {
background: var(--steel);
}
.timeline-item.action-report::before {
background: var(--navy-light);
}
.timeline-item.action-status::before {
background: var(--gray-500);
}
.timeline-content {
background: var(--gray-50);
border: 1px solid #2f2d2a;
border-radius: var(--radius);
padding: 11px 14px;
}
.timeline-item.unread .timeline-content {
background: rgba(184, 90, 44, 0.08);
border-color: var(--danger);
}
.timeline-header {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 5px;
}
.timeline-type {
font-size: 10px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.06em;
color: var(--gray-600);
}
.timeline-date {
font-size: 11px;
color: var(--gray-500);
font-family: "JetBrains Mono", monospace;
}
.timeline-title {
font-size: 13px;
font-weight: 600;
color: var(--gray-900);
margin-bottom: 3px;
}
.timeline-body {
font-size: 13px;
color: var(--gray-700);
line-height: 1.5;
}
.timeline-actions {
display: flex;
gap: 6px;
margin-top: 8px;
}
/* ─── Timeline COMPACTE — 1 ligne par action ─── */
.timeline-compact {
padding: 0;
position: relative;
}
.timeline-compact::before {
content: "";
position: absolute;
left: 7px;
top: 6px;
bottom: 6px;
width: 1px;
background: var(--gray-200);
}
/* CHECKLIST de documents à demander */
.checklist-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 6px;
}
/* ═══ FORMULAIRE COMPLET — Cartes ═══ */
.cf-card {
background: var(--white);
border: 1px solid var(--gray-200);
border-radius: 12px;
margin-bottom: 18px;
overflow: hidden;
}
.cf-card-header {
display: flex;
align-items: center;
gap: 12px;
padding: 14px 18px;
background: linear-gradient(to right, var(--navy) 0%, var(--navy-dark) 100%);
color: white;
}
.cf-card-num {
width: 28px;
height: 28px;
display: flex;
align-items: center;
justify-content: center;
background: rgba(255, 255, 255, 0.15);
border: 1px solid rgba(255, 255, 255, 0.2);
border-radius: 50%;
font-weight: 700;
font-size: 13px;
flex-shrink: 0;
}
.cf-card-title {
font-size: 15px;
font-weight: 600;
flex: 1;
}
.cf-card-sub {
font-size: 12px;
opacity: 0.75;
}
.cf-card-body {
padding: 18px;
}
.cf-subtitle {
font-size: 11px;
font-weight: 700;
color: var(--gray-700);
text-transform: uppercase;
letter-spacing: 0.08em;
margin-bottom: 8px;
}
.cf-field {
margin-bottom: 14px;
}
.cf-field:last-child {
margin-bottom: 0;
}
.cf-field label {
display: block;
font-size: 11px;
font-weight: 600;
color: var(--gray-700);
text-transform: uppercase;
letter-spacing: 0.04em;
margin-bottom: 6px;
}
.cf-field input,
.cf-field select,
.cf-field textarea {
width: 100%;
padding: 9px 12px;
font-family: inherit;
font-size: 14px;
background: var(--white);
border: 1px solid var(--gray-200);
border-radius: 6px;
transition: border-color 120ms ease;
}
.cf-field input:focus,
.cf-field select:focus,
.cf-field textarea:focus {
outline: none;
border-color: var(--navy);
box-shadow: 0 0 0 3px rgba(18, 110, 130, 0.1);
}
.cf-field textarea {
resize: vertical;
min-height: 60px;
}
.cf-grid-2 {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 12px;
}
.cf-field-full {
grid-column: 1 / -1;
}
@media (max-width: 560px) {
.cf-grid-2 {
grid-template-columns: 1fr;
}
}
/* Chips de sélection */
.cf-chips {
display: flex;
flex-wrap: wrap;
gap: 6px;
}
.cf-chip {
padding: 6px 12px;
font-size: 12.5px;
font-weight: 500;
background: var(--white);
color: var(--gray-700);
border: 1px solid var(--gray-300);
border-radius: 16px;
cursor: pointer;
font-family: inherit;
transition: all 120ms ease;
white-space: nowrap;
}
.cf-chip:hover {
border-color: var(--navy);
background: var(--gray-50);
}
.cf-chip-active {
background: var(--navy);
color: white;
border-color: var(--navy);
box-shadow: 0 1px 3px rgba(18, 110, 130, 0.25);
}
.cf-chip-active:hover {
background: var(--navy-dark);
}
/* Chips type sinistre (couleurs métier) */
.cf-chip-typ {
background: var(--cf-bg);
color: var(--cf-text);
border-color: var(--cf-border);
}
.cf-chip-typ:hover {
filter: brightness(0.95);
}
.cf-chip-typ.cf-chip-active {
background: var(--cf-border);
color: white;
border-color: var(--cf-border);
}
/* Chips localisation et dommages */
.cf-chip-loc.cf-chip-active {
background: #0d9488;
border-color: #0d9488;
}
.cf-chip-dommage {
border-color: var(--cf-border);
color: var(--gray-700);
}
.cf-chip-dommage.cf-chip-active {
background: var(--cf-border);
color: white;
border-color: var(--cf-border);
}
/* Toggle row (checkbox + label) */
.cf-toggle-row {
display: flex;
align-items: center;
gap: 10px;
cursor: pointer;
font-size: 14px;
padding: 8px 12px;
border-radius: 6px;
}
.cf-toggle-row input[type="checkbox"] {
width: 18px;
height: 18px;
accent-color: var(--navy);
cursor: pointer;
flex-shrink: 0;
}
.cf-dommage-cat {
margin-bottom: 10px;
}
.cf-dommage-cat:last-child {
margin-bottom: 0;
}
/* Destinataires RDV */
.cf-dest-list {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
gap: 6px;
}
.cf-dest-item {
display: flex;
align-items: center;
gap: 8px;
padding: 8px 12px;
background: var(--white);
border: 1px solid var(--gray-200);
border-radius: 6px;
cursor: pointer;
font-size: 13px;
transition: all 120ms ease;
}
.cf-dest-item:hover {
border-color: var(--navy);
background: var(--gray-50);
}
.cf-dest-item:has(input:checked) {
background: rgba(18, 110, 130, 0.06);
border-color: rgba(18, 110, 130, 0.3);
}
.cf-dest-item input[type="checkbox"] {
width: 16px;
height: 16px;
accent-color: var(--navy);
flex-shrink: 0;
}
.cf-dest-item em {
font-style: normal;
color: var(--gray-500);
font-size: 11.5px;
margin-left: 4px;
}
/* RAPPEL — bloc templates */
.rappel-templates-block {
background: var(--gray-50);
border: 1px solid var(--gray-200);
border-radius: 8px;
padding: 10px 12px;
margin-bottom: 14px;
}
.rappel-templates-label {
font-size: 11px;
font-weight: 700;
color: var(--navy-dark);
text-transform: uppercase;
letter-spacing: 0.06em;
margin-bottom: 8px;
}
.rappel-templates-cat {
margin-bottom: 6px;
}
.rappel-templates-cat:last-child {
margin-bottom: 0;
}
.rappel-templates-cat-label {
font-size: 10px;
font-weight: 700;
color: var(--cat-color);
text-transform: uppercase;
letter-spacing: 0.08em;
margin-bottom: 3px;
}
.rappel-templates-chips {
display: flex;
flex-wrap: wrap;
gap: 4px;
}
.rappel-template-chip {
font-size: 11px;
font-weight: 500;
padding: 4px 10px;
background: var(--cat-bg);
color: var(--cat-color);
border: 1px solid var(--cat-border);
border-radius: 12px;
cursor: pointer;
font-family: inherit;
transition: all 120ms ease;
white-space: nowrap;
}
.rappel-template-chip:hover {
filter: brightness(0.95);
transform: translateY(-1px);
}
.rappel-template-chip-active {
background: var(--cat-color);
color: white;
border-color: var(--cat-color);
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.15);
}
/* RAPPEL — destinataires (cases à cocher) */
.rappel-dest-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 6px;
}
.rappel-dest-item {
display: flex;
align-items: center;
gap: 8px;
padding: 6px 10px;
background: var(--white);
border: 1px solid var(--gray-200);
border-radius: 6px;
cursor: pointer;
font-size: 12.5px;
transition: all 120ms ease;
}
.rappel-dest-item:hover {
border-color: var(--navy);
background: var(--gray-50);
}
.rappel-dest-item input[type="checkbox"] {
width: 16px;
height: 16px;
accent-color: var(--navy);
cursor: pointer;
}
.rappel-dest-item:has(input:checked) {
background: rgba(18, 110, 130, 0.06);
border-color: rgba(18, 110, 130, 0.3);
font-weight: 500;
}
.rappel-dest-label {
flex: 1;
color: var(--gray-800);
}
.checklist-item {
display: flex;
align-items: center;
gap: 10px;
padding: 8px 12px;
background: var(--white);
border: 1px solid var(--gray-200);
border-radius: 6px;
cursor: pointer;
transition: all 120ms ease;
position: relative;
}
.checklist-item:hover {
border-color: var(--navy);
background: var(--gray-50);
}
.checklist-item.is-checked {
background: rgba(18, 110, 130, 0.04);
border-color: rgba(18, 110, 130, 0.25);
}
.checklist-item.is-checked .checklist-item-label {
text-decoration: line-through;
color: var(--gray-500);
}
.checklist-item input[type="checkbox"] {
width: 18px;
height: 18px;
cursor: pointer;
accent-color: var(--navy);
flex-shrink: 0;
}
.checklist-item-label {
flex: 1;
font-size: 13px;
color: var(--gray-800);
}
.checklist-item-date {
font-size: 10px;
color: var(--gray-500);
white-space: nowrap;
}
.tl-row {
position: relative;
display: flex;
align-items: center;
gap: 8px;
padding: 6px 8px 6px 28px;
border-bottom: 1px solid var(--gray-100);
flex-wrap: wrap;
border-left: 3px solid transparent;
border-radius: 0 4px 4px 0;
transition: background 0.12s;
}
.tl-row:last-child {
border-bottom: none;
}
/* Couleur de fond + bordure gauche par type */
.tl-row.action-mail {
background: rgba(59, 130, 246, 0.04);
border-left-color: #3b82f6;
}
.tl-row.action-call {
background: rgba(34, 197, 94, 0.04);
border-left-color: #22c55e;
}
.tl-row.action-note {
background: rgba(245, 158, 11, 0.04);
border-left-color: #f59e0b;
}
.tl-row.action-reminder {
background: rgba(239, 68, 68, 0.05);
border-left-color: #ef4444;
}
.tl-row.action-doc {
background: rgba(100, 116, 139, 0.04);
border-left-color: #64748b;
}
.tl-row.action-sendoc {
background: rgba(99, 102, 241, 0.05);
border-left-color: #6366f1;
}
.tl-row.action-report {
background: rgba(18, 110, 130, 0.05);
border-left-color: #0F766E;
}
.tl-row.action-status {
background: rgba(168, 162, 158, 0.04);
border-left-color: #a8a29e;
}
.tl-row.action-synth {
background: rgba(124, 58, 237, 0.04);
border-left-color: #7c3aed;
}
.tl-row.action-mandat {
background: rgba(217, 119, 6, 0.05);
border-left-color: #d97706;
}
.tl-row.action-facture {
background: rgba(20, 184, 166, 0.05);
border-left-color: #14b8a6;
}
.tl-row.action-demande {
background: rgba(2, 132, 199, 0.04);
border-left-color: #0284c7;
}
.tl-row.action-creation {
background: rgba(18, 110, 130, 0.04);
border-left-color: #0F766E;
}
.tl-row.action-suivi {
background: rgba(14, 165, 233, 0.05);
border-left-color: #0ea5e9;
}
.tl-row-dot {
position: absolute;
left: 6px;
top: 14px;
width: 10px;
height: 10px;
border-radius: 50%;
background: var(--gray-400);
border: 2px solid var(--white);
box-shadow: 0 0 0 1px var(--gray-300);
cursor: pointer;
padding: 0;
transition: all 0.15s ease;
}
.tl-row-dot:hover {
transform: scale(1.4);
box-shadow:
0 0 0 1px var(--gray-500),
0 0 0 5px rgba(18, 110, 130, 0.1) !important;
}
.tl-row-dot:active {
transform: scale(1.1);
}
.tl-row.action-mail .tl-row-dot {
background: #3b82f6;
box-shadow: 0 0 0 1px #3b82f6;
}
.tl-row.action-call .tl-row-dot {
background: #22c55e;
box-shadow: 0 0 0 1px #22c55e;
}
.tl-row.action-note .tl-row-dot {
background: #f59e0b;
box-shadow: 0 0 0 1px #f59e0b;
}
.tl-row.action-reminder .tl-row-dot {
background: #ef4444;
box-shadow: 0 0 0 1px #ef4444;
}
.tl-row.action-doc .tl-row-dot {
background: #64748b;
box-shadow: 0 0 0 1px #64748b;
}
.tl-row.action-sendoc .tl-row-dot {
background: #6366f1;
box-shadow: 0 0 0 1px #6366f1;
}
.tl-row.action-suivi .tl-row-dot {
background: #0ea5e9;
box-shadow: 0 0 0 1px #0ea5e9;
}
.tl-row.action-report .tl-row-dot {
background: var(--navy);
box-shadow: 0 0 0 1px var(--navy);
}
.tl-row.action-status .tl-row-dot {
background: #a8a29e;
box-shadow: 0 0 0 1px #a8a29e;
}
.tl-row.action-synth .tl-row-dot {
background: #7c3aed;
box-shadow: 0 0 0 1px #7c3aed;
}
.tl-row.action-mandat .tl-row-dot {
background: #d97706;
box-shadow: 0 0 0 1px #d97706;
}
.tl-row.action-facture .tl-row-dot {
background: #14b8a6;
box-shadow: 0 0 0 1px #14b8a6;
}
.tl-row.action-demande .tl-row-dot {
background: #0284c7;
box-shadow: 0 0 0 1px #0284c7;
}
.tl-row.action-creation .tl-row-dot {
background: var(--navy);
box-shadow: 0 0 0 1px var(--navy);
}
.tl-row-unread .tl-row-dot {
background: #ef4444 !important;
box-shadow:
0 0 0 1px #ef4444,
0 0 0 4px rgba(239, 68, 68, 0.18) !important;
}
/* LIGNE IMPORTANTE — barre horizontale colorée + pastille pleine avec anneau */
.tl-row-important {
border-left-width: 5px !important;
box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.05);
}
.tl-row-important .tl-row-dot {
width: 14px;
height: 14px;
transform: scale(1);
box-shadow:
0 0 0 3px currentColor,
0 0 0 4px var(--white) !important;
}
.tl-row-important.action-mail {
background: rgba(59, 130, 246, 0.18);
}
.tl-row-important.action-mail .tl-row-dot {
color: #3b82f6;
}
.tl-row-important.action-call {
background: rgba(34, 197, 94, 0.18);
}
.tl-row-important.action-call .tl-row-dot {
color: #22c55e;
}
.tl-row-important.action-note {
background: rgba(245, 158, 11, 0.2);
}
.tl-row-important.action-note .tl-row-dot {
color: #f59e0b;
}
.tl-row-important.action-reminder {
background: rgba(239, 68, 68, 0.2);
}
.tl-row-important.action-reminder .tl-row-dot {
color: #ef4444;
}
.tl-row-important.action-doc {
background: rgba(100, 116, 139, 0.18);
}
.tl-row-important.action-doc .tl-row-dot {
color: #64748b;
}
.tl-row-important.action-sendoc {
background: rgba(99, 102, 241, 0.18);
}
.tl-row-important.action-sendoc .tl-row-dot {
color: #6366f1;
}
.tl-row-important.action-report {
background: rgba(18, 110, 130, 0.18);
}
.tl-row-important.action-report .tl-row-dot {
color: var(--navy);
}
.tl-row-important.action-status {
background: rgba(168, 162, 158, 0.2);
}
.tl-row-important.action-status .tl-row-dot {
color: #a8a29e;
}
.tl-row-important.action-synth {
background: rgba(124, 58, 237, 0.18);
}
.tl-row-important.action-synth .tl-row-dot {
color: #7c3aed;
}
.tl-row-important.action-mandat {
background: rgba(217, 119, 6, 0.18);
}
.tl-row-important.action-mandat .tl-row-dot {
color: #d97706;
}
.tl-row-important.action-facture {
background: rgba(20, 184, 166, 0.18);
}
.tl-row-important.action-facture .tl-row-dot {
color: #14b8a6;
}
.tl-row-important.action-demande {
background: rgba(2, 132, 199, 0.18);
}
.tl-row-important.action-demande .tl-row-dot {
color: #0284c7;
}
.tl-row-important.action-creation {
background: rgba(18, 110, 130, 0.18);
}
.tl-row-important.action-creation .tl-row-dot {
color: var(--navy);
}
.tl-row-important .tl-row-title {
font-weight: 700;
}
.tl-row-main {
display: flex;
flex-wrap: wrap;
align-items: flex-start;
gap: 4px 10px;
flex: 1;
min-width: 0;
padding: 2px 0;
}
.tl-row-main:hover {
background: rgba(255, 255, 255, 0.5);
border-radius: 4px;
}
.tl-row-left {
display: flex;
align-items: flex-start;
flex-wrap: wrap;
gap: 6px 8px;
flex-basis: 100%;
width: 100%;
min-width: 0;
}
.tl-row-type {
font-size: 9.5px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.05em;
color: var(--gray-700);
padding: 2px 6px;
border-radius: 4px;
background: var(--white);
flex-shrink: 0;
border: 1px solid var(--gray-200);
}
/* Badges colorés par type */
.tl-row.action-mail .tl-row-type {
background: rgba(59, 130, 246, 0.12);
color: #1e40af;
border-color: rgba(59, 130, 246, 0.25);
}
.tl-row.action-call .tl-row-type {
background: rgba(34, 197, 94, 0.12);
color: #15803d;
border-color: rgba(34, 197, 94, 0.25);
}
.tl-row.action-note .tl-row-type {
background: rgba(245, 158, 11, 0.12);
color: #92400e;
border-color: rgba(245, 158, 11, 0.25);
}
.tl-row.action-reminder .tl-row-type {
background: rgba(239, 68, 68, 0.12);
color: #991b1b;
border-color: rgba(239, 68, 68, 0.25);
}
.tl-row.action-doc .tl-row-type {
background: rgba(100, 116, 139, 0.12);
color: #334155;
border-color: rgba(100, 116, 139, 0.25);
}
.tl-row.action-sendoc .tl-row-type {
background: rgba(99, 102, 241, 0.12);
color: #3730a3;
border-color: rgba(99, 102, 241, 0.25);
}
.tl-row.action-report .tl-row-type {
background: rgba(18, 110, 130, 0.12);
color: var(--navy-dark);
border-color: rgba(18, 110, 130, 0.25);
}
.tl-row.action-status .tl-row-type {
background: rgba(168, 162, 158, 0.18);
color: #57534e;
border-color: rgba(168, 162, 158, 0.35);
}
.tl-row.action-synth .tl-row-type {
background: rgba(124, 58, 237, 0.12);
color: #6b21a8;
border-color: rgba(124, 58, 237, 0.25);
}
.tl-row.action-mandat .tl-row-type {
background: rgba(217, 119, 6, 0.12);
color: #92400e;
border-color: rgba(217, 119, 6, 0.25);
}
.tl-row.action-facture .tl-row-type {
background: rgba(20, 184, 166, 0.12);
color: #0F766E;
border-color: rgba(20, 184, 166, 0.25);
}
.tl-row.action-demande .tl-row-type {
background: rgba(2, 132, 199, 0.12);
color: #075985;
border-color: rgba(2, 132, 199, 0.25);
}
.tl-row.action-creation .tl-row-type {
background: rgba(18, 110, 130, 0.12);
color: var(--navy-dark);
border-color: rgba(18, 110, 130, 0.25);
}
.tl-row-unread .tl-row-type {
background: rgba(239, 68, 68, 0.12);
color: #991b1b;
border-color: rgba(239, 68, 68, 0.25);
}
.tl-row-title {
font-size: 13px;
font-weight: 600;
color: var(--gray-900);
white-space: normal;
overflow-wrap: anywhere;
word-break: normal;
flex: 1 1 280px;
min-width: 0;
line-height: 1.35;
padding-top: 2px;
}
.tl-row-sub {
font-size: 11.5px;
color: var(--gray-500);
font-weight: 400;
white-space: normal;
overflow-wrap: anywhere;
word-break: normal;
flex: 1 1 100%;
min-width: 0;
line-height: 1.35;
}
.tl-row-pj {
font-size: 10.5px;
color: var(--gray-600);
background: rgba(255, 255, 255, 0.7);
padding: 1px 6px;
border-radius: 8px;
font-weight: 500;
flex-shrink: 0;
border: 1px solid var(--gray-200);
}
.tl-row-right {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 6px 8px;
width: 100%;
flex-basis: 100%;
justify-content: flex-start;
padding-top: 2px;
padding-left: 0;
}
.tl-row-date {
font-family: "JetBrains Mono", "Menlo", monospace;
font-size: 10.5px;
color: var(--gray-500);
white-space: nowrap;
}
.tl-row-chevron {
color: var(--gray-400);
font-size: 11px;
transition: transform 0.15s;
}
.tl-row-actions {
display: flex;
gap: 4px;
flex-shrink: 0;
align-items: center;
flex-wrap: wrap;
}
.tl-row-right .btn {
font-size: 10.5px;
padding: 2px 7px;
line-height: 1.4;
}
.tl-row-right .tl-row-actions .btn {
font-size: 10.5px;
}
/* Bouton "+ Rappel" sur chaque action — couleur rouge subtile */
.btn.tl-quick-rappel {
color: #991b1b !important;
background: rgba(239, 68, 68, 0.08);
border: 1px solid rgba(239, 68, 68, 0.2);
}
.btn.tl-quick-rappel:hover {
background: rgba(239, 68, 68, 0.15);
border-color: rgba(239, 68, 68, 0.35);
color: #7f1d1d !important;
}
/* Quick Rappel — presets boutons */
.qr-presets {
display: flex;
gap: 6px;
flex-wrap: wrap;
margin-top: 4px;
}
.qr-preset {
background: var(--gray-100);
border: 1px solid var(--gray-200);
padding: 7px 12px;
border-radius: 6px;
font-size: 12.5px;
font-weight: 500;
color: var(--gray-700);
cursor: pointer;
transition: all 0.12s;
}
.qr-preset:hover {
background: var(--gray-200);
border-color: var(--gray-300);
}
.qr-preset.qr-preset-active {
background: var(--navy);
color: white;
border-color: var(--navy);
font-weight: 600;
}
.tl-row-expand {
flex-basis: 100%;
margin-top: 6px;
padding: 10px 12px;
background: var(--gray-50);
border-radius: 6px;
border: 1px solid var(--gray-200);
}
.tl-row-details {
font-size: 13px;
color: var(--gray-700);
line-height: 1.55;
margin-bottom: 8px;
}
.tl-row-details:last-child {
margin-bottom: 0;
}
.tl-row-attach {
display: flex;
flex-direction: column;
gap: 4px;
margin-top: 6px;
}
.tl-attach-line {
display: flex;
align-items: center;
padding: 5px 8px;
background: var(--white);
border: 1px solid var(--gray-200);
border-radius: 4px;
font-size: 12px;
}
.btn.btn-xs {
padding: 3px 8px;
font-size: 11px;
min-height: auto;
line-height: 1.2;
}
/* Timeline — Détails enrichis par type d'action */
.tl-detail-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 8px 14px;
margin-bottom: 8px;
}
.tl-detail-row {
display: flex;
flex-direction: column;
gap: 2px;
padding: 6px 8px;
background: var(--white);
border-radius: 4px;
border: 1px solid var(--gray-200);
}
.tl-detail-row-full {
grid-column: 1 / -1;
}
.tl-detail-label {
font-size: 10px;
font-weight: 600;
color: var(--gray-500);
text-transform: uppercase;
letter-spacing: 0.04em;
}
.tl-detail-value {
font-size: 13px;
color: var(--gray-900);
font-weight: 500;
word-break: break-word;
}
.tl-detail-text {
font-size: 13px;
color: var(--gray-700);
line-height: 1.5;
word-break: break-word;
}
.tl-piece-preview {
margin-top: 10px;
padding-top: 10px;
border-top: 1px dashed var(--gray-200);
}
.tl-piece-thumb {
max-width: 200px;
max-height: 150px;
border-radius: 4px;
border: 1px solid var(--gray-200);
cursor: pointer;
transition: transform 150ms ease;
}
.tl-piece-thumb:hover {
transform: scale(1.04);
border-color: var(--navy);
}
.tl-piece-card {
display: flex;
align-items: center;
gap: 10px;
padding: 10px 12px;
background: var(--gray-50);
border-radius: 6px;
border: 1px solid var(--gray-200);
max-width: 340px;
cursor: pointer;
transition: all 150ms ease;
}
.tl-piece-card:hover {
background: var(--white);
border-color: var(--navy);
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}
.tl-piece-card-info {
flex: 1;
min-width: 0;
}
.tl-piece-card-name {
font-size: 13px;
font-weight: 600;
color: var(--text);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.tl-piece-card-hint {
font-size: 11px;
color: var(--gray-500);
margin-top: 2px;
}
.rdv-participants-display {
padding: 6px 10px;
background: rgba(13, 148, 136, 0.08);
border-left: 3px solid #0d9488;
border-radius: 4px;
font-size: 13px;
color: var(--text);
}
/* ─── BADGES TYPE FICHIER (timeline + ailleurs) ─── */
.tl-badge {
display: inline-flex;
align-items: center;
justify-content: center;
height: 18px;
padding: 0 7px;
font-size: 10px;
font-weight: 800;
border-radius: 3px;
letter-spacing: 0.04em;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", monospace;
flex-shrink: 0;
}
.badge-img {
background: #dbeafe;
color: #1e40af;
border: 1px solid #93c5fd;
}
.badge-pdf {
background: #fee2e2;
color: #991b1b;
border: 1px solid #fca5a5;
}
.badge-doc {
background: #e0e7ff;
color: #3730a3;
border: 1px solid #a5b4fc;
}
.badge-xls {
background: #dcfce7;
color: #166534;
border: 1px solid #86efac;
}
.badge-mail {
background: #fef3c7;
color: #92400e;
border: 1px solid #fcd34d;
}
.badge-file {
background: var(--gray-100);
color: var(--gray-700);
border: 1px solid var(--gray-300);
}
.tl-row-badges {
display: inline-flex;
gap: 4px;
margin-left: 0;
flex-shrink: 1;
flex-wrap: wrap;
max-width: 100%;
min-width: 0;
}
.tl-badge.badge-overflow {
background: var(--gray-100);
color: var(--gray-600);
border: 1px dashed var(--gray-300);
font-size: 10px;
font-weight: 700;
cursor: help;
}
/* Petit bouton triangle qui déplie les pièces / suggestions */
.tl-pieces-toggle {
display: inline-flex;
align-items: center;
gap: 4px;
margin-left: 6px;
padding: 2px 8px;
background: rgba(18, 110, 130, 0.08);
border: 1px solid rgba(18, 110, 130, 0.25);
border-radius: 10px;
font-family: inherit;
font-size: 11px;
font-weight: 600;
color: var(--navy-dark);
cursor: pointer;
transition: all 120ms ease;
white-space: nowrap;
vertical-align: middle;
}
.tl-pieces-toggle:hover {
background: var(--navy);
color: white;
border-color: var(--navy);
}
.tl-pieces-toggle-chevron {
font-size: 10px;
line-height: 1;
transition: transform 120ms ease;
}
.tl-pieces-toggle-suggest {
background: rgba(245, 158, 11, 0.1);
border-color: rgba(245, 158, 11, 0.35);
color: #92400e;
}
.tl-pieces-toggle-suggest:hover {
background: #f59e0b;
color: white;
border-color: #f59e0b;
}
/* Badge cliquable (pour les pièces dans le fil de vie) */
.tl-badge-clickable {
cursor: pointer;
transition: all 120ms ease;
}
.tl-badge-clickable:hover {
transform: scale(1.08);
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12);
filter: brightness(0.95);
}
.tl-badge-clickable:active {
transform: scale(0.96);
}
/* Mini-tuiles permanentes de pièces liées (visible sans déplier) */
.tl-pieces-row {
flex-basis: 100%;
width: 100%;
flex-wrap: wrap;
gap: 6px;
padding: 8px 12px;
margin-top: 4px;
background: linear-gradient(to right, rgba(18, 110, 130, 0.04), transparent);
border-left: 3px solid var(--navy);
border-radius: 0 4px 4px 0;
}
.tl-piece-tile {
display: flex;
align-items: center;
gap: 6px;
padding: 4px 8px 4px 4px;
background: var(--white);
border: 1px solid var(--gray-200);
border-radius: 4px;
cursor: pointer;
transition: all 150ms ease;
max-width: 220px;
}
.tl-piece-tile.tl-piece-tile-suggested {
background: rgba(245, 158, 11, 0.06);
border-color: #fcd34d;
}
.tl-piece-tile:hover {
border-color: var(--navy);
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
transform: translateY(-1px);
}
.tl-piece-tile.tl-piece-tile-suggested:hover {
border-color: #f59e0b;
background: #fef3c7;
}
.tl-piece-tile img {
width: 28px;
height: 28px;
object-fit: cover;
border-radius: 3px;
flex-shrink: 0;
}
.tl-piece-tile-name {
font-size: 11px;
color: var(--gray-700);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
max-width: 160px;
}
/* Suggestions de pièces à rattacher (pas de pièce liée + matching trouvé) */
.tl-pieces-suggest {
flex-basis: 100%;
width: 100%;
flex-wrap: wrap;
gap: 6px;
align-items: center;
padding: 8px 12px;
margin-top: 4px;
background: rgba(245, 158, 11, 0.06);
border-left: 3px dashed #f59e0b;
border-radius: 0 4px 4px 0;
}
.tl-pieces-suggest-label {
font-size: 10px;
font-weight: 700;
color: #92400e;
text-transform: uppercase;
letter-spacing: 0.04em;
margin-right: 4px;
flex-basis: 100%;
}
.tl-pieces-suggest-more {
padding: 6px 10px 6px 8px;
font-size: 11px;
font-weight: 600;
background: var(--white);
color: var(--gray-700);
border: 1px dashed var(--gray-300);
border-radius: 4px;
cursor: pointer;
font-family: inherit;
transition: all 120ms ease;
}
.tl-pieces-suggest-more:hover {
background: var(--gray-100);
border-style: solid;
border-color: var(--gray-500);
}
/* Pièces liées listées dans le panel déplié (avec bouton détacher) */
.tl-linked-pieces {
margin-top: 10px;
padding-top: 10px;
border-top: 1px dashed var(--gray-200);
}
.tl-linked-piece {
display: flex;
align-items: center;
gap: 10px;
padding: 8px 10px;
background: var(--white);
border: 1px solid var(--gray-200);
border-radius: 4px;
margin-bottom: 4px;
}
.tl-linked-piece-preview {
width: 42px;
height: 42px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 4px;
overflow: hidden;
background: var(--gray-50);
cursor: pointer;
flex-shrink: 0;
transition: transform 150ms ease;
}
.tl-linked-piece-preview:hover {
transform: scale(1.05);
}
.tl-linked-piece-preview img {
width: 100%;
height: 100%;
object-fit: cover;
}
.tl-linked-piece-info {
flex: 1;
min-width: 0;
}
.tl-linked-piece-name {
font-size: 12px;
font-weight: 600;
color: var(--text);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.tl-linked-piece-meta {
font-size: 11px;
color: var(--gray-500);
margin-top: 2px;
}
/* Options de pièces dans la modale de rattachement */
.piece-link-option {
display: flex;
align-items: center;
gap: 10px;
padding: 10px 12px;
background: var(--white);
border: 1px solid var(--gray-200);
border-radius: 6px;
cursor: pointer;
transition: all 150ms ease;
position: relative;
}
.piece-link-option:hover {
border-color: var(--navy);
background: var(--gray-50);
transform: translateX(2px);
}
.piece-link-option-suggested {
border-color: #fcd34d;
background: rgba(245, 158, 11, 0.05);
}
.piece-link-thumb {
width: 50px;
height: 50px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 4px;
overflow: hidden;
background: var(--gray-50);
flex-shrink: 0;
}
.piece-link-thumb img {
width: 100%;
height: 100%;
object-fit: cover;
}
.piece-link-info {
flex: 1;
min-width: 0;
}
.piece-link-name {
font-size: 13px;
font-weight: 600;
color: var(--text);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.piece-link-meta {
font-size: 11px;
color: var(--gray-500);
margin-top: 2px;
}
.piece-link-tag {
position: absolute;
top: 6px;
right: 8px;
padding: 2px 8px;
font-size: 9px;
font-weight: 700;
background: #f59e0b;
color: white;
border-radius: 8px;
text-transform: uppercase;
letter-spacing: 0.06em;
}
/* ─── TIMELINE V2 — Groupes par date ─── */
.timeline-v2 {
display: flex;
flex-direction: column;
gap: 18px;
}
.tl-group {
display: flex;
flex-direction: column;
}
.tl-group-label {
font-size: 10px;
font-weight: 700;
color: var(--gray-500);
letter-spacing: 0.12em;
padding: 0 0 8px 4px;
border-bottom: 1px solid var(--gray-100);
margin-bottom: 6px;
}
.tl-group-items {
display: flex;
flex-direction: column;
}
/* STATUS BADGES */
.status {
display: inline-block;
padding: 4px 11px;
font-size: 11px;
font-weight: 700;
border-radius: 11px;
letter-spacing: 0.04em;
text-transform: uppercase;
border: 1.5px solid currentColor;
}
.status-ouvert {
background: #e0f2fe;
color: #075985;
}
.status-attente {
background: #fef3c7;
color: #92400e;
}
.status-rdv {
background: #e0f2fe;
color: #075985;
}
.status-rapport {
background: #e0f2fe;
color: #075985;
}
.status-accord {
background: #dcfce7;
color: #166534;
}
.status-facture {
background: #dcfce7;
color: #166534;
}
.status-cloture {
background: #e5e7eb;
color: #374151;
}
.status-contact-complete {
background: #fee2e2;
color: #991b1b;
}
/* QUICK ACTIONS BAR */
.action-bar {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 8px;
margin-bottom: 16px;
}
@media (min-width: 640px) {
.action-bar {
grid-template-columns: repeat(4, 1fr);
}
}
@media (min-width: 640px) {
.action-bar.action-bar-5 {
grid-template-columns: repeat(5, 1fr);
}
}
.action-btn {
background: var(--white);
border: 1px solid var(--gray-300);
padding: 14px 12px;
border-radius: var(--radius-lg);
display: flex;
flex-direction: column;
align-items: center;
gap: 5px;
font-size: 11px;
font-weight: 600;
color: var(--gray-700);
text-transform: uppercase;
letter-spacing: 0.04em;
transition: all var(--transition);
cursor: pointer;
}
.action-btn:hover {
border-color: var(--navy);
background: var(--gray-50);
}
.action-btn-mark {
font-size: 18px;
font-weight: 700;
color: var(--navy);
letter-spacing: -0.02em;
}
/* Menu déroulant '+ Autre action' */
.more-act-cat {
font-size: 10px;
letter-spacing: 0.5px;
text-transform: uppercase;
color: var(--gray-500);
font-weight: 700;
padding: 8px 11px 5px;
}
.more-act-item {
display: flex;
align-items: center;
gap: 10px;
width: 100%;
text-align: left;
padding: 8px 11px;
border: none;
background: transparent;
cursor: pointer;
font-family: inherit;
font-size: 12.5px;
color: var(--gray-700);
border-radius: 7px;
font-weight: 500;
transition:
background 0.12s,
color 0.12s;
}
.more-act-item:hover {
background: var(--gray-50);
color: var(--navy);
}
.more-act-item svg {
width: 15px;
height: 15px;
color: var(--gray-500);
flex-shrink: 0;
transition: color 0.12s;
}
.more-act-item:hover svg {
color: var(--navy);
}
/* Codes couleur par type d'action (cohérence avec les badges timeline) */
.more-act-item {
border-left: 3px solid transparent;
padding-left: 8px;
}
.more-act-call {
border-left-color: #16a34a;
}
.more-act-call:hover {
background: rgba(22, 163, 74, 0.06);
}
.more-act-call svg {
color: #16a34a;
}
.more-act-doc {
border-left-color: #0891b2;
}
.more-act-doc:hover {
background: rgba(8, 145, 178, 0.06);
}
.more-act-doc svg {
color: #0891b2;
}
.more-act-sendoc {
border-left-color: #7c3aed;
}
.more-act-sendoc:hover {
background: rgba(124, 58, 237, 0.06);
}
.more-act-sendoc svg {
color: #7c3aed;
}
.more-act-importmail {
border-left-color: #0284c7;
}
.more-act-importmail:hover {
background: rgba(2, 132, 199, 0.06);
}
.more-act-importmail svg {
color: #0284c7;
}
.more-act-report {
border-left-color: #15803d;
}
.more-act-report:hover {
background: rgba(21, 128, 61, 0.06);
}
.more-act-report svg {
color: #15803d;
}
.more-act-synth {
border-left-color: #7c3aed;
}
.more-act-synth:hover {
background: rgba(124, 58, 237, 0.06);
}
.more-act-synth svg {
color: #7c3aed;
}
.more-act-facture {
border-left-color: #dc2626;
}
.more-act-facture:hover {
background: rgba(220, 38, 38, 0.06);
}
.more-act-facture svg {
color: #dc2626;
}
.more-act-reglement {
border-left-color: #d97706;
}
.more-act-reglement:hover {
background: rgba(217, 119, 6, 0.06);
}
.more-act-reglement svg {
color: #d97706;
}
.more-act-suivi {
border-left-color: #0ea5e9;
}
.more-act-suivi:hover {
background: rgba(14, 165, 233, 0.06);
}
.more-act-suivi svg {
color: #0ea5e9;
}
.more-act-fiche {
border-left-color: #0F766E;
}
.more-act-fiche:hover {
background: rgba(18, 110, 130, 0.06);
}
.more-act-fiche svg {
color: #0F766E;
}
.action-btn-label {
font-size: 12.5px;
font-weight: 600;
color: var(--gray-800);
text-transform: none;
letter-spacing: 0.01em;
text-align: center;
line-height: 1.3;
}
/* Action bar 3 colonnes (9 boutons => 3x3 sur desktop, 2 cols sur mobile) */
.action-bar-3rows {
grid-template-columns: repeat(3, 1fr);
}
@media (min-width: 640px) {
.action-bar.action-bar-3rows {
grid-template-columns: repeat(3, 1fr);
}
}
@media (min-width: 1024px) {
.action-bar.action-bar-3rows {
grid-template-columns: repeat(5, 1fr);
}
}
/* Boutons d'action colorés — couleur dominante via une bordure gauche épaisse + label tinted */
.action-btn-mail {
border-color: rgba(59, 130, 246, 0.35);
background: rgba(59, 130, 246, 0.06);
border-left: 4px solid #3b82f6;
}
.action-btn-mail .action-btn-label {
color: #1e40af;
}
.action-btn-mail:hover {
background: rgba(59, 130, 246, 0.14);
border-color: #3b82f6;
border-left-color: #3b82f6;
}
.action-btn-call {
border-color: rgba(34, 197, 94, 0.35);
background: rgba(34, 197, 94, 0.06);
border-left: 4px solid #22c55e;
}
.action-btn-call .action-btn-label {
color: #15803d;
}
.action-btn-call:hover {
background: rgba(34, 197, 94, 0.14);
border-color: #22c55e;
border-left-color: #22c55e;
}
.action-btn-note {
border-color: rgba(245, 158, 11, 0.4);
background: #fff4d0;
border-left: 4px solid #f59e0b;
}
.action-btn-note .action-btn-label {
color: #92400e;
}
.action-btn-note:hover {
background: #fce9a8;
border-color: #f59e0b;
border-left-color: #f59e0b;
}
.action-btn-reminder {
border-color: rgba(239, 68, 68, 0.35);
background: rgba(239, 68, 68, 0.06);
border-left: 4px solid #ef4444;
}
.action-btn-reminder .action-btn-label {
color: #991b1b;
}
.action-btn-reminder:hover {
background: rgba(239, 68, 68, 0.14);
border-color: #ef4444;
border-left-color: #ef4444;
}
.action-btn-doc {
border-color: rgba(56, 138, 184, 0.4);
background: #dceef5;
border-left: 4px solid #388ab8;
}
.action-btn-doc .action-btn-label {
color: #0c4a6e;
}
.action-btn-doc:hover {
background: #b8dded;
border-color: #388ab8;
border-left-color: #388ab8;
}
.action-btn-sendoc {
border-color: rgba(122, 108, 177, 0.4);
background: #d4cfe8;
border-left: 4px solid #7a6cb1;
}
.action-btn-sendoc .action-btn-label {
color: #3730a3;
}
.action-btn-sendoc:hover {
background: #bbb1d9;
border-color: #7a6cb1;
border-left-color: #7a6cb1;
}
.action-btn-report {
border-color: rgba(95, 140, 95, 0.4);
background: #c5dbc5;
border-left: 4px solid #5f8c5f;
}
.action-btn-report .action-btn-label {
color: #1f4d1f;
}
.action-btn-report:hover {
background: #a8c8a8;
border-color: #5f8c5f;
border-left-color: #5f8c5f;
}
.action-btn-synth {
border-color: rgba(124, 58, 237, 0.35);
background: rgba(124, 58, 237, 0.06);
border-left: 4px solid #7c3aed;
}
.action-btn-synth .action-btn-label {
color: #6b21a8;
}
.action-btn-synth:hover {
background: rgba(124, 58, 237, 0.14);
border-color: #7c3aed;
border-left-color: #7c3aed;
}
.action-btn-mandat {
border-color: rgba(217, 119, 6, 0.35);
background: rgba(217, 119, 6, 0.06);
border-left: 4px solid #d97706;
}
.action-btn-mandat .action-btn-label {
color: #92400e;
}
.action-btn-mandat:hover {
background: rgba(217, 119, 6, 0.14);
border-color: #d97706;
border-left-color: #d97706;
}
.action-btn-assure {
border-color: rgba(14, 165, 233, 0.4);
background: rgba(14, 165, 233, 0.08);
border-left: 4px solid #0ea5e9;
}
.action-btn-assure .action-btn-label {
color: #0c4a6e;
}
.action-btn-assure:hover {
background: rgba(14, 165, 233, 0.18);
border-color: #0ea5e9;
border-left-color: #0ea5e9;
}
.action-btn-reglement {
border-color: rgba(8, 145, 178, 0.35);
background: rgba(8, 145, 178, 0.06);
border-left: 4px solid #0891b2;
}
.action-btn-reglement .action-btn-label {
color: #155e75;
}
.action-btn-reglement:hover {
background: rgba(8, 145, 178, 0.14);
border-color: #0891b2;
border-left-color: #0891b2;
}
.action-btn-fiche {
border-color: rgba(31, 78, 121, 0.35);
background: rgba(31, 78, 121, 0.06);
border-left: 4px solid #1f4e79;
}
.action-btn-fiche .action-btn-label {
color: #1f4e79;
}
.action-btn-fiche:hover {
background: rgba(31, 78, 121, 0.14);
border-color: #1f4e79;
border-left-color: #1f4e79;
}
.action-btn-facture {
border-color: rgba(20, 184, 166, 0.35);
background: rgba(20, 184, 166, 0.06);
border-left: 4px solid #14b8a6;
}
.action-btn-facture .action-btn-label {
color: #0F766E;
}
.action-btn-facture:hover {
background: rgba(20, 184, 166, 0.14);
border-color: #14b8a6;
border-left-color: #14b8a6;
}
.action-btn-status {
border-color: rgba(168, 162, 158, 0.4);
background: rgba(168, 162, 158, 0.05);
border-left: 4px solid #a8a29e;
}
.action-btn-status .action-btn-label {
color: #57534e;
}
.action-btn-status:hover {
background: rgba(168, 162, 158, 0.15);
border-color: #a8a29e;
}
.action-btn-rdv {
border-color: rgba(13, 148, 136, 0.35);
background: rgba(13, 148, 136, 0.06);
border-left: 4px solid #0d9488;
}
.action-btn-rdv .action-btn-label {
color: #115e59;
}
.action-btn-rdv:hover {
background: rgba(13, 148, 136, 0.14);
border-color: #0d9488;
border-left-color: #0d9488;
}
/* CLÔTURER — noir (conditions OK) */
.action-btn-cloturer {
border-color: #0f172a;
background: #0f172a;
border-left: 4px solid #000;
}
.action-btn-cloturer .action-btn-label {
color: white;
font-weight: 600;
}
.action-btn-cloturer:hover {
background: #000;
border-color: #000;
}
/* CLÔTURER SANS MANDAT — rouge foncé */
.action-btn-cloturer-sans-mandat {
border-color: #7f1d1d;
background: #991b1b;
border-left: 4px solid #7f1d1d;
}
.action-btn-cloturer-sans-mandat .action-btn-label {
color: white;
font-weight: 600;
}
.action-btn-cloturer-sans-mandat:hover {
background: #7f1d1d;
border-color: #7f1d1d;
}
/* CLÔTURER DISABLED — gris désactivé */
.action-btn-cloturer-disabled {
border-color: var(--gray-200);
background: var(--gray-50);
border-left: 4px solid var(--gray-300);
cursor: not-allowed;
opacity: 0.65;
}
.action-btn-cloturer-disabled .action-btn-label {
color: var(--gray-500);
font-weight: 500;
}
.action-btn-cloturer-disabled:hover {
background: var(--gray-50);
}
/* RÉOUVRIR — blanc avec bordure noire (si dossier clôturé) */
.action-btn-decloturer {
border-color: #0f172a;
background: white;
border-left: 4px solid #0f172a;
}
.action-btn-decloturer .action-btn-label {
color: #0f172a;
font-weight: 600;
}
.action-btn-decloturer:hover {
background: #f1f5f9;
border-color: #000;
border-left-color: #000;
}
/* PANNEAU "État de clôture" sous la grille d'actions */
.cloture-panel {
margin-top: 14px;
padding: 14px 16px;
border-radius: 10px;
display: flex;
gap: 14px;
align-items: flex-start;
}
.cloture-panel-ready {
background: rgba(18, 110, 130, 0.08);
border: 1px solid rgba(18, 110, 130, 0.3);
}
.cloture-panel-ready .cloture-panel-icon {
color: var(--navy);
}
.cloture-panel-ready .cloture-panel-text {
color: var(--navy-dark);
font-size: 13.5px;
line-height: 1.5;
}
.cloture-panel-warning {
background: rgba(245, 158, 11, 0.08);
border: 1px solid rgba(245, 158, 11, 0.35);
}
.cloture-panel-warning .cloture-panel-icon {
color: #b45309;
}
.cloture-panel-warning .cloture-panel-text {
color: #78350f;
font-size: 13.5px;
line-height: 1.5;
}
.cloture-panel-incomplete {
background: var(--gray-50);
border: 1px solid var(--gray-200);
flex-direction: column;
gap: 10px;
}
.cloture-panel-icon {
font-size: 20px;
width: 32px;
height: 32px;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.cloture-panel-text {
flex: 1;
}
.cloture-panel-title {
font-size: 11px;
font-weight: 700;
color: var(--gray-700);
text-transform: uppercase;
letter-spacing: 0.06em;
}
.cloture-panel-conditions {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
gap: 6px;
}
.cloture-cond {
display: flex;
align-items: center;
gap: 8px;
padding: 7px 10px;
background: white;
border: 1px solid var(--gray-200);
border-radius: 6px;
font-size: 13px;
}
.cloture-cond-mark {
width: 20px;
height: 20px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
font-weight: 700;
font-size: 13px;
flex-shrink: 0;
}
.cloture-cond-ok {
background: rgba(18, 110, 130, 0.06);
border-color: rgba(18, 110, 130, 0.25);
}
.cloture-cond-ok .cloture-cond-mark {
background: var(--navy);
color: white;
}
.cloture-cond-ok .cloture-cond-label {
color: var(--gray-800);
}
.cloture-cond-missing .cloture-cond-mark {
background: var(--gray-100);
color: var(--gray-500);
border: 1px solid var(--gray-300);
}
.cloture-cond-missing .cloture-cond-label {
color: var(--gray-700);
font-weight: 500;
}
/* Boutons de préréglage rapide pour modale RDV (et autres) */
.btn-preset {
padding: 5px 10px;
font-size: 11px;
font-weight: 600;
background: var(--bg);
color: var(--gray-700);
border: 1px solid var(--gray-300);
border-radius: 14px;
cursor: pointer;
transition: all 120ms ease;
}
.btn-preset:hover {
background: #0d9488;
color: white;
border-color: #0d9488;
}
.btn-preset:active {
transform: scale(0.96);
}
/* ─── PIÈCES DOSSIER (vue CRM) ─── */
.crm-piece-tile {
position: relative;
width: 110px;
border: 1px solid var(--border);
border-radius: 6px;
overflow: hidden;
background: var(--bg);
transition: all 150ms ease;
}
.crm-piece-tile:hover {
border-color: var(--navy);
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
transform: translateY(-1px);
}
.crm-piece-reclassify {
position: absolute;
top: 4px;
right: 4px;
width: 22px;
height: 22px;
display: flex;
align-items: center;
justify-content: center;
background: rgba(0, 0, 0, 0.55);
color: #fff;
border: none;
border-radius: 50%;
font-size: 14px;
line-height: 1;
cursor: pointer;
opacity: 0;
transition: opacity 150ms ease;
z-index: 2;
}
.crm-piece-tile:hover .crm-piece-reclassify,
.crm-piece-reclassify:focus {
opacity: 1;
}
.crm-piece-reclassify:hover {
background: rgba(0, 0, 0, 0.85);
}
/* Sur mobile (pas de hover) : toujours visible */
@media (hover: none) {
.crm-piece-reclassify {
opacity: 0.7;
}
}
/* ─── IMPORT RAPIDE MAIL ─── */
.action-btn-importmail {
border-color: rgba(166, 140, 99, 0.4);
background: #ede5d5;
border-left: 4px solid #a68c63;
}
.action-btn-importmail .action-btn-label {
color: #5c4a2e;
}
.action-btn-importmail:hover {
background: #dccfb5;
border-color: #a68c63;
border-left-color: #a68c63;
}
/* Bouton Suivi client (espace assuré — couleur cyan/bleu pour le distinguer) */
.action-btn-suivi {
border-color: rgba(14, 165, 233, 0.35);
background: rgba(14, 165, 233, 0.08);
border-left: 4px solid #0ea5e9;
}
.action-btn-suivi .action-btn-label {
color: #0369a1;
}
.action-btn-suivi:hover {
background: rgba(14, 165, 233, 0.18);
border-color: #0ea5e9;
border-left-color: #0ea5e9;
}
.import-mail-dropzone {
border: 2px dashed var(--gray-300);
border-radius: 8px;
padding: 30px 20px;
text-align: center;
background: var(--gray-50);
transition: all 150ms ease;
}
.import-mail-dropzone.drag {
border-color: var(--navy);
background: rgba(18, 110, 130, 0.08);
transform: scale(1.01);
}
.import-mail-dropzone-icon {
font-size: 36px;
opacity: 0.7;
}
.import-mail-dropzone-text {
font-size: 14px;
font-weight: 600;
color: var(--gray-700);
margin-top: 6px;
}
.import-mail-dropzone-sub {
font-size: 11px;
color: var(--gray-500);
margin: 6px 0 8px;
}
.import-mail-file-list {
max-height: 240px;
overflow-y: auto;
border: 1px solid var(--gray-200);
border-radius: 6px;
margin-top: 6px;
background: #fff;
}
.import-mail-row {
display: grid;
grid-template-columns: 24px 1fr 180px 28px;
gap: 8px;
align-items: center;
padding: 8px 10px;
border-bottom: 1px solid var(--gray-100);
}
.import-mail-row:last-child {
border-bottom: none;
}
.import-mail-row-icon {
font-size: 18px;
text-align: center;
}
.import-mail-row-name {
font-size: 12px;
color: var(--text);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.import-mail-row-sub {
font-size: 10px;
color: var(--gray-500);
margin-top: 2px;
}
.import-mail-row-cat {
font-size: 11px;
padding: 4px 6px;
border: 1px solid var(--gray-300);
border-radius: 4px;
background: #fff;
}
.import-mail-row-del {
width: 24px;
height: 24px;
padding: 0;
display: flex;
align-items: center;
justify-content: center;
background: transparent;
border: 1px solid var(--gray-300);
border-radius: 50%;
color: var(--gray-500);
cursor: pointer;
font-size: 13px;
}
.import-mail-row-del:hover {
background: var(--red, #b91c1c);
color: #fff;
border-color: var(--red, #b91c1c);
}
.crm-piece-tile img {
display: block;
width: 100%;
height: 80px;
object-fit: cover;
}
.crm-piece-icon {
display: flex;
align-items: center;
justify-content: center;
height: 80px;
font-size: 32px;
background: var(--gray-50);
}
.crm-piece-name {
padding: 6px 8px;
font-size: 11px;
color: var(--text);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
border-top: 1px solid var(--border-light);
}
/* ─── POPUPS D'ACTION : Listes de destinataires & previews ─── */
.dest-list,
.doc-attach-list {
display: flex;
flex-direction: column;
gap: 6px;
max-height: 240px;
overflow-y: auto;
border: 1px solid var(--gray-200);
border-radius: 6px;
padding: 6px;
background: var(--gray-50);
}
.dest-item {
display: flex;
align-items: center;
gap: 10px;
padding: 8px 10px;
background: var(--white);
border: 1px solid transparent;
border-radius: 5px;
cursor: pointer;
transition: all 0.12s;
}
.dest-item:hover {
border-color: var(--navy);
background: #f6fbfa;
}
.dest-item input[type="checkbox"] {
width: auto;
flex-shrink: 0;
cursor: pointer;
}
.dest-info {
flex: 1;
min-width: 0;
line-height: 1.3;
}
.dest-role {
font-size: 9.5px;
font-weight: 700;
color: var(--navy);
text-transform: uppercase;
letter-spacing: 0.05em;
margin-bottom: 2px;
}
.dest-nom {
font-size: 13px;
font-weight: 600;
color: var(--gray-900);
}
.dest-email {
font-size: 11.5px;
color: var(--gray-600);
word-break: break-all;
}
/* Bloc d'aperçu (avant génération PDF) */
.preview-block {
background: #f6fbfa;
border: 1px solid rgba(18, 110, 130, 0.25);
border-left: 4px solid var(--navy);
border-radius: 6px;
padding: 14px 16px;
margin-bottom: 18px;
}
.preview-title {
font-size: 13px;
font-weight: 700;
color: var(--navy);
text-transform: uppercase;
letter-spacing: 0.04em;
margin-bottom: 4px;
}
.preview-sub {
font-size: 12px;
color: var(--gray-700);
margin-bottom: 10px;
}
.preview-line {
display: flex;
gap: 10px;
font-size: 12.5px;
padding: 3px 0;
border-bottom: 1px dashed rgba(18, 110, 130, 0.1);
}
.preview-line:last-child {
border-bottom: none;
}
.preview-label {
font-weight: 600;
color: var(--gray-600);
min-width: 130px;
flex-shrink: 0;
}
.preview-value {
color: var(--gray-900);
flex: 1;
word-break: break-word;
}
.preview-note {
margin-top: 10px;
padding-top: 8px;
border-top: 1px solid rgba(18, 110, 130, 0.15);
font-size: 11.5px;
font-style: italic;
color: var(--gray-600);
}
/* DOSSIER DETAIL */
.detail-header {
background: linear-gradient(135deg, var(--navy) 0%, var(--navy-dark) 100%);
color: white;
padding: 22px 24px;
border-radius: var(--radius-lg);
margin-bottom: 18px;
box-shadow: 0 4px 12px rgba(18, 110, 130, 0.2);
}
/* ─── FICHE DOSSIER en pleine page ─── */
.detail-page-header {
display: flex;
align-items: center;
justify-content: space-between;
gap: 14px;
flex-wrap: wrap;
padding: 6px 0 18px;
margin-bottom: 14px;
border-bottom: 1px solid var(--gray-200);
}
.detail-back-btn {
background: transparent;
border: 1px solid var(--gray-300);
padding: 8px 16px 8px 12px;
border-radius: 8px;
display: inline-flex;
align-items: center;
gap: 8px;
font-size: 13.5px;
font-weight: 600;
color: var(--gray-700);
cursor: pointer;
transition: all 0.15s;
}
.detail-back-btn:hover {
border-color: var(--navy);
color: var(--navy);
background: rgba(18, 110, 130, 0.04);
}
.detail-page-title {
font-family: "JetBrains Mono", "Menlo", monospace;
font-size: 16px;
font-weight: 700;
color: var(--gray-900);
letter-spacing: 0.02em;
flex: 1;
text-align: center;
min-width: 180px;
}
.detail-page-actions {
display: flex;
gap: 8px;
flex-wrap: wrap;
}
.detail-page-body {
padding-top: 4px;
}
/* ─── Layout fiche dossier : sidebar gauche + main + sidebar droite ─── */
.dossier-layout {
display: grid;
grid-template-columns: 320px 1fr 280px;
gap: 18px;
align-items: flex-start;
transition: grid-template-columns 0.25s ease;
}
.dossier-layout.sidebar-collapsed {
grid-template-columns: 0 1fr 280px;
gap: 0 18px;
}
.dossier-layout.quick-add-collapsed {
grid-template-columns: 320px 1fr 44px;
}
.dossier-layout.sidebar-collapsed.quick-add-collapsed {
grid-template-columns: 0 1fr 44px;
gap: 0 18px;
}
/* Adaptation responsive — état INITIAL recommandé selon la taille de la fenêtre.
IMPORTANT : on ne force PAS le mode replié sur petit écran (pas de !important).
L'utilisateur peut TOUJOURS déplier les sidebars en cliquant sur leur toggle,
même sur petite fenêtre — le main se rétrécit en conséquence.
L'état initial par défaut est géré dans renderDossierDetail() côté JS. */
/* Sidebar droite en mode tab vertical par défaut sur écran < 1280px (taille moyenne). */
@media (max-width: 1280px) and (min-width: 900px) {
.dossier-layout:not(.quick-add-expanded) {
grid-template-columns: 320px 1fr 44px;
}
.dossier-layout:not(.quick-add-expanded).sidebar-collapsed {
grid-template-columns: 0 1fr 44px;
}
}
/* Sur très petite fenêtre, la sidebar gauche en mode coord-bar par défaut + sidebar droite tab. */
@media (max-width: 899px) {
.dossier-layout:not(.sidebar-expanded):not(.quick-add-expanded) {
grid-template-columns: 0 1fr 44px;
gap: 0 8px;
}
.dossier-layout:not(.sidebar-expanded).sidebar-collapsed {
grid-template-columns: 0 1fr 44px;
gap: 0 8px;
}
/* Si l'utilisateur force l'expansion d'une sidebar sur petit écran, on lui donne sa
largeur normale et le main se rétrécit en conséquence.
!important pour outpasser les règles :not() du même niveau de spécificité. */
.dossier-layout.sidebar-expanded {
grid-template-columns: 320px 1fr 44px !important;
}
.dossier-layout.quick-add-expanded {
grid-template-columns: 0 1fr 280px !important;
}
.dossier-layout.sidebar-expanded.quick-add-expanded {
grid-template-columns: 320px 1fr 280px !important;
}
}
/* Quand l'utilisateur force l'expansion de la sidebar droite sur écran moyen (900-1280).
!important pour outpasser la règle :not() du même niveau de spécificité définie au-dessus. */
@media (max-width: 1280px) and (min-width: 900px) {
.dossier-layout.quick-add-expanded {
grid-template-columns: 320px 1fr 280px !important;
}
.dossier-layout.quick-add-expanded.sidebar-collapsed {
grid-template-columns: 0 1fr 280px !important;
}
}
/* Sidebar droite : Ajout rapide document
Hauteur fixe = même rendu que la sidebar gauche (descend jusqu'en bas du viewport) */
.dossier-sidebar-right {
position: sticky;
top: 80px;
height: calc(100vh - 100px);
background: var(--white);
border: 1px solid var(--gray-200);
border-radius: 10px;
overflow: hidden;
display: flex;
flex-direction: column;
transition: all 0.25s ease;
}
.dossier-sidebar-right.drag-active {
border-color: var(--navy);
background: rgba(18, 110, 130, 0.06);
box-shadow: 0 0 0 3px rgba(18, 110, 130, 0.15);
}
/* Mode déplié */
.quick-add-panel {
display: flex;
flex-direction: column;
flex: 1;
min-height: 0;
}
.dossier-layout.quick-add-collapsed .quick-add-panel {
display: none;
}
.dossier-layout:not(.quick-add-collapsed) .quick-add-tab {
display: none;
}
.quick-add-header {
display: flex;
align-items: center;
justify-content: space-between;
padding: 12px 14px;
border-bottom: 1px solid var(--gray-200);
background: var(--gray-50);
}
.quick-add-header-title {
font-size: 11px;
font-weight: 700;
color: var(--navy);
letter-spacing: 0.04em;
text-transform: uppercase;
}
.quick-add-body {
padding: 12px 14px;
display: flex;
flex-direction: column;
gap: 10px;
flex: 1;
overflow-y: auto;
}
.quick-add-dropzone {
border: 2px dashed var(--gray-300);
border-radius: 8px;
padding: 18px 12px;
text-align: center;
background: var(--gray-50);
transition: all 150ms ease;
}
.dossier-sidebar-right.drag-active .quick-add-dropzone {
border-color: var(--navy);
background: rgba(18, 110, 130, 0.1);
}
.quick-add-dropzone-icon {
font-size: 28px;
opacity: 0.7;
line-height: 1;
}
.quick-add-dropzone-text {
font-size: 13px;
font-weight: 600;
color: var(--gray-700);
margin-top: 6px;
}
.quick-add-dropzone-sub {
font-size: 11px;
color: var(--gray-500);
margin-top: 2px;
}
.quick-add-pickbtn {
display: inline-block;
margin-top: 8px;
font-size: 11px;
color: var(--navy);
cursor: pointer;
text-decoration: underline;
}
.quick-add-pickbtn:hover {
color: var(--navy-dark, #0B5D57);
}
/* Ligne des 2 boutons (Choisir des fichiers / Choisir un dossier) */
.quick-add-pickrow {
display: flex;
flex-wrap: wrap;
gap: 14px;
justify-content: center;
margin-top: 8px;
align-items: center;
}
.quick-add-pickrow .quick-add-pickbtn {
margin-top: 0;
}
.quick-add-pickbtn-folder {
color: #ea580c;
font-weight: 600;
}
.quick-add-pickbtn-folder:hover {
color: #c2410c;
}
.quick-add-types {
font-size: 10.5px;
background: rgba(18, 110, 130, 0.04);
border: 1px solid rgba(18, 110, 130, 0.15);
border-radius: 6px;
padding: 8px 10px;
color: var(--gray-700);
line-height: 1.45;
}
.quick-add-types-title {
font-weight: 600;
color: var(--navy);
margin-bottom: 4px;
font-size: 10px;
text-transform: uppercase;
letter-spacing: 0.04em;
}
.quick-add-list {
display: flex;
flex-direction: column;
gap: 6px;
}
.quick-add-list-title {
font-size: 10px;
font-weight: 600;
color: var(--gray-500);
text-transform: uppercase;
letter-spacing: 0.04em;
margin-bottom: 2px;
}
.quick-add-row {
border: 1px solid var(--gray-200);
border-radius: 6px;
padding: 6px 8px;
background: #fff;
display: flex;
flex-direction: column;
gap: 4px;
}
.quick-add-row-head {
display: flex;
align-items: center;
gap: 6px;
}
.quick-add-row-icon {
font-size: 14px;
flex-shrink: 0;
}
.quick-add-row-name {
flex: 1;
min-width: 0;
font-size: 11.5px;
color: var(--text);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.quick-add-row-del {
width: 18px;
height: 18px;
padding: 0;
flex-shrink: 0;
display: flex;
align-items: center;
justify-content: center;
background: transparent;
border: 1px solid var(--gray-300);
border-radius: 50%;
color: var(--gray-500);
cursor: pointer;
font-size: 10px;
}
.quick-add-row-del:hover {
background: var(--red, #b91c1c);
color: #fff;
border-color: var(--red, #b91c1c);
}
.quick-add-row-meta {
display: flex;
gap: 6px;
align-items: center;
}
.quick-add-row-size {
font-size: 10px;
color: var(--gray-500);
flex-shrink: 0;
}
.quick-add-row-cat {
flex: 1;
font-size: 11px;
padding: 3px 5px;
border: 1px solid var(--gray-300);
border-radius: 4px;
background: #fff;
}
.quick-add-footer {
display: flex;
gap: 6px;
justify-content: flex-end;
padding-top: 8px;
border-top: 1px solid var(--gray-200);
}
/* Mode replié : onglet vertical fin */
.quick-add-tab {
display: none;
flex-direction: column;
align-items: center;
justify-content: flex-start;
padding: 14px 6px;
background: var(--gray-50);
border: none;
width: 100%;
height: 100%;
cursor: pointer;
transition: background 150ms ease;
}
.quick-add-tab:hover {
background: rgba(18, 110, 130, 0.08);
}
.dossier-layout.quick-add-collapsed .quick-add-tab {
display: flex;
}
.quick-add-tab-icon {
font-size: 20px;
margin-bottom: 8px;
}
.quick-add-tab-text {
writing-mode: vertical-rl;
transform: rotate(180deg);
font-size: 11px;
font-weight: 600;
color: var(--navy);
letter-spacing: 0.04em;
text-transform: uppercase;
white-space: nowrap;
}
.dossier-sidebar {
position: sticky;
top: 80px;
max-height: calc(100vh - 100px);
background: var(--white);
border: 1px solid var(--gray-200);
border-radius: 10px;
overflow: hidden;
display: flex;
flex-direction: column;
transition: all 0.25s ease;
}
.dossier-layout.sidebar-collapsed .dossier-sidebar {
width: 0;
border: none;
overflow: hidden;
opacity: 0;
pointer-events: none;
}
.sidebar-header {
display: flex;
align-items: center;
justify-content: space-between;
padding: 10px 14px;
background: var(--gray-50);
border-bottom: 1px solid var(--gray-200);
flex-shrink: 0;
}
.sidebar-header-title {
font-size: 10.5px;
font-weight: 700;
color: var(--gray-600);
text-transform: uppercase;
letter-spacing: 0.08em;
}
.sidebar-toggle {
width: 24px;
height: 24px;
border-radius: 5px;
background: transparent;
border: 1px solid var(--gray-300);
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
font-size: 13px;
font-weight: 700;
color: var(--gray-600);
transition: all 0.15s;
flex-shrink: 0;
}
.sidebar-toggle:hover {
background: var(--navy);
color: white;
border-color: var(--navy);
}
.sidebar-toggle-icon {
line-height: 1;
display: block;
}
/* ─── Barre horizontale Coordonnées (mode replié uniquement) ─── */
.coord-bar {
display: none;
align-items: center;
gap: 10px;
width: 100%;
padding: 10px 14px;
margin-bottom: 14px;
background: linear-gradient(to right, var(--gray-50), var(--white));
border: 1px solid var(--gray-200);
border-left: 3px solid var(--navy);
border-radius: 8px;
cursor: pointer;
font-family: inherit;
text-align: left;
transition: all 0.15s;
}
.dossier-layout.sidebar-collapsed .coord-bar {
display: flex;
}
.coord-bar:hover {
background: linear-gradient(to right, rgba(18, 110, 130, 0.06), var(--white));
border-color: var(--navy);
transform: translateY(-1px);
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
}
.coord-bar-icon {
font-size: 12px;
color: var(--navy);
flex-shrink: 0;
width: 18px;
height: 18px;
display: inline-flex;
align-items: center;
justify-content: center;
background: rgba(18, 110, 130, 0.08);
border-radius: 4px;
}
.coord-bar-label {
font-size: 12px;
font-weight: 700;
color: var(--navy);
text-transform: uppercase;
letter-spacing: 0.06em;
flex-shrink: 0;
}
.coord-bar-brief {
flex: 1;
font-size: 13px;
color: var(--gray-700);
font-weight: 500;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
padding: 0 6px;
border-left: 1px solid var(--gray-200);
margin-left: 6px;
}
.coord-bar-action {
font-size: 11.5px;
font-weight: 600;
color: var(--navy);
background: rgba(18, 110, 130, 0.08);
padding: 4px 10px;
border-radius: 5px;
flex-shrink: 0;
transition: all 0.15s;
}
.coord-bar:hover .coord-bar-action {
background: var(--navy);
color: white;
}
.dossier-sidebar-scroll {
flex: 1;
overflow-y: auto;
padding: 14px 16px 16px;
scrollbar-width: thin;
scrollbar-color: var(--gray-300) transparent;
}
.dossier-sidebar-scroll::-webkit-scrollbar {
width: 6px;
}
.dossier-sidebar-scroll::-webkit-scrollbar-thumb {
background: var(--gray-300);
border-radius: 3px;
}
.sb-section {
margin-bottom: 18px;
padding-bottom: 14px;
border-bottom: 1px solid var(--gray-100);
}
.sb-section:last-child {
margin-bottom: 0;
border-bottom: none;
padding-bottom: 0;
}
.sb-section-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 10px;
padding: 2px 0;
gap: 8px;
}
.sb-section-titlewrap {
display: flex;
align-items: center;
gap: 7px;
flex: 1;
cursor: pointer;
user-select: none;
transition: opacity 0.12s;
padding: 2px 4px;
border-radius: 4px;
min-width: 0;
}
.sb-section-titlewrap:hover {
background: var(--gray-50);
}
.sb-section-action {
flex-shrink: 0;
}
.sb-section-chevron {
font-size: 9px;
color: var(--gray-500);
width: 11px;
display: inline-block;
text-align: center;
transition: transform 0.15s;
}
.sb-collapsed .sb-section {
padding-bottom: 0;
margin-bottom: 10px;
}
.sb-collapsed .sb-section-header {
margin-bottom: 0;
}
.sb-section-title {
font-size: 11px;
font-weight: 700;
color: var(--navy);
text-transform: uppercase;
letter-spacing: 0.06em;
}
.sb-edit-btn {
background: transparent;
border: none;
font-size: 11px;
color: var(--gray-500);
cursor: pointer;
padding: 3px 7px;
border-radius: 5px;
font-weight: 500;
transition: all 0.12s;
}
.sb-edit-btn:hover {
background: var(--gray-100);
color: var(--navy);
}
.sb-edit-btn-add {
color: var(--navy);
font-weight: 600;
}
.sb-edit-btn-add:hover {
background: rgba(18, 110, 130, 0.08);
color: var(--navy-dark);
}
.sb-section-body {
display: flex;
flex-direction: column;
gap: 8px;
}
.sb-field {
display: flex;
flex-direction: column;
gap: 2px;
}
.sb-label {
font-size: 10px;
font-weight: 600;
color: var(--gray-500);
text-transform: uppercase;
letter-spacing: 0.04em;
}
.sb-value {
font-size: 12.5px;
color: var(--gray-900);
word-break: break-word;
line-height: 1.4;
}
.sb-value-strong {
font-weight: 600;
}
.sb-value-multiline {
white-space: pre-wrap;
font-size: 12px;
color: var(--gray-700);
}
.sb-mono {
font-family: "JetBrains Mono", "Menlo", monospace;
font-size: 12px;
letter-spacing: -0.01em;
}
.sb-link {
color: var(--navy);
text-decoration: none;
border-bottom: 1px dotted var(--navy-light);
}
.sb-link:hover {
border-bottom-style: solid;
}
.sb-empty {
font-size: 12px;
color: var(--gray-500);
font-style: italic;
padding: 8px;
background: var(--gray-50);
border-radius: 6px;
text-align: center;
}
.sb-tiers-card {
position: relative;
background: var(--gray-50);
border: 1px solid var(--gray-200);
border-radius: 7px;
padding: 9px 11px;
margin-bottom: 8px;
}
.sb-tiers-card:last-child {
margin-bottom: 0;
}
.sb-tiers-header {
display: flex;
justify-content: space-between;
align-items: flex-start;
gap: 6px;
margin-bottom: 3px;
}
.sb-tiers-actions {
display: flex;
gap: 4px;
align-items: center;
flex-shrink: 0;
}
.sb-tiers-edit {
background: transparent;
border: 1px solid transparent;
font-size: 10px;
font-weight: 600;
color: var(--navy);
padding: 2px 7px;
border-radius: 4px;
cursor: pointer;
transition: all 0.12s;
}
.sb-tiers-edit:hover {
background: rgba(18, 110, 130, 0.1);
border-color: rgba(18, 110, 130, 0.25);
}
.sb-tiers-remove {
background: transparent;
border: none;
cursor: pointer;
width: 20px;
height: 20px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
color: var(--gray-400);
font-size: 14px;
line-height: 1;
transition: all 0.12s;
}
.sb-tiers-remove:hover {
background: var(--danger-bg);
color: var(--danger);
}
.sb-tiers-quality {
font-size: 9px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.05em;
color: var(--gray-500);
flex: 1;
min-width: 0;
}
.sb-tiers-name {
font-size: 13px;
font-weight: 600;
color: var(--gray-900);
margin-bottom: 5px;
}
.sb-tiers-info {
font-size: 11.5px;
color: var(--gray-700);
margin-top: 2px;
line-height: 1.4;
}
.sb-tiers-assureur {
margin-top: 6px;
padding-top: 5px;
border-top: 1px dashed var(--gray-200);
font-style: italic;
color: var(--gray-600);
}
.sb-tiers-expert {
margin-top: 4px;
padding-top: 4px;
border-top: 1px dashed var(--gray-200);
font-style: italic;
color: var(--gray-600);
}
/* Sous-bloc dans la sidebar (assurance syndic, expert adverse...) */
.sb-subblock {
margin-top: 10px;
padding-top: 8px;
border-top: 1px dashed var(--gray-200);
}
.sb-subblock-title {
font-size: 9.5px;
font-weight: 700;
color: var(--gray-500);
text-transform: uppercase;
letter-spacing: 0.06em;
margin-bottom: 6px;
font-style: italic;
}
.dossier-main {
min-width: 0;
}
/* Ancienne règle mobile retirée — la nouvelle stratégie est de garder
les 2 sidebars TOUJOURS accessibles via leur tab vertical, même sur petite
fenêtre. Voir les media queries plus haut dans le fichier (recherche §STORAGE
layout fiche dossier). */
.detail-num {
font-family: "JetBrains Mono", monospace;
font-size: 12px;
font-weight: 600;
letter-spacing: 0.06em;
opacity: 0.95;
margin-bottom: 6px;
color: #a7f3d0;
}
.detail-name {
font-size: 22px;
font-weight: 700;
letter-spacing: -0.02em;
margin-bottom: 4px;
color: white;
}
.detail-info {
font-size: 13px;
opacity: 0.95;
color: #e0f2f1;
}
.detail-info-line {
margin-top: 3px;
color: #e0f2f1;
}
.detail-stats {
display: flex;
gap: 14px;
margin-top: 14px;
padding-top: 14px;
border-top: 1px solid rgba(255, 255, 255, 0.25);
}
.detail-stat {
flex: 1;
}
.detail-stat-label {
font-size: 10px;
text-transform: uppercase;
letter-spacing: 0.06em;
opacity: 0.85;
margin-bottom: 3px;
color: #a7f3d0;
font-weight: 600;
}
.detail-stat-value {
font-size: 14px;
font-weight: 600;
}
/* BOUTON OUVRIR RAPPORT D'EXPERTISE */
.detail-actions-main {
margin-bottom: 18px;
display: flex;
gap: 10px;
align-items: stretch;
}
.btn-rapport-link {
flex: 1;
display: flex;
align-items: center;
gap: 16px;
padding: 18px 22px;
background: var(--navy);
color: white;
border: none;
border-radius: var(--radius-lg);
font-family: inherit;
cursor: pointer;
text-align: left;
transition: all 0.2s ease;
box-shadow: 0 2px 8px rgba(18, 110, 130, 0.15);
}
.btn-rapport-link:hover {
background: var(--navy-dark);
transform: translateY(-1px);
box-shadow: 0 4px 12px rgba(18, 110, 130, 0.25);
}
.btn-rapport-icon {
font-size: 24px;
line-height: 1;
}
.btn-rapport-text {
flex: 1;
display: flex;
flex-direction: column;
gap: 3px;
min-width: 0;
}
.btn-rapport-eyebrow {
font-size: 9px;
font-weight: 700;
letter-spacing: 0.16em;
opacity: 0.7;
text-transform: uppercase;
}
.btn-rapport-title {
font-size: 14px;
font-weight: 700;
letter-spacing: 0.01em;
}
.btn-rapport-sub {
font-size: 11px;
opacity: 0.85;
font-weight: 400;
}
.btn-rapport-arrow {
font-size: 22px;
font-weight: 300;
opacity: 0.7;
flex-shrink: 0;
}
.btn-sync-now {
flex-shrink: 0;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 4px;
padding: 12px 16px;
background: var(--white);
color: var(--navy);
border: 2px solid var(--navy);
border-radius: var(--radius-lg);
font-family: inherit;
cursor: pointer;
transition: all 0.2s ease;
min-width: 110px;
}
.btn-sync-now:hover {
background: var(--navy);
color: white;
transform: translateY(-1px);
box-shadow: 0 4px 12px rgba(18, 110, 130, 0.25);
}
.btn-sync-icon {
font-size: 24px;
line-height: 1;
font-weight: 600;
}
.btn-sync-now:hover .btn-sync-icon {
animation: spin 0.6s ease-out;
}
.btn-sync-label {
font-size: 10px;
text-transform: uppercase;
letter-spacing: 0.04em;
font-weight: 700;
text-align: center;
line-height: 1.1;
}
@keyframes spin {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
/* INFO GRID */
.info-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
gap: 14px;
}
.info-card {
background: var(--white);
padding: 12px 14px;
border-radius: var(--radius);
border: 1px solid var(--gray-200);
}
.info-label {
font-size: 10px;
text-transform: uppercase;
letter-spacing: 0.06em;
color: var(--gray-500);
font-weight: 600;
margin-bottom: 4px;
}
.info-value {
font-size: 13px;
color: var(--gray-900);
font-weight: 500;
word-break: break-word;
}
/* TIERS LIST */
.tiers-item {
background: var(--white);
border: 1px solid #2f2d2a;
border-radius: var(--radius);
padding: 12px 14px;
margin-bottom: 8px;
position: relative;
}
.tiers-quality {
font-size: 10px;
text-transform: uppercase;
letter-spacing: 0.06em;
color: var(--accent-dark);
font-weight: 700;
margin-bottom: 3px;
}
.tiers-name {
font-size: 14px;
font-weight: 600;
color: var(--gray-900);
margin-bottom: 3px;
}
.tiers-info {
font-size: 12px;
color: var(--gray-600);
}
.tiers-remove {
position: absolute;
top: 8px;
right: 8px;
color: var(--gray-400);
font-size: 14px;
width: 22px;
height: 22px;
display: flex;
align-items: center;
justify-content: center;
border-radius: var(--radius);
}
.tiers-remove:hover {
background: var(--danger-bg);
color: var(--danger);
}
/* CALENDAR */
.cal-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 14px;
}
/* ════════════ CALENDRIER ═════════════ */
.cal-toolbar {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
flex-wrap: wrap;
margin-bottom: 12px;
padding: 8px 0;
}
.cal-views {
display: flex;
gap: 2px;
background: var(--gray-100);
border: 1px solid var(--gray-200);
border-radius: 8px;
padding: 3px;
}
.cal-view-btn {
background: transparent;
border: none;
padding: 6px 14px;
border-radius: 6px;
font-size: 13px;
font-weight: 500;
color: var(--gray-700);
cursor: pointer;
transition: all 0.15s;
}
.cal-view-btn:hover {
background: rgba(18, 110, 130, 0.06);
}
.cal-view-btn.active {
background: var(--navy);
color: white;
font-weight: 600;
}
.cal-title {
font-size: 20px;
font-weight: 700;
color: var(--gray-900);
letter-spacing: -0.02em;
flex: 1;
text-align: center;
min-width: 200px;
}
.cal-nav {
display: flex;
gap: 6px;
align-items: center;
}
.cal-nav-btn {
background: var(--white);
border: 1px solid var(--gray-300);
width: 36px;
height: 36px;
border-radius: 8px;
font-size: 18px;
cursor: pointer;
color: var(--gray-700);
font-weight: 600;
display: inline-flex;
align-items: center;
justify-content: center;
transition: all 0.15s;
}
.cal-nav-btn:hover {
border-color: var(--navy);
color: var(--navy);
}
.cal-today {
width: auto;
padding: 0 14px;
font-size: 13px;
font-weight: 600;
}
.cal-legend {
display: flex;
gap: 18px;
flex-wrap: wrap;
padding: 10px 0 14px;
font-size: 12px;
color: var(--gray-600);
border-bottom: 1px solid var(--gray-200);
margin-bottom: 14px;
}
.cal-legend-item {
display: inline-flex;
align-items: center;
gap: 6px;
}
.cal-legend-dot {
display: inline-block;
width: 10px;
height: 10px;
border-radius: 3px;
}
.cal-body {
min-height: 500px;
}
/* ─── Vue MOIS ─── */
.cal-month-grid {
background: var(--white);
border: 1px solid var(--gray-200);
border-radius: 10px;
overflow: hidden;
}
.cal-month-header {
display: grid;
grid-template-columns: repeat(7, 1fr);
background: var(--gray-50);
border-bottom: 1px solid var(--gray-200);
}
.cal-month-head-cell {
padding: 10px 12px;
font-size: 11px;
font-weight: 600;
color: var(--gray-500);
text-transform: uppercase;
letter-spacing: 0.05em;
text-align: left;
}
.cal-month-body {
display: grid;
grid-template-columns: repeat(7, 1fr);
grid-template-rows: repeat(6, minmax(110px, 1fr));
}
.cal-month-cell {
padding: 6px 7px;
border-right: 1px solid var(--gray-200);
border-bottom: 1px solid var(--gray-200);
background: var(--white);
min-height: 110px;
overflow: hidden;
display: flex;
flex-direction: column;
gap: 2px;
}
.cal-month-cell:nth-child(7n) {
border-right: none;
}
.cal-cell-other {
background: var(--gray-50);
}
.cal-cell-other .cal-month-daynum {
color: var(--gray-400);
}
.cal-month-daynum {
font-size: 13px;
font-weight: 600;
color: var(--gray-700);
padding: 2px 4px 4px;
min-height: 22px;
}
.cal-today-badge {
display: inline-flex;
align-items: center;
justify-content: center;
width: 24px;
height: 24px;
background: var(--danger);
color: white;
border-radius: 50%;
font-size: 12px;
font-weight: 700;
}
.cal-month-event {
display: flex;
gap: 5px;
align-items: center;
padding: 3px 6px;
border-radius: 4px;
font-size: 11px;
cursor: pointer;
overflow: hidden;
white-space: nowrap;
transition: all 0.12s;
}
.cal-month-event:hover {
transform: translateX(2px);
opacity: 0.9;
}
.cal-month-event-time {
font-family: "JetBrains Mono", "Menlo", monospace;
font-weight: 600;
font-size: 10.5px;
opacity: 0.85;
flex-shrink: 0;
}
.cal-month-event-label {
font-weight: 500;
overflow: hidden;
text-overflow: ellipsis;
}
.cal-month-more {
font-size: 11px;
color: var(--gray-500);
cursor: pointer;
padding: 2px 6px;
font-weight: 500;
}
.cal-month-more:hover {
color: var(--navy);
text-decoration: underline;
}
/* ─── Vue SEMAINE ─── */
.cal-week-grid {
background: var(--white);
border: 1px solid var(--gray-200);
border-radius: 10px;
overflow: hidden;
}
.cal-week-header {
display: grid;
grid-template-columns: 60px repeat(7, 1fr);
background: var(--gray-50);
border-bottom: 1px solid var(--gray-200);
}
.cal-week-time-col {
padding: 10px;
}
.cal-week-head-day {
padding: 10px 8px;
text-align: center;
border-left: 1px solid var(--gray-200);
}
.cal-week-dayname {
font-size: 11px;
color: var(--gray-500);
text-transform: uppercase;
letter-spacing: 0.05em;
font-weight: 600;
margin-bottom: 4px;
}
.cal-week-daynum {
font-size: 18px;
font-weight: 700;
color: var(--gray-900);
}
.cal-week-body {
max-height: 600px;
overflow-y: auto;
}
.cal-week-row {
display: grid;
grid-template-columns: 60px repeat(7, 1fr);
min-height: 50px;
border-bottom: 1px solid var(--gray-100);
}
.cal-week-time-cell {
padding: 6px 10px;
font-size: 11px;
font-weight: 500;
color: var(--gray-500);
text-align: right;
font-family: "JetBrains Mono", "Menlo", monospace;
}
.cal-week-slot {
border-left: 1px solid var(--gray-100);
padding: 3px;
display: flex;
flex-direction: column;
gap: 2px;
min-height: 50px;
}
.cal-week-event {
padding: 4px 6px;
border-radius: 5px;
cursor: pointer;
font-size: 11px;
overflow: hidden;
transition: all 0.12s;
}
.cal-week-event:hover {
transform: scale(1.02);
}
.cal-week-event-time {
font-family: "JetBrains Mono", "Menlo", monospace;
font-weight: 600;
font-size: 10px;
opacity: 0.85;
}
.cal-week-event-title {
font-weight: 600;
margin-top: 2px;
}
.cal-week-event-label {
font-size: 10.5px;
opacity: 0.85;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
/* ─── Vue JOUR ─── */
.cal-day-view {
background: var(--white);
border: 1px solid var(--gray-200);
border-radius: 10px;
padding: 20px;
min-height: 400px;
}
.cal-day-empty {
text-align: center;
padding: 60px 20px;
color: var(--gray-400);
}
.cal-day-empty-icon {
font-size: 40px;
opacity: 0.5;
margin-bottom: 10px;
}
.cal-day-list {
display: flex;
flex-direction: column;
gap: 10px;
}
.cal-day-event {
display: flex;
gap: 18px;
padding: 14px 16px;
border-radius: 8px;
cursor: pointer;
transition: all 0.15s;
}
.cal-day-event:hover {
transform: translateX(3px);
box-shadow: var(--shadow-md);
}
.cal-day-event-time {
font-family: "JetBrains Mono", "Menlo", monospace;
font-weight: 700;
font-size: 18px;
min-width: 60px;
align-self: center;
}
.cal-day-event-body {
flex: 1;
}
.cal-day-event-title {
font-size: 15px;
font-weight: 700;
margin-bottom: 4px;
}
.cal-day-event-dossier {
font-size: 13px;
color: var(--gray-700);
margin-bottom: 4px;
font-weight: 500;
}
.cal-day-event-meta {
font-size: 12px;
color: var(--gray-500);
margin-top: 2px;
}
/* ─── Vue ANNEE ─── */
.cal-year-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 14px;
}
.cal-year-month {
background: var(--white);
border: 1px solid var(--gray-200);
border-radius: 10px;
padding: 14px;
cursor: pointer;
transition: all 0.15s;
}
.cal-year-month:hover {
border-color: var(--navy);
transform: translateY(-2px);
box-shadow: var(--shadow-md);
}
.cal-year-month-title {
font-size: 14px;
font-weight: 700;
color: var(--navy);
margin-bottom: 10px;
text-align: center;
}
.cal-year-mini-header {
display: grid;
grid-template-columns: repeat(7, 1fr);
margin-bottom: 4px;
}
.cal-year-mini-h {
text-align: center;
font-size: 10px;
color: var(--gray-400);
font-weight: 600;
}
.cal-year-mini-grid {
display: grid;
grid-template-columns: repeat(7, 1fr);
gap: 2px;
}
.cal-year-mini-cell {
aspect-ratio: 1;
display: flex;
align-items: center;
justify-content: center;
font-size: 11px;
color: var(--gray-700);
position: relative;
border-radius: 4px;
}
.cal-year-mini-num {
position: relative;
z-index: 1;
}
.cal-year-mini-other .cal-year-mini-num {
color: var(--gray-300);
}
.cal-year-mini-today {
background: var(--danger);
color: white !important;
font-weight: 700;
}
.cal-year-mini-today .cal-year-mini-num {
color: white;
}
.cal-year-mini-dot {
position: absolute;
bottom: 1px;
left: 50%;
transform: translateX(-50%);
width: 4px;
height: 4px;
border-radius: 50%;
}
/* ════════════ FACTURATION ═════════════ */
/* Bloc "Factures en attente" - section d'alerte en haut de la page Facturation */
.fact-pending-block {
background: rgba(245, 158, 11, 0.06);
border: 1px solid rgba(245, 158, 11, 0.35);
border-radius: 10px;
padding: 16px 18px;
margin-bottom: 24px;
}
.fact-pending-header {
margin-bottom: 12px;
}
.fact-pending-title {
display: flex;
align-items: center;
gap: 10px;
font-size: 14px;
font-weight: 700;
color: #92400e;
letter-spacing: 0.02em;
}
.fact-pending-icon {
font-size: 18px;
}
.fact-pending-count {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 24px;
height: 24px;
padding: 0 8px;
background: #f59e0b;
color: #fff;
border-radius: 12px;
font-size: 12px;
font-weight: 700;
}
.fact-pending-sub {
font-size: 12px;
color: #78350f;
margin-top: 4px;
}
.fact-pending-list {
background: #fff;
border: 1px solid var(--gray-200);
border-radius: 8px;
overflow: hidden;
}
.fact-pending-row {
display: grid;
grid-template-columns: 180px 1fr 140px auto;
gap: 14px;
align-items: center;
padding: 11px 14px;
border-bottom: 1px solid var(--gray-100);
cursor: pointer;
transition: background 0.12s ease;
}
.fact-pending-row:last-child {
border-bottom: none;
}
.fact-pending-row:hover {
background: rgba(18, 110, 130, 0.05);
}
.fact-pending-numero {
font-family: "JetBrains Mono", monospace;
font-size: 12px;
font-weight: 600;
color: var(--navy);
letter-spacing: 0.04em;
}
.fact-pending-info {
min-width: 0;
}
.fact-pending-nom {
font-size: 13.5px;
font-weight: 600;
color: var(--gray-900);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.fact-pending-meta {
font-size: 11px;
color: var(--gray-500);
margin-top: 2px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.fact-pending-montant {
font-size: 13px;
font-weight: 600;
color: var(--gray-700);
text-align: right;
}
.fact-pending-arrow {
color: var(--gray-400);
font-size: 18px;
text-align: center;
}
@media (max-width: 700px) {
.fact-pending-row {
grid-template-columns: 1fr auto;
gap: 8px;
}
.fact-pending-numero {
grid-column: 1 / -1;
margin-bottom: -4px;
}
.fact-pending-info {
grid-column: 1;
}
.fact-pending-montant {
grid-column: 2;
text-align: right;
}
.fact-pending-arrow {
display: none;
}
}
.fact-kpis {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
gap: 14px;
margin-bottom: 24px;
}
.fact-kpi {
background: var(--white);
border: 1px solid var(--gray-200);
border-radius: 10px;
padding: 18px 20px;
transition: all 0.15s;
}
.fact-kpi:hover {
border-color: var(--gray-300);
box-shadow: var(--shadow);
}
.fact-kpi-primary {
background: linear-gradient(135deg, var(--navy), var(--navy-dark));
border-color: var(--navy);
}
.fact-kpi-primary .fact-kpi-label,
.fact-kpi-primary .fact-kpi-value,
.fact-kpi-primary .fact-kpi-sub {
color: white;
}
.fact-kpi-primary .fact-kpi-label {
opacity: 0.85;
}
.fact-kpi-primary .fact-kpi-sub {
opacity: 0.75;
}
.fact-kpi-warning {
background: linear-gradient(135deg, #fef3c7, #fde68a);
border-color: #fcd34d;
}
.fact-kpi-warning .fact-kpi-value {
color: #92400e;
}
.fact-kpi-warning .fact-kpi-label {
color: #78350f;
}
.fact-kpi-warning .fact-kpi-sub {
color: #92400e;
}
.fact-kpi-label {
font-size: 12px;
font-weight: 600;
color: var(--gray-500);
text-transform: uppercase;
letter-spacing: 0.05em;
margin-bottom: 6px;
}
.fact-kpi-value {
font-size: 26px;
font-weight: 700;
color: var(--gray-900);
letter-spacing: -0.02em;
font-family: "JetBrains Mono", "Menlo", monospace;
}
.fact-kpi-sub {
font-size: 12px;
color: var(--gray-500);
margin-top: 4px;
}
.fact-chart-card {
background: var(--white);
border: 1px solid var(--gray-200);
border-radius: 10px;
padding: 20px;
margin-bottom: 24px;
}
.fact-chart-title {
font-size: 14px;
font-weight: 600;
color: var(--gray-700);
margin-bottom: 18px;
}
.fact-chart {
display: flex;
gap: 8px;
align-items: flex-end;
height: 210px;
padding: 10px 0;
}
.fact-bar-wrap {
flex: 1;
display: flex;
flex-direction: column;
align-items: center;
gap: 4px;
cursor: default;
}
.fact-bar-value {
font-size: 10px;
font-weight: 600;
color: var(--gray-700);
font-family: "JetBrains Mono", "Menlo", monospace;
height: 14px;
}
.fact-bar {
width: 100%;
max-width: 50px;
background: linear-gradient(180deg, var(--navy-light), var(--navy));
border-radius: 4px 4px 0 0;
transition: all 0.2s;
min-height: 2px;
}
.fact-bar-wrap:hover .fact-bar {
background: linear-gradient(180deg, var(--navy), var(--navy-dark));
}
.fact-bar-label {
font-size: 10.5px;
color: var(--gray-500);
text-align: center;
font-weight: 500;
text-transform: capitalize;
}
.fact-filters {
display: flex;
gap: 14px;
flex-wrap: wrap;
align-items: center;
margin-bottom: 14px;
}
.fact-period-tabs {
display: flex;
gap: 3px;
background: var(--gray-100);
border: 1px solid var(--gray-200);
border-radius: 8px;
padding: 3px;
}
.fact-period-btn {
background: transparent;
border: none;
padding: 6px 16px;
border-radius: 6px;
font-size: 13px;
font-weight: 500;
color: var(--gray-700);
cursor: pointer;
transition: all 0.15s;
text-transform: capitalize;
}
.fact-period-btn:hover {
background: rgba(18, 110, 130, 0.06);
}
.fact-period-btn.active {
background: var(--navy);
color: white;
font-weight: 600;
}
.fact-table-wrap {
background: var(--white);
border: 1px solid var(--gray-200);
border-radius: 10px;
overflow: auto;
}
.fact-table {
width: 100%;
border-collapse: collapse;
font-size: 13px;
}
.fact-table thead th {
background: var(--gray-50);
padding: 12px 14px;
text-align: left;
font-weight: 600;
color: var(--gray-700);
border-bottom: 1px solid var(--gray-200);
font-size: 11.5px;
text-transform: uppercase;
letter-spacing: 0.04em;
white-space: nowrap;
}
.fact-table tbody td {
padding: 12px 14px;
border-bottom: 1px solid var(--gray-100);
color: var(--gray-900);
}
.fact-row {
cursor: pointer;
transition: background 0.12s;
}
.fact-row:hover {
background: rgba(18, 110, 130, 0.04);
}
.fact-num {
font-family: "JetBrains Mono", "Menlo", monospace;
font-size: 11.5px;
font-weight: 600;
color: var(--gray-500);
letter-spacing: 0.02em;
}
.fact-badge {
display: inline-flex;
align-items: center;
gap: 5px;
padding: 3px 10px;
border-radius: 11px;
font-size: 11px;
font-weight: 600;
white-space: nowrap;
}
.fact-badge-regle {
background: rgba(18, 110, 130, 0.1);
color: var(--navy-dark);
}
.fact-badge-attente {
background: #fef3c7;
color: #92400e;
}
.fact-table tfoot td {
padding: 14px;
background: var(--gray-50);
font-family: "JetBrains Mono", "Menlo", monospace;
font-size: 13.5px;
}
/* EMPTY */
.crm-empty {
text-align: center;
padding: 50px 20px;
color: var(--gray-500);
}
.crm-empty-icon {
width: 48px;
height: 48px;
margin: 0 auto 14px;
border: 2px dashed var(--gray-300);
border-radius: var(--radius-lg);
display: flex;
align-items: center;
justify-content: center;
color: var(--gray-400);
font-size: 20px;
}
.crm-empty-title {
font-size: 15px;
font-weight: 600;
color: var(--gray-700);
margin-bottom: 5px;
}
/* TOAST */
.toast {
position: fixed;
bottom: 20px;
left: 50%;
transform: translateX(-50%) translateY(120%);
background: var(--gray-900);
color: white;
padding: 11px 18px;
border-radius: var(--radius);
font-size: 13px;
font-weight: 500;
box-shadow: var(--shadow-lg);
transition: transform 300ms cubic-bezier(0.4, 0, 0.2, 1);
z-index: 9999;
max-width: 360px;
}
.toast.show {
transform: translateX(-50%) translateY(0);
}
.toast-success {
background: var(--success);
}
.toast-error {
background: var(--danger);
}
/* RADIO/CHECK */
.radio-group {
display: flex;
gap: 8px;
flex-wrap: wrap;
}
.radio-option {
flex: 1;
min-width: 130px;
}
.radio-option input {
display: none;
}
.radio-option label {
display: block;
padding: 9px 14px;
background: var(--white);
border: 1px solid var(--gray-300);
border-radius: var(--radius);
text-align: center;
cursor: pointer;
font-size: 13px;
font-weight: 500;
color: var(--gray-700);
margin-bottom: 0;
text-transform: none;
letter-spacing: 0;
transition: all var(--transition);
}
.radio-option input:checked + label {
background: var(--navy);
border-color: var(--navy);
color: white;
font-weight: 600;
}
/* PHASE indicators */
.phase-tag {
display: inline-block;
padding: 4px 11px;
background: var(--gray-100);
color: var(--gray-700);
font-size: 11px;
font-weight: 700;
border-radius: 11px;
text-transform: uppercase;
letter-spacing: 0.04em;
border: 1.5px solid currentColor;
}
.phase-contact {
background: #e0f2fe;
color: #075985;
}
.phase-unilateral {
background: #dcfce7;
color: #166534;
}
.phase-contradictoire {
background: #fef3c7;
color: #92400e;
}
/* DASHBOARD CARDS */
.stat-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 10px;
margin-bottom: 18px;
}
@media (min-width: 640px) {
.stat-grid {
grid-template-columns: repeat(4, 1fr);
}
}
.stat-card {
background: var(--white);
border: 1px solid #2f2d2a;
border-radius: var(--radius-lg);
padding: 14px;
}
.stat-card-clickable {
cursor: pointer;
transition: all 0.15s;
}
.stat-card-clickable:hover {
border-color: var(--navy);
transform: translateY(-2px);
box-shadow: var(--shadow-md);
}
.stat-card-clickable:hover .stat-value {
transform: scale(1.04);
transition: transform 0.15s;
}
.stat-label {
font-size: 10px;
text-transform: uppercase;
letter-spacing: 0.06em;
color: var(--gray-500);
font-weight: 600;
margin-bottom: 6px;
display: flex;
justify-content: space-between;
align-items: center;
gap: 6px;
}
.stat-value {
font-size: 24px;
font-weight: 700;
color: var(--navy);
letter-spacing: -0.02em;
}
.stat-sub {
font-size: 11px;
color: var(--gray-500);
margin-top: 3px;
}
/* Filter toggle (Tous / Alertes) */
.filter-toggle-group {
display: inline-flex;
background: var(--gray-100);
border: 1px solid var(--gray-200);
border-radius: 8px;
padding: 3px;
gap: 2px;
}
.filter-toggle {
background: transparent;
border: none;
padding: 6px 14px;
border-radius: 6px;
font-size: 13px;
font-weight: 500;
color: var(--gray-700);
cursor: pointer;
transition: all 0.15s;
}
.filter-toggle:hover {
background: rgba(18, 110, 130, 0.06);
}
.filter-toggle.active {
background: var(--navy);
color: white;
font-weight: 600;
}
.filter-toggle.active.filter-toggle-alert {
background: var(--danger);
}
/* Boutons Contact rapide / Dossier complet — grosse version */
.action-btn-big {
padding: 28px 16px;
gap: 8px;
}
.action-btn-big .action-btn-mark {
font-size: 32px;
}
.action-btn-big > div:nth-child(2) {
font-size: 13px;
}
.action-btn-sub {
font-size: 10px;
color: var(--gray-500);
font-weight: 500;
text-transform: none;
letter-spacing: 0;
margin-top: 2px;
}
/* SECTION DETAIL */
.detail-section {
margin-bottom: 24px;
}
.detail-section-header {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 12px;
padding-bottom: 8px;
border-bottom: 1px solid var(--gray-200);
}
.detail-section-title {
font-size: 12px;
font-weight: 700;
color: var(--navy);
text-transform: uppercase;
letter-spacing: 0.06em;
}
/* HIDDEN */
.hidden {
display: none !important;
}
/* SCROLLBAR */
::-webkit-scrollbar {
width: 8px;
height: 8px;
}
::-webkit-scrollbar-track {
background: var(--gray-100);
}
::-webkit-scrollbar-thumb {
background: var(--gray-300);
border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
background: var(--gray-400);
}
/* FONT LOADING */
@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@500;600&display=swap");
.rap-scope {
/* ═══ PENNYLANE PALETTE — Crème + Vert pétrole ═══ */
--bg: #fafaf7; /* Crème principal */
--bg-2: #ffffff; /* Surface cartes */
--bg-3: #f5f4ee; /* Surface 2 (headers, hovers) */
--bg-4: #efeee7; /* Surface 3 (subtle highlights) */
--border: #e8e7e0; /* Bordure standard */
--border-light: #dcdbd3; /* Bordure plus claire */
--border-bright: #c9cdc6; /* Bordure focus */
--text: #1a2421; /* Texte principal */
--text-dim: #3d4742; /* Texte secondaire */
--text-muted: #6f7973; /* Texte tertiaire */
--text-faint: #8b948e; /* Texte placeholder */
--orange: #0F766E; /* Accent = vert pétrole (renommé orange pour compat) */
--orange-dark: #0B5D57;
--orange-light: #14A396;
--orange-bg: rgba(18, 110, 130, 0.1);
--green: #15803d;
--green-bg: rgba(21, 128, 61, 0.12);
--warn: #c2410c;
--warn-bg: rgba(194, 65, 12, 0.1);
--red: #b91c1c;
--red-bg: rgba(185, 28, 28, 0.08);
--info: #0369a1;
--radius: 6px;
--transition: 140ms cubic-bezier(0.4, 0, 0.2, 1);
}
.rap-scope button {
font-family: inherit;
cursor: pointer;
border: none;
background: none;
color: inherit;
font-size: inherit;
}
.rap-scope input,
.rap-scope select,
.rap-scope textarea {
font-family: inherit;
font-size: 14px;
}
.rap-scope input[type="text"],
.rap-scope input[type="email"],
.rap-scope input[type="tel"],
.rap-scope input[type="date"],
.rap-scope input[type="number"],
.rap-scope select,
.rap-scope textarea {
width: 100%;
padding: 8px 11px;
background: var(--bg-2);
border: 1px solid var(--border-light);
border-radius: var(--radius);
color: var(--text);
transition: border-color var(--transition);
}
.rap-scope input:focus,
.rap-scope select:focus,
.rap-scope textarea:focus {
outline: none;
border-color: var(--orange);
}
.rap-scope input::placeholder,
.rap-scope textarea::placeholder {
color: var(--text-muted);
}
.rap-scope textarea {
resize: vertical;
min-height: 60px;
font-family: inherit;
}
.rap-scope select {
-webkit-appearance: none;
appearance: none;
background-image: url("data:image/svg+xml;utf8,");
background-repeat: no-repeat;
background-position: right 11px center;
padding-right: 30px;
}
.rap-scope label {
display: block;
font-size: 11px;
font-weight: 500;
color: var(--text-dim);
margin-bottom: 5px;
text-transform: uppercase;
letter-spacing: 0.04em;
}
.rap-scope .req {
color: var(--red);
margin-left: 3px;
}
/* ═══ LAYOUT ═══ */
.rap-scope .app {
display: grid;
grid-template-columns: 240px 1fr;
grid-template-rows: 48px 1fr 56px;
grid-template-areas: "header header" "sidebar main" "footer footer";
height: 100vh;
height: 100dvh;
}
@media (max-width: 900px) {
.rap-scope .app {
grid-template-columns: 1fr;
grid-template-areas: "header" "main" "footer";
}
/* .app en plus pour battre la règle de base .rap-scope .sidebar
(display:flex) définie plus bas dans ce fichier. */
.rap-scope .app .sidebar {
display: none;
position: fixed;
top: 48px;
bottom: 56px;
left: 0;
width: 260px;
z-index: 200;
box-shadow: 6px 0 24px rgba(18, 110, 130, 0.12);
}
.rap-scope .app .sidebar.open {
display: flex;
}
.rap-scope .menu-toggle {
display: flex !important;
}
}
/* ═══ MODE SPLIT PDF (PDF à gauche + Contrat & garantie à droite) ═══
Activé via la classe .rap-pdf-split-mode sur #tab-rapport-app.
Cache la sidebar gauche du rapport, pousse le main à droite via margin-left:50vw,
et le panel PDF occupe les 50% gauches, fixe, sans drag/resize. */
.rap-scope.rap-pdf-split-mode .app {
grid-template-columns: 1fr;
grid-template-areas: "header" "main" "footer";
}
.rap-scope.rap-pdf-split-mode .sidebar {
display: none !important;
}
.rap-scope.rap-pdf-split-mode .main {
width: 50vw;
max-width: 50vw;
margin-left: 50vw;
border-left: 1px solid var(--border-light);
}
.rap-scope.rap-pdf-split-mode .footer {
width: 50vw;
max-width: 50vw;
margin-left: 50vw;
border-left: 1px solid var(--border-light);
}
/* Le panel PDF en mode split occupe la moitié gauche, ancré, sans drag */
body.rap-pdf-split-mode #ctrPdfViewer {
top: 0 !important;
left: 0 !important;
right: auto !important;
bottom: 0 !important;
width: 50vw !important;
height: 100vh !important;
border-radius: 0 !important;
border-left: none !important;
border-top: none !important;
border-bottom: none !important;
resize: none !important;
box-shadow: 6px 0 24px rgba(0, 0, 0, 0.1) !important;
}
body.rap-pdf-split-mode #ctrPdfHeader {
cursor: default !important;
}
/* Indicateur visuel "mode split" dans le header du PDF */
body.rap-pdf-split-mode #ctrPdfHeader::after {
content: "Mode lecture & saisie";
font-size: 10px;
color: #0F766E;
background: #E8F4F2;
padding: 2px 7px;
border-radius: 9px;
font-weight: 700;
letter-spacing: 0.3px;
margin-left: 8px;
}
/* ═══ COUCHE DE TEXTE SÉLECTIONNABLE (pdf.js TextLayer) ═══
Ces styles rendent les spans positionnés par pdf.js invisibles
à l'œil mais sélectionnables avec la souris (pour copier/coller). */
.ctrPdfTextLayer {
position: absolute;
text-align: initial;
inset: 0;
overflow: hidden;
opacity: 1;
line-height: 1;
text-size-adjust: none;
forced-color-adjust: none;
transform-origin: 0 0;
z-index: 2;
cursor: text;
}
.ctrPdfTextLayer span,
.ctrPdfTextLayer br {
color: transparent;
position: absolute;
white-space: pre;
cursor: text;
transform-origin: 0% 0%;
}
.ctrPdfTextLayer ::selection {
background: rgba(15, 118, 110, 0.35);
color: transparent;
}
.ctrPdfTextLayer ::-moz-selection {
background: rgba(15, 118, 110, 0.35);
color: transparent;
}
/* Évite que la text layer écrase visuellement le canvas */
.ctrPdfTextLayer * {
pointer-events: auto;
}
/* ═══ HEADER ═══ */
/* ═════════════════════════════════════════════════════════════
§RAP_HEADER Header refondu — 3 zones équilibrées
┌──────────────────────────────────────────────────────────┐
│ [≡ ← Retour] DOSSIER · NOM [↻ Synchro] │
│ [━━━━━░░] 5/8 │
└──────────────────────────────────────────────────────────┘
═════════════════════════════════════════════════════════════ */
.rap-scope .header {
grid-area: header;
background: linear-gradient(180deg, #ffffff, #fafaf7);
border-bottom: 1px solid var(--border-light, #e5e7eb);
display: flex;
align-items: center;
padding: 10px 18px;
gap: 14px;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}
.rap-scope .header-left {
display: flex;
align-items: center;
gap: 10px;
flex: 1;
min-width: 0;
}
.rap-scope .menu-toggle {
width: 34px;
height: 34px;
display: flex;
align-items: center;
justify-content: center;
color: var(--gray-600, #6b7280);
font-size: 19px;
border-radius: 8px;
transition: 0.15s;
cursor: pointer;
background: transparent;
border: none;
}
.rap-scope .menu-toggle:hover {
background: var(--gray-100, #f3f4f6);
color: var(--navy, #0F766E);
}
/* ─── Groupe gauche : Retour ─── */
.rap-scope .rap-header-nav {
display: flex;
align-items: center;
gap: 8px;
flex-shrink: 0;
}
.rap-scope .rap-header-back {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 8px 14px;
background: var(--white, #fff);
color: var(--gray-700, #374151);
border: 1px solid var(--gray-300, #d1d5db);
border-radius: 8px;
font-size: 13px;
font-weight: 600;
cursor: pointer;
font-family: inherit;
letter-spacing: 0.01em;
transition: all 0.15s;
}
.rap-scope .rap-header-back:hover {
background: var(--gray-50, #f9fafb);
border-color: var(--navy, #0F766E);
color: var(--navy, #0F766E);
transform: translateX(-2px);
}
.rap-scope .rap-header-back:active {
transform: translateX(0);
}
.rap-scope .rap-header-back svg {
width: 15px;
height: 15px;
flex-shrink: 0;
}
/* ─── Centre : titre dossier + progression ─── */
.rap-scope .rap-header-center {
flex: 1;
min-width: 0;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 5px;
padding: 0 12px;
}
.rap-scope .rap-header-doss {
display: flex;
align-items: center;
gap: 8px;
font-size: 14px;
color: var(--gray-700, #374151);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
max-width: 100%;
}
.rap-scope .rap-header-doss-num {
font-weight: 800;
color: var(--navy, #0F766E);
font-family: "JetBrains Mono", "Menlo", monospace;
font-size: 13px;
background: rgba(15, 118, 110, 0.08);
padding: 2px 9px;
border-radius: 5px;
letter-spacing: 0.02em;
}
.rap-scope .rap-header-doss-sep {
color: var(--gray-400, #9ca3af);
font-weight: 300;
}
.rap-scope .rap-header-doss-name {
font-weight: 700;
color: var(--gray-900, #111827);
font-size: 14.5px;
}
.rap-scope .rap-header-prog {
display: flex;
align-items: center;
gap: 9px;
width: 100%;
max-width: 380px;
}
.rap-scope .rap-header-prog-bar {
flex: 1;
height: 5px;
background: var(--gray-200, #e5e7eb);
border-radius: 3px;
overflow: hidden;
}
.rap-scope .rap-header-prog-fill {
height: 100%;
width: 0%;
background: linear-gradient(90deg, var(--navy, #0F766E), #14a085);
transition: width 0.35s ease;
border-radius: 3px;
}
.rap-scope .rap-header-prog-txt {
font-size: 10.5px;
font-weight: 700;
color: var(--gray-600, #4b5563);
white-space: nowrap;
font-family: "JetBrains Mono", "Menlo", monospace;
letter-spacing: 0.02em;
}
/* ─── Droite : Synchroniser ─── */
.rap-scope .rap-header-sync {
display: inline-flex;
align-items: center;
gap: 10px;
padding: 8px 14px;
background: linear-gradient(135deg, var(--navy, #0F766E), #0d5f6a);
color: #fff;
border: none;
border-radius: 8px;
cursor: pointer;
font-family: inherit;
transition: all 0.15s;
box-shadow: 0 2px 6px rgba(15, 118, 110, 0.3);
flex-shrink: 0;
}
.rap-scope .rap-header-sync:hover {
background: linear-gradient(135deg, #0d5f6a, #0a4a52);
transform: translateY(-1px);
box-shadow: 0 4px 12px rgba(15, 118, 110, 0.45);
}
.rap-scope .rap-header-sync:active {
transform: translateY(0);
}
.rap-scope .rap-header-sync svg {
width: 17px;
height: 17px;
flex-shrink: 0;
}
.rap-scope .rap-header-sync-lbl {
display: flex;
flex-direction: column;
align-items: flex-start;
line-height: 1.15;
}
.rap-scope .rap-header-sync-title {
font-size: 12.5px;
font-weight: 800;
letter-spacing: 0.02em;
}
.rap-scope .rap-header-sync-sub {
font-size: 10px;
font-weight: 500;
opacity: 0.85;
letter-spacing: 0.04em;
text-transform: uppercase;
}
/* ─── Responsive ─── */
@media (max-width: 1100px) {
.rap-scope .rap-header-center {
padding: 0 6px;
}
.rap-scope .rap-header-doss-name {
font-size: 13px;
}
}
@media (max-width: 900px) {
.rap-scope .rap-header-prog {
max-width: 240px;
}
}
@media (max-width: 768px) {
.rap-scope .rap-header-back span,
.rap-scope .rap-header-sync-lbl {
display: none;
}
.rap-scope .rap-header-back,
.rap-scope .rap-header-sync {
padding: 9px 11px;
}
.rap-scope .rap-header-center {
padding: 0 4px;
}
.rap-scope .rap-header-doss-num {
font-size: 11.5px;
padding: 2px 6px;
}
.rap-scope .rap-header-doss-name {
font-size: 12.5px;
}
}
.rap-scope .menu-toggle {
display: flex;
}
/* Quand sidebar collapsed sur desktop */
@media (min-width: 901px) {
.rap-scope .app.sidebar-collapsed {
grid-template-columns: 0 1fr;
}
.rap-scope .app.sidebar-collapsed .sidebar {
display: none;
}
}
.rap-scope .header-title {
flex: 1;
text-align: center;
font-size: 13px;
font-weight: 500;
color: var(--text);
letter-spacing: 0.01em;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.rap-scope .header-title strong {
color: var(--orange);
font-weight: 600;
}
.rap-scope .header-icons {
display: flex;
gap: 4px;
}
.rap-scope .header-icon {
width: 32px;
height: 32px;
display: flex;
align-items: center;
justify-content: center;
color: var(--text-dim);
border-radius: var(--radius);
font-size: 14px;
transition: all var(--transition);
}
.rap-scope .header-icon:hover {
background: var(--bg-4);
color: var(--orange);
}
/* ═══ SIDEBAR ═══ */
.rap-scope .sidebar {
grid-area: sidebar;
background: var(--bg-2);
border-right: 1px solid var(--border-light);
display: flex;
flex-direction: column;
overflow: hidden;
}
.rap-scope .sidebar-scroll {
flex: 1;
overflow-y: auto;
padding: 6px 0;
}
.rap-scope .nav-item {
display: flex;
align-items: center;
width: 100%;
padding: 11px 14px 11px 8px;
font-size: 13px;
color: var(--text-dim);
text-align: left;
border-left: 3px solid transparent;
border-bottom: 1px solid var(--border);
transition: all var(--transition);
}
.rap-scope .nav-item:hover {
background: var(--bg-3);
color: var(--text);
}
.rap-scope .nav-item.active {
background: var(--bg-3);
color: var(--orange);
border-left-color: var(--orange);
font-weight: 600;
}
.rap-scope .nav-item-label {
flex: 1;
}
.rap-scope .nav-item-status {
width: 8px;
height: 24px;
border-radius: 1px;
margin-right: 10px;
flex-shrink: 0;
}
.rap-scope .nav-item-status.complete {
background: var(--green);
}
.rap-scope .nav-item-status.partial {
background: var(--bg-4);
}
.rap-scope .nav-item-status.empty {
background: var(--bg-4);
}
.rap-scope .nav-item-status.shortcut {
background: transparent;
border-left: 2px dashed var(--orange);
width: 6px;
}
.rap-scope .nav-item-shortcut .nav-item-label {
color: var(--orange);
font-style: italic;
font-size: 12px;
}
.rap-scope .nav-item-shortcut.active .nav-item-label {
font-weight: 700;
}
.rap-scope .sidebar-bottom {
border-top: 1px solid var(--border-light);
padding: 10px;
display: flex;
flex-direction: column;
gap: 6px;
background: var(--bg);
}
.rap-scope .sidebar-btn {
background: var(--orange);
color: white;
padding: 9px 12px;
border-radius: var(--radius);
font-size: 11px;
font-weight: 600;
text-align: left;
line-height: 1.3;
transition: background var(--transition);
}
.rap-scope .sidebar-btn:hover {
background: var(--orange-dark);
}
.rap-scope .sidebar-btn small {
display: block;
font-size: 9px;
opacity: 0.85;
margin-top: 2px;
font-weight: 400;
}
.rap-scope .sidebar-btn.syncing {
background: var(--orange-bg);
color: var(--orange);
border: 1px solid var(--orange);
cursor: wait;
}
.rap-scope .sidebar-btn.synced {
background: var(--green-bg);
color: var(--green);
border: 1px solid var(--green);
}
.rap-scope .sidebar-btn-reset {
background: transparent;
color: var(--red);
padding: 8px 12px;
border: 1px solid var(--red);
border-radius: var(--radius);
font-size: 11px;
font-weight: 600;
text-align: center;
letter-spacing: 0.02em;
transition: all var(--transition);
margin-top: 4px;
}
.rap-scope .sidebar-btn-reset:hover {
background: var(--red);
color: white;
}
/* Legacy compat - encore utilisé ? Garde pour sécurité */
.rap-scope .sidebar-btn-secondary {
background: var(--bg-4);
color: var(--text);
padding: 8px 12px;
border-radius: var(--radius);
font-size: 11px;
font-weight: 600;
text-align: center;
transition: background var(--transition);
}
.rap-scope .sidebar-btn-secondary:hover {
background: var(--border-bright);
}
.rap-scope .sidebar-btn-alt {
background: var(--bg-2);
color: var(--orange);
padding: 8px 12px;
border: 1px solid var(--orange);
border-radius: var(--radius);
font-size: 11px;
font-weight: 600;
text-align: center;
letter-spacing: 0.02em;
transition: all var(--transition);
}
.rap-scope .sidebar-btn-alt:hover {
background: var(--orange);
color: white;
}
.rap-scope .sidebar-btn-alt.syncing {
background: var(--orange-bg);
color: var(--orange);
cursor: wait;
}
.rap-scope .sidebar-btn-alt.synced {
background: var(--green-bg);
color: var(--green);
border-color: var(--green);
}
/* ═══ MAIN ═══ */
.rap-scope .main {
grid-area: main;
overflow-y: auto;
background: var(--bg);
}
.rap-scope .page-header {
text-align: center;
padding: 18px 16px 8px;
border-bottom: 1px solid var(--border);
background: var(--bg);
position: sticky;
top: 0;
z-index: 10;
}
.rap-scope .page-title {
font-size: 22px;
font-weight: 600;
color: var(--orange);
letter-spacing: -0.01em;
}
.rap-scope .page-content {
padding: 18px 20px;
max-width: 980px;
margin: 0 auto;
}
/* ═══ FORM ELEMENTS ═══ */
.rap-scope .form-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 14px;
}
.rap-scope .form-grid-full {
grid-column: 1/-1;
}
.rap-scope .form-row {
margin-bottom: 14px;
}
.rap-scope .form-static-value {
padding: 9px 12px;
background: var(--bg-3);
border: 1px solid var(--border);
border-radius: var(--radius);
font-size: 13px;
color: var(--text);
font-weight: 500;
min-height: 38px;
display: flex;
align-items: center;
}
@media (max-width: 640px) {
.rap-scope .form-grid {
grid-template-columns: 1fr;
}
}
.rap-scope .section-block {
background: var(--bg-2);
border: 1px solid var(--border);
border-radius: var(--radius);
margin-bottom: 14px;
overflow: hidden;
}
.rap-scope .section-block-header {
padding: 10px 14px;
background: var(--bg-3);
border-bottom: 1px solid var(--border);
font-size: 13px;
font-weight: 600;
color: var(--orange);
display: flex;
justify-content: space-between;
align-items: center;
cursor: pointer;
text-transform: uppercase;
letter-spacing: 0.04em;
}
.rap-scope .section-block-header.collapsed {
border-bottom: none;
}
.rap-scope .section-block-header::after {
content: "⌄";
color: var(--text-dim);
transition: transform var(--transition);
font-size: 18px;
line-height: 1;
}
.rap-scope .section-block-header.collapsed::after {
transform: rotate(-90deg);
}
.rap-scope .section-block-body {
padding: 14px;
}
.rap-scope .section-block-body.collapsed {
display: none;
}
/* Pill buttons (radio-like) */
.rap-scope .pill-group {
display: flex;
flex-wrap: wrap;
gap: 0;
border-radius: var(--radius);
overflow: hidden;
border: 1px solid var(--border-light);
}
.rap-scope .pill-option {
flex: 1;
min-width: 80px;
position: relative;
}
.rap-scope .pill-option input {
display: none;
}
.rap-scope .pill-option label {
display: block;
padding: 9px 12px;
background: var(--bg-2);
text-align: center;
cursor: pointer;
font-size: 12px;
font-weight: 500;
color: var(--text-dim);
margin: 0;
text-transform: none;
letter-spacing: 0;
border-right: 1px solid var(--border);
transition: all var(--transition);
}
.rap-scope .pill-option:last-child label {
border-right: none;
}
.rap-scope .pill-option input:checked + label {
background: var(--orange);
color: white;
font-weight: 600;
}
.rap-scope .pill-group.mandatory-empty {
border-color: var(--red);
background: var(--red-bg);
}
.rap-scope .pill-group.mandatory-empty .pill-option label {
background: transparent;
color: var(--red);
}
/* Pill group multiple (for OK / Non / etc.) */
.rap-scope .pill-row {
display: flex;
gap: 6px;
flex-wrap: wrap;
}
.rap-scope .pill-row .pill-btn {
padding: 8px 14px;
background: var(--bg-2);
border: 1px solid var(--border-light);
border-radius: var(--radius);
font-size: 12px;
font-weight: 500;
color: var(--text-dim);
transition: all var(--transition);
}
.rap-scope .pill-row .pill-btn:hover {
border-color: var(--border-bright);
color: var(--text);
}
.rap-scope .pill-row .pill-btn.active {
background: var(--orange);
border-color: var(--orange);
color: white;
}
.rap-scope .pill-row.mandatory-empty .pill-btn {
background: var(--red-bg);
border-color: var(--red);
color: var(--red);
}
.rap-scope .field-warning {
border-color: var(--red) !important;
background: var(--red-bg) !important;
}
.rap-scope .subsection-title {
background: var(--orange);
color: white;
padding: 9px 14px;
font-size: 13px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.04em;
margin: 18px -14px 14px;
}
.rap-scope .subsection-title:first-child {
margin-top: 0;
}
/* ═══ PIÈCES — page du module Rapport ═══ */
.rap-scope .pieces-page,
.rap-scope .suivi-page {
padding-bottom: 40px;
}
.rap-scope .pieces-header,
.rap-scope .suivi-header {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 18px;
gap: 14px;
}
.rap-scope .pieces-category {
margin-bottom: 24px;
}
.rap-scope .pieces-category-header {
display: flex;
align-items: center;
gap: 10px;
padding: 10px 14px;
background: var(--bg-3);
border-radius: 6px 6px 0 0;
border: 1px solid var(--border);
border-bottom: none;
}
.rap-scope .pieces-category-icon {
font-size: 18px;
}
.rap-scope .pieces-category-label {
font-size: 13px;
font-weight: 600;
color: var(--text);
text-transform: uppercase;
letter-spacing: 0.02em;
}
.rap-scope .pieces-category-count {
margin-left: auto;
background: var(--orange);
color: white;
font-size: 11px;
font-weight: 700;
padding: 3px 10px;
border-radius: 999px;
}
/* ─── Éditeur Pièces du logement (section Risque) ─── */
.rap-scope .pieces-logement {
margin: 14px 0 18px;
padding: 14px;
background: linear-gradient(135deg, rgba(18, 110, 130, 0.04), rgba(245, 158, 11, 0.04));
border: 1px solid var(--gray-200, #e5e7eb);
border-left: 4px solid var(--navy, #0f766e);
border-radius: 10px;
}
.rap-scope .pieces-logement-header {
display: flex;
justify-content: space-between;
align-items: center;
gap: 12px;
flex-wrap: wrap;
margin-bottom: 12px;
}
.rap-scope .pieces-logement-stats {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
gap: 8px;
margin-bottom: 14px;
}
.rap-scope .pl-stat {
background: var(--white);
border: 1px solid var(--gray-200);
border-radius: 7px;
padding: 7px 10px;
}
.rap-scope .pl-stat-label {
font-size: 10px;
font-weight: 700;
color: var(--gray-500);
text-transform: uppercase;
letter-spacing: 0.04em;
margin-bottom: 2px;
}
.rap-scope .pl-stat-value {
font-size: 14px;
font-weight: 800;
color: var(--navy, #0f766e);
font-family: "JetBrains Mono", "Menlo", monospace;
}
.rap-scope .pl-stat-editable {
background: rgba(245, 158, 11, 0.06);
border-color: rgba(245, 158, 11, 0.3);
}
.rap-scope .pl-stat-select {
width: 100%;
margin-top: 2px;
padding: 4px 6px;
border: 1px solid var(--gray-300);
border-radius: 4px;
font-size: 13px;
font-weight: 700;
color: var(--navy, #0f766e);
font-family: "JetBrains Mono", "Menlo", monospace;
background: var(--white);
cursor: pointer;
}
.rap-scope .pl-stat-select:focus {
outline: none;
border-color: #ea580c;
box-shadow: 0 0 0 2px rgba(234, 88, 12, 0.18);
}
.rap-scope .pieces-logement-empty {
padding: 18px;
text-align: center;
color: var(--gray-600);
background: rgba(255, 255, 255, 0.6);
border-radius: 7px;
border: 1px dashed var(--gray-300);
font-size: 13px;
}
.rap-scope .pieces-logement-list {
display: flex;
flex-direction: column;
gap: 5px;
background: var(--white);
border-radius: 7px;
padding: 6px;
}
.rap-scope .pl-row {
display: grid;
grid-template-columns: 2fr 0.8fr 0.8fr 0.8fr 1fr 1fr 32px;
gap: 6px;
align-items: center;
padding: 6px 4px;
border-bottom: 1px solid var(--gray-100);
}
.rap-scope .pl-row:last-child {
border-bottom: none;
}
.rap-scope .pl-row-header {
font-size: 10.5px;
font-weight: 700;
color: var(--gray-500);
text-transform: uppercase;
letter-spacing: 0.04em;
border-bottom: 2px solid var(--gray-200);
padding-bottom: 6px;
}
.rap-scope .pl-row-principale {
background: rgba(15, 118, 110, 0.04);
border-radius: 5px;
}
.rap-scope .pl-row select,
.rap-scope .pl-row input {
width: 100%;
padding: 6px 8px;
border: 1px solid var(--gray-200);
border-radius: 5px;
font-size: 12.5px;
font-family: inherit;
}
.rap-scope .pl-row input {
font-family: "JetBrains Mono", "Menlo", monospace;
text-align: right;
}
.rap-scope .pl-row input:focus,
.rap-scope .pl-row select:focus {
outline: none;
border-color: var(--navy, #0f766e);
box-shadow: 0 0 0 2px rgba(15, 118, 110, 0.15);
}
.rap-scope .pl-calc {
text-align: right;
font-family: "JetBrains Mono", "Menlo", monospace;
font-size: 12.5px;
font-weight: 700;
color: var(--navy, #0f766e);
padding: 0 4px;
}
.rap-scope .pl-del {
background: none;
border: none;
color: #dc2626;
font-size: 18px;
font-weight: 700;
cursor: pointer;
width: 28px;
height: 28px;
border-radius: 5px;
line-height: 1;
}
.rap-scope .pl-del:hover {
background: #fee2e2;
color: #991b1b;
}
.rap-scope .pieces-logement-hint {
margin-top: 10px;
font-size: 11px;
color: var(--gray-600);
font-style: italic;
padding-top: 8px;
border-top: 1px dashed var(--gray-200);
}
@media (max-width: 900px) {
.rap-scope .pl-row {
grid-template-columns: 2fr 0.7fr 0.7fr 0.7fr 32px;
}
.rap-scope .pl-row > div:nth-child(5),
.rap-scope .pl-row > div:nth-child(6) {
display: none;
}
}
.rap-scope .pieces-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
gap: 10px;
padding: 12px;
background: var(--bg-2);
border: 1px solid var(--border);
border-top: none;
border-radius: 0 0 6px 6px;
}
.rap-scope .piece-card {
background: var(--bg);
border: 1px solid var(--border);
border-radius: 6px;
overflow: hidden;
display: flex;
flex-direction: column;
transition: all 150ms ease;
}
.rap-scope .piece-card:hover {
border-color: var(--orange);
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
transform: translateY(-2px);
}
.rap-scope .piece-preview {
cursor: pointer;
height: 180px;
display: flex;
align-items: center;
justify-content: center;
background: var(--bg-3);
overflow: hidden;
position: relative;
}
.rap-scope .piece-preview img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.rap-scope .piece-preview-icon {
font-size: 42px;
opacity: 0.6;
display: flex;
align-items: center;
justify-content: center;
height: 100%;
width: 100%;
}
.rap-scope .rap-piece-pdf-preview {
width: 100%;
height: 100%;
}
/* ─── Zone drop dans onglet Pièces du module Rapport ─── */
.rap-scope .rap-pieces-drop {
margin: 12px 0 16px;
padding: 18px 14px;
border: 2px dashed var(--border, #cbd5e1);
border-radius: 10px;
background: linear-gradient(135deg, rgba(245, 158, 11, 0.05), rgba(18, 110, 130, 0.04));
text-align: center;
transition: all 0.18s;
}
.rap-scope .rap-pieces-drop.drag-active {
border-color: #ea580c;
border-style: solid;
background: rgba(234, 88, 12, 0.08);
transform: scale(1.005);
}
.rap-scope .rap-pieces-drop-icon {
font-size: 24px;
color: #ea580c;
line-height: 1;
margin-bottom: 4px;
}
.rap-scope .rap-pieces-drop-text {
font-size: 14px;
font-weight: 700;
color: var(--gray-900);
margin-bottom: 2px;
}
.rap-scope .rap-pieces-drop-sub {
font-size: 11.5px;
color: var(--gray-600);
margin-bottom: 10px;
}
.rap-scope .rap-pieces-drop-actions {
display: flex;
gap: 14px;
flex-wrap: wrap;
justify-content: center;
align-items: center;
}
.rap-scope .rap-pieces-pickbtn {
cursor: pointer;
font-size: 12.5px;
padding: 8px 14px;
border: 1px solid var(--navy);
color: var(--navy);
border-radius: 8px;
background: var(--white);
font-weight: 600;
}
.rap-scope .rap-pieces-pickbtn:hover {
background: var(--navy);
color: #fff;
}
.rap-scope .rap-pieces-pickbtn-folder {
border-color: #ea580c;
color: #9a3412;
background: #ffedd5;
}
.rap-scope .rap-pieces-pickbtn-folder:hover {
background: #fed7aa;
color: #7c2d12;
}
.rap-scope .piece-info {
padding: 10px 12px;
flex: 1;
border-top: 1px solid var(--border-light);
}
.rap-scope .piece-name {
font-size: 12px;
font-weight: 600;
color: var(--text);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.rap-scope .piece-meta {
font-size: 10px;
color: var(--text-muted);
margin-top: 2px;
}
.rap-scope .piece-desc {
font-size: 11px;
color: var(--text-dim);
margin-top: 4px;
line-height: 1.3;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.rap-scope .piece-actions {
display: flex;
gap: 2px;
border-top: 1px solid var(--border-light);
}
.rap-scope .piece-action-btn {
flex: 1;
padding: 6px 0;
background: transparent;
border: none;
cursor: pointer;
font-size: 14px;
color: var(--text-dim);
transition: all 150ms ease;
}
.rap-scope .piece-action-btn:hover {
background: var(--bg-3);
color: var(--text);
}
.rap-scope .piece-action-btn.piece-action-danger:hover {
background: rgba(239, 68, 68, 0.12);
color: #dc2626;
}
/* ═══ SUIVI — page du module Rapport ═══ */
.rap-scope .suivi-actions-bar {
display: flex;
gap: 8px;
flex-wrap: wrap;
margin-bottom: 18px;
padding: 12px;
background: var(--bg-2);
border: 1px solid var(--border);
border-radius: 6px;
}
.rap-scope .suivi-action-btn {
flex: 1;
min-width: 90px;
padding: 10px 12px;
background: var(--bg);
border: 1px solid var(--border);
border-radius: 6px;
cursor: pointer;
font-size: 12px;
font-weight: 600;
color: var(--text);
display: flex;
align-items: center;
justify-content: center;
gap: 6px;
transition: all 150ms ease;
}
.rap-scope .suivi-action-btn:hover {
background: var(--orange);
color: white;
border-color: var(--orange);
transform: translateY(-1px);
}
.rap-scope .suivi-action-btn span {
font-size: 16px;
}
.rap-scope .suivi-section {
margin-bottom: 24px;
}
.rap-scope .suivi-section-header {
display: flex;
align-items: center;
justify-content: space-between;
padding: 10px 14px;
background: var(--bg-3);
border: 1px solid var(--border);
border-bottom: none;
border-radius: 6px 6px 0 0;
font-size: 12px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.04em;
color: var(--text);
}
.rap-scope .btn-ghost-link {
background: none;
border: none;
cursor: pointer;
font-size: 11px;
color: var(--orange);
font-weight: 600;
}
.rap-scope .btn-ghost-link:hover {
text-decoration: underline;
}
.rap-scope .suivi-photos-strip {
display: flex;
gap: 8px;
overflow-x: auto;
padding: 12px;
background: var(--bg-2);
border: 1px solid var(--border);
border-top: none;
border-radius: 0 0 6px 6px;
}
.rap-scope .suivi-photo-tile {
flex-shrink: 0;
width: 100px;
height: 80px;
border-radius: 4px;
overflow: hidden;
cursor: pointer;
border: 1px solid var(--border);
transition: all 150ms ease;
}
.rap-scope .suivi-photo-tile:hover {
border-color: var(--orange);
transform: scale(1.05);
}
.rap-scope .suivi-photo-tile img {
width: 100%;
height: 100%;
object-fit: cover;
}
.rap-scope .suivi-timeline {
padding: 14px;
background: var(--bg-2);
border: 1px solid var(--border);
border-top: none;
border-radius: 0 0 6px 6px;
}
.rap-scope .suivi-action {
display: flex;
gap: 12px;
padding: 12px 0;
border-bottom: 1px solid var(--border-light);
}
.rap-scope .suivi-action:last-child {
border-bottom: none;
}
.rap-scope .suivi-action-icon {
flex-shrink: 0;
width: 38px;
height: 38px;
display: flex;
align-items: center;
justify-content: center;
background: var(--bg-3);
border: 1px solid var(--border);
border-radius: 50%;
font-size: 11px;
font-weight: 800;
letter-spacing: 0.02em;
color: var(--gray-700);
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
.rap-scope .suivi-action.action-mail .suivi-action-icon {
background: #dbeafe;
color: #1e40af;
border-color: #93c5fd;
}
.rap-scope .suivi-action.action-appel .suivi-action-icon {
background: #dcfce7;
color: #166534;
border-color: #86efac;
}
.rap-scope .suivi-action.action-note .suivi-action-icon {
background: #fef3c7;
color: #92400e;
border-color: #fcd34d;
}
.rap-scope .suivi-action.action-rappel .suivi-action-icon {
background: #fee2e2;
color: #991b1b;
border-color: #fca5a5;
}
.rap-scope .suivi-action.action-document .suivi-action-icon,
.rap-scope .suivi-action.action-sendoc .suivi-action-icon {
background: #e0e7ff;
color: #3730a3;
border-color: #a5b4fc;
}
.rap-scope .suivi-action.action-report .suivi-action-icon {
background: rgba(18, 110, 130, 0.12);
color: var(--navy-dark);
border-color: var(--navy);
}
.rap-scope .suivi-action.action-rdv .suivi-action-icon {
background: rgba(13, 148, 136, 0.12);
border-color: #0d9488;
color: #0d9488;
}
.rap-scope .suivi-action.action-creation .suivi-action-icon {
background: rgba(18, 110, 130, 0.12);
border-color: var(--navy);
color: var(--navy-dark);
}
.rap-scope .suivi-action-body {
flex: 1;
min-width: 0;
}
.rap-scope .suivi-action-title {
font-size: 13px;
font-weight: 600;
color: var(--text);
margin-bottom: 2px;
}
.rap-scope .suivi-action-subject {
font-size: 12px;
color: var(--text-dim);
margin-bottom: 4px;
}
.rap-scope .suivi-action-meta {
font-size: 11px;
color: var(--text-muted);
margin-top: 4px;
}
.rap-scope .suivi-rdv-details {
display: flex;
flex-direction: column;
gap: 4px;
padding: 8px 10px;
margin: 6px 0;
background: rgba(13, 148, 136, 0.06);
border-left: 3px solid #0d9488;
border-radius: 3px;
font-size: 12px;
color: var(--text);
}
.rap-scope .suivi-rdv-details > div {
display: flex;
gap: 8px;
align-items: baseline;
}
.rap-scope .rdv-detail-label {
font-size: 10px;
font-weight: 700;
color: #0d9488;
letter-spacing: 0.04em;
text-transform: uppercase;
flex-shrink: 0;
min-width: 80px;
}
.rap-scope .rap-input {
width: 100%;
padding: 8px 10px;
border: 1px solid var(--border);
border-radius: 4px;
background: var(--bg);
font-size: 13px;
color: var(--text);
font-family: inherit;
}
.rap-scope .rap-input:focus {
outline: none;
border-color: var(--orange);
box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.15);
}
/* ═══ TIERS TABLE ═══ */
.rap-scope .entity-table {
background: var(--bg-2);
border: 1px solid var(--border);
border-radius: var(--radius);
overflow: hidden;
}
.rap-scope .entity-row {
display: grid;
grid-template-columns: 120px 1fr 1fr auto auto;
gap: 10px;
align-items: center;
padding: 10px 14px;
border-bottom: 1px solid var(--border);
font-size: 13px;
}
.rap-scope .entity-row:last-child {
border-bottom: none;
}
.rap-scope .entity-row-header {
background: var(--bg-3);
font-size: 11px;
font-weight: 600;
color: var(--orange);
text-transform: uppercase;
letter-spacing: 0.04em;
padding: 8px 14px;
}
.rap-scope .entity-row-group {
grid-column: 1/-1;
background: var(--bg-3);
font-size: 11px;
font-weight: 600;
color: var(--orange);
text-transform: uppercase;
letter-spacing: 0.04em;
padding: 7px 14px;
border-bottom: 1px solid var(--border);
}
.rap-scope .entity-type {
font-size: 11px;
color: var(--text-dim);
text-transform: uppercase;
letter-spacing: 0.04em;
}
.rap-scope .entity-name {
color: var(--text);
}
.rap-scope .entity-co {
color: var(--text-dim);
font-size: 12px;
}
.rap-scope .tva-toggle {
display: inline-flex;
gap: 0;
border: 1px solid var(--gray-300, #c9cdc6);
border-radius: 4px;
overflow: hidden;
}
.rap-scope .tva-toggle-btn {
background: transparent;
border: none;
padding: 3px 10px;
font-size: 11px;
font-weight: 600;
color: var(--text-dim);
cursor: pointer;
transition: all var(--transition);
}
.rap-scope .tva-toggle-btn:not(:last-child) {
border-right: 1px solid var(--gray-300, #c9cdc6);
}
.rap-scope .tva-toggle-btn:hover:not(.active) {
background: var(--gray-100, #f0efe9);
color: var(--text);
}
.rap-scope .tva-toggle-btn.active {
background: var(--navy, #0F766E);
color: #fff;
}
.rap-scope .btn-detail {
background: var(--orange);
color: white;
padding: 5px 12px;
border-radius: 3px;
font-size: 11px;
font-weight: 600;
}
.rap-scope .btn-detail:hover {
background: var(--orange-dark);
}
@media (max-width: 640px) {
.rap-scope .entity-row {
grid-template-columns: 1fr auto;
}
.rap-scope .entity-type {
display: none;
}
}
.rap-scope .action-row {
display: flex;
gap: 8px;
flex-wrap: wrap;
margin-top: 10px;
}
/* ═══ RAPPORT PREVIEW ═══ */
.rap-scope .rapport-preview {
max-height: 60vh;
overflow-y: auto;
background: white;
border: 1px solid var(--border);
border-radius: var(--radius);
padding: 0;
}
.rap-scope .rap-doc {
font-family: Georgia, serif;
padding: 30px 36px;
color: var(--text);
line-height: 1.5;
}
.rap-scope .rap-header {
display: flex;
justify-content: space-between;
align-items: flex-end;
border-bottom: 3px solid var(--orange);
padding-bottom: 14px;
margin-bottom: 24px;
}
.rap-scope .rap-brand-name {
font-size: 28px;
font-weight: 700;
color: var(--orange);
letter-spacing: -0.02em;
line-height: 1;
}
.rap-scope .rap-brand-sub {
color: var(--text-dim);
font-size: 13px;
margin-top: 4px;
}
.rap-scope .rap-meta {
font-size: 12px;
color: var(--text-dim);
text-align: right;
line-height: 1.6;
}
.rap-scope .rap-h2 {
color: var(--orange);
margin-top: 24px;
margin-bottom: 10px;
font-size: 16px;
font-weight: 700;
}
.rap-scope .rap-h3 {
color: var(--text-dim);
margin-top: 14px;
margin-bottom: 8px;
font-size: 13px;
font-weight: 600;
}
.rap-scope .rap-table {
width: 100%;
border-collapse: collapse;
margin-bottom: 14px;
font-size: 13px;
}
.rap-scope .rap-table th,
.rap-scope .rap-table td {
padding: 7px 10px;
border: 1px solid var(--border);
text-align: left;
vertical-align: top;
}
.rap-scope .rap-table th {
background: var(--bg-2);
width: 35%;
font-weight: 600;
color: var(--text-dim);
}
.rap-scope .rap-signature {
margin-top: 40px;
border-top: 1px solid var(--border);
padding-top: 16px;
font-size: 13px;
color: var(--text-dim);
}
.rap-scope .rap-signature p {
margin: 3px 0;
}
/* ═══ PARTIES CARD (liens) ═══ */
.rap-scope .parties-card {
display: grid;
grid-template-columns: 1fr auto 1fr;
gap: 14px;
align-items: stretch;
background: var(--bg-2);
border: 1px solid var(--border-light);
border-radius: var(--radius);
padding: 18px;
margin-bottom: 18px;
}
.rap-scope .parties-card-section {
display: flex;
flex-direction: column;
gap: 6px;
}
.rap-scope .parties-card-label {
font-size: 10px;
font-weight: 700;
color: var(--orange);
text-transform: uppercase;
letter-spacing: 0.08em;
margin-bottom: 2px;
}
.rap-scope .parties-card-name {
font-size: 14px;
font-weight: 600;
color: var(--text);
line-height: 1.3;
}
.rap-scope .parties-card-meta {
font-size: 12px;
color: var(--text-dim);
font-style: italic;
margin-bottom: 6px;
}
.rap-scope .parties-card-empty {
font-size: 12px;
color: var(--text-muted);
font-style: italic;
}
.rap-scope .parties-card-divider {
display: flex;
align-items: center;
justify-content: center;
font-size: 24px;
color: var(--orange);
font-weight: 300;
padding: 0 8px;
}
@media (max-width: 700px) {
.rap-scope .parties-card {
grid-template-columns: 1fr;
}
.rap-scope .parties-card-divider {
padding: 8px 0;
transform: rotate(90deg);
}
}
/* ═══ INFO BANNER ═══ */
.rap-scope .info-banner {
background: var(--orange-bg);
border: 1px solid var(--orange);
color: var(--text);
padding: 14px 18px;
border-radius: var(--radius);
margin-bottom: 16px;
font-size: 13px;
line-height: 1.5;
}
.rap-scope .info-banner strong {
color: var(--orange);
font-weight: 700;
}
/* ═══ PIÈCES ENDOMMAGÉES ═══ */
.rap-scope .pieces-endommagees {
display: flex;
flex-direction: column;
gap: 12px;
margin-bottom: 14px;
}
.rap-scope .piece-item {
background: var(--bg);
border: 1px solid var(--border-light);
border-radius: var(--radius);
padding: 12px 14px;
}
.rap-scope .piece-item-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 10px;
padding-bottom: 8px;
border-bottom: 1px solid var(--border);
}
.rap-scope .piece-item-number {
font-size: 11px;
font-weight: 700;
color: var(--orange);
text-transform: uppercase;
letter-spacing: 0.06em;
}
.rap-scope .piece-item-delete {
background: transparent;
color: var(--text-muted);
font-size: 11px;
padding: 4px 8px;
border-radius: 3px;
transition: all var(--transition);
}
.rap-scope .piece-item-delete:hover {
color: var(--red);
background: var(--red-bg);
}
.rap-scope .piece-surfaces {
display: flex;
flex-wrap: wrap;
gap: 14px;
padding: 8px 12px;
background: var(--orange-bg);
border-radius: 4px;
margin: 8px 0;
font-size: 12px;
color: var(--text);
}
.rap-scope .piece-surface-item {
font-variant-numeric: tabular-nums;
}
.rap-scope .piece-empty {
padding: 14px;
text-align: center;
color: var(--text-muted);
font-size: 12px;
font-style: italic;
}
/* ═══ RENDEZ-VOUS LIST ═══ */
.rap-scope .rdv-list {
display: flex;
flex-direction: column;
gap: 14px;
margin-bottom: 14px;
}
.rap-scope .rdv-item {
background: var(--bg);
border: 1px solid var(--border-light);
border-radius: var(--radius);
padding: 12px 14px;
}
.rap-scope .rdv-item-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 12px;
padding-bottom: 10px;
border-bottom: 1px solid var(--border);
}
.rap-scope .rdv-item-number {
font-size: 11px;
font-weight: 700;
color: var(--orange);
text-transform: uppercase;
letter-spacing: 0.06em;
}
.rap-scope .rdv-item-delete {
background: transparent;
color: var(--text-muted);
font-size: 11px;
padding: 4px 8px;
border-radius: 3px;
transition: all var(--transition);
}
.rap-scope .rdv-item-delete:hover {
color: var(--red);
background: var(--red-bg);
}
.rap-scope .rdv-empty {
padding: 18px;
text-align: center;
color: var(--text-muted);
font-size: 12px;
font-style: italic;
}
/* ═══ MULTI-LIST (tels / mails) ═══ */
.rap-scope .multi-list {
display: flex;
flex-direction: column;
gap: 5px;
}
.rap-scope .multi-list-row {
display: flex;
gap: 6px;
align-items: center;
}
.rap-scope .multi-list-row input {
flex: 1;
}
.rap-scope .multi-list-del {
width: 30px;
height: 30px;
flex-shrink: 0;
background: transparent;
color: var(--text-muted);
border: 1px solid var(--border-light);
border-radius: 4px;
font-size: 16px;
line-height: 1;
transition: all var(--transition);
}
.rap-scope .multi-list-del:hover {
background: var(--red-bg);
color: var(--red);
border-color: var(--red);
}
.rap-scope .multi-list-add {
align-self: flex-start;
background: transparent;
color: var(--orange);
border: 1px dashed var(--orange);
border-radius: 4px;
padding: 5px 10px;
font-size: 11px;
font-weight: 600;
margin-top: 2px;
transition: all var(--transition);
}
.rap-scope .multi-list-add:hover {
background: var(--orange-bg);
}
/* ═══ PHOTOS BLOCK ═══ */
.rap-scope .photos-block {
margin: 6px 0 14px;
}
.rap-scope .photos-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 6px;
}
.rap-scope .photos-label {
font-size: 11px;
font-weight: 600;
color: var(--text-dim);
letter-spacing: 0.02em;
}
.rap-scope .photos-add-btn {
background: transparent;
color: var(--orange);
padding: 4px 10px;
border: 1px solid var(--orange);
border-radius: 4px;
font-size: 11px;
font-weight: 600;
letter-spacing: 0.02em;
transition: all var(--transition);
}
.rap-scope .photos-add-btn:hover {
background: var(--orange);
color: white;
}
.rap-scope .photos-empty {
display: none;
}
.rap-scope .photos-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
gap: 10px;
}
.rap-scope .photo-thumb {
position: relative;
aspect-ratio: 1;
background: var(--bg-3);
border-radius: 5px;
overflow: hidden;
cursor: pointer;
transition:
transform var(--transition),
box-shadow var(--transition);
}
.rap-scope .photo-thumb:hover {
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(18, 110, 130, 0.15);
}
.rap-scope .photo-thumb img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.rap-scope .photo-delete {
position: absolute;
top: 4px;
right: 4px;
width: 22px;
height: 22px;
background: rgba(0, 0, 0, 0.6);
color: white;
border-radius: 50%;
font-size: 14px;
line-height: 1;
display: flex;
align-items: center;
justify-content: center;
opacity: 0;
transition: opacity var(--transition);
}
.rap-scope .photo-thumb:hover .photo-delete {
opacity: 1;
}
.rap-scope .photo-delete:hover {
background: var(--red);
}
.rap-scope .photo-caption {
position: absolute;
bottom: 0;
left: 0;
right: 0;
background: linear-gradient(transparent, rgba(0, 0, 0, 0.75));
color: white;
padding: 8px 6px 4px;
font-size: 10px;
line-height: 1.3;
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
}
/* ═══ RECOURS CHECKLISTS ═══ */
.rap-scope .recours-checklist {
background: var(--bg-2);
border: 1px solid var(--orange);
border-radius: var(--radius);
padding: 14px;
margin: 6px 0 18px;
animation: slideDown 200ms cubic-bezier(0.4, 0, 0.2, 1);
}
@keyframes slideDown {
from {
opacity: 0;
transform: translateY(-6px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.rap-scope .recours-checklist-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 12px;
padding-bottom: 10px;
border-bottom: 1px solid var(--border);
gap: 10px;
}
.rap-scope .recours-checklist-title {
font-size: 12px;
font-weight: 700;
color: var(--orange);
text-transform: uppercase;
letter-spacing: 0.04em;
}
.rap-scope .recours-checklist-conv {
font-size: 11px;
color: var(--text-dim);
font-style: italic;
}
.rap-scope .recours-checklist-conv.recours-checklist-empty {
color: var(--warn);
font-style: normal;
font-weight: 600;
}
.rap-scope .recours-checklist-items {
display: flex;
flex-direction: column;
gap: 4px;
}
.rap-scope .recours-check-item {
display: flex;
align-items: center;
gap: 10px;
padding: 8px 10px;
background: var(--bg);
border: 1px solid var(--border);
border-radius: 4px;
cursor: pointer;
transition: all var(--transition);
font-size: 13px;
color: var(--text);
margin: 0;
text-transform: none;
letter-spacing: 0;
}
.rap-scope .recours-check-item:hover {
background: var(--bg-3);
border-color: var(--border-bright);
}
.rap-scope .recours-check-item.checked {
background: var(--orange-bg);
border-color: var(--orange);
color: var(--orange);
font-weight: 500;
}
.rap-scope .recours-check-item input[type="checkbox"] {
width: 16px;
height: 16px;
margin: 0;
accent-color: var(--orange);
cursor: pointer;
}
/* ═══ BUTTONS ═══ */
.rap-scope .btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 6px;
padding: 9px 14px;
font-size: 12px;
font-weight: 600;
border-radius: var(--radius);
transition: all var(--transition);
letter-spacing: 0.02em;
text-transform: uppercase;
white-space: nowrap;
}
.rap-scope .btn-primary {
background: var(--orange);
color: white;
}
.rap-scope .btn-primary:hover {
background: var(--orange-dark);
}
.rap-scope .btn-secondary {
background: var(--bg-3);
color: var(--text);
border: 1px solid var(--border-light);
}
.rap-scope .btn-secondary:hover {
background: var(--bg-4);
}
.rap-scope .btn-ghost {
color: var(--text-dim);
border: 1px solid var(--border-light);
}
.rap-scope .btn-ghost:hover {
color: var(--orange);
border-color: var(--orange);
}
.rap-scope .btn-add {
width: 24px;
height: 24px;
border-radius: 50%;
background: var(--orange);
color: white;
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 16px;
font-weight: 300;
line-height: 1;
flex-shrink: 0;
}
.rap-scope .btn-add:hover {
background: var(--orange-dark);
}
/* ═══ CHIFFRAGE ═══ */
/* Le chiffrage prend toute la largeur (override page-content) */
.rap-scope .page-content:has(.chiffrage-layout) {
padding: 0;
max-width: none;
}
/* §BARRE_CHIFFRAGE_V2 (26/07/2026) — barre d'outils en groupes nommés.
Palette charte : vert #0F766E (actions), vert foncé #0A3833 + liseré
or #C9A227 (documents), neutre (outils). */
.rap-scope .cf-toolbar {
display: flex;
flex-wrap: wrap;
gap: 10px;
margin-bottom: 14px;
align-items: stretch;
}
.rap-scope .cf-group {
background: var(--bg-2);
border: 1px solid var(--border);
border-radius: 10px;
padding: 6px 8px 7px;
}
.rap-scope .cf-group-label {
font-size: 9px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.08em;
color: var(--text-muted);
margin: 0 2px 5px;
}
.rap-scope .cf-group-btns {
display: flex;
gap: 5px;
flex-wrap: wrap;
}
.rap-scope .cf-btn {
padding: 6px 11px;
font-size: 11.5px;
font-weight: 600;
border-radius: 7px;
cursor: pointer;
border: 1px solid var(--border-bright);
background: #fff;
color: var(--text-dim);
white-space: nowrap;
transition: all var(--transition);
letter-spacing: 0.01em;
}
.rap-scope .cf-btn:hover {
border-color: #0f766e;
color: #0f766e;
}
.rap-scope .cf-btn-add {
background: #0f766e;
border-color: #0f766e;
color: #fff;
font-weight: 700;
}
.rap-scope .cf-btn-add:hover {
background: #0b5d57;
color: #fff;
}
.rap-scope .cf-btn-doc {
background: #0a3833;
border-color: #0a3833;
border-bottom: 2px solid #c9a227;
color: #fff;
font-weight: 700;
}
.rap-scope .cf-btn-doc:hover {
background: #16302b;
color: #fff;
}
.rap-scope .cf-view {
color: var(--text-muted);
}
.rap-scope .cf-view.actif {
background: #0f766e;
border-color: #0f766e;
color: #fff;
font-weight: 700;
}
/* Les puces du Contexte sont des