/* ===================================================================== Socle design commun aux deux consoles kelWINE (lot B1) ===================================================================== Chargé AVANT la feuille propre à chaque console. Il ne peint aucun écran : il ne fait que poser le vocabulaire. Repeindre les écrans, c'est le lot B2. Deux consoles, deux palettes, un seul jeu de noms. Le choix se fait par l'attribut data-console sur la balise html : console super-admin, gris et taupe espace établissement, marque kelWINE Les noms de jetons existants (--bg, --ink, --muted, --line, --accent, --radius, --ok, --warn, --danger) sont conservés tels quels : les deux feuilles s'en servent déjà partout, et ce lot ne doit rien déplacer. ===================================================================== */ :root { /* --- Espacement : une seule échelle, six crans ------------------- */ /* Tout écart dans les consoles doit sortir d'ici. Les valeurs intermédiaires sont ce qui donne l'aspect bricolé. */ --esp-1: 4px; --esp-2: 8px; --esp-3: 12px; --esp-4: 16px; --esp-5: 24px; --esp-6: 32px; /* --- Typographie ------------------------------------------------- */ /* Inter pour le texte, avec la pile système en secours : si la police ne se charge pas, l'interface reste lisible tout de suite. */ --police: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; --police-mono: ui-monospace, 'Cascadia Code', Consolas, monospace; --txt-xs: .72rem; /* mentions, en-têtes de tableau */ --txt-sm: .82rem; /* texte secondaire, aide */ --txt-md: .94rem; /* texte courant */ --txt-lg: 1.12rem; /* sous-titres */ --txt-xl: 1.4rem; /* titres de page */ --txt-2xl: 1.75rem; /* chiffres clés des tableaux de bord */ --interligne-serre: 1.25; --interligne: 1.5; /* --- Arrondis ---------------------------------------------------- */ --r-sm: 6px; --r-md: 10px; --r-lg: 16px; --r-plein: 999px; --radius: var(--r-md); /* nom historique, conservé */ /* --- Ombres : discrètes, jamais décoratives ---------------------- */ /* Une ombre sert à décoller un élément du fond, pas à faire joli. */ --ombre-1: 0 1px 2px rgba(0, 0, 0, .05); --ombre-2: 0 2px 8px rgba(0, 0, 0, .07); --ombre-3: 0 8px 28px rgba(0, 0, 0, .12); /* modales seulement */ /* --- Couleurs d'état, communes aux deux consoles ----------------- */ /* Vérifiées à 4,5:1 minimum sur les deux fonds de console et sur blanc, et en texte blanc posé dessus. « attention » a été foncé de #B25E00 à #AB5A00 pour atteindre le seuil. */ --succes: #1A7F47; --attention: #AB5A00; --erreur: #B3261E; --information: #1C5FD6; /* Fonds atténués correspondants, pour les badges et les bandeaux. */ --succes-fond: #E3F3EA; --attention-fond: #FBEEDD; --erreur-fond: #FBE7E5; --information-fond: #E5EEFC; /* Noms historiques conservés : les deux consoles les utilisent déjà. */ --ok: var(--succes); --warn: var(--attention); --danger: var(--erreur); } /* ===================================================================== Console super-admin : gris et taupe Palette actée. Volontairement sobre et sans couleur de marque : c'est l'outil de pilotage interne, il ne doit pas se confondre avec l'espace client. ===================================================================== */ :root[data-console="admin"] { --bg: #F4F3F1; --surface: #FFFFFF; --bg2: var(--surface); /* nom historique */ --ink: #2E2B28; --muted: #6F6860; --line: #D8D4CF; --accent: #8A7E70; /* décor : filets, icônes, gros chiffres */ --accent-fort: #6B6055; /* texte et boutons, contraste AA */ --accent-sombre: #4A443D; /* barre supérieure, survol */ --on-accent: #FFFFFF; --tint: #F1EFEC; /* survol de ligne, fonds neutres */ --tint-soft: #F8F7F5; /* --- Barre latérale (ajustement consoles) ------------------------ */ /* Fond sombre, pour détacher la navigation du contenu. Le libellé de groupe passe de #8E877E à #9C948A : il lui manquait 0,5 point pour tenir le 4,5:1 sur ce fond. */ --barre-fond: #2E2B28; --barre-texte: #CFC8C0; --barre-muted: #9C948A; --barre-actif: #C4B8A8; /* filet de la rubrique courante */ /* Noms historiques de styles.css, conservés le temps du lot B2. */ --accent-strong: var(--accent-fort); --accent-dark: var(--accent-sombre); } /* ===================================================================== Espace établissement : couleur de marque kelWINE Le bordeaux kelWINE, pas le thème choisi par l'établissement pour sa carte cliente. La console est un outil kelWINE ; l'aperçu du thème du client vit dans le panneau de personnalisation, sur la vraie WebApp. ===================================================================== */ :root[data-console="etab"] { --bg: #F6F4F2; --surface: #FFFFFF; --bg2: var(--surface); --ink: #2A2224; --muted: #6E6266; --line: #E2DAD7; --accent: #6E1F2A; /* bordeaux kelWINE */ --accent-fort: #5A1822; --accent-sombre: #431219; --on-accent: #FFFFFF; --tint: #F2EDEB; --tint-soft: #FAF8F7; /* --- Barre latérale (ajustement consoles) ------------------------ */ --barre-fond: #431219; --barre-texte: #E7D6DB; --barre-muted: #B08792; --barre-actif: #D98AA0; --accent-strong: var(--accent-fort); --accent-dark: var(--accent-sombre); } /* ===================================================================== Bases partagées Rien de plus que le strict nécessaire : la mise en forme des écrans reste dans la feuille de chaque console jusqu'au lot B2. ===================================================================== */ body { font-family: var(--police); font-size: var(--txt-md); line-height: var(--interligne); -webkit-font-smoothing: antialiased; } /* Contour de focus visible et homogène partout. Une console se pilote aussi au clavier. */ :where(a, button, input, select, textarea, summary, [tabindex]):focus-visible { outline: 2px solid var(--accent-fort); outline-offset: 2px; } /* Respect du réglage système : pas d'animation pour qui n'en veut pas. */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; } }