/* =========================================================================== Awoui — habillage Apex d'Element Web. Injectee par le nginx du conteneur (sub_filter), PAS compilee dans Element : une mise a jour de l'image garde l'habillage. PORTEE : les ecrans d'AUTHENTIFICATION (ce que voit un visiteur qui arrive) et le chrome commun. L'interieur de l'application est habille par les deux themes personnalises de config.json, qui eux passent par les variables d'Element — c'est le mecanisme prevu, et il vaut mieux que du CSS force. Les valeurs viennent de apex/assets/tokens.css. Aucune couleur inventee. =========================================================================== */ :root{ --aw-bg-0:#0A0D16; --aw-bg-1:#0D1019; --aw-bg-2:#10141F; --aw-bg-3:#161B28; --aw-line:#232A3A; --aw-line-2:#2C3242; --aw-text:#ECEEF5; --aw-muted:#9AA3B6; --aw-faint:#8A93A8; --aw-emerald:#3FE0A2; --aw-cyan:#57C8E6; --aw-iris:#8A7CF6; --aw-on-accent:#06130D; --aw-grad-fill:linear-gradient(100deg,#3FE0A2,#57C8E6 48%,#8A7CF6); --aw-glass:rgba(16,20,31,.88); --aw-glass-line:rgba(255,255,255,.10); --aw-shadow:0 34px 70px -28px rgba(0,0,0,.75); --aw-btn-label-shadow:none; --fd:"AwouiDisplay","Space Grotesk","SF Pro Display",system-ui,sans-serif; --fb:"AwouiBody","Inter",-apple-system,"Segoe UI",Roboto,system-ui,sans-serif; } /* Variante claire. Element pose sa classe de theme sur ; on couvre les trois formes rencontrees selon les versions plutot que d'en parier une. */ body.cpd-theme-light{ --aw-bg-0:#F8F9FC; --aw-bg-1:#F2F3F8; --aw-bg-2:#EBEDF2; --aw-bg-3:#DFE2E8; --aw-line:#D5D8E0; --aw-line-2:#C6CAD5; --aw-text:#0F1524; --aw-muted:#4A5468; --aw-faint:#5A6478; --aw-emerald:#007347; --aw-cyan:#006D84; --aw-iris:#6257B5; --aw-on-accent:#FFFFFF; --aw-glass:rgba(255,255,255,.94); --aw-glass-line:rgba(15,21,36,.09); --aw-shadow:0 18px 40px -14px rgba(15,21,36,.16); /* En clair le blanc sur l'emeraude d'origine ne tient que 1,69:1 : l'ombre portee du libelle le rattrape sans toucher au degrade de marque. */ --aw-btn-label-shadow:0 1px 2px rgba(0,0,0,.38); } /* ---- la page d'authentification ---- */ .mx_AuthPage{ background: radial-gradient(1100px 620px at 18% -10%, rgba(63,224,162,.16), transparent 62%), radial-gradient(900px 560px at 84% 6%, rgba(138,124,246,.14), transparent 60%), linear-gradient(180deg, rgba(10,13,22,.86), rgba(10,13,22,.97)), url("awoui-fond.jpg") center/cover no-repeat, var(--aw-bg-0) !important; font-family:var(--fb); } body.cpd-theme-light .mx_AuthPage{ background: radial-gradient(1100px 620px at 18% -10%, rgba(0,115,71,.10), transparent 62%), radial-gradient(900px 560px at 84% 6%, rgba(98,87,181,.10), transparent 60%), linear-gradient(180deg, rgba(248,249,252,.90), rgba(248,249,252,.98)), url("awoui-fond.jpg") center/cover no-repeat, var(--aw-bg-0) !important; } /* la carte : le verre Apex, pas la boite blanche d'Element */ .mx_AuthPage_modal{ background:var(--aw-glass) !important; border:1px solid var(--aw-glass-line); border-radius:18px; box-shadow:var(--aw-shadow); backdrop-filter:blur(20px) saturate(180%); -webkit-backdrop-filter:blur(20px) saturate(180%); overflow:hidden; } .mx_AuthBody{ background:transparent !important; color:var(--aw-text) !important; font-family:var(--fb); } .mx_AuthBody h1,.mx_AuthBody h2,.mx_AuthHeader_title{ font-family:var(--fd); color:var(--aw-text) !important; letter-spacing:-.01em; text-wrap:balance; } .mx_AuthBody p,.mx_AuthBody label,.mx_AuthBody .mx_AuthBody_text{ color:var(--aw-muted) !important; } .mx_AuthHeader_logo img{ max-height:42px; width:auto; } /* champs */ .mx_AuthBody .mx_Field input, .mx_AuthBody .mx_Field select, .mx_AuthBody .mx_Field textarea{ background:var(--aw-bg-2) !important; color:var(--aw-text) !important; border:1px solid var(--aw-line-2) !important; border-radius:10px; } .mx_AuthBody .mx_Field input:focus{ border-color:var(--aw-emerald) !important; outline:2px solid color-mix(in srgb, var(--aw-emerald) 40%, transparent); outline-offset:1px; } .mx_AuthBody .mx_Field label{ /* PAS transparent : l'etiquette flottante d'Element se pose SUR le bord du champ et doit le decouper. Transparente, elle chevauche le trait et le texte — defaut vu a l'ecran le 08/09/2026. Elle porte donc le fond du champ, exactement comme Element le prevoit. */ background:var(--aw-bg-2) !important; color:var(--aw-faint) !important; padding:0 6px; } /* le bouton principal : l'aplat de marque */ .mx_AuthBody .mx_Login_submit, .mx_AuthPage button[type="submit"], .mx_AuthPage .mx_AccessibleButton_kind_primary{ background:var(--aw-grad-fill) !important; color:var(--aw-on-accent) !important; text-shadow:var(--aw-btn-label-shadow); border:0 !important; border-radius:999px !important; font-family:var(--fd); font-weight:600; letter-spacing:.01em; padding:11px 22px; transition:transform .15s ease, box-shadow .15s ease; } .mx_AuthBody .mx_Login_submit:hover, .mx_AuthPage .mx_AccessibleButton_kind_primary:hover{ transform:translateY(-1px); box-shadow:0 14px 40px -10px rgba(63,224,162,.6); } .mx_AuthBody a,.mx_AuthPage a{ color:var(--aw-cyan); } /* le pied de page d'Element renvoie a element.io : on le neutralise, le notre le remplace (injecte dans , hors du rendu React). */ .mx_AuthFooter{ display:none !important; } /* ---- le bandeau et le pied Apex, injectes hors de l'application ---- Ils n'existent QUE sur l'ecran d'authentification : une fois la session ouverte, l'application prend tout l'ecran, comme prevu. */ .awoui-chrome{ display:none; } body:has(.mx_AuthPage) .awoui-chrome{ display:flex; } .awoui-bandeau{ position:fixed; inset:0 0 auto 0; z-index:60; align-items:center; justify-content:space-between; gap:16px; padding:14px clamp(16px,4vw,40px); font-family:var(--fb); pointer-events:none; } .awoui-bandeau > *{ pointer-events:auto; } .awoui-bandeau img{ height:30px; width:auto; display:block; } .awoui-bandeau a{ color:var(--aw-muted); text-decoration:none; font-size:14px; display:inline-flex; align-items:center; gap:7px; border:1px solid var(--aw-glass-line); border-radius:999px; padding:7px 14px; background:var(--aw-glass); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px); } .awoui-bandeau a:hover{ color:var(--aw-text); border-color:var(--aw-line-2); } .awoui-pied{ position:fixed; inset:auto 0 0 0; z-index:60; align-items:center; justify-content:center; gap:8px 22px; flex-wrap:wrap; padding:16px clamp(16px,4vw,40px); font-family:var(--fb); font-size:13px; color:var(--aw-faint); pointer-events:none; } .awoui-pied a{ color:var(--aw-faint); text-decoration:none; pointer-events:auto; } .awoui-pied a:hover{ color:var(--aw-text); text-decoration:underline; } .awoui-pied span{ opacity:.6; } /* Sous 720 px de haut, les deux barres mangeraient la carte de connexion. */ @media (max-height:720px), (max-width:520px){ .awoui-pied{ display:none !important; } } /* Le logo n'est pas une pastille : il annule le style de bouton du bandeau. */ .awoui-bandeau a.awoui-marque{ border:0; background:none; padding:0; backdrop-filter:none; -webkit-backdrop-filter:none; } .awoui-bandeau .awoui-droite{ display:inline-flex; align-items:center; gap:10px; pointer-events:auto; } /* Le site est bilingue : le lien mene a la page chinoise de la messagerie, qui existe (zh/services/chat.html), et non a une impasse. */ .awoui-bandeau a.awoui-langue{ font-size:13px; padding:7px 12px; } /* =========================================================================== LES JETONS COMPOUND — c'est ICI que se joue l'apparence d'Element. Mesure du 07/09/2026 sur le DOM servi : l'interface moderne d'Element ne lit PAS les couleurs de `custom_themes` (config.json), qui ne pilotent que des surfaces heritees. Elle lit des variables `--cpd-color-*` posees sur . Redefinir ces jetons est donc le seul moyen d'habiller l'application sans la recompiler — et c'est stable : ce sont des noms de jetons, pas des classes hachees comme `_button_1nw83_8`, qui changent a chaque version d'Element. =========================================================================== */ body.cpd-theme-dark{ --cpd-color-theme-bg:#0A0D16; --cpd-color-bg-canvas-default:#0A0D16; --cpd-color-bg-canvas-disabled:#10141F; --cpd-color-bg-subtle-primary:#161B28; --cpd-color-bg-subtle-secondary:#10141F; --cpd-color-bg-action-secondary-rest:#10141F; --cpd-color-text-primary:#ECEEF5; --cpd-color-text-secondary:#9AA3B6; --cpd-color-text-action-accent:#3FE0A2; --cpd-color-text-on-solid-primary:#06130D; --cpd-color-bg-action-primary-rest:#3FE0A2; --cpd-color-bg-action-primary-hovered:#6FE9BE; --cpd-color-bg-action-primary-pressed:#2FCB8E; --cpd-color-border-interactive-primary:#5D6980; --cpd-color-border-interactive-secondary:#2C3242; --cpd-color-icon-primary:#ECEEF5; --cpd-color-icon-secondary:#9AA3B6; } body.cpd-theme-light{ --cpd-color-theme-bg:#F8F9FC; --cpd-color-bg-canvas-default:#F8F9FC; --cpd-color-bg-canvas-disabled:#EBEDF2; --cpd-color-bg-subtle-primary:#DFE2E8; --cpd-color-bg-subtle-secondary:#EBEDF2; --cpd-color-bg-action-secondary-rest:#F8F9FC; --cpd-color-text-primary:#0F1524; --cpd-color-text-secondary:#4A5468; /* L'emeraude de marque ne tient que 1,69:1 avec du blanc : en clair on descend a l'encre emeraude du site, qui tient 4,5:1. Meme arbitrage que tokens.css, pas une couleur inventee. */ --cpd-color-text-action-accent:#007347; --cpd-color-text-on-solid-primary:#FFFFFF; --cpd-color-bg-action-primary-rest:#007347; --cpd-color-bg-action-primary-hovered:#005E3A; --cpd-color-bg-action-primary-pressed:#004C2F; --cpd-color-border-interactive-primary:#7C818C; --cpd-color-border-interactive-secondary:#C6CAD5; --cpd-color-icon-primary:#0F1524; --cpd-color-icon-secondary:#5A6478; } /* La typographie du site. Native, aucun fichier servi : les polices Awoui sont declarees en src:local() cote site — ici on se contente de demander la meme pile, et les replis font le reste. Les familles emoji sont conservees, sans quoi les reactions perdent leur rendu couleur. */ body.cpd-theme-dark, body.cpd-theme-light{ --cpd-font-family-sans:"AwouiBody","Inter",-apple-system,"Segoe UI",Roboto,system-ui, Twemoji,"Apple Color Emoji","Segoe UI Emoji",sans-serif,"Noto Color Emoji"; } /* ---- les boutons des ecrans d entree ---- `data-kind` est un attribut de donnees stable ; la classe `_button_1nw83_8` ne l est pas. On vise l attribut. Le degrade reste cantonne aux ecrans d entree : a l interieur de l application, l aplat uni des jetons ci-dessus suffit et ne fatigue pas. */ .mx_AuthPage [data-kind="primary"]{ background:var(--aw-grad-fill) !important; color:var(--aw-on-accent) !important; text-shadow:var(--aw-btn-label-shadow); border:0 !important; font-weight:600; } .mx_AuthPage [data-kind="primary"]:hover{ filter:brightness(1.06); box-shadow:0 14px 40px -12px rgba(63,224,162,.55); } /* L inscription libre est fermee cote serveur : ce bouton menerait a un mur. On le retire plutot que de laisser le visiteur le decouvrir. Le jour ou le SSO Keycloak sera branche, Element affichera son propre bouton de connexion unique et cette regle n aura plus d objet. */ .mx_AuthPage a[href="#/register"], .mx_AuthPage a[href="#/register"] + *{ display:none !important; } /* Le logo du panneau d accueil pointe vers element.io. On ne peut pas changer une destination en CSS ; on rend le lien inerte. Le logo reste une marque, et c est celui du bandeau, en haut a gauche, qui ramene sur awoui.com. */ .mx_DefaultWelcome_logo{ pointer-events:none; } .mx_DefaultWelcome_logo img{ max-height:56px; width:auto; } /* L'invite « Nouveau ici ? Creez un compte » de l'ecran de connexion. L'inscription libre est fermee cote serveur : ce lien mene a un mur. Element finit par le retirer lui-meme apres avoir interroge le serveur, mais il apparait AVANT cette reponse — on le masque donc des le premier rendu. */ .mx_AuthBody_changeFlow{ display:none !important; } /* Le calque flou d'Element sous la carte. Mesure du 08/09/2026 : c'est un element DISTINCT de la carte, qui affiche `themes/element/img/backgrounds/lake.jpg` floutee a 40 px. Comme on a retire `welcome_background_url` de config.json, Element retombait sur cette image par defaut : un aplat clair sous une carte translucide, qui lavait le titre et les liens dans les DEUX themes. On le neutralise — la carte porte deja son propre `backdrop-filter` sur le fond Apex, c'est le verre du site. */ .mx_AuthPage_modalBlur{ background:none !important; filter:none !important; } /* LE VOILE BLANC — la cause de la « carte grise ». Mesure du 08/09/2026 : habiller `.mx_AuthPage_modal` ne suffit pas. Element pose À L'INTÉRIEUR un `.mx_AuthPage_modalContent` en `rgba(255,255,255,.59)`, avec z-index 1, qui couvre toute la surface. En thème CLAIR il est invisible (blanc sur blanc) ; en SOMBRE il délave la carte en gris uniforme et lave le texte. C'est pour ça que le défaut ne se voyait que dans un thème sur deux — et pourquoi toutes mes mesures sur `.mx_AuthPage_modal` disaient « correct » pendant que l'écran disait le contraire. Le calque qui peint n'était pas celui que je regardais. On le rend transparent : le verre, le bord, l'arrondi et l'ombre sont déjà portés par le conteneur. */ .mx_AuthPage_modalContent{ background:transparent !important; }