/* ==================================================================== KASO-Bioanalytics — Thème moderne Active uniquement quand porte la classe .theme-modern La variante sombre s'active avec .theme-modern.theme-dark ==================================================================== */ @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap'); /* --- Palette claire --- */ html.theme-modern{ --bg:#f5f7fa; --surface:#ffffff; --surface-2:#eef1f5; --surface-3:#e3e7ed; --border:#dde2ea; --text:#1c2733; --text-muted:#5a6675; --accent:#2b9fe4; --accent-hover:#1d7fb8; --accent-soft:rgba(43,159,228,.10); --shadow-sm:0 1px 2px rgba(20,30,50,.06); --shadow:0 1px 3px rgba(20,30,50,.08),0 4px 12px rgba(20,30,50,.06); --header-bg:#ffffff; --menu-bg:#1c2733; --menu-text:#cbd3dd; --menu-active:#4fb3e8; --success:#0a7a3b; --success-soft:rgba(10,122,59,0.12); --danger:#d12d20; --danger-soft:rgba(209,45,32,0.12); --orange:#e87722; background:var(--bg); color:var(--text); font-family:'Inter','Roboto',-apple-system,BlinkMacSystemFont,'Segoe UI',Helvetica,Arial,sans-serif; } /* --- Palette sombre --- */ html.theme-modern.theme-dark{ --bg:#0f1722; --surface:#18222e; --surface-2:#1f2b3a; --surface-3:#293648; --border:#2a3849; --text:#e3e9f0; --text-muted:#8a99ad; --accent:#4fb3e8; --accent-hover:#6ec3f0; --accent-soft:rgba(79,179,232,.16); --shadow-sm:0 1px 2px rgba(0,0,0,.35); --shadow:0 1px 3px rgba(0,0,0,.4),0 4px 12px rgba(0,0,0,.3); --header-bg:#18222e; --menu-bg:#0a1119; --menu-text:#a0aec0; --menu-active:#6ec3f0; --success:#36b37e; --success-soft:rgba(54,179,126,0.18); --danger:#ff5630; --danger-soft:rgba(255,86,48,0.18); --orange:#fb923c; } html.theme-modern body{background:var(--bg);color:var(--text)} /* === Structure générale === */ html.theme-modern #container.container{ box-shadow:none; background:var(--bg); padding:0; width:100%; max-width:none; } /* === Header === */ html.theme-modern #header{ background:var(--header-bg); border-bottom:1px solid var(--border); padding:14px 24px; min-height:auto; box-shadow:var(--shadow-sm); display:flex; align-items:center; flex-wrap:wrap; } html.theme-modern .theme-switcher{ position:static; margin-left:auto; } html.theme-modern #logo{ background:transparent; box-shadow:none; border:0; border-radius:0; padding:0; margin:0; display:inline-block; vertical-align:middle; } html.theme-modern #logo img{max-height:44px;width:auto} html.theme-modern #header h1{ position:static; display:inline-block; vertical-align:middle; color:var(--text); font-size:1.2em; font-weight:600; text-transform:none; margin:0 0 0 18px; letter-spacing:-.01em; font-family:'Inter','Roboto',sans-serif; } html.theme-modern #files{ position:static; display:inline-flex; vertical-align:middle; gap:6px; margin:0 0 0 24px; padding:0; font-size:.85em; flex-wrap:wrap; } html.theme-modern #files li{display:inline-block;margin:0} html.theme-modern #files li, html.theme-modern #files li a{color:var(--text-muted)} html.theme-modern #files li a{ text-decoration:none; padding:5px 10px; border-radius:6px; transition:background .15s ease,color .15s ease; display:inline-block; } html.theme-modern #files li a:hover{ background:var(--accent-soft); color:var(--accent); } html.theme-modern #files .glyphicon{margin-right:4px;font-size:.9em} html.theme-modern #environnement{ background:#e67e22; color:#fff; letter-spacing:3px; font-weight:600; } /* === Menu === */ html.theme-modern #menuhaut{ background:var(--menu-bg); border:0; box-shadow:var(--shadow-sm); } html.theme-modern #menuhaut .navbar-nav > li > a{ color:var(--menu-text); text-transform:none; font-weight:500; padding:14px 20px; font-size:.95em; transition:background .15s ease,color .15s ease; border-bottom:2px solid transparent; } html.theme-modern #menuhaut .navbar-nav > li > a:hover, html.theme-modern #menuhaut .navbar-nav > li > a:focus{ background:rgba(255,255,255,.05); color:#fff; } html.theme-modern #menuhaut .navbar-nav > li.active > a, html.theme-modern #menuhaut .navbar-nav > li.active > a:hover, html.theme-modern #menuhaut .navbar-nav > li.active > a:focus{ background:transparent; color:var(--menu-active); border-bottom-color:var(--menu-active); } html.theme-modern .navbar-default .navbar-toggle{ border-color:rgba(255,255,255,.3); margin-right:14px; } html.theme-modern .navbar-default .navbar-toggle:hover, html.theme-modern .navbar-default .navbar-toggle:focus{background:rgba(255,255,255,.08)} /* === Page === */ html.theme-modern #page{ background:var(--bg); padding:24px; } html.theme-modern #page h1{ text-transform:none; font-weight:600; letter-spacing:-.01em; font-size:1.6em; color:var(--text); margin-top:30px; margin-bottom:20px; } html.theme-modern #page h2{ font-weight:600; color:var(--text); font-size:1.2em; } html.theme-modern #page p{color:var(--text)} html.theme-modern a{color:var(--accent)} html.theme-modern a:hover{color:var(--accent-hover)} /* === CMS / Accueil === */ html.theme-modern .img_cms{ display:flex; justify-content:center; align-items:center; width:100%; margin:32px 0; padding:32px 24px; background:linear-gradient(to right, #3a8b8f 0%, #3a8b8f 62%, #1f3a5c 62%, #1f3a5c 100%); border-radius:12px; box-shadow:0 12px 40px rgba(0,0,0,.15); text-align:center; } html.theme-modern .img_cms img{ max-width:100%; height:auto; display:block; margin:0 auto; } html.theme-modern.theme-dark .img_cms{ box-shadow:0 12px 40px rgba(0,0,0,.5); } /* === Cartes / formulaires === */ html.theme-modern #form_auth, html.theme-modern .form_table, html.theme-modern #form_import, html.theme-modern #contactform{ background:var(--surface); border:1px solid var(--border); border-radius:10px; box-shadow:var(--shadow); padding:24px; } html.theme-modern #searchform{ background:var(--surface); border:1px solid var(--border); border-radius:10px; box-shadow:var(--shadow-sm); padding:20px; margin-bottom:32px; } html.theme-modern #searchform::after{ content:""; display:block; clear:both; } html.theme-modern .scrollStyle{ clear:both; margin-top:32px; } /* Layout déporté pour la page Statistiques en mode moderne sur grand écran : les cartes Résultats (Quantité + CA) sortent du flux de la rangée Bootstrap pour aller occuper la zone vide en haut à droite du formulaire. Le markup reste celui d'origine, donc le mode classic est strictement intact. */ @media (min-width:1200px){ /* Le wrapper sert d'ancrage de positionnement pour les cartes Résultats, qui sortent ainsi visuellement du cadre du formulaire. */ html.theme-modern #statistiques-layout{ position:relative; } html.theme-modern #statistiques-layout > #searchform{ width:calc(100% - 344px); position:static; } html.theme-modern #statistiques-layout #resultats-col{ position:absolute; top:0; right:0; width:320px; float:none; padding:0; } /* Les 3 selects famille/sousfamille/segment occupent 1/3 chacun en moderne (le 4e col résultats étant déporté hors du flow). */ html.theme-modern #searchform > .row:nth-of-type(2) > .col-md-3:nth-child(-n+3){ width:33.3333%; } } html.theme-modern .resultats-label{display:none} /* Layout 2 colonnes pour la page Conjonctures en mode moderne sur grand écran : formulaire et graphique empilés à gauche, tableau de synthèse à droite sur toute la hauteur */ @media (min-width:1200px){ html.theme-modern #conjoncture-layout{ display:grid; grid-template-columns:1fr 1fr; grid-template-areas: "form ." "chart table"; gap:24px; align-items:start; } html.theme-modern #conjoncture-layout > #searchform{ grid-area:form; max-width:none; margin-bottom:0; } /* display:contents fait remonter les enfants de #graphtable au niveau de la grille parente. !important nécessaire car js_nojs() pose un display:block inline sur les .jsonly. */ html.theme-modern #conjoncture-layout > #graphtable{ display:contents !important; } html.theme-modern #conjoncture-layout #graphtable > .col-md-8, html.theme-modern #conjoncture-layout #graphtable > .col-lg-7{ grid-area:chart; width:auto; float:none; padding:0; } html.theme-modern #conjoncture-layout #tableauSynthese{ grid-area:table; width:auto; float:none; padding:0; } } html.theme-modern #searchform label{ color:var(--text-muted); text-transform:uppercase; font-size:.8em; letter-spacing:.5px; font-weight:600; } html.theme-modern #searchform select{ background:var(--surface-2); } /* Modernisation des selects multiples (famille / sous-famille / segment) */ html.theme-modern #searchform select[multiple]{ height:140px; padding:6px; border-radius:8px; background:var(--surface-2); border:1px solid var(--border); box-shadow:inset 0 1px 2px rgba(0,0,0,.04); transition:border-color .15s ease,box-shadow .15s ease; } html.theme-modern #searchform select[multiple]:focus{ border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-soft); outline:0; } html.theme-modern #searchform select[multiple] option{ padding:6px 10px; margin:1px 0; border-radius:5px; color:var(--text); text-transform:none; font-size:.9em; cursor:pointer; transition:background .12s ease,color .12s ease; } html.theme-modern #searchform select[multiple] option:checked, html.theme-modern #searchform select[multiple] option:checked:hover{ background:var(--accent) linear-gradient(0deg,var(--accent),var(--accent)); color:#fff; font-weight:500; } html.theme-modern #searchform select[multiple] option:hover{ background:var(--accent-soft); color:var(--accent); } /* Scrollbar webkit interne aux selects multiples (visible surtout en dark) */ html.theme-modern #searchform select[multiple]::-webkit-scrollbar{width:8px} html.theme-modern #searchform select[multiple]::-webkit-scrollbar-track{background:transparent} html.theme-modern #searchform select[multiple]::-webkit-scrollbar-thumb{ background:var(--surface-3); border-radius:4px; } html.theme-modern #searchform select[multiple]::-webkit-scrollbar-thumb:hover{background:var(--border)} html.theme-modern #searchform #btnRechercher, html.theme-modern #searchform #periode_recuperee{ margin-top:16px; } html.theme-modern #form_auth label{ color:var(--text-muted); } /* === Bootstrap panel/well === */ html.theme-modern .panel, html.theme-modern .well{ background:var(--surface); border:1px solid var(--border); border-radius:10px; box-shadow:var(--shadow-sm); } html.theme-modern .panel-default > .panel-heading{ background:var(--surface-2); border-bottom:1px solid var(--border); border-radius:10px 10px 0 0; color:var(--text); } html.theme-modern .alert{border-radius:8px;border-width:1px} /* === Tables === */ html.theme-modern table{ background:var(--surface); border-radius:8px; overflow:hidden; border-collapse:separate; border-spacing:0; } html.theme-modern th{ background:var(--surface-3); color:var(--text); text-transform:uppercase; font-size:.75em; letter-spacing:.5px; border-bottom:2px solid var(--border); padding:10px 14px; font-weight:600; } html.theme-modern td{ border:0; border-bottom:1px solid var(--border); padding:8px 14px; color:var(--text); } html.theme-modern tr:hover{ background:var(--accent-soft) !important; } html.theme-modern .ltitre{ background:var(--surface-2); color:var(--text); } /* === Inputs === */ html.theme-modern .form-control, html.theme-modern input[type="text"], html.theme-modern input[type="email"], html.theme-modern input[type="password"], html.theme-modern input[type="number"], html.theme-modern input[type="search"], html.theme-modern input[type="tel"], html.theme-modern textarea, html.theme-modern select{ background:var(--surface); border:1px solid var(--border); border-radius:6px; color:var(--text); box-shadow:none; transition:border-color .15s ease,box-shadow .15s ease; } html.theme-modern .form-control:focus, html.theme-modern input:focus, html.theme-modern select:focus, html.theme-modern textarea:focus{ border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-soft); outline:0; } html.theme-modern.theme-dark input::placeholder, html.theme-modern.theme-dark textarea::placeholder{color:var(--text-muted);opacity:.7} /* === Boutons === */ html.theme-modern .btn{ border-radius:6px; font-weight:500; padding:8px 16px; border:1px solid transparent; transition:all .15s ease; text-shadow:none; background-image:none; box-shadow:none; } html.theme-modern .btn-primary, html.theme-modern .btn-success{ background:var(--accent); color:#fff; border-color:var(--accent); } html.theme-modern .btn-primary:hover, html.theme-modern .btn-primary:focus, html.theme-modern .btn-success:hover, html.theme-modern .btn-success:focus{ background:var(--accent-hover); border-color:var(--accent-hover); color:#fff; } html.theme-modern .btn-default{ background:var(--surface); color:var(--text); border-color:var(--border); } html.theme-modern .btn-default:hover, html.theme-modern .btn-default:focus{ background:var(--surface-2); border-color:var(--surface-3); color:var(--text); } html.theme-modern .btn-danger{background:var(--danger);border-color:var(--danger);color:#fff} html.theme-modern .btn-danger:hover{filter:brightness(1.1);color:#fff} html.theme-modern .btn-secondary, html.theme-modern .browse{ background:var(--surface-2); color:var(--text); border-color:var(--border); } html.theme-modern .btn-secondary:hover, html.theme-modern .browse:hover{ background:var(--surface-3); color:var(--text); border-color:var(--surface-3); } /* Page Importer : 2 sections (Panel article + Fichier des ventes) en deux colonnes en moderne. */ html.theme-modern #page .importer-section h2{ margin-top:0; } /* Hints de label sur le bloc "Fichier des ventes" uniquement : sur une seule ligne en moderne. */ #form_import .label-hint{ display:block; font-size:.8em; font-weight:normal; } html.theme-modern #form_import .label-hint{ display:inline; color:var(--text-muted); margin-left:6px; } html.theme-modern #form_import .label-hint + .label-hint::before{ content:" · "; margin:0 2px; color:var(--text-muted); } /* Bloc Panel article : input "Parcourir" et bouton "Charger" sur la même ligne en moderne. */ html.theme-modern #form_panel_article > fieldset{ display:flex; align-items:flex-end; gap:14px; flex-wrap:wrap; } html.theme-modern #form_panel_article > fieldset > .form-group{ flex:1 1 auto; margin-bottom:0; min-width:0; } html.theme-modern #form_panel_article > fieldset > #btnPanel{ flex:0 0 auto; float:none; margin:0; white-space:nowrap; } /* Bloc Fichier des ventes : réorganisation 2 colonnes + ligne fusionnée fichier + bouton. */ html.theme-modern #form_import{ display:grid; grid-template-columns:1fr 1fr auto; grid-template-areas: "periode impact ." "coeficient nbmagasins ." "fichier fichier btn"; column-gap:14px; row-gap:0; align-items:start; } html.theme-modern #form_import > fieldset{ display:contents; } html.theme-modern #form_import .form-group:has(#periode){grid-area:periode} html.theme-modern #form_import .form-group:has(#coeficient){grid-area:coeficient} html.theme-modern #form_import .form-group:has(#impact){grid-area:impact} html.theme-modern #form_import .form-group:has(#nbmagasins){grid-area:nbmagasins} html.theme-modern #form_import .form-group:has(.inputfile){ grid-area:fichier; margin-bottom:0; } html.theme-modern #form_import #btnImport{ grid-area:btn; float:none; margin:0; align-self:end; white-space:nowrap; } @media (min-width:1200px){ html.theme-modern #importer-grid{ display:grid; grid-template-columns:1fr 1fr; column-gap:60px; row-gap:24px; align-items:start; } html.theme-modern #importer-grid > .importer-section:first-child{ position:relative; } html.theme-modern #importer-grid > .importer-section:first-child::after{ content:""; position:absolute; top:0; bottom:0; right:-30px; width:1px; background:var(--border); } html.theme-modern #importer-grid .importer-separator{ display:none; } } /* Input file (input-group "Parcourir") sur la page Importer — version moderne. Pas d'override de display : on laisse Bootstrap 3 gérer le layout en table. */ html.theme-modern .inputfile.input-group{ border:1px solid var(--border); border-radius:8px; overflow:hidden; background:var(--surface); transition:border-color .15s ease,box-shadow .15s ease; } html.theme-modern .inputfile.input-group:hover{ border-color:var(--accent); } html.theme-modern .inputfile.input-group:focus-within{ border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-soft); } html.theme-modern .inputfile.input-group > .form-control, html.theme-modern .inputfile.input-group > .form-control[disabled]{ border:0; border-radius:0; background:transparent; color:var(--text); box-shadow:none; padding:8px 12px; cursor:default; opacity:1; } html.theme-modern .inputfile.input-group .browse{ border:0; border-left:1px solid var(--border); border-radius:0; background:var(--surface-2); color:var(--text); padding:8px 16px; font-weight:500; transition:background .15s ease,color .15s ease; } html.theme-modern .inputfile.input-group .browse:hover{ background:var(--accent); color:#fff; border-left-color:var(--accent); } html.theme-modern .inputfile.input-group .browse .glyphicon{ margin-right:6px; font-size:.95em; } /* === Filtres statistiques === */ html.theme-modern .btnfiltre{ background:var(--surface); color:var(--text-muted); border:1px solid var(--border); font-weight:500; text-transform:none; padding:8px 6px; } html.theme-modern .btnfiltreActive, html.theme-modern .btnfiltre:hover{ background:var(--accent); color:#fff; border-color:var(--accent); text-decoration:none; } html.theme-modern .btndate{ background:var(--surface); color:var(--text); border:1px solid var(--border); font-weight:500; text-transform:none; } /* Cartes KPI sur la page statistiques (mode moderne) — bloc Résultats */ html.theme-modern #resultats{ display:block; background:transparent; border:0; border-radius:0; height:auto; width:100%; font-size:1em; } html.theme-modern #resultats > tbody.stat-group{ display:block; background:var(--surface-2); border:1px solid var(--border); box-shadow:var(--shadow-sm); border-radius:8px; padding:10px 14px; margin-bottom:10px; } html.theme-modern #resultats > tbody.stat-group:last-child{margin-bottom:0} html.theme-modern #resultats > tbody.stat-group::before{ content:attr(data-card-title); display:block; color:var(--text-muted); text-transform:uppercase; font-size:.7em; letter-spacing:.8px; font-weight:600; margin-bottom:4px; } html.theme-modern #resultats > tbody.stat-group > tr{ display:flex; align-items:baseline; justify-content:space-between; background:transparent; } html.theme-modern #resultats > tbody.stat-group > tr > td{ border:0; padding:1px 0; background:transparent; } html.theme-modern #resultats > tbody.stat-group > tr.stat-current > td.statstitre{display:none} html.theme-modern #resultats > tbody.stat-group > tr.stat-current > td.statsvaleur{ flex:1; text-align:right; font-size:1.5em; font-weight:600; color:var(--text); line-height:1.1; } html.theme-modern #resultats > tbody.stat-group > tr.stat-prec > td.statstitre, html.theme-modern #resultats > tbody.stat-group > tr.stat-evol > td.statstitre{ color:var(--text-muted); font-size:0; font-weight:400; text-transform:none; letter-spacing:0; } html.theme-modern #resultats > tbody.stat-group > tr > td.statstitre[data-modern-label]::before{ content:attr(data-modern-label); font-size:11px; color:var(--text-muted); } html.theme-modern #resultats > tbody.stat-group > tr.stat-prec > td.statsvaleur{ color:var(--text-muted); font-size:.85em; } html.theme-modern #resultats > tbody.stat-group > tr.stat-evol > td.statsvaleur{ font-weight:600; font-size:.8em; padding:1px 8px; border-radius:4px; } html.theme-modern #resultats > tbody.stat-group > tr.stat-evol-pos > td.statsvaleur{ color:var(--success); background:var(--success-soft); } html.theme-modern #resultats > tbody.stat-group > tr.stat-evol-neg > td.statsvaleur{ color:var(--danger); background:var(--danger-soft); } html.theme-modern #resultats > tbody.stat-group > tr.stat-evol-zero > td.statsvaleur{ color:var(--text-muted); } html.theme-modern #tableauSynthese td{ border:0; border-bottom:1px solid var(--border); } html.theme-modern .statstitre{ border:1px solid var(--border); background:var(--surface); color:var(--text); } html.theme-modern .statstitre .form-control{ color:var(--text); background:var(--surface); border:0; } html.theme-modern .statstitre .glyphicon{ background:var(--accent); color:#fff; } /* === Couleurs sémantiques === */ html.theme-modern .green{color:var(--success)} html.theme-modern .red{color:var(--danger)} /* === Charts === */ html.theme-modern #myChart{ background:var(--surface); border-radius:8px; border:1px solid var(--border); padding:14px; } html.theme-modern #graphtable{margin-top:30px} /* === DataTables === */ html.theme-modern table.dataTable{ background:var(--surface); border-radius:0; overflow:visible; border-collapse:collapse; } /* Neutralise les fonds clairs en dur posés par DataTables (odd/even + colonnes triées) */ html.theme-modern table.dataTable tbody tr.odd > td, html.theme-modern table.dataTable tbody tr.even > td, html.theme-modern table.dataTable tbody tr.odd > td.sorting_1, html.theme-modern table.dataTable tbody tr.even > td.sorting_1, html.theme-modern table.dataTable tbody tr.odd > td.sorting_2, html.theme-modern table.dataTable tbody tr.even > td.sorting_2, html.theme-modern table.dataTable tbody tr.odd > td.sorting_3, html.theme-modern table.dataTable tbody tr.even > td.sorting_3{ background-color:transparent; } html.theme-modern table.dataTable tbody tr.odd{background-color:var(--surface-2)} html.theme-modern table.dataTable tbody tr.even{background-color:var(--surface)} html.theme-modern.theme-dark table.dataTable tbody tr.odd{background-color:var(--surface-3)} html.theme-modern.theme-dark table.dataTable tbody tr.even{background-color:var(--surface-2)} /* Tableaux statiques avec classe .datatables mais sans DataTables JS (page Utilisateurs). Marqueur : .scrollStyle est sur le wrapper parent direct et non sur la table elle-même. */ html.theme-modern .scrollStyle > table.datatables tbody tr:nth-child(odd){background:var(--surface-2)} html.theme-modern .scrollStyle > table.datatables tbody tr:nth-child(even){background:var(--surface)} html.theme-modern.theme-dark .scrollStyle > table.datatables tbody tr:nth-child(odd){background:var(--surface-3)} html.theme-modern.theme-dark .scrollStyle > table.datatables tbody tr:nth-child(even){background:var(--surface-2)} html.theme-modern .scrollStyle > table.datatables thead th{ border-bottom:4px solid var(--bg); } html.theme-modern .scrollStyle > table.datatables tbody td{ padding:8px 12px; color:var(--text); border:0; border-bottom:1px solid var(--border); } html.theme-modern .scrollStyle > table.datatables tbody td.actions{ white-space:nowrap; width:1%; text-align:right; } html.theme-modern .scrollStyle > table.datatables tbody td.actions .btn-xs{ padding:4px 8px; border-radius:5px; margin-left:2px; } html.theme-modern .scrollStyle > table.datatables tbody td.actions .btn-info, html.theme-modern .scrollStyle > table.datatables tbody td.actions .btn-info:focus{ background:var(--accent-soft); color:var(--accent); border-color:transparent; } html.theme-modern .scrollStyle > table.datatables tbody td.actions .btn-info:hover{ background:var(--accent); color:#fff; border-color:var(--accent); } html.theme-modern .scrollStyle > table.datatables tbody td.actions .btn-danger, html.theme-modern .scrollStyle > table.datatables tbody td.actions .btn-danger:focus{ background:var(--danger-soft); color:var(--danger); border-color:transparent; } html.theme-modern .scrollStyle > table.datatables tbody td.actions .btn-danger:hover{ background:var(--danger); color:#fff; border-color:var(--danger); } html.theme-modern .scrollStyle > table.datatables tbody tr:hover{ background:var(--accent-soft) !important; } /* Bouton "Ajouter" sur la page utilisateurs */ html.theme-modern .bouton_add{ margin-bottom:16px; display:flex; justify-content:flex-end; } html.theme-modern .bouton_add .btn{ font-weight:500; } /* Bouton "Vider le cache" : aligné à droite en moderne uniquement */ html.theme-modern .cache-actions{ display:flex; justify-content:flex-end; } /* Image d'illustration sur la page auth/logout : masquée en moderne, formulaire centré. */ html.theme-modern #img_auth{ display:none; } html.theme-modern .form_auth{ float:none; margin-left:auto; margin-right:auto; } html.theme-modern table.dataTable tbody td{ color:var(--text); border-top:0; } html.theme-modern table.dataTable tbody tr:first-child > td{ padding-top:2px !important; border-top:0 !important; } html.theme-modern table.dataTable thead th{ border-bottom:1px solid var(--border); border-left:0; border-right:0; } html.theme-modern table.dataTable.display tbody td, html.theme-modern table.dataTable.cell-border tbody td, html.theme-modern table.dataTable.cell-border thead th, html.theme-modern table.dataTable.cell-border thead td{ border-left:0; border-right:0; } /* Neutralise complètement le thead cloné caché dans le scrollBody (mesure des colonnes en scrollX) */ html.theme-modern .dataTables_scrollBody table.dataTable thead, html.theme-modern .dataTables_scrollBody table.dataTable thead tr, html.theme-modern .dataTables_scrollBody table.dataTable thead th, html.theme-modern .dataTables_scrollBody table.dataTable thead td{ background:transparent !important; border:0 !important; color:transparent !important; } html.theme-modern table.dataTable tbody tr:hover{background:var(--accent-soft) !important} html.theme-modern .dataTables_wrapper .dataTables_filter input, html.theme-modern .dataTables_wrapper .dataTables_length select, html.theme-modern .dt_recherche{ background:var(--surface); border:1px solid var(--border); color:var(--text); border-radius:6px; } html.theme-modern .dt_recherche{ padding:4px 8px !important; line-height:1.4; } html.theme-modern .dataTables_wrapper .dataTables_info, html.theme-modern .dataTables_wrapper .dataTables_length, html.theme-modern .dataTables_wrapper .dataTables_filter{color:var(--text-muted)} html.theme-modern .dataTables_wrapper .paginate_button{ color:var(--text) !important; border-radius:6px; } html.theme-modern .dataTables_wrapper .paginate_button.current, html.theme-modern .dataTables_wrapper .paginate_button.current:hover{ background:var(--accent) !important; color:#fff !important; border-color:var(--accent) !important; } /* === Footer === */ html.theme-modern #footer{ background:var(--surface); color:var(--text-muted); border-top:1px solid var(--border); padding:14px; } /* === Overlay patienter === */ html.theme-modern #patienter{ background-color:rgba(245,247,250,.85); background-image:none; } html.theme-modern.theme-dark #patienter{ background-color:rgba(15,23,34,.85); } html.theme-modern #patienter::before{ content:""; position:fixed; top:50%; left:50%; width:54px; height:54px; margin:-27px 0 0 -27px; border:4px solid var(--surface-2); border-top-color:var(--accent); border-radius:50%; animation:kaso-spin .9s linear infinite; } @keyframes kaso-spin{ to{transform:rotate(360deg);} } /* === Modal Bootstrap 3 === */ html.theme-modern .modal-content{ background:var(--surface); border:1px solid var(--border); border-radius:10px; box-shadow:var(--shadow); } html.theme-modern .modal-header, html.theme-modern .modal-footer{border-color:var(--border)} html.theme-modern .close{color:var(--text);text-shadow:none;opacity:.6} html.theme-modern .close:hover{opacity:1;color:var(--text)} /* === Scrollbar === */ html.theme-modern.theme-dark::-webkit-scrollbar{width:12px;height:12px} html.theme-modern.theme-dark::-webkit-scrollbar-track{background:var(--bg)} html.theme-modern.theme-dark::-webkit-scrollbar-thumb{ background:var(--surface-3); border-radius:6px; border:2px solid var(--bg); } html.theme-modern.theme-dark::-webkit-scrollbar-thumb:hover{background:var(--border)} /* === Responsive === */ @media (max-width:768px){ html.theme-modern #header{padding:12px 16px} html.theme-modern #header h1{display:block;margin:8px 0 0 0;font-size:1em} html.theme-modern #environnement{position:static;display:inline-block;margin-top:4px} html.theme-modern #files{margin-top:8px} html.theme-modern #page{padding:16px} }