/* Folioz — feuille de style commune aux six pages (chemin de fer, panel, profil, annuaire, connexion, démarrage). Plan : un poste de travail de secrétariat de rédaction. Papier gris clair, cartes blanches, encre presque noire ; le rouge Folioz pour la marque, le bleu repère pour la sélection, vert / orange / rouge pour les contrôles. Type : Oxanium (hébergée, celle du logo) pour les titres, la police du système pour le texte, une chasse fixe pour les folios et les heures. Chaque page ajoute sa propre feuille (index.css, admin.css, account.css) ; les composants ci-dessous ne s'y redéfinissent pas. */ @font-face{font-family:"Oxanium";src:url(/brand/Oxanium-VF.woff2) format("woff2");font-weight:200 800;font-display:swap} :root{ --bg:#f2f3f5; --panel:#ffffff; --panel-2:#f7f8f9; --hover:#eef0f3; --ink:#12161a; --muted:#5d6670; --line:#e1e4e8; --line-2:#c9ced5; --empty:#e6e9ed; --brand:#e8472b; --ok:#13803b; --warn:#b36a00; --err:#c8302a; --info:#2462d0; --accent:#12161a; --on-accent:#ffffff; --pubh:#c4cad1; --sel:color-mix(in srgb,var(--info) 11%,transparent); --ring:color-mix(in srgb,var(--info) 40%,transparent); --sh-1:0 1px 2px rgba(16,24,40,.06); --sh-2:0 1px 3px rgba(16,24,40,.08),0 1px 2px rgba(16,24,40,.04); --sh-3:0 16px 40px -12px rgba(16,24,40,.28),0 4px 10px -4px rgba(16,24,40,.10); --scrim:rgba(14,18,22,.5); --f-disp:"Oxanium",system-ui,-apple-system,"Segoe UI",sans-serif; --f-body:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif; --f-mono:ui-monospace,"SF Mono",SFMono-Regular,"Cascadia Mono","Roboto Mono",Menlo,Consolas,monospace; --h:36px; --hs:28px; --r:8px; --r-lg:12px; --r-sm:6px; --fs-xs:12px; --fs-s:13px; --fs-m:14px; --fs-l:16px; --fs-xl:20px; /* échelle unique du texte : légendes et pastilles, secondaire, courant, titre de bloc, titre de page */ --gl:max(16px,env(safe-area-inset-left,0px)); --gr:max(16px,env(safe-area-inset-right,0px)); color-scheme:light; } /* Sombre : choisi à la main (page profil) ou, sans choix, comme l'appareil. Les deux blocs restent identiques. */ @media (prefers-color-scheme: dark){ :root:not([data-theme="light"]){ --bg:#0e1114; --panel:#161a1f; --panel-2:#1b2026; --hover:#20262d; --ink:#e8ebee; --muted:#98a2ac; --line:#262d34; --line-2:#3a434c; --empty:#1f252b; --ok:#4cc27c; --warn:#f0aa3c; --err:#ff6b66; --info:#7ba6ff; --accent:#e8ebee; --on-accent:#12161a; --pubh:#343d45; --sh-1:0 1px 2px rgba(0,0,0,.4); --sh-2:0 1px 3px rgba(0,0,0,.45); --sh-3:0 18px 44px -12px rgba(0,0,0,.7),0 4px 10px -4px rgba(0,0,0,.5); --scrim:rgba(0,0,0,.62); color-scheme:dark; } } :root[data-theme="dark"]{ --bg:#0e1114; --panel:#161a1f; --panel-2:#1b2026; --hover:#20262d; --ink:#e8ebee; --muted:#98a2ac; --line:#262d34; --line-2:#3a434c; --empty:#1f252b; --ok:#4cc27c; --warn:#f0aa3c; --err:#ff6b66; --info:#7ba6ff; --accent:#e8ebee; --on-accent:#12161a; --pubh:#343d45; --sh-1:0 1px 2px rgba(0,0,0,.4); --sh-2:0 1px 3px rgba(0,0,0,.45); --sh-3:0 18px 44px -12px rgba(0,0,0,.7),0 4px 10px -4px rgba(0,0,0,.5); --scrim:rgba(0,0,0,.62); color-scheme:dark; } /* ---------- socle ---------- */ *,*::before,*::after{box-sizing:border-box} [hidden]{display:none!important} html{-webkit-text-size-adjust:100%;text-size-adjust:100%} html,body{background:var(--bg);color:var(--ink)} body{margin:0;font:var(--fs-m)/1.45 var(--f-body);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;padding:0 var(--gr) 40px var(--gl)} body::before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top,0px);z-index:10;background:var(--panel)} h1,h2,h3,h4{font-family:var(--f-disp);letter-spacing:-.01em;margin:0} h2{font-size:var(--fs-xl);font-weight:600;line-height:1.2;margin:0 0 10px} h3{font-size:var(--fs-l);font-weight:600;margin:0 0 6px} h4,.tbl th,.legal .mentions h3{font:600 var(--fs-xs)/1.3 var(--f-body);text-transform:uppercase;letter-spacing:.06em;color:var(--muted)} /* étiquette de section : un seul niveau partout */ h4{margin:16px 0 6px} a{color:inherit} p{margin:6px 0} code,.mono{font-family:var(--f-mono);font-size:.92em;font-variant-numeric:tabular-nums} .muted{color:var(--muted)} .sp{flex:1} :focus-visible{outline:2px solid var(--info);outline-offset:2px} dialog:focus-visible{outline:none} /* la fenêtre elle-même prend le focus à l'ouverture : pas de cadre bleu autour, seulement sur ses commandes */ ::selection{background:color-mix(in srgb,var(--info) 25%,transparent)} /* ---------- icônes (jeu /assets/icons.svg) ---------- */ .ic{width:16px;height:16px;flex:none;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;vertical-align:-3px} .sm .ic{width:14px;height:14px} /* ---------- commandes : un seul gabarit pour button, a.btn, summary.btn, select, input et textarea (hauteur --h) ---------- .sm = petit bouton (--hs) ; variantes .primary (encre : l'action principale, une seule par écran ou fenêtre), .danger-t (suppression : texte rouge, à la ligne), .danger (rouge plein : seulement le bouton de confirmation d'une fenêtre), .ghost (sans cadre), .icon (carré, icône seule). */ button,a.btn,summary.btn,select,input,textarea{font:inherit;color:var(--ink);background:var(--panel);border:1px solid var(--line-2);border-radius:var(--r);padding:0 12px} button,a.btn,summary.btn{display:inline-flex;align-items:center;justify-content:center;gap:7px;height:var(--h);cursor:pointer;text-decoration:none;white-space:nowrap;user-select:none;-webkit-user-select:none;font-weight:500;box-shadow:var(--sh-1);transition:background-color .12s,border-color .12s,color .12s,box-shadow .12s,filter .12s} select,input:not([type=radio]):not([type=checkbox]):not([type=color]):not([type=file]){height:var(--h)} input,textarea{transition:border-color .12s,box-shadow .12s} input::placeholder,textarea::placeholder{color:color-mix(in srgb,var(--muted) 75%,transparent)} textarea{padding:8px 11px;line-height:1.45} input:focus,textarea:focus{outline:0;border-color:var(--info);box-shadow:0 0 0 3px var(--ring)} input[type=checkbox],input[type=radio]{accent-color:var(--accent);width:16px;height:16px;margin:0;padding:0;cursor:pointer;box-shadow:none} button:hover:not(:disabled),a.btn:hover,summary.btn:hover,.menu[open]>summary{background:var(--hover);border-color:var(--line-2)} button:active:not(:disabled){transform:translateY(.5px)} button:disabled{opacity:.5;cursor:default;box-shadow:none} [data-perm][aria-disabled="true"]:not(button){opacity:.5;cursor:default} /* lien ou menu grisés par le rôle, comme un bouton (applyPerms) */ button.sm,a.btn.sm,summary.btn.sm{height:var(--hs);padding:0 10px;font-size:var(--fs-s);gap:5px;border-radius:var(--r-sm)} button.primary,a.btn.primary{background:var(--accent);color:var(--on-accent);border-color:var(--accent);font-weight:600} button.danger{background:var(--err);color:#fff;border-color:var(--err);font-weight:600} button.primary:hover:not(:disabled),a.btn.primary:hover{background:var(--accent);border-color:var(--accent);filter:brightness(1.25)} :root[data-theme="dark"] button.primary:hover:not(:disabled){filter:brightness(.88)} @media (prefers-color-scheme: dark){ :root:not([data-theme="light"]) button.primary:hover:not(:disabled){filter:brightness(.88)} } button.danger:hover:not(:disabled){background:var(--err);border-color:var(--err);filter:brightness(.92)} button.danger-t{color:var(--err)} button.danger-t:hover:not(:disabled){background:color-mix(in srgb,var(--err) 8%,transparent);border-color:color-mix(in srgb,var(--err) 40%,var(--line))} button.ghost,a.btn.ghost{background:transparent;border-color:transparent;box-shadow:none} button.ghost:hover:not(:disabled),a.btn.ghost:hover{background:var(--hover);border-color:transparent} button.icon{padding:0;width:var(--h)} button.icon.sm{width:var(--hs)} button.on:disabled{opacity:1} .on>.ic{color:var(--warn)} /* groupe de boutons : toujours un conteneur flex (écart et alignement identiques), jamais des boutons collés par des espaces */ .btns{display:flex;flex-wrap:wrap;gap:6px 8px;align-items:center} .btns+.btns{margin-top:8px} /* pied d'une fenêtre ou d'un formulaire : actions à droite */ .row{display:flex;gap:8px;justify-content:flex-end;flex-wrap:wrap;margin-top:18px} /* case à cocher ou bouton radio suivi de son texte : la seule classe pour cela (label.opt) */ label.opt{display:inline-flex;gap:7px;align-items:center;font-weight:400;cursor:pointer} /* libellé d'un champ, posé au-dessus : fenêtres, connexion, profil, formulaires du panel. Le panel met --lbl-top à 0 (sa grille et ses colonnes espacent déjà les champs). Une case (.opt) garde sa propre règle. */ dialog.small label:not(.opt),.login-card label,form.stack label,form.create label,.brandform label:not(.opt),#logoLabel{display:block;font-weight:500;margin:var(--lbl-top,14px) 0 5px} .offscreen{position:fixed;top:0;left:0;opacity:0} /* copy() d'ui.js : le texte à copier, invisible */ /* ---------- liste déroulante (ui.js) : tout