/* * E-FAMA — couche globale de lisibilité * Chargée en dernier pour garantir une typographie cohérente sur tous les espaces. */ :root { --ef-text: #202b24; --ef-heading: #000000; --ef-muted: #536159; --ef-soft: #66736b; --ef-border-readable: #d9e1dc; } html { font-size: 16px; -webkit-text-size-adjust: 100%; text-rendering: optimizeLegibility; overflow-x: hidden; overflow-y: scroll; scroll-behavior: auto !important; scrollbar-gutter: stable; overscroll-behavior-y: none; } body, button, input, select, textarea, .navbar-nav, .nav-link, .btn, .form-control, .form-select, table { font-family: Poppins, "Helvetica Neue", Arial, sans-serif !important; } body { color: var(--ef-text) !important; font-size: 15px !important; font-weight: 400; line-height: 1.6; min-height: 100%; overflow-x: hidden !important; overflow-y: visible; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } body.modal-open { overflow: hidden !important; } /* * Les anciens écrans de connexion faisaient défiler dans un * bloqué. Ils utilisent désormais le même scroll document que l'application. */ html:has(body.auth-scroll-page) { height: auto !important; overflow-x: hidden !important; overflow-y: scroll !important; scrollbar-gutter: stable; } body.auth-scroll-page { height: auto !important; min-height: 100vh !important; min-height: 100dvh !important; overflow: visible !important; } body.auth-scroll-page .auth-page-wrapper { min-height: 100vh !important; min-height: 100dvh !important; } body.auth-scroll-page .auth-page-wrapper::before { animation: none !important; transform: none !important; } body.auth-scroll-page .auth-page-content .card { -webkit-backdrop-filter: none !important; backdrop-filter: none !important; } /* * Un seul scroll vertical pour les pages de l'application. * La sidebar, les notifications, modales et menus restent indépendants. */ #layout-wrapper, .main-content, .page-content { height: auto; overflow: visible; } .main-content .file-manager-content-scroll, .main-content .native-page-scroll-content, .main-content [data-simplebar] { height: auto !important; max-height: none !important; overflow: visible !important; } .main-content .native-page-scroll-content > .simplebar-wrapper, .main-content .native-page-scroll-content .simplebar-mask, .main-content .native-page-scroll-content .simplebar-offset, .main-content .native-page-scroll-content .simplebar-content-wrapper { height: auto !important; max-height: none !important; overflow: visible !important; } /* Évite les repaint/flickers des éléments fixes pendant la molette. */ #page-topbar { -webkit-backdrop-filter: none !important; backdrop-filter: none !important; backface-visibility: hidden; transition: none !important; } /* * Les cartes ne se déplacent plus sous le pointeur pendant le défilement. * Leur ombre et leur couleur de survol restent disponibles. */ .main-content .card:hover { transform: none !important; } /* Supprime l'animation d'entrée qui pouvait continuer pendant le premier scroll. */ .main-content .page-content .container-fluid > .row { animation: none !important; } .h1, .h2, .h3, .h4, .h5, .h6, h1, h2, h3, h4, h5, h6 { color: var(--ef-heading); font-family: Poppins, "Helvetica Neue", Arial, sans-serif !important; font-weight: 650; line-height: 1.35; letter-spacing: -.012em; } h1, .h1 { font-size: clamp(1.55rem, 2.2vw, 2rem); } h2, .h2 { font-size: clamp(1.3rem, 1.8vw, 1.65rem); } h3, .h3 { font-size: clamp(1.15rem, 1.5vw, 1.4rem); } h4, .h4 { font-size: 1.15rem; } h5, .h5 { font-size: 1.025rem; } h6, .h6 { font-size: .925rem; } p, li, dd, dt { line-height: 1.62; } .text-muted { --vz-text-opacity: 1; color: var(--ef-muted) !important; } small, .small { color: var(--ef-soft); font-size: .78rem !important; line-height: 1.5; } /* Remonte les micro-textes trop petits sans bouleverser les cartes. */ .fs-8, .fs-9, .fs-10 { font-size: .75rem !important; line-height: 1.45; } .fs-11 { font-size: .79rem !important; line-height: 1.5; } .fs-12 { font-size: .825rem !important; line-height: 1.5; } .fs-13 { font-size: .875rem !important; line-height: 1.5; } .fs-14 { font-size: .925rem !important; } .form-label, label:not(.form-check-label):not(.btn) { color: #354239; font-size: .84rem !important; font-weight: 600; line-height: 1.45; } .form-control, .form-select, .choices__inner, .select2-container .select2-selection { min-height: 42px; color: #202b24 !important; border-color: var(--ef-border-readable) !important; font-size: .875rem !important; line-height: 1.5; } textarea.form-control { line-height: 1.6; } .form-control::placeholder, input::placeholder, textarea::placeholder { color: #6c776f !important; opacity: 1 !important; } .form-text, .invalid-feedback, .valid-feedback { font-size: .775rem !important; line-height: 1.5; } .btn { min-height: 38px; font-size: .825rem !important; font-weight: 600; line-height: 1.35; } .btn-sm { min-height: 32px; font-size: .76rem !important; } .dropdown-item { padding-top: .55rem; padding-bottom: .55rem; color: #2e3932; font-size: .825rem; line-height: 1.45; } .navbar-menu .navbar-nav .nav-link { font-size: .84rem !important; font-weight: 500; line-height: 1.4; } .navbar-menu .menu-dropdown .nav-link, .navbar-menu .navbar-nav .nav-sm .nav-link { font-size: .78rem !important; } .navbar-menu .menu-title { font-size: .7rem !important; letter-spacing: .075em; } .table { color: #28342c; font-size: .825rem; } .table > :not(caption) > * > * { line-height: 1.5; } .table thead th { color: #46534b !important; font-size: .75rem !important; font-weight: 700; letter-spacing: .025em; } .table tbody td { font-size: .825rem; } .badge, .exam-status, .result-pill, .status-pill, .selection-count, .permission-chip { font-size: .71rem !important; line-height: 1.3; } .card-title { color: #111a14 !important; line-height: 1.4; } .card-text, .alert, .accordion-body, .list-group-item, .modal-body, .offcanvas-body { font-size: .86rem; line-height: 1.6; } .modal-title { font-size: 1.05rem; line-height: 1.4; } .page-title-box h4 { font-size: 1.05rem !important; line-height: 1.4; text-transform: none; } .breadcrumb, .pagination, .dataTables_info, .dataTables_filter, .dataTables_length { font-size: .78rem; } a { text-underline-offset: 2px; } a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, [tabindex]:focus-visible { outline: 3px solid rgba(40, 113, 74, .28) !important; outline-offset: 2px; } /* Préserve un contraste clair dans les surfaces foncées. */ .bg-primary h1, .bg-primary h2, .bg-primary h3, .bg-primary h4, .bg-primary h5, .bg-primary h6, .bg-dark h1, .bg-dark h2, .bg-dark h3, .bg-dark h4, .bg-dark h5, .bg-dark h6, .text-bg-primary h1, .text-bg-primary h2, .text-bg-primary h3, .text-bg-primary h4, .text-bg-primary h5, .text-bg-primary h6, .text-bg-dark h1, .text-bg-dark h2, .text-bg-dark h3, .text-bg-dark h4, .text-bg-dark h5, .text-bg-dark h6 { color: #ffffff !important; } .text-white, .text-white-50 { text-shadow: 0 1px 1px rgba(0, 0, 0, .08); } /* * Les interfaces métier modernes possèdent parfois leurs propres micro-tailles. * Ces règles importantes garantissent une taille plancher même si leur style * local est déclaré après cette feuille. */ .main-content p { font-size: .84rem !important; } .main-content small { font-size: .78rem !important; } .support-online, .support-button, .faq-question, .faq-answer, .support-step strong, .support-step span, .support-hours strong, .support-hours span, .support-warning p, .support-panel__head p, .support-footer-cta p, .session-section__head p, .session-section__number, .selection-count, .session-modal .form-label, .session-modal .form-control, .session-modal .form-select, .scoring-rule, .group-choice strong, .group-choice small, .candidate-chip, .group-empty, .team-box__head strong, .person-choice strong, .person-choice small, .person-avatar, .summary-card__hero p, .summary-row small, .summary-row strong, .summary-number span, .session-tip, .selection-error, .role-feedback { font-size: .78rem !important; line-height: 1.5 !important; } .support-card h2, .support-panel__head h2, .session-section h3, .panel-head h2, .work-panel__head h2, .work-kpi h2, .event-row h3, .result-row h3, .candidate-exam h4 { font-size: .95rem !important; line-height: 1.4 !important; } .live-pill, .agent-live, .contest-reference, .contest-spotlight__eyebrow, .contest-spotlight__count, .contest-apply, .exam-countdown, .track-step strong, .track-step small, .exam-info small, .exam-info strong, .event-date span, .event-row p, .result-row p, .work-kpi p, .work-panel__head p, .load-row__head, .quick-action strong, .quick-action small, .workflow-step strong, .workflow-step small, .permission-chip, .exam-kpi span, .exam-card__meta div, .exam-status, .exam-table th, .journey-ref, .journey-fact small, .journey-fact strong, .decision-badge, .result-pill, .exam-details, .exam-instructions, .calendar-separator { font-size: .76rem !important; line-height: 1.48 !important; } .panel-head p, .contest-meta span, .contest-spotlight p, .dashboard-stat small, .candidate-kpi span { color: var(--ef-muted) !important; font-size: .78rem !important; line-height: 1.5 !important; } @media (max-width: 767.98px) { body { font-size: 15px !important; } .page-content { line-height: 1.62; } .table { font-size: .8rem; } .table thead th, .table tbody td { white-space: normal; } .btn:not(.btn-icon) { padding-top: .55rem; padding-bottom: .55rem; } }