diff --git a/Bootstrap_new/css/style-portail.css b/Bootstrap_new/css/style-portail.css new file mode 100644 index 00000000..906c6060 --- /dev/null +++ b/Bootstrap_new/css/style-portail.css @@ -0,0 +1,253 @@ +/* ============================================================ + INTER SANTÉ — LOGIN UI v2026 + Style exclusif à la page de connexion (Gabarit Carrousel) + ============================================================ */ + +:root { + --login-primary: #0088cf; + --login-bg-light: #f3f2f1; + --login-text-dark: #323130; + --login-radius: 12px; + --login-transition: 0.4s cubic-bezier(0.4, 0, 0.2, 1); +} + +/* --- STRUCTURE PRINCIPALE (NO-SCROLL) --- */ +html, body { + height: 100%; + margin: 0; + overflow: hidden; /* Verrouille le scroll sur toute la page */ + font-family: 'DM Sans', 'Poppins', sans-serif; +} + +.login-wrapper { + display: flex; + height: 100vh; + width: 100vw; +} + +/* --- SECTION GAUCHE : CARROUSEL --- */ +.slide-container { + width: 40vw; + height: 100vh; + position: relative; + background-color: #000; +} + +.slides { + width: 100%; + height: 100%; + position: relative; + overflow: hidden; +} + +.slides img { + width: 100%; + height: 100%; + position: absolute; + object-fit: cover; + opacity: 0; + transition: opacity 1s ease-in-out; + z-index: 1; +} + +.slides img.active { + opacity: 1; + z-index: 2; +} + +/* Navigation Carrousel */ +.nav-btn { + position: absolute; + top: 50%; + transform: translateY(-50%); + padding: 15px; + color: white; + font-size: 20px; + cursor: pointer; + z-index: 10; + background: rgba(0, 136, 207, 0.2); + border-radius: 50%; + transition: var(--login-transition); + display: flex; + align-items: center; + justify-content: center; + width: 50px; + height: 50px; + border: none; +} + +.nav-btn:hover { + background: var(--login-primary); + transform: translateY(-50%) scale(1.1); +} + +.prev { left: 20px; } +.next { right: 20px; } + +/* Indicateurs (Dots) */ +.dotsContainer { + position: absolute; + bottom: 20px; + left: 50%; + transform: translateX(-50%); + z-index: 10; + display: flex; + gap: 8px; +} + +.dot { + width: 10px; + height: 10px; + border-radius: 50%; + background: rgba(255, 255, 255, 0.3); + cursor: pointer; + transition: var(--login-transition); + border: 1px solid rgba(255, 255, 255, 0.5); +} + +.dot.active { + background: var(--login-primary); + width: 25px; /* Effet pilule moderne */ + border-radius: 10px; +} + +/* --- SECTION DROITE : FORMULAIRE --- */ +.form-side { + flex: 1; + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + background: #ffffff; + padding: 2rem; + position: relative; +} + +.logo-container { + margin-bottom: 2.5rem; + text-align: center; +} + +.logo-container img { + width: 130px; + height: auto; + filter: drop-shadow(0 4px 8px rgba(0,0,0,0.1)); +} + +/* Card de connexion */ +.login-card { + width: 100%; + max-width: 380px; +} + +/* Groupes d'entrée personnalisés */ +.form-group-custom { + margin-bottom: 1.25rem; + text-align: left; +} + +.form-group-custom label { + display: block; + font-weight: 600; + font-size: 0.85rem; + color: var(--login-text-dark); + margin-bottom: 6px; + text-transform: uppercase; + letter-spacing: 0.03em; +} + +.input-wrapper { + position: relative; +} + +.input-wrapper i { + position: absolute; + left: 15px; + top: 50%; + transform: translateY(-50%); + color: #adb5bd; + font-size: 1rem; + transition: color 0.3s ease; +} + +.input-custom { + width: 100% !important; + padding: 12px 15px 12px 45px !important; + border: 2px solid #edf2f7 !important; + border-radius: var(--login-radius) !important; + font-size: 1rem !important; + color: var(--login-text-dark) !important; + background-color: #f8fafc !important; + transition: all 0.3s ease !important; +} + +.input-custom:focus { + border-color: var(--login-primary) !important; + background-color: #fff !important; + box-shadow: 0 0 0 4px rgba(0, 136, 207, 0.1) !important; + outline: none !important; +} + +.input-custom:focus + i { + color: var(--login-primary); +} + +/* Bouton Connexion */ +.login-btn-premium { + width: 100%; + padding: 14px !important; + background: var(--login-primary) !important; + color: white !important; + border: none !important; + border-radius: var(--login-radius) !important; + font-weight: 700 !important; + font-size: 1.05rem !important; + cursor: pointer !important; + transition: all 0.3s ease !important; + margin-top: 1rem; + display: flex; + align-items: center; + justify-content: center; + gap: 10px; + box-shadow: 0 4px 12px rgba(0, 136, 207, 0.2); +} + +.login-btn-premium:hover { + background: #0077b5 !important; + transform: translateY(-2px); + box-shadow: 0 6px 18px rgba(0, 136, 207, 0.3); +} + +/* Alertes de maintenance / erreur */ +.alert-login { + border-radius: var(--login-radius); + font-size: 0.85rem; + border: none; + background-color: #fff5f5; + color: #c53030; + padding: 12px; + border-left: 4px solid #c53030; + margin-bottom: 1.5rem; +} + +/* Footer de version */ +.login-footer { + position: absolute; + bottom: 25px; + font-size: 0.75rem; + color: #94a3b8; + font-weight: 500; + letter-spacing: 0.05em; +} + +/* --- RESPONSIVE --- */ +@media (max-width: 992px) { + .slide-container { display: none; } + .form-side { width: 100vw; padding: 20px; } +} + +/* --- UTILS --- */ +.sr-only { + position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; + overflow: hidden; clip: rect(0,0,0,0); border: 0; +} \ No newline at end of file diff --git a/Bootstrap_new/css/theme-modern copy.css b/Bootstrap_new/css/theme-modern copy.css deleted file mode 100644 index badd880d..00000000 --- a/Bootstrap_new/css/theme-modern copy.css +++ /dev/null @@ -1,1964 +0,0 @@ -/* ============================= - INTER SANTÉ — THEME NEUTRAL PRO - SaaS Minimal UI v2025 - Palette : Charcoal · Gris · Blanc - ============================= */ - -/* === FONTS === */ -@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'); - -/* === CSS VARIABLES === */ -:root { - /* Brand Colors — Charcoal / Gris neutre (zéro vert) */ - --color-primary: #212E53; /*#2e3440;*/ /* charcoal foncé */ - --color-primary-light: #4c566a; /* slate moyen */ - --color-primary-dark: #1a1d24; /* quasi-noir */ - --color-primary-ghost: rgba(46, 52, 64, 0.07); - - /* Accent / Status — conservés pour lisibilité fonctionnelle */ - --color-accent: #5e6e82; /* gris-bleu neutre */ - --color-urgent: #c0392b; - --color-warning: #e67e22; - --color-success: #27ae60; - --color-info: #2980b9; - --color-neutral: #7f8c8d; - - /* Backgrounds */ - --bg-base: #f2f3f5; - --bg-surface: #ffffff; - --bg-surface-2: #f8f9fa; - --bg-sidebar: #7A90A4;/*#1e2228;*/ /* charcoal très sombre */ - --bg-header: #ffffff; - - /* Text — contraste maximal */ - --text-primary: #1a1d24; - --text-secondary: #4c566a; - --text-muted: #7b8a99; - --text-inverse: #ffffff; - - /* Borders */ - --border-light: #e3e6ea; - --border-medium: #c8cdd4; - - /* Spacing & Radius */ - --radius-sm: 6px; - --radius-md: 12px; - --radius-lg: 16px; - --radius-xl: 24px; - --radius-full: 9999px; - - /* Shadows — neutres, sans teinte colorée */ - --shadow-xs: 0 1px 3px rgba(0,0,0,.06), 0 1px 2px rgba(0,0,0,.04); - --shadow-sm: 0 2px 8px rgba(0,0,0,.08), 0 1px 3px rgba(0,0,0,.05); - --shadow-md: 0 4px 16px rgba(0,0,0,.10), 0 2px 6px rgba(0,0,0,.06); - --shadow-lg: 0 8px 32px rgba(0,0,0,.12), 0 4px 12px rgba(0,0,0,.07); - --shadow-xl: 0 16px 48px rgba(0,0,0,.14), 0 8px 24px rgba(0,0,0,.08); - --shadow-primary: 0 4px 20px rgba(30,34,40,.20); - - /* Transitions */ - --transition-fast: 0.15s ease; - --transition-base: 0.25s ease; - --transition-slow: 0.4s cubic-bezier(.4,0,.2,1); - - /* Layout */ - --sidebar-width: 200px; - --sidebar-collapsed: 68px; - --header-height: 64px; - --context-width: 320px; -} - -/* === BASE RESET & GLOBALS === */ -*, *::before, *::after { box-sizing: border-box; } - -html { font-size: 14px; scroll-behavior: smooth; } - -body { - font-family: 'DM Sans', system-ui, sans-serif; - background: var(--bg-base); - color: var(--text-primary); - line-height: 1.6; - -webkit-font-smoothing: antialiased; -} - -h1, h2, h3, h4, h5, h6, -.fw-bold, .fw-semibold, .nav-link span { - font-family: 'Syne', sans-serif; -} - -/* === SCROLLBAR === */ -::-webkit-scrollbar { width: 5px; height: 5px; } -::-webkit-scrollbar-track { background: transparent; } -::-webkit-scrollbar-thumb { background: var(--border-medium); border-radius: var(--radius-full); } -::-webkit-scrollbar-thumb:hover { background: var(--color-primary-light); } - -/* ============================== - HEADER - ============================== */ -#header { - height: var(--header-height); - background: var(--bg-header); - border-bottom: 1px solid var(--border-light); - box-shadow: var(--shadow-xs); - padding: 0 1.25rem; - z-index: 2000; - transition: background var(--transition-base); -} - -#header.mode-test { - background: linear-gradient(90deg, #5d0000, #c0392b); -} - -#header .logo { - gap: 10px; - text-decoration: none; -} - -#header .logo img { - width: 34px; - height: 34px; - border-radius: var(--radius-sm); - object-fit: contain; -} - -#header .logo span { - font-family: 'Syne', sans-serif; - font-weight: 800; - font-size: 1.05rem; - color: var(--color-primary); - letter-spacing: -0.02em; -} - -/* Toggle sidebar button */ -.toggle-sidebar-btn { - font-size: 1.4rem; - color: var(--text-secondary); - cursor: pointer; - padding: 4px 8px; - border-radius: var(--radius-sm); - transition: all var(--transition-fast); - margin-left: 12px; -} -.toggle-sidebar-btn:hover { - color: var(--color-primary); - background: var(--color-primary-ghost); -} - -/* Breadcrumb */ -.breadcrumb { - background: transparent !important; - padding: 0 !important; - margin: 0; - font-size: 0.8rem; -} -.breadcrumb-item a { - color: var(--text-muted); - text-decoration: none; - transition: color var(--transition-fast); -} -.breadcrumb-item a:hover { color: var(--color-primary); } -.breadcrumb-item.active { color: var(--color-primary); } -.breadcrumb-item + .breadcrumb-item::before { color: var(--border-medium); } -#descriptionVue{color:#212E53 !important; font-weight: bold;} - -/* Header Nav Icons */ -#header .header-nav .nav-link { - color: var(--text-secondary); - padding: 6px 10px; - border-radius: var(--radius-sm); - transition: all var(--transition-fast); - position: relative; -} -#header .header-nav .nav-link:hover { - color: var(--color-primary); - background: var(--color-primary-ghost); -} - -.badge-number { - position: absolute; - top: 2px; right: 4px; - background: var(--color-urgent) !important; - font-size: 0.6rem; - min-width: 16px; - height: 16px; - border-radius: var(--radius-full); - display: flex; - align-items: center; - justify-content: center; - cursor: pointer; - border: 2px solid white; - transition: transform var(--transition-fast); -} -.badge-number:hover { transform: scale(1.2); } - -/* Company logo area */ -.company-logo-area { - display: flex; - align-items: center; - gap: 8px; - padding: 4px 10px; - border-radius: var(--radius-md); - border: 1px solid var(--border-light); - background: var(--bg-surface-2); - transition: all var(--transition-fast); - max-width: 180px; -} -.company-logo-area:hover { - border-color: var(--color-primary-light); - box-shadow: var(--shadow-sm); -} -.company-logo-area img { height: 32px; width: auto; object-fit: contain; } -.company-logo-area .company-name { - font-size: 0.75rem; - font-weight: 600; - color: var(--text-primary); - white-space: nowrap; - overflow: hidden; - text-overflow: ellipsis; -} - -/* User Initials Badge */ -.initials { - width: 32px; - height: 32px; - border-radius: var(--radius-sm); - background: linear-gradient(135deg, var(--color-primary), var(--color-primary-light)); - color: white; - font-family: 'Syne', sans-serif; - font-weight: 700; - font-size: 0.75rem; - display: inline-flex; - align-items: center; - justify-content: center; - box-shadow: var(--shadow-primary); - transition: transform var(--transition-fast); -} -.nav-link:hover .initials { transform: scale(1.08); } - -/* Dropdown */ -.dropdown-menu { - border: 1px solid var(--border-light); - border-radius: var(--radius-md); - box-shadow: var(--shadow-lg); - padding: 6px; - font-size: 0.85rem; - margin-top: 8px !important; - z-index: 9999 !important; -} -.dropdown-item { - border-radius: var(--radius-sm); - padding: 8px 12px; - gap: 10px; - display: flex; - align-items: center; - color: var(--text-primary); - transition: all var(--transition-fast); -} -.dropdown-item:hover { - background: var(--color-primary-ghost); - color: var(--color-primary); -} -.dropdown-item i { width: 16px; color: var(--text-muted); } - -/* Language flag */ -.lang-selector img { border-radius: 3px; } - -/* ============================== - SIDEBAR - ============================== */ -#sidebar { - width: var(--sidebar-width); - background: var(--bg-sidebar); - position: fixed; - top: var(--header-height); - left: 0; - height: calc(100vh - var(--header-height)); - overflow-y: auto; - overflow-x: hidden; - transition: width var(--transition-slow); - z-index: 900; - padding: 8px 4px; -} - -/* Liseré supérieur discret — gris clair */ -#sidebar::before { - content: ''; - position: absolute; - top: 0; left: 0; right: 0; - height: 2px; - background: linear-gradient(90deg, #4c566a, #7b8a99); -} - -/* Sidebar Nav */ -.sidebar-nav { - list-style: none; - padding: 0; - margin: 0; -} - -.sidebar-nav .nav-item { margin-bottom: 2px; } - -/* Parent links */ -.sidebar-nav > .nav-item > .nav-link { - display: flex; - align-items: center; - gap: 2px; - padding: 9px 10px; - border-radius: var(--radius-md); - color: rgba(255,255,255,0.72); - font-size: 0.82rem; - font-weight: 500; - text-decoration: none; - transition: all var(--transition-base); - position: relative; -} - -.sidebar-nav > .nav-item > .nav-link:hover, -.sidebar-nav > .nav-item > .nav-link.active { - background: rgba(255,255,255,0.10); - color: white; -} - -.sidebar-nav > .nav-item > .nav-link i:first-child { - font-size: 1.1rem; - width: 22px; - text-align: center; - flex-shrink: 0; - opacity: 0.85; -} - -.sidebar-nav > .nav-item > .nav-link span { - font-family: 'Syne', sans-serif; - font-size: 0.8rem; - letter-spacing: 0.01em; - flex: 1; - min-width: 0; - overflow: hidden; - text-overflow: ellipsis; - white-space: nowrap; -} - -/* Active item : blanc brillant */ -.sidebar-nav > .nav-item > .nav-link span.active-main { - color: var(--text-primary); - font-weight: 700; -} - -.sidebar-nav > .nav-item > .nav-link .bi-chevron-down { - font-size: 0.65rem; - opacity: 0.6; - transition: transform var(--transition-base); - flex-shrink: 0; -} - -.sidebar-nav > .nav-item > .nav-link[aria-expanded="true"] .bi-chevron-down { - transform: rotate(180deg); - opacity: 1; -} - -/* Sub-menu (Level 1) */ -.sidebar-nav .nav-content { - list-style: none; - padding: 4px 0 4px 32px; - margin: 0; - background: rgba(0,0,0,0.18); - border-radius: var(--radius-sm); - margin-bottom: 2px; -} - -.sidebar-nav .nav-content li { margin-bottom: 1px; } - -.sidebar-nav .nav-content li a { - display: block; - padding: 7px 10px; - border-radius: var(--radius-sm); - color: rgba(255,255,255,0.55); - font-size: 0.78rem; - text-decoration: none; - transition: all var(--transition-fast); - border-left: 2px solid transparent; - position: relative; -} - -.sidebar-nav .nav-content li a:hover { - color: white; - background: rgba(255,255,255,0.07); - border-left-color: rgba(255,255,255,0.5); - padding-left: 14px; -} - -/* Sous-menu actif : fond blanc translucide + bordure blanche */ -.sidebar-nav .nav-content li a.active-submenu { - color: #ffffff; - background: rgba(255,255,255,0.12); - border-left-color: #ffffff; - font-weight: 600; - padding-left: 10px; - width: 100% !important; -} - -.sidebar-nav .nav-content li a.active-submenu::after { - content: ''; - position: absolute; - right: 10px; - top: 50%; - transform: translateY(-50%); - width: 5px; - height: 5px; - border-radius: 50%; - background: rgba(255,255,255,0.8); -} - -/* Separator label */ -.sidebar-section-label { - font-family: 'Syne', sans-serif; - font-size: 0.6rem; - font-weight: 700; - letter-spacing: 0.1em; - text-transform: uppercase; - color: rgba(255,255,255,0.28); - padding: 12px 10px 4px; - margin-top: 4px; -} - -.sidebar-footer { - position: absolute; - bottom: 0; - left: 0; - width: 100%; - padding: 15px; - border-top: 1px solid var(--border-light); - background: var(--bg-sidebar); /* Garde la couleur de ta sidebar */ -} - -.version-info { - display: flex; - justify-content: space-between; - align-items: center; - font-size: 0.7rem; - color: rgba(255, 255, 255, 0.4); /* Très discret sur fond sombre */ - font-family: 'DM Sans', sans-serif; - letter-spacing: 0.05em; - text-transform: uppercase; -} - -.version-tag { - background: rgba(255, 255, 255, 0.1); - padding: 2px 6px; - border-radius: 4px; - font-weight: 700; -} - -/* ============================== - MAIN CONTENT - ============================== */ -#main { - margin-left: var(--sidebar-width); - padding-top: calc(var(--header-height) + 16px); - min-height: 100vh; - transition: margin-left var(--transition-slow); - padding-bottom: 32px; -} - -@media (max-width: 1199px) { - #main { margin-left: 0 !important; } - #sidebar { transform: translateX(-100%); } - #sidebar.sidebar-open { transform: translateX(0); } -} - -/* Scroll Menu */ -.scrollmenu { - display: flex; - gap: 4px; - overflow-x: auto; - padding: 8px 16px; - background: var(--bg-surface); - border-radius: var(--radius-md); - box-shadow: var(--shadow-xs); - margin: 0 1px 16px; - scrollbar-width: none; -} -.scrollmenu::-webkit-scrollbar { display: none; } - -.scrollmenu a { - white-space: nowrap; - padding: 6px 14px; - border-radius: var(--radius-full); - font-size: 0.78rem; - font-weight: 500; - color: var(--text-secondary); - text-decoration: none; - transition: all var(--transition-fast); - border: 1px solid transparent; - flex-shrink: 0; -} - -.scrollmenu a:hover { - background: var(--color-primary-ghost); - color: var(--color-primary); - border-color: rgba(46,52,64,0.15); -} - -.scrollmenu a.active { - background: var(--color-primary); - color: white; - box-shadow: var(--shadow-primary); -} - -/* Page content wrapper */ -.page-content { - padding: 26px 0px; -} - -/* Fixed header within main */ -.fixed-div { - position: sticky; - top: var(--header-height); - z-index: 1060; - background: var(--bg-base); -} - -.section { padding: 0; } - -/* ============================== - CONTEXT DRAWER (Barre Latérale D) - ============================== */ - -/* Trigger button — gris charcoal */ -.btn-info-context { - position: fixed; - right: 0; - top: 50%; - transform: translateY(-50%); - z-index: 1100; - background: var(--color-primary); - color: white; - border: none; - border-radius: var(--radius-lg) 0 0 var(--radius-lg); - padding: 12px 10px; - cursor: pointer; - box-shadow: var(--shadow-md); - display: flex; - flex-direction: column; - align-items: center; - gap: 6px; - transition: all var(--transition-base); -} -.btn-info-context:hover { - background: var(--color-primary-light); - padding-left: 14px; -} -.btn-info-context i { font-size: 16px; } - -/* Context Drawer Panel */ -#barre_laterale_d { - position: fixed; - right: 0; - top: var(--header-height); - width: var(--context-width) !important; - height: calc(100vh - var(--header-height)); - background: var(--bg-surface); - border-left: 1px solid var(--border-light); - box-shadow: var(--shadow-xl); - z-index: 9999 !important; - overflow-y: auto; - overflow-x: hidden; - padding: 0 !important; - display: none; - transition: transform var(--transition-slow); - border-radius: 5px; -} - -#barre_laterale_d .drawer-inner { - padding: 16px; -} - -/* Drawer Close Button */ -.btn-cacher-contexte { - display: flex; - align-items: center; - justify-content: center; - gap: 8px; - width: 100%; - padding: 12px; - background: var(--bg-sidebar); - color: white; - border: none; - cursor: pointer; - font-size: 0.8rem; - font-family: 'Syne', sans-serif; - font-weight: 600; - letter-spacing: 0.04em; - transition: background var(--transition-fast); - margin-bottom: 16px; - border-radius: 0; -} -.btn-cacher-contexte:hover { background: var(--color-primary-light); } - -/* Context Cards */ -.context-card { - background: var(--bg-surface-2); - border: 1px solid var(--border-light); - border-radius: var(--radius-md); - padding: 12px; - margin-bottom: 10px; - transition: box-shadow var(--transition-fast); -} -.context-card:hover { box-shadow: var(--shadow-sm); } - -.context-card-label { - font-size: 0.65rem; - font-weight: 700; - text-transform: uppercase; - letter-spacing: 0.08em; - color: var(--text-muted); - margin-bottom: 6px; - display: flex; - align-items: center; - gap: 6px; -} -/* Icône label — gris moyen */ -.context-card-label i { color: var(--color-primary-light); } - -.context-card-label a { - color: var(--color-primary); - text-decoration: none; - font-weight: 700; - margin-left: auto; - font-size: 0.7rem; -} -.context-card-label a:hover { text-decoration: underline; } - -.context-btn { - width: 100%; - background: white; - border: 1px solid var(--border-medium); - border-radius: var(--radius-sm); - padding: 7px 10px; - text-align: left; - font-size: 0.78rem; - font-weight: 600; - color: var(--text-primary); - cursor: pointer; - transition: all var(--transition-fast); - display: flex; - align-items: center; - gap: 8px; - text-overflow: ellipsis; - overflow: hidden; - white-space: nowrap; -} -.context-btn:hover { - background: var(--color-primary-ghost); - border-color: var(--color-primary-light); - color: var(--color-primary); -} -.context-btn i { color: var(--color-primary-light); flex-shrink: 0; } - -.context-btn.btn-primary-context { - background: var(--color-primary); - border-color: var(--color-primary); - color: white; -} -.context-btn.btn-primary-context:hover { - background: var(--color-primary-light); - border-color: var(--color-primary-light); - color: white; -} -.context-btn.btn-primary-context i { color: rgba(255,255,255,0.8); } - -/* Stats row in context */ -.context-stats { - display: flex; - gap: 4px; - margin-bottom: 10px; -} -.context-stat { - flex: 1; - background: var(--bg-surface-2); - border: 1px solid var(--border-light); - border-radius: var(--radius-sm); - padding: 8px 4px; - text-align: center; -} -.context-stat-value { - font-family: 'Syne', sans-serif; - font-size: 0.95rem; - font-weight: 800; - color: var(--color-primary); -} -.context-stat-label { - font-size: 0.58rem; - color: var(--text-muted); - text-transform: uppercase; - letter-spacing: 0.05em; -} - -/* Recent Policies List */ -.recent-policies-title { - font-size: 0.65rem; - font-weight: 700; - text-transform: uppercase; - letter-spacing: 0.08em; - color: var(--text-muted); - display: flex; - align-items: center; - gap: 6px; - margin-bottom: 8px; -} -.recent-policies-title i { color: var(--color-primary-light); } - -.policy-item { - padding: 7px 10px; - border-radius: var(--radius-sm); - border: 1px solid var(--border-light); - margin-bottom: 4px; - background: white; - transition: all var(--transition-fast); - font-size: 0.75rem; - color: var(--text-secondary); - text-decoration: none; - display: block; - white-space: nowrap; - overflow: hidden; - text-overflow: ellipsis; -} -.policy-item:hover { - background: var(--color-primary-ghost); - color: var(--color-primary); - border-color: rgba(46,52,64,0.18); - padding-left: 14px; -} - -/* Photo container */ -.photo-container { - text-align: center; - margin-bottom: 10px; -} -.photo-container img { - width: 80px; - height: 80px; - object-fit: cover; - border-radius: var(--radius-md); - box-shadow: var(--shadow-md); - border: 3px solid white; - transition: transform var(--transition-base); - cursor: pointer; -} -.photo-container img:hover { transform: scale(1.05); } - -/* Password change link */ -.change-pwd-link { - display: flex; - align-items: center; - gap: 10px; - padding: 10px 12px; - border-radius: var(--radius-md); - background: var(--bg-surface-2); - border: 1px dashed var(--border-medium); - text-decoration: none; - color: var(--text-secondary); - font-size: 0.78rem; - transition: all var(--transition-fast); - margin-bottom: 10px; -} -.change-pwd-link:hover { - background: var(--color-primary-ghost); - border-color: var(--color-primary-light); - color: var(--color-primary); -} -.change-pwd-link img { width: 22px; } - -/* Devis mode banner */ -.mode-devis-banner { - background: linear-gradient(135deg, #3a3a4a, #55556a); - color: white; - text-align: center; - font-family: 'Syne', sans-serif; - font-size: 0.7rem; - font-weight: 700; - letter-spacing: 0.08em; - padding: 8px; - border-radius: var(--radius-sm); - margin-bottom: 10px; - text-transform: uppercase; -} - -/* ============================== - TABLES (DataTables) - ============================== */ -.table-container { - background: white; - border-radius: var(--radius-lg); - box-shadow: var(--shadow-sm); - overflow: hidden; - border: 1px solid var(--border-light); -} - -.table { - background: white !important; - border-collapse: separate; - border-spacing: 0; - width: 100%; - font-size: 0.82rem; - --bs-table-bg: transparent !important; - --bs-table-color: var(--text-primary) !important; - --bs-table-striped-color: var(--text-primary) !important; -} - -/* En-tête : charcoal sombre */ -.table thead tr { - background: var(--color-primary) !important; - color: white !important; -} - -.table > thead { - background-color: var(--color-primary) !important; -} - -.table th { - background: var(--color-primary) !important; - color: white !important; - font-family: 'Syne', sans-serif; - font-size: 0.72rem; - font-weight: 700; - letter-spacing: 0.05em; - text-transform: uppercase; - padding: 12px 14px !important; - border: none !important; - white-space: nowrap; -} -.table th:hover { background: var(--color-primary-dark) !important; } - -.table td { - padding: 10px 14px !important; - border-bottom: 1px solid var(--border-light) !important; - border-top: none !important; - vertical-align: middle; - color: var(--text-primary); -} -.table td:hover { font-style: normal !important; } - -.table tr:last-child td { border-bottom: none !important; } - -.table tbody tr { - transition: all var(--transition-fast); -} -.table tbody tr:hover { - background: var(--color-primary-ghost) !important; - font-style: normal !important; -} -/* Bordure gauche gris moyen au survol */ -.table tbody tr:hover td:first-child { - border-left: 3px solid var(--color-primary-light); -} - -/* Status Badges */ -.badge-status { - display: inline-flex; - align-items: center; - gap: 4px; - padding: 3px 10px; - border-radius: var(--radius-full); - font-size: 0.68rem; - font-weight: 700; - letter-spacing: 0.04em; - text-transform: uppercase; -} -.badge-status::before { - content: ''; - width: 5px; - height: 5px; - border-radius: 50%; - background: currentColor; -} -.badge-valide { background: rgba(39,174,96,0.10); color: #1e8449; } -.badge-urgent { background: rgba(192,57,43,0.10); color: var(--color-urgent); } -.badge-attente { background: rgba(230,126,34,0.10); color: #b9720a; } -.badge-info { background: rgba(41,128,185,0.10); color: #1a6898; } -.badge-inactive { background: rgba(127,140,141,0.10); color: var(--color-neutral); } - -/* ============================== - CARDS - ============================== */ -.card { - background: var(--bg-surface); - border: 1px solid var(--border-light); - border-radius: var(--radius-lg); - box-shadow: var(--shadow-xs); - transition: box-shadow var(--transition-base); -} -.card:hover { box-shadow: var(--shadow-md); } - -.card-header { - background: transparent; - border-bottom: 1px solid var(--border-light); - padding: 14px 18px; - font-family: 'Syne', sans-serif; - font-weight: 700; - font-size: 0.88rem; -} - -/* ============================== - BUTTONS - ============================== */ -.btn { - border-radius: var(--radius-sm) !important; - font-size: 0.8rem; - font-weight: 600; - font-family: 'DM Sans', sans-serif; - padding: 7px 16px; - transition: all var(--transition-fast); - border: none; - display: inline-flex; - align-items: center; - gap: 6px; -} - -/* Bouton primaire : charcoal */ -.btn-primary { - background: var(--color-primary) !important; - color: white !important; - box-shadow: 0 2px 8px rgba(30,34,40,.22); -} -.btn-primary:hover { - background: var(--color-primary-light) !important; - box-shadow: 0 4px 16px rgba(30,34,40,.30); - transform: translateY(-1px); -} - -.btn-info { - background: var(--color-info) !important; - color: white !important; -} -.btn-info:hover { - background: #1f6fa0 !important; - transform: translateY(-1px); -} - -.btn-warning { - background: var(--color-urgent) !important; - color: white !important; -} - -.btn-default, .btn-outline-secondary { - background: white; - border: 1px solid var(--border-medium) !important; - color: var(--text-secondary) !important; -} -.btn-default:hover, .btn-outline-secondary:hover { - border-color: var(--color-primary-light) !important; - color: var(--color-primary) !important; - background: var(--color-primary-ghost); -} - -.btn-sm { padding: 5px 12px; font-size: 0.75rem; } - -/* ============================== - FORM ELEMENTS - ============================== */ -.form-control, .form-select { - border: 1px solid var(--border-medium); - border-radius: var(--radius-sm); - font-size: 0.82rem; - color: var(--text-primary); - height: auto !important; - transition: border-color var(--transition-fast), box-shadow var(--transition-fast); -} -.form-control:focus, .form-select:focus { - border-color: var(--color-primary-light); - box-shadow: 0 0 0 3px rgba(46,52,64,0.10); - outline: none; -} - -td input[readonly], td select[readonly], -td input[disabled], td select[disabled] { - background: #f1f4f6 !important; - font-weight: 600; - color: var(--text-secondary); -} - -/* ============================== - LEGENDS & FIELDSETS - ============================== */ -legend, #chemin, -fieldset legend, form legend { - background: linear-gradient(135deg, var(--color-primary), var(--color-primary-light)) !important; - color: white; - font-family: 'Syne', sans-serif; - font-size: 0.78rem; - font-weight: 700; - letter-spacing: 0.04em; - padding: 6px 14px; - border-radius: var(--radius-sm); - display: block; -} - -/* ============================== - MODALS - ============================== */ -.modal-content { - border: none; - border-radius: var(--radius-lg); - box-shadow: var(--shadow-xl); - overflow: hidden; -} - -/* Header modal : charcoal */ -.modal-header { - background: var(--color-primary) !important; - color: white !important; - padding: 16px 20px; - border-bottom: none; -} - -.modal-title { - font-family: 'Syne', sans-serif; - font-size: 0.92rem !important; - font-weight: 700; -} - -.modal-header .close, .modal-header .btn-close { - background: rgba(255,255,255,0.18) !important; - color: white !important; - border: 1px solid rgba(255,255,255,0.28) !important; - border-radius: var(--radius-sm); - opacity: 1; - transition: background var(--transition-fast); - font-size: 0.75rem; - padding: 4px 10px; -} -.modal-header .close:hover { background: rgba(255,255,255,0.32) !important; } - -.modal-body { padding: 20px; } - -.modal-footer { - border-top: 1px solid var(--border-light); - padding: 12px 20px; - gap: 8px; -} - -/* Side Panel Modal */ -.modal.side-panel .modal-dialog { - position: fixed; - top: 0; right: 0; - margin: 0; - max-width: 480px; - width: 100%; - height: 100%; -} -.modal.side-panel .modal-content { - height: 100%; - border-radius: 0; -} - -/* Modales au-dessus de la barre de contexte (2000) et du header */ -.modal { - z-index: 3000 !important; -} - -/* Le fond noir (backdrop) doit aussi suivre */ -.modal-backdrop { - z-index: 2999 !important; -} - -/* ============================== - NAV TABS - ============================== */ -.nav-tabs { - border-bottom: 2px solid var(--border-light); - gap: 4px; -} -.nav-tabs .nav-link { - color: var(--text-secondary); - border: none; - border-radius: var(--radius-sm) var(--radius-sm) 0 0; - padding: 8px 16px; - font-size: 0.8rem; - font-weight: 500; - transition: all var(--transition-fast); -} -.nav-tabs .nav-link:hover { - color: var(--color-primary); - background: var(--color-primary-ghost); -} -/* Onglet actif : charcoal */ -.nav-tabs .nav-item.show .nav-link, -.nav-tabs .nav-link.active { - background: var(--color-primary) !important; - color: white !important; - font-family: 'Syne', sans-serif; - font-weight: 700; - border: none; -} - -/* ============================== - ALERTS & TOASTS - ============================== */ -.alert { - border: none; - border-radius: var(--radius-md); - font-size: 0.82rem; - border-left: 4px solid; -} -.alert-success { border-color: var(--color-success); background: rgba(39,174,96,0.08); } -.alert-danger { border-color: var(--color-urgent); background: rgba(192,57,43,0.08); } -.alert-warning { border-color: var(--color-warning); background: rgba(230,126,34,0.08); } -.alert-info { border-color: var(--color-info); background: rgba(41,128,185,0.08); } - -/* ============================== - FOOTER - ============================== */ -footer { background: transparent !important; color: var(--text-muted) !important; font-size: 0.7rem; } - -/* ============================== - MICRO-INTERACTIONS & UTILS - ============================== */ -.hover-shadow-sm:hover { - box-shadow: var(--shadow-md) !important; - transform: translateY(-2px); - transition: all var(--transition-base); -} - -.hover-scale:hover { - transform: scale(1.04); - box-shadow: var(--shadow-md); - transition: all var(--transition-base); -} - -.transition { transition: all var(--transition-base); } - -/* Skeleton Loader */ -.skeleton { - background: linear-gradient(90deg, #ebebeb 25%, #dcdcdc 50%, #ebebeb 75%); - background-size: 200% 100%; - animation: skeleton-loading 1.5s infinite; - border-radius: var(--radius-sm); -} -@keyframes skeleton-loading { - 0% { background-position: 200% 0; } - 100% { background-position: -200% 0; } -} - -/* AJAX Loading overlay */ -.ajax-loading { - position: relative; - pointer-events: none; - opacity: 0.6; -} -.ajax-loading::after { - content: ''; - position: absolute; - inset: 0; - background: rgba(255,255,255,0.6); - border-radius: inherit; - display: flex; - align-items: center; - justify-content: center; - z-index: 10; -} - -/* Pulse animation for notifications */ -@keyframes pulse-badge { - 0%, 100% { box-shadow: 0 0 0 0 rgba(192,57,43,0.4); } - 50% { box-shadow: 0 0 0 5px rgba(192,57,43,0); } -} -.badge-number { animation: pulse-badge 2s infinite; color:#fff;} - -/* Mode Test Banner */ -.mode-test-active #header { - background: linear-gradient(90deg, #5d0000, #c0392b) !important; -} -.mode-test-banner { - background: repeating-linear-gradient( - 45deg, #cccccc, #cccccc 10px, #333333 10px, #333333 20px - ); - color: white; - text-align: center; - font-weight: 800; - font-size: 0.7rem; - padding: 3px; - letter-spacing: 0.15em; -} - -/* Filter option */ -.filter-option-inner-inner { - background-color: #f1f4f6 !important; -} - -/* h6 links in context */ -h6 a { - text-decoration: none; - color: var(--color-primary); - font-weight: 600; - border-bottom: 1px dashed var(--color-primary-light); - transition: all var(--transition-fast); -} -h6 a:hover { - background: var(--color-primary); - color: white; - border-bottom-color: transparent; - padding: 1px 4px; - border-radius: 3px; -} - -/* Textarea in context */ -.mb-2 textarea { - font-size: 0.78rem; - width: 100%; - border: 1px solid var(--border-medium); - border-radius: var(--radius-sm); - padding: 8px; -} - -/* .sr-only */ -.sr-only { - position: absolute; - width: 1px; height: 1px; - padding: 0; margin: -1px; - overflow: hidden; - clip: rect(0,0,0,0); - white-space: nowrap; - border-width: 0; -} - -/* ============================== - SCROLLBAR hover — gris neutre */ -::-webkit-scrollbar-thumb:hover { background: var(--color-primary-light); } - -/* ============================== - RESPONSIVE - ============================== */ -@media (max-width: 768px) { - #sidebar { width: var(--sidebar-width); } - #barre_laterale_d { width: 100% !important; } - .scrollmenu { margin: 0 8px 8px; } - .page-content { padding: 18px 0px; } -} - -/* --- COMPOSANTS GLOBAUX --- */ -.required::after { content: " *"; color: var(--color-urgent); font-weight: bold; } - -/* ============================================================ - BOOTSTRAP-SELECT : CORRECTIF FINAL SANS LARGEUR FORCÉE - ============================================================ */ - -/* 1. DISPARITION TOTALE DU SELECT NATIF - On utilise opacity et position pour le rendre invisible sans casser - le fonctionnement du plugin, tout en évitant le doublon visuel. */ -select.selectpicker, -select[class*="selectpicker"], -.bootstrap-select > select.bs-select-hidden { - display: none !important; - visibility: hidden !important; - opacity: 0 !important; - position: absolute !important; - z-index: -1 !important; -} - -/* 2. STYLE DU BOUTON (L'interface visible) - On retire le "width: 100%" pour laisser le bouton s'adapter à son contenu - ou à sa colonne parente naturelle. */ -.btn-form-select { - background-color: #ffffff !important; - border: 1px solid #e2e8f0 !important; - color: var(--color-primary) !important; - font-size: 0.82rem !important; - padding: 0.5rem 0.75rem !important; - border-radius: var(--radius-sm) !important; - display: inline-flex !important; /* Permet au bouton de ne pas prendre toute la largeur */ - align-items: center; - justify-content: space-between; - min-width: 200px; /* Optionnel : définit une largeur minimale raisonnable */ -} - -/* 3. NETTOYAGE DE L'ÉLÉMENT INTERNE (Ce que vous avez vu à l'image) - On s'assure qu'il n'y a pas de background ou de bordure parasite */ -.bootstrap-select .filter-option { - display: flex; - align-items: center; -} - -.filter-option-inner-inner { - background-color: transparent !important; - padding: 0 !important; - color: inherit !important; -} - -/* 4. LE MENU DÉROULANT - On le laisse s'adapter à la largeur du bouton parent */ -.bootstrap-select .dropdown-menu { - border: 1px solid #e2e8f0; - box-shadow: var(--shadow-lg); - border-radius: var(--radius-md); - font-size: 0.82rem; - z-index: 9999 !important; -} - -/* 5. ZONE DE RECHERCHE */ -.bootstrap-select .bs-searchbox .form-control { - border: 1px solid #ced4da !important; - font-size: 0.8rem !important; - background-color: #fff !important; -} - -/* --- Style spécifique aux onglets de paramètres --- */ - -/* On cible les ID des conteneurs pour isoler le style */ -#Generaux, #Production, #Medical, #Prestation { - animation: fadeIn 0.4s ease-in-out; -} - -/* On cible les lignes de paramètres spécifiquement dans ces ID */ -#Generaux .table td, -#Production .table td, -#Medical .table td, -#Prestation .table td { - padding: 1.1rem 1rem; - border-top: 1px solid #f1f4f6; - vertical-align: middle; -} - -/* --- THÈME NEUTRAL PRO : HAUT CONTRASTE --- */ -.text-dark { color: #1a1d24 !important; } -.bg-success-ghost { background-color: rgba(39, 174, 96, 0.12); color: #27ae60; } -.bg-danger-ghost { background-color: rgba(192, 57, 43, 0.12); color: #c0392b; } -.bg-primary-ghost { background-color: rgba(33, 46, 83, 0.08); color: #212e53; } -.bg-info-ghost { background-color: rgba(52, 152, 219, 0.12); color: #3498db; } -.bg-warning-ghost { background-color: rgba(243, 156, 18, 0.12); color: #f39c12; } - - -/* Navigation Pills Modernes */ -.nav-pills .nav-link { color: #64748b; padding: 10px 20px; transition: 0.3s; border: none; background: none; } -.nav-pills .nav-link.active { background-color: #212e53 !important; color: white !important; box-shadow: var(--shadow-md); } - -/* Tableaux et Cards */ -.table td { padding: 1.2rem 1rem !important; border-top: 1px solid #f1f4f6 !important; font-size:0.95rem !important;} -.table-hover tbody tr:hover { background-color: #f8fafc; cursor: pointer; } - -.bg-light-info { background-color: rgba(33, 46, 83, 0.02); } -.bg-light-success { background-color: rgba(39, 174, 96, 0.02); } - -.fs-5 { font-size: 1.15rem !important; } - -.searchable-row:hover { background-color: #f8fafc !important; } - - -/* ============================================================ - DESIGN SYSTEM - PAGE PARAMÈTRES (NEUTRAL PRO) - ============================================================ */ - -/* Conteneurs de sections (Onglets) */ -.tab-custom-content { - animation: fadeIn 0.4s ease-in-out; -} - -/* Style des Cartes (Sections) */ -.tab-custom-content .card { - border-radius: var(--radius-md); - overflow: hidden; - margin-bottom: 1.5rem; -} - -/* En-têtes de tableaux/sections */ -.tab-custom-content .card-header { - padding: 0.75rem 1.25rem; -} - -.tab-custom-content .card-header h6 { - margin-bottom: 0; - font-size: 0.85rem; - letter-spacing: 0.05em; -} - -/* Tableaux de paramètres */ -.tab-custom-content .table td { - padding: 1.1rem 1rem; - border-top: 1px solid #f1f4f6; - vertical-align: middle; -} - -/* Libellés de paramètres (Haut Contraste) */ -.tab-custom-content .text-dark { - color: #1a1d24 !important; /* Noir profond */ - font-weight: 700 !important; /* Gras pour la lisibilité */ - font-size: 0.95rem; -} - -/* Valeurs (Colonne de droite) */ -.tab-custom-content .valeur-display { - text-align: center; - border-left: 1px solid #f1f4f6; - background-color: rgba(248, 250, 252, 0.5); - font-weight: 700; -} - -/* BADGES "GHOST" (Sémantique des couleurs) */ -.badge-ghost { - padding: 0.5rem 0.8rem; - border-radius: 50px; - font-weight: 700; - font-size: 0.75rem; -} - -/* Animation */ -@keyframes fadeIn { - from { opacity: 0; transform: translateY(5px); } - to { opacity: 1; transform: translateY(0); } -} - -/* Optionnel : Réduire légèrement l'entête lors du scroll (via JS si besoin) */ -#titre-page { - color: var(--color-primary); - letter-spacing: -0.5px; - font-family: 'DM Sans', sans-serif; /* Ou votre police SaaS */ -} - -/* --- LE HEADER STICKY (Base Neutral Pro) --- */ -.header-section { - position: sticky; - top: 0; - z-index: 1000 !important; - background-color: rgba(255, 255, 255, 0.85); - backdrop-filter: blur(10px); - -webkit-backdrop-filter: blur(10px); - padding: 5px 0; - margin-bottom: 0.65rem !important; - border-bottom: 1px solid rgba(0,0,0,0.05); -} - -.header-section > div { - box-shadow: 0 4px 4px rgba(0, 0, 0, 0.08) !important; -} - -/* Ajustement des icônes pour plus de finesse */ -.icon-shape { - flex-shrink: 0; -} - -/* Force le bouton de fermeture en blanc pur */ -.btn-close-white { - filter: invert(1) grayscale(100%) brightness(200%) !important; - color: #fff !important; -} - -.modal-header .btn:hover { - transform: scale(1.2); - opacity: 0.8; -} - - -/* S'assurer que le titre "Rechercher :" est aligné avec son input */ -.dataTables_filter label { - display: flex; - align-items: center; - margin-bottom: 0; - font-weight: 600; - color: var(--text-dark); -} - -/* Espacement entre les boutons export */ -.dt-buttons { - display: flex; - align-items: center; -} - -/* Style pour maintenir la bordure visible quand le filtre est activé */ -.bootstrap-select > button.btn:focus, -.bootstrap-select > button.btn:active, -.bootstrap-select.show > button.btn { - outline: none !important; - border: 2px solid #212e53 !important; /* Votre couleur Primary */ - box-shadow: 0 0 0 0.25rem rgba(33, 46, 83, 0.25) !important; - background-color: #fff !important; -} - -/* Ajustement pour que le conteneur en pointillé ne gêne pas le focus */ -#div_listetables .bootstrap-select { - width: 100% !important; -} - -/* Aligne le bouton SelectPicker avec l'icône de l'input-group */ -.input-group > .bootstrap-select.form-control { - flex: 1 1 auto; - width: 1% !important; -} - -/* 1. Force la bordure sur le bouton du select */ -.bootstrap-select > .dropdown-toggle { - border: 2px solid #dee2e6 !important; /* Même couleur que ton input Nom */ - border-left: 0 !important; /* Supprime la bordure gauche pour coller à l'icône */ - background-color: #fff !important; - height: 38px !important; /* Aligne la hauteur sur l'input Nom */ - display: flex !important; - align-items: center; -} - -/* Styles sidebar toggle + ligne sélectionnée */ -/* ── Ligne DataTable sélectionnée ── */ - .table tbody tr.row-selected > td { - background: rgba(26, 107, 74, 0.08) !important; - border-left: 3px solid var(--color-accent, #0abf7c); - } - - /* ── Transitions fluides (doivent être déclarées ici, APRÈS le CSS du template, - pour ne pas être écrasées par Bootstrap/css/style.css) ── */ - /* - #sidebar { - transition: width 0.3s cubic-bezier(.4,0,.2,1), - transform 0.3s cubic-bezier(.4,0,.2,1) !important; - overflow: hidden !important; - will-change: width; - } - */ - - /* - #main { - transition: margin-left 0.3s cubic-bezier(.4,0,.2,1) !important; - will-change: margin-left; - } - */ - - /* ── Mode réduit (icônes seules) — desktop ── */ - body.toggle-sidebar #sidebar { - width: 68px !important; - min-width: 68px !important; - } - - body.toggle-sidebar #main { - margin-left: 68px !important; - } - - /* Masquer textes et chevrons */ - body.toggle-sidebar #sidebar .nav-link span, - body.toggle-sidebar #sidebar .nav-link .bi-chevron-down, - body.toggle-sidebar #sidebar .sidebar-section-label { - opacity: 0; - width: 0; - overflow: hidden; - white-space: nowrap; - display: inline-block; /* garder dans le flux mais invisible — évite le reflow brutal */ - transition: opacity 0.2s ease, width 0.2s ease; - } - body:not(.toggle-sidebar) #sidebar .nav-link span, - body:not(.toggle-sidebar) #sidebar .nav-link .bi-chevron-down { - opacity: 1; - width: auto; - transition: opacity 0.25s ease 0.05s, width 0.25s ease; - } - /* Centrer les icônes et agrandir légèrement */ - body.toggle-sidebar #sidebar .nav-link { - justify-content: center !important; - padding: 11px 0 !important; - } - body.toggle-sidebar #sidebar .nav-link i:first-child { - font-size: 1.25rem !important; - width: auto !important; - margin: 0 !important; - } - /* Fermer les sous-menus */ - body.toggle-sidebar #sidebar .nav-content { - display: none !important; - } - /* Tooltip natif au survol en mode réduit */ - body.toggle-sidebar #sidebar .nav-link { - position: relative; - } - - /* ── Mobile : slide depuis la gauche ── */ - @media (max-width: 1199px) { - #sidebar { - transform: translateX(-100%); - width: var(--sidebar-width, 240px) !important; - } - #sidebar.sidebar-mobile-open { - transform: translateX(0); - } - /* Overlay semi-transparent derrière le sidebar mobile */ - #sidebar.sidebar-mobile-open::after { - content: ''; - position: fixed; - inset: 0; - background: rgba(0,0,0,0.35); - z-index: -1; - } - #main { - margin-left: 0 !important; - } - } - - /* Empêche l'affichage cumulatif si le plugin déraille */ -.bootstrap-select .filter-option-inner-inner { - white-space: nowrap; - overflow: hidden; - text-overflow: ellipsis; - display: block !important; -} - -/* ===== WRAPPER & BORDURE ANIMÉE ===== */ -.scan-wrapper { - position: relative; - width: 100%; - max-width: 720px; - margin: 40px auto; -} - -.scan-wrapper::before { - content: ''; - position: absolute; - inset: -3px; - border-radius: 20px; - background: linear-gradient(135deg, #00c9ff, #0055a5, #00e5ff, #0055a5, #00c9ff); - background-size: 300% 300%; - animation: borderGlow 3s linear infinite; - z-index: 0; -} - -.scan-wrapper.has-value::before { - background: linear-gradient(135deg, #00c853, #1b5e20, #69f0ae, #1b5e20, #00c853); - background-size: 300% 300%; -} - -.scan-wrapper.has-error::before { - background: linear-gradient(135deg, #ff1744, #b71c1c, #ff6e6e, #b71c1c, #ff1744); - background-size: 300% 300%; -} - -@keyframes borderGlow { - 0% { background-position: 0% 50%; } - 50% { background-position: 100% 50%; } - 100% { background-position: 0% 50%; } -} - -/* ===== INNER CONTAINER ===== */ -.scan-inner { - position: relative; - z-index: 1; - background: #050f20; - border-radius: 18px; - padding: 16px 20px 20px; - overflow: hidden; -} - -/* Ligne de scan animée */ -.scan-inner::after { - content: ''; - position: absolute; - left: 0; right: 0; - height: 2px; - background: linear-gradient(90deg, transparent 0%, #00e5ff 30%, #ffffff 50%, #00e5ff 70%, transparent 100%); - animation: scanLine 2.5s ease-in-out infinite; - pointer-events: none; - z-index: 2; - opacity: 0.7; -} - -@keyframes scanLine { - 0% { top: 0%; opacity: 0; } - 5% { opacity: 0.8; } - 95% { opacity: 0.8; } - 100% { top: 100%; opacity: 0; } -} - -/* ===== COINS DÉCORATIFS ===== */ -.scan-corner { - position: absolute; - width: 20px; height: 20px; - border-color: #00c9ff; - border-style: solid; - z-index: 4; - transition: border-color 0.3s; -} -.scan-corner.tl { top: 10px; left: 10px; border-width: 2px 0 0 2px; border-radius: 4px 0 0 0; } -.scan-corner.tr { top: 10px; right: 10px; border-width: 2px 2px 0 0; border-radius: 0 4px 0 0; } -.scan-corner.bl { bottom: 10px; left: 10px; border-width: 0 0 2px 2px; border-radius: 0 0 0 4px; } -.scan-corner.br { bottom: 10px; right: 10px; border-width: 0 2px 2px 0; border-radius: 0 0 4px 0; } - -.scan-wrapper.has-value .scan-corner { border-color: #00c853; } -.scan-wrapper.has-error .scan-corner { border-color: #ff1744; } - -/* ===== LABEL EN-TÊTE ===== */ -.scan-label { - display: flex; - align-items: center; - justify-content: center; - gap: 10px; - font-family: 'Exo 2', sans-serif; - font-size: 9.5pt; - font-weight: 600; - letter-spacing: 3px; - text-transform: uppercase; - color: rgba(0, 180, 230, 0.6); - margin-bottom: 6px; -} - -.nfc-icon-pulse { - animation: pulse 2.2s ease-in-out infinite; -} -@keyframes pulse { - 0%, 100% { opacity: 0.35; transform: scale(1); } - 50% { opacity: 1; transform: scale(1.2); } -} - -/* ===== CHAMP INPUT ===== */ -#donneesCarte { - font-family: 'Rajdhani', monospace !important; - font-size: 24pt !important; - font-weight: 700; - height: 130px !important; - width: 100% !important; - text-align: center; - /* Données masquées (sécurité) */ - color: transparent !important; - text-shadow: 0 0 10px rgba(0, 229, 255, 0.8) !important; - caret-color: #00e5ff; - /* Fond & bordure */ - background: transparent !important; - border: none !important; - outline: none !important; - box-shadow: none !important; - letter-spacing: 4px; - position: relative; - z-index: 3; - transition: text-shadow 0.3s; -} - -#donneesCarte::placeholder { - font-family: 'Exo 2', sans-serif !important; - font-size: 20pt !important; - font-weight: 600; - color: rgba(0, 210, 255, 0.85) !important; - text-shadow: 0 0 12px rgba(0, 210, 255, 0.5) !important; - letter-spacing: 1px; -} - -#donneesCarte:focus::placeholder { - color: rgba(0, 210, 255, 0.55) !important; - text-shadow: 0 0 8px rgba(0, 210, 255, 0.3) !important; -} - -/* État : données détectées */ -#donneesCarte.reading { - text-shadow: 0 0 14px rgba(0, 200, 83, 0.9) !important; - animation: none !important; -} - -/* Force l'alignement de la hauteur du SelectPicker avec les inputs sm */ -.bootstrap-select .btn.dropdown-toggle { - padding-top: 0.25rem !important; - padding-bottom: 0.25rem !important; - height: 31px !important; /* Hauteur standard du form-control-sm */ - font-size: 8.5pt !important; - display: flex; - align-items: center; - background-color: #fff !important; - border-width: 2px !important; -} - -/* Aligne l'icône de flèche */ -.bootstrap-select .btn.dropdown-toggle .filter-option { - display: flex; - align-items: center; - height: 100%; -} - -/* Corrige la bordure spécifique si vous utilisez border-start-0 */ -.bootstrap-select.border-2 .btn.dropdown-toggle { - border-color: #dee2e6 !important; -} - -/* --- LE DATEPICKER (Correction Visuelle & Z-Index) --- */ -.datepicker-dropdown { - /* Le secret : un index supérieur au header (1000) */ - z-index: 2000 !important; - position: absolute !important; - padding: 10px !important; - border: 2px solid #212e53 !important; - border-radius: 10px !important; - box-shadow: 0 10px 25px rgba(0,0,0,0.1) !important; - background-color: #fff !important; -} - -/* Style des jours actifs (Couleur de ta charte) */ -.datepicker table tr td.active { - background-color: #212e53 !important; - border-radius: 5px !important; - color: #fff !important; -} - -/* 1. On ne force JAMAIS le display:block ici, sinon il reste visible en bas de page */ -#ui-datepicker-div { - z-index: 99999 !important; /* Priorité absolue sur le header et les modals */ - display: none; /* Laisse jQuery UI le contrôler */ - - /* Design SaaS Neutral Pro */ - background: #ffffff !important; - border: 1px solid #212e53 !important; - border-radius: 12px !important; - box-shadow: 0 15px 35px rgba(0,0,0,0.2) !important; - padding: 10px !important; - font-family: inherit; -} - -/* --- LE DATEPICKER "NEUTRAL PRO" (jQuery UI) --- */ -/* Conteneur principal : Plus grand, plus aéré, ombre premium */ -.ui-datepicker { - font-size: 10pt !important; /* Police plus lisible */ - background: #fff !important; /* Fond blanc pur */ - border: 2px solid #212e53 !important; /* Couleur Primary */ - border-radius: 12px !important; - padding: 15px !important; /* Plus d'espace interne */ - box-shadow: 0 10px 30px rgba(0,0,0,0.15) !important; /* Ombre plus douce */ - width: 280px !important; /* Largeur fixe pour la lisibilité */ -} - -.ui-datepicker-header { - background: #f8f9fa !important; - border: none !important; - border-bottom: 1px solid #eee !important; - border-radius: 8px 8px 0 0 !important; -} - -.ui-datepicker-title { - color: #212e53 !important; /* Couleur Primary */ - font-weight: bold !important; - text-transform: uppercase; - font-size: 11pt !important; -} - -/* Masquage des flèches par défaut */ -.ui-icon-circle-triangle-w, .ui-icon-circle-triangle-e { display: none; } - -/* Jours de la semaine : Gris légers, en majuscules */ -.ui-datepicker-calendar th { - font-weight: bold; - color: #888; - text-transform: uppercase; - font-size: 8.5pt; - padding-bottom: 10px; -} - -/* Tableau des jours : Cellules plus grandes, sans bordures lourdes */ -.ui-datepicker-calendar { - border-collapse: collapse; -} - -.ui-datepicker-calendar td { - padding: 2px; -} - -/* Style des Jours Standards : Pas de bordures, fond blanc */ -.ui-datepicker .ui-state-default { - background: #fff !important; - color: #555 !important; - border: none !important; - text-align: center; - padding: 8px !important; - border-radius: 8px; /* Jours arrondis */ - font-weight: 500; -} - -/* Hover sur les jours : Gris très léger */ -.ui-datepicker .ui-state-default:hover { - background-color: #f1f3f5 !important; - color: #212e53 !important; -} - -/* Jours Désactivés (Passés/Futurs) : Gris léger */ -.ui-state-disabled { - opacity: 0.35 !important; -} - -/* --- LE STYLE DES ÉTATS (Charte Graphique) --- */ -/* --- LE STYLE DU JOUR COURANT (AUJOURD'HUI) --- */ -.ui-datepicker-today a { - background-color: #FFF88D !important; /* Ton Jaune Charte */ - color: #212e53 !important; /* On garde le bleu Primary pour le texte */ - font-weight: 800 !important; /* On force un gras très prononcé */ - border-radius: 50% !important; /* On en fait une pastille parfaite */ - width: 35px; - height: 35px; - display: flex !important; - align-items: center; - justify-content: center; - margin: 0 auto !important; - position: relative; - box-shadow: 0 2px 4px rgba(0,0,0,0.1); /* Un léger relief */ -} - -/* Petit indicateur visuel discret sous le numéro d'aujourd'hui */ -.ui-datepicker-today a::after { - content: ''; - position: absolute; - bottom: 2px; - width: 12px; - height: 2px; - background-color: #dc3545; /* Barre rouge horizontale sous le chiffre */ - border-radius: 2px; -} - -/* Jour Sélectionné (Si l'utilisateur clique dessus) */ -/* Couleur Primary Charte avec texte blanc net */ -.ui-datepicker-current-day a, -.ui-datepicker .ui-state-active { - background-color: #212e53 !important; /* Couleur Primary Charte */ - color: #fff !important; /* Texte blanc pur */ - font-weight: bold !important; - border: none !important; - box-shadow: 0 2px 5px rgba(0,0,0,0.2); /* Légère ombre pour le relief */ -} - -/* Effet au survol pour plus de dynamisme */ -.ui-datepicker-today a:hover { - background-color: #f7e031 !important; /* Un jaune un peu plus soutenu */ - transform: scale(1.1); - transition: all 0.2s ease; -} - -/* --- LE STYLE DU JOUR COURANT (AUJOURD'HUI) --- */ -/* On cible le lien car jQuery UI applique ses styles dessus */ -.ui-datepicker-today a.ui-state-default { - background-color: #FFF88D !important; /* Ton Jaune Charte */ - color: #212e53 !important; /* Texte bleu foncé */ - font-weight: 800 !important; - border: 1px solid #212e53 !important; /* Bordure pour bien voir le cercle */ - border-radius: 50% !important; /* Cercle parfait */ - - /* On centre le chiffre dans le cercle */ - display: flex !important; - align-items: center; - justify-content: center; - - width: 30px !important; - height: 30px !important; - margin: 0 auto !important; - padding: 0 !important; - box-shadow: 0 2px 4px rgba(0,0,0,0.1) !important; -} - -/* La petite barre rouge sous le chiffre pour le rappel d'importance */ -.ui-datepicker-today a.ui-state-default::after { - content: ''; - position: absolute; - bottom: 2px; - width: 10px; - height: 2px; - background-color: #dc3545; - border-radius: 2px; -} - -/* --- LE STYLE DU JOUR SÉLECTIONNÉ (CLIQUE) --- */ -.ui-datepicker-current-day a.ui-state-active { - background-color: #212e53 !important; /* Primary */ - color: #ffffff !important; /* Blanc */ - border-radius: 50% !important; - border: none !important; -} - -/* On s'assure que les jours sont propres */ -.ui-datepicker th { color: #888 !important; text-transform: uppercase; font-size: 8pt; } -.ui-datepicker td span, .ui-datepicker td a { - border: none !important; - background: none !important; - text-align: center !important; - border-radius: 6px !important; -} \ No newline at end of file diff --git a/Vue/Ajaxconnexioncookie/english copy.php b/Vue/Ajaxconnexioncookie/english copy.php new file mode 100755 index 00000000..848986d2 --- /dev/null +++ b/Vue/Ajaxconnexioncookie/english copy.php @@ -0,0 +1,72 @@ + + + + Manager Portal + + +" "): ?> +
+

+
+ +
+

+
+ +
+ +
+ + + +
+ + +
+ +
+
+ + +
+
+ +
+
+ + +
+
+ +
+ + +
+ +
+ +
+ +
+ + Forgot your password? + +
+ +
+ All rights reserved © EBENE SOLUTIONS INFORMATIQUES +
+ \ No newline at end of file diff --git a/Vue/Ajaxconnexioncookie/english.php b/Vue/Ajaxconnexioncookie/english.php index 848986d2..a57bf9ed 100755 --- a/Vue/Ajaxconnexioncookie/english.php +++ b/Vue/Ajaxconnexioncookie/english.php @@ -1,72 +1,64 @@ - - Manager Portal - +

+ Manager Portal +

-" "): ?> -
-

