html, body {
height: 100%;
margin: 0;
padding: 0;
}
:root {
--primary-color: #3498db;
--primary-color-dark: #2980b9;
--secondary-color: #2ecc71;
--danger-color: #e74c3c;
--warning-color: #f39c12;
--neutral-color: #7f8c8d;
--bg-light: #F0F8FF; /* Azure blue */
--bg-white: #ffffff;
--shadow: 0 4px 12px rgba(0,0,0,0.1);
--controls-width: 100px;
--header-height: 60px;
--footer-height: 50px;
/* Thème clair (par défaut) */
--theme-bg-primary: #ffffff;
--theme-bg-secondary: #f8f9fa;
--theme-text-primary: #333333;
--theme-text-secondary: #666666;
--theme-border: #e0e0e0;
--theme-shadow: 0 4px 12px rgba(0,0,0,0.1);
--main-content-bg: rgba(255, 255, 255, 0.75); /* Variable pour le main content en mode clair */
}
/* Thème sombre */
[data-theme="dark"] {
--theme-bg-primary: #2d2d2d;
--theme-bg-secondary: #3a3a3a;
--theme-bg-deep-dark: #0a0a0a;
--theme-text-primary: #ffffff;
--theme-text-secondary: #cccccc;
--theme-border: #404040;
--theme-shadow: 0 4px 12px rgba(0,0,0,0.3);
--main-content-bg: rgba(45, 45, 45, 0.7); /* Variable pour le main content en mode sombre */
}
body {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
margin: 0;
background-color: #D4E8F7; /* Bleu azur/pastel en mode clair */
color: var(--theme-text-primary);
padding-top: 0; /* Plus de header donc pas de padding-top */
transition: background-color 0.3s ease, color 0.3s ease;
}
[data-theme="dark"] body {
background-color: #0a0a0a;
}
.app-title-bar {
position: fixed;
top: 0;
left: 0;
right: 0;
height: var(--header-height);
background: var(--main-content-bg, rgba(255, 255, 255, 0.75)); /* S'adapte automatiquement au main content */
-webkit-backdrop-filter: blur(10px);
backdrop-filter: blur(10px);
display: flex;
align-items: center;
justify-content: space-between;
z-index: 950;
box-shadow: 0 2px 10px rgba(0,0,0,0.1);
padding: 0 25px;
border-bottom: 1px solid var(--theme-border);
transition: background-color 0.3s ease, border-color 0.3s ease;
}
[data-theme="dark"] .app-title-bar {
background: var(--main-content-bg, rgba(45, 45, 45, 0.7)); /* Utilise la même variable que le main content */
}
[data-theme="dark"] .header-left {
background-color: rgb(52, 49, 48); /* Arrière-plan spécifique pour le logo en mode sombre */
}
.header-left {
flex: 0 0 auto;
font-size: 1.5em;
font-weight: bold;
color: var(--primary-color);
display: flex;
align-items: center;
padding: 5px 15px 5px 5px; /* Padding augmenté à droite (15px) */
background-color: rgb(252, 252, 249); /* Arrière-plan blanc */
border-radius: 0 20px 20px 0; /* Côtés droit et gauche arrondis */
border: 1px solid #ccc; /* Bordure très fine grise */
}
.header-left img {
height: 40px; /* Taille du logo */
width: auto;
}
.header-center {
flex: 1;
display: flex;
justify-content: center;
align-items: center;
padding: 0 20px;
}
.header-center .project-title-input {
font-size: 1.2em;
font-weight: bold;
border: none;
text-align: center;
max-width: 500px;
width: 100%;
padding: 8px 15px;
background: transparent;
color: var(--theme-text-primary);
border-bottom: 2px solid transparent;
transition: border-bottom 0.3s ease, color 0.3s ease;
}
.header-center .project-title-input:focus {
outline: none;
border-bottom: 2px solid var(--primary-color);
background: rgba(255, 255, 255, 0.5);
}
.header-center .project-title-input::placeholder {
color: var(--theme-text-secondary);
opacity: 0.7;
}
.header-right {
flex: 0 0 auto;
display: flex;
align-items: center;
gap: 8px;
font-size: 0.85em;
}
.last-update-label {
color: var(--theme-text-secondary);
font-weight: 500;
transition: color 0.3s ease;
}
.last-update-date {
color: #2c3e50;
font-weight: bold;
}
.controls {
position: fixed;
left: 15px;
top: 0; /* Plus de header */
width: auto;
height: 100vh; /* Hauteur complète */
background: transparent;
box-sizing: border-box;
display: flex;
flex-direction: column;
justify-content: center;
align-items: flex-start;
padding-right: 0;
z-index: 900;
pointer-events: none;
}
/* Contrôles en overlay dans l'organigramme */
.controls-overlay {
position: absolute;
left: 20px;
top: 50%;
transform: translateY(-50%);
height: auto;
z-index: 60;
padding: 0; /* Padding réduit à 0 */
}
/* Wrapper pour l'action panel */
.actions-panel-wrapper {
padding: 0; /* Pas de padding */
margin: 0; /* Pas de margin */
background-color: transparent; /* Sera défini selon le thème */
}
.actions-panel {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
position: relative;
width: 20px; /* État réduit */
min-height: 400px; /* Hauteur fixe pour garder la taille verticale */
padding: 22px 0; /* Garde le même padding vertical */
background-color: rgba(220, 235, 245, 0.8);
border-radius: 10px; /* Arrondi réduit pour mode fin */
box-shadow: var(--shadow);
transition: width 0.3s ease, padding 0.3s ease, border-radius 0.3s ease, background-color 0.3s ease;
transform-origin: center left;
transform: scale(1); /* Pas de scale en mode réduit */
border: 1px solid #B0B0B0;
pointer-events: auto;
overflow: visible; /* Permet aux tooltips de dépasser */
}
/* État étendu au survol */
.actions-panel:hover {
width: auto;
padding: 22px 12px;
border-radius: 29px;
gap: 16px;
}
[data-theme="dark"] .actions-panel {
background-color: rgba(45, 45, 45, 0.7); /* Transparence 70% en mode sombre */
}
/* Bouton toggle (visible uniquement en mode réduit) */
.panel-toggle-btn {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 40px;
height: 40px;
display: flex;
align-items: center;
justify-content: center;
background: rgba(220, 235, 245, 0.95);
border: 1px solid #B0B0B0;
border-radius: 50%;
cursor: pointer;
color: #2c3e50;
padding: 0;
box-shadow: var(--shadow);
transition: opacity 0.2s ease, transform 0.2s ease;
z-index: 10;
}
.panel-toggle-btn:hover {
transform: translate(-50%, -50%) scale(1.1);
}
.panel-toggle-btn svg {
width: 24px !important;
height: 24px !important;
}
/* Mode sombre pour le bouton toggle */
[data-theme="dark"] .panel-toggle-btn {
background: rgba(45, 45, 45, 0.95);
color: #cccccc;
border: 1px solid #404040;
}
/* Masquer le bouton toggle au survol */
.actions-panel:hover .panel-toggle-btn {
display: none;
}
/* Contenu du panel (masqué en mode réduit) */
.panel-actions-content {
display: flex;
flex-direction: column;
align-items: center;
gap: 0;
opacity: 0;
pointer-events: none; /* Désactive les interactions mais garde le DOM accessible pour les tooltips */
width: 0;
transition: opacity 0.2s ease, width 0.2s ease, gap 0.2s ease;
}
/* Afficher le contenu au survol */
.actions-panel:hover .panel-actions-content {
opacity: 1;
pointer-events: auto;
width: auto;
gap: 16px;
}
.separator-line {
border: none;
border-top: 1px solid #cccccc;
width: 60%;
margin: 5px auto;
}
.action-btn {
width: 42px !important; /* Augmenté de 20% (35px * 1.2 = 42px) */
height: 42px !important; /* Augmenté de 20% (35px * 1.2 = 42px) */
min-width: 42px !important; /* Force la taille minimale */
min-height: 42px !important; /* Force la taille minimale */
max-width: 42px !important; /* Force la taille maximale */
max-height: 42px !important; /* Force la taille maximale */
border-radius: 50%;
font-size: 1.32em; /* Augmenté proportionnellement (1.1 * 1.2 = 1.32) */
background: #ffffff; /* Blanc en mode clair */
color: #2c3e50; /* Bleu foncé en mode clair */
border: none; /* Bordure supprimée */
cursor: pointer;
transition: all 0.3s ease;
box-shadow: var(--shadow);
white-space: nowrap;
position: relative;
display: flex !important;
align-items: center !important;
justify-content: center !important;
overflow: visible; /* Permet au "+" de dépasser */
transform-style: preserve-3d;
padding: 2px !important;
box-sizing: border-box !important;
}
.btn-icon {
position: relative;
z-index: 100;
display: inline-block;
transform: translateZ(10px);
}
/* Centrage spécifique pour le label importer */
label.action-btn {
display: flex !important;
align-items: center !important;
justify-content: center !important;
text-align: center;
vertical-align: middle;
width: 42px !important; /* Harmonisé avec les autres boutons */
height: 42px !important; /* Harmonisé avec les autres boutons */
min-width: 42px !important;
min-height: 42px !important;
max-width: 42px !important;
max-height: 42px !important;
padding: 2px !important; /* Même padding que les autres boutons */
}
label.action-btn svg {
margin: 0 auto !important;
display: block !important;
}
.action-btn:hover {
background: #f0f0f0; /* Gris très clair au survol en mode clair */
color: #1a252f; /* Bleu encore plus foncé au survol */
transform: scale(1.07); /* Grossissement de 7% */
}
/* Tooltip personnalisé pour les boutons d'action */
.action-btn::after {
content: attr(data-tooltip);
position: absolute;
top: 50%;
left: 50%; /* Commence au centre de l'icône */
transform: translateY(-50%);
margin-left: 28px; /* Ajusté pour la nouvelle taille */
padding: 5px 12px; /* Augmenté encore de 20% (4px * 1.2 = 4.8px ≈ 5px, 10px * 1.2 = 12px) */
background-color: rgba(240, 248, 255, 0.8); /* Même couleur que le panel d'action */
color: #333; /* Texte sombre pour contraster avec le fond clair */
font-size: 15px; /* Réduit de 10% (17px × 0.9 = 15.3px ≈ 15px) */
font-weight: 300; /* Réduit de 10% (400 → 300, light) */
border-radius: 4px;
white-space: nowrap;
opacity: 0;
visibility: hidden;
transition: opacity 0.2s ease, visibility 0.2s ease;
z-index: 50; /* Derrière l'icône */
pointer-events: none;
border: 1px solid #B0B0B0; /* Même bordure que le panel */
}
.action-btn:hover::after {
opacity: 1;
visibility: visible;
}
/* Tooltip en mode sombre */
[data-theme="dark"] .action-btn::after {
background-color: rgba(45, 45, 45, 0.95);
color: #ffffff;
border: none; /* Bordure supprimée */
}
/* Supprimer le tooltip pour le bouton alerte */
#holding-alert-bubble::after {
display: none !important;
}
.action-btn--with-plus::before {
content: '+';
position: absolute;
top: -2px; /* Ajusté pour la nouvelle taille */
right: -2px; /* Ajusté pour la nouvelle taille */
width: 14px; /* Réduit proportionnellement */
height: 14px; /* Réduit proportionnellement */
background: white;
color: var(--primary-color);
border-radius: 50%;
font-size: 10px; /* Réduit proportionnellement */
font-weight: bold;
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0 2px 4px rgba(0,0,0,0.2);
border: 1px solid #eee;
z-index: 150;
transform: translateZ(15px);
}
/* Styles pour les icônes SVG dans les boutons d'action */
.action-btn svg,
button.action-btn svg,
label.action-btn svg {
width: 52.5px !important; /* 150% de 35px */
height: 52.5px !important; /* 150% de 35px */
display: block !important;
color: inherit;
pointer-events: none;
margin: 0 auto;
}
/* Padding spécifique pour le bouton Gestion de Groupe (harmonisé) */
#groups-btn {
padding: 2px !important;
}
/* Mode sombre - couleurs des boutons d'action */
[data-theme="dark"] .action-btn {
background: #2d2d2d; /* Gris très foncé en mode sombre */
color: #ffffff; /* Blanc en mode sombre pour les SVG */
border: none; /* Bordure supprimée */
}
[data-theme="dark"] .action-btn svg {
color: #ffffff; /* Force les SVG en blanc en mode sombre */
}
[data-theme="dark"] .action-btn:hover {
background: #3a3a3a;
color: #ffffff;
}
#holding-alert-bubble {
position: absolute;
bottom: 15px;
right: 15px;
z-index: 15; /* Au-dessus des contrôles overlay (z-index: 10) */
font-size: 1.2em; /* Taille réduite pour s'adapter au conteneur */
color: var(--danger-color);
padding: 10.4px; /* Padding augmenté de 30% (8px * 1.3 = 10.4px) */
border: 2px solid #8B0000 !important; /* Bordure rouge foncé fine */
overflow: visible; /* Permet au badge de dépasser */
box-sizing: border-box; /* Inclut la bordure dans les dimensions */
width: 45.5px; /* Largeur augmentée de 30% (35px * 1.3 = 45.5px) */
height: 45.5px; /* Hauteur augmentée de 30% (35px * 1.3 = 45.5px) */
background-color: white !important; /* Arrière-plan blanc sans transparence */
}
#holding-alert-bubble:hover {
color: var(--danger-color);
background-color: rgba(255, 200, 200, 1) !important; /* Rouge très clair opaque */
transform: scale(1.07); /* Grossissement de 7% */
}
.alert-badge-style {
position: absolute;
top: -8px; /* Positionné plus haut pour être au-dessus du bouton */
right: -8px; /* Positionné plus à droite pour être au-dessus du bouton */
min-width: 20px; /* Largeur augmentée proportionnellement */
height: 20px; /* Hauteur augmentée proportionnellement */
padding: 0 4px; /* Padding augmenté proportionnellement */
background: white;
color: var(--danger-color);
border-radius: 20px; /* Border-radius ajusté */
font-size: 14px; /* Taille de police augmentée proportionnellement */
font-weight: bold;
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0 2px 4px rgba(0,0,0,0.2); /* Ombre légèrement augmentée */
border: 1px solid #eee;
line-height: 20px; /* Line-height ajusté */
z-index: 1001; /* S'assurer qu'il est au-dessus du bouton */
}
.main-content-wrapper {
margin: 0; /* Supprimé margin */
padding: 20px; /* Padding uniforme de 20px */
height: 100vh; /* Hauteur complète de la page */
box-sizing: border-box;
transition: background-color 0.3s ease;
}
.main-content {
width: 100%;
height: 100%; /* Prend toute la hauteur disponible dans le wrapper */
display: flex;
flex-direction: column;
gap: 20px;
box-sizing: border-box;
border-radius: 12px; /* Arrondir les angles du main */
overflow: hidden; /* Rétabli pour que les enfants respectent l'arrondi */
padding: 20px 0 20px 20px; /* Padding haut, bas, gauche de 20px - pas de padding droit */
}
#print-header { display: none; }
h2:not(.modal-content h2) { color: #2c3e50; border-bottom: 2px solid var(--primary-color); padding-bottom: 10px; margin-top: 0; margin-bottom: 20px; }
h3 { color: var(--theme-text-primary); margin-top: 0; transition: color 0.3s ease; }
.input-group { margin-bottom: 7.5px; /* Margin divisé par 2 (15px/2 = 7.5px) */ position: relative; }
label { display: block; margin-bottom: 6px; font-weight: bold; font-size: 0.9em; color: var(--theme-text-primary); transition: color 0.3s ease; }
input, select { width: 100%; padding: 10px; border: 1px solid var(--theme-border); border-radius: 4px; box-sizing: border-box; background-color: var(--theme-bg-secondary); color: var(--theme-text-primary); transition: all 0.3s ease; }
/* Masquer les boutons manuels des inputs number */
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {
-webkit-appearance: none;
margin: 0;
}
input[type="number"] {
-moz-appearance: textfield;
appearance: textfield;
}
button { background-color: var(--primary-color); color: white; border: none; border-radius: 4px; cursor: pointer; font-size: 16px; font-weight: bold; display: flex; align-items: center; justify-content: center; gap: 10px; box-sizing: border-box; }
.btn-secondary { background-color: var(--secondary-color); }
/* --- Main Content Container --- */
#main-content-container {
background: rgba(255, 255, 255, 0.7); /* Transparence 70% */
border-radius: 0;
box-shadow: none;
overflow: hidden;
height: 100%; /* Prend toute la hauteur disponible du parent */
display: flex;
flex-direction: column; /* Vertical: header puis content */
transition: background-color 0.3s ease;
margin: 0; /* Supprimé tous les margins */
padding: 0; /* Supprimé tous les paddings */
}
/* Content Area (contient chart + handle + panel) */
#content-area {
display: flex;
flex-direction: row; /* Horizontal: chart | handle | panel */
flex: 1;
overflow: hidden;
gap: 0;
margin-bottom: 0; /* Supprimé margin bas */
}
/* ======= ANCIENS STYLES DES ONGLETS (Supprimés - Remplacés par le panneau resizable) ======= */
/* Les onglets ont été remplacés par un layout côte-à-côte avec panneau resizable */
/* Voir la section "PANNEAU RESIZABLE" plus bas dans ce fichier */
.chart-header {
display: flex;
justify-content: flex-end;
align-items: center;
margin-bottom: 15px;
margin-top: 0;
padding-top: 0;
}
.intervenants-header {
display: flex;
justify-content: flex-end;
align-items: center;
margin-bottom: 15px;
margin-top: 0;
padding-top: 0;
}
#chart-container {
background: transparent;
padding: 0 20px 0 0; /* Padding droit de 20px */
border-radius: 0;
box-shadow: none;
flex: 1;
overflow-y: hidden; /* Évite l'ascenseur inutile */
display: flex;
flex-direction: column;
min-height: 0;
margin-bottom: 0; /* Supprimé margin bas */
padding-bottom: 0; /* Supprimé padding bas */
}
#intervenants-container {
padding: 0 0 0 8px; /* Supprimé padding bas et droit - gardé seulement padding gauche */
border-radius: 0;
box-shadow: none;
flex: 1;
overflow-y: hidden; /* Retiré l'overflow pour éviter le double ascenseur */
display: flex;
flex-direction: column;
min-height: 0;
position: relative;
}
#intervenants-list-container {
flex: 1;
overflow-y: auto; /* Gardé uniquement l'overflow sur le container de liste */
display: flex;
flex-direction: column;
padding: 0; /* Supprimé padding haut et bas */
}
#cy-wrapper {
position: relative;
flex: 1;
display: flex;
flex-direction: column;
margin-top: 0;
padding-top: 0;
margin-bottom: 0; /* Supprimé margin bas */
padding-bottom: 0; /* Supprimé padding bas */
}
#cy-wrapper:fullscreen { background-color: #ffffff; }
[data-theme="dark"] #cy-wrapper:fullscreen {
background-color: #0a0a0a;
}
#cy-chart {
width: 100%;
height: 100%;
min-height: 500px;
border: 1px solid var(--theme-border); /* Bordure fine comme les cartes intervenant */
border-radius: 4px;
position: relative; /* Nécessaire pour l'overlay de zone d'export et z-index */
box-sizing: border-box;
background-color: #ffffff;
transition: border-color 0.3s ease, background-color 0.3s ease;
overflow: hidden; /* Cacher les boundaries qui dépassent */
}
/* S'assurer que le canvas Cytoscape est au-dessus des group boundaries */
#cy-chart canvas {
position: relative;
z-index: 1;
}
/* Les group boundaries sont en dessous du canvas mais visibles */
.group-boundary {
z-index: 1 !important;
}
[data-theme="dark"] #cy-chart {
background-color: #0a0a0a;
}
[data-theme="dark"] #main-content-container {
background: rgba(45, 45, 45, 0.7); /* Transparence 70% en mode sombre */
}
[data-theme="dark"] #chart-section {
background-color: rgba(45, 45, 45, 0.7); /* Transparence 70% en mode sombre */
}
[data-theme="dark"] .panel-controls {
background-color: rgba(45, 45, 45, 0.7); /* Transparence 70% en mode sombre */
}
[data-theme="dark"] #intervenants-panel {
background-color: rgba(45, 45, 45, 0.7); /* Transparence 70% en mode sombre */
}
/* Custom Node Resize System */
.resize-controls-overlay {
position: absolute !important;
top: 0 !important;
left: 0 !important;
width: 100% !important;
height: 100% !important;
pointer-events: none !important;
z-index: 999 !important;
}
.resize-handle {
position: absolute !important;
width: 16px !important;
height: 16px !important;
background: rgba(52, 152, 219, 0.9) !important;
border: 2px solid white !important;
border-radius: 3px !important;
pointer-events: all !important;
box-shadow: 0 2px 6px rgba(0,0,0,0.4) !important;
z-index: 1000 !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
color: white !important;
font-size: 12px !important;
font-weight: bold !important;
transition: all 0.2s ease;
}
.resize-handle:hover {
transform: scale(1.2);
box-shadow: 0 3px 8px rgba(52, 152, 219, 0.8) !important;
background: rgba(41, 128, 185, 0.95) !important;
}
/* Cytoscape HTML Labels */
.cy-node-html-label {
pointer-events: none;
-webkit-user-select: none;
user-select: none;
}
.node-label-container {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
line-height: 1.4;
width: 100%;
height: 100%;
padding: 5px;
box-sizing: border-box;
word-wrap: break-word;
overflow-wrap: break-word;
}
.node-label-part {
margin: 2px 0;
word-break: break-word;
width: 100%;
}
/* Les styles pour .node-name et .node-siren sont appliqués dynamiquement via inline styles */
.node-objet {
font-style: italic;
/* Autres styles appliqués dynamiquement via inline styles */
}
/* Container for all indicators */
.indicators-container {
position: absolute;
top: -25px;
right: -25px;
display: flex;
gap: 4px;
align-items: center;
z-index: 100;
pointer-events: none;
}
/* Client/Prospect indicator */
.status-indicator {
background: white;
border-radius: 50%;
width: var(--indicator-size, 22px);
height: var(--indicator-size, 22px);
display: flex;
align-items: center;
justify-content: center;
font-size: var(--indicator-font-size, 13px);
box-shadow: 0 2px 4px rgba(0,0,0,0.3);
border: 1.5px solid #999;
flex-shrink: 0;
}
/* Category indicator */
.category-indicator {
background: white;
border-radius: 50%;
width: var(--indicator-size, 22px);
height: var(--indicator-size, 22px);
display: flex;
align-items: center;
justify-content: center;
font-size: var(--indicator-font-size, 13px);
box-shadow: 0 2px 4px rgba(0,0,0,0.3);
border: 1.5px solid #999;
flex-shrink: 0;
}
/* Mixte indicator (2 symboles) - besoin de plus de largeur */
.category-indicator.category-mixte {
width: calc(var(--indicator-size, 22px) + 14px);
font-size: calc(var(--indicator-font-size, 13px) - 3px);
flex-wrap: nowrap;
white-space: nowrap;
}
.node-label-container {
position: relative;
}
.icon-btn { background: none; border: none; cursor: pointer; font-size: 1.2em; color: #aaa; padding: 0; margin: 0; width: auto; transition: color 0.2s; }
.icon-btn:hover { color: var(--primary-color); }
.icon-btn.delete:hover { color: var(--danger-color); }
/* Bouton de suppression rond style pastille */
.delete-btn-round {
width: 28px;
height: 28px;
border-radius: 50%;
background-color: #ffffff;
border: 1px solid #ddd;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
padding: 0;
transition: all 0.2s ease;
}
/* Mode clair - traits noirs */
.delete-btn-round .delete-icon-path {
fill: #000000;
stroke: none;
}
.delete-btn-round:hover {
transform: scale(1.15);
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}
/* Mode sombre - arrière-plan gris foncé, traits blancs */
[data-theme="dark"] .delete-btn-round {
background-color: #2d2d2d;
border-color: #666;
}
[data-theme="dark"] .delete-btn-round .delete-icon-path {
fill: #ffffff;
}
[data-theme="dark"] .delete-btn-round:hover {
transform: scale(1.15);
box-shadow: 0 2px 8px rgba(255, 255, 255, 0.2);
}
/* Chart overlay controls */
.chart-overlay-controls {
position: absolute;
top: 15px;
right: 15px;
z-index: 10;
display: flex;
flex-direction: column;
gap: 8px;
align-items: flex-end;
}
.overlay-controls-row {
display: flex;
gap: 8px;
align-items: center;
}
/* Chart overlay controls top (undo/redo au centre bas) */
.chart-overlay-controls-top {
position: absolute;
bottom: 15px;
left: 50%;
transform: translateX(-50%);
z-index: 10;
display: flex;
gap: 8px;
align-items: center;
}
/* Empty State Overlay - État vide avec bouton centré */
#empty-state-overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
z-index: 50; /* Sous les contrôles mais au-dessus du graphe */
pointer-events: none; /* Laisser passer les interactions sauf sur le bouton */
transition: opacity 0.3s ease;
}
/* Animation de pulsation pour attirer l'attention */
@keyframes pulse-glow {
0%, 100% {
box-shadow: 0 12px 32px rgba(52, 152, 219, 0.4);
transform: scale(1);
}
50% {
box-shadow: 0 16px 48px rgba(52, 152, 219, 0.8);
transform: scale(1.05);
}
}
.empty-state-btn {
pointer-events: auto; /* Réactiver les interactions pour le bouton */
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 6px;
padding: 12px;
background: linear-gradient(135deg, var(--primary-color), var(--primary-color-dark));
color: white;
border: none;
border-radius: 50%; /* Rond au lieu de rectangulaire */
font-size: 16px;
font-weight: 600;
cursor: pointer;
box-shadow: 0 12px 32px rgba(52, 152, 219, 0.4);
transition: all 0.3s ease;
width: 120px; /* Divisé par 2 : 240px / 2 = 120px */
height: 120px;
animation: pulse-glow 2s ease-in-out infinite; /* Animation de pulsation */
}
.empty-state-btn:hover {
animation: none; /* Arrêter la pulsation au survol */
transform: translateY(-3px) scale(1.05);
box-shadow: 0 16px 48px rgba(52, 152, 219, 0.6);
}
.empty-state-btn svg {
width: 72px; /* Divisé par 2 depuis la version triplée : 144px / 2 = 72px */
height: 72px;
}
.empty-state-btn span {
font-size: 11px;
text-align: center;
line-height: 1.2;
max-width: 90px; /* Pour que le texte reste dans le cercle */
}
/* Mode sombre pour le bouton état vide */
@keyframes pulse-glow-dark {
0%, 100% {
box-shadow: 0 12px 32px rgba(41, 128, 185, 0.5);
transform: scale(1);
}
50% {
box-shadow: 0 16px 48px rgba(41, 128, 185, 0.9);
transform: scale(1.05);
}
}
[data-theme="dark"] .empty-state-btn {
background: linear-gradient(135deg, #2980b9, #1f5f8b);
box-shadow: 0 12px 32px rgba(41, 128, 185, 0.5);
animation: pulse-glow-dark 2s ease-in-out infinite;
}
[data-theme="dark"] .empty-state-btn:hover {
animation: none;
box-shadow: 0 16px 48px rgba(41, 128, 185, 0.7);
}
/* Styles pour les boutons des modales de sauvegarde */
.save-modal-btn-primary:hover {
background-color: var(--primary-color-dark) !important;
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(52, 152, 219, 0.3);
}
.save-modal-btn-secondary:hover {
background-color: #7f8c8d !important;
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}
.save-modal-btn:active {
transform: translateY(0);
}
.overlay-btn {
background-color: rgba(255, 255, 255, 0.8);
color: #333;
border: 1px solid var(--theme-border);
border-radius: 50%;
width: 42px;
height: 42px;
font-size: 1.3em;
display: flex;
align-items: center;
justify-content: center;
padding: 0;
cursor: pointer;
box-shadow: 0 2px 8px rgba(0,0,0,0.15);
transition: all 0.2s ease;
}
.overlay-btn svg {
transition: transform 0.2s ease;
}
.overlay-btn-with-text {
width: auto;
min-width: 42px;
border-radius: 21px;
padding: 0 12px 0 14px;
gap: 8px;
}
.overlay-btn-text {
font-size: 14px;
font-weight: 500;
white-space: nowrap;
}
[data-theme="dark"] .overlay-btn {
background-color: rgba(45, 45, 45, 0.8);
color: #ffffff;
}
[data-theme="dark"] .overlay-btn svg {
color: #ffffff; /* Force les SVG en blanc en mode sombre */
}
.overlay-btn:hover {
background-color: white;
color: var(--primary-color);
transform: scale(1.1);
box-shadow: 0 4px 12px rgba(0,0,0,0.2);
}
.overlay-btn:hover svg {
transform: scale(1.15);
}
[data-theme="dark"] .overlay-btn:hover {
background-color: #3a3a3a;
color: #ffffff;
}
[data-theme="dark"] .overlay-btn:hover svg {
color: #ffffff;
}
.overlay-btn:disabled {
opacity: 0.4;
cursor: not-allowed;
pointer-events: none;
}
.overlay-btn:disabled:hover {
transform: none;
box-shadow: 0 2px 8px rgba(0,0,0,0.15);
}
/* Bouton actif (mode édition rapide) */
.overlay-btn.active {
background-color: var(--primary-color);
color: white;
box-shadow: 0 0 0 3px rgba(52, 152, 219, 0.3);
}
[data-theme="dark"] .overlay-btn.active {
background-color: var(--primary-color);
color: white;
}
/* Quick Theme Overlays */
.quick-theme-overlay {
position: absolute;
display: block;
pointer-events: all;
z-index: 5000; /* Au-dessus de Cytoscape */
transform: translate(-50%, 0);
visibility: visible;
opacity: 1;
}
.quick-theme-style-container {
padding: 0;
background-color: transparent;
border-radius: 0;
box-shadow: none;
backdrop-filter: none;
pointer-events: all; /* Capturer tous les événements */
}
/* Le composant style-controls à l'intérieur des overlays */
.quick-theme-overlay .style-controls {
border: none;
padding: 0;
background: transparent;
margin: 0;
transform: scale(0.9);
transform-origin: center;
pointer-events: all; /* S'assurer que tous les clics sont capturés */
position: relative; /* Pour que les enfants absolute se positionnent par rapport à lui */
}
/* Le color-picker-wrapper doit aussi être relatif */
.quick-theme-overlay .color-picker-wrapper {
position: relative;
}
/* S'assurer que tous les sous-éléments capturent les clics */
.quick-theme-overlay * {
pointer-events: all;
}
/* En mode édition rapide, l'overlay actif (avec palette ouverte) passe au-dessus */
.quick-theme-overlay.palette-active {
z-index: 999999 !important; /* Au-dessus de tous les autres overlays */
}
/* Modale dans les overlays - positionnement relatif standard */
.quick-theme-overlay .color-picker-modal {
position: absolute !important;
left: 50% !important;
top: 100% !important;
transform: translateX(-50%) !important;
margin-top: 5px !important;
z-index: 10 !important; /* Au-dessus du contenu de l'overlay */
}
/* --- List Design --- */
#sort-select {
padding: 6px 10px;
font-size: 0.9em;
border-radius: 6px;
border: 1px solid var(--theme-border);
background-color: var(--theme-bg-primary);
color: var(--theme-text-primary);
width: auto;
transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}
.filter-group {
display: flex;
gap: 8px;
}
.filter-group button {
font-size: 0.81em;
font-weight: 600;
background-color: transparent;
border: 2px solid var(--theme-border);
color: var(--theme-text-secondary);
width: 32px;
height: 32px;
border-radius: 50%;
cursor: pointer;
margin: 0;
transition: all 0.2s ease;
}
.filter-group button:hover {
border-color: var(--primary-color);
color: var(--primary-color);
}
.filter-group button.active {
background-color: rgba(128, 128, 128, 0.6); /* Gris moyen transparent 60% */
border-color: #808080; /* Gris moyen au lieu de bleu */
color: white;
}
.recap-list {
list-style: none;
padding: 0 5px 0 0; /* Padding haut et bas forcé à 0, gardé seulement padding droite */
margin: 0; /* Margin haut et bas supprimé */
flex: 1;
overflow-y: auto;
background-color: transparent; /* Supprimé background gris */
}
.recap-item {
border: 1px solid var(--theme-border);
border-radius: 6px;
margin-bottom: 10px;
margin-top: 0; /* Pas de margin haut */
overflow: hidden;
display: flex;
flex-direction: column;
transition: border-color 0.3s ease;
text-align: left !important; /* Force l'alignement à gauche */
}
.recap-header {
display: flex;
align-items: center;
gap: 12px;
cursor: pointer;
padding: 4.5px 7.5px; /* Padding divisé par 2 (9px/2 = 4.5px, 15px/2 = 7.5px) */
flex-shrink: 0;
transition: background-color 0.3s ease;
}
[data-theme="dark"] .recap-header {
background-color: #0a0a0a;
}
.color-indicator {
width: 18px;
height: 18px;
border-radius: 50%;
border: 2px solid #ddd;
flex-shrink: 0;
}
.intervenant-name {
font-weight: 500;
font-size: 14px;
flex-grow: 1;
color: var(--theme-text-primary);
}
.header-actions {
display: flex;
align-items: center;
gap: 12px;
}
.status-icon {
font-size: 1.2em;
}
.status-icon[data-status="ok"] {
color: var(--secondary-color);
}
.status-icon[data-status="warning"] {
color: var(--warning-color);
}
.status-icon[data-status="error"] {
color: var(--danger-color);
}
.toggle-icon {
font-size: 1.2em;
color: #aaa;
transition: transform 0.2s ease-in-out;
}
.recap-item.open .toggle-icon {
transform: rotate(90deg);
}
.focus-btn {
font-size: 1.1em;
padding: 0 5px;
color: #aaa;
}
.focus-btn:hover {
color: var(--primary-color);
}
/* --- Details Card Design --- */
.details-content {
display: none;
padding: 7.5px; /* Padding divisé par 2 (15px/2 = 7.5px) */
border-top: 1px solid #f0f0f0;
max-height: 400px;
overflow-y: auto;
flex-shrink: 1;
transition: background-color 0.3s ease;
text-align: left !important; /* Force l'alignement à gauche */
}
.recap-item.open .details-content {
display: block;
}
[data-theme="dark"] .details-content {
background-color: #0a0a0a;
border-top-color: #404040;
}
/* Contrôles de style en haut de la carte */
.style-controls-top {
display: flex;
justify-content: flex-end;
padding: 0 0 5px 0; /* Padding bas de 5px */
margin-bottom: 0; /* Suppression de la marge bas */
border-bottom: none; /* Suppression de la bordure bas */
}
.style-controls-top .style-controls {
gap: 10px;
}
#details-modal .details-content {
max-height: none;
overflow-y: visible;
}
/* Même dégradé que la liste pour la modale carte intervenant */
:root:not([data-theme="dark"]) #details-modal .details-content,
[data-theme="light"] #details-modal .details-content {
background: linear-gradient(to bottom right, rgba(160, 200, 240, 0.7), #E0F0FF 50%, #A0C8F0) !important; /* Même dégradé que la liste */
}
[data-theme="dark"] #details-modal .details-content {
background: #0a0a0a !important; /* Noir opaque */
}
.details-block { background-color: var(--theme-bg-primary); border: 1px solid var(--theme-border); border-radius: 6px; padding: 12px; margin-bottom: 15px; transition: background-color 0.3s ease, border-color 0.3s ease; }
.details-block__title { font-weight: bold; color: var(--theme-text-secondary); margin-bottom: 12px; font-size: 1em; display: block; border-bottom: 1px solid var(--theme-border); padding-bottom: 8px; transition: color 0.3s ease, border-color 0.3s ease; }
.text-style-row {
display: flex;
align-items: center;
gap: 15px;
margin-bottom: 12px;
padding: 8px;
background-color: #fff;
border-radius: 4px;
border: 1px solid #e0e0e0;
}
.text-style-label {
min-width: 60px;
font-weight: 600;
color: #555;
}
.text-style-control {
display: flex;
align-items: center;
gap: 6px;
}
.control-label {
font-size: 0.85em;
color: var(--theme-text-secondary);
font-weight: 500;
transition: color 0.3s ease;
}
.font-size-input {
width: 60px;
padding: 4px 6px;
border: 1px solid var(--theme-border);
border-radius: 4px;
text-align: center;
background-color: var(--theme-bg-secondary);
color: var(--theme-text-primary);
transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}
.font-weight-select {
padding: 4px 8px;
border: 1px solid #ccc;
border-radius: 4px;
background-color: white;
}
/* Style toggle buttons (B, I, U) */
.style-toggle-btn {
width: 32px;
height: 32px;
border: 2px solid var(--theme-border);
background-color: var(--theme-bg-secondary);
color: var(--theme-text-primary);
border-radius: 4px;
cursor: pointer;
font-size: 14px;
font-weight: bold;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.2s ease;
}
.style-toggle-btn:hover {
background-color: var(--theme-bg-primary);
border-color: var(--primary-color);
}
.style-toggle-btn.active {
background-color: var(--primary-color);
color: white;
border-color: var(--primary-color);
}
.style-toggle-btn.active:hover {
background-color: var(--primary-color-dark);
}
.visibility-checkbox {
width: 18px;
height: 18px;
cursor: pointer;
accent-color: var(--primary-color);
}
.link-list {
list-style: none;
padding: 0;
}
#details-modal .link-list {
max-height: 200px;
overflow-y: auto;
padding-right: 5px;
}
#details-modal .link-list::-webkit-scrollbar {
width: 6px;
}
#details-modal .link-list::-webkit-scrollbar-track {
background: #f1f1f1;
border-radius: 3px;
}
#details-modal .link-list::-webkit-scrollbar-thumb {
background: #ccc;
border-radius: 3px;
}
#details-modal .link-list::-webkit-scrollbar-thumb:hover {
background: #aaa;
}
.link-item { display: flex; align-items: center; gap: 10px; padding: 5px 0; }
.link-item .name { flex-grow: 1; cursor: pointer; color: var(--primary-color); text-decoration: underline; }
.link-item .name:hover { text-decoration: none; color: var(--primary-color-dark); }
.link-item .icon-btn.delete { margin-right: 8px; }
.link-item input { width: 70px; text-align: right; padding: 4px 6px; font-size: 0.9em; }
.add-link-btn { background: #ffffff; border: 1px dashed #ccc; border-radius: 4px; color: #777; width: 100%; padding: 8px; margin-top: 10px; cursor: pointer !important; pointer-events: auto !important; position: relative; z-index: 1; }
.add-link-btn:hover { background: #f0f0f0; color: #333; }
.style-controls { display: flex; align-items: center; gap: 10px; }
.unified-style-container {
display: flex;
align-items: center;
background-color: var(--main-content-bg);
border-radius: 50px;
padding: 2px 0 2px 5px;
gap: 5px;
min-height: 34px;
box-sizing: border-box;
margin-right: 10px;
border: 1px solid #cccccc;
}
.unified-style-container .color-picker-wrapper {
margin: 0 !important;
padding: 0 !important;
}
.unified-style-container .color-picker-trigger {
border: 1px solid #cccccc !important;
}
.shape-selector-new {
display: flex;
align-items: center;
gap: 5px;
}
.shape-selector-new .shape-button {
width: 28px;
height: 28px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: all 0.2s;
background-color: transparent; /* Transparent par défaut */
padding: 4px;
box-sizing: border-box;
margin: 0;
}
.shape-selector-new .shape-button:hover {
background-color: rgba(0, 0, 0, 0.05); /* Léger effet au survol */
}
[data-theme="dark"] .shape-selector-new .shape-button:hover {
background-color: rgba(255, 255, 255, 0.05);
}
.shape-selector-new .shape {
width: 10px;
height: 10px;
background-color: transparent;
border: 3px solid #333333;
transition: all 0.2s;
}
.shape-selector-new .shape.square { border-radius: 2px; }
.shape-selector-new .shape.circle { border-radius: 50%; }
.shape-selector-new .shape.diamond {
width: 8px;
height: 8px;
transform: rotate(45deg);
border-radius: 1px;
}
/* États actifs - Mode clair */
.shape-selector-new .shape-button.active {
background-color: #333333;
}
.shape-selector-new .shape-button.active .shape {
background-color: #333333;
border-color: #ffffff;
}
/* États actifs - Mode sombre */
[data-theme="dark"] .shape-selector-new .shape-button.active {
background-color: #ffffff;
}
[data-theme="dark"] .shape-selector-new .shape-button.active .shape {
background-color: #ffffff;
border-color: #000000;
}
/* États inactifs - Mode sombre */
[data-theme="dark"] .shape-selector-new .shape {
background-color: transparent;
border-color: #cccccc;
}
/* Boutons de type de flèche et de trait - Mode sombre */
[data-theme="dark"] .arrow-type-btn:hover,
[data-theme="dark"] .line-style-btn:hover {
background-color: rgba(255, 255, 255, 0.05) !important;
}
/* Survol en mode clair */
.arrow-type-btn:hover,
.line-style-btn:hover {
background-color: rgba(0, 0, 0, 0.05) !important;
}
/* Conteneur des contrôles de flèches - Style général */
.arrow-controls-container {
background-color: #E0F0FF;
border: 1px solid #cccccc;
border-radius: 50px;
padding: 4px;
gap: 10px;
}
/* Mode sombre pour les contrôles de flèches */
[data-theme="dark"] .arrow-controls-container {
background-color: #1a1a1a;
border-color: #666666;
}
/* Modale pour la personnalisation des flèches - Positionnée près du curseur */
#edge-style-modal.modal-overlay {
align-items: flex-start;
justify-content: flex-start;
z-index: 100000 !important; /* Au-dessus des overlays d'édition rapide */
}
.edge-style-content {
position: absolute;
max-width: 300px !important; /* Override du max-width: 800px de .modal-content */
width: auto; /* Override du style modal-content */
max-height: none; /* Override du style modal-content */
padding: 0 !important; /* Pas de padding du wrapper */
border: none !important; /* Pas de bordure sur le wrapper */
background: transparent !important; /* Fond transparent */
box-shadow: none !important; /* Pas d'ombre sur le wrapper */
border-radius: 0 !important; /* Pas de border-radius sur le wrapper */
overflow: visible !important; /* Permettre au conteneur d'afficher son ombre */
}
.edge-style-content .arrow-controls-container {
margin: 0;
padding: 10px 10px 5px 10px !important; /* Padding haut 10px, horizontal 10px, bas 5px */
border-radius: 50px !important; /* Côtés gauche et droite complètement ronds */
box-shadow: 0 4px 20px rgba(0,0,0,0.3); /* Ombre sur le conteneur */
background-color: #ffffff !important; /* Blanc en mode clair */
border: 2px solid rgba(160, 200, 240, 0.8) !important; /* Bordure bleu azur comme modal-content */
gap: 10px !important; /* Gap entre les boutons */
width: fit-content !important; /* Largeur minimale */
}
/* Mode sombre pour la modale de flèche */
[data-theme="dark"] .edge-style-content .arrow-controls-container {
background-color: #000000 !important; /* Noir en mode sombre */
border-color: rgba(100, 140, 200, 0.6) !important; /* Bordure ajustée pour mode sombre */
}
.color-picker { position: relative; }
.color-picker .color-dot { width: 18px; height: 18px; border-radius: 50%; cursor: pointer; border: 2px solid #555; }
.color-palette {
display: none;
position: absolute;
background: white;
border-radius: 6px;
box-shadow: var(--shadow);
padding: 10px;
z-index: 20;
right: 0;
top: 100%;
margin-top: 5px;
border: 1px solid #ccc;
width: auto;
}
.palette-row { display: flex; align-items: center; gap: 10px; background: #f0f0f0; padding: 8px; border-radius: 6px; }
.palette-row:not(:last-child) { margin-bottom: 8px; }
.palette-row .icon { font-weight: bold; font-size: 1.5em; text-decoration: underline; }
.palette-row .icon-dot { width: 24px; height: 24px; border-radius: 50%; border: 1px solid #ccc; flex-shrink: 0; }
.swatches { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.color-swatch { width: 25px; height: 25px; border-radius: 50%; cursor: pointer; border: 1px solid #ddd; }
/* === Nouveau composant Color Picker réutilisable === */
.color-picker-wrapper {
position: relative;
display: inline-block;
}
.color-picker-trigger {
width: 24px;
height: 24px;
border-radius: 50%;
border: 2px solid var(--theme-border);
cursor: pointer;
transition: transform 0.2s;
display: flex;
align-items: center;
justify-content: center;
font-size: 10px;
font-weight: 900;
text-decoration: underline;
}
.color-picker-trigger:hover {
transform: scale(1.1);
}
/* SVG "A souligné" toujours noir et centré */
.text-icon-letter,
.text-icon-line {
fill: #000000;
stroke: #000000;
}
.color-picker-trigger svg {
display: block;
}
.color-picker-modal {
display: none;
position: fixed; /* Changé de absolute à fixed pour éviter les coupures */
background: var(--theme-bg-primary);
border: 2px solid var(--theme-border);
border-radius: 8px;
padding: 12px;
box-shadow: 0 4px 12px rgba(0,0,0,0.15);
z-index: 10000; /* Z-index très élevé pour être au-dessus de tout */
min-width: 200px;
pointer-events: all !important; /* S'assurer que la modale capte les clics */
}
/* Règle supprimée - déplacée plus bas pour éviter la duplication */
.color-picker-row {
display: flex;
align-items: center;
gap: 10px;
margin-bottom: 10px;
}
.color-picker-text-trigger,
.color-picker-bg-trigger {
width: 28px;
height: 28px;
border-radius: 50%;
border: 2px solid var(--theme-border);
cursor: pointer;
transition: transform 0.2s;
}
.color-picker-text-trigger:hover,
.color-picker-bg-trigger:hover {
transform: scale(1.1);
}
.color-picker-palette {
display: none;
margin-top: 10px;
pointer-events: all !important; /* S'assurer que la palette capte les clics */
position: relative;
z-index: 1; /* Au-dessus du reste du contenu de la modale */
}
.color-picker-swatches {
display: grid;
grid-template-columns: repeat(6, 1fr);
gap: 6px;
margin-bottom: 8px;
}
.color-picker-swatch {
width: 24px;
height: 24px;
border-radius: 4px;
cursor: pointer;
transition: transform 0.2s;
border: 2px solid transparent;
}
.color-picker-swatch:hover {
transform: scale(1.2);
}
/* --- Modals and Footer --- */
.modal-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.5); display: flex; align-items: center; justify-content: center; z-index: 1000; visibility: hidden; opacity: 0; transition: opacity 0.3s, visibility 0.3s; pointer-events: none; padding: 20px; box-sizing: border-box; overflow-y: auto; /* Permet le défilement de l'overlay */ }
.modal-overlay.visible { visibility: visible; opacity: 1; pointer-events: auto; }
/* Boutons de fermeture des modales supprimés - fonctionnalité abandonnée */
#holding-error-modal {
z-index: 1005;
}
.error-list {
list-style: none;
padding: 0;
margin: 20px 0 0 0;
max-height: 40vh;
overflow-y: auto;
}
.error-list-item {
padding: 10px;
border-bottom: 1px solid #eee;
color: var(--primary-color);
text-decoration: underline;
cursor: pointer;
font-weight: bold;
}
.error-list-item:hover {
background-color: #f9f9f9;
color: var(--primary-color-dark);
}
.error-list-item:last-child {
border-bottom: none;
}
#details-modal { z-index: 1015; } /* Au-dessus des modales standard (1010) mais sous les overlays d'édition (5000) */
/* Styles d'ascenseur pour le modal des cartes intervenant */
#details-modal .modal-content::-webkit-scrollbar {
width: 8px;
}
#details-modal .modal-content::-webkit-scrollbar-track {
background: #f1f1f1;
border-radius: 4px;
}
#details-modal .modal-content::-webkit-scrollbar-thumb {
background: #888;
border-radius: 4px;
}
#details-modal .modal-content::-webkit-scrollbar-thumb:hover {
background: #555;
}
/* Styles d'ascenseur pour le mode sombre */
[data-theme="dark"] #details-modal .modal-content::-webkit-scrollbar-track {
background: #333;
}
[data-theme="dark"] #details-modal .modal-content::-webkit-scrollbar-thumb {
background: #666;
}
[data-theme="dark"] #details-modal .modal-content::-webkit-scrollbar-thumb:hover {
background: #888;
}
#add-entity-modal, #bulk-add-modal, #print-modal { z-index: 1020; }
#add-quick-link-modal { z-index: 1025; } /* Au-dessus de #details-modal (1015) */
/* Style général des modales - Mode clair par défaut */
.modal-content {
background: #ffffff;
border: 5px solid rgba(160, 200, 240, 0.8); /* Bleu azur foncé transparent 80% */
padding: 15px;
border-radius: 8px;
box-shadow: 0 5px 20px rgba(0,0,0,0.2);
width: 90%;
max-width: 800px;
max-height: 70vh;
overflow-y: auto;
color: #333333;
transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}
/* Style général des modales - Mode sombre */
[data-theme="dark"] .modal-content {
background: #000000;
border: 5px solid rgba(45, 45, 45, 0.8); /* Gris foncé transparent 80% */
color: #ffffff;
}
/* Tailles spécifiques pour certaines modales */
#print-modal .modal-content { max-width: 450px; }
/* Styles harmonisés pour tous les éléments des modales - Mode sombre */
[data-theme="dark"] .modal-content h2 {
color: #ffffff !important;
font-size: 1.5em;
font-weight: 600;
margin-bottom: 20px;
}
[data-theme="dark"] .modal-content p,
[data-theme="dark"] .modal-content label,
[data-theme="dark"] .modal-content .control-label,
[data-theme="dark"] .modal-content .details-block__title { color: #ffffff !important; }
[data-theme="dark"] .modal-content .details-block { background-color: #1a1a1a; border-color: #333333; }
[data-theme="dark"] .add-link-btn { background: #000000; border-color: #555555; color: #bbbbbb; pointer-events: auto !important; cursor: pointer !important; }
[data-theme="dark"] .add-link-btn:hover { background: #1a1a1a; color: #ffffff; }
[data-theme="dark"] .modal-content input[type="range"] { background: #333333; }
[data-theme="dark"] .modal-content input[type="text"],
[data-theme="dark"] .modal-content input[type="number"],
[data-theme="dark"] .modal-content textarea,
[data-theme="dark"] .modal-content select {
background-color: #1a1a1a;
color: #ffffff;
border: 1px solid #333333;
}
[data-theme="dark"] .modal-content .widthValue,
[data-theme="dark"] .modal-content span { color: #ffffff; }
[data-theme="dark"] .modal-content .text-style-block { background-color: var(--main-content-bg); }
[data-theme="dark"] .modal-content .text-style-block .text-style-row { background-color: rgba(255, 255, 255, 0.1) !important; }
[data-theme="dark"] .modal-content .text-style-block .text-style-label,
[data-theme="dark"] .modal-content .text-style-block label,
[data-theme="dark"] .modal-content .text-style-block .control-label { color: #ffffff !important; }
/* Styles harmonisés pour tous les éléments des modales - Mode clair */
.modal-content h2 {
color: #333333 !important;
font-size: 1.5em;
font-weight: 600;
margin-bottom: 20px;
}
.modal-content p,
.modal-content label,
.modal-content .control-label,
.modal-content .details-block__title { color: #333333 !important; }
/* Arrière-plan des details-block dans les modales - bleu azur clair */
:root:not([data-theme="dark"]) .modal-content .details-block,
[data-theme="light"] .modal-content .details-block {
background: #E0F0FF !important; /* Bleu azur clair */
border-color: #cccccc;
}
/* Même style que la liste pour les sections de la modale carte intervenant */
:root:not([data-theme="dark"]) #details-modal .modal-content .details-block,
[data-theme="light"] #details-modal .modal-content .details-block {
background: rgba(224, 240, 255, 0.6) !important; /* Bleu azur clair transparent 60% - identique à la liste */
}
[data-theme="dark"] #details-modal .modal-content .details-block {
background: rgba(45, 45, 45, 0.6) !important; /* Gris foncé transparent 60% */
}
/* Même style que la liste pour le header dans la modale carte intervenant */
:root:not([data-theme="dark"]) #details-modal .recap-header,
[data-theme="light"] #details-modal .recap-header {
background: rgba(240, 248, 255, 0.8) !important; /* Bleu azur très clair transparent 80% - identique à la liste */
}
[data-theme="dark"] #details-modal .recap-header {
background: #0a0a0a !important; /* Noir opaque */
}
.modal-content input[type="range"] { background: #e0e0e0; }
.modal-content input[type="text"],
.modal-content input[type="number"],
.modal-content textarea,
.modal-content select {
background-color: #ffffff;
color: #333333;
border: 1px solid #cccccc;
}
.modal-content .widthValue,
.modal-content span { color: #333333; }
.modal-content .text-style-block { background-color: var(--main-content-bg); }
.modal-content .text-style-block .text-style-row { background-color: rgba(0, 0, 0, 0.05) !important; }
.modal-content .text-style-block .text-style-label,
.modal-content .text-style-block label,
.modal-content .text-style-block .control-label { color: #333333 !important; }
#add-quick-link-modal .modal-content, #details-modal .modal-content {
display: block; /* Changé de flex à block pour permettre le défilement */
max-width: 600px;
max-height: 75vh; /* Hauteur réduite à 75% de la hauteur de la page */
min-height: 40vh; /* Hauteur minimale réduite */
overflow-y: auto;
}
/* Transparence pour la modale de la carte intervenant */
#details-modal .modal-content {
background: rgba(255, 255, 255, 0.9) !important;
}
[data-theme="dark"] #details-modal .modal-content {
background: rgba(0, 0, 0, 1) !important;
position: relative; /* Position relative pour le défilement */
}
.modal-columns { display: flex; gap: 20px; align-items: flex-start; }
.modal-columns section { flex: 1; }
.modal-content h2, .modal-content h3 { margin-top: 0; }
.modal-content h2 { text-align: center; margin-bottom: 25px; }
#print-modal .modal-options { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; margin-bottom: 25px; }
#print-modal .modal-options label { display: flex; align-items: center; gap: 8px; }
#print-modal .modal-options label input[type="checkbox"] {
accent-color: var(--primary-color);
width: 16px;
height: 16px;
}
#print-modal .modal-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 15px; }
#print-modal .modal-actions button {
font-weight: normal;
padding: 10px 18px;
}
.type-selector {
display: flex;
border: none; /* Suppression de la bordure */
border-radius: 4px;
overflow: hidden;
justify-content: center; /* Centrage des boutons */
gap: 25px; /* Marge de 25px entre les boutons */
}
.type-selector button:not([data-theme="dark"] .type-selector button) {
flex: 1;
background: var(--theme-bg-secondary); /* Fond adaptatif au thème */
color: var(--theme-text-primary); /* Texte adaptatif au thème */
border: 1px solid var(--theme-border); /* Bordure adaptative */
padding: 12px 20px; /* Padding pour que le texte respire */
border-radius: 4px;
font-weight: normal;
margin: 0;
transition: all 0.2s ease; /* Transition fluide */
cursor: pointer;
}
.type-selector button:not([data-theme="dark"] .type-selector button):hover {
background: var(--theme-bg-primary); /* Fond plus clair au survol */
border-color: var(--primary-color); /* Bordure colorée au survol */
}
.type-selector button.active {
background: var(--primary-color) !important; /* Bleu vif pour l'actif */
color: white !important;
font-weight: bold;
border: 1px solid var(--primary-color) !important;
box-shadow: 0 2px 4px rgba(52, 152, 219, 0.3); /* Ombre pour l'effet de relief */
}
.separator { display: flex; align-items: center; text-align: center; color: #aaa; }
.modal-columns .separator { flex-direction: column; align-self: stretch; justify-content: center; flex: 0 0 40px; }
.separator::before, .separator::after { content: ''; flex: 1; border-left: 1px solid #ccc; }
.modal-columns .separator span { padding: 10px 0; }
.notifications {
position: fixed;
top: calc(var(--header-height) + 16px);
right: 16px;
z-index: 9999;
display: flex;
flex-direction: column;
gap: 8px;
}
.notification {
padding: 2px 12px; /* Padding vertical réduit à 2px, horizontal réduit à 12px */
border-radius: 6px; /* Border-radius réduit */
color: white;
box-shadow: 0 2px 8px rgba(0,0,0,0.12);
font-weight: 500;
border: 1px solid #8B0000; /* Bordure rouge foncé */
min-width: 30px; /* Largeur minimum réduite */
min-height: 30px; /* Hauteur minimum réduite */
display: flex;
align-items: center;
justify-content: center;
font-size: 0.9em; /* Taille de police réduite */
}
.notification.error { background: var(--danger-color); }
.notification.info { background: var(--primary-color); }
.notification.success { background: var(--secondary-color); color: #fff; }
/* ======= PANNEAU RESIZABLE ======= */
/* Section Organigramme (gauche) */
#chart-section {
flex: 1;
display: flex;
flex-direction: column;
min-width: 400px;
overflow: hidden;
position: relative; /* Pour le positionnement absolu du bouton toggle */
background-color: rgba(255, 255, 255, 0.7); /* Transparence 70% */
transition: background-color 0.3s ease;
margin-bottom: 0; /* Pas de margin bas */
padding-bottom: 0; /* Pas de padding bas */
}
.section-header {
padding: 0 0 15px 0; /* Supprimé padding haut, droite, gauche - gardé seulement padding bas */
background-color: rgba(255, 255, 255, 0.7); /* Transparence 70% */
border-bottom: none; /* Pas de bordure */
display: flex;
justify-content: space-between; /* Titre à gauche, boutons à droite */
align-items: flex-start; /* Alignement en haut */
flex-shrink: 0; /* Ne pas réduire le header */
margin-right: 20px; /* Margin droit ajouté */
}
/* Container pour les boutons à droite du section-header */
.section-header-buttons {
display: flex;
align-items: center;
gap: 10px;
flex-shrink: 0;
}
.section-header h2 {
margin: 0;
color: var(--theme-text-primary);
font-size: 1.5rem;
}
.section-title-right {
margin: 0;
color: var(--theme-text-primary);
font-size: 1.5rem;
font-weight: bold;
flex-shrink: 0; /* Ne pas réduire */
}
/* Logo dans la section principale (styles identiques à header-left) */
.section-logo-container {
flex: 0 0 auto;
font-size: 1.5em;
font-weight: bold;
color: var(--primary-color);
display: flex;
align-items: center;
padding: 5px 15px 5px 5px;
background-color: transparent;
border-radius: 0;
border: none;
flex-shrink: 0;
text-decoration: none; /* Enlever le soulignement du lien */
cursor: pointer;
transition: opacity 0.2s ease, transform 0.2s ease;
}
.section-logo-container:hover {
opacity: 0.8;
transform: scale(1.02);
}
.section-logo-container img {
height: 40px;
width: auto;
}
/* Afficher/masquer les logos selon le thème */
.section-logo-container .logo-dark {
display: none;
}
.section-logo-container .logo-light {
display: block;
}
/* Mode sombre pour le logo dans la section */
[data-theme="dark"] .section-logo-container {
background-color: transparent;
}
[data-theme="dark"] .section-logo-container .logo-dark {
display: block;
}
[data-theme="dark"] .section-logo-container .logo-light {
display: none;
}
/* Logo SVG - texte adaptatif au thème */
.logo-svg .logo-text {
fill: #10091e;
}
[data-theme="dark"] .logo-svg .logo-text {
fill: #ffffff;
}
.section-title-group {
display: flex;
align-items: center;
gap: 15px;
justify-content: center; /* Centrage du groupe titre */
flex: 1; /* Prendre tout l'espace disponible */
}
.project-title-input-main {
font-size: 1.2em;
font-weight: 600;
color: var(--theme-text-primary);
background: #ffffff;
border: none;
border-bottom: 3px solid #cccccc;
border-right: 3px solid #cccccc;
padding: 5px 10px;
outline: none;
transition: border-color 0.3s ease, background-color 0.3s ease;
width: 50%; /* Réduit de moitié */
text-align: center; /* Centré dans sa largeur réduite */
}
.project-title-input-main:focus {
border-bottom: 3px solid var(--primary-color);
border-right: 3px solid var(--primary-color);
}
[data-theme="dark"] .project-title-input-main {
background: #2d2d2d;
}
[data-theme="dark"] .project-title-input-main:focus {
border-bottom: 3px solid var(--primary-color);
border-right: 3px solid var(--primary-color);
}
.project-title-input-main::placeholder {
color: var(--theme-text-secondary);
font-weight: normal;
}
.date-group {
display: flex;
flex-direction: column; /* Vertical layout */
align-items: center;
gap: 3px; /* Petit espacement entre label et date */
font-size: 0.8em; /* Police réduite */
color: var(--theme-text-secondary);
}
.last-update-label {
font-weight: 500;
font-size: 0.9em; /* Légèrement plus petit */
}
.date-container {
background-color: var(--theme-bg-secondary);
border: 1px solid var(--theme-border);
border-radius: 4px;
padding: 2px 6px;
}
.last-update-date {
font-weight: 600;
color: var(--theme-text-primary);
font-size: 0.85em; /* Police réduite */
}
/* Bouton toggle de la liste - Version dynamique */
.toggle-panel-btn-dynamic {
position: fixed; /* Fixed pour être complètement au-dessus de tout */
display: flex;
align-items: center;
justify-content: center;
width: 52px; /* 30% plus grand que 40px */
height: 52px; /* 30% plus grand que 40px */
padding: 0;
background-color: rgba(255, 255, 255, 0.95);
color: #333;
border: 1px solid var(--theme-border);
border-radius: 50%;
cursor: pointer;
font-size: 26px; /* 30% plus grand que 20px */
z-index: 99999 !important; /* Au-dessus de tout, même des modales et popups */
transition: all 0.3s ease, opacity 0.2s ease;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
transform-origin: center center; /* Le scale se fait depuis le centre du bouton */
pointer-events: auto; /* Toujours cliquable */
}
.toggle-panel-btn-dynamic:hover {
transform: scale(1.3); /* Scale augmenté de 30% */
background-color: rgba(230, 230, 230, 0.98);
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}
[data-theme="dark"] .toggle-panel-btn-dynamic {
background-color: rgba(45, 45, 45, 0.95);
color: #ffffff;
}
[data-theme="dark"] .toggle-panel-btn-dynamic:hover:not(.active) {
background-color: rgba(70, 70, 70, 0.98);
}
[data-theme="dark"] .toggle-panel-btn-dynamic:hover {
transform: scale(1.1) !important;
box-shadow: 0 4px 12px rgba(255, 255, 255, 0.2);
}
/* Ancien style - Peut être supprimé si non utilisé ailleurs */
.toggle-panel-btn {
display: flex;
align-items: center;
gap: 8px;
padding: 10px 18px;
background-color: var(--theme-bg-secondary);
color: var(--theme-text-primary);
border: 2px solid var(--theme-border);
border-radius: 8px;
cursor: pointer;
font-size: 14px;
font-weight: 600;
transition: all 0.2s ease;
}
.toggle-panel-btn:hover {
background-color: var(--primary-color);
color: white;
border-color: var(--primary-color);
transform: translateY(-1px);
box-shadow: 0 2px 8px rgba(52, 152, 219, 0.3);
}
.toggle-panel-btn.active {
background-color: rgba(128, 128, 128, 0.75); /* Gris moyen transparent 75% */
color: white;
border-color: #808080; /* Gris moyen au lieu de bleu */
}
.toggle-panel-btn .btn-icon {
font-size: 18px;
}
.toggle-panel-btn .btn-text {
font-size: 14px;
}
/* Poignée de redimensionnement */
#resize-handle {
width: 8px;
background-color: var(--theme-border);
cursor: col-resize;
position: relative;
flex-shrink: 0;
transition: all 0.3s ease;
display: flex;
align-items: center;
justify-content: center;
}
#resize-handle:hover {
background-color: var(--primary-color);
}
#resize-handle.resizing {
background-color: var(--primary-color);
}
.resize-handle-icon {
color: var(--theme-text-secondary);
font-size: 20px;
-webkit-user-select: none;
user-select: none;
pointer-events: none;
opacity: 0.5;
transition: opacity 0.2s ease;
}
#resize-handle:hover .resize-handle-icon {
opacity: 1;
}
/* Panneau Intervenants (droite) */
#intervenants-panel {
width: 350px;
display: flex;
flex-direction: column;
background-color: rgba(255, 255, 255, 0.7); /* Transparence 70% */
border-left: 1px solid var(--theme-border);
overflow: hidden;
flex-shrink: 0;
transition: all 0.3s ease;
margin-bottom: 0; /* Pas de margin bas */
padding-bottom: 0; /* Pas de padding bas */
}
/* Panneau caché - vraiment invisible */
#intervenants-panel.hidden {
display: none;
}
/* Poignée cachée quand panneau fermé */
#resize-handle.hidden {
display: none;
}
.panel-header {
display: none; /* Masquer le header du panneau intervenants */
}
.panel-presets {
display: none; /* Masquer les boutons presets */
}
/* Contrôles du panneau */
.panel-controls {
padding: 3px 20px 3px 8px; /* Padding de 3px en haut et en bas */
background-color: rgba(255, 255, 255, 0.7); /* Transparence 70% */
border-bottom: none; /* Pas de bordure */
display: flex;
gap: 10px;
align-items: center;
flex-wrap: wrap;
}
.panel-controls select {
flex: 1;
min-width: 120px;
}
/* Override des anciens styles d'intervenants-container */
/* SUPPRIMÉ - Définition déjà présente plus haut */
/* Application des thèmes aux éléments principaux */
footer {
height: var(--footer-height);
font-size: 0.9em;
font-style: normal;
color: var(--theme-text-primary);
background-color: var(--theme-bg-secondary);
border-top: 1px solid var(--theme-border);
margin: 0; /* Supprimé margin */
display: flex;
justify-content: center;
align-items: center;
padding: 0 20px;
transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}
footer p { margin: 2px 0; }
/* Theme Toggle Container - Style pillule */
.theme-toggle-container {
display: flex;
gap: 0;
background: transparent;
border-radius: 50px;
padding: 3px;
margin-left: 15px;
border: 1px solid var(--theme-border);
cursor: pointer;
transition: all 0.3s ease;
}
.theme-toggle-container:hover {
transform: scale(1.05);
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}
.theme-btn {
width: 31px;
height: 31px;
border-radius: 50%;
border: none;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.3s ease;
background: transparent;
}
/* Mode clair - Bouton non sélectionné */
:root:not([data-theme="dark"]) .theme-btn,
[data-theme="light"] .theme-btn {
background: transparent;
color: #333333;
}
/* Mode clair - Bouton sélectionné (light) */
:root:not([data-theme="dark"]) .theme-btn[data-theme-value="light"],
[data-theme="light"] .theme-btn[data-theme-value="light"] {
background: #333333;
color: rgba(250, 248, 240, 1);
}
/* Mode sombre - Bouton non sélectionné */
[data-theme="dark"] .theme-btn {
background: transparent;
color: #ffffff;
}
/* Mode sombre - Bouton sélectionné (dark) */
[data-theme="dark"] .theme-btn[data-theme-value="dark"] {
background: #ffffff;
color: rgba(45, 45, 45, 1);
}
.theme-btn:hover {
transform: scale(1.05);
}
.theme-icon {
font-size: 16px;
font-weight: bold;
transition: transform 0.3s ease;
}
.theme-btn:hover .theme-icon {
transform: rotate(15deg);
}
@media (max-width: 900px) {
.controls {
position: static;
width: 100%;
height: auto;
box-shadow: var(--shadow);
margin-bottom: 20px;
left: 0;
top: auto;
align-items: center;
padding-right: 0;
z-index: auto;
pointer-events: auto;
}
.actions-panel {
flex-direction: row;
flex-wrap: wrap;
justify-content: center;
border-radius: 10px;
width: 100%;
transform: scale(1);
transform-origin: center center;
}
.controls .separator-line {
height: 30px;
width: 1px;
border-top: none;
border-left: 1px solid #cccccc;
margin: 0 5px;
}
.main-content-wrapper {
margin-left: 0;
padding: 20px;
}
.controls-overlay {
display: none; /* Masquer le panneau overlay sur mobile */
}
.main-content { width: 100%; }
/* Panneau en fullscreen sur mobile */
#main-content-container {
flex-direction: column;
}
#content-area {
flex-direction: column;
}
#chart-section {
min-width: 100%;
height: 60%;
}
#resize-handle {
display: none;
}
#intervenants-panel {
width: 100%;
height: 40%;
border-left: none;
border-top: 1px solid var(--theme-border);
}
}
/* ======= HARMONISATION DES COULEURS EN MODE SOMBRE ======= */
/* Mode sombre - Noir profond */
[data-theme="dark"] #cy-chart {
background-color: #0a0a0a; /* Noir profond */
}
[data-theme="dark"] footer {
background-color: rgba(45, 45, 45, 0.7); /* Gris foncé transparent 70% */
}
/* Mode sombre - Conteneurs transparents (s'appuient sur main-content) */
[data-theme="dark"] #main-content-container {
background: transparent;
}
[data-theme="dark"] .section-header {
background-color: transparent;
}
[data-theme="dark"] .section-title-right {
color: #f5f5dc; /* Blanc cassé en mode sombre */
}
[data-theme="dark"] #content-area {
background-color: transparent;
}
[data-theme="dark"] #chart-section {
background-color: transparent;
}
[data-theme="dark"] #chart-container {
background-color: transparent;
}
[data-theme="dark"] #cy-wrapper {
background-color: transparent;
}
[data-theme="dark"] #intervenants-panel {
background-color: transparent;
}
[data-theme="dark"] .panel-controls {
background-color: transparent;
}
[data-theme="dark"] #intervenants-container {
background: transparent;
}
[data-theme="dark"] #intervenants-list-container {
background-color: transparent;
}
[data-theme="dark"] .recap-list {
background-color: transparent;
}
/* Mode sombre - Cases remplissables avec arrière-plan noir */
[data-theme="dark"] input,
[data-theme="dark"] select {
background-color: #000000 !important; /* Arrière-plan noir */
color: #ffffff !important; /* Texte blanc */
border-color: #404040 !important; /* Bordure grise */
}
[data-theme="dark"] input:focus,
[data-theme="dark"] select:focus {
background-color: #000000 !important; /* Garde l'arrière-plan noir au focus */
border-color: var(--primary-color) !important;
box-shadow: 0 0 0 2px rgba(52, 152, 219, 0.2) !important;
}
/* Mode clair - Harmonisation des couleurs des blocs dans la liste - bleu azur clair transparent 60% */
:root:not([data-theme="dark"]) .recap-item .details-block,
[data-theme="light"] .recap-item .details-block {
background: rgba(224, 240, 255, 0.6) !important; /* Bleu azur clair transparent 60% */
border: 1px solid #B0B0B0;
}
/* Mode sombre - Harmonisation des couleurs des blocs dans la liste - transparent 60% */
[data-theme="dark"] .recap-item .details-block {
background-color: rgba(45, 45, 45, 0.6); /* Gris foncé transparent 60% */
border: 1px solid #404040; /* Bordure grise pour le mode sombre */
}
/* Bordure pour actions-panel en mode sombre */
[data-theme="dark"] .actions-panel {
border: 1px solid #D0D0D0; /* Bordure gris clair en mode sombre */
background-color: rgba(45, 45, 45, 0.7); /* Même couleur que main-content en mode sombre */
}
/* Wrapper action panel en mode sombre */
[data-theme="dark"] .actions-panel-wrapper {
background-color: transparent; /* Transparent pour éviter l'overlay */
}
/* Nouvelle présentation des cartes intervenant */
.details-input-group {
display: flex !important;
flex-direction: column !important;
gap: 3px; /* Espacement réduit entre label et input */
margin-bottom: 3.75px; /* Margin divisé par 2 (7.5px/2 = 3.75px) */
text-align: left !important; /* Force l'alignement à gauche */
}
.details-input-group label {
font-size: 0.9em;
font-weight: 600;
color: var(--theme-text-secondary);
}
.details-input-group input {
width: 100% !important;
padding: 8px 12px;
border: 1px solid var(--theme-border);
border-radius: 4px;
font-size: 0.95em;
background-color: var(--theme-bg-primary);
color: var(--theme-text-primary);
transition: border-color 0.3s ease, background-color 0.3s ease;
text-align: left !important; /* Force l'alignement à gauche du texte */
}
.details-input-group input:focus {
outline: none;
border-color: var(--primary-color);
box-shadow: 0 0 0 2px rgba(52, 152, 219, 0.2);
}
.pappers-link {
color: var(--primary-color);
text-decoration: none;
margin-left: 5px;
cursor: pointer;
}
.pappers-link:hover {
text-decoration: underline;
}
/* Fond bleu azur foncé pour les cartes intervenant en mode clair */
:root:not([data-theme="dark"]) .recap-item,
[data-theme="light"] .recap-item {
background-color: #A0C8F0; /* Bleu azur foncé */
}
:root:not([data-theme="dark"]) .recap-item .recap-header,
[data-theme="light"] .recap-item .recap-header {
background-color: rgba(240, 248, 255, 0.8); /* Bleu azur très clair transparent 80% */
}
:root:not([data-theme="dark"]) .details-content,
[data-theme="light"] .details-content {
background: linear-gradient(to bottom right, rgba(160, 200, 240, 0.7), #E0F0FF 50%, #A0C8F0) !important; /* Dégradé avec transparence 70% en haut gauche */
}
/* ======= HARMONISATION DES COULEURS EN MODE CLAIR ======= */
/* Mode clair - Dégradé bleu azur 3 étapes : foncé-clair-foncé */
:root:not([data-theme="dark"]) .main-content-wrapper,
[data-theme="light"] .main-content-wrapper {
background: linear-gradient(to bottom right, #A0C8F0, #E0F0FF 50%, #A0C8F0) !important; /* Bleu azur foncé en haut gauche, clair au milieu, foncé en bas droit */
}
/* Wrapper action panel en mode clair */
.actions-panel-wrapper {
background-color: transparent; /* Transparent pour éviter l'overlay */
}
/* Mode clair - Dégradé blanc crème 3 étapes avec transparence ajustée */
:root:not([data-theme="dark"]) .main-content,
[data-theme="light"] .main-content {
background: linear-gradient(to bottom right, rgba(250, 248, 240, 0.8), rgba(250, 248, 240, 0.6) 50%, rgba(250, 248, 240, 1)) !important;
}
/* ======= MODE SOMBRE - PRIORITÉ MAXIMALE ======= */
/* Mode sombre - Main wrapper noir uni */
[data-theme="dark"] .main-content-wrapper {
background-color: #0a0a0a !important; /* Noir profond uni */
}
/* Mode sombre - Main content dégradé 3 étapes avec transparence variable */
[data-theme="dark"] .main-content {
background: linear-gradient(to bottom right, rgba(45, 45, 45, 0.9), rgba(45, 45, 45, 0.6) 50%, rgba(45, 45, 45, 1)) !important;
}
/* Mode clair - Conteneurs transparents (s'appuient sur main-content) */
#main-content-container {
background: transparent;
}
.section-header {
background-color: transparent;
}
#content-area {
background-color: transparent;
}
#chart-section {
background-color: transparent;
}
#chart-container {
background-color: transparent;
}
#cy-wrapper {
background-color: transparent;
}
#intervenants-panel {
background-color: transparent;
}
.panel-controls {
background-color: transparent;
}
#intervenants-container {
background: transparent;
}
#intervenants-list-container {
background-color: transparent;
}
.recap-list {
background-color: transparent;
}
/* Les styles des titres h2 sont maintenant dans les styles harmonisés ci-dessus */
/* Boutons PP/PM en mode sombre - spécificité élevée */
[data-theme="dark"] .type-selector button {
background-color: var(--theme-bg-secondary) !important;
color: white !important;
border: 1px solid var(--theme-border) !important;
padding: 12px 20px !important; /* Padding pour que le texte respire */
transition: all 0.2s ease !important; /* Transition fluide */
cursor: pointer !important;
}
[data-theme="dark"] .type-selector button:hover {
background-color: var(--theme-bg-primary) !important;
border-color: var(--primary-color) !important;
}
[data-theme="dark"] .type-selector button.active {
background: var(--primary-color) !important; /* Bleu vif pour l'actif */
border: 1px solid var(--primary-color) !important;
box-shadow: 0 2px 4px rgba(52, 152, 219, 0.3) !important; /* Ombre pour l'effet de relief */
}
/* Sélecteur PP/PM adaptatif au thème */
.type-selector button {
background-color: var(--theme-bg-secondary);
color: var(--theme-text-primary);
border: 1px solid var(--theme-border);
}
.type-selector button.active {
background: rgba(52, 152, 219, 0.6);
color: white;
}
/* Bouton ajout vert */
#add-entity-btn {
background-color: #2ecc71 !important; /* Vert comme ajout de masse */
color: white !important;
border: none !important;
border-radius: 4px !important;
font-weight: 600 !important;
width: 100% !important; /* Largeur complète */
padding: 15px 20px !important; /* Padding plus grand */
font-size: 1.1em !important; /* Police plus grande */
margin-top: 20px !important; /* Marge en haut */
transition: all 0.2s ease !important; /* Transition fluide */
cursor: pointer !important;
}
#add-entity-btn:hover {
background-color: #27ae60 !important; /* Vert plus foncé au survol */
transform: scale(1.02); /* Légère augmentation au survol */
box-shadow: 0 4px 8px rgba(46, 204, 113, 0.3); /* Ombre verte au survol */
}
/* ======= Mode Lecture Seule (Read-Only Export) ======= */
/* Bannière en haut de l'écran */
.readonly-banner {
position: fixed;
top: 0;
left: 0;
right: 0;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
color: white;
padding: 12px 20px;
text-align: center;
font-weight: 600;
z-index: 9999;
box-shadow: 0 2px 8px rgba(0,0,0,0.2);
font-size: 14px;
animation: slideDown 0.3s ease-out;
}
@keyframes slideDown {
from {
transform: translateY(-100%);
opacity: 0;
}
to {
transform: translateY(0);
opacity: 1;
}
}
/* Mode lecture seule : masquer les boutons d'édition */
.readonly-mode .edit-action,
.readonly-mode .action-btn:not(.readonly-allowed),
.readonly-mode .actions-panel {
display: none !important;
}
/* Panneau de contrôle en lecture seule (coin inférieur droit) */
.readonly-controls {
position: fixed;
bottom: 20px;
right: 20px;
display: flex;
flex-direction: column;
gap: 10px;
z-index: 1000;
}
.readonly-controls button {
background: var(--primary-color);
color: white;
border: none;
border-radius: 8px;
padding: 12px 16px;
cursor: pointer;
font-weight: 600;
font-size: 14px;
box-shadow: 0 2px 8px rgba(0,0,0,0.2);
transition: all 0.2s ease;
white-space: nowrap;
}
.readonly-controls button:hover {
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(0,0,0,0.3);
background: var(--primary-color-dark);
}
.readonly-controls button:active {
transform: translateY(0);
box-shadow: 0 2px 6px rgba(0,0,0,0.2);
}
/* Watermark en bas à gauche */
.readonly-watermark {
position: fixed;
bottom: 10px;
left: 10px;
font-size: 11px;
color: var(--theme-text-secondary);
opacity: 0.6;
z-index: 999;
user-select: none;
}
/* Ajustements pour le body en mode readonly */
body.readonly-mode {
padding-top: 48px;
}
/* Ajustement du chart en mode readonly */
.readonly-mode #cy-chart {
height: calc(100vh - 48px);
}
/* Style pour le hover des checkboxes dans la modale readonly */
#readonly-export-modal label:hover {
background: var(--theme-bg-hover, rgba(52, 152, 219, 0.1));
}
/* ======================================================
NOUVELLE MODALE D'EXPORT D'IMAGES AVEC FORMATS
====================================================== */
/* Boutons de sélection de format */
.export-format-btn {
display: flex;
flex-direction: column;
align-items: center;
gap: 6px;
padding: 16px 12px;
border: 2px solid var(--theme-border);
border-radius: 8px;
background: var(--theme-bg-secondary);
cursor: pointer;
transition: all 0.2s ease;
font-family: inherit;
color: var(--theme-text-primary);
}
.export-format-btn:hover {
border-color: var(--theme-accent);
background: var(--theme-bg-primary);
transform: translateY(-2px);
box-shadow: 0 4px 8px rgba(0,0,0,0.12);
}
.export-format-btn.active {
border-color: var(--theme-accent);
background: var(--theme-accent);
color: white;
box-shadow: 0 4px 12px rgba(52, 152, 219, 0.3);
}
.export-format-btn .format-icon {
font-size: 28px;
line-height: 1;
}
.export-format-btn .format-name {
font-weight: 600;
font-size: 13px;
}
.export-format-btn .format-ratio {
font-size: 11px;
opacity: 0.8;
font-weight: 500;
}
.export-format-btn.active .format-name,
.export-format-btn.active .format-ratio {
color: white;
}
/* Rectangle de prévisualisation adaptatif */
.export-preview-container {
position: relative;
}
.export-preview-frame {
max-width: 100%;
max-height: 35vh;
overflow: hidden;
}
/* Ratio par défaut (16:9) */
.export-preview-frame {
aspect-ratio: 16 / 9;
}
/* Ratios spécifiques selon le format sélectionné */
.export-preview-frame[data-ratio="presentation_169"] {
aspect-ratio: 16 / 9;
}
.export-preview-frame[data-ratio="a4_landscape"] {
aspect-ratio: 1.414 / 1; /* 2 */
}
.export-preview-frame[data-ratio="a4_portrait"] {
aspect-ratio: 1 / 1.414; /* 1/2 */
}
.export-preview-frame[data-ratio="square"] {
aspect-ratio: 1 / 1;
}
.export-preview-frame[data-ratio="portrait_916"] {
aspect-ratio: 9 / 16;
}
/* Options de qualité */
.export-quality-option {
padding: 12px;
border: 2px solid var(--theme-border);
border-radius: 6px;
background: var(--theme-bg-secondary);
transition: all 0.2s ease;
}
.export-quality-option:hover {
border-color: var(--theme-accent);
background: var(--theme-bg-primary);
}
.export-quality-option.active,
.export-quality-option:has(input:checked) {
border-color: var(--theme-accent);
background: rgba(52, 152, 219, 0.1);
}
.export-quality-option input[type='radio'] {
accent-color: var(--theme-accent);
}
/* Nouveaux boutons de qualité (version bouton simple) */
.export-quality-btn {
width: 100%;
padding: 12px 16px;
border: 2px solid var(--theme-border);
border-radius: 8px;
background: var(--theme-bg-secondary);
cursor: pointer;
text-align: left;
transition: all 0.2s ease;
font-family: inherit;
color: var(--theme-text-primary);
}
.export-quality-btn:hover {
border-color: var(--theme-accent);
background: var(--theme-bg-primary);
transform: translateY(-1px);
box-shadow: 0 2px 6px rgba(0,0,0,0.1);
}
.export-quality-btn.active {
border-color: var(--primary-color);
background: var(--primary-color) !important;
box-shadow: 0 3px 10px rgba(0, 174, 239, 0.3);
}
/* Forcer le texte blanc pour les éléments enfants des boutons actifs */
.export-quality-btn.active,
.export-quality-btn.active div {
color: #ffffff !important;
}
/* Conteneur de la modale d'export */
.export-modal-modern {
background: #E0F0FF !important; /* Bleu azur éclairci - Mode clair */
}
[data-theme="dark"] .export-modal-modern {
background: #0a0a0a !important; /* Noir profond - Mode sombre */
}
/* Arrière-plan blanc pour la visualisation dans les deux modes */
.export-preview-container {
background: #ffffff !important;
}
/* Effet zoom sur les boutons d'action */
.modal-actions button:hover {
transform: scale(1.05);
transition: transform 0.2s ease;
}
/* Animation de chargement pour la prévisualisation */
.export-preview-loading {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
color: var(--theme-text-secondary);
font-size: 14px;
}
/* Responsive pour petits écrans */
@media (max-width: 768px) {
.export-formats-grid {
grid-template-columns: repeat(2, 1fr) !important;
}
.export-quality-options {
flex-direction: column !important;
}
.export-preview-frame {
max-height: 25vh !important;
}
}
/* Rectangle de prévisualisation dans la modale */
.export-preview-frame {
aspect-ratio: 16 / 9; /* Par défaut 16:9 */
max-width: 100%;
min-width: 300px;
max-height: 40vh;
transition: aspect-ratio 0.3s ease;
}
/* ======================================================
OVERLAY DE CHARGEMENT EXPORT
====================================================== */
/* Animation de rotation dans le sens des aiguilles d'une montre */
@keyframes spin-clockwise {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
#export-loading-overlay {
display: none;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.7);
z-index: 999999 !important; /* Au-dessus de tout, même du bouton toggle */
justify-content: center;
align-items: center;
backdrop-filter: blur(5px);
-webkit-backdrop-filter: blur(5px);
}
#export-loading-overlay.active {
display: flex;
}
#export-loading-spinner {
width: 80px;
height: 80px;
animation: spin-clockwise 1.5s linear infinite;
filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.3));
}