/* =====================================================================================================
7G — STYLE COMMUN DES APPLIS (version 1, 02/10/2026, première base du chantier « harmonie »)
-----------------------------------------------------------------------------------------------------
À QUOI ÇA SERT
Une personne qui passe d'une appli 7G à l'autre doit avoir l'impression d'être dans le même logiciel.
Ce fichier réunit ce qui doit être IDENTIQUE partout : couleurs (clair et sombre), police, en-tête,
écran de connexion, boutons, champs, pastilles d'état, fenêtres, toast. Repris de la Bibliothèque 7G
(référence du style 7G) et de l'Astreinte 7G, dont il garde les noms de variables.
MODE D'EMPLOI
1. Charger ce fichier AVANT la feuille propre à l'appli :
puis
2. Charger theme.js de l'appli dans le : il pose data-theme="light|dark" sur (suit le
logiciel 7G, sinon Windows / le téléphone) et la classe html.dans-logiciel dans le logiciel 7G.
3. Ne jamais écrire une couleur en dur dans une appli : utiliser les variables ci-dessous. Une couleur
qui manque s'ajoute ICI (avec sa valeur sombre), pas dans l'appli.
4. Structure attendue de l'en-tête :
5. Écran de connexion : .connexion > .logo-grand + h1 + p.sous + form.carte-connexion (+ p.erreur, p.aide).
6. États d'un objet : .pastille.ok / .bas / .rup (en stock, à surveiller, en défaut) ; .point.ok/.bas/.rup.
7. Toute évolution de ce fichier se répercute dans toutes les applis qui l'utilisent : la noter en bas.
ACCESSIBILITÉ (écart volontaire avec la Bibliothèque)
--muted passe de #6B7D90 (4,0:1 sur blanc, sous le seuil) à #5B6E82 (4,9:1). À reporter dans les autres applis.
===================================================================================================== */
@font-face { font-family: "Lexend"; src: url(/polices/lexend.woff2) format("woff2"); font-weight: 300 700; font-display: swap; }
:root {
/* marque */
--bleu: #0C3D63; --bleu-2: #15507F;
/* surfaces et textes */
--bg: #EEF2F6; --surface: #FFFFFF; --surface2: #F4F7FA; --ink: #0E2233; --ink-soft: #43566A; --muted: #5B6E82;
--line: #DDE4EC; --line-2: #C9D4DE; --accent: #0C3D63; --accent-doux: #DCE8F2;
/* états (bon / à surveiller / en défaut) */
--vert: #1A7A4C; --vert-doux: #DDF3E6; --orange: #8F5409; --orange-doux: #FBEEDB; --rouge: #B3313A; --rouge-doux: #FBE3E3;
/* reliefs, rayons, polices */
--shadow: 0 1px 0 rgba(12,61,99,.04), 0 10px 24px -16px rgba(12,61,99,.30); --shadow-sm: 0 1px 2px rgba(12,61,99,.08);
--shadow-lg: 0 2px 6px rgba(12,61,99,.10), 0 30px 60px -28px rgba(12,61,99,.45);
--r: 12px; --f: "Lexend", "Segoe UI", system-ui, -apple-system, sans-serif; --mono: ui-monospace, "Cascadia Mono", Consolas, monospace;
color-scheme: light;
}
[data-theme="dark"] {
--bg: #0A1724; --surface: #112233; --surface2: #0E1D2C; --ink: #E6EEF5; --ink-soft: #B6C4D2; --muted: #95A8BA;
--line: #1E3347; --line-2: #27405A; --accent: #8DC0EA; --accent-doux: #16304A;
--vert: #5BD094; --vert-doux: #123325; --orange: #EDB062; --orange-doux: #35260F; --rouge: #F48A8F; --rouge-doux: #3A1A1D;
--shadow: 0 1px 0 rgba(0,0,0,.25), 0 12px 26px -16px rgba(0,0,0,.7); --shadow-sm: 0 1px 2px rgba(0,0,0,.3);
--shadow-lg: 0 2px 6px rgba(0,0,0,.35), 0 30px 60px -28px rgba(0,0,0,.8);
color-scheme: dark;
}
/* ---------- base ---------- */
[hidden] { display: none !important; }
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; background: var(--bg); color: var(--ink); font: 400 14px/1.45 var(--f); -webkit-font-smoothing: antialiased; }
button, input, select, textarea { font: inherit; color: inherit; }
a { color: var(--accent); }
svg.ic, .logo svg { fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; flex: none; }
svg.ic { width: 18px; height: 18px; }
:focus-visible { outline: 3px solid #2E6DA4; outline-offset: 2px; }
[data-theme="dark"] :focus-visible { outline-color: #8DC0EA; }
.chiffre { font-family: var(--mono); font-variant-numeric: tabular-nums; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; animation: none !important; } }
/* ---------- boutons ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 7px; min-height: 38px; padding: 0 14px; border-radius: 10px; border: 1px solid var(--line-2);
background: var(--surface); color: var(--ink); font-weight: 500; cursor: pointer; white-space: nowrap; text-decoration: none; transition: border-color .15s, background .15s; }
.btn:hover { border-color: var(--accent); }
.btn:disabled { opacity: .5; cursor: default; }
.btn.primaire { background: #0C3D63; border-color: #0C3D63; color: #fff; }
.btn.primaire:hover { background: #15507F; }
.btn.danger { color: var(--rouge); border-color: transparent; background: none; }
.btn.danger:hover { border-color: var(--rouge); }
.btn.petit { min-height: 30px; padding: 0 10px; font-size: 12.5px; border-radius: 8px; }
/* ---------- champs ---------- */
input[type=text], input[type=search], input[type=password], input[type=number], input[type=date], input[type=email], input[type=tel], input:not([type]), select, textarea {
width: 100%; min-height: 40px; padding: 8px 12px; border: 1px solid var(--line-2); border-radius: 10px; background: var(--surface); outline: none; }
textarea { min-height: 90px; resize: vertical; }
input:focus, select:focus, textarea:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-doux); }
label.champ { display: grid; gap: 5px; font-size: 12.5px; color: var(--ink-soft); font-weight: 500; }
/* ---------- pastilles et points d'état ---------- */
.pastille { display: inline-flex; align-items: center; gap: 5px; height: 22px; padding: 0 9px; border-radius: 999px; font-size: 11.5px; font-weight: 600; white-space: nowrap; background: var(--surface2); color: var(--ink-soft); }
.pastille.ok { background: var(--vert-doux); color: var(--vert); }
.pastille.bas { background: var(--orange-doux); color: var(--orange); }
.pastille.rup { background: var(--rouge-doux); color: var(--rouge); }
.point { width: 9px; height: 9px; border-radius: 50%; flex: none; background: var(--line-2); }
.point.ok { background: var(--vert); } .point.bas { background: var(--orange); } .point.rup { background: var(--rouge); }
/* ---------- écran de connexion ---------- */
.connexion { min-height: 100dvh; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; padding: 24px 16px;
background: radial-gradient(120% 85% at 50% 0%, #17568A 0%, #0C3D63 45%, #061A2B 100%); color: #EAF2F9; }
.logo-grand { width: 64px; height: 64px; border-radius: 18px; display: grid; place-items: center; background: linear-gradient(145deg, #3B7FC0, #0C3D63);
box-shadow: 0 18px 36px -14px rgba(0,0,0,.6), inset 0 1px 0 rgba(255,255,255,.3); }
.logo-grand svg { width: 32px; height: 32px; stroke: #fff; fill: none; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.connexion h1 { margin: 6px 0 0; font-size: 24px; font-weight: 600; color: #fff; }
.connexion .sous { margin: -4px 0 8px; color: rgba(234,242,249,.78); font-size: 13px; text-align: center; }
.carte-connexion { width: 100%; max-width: 380px; display: grid; gap: 12px; padding: 22px; border-radius: 18px; background: var(--surface); color: var(--ink); box-shadow: 0 2px 6px rgba(0,0,0,.12), 0 40px 80px -30px rgba(0,0,0,.55); }
.carte-connexion label { display: grid; gap: 5px; font-size: 12.5px; color: var(--ink-soft); font-weight: 500; }
.erreur { color: var(--rouge); font-size: 13px; min-height: 1em; margin: 0; text-align: center; }
.aide { margin: 0; color: var(--muted); font-size: 12.5px; text-align: center; }
/* ---------- en-tête ---------- */
.entete { position: sticky; top: 0; z-index: 20; display: flex; align-items: center; gap: 14px; min-height: 60px; padding: 8px 18px; padding-top: max(8px, env(safe-area-inset-top));
background: color-mix(in srgb, var(--surface) 90%, transparent); backdrop-filter: saturate(1.4) blur(14px); border-bottom: 1px solid var(--line); }
.marque { display: flex; align-items: center; gap: 10px; color: var(--ink); text-decoration: none; flex: none; }
.logo { width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center; background: linear-gradient(145deg, #3B7FC0, #0C3D63); }
.logo svg { stroke: #fff; width: 20px; height: 20px; }
.nom { display: grid; font-weight: 600; font-size: 15px; line-height: 1.1; }
.nom small { font-weight: 400; font-size: 11px; color: var(--muted); }
.onglets { display: flex; gap: 4px; padding: 3px; border-radius: 10px; background: var(--surface2); border: 1px solid var(--line); }
.onglets a { padding: 6px 14px; border-radius: 7px; color: var(--muted); font-weight: 500; font-size: 13px; text-decoration: none; white-space: nowrap; }
.onglets a[aria-current="page"], .onglets a.on { background: var(--surface); color: var(--ink); box-shadow: var(--shadow-sm); }
.espace { flex: 1; }
.moi { width: 36px; height: 36px; border-radius: 50%; border: 0; background: #0C3D63; color: #fff; font-weight: 600; font-size: 12.5px; cursor: pointer; flex: none; }
html.dans-logiciel .moi { display: none; }
/* ---------- fenêtre (dialogue) ---------- */
.voile { position: fixed; inset: 0; z-index: 50; background: rgba(6,20,33,.55); display: grid; place-items: center; padding: 16px; }
.fenetre { width: min(460px, 100%); max-height: 92dvh; overflow: auto; background: var(--surface); color: var(--ink); border-radius: 18px; padding: 20px; display: grid; gap: 12px; box-shadow: 0 30px 80px -20px rgba(0,0,0,.6); }
.fenetre > header { display: flex; align-items: center; gap: 10px; }
.fenetre h2 { margin: 0; flex: 1; font-size: 17px; font-weight: 600; }
.fermer { width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--line); background: var(--surface2); cursor: pointer; color: var(--ink); }
/* ---------- toast et vide ---------- */
.toast { position: fixed; left: 50%; bottom: 24px; transform: translate(-50%, 20px); opacity: 0; background: var(--ink); color: var(--bg); padding: 10px 16px; border-radius: 10px;
font-size: 13px; font-weight: 500; transition: opacity .2s, transform .2s; pointer-events: none; z-index: 60; max-width: calc(100% - 32px); }
.toast.on { opacity: 1; transform: translate(-50%, 0); }
html.dans-logiciel .toast { bottom: 100px; }
.vide { padding: 26px 16px; text-align: center; color: var(--muted); }
/* Journal des évolutions
v1 (02/10/2026) : création à partir de la Bibliothèque 7G et de l'Astreinte 7G, pour l'Inventaire (nouvelle interface). */