-
- -
-

-
+ " "): ?> +
+ +
-
- -
+
- -
- - -
+ +
+ +
+ + +
+
-
-
- - -
-
+
+ +
+ + +
+
-
-
- - -
-
+
+ +
+ + +
+
-
- - -
+
+ +
+ + +
+
-
- -
+
+ +
-
- - Forgot your password? - -
- -
- All rights reserved © EBENE SOLUTIONS INFORMATIQUES -
- \ No newline at end of file +
+ INTER SANTÉ — v +
+ \ No newline at end of file diff --git a/Vue/Ajaxconnexioncookie/french copy.php b/Vue/Ajaxconnexioncookie/french copy.php new file mode 100755 index 00000000..9122f06c --- /dev/null +++ b/Vue/Ajaxconnexioncookie/french copy.php @@ -0,0 +1,72 @@ + + + + Portail Gestionnaire + + +" "): ?> +
+

+
+ +
+

+
+ +
+ +
+ + + +
+ + +
+ +
+
+ + +
+
+ +
+
+ + +
+
+ +
+ + +
+ +
+ +
+ +
+ + Mot de passe oublié ? + +
+ +
+ Tous droits réservés © EBENE SOLUTIONS INFORMATIQUES +
+ \ No newline at end of file diff --git a/Vue/Ajaxconnexioncookie/french.php b/Vue/Ajaxconnexioncookie/french.php index 9122f06c..a8625ca2 100755 --- a/Vue/Ajaxconnexioncookie/french.php +++ b/Vue/Ajaxconnexioncookie/french.php @@ -1,72 +1,64 @@ - - Portail Gestionnaire - +

