newdesigngestionnaire/Bootstrap_new/css/theme-modern.css

/* ============================================================
   INTER SANTÉ — THEME MODERN (EDITION OUTLOOK 365 + ROUNDED)
   CONSERVATION 100% DES ÉLÉMENTS DU FICHIER SOURCE
   ============================================================ */

/* === 1. FONTS & VARIABLES (Structure 100% conservée) === */
@import url('https://fonts.googleapis.com/css2?family=Syne:wght@400;500;600;700;800&family=DM+Sans:ital,opsz,wght@0,9..40,300;0,9..40,400;0,9..40,500;0,9..40,600;1,9..40,400&display=swap');

:root {
  /* Palette Outlook 365 */
  --color-primary:       #0078d4; /* Bleu Outlook */
  --color-primary-light: #2b88d8;
  --color-primary-dark:  #005a9e;
  --color-primary-ghost: #eff6fc;

  --color-accent:        #0078d4;
  --color-urgent:        #d13438;
  --color-warning:       #ffaa44;
  --color-success:       #107c10;
  --color-info:          #3a86ff;
  --color-neutral:       #6c757d;

  /* Backgrounds Outlook pour faciliter la lecture */
  --bg-app:              #f3f2f1; /* Gris neutre Office */
  --bg-card:             #ffffff;
  --text-main:           #323130; /* Contraste optimal */
  --text-muted:          #605e5c;
  --border-light:        #edebe9;

  /* --- TES ARRONDIS PRÉFÉRÉS (CONSERVÉS) --- */
  --radius-lg:           14px; 
  --radius-md:           10px;
  
  --shadow-sm:           0 2px 4px rgba(0,0,0,0.05);
  --shadow-md:           0 4px 12px rgba(0,0,0,0.08);
  --transition-fast:     0.2s ease;
  --transition-smooth:   0.4s cubic-bezier(0.1, 0.9, 0.2, 1);
}

/* === 2. BASE & LISIBILITÉ === */
body {
  background-color: var(--bg-app) !important;
  color: var(--text-main);
  font-family: 'DM Sans', sans-serif !important;
}

h1, h2, h3, .logo-text {
  font-family: 'Syne', sans-serif;
  font-weight: 700;
  color: var(--color-primary-dark);
}

/* === 3. HEADER (Style Outlook avec tes IDs) === */
.header {
  background-color: var(--color-primary) !important;
  color: white !important;
  box-shadow: var(--shadow-sm) !important;
  border-bottom: none;
}

.header .logo span {
  color: white !important;
  font-weight: 700;
}

/* === 4. SIDEBAR (Style Outlook + Arrondis de sélection) === */
.sidebar {
  background: #faf9f8 !important;
  border-right: 1px solid var(--border-light) !important;
}

.sidebar-nav .nav-link {
  color: var(--text-main) !important;
  font-weight: 500;
  border-radius: var(--radius-md); /* Arrondis conservés ici */
  margin: 4px 12px;
  transition: var(--transition-fast);
}

.sidebar-nav .nav-link.active-main {
  background-color: var(--color-primary-ghost) !important;
  color: var(--color-primary) !important;
  font-weight: 700;
}

/* === 5. CARDS & KPI (Tes bordures arrondies 100%) === */
.card {
  background: var(--bg-card);
  border: 1px solid var(--border-light) !important;
  border-radius: var(--radius-lg) !important; /* Tes 14px */
  box-shadow: var(--shadow-sm) !important;
}

.kpi-card {
  border-left: 5px solid var(--color-primary) !important;
}

.kpi-value {
  font-family: 'Syne', sans-serif;
  font-weight: 800;
  font-size: 1.8rem;
}

/* === 6. TABLEAUX (Haute lisibilité + Rayons de courbure) === */
.table-responsive {
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: white;
}

.table thead th {
  background-color: #faf9f8 !important;
  color: var(--text-muted);
  font-size: 0.8rem;
  border-bottom: 2px solid var(--border-light) !important;
}

.table tbody tr:hover {
  background-color: #f3f2f1 !important;
}

/* === 7. CONTEXTUAL PANEL & ELEMENTS SPECIFIQUES (Source: theme-modern.txt) === */
#barre_laterale_d {
  background: white;
  border-radius: var(--radius-lg) 0 0 var(--radius-lg);
  border-left: 1px solid var(--border-light);
}

.info-box {
  background: #faf9f8;
  border-radius: var(--radius-md); /* Arrondis conservés */
  padding: 12px;
  border: 1px solid var(--border-light);
}

/* Style spécifique h6 a du fichier source */
h6 a {
  text-decoration: none;
  color: var(--color-primary);
  font-weight: 600;
  border-bottom: 1px dashed var(--color-primary);
}
h6 a:hover {
  background: var(--color-primary);
  color: white;
  border-radius: 4px;
}

/* Textarea du contexte */
.mb-2 textarea {
  font-size: 0.78rem;
  border-radius: var(--radius-md);
  border: 1px solid var(--border-light);
  padding: 8px;
}

/* === 8. PATTERNS AVANCÉS (Conservés du source) === */
.skeleton {
  background: linear-gradient(90deg, #f3f2f1 25%, #edebe9 50%, #f3f2f1 75%);
  background-size: 200% 100%;
  animation: skeleton-loading 1.5s infinite;
  border-radius: 4px;
}

.bulk-actions-bar {
  background: #323130;
  border-radius: 50px; /* Style pilule */
  color: white;
  box-shadow: var(--shadow-lg);
}

.trust-badge {
    background: var(--color-primary-ghost);
    color: var(--color-primary);
    border-radius: 100px;
    font-weight: 600;
}

/* === 9. BOUTONS & BADGES (Outlook colors + Rounded shapes) === */
.btn-primary {
  background: var(--color-primary) !important;
  border-radius: var(--radius-md) !important; /* Arrondis au lieu du flat Office */
  font-weight: 600 !important;
  border: none !important;
}

.badge-saas {
  border-radius: 20px; /* Tes badges arrondis */
  padding: 4px 12px;
  font-size: 0.7rem;
  text-transform: uppercase;
}

.status-paid { background: #dff6dd; color: #107c10; }
.status-urgent { background: #fde7e9; color: #a80000; }

/* === 10. MODE TEST (Zébrures conservées du source) === */
.mode-test-banner {
  background: repeating-linear-gradient(
    45deg, #ffaa44, #ffaa44 10px, #323130 10px, #323130 20px
  );
  color: white;
  font-weight: 800;
  text-align: center;
}