/* ===================================================================== PHILADONF AUDIT SUITE — V2.8.70 FULL UI R1 as-v2870-ui-polish-r1.css — Couche de finition visuelle globale. Principes : - Chargée EN DERNIER sur chaque page : aucune réécriture des couches existantes, uniquement de la finition qui se pose par-dessus. - Purement présentationnelle : aucune modification de structure DOM, de logique, de taille de police de base, de grille ou de breakpoint. - Aucun jeton existant (--bg, --panel, --as277-*, --pri…) n'est redéfini. Les nouveaux jetons sont préfixés --p70-. - Thème clair conservé : chaque règle de couleur sombre est scopée html:not([data-as-theme="light"]) et possède son pendant clair. - EBIOS RM (thème clair autonome, hors coque as277) n'est touché que par les règles universelles d'accessibilité et d'impression. ===================================================================== */ /* --------------------------------------------------------------------- 1. JETONS DE FINITION --------------------------------------------------------------------- */ :root{ --p70-r-xs:8px; --p70-r-sm:10px; --p70-r-md:14px; --p70-r-lg:18px; --p70-e1:0 1px 2px rgba(2,6,23,.30); --p70-e2:0 8px 20px -8px rgba(2,6,23,.55); --p70-e3:0 26px 56px -22px rgba(2,6,23,.72); --p70-ring:rgba(124,140,255,.90); --p70-ring-soft:rgba(124,140,255,.26); --p70-fast:.14s cubic-bezier(.2,.6,.3,1); --p70-slow:.24s cubic-bezier(.2,.6,.3,1); --p70-thumb:rgba(148,163,184,.30); --p70-thumb-hover:rgba(148,163,184,.52); } html[data-as-theme="light"]{ --p70-e1:0 1px 2px rgba(15,23,42,.07); --p70-e2:0 8px 20px -8px rgba(15,23,42,.14); --p70-e3:0 26px 56px -22px rgba(15,23,42,.22); --p70-ring:rgba(80,96,220,.92); --p70-ring-soft:rgba(80,96,220,.20); --p70-thumb:rgba(51,65,85,.26); --p70-thumb-hover:rgba(51,65,85,.45); } /* --------------------------------------------------------------------- 2. WIDGETS NATIFS — color-scheme Corrige les listes déroulantes natives, sélecteurs de date, ascenseurs natifs et champs de saisie rendus en clair sur fond sombre. Le drapeau data-as-surface est posé sur par le build, uniquement sur les pages à fond sombre (EBIOS RM en est exclu). --------------------------------------------------------------------- */ html[data-as-surface="dark"]:not([data-as-theme="light"]){color-scheme:dark} html[data-as-surface="dark"][data-as-theme="light"]{color-scheme:light} html[data-as-surface="dark"]:not([data-as-theme="light"]) option, html[data-as-surface="dark"]:not([data-as-theme="light"]) optgroup{ background-color:#0f1830;color:#eef2ff; } /* --------------------------------------------------------------------- 3. TYPOGRAPHIE --------------------------------------------------------------------- */ html{-webkit-text-size-adjust:100%} body{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale} /* Chiffres à chasse fixe : les compteurs, scores et montants ne « sautent » plus lors des rafraîchissements. */ body.as277-ui :is( .sbar-val,.mpanel-score,.kv,.kpi .kv,.ru-kpis b,.ru-kpis strong, .v11-projection b,.audit-up-table td,.mono,code,kbd, input[type="number"],time,[data-numeric] ){ font-variant-numeric:tabular-nums; font-feature-settings:"tnum" 1; } /* Micro-libellés en capitales : lisibilité aux petites tailles. */ body.as277-ui :is(.sbar-lbl,.kl,.eyebrow,.ru-eyebrow,.filter-label,.ech-lbl,.fl){ letter-spacing:.055em; } body.as277-ui ::selection{background:rgba(124,140,255,.34);color:#fff} html[data-as-theme="light"] body.as277-ui ::selection{background:rgba(80,96,220,.20);color:#101a2e} body.as277-ui :is(input,textarea){caret-color:currentColor} /* --------------------------------------------------------------------- 4. ACCESSIBILITÉ — anneau de focus clavier unifié Universel (EBIOS inclus) : le focus souris reste invisible, le focus clavier devient systématiquement visible. --------------------------------------------------------------------- */ :is(a,button,input,select,textarea,summary,[tabindex]):focus:not(:focus-visible){outline:none} :is(a,button,input,select,textarea,summary,[tabindex]):focus-visible{ outline:2px solid var(--p70-ring,rgba(124,140,255,.9)); outline-offset:2px; border-radius:var(--p70-r-xs); } body.as277-ui :is(.btn,.tab,.as277-module,.top-menu-item,.ru-btn,.audit-up-btn,.suite-btn):focus-visible{ outline-offset:3px; } /* --------------------------------------------------------------------- 5. CHAMPS DE FORMULAIRE --------------------------------------------------------------------- */ /* 5.1 Champ fichier natif : le bloc gris « Choose File / No file chosen » devient un bouton conforme à la charte. */ body.as277-ui input[type="file"]{ font-size:11px; color:var(--muted,rgba(238,242,255,.62)); max-width:100%; } body.as277-ui input[type="file"]::file-selector-button{ height:30px; margin-right:10px; padding:0 14px; border-radius:999px; border:1px solid rgba(148,163,184,.30); background:rgba(255,255,255,.06); color:inherit; font:inherit; font-weight:800; cursor:pointer; transition:background var(--p70-fast),border-color var(--p70-fast); } body.as277-ui input[type="file"]::file-selector-button:hover{ background:rgba(124,140,255,.20); border-color:rgba(124,140,255,.45); } html[data-as-theme="light"] body.as277-ui input[type="file"]::file-selector-button{ background:#fff;border-color:rgba(51,65,85,.22);box-shadow:var(--p70-e1); } html[data-as-theme="light"] body.as277-ui input[type="file"]::file-selector-button:hover{ background:#eef2ff;border-color:rgba(80,96,220,.38); } /* 5.2 Remplissage automatique du navigateur : plus de rectangle jaune. */ body :is(input,textarea,select):-webkit-autofill, body :is(input,textarea,select):-webkit-autofill:hover, body :is(input,textarea,select):-webkit-autofill:focus{ -webkit-text-fill-color:currentColor; -webkit-box-shadow:0 0 0 1000px rgba(20,30,58,.98) inset; caret-color:currentColor; transition:background-color 9999s ease-out 0s; } html[data-as-theme="light"] body :is(input,textarea,select):-webkit-autofill, html[data-as-theme="light"] body :is(input,textarea,select):-webkit-autofill:hover, html[data-as-theme="light"] body :is(input,textarea,select):-webkit-autofill:focus{ -webkit-box-shadow:0 0 0 1000px #fff inset; } /* 5.3 Cases, boutons radio, curseurs, barres de progression. */ body.as277-ui :is(input[type="checkbox"],input[type="radio"],input[type="range"],progress){ accent-color:#7c8cff; } html[data-as-theme="light"] body.as277-ui :is(input[type="checkbox"],input[type="radio"],input[type="range"],progress){ accent-color:#5060dc; } /* 5.4 Comportements de saisie. */ body.as277-ui ::placeholder{color:var(--muted2,rgba(238,242,255,.40));opacity:1} body.as277-ui textarea{resize:vertical} body.as277-ui :is(input,select,textarea,button):disabled{opacity:.5;cursor:not-allowed} body.as277-ui :is(input,select,textarea):read-only:not([type="file"]){opacity:.82} /* Halo de focus discret sur les champs, en complément de la bordure. */ body.as277-ui :is(.inp,.sel,.input,.select,.textarea,.fi,.fs,.fta,.ru-search input,.field input,.field select,.field textarea):focus{ box-shadow:0 0 0 3px var(--p70-ring-soft); } /* --------------------------------------------------------------------- 6. ASCENSEURS Seulement en pointeur fin : les couches mobiles V2.8.19→V2.8.22 gardent la main sur le défilement tactile. --------------------------------------------------------------------- */ @media (hover:hover) and (pointer:fine){ body.as277-ui *{scrollbar-width:thin;scrollbar-color:var(--p70-thumb) transparent} body.as277-ui ::-webkit-scrollbar{width:9px;height:9px} body.as277-ui ::-webkit-scrollbar-track{background:transparent} body.as277-ui ::-webkit-scrollbar-thumb{ background:var(--p70-thumb); border-radius:999px; border:2px solid transparent; background-clip:content-box; } body.as277-ui ::-webkit-scrollbar-thumb:hover{background:var(--p70-thumb-hover);background-clip:content-box} body.as277-ui ::-webkit-scrollbar-corner{background:transparent} /* Les barres d'onglets défilantes restent sans ascenseur visible. */ body.as277-ui :is(.tbar,.sbar,.as277-modules,.gc-module-tabs)::-webkit-scrollbar{height:0} } /* --------------------------------------------------------------------- 7. SURFACES — profondeur et rayons cohérents Ne touche ni le fond ni la bordure définis par les couches existantes : uniquement rayon, ombre et liseré supérieur interne. --------------------------------------------------------------------- */ body.as277-ui :is(.mpanel,.side,.panel,.card,.ru-card,.ru-shell,.kpi,.modal-box,.suite-card){ border-radius:var(--p70-r-lg); box-shadow:var(--p70-e2),inset 0 1px 0 rgba(255,255,255,.05); } html[data-as-theme="light"] body.as277-ui :is(.mpanel,.side,.panel,.card,.ru-card,.ru-shell,.kpi,.modal-box,.suite-card){ box-shadow:var(--p70-e2); } body.as277-ui :is(.sec,.form-section,.audit-up-pane>div,.ru-versions,.ru-card-side){ border-radius:var(--p70-r-md); } body.as277-ui :is(.card,.kpi,.ru-card){ transition:box-shadow var(--p70-slow),border-color var(--p70-slow),transform var(--p70-slow); } body.as277-ui :is(.card,.kpi,.ru-card):hover{ box-shadow:var(--p70-e3),inset 0 1px 0 rgba(255,255,255,.07); } /* Le liseré d'accent des cartes de veille suit le rayon de la carte. */ body.as277-ui .ru-card{overflow:hidden} /* --------------------------------------------------------------------- 8. BOUTONS, ONGLETS, PASTILLES --------------------------------------------------------------------- */ body.as277-ui :is(.btn,.ru-btn,.audit-up-btn,.suite-btn,.tab,.dtab,.mtab,.side-tab,.audit-up-tab){ transition:background var(--p70-fast),border-color var(--p70-fast), box-shadow var(--p70-fast),transform var(--p70-fast),color var(--p70-fast); } body.as277-ui :is(.btn,.ru-btn,.audit-up-btn,.suite-btn):not(:disabled):active{ transform:translateY(1px); box-shadow:none; } body.as277-ui :is(.btn,.ru-btn,.audit-up-btn,.suite-btn):disabled{transform:none} /* Pastilles d'état : hauteur et rayon homogènes d'un module à l'autre. */ body.as277-ui :is(.status-chip,.co-pill,.priority-chip,.ru-status,.fw-status-pill,.ech-i){ border-radius:999px; line-height:1.5; font-variant-numeric:tabular-nums; } /* --------------------------------------------------------------------- 9. TABLEAUX — lisibilité des grilles denses --------------------------------------------------------------------- */ body.as277-ui table{border-collapse:separate;border-spacing:0} body.as277-ui :is(.audit-up-table,.tbl,.table-wrap table) thead th{ position:sticky; top:0; z-index:2; background:rgba(11,18,38,.97); backdrop-filter:saturate(140%) blur(6px); font-size:9.5px; font-weight:900; text-transform:uppercase; letter-spacing:.06em; white-space:nowrap; } html[data-as-theme="light"] body.as277-ui :is(.audit-up-table,.tbl,.table-wrap table) thead th{ background:rgba(247,249,253,.97); } body.as277-ui :is(.audit-up-table,.tbl,.table-wrap table) tbody tr{ transition:background var(--p70-fast); } body.as277-ui :is(.audit-up-table,.tbl,.table-wrap table) tbody tr:nth-child(even){ background:rgba(255,255,255,.018); } body.as277-ui :is(.audit-up-table,.tbl,.table-wrap table) tbody tr:hover{ background:rgba(124,140,255,.09); } html[data-as-theme="light"] body.as277-ui :is(.audit-up-table,.tbl,.table-wrap table) tbody tr:nth-child(even){ background:rgba(51,65,85,.028); } html[data-as-theme="light"] body.as277-ui :is(.audit-up-table,.tbl,.table-wrap table) tbody tr:hover{ background:rgba(80,96,220,.07); } /* --------------------------------------------------------------------- 10. FENÊTRES MODALES --------------------------------------------------------------------- */ body.as277-ui :is(.ru-overlay,.modal,.overlay,.cd-overlay,.aspc-backdrop){ backdrop-filter:blur(3px) saturate(115%); -webkit-backdrop-filter:blur(3px) saturate(115%); } body.as277-ui :is(.ru-shell,.modal-box,.mbdy,.modal>.card,.top-menu-panel){ animation:p70-rise var(--p70-slow) both; } @keyframes p70-rise{ from{opacity:0;transform:translateY(8px) scale(.992)} to{opacity:1;transform:none} } /* --------------------------------------------------------------------- 11. LIENS ET ÉTATS VIDES --------------------------------------------------------------------- */ body.as277-ui a:not(.btn):not(.ru-btn):not([class*="tab"]){ text-underline-offset:.18em; text-decoration-thickness:from-font; } body.as277-ui :is(.ru-empty,.empty){ text-align:center; color:var(--muted2,rgba(238,242,255,.40)); font-weight:700; } /* --------------------------------------------------------------------- 12. MOUVEMENT RÉDUIT Respect de la préférence système : aucune animation superflue. --------------------------------------------------------------------- */ @media (prefers-reduced-motion:reduce){ *,*::before,*::after{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; scroll-behavior:auto !important; } } /* --------------------------------------------------------------------- 13. IMPRESSION Les rapports d'audit imprimés depuis l'écran ne sortent plus en fond sombre avec la coque applicative. --------------------------------------------------------------------- */ @media print{ html,body,body.as277-ui{ background:#fff !important; color:#111 !important; overflow:visible !important; height:auto !important; } body.as277-ui :is( header.top,.as277-header,.as277-navrow,.sbar,.tbar,.side, .top-menu-panel,.as-commercial-footer,.aspc-backdrop,.aspc-banner, .ru-overlay,.modal,.overlay ){display:none !important} body.as277-ui :is(.app,.work,.scroll,.mpanel,.card,.page){ display:block !important; height:auto !important; max-height:none !important; overflow:visible !important; box-shadow:none !important; border-color:#ccc !important; background:#fff !important; color:#111 !important; } body.as277-ui :is(.sec,.card,.kpi,tr,figure){break-inside:avoid;page-break-inside:avoid} body.as277-ui :is(h1,h2,h3,.sec-title,.mpanel-title){break-after:avoid;page-break-after:avoid} body.as277-ui a[href]::after{content:"" !important} body.as277-ui :is(.btn,.ru-btn,.audit-up-btn,button){display:none !important} } /* UI R1 build marker: baseline V2.8.70 FULL; presentation only; backend untouched. */