+ Portail Gestionnaire +

-" "): ?> -
-

-
- -
-

-
+ " "): ?> +
+ +
-
- -
+
- -
- - -
+ +
+ +
+ + +
+
-
-
- - -
-
+
+ +
+ + +
+
-
-
- - -
-
+
+ +
+ + +
+
-
- - -
+
+ +
+ + +
+
-
- -
+
+ +
-
- - Mot de passe oublié ? - -
- -
- Tous droits réservés © EBENE SOLUTIONS INFORMATIQUES -
- \ No newline at end of file +
+ INTER SANTÉ — v +
+ \ No newline at end of file diff --git a/Vue/Ajaxconnexioncookie/index copy.php b/Vue/Ajaxconnexioncookie/index copy.php new file mode 100755 index 00000000..ff84af14 --- /dev/null +++ b/Vue/Ajaxconnexioncookie/index copy.php @@ -0,0 +1,35 @@ +
+ + +
+ + + +
+
diff --git a/Vue/Ajaxconnexioncookie/index.php b/Vue/Ajaxconnexioncookie/index.php index 66d2566f..689b39b2 100755 --- a/Vue/Ajaxconnexioncookie/index.php +++ b/Vue/Ajaxconnexioncookie/index.php @@ -1,50 +1,24 @@ - -
- - -
- - - -
- FOND 2 -
+
+ + + +
+ \ No newline at end of file diff --git a/Vue/portail copy.php b/Vue/portail copy.php new file mode 100755 index 00000000..480f3b81 --- /dev/null +++ b/Vue/portail copy.php @@ -0,0 +1,253 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + <?= $titre ?> + + + +
+
+
+ image carousel + image carousel + image carousel + image carousel + image carousel + image carousel + image carousel + image carousel + image carousel +
+
+ ❯ + ❮ +
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+ +
+ +
+
+
+
+ + + + diff --git a/Vue/portail.php b/Vue/portail.php index c127ac1e..507a839e 100755 --- a/Vue/portail.php +++ b/Vue/portail.php @@ -1,521 +1,167 @@ + - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - <?= $titre ?> - - + + + + + + + + + + + + + + + + + + + + + + + + + + + <?= $titre ?> + +
+
+
+ image carousel + image carousel + image carousel + image carousel + image carousel + image carousel + image carousel + image carousel + image carousel +
+
+ ❯ + ❮ +
+
+
+
+
+
+
+
+
+
+
+
+
-
-
-
- image carousel - image carousel - image carousel - image carousel - image carousel - image carousel - image carousel - image carousel - image carousel -
+
+ +
+
+ +
+
+ +
+
+
+
-
- ❯ - ❮ -
+ + function switchImage(currentImage){ + currentImage.classList.add('active'); + var imageId = currentImage.getAttribute('attr'); + if(imageId > counter){ + slideImages[counter].style.animation = 'next1 0.5s ease-in forwards'; + counter = imageId; + slideImages[counter].style.animation = 'next2 0.5s ease-in forwards'; + } + else if(imageId == counter){ + return; + } + else{ + slideImages[counter].style.animation = 'prev1 0.5s ease-in forwards'; + counter = imageId; + slideImages[counter].style.animation = 'prev2 0.5s ease-in forwards'; + } + indicators(); + } + + \ No newline at end of file