/* =========================================================== Access'Hôtel · Jetons de design Repris de documents/2026-08_charte-graphique-accesshotel/tokens.css (v1.2). Ce fichier est le SOCLE COMMUN, destiné à être repris tel quel par les autres applications (gestion de stock, cockpit, interface unifiée). Ne rien y ajouter qui soit propre au portail SAV : les composants et les règles d'écran vivent dans styles.css. RÈGLE FONDATRICE : la marque a DEUX couleurs. Aucune autre nuance d'aubergine ni de cyan n'existe. Les états (survol, fond de zone, ligne survolée) s'obtiennent par TRANSPARENCE de ces deux couleurs ou par filtre de luminosité, jamais en déclarant une nouvelle valeur. Les neutres et les couleurs d'état plus bas ne sont pas des couleurs de marque : ce sont des nécessités fonctionnelles d'interface (lire un texte, signaler une alerte). Elles ne représentent jamais Access'Hôtel. Polices : voir assets/fonts/LISEZ-MOI.md. Elegant Sans est volontairement absente, sa licence web n'est pas vérifiée. =========================================================== */ @font-face { font-family: 'Bebas Neue'; src: url('assets/fonts/BebasNeue-Regular.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; } /* Manrope en fonte variable : une seule ressource couvre 400 à 700. */ @font-face { font-family: 'Manrope'; src: url('assets/fonts/Manrope-latin.woff2') format('woff2'); font-weight: 400 700; font-style: normal; font-display: swap; 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: 'Manrope'; src: url('assets/fonts/Manrope-latin-ext.woff2') format('woff2'); font-weight: 400 700; font-style: normal; font-display: swap; unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, 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; } :root { /* ========== LES DEUX COULEURS DE LA MARQUE ========== */ --ah-aubergine: #6C2961; /* structure : logo, navigation, titres, en-têtes de tableaux, boutons, texte coloré */ --ah-cyan: #1FA1CC; /* accent : aplats, pictogrammes, filets. JAMAIS de texte ni de fond de bouton : 3,0:1 sur blanc */ --ah-aubergine-rgb: 108 41 97; --ah-cyan-rgb: 31 161 204; /* ========== ÉTATS, obtenus par transparence des deux couleurs ========== Ce ne sont pas de nouvelles couleurs : c'est la couleur de marque à une opacité donnée, posée sur blanc. */ --ah-aubergine-fond: rgb(var(--ah-aubergine-rgb) / .07); /* fond de bandeau, encadré */ --ah-aubergine-ligne: rgb(var(--ah-aubergine-rgb) / .18); /* bordure sur fond teinté */ --ah-aubergine-survol: rgb(var(--ah-aubergine-rgb) / .12); /* ligne de tableau survolée */ --ah-cyan-fond: rgb(var(--ah-cyan-rgb) / .09); --ah-cyan-ligne: rgb(var(--ah-cyan-rgb) / .22); /* Assombrissement au survol d'un aplat de marque : filtre, pas de couleur. */ --ah-presse: brightness(.86); /* ========== NEUTRES (hors charte, fonctionnels) ========== */ --ah-white: #FFFFFF; --ah-surface: #F5F5F7; /* fond d'application */ --ah-surface-2: #FAFAFB; /* zone secondaire, ligne paire de tableau */ --ah-line: #E9E8EC; /* filet standard */ --ah-line-strong: #DEDCE3; /* séparateur, bordure de champ */ --ah-ink: #211B27; /* texte principal */ --ah-ink-soft: #574F5E; /* texte secondaire */ --ah-ink-mute: #8A8590; /* libellés, aides de saisie, texte désactivé */ /* ========== ÉTATS FONCTIONNELS (hors charte) ========== Signalent une information, ne représentent jamais la marque. */ --ah-ok: #2E7D32; --ah-ok-fond: #E4F2EC; --ah-warn: #B26A00; --ah-warn-fond: #FDF3E2; --ah-danger: #C62828; --ah-danger-fond: #FDECEA; --ah-neutral: #6B7280; --ah-neutral-fond: #EEEDF0; /* Filets des encadrés d'état, obtenus par transparence de la couleur d'état (même principe que les états de marque : aucune nuance nouvelle déclarée). */ --ah-ok-ligne: rgb(46 125 50 / .30); --ah-warn-ligne: rgb(178 106 0 / .30); --ah-danger-ligne: rgb(198 40 40 / .28); /* ========== SÉRIES DE GRAPHIQUES ========== Les deux couleurs de marque, puis leurs transparences. Aucune couleur ajoutée. Au-delà de six séries, regrouper le reste en « Autres ». */ --ah-serie-1: #6C2961; --ah-serie-2: #1FA1CC; --ah-serie-3: rgb(var(--ah-aubergine-rgb) / .62); --ah-serie-4: rgb(var(--ah-cyan-rgb) / .62); --ah-serie-5: rgb(var(--ah-aubergine-rgb) / .34); --ah-serie-6: rgb(var(--ah-cyan-rgb) / .34); /* ========== TYPOGRAPHIE ========== titre : Bebas Neue, la police du logo. Capitales seules, jamais sous 14 px, jamais en texte courant. texte : Manrope, pour la lisibilité en petit corps et en tableau dense. */ --ah-font-titre: 'Bebas Neue', 'Haettenschweiler', 'Arial Narrow', sans-serif; --ah-font: 'Manrope', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; --ah-font-mono: ui-monospace, 'Cascadia Mono', Consolas, monospace; --ah-titre-tracking: .03em; --ah-fs-display: 2.75rem; /* 44 px · Bebas Neue */ --ah-fs-h1: 2rem; /* 32 px · Bebas Neue */ --ah-fs-h2: 1.5rem; /* 24 px · Bebas Neue */ --ah-fs-h3: 1.125rem; /* 18 px */ --ah-fs-body: 0.9375rem; /* 15 px · texte courant */ --ah-fs-sm: 0.875rem; /* 14 px · tableaux, formulaires */ --ah-fs-xs: 0.75rem; /* 12 px · libellés, badges */ --ah-lh-tight: 1.15; --ah-lh-body: 1.55; /* ========== FORMES ET PROFONDEUR ========== */ --ah-radius: 14px; /* cartes, modales */ --ah-radius-sm: 10px; /* boutons, champs */ --ah-radius-xs: 6px; /* badges, pastilles */ --ah-shadow-sm: 0 1px 2px rgba(33,27,39,.04), 0 1px 3px rgba(33,27,39,.06); --ah-shadow-md: 0 2px 6px rgba(33,27,39,.05), 0 8px 24px rgba(33,27,39,.07); --ah-shadow-lg: 0 8px 30px rgba(33,27,39,.10), 0 24px 60px rgba(33,27,39,.10); /* ========== RYTHME (multiples de 4) ========== */ --ah-sp-1: 4px; --ah-sp-2: 8px; --ah-sp-3: 12px; --ah-sp-4: 16px; --ah-sp-5: 24px; --ah-sp-6: 32px; --ah-sp-7: 48px; --ah-sp-8: 64px; /* ========== GABARIT ========== */ --ah-header-h: 64px; --ah-content-max: 1280px; }