/* =============================================================================
SETKA — Espace client ERPNext · socle de design bi-thème + liquid glass
-----------------------------------------------------------------------------
Servi statiquement en /assets/setka/css/setka-portail.css depuis le volume
`sites` (nginx : root .../sites ; location /assets { try_files $uri =404; }).
Aucun rebuild d'image, aucun `bench build`.
Source de vérité : docker-stacks/erpnext/portail/assets/css/setka-portail.css
Déploiement : portail/deploy-assets.ps1
Transposé de PRESTKA V15 (C:\DEV-RICKY\PRESTKA\app\assets\stylesheets\) :
tokens.css (échelle + dual thème), glass.css (4 niveaux), components.css.
THÈME : attribut [data-theme] sur . « dark » est le DÉFAUT (le jeu
complet vit dans :root, seul le clair est un bloc d'override).
RÈGLE ABSOLUE : aucune couleur en dur hors de la section « 2. TOKENS ».
============================================================================= */
/* =============================================================================
1. POLICES AUTO-HÉBERGÉES
-----------------------------------------------------------------------------
La CSP de production (Caddy) impose `style-src 'self'` et `font-src 'self' data:` :
les vers fonts.googleapis.com étaient BLOQUÉS et la typo n'a jamais
chargé sur gestion.cloudka.fr. Fichiers repris de PRESTKA (licences OFL).
PIÈGE (constaté au rendu par PRESTKA le 2026-07-11) : les .woff2 d'Instrument
Serif sont livrés INVERSÉS — « instrument-serif-italic-*.woff2 » contient les
glyphes ROMAINS et « instrument-serif-*.woff2 » les ITALIQUES. Tous les titres
du design system étant en font-style:italic, un mapping naïf les affiche DROITS.
On ré-associe donc chaque style à la source qui porte réellement les bons
glyphes, sans renommer les binaires.
============================================================================= */
@font-face {
font-family: "Instrument Serif"; font-style: normal; font-weight: 400; font-display: swap;
src: url("../fonts/instrument-serif-italic-latin.woff2") format("woff2"); /* nom trompeur : glyphes ROMAINS */
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: "Instrument Serif"; font-style: normal; font-weight: 400; font-display: swap;
src: url("../fonts/instrument-serif-italic-latin-ext.woff2") format("woff2"); /* nom trompeur : glyphes ROMAINS */
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
font-family: "Instrument Serif"; font-style: italic; font-weight: 400; font-display: swap;
src: url("../fonts/instrument-serif-latin.woff2") format("woff2"); /* nom trompeur : glyphes ITALIQUES */
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: "Instrument Serif"; font-style: italic; font-weight: 400; font-display: swap;
src: url("../fonts/instrument-serif-latin-ext.woff2") format("woff2"); /* nom trompeur : glyphes ITALIQUES */
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
font-family: "Geist"; font-style: normal; font-weight: 100 900; font-display: swap;
src: url("../fonts/geist-latin.woff2") format("woff2");
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: "Geist"; font-style: normal; font-weight: 100 900; font-display: swap;
src: url("../fonts/geist-latin-ext.woff2") format("woff2");
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
font-family: "Geist Mono"; font-style: normal; font-weight: 100 900; font-display: swap;
src: url("../fonts/geist-mono-latin.woff2") format("woff2");
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: "Geist Mono"; font-style: normal; font-weight: 100 900; font-display: swap;
src: url("../fonts/geist-mono-latin-ext.woff2") format("woff2");
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* =============================================================================
2. TOKENS
============================================================================= */
:root {
/* ── Marque (immuable, identique dans les deux thèmes) ───────────────────── */
--sk-primary: #004D95; /* bleu Setka */
--sk-primary-dark: #003A73;
--sk-primary-light: #1A6BB5;
--sk-violet: #393A8F; /* violet Prestka */
--sk-violet-light: #5054B8;
--sk-gold: #D4AF37; /* accent RARE : eyebrows, filets, épinglage */
/* ── Fonds bruts ─────────────────────────────────────────────────────────── */
--sk-obsidian: #06011a; /* MENU en thème sombre (valeur imposée §5.1) */
--sk-navy: #08042B; /* PAGE en thème sombre (valeur imposée §5.1) */
--sk-cloud-page: #E9F0FA; /* PAGE en thème clair — bleu très pâle */
--sk-cloud-nav: #F8FBFF; /* MENU en thème clair — plus clair que la page */
--sk-paper: #FAFAFA;
--sk-paper-dim: #E7EAF0;
--sk-paper-soft: #A7B0C0;
--sk-ink: #0A1B33;
/* ── Statuts (pastilles d'abonnement / d'annonce) ───────────────────────── */
--sk-ok: #0F7A57;
--sk-warn: #B45309;
--sk-danger: #780000;
/* ═════════ SÉMANTIQUE — THÈME SOMBRE (défaut) ═════════════════════════════
Échelle d'élévation, du plus bas au plus haut : menu < page < carte.
Le menu ne suit PAS --sk-bg : c'est ce qui le détache du contenu (pattern
PRESTKA --bg / --nav-bg, repris tel quel). */
--sk-bg: var(--sk-navy);
--sk-nav-bg: var(--sk-obsidian);
--sk-nav-bg-2: #0A0530; /* bas du dégradé de menu */
--sk-text-primary: var(--sk-paper);
--sk-text-secondary: var(--sk-paper-dim);
--sk-text-tertiary: var(--sk-paper-soft);
--sk-text-mute: #7C8698;
--sk-text-on-nav: rgba(255, 255, 255, 0.78); /* items de menu au repos */
/* L'INDIGO/BLEU DE MARQUE N'EST PAS UNE COULEUR DE TEXTE (leçon PRESTKA,
tokens.css L140-163) : #004D95 mesure ~1,9:1 sur le fond sombre, très en
dessous des 4,5:1 exigés pour du texte. D'où la séparation stricte :
• --sk-primary = SURFACES (dégradés, filets, halos, fonds de bouton)
• --sk-accent = TEXTE et états interactifs portés par le bleu */
--sk-accent: color-mix(in srgb, var(--sk-primary-light) 55%, var(--sk-paper));
--sk-accent-hover: color-mix(in srgb, var(--sk-primary-light) 38%, var(--sk-paper));
/* Eyebrow : l'or pur est lisible sur le sombre (≈6:1), il s'assombrit en clair. */
--sk-eyebrow: var(--sk-gold);
--sk-line: rgba(250, 250, 250, 0.16);
--sk-line-strong: rgba(250, 250, 250, 0.26);
/* Teinte des surfaces translucides — suit le fond de page (pattern PRESTKA) */
--sk-surface-tint: var(--sk-navy);
--sk-surface-solid: #120C3C; /* carte OPAQUE, reste au-dessus de --sk-bg */
/* Panneau du contenu natif : verre SIMULÉ, sans backdrop-filter (cf. RF-1) */
--sk-panel-bg: color-mix(in srgb, var(--sk-paper) 6%, var(--sk-bg));
/* Pastilles de statut : sur fond sombre, les teintes pleines sont trop
sombres → on éclaircit vers --sk-paper (même technique que PRESTKA
pour --banner-*). Le fond reste à faible opacité. */
--sk-ok-fg: color-mix(in srgb, var(--sk-ok) 48%, var(--sk-paper));
--sk-warn-fg: color-mix(in srgb, var(--sk-warn) 52%, var(--sk-paper));
--sk-danger-fg: color-mix(in srgb, var(--sk-danger) 45%, var(--sk-paper));
/* ── Verre (4 niveaux ; utilitaires en section 5) ────────────────────────── */
--sk-glass-subtle-bg: color-mix(in srgb, var(--sk-surface-tint) 45%, transparent);
--sk-glass-subtle-blur: 12px;
--sk-glass-subtle-sat: 1.4;
--sk-glass-subtle-border: rgba(250, 250, 250, 0.07);
--sk-glass-medium-bg: color-mix(in srgb, var(--sk-surface-tint) 62%, transparent);
--sk-glass-medium-blur: 20px;
--sk-glass-medium-sat: 1.8;
--sk-glass-medium-border: rgba(250, 250, 250, 0.12);
--sk-glass-strong-bg: color-mix(in srgb, var(--sk-surface-tint) 82%, transparent);
--sk-glass-strong-blur: 28px;
--sk-glass-strong-sat: 2.0;
--sk-glass-strong-border: rgba(250, 250, 250, 0.16);
--sk-glass-hero-bg: color-mix(in srgb, var(--sk-violet) 22%, transparent);
--sk-glass-hero-blur: 30px;
--sk-glass-hero-sat: 1.8;
--sk-glass-hero-border: rgba(212, 175, 55, 0.18);
--sk-glass-highlight: rgba(255, 255, 255, 0.07); /* liseré spéculaire haut */
--sk-glass-sheen-top: rgba(255, 255, 255, 0.08); /* lumière haute interne */
--sk-glass-inner: inset 0 -22px 38px -28px rgba(0, 0, 0, 0.55);
--sk-glass-edge: inset 0 0 0 1px rgba(255, 255, 255, 0.03);
/* Halos du fond de page (ce que le verre floute — sans eux, une carte de la
même teinte que la page serait invisible). */
--sk-halo-1: color-mix(in srgb, var(--sk-primary) 30%, transparent);
--sk-halo-2: color-mix(in srgb, var(--sk-violet) 26%, transparent);
/* ── Typographie ─────────────────────────────────────────────────────────── */
--sk-serif: "Instrument Serif", Georgia, "Times New Roman", serif;
--sk-sans: "Geist", system-ui, -apple-system, "Segoe UI", sans-serif;
--sk-mono: "Geist Mono", ui-monospace, "Cascadia Code", monospace;
--sk-text-xs: 0.75rem; --sk-text-sm: 0.875rem; --sk-text-base: 1rem;
--sk-text-md: 1.125rem; --sk-text-lg: 1.25rem; --sk-text-xl: 1.563rem;
--sk-text-2xl: 1.953rem; --sk-text-3xl: 2.441rem;
--sk-tracking-caps: 0.20em;
--sk-tracking-wide: 0.06em;
/* ── Espacement / rayons ─────────────────────────────────────────────────── */
--sk-space-1: 4px; --sk-space-2: 8px; --sk-space-3: 12px; --sk-space-4: 16px;
--sk-space-5: 24px; --sk-space-6: 32px; --sk-space-7: 48px;
--sk-radius-sm: 6px; --sk-radius-md: 10px; --sk-radius-lg: 14px;
--sk-radius-xl: 18px; --sk-radius-2xl: 24px; --sk-radius-full: 9999px;
/* ── Ombres ──────────────────────────────────────────────────────────────── */
--sk-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.20);
--sk-shadow-md: 0 4px 14px -4px rgba(0, 0, 0, 0.35);
--sk-shadow-lg: 0 18px 40px -16px rgba(0, 0, 0, 0.55);
--sk-shadow-xl: 0 32px 64px -24px rgba(0, 0, 0, 0.65);
--sk-shadow-ambient: 0 2px 10px -4px rgba(0, 0, 0, 0.30);
--sk-glow-brand: 0 0 36px -6px color-mix(in srgb, var(--sk-primary) 55%, transparent);
/* Ombre portée des titres posés à même le fond (lisibilité sur les halos).
Neutralisée en thème clair. */
--sk-title-shadow: 0 2px 18px rgba(4, 2, 18, 0.55);
/* ── Filets de marque ────────────────────────────────────────────────────── */
--sk-bar: linear-gradient(90deg, var(--sk-primary) 0%, var(--sk-violet) 100%);
--sk-bar-v: linear-gradient(180deg, var(--sk-primary) 0%, var(--sk-violet) 100%);
--sk-rule: linear-gradient(90deg, var(--sk-primary-light), var(--sk-gold));
--sk-cta: linear-gradient(135deg, var(--sk-primary), var(--sk-primary-light));
--sk-cta-over: linear-gradient(135deg, var(--sk-primary-dark), var(--sk-primary));
/* ── Mouvement ───────────────────────────────────────────────────────────── */
--sk-ease-silk: cubic-bezier(0.22, 1, 0.36, 1);
--sk-dur-fast: 150ms; --sk-dur: 250ms; --sk-dur-slow: 420ms;
/* ── Empilement ──────────────────────────────────────────────────────────── */
--sk-z-nav: 1020; --sk-z-backdrop: 1040; --sk-z-sidenav: 1045; --sk-z-modal: 2000;
}
/* ═════════════ THÈME CLAIR ══════════════════════════════════════════════════
Symétrie exacte du sombre, sens inverse : le menu reste PLUS CLAIR que la
page (le sombre fait l'inverse), et tout ce qui était éclairci vers --sk-paper
est ici assombri vers --sk-ink. */
[data-theme="light"] {
--sk-bg: var(--sk-cloud-page);
--sk-nav-bg: var(--sk-cloud-nav);
--sk-nav-bg-2: #EEF4FD;
--sk-text-primary: var(--sk-ink);
--sk-text-secondary: #2A3B52;
--sk-text-tertiary: #5A6B80;
--sk-text-mute: #78879B;
--sk-text-on-nav: #33455E;
/* Sur l'ivoire, le bleu de marque est déjà lisible : on descend d'un cran
pour lui donner de la présence, et le survol remonte vers la marque. */
--sk-accent: var(--sk-primary-dark);
--sk-accent-hover: var(--sk-primary);
/* L'or pur mesure ~1,7:1 sur du blanc : c'est la teinte qui souffre le plus
du passage au clair. 62 % vers l'encre lui rend du contraste sans le faire
virer au brun (dosage repris de PRESTKA --banner-warning). */
--sk-eyebrow: color-mix(in srgb, var(--sk-gold) 62%, var(--sk-ink));
--sk-line: rgba(10, 27, 51, 0.10);
--sk-line-strong: rgba(10, 27, 51, 0.20);
--sk-surface-tint: #FFFFFF;
--sk-surface-solid: #FFFFFF;
--sk-panel-bg: #FFFFFF;
--sk-ok-fg: var(--sk-ok);
--sk-warn-fg: var(--sk-warn);
--sk-danger-fg: var(--sk-danger);
--sk-glass-subtle-bg: rgba(255, 255, 255, 0.58);
--sk-glass-medium-bg: rgba(255, 255, 255, 0.74);
--sk-glass-strong-bg: rgba(255, 255, 255, 0.88);
--sk-glass-hero-bg: rgba(255, 255, 255, 0.40);
--sk-glass-subtle-border: rgba(10, 27, 51, 0.08);
--sk-glass-medium-border: rgba(10, 27, 51, 0.11);
--sk-glass-strong-border: rgba(10, 27, 51, 0.14);
--sk-glass-hero-border: rgba(212, 175, 55, 0.30);
--sk-glass-highlight: rgba(255, 255, 255, 0.90);
--sk-glass-sheen-top: rgba(255, 255, 255, 0.75);
--sk-glass-inner: inset 0 -22px 40px -30px rgba(10, 27, 51, 0.14);
--sk-glass-edge: inset 0 0 0 1px rgba(255, 255, 255, 0.60);
--sk-halo-1: color-mix(in srgb, var(--sk-primary) 12%, transparent);
--sk-halo-2: color-mix(in srgb, var(--sk-violet) 10%, transparent);
--sk-shadow-md: 0 4px 14px -4px rgba(10, 27, 51, 0.12);
--sk-shadow-lg: 0 18px 40px -18px rgba(10, 27, 51, 0.20);
--sk-shadow-xl: 0 32px 64px -26px rgba(10, 27, 51, 0.24);
--sk-shadow-ambient: 0 2px 10px -4px rgba(10, 27, 51, 0.10);
--sk-title-shadow: none;
}
/* =============================================================================
3. BASE
============================================================================= */
/* Posé sur : évite le flash blanc en surdéfilement et pendant que le
se résout. La classe/attribut data-theme est écrit par le stub
anti-FOUC de head_html, AVANT ce fichier. */
html {
background: var(--sk-bg);
transition: background var(--sk-dur) var(--sk-ease-silk);
}
/* Le portail = tout sauf /login. Le fond porte deux halos : sans eux, une carte
de verre teintée comme la page serait invisible.
PAS de `background-attachment:fixed` — pitfall perf documenté avec
backdrop-filter + artefacts de capture CDP. */
/* Les halos vivent sur un pseudo-element FIXE, pas sur le fond du body.
Sur le body, ils etaient dimensionnes en vw/vh mais peints sur la boite du
document : des que le contenu depassait la fenetre, on voyait la coupure du
degrade sur le bord droit (signale par le DG). Ancres a la fenetre, ils
couvrent toujours exactement l'ecran, quelle que soit la hauteur ou la largeur
du contenu. `background-attachment: fixed` aurait fait la meme chose mais est
deconseille ici (cout de composition avec les backdrop-filter des cartes). */
html body:not([data-path="login"])::before {
content: "";
position: fixed;
inset: 0;
z-index: -1;
pointer-events: none;
background:
radial-gradient(62vw 52vh at 10% -10%, var(--sk-halo-1), transparent 60%),
radial-gradient(52vw 46vh at 104% 104%, var(--sk-halo-2), transparent 58%),
var(--sk-bg);
}
html body:not([data-path="login"]) {
background: transparent;
color: var(--sk-text-primary);
font-family: var(--sk-sans);
min-height: 100vh;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
html body:not([data-path="login"]) .page-content-wrapper { background: transparent; }
/* ── Remappage des variables NATIVES de Frappe ───────────────────────────────
website.bundle.css declare ses propres variables (--control-bg, --text-color,
--border-color…) et les applique via des selecteurs tres specifiques, par
exemple `[data-doctype="Web Form"] .page-content-wrapper .container
.form-control` — soit (0,4,0), que nos regles de portail ne battent pas sans
surenchere d'`!important`.
On ne se bat donc pas sur les regles : on reprend les VARIABLES. Un seul bloc,
et tous les controles natifs (champs, listes, cartes, textes secondaires)
suivent le theme courant, dans les deux sens.
Scope `body:not([data-path=login])` : ni la page de connexion, ni le Desk
(head_html est website-only) ne sont touches. */
html body:not([data-path="login"]) {
--control-bg: var(--sk-glass-subtle-bg);
--control-bg-on-gray: var(--sk-glass-medium-bg);
--disabled-control-bg: color-mix(in srgb, var(--sk-text-mute) 18%, transparent);
--awesomplete-hover-bg: color-mix(in srgb, var(--sk-primary) 22%, transparent);
--text-color: var(--sk-text-primary);
--text-muted: var(--sk-text-tertiary);
--text-light: var(--sk-text-mute);
--heading-color: var(--sk-text-primary);
--border-color: var(--sk-line);
--dark-border-color: var(--sk-line-strong);
--bg-color: transparent;
--fg-color: transparent;
--card-bg: var(--sk-glass-medium-bg);
--subtle-accent: color-mix(in srgb, var(--sk-primary) 16%, transparent);
--shadow-base: var(--sk-shadow-md);
--input-disabled-bg: color-mix(in srgb, var(--sk-text-mute) 14%, transparent);
}
html body:not([data-path="login"]) ::selection {
background: var(--sk-primary); color: #fff;
}
html body:not([data-path="login"]) :focus-visible {
outline: 2px solid var(--sk-accent); outline-offset: 3px; border-radius: 3px;
}
/* Barres de défilement discrètes, accordées au thème */
html body:not([data-path="login"]) * { scrollbar-width: thin; scrollbar-color: var(--sk-line-strong) transparent; }
html body:not([data-path="login"]) ::-webkit-scrollbar { width: 11px; height: 11px; }
html body:not([data-path="login"]) ::-webkit-scrollbar-track { background: transparent; }
html body:not([data-path="login"]) ::-webkit-scrollbar-thumb {
background: var(--sk-line-strong); border-radius: var(--sk-radius-full);
border: 3px solid transparent; background-clip: padding-box;
}
html body:not([data-path="login"]) a { color: var(--sk-accent); }
html body:not([data-path="login"]) a:hover { color: var(--sk-accent-hover); }
/* =============================================================================
4. LOGIN — inchangé (hors périmètre du chantier), simplement dé-Googlisé
-----------------------------------------------------------------------------
La page de connexion n'a pas d'utilisateur : elle ne peut donc pas porter de
préférence de thème. Elle reste sur son identité bleu nuit d'origine.
============================================================================= */
html body[data-path="login"] { background: #0A1F3F !important; min-height: 100vh; }
html body[data-path="login"] .setka-login-hero { max-width: 400px; margin: 0 auto 26px; text-align: center; }
html body[data-path="login"] .setka-hero-logo { height: 84px; width: auto; filter: drop-shadow(0 8px 20px rgba(0,0,0,.4)); }
html body[data-path="login"] .setka-hero-line { width: 56px; height: 2px; background: var(--sk-gold); margin: 16px auto 12px; }
html body[data-path="login"] .setka-hero-tag {
font-family: var(--sk-mono); color: rgba(255,255,255,.62);
font-size: 12px; letter-spacing: .34em; text-transform: uppercase;
}
html body[data-path="login"] .page-card {
border: none !important; border-radius: var(--sk-radius-xl) !important;
box-shadow: 0 34px 90px rgba(0,0,0,.5) !important;
padding: 36px 36px 30px !important; background: #ffffff !important;
position: relative; overflow: hidden;
}
html body[data-path="login"] .page-card::before {
content: ""; position: absolute; top: 0; left: 0; right: 0; height: 4px; background: var(--sk-bar);
}
html body[data-path="login"] .page-card-head { border: none !important; padding: 0 0 6px !important; text-align: center; }
html body[data-path="login"] .page-card-head .app-logo { display: none !important; }
html body[data-path="login"] .page-card-head h4 { display: none !important; }
html body[data-path="login"] .page-card-head > div { font-family: var(--sk-sans); color: var(--sk-ink); }
html body[data-path="login"] .form-control { border-radius: 9px; border: 1px solid #E0DDD6; padding: 10px 12px; }
html body[data-path="login"] .form-control:focus { border-color: var(--sk-primary); box-shadow: 0 0 0 3px rgba(0,77,149,.13); }
html body[data-path="login"] .btn-login,
html body[data-path="login"] .btn-primary {
background: var(--sk-primary) !important; border-color: var(--sk-primary) !important;
border-radius: 9px; font-family: var(--sk-sans); letter-spacing: .03em; font-weight: 600; padding: 9px;
}
html body[data-path="login"] .btn-login:hover { background: var(--sk-primary-dark) !important; }
html body[data-path="login"] a { color: var(--sk-primary); }
html body[data-path="login"] .login-divider { color: #8A8698; }
html body[data-path="login"] .navbar,
html body[data-path="login"] .web-footer,
html body[data-path="login"] footer { display: none !important; }
html body[data-path="login"] .page_content,
html body[data-path="login"] main.container { padding-top: 0 !important; margin-top: 0 !important; }
/* =============================================================================
5. VERRE — 4 niveaux
-----------------------------------------------------------------------------
Transposition de PRESTKA glass.css. RÈGLE DE PLACEMENT (RF-1) : le
backdrop-filter ne va JAMAIS sur un grand conteneur — sur fond sombre avec
navbar sticky, Chrome déclenche un bug de recomposition au défilement (flash
d'un grand bloc de fond). Il est réservé aux CARTES FILLES, petites et
nombreuses. Le grand panneau utilise du verre SIMULÉ (§7).
============================================================================= */
.sk-glass-subtle, .sk-glass-medium, .sk-glass-strong, .sk-glass-hero {
position: relative;
border-radius: var(--sk-radius-xl);
isolation: isolate;
}
.sk-glass-subtle {
background: linear-gradient(180deg, var(--sk-glass-sheen-top), transparent 32%), var(--sk-glass-subtle-bg);
-webkit-backdrop-filter: blur(var(--sk-glass-subtle-blur)) saturate(var(--sk-glass-subtle-sat));
backdrop-filter: blur(var(--sk-glass-subtle-blur)) saturate(var(--sk-glass-subtle-sat));
border: 1px solid var(--sk-glass-subtle-border);
box-shadow: var(--sk-shadow-md), var(--sk-shadow-ambient),
inset 0 1px 0 var(--sk-glass-highlight), var(--sk-glass-edge), var(--sk-glass-inner);
}
.sk-glass-medium {
background: linear-gradient(180deg, var(--sk-glass-sheen-top), transparent 30%), var(--sk-glass-medium-bg);
-webkit-backdrop-filter: blur(var(--sk-glass-medium-blur)) saturate(var(--sk-glass-medium-sat));
backdrop-filter: blur(var(--sk-glass-medium-blur)) saturate(var(--sk-glass-medium-sat));
border: 1px solid var(--sk-glass-medium-border);
box-shadow: var(--sk-shadow-lg), var(--sk-shadow-ambient),
inset 0 1px 0 var(--sk-glass-highlight), var(--sk-glass-edge), var(--sk-glass-inner);
}
.sk-glass-strong {
background: linear-gradient(180deg, var(--sk-glass-sheen-top), transparent 28%), var(--sk-glass-strong-bg);
-webkit-backdrop-filter: blur(var(--sk-glass-strong-blur)) saturate(var(--sk-glass-strong-sat));
backdrop-filter: blur(var(--sk-glass-strong-blur)) saturate(var(--sk-glass-strong-sat));
border: 1px solid var(--sk-glass-strong-border);
box-shadow: var(--sk-shadow-xl), var(--sk-shadow-ambient),
inset 0 1px 0 var(--sk-glass-highlight), var(--sk-glass-edge), var(--sk-glass-inner);
}
.sk-glass-hero {
background: linear-gradient(180deg, var(--sk-glass-sheen-top), transparent 34%), var(--sk-glass-hero-bg);
-webkit-backdrop-filter: blur(var(--sk-glass-hero-blur)) saturate(var(--sk-glass-hero-sat));
backdrop-filter: blur(var(--sk-glass-hero-blur)) saturate(var(--sk-glass-hero-sat));
border: 1px solid var(--sk-glass-hero-border);
box-shadow: var(--sk-shadow-xl), var(--sk-glow-brand), var(--sk-shadow-ambient),
inset 0 1px 0 var(--sk-glass-highlight), var(--sk-glass-edge), var(--sk-glass-inner);
}
/* Liseré spéculaire haut — la lumière qui glisse sur l'arête du verre */
.sk-glass-subtle::after, .sk-glass-medium::after,
.sk-glass-strong::after, .sk-glass-hero::after {
content: ""; position: absolute; inset: 0;
border-radius: inherit;
background: linear-gradient(180deg, var(--sk-glass-highlight), transparent 35%);
-webkit-mask: linear-gradient(#000, transparent 40%);
mask: linear-gradient(#000, transparent 40%);
pointer-events: none;
z-index: -1;
}
/* Repli sans backdrop-filter (Firefox anciens, GPU désactivé) : surface dense,
la lisibilité prime sur l'effet. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
.sk-glass-subtle { background: color-mix(in srgb, var(--sk-surface-solid) 88%, transparent); }
.sk-glass-medium { background: color-mix(in srgb, var(--sk-surface-solid) 94%, transparent); }
.sk-glass-strong,
.sk-glass-hero { background: var(--sk-surface-solid); }
}
/* =============================================================================
6. CHROME — navbar, fil d'Ariane, menu latéral, pied, modale de thème
============================================================================= */
/* ── Navbar ───────────────────────────────────────────────────────────────────
AUCUN backdrop-filter ici : c'est la combinaison « blur + position:sticky »
qui provoquait le bug de recomposition (RF-1). Surface pleine. */
html body:not([data-path="login"]) .navbar {
background: var(--sk-nav-bg) !important;
border-bottom: 1px solid var(--sk-line);
box-shadow: var(--sk-shadow-md);
position: sticky; top: 0; z-index: var(--sk-z-nav);
}
html body:not([data-path="login"]) .navbar-brand img { content: url("/files/setka_logo_clair.png"); height: 34px; width: auto; }
/* Certaines pages (Web Form) rendent la marque en TEXTE et non en logo.
Ciblé sur .navbar-brand seul — `.navbar a` casserait les items du menu. */
html body:not([data-path="login"]) .navbar-brand,
html body:not([data-path="login"]) .navbar-brand span { color: var(--sk-text-primary) !important; }
html body:not([data-path="login"]) .navbar .nav-link,
html body:not([data-path="login"]) .navbar .dropdown-toggle,
html body:not([data-path="login"]) .navbar .navbar-nav .nav-item > a {
font-family: var(--sk-sans); color: var(--sk-text-on-nav) !important; font-weight: 500;
}
html body:not([data-path="login"]) .navbar .nav-link:hover { color: var(--sk-text-primary) !important; }
html body:not([data-path="login"]) .navbar-toggler { border-color: var(--sk-line-strong); }
html body:not([data-path="login"]) .navbar-toggler .icon { stroke: var(--sk-text-primary); }
/* Menu déroulant de l'avatar (accueille l'entrée « Thème », cf. §6.5) */
html body:not([data-path="login"]) .navbar .dropdown-menu {
background: var(--sk-surface-solid);
border: 1px solid var(--sk-line);
border-radius: var(--sk-radius-lg);
box-shadow: var(--sk-shadow-lg);
padding: 6px;
}
html body:not([data-path="login"]) .navbar .dropdown-menu .dropdown-item {
color: var(--sk-text-secondary); border-radius: var(--sk-radius-sm);
font-family: var(--sk-sans); font-size: var(--sk-text-sm); padding: 8px 12px;
display: flex; align-items: center; gap: 9px;
}
html body:not([data-path="login"]) .navbar .dropdown-menu .dropdown-item:hover {
background: color-mix(in srgb, var(--sk-primary) 18%, transparent);
color: var(--sk-text-primary);
}
html body:not([data-path="login"]) .navbar .dropdown-menu .dropdown-item svg { width: 15px; height: 15px; flex: 0 0 auto; opacity: .8; }
/* ── Fil d'Ariane ─────────────────────────────────────────────────────────── */
html body:not([data-path="login"]) .page-breadcrumbs { margin: 18px 2px 0; }
html body:not([data-path="login"]) .page-breadcrumbs,
html body:not([data-path="login"]) .page-breadcrumbs a,
html body:not([data-path="login"]) .page-breadcrumbs li,
html body:not([data-path="login"]) .page-breadcrumbs .breadcrumb-item {
color: var(--sk-text-tertiary) !important;
font-family: var(--sk-mono); font-size: 11px; letter-spacing: .05em;
}
html body:not([data-path="login"]) .page-breadcrumbs a:hover { color: var(--sk-text-primary) !important; }
/* ── Menu latéral ─────────────────────────────────────────────────────────── */
.setka-sidenav {
position: fixed; top: 0; left: 0; bottom: 0; width: 244px; z-index: var(--sk-z-sidenav);
display: flex; flex-direction: column;
background: linear-gradient(180deg, var(--sk-nav-bg) 0%, var(--sk-nav-bg-2) 100%);
border-right: 1px solid var(--sk-line);
overflow-y: auto; overflow-x: hidden;
font-family: var(--sk-sans);
/* `width` est VOLONTAIREMENT absent de la transition : animer une largeur
force un recalcul de mise en page a chaque image. Le repli est donc
instantane, ce qui est de toute facon le comportement attendu d'un rail.
`transform` (tiroir mobile) et `background` (bascule de theme) restent
animes : ce sont des proprietes composees, sans cout de mise en page.
NOTE DE RECETTE (2026-08-06) — ne pas se laisser piéger : dans un
navigateur pilote par CDP, la boucle d'images est GELEE (requestAnimationFrame
ne se declenche jamais, verifie). Toute propriete en transition y reste donc
bloquee sur sa valeur de depart, au rendu comme a la mesure : le rail
semblait rester a 244 px et le tiroir mobile a -252 px. Neutraliser la
transition ramenait immediatement 66 px et 0. Ce ne sont PAS des defauts du
CSS. Pour verifier une animation, il faut un navigateur reel et focalise. */
transition: transform var(--sk-dur) var(--sk-ease-silk),
background var(--sk-dur) var(--sk-ease-silk);
}
.setka-sidenav .brand { padding: 22px 22px 16px; display: flex; justify-content: center; align-items: center; }
.setka-sidenav .brand img {
height: 46px; width: auto; max-width: 100%; object-fit: contain;
filter: drop-shadow(0 6px 16px rgba(0, 0, 0, .35));
transition: height var(--sk-dur-fast) var(--sk-ease-silk), width var(--sk-dur-fast) var(--sk-ease-silk);
}
/* Le logo monté est la version CLAIRE (pensée pour un fond sombre). En thème
clair on ne l'inverse PAS — un logo inversé n'est plus la marque : on sert le
logo officiel en couleurs, qui existe déjà dans les fichiers du site.
`content: url()` sur une ![]()
est la même technique que pour .navbar-brand. */
[data-theme="light"] .setka-sidenav .brand img {
content: url("/files/setka_logo.png");
filter: none;
}
.setka-sidenav .menu { display: flex; flex-direction: column; padding: 4px 0; }
.setka-sidenav .grp {
font-family: var(--sk-mono); font-size: 9px; letter-spacing: .2em; text-transform: uppercase;
color: var(--sk-eyebrow); padding: 16px 24px 6px; white-space: nowrap;
}
.setka-sidenav a.nav {
display: flex; align-items: center; gap: 12px; margin: 2px 12px; padding: 10px 14px;
border-radius: var(--sk-radius-lg);
color: var(--sk-text-on-nav); text-decoration: none; font-weight: 500; font-size: 14px;
white-space: nowrap; overflow: hidden;
transition: background var(--sk-dur-fast), color var(--sk-dur-fast);
}
.setka-sidenav a.nav .i {
width: 22px; height: 22px; display: inline-flex; align-items: center; justify-content: center;
flex: 0 0 auto; opacity: .9;
}
.setka-sidenav a.nav .i svg { width: 19px; height: 19px; }
.setka-sidenav a.nav:hover {
background: color-mix(in srgb, var(--sk-primary) 22%, transparent);
color: var(--sk-text-primary);
}
.setka-sidenav a.nav.active {
background: linear-gradient(135deg, var(--sk-primary), var(--sk-violet));
color: #fff; box-shadow: 0 8px 20px -6px color-mix(in srgb, var(--sk-primary) 75%, transparent);
}
.setka-sidenav a.nav.active .i { opacity: 1; }
.setka-sidenav .spacer { flex: 1 1 auto; }
.setka-sidenav .foot {
padding: 14px 24px; font-family: var(--sk-mono); font-size: 9px; letter-spacing: .14em;
text-transform: uppercase; color: var(--sk-text-mute);
border-top: 1px solid var(--sk-line); white-space: nowrap;
}
/* Bouton de repli — LOT 1 : en BAS du menu, centré, chevron < / > (maquette). */
.sk-nav-toggle {
display: flex; align-items: center; justify-content: center; gap: 8px;
margin: 10px 12px; padding: 9px 12px;
background: color-mix(in srgb, var(--sk-primary) 16%, transparent);
border: 1px dashed var(--sk-line-strong);
border-radius: var(--sk-radius-full);
color: var(--sk-text-on-nav); cursor: pointer;
font-family: var(--sk-mono); font-size: 10px; letter-spacing: var(--sk-tracking-caps); text-transform: uppercase;
transition: background var(--sk-dur-fast), color var(--sk-dur-fast), border-color var(--sk-dur-fast);
}
.sk-nav-toggle:hover {
background: color-mix(in srgb, var(--sk-primary) 30%, transparent);
border-color: var(--sk-accent); color: var(--sk-text-primary);
}
.sk-nav-toggle svg { width: 14px; height: 14px; stroke: currentColor; fill: none; flex: 0 0 auto; }
.sk-nav-toggle .lbl { white-space: nowrap; }
/* Chevron : `<` quand le menu est déployé (action = replier), `>` une fois replié. */
.sk-nav-toggle .ico-close { display: inline-flex; }
.sk-nav-toggle .ico-open { display: none; }
html.sk-collapsed .sk-nav-toggle .ico-close { display: none; }
html.sk-collapsed .sk-nav-toggle .ico-open { display: inline-flex; }
.sk-backdrop { position: fixed; inset: 0; background: rgba(4, 2, 18, .6); z-index: var(--sk-z-backdrop); display: none; }
@media (min-width: 801px) {
html.setka-has-sidenav body:not([data-path="login"]) { padding-left: 244px; }
html.setka-has-sidenav.sk-collapsed body:not([data-path="login"]) { padding-left: 66px; }
html.setka-has-sidenav body:not([data-path="login"]) .web-sidebar { display: none !important; }
html.setka-has-sidenav body:not([data-path="login"]) .navbar .navbar-brand { display: none !important; }
/* `width: auto` est indispensable : Bootstrap donne `width:100%` a
`.container`, et un element en 100 % de son bloc conteneur AUXQUELLES on
ajoute des marges laterales deborde d'autant. Mesure : 6 px de
defilement horizontal parasite sur toutes les pages natives. */
html.setka-has-sidenav body:not([data-path="login"]) main.container,
html.setka-has-sidenav body:not([data-path="login"]) .sk-wrap {
width: auto;
margin-left: 30px !important; margin-right: 30px !important;
max-width: 1180px;
}
html.setka-has-sidenav body:not([data-path="login"]) .page-breadcrumbs { margin-left: 30px; }
/* État RÉDUIT = rail d'icônes de 66 px */
html.sk-collapsed .setka-sidenav { width: 66px; }
html.sk-collapsed .setka-sidenav .t,
html.sk-collapsed .setka-sidenav .grp,
html.sk-collapsed .setka-sidenav .foot,
html.sk-collapsed .sk-nav-toggle .lbl { display: none; }
html.sk-collapsed .setka-sidenav .brand { padding: 16px 6px 12px; }
html.sk-collapsed .setka-sidenav .brand img { height: auto; width: 38px; }
html.sk-collapsed .setka-sidenav a.nav { justify-content: center; margin: 2px 10px; padding: 10px 0; }
html.sk-collapsed .sk-nav-toggle { margin: 10px 10px; padding: 9px 0; }
.sk-backdrop { display: none !important; }
}
/* ── Pied de page ─────────────────────────────────────────────────────────── */
html body:not([data-path="login"]) .web-footer {
background: transparent; border-top: 1px solid var(--sk-line);
color: var(--sk-text-tertiary); margin-top: 26px; font-family: var(--sk-sans);
}
html body:not([data-path="login"]) .web-footer a { color: var(--sk-text-secondary); }
html body:not([data-path="login"]) .web-footer a:hover { color: var(--sk-text-primary); }
html body:not([data-path="login"]) .web-footer .footer-powered { display: none !important; }
/* ── Modale de sélection du thème ─────────────────────────────────────────────
Recréée intégralement : `frappe.ui.ThemeSwitcher` est une classe du DESK et
n'existe pas côté portail (RF-2). On n'en reprend que l'ergonomie. */
.sk-theme-bg {
position: fixed; inset: 0; background: rgba(4, 2, 18, .72);
z-index: var(--sk-z-modal); display: none; align-items: center; justify-content: center; padding: 20px;
}
.sk-theme-bg.open { display: flex; }
.sk-theme-modal { max-width: 460px; width: 100%; padding: 26px; animation: sk-pop .18s var(--sk-ease-silk); }
.sk-theme-modal .hd { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 4px; }
.sk-theme-modal h3 {
font-family: var(--sk-serif); font-style: italic; font-weight: 400; font-size: var(--sk-text-xl);
color: var(--sk-text-primary); margin: 0;
}
.sk-theme-modal .x {
background: none; border: none; font-size: 1.5rem; line-height: 1;
color: var(--sk-text-tertiary); cursor: pointer; padding: 0 2px;
}
.sk-theme-modal .x:hover { color: var(--sk-text-primary); }
.sk-theme-modal .lead {
font-family: var(--sk-mono); font-size: var(--sk-text-xs); letter-spacing: var(--sk-tracking-caps);
text-transform: uppercase; color: var(--sk-eyebrow); margin: 0 0 6px;
}
.sk-theme-modal .sub { font-family: var(--sk-sans); font-size: 13.5px; color: var(--sk-text-tertiary); margin: 0 0 18px; }
.sk-theme-opts { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
@media (max-width: 520px) { .sk-theme-opts { grid-template-columns: 1fr; } }
.sk-theme-opt {
display: flex; flex-direction: column; gap: 10px; padding: 12px;
background: transparent; border: 1px solid var(--sk-line);
border-radius: var(--sk-radius-lg); cursor: pointer; text-align: left;
font-family: var(--sk-sans); color: var(--sk-text-secondary);
transition: border-color var(--sk-dur-fast), background var(--sk-dur-fast), transform var(--sk-dur-fast);
}
.sk-theme-opt:hover { transform: translateY(-2px); border-color: var(--sk-accent); }
.sk-theme-opt[aria-checked="true"] {
border-color: var(--sk-accent);
background: color-mix(in srgb, var(--sk-primary) 16%, transparent);
color: var(--sk-text-primary);
}
/* Vignette d'aperçu : miniature fidèle « menu + page + carte » de chaque thème.
Valeurs littérales assumées — une vignette doit montrer le thème qu'elle
représente, pas celui qui est actif. */
.sk-theme-opt .prev {
height: 62px; border-radius: var(--sk-radius-md); overflow: hidden;
display: flex; border: 1px solid var(--sk-line);
}
.sk-theme-opt .prev i { display: block; height: 100%; }
.sk-theme-opt .prev .m { width: 26%; }
.sk-theme-opt .prev .p { width: 74%; position: relative; }
.sk-theme-opt .prev .p::after {
content: ""; position: absolute; left: 10%; right: 18%; top: 26%; height: 42%;
border-radius: 4px; border: 1px solid rgba(127, 127, 127, .35);
}
.sk-theme-opt[data-theme-value="dark"] .prev .m { background: #06011a; }
.sk-theme-opt[data-theme-value="dark"] .prev .p { background: #08042B; }
.sk-theme-opt[data-theme-value="dark"] .prev .p::after { background: rgba(255, 255, 255, .10); }
.sk-theme-opt[data-theme-value="light"] .prev .m { background: #F8FBFF; }
.sk-theme-opt[data-theme-value="light"] .prev .p { background: #E9F0FA; }
.sk-theme-opt[data-theme-value="light"] .prev .p::after { background: rgba(255, 255, 255, .92); }
.sk-theme-opt .nm { display: flex; align-items: center; gap: 7px; font-weight: 600; font-size: 13.5px; }
.sk-theme-opt .nm svg { width: 15px; height: 15px; stroke: currentColor; fill: none; flex: 0 0 auto; }
.sk-theme-opt .ds {
font-family: var(--sk-mono); font-size: 10px; letter-spacing: var(--sk-tracking-wide);
text-transform: uppercase; color: var(--sk-text-mute);
}
/* =============================================================================
7. CONTENU NATIF FRAPPE (listes, pages détail, web forms, /me)
============================================================================= */
/* Le grand panneau de contenu. Verre SIMULÉ : dégradé semi-opaque + hairline,
SANS backdrop-filter (RF-1, parade 3). Il ne subsiste que sur les pages
DÉTAIL rendues par Frappe, où le texte a besoin d'une surface porteuse. */
html body:not([data-path="login"]) main.container {
background: linear-gradient(180deg, var(--sk-glass-sheen-top), transparent 24%), var(--sk-panel-bg);
border: 1px solid var(--sk-line);
border-radius: var(--sk-radius-2xl);
box-shadow: var(--sk-shadow-lg), inset 0 1px 0 var(--sk-glass-highlight);
padding: 36px 40px 30px;
position: relative; overflow: hidden;
margin-top: 22px; margin-bottom: 36px;
color: var(--sk-text-primary);
}
html body:not([data-path="login"]) main.container::before {
content: ""; position: absolute; top: 0; left: 0; right: 0; height: 4px; background: var(--sk-bar);
}
/* Pages où le panneau ne doit PAS exister : listes natives, états vides, web
forms, et NOS pages (marquées par .sk-wrap / .dc-wrap / .ap-wrap / …).
RF-4 : ces exceptions utilisent :has() (Chrome 105+). Toute nouvelle règle de
fond sur main.container doit composer avec elles, sinon le panneau réapparaît. */
html body:not([data-path="login"]) main.container:has(.website-list),
html body:not([data-path="login"]) main.container:has(.empty-apps-state),
html body:not([data-path="login"]) main.container:has(.web-form-wrapper),
html body:not([data-path="login"]) main.container:has(.sk-page),
html body:not([data-path="login"]) main.container:has(.sk-wrap),
html body:not([data-path="login"]) main.container:has(.dc-wrap),
html body:not([data-path="login"]) main.container:has(.ap-wrap),
html body:not([data-path="login"]) main.container:has(.nw-wrap),
html body:not([data-path="login"]) main.container:has(.pf-wrap),
html body:not([data-path="login"]) main.container:has(.setka-cat-wrap) {
background: none !important;
border: none !important;
box-shadow: none !important;
padding: 6px 0 0 !important;
overflow: visible;
}
html body:not([data-path="login"]) main.container:has(.website-list)::before,
html body:not([data-path="login"]) main.container:has(.empty-apps-state)::before,
html body:not([data-path="login"]) main.container:has(.web-form-wrapper)::before,
html body:not([data-path="login"]) main.container:has(.sk-page)::before,
html body:not([data-path="login"]) main.container:has(.sk-wrap)::before,
html body:not([data-path="login"]) main.container:has(.dc-wrap)::before,
html body:not([data-path="login"]) main.container:has(.ap-wrap)::before,
html body:not([data-path="login"]) main.container:has(.nw-wrap)::before,
html body:not([data-path="login"]) main.container:has(.pf-wrap)::before,
html body:not([data-path="login"]) main.container:has(.setka-cat-wrap)::before { display: none !important; }
html body:not([data-path="login"]) main.container:has(.website-list) .page-header,
html body:not([data-path="login"]) main.container:has(.website-list) .my-account-header,
html body:not([data-path="login"]) main.container:has(.empty-apps-state) .page-header,
html body:not([data-path="login"]) main.container:has(.web-form-wrapper) .page-header,
html body:not([data-path="login"]) main.container:has(.sk-page) .page-header,
html body:not([data-path="login"]) main.container:has(.sk-wrap) .page-header,
html body:not([data-path="login"]) main.container:has(.dc-wrap) .page-header,
html body:not([data-path="login"]) main.container:has(.ap-wrap) .page-header,
html body:not([data-path="login"]) main.container:has(.nw-wrap) .page-header,
html body:not([data-path="login"]) main.container:has(.pf-wrap) .page-header,
html body:not([data-path="login"]) main.container:has(.setka-cat-wrap) .page-header { display: none !important; }
/* La colonne latérale native (col-sm-2), vidée par notre menu, laissait un trou */
html.setka-has-sidenav body:not([data-path="login"]) .main-column { flex: 0 0 100% !important; max-width: 100% !important; }
html.setka-has-sidenav body:not([data-path="login"]) .row > div:has(> .web-sidebar) { display: none !important; }
/* ── Typographie éditoriale ───────────────────────────────────────────────── */
/* h4/h5/h6 inclus : le titre « Tâches » de la page de detail d'un projet est un
auquel Frappe pose `color:#171717` — il etait bleu nuit sur bleu nuit,
donc invisible (signale par le DG). */
html body:not([data-path="login"]) h1,
html body:not([data-path="login"]) h2,
html body:not([data-path="login"]) h3,
html body:not([data-path="login"]) h4,
html body:not([data-path="login"]) h5,
html body:not([data-path="login"]) h6,
html body:not([data-path="login"]) .my-account-header h4,
html body:not([data-path="login"]) .page-header,
html body:not([data-path="login"]) .my-account-header {
font-family: var(--sk-serif) !important; font-style: italic;
color: var(--sk-text-primary); font-weight: 400; letter-spacing: .005em;
}
/* Instrument Serif italique rend petit → titres du portail agrandis */
html body:not([data-path="login"]) .page-header { font-size: var(--sk-text-3xl); line-height: 1.15; margin-bottom: 4px; }
html body:not([data-path="login"]) .my-account-header { font-size: var(--sk-text-3xl); line-height: 1.15; margin-bottom: 20px; }
html body:not([data-path="login"]) .website-list h1,
html body:not([data-path="login"]) main.container > h1,
html body:not([data-path="login"]) .page_content > h1 { font-size: var(--sk-text-3xl); line-height: 1.15; }
html body:not([data-path="login"]) h4.text-muted,
html body:not([data-path="login"]) .sub-title {
font-family: var(--sk-mono); font-size: 11px; letter-spacing: .16em;
text-transform: uppercase; color: var(--sk-eyebrow) !important;
}
html body:not([data-path="login"]) .text-muted { color: var(--sk-text-tertiary) !important; }
html body:not([data-path="login"]) main.container p,
html body:not([data-path="login"]) main.container li,
html body:not([data-path="login"]) main.container td,
html body:not([data-path="login"]) main.container th,
html body:not([data-path="login"]) main.container label,
html body:not([data-path="login"]) main.container dd,
html body:not([data-path="login"]) main.container dt { color: var(--sk-text-secondary); }
html body:not([data-path="login"]) main.container table { border-color: var(--sk-line); }
html body:not([data-path="login"]) main.container td,
html body:not([data-path="login"]) main.container th { border-color: var(--sk-line) !important; }
/* ── En-tête de page injecté (lead mono doré + titre serif + filet + résumé) ── */
.sk-phead { margin: 4px 0 20px; }
.sk-phead .lead {
font-family: var(--sk-mono); font-size: 11px; letter-spacing: .18em;
text-transform: uppercase; color: var(--sk-eyebrow); margin: 0 0 6px;
}
.sk-phead .ttl {
font-family: var(--sk-serif); font-style: italic; font-weight: 400;
font-size: var(--sk-text-3xl); line-height: 1.12;
color: var(--sk-text-primary); margin: 0; text-shadow: var(--sk-title-shadow);
}
.sk-phead .ttl::after {
content: ""; display: block; width: 44px; height: 2px; margin-top: 10px;
background: var(--sk-rule); border-radius: 2px;
}
.sk-phead .sub {
font-family: var(--sk-sans); color: var(--sk-text-tertiary);
font-size: 15px; line-height: 1.55; max-width: 660px; margin: 12px 0 0;
}
/* ── Rangées natives → cartes de verre ────────────────────────────────────── */
html body:not([data-path="login"]) .website-list .result { margin-top: 2px; display: flex; flex-direction: column; gap: 14px; }
/* Le conteneur de liste natif porte un fond blanc dans website.bundle.css :
il doit redevenir transparent, sinon les cartes de verre flottent sur un
grand aplat blanc (constate sur /invoices). */
html body:not([data-path="login"]) .website-list,
html body:not([data-path="login"]) .website-list .result,
html body:not([data-path="login"]) .transaction-list-item { background: transparent; }
html body:not([data-path="login"]) .web-list-item {
position: relative; overflow: hidden;
border-radius: var(--sk-radius-xl); padding: 18px 22px; margin: 0;
/* Le verre : meme recette que les cartes de page (§8). */
background: linear-gradient(180deg, var(--sk-glass-sheen-top), transparent 30%), var(--sk-glass-medium-bg);
-webkit-backdrop-filter: blur(var(--sk-glass-medium-blur)) saturate(var(--sk-glass-medium-sat));
backdrop-filter: blur(var(--sk-glass-medium-blur)) saturate(var(--sk-glass-medium-sat));
border: 1px solid var(--sk-glass-medium-border);
box-shadow: var(--sk-shadow-lg), var(--sk-shadow-ambient),
inset 0 1px 0 var(--sk-glass-highlight), var(--sk-glass-edge), var(--sk-glass-inner);
color: var(--sk-text-secondary);
transition: transform var(--sk-dur-fast) var(--sk-ease-silk), box-shadow var(--sk-dur-fast) var(--sk-ease-silk);
animation: sk-rise var(--sk-dur-slow) var(--sk-ease-silk) both;
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
html body:not([data-path="login"]) .web-list-item {
background: color-mix(in srgb, var(--sk-surface-solid) 94%, transparent);
}
}
html body:not([data-path="login"]) .web-list-item::before {
content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: var(--sk-bar); z-index: 1;
}
html body:not([data-path="login"]) .web-list-item:hover {
transform: translateY(-2px);
box-shadow: var(--sk-shadow-xl), var(--sk-glow-brand), inset 0 1px 0 var(--sk-glass-highlight);
}
html body:not([data-path="login"]) .web-list-item:nth-child(2) { animation-delay: .05s; }
html body:not([data-path="login"]) .web-list-item:nth-child(3) { animation-delay: .09s; }
html body:not([data-path="login"]) .web-list-item:nth-child(4) { animation-delay: .13s; }
html body:not([data-path="login"]) .web-list-item:nth-child(5) { animation-delay: .17s; }
html body:not([data-path="login"]) .web-list-item:nth-child(6) { animation-delay: .21s; }
html body:not([data-path="login"]) .web-list-item:nth-child(n+7) { animation-delay: .25s; }
@keyframes sk-rise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes sk-pop { from { transform: translateY(8px) scale(.98); opacity: .6; } to { transform: none; opacity: 1; } }
html body:not([data-path="login"]) .transaction-list-item .list-item-name {
font-family: var(--sk-sans); font-weight: 600; color: var(--sk-text-primary); font-size: 15px;
}
html body:not([data-path="login"]) .transaction-list-item .transaction-time,
html body:not([data-path="login"]) .transaction-list-item .items-preview {
font-family: var(--sk-mono); font-size: 11px; color: var(--sk-text-mute); letter-spacing: .02em;
}
html body:not([data-path="login"]) .transaction-list-item .item-total {
font-family: var(--sk-mono); font-weight: 600; color: var(--sk-accent);
font-variant-numeric: tabular-nums; font-size: 15px;
}
html body:not([data-path="login"]) .indicator-pill {
font-family: var(--sk-mono); font-size: 10px; letter-spacing: .05em; text-transform: uppercase;
font-weight: 500; padding: 4px 11px; border-radius: var(--sk-radius-full);
}
html body:not([data-path="login"]) .btn-more {
background: var(--sk-glass-subtle-bg) !important;
border: 1px solid var(--sk-line-strong) !important;
color: var(--sk-accent) !important; border-radius: var(--sk-radius-md);
font-family: var(--sk-mono); font-size: 11px; letter-spacing: .09em; text-transform: uppercase; font-weight: 500;
}
/* ── Web Form (ouvrir un ticket / nouvelle demande) ───────────────────────── */
html body:not([data-path="login"]) .web-form-wrapper {
position: relative; overflow: hidden;
border-radius: var(--sk-radius-xl); padding: 30px 32px 26px; margin-top: 2px;
background: linear-gradient(180deg, var(--sk-glass-sheen-top), transparent 28%), var(--sk-glass-medium-bg);
-webkit-backdrop-filter: blur(var(--sk-glass-medium-blur)) saturate(var(--sk-glass-medium-sat));
backdrop-filter: blur(var(--sk-glass-medium-blur)) saturate(var(--sk-glass-medium-sat));
border: 1px solid var(--sk-glass-medium-border);
box-shadow: var(--sk-shadow-lg), var(--sk-shadow-ambient),
inset 0 1px 0 var(--sk-glass-highlight), var(--sk-glass-edge), var(--sk-glass-inner);
color: var(--sk-text-secondary);
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
html body:not([data-path="login"]) .web-form-wrapper {
background: color-mix(in srgb, var(--sk-surface-solid) 94%, transparent);
}
}
html body:not([data-path="login"]) .web-form-wrapper::before {
content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: var(--sk-bar); z-index: 1;
}
html body:not([data-path="login"]) .web-form-wrapper,
html body:not([data-path="login"]) .web-form-wrapper * { font-family: var(--sk-sans); }
/* ── LOTs 7 & 9 — le formulaire de demande de commande ───────────────────────
Mesure du 2026-08-06 : le blanc ne venait PAS de `.web-form-wrapper` mais de
trois autres blocs — `.web-form-header`, `form.web-form` et `.success-page`
(l'ecran de validation, masque tant que le formulaire n'est pas envoye).
C'est ce dernier qui repond au LOT 7.5 « page de validation : fond bleu ». */
html body:not([data-path="login"]) .web-form-header,
html body:not([data-path="login"]) form.web-form,
html body:not([data-path="login"]) .success-page {
background: linear-gradient(180deg, var(--sk-glass-sheen-top), transparent 28%), var(--sk-glass-medium-bg) !important;
-webkit-backdrop-filter: blur(var(--sk-glass-medium-blur)) saturate(var(--sk-glass-medium-sat));
backdrop-filter: blur(var(--sk-glass-medium-blur)) saturate(var(--sk-glass-medium-sat));
border: 1px solid var(--sk-glass-medium-border) !important;
border-radius: var(--sk-radius-xl) !important;
box-shadow: var(--sk-shadow-lg), inset 0 1px 0 var(--sk-glass-highlight) !important;
color: var(--sk-text-secondary) !important;
}
html body:not([data-path="login"]) .web-form-header { margin-bottom: var(--sk-space-4); padding: 22px 26px !important; }
html body:not([data-path="login"]) form.web-form { padding: 24px 26px !important; }
html body:not([data-path="login"]) .success-page { padding: 40px 26px !important; text-align: center; }
html body:not([data-path="login"]) .success-title,
html body:not([data-path="login"]) .success-message {
color: var(--sk-text-primary) !important; font-family: var(--sk-serif); font-style: italic;
}
html body:not([data-path="login"]) .success-message { font-family: var(--sk-sans); font-style: normal; color: var(--sk-text-secondary) !important; }
html body:not([data-path="login"]) .success-icon { color: var(--sk-ok-fg); fill: currentColor; width: 44px; height: 44px; }
/* Titre du formulaire : serif italique, aligne a GAUCHE (demande DG). Le
libelle lui-meme est corrige en JS — Frappe compose `_("New {0}")`, et la
traduction francaise donne « Nouveau Demande de commande ». */
html body:not([data-path="login"]) .web-form-title h1,
html body:not([data-path="login"]) .web-form-head .title h1 {
font-family: var(--sk-serif) !important; font-style: italic; font-weight: 400;
font-size: var(--sk-text-xl); line-height: 1.2;
color: var(--sk-text-primary) !important; text-align: left !important; margin: 0;
}
html body:not([data-path="login"]) .web-form-head .title { justify-content: flex-start; gap: var(--sk-space-3); }
html body:not([data-path="login"]) .web-form-introduction { color: var(--sk-text-tertiary) !important; margin-top: var(--sk-space-2); }
html body:not([data-path="login"]) .web-form-header .indicator-pill.orange {
background: color-mix(in srgb, var(--sk-warn) 20%, transparent);
color: var(--sk-warn-fg); border: 1px solid color-mix(in srgb, var(--sk-warn) 34%, transparent);
}
html body:not([data-path="login"]) .web-form .form-section,
html body:not([data-path="login"]) .web-form .section-body,
html body:not([data-path="login"]) .web-form .form-column { background: transparent !important; }
html body:not([data-path="login"]) .web-form .page-footer,
html body:not([data-path="login"]) .web-form-container .page-footer { background: transparent !important; }
/* LOT 7.4 — encart de la photo de l'offre, injecte par setka-portail.js */
.sk-offre-visuel {
display: flex; gap: var(--sk-space-4); align-items: center;
margin: 0 0 var(--sk-space-4); padding: var(--sk-space-3) var(--sk-space-4);
border-radius: var(--sk-radius-lg);
background: var(--sk-glass-subtle-bg); border: 1px solid var(--sk-line);
}
.sk-offre-visuel img {
width: 88px; height: 88px; object-fit: cover; flex: 0 0 auto;
border-radius: var(--sk-radius-md); border: 1px solid var(--sk-line-strong); background: var(--sk-surface-solid);
}
.sk-offre-visuel .sk-offre-vide {
width: 88px; height: 88px; flex: 0 0 auto; display: grid; place-items: center;
border-radius: var(--sk-radius-md); border: 1px dashed var(--sk-line-strong);
color: var(--sk-text-mute); font-family: var(--sk-mono); font-size: 9px;
text-align: center; text-transform: uppercase; letter-spacing: .08em; padding: 6px;
}
.sk-offre-visuel .t { font-family: var(--sk-serif); font-style: italic; font-size: 1.15rem; color: var(--sk-text-primary); margin: 0 0 3px; }
.sk-offre-visuel .c { font-family: var(--sk-mono); font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--sk-eyebrow); }
.sk-offre-visuel .p { font-family: var(--sk-mono); font-size: 13px; color: var(--sk-accent); margin-top: 4px; }
html body:not([data-path="login"]) .web-form-wrapper .form-control,
html body:not([data-path="login"]) main.container .form-control,
html body:not([data-path="login"]) main.container .form-select,
html body:not([data-path="login"]) main.container select,
html body:not([data-path="login"]) main.container textarea,
html body:not([data-path="login"]) main.container input[type="text"],
html body:not([data-path="login"]) main.container input[type="email"],
html body:not([data-path="login"]) main.container input[type="password"],
html body:not([data-path="login"]) main.container input[type="number"],
html body:not([data-path="login"]) main.container input[type="date"] {
background: var(--sk-glass-subtle-bg);
border: 1px solid var(--sk-line-strong);
color: var(--sk-text-primary);
border-radius: var(--sk-radius-md);
font-family: var(--sk-sans);
}
html body:not([data-path="login"]) main.container .form-control:focus,
html body:not([data-path="login"]) main.container select:focus,
html body:not([data-path="login"]) main.container textarea:focus {
border-color: var(--sk-accent);
box-shadow: 0 0 0 3px color-mix(in srgb, var(--sk-primary) 25%, transparent);
background: var(--sk-glass-medium-bg);
}
html body:not([data-path="login"]) main.container ::placeholder { color: var(--sk-text-mute); opacity: 1; }
/* Les